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

   ここまでの経緯（2026-09-18）
   ------------------------------------------------------------
   v1：章番号・計器・カード・図版・骨組みの表で組んだ。
       → 語りではなく仕様書になった。共感も信用も生まれない。
   v2：全部外して散文だけにした。地の色も9段で温めた。
       → 区切りが消えて「ダラダラ長いページ」になり、
         地の色は温かみではなく可読性を下げていた。
   v3（これ）：両方の失敗をふまえて、
       ・構造は戻す（章番号・透かし数字・左の縦ラベル・明確な見出し・罫）
       ・中身は語りのまま（箇条書きに割り戻さない。散文は散文で組む）
       ・地は紙一色に戻す。温度で語らせるのはやめて、
         04「本音」と07「仲間」の2面だけ温かい紙にして呼吸を入れる
       ・本文はゴシック。明朝は「心の声」の塊だけに使う
         （明朝600で14,000px 読ませるのは重すぎた）
       ・強い一行は 1 → 8 で級数が上がる。これが感情の高まりの本体
       ・右はハート。溜まっていく。目盛りは打たない
   ============================================================ */

@layer base {
  html { background: var(--paper); }
  .own { background: var(--bg); color: var(--fg); }
  @media (min-width: 1100px) { :root { --rail-clock: 150px; } }
  @media (min-width: 1280px) { :root { --rail-clock: 210px; } }
}

@layer component {

  /* ---------- 器 -------------------------------------------- */
  /* 区切りは「章番号＋透かし＋左の縦ラベル＋見出し＋罫」で作る。
     地の色では作らない（v2 の失敗）。呼吸だけ2面で入れる。 */
  .sec--warm { background: var(--paper-warm); }
  .sec--o00 { padding-block: clamp(84px, 8vw, 132px) var(--section-py); }
  /* 章の頭に1本。スクロールしていて「次に入った」と分かるようにする */
  .own .sec + .sec:not(.fin)::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--rule);
  }
  /* 右上の透かし数字を下げる。
     このページは章の頭に1本罫を引いているので、共通の top:14px だと
     数字が罫にぶつかって窮屈に見える（罫から数字のインク上端まで
     1440 で 22px しかなかった。字の丈は 163px）。
     文字の丈のおよそ 0.28 倍まで空ける ── 1440 で 46px、430 で 24px。
     line-height が .8 なので箱の上端とインクの上端は 8px ほどずれる。
     ここで指定するのは箱の位置なので、その分を引いた値にしてある。
     .own に限定する ── .wm--r はトップ・申込み・セミナーでも使っていて、
     あちらは章の頭に罫がないので今のままでよい。 */
  .own .wm--r { top: clamp(21px, 2.6vw, 38px); }

  .own .hdr { opacity: 1; }
  .own .hdr__sep { background: var(--rule-dot); }
  .own .hdr__join:hover { background: var(--orange-700); border-color: var(--orange-700); color: #fff; }
  .own .hdr__lnk:hover,
  .own .hdr__lnk.is-current { color: var(--orange-700); }
  @media (max-width: 420px) { .own .brsp { display: none; } }
  @media (max-width: 720px) { .own .brpc { display: none; } }

  /* 見出し。番号と罫で「ここから新しい話」を明示する */
  .oh {
    font-family: var(--font-gothic); font-weight: 700;
    line-height: 1.45; letter-spacing: .01em; color: var(--ink-800);
    margin-top: 6px; font-feature-settings: "palt" 1;
  }
  .oh--1 { font-size: clamp(1.625rem, 3.6vw, 2.625rem); }
  .oh--2 { font-size: clamp(1.375rem, 2.9vw, 2.125rem); }
  .oh em { font-style: normal; color: var(--orange-500); }
  .own .hd { max-width: 44rem; }
  .own .hd + * { margin-top: clamp(34px, 3.6vw, 52px); }

  /* ---------- 本文 ------------------------------------------
     長く読ませるページなので、本文はゴシック。行送りを広く取る。
     1行は 40rem（640px）＝ 和文で約37字。 */
  .say {
    max-width: 40rem;
    font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 2.0;
    letter-spacing: .01em; color: #3E4854;
  }
  .say p + p { margin-top: 1.45em; }
  .say b { font-weight: 700; color: var(--ink-800); }
  .say--lead { margin-top: clamp(40px, 4.4vw, 64px); }
  .voice + .say, .quo + .say, .beat + .say, .line + .say, .track + .say { margin-top: clamp(28px, 3vw, 42px); }
  .say + .say { margin-top: 1.45em; }

  /* 心の声・世の中の声・並ぶ短文。ここだけ明朝にする。
     声として聞こえてほしい塊で、かつ短いので、重さが問題にならない。 */
  .quo {
    max-width: 36rem; margin-top: clamp(26px, 2.8vw, 38px);
    padding-left: clamp(18px, 2vw, 26px);
    border-left: 2px solid var(--orange-200);
    font-family: var(--font-mincho); font-weight: 600;
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.95;
    letter-spacing: .02em; color: #47505C;
    font-feature-settings: "palt" 1;
  }
  .quo p + p { margin-top: .85em; }
  .quo--mark { border-left-color: var(--orange-700); color: var(--ink-800); }
  .quo__last { color: var(--orange-800); font-weight: 700; }

  /* 三連のリズム（毎日試して／作って／変えて）。声を張る箇所 */
  .beat { margin-top: clamp(30px, 3.2vw, 44px); }
  .beat p {
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.1875rem, 2.3vw, 1.625rem); line-height: 1.6;
    color: var(--ink-800); font-feature-settings: "palt" 1;
  }
  .beat p + p { margin-top: .28em; }
  .beat p:nth-child(2) { color: var(--orange-800); }
  .beat p:nth-child(3) { color: var(--orange-700); }

  /* 強い一行。ページを下るほど級数が上がる。感情の高まりの本体。
     中央寄せにしない ── 語りかける位置が動かない方が近くに聞こえる。

     一行の中で太さや色を変えない。
     受けの語（「そして、」「だからこそ、」）だけ 400 の薄い色にしていたが、
     28〜44px でそれをやると、線が痩せて掠れて見えた。
     サイトの決まりは「強い一行は一様の太さ」── トップの .stmt が
     「実は「AIに仕事を奪われる」／のではありません。」を
     全部 700 で組んでいるのと同じ扱いにする（2026-09-18 修正）。
     <b> は語りの芯を示す印として残すが、見た目は変えない。
     色を替えるのは最後の一行（.voice--8 b）だけ。 */
  .voice {
    max-width: 40rem; margin-top: clamp(40px, 4.4vw, 68px);
    font-family: var(--font-gothic); font-weight: 700;
    line-height: 1.6; letter-spacing: .01em; color: var(--ink-800);
    font-feature-settings: "palt" 1;
  }
  /* <b> の既定値は bolder。親が 700 だと 900 に上がってしまい、
     結局また一行の中で太さが変わる（しかも Noto Sans JP は 900 を読み込んで
     いないので合成ボールドになり、字が潰れる）。継承に倒す。 */
  .voice b { font-weight: inherit; }
  .voice em { font-style: normal; color: var(--orange-500); }
  /* 級数は 1 → 8。いまは 2 だけ空き（01 の「本当にそうなのかな？」を
     .turn へ移したため）。物差しとして残しておく。 */
  .voice--1 { font-size: clamp(1.125rem, 1.9vw, 1.25rem); }
  .voice--2 { font-size: clamp(1.25rem, 2.3vw, 1.625rem); }
  .voice--3 { font-size: clamp(1.3125rem, 2.5vw, 1.75rem); }
  .voice--4 { font-size: clamp(1.375rem, 2.7vw, 1.875rem); }
  .voice--5 { font-size: clamp(1.4375rem, 2.9vw, 2rem); }
  .voice--6 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
  .voice--7 { font-size: clamp(1.625rem, 3.6vw, 2.5rem); }
  .voice--8 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.52; }
  .voice--8 b { color: var(--orange-800); }

  /* ---------- 引っ掛かり（章が折り返る一行） ----------
     01「でも、本当にそうなのかな？」と 03「Webもツール。AIもツール。」の2か所だけ。
     この2行は感情の頂点ではなく「立ち止まる場所」なので、
     .voice--1〜8 の級数で押すのは筋が違う（あれは高まりの物差しで、
     ここを級数で上げると 04〜08 との順序が壊れる）。
     だから別種の要素として立てる ── 太いオレンジの縦棒、前後の大きな余白、
     受けの語のオレンジ。棒があるので .voice の系列とは別物として読める。
     中央寄せにはしない（語りかける位置は動かさない）。 */
  .turn {
    max-width: 44rem;
    margin-block: clamp(62px, 7vw, 108px);
    padding-left: clamp(20px, 2.4vw, 32px);
    position: relative;
  }
  .turn::before {
    content: ""; position: absolute; left: 0; top: .1em; bottom: .14em;
    width: 4px; border-radius: 2px;
    background: linear-gradient(180deg, var(--orange-500), var(--orange-700));
  }
  /* 「でも、」のような受け。本体より小さく、色で引っ掛ける */
  .turn__s {
    display: block;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.6;
    letter-spacing: .06em; color: var(--orange-500);
  }
  .turn__m {
    display: block; margin-top: .24em;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.625rem, 4vw, 2.125rem); line-height: 1.44;
    letter-spacing: .005em; color: var(--ink-800);
    font-feature-settings: "palt" 1;
  }
  /* 03 は受けの語がなく1行だけ。棒が短いと「取り残した目印」に見えるので、
     上下に少し詰め物を入れて棒の丈を稼ぐ */
  .turn--3 { padding-block: 8px; }
  .turn--3 .turn__m { margin-top: 0; font-size: clamp(1.6875rem, 4.2vw, 2.25rem); }
  .turn__m em { font-style: normal; color: inherit; }
  /* 狭い幅だけ、句点で折る。放っておくと和文はどこでも折れるので
     「Webもツー／ル。」のような切れ方をする */
  .turn__br { display: none; }
  @media (max-width: 540px) { .turn__br { display: inline; } }

  /* 一行だけで立つ言葉 */
  .line {
    max-width: 40rem; margin-top: clamp(32px, 3.4vw, 48px);
    padding-left: 52px; position: relative;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.65;
    color: var(--ink-800); font-feature-settings: "palt" 1;
  }
  .line::before {
    content: ""; position: absolute; left: 0; top: .82em;
    width: 34px; height: 2px; background: var(--orange-700);
  }
  .line--mark { color: var(--orange-800); }

  /* 実績の箇条書き。表にすると語りが途切れるので、本文の幅のまま点で積む */
  .track {
    max-width: 40rem; margin-top: clamp(28px, 3vw, 40px);
    padding-block: 2px;
    border-top: 1px solid var(--rule-dot); border-bottom: 1px solid var(--rule-dot);
  }
  .track li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--rule-dot);
    font-size: clamp(0.875rem, 1.1vw, 1rem); line-height: 1.55;
    letter-spacing: .01em; color: #3E4854;
  }
  .track li:last-child { border-bottom: 0; }
  .track li::before {
    content: ""; flex: none;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--orange-500);
  }

  /* ---------- 00 起源 ---------------------------------------
     見出しはセミナーページと同じ扱いで大きく。.Co はロゴと同じオレンジ。
     写真は右に大きく置き、縁をマスクで溶かして紙地に馴染ませる。
     枠もカードも付けない（囲うと「素材」に見えて、人が遠くなる）。 */
  .sec--o00 { padding-block: clamp(88px, 8.4vw, 140px) var(--section-py); }
  /* 見出しは1行。写真を少し小さくしたぶん、ここを本文より広く取る */
  .ohero__hd { max-width: 48rem; position: relative; z-index: 1; }
  .ohero__h {
    margin-top: 12px;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.25rem, 3.9vw, 3.125rem); line-height: 1.3; letter-spacing: 0;
    /* 1行に固定する。下限を低く取っているのは、Webフォントが落ちてこないときの
       代替書体が広くても溢れないようにするため */
    white-space: nowrap;
    color: var(--ink-800); font-feature-settings: "palt" 1;
  }
  /* ロゴと同じオレンジ。ヘッダーの Weppy.Co、トップのロゴと揃える */
  .ohero__h span { color: var(--orange-500); }
  .ohero__sub {
    margin-top: clamp(22px, 2.4vw, 34px);
    font-family: var(--font-mincho); font-weight: 600;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem); line-height: 1.95; letter-spacing: .05em;
    color: var(--fg-muted); font-feature-settings: "palt" 1;
  }
  .sec--o00 .say, .sec--o00 .voice, .sec--o00 .sign { position: relative; z-index: 1; }

  /* 写真。マスクで四辺を溶かす。左と下を強めに抜いて、文字の側へは侵入させない */
  .face {
    position: absolute; z-index: 0; pointer-events: none;
    /* 上端はヘッダー（下端 66px）の裏へ入れる。
       ここに紙の帯が出ると「余白を作った」ように見えるため（2026-09-18 報告）。
       頭の位置は写真側で解決した ── 元写真は頭上の余白が 8.5% しかなく、
       4:5 の縦切りはすでに全高を使っていて切り直しでは稼げなかったので、
       無地の壁だけを上に継ぎ足して 18.1% にした（_source の mkp30.py）。
       888px 表示で頭上に 161px。髪はヘッダーの 113px 下から始まる。 */
    inset-inline-end: calc(-6% + 60px); inset-block-start: -12px; /* 18px から頭を 30px 上げた */
    width: min(55%, 710px);
    /* 溶かし方は「外側＝横のぼかし」「内側の img＝縦のぼかし」の入れ子にする。
       入れ子のマスクは掛け算になるので、mask-composite の解釈差に当たらない。
         ・線形マスク3枚＋mask-composite は上辺に硬い境目が残った
         ・ラジアル1枚は、勾配が箱の外で終わってしまい四角いままだった
       右辺はぼかさない ── 画面の外へはみ出すので境目が存在しない。 */
    /* 左辺は「消えすぎ」と「パキッと」の間を取る。停止点を3つにして
       直線ではなくS字に近い立ち上がりにする（途中を薄めに、後半で一気に）。
       0→32% だと境目が立ち、0→56% だと写真が消えすぎた。 */
    -webkit-mask-image: linear-gradient(92deg, transparent 0%,
      rgba(0,0,0,.16) 11%, rgba(0,0,0,.58) 27%, #000 46%);
    mask-image: linear-gradient(92deg, transparent 0%,
      rgba(0,0,0,.16) 11%, rgba(0,0,0,.58) 27%, #000 46%);
    opacity: 1;
  }
  /* 縦のぼかしは、髪の生え際（18.1%）より上で不透明になりきること。
     11%（≒98px）で不透明。上端はヘッダーの裏から始まるので、
     ヘッダーの下に出てくる時点で半分ほど濃くなっていて、
     紙との境目が見えない。 */
  .face img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 4%, #000 11%,
      #000 80%, rgba(0,0,0,.5) 94%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 4%, #000 11%,
      #000 80%, rgba(0,0,0,.5) 94%, transparent 100%);
  }
  .face img { display: block; width: 100%; height: auto; }
  /* 1列になる幅では、文字の背面に薄く敷く。顔の上に本文を重ねない */
  @media (max-width: 899px) {
    .face {
      inset-inline-end: -14%; inset-block-start: auto; inset-block-end: -2%;
      width: min(90%, 520px); opacity: .5;
      -webkit-mask-image: linear-gradient(94deg, transparent 0%,
        rgba(0,0,0,.18) 10%, rgba(0,0,0,.54) 26%, #000 48%);
      mask-image: linear-gradient(94deg, transparent 0%,
        rgba(0,0,0,.18) 10%, rgba(0,0,0,.54) 26%, #000 48%);
    }
    /* 縦のぼかしは1列のときだけ長いまま戻す。
       広い幅では写真の上端がヘッダーのすぐ下（＝紙の余白の中）に来るので
       7.5% の短い立ち上がりでよかったが、1列では上端が本文のまん中に落ちる。
       そこで短くすると、文字の背後に写真の上辺が横一直線に出た
       （実測 24/255 の段差）。ここは 16% まで引っ張って溶かす。 */
    .face img {
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.62) 6%, #000 16%,
        #000 80%, rgba(0,0,0,.5) 94%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.62) 6%, #000 16%,
        #000 80%, rgba(0,0,0,.5) 94%, transparent 100%);
    }
    .sec--o00 { padding-block: clamp(76px, 8vw, 120px) clamp(200px, 40vw, 380px); }
  }
  @media (max-width: 560px) {
    .face { inset-inline-end: -22%; width: 100%; opacity: .36; }
  }

  /* 名乗り。手紙の差出人なので、罫を引いてそこだけ独立させる */
  .sign {
    max-width: 40rem; margin-top: clamp(38px, 4vw, 58px);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px;
    font-family: var(--font-mincho); font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.125rem); letter-spacing: .04em; color: var(--fg-muted);
  }
  .sign__r { width: 34px; height: 1px; background: var(--orange-700); margin-right: 14px;
    align-self: center; flex: none; }
  .sign strong {
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing: .08em; color: var(--ink-800);
    margin: 0 .1em;
  }

  /* ---------- 語りの合間の図版 ------------------------------
     章ごとには置かない。感情が切り替わる3か所だけ（01・07・08）。
     v1 で全章に図版と表を置いて仕様書になった失敗を繰り返さないため。

     大きさは章によって変える。
       ・01 着想／08 行先 … 見せ場。本文の1.6倍幅まで広げる
       ・07 仲間         … 声を張った一行のあとの息継ぎ。本文幅のまま、枠なし
     上限を 64rem で切っているのは、1920px で章幅いっぱいに広げると
     1540px の図版が 640px の本文の隣に並び、釣り合いが壊れるから。 */
  .own .fig { margin-top: clamp(40px, 4.4vw, 66px); }
  .own .fig--wide  { max-width: 64rem; }
  .own .fig--quiet { max-width: 40rem; }
  .own .fig + .say, .own .fig + .voice, .own .fig + .line,
  .own .fig + .quo, .own .fig + .beat { margin-top: clamp(34px, 3.6vw, 52px); }
  /* 枠のある図版は紙のカード地。07 は温かい面なので枠を付けない
     （枠を付けると板が浮いて、語りの途中に「素材」が挟まる） */
  .own .fig--frame { background: var(--paper-card); }
  /* 図の見出し語は SVG の中に置いてある（縦積みのときも絵と一緒に動くように）。
     「みんな」側だけアクセント色にして、左右の対応を色でも取る。 */
  .fignode--mark { fill: var(--fig-accent); font-weight: 700; }
  @media (max-width: 599px) {
    .own .fig { margin-top: clamp(32px, 6vw, 44px); }
    .own .fig--frame { padding: 20px; }
  }

  /* ---------- 気持ちのハート -------------------------------- */
  .hb {
    position: fixed; z-index: 30;
    right: max(14px, calc(var(--gutter) - 6px)); top: 50%;
    /* --park はJSが入れる「最後の面の手前で止めるための持ち上げ量」 */
    transform: translateY(calc(-50% - var(--park, 0px)));
    display: none; flex-direction: column; align-items: center; gap: 18px;
    width: 150px; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-4) var(--ease-out), visibility 0s linear var(--dur-4);
  }
  .hb.is-live { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
  @media (min-width: 1100px) { .hb { display: flex; } }
  /* 幅に余裕があるときはレールとラベルだけ広げる。
     ハートの大きさは変えない（トップの時計の文字盤と同寸で揃えるため）。 */
  @media (min-width: 1280px) { .hb { width: 176px; } .hb__now { width: 176px; font-size: 15px; } }
  /* ハートの形はマスクで作る。空の側（薄いハート）と、下から溜まる側
     （オレンジ）を同じマスクで抜くので、輪郭が完全に一致する。 */
  /* 大きさは --hw / --hh の2つだけで決める。
     マスクと背景の寸法も同じ変数を使うので、サイズを変えても形が崩れない。 */
  /* 大きさはトップページの時計の文字盤（--dial-size: 146px）に合わせる。
     サイトの中で「右レールに置く計器」の寸法を揃えるため。 */
  .hb__heart {
    --hw: 146px; --hh: 137px;
    position: relative; width: var(--hw); height: var(--hh);
    --heart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 94"><path d="M50 91C50 91 4 62 4 32 4 15 17 6 29 6c10 0 17 6 21 13 4-7 11-13 21-13 12 0 25 9 25 26 0 30-46 59-46 59z" fill="%23000"/></svg>');
    transform-origin: 50% 62%;
  }
  .hb__empty, .hb__fill {
    position: absolute; left: 0; right: 0; bottom: 0;
    -webkit-mask-image: var(--heart); mask-image: var(--heart);
    -webkit-mask-size: var(--hw) var(--hh); mask-size: var(--hw) var(--hh);
    -webkit-mask-position: bottom center; mask-position: bottom center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .hb__empty { top: 0; background: var(--rule); }
  /* 色は溜まった高さに紐づける。ハート全体ぶんの勾配を下端に固定するので、
     低いうちは冷たい色のまま。マスクも下端固定なので形が崩れない。 */
  .hb__fill {
    height: var(--p, 6%);
    background-image: linear-gradient(180deg,
      var(--orange-500) 0%, var(--orange-600) 34%, var(--orange-700) 62%, #C9B7A2 100%);
    background-size: var(--hw) var(--hh);
    background-position: bottom center;
    background-repeat: no-repeat;
    transition: height 300ms var(--ease-out);
  }
  /* 溜まりきる手前から、そっと脈を打たせる */
  .hb.is-hot .hb__heart { animation: hbBeat 1.9s var(--ease-out) infinite; }
  @keyframes hbBeat {
    0%, 62%, 100% { transform: scale(1); }
    70% { transform: scale(1.085); }
    78% { transform: scale(1.01); }
    86% { transform: scale(1.05); }
  }
  .hb__now {
    font-family: var(--font-mincho); font-weight: 600; font-size: 14px; line-height: 1.7;
    text-align: center; color: var(--fg-muted); letter-spacing: .04em;
    width: 150px; min-height: calc(1.7em * 2);
    /* 和文は既定でどこでも折れる。折る位置は JS 側の <br> で決める */
    word-break: keep-all; overflow-wrap: normal;
    transition: color var(--dur-4) var(--ease-out);
  }
  .hb.is-hot .hb__now { color: var(--orange-800); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) {
    .hb, .hb__fill, .hb__now { transition: none; }
    .hb.is-hot .hb__heart { animation: none; }
  }

  /* ---------- 段落の出現 ------------------------------------
     読む速さに合わせたいので、セクション単位ではなく段落単位で出す */
  .rise { opacity: 0; transform: translateY(12px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
  .rise.is-up { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
  }

  /* ---------- 09 最後の面 ----------------------------------- */
  .fin {
    position: relative; overflow: hidden;
    background: var(--orange-800); color: #fff;
    display: grid; place-items: center; min-height: 96svh;
    padding: clamp(80px, 9vw, 130px) var(--gutter);
    text-align: center;
  }
  .fin .wm--cta { color: rgba(255,255,255,.085); left: clamp(12px, 3vw, 54px); }
  .fin__in { position: relative; z-index: 1; width: 100%; max-width: 44rem; }
  .fin__k { font-family: var(--head-font); font-weight: 700; font-size: 12.5px;
    letter-spacing: .16em; color: rgba(255,255,255,.82); }
  .fin__h {
    margin-top: 22px;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(2rem, 5.6vw, 3.75rem); line-height: 1.4; letter-spacing: .01em;
    font-feature-settings: "palt" 1;
  }
  .fin__say {
    margin-top: clamp(30px, 3.4vw, 44px);
    font-family: var(--font-mincho); font-weight: 600;
    font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); line-height: 2.1;
    letter-spacing: .03em; color: rgba(255,255,255,.94);
  }
  .fin__say p + p { margin-top: 1.4em; }
  .fin__ask {
    margin-top: clamp(32px, 3.6vw, 50px);
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.1875rem, 2.8vw, 1.75rem); line-height: 1.6;
    font-feature-settings: "palt" 1;
  }
  .fin__go { margin-top: clamp(28px, 3.2vw, 42px); }
  .fin__go .btn--fill {
    background: var(--paper); color: var(--orange-800);
    padding: 21px clamp(28px, 4.4vw, 52px); font-size: clamp(1rem, 1.8vw, 1.1875rem);
    box-shadow: 0 3px 22px rgba(0,0,0,.20);
  }
  .fin__go .btn--fill:hover { background: #fff; }
  .fin__go .cnr { border-color: rgba(168,58,5,.34); }
  .fin__note { margin-top: 18px; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .1em; color: rgba(255,255,255,.74); }
}

/* WordPress の figure { margin: 0 0 1em } は @layer の外なので、
   レイヤー内の .own .fig { margin-top } が負ける。上余白はここで持つ。 */
.own figure.fig {
  margin-block-start: clamp(40px, 4.4vw, 66px);
  margin-block-end: 0;
  margin-inline: 0;
}
/* WordPress / SWELL の ul 既定（disc・左インデント）を外す */
.own ul.track {
  list-style: none;
  margin-block-start: clamp(28px, 3vw, 40px);
  margin-block-end: 0;
  margin-inline: 0;
  padding: 2px 0;
}
@media (max-width: 599px) {
  .own figure.fig { margin-block-start: clamp(32px, 6vw, 44px); }
}