@charset "utf-8";
/*
Theme Name: 所沢文化幼稚園 採用LP
Theme URI:
Author: 学校法人所沢文化幼稚園
Description: 学校法人所沢文化幼稚園の保育士採用ランディングページ。フロントページ1枚構成。応募フォームは Contact Form 7 を使用します（外観 > カスタマイズ > 応募フォーム にショートコードを設定）。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tby-recruit
Tags: landing-page, one-column, custom-colors
*/

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * genre: playful · macrostructure: Photographic · theme: custom (brand-locked)
 *   vibe: "warm cream, crayon, a place you can keep loving"
 *   paper #fffcf0 (light) · band #a9d4a9 (brand green) · accent #ffe6b0 (brand amber) · ink #333333
 *   axes — paper-band: light / display-style: japanese-rounded-gothic / accent-hue: chromatic-green
 * nav: N9 edge-aligned minimal · footer: Ft5 statement · cta: C4 sticky bottom bar (after fold)
 * heads: S2 hanging（英字ラベルは見出しの真上・同一列。JSで円弧に組む＝参考2 AWARD 由来）
 * features: F4 step sequence — Point 1〜4 を1セクションに統合し、番号バッジ＋点線罫で見分けさせる
 *           + F3 tabular spec sheet（募集要項 / 会社概要）
 * imagery: 写真は border-radius でランダムな有機的丸形（--blob-1〜5）にマスク
 *          複数枚は4カラムのグリッドではなく無限ループのマーキー（.marquee）
 * background: 全セクションに紙吹雪パターン（--pattern-confetti / .band::before）
 * 区切り: 面の境目は緩やかな波1種に統一（.edge・周期80px）。見出しラベルも同じ波形の
 *        反転マスクで切り抜き、消えるタイミングを波線に合わせている
 *        前の面の色をマスクで波型に抜き、輪郭には drop-shadow で濃い色の線を引く。
 *        filter は mask より先に適用されるため、マスクは ::before・線は親に分けている
 * 写真:   2px の濃い枠線のみ（下地の面は置かない）。あしらいは写真の縁に添えるので本文に被らない
 * 面:     緑の面は薄いグリーン。全面に方眼（--pattern-grid）＋紙吹雪を重ねる
 * Point:  数字バッジの右に見出しを並べる。
 *        点線の上をイラストがパラパラ漫画のように行き来する（.trail）。
 *        steps(9) のコマ送りで進み、1歩ごとに ±5° 傾き、反転するのは端に着いた時だけ。
 *        移動量は cqw（コンテナ幅）なので、どの幅でも端から端まで走る
 * PC:     左右の余白は左＝ロゴ／右＝コピーとCTA。どちらも上下中央（.side-panel）
 * 待機:   あしらいは反転せず上下にふわふわ（float / float-s）。反転するのは .trail のイラストだけ
 * 配置:   あしらいは必ず列の内側に置く（.band の overflow で切れるため）。
 *        傾き（--rot）で外接矩形が広がるぶんの逃げも見込んでいる
 * 面:     グリーンと琥珀以外は FV と同じ明るさに統一（--color-paper-2 = --color-paper）
 * 数字:   Point番号は塗り＝紙色／輪郭＝濃い色（-webkit-text-stroke 2.5px）
 *        参考1 tabio は 3px + #097C7A。役割をこちらのトークンに置き換えている
 * FV: 中央揃え。上にテキスト、中央に写真、下にリードとCTA。周囲に10点のあしらいを散らす
 * Point: 番号バッジの円周をループで回る英字テキスト（SVG textPath + ring-spin）
 * 並び : 全セクション 見出し → 画像 → テキスト
 * 英字ラベル: セクション右上に置いた大きな円。.band の overflow で左下の1/4だけが映る
 * 円周テキスト: ①見出しラベル（右上／円回転）②Point番号バッジ（円回転）の2種のみ。
 *              文字列を実測 → textLength で円周ぴったりに伸縮させ継ぎ目を消している。
 *              写真の縁をまわるテキストは「回りすぎ」のため撤去した
 * loop制御: ループは画面内にある間だけ回す（[data-loop-armed]:not(.is-inview) で停止）
 *          JSが印を付けた要素にだけ効くので、JSが動かない時は素の状態のまま
 * 待機モーション: あしらいは walk を主にし、空を漂うもの（雲・虹・蝶）だけ float / sway-slow。
 *              walk はライン上を小刻みに歩き、1歩ごとに +6° / -6° の2つの角度を交互にとって
 *              端で反転して戻る（参考2 fc-illust-waddle 由来 · 1周期の28%だけ動き、残りは静止）。
 *              開始時刻は --delay で1つずつずらし、一斉に動き出さないようにしている
 * 出現演出: 主要な写真は面と同じ色の扉が左右にひらく（[data-door] · 1回だけ）
 * Point3: 横スクロールのストリップを廃し、中央1枠でのクロスフェード（13.5s / 3枚）
 * z-order: 写真(1) < あしらい(5) < キャラクター(6) < 円周テキスト(7) < 本文(9)
 * enrichment: none generated — client photography + 14 hand-drawn あしらい
 * z-order: 写真(1) < あしらい(5) < テキスト(9)
 *          あしらいは全ての写真より前面。ただし本文の可読性のみ譲らない（--z-text）
 * motion: reveal-once (IntersectionObserver) · deco long-dwell squash-bounce · button press
 *         あしらいは picture に rotate（落書き風の傾き）、img に bounce を分けて掛けている
 * DNA note: type stack, warm paper, #DBCFBF hairline and the squash-bounce idle are taken from
 *           sgkz.or.jp/develop (参考2). Layout/reveal/centred-mobile-column follow 参考1 の指定。
 * 逸脱の記録: (1) ink は指定の #333333 をそのまま使わず chroma 0.008 だけ暖色に振っている
 *              (見た目は #333 と同一 / 完全な無彩色グレーを避けるため)。
 *            (2) 全セクションにスクロールリビールを付与（通常は 1 箇所に絞る規約）— 仕様書 演出0 が優先。
 *            (3) あしらいの無限ループ（通常は禁止）— 仕様書「浮遊させる」が優先。1周期の86%は静止。
 * 成果物を index.html / style.css / script.js / images に限定する指定のため tokens.css は分割せず、
 * トークンは本ファイル先頭に集約している（フェーズ2の WordPress テーマ化でもこのまま流用可）。
 */

/* ==========================================================================
   01. Tokens
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --color-paper:    oklch(99.0% 0.016 95);   /* #fffcf0 背景（明） */
  --color-paper-2:  oklch(99.0% 0.016 95);   /* FVと同じ明るさに揃える */
  --color-accent:   oklch(93.3% 0.074 86);   /* #ffe6b0 アクセント */
  --color-ink:      oklch(32.0% 0.008 95);   /* #333333 相当（暖色に微調整） */
  --color-muted:    oklch(46.0% 0.014 95);
  --color-rule:     oklch(86.0% 0.026 75);
  --color-rule-2:   oklch(74.0% 0.040 140);
  --color-deep:     oklch(45.0% 0.100 148);  /* リンク・フォーカス・強調 */
  --color-deep-hover: oklch(39.0% 0.100 148);
  --color-surface:  oklch(99.6% 0.006 95);   /* 入力欄など */
  --color-mint:     oklch(95.5% 0.032 148);  /* 薄いグリーン（バッジなど） */
  --color-band:     oklch(93.5% 0.045 148);  /* 面に敷く薄いグリーン */
  --color-band-key: oklch(82.8% 0.075 145);  /* #a9d4a9 ブランドのメイン（点や差し色） */
  --color-grid:     oklch(88% 0.020 130);    /* 方眼のうすい線 */
  --color-outer:    oklch(93.8% 0.024 88);   /* PC時、コンテンツ列の外側 */
  /* 全セクション共通の背景あしらい（星・丸・三角・六角形・棒）。
     data URI 内で色を持つため、CSS からは必ずこの名前で参照する */
  /* tabio に倣った方眼。子どもの自由帳のような下地をつくる */
  --pattern-grid:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);

  --pattern-confetti: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22560%22 viewBox=%220 0 480 560%22><rect x=%2234.0%22 y=%2269.4%22 width=%224.2%22 height=%2214.1%22 rx=%222.1%22 fill=%22%23e8896f%22 transform=%22rotate(125 36.1 76.4)%22/><circle cx=%2248.2%22 cy=%22140.9%22 r=%223.9%22 fill=%22%23f2a6a0%22/><polygon points=%2223.0,212.29999999999998 29.808,224.14 16.192,224.14%22 fill=%22%23ffe6b0%22 transform=%22rotate(24 23.0 219.7)%22/><rect x=%2261.3%22 y=%22398.8%22 width=%223.0%22 height=%2210.3%22 rx=%221.5%22 fill=%22%23a9d4a9%22 transform=%22rotate(281 62.8 403.9)%22/><polygon points=%2229.0,522.4 32.4,524.3 32.4,528.2 29.0,530.2 25.6,528.2 25.6,524.3%22 fill=%22%23a9d4a9%22 transform=%22rotate(81 29.0 526.3)%22/><circle cx=%22139.5%22 cy=%2268.9%22 r=%226.3%22 fill=%22%23e8896f%22/><polygon points=%22127.5,138.7 133.1,141.9 133.1,148.4 127.5,151.7 121.9,148.4 121.9,141.9%22 fill=%22%23ffe6b0%22 transform=%22rotate(215 127.5 145.2)%22/><polygon points=%22154.6,253.1 160.1,256.2 160.1,262.5 154.6,265.7 149.1,262.5 149.1,256.2%22 fill=%22%23f2a6a0%22 transform=%22rotate(332 154.6 259.4)%22/><polygon points=%22143.6,296.3 148.2,299.0 148.2,304.2 143.6,306.9 139.0,304.2 139.0,299.0%22 fill=%22%233d7a4a%22 transform=%22rotate(314 143.6 301.6)%22/><circle cx=%22262.6%22 cy=%2263.9%22 r=%227.0%22 fill=%22%23a9d4a9%22/><path d=%22M246.4,113.1 Q246.99200000000002,116.208 250.1,116.8 Q246.99200000000002,117.392 246.4,120.5 Q245.808,117.392 242.70000000000002,116.8 Q245.808,116.208 246.4,113.1 Z%22 fill=%22%23c9a8e0%22 transform=%22rotate(123 246.4 116.8)%22/><path d=%22M243.3,251.3 Q244.372,256.928 250.0,258.0 Q244.372,259.072 243.3,264.7 Q242.228,259.072 236.60000000000002,258.0 Q242.228,256.928 243.3,251.3 Z%22 fill=%22%233d7a4a%22 transform=%22rotate(251 243.3 258.0)%22/><rect x=%22217.3%22 y=%22312.6%22 width=%223.8%22 height=%2213.0%22 rx=%221.9%22 fill=%22%23f5c95a%22 transform=%22rotate(91 219.2 319.1)%22/><rect x=%22326.6%22 y=%2247.4%22 width=%223.6%22 height=%2212.2%22 rx=%221.8%22 fill=%22%23f5c95a%22 transform=%22rotate(68 328.4 53.5)%22/><circle cx=%22347.6%22 cy=%22160.6%22 r=%226.3%22 fill=%22%23e8896f%22/><polygon points=%22336.0,348.2 339.22,353.8 332.78,353.8%22 fill=%22%23c9a8e0%22 transform=%22rotate(28 336.0 351.7)%22/><rect x=%22410.0%22 y=%2253.2%22 width=%224.2%22 height=%2214.1%22 rx=%222.1%22 fill=%22%23c9a8e0%22 transform=%22rotate(84 412.1 60.2)%22/><polygon points=%22413.9,158.9 419.3,162.0 419.3,168.2 413.9,171.3 408.5,168.2 408.5,162.0%22 fill=%22%23c9a8e0%22 transform=%22rotate(60 413.9 165.1)%22/><polygon points=%22430.4,210.5 433.89599999999996,216.58 426.904,216.58%22 fill=%22%23c9a8e0%22 transform=%22rotate(305 430.4 214.3)%22/><path d=%22M435.6,349.8 Q436.40000000000003,354.0 440.6,354.8 Q436.40000000000003,355.6 435.6,359.8 Q434.8,355.6 430.6,354.8 Q434.8,354.0 435.6,349.8 Z%22 fill=%22%23a9d4a9%22 transform=%22rotate(239 435.6 354.8)%22/><circle cx=%22413.2%22 cy=%22442.7%22 r=%226.7%22 fill=%22%23e8896f%22/><path d=%22M449.9,501.9 Q450.988,507.61199999999997 456.7,508.7 Q450.988,509.788 449.9,515.5 Q448.81199999999995,509.788 443.09999999999997,508.7 Q448.81199999999995,507.61199999999997 449.9,501.9 Z%22 fill=%22%23c9a8e0%22 transform=%22rotate(191 449.9 508.7)%22/></svg>");

  /* セクションの区切りの形（上が塗り・下が波型のマスク） */
  --edge-wave: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'><path d='M0,0 L80,0 L80,8 C70,2 50,2 40,8 C30,14 10,14 0,8 Z' fill='%23fff'/></svg>");
  --edge-wave-inv: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'><path d='M0,8 C10,14 30,14 40,8 C50,2 70,2 80,8 L80,16 L0,16 Z' fill='%23fff'/></svg>");
  --edge-wave-h: 16px;

  --color-shadow:   oklch(45.0% 0.040 90 / 0.16);
  --color-shadow-2: oklch(45.0% 0.040 90 / 0.07);

  /* --- type -------------------------------------------------------------- */
  --font-sans: "Albert Sans", "Zen Kaku Gothic New", -apple-system,
               BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic", Meiryo, sans-serif;
  --font-en:   "Albert Sans", var(--font-sans);

  --text-body:      clamp(0.875rem, 0.78rem + 0.35vw, 1rem);  /* SP 14 → PC 16 */
  --text-xs:        0.6875rem;
  --text-sm:        0.75rem;
  --text-md:        clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem);
  --text-lg:        clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --text-display:   clamp(1.75rem, 1.2rem + 2.6vw, 2.375rem);
  --text-display-s: clamp(1.5rem, 1.1rem + 1.9vw, 1.9375rem);
  --text-statement: clamp(1.625rem, 1.15rem + 2.3vw, 2.125rem);
  --text-point:     clamp(1.125rem, 0.95rem + 1vw, 1.4375rem);

  --track-tight: -0.03em;
  --track-wide:  0.14em;
  --leading:     1.9;
  --leading-tight: 1.5;

  /* --- space (4pt) ------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* --- shape ------------------------------------------------------------- */
  /* 写真のマスク：ランダムな有機的な丸形（参考2の切り抜きに倣う） */
  --blob-1: 56% 44% 48% 52% / 46% 50% 50% 54%;
  --blob-2: 46% 54% 58% 42% / 53% 45% 55% 47%;
  --blob-3: 52% 48% 42% 58% / 57% 47% 53% 43%;
  --blob-4: 60% 40% 51% 49% / 44% 56% 44% 56%;
  --blob-5: 43% 57% 46% 54% / 51% 41% 59% 49%;

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 999px;
  --rule-hair:   1px;

  /* --- layout ------------------------------------------------------------ */
  --col: 480px;
  --gut: clamp(1.25rem, 5.5vw, 1.75rem);

  /* --- motion ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-reveal: 700ms;

  /* --- z ----------------------------------------------------------------- */
  --z-photo:  1;    /* 写真 */
  --z-deco:   5;    /* あしらい（写真より上） */
  --z-ring:   7;    /* 円周テキスト */
  --z-text:   9;    /* テキスト（あしらいより上・可読性優先） */
  --z-base:   1;
  --z-raised: 10;
  --z-frame:  180;
  --z-sticky: 200;
}

/* ==========================================================================
   02. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-outer);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading);
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }

/* display:grid / flex を持つ要素にも hidden を効かせる */
[hidden] { display: none !important; }

a { color: var(--color-deep); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

:focus-visible {
  outline: 3px solid var(--color-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* フォーカスリングはアニメーションさせない（即時表示） */
}

::selection { background: var(--color-accent); color: var(--color-ink); }

.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   03. コンテンツ列 と PC時の境目
   モバイル幅（480px）を基準に設計し、PCはその左右に余白と境目を足すだけ。
   境目は fixed で左右の「辺」にだけ置き、上から下まで1本の帯として途切れさせない。
   ========================================================================== */

/* WordPress の body_class() は固定ページで body に "page" を付ける。
   そのまま当たると本文全体が列幅480pxになってしまうため、div に限定する */
div.page {
  position: relative;
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  background: var(--color-paper);
  z-index: var(--z-base);
}

.page-frame { display: none; }

@media (min-width: 34rem) {
  .page-frame {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-frame);
    pointer-events: none;
  }
  .page-frame::before,
  .page-frame::after {
    content: "";
    position: absolute;
    top: -2rem;
    bottom: -2rem;
    width: var(--rule-hair);
    background: var(--color-rule);
  }
  .page-frame::before {
    left: calc(50% - var(--col) / 2);
    box-shadow: -18px 0 34px -16px var(--color-shadow);
  }
  .page-frame::after {
    left: calc(50% + var(--col) / 2 - var(--rule-hair));
    box-shadow: 18px 0 34px -16px var(--color-shadow);
  }
}

/* PC時、左右の余白に置くパネル（左＝ロゴ／右＝CTAとコピー） */
.side-panel { display: none; }

@media (min-width: 62rem) {
  .side-panel {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-md);
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100% - var(--col)) / 2);
    padding-inline: var(--space-lg);
    text-align: center;
    z-index: var(--z-frame);
  }
  .side-panel--left  { left: 0; }
  .side-panel--right { right: 0; }

  .side-panel__logo img { width: auto; height: clamp(5rem, 9vw, 7.5rem); }

  .side-panel__copy {
    font-size: var(--text-md);
    font-weight: 900;
    letter-spacing: var(--track-tight);
    line-height: 1.7;
    color: var(--color-ink);
    max-width: 12ch;
  }
  .side-panel__cta { white-space: nowrap; }

  .side-panel .deco {
    position: static;
    width: clamp(58px, 6vw, 86px);
    rotate: var(--rot, 0deg);
  }
  .side-panel__main { display: grid; justify-items: center; gap: var(--space-md); }
}

/* ==========================================================================
   04. 面（band）— セクションごとの背景切り替え
   上下に隙間・影・角丸は作らない。背景色が変わってもコンテンツ列は連続する。
   ========================================================================== */

.band {
  position: relative;
  overflow: hidden;              /* あしらいのはみ出しを列の内側で止める */
  padding-inline: var(--gut);
  padding-block: var(--space-2xl) var(--space-xl);
}

/* ==========================================================================
   04b. セクションの区切り
   前の面の色を波型に切り抜いて重ね、輪郭に濃い色の線を drop-shadow で引く。
   色はすべてトークン経由なので、面の組み合わせが変わってもそのまま使える。
   ========================================================================== */

/* セレクタは `.band > *:not(.deco)`（詳細度 0,2,0）と同じにして position を上書きする */
.band > .edge,
.foot > .edge {
  display: block;
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  z-index: var(--z-ring);
  height: var(--edge-h, 16px);
  pointer-events: none;
  /* 輪郭の線。filter は mask より先に適用されるため、
     マスクは中の ::before に掛け、線は親に掛けて消されないようにしている */
  filter: drop-shadow(0 2px 0 var(--color-deep));
}
.edge { --edge-h: var(--edge-wave-h); --edge-shape: var(--edge-wave); }
.edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--edge-from, var(--color-paper));
  -webkit-mask-image: var(--edge-shape);
          mask-image: var(--edge-shape);
  -webkit-mask-size: 80px var(--edge-h, 16px);
          mask-size: 80px var(--edge-h, 16px);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}
.edge--from-paper  { --edge-from: var(--color-paper); }
.edge--from-paper2 { --edge-from: var(--color-paper-2); }
.edge--from-green  { --edge-from: var(--color-band); }
.edge--from-accent { --edge-from: var(--color-accent); }

/* 区切りのぶん、面の上の余白を足す */
.band:has(> .edge), .foot:has(> .edge) { padding-block-start: calc(var(--space-2xl) + 0.5rem); }

/* 面の背景に紙吹雪を敷く。写真(1)・あしらい(5)・本文(9) すべての下に入る */
.band::before,
.foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pattern-confetti), var(--pattern-grid);
  background-size: 480px 560px, 24px 24px, 24px 24px;
  /* 方眼は左右中央そろえ。列幅が24pxで割り切れない時、余りが片側に寄って
     無地の帯に見えるのを防ぐ（PCは 480÷24=20 で割り切れるため見た目は不変） */
  background-position: 0 0, center top, center top;
  opacity: var(--confetti-alpha, 0.55);
}
/* タイルの継ぎ目が目立たないよう、面ごとに紙吹雪の位置と濃さをずらす。
   ずらすのは1層目（紙吹雪）だけ。方眼まで動かすと列の左右端に線が来なくなり、
   グリッドの無い帯ができてしまうため、2・3層目は必ず 0 0 に固定する */
.band:nth-of-type(even)::before { background-position: 140px -90px, center top, center top; }
.band--green::before,
.foot::before   { --confetti-alpha: 0.34; background-position: -70px 60px, center top, center top; }
.band--accent::before { --confetti-alpha: 0.38; background-position: 60px -140px, center top, center top; }

/* 重なり順：写真 < あしらい < テキスト
   （あしらいは写真の上に出すが、本文の可読性だけは譲らない） */
/* :where() で詳細度を 0,1,0 に落とし、下の .band > .label / .edge を勝たせる */
.band > :not(:where(.deco, .edge, .label)) { position: relative; }
.figure, .quad, .slideshow, .fv__figure { position: relative; z-index: var(--z-photo); }
.head, .body, .lede, .caption, .voice, .points, .spec, .points-list,
.form-wrap, .thanks, .band > p, .point__no, .point__title,
.foot__line, .foot__meta { position: relative; z-index: var(--z-text); }
/* .points-list は Point 内のあしらいを収めるため、子の .point 側で重なりを作る */
.points-list { z-index: auto; }
.point { z-index: auto; }

.band--paper  { --band-bg: var(--color-paper);   background: var(--band-bg); }
.band--paper2 { --band-bg: var(--color-paper-2); background: var(--band-bg); }
.band--green  { --band-bg: var(--color-band);    background: var(--band-bg); }
.band--accent { --band-bg: var(--color-accent);  background: var(--band-bg); }

/* 面ごとにリズムを変える（全セクション同じパディングにしない） */
.band--green  { padding-block: var(--space-3xl) var(--space-2xl); }
.band--accent { padding-block: var(--space-2xl) var(--space-3xl); }
.band--tight  { padding-block: var(--space-md) var(--space-2xl); }

/* 濃い面ではコントラストを確保するため、文字色を一段沈める */
.band--green,
.band--accent { --color-muted: oklch(42% 0.018 130); }
.band--green  { --color-rule: var(--color-rule-2); }

/* ==========================================================================
   05. nav — N9 edge-aligned minimal
   ========================================================================== */

.masthead {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--gut);
  background: var(--color-paper);
}

.masthead__mark {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-ink);
  text-decoration: none;
  min-width: 0;
}
.masthead__logo {
  flex: none;
  display: block;
  width: auto;
}
.masthead__logo img { width: auto; height: 2.5rem; }
.masthead__mark-text { display: grid; gap: 1px; min-width: 0; }
.masthead__mark-ja {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.masthead__mark-en {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--color-deep);
  line-height: 1.3;
}

.masthead__cta {
  flex: none;
  white-space: nowrap;
  padding: 0.55em 1.15em;
  border: 1px solid var(--color-deep);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-deep);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .masthead__cta:hover { background: var(--color-deep); color: var(--color-paper); }
}
.masthead__cta:active { transform: translateY(1px); }

/* ==========================================================================
   06. 見出し（S2 hanging）— 英字ラベルは見出しの真上、同じ列に積む
   ========================================================================== */

.head { margin-block-end: var(--space-md); }

.head--rule {
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

/* 英字ラベルはセクション右上に置いた大きな円。
   .band の overflow: hidden により、円の左下だけが見切れて映る。
   セレクタは `.band > *:not(.deco)` と同じ詳細度にして position を上書きする */
.band > .label {
  position: absolute;
  top: -5.25rem;
  right: -5.25rem;
  width: 10.5rem;
  height: 10.5rem;
  margin: 0;
  z-index: var(--z-ring);
  pointer-events: none;
  /* 消えるタイミングを波線に合わせる：波より上を隠し、波より下だけを見せる。
     1層目＝波の下側の形（波の位置に合わせて置く）／2層目＝それより下の全面 */
  -webkit-mask-image: var(--edge-wave-inv), linear-gradient(#fff, #fff);
          mask-image: var(--edge-wave-inv), linear-gradient(#fff, #fff);
  /* .edge は top:-1px なので、切り抜きの高さもそこに揃える */
  --label-cut: calc(5.25rem - 1px);
  -webkit-mask-size: 80px var(--edge-wave-h), 100% calc(100% - var(--label-cut) - var(--edge-wave-h));
          mask-size: 80px var(--edge-wave-h), 100% calc(100% - var(--label-cut) - var(--edge-wave-h));
  -webkit-mask-position: 0 var(--label-cut), 0 100%;
          mask-position: 0 var(--label-cut), 0 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
}
/* 上に面がない（＝波線がない）FVでは切り抜かない */
.fv > .label { -webkit-mask-image: none; mask-image: none; }

.label .ring text {
  font-size: 15px;
  letter-spacing: 0.16em;
}
.label .ring { animation-duration: 26s; }

.head__title,
.fv__title {
  font-style: normal;              /* 見出しは常にローマン体 */
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: 1.45;
  overflow-wrap: anywhere;
  min-width: 0;
}
.head__title { font-size: var(--text-display-s); }
.fv__title   { font-size: var(--text-display); }

/* ==========================================================================
   07. 本文まわり
   ========================================================================== */

.body, .lede {
  font-size: var(--text-body);
  line-height: var(--leading);
}
.body + .body,
.body + .figure,
.lede + * { margin-block-start: var(--space-md);margin-block-end: var(--space-md); }

.body--lead { font-weight: 700; }

.lede { margin-block: var(--space-md); }

mark {
  background: none;
  background-image: linear-gradient(to top, var(--color-accent) 0.42em, transparent 0.42em);
  color: inherit;
  font-weight: 700;
}
.band--accent mark {
  background-image: linear-gradient(to top, var(--color-band-key) 0.42em, transparent 0.42em);
}

.num {
  font-family: var(--font-en);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  padding-inline: 0.1em;
  background-image: linear-gradient(to top, var(--color-accent) 0.28em, transparent 0.28em);
}
.band--accent .num,
.band--green .num {
  background-image: linear-gradient(to top, var(--color-paper) 0.28em, transparent 0.28em);
}

.caption {
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.caption--hint { text-align: start; }

/* 共感セクションの「声」 */
.voice {
  position: relative;
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 2px solid var(--color-rule);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}
.voice + .voice { margin-block-start: var(--space-xs); }
.voice--offset { margin-inline-start: var(--space-lg); }
.voice + .body { margin-block-start: var(--space-lg); }

/* ==========================================================================
   08. 写真（すべて object-fit: cover でトリミング許容）
   ========================================================================== */

.ph {
  display: block;
  overflow: hidden;
  border: 2px solid var(--color-deep);
  border-radius: var(--blob-1);
  background: var(--color-paper-2);
}


.ph--b2 { border-radius: var(--blob-2); }
.ph--b3 { border-radius: var(--blob-3); }
.ph--b4 { border-radius: var(--blob-4); }
.ph--b5 { border-radius: var(--blob-5); }
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--2x1 { aspect-ratio: 2 / 1; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--1x1 { aspect-ratio: 1 / 1; }

.figure { position: relative; margin-block: var(--space-lg) var(--space-md); }
.figure--wide  { margin-inline: calc(var(--gut) * -0.5); }
.figure--inset { margin-block-start: var(--space-sm); margin-inline-end: var(--space-2xl); }

/* 複数枚の写真は横に流れ続けるループ（4カラムのグリッドにはしない） */
.marquee {
  margin-block-start: var(--space-lg);
  margin-inline: calc(var(--gut) * -1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__set {
  display: flex;
  gap: var(--space-xs);
  padding-inline-end: var(--space-xs);
}
.ph--marq {
  flex: none;
  width: clamp(150px, 42vw, 190px);
  aspect-ratio: 1 / 1;
}
@keyframes marquee { to { transform: translateX(-50%); } }

@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}


/* ==========================================================================
   09. あしらい（浮遊）
   参考2の idle bounce を踏襲。1周期のうち動くのは最初の 14% だけで、残りは静止。
   ========================================================================== */

.deco {
  position: absolute;
  z-index: var(--z-deco);
  pointer-events: none;
  user-select: none;
  width: clamp(64px, 19vw, 96px);
  rotate: var(--rot, 0deg);      /* 子どもの落書きのように少し傾ける */
}
.deco img { width: 100%; height: auto; }

.deco--char { width: clamp(80px, 24vw, 118px); z-index: calc(var(--z-deco) + 1); }
.deco--char-loose { width: clamp(72px, 21vw, 104px); }

/* 傾き（rotate）と動き（scale/translate/rotate）が打ち消し合わないよう、
   傾きは picture、アニメーションは img に分けている。
   1種類のバウンドを全部に掛けず、性格の違う待機モーションを配る。 */
[data-motion="hop"]       img { animation: idle-hop    7s   var(--ease-in-out) infinite; }
[data-motion="sway"]      img { animation: idle-sway   6s   var(--ease-in-out) infinite; }
[data-motion="sway-slow"] img { animation: idle-sway-s 8.5s var(--ease-in-out) infinite; }
[data-motion="float"]     img { animation: idle-float  5.5s var(--ease-in-out) infinite; }
[data-motion="dance"]     img { animation: idle-dance  9s   var(--ease-in-out) infinite; }
[data-motion="twist"]     img { animation: idle-twist  8s   var(--ease-in-out) infinite; }
[data-motion="nibble"]    img { animation: idle-nibble 6.5s linear             infinite; }
[data-motion="float-s"]   img { animation: idle-float-s 7.5s var(--ease-in-out) infinite; }

/* あしらいごとに開始をずらして、一斉に動き出さないようにする。
   animation ショートハンドが delay を 0 に戻すので、必ずこの後に置くこと */
.deco img       { animation-delay: var(--delay, 0s); }
.deco--slow img { animation-delay: calc(var(--delay, 0s) + 1.4s); }

@keyframes idle-hop {
  0%, 28%, 100% { scale: 1 1;    translate: 0 0; }
  4%            { scale: 1 0.93; translate: 0 0; }
  9%            { scale: 1 1.03; translate: 0 -5px; }
  13%           { scale: 1 0.95; translate: 0 0; }
  16%           { scale: 1 1.02; translate: 0 -4px; }
  20%           { scale: 1 0.96; translate: 0 0; }
  24%           { scale: 1 1;    translate: 0 0; }
}
@keyframes idle-sway   { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes idle-sway-s { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes idle-float   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes idle-float-s { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes idle-dance  { 0%, 40%, 100% { rotate: 0deg; } 8%, 24% { rotate: 6deg; } 16%, 32% { rotate: -6deg; } }
@keyframes idle-twist  { 0%, 18%, 100% { rotate: 0deg; } 6% { rotate: 11deg; } 12% { rotate: -9deg; } }
@keyframes idle-nibble { 0%, 6%, 12%, 18%, 100% { translate: 0 0; } 3%, 9%, 15% { translate: 0 -3px; } }

/* ==========================================================================
   09b. 画面内にある間だけループを回す
   （JSが data-loop-armed を付けた要素にだけ効く＝JSが動かない時は素の状態のまま）
   ========================================================================== */

[data-loop-armed]:not(.is-inview) img,
[data-loop-armed]:not(.is-inview) .ring,
[data-loop-armed]:not(.is-inview) .point__ring,
[data-loop-armed]:not(.is-inview) .marquee__track,
[data-loop-armed]:not(.is-inview) .slideshow__slide,
[data-loop-armed]:not(.is-inview) .trail__runner,
[data-loop-armed]:not(.is-inview) .trail__step { animation-play-state: paused; }

/* ==========================================================================
   09c. 写真の出現演出 — 面と同じ色の扉が左右にひらく（1回だけ・ループしない）
   ========================================================================== */

[data-door]::before,
[data-door]::after {
  content: "";
  position: absolute;
  inset-block: -1px;
  width: 50.5%;
  z-index: var(--z-ring);
  background: var(--band-bg, var(--color-paper));
  pointer-events: none;
}
[data-door]::before { left: 0; }
[data-door]::after  { right: 0; }

[data-door].is-visible::before { animation: door-open-l 1.15s cubic-bezier(0.45, 0.03, 0.51, 0.96) both; }
[data-door].is-visible::after  { animation: door-open-r 1.15s cubic-bezier(0.45, 0.03, 0.51, 0.96) both; }

@keyframes door-open-l { 0% { translate: 0 0; } 43% { translate: -98.2% 0; } 100% { translate: -100% 0; } }
@keyframes door-open-r { 0% { translate: 0 0; } 43% { translate:  98.2% 0; } 100% { translate:  100% 0; } }

/* 写真の縁に添える配置。テキストの帯には入らないので文字と重ならない */
/* 列の外にはみ出すと .band の overflow で切れるため、写真の内側に収める */
.deco--on-l  { left:  0.5rem; top: 50%; translate: 0 -50%; }
.deco--on-r  { right: 0.5rem; top: 50%; translate: 0 -50%; }
.deco--on-tl { left:  0.5rem; top:    -0.9rem; }
.deco--on-br { right: 0.5rem; bottom: -0.2rem; }

/* 配置：すべて下寄せ＋列の辺から半分はみ出させる（見出しの上には置かない） */
.deco--drift-l  { left:  -1.75rem; bottom: var(--space-lg); }
.deco--drift-l2 { left:  -2.6rem;  bottom: 34%; }
.deco--drift-r  { right: -1.75rem; bottom: var(--space-2xl); }
.deco--drift-r2 { right: -2.6rem;  bottom: 12%; }
.deco--foot-l   { left:  var(--space-sm); bottom: var(--space-xs); z-index:10; }
.deco--foot-r   { right: -1.25rem; bottom: var(--space-2xs); }





.fv__char {
  position: absolute;
  right: -0.25rem;
  bottom: -1.75rem;
  z-index: var(--z-raised);
}
.figure__char {
  position: absolute;
  left: -0.5rem;
  bottom: -1.5rem;
  z-index: var(--z-raised);
}

/* ==========================================================================
   10. FV — 中央揃え。上にテキスト、中央に写真、下にテキストとCTA。
        周囲にあしらいを散らす（参考画像のレイアウト）
   ========================================================================== */

.fv { padding-block: var(--space-lg) var(--space-3xl); }

.fv__inner {
  position: relative;
  z-index: var(--z-text);
  text-align: center;
}
.fv__figure {
  position: relative;
  z-index: var(--z-photo);
  margin-block: var(--space-lg) var(--space-xl);
}
.fv .lede { margin-block: 0 var(--space-lg); }

/* FV周囲のあしらい。列の辺から半分はみ出させ、写真にも重ねる */
.fv > .deco { width: clamp(52px, 15vw, 78px); }
/* 列からはみ出すと .band の overflow で切れるため、すべて内側に置く。
   傾き（--rot）のぶん外接矩形が広がるので、その逃げも見込んでいる */
.fv > .deco--f1  { top: 1%;    left:  0.6rem; }
.fv > .deco--f2  { top: 0.5%;  right: 0.6rem; }
.fv > .deco--f3  { top: 13%;   left:  0.6rem; }
.fv > .deco--f4  { top: 11%;   right: 0.6rem; }
.fv > .deco--f5  { top: 36%;   left:  0.6rem; }
.fv > .deco--f6  { top: 31%;   right: 0.6rem; }
.fv > .deco--f7  { top: 45%;   left:  0.6rem; }
.fv > .deco--f8  { top: 46%;   right: 0.6rem; }
.fv > .deco--f9  { bottom: 5%; left:  0.6rem; }
.fv > .deco--f10 { bottom: 3%; right: 0.6rem; }

/* ==========================================================================
   10b. クロージング — FVと同じ中央揃え。上に見出しとリード、その下に応募フォーム。
        キャラクターはフォームの右肩に添える
   ========================================================================== */

.closing__inner {
  position: relative;
  z-index: var(--z-text);
  text-align: center;
}
.closing__title {
  font-size: var(--text-display-s);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.closing .lede { margin-block: var(--space-md) 0; }

/* LINE応募（停止中）: 元のLINEボタンのスタイル
.closing__cta {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-block: var(--space-xl);
}
.closing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 5.5rem;
  padding-block: 1.3em;
  padding-inline: clamp(1.5rem, 8vw, 2.6em);   （360px幅でも1行に収める）
  border-radius: var(--blob-3);
  background: var(--color-deep);
  color: var(--color-paper);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--color-shadow);
  outline: 2px dashed var(--color-deep);
  outline-offset: 6px;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .closing__btn:hover { background: var(--color-deep-hover); }
}
.closing__btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.closing__btn:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 6px;
  border-radius: var(--blob-3);
}
.closing__btn-icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}
*/

/* 応募フォーム。見出しは中央揃えのまま、フォームだけ左揃えで読みやすい幅に収める */
.closing__form {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  margin-block: var(--space-lg) 0;
  text-align: start;
}
.closing__form .form-wrap { margin-block-start: 0; }

/* キャラクターはフォームの右肩に添える（入力欄・ボタンには重ねない） */
.closing__char {
  position: absolute;
  right: -1rem;
  top: -3.75rem;
  width: clamp(56px, 16vw, 80px);
  z-index: var(--z-raised);
  pointer-events: none;
}

/* 周囲のあしらい。FVと同じく列の内側に置き、左右交互に散らす */
.closing > .deco { width: clamp(48px, 13vw, 68px); }
.closing > .deco--c1 { top: 9%;     left:  0.6rem; }
.closing > .deco--c2 { top: 30%;    right: 0.6rem; }
.closing > .deco--c3 { top: 44%;    left:  0.6rem; }
.closing > .deco--c4 { top: 62%;    right: 0.6rem; }
.closing > .deco--c5 { bottom: 6%;  left:  0.6rem; }
.closing > .deco--c6 { bottom: 4%;  right: 0.6rem; }

/* ==========================================================================
   11. POINT 表組み
   ========================================================================== */

.points {
  position: relative;
  margin-block: var(--space-xl) var(--space-2xl);
  padding: var(--space-lg) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
/* 囲みの外側にはみ出させて配置する */
.points > .deco { width: clamp(52px, 15vw, 72px); }
.points > .deco--nw { top: -2.6rem; left:  -1rem; }
.points > .deco--ne { top: -2.9rem; right: -1rem; }
.points > .deco--sw { bottom: -2.6rem; left:  -1rem; }
.points > .deco--se { bottom: -3.2rem; right: -1rem; }
.points__label {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--color-deep);
  margin-block-end: var(--space-2xs);
}
.points__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-sm);
}
.points__grid li {
  padding-block: var(--space-xs);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  font-size: 13px;
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}

/* POINT の各項目にアイコンを添える。切り抜きの3点は薄いグリーンの円に、
   背景ありの一枚絵（持ち帰り仕事）は円の中いっぱいに収めて、4つの見え方を揃える */
.points__grid li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.points__icon {
  flex: none;
  display: block;
  overflow: hidden;
  width: clamp(2.25rem, 9.5vw, 2.75rem);
  height: clamp(2.25rem, 9.5vw, 2.75rem);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-deep);
  background: var(--color-mint);
}
.points__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.points__text { min-width: 0; }

@media (min-width: 26rem) {
  .points__grid { column-gap: var(--space-md); }
}

/* ==========================================================================
   11b. 特徴 — Point 1〜4 を1セクションに統合し、番号バッジで見分けられるようにする
   ========================================================================== */

.points-list {
  display: grid;
  /* minmax(0,1fr) 必須。auto のままだと中のマーキー(max-content)に
     引きずられてトラックが1400px超に広がり、本文がはみ出す */
  grid-template-columns: minmax(0, 1fr);
}

.point {
  position: relative;
  min-width: 0;
  padding-block: var(--space-2xl);
}
.point:first-child { padding-block-start: var(--space-md); }
.point:not(:first-child) { padding-block-start: var(--space-md); }

/* 点線の上をイラストが行き来する */
.trail {
  position: relative;
  container-type: inline-size;
  height: 3rem;
  margin-block: var(--space-md) var(--space-lg);
  margin-inline: calc(var(--gut) * -0.3);
}
/* 走った跡のような短い破線。丸い点より速さが出る */
.trail::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-image: linear-gradient(90deg, var(--color-rule) 0 9px, transparent 9px 15px);
  background-size: 15px 2px;
  background-repeat: repeat-x;
}
.trail__runner {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: clamp(38px, 11vw, 52px);
  /* コマ送り（9歩）で横へ進む */
  animation: trail-move 13s steps(9, jump-none) infinite;
}
/* 反転は端に着いたときだけ。歩くたびの傾きは別プロパティなので同時に掛けられる */
.trail__step {
  display: block;
  animation: trail-flip 13s steps(1, end) infinite,
             trail-tilt 1.44s steps(1, end) infinite;
}
/* 元絵が左向きなので画像だけ反転して進行方向に向ける。動き（.trail__step）には触れない */
.trail__runner img { width: 100%; height: auto; scale: -1 1; }

@keyframes trail-move {
  0%,  6%   { translate: 0 0; }
  48%, 52%  { translate: calc(100cqw - 100%) 0; }
  94%, 100% { translate: 0 0; }
}
@keyframes trail-flip {
  0%   { scale:  1 1; }
  50%  { scale: -1 1; }
  100% { scale:  1 1; }
}
@keyframes trail-tilt {
  0%   { rotate:  5deg; }
  50%  { rotate: -5deg; }
  100% { rotate:  5deg; }
}

/* 数字バッジの右に見出しを並べる */
.point__head {
  position: relative;
  z-index: var(--z-text);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}
.point__no { flex: none; margin: 0; }
.point__head .point__title { margin: 0; min-width: 0; }
.point__badge {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4rem, 17vw, 5.25rem);
  height: clamp(4rem, 17vw, 5.25rem);
  border-radius: var(--radius-full);
  background: var(--color-mint);
  border: 2px solid var(--color-deep);
}
.band--green .point__badge,
.band--accent .point__badge { background: var(--color-paper); }

/* 円周にそって回り続けるテキスト */
.ring, .point__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ring-spin 18s linear infinite;
}
.ring text, .point__ring text {
  fill: var(--color-deep);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  dominant-baseline: middle;
}
@keyframes ring-spin { to { rotate: 360deg; } }


/* 中央の1枠のなかで写真が切り替わる（横スクロールのストリップは廃止） */
.slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-block: var(--space-lg) var(--space-md);
}
.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: slide-fade 13.5s var(--ease-in-out) infinite backwards;
  animation-delay: calc(var(--i) * 4.5s);
}
@keyframes slide-fade {
  0%     { opacity: 0; }
  3%     { opacity: 1; }
  30%    { opacity: 1; }
  33.34% { opacity: 0; }
  100%   { opacity: 0; }
}

.point__num {
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* 塗りは紙色、輪郭は濃い色。数字を線で表現する */
  color: var(--color-paper);
  -webkit-text-stroke: 2.5px var(--color-deep);
          text-stroke: 2.5px var(--color-deep);
  paint-order: stroke fill;
}

.point__title {
  font-style: normal;
  font-weight: 900;
  font-size: var(--text-point);
  letter-spacing: var(--track-tight);
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-block-end: var(--space-sm);
}

/* ==========================================================================
   11c. 社員インタビュー — 横スクロールのカード
   列いっぱいに広げず、次のカードの端を少しだけ見せて「まだ続く」ことを示す。
   スナップは中央そろえ。左右の矢印はマウス環境にだけ出す（指では不要なため）。
   ========================================================================== */

.cards {
  position: relative;
  z-index: var(--z-text);
  margin-block: var(--space-lg) var(--space-2xs);
}

/* 列の外まで伸ばして端まで流し、内側の余白はスクロール側で持たせる */
.cards__track {
  display: flex;
  gap: var(--space-sm);
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  padding-block: var(--space-3xs) var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* スクロールバーは出さない（代わりに矢印とスワイプの案内を置く） */
.cards__track::-webkit-scrollbar {
  display: none;
}

/* キーボードでも横に送れる領域なので、フォーカスは必ず見せる */
.cards__track:focus-visible {
  outline: 2px solid var(--color-deep);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.card {
  flex: none;
  display: flex;
  flex-direction: column;
  width: clamp(15rem, 78vw, 18.5rem);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  scroll-snap-align: start;
}

.card__media {
  position: relative;
  margin-block-end: var(--space-sm);
}

.card__photo {
  width: 100%;
}

/* 写真の左下に番号。POINT のバッジと同じ意匠を小さくしたもの */
.card__no {
  position: absolute;
  left: -0.35rem;
  bottom: -0.55rem;
  z-index: var(--z-deco);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-deep);
  border-radius: var(--radius-full);
  background: var(--color-mint);
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-deep);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card__role {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--color-deep);
}

.card__title {
  margin-block: var(--space-2xs) var(--space-xs);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
}

.card__text {
  flex: 1;
  font-size: var(--text-body);
  line-height: 1.85;
}

.card__name {
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-2xs);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* 矢印は指で操作する環境には出さない（スワイプで足りるため） */
.cards__nav {
  display: none;
}

.cards__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--color-deep);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  color: var(--color-deep);
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
}

.cards__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .cards__nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2xs);
    margin-block-start: var(--space-2xs);
  }

  .cards__btn:hover:not([disabled]) {
    background: var(--color-mint);
  }
}

/* ==========================================================================
   11d. 園の風景 — 上下2列が逆向きに流れ続ける帯
   Point 2 の外観ループと同じ仕組みを使い、速度だけ落として背景寄りにする。
   ========================================================================== */

/* 写真を見せるだけの面なので、上下の余白は他の面より詰める */
.band.band--strip {
  padding-block: var(--space-xl) var(--space-xl);
}

.head__title--sub {
  font-size: var(--text-point);
}

.scenery {
  position: relative;
  z-index: var(--z-photo);
  margin-block-start: var(--space-md);
}

.scenery .marquee {
  margin-block-start: 0;
}

.scenery .marquee + .marquee {
  margin-block-start: var(--space-xs);
}

.marquee--slow .marquee__track {
  animation-duration: 52s;
}

/* 2列目は逆向き。上下で流れが交差して、面全体がゆっくり動いて見える */
.marquee--rev .marquee__track {
  animation-direction: reverse;
}

.ph--marq-s {
  width: clamp(120px, 33vw, 150px);
}

/* ==========================================================================
   12. 募集要項 / 会社概要（F3 tabular spec sheet）
   ========================================================================== */

.spec { display: grid; }

.spec dt {
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--color-deep);
}
.spec dd {
  padding-block: var(--space-2xs) var(--space-md);
  font-size: var(--text-body);
}
.spec dd p + p { margin-block-start: var(--space-3xs); }
.spec dd a { color: var(--color-deep); }

.spec__list { display: grid; gap: var(--space-3xs); }
.spec__list li { position: relative; padding-inline-start: 1em; }
.spec__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-deep);
}

.spec__note {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.spec__note--inline { display: inline; margin-inline-start: 0.4em; }

@media (min-width: 26rem) {
  .spec { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 0; }
  .spec dt { grid-column: 1; padding-inline-end: var(--space-md); }
  .spec dd {
    grid-column: 2;
    padding-block: var(--space-md);
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
}

/* ==========================================================================
   13. ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0.9em 1.9em;
  border: 0;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
}

.btn--primary {
  background: var(--color-deep);
  color: var(--color-paper);
  box-shadow: 0 2px 0 0 var(--color-shadow-2);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-deep-hover); }
}
.btn--primary:active { transform: translateY(1px); box-shadow: none; }

.btn--submit { width: 100%; margin-block-start: var(--space-md); }

/* FVのCTAは丸ボタンではなく、ふくらみのある形＋点線の輪 */
.btn--blob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0.9em 1.9em;
  border: 0;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-paper);
  box-shadow: 0 2px 0 0 var(--color-shadow-2);
	  position: relative;
  border-radius: 24% 52% 17% 44% / 54% 50% 50% 46%;
  padding: 1.15em 2.4em;
	background: #F5A338;
	border: 2px dashed #F5A338;
outline: 2px dashed #F5A338;
outline-offset: 4px;
}


.btn:disabled,
.btn[data-state="loading"] { cursor: not-allowed; opacity: 0.72; }
.btn[data-state="loading"] .btn__label { opacity: 0.65; }

.btn__spinner { display: none; }
.btn[data-state="loading"] .btn__spinner {
  display: block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   14. フォーム
   ========================================================================== */

.form-wrap { margin-block-start: var(--space-lg); }
.form { display: grid; gap: var(--space-md); }

.field { display: grid; gap: var(--space-3xs); }

.field__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.req, .opt {
  flex: none;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-full);
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.req { background: var(--color-deep); color: var(--color-paper); }
.opt { background: var(--color-surface); color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.7em 0.9em;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: max(1rem, var(--text-body));   /* iOSのズーム防止 */
  line-height: 1.6;
  transition: border-color var(--dur-short) var(--ease-out);
}
.field__input::placeholder { color: var(--color-muted); opacity: 1; }
.field__input:hover { border-color: var(--color-rule-2); }
.field__textarea { min-height: 8rem; resize: vertical; }
.field__select {
  appearance: none;
  padding-inline-end: 2.4em;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15em) 1.35em, calc(100% - 0.8em) 1.35em;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field--error .field__input { border-color: var(--color-deep); border-width: 2px; }
.field__error {
  display: flex;
  gap: 0.4em;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-deep);
}
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: var(--radius-full); background: var(--color-deep); color: var(--color-accent); font-size: 0.85em; }

.form__status:empty { display: none; }
.form__status {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.thanks { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); text-align: center; }
.thanks__mark { display: grid; place-items: center; color: var(--color-deep); }
.thanks__tick { stroke-dasharray: 46; stroke-dashoffset: 46; animation: tick 520ms var(--ease-out) 120ms forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.thanks__title { font-size: var(--text-lg); font-weight: 900; letter-spacing: var(--track-tight); }
.thanks__body { font-size: var(--text-body); }

/* ==========================================================================
   15. sticky CTA（C4）— FVを過ぎてから出現
   ========================================================================== */

.cta-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--gut);
  padding-block-end: max(var(--space-xs), env(safe-area-inset-bottom));
  background: var(--color-paper);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  transform: translateY(110%);
  transition: transform var(--dur-long) var(--ease-out);
}
.cta-sticky.is-in { transform: none; }

.cta-sticky__line {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
}
.cta-sticky__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6em 1.3em;
  border-radius: var(--radius-full);
  background: var(--color-deep);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta-sticky__btn:hover { background: var(--color-deep-hover); }
}
.cta-sticky__btn:active { transform: translateY(1px); }

/* stickyバーの分だけ本文末尾に余白を足す */
.foot { padding-block-end: calc(var(--space-3xl) + env(safe-area-inset-bottom)); }

/* ==========================================================================
   16. footer — Ft5 statement
   ========================================================================== */

.foot {
  position: relative;
  overflow: hidden;
  padding-inline: var(--gut);
  padding-block-start: var(--space-2xl);
}
.foot__line {
  font-size: var(--text-statement);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: 1.5;
  max-width: 22ch;
}
.foot__meta {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}
.foot__logo { display: block; }
.foot__logo img { width: auto; height: 6.5rem; }
.foot__addr { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.03em; }

/* ==========================================================================
   17. スクロールリビール（演出0）
   初期非表示は opacity のみ。visibility / aria-hidden は使わない
   （スクリーンリーダーが読み上げられなくなるため）。
   一度 is-visible が付いたら外さない。
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* JSが動かない環境では最初から表示する */
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   18. reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .deco img { animation: none; }
  /* 扉は出さず、写真を最初から見せる */
  [data-door]::before, [data-door]::after { display: none; }
  .ring, .point__ring { animation: none; }
  /* 切り替えを止め、3枚を縦に並べて全部見せる */
  .slideshow { aspect-ratio: auto; display: grid; gap: var(--space-xs); }
  .slideshow__slide { position: static; opacity: 1; animation: none; }
  /* 流れる写真は止め、手で横スクロールできるようにする */
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; }
  .marquee__set:last-child { display: none; }
  /* 点線の上のイラストは止めて、左端に置いたままにする */
  .trail__runner, .trail__step { animation: none; }
  .thanks__tick { animation: none; stroke-dashoffset: 0; }
  .cta-sticky {
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms linear, visibility 150ms linear;
  }
  .cta-sticky.is-in { opacity: 1; visibility: visible; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    transition-duration: 150ms !important;
  }
  .btn[data-state="loading"] .btn__spinner { animation-duration: 700ms !important; }
}

/* ==========================================================================
   19. Contact Form 7
   CF7 が出力するマークアップに、静的版のフォーム意匠をそのまま被せる。
   （項目の並び・ラベル・必須バッジは CF7 のフォーム定義側で組む。README 参照）
   ========================================================================== */

.form-wrap .wpcf7 { margin: 0; }

.wpcf7-form {
  display: grid;
  gap: var(--space-md);
}

/* CF7 は input を span で包むので、グリッドの中で1行として振る舞わせる */
.wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

/* 入力欄。クラスは CF7 のフォーム定義で class:field__input を付ける */
.wpcf7-form .field__input { width: 100%; }

/* 未入力・形式エラー */
.wpcf7-form .field__input.wpcf7-not-valid {
  border-color: var(--color-deep);
  border-width: 2px;
}
.wpcf7-not-valid-tip {
  display: flex;
  gap: 0.4em;
  margin-block-start: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-deep);
}
.wpcf7-not-valid-tip::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius-full);
  background: var(--color-deep);
  color: var(--color-accent);
  font-size: 0.85em;
}

/* 送信結果の帯（.form__status と同じ見た目に） */
.wpcf7-response-output {
  margin: 0 !important;
  padding: var(--space-xs) var(--space-sm) !important;
  border: var(--rule-hair) solid var(--color-rule) !important;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-ink);
}
.wpcf7 form.sent .wpcf7-response-output { display: none; }   /* 成功時は .thanks を出す */

/* CF7 標準のスピナーは使わず、ボタン内のローディングに寄せる */
.wpcf7-spinner { display: none !important; }

/* CF7 の [submit] は <input> なので中に要素を置けない。
   ボタンを包む .submit-wrap にスピナーを重ねて、静的版と同じ送信中表現にする */
.wpcf7-form .submit-wrap {
  position: relative;
  display: grid;
  margin-block-start: var(--space-md);
}
.wpcf7-form .submit-wrap .btn--submit { width: 100%; margin-block-start: 0; }
.wpcf7-form .submit-wrap .btn__spinner {
  position: absolute;
  inset-inline-end: 1.5em;
  inset-block-start: 50%;
  margin-block-start: -0.5em;
  display: none;
  color: var(--color-paper);
}

.wpcf7-form.submitting .btn--submit {
  cursor: not-allowed;
  opacity: 0.72;
}
.wpcf7-form.submitting .submit-wrap .btn__spinner {
  display: block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7-form.submitting .submit-wrap .btn__spinner { animation-duration: 700ms !important; }
}

.tabs {
  margin-block-start: var(--space-md);
  /* あしらい（--z-deco）より前に出す。可読性は本文と同じ扱い */
  z-index: var(--z-text);
}

/* --- タブ列 -------------------------------------------------------------- */

/* JSが data-tabs-ready を付けるまでタブは出さない */
.tabs__bar {
  display: none;
}

[data-tabs-ready] .tabs__bar {
  display: flex;
  gap: var(--space-2xs);
  /* 列の外まで伸ばして端まで流し、内側の余白はスクロール側で持たせる */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  padding-block: var(--space-3xs) var(--space-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gut);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* スクロールバーは出さない（矢印キーとスワイプで送る） */
.tabs__bar::-webkit-scrollbar {
  display: none;
}

.tabs__btn {
  flex: 1 0 auto;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 7rem;
  min-height: 48px;
  padding: 0.55em 1.2em;
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: inherit;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: center;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.tabs__btn-ja {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: var(--track-tight);
}

.tabs__btn-en {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
}

/* 選択中。下に小さな三角を出して、どの面につながっているかを示す */
.tabs__btn[aria-selected="true"] {
  border-color: var(--color-deep);
  background: var(--color-mint);
  color: var(--color-deep);
}

.tabs__btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  translate: -50% 0;
  width: 0.9rem;
  height: 0.5rem;
  background: var(--color-deep);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}

.tabs__btn[aria-selected="true"]::after {
  opacity: 1;
}

.tabs__btn:active {
  transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  .tabs__btn:hover:not([aria-selected="true"]) {
    border-color: var(--color-rule-2);
    color: var(--color-ink);
  }
}

/* 濃い面では下地を紙色にする（Point のバッジと同じ扱い） */
.band--green .tabs__btn,
.band--accent .tabs__btn {
  background: var(--color-paper);
}

.band--green .tabs__btn[aria-selected="true"],
.band--accent .tabs__btn[aria-selected="true"] {
  background: var(--color-mint);
}

/* --- 中身 ---------------------------------------------------------------- */

/* JSが動かない時は全職種が縦に並ぶ。間隔だけ空けておく */
.tabs__panel + .tabs__panel {
  margin-block-start: var(--space-2xl);
}

[data-tabs-ready] .tabs__panel + .tabs__panel {
  margin-block-start: 0;
}

/* 切り替えたことが分かる程度の短い出現。ループはしない */
[data-tabs-ready] .tabs__panel:not([hidden]) {
  animation: tab-in 360ms var(--ease-out) both;
}

@keyframes tab-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

/* 職種名。タブが出ている時はタブ側が見出しになるので、読み上げ用に隠す */
.tabs__panel-title {
  margin-block-end: var(--space-sm);
  font-size: var(--text-point);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: 1.5;
}

[data-tabs-ready] .tabs__panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 職種ごとの一言（表の上に置く補足） */
.tabs__panel-lede {
  margin-block-end: var(--space-md);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading);
}

/* 表の下に置く職種ごとのCTA */
.tabs__panel-cta {
  margin-block-start: var(--space-lg);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  [data-tabs-ready] .tabs__panel:not([hidden]) { animation: none; }
}