/* ============================================================
   BENTO トップ 見た目の微調整（2026-09 試行）
   構成・文面は変えず、色・角丸・影・動きだけを上書きする。
   外すときは index.html の <link href="/assets/refresh.css"> を消すだけで元に戻る。
   方針:
   1) 地色を「生成りの紙」に寄せ、罫線も温かい灰に（人の手の質感）
   2) 第二の色として苔色を、節番号・見出し前の小ラベルにだけ使う（藍=行動、苔=案内）
   3) 「AIが作ったサイト」に見えやすい癖を弱める
      - ホバーで浮き上がる動き → 枠線の色だけ変える
      - スクロールで30px持ち上がる登場演出 → 小さく短く
      - 大きく濃い影・カードごとに違う角丸 → 影は薄く、角丸は10pxに統一
   ============================================================ */
:root{
  --cream:#FBF8F1;               /* 生成り（旧 #FAFAF8） */
  --cream2:#F3EDE0;              /* 濃い生成り（旧 #F1F0EC） */
  --gray:#E4DCCB;                /* 温かい罫線（旧 #E6E6E4） */
  --hair:rgba(70,56,32,.15);     /* 温かいヘアライン */
  --paper:#FFFDF8;               /* カードの白（純白をやめる） */
  --moss:#4F6B4A;                /* 苔色：案内の色 */
  --moss-bg:#E6ECE0;
  --sand:#E9DFCC;                /* 砂色 */
}

/* 1) カードの白を紙の白に */
.pillar,.stance__card,.hub-scard,.door,.who-pick a,.docmock__paper,.docmock__note,.docmock__stamp,
.senbiki,.flow4__node,.rolefig__node,.change__col,.quick__card,.security-rung,.ins-list li{background:var(--paper)}
.hub-scard .thumb,.docmock__table span:nth-child(-n+3){background:var(--cream2)}
.docmock__table span{background:var(--paper)}
.docmock__lines i{background:#E6DFD1}

/* 2) 苔色は「案内」だけに使う（ボタン・リンクは藍のまま） */
.knum,.hero__k,.sect-k,.stance__n,.doors-h{color:var(--moss)}
.docmock__stamp::before{background:var(--moss-bg);color:var(--moss)}
.steps3 li{background:var(--moss-bg)}

/* 3-a) ホバーで浮かせない */
.pillar:hover,.hub-scard:hover,.tool3__c:hover,.sd-entry__card:hover{transform:none}

/* 3-b) 登場演出を控えめに */
.rv{transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.rv.in{transform:none}

/* 3-c) 角丸を10pxに統一（ボタンの丸型はブランド規約どおり残す） */
.pillar,.stance__card,.senbiki,.flow4__node,.rolefig__node,.change__col,
.security-rung,.quick__card,.ins-list li,.hub-scard,.who-pick a{border-radius:10px}
.ctacard{border-radius:12px}

/* 3-d) 影を薄く（紙が机に置かれている程度） */
.docmock__paper{box-shadow:0 6px 20px rgba(60,48,28,.07)}
.docmock__tag,.docmock__stamp{box-shadow:0 2px 8px rgba(60,48,28,.10)}
.docmock__note{box-shadow:0 4px 14px rgba(60,48,28,.09)}
.docmock__paper::before{width:3px}

/* 締めの帯：藍の上に苔色をうっすら */
.ctacard::before{background:
  radial-gradient(60% 90% at 90% 100%,rgba(122,150,112,.28),transparent 70%),
  linear-gradient(180deg,rgba(27,58,92,.55),rgba(27,58,92,.86))}


/* ============================================================
   大手ファーム型の仕上げ（2026-09-29 施主採用：旧 mix-d 版）
   借りたもの: 白黒の高いコントラスト／黒いヘッダー帯／見出しは端正なゴシック（700）／
              節ラベルを藍の色帯に／角ばったカード・影なし／黒の主ボタン
   借りないもの: 他社のロゴ・緑の点・緑の色帯（他社ブランドの識別要素のため藍に置換）
   ============================================================ */
:root{--cream:#FFFFFF;--cream2:#F4F4F2;--paper:#FFFFFF;--ink:#000000;--sub:#3C3C3C;--note:#63666A;--hair:rgba(0,0,0,.16);--gray:#D0D0CE}
body:not(.play){background:#fff}
.site-hd,.site-hd--solid{background:#000!important;color:#fff!important;border-bottom:0}
.site-hd .logo,.site-hd .right a,.site-hd .menu-btn{color:#fff!important}
.site-hd .hd-nav a{color:#fff}
/* スマホの現在地のタブ：黒いヘッダーの上で白地×黒文字（site.css の対応表が --nav-on-* を使う） */
.site-hd{--nav-on-bg:#fff;--nav-on-fg:#000}
.hero h1,.sect-head h2,.ctacard h2,.stance__card h3,.pillar h3,.people__quote,.docmock__title,
.hub-hero h1,.hub-h2,.phero h1{font-family:"Noto Sans JP","Hiragino Sans",sans-serif!important;font-weight:700;letter-spacing:0;line-height:1.4}
.hero h1{font-size:clamp(30px,4vw,48px)}
.sect-head h2{font-size:clamp(26px,3.2vw,40px)}
.hero{background:#fff;border-bottom:1px solid var(--hair)}
.hero__k{color:#000}
.sect-k{display:inline-block;background:var(--brand);color:#fff!important;padding:6px 14px;letter-spacing:.08em;font-size:13px}
.pillar,.stance__card,.hub-scard,.senbiki,.flow4__node,.rolefig__node,.change__col,.who-pick a,.docmock__paper,.docmock__note,.quick__card,
.security-rung,.ins-list li,.hub-card,.mod,.tier,.step{border-radius:2px!important;box-shadow:none!important}
.docmock__tag,.docmock__stamp,.docmock__note{box-shadow:none!important}
.docmock__paper{border-color:#000}
body:not(.play) .pill{background:#000;color:#fff}
body:not(.play) .pill:hover{background:var(--brand)}
.ctacard{border-radius:0}
body:not(.play) .ctacard::before{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.82))!important}
.hub-scard .meta b{color:#000;font-weight:700}
/* スマホのヘッダー：メニューの丸ボタンを黒地に白い輪郭へ（白地×白文字で読めなくなるのを防ぐ） */
.site-hd .hd-nav a{background:transparent;border-color:rgba(255,255,255,.45)}
/* 各ページの大見出しもゴシックに統一（写真帯のコンセプト文だけ明朝を残す） */
main h1:not(.photo-band h1),main h2:not(.photo-band h2){font-family:"Noto Sans JP","Hiragino Sans",sans-serif!important;font-weight:700;letter-spacing:0}

/* ---- 遊べる層（サンプル・診断・小さな会社・試算ツール）：黒×琥珀の盤面を、他ページと同じ白黒＋藍に（2026-09-29 施主指示）
   play.css の部品は色変数で塗られているので、変数を明るい配色に差し替え、光る影と琥珀の縁だけ個別に消す ---- */
.play:not(body){
  --ink:#000;--ink-soft:#3C3C3C;--ink-faint:#5F6266;
  --board:#fff;--panel:#fff;--panel-2:#F4F4F2;
  --amber:#1B3A5C;--amber-deep:#122A44;--cyan:#1B3A5C;--green:#1E6B3F;--red:#B3352C;
  --line:rgba(0,0,0,.16);--line-strong:rgba(0,0,0,.32);
  --paper:#fff;--paper-ink:#000;--paper-soft:#3C3C3C;
  background:#fff;color:#000}
.play:not(body) .eyebrow{color:#5F6266!important;letter-spacing:.1em}
.play:not(body) h1,.play:not(body) h2,.play:not(body) h3,.play:not(body) h4{color:#000}
.play:not(body) em{color:#1B3A5C;font-style:normal}
.play:not(body) .chip,.play:not(body) .masu{background:#fff;color:#000;border:1px solid rgba(0,0,0,.25);border-radius:2px;box-shadow:none}
.play:not(body) .chip:hover,.play:not(body) .masu:hover{border-color:#000}
.play:not(body) .chip[aria-pressed="true"],.play:not(body) .masu.active{background:#1B3A5C!important;color:#fff!important;border-color:#1B3A5C!important;box-shadow:none!important}
.play:not(body) .hanko{background:#F4F4F2;color:#1B3A5C;border-color:rgba(27,58,92,.35)}
.play:not(body) .room-head .num{background:#1B3A5C;color:#fff;border-radius:0;font-family:"Noto Sans JP",sans-serif}
.play:not(body) .room-head .num::before{content:""}
.play:not(body) .tag,.play:not(body) .card{background:#fff;color:#000;border:1px solid rgba(0,0,0,.18);border-radius:2px;box-shadow:none}
.play:not(body) .price,.play:not(body) #pick-n{color:#1B3A5C}
.play:not(body) .note,.play:not(body) .pick__hint,.play:not(body) .room-lead{color:#3C3C3C}
.play:not(body) .btn.primary{background:#1B3A5C;color:#fff;box-shadow:none;border-radius:2px}
.play:not(body) .btn.ink{background:#000;color:#fff;box-shadow:none;border-radius:2px}
.play:not(body) .btn.primary:active,.play:not(body) .btn.ink:active{transform:none}
.play:not(body) .counter .c.hu{border-color:rgba(27,58,92,.45)}
/* 見やすさ：本文・注記を少し大きく、行間を広く */
.play:not(body){font-size:16px;line-height:1.85}
.play:not(body) .note,.play:not(body) .room-lead,.play:not(body) small{font-size:max(13.5px,1em)}
/* サンプルページの選択画面は薄い灰色の面で区切る */
.pick.play{background:#F4F4F2!important;background-image:none!important;border-block:1px solid rgba(0,0,0,.16)}
/* 進み具合のバー（.board）：黒地をやめ、白地に細い罫線。現在地は藍・白文字 */
.play:not(body) .board,.play:not(body).board,.board{background:#fff!important;border-bottom:1px solid rgba(0,0,0,.16)!important;box-shadow:none!important}
.play:not(body) .masu b::before{content:""}
.play:not(body) .masu.active b,.play:not(body) .masu.active span{color:#fff!important}
/* 相談の締め枠（.hub-ctacard）も他ページとそろえる：角ばらせ、見出しはゴシック、主ボタンは白地 */
.hub-ctacard{border-radius:0!important;box-shadow:none!important}
.hub-ctacard h2,.ctacard h2{font-family:"Noto Sans JP","Hiragino Sans",sans-serif!important;font-weight:700}
.hub-ctacard .pill,.ctacard .pill{background:#fff!important;color:#000!important}

/* ============================================================
   余白を広く・すっきり（2026-09-29 施主指示：LayerX のような広さ）
   文面・部品は変えず、余白・見出しの大きさ・区切り線の量だけで調整する
   ============================================================ */
/* 節の間をたっぷり空け、節ごとの区切り線を消す（余白で区切る） */
.sect{padding:160px 0;border-bottom:0}
.sect-head{margin-bottom:64px;max-width:820px}
.sect-head h2{font-size:clamp(30px,3.8vw,50px);line-height:1.35}
.sect-head p{font-size:17px;line-height:2;margin-top:20px}
/* 最初の画面：上下を広く、見出しを大きく、注記は控えめに */
.hero{border-bottom:0}
.hero__in{padding-top:128px;padding-bottom:128px;gap:88px}
.hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.3;margin-bottom:28px}
.hero__lead{font-size:18px;margin-bottom:40px}
.hero__note{font-size:12.5px;color:var(--note);opacity:.85}
.hub-hero{padding-top:120px!important;padding-bottom:96px!important}
.hub-hero h1{font-size:clamp(32px,4.2vw,54px)!important;line-height:1.3}
.hub-h2{margin-top:24px}
/* カードは線を薄く、内側を広く */
.pillar,.stance__card,.hub-scard,.senbiki,.flow4__node,.rolefig__node,.change__col,.quick__card,.security-rung,.ins-list li{border-color:rgba(0,0,0,.09)!important}
.pillar,.stance__card{padding:40px 36px 34px!important}
.pillars,.stance{gap:28px!important}
.hub-scards{gap:28px!important}
/* 締めの帯も広く */
.ctasec{padding-bottom:160px}
.ctacard{padding:112px 48px}
/* スマホは広げすぎない */
@media (max-width:900px){
  .sect{padding:96px 0}
  .sect-head{margin-bottom:40px}
  .hero__in{padding-top:72px;padding-bottom:72px;gap:48px}
  .hub-hero{padding-top:72px!important;padding-bottom:56px!important}
  .pillar,.stance__card{padding:28px 24px 24px!important}
  .ctasec{padding-bottom:96px}
  .ctacard{padding:64px 24px}
}

/* ============================================================
   ヘッダーの「実例と道具」メニュー（2026-09-29 施主指示：LayerX の「私たちについて」型）
   パソコン：マウスを乗せる／Tabで移ると、ページ内の見出しへのリンクが下に開く
   スマホ（1023px以下）：今までどおりタブを押すとページへ移動（メニューは出さない）
   ============================================================ */
.hd-dd{position:relative;display:inline-flex;align-items:center}
.hd-dd > a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.8}
.hd-dd__panel{position:absolute;top:100%;left:-24px;margin-top:18px;display:grid;grid-template-columns:repeat(3,210px);width:max-content;gap:8px 36px;
  padding:28px 32px 30px;background:#fff;color:#000;border:1px solid rgba(0,0,0,.12);box-shadow:0 16px 40px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60;white-space:normal}
/* マウスがヘッダーとメニューの間の隙間を渡っても閉じないように、見えない橋を掛ける */
.hd-dd__panel::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.hd-dd:hover .hd-dd__panel,.hd-dd:focus-within .hd-dd__panel{opacity:1;visibility:visible;transform:none}
.hd-dd__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.hd-dd__h{font-size:12px;letter-spacing:.12em;color:#63666A;font-weight:700;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid rgba(0,0,0,.12)}
.site-hd .hd-dd__panel a{color:#000!important;font-size:14px;font-weight:500;line-height:1.6;padding:7px 0;text-decoration:none;opacity:1}
.site-hd .hd-dd__panel a:hover,.site-hd .hd-dd__panel a:focus-visible{color:var(--brand)!important;text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion: reduce){.hd-dd__panel{transition:none}}
@media (max-width:1023px){
  .hd-dd{display:contents}
  .hd-dd > a::after{display:none}
  .hd-dd__panel{display:none!important}
}
/* メニューから飛んだ先の見出しが、上に固定したヘッダーの裏に隠れないように */
section[id]{scroll-margin-top:84px}

/* ============================================================
   各ページの節ラベルと、ヘッダー全タブのメニュー（2026-09-29）
   ============================================================ */
/* 列数の修飾：項目が少ないタブは2列に */
.hd-dd--2 .hd-dd__panel{grid-template-columns:repeat(2,220px)}
/* 1列（各タブ最大4項目・列見出しなし。2026-09-29 施主指摘「小見出しが多すぎる」への対応） */
.hd-dd--1 .hd-dd__panel{grid-template-columns:minmax(260px,max-content);gap:2px}
/* 右寄せの修飾（タブが画面右端に来る配置になったときに使う。いまはタブが左寄せなので未使用） */
.hd-dd--right .hd-dd__panel{left:auto;right:-24px}
/* 節ラベルは「私たちのこと」の手紙枠・チーム・会社情報でも同じ藍の帯で（縦並びの箱の中で幅いっぱいに伸びないように） */
.ab-letter .sect-k,.ab-team .sect-k,.ab-corp .sect-k{align-self:flex-start;margin-bottom:22px}
.ab-letter .sect-k{margin-bottom:4px}
/* 「私たちのこと」：節の間を他ページと同じ呼吸に（チーム・会社情報の上に余白） */
.about .ab-team{padding:120px 0 40px}
.about .ab-corp{padding:120px 0 40px}
.about .ab-team__head{margin-bottom:36px}
.about .ab-keep .k,.about .ab-think .k{font-size:13px;letter-spacing:.24em}
/* 「めざす姿」：本文が一段落だけの節（いま・次の一歩）は上下を少し詰めて間延びを防ぐ */
#ima.sect,#next.sect{padding:112px 0}
/* 「実例と道具」：④ 確かめる（畳んだ4節）の見出しに上の余白 */
#s4 .hub-knum{margin-top:40px}
/* メニューから飛ぶ先が、固定ヘッダーの裏に隠れないように（節以外の飛び先も） */
details[id],h3[id],.ab-team__head[id]{scroll-margin-top:84px}
@media (max-width:900px){
  .about .ab-team,.about .ab-corp{padding:72px 0 24px}
  #ima.sect,#next.sect{padding:80px 0}
}
/* 「サービス」「トップ」の線引き図：スマホでは仕切りが縦線の繰り返し（縞模様）に見えていた。
   site.css の @media 側が background 短縮形で repeat に戻していたため、1本の破線に戻す */
@media (max-width:760px){
  .senbiki__line{background-repeat:no-repeat;background-position:center}
}

/* ============================================================
   最初の画面の動き（2026-09-29 試作）
   「AIが下書き → 会計士がレビュー → 貴社が承認」を約4秒で一度だけ見せる。
   ・動くのは読み込み直後の1回だけ（ループしない）。最後は静止した完成状態で止まる
   ・動きを控える設定（prefers-reduced-motion）の人には動かさず、最初から完成状態を出す
   ・見出しの下に「線を引く」（サービスの考え方）を1本だけ描く
   ============================================================ */
@keyframes dm-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dm-fade{from{opacity:0}to{opacity:1}}
@keyframes dm-write{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dm-slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes dm-mark{from{outline-color:transparent;background:#E3E3DF}to{outline-color:#B9CBE0;background:#DCE6F2}}
@keyframes dm-stamp{0%{opacity:0;transform:rotate(-8deg) scale(2.2)}60%{opacity:1;transform:rotate(-8deg) scale(.92)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes dm-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
  .docmock.is-anim .docmock__paper{animation:dm-rise .6s ease-out both}
  .docmock.is-anim .docmock__tag--ai{animation:dm-rise .45s ease-out .35s both}
  .docmock.is-anim .docmock__lines i{transform-origin:left center;animation:dm-write .38s ease-out both}
  .docmock.is-anim .docmock__lines i:nth-child(1){animation-delay:.7s}
  .docmock.is-anim .docmock__lines i:nth-child(2){animation-delay:.95s}
  .docmock.is-anim .docmock__lines i:nth-child(3){animation:dm-write .38s ease-out 1.2s both,dm-mark .4s ease-out 2.5s both}
  .docmock.is-anim .docmock__lines i:nth-child(4){animation-delay:1.45s}
  .docmock.is-anim .docmock__lines i:nth-child(5){animation-delay:1.7s}
  .docmock.is-anim .docmock__table{animation:dm-fade .4s ease-out 1.95s both}
  .docmock.is-anim .docmock__meta span:nth-child(3){animation:dm-fade .3s ease-out 2.2s both}
  .docmock.is-anim .docmock__note{animation:dm-slide .5s ease-out 2.6s both}
  .docmock.is-anim .docmock__stamp{animation:dm-fade .3s ease-out 3.4s both}
  .docmock.is-anim .docmock__stamp i{animation:dm-stamp .45s cubic-bezier(.2,.8,.3,1.2) 3.5s both}
  .hero:has(.docmock) h1::after{animation:dm-line .7s ease-out 4.1s both}
}
/* 「線を引く」：見出しの下に藍の線を1本 */
.hero:has(.docmock) h1::after{content:"";display:block;width:88px;height:3px;background:var(--brand);margin-top:22px;transform-origin:left center}
/* もう一度見るボタン（控えめな文字リンク） */
.docmock__replay{display:block;margin:10px auto 0;background:none;border:0;padding:4px 6px;font:inherit;font-size:12.5px;color:var(--sub);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.docmock__replay:hover{color:var(--ink)}
.docmock__replay:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.docmock__replay{display:none}}

/* ============================================================
   スクロールの動き（2026-09-29 試作・assets/scroll-motion.js と対）
   図が画面に入ったときに一度だけ動く。html.sm が無い（JS無効・動き控えめ設定）ときは何も隠さない
   ============================================================ */
@keyframes sm-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sm-pop{0%{opacity:0;transform:scale(.85)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes sm-left{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes sm-right{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes sm-grow{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
/* 待機中（画面に入る前）は隠しておく */
.sm .sect-head:not(.is-in) > *,
.sm .change:not(.is-in) .change__col, .sm .change:not(.is-in) .change__arrow, .sm .change:not(.is-in) li,
.sm .senbiki:not(.is-in) > *,
.sm .hub-scards:not(.is-in) > *, .sm .pillars:not(.is-in) > *, .sm .stance:not(.is-in) > *, .sm .who-pick:not(.is-in) > *{opacity:0}
/* 節の見出し：藍の帯が左から引かれ、見出し・本文が順に上がる */
.sm .sect-head.is-in .sect-k{animation:sm-wipe .5s ease-out both}
.sm .sect-head.is-in h2{animation:sm-up .6s ease-out .15s both}
.sm .sect-head.is-in p{animation:sm-up .6s ease-out .3s both}
/* 「いま → 一緒に入れたあと」：左の作業が並び、矢印が出て、右の作業が1つずつ藍に変わる */
.sm .change.is-in .change__col{animation:sm-up .5s ease-out both}
.sm .change.is-in .change__col:first-child li{animation:sm-up .35s ease-out both}
.sm .change.is-in .change__arrow{animation:sm-left .4s ease-out .9s both}
.sm .change.is-in .change__col--after{animation-delay:1.05s}
.sm .change.is-in .change__col--after li{animation:sm-pop .38s ease-out both}
/* 「AIに任せる｜人が持つ」：左右から寄ってきて、真ん中の線が引かれる */
.sm .senbiki.is-in .senbiki__col--ai{animation:sm-left .6s ease-out both}
.sm .senbiki.is-in .senbiki__col--human{animation:sm-right .6s ease-out .15s both}
.sm .senbiki.is-in .senbiki__line{animation:sm-grow .55s ease-out .6s both;transform-origin:top center}
/* カードの並び：1枚ずつ少し遅れて上がる */
.sm .hub-scards.is-in > *, .sm .pillars.is-in > *, .sm .stance.is-in > *, .sm .who-pick.is-in > *{animation:sm-up .55s ease-out both}
/* 順番の遅れ（最大12個まで） */
.sm .is-in li:nth-child(1){animation-delay:.1s}.sm .is-in li:nth-child(2){animation-delay:.16s}.sm .is-in li:nth-child(3){animation-delay:.22s}
.sm .is-in li:nth-child(4){animation-delay:.28s}.sm .is-in li:nth-child(5){animation-delay:.34s}.sm .is-in li:nth-child(6){animation-delay:.4s}
.sm .is-in li:nth-child(7){animation-delay:.46s}.sm .is-in li:nth-child(8){animation-delay:.52s}.sm .is-in li:nth-child(9){animation-delay:.58s}
.sm .change.is-in .change__col--after li:nth-child(1){animation-delay:1.2s}.sm .change.is-in .change__col--after li:nth-child(2){animation-delay:1.3s}
.sm .change.is-in .change__col--after li:nth-child(3){animation-delay:1.4s}.sm .change.is-in .change__col--after li:nth-child(4){animation-delay:1.5s}
.sm .change.is-in .change__col--after li:nth-child(5){animation-delay:1.6s}.sm .change.is-in .change__col--after li:nth-child(6){animation-delay:1.7s}
.sm .change.is-in .change__col--after li:nth-child(7){animation-delay:1.8s}.sm .change.is-in .change__col--after li:nth-child(8){animation-delay:1.9s}
.sm .change.is-in .change__col--after li:nth-child(9){animation-delay:2s}
.sm .is-in > :nth-child(2){animation-delay:.12s}.sm .is-in > :nth-child(3){animation-delay:.24s}.sm .is-in > :nth-child(4){animation-delay:.36s}
.sm .is-in > :nth-child(5){animation-delay:.48s}.sm .is-in > :nth-child(6){animation-delay:.6s}

/* 全ページ共通の汎用ルール（scroll-motion.js が付ける .sm-group / .sm-self） */
.sm .sm-group:not(.is-in) > *{opacity:0}
.sm .sm-group.is-in > *{animation:sm-up .55s ease-out both}
.sm .sm-self:not(.is-in){opacity:0}
.sm .sm-self.is-in{animation:sm-up .6s ease-out both}

/* ============================================================
   写真の動き（2026-09-29 試作）
   ・各ページ上部の写真（.page-photo）：ゆっくり寄りながら少し横に流れる（映画の「ケン・バーンズ」手法）。24秒で往復、控えめ
   ・富士山などの写真帯（.photo-band）：スクロールに合わせて写真だけ少し遅れて動き、奥行きを出す（scroll-motion.js が位置を計算）
   ・動きを控える設定の人には、どちらも止めた写真を出す
   ============================================================ */
.page-photo picture,.page-photo{overflow:hidden}
@keyframes photo-drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion: no-preference){
  .page-photo img{animation:photo-drift 24s ease-in-out infinite alternate;transform-origin:60% 50%;will-change:transform}
  .photo-band img{transform:scale(1.18);will-change:transform}
}

/* 小見出し（節ラベル）を外した節は、直前の節の続きとして詰めて見せる（2026-09-29 小見出し整理） */
.sect:has(> .narrow > .sect-head):not(:has(.sect-k)){padding-top:40px}
@media (max-width:900px){.sect:has(> .narrow > .sect-head):not(:has(.sect-k)){padding-top:24px}}
/* ヘッダー右上の相談ボタン：黒いヘッダーの上では白地×黒文字（黒地×黒で消えていた不具合の修正） */
.site-hd .right .pill{background:#fff!important;color:#000!important}
.site-hd .right .pill:hover{background:#E8EDF3!important}
.site-hd .right .pill .arr{background:rgba(0,0,0,.08)}
/* 役割の図の「AI」の箱は藍地×白文字（紙の白で上書きして白地×白文字になり、空欄に見えていた不具合の修正） */
.rolefig__node--ai{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}

/* パンくず（2026-09-30）：下位ページで「どのタブの下にいるか」を示す帯。ヘッダーのすぐ下に1行 */
.crumbs{background:var(--cream2);border-bottom:1px solid var(--hair)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:12px 0;font-size:13px;line-height:1.6;color:var(--sub)}
.crumbs li+li::before{content:"／";margin:0 10px;color:var(--note)}
.crumbs a{color:var(--sub);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.25)}
.crumbs a:hover{color:var(--ink);text-decoration-color:currentColor}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:700}
/* ヘッダーのメニューを Esc で閉じた状態（partials/header.html のスクリプトが付け外しする） */
.hd-dd.hd-dd--closed .hd-dd__panel{opacity:0!important;visibility:hidden!important}
/* 「動きをもう一度見る」は、スクリプトが動いたときだけ出す（HTML では hidden で置く） */
.docmock__replay[hidden]{display:none}

/* hidden 属性の付いた要素は、部品の display 指定（例 .play .chip{display:flex}）より優先して必ず隠す（2026-10-01）。
   診断の3択の問いで、隠すはずの4つ目のボタンが前の問いの「わからない」を残したまま見えていた不具合の修正 */
[hidden]{display:none!important}