/* A 濃いグレー（フィルムの舞台の色）＝既定 */
:root{--bg:#1F1F22;--bg2:#27272B;--txt:#EDEDE9;--g1:#A3A5AB;--g2:#6B6D73;--line:#3A3A3F;--ease:cubic-bezier(.625,.05,0,1);--grain:.16;--vig:.55;--blend:screen}
/* B 薄いグレー（反転コマの色） */
body[data-tone="light"]{--bg:#E6E6E2;--bg2:#DCDCD8;--txt:#0E0E10;--g1:#55575D;--g2:#8A8C92;--line:#C8C8C4;--grain:.28;--vig:.22;--blend:multiply}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",system-ui,sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background-color .5s,color .5s}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 40px}
@media (max-width:760px){.wrap{padding:0 20px}}
header.site{position:absolute;top:0;left:0;right:0;z-index:20}
header.site .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
header.site img{height:32px;width:auto;display:block}
header.site img.k{display:none}
body[data-tone="light"] header.site img.w{display:none}body[data-tone="light"] header.site img.k{display:block}
nav.g{display:flex;gap:30px;font-size:14px;color:var(--g1)}
.pill{font-size:14px;font-weight:700;background:var(--txt);color:var(--bg);border-radius:999px;padding:12px 22px;white-space:nowrap;display:inline-block}
.pill.ghost{background:transparent;color:var(--txt);border:1px solid var(--txt);padding:11px 21px}
.hr{display:flex;align-items:center;gap:34px}
@media (max-width:760px){nav.g{display:none}}
/* ---- FV＝サイトの顔 ---- */
.fv{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--bg)}
.fv .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-top:56px}
.fv .in .wrap{width:100%}
.d2{font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(112px,19.2vw,420px);line-height:.82;letter-spacing:-.06em;margin:0;color:var(--txt);transform-origin:left center;white-space:nowrap;display:block;width:max-content}
.fv .rule{height:1px;background:var(--line);margin:34px 0 30px}
.fv .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
@media (max-width:760px){.fv .row{grid-template-columns:1fr;gap:24px;align-items:start}}
.fv .tag{font-size:clamp(22px,2.9vw,44px);font-weight:900;letter-spacing:-.02em;margin:0;line-height:1.3}
.fv .side{display:flex;flex-direction:column;gap:16px;align-items:flex-end;text-align:right}
@media (max-width:760px){.fv .side{align-items:flex-start;text-align:left}}
.fv .name{margin:0;color:var(--g1);font-size:14.5px;line-height:1.8}
.fv .eb{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:0 0 22px}
.fv .eyebrow{font-family:Manrope,system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--g2);text-transform:uppercase;margin:0;white-space:nowrap}
@media (max-width:760px){.fv .eb{flex-direction:column;gap:6px}.fv .eyebrow{font-size:10px;white-space:normal;letter-spacing:.14em}}
/* 動き：粒子・走査線・縦の傷・揺らぎ */
.fv-grain{position:absolute;inset:-20%;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--blend);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:fvGrain .6s steps(6) infinite}
@keyframes fvGrain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(-2%,6%)}}
.fv-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,var(--vig)) 100%)}
.fv-scan{position:absolute;left:0;right:0;top:-2px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);mix-blend-mode:var(--blend);animation:fvScan 7s linear infinite}
body[data-tone="light"] .fv-scan{background:linear-gradient(90deg,transparent,rgba(0,0,0,.28),transparent)}
@keyframes fvScan{0%{transform:translateY(0)}100%{transform:translateY(100vh)}}
.fv-scr{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:var(--blend);background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(255,255,255,.22) 23% calc(23% + 1px),transparent calc(23% + 1px) 64%,rgba(255,255,255,.14) 64% calc(64% + 1px),transparent calc(64% + 1px) 100%);animation:fvScr 5.5s steps(7) infinite}
body[data-tone="light"] .fv-scr{background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(0,0,0,.18) 23% calc(23% + 1px),transparent calc(23% + 1px) 64%,rgba(0,0,0,.12) 64% calc(64% + 1px),transparent calc(64% + 1px) 100%)}
@keyframes fvScr{0%,70%{opacity:0;transform:translateX(0)}74%{opacity:.5;transform:translateX(3%)}80%{opacity:.3;transform:translateX(-5%)}86%{opacity:0}100%{opacity:0}}
.fv.go .in{animation:fvDrift 9s ease-in-out infinite alternate}
@keyframes fvDrift{0%{transform:translate(0,0)}100%{transform:translate(0,-6px)}}
.fv.go .d2{animation:fvBang .55s cubic-bezier(.15,.9,.2,1) both,fvFlick 6s steps(2) 2s infinite}
@keyframes fvBang{0%{opacity:0;transform:scale(1.5) translateY(.06em);filter:blur(16px)}55%{opacity:1;transform:scale(.985);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes fvFlick{0%,96%{opacity:1}97%{opacity:.86}98%{opacity:1}99%{opacity:.93}100%{opacity:1}}
.fv .bang{opacity:0}
.fv-tc{position:absolute;right:40px;top:96px;font-family:Manrope,monospace;font-size:12px;letter-spacing:.2em;color:var(--g2);font-variant-numeric:tabular-nums}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fv.go .rv{opacity:1;transform:none}
.fv.go .rv.s1{transition-delay:.45s}.fv.go .rv.s2{transition-delay:.6s}.fv.go .rv.s3{transition-delay:.72s}
/* A/B と REPLAY */
.ctl{position:absolute;left:40px;top:96px;z-index:21;display:flex;gap:8px;opacity:0;transition:opacity .6s 1.2s}
@media (max-width:760px){.ctl{left:20px;top:auto;bottom:16px}.fv-tc{right:20px;top:88px}}
.fv.go ~ .ctl{opacity:1}
.ctl button{font-family:Manrope,system-ui,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--g2);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.ctl button.on{color:var(--bg);background:var(--txt);border-color:var(--txt)}
.ctl .ver{font-family:Manrope,system-ui,sans-serif;font-size:11px;letter-spacing:.2em;color:var(--g2);align-self:center;margin-left:6px}
/* ==== トップ v4.2：FV より下 ==== */
:root{--paper:#E6E6E2;--paper2:#DCDCD8;--card:#F0F0EC;--ink:#0E0E10;--gray:#55575D;--meta:#8A8C92;--rl:#C8C8C4;--black:#000;--wt:#EDEDE9;--wg:#8A8C92;--wrl:#2A2A2C;--pop:cubic-bezier(.22,1.45,.36,1)}
html,body{height:auto}
html{scroll-behavior:smooth}
body{overflow:visible}
body.lock{overflow:hidden}
/* hidden の要素は必ず隠す（.bt の display が勝って「結果をもう一度見る」が最初から見えていた・公開ページは土台が隠すがモック単体では出た・9/30） */
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* ヘッダー：FV の上では確定のまま。スクロールしたら紙の色、黒い帯の上では白 */
header.site{position:fixed;padding-top:env(safe-area-inset-top,0px);transition:background-color .4s var(--ease)}
header.site.solid{background:rgba(230,230,226,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
header.site.dark{background:rgba(0,0,0,.82)}
body[data-tone="light"] header.site.dark img.k{display:none}
body[data-tone="light"] header.site.dark img.w{display:block}
header.site.dark nav.g{color:#A3A5AB}
header.site.dark .pill.ghost{color:var(--wt);border-color:var(--wt)}
nav.g a{white-space:nowrap;transition:color .3s}
nav.g a:hover{color:var(--ink)}
header.site.dark nav.g a:hover{color:var(--wt)}
.hd-menu{display:none;background:none;border:0;padding:10px 2px;font:700 14px/1 "Zen Kaku Gothic New",sans-serif;color:var(--ink);cursor:pointer}
header.site.dark .hd-menu{color:var(--wt)}
/* 1000px 以下はナビを畳んで「メニュー」に（761〜940px でナビの文字が2段に折れていた・9/30） */
@media (max-width:1000px){nav.g{display:none}.hd-menu{display:inline-block}.hr{gap:18px}}
/* 10/1 ロゴを文字大の組み方（横に広い）にしたら、320px で「メニュー」が縦に折れた → 400px 以下はロゴ 28px・「メニュー」は1行・ボタンの余白を少し詰める */
@media (max-width:400px){header.site img{height:28px}.hr{gap:14px}.hd-menu{white-space:nowrap}header.site .pill.ghost{padding:10px 14px}}
/* FV の減光（上下対称）の写しを FV の真下に置いて下へ消す＝FV は変えずに継ぎ目を消す */
.fv-tail{position:absolute;left:0;right:0;top:0;height:max(100svh,640px);pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,var(--vig)) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 7%,rgba(0,0,0,.18) 14%,transparent 24%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 7%,rgba(0,0,0,.18) 14%,transparent 24%)}
.st .wrap{position:relative;z-index:1}
.ctl{z-index:19}
/* 日本語は文節で折り返す・段落は最後の行を1〜2字にしない */
main,.bd,.ft{word-break:auto-phrase}
main p,.bd p{text-wrap:pretty}
.st-h,.cs-t,.bd-h{text-wrap:balance}
.cl{display:inline-block}

/* ---- 文字が明らかになる（A ピント＝確定）。JS が --p（0〜1）を付ける。JS なし・動きを減らす設定・#…said では何もしない ---- */
html.rv-on [data-rv]{filter:blur(calc((1 - var(--p, 1)) * 10px));opacity:calc(.2 + .8 * var(--p, 1))}

/* ---- 節：地の色を交互に（ワイヤーの見せ方） ---- */
.tp-sec{position:relative;padding:144px 0;scroll-margin-top:76px;background:var(--paper)}
.tp-sec.alt{background:var(--paper2)}
@media (max-width:760px){.tp-sec{padding:96px 0}}
/* 節の見出し＝英字＋日本語の名前（左）＋ひとこと（右） */
.sh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;margin-bottom:64px}
.sh-w{margin:0;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(56px,8.2vw,132px);line-height:.86;letter-spacing:-.05em;color:var(--ink)}
.sh-k{margin:18px 0 0;font-size:clamp(15px,1.25vw,18px);font-weight:700;letter-spacing:.04em;color:var(--ink)}
.sh-s{margin:0;max-width:30em;font-size:clamp(16px,1.3vw,19px);line-height:1.8;color:var(--gray)}
.sh-s b{display:block;margin-bottom:6px;font-size:clamp(19px,1.7vw,25px);font-weight:900;color:var(--ink)}
@media (max-width:900px){.sh{grid-template-columns:1fr;gap:20px;margin-bottom:44px}}
/* ボタン */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.bt{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;transition:background-color .3s,color .3s}
.bt:hover{background:transparent;color:var(--ink)}
.bt.o{background:transparent;color:var(--ink)}
.bt.o:hover{background:var(--ink);color:var(--paper)}
.bt.l{background:var(--wt);border-color:var(--wt);color:var(--black)}
.bt.l:hover{background:transparent;color:var(--wt)}
/* カード */
.cd{background:var(--card);border-radius:3px}

/* ---- 01 声明（メッセージ1本） ---- */
.st{padding:200px 0 176px}
.st-h{margin:0 0 44px;max-width:15em;font-size:clamp(30px,4.3vw,66px);line-height:1.32;font-weight:900;letter-spacing:-.025em;color:var(--ink)}
.st-p{margin:0;max-width:34em;font-size:clamp(17px,1.45vw,21px);line-height:2;font-weight:500;color:var(--ink)}
@media (max-width:760px){.st{padding:140px 0 104px}.st-h{margin-bottom:32px;font-size:min(26px,calc((100vw - 40px) / 13.4))}}

/* ---- 02 Approach：画面に留め、Listen.→Confirm.→Act. のカードを順にポンと出す ---- */
.ap-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ap-card{display:flex;flex-direction:column;padding:36px 32px 40px}
.ap-w{margin:0 0 40px;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(44px,4.6vw,72px);line-height:.86;letter-spacing:-.05em;color:var(--ink)}
.ap-k{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--gray)}
.ap-t{margin:0 0 12px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-weight:900;color:var(--ink)}
.ap-d{margin:0;font-size:15px;line-height:1.9;color:var(--gray)}
.ap-note{margin:28px 0 0;font-size:14.5px;color:var(--gray)}
@media (max-width:900px){.ap-cards{grid-template-columns:1fr}.ap-w{margin-bottom:24px}}
/* 留める（JS が html.ap-on を付けたときだけ。入りきらない画面では付けない） */
html.ap-on .ap{height:250vh;height:250svh;padding:0}
html.ap-on .ap-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:76px;box-sizing:border-box}
html.ap-on .ap .sh{margin-bottom:44px}
html.ap-on .ap-card,html.ap-pop .ap-card{opacity:0;transform:translateY(36px) scale(.9);transition:opacity .3s var(--ease),transform .6s var(--pop)}
html.ap-on .ap-card.on,html.ap-pop .ap-card.on{opacity:1;transform:none}
@media (max-width:900px){
  html.ap-on .ap .sh{margin-bottom:28px}
  html.ap-on .ap-cards{grid-template-columns:1fr}
  html.ap-on .ap-card{grid-area:1/1;margin-top:calc(var(--i) * 18px);border-top:1px solid var(--rl);padding:26px 22px 28px}
  html.ap-on .ap-note{margin-top:18px;font-size:13px}
}

/* ---- 03 Service：7：5 の2枚のカード。名前→ひとこと→やること→問いの予告（続きは詳しいページで）→ボタン ---- */
.sv-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:stretch}
.sv-card{display:flex;flex-direction:column;padding:48px 48px 44px}
.sv-card.mk{scroll-margin-top:96px}
.sv-w{margin:0;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(64px,7.2vw,116px);line-height:.82;letter-spacing:-.055em;color:var(--ink)}
.sv-card.mk .sv-w{font-size:clamp(48px,5.4vw,86px)}
.sv-name{margin:14px 0 0;font-size:clamp(18px,1.6vw,23px);font-weight:900;letter-spacing:-.01em}
.sv-sum{margin:12px 0 0;max-width:31em;font-size:15.5px;line-height:1.85;color:var(--ink)}
.sv-k{margin:26px 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--meta)}
.sv-do{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sv-do li{position:relative;padding-left:20px;font-size:16px;font-weight:700;line-height:1.5}
.sv-do li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--ink)}
/* 問いの予告：初めの2つは読める。3つ目からはピントが合っていない（続きは詳しいページで） */
.sv-tz{margin-top:30px;padding-top:22px;border-top:1px solid var(--rl)}
.sv-tz-h{margin:0;font-size:16px;font-weight:900}
.sv-tz-p{margin:4px 0 10px;font-size:13.5px;line-height:1.7;color:var(--gray)}
.sv-tz ol{list-style:none;margin:0;padding:0}
.sv-tz li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:10px 0;border-top:1px solid var(--rl);font-size:14.5px;font-weight:700;line-height:1.55;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.sv-tz li span{padding-top:2px;font-family:Manrope,system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--meta)}
.sv-tz li.b1{filter:blur(2.2px);opacity:.55}
.sv-tz li.b2{filter:blur(4.5px);opacity:.28}
.sv-tz-more{margin:10px 0 0;font-size:12.5px;color:var(--meta)}
.sv-card:hover .sv-tz li.b1{filter:blur(1.2px);opacity:.75}
.sv-card:hover .sv-tz li.b2{filter:blur(3px);opacity:.42}
.sv-card .acts{margin-top:auto;padding-top:28px}
.bt .ar{display:inline-block;margin-left:10px;transition:transform .4s var(--ease)}
.bt:hover .ar{transform:translateX(4px)}
@media (max-width:900px){.sv-grid{grid-template-columns:1fr}.sv-card{padding:34px 22px 30px}}
/* 幅の狭いスマホ（〜400px）: カードのボタンが1行に入らず横にはみ出していた（360px で 5px・9/30）→ 字と余白を少し詰め、入らない時は文節で折る */
@media (max-width:400px){.bt{white-space:normal;text-align:center;word-break:auto-phrase;padding-block:12px}.sv-card .bt{padding-inline:18px;font-size:14px}}

/* ---- 04 Cases：HX とマーケティングの2列・6枚がばらばらの順にパパパッと出る ---- */
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(3,auto);grid-auto-flow:column;gap:12px 16px}
.cs-g{margin:0;padding-bottom:4px;align-self:end;font-size:15px;font-weight:700;color:var(--ink)}
.cs-card{padding:28px 30px 30px}
.cs-t{margin:0;font-size:clamp(19px,1.75vw,25px);line-height:1.45;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.cs-d{margin:14px 0 0;font-size:15px;line-height:1.8;color:var(--ink)}
.cs-d span{display:block;margin-bottom:2px;font-size:12.5px;font-weight:700;color:var(--meta)}
.cs-more{margin:48px 0 0}
html.cs-on .cs-card{opacity:0;transform:translateY(22px) scale(.9);transition:opacity .25s var(--ease),transform .55s var(--pop)}
html.cs-on .cs-card.on{opacity:1;transform:none}
@media (max-width:900px){.cs-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.cs-g:not(:first-child){margin-top:28px}.cs-card{padding:24px 22px 26px}}

/* ---- 05 Members：左詰め・横一列（段差なし） ---- */
.mb-people{display:grid;grid-template-columns:repeat(2,minmax(0,366px));gap:28px}
.mb-p{margin:0}
.mb-ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#D3D2CD}
.mb-ph img{display:block;width:100%;height:100%;object-fit:cover}
.mb-r{margin:18px 0 6px;font-size:13px;color:var(--gray)}
.mb-n{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:900}
.mb-w{margin:6px 0 0;font-size:15px;line-height:1.8;color:var(--gray)}
.mb-more{margin:48px 0 0}
@media (max-width:900px){.mb-people{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

/* ---- 06 News：左詰め ---- */
.nw-list{list-style:none;margin:0;padding:0;max-width:1000px;border-bottom:1px solid var(--rl)}
.nw-list li{display:grid;grid-template-columns:120px 96px minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--rl)}
.nw-d{font-family:Manrope,system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--gray);font-variant-numeric:tabular-nums}
.nw-c{font-size:13px;color:var(--meta)}
.nw-t{font-size:17px;font-weight:700;color:var(--ink)}
@media (max-width:900px){.nw-list li{grid-template-columns:1fr;gap:4px}}

/* ---- 07 帯：写真を背景に敷き、その上に見出しとボタン（写真は後日・今は暗い単色の光で仮置き） ---- */
.bd{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(380px,36vw,520px);background:#141416;color:#F2F2EE;scroll-margin-top:0}
.bd-ph{position:absolute;inset:-3%;background:radial-gradient(ellipse 50% 70% at 20% 28%,rgba(236,236,232,.30),rgba(236,236,232,0) 64%),radial-gradient(ellipse 36% 50% at 80% 74%,rgba(236,236,232,.10),rgba(236,236,232,0) 70%),linear-gradient(120deg,#2b2b2d 0%,#161618 55%,#0c0c0d 100%);animation:bdKen 26s ease-in-out infinite alternate}
.bd-bl{position:absolute;inset:-3%;background:repeating-linear-gradient(98deg,rgba(0,0,0,0) 0 72px,rgba(0,0,0,.22) 72px 108px);-webkit-mask-image:radial-gradient(ellipse 52% 72% at 20% 28%,#000,transparent 70%);mask-image:radial-gradient(ellipse 52% 72% at 20% 28%,#000,transparent 70%);animation:bdKen 26s ease-in-out infinite alternate}
@keyframes bdKen{from{transform:scale(1)}to{transform:scale(1.06)}}
.bd-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 58%,rgba(0,0,0,.4) 100%)}
.bd-grain{position:absolute;inset:-20%;pointer-events:none;opacity:.14;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:fvGrain .6s steps(6) infinite}
.bd .wrap{position:relative;width:100%}
.bd-in{display:flex;flex-direction:column;align-items:flex-start;gap:30px;padding:72px 0}
.bd-h{margin:0;font-size:clamp(28px,3.4vw,52px);line-height:1.3;font-weight:900;letter-spacing:-.02em;color:#F2F2EE}
.bd-note{position:absolute;right:max(40px,calc((100% - 1280px) / 2));bottom:18px;font-size:12px;color:#8A8C92}
.bd.photo .bd-ph{background:var(--img) var(--pos,76% 50%)/cover no-repeat}
.bd.photo .bd-bl{display:none}
@media (max-width:760px){.bd.photo .bd-ph{background-position:var(--pos-sp,84% 50%)}}
@media (prefers-reduced-motion: reduce){.bd-ph,.bd-bl{animation:none}}
@media (max-width:760px){.bd{min-height:340px}.bd-in{padding:56px 0}.bd-note{right:20px}}
/* ---- 帯 tv（10/1）：昔のテレビ。いつもは薄い砂嵐と走査線、ゆっくり下りる暗い帯。2〜5秒おきに「ブチッ、ブチッ」と2〜3回乱れる（横ずれ・砂嵐が強まる・ときどき映りが切れる） ---- */
.bd.tv{background:#0B0B0C}
.bd-noise{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.12;image-rendering:pixelated;pointer-events:none}
.bd-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.55) 0 1px,rgba(0,0,0,0) 1px 3px)}
.bd-roll{position:absolute;left:0;right:0;top:-35%;height:35%;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.32),rgba(0,0,0,0));animation:bdRoll 7s linear infinite}
@keyframes bdRoll{to{transform:translateY(386%)}}
.bd-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%)}
.bd.tv .bd-h{position:relative}
.bd-g{position:absolute;inset:0;opacity:0;pointer-events:none;color:#F2F2EE}
.bd.tv.rgb .bd-g.g1{color:#FF3D6E}
.bd.tv.rgb .bd-g.g2{color:#3DE3FF}
.bd.tv.glitch .bd-noise{opacity:.38}
.bd.tv.glitch .bd-in{transform:translate(var(--gx,0px),-2px)}
.bd.tv.glitch .bd-g{opacity:.92}
.bd.tv.glitch .bd-g.g1{clip-path:inset(var(--g1,18%) 0 calc(74% - var(--g1,18%)) 0);transform:translateX(calc(var(--gx,0px) * -1.6))}
.bd.tv.glitch .bd-g.g2{clip-path:inset(var(--g2,58%) 0 calc(80% - var(--g2,58%)) 0);transform:translateX(calc(var(--gx,0px) * 2))}
.bd.tv.cut .bd-in{opacity:0}
.bd.tv.cut .bd-noise{opacity:.5}
@media (prefers-reduced-motion: reduce){.bd-roll{display:none}}
/* ---- フッター：2段（ロゴとナビ／会社名・住所とプライバシーポリシー・コピーライト） ---- */
.ft{background:var(--paper);padding:44px 0 30px}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-bottom:26px;border-bottom:1px solid var(--rl)}
.ft-top img{display:block;height:40px;width:auto}   /* 10/1 本人「特にフッターのロゴが小さい」→ 28px → 40px（文字大の組み方） */
.ft-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 28px;font-size:14px;font-weight:700}
.ft-nav a{color:var(--ink)}
.ft-bot{display:flex;align-items:baseline;justify-content:space-between;gap:10px 32px;flex-wrap:wrap;padding-top:18px}
.ft-co{margin:0;font-size:12.5px;line-height:1.8;color:var(--gray)}
.ft-meta{margin:0;display:flex;gap:24px;font-size:12.5px;color:var(--meta)}
.ft-meta a{color:var(--gray)}
.ft-meta span{font-family:Manrope,system-ui,sans-serif;letter-spacing:.04em}
@media (max-width:900px){.ft-top{flex-direction:column;align-items:flex-start;gap:22px}.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;width:100%}.ft-bot{flex-direction:column;gap:6px}}
/* ---- スマホのメニュー（オープニングの幕と同じく上下から開く） ---- */
.spm{position:fixed;inset:0;z-index:60;background:var(--black);color:var(--wt);clip-path:inset(50% 0 50% 0);transition:clip-path .45s var(--ease)}
.spm.on{clip-path:inset(0 0 0 0)}
.spm[hidden]{display:none}
.spm-in{height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 20px calc(32px + env(safe-area-inset-bottom,0px))}
.spm-top{height:76px;display:flex;align-items:center;justify-content:space-between}
.spm-top img{height:32px;width:auto;display:block}
.spm-x{background:none;border:0;padding:10px 2px;color:var(--wt);font:700 14px/1 "Zen Kaku Gothic New",sans-serif;cursor:pointer}
.spm-nav{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.spm-nav a{font-size:30px;font-weight:900;line-height:1.45;letter-spacing:-.02em}
.spm-nav a.c{align-self:flex-start;margin-top:24px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:16px;font-weight:700}

/* ==== 下層 ==== */
/* トーンB を最初から（トップは JS で切り替えるが、下層は常に薄いグレー） */
body{--bg:#E6E6E2;--bg2:#DCDCD8;--txt:#0E0E10;--g1:#55575D;--g2:#8A8C92;--line:#C8C8C4;--grain:.28;--vig:.22;--blend:multiply;background:var(--paper);overflow:visible}
header.site img.w{display:none}
header.site img.k{display:block}
header.site.dark img.k{display:none}
header.site.dark img.w{display:block}
nav.g a[aria-current="page"]{color:var(--ink);font-weight:700}
/* ページの見出し（H）＝英字（読み込み時にバーンと）＋罫線＋日本語の h1。フィルムの減光とリール番号で FV とつなぐ */
.kh{position:relative;overflow:hidden;padding:196px 0 88px;background:var(--paper)}
.kh-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.16) 100%)}
.kh-tc{position:absolute;right:max(40px,calc((100% - 1280px) / 2));top:100px;font-family:Manrope,system-ui,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--meta)}
.kh .wrap{position:relative}
.kh-bc{margin:0 0 26px;font-size:13px;color:var(--meta)}
.kh-bc a{color:var(--gray)}
.kh-w{margin:0;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(80px,11vw,176px);line-height:.84;letter-spacing:-.055em;color:var(--ink);transform-origin:left center}
html.rv-on .kh-w{animation:fvBang .55s cubic-bezier(.15,.9,.2,1) .15s both}
.kh-rule{height:1px;background:var(--rl);margin:34px 0 26px}
.kh-h1{margin:0;font-size:clamp(22px,2.4vw,34px);font-weight:900;letter-spacing:-.01em}
@media (max-width:760px){.kh{padding:150px 0 64px}.kh-tc{right:20px;top:92px}}
/* 私たちについて（ab-） */
.ab-state{margin:0 0 40px;max-width:15em;font-size:clamp(30px,4.3vw,66px);line-height:1.32;font-weight:900;letter-spacing:-.025em;color:var(--ink)}
.ab-p{margin:0;max-width:34em;font-size:clamp(16px,1.35vw,19px);line-height:2;color:var(--ink)}
.ab-def{margin:0 0 22px;font-size:clamp(26px,3vw,44px);line-height:1.35;font-weight:900;letter-spacing:-.015em;color:var(--ink)}
.ab-def span{font-family:Manrope,system-ui,sans-serif;font-weight:700;letter-spacing:-.03em}
.ab-pr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-pr li{display:flex;flex-direction:column;padding:34px 30px 36px}
.ab-pr-w{margin:0 0 36px;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(40px,4.2vw,66px);line-height:.86;letter-spacing:-.05em}
.ab-pr-n{margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--gray)}
.ab-pr-h{margin:0 0 10px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;font-weight:900}
.ab-pr-b{margin:0;font-size:15px;line-height:1.9;color:var(--gray)}
.ab-nots{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-bottom:1px solid var(--rl)}
.ab-nots li{padding:18px 0;border-top:1px solid var(--rl);font-size:clamp(16px,1.3vw,18px);font-weight:700}
.ab-msg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px;align-items:start}
.ab-msg-h{margin:0 0 36px;font-size:clamp(26px,3vw,44px);line-height:1.4;font-weight:900;letter-spacing:-.02em}
.ab-msg-t p{margin:0 0 1.4em;max-width:34em;font-size:clamp(15.5px,1.2vw,17px);line-height:2.05;color:var(--ink)}
.ab-sign{margin:36px 0 0;padding-top:22px;border-top:1px solid var(--rl)}
.ab-sign-t{margin:0 0 6px;font-size:13px;color:var(--gray)}
.ab-sign-n{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:900}
.ab-sign-e{margin:4px 0 0;font-family:Manrope,system-ui,sans-serif;font-size:13px;letter-spacing:.04em;color:var(--meta)}
.ab-msg-ph{position:sticky;top:120px}
.ab-co{margin:0;max-width:960px;display:grid;grid-template-columns:180px minmax(0,1fr);border-bottom:1px solid var(--rl)}
.ab-co dt,.ab-co dd{margin:0;padding:20px 0;border-top:1px solid var(--rl);font-size:16px;line-height:1.8}
.ab-co dt{font-weight:700}
.ab-co dd{color:var(--ink)}
/* HX（hx-） */
.kh-x{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;margin-top:40px}
.hx-lead{margin:0;font-size:clamp(20px,2vw,28px);line-height:1.7;font-weight:900}
.hx-sub{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink)}
.hx-def{margin:12px 0 0;font-size:13.5px;line-height:1.8;color:var(--gray)}
.kh-x .acts{margin-top:24px}
.hx-k{display:block;margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--meta)}
.hx-why{max-width:40em}
.hx-q1{margin:0 0 18px;font-size:clamp(19px,1.8vw,25px);font-weight:900}
.hx-defbox{margin:30px 0 0;max-width:32em;font-size:clamp(18px,1.6vw,22px);line-height:1.85;font-weight:900}
.hx-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px}
.hx-ex-c{padding:30px 32px 34px}
.hx-ex-k{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--gray)}
.hx-ex-v{margin:0;font-size:clamp(20px,2vw,28px);line-height:1.5;font-weight:900}
.hx-close{margin:20px 0 0;font-size:16px;line-height:1.8;font-weight:700}
.hx-scenes{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hx-scenes li{padding:24px 26px 26px}
.hx-sc-k{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--meta)}
.hx-sc-v{margin:0;font-size:16.5px;line-height:1.7;font-weight:700}
.hx-lad{margin-top:104px;position:relative}
.hx-lad-h{margin:0;font-size:clamp(26px,3vw,44px);font-weight:900;letter-spacing:-.02em}
.hx-lad-p{margin:12px 0 0;font-size:16px;line-height:1.85;color:var(--gray)}
.hx-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px;align-items:start}
.hx-steps li{margin-top:calc((var(--n,5) - 1 - var(--i)) * 40px);padding:20px 18px 22px;background:var(--card);border-radius:3px}
/* 積み上がる（10/1 本人）：画面に入ったら、下の段から順に、1段下から上がってポンと止まる（Approach のカードと同じはね返る緩急）。JS が html.lad-on と .on を付ける */
/* 隠すときは一瞬（10/1 本番で、ページを開いてすぐスクロールすると、段がゆっくり消えていく途中＝05 がうっすら見えた）。出るときだけ間隔をあけて動かす */
html.lad-on .hx-steps li{opacity:0;transform:translateY(64px) scale(.92)}
html.lad-on .hx-steps.on li{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .7s var(--pop);transition-delay:calc(var(--i) * var(--lad-gap,.2s))}
.hx-steps li:last-child{background:var(--ink);color:var(--paper)}
/* 階段をのぼる人（10/1 本人「人が登ってる感じに」）：Open Doodles の strolling（各ページの見出しの絵と同じ絵柄）。
   休んでいる形＝05（いちばん上）の段の上に立つ。動き＝段が積み上がったあと、01 から 05 へ1段ずつ跳ねてのぼる（JS・5段が階段に並ぶ幅のときだけ） */
.hx-steps li{position:relative}
.hx-climb{position:absolute;left:50%;bottom:100%;height:clamp(78px,6.6vw,100px);margin:0 0 -1px;transform:translateX(-50%);pointer-events:none}
.hx-climb-in{height:100%;transform-origin:50% 100%}
.hx-climb.free{left:0;top:0;bottom:auto;margin:0;transform:none;z-index:1}   /* 動かすあいだだけ 05 の段の外（.hx-lad の左上を起点）に出す。JS が位置を決める */
.hx-climb svg{display:block;height:100%;width:auto}
/* 3列（1100px 以下）：05 の右の空いたマスに、05 と同じ床に立つ／1列（760px 以下）：05 の上に場所をあけて、右寄りに立つ */
@media (max-width:1100px) and (min-width:761px){.hx-climb{left:calc(100% + 28px);bottom:0;margin:0;transform:none}}
@media (max-width:760px){.hx-steps li:last-child{margin-top:calc(clamp(78px,6.6vw,100px) + 10px)}.hx-climb{left:auto;right:18px;transform:none}}
.hx-st-n{display:block;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.hx-st-t{margin:8px 0 6px;font-size:15.5px;line-height:1.5;font-weight:900}
.hx-st-d{margin:0;font-size:13px;line-height:1.7;color:var(--gray)}
.hx-steps li:last-child .hx-st-n,.hx-steps li:last-child .hx-st-d{color:#C8C8C4}
.hx-ck{max-width:1000px}
.hx-ck-top{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 28px;align-items:center;margin:0 0 18px}
.hx-ck-top p{margin:0;font-size:14px;font-weight:700;color:var(--gray)}
.hx-ck-top b{font-family:Manrope,system-ui,sans-serif;font-size:22px;color:var(--ink);margin:0 2px}
.hx-ck-bar{height:2px;background:var(--rl);position:relative}
.hx-ck-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .4s var(--ease)}
.hx-qs{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rl)}
.hx-q{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--rl)}
.hx-q-n{font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.hx-q-t{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.55;font-weight:700;transition:color .3s}
.hx-seg{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden}
.hx-seg button{min-width:68px;min-height:40px;padding:0 14px;border:0;background:transparent;color:var(--ink);font:700 13.5px/1 "Zen Kaku Gothic New",sans-serif;cursor:pointer;transition:background-color .2s,color .2s}
.hx-seg button+button{border-left:1px solid var(--ink)}
.hx-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hx-q[data-a="yes"] .hx-q-t{color:var(--meta)}
.hx-q[data-a="yes"] .hx-q-n{color:var(--rl)}
.hx-q[data-a="no"] .hx-q-n{color:var(--ink)}
.hx-ck-sum{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px}
.hx-ck-n{margin:0;font-size:16px;font-weight:700}
.hx-ck-n b{font-family:Manrope,system-ui,sans-serif;font-size:26px;margin:0 2px}
/* 結果のポップアップ */
.hx-pop{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s var(--ease)}
.hx-pop.on{opacity:1}
.hx-pop-bg{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.hx-pop-card{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:36px 36px 32px;background:var(--paper);border-radius:4px;transform:translateY(18px) scale(.97);transition:transform .45s var(--pop)}
.hx-pop.on .hx-pop-card{transform:none}
.hx-pop-h{margin:0 0 12px;font-size:clamp(24px,2.4vw,32px);font-weight:900}
.hx-pop-h b{font-family:Manrope,system-ui,sans-serif;font-size:1.3em;margin:0 3px}
.hx-pop-p{margin:0 0 18px;font-size:15px;line-height:1.85;color:var(--gray)}
.hx-pop-l{list-style:none;margin:0 0 26px;padding:0;border-bottom:1px solid var(--rl)}
.hx-pop-l li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:10px 0;border-top:1px solid var(--rl);font-size:14.5px;line-height:1.55;font-weight:700}
.hx-pop-l span{font-family:Manrope,system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--meta);padding-top:2px}
@media (max-width:760px){.hx-pop-card{padding:28px 22px 24px}.hx-ck-top{grid-template-columns:auto auto}.hx-ck-bar{grid-column:1 / -1}}
.hx-who{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.hx-who li{padding:22px 0 0;border-top:2px solid var(--ink);font-size:clamp(17px,1.5vw,21px);line-height:1.6;font-weight:900}
.hx-who-sub{display:block;margin-top:4px;font-size:14px;line-height:1.7;font-weight:700;color:var(--gray)}
.hx-cs{display:flex;flex-direction:column;gap:12px}
.hx-cs-r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:36px;padding:30px 32px 32px}
.hx-cs-t{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.5;font-weight:900}
.hx-cs-s{margin:0 0 8px;font-size:16.5px;font-weight:900;line-height:1.5}
.hx-cs-d{margin:0;font-size:14.5px;line-height:1.85;color:var(--gray)}
.hx-cf{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rl)}
.hx-cf li{display:grid;grid-template-columns:64px minmax(0,6fr) minmax(0,5fr);gap:24px;align-items:start;padding:26px 0;border-top:1px solid var(--rl)}
.hx-cf-n{font-family:Manrope,system-ui,sans-serif;font-size:clamp(28px,2.6vw,40px);font-weight:700;line-height:1;letter-spacing:-.04em}
.hx-cf-t{margin:0 0 6px;font-size:clamp(18px,1.6vw,22px);font-weight:900}
.hx-cf-d{margin:0;font-size:15px;line-height:1.8;color:var(--gray)}
.hx-cf-c{margin:0;font-size:15px;line-height:1.8}
.hx-ar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hx-ar>li{display:flex;flex-direction:column;padding:28px 28px 30px}
.hx-ar-n{margin:0 0 12px;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.hx-ar-n span{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700}
.hx-ar-t{margin:0 0 10px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-weight:900}
.hx-ar-l{margin:0 0 10px;font-size:14.5px;font-weight:700}
.hx-ar-d{margin:0 0 14px;font-size:14px;line-height:1.85;color:var(--gray)}
.hx-ar-s{list-style:none;margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--rl);display:flex;flex-direction:column;gap:4px}
.hx-ar-s li{font-size:13.5px;line-height:1.6;color:var(--ink)}
.hx-ar-s li::before{content:"";display:inline-block;width:8px;height:1px;margin:0 8px 0 0;vertical-align:.32em;background:var(--ink)}
.hx-cs-r .hx-ar-s{margin-top:0;border-top:0;padding-top:0}
.hx-note{margin:20px 0 0;max-width:52em;font-size:13.5px;line-height:1.8;color:var(--gray)}
.hx-sp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hx-sp>li{position:relative;display:flex;flex-direction:column;padding:30px 30px 32px}
.hx-sp-n{margin:0 0 14px;font-family:Manrope,system-ui,sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em}
.hx-sp-t{margin:0 0 8px;font-size:clamp(20px,1.8vw,26px);line-height:1.4;font-weight:900}
.hx-sp-l{margin:0 0 8px;font-size:15.5px;font-weight:700}
.hx-sp-d{margin:0 0 16px;font-size:14.5px;line-height:1.85;color:var(--gray)}
.hx-sp>li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:30px;z-index:1;font-family:Manrope,system-ui,sans-serif;font-size:18px;color:var(--meta)}
.hx-cy{margin-top:40px;padding:34px 36px 40px}
.hx-cy-h{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:900}
.hx-cy-p{margin:8px 0 0;font-size:15px;line-height:1.8;color:var(--gray)}
.hx-cy-r{position:relative;list-style:none;margin:28px 0 0;padding:0 0 34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.hx-cy-r li{position:relative;padding:16px 18px 18px;background:var(--paper);border-radius:3px}
/* 循環（10/1 本人が B を選択＝線が順に伸びる）：線と矢じりは SVG で、箱の位置を測って JS が描く（線は道の真ん中に描くので、太さが違ってもずれない・幅が変わったら描き直す）。箱は動かさない。
   箱の間の矢印が順に墨で伸び（0〜7%／11〜18%／22〜29%）、戻り道が見直しから下を回って計画へ伸び（34〜62%）、矢じりがそのとき墨に。そろったら灰に戻る（5.2 秒でくり返す）。
   戻り道の真ん中の矢じりは付けない（本人「三角が2か所あるので真ん中を消して」）。v1.5 の文字の矢印・枠線の戻り線は、灰と墨が1px ずれて角が二重・「↑」が浮くなどのずれがあった */
.cy-w{position:relative;margin-top:28px}
.cy-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.cy-r{position:relative;z-index:1;margin-top:0}
.cy-r li{z-index:1}
.cy-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cy-track,.cy-hd{stroke:var(--meta);stroke-width:1.5}
.cy-fg{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:butt}
.cy-fg.s0{animation:cyB0 5.2s var(--ease) infinite}.cy-fg.s1{animation:cyB1 5.2s var(--ease) infinite}.cy-fg.s2{animation:cyB2 5.2s var(--ease) infinite}.cy-fg.s3{animation:cyB3 5.2s cubic-bezier(.45,0,.3,1) infinite}
@keyframes cyB0{0%{stroke-dashoffset:1;opacity:1}8%,76%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cyB1{0%,11%{stroke-dashoffset:1;opacity:1}19%,76%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cyB2{0%,22%{stroke-dashoffset:1;opacity:1}30%,76%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cyB3{0%,34%{stroke-dashoffset:1;opacity:1}62%,76%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
.cy-hd.h0{animation:cyH0 5.2s linear infinite}.cy-hd.h1{animation:cyH1 5.2s linear infinite}.cy-hd.h2{animation:cyH2 5.2s linear infinite}.cy-hd.he{animation:cyHe 5.2s linear infinite}
@keyframes cyH0{0%,7%{stroke:var(--meta)}8%,80%{stroke:var(--ink)}86%,100%{stroke:var(--meta)}}
@keyframes cyH1{0%,18%{stroke:var(--meta)}19%,80%{stroke:var(--ink)}86%,100%{stroke:var(--meta)}}
@keyframes cyH2{0%,29%{stroke:var(--meta)}30%,80%{stroke:var(--ink)}86%,100%{stroke:var(--meta)}}
@keyframes cyHe{0%,61%{stroke:var(--meta)}62%,80%{stroke:var(--ink)}86%,100%{stroke:var(--meta)}}
@media (prefers-reduced-motion: reduce){.cy-svg path{animation:none!important}.cy-fg{opacity:0}html.lad-on .hx-steps.on li{transition:none}}
.hx-cy-k{margin:0 0 6px;font-size:16px;font-weight:900}
.hx-cy-d{margin:0;font-size:13.5px;line-height:1.75;color:var(--gray)}
/* 体制：支援の構造図 */
.hx-dg{display:grid;grid-template-columns:minmax(0,4fr) 110px minmax(0,8fr);align-items:stretch}
.hx-dg-you{display:flex;flex-direction:column;padding:28px 26px 30px;border:1px solid var(--ink);border-radius:3px}
.hx-dg-roles{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hx-dg-roles li{padding:14px 0;border:1px solid var(--rl);border-radius:3px;text-align:center;font-size:17px;font-weight:900}
.hx-dg-d{margin:16px 0 0;font-size:14px;line-height:1.8;color:var(--gray)}
.hx-dg-gate{position:relative;display:flex;align-items:center;justify-content:center}
.hx-dg-gate::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--ink)}
.hx-dg-gl{position:relative;z-index:1;padding:14px 0;background:var(--paper);writing-mode:vertical-rl;font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.6}
.hx-dg-ar{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink)}
.hx-dg-ar::before,.hx-dg-ar::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.hx-dg-ar::before{left:0;transform:rotate(-45deg)}
.hx-dg-ar::after{right:0;transform:rotate(135deg)}
.hx-dg-hm{padding:28px 26px 30px;background:var(--card);border-radius:3px}
.hx-dg-pair{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;margin-top:6px}
.hx-dg-box{display:flex;flex-direction:column;padding:22px 22px 24px;border-radius:3px}
.hx-dg-box.pro{background:var(--paper)}
.hx-dg-box.back{border:1px dashed var(--ink)}
.hx-dg-tag{margin:0 0 10px;align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700}
.hx-dg-box.back .hx-dg-tag{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.hx-dg-t{margin:0 0 6px;font-size:clamp(18px,1.5vw,21px);font-weight:900}
.hx-dg-r{margin:0 0 12px;font-size:14.5px;font-weight:700;line-height:1.6}
.hx-dg-link{position:relative}
.hx-dg-link::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:1px dashed var(--ink)}
.hx-dg-link::after{content:"";position:absolute;right:8px;top:calc(50% - 4px);width:8px;height:8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.hx-dg-cap{margin:22px 0 0;max-width:52em;font-size:14.5px;line-height:1.85;color:var(--gray)}
@media (max-width:1000px){.hx-dg{grid-template-columns:1fr}.hx-dg-gate{height:120px}.hx-dg-gl{writing-mode:horizontal-tb;padding:0 14px;letter-spacing:.04em;font-size:13.5px}
  .hx-dg-gate::before{left:0;right:0;top:50%;bottom:auto;border-left:0;border-top:1px dashed var(--ink)}
  .hx-dg-ar{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}.hx-dg-ar::before{left:-4px;top:0;transform:rotate(45deg)}.hx-dg-ar::after{left:-4px;right:auto;top:auto;bottom:0;transform:rotate(-135deg)}
  .hx-dg-pair{grid-template-columns:1fr;grid-template-rows:auto 44px auto}.hx-dg-link::before{left:50%;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px dashed var(--ink)}.hx-dg-link::after{right:auto;left:calc(50% - 4px);top:auto;bottom:8px;transform:rotate(135deg)}}
.hx-comm-p{margin:0;max-width:48em;font-size:15px;line-height:1.85;color:var(--gray)}
@media (max-width:1100px){.hx-ar{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.hx-steps li{margin-top:0}}
@media (max-width:900px){.kh-x{grid-template-columns:1fr;gap:24px}.hx-ex,.hx-scenes,.hx-who,.hx-sp,.hx-tm{grid-template-columns:1fr}.hx-cs-r{grid-template-columns:1fr;gap:18px;padding:24px 22px}
  .hx-cf li{grid-template-columns:44px minmax(0,1fr)}.hx-cf-c{grid-column:2}.hx-sp>li:not(:last-child)::after{content:"↓";right:auto;left:30px;top:auto;bottom:-22px}
  .hx-cy-r{grid-template-columns:1fr;gap:26px;padding:0 30px 0 0}}
/* スマホの循環: 2列だと「パートナ／ー」と語の途中で折れた → 600px 以下は縦1列・矢印は↓・戻りの線は右側の括弧に（9/30） */
@media (max-width:600px){.hx-cy{padding:28px 22px 32px}}
@media (max-width:760px){.hx-ar,.hx-steps{grid-template-columns:1fr}.hx-q{grid-template-columns:34px minmax(0,1fr);row-gap:10px}.hx-seg{grid-column:2;justify-self:start}}
@media (max-width:760px){.ab-state{font-size:min(26px,calc((100vw - 40px) / 13.4))}.ab-state br{display:none}.ab-msg-h{font-size:min(24px,calc((100vw - 40px) / 14.6))}}
@media (max-width:900px){.ab-pr{grid-template-columns:1fr}.ab-nots{grid-template-columns:1fr}.ab-msg{grid-template-columns:1fr;gap:40px}.ab-msg-ph{position:static;max-width:320px}.ab-co{grid-template-columns:1fr}.ab-co dd{border-top:0;padding-top:0}}

/* 03 こんな会社と：素材のイラスト（OD／OP）。絵の箱の高さをそろえ、罫線の位置を3つで合わせる */
.hx-who-vis{display:flex;align-items:flex-end;height:220px;margin:0 0 16px}
.hx-who-vis svg{display:block;width:auto;flex:none;max-width:100%}
@media (max-width:900px){.hx-who-vis{height:190px}}
@media (max-width:600px){.hx-who-vis{height:160px;margin-bottom:10px}}

/* ---- Open Doodles（10/1）。形は変えず色だけ替える（墨・明るい灰） ---- */
/* 見出しの横：英字の右に置き、罫線の上に立たせる（罫線の上の余白 34px を打ち消す）。入りきらない幅では英字の下の段へ回る */
.kh-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 24px}
.kh-ill{flex:none;height:clamp(118px,14vw,200px);margin:0 0 -34px auto}
.kh-ill svg{display:block;height:100%;width:auto}
/* 結果のポップアップ：右上に1枚（文字は左に回り込む） */
.hx-pop-ill{float:right;width:clamp(116px,32%,170px);margin:-6px -6px 8px 14px}
.hx-pop-ill svg{display:block;width:100%;height:auto}
/* スマホは見出しが絵の横で折れて「つ。」だけ次の行になった → 絵の横はラベルだけにして、見出しは絵の下から全幅で */
@media (max-width:760px){.hx-pop-ill{width:112px;margin:-8px -4px 0 12px}.hx-pop-h{clear:both}}

/* ---- お問い合わせ（左に案内、右にフォーム）・送信完了・404 ---- */
.ct{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.ct-h{margin:0 0 24px;max-width:11em;font-size:clamp(26px,3vw,44px);line-height:1.4;font-weight:900;letter-spacing:-.02em}
.ct-form{display:grid;gap:24px;padding:40px 40px 36px}
.ct-f{margin:0;padding:0;border:0;display:grid;gap:8px;min-width:0}
.ct-l{display:flex;align-items:center;gap:8px;padding:0;font-size:14.5px;font-weight:700}
.ct-req,.ct-opt{padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.6}
.ct-req{background:var(--ink);color:var(--paper)}
.ct-opt{border:1px solid var(--rl);color:var(--gray)}
.ct-in{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--rl);border-radius:3px;background:var(--paper);color:var(--ink);font:500 16px/1.6 "Zen Kaku Gothic New",sans-serif}
.ct-in:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
textarea.ct-in{min-height:180px;resize:vertical}
.ct-kinds{display:flex;flex-wrap:wrap;gap:8px}
.ct-kind{position:relative}
.ct-kind input{position:absolute;opacity:0;width:1px;height:1px}
.ct-kind span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s}
.ct-kind input:checked+span{background:var(--ink);color:var(--paper)}
.ct-kind input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.ct-agree{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700}
.ct-agree input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.ct-agree a{text-decoration:underline;text-underline-offset:3px}
.ct-form .acts{margin-top:4px}
.ct-demo{margin:28px 0 0}
.nf-acts,.tk-acts{margin-top:32px}
@media (max-width:900px){.ct{grid-template-columns:1fr;gap:36px}.ct-form{padding:28px 22px 26px}}

/* ---- マーケティング支援（mk-）v1.1・10/1 本人の選択 ---- */
/* 02 Cases（A）：灰の矢羽根（お悩み）→ まず確かめること（大きく）→ 私たちがすること */
.mk-cs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mk-cs>li{display:flex;flex-direction:column}
.mk-cs-n{margin:0 0 10px;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.mk-cs-w{min-height:196px;padding:24px 24px 46px;background:var(--paper2);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),50% 100%,0 calc(100% - 24px))}
.mk-cs-w h3{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;font-weight:900;text-wrap:pretty}
.mk-cs-q{padding:22px 2px 16px}
.mk-cs-qt{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.5;font-weight:900;text-wrap:pretty}
.mk-cs-d{margin:auto 0 0;padding:14px 2px 0;border-top:1px solid var(--rl);font-size:14.5px;line-height:1.85;color:var(--gray)}
/* 03 Design（B＋見やすく）：5枚のカードを左から右へ。番号・大きな問いの言葉・短い線・見出し・説明。カードの間に丸い矢印 */
.mk-dz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.mk-dz li{position:relative;display:flex;flex-direction:column;padding:26px 24px 30px;background:var(--card);border-radius:3px}
.mk-dz li:not(:last-child)::after{content:"→";position:absolute;right:-19px;top:70px;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 14px/1 Manrope,system-ui,sans-serif}
.mk-dz-n{margin:0 0 14px;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.mk-dz-k{margin:0;font-size:clamp(30px,3vw,46px);line-height:1.1;font-weight:900;letter-spacing:-.02em}
.mk-dz-k::after{content:"";display:block;width:28px;height:2px;margin:18px 0 16px;background:var(--ink)}
.mk-dz-t{margin:0 0 10px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;font-weight:900}
.mk-dz-d{margin:0;font-size:15px;line-height:1.85;color:var(--gray);text-wrap:pretty}
/* 04 Tools（B＋見やすく）：1件1枚。左に課題（「」・大きく）→ 右に型の名前（見出し）と、札つきの2行（こういう時に／なぜ使うか） */
.mk-tl-h{display:grid;grid-template-columns:44px minmax(0,5fr) 40px minmax(0,7fr);gap:0 20px;padding:0 28px 12px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--meta)}
.mk-tl-h span:first-child{grid-column:2}.mk-tl-h span:last-child{grid-column:4}
.mk-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mk-tl li{display:grid;grid-template-columns:44px minmax(0,5fr) 40px minmax(0,7fr);gap:0 20px;align-items:start;padding:28px;background:var(--card);border-radius:3px}
.mk-tl-n{padding-top:4px;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.mk-tl-pb{margin:0;font-size:clamp(18px,1.55vw,22px);line-height:1.55;font-weight:900;text-wrap:pretty}
.mk-tl-ar{padding-top:2px;font:700 20px/1.2 Manrope,system-ui,sans-serif;color:var(--meta);text-align:center}
.mk-tl-name{margin:0 0 12px;font-size:clamp(18px,1.5vw,21px);line-height:1.45;font-weight:900}
.mk-tl-r{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 12px;margin:0;font-size:15px;line-height:1.75}
.mk-tl-r dt{padding-top:2px;font-size:12px;font-weight:700;color:var(--meta)}
.mk-tl-r dd{margin:0}
.mk-tl-r dd.w{font-weight:700}
.mk-tl-r dd.y{color:var(--gray)}
/* 05 Scope：成果物の6枚（最後の「設計書にまとめる」だけ墨の面）＝v1.0 のまま */
.mk-sc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mk-sc li{display:flex;flex-direction:column;padding:28px 28px 30px}
.mk-sc-n{margin:0 0 14px;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--meta)}
.mk-sc-t{margin:0 0 12px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-weight:900}
.mk-sc-o{margin:0 0 12px;padding:10px 12px;border-radius:3px;background:var(--paper);font-size:14px;font-weight:700;line-height:1.55}
.mk-sc-o span{display:block;margin-bottom:2px;font-size:11.5px;letter-spacing:.04em;color:var(--meta)}
.mk-sc-d{margin:0;font-size:14.5px;line-height:1.85;color:var(--gray)}
.mk-sc li:last-child{background:var(--ink);color:var(--paper)}
.mk-sc li:last-child .mk-sc-n,.mk-sc li:last-child .mk-sc-d{color:#C8C8C4}
.mk-sc li:last-child .mk-sc-o{background:#2A2A2C}
.mk-sc li:last-child .mk-sc-o span{color:#8A8C92}
/* 06 Areas（v1.2＝10/1 本人が B を選択）：左に7つの領域の目次（今のカードの名前が灰から墨へ・下線が伸びる・押すとそのカードへ）＋右に重なるカード（HUGE の Solutions の型）。
   カードは1枚ずつ画面に留まり、次のカードが 20px ずらして上に重なる。下に隠れたカードは奥ほど小さく暗くなり、ピントが外れる（--dim・--depth・.cov は JS） */
.mk-ar{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.mk-ar-ix{position:sticky;top:100px}
.mk-ar-ix ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rl)}
.mk-ar-ix li{position:relative;border-bottom:1px solid var(--rl)}
.mk-ar-ix li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink);transition:width .7s var(--ease)}
.mk-ar-ix li.on::after{width:100%}
.mk-ar-ix button{appearance:none;background:none;border:0;margin:0;width:100%;padding:16px 0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;text-align:left;cursor:pointer;font:inherit;font-size:clamp(16px,1.45vw,21px);font-weight:900;line-height:1.45;letter-spacing:-.01em;color:#A9AAAE;transition:color .6s var(--ease)}
.mk-ar-ix .n{font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.mk-ar-ix li.said button,.mk-ar-ix li.on button{color:var(--ink)}
.mk-ar-ix button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mk-stk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:64px}
.mk-stk>li{position:sticky;top:calc(100px + var(--i,0) * 20px)}
.mk-stk-c{position:relative;display:flex;overflow:hidden;min-height:clamp(300px,52svh,470px);background:var(--card);border:1px solid var(--rl);border-radius:6px;transform-origin:50% 0;transform:scale(calc(1 - var(--depth,0) * .028))}
.mk-stk-c::after{content:"";position:absolute;inset:0;z-index:5;background:var(--ink);opacity:calc(var(--dim,0) * .22);pointer-events:none}
.mk-stk-in{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:34px 40px 38px}
.cov .mk-stk-in{filter:blur(calc(var(--dim,0) * 7px))}
.mk-stk-n{margin:0;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(64px,6.4vw,104px);line-height:.82;letter-spacing:-.055em;color:var(--ink)}
.mk-stk-t{margin:0 0 12px;font-size:clamp(30px,3.5vw,56px);line-height:1.14;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
.mk-stk-d{margin:0;max-width:26em;font-size:clamp(16px,1.3vw,18px);line-height:1.8;color:var(--gray)}
@media (prefers-reduced-motion: reduce){.mk-ar-ix li::after,.mk-ar-ix button{transition:none}}
/* 07 Steps（A）：横のタイムライン＋「私たちの担当／分担を決める」の境目 */
.mk-sp{position:relative;padding-top:44px}
.mk-sp-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;position:relative}
.mk-sp-l::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--ink)}
.mk-sp-l>li{position:relative;padding-top:34px}
.mk-sp-dot{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--ink)}
.mk-sp-l>li.opt .mk-sp-dot{background:var(--paper2);border:1px dashed var(--ink)}
.mk-sp-n{margin:0 0 8px;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--meta)}
.mk-sp-t{margin:0 0 12px;font-size:clamp(22px,2.2vw,30px);font-weight:900;line-height:1.35}
.mk-sp-tag{display:inline-block;margin:0 0 12px;padding:3px 10px;border:1px solid var(--ink);border-radius:999px;font-size:13px;font-weight:700}
.mk-sp-d{margin:0;font-size:15px;line-height:1.85;color:var(--gray)}
.mk-sp-ld{margin:0 0 8px;font-size:15.5px;line-height:1.7;font-weight:700}
.mk-sp-l .hx-ar-s,.mk-cs .hx-ar-s{margin-top:14px;padding-top:12px;border-top:1px solid var(--rl)}
.mk-cs-st{display:block;margin:0 0 4px;font-size:16px;font-weight:900;color:var(--ink)}
.mk-sp-bd{position:absolute;left:calc((200% + 20px) / 3);top:0;bottom:0;width:0;border-left:1px dashed var(--ink)}
.mk-sp-bd span{position:absolute;top:2px;white-space:nowrap;font-size:12.5px;font-weight:700}
.mk-sp-bd .l{right:12px}
.mk-sp-bd .r{left:12px;color:var(--gray)}
@media (max-width:1100px){.mk-dz{grid-template-columns:1fr;gap:26px}.mk-dz li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 28px;align-items:start}
  .mk-dz-n{grid-column:1 / -1}.mk-dz-k::after{margin:14px 0 14px}.mk-dz li:not(:last-child)::after{content:"↓";right:auto;left:calc(50% - 14px);top:auto;bottom:-27px}
  .mk-sc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.mk-cs{grid-template-columns:1fr;gap:30px}.mk-cs-w{min-height:0}.mk-ar{grid-template-columns:1fr}.mk-ar-ix{display:none}
  .mk-tl-h{display:none}.mk-tl li{grid-template-columns:36px minmax(0,1fr);gap:10px 12px;padding:22px 20px}.mk-tl-ar{grid-column:2;text-align:left}.mk-tl-ar::before{content:"↓";}.mk-tl-ar span{display:none}.mk-tl li>div{grid-column:2}
  .mk-sp{padding-top:0}.mk-sp-l{grid-template-columns:1fr;gap:0}.mk-sp-l::before{left:6px;right:auto;top:6px;bottom:0;border-top:0;border-left:1px solid var(--ink)}
  .mk-sp-l>li{padding:0 0 30px 34px}.mk-sp-bd{display:none}.mk-sp-l>li.opt{margin-top:26px;padding-top:30px;border-top:1px dashed var(--ink)}
  .mk-sp-l>li.opt::before{content:attr(data-bd);position:absolute;left:34px;top:-11px;padding:0 8px;background:var(--paper2);font-size:12.5px;font-weight:700}}
@media (max-width:760px){.mk-sc{grid-template-columns:1fr}.mk-dz li{grid-template-columns:1fr}.mk-tl-r{grid-template-columns:1fr;gap:0}.mk-tl-r dd{margin-bottom:10px}
  .mk-stk{gap:40px}.mk-stk>li{top:calc(88px + var(--i,0) * 14px)}.mk-stk-in{padding:24px 22px 28px;gap:20px}}

/* ---- ご相談の例（cz-）v1.0・10/1：相談の型を大きく。1件1枚のカードに、左から 灰の矢羽根（番号・お悩み）→ まず確かめること → 私たちがすること＋その事業のページへ。
   マーケ・HX の Cases（矢羽根が下を向く縦の型）を横に倒して大きくしたもの。1100px 以下は2列（右に確かめること・すること）、760px 以下は縦に積む（矢羽根は下向き） ---- */
.cz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.cz-r{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.6fr) minmax(0,3.4fr);align-items:stretch;overflow:hidden;background:var(--card);border-radius:3px}
.cz-w{display:flex;flex-direction:column;justify-content:center;padding:34px 70px 38px 36px;background:var(--paper2);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,0 100%)}
/* 地の色が濃い節（alt）では、矢羽根が地に溶けるので一段濃い灰（メンバーの写真の場所と同じ #D3D2CD）に */
.tp-sec.alt .cz-w{background:#D3D2CD}
.cz-n{margin:0 0 20px;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(48px,4.6vw,76px);line-height:.82;letter-spacing:-.05em;color:var(--ink)}
.cz-t{margin:0;font-size:clamp(22px,2.1vw,32px);line-height:1.45;font-weight:900;letter-spacing:-.01em;text-wrap:pretty}
.cz-q,.cz-d{display:flex;flex-direction:column;justify-content:center;padding:34px 34px 36px}
.cz-qt{margin:0;font-size:clamp(19px,1.6vw,24px);line-height:1.5;font-weight:900;text-wrap:pretty}
.cz-d{border-left:1px solid var(--rl)}
.cz-dt{margin:0;font-size:15px;line-height:1.85;color:var(--gray)}
.cz-d .acts{margin-top:20px}
@media (max-width:1100px){.cz-r{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto}.cz-w{grid-row:1 / 3}
  .cz-q{padding-bottom:22px}.cz-d{border-left:0;border-top:1px solid var(--rl);margin:0 34px;padding:22px 0 34px}}
@media (max-width:760px){.cz-r{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.cz-w{grid-row:auto;padding:24px 22px 46px;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),50% 100%,0 calc(100% - 24px))}
  .cz-n{margin-bottom:14px}.cz-q{padding:20px 22px 18px}.cz-d{margin:0 22px;padding:18px 0 26px}}
/* 320px ではお悩みの見出しの後半（「、」の後のかたまり）が1行に入らずカードからはみ出した → 400px 以下は文節で折る */
@media (max-width:400px){.cz-t .cl{display:inline}}

/* ---- お知らせ（10/1 v1.2・WordPress の前提）：一覧の行は丸ごと詳しいページへのリンク。詳しいページ＝見出しは一覧より小さく・本文 46em の1段・WordPress のブロックの要素に効く書き方 ---- */
.nw-list li.nw-r{display:block;padding:0}
.nw-a{display:grid;grid-template-columns:120px 96px minmax(0,1fr) 28px;gap:24px;align-items:baseline;padding:22px 0}
.nw-ar{font-family:Manrope,system-ui,sans-serif;font-size:16px;color:var(--meta);text-align:right;transition:transform .4s var(--ease),color .4s var(--ease)}
.nw-a:hover .nw-t{text-decoration:underline;text-underline-offset:4px}
.nw-a:hover .nw-ar{transform:translateX(4px);color:var(--ink)}
.kh.kh-post{padding:156px 0 60px}
.kh-post .kh-w{font-size:clamp(56px,7vw,112px)}
.nd-meta{display:flex;align-items:baseline;gap:18px;margin:0 0 14px}
.nd-meta time{font-family:Manrope,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--gray);font-variant-numeric:tabular-nums}
.nd-meta span{font-size:13px;color:var(--meta)}
.nd-h{margin:0;max-width:26em;font-size:clamp(24px,2.8vw,40px);line-height:1.45;font-weight:900;letter-spacing:-.01em;text-wrap:balance}
.pb{max-width:46em}
.pb>:first-child{margin-top:0}
.pb p{margin:0 0 1.4em;font-size:clamp(16px,1.25vw,17.5px);line-height:2.05;color:var(--ink)}
.pb h2{margin:2.4em 0 .9em;padding-top:1.1em;border-top:1px solid var(--rl);font-size:clamp(20px,1.7vw,25px);line-height:1.5;font-weight:900}
.pb h3{margin:2em 0 .7em;font-size:clamp(17px,1.4vw,20px);line-height:1.5;font-weight:900}
.pb ul,.pb ol{margin:0 0 1.6em;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pb ul li{position:relative;padding-left:22px;font-size:16px;line-height:1.85}
.pb ul li::before{content:"";position:absolute;left:0;top:.92em;width:10px;height:1px;background:var(--ink)}
.pb ol{counter-reset:pb}
.pb ol li{position:relative;padding-left:36px;font-size:16px;line-height:1.85;counter-increment:pb}
.pb ol li::before{content:counter(pb,decimal-leading-zero);position:absolute;left:0;top:.18em;font:700 13px/1.6 Manrope,system-ui,sans-serif;color:var(--meta)}
.pb a:not(.wp-block-button__link){text-decoration:underline;text-underline-offset:3px}
.pb blockquote{margin:0 0 1.6em;padding:4px 0 4px 20px;border-left:2px solid var(--ink)}
.pb figure{margin:0 0 1.8em}
.pb img{display:block;max-width:100%;height:auto;border-radius:3px}
.pb figcaption{margin-top:8px;font-size:13px;color:var(--meta)}
.pb table{width:100%;margin:0 0 1.8em;border-collapse:collapse;border-bottom:1px solid var(--rl);font-size:15.5px}
.pb th,.pb td{padding:14px 12px 14px 0;border-top:1px solid var(--rl);text-align:left;vertical-align:top}
.pb th{width:30%;font-weight:700}
.pb .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 1.6em}
.pb .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;transition:background-color .3s,color .3s}
.pb .wp-block-button__link:hover{background:transparent;color:var(--ink)}
.pb .wp-block-button__link::after{content:"→";margin-left:10px;font-family:Manrope,system-ui,sans-serif}
.nd-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:46em;margin-top:64px;padding-top:28px;border-top:1px solid var(--rl)}
.nd-nav a{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;background:var(--card);border-radius:3px}
.nd-nav .nd-next{text-align:right}
.nd-k{font-family:Manrope,"Zen Kaku Gothic New",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--meta)}
.nd-t{font-size:15.5px;line-height:1.6;font-weight:700}
.nd-nav a:hover .nd-t{text-decoration:underline;text-underline-offset:3px}
.nd-back{margin-top:36px}
@media (max-width:900px){.nw-a{grid-template-columns:1fr 24px;gap:4px 12px}.nw-a .nw-d{grid-column:1}.nw-a .nw-c{grid-column:1}.nw-a .nw-t{grid-column:1}.nw-a .nw-ar{grid-column:2;grid-row:1 / 4;align-self:center}}
@media (max-width:760px){.kh.kh-post{padding:124px 0 44px}.nd-nav{grid-template-columns:1fr}.nd-nav .nd-next{text-align:left}.nd-none{display:none}}

/* ---- プライバシーポリシー（pv-）v1.0・10/1：左に目次（取り組む領域の目次と同じ見せ方＝今読んでいる項目の名前が灰から墨へ・下線が伸びる）＋右に本文の1段（46em まで）。
   本文は全案件共通の正本（helix_pages の PRIVACY）。900px 以下は目次を隠す ---- */
.pv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.pv-ix{position:sticky;top:100px;max-height:calc(100svh - 124px);overflow-y:auto}   /* 15項目で高さ約 620px。低い画面では目次の中で送る */
.pv-ix ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rl)}
.pv-ix li{position:relative;border-bottom:1px solid var(--rl)}
.pv-ix li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink);transition:width .7s var(--ease)}
.pv-ix li.on::after{width:100%}
.pv-ix a{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;padding:9px 0;font-size:14.5px;font-weight:700;line-height:1.5;color:#A9AAAE;transition:color .6s var(--ease)}
.pv-ix .n{font-family:Manrope,system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pv-ix li.said a,.pv-ix li.on a{color:var(--ink)}
.pv-ix a:hover{color:var(--ink)}
.pv-main{max-width:46em}
.pv-intro{padding-bottom:18px}
.pv-intro p{margin:0 0 1em;font-size:clamp(16px,1.3vw,18px);line-height:2;color:var(--ink)}
.pv-a{padding:30px 0 30px;border-top:1px solid var(--rl);scroll-margin-top:100px}
.pv-h{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-weight:900}
.pv-h .n{flex:none;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--meta)}
.pv-a p{margin:0 0 .8em;font-size:16px;line-height:2;color:var(--ink)}
.pv-l{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pv-l li{position:relative;padding-left:20px;font-size:16px;line-height:1.85}
.pv-l li::before{content:"";position:absolute;left:0;top:.92em;width:10px;height:1px;background:var(--ink)}
.pv-co{margin-top:18px;padding:24px 26px 26px;background:var(--card);border-radius:3px}
.pv-a .pv-co-n{margin:0 0 2px;font-weight:900}
.pv-a .pv-co-a{margin:0 0 16px;font-size:14.5px;line-height:1.8;color:var(--gray)}
@media (prefers-reduced-motion: reduce){.pv-ix li::after,.pv-ix a{transition:none}}
@media (max-width:900px){.pv{grid-template-columns:1fr}.pv-ix{display:none}}
@media (max-width:760px){.pv-a{padding:24px 0}.pv-co{padding:20px 20px 22px}}

/* 03 こんな会社と：見せ方の比較（A 線画／B 大きな字）。絵の高さをそろえて、罫線の位置を3つで合わせる */
.hx-who.v li{display:flex;flex-direction:column;padding:0;border-top:0}
.hx-who-tx{padding-top:20px;border-top:2px solid var(--ink)}
.hx-who-t{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.6;font-weight:900}
.hx-who-s{margin:4px 0 0;font-size:14px;line-height:1.7;font-weight:700;color:var(--gray)}
.hx-who-ill{display:block;width:100%;max-width:340px;height:auto;margin:0 0 14px}
.hx-who-ill *{vector-effect:non-scaling-stroke}
.hx-who-ill .k,.hx-who-ill .d,.hx-who-ill .f{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-who-ill rect[x],.hx-who-ill circle[r],.hx-who-ill path[d$="Z"]{fill:var(--paper2)}
.hx-who-ill .k{stroke:var(--ink)}
.hx-who-ill .d{stroke:var(--meta);stroke-dasharray:6 5}
.hx-who-ill .f{fill:none;stroke:var(--rl);stroke-width:1.5}
.hx-who-ill text{font:700 14px "Zen Kaku Gothic New",sans-serif;fill:var(--ink);stroke:none}
.hx-who-ill text.d{fill:var(--meta);stroke:none}
.hx-who-big{margin:0 0 16px;font-size:clamp(30px,3.2vw,48px);line-height:1.1;font-weight:900;letter-spacing:-.03em}
@media (max-width:900px){.hx-who.v{gap:48px}.hx-who-ill{max-width:320px}}
@media (max-width:600px){.hx-who.v{gap:30px}.hx-who-ill{max-width:250px;margin-bottom:8px}}

/* ==== WordPress で足した分（build_wp_theme.py） ==== */
/* ログインしているときの管理バーの下にヘッダーを置く */
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* お知らせの一覧のページ送り（11件目から） */
.nw-pg{display:flex;justify-content:space-between;gap:12px;margin-top:40px}
/* Contact Form 7：モックの .ct- の見た目を、プラグインの組み方（ラベルとリストの入れ子）に合わせる。プラグインの CSS は読まない */
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);border:0;word-wrap:normal!important}
.wpcf7 .hidden-fields-container{display:none}
.ct-form .wpcf7-form-control-wrap{display:block;position:relative}
/* 入力欄・同意の行は、モックではグリッド・フレックスの子（ブロック扱い）。プラグインの入れ子だと文字の行の高さが下に付いて 8px ずれた（10/1 撮って比べて発見）→ ブロックにそろえる */
.ct-form .wpcf7-form-control-wrap .ct-in{display:block}
.ct-agree .wpcf7-form-control,.ct-agree .wpcf7-list-item{display:block}
.ct-kinds .wpcf7-form-control-wrap{display:contents}
.ct-form .cf-turnstile{min-height:65px}
.ct-kinds .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px}
.ct-kinds .wpcf7-list-item{position:relative;margin:0}
.ct-kinds .wpcf7-list-item label{display:block}
.ct-kinds .wpcf7-list-item input{position:absolute;opacity:0;width:1px;height:1px}
.ct-kinds .wpcf7-list-item-label{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s}
.ct-kinds input:checked+.wpcf7-list-item-label{background:var(--ink);color:var(--paper)}
.ct-kinds input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--ink);outline-offset:3px}
.ct-agree .wpcf7-list-item{margin:0}
.ct-agree label{display:flex;align-items:center;gap:10px}
.wpcf7-not-valid-tip{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}
.wpcf7-not-valid-tip::before{content:"— "}
/* 同じ欄に確かめのメッセージが2つ付くことがある（画面側の確かめと、サーバーの答えの両方で足される・10/1 ローカルで確認）→ 1つだけ見せる */
.wpcf7-not-valid-tip+.wpcf7-not-valid-tip{display:none}
.ct-in.wpcf7-not-valid{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wpcf7 form .wpcf7-response-output{margin:0;padding:14px 16px;border:1px solid var(--ink);border-radius:3px;font-size:14px;line-height:1.7}
.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,.wpcf7 form.submitting .wpcf7-response-output{display:none}
.wpcf7 form.submitting .bt{opacity:.5;pointer-events:none}
.wpcf7-spinner{display:none}