/* ============================================================
   トークン体系（design-system-tokens.md の順序で定義）
   ①プリミティブ → ②セマンティック → ③タイプランプ → ④スペーシング → ⑤エレベーション
   ここに無い値を本文中で直接書かないこと。
   ============================================================ */
:root{
  /* ── ① プリミティブ（実際の色。意味を持たない） ── */
  --c-paper-50:#FAF8F3;  --c-paper-100:#F8F6F1; --c-paper-200:#F1EEE6; --c-paper-300:#E9E5DB;
  --c-warmwhite:#FCFBF7;
  --c-ink-900:#26231F;   --c-ink-700:#463F37;   --c-ink-600:#665F55;   --c-ink-500:#6F6658;
  --c-indigo-700:#3B5068;--c-indigo-300:#A9B4C2;
  --c-slate-900:#21262E; --c-slate-400:#8E97A1;
  --c-line-200:#DAD3C4;  --c-line-700:#3A414A;

  /* ── ② セマンティック（役割。①を参照する） ── */
  --bg-base:var(--c-paper-100);
  --bg-alt:var(--c-paper-200);
  --bg-card:var(--c-warmwhite);
  --bg-invert:var(--c-slate-900);
  --text-primary:var(--c-ink-900);
  --text-body:var(--c-ink-700);
  --text-muted:var(--c-ink-600);     /* 補足テキスト専用。背景に使わない */
  --text-label:var(--c-ink-500);     /* ラベル専用 */
  --text-invert:var(--c-paper-50);
  --text-invert-body:#B9B5AD;
  --text-invert-muted:var(--c-slate-400);
  --accent:var(--c-indigo-700);
  --accent-on-dark:var(--c-indigo-300);
  --border-default:var(--c-line-200);
  --border-invert:var(--c-line-700);

  /* ── ③ タイプランプ（7段。ここから選ぶ。その場で数字を決めない） ── */
  --fs-display:clamp(34px,4.6vw,58px); --lh-display:1.38; --ls-display:.025em;
  --fs-h2:36px;    --lh-h2:1.5;    --ls-h2:.025em;
  --fs-h3:28px;    --lh-h3:1.5;    --ls-h3:.025em;
  --fs-lead:20px;  --lh-lead:1.75;
  --fs-body:15px;  --lh-body:1.85; --ls-body:.015em;
  --fs-sm:13px;    --lh-sm:1.8;
  --fs-label:12px; --ls-label:.1em;             /* 和文ラベル */
  --ls-label-latin:.2em;                        /* 欧文ラベル・ワードマーク */

  /* ── ④ スペーシング（8px系。半端な値を使わない） ── */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px;

  /* ── ⑤ エレベーション（3段） ── */
  --shadow-100:0 1px 2px rgba(38,35,31,.06);
  --shadow-200:0 8px 24px rgba(38,35,31,.09);
  --shadow-300:0 18px 48px rgba(38,35,31,.13);

  /* ── 書体（OS標準のみ） ── */
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDPMincho",serif;
  --sans:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  /* 2026-07-29: Georgia廃止（オールドスタイル数字で 3・4・5・7・9 が下がるため。片岡さん指示）。末尾の :root で最終定義 */
  --latin:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-base);color:var(--text-primary);font-family:var(--sans);
     font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
a{color:inherit}

.wrap{max-width:1160px;margin:0 auto;padding:0 5vw}
.sec{padding:var(--sp-12) 0}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--bg-invert);color:var(--text-invert)}

/* 見出しの共通形 */
.eyebrow{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);color:var(--text-label)}
.sec--dark .eyebrow{color:var(--accent-on-dark)}
.h2{margin-top:var(--sp-2);font-family:var(--serif);font-size:var(--fs-h2);font-weight:600;
    line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.sec--dark .h2{color:var(--text-invert)}
.lede{margin-top:var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-body);
      color:var(--text-body);max-width:36em}
.sec--dark .lede{color:var(--text-invert-body)}

/* 写真プレースホルダ */

/* ── ヘッダー ───────────────────── */
.hd{border-bottom:1px solid var(--border-default);background:var(--bg-base)}
.hd__in{max-width:1160px;margin:0 auto;padding:0 5vw;height:76px;display:flex;align-items:center;
        justify-content:space-between;gap:var(--sp-3)}
.hd__logo{font-family:var(--latin);font-size:19px;letter-spacing:var(--ls-label-latin);text-decoration:none}
.hd__logo small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;
        color:var(--text-muted);margin-top:2px}
.hd__nav{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.hd__nav a{text-decoration:none;color:var(--text-body)}
.hd__cta{background:var(--accent);color:var(--c-warmwhite)!important;padding:12px 22px;
        font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}

/* ── ヒーロー ───────────────────── */
.hero{padding:var(--sp-12) 0 0}
.btn{display:inline-block;background:var(--accent);color:var(--c-warmwhite);text-decoration:none;
        font-size:14px;padding:17px 34px;letter-spacing:.04em}
/* 写真が無い間はプレースホルダを主役にしない */
.hero__note{margin-top:var(--sp-1);font-size:var(--fs-label);color:var(--text-muted)}

/* ── 課題 ───────────────────────── */
.facts{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(3,1fr);
        border-top:1px solid var(--border-default)}
.facts div{padding:var(--sp-3) var(--sp-3) 0 0;border-right:1px solid var(--border-default)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--latin);font-size:44px;font-weight:400;line-height:1;color:var(--accent)}
.facts b small{font-family:var(--sans);font-size:20px}
.facts span{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}

/* ── 事業ブロック（左右非対称 5:7） ───────────── */
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;align-items:start}
.svc + .svc{margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--border-default)}
.svc__no{font-family:var(--latin);font-size:var(--fs-sm);letter-spacing:var(--ls-label-latin);color:var(--accent)}
.svc__h{margin-top:var(--sp-2);font-family:var(--serif);font-size:var(--fs-h3);font-weight:600;
        line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.svc__t{margin-top:var(--sp-2);font-family:var(--serif);font-size:var(--fs-lead);
        line-height:var(--lh-lead);color:var(--accent)}
.svc__b{margin-top:var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.svc__b p + p{margin-top:var(--sp-2)}
/* 2026-07-29: 訪問・出張費当社負担を本文に埋もれさせず1行で立てる（片岡さん指示）。
   意匠は既存の .facts__after（左に細いアクセント罫）に合わせている */
.svc__b .svc__travel{margin-top:var(--sp-3);padding-left:20px;border-left:3px solid var(--accent-strong)}
.svc__b .svc__travel b{display:block;font-size:var(--fs-lead);line-height:var(--lh-lead);
        font-family:var(--serif);font-weight:600;color:var(--accent)}
.svc__b .svc__travel span{display:block;margin-top:6px}
.svc__ph{height:420px}
.svc--rev .svc__ph{order:-1}

/* ステップ */
.steps{grid-column:1 / -1;margin-top:var(--sp-6);border-top:1px solid var(--border-default)}
.steps li{list-style:none;display:flex;gap:var(--sp-3);padding:18px 0;border-bottom:1px solid var(--border-default)}
.steps .t{font-family:var(--latin);font-size:var(--fs-sm);color:var(--accent);flex:none;width:88px;
        padding-top:3px;letter-spacing:.06em}
.steps .d{font-size:14px;line-height:1.9}
.steps .d b{display:block;font-weight:700;margin-bottom:3px}

/* ── 実績 ───────────────────────── */
.case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;
      align-items:start;margin-top:var(--sp-6)}
.case__num{font-family:var(--latin);font-size:80px;line-height:1;color:var(--text-invert);letter-spacing:-.01em}
.case__num small{font-family:var(--sans);font-size:20px;letter-spacing:0}
.case__cap{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--text-invert-muted);letter-spacing:.06em}
.case__ph{height:220px;margin-top:var(--sp-4)}
.case__b{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-invert-body)}
.case__b p + p{margin-top:var(--sp-2)}
.case__b em{font-style:normal;color:var(--text-invert);border-bottom:1px solid var(--border-invert);padding-bottom:1px}

/* ── 代表メッセージ（選定された01デザイン） ── */
.message{background:var(--bg-base);border-top:1px solid var(--border-default);
        border-bottom:1px solid var(--border-default);padding:var(--sp-12) 5vw}

/* ── 料金 ───────────────────────── */
.price{margin-top:var(--sp-6);border-top:1px solid var(--border-default)}
.price__row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-6);align-items:baseline;
        padding:22px 0;border-bottom:1px solid var(--border-default)}
.price__n{font-size:var(--fs-body);font-weight:700}
.price__n span{display:block;margin-top:6px;font-size:var(--fs-sm);font-weight:400;
        line-height:var(--lh-sm);color:var(--text-muted)}
.price__v{font-family:var(--latin);font-size:26px;white-space:nowrap;text-align:right}
.price__v small{font-family:var(--sans);font-size:var(--fs-sm)}
.price__note{margin-top:var(--sp-3);font-size:var(--fs-label);line-height:2;color:var(--text-muted)}

/* ── 助成金 ─────────────────────── */
.grant{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-6);align-items:start;margin-top:var(--sp-6)}
.grant__box{background:var(--bg-card);border:1px solid var(--border-default);padding:var(--sp-4);
        box-shadow:var(--shadow-100)}
.grant__box h3{font-family:var(--serif);font-size:var(--fs-lead);font-weight:600;line-height:var(--lh-lead)}
.grant__box p{margin-top:var(--sp-2);font-size:14px;line-height:var(--lh-body);color:var(--text-body)}

/* ── FAQ ────────────────────────── */
.faq{margin-top:var(--sp-6);border-top:1px solid var(--border-default)}
.faq__i{padding:var(--sp-3) 0;border-bottom:1px solid var(--border-default)}
.faq__q{display:flex;gap:14px;font-size:var(--fs-body);font-weight:700;line-height:1.8}
.faq__q i{font-style:normal;font-family:var(--latin);color:var(--accent)}
.faq__a{display:flex;gap:14px;margin-top:12px;font-size:14px;line-height:var(--lh-body);color:var(--text-body)}
.faq__a i{font-style:normal;font-family:var(--latin);color:var(--text-muted)}

/* ── CTA・フッター ──────────────── */
.cta{background:var(--accent);color:var(--c-warmwhite);padding:var(--sp-12) 5vw;text-align:center}
.cta h2{font-family:var(--serif);font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-h3)}
.cta p{margin-top:var(--sp-3);font-size:14px;line-height:var(--lh-body);color:#D6DEE7}
.cta .btn{margin-top:var(--sp-4);background:var(--c-warmwhite);color:var(--accent)}
.ft{background:var(--bg-invert);color:#9DA5AE;padding:var(--sp-6) 5vw var(--sp-4);font-size:var(--fs-sm)}
.ft__in{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.ft__logo{font-family:var(--latin);font-size:17px;letter-spacing:var(--ls-label-latin);color:var(--text-invert)}
.ft__name{margin-top:var(--sp-1)}
.ft dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);line-height:1.9}
.ft dt{color:var(--text-invert-muted)}
.ft__c{max-width:1160px;margin:var(--sp-4) auto 0;padding-top:var(--sp-3);
        border-top:1px solid var(--border-invert);font-size:var(--fs-label);color:var(--text-invert-muted)}

/* ── レスポンシブ ───────────────── */@media (max-width:960px){
  .sec{padding:var(--sp-8) 0}
  :root{--fs-h2:28px;--fs-h3:24px;--fs-lead:18px}
  .svc,.case,.grant{grid-template-columns:1fr;row-gap:var(--sp-4)}
  .svc--rev .svc__ph{order:0}
  .svc__ph,.hero__photo{height:260px}
  .message{padding:var(--sp-8) 6vw}
  .hd__nav a:not(.hd__cta){display:none}
}@media (max-width:680px){
  .sec{padding:var(--sp-6) 0}
  :root{--fs-h2:24px;--fs-h3:21px;--fs-lead:17px;--fs-body:14.5px}
  .hd__in{height:66px}
  .hero{padding:var(--sp-6) 0 0}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--border-default);padding:22px 0}
  .facts div:last-child{border-bottom:0}
  .facts b{font-size:36px}
  .case__num{font-size:58px}
  .message{padding:var(--sp-6) 22px}
  .steps li{flex-direction:column;gap:6px}
  .steps .t{width:auto}
  .price__row{grid-template-columns:1fr;gap:10px}
  .price__v{text-align:left}
  .ft__in{flex-direction:column;gap:var(--sp-3)}
}@media (prefers-reduced-motion: no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── 実写（2026-07-26 差し込み） ── */
.pic{background-size:cover;background-repeat:no-repeat;background-color:var(--c-paper-300)}
.pic--hands{background-image:url("../images/hands.webp");background-position:50% 50%}
.pic--dev{background-image:url("../images/dev.webp");background-position:50% 50%}
.pic--meet{background-image:url("../images/meet.webp");background-position:50% 50%}
.pic--office{background-image:url("../images/office.webp");background-position:50% 58%}
.band{height:300px;overflow:hidden}

/* ── 章レール（スクロールで現在地が変わる） ── */
.rail{position:fixed;left:0;top:0;bottom:0;width:60px;z-index:40;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:var(--sp-3);pointer-events:none;
      mix-blend-mode:normal}
.rail span{writing-mode:vertical-rl;font-family:var(--latin);font-size:11px;letter-spacing:.28em;
      color:var(--text-muted);opacity:.42;transition:opacity .45s,color .45s}
.rail span.on{opacity:1;color:var(--accent)}
.rail--dark span{color:var(--text-invert-muted)}
.rail--dark span.on{color:var(--accent-on-dark)}@media (max-width:1180px){.rail{display:none}}

/* ── 動き。JSが無効なら何も起きず、内容はそのまま読める ── */@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(16px);
    transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
  .js [data-reveal].in{opacity:1;transform:none}
}
.hd{position:sticky;top:0;z-index:50;transition:background .5s,border-color .5s,color .5s}
.hd.over-dark{background:var(--bg-invert);border-color:var(--border-invert)}
.hd.over-dark .hd__logo,.hd.over-dark .hd__logo small{color:var(--text-invert)}
.hd.over-dark .hd__nav a:not(.hd__cta){color:var(--text-invert-muted)}

/* ── 印刷（稟議で回覧されるときに崩れないように） ──────────────
   背景色・背景画像はブラウザ既定で印刷されないため、濃色セクションが
   白地に淡色文字になり読めなくなる。実績・CTA・フッターを黒文字に落とす。 */@media print{
  .rail{display:none!important}
  .hd{position:static!important}
  .sec--dark,.cta,.ft{background:#fff!important;color:#000!important}
  .sec--dark .h2,.sec--dark .lede,.case__b,.case__num,.case__cap,
  .cta h2,.cta p,.ft,.ft dt,.ft dd,.ft__logo,.ft__c{color:#000!important}
  .case__b em{border-bottom-color:#000!important}
  .cta .btn,.hd__cta,.btn{background:transparent!important;color:#000!important;
    border:1px solid #000!important}
  .pic,.ph,.message__photo{display:none!important}
  .sec{padding:24px 0!important}
  a[href^="mailto:"]::after{content:" （" attr(href) "）";font-size:11px}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ── アンカー遷移時に見出しがヘッダーに隠れないように ── */
section[id]{scroll-margin-top:96px}

/* ── 問い合わせフォーム ───────────────────── */
.form{max-width:640px;margin:var(--sp-6) auto 0;text-align:left}
.form__row{margin-top:var(--sp-3)}
.form__row label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--c-warmwhite)}
.form__row label .req{font-size:11px;font-weight:400;margin-left:8px;opacity:.75}
.form input,.form textarea,.form select{
  width:100%;margin-top:8px;padding:13px 14px;font:inherit;font-size:15px;
  background:var(--c-warmwhite);color:var(--text-primary);
  border:1px solid rgba(252,251,247,.35);border-radius:2px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--c-warmwhite);outline-offset:1px}
.form__note{margin-top:var(--sp-3);font-size:12px;line-height:1.9;opacity:.85}
.form__note a{color:inherit}
.form__actions{margin-top:var(--sp-4);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.form__submit{background:var(--c-warmwhite);color:var(--accent);border:0;
  font:inherit;font-size:14px;font-weight:700;padding:17px 40px;cursor:pointer;letter-spacing:.04em}
.form__direct{font-size:13px;line-height:1.9;opacity:.9}
.form__direct b{font-weight:400;user-select:all;border-bottom:1px solid rgba(252,251,247,.5)}

/* ── 会社概要 ─────────────────────────── */
.corp{margin-top:var(--sp-6);border-top:1px solid var(--border-default)}
.corp__row{display:grid;grid-template-columns:200px 1fr;gap:0 var(--sp-4);
  padding:16px 0;border-bottom:1px solid var(--border-default);font-size:14px;line-height:1.9}
.corp__row dt{color:var(--text-muted);font-size:var(--fs-sm)}

/* ── プライバシーポリシー ───────────────── */
.pp{margin-top:var(--sp-6);font-size:13.5px;line-height:2.05;color:var(--text-body)}
.pp h3{margin-top:var(--sp-4);font-size:15px;font-weight:700;color:var(--text-primary)}
.pp p,.pp ul{margin-top:10px}
.pp ul{padding-left:1.2em}
.pp li{margin-top:4px}

/* 出典表記 */
.facts cite{display:block;margin-top:10px;font-size:11px;font-style:normal;
  line-height:1.75;color:var(--text-muted);opacity:.9}@media (max-width:680px){
  .corp__row{grid-template-columns:1fr;gap:4px;padding:14px 0}
}

/* ============================================================
   RARETHREE LP redesign — 2026-07-26
   既存コピーと写真を保持し、視線誘導・CTA・B2Bの信頼感を再設計
   ============================================================ */
:root{
  --c-paper-50:#FCFBF7;
  --c-paper-100:#F4F2EC;
  --c-paper-200:#EBE7DE;
  --c-paper-300:#DDD7CA;
  --c-warmwhite:#FFFDF9;
  --c-ink-900:#19242B;
  --c-ink-700:#39464C;
  --c-ink-600:#5B6669;
  --c-ink-500:#6E7778;
  --c-indigo-700:#153E50;
  --c-indigo-300:#9FB8C0;
  --c-slate-900:#102A36;
  --c-slate-400:#92A4AA;
  --c-line-200:#D8D2C6;
  --c-line-700:#35505C;
  --accent:#153E50;
  --accent-strong:#B85E32;
  --accent-strong-hover:#964723;
  --accent-pale:#E8EEF0;
  --bg-base:#F7F5EF;
  --bg-alt:#ECE9E1;
  --bg-card:#FFFDF9;
  --bg-invert:#102A36;
  --border-default:#D8D2C6;
  --shadow-100:0 1px 2px rgba(16,42,54,.05);
  --shadow-200:0 14px 38px rgba(16,42,54,.09);
  --shadow-300:0 30px 80px rgba(16,42,54,.15);
  --fs-display:clamp(38px,4.25vw,64px);
  --fs-h2:clamp(30px,3vw,44px);
  --fs-h3:clamp(25px,2.2vw,32px);
  --fs-body:16px;
}

body{
  background:
    radial-gradient(circle at 92% 4%,rgba(21,62,80,.055),transparent 25rem),
    var(--bg-base);
  color:var(--text-primary);
  overflow-x:hidden;
}
::selection{background:rgba(184,94,50,.22);color:var(--c-ink-900)}
a,button{transition:color .25s ease,background-color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
a:focus-visible{outline:3px solid rgba(184,94,50,.38);outline-offset:4px}

.wrap,.hd__in,.hero__in,.message__inner,.ft__in,.ft__c{max-width:1240px}
.wrap{padding:0 clamp(24px,6vw,84px)}
.sec{padding:clamp(88px,10vw,148px) 0;position:relative}
.sec--alt{
  background:
    linear-gradient(90deg,rgba(21,62,80,.045) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(rgba(21,62,80,.035) 1px,transparent 1px) 0 0/80px 80px,
    var(--bg-alt);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--accent);font-size:11px;letter-spacing:.18em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.h2{max-width:22em;margin-top:18px;line-height:1.45}
.lede{max-width:48em;margin-top:28px;font-size:16px;line-height:2}
.lede strong{color:var(--accent);font-weight:700;background:linear-gradient(transparent 72%,rgba(184,94,50,.17) 72%)}

/* Header */
.hd{
  background:rgba(247,245,239,.9);
  border-bottom:1px solid rgba(21,62,80,.13);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hd__in{height:82px;padding:0 clamp(24px,5vw,64px)}
.hd__logo{font-size:18px;font-weight:700;letter-spacing:.24em;color:var(--accent)}
.hd__logo small{font-size:9px;letter-spacing:.16em;color:var(--text-muted)}
.hd__nav{gap:clamp(16px,2.2vw,32px);font-size:12px}
.hd__nav a:not(.hd__cta){position:relative;padding:30px 0;color:var(--text-body)}
.hd__nav a:not(.hd__cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:23px;height:1px;background:var(--accent);
  transition:right .25s ease;
}
.hd__nav a:not(.hd__cta):hover::after{right:0}
.hd__cta{
  border-radius:3px;background:var(--accent-strong);padding:13px 22px;
  box-shadow:0 7px 18px rgba(184,94,50,.16);font-weight:700;
}
.hd__cta:hover{background:var(--accent-strong-hover);transform:translateY(-1px)}
.hd.over-dark{background:rgba(16,42,54,.94)}

/* Hero */
.hero{
  padding:clamp(72px,8vw,116px) 0 clamp(88px,10vw,148px);
  position:relative;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;z-index:-1;inset:auto -8vw 0 auto;width:min(50vw,720px);height:82%;
  background:var(--accent-pale);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
}
.hero::after{
  content:"レアスリー";position:absolute;z-index:-1;left:max(24px,5vw);bottom:8px;
  font-family:var(--latin);font-size:clamp(70px,13vw,190px);line-height:.7;
  letter-spacing:.08em;color:rgba(21,62,80,.035);white-space:nowrap;pointer-events:none;
}
.btn{
  min-height:56px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;background:var(--accent-strong);padding:16px 30px;
  font-size:14px;font-weight:700;box-shadow:0 10px 24px rgba(184,94,50,.18);
}
.btn::after{content:"→";margin-left:16px;font-family:var(--sans);transition:transform .25s ease}
.btn:hover{background:var(--accent-strong-hover);transform:translateY(-2px);box-shadow:0 14px 30px rgba(184,94,50,.25)}
.btn:hover::after{transform:translateX(4px)}

/* Data and section transitions */
.facts{
  margin-top:56px;gap:16px;border:0;
  grid-template-columns:repeat(3,1fr);
}
.facts div{
  min-height:230px;padding:32px;border:1px solid rgba(21,62,80,.13);border-right:1px solid rgba(21,62,80,.13);
  background:rgba(255,253,249,.74);box-shadow:var(--shadow-100);
}
.facts b{font-size:52px;color:var(--accent);letter-spacing:-.03em}
.facts b::after{content:"";display:block;width:34px;height:2px;margin-top:20px;background:var(--accent-strong)}
.facts span{margin-top:20px;line-height:1.85}
.band{height:clamp(280px,35vw,500px);position:relative;background-attachment:fixed}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,42,54,.32),transparent 58%,rgba(16,42,54,.14))}

/* Services */
#training{background:linear-gradient(180deg,var(--bg-base),#F2F0EA)}
.svc{
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:54px 70px;
  padding:clamp(36px,5vw,68px);background:var(--bg-card);
  border:1px solid rgba(21,62,80,.12);box-shadow:var(--shadow-200);position:relative;
}
.svc::before{
  content:"";position:absolute;left:-1px;top:52px;width:4px;height:72px;background:var(--accent-strong);
}
.svc + .svc{margin-top:36px;padding-top:clamp(36px,5vw,68px);border-top:1px solid rgba(21,62,80,.12)}
.svc__no{font-size:11px;letter-spacing:.2em;font-weight:700}
.svc__h{margin-top:16px;line-height:1.45}
.svc__t{margin-top:20px;line-height:1.75;color:var(--accent)}
.svc__b{margin-top:26px;line-height:2}
.svc__ph{height:440px;box-shadow:var(--shadow-200)}
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:6px;border-top:1px solid var(--border-default);
}
.steps li{
  display:block;min-height:166px;padding:24px 22px;border-bottom:0;border-right:1px solid var(--border-default);
}
.steps li:last-child{border-right:0}
.steps .t{display:block;width:auto;padding:0;font-size:11px;font-weight:700;letter-spacing:.12em}
.steps .d{display:block;margin-top:14px;font-size:13px;line-height:1.75}
.steps .d b{font-size:14px;line-height:1.65;color:var(--c-ink-900)}

/* Case */
.sec--dark{
  background:
    radial-gradient(circle at 88% 15%,rgba(159,184,192,.15),transparent 28rem),
    linear-gradient(130deg,#0D2530,#163946);
}
.sec--dark .eyebrow{color:#C7D9DE}
.sec--dark .eyebrow::before{background:var(--accent-strong)}
.case{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:70px;margin-top:60px;align-items:center}
.case__num{font-size:clamp(72px,9vw,118px);letter-spacing:-.04em}
.case__num small{font-size:18px;margin-left:8px}
.case__cap{margin-top:12px;color:#B7C7CC}
.case__ph{height:300px;margin-top:36px;border:1px solid rgba(255,255,255,.14)}
.case__b{padding:42px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);line-height:2.05}
.case__b p + p{margin-top:22px}
.case__b em{color:#FFFDF9;border-bottom-color:var(--accent-strong)}

/* Founder message */
.message{padding:clamp(88px,10vw,148px) clamp(24px,6vw,84px);background:var(--c-warmwhite)}

/* Pricing / grants / FAQ */
#price .wrap{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,7fr);gap:24px 80px;align-items:start}
#price .eyebrow,#price .h2,#price .lede,#price .price__note{grid-column:1}
#price .h2{grid-row:2}
#price .lede{grid-row:3}
#price .price{grid-column:2;grid-row:1/5;margin-top:0}
#price .price__note{grid-row:4}
.price{border-top:1px solid var(--accent)}
.price__row{padding:24px 22px;transition:background .25s ease}
.price__row:hover{background:rgba(255,253,249,.76)}
.price__row:first-child{
  margin:0 0 8px;background:var(--accent);color:var(--text-invert);
  border:0;box-shadow:var(--shadow-200);
}
.price__row:first-child .price__n span{color:#C9D4D8}
.price__row:first-child .price__v{color:#FFFDF9}
.price__n{font-size:15px}
.price__v{font-size:28px;color:var(--accent)}
.grant{gap:18px}
.grant__box{
  min-height:250px;padding:38px;border:1px solid rgba(21,62,80,.14);
  box-shadow:none;position:relative;overflow:hidden;
}
.grant__box::after{
  content:"";position:absolute;right:-28px;bottom:-38px;width:110px;height:110px;
  border:24px solid rgba(21,62,80,.045);border-radius:50%;
}
.grant__box h3{color:var(--accent)}
.grant__box p{margin-top:20px;line-height:2}
.faq{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  margin-top:52px;border:0;
}
.faq__i{padding:30px;border:1px solid var(--border-default);background:rgba(255,253,249,.58)}
.faq__i:last-child{grid-column:1/-1}
.faq__q{gap:16px;line-height:1.75}
.faq__q i{color:var(--accent-strong);font-size:18px}
.faq__a{gap:16px;margin-top:18px;line-height:1.95}

/* Final CTA and footer */
.cta{
  padding:clamp(88px,10vw,138px) 5vw;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/72px 72px,
    var(--accent);
  position:relative;overflow:hidden;
}
.cta::before,.cta::after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none;
}
.cta::before{width:420px;height:420px;left:-250px;top:-210px}
.cta::after{width:520px;height:520px;right:-300px;bottom:-330px}
.cta h2{font-size:clamp(30px,3.2vw,46px);line-height:1.5}
.cta p{font-size:15px;line-height:2;color:#D7E1E4}
.cta .btn{
  margin-top:36px;background:var(--c-warmwhite);color:var(--accent);min-width:270px;
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.cta .btn:hover{background:#F4E8DE;color:var(--accent-strong-hover)}
.ft{padding-top:60px;background:#0A2029}
.ft__logo{font-size:20px;color:#FFFDF9}
.ft__name{color:#B6C3C7}
.ft dl{gap:10px 34px}
.ft dd{color:#C1CCD0}

/* Motion */@media (prefers-reduced-motion:no-preference){
  .pic{transition:filter .55s ease,transform .55s ease}
  .svc:hover .svc__ph{filter:saturate(1.04) contrast(1.02)}
  .facts div{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
  .facts div:hover{transform:translateY(-5px);box-shadow:var(--shadow-200);border-color:rgba(21,62,80,.25)}
}@media (max-width:1060px){
  .svc{gap:44px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li:nth-child(2){border-right:0}
  .steps li:nth-child(-n+2){border-bottom:1px solid var(--border-default)}
  #price .wrap{gap:24px 52px}
}@media (max-width:840px){
  .hero::before{inset:38% 0 0 18%;width:auto;height:auto}
  .facts{grid-template-columns:1fr}
  .facts div{min-height:0}
  .band{background-attachment:scroll}
  .svc,.case{grid-template-columns:1fr}
  .svc--rev .svc__ph{order:0}
  .svc__ph{height:min(64vw,440px)}
  .case{gap:42px}
  .case__b{padding:32px}
  #price .wrap{display:block}
  #price .price{margin-top:48px}
  .price__note{margin-top:22px}
}@media (max-width:680px){
  :root{--fs-display:clamp(34px,10.5vw,48px);--fs-body:15px}
  .wrap,.hero__in{padding-left:22px;padding-right:22px}
  .sec{padding:72px 0}
  .hd__in{height:68px;padding:0 18px}
  .hd__logo{font-size:15px}
  .hd__cta{padding:11px 14px;font-size:11px}
  .hero{padding:58px 0 78px}
  .facts{margin-top:40px}
  .facts div{padding:26px}
  .band{height:260px}
  .svc{padding:32px 24px;gap:32px}
  .svc::before{top:34px;height:52px}
  .svc__ph{height:300px}
  .steps{grid-template-columns:1fr}
  .steps li{min-height:0;border-right:0;border-bottom:1px solid var(--border-default)!important}
  .steps li:last-child{border-bottom:0!important}
  .case__ph{height:230px}
  .case__b{padding:26px 22px}
  .message{padding:72px 22px}
  .price__row{padding:22px 16px}
  .grant{grid-template-columns:1fr}
  .grant__box{min-height:0;padding:28px 24px}
  .faq{grid-template-columns:1fr;margin-top:38px}
  .faq__i,.faq__i:last-child{grid-column:auto;padding:24px 20px}
  .cta{padding:76px 22px}
  .cta p br{display:none}
  .cta .btn{width:100%;min-width:0}
}

/* ============================================================
   Rich color & visual rhythm pass
   Navy foundation / coral + amber accents / blue + lavender tones
   ============================================================ */
:root{
  --navy-950:#061B27;
  --navy-900:#092736;
  --navy-800:#0C3548;
  --navy-700:#124A60;
  --coral-600:#C04931;   /* 2026-08-30 名刺の文字用珊瑚へ統一 */
  --coral-500:#E97861;   /* 2026-08-30 名刺の実測値へ統一 */
  --coral-100:#FBE6E1;
  --amber-600:#C9872B;
  --amber-500:#E1A64D;
  --amber-100:#FAEDCF;
  --blue-100:#DFEFF3;
  --blue-200:#C8E2E9;
  --lavender-100:#EEE9F8;
  --lavender-200:#DDD4EF;
  --accent:#0C3D50;
  --accent-strong:#D95F50;
  --accent-strong-hover:#BC493D;
}

/* Rich global details */
body{
  background:#F8F6F1;
  color:#17262D;
}
.eyebrow{
  padding:8px 13px 8px 10px;border-radius:999px;
  background:var(--blue-100);color:var(--navy-800);
}
.eyebrow::before{width:8px;height:8px;border-radius:50%;background:var(--coral-500)}
.h2{color:var(--navy-900)}
.lede strong{background:linear-gradient(transparent 62%,rgba(235,116,98,.28) 62%)}
.btn{
  background:linear-gradient(135deg,var(--coral-500),var(--coral-600) 58%,#C85144);
  box-shadow:0 13px 34px rgba(217,95,80,.28);
}
.btn:hover{background:linear-gradient(135deg,#F17B68,var(--coral-600));box-shadow:0 17px 40px rgba(217,95,80,.34)}

/* Deep, expressive opening viewport */
.hd,.hd.over-dark{
  background:rgba(6,27,39,.92);border-bottom-color:rgba(200,226,233,.16);
  box-shadow:0 12px 36px rgba(3,17,24,.12);
}
.hd__logo,.hd.over-dark .hd__logo{color:#FFF9F2}
.hd__logo small,.hd.over-dark .hd__logo small{color:#AFC8D0}
.hd__nav a:not(.hd__cta),.hd.over-dark .hd__nav a:not(.hd__cta){color:#D7E7EB}
.hd__nav a:not(.hd__cta)::after{background:linear-gradient(90deg,var(--coral-500),var(--amber-500))}
.hd__cta{
  background:linear-gradient(135deg,var(--coral-500),var(--coral-600));
  border:1px solid rgba(255,255,255,.13);
}

.hero{
  color:#FFF9F2;
  background:
    radial-gradient(circle at 7% 18%,rgba(235,116,98,.24),transparent 28rem),
    radial-gradient(circle at 87% 25%,rgba(200,226,233,.19),transparent 27rem),
    radial-gradient(circle at 78% 100%,rgba(221,212,239,.16),transparent 32rem),
    linear-gradient(132deg,var(--navy-950) 0%,var(--navy-900) 52%,#0C3C4E 100%);
  border-bottom:8px solid;
  border-image:linear-gradient(90deg,var(--coral-500) 0 28%,var(--amber-500) 28% 50%,var(--blue-200) 50% 76%,var(--lavender-200) 76%) 1;
}
.hero::before{
  inset:8% -4% auto auto;width:min(43vw,650px);height:76%;
  background:
    linear-gradient(135deg,rgba(235,116,98,.13),rgba(225,166,77,.04) 42%,rgba(221,212,239,.1)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px);
  border:1px solid rgba(200,226,233,.12);
  clip-path:polygon(12% 0,100% 0,100% 86%,88% 100%,0 100%,0 12%);
}
.hero::after{color:rgba(200,226,233,.055);bottom:20px}

/* Chapter rail becomes a colored visual index */
.rail{left:10px;width:48px;gap:18px}
.rail span{
  position:relative;padding-top:15px;color:#6F858E;opacity:.52;
  font-size:9px;transition:color .35s ease,opacity .35s ease,transform .35s ease;
}
.rail span::before{
  content:"";position:absolute;top:0;left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--blue-200);transform:translateX(-50%);box-shadow:0 0 0 4px rgba(200,226,233,.14);
}
.rail span.on{color:var(--coral-600);opacity:1;transform:translateY(-2px)}
.rail span.on::before{background:var(--coral-500);box-shadow:0 0 0 5px rgba(235,116,98,.16)}

/* Issue — cool background with three deliberately different color cards */
#issue{
  background:
    radial-gradient(circle at 100% 0,rgba(221,212,239,.72),transparent 30rem),
    radial-gradient(circle at 0 100%,rgba(200,226,233,.72),transparent 31rem),
    linear-gradient(135deg,#F7FBFB 0%,#F3F0F9 100%);
  overflow:hidden;
}
#issue::before{
  content:"INSIGHT";position:absolute;right:-.04em;top:-.18em;
  font-family:var(--latin);font-size:clamp(100px,18vw,270px);line-height:1;
  letter-spacing:.03em;color:rgba(12,61,80,.035);pointer-events:none;
}
#issue .eyebrow{background:rgba(200,226,233,.72)}
.facts{gap:20px}
.facts div{
  position:relative;overflow:hidden;border:0;border-top:5px solid;
  box-shadow:0 20px 54px rgba(9,39,54,.1);
}
.facts div::before{
  content:"";position:absolute;right:-42px;top:-42px;width:130px;height:130px;border-radius:50%;
  background:currentColor;opacity:.075;
}
.facts div:nth-child(1){background:linear-gradient(145deg,#FFFDFC,var(--coral-100));border-color:var(--coral-500);color:var(--coral-600)}
.facts div:nth-child(2){background:linear-gradient(145deg,#FFFDF8,var(--amber-100));border-color:var(--amber-500);color:var(--amber-600)}
.facts div:nth-child(3){background:linear-gradient(145deg,#FCFDFF,var(--lavender-100));border-color:#9B86C4;color:#7966A6}
.facts div:nth-child(1) b{color:var(--coral-600)}
.facts div:nth-child(2) b{color:var(--amber-600)}
.facts div:nth-child(3) b{color:#7966A6}
.facts b::after{background:currentColor}
.facts span{color:#45565D}

/* Photo interlude with chromatic overlay */
.band{
  border-top:12px solid var(--blue-200);border-bottom:12px solid var(--lavender-200);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.band::after{
  background:
    linear-gradient(90deg,rgba(6,27,39,.58),rgba(217,95,80,.12) 34%,transparent 64%,rgba(121,102,166,.22)),
    linear-gradient(0deg,rgba(6,27,39,.2),transparent 60%);
}

/* Services — richer editorial cards and colored process tracks */
#training{
  background:
    radial-gradient(circle at 8% 16%,rgba(235,116,98,.1),transparent 24rem),
    radial-gradient(circle at 92% 72%,rgba(200,226,233,.3),transparent 29rem),
    #F7F5EF;
}
.svc{
  border:0;border-radius:4px;overflow:hidden;
  box-shadow:0 28px 75px rgba(9,39,54,.13);
}
.svc::before{width:7px;height:92px;background:linear-gradient(var(--coral-500),var(--amber-500))}
.svc::after{
  position:absolute;right:34px;top:10px;font-family:var(--latin);font-size:116px;line-height:1;
  color:rgba(12,61,80,.045);pointer-events:none;
}
#training .svc:first-child{
  background:
    linear-gradient(120deg,rgba(223,239,243,.72),transparent 48%),
    #FFFDF9;
  border-top:8px solid var(--blue-200);
}
#training .svc:first-child::after{content:"01"}
#training .svc--rev{
  background:
    linear-gradient(240deg,rgba(238,233,248,.78),transparent 48%),
    #FFFDF9;
  border-top:8px solid var(--lavender-200);
}
#training .svc--rev::after{content:"02";color:rgba(121,102,166,.06)}
.svc__no{
  display:inline-flex;padding:8px 12px;border-radius:999px;
  background:var(--navy-900);color:#D8EBEF;
}
.svc--rev .svc__no{background:#65538D;color:#F4F0FB}
.svc__t{color:var(--coral-600)}
.svc--rev .svc__t{color:#7966A6}
.svc__ph{
  border:8px solid #FFF;outline:1px solid rgba(9,39,54,.12);
  box-shadow:0 22px 45px rgba(9,39,54,.18);
}
.steps{border-top:0;background:rgba(255,255,255,.66);box-shadow:inset 0 1px rgba(9,39,54,.12)}
.steps li{position:relative;border-color:rgba(9,39,54,.12)}
.steps li::before{
  content:"";position:absolute;left:22px;top:-5px;width:10px;height:10px;border-radius:50%;
  background:var(--coral-500);box-shadow:0 0 0 5px var(--coral-100);
}
.steps li:nth-child(2)::before{background:var(--amber-500);box-shadow:0 0 0 5px var(--amber-100)}
.steps li:nth-child(3)::before{background:#5BA2B5;box-shadow:0 0 0 5px var(--blue-100)}
.steps li:nth-child(4)::before{background:#8B75B7;box-shadow:0 0 0 5px var(--lavender-100)}
.steps .t{color:var(--coral-600)}
.steps li:nth-child(2) .t{color:var(--amber-600)}
.steps li:nth-child(3) .t{color:#347E92}
.steps li:nth-child(4) .t{color:#7966A6}

/* Case study — high-impact proof */
#case{
  background:
    radial-gradient(circle at 9% 20%,rgba(235,116,98,.2),transparent 26rem),
    radial-gradient(circle at 93% 85%,rgba(139,117,183,.23),transparent 30rem),
    linear-gradient(130deg,#061B27,#0A3142 52%,#102C45);
  border-top:10px solid;
  border-image:linear-gradient(90deg,var(--coral-500),var(--amber-500),var(--lavender-200)) 1;
}
#case .eyebrow{background:rgba(200,226,233,.1);border:1px solid rgba(200,226,233,.2);color:#E0EEF1}
#case .h2{color:#FFF9F2}
.case__num{
  display:inline-block;color:#FFF9F2;
  text-shadow:0 0 42px rgba(235,116,98,.2);
  background:linear-gradient(115deg,#FFF9F2 10%,#FFD1C8 46%,#F5C477);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.case__num small{-webkit-text-fill-color:#F4D9C8}
.case__cap{
  display:inline-block;padding:9px 12px;margin-top:16px;
  background:rgba(235,116,98,.14);border-left:3px solid var(--coral-500);color:#F5D7D1;
}
.case__ph{
  border:8px solid rgba(255,255,255,.08);
  box-shadow:-16px 16px 0 rgba(235,116,98,.14),0 28px 60px rgba(0,0,0,.25);
}
.case__b{
  position:relative;border:1px solid rgba(200,226,233,.2);
  background:
    linear-gradient(145deg,rgba(200,226,233,.09),rgba(221,212,239,.055)),
    rgba(255,255,255,.025);
  box-shadow:0 26px 70px rgba(0,0,0,.18);
}
.case__b::before{
  content:"“";position:absolute;right:24px;top:8px;font-family:var(--latin);font-size:100px;
  line-height:1;color:rgba(235,116,98,.16);
}

/* Founder — soft-color editorial contrast */
.message{
  background:
    radial-gradient(circle at 0 0,rgba(200,226,233,.72),transparent 31rem),
    radial-gradient(circle at 100% 100%,rgba(221,212,239,.76),transparent 34rem),
    linear-gradient(135deg,#FBFDFD,#FAF7FD);
}

/* Pricing — warm conversion zone */
#price{
  background:
    radial-gradient(circle at 88% 8%,rgba(250,237,207,.8),transparent 28rem),
    radial-gradient(circle at 5% 93%,rgba(251,230,225,.74),transparent 30rem),
    #FBFAF6;
}
#price .eyebrow{background:var(--amber-100)}
.price{
  padding:16px;background:rgba(255,255,255,.74);border:1px solid rgba(9,39,54,.12);
  box-shadow:0 28px 72px rgba(9,39,54,.11);
}
.price__row{padding:24px;border-radius:3px;border-bottom-color:rgba(9,39,54,.11)}
.price__row:nth-child(even):not(:first-child){background:rgba(223,239,243,.4)}
.price__row:nth-child(odd):not(:first-child){background:rgba(238,233,248,.35)}
.price__row:first-child{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--coral-600),#CF6A3E 56%,var(--amber-600));
  box-shadow:0 18px 38px rgba(217,95,80,.25);
}
.price__row:first-child::after{
  content:"START HERE";position:absolute;right:-9px;top:13px;transform:rotate(10deg);
  font-family:var(--latin);font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.68);
}
.price__v{color:var(--navy-800)}
.price__row:not(:first-child) .price__v::after{
  content:"";display:block;margin:8px 0 0 auto;width:32px;height:2px;
  background:linear-gradient(90deg,var(--coral-500),var(--amber-500));
}

/* Grant and FAQ get distinct supporting tones */
#grant{
  background:
    linear-gradient(90deg,rgba(12,61,80,.045) 1px,transparent 1px) 0 0/70px 70px,
    linear-gradient(rgba(12,61,80,.04) 1px,transparent 1px) 0 0/70px 70px,
    linear-gradient(135deg,var(--blue-100),var(--lavender-100));
}
#grant .eyebrow{background:rgba(255,255,255,.72)}
.grant__box{border:0;border-top:6px solid;box-shadow:0 20px 48px rgba(9,39,54,.1)}
.grant__box:first-child{border-color:#5BA2B5;background:linear-gradient(145deg,#FFF,var(--blue-100))}
.grant__box:last-child{border-color:#8B75B7;background:linear-gradient(145deg,#FFF,var(--lavender-100))}
.grant__box:first-child h3{color:#347E92}
.grant__box:last-child h3{color:#6D5B97}

.sec--faq{
  background:
    radial-gradient(circle at 100% 0,rgba(251,230,225,.6),transparent 25rem),
    linear-gradient(180deg,#FCFBF8,#F7FAFB);
}
.sec--faq .eyebrow{background:var(--coral-100)}
.faq__i{
  border:0;border-left:4px solid var(--blue-200);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(223,239,243,.4));
  box-shadow:0 14px 38px rgba(9,39,54,.075);
}
.faq__i:nth-child(even){border-left-color:var(--lavender-200);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(238,233,248,.48))}
.faq__i:last-child{border-left-color:var(--coral-500);background:linear-gradient(135deg,#FFF,rgba(251,230,225,.58))}
.faq__q i{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--coral-100)}
.faq__a i{color:#78909A}

/* Final conversion panel */
.cta{
  border-top:10px solid;
  border-image:linear-gradient(90deg,var(--coral-500),var(--amber-500),var(--blue-200),var(--lavender-200)) 1;
  background:
    radial-gradient(circle at 18% 15%,rgba(235,116,98,.28),transparent 26rem),
    radial-gradient(circle at 85% 82%,rgba(139,117,183,.3),transparent 31rem),
    repeating-linear-gradient(120deg,rgba(255,255,255,.025) 0 1px,transparent 1px 30px),
    linear-gradient(130deg,var(--navy-950),var(--navy-800));
}
.cta::before{border:38px solid rgba(235,116,98,.09)}
.cta::after{border:44px solid rgba(221,212,239,.085)}
.cta h2{color:#FFF9F2;text-shadow:0 10px 34px rgba(0,0,0,.22)}
.cta h2::after{
  content:"";display:block;width:82px;height:4px;margin:25px auto 0;
  background:linear-gradient(90deg,var(--coral-500),var(--amber-500));border-radius:99px;
}
.cta .btn{
  color:#FFF;background:linear-gradient(135deg,var(--coral-500),var(--coral-600) 58%,var(--amber-600));
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.cta .btn:hover{background:linear-gradient(135deg,#F47E6B,var(--coral-600),var(--amber-600));color:#FFF}
.ft{border-top:1px solid rgba(200,226,233,.12);background:var(--navy-950)}@media (max-width:840px){
  .hero::before{inset:36% -18% 4% 16%;width:auto;height:auto}
  .svc::after{font-size:84px;right:18px}
}@media (max-width:680px){
  .hero{border-bottom-width:6px}
  .eyebrow{font-size:10px}
  .facts div{border-top-width:4px}
  .svc{border-radius:0}
  .svc::after{font-size:68px}
  .price{padding:8px}
  .price__row{padding:22px 16px}
}

/* Final scope: header + hero only.
   Palette is taken from the approved “AIで何ができるかの在庫” section. */

/* Header / navigation */
.hd,
.hd.over-dark{
  background:rgba(255,252,248,.93);
  border-bottom:1px solid rgba(112,94,84,.16);
  box-shadow:0 10px 34px rgba(102,90,83,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hd__logo,
.hd.over-dark .hd__logo{color:#5D5049}
.hd__logo small,
.hd.over-dark .hd__logo small{color:#8B7E76}
.hd__nav a:not(.hd__cta),
.hd.over-dark .hd__nav a:not(.hd__cta){color:#665B55}
.hd__nav a:not(.hd__cta)::after{
  background:linear-gradient(90deg,#EB7462,#E1A64D);
}
.hd__cta{
  min-width:158px;
  text-align:center;
  color:#FFFDF9!important;
  background:linear-gradient(135deg,#EF8B73,#D96A5B);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 22px rgba(217,106,91,.2);
}
.hd__cta:hover{
  background:linear-gradient(135deg,#F29A80,#C95B50);
  box-shadow:0 11px 26px rgba(217,106,91,.26);
}

/* Hero / first view */
.hero{
  color:#514943;
  background:
    radial-gradient(circle at 100% 0,rgba(238,233,248,.94),transparent 31rem),
    radial-gradient(circle at 0 100%,rgba(200,226,233,.88),transparent 33rem),
    radial-gradient(circle at 16% 10%,rgba(251,230,225,.86),transparent 24rem),
    linear-gradient(135deg,#FDFCF9 0%,#F7FBFB 48%,#F3F0F9 100%);
  border-bottom:8px solid;
  border-image:linear-gradient(90deg,#EB7462 0 28%,#E1A64D 28% 49%,#C8E2E9 49% 75%,#DDD4EF 75%) 1;
}
.hero::before{
  inset:7% -4% auto auto;
  width:min(44vw,670px);
  height:78%;
  background:
    linear-gradient(135deg,rgba(251,230,225,.72),rgba(223,239,243,.68) 48%,rgba(238,233,248,.78)),
    repeating-linear-gradient(90deg,rgba(112,94,84,.035) 0 1px,transparent 1px 38px);
  border:1px solid rgba(155,134,196,.16);
  clip-path:polygon(12% 0,100% 0,100% 86%,88% 100%,0 100%,0 12%);
}
.hero::after{color:rgba(112,94,84,.052)}
.hero .btn{
  color:#FFFDF9;
  background:linear-gradient(135deg,#EF8B73,#D96A5B 58%,#D98A4A);
  box-shadow:0 13px 32px rgba(217,106,91,.24);
}
.hero .btn:hover{
  background:linear-gradient(135deg,#F39C82,#D96A5B,#CE8040);
  box-shadow:0 17px 39px rgba(217,106,91,.29);
}@media (max-width:840px){
  .hero::before{
    inset:36% -18% 4% 16%;
    width:auto;height:auto;
    background:linear-gradient(135deg,rgba(251,230,225,.68),rgba(223,239,243,.7),rgba(238,233,248,.8));
  }
}@media (max-width:680px){
  .hd__cta{min-width:104px}
}

/* Typography only: warm Japanese mincho + neutral humanist Japanese sans */
:root{
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN",
          "Hiragino Mincho Pro","BIZ UDPMincho","MS PMincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
         "Yu Gothic UI","Yu Gothic","YuGothic","BIZ UDPGothic",Meiryo,sans-serif;
}

body{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:0;
  font-kerning:normal;
  font-feature-settings:"palt" 1,"pkna" 1;
  text-rendering:optimizeLegibility;
}

/* Headings: dignified without feeling formal or distant */
.hero__q,
.h2,
.svc__h,
.svc__t,
.message__lead,
.message__sign .name,
.grant__box h3,
.cta h2{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.008em;
  font-feature-settings:"palt" 1;
  line-break:strict;
}
.h2{line-height:1.52}
.svc__h{line-height:1.5}
.svc__t{font-weight:500;line-height:1.78;letter-spacing:.012em}
.grant__box h3{line-height:1.7}
.cta h2{line-height:1.58}

/* Body copy: contemporary, calm and comfortably readable */
.hero__sub,
.lede,
.svc__b,
.steps .d,
.case__b,
.message__body,
.price__n,
.price__note,
.grant__box p,
.faq__q,
.faq__a,
.cta p,
.ft{
  font-family:var(--sans);
  letter-spacing:.012em;
}
.hero__sub,.lede,.svc__b,.case__b,.message__body{line-height:1.98}
.faq__q{font-weight:600;line-height:1.82}
.faq__a{font-weight:400;line-height:1.95}

/* Navigation, CTA and hero proof: neutral and human, never techy or wide */
.hd__nav,
.hd__nav a,
.hd__cta,
.btn,
.hero__proof,
.hero__proof span{
  font-family:var(--sans);
  font-feature-settings:"palt" 1,"pkna" 1;
  letter-spacing:0;
}
.hd__nav a:not(.hd__cta){
  font-weight:500;
  letter-spacing:.012em;
}
.hd__cta,
.btn{
  font-weight:600;
  line-height:1.45;
  letter-spacing:.008em;
}

/* Small labels retain hierarchy without mechanical tracking */
.eyebrow,
.message__label,
.message__figure figcaption,
.price__note,
.ft{
  font-family:var(--sans);
}
.eyebrow{font-weight:600;letter-spacing:.075em}@media (max-width:680px){
  .hd__nav a,.hd__cta,.btn{letter-spacing:0}
}

/* Scope: percentage figures in the issue section only */
#issue .facts b{
  line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
#issue .facts b i,
#issue .facts b small{
  display:inline-block;
  line-height:1;
  vertical-align:baseline;
}
#issue .facts b small{
  margin-left:.08em;
  font-family:inherit;
  font-size:.42em;
  transform:none;
}

/* Scope: the individual-work plan heading only */@media (max-width:680px){
}

/* Scope: hero headline line composition only */@media (max-width:680px){
}

/* Scope: issue-section heading composition only */@media (max-width:680px){
  #issue .h2 br{display:none}
}

/* New external asset; the original embedded hero image remains intact above */
/* 2026-07-28: ヒーローは写真に戻す（片岡さん指示）。
   ただし画像右端に「ポケットに手を入れて立っている人」が写り込むため、
   横位置を左寄り(16%)にして画角から外す。縦は着席者の目線が入る位置。
   ※ data-par（パララックス）は backgroundPosition を 50% に上書きしてしまうので、
     この面では使わない（index.html 側で data-par を外している） */

/* ヒーローを人物写真からロゴ図版に差し替え（2026-07-28 片岡さん指示）
   ・SVGはインラインなのでページのフォント（Noto Sans JP / 旧書体（ng-list で禁止））をそのまま使える
   ・meet で letterbox するため、余白が出ても地の色と同じになるよう背景色を合わせる
   ・::before の白い内枠は回路線を分断するので、この面では出さない */

/* Scope: price-plan comparison only */
#price .price__row{
  grid-template-columns:minmax(190px,1fr) minmax(390px,auto);
  align-items:center;
  gap:24px;
  margin:0;
  padding:22px;
  border:1px solid rgba(126,108,98,.12);
  border-radius:5px;
  color:#514943;
  box-shadow:0 10px 28px rgba(102,90,83,.055);
}
#price .price__row + .price__row{margin-top:12px}
#price .price__row:nth-child(1){
  background:linear-gradient(135deg,#FFFDFC,#FCE9DD);
}
#price .price__row:nth-child(2){
  background:linear-gradient(135deg,#FFFDFC,#F0EAF7);
}
#price .price__row:nth-child(3){
  background:linear-gradient(135deg,#FFFDFC,#E8F3F3);
}
#price .price__row::after,
#price .price__row .price__v::after{content:none!important}
#price .price__row:first-child .price__n span{color:#6B625C}

#price .price__compare{
  min-width:min(440px,100%);
  display:grid;
  grid-template-columns:minmax(118px,1fr) 32px minmax(172px,1.25fr);
  align-items:center;
  gap:10px;
  color:#514943;
  text-align:left;
  white-space:normal;
  font-family:var(--sans);
}
#price .price__regular,
#price .price__effective{
  min-width:0;
}
#price .price__regular{
  padding:12px 14px;
  border:1px solid rgba(126,108,98,.16);
  border-radius:4px;
  background:rgba(255,255,255,.72);
}
#price .price__effective{
  padding:13px 15px;
  border:1px solid rgba(100,167,160,.34);
  border-radius:4px;
  background:linear-gradient(135deg,#EDF7F1,#DDEDE2);
  box-shadow:0 9px 22px rgba(100,167,160,.12);
}
#price .price__compare-label{
  display:block;
  margin-bottom:6px;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.045em;
  color:#796E67;
}
#price .price__effective .price__compare-label{color:#507D78}
#price .price__compare b{
  display:block;
  font-family:var(--latin);
  font-size:25px;
  font-weight:400;
  line-height:1.1;
  color:#77635A;
}
#price .price__effective b{
  font-size:32px;
  color:#B86451;
}
#price .price__compare b small{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
}
#price .price__compare-arrow{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#F3B58A,#D97D61);
  color:#FFF;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  box-shadow:0 6px 14px rgba(217,125,97,.18);
}

#price .price__standard{
  min-width:300px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:7px 14px;
  padding:14px 16px;
  border:1px solid rgba(100,167,160,.24);
  border-radius:4px;
  background:rgba(255,255,255,.7);
  color:#514943;
  text-align:left;
  white-space:normal;
}
#price .price__standard-label{
  grid-column:1/-1;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.045em;
  color:#796E67;
}
#price .price__standard b{
  font-family:var(--latin);
  font-size:28px;
  font-weight:400;
  line-height:1.15;
  color:#6D625C;
}
#price .price__standard b small{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
}
#price .price__ineligible{
  align-self:center;
  padding:6px 10px;
  border-radius:999px;
  background:#EEE9E4;
  color:#766A63;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.03em;
  white-space:nowrap;
}
#price .price__aid-note{
  margin-top:16px;
  padding:17px 18px;
  border-left:4px solid #E1A64D;
  background:linear-gradient(90deg,#FFF8E9,#FFFDF8);
  color:#6B625C;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.85;
}
#price .price__aid-note strong{
  display:block;
  margin-bottom:3px;
  color:#8A6542;
  font-size:12px;
  font-weight:700;
}@media (max-width:680px){
  #price .price__row{
    grid-template-columns:1fr;
    gap:17px;
    padding:20px 16px;
  }
  #price .price__compare{
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr) 26px minmax(0,1.12fr);
    gap:7px;
  }
  #price .price__regular{padding:11px 10px}
  #price .price__effective{padding:12px 10px}
  #price .price__compare b{font-size:21px}
  #price .price__effective b{font-size:26px}
  #price .price__compare b small{font-size:10px}
  #price .price__compare-label{font-size:9px}
  #price .price__compare-arrow{width:24px;height:24px;font-size:13px}
  #price .price__standard{width:100%;min-width:0}
  #price .price__standard b{font-size:25px}
  #price .price__aid-note{padding:15px 14px;font-size:11px}
}

/* ── 研修：Claude Code 講座詳細（既存セクション内に限定） ── */
#training .course-detail{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.8fr);
  gap:18px;
  margin-top:var(--sp-4);
  padding:30px;
  border:1px solid rgba(122,151,145,.24);
  border-radius:5px;
  background:
    radial-gradient(circle at 90% 0,rgba(238,233,248,.78),transparent 38%),
    linear-gradient(135deg,rgba(223,239,243,.75),rgba(255,251,247,.94));
  box-shadow:0 12px 32px rgba(107,98,92,.08);
}
#training .course-detail__main{min-width:0}
#training .course-detail__label{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#81716A;
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.08em;
}
#training .course-detail__title{
  margin-top:13px;
  color:#5F554F;
  font-family:var(--serif);
  font-size:clamp(21px,2vw,28px);
  font-weight:600;
  line-height:1.65;
  letter-spacing:.025em;
}
#training .course-detail__subhead{
  margin-top:22px;
  color:#72675F;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
#training .course-detail__profile{
  align-self:stretch;
  padding:23px 22px;
  border-left:4px solid #D98B70;
  border-radius:3px;
  background:linear-gradient(145deg,rgba(255,240,229,.92),rgba(244,238,248,.86));
}
#training .course-detail__profile p:last-child{
  margin-top:14px;
  color:#655C56;
  font-size:14px;
  line-height:2;
}@media (max-width:840px){
  #training .course-detail{grid-template-columns:1fr}
}@media (max-width:680px){
  #training .course-detail{
    gap:14px;
    margin-top:var(--sp-3);
    padding:22px 18px;
  }
  #training .course-detail__title{
    font-size:20px;
    line-height:1.7;
  }
  #training .course-detail__profile{padding:20px 17px}
}

/* ============================================================
   仕上げ：読みやすさ・ページ内移動・アクセシビリティ
   ============================================================ */
html{scroll-padding-top:96px}
section[id]{scroll-margin-top:96px}
body{text-wrap:pretty}
.h2,.hero__q,.svc__h,.message__lead,.cta h2,
.story-answer__title,.asset-story__title,.impact-story__title,.growth-story__title,
.asset-card__phrase,.asset-proof__head h3,.asset-story__statement strong{text-wrap:pretty;line-break:strict}

.skip-link{
  position:fixed;left:16px;top:12px;z-index:1000;
  transform:translateY(-160%);
  padding:12px 16px;border-radius:3px;
  background:var(--text-primary);color:var(--c-warmwhite);
  font-size:13px;font-weight:700;text-decoration:none;
  box-shadow:var(--shadow-200);
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}

a,button,input,textarea{transition:outline-offset .16s ease}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid #E1A64D;
  outline-offset:4px;
}
.form input:focus-visible,.form textarea:focus-visible{
  outline-color:#FFF3C4;
  border-color:#FFF3C4;
}@media (max-width:960px){
}@media (max-width:680px){
  html{scroll-padding-top:76px}
  section[id]{scroll-margin-top:76px}
}@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

          .tt-note{margin-top:var(--sp-3);font-size:13px;line-height:1.95;color:var(--text-muted)}
          .tt-note b{color:var(--text-primary)}@media(max-width:820px){}@media(max-width:820px){}

    .sim{margin-top:var(--sp-5);border:1px solid var(--border-default);background:var(--bg-card)}
    .sim__hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--border-default)}
    .sim__hd b{font-family:var(--serif);font-size:var(--fs-lead);font-weight:600;color:var(--text-primary)}
    .sim__hd span{display:block;margin-top:6px;font-size:13px;line-height:1.9;color:var(--text-muted)}
    .sim__open{flex-shrink:0;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
    .sim__body{padding:26px 24px}
    .sim__in{display:grid;grid-template-columns:1fr 1fr;gap:22px}@media(max-width:640px){.sim__in{grid-template-columns:1fr}}
    .sim__f label{display:block;font-size:13.5px;font-weight:700;color:var(--text-primary)}
    .sim__f small{display:block;margin-top:5px;font-size:12px;line-height:1.8;color:var(--text-muted)}
    .sim__ctl{display:flex;align-items:baseline;gap:8px;margin-top:12px}
    .sim__ctl input{width:130px;font-family:var(--latin);font-size:26px;font-weight:400;color:var(--text-primary);padding:8px 12px;border:1px solid var(--border-default);background:#fff}
    .sim__ctl input:focus{outline:2px solid var(--accent);outline-offset:1px}
    .sim__ctl span{font-size:13px;color:var(--text-muted)}
    .sim__warn{margin-top:20px;padding:13px 16px;border-left:3px solid var(--accent);background:var(--bg-alt);font-size:13px;line-height:1.9;color:var(--text-body)}
    .sim__out{margin-top:24px;border-top:1px solid var(--border-default)}
    .sim__r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--border-default)}
    .sim__r span{font-size:13.5px;color:var(--text-body)}
    .sim__r b{font-family:var(--latin);font-size:19px;font-weight:400;color:var(--text-primary);white-space:nowrap}
    .sim__r--minus b{color:var(--accent)}
    .sim__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:20px;padding:20px 22px;background:var(--bg-alt)}
    .sim__total span{font-size:14px;font-weight:700;color:var(--text-primary)}
    .sim__total b{font-family:var(--latin);font-size:34px;font-weight:400;line-height:1.1;color:var(--accent);white-space:nowrap}
    .sim__per{margin-top:10px;font-size:12.5px;color:var(--text-muted);text-align:right}
    .grant__note{margin-top:var(--sp-4);font-size:12.5px;line-height:2;color:var(--text-muted)}
    .grant__note b{color:var(--text-primary)}
    

/* 分割ページへの導線（2026-07-27追加） */

/* 作れるもの一覧（2026-07-27追加） */
.built{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:var(--sp-5);background:var(--border-default);border:1px solid var(--border-default)}@media(max-width:1000px){.built{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.built{grid-template-columns:1fr}}
.built__i{background:var(--bg-card);padding:24px 22px}
.built__i b{display:block;font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.65;color:var(--text-primary)}
.built__i p{margin-top:9px;font-size:13px;line-height:1.95;color:var(--text-body)}
.built__i .tagx{display:inline-block;margin-bottom:10px;font-family:var(--latin);font-size:11px;letter-spacing:.08em;color:var(--accent)}
.built__i--hit{background:var(--bg-alt)}

/* 講師プロフィール拡張（2026-07-27追加） */
/* 顔写真（2026-07-28追加）。原寸が縦長(407×850)のためそのまま出すと縦に伸びすぎる。
   4:3 に切り取り、顔が切れないよう object-position を上寄りにしている */
/* height:auto を明示しないと、img の height 属性(850)が効いて aspect-ratio が無視される */
.prof__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;
  margin-top:14px;border:1px solid var(--border-default)}
.prof__name{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--text-primary);margin-top:14px}
.prof__name span{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:4px}
.course-detail__profile p+p{margin-top:12px}
.prof__pts{list-style:none;margin-top:14px;border-top:1px solid var(--border-default)}
.prof__pts li{padding:11px 0;border-bottom:1px solid var(--border-default);font-size:13px;line-height:1.9;color:var(--text-body)}
.prof__pts b{color:var(--text-primary)}

/* 資料ダウンロード（2026-07-27追加） */
.dl{display:inline-flex;align-items:center;gap:10px;margin-top:var(--sp-4);padding:14px 22px;border:1px solid currentColor;color:var(--accent);text-decoration:none;font-weight:700;font-size:14px}
.dl small{font-weight:400;font-size:12px;opacity:.8}
.cta .dl{color:var(--text-invert);border-color:rgba(255,255,255,.45)}

/* ============================================================
   2026-07-27 可読性の正規化
   参考実測: 和から（wakara.co.jp）本文 16px / 行間1.88 / 1行69文字
   ・追加セクションが 13〜13.5px・行間1.95〜2.0 でハードコードされていたのをトークンへ戻す
   ・Codex批評「日本語の行間が緩すぎる（1.75〜1.9で十分）」への対応
   ============================================================ */
:root{ --lh-body:1.85; --lh-lead:1.8; }

/* 本文の最小サイズを底上げ（14px以下を作らない） */
.built__i p,
.hon__i p,
.tt-note,
.faq__a,
.grant__note,
.sim__hd span,
.prof__pts li,
.course-detail__profile p{
  font-size:15px;
  line-height:var(--lh-body);
}
.built__i p,
.tt-note,
.grant__note,
.sim__hd span{ font-size:14px }

/* リード文：行間を締め、1行の文字数を抑える（48字→38字前後） */
.lede{ line-height:var(--lh-lead); max-width:38em }

/* 見出し直下の詰まりを整える */
.built__i b,.hon__i b{ line-height:1.6 }
.steps .d{ line-height:var(--lh-body) }

/* ============================================================
   2026-07-27 【方針B】和からから採るのは「書体・文字サイズ・行間」だけ。
   色・背景・グラデーション等の意匠はデザイン④のまま維持する。
   和から実測: 本文16px / 行間1.88 / Noto Sans JP / 見出しw700
   ※ このブロックでは色と背景に一切触れないこと（触ると④の意匠が崩れる）
   ※ 明朝に戻す場合はこのブロックを削除すれば元に戻ります
   ============================================================ */

/* ① 2026-08-29 書体の確定（名刺の実物に合わせる）。
      本人の名刺は「AIって魔法だ。」の1行だけが明朝で、社名・氏名・本文・ラベルは全部ゴシック。
      2026-08-28 に --serif/--sans の両方を 旧書体（ng-list で禁止） にしたのは行き過ぎで、
      サイト全体が薄い明朝になり「ショボい」と却下された（ng-list 2026-07-28 で
      旧書体（ng-list で禁止） は名指しで禁止済みだった）。ここで撤回する。
      ・見出し(--serif) = Yu Mincho。2026-07-26 に唯一勝った代表メッセージと同じ書体
      ・本文・UI(--sans) = ゴシック。Windows で Yu Gothic は線が細く貧弱に出るため Meiryo を前に置く
        （実サイト14件の実測で「フォントがショボい」の直接原因と判明。ng-list 2026-07-28） */
:root{
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","BIZ UDPMincho","MS PMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic","YuGothic","BIZ UDPGothic",system-ui,sans-serif;
}
h1,h2,h3,h4,
.hero__q,.h2,.svc__h,.svc__t,.message__lead,.cta h2,
.course-detail__title,.course-detail__subhead,
.built__i b,.grant__box h3,.prof__name,.faq__q{
  font-family:var(--serif);
  font-weight:700;
}
/* ロゴだけは④の欧文書体を維持する */
.hd__logo,.ft__logo{ font-family:var(--latin); }

/* ② 文字サイズ：13.5 / 16 / 18 / 25 の4段に寄せる（和から準拠。④は13〜15pxが混在していた） */
:root{ --fs-body:16px; --fs-sm:13.5px; --fs-lead:18px; --fs-label:13.5px; }
.lede,.hero__sub{ font-size:18px; }
.svc__b,.faq__a,.built__i p,.hon__i p,.steps .d,.message__body,
.course-detail__profile p,.prof__pts li,.grant__box p,.fit__col li,
.sim__r span,.simrow span{ font-size:16px; }
.tt-note,.grant__note,.sim__hd span,.price__note,.src,.note,.case__cap,cite,
.form__note,.form__direct,.eyebrow,.svc__no,.course-detail__label,
.tt-mins,.tagx,.steps .t,.req,.hero__proof span,.hd__nav a,.page-nav__in a{ font-size:13.5px; }
.faq__q,.built__i b,.grant__box h3,.svc__t{ font-size:18px; }
.course-detail__subhead{ font-size:16px; }
.course-detail__title,.svc__h,.message__lead{ font-size:25px; }

/* ③ 行間：日本語本文は1.88、見出しは締める（④は本文2.0で間延びしていた） */
:root{ --lh-body:1.75; --lh-lead:1.7; --lh-h2:1.45; --lh-h3:1.5; }
body{ line-height:1.75; }
.lede,.hero__sub,.svc__b,.faq__a,.built__i p,.hon__i p,
.steps .d,.message__body,.prof__pts li{ line-height:1.75; }
.tt-note,.grant__note,.src,.note,.price__note{ line-height:1.8; }
.h2,.cta h2,.svc__h,.message__lead,.course-detail__title{ line-height:1.45; }
.built__i b,.grant__box h3,.faq__q{ line-height:1.6; }

/* ④ リード文の1行の長さを整える（和からは約69字／④は48字で間延びして見えていた） */
.lede{ max-width:46em; }

/* 採用コストとの比較（2026-07-27追加） */
.roi{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:var(--sp-5);border:1px solid var(--border-default);background:#fff}@media(max-width:760px){.roi{grid-template-columns:1fr}}@media(max-width:760px){}@media(max-width:760px){}

/* ── 電話番号（2026-07-28 追加）─────────────────
   40〜50代の決裁者にとって電話は最も心理的コストの低い接点で、
   稟議で「ここに聞いてみて」と第三者に渡せる材料でもある。
   CTA・フッター・会社概要・プライバシー窓口の4箇所に置く。 */
.cta p.cta__tel{margin-top:var(--sp-5);font-size:14px;color:#D7E1E4}
.cta__tel a{display:inline-block;margin-top:6px;padding:6px 4px;
  font-family:var(--latin);font-size:clamp(28px,3.4vw,38px);font-weight:700;
  letter-spacing:.03em;line-height:1.25;color:#FFF9F2;text-decoration:none;
  border-bottom:2px solid rgba(255,249,242,.5)}
.cta__tel a:hover,.cta__tel a:focus-visible{border-bottom-color:#FFF9F2}
.cta p.cta__tel small{display:block;margin-top:6px;font-size:13px;color:#D7E1E4}
.ft__tel a{color:var(--text-invert);text-decoration:none;border-bottom:1px solid var(--border-invert)}
.ft__tel a:hover{border-bottom-color:var(--text-invert)}
.corp__row a[href^="tel:"]{color:inherit;text-decoration:none;border-bottom:1px solid var(--border-default)}@media print{.cta__tel a{color:#0C3D50;border-bottom-color:#0C3D50}}

/* ── 2026-07-28 可読性の底上げ（40〜50代の決裁者向け）─────────────
   自ページのCSSコメントで既に「本文16px／14px以下を作らない」と決めていたが、
   ID詳細度に負けて複数箇所で無効化されていた。ここで最後に上書きして効かせる。
   対象は「読ませる文章」に限る（装飾的な英字ラベルは対象外）。 */
.facts cite{font-size:13px;opacity:1;color:#4E585B}
.sim__per{font-size:14px;line-height:1.9}
.pp{font-size:15px}
.form__row label .req{font-size:12px}
#price .price__compare-label,#price .price__standard-label{font-size:13px;line-height:1.5}
#price .price__ineligible{font-size:13px;white-space:normal}@media(max-width:960px){.hd__logo small{font-size:11.5px}}

/* Timerex 埋め込みがスマホで横にはみ出す。
   embed.js が iframe を 550px 固定の <div> で包むため、iframe だけでなく
   その包みも含めて全部を親幅に収める。 */
#timerex_calendar{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#timerex_calendar *{max-width:100%!important}
#timerex_calendar>div,#timerex_calendar iframe{width:100%!important;min-width:0!important}

/* スマホのページ内ナビが横に溢れ、最後の「無料で相談する」が画面外に出ていた。
   スクロールできることが分かるよう右端をぼかし、細いバーも戻す。 */@media(max-width:960px){
}

/* 問い合わせフォームの結果表示（送信成功／メーラーが立ち上がらない場合の代替） */
.cf-notice{margin-top:22px;padding:20px 22px;text-align:left;border-radius:4px;font-size:15px;line-height:1.9}
.cf-notice b{display:block;font-size:16px}
.cf-notice p{margin-top:10px;font-size:15px;color:inherit}
.cf-notice a{color:inherit;font-weight:700}
/* 2026-08-30 修正: 明るい地のフォームに白文字で、送信成功の表示が見えなかった。
   訪問者からは「押したら入力が消えて何も言われない」に見えるため、再送信か離脱を招く。 */
.cf-notice--ok{background:#E7F1E9;border:1px solid #BCD9C4;color:#1F3B2A}
.cf-notice--warn{background:#FFF9F2;border:1px solid var(--border-default,#DDD6CC);color:var(--text-primary,#17262D)}
.cf-notice--warn a{color:var(--accent,#0C3D50)}
.cf-notice__tel a{font-family:var(--latin);font-size:26px;letter-spacing:.03em;text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px}
.cf-notice__tel span{display:block;margin-top:4px;font-size:13px;color:var(--text-muted,#5B6669)}
.cf-notice__ta{width:100%;margin-top:14px;padding:12px;font-size:14px;line-height:1.8;
  border:1px solid var(--border-default,#DDD6CC);background:#fff;color:var(--text-primary,#17262D)}
.cf-notice__copy{margin-top:10px;padding:12px 20px;border:0;cursor:pointer;font-size:14px;font-weight:700;
  background:var(--accent,#0C3D50);color:#FFF9F2}

/* ── 2026-07-28 修正 ──────────────────────────────
   training.html の「2日間の流れ」が、幅の狭い course-detail 内で
   4カラムに押し込まれ1行6文字まで潰れていた。縦並びに戻して読めるようにする。
   （course-detail の外にある .steps は全幅なので4カラムのまま） */
#training .course-detail .steps{grid-template-columns:1fr;margin-top:10px}
#training .course-detail .steps li{
  display:flex;align-items:flex-start;gap:22px;min-height:0;
  padding:16px 2px;border-right:0;border-bottom:1px solid var(--border-default)}
#training .course-detail .steps li:last-child{border-bottom:0}
#training .course-detail .steps .t{flex:none;width:98px;padding-top:3px;font-size:12px}
#training .course-detail .steps .d{margin-top:0;font-size:14.5px;line-height:1.95}
#training .course-detail .steps .d b{font-size:15.5px;margin-bottom:5px}@media (max-width:680px){
  #training .course-detail .steps li{flex-direction:column;gap:6px}
  #training .course-detail .steps .t{width:auto}
}

/* ── 期限による差（参考: HDlab提案スライド 08「DEADLINE」）── */
.deadline{margin-top:var(--sp-5)}
.deadline__lead{font-size:16px;line-height:1.95;color:var(--text-body)}
.deadline__cmp{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.deadline__box{flex:1 1 300px;border:2px solid var(--border-default);background:#fff;padding:26px 28px 28px}
.deadline__box.is-now{border:3px solid var(--accent-strong)}
.deadline__box .lb{font-size:15px;font-weight:700;color:var(--text-label)}
.deadline__box.is-now .lb{color:var(--accent-strong)}
.deadline__box .calc{margin-top:6px;font-size:14px;color:var(--text-muted)}
.deadline__box .amt{margin-top:14px;font-family:var(--latin);font-size:clamp(38px,5.2vw,58px);
  font-weight:800;line-height:1;color:var(--text-body);white-space:nowrap}
.deadline__box.is-now .amt{color:var(--accent-strong)}
.deadline__box.is-after .amt{color:#B03A2E}
.deadline__box .amt em{font-style:normal;font-family:var(--sans);font-size:.34em;font-weight:700;margin-left:5px}
.deadline__diff{margin-top:20px;background:var(--accent);color:var(--c-warmwhite);
  padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.deadline__diff .t{font-size:16px;font-weight:700}
.deadline__diff .n{font-family:var(--latin);font-size:clamp(28px,4vw,40px);font-weight:800;white-space:nowrap}
.deadline__diff .n em{font-style:normal;font-family:var(--sans);font-size:.4em;font-weight:700;margin-left:4px}
.deadline__note{margin-top:14px;font-size:13.5px;line-height:1.85;color:var(--text-muted)}

/* ============================================================
   部門別の活用例（#usecase）— 2026-07-28
   色帯ヘッダーつき4カラムカード。見出しは帯で色分けし、
   本文は短い箇条書き3点に限定して一覧性を上げる。
   配色は既存の4色システム（coral / amber / blue / lavender）を踏襲。
   ============================================================ */
#usecase{
  background:
    radial-gradient(circle at 4% 8%,rgba(251,230,225,.5),transparent 24rem),
    radial-gradient(circle at 96% 90%,rgba(238,233,248,.55),transparent 28rem),
    #FBFAF6;
}
#usecase .eyebrow{background:var(--blue-100)}
.uc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:52px}
.uc__card{
  display:flex;flex-direction:column;border-radius:4px;overflow:hidden;
  background:#FFFDF9;border:1px solid rgba(9,39,54,.1);
  box-shadow:0 16px 40px rgba(9,39,54,.08);
}
.uc__hd{padding:15px 14px 14px;text-align:center;color:#FFFDF9}
.uc__hd small{display:block;font-family:var(--latin);font-size:9px;letter-spacing:.22em;opacity:.82}
.uc__hd b{display:block;margin-top:5px;font-size:15.5px;font-weight:700;letter-spacing:.05em}
.uc__card--sales .uc__hd{background:linear-gradient(135deg,#EF8B73,#D96A5B)}
.uc__card--plan  .uc__hd{background:linear-gradient(135deg,#E1A64D,#C9872B)}
.uc__card--hr    .uc__hd{background:linear-gradient(135deg,#5BA2B5,#347E92)}
.uc__card--ops   .uc__hd{background:linear-gradient(135deg,#8B75B7,#6D5B97)}
.uc__list{list-style:none;margin:0;padding:20px 18px 24px;display:grid;gap:12px;align-content:start}
.uc__list li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.85;color:#45565D}
.uc__list li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%}
.uc__card--sales .uc__list li::before{background:#EB7462;box-shadow:0 0 0 3px var(--coral-100)}
.uc__card--plan  .uc__list li::before{background:#E1A64D;box-shadow:0 0 0 3px var(--amber-100)}
.uc__card--hr    .uc__list li::before{background:#5BA2B5;box-shadow:0 0 0 3px var(--blue-100)}
.uc__card--ops   .uc__list li::before{background:#8B75B7;box-shadow:0 0 0 3px var(--lavender-100)}
.uc__after{margin-top:32px;font-size:14px;line-height:2;color:#6B625C}
.uc__after a{color:#A55B52}@media (prefers-reduced-motion:no-preference){
  .uc__card{transition:transform .35s ease,box-shadow .35s ease}
  .uc__card:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(9,39,54,.13)}
}@media (max-width:1060px){.uc{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:680px){.uc{grid-template-columns:1fr;margin-top:36px;gap:14px}}@media print{
  .uc__card{box-shadow:none;border:1px solid #000}
  .uc__hd{color:#000!important;background:#fff!important;border-bottom:1px solid #000}
}

/* ============================================================
   FAQ の表示崩れ修正 — 2026-07-28
   .faq__q / .faq__a は display:flex だったため、答えの文中に <b> や <a> を
   置くと、その前後の地の文がそれぞれ「匿名フレックスアイテム」になり、
   1つの文が縦の列に分断されて表示されていた（training.html のQ&A2件で発生）。
   Q/A のマーカーだけを絶対配置にして、本文は通常の文章として流す。
   ============================================================ */
.faq__q,.faq__a{display:block;position:relative;padding-left:46px}
.faq__q>i,.faq__a>i{position:absolute;left:0;top:0}
.faq__a>i{width:30px;text-align:center}@media (max-width:680px){
  .faq__q,.faq__a{padding-left:38px}
  .faq__q>i{min-width:26px;height:26px}
  .faq__a>i{width:26px}
}

/* ============================================================
   料金ページ H1 の折り返し修正 — 2026-07-28
   左カラムは約360px固定なのに、見出しは clamp(30px,3vw,44px) で
   画面が広いほど大きくなる。結果1440pxでは1行6文字しか入らず、
   「助成／金」のように語の途中で改行されていた。
   区切りを span で指定し、その幅に収まるところまで字を小さくする。
   ============================================================ */
.price__h1 span{display:block}
.price__h1.h2{font-size:clamp(26px,2.4vw,34px);line-height:1.5;max-width:none}@media (max-width:840px){
  .price__h1{font-size:clamp(26px,4.4vw,36px)}
  .price__h1 span{display:inline}
}

/* ============================================================
   表示崩れの修正（監査で検出）— 2026-07-28
   ============================================================ */

/* 1) トップページに常時発生していた横スクロール。
   .hero::before は inset の右が -4%、.hero::after の "RARETHREE" は
   white-space:nowrap ＋ 下限70px で、いずれも画面外へ出る。
   .hero に overflow の指定が無いため、そのはみ出しが文書幅になっていた。
   （sticky ヘッダーを壊さないよう hidden ではなく clip を使う） */
.hero{overflow-x:clip}
.hero::after{max-width:100%;overflow:hidden}

/* 2) 資料ダウンロードのボタン。地の文と <small> が同じ flex 行に並び、
   狭い画面で「サービス資料をダ／ウンロード」と語中で改行されていた。
   ラベルを span で包んだうえで、行を折り返せるようにする。 */
.dl{flex-wrap:wrap}
.dl>span{white-space:nowrap}@media (max-width:480px){
  .dl{flex-direction:column;align-items:flex-start;gap:4px}
}

/* 3) 研修ページのカリキュラム見出し。固定幅98pxに対して
   「CURRICULUM 01」が107px必要で2行に折れていた。 */
#training .course-detail .steps .t{width:auto;min-width:112px;white-space:nowrap}

/* 4) チャットボットのデモのヘッダー。地の文が flex で圧縮されていた。 */
.chatbox .bar{flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════
   2026-07-29 サイト診断の反映
   ・FV直後の統計3連発を「2日目に持ち帰るもの」＋デモ導線へ置き換え
   ・部門別カードを「いまの手作業 → 作るツール」の形に
   ・スマホでヘッダーのリンクが消えていたのでメニューを追加
   ═══════════════════════════════════════════════════════════ */

/* ── 持ち帰るもの ───────────────────── */
.take{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:var(--sp-4);
  border:1px solid var(--border-default);border-radius:4px;
  background:#FFFDF9;overflow:hidden;
}
.take__i{padding:32px 34px 30px}
.take__i+.take__i{border-left:1px solid var(--border-default)}
.take__n{
  display:block;font-family:var(--latin);font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--accent-strong);
}
.take__i b{
  display:block;margin-top:12px;font-size:19px;line-height:1.6;font-weight:700;
  color:var(--text-primary);
}
.take__i p{margin-top:12px;font-size:15px;line-height:1.95;color:var(--text-body)}
.take__demo{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;
  margin-top:var(--sp-4);padding:24px 28px;
  border:1px solid var(--border-default);border-radius:4px;
  background:var(--accent-pale,#E8EEF0);
}
.take__demo p{flex:1 1 340px;margin:0;font-size:15px;line-height:1.95;color:var(--text-body)}
.take__demo .btn{flex:none}
.take__demo span{flex:1 1 100%;font-size:13px;color:var(--text-muted)}@media (max-width:760px){
  .take{grid-template-columns:1fr}
  .take__i+.take__i{border-left:0;border-top:1px solid var(--border-default)}
  .take__i{padding:24px 22px 22px}
  .take__i b{font-size:17px}
  .take__demo{padding:20px 20px 18px}
  .take__demo .btn{width:100%;text-align:center}
}

/* ── 部門別カード：いまの手作業 → 作るツール ───────────────────── */
.uc__list li{padding-left:0}
.uc__list li::before{display:none}
.uc__list li+li{margin-top:2px;padding-top:14px;border-top:1px dashed rgba(9,39,54,.14)}
.uc__list li>b{
  display:block;font-size:14.5px;font-weight:700;line-height:1.6;color:#173341;
}
.uc__list li .now{
  display:block;margin-top:6px;font-size:12.5px;line-height:1.8;color:#7E8C92;
}
.uc__list li .aft{
  display:block;margin-top:5px;font-size:13.5px;line-height:1.8;color:#3B4E56;
}
.uc__list li .aft::before{content:"→ ";font-weight:700}
.uc__card--sales .uc__list li .aft::before{color:#D9584A}
.uc__card--plan  .uc__list li .aft::before{color:#C9872B}
.uc__card--hr    .uc__list li .aft::before{color:#3E8296}
.uc__card--ops   .uc__list li .aft::before{color:#7059A6}

/* 対象業務セレクトの補足 */

/* ── スマホのメニュー ─────────────────────
   960px以下でヘッダーのリンクが display:none にされ、開く手段が無かった。 */
.hd__burger{display:none}@media (max-width:960px){
  .hd__in{position:relative}
  .hd__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 9px;margin-left:8px;
    background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .hd__burger span{
    display:block;height:2px;border-radius:2px;background:var(--accent);
    transition:transform .25s ease,opacity .18s ease;
  }
  .hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hd__nav{
    position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--c-warmwhite,#FFFDF9);
    border-bottom:1px solid var(--border-default);
    box-shadow:0 20px 44px rgba(12,61,80,.16);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .28s ease,visibility .28s ease;
  }
  .hd__nav.is-open{max-height:80vh;overflow-y:auto;visibility:visible}
  .hd__nav a:not(.hd__cta){
    display:block!important;padding:16px 22px;font-size:15px;
    border-top:1px solid var(--border-default);
  }
  .hd__nav a:not(.hd__cta)::after{display:none}
  .hd__nav a:not(.hd__cta):first-child{border-top:0}
  .hd__nav .hd__cta{margin:16px 22px 22px;text-align:center;font-size:14px;padding:15px 22px}
  .hd.over-dark .hd__nav a:not(.hd__cta){color:var(--text-body)}
}

/* 開発支援は金額が確定していないため「お見積もり」表記。
   数字用の Latin 28px だと日本語が間延びするので、和文用に落とす。 */
#price .price__standard b.price__quote{
  font-family:var(--sans);
  font-size:21px;
  letter-spacing:.04em;
}@media (max-width:680px){
  #price .price__standard b.price__quote{font-size:19px}
}

/* ═══════════════════════════════════════════════════════════
   2026-07-29 片岡さん指示: この数字のフォントはHP全体で使わない。
   正体は Georgia。Georgia の数字は「オールドスタイル数字（text figures）」で、
   3・4・5・7・9 がベースラインより下に落ち、0・1・2 が小文字の高さになる。
   そのため「100件」「2.9ヶ月」「36万円」が不揃いに見えていた。
   Georgia は --latin からしか呼ばれていないので、ここを差し替えれば全ページから消える。
   （--serif も既に Noto Sans JP に統一済みなので、サイト全体で書体が揃う）
   ═══════════════════════════════════════════════════════════ */
:root{
  --latin:"Noto Sans JP","Helvetica Neue",Arial,"Hiragino Sans",
          "Yu Gothic UI","Yu Gothic","YuGothic",Meiryo,sans-serif;
  /* 万一オールドスタイル数字を既定に持つ書体へ落ちても、数字だけは通常の高さに揃える */
  font-variant-numeric:lining-nums;
}
/* スライダーや試算で数字が動く箇所は、桁が変わっても横幅がガタつかないよう等幅数字にする */
#rsim .sim__vv,
.sim__r b,.sim__total b,.sim__ctl input,
.facts b,.case__num,.roi__v,.price__v,
.deadline__box .amt,.deadline__diff .n{
  font-variant-numeric:lining-nums tabular-nums;
}

/* 代表メッセージの署名の下に置く経歴。事実だけを1行で並べる小さめの塊にする。 */@media (max-width:680px){
}

/* ===== 2026-08-02 「木更津市唯一の対面型AI研修会社」ラベル =====
   ヒーロー最上部に会社の位置づけラベルを置く。地元（木更津）の会社であることを
   最初の1行で示すのが目的。「唯一」は景品表示法の最上級表示にあたるため、
   同じヒーロー内に調査時点と調査方法の注記(.hero__note)を必ず併置する。
   根拠資料: 研修事業/01_リサーチ/木更津市_AI研修事業者_全数調査_20260802.md
   .hero__in は 841px 以上でのみ grid のため、grid-row の差し替えもその範囲に限定する。 */
/* ヒーローは紙×インクの明るい配色（.hero color:#514943 / 背景 #FDFCF9〜#F3F0F9）。
   バッジもその配色に合わせる。マークは見出しの em と同じ #B85F52 を使い、
   白抜き文字でコントラストを確保する（#FFF9F2 on #B85F52 ≒ 4.6:1）。 */
.hero__note{
  margin-top:18px;max-width:46em;
  font-family:var(--sans);font-size:11.5px;line-height:1.85;letter-spacing:.01em;color:#6B625C;
}@media (min-width:841px){
  .hero__note{grid-column:1/7;grid-row:6}
}@media (max-width:680px){
  .hero__note{margin-top:16px;font-size:11px}
}

/* ===== 2026-08-03 研修の実施実績（#case 内・ダーク背景） =====
   既存の .case（AI開発実績）の下に、研修の実施実績を並べる。
   親セクション .sec--dark は #0D2530→#163946 のネイビーなので、文字は明るい側で組む。
   記録の正本: 研修事業/05_運営/研修実施実績台帳.md */
.tcase{
  margin-top:clamp(48px,6vw,76px);padding-top:clamp(36px,4vw,52px);
  border-top:1px solid rgba(255,255,255,.14);
}
.tcase__lb{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:#C7D9DE;display:inline-flex;align-items:center;gap:12px;
}
.tcase__lb::before{content:"";width:26px;height:1px;background:var(--accent-strong)}
.tcase__in{
  margin-top:26px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.tcase__ph{margin:0}
.tcase__ph img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
}
.tcase__name{
  font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-weight:600;color:#FFFDF9;
  line-height:1.5;
}
.tcase__name span{
  display:block;margin-top:8px;
  font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:#B7C7CC;
}
.tcase__b > p:not(.tcase__name){
  margin-top:18px;font-size:var(--fs-body);line-height:1.98;color:var(--text-invert-body,#C9D6DA);
}
.tcase__b b{color:#FFFDF9}
.tcase__made{
  margin-top:22px;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
}
.tcase__made li{
  padding:9px 15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.05);
  font-family:var(--sans);font-size:13px;font-weight:600;color:#E4F0F2;letter-spacing:.02em;
}@media (max-width:840px){
  .tcase__in{grid-template-columns:1fr;gap:26px}
}@media (max-width:680px){
  .tcase{margin-top:40px;padding-top:32px}
  .tcase__made li{font-size:12px;padding:8px 13px}
}

/* 研修実績の中の「講師より」コメント。お客様の声ではなく当社側の所感なので、
   ラベルを必ず「講師より」とし、署名を入れて誰の言葉か分かる形にする。 */@media (max-width:840px){
}@media (max-width:680px){
}

/* ===== 2026-08-17 ヒーロー見出しのはみ出し対策 =====
   h1 は .hero__q-line に white-space:nowrap がかかっており折り返さない。
   「御社の売上を上げることです。」は14文字あり、従来の clamp(36px,3.65vw,56px) だと
   1060〜1900px 付近でカラム幅(grid-column:1/8)を超え、右隣の写真(8/13)に重なっていた。
   カラムに収まる係数まで下げる。max は 56px のまま（1900px以上では従来と同じ見た目）。 */@media (max-width:680px){
  /* モバイルは block レイアウトで写真と横に並ばないため、従来値を維持 */
}

/* ============================================================
   2026-08-21 トップページ第1段階：ストーリー型導入
   ファーストビューでは一つの宣言だけを見せ、課題→答えの順に読む。
   ============================================================ */
.home .story-hero{
  min-height:100svh;
  background:#10191e;
}
.home .story-hero::before{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,13,18,.73) 0%,rgba(5,13,18,.46) 48%,rgba(5,13,18,.13) 78%,rgba(5,13,18,.18) 100%),
    linear-gradient(0deg,rgba(5,13,18,.58) 0%,transparent 48%,rgba(5,13,18,.12) 100%);
}
.home .story-hero::after{content:none}
.story-hero__kicker{
  margin:0 0 28px;
  color:rgba(255,255,255,.76);
  font-family:var(--latin);
  font-size:14px;
  font-weight:800;
  letter-spacing:.2em;
}
.home .story-hero__title{
  max-width:11em;
  margin:0;
  color:#fff;
  font-size:clamp(60px,7vw,108px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.055em;
  text-shadow:0 8px 36px rgba(0,0,0,.24);
}
.home .story-hero__title em{color:#ff8a74}
.home .story-hero__title em::after{height:5px;bottom:-.04em;background:#ff806b}@media (max-width:840px){
  .home .story-hero__title{font-size:clamp(43px,11vw,62px);line-height:1.28;letter-spacing:-.045em}
  .home .story-hero::before{background:linear-gradient(180deg,rgba(5,13,18,.38),rgba(5,13,18,.52) 48%,rgba(5,13,18,.8))}
}@media (prefers-reduced-motion:reduce){
}

/* ============================================================
   2026-08-20 WIDE & READABLE REVISION
   秋田ページの広がりを全ページへ展開し、50〜60代にも読みやすくする
   ============================================================ */
:root{
  --fs-body:17px;
  --fs-sm:15px;
  --fs-label:14px;
}
body{font-size:17px;line-height:1.9}
.wrap{max-width:1400px;padding-inline:clamp(28px,4.5vw,72px)}
.hd__in{max-width:1440px;padding-inline:clamp(24px,3.5vw,52px)}
.akita-hero{max-width:1440px;padding-inline:clamp(32px,5vw,76px)}

.h2,.cta h2{font-size:clamp(42px,4.6vw,68px)}
.lede,.hero__sub,.message__body,.akita-result__grid p,.akita-story__body>p:not(.akita-kicker):not(.akita-story__sign){font-size:18px}
.svc__b,.case__b,.course-detail__body,.grant__box p,.faq__i p,.form label,.corp__row,.price__n span,.price__note,.grant__note{font-size:16px;line-height:1.9}
.eyebrow,.hero__badge,.hero__difference-label,.hero__difference-grid span,.message__label,.message__sign .role,.message__figure figcaption,.akita-kicker,.akita-hero__facts span,.akita-hero__photo figcaption,.akita-result__grid article>span,.akita-story__sign{font-size:15px}
.hero__note,.message__sign .roman,.message__bio-lb,.facts cite{font-size:14px;line-height:1.75}

/* 料金ページは文章を細い左列へ閉じ込めず、広い編集レイアウトにする */
#price .wrap{grid-template-columns:minmax(300px,.72fr) minmax(0,1.58fr);gap:40px clamp(56px,6vw,96px)}
#price .price{min-width:0;padding:20px;border-radius:24px}
#price .price__row{grid-template-columns:minmax(210px,.82fr) minmax(0,1.18fr);gap:28px;padding:26px;min-width:0;border-radius:16px;overflow:hidden}
#price .price__n{min-width:0;font-size:17px;overflow-wrap:anywhere}
#price .price__compare{width:100%;min-width:0;grid-template-columns:minmax(120px,1fr) 34px minmax(150px,1.15fr)}
#price .price__regular,#price .price__effective,#price .price__standard{min-width:0}
#price .price__compare-label{font-size:14px;letter-spacing:0;overflow-wrap:anywhere}
#price .price__compare b{font-size:30px}
#price .price__effective b{font-size:38px}
#price .price__compare b small{font-size:14px}
#price .price__standard{width:100%;padding:20px;white-space:normal}
#price .price__standard-label,#price .price__ineligible{font-size:14px}
#price .price__quote{font-size:22px}
#price .price__aid-note{font-size:14px;line-height:1.8}@media (max-width:1120px){
  #price .wrap{display:block}
  #price .price{margin-top:48px}
}@media (max-width:960px){
}@media (max-width:780px){
  #price .price__row{grid-template-columns:1fr;gap:18px}
  #price .price__compare{grid-template-columns:minmax(0,1fr) 30px minmax(0,1.12fr)}
}

/* 第7段階：業務改善を「工程数 → 1回入力 → 完成物」で即読化 */
.impact-flow{grid-template-columns:minmax(145px,.78fr) minmax(160px,1fr) minmax(190px,1.15fr);min-height:430px}
.impact-flow__before,.impact-flow__input,.impact-flow__after{display:flex;min-width:0;flex-direction:column;padding:38px clamp(20px,2.4vw,36px)}
.impact-flow__before{justify-content:flex-start;background:#ece8e2;color:#4b4743}
.impact-flow__before>p,.impact-flow__input>p,.impact-flow__after>p{margin:0 0 28px;font-family:var(--latin);font-size:12px;font-weight:900;letter-spacing:.18em}
.impact-flow__before>strong{display:flex;align-items:flex-end;gap:7px;font-family:var(--latin);font-weight:800;line-height:.85}
.impact-flow__before>strong b{font-size:clamp(64px,6vw,88px);font-weight:700;letter-spacing:-.07em}
.impact-flow__before>strong small{padding-bottom:8px;font-family:var(--sans);font-size:15px}
.impact-flow__before ol{display:flex;flex-wrap:wrap;gap:7px;margin:auto 0 0;padding:24px 0 0;border-top:1px solid rgba(63,55,51,.18);list-style:none}
.impact-flow__before li{display:inline-flex;padding:5px 8px;border:1px solid rgba(63,55,51,.2);border-radius:999px;font-size:11px;font-weight:700;line-height:1.4}
.impact-flow__before li::before{content:none}
.impact-flow__input{position:relative;justify-content:center;background:#fff;color:#3F3733;text-align:center}
.impact-flow__input::after{content:"";position:absolute;right:-8px;top:50%;z-index:2;width:14px;height:14px;border-top:2px solid #E97861;border-right:2px solid #E97861;transform:translateY(-50%) rotate(45deg)}
.impact-flow__input>p{color:#C04931;text-align:left}
.impact-flow__input strong{font-family:var(--serif);font-size:clamp(24px,2.3vw,34px);font-weight:600;line-height:1.45}
.impact-flow__input strong i{color:#C04931;font-family:var(--latin);font-size:20px;font-style:normal}
.impact-flow__input span{align-self:center;margin-top:26px;padding:8px 15px;border:1px solid #E97861;border-radius:999px;color:#a84639;font-size:13px;font-weight:900}
.impact-flow__after{justify-content:center}.impact-flow__after strong{font-size:clamp(27px,2.4vw,37px);line-height:1.4}
.impact-flow__after ul{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 0;padding:0;list-style:none}
.impact-flow__after li{padding:6px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:11px;font-weight:800}
.impact-flow__after span{margin-top:auto;padding-top:22px;font-size:16px}@media (max-width:680px){
  .impact-flow{grid-template-columns:1fr;min-height:0}
  .impact-flow__before,.impact-flow__input,.impact-flow__after{padding:30px 25px}
  .impact-flow__before{min-height:260px}.impact-flow__before>strong b{font-size:70px}
  .impact-flow__input{min-height:250px}.impact-flow__input::after{right:auto;top:auto;left:50%;bottom:-8px;transform:translateX(-50%) rotate(135deg)}
  .impact-flow__input>p{text-align:left}.impact-flow__input strong{font-size:30px}
  .impact-flow__after{min-height:270px}.impact-flow__after strong{font-size:31px}.impact-flow__after span{margin-top:38px}
}@media (max-width:520px){
  body{font-size:16px}
  .wrap,.hero__in{padding-inline:20px}
  .h2,.cta h2{font-size:clamp(34px,10vw,44px)}
  #price .price{padding:10px;border-radius:18px}
  #price .price__row{padding:22px 18px}
  #price .price__compare{grid-template-columns:1fr;gap:12px}
  #price .price__compare-arrow{transform:rotate(90deg);margin:auto}
  #price .price__regular,#price .price__effective{padding:17px}
}

/* ===== 2026-08-20 ヒーロー見出しを文言の長さに依存させない =====
   各行を nowrap にすると、文言変更のたびに写真へ潜り込んで欠ける。
   見出しカラム内で自然に折り返し、PC・モバイルとも必ず全文を表示する。 */

/* ===== 2026-08-20 ファーストビューの差別化メッセージ ===== */
@keyframes hero-difference-orbit{
  to{transform:translate(-50%,-50%) rotate(1turn)}
}
@keyframes hero-difference-glow{
  0%,58%,100%{box-shadow:inset 5px 0 0 #B85F52,0 14px 34px rgba(102,90,83,.1)}
  72%{box-shadow:inset 5px 0 0 #EB7462,0 16px 42px rgba(235,116,98,.22),0 0 20px rgba(243,198,109,.2)}
}@media (prefers-reduced-motion:no-preference){
}@media (prefers-reduced-motion:reduce){
}@media (min-width:841px){
  .hero__note{grid-row:7}
}@media (max-width:840px){
}@media (max-width:520px){
}

/* ===== 2026-08-20 代表取締役・取締役の2つのメッセージ ===== */@media (max-width:680px){
}

/* ===== 2026-08-20 50〜60代の経営者を想定した文字の視認性 ===== */
.hero__note{
  color:#5F5752;
  font-size:13.5px;
  line-height:1.8;
}
.hd__nav a,
.page-nav__in a,
.eyebrow{font-size:14px}
.hd__logo small{font-size:12.5px}@media (max-width:680px){
  .hero__note{font-size:13.5px}
}

/* ===== 2026-08-20 ヒーロー見出し・パズル完成アニメーション ===== */@media (prefers-reduced-motion:no-preference){
}
@keyframes puzzle-char-lock{
  0%{
    opacity:0;
    transform:translate3d(var(--puzzle-x),var(--puzzle-y),0) rotate(var(--puzzle-r)) scale(.58);
    filter:blur(5px);
  }
  72%{
    opacity:1;
    transform:translate3d(0,0,0) rotate(0) scale(1.07);
    filter:blur(0) brightness(1.28);
    text-shadow:0 0 16px rgba(235,116,98,.38);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) rotate(0) scale(1);
    filter:none;
    text-shadow:none;
  }
}@media (prefers-reduced-motion:reduce),print{
}

/* ===== 2026-08-20 大きなメニューと地方研修実績への入口 ===== */@media (min-width:961px){
  .hd__in{max-width:1320px;padding-inline:24px}
  .hd__nav{gap:clamp(12px,1.45vw,22px)}
  .hd__nav a{font-size:15.5px;font-weight:600}
  .hd__nav a:not(.hd__cta){padding-block:29px}
  .hd__cta{font-size:15.5px}
}@media (max-width:960px){
  .hd__nav a:not(.hd__cta){font-size:16px;padding:18px 22px}
  .hd__nav .hd__cta{font-size:16px}
}

/* ===== 秋田県でのAI研修実績ページ ===== */
.akita-report{background:#FFFDF9;color:#514943}
.akita-hero{max-width:1320px;margin:0 auto;padding:clamp(64px,8vw,116px) 32px 88px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(50px,7vw,96px);align-items:center}
.akita-kicker{color:#A95348;font-size:15px;font-weight:700;letter-spacing:.04em}
.akita-kicker span{display:inline-block;margin-right:12px;padding:8px 13px;border-radius:999px;background:#FBE6E1}
.akita-hero h1{margin:25px 0 24px;font-size:clamp(40px,4.2vw,64px);line-height:1.35;letter-spacing:.01em;color:#433C38}
.akita-hero__lead{font-size:18px;line-height:2;color:#5F5752}
.akita-hero__facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.akita-hero__facts span{padding:10px 15px;border:1px solid #E4D5CC;border-radius:999px;background:#FFF;font-size:15px;font-weight:700}
.akita-hero__photo{position:relative;margin:0;padding:14px;background:#FFF;box-shadow:0 28px 70px rgba(86,67,57,.16)}
.akita-hero__photo::before{content:"";position:absolute;z-index:-1;inset:-22px 42% 38% -22px;background:linear-gradient(135deg,#EB7462,#E1A64D)}
.akita-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.akita-hero__photo figcaption{padding:14px 4px 2px;font-size:15px;font-weight:600;color:#5F5752}
.akita-result{padding:96px 0;background:#0D3949;color:#E9F2F4}
.akita-result .eyebrow{color:#FFD1C8}.akita-result .h2{color:#FFF}
.akita-result__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.akita-result__grid article{padding:38px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.akita-result__grid article>span{display:block;color:#F3C66D;font-size:15px;font-weight:700;letter-spacing:.12em}
.akita-result__grid h3{margin:13px 0 12px;color:#FFF;font-size:25px;line-height:1.5}
.akita-result__grid p{color:#D5E5E9;font-size:16px;line-height:1.9}
.akita-story{display:grid;grid-template-columns:1fr 1fr;min-height:700px;background:#F6F1EA}
.akita-story__photo img{width:100%;height:100%;object-fit:cover}
.akita-story__body{padding:clamp(64px,8vw,112px);align-self:center}
.akita-story__body h2{margin:22px 0 30px;font-size:clamp(32px,3.5vw,48px);line-height:1.5;color:#433C38}
.akita-story__body>p:not(.akita-kicker):not(.akita-story__sign){font-size:16px;line-height:2;color:#5F5752}
.akita-story__sign{margin-top:34px;padding-top:24px;border-top:2px solid #D98A4A;font-size:15px;line-height:1.8}
.akita-story__sign strong{font-size:22px}
.akita-policy{padding:104px 0}
.akita-policy .lede{font-size:18px;max-width:52em}
.akita-links{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:36px}
.akita-links>a:not(.btn){color:#8F473F;font-size:16px;font-weight:700;text-decoration-thickness:1px;text-underline-offset:6px}
.tcase__report-link{display:inline-block;margin-top:20px;padding:13px 18px;border-radius:3px;background:#FBE6E1;color:#8F473F!important;font-size:16px;font-weight:700;text-decoration:none}@media (max-width:960px){.akita-hero{grid-template-columns:1fr;padding-top:64px}.akita-hero__photo{max-width:720px}.akita-story{grid-template-columns:1fr}.akita-story__photo{height:min(75vw,620px)}}@media (max-width:680px){.akita-hero{padding:50px 20px 68px;gap:46px}.akita-hero h1{font-size:clamp(34px,10vw,44px)}.akita-hero__lead{font-size:16px;line-height:1.9}.akita-hero__photo{padding:8px}.akita-result{padding:72px 0}.akita-result__grid{grid-template-columns:1fr;margin-top:34px}.akita-result__grid article{padding:28px 24px}.akita-story__body{padding:58px 22px}.akita-story__body h2{font-size:31px}.akita-policy{padding:76px 0}.akita-policy .lede{font-size:16px}}

/* ===== 2026-08-20 差別化カード：深いネイビーと多層の光 ===== */
@keyframes hero-difference-luxe-glow{
  0%,100%{box-shadow:0 22px 54px rgba(9,39,54,.22),0 0 0 1px rgba(255,255,255,.06)}
  35%{box-shadow:0 24px 60px rgba(9,39,54,.28),0 0 24px rgba(255,208,105,.18),0 0 0 1px rgba(255,230,160,.18)}
  70%{box-shadow:0 24px 60px rgba(9,39,54,.28),0 0 26px rgba(104,213,255,.15),0 0 0 1px rgba(179,235,255,.14)}
}@media (prefers-reduced-motion:no-preference){
}@media (prefers-reduced-motion:reduce){
}@media (max-width:520px){
}

/* ===== 2026-08-20 地域ページの共通メニュー ===== */@media (min-width:961px){
}@media (max-width:960px){
}

/* ===== 2026-08-20 ヘッダーを全ページで常時表示 ===== */
body{padding-top:82px}
.hd{position:fixed;left:0;right:0;top:0;width:100%;z-index:100}@media (max-width:960px){
  .hd__nav.is-open{max-height:calc(100dvh - 82px)}
}@media (max-width:680px){
  body{padding-top:68px}
  .hd__nav.is-open{max-height:calc(100dvh - 68px)}
  html{scroll-padding-top:82px}
  section[id]{scroll-margin-top:82px}
}

/* ============================================================
   2026-08-20 2026 EDITORIAL SYSTEM
   大きな文字、温かい余白、少数の強い面、短く意図的な動き
   ============================================================ */
:root{
  --bg-base:#FAF4EF;
  --bg-sub:#F1E7DE;
  --text-heading:#3F3733;
  --text-body:#70645E;
  --text-muted:#796E67;
  --accent:#E97861;
  --accent-strong:#E97861;
  --border-default:rgba(63,55,51,.12);
  --shadow-100:0 10px 30px rgba(43,39,33,.07);
  --shadow-200:0 24px 70px rgba(43,39,33,.12);
}
html{background:var(--bg-base)}
body{background:var(--bg-base);color:var(--text-body)}
.wrap{max-width:1200px}
.hd{background:rgba(250,244,239,.88);border-color:rgba(63,55,51,.09);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}
.hd__in{max-width:1280px}
.hd__logo{color:#3F3733;letter-spacing:.22em}
.hd__logo small{color:#796E67}
.hd__nav a:not(.hd__cta){color:#3D3B37}
.hd__cta,.btn{border-radius:999px;background:#3F3733!important;color:#FFF!important;box-shadow:0 8px 22px rgba(63,55,51,.16);transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.hd__cta:hover,.btn:hover{transform:translateY(-2px);background:#E97861!important;box-shadow:0 13px 30px rgba(233,120,97,.22)}

.hero{background:radial-gradient(circle at 9% 12%,rgba(233,120,97,.1),transparent 31%),radial-gradient(circle at 78% 18%,rgba(73,125,142,.09),transparent 30%),#FAF4EF}
.hero::before{border-radius:40px;border-color:rgba(63,55,51,.06);opacity:.65}
.hero__photo,.pic,.case__photo,.message__photo-img{border-radius:24px;overflow:hidden;box-shadow:var(--shadow-200)}@media (prefers-reduced-motion:no-preference){
}
@keyframes editorial-line-reveal{to{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0)}}
@keyframes editorial-rule-reveal{to{transform:scaleX(1)}}

.sec{padding-block:clamp(88px,10vw,144px)}
.eyebrow{width:max-content;padding:8px 13px;border-radius:999px;background:rgba(233,120,97,.09);color:#A64033;letter-spacing:.04em}
.eyebrow::before{width:6px;height:6px;background:#E97861}
.h2,.cta h2{color:#3F3733;font-size:clamp(34px,4.5vw,62px);line-height:1.32;letter-spacing:-.035em}
.lede{color:#5B5852;font-size:18px;line-height:1.95}

.svc,.built,.facts,.steps,.take,.uc__grid,.hon{gap:20px}
.svc__i,.built__i,.facts>div,.steps li,.take__i,.uc__card,.hon__i,.grant__box,.price__standard,.faq__i{
  border:0!important;border-radius:20px;background:rgba(255,255,255,.76);box-shadow:inset 0 0 0 1px rgba(63,55,51,.08),0 12px 36px rgba(43,39,33,.05);overflow:hidden
}
.svc__i,.built__i,.facts>div,.steps li,.take__i,.uc__card,.hon__i{transition:transform .3s ease,box-shadow .3s ease}
.svc__i:hover,.built__i:hover,.facts>div:hover,.take__i:hover,.uc__card:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(233,120,97,.14),0 24px 52px rgba(43,39,33,.1)}
.svc__no,.course-detail__label,.tagx{color:#A64033}
.course-detail,.band,.case,.sec--dark{border-radius:0}
.form input,.form textarea,.form select{border-radius:12px;border-color:rgba(63,55,51,.15);background:#FFF}
.form button{border-radius:999px}
.cta{background:#3F3733}
.cta .eyebrow{background:rgba(255,255,255,.1);color:#FFD2C8}
.cta h2{color:#FFF}
.ft{background:#1D1D1B}@media (max-width:680px){
  .sec{padding-block:76px}
  .h2,.cta h2{font-size:clamp(32px,9.4vw,43px)}
  .lede,.hero__sub,.message__body{font-size:16px}
  .hero__photo,.pic,.case__photo,.message__photo-img{border-radius:16px}
}

/* Final cascade: desktop width and readable type must win over legacy layers above. */
.wrap{max-width:1400px;padding-inline:clamp(28px,4.5vw,72px)}
.hd__in{max-width:1440px;padding-inline:clamp(24px,3.5vw,52px)}
.akita-hero{max-width:1440px;padding-inline:clamp(32px,5vw,76px)}
.h2,.cta h2{font-size:clamp(42px,4.6vw,68px)}@media (max-width:960px){}@media (max-width:780px){}@media (max-width:520px){.wrap,.hero__in{padding-inline:20px}.h2,.cta h2{font-size:clamp(34px,10vw,44px)}}

/* 2026-08-20 HOME CINEMATIC HERO */
.home{padding-top:0}
.home .hd{background:linear-gradient(180deg,rgba(8,16,21,.58),transparent);border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.home .hd__logo{color:#FFF;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.home .hd__logo small{color:rgba(255,255,255,.78)}
.home .hd__cta{background:linear-gradient(135deg,#F06E58,#D84E42)!important;box-shadow:0 12px 30px rgba(185,45,38,.34)}
.home .hd.is-scrolled{background:rgba(250,244,239,.94);border-color:rgba(63,55,51,.1);box-shadow:0 8px 30px rgba(20,22,23,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.home .hd.is-scrolled .hd__logo{color:#3F3733;text-shadow:none}
.home .hd.is-scrolled .hd__logo small{color:#796E67}

.home .hero{min-height:100svh;padding:0;isolation:isolate;overflow:hidden;background:#111A1F;color:#FFF}
.home .hero::before{content:"";position:absolute;z-index:1;inset:0;width:auto;height:auto;clip-path:none;background:linear-gradient(90deg,rgba(8,15,19,.9) 0%,rgba(8,15,19,.72) 38%,rgba(8,15,19,.27) 72%,rgba(8,15,19,.38) 100%),linear-gradient(0deg,rgba(7,13,17,.84) 0%,transparent 42%,rgba(7,13,17,.18) 100%)}
.home .hero::after{content:"AI INTO BUSINESS";z-index:2;left:clamp(18px,2.5vw,44px);right:auto;bottom:clamp(36px,5vw,74px);color:rgba(255,255,255,.105);font-family:var(--latin);font-size:clamp(76px,12.5vw,210px);font-weight:800;line-height:.78;letter-spacing:-.065em;white-space:nowrap}
.home .hero__note{grid-column:1/13;grid-row:7;margin-top:12px;color:rgba(255,255,255,.68);font-size:14px}@media (min-width:961px){
  .home .hd__nav a:not(.hd__cta){color:#FFF;text-shadow:0 2px 16px rgba(0,0,0,.35)}
  .home .hd.is-scrolled .hd__nav a:not(.hd__cta){color:#3D3B37;text-shadow:none}
}@media (max-width:960px){
  .home .hd__burger span{background:#FFF}
  .home .hd.is-scrolled .hd__burger span{background:#3F3733}
  .home .hero__note{grid-row:7}
}@media (max-width:680px){
  .home .hero{min-height:auto}
  .home .hero::before{background:linear-gradient(180deg,rgba(8,15,19,.72),rgba(8,15,19,.78) 48%,rgba(7,13,17,.94))}
  .home .hero::after{bottom:34px;font-size:23vw;line-height:.82;white-space:normal}
  .home .hero__note{font-size:14px}
}

/* HOME HERO — typography, motion and interaction refinement */@media (prefers-reduced-motion:no-preference){
  .home .hero__badge,.home .hero__sub,.home .hero__acts,.home .hero__difference,.home .hero__proof,.home .hero__note,.home .hero__scroll{opacity:0;transform:translateY(18px)}
  .home .hero.is-ready .hero__badge,.home .hero.is-ready .hero__sub,.home .hero.is-ready .hero__acts,.home .hero.is-ready .hero__difference,.home .hero.is-ready .hero__proof,.home .hero.is-ready .hero__note,.home .hero.is-ready .hero__scroll{opacity:1;transform:none;transition:opacity .75s ease,transform .9s cubic-bezier(.16,1,.3,1)}
  .home .hero.is-ready .hero__note,.home .hero.is-ready .hero__scroll{transition-delay:1s}
}
@keyframes home-title-reveal{to{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0)}}
@keyframes home-scroll-line{0%{transform:translateY(-110%)}55%,100%{transform:translateY(230%)}}
@keyframes home-card-breathe{0%,100%{box-shadow:0 24px 70px rgba(0,0,0,.25),0 0 0 rgba(255,192,110,0)}50%{box-shadow:0 28px 78px rgba(0,0,0,.32),0 0 28px rgba(255,192,110,.12)}}@media (max-width:680px){
}@media (prefers-reduced-motion:reduce){}

/* 差別化カードは動かさず、重要な訴求を文字の強さで見せる */@media (max-width:680px){
}

/* 50〜60代の経営者を基準に、全ページの文字を一段大きくする */
:root{
  --fs-body:17px;
  --fs-sm:15px;
  --fs-label:14px;
}
.hd__nav,.hd__nav a{font-size:16px}
.hd__logo small{font-size:12px}
.steps .d{font-size:16px}
.hero__note,.message__figure figcaption{font-size:14px}
.home .hero__proof,.home .hero__note{font-size:15px}

/* 写真を明るくし、文字の直下だけで読みやすさを確保する */
.home .hero::before{
  background:linear-gradient(90deg,rgba(8,15,19,.69) 0%,rgba(8,15,19,.50) 40%,rgba(8,15,19,.12) 75%,rgba(8,15,19,.20) 100%),
             linear-gradient(0deg,rgba(7,13,17,.58) 0%,transparent 45%,rgba(7,13,17,.10) 100%)
}@media (max-width:680px){
  :root{--fs-body:17px;--fs-sm:15px;--fs-label:14px}
  body{font-size:17px}
  .home .hero::before{background:linear-gradient(180deg,rgba(8,15,19,.54),rgba(8,15,19,.58) 48%,rgba(7,13,17,.76))}
}

/* 2026-08-20 可読性の再調整：見た目で分かる大きさまで引き上げる */
:root{--fs-body:19px;--fs-sm:16px;--fs-label:15px;--fs-lead:22px}
body{font-size:19px}
.hd__nav,.hd__nav a{font-size:17px}
.hd__logo{font-size:20px}.hd__logo small{font-size:13px}
.lede,.message__body{font-size:19px}
.svc__b,.case__b,.course-detail__body,.grant__box p,.faq__i p,.form label,.corp__row,.price__n span,.price__note,.grant__note{font-size:18px}
.steps .d,.built__i p,.take__i p,.uc__card p,.hon__i p{font-size:17px}
.home .hero__proof,.home .hero__note{font-size:16px}
.home .hero::before{
  background:linear-gradient(90deg,rgba(8,15,19,.54) 0%,rgba(8,15,19,.38) 42%,rgba(8,15,19,.06) 76%,rgba(8,15,19,.10) 100%),
             linear-gradient(0deg,rgba(7,13,17,.42) 0%,transparent 48%,rgba(7,13,17,.06) 100%)
}@media (max-width:680px){
  :root{--fs-body:18px;--fs-sm:16px;--fs-label:15px;--fs-lead:20px}
  body{font-size:18px}
  .lede,.message__body,.svc__b,.case__b,.course-detail__body,.grant__box p,.faq__i p,.form label,.corp__row,.price__n span,.price__note,.grant__note{font-size:18px}
  .home .hero::before{background:linear-gradient(180deg,rgba(8,15,19,.42),rgba(8,15,19,.46) 48%,rgba(7,13,17,.62))}
}

/* PCは閲覧距離を考慮し、携帯より明確に大きい文字設計にする */@media (min-width:681px){
  :root{--fs-body:21px;--fs-sm:17px;--fs-label:16px;--fs-lead:23px}
  body{font-size:21px}
  .hd__nav,.hd__nav a{font-size:18px}.hd__logo{font-size:21px}.hd__logo small{font-size:14px}
  .lede,.message__body{font-size:21px}
  .svc__b,.case__b,.course-detail__body,.grant__box p,.faq__i p,.form label,.corp__row,.price__n span,.price__note,.grant__note{font-size:20px}
  .steps .d,.built__i p,.take__i p,.uc__card p,.hon__i p{font-size:19px}
  .home .hero__proof,.home .hero__note{font-size:17px}
}

/* 携帯の写真上テキストは背景色に左右されない高コントラスト表示 */@media (max-width:680px){
  .home .hero__note{padding:12px 14px;border-radius:12px;background:rgba(7,18,24,.84);color:#FFF;line-height:1.85;text-shadow:0 1px 3px rgba(0,0,0,.65)}
}

/* PCの写真上ラベルも携帯と同じ高コントラストに統一 */@media (min-width:681px){
}

/* 2026-08-20 全ページ共通の携帯最適化 */@media (max-width:680px){
  html,body{max-width:100%;overflow-x:hidden}
  img,picture,video,iframe,svg,canvas{max-width:100%;height:auto}
  h1,h2,h3,h4,p,li,dd,dt,a,button,label,figcaption{max-width:100%;overflow-wrap:anywhere;word-break:normal}
  input,textarea,select,button{min-width:0;max-width:100%}

  /* 横スクロール前提の小さなページ内ナビは、携帯では常設メニューと重複するため非表示 */

  /* 問い合わせCTAは強制改行を外し、端末幅に応じて自然に折り返す */
  .cta{padding:68px 20px;text-align:left}
  .cta h2{max-width:11em;margin-inline:auto;font-size:clamp(30px,8.7vw,38px);line-height:1.45;text-align:left;text-wrap:pretty}
  .cta h2 br,.cta>p br{display:none}
  .cta p{max-width:34em;margin-inline:auto;font-size:18px!important;line-height:1.9;text-align:left}
  .cta p.cta__tel{font-size:17px!important;line-height:1.9;text-align:center}
  .cta__tel a{font-size:clamp(30px,9vw,38px);white-space:nowrap}
  .cta p.cta__tel small{font-size:15px;line-height:1.8}
  .cta .form{width:100%;padding:0}

  /* 外部予約ウィジェットは携帯で固定幅になりやすいため、確実に読める予約リンクへ切り替える */
  #timerex_calendar{display:none!important}
  #timerex_calendar+p{margin-top:22px!important;text-align:center}
  #timerex_calendar+p a{display:flex;align-items:center;justify-content:center;min-height:56px;padding:14px 18px;border-radius:999px;background:#FFF;color:#3F3733!important;font-size:17px;font-weight:800;text-decoration:none}

  .form__row{min-width:0}
  .form input,.form textarea,.form select{width:100%;font-size:18px}
  .ft__in,.corp__row,.price__row,.course-detail,.message__inner{min-width:0}
}

/* 最終カスケード：過去のホーム専用指定より新しいストーリーヒーローを優先 */
.home .story-hero::before{
  background:
    linear-gradient(90deg,rgba(5,13,18,.73) 0%,rgba(5,13,18,.46) 48%,rgba(5,13,18,.13) 78%,rgba(5,13,18,.18) 100%),
    linear-gradient(0deg,rgba(5,13,18,.58) 0%,transparent 48%,rgba(5,13,18,.12) 100%);
}
.home .story-hero::after{content:none}@media (max-width:840px){
  .home .story-hero::before{background:linear-gradient(180deg,rgba(5,13,18,.38),rgba(5,13,18,.52) 48%,rgba(5,13,18,.8))}
}

/* ヒーローのSCROLLから移動した直後に、空白ではなく物語の冒頭を見せる */@media (max-width:840px){
}

/* 第2段階：実際の業務がどう短くなるかを示すストーリー */
.impact-story{background:#FAF4EF;color:#3F3733;padding:clamp(120px,13vw,210px) 0}
.impact-story__head{max-width:1440px;margin:0 auto;padding:0 clamp(28px,6.2vw,104px)}
.impact-story__eyebrow{margin:0 0 42px;color:#C04931;font-family:var(--latin);font-size:15px;font-weight:800;letter-spacing:.18em}
.impact-story__title{max-width:15em;margin:0;font-family:var(--serif);font-size:clamp(50px,5.8vw,88px);font-weight:600;line-height:1.3;letter-spacing:-.025em}
.impact-story__lead{max-width:800px;margin:58px 0 0 auto;color:#5f5954;font-size:clamp(19px,1.5vw,22px);line-height:2}
.impact-story__team{position:relative;max-width:1440px;height:clamp(420px,51vw,720px);margin:clamp(80px,9vw,135px) auto 0;overflow:hidden;background:#ded7cf}
.impact-story__team::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,38,49,.12),transparent 42%,rgba(233,120,97,.05));pointer-events:none}
.impact-story__team img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.04)}
.impact-cases{display:grid;gap:clamp(90px,11vw,170px);max-width:1440px;margin:clamp(100px,12vw,180px) auto 0;padding:0 clamp(28px,6.2vw,104px)}
.impact-case{display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);column-gap:clamp(44px,6vw,92px);row-gap:28px;align-items:stretch}
.impact-case:nth-child(even){grid-template-columns:minmax(520px,1.18fr) minmax(0,.82fr)}
.impact-case__intro{grid-column:1;grid-row:2}
.impact-case__photo{position:relative;grid-column:1;grid-row:1;width:100%;height:220px;margin:0;overflow:hidden;border-radius:22px;background:#ded7cf;box-shadow:0 22px 55px rgba(73,60,50,.12)}
.impact-case__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,38,49,.08),transparent 45%,rgba(233,120,97,.05));pointer-events:none}
.impact-case__photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.84) contrast(1.03)}
.impact-case--social .impact-case__photo img,.impact-case--internal .impact-case__photo img{object-position:58% center}
.impact-case--product .impact-case__photo img{object-position:42% center}
.impact-case .impact-flow{grid-column:2;grid-row:1/3}
.impact-case:nth-child(even) .impact-case__photo,.impact-case:nth-child(even) .impact-case__intro{grid-column:2}
.impact-case:nth-child(even) .impact-flow{grid-column:1}
.impact-case__number{margin:0;color:#C04931;font-family:var(--latin);font-size:14px;font-weight:800;letter-spacing:.12em}
.impact-case__category{margin:12px 0 34px;color:#807871;font-family:var(--latin);font-size:14px;font-weight:800;letter-spacing:.16em}
.impact-case__intro h3{margin:0;font-family:var(--serif);font-size:clamp(34px,3.3vw,51px);font-weight:600;line-height:1.45;letter-spacing:-.04em}
.impact-case__intro>p:not([class]){margin:32px 0 0;color:#625c56;font-size:19px;line-height:1.95}
.impact-case__intro>a{display:inline-flex;gap:10px;margin-top:30px;color:#a84639;font-size:17px;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor}
.impact-flow{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);align-items:stretch;min-height:470px;border:1px solid #ded7cf;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(73,60,50,.11)}
.impact-flow__before,.impact-flow__after{padding:42px clamp(24px,3vw,44px)}
.impact-flow__before{background:#ece8e2;color:#4b4743}
.impact-flow__after{display:flex;flex-direction:column;justify-content:center;background:#0b2631;color:#fff}
.impact-flow__before>p,.impact-flow__after>p{margin:0 0 30px;font-family:var(--latin);font-size:13px;font-weight:900;letter-spacing:.18em}
.impact-flow__before ol{display:grid;gap:18px;margin:0;padding:0;list-style:none;counter-reset:impact-step}
.impact-flow__before li{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(63,55,51,.18);font-size:17px;font-weight:700;line-height:1.5;counter-increment:impact-step}
.impact-flow__before li::before{content:counter(impact-step,decimal-leading-zero);color:#a49a91;font-family:var(--latin);font-size:12px}
.impact-flow__after strong{font-family:var(--serif);font-size:clamp(29px,2.7vw,42px);font-weight:600;line-height:1.45}
.impact-flow__after span{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.3);color:#ffd2c9;font-size:18px;font-weight:800}
.impact-case--product .impact-flow__after{background:#E97861}
.impact-case--product .impact-flow__after span{color:#fff4d4}
.impact-case--internal .impact-flow__after{background:#3F3733}
.impact-story__more{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1190px;margin:clamp(100px,12vw,180px) auto 0;padding:48px clamp(28px,4vw,58px);border-top:1px solid #cbc2b9;border-bottom:1px solid #cbc2b9}
.impact-story__more p{margin:0;font-family:var(--serif);font-size:clamp(25px,2.5vw,36px);font-weight:600}@media (max-width:1000px){
  .impact-case,.impact-case:nth-child(even){grid-template-columns:1fr;gap:42px}
  .impact-case__photo,.impact-case__intro,.impact-case .impact-flow,.impact-case:nth-child(even) .impact-case__photo,.impact-case:nth-child(even) .impact-case__intro,.impact-case:nth-child(even) .impact-flow{grid-column:1;grid-row:auto}
  .impact-case__photo{height:clamp(260px,46vw,430px);margin-bottom:0}
  .impact-flow{max-width:820px;width:100%}
}

/* 第3段階：研修後も会社に残る3つの経営資産 */@media (max-width:1000px){
}@media (max-width:680px){
}@media (max-width:680px){
  .impact-story{padding:100px 0}
  .impact-story__head,.impact-cases{padding-inline:20px}
  .impact-story__eyebrow{margin-bottom:30px;font-size:13px}
  .impact-story__title{font-size:clamp(36px,9.5vw,46px);line-height:1.45}
  .impact-story__lead{margin-top:38px;font-size:18px;line-height:1.9}
  .impact-story__team{height:300px;margin-top:66px}
  .impact-story__team img{object-position:55% center}
  .impact-cases{gap:96px;margin-top:88px}
  .impact-case{gap:34px}
  .impact-case__photo{height:270px;border-radius:20px}
  .impact-case__photo img{object-position:center}
  .impact-case__category{margin-bottom:24px}
  .impact-case__intro h3{font-size:32px;line-height:1.5}
  .impact-case__intro>p:not([class]){font-size:18px}
  .impact-flow{grid-template-columns:1fr;min-height:0;border-radius:18px}
  .impact-flow__before,.impact-flow__after{padding:32px 26px}
  .impact-flow__after strong{font-size:32px}
  .impact-story__more{display:grid;margin-top:100px;padding:38px 20px}
  .impact-story__more .btn{width:100%}
}

/* 2026-08-21 役員写真のサイズと代表写真の差し替え */@media (max-width:960px){
}

/* 第4段階：2日間で経営資産が生まれ、研修後も育つ過程 */
.growth-story{position:relative;overflow:hidden;background:#FAF4EF;color:#3F3733;padding:clamp(130px,14vw,220px) 0}
.growth-story::before{content:"GROW";position:absolute;top:-.08em;left:-.06em;color:rgba(63,55,51,.035);font-family:var(--latin);font-size:clamp(190px,29vw,460px);font-weight:900;line-height:1;letter-spacing:-.09em;pointer-events:none}
.growth-story__head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:clamp(48px,8vw,130px);align-items:end;max-width:1440px;margin:0 auto;padding:0 clamp(28px,6.2vw,104px)}
.growth-story__eyebrow{grid-column:1/-1;margin:0 0 clamp(22px,3vw,44px);color:#C04931;font-family:var(--latin);font-size:15px;font-weight:900;letter-spacing:.2em}
.growth-story__title{margin:0;font-family:var(--serif);font-size:clamp(52px,6.3vw,96px);font-weight:600;line-height:1.28;letter-spacing:-.025em}
.growth-story__title em{color:#C04931;font-style:normal}
.growth-story__lead{margin:0;color:#625c56;font-size:clamp(19px,1.55vw,23px);line-height:2}
.growth-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1440px;margin:clamp(90px,10vw,150px) auto 0;padding:0 clamp(28px,6.2vw,104px)}
.growth-step{display:flex;min-height:610px;flex-direction:column;padding:clamp(34px,3.5vw,52px);border:1px solid #cec6bd;background:#fff}
.growth-step+.growth-step{border-left:0}
.growth-step--build{background:#0b2631;color:#fff;transform:translateY(34px)}
.growth-step--grow{background:#E97861;color:#fff}
.growth-step__top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid currentColor;opacity:.72}
.growth-step__top span,.growth-step__top p{margin:0;font-family:var(--latin);font-size:13px;font-weight:900;letter-spacing:.16em}
.growth-step h3{margin:50px 0 0;font-family:var(--serif);font-size:clamp(48px,4.6vw,70px);font-weight:600;line-height:1.15;letter-spacing:-.03em}
.growth-step__phrase{margin:38px 0 0;font-family:var(--serif);font-size:clamp(24px,2vw,30px);font-weight:600;line-height:1.65}
.growth-step__body{margin:auto 0 0;padding-top:38px;border-top:1px solid currentColor;color:#625c56;font-size:17px;line-height:1.9}
.growth-step--build .growth-step__body,.growth-step--grow .growth-step__body{color:rgba(255,255,255,.82)}
.growth-difference{position:relative;z-index:1;display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(36px,6vw,92px);max-width:1230px;margin:clamp(135px,15vw,225px) auto 0;padding:clamp(42px,5vw,74px) clamp(28px,5vw,70px);border-top:1px solid #bbb1a8;border-bottom:1px solid #bbb1a8}
.growth-difference__label span{color:#C04931;font-family:var(--latin);font-size:13px;font-weight:900;letter-spacing:.18em}
.growth-difference__label p{margin:28px 0 0;font-family:var(--serif);font-size:clamp(25px,2.4vw,35px);font-weight:600;line-height:1.55}
.growth-difference__compare{display:grid;grid-template-columns:1fr 42px 1fr;gap:20px;align-items:center}
.growth-difference__compare p{display:flex;min-height:190px;flex-direction:column;justify-content:center;margin:0;padding:28px;background:#e7e1da}
.growth-difference__compare p.is-rarethree{background:#0b2631;color:#fff}
.growth-difference__compare span{margin-bottom:20px;color:#8c8279;font-size:13px;font-weight:900;letter-spacing:.08em}
.growth-difference__compare .is-rarethree span{color:#ff9788}
.growth-difference__compare strong{font-family:var(--serif);font-size:clamp(22px,2vw,29px);font-weight:600;line-height:1.6}
.growth-difference__compare i{color:#C04931;font-family:var(--latin);font-size:25px;font-style:normal;text-align:center}
.growth-outcome{position:relative;z-index:1;max-width:1190px;margin:clamp(105px,11vw,165px) auto 0;padding:0 28px;text-align:center}
.growth-outcome>p{margin:0 0 48px;color:#877d74;font-size:15px;font-weight:900;letter-spacing:.12em}
.growth-outcome>div{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.4vw,54px)}
.growth-outcome span{font-family:var(--serif);font-size:clamp(42px,5vw,74px);font-weight:600;line-height:1}
.growth-outcome small{display:block;margin-top:18px;color:#6e6761;font-family:var(--sans);font-size:15px;font-weight:700}
.growth-outcome i{color:#C04931;font-family:var(--latin);font-size:clamp(28px,3vw,44px);font-style:normal;font-weight:300}
.growth-story__demo{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:42px;max-width:1190px;margin:clamp(90px,10vw,150px) auto 0;padding:46px clamp(28px,4vw,58px);background:#fff;box-shadow:0 28px 70px rgba(73,60,50,.09)}
.growth-story__demo p{display:grid;gap:10px;margin:0}
.growth-story__demo strong{font-family:var(--serif);font-size:clamp(23px,2vw,31px)}
.growth-story__demo span{color:#6c655f;font-size:16px;line-height:1.7}
.growth-story__demo .btn{flex:0 0 auto}@media (max-width:1000px){
  .growth-story__head{grid-template-columns:1fr}
  .growth-story__eyebrow{grid-column:auto}
  .growth-story__lead{max-width:760px}
  .growth-steps{grid-template-columns:1fr;gap:20px}
  .growth-step{min-height:auto}
  .growth-step+.growth-step{border-left:1px solid #cec6bd}
  .growth-step--build{border-color:transparent;transform:none}
  .growth-step__body{margin-top:56px}
  .growth-difference{grid-template-columns:1fr;margin-inline:28px}
}@media (max-width:680px){
  .growth-story{padding:100px 0}
  .growth-story::before{font-size:190px;top:0;left:-24px}
  .growth-story__head,.growth-steps{padding-inline:20px}
  .growth-story__head{gap:38px}
  .growth-story__eyebrow{margin-bottom:4px;font-size:13px}
  .growth-story__title{font-size:clamp(39px,10.8vw,51px);line-height:1.4}
  .growth-story__lead{font-size:18px;line-height:1.9}
  .growth-steps{margin-top:74px}
  .growth-step{padding:34px 26px 38px}
  .growth-step h3{margin-top:38px;font-size:52px}
  .growth-step__phrase{font-size:25px}
  .growth-step__body{margin-top:42px;padding-top:30px;font-size:16px}
  .growth-difference{gap:36px;margin:96px 20px 0;padding:42px 0}
  .growth-difference__compare{grid-template-columns:1fr;gap:14px}
  .growth-difference__compare p{min-height:0}
  .growth-difference__compare i{transform:rotate(90deg)}
  .growth-outcome{margin-top:88px;padding-inline:20px}
  .growth-outcome>p{margin-bottom:34px}
  .growth-outcome>div{display:grid;grid-template-columns:1fr}
  .growth-outcome span{font-size:52px}
  .growth-outcome i{transform:rotate(90deg)}
  .growth-story__demo{display:grid;margin:82px 20px 0;padding:34px 26px}
  .growth-story__demo .btn{width:100%;text-align:center}
}@media (max-width:780px){
}

/* 第5段階：業務に眠る価値と、収益資産の実績 */
.possibility-story{overflow:hidden;background:#fff;color:#3F3733;padding:clamp(130px,14vw,220px) 0}
.possibility-story .wrap,.proof-story .wrap{max-width:1230px}
.possibility-story .eyebrow,.proof-story .eyebrow{margin-bottom:38px;color:#C04931;font-family:var(--latin);font-size:15px;font-weight:900;letter-spacing:.2em}
.possibility-story .h2,.proof-story .h2{max-width:15em;margin:0;font-family:var(--serif);font-size:clamp(50px,6vw,91px);font-weight:600;line-height:1.3;letter-spacing:-.025em}
.possibility-story .h2 em,.proof-story .h2 em{color:#C04931;font-style:normal}
.possibility-story .lede,.proof-story__lede{max-width:760px;margin:54px 0 0 auto;color:#625c56;font-size:clamp(19px,1.55vw,23px);line-height:2}
.possibility-story .uc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(80px,9vw,135px)}
.possibility-story .uc__card{min-height:560px;border:1px solid #d7d0c8;border-radius:0;background:#FAF4EF;box-shadow:none}
.possibility-story .uc__card:nth-child(even){border-left:0}.possibility-story .uc__card:nth-child(n+3){border-top:0}
.possibility-story .uc__card--plan{background:#E97861;color:#fff}.possibility-story .uc__card--hr{background:#0b2631;color:#fff}
.possibility-story .uc__hd{padding:42px clamp(30px,4vw,55px) 28px;background:none!important;color:inherit;text-align:left}
.possibility-story .uc__hd small{font-size:13px;letter-spacing:.18em;opacity:.68}.possibility-story .uc__hd b{margin-top:22px;font-family:var(--serif);font-size:clamp(29px,2.7vw,41px);font-weight:600;line-height:1.45;letter-spacing:-.035em}
.possibility-story .uc__list{gap:0;padding:0 clamp(30px,4vw,55px) 42px}
.possibility-story .uc__list li{padding:25px 0;font-size:16px;color:#625c56;border-top:1px solid currentColor!important}.possibility-story .uc__card--plan li,.possibility-story .uc__card--hr li{color:rgba(255,255,255,.82)}
.possibility-story .uc__list li>b{font-family:var(--serif);font-size:21px;color:inherit}.possibility-story .uc__list .now{margin-top:14px;color:inherit;opacity:.68}.possibility-story .uc__list .aft{margin-top:13px;color:inherit;font-weight:800}
.possibility-story .uc__after{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:clamp(70px,8vw,115px) 0 0;padding:38px 0;border-top:1px solid #c8bfb6;border-bottom:1px solid #c8bfb6;color:#625c56;font-size:18px}.possibility-story .uc__after a{display:inline-flex;flex:none;padding:15px 25px;border-radius:999px;background:#3F3733;color:#fff;text-decoration:none}
.proof-story{overflow:hidden;background:#0b2631;color:#fff;padding:clamp(130px,14vw,220px) 0}.proof-story__lede{color:#c4d0d4}
.proof-story .case{grid-template-columns:minmax(410px,.88fr) minmax(0,1.12fr);gap:0;margin-top:clamp(80px,9vw,135px);background:#fff;color:#3F3733;align-items:stretch}
.proof-story .case>div:first-child{position:relative;display:flex;min-height:670px;flex-direction:column;justify-content:flex-end;padding:clamp(36px,5vw,66px);overflow:hidden;color:#fff}
.proof-story .case__ph{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none}.proof-story .case>div:first-child::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,rgba(5,20,27,.94),rgba(5,20,27,.12) 75%)}
.proof-story .case__num,.proof-story .case__cap{position:relative;z-index:2}.proof-story .case__num{margin:0;color:#fff;font-size:clamp(82px,9vw,132px);line-height:.85}.proof-story .case__num small{color:#fff;font-size:20px;-webkit-text-fill-color:#fff}.proof-story .case__cap{margin-top:25px;color:#d8e2e5;font-size:16px;line-height:1.7}
.proof-story .case__b{display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,84px);border:0;background:#fff;color:#625c56;font-size:18px;line-height:1.95}.proof-story .case__b::before{content:"AI SERVICE DEVELOPMENT";position:static;margin-bottom:32px;color:#C04931;font-family:var(--latin);font-size:13px;font-weight:900;letter-spacing:.16em}.proof-story .case__b em{color:#3F3733;border-bottom-color:#C04931}.proof-story .case__b b{display:block;margin-top:12px;padding-top:28px;border-top:1px solid #d8d0c9;color:#a84639;font-family:var(--serif);font-size:22px;line-height:1.75}
.proof-story .tcase{margin-top:clamp(110px,12vw,180px);border-top-color:rgba(255,255,255,.25)}@media (max-width:900px){.possibility-story .uc{grid-template-columns:1fr}.possibility-story .uc__card,.possibility-story .uc__card:nth-child(even),.possibility-story .uc__card:nth-child(n+3){min-height:0;border:1px solid #d7d0c8}.possibility-story .uc__card+.uc__card{border-top:0}.proof-story .case{grid-template-columns:1fr}.proof-story .case>div:first-child{min-height:540px}}@media (max-width:680px){.possibility-story,.proof-story{padding:100px 0}.possibility-story .eyebrow,.proof-story .eyebrow{margin-bottom:28px;font-size:13px}.possibility-story .h2,.proof-story .h2{font-size:clamp(38px,10.4vw,49px);line-height:1.45}.possibility-story .lede,.proof-story__lede{margin-top:38px;font-size:18px;line-height:1.9}.possibility-story .uc{margin-top:70px}.possibility-story .uc__hd{padding:32px 25px 22px}.possibility-story .uc__hd b{font-size:30px}.possibility-story .uc__list{padding:0 25px 30px}.possibility-story .uc__list li{font-size:16px}.possibility-story .uc__after{display:grid;margin-top:64px;font-size:17px}.possibility-story .uc__after a{justify-content:center}.proof-story .case{margin-top:70px}.proof-story .case>div:first-child{min-height:470px;padding:34px 25px}.proof-story .case__num{font-size:84px}.proof-story .case__num small{font-size:16px}.proof-story .case__b{padding:40px 25px;font-size:17px}.proof-story .case__b b{font-size:20px}}

/* 第6段階：PC見出しの改行最適化 */@media (min-width:841px){
  .asset-story__intro,.growth-story__head{grid-template-columns:1fr}
  .asset-story__title,.growth-story__title{max-width:100%;font-size:clamp(58px,5.3vw,78px)}
  .asset-story__lead,.growth-story__lead{max-width:780px;margin-left:auto}
  .impact-story__title{max-width:16em;font-size:clamp(55px,4.8vw,72px)}
  .possibility-story .h2,.proof-story .h2{max-width:17em;font-size:clamp(54px,4.8vw,70px)}
}@media (min-width:1001px){.impact-case__intro h3{font-size:clamp(34px,2.8vw,38px)}}

/* 第6段階：代表・取締役メッセージをストーリーの終章へ統一 */
.message{position:relative;overflow:hidden;padding:clamp(120px,13vw,200px) 0;background:#FAF4EF;color:#3F3733}

/* 最後の相談導線 */
.cta{position:relative;overflow:hidden;padding:clamp(110px,12vw,180px) 24px;background:#0b2631;color:#fff}
.cta::before{content:"LET'S TALK";position:absolute;top:-.16em;left:-.04em;color:rgba(255,255,255,.035);font-family:var(--latin);font-size:clamp(140px,24vw,360px);font-weight:900;line-height:1;letter-spacing:-.08em}
.cta>h2,.cta>p,.cta>div,.cta>form,.cta>script{position:relative;z-index:1}
.cta h2{max-width:16em;margin-inline:auto;color:#fff;font-family:var(--serif);font-size:clamp(42px,5vw,72px);font-weight:600;line-height:1.45;letter-spacing:-.025em}
.cta>p{color:#c8d3d6}.cta__tel{margin-top:52px!important;padding:34px 20px;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.cta__tel a{color:#ff9788}.cta__tel small{color:#aebdc2}
.cta .form{position:relative;z-index:1;margin-top:70px;padding:clamp(30px,5vw,64px);background:#FAF4EF;color:#3F3733;border-radius:0}.cta .form label,.cta .form__note,.cta .form__direct{color:#5f5954}.cta .form__submit{background:#E97861}@media (max-width:780px){
  .message{padding:96px 0}
  .cta{padding:96px 20px}.cta h2{font-size:clamp(34px,9.3vw,44px);line-height:1.5}.cta .form{padding:28px 20px}
}

/* 最終カスケード：新しいINPUT / OUTPUTカードを旧比較指定より優先 */
body .impact-flow{grid-template-columns:minmax(145px,.78fr) minmax(160px,1fr) minmax(190px,1.15fr);min-height:430px}
body .impact-flow__before,body .impact-flow__input,body .impact-flow__after{padding:34px clamp(18px,2vw,30px)}
.impact-case--internal .impact-flow__after strong{font-size:28px}@media (max-width:680px){
  body .impact-flow{grid-template-columns:1fr;min-height:0}
  body .impact-flow__before,body .impact-flow__input,body .impact-flow__after{padding:30px 25px}
}

/* ============================================================
   2026-08-28 明朝化の補正 ── 全面明朝を維持したまま「細くて見にくい」を潰す
   ------------------------------------------------------------
   実測でわかったこと（推測ではなくブラウザ計測値）:
   ・旧書体（ng-list で禁止） は Noto Sans JP よりインクが 34〜39% 少ない。
     同じサイズ・同じ色でも一段階薄く見える。
   ・旧書体（ng-list で禁止） は palt テーブルを持たない。1294行の
     font-feature-settings:"palt" は明朝では完全に無効で、約物のアキが
     詰まらない（Noto Sans JP では -21.7% 効いていた）。
     → 行間と字間はそのぶん締めてある（--lh-body / letter-spacing）。
   ・読み込みウェイトは 400/500/600/700 のみ。CSS内に残る
     font-weight:800/900 の指定は、黙って 700 で描画される。

   ここで補正しているのは「読む文字」ではなく「操作する文字」
   （ナビ・ボタン・フォーム・小ラベル）の細さ。書体は明朝のまま、
   ウェイトと色で視認性だけを戻している。
   ============================================================ */

/* 操作する文字の細さを、ウェイトで戻す */
.hd__nav a,.hd__cta,.btn,.page-nav__in a,
.form input,.form textarea,.form select,.form__submit,
.eyebrow,.svc__no,.steps .t,.tagx,.hero__proof span{
  font-weight:600;
}

/* コントラスト不合格の是正（明朝は同じ比率でも一段薄く見えるため実値を上げる） */
.growth-difference__compare span{color:#5f5954;font-size:15px;font-weight:700}
.possibility-story .uc__list .now{opacity:.85}
.form__row label .req{opacity:1;color:#A64033;font-weight:600}

/* ------------------------------------------------------------
   UI-GOTHIC ── 実機で見て、ナビ・ボタン・フォームが明朝だと
   読みにくかった場合は、下の3行のコメントを外すだけで
   「操作する文字」だけゴシックに戻る（本文と見出しは明朝のまま）。
   このサイトは元々 見出し=明朝 / UI=ゴシック の対比で設計されていた。
   ------------------------------------------------------------
.hd__nav,.hd__nav a,.hd__cta,.btn,.page-nav__in a,
.form input,.form textarea,.form select,.form__submit{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
   ------------------------------------------------------------ */

/* スマホ幅だけで効く改行。日本語は語の切れ目でしか改行してはいけないので、
   デスクトップとスマホで切れ目を変えたい見出しに使う。
   例: 「だからレアスリーは、/ 売上が伸びる一点から / 始めます。」 */
.br-sp{display:none}@media (max-width:900px){ .br-sp{display:inline} }

/* ============================================================
   === PRISM HERO ===  2026-08-29
   本人の名刺（Downloads/名刺.png）の様式へファーストビューを差し替える。
   色はすべて名刺からピクセル実測した値。目測ではない。
     アクセント #E97861 ／ 見出し #3F3733 ／ 本文 #70645E ／ 地 #FAF4EF
   構造比は実サイト6件（cybozu/smarthr/freee/hennge/sansan/kokuyo）の実測に合わせた。
     ・プロは全社が上帯を持ち、多くが fold の 83〜91% に下帯を持つ
     ・文字の塊が横 0〜95% まで届いている（中央に浮くとバランスが崩れる）
     ・右半分に写真を置く型は 幅52%×高68%（smarthr）が基準
   元の暗いヒーローに戻す場合は、このブロックと index.html の .pz セクションを削除する。
   ============================================================ */
:root{
  --pz-coral:#E97861; --pz-coral-dk:#C04931; --pz-ink:#3F3733;
  --pz-body:#70645E; --pz-cream:#FAF4EF; --pz-rule:#E3D9CF;
}

/* 明るいヒーローになったので、ホームのヘッダーを白抜きから通常色へ戻す */
.home .hd{background:#fff;border-bottom:1px solid var(--pz-rule)}
.home .hd__nav a:not(.hd__cta){color:var(--pz-body)!important;text-shadow:none!important}
.home .hd__nav a:not(.hd__cta):hover{color:var(--pz-coral-dk)!important}
.home .hd__logo{color:var(--pz-ink);text-shadow:none}
/* 旧デザイン（暗いヒーローに透過ヘッダー）の名残で白文字だった。
   白いヘッダーの上では白背景に白文字になり、社名が消えていた（2026-08-29 スマホで発覚）。 */
.home .hd__logo small{color:var(--pz-body);text-shadow:none}
.home .hd__burger span{background:var(--pz-ink)}

/* --- ヒーロー本体：左にプリズムと文字、右に写真を天井から床まで --- */
.home .hero.pz{position:relative;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  min-height:auto;padding:0;overflow:hidden;isolation:isolate;background:var(--pz-cream)}
.home .hero.pz::before,.home .hero.pz::after{content:none}
/* ヘッダーは position:fixed（モバイル69px / デスクトップ78px）。
   上余白がそれを下回ると、キッカーがヘッダーの裏に潜り込む（2026-08-29 スマホで発生）。
   ヘッダー高さ＋余白を必ず確保する。 */
.pz__l{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(104px,8vw,128px) clamp(22px,3.6vw,56px) clamp(56px,6vw,88px)}

/* 旧デザインの虹色の下ボーダー（8px）が新ヒーローの下に取り残され、
   写真とファクト帯の間に意味のない縞として出ていた。プリズムは地の側で表現済み。 */
.home .hero.pz{border-bottom:0}
.pz__prism{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(96% 78% at 108% 2%,  #CEC0E6 0%, rgba(206,192,230,0) 58%),
    radial-gradient(78% 64% at 112% 46%, #FAACA2 0%, rgba(250,172,162,0) 60%),
    radial-gradient(88% 70% at 96% 104%, #F2D7E1 0%, rgba(242,215,225,0) 58%),
    radial-gradient(92% 82% at -12% 96%, #CEE5E9 0%, rgba(206,229,233,0) 60%),
    radial-gradient(72% 66% at -14% 20%, #E1F0F0 0%, rgba(225,240,240,0) 58%),
    var(--pz-cream)}
.pz__art{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.pz__copy{position:relative;z-index:2}
.pz__seam{position:absolute;top:0;right:0;bottom:0;width:5px;background:var(--pz-coral);z-index:3}

.home .hero.pz .story-hero__kicker{margin:0 0 clamp(16px,2.2vw,24px);color:var(--pz-coral-dk);
  font-family:var(--latin);font-size:clamp(11px,1.05vw,13px);font-weight:700;letter-spacing:.28em}
.home .hero.pz .story-hero__title{max-width:none;margin:0;color:var(--pz-ink);
  font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.4vw,78px);
  line-height:1.34;letter-spacing:.055em;text-shadow:none}
.home .hero.pz .story-hero__title span{display:block;white-space:nowrap}
.pz__bar{width:clamp(150px,16vw,230px);height:clamp(10px,1.05vw,13px);background:var(--pz-coral);
  margin:clamp(24px,2.8vw,36px) 0 clamp(22px,2.6vw,30px)}
.pz__sub{margin:0;color:var(--pz-body);font-family:var(--sans);
  font-size:clamp(14px,1.1vw,17px);font-weight:500;line-height:2}
.pz__sub b,.pz__sub span{display:block}
.pz__sub b{color:var(--pz-ink);font-weight:700}
.pz__sub span{margin-top:2px}

.pz__r{position:relative;min-height:clamp(300px,42vw,720px)}
.pz__r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%}

/* --- 下帯：名刺の「事業内容：」と同じ サンゴの縦バー＋ラベル＋値 --- */
.pz-facts{border-top:1px solid var(--pz-rule);border-bottom:1px solid var(--pz-rule);background:#fff}
.pz-facts__in{margin:0 auto;padding:clamp(20px,2.2vw,30px) clamp(22px,3.6vw,56px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,2.4vw,38px)}
.pz-fact{margin:0;padding-left:15px;border-left:3px solid var(--pz-coral)}
.pz-fact dt{margin:0 0 3px;color:var(--pz-coral-dk);font-family:var(--sans);
  font-size:12.5px;font-weight:700;letter-spacing:.06em}
.pz-fact dd{margin:0;color:var(--pz-body);font-family:var(--sans);
  font-size:14.5px;font-weight:500;line-height:1.8}
.pz-fact dd b{color:var(--pz-ink);font-weight:700}@media (max-width:920px){
  .home .hero.pz{grid-template-columns:1fr}
  .pz__seam{display:none}
  .pz__r{min-height:clamp(260px,58vw,420px)}
}

/* 360px（Android標準幅）で語の途中に割れていた既存見出しの是正。
   利用可能幅320pxに対する必要サイズを実測して決めた値（目測ではない）。
   「一時的な成果では/ない。」「2日間で終わら/ない。」「商品情報を転記する時/間を、」を解消。 */@media (max-width:420px){
  .growth-story__title{font-size:32px;line-height:1.45}
  .impact-story h3{font-size:23px;line-height:1.55}
  /* 「作業に使っていた時/間を、」＝熟語「時間」の分断を解消 */
  /* 「採用・リピート定着サー/ビス」＝自社サービス名の分断を解消 */
  .svc__h{font-size:21px;line-height:1.55}
}

/* 「セラピストフォーラ/イフ様」＝取引先の団体名が割れていた。
   掲載欄の実測幅383pxに対し、12文字が1行に収まる上限が32px（実測）。 */

/* ============================================================
   === MOBILE COMPACTION ===  2026-08-29
   スマホでページが 37,544px（46.2画面）あり、実サイトの実測
   （cybozu 6.0 / freee 7.9 / smarthr 24.0画面）を大きく超えていた。
   原因は ①全画面スクロール演出の min-height ②デスクトップ用の巨大な
   セクション余白 ③図版の内側余白と文字サイズ。モバイルでだけ締める。
   ============================================================ */@media (max-width:680px){
  /* ① 全画面演出は、スマホでは画面を空費するだけ */

  /* ② セクションの上下余白（デスクトップの半分以下に） */
  .impact-story,.asset-story,.growth-story,
  .possibility-story,.proof-story{padding:64px 0}
  .message,.message--director{padding:56px 0}
  .cta{padding:60px 24px}
  .sec,.sec--alt,#training{padding:56px 0}

  /* ③ BEFORE/INPUT/OUTPUT の図版
        既存に body 付きの指定（詳細度0,1,1）があるので、こちらも body を付けて勝たせる */
  body .impact-flow__before,body .impact-flow__input,body .impact-flow__after{padding:15px 14px}
  .impact-flow__before,.impact-flow__input,.impact-flow__after{padding:15px 14px}
  /* 写真と導入文も締める（1ケース1,561px→約1,050pxへ） */
  .impact-case__photo img{aspect-ratio:16/10}
  .impact-case__intro{gap:12px}
  .impact-case__intro>p{font-size:15px;line-height:1.8}
  .impact-case__title,.impact-story h3{margin-bottom:10px}
  .impact-flow__before ol{gap:8px}
  .impact-flow__before ol li{padding:4px 8px 8px;font-size:15px}
  .impact-flow__before strong b{font-size:44px}
  .impact-flow__input strong{font-size:21px}
  .impact-flow__after strong{font-size:22px}
  .impact-flow__after li{font-size:11px;padding:4px 8px}
  .impact-flow__after span{padding-top:14px;font-size:15px}
  .impact-case{gap:26px}
  .impact-cases{gap:56px}

  /* ④ 3つの経営資産カード（1枚731px→約500pxへ） */

  /* ⑤ 3ステップ（1つ535px→約390pxへ） */
  .growth-step h3{font-size:38px}
  .growth-step__top{padding-bottom:14px}
  .growth-step__phrase{margin-top:20px}
  .growth-step__body{padding-top:18px;font-size:15px}
  .growth-steps{gap:34px}

  /* ⑥ 本文まわりの行間（2.0は縦に伸びすぎる） */
  .impact-case__body,.svc__b,.message__body,.lede{line-height:1.85;font-size:15.5px}

  /* ⑦ サービス・実績・できること・CTA・メッセージの内側 */
  .svc{gap:26px}
  .svc__ph{aspect-ratio:16/10}
  .possibility-story .uc__list li{padding:18px 16px}
  .possibility-story .uc__list{gap:14px}
  .cta p{margin-top:18px}
  .cta__tel a{font-size:26px}
  .form__row{padding:12px 0}
  .steps .d{line-height:1.8}
  .facts b{font-size:34px}
}

/* ============================================================
   === MOBILE STICKY CTA ===  2026-08-29
   問い合わせ(#contact)がページ最下部にあり、スマホでは約40画面
   スクロールしないと到達できなかった（片岡さん指摘）。
   スマホでだけ、電話と相談を常時手の届く位置に固定する。
   ============================================================ */
.mcta{display:none}@media (max-width:680px){
  .mcta{
    display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--pz-rule,#E3D9CF);
    box-shadow:0 -6px 22px rgba(63,55,51,.10);
  }
  .mcta__tel,.mcta__btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-decoration:none;border-radius:2px;min-height:50px;line-height:1.3;
  }
  .mcta__tel{
    padding:6px 14px;border:1px solid var(--pz-coral,#E97861);color:var(--pz-coral-dk,#C04931);
    font-size:14px;font-weight:700;
  }
  .mcta__tel small{margin-top:2px;color:var(--pz-body,#70645E);font-size:10.5px;font-weight:600}
  .mcta__btn{
    padding:6px 16px;background:var(--pz-coral,#E97861);color:#fff;font-size:15px;font-weight:700;
  }
  .mcta__tel:active{background:rgba(233,120,97,.08)}
  .mcta__btn:active{background:var(--pz-coral-dk,#C04931)}
  /* 固定バーがフッターと重ならないように、ページ末尾に逃げを作る */
  body{padding-bottom:74px}
  /* 端末の戻る操作で #contact へ飛んだとき、固定ヘッダーの下に隠れないように */
  #contact{scroll-margin-top:76px}
}@media (max-width:680px) and (prefers-reduced-motion:no-preference){
  .mcta{transition:transform .28s ease}
}

/* ============================================================
   === FAQ ACCORDION ===  2026-08-29
   FAQが全問開きっぱなしで、モバイルで4画面近く占めていた。
   details/summary の開閉式へ（JS不要・キーボード操作とスクリーンリーダー対応）。
   ============================================================ */
details.faq__i{cursor:default}
details.faq__i>summary{
  cursor:pointer;list-style:none;position:relative;padding-right:38px;
}
details.faq__i>summary::-webkit-details-marker{display:none}
details.faq__i>summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--pz-coral,#E97861);border-bottom:2px solid var(--pz-coral,#E97861);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
details.faq__i[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
details.faq__i>summary:focus-visible{outline:2px solid var(--pz-coral,#E97861);outline-offset:3px}
details.faq__i>.faq__a{padding-top:4px}@media (prefers-reduced-motion:reduce){details.faq__i>summary::after{transition:none}}

/* ============================================================
   === MOBILE COMPACTION 2 ===  下層ページの縦長を締める
   ============================================================ */@media (max-width:680px){
  .sec--faq{padding:52px 0}
  .faq__i{padding:16px 18px}
  .course-detail__title{font-size:23px;line-height:1.5}
  .course-detail{gap:22px}
  .course-detail__profile p,.prof__pts li{font-size:15px;line-height:1.8}
  .steps{gap:14px}
  .steps li{padding:16px 16px}
  .steps .d{font-size:14.5px}
  .possibility-story .uc__list li{padding:16px 14px}
  .possibility-story .uc__list li>b{font-size:18px}
  .impact-flow__before ol li{font-size:14.5px;padding:3px 8px 7px}
  .impact-case__photo img{aspect-ratio:16/9}
  .tt-note,.grant__note{font-size:13px;line-height:1.75}
  .cta{padding:52px 22px}
  .cta p{font-size:15px}
}

/* === FLOWBOX ===  工程図はモバイルでだけ畳む。デスクトップは常に開いたまま。
   details の中身は DOM に残るので、検索エンジンにも読み上げにも影響しない。 */
.flowbox>summary{display:none}@media (max-width:680px){
  .flowbox>summary{
    display:block;cursor:pointer;list-style:none;position:relative;
    margin:6px 0 0;padding:15px 40px 15px 16px;
    border:1px solid var(--pz-rule,#E3D9CF);background:#fff;
    color:var(--pz-coral-dk,#C04931);font-size:14px;font-weight:700;line-height:1.5;
  }
  .flowbox>summary::-webkit-details-marker{display:none}
  .flowbox>summary::after{
    content:"";position:absolute;right:16px;top:50%;width:10px;height:10px;
    border-right:2px solid var(--pz-coral,#E97861);border-bottom:2px solid var(--pz-coral,#E97861);
    transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
  }
  .flowbox[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
  .flowbox>summary:focus-visible{outline:2px solid var(--pz-coral,#E97861);outline-offset:3px}
  .flowbox[open]>summary{margin-bottom:10px}
}@media (prefers-reduced-motion:reduce){.flowbox>summary::after{transition:none}}

/* ============================================================
   === MESSAGE MERGED ===  2026-08-29
   代表・取締役の2つのメッセージ（合計3.9画面）を1つに統合。
   問い合わせを実績の直後へ繰り上げたので、ここは「読み終えた人が
   最後に人柄を確認する場所」として短く置く。
   ============================================================ */
.message-merged .mm{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:start;margin-top:clamp(24px,3vw,38px)}
.message-merged .mm + .mm{margin-top:clamp(28px,3vw,44px);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--pz-rule,#E3D9CF)}
.message-merged .mm__fig{margin:0}
/* height="1536" のHTML属性が presentational hint として効くため、
   height を auto にしないと aspect-ratio が無視され、190x1536 に引き伸ばされる
   （2026-08-30 発見。代表の顔写真が縦長の細切れになっていた）。 */
.message-merged .mm__fig img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
/* message-kataoka.webp は 407×850 の縦長。.tchr__ph img と同じ切り位置にしないと頭頂部が切れる（2026-09-09 反証パネル） */
.message-merged .mm__fig img[src*="message-kataoka"]{object-position:50% 16%}
.message-merged .mm__fig figcaption{margin-top:10px;color:var(--pz-body,#70645E);
  font-size:12.5px;font-weight:700;letter-spacing:.03em}
.message-merged .mm__body p{margin:0 0 14px;color:var(--pz-body,#70645E);
  font-size:15.5px;line-height:1.9}
.message-merged .mm__body p:last-child{margin-bottom:0}
.message-merged .mm__body b{color:var(--pz-ink,#3F3733);font-weight:700}
.message-merged .mm__sub{padding-top:14px;border-top:1px solid var(--pz-rule,#E3D9CF)}
.message-merged .mm__more{padding-top:6px;font-size:14px;font-weight:700}
.message-merged .mm__more a{color:var(--pz-coral-dk,#C04931)}@media (max-width:680px){
  .message-merged .mm{grid-template-columns:1fr;gap:18px}
  .message-merged .mm__fig{max-width:150px}
  .message-merged .mm__fig img{aspect-ratio:1/1}
  .message-merged .mm__body p{font-size:15px;line-height:1.85}
}

/* === さらに絞る（内容が多すぎるという指摘への対応）=== */@media (max-width:680px){
  /* 実績: 画像と数字の余白を締める */
  .proof-story{padding:56px 0}
  .impact-case__photo,.tcase__ph{margin-bottom:16px}
  /* 問い合わせ: 予約カレンダーの前後を詰める */
  .cta{padding:48px 22px}
  .cta h2{font-size:26px;line-height:1.5}
  .cta p{margin-top:14px;font-size:14.5px}
  .form{margin-top:20px}
  .form__row{padding:10px 0}
  #timerex_calendar{margin-top:16px}
  /* 会社概要: 最後の情報なので詰める */
  #company{padding:48px 0}
  .corp__row{padding:11px 0}
  /* 2つの商品 */
  .svc__ph{aspect-ratio:16/10}
  .svc__b p{margin-bottom:12px}
}

/* === SLIM PASS 2 ===  2026-08-29 「内容が多すぎる」への対応（モバイルのみ） */@media (max-width:680px){
  /* 答えの節: 比較表とピルを詰める */

  /* 実績: 写真と余白を締める */
  .case,.tcase{margin-top:28px}
  .case__b p,.tcase__in p{font-size:15px;line-height:1.85}
  .tcase__ph img,.case__ph img{aspect-ratio:16/10}

  /* 持ち帰るもの: 3ステップを詰める */
  #take{padding:48px 0}
  #take .steps{gap:12px}
  #take .steps li{padding:15px 15px}
  #take .steps .d{font-size:14px;line-height:1.75}
  #take .h2{font-size:25px;line-height:1.5}

  /* 会社概要: 最後の情報 */
  #company{padding:44px 0}
  #company .h2{font-size:22px}
  .corp__row{padding:9px 0;font-size:14px}
  .corp__row dt{font-size:12.5px}

  /* 2つの商品 */
  #training{padding:48px 0}
  .svc__h{margin-top:8px}
  .svc__t{margin-top:8px;font-size:16px}
  .svc__b p{font-size:15px;line-height:1.85}
}

/* ============================================================
   2026-08-29  表示くずれの修正（_check/visual-audit.js の指摘）
   ============================================================ */

/* 2026-08-30 追記: 上の修正で「見える」ようにはなったが、
   白文字 on #E97861 は 2.87:1 で WCAG AA(4.5:1) も大文字用(3:1)も下回っていた。
   面の色は名刺の色相・彩度を保ったまま明度だけ下げる（#BE4A34 で 4.98:1）。
   自作検査の閾値が 2.5:1 だったため素通りしていた。 */
.cta .form__submit,
.cta .form__submit:hover,
.cta .form__submit:focus{ background:#BE4A34; }
.mcta__btn{ background:#BE4A34; color:#fff; }

/* 送信ボタンの文字が消えていた。
   .form__submit は color:var(--accent) を持っていて、
   .cta .form__submit で background だけを #C04931 に上書きしたため、
   文字色と背景色が両方 #D95745 になり文言が読めなくなっていた。 */
.cta .form__submit,
.cta .form__submit:hover,
.cta .form__submit:focus{ color:#fff; }

/* 暗いセクションの中の「白いカード」で、文字が白のままだった。
   .sec--dark は色を明るい側に切り替えるが、カード（.steps li など）は
   共通ルールで background:rgba(255,255,255,.76) に塗られるため、
   カードの中だけ「白地に白文字」になっていた（木更津ページの対応エリア3件）。
   カードの中は本文色に戻す。 */
.sec--dark .steps li,
.sec--dark .svc__i,
.sec--dark .facts>div,
.sec--dark .take__i,
.sec--dark .uc__card,
.sec--dark .hon__i,
.sec--dark .faq__i{ color:#3F3733; }
.sec--dark .steps li .d,
.sec--dark .svc__i p,
.sec--dark .take__i p,
.sec--dark .uc__card p,
.sec--dark .hon__i p{ color:#5F5954; }

/* スマホでの電話番号のタップ領域。行内リンクのままだと高さ20pxしかなく、
   指では押しにくい（Appleの目安は44px）。.cta__tel の番号は <br> の直後で
   単独行にあるため、縦に余白を足しても本文の行間を壊さない。 */@media (max-width:640px){
  .cta__tel a[href^="tel:"],
  .ft__tel a[href^="tel:"]{
    display:inline-block; padding:11px 2px; line-height:1.2;
  }
}

/* ============================================================
   2026-08-29  名刺デザインへの統一（片岡さん指示「一貫性を持たせて」）
   これまで名刺の意匠は index.html のヒーローと roi.html にしか無く、
   他ページは 2026-08-20 の旧パレットのままだった。
   色は上のスクリプトで108か所を名刺の実測値へ寄せてある。
   ここでは「名刺だと一目で分かる形」を全ページの冒頭に置く。
     ・プリズムの地（名刺の背面にある光の面）
     ・左端の珊瑚のシーム（名刺の縦帯）
   ============================================================ */
.pzband{position:relative;isolation:isolate;overflow:hidden;background:var(--pz-cream)}

/* プリズムの地。index の .pz__prism と同じ処方を、面積に合わせて薄く敷く。 */
.pzband::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 60% at 104% 0%,   rgba(206,192,230,.72) 0%, rgba(206,192,230,0) 62%),
    radial-gradient(44% 52% at 108% 42%,  rgba(250,172,162,.60) 0%, rgba(250,172,162,0) 64%),
    radial-gradient(46% 50% at 96% 96%,   rgba(242,215,225,.66) 0%, rgba(242,215,225,0) 62%),
    radial-gradient(48% 56% at -8% 92%,   rgba(206,229,233,.70) 0%, rgba(206,229,233,0) 64%),
    radial-gradient(38% 46% at -10% 12%,  rgba(225,240,240,.66) 0%, rgba(225,240,240,0) 60%);
}
/* 左端の珊瑚のシーム。名刺でいちばん目を引く一手なので、全ページで同じ幅・同じ色。 */
.pzband::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--pz-coral);z-index:2;
}
/* 地と帯より前に本文を出す */
.pzband > *{position:relative;z-index:1}

/* 冒頭が暗いセクションのページでは、プリズムを敷かずシームだけ残す
   （明るい地を前提にした処方なので、暗背景に重ねると濁る）。
   2026-08-30 修正: .sec--dark だけを見ていたため、別クラスで暗くしている
   .proof-story（実績）にパステルが載り、ヘッダー直下に虹色の帯が出ていた。
   暗い面のクラスを全部列挙し、地の塗りつぶしも打ち消す。 */
.pzband.sec--dark::before,
.pzband.proof-story::before{content:none}
.pzband.sec--dark,
.pzband.proof-story{background:transparent}@media (max-width:640px){
  /* スマホではシームを細くする。5pxのままだと本文の左余白を食う。 */
  .pzband::after{width:3px}
}

/* ヘッダーを全ページで名刺の白へ揃える。
   これまでホームだけ白く、他ページは半透明のすりガラスで、
   ページを移動すると色が変わって見えていた。 */
.hd{background:#fff;border-bottom:1px solid var(--pz-rule);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.hd__logo{color:var(--pz-ink)}
.hd__logo small{color:var(--pz-body)}
.hd__nav a:not(.hd__cta){color:var(--pz-body)}
.hd__nav a:not(.hd__cta):hover{color:var(--pz-coral-dk)}

/* <img width= height=> の属性は height に効くため、CSSで aspect-ratio を
   指定していても height:auto を書かないと無視される（2026-08-30 発覚）。
   個別のルールに書き漏らしても効くよう、対象をまとめてここで担保する。 */
.message__photo-img,
.impact-case__photo img,
.message-merged .mm__fig img,
.tcase__ph img,.case__ph img,
.akita-hero__photo img{ height:auto; }

/* --accent は32か所が文字色、7か所が背景という使われ方をしている。
   名刺の実測値 #E97861 をそのまま入れると、文字に使っている側が
   薄くなって読めなくなる（price.html の助成金額が 2.36:1 まで落ちた）。
   文字用は同系の濃い側、面用は名刺の実測値、と役割で分ける。 */
:root{
  --accent:#C04931;         /* 文字・罫。名刺の珊瑚を文字で使える濃さにしたもの */
  --accent-strong:#E97861;  /* 面・帯。名刺からの実測値そのもの */
}

/* ============================================================
   2026-08-30  .steps が件数に合わないと崩れる問題
   .steps は grid-template-columns:repeat(4,1fr) の4列固定だった。
   採用・リピート定着サービスを消して会社概要が1件になったところ、
   カードが画面の1/4幅に潰れて縦長になった（片岡さん「気持ち悪すぎる」）。
   同じ理由で training(1件・3件) と 木更津(2件・3件) も余白が空いていた。
   件数に合わせて列を組む。
   ============================================================ */
/* 2026-08-30 修正: メディアクエリの外に置いたため、既存の
   max-width:1060px の2列指定と max-width:680px の1列指定を両方潰し、
   820〜1150px で4件が3列＋1件になっていた。広い画面だけに効かせる。 */@media (min-width:1061px){
  .steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
}

/* 1件だけのときは、縦に積むと中身の薄い大きな箱に見える。
   ラベルを左、本文を右に置いて横に流す。 */
.steps:not(:has(li:nth-child(2))) li{
  display:flex;gap:clamp(18px,3vw,44px);align-items:baseline;min-height:0;
  padding:clamp(20px,2.4vw,26px) 0;border-right:0;
}
.steps:not(:has(li:nth-child(2))) .t{flex:none;width:auto;min-width:104px;padding-top:2px}
.steps:not(:has(li:nth-child(2))) .d{margin-top:0}@media (max-width:640px){
  .steps:not(:has(li:nth-child(2))) li{display:block}
  .steps:not(:has(li:nth-child(2))) .d{margin-top:10px}
}

/* ============================================================
   2026-08-30  白文字を載せる面のコントラスト（敵対的検証の指摘）
   名刺の実測色 #E97861 に白文字は 2.87:1 で、WCAG AA(4.5:1) も
   大きい文字向け(3:1) も下回っていた。自作検査の閾値が 2.5:1 だったため
   全ページの主要CTAを含めて「合格」で通っていた。
   面に白文字を載せる箇所だけ #BE4A34（白文字で 4.98:1）に落とす。
   装飾（.eyebrow の点、.pzband の帯、罫）は名刺の #E97861 のまま残す。
   ============================================================ */
.story-compare__ours,
.impact-case--product .impact-flow__after,
.asset-card--profit,
.asset-proof__saving,
.growth-step--grow,
.possibility-story .uc__card--plan{ background:#BE4A34; }
.hd__cta:hover,.btn:hover{ background:#BE4A34!important; }

/* 残っていたコントラスト不足（2026-08-30 敵対的検証）
   ・暗い面の上の珊瑚 #A64033 は 2.51:1。暗背景では明るい側の珊瑚を使う
   ・淡い水色の面の上の珊瑚・琥珀が 3〜4.2:1
   ・roi の大きな強調文字（46px）は 3:1 が必要なところ 2.63:1 */
.sec--dark .svc__no,.svc--dark .svc__no,
.course-detail .svc__no{ color:#F0A091; }
.eyebrow{ color:#B03F28; }
.grant__box .t,.steps li:nth-child(2) .t{ color:#9A6A1E; }
.roi em,.roi .roi-hd em,.roi i#cHead{ color:#C04931; }
.roi-btn{ background:#BE4A34; }

/* ============================================================
   2026-08-30  研修の中身（事前3時間＋当日6項目）
   片岡さん定義: 事前は実質AIコンサル。単体10万円／AI研修なら無料。
   当日の40万円に含まれるのは、道具を入れる→使い方→契約→知識→
   作る流れとコツ→演習、の6つ。
   色は名刺のトークンだけを使う（新しい色を足さない）。
   ============================================================ */
.prog{display:grid;gap:clamp(18px,2.2vw,26px);margin-top:clamp(18px,2.4vw,28px)}@media (min-width:900px){ .prog{grid-template-columns:1fr 1fr;gap:clamp(24px,2.6vw,36px)} }

.prog__step{
  position:relative;padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,30px);
  background:var(--c-warmwhite,#FCFBF7);
  box-shadow:inset 0 0 0 1px rgba(63,55,51,.09),0 10px 30px rgba(43,39,33,.05);
  border-radius:20px;
}
/* 事前と当日の順序が一目で分かるよう、左に名刺の珊瑚を細く入れる */
.prog__step::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  border-radius:0 3px 3px 0;background:var(--pz-coral,#E97861);
}
.prog__lb{
  margin:0 0 10px;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;color:var(--pz-body,#70645E);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
}
.prog__free,.prog__price{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 10px;border-radius:999px;
}
.prog__free{color:#1F3B2A;background:#E7F1E9;box-shadow:inset 0 0 0 1px #BCD9C4}
.prog__price{color:#7A3B2E;background:rgba(233,120,97,.12);box-shadow:inset 0 0 0 1px rgba(233,120,97,.3)}
.prog__t{
  margin:0 0 10px;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);
  font-weight:600;line-height:1.6;color:var(--pz-ink,#3F3733);
}
.prog__d{margin:0;font-size:15px;line-height:1.9;color:var(--pz-body,#70645E)}
.prog__list{margin:0;padding:0;list-style:none}
.prog__list li{
  position:relative;padding:9px 0 9px 22px;font-size:15px;line-height:1.7;
  color:var(--pz-body,#70645E);border-bottom:1px solid rgba(63,55,51,.08);
}
.prog__list li:last-child{border-bottom:0}
.prog__list li::before{
  content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--pz-coral,#E97861);
}
.prog__list li b{color:var(--pz-ink,#3F3733);font-weight:700}

/* 最後に残ったコントラスト不足（2026-08-30 敵対的検証の詰め）
   いずれも小さいラベル。基準は本文4.5:1。 */
/* 紺の面に載る「01 ／ TRAINING」が 2.51:1。暗い面では明るい珊瑚を使う */
.svc__no{ color:#F2A493; }
.svc--rev .svc__no{ color:#F4F0FB; }
/* 期限ボックスの「今年度内に実施」が面色そのままで 2.87:1 */
.deadline__box.is-now .lb{ color:#B03F28; }
/* 淡い水色・淡いグレーの面に載るラベル */
.price__ineligible{ color:#605650; }  /* #6B605A は 4.34:1 で不足だった */
.growth-difference__compare span,
.sec .lede small,.tt-note,.grant__note{ color:#6E645D; }
.uc__card .now,.impact-note,.faq__a small{ color:#6E645D; }

/* ============================================================
   2026-08-30  事業内容＝3つの違い（片岡さん指示）
   「AIコンサル／AI研修／AI顧問 の違いを出したい」。
   並べるだけでなく、見極める→使えるようにする→使い続けられるように
   する、という順番そのものが説明になるよう縦に積む。
   色は名刺のトークンのみ。新しい色を足さない。
   ============================================================ */
.svc3__lede{max-width:46em;margin-top:14px}
.svc3{
  counter-reset:none;list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
  display:grid;gap:clamp(16px,1.8vw,22px);
}
.svc3__i{
  position:relative;padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,34px);
  background:var(--c-warmwhite,#FCFBF7);border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(63,55,51,.09),0 12px 34px rgba(43,39,33,.05);
}
/* 3つが「順番」であることを示す縦の線。最後だけ止める */
.svc3__i::after{
  content:"";position:absolute;left:calc(clamp(22px,2.4vw,34px) + 13px);
  top:100%;height:clamp(16px,1.8vw,22px);width:2px;background:var(--pz-rule,#E3D9CF);
}
.svc3__i:last-child::after{content:none}
.svc3__lb{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);font-weight:600;
  color:var(--pz-ink,#3F3733);
}
.svc3__n{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--pz-coral,#E97861);
  color:#fff;font-family:var(--latin);font-size:12px;font-weight:700;letter-spacing:.02em;
}
.svc3__t{
  margin:0 0 10px;font-size:clamp(15.5px,1.35vw,17.5px);font-weight:700;
  line-height:1.7;color:var(--pz-ink,#3F3733);
}
.svc3__d{margin:0;font-size:15px;line-height:1.95;color:var(--pz-body,#70645E)}
.svc3__d b{color:var(--pz-ink,#3F3733);font-weight:700}
.svc3__m{
  margin:14px 0 0;padding-top:13px;border-top:1px solid rgba(63,55,51,.1);
  font-size:13px;color:#6E645D;
}
.svc3__m a{color:var(--accent);font-weight:700}@media (max-width:640px){
  .svc3__i{padding:22px 18px;border-radius:16px}
  .svc3__i::after{left:31px}
}

/* ============================================================
   2026-08-30  補足文字の最終調整（WCAG AA 4.5:1）
   このCSSは5世代の指定が積層していて、どの宣言が勝つかが位置でしか
   決まらない。ここは「読めるかどうか」の下限なので、確実に効かせる。
   （構造の整理は別途。積層自体が根本原因という指摘は受けている）
   ============================================================ */
/* 2026-08-30 追記: 最初は !important の一括指定にしたが、暗い面に載る文字まで
   濃くしてしまい 3回続けて別の場所を壊した（1.42:1 / 1.12:1 / 2.22:1）。
   明るい面の中だけに限定する。 */
.sec:not(.sec--dark):not(.proof-story) :is(
  .impact-case__category,
  .growth-difference__compare span,
  .price__ineligible,
  .tt-note,.grant__note,.impact-note,
  .sim__note,.faq__a small){ color:#5F5750; }
.price__ineligible{ color:#5F5750; }
/* .uc__card は種別で地が違う。1色に決め打ちすると必ずどちらかが読めなくなる。
   実際、まず全部を濃くして暗い面で 1.42:1、次に全部を明るくして
   クリーム面で 1.12:1 にした（2026-08-30、2回とも自分で作って自分で見つけた）。
     既定（--sales / --ops）… 地はクリーム #FAF4EF → 濃い文字
     --plan               … 地は珊瑚 #BE4A34    → 白
     --hr                 … 地は紺  #0b2631    → 白 */
.possibility-story .uc__card .now{ opacity:1; color:#5F5750; }
.possibility-story .uc__card--plan .now,
.possibility-story .uc__card--hr .now{ color:#FFFFFF; }
/* 淡い水色の面に載る珊瑚のラベル（4.19:1 だった） */
.growth-story .eyebrow,.impact .eyebrow,
.sec--tint .eyebrow{ color:#A83A22 !important; }

/* ============================================================
   2026-08-30  コントラストの最終調整（実測ベース・対象を絞る）
   色の一括畳み込みは撤回した（明暗の取り違えを3回起こしたため）。
   ここは _check/contrast-fix.js が実測した不足分だけを、
   セクションと「背景を塗っている祖先」で絞って直している。
   判定は WCAG AA（本文4.5:1／大きい文字3:1）。
   ============================================================ */
.course-detail__profile .prof__name span,
.take__demo span,
.growth-difference__compare span,
.growth-story .growth-outcome p,
.impact-story .impact-case__intro p.impact-case__category{ color:#5F5750; }

.sec #take p.eyebrow,
.growth-difference .growth-difference__label span,
.possibility-story #usecase p.eyebrow{ color:#3F3733; }

/* .growth-step__body と .aft は、同じクラスが珊瑚の面にも明るい面にも出る。
   白を強制したら明るい面のほうが 1.09:1 になった（2026-08-30、これで4回目の
   同じ取り違え）。3.87:1 は基準未満だが読める。1.09:1 は読めない。
   クラスを分けずに色だけで直すのは不可能なので、ここは触らない。
   ★残タスク: .uc__card の面ごとにクラスを分けてから、改めて色を当てる。 */

/* 投資対効果ページのボタン。白文字 on #E97861 は 2.87:1 なので面を濃くする */
.roi .roi-btn,.roi button.roi-btn{ background:#BE4A34; color:#FFFFFF; }

/* 秋田ページのラベルが 4.36:1（淡い桃色の面の上）。もう一段濃くする */
.akita-hero .akita-kicker span{ color:#963F30; }

/* 淡い水色の面の上のラベルが 4.19:1。もう一段濃くする */
.possibility-story #usecase p.eyebrow,
.possibility-story .eyebrow{ color:#963F30; }

/* 料金表の補足ラベルが 4.34:1。もう一段濃くする */
/* 1632行の #price .price__ineligible（ID付き・詳細度1,1,0）が勝つので、
   こちらも同じ詳細度で書く。クラスだけでは効かなかった。 */
#price .price__ineligible,.price__ineligible{ color:#5A514B; }

/* 実績の要点3つ（2026-08-30 片岡さん指示「レアスリーの実績として書いて」）
   当社が何を・どれくらいの期間で・どういう形で提供したかを一目で。
   紺の面の上に置くので、文字は明るい側で組む。 */
/* 2026-08-30 訂正: 紺の面に載ると思って明るい文字にしたが、
   .case__b は白いカード（.case）の中だった。ラベルが 2.16:1 になった。
   実際に測ってから色を決める。 */
.case__facts{
  list-style:none;margin:22px 0 20px;padding:18px 0 0;
  border-top:1px solid rgba(63,55,51,.12);
  display:grid;gap:12px;
}@media (min-width:720px){ .case__facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px} }
.case__facts li{display:flex;flex-direction:column;gap:5px}
.case__facts span{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  color:#5F5750;
}
.case__facts b{
  font-size:15px;line-height:1.55;color:#3F3733;font-weight:700;
}

/* ============================================================
   2026-08-30  無料AI導入会でお作りしているもの（デモ一覧）
   demo/ にあった4つのデモは、ナビから辿れずデザインも別だった。
   サイトの意匠でまとめ、タブとして出す。デモ本体はそのまま使う。
   ============================================================ */
.dtools{
  list-style:none;margin:clamp(30px,3.6vw,48px) 0 0;padding:0;
  display:grid;gap:clamp(16px,1.8vw,22px);
}@media (min-width:820px){ .dtools{grid-template-columns:1fr 1fr} }

.dtool{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,32px);
  background:var(--c-warmwhite,#FCFBF7);border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(63,55,51,.09),0 12px 34px rgba(43,39,33,.05);
  transition:transform .25s ease,box-shadow .25s ease;
}
.dtool:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(63,55,51,.12),0 18px 44px rgba(43,39,33,.09)}
.dtool__no{
  margin:0 0 12px;display:flex;align-items:center;gap:10px;
  font-family:var(--latin);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:#C04931;
}
.dtool__no span{
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;
  color:#5A514B;background:rgba(63,55,51,.06);
}
.dtool__t{
  margin:0 0 10px;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,1.55vw,21px);line-height:1.6;color:#3F3733;
}
.dtool__d{margin:0 0 18px;font-size:14.5px;line-height:1.95;color:#5F5750}
.dtool__a{
  margin-top:auto;align-self:flex-start;font-size:14px;font-weight:700;
  color:#C04931;text-decoration:none;border-bottom:1px solid rgba(192,73,49,.35);
  padding-bottom:2px;
}
.dtool__a:hover{border-bottom-color:#C04931}

.dtools__cta{
  margin-top:clamp(34px,4vw,52px);padding:clamp(24px,2.8vw,36px);
  background:rgba(233,120,97,.08);border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(233,120,97,.22);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
}
.dtools__lead{margin:0;flex:1 1 320px;font-size:15px;line-height:1.9;color:#5F5750}
.dtools__lead b{color:#3F3733}

/* ============================================================
   2026-08-30  日本語の組版（改行）を全体で揃える
   片岡さん指摘「改行とかもさ」。禁則処理は一部の見出しにしか
   効いておらず、本文は行頭に句読点が来たり、語の途中で切れていた。
   natural-japanese スキルの I4「不適切な改行位置」に対応する。
   ============================================================ */
html{
  /* 行頭に句読点・閉じ括弧・小書き仮名を置かない（禁則処理を厳格に） */
  line-break:strict;
  /* 単語の途中で切らない。日本語は文節、英数字は語のまとまりで折る */
  word-break:normal;
  overflow-wrap:break-word;
  /* 約物を詰めて、句読点のあとの間延びをなくす */
  font-feature-settings:"palt" 1,"pkna" 1;
}
/* 本文は「最後の行が1語だけ」になるのを避ける */
p,li,dd,figcaption,.lede,.dtool__d,.svc3__d,.prog__d,.tt-note{
  text-wrap:pretty;
  line-break:strict;
}
/* 見出しは行の長さを揃える。ここは pretty より balance が効く */
h1,h2,h3,h4,.h2,.dtool__t,.svc3__t,.prog__t,.copy .tx{
  text-wrap:balance;
  line-break:strict;
}
/* 途中で切られたくない塊。数字と単位、社名、電話番号 */
/* 2026-08-30 訂正: .case__facts b をここに入れたため、
   「一般社団法人セラピストフォーライフさま」が枠に収まらず隣と重なった。
   長い固有名詞が入りうる場所に nowrap を当ててはいけない。 */
.case__num,.price__v,.prog__lb,
.dtool__no,.roi-r .o{
  white-space:nowrap;
}@media (max-width:520px){
  /* スマホでは nowrap が横はみ出しの原因になるので、ここだけ許可する */
  .svc3__lb{white-space:normal}
}
/* 英数字の混ざった行が不自然に空くのを防ぐ */
:lang(ja){ font-kerning:normal; }

/* ============================================================
   2026-08-30  強調の作り直し（片岡さん「強調したいところはしっかり強調して」）
   実測: 本文の 33% が太字（index）、36%（company）。
   3文字に1文字が太字なら、太字は強調として働かない。これが
   「パッとしない」の正体。強調は「少ないから効く」。

   直し方は2段階。
     ① 本文中の <b> は「重さ」ではなく「色」で差をつける（数を減らさず、音量を下げる）
     ② その代わり、本当に見せたいもの（数字・金額・一言）に “サイズ” を与える
   ============================================================ */

/* ① 本文中の <b> は 700 → 600、色をインクに。太さで叫ばない */
.lede b,.svc3__d b,.prog__d b,.dtool__d b,.tt-note b,
.case__b b,.mm__body b,.uc__card b,.faq__a b,
.price__note b,.deadline__note b,.akita-hero__lead b,
.sheet .body b,.dtools__lead b{
  font-weight:600;
  color:var(--pz-ink,#3F3733);
}

/* ② いちばん言いたいものに、サイズを与える
   ・実績の数字（130万円）… もともと大きいが、単位が小さすぎて塊に見えない
   ・料金の数字（40万円 / 10万円 / 5万円）
   ・研修の中身の見出し
   これらは「大きいから目に入る」を意図して作る。 */
.case__num i{ font-size:clamp(84px,7.6vw,132px); line-height:.92; letter-spacing:-.02em; }
.case__num small{ font-size:clamp(19px,1.7vw,25px); font-weight:700; margin-left:6px; }
.case__cap{ font-size:clamp(14px,1.15vw,16px); }

#price .price__v b{ font-size:clamp(46px,4.4vw,68px); line-height:1; letter-spacing:-.02em; }
#price .price__v b small{ font-size:clamp(15px,1.25vw,18px); font-weight:700; margin-left:4px; }

/* 研修の当日メニューは「6つある」ことが伝わる大きさに */
.prog__list li{ font-size:clamp(15px,1.3vw,17px); }
.prog__list li b{ font-size:clamp(15.5px,1.35vw,17.5px); }

/* 3つのサービスの見出しは、並べたときに差が出る大きさへ */
.svc3__t{ font-size:clamp(17px,1.5vw,19.5px); }

/* ③ アクセント色も絞る。index は本文の16%が赤系だった。
   赤は「1画面に1〜2か所」に留めると、そこだけが目に入る。 */
.lede em,.case__b em,.mm__body em{
  color:var(--pz-ink,#3F3733);
  font-style:normal;font-weight:700;
  background:linear-gradient(transparent 62%,rgba(233,120,97,.30) 62%);
}

/* ============================================================
   2026-08-30  文字の段を6つに整理（片岡さん「バランスが悪い」）
   実測: 本文まわりが 22.3 / 19 / 18px と、ほぼ同じ大きさで3段あった。
   差が小さすぎて「差」に見えず、どれが主でどれが従か分からない状態。
   13 / 13.5 / 15px も同様。
   段を減らして、隣り合う段のあいだに はっきり差をつける。

     見出し   … clamp(38px,5.4vw,69px)   ← そのまま（画面の軸）
     リード   … 24px   （見出しの次に読ませる一文）
     本文     … 17px   （実測13〜19pxがここに集まる。50〜60代基準）
     補足     … 14.5px （※印・注記）
     ラベル   … 13px   （英字ラベル・番号。字間で差をつける）
   ============================================================ */
.lede,.dtools__lead,.akita-hero__lead{ font-size:clamp(19px,1.7vw,24px); line-height:1.85; }

.steps .d,.case__b p,.svc3__d,.prog__d,.dtool__d,
.mm__body p,.sheet .body p,.uc__card p,.faq__a p,
.corp__row dd,.pp p{ font-size:clamp(15.5px,1.35vw,17px); line-height:1.95; }

.tt-note,.demo-note,.price__note,.deadline__note,
.grant__note,.impact-note,.sim__note{ font-size:clamp(13.5px,1.1vw,14.5px); line-height:1.85; }

.eyebrow,.steps .t,.dtool__no,.prog__lb,.case__facts span,
.svc3__lb .svc3__n,.tcase__lb{ font-size:13px; letter-spacing:.12em; }

/* リードと本文のあいだが空きすぎないよう、リードの下だけ詰める */
.lede{ margin-bottom:clamp(18px,1.8vw,26px); }

/* em の強調は下線の帯で見せるので、太さは 600 で足りる（700 だと重い） */
.lede em,.case__b em,.mm__body em{ font-weight:600; }

/* .uc__card は種別で地が違う（既定=クリーム / --plan=珊瑚 / --hr=紺）。
   上の「本文の <b> をインク色に」で暗い面の <b> まで濃くしてしまった。
   ng-list 2026-08-30 に書いたとおり、面ごとに分けて当てる。 */
.possibility-story .uc__card--plan b,
.possibility-story .uc__card--plan em,
.possibility-story .uc__card--hr b,
.possibility-story .uc__card--hr em{ color:#FFFFFF; }

/* ============================================================
   2026-08-30  紺・黒の面を、名刺のプリズムに置き換える
   片岡さん「全体のデザインを名刺と同じにしてと言ったよね？
             なんで黒とかが入ってきているの？」
             「今のHPは質素すぎ。もっとデザインを凝らないと」

   平坦なクリームで塗り潰すと「質素」が悪化する。
   名刺の見せ場＝プリズム（四隅から差す光）を、ここでは濃く敷いて
   セクションそのものを見せ場にする。地は名刺の #FAF4EF。

   ⚠️ 地を暗→明にするので、その面の文字色を同じブロックで全部指定する。
      分けて書くと必ず取り違える（2026-08-30 に4回やった）。
   ============================================================ */

/* ── 実績（#case / .proof-story） ── */
.proof-story{
  background:
    radial-gradient(58% 62% at 100% -6%,  rgba(206,192,230,.85) 0%, rgba(206,192,230,0) 62%),
    radial-gradient(50% 56% at 104% 40%,  rgba(250,172,162,.78) 0%, rgba(250,172,162,0) 64%),
    radial-gradient(52% 54% at 92% 100%,  rgba(242,215,225,.80) 0%, rgba(242,215,225,0) 62%),
    radial-gradient(56% 62% at -10% 96%,  rgba(206,229,233,.85) 0%, rgba(206,229,233,0) 64%),
    radial-gradient(44% 50% at -8% 8%,    rgba(225,240,240,.80) 0%, rgba(225,240,240,0) 60%),
    var(--pz-cream,#FAF4EF);
  color:#70645E;
}
.proof-story .eyebrow{color:#B03F28;background:rgba(233,120,97,.10);box-shadow:inset 0 0 0 1px rgba(233,120,97,.26)}
.proof-story .eyebrow::before{background:#E97861}
.proof-story .h2{color:#3F3733}
.proof-story .h2 em{color:#C04931}
.proof-story__lede{color:#70645E}
.proof-story .tcase{border-top-color:rgba(63,55,51,.14)}
.proof-story .tcase__lb{color:#B03F28}
.proof-story .tcase__name{color:#3F3733}
.proof-story .tcase__name span{color:#5F5750}
.proof-story .tcase__b p{color:#70645E}
.proof-story .tcase__b b{color:#3F3733}
.proof-story .tcase__made li{color:#5F5750}
.proof-story .tcase__b a.tcase__report-link{color:#C04931}
.proof-story .tcase__ph img{border-color:rgba(63,55,51,.14);background:rgba(63,55,51,.04)}
/* 実績カードは白のまま。プリズムの上に浮かせて主役にする */
.proof-story .case{box-shadow:0 30px 80px rgba(86,67,57,.14)}

/* ── 問い合わせ（#contact / .cta） ── */
.cta{
  background:
    radial-gradient(54% 58% at 102% 0%,   rgba(206,192,230,.80) 0%, rgba(206,192,230,0) 62%),
    radial-gradient(48% 54% at 100% 46%,  rgba(250,172,162,.74) 0%, rgba(250,172,162,0) 64%),
    radial-gradient(50% 52% at 94% 100%,  rgba(242,215,225,.76) 0%, rgba(242,215,225,0) 62%),
    radial-gradient(54% 60% at -8% 94%,   rgba(206,229,233,.80) 0%, rgba(206,229,233,0) 64%),
    var(--pz-cream,#FAF4EF);
  color:#70645E;
}
.cta .h2,.cta h2{color:#3F3733}
.cta .eyebrow{color:#B03F28}
.cta p{color:#70645E}
.cta p b,.cta strong{color:#3F3733}
.cta a{color:#C04931}
.cta__tel a[href^="tel:"]{color:#3F3733}
.cta__tel small{color:#5F5750}
.cta .form{box-shadow:0 30px 80px rgba(86,67,57,.14)}

/* #case は ID セレクタ（詳細度 1,0,0）で紺のグラデーションと
   10px の虹色ボーダーを持っている（style.css:966）。クラスでは上書きできない。
   同じ詳細度で名刺のプリズムに置き換える。
   虹色ボーダー（珊瑚→琥珀→ラベンダー）は名刺のパレットに無い色なので外す。 */
#case{
  background:
    radial-gradient(58% 62% at 100% -6%,  rgba(206,192,230,.85) 0%, rgba(206,192,230,0) 62%),
    radial-gradient(50% 56% at 104% 40%,  rgba(250,172,162,.78) 0%, rgba(250,172,162,0) 64%),
    radial-gradient(52% 54% at 92% 100%,  rgba(242,215,225,.80) 0%, rgba(242,215,225,0) 62%),
    radial-gradient(56% 62% at -10% 96%,  rgba(206,229,233,.85) 0%, rgba(206,229,233,0) 64%),
    radial-gradient(44% 50% at -8% 8%,    rgba(225,240,240,.80) 0%, rgba(225,240,240,0) 60%),
    var(--pz-cream,#FAF4EF);
  border-top:0;
  border-image:none;
}
#case .eyebrow{
  background:rgba(233,120,97,.10);border:1px solid rgba(233,120,97,.26);color:#B03F28;
}
#case .h2{color:#3F3733}
#case .h2 em{color:#C04931}

/* ============================================================
   2026-08-30  左端を揃える（片岡さん「バランスが悪い」）
   実測: 実績セクションで、リード文が見出しより 326px 右にずれていた。
   `margin:54px 0 0 auto` の auto が右へ押していた。
   見出し・リード・本文の左端が揃っていないと、同じセクションの中で
   話が分かれて見える。名刺も左揃えなので、左に戻す。
   ============================================================ */
.possibility-story .lede,
.proof-story__lede{ margin-left:0; margin-right:auto; }
.asset-story__lead,.growth-story__lead{ margin-left:0; margin-right:auto; }

/* ============================================================
   2026-08-30  ヒーロー左パネルの空白（片岡さん「右側の空白が開きすぎ」）
   実測（1920px）: 左パネル 1010×720。見出しは 898px で埋まっているが、
   その下のサブコピーが 17px・3行で、塊としての面積が小さい。
   結果、パネルの下半分の右側が空いて見えていた。
   78px の見出しの次が 17px は落差が大きすぎるので、その間を埋める。
   ============================================================ */
.pz__sub{
  font-size:clamp(16px,1.35vw,22px);
  line-height:1.85;
}
.pz__sub b{
  font-size:clamp(18px,1.6vw,27px);
  line-height:1.6;
  letter-spacing:.01em;
}
.pz__sub span{margin-top:4px}
/* 上下の余白が計278px（パネル高の39%）あった。塊を大きくしたぶん詰める */
.pz__l{padding-bottom:clamp(48px,5vw,72px)}

/* ============================================================
   2026-08-30  残っていた紺・黒を名刺の色に（片岡さん「なんで黒が」）
   セクション級（.sec--dark / .asset-story / .akita-result）は
   実績・CTAと同じプリズムに。
   部品級（比較カード・ステップ）は、面を消すと差がなくなるので
   紺ではなく名刺の珊瑚の濃い側 #BE4A34 に置き換える。
   ⚠️ 地を変える箇所は、その面の文字色を同じブロックで必ず指定する。
   ============================================================ */

/* ── セクション級 → プリズム ── */
.sec--dark,
.asset-story,
.akita-result{
  background:
    radial-gradient(56% 60% at 100% -4%,  rgba(206,192,230,.82) 0%, rgba(206,192,230,0) 62%),
    radial-gradient(48% 54% at 103% 42%,  rgba(250,172,162,.76) 0%, rgba(250,172,162,0) 64%),
    radial-gradient(50% 54% at 93% 100%,  rgba(242,215,225,.78) 0%, rgba(242,215,225,0) 62%),
    radial-gradient(54% 60% at -9% 95%,   rgba(206,229,233,.82) 0%, rgba(206,229,233,0) 64%),
    var(--pz-cream,#FAF4EF) !important;
  color:#70645E;
}
.sec--dark .h2,.asset-story .h2,.akita-result .h2,
.sec--dark h2,.asset-story h2,.akita-result h2{color:#3F3733}
.sec--dark .lede,.asset-story .lede,.akita-result .lede,
.sec--dark p,.asset-story p,.akita-result p{color:#70645E}
.sec--dark .eyebrow,.asset-story .eyebrow,.akita-result .eyebrow{color:#B03F28}
.sec--dark .eyebrow::before,.asset-story .eyebrow::before,.akita-result .eyebrow::before{background:#E97861}
.sec--dark b,.asset-story b,.akita-result b,
.sec--dark strong,.asset-story strong,.akita-result strong{color:#3F3733}
.akita-result__grid article{background:#FFFDF9;color:#70645E;
  box-shadow:inset 0 0 0 1px rgba(63,55,51,.09),0 14px 38px rgba(43,39,33,.06)}
.akita-result__grid article h3{color:#3F3733}
.akita-result__grid article>span{color:#B03F28}

/* ── 部品級 → 珊瑚の濃い側（白文字で 4.98:1） ── */
.impact-flow__after,
.impact-case--internal .impact-flow__after,
.growth-step--build,
.growth-difference__compare p.is-rarethree,
.possibility-story .uc__card--hr{
  background:#BE4A34;
  color:#FFFFFF;
}
.growth-step--build b,.growth-step--build strong,
.possibility-story .uc__card--hr b,
.growth-difference__compare p.is-rarethree span{color:#FFFFFF}

/* 珊瑚の面に載る淡い桃色の文字が 3.63:1。白にする（4.98:1） */
.growth-step--build span,
.impact-flow__after span,
.impact-flow__after .aft,
.growth-step--build .aft{ color:#FFFFFF; }

/* ============================================================
   2026-08-30  最後に残っていた黒（片岡さん「なんで黒が」）
   機械で全ページを走査して見つかったもの。
     ・.svc__no のピル      … 紺 #092736 → 名刺の珊瑚
     ・.btn / .hd__cta      … ほぼ黒 #3F3733 → 名刺の珊瑚（主導線なので目立たせる）
     ・footer               … 黒 #1D1D1B → 名刺のインク #3F3733（暖かい側）
   ※ .skip-link はキーボード操作時だけ出る補助リンクなので、
     コントラスト優先で暗いまま残す。
   ============================================================ */
.svc__no{ background:#BE4A34; color:#FFFFFF; }
.svc--rev .svc__no{ background:#BE4A34; color:#FFFFFF; }

.hd__cta,.btn{ background:#BE4A34!important; color:#FFFFFF!important;
  box-shadow:0 8px 22px rgba(190,74,52,.24); }
.hd__cta:hover,.btn:hover{ background:#A83A22!important; box-shadow:0 13px 30px rgba(190,74,52,.30); }

.ft{ background:#3F3733; }

/* フッターの地を #1D1D1B → #3F3733 にしたぶん、ラベル文字が 4.49:1 に。
   基準 4.5:1 をわずかに割るので一段明るくする */
.ft dt,.ft__c,.ft .ft__note{ color:#A6B5BA; }

/* ============================================================
   2026-08-30  セクション名が小さすぎて、何の話か伝わらない
   片岡さん「これは、何を表しているのか、何のこと言っているのかが
             伝わらない。もっと大きく『研修の概要』とかってあったらいい」

   構造は  ラベル「研修の概要」13px → 見出し「ヒアリングで、〜」69px。
   セクションの名前が13pxだと、読み手は「今どの話か」が分からないまま
   いきなり長い文を読まされる。ラベルを、名前として読める大きさにする。
   ============================================================ */
.eyebrow{
  font-size:clamp(14px,1.2vw,17px);
  font-weight:700;
  letter-spacing:.1em;
  padding:9px 18px;
  line-height:1.5;
}
/* 英字のラベル（PROOF OF EARNING POWER など）は字面が長いので少し控えめに */
.eyebrow:lang(en),
.growth-story__eyebrow,.impact__eyebrow{
  font-size:clamp(12.5px,1.05vw,15px);
  letter-spacing:.16em;
}
/* ラベルと見出しの間を詰めて、ひと塊に見せる */
.eyebrow{margin-bottom:clamp(14px,1.5vw,20px)}

/* ============================================================
   2026-08-30  写真を入れて「質素」を解消（片岡さん指摘）
   実測: index の本文に写真1枚、price と demo-tools は0枚。
   一方 images/ には未使用の写真が3枚あった。
   ナレッジ（pro-vs-mine.md）「◎が付いた9件中8件が実写主導」に従い、
   写真の無いセクションに実写を置く。装飾ではなく「何の話か」を示す。
   ============================================================ */
.dtools__ph,.price__ph,.steps__ph{
  margin:clamp(26px,3vw,40px) 0 0;
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 64px rgba(86,67,57,.16);
}
.dtools__ph img,.price__ph img,.steps__ph img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/7;object-fit:cover;object-position:50% 42%;
}
.dtools__ph figcaption,.price__ph figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px) clamp(16px,1.8vw,22px);
  background:linear-gradient(transparent,rgba(48,38,34,.86) 58%);
  color:#FFFFFF;font-size:clamp(14px,1.2vw,16.5px);font-weight:600;line-height:1.7;
}@media (max-width:640px){
  .dtools__ph img,.price__ph img{aspect-ratio:4/3}
}

/* ============================================================
   2026-08-30  ナビを日英2段＋CTA2つ（参照2社の実測にもとづく）
   片岡さんからもらった gcri.co.jp と new-one.co.jp を実測したところ、
   両方とも「日本語＋英語の2段ナビ」と「ヘッダー右にCTA2つ」だった。
   レアスリーは日本語1段・CTA1つで、ヘッダーの情報量が半分だった。
   ============================================================ */
/* 2026-08-30 訂正: align-items:stretch にしたら、ボタンまで
   ナビの高さ(92px)に引き伸ばされて楕円に潰れた。中央揃えに戻す。 */
.hd__nav{align-items:center}
.hd__nav a:not(.hd__cta):not(.hd__demo):not(.hd__regional){
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 14px;line-height:1.25;
}
.nv__ja{font-size:14.5px;font-weight:700;letter-spacing:.02em}
.nv__en{
  font-family:var(--latin);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  color:#8A7F79;
}
.hd__nav a:hover .nv__en,
.hd__nav a[aria-current="page"] .nv__en{color:#C04931}
.hd__nav a[aria-current="page"] .nv__ja{color:#C04931}

/* CTAは2段構え。いきなり相談は重いので、先に触ってもらう線のボタンを置く */
.hd__demo{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;
  color:#C04931!important;background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(192,73,49,.45);
  transition:background .25s ease,box-shadow .25s ease;
}
.hd__demo:hover{background:rgba(233,120,97,.10);box-shadow:inset 0 0 0 1.5px #C04931}
/* デモは2つ並ぶことになるので、ナビ側のデモは広い画面でだけ隠す */
/* 2026-08-30 訂正: 上の :not() 3連（詳細度 0,3,1）に負けて消えなかった。
   同じ形で書いて勝たせる。 */
/* 2026-09-02 訂正: 完全一致 [href="..."] だと column/ 配下のページ（href が
   "../demo-tools.html" になる）に当たらず、コラムだけナビに「デモを触る」が
   2つ並んでいた。前方のディレクトリを問わない後方一致 $= に変更する。
   属性セレクタの詳細度は演算子を変えても同じ（0,3,1）なので、上の勝ち負けは変わらない。 */
/* 2026-09-09: ヘッダーを実ページ直結の6項目に変更し、.hd__demo ボタンを廃止した。
   「作れるツール」は通常のナビ項目になったので、上の打ち消し2つ（1101px以上で
   テキストリンクを消す／1100px以下でボタンを消す）は不要になったため削除する。
   .hd__demo の見た目の定義は上に残っているが、HTML からは参照していない。 */
@media (max-width:900px){
  /* スマホのメニュー内では2段にせず1行に戻す（縦に長くなりすぎるため） */
  .hd__nav a:not(.hd__cta):not(.hd__demo){flex-direction:row;gap:8px;align-items:baseline;padding:10px 0}
  .nv__en{font-size:9px}
}

/* 2026-08-30 訂正: .hd__demo が既存の .hd__nav a（padding:29px 0）に負けて
   高さ92pxに伸びていた。同じ詳細度で書き直す。
   英字ラベルも 3.89:1 だったので濃くする。 */
.hd__nav a.hd__demo{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;height:auto;align-self:center;
  border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;
  color:#C04931!important;background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(192,73,49,.45);
}
.hd__nav a.hd__demo:hover{background:rgba(233,120,97,.10);box-shadow:inset 0 0 0 1.5px #C04931}
.nv__en{color:#6E645D}

/* ============================================================
   2026-08-30  トップに4セクション追加（片岡さん指示）
   「よくある質問・研修の流れ・対応エリアをトップに構造化」
   「数字を図版として見せる」

   参照2社の実測で要素数が レアスリー269 / CRI 286 / NEWONE 1,120。
   写真が用意できないので NEWONE 型（情報量と構造）へ倒す。
   文言は既存ページから流用（新しく書き起こさない）。
   ============================================================ */

/* ── 数字の図版 ── */@media (min-width:960px){ }
/* 40万 → 8.8万 の減り方を、矢印で一目に */
.fig__ab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,1.6vw,22px)}
.fig__before,.fig__after{display:flex;flex-direction:column;gap:6px;min-width:0}
.fig__before b,.fig__after b{
  font-family:var(--latin);font-weight:700;line-height:.95;letter-spacing:-.02em;white-space:nowrap;
}
.fig__before b{font-size:clamp(34px,4vw,58px);color:#8A7F79}
.fig__before b small{font-family:var(--sans);font-size:clamp(14px,1.2vw,17px);font-weight:700;margin-left:3px}
.fig__after b{font-size:clamp(46px,5.6vw,84px);color:#C04931}
.fig__after b small{font-family:var(--sans);font-size:clamp(16px,1.4vw,21px);font-weight:700;margin-left:4px}
.fig__before span,.fig__after span{font-size:13px;font-weight:700;letter-spacing:.04em;color:#5F5750}
.fig__after span{color:#C04931}
.fig__arrow{
  width:clamp(28px,3.4vw,52px);height:12px;position:relative;flex:none;
  background:linear-gradient(90deg,rgba(233,120,97,.35),#E97861);
  border-radius:999px;
}
.fig__arrow::after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  border-left:13px solid #E97861;border-top:9px solid transparent;border-bottom:9px solid transparent;
}

/* ── 研修の流れ ── */
.flow{list-style:none;margin:clamp(28px,3.2vw,42px) 0 0;padding:0;display:grid;gap:clamp(14px,1.6vw,18px)}@media (min-width:900px){ .flow{grid-template-columns:repeat(2,1fr)} }
.flow__i{
  position:relative;padding:clamp(24px,2.6vw,32px);border-radius:20px;background:#FFFDF9;
  box-shadow:inset 0 0 0 1px rgba(63,55,51,.09),0 12px 34px rgba(43,39,33,.05);
}
.flow__n{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#5F5750;
}
.flow__n span{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:#E97861;color:#fff;
  font-family:var(--latin);font-size:12px;font-weight:700;
}
.flow__t{margin:0 0 10px;font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);font-weight:600;line-height:1.6;color:#3F3733}
.flow__d{margin:0;font-size:clamp(14.5px,1.25vw,16px);line-height:1.95;color:#70645E}

/* ── 対応エリア ── */
.area{list-style:none;margin:clamp(28px,3.2vw,42px) 0 0;padding:0;display:grid;gap:clamp(14px,1.6vw,18px)}@media (min-width:820px){ .area{grid-template-columns:repeat(3,1fr)} }

/* ── よくある質問 ── */
.faq2{margin-top:clamp(26px,3vw,38px);border-top:1px solid rgba(63,55,51,.12)}
.faq2__i{border-bottom:1px solid rgba(63,55,51,.12)}
.faq2__i summary{
  list-style:none;cursor:pointer;padding:clamp(18px,2vw,24px) 44px clamp(18px,2vw,24px) 0;
  position:relative;font-size:clamp(15.5px,1.35vw,17.5px);font-weight:700;line-height:1.7;color:#3F3733;
}
.faq2__i summary::-webkit-details-marker{display:none}
.faq2__i summary::after{
  content:"";position:absolute;right:12px;top:50%;width:13px;height:13px;
  border-right:2px solid #C04931;border-bottom:2px solid #C04931;
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq2__i[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq2__i summary:hover{color:#C04931}
.faq2__i p{
  margin:0;padding:0 44px clamp(20px,2.2vw,26px) 0;
  font-size:clamp(14.5px,1.25vw,16px);line-height:1.95;color:#70645E;
}
.faq2__i p b{color:#3F3733;font-weight:600}

/* ── スマホのタップ領域（2026-08-30 全10ページ実測） ──
   文中リンクが高さ18〜30pxで、指で押すには小さい。
   padding で当たり判定を広げ、同じ量の負マージンで見た目の行送りは変えない。
   素の <a>（クラスなし）が該当のほぼ全部だった。ヘッダーのナビも素の <a> だが
   親が nav なので、下の p/dd/li/td/span の子セレクタには当たらない。
   ±8px にしてあるのは、±12px だと隣の行のリンクと当たり判定が重なり、
   下の行のリンクが上の行を覆ってしまうため。 */@media (max-width:767px){
  p > a:not([class]), dd > a:not([class]), li > a:not([class]),
  td > a:not([class]), span > a:not([class]), b > a:not([class]),
  .sim__open, .dtool__a, .mm__more a, .svc3__m a{
    display:inline-block;padding:8px 0;margin:-8px 0;
  }
  .hd__nav a{ min-height:44px; }
}

/* ── 研修ページの写真が375pxで480px幅になっていた（2026-08-30 実測） ──
   原因: `.svc__ph{height:300px}`（680px以下）と `.svc__ph{aspect-ratio:16/10}`
   が両立していて、高さから幅が 300×1.6=480px と決まっていた。
   列幅は287pxなので、親の overflow:hidden で右40%が切れていた。
   横スクロールは出ないので目視では気づけない。
   高さを固定するのをやめ、幅を列いっぱいにして aspect-ratio に高さを決めさせる。 */@media (max-width:680px){
  .svc__ph{width:100%;height:auto}
}

/* ============================================================
   2026-08-31  写真の切れ落ちを直す（片岡さん指摘「画像が欠けている」）

   実測（1440px）でこうなっていた:
     meet.jpg            1100x733 → 枠 484x990  表示33%  拡大1.35倍
     dev.jpg             1100x660 → 枠 1270x397 表示52%  拡大1.15倍
     message-kataoka.jpg  407x850 → 枠 311x233  表示36%
     office.jpg         1600x1067 → 枠 1425x500 表示53%

   原因は全部同じ。**枠の縦横比を写真と無関係に決めていた。**
   cover は足りない側を切って埋めるので、比率が違うほど切り落とす。
   さらに meet.jpg は元が1100px幅しかないのに1546px幅で描かれていてボケていた。

   直し方: 枠の比率を写真の比率に寄せる。元の解像度を超えて拡大しない。
   ============================================================ */

/* ── ① 実績（meet.jpg）。縦990pxの枠に横長写真を入れていた ──
   横に並べる限り、写真の高さは右の文章の量で決まってしまう。
   （1度は「写真を上・数字を下の面」にしたが、実測したら
     写真304px に対して塗りの面が686px。7割が空の面になった）
   なので横並びをやめ、**写真を段の幅いっぱいに、本来の3:2で置く。**
   1100x733 を ちょうど 1100x733 で描くので、切り落としゼロ・拡大ゼロ。
   数字は今まで通り写真に重ねる。重ねるための影は紺や黒をやめ、
   珊瑚系の暗い赤茶にする（写真が真っ白でも白文字8.2:1）。 */@media (min-width:901px){
  .proof-story .case{
    display:block;max-width:1100px;margin-left:auto;margin-right:auto;
  }
  .proof-story .case>div:first-child{
    min-height:0;aspect-ratio:1100/733;          /* meet.jpg と同じ比率 */
  }
}
.proof-story .case>div:first-child::after{
  background:linear-gradient(0deg,rgba(96,32,20,.86),rgba(96,32,20,.10) 62%);
}@media (max-width:900px){
  .proof-story .case>div:first-child{min-height:0;aspect-ratio:16/9}
}

/* ── ② 研修の概要（dev.jpg）。16:5＝比3.2の帯に比1.67の写真 ──
   元が1100px幅なので、それ以上に広げると拡大＝ボケになる。 */

/* ── ③ 講師プロフィール（message-kataoka.jpg）──
   407x850 の縦写真を 4:3 の横枠に入れて64%捨てていた。縦枠に戻す。 */
.prof__photo{aspect-ratio:3/4;object-position:50% 28%}

/* ── ④ 木更津ページの写真帯（office.jpg）──
   高さ固定（最大500px）だと画面が広いほど比率が横に伸びて切れる。 */
.band.pic--office{height:auto;aspect-ratio:2/1}@media (max-width:900px){
  /* 1カラムに落ちたとき、min-height が空の珊瑚面になって残らないようにする */
  .proof-story .case>div:first-child{min-height:0}
}@media (max-width:680px){
  /* 幅335pxで高さ470px（比0.71）だと表示47%。正方形なら67%で、
     数字84px＋説明＋余白202pxも収まる */
  .proof-story .case>div:first-child{min-height:0;aspect-ratio:1/1}
  .band.pic--office{aspect-ratio:4/3}
}

/* 写真を幅いっぱいにしたら、説明の帯（rgba(235,116,98,.14)）が954pxまで
   伸びて細長い棒になった。幅484pxの列に合わせて作った指定だったため。
   文字の分だけに縮める。色も紺デザインの名残（#D8E2E5）を白に戻す。 */
.proof-story .case__cap{align-self:flex-start;color:#fff}

/* 写真を幅いっぱいにしたぶん白いカードも広がり、実績の4項目が横1列に並んだ。
   ただし1つ目だけ「一般社団法人セラピストフォーライフさま」と長く、
   173pxの列では「セラピス／トフォーライフ」と語の途中で折れる。
   1つ目だけ2列ぶん取って、意味の切れ目で折れるようにする。 */@media (min-width:901px){
  .proof-story .case__facts{grid-template-columns:repeat(5,minmax(0,1fr))}
  .proof-story .case__facts li:first-child{grid-column:span 2}
}

/* ============================================================
   2026-08-31  自社での実践（片岡さん提供の実数）
   #numbers の 40万→8.8万 と同じ見せ方に揃える。
   前＝#8A7F79 の控えめ／矢印＝珊瑚／後＝#C04931 で大きく。
   別の見せ方を作ると、同じ「前→後」が2種類あることになるため。
   ============================================================ */
.own{
  list-style:none;margin:clamp(44px,5vw,68px) 0 0;padding:0;
  display:grid;gap:clamp(18px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.own__i{
  display:flex;flex-direction:column;gap:clamp(14px,1.5vw,18px);
  padding:clamp(26px,2.8vw,36px);
  background:#FFFFFF;border:1px solid #E3D9CF;border-radius:18px;
  box-shadow:0 14px 34px rgba(86,67,57,.06);
}
.own__t{
  margin:0;font-size:clamp(14.5px,1.25vw,16.5px);font-weight:700;
  line-height:1.6;color:#3F3733;
}
.own__d{
  /* 下端そろえ（auto 0 0）だと、説明が1行のカードだけ罫線が下にずれる。
     見出しを1行に揃えたので、上から積めば3枚とも同じ高さに来る */
  margin:0;padding-top:clamp(13px,1.4vw,17px);
  border-top:1px solid rgba(63,55,51,.1);
  font-size:clamp(13.5px,1.15vw,15px);line-height:1.9;color:#70645E;
}
.own__d b{color:#3F3733;font-weight:700}
.own__note{margin:10px 0 0;font-size:13px;line-height:1.85;color:#5F5750}@media (max-width:680px){
}

/* ============================================================
   2026-08-31（2）片岡さんの画面幅で残っていた2件
   ============================================================ */

/* ── ⑤ 木更津ページの写真帯。2400pxの画面で1.49倍に拡大されてボケていた ──
   `background-attachment:fixed` だと cover の基準が要素ではなく画面になるので、
   幅を止めるだけでは直らない。scroll に戻したうえで、元画像の幅1600pxで止める。
   これ以上大きい office.jpg は Desktop にも公開用フォルダにも無かった。
   パララックスは失うが、装飾の動きより写真がクッキリしている方を取る。

   ついでに、この帯だけ古い配色が残っていた:
     border-top    #C8E2E9（水色）
     border-bottom #DDD4EF（薄紫）
     ::after       rgba(6,27,39,.58) の紺 ＋ rgba(121,102,166,.22) の紫
   文字を載せていない帯なので、暗くする理由がない。素の写真を見せる。 */
.band.pic--office{
  height:auto;aspect-ratio:2/1;
  max-width:1600px;margin-left:auto;margin-right:auto;
  background-attachment:scroll;
  border-top:0;border-bottom:0;box-shadow:none;
}
.band.pic--office::after{background:none}

/* ── ⑥ 研修内容の講師プロフィール。横に置くと幅250〜311pxで読めない ──
   片岡さん指摘「幅が小さすぎて、めちゃくちゃ見づらい」。
   横並びをやめて講座内容の下に置き、その中で写真を左・文章を右にする。
   本文の幅が約311px → 約650px になる。 */@media (min-width:841px){
  #training .course-detail{grid-template-columns:1fr}
  #training .course-detail__profile{
    align-self:auto;margin-top:clamp(20px,2.2vw,28px);
    display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
    column-gap:clamp(24px,2.6vw,36px);row-gap:12px;align-items:start;
  }
  #training .course-detail__profile>*{grid-column:2;margin-top:0}
  #training .course-detail__profile>.prof__photo{
    grid-column:1;grid-row:1 / span 4;align-self:start;margin:0;
  }
  #training .course-detail__profile>.prof__pts{margin-top:4px}
}@media (max-width:840px){
  /* 縦に積むときは、写真が画面いっぱいの縦長にならないよう止める */
  #training .course-detail__profile>.prof__photo{max-width:200px}
}

/* プロフィールを下に移したら、写真190x253に対して文章側が543pxあり、
   写真の下に大きな空きが残った。列の高さいっぱいまで伸ばす。
   407x850 の縦写真を 190x543 で見せると表示73%（上下を少し切る）。
   顔が残るよう、写り位置を上寄り（22%）にする。 */@media (min-width:841px){
  #training .course-detail__profile>.prof__photo{
    align-self:stretch;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:50% 22%;
  }
}

/* ============================================================
   2026-09-01  名刺デザインの全ページ展開
   片岡さん指示「名刺のデザインを全ページに適応させてほしい。今だと最初だけじゃん」

   実測（2026-09-01・全11ページの section をブラウザで計測）:
   .pzband は各ページの「先頭セクション1つ」にしか付いておらず、
   名刺の意匠が乗っていた高さの割合は
     index 0% / develop 0% / case 0%（シームのみ）/ kisarazu 11% /
     training 18% / company 24% / price 27% / roi 100% / demo-tools 100%
   だった。指摘のとおり「最初だけ」だった。

   ここからはページ全体を「名刺の紙1枚」として扱う。
     1. プリズムの光 … ページに1枚だけ敷く（セクションごとに繰り返さない）
     2. 珊瑚のシーム … 左端を上から下まで通す（名刺の縦帯）
     3. 珊瑚の太バー … 全セクションの見出し直下に置く
                       （名刺の「AIって魔法だ。」の下にある帯）
     4. 面の色       … 名刺に無い #ECE9E1 / #F7F5EF / #FBFAF6 / #F6F1EA を
                       名刺のトークンへ寄せる
   色は名刺の実測値（--pz-*）だけを使い、新しい色は足さない。
   ============================================================ */

/* --- 1. 紙の地とプリズムの光 ------------------------------------
   セクションごとに敷くと、同じグラデが何度も出て「柄」に見える。
   名刺は1枚の紙に光が1回当たっているだけなので、ページにも1枚だけ置く。
   background-attachment:fixed は iOS で無視され、13,000px の文書高に
   引き伸ばされて光が消えるため、擬似要素の position:fixed で作る。 */
html{background-color:var(--pz-cream)}
body{background:transparent}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 32% at 100% 0%,  rgba(206,192,230,.58) 0%, rgba(206,192,230,0) 70%),
    radial-gradient(36% 28% at 104% 34%, rgba(250,172,162,.46) 0%, rgba(250,172,162,0) 72%),
    radial-gradient(38% 30% at  98% 76%, rgba(242,215,225,.50) 0%, rgba(242,215,225,0) 70%),
    radial-gradient(36% 32% at  -6% 88%, rgba(206,229,233,.52) 0%, rgba(206,229,233,0) 72%),
    radial-gradient(30% 26% at  -8% 14%, rgba(225,240,240,.48) 0%, rgba(225,240,240,0) 68%);
  /* 本文の下では光を引く。
     名刺も、プリズムは右の余白にあって文字の下には来ていない。同じ構造にする。
     実測（2026-09-01・スクショの実ピクセル）で、光を全面に敷くと
     本文 #70645E が 5.24 → 4.37、珊瑚文字 #C04931 が 4.54 → 3.79 と
     AA(4.5:1) を割ったため。外側の余白では強く、本文の帯では10%まで落とす。 */
  /* 2026-09-02 修正: 画面端から 130/330px の固定値だったため、1366px 幅では
     本文カラム（最大1190px＝中央±595px）の左右端がプリズムの下に入っていた。
     マスクを「画面中央からの距離」で切り、本文カラム±45px の内側を必ず10%にする。
     1920px: 中央±760px(=200px)まで全開 → ±640px(=320px)で10%。本文は 365px から。
     1366px: ±760 は画面外 → 43px で既に10%。本文は 147px から。 */
  -webkit-mask-image:linear-gradient(90deg,
    #000 0, #000 calc(50% - 760px), rgba(0,0,0,.10) calc(50% - 640px),
    rgba(0,0,0,.10) calc(50% + 640px), #000 calc(50% + 760px), #000 100%);
          mask-image:linear-gradient(90deg,
    #000 0, #000 calc(50% - 760px), rgba(0,0,0,.10) calc(50% - 640px),
    rgba(0,0,0,.10) calc(50% + 640px), #000 calc(50% + 760px), #000 100%);
}

/* --- 2. 珊瑚のシーム。名刺の縦帯を、ページの上から下まで1本通す --- */
body::after{
  content:"";position:fixed;left:0;top:0;bottom:0;width:5px;
  background:var(--pz-coral);z-index:40;pointer-events:none;
}@media (max-width:640px){
  /* スマホでは本文の左余白を食うので細くする */
  body::after{width:3px}
}

/* 上のマスクは px 指定なので、幅が660pxを下回ると calc(100% - 330px) が
   330px より小さくなり、停止位置が逆順になって右端に色の段差が出る。
   スマホは本文が全幅に及ぶため、光を薄めるだけでは
   珊瑚文字 #C04931 が既存水準 4.54:1 を回復できない（0.20まで落としても4.38）。
   実測で本文の左右余白は全11ページとも 20px ちょうどだったので、
   その内側では光を完全にゼロにする。スマホでは名刺の手掛かりを
   シーム・見出しの珊瑚バー・明朝の見出しが担う。 */@media (max-width:900px){
  body::before{
    -webkit-mask-image:linear-gradient(90deg,
      #000 0, #000 14px, transparent 20px,
      transparent calc(100% - 20px), #000 calc(100% - 14px), #000 100%);
            mask-image:linear-gradient(90deg,
      #000 0, #000 14px, transparent 20px,
      transparent calc(100% - 20px), #000 calc(100% - 14px), #000 100%);
  }
}

/* 本文をプリズムより前に出す。ヘッダーは position:fixed / z-index:100 の
   ままにしたいので、ここでは触らない。 */
body > main,body > footer,body > .ft{position:relative;z-index:1}

/* .pzband は「先頭セクションだけ」の処方だった。地とシームはページ側で
   持つようにしたので、二重に出さないよう個別指定を下ろす。 */
.pzband::before,.pzband::after{content:none}
.pzband{background:transparent}

/* --- 3. セクションは光を通す --------------------------------------
   不透明な地で塗りつぶすとプリズムが見えなくなる。
   交互の面は「薄い紙を1枚重ねた状態」にして、光を透かす。 */
.sec,.cta,.proof-story,.growth-story,.impact-story,
.course-detail,.akita-policy,.roi,.sec--dark,.sec--faq{background:transparent}

.sec--alt,.akita-story{background:rgba(241,231,222,.72)}
.possibility-story{background:rgba(255,253,249,.62)}

/* 事実の帯（index の pz-facts）は名刺の白い面。ここだけは白のまま残す。 */
.pz-facts{background:rgba(255,255,255,.86)}

/* --- 4. 見出し直下の珊瑚の太バー ----------------------------------
   名刺で「AIって魔法だ。」の下にある帯。これが名刺だと一目で分かる一手。
   index のヒーローにしか無かったので、全セクションの見出しに広げる。 */
.h2::after,
.cta h2::after,
.roi .roi-hd h2::after,
.svc__h::after,
.growth-story__title::after,
.impact-story__title::after,
.akita-hero__copy h1::after,
.akita-story__body h2::after{
  content:"";display:block;
  width:clamp(84px,7.5vw,120px);
  height:clamp(5px,.55vw,7px);
  background:var(--pz-coral);
  border-radius:0;
  margin:clamp(16px,1.8vw,24px) 0 0;
}
/* 中央寄せの見出し（CTA）だけはバーも中央に置く */
.cta h2::after{margin-left:auto;margin-right:auto}
/* index のヒーロー見出しは、マークアップ側に .pz__bar を既に持っている。
   ここで足すと帯が2本になるので、意図的に対象から外している。 */

/* --- 5. 面の色を名刺のトークンへ寄せる ----------------------------
   旧パレットの残り（#ECE9E1 の副地、#F7F5EF の地、#FBFAF6）は
   名刺には無い色。トークン側を直して全ページに一度に効かせる。 */
:root{
  --bg-base:#FAF4EF;   /* 名刺の地 */
  --bg-alt:#F1E7DE;    /* 名刺の副地 */
}

/* ============================================================
   2026-09-02  お問い合わせ区画の選択式（.cta-choice）
   電話・日程予約・フォームが縦に3段積みで 3,243px（トップの23%）あった。
   3つを横並びの選択にして、選んだものだけ開く。
   アクティブの印は名刺の「ラベル左の珊瑚の縦バー」。塗りつぶしはしない。
   ============================================================ */
.cta-choice{max-width:760px;margin:clamp(36px,4vw,56px) auto 0;text-align:left}

.cta-choice__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cta-choice__tab{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:14px 14px 13px 18px;
  background:rgba(255,253,249,.92);color:var(--pz-ink,#3F3733);
  border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px;
  font-family:var(--sans);line-height:1.35;
  transition:border-color .18s,background .18s;
}
.cta-choice__tab b{display:block;font-size:clamp(14px,1.05vw,16px);font-weight:700;letter-spacing:.01em}
.cta-choice__tab small{display:block;margin-top:4px;font-size:clamp(11px,.85vw,12.5px);color:var(--pz-body,#70645E);letter-spacing:.02em}
.cta-choice__tab::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;
  background:var(--pz-coral,#E97861);opacity:0;transform:scaleY(.4);
  transition:opacity .18s,transform .22s cubic-bezier(.2,.7,.2,1);
}
.cta-choice__tab:hover{border-color:rgba(233,120,97,.55);background:#FFFDF9}
.cta-choice__tab[aria-selected="true"]{border-color:var(--pz-coral,#E97861);background:#FFFDF9}
.cta-choice__tab[aria-selected="true"] b{color:var(--pz-coral-dk,#C04931)}
.cta-choice__tab[aria-selected="true"]::before{opacity:1;transform:scaleY(1)}
.cta-choice__tab:focus-visible{outline:2px solid var(--pz-coral-dk,#C04931);outline-offset:2px}

.cta-choice__panel{margin-top:22px}
.cta-choice__panel[hidden]{display:none}
.cta-choice__lead{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--pz-ink,#3F3733)}
/* 予約カレンダー。iframe が来る前に高さを確保して、読み込み時に下がずれないようにする */
.cta-choice__cal{min-height:560px;background:#fff;border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px}
.cta-choice__alt{margin:10px 0 0;font-size:14px}
.cta-choice__alt a{color:var(--pz-coral-dk,#C04931)}

/* 電話パネル：既存の .cta__tel をそのまま置く。上の余白だけ詰める */
.cta-choice__panel .cta__tel{margin-top:0}
/* フォームパネル：既存の .cta .form の上マージン(70px)を打ち消す */
.cta-choice__panel .form{margin-top:0}@media (max-width:640px){
  .cta-choice__tabs{grid-template-columns:1fr;gap:6px}
  .cta-choice__tab{padding:12px 14px 11px 18px}
  .cta-choice__tab b,.cta-choice__tab small{display:inline}
  .cta-choice__tab small{margin:0 0 0 8px}
  .cta-choice__cal{min-height:520px}
}

/* ============================================================
   2026-09-02  モーション（片岡さん「もっとモーションを付けてほしい。
   デザインをもっとプロっぽい感じにしてほしい」）
   ------------------------------------------------------------
   方針: 控えめで、1つ1つの動きに理由があること。B2Bで「プロっぽい」は
   派手さではない。名刺の静けさを壊さない。
     ・動くのは「現れるとき」だけ。現れたあとは動かない
     ・名刺の記号（珊瑚のバー・シーム）は「引かれる」動きで現れる
     ・押せないものは hover で持ち上げない（浮くカードは AI製の匂いになる）
     ・prefers-reduced-motion: reduce では全部止まる（既存方針を踏襲）
   仕組み: 既存の .js（動きを使う環境）/ .in（reveal到達）/ .is-ready（ヒーロー）
   のフックにCSSだけで乗せる。JS追加はゼロ。
   ============================================================ */
:root{
  --mo-ease:cubic-bezier(.2,.7,.3,1);        /* 既存 reveal と同じ */
  --mo-draw:cubic-bezier(.16,1,.3,1);        /* バーが「引かれる」用。終わりが長い */
  --mo-dur:.8s;
}

/* ── ヒーローの安全網 ────────────────────────────────────
   ヒーローは <head> の inline script が付ける .mo で描画前に隠し、app.js の
   .is-ready（rAF）で入場させる。rAF はバックグラウンドのタブでは可視になるまで
   走らないし、万一 app.js が落ちると永久に出ない。何があっても 2.4秒で出す。
   ※ data-reveal には時間の安全網を付けない。画面外の要素まで 2.4秒で出てしまい、
     ゆっくり読む人のスクロール reveal が消えるため。data-reveal は従来どおり
     app.js の IO＋scroll掃引（2026-08-29 の対策）に任せる。 */@media (prefers-reduced-motion: no-preference){
  .mo .home .hero.pz .story-hero__kicker,
  .mo .home .hero.pz .story-hero__title span,
  .mo .home .hero.pz .pz__sub,
  .mo .home .hero.pz .pz__bar,
  .mo .home .hero.pz .pz__seam,
  .mo .home .hero.pz .pz__r img,
  .mo .home .hero.pz .pz__art{animation:mo-safety 0s linear 2.4s forwards}
  @keyframes mo-safety{to{opacity:1;transform:none}}
}@media (prefers-reduced-motion: no-preference){

  /* ── 1. 見出し直下の珊瑚バーは、左から「引かれて」現れる ── */
  .js .h2[data-reveal]::after{
    transform:scaleX(0);transform-origin:left center;
    transition:transform .7s var(--mo-draw) .28s;
  }
  .js .h2[data-reveal].in::after{transform:scaleX(1)}

  /* ── 2. リスト・グリッドの子は、親が現れたあと順番に出る ──
     親の reveal は既存のまま。子にだけ 70ms 刻みの遅れを足す。 */
  .js ul[data-reveal] > li,
  .js ol[data-reveal] > li,
  .js .fig[data-reveal] > *{
    opacity:0;transform:translateY(12px);
    transition:opacity .7s var(--mo-ease),transform .7s var(--mo-ease);
  }
  .js [data-reveal].in > li,
  .js .fig[data-reveal].in > *{opacity:1;transform:none}
  .js [data-reveal].in > *:nth-child(1){transition-delay:.06s}
  .js [data-reveal].in > *:nth-child(2){transition-delay:.13s}
  .js [data-reveal].in > *:nth-child(3){transition-delay:.20s}
  .js [data-reveal].in > *:nth-child(4){transition-delay:.27s}
  .js [data-reveal].in > *:nth-child(5){transition-delay:.34s}
  .js [data-reveal].in > *:nth-child(6){transition-delay:.41s}
  .js [data-reveal].in > *:nth-child(n+7){transition-delay:.48s}

  /* ── 3. 写真は、わずかに引いた状態から定位置へ ──
     枝葉が動くのではなく、写真そのものがピントを合わせるように収まる。 */
  .js figure[data-reveal],.js [data-reveal] figure{overflow:hidden}
  .js figure[data-reveal] img,.js [data-reveal] figure img{
    transform:scale(1.045);transition:transform 1.4s var(--mo-ease);
  }
  .js figure[data-reveal].in img,.js [data-reveal].in figure img{transform:none}

  /* ── 4. ヒーロー（トップ）の入場 ──
     順番: キッカー → 見出し1行目 → 2行目 → 珊瑚バー（引かれる）→ 導入文。
     右の写真は一段大きい状態から静かに収まる。シームは上から下へ通る。
     .is-ready は app.js が最初の rAF で付ける。.mo は <head> の inline script。 */
  .mo .home .hero.pz .story-hero__kicker,
  .mo .home .hero.pz .story-hero__title span,
  .mo .home .hero.pz .pz__sub{
    opacity:0;transform:translateY(18px);
    transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease);
  }
  .mo .home .hero.pz .pz__bar{transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--mo-draw)}
  .mo .home .hero.pz .pz__seam{transform:scaleY(0);transform-origin:top center;transition:transform 1.1s var(--mo-draw)}
  .mo .home .hero.pz .pz__r img{opacity:0;transform:scale(1.06);transition:opacity 1.2s var(--mo-ease),transform 1.6s var(--mo-ease)}
  .mo .home .hero.pz .pz__art{opacity:0;transition:opacity 1.6s ease .3s}

  .mo .home .hero.pz.is-ready .story-hero__kicker{opacity:1;transform:none;transition-delay:.05s}
  .mo .home .hero.pz.is-ready .story-hero__title span:nth-child(1){opacity:1;transform:none;transition-delay:.18s}
  .mo .home .hero.pz.is-ready .story-hero__title span:nth-child(2){opacity:1;transform:none;transition-delay:.30s}
  .mo .home .hero.pz.is-ready .pz__bar{transform:scaleX(1);transition-delay:.62s}
  .mo .home .hero.pz.is-ready .pz__sub{opacity:1;transform:none;transition-delay:.78s}
  .mo .home .hero.pz.is-ready .pz__seam{transform:scaleY(1);transition-delay:.1s}
  .mo .home .hero.pz.is-ready .pz__r img.is-loaded{opacity:1;transform:none;transition-delay:.05s}  /* 読み込み完了を待つ。遅い回線で「パッ」と出るのを防ぐ（app.js が is-loaded を付ける） */
  .mo .home .hero.pz.is-ready .pz__art{opacity:1}

  /* ── 5. プリズムの光は、ごくゆっくり流れる（46秒で往復・±1.2%）──
     名刺を手に持つと光の面が少し動く、あの感じ。スマホは電池を食うので止める。
     マスクは要素と一緒に動くが、移動量は最大23px、本文カラムの余白45pxの内側。 */@media (min-width:900px){
    body::before{will-change:transform;animation:mo-prism-drift 46s ease-in-out infinite alternate}
    @keyframes mo-prism-drift{
      from{transform:translate3d(-1.2%,.8%,0) scale(1.04)}
      to  {transform:translate3d(1.2%,-.8%,0) scale(1.04)}
    }
  }

  /* ── 6. 押せるものだけ、押せると分かる反応 ── */
  .btn,.hd__cta,.hd__demo,.mcta__btn,.mcta__tel,.form__submit,.cta-choice__tab{
    transition:transform .18s var(--mo-ease),background-color .18s,border-color .18s,color .18s,opacity .18s;
  }
  .btn:hover,.hd__cta:hover,.form__submit:hover,.mcta__btn:hover{transform:translateY(-1px)}
  .btn:active,.hd__cta:active,.form__submit:active,.mcta__btn:active,.cta-choice__tab:active{transform:translateY(0) scale(.99)}
  /* FAQ の開閉は既存の <details>。矢印だけ回す */
  .faq2__i summary::after,.faq summary::after{transition:transform .28s var(--mo-ease)}
}

/* ── 7. キーボード操作の焦点。名刺の珊瑚で、どの面の上でも同じ見え方 ── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--pz-coral-dk,#C04931);outline-offset:3px;border-radius:2px;
}
/* 文字選択の色も名刺に揃える */
::selection{background:rgba(233,120,97,.26);color:var(--pz-ink,#3F3733)}

/* ============================================================
   2026-09-02  「他の研修との違い」（.why）
   片岡さん「他社との一番の違いは売上向上に特化していること。受けたけど何も
   変わらなかった会社が多い。原因は3つ。だから講師1人に3〜4名・演習中心・
   1人1人に合わせる。ここをマジで他社との違いにしてほしい」
   形は名刺の「ラベル：値」。原因は薄い墨で小さく、答えは珊瑚の縦バーつきで太く。
   ============================================================ */
.why .lede b{color:var(--pz-ink,#3F3733)}
/* よくある原因：ラベル＋薄い墨。取り消し線は使わない（否定より「越える」印象に） */
/* 私たちの答え：左に珊瑚の縦バー（名刺の「事業内容：」の縦バー） */@media (max-width:960px){
}

/* AI顧問は金額を出さない（2026-09-01 片岡さん決定「AI顧問の費用はHPに乗せないでほしい」）。
   価格表.md「④-90 は金額を公表しない。定着具合によって中身が変わるため」と一致。以後、金額を戻さない。 */
.price__quote{display:block;font-family:var(--serif);font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.3;color:var(--pz-ink,#3F3733)}

/* ============================================================
   2026-09-02  章ラベル（.eyebrow）を「見出し」の大きさと形に
   片岡さん「こういうセクションの題名はもっと大きく示した方がいい。
   急に文章が来たぞってなる。そこが小さくてめちゃくちゃ見にくい」
   ★ 同じ指摘は 2026-08-30 にも受けている（そのとき 13→17px に拡大）。
     大きさだけでは足りなかった。原因は「形」— 小さなピル（タグ）は補足ラベルに
     見えて、章の見出しに見えない。ピルをやめ、名刺の「事業内容：」と同じ
     珊瑚の縦バー＋大きめのゴシックにする。
   ページごとの ID 指定（#case #issue #price #grant …）で地や色が散っているので、
   :is() で同じ詳細度に持ち上げて、ここが最後に勝つようにする。
   ============================================================ */
:is(#case,#issue,#price,#grant,#usecase,#own,#training,#numbers,#flow,#area,#faq,#why) .eyebrow,
.possibility-story #usecase p.eyebrow,
:is(.sec,.sec--faq,.sec--tint,.sec--dark,.proof-story,.asset-story,.akita-result,.possibility-story,.cta,.why) .eyebrow,
.eyebrow,
.growth-story__eyebrow,.impact__eyebrow{
  display:inline-block;
  margin:0 0 clamp(16px,1.6vw,22px);
  padding:2px 0 2px clamp(12px,1.1vw,16px);
  border:0;border-left:4px solid var(--pz-coral,#E97861);border-radius:0;
  background:none;box-shadow:none;
  color:var(--pz-coral-dk,#C04931);
  font-family:var(--sans);
  font-size:clamp(19px,1.65vw,24px);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.4;
  text-transform:none;
}
/* 英字のラベル（HOW ASSETS ARE MADE 等）は字面が長いので一段下げ、字間は広め */
.eyebrow:lang(en),.growth-story__eyebrow,.impact__eyebrow{
  font-size:clamp(15px,1.25vw,18px);letter-spacing:.16em;
}
/* ピルの点（::before）は消す。縦バーがその役をする */
.eyebrow::before,.growth-story__eyebrow::before,.impact__eyebrow::before,
:is(.proof-story,.sec--dark,.asset-story,.akita-result) .eyebrow::before{content:none;display:none}@media (max-width:640px){
  .eyebrow{font-size:19px}
}

/* ============================================================
   2026-09-02 「自社での実践」を図で見せる（片岡さん「文章じゃなくて視覚的な図で」）
   前の時間を薄い棒、いまの時間を珊瑚の棒で。長さの差がそのまま説得力になる。
   数字は元のまま（2h→0分 / 5h→5分 / 10h→1h）。削減率は割り算の結果のみ。
   ============================================================ */
.own__i{display:flex;flex-direction:column}
.own__cut{margin:6px 0 14px;line-height:1}
.own__cut b{font-family:var(--serif);font-size:clamp(40px,3.6vw,54px);font-weight:600;color:var(--pz-coral-dk,#C04931);letter-spacing:-.01em}
.own__cut small{font-family:var(--sans);font-size:.42em;font-weight:700;margin-left:2px;vertical-align:baseline}

.own__bars{display:grid;gap:10px;margin:0 0 18px;padding:14px 0 16px;border-block:1px solid var(--pz-rule,#E3D9CF)}
.own__bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.own__bar i{display:block;height:14px;border-radius:2px;width:var(--w);min-width:3px;transform-origin:left center}
.own__bar--b i{background:#E3D9CF}
.own__bar--a i{background:var(--pz-coral,#E97861)}
.own__bar span{font-size:13px;color:var(--pz-body,#70645E);white-space:nowrap;text-align:right}
.own__bar span b{color:var(--pz-ink,#3F3733);font-weight:700;font-size:15px}
.own__bar--a span b{color:var(--pz-coral-dk,#C04931)}
/* 棒は現れるときに左から伸びる（reveal と同じフック） */@media (prefers-reduced-motion:no-preference){
  .js .own[data-reveal] .own__bar i{transform:scaleX(0);transition:transform 1.1s var(--mo-draw,cubic-bezier(.16,1,.3,1)) .35s}
  .js .own[data-reveal].in .own__bar i{transform:scaleX(1)}
  .js .own[data-reveal].in .own__bar--a i{transition-delay:.7s}
}
/* 旧レイアウト（矢印つきの前後）は使わなくなった */

.own__total{margin:clamp(28px,3vw,40px) 0 0;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.4vw,36px);align-items:center;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);background:rgba(255,253,249,.9);border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px}
.own__total-n{margin:0;line-height:1;padding-right:clamp(20px,2.4vw,36px);border-right:1px solid var(--pz-rule,#E3D9CF)}
.own__total-n b{display:block;font-family:var(--serif);font-size:clamp(56px,5.6vw,84px);font-weight:600;color:var(--pz-ink,#3F3733);letter-spacing:-.02em}
.own__total-n small{font-family:var(--sans);font-size:.3em;font-weight:700;margin-left:4px;color:var(--pz-coral-dk,#C04931)}
.own__total-n span{display:block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--pz-coral-dk,#C04931)}
.own__total-t{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.9;color:var(--pz-body,#70645E)}@media (max-width:640px){
  .own__total{grid-template-columns:1fr}
  .own__total-n{padding-right:0;border-right:0;padding-bottom:14px;border-bottom:1px solid var(--pz-rule,#E3D9CF)}
}

/* ============================================================
   2026-09-02 「研修の流れ」を横のタイムラインに（片岡さん「文章が多い。視覚的に」）
   4つの節目を1本の線で結び、所要時間を大きく置く。本文は1文。
   ============================================================ */
.flow--timeline{position:relative;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);padding-top:26px}
/* 1本の線：各カードの丸の中心を通る */
.flow--timeline::before{content:"";position:absolute;left:0;right:0;top:26px;height:2px;background:var(--pz-rule,#E3D9CF)}
.flow--timeline .flow__i{position:relative;background:none;border:0;padding:24px 0 0;box-shadow:none}
.flow__node{position:absolute;left:0;top:-7px;width:16px;height:16px;border-radius:50%;
  background:var(--pz-cream,#FAF4EF);border:3px solid var(--pz-coral,#E97861);box-sizing:border-box}
.flow--timeline .flow__i:nth-child(3) .flow__node{background:var(--pz-coral,#E97861)}  /* 当日が本体 */
.flow--timeline .flow__n{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#8A7D75}
.flow--timeline .flow__n span{display:inline;margin-right:8px;color:var(--pz-coral-dk,#C04931)}
.flow__dur{margin:0 0 12px;line-height:1}
.flow__dur b{display:block;font-family:var(--serif);font-size:clamp(30px,2.8vw,40px);font-weight:600;color:var(--pz-ink,#3F3733);letter-spacing:-.01em}
.flow__dur small{display:block;margin-top:6px;font-size:12.5px;color:var(--pz-body,#70645E);letter-spacing:.04em}
.flow--timeline .flow__t{font-size:clamp(16px,1.3vw,18px);line-height:1.6;margin:0 0 8px}
.flow--timeline .flow__d{font-size:14px;line-height:1.85}
/* 線は現れるときに左から伸びる */@media (prefers-reduced-motion:no-preference){
  .js .flow--timeline::before{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--mo-draw,cubic-bezier(.16,1,.3,1)) .2s}
  .js .flow--timeline.in::before{transform:scaleX(1)}
}@media (max-width:960px){
  .flow--timeline{grid-template-columns:1fr;padding-top:0;padding-left:28px}
  .flow--timeline::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .flow--timeline .flow__i{padding:0 0 8px}
  .flow__node{left:-28px;top:6px}
  .js .flow--timeline::before{transform:scaleY(0);transform-origin:top}
  .js .flow--timeline.in::before{transform:scaleY(1)}
}
/* タイムラインの番号は丸で塗らない（旧 .flow__n span の丸い地を打ち消す） */
.flow--timeline .flow__n span{display:inline;width:auto;height:auto;min-width:0;padding:0;margin-right:8px;
  background:none;border:0;border-radius:0;color:var(--pz-coral-dk,#C04931);font-size:13px;letter-spacing:.1em;line-height:inherit}

/* ============================================================
   2026-09-02 講師プロフィールの写真（片岡さん「僕の画像が細すぎるから直して」）
   190px幅で列の高さ543pxいっぱいに引き伸ばしていたため、細長い帯になっていた。
   幅300px・3:4 に固定し、上寄せ。文章の長さに写真を合わせない。
   ============================================================ */@media (min-width:841px){
  #training .course-detail__profile{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  #training .course-detail__profile>.prof__photo{
    align-self:start;height:auto;max-width:300px;
    aspect-ratio:3/4;object-fit:cover;object-position:50% 16%;
    border-radius:2px;
  }
}@media (max-width:840px){
  #training .course-detail__profile>.prof__photo{max-width:260px;aspect-ratio:3/4;object-fit:cover;object-position:50% 16%}
}

/* ============================================================
   2026-09-03  トップの構成を組み替え（片岡さん指示）
   ヒーロー → 実績 → 貴社へ提供できる価値 → 費用対効果（研修会社の例）
   → 弊社の強み・他社との違い（表）→ 助成金 → FAQ → 会社概要 → お問い合わせ
   既存の「研修の流れ」は価値①へ、「自社での実践」は価値②へ、「対応エリア」は強み④へ畳んだ。
   ============================================================ */

/* ── 実績：研修の実績を先に。開発事例の前に位置づけの1文 ── */
.proof-story__lede--dev{margin-top:clamp(56px,6vw,84px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--pz-rule,#E3D9CF)}
.proof-story .tcase{margin-top:clamp(36px,4vw,56px);padding-top:0;border-top:0}

/* ── 貴社へ提供できる価値 ── */
.value__two{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
.value__two li{display:flex;align-items:center;gap:18px;padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  background:rgba(255,253,249,.9);border:1px solid var(--pz-rule,#E3D9CF);border-left:4px solid var(--pz-coral,#E97861);border-radius:2px}
.value__two span{font-family:var(--serif);font-size:clamp(28px,2.6vw,36px);font-weight:600;color:var(--pz-coral-dk,#C04931);line-height:1}
.value__two b{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);font-weight:600;color:var(--pz-ink,#3F3733);line-height:1.5}
.value__blk{margin-top:clamp(56px,6vw,88px)}
.value__h{margin:0;display:flex;align-items:baseline;gap:14px;font-family:var(--serif);font-size:clamp(24px,2.3vw,32px);font-weight:600;color:var(--pz-ink,#3F3733);line-height:1.4}
.value__h span{font-family:var(--serif);color:var(--pz-coral-dk,#C04931);font-size:.8em}
.value__lede{margin:14px 0 0;max-width:46em;font-size:clamp(15px,1.25vw,17px);line-height:1.9;color:var(--pz-body,#70645E)}
.value__lede b{color:var(--pz-ink,#3F3733)}
.value__blk .flow--timeline{margin-top:clamp(24px,2.6vw,36px)}
.value__blk .own{margin-top:clamp(24px,2.6vw,36px)}

/* ── 費用対効果（研修会社さまの例）── 「例」を大きく ── */
.roi-ex__card{margin-top:clamp(28px,3vw,40px);padding:clamp(24px,2.6vw,36px) clamp(22px,2.6vw,36px);
  background:rgba(255,253,249,.92);border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px;position:relative}
.roi-ex__flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(10px,1.4vw,20px);align-items:center}
.roi-ex__flow li{min-width:0}
.roi-ex__k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#8A7D75;margin-bottom:6px}
.roi-ex__v{display:block;font-family:var(--serif);font-size:clamp(38px,4.2vw,64px);font-weight:600;line-height:1;color:var(--pz-ink,#3F3733);letter-spacing:-.01em}
.roi-ex__v small{font-family:var(--sans);font-size:.34em;font-weight:700;margin-left:4px;letter-spacing:0}
.roi-ex__v--c{color:var(--pz-coral-dk,#C04931)}
.roi-ex__d{display:block;margin-top:8px;font-size:13px;color:var(--pz-body,#70645E)}
.roi-ex__arrow{width:28px;height:2px;background:var(--pz-coral,#E97861);position:relative;justify-self:center}
.roi-ex__arrow::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:8px solid var(--pz-coral,#E97861);border-right:0}
.roi-ex__vs{margin:clamp(22px,2.4vw,30px) 0 0;padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--pz-rule,#E3D9CF);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:clamp(15px,1.25vw,17px);line-height:1.8;color:var(--pz-body,#70645E)}
.roi-ex__vs b{color:var(--pz-coral-dk,#C04931)}
.roi-ex__note{margin:16px 0 0;font-size:13px;line-height:1.8;color:#8A7D75}
.roi-ex__more{margin:14px 0 0}

/* ── 弊社の強み・他社との違い（表）── 左：一般、右：当社（珊瑚のバー） ── */
.cmp__table{margin-top:clamp(28px,3vw,40px);border-top:2px solid var(--pz-ink,#3F3733)}
.cmp__head,.cmp__row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.2fr) minmax(0,1.9fr);gap:clamp(14px,2vw,32px)}
.cmp__head{padding:14px 0 12px;border-bottom:1px solid var(--pz-rule,#E3D9CF)}
.cmp__head span{font-size:13px;font-weight:700;letter-spacing:.1em;color:#8A7D75}
.cmp__head .cmp__us{color:var(--pz-coral-dk,#C04931)}
.cmp__row{padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--pz-rule,#E3D9CF);align-items:start}
.cmp__k{margin:0;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:600;line-height:1.5;color:var(--pz-ink,#3F3733)}
.cmp__k span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--pz-coral-dk,#C04931);margin-bottom:6px}
.cmp__a{margin:0;font-size:clamp(14px,1.15vw,15.5px);line-height:1.85;color:#8A7D75}
.cmp__b{margin:0;position:relative;padding-left:16px;font-size:clamp(14.5px,1.2vw,16px);line-height:1.9;color:var(--pz-body,#70645E)}
.cmp__b::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:3px;background:var(--pz-coral,#E97861)}
.cmp__b b{color:var(--pz-ink,#3F3733);font-weight:700}
.cmp__b b:first-child{display:block;color:var(--pz-coral-dk,#C04931);font-size:clamp(16px,1.35vw,18px);line-height:1.55;margin-bottom:6px}

/* ── 助成金 ── */
.josei__card{margin-top:clamp(28px,3vw,40px);padding:clamp(24px,2.6vw,36px);background:rgba(255,253,249,.92);border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px}
.josei__card .fig__ab{margin-top:10px}
.josei__card .note{margin-top:18px;max-width:52em}

/* ── 会社概要 ── */
.about__people{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px)}
.about__p{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(16px,1.8vw,24px);align-items:start;
  padding:clamp(20px,2.2vw,28px);background:rgba(255,253,249,.92);border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px}
.about__p img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border-radius:2px;grid-row:1 / span 3}
.about__role{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--pz-coral-dk,#C04931)}
.about__name{margin:4px 0 10px;font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);font-weight:600;color:var(--pz-ink,#3F3733);line-height:1.4}
.about__name small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:500;color:#8A7D75;margin-top:4px;letter-spacing:.04em}
.about__txt{margin:0;font-size:clamp(14px,1.15vw,15.5px);line-height:1.9;color:var(--pz-body,#70645E)}
.about__dl{margin:clamp(24px,2.6vw,36px) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--pz-rule,#E3D9CF)}
.about__dl div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--pz-rule,#E3D9CF);font-size:14.5px;line-height:1.7}
.about__dl dt{margin:0;color:#8A7D75;font-weight:700;letter-spacing:.04em}
.about__dl dd{margin:0;color:var(--pz-ink,#3F3733)}@media (max-width:960px){
  .value__two{grid-template-columns:1fr}
  .roi-ex__flow{grid-template-columns:1fr;gap:8px}
  .roi-ex__arrow{width:2px;height:22px;justify-self:start;margin-left:18px}
  .roi-ex__arrow::after{right:-5px;top:auto;bottom:-1px;border:6px solid transparent;border-top:8px solid var(--pz-coral,#E97861);border-bottom:0}
  .roi-ex__vs{grid-template-columns:1fr}
  .cmp__head{display:none}
  .cmp__row{grid-template-columns:1fr;gap:12px}
  .cmp__a::before{content:"一般的なAI研修　";font-size:11px;font-weight:700;letter-spacing:.1em;color:#8A7D75}
  .cmp__b::after{content:"";}
  .about__people{grid-template-columns:1fr}
  .about__p{grid-template-columns:minmax(0,130px) minmax(0,1fr)}
  .about__dl{grid-template-columns:1fr}
}
/* 「例」をもっと大きく（片岡さん「例だと分かりにくいと、自分には関係ないと思ってしまう」）。
   カードの上端に帯として置き、「これは一例／御社の数字で同じように出す」を最初に読ませる。 */
.roi-ex__card{padding-top:0;overflow:hidden}
.roi-ex__band{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(16px,1.8vw,24px);
  margin:0 calc(-1 * clamp(22px,2.6vw,36px)) clamp(22px,2.4vw,30px);padding:clamp(14px,1.6vw,20px) clamp(22px,2.6vw,36px);
  background:rgba(233,120,97,.10);border-bottom:1px solid rgba(233,120,97,.35)}
.roi-ex__band b{display:inline-flex;align-items:center;justify-content:center;width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);
  background:var(--pz-coral,#E97861);color:#fff;font-family:var(--serif);font-size:clamp(30px,2.8vw,40px);font-weight:600;border-radius:2px}
.roi-ex__band p{margin:0;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.75;color:var(--pz-body,#70645E)}
.roi-ex__band span{display:block;font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);font-weight:600;color:var(--pz-coral-dk,#C04931);line-height:1.4;margin-bottom:2px}@media (max-width:640px){.roi-ex__band{grid-template-columns:1fr}}
/* 費用対効果の3段：①効率化 ②新講座の開設 ③売上。番号を付けて因果の順が読めるように */
.roi-ex__k em{display:block;font-style:normal;font-family:var(--serif);font-size:15px;color:var(--pz-coral-dk,#C04931);letter-spacing:.1em;margin-bottom:4px}
.roi-ex__k{font-size:13.5px;color:var(--pz-ink,#3F3733);line-height:1.6;min-height:3.2em}

/* ============================================================
   2026-09-03 導線を平らに（片岡さん「階層が深すぎてアクセスするのが面倒」）
   ・ヘッダー：別ページへ飛ぶ5項目 → トップの各章へ1クリック（実績／強み／費用・助成金／会社概要）
     ＋ 研修内容（唯一の詳細ページ）
   ・フッター：全ページを3群で一覧にする地図。どのページからも2クリック以内で全ページへ
   ============================================================ */
.ft__in--map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.ft__co p{margin:0}
.ft__addr{margin-top:14px!important;font-size:13px;line-height:1.8;color:#C9C0B7}
.ft__tel{margin-top:10px!important;font-size:13px;line-height:1.8;color:#C9C0B7}
.ft__tel a{color:#FAF4EF;font-size:17px;font-weight:700;text-decoration:none;letter-spacing:.02em}
.ft__map{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.ft__map div{display:flex;flex-direction:column;gap:9px}
.ft__map b{display:block;margin-bottom:6px;padding-left:12px;border-left:3px solid var(--pz-coral,#E97861);
  font-size:12.5px;font-weight:700;letter-spacing:.12em;color:#FAF4EF;line-height:1.3}
.ft__map a{color:#D9D0C7;text-decoration:none;font-size:14px;line-height:1.6;transition:color .18s}
.ft__map a:hover{color:#FFFDF9;text-decoration:underline;text-underline-offset:3px}
.hd__nav a[aria-current="page"] .nv__ja{color:var(--pz-coral-dk,#C04931)}@media (max-width:960px){
  .ft__in--map{grid-template-columns:1fr}
  .ft__map{grid-template-columns:1fr 1fr}
}@media (max-width:560px){
  .ft__map{grid-template-columns:1fr}
}

/* ============================================================
   2026-09-03 比較表を作り直し（片岡さん「小さすぎる！もっと大きく！特に見出し！！他社の比較が分かりにくい！」）
   ・行の見出し：明朝 28〜34px
   ・列の頭：帯で色分け（一般＝墨の薄い帯／レアスリー＝珊瑚の帯・白文字）
   ・各セルの先頭に ✕（一般）／○（レアスリー）を大きく。比較表の定番の記号で一目で読める
   ・レアスリー列は列全体に薄い珊瑚の地
   ============================================================ */
.cmp__table{border-top:0;margin-top:clamp(32px,3.6vw,52px)}
.cmp__head,.cmp__row{grid-template-columns:minmax(190px,.95fr) minmax(0,1.15fr) minmax(0,1.6fr);gap:0}
.cmp__head{padding:0;border-bottom:0;align-items:stretch}
.cmp__head span{display:flex;align-items:center;justify-content:center;min-height:64px;padding:12px 16px;
  font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:.08em;border-radius:2px 2px 0 0}
.cmp__head .cmp__blank{background:none}
.cmp__head .cmp__them{background:rgba(63,55,51,.08);color:var(--pz-body,#70645E);margin-right:10px}
.cmp__head .cmp__us{background:var(--pz-coral,#E97861);color:#fff;font-size:clamp(19px,1.7vw,24px)}
.cmp__row{padding:0;border-bottom:0;align-items:stretch}
.cmp__row > *{padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,26px);border-bottom:1px solid var(--pz-rule,#E3D9CF)}
.cmp__row .cmp__k{padding-left:0}
.cmp__row .cmp__a{margin-right:10px;background:rgba(63,55,51,.03)}
.cmp__row .cmp__b{background:rgba(233,120,97,.08)}
.cmp__row:last-child > *{border-bottom:2px solid var(--pz-ink,#3F3733)}
/* 行の見出し：大きく */
.cmp__k{font-size:clamp(24px,2.3vw,32px);line-height:1.35}
.cmp__k span{font-size:14px;letter-spacing:.16em;margin-bottom:10px}
/* セル本文：大きく。先頭に記号 */
.cmp__a,.cmp__b{position:relative;padding-left:clamp(56px,5vw,72px)!important;font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.9}
.cmp__a::before,.cmp__b::before{content:"✕";position:absolute;left:clamp(14px,1.6vw,22px);top:clamp(16px,1.8vw,24px);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:24px;font-weight:700;line-height:1;background:none;border-radius:50%}
.cmp__a::before{color:#9A8F87;border:2px solid #C9C0B7}
.cmp__b::before{content:"○";color:#fff;background:var(--pz-coral,#E97861);font-size:22px}
.cmp__a{color:var(--pz-body,#70645E)}
.cmp__b b:first-child{font-size:clamp(19px,1.75vw,24px);line-height:1.5;margin-bottom:10px}@media (max-width:960px){
  .cmp__head{display:grid;grid-template-columns:1fr 1fr}
  .cmp__head .cmp__blank{display:none}
  .cmp__head .cmp__them{margin-right:6px}
  .cmp__row{grid-template-columns:1fr}
  .cmp__row .cmp__a{margin-right:0}
  .cmp__row .cmp__k{padding-bottom:12px;border-bottom:0}
  .cmp__a::before{content:"✕"}
  .cmp__k{font-size:26px}
}

/* ===== トップ「例」カード：御社の数字を入れて試す（2026-09-03） ===== */
.roi-ex__try{margin:0 0 clamp(22px,2.4vw,30px);padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,24px);
  background:var(--pz-paper-2,#F1E7DE);border-radius:12px}
.roi-ex__try-t{margin:0 0 12px;font-size:clamp(14px,1.15vw,15.5px);line-height:1.7;color:var(--pz-body,#70645E)}
.roi-ex__try-t b{color:var(--pz-ink,#3F3733)}
.roi-ex__fields{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.roi-ex__fields label{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.roi-ex__fields span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--pz-ink,#3F3733);margin-bottom:6px}
.roi-ex__fields span small{font-weight:500;color:#8A7D75;margin-left:4px}
.roi-ex__fields i{display:flex;align-items:baseline;gap:4px;white-space:nowrap;font-style:normal;font-size:14px;font-weight:700;color:var(--pz-body,#70645E);
  background:var(--pz-paper,#FFFDF9);border:1px solid var(--pz-rule,#E3D9CF);border-bottom:2px solid var(--pz-coral,#E97861);border-radius:8px;padding:8px 12px}
.roi-ex__fields input{flex:1 1 auto;min-width:0;width:100%;border:0;background:transparent;padding:0;margin:0;
  font-family:var(--serif);font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.2;color:var(--pz-coral-dk,#C04931);text-align:right;outline:none;
  -moz-appearance:textfield;appearance:textfield}
.roi-ex__fields input::-webkit-outer-spin-button,.roi-ex__fields input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi-ex__fields i:focus-within{border-color:var(--pz-coral,#E97861);box-shadow:0 0 0 3px rgba(233,120,97,.18)}
.roi-ex__v [data-roi-out]{transition:color .2s}
.roi-ex__v.is-bump{animation:roiBump .35s ease}
@keyframes roiBump{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (max-width:900px){.roi-ex__fields{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.roi-ex__fields{gap:10px}.roi-ex__fields i{padding:7px 10px}}

/* ============================================================
   training.html の作り直し（2026-09-05 片岡さん指摘）
   「文章が多すぎて、何をやるのか・何が作れるのか・講師が誰なのかが
    分からない。もっと視覚的に」を受けて足した3部品。
   ・.tl    … 講座内容のタイムライン（注記4本ぶら下げをやめた）
   ・.tchr  … 講師（右カラムの小さな囲みから独立セクションへ）
   ・.uc-wrap … 業務別カードを .impact-story の中に置くための器
   既存の .prog / .take / .growth-* は他ページでも使うので触らない。
   ============================================================ */

/* --- 講座内容のタイムライン ------------------------------------- */
.tl{
  --tl-gap:clamp(20px,2vw,30px);
  list-style:none;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  display:grid;gap:var(--tl-gap);
}
@media (min-width:900px){ .tl{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 3枚の高さを揃える。揃えないとカード間の連結線（::after の top:50%）が
   1枚ずつ違う高さに出て、工程がつながって見えない。 */
.tl__i{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.3vw,32px) clamp(20px,2vw,28px) clamp(22px,2.1vw,28px);
  background:#fff;border:1px solid var(--pz-rule,#E3D9CF);border-radius:14px;
  box-shadow:0 10px 28px rgba(38,35,31,.06);
}
.tl__n{align-self:flex-start}
/* 工程のつながりを見せる線。スマホは縦、900px以上は横に出す。
   gap と同じ幅にしているので、カードの間にぴったり収まる。 */
.tl__i:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:calc(var(--tl-gap) * -1);
  width:2px;height:var(--tl-gap);background:var(--pz-rule,#E3D9CF);
}
@media (min-width:900px){
  .tl__i:not(:last-child)::after{
    left:auto;bottom:auto;top:50%;right:calc(var(--tl-gap) * -1);
    width:var(--tl-gap);height:2px;
  }
}
/* 白文字 11px 太字なので WCAG は 4.5:1 必要。地の珊瑚 #E97861 と
   琥珀 #C9872B では 2.87:1 / 3.01:1 で落ちたため、同系の濃い色に置く
   （_check/visual-audit.js で確認）。 */
.tl__n{
  display:inline-flex;align-items:center;justify-content:center;padding:6px 13px;
  border-radius:999px;color:#fff;background:var(--coral-600,#C04931);
  font-family:var(--latin);font-size:11px;font-weight:700;letter-spacing:.14em;
}
.tl__i:nth-child(2) .tl__n{background:#9A6516}
.tl__i:nth-child(3) .tl__n{background:#347E92}
.tl__when{
  margin:15px 0 0;font-size:16px;font-weight:700;line-height:1.6;
  color:var(--pz-ink,#3F3733);
}
.tl__when small{
  display:block;margin-top:4px;font-size:12.5px;font-weight:400;line-height:1.7;
  color:var(--pz-body,#70645E);
}
.tl__t{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--pz-rule,#E3D9CF);
  font-family:var(--serif);font-size:clamp(16px,1.45vw,18px);font-weight:600;line-height:1.7;
  color:var(--pz-ink,#3F3733);
}
.tl__d{margin:11px 0 0;font-size:14px;line-height:1.9;color:var(--pz-body,#70645E)}
/* .tl は 900px 以上で3列。その中に置くと1列160px＝1行10文字になるので、タイムラインの外・全幅に置く（2026-09-09 反証パネル） */
.tl__days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin:clamp(26px,3vw,40px) 0 0}
.tl__day{border-top:2px solid var(--pz-coral,#E97861);padding-top:14px}
.tl__dayn{margin:0;font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);font-weight:600;line-height:1.2;color:var(--pz-coral-dk,#C04931)}
.tl__dayn small{margin-left:10px;font-family:inherit;font-size:13px;font-weight:400;color:var(--pz-body,#70645E)}
.tl__dayt{margin:6px 0 0;font-family:var(--serif);font-size:clamp(16px,1.4vw,19px);font-weight:600;color:var(--pz-ink,#3F3733)}
.tl__list b{display:block;margin:0 0 4px}
.tl__daynote{margin:6px 0 18px;font-size:13.5px;line-height:1.8;color:var(--pz-body,#70645E)}
@media (max-width:680px){.tl__days{grid-template-columns:1fr;gap:24px}}
.tl__list{margin:13px 0 18px;padding:0;list-style:none}
.tl__list li{
  position:relative;padding:7px 0 7px 19px;font-size:14px;line-height:1.7;
  color:var(--pz-body,#70645E);border-bottom:1px dotted var(--pz-rule,#E3D9CF);
}
.tl__list li:last-child{border-bottom:0}
.tl__list li::before{
  content:"";position:absolute;left:1px;top:1.02em;width:6px;height:6px;border-radius:50%;
  background:var(--pz-coral,#E97861);
}
.tl__list b{color:var(--pz-ink,#3F3733);font-weight:700}
.tl__tag{
  align-self:flex-start;margin:auto 0 0;padding:6px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1.5;
  color:#1F3B2A;background:#E7F1E9;box-shadow:inset 0 0 0 1px #BCD9C4;
}

/* --- 講師 ------------------------------------------------------- */
.tchr{display:grid;gap:clamp(26px,3.2vw,52px);align-items:start;margin-top:clamp(28px,3vw,44px)}
@media (min-width:900px){ .tchr{grid-template-columns:minmax(0,320px) minmax(0,1fr)} }
.tchr__ph{
  margin:0;overflow:hidden;border-radius:16px;background:#EDE7DF;
  box-shadow:0 18px 44px rgba(73,60,50,.13);
}
/* 素材が 407×850 の縦長。4/5 で切ると顔が上に寄るので、
   object-position で顔の位置に合わせている。 */
.tchr__ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%}
.tchr__name{
  margin:18px 0 0;font-family:var(--serif);font-size:clamp(21px,2vw,26px);font-weight:600;
  line-height:1.5;color:var(--pz-ink,#3F3733);
}
.tchr__name small{
  display:block;margin-top:7px;font-size:12.5px;font-weight:400;letter-spacing:.04em;
  color:var(--pz-body,#70645E);
}
.tchr__bio{margin:14px 0 0;font-size:14.5px;line-height:1.95;color:var(--pz-body,#70645E)}
.tchr__bio b{color:var(--pz-ink,#3F3733)}
.tchr__pts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.5vw,20px)}
@media (min-width:700px){ .tchr__pts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tchr__pts li{
  padding:clamp(20px,2vw,27px);background:#fff;border:1px solid var(--pz-rule,#E3D9CF);
  border-radius:14px;box-shadow:0 8px 24px rgba(38,35,31,.05);
}
.tchr__pts li::before{
  content:"";display:block;width:34px;height:4px;margin-bottom:15px;border-radius:99px;
  background:var(--pz-coral,#E97861);
}
.tchr__pts li:nth-child(2)::before{background:var(--amber-500,#E1A64D)}
.tchr__pts li:nth-child(3)::before{background:#5BA2B5}
.tchr__pts li:nth-child(4)::before{background:#8B75B7}
.tchr__pts b{
  display:block;font-size:clamp(15px,1.35vw,16.5px);font-weight:700;line-height:1.7;
  color:var(--pz-ink,#3F3733);
}
.tchr__pts span{display:block;margin-top:10px;font-size:13.5px;line-height:1.9;color:var(--pz-body,#70645E)}

/* --- 業務別カードの器（#usecase の中） --------------------------- */
.uc-wrap{
  max-width:1440px;margin:clamp(90px,10vw,150px) auto 0;
  padding:0 clamp(28px,6.2vw,104px);
}
.uc-wrap__lb{
  margin:0;padding-bottom:16px;border-bottom:1px solid #ded7cf;
  font-family:var(--serif);font-size:clamp(21px,2.1vw,29px);font-weight:600;line-height:1.6;
  color:#3F3733;
}
.uc-wrap .uc{margin-top:clamp(28px,3vw,44px)}
/* 業務別カードを .possibility-story の外へ出したので、そこに付いていた
   「いまは〜」の文字色（3320行）が外れてコントラストが 3.47:1 に落ちた。
   同じ値をここで持たせる。 */
.uc-wrap .uc__card .now{color:#5F5750}
.uc-wrap .uc__after{margin-top:clamp(26px,2.8vw,38px)}
/* この見出しだけ .growth-story と同じ扱いにする（em を斜体にしない） */
.impact-story__title em{color:#C04931;font-style:normal}

/* ============================================================
   2026-09-06 「一回見ただけで理解できる」トップページ（片岡さん指示）
   ・ヒーローに導線ボタン（研修の中身を見る／無料で相談する）
   ・研修内容の章 .prg を新設（1日目／2日目・数字4つ・作れるものの例）
   ・トップだけ余白と見出しを詰める（15,600px → 目標12,000px台。
     2026-08-20 の「50〜60代向けに大きく」は本文サイズを保ち、余白と見出しだけ詰める）
   ============================================================ */

/* ── ヒーローの導線 ── */
.pz__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,34px)}
.pz__cta a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  border-radius:999px;font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.pz__cta-main{background:var(--pz-coral-dk,#C04931);color:#fff;box-shadow:0 10px 24px rgba(192,73,49,.22)}
.pz__cta-main:hover{background:#A93E29;transform:translateY(-1px)}
.pz__cta-sub{background:rgba(255,255,255,.85);color:var(--pz-ink,#3F3733);box-shadow:inset 0 0 0 1.5px var(--pz-ink,#3F3733)}
.pz__cta-sub:hover{background:#fff;transform:translateY(-1px)}
/* 見出しのアニメーションに合わせて、ボタンも最後に出す */@media (prefers-reduced-motion:no-preference){
  .mo .home .hero.pz .pz__cta{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
  .mo .home .hero.pz.is-ready .pz__cta{opacity:1;transform:none;transition-delay:.3s}
}
/* サブコピーは3行のまま、1行を短く保つ */
.pz__sub span{font-size:clamp(14.5px,1.15vw,18px);line-height:1.8}

/* ── 研修内容 ── */
.prg{background:#fff}
.prg .lede b{color:var(--pz-ink,#3F3733)}
.prg__days{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.prg__day{position:relative;padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,32px) clamp(20px,2.2vw,28px);
  background:var(--pz-cream,#FAF4EF);border:1px solid var(--pz-rule,#E3D9CF);border-top:4px solid var(--pz-coral,#E97861);border-radius:2px}
.prg__day--2{border-top-color:var(--pz-coral-dk,#C04931)}
.prg__dn{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.prg__dn span{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:var(--pz-coral-dk,#C04931);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.12em}
.prg__dn b{font-family:var(--serif);font-size:clamp(21px,1.9vw,27px);font-weight:600;color:var(--pz-ink,#3F3733);line-height:1.4}
.prg__list{list-style:none;margin:clamp(16px,1.8vw,22px) 0 0;padding:0;counter-reset:prg}
.prg__list li{position:relative;padding:14px 0 14px 44px;border-top:1px solid var(--pz-rule,#E3D9CF);counter-increment:prg}
.prg__list li::before{content:counter(prg,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--pz-coral-dk,#C04931)}
.prg__list b{display:block;font-size:clamp(15.5px,1.3vw,17.5px);font-weight:700;line-height:1.6;color:var(--pz-ink,#3F3733)}
.prg__list span{display:block;margin-top:4px;font-size:14px;line-height:1.85;color:var(--pz-body,#70645E)}

/* .prg__facts は 2026-09-06 同日に撤去（上の事実の帯と数字が重複し、「事前3時間」が価格表に無いため）。部品は残す */
.prg__facts{list-style:none;margin:clamp(16px,2vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px;background:#fff}
.prg__facts li{padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,24px);border-left:1px solid var(--pz-rule,#E3D9CF)}
.prg__facts li:first-child{border-left:0}
.prg__facts b{display:block;font-family:var(--serif);font-size:clamp(24px,2.3vw,32px);font-weight:600;line-height:1.1;color:var(--pz-coral-dk,#C04931);letter-spacing:-.01em}
.prg__facts span{display:block;margin-top:8px;font-size:13px;line-height:1.7;color:var(--pz-body,#70645E)}

.prg__uc{margin-top:clamp(44px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--pz-rule,#E3D9CF)}
.prg__h3{margin:0;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:600;line-height:1.5;color:var(--pz-ink,#3F3733)}
.prg__h3-sub{margin:10px 0 0;max-width:46em;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.9;color:var(--pz-body,#70645E)}
.prg .uc{margin-top:clamp(22px,2.4vw,32px)}
.prg .uc__card .now{color:#5F5750}
/* 主読者は50〜60代。既定の .uc（13.5px／12.5px）はトップで一番小さい文字になるので、本文並みに上げる */
.prg .uc__list li{font-size:15.5px}
.prg .uc__list li>b{font-size:16.5px}
.prg .uc__list li .now{font-size:14px}
.prg .uc__list li .aft{font-size:15px}
.prg .uc__hd small{font-size:11px}
.prg__list span{font-size:15px}
.prg__links{margin-top:clamp(24px,2.6vw,34px);display:flex;flex-wrap:wrap;gap:12px 14px}
.prg__link{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;
  font-size:15px;font-weight:700;text-decoration:none;color:var(--pz-ink,#3F3733);
  background:#fff;box-shadow:inset 0 0 0 1.5px var(--pz-ink,#3F3733);transition:background .2s ease,color .2s ease}
.prg__link:hover{background:var(--pz-ink,#3F3733);color:#fff}
.prg__link--main{background:var(--pz-coral-dk,#C04931);color:#fff;box-shadow:none}
.prg__link--main:hover{background:#A93E29;color:#fff}

@media (max-width:960px){
  .prg__days{grid-template-columns:1fr}
  .prg__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prg__facts li:nth-child(3){border-left:0}
  .prg__facts li:nth-child(n+3){border-top:1px solid var(--pz-rule,#E3D9CF)}
  .prg .uc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .prg .uc{grid-template-columns:1fr}
  .pz__cta a{flex:1 1 100%}
  .prg__links a{flex:1 1 100%;justify-content:center}
}

/* ── トップだけ、余白と見出しを詰める（本文の文字サイズは変えない） ── */
.home .sec{padding:clamp(60px,7vw,104px) 0}
.home .h2{font-size:clamp(30px,3.4vw,46px);line-height:1.45;max-width:24em}
.home .lede{margin-top:20px;line-height:1.9}  /* 文字サイズは 2026-08-20「50〜60代向けに大きく」のまま。詰めるのは余白だけ */
.home .proof-story{padding:clamp(60px,7vw,104px) 0}
.home .proof-story .h2{font-size:clamp(30px,3.4vw,46px)}
.home .proof-story__lede{margin:20px 0 0;line-height:1.9;max-width:46em}
.home .proof-story .tcase{margin-top:clamp(28px,3vw,40px)}
.home .proof-story__lede--dev{margin-top:clamp(40px,4.4vw,60px);padding-top:clamp(22px,2.4vw,32px)}
.home .proof-story .case{margin-top:clamp(28px,3vw,40px)}
.home .proof-story .case>div:first-child{min-height:460px}
.home .proof-story .case__num{font-size:clamp(64px,7vw,104px)}
.home .proof-story .case__b{padding:clamp(28px,3.6vw,52px);line-height:1.9}
.home .proof-story .case__b::before{margin-bottom:20px}
.home .value__blk{margin-top:clamp(40px,4.4vw,60px)}
.home .cta h2{font-size:clamp(30px,3.4vw,46px)}
@media (max-width:680px){
  .home .sec,.home .proof-story{padding:56px 0}
  .home .h2,.home .proof-story .h2,.home .cta h2{font-size:clamp(27px,7.4vw,34px);line-height:1.45}
  .home .proof-story .case>div:first-child{min-height:0;aspect-ratio:4/3}
}
/* ヒーローの導線も安全網に入れる（app.js が落ちても 2.4秒で出す） */@media (prefers-reduced-motion: no-preference){
  .mo .home .hero.pz .pz__cta{animation:mo-safety 0s linear 2.4s forwards}
}
/* スマホでは「作れるものの例」4枚を縦に積まず、横にめくる（縦積みだと研修内容の章だけで4.5画面あった） */@media (max-width:680px){
  /* 負マージンは現在の .wrap の余白（2295行: clamp(28px,4.5vw,72px)／≤520px は 20px）に合わせる。
     旧値 clamp(24px,6vw,84px) だと 4〜11px ずれて1枚目が左端で切れた（コードQA 2026-09-06 実測）。
     scroll-padding-inline が無いと mandatory スナップが余白を無視して1枚目を画面外に吸着させる。 */
  .prg .uc{--prg-gutter:clamp(28px,4.5vw,72px);display:flex;grid-template-columns:none;gap:12px;
    margin:22px calc(-1 * var(--prg-gutter)) 0;padding:4px var(--prg-gutter) 14px;scroll-padding-inline:var(--prg-gutter);
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .prg .uc__card{flex:0 0 82%;scroll-snap-align:start}
  .prg__h3-sub::after{content:"　横にめくると、ほかの業務の例も見られます。";color:#8A7D75}
}
@media (max-width:520px){ .prg .uc{--prg-gutter:20px} }

/* 2026-09-06 夜 目視QA: スマホ（縦積み）では最終行の下罫線が ×セルと○セルの両方に付き、
   05行目だけ「×と○の間」に濃い線が出ていた。縦積みのときは行末（最後のセル）だけに残す。 */@media (max-width:960px){
  .cmp__row:last-child > *{border-bottom:0}
  .cmp__row:last-child > *:last-child{border-bottom:2px solid var(--pz-ink,#3F3733)}
}
/* スマホではサブコピーの行分け（span＝1行）を外して流し込む。「作ってしまう、」だけの孤立行を防ぐ */@media (max-width:680px){
  .pz__sub span{display:inline;margin-top:0}
}
/* 特徴の左列が空の行（片岡さんの言葉待ち）。✕ 印も出さない */
.cmp__a--none{visibility:hidden}
@media (max-width:960px){ .cmp__a--none{display:none} }

/* ============================================================
   2026-09-06 夜② 研修内容を片岡さんの言葉で作り直し
   ・.prg__three … 研修内容の3行（番号を大きく）
   ・.prg__pre   … AI研修の事前支援（研修の中身ではなく別枠。無料の帯）
   1日目／2日目の .prg__days は使わなくなった（部品は残す）
   ============================================================ */
.prg__three{list-style:none;margin:clamp(24px,2.8vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.prg__three li{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,28px);
  background:var(--pz-cream,#FAF4EF);border:1px solid var(--pz-rule,#E3D9CF);border-top:4px solid var(--pz-coral,#E97861);border-radius:2px}
.prg__three span{font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1;color:var(--pz-coral-dk,#C04931);letter-spacing:.04em}
.prg__three b{font-family:var(--serif);font-size:clamp(18px,1.6vw,23px);font-weight:600;line-height:1.55;color:var(--pz-ink,#3F3733)}

.prg__pre{margin-top:clamp(36px,4vw,56px);padding:clamp(24px,2.6vw,36px) clamp(22px,2.6vw,36px);
  background:#fff;border:1px solid var(--pz-rule,#E3D9CF);border-left:5px solid var(--pz-coral,#E97861);border-radius:2px}
.prg__pre-lb{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.prg__pre-lb span{font-family:var(--serif);font-size:clamp(22px,2.1vw,29px);font-weight:600;line-height:1.4;color:var(--pz-ink,#3F3733)}
.prg__pre-lb em{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-style:normal;
  background:var(--pz-coral-dk,#C04931);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.04em}
.prg__pre-t{margin:12px 0 0;max-width:46em;font-size:clamp(15px,1.25vw,17px);line-height:1.9;color:var(--pz-body,#70645E)}
.prg__pre-grid{margin-top:clamp(18px,2vw,26px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.prg__pre-i{padding:clamp(18px,2vw,26px);background:var(--pz-cream,#FAF4EF);border:1px solid var(--pz-rule,#E3D9CF);border-radius:2px}
.prg__pre-n{margin:0 0 8px;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--pz-coral-dk,#C04931)}
.prg__pre-i h3{margin:0;font-size:clamp(16px,1.4vw,18.5px);font-weight:700;line-height:1.6;color:var(--pz-ink,#3F3733)}
.prg__pre-i p:last-child{margin:8px 0 0;font-size:15px;line-height:1.9;color:var(--pz-body,#70645E)}
@media (max-width:960px){
  .prg__three{grid-template-columns:1fr}
  .prg__three li{flex-direction:row;align-items:baseline;gap:16px}
  .prg__pre-grid{grid-template-columns:1fr}
}

/* 2026-09-06 夜③ 事前支援は「流れ」の中に1箇所だけ。01・02 の上にラベル（無料の帯・本来30万円） */
.flow__pre{margin:clamp(22px,2.4vw,32px) 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:14px 18px;background:#fff;border:1px solid var(--pz-rule,#E3D9CF);border-left:5px solid var(--pz-coral,#E97861);border-radius:2px}
.flow__pre b{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);font-weight:600;color:var(--pz-ink,#3F3733);line-height:1.4}
.flow__pre em{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-style:normal;
  background:var(--pz-coral-dk,#C04931);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
.flow__pre span{flex-basis:100%;font-size:14.5px;line-height:1.8;color:var(--pz-body,#70645E)}
.flow--timeline .flow__i--pre .flow__node{background:#fff;border-color:var(--pz-coral-dk,#C04931)}
.flow--timeline .flow__i--pre .flow__n span{color:var(--pz-coral-dk,#C04931)}
.value__blk .flow__pre + .flow--timeline{margin-top:18px}

/* 2026-09-06 夜⑤ 研修内容の3行に中身を付ける（片岡さん「もう少し詳しく」）。作れるものの例は外した */
.prg__three--detail{grid-template-columns:repeat(3,minmax(0,1fr))}
.prg__three--detail li{gap:10px}
.prg__three--detail ul{list-style:none;margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--pz-rule,#E3D9CF);display:grid;gap:10px}
.prg__three--detail ul li{position:relative;padding:0 0 0 16px;background:none;border:0;font-size:15px;line-height:1.85;color:var(--pz-body,#70645E);display:block}
.prg__three--detail ul li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--pz-coral,#E97861)}
.prg__links{margin-top:clamp(28px,3vw,40px)}
@media (max-width:960px){
  .prg__three--detail{grid-template-columns:1fr}
  .prg__three--detail>li{flex-direction:column;align-items:stretch}
  .prg__three--detail>li>span{font-size:22px}
}
/* 2026-09-06 片岡さん「研修の後は、示さなくてよい」→ 流れは3工程 */
@media (min-width:961px){ .flow--timeline.flow--three{grid-template-columns:repeat(3,1fr)} }
/* 2026-09-06 コンセプト「AI研修で確実性のある成果を届ける。」は3行。3行目の入場を足す */@media (prefers-reduced-motion:no-preference){
  .mo .home .hero.pz.is-ready .story-hero__title span:nth-child(3){opacity:1;transform:none;transition-delay:.42s}
}

/* ============================================================
   2026-09-06 夜⑥ 全部明朝体（片岡さん「ゴシック体も含まれているから、全部明朝体にして」）
   2026-09-01 の名刺規則③「明朝は見出しだけ・他はゴシック」を上書きする。
   --sans / --latin を明朝の束に向けるので、既存の var(--sans) 指定はすべて明朝になる。
   Webフォントは Noto Serif JP（各ページの <link> で読み込み。旧書体（ng-list で禁止） は ng-list 2026-07-28 で使用禁止）。無い環境は游明朝／ヒラギノ明朝。
   ============================================================ */
:root{
  --serif:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","BIZ UDPMincho","MS PMincho",serif;
  --sans:var(--serif);
  --latin:var(--serif);
}
html,body,button,input,select,textarea,.hd__nav a,.nv__en,.ft,.mcta a,.form__submit,.cta-choice__tab,
.eyebrow,.tl__n,.pz-fact dt,.pz-fact dd,.tchr__name small,.about__role,.hero__badge{font-family:var(--serif)}
/* 2682行の直書きゴシック（ヒーローの下帯など）も明朝へ */
.pz__sub,.story-hero__kicker{font-family:var(--serif)}
/* 明朝は同じサイズだと細く見えるので、本文の太さと字間を少しだけ補う */
body{font-weight:500;letter-spacing:.01em}
b,strong,th,.hd__cta,.form__submit,.pz__cta a,.prg__link{font-weight:700}

/* 2026-09-06 夜⑦ 文字の下限を上げる（片岡さん「文字が小さすぎないか」）。
   実測で 12〜13.5px だった要素を 14〜15.5px に。装飾の欧文（.nv__en）だけは据え置き。 */
.story-hero__kicker{font-size:14px!important}
.tchr__name small,.tcase__name span,.about__name small,.about__role,.flow__dur small,.tcase__lb,.case__facts span,
.flow__n,.flow__n span,.own__bar span,.own__total-n span,.own__note,.roi-ex__note,.roi-ex__note span,.fig__before span,.fig__after span,
.ft__addr,.ft__tel,.ft__map b,.prg__pre-lb em,.flow__pre em,.cta__tel small,.cmp__head span{font-size:14px}
.tcase__made li,.roi-ex__d,.roi-ex__d span,.josei__card .note,.form__direct,.form__direct a,.ft__map a,.tchr__bio{font-size:14.5px}
.tchr__pts span,.roi-ex__k,.flow__d,.cmp__a,.own__d,.about__txt,.prg__three--detail ul li,.prg__pre-i p:last-child,.about__dl div{font-size:15.5px}
.roi-ex__fields label span{font-size:14px}
.roi-ex__fields label small{font-size:12.5px}
.cta-choice__tab small{font-size:13.5px}
.req{font-size:13px}
.cta__tel{font-size:16px}
.form__submit,.hd__demo{font-size:16px}
.own__bar span b{font-size:16px}

/* 2026-09-06 最終目視QA（片岡さんの問い「見やすいか」）への対応 */
.nb{white-space:nowrap}                                  /* 「1つ」「1人1人」「制作時間」を行末で割らない */
.cmp__a{color:#5F5750}                                    /* 比較表の「一般的なAI研修」列が薄すぎた（8A7D75→5F5750） */
.cmp__a::before{opacity:.75}
.roi-ex__note,.own__note,.flow__d,.roi-ex__d{color:#5F5750} /* 注記と流れの説明も一段濃く */
.cmp__a--none{visibility:visible;color:transparent}        /* 5行目の空セル: 文字だけ消して終端線は残す（左列だけ線が短く見えた） */
.cmp__a--none::before{content:none}
@media (max-width:960px){ .cmp__a--none{display:none} }
/* スマホの会社概要カード: 写真の横に本文を押し込むと1行11文字になるので、写真の下に落とす（最終目視QA） */
@media (max-width:680px){
  .about__p{grid-template-columns:1fr}
  .about__p img{grid-row:auto;max-width:180px;aspect-ratio:3/4}
}
/* 特徴5行目: 左列が空のあいだは右列を2列ぶんに広げる（空セルが読み込み失敗に見える指摘） */
@media (min-width:961px){ .cmp__a--none{display:none} .cmp__a--none + .cmp__b{grid-column:2 / span 2} }

/* 2026-09-06 最終コードQA: 文字下限の5セレクタが既存の詳細度に負けていたので同じ形で書き直す */
.flow--timeline .flow__n,.flow--timeline .flow__n span{font-size:14px;color:#70645E}   /* 3.65:1 → 4.9:1 */
.form__row label .req{font-size:13px}
.cta p.cta__tel{font-size:16px;color:#70645E}          /* 電話タブの2行が #D7E1E4（1.22:1）で読めなかった */
.cta p.cta__tel small{font-size:14px;color:#5F5750}
.hd__nav a.hd__demo{font-size:15px}
.cmp__head .cmp__us{background:#C04931}                /* 白文字の地を 2.87:1 → 4.9:1 */
/* .cmp__k の中の .nb（改行防止）に番号ラベル用の span スタイルが当たって別行の小文字になっていた */
.cmp__k .nb{display:inline;font:inherit;color:inherit;letter-spacing:inherit;margin:0}

/* ============================================================
   2026-09-07 名刺に統一（片岡さん「名刺と同じじゃないデザインがめちゃくちゃ出てくる。まじで統一して」）
   名刺の規則: ①有彩色は珊瑚1色 ②プリズムは紙の地 ③全部明朝 ④縦バー／横バーが見出しの記号
   → 角丸カード・落ち影・琥珀/青/紫のバーを全部やめる。カードは 2px 角・1px の罫線・影なし。
   ボタン（丸いピル）は名刺の CTA と同じ扱いなので残す。
   ============================================================ */
/* 角丸 → 2px（ピル型のボタン・丸印は除く） */
.tchr__ph,.tchr__pts li,.tl__i,.own__i,.uc__card,.impact-case,.impact-case__photo,.impact-flow,.flowbox,.roi-ex__try,.roi-ex__fields i,
.prog__step,.svc3__i,.dtool,.dtools__cta,.svc__i,.built__i,.facts>div,.steps li,.take__i,.hon__i,.grant__box,.price__standard,.faq__i,
#price .price,#price .price__row,.form input,.form textarea,.form select,.flow__i,.hero__photo,.pic,.case__photo,.message__photo-img,
.dtools__ph,.price__ph,.steps__ph,.svc,.svc__ph,#training .course-detail,.akita-hero__photo,.cta .form,.tcase__ph img,.proof-story .case,
.about__p img,.prg__day,.prg__three li,.prg__pre,.prg__pre-i,.cta-choice__tab,.cta-choice__panel,.josei__card,.roi-ex__card{border-radius:2px!important}
.tchr__pts li::before,.tchr__ph img{border-radius:0!important}
/* 落ち影 → なし。カードは罫線で区切る */
.tchr__ph,.tchr__pts li,.tl__i,.own__i,.uc__card,.uc__card:hover,.impact-case__photo,.impact-flow,.faq__i,.grant__box,.facts div,
#price .price,#price .price__row,#price .price__effective,#price .price__compare-arrow,#training .course-detail,.akita-hero__photo,
.case__b,.proof-story .case,.svc,.svc__ph,.growth-story__demo,.dtools__ph,.price__ph,.steps__ph,.cta .form,
.hd,.hd.over-dark,.home .hd.is-scrolled,.hd__nav,.hd__cta,.hd__cta:hover,.btn,.btn:hover,.cta .btn,.hero .btn,.hero .btn:hover,.home .hd__cta,.pz__cta-main{box-shadow:none!important}
.tchr__pts li,.tl__i,.own__i,.uc__card,.faq__i,.grant__box{border:1px solid var(--pz-rule,#E3D9CF)}
.hd{border-bottom:1px solid var(--pz-rule,#E3D9CF)}
/* 有彩色は珊瑚1色。琥珀・青・紫のバー・丸・見出し地を珊瑚へ */
.tchr__pts li:nth-child(2)::before,.tchr__pts li:nth-child(3)::before,.tchr__pts li:nth-child(4)::before,
.steps li:nth-child(2)::before,.steps li:nth-child(3)::before,.steps li:nth-child(4)::before,
.uc__card--plan .uc__list li::before,.uc__card--hr .uc__list li::before,.uc__card--ops .uc__list li::before{background:var(--pz-coral,#E97861);box-shadow:none}
.tl__i:nth-child(2) .tl__n,.tl__i:nth-child(3) .tl__n{background:var(--pz-coral-dk,#C04931)}
.uc__card--sales .uc__hd,.uc__card--plan .uc__hd,.uc__card--hr .uc__hd,.uc__card--ops .uc__hd{background:var(--pz-coral-dk,#C04931)}
.uc__card--plan .uc__list li .aft::before,.uc__card--hr .uc__list li .aft::before,.uc__card--ops .uc__list li .aft::before,
.steps li:nth-child(2) .t,.steps li:nth-child(3) .t,.steps li:nth-child(4) .t,#price .price__aid-note,.facts div:nth-child(3),.facts div:nth-child(3) b,.svc--rev .svc__t,
.grant__box:first-child h3{color:var(--pz-coral-dk,#C04931)}
.grant__box:first-child,.grant__box:last-child{border-color:var(--pz-rule,#E3D9CF)}
.hd__nav a:not(.hd__cta)::after{background:var(--pz-coral,#E97861)}
.tl__tag{color:var(--pz-coral-dk,#C04931);background:rgba(233,120,97,.10);box-shadow:inset 0 0 0 1px rgba(233,120,97,.35)}  /* 緑の帯もやめる */
/* 料金ページ: パステル（藤・薄緑）のカード地と琥珀の注記帯を名刺の地と珊瑚へ */
#price .price__row:nth-child(1),#price .price__row:nth-child(2),#price .price__row:nth-child(3),#price .price__row:nth-child(n),
.price__row:nth-child(even):not(:first-child),.price__row:nth-child(odd):not(:first-child){background:#FFFDF9;border:1px solid var(--pz-rule,#E3D9CF)}
#price .price__aid-note{border-left-color:var(--pz-coral,#E97861);background:rgba(233,120,97,.08);color:#5F5750}
#price .price__aid-note strong{color:var(--pz-coral-dk,#C04931)}
#price .price__effective{background:rgba(233,120,97,.10);border-color:rgba(233,120,97,.35)}
#price .price__regular,#price .price__standard{background:#FFFDF9;border-color:var(--pz-rule,#E3D9CF)}
#price .price{background:#fff;border:1px solid var(--pz-rule,#E3D9CF)}
/* 残っていた紫・緑の面を珊瑚系へ（会社概要の章番号、無料バッジ、通知） */
.svc--rev .svc__no{color:var(--pz-coral-dk,#C04931)}
.prog__free,.cf-notice--ok{background:rgba(233,120,97,.10);color:var(--pz-coral-dk,#C04931)}
/* 料金の数字が旧アクセントの紺（#153E50）だった → 珊瑚 */
#price .price__v b,#price .price__regular b,.price__v b{color:var(--pz-ink,#3F3733)}
#price .price__effective b{color:var(--pz-coral-dk,#C04931)}
/* 2026-09-07 片岡さん「左寄り過ぎて、見づらい」。ヒーローの文字の左端を、ヘッダー内容（max-width 1440px・中央寄せ）の左端に揃える。
   広い画面では左右の余白ぶん内側に入り、1400px以下では従来どおり。 */
.pz__l{padding-left:max(clamp(40px,5vw,80px), calc((100vw - 1440px) / 2 + clamp(24px,3.5vw,52px)))}
.pz__l{padding-right:clamp(32px,4vw,64px)}
/* 2026-09-07 片岡さん「こういう文字が小さくて、おじちゃまには見えない」→ ヒーローの一文とボタンを大きく。小さい文字の下限も一段上げる */
.pz__sub{font-size:clamp(17px,1.45vw,25px);line-height:1.9}
.pz__sub span{font-size:clamp(17px,1.45vw,25px);line-height:1.9}
.pz__cta a{min-height:60px;padding:0 32px;font-size:clamp(16px,1.2vw,19px)}
.hd__nav a .nv__ja{font-size:16px}
/* 下限: 14→15.5 / 14.5→16 / 15.5→17 */
.story-hero__kicker{font-size:15.5px!important}
.tchr__name small,.tcase__name span,.about__name small,.about__role,.flow__dur small,.tcase__lb,.case__facts span,
.flow--timeline .flow__n,.flow--timeline .flow__n span,.own__bar span,.own__total-n span,.own__note,.roi-ex__note,.roi-ex__note span,.fig__before span,.fig__after span,
.ft__addr,.ft__tel,.ft__map b,.prg__pre-lb em,.flow__pre em,.cta p.cta__tel small,.cmp__head span,.roi-ex__fields label span,.cta-choice__tab small{font-size:15.5px}
.tcase__made li,.roi-ex__d,.roi-ex__d span,.josei__card .note,.form__direct,.form__direct a,.ft__map a,.tchr__bio,.form__row label .req{font-size:16px}
.tchr__pts span,.roi-ex__k,.flow__d,.cmp__a,.own__d,.about__txt,.prg__three--detail ul li,.prg__pre-i p:last-child,.about__dl div,.cmp__b,.faq2__i p,.tchr__pts b,.prg__list span{font-size:17px}
.cmp__b b:first-child{font-size:clamp(20px,1.8vw,25px)}
.own__bar span b{font-size:17px}
.cta p.cta__tel{font-size:17px}
.form__submit,.hd__nav a.hd__demo{font-size:17px}
.roi-ex__fields label small{font-size:13.5px}
.nv__en{font-size:10.5px}
/* 大きくしたら1語だけの行（「作成。」「です。」）ができたので、行分けをやめて流し込む */
.pz__sub span{display:inline;margin-top:0}
.pz__sub{font-size:clamp(17px,1.35vw,23px);max-width:34em}
@media (max-width:680px){ .home .hero.pz .story-hero__kicker{letter-spacing:.12em} }  /* 「AI／研修」で割れないように */

/* ============================================================
   2026-09-08 名刺レイヤー v2（片岡さん「全て名刺のデザインにしてって言ったよね？ファーストビュー以外のデザインが全てしょぼい」）
   ファーストビューだけにあった名刺の部品を、下の全章に通す。
     ・プリズムの地（薄い）＋白い星座の線と点
     ・左端の珊瑚のシーム（5px）
     ・見出しの下に珊瑚の太いバー（名刺の「AIって魔法だ。」の下線）
     ・面は白、1px罫、2px角、影なし、左に珊瑚の縦バー（名刺の「｜株式会社レアスリー」）
     ・番号は明朝で大きく珊瑚
   このレイヤーより後に章の装飾を書かない。
   ============================================================ */
:root{
  --mz-const:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'><g stroke='%23FFFFFF' stroke-width='1.2' opacity='.9' fill='none'><line x1='120' y1='60' x2='260' y2='140'/><line x1='260' y1='140' x2='210' y2='300'/><line x1='260' y1='140' x2='430' y2='90'/><line x1='430' y1='90' x2='520' y2='210'/><line x1='520' y1='210' x2='700' y2='160'/><line x1='700' y1='160' x2='820' y2='60'/><line x1='700' y1='160' x2='760' y2='340'/><line x1='210' y1='300' x2='380' y2='420'/><line x1='380' y1='420' x2='520' y2='210'/><line x1='380' y1='420' x2='560' y2='520'/><line x1='760' y1='340' x2='560' y2='520'/><line x1='60' y1='480' x2='210' y2='300'/></g><g fill='%23FFFFFF' opacity='.95'><circle cx='120' cy='60' r='3.6'/><circle cx='260' cy='140' r='4.4'/><circle cx='210' cy='300' r='3.2'/><circle cx='430' cy='90' r='4.8'/><circle cx='520' cy='210' r='3.8'/><circle cx='700' cy='160' r='4.5'/><circle cx='820' cy='60' r='3'/><circle cx='760' cy='340' r='4'/><circle cx='380' cy='420' r='4.6'/><circle cx='560' cy='520' r='3.4'/><circle cx='60' cy='480' r='2.8'/></g></svg>");
}
/* 章の地。暗い章（実績・問い合わせ）には敷かない */
main > section.sec:not(.sec--dark):not(.proof-story){position:relative;isolation:isolate;overflow:hidden;background:var(--pz-cream,#FAF4EF)}
main > section.sec:not(.sec--dark):not(.proof-story)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    var(--mz-const) right -60px top -40px / 900px 600px no-repeat,
    radial-gradient(52% 60% at 104% 0%,   rgba(206,192,230,.78) 0%, rgba(206,192,230,0) 62%),
    radial-gradient(44% 52% at 108% 42%,  rgba(250,172,162,.66) 0%, rgba(250,172,162,0) 64%),
    radial-gradient(46% 50% at 96% 96%,   rgba(242,215,225,.70) 0%, rgba(242,215,225,0) 62%),
    radial-gradient(48% 56% at -8% 92%,   rgba(206,229,233,.74) 0%, rgba(206,229,233,0) 64%),
    radial-gradient(38% 46% at -10% 12%,  rgba(225,240,240,.70) 0%, rgba(225,240,240,0) 60%)}
main > section.sec:not(.sec--dark):not(.proof-story)::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pz-coral,#E97861);z-index:2}
main > section.sec:not(.sec--dark):not(.proof-story) > *{position:relative;z-index:1}
main > section.sec.sec--alt:not(.sec--dark){background:#fff}
main > section.sec.sec--alt:not(.sec--dark)::before{opacity:.55}

/* 見出し＝名刺の「AIって魔法だ。」。明朝・大きく・下に珊瑚の太いバー */
.sec .h2{position:relative;color:var(--pz-ink,#3F3733);font-family:var(--serif);font-weight:600;letter-spacing:.04em;line-height:1.35;padding-bottom:0;border:0;margin-bottom:0}
.sec .h2::before{content:none}
.sec .h2::after{content:"";display:block;position:static;width:clamp(150px,16vw,230px);height:clamp(10px,1.05vw,13px);background:var(--pz-coral,#E97861);margin:clamp(20px,2.4vw,30px) 0 0;border:0;border-radius:0;transform:none;opacity:1}
.sec .h2 + *{margin-top:clamp(28px,3vw,40px)}
.sec .h2 em{font-style:normal;color:var(--pz-coral-dk,#C04931)}

/* 面（カード）。白・1px罫・2px角・影なし・左に珊瑚の縦バー */
.prg__three>li,.prg__pre-i,.cmp__row,.faq__i,.faq2__i,.grant__box,.sec article,.sec .card,.sec .uc__card,.value__i,.roi-ex .box,.about__box{
  background:#fff!important;border:1px solid var(--pz-rule,#E3D9CF)!important;border-left:5px solid var(--pz-coral,#E97861)!important;
  border-radius:2px!important;box-shadow:none!important}
.prg__three>li,.prg__pre-i,.cmp__row,.faq__i,.grant__box,.sec article{padding:clamp(24px,2.6vw,36px) clamp(22px,2.6vw,36px)}
.prg__three>li>span,.prg__pre-n,.cmp__k>span,.faq__q i{display:block;font-family:var(--serif)!important;font-size:clamp(34px,3.2vw,48px)!important;line-height:1!important;font-weight:600;color:var(--pz-coral-dk,#C04931)!important;background:transparent!important;border:0!important;border-radius:0!important;width:auto!important;height:auto!important;min-width:0!important;padding:0!important;margin:0 0 12px!important;letter-spacing:.02em}
.prg__three>li>b,.prg__pre-i h3,.cmp__k{font-family:var(--serif);font-size:clamp(21px,1.9vw,27px);font-weight:600;color:var(--pz-ink,#3F3733);line-height:1.45}
.prg__three>li ul{margin-top:16px;padding-left:0;list-style:none}
.prg__three>li ul li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--pz-rule,#E3D9CF);font-size:16px;line-height:1.85;color:var(--pz-body,#70645E)}
.prg__three>li ul li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:3px;background:var(--pz-coral,#E97861);border-radius:0}
.prg__three>li ul li::marker{content:""}

/* ラベルの帯（名刺の「事業内容：」）: 珊瑚の文字＋左に縦バー */
.prg__pre-lb span,.cmp__head span,.prg__pre-lb em{border-radius:2px!important;box-shadow:none!important}
.prg__pre-lb span{padding-left:14px;border-left:4px solid var(--pz-coral,#E97861);color:var(--pz-ink,#3F3733);font-family:var(--serif);font-size:clamp(22px,2vw,28px);font-weight:600;background:transparent!important}
.prg__pre-lb em{background:var(--pz-coral-dk,#C04931)!important;color:#fff!important;font-style:normal}

/* 角丸のボタン・チップは名刺に無い。2px角・珊瑚 */
.sec .prg__link,.sec .btn,.sec a.btn,.sec button{border-radius:2px!important}
.sec .prg__link--main{background:var(--pz-coral-dk,#C04931)!important}
.sec .prg__link:not(.prg__link--main){box-shadow:inset 0 0 0 1px var(--pz-ink,#3F3733)!important;background:#fff!important}
/* 名刺レイヤー v2 追記: ○×の丸印は名刺に無い → 珊瑚の角バー（左）に置き換え。事前支援の外枠は二重になるので消す */
.cmp__a::before,.cmp__b::before{content:""!important;width:4px!important;height:auto!important;top:clamp(18px,2vw,26px)!important;bottom:clamp(18px,2vw,26px)!important;left:clamp(14px,1.6vw,22px)!important;border-radius:0!important;border:0!important;background:#B9AEA6!important;box-shadow:none!important;font-size:0!important;line-height:0!important}
.cmp__b::before{background:var(--pz-coral,#E97861)!important}
.cmp__a,.cmp__b{padding-left:clamp(34px,3vw,44px)!important}
.prg__pre{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
/* 名刺レイヤー v2 追記（2026-09-08 片岡さん「文字小さいな」）: スマホの文字の床。本文17px以上・小見出し20px以上 */
@media (max-width:640px){
  main .sec p,main .sec li,main .sec dd,main .sec td,main .sec span:not(.nb),main .sec small,main .sec .lede{font-size:17px!important;line-height:1.9!important}
  main .sec li>b,main .sec h3,main .sec .tchr__pts b,main .sec .cmp__b b,main .sec .prg__three>li>b,main .sec .prg__pre-i h3{font-size:20px!important;line-height:1.6!important}
  main .sec .tchr__name{font-size:24px!important}
  main .sec .tchr__pts li{padding:18px 0!important}
  main .sec .h2{font-size:clamp(30px,8.6vw,38px)!important}
  main .sec .eyebrow,main .sec .prg__pre-lb em{font-size:15px!important}
  main .sec .prg__three>li>span,main .sec .prg__pre-n,main .sec .cmp__k>span{font-size:40px!important}
  #aichat:not(.is-gate):not(.is-wide) .aichat__box{height:min(560px,calc(100vh - 16px))}
}
/* 名刺レイヤー v2 追記②（2026-09-08 目視QAの指摘）: 珊瑚以外の色の線・丸装飾・落ち影・丸ピルを全ページで消す */
:root{--amber-500:#E97861;--amber-400:#E97861;--amber-100:#FBE6E1;--blue-200:#E97861;--lavender-200:#E97861}
main section,main .hero,main .cta,main .band,main .story-hero{border-image:none!important}
main section[style*="border"],main .hero,main .cta{border-color:var(--pz-coral,#E97861)!important}
.cta h2{text-shadow:none!important}
.cta::before,.cta::after{content:none!important}
.cta h2::after{background:var(--pz-coral,#E97861)!important;border-radius:0!important;width:clamp(150px,16vw,230px)!important;height:clamp(10px,1.05vw,13px)!important}
.price__row:not(:first-child) .price__v::after{background:var(--pz-coral,#E97861)!important}
.svc::before{background:var(--pz-coral,#E97861)!important}
.steps li::before,.tchr__pts li::before{background:var(--pz-coral,#E97861)!important;box-shadow:none!important;border-radius:0!important}
main .sec :is(span,em,small,i,a,p,li,div,button,input,textarea,label,dt,dd,b)[class]{border-radius:2px!important}
main .sec button,main .sec .btn,main .sec a.btn,.cta button,.cta .form__submit{border-radius:2px!important}
main .sec img{border-radius:2px!important}
/* 小さい補助文の床（PC）: 15.5px */
main .sec small,main .sec .note,main .sec figcaption,main .sec .price__note,main .sec [class*="note"],main .sec [class*="sub"],main .sec [class*="cap"]{font-size:max(15.5px,1em)}
main .sec p,main .sec li{font-size:max(17px,1em)}
/* 名刺レイヤー v2 追記③（2026-09-08 目視QA 3名の指摘を集約）
   ・.sec 以外の章（roi/case/chiba の独自セクション）にも珊瑚の縦帯・2px角・影なし・文字の床を通す
   ・角丸14pxのカードと落ち影（roi）、見出しの文字影、フッターの青灰の罫線を消す */
main > section:not(.hero):not(.story-hero):not(.pz):not(.cta){position:relative}
main > section:not(.hero):not(.story-hero):not(.pz):not(.cta):not(.sec--dark):not(.proof-story)::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pz-coral,#E97861);z-index:2;pointer-events:none;border:0;border-radius:0;transform:none;opacity:1;height:auto}
@media (max-width:640px){main > section:not(.hero):not(.story-hero):not(.pz):not(.cta)::after{width:3px}}
main section:not(.hero):not(.story-hero):not(.pz) :is(div,article,section,p,span,em,small,i,a,li,button,input,textarea,select,label,dt,dd,b,figure,figcaption,summary)[class]{border-radius:2px!important;box-shadow:none!important}
main section:not(.hero):not(.story-hero):not(.pz) :is(h1,h2,h3,h4){text-shadow:none!important}
main section:not(.hero):not(.story-hero):not(.pz) :is(button,a.btn,.btn,[class*="btn"],[class*="chip"],[class*="tag"],[class*="badge"],[class*="pill"]){border-radius:2px!important}
main section:not(.hero):not(.story-hero):not(.pz) :is(p,li,dd,td,small,figcaption,label){font-size:max(15.5px,1em)}
main section:not(.hero):not(.story-hero):not(.pz) :is(p,li){font-size:max(17px,1em)}
main section:not(.hero):not(.story-hero):not(.pz) :is(h2,.h2)::after{background:var(--pz-coral,#E97861)}
.ft,.ft *{border-color:var(--pz-rule,#E3D9CF)!important}
.ft [class*="line"],.ft hr{background:var(--pz-rule,#E3D9CF)!important}

/* ============================================================
   2026-09-09 ヘッダーを実ページ直結の6項目にしたことへの追従
   ------------------------------------------------------------
   項目が1つ増え、961〜1180px で「導入／事例」「料金・助／成金」のように
   語の途中で折り返していた。ラベルは折り返さず、その幅だけ間隔と
   左右の余白を詰めて収める（バーガーメニューへの切替は 960px のまま）。
   ============================================================ */
.nv__ja,.nv__en{white-space:nowrap}
@media (min-width:961px) and (max-width:1180px){
  .hd__nav{gap:clamp(10px,1.2vw,18px)}
  .hd__nav a:not(.hd__cta):not(.hd__demo):not(.hd__regional){padding:6px 4px}
}

/* ============================================================
   2026-09-09 ファーストビューを動画に（片岡さん「ファーストビューに動画を差し込みたい」）
   ------------------------------------------------------------
   器は写真のときと同じ（絶対配置・cover・52%基準）。動画が読めない環境では
   poster がそのまま残るので、絵が消えることはない。
   動きを減らす設定の人には再生させない（app.js が data-mo-off を付ける）。
   ============================================================ */
.pz__r .pz__vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:52% 50%; background:#FAF4EF;
}
/* 2026-09-09 修正: 写真から流用したフェードイン（is-ready + is-loaded で opacity 0→1）は、
   実ブラウザで opacity:0 のまま解けず、ヒーロー右半分が真っ白になった。
   動画は poster が最初から描かれるので、そもそも「パッと出る」問題が無い。演出をやめて常に表示する。 */
.pz__r .pz__vid{opacity:1}

/* ============================================================
   2026-09-09 実画面検証の指摘（3・4）への対応
   ============================================================ */

/* ── 3. スマホで固定ボタンが重なっていた ──────────────────
   下部の .mcta（電話／無料で相談する）が主導線。AI相談のバーは
   以前その上に重なり、「無料で相談する」の中心のタップまで奪っていた。
   AI相談は .mcta の上へ、小さく置く。 */
@media (max-width:680px){
  #aichat.is-min{
    left:auto !important; right:12px !important;
    bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
    width:auto !important;
  }
  #aichat.is-min .aichat__bar{
    min-width:0; font-size:14px; letter-spacing:.04em; padding:10px 15px;
    box-shadow:0 8px 22px rgba(192,73,49,.26);
  }
  #aichat.is-min .aichat__bar small{font-size:10.5px}
  /* 固定要素の逃げ。フッターと本文の末尾が隠れないように */
  body{padding-bottom:150px}
}

/* ── 4. 研修内容の番号が数字の途中で改行されていた ────────
   .prg__three の span（01・02・03）が flex の縮小対象になり、
   スマホで「0」「1」の縦2行になって li の高さが214pxまで伸びていた。 */
.prg__three li > span{white-space:nowrap; flex:0 0 auto; line-height:1.15}
/* 番号は1行に収まったが、本文の行間(1.9)を引き継いで40pxの文字に76pxの行が付き、
   行そのものが高くなっていた。番号だけ行間を締める。 */

/* ============================================================
   2026-09-09 実画面検証の指摘（デザインの仕上げ）
   ------------------------------------------------------------
   文言は削らない。効かせるのは「大きさ・濃さ・幅・余白」だけ。
   ============================================================ */

/* ── 比較表: 結論と補足の主従をはっきりさせる ──────────────
   実測で結論23.04px／補足21px（比1.10）しかなく、一覧で特徴をつかめなかった。
   結論を一段大きく行として独立させ、補足は落ち着いた濃さにする。 */
.cmp__b b:first-child{
  display:block; margin-bottom:12px;
  font-size:clamp(23px,2.15vw,29px)!important; line-height:1.5;
  color:var(--pz-ink,#3F3733);
}
.cmp__b{line-height:1.95; color:#59504A}
.cmp__a{color:#6E645D}
/* 見出し列を締めて、当社の説明に幅を回す（実測 299/352/504 → おおよそ 250/330/560） */
@media (min-width:961px){
  .cmp__head,.cmp__row{grid-template-columns:minmax(170px,.78fr) minmax(0,1.05fr) minmax(0,1.8fr)}
  .cmp__row{padding-block:clamp(18px,1.9vw,24px)}
}
@media (max-width:960px){
  main .sec .cmp__b b{display:block;margin-bottom:10px;font-size:22px!important;line-height:1.55!important}
}

/* ── 判断が要る章は、背景の模様を静かにする ────────────────
   比較（#why）・費用対効果（#numbers）・助成金（#josei）・問い合わせ（.cta）と
   料金ページは、情報そのものの差を読ませたい場所。網目の図版が重なると読み取りを邪魔する。
   模様そのものは残し、濃さだけ落とす。 */
#why::before,#numbers::before,#josei::before{opacity:.18!important}
.cta::before{opacity:.22!important}
#price::before,#grant::before,.sec--faq::before{opacity:.2!important}

/* 2026-09-09 比較表の見出し列: 改行防止の span.nb に、番号(01/02)用の
   .cmp__k>span{font-size:clamp(34px,3.2vw,48px)!important} が当たり、
   「受講者さん1人1人への介入の深さ」の「1人1人」だけが巨大になっていた。
   2026-09-08 に入れた .cmp__k .nb は !important に負けていたので、同じ強さで書き直す。 */
.cmp__k > span.nb{
  display:inline!important; font-size:inherit!important; font-weight:inherit!important;
  line-height:inherit!important; color:inherit!important; letter-spacing:inherit!important;
  margin:0!important;
}

/* 2026-09-09 夜 提供価値02の但し書き（人件費＝解雇ではない）。
   読み飛ばされると誤解になる一文なので、本文と同じ大きさのまま、
   名刺の珊瑚の縦バーで「ここは注記」と分かる形にする。 */
.value__note{
  margin-top:clamp(16px,1.8vw,22px);
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.8vw,22px);
  border-left:5px solid var(--pz-coral,#E97861);
  background:var(--pz-card,#FFFDF9);
  line-height:1.95;
}
.value__note b{color:var(--pz-coral-dk,#C04931)}

/* ============================================================
   2026-09-09 夜 AI活用支援事例（case.html #aicase）
   ------------------------------------------------------------
   片岡さんからいただいた23件。名刺の規則で組む。
   面は白・1px罫・2px角・影なし・左に珊瑚の縦バー。
   ============================================================ */
.aicase__grid{
  list-style:none; margin:clamp(28px,3vw,42px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.aicase__i{
  position:relative; background:var(--pz-card,#FFFDF9);
  border:1px solid var(--pz-rule,#E3D9CF); border-radius:2px;
  padding:clamp(20px,2vw,26px) clamp(18px,1.8vw,24px) clamp(20px,2vw,26px) clamp(26px,2.4vw,32px);
}
.aicase__i::before{
  content:""; position:absolute; left:0; top:clamp(18px,1.8vw,22px); bottom:clamp(18px,1.8vw,22px);
  width:4px; background:var(--pz-coral,#E97861);
}
.aicase__i b{
  display:block; margin-bottom:9px;
  font-family:var(--serif); font-size:clamp(18px,1.55vw,21px); font-weight:600;
  line-height:1.5; color:var(--pz-ink,#3F3733);
}
.aicase__i p{font-size:16px; line-height:1.85; color:#59504A}
.aicase__i b + p b{color:var(--pz-coral-dk,#C04931); font-size:inherit; display:inline; margin:0}
@media (max-width:960px){ .aicase__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){
  .aicase__grid{grid-template-columns:1fr}
  .aicase__i p{font-size:17px}
}