/* 画面の幅に合わせたレイアウト（スマホはページ内のスタイルのまま、タブレット・パソコンで広げる） */
body{--wrap:640px}
header.site .site-in,nav.mainnav .mainnav-in,nav.mainnav .toollist-in{max-width:var(--wrap)}
body[class^="p-"] main{max-width:var(--wrap)}

/* タブレット以上 */
@media (min-width:768px){
  body.p-page,body.p-article{--wrap:720px}
  body.p-tool,body.p-home,body.p-list{--wrap:760px}
  body.p-madori{--wrap:1100px}
  body.p-madori main{max-width:760px}
}

/* パソコン：トップページと記事一覧は横に広げて、カードを多く並べる */
@media (min-width:960px){
  body.p-home,body.p-list{--wrap:1080px}
  .p-home .lead{max-width:760px}
  .p-home .cards{grid-template-columns:repeat(4,1fr)}
  .p-home .cats{grid-template-columns:repeat(5,1fr)}
  .p-home .tools{grid-template-columns:repeat(3,1fr)}
  .p-home .guide{max-width:820px;margin:0 auto}
  .p-list .cards{grid-template-columns:repeat(3,1fr)}
  .p-list main > h1,.p-list main > .lead{max-width:760px}
}

/* パソコン：記事は本文と、目次・関連記事の列に分ける */
@media (min-width:1100px){
  body.p-article{--wrap:1080px}
  .p-article main{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:32px;align-items:start}
  .p-article main > *{grid-column:1}

  .p-article main > .side{grid-column:2;grid-row:1 / span 4;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
  .p-article .side .toc{display:block;background:var(--card);margin:0 0 16px}
  .p-article .side .related{margin:0}
}
.side .toc{display:none}

/* 手順を並べた図（記事） */
/* 手順の途中に置く1枚の図 */
.stepfig{margin:10px 0 4px;max-width:440px;background:var(--paper,#F3F6F8);border-radius:10px;padding:8px}
.stepfig img{display:block;width:100%;max-width:100%;height:auto;border-radius:8px}
.stepfig figcaption{font-size:.84rem;color:var(--sub,#5C6B72);margin-top:5px;line-height:1.5}
/* 脱健着患の手順図（HTMLで作る） */
.dflow{margin:12px 0 18px;display:grid;gap:12px}
.dflow .row{background:var(--paper,#F3F6F8);border-radius:12px;padding:10px 12px}
.dflow .row>b{display:block;font-size:1rem;margin-bottom:8px;color:#1E2A2F}
.dflow ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:1fr}
.dflow li{position:relative;border-radius:10px;padding:10px 12px 10px 44px;line-height:1.5;font-size:.95rem;border:2px solid #C9D2CE;background:#fff}
.dflow li .n{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:#5A6E73;color:#fff;font-weight:700;text-align:center;line-height:26px;font-size:.9rem}
.dflow li.kan{border-color:#016E8F;background:#E6F3ED}
.dflow li.kan .n{background:#016E8F}
.dflow li b{display:block}
@media (min-width:700px){.dflow ol{grid-template-columns:1fr 1fr}}
.steps5{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0 16px}
@media (min-width:560px){.steps5{grid-template-columns:1fr 1fr}}
.steps5 figure{margin:0;background:var(--paper,#F3F6F8);border-radius:10px;padding:8px}
.steps5 img{display:block;width:100%;max-width:100%;height:auto;border-radius:8px}
.steps5 figcaption{font-size:.85rem;color:var(--ink,#1E2A2F);margin-top:4px;line-height:1.5}
.steps5 figcaption b{display:block;color:#016E8F;margin-bottom:2px}

/* 明るい見た目 */
:root{--shadow:0 1px 2px rgba(33,51,58,.04),0 4px 12px rgba(33,51,58,.06);--shadow-h:0 2px 6px rgba(33,51,58,.07),0 10px 24px rgba(33,51,58,.10);--amber:#E8843C;--amber-bg:#FFF3E4}
body.p-page main section,body.p-tool main section.card,body.p-article main article{box-shadow:var(--shadow)}
.card,.tools a,.linklist a,.jump a{transition:transform .15s ease,box-shadow .15s ease}
.card:hover,.tools a:hover,.linklist a:hover,.jump a:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}

/* グローバルメニュー：上に貼り付け、開いたときに本文と見分けがつくようにする */
:root{--navh:50px}
nav.mainnav{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
nav.mainnav.is-stuck{box-shadow:0 2px 10px rgba(33,51,58,.10)}
nav.mainnav .mainnav-in{position:relative;z-index:3;background:var(--card);padding:8px 16px}
nav.mainnav a.navlink,nav.mainnav summary{transition:background .15s ease,color .15s ease}
nav.mainnav a.navlink:hover,nav.mainnav summary:hover{background:var(--oak-light);color:#015A75}
nav.mainnav summary::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:8px;transition:transform .2s ease}
nav.mainnav details[open] summary::after{content:"";transform:translateY(1px) rotate(-135deg)}
nav.mainnav details[open] summary{background:var(--safe);color:#fff}
/* 開いているあいだ、後ろの本文を暗くする */
.nav-scrim{position:fixed;inset:0;background:rgba(33,51,58,.42);z-index:55;animation:navfade .18s ease-out}
@keyframes navfade{from{opacity:0}to{opacity:1}}
@keyframes navdrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
nav.mainnav .toollist{z-index:2;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--safe);border-bottom-left-radius:16px;border-bottom-right-radius:16px;box-shadow:0 18px 40px rgba(33,51,58,.20);max-height:calc(100vh - var(--tlTop,110px) - 12px);max-height:calc(100dvh - var(--tlTop,110px) - 12px);overflow-y:auto;overscroll-behavior:contain;animation:navdrop .18s ease-out}
nav.mainnav .toollist-in{padding:4px 16px 10px}
nav.mainnav .toollist a{padding:12px 6px;border-radius:8px;border-top:1px solid var(--line)}
nav.mainnav .toollist a:hover{background:var(--safe-bg)}
nav.mainnav .toollist a[aria-current=page]{background:var(--safe-bg);color:#015A75}
@media (prefers-reduced-motion:reduce){
  nav.mainnav .toollist,.nav-scrim{animation:none}
  nav.mainnav summary::after{transition:none}
}
/* 上に貼り付いたメニューに、見出しやリンク先が隠れないようにする */
[id]{scroll-margin-top:calc(var(--navh) + 12px)}
@media (min-width:1100px){
  .p-article main > .side{top:calc(var(--navh) + 16px);max-height:calc(100vh - var(--navh) - 32px)}
}
nav.mainnav .navlink.right{margin-left:auto}
@media (max-width:359px){nav.mainnav .mainnav-in{gap:6px}nav.mainnav a.navlink,nav.mainnav summary{padding:6px 10px;font-size:.82rem}}

/* サイト内検索 */
nav.mainnav .navsearch{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;font-family:inherit;font-size:.85rem;line-height:1.4;padding:6px 12px;border-radius:999px;color:var(--sub);background:var(--paper);cursor:pointer;transition:background .15s ease,color .15s ease}
nav.mainnav .navsearch:hover,nav.mainnav .navsearch[aria-expanded=true]{background:var(--oak-light);color:#015A75}
nav.mainnav .navsearch[aria-expanded=true]{background:var(--safe);color:#fff}
nav.mainnav .navsearch svg{flex:none;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
nav.mainnav .navlink.right{margin-left:8px}
.searchpanel{position:absolute;left:0;right:0;top:100%;z-index:2;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--safe);border-bottom-left-radius:16px;border-bottom-right-radius:16px;box-shadow:0 18px 40px rgba(33,51,58,.20);animation:navdrop .18s ease-out;max-height:calc(100vh - var(--navh) - 20px);overflow-y:auto}
.searchpanel-in{max-width:var(--wrap);margin:0 auto;padding:14px 16px 16px}
.searchpanel input{width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;padding:11px 13px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.searchpanel input:focus{outline:none;border-color:var(--safe)}
.searchpanel .sp-hint{font-size:.8rem;color:var(--sub);margin:8px 2px 0;line-height:1.5}
.searchpanel ul{list-style:none;margin:10px 0 0;padding:0}
.searchpanel li a{display:block;padding:11px 10px;border-radius:10px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.searchpanel li a:hover,.searchpanel li a:focus-visible{background:var(--safe-bg)}
.searchpanel li a b{display:block;font-size:.95rem;line-height:1.5}
.searchpanel li a span{display:block;font-size:.8rem;color:var(--sub);margin-top:2px;line-height:1.5}
.searchpanel li a em{font-style:normal;font-size:.72rem;color:#015A75;background:var(--safe-bg);border-radius:999px;padding:2px 8px;margin-right:6px;vertical-align:1px}
.searchpanel mark{background:#FFE9C7;color:inherit;border-radius:3px;padding:0 1px}
@media (prefers-reduced-motion:reduce){.searchpanel{animation:none}}
@media (max-width:359px){nav.mainnav .navsearch{padding:6px 10px;font-size:.82rem}nav.mainnav .navsearch span{display:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* メニューが折り返さないようにする（狭い画面では「監修者」を隠す） */
nav.mainnav .mainnav-in{flex-wrap:nowrap}
nav.mainnav a.navlink,nav.mainnav summary,nav.mainnav .navsearch{flex:none;white-space:nowrap}
nav.mainnav .navlink.right{display:none}
@media (min-width:560px){nav.mainnav .navlink.right{display:inline-block}}

/* 図の上に番号を重ねる（靴の見るところなど） */
.pinfig{position:relative;margin:8px 0 6px}
.pinfig img{display:block;width:100%;height:auto;border-radius:10px}
.pinfig b{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#21333A;color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff,0 1px 5px rgba(33,51,58,.45);line-height:1}
@media (max-width:420px){.pinfig b{width:24px;height:24px;font-size:.78rem}}
.pinlist{list-style:none;margin:0 0 14px;padding:0;font-size:.92rem}
.pinlist li{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;line-height:1.6}
.pinlist li i{flex:none;font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--safe-bg);color:#015A75;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}

/* リハビリ職のページへの入口（メニューの中・ページの最後の帯）。色は青灰（リハビリ職向けの色） */
nav.mainnav .toollist a.nav-pro{margin:6px 0 2px;border-top:0;border-radius:10px;background:#ECEEF7;color:#3A4A86;padding:11px 12px;position:relative}
nav.mainnav .toollist a.nav-pro::before{content:"リハビリ職向け";display:inline-block;font-size:.66rem;font-weight:700;color:#fff;background:#3A4A86;border-radius:5px;padding:1px 6px;margin-right:8px;vertical-align:2px}
nav.mainnav .toollist a.nav-pro span{color:#4E6E7C}
/* ツールのメニュー：ご家族向け／レク／専門職・現場向け の見出し */
nav.mainnav .toollist .tl-h{margin:16px 0 4px;padding:0 6px 0 10px;border-left:4px solid var(--safe);font-size:.86rem;font-weight:700;line-height:1.45;color:#015A75}
nav.mainnav .toollist .tl-h span{display:block;font-weight:400;font-size:.74rem;color:var(--sub)}
nav.mainnav .toollist .tl-g:first-child .tl-h{margin-top:10px}
nav.mainnav .toollist .tl-g:last-child .tl-h{border-left-color:#3A4A86;color:#3A4A86}
.pro-next{display:block;position:relative;background:#ECEEF7;color:#21333A;border-radius:16px;padding:18px 16px 16px;margin:20px 0 8px;overflow:hidden}
.pro-next::before{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;border:20px solid rgba(58,74,134,.07)}
.pro-next .pn-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;background:#fff;color:#3A4A86;border-radius:999px;padding:2px 11px;margin:0 0 6px}
.pro-next .pn-h{color:#3A4A86;display:block;font-size:1.12rem;font-weight:700;line-height:1.45;margin:0 0 4px}
.pro-next .pn-lead{font-size:.84rem;color:#5A6E73;margin:0 0 12px;line-height:1.6}
.pro-next ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pro-next ul a{display:block;background:#fff;color:#21333A;text-decoration:none;border-radius:10px;padding:10px 12px;font-weight:700;font-size:.93rem;line-height:1.45}
.pro-next ul a small{display:block;font-weight:400;font-size:.78rem;color:#5A6E73;margin-top:2px}
.pro-next ul a em{font-style:normal;font-size:.66rem;font-weight:700;color:#fff;background:#C0506E;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.pro-next ul a:hover{background:#F6F7FB}
.pro-next .pn-go{color:#3A4A86;font-weight:700;font-size:.9rem}
.pro-next .pn-go::after{content:" ›"}
/* ===== パソコンの見た目（2026-10 見直し）=====
   考え方：パソコンは「机に手帖を広げる」場面。
   ・文字は、ユニバーサルデザインの書体（Windowsに入っているBIZ UDPゴシック）で、少し大きく
   ・ロゴとメニューを1段にまとめ、上の帯を軽くする
   ・記事は、題名のところを横いっぱいの帯にして、記事の絵を右に置く。本文は枠で囲まず、紙に直接
   ・ツールは、作業の広さを優先し、道具を左の列に固定する
   スマホの見た目は変えない */
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","BIZ UDPゴシック","Noto Sans JP","Yu Gothic",Meiryo,sans-serif}
.eyecatch{display:none}

@media (min-width:1100px){
  :root{--band:#EAF2F5;--navh:76px}
  body{font-size:17px}
  /* 上の帯は、どのページも同じ幅にそろえる */
  header.site .site-in,nav.mainnav .mainnav-in,nav.mainnav .toollist-in,.searchpanel-in{max-width:1180px}
  body.p-home,body.p-list,body.p-article{--wrap:1180px}
  body.p-page,body.p-tool{--wrap:900px}
  body.p-tool:has(.work){--wrap:1180px}

  /* ロゴとメニューを1段に */
  header.site .site-in{padding:14px 16px}
  header.site .brand img{width:48px;height:48px}
  header.site .brand-name{font-size:1.12rem}
  header.site .brand-name small{font-size:.74rem;margin-top:2px}
  header.site{border-bottom:1px solid var(--line)}
  nav.mainnav{margin-top:-77px;height:76px;background:transparent;border-bottom:1px solid transparent;pointer-events:none;transition:background .2s ease,box-shadow .2s ease}
  nav.mainnav .mainnav-in{height:76px;background:transparent;padding:0 16px;justify-content:flex-end;gap:6px;pointer-events:none}
  nav.mainnav .mainnav-in > *,nav.mainnav .toollist,nav.mainnav .searchpanel{pointer-events:auto}
  nav.mainnav a.navlink,nav.mainnav summary,nav.mainnav .navsearch{font-size:.95rem;padding:9px 16px;background:transparent;color:var(--ink)}
  nav.mainnav .navsearch{margin-left:10px;background:var(--paper);border:1px solid var(--line)}
  nav.mainnav .navlink.right{margin-left:0}
  nav.mainnav.is-stuck{background:var(--card);border-bottom-color:var(--line)}
  /* 下へ読み進めたあとは、メニューの左にサイト名を出す */
  nav.mainnav .mainnav-in{padding-right:64px}
  nav.mainnav .mainnav-in::before{content:"やまねこのリハビリ・介護手帖";margin-right:auto;font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:.04em;opacity:0;transition:opacity .2s ease;padding-left:44px;line-height:36px;background:url(logo.png) no-repeat left center/36px 36px}
  nav.mainnav.is-stuck .mainnav-in::before{opacity:1}
  nav.mainnav .toollist-in{columns:2;column-gap:24px;padding:8px 16px 14px}
  nav.mainnav .toollist a{break-inside:avoid}
  nav.mainnav .toollist .tl-g{break-inside:avoid}

  /* 記事：題名の帯 */
  .p-article{background:#fff}
  .p-article main{grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;padding-top:0}
  .p-article main::before{content:"";grid-column:1 / -1;grid-row:1 / 4;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);z-index:-1;align-self:stretch}
  .p-article main{position:relative;z-index:0}
  .p-article main > .crumbs{grid-row:1;margin:28px 0 14px;font-size:.84rem}
  .p-article main > h1{grid-row:2;font-size:2.1rem;line-height:1.4;letter-spacing:.02em;margin:0 0 14px;align-self:center}
  .p-article main > h1 .h1sub{font-size:1.12rem;font-weight:500;margin-top:10px;color:#4A5D63}
  .p-article main > .meta{grid-row:3;margin:0 0 36px;border-left-color:var(--oak);font-size:.84rem}
  .p-article main > .eyecatch{display:block;grid-column:2;grid-row:1 / 4;align-self:center;justify-self:end;width:320px;aspect-ratio:4/3;margin:28px 0;border-radius:18px;background:var(--eye) center / cover no-repeat;box-shadow:0 1px 0 rgba(33,51,58,.06),0 10px 30px rgba(107,74,58,.14)}
  .p-article main > .side{grid-row:4 / span 2;margin-top:40px}
  body.p-article main > article{grid-row:4;margin-top:40px;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
  .p-article main > .related{grid-row:5}
  .p-article main > .sitefooternav{grid-row:6;margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}
  .p-article article .toc{display:none}
  .p-article article{line-height:1.95}
  .p-article article h2{font-size:1.5rem;line-height:1.45;margin:56px 0 18px;padding:0 0 10px;border-bottom:2px solid var(--oak-light)}
  .p-article article h3{font-size:1.18rem;margin:32px 0 10px}
  .p-article article p{margin:0 0 18px}
  .p-article article .fig img,.p-article article .fig svg{max-width:600px}
  .p-article .side .toc{background:#F1F7F9;border:0;border-radius:14px;padding:16px 18px;font-size:.9rem}
  .p-article .side .toc b{font-size:.95rem;margin-bottom:8px}
  .p-article .side .toc li{margin-bottom:6px;line-height:1.55}
  .p-article .side .related h2{font-size:.95rem;margin:4px 0 10px}
  .p-article .side .related a{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:12px 2px;margin:0;box-shadow:none;transform:none;font-size:.95rem}
  .p-article .side .related a:hover{color:#015A75;background:transparent}

  /* トップ：最初の4つの入口を、2列の大きなタイルに */
  .p-home main{padding-top:24px}
  .p-home .hero{border-radius:24px}
  .p-home .hero-img{aspect-ratio:2.4 / 1;object-position:center 88%}
  .p-home .hero h1{font-size:2.6rem;letter-spacing:.02em}
  .p-home .hero-sub{font-size:1.1rem}
  .p-home .hero-eyebrow{align-self:flex-start}
  .p-home .start{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0 20px}
  .p-home .start-q{grid-column:1 / -1;font-size:1.25rem;margin:0}
  .p-home .start-card{margin:0;min-height:168px;box-shadow:none;border:1px solid var(--line)}
  .p-home .start-card:hover{transform:none;box-shadow:none;border-color:var(--safe)}
  .p-home .start-card>img{width:168px}
  .p-home .start-tx{padding:24px 48px 22px 24px;display:flex;flex-direction:column;justify-content:center}
  .p-home .start-tx b{font-size:1.4rem}
  .p-home .start-tx small{font-size:.92rem}
  .p-home .start-tx em{align-self:flex-start;font-size:.88rem;padding:7px 13px}
  .p-home main h2{font-size:1.45rem}
  .p-home .sec-h h2{font-size:1.9rem}
  .p-home .sec-h .en{font-size:.85rem}
  .p-home main > section{margin-top:56px}

  /* 記事一覧 */
  .p-list main > h1{font-size:2.1rem}

  /* カードを持ち上げる動きは、パソコンではやめる（どれも同じ動きで、うるさく見えるため） */
  .card:hover,.tools a:hover,.linklist a:hover,.jump a:hover{transform:none}
}

/* ツール：作業の広さを優先する（写真書き込みシート・家屋調査の記録シート） */
@media (min-width:1100px){
  body.p-tool main > .crumbs,body.p-tool main > h1,body.p-tool main > .supervise,body.p-tool main > .lead,body.p-tool main > .howto,body.p-tool main > .tip{max-width:860px}
  body.p-tool main > h1{font-size:2.1rem;line-height:1.4}
  body.p-tool main > .faq{max-width:860px}
  body.p-tool .work{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:24px;align-items:start}
  body.p-tool .work > .palette{grid-column:1;grid-row:1 / span 3;position:sticky;top:calc(var(--navh) + 12px);max-height:calc(100vh - var(--navh) - 24px);overflow-y:auto;margin:0}
  body.p-tool .work > *:not(.palette){grid-column:2}
  body.p-tool .work .palette .row{gap:6px 8px}
  body.p-tool .work .palette .lab{flex-basis:100%}
  body.p-tool .work .palette .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  body.p-tool .work .palette .acts .btn{padding:8px 6px;font-size:.85rem}
}

/* パソコン：見直し2（ロゴの段の高さをそろえる、トップの専門職・入り口ガイド、ツールの上の部分） */
@media (min-width:1100px){
  header.site{height:77px;box-sizing:border-box}
  header.site .site-in{height:76px;display:flex;align-items:center;padding:0 16px}
  header.site .brand-name small{white-space:nowrap}

  /* 専門職の方へ：左に見出し、右に一覧 */
  .p-home section.pro{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:40px;align-items:start;padding:28px 28px 20px}
  .p-home section.pro{grid-template-rows:auto auto 1fr}
  .p-home section.pro > *{grid-column:1}
  .p-home section.pro > .pro-tag{justify-self:start}
  .p-home section.pro > .hint{align-self:start;margin-top:6px}
  .p-home section.pro > .linklist{grid-column:2;grid-row:1 / span 3;margin:0}
  .p-home section.pro .sec-h h2{font-size:1.35rem;line-height:1.45}
  .p-home section.pro .linklist a{padding:12px 16px}

  /* 入り口ガイド：前置きの文と、ガイドの幅・左端をそろえる */
  .p-home .lead{max-width:none;margin:32px 0 0;background:transparent;border:0;padding:0 2px;font-size:1.02rem;color:var(--ink)}
  .p-home .guide{max-width:none;margin:12px 0 24px}

  /* ツール：説明を2列に並べて、作業の場所と幅をそろえる */
  body.p-tool:has(.work) main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
  body.p-tool:has(.work) main > *{grid-column:1 / -1}
  body.p-tool:has(.howto) main > .howto{grid-column:1;margin-bottom:16px}
  body.p-tool:has(.howto) main > .howto + .tip{grid-column:2;margin-bottom:16px}

  /* 間取り図メーカー：上の説明を、ロゴの左端にそろえる */
  body.p-madori main{max-width:1180px}
  body.p-madori main > *{max-width:860px}
}
@media (min-width:1100px){
  body.p-madori main > h1{font-size:2.1rem;line-height:1.4}
  body.p-madori main > h1 br{display:none}
  body.p-madori .fs-tip{max-width:1148px}
  body.p-madori .app:not(:fullscreen){max-width:1480px;margin-left:auto;margin-right:auto}
  .pro-next{padding:26px 28px 22px}
  .pro-next ul{grid-template-columns:repeat(3,1fr)}
}

/* ===== ヘッダー（2026-10 見直し）：上に青緑の細い線・サイト名を2段・ナビは下線のタブ ===== */
header.site{box-shadow:inset 0 3px 0 var(--safe)}
header.site .brand-name{letter-spacing:.02em}
header.site .brand-name .b1{display:block;font-size:.66rem;font-weight:700;color:var(--safe);letter-spacing:.1em;line-height:1.35}
nav.mainnav .mainnav-in{gap:18px;padding-top:0;padding-bottom:0}
nav.mainnav a.navlink,nav.mainnav summary{background:transparent;border-radius:0;padding:11px 1px 8px;border-bottom:3px solid transparent;color:var(--sub);font-weight:500}
nav.mainnav a.navlink:hover,nav.mainnav summary:hover{background:transparent;color:#015A75;border-bottom-color:var(--oak-light)}
nav.mainnav a.navlink[aria-current=page],nav.mainnav details[data-on] summary,nav.mainnav details[open] summary{background:transparent;color:#015A75;font-weight:700;border-bottom-color:var(--safe)}
nav.mainnav a.navpro[aria-current=page]{color:#3A4A86;border-bottom-color:#3A4A86}
nav.mainnav .navsearch{align-self:center}
@media (max-width:1099px){
  body:not(.p-home) header.site .brand-name small{display:none}
  header.site .site-in{padding:9px 16px 7px}
  header.site .brand img{width:36px;height:36px}
}
@media (max-width:400px){
  nav.mainnav .mainnav-in{gap:13px}
  nav.mainnav a.navlink,nav.mainnav summary{font-size:.84rem}
  nav.mainnav .navsearch{padding:6px 9px}
  nav.mainnav .navsearch span{display:none}
}
@media (min-width:1100px){
  nav.mainnav .mainnav-in{gap:26px}
  nav.mainnav a.navlink,nav.mainnav summary{padding:26px 2px 23px;font-size:.95rem;color:var(--ink)}
  nav.mainnav .navsearch{margin-left:4px}
}

/* フッター（add-footer.mjs が全ページに入れる）：はみ出す案内の箱＋淡い青灰色の帯 */
footer.gfc{margin:64px 0 0;padding:0;font-size:1rem;color:#21333A}
.gfc .u{text-decoration:underline}
.gfc-help{max-width:1180px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
.gfc-help-in{background:#fff;border:1px solid #CCE4EC;border-radius:20px;padding:24px 20px;display:grid;gap:16px;box-shadow:0 6px 20px rgba(1,90,117,.10)}
.gfc-help h2{margin:0;font-size:1.1rem;color:#015A75}
.gfc-help p{margin:4px 0 0;font-size:.86rem;color:#4A5E64;line-height:1.6}
.gfc-acts{display:grid;gap:10px}
.gfc-acts a{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#E5F1F5;border-radius:12px;padding:14px 16px;text-decoration:none;color:#21333A;font-weight:700;font-size:.92rem;line-height:1.4;transition:background-color .2s}
.gfc-acts a:hover{background:#CCE4EC}
.gfc-acts a small{display:block;font-weight:400;color:#5A6E73;font-size:.76rem;margin-top:2px}
.gfc-acts a::after{content:"›";color:#016E8F;font-size:1.3rem}
.gfc-main{background:#EAF2F5;margin-top:-48px;padding-top:80px;color:#21333A}
.gfc-main a{color:inherit;text-decoration:none}
.gfc-in{max-width:1180px;margin:0 auto;padding:0 16px 8px}
.gfc-brand{display:flex;align-items:center;gap:12px}
.gfc-brand img{width:44px;height:44px}
.gfc-brand b{font-size:1.05rem;line-height:1.3}
.gfc-brand b span{display:block;font-size:.66rem;color:#016E8F;letter-spacing:.1em}
.gfc-logo{display:block}
.gfc-logo img{display:block;width:100%;max-width:300px;height:auto}
.gfc-desc{font-size:.82rem;line-height:1.7;margin:12px 0 0;color:#4A5E64}
.gfc-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;margin-top:28px}
.gfc h3{margin:0 0 8px;font-size:.8rem;letter-spacing:.08em;color:#016E8F;font-weight:700}
.gfc-cols nav:nth-child(3) h3{color:#3A4A86}
.gfc ul{list-style:none;margin:0;padding:0}
.gfc li a{display:block;padding:6px 0;font-size:.8rem;letter-spacing:-.02em;line-height:1.5}
.gfc li a:hover,.gfc-base a:hover{color:#016E8F;text-decoration:underline}
.gfc-base{border-top:1px solid #CCE4EC;margin-top:28px;padding:16px 0 24px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem;color:#5A6E73}
.gfc-base .cp{margin-left:auto}
@media (min-width:900px){
  .gfc-help-in{grid-template-columns:1fr 1.7fr;align-items:center;padding:28px 32px}
  .gfc-acts{grid-template-columns:repeat(3,1fr)}
  .gfc-in{display:grid;grid-template-columns:280px 1fr;column-gap:56px;padding-top:8px}
  .gfc-cols{grid-template-columns:repeat(3,1fr);margin-top:0}
  .gfc li a{font-size:.84rem;letter-spacing:0}
  .gfc-base{grid-column:1 / -1}
}
@media print{footer.gfc{display:none}}

/* 差し色（ももいろ）：ボタン #C0506E、線 #D96A86。フッターは白地に枠線だけ */
.gfc-acts a:first-child{background:#FCEFF3;box-shadow:inset 0 0 0 2px #D96A86}
.gfc-acts a:first-child::after{color:#C0506E}
.gfc-acts a:first-child:hover{background:#F8DCE5}

/* Xへの案内（フッター・運営者ページ） */
.gfc-x{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:#fff;border:1px solid #CCE4EC;border-radius:999px;padding:8px 18px 8px 10px;color:#21333A;text-decoration:none;font-size:.82rem;font-weight:700;line-height:1.3;transition:border-color .2s,box-shadow .2s}
.gfc-x svg{box-sizing:content-box;padding:7px;background:#14171A;color:#fff;border-radius:50%;flex:none}
.gfc-x span{display:block}
.gfc-x small{display:block;font-weight:400;color:#5A6E73;font-size:.74rem}
.gfc-x:hover{border-color:#016E8F;box-shadow:0 2px 10px rgba(1,90,117,.15)}
.gfc-main .gfc-x{color:#21333A}
/* Xの案内：フッター下段では、スマホは1行を使い、パソコンは右寄せ（©の左） */
.gfc-base .gfc-x{flex:0 0 100%;max-width:max-content;white-space:nowrap;margin:6px 0;order:-1;padding:6px 16px 6px 8px}
.gfc-base .gfc-x:hover{text-decoration:none}
@media (min-width:900px){
  .gfc-base .gfc-x{flex:none;max-width:none;order:0;margin:-6px 0 -6px auto}
  .gfc-base .cp{margin-left:0}
}

/* ヘッダー右上のXのロゴ */
header.site .site-in{position:relative}
.hd-x{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#14171A;color:#fff;transition:background-color .2s}
.hd-x:hover{background:#016E8F}
.hd-x:focus-visible{outline:2px solid #016E8F;outline-offset:2px}
@media (max-width:1099px){.hd-x{top:9px;transform:none;width:30px;height:30px;right:14px}.hd-x svg{width:14px;height:14px}}