/* ==========================================================================
   components.css — ビルド生成（手編集しない）
   Source: components.entry.css  |  npm run build:components-css
   ========================================================================== */

/* ==========================================================================
   components/breadcrumb.css — パンくずリスト
   ==========================================================================
   Figma: トップ > 高田馬場 > 西武ジュニアスイミングスクール 高田馬場校
   - gap: 16px / フォント: Noto Sans JP 16px, line-height 28px, letter-spacing 0.02rem
   - 区切り: 右向き chevron（0.4375rem × 0.75rem）
   ========================================================================== */

.breadcrumb {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline-start: 24px;
  font-family: var(--font-sans);
  overflow-x: auto;
  overflow-y: hidden;

  .breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumb__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 16px;
  }

  .breadcrumb__item:last-child {
    padding-right: 24px;
  }

  .breadcrumb__link,
  .breadcrumb__text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02rem;
    color: var(--color-main);
    text-decoration: none;
  }

  .breadcrumb__link:hover {
    text-decoration: underline;
  }

  .breadcrumb__text {
    color: var(--color-main);
  }

  .breadcrumb__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 0.4375rem;
    height: 0.75rem;
    flex-shrink: 0;
    background-color: var(--color-main);
    -webkit-mask-image: url("/site-assets/brand/seibu-fitness/images/common/chevron-right.svg");
    mask-image: url("/site-assets/brand/seibu-fitness/images/common/chevron-right.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  html[data-viewport="desktop"] & {
    padding-inline: 64px;
    overflow-x: visible;
    overflow-y: visible;

    .breadcrumb__list {
      flex-wrap: wrap;
    }

    .breadcrumb__item:last-child {
      padding-right: 0;
    }
  }
}

/* ==========================================================================
   components/body-copy.css — ボディコピー（汎用コンポーネント）
   ==========================================================================
   責務:
   - ページヘッダーやセクション内の本文・ディスクリプション用テキスト
   - タイポ: 1rem / line-height 2 / letter-spacing 0.02rem（tablet+ は 1.125rem & 0.0225rem）
   - data-align で中央揃えなどを切り替え可能
   ========================================================================== */

.body-copy {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02rem;
  color: var(--color-black);

  &[data-align="center"] {
    text-align: center;
  }

  html[data-viewport="desktop"] &,
  html[data-viewport="tablet"] & {
    max-width: var(--content-max-width-sm);
    padding-inline: 24px;
    font-size: 1.125rem;
    line-height: 2;
    letter-spacing: 0.0225rem;
  }
}

/* ==========================================================================
   components/button.css — ボタン系コンポーネント
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: min(100%, 384px);
  padding: 7px 8px;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.035rem;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;

  /* wysiwyg の外部リンクアイコンを打ち消し（コンポーネントは独自デザインのため） */
  &[target="_blank"]:not([href$=".pdf"])::after {
    content: none;
  }

  &[data-style="primary"] {
    background-color: var(--color-main);
    color: var(--color-white);
    border-color: var(--color-main);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--color-white);
        color: var(--color-main);
      }
    }
  }

  &[data-style="outline"] {
    background-color: var(--color-white);
    color: var(--color-main);
    border-color: var(--color-main);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--color-main);
        color: var(--color-white);
      }
    }
  }

  &[data-size="sm"] {
    min-width: 170px;
    width: auto;
    max-width: 100%;
    padding: 6px 16px;
    font-size: 0.8rem;

    &[href$=".pdf"]::after {
      margin-bottom: -0.08rem;
    }
  }

  &[href$=".pdf"] {
    gap: 8px;
  }

  &[href$=".pdf"]::before {
    /* wysiwygのaタグ用スタイルの打ち消し */
    content: none;
  }

  &[href$=".pdf"]::after {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    width: 1rem;
    height: 1.25rem;
    margin-bottom: -0.0875rem;
    background-color: currentColor;
    mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-pdf.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-pdf.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    padding: 8px 20px 10px;

    &[data-size="sm"] {
      min-width: 106px;
    }
  }
}

/* ==========================================================================
   components/toc-nav.css — 目次ナビゲーション
   ========================================================================== */

.toc-nav {
  padding: 25px 24px;
  background-color: var(--color-main-light);
  font-family: var(--font-sans);

  .toc-nav__title {
    margin: 0 0 14px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-main);
    text-align: center;
  }

  .toc-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 13px 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .toc-nav__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }

  .toc-nav__link {
    display: inline;
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.0175rem;
    color: var(--color-main);
    text-decoration: none;
  }

  .toc-nav__link:hover {
    text-decoration: underline;
  }

  .toc-nav__link::after {
    content: "";
    display: inline-block;
    width: 0.8125rem;
    height: 0.5rem;
    margin-left: 4px;
    vertical-align: middle;
    background-color: var(--color-main);
    -webkit-mask-image: url("/site-assets/brand/seibu-fitness/images/common/chevron-down.svg");
    mask-image: url("/site-assets/brand/seibu-fitness/images/common/chevron-down.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    padding: 24px 32px;
    background-color: #eef4f9;

    .toc-nav__title,
    .toc-nav__title {
      margin-bottom: 16px;
      font-size: 1.75rem;
    }

    .toc-nav__list,
    .toc-nav__list {
      gap: 16px 32px;
    }

    .toc-nav__link,
    .toc-nav__link {
      font-size: 1rem;
      letter-spacing: 0.02rem;
    }

    .toc-nav__link::after,
    .toc-nav__link::after {
      width: 0.875rem;
      height: 0.5625rem;
      margin-left: 9px;
    }
  }
}

/* ==========================================================================
   components/ctas.css — CTA ボタン群
   ========================================================================== */

.ctas {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

/* ==========================================================================
   components/section.css — セクションベースレイアウト
   ========================================================================== */

.section {
  .section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline: 20px;
    gap: 20px;
    max-width: var(--content-max-width);
    margin-inline: auto;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      padding-inline: 120px;
      gap: 38px;
    }
  }

  .section__header {
    text-align: center;
  }

  .section__kicker {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-main) 25%, transparent);
  }

  .section__title {
    text-align: left;
    text-decoration: none;
  }

  .section__lead {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-800);

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-top: 24px;
    }

    &[data-tone="light"] {
      color: var(--color-white);
    }
  }

  .section__footer-link {
    max-width: var(--content-max-width);
    margin: 40px auto 0;
    text-align: center;

    .section__footer-link .text-link[data-icon="chevron"] {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.6;
      letter-spacing: 0.0625rem;
      color: var(--color-main);
    }
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .section__header {
      text-align: left;
    }
  }
}

/* ==========================================================================
   components/section-title.css — セクション見出し（汎用コンポーネント）
   ========================================================================== */

.section-title {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: 0;
  text-align: left;
  margin-left: -21px;
  padding-inline: 21px 11px;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.1375rem;
  text-decoration: none;
}

.section-title::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1.46rem;
  background: url("/site-assets/brand/seibu-fitness/images/common/section-title-underline.svg") no-repeat bottom left;
  background-size: 100% 100%;
}

.section-title[data-tone="light"] {
  color: var(--color-white);
}

.section-title[data-tone="light"]::after {
  background: url("/site-assets/brand/seibu-fitness/images/common/section-title-underline-light.svg") no-repeat bottom left;
  background-size: 100% 100%;
}

html[data-viewport="mobile"] .section-title {
  display: inline-block;
  padding: 0;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.1rem;
}

/* ==========================================================================
   components/page-header.css — ページヘッダー（汎用コンポーネント）
   ==========================================================================
   責務:
   - 各ページのタイトル＋補足テキスト（body-copy など）を表示する汎用ブロック
   ========================================================================== */

.page-header {
  background-color: var(--color-white);
  padding-block-start: 40px;
  margin-block-end: 60px;

  .page-header__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .page-header__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.07rem;
    color: var(--color-main);
    text-align: center;
  }

  html[data-viewport="tablet"] & {
    padding-block-start: 80px;

    .page-header__title {
      font-size: 2.625rem;
      letter-spacing: 0.105rem;
    }
  }

  html[data-viewport="desktop"] & {
    padding-block-start: 100px;
    margin-block-end: 100px;

    .page-header__inner {
      gap: 60px;
    }

    .page-header__title {
      font-size: 3.25rem;
      letter-spacing: 0.13rem;
    }
  }
}

/* ==========================================================================
   site-header.css — 共通ヘッダー（site-header ブロック）
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-fixed);
  display: flex;
  width: 100%;
  min-height: 68px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-black) 6%, transparent);
  background-color: var(--color-white);

  .site-header__inner {
    position: relative;
    z-index: 1;
    width: var(--content-max-width);
    max-width: 100%;
    margin-inline: auto;
    padding: 0 64px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    background-color: var(--color-white);
    transition: background-color 0.17s ease, color 0.17s ease;
  }

  .site-header__inner-left,
  .site-header__inner-right {
    display: flex;
    align-items: stretch;
  }

  .site-header__inner-right {
    gap: 40px;
  }

  .site-header__logo {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.045rem;
    color: var(--color-main);
    text-decoration: none;
  }

  .site-header__inner-left a.site-header__logo::after {
    display: none;
  }

  .site-header__logo-img {
    display: block;
    height: 28px;
    width: auto;
    transition: opacity 0.17s ease;
  }

  .site-header__logo-img[data-variant="white"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
  }

  &.site-header--menu-open .site-header__logo-img[data-variant="default"] {
    opacity: 0;
    pointer-events: none;
    transition-delay: 0.15s;
  }

  &.site-header--menu-open .site-header__logo-img[data-variant="white"] {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.15s;
  }

  .site-header__nav {
    margin-left: auto;
    display: flex;
    align-items: stretch;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-main);
  }

  .site-header__nav-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__nav-item {
    display: flex;
    min-width: 8.42em;
  }

  .site-header__nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
    /* wysiwyg.css の a スタイル打ち消し */
  }

  .site-header__nav a.site-header__nav-link::after {
    display: none;
  }

  /* PC: ホバー時（選択中・Figma: 背景 Mono/Gray・下線 4px Main・左右 20px） */
  .site-header__nav-item[data-has-dropdown="true"]:hover .site-header__nav-dropdown-trigger {
    position: relative;
    padding-inline: 20px;
    background-color: var(--color-gray-200);
  }

  .site-header__nav-item[data-has-dropdown="true"]:hover .site-header__nav-dropdown-trigger::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: var(--color-main);
    content: "";
  }

  .site-header__nav-item[data-has-dropdown="true"] {
    position: relative;
  }

  .site-header__nav-dropdown {
    position: relative;
    display: flex;
    width: 100%;
  }

  .site-header__nav-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .site-header__nav-dropdown-trigger .site-header__nav-dropdown-icon {
    display: block;
    margin-top: 0.125rem;
    width: 0.75rem;
    height: 0.5rem;
  }

  /* PC: 「高田馬場」「所沢」ホバーで開くドロップダウン（Figma: 青背景・2カラム・白文字・Chevron） */
  .site-header__nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    min-width: 448px;
    padding: 30px 20px;
    background-color: color-mix(in srgb, var(--color-main) 70%, transparent);
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: none;
    flex-direction: column;
    z-index: var(--z-index-dropdown);
    overflow: hidden;
  }

  .site-header__nav-item[data-has-dropdown="true"]:hover .site-header__nav-dropdown-panel,
  .site-header__nav-item[data-has-dropdown="true"]:focus-within .site-header__nav-dropdown-panel {
    display: flex;
  }

  .site-header__nav-dropdown-sections {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .site-header__nav-dropdown-divider {
    flex-shrink: 0;
    align-self: stretch;
    width: 1px;
    min-height: 1px;
    background-color: color-mix(in srgb, var(--color-white) 45%, transparent);
  }

  .site-header__nav-dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline-start: 10px;
  }

  .site-header__nav-dropdown-section-title {
    margin: 0;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.0625rem;
    color: var(--color-white);
  }

  .site-header__nav-dropdown-section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site-header__nav-dropdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    min-height: 20px;
  }

  .site-header__nav-dropdown-row-icon {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.5rem;
    transform: rotate(-90deg);
    filter: brightness(0) invert(1);
  }

  .site-header__nav-dropdown-link {
    display: inline-block;
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-white);
    text-decoration: none;
  }

  .site-header__nav-dropdown-panel a.site-header__nav-dropdown-link::after {
    display: none;
  }

  .site-header__nav-dropdown-link:hover {
    color: var(--color-white);
    opacity: 0.9;
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .site-header__menu-toggle {
    display: none;
    margin-left: auto;
    width: 2rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  .site-header__menu-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-main);
    border-radius: 1px;
    transition: transform 0.2s ease, background-color 0.17s ease, opacity 0.15s ease;
  }

  .site-header__menu-toggle-bar+.site-header__menu-toggle-bar {
    margin-top: 6px;
  }

  /* 開いたメニュー（SPメニュー: 背景 #003153, テキスト白） */
  .site-header__mobile-menu {
    position: fixed;
    inset: 0;
    padding-top: 48px;
    height: 100dvh;
    overflow: auto;
    background-color: var(--color-main);
    background-image: url("/site-assets/brand/seibu-fitness/images/common/site-header-mobile-menu-bg-bottom.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    z-index: 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  &.site-header--menu-open .site-header__mobile-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* メニューが開ききる直前に .site-header__inner の背景・文字色を反転 */
  &.site-header--menu-open .site-header__inner {
    transition-delay: 0.15s;
    background-color: var(--color-main);
    color: var(--color-white);
  }

  &.site-header--menu-open .site-header__inner .site-header__logo,
  &.site-header--menu-open .site-header__inner .site-header__nav {
    transition-delay: 0.15s;
    color: var(--color-white);
  }

  &.site-header--menu-open .site-header__inner .site-header__menu-toggle-bar {
    transition-delay: 0.15s;
    background-color: var(--color-white);
  }

  /* メニュー開時: ハンバーガー → バツアイコン */
  &.site-header--menu-open .site-header__menu-toggle {
    position: relative;
    justify-content: center;
  }

  &.site-header--menu-open .site-header__menu-toggle-bar:nth-child(1) {
    transform: translateY(0.625rem) rotate(33deg);
    transition: transform 0.2s ease, background-color 0.17s ease;
    transition-delay: 0.15s;
  }

  &.site-header--menu-open .site-header__menu-toggle-bar:nth-child(2) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  &.site-header--menu-open .site-header__menu-toggle-bar:nth-child(3) {
    transform: translateY(-0.6875rem) rotate(-33deg);
    transition: transform 0.2s ease, background-color 0.17s ease;
    transition-delay: 0.15s;
  }

  .site-header__mobile-nav {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 32px 20px 0 20px;
  }

  .site-header__mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .site-header__mobile-nav-link {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-decoration: none;
  }

  .site-header__mobile-nav a.site-header__mobile-nav-link::after {
    content: none;
  }

  .site-header__mobile-nav-link:hover,
  .site-header__mobile-nav-link:focus {
    color: var(--color-white);
    opacity: 0.9;
  }

  /* アコーディオン（高田馬場・所沢） */
  .site-header__mobile-accordion-item {
    list-style: none;
  }

  .site-header__mobile-accordion-trigger {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
  }

  .site-header__mobile-accordion-trigger:hover,
  .site-header__mobile-accordion-trigger:focus {
    color: var(--color-white);
    opacity: 0.9;
  }

  .site-header__mobile-accordion-icon {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.5rem;
    filter: brightness(0) invert(1);
    transition: transform 0.2s ease;
  }

  .site-header__mobile-accordion-item[data-expanded="true"] .site-header__mobile-accordion-icon {
    transform: rotate(180deg);
  }

  .site-header__mobile-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .site-header__mobile-accordion-item[data-expanded="true"] .site-header__mobile-accordion-panel {
    max-height: 520px;
  }

  .site-header__mobile-divider {
    width: 100%;
    height: 1px;
    margin-block: 20px;
    background-color: color-mix(in srgb, var(--color-white) 45%, transparent);
  }

  .site-header__mobile-section {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .site-header__mobile-section-title {
    margin: 0;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.182;
    letter-spacing: 0.06875rem;
    color: var(--color-white);
  }

  .site-header__mobile-section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site-header__mobile-section-body:first-child {
    padding-top: 16px;
  }

  .site-header__mobile-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }

  .site-header__mobile-links-item {
    display: inline-flex;
    align-items: center;
  }

  .site-header__mobile-links-item:not(:last-child) {
    padding-inline-end: 20px;
    border-inline-end: 1px solid color-mix(in srgb, var(--color-white) 70%, transparent);
  }

  .site-header__mobile-links-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__mobile-links a.site-header__mobile-links-link::after {
    display: none;
  }

  .site-header__mobile-links-link:hover {
    color: var(--color-white);
    opacity: 0.9;
  }

  .site-header__mobile-ctas {
    padding: 24px 0 24px;
  }

  .site-header__mobile-ctas .button {
    flex: 1 0 0;
    min-width: 0;
  }

  html[data-viewport="mobile"] &,
  html[data-viewport="tablet"] & {
    .site-header__inner {
      padding-inline: 24px;
      gap: 24px;
    }

    .site-header__inner-left {
      align-items: center;
    }

    .site-header__inner-right {
      align-items: center;
    }

    .site-header__logo-img {
      height: 18px;
    }

    .site-header__nav,
    .site-header__actions {
      display: none;
    }

    .site-header__menu-toggle {
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .site-header__logo:hover {
      color: var(--color-main);
      opacity: 0.85;
    }

    .site-header__nav-dropdown-panel .site-header__nav-dropdown-link:hover {
      background: transparent;
    }
  }
}

/* ==========================================================================
   site-footer.css — 共通フッター（site-footer ブロック）
   ========================================================================== */

.site-footer {
  background-color: var(--color-white);
  padding-inline: 40px;
  padding-top: 80px;
  padding-bottom: 32px;
  position: relative;
  font-size: 0.875rem;
  line-height: 1;

  a {
    /* wysiwyg の a スタイル打ち消し */
    text-decoration: none;
  }

  a:has(img)::after {
    /* wysiwyg の a スタイル打ち消し */
    content: none;
  }

  .site-footer__upper {
    max-width: var(--content-max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .site-footer__upper-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .site-footer__logo img {
    height: 42px;
  }

  .site-footer__shops .text-link {
    font-size: 0.875rem;
  }

  .site-footer__social {
    display: flex;
    gap: 16px;
  }

  .site-footer__social img {
    width: 1.875rem;
    height: 1.875rem;
  }

  .site-footer__link-row {
    margin-top: 4px;
  }

  .site-footer__upper-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-footer__upper-right .site-footer__logo {
    display: block;
    margin: 0;
    text-decoration: none;
  }

  .site-footer__upper-right .site-footer__logo img {
    height: 20px;
    width: auto;
    display: block;
  }

  .site-footer__sns-shops {
    display: flex;
    gap: 24px;
    margin-top: 24px;
  }

  .site-footer__shop-sns {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .site-footer__shop-sns span {
    font-size: 0.875rem;
  }

  .site-footer__shop-sns img {
    width: 30px;
    height: 30px;
  }

  .site-footer__primary-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .site-footer__divider {
    max-width: var(--content-max-width);
    margin-block-start: 60px;
    padding-block-start: 60px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .site-footer__lower {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding-inline: 20px;
  }

  .site-footer__lower-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site-footer__boreca-logo {
    height: 50px;
  }

  .site-footer__boreca-logo img {
    height: 100%;
    width: auto;
    display: block;
  }

  .site-footer__copy {
    display: block;
    margin: 60px auto 0;
    max-width: var(--content-max-width);
    font-size: 0.875rem;
    text-align: center;
  }

  .site-footer__nav-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__nav-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .site-footer__decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(578px, 100vw);
    pointer-events: none;
  }

  .site-footer__decoration img {
    display: block;
    width: 100%;
    height: auto;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    padding-inline: 120px;

    .site-footer__upper {
      flex-direction: row;
      align-items: flex-start;
      gap: 120px;
    }

    .site-footer__shop-social-row {
      flex-direction: row;
      margin-top: 30px;
    }

    .site-footer__link-row {
      margin-top: 20px;
    }

    .site-footer__sns-shops {
      margin-top: 30px;
    }

    .site-footer__shop-sns span {
      font-size: 0.875rem;
    }

    .site-footer__primary-links {
      margin-top: 20px;
      gap: 14px;
    }

    .site-footer__primary-links .text-link {
      font-size: 0.875rem;
    }

    .site-footer__lower {
      align-items: center;
      padding-inline: 0;
    }

    .site-footer__nav-groups {
      flex-direction: row;
      gap: 48px;
    }

    .site-footer__nav-group .text-link {
      font-size: 0.875rem;
    }
  }

  html[data-viewport="tablet"] & {
    .site-footer__lower {
      gap: 50px;
    }
  }

  html[data-viewport="desktop"] & {
    .site-footer__lower {
      flex-direction: row;
      gap: 98px;
    }

    .site-footer__copy {
      margin-block-start: 20px;
      text-align: left;
    }
  }
}

/* ==========================================================================
   components/text-link.css — テキストリンク & 下線アニメーション
   ========================================================================== */

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 3px;

  &[target="_blank"]:not([href$=".pdf"]):not(:has(.text-link__icon)):not([data-icon="external"])::after {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: -0.175rem;
    width: 0.65625rem;
    height: 0.65625rem;
    background-color: currentColor;
    mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-external.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-external.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  &[href$=".pdf"]:not(:has(.text-link__icon))::before {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: -0.175rem;
    width: 0.63rem;
    height: 0.8225rem;
    background-color: currentColor;
    mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-pdf.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-pdf.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  &[data-bold="true"] {
    font-weight: 700;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover::after {
      opacity: 0.6;
    }

    &[data-icon="external"][target="_blank"]:hover::before {
      opacity: 0.6;
    }
  }

  .text-link__icon {
    display: inline-block;
    vertical-align: middle;
    width: 0.625rem;
    height: 1rem;
    margin-top: 0.125rem;

    .text-link__icon[data-external="true"] {
      width: 0.75rem;
      height: 0.75rem;
    }
  }
}

/* ==========================================================================
   components/text-link-list.css — テキストリンクリストブロック
   ========================================================================== */

.text-link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap: 20px;
  padding: 0;
  font-family: var(--font-sans);

  .text-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05rem;
    color: var(--color-black);
    text-decoration: none;
  }

  .text-link-list__separator {
    color: inherit;
    font-weight: inherit;
  }

  &[data-size="large"] {
    justify-content: center;
    text-align: center;
    gap: 30px 40px;
  }

  &[data-size="large"] .text-link {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.0625rem;
    color: var(--color-black);
    text-decoration: none;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="mobile"] & {
    gap: 12px 16px;

    &[data-size="large"] {
      gap: 15px 20px;
    }

    .text-link {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1;
    }

    &[data-size="large"] .text-link {
      font-size: 1rem;
      line-height: 1;
    }
  }
}

/* ==========================================================================
   components/related-nav.css — 関連ページナビゲーション（最上位）
   ========================================================================== */

.related-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 30px;
  border-left: 5px solid var(--color-main);
  font-family: var(--font-sans);

  .related-nav__heading {
    margin: 0;
    text-align: left;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.0275rem;
    color: var(--color-main);
    text-decoration: none;
  }

  .related-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  .related-nav__links .text-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05rem;
    color: var(--color-black);
    text-decoration: none;
  }

  .related-nav__links .text-link[data-current="true"] {
    font-weight: 700;
    color: var(--color-main);
  }

  .related-nav__links .text-link::after {
    display: none;
  }

  .related-nav__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.625rem;
    height: 1.0625rem;
    color: var(--color-black);
    font-size: 0.75rem;
    font-weight: 400;
  }

  html[data-viewport="mobile"] & {
    padding-inline: 20px 30px;

    .related-nav__heading {
      font-size: 1.25rem;
      line-height: 1.1;
      letter-spacing: 0.025rem;
    }

    .related-nav__links {
      gap: 14px 12px;
    }

    .related-nav__links .text-link {
      font-size: 0.875rem;
      line-height: 1;
      letter-spacing: 0.04375rem;
    }

    .related-nav__separator {
      width: 0.5625rem;
      height: 0.974375rem;
    }
  }

}

/* ==========================================================================
   components/related-nav-sub.css — 関連ページナビゲーション（子階層）
   ==========================================================================
   Figma: 他のフィットネスプログラム
   - 見出し + 下線 + 縦並びリンク
   - data-current="true" のリンクは太字・メインカラー
   - data-expanded="true" の項目は左ボーダー + 横並びで展開表示
   ========================================================================== */

.related-nav-sub {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font-sans);

  .related-nav-sub__header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ↓上書きcssから持ってきたコード。必要なくなったかも？↓ */
  h3.related-nav-sub__heading {
    margin-top: 100px;
  }

  /* ↑上書きcssから持ってきたコード。必要なくなったかも？↑ */

  .related-nav-sub__heading {
    margin: 0;
    flex-shrink: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.636;
    letter-spacing: 0.0275rem;
    color: var(--color-main);
  }

  .related-nav-sub__heading-line {
    flex: 1;
    min-width: 0;
    height: 0;
    border-bottom: 1px solid var(--color-main);
  }

  .related-nav-sub__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .related-nav-sub__content .text-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-decoration: none;
  }

  .related-nav-sub__content .text-link[data-current="true"] {
    font-weight: 700;
    color: var(--color-main);
  }

  .related-nav-sub__content .text-link::after,
  .related-nav-sub__expanded .text-link::after {
    display: none;
  }

  .related-nav-sub__expanded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--color-gray-300);
  }

  .related-nav-sub__expanded .text-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-decoration: none;
  }

  .related-nav-sub__expanded .text-link[data-current="true"] {
    font-weight: 700;
    color: var(--color-main);
  }

  .related-nav-sub__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.625rem;
    height: 1.0625rem;
    color: var(--color-black);
    font-size: 0.75rem;
    font-weight: 400;
  }

  /* --------------------------------------------------------------------------
     Responsive: スマホ
     -------------------------------------------------------------------------- */
  html[data-viewport="mobile"] & {

    .related-nav-sub__heading {
      font-size: 1.25rem;
      line-height: 1.8;
      letter-spacing: 0.025rem;
    }

    .related-nav-sub__content {
      gap: 10px;
    }

    .related-nav-sub__content .text-link {
      font-size: 0.875rem;
      line-height: 1;
      letter-spacing: 0.0175rem;
    }

    .related-nav-sub__expanded {
      padding-inline-start: 8px;
      gap: 10px 12px;
    }

    .related-nav-sub__expanded .text-link {
      font-size: 0.875rem;
      line-height: 1;
      letter-spacing: 0.04375rem;
    }

    .related-nav-sub__separator {
      width: 0.5625rem;
      height: 0.974375rem;
    }
  }
}

/* ==========================================================================
   components/tag.css — タグコンポーネント
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  line-height: 1.4;
  border: 1px solid var(--color-main);
  color: var(--color-main);
  background-color: var(--color-white);

  &[data-style="primary"] {
    background-color: var(--color-main);
    color: var(--color-white);
  }

  &[data-style="pale"] {
    background-color: var(--color-main-light);
  }
}

/* ==========================================================================
   components/chip.css — チップコンポーネント
   ========================================================================== */

.chip {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-700);
  font-size: 0.875rem;
  background-color: var(--color-white);
  color: var(--color-gray-950);

  &[data-checked="true"] {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-white);
  }
}

/* ==========================================================================
   components/key-message.css — キーメッセージブロック
   トップの Philosophy と店舗ページの特徴（画像付き）で共通利用
   ========================================================================== */

.key-message {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-white);

  /* 直前が important-notice のときの余白調整 */
  .important-notice+& {
    margin-top: 80px;
  }

  /* 直後に .section が来るときの余白調整 */
  &+.section {
    margin-top: 80px;
  }

  .key-message__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: 20px;
    padding-block-start: 28px;
  }

  .key-message__watermark {
    position: absolute;
    z-index: 0;
    top: 0;
    left: -4px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3.75rem, 15vw, 13rem);
    font-weight: 700;
    letter-spacing: 0.05rem;
    line-height: 1;
    color: color-mix(in srgb, var(--color-main) 10%, transparent);
    pointer-events: none;
  }

  .key-message__header {
    position: relative;
    z-index: 1;
    padding-top: 0;
  }

  .key-message__title {
    margin: 0;
    font-size: 1.875rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    color: var(--color-main);
  }

  .key-message__body {
    position: relative;
    z-index: 1;
    margin-top: 24px;
  }

  .key-message__lead {
    max-width: 640px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--color-gray-800);
  }

  .key-message__media {
    align-self: flex-end;
    width: calc(310 / 375 * 100vw);
    margin-right: -24px;
  }

  .key-message__media img {
    display: block;
    width: 100%;
    height: auto;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .key-message__inner {
      flex-direction: row;
      gap: 40px;
      padding-inline: 120px 0;
      padding-block-start: 104px;
    }

    .key-message__watermark {
      left: -19px;
    }

    .key-message__inner:has(.key-message__media) .key-message__content {
      width: calc(572 / 1440 * 100vw);
    }

    .key-message__media {
      align-self: unset;
      width: calc(708 / 1440 * 100vw);
      max-width: 708px;
      margin-right: 0;
    }

    &:has(.key-message__media) .key-message__body {
      width: calc(384 / 1440 * 100vw);
    }
  }
}

/* ==========================================================================
   components/junior-key-message.css — ジュニアスクール Philosophy ブロック
   ジュニアスクールページ専用（key-message とは構造・スタイルが異なる）
   ========================================================================== */

.junior-key-message {
  position: relative;
  z-index: 0;
  background-color: var(--color-white);
  overflow: hidden;

  /* 直後に .section が来るときの余白調整 */
  &+.section {
    margin-block-start: 80px;
  }

  /* Figma: タイトルが透かしから約71px下 */
  .junior-key-message__inner {
    position: relative;
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .junior-key-message__watermark {
    margin: 0;
    font-family: var(--font-roboto);
    font-size: min(calc(69 / 393 * 100vw), 6.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-main-light);
    text-align: center;
  }

  .junior-key-message__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
  }

  .junior-key-message__header {
    padding-top: 0;
    width: 100%;
  }

  .junior-key-message__title {
    display: block;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.0275rem;
    color: var(--color-main);
    text-align: center;
    text-decoration: none;
  }

  .junior-key-message__title:after {
    content: none;
  }

  .junior-key-message__body {
    width: 100%;
  }

  .junior-key-message__lead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-align: center;
  }

  /* Figma: ロゴコンテナ 352×192 */
  .junior-key-message__media {
    width: 100%;
    max-width: 352px;
    aspect-ratio: 352 / 192;
    margin-inline: auto;
    overflow: hidden;
  }

  .junior-key-message__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .junior-key-message__inner {
      padding-inline: 20px;
    }

    .junior-key-message__title {
      font-size: 1.75rem;
    }

    .junior-key-message__lead {
      font-size: 1.125rem;
      letter-spacing: 0.0225rem;
    }

    .junior-key-message__media {
      max-width: unset;
      aspect-ratio: 792 / 340;
    }
  }
}

/* ==========================================================================
   components/entry-visit-guide.css — 入会・見学のご案内ブロック
   ========================================================================== */

.entry-visit-guide {
  background-color: var(--color-main-light);
  text-align: center;
  padding-block: 40px;

  .entry-visit-guide__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-inline: 120px;
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .entry-visit-guide__title {
    margin: 0;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.0875rem;
    color: var(--color-gray-800);
    text-decoration: none;
  }

  .entry-visit-guide__title::after {
    content: none;
  }

  .entry-visit-guide__lead {
    margin: 24px 0 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-800);
  }

  .entry-visit-guide__body {
    margin: 0;
  }

  html[data-viewport="mobile"] & {
    padding-block: 40px;

    .entry-visit-guide__inner {
      padding-inline: 32px;
      gap: 20px;
    }

    .entry-visit-guide__title {
      font-size: 1.5rem;
      letter-spacing: 0.075rem;
    }

    .entry-visit-guide__lead {
      text-align: left;
      font-size: 0.875rem;
    }
  }
}

/* ==========================================================================
   components/important-notice.css — 重要なお知らせブロック
   ========================================================================== */

.important-notice {
  margin-top: 0;

  .important-notice__inner {
    max-width: min(792px, 100%);
    margin-inline: auto;
    background-color: var(--color-main-light);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .important-notice__header {
    flex-shrink: 0;
  }

  .important-notice__body {
    flex: unset;
    min-width: 0;
  }

  .important-notice__label {
    margin: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-decoration: none;
  }

  .important-notice__label:after {
    content: none;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .important-notice__inner {
      padding: 24px 40px;
    }

    .important-notice__body {
      flex: 1 0 0;
    }
  }

  html[data-viewport="desktop"] & {
    .important-notice__inner {
      flex-direction: row;
      align-items: center;
      gap: 40px;
    }
  }
}

/* --------------------------------------------------------------------------
   Block: notice-list（important-notice 内のリスト）
   -------------------------------------------------------------------------- */

.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 2;
  font-weight: 300;
  color: var(--color-gray-600);

  a {
    gap: 0;
    text-decoration: none;
  }

  .notice-list__item {
    display: flex;
    align-items: flex-start;
  }

  .notice-list__item::after {
    content: none;
  }

  .notice-list__date {
    display: inline-block;
    min-width: 70px;
    font-size: 0.875rem;
    font-weight: 300;
    vertical-align: top;
    white-space: nowrap;
  }

  .notice-list__text {
    display: inline;
    margin: 0 0 0 8px;
    font-size: 0.875rem;
    font-weight: 300;
  }

  html[data-viewport="desktop"] & {
    .notice-list__item+.notice-list__item {
      margin-top: 4px;
    }
  }
}

/* ==========================================================================
   components/disclosure.css — 開閉する補足情報ブロック（汎用）
   ==========================================================================
   用途: 休講・代行、注意書き、補足説明など。共有 accordion.js（js-accordion-*）と併用。
   ========================================================================== */

.disclosure {
  border-block: 1px solid var(--color-gray-300);

  +.disclosure {
    border-top-style: none;
  }

  .disclosure__trigger {
    position: relative;
    z-index: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding-inline: 20px;
    padding-block: 20px;
    text-align: left;
    color: var(--color-main);
    background: none;
    border: none;
    cursor: pointer;
  }

  .disclosure__trigger:hover,
  .disclosure__trigger:focus-visible {
    color: var(--color-main);
  }

  .disclosure__label {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.025rem;
    color: inherit;
  }

  /* FAQ .faq__chevron と同一アセット・寸法（components/faq.css） */
  .disclosure__chevron {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.5rem;
    display: block;
    transition: transform 0.2s ease;
  }

  &[data-expanded="true"] .disclosure__chevron {
    transform: rotate(180deg);
  }

  .disclosure__panel {
    margin: 0;
    padding-inline: 20px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s padding-block-end 0.2s;
  }

  &[data-expanded="true"] .disclosure__panel {
    max-height: 2400px;
    opacity: 1;
    visibility: visible;
    padding-block-end: 20px;
  }

  .disclosure__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .disclosure__subhead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.7777777778;
    letter-spacing: 0.0225rem;
    color: var(--color-main);
  }

  .disclosure__text {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  .disclosure__text p:first-child {
    margin: 0;
  }

  .disclosure__text p:empty {
    display: none;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .disclosure__trigger {
      padding-block: 30px;
      padding-inline: 24px;
    }

    .disclosure__label {
      font-size: 1.5rem;
      line-height: 1.5;
      letter-spacing: 0.03rem;
    }

    .disclosure__panel {
      padding-inline: 24px;
    }

    &[data-expanded="true"] .disclosure__panel {
      padding-block-end: 30px;
    }

    .disclosure__subhead {
      font-size: 1.125rem;
      line-height: 1.6;
      letter-spacing: 0.0225rem;
    }
  }
}

/* ==========================================================================
   components/link-card-list.css — リンクカードリストブロック
   ==========================================================================
   Figma: link-card-list
   - data-cols（カラム数 1〜4）
   - data-align="center"（アイテムが少ないとき中央寄せ）
   - data-has-border="true"（アイテム間にボーダーあり）
   ========================================================================== */

.link-card-list {
  display: grid;
  gap: 30px 24px;
  grid-template-columns: repeat(1, 1fr);
  list-style: none;
  padding: 0;

  &[data-cols="1"] {
    grid-template-columns: repeat(1, 1fr);
  }

  &[data-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
  }

  &[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
  }

  &[data-cols="4"] {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 25px;
  }

  /* --------------------------------------------------------------------------
     Align: data-align="center"（アイテムが少ないとき中央寄せ）
     flexbox で justify-content: center により中央寄せ
     -------------------------------------------------------------------------- */
  &[data-align="center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  &[data-align="center"][data-cols="1"] .link-card-list__item {
    flex: 0 1 min(360px, 100%);
  }

  &[data-align="center"][data-cols="2"] .link-card-list__item {
    flex: 0 1 min(360px, calc((100% - 24px) / 2));
  }

  &[data-align="center"][data-cols="3"] .link-card-list__item {
    flex: 0 1 min(384px, calc((100% - 50px) / 3));
  }

  &[data-align="center"][data-cols="4"] .link-card-list__item {
    flex: 0 1 min(320px, calc((100% - 75px) / 4));
  }

  .link-card-list__item {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .link-card-list__item>* {
    flex: 1;
    min-height: 0;
  }

  /* --------------------------------------------------------------------------
     Border: data-has-border="true"（アイテム間にボーダーあり）
     -------------------------------------------------------------------------- */
  &[data-has-border="true"] {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: min(792px, 100%);
    margin-inline: auto;
  }

  &[data-has-border="true"] .link-card-list__item {
    border-top: 2px solid var(--color-gray-200);
  }

  &[data-has-border="true"] .link-card-list__item:last-child {
    border-bottom: 2px solid var(--color-gray-200);
  }

  /* --------------------------------------------------------------------------
     Responsive
     -------------------------------------------------------------------------- */
  html[data-viewport="mobile"] & {
    gap: 30px 20px;

    &[data-cols="2"],
    &[data-cols="3"],
    &[data-cols="4"] {
      grid-template-columns: 1fr;
    }

    &[data-has-border="true"] {
      row-gap: 0;
    }

    &[data-align="center"] .link-card-list__item {
      flex: 0 1 100%;
    }
  }
}

/* ==========================================================================
   components/link-card.css — リンクカードブロック
   ==========================================================================
   Figma: link-card（通常） / link-card（大） / link-card-background
   - data-size="lg"（大）
   - data-size="sm"（コンパクト）
   - data-variant="background"（背景色あり）
   - オプション要素: link-card__link / link-card__link-icon（リンク文言＋アイコン）
   ========================================================================== */

.link-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  /* wysiwyg.css の a スタイル打ち消し */
  align-items: stretch;

  /* wysiwyg の外部リンクアイコンを打ち消し（コンポーネントは独自デザインのため） */
  &[target="_blank"]:not([href$=".pdf"])::after {
    content: none;
  }

  .link-card__image {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 416 / 234;
    overflow: hidden;
  }

  .link-card__image-inner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 416 / 234;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .link-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .link-card__title {
    margin: 0;
    display: block;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.0225rem;
  }

  .link-card__description {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.714;
    letter-spacing: 0.0175rem;
    color: var(--color-black);
  }

  /* オプション: リンク文言＋アイコン（例: ご予約のルールはこちら） */
  .link-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 4px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .link-card__link-icon {
    flex-shrink: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: none;
    }

    &:hover .link-card__image-inner {
      transform: scale(1.08);
    }
  }

  &[data-size="sm"] {
    gap: 0;
    min-width: 0;
  }

  &[data-size="sm"] .link-card__content {
    gap: 4px;
    padding-block-start: 12px;
  }

  &[data-size="sm"] .link-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02rem;
    color: var(--color-main);
  }

  &[data-size="sm"] .link-card__description {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.615;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }

  &[data-size="sm"] .link-card__title::before {
    content: none;
  }

  &[data-size="lg"] {
    flex-direction: column;
    gap: 0;
    min-height: auto;
    padding-block: 24px;
  }

  &[data-size="lg"] .link-card__image {
    width: 100%;
  }

  &[data-size="lg"] .link-card__content {
    padding-inline-start: 0;
    padding-block-start: 12px;
    justify-content: center;
  }

  &[data-variant="background"] {
    gap: 0;
    background-color: var(--color-main-light);
  }

  &[data-variant="background"] .link-card__content {
    padding: 16px;
    gap: 10px;
    justify-content: flex-start;
  }

  &[data-variant="background"] .link-card__title {
    font-size: 1.125rem;
    line-height: 1.444;
  }

  &[data-variant="background"] .link-card__description {
    font-size: 0.875rem;
    line-height: 1.714;
  }

  &[data-variant="background"] .link-card__data {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    list-style: none;
    padding: 0;
  }

  &[data-variant="background"] .link-card__data-item {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.714;
    letter-spacing: 0.0175rem;
    color: var(--color-black);
  }


  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {

    & .link-card__description,
    & .link-card__description {
      font-size: 0.8125rem;
      line-height: 1.846;
      letter-spacing: 0.01625rem;
    }

    &[data-size="sm"] .link-card__description,
    &[data-size="sm"] .link-card__description {
      line-height: 1.615;
    }

    &[data-size="lg"] {
      flex-direction: row;
      min-height: 228px;
      padding-block: 40px;
    }

    &[data-size="lg"] .link-card__image,
    &[data-size="lg"] .link-card__image {
      width: 52%;
      border: 1px solid var(--color-gray-200);
    }

    &[data-size="lg"] .link-card__content {
      padding-inline-start: 20px;
      padding-block-start: 0;
    }

    &[data-variant="background"] .link-card__content,
    &[data-variant="background"] .link-card__content {
      padding: 20px 20px 15px;
    }

    &[data-variant="background"] .link-card__description,
    &[data-variant="background"] .link-card__description {
      font-size: 0.8125rem;
      line-height: 1.846;
    }

    &[data-variant="background"] .link-card__data-item,
    &[data-variant="background"] .link-card__data-item {
      font-size: 0.8125rem;
      line-height: 1.846;
      letter-spacing: 0.01625rem;
    }
  }
}

/* ==========================================================================
   components/junior-featured-card.css — ジュニアスクール 注目カード
   ==========================================================================
   責務:
   - ジュニアスクールページ専用の注目プログラムカード（画像＋テキスト）
   - Figma: ジュニアスイミングスクールカード
   - data-size="sm"（コンパクト）— グリッド内の小カード向け
   ========================================================================== */

.junior-featured-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 20px;
  background-color: var(--color-main-light);
  text-decoration: none;
  color: inherit;
  align-items: stretch;

  .junior-featured-card__image {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 416 / 234;
    overflow: hidden;
  }

  .junior-featured-card__image-inner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 416 / 234;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: none;
    }

    &:hover .junior-featured-card__image-inner {
      transform: scale(1.08);
    }
  }

  .junior-featured-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0;
  }

  .junior-featured-card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.875;
    letter-spacing: 0.03125rem;
    color: var(--color-main);
  }

  .junior-featured-card__description {
    margin: 4px 0 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  /* オプション: リンク文言＋アイコン（例: ご予約のルールはこちら） */
  .junior-featured-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .junior-featured-card__link-icon {
    flex-shrink: 0;
  }

  /* --------------------------------------------------------------------------
     Variant: data-size="sm"（コンパクト） — グリッド内の小カード向け
     --------------------------------------------------------------------------
     Figma: 西武ジュニアダンススクール
     Mobile: タイトル 16px Bold, 本文 13px, 縦積み
     Desktop: 横並び, gap 24px, タイトル 24px, 本文 16px, 画像幅 248px
     -------------------------------------------------------------------------- */
  &[data-size="sm"] {
    gap: 0;
    min-width: 0;
    padding: 0;
    background-color: transparent;
  }

  &[data-size="sm"] .junior-featured-card__content {
    padding-top: 12px;
  }

  &[data-size="sm"] .junior-featured-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02rem;
    color: var(--color-main);
  }

  &[data-size="sm"] .junior-featured-card__description {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.615;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }

  &[data-size="sm"] .junior-featured-card__link {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.02rem;
  }

  /* --------------------------------------------------------------------------
     data-viewport: tablet / desktop
     -------------------------------------------------------------------------- */
  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    flex-direction: row;
    padding: 40px;
    min-height: 228px;

    .junior-featured-card__image {
      width: 46.5%;
      border: 1px solid var(--color-gray-200);
    }

    .junior-featured-card__content {
      padding: 0 24px 0;
      justify-content: center;
    }

    .junior-featured-card__title {
      font-size: 1.5rem;
      line-height: 1.5;
      letter-spacing: 0.03rem;
    }

    .junior-featured-card__description {
      font-size: 1rem;
      line-height: 1.75;
      letter-spacing: 0.02rem;
    }

    /* sm: tablet / desktop 上書き（Figma 横並び, gap 24px, タイトル 24px, 本文 16px） */
    &[data-size="sm"] {
      flex-direction: row;
      gap: 24px;
      padding: 0;
      min-height: auto;
    }

    &[data-size="sm"] .junior-featured-card__image {
      width: 248px;
      aspect-ratio: 248 / 165;
      flex-shrink: 0;
      border: none;
    }

    &[data-size="sm"] .junior-featured-card__content {
      padding-inline: 0;
    }

    &[data-size="sm"] .junior-featured-card__title {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.03rem;
      color: var(--color-main);
    }

    &[data-size="sm"] .junior-featured-card__description {
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.75;
      letter-spacing: 0.02rem;
      color: var(--color-black);
    }

    &[data-size="sm"] .junior-featured-card__link {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.75;
      letter-spacing: 0.02rem;
    }
  }
}

/* ==========================================================================
   components/junior-philosophy-card.css — ほほえみの芽を育む カード
   ==========================================================================
   責務:
   - ジュニアスクールの「ほほえみの芽を育む」コンセプトカード
   - 他ページでも再利用可能
   - Figma: 白背景・角丸50px・ボーダー #ebf3f8
   - モバイル: タイトル 22px / PC: タイトル 28px, カード幅 792px, padding 60px 80px
   ========================================================================== */

.junior-philosophy-card {
  position: relative;
  padding-inline: 10px;
  padding-block-end: 60px;

  .junior-philosophy-card__inner {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 29px 20px;
    background-color: var(--color-white);
    border-radius: max(calc(50 / 393 * 100vw), 50px);
    margin-inline: auto;
    overflow: hidden;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border: 9px solid var(--color-main-light);
      border-radius: max(calc(50 / 393 * 100vw), 50px);
      pointer-events: none;
    }
  }

  .junior-philosophy-card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.0275rem;
    color: var(--color-main);
    text-align: center;
    text-decoration: none;
  }

  .junior-philosophy-card__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .junior-philosophy-card__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .junior-philosophy-card__item-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-main);

    &::before {
      display: none;
    }
  }

  .junior-philosophy-card__item-desc {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.846;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }

  .junior-philosophy-card__decoration {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    width: calc(100% + 40px);
    height: min(calc(154 / 333 * 100%), 154px);
    overflow: hidden;
    border-radius: 0 0 50px 50px;
    pointer-events: none;
  }

  .junior-philosophy-card__decoration img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html[data-viewport="desktop"] & {
    .junior-philosophy-card__inner {
      max-width: 792px;
      gap: 40px;
      padding: 60px 80px 20px;
      border-radius: 50px;

      &::after {
        border-radius: 50px;
      }
    }

    .junior-philosophy-card__title {
      font-size: 1.75rem;
      line-height: 1.5;
      letter-spacing: 0.035rem;
    }

    .junior-philosophy-card__items {
      gap: 40px;
    }

    .junior-philosophy-card__item-title {
      font-size: 1.25rem;
      line-height: 1.6;
      letter-spacing: 0.025rem;
    }

    .junior-philosophy-card__item-desc {
      font-size: 1rem;
      line-height: 1.75;
      letter-spacing: 0.02rem;
    }

    .junior-philosophy-card__decoration {
      margin-left: -80px;
      margin-right: -80px;
      width: calc(100% + 160px);
      height: 366px;
    }
  }
}

/* ==========================================================================
   components/card.css — カードブロック
   ==========================================================================
   link-card と同様のレイアウト。リンクではないコンテンツ用。
   - data-size="sm"（コンパクト）
   - オプション要素: card__link / card__link-icon（リンク文言＋アイコン）
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;

  /* wysiwyg の外部リンクアイコンを打ち消し（コンポーネントは独自デザインのため） */
  & a[target="_blank"]:not([href$=".pdf"])::after {
    content: none;
  }

  .card__image {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 416 / 234;
    overflow: hidden;
  }

  .card__image img {
    width: 100%;
    height: 100%;
  }

  .card__image-inner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 416 / 234;
    object-fit: cover;
  }

  .card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .card__title {
    margin: 0;
    display: block;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.0225rem;
  }

  .card__description {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.846;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }

  .card__data {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    list-style: none;
    padding: 0;
  }

  .card__data-item {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.846;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }

  /* オプション: リンク文言＋アイコン（例: ご予約のルールはこちら） */
  .card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 4px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .card__link-icon {
    flex-shrink: 0;
  }

  /* --------------------------------------------------------------------------
     Variant: data-size="sm"（コンパクト） — グリッド内の小カード向け
     -------------------------------------------------------------------------- */
  &[data-size="sm"] {
    gap: 0;
    min-width: 0;
  }

  &[data-size="sm"] .card__content {
    gap: 4px;
    padding-block-start: 12px;
  }

  &[data-size="sm"] .card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02rem;
    color: var(--color-main);
  }

  &[data-size="sm"] .card__description {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.615;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }

  &[data-size="sm"] .card__title::before {
    content: none;
  }

  &[data-size="lg"] .card__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.025rem;
    color: var(--color-main);
  }

  &[data-size="lg"] .card__description {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.615;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  &[data-size="lg"] .card__data-item {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.846;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  html[data-viewport="mobile"] & .card__description {
    font-size: 0.875rem;
    line-height: 1.714;
    letter-spacing: 0.0175rem;
  }
}

/* ==========================================================================
   components/profile-card.css — プロフィールカードブロック
   ==========================================================================
   Figma: profile-card（人物紹介カード）
   - 画像 + 名前 + キャッチコピー
   ========================================================================== */

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background-color: var(--color-white);
  text-decoration: none;
  color: inherit;
  background-color: var(--color-main-light);

  /* wysiwyg の外部リンクアイコンを打ち消し（コンポーネントは独自デザインのため） */
  &[target="_blank"]:not([href$=".pdf"])::after {
    content: none;
  }

  .profile-card__image {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 416 / 234;
    overflow: hidden;
  }

  .profile-card__image-inner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 416 / 234;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: none;
    }

    &:hover .profile-card__image-inner {
      transform: scale(1.08);
    }
  }

  .profile-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 15px;
  }

  .profile-card__name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.444;
    letter-spacing: 0.0225rem;
    color: var(--color-black);
  }

  .profile-card__description {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.846;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
  }
}

/* ==========================================================================
   components/news.css — お知らせセクション（news ブロック）
   ========================================================================== */

.news {
  .section+& {
    margin-block-start: 80px;
  }

  .important-notice+& {
    margin-block-start: 80px;
  }

  html[data-viewport="mobile"] &+.entry-visit-guide {
    margin-block-start: 60px;
  }

  html[data-viewport="mobile"] .section+& {
    margin-block-start: 40px;
  }

  .key-message+& {
    margin-block-start: 80px;
  }

  .news__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline: 120px;
    max-width: var(--content-max-width);
    margin-inline: auto;

    html[data-viewport="mobile"] & {
      padding-inline: 20px;
      gap: 32px;
    }
  }

  .news__header {
    text-align: center;
  }

  .news__footer-link {
    max-width: var(--content-max-width);
    margin: 40px auto 0;
    text-align: center;
  }

  .news__footer-link .text-link[data-icon="chevron"] {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.6;
    letter-spacing: 0.0625rem;
    color: var(--color-main);
  }

  .news-filter+.news-grid {
    margin-top: 20px;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .news__inner {
      gap: 38px;
    }

    .news__header {
      text-align: left;
    }

    .news-filter+.news-grid {
      margin-top: 40px;
    }
  }
}

/* --------------------------------------------------------------------------
   Block: news-filter
   -------------------------------------------------------------------------- */

.news-filter {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px 60px;
  background-color: var(--color-main-light);
  display: flex;
  align-items: center;
  gap: 60px;

  .news-filter__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    min-width: 64px;
  }

  .news-filter__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }

  .news-filter__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 28px;
  }

  .news-filter__label {
    flex: 0;
    min-width: calc(1.75rem + 16px);
    font-size: 0.875rem;
    border-right: 1px solid var(--color-black);
  }

  .news-filter__divider::before {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: -1px;
    inset-block-end: 0;
    width: 1px;
    transform: translateX(-50%) rotate(90deg);
    background: url("/site-assets/brand/seibu-fitness/images/common/section-title-underline.svg") no-repeat center / contain;
  }

  .news-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    align-items: center;
  }

  .news-filter__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-black);
    cursor: pointer;
  }

  .news-filter__option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0;
    border: 1px solid var(--color-black);
    background-color: transparent;
    display: inline-block;
    position: relative;
  }

  .news-filter__option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: var(--color-black);
  }

  html[data-viewport="mobile"] &,
  html[data-viewport="tablet"] & {
    padding-inline: 24px;
    flex-direction: column;
    gap: 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-main);

    .news-filter__title {
      min-width: auto;
    }
  }
}

/* --------------------------------------------------------------------------
   Block: news-grid
   -------------------------------------------------------------------------- */

.news-grid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;

  html[data-viewport="mobile"] &,
  html[data-viewport="tablet"] & {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
}

/* --------------------------------------------------------------------------
   Block: news-card（corporate ベース・タグ・文字色のみ brand 向けに変更）
   -------------------------------------------------------------------------- */

.news-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;

  .news-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #9b9b9b;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMSAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik05OC40NDE0IDQxLjYwMTVDOTYuMTM0MyAzNy45NDgyIDkyLjU0OCAzNS4yMjkgODcuNzgyOSAzMy41MjY2QzgyLjMwNjQgMzEuNTYwNiA3NS40OTMxIDMwLjk4MDYgNjguOTUyOSAzMS44NDY5QzY5Ljg4NzIgMjUuNzkxIDY5LjMzMzcgMTguOTg5MiA2Ny4zNSAxMy4yNzIxQzYyLjg3OTggMC4zNjkwODcgNTEuNzQ2OSAwIDUwLjQ5NjQgMEM0OS4xNzQgMCA0NS43MDk4IDAuMjQ4NTY5IDQyLjAxNTcgMi41MzA4OUMzOC4zMjg2IDQuODEzMTkgMzUuNTgzMiA4LjM2ODQ4IDMzLjg1ODMgMTMuMDgzOEMzMS44MSAxOC42ODAzIDMxLjE0MTYgMjUuNjMyNyAzMS45NDY2IDMxLjk1MjRDMjUuNjQzNSAzMC45NzMyIDE4LjkwOTIgMzEuNDQwMiAxMy40MDM5IDMzLjMwODJDMC4zNzM3MjggMzcuNzM3MyAwIDQ4Ljc1NzEgMCA1MEMwIDUxLjMxMDYgMC4yNTE1NDkgNTQuNzQ1NSAyLjU1ODYgNTguMzk4NUM0Ljg2NTY2IDYyLjA1MTggOC40NTIwMSA2NC43NzEgMTMuMjE3IDY2LjQ3MzRDMTcuMDQ3OCA2Ny44NDQyIDIxLjUzMjUgNjguNTQ0NyAyNi4xMjUgNjguNTQ0N0MyOC4wNTg0IDY4LjU0NDcgMzAuMDEzMiA2OC40MTY2IDMxLjkzOTQgNjguMTY4MUMzMS4xNTYgNzQuNDU3NyAzMS44MzE2IDgxLjM0OTggMzMuODY1NSA4Ni45MTYzQzM1LjU5MDUgOTEuNjMxNSAzOC4zMzU5IDk1LjE3OTIgNDIuMDIyOSA5Ny40NjkyQzQ1LjcwOTggOTkuNzUxNSA0OS4xODEyIDEwMCA1MC41MDM2IDEwMEM1MS43NjEyIDEwMCA2Mi44ODY5IDk5LjYzMSA2Ny4zNTczIDg2LjcyNzlDNjkuMzQ4IDgwLjk4MDYgNjkuODk0MyA3NC4xMzM3IDY4LjkzODQgNjguMDQ3NkM3MS4wODczIDY4LjM4NjYgNzMuMzAxIDY4LjU1OTggNzUuNTA3NCA2OC41NTk4Qzc5Ljc0MDUgNjguNTU5OCA4My45NDUgNjcuOTM0NyA4Ny41OTYxIDY2LjY5MThDMTAwLjYyNiA2Mi4yNjI3IDEwMSA1MS4yNDI5IDEwMSA1MEMxMDEgNDguNjg5NCAxMDAuNzQ4IDQ1LjI1NDcgOTguNDQxNCA0MS42MDg5VjQxLjYwMTVaTTM3LjYzODcgMTQuNDMyMUM0MS4yODI1IDQuNDc0MjQgNDguOTk0NCAzLjk2OTU2IDUwLjUwMzYgMy45Njk1NkM1MS40NjY2IDMuOTY5NTYgNTkuOTk3OCA0LjI2MzM0IDYzLjU2MjUgMTQuNTYwMUM2NS43NDAzIDIwLjg0OTcgNjUuOTk5IDI4LjU5MjkgNjQuMjIzOCAzNC43NjE5QzYxLjUyODYgNDQuMTU0OCA1NS43OTMzIDU3LjAyNzcgMzcuMjU3OSA2My4xMDYzQzM3LjgyNTYgNjEuMzM2MyAzOC4zNTAyIDU5Ljg5IDM4LjgxMDEgNTguNjQ3M0MzOS44NTI0IDU1LjgwNzQgNDAuNjc4OCA1My41NzAzIDQwLjg3MjkgNTAuMzE2M0M0MS4wODg2IDQ2LjY2MzIgNDAuMTE4MiA0NC4yMDc2IDM4Ljg4OTIgNDEuMDk2OEMzOC4wNjI3IDM5LjAxMDMgMzcuMTI4NCAzNi42NDUgMzYuMjA4NiAzMy4yMTAzQzM1LjA4NzQgMjcuMDYzOSAzNS42MTIgMTkuOTk4NSAzNy42NDYgMTQuNDMyMUgzNy42Mzg3Wk0xNC41ODI2IDYyLjcyOTdDNC41Mjc4NSA1OS4xMjE4IDQuMDE3NTcgNTEuNDkxNSA0LjAxNzU3IDQ5Ljk5MjRDNC4wMTc1NyA0OS4wNDM0IDQuMzE5NDQgNDAuNTkyMSAxNC43MTE5IDM3LjA2NjlDMTkuOTg3MyAzNS4yNzQyIDI2LjgyOTMgMzQuOTQyNyAzMi44NjY0IDM2LjE0NzlDMzMuNjcxNCAzOC44Mjk1IDM0LjQ3NjQgNDAuODU1NiAzNS4xNDQ5IDQyLjU1MDVDMzYuMzE2MyA0NS41MTgyIDM3LjAyNzkgNDcuMzAzNCAzNi44NjI2IDUwLjA5MDNDMzYuNzA0NCA1Mi43NjQ0IDM2LjA0MzEgNTQuNTY0NyAzNS4wMzY5IDU3LjI5ODlDMzQuMzk3NCA1OS4wNDY1IDMzLjYyMTEgNjEuMTYzMSAzMi43ODc1IDY0LjAyNTNDMjYuNTQxOSA2NS4wNDk3IDE5Ljc0MyA2NC41OTAyIDE0LjU4MjYgNjIuNzM3M1Y2Mi43Mjk3Wk02My41NjI1IDg1LjQzMjRDNTkuOTk3OCA5NS43MjE2IDUxLjQ2NjYgOTYuMDIyOSA1MC41MDM2IDk2LjAyMjlDNDguOTk0NCA5Ni4wMjI5IDQxLjI4MjUgOTUuNTE4MiAzNy42Mzg3IDg1LjU2MDVDMzUuNjk4MiA4MC4yNSAzNS4xMzA0IDczLjU2ODkgMzYuMDU3NiA2Ny42MjU4QzQ1LjU4NzcgNjQuOTM2OCA1My4yMjAyIDYwLjMzNDUgNTguNzYxNiA1My45MTY4QzU4LjkwNTIgNTMuNzUxMSA1OS4wNDE4IDUzLjU3NzkgNTkuMTg1NSA1My40MTIxQzYxLjI2OTkgNTYuODAxOCA2Mi45MjI4IDYwLjY4ODQgNjQuMjMwOSA2NS4yMjI5QzY2LjAwNjEgNzEuMzkxOSA2NS43NDc0IDc5LjEzNTMgNjMuNTY5NyA4NS40MjQ4TDYzLjU2MjUgODUuNDMyNFpNODYuMjk1MyA2Mi45MjU2QzgwLjk0MDggNjQuNzQwOCA3My45ODM3IDY1LjA1NzMgNjcuOTk3IDYzLjgyMTlDNjYuNDMwMiA1OC40NzM5IDY0LjM4MTggNTMuOTMxOSA2MS43NTE0IDUwQzY0LjQxMDYgNDYuMDE1MyA2Ni40ODc3IDQxLjM5ODEgNjguMDQ3MiAzNi4wMTI0Qzc0LjM0MzEgMzQuOTUwMyA4MS4yMjExIDM1LjQwMjMgODYuNDMxNyAzNy4yNzAzQzk2LjQ4NjQgNDAuODc4MiA5Ni45OTY4IDQ4LjUwODUgOTYuOTk2OCA1MC4wMDc2Qzk2Ljk5NjggNTAuOTU2NiA5Ni42OTQ5IDU5LjQwNzkgODYuMzAyNCA2Mi45MzMxTDg2LjI5NTMgNjIuOTI1NloiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30% auto;
  }

  .news-card__image img {
    width: 100%;
    aspect-ratio: 384 / 214;
    height: auto;
    object-fit: cover;
  }

  /* メタ行: カテゴリ + 区切り + 日付 */
  .news-card__meta {
    order: 1;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* brand: カテゴリ文字色（corporate の deep-green → main） */
  .news-card__category {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-main);
  }

  .news-card__category+.news-card__date::before {
    content: "";
    display: inline-block;
    width: 0.25rem;
    height: 0.0625rem;
    margin-inline-end: 8px;
    margin-block-end: 3px;
    vertical-align: middle;
    background-color: var(--color-gray-500);
  }

  /* brand: 日付文字色 */
  .news-card__date {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-gray-500);
  }

  /* タグ行（brand の .tag コンポーネントを利用） */
  .news-card__tags {
    order: 2;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* brand: タイトル文字色 */
  .news-card__title {
    order: 3;
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.04375rem;
    color: var(--color-gray-800);
  }

  .news-card__title::before {
    content: none;
  }

  /* brand: タグ内の .tag を brand カラーに（border/primary/pale） */
  .news-card__tags .tag {
    border-color: var(--color-main);
    color: var(--color-main);
  }

  .news-card__tags .tag[data-style="primary"] {
    background-color: var(--color-main);
    color: var(--color-white);
    border-color: var(--color-main);
  }

  .news-card__tags .tag[data-style="pale"] {
    background-color: var(--color-white);
    border-color: var(--color-main);
    color: var(--color-main);
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .news-card__meta {
      order: unset;
      margin-top: 16px;
    }

    .news-card__tags {
      order: unset;
      gap: 8px;
    }

    .news-card__title {
      order: unset;
      margin-top: 4px;
      font-size: 1rem;
      letter-spacing: 0.05rem;
    }
  }
}

/* ==========================================================================
   components/visit-info.css — 見学・体験の情報セクション（汎用）
   ==========================================================================
   責務:
   - 見学・体験に関する有益な情報を表示する汎用ブロック
   - entry-visit-guide（入会/見学の選択）とは別：こちらは情報量の多い詳細ブロック
   - タイトル、リード、キー・値リスト、オプションの CTA で構成
   ========================================================================== */

.visit-info {
  margin-inline: auto;
  padding-block: 20px 30px;
  padding-inline: 20px;
  background-color: var(--color-main-light);

  .wys-list {
    margin-top: 0;
  }

  .wys-button {
    margin-top: 0;
  }

  .visit-info__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .visit-info__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03rem;
    color: var(--color-main);
    text-align: center;
  }

  .visit-info__title:before {
    content: none;
  }

  .visit-info__lead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
    text-align: center;
  }

  .visit-info__list {
    display: table;
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
  }

  .visit-info__item {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .visit-info__item+.visit-info__item {
    border-top: none;
  }

  .visit-info__term {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    padding-block: 14px;
    padding-inline-end: 26px;
    margin: 0;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  .visit-info__desc {
    display: table-cell;
    padding-block: 14px;
    padding-inline: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  .visit-info__note {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.846;
    letter-spacing: 0.01625rem;
    color: var(--color-black);
    text-align: left;
    max-width: 100%;
  }

  /* 体験受付時間など、td 内のネストテーブル */
  .visit-info__schedule {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding-block: 4px;
      padding-inline: 0;
      margin: 0;
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.75;
      letter-spacing: 0.02rem;
      color: var(--color-black);
      vertical-align: top;
    }

    th {
      text-align: left;
      font-weight: 600;
      padding-inline-end: 12px;
      white-space: nowrap;
    }
  }

  html[data-viewport="desktop"] & {
    margin-block-start: 60px;

    .visit-info__title {
      font-size: 2rem;
      line-height: 1.5;
      letter-spacing: 0.04rem;
    }
  }
}

/* ==========================================================================
   components/entry-guide.css — 入会案内セクション（汎用）
   ==========================================================================
   責務:
   - 入会のご案内へ誘導する汎用ブロック
   - タイトル、リード文、リンクで構成
   - entry-visit-guide（入会/見学の選択CTA）とは別
   ========================================================================== */

.entry-guide {
  margin-top: 80px;
  text-align: center;


  .entry-guide__lead {
    margin-top: 40px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-black);
  }

  .text-link {
    margin-top: 12px;
  }

  html[data-viewport="desktop"] & {
    margin-top: 100px;

    .entry-guide__lead {
      margin-top: 60px;
    }
  }
}

/* ==========================================================================
   components/faq.css — FAQ アコーディオンブロック（汎用コンポーネント）
   ========================================================================== */

.faq {
  margin-left: auto;
  margin-right: 0;
  background-color: var(--color-main-light);
  padding: 60px;

  .faq__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .faq__item+.faq__item {
    margin-top: 40px;
  }

  .faq__question {
    margin: 0;
    font-size: 1rem;
  }

  .faq__trigger {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    align-items: center;
    text-align: left;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }

  .faq__question-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
  }

  .faq__chevron {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.5rem;
    display: block;
    margin-left: 30px;
    transition: transform 0.2s ease;
  }

  .faq__item[data-expanded="true"] .faq__chevron {
    transform: rotate(180deg);
  }

  .faq__answer {
    margin: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s;
  }

  .faq__item[data-expanded="true"] .faq__answer {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
  }

  .faq__answer-inner {
    margin: 0;
    /* Q 行との上下余白は上 10px 程度、左右は質問行と揃える */
    padding: 10px 60px 0 6px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.5;
  }

  .faq__answer-inner::before {
    content: "";
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    background-color: var(--color-main);
  }

  .faq__answer-inner p {
    margin: 0;
    flex: 1 0 0;
  }

  .faq__q {
    font-family: var(--font-roboto);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--color-main);
    margin-right: 20px;
  }

  html[data-viewport="mobile"] & {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;

    .faq__item+.faq__item {
      margin-top: 28px;
    }
  }
}