/* ===================================================================
   fan-club.css
   狭山セコムラガッツ公式ファンクラブページ 2026-27シーズン 追加スタイル

   style.css（サイト共通）は変更していません。
   このファイルは #fanclub2026-27 でページ全体をスコープした「別枠」の
   追加・上書きスタイルのみを収録しています。
   HTML側は <div class="p-fan-club-detail" id="fanclub2026-27"> のように
   ルート要素へ id="fanclub2026-27" を付与してください。
   =================================================================== */

/*
    p-fan-club-detail：背景（画像を外し、単色背景に変更）
    style.css の background-image / background-color を上書き
---------------------------------*/
#fanclub2026-27 {
  background-image: none;
  background-color: #063075;
}

/*
    p-fan-club-mv-pattern：メインビジュアル下のパターンMV（2枚を縦に並べる）
---------------------------------*/
#fanclub2026-27 .p-fan-club-mv-pattern {
  display: flex;
  flex-direction: column;
}
#fanclub2026-27 .p-fan-club-mv-pattern img {
  display: block;
  width: 100%;
  height: auto;
}
#fanclub2026-27 .p-fan-club-mv-pattern img + img {
  margin-top: 4px;
}

/*
    p-fan-club-benefits-list：特典一覧セクションのコンテナ幅を拡張
    style.css の .l-inner--sm（max-width:1010px＝コンテンツ幅960px）だと
    会員列が増えたときに手狭なため、サイト既存の .l-inner 相当（1250px＝
    コンテンツ幅1200px）まで広げる。この節でのみ有効（他のl-inner--smには影響しない）。
---------------------------------*/
#fanclub2026-27 .p-fan-club-benefits-list .l-inner.l-inner--sm {
  max-width: var(--layout-width-inner);
}

/*
    fan-club2025 (YouTube埋め込み レスポンシブ対応)
---------------------------------*/
@media (max-width: 767px) {
  #fanclub2026-27 .fan-club2025 iframe {
    width: 100%;
  }
  #fanclub2026-27 .l-low-content {
    padding-top: 1.25rem;
  }
}

/*
    c-benefits-table (特典一覧テーブル)
---------------------------------*/
#fanclub2026-27 .c-benefits-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
}
#fanclub2026-27 .c-benefits-table__scroll-hint {
  text-align: center;
  color: #FFFFFF;
  font-size: 0.8rem;
  margin: 0 0 10px;
}
#fanclub2026-27 .c-benefits-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 0.85rem;
}
#fanclub2026-27 .c-benefits-table th,
#fanclub2026-27 .c-benefits-table td {
  border: 1px solid #7fd8e6;
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  color: #222222;
}
#fanclub2026-27 .c-benefits-table thead th {
  color: #ffffff;
}
#fanclub2026-27 .c-benefits-table__head-label {
  min-width: 140px;
  background-color: #333333;
}
#fanclub2026-27 .c-benefits-table__member {
  min-width: 130px;
}
/* 会員種別ごとのヘッダーカラー */
#fanclub2026-27 .c-benefits-table__member--platinum { background: linear-gradient(45deg, #6B6E70 0%, #A8ACAE 45%, #F2F2F2 70%, #A8ACAE 85%, #6B6E70 90% 100%); }
#fanclub2026-27 .c-benefits-table__member--premium { background-color: #4169E1; }
#fanclub2026-27 .c-benefits-table__member--regular { background-color: #8139DD; }
#fanclub2026-27 .c-benefits-table__member--local { background-color: #32CD32; }
#fanclub2026-27 .c-benefits-table__member--junior { background-color: #FFA500; }
#fanclub2026-27 .c-benefits-table__member--mimamori { background-color: #DE55F0; }
#fanclub2026-27 .c-benefits-table__member--mail { background-color: #708090; }
#fanclub2026-27 .c-benefits-table__member-name {
  display: block;
  font-weight: bold;
  font-size: 0.95rem;
  white-space: nowrap;
}
#fanclub2026-27 .c-benefits-table__price {
  display: block;
  font-size: 0.8rem;
  margin-top: 2px;
  white-space: nowrap;
}
#fanclub2026-27 .c-benefits-table__limit {
  display: inline-block;
  background-color: #e53935;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
}
#fanclub2026-27 .c-benefits-table__category {
  color: #222222;
  white-space: nowrap;
  font-weight: bold;
}
/* 特典カテゴリーごとの帯カラー */
#fanclub2026-27 .c-benefits-table__category--goods { background-color: #fff59d; }
#fanclub2026-27 .c-benefits-table__category--ticket { background-color: #a2e8f0; }
#fanclub2026-27 .c-benefits-table__category--event { background-color: #b6e6ba; }
#fanclub2026-27 .c-benefits-table__category--other { background-color: #f7b8d2; }
#fanclub2026-27 .c-benefits-table__item {
  background-color: #fafafa;
  text-align: left;
  min-width: 160px;
}
#fanclub2026-27 .c-benefits-table__item-sub {
  font-size: 0.75rem;
}
#fanclub2026-27 .c-benefits-table__note-inline {
  font-size: 0.7rem;
}
#fanclub2026-27 .c-benefits-table__ref {
  color: #FF0004;
  font-size: 0.75rem;
  margin-left: 2px;
}
@media screen and (max-width: 767px) {
  #fanclub2026-27 .c-benefits-table {
    font-size: 0.75rem;
  }
  #fanclub2026-27 .c-benefits-table th,
  #fanclub2026-27 .c-benefits-table td {
    padding: 6px 8px;
  }
}
/* PC/タブレットは横スクロールなしで表全体が見えるように、
   テーブル本体とセル側の固定min-widthを外してコンテナ幅（960px前後）に収める。
   文字は必要に応じて折り返す（nowrap解除）。スマホのみ従来通りスライド表示。 */
@media screen and (min-width: 768px) {
  #fanclub2026-27 .c-benefits-table {
    min-width: 0;
    width: 100%;
  }
  #fanclub2026-27 .c-benefits-table__head-label,
  #fanclub2026-27 .c-benefits-table__member,
  #fanclub2026-27 .c-benefits-table__item {
    min-width: 0;
  }
  #fanclub2026-27 .c-benefits-table__category {
    white-space: normal;
    min-width: 0;
  }
}

/*
    キャンペーンセクション（現在は非表示／コメントアウト中）
---------------------------------*/
#fanclub2026-27 .campaign-section {
  /*background: #f5f5f5;*/
  padding: 40px 20px;
  margin-bottom: 40px;
}
#fanclub2026-27 .campaign-container {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #003894;
  padding: 40px;
}
#fanclub2026-27 .campaign-description {
  margin: 30px 0;
}
#fanclub2026-27 .campaign-lead {
  font-size: 16px;
  line-height: 1.8;
  color: #333333;
  margin: 0;
}
#fanclub2026-27 .campaign-details {
  background: #f9f9f9;
  padding: 25px;
  margin-bottom: 30px;
  border-left: 4px solid #4497F7;
}
#fanclub2026-27 .details-title {
  font-size: 18px;
  font-weight: bold;
  color: #003894;
  margin: 0 0 15px 0;
}
#fanclub2026-27 .details-list {
  margin: 0;
}
#fanclub2026-27 .details-list dt {
  font-weight: bold;
  color: #003894;
  margin-top: 12px;
  margin-bottom: 5px;
  font-size: 15px;
}
#fanclub2026-27 .details-list dt:first-child {
  margin-top: 0;
}
#fanclub2026-27 .details-list dd {
  margin: 0 0 0 1em;
  color: #333333;
  line-height: 1.7;
  font-size: 14px;
}
#fanclub2026-27 .campaign-image {
  text-align: center;
}
#fanclub2026-27 .campaign-img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
  #fanclub2026-27 .campaign-section {
    padding: 30px 15px;
  }
  #fanclub2026-27 .campaign-container {
    padding: 25px 20px;
  }
  #fanclub2026-27 .campaign-lead {
    font-size: 15px;
  }
  #fanclub2026-27 .campaign-details {
    padding: 20px;
  }
  #fanclub2026-27 .details-title {
    font-size: 16px;
  }
  #fanclub2026-27 .details-list dt {
    font-size: 14px;
  }
  #fanclub2026-27 .details-list dd {
    font-size: 13px;
  }
}
#fanclub2026-27 .p-fan-club-intro__button a {
  display: inline-block;
  width: 510px;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/*
    会員特典カードの配色（id指定で固定）
    style.css は .p-fan-club-benefits__item:nth-child(N) という
    「並び順」でカードの色を決めている。
    2026-27シーズンでプラチナ会員・みまもりファン会員を追加して並び順が
    変わったため、そのままだと全会員の色が1つずつズレる。
    id（#premium 等）はクラス+疑似クラスより詳細度が高いため、
    ここで上書きして常に正しい色に固定する。
---------------------------------*/
#fanclub2026-27 #platinum { background: linear-gradient(45deg, #6B6E70 0%, #A8ACAE 45%, #F2F2F2 70%, #A8ACAE 85%, #6B6E70 90% 100%); }
#fanclub2026-27 #premium { background-color: #4169E1; }
#fanclub2026-27 #regular { background-color: #8139DD; }
#fanclub2026-27 #local { background-color: #32CD32; }
#fanclub2026-27 #junior { background-color: #FFA500; }
#fanclub2026-27 #mimamori { background-color: #DE55F0; }
#fanclub2026-27 #mail { background-color: #708090; }

/* プラチナ会員：銀色に発光する枠のアニメーション */
#fanclub2026-27 #platinum {
  box-sizing: border-box;
  animation: platinumSilverGlow 1.8s ease-in-out infinite;
}
@keyframes platinumSilverGlow {
  0%, 100% {
    box-shadow: 0 0 6px 2px rgba(210, 210, 215, 0.5), inset 0 0 6px 1px rgba(210, 210, 215, 0.4);
  }
  50% {
    box-shadow: 0 0 26px 8px rgba(235, 235, 240, 0.9), inset 0 0 10px 2px rgba(235, 235, 240, 0.6);
  }
}
/* プラチナ会員：グラデーション背景に負けないよう白文字にシャドウを付与（text-shadowは子要素に継承される） */
#fanclub2026-27 #platinum .p-benefits-item__text-wrap {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

#fanclub2026-27 #platinum .p-benefits-item__box-sub-title { color: #6B6E70; }
#fanclub2026-27 #premium .p-benefits-item__box-sub-title { color: #4169E1; }
#fanclub2026-27 #regular .p-benefits-item__box-sub-title { color: #8139DD; }
#fanclub2026-27 #local .p-benefits-item__box-sub-title { color: #32CD32; }
#fanclub2026-27 #junior .p-benefits-item__box-sub-title { color: #FFA500; }
#fanclub2026-27 #mimamori .p-benefits-item__box-sub-title { color: #DE55F0; }
#fanclub2026-27 #mail .p-benefits-item__box-sub-title { color: #708090; }

#fanclub2026-27 #premium .p-benefits-item__title span:nth-child(1) { font-size: 5rem; }
#fanclub2026-27 #local .p-benefits-item__title span:nth-child(1) { font-size: 4.375rem; }
#fanclub2026-27 #mimamori .p-benefits-item__title span:nth-child(1) { font-size: 4.5rem; }

/* 会員カテゴリー クイックナビの配色も同じ理由で並び順に依存しているため、
   #category内のリンクをid指定で個別に上書きする */
#fanclub2026-27 .p-fan-club-category__item a[href="#platinum"] {
  background: linear-gradient(45deg, #6B6E70 0%, #A8ACAE 45%, #F2F2F2 70%, #A8ACAE 85%, #6B6E70 90% 100%);
  animation: platinumSilverGlow 1.8s ease-in-out infinite;
}
#fanclub2026-27 .p-fan-club-category__item a[href="#premium"] { background-color: #4169E1; }
#fanclub2026-27 .p-fan-club-category__item a[href="#regular"] { background-color: #8139DD; }
#fanclub2026-27 .p-fan-club-category__item a[href="#local"] { background-color: #32CD32; }
#fanclub2026-27 .p-fan-club-category__item a[href="#junior"] { background-color: #FFA500; }
#fanclub2026-27 .p-fan-club-category__item a[href="#mimamori"] { background-color: #DE55F0; }
#fanclub2026-27 .p-fan-club-category__item a[href="#mail"] { background-color: #708090; }

/*
    会員カテゴリー クイックナビ：7項目を4列×2段（PC）／2列（スマホ）に整列
    style.css は width:30%（flex-wrap）で3列想定のため、ここで上書きする。
---------------------------------*/
#fanclub2026-27 .p-fan-club-category__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 15px;
  max-width: 1000px;
  margin-inline: auto;
}
#fanclub2026-27 .p-fan-club-category__item {
  width: auto;
  max-width: none;
}
#fanclub2026-27 .p-fan-club-category__item + .p-fan-club-category__item {
  margin-top: 0;
}
/* ボタン（li）の高さを行内で揃える。背景色は<a>側にあるため<a>もli高さいっぱいに広げる */
#fanclub2026-27 .p-fan-club-category__item a {
  height: 100%;
  box-sizing: border-box;
}
/* 「みまもりファン会員」は文字数が多いため、1行に収まるようフォントサイズを個別調整 */
#fanclub2026-27 .p-fan-club-category__item a[href="#mimamori"] > span:first-child {
  font-size: 1.1rem;
}
@media (max-width: 960px) {
  #fanclub2026-27 .p-fan-club-category__items {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767px) {
  #fanclub2026-27 .p-fan-club-category__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #fanclub2026-27 .p-fan-club-category__item {
    width: auto;
  }
  #fanclub2026-27 .p-fan-club-category__item a[href="#mimamori"] > span:first-child {
    font-size: 1rem;
  }
}

/*
    p-fan-club-flowchart（入会フロー診断）
---------------------------------*/
#fanclub2026-27 .p-fan-club-flowchart {
  padding-block: 0 5rem;
}
#fanclub2026-27 .p-fan-club-flowchart__box {
  background-color: var(--color-white);
  padding: 20px;
}
#fanclub2026-27 .p-fan-club-flowchart__image {
  position: relative;
}
#fanclub2026-27 .p-fan-club-flowchart__image img {
  display: block;
  width: 100%;
  height: auto;
}
#fanclub2026-27 .p-fan-club-flowchart__hotspots {
  position: absolute;
  top: 84%;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}
#fanclub2026-27 .p-fan-club-flowchart__hotspot {
  flex: 1 1 0;
  outline-offset: -4px;
}
#fanclub2026-27 .p-fan-club-flowchart__hotspot:focus-visible {
  outline: 3px solid var(--accent-color-blue);
}
@media (max-width: 767px) {
  #fanclub2026-27 .p-fan-club-flowchart__box {
    padding: 12px;
  }
}

/*
    z-index管理
    ※ .c-page-top と #js-banner はテーマ側でページ本文の外（フッター付近など）に
      出力されるグローバル要素のため、#fanclub2026-27 でスコープしていません
      （スコープすると一致せず効かなくなります）。
---------------------------------*/
.c-page-top {
  z-index: 400;
}
#js-banner {
  z-index: 300;
}
#fanclub2026-27 .p-fan-club-fixed {
  z-index: 200;
}