@charset "utf-8";
/* ============================================================
   Weppy.Co — seminar.css
   /seminar/ 専用。style.css の @layer に相乗りする（順序を壊さない）。

   設計の前提（2026-09-16 決定）
     ・時計（THE SKY DIAL）は置かない。トップ専用の武器として温存する。
     ・代わりに「DEPTH GAUGE」を右レールに置く。測るのは時間ではなく
       「どこまで作り込むか」。停留所が LEVEL 01 / 02 / 03 に対応する。
     ・全編を朝側（紙の面）で通す。申込を判断するページなので可読性が最優先。
   ============================================================ */

@layer base {
  /* トップは夜から始まるので html の地が黒。ここは最初から紙。 */
  html { background: var(--paper); }
  .sem { background: var(--bg); color: var(--fg); }
  /* 右レールは時計ではなくゲージが使う。幅はトップと揃える（版面を共通にする） */
  @media (min-width: 1100px) and (max-width: 1279px) { :root { --rail-clock: 140px; } }
  @media (min-width: 1280px) { :root { --rail-clock: 180px; } }
}

@layer component {

  /* ---------- DEPTH GAUGE ---------------------------------- */
  .gauge {
    position: fixed; z-index: 30;
    right: max(16px, calc(var(--gutter) - 4px)); top: 50%;
    /* 最長ラベル分の幅は確保する。中身は右（外側）に寄せ、軸は LEVEL 01 の位置のまま。
       中央寄せだと軸が内側へ寄って見える。 */
    width: 80px;
    /* --park はJSが入れる「CTAの手前で止めるための持ち上げ量」。
       オレンジの面に計器が乗ると、紙の上の計器という前提が崩れる。 */
    transform: translateY(calc(-50% - var(--park, 0px)));
    display: none; flex-direction: column; align-items: flex-end; gap: 12px;
    pointer-events: none;
  }
  @media (min-width: 1100px) { .gauge { display: flex; } }

  .gauge__cap {
    font-size: 9.5px; letter-spacing: .26em; color: var(--fg-dim);
  }
  .gauge__shaft { position: relative; width: 46px; height: 268px; }
  .gauge__track {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
    background: var(--rule-strong);
  }
  /* 深さは「下へ伸びる」。時間が進むのではなく、掘り下がる */
  .gauge__fill {
    position: absolute; left: 50%; top: 0; width: 3px; margin-left: -1.5px;
    height: var(--p, 0%);
    background: linear-gradient(180deg, var(--orange-300), var(--orange-700));
    border-radius: 2px;
    transition: height 180ms linear;
  }
  .gauge__stop {
    position: absolute; left: 0; right: 0; top: var(--at);
    display: flex; align-items: center; justify-content: center; gap: 0;
    transform: translateY(-50%);
  }
  .gauge__stop i {
    position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-dot);
    transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out),
                transform var(--dur-3) var(--ease-out);
  }
  .gauge__stop b {
    position: absolute; right: calc(50% + 12px);
    font-size: 10.5px; letter-spacing: .1em; color: var(--fg-dim);
    transition: color var(--dur-3) var(--ease-out);
  }
  .gauge__stop.is-on i { background: var(--orange-700); border-color: var(--orange-700); transform: scale(1.5); }
  .gauge__stop.is-on b { color: var(--orange-700); font-weight: 700; }
  .gauge__now {
    font-family: var(--head-font); font-weight: 700; font-size: 12.5px; line-height: 1.7;
    text-align: right; color: var(--fg-muted);
    width: 80px; height: calc(1.7em * 2);
    transition: opacity var(--dur-3) var(--ease-out);
  }
  .gauge.is-quiet .gauge__now { opacity: 0; }
  /* 実例の外では計器ごと引く。用のないときに主張させない */
  .gauge { transition: opacity var(--dur-4) var(--ease-out); }
  .gauge.is-quiet { opacity: .42; }

  /* 見出しブロックの中に本文が入るとき、罫のすぐ下に密着していた。
     style.css の .hd は「英字 → 見出し → 罫」までしか間隔を持っていない。
     見出しと本文は別の役割なので、ひと呼吸ぶん空ける。 */
  .sem .hd > .body { margin-top: clamp(20px, 2.2vw, 30px); }
  /* 見出しブロックの「次に来るもの」は、どのセクションでも 44px 空ける。
     s08 だけ本文が直接続いていて margin が 0 のまま、罫に密着していた。 */
  .sem .hd + .body { margin-top: var(--sp-7); }

  /* ---------- HERO ----------------------------------------- */
  .sec--semhero { padding-block: clamp(96px, 9vw, 150px) var(--section-py); }
  .semhero__hd { max-width: 54rem; }
  .semhero__h {
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.5; letter-spacing: .01em;
    color: var(--ink-800); margin-top: 12px; font-feature-settings: "palt" 1;
  }
  .semhero__h em { font-style: normal; color: var(--orange-700); }

  .semhero__grid { display: grid; gap: var(--block-gap); margin-top: var(--sp-7); }
  @media (min-width: 1000px) {
    /* 本文を19pxに上げたぶん、1行に必要な幅が増えた。左を広げないと
       「どんな／サイトにしたいのか。」で割れる（和文は35〜45字が読める行長） */
    .semhero__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.78fr); align-items: start; gap: clamp(28px,3vw,52px); }
  }
  /* ここは「読んで興味を持ってもらう」ための本文なので、--fs-body（15〜16px）では小さい。
     リード扱いに上げる。1文目だけさらに一段大きくして、入口を作る。 */
  .semhero__l .body {
    font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);   /* 17 → 19px */
    line-height: 2.0; color: #3E4854;
  }
  .semhero__l .body--em {
    font-size: clamp(1.1875rem, 1.9vw, 1.5rem);        /* 19 → 24px */
    line-height: 1.85; color: var(--ink-700); font-weight: 500;
  }
  .semhero__l .body + .body { margin-top: 20px; }
  .semhero__l .body b { color: var(--ink-800); font-weight: 700; }

  .facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--sp-6);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .facts li {
    flex: 1 1 0; min-width: 110px; padding: 15px 4px 16px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px;
    border-left: 1px solid var(--rule);
  }
  .facts li:first-child { border-left: 0; padding-left: 0; }
  .facts b { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1; color: var(--ink-800); }
  .facts span { font-size: 13px; color: var(--fg-muted); }
  .facts em { flex-basis: 100%; font-style: normal; font-size: 10.5px; letter-spacing: .1em;
    font-family: var(--font-mono); color: var(--fg-dim); margin-top: 6px; }

  .semhero__cta { margin-top: var(--sp-6); }
  .btn--sem { padding: 20px clamp(26px, 4vw, 48px); font-size: clamp(1rem, 1.7vw, 1.1875rem);
    background: var(--orange-700); color: #fff; box-shadow: var(--shadow-m); }
  .btn--sem:hover { background: var(--orange-800); }
  .btn--sem .cnr { border-color: rgba(255,255,255,.42); }
  .semhero__dates { margin-top: 13px; font-size: 11.5px; letter-spacing: .1em; color: var(--fg-dim); }

  /* 3枚を重ねて置く。ページが何の話かを、読む前に1秒で言う。

     ずらし量の決め方（2026-09-16 修正）
       絶対配置の top を % で書くと、基準は「親の幅」ではなく「親の高さ」になる。
       親の高さを padding-bottom:46%（＝幅の46%）で作っていたので、top:17% は
       実際には幅の 7.8% しか下がらず、カードの高さ（幅の約 61%）に対して
       1割ちょっと。背面の2枚がほぼ全部隠れていた。
       いまは親に aspect-ratio を持たせ、ずらし量を「親の高さに対する割合」で
       直接指定している。1枚あたり自身の高さの約 38% が見える。 */
  .stack { position: relative; aspect-ratio: 1 / .92; }
  .stack__i {
    position: absolute; left: 0; width: 70%;
    border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden;
    background: var(--paper-card); box-shadow: 0 6px 22px rgba(27,36,52,.11);
  }
  .stack__i img { display: block; width: 100%; height: auto; }
  .stack__i figcaption {
    position: absolute; left: 0; top: 0; padding: 4px 8px;
    font-size: 10px; letter-spacing: .12em; color: #fff; background: rgba(27,36,52,.62);
    border-bottom-right-radius: var(--radius-m);
  }
  .stack__i--1 { top:  0%;   left:  0%; z-index: 1; }
  .stack__i--2 { top: 21.5%; left: 13%; z-index: 2; }
  .stack__i--3 { top: 43%;   left: 26%; z-index: 3; border-color: var(--orange-300);
    box-shadow: 0 10px 30px rgba(168,58,5,.18); }
  .stack__i--3 figcaption { background: var(--orange-700); }
  /* 縦に細くなる幅では重ねを浅くして、背面をもう少し出す */
  @media (max-width: 640px) {
    .stack { aspect-ratio: 1 / .86; }
    .stack__i { width: 76%; }
    .stack__i--2 { top: 20%; left: 12%; }
    .stack__i--3 { top: 40%; left: 24%; }
  }

  /* ---------- LEVEL の3行 ---------------------------------- */
  .lv { display: grid; gap: clamp(22px, 2.6vw, 40px); margin-top: var(--block-gap);
    padding-top: var(--block-gap); border-top: 1px solid var(--rule); }
  #lv01 { border-top: 0; }
  @media (min-width: 900px) {
    .lv { grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); align-items: start; }
    .lv--rev .lv__shot { order: 2; }
  }
  .lv__shot { border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden;
    background: var(--paper-card); box-shadow: var(--shadow-s); }
  .lv__shot img { display: block; width: 100%; height: auto; }
  .lv--self .lv__shot { border: 1.5px solid var(--orange-500); box-shadow: var(--shadow-m); }
  .lv--self .work__bar { background: var(--orange-050); border-bottom-color: var(--orange-100); }
  .lv--self .work__bar i { background: var(--orange-200); }
  .lv--self .work__bar .mono { color: var(--orange-700); }

  /* このページの背骨は DEPTH。だから見出しはサイト名ではなく「どこまで作り込むか」。
     サイト名はその証拠なので、一段下げる。（2026-09-16 反転） */
  /* 深さは計器で言う。小さい点にすると飾りになって読まれないので、
     数字を見出し級まで上げ、3分割のバーを本文幅いっぱいに張る。（2026-09-16 再調整） */
  .lv__lv { display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 24px); }
  .lv__n { display: flex; flex-direction: column; gap: 4px; flex: none; }
  .lv__n i { font-style: normal; font-size: 9.5px; letter-spacing: .22em; color: var(--fg-dim); }
  .lv__n b { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 700; line-height: .82;
    letter-spacing: -.02em; color: var(--lvc, #8C7F70); }
  .lv__bar { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 5px; margin-bottom: 7px; }
  .lv__bar i { display: block; height: 11px; border-radius: 1px;
    background: var(--rule-warm); box-shadow: inset 0 0 0 1px var(--rule-dot); }
  .lv__of { flex: none; margin-bottom: 7px; font-size: 11px; letter-spacing: .1em; color: var(--fg-dim); }

  #lv01 { --lvc: #8C7F70; }
  #lv02 { --lvc: #5F5446; }
  #lv03 { --lvc: var(--orange-700); }
  #lv01 .lv__bar i:nth-child(-n+1),
  #lv02 .lv__bar i:nth-child(-n+2),
  #lv03 .lv__bar i:nth-child(-n+3) { background: var(--lvc); box-shadow: none; }
  #lv03 .lv__of { color: var(--orange-700); font-weight: 700; }

  .lv__depth {
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.375rem); line-height: 1.38; letter-spacing: .01em;
    color: var(--ink-800); font-feature-settings: "palt" 1;
    /* 52px の見出しに 12/16px の余白では窮屈だった。前後を見出しの大きさに合わせる
       （上は計器との縁を残して短め、下はひと呼吸ぶん長く取る）。 */
    margin-top: clamp(14px, 1.5vw, 20px);
  }
  #lv03 .lv__depth { color: var(--orange-700); }

  /* サイト名。見出しではなく「その証拠」の位置に置く */
  .lv__site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    margin-top: clamp(26px, 2.9vw, 40px); padding-top: clamp(16px, 1.8vw, 22px);
    border-top: 1px solid var(--rule); }
  .lv__site .mono { font-size: 9.5px; letter-spacing: .18em; color: var(--fg-dim); }
  .lv__site strong { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); font-weight: 700; color: var(--ink-800); }
  .lv__site em { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--fg-muted); }

  .lv__txt .body { margin-top: clamp(18px, 1.8vw, 24px); }
  /* サイトへのリンクは主役ではない。ボタンで置くと「次にここを押せ」に見えて、
     ページの導線（＝申し込み）と競合する。サイト名の隣に小さく添える。 */
  .lv__link { display: inline-flex; align-items: baseline; gap: 4px;
    font-size: 12px; letter-spacing: .04em; color: var(--fg-dim);
    border-bottom: 1px solid var(--rule-dot); padding-bottom: 1px;
    transition: color var(--dur-1), border-color var(--dur-1); }
  .lv__link span { font-size: 10px; }
  .lv__link:hover { color: var(--orange-700); border-color: var(--orange-700); }
  #lv03 .lv__link:hover { color: var(--orange-800); }

  /* 裏側。セミナーが売っているのは完成物ではなくここなので、先に読ませる */
  .behind { margin-top: clamp(22px, 2.2vw, 30px); border-top: 1px solid var(--rule); }
  .behind > div { display: grid; grid-template-columns: 82px 1fr; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .behind dt { font-size: 9.5px; letter-spacing: .16em; color: var(--fg-dim); padding-top: .25em; }
  .behind dd { font-size: 14.5px; line-height: 1.7; color: var(--ink-800); font-weight: 500; }
  #lv03 .behind dd { color: var(--ink-800); }
  .lv .tags { margin-top: 16px; }
  #lv03 .tags i, #lv03 .tags li { border-color: var(--orange-100); background: #FFFAF5; color: var(--orange-700); }
  .tags li { font-style: normal; font-size: 10px; letter-spacing: .06em;
    border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 9px; color: var(--fg-muted); }

  /* ---------- 02 違い --------------------------------------- */
  .ladder { display: grid; gap: 0; margin-top: var(--sp-7); max-width: 40rem; margin-inline: auto;
    border-top: 1px solid var(--rule); }
  .ladder li { display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 30px);
    padding: 17px 0 17px var(--step, 0px); border-bottom: 1px solid var(--rule);
    transition: padding var(--dur-4) var(--ease-out); }
  .ladder li:nth-child(2) { --step: clamp(14px, 3vw, 40px); }
  .ladder li:nth-child(3) { --step: clamp(28px, 6vw, 80px); }
  .ladder b { font-size: 12px; letter-spacing: .14em; color: var(--fg-dim); }
  .ladder li:nth-child(3) b { color: var(--orange-700); }
  .ladder span { font-size: clamp(1rem, 1.9vw, 1.25rem); font-weight: 700; color: var(--ink-800); }

  .whos { display: grid; gap: 0; margin-top: var(--sp-6); max-width: 40rem; margin-inline: auto; }
  .whos li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0;
    border-bottom: 1px dashed var(--rule-strong); }
  .whos li:last-child { border-bottom: 0; }
  .whos span { font-size: 10px; letter-spacing: .14em; color: var(--fg-dim); }
  .whos p { font-size: var(--fs-lead); color: var(--fg); }

  /* ---------- 03 対話 --------------------------------------- */
  /* 46rem だと「ならない。」が3行目に1語だけ残る。この見出しだけ版面を広げる */
  .sec--gap .hd { max-width: 60rem; }
  /* 「AIは、すごい。」と「でも、…あなた。」は対の主張。同じ級数で左右に置き、
     あいだに罫を1本通す。片方を本文、片方を引用ブロックで組むと対に見えない。 */
  .gap__pair { display: grid; gap: clamp(26px, 3vw, 44px); margin-top: var(--sp-7); }
  @media (min-width: 900px) {
    .gap__pair { grid-template-columns: 1fr 1fr; gap: clamp(34px, 4vw, 66px); }
    .gap__side--you { position: relative; }
    .gap__side--you::before { content: ""; position: absolute;
      left: calc(-1 * clamp(17px, 2vw, 33px)); top: 4px; bottom: 4px; width: 1px;
      background: var(--rule-strong); }
  }
  .gap__side .en { display: block; }
  .gap__h {
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.5; letter-spacing: .01em;
    color: var(--ink-800); margin-top: 14px; font-feature-settings: "palt" 1;
  }
  /* トップのファーストビューと同じ「でも、」。ページをまたいで同じ色で言う */
  .gap__h--but em { font-style: normal; color: var(--orange-700); }
  /* 左右で列の組み方を揃える（左をチップ、右を罫の一覧にすると対に見えない）。
     半分幅の中でさらに2段組にすると1行が短くなりすぎるので、どちらも1列で通す。 */
  .gap__side .qs { margin-top: 22px; display: flex; flex-direction: column; }

  .gap__loop { margin-top: var(--sp-8); padding-top: var(--sp-6);
    border-top: 1px solid var(--rule); max-width: 44rem; }
  .gap__loop .en { display: block; margin-bottom: 12px; }

  .loop { display: grid; gap: 0; margin-top: 18px; border-left: 2px solid var(--rule-strong); }
  .loop li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0 13px 18px; position: relative; }
  .loop li::before { content: ""; position: absolute; left: -5px; top: 1.15em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--rule-dot); }
  .loop span { font-size: 9.5px; letter-spacing: .14em; color: var(--fg-dim); }
  .loop p { font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); font-weight: 700; color: var(--ink-800); }
  .loop__ok::before { background: var(--orange-600) !important; }
  .loop__ok p { color: var(--orange-700); }
  .loop__end { margin-top: 18px; font-size: var(--fs-lead); color: var(--fg-muted); }
  .loop__end b { color: var(--ink-800); }

  /* ---------- 04 内容 --------------------------------------- */
  /* 9項目なので 3×3 に割る。auto-fit だと最終行に空きセルが出て、罫が途中で切れる */
  .allof { display: grid; grid-template-columns: repeat(1, 1fr);
    gap: 0; margin-top: var(--sp-7); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
  .allof li { display: flex; align-items: baseline; gap: 12px; padding: 18px 16px;
    border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    font-size: clamp(.9375rem, 1.6vw, 1.0625rem); font-weight: 700; color: var(--ink-800); }
  @media (min-width: 560px) { .allof { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .allof { grid-template-columns: repeat(3, 1fr); } }
  .allof b { font-size: 10px; letter-spacing: .12em; color: var(--fg-dim); font-weight: 400; }
  .sec--what .body--center { margin-top: var(--sp-6); }

  /* ---------- 05 環境 --------------------------------------- */
  /* 見出しが2文になったので、46rem だと各文が途中で折れる。1文＝1行に収める */
  .sec--cost .hd { max-width: 62rem; }
  .sec--cost .hd h2 { line-height: 1.5; }
  .myths { display: grid; gap: 9px; margin-top: var(--sp-7); }
  .myths li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lead);
    color: var(--fg-dim); text-decoration: line-through; text-decoration-color: var(--rule-dot); }
  .myths__x { position: relative; flex: none; width: 15px; height: 15px; }
  .myths__x::before, .myths__x::after { content: ""; position: absolute; left: 0; top: 7px;
    width: 15px; height: 1.5px; background: var(--rule-dot); }
  .myths__x::before { transform: rotate(45deg); }
  .myths__x::after  { transform: rotate(-45deg); }
  .sec--cost .body { margin-top: var(--sp-6); }

  .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .tools li { font-size: 12.5px; letter-spacing: .04em; font-weight: 700; color: var(--orange-800);
    background: var(--orange-050); border: 1px solid var(--orange-100);
    border-radius: var(--radius-s); padding: 8px 14px; }

  .spec { margin-top: var(--sp-7); border-top: 1px solid var(--rule); max-width: 46rem; }
  .spec > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px;
    align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .spec dt { font-size: var(--fs-lead); color: var(--fg-muted); }
  .spec dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 8px; }
  .spec b { font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 700; line-height: 1; color: var(--ink-800); }
  .spec span { font-size: var(--fs-lead); color: var(--fg-muted); }
  .spec em { flex-basis: 100%; text-align: right; font-style: normal; font-size: 12px;
    color: var(--fg-dim); margin-top: 6px; }
  .sec--cost .pull { margin-top: var(--sp-7); }

  /* ---------- 06 対象 --------------------------------------- */
  .fors { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--grid-gap); margin-top: var(--sp-7); }
  .fors li { position: relative; padding: 20px 20px 20px 46px;
    border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--paper-card);
    font-size: clamp(.9375rem, 1.6vw, 1.0625rem); font-weight: 500; line-height: 1.75; color: var(--ink-800); }
  .fors li::before { content: ""; position: absolute; left: 20px; top: 26px;
    width: 13px; height: 7px; border-left: 2px solid var(--orange-600); border-bottom: 2px solid var(--orange-600);
    transform: rotate(-45deg); }
  /* 6枚のどれかに自分を見つけた直後の一行。ここが「自分のことだ」と
     「申し込む」をつなぐ蝶番なので、本文サイズでは受け止めきれない。
     見出しと同じ級数まで上げ、着地の「ぜひ。」だけオレンジにする。 */
  .s06__close {
    margin-top: var(--sp-7); text-align: center;
    /* 見出しではなく、ひとこと。見出し（46px・太字・ゴシック）と本文（16px）の
       あいだに置く。太字にすると見出しに見えるので 500 で止める。 */
    font-family: var(--font-gothic); font-weight: 500;
    font-size: clamp(1.125rem, 1.9vw, 1.4375rem); line-height: 1.8; letter-spacing: .02em;
    color: var(--ink-700);
  }
  .s06__close em { font-style: normal; font-weight: 700; color: var(--orange-700); }
  .s06__close::before {
    content: ""; display: block; width: 40px; height: 1px;
    background: var(--rule-dot); margin: 0 auto var(--sp-6);
  }

  /* ---------- 07 進行 --------------------------------------- */
  .flow { margin-top: var(--sp-7); max-width: 48rem; border-top: 1px solid var(--rule); }
  .flow > li { display: grid; grid-template-columns: 92px 1fr; gap: clamp(16px,2.2vw,30px);
    padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .flow__t { font-size: 12px; color: var(--fg-dim); letter-spacing: .06em; }
  .flow__t b { font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--ink-800);
    margin-right: 4px; }
  .flow__b strong { display: block; font-size: clamp(1rem, 1.8vw, 1.1875rem); font-weight: 700; color: var(--ink-800); }
  /* 60分の行だけ地色を敷く。負のマージン＋パディングで外へはみ出させると、
     `.flow > li { padding: 20px 0 }`（詳細度が上）にパディングが負けて margin だけが効き、
     この行だけ左に 17.6px ずれていた。地色は擬似要素で敷いて、行の座標は動かさない。 */
  .flow--main { position: relative; z-index: 0; }
  .flow--main::before {
    content: ""; position: absolute; z-index: -1;
    left: calc(var(--gutter) * -.4); right: calc(var(--gutter) * -.4);
    top: 0; bottom: 0; background: var(--orange-050);
  }
  .flow--main .flow__t b { color: var(--orange-700); }
  .flow__sites { display: grid; gap: 7px; margin-top: 12px; }
  .flow__sites li { display: flex; align-items: baseline; gap: 11px; font-size: 14.5px; color: var(--fg-muted); }
  .flow__sites i { font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: var(--orange-700); }
  .flow__zoom { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
  .flow__zoom .mono { font-size: 9.5px; letter-spacing: .18em; color: var(--fg-dim);
    border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 8px; }

  .notice { margin-top: var(--sp-8); border: 1px solid var(--rule-strong); border-radius: var(--radius-m);
    padding: clamp(22px, 3vw, 34px); background: var(--paper-card); max-width: 48rem; }
  .notice__h { font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.125rem, 2.1vw, 1.5rem); line-height: 1.5; color: var(--ink-800); }
  /* 囲みの内側の幅（698px）より .body の max-width（42em＝665px）の方が狭く、
     枠の手前33pxで折り返していた。枠の中で折り返しが揃わないと不自然に見える。
     囲みの中では箱の幅が版面。 */
  .notice .body { margin-top: 14px; max-width: none; }

  /* ---------- 結び ------------------------------------------ */
  .sec--close2 { padding-block: var(--section-py-lg); }
  .sec--close2 .body--center + .body--center { margin-top: var(--stack-gap); }
  /* 66px の一文は、前後に同じだけの間を置いて初めて「置かれた」に見える。
     style.css の 30px のままだと上に詰まり、下は本文に margin がなくて 0 だった。 */
  .sec--close2 .stmt--after {
    text-align: center;
    margin-top: clamp(36px, 3.6vw, 56px);
  }
  .sem .stmt + .body { margin-top: clamp(36px, 3.6vw, 56px); }

  /* ---------- JOIN ------------------------------------------ */
  .sec--join {
    display: grid; place-items: center; text-align: center;
    padding-block: var(--section-py-lg);
    background: linear-gradient(168deg, var(--orange-700) 0%, var(--orange-800) 58%, var(--orange-900) 100%);
    color: #fff;
  }
  /* 予約ウィジェットのダイアログが切れないように、縦は隠さない */
  .sec--join { overflow-x: hidden; }
  .sec--join .wm--cta { color: rgba(255,255,255,.085); left: clamp(12px, 3vw, 54px);
    bottom: -26px; font-size: clamp(110px, 15vw, 210px); }
  .join__in { position: relative; z-index: 1; width: 100%; max-width: 58rem; }
  .join__en { color: rgba(255,255,255,.72); }
  .join__h { font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.625rem, 4vw, 3rem); line-height: 1.42; color: #fff; margin-top: 14px; }
  .join__sub { font-size: clamp(.9375rem, 1.7vw, 1.125rem); color: rgba(255,255,255,.88); margin-top: 14px; }
  .join__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    column-gap: 10px; margin-top: var(--sp-7); }
  .join__price span { font-size: clamp(.875rem, 1.6vw, 1.0625rem); color: rgba(255,255,255,.88); }
  .join__price b { font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 700; line-height: 1; color: #fff; }

  .dates { display: grid; gap: 10px; margin-top: var(--sp-7); }
  @media (min-width: 760px) { .dates { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
  .dates li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    column-gap: 12px; row-gap: 5px; padding: 18px 14px;
    border: 1px solid rgba(255,255,255,.32); border-radius: var(--radius-m);
    background: rgba(255,255,255,.07); }
  .dates__d { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 700; line-height: 1; color: #fff; }
  .dates__d i { font-style: normal; opacity: .5; margin-inline: 1px; }
  .dates__w { font-size: 10.5px; letter-spacing: .16em; color: rgba(255,255,255,.72); }
  .dates__t { flex-basis: 100%; font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.88); }

  .join__go { margin-top: var(--sp-7); text-align: left; }
  .join__go .amelia-v2-booking { width: 100%; }
  .join__note { margin-top: 16px; font-size: 10.5px; letter-spacing: .2em; color: rgba(255,255,255,.72); }

  /* ---------- 共通の小物 ------------------------------------- */
  /* .brsp は「ここで折る」の指定。見出しの折り位置は原稿の一部なので幅で消さない。
     ただし版面が狭いときは自然折り返しに任せる（二重に折れて1行1文節になるのを防ぐ）。 */
  @media (max-width: 420px) { .sem .brsp { display: none; } }
  /* 本文の折り位置は広い版面のための調整。狭い幅では自然折り返しに任せる
     （残すと「ちょっと違う。」のような1文節だけの行が並ぶ） */
  @media (max-width: 760px) { .sem .brpc { display: none; } }
  /* style.css の `.hdr { opacity: 0 }` はトップのシーン1でヘッダーを隠すための指定で、
     body.hero-open で戻る。このページには hero-open が付かないので、ヘッダーが
     永久に消えたままになっていた。ここで戻す。 */
  .sem .hdr { opacity: 1; }
  /* ヘッダーの面はトップでは main.js が data-on を切り替えている。ここは全編が朝なので
     マークアップ側で morning に固定する（JSに依存させない）。 */
  .sem .hdr__sep { background: var(--rule-dot); }
  .sem .hdr__join:hover { background: var(--orange-700); border-color: var(--orange-700); color: #fff; }
  .sem .hdr__lnk:hover,
  .sem .hdr__lnk.is-current { color: var(--orange-700); }
}

@layer utility {
  @media (prefers-reduced-motion: reduce) {
    .gauge__fill { transition: none; }
    .reveal { opacity: 1; transform: none; }
  }
}