:root {
  --focus-color: #0d6efd;
  --focus-color-light: rgba(13, 110, 253, 0.25);
  --focus-outline-width: 2px;
  --focus-box-shadow-spread: 4px;
}

/* 基本構造 */
main {
  padding-top: 0;
}

body {
  background-color: #f8f9fa;
  font-family: 'Noto Sans JP', sans-serif;
}

/* スクロール補正 */
.scroll-offset {
  height: 80px;
  margin-top: -80px;
  pointer-events: none;
  visibility: hidden;
}

.scroll-offset:first-child {
  height: 100px;
  margin-top: -100px;
}

/* セクション・表示調整 */
.section-divider {
  border-bottom: 2px solid #f0f0f0;
  margin: 0;
  padding-bottom: 1rem;
  scroll-margin-top: 80px;
}

#news {
  padding-top: 56px;
}

#news .container {
  padding-top: 2rem;
}

/* ヘッダー・フッター */
.bg-dark-custom,
.footer-custom {
  background-color: #222 !important;
  color: #f8f9fa;
}

.footer-custom a:hover {
  color: #f0f0f0;
}

/* ハンバーガー */
.navbar-toggler {
  border: none;
}

.navbar-brand img {
  height: 36px;
  max-height: 36px;
  vertical-align: middle;
}

/* スマホ表示用（画面幅 576px 以下） */
@media (max-width: 576px) {
  .navbar {
    display: flex;
    align-items: center;
  }

  .navbar-brand img {
    height: 20px;
    margin: 0;
    transform: translateY(-3px);
  }
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}

.hamburger-icon .bar {
  height: 3px;
  background-color: #f8f9fa;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger-icon.active .top-bar {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger-icon.active .middle-bar {
  opacity: 0;
}
.hamburger-icon.active .bottom-bar {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* 共通フォーカススタイル */
.navbar-toggler:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
.news-page-btn:focus:not(:focus-visible),
.news-nav-btn:focus:not(:focus-visible),
.accordion-button:focus,
.accordion-button:focus-visible,
.video-scroll-container a:focus:not(:focus-visible),
.sns-link:focus:not(:focus-visible),
.news-link:focus:not(:focus-visible),
.navbar-brand:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus-visible,
.nav-link:focus-visible,
.news-page-btn:focus-visible,
.news-nav-btn:focus-visible,
.video-scroll-container a:focus-visible,
.sns-link:focus-visible,
.news-link:focus-visible,
.navbar-brand:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 var(--focus-box-shadow-spread) var(--focus-color-light) !important;
  border-radius: 4px;
}

button:focus-visible:not(.accordion-button):not(.news-page-btn):not(.news-nav-btn):not(.navbar-toggler),
a:focus-visible:not(.nav-link):not(.sns-link):not(.news-link):not(.navbar-brand) {
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 var(--focus-box-shadow-spread) var(--focus-color-light) !important;
  border-radius: 4px;
}

/* ナビリンク */
.nav-link {
  color: #f8f9fa;
  position: relative;
  text-decoration: none;
}
.nav-link:hover {
  color: #d9d9d9;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
}

/* お知らせの日付スタイル */
.news-date {
  font-size: 0.85rem;
  font-weight: bold;
  color: inherit;
  line-height: 1.2;
}

.news-title {
  font-size: 1.05rem;
  color: inherit;
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* お知らせリンク */
.news-link {
  color: #0000EE;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.news-link:hover {
  color: #0056b3;
}
.news-link:visited {
  color: #551A8B;
}
.news-link:visited:hover {
  color: #40007c;
}

.sns-link:focus-visible,
.news-link:focus-visible {
  background-color: rgba(13, 110, 253, 0.05);
}

/* ページネーションボタン */
.news-page-btn,
.news-nav-btn {
  background-color: #f8f9fa;
  color: #222222;
  border: 1px solid #222222;
  min-width: 36px;
}

.news-page-btn:hover,
.news-nav-btn:hover {
  background-color: #222222;
  color: #f8f9fa;
}

.news-page-btn.btn-outline-primary {
  background-color: #222222 !important;
  color: #f8f9fa !important;
  border-color: #222222 !important;
}

.news-nav-btn:disabled {
  background-color: #f8f9fa;
  color: #d9d9d9;
  border-color: #d9d9d9;
  cursor: not-allowed;
}

/* アコーディオン共通 */
.accordion-item {
  border: 1px solid #ddd;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
}

.accordion-button {
  border-radius: 0 !important;
  border-bottom: none;
  padding: 1.2rem 1.5rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: inherit;
  background-color: #fff;
  position: relative;
}

.accordion-button:hover {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #f2f2f2 !important;
  background-color: #222;
}

.accordion-button::after {
  background-image: none !important;
  content: '▾';
  font-size: 1.2rem;
  color: #222;
  display: inline-block;
  transition: transform 0.3s ease;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: 0;
  transform: rotate(0deg);
  transform-origin: center;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: #f2f2f2;
}

.accordion-collapse {
  overflow: hidden;
  border-radius: 0 0 0.5rem 0.5rem;
}

.accordion-body {
  border-top: 1px solid #ddd;
  background-color: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1.75rem;
}

/* メンバー＆お知らせのアコーディオン個別調整 */
#memberAccordion .accordion-item:last-child .accordion-body {
  border-radius: 0 0 0.5rem 0.5rem;
}

#newsAccordion .accordion-item {
  margin-bottom: 0.5rem;
  border-radius: 0.4rem;
}

#newsAccordion .accordion-body {
  border-radius: 0 0 0.5rem 0.5rem;
}

#newsAccordion .accordion-item + .accordion-item {
  border-top: 1px solid #ddd;
}

/* キーボードフォーカス時のアコーディオンハイライト */
.accordion-button:focus:not(.keyboard-focus) {
  border-color: #dee2e6 !important;
  box-shadow: none !important;
}

.accordion-item:has(.accordion-button.keyboard-focus) {
  position: relative !important;
  z-index: 10 !important;
  box-shadow: 0 0 0 var(--focus-box-shadow-spread) var(--focus-color-light) !important;
  outline: var(--focus-outline-width) solid var(--focus-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

.accordion-button:not(.collapsed).keyboard-focus {
  background-color: #222 !important;
  color: #f2f2f2 !important;
}

.video-date {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  color: #222222;
  line-height: 1.2;
  text-align:left;
}

.video-title {
  font-size: 1rem;
  color: #222222;
  line-height: 1.5;
  margin-top: 0.25rem;
  text-align: left;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.video-title .marquee-text {
  display: inline-block;
  white-space: nowrap;
  transition: none;
  transform: translateX(0);
}

.video-title .marquee-text::before {
  content: '';
  position: absolute;
  left: calc(100% + 80px);
  white-space: nowrap;
}

/* PC版のみ：オーバーフローしない場合はホバー時のアニメーションを無効化 */
@media (min-width: 769px) {
  .video-item.no-overflow .video-title:hover .marquee-text {
    animation: none;
  }

  /* PC版のみ：オーバーフローする場合のみホバー時にアニメーション */
  .video-item:not(.no-overflow) .video-title:hover .marquee-text {
    animation: marquee-loop 12s linear infinite;
  }

  .video-item:not(.no-overflow) .video-title:hover .marquee-text::before {
    content: attr(data-text);
  }
}

@keyframes marquee-loop {
  0% { 
    transform: translateX(0); 
  }
  100% { 
    transform: translateX(calc(-100% - 80px)); 
  }
}

/* スマホ版：自動マーキーアニメーション */
@media (max-width: 768px) {
  /* デフォルトではアニメーションを無効化 */
  .video-item .video-title .marquee-text {
    animation: none;
  }

  .video-item .video-title .marquee-text::before {
    content: '';
  }

  /* モバイルマーキーアクティブ時のみアニメーション */
  .video-item.mobile-marquee-active .video-title .marquee-text {
    animation: marquee-loop 12s linear infinite;
  }

  .video-item.mobile-marquee-active .video-title .marquee-text::before {
    content: attr(data-text);
    /* Chrome対応: 疑似要素の描画を強制的に隠す */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* スマホ版ではホバー時のアニメーションを無効化 */
  .video-item .video-title:hover .marquee-text {
    animation: none !important;
  }

  .video-item .video-title:hover .marquee-text::before {
    content: '' !important;
  }
}

.video-player,
.video-gaya {
  font-size: 1rem;
  color: #222222;
  line-height: 1.5;
  margin-top: 0.25rem;
  text-align:left;
}

.video-player-title,
.video-gaya-title {
  font-weight: bold;
}

/* 動画横スクロール */
.video-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 10px;
  margin: -10px;
}

.video-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.video-scroll-container::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 4px;
}

.video-scroll-container::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

.video-scroll-container a {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
  text-decoration: none;
  color: #222;
  text-align: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.video-scroll-container img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.video-scroll-container p {
  margin-top: 8px;
  font-size: 0.9rem;
}

.video-scroll-container a:hover img {
  transform: scale(1.02);
}

.video-scroll-container a:focus-visible {
  background-color: rgba(13, 110, 253, 0.05);
  scroll-margin: 20px;
  transform: translateZ(0);
}

.video-scroll-container:focus-within {
  overflow: visible;
  padding: 20px;
  margin: -20px;
  position: relative;
  z-index: 1000;
}

/* SNS リンク */
.sns-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  margin: 0;
  gap: 0.5rem 1rem;
}

.sns-list li {
  flex: 0 1 calc(50% - 1rem);
  margin-bottom: 0.5rem;
}

.sns-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  color: #222;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.sns-link.twitter:hover { border-color: #0F1419; }
.sns-link.youtube:hover { border-color: #FF0000; }
.sns-link.instagram:hover { border-color: #dd2a7b; }
.sns-link.twitch:hover { border-color: #9146FF; }
.sns-link.steam:hover { border-color: #000; }

.sns-link.twitter i { color: #0F1419; }
.sns-link.youtube i { color: #FF0000; }
.sns-link.twitch i { color: #9146FF; }
.sns-link.steam i { color: #000; }

.sns-link.instagram i {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* セクション全体調整 */
#videos .container {
  padding-left: 25px;
  padding-right: 25px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .video-scroll-container {
    padding: 12px 8px;
    margin: -12px -8px;
  }
  
  #videos .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .news-page-btn,
  .news-nav-btn {
    margin: 0 2px !important; /* mx-1 をオーバーライドして隙間を詰める */
    min-width: 32px; /* ボタンサイズを少し小さく */
    padding: 0.25rem 0.5rem; /* パディングを調整 */
    font-size: 0.875rem; /* フォントサイズを少し小さく */
  }
  
  .ellipsis-btn {
    margin: 0 2px !important;
    min-width: 32px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
}