/* Layout: paper first view with the promise on the left and the 47 prefecture plates on the right (the catalog is the hero); white reading bands below; one paper band for the trust story. Single light look, like Bämboo. */
:root{
  --paper:#F6F5F0; --white:#FFFFFF; --ink:#0A0607; --text:#2B2826; --sub:#625E5A; --line:#E3E1D9; --faint:#AFAAA2;
  --green:#1EB05D; --green-ink:#127A3E; --mark:#E4F4EA; --bar:#1B1C19; --bar-text:#ECEBE4;
  --sans:"Zen Kaku Gothic New",system-ui,"Hiragino Sans","Yu Gothic",sans-serif;
  --wide:1200px; --hd:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 12px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.85;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--white)}
html.lock,body.lock{overflow:hidden}
html{scrollbar-gutter:stable}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--ink);font-weight:900;line-height:1.5;text-wrap:balance;word-break:auto-phrase}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit;cursor:pointer}
.band{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{width:min(var(--wide),100% - 2*clamp(0px,3.2vw,48px));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}

/* 傍点 = the two dots of the ä in the Bäm logo */
.bt{white-space:nowrap}
.bt i{font-style:normal;position:relative}
.bt i::before{content:"";position:absolute;left:50%;top:var(--dt,-.2em);width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--green)}
.bt.drop i::before{animation:dotpop .5s cubic-bezier(.3,1.6,.5,1) both}
.bt.drop i:nth-child(2)::before{animation-delay:.12s}
.catch .bt.drop i::before{animation-delay:.45s}
.catch .bt.drop i:nth-child(2)::before{animation-delay:.57s}
@keyframes dotpop{from{transform:translateY(-.4em) scale(0)}to{transform:none}}

/* preview strip (not part of the site) */
.pv{background:var(--bar);color:var(--bar-text);font-size:13px;line-height:1.6}
.pv .in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:9px}
.pv b{font-weight:700}
.pv .sw{display:inline-flex;border:1px solid #4A4B45;border-radius:999px;padding:2px}
.pv .sw button{background:transparent;border:0;color:var(--bar-text);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;min-height:32px}
.pv .sw button[aria-pressed="true"]{background:var(--bar-text);color:var(--bar)}
.pv a{color:#9BE3B7;font-weight:700;text-underline-offset:3px}
.pv .note{color:#B9B8B0}

/* header: sticky, compacts after scrolling; ≥1100px full menu, below that 「地域を選ぶ」+「メニュー」 (same labelled button as Bäm and Bämboo) */
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:var(--white);font-weight:700;font-size:14px;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.hd.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(10,6,7,.35)}
.hd>.in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--hd);transition:min-height .25s}
.hd.scrolled>.in{min-height:64px}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.logo{display:flex;align-items:center;min-height:44px;line-height:0;flex:none}
.logo svg{height:34px;width:auto;transition:height .25s}
.hd.scrolled .logo svg{height:30px}
.desc{font-size:11.5px;font-weight:700;line-height:1.5;color:var(--sub);padding-left:16px;border-left:1px solid var(--line);white-space:nowrap}
.gnav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);font-size:15px;font-weight:700;color:var(--ink)}
.gnav>a,.gn-area{text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;position:relative;color:var(--ink);background:none;border:0;padding:0;font:inherit;font-weight:700}
.gnav>a:not(.cta)::after,.gn-area::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.gnav>a:not(.cta):hover::after,.gn-area:hover::after,.gn-area[aria-expanded="true"]::after{transform:scaleX(1)}
.gn-area i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.gn-area[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg)}
.gnav .cta{border:2px solid var(--ink);border-radius:10px;padding:0 18px;min-height:46px;margin-left:4px;transition:background .2s,color .2s}
.gnav .cta:hover{background:var(--ink);color:var(--white)}
.sp-tools{display:none;align-items:center;gap:8px}
.pick,.mbtn{white-space:nowrap;flex:none}
.pick{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:2px solid var(--ink);border-radius:10px;font-weight:900;font-size:14px;color:var(--ink);padding:0 12px;min-height:44px}
.pick svg{width:15px;height:15px;flex:none}
.mbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px 0 13px;border:0;border-radius:999px;background:var(--ink);color:var(--white);font-weight:900;font-size:14px}
.mbtn i{position:relative;width:16px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.mbtn i::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.mbtn.on i{border:0;height:16px}
.mbtn.on i::before,.mbtn.on i::after{content:"";position:absolute;left:-1px;right:-1px;top:7px;border-top:2px solid currentColor;transform:rotate(45deg)}
.mbtn.on i::after{transform:rotate(-45deg)}

/* 地域から探す: the panel that opens under the PC header */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(10,6,7,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.mega{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.mega .in{padding-block:26px 30px;display:grid;gap:18px}
.mega-hd{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:12px}
.mega-hd b{font-size:1.15rem;font-weight:900;color:var(--ink)}
.mega-hd .num{font-size:13px;color:var(--sub)}
.mega-hd .more{margin-left:auto}
.mega-rg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px}
.mega-rg .r b{display:block;font-size:13px;font-weight:900;color:var(--sub);margin-bottom:8px}
.mega-rg .rg-p{display:flex;flex-wrap:wrap;gap:6px}
.mega-rg .soon-l{display:block;margin-top:6px;font-size:12px;color:var(--faint);line-height:1.6}
.mega .pcards{grid-template-columns:repeat(2,minmax(0,330px))}
.mega .key{margin:0}

/* mega panel contents */
.mega .plate{min-height:36px;font-size:14px;padding:2px 9px 0}
.mega .soon{font-size:13.5px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main:focus{outline:none}

/* first view */
.fv{background:var(--paper)}
.fv .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);padding-block:clamp(40px,5.5vw,72px) clamp(48px,6vw,80px);align-items:start}
.to{font-size:15px;font-weight:700;color:var(--sub);margin-bottom:18px}
.catch{font-size:clamp(2rem,4vw,3.65rem);line-height:1.6;letter-spacing:.01em;--dt:.12em}
.catch .bt i::before{width:.17em;height:.17em;margin-left:-.085em}
.lead{margin-top:22px;font-size:clamp(1rem,1.3vw,1.08rem);max-width:30em}
.fv .in{align-items:stretch}
.fv-copy{padding-top:6px;display:flex;flex-direction:column}
.fv-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:22px}
.fv-links{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;font-weight:700}

/* Bäm in costume: the official kit (charcoal style) as a local reporter; only kit parts rotate */
.mascot{flex:none;width:clamp(150px,15vw,214px);margin:-4px -6px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot svg{display:block;width:100%;height:auto;overflow:visible}
.tlink{color:var(--green-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
.tlink:hover{color:var(--ink)}
.prefbox{display:grid;gap:14px;align-content:start}
.prefbox .ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.prefbox .ph h2{font-size:1.15rem}
.prefbox .ph span{font-size:13px;color:var(--sub)}
.regions{display:grid;gap:4px}
.rg{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:10px;align-items:start;padding-block:7px;border-bottom:1px solid var(--line)}
.rg:last-child{border-bottom:0}
.rg-n{font-size:13px;font-weight:900;color:var(--sub);padding-top:9px}
.rg-p{display:flex;flex-wrap:wrap;gap:7px}
.plate{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:2px 10px 0;border:2px solid var(--ink);border-radius:8px;background:var(--white);color:var(--ink);font-weight:900;font-size:15px;line-height:1.4;text-decoration:none;transition:background .2s,color .2s}
.plate small{font-size:11.5px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.plate .bt i::before{top:-.36em;width:5px;height:5px;margin-left:-2.5px;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.plate .bt i:nth-child(2)::before{transition-delay:.06s}
.plate:hover .bt i::before,.plate:focus-visible .bt i::before,.plate.marked .bt i::before{transform:none}
.rg-off{display:none}
.plate.off{border:1.5px dashed #D3CFC6;color:var(--faint);background:transparent;font-weight:700;cursor:default;pointer-events:none}
.plate.off small{display:none}
.soon{font-size:14px;color:var(--sub)}
.soon a{white-space:nowrap}
.key{margin:-6px 0 0;font-size:13px;color:var(--sub)}
p,li,dd{text-wrap:pretty}
.soon a{color:var(--green-ink);font-weight:700}
/* launch state: readable prefecture cards */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pcard{display:grid;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:inherit;transition:border-color .2s}
.pcard:hover{border-color:var(--ink)}
.pcard .plate{justify-self:start;pointer-events:none}
.pcard:hover .plate .bt i::before{transform:none}
.pcard b{color:var(--ink);font-weight:900;font-size:1.08rem;line-height:1.6;word-break:auto-phrase;text-wrap:balance}
.pcard .meta{font-size:13px;color:var(--sub);display:grid;line-height:1.7}
.pcard .go{font-size:14px;font-weight:900;color:var(--green-ink)}
.ask{border:2px dashed #D3CFC6;border-radius:14px;padding:16px 18px;display:grid;gap:4px;font-size:15px}
.ask b{color:var(--ink);font-weight:900;word-break:auto-phrase;text-wrap:balance}

/* sections */
.sec .in{padding-block:clamp(56px,7vw,96px);display:grid;gap:30px}
.sec+.sec .in{border-top:1px solid var(--line)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(1.45rem,2.6vw,2rem)}
.ey{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--sub);margin-bottom:6px}
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:999px;padding:1px 10px;line-height:1.8;white-space:nowrap}
.tag.int{background:var(--green);color:var(--ink)}
.tag.chk{border:1px solid var(--ink);color:var(--ink)}
.more{font-size:15px;font-weight:900;color:var(--green-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}

/* interviewed people: a slow, stoppable reel (KOKUYO-style portrait row) */
.ppl .in{padding-block:clamp(52px,6.5vw,88px) 0;display:grid;gap:22px}
.ppl .sec-h .acts{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap}
.stop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);font-size:14px;font-weight:700;color:var(--ink)}
.stop i{width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.stop[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.reel{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 0 clamp(52px,6.5vw,88px)}
.reel::-webkit-scrollbar{display:none}
.reel-track{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;padding-inline:max(16px,calc((100vw - var(--wide)) / 2)) 0}
.reel.still .reel-track{padding-right:max(16px,calc((100vw - var(--wide)) / 2))}
.pp{width:clamp(200px,19vw,262px);display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit}
.pp .ph{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--paper)}
.pp img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pp:hover img{transform:scale(1.03)}
.pp .pl{position:absolute;left:10px;bottom:10px;min-height:30px;font-size:12.5px;padding:1px 8px 0;pointer-events:none}
.pp .t{color:var(--ink);font-weight:900;font-size:1.04rem;line-height:1.7;--dt:-.14em;word-break:auto-phrase;text-wrap:pretty}
.pp .m{font-size:13px;color:var(--sub);line-height:1.6;display:grid}
.pp .m .num{font-variant-numeric:tabular-nums}
.log{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.log li{display:grid;grid-template-columns:7em 5.5em minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.log time{font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.log .k{justify-self:start;font-size:12px;font-weight:900;border:1px solid var(--ink);border-radius:6px;padding:0 8px;line-height:1.9;color:var(--ink)}
.log .tx{color:var(--ink);font-weight:700}
.log .plate{min-height:34px;font-size:13px;padding:1px 8px 0}

/* trust band */
.trust{background:var(--paper)}
.trust .in{padding-block:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}
.trust h2{font-size:clamp(1.55rem,2.7vw,2.25rem);line-height:1.55}
.trust .why{margin-top:20px;max-width:28em}
.trust .links{margin-top:14px}
/* sample company card: the 6 fixed fields every N選 page uses */
.co{background:var(--white);border-radius:16px;padding:clamp(20px,2.6vw,30px);display:grid;gap:14px;align-content:start}
.co-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.co-h b{color:var(--ink);font-weight:900;font-size:1.2rem}
.co-h b small{display:block;font-size:13px;font-weight:700;color:var(--sub);line-height:1.5}
.co-h .tags{display:flex;gap:6px}
.co dl{margin:0;display:grid}
.co dl div{display:grid;grid-template-columns:12.5em minmax(0,1fr);gap:4px 16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.7}
.co dt{font-weight:900;color:var(--ink);font-size:14px}
.co dd{margin:0}
.co .cap{font-size:13px;color:var(--sub)}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.trust-steps{grid-column:1/-1;display:grid;gap:14px}
.steps li{background:var(--white);border-radius:12px;padding:16px 18px 18px;display:grid;gap:6px;align-content:start;counter-increment:s;position:relative}
.steps li::before{content:counter(s);font-weight:900;font-size:13px;color:var(--white);background:var(--ink);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.steps b{color:var(--ink);font-weight:900;font-size:16px;line-height:1.5}
.steps span{font-size:14px;line-height:1.7}
.steps .opt{font-size:11.5px;font-weight:700;color:var(--green-ink)}
.marks{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.marks span{display:inline-flex;align-items:center;gap:8px}
.trust-r{display:grid;gap:18px;align-content:start}
.trust-r h3{font-size:15px;color:var(--sub);font-weight:900}
.trust .links{display:flex;flex-wrap:wrap;gap:4px 24px;font-weight:700;font-size:15px}

/* two boxes */
.duo .in{padding-block:clamp(56px,7vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.box{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px);display:grid;gap:12px;align-content:start}
.box h2{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.6}
.box p{font-size:15.5px}
.btn{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font-weight:900;font-size:16px;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--white)}
.btn.go{background:var(--green);border-color:var(--green)}
.btn.go:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* footer: prefecture directory (like the Michelin guide's country list) → links → operator bar (Bämboo order) */
.ft{background:var(--paper);border-top:1px solid var(--line)}
.ft-dir .in{padding-block:clamp(44px,5vw,64px) clamp(32px,4vw,44px);display:grid;gap:20px;border-bottom:1px solid #DDDAD1}
.ft-dir-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px}
.ft-dir-hd h2{font-size:1.3rem}
.ft-dir-hd .num{font-size:13px;color:var(--sub)}
.ft-dir-hd .more{margin-left:auto}
.ft-rg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.ft-r{min-width:0}
.ft-r summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:900;color:var(--ink);padding-bottom:8px;border-bottom:1px solid #DDDAD1;cursor:default}
.ft-r summary::-webkit-details-marker{display:none}
.ft-r summary small{font-size:12px;font-weight:700;color:var(--sub)}
.ft-r ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ft-r li a{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:36px;text-decoration:none;font-size:14.5px;font-weight:700;color:var(--ink)}
.ft-r li a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-r li a small{font-size:12px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.ft-r .off{margin:4px 0 0;font-size:12.5px;color:#8E8981;line-height:1.7}
.ft-main .in{padding-block:clamp(40px,5vw,60px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px)}
.ft-brand{display:grid;gap:10px;align-content:start;position:relative}
.ft-brand .logo svg{height:34px}
.ft-tag{font-weight:900;color:var(--ink);font-size:16px;margin-top:6px;word-break:auto-phrase}
.ft-desc{font-size:14px;line-height:1.85;max-width:22em}
.ft-bam{width:92px;margin-top:6px}
.ft-bam svg{display:block;width:100%;height:auto}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ft-nav h3{font-size:13px;font-weight:900;color:var(--sub);letter-spacing:.04em;margin-bottom:8px}
.ft-nav ul{list-style:none;margin:0;padding:0;display:grid}
.ft-nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5}
.ft-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-bar{background:var(--bar);color:var(--bar-text)}
.ft-bar .in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;padding-block:16px;font-size:13px}
.ft-bar a{color:var(--white);text-underline-offset:3px}
.ft-bar .sis{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.ft-bar .sis span{color:#A9A79F}
.ft-bar .sis a,.ft-bar .op a{display:inline-flex;align-items:center;gap:4px;min-height:44px}
.ext{width:11px;height:11px;flex:none}
.ft-bar small{font-size:12px;color:#A9A79F}
.totop{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #4A4B45;border-radius:999px;background:transparent;color:var(--white);font-weight:700;font-size:13px;text-decoration:none}
.totop i{width:8px;height:8px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg)}
.totop:hover{background:#2C2D29}

/* layers: 地域を選ぶ sheet and メニュー (full screen on phones, a right-hand panel on tablets) */
.scrim{position:fixed;inset:0;z-index:39;background:rgba(10,6,7,.38);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .25s}
.layer{position:fixed;top:0;right:0;bottom:0;width:100%;z-index:40;background:var(--white);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.layer.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.layer-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.layer-hd>b{font-weight:900;color:var(--ink);font-size:18px}
.layer-hd .logo svg{height:28px}
.layer-bd{flex:1;overflow-y:auto;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overscroll-behavior:contain;display:grid;gap:26px;align-content:start}
.layer .key{margin:0}
.layer .key b{color:var(--ink);font-weight:900}
.layer .plate{min-height:44px}
.layer .regions .rg-n{padding-top:11px}
.sheet-ft{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:16px}
.mn-sec{display:grid;gap:10px}
.mn-h{font-size:13px;font-weight:900;color:var(--sub);letter-spacing:.04em}
.mn-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;padding:10px 18px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);text-align:left;color:var(--ink)}
.mn-pick b{font-size:18px;font-weight:900;display:block;line-height:1.4}
.mn-pick small{display:block;font-size:12.5px;color:var(--sub);font-weight:700}
.mn-pick i,.mn-main a i{flex:none;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);margin-right:4px}
.mn-plates{display:flex;flex-wrap:wrap;gap:7px}
.mn-plates p{width:100%;margin:2px 0 0;font-size:12.5px;color:var(--sub)}
.mn-pp{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;color:inherit;padding:8px 0;border-bottom:1px solid var(--line)}
.mn-pp img{width:72px;height:90px;object-fit:cover;border-radius:8px;display:block;background:var(--paper)}
.mn-pp b{display:block;color:var(--ink);font-weight:900;font-size:15px;line-height:1.6;word-break:auto-phrase}
.mn-pp small{display:block;font-size:12.5px;color:var(--sub);line-height:1.6}
.mn-sec .more{justify-self:start}
.mn-main{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.mn-main a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mn-main b{display:block;font-weight:900;font-size:17.5px;line-height:1.45}
.mn-main small{display:block;font-size:13px;color:var(--sub);font-weight:500;line-height:1.6;margin-top:2px}
.mn-sub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.mn-sub a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--text);font-size:14.5px}
.mn-sis{display:grid;gap:2px;background:var(--paper);border-radius:14px;padding:14px 16px}
.mn-sis p{font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:2px}
.mn-sis a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:4px 0;text-decoration:none;font-weight:700;color:var(--ink);font-size:15px;line-height:1.5}
.mn-sis a+a{border-top:1px solid #E6E3DA}
.mn-sis a small{display:block;font-weight:500;color:var(--sub);font-size:12.5px}
.mn-sis .ext{width:12px;height:12px}
.ft-now ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px}
.ft-now li a{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;border:1px solid #DDDAD1;border-radius:12px;background:var(--white);text-decoration:none;color:var(--ink);font-weight:900;font-size:15px;line-height:1.5;transition:border-color .2s}
.ft-now li a:hover{border-color:var(--ink)}
.ft-now .plate{pointer-events:none;flex:none;min-height:34px;font-size:13.5px;padding:1px 8px 0}
.ft-now li a:hover .plate .bt i::before{transform:none}
.ft-now .soon{margin-top:12px}
.ft-bam,.mn-bam{-webkit-tap-highlight-color:transparent}
.ft-bam{cursor:pointer}
.mn-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mn-foot p{font-size:13px;color:var(--sub)}
.mn-bam{width:84px;flex:none}
.mn-bam svg{display:block;width:100%;height:auto}
@media (pointer:coarse){
  .ft-r li a,.ft-nav a{min-height:44px}
}
@media (min-width:600px){
  .layer{width:min(460px,100%);border-left:1px solid var(--line);box-shadow:-24px 0 48px -32px rgba(10,6,7,.45)}
}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:50;background:var(--ink);color:var(--white);font-size:14px;line-height:1.6;padding:12px 18px;border-radius:12px;width:max-content;max-width:min(92vw,560px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.toast code{font-family:inherit;color:#9BE3B7}

/* states */


/* tablet & phone */
@media (max-width:1279px){
  .desc{display:none}
}
@media (max-width:1099px){
  :root{--hd:64px}
  .gnav,.mega{display:none}
  .sp-tools{display:flex}
  .hd.scrolled>.in{min-height:58px}
  .logo svg,.hd.scrolled .logo svg{height:28px}
  .ft-rg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .ft-r li a,.ft-nav a{min-height:44px}
}
@media (max-width:1000px){
  .fv .in{grid-template-columns:1fr}
  .trust .in{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
@media (max-width:860px){
  .duo .in{grid-template-columns:1fr}
  .ft-main .in{grid-template-columns:1fr}
  .ft-brand{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .ft-brand>*{grid-column:1/-1}
  .ft-brand .ft-desc{grid-column:1}
  .ft-brand .ft-bam{grid-column:2;grid-row:3;align-self:end;margin:0}
  .ft-rg{grid-template-columns:1fr;gap:0}
  .ft-r summary{cursor:pointer;min-height:52px;padding:0;font-size:15px}
  .ft-r summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s;margin-right:4px}
  .ft-r[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .ft-r summary small{margin-left:auto}
  .ft-r ul{grid-template-columns:1fr 1fr;gap:0 16px;margin:4px 0 0}
  .ft-r li a{min-height:44px;justify-content:flex-start;gap:8px}
  .ft-r .off{margin:0 0 12px}
  .ft-dir-hd .more{margin-left:0}
  .co dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .log li{grid-template-columns:auto minmax(0,1fr);gap:2px 10px}
  .log time{grid-column:1}
  .log .k{grid-column:2;grid-row:1}
  .log .tx{grid-column:1/-1;font-size:15px}
  .log .plate{grid-column:1/-1;justify-self:start}
}
@media (max-width:520px){
  .pv .note{display:none}
  .plate.off{display:none}
  .rg-off{display:block;width:100%;font-size:12.5px;color:var(--faint);line-height:1.6;padding-top:2px}
  .to{font-size:13.5px;margin-bottom:12px}
  .catch{font-size:clamp(1.85rem,8.6vw,2.2rem)}
  .rg{grid-template-columns:4.1em minmax(0,1fr);gap:6px}
  .rg-n{font-size:12px}
  .plate{min-height:44px;font-size:14.5px;padding:2px 9px 0}
  .steps{grid-template-columns:1fr}
  .steps li{grid-template-columns:24px minmax(0,1fr);gap:2px 12px}
  .steps li::before{grid-row:1/4}
  .fv-links{flex-direction:column;gap:0}
  .mascot{width:118px;margin:0 -4px -6px 0}
  .pp{width:212px}
  .pick{padding:0 10px;font-size:13.5px}
  .pick svg{display:none}
  .mbtn{padding:0 13px 0 12px;font-size:13.5px}
  .ft-bar .in{flex-direction:column;align-items:flex-start;gap:4px}
  .totop{margin:8px 0 0}
}
@media (max-width:389px){
  .hd>.in{gap:10px}
  .sp-tools{gap:6px}
  .logo svg,.hd.scrolled .logo svg{height:24px}
  .pick{padding:0 9px;font-size:13px}
  .mbtn{padding:0 12px 0 11px;font-size:13px;gap:6px}
}
@media (max-width:349px){
  .logo svg,.hd.scrolled .logo svg{height:22px}
  .hd .mbtn i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bt.drop i::before{animation:none}
  .plate .bt i::before,.layer,.scrim,.mega,.toast,.pp img,.hd,.hd>.in,.logo svg{transition:none}
}

/* ===== lower pages ===== */
:root{--err:#B42318;--off:#736E68}
/* "not yet" labels stay readable (4.6:1 and up); the dashed line, not pale text, says they are not open */
.plate.off,.mega-rg .soon-l,.rg-off{color:var(--off)}
.ft-r .off{color:var(--off)}
[hidden]:not(.layer):not(.scrim){display:none!important}
.js .bt[data-drop]:not(.drop) i::before{transform:scale(0)}
.gnav>a[aria-current]::after,.gn-area.is-cur::after{transform:scaleX(1)}
.gnav .cta[aria-current]{background:var(--ink);color:var(--white)}
.mn-main a[aria-current] b::after{content:"いま見ているページ";display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:0 8px;line-height:1.8;vertical-align:2px}
.ft-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* where you are */
.crumbs{background:var(--white);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:13px;line-height:1.5;color:var(--sub)}
.crumbs li{display:inline-flex;align-items:center;min-height:40px}
.crumbs li+li::before{content:"";flex:none;width:6px;height:6px;border-top:1.5px solid var(--faint);border-right:1.5px solid var(--faint);transform:rotate(45deg);margin:0 11px 0 7px}
.crumbs a{color:var(--sub);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:40px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

/* page heading: the promise, with one place of dots */
.phero{background:var(--paper)}
.phero>.in{padding-block:clamp(34px,4.6vw,64px) clamp(40px,5.2vw,72px);display:grid;gap:18px;align-content:start}
.phero.has-side>.in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.phero .hx{display:grid;gap:16px;align-content:start;min-width:0}
.ttl{font-size:clamp(1.58rem,3.5vw,2.85rem);line-height:1.6;letter-spacing:.01em;--dt:.12em;word-break:auto-phrase;text-wrap:balance}
/* short lines break at phrase boundaries, never leave one or two letters alone; a phrase longer than the line may still break, so nothing pushes out of narrow screens or tables */
:where(.ttl,.lead,.sec-h p,.purp-h p,.cc .why,.callout p,.flow p,.promise p,.nx small,main h2,main h3,main h4,main summary,main legend,main label,main dt,main dd,main td,main li,main figcaption,main .t,main .nx b,main .pm b,main .flow b,.pp .t){overflow-wrap:anywhere}
main :is(h2,h3,h4,summary,legend,label,dt,figcaption,.t,.nx b,.pm b,.flow b){word-break:auto-phrase;text-wrap:balance}
main :is(dd,td,dt,figcaption,.toc li,.cc li,.steps li){word-break:auto-phrase;text-wrap:balance}
main li{word-break:auto-phrase;text-wrap:balance}
main p{text-wrap:pretty}
.pp .t{display:block;text-wrap:balance}
.prefbox .ph h2{flex:none}
.prefbox .ph .num{text-align:right}
.nw{white-space:nowrap}
.ttl .bt i::before{width:.17em;height:.17em;margin-left:-.085em}
.ttl small{display:block;font-size:.5em;line-height:1.6;color:var(--ink);margin-top:4px;letter-spacing:.02em}
.lead{font-size:clamp(1rem,1.25vw,1.08rem);max-width:36em;word-break:auto-phrase}
.sec-h p,.purp-h p,.cc .why,.callout p,.flow p,.promise p,.nx small{word-break:auto-phrase}
.phero .meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13.5px;color:var(--sub);line-height:1.7}
.phero .meta b{color:var(--ink);font-weight:700}
.phero .acts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:4px}

/* blocks */
.blk>.in{padding-block:clamp(48px,6vw,88px);display:grid;gap:26px}
.blk.paper{background:var(--paper)}
.blk.line>.in{border-top:1px solid var(--line)}
.blk.tight>.in{padding-block:clamp(36px,4.5vw,60px)}
.sec-h p{margin-top:10px;max-width:40em;font-size:16px}
.sec-h .more{align-self:end}
.h3{font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.6}
.prose{max-width:38em;display:grid;gap:1em}
.prose h3{margin-top:.6em;font-size:1.15rem}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:grid;gap:.35em}
.prose a,.tx-link{color:var(--green-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.prose a:hover,.tx-link:hover{color:var(--ink)}
.fine{font-size:14px;color:var(--sub);line-height:1.8}
.callout{background:var(--paper);border-radius:16px;padding:clamp(20px,2.6vw,30px);display:grid;gap:10px;align-content:start}
.blk.paper .callout,.callout.white{background:var(--white)}
.callout h2,.callout h3{font-size:clamp(1.08rem,1.5vw,1.22rem);line-height:1.6}
.callout p{font-size:15.5px}
.callout .links{display:flex;flex-wrap:wrap;gap:0 22px}
.callout.dash{background:transparent;border:2px dashed #D3CFC6}
.btn{gap:10px}
.btn .ar,.nx .ar,.mn-go .ar{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex:none}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn.ext-b{gap:8px}
.btn .ext{width:12px;height:12px}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3.4vw,48px);align-items:start}
.two>.co{border:1px solid var(--line)}

/* short promises in a row */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips>span,.chips>a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:2px 14px 0;border:1px solid var(--ink);border-radius:999px;background:var(--white);font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.5}
.chips>span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.chips>a{min-height:44px}
.chips>a:hover{background:var(--ink);color:var(--white)}
.chips>a small{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.chips>a:hover small{color:#CFCBC2}

/* numbered list of steps (vertical) */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:f;max-width:46em}
.flow>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 18px;padding:0 0 26px;position:relative;counter-increment:f}
.flow>li::before{content:counter(f);grid-row:1/4;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--white);font-weight:900;font-size:15px;display:grid;place-items:center;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.flow>li::after{content:"";position:absolute;left:17px;top:36px;bottom:0;border-left:2px solid var(--line)}
.flow>li:last-child{padding-bottom:0}
.flow>li:last-child::after{display:none}
.flow b{color:var(--ink);font-weight:900;font-size:1.06rem;line-height:1.6;padding-top:4px}
.flow p{font-size:15.5px}
.flow .opt{justify-self:start;font-size:12px;font-weight:700;color:var(--green-ink);border:1px solid currentColor;border-radius:999px;padding:0 9px;line-height:1.8}

/* questions */
.faq{border-top:2px solid var(--ink);max-width:52em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:1.6em minmax(0,1fr) 14px;gap:10px;align-items:center;min-height:64px;padding:12px 0;cursor:pointer;font-weight:900;color:var(--ink);font-size:16.5px;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-size:15px;color:var(--sub);font-weight:900;align-self:start;padding-top:1px}
.faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.faq .a{padding:0 0 20px calc(1.6em + 10px);display:grid;gap:.7em;font-size:16px;max-width:44em}
.faq .a a{color:var(--green-ink);font-weight:700;text-underline-offset:4px}

/* facts table */
.facts{margin:0;border-top:2px solid var(--ink);max-width:52em}
.facts>div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:900;color:var(--ink);font-size:15px}
.facts dd{margin:0;font-size:16px;display:grid;gap:4px;justify-items:start}
.facts dd small{font-size:13.5px;color:var(--sub)}
.facts .chk-l{font-size:14px;font-weight:700;color:var(--green-ink);display:inline-flex;align-items:center;gap:6px;min-height:40px;text-underline-offset:4px}

/* where to go next */
.nexts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.nx{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:84px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--white);text-decoration:none;color:var(--ink);transition:border-color .2s}
.nx:hover{border-color:var(--ink)}
.nx b{display:block;font-weight:900;font-size:16.5px;line-height:1.5}
.nx small{display:block;font-size:13.5px;color:var(--sub);line-height:1.6;margin-top:2px}

/* long policy pages: contents on the left, numbered sections like Bämboo */
.doc>.in{padding-block:clamp(40px,5vw,72px);display:grid;grid-template-columns:15.5em minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--hd) + 20px);max-height:calc(100vh - var(--hd) - 40px);overflow-y:auto;overscroll-behavior:contain}
.toc summary{list-style:none;font-size:13px;font-weight:900;color:var(--sub);letter-spacing:.04em;padding-bottom:8px;border-bottom:2px solid var(--ink);cursor:default;display:flex;align-items:center;justify-content:space-between}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:6px 0 0;padding:0;display:grid}
.toc a{display:grid;grid-template-columns:2.1em minmax(0,1fr);align-items:center;min-height:40px;padding:4px 0;font-size:14px;line-height:1.5;color:var(--text);text-decoration:none;border-radius:6px}
.toc a span{font-size:12px;color:var(--off);font-weight:700;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.toc a[aria-current="true"]{color:var(--ink);font-weight:900}
.toc a[aria-current="true"] span{color:var(--green-ink)}
.art{min-width:0;max-width:44em;display:grid;gap:0}
.art>section{padding:30px 0 34px;border-top:1px solid var(--line);display:grid;gap:14px;scroll-margin-top:calc(var(--hd) + 16px)}
.art>section:first-child{border-top:2px solid var(--ink)}
.art h2{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:4px;font-size:clamp(1.15rem,1.7vw,1.32rem);line-height:1.55}
.art h2 .no{font-size:.72em;color:var(--sub);font-weight:900;font-variant-numeric:tabular-nums;padding-top:.28em}
.art .body{display:grid;gap:.9em;padding-left:calc(2.2em * 1.25 + 4px);font-size:16px}
.art .body ul,.art .body ol{margin:0;padding-left:1.3em;display:grid;gap:.4em}
.art .body a{color:var(--green-ink);font-weight:700;text-underline-offset:4px}
.gist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;background:var(--paper);border-radius:12px;padding:12px 16px;font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.7}
.gist::before{content:"要するに";font-size:12px;font-weight:900;color:var(--sub);padding-top:2px;white-space:nowrap}
.art .updated{padding:24px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--sub)}
.contact-box{display:grid;gap:2px;background:var(--paper);border-radius:12px;padding:16px 18px;font-size:15px}
.contact-box b{color:var(--ink)}

/* ===== 地域から探す ===== */
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:2px 16px 0;border-radius:999px;border:1px solid var(--line);background:var(--white);text-decoration:none;color:var(--ink);font-weight:700;font-size:14.5px}
.jump a:hover{border-color:var(--ink)}
.jump a small{margin-left:6px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.areas{display:grid;border-top:2px solid var(--ink)}
.area-r{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:10px 28px;padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hd) + 16px)}
.area-r h2{font-size:1.15rem;line-height:1.5;padding-top:6px}
.area-r h2 small{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-top:2px}
.area-p{display:flex;flex-wrap:wrap;gap:8px}
.areas .plate{min-height:48px;font-size:16px;padding:2px 12px 0}
.areas .plate small{font-size:12.5px}
.plate.soon{border:1.5px dashed #C9C4BA;color:var(--sub);background:transparent;font-weight:700;cursor:pointer;font-family:inherit}
.plate.soon:hover,.plate.soon[aria-expanded="true"]{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--white)}
.plate.soon small{color:var(--off)}
.near{grid-column:2;background:var(--paper);border-radius:14px;padding:16px 18px;display:grid;gap:10px;font-size:15px}
.near[hidden]{display:none}
.near b{color:var(--ink)}
.near .rg-p{gap:7px}
.near .plate{min-height:44px;font-size:15px}
.near .tx-link{font-size:14.5px;justify-self:start;display:inline-flex;align-items:center;min-height:40px}

/* ===== 県のページ（N選） ===== */
.pref-hero .plate{min-height:52px;font-size:20px;padding:3px 16px 0;justify-self:start;pointer-events:none}
.pref-hero .plate .bt i::before{transform:none}
.rules{background:var(--white);border-radius:16px;padding:clamp(18px,2.4vw,26px);display:grid;gap:12px;align-content:start;border:1px solid var(--line)}
.rules>b{font-size:15px;color:var(--ink);font-weight:900}
.rules>p{font-size:15px}
.rules details{border-top:1px solid var(--line)}
.rules summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;cursor:pointer;font-weight:900;font-size:14.5px;color:var(--ink)}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s;flex:none;margin-right:4px}
.rules details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rules .a{padding:0 0 14px;font-size:14.5px;display:grid;gap:8px}
.rules .a .marks{font-size:14px}
.rules ol{margin:0;padding-left:1.3em;display:grid;gap:2px}

.quick{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.quick caption{text-align:left;font-size:13.5px;color:var(--sub);padding-bottom:10px}
.quick th,.quick td{text-align:left;vertical-align:top;padding:14px 14px 14px 0;border-bottom:1px solid var(--line)}
.quick thead th{font-size:13px;color:var(--sub);font-weight:900;border-bottom:2px solid var(--ink);padding-top:0;white-space:nowrap}
.quick tbody th{font-weight:900;color:var(--ink);min-width:9em}
.quick tbody th a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px;margin-block:-6px}
.quick tbody th a:hover{color:var(--green-ink)}
.quick .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.quick td.num{white-space:nowrap}
.quick td[data-th="場所"]{white-space:nowrap}
main .quick td{overflow-wrap:normal}
.quick tr:target th,.quick tr:hover th{background:none}

.purp{display:grid;gap:22px;scroll-margin-top:calc(var(--hd) + 16px)}
.purp+.purp{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.purp-h{display:grid;gap:6px}
.purp-h h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.purp-h p{font-size:15.5px;max-width:40em}
.purp-h .ey{margin:0}
.cc{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);scroll-margin-top:calc(var(--hd) + 16px)}
.cc:target{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cc-l{display:grid;gap:14px;align-content:start;position:sticky;top:calc(var(--hd) + 20px);align-self:start}
.cc-ph{margin:0;display:grid;gap:6px}
.cc-ph .fr{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.cc-ph img{display:block;width:100%;height:100%;object-fit:cover}
.cc-ph figcaption{font-size:12.5px;color:var(--sub);line-height:1.6}
.cc-h{display:grid;gap:6px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.cc-h h3{font-size:1.3rem;line-height:1.5}
.cc-h h3 small{display:block;font-size:13px;font-weight:700;color:var(--sub)}
.cc-h .tags{display:flex;flex-wrap:wrap;gap:6px}
.cc .why{font-size:clamp(1.08rem,1.5vw,1.22rem);font-weight:900;color:var(--ink);line-height:1.7;--dt:-.12em}
.cc .seen{font-size:14.5px;color:var(--text);background:var(--paper);border-radius:10px;padding:10px 14px;line-height:1.75}
.cc .seen b{display:block;font-size:12px;color:var(--sub);font-weight:900;letter-spacing:.04em}
.cc dl{margin:0;display:grid}
.cc dl div{display:grid;grid-template-columns:12.5em minmax(0,1fr);gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.7}
.cc dt{font-weight:900;color:var(--ink);font-size:14px}
.cc dd{margin:0}
.cc dl div.warn dd{color:var(--ink);font-weight:700}
.cc-r{display:grid;gap:14px;align-content:start;min-width:0}
.cc .btns{margin-top:4px}
.cc .btns .btn{min-height:50px;font-size:15.5px;padding:0 20px}
.cc .fix{font-size:13px;color:var(--sub)}
.cc .fix a{color:var(--sub);text-underline-offset:3px}
.ppl-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.pm{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--white);transition:border-color .2s}
.pm:hover{border-color:var(--ink)}
.pm img{width:96px;height:120px;object-fit:cover;border-radius:8px;display:block;background:var(--paper)}
.pm b{display:block;color:var(--ink);font-weight:900;font-size:15.5px;line-height:1.65;--dt:-.14em}
.pm small{display:block;font-size:13px;color:var(--sub);line-height:1.6;margin-top:4px}
.log.page li{grid-template-columns:7em minmax(0,1fr)}
.near-prefs{display:flex;flex-wrap:wrap;gap:8px}

/* ===== 取材記事 ===== */
.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter .lab{font-size:13px;font-weight:900;color:var(--sub);margin-right:4px}
.filter button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 14px 0;border:2px solid var(--ink);border-radius:8px;background:var(--white);font-weight:900;font-size:15px;color:var(--ink);line-height:1.4}
.filter button small{font-size:12px;font-weight:700;color:var(--sub)}
.filter button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.filter button[aria-pressed="true"] small{color:#CFCBC2}
.filter button .bt i::before{top:-.36em;width:5px;height:5px;margin-left:-2.5px;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.filter button[aria-pressed="true"] .bt i::before,.filter button:hover .bt i::before{transform:none}
.count{font-size:14px;color:var(--sub)}
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px) clamp(16px,2.2vw,28px)}
.pp-grid .pp{width:auto}
.pp-grid .pp .t{font-size:1.1rem}
.pp[hidden]{display:none}

.art-hero>.in{padding-block:clamp(32px,4.4vw,60px) clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.art-hero .hx{display:grid;gap:18px;align-content:end}
.art-hero .who{display:grid;gap:2px;font-size:15px;line-height:1.7}
.art-hero .who b{color:var(--ink);font-size:1.12rem;font-weight:900}
.art-hero .who .plate{justify-self:start;min-height:36px;font-size:14px;padding:1px 10px 0;margin-bottom:6px}
.art-hero figure{margin:0;display:grid;gap:6px}
.art-hero figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:var(--white)}
.art-hero figcaption{font-size:12.5px;color:var(--sub)}
.fiction{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--ink);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.7;background:var(--white);max-width:40em}
.fiction b{flex:none;font-size:12px;font-weight:900;background:var(--ink);color:var(--white);border-radius:6px;padding:1px 8px;margin-top:2px}
.story>.in{padding-block:clamp(44px,5.6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(32px,5vw,80px);align-items:start}
.story .body{max-width:36em;display:grid;gap:1.15em;font-size:17px;line-height:1.95;min-width:0}
.story .body .intro{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.9}
.story .body h2{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.6;margin-top:1.2em;padding-top:1.2em;border-top:1px solid var(--line)}
.story .body h2:first-of-type{margin-top:.4em}
.story blockquote{margin:.6em 0;padding:0 0 0 20px;border-left:4px solid var(--ink);font-size:clamp(1.15rem,1.8vw,1.35rem);font-weight:900;color:var(--ink);line-height:1.7}
.story blockquote p{text-wrap:balance;word-break:auto-phrase}
.story blockquote cite{display:block;font-style:normal;font-size:13.5px;font-weight:700;color:var(--sub);margin-top:6px}
.story figure{margin:.6em 0;display:grid;gap:8px}
.story figure .fr{border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--paper)}
.story figure img{display:block;width:100%;height:100%;object-fit:cover}
.story figcaption{font-size:13.5px;color:var(--sub)}
.ed-note{background:var(--paper);border-radius:14px;padding:18px 20px;display:grid;gap:8px;font-size:16px}
.ed-note b{font-size:13px;font-weight:900;color:var(--sub);letter-spacing:.04em}
.record{margin:0;display:grid;border-top:2px solid var(--ink);font-size:14.5px}
.record div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.record dt{font-weight:900;color:var(--ink)}
.record dd{margin:0}
.side{position:sticky;top:calc(var(--hd) + 20px);display:grid;gap:14px}
.side .co{border:1px solid var(--line);padding:20px;gap:10px}
.side .co-h b{font-size:1.08rem}
.side .co dl div{grid-template-columns:1fr;gap:0;font-size:14.5px;padding:9px 0}
.side .co dt{font-size:12.5px;color:var(--sub)}
.side .btn{justify-self:stretch;min-height:50px;font-size:15px}

/* ===== はじめて頼む方へ ===== */
.cost{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.cost li{border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:8px;align-content:start;background:var(--white)}
.cost b{color:var(--ink);font-weight:900;font-size:1.05rem}
.cost p{font-size:15px}
.cost .ask{border:0;padding:0;font-size:14.5px;display:block;color:var(--ink);font-weight:700;border-radius:0}
.cost .ask::before{content:"聞くこと　";color:var(--green-ink);font-weight:900;font-size:12.5px}
.memo-w{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.qs{display:grid;gap:14px}
.qs fieldset{margin:0;border:1px solid var(--line);border-radius:14px;padding:14px 18px 10px;background:var(--white)}
.qs legend{font-weight:900;color:var(--ink);font-size:15px;padding:0 6px;margin-left:-6px}
.ck{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;min-height:44px;padding:10px 0;cursor:pointer;font-size:15.5px;line-height:1.65;border-top:1px solid var(--line)}
.qs legend+.ck{border-top:0}
.ck input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--green-ink);cursor:pointer}
.memo{position:sticky;top:calc(var(--hd) + 20px);background:var(--paper);border-radius:16px;padding:clamp(18px,2.4vw,26px);display:grid;gap:12px}
.memo label{font-size:13px;font-weight:900;color:var(--sub)}
.memo input[type=text]{width:100%;min-height:48px;border:1.5px solid #C9C4BA;border-radius:10px;padding:8px 12px;font:inherit;font-size:17px;background:var(--white);color:var(--ink)}
.memo input[type=text]:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--ink)}
.memo-out{background:var(--white);border-radius:12px;padding:16px 18px;min-height:180px;font-size:15px;line-height:1.8;white-space:pre-wrap;color:var(--ink)}
.memo-out .empty{color:var(--sub)}
.memo .btns .btn{min-height:48px;font-size:15px;padding:0 18px}
.memo .btns .btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.done{background:var(--ink);color:var(--white)}

/* ===== 制作会社の方へ ===== */
.badge-w{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.badge-w .bd{display:grid;gap:8px;justify-items:center}
.badge-w .bd svg{width:180px;height:180px}
.badge-w .bd small{font-size:12.5px;color:var(--sub)}
.snip{display:grid;gap:8px}
.snip label{font-size:13.5px;font-weight:900;color:var(--ink)}
.snip textarea{width:100%;border:1.5px solid #C9C4BA;border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.7;background:var(--white);color:var(--ink);resize:vertical}
.snip textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.snip .btn{min-height:46px;font-size:14.5px;padding:0 18px}
.ask6{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.ask6 li{border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:6px;background:var(--white)}
.ask6 b{color:var(--ink);font-weight:900}
.ask6 p{font-size:15px}
.blk.paper .ask6 li,.blk.paper .cost li{border-color:transparent}

/* ===== Bämまちについて ===== */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.legend>div{background:var(--white);border-radius:14px;padding:20px;display:grid;gap:10px;align-content:start}
.legend .sym{min-height:52px;display:flex;align-items:center}
.legend .sym .plate{pointer-events:none}
.legend .sym .plate .bt i::before{transform:none}
.legend .big{font-size:1.6rem;font-weight:900;color:var(--ink);--dt:.02em}
.legend b{color:var(--ink);font-weight:900}
.legend p{font-size:15px}
.promise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.promise li{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start}
.promise b{font-size:1.15rem;font-weight:900;color:var(--ink);line-height:1.6}
.promise p{font-size:15.5px}

/* ===== お問い合わせ ===== */
.fm-w{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(32px,5vw,72px);align-items:start}
.fm{display:grid;gap:26px;min-width:0}
.fm fieldset{border:0;margin:0;padding:0;min-width:0}
.fm legend,.fm .lb{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);font-size:16px;margin-bottom:10px;padding:0}
.req,.opt-t{font-size:11.5px;font-weight:900;border-radius:6px;padding:0 7px;line-height:1.8;flex:none}
.req{background:var(--ink);color:var(--white)}
.opt-t{border:1px solid var(--faint);color:var(--sub);font-weight:700}
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.type{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;align-items:start;padding:16px 18px;border:2px solid var(--line);border-radius:14px;background:var(--white);cursor:pointer;min-height:84px;transition:border-color .15s}
.type:hover{border-color:#8E8981}
.type input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--green-ink);cursor:pointer}
.type b{color:var(--ink);font-weight:900;font-size:16px;line-height:1.5}
.type small{grid-column:2;font-size:13.5px;color:var(--sub);line-height:1.6}
.type:has(input:checked){border-color:var(--ink);background:var(--paper)}
.type:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.fld{display:grid;gap:6px;min-width:0}
.fld .hint{font-size:13.5px;color:var(--sub);line-height:1.6}
.fld input[type=text],.fld input[type=email],.fld input[type=url],.fld select,.fld textarea{width:100%;min-height:52px;border:1.5px solid #BDB8AE;border-radius:10px;padding:10px 14px;font:inherit;font-size:17px;line-height:1.6;background:var(--white);color:var(--ink)}
.fld textarea{min-height:150px;resize:vertical}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--ink)}
.fld [aria-invalid="true"]{border-color:var(--err);background:#FFF8F7}
.fld .err{font-size:14px;font-weight:700;color:var(--err);display:flex;gap:6px;align-items:center}
.fld .err::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--err);color:#fff;font-size:12px;display:grid;place-items:center;line-height:1}
.fld .err[hidden]{display:none}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rel{display:flex;flex-wrap:wrap;gap:8px}
.rel label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-size:15px;background:var(--white)}
.rel label:has(input:checked){border-color:var(--ink);background:var(--paper);font-weight:700}
.rel input{width:18px;height:18px;margin:0;accent-color:var(--green-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree{display:grid;gap:10px;background:var(--paper);border-radius:14px;padding:16px 18px}
.agree p{font-size:14.5px}
.agree label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;min-height:44px;font-weight:700;color:var(--ink);cursor:pointer}
.agree input{width:22px;height:22px;margin:0;accent-color:var(--green-ink)}
.agree a{color:var(--green-ink)}
.fm .send{display:grid;gap:10px;justify-items:start}
.fm .send .btn{min-height:56px;font-size:17px;padding:0 34px}
.errsum{border:2px solid var(--err);border-radius:14px;padding:14px 18px;background:#FFF8F7;display:grid;gap:6px}
.errsum[hidden]{display:none}
.errsum b{color:var(--err);font-weight:900}
.errsum ul{margin:0;padding-left:1.2em;font-size:15px}
.errsum a{color:var(--err);font-weight:700}
.aside{position:sticky;top:calc(var(--hd) + 20px);display:grid;gap:14px}
.aside .callout{gap:6px}
.aside .callout h2{font-size:15px}
.aside .callout p{font-size:14.5px}
.only-t{display:none}
.fm[data-type="recommend"] .t-recommend,.fm[data-type="interview"] .t-interview,.fm[data-type="correction"] .t-correction,.fm[data-type="other"] .t-other{display:grid}
.fm:not([data-type]) .after-type{display:none}

/* ===== サイトマップ ===== */
.smap{display:grid;gap:clamp(36px,4vw,56px)}
.smap-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.smap section{display:grid;gap:8px;align-content:start}
.smap h2{font-size:1.05rem;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.smap ul{list-style:none;margin:0;padding:0;display:grid}
.smap li a{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;line-height:1.5}
.smap li a:hover{text-decoration:underline;text-underline-offset:3px}
.smap li a small{margin-left:auto;font-size:12.5px;color:var(--sub);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.smap .groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px}
.smap .groups>li{display:grid;gap:2px;align-content:start}
.smap .sub-h{font-size:12.5px;font-weight:900;color:var(--sub);padding-top:6px}
@media (max-width:1000px){.smap-top,.smap .groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.smap-top,.smap .groups{grid-template-columns:minmax(0,1fr)}}

/* ===== 404 / 送信後 ===== */
.done-w{display:grid;gap:18px;max-width:40em}

@media (max-width:1099px){
  .story>.in{grid-template-columns:minmax(0,1fr)}
  .side{position:static;grid-template-columns:minmax(0,1fr);max-width:36em}
  .fm-w{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}
@media (max-width:1000px){
  .two{grid-template-columns:minmax(0,1fr)}
  .phero.has-side>.in,.art-hero>.in{grid-template-columns:minmax(0,1fr)}
  .art-hero figure{max-width:320px}
  .doc>.in{grid-template-columns:minmax(0,1fr);gap:20px}
  .toc{position:static;max-height:none;background:var(--paper);border-radius:14px;padding:6px 16px}
  .toc summary{cursor:pointer;border-bottom:0;padding-bottom:0;min-height:52px;font-size:14px;color:var(--ink)}
  .toc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s;margin-right:4px}
  .toc[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .toc ol{margin:0 0 10px;border-top:1px solid #E6E3DA;padding-top:4px}
  .toc a{min-height:44px}
  .cc{grid-template-columns:minmax(0,1fr)}
  .cc-l{grid-template-columns:minmax(0,1fr);position:static}
  .memo-w{grid-template-columns:minmax(0,1fr)}
  .memo{position:static}
  .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promise{grid-template-columns:minmax(0,1fr)}
}
/* the quick table becomes a list on tablets and phones: five columns do not fit below 900px */
@media (max-width:900px){
  .quick thead{display:none}
  .quick caption{display:block;padding-bottom:4px}
  .quick,.quick tbody,.quick tr,.quick th,.quick td{display:block}
  .quick tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .quick th,.quick td{border:0;padding:0}
  .quick tbody th{font-size:16.5px;margin-bottom:6px}
  .quick td{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:10px;font-size:15px;padding:3px 0}
  .quick td::before{content:attr(data-th);font-size:12.5px;font-weight:900;color:var(--sub);padding-top:2px}
  .quick td.num{white-space:normal}
  .quick td[data-th]{white-space:normal}
}
@media (max-width:760px){
  .area-r{grid-template-columns:minmax(0,1fr);gap:10px}
  .area-r h2{padding-top:0}
  .near{grid-column:1}
  .facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .cc dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .types{grid-template-columns:minmax(0,1fr)}
  .row2{grid-template-columns:minmax(0,1fr)}
  .badge-w{grid-template-columns:minmax(0,1fr)}
  .badge-w .bd{justify-items:start}
  .art .body{padding-left:0}
}
@media (max-width:600px){
  .pp-grid{grid-template-columns:minmax(0,1fr)}
  .pp-grid .pp{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 14px;align-items:start}
  .pp-grid .pp .ph{grid-row:1/3}
  .pp-grid .pp .t{font-size:1.02rem}
  .pp-grid .pp .pl{display:none}
  .ttl small{font-size:.56em}
  .flow>li{grid-template-columns:36px minmax(0,1fr);gap:4px 14px}
  .flow>li::before{width:30px;height:30px;font-size:13.5px}
  .flow>li::after{left:14px;top:30px}
  .pm{grid-template-columns:80px minmax(0,1fr)}
  .pm img{width:80px;height:100px}
  .record div{grid-template-columns:6em minmax(0,1fr)}
  .gist{grid-template-columns:minmax(0,1fr)}
  .faq summary{font-size:16px}
  .faq .a{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .js .bt[data-drop]:not(.drop) i::before{transform:none}
  .filter button .bt i::before,.faq summary::after,.rules summary::after{transition:none}
}

/* standalone text links are easy to tap (44px high hit area) */
.tx-link{padding-block:9px}
/* area: how to look, beside the heading (wide screens; phones go straight to the prefectures) */
.howto{gap:16px}
.howto-h{font-weight:900;color:var(--ink);font-size:1.02rem}
.howto .flow>li{padding-bottom:18px}
@media (max-width:1000px){.howto{display:none}}

/* very narrow phones (320–360px): page titles a step smaller so short lines stay whole */
@media (max-width:360px){.ttl{font-size:1.45rem}}
.btn{text-wrap:balance;word-break:auto-phrase}
@media (max-width:360px){.pp-grid .pp .t{font-size:.96rem}}

/* ===== Version 6: illustrations, diagrams and tables (prefecture pages, interviews, lower pages) ===== */
.ico{display:block;flex:none}

/* the prefecture's town at the foot of the page heading */
.town-w{height:clamp(96px,13vw,176px);margin-top:-8px;overflow:hidden;line-height:0}
.town{width:100%;height:100%;display:block}
.pref-hero>.in{padding-bottom:clamp(20px,2.4vw,32px)}
.notyet .acts{gap:10px}
.notyet .acts .btn{min-height:50px;font-size:15px}

/* rules box: three promises with small pictures */
.rules>b{display:flex;align-items:center;gap:8px}
.promise3{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.promise3 li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;font-size:15px;font-weight:700;color:var(--ink);line-height:1.6}

/* purposes as picture tiles */
.ptiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pt{display:grid;justify-items:start;gap:6px;padding:16px 16px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--white);color:var(--ink);text-decoration:none;min-height:44px;transition:transform .2s,box-shadow .2s}
.pt b{font-size:16px;font-weight:900;line-height:1.5}
.pt small{font-size:13px;font-weight:700;color:var(--sub);line-height:1.5}
a.pt:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.pt.off{border:1.5px dashed #D3CFC6;background:transparent;color:var(--sub)}
.pt.off .ico{opacity:.45;filter:grayscale(1)}
.pt.off b{color:var(--sub)}

/* 会って打ち合わせできる範囲 */
.vt-wrap{display:grid;gap:18px}
.vt-key{display:flex;gap:14px;align-items:center;background:var(--white);border-radius:14px;padding:14px 18px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.7}
.vt{width:100%;border-collapse:collapse;background:var(--white);border-radius:14px;overflow:hidden;font-size:15.5px;line-height:1.7}
.vt thead th{font-size:13px;font-weight:900;color:var(--sub);text-align:left;padding:14px 18px 10px;border-bottom:2px solid var(--ink)}
.vt tbody th,.vt td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line)}
.vt tbody tr:last-child>*{border-bottom:0}
.vt tbody th{width:13em;font-weight:900;color:var(--ink);font-size:16px}
.vt tbody th small{display:block;font-size:12.5px;font-weight:700;color:var(--sub);line-height:1.6;margin-top:2px}
.vt-names a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;display:inline-flex;min-height:32px;align-items:center}
.vt-names a:hover{color:var(--green-ink)}
.vt-names .none{color:var(--sub);font-size:14.5px}
.vt-n{width:9.5em;white-space:nowrap}
.vt-n .num{display:block;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.vt-n .bar{display:block;height:8px;border-radius:4px;background:var(--line);margin-top:6px;overflow:hidden}
.vt-n .bar i{display:block;height:100%;background:var(--ink);border-radius:4px}
.vt tr.web th,.vt tr.web td{background:#FAF9F6}
.vt tr.isl th{color:var(--text)}

/* purpose section heading with its picture */
.purp-h{grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start}
.purp-h>div{display:grid;gap:6px}

/* the six fields, each with its picture */
.cc dt{display:flex;align-items:center;gap:8px}
.cc dt .ico{width:22px;height:22px}
.vm{display:grid;gap:8px;background:var(--paper);border-radius:12px;padding:12px 14px}
.vm-h{margin:0;font-size:12.5px;font-weight:900;color:var(--sub)}
.vmap{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vmap>span{font-size:13px;font-weight:700;line-height:1.5;padding:3px 10px;border-radius:999px;border:1.5px dashed #CFCAC0;color:var(--sub);background:transparent}
.vmap>span.on{background:var(--ink);border:1.5px solid var(--ink);color:var(--white)}
.vm-w{margin:0;display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink)}

/* local tips */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tip{background:var(--white);border-radius:16px;padding:clamp(20px,2.4vw,28px);display:grid;gap:14px;align-content:start}
.tip>div{display:grid;gap:8px}
.tip h3{font-size:clamp(1.05rem,1.4vw,1.15rem);line-height:1.6}
.tip p{font-size:15.5px}

/* bottom of the prefecture page */
.nexts.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.studio-cta{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:start}
.studio-cta>div{display:grid;gap:10px}
.log.page li{grid-template-columns:6.4em 3.6em minmax(0,1fr);gap:4px 12px;padding:10px 0;font-size:14.5px}
.log.page .tx{font-weight:700;line-height:1.6}
.log.page .k{padding:0 6px;font-size:11.5px}

/* interview list */
.ivproc{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2.4vw,26px);display:grid;gap:12px}
.ivproc>b{font-size:15px;font-weight:900;color:var(--ink)}
.ivproc ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ivproc li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;position:relative;padding-bottom:14px}
.ivproc li:not(:last-child)::after{content:"";position:absolute;left:19px;top:44px;bottom:2px;width:2px;background:var(--line)}
.ivproc li span{font-size:14px;line-height:1.65;color:var(--sub)}
.ivproc li b{display:block;font-size:15px;color:var(--ink)}
.filters{display:grid;gap:10px}
.none-box{display:grid;gap:12px;justify-items:start;padding:24px;border:2px dashed #D3CFC6;border-radius:14px}
.none-box[hidden]{display:none}
.four{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:f}
.four li{background:var(--white);border-radius:16px;padding:22px 20px;display:grid;gap:8px;align-content:start;position:relative}
.four .no{position:absolute;right:18px;top:16px;font-size:28px;font-weight:900;color:var(--line);font-variant-numeric:tabular-nums;line-height:1}
.four b{font-size:16.5px;color:var(--ink);line-height:1.55}
.four span:not(.no){font-size:14.5px;line-height:1.7}

/* article */
.gist3{background:var(--paper);border-radius:14px;padding:18px 20px;display:grid;gap:10px}
.gist3>b{font-size:13px;font-weight:900;color:var(--sub);letter-spacing:.04em}
.gist3 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gist3 li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:16px;font-weight:700;color:var(--ink);line-height:1.7}
.gist3 li .ico{margin-top:3px}
.art-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:t}
.art-toc li{counter-increment:t}
.art-toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:2px 14px 0;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;background:var(--white)}
.art-toc a::before{content:counter(t);font-size:12px;font-weight:900;color:var(--sub);font-variant-numeric:tabular-nums}
.art-toc a:hover{border-color:var(--ink)}
.story .body h2{scroll-margin-top:calc(var(--hd) + 16px)}
.steps5{margin:.4em 0;display:grid;gap:12px}
.steps5 figcaption{font-size:13.5px;font-weight:900;color:var(--sub)}
.steps5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.steps5 li{background:var(--paper);border-radius:12px;padding:14px 12px;display:grid;gap:6px;align-content:start;position:relative;line-height:1.6}
.steps5 li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:22px;width:8px;height:8px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);z-index:1}
.steps5 .no{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--white);font-size:13px;font-weight:900;display:grid;place-items:center;line-height:1}
.steps5 b{font-size:15px;color:var(--ink);line-height:1.5}
.steps5 li>span:last-child{font-size:13.5px;color:var(--text)}
.story figure.steps5{margin:.4em 0}
.fig2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sheet{margin:.6em 0}
.paper1{background:var(--white);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 0 -4px #EDEAE3,0 10px 0 -3px var(--line);padding:22px 24px;display:grid;gap:14px;max-width:34em}
.p-h{margin:0;display:grid;gap:2px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.p-h b{font-size:17px;color:var(--ink)}
.p-h span{font-size:13px;color:var(--sub)}
.paper1 dl{margin:0;display:grid;gap:12px}
.paper1 dl div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 14px;align-items:start}
.paper1 dl .ico{grid-row:span 2}
.paper1 dt{font-size:12.5px;font-weight:900;color:var(--sub)}
.paper1 dd{margin:0;font-size:16px;font-weight:700;color:var(--ink);line-height:1.6}
.p-f{margin:0;font-size:13.5px;color:var(--sub);border-top:1px dashed var(--line);padding-top:10px}
.rsv3{margin:.6em 0;display:grid;gap:10px}
.rsv3 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rsv3 li{display:grid;gap:8px;justify-items:center;position:relative}
.rsv3 li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.rsv3 .no{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--white);font-size:13px;font-weight:900;display:grid;place-items:center;line-height:1}
.rsv3 .ph{width:100%;max-width:170px;aspect-ratio:9/16;border:6px solid var(--ink);border-radius:22px;background:var(--white);padding:16px 10px;display:grid;gap:7px;align-content:start;font-size:12px;line-height:1.5}
.rsv3 .ph b{font-size:13px;color:var(--ink);text-align:center;margin-bottom:4px}
.rsv3 .it{display:flex;justify-content:space-between;gap:4px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;font-weight:700;color:var(--ink)}
.rsv3 .it small{font-weight:700;color:var(--sub)}
.rsv3 .it.on{border-color:var(--ink);background:var(--paper)}
.rsv3 .cal{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.rsv3 .cal i{aspect-ratio:1;border-radius:5px;background:var(--paper)}
.rsv3 .cal i.x{background:repeating-linear-gradient(45deg,#E3E1D9 0 3px,transparent 3px 6px)}
.rsv3 .cal i.on{background:var(--ink)}
.rsv3 .tm{display:grid;gap:4px;margin-top:4px}
.rsv3 .tm i{font-style:normal;text-align:center;border:1.5px solid var(--line);border-radius:6px;padding:3px 0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rsv3 .tm i.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.rsv3 .sum{background:var(--paper);border-radius:8px;padding:10px 8px;font-weight:700;color:var(--ink);text-align:center}
.rsv3 .go{margin-top:6px;background:var(--green);color:var(--ink);font-weight:900;border-radius:8px;text-align:center;padding:8px 0}
.askbox{border:2px solid var(--ink);border-radius:16px;padding:18px 20px;display:grid;gap:12px;margin:.6em 0;background:var(--white)}
.ab-h{display:flex;gap:12px;align-items:center}
.ab-h b{font-size:16.5px;color:var(--ink);line-height:1.55}
.askbox ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.askbox li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.7;color:var(--ink)}
.askbox li::before{content:"";width:16px;height:16px;border:2px solid var(--ink);border-radius:4px;margin-top:6px}
.btn.sm{min-height:46px;font-size:14.5px;padding:0 18px;border-radius:10px}
.side .co dt{display:flex;align-items:center;gap:6px}
.side .vm{margin-top:4px}

@media (max-width:1000px){
  .ptiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tips{grid-template-columns:minmax(0,1fr)}
  .tip{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps5 ol{grid-template-columns:minmax(0,1fr)}
  .steps5 li{grid-template-columns:26px minmax(0,1fr);column-gap:12px}
  .steps5 li>b,.steps5 li>span:last-child{grid-column:2}
  .steps5 .no{grid-row:span 2}
  .steps5 li:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-9px;transform:rotate(135deg)}
}
@media (max-width:760px){
  .vt thead{display:none}
  .vt,.vt tbody,.vt tr,.vt th,.vt td{display:block;width:auto}
  .vt tr{padding:12px 16px;border-bottom:1px solid var(--line)}
  .vt tbody tr:last-child{border-bottom:0}
  .vt tbody th,.vt td{border:0;padding:0}
  .vt tbody th{width:auto;margin-bottom:4px}
  .vt td.vt-n{display:flex;align-items:center;gap:10px;margin-top:6px}
  .vt-n .bar{flex:1;margin:0;max-width:160px}
  .vt-key{align-items:flex-start}
  .vt-key .ico{width:40px;height:40px}
  .studio-cta{grid-template-columns:minmax(0,1fr)}
  .studio-cta>.ico{width:56px;height:56px}
  .rsv3 ol{grid-template-columns:minmax(0,1fr);justify-items:center}
  .rsv3 li{width:100%;grid-template-columns:26px 170px;justify-content:center;align-items:start;gap:12px}
  .rsv3 li:not(:last-child)::after{right:auto;left:calc(50% + 6px);top:auto;bottom:-12px;transform:rotate(135deg)}
}
@media (max-width:600px){
  .ptiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .pt{grid-template-columns:36px minmax(0,1fr);column-gap:10px;padding:12px;align-items:center}
  .pt .ico{width:36px;height:36px;grid-row:span 2}
  .pt b{font-size:15px}
  .pt small{font-size:12px}
  .purp-h{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .purp-h>.ico{width:48px;height:48px}
  .tip{grid-template-columns:minmax(0,1fr);gap:10px}
  .tip>.ico{width:52px;height:52px}
  .four{grid-template-columns:minmax(0,1fr)}
  .fig2{grid-template-columns:minmax(0,1fr)}
  .log.page li{grid-template-columns:auto auto minmax(0,1fr)}
  .log.page .tx{grid-column:1/-1}
  .paper1{padding:18px}
}
.phero.band .town-w{margin-left:calc(-1*max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1*max(16px,env(safe-area-inset-right,0px)))}
.quick .q-city{display:none}
@media (max-width:600px){
  .pt{grid-template-columns:minmax(0,1fr);justify-items:start;gap:4px;padding:12px 12px 10px}
  .pt .ico{width:34px;height:34px;grid-row:auto}
  .pt b{font-size:14.5px;word-break:keep-all;overflow-wrap:anywhere;line-height:1.45}
  .quick td[data-th="場所"],.quick td[data-th="打ち合わせ"]{display:none}
  .quick .q-city{display:inline;font-size:13px;font-weight:700;color:var(--sub);margin-left:8px}
  .quick tbody th a{margin-block:-10px}
}
/* inside an article the steps read downwards, like the phone */
.story .steps5 ol{grid-template-columns:minmax(0,1fr);gap:10px}
.story .steps5 li{grid-template-columns:26px 11em minmax(0,1fr);column-gap:14px;align-items:center;padding:12px 16px}
.story .steps5 li>b,.story .steps5 li>span:last-child{grid-column:auto}
.story .steps5 .no{grid-row:auto}
.story .steps5 li:not(:last-child)::after{right:auto;left:25px;top:auto;bottom:-9px;transform:rotate(135deg)}
@media (max-width:600px){
  .story .steps5 li{grid-template-columns:26px minmax(0,1fr);align-items:start}
  .story .steps5 li>b,.story .steps5 li>span:last-child{grid-column:2}
  .story .steps5 .no{grid-row:span 2}
}
@media (max-width:760px){
  .rsv3 ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;justify-items:stretch}
  .rsv3 li{width:auto;grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:center;gap:6px}
  .rsv3 li:not(:last-child)::after{left:auto;right:-9px;top:50%;bottom:auto;transform:rotate(45deg);width:7px;height:7px}
  .rsv3 .ph{border-width:4px;border-radius:14px;padding:10px 6px;gap:5px;font-size:10.5px;aspect-ratio:auto;min-height:190px}
  .rsv3 .ph b{font-size:11px;margin-bottom:2px}
  .rsv3 .it{flex-direction:column;gap:0;padding:4px 6px;line-height:1.4}
  .rsv3 .tm i{padding:2px 0}
  .rsv3 .sum{padding:6px 4px}
  .rsv3 .go{padding:6px 0}
}

/* ===== top page ===== */
.fv .town-w{margin-top:-24px}
.fv.band .town-w{margin-left:calc(-1*max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1*max(16px,env(safe-area-inset-right,0px)))}
.use .in{padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px);display:grid;gap:28px}
.how3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.how3>li{display:grid;grid-template-rows:auto 1fr;gap:16px;position:relative}
.how3>li:not(:last-child)::after{content:"";position:absolute;right:calc(-1*clamp(14px,2vw,24px)/2 - 5px);top:88px;width:10px;height:10px;border-top:2.5px solid var(--ink);border-right:2.5px solid var(--ink);transform:rotate(45deg)}
.how3 .tx{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 12px;align-content:start}
.how3 .no{grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--white);font-weight:900;font-size:15px;display:grid;place-items:center;line-height:1}
.how3 b{font-size:clamp(1.1rem,1.6vw,1.25rem);font-weight:900;color:var(--ink);line-height:1.5;padding-top:2px}
.how3 p{font-size:15.5px;line-height:1.8}
.mini{height:190px;border-radius:16px;background:var(--paper);padding:18px;overflow:hidden;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px}
.m1 .mp{font-size:13px;font-weight:900;color:var(--ink);border:2px solid var(--ink);border-radius:7px;padding:3px 9px 2px;background:var(--white);line-height:1.5}
.m1 .mp.on{background:var(--ink);color:var(--white);box-shadow:0 0 0 4px var(--mark);position:relative}
.m1 .mp.on::before,.m1 .mp.on::after{content:"";position:absolute;top:-8px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.m1 .mp.on::before{left:12px}.m1 .mp.on::after{left:25px}
.m2{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:8px}
.m2 .mt{display:flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--line);border-radius:10px;padding:8px 10px}
.m2 .mt b{font-size:13px;font-weight:900;color:var(--ink);line-height:1.3}
.m2 .mt.on{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.m3{display:grid;align-content:center;justify-content:stretch;gap:7px;padding:16px 22px}
.m3 .mc-h{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:6px}
.m3 .mc-h b{font-size:14px;color:var(--ink)}
.m3 .mc-h i{font-style:normal;font-size:10.5px;font-weight:700;border:1px solid var(--ink);border-radius:999px;padding:0 7px}
.m3 .mc-r{display:flex;align-items:center;gap:8px}
.m3 .mc-r i{flex:1;height:7px;border-radius:4px;background:#E3E1D9}
.m3 .mc-r:nth-child(3) i{flex:.7}.m3 .mc-r:nth-child(4) i{flex:.85}.m3 .mc-r:nth-child(5) i{flex:.6}
.m3 .mc-b{justify-self:start;margin-top:4px;font-size:12px;font-weight:900;color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:4px 12px;background:var(--white);box-shadow:0 0 0 4px var(--mark)}
.nums{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:26px}
.nums>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 12px;align-items:center}
.nums .ico{grid-row:span 2}
.nums dt{font-size:13px;font-weight:900;color:var(--sub);line-height:1.5}
.nums dd{margin:0;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:900;color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums}
.nums dd small{font-size:14px;margin-left:3px}
.sec .links{display:flex;flex-wrap:wrap;gap:4px 24px}
.trust .co dt{display:flex;align-items:center;gap:8px}
.trust .co .vm{background:var(--paper)}
.steps li::before{position:absolute;right:14px;top:14px}
.steps li .ico{width:40px;height:40px;margin-bottom:2px}
.box>.ico{width:48px;height:48px}
@media (max-width:1000px){
  .how3{grid-template-columns:minmax(0,1fr)}
  .how3>li{grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto;align-items:center}
  .how3>li:not(:last-child)::after{right:auto;left:96px;top:auto;bottom:-14px;transform:rotate(135deg)}
  .mini{height:150px;padding:12px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
}
@media (max-width:600px){
  .how3>li{grid-template-columns:minmax(0,1fr);gap:12px}
  .how3>li:not(:last-child)::after{left:50%;bottom:-16px}
  .how3{gap:30px}
  .mini{height:auto;min-height:120px}
  .m2 .mt{padding:6px 8px}
  .nums dd{font-size:1.5rem}
}

/* ===== contact ===== */
.type{grid-template-columns:24px 36px minmax(0,1fr);column-gap:12px}
.type input{grid-row:1/span 2}
.type>.ico{grid-column:2;grid-row:1/span 2;margin-top:2px}
.type b,.type small{grid-column:3}
.pre{margin-top:6px}
.after-t{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.after-t caption{text-align:left;font-size:15px;font-weight:900;color:var(--ink);padding-bottom:10px}
.after-t thead th{font-size:12.5px;font-weight:900;color:var(--sub);text-align:left;padding:0 12px 8px 0;border-bottom:2px solid var(--ink)}
.after-t tbody th,.after-t td{text-align:left;vertical-align:top;padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.after-t tbody th{width:13em;font-weight:900;color:var(--ink);font-size:15px}
.after-t tbody th .ico{display:inline-block;vertical-align:middle;margin-right:8px}
.after-t td b{display:block;color:var(--ink)}
.after-note{gap:12px;align-items:flex-start;background:var(--paper);border-radius:12px;padding:14px 16px;margin:0;font-size:14.5px;line-height:1.7}
.after-note b{display:block;color:var(--ink);font-size:15px}
.flow3{list-style:none;margin:0;padding:0;display:grid;gap:0}
.flow3 li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;position:relative;padding-bottom:14px;font-size:14.5px;line-height:1.65}
.flow3 li:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:2px;width:2px;background:var(--line)}
.flow3 b{display:block;color:var(--ink);font-size:15px}
.safe{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.safe li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:700;color:var(--ink)}
.thx-side{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;background:var(--white);border-radius:18px;padding:22px}
.thx-side .mascot{width:150px;margin:0}
.thx-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.thx-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;position:relative;padding-bottom:14px;font-size:14px;line-height:1.6;color:var(--sub)}
.thx-steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:44px;bottom:2px;width:2px;background:var(--line)}
.thx-steps b{display:block;color:var(--ink);font-size:15.5px}
.thx-steps li:not(.done) .ico{opacity:.55}
@media (max-width:760px){
  .after-t thead{display:none}
  .after-t,.after-t tbody,.after-t tr,.after-t th,.after-t td{display:block;width:auto}
  .after-t tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .after-t tbody th,.after-t td{border:0;padding:0}
  .after-t tbody th{margin-bottom:4px}
  .thx-side{grid-template-columns:minmax(0,1fr);justify-items:start}
  .thx-side .mascot{width:120px}
}
.after-t tbody th{width:15em;word-break:keep-all}

/* ===== lower pages: area, about, studios, guide ===== */
/* area: how to look, three steps */
.guide3{gap:14px}
.g3-h{margin:0;font-size:15px;font-weight:900;color:var(--ink)}
.guide3 .flow3 li{grid-template-columns:40px minmax(0,1fr);gap:14px;padding-bottom:18px;font-size:14.5px;line-height:1.7;color:var(--text)}
.guide3 .flow3 li:not(:last-child)::after{left:19px;top:40px}
.guide3 .flow3 .ico{width:40px;height:40px;background:var(--paper);border-radius:10px;padding:4px}
.guide3 .flow3 b{font-size:16px;margin-bottom:2px}
/* area: five checked companies open a prefecture */
.rule-top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;margin-bottom:clamp(22px,3vw,34px)}
.rule-top>p{font-size:16.5px;line-height:1.9;color:var(--ink);font-weight:700;max-width:34em}
.rule-top>p b{font-size:1.25em;font-variant-numeric:tabular-nums}
.five{display:flex;align-items:center;gap:16px;background:var(--white);border-radius:18px;padding:20px 24px}
.five-c{display:grid;grid-template-columns:repeat(5,44px);gap:6px}
.five-c .f{width:44px;height:44px;border-radius:12px;background:var(--paper);display:grid;place-items:center;position:relative}
.five-c .f.on::after{content:"";position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%230A0607' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px var(--white)}
.five-ar{flex:none;width:34px;height:2px;background:var(--ink);position:relative}
.five-ar::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.five-p{pointer-events:none;flex:none;min-height:48px;font-size:16px}
.five-p .bt i::before{transform:none}
.five-p small{color:var(--green-ink);font-weight:900}
/* promises with a picture on top */
.promise.ip li{border-top:0;padding:22px 22px 24px;background:var(--white);border-radius:16px;gap:10px}
.blk:not(.paper) .promise.ip li{background:var(--paper)}
.promise.ip .ico{width:48px;height:48px}
/* about: who talks to whom */
.rel3{margin:clamp(26px,3.4vw,40px) 0 0;background:var(--paper);border-radius:20px;padding:clamp(20px,3vw,36px);display:grid;gap:0;justify-items:stretch}
.blk.paper .rel3{background:var(--white)}
.rel3 .node{display:grid;justify-items:center;text-align:center;gap:4px;background:var(--white);border:2px solid var(--ink);border-radius:16px;padding:16px 14px;min-width:0}
.blk.paper .rel3 .node{background:var(--paper);border-color:transparent}
.rel3 .node b{font-size:16.5px;color:var(--ink);line-height:1.5}
.rel3 .node span{font-size:13.5px;color:var(--sub);line-height:1.6}
.rel3 .node.ed{border-color:var(--ink);background:var(--white)}
.r-top{display:grid;justify-items:center}
.r-top .node{width:min(100%,320px)}
.r-arrows{height:72px;position:relative;width:100%}
.r-arrows svg{position:absolute;inset:4px 0;width:100%;height:calc(100% - 8px);overflow:visible}
.r-arrows path{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.r-arrows .r-sp{display:none}
.r-arrows span{position:absolute;top:50%;transform:translateY(-50%);font-size:13px;font-weight:900;color:var(--ink);background:var(--paper);padding:2px 8px;border-radius:999px;line-height:1.5}
.blk.paper .r-arrows span{background:var(--white)}
.r-arrows .a-l{left:28%;transform:translate(-50%,-50%)}
.r-arrows .a-r{right:28%;transform:translate(50%,-50%)}
.r-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:0}
.r-mid{display:grid;justify-items:center;text-align:center;gap:2px;padding:0 6px;position:relative}
.r-line{width:100%;height:2px;background:var(--ink);position:relative;margin-bottom:8px}
.r-line::before,.r-line::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-top:2px solid var(--ink)}
.r-line::before{left:0;border-left:2px solid var(--ink);transform:rotate(-45deg)}
.r-line::after{right:0;border-right:2px solid var(--ink);transform:rotate(45deg)}
.r-mid b{font-size:15px;color:var(--ink)}
.r-mid span{font-size:12.5px;color:var(--sub)}
.rel3 figcaption{margin-top:22px;display:flex;align-items:center;gap:10px;justify-content:center;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.7;text-align:left}
.six-i b{display:flex;align-items:center;gap:8px}
.six-i b .ico{flex:none}
/* studios: two ways to be listed */
.cmp2{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border-radius:16px;overflow:hidden;font-size:15px;line-height:1.7;margin-bottom:clamp(28px,3.6vw,44px)}
.cmp2 caption{text-align:left;font-size:15px;font-weight:900;color:var(--ink);padding-bottom:12px}
.cmp2 thead th{padding:18px 18px 14px;text-align:left;vertical-align:bottom;font-size:16px;font-weight:900;color:var(--ink);border-bottom:2px solid var(--ink)}
.cmp2 thead th .ico{display:block;margin-bottom:6px}
.cmp2 thead th:first-child{width:9em}
.cmp2 thead th:last-child{background:var(--mark)}
.cmp2 tbody th{text-align:left;vertical-align:top;padding:13px 18px;font-size:13.5px;font-weight:900;color:var(--sub);border-bottom:1px solid var(--line)}
.cmp2 td{vertical-align:top;padding:13px 18px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.cmp2 td:last-child{background:#F4FAF6}
.cmp2 tbody tr:last-child>*{border-bottom:0}
.cmp2 .tag{vertical-align:middle}
.ask6 li>.ico,.cost li>.ico{width:40px;height:40px}
/* guide: when the money is paid */
.when-w{margin-top:clamp(26px,3.4vw,40px);background:var(--white);border-radius:16px;padding:clamp(18px,2.6vw,28px);display:grid;gap:14px}
.when-h{margin:0;display:flex;align-items:center;gap:10px;font-size:clamp(1.05rem,1.4vw,1.15rem);color:var(--ink)}
.when{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.when thead th{font-size:12.5px;font-weight:900;color:var(--sub);padding:0 8px 10px;border-bottom:2px solid var(--ink);text-align:center}
.when thead th:first-child{text-align:left;padding-left:0}
.when tbody th{text-align:left;font-weight:900;color:var(--ink);padding:12px 8px 12px 0;border-bottom:1px solid var(--line)}
.when td{text-align:center;padding:12px 8px;border-bottom:1px solid var(--line)}
.when tbody tr:last-child>*{border-bottom:0}
.mk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:transparent;font-size:0;vertical-align:middle}
.mk.sub{background:transparent;border:2px solid var(--ink)}
.mk-t{display:block;font-size:12px;font-weight:700;color:var(--sub);line-height:1.4;margin-top:3px}
/* guide: the little memo beside the heading */
.memo-ill{background:var(--white);border-radius:8px;box-shadow:0 12px 0 -5px #E9E6DE,0 12px 0 -4px var(--line);border:1px solid var(--line);padding:22px 24px 20px;display:grid;gap:10px;max-width:340px;justify-self:end;width:100%;transform:rotate(-1.5deg)}
.memo-ill b{font-size:15px;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:2px}
.memo-ill span{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;border-bottom:1px dashed var(--line);padding-bottom:9px}
.memo-ill span:last-child{border-bottom:0;padding-bottom:0}
.memo-ill i{width:18px;height:18px;border:2px solid var(--ink);border-radius:4px;position:relative}
.memo-ill i.on{background:var(--ink)}
.memo-ill i.on::after{content:"";position:absolute;left:4px;top:0;width:5px;height:9px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg)}
@media (max-width:1000px){
  .rule-top{grid-template-columns:minmax(0,1fr)}
  .five{justify-self:start}
  .memo-ill{justify-self:start;transform:none}
}
@media (max-width:760px){
  .r-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .r-row>.node:last-child{grid-row:1;grid-column:2}
  .r-mid{grid-column:1/-1;grid-row:2;padding:0}
  .r-line{width:50%;height:16px;margin:0 0 8px;background:none;border:2px solid var(--ink);border-top:0;border-radius:0 0 8px 8px}
  .r-line::before,.r-line::after{display:none}
  .rel3 .node{padding:14px 10px}
  .rel3 .node b{font-size:15px}
  .rel3 .node span{font-size:12.5px}
  .r-arrows{height:56px}
  .r-arrows .r-pc{display:none}
  .r-arrows .r-sp{display:block}
  .r-arrows .a-l{left:30%}
  .r-arrows .a-r{right:30%}
  .rel3 figcaption{justify-content:flex-start;align-items:flex-start}
  .cmp2 thead th:first-child{width:5.6em}
  .cmp2 thead th,.cmp2 tbody th,.cmp2 td{padding-left:12px;padding-right:12px}
  .cmp2{font-size:14px}
  .when-w{padding:16px 14px}
  .when thead th{padding:0 2px 8px;font-size:11.5px}
  .when tbody th{font-size:13.5px;padding-right:6px}
  .when td{padding:12px 2px}
  .mk-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:600px){
  .five{flex-direction:column;align-items:flex-start;padding:16px 18px;gap:10px;justify-self:stretch}
  .five-ar{width:2px;height:22px;margin-left:19px}
  .five-ar::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
  .promise.ip li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px}
  .promise.ip .ico{width:40px;height:40px;grid-row:span 2}
  .five-c{grid-template-columns:repeat(5,minmax(0,40px));gap:5px}
  .five-c .f{width:40px;height:40px}
  .five-c .f .ico{width:28px;height:28px}
  .rule-top>p{font-size:15.5px}
  .cmp2 tbody th{font-size:12.5px}
}

/* a left-to-right process with pictures */
.route5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);position:relative}
.route5>li{display:grid;gap:8px;align-content:start;position:relative}
.route5>li:not(:last-child)::after{content:"";position:absolute;top:39px;left:92px;right:calc(-1*clamp(12px,1.6vw,20px));height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 11px)}
.r5-i{position:relative;width:80px;height:80px;border-radius:50%;background:var(--white);display:grid;place-items:center;margin-bottom:6px}
.blk:not(.paper) .r5-i{background:var(--paper)}
.r5-i .no{position:absolute;left:-2px;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--white);font-size:13.5px;font-weight:900;display:grid;place-items:center;line-height:1;font-variant-numeric:tabular-nums}
.route5 b{font-size:1.06rem;font-weight:900;color:var(--ink);line-height:1.55}
.route5 p{font-size:15px;line-height:1.8}
.route5 .opt{justify-self:start;font-size:12px;font-weight:700;color:var(--green-ink);border:1px solid currentColor;border-radius:999px;padding:0 9px;line-height:1.8}
.co dt{display:flex;align-items:center;gap:8px}
.co dt .ico{flex:none}
@media (max-width:1000px){
  .route5{grid-template-columns:minmax(0,1fr);gap:0}
  .route5>li{grid-template-columns:64px minmax(0,1fr);column-gap:16px;padding-bottom:22px}
  .route5>li>:not(.r5-i){grid-column:2}
  .r5-i{grid-row:1/span 3;width:64px;height:64px;margin:0}
  .r5-i .ico{width:36px;height:36px}
  .r5-i .no{width:24px;height:24px;font-size:12px}
  .route5>li:not(:last-child)::after{top:68px;bottom:4px;left:31px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--ink) 0 6px,transparent 6px 11px)}
  .route5 b{padding-top:6px}
}
/* cards with a picture (generic) */
.icards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.icards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.icards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.icards li{background:var(--white);border-radius:16px;padding:20px 22px 22px;display:grid;gap:8px;align-content:start}
.blk:not(.paper) .icards li{background:var(--paper)}
.icards b{font-size:1.06rem;font-weight:900;color:var(--ink);line-height:1.55}
.icards p{font-size:15px;line-height:1.8}
.icards .ico{width:40px;height:40px}
.sub-h{margin:0 0 14px;font-size:clamp(1.05rem,1.4vw,1.15rem);color:var(--ink)}
.ask6{grid-template-columns:repeat(3,minmax(0,1fr))}
/* studios: how a company is found on the prefecture page */
.found{margin:0;position:relative;display:grid;justify-items:center;gap:12px}
.fd-ph{width:250px;border:7px solid var(--ink);border-radius:30px;background:var(--white);padding:18px 14px 20px;display:grid;gap:8px;box-shadow:0 18px 0 -8px rgba(10,6,7,.08)}
.fd-h{font-size:12.5px;color:var(--ink);line-height:1.5;text-align:center;padding-bottom:4px}
.fd-tab{justify-self:start;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:900;color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;padding:3px 8px 2px}
.fd-c{display:grid;gap:6px;border:1.5px solid var(--line);border-radius:10px;padding:10px}
.fd-c>i{display:block;height:6px;border-radius:3px;background:#E9E6DE}
.fd-c>i:last-child{width:62%}
.fd-c.on{border:2px solid var(--ink);box-shadow:0 0 0 5px var(--mark);gap:5px}
.fd-n{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1.5px solid var(--ink);padding-bottom:5px}
.fd-n b{font-size:12.5px;color:var(--ink)}
.fd-n em{font-style:normal;font-size:9.5px;font-weight:900;background:var(--green);color:var(--ink);border-radius:999px;padding:1px 6px}
.fd-r{display:flex;align-items:center;gap:6px}
.fd-r i{flex:1;height:6px;border-radius:3px;background:#E9E6DE}
.fd-r:nth-child(3) i{flex:.75}.fd-r:nth-child(4) i{flex:.55}
.fd-go{justify-self:start;margin-top:3px;font-size:10.5px;font-weight:900;color:var(--ink);border:1.5px solid var(--ink);border-radius:7px;padding:3px 9px 2px}
.fd-lens{position:absolute;right:calc(50% - 175px);top:150px;width:76px;height:76px;border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:0 6px 0 rgba(10,6,7,.08)}
.found figcaption{font-size:13px;color:var(--sub)}
@media (max-width:1000px){
  .icards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ask6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .found{justify-items:start}
  .fd-lens{right:auto;left:205px}
}
@media (max-width:600px){
  .icards.c4,.icards.c2,.ask6{grid-template-columns:minmax(0,1fr)}
  .icards li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px}
  .icards li .ico{grid-row:span 2}
  .ask6 li{grid-template-columns:40px minmax(0,1fr);column-gap:14px}
  .ask6 li .ico{grid-row:span 2}
  .fd-ph{width:220px}
  .fd-lens{left:180px;width:64px;height:64px;top:130px}
  .fd-lens .ico{width:52px;height:52px}
}
.rd3{margin-top:10px;background:var(--paper);border-radius:16px;padding:20px 22px;display:grid;gap:14px}
.rd3>b{font-size:15px;color:var(--ink)}
.rd3 .flow3 .ico{background:var(--white);border-radius:8px;padding:3px}
.ask6 li{align-content:start}
.route5.r7{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.route5.r7>li:not(:last-child)::after{top:31px;left:74px;right:-14px}
.route5.r7 .r5-i{width:64px;height:64px}
.route5.r7 .r5-i .ico{width:36px;height:36px}
.route5.r7 .r5-i .no{width:24px;height:24px;font-size:12px}
.route5.r7 b{font-size:15px}
.route5.r7 p{font-size:14px;line-height:1.75}
.blk>.in>.route5+.fine{margin-top:18px}
@media (max-width:1000px){
  .route5.r7{grid-template-columns:minmax(0,1fr);gap:0}
  .route5.r7>li:not(:last-child)::after{top:68px;left:31px;right:auto}
  .route5.r7 b{font-size:1.02rem}
  .route5.r7 p{font-size:15px}
}
@media (max-width:600px){
  .cmp2 thead tr,.cmp2 tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp2 thead th:first-child{display:none}
  .cmp2 thead th{font-size:14.5px;padding:14px 12px 10px}
  .cmp2 tbody th{grid-column:1/-1;padding:12px 12px 2px;border-bottom:0;background:var(--white)}
  .cmp2 td{padding:4px 12px 12px;font-size:14px}
  .cmp2 tbody tr:last-child td{border-bottom:0}
  .found .fd-ph{width:210px}
  .badge-w .bd img{width:120px;height:120px}
}
.cost .ask{display:grid;gap:2px;background:var(--paper);border-radius:10px;padding:10px 14px;margin-top:4px;line-height:1.65}
.cost .ask::before{content:"聞くこと";display:block}
.blk:not(.paper) .cost .ask{background:var(--white)}
.when{table-layout:fixed}
.when thead th:first-child{width:34%}
.when tbody th small{display:block;font-size:12.5px;font-weight:700;color:var(--sub)}
.when th{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:600px){
  .when thead th:first-child{width:41%}
  .when tbody th{font-size:13.5px;line-height:1.5}
  .when tbody th small{font-size:11px;letter-spacing:0}
  .cost li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px}
  .cost li>.ico{grid-row:span 2}
  .cost li>.ask{grid-column:1/-1}
}
.when thead th{overflow-wrap:normal}

/* ===== editorial policy ===== */
.funnel{margin:0;background:var(--white);border-radius:18px;padding:22px 22px 24px;display:grid;gap:12px}
.funnel figcaption{font-size:13px;font-weight:900;color:var(--sub)}
.funnel ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;justify-items:center}
.funnel li{width:var(--w);display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:10px;padding:9px 14px;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;position:relative}
.funnel li:last-child{background:var(--ink);color:var(--white)}
.funnel li:last-child .ico{background:var(--white);border-radius:6px}
.funnel li+li::before{content:"";position:absolute;left:50%;top:-6px;width:8px;height:8px;margin-left:-4px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);display:none}
.dtab{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.dtab thead th{font-size:12.5px;font-weight:900;color:var(--sub);text-align:left;padding:0 12px 8px 0;border-bottom:2px solid var(--ink)}
.dtab tbody th,.dtab td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.dtab tbody th{width:8.5em;font-weight:900}
.dtab td{color:var(--ink)}
.nolist{list-style:none!important;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
.nolist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;background:var(--paper);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.65}
.nolist b{display:block;color:var(--ink);font-size:15.5px}
.nolist .x{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);position:relative;margin-top:2px}
.nolist .x::before,.nolist .x::after{content:"";position:absolute;left:4px;right:4px;top:8px;height:2px;background:var(--ink);transform:rotate(45deg)}
.nolist .x::after{transform:rotate(-45deg)}
.six-l{list-style:none!important;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;counter-reset:s}
.six-l li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.65;counter-increment:s}
.six-l b{display:block;color:var(--ink);font-size:15.5px}
.six-l b::before{content:counter(s) ". ";color:var(--sub);font-variant-numeric:tabular-nums}
.zero4{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.zero4>div{background:var(--paper);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.zero4 dt{font-size:13px;font-weight:900;color:var(--sub)}
.zero4 dd{margin:0;font-size:1.5rem;font-weight:900;color:var(--ink);line-height:1.3}
.rc3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0;align-items:center}
.rc-a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;background:var(--ink);color:var(--white);border-radius:14px;padding:16px 18px;font-size:14px;line-height:1.6;position:relative}
.rc-a .ico{background:var(--white);border-radius:8px;padding:3px}
.rc-a b{display:block;font-size:15.5px;color:var(--white)}
.rc3 ul{list-style:none!important;margin:0;padding:0 0 0 28px!important;display:grid;gap:8px!important;position:relative}
.rc3 ul::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:14px;border:2px solid var(--ink);border-right:0;border-radius:8px 0 0 8px}
.rc3 ul::after{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--ink)}
.rc3 li{background:var(--paper);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.55;position:relative}
.rc3 li::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--ink)}
.rc3 li b{display:block;color:var(--ink);font-size:15px}
.rc3 li:first-child::before,.rc3 li:last-child::before{display:none}
@media (max-width:760px){
  .nolist,.six-l{grid-template-columns:minmax(0,1fr)}
  .zero4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc3{grid-template-columns:minmax(0,1fr);gap:16px}
  .rc3 ul{padding-left:24px!important}
  .rc3 ul::before{top:-16px;bottom:22px;left:10px;width:12px;border-radius:0 0 0 8px;border-top:0}
  .rc3 ul::after{display:none}
  .rc3 li::before{display:block;left:-14px;width:14px}
  .rc3 li:last-child::before{display:none}
  .dtab tbody th{width:7.5em}
}
.art .body .log{padding-left:0;gap:0;margin:0}
.log .tx a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.log .tx a:hover{color:var(--green-ink)}
@media (max-width:600px){
  .dtab thead{display:none}
  .dtab,.dtab tbody,.dtab tr,.dtab th,.dtab td{display:block;width:auto}
  .dtab tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .dtab tbody th,.dtab td{border:0;padding:2px 0}
  .dtab tbody th{width:auto;margin-bottom:6px}
  .dtab td{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:8px}
  .dtab td::before{content:attr(data-th);font-size:12.5px;font-weight:900;color:var(--sub)}
}

/* ===== company ===== */
.org4{margin:0;background:var(--white);border-radius:18px;padding:22px;display:grid;gap:12px}
.org4 figcaption{font-size:13px;font-weight:900;color:var(--sub)}
.o-top{display:flex;align-items:center;gap:10px;justify-self:center;border:2px solid var(--ink);border-radius:12px;padding:10px 16px;font-size:15.5px;color:var(--ink);position:relative}
.o-top::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:14px;background:var(--ink)}
.org4 ul{list-style:none;margin:12px 0 0;padding:14px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:relative}
.org4 ul::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:14px;border:2px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0}
.org4 ul::after{content:"";position:absolute;top:0;left:37.5%;right:37.5%;height:14px;border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.org4 li{display:grid;gap:2px;justify-items:center;text-align:center;background:var(--paper);border-radius:10px;padding:10px 4px;min-width:0}
.org4 li b{font-size:14px;color:var(--ink)}
.org4 li span{font-size:11.5px;color:var(--sub);line-height:1.5}
.org4 li.on{background:var(--ink)}
.org4 li.on b,.org4 li.on span{color:var(--white)}
.org4 p{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.6}
@media (max-width:600px){
  .org4 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org4 ul::before{left:25%;right:25%}
  .org4 ul::after{display:none}
}

/* ===== privacy / usage ===== */
.psum{background:var(--white);border-radius:18px;padding:22px;display:grid;gap:12px}
.psum>b{font-size:13px;font-weight:900;color:var(--sub)}
.psum ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.psum li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.6;background:var(--paper);border-radius:10px;padding:10px 12px}
.dtab.keep tbody th{width:12em}
.okng{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.okng>div{border-radius:14px;padding:16px 18px;display:grid;gap:8px;align-content:start}
.okng .ok{background:var(--mark)}
.okng .ng{background:var(--paper)}
.okng b{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15.5px}
.okng ul{margin:0;padding-left:1.2em!important;font-size:14.5px;line-height:1.7;gap:4px!important}
.okng .x{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);position:relative;flex:none}
.okng .x::before,.okng .x::after{content:"";position:absolute;left:4px;right:4px;top:8px;height:2px;background:var(--ink);transform:rotate(45deg)}
.okng .x::after{transform:rotate(-45deg)}
@media (max-width:760px){.okng{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.dtab.keep td{grid-template-columns:4.5em minmax(0,1fr)}}

/* ===== sitemap / 404 ===== */
.tree4{margin:0;background:var(--white);border-radius:18px;padding:22px;display:grid;gap:12px}
.tree4 figcaption{font-size:13px;font-weight:900;color:var(--sub)}
.tree4 ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tree4 li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;position:relative;padding-bottom:14px}
.tree4 li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--ink)}

.tree4 li .ico{width:40px;height:40px;background:var(--paper);border-radius:10px;padding:5px}
.tree4 li b{display:block;font-size:15.5px;color:var(--ink)}
.tree4 li span{font-size:13px;color:var(--sub);line-height:1.6}
.smap h2{display:flex;align-items:center;gap:8px}
.nf-side{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:end}
.nf-bam{width:150px;margin:0}
.nf-card{background:var(--white);border-radius:16px;padding:18px;display:grid;gap:6px;justify-items:start;font-size:14px;line-height:1.65;margin-bottom:24px}
.nf-card b{font-size:15.5px;color:var(--ink)}
.nf-p{min-height:36px;font-size:14px;margin-bottom:4px}
.nf-p .nm{text-decoration:line-through;text-decoration-thickness:1.5px}
@media (max-width:600px){
  .nf-side{grid-template-columns:110px minmax(0,1fr);gap:12px}
  .nf-bam{width:110px}
  .nf-card{margin-bottom:10px;padding:14px}
}
/* every stand-alone link at least 44px tall */
.vt-names a{min-height:44px}
.art-hero .who .plate{min-height:44px}
.chk-l{min-height:44px}
.facts .chk-l{min-height:44px}
.vt tbody th small{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:600px){.funnel li{width:calc(var(--w) * .4 + 60%)}}
@media (max-width:360px){
  .when thead th:first-child{width:45%}
  .when thead th{font-size:11px;padding:0 1px 8px}
  .when tbody th{font-size:12.5px;letter-spacing:0}
  .when tbody th small{font-size:10.5px}
  .when td{padding:12px 1px}
}
/* short labels: break only between words (wbr), never inside a katakana word */
.kp,.mt b,.node span,.r-mid span{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:360px){.pp-grid .pp{grid-template-columns:96px minmax(0,1fr);column-gap:12px}}
/* top: 載るまで on phones — icon left, text right, number top-right */
@media (max-width:520px){
  .steps li{grid-template-columns:40px minmax(0,1fr);gap:2px 14px;padding:16px 46px 16px 16px}
  .steps li .ico{grid-row:1/span 3;margin:0}
  .steps li>b,.steps li>span{grid-column:2}
  .steps li::before{grid-row:auto}
}
/* top: numbers on phones — icon above the label so labels stay on one line */
@media (max-width:420px){
  .nums>div{grid-template-columns:minmax(0,1fr);align-items:start}
  .nums .ico{grid-row:auto;width:32px;height:32px;margin-bottom:6px}
}
@media (min-width:521px) and (max-width:1000px){
  .how3>li{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .how3>li:not(:last-child)::after{left:126px}
}
/* the company-card figure needs a little more height than the other two; no clipping */
@media (min-width:1001px){.mini{height:200px}.how3>li:not(:last-child)::after{top:93px}}
@media (min-width:521px) and (max-width:1000px){.mini{height:196px}}
@media (min-width:901px){.quick tbody th a{white-space:nowrap}}
@media (min-width:521px){.vt-names a{white-space:nowrap}}
.thx-steps b,.thx-steps span>span{word-break:keep-all;overflow-wrap:anywhere}
/* hero side figures in the narrow side column (901–1279px) */
@media (min-width:901px) and (max-width:1279px){
  .thx-side{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px}
  .thx-side .mascot{width:96px}
}
.org4{container-type:inline-size}
@container (max-width:460px){
  .org4 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org4 ul::before{left:25%;right:25%}
  .org4 ul::after{display:none}
}
@media (max-width:360px){.pm{grid-template-columns:64px minmax(0,1fr);gap:12px}.pm img{width:64px;height:80px}}
.quick td[data-th="打ち合わせ"]{word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:901px){.quick td[data-th="打ち合わせ"]{min-width:8.6em}}
/* ===================== Version 7: painted streets, Bäm's rig, reveal ===================== */
/* the street band: 350u tall, pavement = bottom 34u; 1u = 1px at a 350px band */
.tb{--bh:clamp(172px,20vw,290px);--u:calc(var(--bh) / 350);position:relative;height:var(--bh);line-height:0}
.tb-view{position:absolute;inset:0;overflow:hidden}
.tb-sky,.tb-far,.tb-town,.tb-ppl{position:absolute;left:0;top:0;bottom:0;width:1px;will-change:transform}
.tb-gr{position:absolute;left:calc(var(--u) * -3000);width:calc(var(--u) * 30000);bottom:0;height:calc(var(--u) * 34);
  background:linear-gradient(#C9BBA3,#C9BBA3) 0 0/100% calc(var(--u) * 3) no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0)) 0 calc(var(--u) * 3)/100% calc(var(--u) * 6) no-repeat,
  repeating-linear-gradient(90deg,rgba(110,92,64,.13) 0 calc(var(--u) * 1.6),transparent calc(var(--u) * 1.6) calc(var(--u) * 64)),#DCD2C1}
.tb-r{position:absolute;bottom:calc(var(--u) * 33);left:calc(var(--u) * var(--x));width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h))}
.tb-img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.tb-dots{position:absolute;left:calc(var(--u) * (var(--dx) - 14));top:calc(var(--u) * (var(--dy) - 10));width:calc(var(--u) * 28);height:calc(var(--u) * 10);display:flex;justify-content:space-between;pointer-events:none}
.tb-dots b{width:calc(var(--u) * 10);height:calc(var(--u) * 10);border-radius:50%;background:var(--green,#1EB05D);opacity:0;transform:translate3d(0,calc(var(--u) * -18),0) scale(.5);
  transition:transform .26s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1)}
.tb-r.on .tb-dots b{opacity:1;transform:none;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .2s cubic-bezier(.2,0,0,1)}
.tb-r.on .tb-dots b+b{transition-delay:.08s}
.tb-tag{position:absolute;left:calc(var(--u) * 12);bottom:calc(var(--u) * -27);font-size:clamp(10px,calc(var(--u) * 12.5),12.5px);line-height:1;font-weight:700;letter-spacing:.08em;color:#7D705D;white-space:nowrap;transition:color .3s}
.tb-r.on .tb-tag{color:var(--deep,#127A3E)}
.tb-w{position:absolute;top:0;left:calc(var(--u) * var(--sx));width:calc(var(--u) * var(--sw));height:100%;overflow:visible;pointer-events:none}
.tb-w path{fill:none;stroke:#5E554B;stroke-width:1.15;stroke-linecap:round;opacity:.62}
.tb-f{position:absolute;left:0;bottom:calc(var(--u) * 30);width:calc(var(--u) * var(--fw));height:calc(var(--u) * 150)}
.tb-fimg{display:block;width:100%;height:100%;opacity:.92}
.tb-c{position:absolute;left:0;top:0;width:calc(var(--u) * var(--cw));height:auto;opacity:.95;filter:drop-shadow(0 calc(var(--u) * 2) 0 rgba(150,135,110,.10))}
.tb-p{position:absolute;left:0;bottom:calc(var(--u) * var(--b,20));height:calc(var(--u) * 52);width:auto;transform-origin:50% 100%}
.tb-p.back{height:calc(var(--u) * 46)}
.tb-bam{position:absolute;z-index:2;left:0;bottom:calc(var(--u) * 10);width:calc(var(--u) * 92);height:calc(var(--u) * 92);line-height:0}
.tb-bam svg{width:100%;height:100%;overflow:visible}
/* the street enters once: buildings rise from the pavement, then the windows light */
.tb.pre .tb-r{transform:translate3d(0,calc(var(--u) * 26),0);opacity:0}
.tb.pre .tb-f{opacity:0}
.tb.go .tb-r{transition:transform .9s cubic-bezier(.05,.7,.1,1) var(--rd,0s),opacity .5s cubic-bezier(.2,0,0,1) var(--rd,0s)}
.tb.go .tb-f{transition:opacity 1.2s cubic-bezier(.2,0,0,1) .25s}
/* pref heading: the band sits under the heading, full width */
.phero .tb,.fv .tb{margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}

/* Bäm's rig: the kit's parts are moved by script (rotation only; eyes blink) */
.bamr .b-root,.bamr .b-up,.bamr .b-al,.bamr .b-ar,.bamr .b-cap,.bamr .b-dl,.bamr .b-dr,.bamr .b-face,.bamr .b-eye,.bamr .b-fl,.bamr .b-fr{transform-box:view-box}
.mascot{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* reveal: a heading or figure rises once into place as it comes into view (never body text you are reading) */
.rv{opacity:0;transform:translate3d(0,18px,0)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,0,0,1) var(--rd,0s),transform .72s cubic-bezier(.05,.7,.1,1) var(--rd,0s)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* top: the streets open the first screen; the heading and the prefectures follow */
.fv>.tb{margin-top:clamp(4px,1vw,14px)}
.fv>.tb+.in{padding-top:clamp(26px,3.4vw,48px)}
.nf-side{grid-template-columns:minmax(0,1fr)}

/* Version 8: phrase breaks written by the build (wbr.py) so iPhone breaks headings between phrases too */
.bx{word-break:keep-all!important;overflow-wrap:break-word}
/* Version 8: the prefecture page lists its おすすめ○選 articles (like a tag page of the column), then its interviews */
.acs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ac>a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:6px 18px;height:100%;padding:20px 22px;border:2px solid var(--ink);border-radius:16px;background:var(--white);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.ac>a:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.ac>a{transition:none}.ac>a:hover{transform:none}}
.ac .ico{width:64px;height:64px;align-self:start}
.ac-b{display:grid;gap:4px;min-width:0}
.ac-k{justify-self:start;font-size:13px;font-weight:700;line-height:1.5;color:var(--green-ink);background:var(--mark);border-radius:999px;padding:2px 10px}
.ac b{font-size:19px;font-weight:900;line-height:1.5}
.ac small{display:flex;flex-wrap:wrap;gap:0 14px;font-size:13.5px;font-weight:700;color:var(--sub);line-height:1.6}
.ac-n{font-size:13.5px;color:var(--sub);line-height:1.6}
.ac .ar{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex:none;margin-right:4px}
/* 総合 comes first and spans the row */
.ac:first-child{grid-column:1/-1}
.ac:first-child>a{background:var(--paper);padding:24px 28px}
.ac:first-child b{font-size:22px}
.ac:first-child .ac-k{background:var(--ink);color:var(--white)}
/* not public yet: fewer than 3 companies take this kind of work */
.soon-box{margin-top:18px;padding:18px 22px;border:2px dashed var(--faint);border-radius:16px}
.soon-box h3{font-size:16px}
.soon-box p{font-size:14px;color:var(--sub);line-height:1.7;margin-top:2px}
.soon-box ul{list-style:none;margin:10px 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:4px 24px}
.soon-box li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:10px;align-items:center;padding:6px 0}
.soon-box li .ico{grid-row:span 2;opacity:.6}
.soon-box li b{font-size:15px;font-weight:900;color:var(--text);line-height:1.5}
.soon-box li small{font-size:13px;font-weight:700;color:var(--sub);line-height:1.5}
.soon-box .tx-link{font-size:14.5px;display:inline-flex;align-items:center;min-height:44px;padding-block:0}
@media (max-width:760px){
  .acs{grid-template-columns:minmax(0,1fr);gap:10px}
  .ac>a{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;padding:16px}
  .ac .ico{width:44px;height:44px}
  .ac b{font-size:17px}
  .ac:first-child>a{padding:18px 16px}
  .ac:first-child b{font-size:19px}
  .soon-box{padding:16px}
}
/* a kind-of-work article: a company whose usual work is something else, and that also takes this */
.cc .also{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--mark);color:var(--green-ink);font-size:14.5px;font-weight:700;line-height:1.7}
.cc .also .ico{flex:none;width:22px;height:22px;margin-top:2px}
.quick small.also{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--green-ink)}
.purp-go{margin-top:18px;text-align:right}
@media (max-width:760px){.purp-go{text-align:left}}
.notyet .hx>.plate{justify-self:start;width:auto}
/* sitemap: each prefecture with its articles under it */
.smap ul.arts{list-style:none;margin:0 0 8px;padding:0 0 0 14px;border-left:2px solid var(--line)}
.smap ul.arts a{font-size:13.5px;font-weight:500;color:var(--sub)}
/* おすすめの記事: every article by region, narrowed by what you want built */
.kf-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:22px}
.kfilter{display:flex;flex-wrap:wrap;gap:8px}
.kfilter button{min-height:44px;padding:6px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--white);font-size:15px;font-weight:700;line-height:1.4}
.kfilter button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
#colN{font-size:14px;font-weight:700;color:var(--sub)}
.cl{display:grid;gap:30px}
.cl-r h2{font-size:20px;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.cl-p{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.cl-p>.plate{align-self:start;justify-self:start}
.cl-p ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cl-p li a{display:grid;grid-template-columns:9em minmax(0,1fr) auto auto;align-items:center;gap:4px 12px;min-height:44px;padding:6px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
.cl-p li a:hover{background:var(--paper)}
.cl-p li b{font-size:16px;font-weight:900;line-height:1.5}
.cl-p li .ac-k{justify-self:start}
.cl-p li[data-k="all"] .ac-k{background:var(--ink);color:var(--white)}
.cl+.fine{margin-top:24px}
.cl-p li .ac-d{font-size:13px;color:var(--sub);white-space:nowrap}
@media (max-width:760px){
  .cl-p{grid-template-columns:minmax(0,1fr);gap:8px}
  .cl-p li a{grid-template-columns:minmax(0,1fr) auto;padding:8px 4px;gap:2px 10px}
  .cl-p li .ac-k{grid-column:1;justify-self:start;min-width:0}
  .cl-p li b{grid-column:1;font-size:15.5px}
  .cl-p li .ac-d{grid-column:1}
  .cl-p li .ar{grid-column:2;grid-row:1/span 3}
}
/* 地域から探す: on a phone the prefectures come right after the heading, and the three steps follow them */
.guide3.sp-after{display:none}
@media (max-width:760px){
  .phero .hs .guide3{display:none}
  .guide3.sp-after{display:grid;margin-top:28px}
}
/* contact: the caption of a table drawn as blocks on a phone keeps the full width (it shrank to one phrase per line) */
@media (max-width:760px){.after-t caption{display:block}}
/* company: lists inside the table; the ／ stays at the end of an item, never at the start of a line */
.dd-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.dd-l li{word-break:keep-all}
.dd-l li:not(:last-child)::after{content:"／";margin-right:.15em}
/* Version 9: page-by-page finish */
.cc .fix a,.fine a.tx-link{white-space:nowrap}
@media (max-width:520px){.near-prefs .plate.off{display:inline-flex}}
/* a chip is one phrase: no flex gap between its words (the dot keeps its own space) */
.chips>span{display:inline-block;padding-top:9px;padding-bottom:8px;min-height:40px}
.chips>span::before{display:inline-block;margin-right:8px;vertical-align:middle;position:relative;top:-2px}
/* Version 12 (設計図 2026-10-26): 地域から探す (list + company pages), おすすめから探す, the side column and 「運営しているBämのご案内」 */

/* the article and the side column: side by side on wide screens, the side under the article below 1100px */
.wside>.in{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:clamp(32px,3.6vw,52px);align-items:start}
.ws-main{min-width:0}
.ws-main>.band{padding-left:0;padding-right:0}
.ws-main>.band>.in{width:100%}
.ws-main>.blk.paper{background:none}
.ws-main>.blk.paper>.in{background:var(--paper);border-radius:20px;padding-inline:clamp(18px,2.6vw,36px);margin-block:12px}
.ws-main>.blk.line:first-child>.in{border-top:0}
.wside .side{position:sticky;top:calc(var(--hd) + 20px);display:grid;gap:18px;padding-block:clamp(48px,6vw,88px) 32px}
.sd-h{margin:0 0 6px;font-size:12.5px;font-weight:900;letter-spacing:.06em;color:var(--sub)}
.sd-nav{display:grid;gap:4px}
.sd-nav ul{list-style:none;margin:0 0 14px;padding:0;border-top:2px solid var(--ink)}
.sd-nav li a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:9px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.sd-nav li a>span{display:grid;line-height:1.5}
.sd-nav li b{font-size:15px;font-weight:900}
.sd-nav li small{font-size:12.5px;color:var(--sub);font-weight:700}
.sd-nav li a:hover b{color:var(--green-ink);text-decoration:underline;text-underline-offset:4px}
.sd-nav li a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--green);padding-left:12px}
.sd-nav .ar{width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex:none}
.sd-bam{display:grid;gap:6px;border-top:2px solid var(--ink);padding-top:12px}
.sd-bam-a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;color:var(--ink);text-decoration:none;padding:4px 0}
.sd-bam-art{width:56px;height:56px;background:var(--paper);border-radius:12px;display:grid;place-items:center}
.sd-bam-art .bamg{width:44px;height:44px}
.sd-bam-a b{display:block;font-size:15px;font-weight:900;line-height:1.5}
.sd-bam-a small{display:block;font-size:13px;color:var(--sub);font-weight:700;line-height:1.6;margin-top:2px}
.sd-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;font-weight:900;color:var(--green-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;min-height:32px}
.sd-go .ext{width:11px;height:11px}
.sd-bam-a:hover .sd-go{color:var(--ink)}
.sd-more{font-size:13px;color:var(--sub);display:flex;flex-wrap:wrap;gap:0 10px}

/* 運営しているBämのご案内: its own labelled box after the article / the list, never between companies */
.bam-end>.in{padding-block:8px clamp(32px,4vw,48px)}
.bamc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(14px,2.4vw,26px);align-items:center;border:2px solid var(--ink);border-radius:18px;padding:clamp(18px,2.4vw,26px);background:var(--white)}
.bamc-art{width:96px;height:96px;background:var(--paper);border-radius:16px;display:grid;place-items:center}
.bamc-art .bamg{width:76px;height:76px}
.bamc-tx{display:grid;gap:4px;min-width:0}
.bamc-k{margin:0;font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--sub)}
.bamc-tx p:not(.bamc-k){margin:0;font-size:16px;font-weight:700;color:var(--ink);line-height:1.75}
.bamc .links{display:flex;flex-wrap:wrap;gap:0 18px}
.ext-l{gap:6px}
.ext-l .ext{width:11px;height:11px}

/* the list's heading: links to the prefecture's おすすめ articles beside it */
.osu{background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:clamp(16px,2vw,22px);display:grid;gap:8px}
.osu-h{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:var(--ink)}
.osu-d{margin:0;font-size:13.5px;color:var(--sub);line-height:1.7}
.osu ul{list-style:none;margin:0;padding:0;display:grid}
.osu li a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:52px}
.osu li a>span{display:grid;line-height:1.5}
.osu li b{font-size:14.5px;font-weight:900}
.osu li small{font-size:12px;color:var(--sub);font-weight:700}
.osu li a:hover b{color:var(--green-ink);text-decoration:underline;text-underline-offset:4px}
.osu .tx-link{font-size:14px;justify-self:start}

/* filters */
.sf{display:grid;gap:14px;background:var(--paper);border-radius:18px;padding:clamp(16px,2.2vw,24px)}
.sf-g{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.sf-l{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900;color:var(--ink);padding:0}
.sf-l .ico{width:22px;height:22px}
.sf select{font:inherit;font-size:16px;font-weight:700;min-height:48px;padding:0 40px 0 14px;border:2px solid var(--ink);border-radius:12px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230A0607' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center/12px;color:var(--ink);appearance:none;max-width:100%;justify-self:start;min-width:min(100%,280px)}
.sf-b{display:flex;flex-wrap:wrap;gap:8px}
.sf-b button{min-height:44px;padding:6px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--white);font:inherit;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);cursor:pointer}
.sf-b button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.sf-n{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14px;color:var(--sub);font-weight:700;border-top:1px solid #DDDAD1;padding-top:12px}
.sf-n b{font-size:22px;color:var(--ink)}
.sf-n button{font:inherit;font-size:14px;background:none;border:0;color:var(--green-ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0 4px}
.sl-order{margin:0;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--sub);line-height:1.75}
.sl-order b{color:var(--ink)}
.sl-order .ico{width:24px;height:24px;margin-top:2px}

/* the list: one run, same card for every company */
.sl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sc{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:18px;background:var(--white);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.sc:hover{border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.sc:focus-within{border-color:var(--ink)}
.sc-ph{display:block;aspect-ratio:16/7;background:var(--paper);overflow:hidden}
.sc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sc-b{display:grid;gap:6px;padding:16px 18px 18px;align-content:start}
.sc-kana{font-size:11.5px;font-weight:700;color:var(--sub);letter-spacing:.04em;line-height:1.4}
.sc-n{margin:0;font-size:1.22rem;line-height:1.45}
.sc-a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.sc-a::after{content:"";position:absolute;inset:0;border-radius:18px}
.sc-a:hover{color:var(--green-ink)}
.sc-c{margin:0;font-size:13.5px;color:var(--sub);font-weight:700}
.sc-l{margin:2px 0 0;font-size:15.5px;font-weight:900;color:var(--ink);line-height:1.7;--dt:-.12em}
.sc-t{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.kc{font-size:12.5px;font-weight:700;line-height:1.6;padding:2px 10px;border-radius:999px;background:var(--mark);color:var(--green-ink)}
.sc-v{margin:0;display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text)}
.sc-v b{font-weight:900;color:var(--ink);margin-right:6px}
.sc-v .ico{width:20px;height:20px}
.sc-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.sc-f .tags{display:flex;flex-wrap:wrap;gap:6px}
.sc-iv{position:relative;z-index:1;font-size:13.5px;font-weight:900;color:var(--green-ink);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.sl-none{margin:0;background:var(--paper);border-radius:14px;padding:18px 20px;font-weight:700;color:var(--ink)}
.slist>.in{gap:20px}

/* the company page */
.st-bundle>.st{display:block}
html.js .st-bundle>.st:not(.on){display:none}
.st-hero>.in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.st-kana{margin:0;font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.06em}
.st-hero .ttl small{display:block;font-size:clamp(.95rem,1.4vw,1.1rem);font-weight:700;color:var(--sub);margin-top:8px;letter-spacing:0}
.st-hero .tags{display:flex;flex-wrap:wrap;gap:6px}
.st-line{margin:0;font-size:clamp(1.12rem,1.8vw,1.38rem);font-weight:900;color:var(--ink);line-height:1.7;--dt:-.12em}
.st-hero .btns{display:flex;flex-wrap:wrap;gap:10px 12px}
.st-ph{margin:0;display:grid;gap:8px}
.st-ph .fr{border-radius:18px;overflow:hidden;background:var(--white);aspect-ratio:4/3}
.st-ph img{width:100%;height:100%;object-fit:cover;display:block}
.st-ph figcaption{font-size:12.5px;color:var(--sub)}
.st-f6{display:grid;gap:0;margin:0;border-top:2px solid var(--ink)}
.st-f6>div{display:grid;grid-template-columns:13em minmax(0,1fr);gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.st-f6 dt{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;font-weight:900;color:var(--ink)}
.st-f6 dt .ico{width:22px;height:22px;flex:none;margin-top:2px}
.st-f6 dd{margin:0;font-size:16px;color:var(--text)}
.st-f6 .warn dd{color:var(--ink);font-weight:700}
.st-k{display:grid;gap:8px}
.st-kh{margin:0;display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:900;color:var(--ink)}
.st-kh .ico{width:22px;height:22px}
.blk .fix{margin:0;font-size:13.5px;color:var(--sub)}
.st-seen{display:grid;gap:10px}
.st-seen p{margin:0}
.st-seen .st-seen-l{font-size:1.12rem;font-weight:900;color:var(--ink);--dt:-.12em}
.st-arts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.st-arts li{border:2px solid var(--ink);border-radius:16px;padding:16px 20px;display:grid;gap:6px}
.st-arts a{font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.st-arts a:hover{color:var(--green-ink)}
.st-arts p{margin:0;font-size:15px;line-height:1.8}
.st-why{display:inline-block;font-size:12px;font-weight:900;color:var(--green-ink);background:var(--mark);border-radius:999px;padding:0 9px;margin-right:8px;line-height:1.8;vertical-align:1px}
.st-noart{margin:0;background:var(--paper);border-radius:14px;padding:16px 20px;display:grid;gap:4px;font-weight:700;color:var(--ink)}
.st-noart .tx-link{justify-self:start}
.st-more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.st-more a{display:grid;padding:12px 16px;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;line-height:1.5;min-height:56px}
.st-more a:hover{border-color:var(--ink)}
.st-more b{font-size:15.5px}
.st-more small{font-size:12.5px;color:var(--sub);font-weight:700}

/* in an おすすめ article: the reason is the article's own */
.cc-why{background:var(--mark);border-radius:12px;padding:12px 16px;display:grid;gap:4px}
.cc-why b{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;color:var(--green-ink);letter-spacing:.04em}
.cc-why b .ico{width:20px;height:20px}
.cc-why p{margin:0;font-size:15.5px;color:var(--ink);font-weight:700;line-height:1.8}
.cc-h h3 a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.cc-h h3 a:hover{color:var(--green-ink)}

/* おすすめから探す: prefecture as well as kind of work */
.kf-pref{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kf-pref label{font-size:14px;font-weight:900;color:var(--ink)}
.kf-pref select{font:inherit;font-size:16px;font-weight:700;min-height:48px;padding:0 40px 0 14px;border:2px solid var(--ink);border-radius:12px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230A0607' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center/12px;color:var(--ink);appearance:none}
.kf-h{gap:12px 20px}

@media (max-width:1100px){
  .wside>.in{grid-template-columns:minmax(0,1fr)}
  .wside .side{position:static;max-width:none;padding-block:8px 48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
}
@media (max-width:860px){
  .sl{grid-template-columns:minmax(0,1fr)}
  .st-hero>.in{grid-template-columns:minmax(0,1fr)}
  .st-f6>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .wside .side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .bamc{grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:18px 16px}
  .bamc-art{width:48px;height:48px;border-radius:12px}
  .bamc-art .bamg{width:40px;height:40px}
  .bamc-tx p:not(.bamc-k){font-size:15.5px}
  .bamc .ext-l{white-space:nowrap}
  .sc-ph{aspect-ratio:16/8}
  .sf select,.kf-pref select{width:100%}
  /* phones: smaller chips so two or three share a line and the list starts sooner */
  .sf{gap:12px}
  .sf-b{gap:6px}
  .sf-b button{font-size:14px;padding:4px 12px}
}

/* the header has seven items since おすすめから探す joined: the page is 1200px wide at most, so the line beside the logo
   never fits with them; it is gone, the items never break inside a word, and the gaps narrow below 1300px */
.gnav>a,.gn-area{white-space:nowrap}
@media (max-width:1299px){ .gnav{gap:clamp(12px,1.4vw,18px);font-size:14.5px} .gnav .cta{padding:0 14px} }
.st-hero .plate{justify-self:start}

/* the sitemap: each prefecture's company pages fold under its list */
.sm-co summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:700;color:var(--green-ink);text-decoration:underline;text-underline-offset:4px}
.sm-co ul{padding-left:14px!important}
.smap .sm-co li a{font-size:14px;font-weight:500}

/* the bottom of a list or an article: two cards side by side, then the record across the width, newest three first
   and the rest folded (GOV.UK 「Updates to this page」: a date, then one line of what changed) */
.bt-cards{display:grid;gap:12px}
.nexts.bt-two{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}
.bt-rec{gap:14px}
.bt-rec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 24px}
.bt-rec .log.page li{grid-template-columns:6.4em 3.4em minmax(0,1fr);gap:4px 14px;padding:13px 0;font-size:15px;align-items:baseline}
.bt-rec .log.page :is(time,.k,.tx){grid-column:auto;grid-row:auto}
.bt-rec .log.page .k{justify-self:start}
.bt-rec .log.page .tx{line-height:1.7}
.log-more summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-size:14.5px;font-weight:900;color:var(--ink)}
.log-more summary::-webkit-details-marker{display:none}
.log-more summary small{font-size:13px;font-weight:700;color:var(--sub)}
.log-more summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s;margin-left:2px}
.log-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.log-more summary:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.log-more .log.page{border-top:1px solid var(--line)}
@media (max-width:600px){
  .bt-rec .log.page li{grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:12px 0}
  .bt-rec .log.page .tx{grid-column:1/-1}
}

/* the menu: an interview title splits into even lines instead of leaving one word alone */
.mn-pp b,.mn-main small,.layer .key{text-wrap:balance}

/* the footer links never break inside a word (「プライバシーポリ／シー」 at 1100px): each column is as wide as its longest link */
.ft-nav a,.ft-r li a,.ft-bar .sis a,.ft-bar .op{white-space:nowrap}
@media (min-width:1100px){ .ft-nav{grid-template-columns:repeat(4,max-content);justify-content:space-between} }
/* on a 320px phone 「プライバシーポリシー」 does not fit its column: it breaks between the two words, never inside one */
.ft-nav a,.mn-sub a{word-break:keep-all}
@media (max-width:374px){ .ft-nav a{white-space:normal} }
@media (min-width:601px) and (max-width:860px){ .ft-dir-hd .more{margin-left:auto} }

/* Version 14: the sitemap. The top is a map that does not grow (fixed pages, one card per prefecture, kinds of article,
   newest interviews, a name search); each prefecture has a page with everything in it, company pages by kana row */
.smx-find{display:grid;gap:8px;margin-top:22px;max-width:560px}
.smx-find[hidden]{display:none}
.smx-find label{font-size:14px;font-weight:900;color:var(--ink)}
.smx-q{display:flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--ink);border-radius:12px;padding:0 6px 0 12px;min-height:52px}
.smx-q .ico{flex:none;width:22px;height:22px}
.smx-q input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:10px 0;outline:none}
.smx-q:focus-within{outline:3px solid var(--green);outline-offset:2px}
.smx-q button{flex:none;border:0;background:var(--paper);border-radius:8px;min-height:40px;padding:0 12px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}
.smx-find #smN{margin:0;font-size:13px;color:var(--sub)}
.smx-find #smN:empty{display:none}
/* no scroll box inside the page (a list inside a list traps the thumb on a phone); 30 results at most, then 「字を足すと、しぼれます」 */
.smx-r{list-style:none;margin:0;padding:0;background:var(--white);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.smx-q input::-webkit-search-cancel-button,.smx-q input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.smx-r li a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.smx-r li a:hover{background:var(--paper)}
.smx-r .k{grid-row:1/3;font-size:11.5px;font-weight:900;border:1px solid var(--ink);border-radius:6px;padding:0 6px;line-height:1.8;white-space:nowrap;align-self:start;margin-top:2px}
.smx-r .k.off{border-style:dashed;color:var(--sub)}
.smx-r b{font-size:15px;line-height:1.55}
.smx-r small{font-size:12.5px;color:var(--sub)}
.smx-r .none,.smx-r .more{padding:12px 14px;font-size:14px;line-height:1.8;color:var(--text)}
.smx-r .more{color:var(--sub);font-size:13px}
.smx-lead{margin:0;font-size:14.5px;color:var(--sub);line-height:1.8}
.smx-prefs{display:grid;gap:14px}
.smx-rg{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:8px 20px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.smx-rg h3{font-size:15px;line-height:1.5;display:flex;flex-direction:column;gap:0;padding-top:12px}
.smx-rg h3 small{font-size:12px;color:var(--sub);font-weight:700}
.smx-pc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:10px}
.smx-p{background:var(--paper);border-radius:12px;padding:6px 14px 8px}
.smap .smx-p>a.smx-pn{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;min-height:44px;padding:8px 0 6px;border-bottom:2px solid var(--ink)}
.smx-pn b{font-size:16.5px;font-weight:900}
.smx-pn span{font-size:13px;font-weight:700;color:var(--sub)}
.smx-pn .ar{margin-left:auto;align-self:center}
.smap .smx-p ul a{font-size:14px;min-height:40px}
.smap .smx-p ul li:last-child a{border-bottom:0}
.smx-rg>.smx-off{grid-column:2;margin:0;font-size:13px;color:#8E8981;line-height:1.7}
.smx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.smx-two section{display:grid;gap:8px;align-content:start}
.smap .smx-two li a small{max-width:50%;text-align:right;white-space:normal}
.smx-more{margin:4px 0 0}
/* one prefecture */
.smx-one{gap:clamp(32px,3.6vw,48px)}
.smap h2 small{margin-left:auto;font-size:12.5px;color:var(--sub);font-weight:700}
.smx-al .k{flex:none;font-size:11.5px;font-weight:900;border:1px solid var(--ink);border-radius:6px;padding:0 6px;line-height:1.8}
.smap .smx-al li a{gap:12px}
.smap .smx-al li.sub a{padding-left:22px;font-weight:500}
.smap .smx-al li.sub .k{border-color:var(--line);color:var(--sub)}
.smap .smx-al li a b{font-weight:inherit;flex:1;min-width:0}
.smx-ki{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.smx-ki a,.smx-ki span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:10px;font-weight:900;font-size:15px}
.smx-ki a{border:2px solid var(--ink);color:var(--ink);text-decoration:none}
.smx-ki a:hover{background:var(--ink);color:var(--white)}
.smx-ki span{color:#C9C5BC;border:2px dashed #DDDAD1}
/* company pages flow down like a dictionary: columns stay even however big one kana row gets (か行 80社 + な行 3社) */
.smx-ks{columns:3;column-gap:32px}
.smx-k{display:block;scroll-margin-top:90px;margin-bottom:18px}
.smx-k h3{display:flex;align-items:baseline;gap:8px;break-after:avoid;-webkit-column-break-after:avoid}
.smx-ks .smx-k ul{display:block}
.smx-ks .smx-k li{break-inside:avoid;-webkit-column-break-inside:avoid}
.smx-k h3 small{font-size:12px;font-weight:700;color:var(--sub)}
.smx-up{margin-left:auto;font-size:12px;font-weight:700;color:var(--sub)}
.smap .smx-k h3{font-size:13px;font-weight:900;color:var(--sub);padding:6px 0 4px;border-bottom:2px solid var(--ink)}
.smap .smx-k li a{font-size:14.5px}
.smap .smx-k li a small{font-weight:500}
.smx-iv{columns:2;column-gap:40px}
.smap .smx-iv{display:block}
.smx-iv li{break-inside:avoid;-webkit-column-break-inside:avoid}
.smap .smx-iv li a{display:grid;gap:2px;padding:10px 0}
.smap .smx-iv li a small{margin-left:0;font-weight:500}
@media (max-width:1000px){
  .smx-ks{columns:2}
  .smx-iv{columns:1}
  .smx-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .smx-rg{grid-template-columns:minmax(0,1fr);gap:8px}
  .smx-rg h3{flex-direction:row;align-items:baseline;gap:8px;padding-top:0}
  .smx-rg>.smx-off{grid-column:1}
  .smx-ks{columns:1}
  .smap .smx-al li.sub a{padding-left:12px}
  /* phone: two prefecture cards a row (47 cards stay about half as long) */
  .smx-pc{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .smx-p{padding:2px 10px 4px}
  .smap .smx-p>a.smx-pn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 4px;padding:8px 0 6px}
  .smx-pn b{font-size:15.5px;grid-column:1}
  .smx-pn span{grid-column:1;font-size:11.5px;line-height:1.4}
  .smx-pn .ar{grid-column:2;grid-row:1/3}
  .smap .smx-p ul a{font-size:13px;min-height:40px;gap:4px}
  /* list rows: the 社数・更新 line goes under the title */
  .smap .smx-al li a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:8px 0}
  .smx-al .k{grid-row:1/3}
  .smap .smx-al li a small{grid-column:2;margin-left:0}
  .smap .smx-nv li a{display:grid;gap:2px;padding:8px 0}
  .smap .smx-nv li a small{margin-left:0;max-width:none;text-align:left}
}
@media (max-width:374px){
  .smx-p{padding:2px 8px 4px}
  .smap .smx-p ul a{font-size:12.5px}
}
.smx-test{background:#FFF4C2;border-bottom:1px solid #E8D98A}
.smx-test .in{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding-top:12px;padding-bottom:12px;font-size:14px;line-height:1.7}
.smx-test b{font-weight:900}

/* ---------- Version 14: プライバシーポリシー ---------- */
.tbd{display:inline-block;background:#FFF4C2;border:1px dashed #B89400;border-radius:6px;padding:0 7px;font-size:12.5px;font-weight:900;color:#5E4B00;line-height:1.9;white-space:nowrap}
.pwho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pwho-c{background:var(--white);border:2px solid var(--ink);border-radius:16px;padding:18px 20px 16px;display:grid;gap:12px;align-content:start}
.pwho-c h3{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.5;margin:0}
.pwho-c h3 .ico{flex:none}
.pwho-c dl{margin:0;display:grid;gap:0}
.pwho-c dl>div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.pwho-c dt{font-size:12.5px;font-weight:900;color:var(--sub)}
.pwho-c dd{margin:0;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.75}
.pwho-l{margin:0;font-size:13.5px;color:var(--sub);font-weight:700}
.pwho-l a{font-weight:700}
.ptab-w{margin:6px 0 4px}
.ptab{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.75}
.ptab caption{text-align:left;font-size:13px;font-weight:900;color:var(--sub);padding-bottom:8px}
.ptab thead th{font-size:12.5px;font-weight:900;color:var(--sub);text-align:left;padding:0 12px 8px 0;border-bottom:2px solid var(--ink);white-space:nowrap}
.ptab tbody th,.ptab td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.ptab tbody th{width:11em;font-weight:900}
.ptab tbody th small{font-size:12.5px;font-weight:700;color:var(--sub)}
.ptab-s{display:block;font-size:13px;font-weight:700;color:var(--sub)}
.pflow,.pstep{list-style:none;margin:8px 0 6px;padding:0;display:grid;gap:10px;counter-reset:pf}
.pflow li,.pstep li{counter-increment:pf;display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 12px;align-items:start}
.pflow li::before,.pstep li::before{content:counter(pf);grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:900;font-size:14px}
.pflow b,.pstep b{color:var(--ink);font-size:15.5px;line-height:1.7}
.pflow span,.pstep span{font-size:15px;line-height:1.85}
.pstep span span{font-size:inherit}
.pfee{background:var(--mark);border-radius:12px;padding:12px 16px;margin:10px 0}
.pfee b{color:var(--ink)}
.psafe{list-style:none;padding:0;display:grid;gap:10px}
.psafe li{background:var(--paper);border-radius:12px;padding:12px 16px;line-height:1.85}
.psafe li b{display:block;color:var(--ink);font-size:15px}
.pwords{margin:0;display:grid;gap:0}
.pwords>div{display:grid;grid-template-columns:10em minmax(0,1fr);gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pwords dt{font-weight:900;color:var(--ink)}
.pwords dd{margin:0;line-height:1.85}
@media (max-width:1000px){.pwho{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .ptab thead{display:none}
  .ptab,.ptab tbody,.ptab tr,.ptab th,.ptab td{display:block;width:auto}
  .ptab tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .ptab tbody th,.ptab td{border:0;padding:3px 0}
  .ptab tbody th{width:auto;margin-bottom:6px}
  .ptab td{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:8px}
  .ptab td::before{content:attr(data-th);font-size:12.5px;font-weight:900;color:var(--sub)}
  .ptab td[colspan]{display:block}
  .ptab td[colspan]::before{content:none}
  .pwords>div{grid-template-columns:minmax(0,1fr)}
}
@media print{.pwho-c{break-inside:avoid}.tbd{border-style:solid}}
/* long sentences in legal pages fill the line (balance is for headings and short items) */
.doc .body :is(li,dd,td){text-wrap:pretty}
/* one row of 外部送信: read as a card (label | text) at every width, a 4-column table is too narrow beside the contents */
.ptab.stack thead{display:none}
.ptab.stack,.ptab.stack tbody,.ptab.stack tr,.ptab.stack th,.ptab.stack td{display:block;width:auto}
.ptab.stack tr{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:4px 0 8px}
.ptab.stack tbody th{border:0;padding:12px 0 8px;font-size:16px}
.ptab.stack td{border:0;border-top:1px solid var(--line);padding:10px 0;display:grid;grid-template-columns:9em minmax(0,1fr);gap:12px}
.ptab.stack td::before{content:attr(data-th);font-size:12.5px;font-weight:900;color:var(--sub);padding-top:2px}
@media (max-width:720px){.ptab.stack td{grid-template-columns:minmax(0,1fr);gap:2px}}
.ptab.stack caption{display:block}
.ptab td .tbd{justify-self:start}
@media (max-width:720px){.ptab caption{display:block}}