/* 自動生成：kitomori/index.html の <style> の写し。直接は編集しない（tools/build_articles.py） */

/* Layout: 乗富鉄工所型の「英字大見出し＋小さな日本語」を全章でくり返す白地の一枚もの。
   鋳鉄の黒（文字・ボタン）× 湯の橙（強調）× 黄色のマーカー（ラベル）。写真は人と現場を大きく。 */
:root{
  /* 配色はハーマス「キトモリ説明資料 v14」に合わせる */
  --bg:#ffffff;
  --ink:#1b2a4a;         /* ネイビー */
  --sub:#4a5d78;         /* スレート */
  --line:#d3dde9;
  --soft:#f4f6f9;        /* 資料の面 */
  --hot:#b7792f;         /* 真鍮 */
  --marker:#f8eee2;      /* 真鍮の淡色マーカー（控えめ） */
  --btn:#1b2a4a;
  --on-btn:#ffffff;
  --f-en:"Archivo","Arial Black",sans-serif;
  --f-jp:"Zen Kaku Gothic New","Hiragino Sans","Meiryo",sans-serif;
}
/* スマホがダークモードでも、PCと同じ明るい配色で表示する */
:root{color-scheme:light}

*{box-sizing:border-box}
/* 要所だけ濃紺の帯（ヒーロー・聖火台・お問い合わせ）。トークンを局所的に上書き */
.navy{--bg:#1b2a4a;--ink:#ffffff;--sub:#b4c0d2;--line:rgba(255,255,255,.18);--soft:#22304a;--hot:#d6a25e;--marker:rgba(214,162,94,.28);--btn:#ffffff;--on-btn:#1b2a4a;background:var(--bg);color:var(--ink)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-jp);font-size:16px;line-height:1.9;margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
img{display:block;max-width:100%}

/* ヘッダー */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:40px;height:40px}
.logo b{font-size:1.35rem;font-weight:900;letter-spacing:.06em;line-height:1}
.logo small{display:block;font-family:var(--f-en);font-size:.62rem;letter-spacing:.14em;color:var(--sub);margin-top:4px}
.menu-btn{width:64px;height:64px;background:var(--btn);border:0;display:grid;place-items:center;cursor:pointer;margin-right:-4px}
.menu-btn i{display:block;width:30px;height:2px;background:var(--on-btn);box-shadow:0 -9px 0 var(--on-btn),0 9px 0 var(--on-btn)}
.drawer{position:fixed;inset:0;background:var(--btn);color:var(--on-btn);z-index:30;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-left,0px))}
.drawer nav{display:grid;gap:10px;text-align:center}
.drawer a{font-family:var(--f-en);font-weight:900;font-size:clamp(1.6rem,5vw,2.6rem);text-decoration:none;letter-spacing:.02em;line-height:1.2}
.drawer a span{display:block;font-family:var(--f-jp);font-size:.8rem;font-weight:700;letter-spacing:.1em;opacity:.7}
.drawer .close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));background:none;border:2px solid var(--on-btn);color:var(--on-btn);font:inherit;font-weight:700;padding:6px 16px;cursor:pointer}

/* 上部のナビゲーションバー（PC）。スマホでは従来のメニューボタン */
.gnav{display:flex;align-items:center;gap:22px;font-size:.86rem;font-weight:700}
.gnav a{text-decoration:none;white-space:nowrap;padding-block:6px;border-bottom:2px solid transparent}
.gnav a:hover{border-bottom-color:var(--hot)}
.gnav .gcta{background:var(--btn);color:var(--on-btn);padding:9px 18px;border:0;margin-left:6px}
.gnav .gcta:hover{background:var(--hot);color:#fff}
.menu-btn{display:none}
@media (max-width:1080px){.gnav{gap:16px;font-size:.8rem}}
@media (max-width:960px){.gnav{display:none}.menu-btn{display:grid}}

/* トップのスライド：同じ大きさで自動で切り替わる */
.slider{position:relative;aspect-ratio:16/7;max-width:100%;overflow:hidden;background:var(--soft)}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.slide.is-on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease-out}
.slide.is-on img{transform:scale(1)}
.dots{position:absolute;right:16px;top:16px;display:flex;gap:8px;z-index:2}
.dot{width:28px;height:4px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer}
.dot[aria-current="true"]{background:#ffffff}
.pause{position:absolute;right:12px;top:10px;z-index:2;background:rgba(27,42,74,.55);color:#fff;border:0;width:32px;height:28px;font-size:.8rem;cursor:pointer}
@media (max-width:640px){.slider{aspect-ratio:4/3}}


/* ヒーロー */
.hero{position:relative;padding-block:24px 64px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:end}
.hero .ph{position:relative;margin:0;overflow:hidden;background:var(--soft)}
.hero .ph img{width:100%;height:100%;object-fit:cover}
.hero .a{aspect-ratio:4/5}
.hero .b{aspect-ratio:5/4}
.big{font-family:var(--f-en);font-weight:900;color:var(--ink);line-height:.86;letter-spacing:-.02em;font-size:clamp(3.4rem,11vw,9.2rem);margin-top:-0.55em;position:relative;z-index:2;mix-blend-mode:normal}
.big span{color:var(--hot)}
.catch{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;margin-top:22px}
.catch h1{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:900;letter-spacing:.04em}
.catch p{color:var(--sub);font-weight:700}

/* 章の見出し（英字＋日本語） */
.sec{padding-block:88px}
.sec.soft{background:var(--soft)}
.ttl{display:grid;gap:4px;margin-bottom:36px}
.ttl .en{font-family:var(--f-en);font-weight:900;font-size:clamp(2rem,5vw,3.1rem);line-height:1;letter-spacing:.01em}
.ttl .en::first-letter{color:var(--hot)}
.ttl .jp{font-size:.9rem;font-weight:700;letter-spacing:.12em}
.lead{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:900;line-height:1.6;margin-bottom:16px}
.body{max-width:34em;color:var(--sub)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* ボタン（黒い斜め切り） */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--btn);color:var(--on-btn);text-decoration:none;font-weight:700;padding:12px 30px 12px 22px;clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 14px) 100%,0 100%);margin-top:22px;font-size:.95rem}
.btn::after{content:"→";font-family:var(--f-en)}
.btn:hover{background:var(--hot);color:#fff}
.mk{background:linear-gradient(transparent 58%,var(--marker) 58%);padding:0 .1em;color:inherit}

/* ニュース */
.news{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.news a{text-decoration:none;display:grid;gap:10px;min-width:0}
.news .th{aspect-ratio:4/3;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.news .th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news a:hover .th img{transform:scale(1.04)}
.news .th.ty{font-family:var(--f-en);font-weight:900;font-size:1.5rem;color:var(--hot);text-align:center;line-height:1.1}
.news .meta{font-family:var(--f-en);font-size:.78rem;font-weight:700;color:var(--sub)}
.news .meta b{color:var(--ink);margin-left:6px}
.news p{font-size:.9rem;line-height:1.6;font-weight:700}
.sample{display:inline-block;font-size:.72rem;font-weight:700;background:var(--marker);color:var(--ink);padding:0 8px;margin-left:10px;vertical-align:middle}

/* 数字 */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.num{padding:26px 22px 24px 0;border-right:1px solid var(--line);display:grid;gap:4px}
.num + .num{padding-left:22px}
.num:last-child{border-right:0}
.num .v{font-family:var(--f-en);font-weight:900;font-size:clamp(3rem,7vw,5.2rem);line-height:1;letter-spacing:-.02em}
.num .v small{font-family:var(--f-jp);font-size:1rem;font-weight:900;margin-left:4px}
.num .v.hot{color:var(--hot)}
.num .k{font-weight:900}
.num .d{font-size:.84rem;color:var(--sub);line-height:1.6}
.src{font-size:.74rem;color:var(--sub);margin-top:14px}

/* サービス3段 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--bg);padding:26px 24px 28px;display:grid;gap:10px;align-content:start;position:relative}
.step .no{font-family:var(--f-en);font-weight:900;font-size:3.4rem;line-height:1;color:var(--hot)}
.step h3{font-size:1.5rem;font-weight:900}
.step .en2{font-family:var(--f-en);font-size:.72rem;letter-spacing:.16em;color:var(--sub);font-weight:800}
.step p{color:var(--sub);font-size:.92rem}

/* プロジェクト */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.pj{text-decoration:none;display:grid;gap:14px;min-width:0}
.pj .th{aspect-ratio:16/9;overflow:hidden;background:var(--soft);position:relative}
.pj .th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pj:hover .th img{transform:scale(1.04)}
.pj .th .tag{position:absolute;left:0;top:0;background:var(--hot);color:#ffffff;font-weight:900;font-size:.78rem;padding:4px 12px}
.pj .th.ty{display:grid;place-items:center;background:var(--ink)}
.pj .th.ty span{font-family:var(--f-en);font-weight:900;color:var(--bg);font-size:clamp(1.6rem,4vw,2.6rem);line-height:1;text-align:center}
.pj .th.ty span em{font-style:normal;color:var(--hot)}
.pj h3{font-size:1.25rem;font-weight:900}
.pj p{color:var(--sub);font-size:.92rem;line-height:1.7}
.pj .go{font-family:var(--f-en);font-weight:800;font-size:.8rem;letter-spacing:.1em}
.pj .go::after{content:" →"}

/* ストーリー */
.story .body{color:var(--sub)}
.years{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border-top:1px solid var(--line)}
.years div{padding:20px 20px 0 0;display:grid;gap:6px}
.years b{font-family:var(--f-en);font-weight:900;font-size:2.6rem;line-height:1;color:var(--hot)}
.years p{font-size:.9rem;color:var(--sub);line-height:1.7}

/* 人 */
.person{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center}
.avatar{aspect-ratio:3/4;background:var(--soft);display:grid;place-items:center;color:var(--sub);font-size:.8rem;font-weight:700;border:2px dashed var(--line)}
.person .nm{font-size:1.6rem;font-weight:900}
.person .role{font-size:.84rem;color:var(--sub);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips span{border:1.5px solid var(--ink);padding:2px 12px;font-size:.8rem;font-weight:700}

/* お問い合わせ */
.contact{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding-block:36px}
.contact .tel{font-family:var(--f-en);font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.1}
.bigbtn{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--btn);color:var(--on-btn);text-decoration:none;font-weight:900;font-size:1.1rem;padding:22px 40px;min-width:min(340px,100%)}
.bigbtn::after{content:"→";font-family:var(--f-en)}
.bigbtn:hover{background:var(--hot);color:#fff}

footer{background:#1b2a4a;color:#ffffff;padding-block:44px 52px;text-align:center}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-family:var(--f-en);font-weight:800;font-size:.82rem;letter-spacing:.06em}
footer nav a{text-decoration:none}
footer p{font-size:.72rem;opacity:.6;margin-top:22px}

/* PICK UP バッジ */
.pick{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:15;background:var(--bg);border:1px solid var(--line);border-top:2px solid var(--hot);padding:26px 18px 14px;width:236px;box-shadow:0 8px 24px rgba(27,42,74,.14)}
.pick .lbl{position:absolute;top:-16px;left:-10px;background:var(--hot);color:#fff;font-family:var(--f-en);font-weight:900;font-size:.95rem;padding:4px 14px;transform:rotate(-6deg)}
.pick .x{position:absolute;top:4px;right:6px;background:none;border:0;font-size:1.2rem;font-weight:900;cursor:pointer;color:var(--ink);line-height:1}
.pick a{display:block;text-decoration:none;padding-block:6px;border-bottom:1px solid var(--line)}
.pick a:last-of-type{border-bottom:0}
.pick small{display:block;font-family:var(--f-en);font-size:.62rem;letter-spacing:.14em;font-weight:800;color:var(--sub)}
.pick b{font-size:.95rem}

@media (max-width:900px){
  .news{grid-template-columns:repeat(2,1fr)}
  .two,.person{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .avatar{max-width:220px}
}
@media (max-width:640px){
  .hero .grid{grid-template-columns:1fr 1fr;gap:8px}
  .nums{grid-template-columns:1fr}
  .num,.num + .num{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .projects{grid-template-columns:1fr}
  .years{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .pick{width:200px;padding:22px 14px 10px}
  .sec{padding-block:64px}
}


/* ---- 勢いをハーマスのサイトに合わせる ----
   書体はNoto Sans JP＋Barlow（ハーマスと同じ）。極太（900）をやめて700まで、英字は600で字間広め。
   マーカーの塗り・斜め切りのボタン・傾いたラベルをやめ、細い線と四角いボタンにそろえる。 */
:root{--f-en:"Barlow","Helvetica Neue",Arial,sans-serif;--f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif}
body{font-size:17px;line-height:1.8;letter-spacing:.05em}
.logo b,.catch h1,.lead,.num .k,.step h3,.pj h3,.person .nm,.bigbtn,.pj .th .tag,.news p,.sample{font-weight:700}
.big{font-weight:600;font-size:clamp(2.6rem,7.4vw,6rem);letter-spacing:.03em;line-height:.95}
.catch h1{font-size:clamp(1.45rem,3.2vw,2.05rem);letter-spacing:.05em}
.catch p{font-weight:500}
.ttl .en{font-weight:600;font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:.06em}
.ttl .jp{color:var(--sub)}
.lead{font-size:clamp(1.2rem,2.5vw,1.55rem);line-height:1.65}
.body{color:var(--sub)}
.mk{background:none;color:var(--hot);padding:0}
.btn{clip-path:none;padding:13px 24px;font-size:.92rem}
.num .v,.step .no,.years b,.contact .tel{font-weight:600}
.num .v{letter-spacing:-.01em}
.step .no{font-size:2.6rem}
.step h3{font-size:1.3rem}
.news .th.ty,.pj .th.ty span{font-weight:600;letter-spacing:.04em}
.drawer a{font-weight:600}
.pick{border-top-width:2px}
.pick .lbl{transform:none;top:-11px;left:14px;font-size:.7rem;font-weight:600;letter-spacing:.16em;padding:2px 10px}
.chips span{border-width:1px;font-weight:500}
/* 上部のバーは章の英字ラベルと同じ表記・書体に */
.gnav{font-family:var(--f-en);font-weight:600;font-size:.84rem;letter-spacing:.14em;gap:20px}
.gnav .gcta{letter-spacing:.14em}
@media (max-width:1080px){.gnav{gap:14px;font-size:.78rem;letter-spacing:.1em}}

/* ---- ページを分ける（ハーマスのサイトと同じ形）。上のバーで各ページへ ---- */
.drawer[hidden],.crumb[hidden],.pick[hidden]{display:none}
.page{display:none}
.page.on{display:block}
#p-about > .sec,#p-story > .sec,#p-people > .sec,#p-news > .sec,#p-contact > .sec,#p-privacy > .sec{padding-top:48px}
.page{scroll-margin-top:76px}
.crumb{font-family:var(--f-en);font-weight:600;font-size:.74rem;letter-spacing:.12em;color:var(--sub);padding-top:18px}
.gnav a[aria-current="page"]{border-bottom-color:var(--hot)}

/* キトモリとは（木と森） */
.kimori{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:32px}
.kimori div{background:var(--bg);padding:26px 26px 28px;display:grid;gap:8px;align-content:start;border-top:2px solid var(--ink)}
.kimori b{font-family:var(--f-en);font-weight:600;font-size:.78rem;letter-spacing:.18em;color:var(--hot)}
.kimori h3{font-size:1.3rem;font-weight:700}
.kimori p{color:var(--sub);font-size:.95rem}

/* 4つのステップ */
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.note{font-size:.84rem;color:var(--sub);margin-top:20px}

/* お問い合わせ（ハーマスと同じフォーム） */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.clead{font-size:clamp(1.15rem,2.3vw,1.5rem);font-weight:700;line-height:1.7}
.cinfo h3{font-size:1rem;font-weight:700;margin:36px 0 12px}
.cinfo .chips{margin-top:0}
.cflow{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cflow li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.cflow b{font-family:var(--f-en);font-weight:600;color:var(--hot)}
.cflow small{display:block;color:var(--sub);font-size:.84rem}
form{display:grid;gap:16px}
form label{display:block;font-size:.88rem;font-weight:700}
form label input,form label textarea,form label select{display:block;width:100%;margin-top:6px;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--line);background:#ffffff;color:#1b2a4a}
.req{font-style:normal;font-size:.7rem;font-weight:500;border:1px solid currentColor;padding:0 6px;margin-left:8px;vertical-align:1px}
.err{display:block;margin-top:4px;color:#ffb3b3;font-size:.8rem;font-weight:500}
.err:empty{display:none}
.agree{display:flex;align-items:center;gap:10px;font-weight:500}
.agree input{width:18px;height:18px;margin:0;padding:0;accent-color:#b7792f}
.agree a,.policy a{text-decoration:underline}
.submit{justify-self:start;display:inline-flex;align-items:center;gap:14px;background:var(--btn);color:var(--on-btn);border:0;padding:16px 32px;font:inherit;font-weight:700;cursor:pointer}
.submit::after{content:"→";font-family:var(--f-en)}
.submit:hover{background:var(--hot);color:#fff}
.done{background:var(--soft);padding:12px 14px;font-size:.9rem}

/* プライバシーポリシー */
.policy{max-width:760px;font-size:.95rem;line-height:2}
.policy h3{font-size:1.05rem;font-weight:700;margin:36px 0 6px}
.policy ul{margin:8px 0;padding-left:1.4em}

footer{border-top:1px solid rgba(255,255,255,.14)}
/* フッターはハーマスと同じ炭色（家族の印） */
footer{background:#222220;color:#f0efe9}
footer .fco{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:16px;font-size:.78rem}
footer .fco a{text-decoration:none;opacity:.85}

@media (max-width:900px){
  .steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cgrid,.kimori{grid-template-columns:1fr}
}
@media (max-width:640px){.steps.four{grid-template-columns:1fr}}

/* ---- 案A：HOMEで「課題→キトモリとは→できること→次の一歩」を通して見せる ---- */
#p-service > .sec:first-child,#p-story > .sec:first-child,#p-news > .sec,#p-contact > .sec,#p-privacy > .sec{padding-top:48px}
.sec[id]{scroll-margin-top:76px}
.flow-no{display:inline-block;font-family:var(--f-en);font-weight:600;font-size:.78rem;letter-spacing:.2em;color:var(--hot);margin-bottom:6px}
.issues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.issues li{list-style:none;border-left:3px solid var(--hot);background:var(--soft);padding:16px 18px;font-weight:700}
.issues{padding:0}
.minnums{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.minnums div{display:flex;align-items:baseline;gap:10px}
.minnums b{font-family:var(--f-en);font-weight:600;font-size:2.4rem;line-height:1;color:var(--hot)}
.minnums b small{font-family:var(--f-jp);font-size:.9rem;margin-left:2px}
.minnums span{font-size:.86rem;color:var(--sub);line-height:1.5}
.areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.area{background:var(--bg);padding:22px 22px 24px;border-top:2px solid var(--ink)}
.area h3{font-size:1.1rem;font-weight:700;margin-bottom:10px}
.area ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.area li{font-size:.86rem;line-height:1.6;color:var(--sub)}
.area li b{display:block;color:var(--ink);font-weight:700}
.origin{border-left:3px solid var(--hot);padding:4px 0 4px 24px;margin-top:8px;max-width:40em}
.origin p + p{margin-top:1em}
.cond{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:24px;border-top:1px solid var(--line)}
.cond div{padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
.cond dt{font-size:.78rem;color:var(--sub);font-weight:700}
.cond dd{margin:4px 0 0;font-weight:700}
.logo svg.kmark{width:80px;height:43px}
/* ロゴの文字もハーマスと同じくらいの大きさ・濃さに */
.logo b{font-size:1.55rem;letter-spacing:.12em}
.logo small{font-size:.74rem;font-weight:600;letter-spacing:.16em;margin-top:6px}
/* ロゴはハーマスと同じくモノクロ（墨一色） */
.logo{color:#141414}
.logo small{color:#5a5a55}
/* 見出しの一文字目だけの色付けをやめる */
.ttl .en::first-letter{color:inherit}
/* トップの写真：横並びで、前後の写真が両端にチラ見えする */
.hero .slider{width:100vw;margin-left:calc(50% - 50vw);max-width:none;aspect-ratio:auto;overflow:hidden;background:none}
.track{display:flex;gap:16px;transition:transform 1s cubic-bezier(.45,0,.2,1);will-change:transform}
.track .slide{position:relative;inset:auto;flex:0 0 min(74vw,1040px);aspect-ratio:16/7;margin:0;opacity:.4;overflow:hidden;transition:opacity 1s}
.track .slide.is-on{opacity:1}
.track .slide img{width:100%;height:100%;object-fit:cover;transform:none}
.hero .slider .dots{display:none}
.hero .slider .dots-old{top:16px;right:calc((100vw - min(74vw,1040px)) / 2 + 16px)}
@media (max-width:640px){.hero .slider .dots{right:calc(8vw + 12px)}}
@media (max-width:640px){.track .slide{flex-basis:84vw;aspect-ratio:4/3}.track{gap:10px}}
/* 流れる写真に、取り組みやツールの案内を重ねる */
.promo{display:block;text-decoration:none;color:#ffffff}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,26,46,.82) 0%,rgba(17,26,46,.55) 45%,rgba(17,26,46,0) 75%)}
.promo .cap{position:absolute;left:clamp(20px,4vw,48px);top:clamp(20px,4vw,44px);z-index:1;display:grid;gap:10px;max-width:min(30em,60%)}
.promo .tag{justify-self:start;background:var(--hot);color:#ffffff;font-family:var(--f-en);font-weight:600;font-size:.74rem;letter-spacing:.16em;padding:3px 10px}
.promo b{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:700;line-height:1.35}
.promo .cp{font-size:.92rem;line-height:1.7;opacity:.92}
.promo .go{justify-self:start;font-weight:700;font-size:.9rem;border-bottom:1px solid currentColor;padding-bottom:2px}
.promo .go::after{content:" →";font-family:var(--f-en)}
.promo:hover .go{color:#e0b878}
.track .slide:not(.is-on) .cap{opacity:0;transition:opacity .4s}
.track .slide.is-on .cap{opacity:1;transition:opacity .6s .5s}
.promo.plain{background:#22304a}
.promo .ty{position:absolute;right:6%;top:50%;transform:translateY(-50%);font-family:var(--f-en);font-weight:600;font-size:clamp(2rem,6vw,4.6rem);line-height:1;text-align:right;color:rgba(255,255,255,.18)}
.promo .ty em{font-style:normal;color:rgba(224,184,120,.35)}
@media (max-width:640px){.promo .cap{max-width:85%}.promo .cp{display:none}}/* 箱のふちの飾り線をやめる（面だけで区切る） */
.issues li{border-left:0;padding:18px 20px}
.kimori div,.area{border-top:0}
.origin{border-left:0;padding-left:0}
.pick{border-top:1px solid var(--line)}

/* 読みやすさ：ハーマスのサイトと同じく、文字を一回り大きく・一段太く・濃く */
html{font-size:18px}
body{font-size:18px;font-weight:500;letter-spacing:.02em}
:root{--sub:#34435c}
.navy{--sub:#d3dbe7}
.body,.step p,.kimori p,.area li,.pj p,.years p,.num .d,.ig-note,.cflow small,.note{font-weight:500}
.body{max-width:38em}
.src{font-size:.78rem}
.gnav{font-size:.9rem}

/* スクロールで下から「にゅっ」と出てくる */
.rv{opacity:0}
.rv.in{animation:kt-rise .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
.ig-count > .rv.in{animation-name:kt-pop}
@keyframes kt-rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes kt-pop{0%{opacity:0;transform:translateY(48px) scale(.85)}70%{opacity:1;transform:translateY(-6px) scale(1.03)}100%{opacity:1;transform:none}}

/* 数字で見る川口（インフォグラフィック） */
.ig{margin-top:48px;display:grid;gap:56px}
.ig-block{border-top:2px solid var(--ink);padding-top:28px}
.ig-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px}
.ig-two > div{min-width:0}
.ig-h{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:700;line-height:1.6;margin-bottom:20px}
.ig-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ig-count div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px}
.ig-count b{font-family:var(--f-en);font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--hot);font-variant-numeric:tabular-nums}
.ig-count b i{font-style:normal}
.ig-count small{font-weight:700}
.ig-count span{grid-column:1 / -1;grid-row:1;font-size:.86rem;color:var(--sub);margin-bottom:8px;line-height:1.6;min-height:3.2em;align-self:end}
.ig-count b,.ig-count small{grid-row:2}
.ig-count em{font-style:normal;font-weight:700;color:var(--ink)}
.ig-line{width:100%;height:auto;display:block;color:var(--ink)}
.ig-line .ar{fill:var(--marker)}
.ig-line .ln{fill:none;stroke:var(--hot);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ig-line .ax{stroke:var(--line);stroke-width:1}
.ig-line text{fill:var(--sub);font-size:12px;font-family:var(--f-en)}
.ig-line .lb{fill:var(--ink);font-size:15px;font-weight:700}
.ig-line .dot{fill:var(--hot)}
.ig-side{background:var(--soft);padding:24px;align-self:start}
.ig-sub{font-weight:700;margin-bottom:12px}
.ig-ba{display:grid;grid-template-columns:1fr auto auto auto;align-items:baseline;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.ig-ba span{font-size:.86rem;color:var(--sub)}
.ig-ba b{font-family:var(--f-en);font-weight:600;font-size:1.8rem;line-height:1}
.ig-ba b.hot{color:var(--hot)}
.ig-ba i{font-style:normal;color:var(--sub)}
.ig-ba small{grid-column:1 / -1;font-size:.72rem;color:var(--sub)}
.ig-note{font-size:.9rem;color:var(--sub);margin-top:14px;line-height:1.8}
.ig-note b{color:var(--ink)}
.ig-bars{display:grid;gap:14px}
.bar{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:12px}
.bar span{font-size:.88rem;font-weight:700}
.bar i{display:block;height:22px;background:var(--hot);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.bar b{font-family:var(--f-en);font-weight:600;font-size:1.1rem}
.ig-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;height:200px}
.col{display:grid;grid-template-rows:1fr auto auto;height:100%;text-align:center}
.col i{align-self:end;display:block;background:var(--line);height:0;transition:height 1.2s cubic-bezier(.2,.7,.2,1)}
.col.hot i{background:var(--hot)}
.col b{font-family:var(--f-en);font-weight:600;font-size:.9rem;margin-top:6px}
.col span{font-size:.74rem;color:var(--sub)}
@media (max-width:900px){.ig-two{grid-template-columns:1fr}.ig-count{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ig-no{display:block;font-family:var(--f-en);font-weight:600;font-size:.85rem;color:#b7792f;letter-spacing:.08em;margin-bottom:2px}
.ig-ba span{font-size:.86rem}
.ici{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#ebe8e0;color:#1b2a4a}
.ici svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ig-count .ici{grid-column:1 / -1;grid-row:1;margin-bottom:12px}
.ig-count span:not(.ici){grid-row:2}
.ig-count b,.ig-count small{grid-row:3}
.icst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.icst > div{background:#ffffff;padding:22px 22px 20px;display:grid;gap:10px;align-content:start}
.icst .l{font-size:.92rem;line-height:1.6;min-height:3.2em}
.icst .l b{color:#1b2a4a}
.icst .v{font-family:var(--f-en);font-weight:600;font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;color:#b7792f}
.icst .v.sub{color:#8a8f99}
.icst .v i{font-style:normal}
.icst .v small{font-family:var(--f-jp);font-size:.9rem;font-weight:700;margin-left:4px;color:#1b2a4a}
@media (max-width:900px){.icst{grid-template-columns:1fr}}
/* 数字で見る川口：3つの論点を横一列に */
.ig-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ig-three > div{min-width:0;display:flex;flex-direction:column}
.ig-three .ig-h{font-size:1.1rem;min-height:3.2em;margin-bottom:14px}
.ig-three .ig-cols{height:140px;gap:6px}
.ig-three .ig-bars{gap:12px;margin:20px 0 6px}
.ig-three .bar{grid-template-columns:4.6em 1fr auto;gap:8px}
.ig-three .ig-note{font-size:.86rem}
.ig-srcs{margin:12px 0 0}
.ig-three{margin-bottom:28px}
@media (max-width:900px){.ig-three{grid-template-columns:1fr}.ig-three .ig-h{min-height:0}}
.ig-view b{font-size:.82rem;color:#b7792f}
.ig-view p{margin-top:4px;font-size:.95rem}
.ig-end{background:#1b2a4a;color:#ffffff;padding:36px 40px;margin-top:8px}
.bar{grid-template-columns:120px 1fr minmax(64px,auto)}
.bar b{white-space:nowrap}
.ig-end h3{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:700;line-height:1.6}
.ig-end h3 span{color:#d6a25e}
.ig-end p{margin-top:14px;max-width:44em;color:#d3dbe7}
.ig-end .src{color:#b4c0d2}
.ig-end b{color:#ffffff}
.ig-end .fact{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.9rem}
.body b,.lead b,.ig-note b,.wnote b{font-weight:700;color:var(--ink)}
@media (max-width:640px){.ig-end{padding:26px 22px}}
@media (max-width:640px){.bar{grid-template-columns:96px 1fr 56px}}
@media (max-width:900px){.issues,.areas,.cond{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.issues,.areas,.cond{grid-template-columns:1fr}}
/* ===== 試し：ハーマス寄せ（骨格をそろえ、紺と写真・動きで個性を残す） ===== */
:root{--bg:#f6f4ef;--soft:#ebe8e0;--line:#d6d2c8;--ink:#1b2a4a;--sub:#1f2530;--f-en:"Jost","Futura",sans-serif;--f-jp:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif}
/* ロゴの文字だけは、これまでの書体のまま */
/* ヘッダー：本文と同じ書体にして、少し大きく */
.logo b{font-family:var(--f-jp);font-size:1.75rem;font-weight:700;letter-spacing:.1em}
.logo small{font-family:var(--f-jp);font-size:.78rem;letter-spacing:.12em}
.gnav,.gnav .gcta{font-family:var(--f-jp)!important;font-size:1rem!important;font-weight:700!important;letter-spacing:.06em!important}
.gnav{gap:26px!important}
.gnav .gcta{padding:11px 22px}
@media (max-width:1080px){.gnav{gap:16px!important;font-size:.9rem!important}}
body{font-family:var(--f-jp)}
.hd{background:var(--bg)}
.hd .wrap{height:auto;padding-top:22px;padding-bottom:14px}
.sec[id]{scroll-margin-top:104px}
.gnav{font-family:var(--f-en);font-weight:500;letter-spacing:.08em}
/* 見出し：英字は小さなラベル＋短い線、日本語を大きく（ハーマスと同じ） */
.ttl{gap:10px}
.ttl::before{content:"";display:block;width:28px;height:2px;background:#cfac82}
.ttl .en{display:none!important}
.step .en2{display:none}
.ttl .en::before{content:"";width:28px;height:2px;background:#cfac82}
.ttl .jp{order:1;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;letter-spacing:.04em;color:var(--ink)}
.navy .ttl .jp{color:#ffffff}
.flow-no{display:none}
.big{font-family:var(--f-en);font-weight:500;letter-spacing:.04em}
.lead{font-weight:700}
.kimori div,.step,.area{background:#ffffff}
.issues li{background:#ebe8e0}
.ig-side{background:#ebe8e0}/* キトモリとは：木と森の図解 */
.kdiag{display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr;align-items:center;gap:16px;margin-top:36px;max-width:980px}
.kd-node{aspect-ratio:1;border-radius:50%;background:#ffffff;display:grid;place-content:center;justify-items:center;gap:2px;text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.kd-node:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(27,42,74,.12)}
.kd-node svg{width:44px;height:44px;margin-bottom:6px}
.kd-node b{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1}
.kd-node small{color:var(--sub);font-size:.86rem}
.kd-core{aspect-ratio:1;border-radius:50%;background:#b7792f;color:#ffffff;display:grid;place-content:center;justify-items:center;gap:6px}
.kd-core small{font-size:.9rem;font-weight:500;opacity:.92}
.kd-core b{font-size:clamp(1.8rem,3.8vw,2.8rem);letter-spacing:.06em}
.kd-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-family:var(--f-en)}
.kd-cap{max-width:560px;margin:20px auto 0;text-align:center;background:#f3e9dc;padding:16px 20px;font-size:.88rem;color:var(--sub)}
.kd-cap b{display:block;font-size:1.05rem;color:var(--ink);margin-bottom:2px}
.kimori a{background:#ffffff;padding:26px 26px 28px;display:grid;gap:8px;align-content:start;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
.kimori a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(27,42,74,.10)}
.kimori a b{font-family:var(--f-jp);font-weight:700;font-size:.82rem;letter-spacing:.06em;color:#b7792f}
.kimori a h3{font-size:1.3rem;font-weight:700}
.kimori a p{color:var(--sub);font-size:.95rem}
.kimori .go{font-weight:700;font-size:.9rem;margin-top:6px;color:var(--ink)}
.kimori .go::after{content:" →";font-family:var(--f-en)}
/* SERVICE：木・森それぞれの施策の流れ */
.mflow{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.mflow li{background:#ffffff;padding:24px 22px 26px;position:relative}
.mflow li + li::before{content:"→";position:absolute;left:-14px;top:50%;transform:translate(-50%,-50%);font-family:var(--f-en);color:#b7792f;font-weight:600}
.mflow b{font-family:var(--f-en);font-weight:600;font-size:1.8rem;color:#b7792f;line-height:1}
.mflow h3{font-size:1.1rem;font-weight:700;margin:10px 0 8px}
.mflow p{font-size:.9rem;color:var(--sub);line-height:1.8}
.soft .mflow li{background:#ffffff}
.mtags{margin-top:20px}
@media (max-width:900px){.kdiag{grid-template-columns:1fr 1fr;gap:12px}.kd-core{grid-column:1 / -1;grid-row:1;max-width:240px;justify-self:center;width:100%}.kd-arrow{display:none}.mflow{grid-template-columns:1fr}.mflow li + li::before{content:"↓";left:50%;top:-8px}}/* SERVICE：お悩み */
.worries{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.worries li{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center}
.wi{width:64px;height:64px;border-radius:14px;background:#ebe8e0;display:grid;place-items:center;color:var(--ink)}
.wi svg{width:34px;height:34px}
.worries b{display:block;font-size:1.15rem;font-weight:700}
.worries span{color:var(--sub);font-size:.95rem}
.wnote{margin-top:28px;font-weight:700}
.wcta{display:flex;align-items:center;gap:14px;margin-top:20px;background:#1b2a4a;color:#ffffff;text-decoration:none;font-weight:700;font-size:clamp(1.05rem,2vw,1.35rem);padding:20px 32px;border-radius:999px;transition:background .2s}
.wcta::before{content:"";width:22px;height:22px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 22V11M12 13c0-4 3-6 7-6 0 4-3 6-7 6zM12 11C12 7 9 5 5 5c0 4 3 6 7 6z'/%3E%3C/svg%3E")}
.wcta::after{content:"→";margin-left:auto;font-family:var(--f-en)}
.wcta:hover{background:#2a3d63}
/* SERVICE：見える化 */
.vgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;margin-top:32px;align-items:start}
.vpc,.vzoom{margin:0}
.vpc img,.vzoom img{width:100%;height:auto;display:block}
.vzoom figcaption{font-weight:700;font-size:.92rem;margin-bottom:8px}
.vzoom figcaption::first-line{color:inherit}
.vzoom img{border:1px solid var(--line)}
.vpts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;counter-reset:v}
.vpts li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;counter-increment:v}
.vpts li::before{content:counter(v);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:#b7792f;color:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:600;font-size:.9rem}
.vpts b{font-size:1.02rem}
.vpts span{grid-column:2;color:var(--sub);font-size:.88rem}
/* SERVICE：施策の例（課題→施策の対応） */
.pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.pcol{background:#ffffff;padding:22px 18px 20px}
.pcol h3{font-size:1.08rem;font-weight:700;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.pcol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pcol .q{display:block;font-size:.88rem;color:var(--sub);margin-bottom:4px}
.pcol .a{display:block;border:1px solid #e6d3b8;background:#fbf7f1;padding:8px 12px;font-weight:700;font-size:.92rem}
.pcol .a::before{content:"→ ";color:#b7792f;font-family:var(--f-en)}
@media (max-width:900px){.worries{grid-template-columns:1fr}.vgrid{grid-template-columns:1fr}.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pairs{grid-template-columns:1fr}}/* SERVICE：キトモリとは の流れ */
.kflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:28px}
.kflow div{background:#ebe8e0;padding:18px 20px;position:relative;display:grid;gap:4px}
.kflow div:nth-child(2){background:#e3dfd5}.kflow div:nth-child(3){background:#dbd6ca}.kflow div:nth-child(4){background:#1b2a4a;color:#fff}
.kflow div:nth-child(4) span{color:#d3dbe7}
.kflow b{font-size:1.05rem}
.kflow span{font-size:.86rem;color:var(--sub)}
/* SERVICE：監修体制 */
.team{margin-top:56px;border-top:2px solid var(--ink);padding-top:32px}
.team-hd .body{margin-top:12px}
.team-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;margin-top:28px;align-items:start}
.tcol h3{font-size:.95rem;font-weight:700;padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid var(--line)}
.tcol.core h3{border-bottom-color:#b7792f}
.tm{background:#ffffff;padding:16px 18px;margin-bottom:10px;display:grid;gap:4px}
.tm b{font-size:1rem}
.tm span{font-size:.86rem;color:var(--sub)}
.tcol.core .tm:first-of-type{background:#1b2a4a;color:#fff;padding:22px}
.tcol.core .tm:first-of-type span{color:#d3dbe7}
.tm.sub{background:transparent;border:1px dashed var(--line)}
@media (max-width:900px){.kflow,.team-grid{grid-template-columns:1fr}}.kmimg{margin:0 0 28px;aspect-ratio:21/7;overflow:hidden}
.kmimg img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.kmimg{aspect-ratio:16/9}}
.ostats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.ostats div{background:#ffffff;padding:22px 22px 18px;display:grid;gap:8px;align-content:start}
.ostats b{font-family:var(--f-en);font-weight:600;font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;color:var(--ink)}
.ostats b small{font-size:.5em;margin-left:2px}
.ostats div:first-child b{color:#b7792f}
.ostats span{font-size:.92rem;font-weight:700;line-height:1.6}
.ostats em{font-style:normal;font-size:.74rem;color:var(--sub)}
.origin2{margin-top:28px;max-width:40em}
.origin2 .body + .body{margin-top:1em}
.origin2 b{color:var(--ink)}
.tog{margin-top:72px;max-width:40em}
/* 「まずは1社から」の写真：文章の横に置く */
.opic{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;max-width:none}
.opic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ophoto{margin:0;overflow:hidden}
.ophoto img{width:100%;height:100%;object-fit:cover;display:block;min-height:160px}
@media (max-width:900px){.opic{grid-template-columns:1fr;gap:20px}}
.kmapf{margin:0;max-width:440px;justify-self:center;width:100%}
/* キトモリとは：画面まわりを詰める */
#about-k .body{margin-bottom:0}
.vgrid{margin-top:22px!important;gap:24px!important;align-items:center!important}
.vzoom figcaption{font-size:.82rem;margin-bottom:6px}
.vpts{margin-top:12px!important;gap:8px!important}
.vpts b{font-size:.95rem}
.vpts span{font-size:.82rem;line-height:1.6}
#about-k .vlink{margin-top:16px}
#about-k .note{margin-top:4px}
/* 出典はページの一番下にまとめる */
.sources{padding:28px 0 36px;border-top:1px solid var(--line)}
.sources .sh{font-size:.78rem;font-weight:700;margin-bottom:6px}
.sources ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.sources li{font-size:.7rem;color:var(--sub);line-height:1.7}
.ig-h sup,.ig-note sup,.ostats sup,.ig-end sup{font-size:.6em;color:var(--sub);margin-left:2px}
.kmap{width:100%;height:auto;display:block}
.kmapf figcaption{font-size:.7rem;color:var(--sub);margin-top:6px}
.tog .body{margin-top:12px}
#origin .vis{margin-top:32px}
#origin .vis .qc path:first-child{fill:#ffffff}
@media (max-width:900px){.ostats{grid-template-columns:1fr}}.soft .wi{background:#ffffff}
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.half{background:#ffffff;padding:0 0 24px;scroll-margin-top:90px}
.hfig{margin:0;aspect-ratio:16/6;overflow:hidden}
.hfig img{width:100%;height:100%;object-fit:cover}
.half > :not(.hfig){margin-left:24px;margin-right:24px}
.hh{font-size:1.25rem;font-weight:700;margin-top:20px}
.half .lead{font-size:1.05rem;margin:8px 24px 0}
.half .mflow{grid-template-columns:1fr;gap:8px;margin-top:16px}
.half .mflow li{background:#f6f4ef;padding:14px 16px;display:grid;grid-template-columns:40px 1fr;column-gap:8px}
.half .mflow li b{font-size:1.3rem;grid-row:span 2}
.half .mflow h3{margin:0 0 2px;font-size:1rem}
.half .mflow p{font-size:.86rem}
.half .mflow li + li::before{display:none}
@media (max-width:900px){.halves{grid-template-columns:1fr}}.gfbox{background:#ffffff;padding:36px 32px;display:grid;gap:18px;align-content:start}
.gft{font-weight:700;color:#141414}
.gfbtn{display:flex;align-items:center;justify-content:center;gap:14px;background:#1b2a4a;color:#ffffff;text-decoration:none;font-weight:700;font-size:1.1rem;padding:20px 28px;transition:background .2s}
.gfbtn::after{content:"↗";font-family:var(--f-en)}
.gfbtn:hover{background:#b7792f}
.gfn{font-size:.82rem;color:#5a5a55}
.gfn a{text-decoration:underline;color:inherit}
.cform{display:grid;gap:16px}
.cform label{display:block;font-size:.9rem;font-weight:700}
.cform label input:not([type=checkbox]):not([type=radio]),.cform textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #d6d2c8;background:#ffffff;color:#141414}
.cform fieldset{border:0;margin:0;padding:0}
.cform legend{font-size:.9rem;font-weight:700;margin-bottom:8px;padding:0}
.cks{display:flex;flex-wrap:wrap;gap:8px}
.ck{display:inline-flex!important;align-items:center;gap:8px;background:#ffffff;border:1px solid #d6d2c8;padding:8px 12px;font-weight:500!important;cursor:pointer;color:#141414}
.ck input{accent-color:#1b2a4a;margin:0}
.ck:has(input:checked){border-color:#1b2a4a;box-shadow:inset 0 0 0 1px #1b2a4a}
.cform .req{font-style:normal;font-size:.7rem;font-weight:500;border:1px solid currentColor;padding:0 6px;margin-left:8px}
.cform .err{display:block;margin-top:4px;color:#c0392b;font-size:.8rem;font-weight:500}
.cform .err:empty{display:none}
.cform .agree{display:flex;align-items:center;gap:10px;font-weight:500}
.cform .agree input{width:18px;height:18px;margin:0;accent-color:#1b2a4a}
.cform .agree a{text-decoration:underline;color:inherit}
.csend{justify-self:start;display:inline-flex;align-items:center;gap:14px;background:#1b2a4a;color:#ffffff;border:0;padding:16px 36px;font:inherit;font-weight:700;cursor:pointer;transition:background .2s}
.csend::after{content:"→";font-family:var(--f-en)}
.csend:hover{background:#b7792f}
.csend:disabled{opacity:.6}
.cdone{background:#ebe8e0;color:#141414;padding:14px 16px;font-size:.92rem;font-weight:700}
.navy .cform label,.navy .cform legend,.navy .cform .agree{color:#ffffff}
.navy .cform .err{color:#ffb3b3}.cform .ck input{display:inline-block!important;width:16px!important;height:16px;margin:0!important;padding:0!important;flex:none}
.cform .ck span{display:inline!important;margin:0!important;color:#141414!important;font-size:.9rem;white-space:nowrap}
.navy .cform .ck{color:#141414}
.cform .ck{display:inline-flex!important;width:auto!important}
.navy .csend{background:#ffffff;color:#1b2a4a}
.navy .csend:hover{background:#b7792f;color:#ffffff}
/* 離職コスト */
.cost-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-top:28px;align-items:start}
.cost-box,.cost-hidden{background:#ffffff;padding:24px}
.cost-box h3,.cost-hidden h3{font-size:1.1rem;font-weight:700;margin-bottom:14px}
.cost-tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.cost-tbl th,.cost-tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cost-tbl th{white-space:nowrap;width:7em}
.cost-tbl td{color:var(--sub)}
.cost-tbl .n{white-space:nowrap;text-align:right;color:var(--ink);font-weight:700}
.cost-tbl .sum th,.cost-tbl .sum td{border-bottom:0;border-top:2px solid var(--ink);padding-top:14px}
.cost-tbl .sum b{font-family:var(--f-en);font-size:1.8rem;color:#b7792f}
.cost-hidden{background:#1b2a4a;color:#ffffff}
.cost-hidden ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cost-hidden li{font-size:.9rem;color:#d3dbe7;padding-left:18px;position:relative}
.cost-hidden li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:#e0b878}
.cost-hidden li b{display:block;color:#ffffff;font-size:1rem}
.cure{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-top:32px}
.cure-col{padding:22px 24px;background:#ebe8e0}
.cure-col.good{background:#ffffff;outline:2px solid #1b2a4a;outline-offset:-2px}
.cure-tag{display:inline-block;font-size:.82rem;font-weight:700;margin-bottom:12px;color:var(--sub)}
.cure-col.good .cure-tag{color:#b7792f}
.cure-col ol{margin:0;padding-left:1.3em;display:grid;gap:8px;font-weight:700}
.cure-col.bad ol{color:var(--sub);font-weight:500}
.cure-arrow{display:grid;place-items:center;font-family:var(--f-en);font-size:1.8rem;color:#b7792f}
.cure-msg{margin-top:24px;font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:700;text-align:center}
/* ネットワーク効果 */
.net-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.net-steps div{background:#ebe8e0;padding:22px 22px 24px;position:relative}
.net-steps div:nth-child(2){background:#dfd9cc}.net-steps div:nth-child(3){background:#1b2a4a;color:#fff}
.net-steps div:nth-child(3) p{color:#d3dbe7}
.net-steps b{font-family:var(--f-jp);font-size:.85rem;color:#b7792f}
.net-steps div:nth-child(3) b{color:#e0b878}
.net-steps h3{font-size:1.15rem;font-weight:700;margin:6px 0 8px}
.net-steps p{font-size:.9rem;color:var(--sub)}
.net-steps div + div::before{content:"→";position:absolute;left:-14px;top:50%;transform:translate(-50%,-50%);color:#b7792f;font-family:var(--f-en);font-weight:600}
.net-msg{margin-top:24px;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700}
@media (max-width:900px){.cost-grid,.net-steps{grid-template-columns:1fr}.cure{grid-template-columns:1fr}.cure-arrow{transform:rotate(90deg)}.net-steps div + div::before{content:"↓";left:50%;top:-8px}}/* 離職コストの流れ */
.cstep{display:grid;grid-template-columns:64px 1fr;gap:20px;margin-top:28px}
.cno{font-family:var(--f-en);font-weight:600;font-size:2rem;color:#b7792f;line-height:1;padding-top:4px}
.cbody{background:#ffffff;padding:24px 28px}
.cbody h3{font-size:1.25rem;font-weight:700}
.csub{color:var(--sub);font-size:.95rem;margin:4px 0 14px}
.cjoin{margin:14px 0 0 84px;font-weight:700;color:#b7792f;display:flex;align-items:center;gap:10px}
.cjoin::before{content:"↓";font-family:var(--f-en);font-size:1.3rem}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.chain li{background:#f6f4ef;padding:16px;position:relative}
.chain li + li::before{content:"→";position:absolute;left:-11px;top:50%;transform:translate(-50%,-50%);color:#b7792f;font-family:var(--f-en)}
.chain b{display:block;font-size:1rem}
.chain span{font-size:.84rem;color:var(--sub)}
.chain li.hot{background:#1b2a4a;color:#fff}
.chain li.hot span{color:#d3dbe7}
.loop{margin-top:10px;text-align:right;font-weight:700;color:#b7792f;font-size:.9rem}
.cdmg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cdmg div{background:#1b2a4a;color:#fff;padding:20px 22px;display:grid;gap:4px}
.cdmg small{color:#e0b878;font-weight:700}
.cdmg b{font-size:1.2rem}
.cdmg span{color:#d3dbe7;font-size:.88rem}
.cdmg-cap{margin-top:14px;font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:700;text-align:center}
.cbody .cure{margin-top:14px}
/* ビジョン：四分円 */
.vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:24px}
.qc{width:100%;max-width:420px;height:auto}
.vis-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vis-list li{display:grid;grid-template-columns:80px 1fr;column-gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.vis-list b{grid-row:span 2;font-family:var(--f-en);font-weight:600;font-size:1.5rem;color:#b7792f}
.vis-list h3{font-size:1.1rem;font-weight:700}
.vis-list p{font-size:.9rem;color:var(--sub)}
@media (max-width:900px){.cstep{grid-template-columns:1fr;gap:8px}.cjoin{margin-left:0}.chain,.cdmg,.vis{grid-template-columns:1fr}.chain li + li::before{content:"↓";left:50%;top:-8px}}/* 離職の悪循環：4パネルを1か所に */
.cyc{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"p1 p2" "p4 p3";gap:56px 64px;margin-top:28px}
.cp{background:#ffffff;padding:22px 24px;position:relative;z-index:1}
.promo .cp{background:none;padding:0;z-index:auto}
.p1{grid-area:p1}.p2{grid-area:p2}.p3{grid-area:p3}.p4{grid-area:p4;background:#1b2a4a;color:#fff}
.cpn{font-family:var(--f-en);font-weight:600;font-size:1.4rem;color:#b7792f}
.p4 .cpn{color:#e0b878}
.cp h3{font-size:1.15rem;font-weight:700;margin:2px 0 10px}
.cpl{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem}
.cpl li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted var(--line);padding:3px 0}
.cpl span{color:var(--sub)}
.cpt{margin-top:10px;text-align:right;font-weight:700}
.cpt b{font-family:var(--f-en);font-size:1.5rem;color:#b7792f}
.cpc{margin:0;padding-left:1.3em;display:grid;gap:6px;font-size:.92rem}
.p4 .cpc{font-weight:700}
.cpd{font-size:.92rem;color:var(--sub)}
.cpd b{color:var(--ink)}
.cyc-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;display:grid;place-items:center;z-index:2;background:#f6f4ef;border-radius:50%}
.cyc-core svg{position:absolute;inset:14px}
.cyc-core span{font-size:.82rem;font-weight:700;text-align:center;line-height:1.5}
.ca{position:absolute;font-weight:700;color:#b7792f;font-size:.9rem;z-index:1}
.a12{left:50%;top:24%;transform:translate(-50%,-50%);font-family:var(--f-en);font-size:1.5rem}
.a23{right:24%;top:50%;transform:translate(50%,-50%);font-family:var(--f-en);font-size:1.5rem}
.a31{left:50%;bottom:24%;transform:translate(-50%,50%)}
.a34{left:24%;top:50%;transform:translate(-50%,-50%);background:#1b2a4a;color:#fff;padding:2px 10px;font-size:.8rem}
@media (max-width:900px){.cyc{grid-template-columns:1fr;grid-template-areas:"p1" "p2" "p3" "p4";gap:16px}.cyc-core,.ca{display:none}}.cyc-core{width:112px!important;height:112px!important}
.cyc-core svg{inset:6px!important}
.cyc-core span{font-size:.74rem!important}
.cpt{text-align:left!important}
.p2{padding-right:72px}
.a12{left:50%!important;top:25%!important}
.a23{left:75%!important;right:auto!important;top:50%!important;transform:translate(-50%,-50%)!important}
.a34{left:50%!important;top:75%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;background:none!important;color:#b7792f!important;font-family:var(--f-en);font-size:1.5rem!important;padding:0!important}
.a34l{position:absolute;left:50%;top:75%;transform:translate(-50%,-160%);font-size:.78rem;font-weight:700;color:#b7792f;z-index:1}.ca{display:none!important}
.p1::after,.p2::after,.p3::after{position:absolute;color:#b7792f;font-family:var(--f-en);font-size:1.5rem;font-weight:600;line-height:1}
.p1::after{content:"→";right:-44px;top:50%;transform:translateY(-50%)}
.p2::after{content:"↓";bottom:-42px;left:50%;transform:translateX(-50%)}
.p3::after{content:"←";left:-44px;top:50%;transform:translateY(-50%)}
@media (max-width:900px){.p1::after,.p2::after,.p3::after{display:none}}/* 悪循環4ステップ（改） */
.cyc{grid-template-areas:"p1 p2" "p4 p3"!important}
.p4{background:#ffffff!important;color:inherit!important}
.p4 .cpn{color:#b7792f!important}
.cph{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.cph h3{margin:0!important}
.cpi{width:52px;height:52px;flex:none;border-radius:12px;background:#ebe8e0;display:grid;place-items:center;color:#1b2a4a}
.cpi svg{width:30px;height:30px}
.cpdata{margin-top:12px;background:#f6f4ef;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.cpdata b{grid-row:span 2;font-family:var(--f-en);font-weight:600;font-size:2rem;color:#b7792f;line-height:1}
.cpdata b small{font-size:.5em}
.cpdata span{font-size:.84rem;font-weight:700;line-height:1.5}
.cpdata em{font-style:normal;font-size:.7rem;color:var(--sub)}
.p2{padding-right:24px!important}
.p3::after{content:"←"!important;left:-44px!important;top:50%!important;transform:translateY(-50%)!important}
.p4::after{content:"↑";position:absolute;top:-42px;left:50%;transform:translateX(-50%);color:#b7792f;font-family:var(--f-en);font-size:1.5rem;font-weight:600}
.cyc-core span{font-size:.9rem!important}
.escape{margin-top:32px}
.esc-lead{text-align:center;font-weight:700;color:#b7792f;margin-bottom:12px}
.esc-box{background:#1b2a4a;color:#fff;padding:28px 32px}
.esc-box h3{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700}
.esc-box > p{color:#d3dbe7;margin-top:8px;font-size:.95rem}
.esc-box ol{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:es}
.esc-box li{background:rgba(255,255,255,.08);padding:16px 18px;counter-increment:es;display:grid;gap:4px}
.esc-box li b::before{content:"0" counter(es) "  ";font-family:var(--f-en);color:#e0b878}
.esc-box li span{font-size:.86rem;color:#d3dbe7}
@media (max-width:900px){.cyc{grid-template-areas:"p1" "p2" "p3" "p4"!important}.p4::after{display:none}.esc-box ol{grid-template-columns:1fr}}/* 悪循環：インパクト強化 */
.cyc{gap:64px 72px!important}
.cyc-core{width:170px!important;height:170px!important;background:#1b2a4a!important;color:#fff;box-shadow:0 0 0 10px #f6f4ef}
.cyc-core svg{inset:8px!important}
.cyc-core span{font-size:1.25rem!important;font-weight:700;letter-spacing:.08em;line-height:1.2!important;color:#fff}
.cyc-core small{position:absolute;bottom:40px;font-size:.66rem;color:#d3dbe7;text-align:center;line-height:1.4}
.cyc-core span{position:relative;top:-10px}
.spin{transform:none}
@keyframes kt-spin{to{transform:rotate(360deg)}}
.cpdata b{font-size:2.6rem!important}
.cpdata sup,.cpt sup{font-size:.6em;color:var(--sub);margin-left:2px}

.cpn{font-size:1.6rem!important}
.p1::after,.p2::after,.p3::after,.p4::after{font-size:2rem!important}
.csrc{margin:14px 0 0;font-size:.7rem;color:var(--sub);line-height:1.7}
.csrc p{font-weight:700;margin-bottom:2px}
.csrc ol{list-style:none;margin:0;padding:0}
/* 悪循環パネル：余白を詰め、データ欄を下にそろえる */
.cyc{gap:36px 136px!important}
.cpl{gap:0;font-size:.85rem}
.cpl li{padding:2px 0}
.cpt{margin-top:6px}
.cpt b{font-size:1.35rem}
/* 番号と見出しを1行に */
.cph > div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cph .cpn{font-size:1.3rem!important;line-height:1}
.cph h3{font-size:1.08rem!important;line-height:1.4}
.cp{display:flex;flex-direction:column;padding:20px 22px}
.cp .cpdata{margin-top:auto}
.cp .cpd{margin-bottom:12px;line-height:1.7}
.cph{margin-bottom:8px}
.cpdata{padding:10px 14px}
.cpdata b{font-size:2.2rem!important}
.cyc-core{width:128px!important;height:128px!important;box-shadow:none!important}
.cyc-core span{font-size:1.05rem!important}
.cyc-core small{display:none}
.cyc-core span{top:0!important;font-size:1.15rem!important}
@media (max-width:900px){.cyc{gap:20px!important}}
.esc-box{padding:22px 26px}
.esc-box > p{margin-top:6px}
.esc-box ol{margin-top:14px;gap:8px}
.esc-box li{padding:10px 14px;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px}
.escape{margin-top:24px}
@media (max-width:640px){.esc-box ol{grid-template-columns:1fr}}.hpq{font-size:.82rem;font-weight:700;color:#b7792f;margin-top:16px}
.hpairs{list-style:none;margin:6px 24px 0;padding:0;display:grid;gap:6px}
.hpairs li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:.86rem;padding:6px 0;border-bottom:1px dotted var(--line)}
.hpairs .q{color:var(--sub)}
.hpairs .a{font-weight:700;white-space:nowrap}
.hpairs .a::before{content:"→ ";color:#b7792f;font-family:var(--f-en)}
.vlink{margin-top:24px;font-weight:700;font-size:1.05rem}
.vlink b{color:#b7792f}
.plink{margin-top:10px;font-size:.92rem;color:var(--sub)}
.plink a{margin-left:12px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid #cfac82}
.plink a::after{content:" →";font-family:var(--f-en);color:#b7792f}
/* スマホ：文字と数字をひと回り小さくして、画面に収める */
@media (max-width:640px){
  html{font-size:15px}
  body{font-size:15px;line-height:1.75}
  .logo b{font-size:1.4rem}
  .logo small{font-size:.66rem}
  .logo svg.kmark{width:64px;height:34px}
  .ttl .jp{font-size:1.55rem!important}
  .lead{font-size:1.15rem!important}
  .ig-count{grid-template-columns:1fr 1fr!important;gap:18px 14px}
  #issue .ig-count > div:last-child{grid-column:1 / -1}
  .ig-count b{font-size:2rem}
  .ig-count small{font-size:.8rem}
  .ig-count span{min-height:0}
  .cpdata b{font-size:1.8rem!important}
  .cpt b{font-size:1.15rem}
  .ostats b,.ig-ba b{font-size:1.8rem}
  .icst .v{font-size:2rem}
  .ig-end{padding:22px 18px}
  .ig-end h3{font-size:1.15rem}
  .hero .big{font-size:2.4rem!important}
  .catch h1{font-size:1.3rem!important}
}
/* PICK UP：札をなくして小さく */
.pick .lbl{display:none}
.pick{width:200px;padding:12px 30px 10px 14px}
.pick small{font-size:.58rem}
.pick b{font-size:.84rem;line-height:1.5}
@media (max-width:640px){.pick{width:164px;padding:10px 26px 8px 12px;right:12px;bottom:12px}.pick b{font-size:.78rem}}
.cam{display:none}
/* 悪循環：スマホでも2×2の輪のまま、要点だけ見せる */
@media (max-width:900px){
  .cyc{grid-template-columns:1fr 1fr!important;grid-template-areas:"p1 p2" "p4 p3"!important;gap:40px 40px!important}
  .cyc .cp{padding:12px 12px 12px!important}
  .cyc .cpi,.cyc .cpd,.cyc .cpl,.cyc .cpdata span{display:none}
  .cyc .cph{margin-bottom:6px}
  .cyc .cph > div{flex-direction:column;align-items:flex-start;gap:2px}
  .cyc .cpn{font-size:1rem!important}
  .cyc .cph h3{font-size:.86rem!important;line-height:1.45}
  .cyc .cpt{margin-top:auto;font-size:.72rem;line-height:1.4}
  .cyc .cpt b{display:block;font-size:1rem}
  .cyc .cpdata{padding:6px 8px;display:block}
  .cyc .cpdata b{font-size:1.5rem!important}
  .cyc-core{display:grid!important;width:74px!important;height:74px!important}
  .cyc-core svg{inset:4px!important}
  .cyc-core span{font-size:.72rem!important}
  /* 矢印はパネルと同じ格子に置き、いつも真ん中にそろえる */
  .cyc{grid-template-columns:1fr 34px 1fr!important;grid-template-rows:auto 34px auto;grid-template-areas:"p1 a1 p2" "a4 c a2" "p4 a3 p3"!important;gap:0!important}
  .p1::after,.p2::after,.p3::after,.p4::after{display:none!important}
  .cam{display:grid!important;place-items:center;color:#b7792f;font-family:var(--f-en);font-size:1.3rem;font-weight:600;line-height:1}
  .cam1{grid-area:a1}.cam2{grid-area:a2}.cam3{grid-area:a3}.cam4{grid-area:a4}
  .cyc-core{width:54px!important;height:54px!important}
  .cyc-core svg{inset:3px!important}
  .cyc-core span{font-size:.58rem!important}
  /* 木も、森も見る：PCと同じ横一列 */
  .kdiag{grid-template-columns:1fr auto 1.25fr auto 1fr!important;gap:6px!important;margin-top:24px}
  .kd-core{grid-column:auto!important;grid-row:auto!important;max-width:none!important;gap:2px}
  .kd-arrow{display:grid!important;width:22px;height:22px;font-size:.75rem}
  .kd-node svg{width:22px;height:22px;margin-bottom:2px}
  .kd-node b{font-size:1.05rem}
  .kd-node small{font-size:.62rem}
  .kd-core small{font-size:.52rem;text-align:center;line-height:1.3}
  .kd-core b{font-size:1.05rem;letter-spacing:.02em}
  /* 木｜一人ひとり と 森｜職場全体 を横並びに（説明文は省いて要点だけ） */
  .halves{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .half{padding-bottom:12px}
  .half > :not(.hfig){margin-left:10px!important;margin-right:10px!important}
  .hfig{aspect-ratio:16/9}
  .half h3{font-size:.86rem;line-height:1.45}
  .half .lead{font-size:.76rem!important;line-height:1.55;margin:6px 10px 0!important}
  .half .mflow{gap:5px;margin-top:10px}
  .half .mflow li{padding:7px 8px;grid-template-columns:22px 1fr;column-gap:4px}
  .half .mflow li b{font-size:.9rem}
  .half .mflow h3{font-size:.74rem;margin:0}
  .half .mflow p{display:none}
  .hpq{font-size:.7rem;margin-top:10px}
  .hpairs{margin:4px 10px 0!important;gap:2px}
  .hpairs li{grid-template-columns:1fr;gap:0;font-size:.68rem;padding:5px 0}
  .hpairs .a{white-space:normal}
  /* 監修チーム：PCと同じ3列 */
  .team-grid{grid-template-columns:1fr 1.15fr 1fr!important;gap:6px!important}
  .tcol h3{font-size:.72rem;margin-bottom:6px}
  .tm{padding:8px 7px!important;margin-bottom:6px;gap:2px}
  .tm b{font-size:.72rem;line-height:1.35}
  .tm span{font-size:.62rem;line-height:1.4}
}
/* スマホ・タブレットの見え方の調整（2026-11） */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
h1,h2,h3,.ttl .jp,.lead{word-break:auto-phrase;text-wrap:pretty}
.bx{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:960px){
  .hero .big{margin-top:20px!important;line-height:1.02}
}
@media (max-width:640px){
  html{font-size:16px}
  body{font-size:15.5px}
  .hd .wrap{padding-top:10px;padding-bottom:10px}
  .logo svg.kmark{width:56px;height:30px}
  .logo b{font-size:1.25rem}
  .menu-btn{transform:scale(.85);transform-origin:right center}
  .hero{padding-block:16px 48px}
  .hero .big{font-size:2.5rem!important;margin-top:18px!important}
  .catch{margin-top:14px}
  .pick{width:auto;max-width:62vw;padding:8px 30px 8px 12px;border-top-width:2px}
  .pick small{display:none}
  .pick a{border:0;padding-block:2px}
  .pick b{font-size:.76rem;line-height:1.45;white-space:nowrap}
  .pick{max-width:none}
}

/* お知らせ：最大4件、残りは「すべて表示する」で */
.news a[hidden]{display:none!important}
.news-more{text-align:center;margin-top:36px}
.news-more button{font:inherit;font-weight:700;background:none;border:1px solid var(--ink);color:var(--ink);padding:12px 36px;cursor:pointer}
.news-more button:hover{background:var(--ink);color:#fff}

/* ===== 2026-11 スマホ調整（2） ===== */
/* 木と森：左右のカードで、見出し・リード・01〜03の高さを揃える */
@supports (grid-template-rows:subgrid){
  .halves{row-gap:0!important}
  .half{display:grid;grid-row:span 8;grid-template-rows:subgrid;align-content:start}
  .half .mflow{display:contents}
  .half .mflow li{margin:0 0 8px;align-items:center}
  .half .hfig{margin-bottom:0}
  .half .lead{margin-bottom:16px}
}
@media (min-width:901px){.half .mflow li{margin-left:24px;margin-right:24px}.half .mflow li:first-child{margin-top:0}}
@media (max-width:900px){.half .mflow li{margin:0 10px 5px!important}.half .lead{margin-bottom:10px!important}}
/* 悪循環：真ん中の丸を、矢印の交差点にきっちり置く */
@media (max-width:900px){
  .cyc-core{grid-area:c;position:relative!important;left:auto!important;top:auto!important;transform:none!important;justify-self:center;align-self:center;margin:-10px}
}
/* スマホのヘッダーを薄く */
@media (max-width:640px){
  .hd .wrap{padding-top:6px!important;padding-bottom:6px!important}
  .logo svg.kmark{width:46px!important;height:25px!important}
  .logo b{font-size:1.1rem!important}
  .logo small{font-size:.56rem!important;margin-top:2px}
  .menu-btn{width:44px!important;height:44px!important;transform:none!important}
  .hero{padding-block:22px 40px}
}
/* ページ内リンクで飛んだとき、見出しがヘッダーの下に隠れないように */
[id]{scroll-margin-top:80px}
@media (max-width:640px){[id]{scroll-margin-top:64px}}