/* Pricing page — page-specific styles */

/* 明バンドをビューポート全幅にbleedさせるため、はみ出し分の横スクロールを抑止。
   overflow-x: clip は overflow: hidden と違いスクロールコンテナを作らないので、
   .pricing-tabs の position:sticky や全ページ共通の fixed 要素を壊さない。 */
body.page-pricing { background: var(--color-black); overflow-x: clip; }

.pricing-hero { text-align: center; padding: 64px 24px 48px; border-bottom: 1px solid var(--color-border); }
.pricing-hero__eyebrow { font-family: var(--font-display); font-size: 0.8rem; font-style: italic; letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 16px; }
.pricing-hero__title { font-size: 1.8rem; font-weight: 500; letter-spacing: 0.18em; line-height: 1.5; margin-bottom: 16px; }
.pricing-hero__divider { width: 48px; height: 2px; background: var(--color-gold); margin: 0 auto 28px; }
.pricing-hero__lead { font-size: 0.9rem; color: var(--color-text-cream); line-height: 2.2; font-weight: 400; max-width: 440px; margin: 0 auto; }
.pricing-hero__lead .accent { color: var(--color-gold-light); font-weight: 500; }
.pricing-hero__status { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding: 12px 28px; background: rgba(201,169,110,0.06); border-radius: 40px; border: 1px solid var(--color-border-gold); }
.pricing-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); display: inline-block; animation: grow-pulse 2s infinite; }
.pricing-hero__status span:last-child { font-size: 0.72rem; color: var(--color-gold-light); letter-spacing: 0.12em; }

/* タブはページ最上部(top:0)に貼り付け、透明化するヘッダー帯の隙間を塞ぐ。
   共通ヘッダー(z-index:320)はタブ(z-index:40)より上に残るので、スクロール時も
   ハンバーガーはタブの上に表示・タップできる。右端のタブがハンバーガーに潜らない
   よう、右側にクリアランス(56px)を確保する。 */
.pricing-tabs { position: sticky; top: 0; z-index: 40; background: rgba(10,10,10,0.92); backdrop-filter: blur(24px); border-bottom: 1px solid var(--color-border); }
.pricing-tabs__inner { display: flex; overflow-x: auto; margin: 0 auto; max-width: var(--container-width); padding: 0 12px; }
/* スマホでは狭幅のためタブバー全体が透明化ヘッダー(64px, z-index:320)の真下に入り、
   タップ／横スクロールがヘッダーに奪われて操作不能＋右端ラベルが切れる。
   ヘッダーが透明化(is-compact)している間だけイベントを透過させ、ハンバーガーだけ
   有効に戻すことで、タブ操作とハンバーガー操作を両立させる。 */
body.page-pricing .site-header--full.is-compact { pointer-events: none; }
body.page-pricing .site-header--full.is-compact .hamburger { pointer-events: auto; }
/* ハンバーガーが被る幅（<1024px）では、タブのスクロール領域の右端を
   ハンバーガー手前で止め、ラベルがアイコンで分断されないようにする。
   帯の背景は全幅のまま（padding内も塗られる）なので、アイコンは帯の上に乗る。
   さらに「横スライドできる」ことを示す右端フェード＋軽く動く矢印を表示（スマホのみ）。
   末端までスクロールしたら is-scroll-end で消える（判定は system.js）。 */
@media (max-width: 1023px) {
  .pricing-tabs { padding-right: 52px; }
  .pricing-tabs__inner { padding-right: 8px; }
  /* 右端のフェード：まだ続きがあることを示す */
  .pricing-tabs::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 52px;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.92) 72%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
  }
  /* スワイプを促す矢印：右へ軽くパルスする */
  .pricing-tabs::before {
    content: "›";
    position: absolute;
    right: 58px; top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold);
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;
    animation: tab-swipe-hint 1.4s ease-in-out infinite;
  }
  .pricing-tabs.is-scrollable:not(.is-scroll-end)::after,
  .pricing-tabs.is-scrollable:not(.is-scroll-end)::before { opacity: 1; }
}
@keyframes tab-swipe-hint {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(4px); }
}
.price-tab { flex-shrink: 0; padding: 14px 18px; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--color-text-cream); border-bottom: 2px solid transparent; font-weight: 400; background: transparent; transition: all 0.2s ease; }
.price-tab.is-active { color: var(--color-gold); border-bottom-color: var(--color-gold); font-weight: 500; }

.pricing-content { max-width: var(--container-width); margin: 0 auto; padding: 0 20px 160px; }
/* 送り先の上端はスティッキーなタブバー(top:0, 実高さ約52px)の直下に収める。
   バー高さよりわずかに小さくして境目をバー裏へ数px潜り込ませ、
   明↔暗の切替え線とバー下端の間に隙間が出ないようにする。 */
.pricing-section { padding-top: 48px; scroll-margin-top: 48px; }
.pricing-section + .pricing-section { padding-top: 56px; }
.pricing-section__head { text-align: center; margin-bottom: 40px; }
.pricing-section__dash { font-size: 0.68rem; color: var(--color-light-text-muted); letter-spacing: 0.08em; margin-bottom: 4px; }
.pricing-section__title { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 6px; }
.pricing-section__sub { font-family: var(--font-display); font-size: 0.85rem; font-style: italic; color: var(--color-text-muted); letter-spacing: 0.15em; }

/* Simulator */
.simulator-card { background: var(--color-card); border-radius: 20px; padding: 32px 24px; border: 1px solid var(--color-border); }
.simulator-group { margin-bottom: 24px; }
.simulator-group:last-of-type { margin-bottom: 32px; }
.simulator-group__label { font-size: 0.76rem; color: var(--color-text-cream); letter-spacing: 0.08em; margin-bottom: 10px; }
.simulator-group__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.simulator-total { border-top: 1px solid var(--color-border); padding-top: 24px; }
.simulator-total__row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.simulator-total__label { font-size: 0.8rem; color: var(--color-text-cream); letter-spacing: 0.06em; }
.simulator-total__amount { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--color-gold); letter-spacing: 0.04em; }
.simulator-total__note { display: block; font-size: 0.6rem; color: var(--color-light-text-muted); margin-top: 2px; }
.simulator-breakdown { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 14px 16px; }
.simulator-breakdown__label { font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 8px; letter-spacing: 0.06em; }
.simulator-breakdown__rows { display: flex; flex-direction: column; gap: 6px; }
.simulator-breakdown__row { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--color-text-cream); }
.simulator-breakdown__row span:last-child { color: var(--color-gold-light); }

/* Course cards */
.course-intro { text-align: center; margin-bottom: 32px; }
.course-intro p { font-size: 0.85rem; color: var(--color-text-cream); line-height: 2; font-weight: 400; margin-bottom: 8px; }
.course-intro .accent { color: var(--color-gold); font-weight: 400; }
.course-list { display: flex; flex-direction: column; gap: 16px; }
.course-card { position: relative; overflow: hidden; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 22px 20px; transition: transform 0.3s ease; }
.course-card:hover { transform: translateY(-2px); }
.course-card--recommended { background: rgba(201,169,110,0.08); border: 2px solid var(--color-gold); padding: 28px 24px; }
.course-card__ribbon { display: inline-block; background: var(--color-gold); color: #0a0a0a; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; padding: 4px 16px; border-radius: var(--radius-pill); margin-bottom: 14px; }
.course-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.course-card__left { display: flex; align-items: center; gap: 12px; }
.course-card__time { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--color-text-white); }
.course-card--recommended .course-card__time { font-size: 1.5rem; }
.course-card__price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--color-gold-light); letter-spacing: 0.02em; }
.course-card--recommended .course-card__price { font-size: 2.3rem; color: var(--color-gold); }
.course-card__note { font-size: 0.74rem; color: var(--color-text-cream); line-height: 1.75; margin-bottom: 12px; }
/* コース予約ボタン：全幅の巨大ボタンをやめ、押しやすいコンパクトなピル形に */
.course-card__btn { display: flex; width: fit-content; margin: 6px auto 0; padding: 11px 34px; font-size: 0.78rem; border-radius: var(--radius-pill); }
.course-note-block { background: var(--color-card-alt); border-radius: 14px; padding: 22px 20px; margin-top: 24px; border: 1px solid var(--color-border); }
.course-note-block__lead { font-size: 0.78rem; color: var(--color-gold-light); font-weight: 400; margin-bottom: 10px; }
.course-note-block__box { background: rgba(201,169,110,0.06); border-radius: 10px; padding: 12px 16px; border: 1px solid var(--color-border-gold); }
.course-note-block__box p { font-size: 0.74rem; color: var(--color-gold-light); line-height: 2; }
.threep-intro { text-align: center; margin-bottom: 32px; max-width: 420px; margin-left: auto; margin-right: auto; }
.threep-intro p { font-size: 0.85rem; color: var(--color-text-cream); line-height: 2.2; font-weight: 400; }
.threep-note-block { background: var(--color-card-alt); border-radius: 14px; padding: 18px 20px; margin-top: 24px; border: 1px solid var(--color-border); }
.threep-note-block p { font-size: 0.74rem; color: var(--color-text-cream); line-height: 2; }

/* Options */
.option-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.option-heading__bar { width: 3px; height: 20px; background: var(--color-gold); border-radius: 2px; }
.option-heading__title { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.08em; }
.option-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.option-card { background: var(--color-card); border-radius: 14px; padding: 20px; border: 1px solid var(--color-border); }
.option-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.option-card__left { display: flex; align-items: center; gap: 8px; }
.option-card__num { font-size: 0.6rem; color: var(--color-gold); font-weight: 600; width: 20px; height: 20px; border-radius: 50%; background: rgba(201,169,110,0.12); display: inline-flex; align-items: center; justify-content: center; }
.option-card__name { font-size: 0.9rem; font-weight: 500; color: var(--color-text-white); }
.option-card__price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-gold-light); }
.option-card__desc { font-size: 0.75rem; color: var(--color-text-cream); line-height: 1.85; padding-left: 28px; }
.option-card__note { font-size: 0.66rem; color: var(--color-text-muted); padding-left: 28px; margin-top: 4px; }

.coming-soon { background: var(--color-card-alt); border-radius: 14px; padding: 20px; border: 1px dashed var(--color-border); margin-bottom: 32px; text-align: center; }
.coming-soon__title { font-size: 0.9rem; color: var(--color-text-white); margin-top: 10px; font-weight: 500; }
.coming-soon__desc { font-size: 0.74rem; color: var(--color-text-cream); margin-top: 4px; line-height: 1.8; }

.free-service-list { display: flex; flex-direction: column; gap: 12px; }
.free-service-card { background: rgba(201,169,110,0.04); border-radius: 14px; padding: 18px 20px; border: 1px solid var(--color-border-gold); }
.free-service-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.free-service-card__num { font-size: 0.6rem; color: var(--color-gold-deep); font-weight: 600; font-family: var(--font-display); }
.free-service-card__name { font-size: 0.9rem; font-weight: 500; color: var(--color-text-white); }
.free-service-card__desc { font-size: 0.75rem; color: var(--color-text-cream); line-height: 1.85; padding-left: 28px; }

/* Other fees */
.fee-block { margin-bottom: 32px; }
.fee-block__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fee-block__bar { width: 3px; height: 20px; background: var(--color-gold); border-radius: 2px; }
.fee-block__title { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.08em; }
.fee-table { border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border); }
.fee-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--color-card); border-bottom: 1px solid var(--color-border); }
.fee-row:last-child { border-bottom: none; }
.fee-row__label { font-size: 0.86rem; font-weight: 500; color: var(--color-text-white); display: block; }
.fee-row__sub { font-size: 0.68rem; color: var(--color-text-cream); display: block; margin-top: 3px; line-height: 1.6; }
.fee-row__price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--color-gold-light); }
.fee-row__unit { font-size: 0.58rem; color: var(--color-light-text-muted); margin-left: 4px; }
.fee-block__note { font-size: 0.7rem; color: var(--color-text-cream); line-height: 1.85; margin-top: 8px; padding-left: 8px; }

.guarantee-block { margin-top: 48px; background: rgba(201,169,110,0.05); border-radius: 18px; padding: 32px 24px; border: 1px solid var(--color-border-gold); }
.guarantee-block__line { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); margin-bottom: 24px; }
.guarantee-block__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.guarantee-block__title { font-size: 0.98rem; font-weight: 500; color: var(--color-gold-light); letter-spacing: 0.1em; }
.guarantee-block p { font-size: 0.8rem; color: var(--color-text-cream); line-height: 2.2; font-weight: 400; }
.guarantee-block p + p { margin-top: 10px; }

.pricing-final-cta { text-align: center; margin-top: 56px; }
.pricing-final-cta__eyebrow { font-family: var(--font-display); font-size: 0.85rem; font-style: italic; color: var(--color-light-text-muted); letter-spacing: 0.2em; margin-bottom: 8px; }
.pricing-final-cta__lead { font-size: 0.9rem; color: var(--color-text-cream); line-height: 2; font-weight: 400; margin-bottom: 28px; }
.pricing-final-cta__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ===== セクション明暗の交互配置 ===== */
/* 暗い基調（黒）の中に明るいベージュのセクションを差し込み、区切りを明確にする。
   バンドはビューポート全幅にbleed（PCでも左右が黒で途切れない）。内側コンテンツは
   従来どおりカラム幅(--container-width)に揃うよう左右パディングで再インセットする。
   横スクロールは body.page-pricing の overflow-x: clip で抑止。
   暗いカード類（simulator-card / course-card / fee-table 等）はベージュ上でも
   そのまま可読なので、上書きはバンドに直接乗る見出し・本文だけに限定する。 */
.pricing-section--light {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 56px;
  padding-bottom: 56px;
  padding-left: max(20px, calc(50vw - var(--container-width) / 2 + 20px));
  padding-right: max(20px, calc(50vw - var(--container-width) / 2 + 20px));
  background: linear-gradient(180deg, var(--color-light-bg) 0%, #efe8dc 100%);
}
.pricing-section--light .pricing-section__dash { color: var(--color-light-text-muted); }
.pricing-section--light .pricing-section__title { color: var(--color-light-text); }
.pricing-section--light .pricing-section__sub { color: var(--color-light-text-muted); }
.pricing-section--light .threep-intro p { color: var(--color-light-text); font-weight: 400; }
.pricing-section--light .threep-intro .accent { color: var(--color-gold-dark); }
.pricing-section--light .fee-block__title { color: var(--color-light-text); }
.pricing-section--light .fee-block__note { color: var(--color-light-text-muted); }
/* おすすめカードは半透明ゴールド背景だとベージュ上で透けて内容が見えないため、
   明バンド上では他カードと同じ暗背景に（ゴールド枠・リボンで差別化は維持）。 */
.pricing-section--light .course-card--recommended { background: var(--color-card); }
/* 明バンド直前の暗セクションは、末尾要素の枠線が背景の切替え目に埋もれないよう
   黒地の下余白を確保する。 */
.pricing-section:has(+ .pricing-section--light) { padding-bottom: 40px; }