.site-body,#funclubPage {
  padding-top: 60px;
  padding-bottom: 0;
}
#site-header {
  position: fixed;
}

.page-template-page-membership .title,
.page-template-page-membership .subtitle {
  margin: 0;
}

.floating-banner.top-fixed-menu {
  display: none!important;
}
body.customize-support #membership_navi {
  top: 102px;
}
#membership_navi {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 70px;
  z-index: 2;
  padding: 0 40px;
  height: 50px;
  width: 100%;
  background: #D2A046;
}

#membership_navi ul {
  display: flex;
}
#membership_navi li {
  padding: 0;
}
#membership_navi li::before {
  display: none;
}
#membership_navi li a {
  display: block;
  margin: 0 16px;
  color: #fff;
  font-weight: bold;
}
.content #membership_navi li a {
  border-bottom: none;
}

#plan,
#benefits,
#join,
#notes,
#faq {
  scroll-margin-top: 150px;
}

#notes.benefit-h {
  margin-bottom: 20px;
}

/************************************************************/
/*タブ
/************************************************************/
/* 1280pxで中央寄せ（コンテンツ幅をはみ出す） */
.wp-tabs,
.wp-tabs .wp-tabs__list {
  width: 1280px;
  max-width: min(1280px, 100vw);  /* 画面よりはみ出さない保険（SPなど） */
  margin-left: calc(50% - 1280px / 2) !important;
  margin-right: calc(50% - 1280px / 2) !important;
}

/* Gutenbergのレイアウト制約をこのブロック内だけ解除 */
.wp-tabs.is-layout-constrained {
  max-width: 1280px !important;
}

/* 内側の“is-layout-constrained”が幅を縮めないように */
.wp-tabs > .is-layout-constrained {
  max-width: 1280px !important;
}

/* 表や画像が親の1280pxを突き抜けないように一応の保険 */
.wp-tabs img,
.wp-tabs table,
.wp-tabs .wp-block-group,
.wp-tabs .wp-block-columns {
  max-width: 100%;
}

.wp-tabs .wp-block-image.early-enrollment,
.wp-tabs .wp-block-group.plan-tables,
.wp-tabs .wp-block-columns.plans-4 {
  max-width: 1110px;
  margin: 0 auto;
}


@media (max-width: 1280px) {
  .wp-tabs,
  .wp-tabs .wp-tabs__list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 内側の制約解除もSP用にフラット化 */
  .wp-tabs.is-layout-constrained,
  .wp-tabs > .is-layout-constrained {
    max-width: 100% !important;
  }
}



/* ==== Tabs layout ==== */
.wp-tabs .wp-tabs__list {
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.wp-tabs .wp-tabs__list .wp-block-button {
  flex: 1;
  margin: 0;
}
.wp-tabs .wp-tabs__list .wp-block-button__link{
  display: block;
  width: 100%;
  border-radius: 20px 20px 0 0;
  background-color: #F2F2F2;
  color: #000000;
  font-weight: bold;
  font-size: 24px;
}
.wp-tabs .wp-tabs__list .wp-block-button__link:hover {
  filter: none;
}
.tab-content {
  border: 1px solid #000000;
  padding: 60px 15px;
}

/* JS未適用時のフォールバック：最初のパネルだけ見せる */
.wp-tabs .tab-content {
  display: none;
}
.wp-tabs .tab-content:first-of-type {
  display: block;
}

/* JS適用後だけ display 切替（body.wp-tabs-init をフラグに） */
body.wp-tabs-init .wp-tabs .tab-content {
  display: none;
}
body.wp-tabs-init .wp-tabs .tab-content.is-active {
  display: block;
}

/* アクティブ見た目（:has対応ブラウザならURLハッシュでも強調） */
/* アクティブな #tab1 を紫 */
.wp-tabs .wp-tabs__list .wp-block-button__link[href="#tab1"][aria-current="true"]{
  background-color: #3C2388;
  color: #fff;
  border-color: #3C2388;
}

/* アクティブな #tab2 を金色 */
.wp-tabs .wp-tabs__list .wp-block-button__link[href="#tab2"][aria-current="true"]{
  background-color: #D2A046; /* 近い色味 #D0AE51 ならここを置換 */
  color: #fff;
  border-color: #D2A046;
}



/************************************************************/
/*プランのカード
/************************************************************/
.plans-4 {
  margin-bottom: 20px;
}
.plans-4.is-layout-flex,
.plans-2.is-layout-flex {
  gap: 30px!important;
  align-items: stretch !important;
}
.plans-2 p {
  margin-top: 8px!important;
  margin-bottom: 0!important;
  font-size: 14px;
  line-height: 1.3;
}
.plans-2 p  + p {
  margin-top: 4px!important;
}
.plans-2 figure a {
  border-bottom: none!important;
}
.plans-2 figure a:hover {
  opacity: 0.7!important;
}
p.plan-notes {
  margin-top: 10px!important;
  line-height: 1.3!important;
}

.gold,
.silver,
.standard,
.light,
.remote,
.academic,
.junior,
.content .gold h3,
.content .silver h3,
.content .standard h3,
.content .light h3,
.content .remote h3,
.content .academic h3,
.content .junior h3 {
  color: #fff;
}
.platinum {
  color: #000000;
  background-color: #EAEAEA;
}
.gold {
  background-color: #D0AE51;
}
.silver {
  background-color: #9A9797;
}
.standard {
  background-color: #3D2387;
}
.light {
  background-color: #22ADD1;
}
.remote {
  background-color: #D84D77;
}
.academic {
  background-color: #019245;
}
.junior {
  background-color: #225CD1;
}

/************************************************************/
/*表
/************************************************************/
.content table tr:nth-child(2n+1) {
  background-color: #fff!important;
}
.wp-block-table :is(table,thead,tbody,tfoot,th,td) {
  border-color: #fff;
  border-width: 1px;
}
/* 1列目以外のtdをnowrapに */
.plan-table-1 table td:not(:first-child),
.plan-table-2 table td:not(:first-child),
.plan-table-3 table td:not(:first-child) {
  white-space: nowrap;
  text-align:center;
}
.plan-table thead th {
  text-align: center;
}
.plan-tables .plan-table th,
.plan-tables .plan-table td {
  box-sizing: border-box;
}
.plan-table tbody td sub {
  vertical-align: baseline;
}
.plan-table thead th:first-child,
.plan-table tbody td:first-child {
  background-color: #3C3939;
  color: #fff;
}
.plan-table thead tr {
  border-bottom: 1px solid #fff!important;
}
.plan-table-1 thead th:nth-child(2),
.plan-table-3 thead th:nth-child(2) {
  background: #EAEAEA;
  color: #000;
} /* プラチナ */
.plan-table-1 thead th:nth-child(3),
.plan-table-3 thead th:nth-child(3) {
  background: #D0AE51;
} /* ゴールド */
.plan-table-1 thead th:nth-child(4),
.plan-table-3 thead th:nth-child(4) {
  background: #9A9797;
} /* シルバー */
.plan-table-1 thead th:nth-child(5),
.plan-table-3 thead th:nth-child(5) {
  background: #3D2387;
} /* スタンダード */
.plan-table-2 thead th:nth-child(2) {
  background: #22ADD1;
} /* ライト */
.plan-table-2 thead th:nth-child(3),
.plan-table-3 thead th:nth-child(6) {
  background: #D84D77;
} /* リモート */
.plan-table-2 thead th:nth-child(4),
.plan-table-3 thead th:nth-child(7) {
  background: #225CD1;
} /* ジュニア */
.plan-table-2 thead th:nth-child(5) {
  background: #019245;
} /* アカデミック */

/* 列ごとに色を付けたい（●や価格の色分け用・任意） */
.plan-table-1 tbody td:nth-child(2),
.plan-table-3 tbody td:nth-child(2) {
  color: #000000;
} /* プラチナ列 */
.plan-table-1 tbody td:nth-child(3),
.plan-table-3 tbody td:nth-child(3) {
  color: #D0AE51;
} /* ゴールド列 */
.plan-table-1 tbody td:nth-child(4),
.plan-table-3 tbody td:nth-child(4) {
  color: #9A9797;
} /* シルバー列 */
.plan-table-1 tbody td:nth-child(5),
.plan-table-3 tbody td:nth-child(5) {
  color: #3D2387;
} /* スタンダード列 */
.plan-table-2 tbody td:nth-child(2) {
  color: #22ADD1;
} /* ライト列 */
.plan-table-2 tbody td:nth-child(3),
.plan-table-3 tbody td:nth-child(6) {
  color: #D84D77;
} /* リモート列 */
.plan-table-2 tbody td:nth-child(4),
.plan-table-3 tbody td:nth-child(7) {
  color: #225CD1;
} /* ジュニア列 */
.plan-table-2 tbody td:nth-child(5) {
  color: #019245;
} /* アカデミック列 */

/* 1.5シーズンの表 PCの時は横並びの１つに見せる */
.plan-tables {
  display: flex;
}
.plan-tables .plan-table-2 thead th:first-child,
.plan-tables .plan-table-2 tbody td:first-child {
  display: none;
  border-left: none;
}
.plan-tables + p {
  margin-top: 0!important;
}

/* 2表を1枚に見せるための上書き ------------------------------ */
@media(min-width:769px) {
  .plan-tables {
    display: block;                 /* flexをやめて1行に並べる */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0;
  }

  .plan-tables .plan-table {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    margin: 0;
    font-size: 15px;
  }

  .plan-table tbody td:first-child {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
  }

  .plan-tables > .wp-block-table {
    overflow: visible !important;
  }

  .plan-tables .plan-table table {
    width: auto;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .plan-tables .plan-table table {
    width: auto;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .plan-tables .plan-table th,
  .plan-tables .plan-table td {
    padding: 10px;
    line-height: 1.4;
    vertical-align: middle;
    height: 43.39px;
  }
  .plan-tables .plan-table th {
    height: 88px;
  }
  /* 左テーブル：1列目=行名、2〜5列=プラン */
  .plan-table-1 thead th:first-child,
  .plan-table-1 tbody td:first-child {
    width: 324px;
  }
  .plan-table-1 thead th:nth-child(n+2),
  .plan-table-1 tbody td:nth-child(n+2) {
    width: 98px;
  }

  /* 右テーブル：行名列を視覚的に削除し、列幅を左と一致させる */
  .plan-tables .plan-table-2 thead th:first-child,
  .plan-tables .plan-table-2 tbody td:first-child {
    display: none;
  }
  .plan-table-2 thead th,
  .plan-table-2 tbody td {
    width: 98px;
  }

  /* 継ぎ目のボーダーを消す（1px重なり対策） */
  .plan-table-2 { margin-left: -1px; }
  .plan-table thead tr { border-bottom-width: 1px !important; } /* 既存指定の明示化 */

  /* WordPressのtable系デフォルトが干渉する場合の保険 */
  .wp-block-table table {
    border-spacing: 0 !important;
  }
}






/************************************************************/
/*cta
/************************************************************/
.cta-button .wp-block-button__link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  gap: 10px;
  font-size: 20px;
  background-color: #3C2388;
  padding-top: 20px;
  padding-bottom: 20px
}
.membership_cta .cta-button {
  box-shadow: 0 4px 4px #72707040;
}

/************************************************************/
/*入会特典
/************************************************************/
.wp-block-columns.benefits {
  align-items: stretch;
}
.benefits.is-layout-flex {
  gap: 16px;
}
.benefits-item {
  border: 1px solid #000;
  padding: 10px 15px 20px;
}
.benefits-item h3 {
  font-size: 18px!important;
  margin-top: 20px!important;
  margin-bottom: 6px!important;
}
.benefits-item .badge-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-height: 62px;
}
.benefits-item > p {
  margin-bottom: 20px!important;
}
.benefits-item .badge-list .badge {
  display: inline-block;
  font-size: 12px;
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  border-radius: 20px;
  margin: 0 4px 6px 0 !important;
  letter-spacing: -0.03em;
}

.wp-block-columns.benefits {
  align-items: stretch;
}
.benefits .benefits-item {
  display: flex;
  flex-direction: column;
}
.benefits .benefits-item > .wp-block-group.badge-list {
  margin-top: auto;
}

.common-benefits {
  justify-content: space-around;
}
.common-benefits-item {
  max-width: 335px;
}
.common-benefits-item h3 {
  font-size: 18px!important;
  margin-bottom: 0!important;
}
/************************************************************/
/*よくある質問
/************************************************************/
.content .faq ul li,
.content .faq ol li {
    padding-top: 0;
    font-size: clamp(14px, 1.82vw, 16px);
}
.faq .su-spoiler {
    margin-bottom: 1.5em !important;
}
.faq .faq-accordion>.su-spoiler-title,
.faq .faq-accordion>.su-spoiler-content {
    position: relative;
    padding: clamp(10px, 1.30vw, 20px) clamp(45px, 5.85vw, 80px);
    border-bottom: none;
    background: #fff;
    font-size: clamp(14px, 1.82vw, 16px);
    line-height: 1.5;
}
.faq .faq-accordion>.su-spoiler-title:focus {
    outline: none;
}
.faq .faq-accordion>.su-spoiler-title::before,
.faq .faq-accordion>.su-spoiler-content::before {
    position: absolute;
    left: 25px;
    font-size: 20px;
    font-weight: bold;
    font-family: sans-serif;
}
.faq .faq-accordion>.su-spoiler-title::before {
    top: 25%;
    content: "Q.";
    color: #3C2378;
}
.faq .faq-accordion>.su-spoiler-content::before {
    top: auto;
    content: "A.";
    color: #9709CA;
}
.faq .faq-accordion .su-spoiler-icon {
    top: 20px;
    left: auto;
    right: 30px;
    font-size: 20px;
    transform: rotate(180deg);
}
.faq .faq-accordion.su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon {
    transform: rotate(90deg);
}

.floating-banner .copy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
/************************************************************/
/*レスポンシブ
/************************************************************/
@media (max-width: 768px) {
  .site-body,#funclubPage {
    padding-top: 55px;
    padding-left: 0;
    padding-right: 0;
  }
  #membership_navi {
    padding: 0 20px;
    top: 60px;
  }
  body.customize-support #membership_navi {
  top: 92px;
  }
  #membership_navi li a{
    margin-left: 0;
    margin-right: 14px;
  }
  #membership_navi li:last-child a {
    margin-right: 0;
  }
  .content h2.benefit-h {
    font-size: 16px;
  }
  .content ul li {
    font-size: 14px!important;
  }
  .content ul.membership_navi li {
    font-size: 12px!important;
  }
  /* タブ */
  .wp-tabs .wp-tabs__list {
    gap: 3px;
  }
  .wp-tabs .wp-tabs__list .wp-block-button__link {
    font-size: 16px;
  }
  .tab-content {
    padding: 30px 10px;
  }
  /* プラン */
  .plans-4.is-layout-flex,
  .plans-2.is-layout-flex {
    gap: 20px 10px!important;
  }
  .plans-2 p {
    font-size: 12px;
  }
  .plans-2 p.has-text-align-center {
    text-align: left!important;
  }
  /* 比較表 テーブル要素をブロック化 */
  .wp-tabs .wp-block-group.plan-tables {
    max-width: 100%;
    margin: 0;
  }
  .plan-tables {
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 15px !important;
  }
  .plan-tables .plan-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    white-space: normal !important;
  }
  .plan-tables + p {
    margin-top: 30px!important;
  }
  .plan-table thead,
  .plan-table thead tr {
    border-bottom: none;
  }
  .plan-table th,
  .plan-table td {
    font-size: 14px;
    font-weight: bold;
  }
  .plan-table thead th {
    border: none;
    padding: 10px 0;
  }
  .plan-tables .plan-table-2 tbody td:first-child {
    display: block;
  }
  .plan-table thead th:first-child,
  .plan-table tbody td:first-child {
    width: auto;
  }

  .plan-table table,
  .plan-table thead,
  .plan-table tbody,
  .plan-table tr,
  .plan-table th,
  .plan-table td {
    display: block;
    width: 100%;
  }
  .wp-block-table.plan-table-1 {
    margin-block-end: 40px!important;
  }

  /* 1行目（ヘッダー）は横並びの4カラム */
  .plan-table thead tr {
    display: flex;
    gap: 0;
  }
  /* 先頭の空ヘッダは不要 */
  .plan-table thead th:first-child {
    display: none;
  }
  .plan-table thead th {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    font-weight: 700;
  }

  /* 行見出し（左セル） */
  .plan-table tbody td:first-child {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
    border-top: none;
    border-left-color: #000;
    border-right-color: #000;
    white-space: normal;
  }

  /* 値（2〜5列目）は4分割で横並び */
  .plan-table tbody td:not(:first-child) {
    display: inline-block;
    padding: 10px 0;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    box-sizing: border-box;
  }

    .plan-table-1 tbody td:not(:first-child),
    .plan-table-2 tbody td:not(:first-child) {
      width: 25%;
    }

    .plan-table-3 tbody td:not(:first-child) {
      width: calc(100% / 6 );
    }
    .plan-table-3 tbody tr:first-child td:not(:first-child) {
      font-size: 12px;
    }

    /* 特典 */
    .benefits-item {
      min-height: auto;
    }
    .benefits-item .badge-list {
      position: static;
      margin-top: 20px;
      min-height: auto;
    }

    .benefits-item .badge-list .badge {
      margin: 0 4px 6px 0 !important;
      letter-spacing: -0.03em;
    }
    .wp-block-group.common,
    .wp-block-group.continuation-benefits {
      margin: 0 calc(50% - 50vw);
      padding-left: calc(50vw - 50%);
      padding-right: calc(50vw - 50%);
    }

  /* cta */
  .wp-block-buttons>.wp-block-button {
    width: 100%;
  }
  .cta-button .wp-block-button__link {
    font-size: 17px;
    padding: 10px 10px 14px;
    gap: 2px;
  }
  .cta-button .wp-block-button__link img {
    width: 35px;
    height: auto;
  }

  /* よくある質問 */
  .faq .faq-accordion>.su-spoiler-title::before,
  .faq .faq-accordion>.su-spoiler-content::before {
    left: 10px;
    font-size: 16px;
  }
  .faq .faq-accordion>.su-spoiler-title::before {
    top: 25%;
  }
  .faq .faq-accordion>.su-spoiler-content::before {
    top: auto;
  }
  .faq .faq-accordion .su-spoiler-icon {
    top: 10px;
    left: auto;
    right: 10px;
    font-size: 20px;
  }
}

@media(max-width: 991.98px) {
  .main-section {
    margin-bottom: 0;
  }
}