/* かなめ行政書士事務所（制作の見本）
   色：紙の白・墨・朱（印と大事な1語だけ）・細い罫線。字：Zen Old Mincho／Noto Sans JP／Spectral。
   しるし：罫線が引かれ、朱の角印「要」が押される。節の四では、5枚の紙が1枚ずつ整う。 */
:root{
  --paper:#FBFAF7; --face:#F2F0EA; --sheet:#FFFFFF; --ink:#1B1B1B; --txt:#34322F; --mute:#6B6862;
  --shu:#BF2F24; --rule:#CFCAC0; --rule2:#B4AEA3;
  --ff-min:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --ff-go:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ff-lat:"Spectral","Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --gut:clamp(20px,5.8vw,84px); --hh:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 8px)}
body{margin:0;background:var(--paper);color:var(--txt);font-family:var(--ff-go);font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-break:strict;overflow-wrap:anywhere}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0;padding:0}
h1,h2,h3,h4{font-weight:700;color:var(--ink)}
h3{text-wrap:balance}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.wrap{overflow-x:hidden}
@supports (overflow:clip){.wrap{overflow-x:clip}}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ib{display:inline-block;font-weight:inherit}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- 共通の部品 ---------- */
main{position:relative}
.sec{position:relative;padding-block:76px 84px}
.sec__in{position:relative;z-index:1;padding-inline:var(--gut);max-width:1320px;margin-inline:auto}
.sh__no{display:flex;align-items:center;gap:14px;line-height:1}
.no{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px}
.no svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.no circle{fill:none;stroke:var(--shu);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.no b{font-family:var(--ff-min);font-size:17px;line-height:1;color:var(--ink);padding-top:1px}
.sh__name{font-size:12px;font-weight:500;letter-spacing:.26em;color:var(--ink)}
.sh__rule{flex:1;height:1px;background:var(--ink);transform-origin:left center}
.h2{margin-top:26px;font-family:var(--ff-min);font-size:clamp(24px,7.1vw,30px);line-height:1.62;letter-spacing:.05em;font-feature-settings:"palt";text-wrap:balance}
.sh__lead{margin-top:18px;font-size:16px;line-height:1.95;text-wrap:pretty}
.note{margin-top:12px;font-size:12px;line-height:1.9;color:var(--mute)}
.tag{display:inline-flex;align-items:center;justify-content:center;flex:none;height:24px;padding:0 9px 0 10px;border:1px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:.18em;line-height:1;color:var(--ink)}
.lnk{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-family:var(--ff-min);font-size:15px;letter-spacing:.08em;color:var(--ink);border-bottom:1px solid var(--ink)}
.lnk i,.btn i,.gmenu__cta i{position:relative;flex:none;width:30px;height:1px;background:currentColor;transition:width .5s var(--ease-out)}
.lnk i::after,.btn i::after,.gmenu__cta i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.lnk:hover i,.btn:hover i{width:44px}
.btn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;margin-top:22px;padding:0 18px;background:var(--ink);color:var(--paper);font-family:var(--ff-min);font-size:15px;letter-spacing:.06em;line-height:1.5;overflow:hidden;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--shu);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease-out)}
.btn span,.btn i{position:relative}
.btn i{width:24px}
.btn small{display:block;margin-top:3px;font-family:var(--ff-go);font-size:12px;letter-spacing:.1em;opacity:.75}
.btn:hover::before{transform:scaleX(1);transform-origin:left}

/* 写真 */
.ph{position:relative}
.ph__z{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--face)}
.ph__z img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.ph figcaption{margin-top:10px;padding-inline:var(--gut);font-size:12px;letter-spacing:.08em;line-height:1.7;color:var(--mute)}

/* 出てくる動き（プログラムが動く時だけ） */
html.js [data-r=""]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease) var(--d,0s),transform 1.3s var(--ease-out) var(--d,0s)}
html.js [data-r=""].is-in{opacity:1;transform:none}
html.js .sh__no .no circle{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .15s}
html.js .sh__no.is-in .no circle{stroke-dashoffset:0}
html.js .sh__no .no b,html.js .sh__no .sh__name{opacity:0;transition:opacity .9s var(--ease) .25s}
html.js .sh__no.is-in .no b,html.js .sh__no.is-in .sh__name{opacity:1}
html.js .sh__no .sh__rule{transform:scaleX(0);transition:transform 1.8s var(--ease-io) .3s}
html.js .sh__no.is-in .sh__rule{transform:none}
html.js .ph[data-r="img"] .ph__z{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--ease-io) var(--d,0s)}
html.js .ph[data-r="img"].is-in .ph__z{clip-path:inset(0 0 0 0)}
html.js .ph[data-r="img"] .ph__z img{scale:1.12;transition:scale 2.4s var(--ease-out) var(--d,0s)}
html.js .ph[data-r="img"].is-in .ph__z img{scale:1}
html.js .ph[data-r="img"] figcaption{opacity:0;transition:opacity 1s var(--ease) 1s}
html.js .ph[data-r="img"].is-in figcaption{opacity:1}

/* 朱の角印を押す */
@keyframes stamp{0%{opacity:0;scale:1.55;rotate:-11deg}50%{opacity:1;scale:.93;rotate:-4deg}72%{scale:1.025}100%{opacity:1;scale:1;rotate:-4deg}}
@keyframes ripple{0%{opacity:.5;scale:.9}100%{opacity:0;scale:1.5}}

/* ---------- 始まりの幕 ---------- */
.loader{display:none}
html.js .loader{display:flex;position:fixed;z-index:100;inset:0;align-items:center;justify-content:center;background:var(--paper);clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease-io) .1s,visibility 0s 1.3s}
html.js.is-loaded .loader{clip-path:inset(0 0 100% 0);visibility:hidden}
.ld{position:relative;width:min(340px,80vw)}
.ld__r{display:block;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;animation:ldR .75s var(--ease-io) forwards}
.ld__r1{animation-delay:.1s}
.ld__r2{background:var(--rule2);animation-delay:.32s}
.ld__r3{animation-delay:.54s}
.ld__name{padding:15px 0 13px;font-family:var(--ff-min);font-size:clamp(16px,5vw,19px);letter-spacing:.2em;line-height:1.5;color:var(--ink);opacity:0;animation:ldT .9s var(--ease) .55s forwards}
.ld__sub{display:flex;gap:1.4em;padding:9px 0 10px;font-size:12px;letter-spacing:.14em;line-height:1.6;color:var(--mute);opacity:0;animation:ldT .9s var(--ease) .72s forwards}
.ld__seal{position:absolute;right:2px;top:7px;width:clamp(46px,14vw,56px);height:auto;aspect-ratio:1;opacity:0;rotate:-4deg;animation:stamp .5s var(--ease-out) 1.08s both}
@keyframes ldR{to{transform:scaleX(1)}}
@keyframes ldT{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 上の帯 ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:var(--hh);padding-inline:var(--gut);background:rgba(251,250,247,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
html.is-menu .hd{background:var(--paper)}
.hd__logo{display:flex;align-items:center;gap:10px;min-height:44px}
.hd__seal{width:30px;height:30px;rotate:-4deg}
.hd__name{display:flex;flex-direction:column;line-height:1}
.hd__name b{font-family:var(--ff-min);font-size:15px;letter-spacing:.1em;color:var(--ink)}
.hd__name small{margin-top:5px;font-size:12px;letter-spacing:.06em;color:var(--mute)}
.hd__nav,.hd__cta{display:none}
.hd__btn{position:relative;width:52px;height:48px;margin-right:-10px}
.hd__btn i{position:absolute;left:14px;right:14px;height:1px;background:var(--ink);transition:transform .6s var(--ease-out),top .6s var(--ease-out)}
.hd__btn i:nth-child(1){top:14px}
.hd__btn i:nth-child(2){top:21px}
.hd__btn span{position:absolute;left:0;right:0;bottom:5px;font-size:12px;letter-spacing:.16em;line-height:1;text-align:center;color:var(--ink);padding-left:.16em}
html.is-menu .hd__btn i:nth-child(1){top:17.5px;transform:rotate(20deg)}
html.is-menu .hd__btn i:nth-child(2){top:17.5px;transform:rotate(-20deg)}

/* 目次 */
.gmenu{position:fixed;z-index:40;inset:0;overflow:auto;background:var(--paper);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io),visibility 0s .8s}
html.is-menu .gmenu{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease-io)}
html.is-menu,html.is-menu body{overflow:hidden}
.gmenu__in{display:flex;flex-direction:column;min-height:100%;max-width:640px;margin-inline:auto;padding:calc(var(--hh) + 26px) var(--gut) 34px}
.gmenu__ttl{padding-bottom:12px;border-bottom:1px solid var(--ink);font-family:var(--ff-min);font-size:13px;letter-spacing:.5em;line-height:1.6;color:var(--ink)}
.gmenu__list li{border-bottom:1px solid var(--rule);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
html.is-menu .gmenu__list li{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(.2s + var(--i,0)*.05s),transform .9s var(--ease-out) calc(.2s + var(--i,0)*.05s)}
.gmenu__list li:nth-child(2){--i:1}.gmenu__list li:nth-child(3){--i:2}.gmenu__list li:nth-child(4){--i:3}.gmenu__list li:nth-child(5){--i:4}.gmenu__list li:nth-child(6){--i:5}.gmenu__list li:nth-child(7){--i:6}.gmenu__list li:nth-child(8){--i:7}.gmenu__list li:nth-child(9){--i:8}
.gmenu__list a{display:grid;grid-template-columns:38px 1fr;align-items:center;min-height:50px;padding:4px 0}
.gmenu__list b{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;font-family:var(--ff-min);font-size:12px;line-height:1;color:var(--ink)}
.gmenu__list span{font-family:var(--ff-min);font-size:15.5px;letter-spacing:.08em;line-height:1.5;color:var(--ink)}
.gmenu__cta{display:flex;align-items:center;justify-content:space-between;min-height:58px;margin-top:26px;padding:0 20px;background:var(--ink);color:var(--paper);font-family:var(--ff-min);font-size:15px;letter-spacing:.08em}
.gmenu__info{margin-top:auto;padding-top:24px;font-size:13px;line-height:1.95;color:var(--mute)}

/* ---------- 最初の画面 ---------- */
.hero{position:relative;display:flex;flex-direction:column;padding-top:var(--hh)}
.hero__txt{order:1;position:relative;padding:34px var(--gut) 30px}
.hero__media{order:2;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--face)}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:50% 50%}
.hero__facts{order:3}
.hero__kind{display:flex;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:500;letter-spacing:.12em;line-height:1.8;color:var(--ink)}
.hero__kind::before{content:"";width:22px;height:1px;margin-right:12px;background:var(--ink)}
.hero__ttl{position:relative;margin-top:18px;font-family:var(--ff-min);font-size:clamp(29px,9.6vw,40px);line-height:1.5;letter-spacing:.04em;font-feature-settings:"palt";color:var(--ink)}
.hl{display:block;overflow:hidden;white-space:nowrap}
.hl>span{display:block}
.hero__ttl em{font-style:normal;color:var(--shu)}
.hero__seal{position:absolute;right:0;top:.08em;width:clamp(54px,17.5vw,72px);height:auto;aspect-ratio:1;rotate:-4deg}
.hero__lead{margin-top:20px;font-size:16px;line-height:1.95;text-wrap:pretty}
.hero__lnk{margin-top:16px}
.hero__facts{padding:6px var(--gut) 0}
.hero__facts li{display:grid;grid-template-columns:74px 1fr;align-items:center;padding:15px 0;border-bottom:1px solid var(--rule)}
.hero__facts li:first-child{border-top:1px solid var(--ink)}
.hero__facts .tag{justify-self:start}
.hero__facts p{font-family:var(--ff-min);font-size:15.5px;letter-spacing:.06em;line-height:1.7;color:var(--ink)}
html.js .hero__media{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-io) .15s}
html.js.is-loaded .hero__media{clip-path:inset(0 0 0 0)}
html.js .hero__media img{scale:1.1;transition:scale 2.8s var(--ease-out) .15s}
html.js.is-loaded .hero__media img{scale:1}
html.js .hl>span{translate:0 106%;transition:translate 1.3s var(--ease-out)}
html.js .hl:nth-child(1)>span{transition-delay:.35s}
html.js .hl:nth-child(2)>span{transition-delay:.5s}
html.js .hl:nth-child(3)>span{transition-delay:.65s}
html.js.is-loaded .hl>span{translate:0 0}
html.js .hero__seal{opacity:0}
html.js.is-loaded .hero__seal{animation:stamp .55s var(--ease-out) 1.35s both}
html.js .hero__kind,html.js .hero__lead,html.js .hero__lnk,html.js .hero__facts{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.2s var(--ease-out)}
html.js .hero__kind{transition-delay:.2s}
html.js .hero__lead{transition-delay:1s}
html.js .hero__lnk{transition-delay:1.15s}
html.js .hero__facts{transition-delay:1.3s}
html.js.is-loaded .hero__kind,html.js.is-loaded .hero__lead,html.js.is-loaded .hero__lnk,html.js.is-loaded .hero__facts{opacity:1;transform:none}

/* ---------- 一 はじめに ---------- */
.stop{margin-top:34px;border-top:1px solid var(--ink)}
.stop li{display:grid;grid-template-columns:26px 1fr;column-gap:16px;align-items:start;padding:22px 0 22px;border-bottom:1px solid var(--rule)}
.cb{width:26px;height:26px;margin-top:22px;overflow:visible}
.cb rect{fill:var(--sheet);stroke:var(--ink);stroke-width:1}
.cb path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.stop p{font-family:var(--ff-min);font-size:17.5px;letter-spacing:.04em;line-height:1.75;color:var(--ink);font-feature-settings:"palt"}
.stop small{display:block;margin-bottom:6px;font-family:var(--ff-go);font-size:12px;font-weight:500;letter-spacing:.16em;line-height:1.6;color:var(--mute)}
html.js .stop li[data-r="chk"]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s)}
html.js .stop li[data-r="chk"].is-in{opacity:1;transform:none}
html.js .stop li .cb path{stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--ease) calc(var(--d,0s) + .7s)}
html.js .stop li.is-in .cb path{stroke-dashoffset:0}
.intro__close{margin-top:30px;padding-left:16px;border-left:1px solid var(--ink);font-family:var(--ff-min);font-size:16.5px;letter-spacing:.05em;line-height:1.8;color:var(--ink)}

/* ---------- 二 決めていること ---------- */
.rules{background:var(--face)}
.rules__body{position:relative;margin-top:36px}
.ph--desk .ph__z{aspect-ratio:3/2}
.ph--desk .ph__z img{top:-3%;height:106%}
.memo{position:relative;z-index:2;margin:-22px var(--gut) 0;padding:30px 22px 24px;background:var(--sheet);box-shadow:0 1px 0 rgba(27,27,27,.05),0 26px 50px -28px rgba(27,27,27,.4);rotate:-.5deg}
.memo::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule);pointer-events:none}
html.js .memo[data-r="memo"]{opacity:0;transform:translateY(44px);rotate:-2.4deg;transition:opacity 1s var(--ease) .2s,transform 1.5s var(--ease-out) .2s,rotate 1.6s var(--ease-out) .2s}
html.js .memo[data-r="memo"].is-in{opacity:1;transform:none;rotate:-.5deg}
.memo__ttl{display:flex;align-items:center;gap:14px;font-family:var(--ff-min);font-size:14px;letter-spacing:.6em;line-height:1;color:var(--ink);padding-left:.6em}
.memo__ttl::before,.memo__ttl::after{content:"";flex:1;height:1px;background:var(--ink)}
.memo__list{margin-top:18px}
.memo__list li{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:18px 0 18px;border-bottom:1px solid var(--rule)}
.memo__list li:last-child{border-bottom:1px solid var(--ink)}
.memo__n{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:30px;line-height:1;color:var(--ink);min-width:20px}
.memo__k{justify-self:start;display:inline-flex;align-items:center;height:24px;padding:0 9px 0 10px;border:1px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:.18em;line-height:1;color:var(--ink)}
.memo__list li>div{grid-column:1/-1;margin-top:12px}
.memo__list h3{font-family:var(--ff-min);font-size:17px;letter-spacing:.04em;line-height:1.7;font-feature-settings:"palt"}
.memo__list p{margin-top:6px;font-size:16px;line-height:1.9}
.memo__sign{display:flex;flex-direction:column;align-items:flex-end;margin-top:16px;font-family:var(--ff-min);font-size:13px;letter-spacing:.12em;line-height:1.9;color:var(--ink)}

/* ---------- 三 確かめる（機能） ---------- */
.ck{margin-top:34px}
.ck__sheet,.res{position:relative;background:var(--sheet);border:1px solid var(--ink);padding:22px 18px 18px}
.ck__ttl,.res__ttl{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding-bottom:14px;border-bottom:3px double var(--ink)}
.ck__ttl span,.res__ttl span{font-family:var(--ff-min);font-size:17px;letter-spacing:.34em;line-height:1.5;color:var(--ink)}
.ck__ttl small,.res__ttl small{font-size:12px;letter-spacing:.06em;line-height:1.6;color:var(--mute)}
.q{padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.q:last-child{border-bottom:0;padding-bottom:4px}
.q legend{float:left;width:100%;padding:0;display:flex;gap:12px}
.q legend b{flex:none;font-family:var(--ff-lat);font-style:italic;font-weight:400;font-size:21px;line-height:1.3;color:var(--ink);width:14px}
.q legend span{font-family:var(--ff-min);font-size:15.5px;letter-spacing:.04em;line-height:1.7;color:var(--ink);font-feature-settings:"palt"}
.q legend small{display:block;margin-top:2px;font-family:var(--ff-go);font-size:12px;letter-spacing:.04em;line-height:1.7;color:var(--mute)}
.opts{clear:both;display:grid;gap:8px;padding:14px 0 0 26px}
.opts--2,.opts--3{grid-template-columns:1fr 1fr}
.opts--3 label:last-child{grid-column:1/-1}
.opts label{position:relative;display:block;cursor:pointer}
.opts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opts label>span{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;min-height:50px;height:100%;padding:8px 12px;border:1px solid var(--rule2);background:var(--paper);font-size:14px;font-weight:500;letter-spacing:.06em;line-height:1.45;color:var(--ink);transition:border-color .3s,background-color .3s}
.opts label>span small{flex:0 0 100%;padding-left:26px;font-size:12px;font-weight:400;letter-spacing:.04em;line-height:1.5;color:var(--mute)}
.opts i{position:relative;flex:none;width:16px;height:16px;border:1px solid var(--ink);background:var(--sheet)}
.opts i::after{content:"";position:absolute;left:4.5px;top:.5px;width:5px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) scale(0);transform-origin:60% 70%;transition:transform .35s var(--ease-out)}
.opts input:checked+span{border-color:var(--ink);background:var(--sheet)}
.opts input:checked+span i::after{transform:rotate(45deg) scale(1)}
.opts input:focus-visible+span{outline:1px solid var(--ink);outline-offset:3px}
.opts label:hover>span{border-color:var(--ink)}
.res{margin-top:16px}
.res__body{min-height:120px}
.res__body.is-swap{animation:resIn .7s var(--ease-out)}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.proc{padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.proc+.proc{padding-top:22px}
.proc__st{display:inline-flex;align-items:center;height:26px;padding:0 10px 0 11px;border:1px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:.14em;line-height:1;color:var(--ink)}
.proc__st.is-need{background:var(--ink);color:var(--paper)}
.proc__name{margin-top:12px;font-family:var(--ff-min);font-size:19px;letter-spacing:.04em;line-height:1.55;font-feature-settings:"palt"}
.proc__name small{display:block;font-family:var(--ff-go);font-weight:400;font-size:12px;letter-spacing:.06em;line-height:1.7;color:var(--mute)}
.proc__dl{margin-top:12px;border-top:1px solid var(--ink)}
.proc__dl div{display:grid;grid-template-columns:6.4em 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed var(--rule2)}
.proc__dl dt{padding-top:2px;font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.8;color:var(--mute)}
.proc__dl dd{font-size:14px;line-height:1.85;color:var(--ink);text-wrap:pretty}
.proc__dl li{position:relative;padding-left:.95em}
.proc__dl li::before{content:"・";position:absolute;left:-.1em}
.proc__note{margin-top:12px;padding-left:12px;border-left:1px solid var(--rule2);font-size:12.5px;line-height:1.9;text-wrap:pretty}
.proc__note--plus{margin-top:18px}
.msg{margin-top:20px;padding:16px 14px 16px;background:var(--face)}
.msg__lbl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:12px;font-weight:500;letter-spacing:.12em;line-height:1.6;color:var(--ink)}
.msg__lbl small{font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--mute)}
.msg__b{position:relative;margin-top:10px;padding:12px 14px;background:var(--sheet);border:1px solid var(--rule);font-size:14px;line-height:1.85;letter-spacing:.03em;white-space:pre-line;color:var(--ink)}

/* ---------- 四 流れ（しるしの動き） ---------- */
.flow{padding-bottom:0}
.flow__track{position:relative;margin-top:30px}
.flow__stage{position:relative}
.flow__in{display:grid;gap:22px}
.flow__desk{--pw:clamp(140px,min(64vw,29svh),250px);position:relative;height:calc(var(--pw) * 1.3 + 40px)}
.pp{position:absolute;left:50%;top:50%;width:var(--pw);aspect-ratio:200/260;margin-left:calc(var(--pw) / -2);margin-top:calc(var(--pw) * -.65);background:var(--sheet);box-shadow:0 0 0 1px rgba(27,27,27,.07),0 1px 1px rgba(27,27,27,.06),0 14px 26px -16px rgba(27,27,27,.38);transform-origin:50% 50%;will-change:transform}
.pp svg{position:relative;width:100%;height:100%;overflow:visible}
.pp::after{content:"";position:absolute;inset:0;background:rgba(27,27,27,.08);opacity:var(--bk,0);pointer-events:none}
.pp text{font-feature-settings:"palt"}
.pp-no{font-family:var(--ff-lat);font-style:italic;font-size:calc(10.5px * var(--fk,1));fill:var(--mute)}
.pp-t{font-family:var(--ff-min);font-weight:700;font-size:calc(14.5px * var(--fk,1));letter-spacing:.06em;fill:var(--ink)}
.pp-t2{font-family:var(--ff-min);font-weight:700;font-size:calc(15px * var(--fk,1));letter-spacing:.3em;fill:var(--ink)}
.pp-v{font-family:var(--ff-min);font-weight:700;font-size:calc(10.5px * var(--fk,1));letter-spacing:max(0em,calc(.03em - (var(--fk,1) - 1) * .4em));fill:var(--ink)}
.pp-n{font-family:var(--ff-lat);font-size:calc(12px * var(--fk,1));fill:var(--ink)}
.pp-n--b{font-size:calc(14px * var(--fk,1));font-weight:400}
.pp-s{font-family:var(--ff-go);font-size:calc(10.4px * var(--fk,1));letter-spacing:.02em;fill:var(--mute)}
/* 携帯：紙の中の字を、画面で12px以上に（紙の幅は 29svh で決まるので、背の低い画面ほど字を大きめに） */
@media (max-width:899px){.pp-no,.pp-v,.pp-s,.pp-n{font-size:calc(13px * var(--fk,1))}.pp-n--b{font-size:calc(14px * var(--fk,1))}}
@media (max-width:899px) and (min-height:780px){.pp-no,.pp-v,.pp-s{font-size:calc(11.4px * var(--fk,1))}.pp-n{font-size:calc(12px * var(--fk,1))}.pp-n--b{font-size:calc(14px * var(--fk,1))}}
.pp-l{stroke:var(--ink);stroke-width:1;fill:none}
.pp-l2{stroke:var(--ink);stroke-width:.7;fill:none}
.pp-d{stroke:var(--rule);stroke-width:.8;fill:none;stroke-dasharray:2 2}
.pp-box{fill:none;stroke:var(--ink);stroke-width:1}
.pp-ck{fill:none;stroke:var(--shu);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pp-list rect{fill:none;stroke:var(--ink);stroke-width:.8}
.pp-tk{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pp-env__body{fill:#F6F3EC;stroke:var(--ink);stroke-width:.9}
.pp-env__fold{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linejoin:round}
.pp-env__box{fill:none;stroke:var(--ink);stroke-width:.9}
.pp-seal{transform-box:fill-box;transform-origin:50% 50%;rotate:-4deg}
html.js .pp-ck{stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) .35s}
html.js .pp.is-ck .pp-ck{stroke-dashoffset:0}
html.js .pp-tk{stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease)}
html.js .pp.is-ck .pp-tk{stroke-dashoffset:0}
html.js .pp.is-ck .pp-list path:nth-of-type(1){transition-delay:.5s}
html.js .pp.is-ck .pp-list path:nth-of-type(2){transition-delay:.62s}
html.js .pp.is-ck .pp-list path:nth-of-type(3){transition-delay:.74s}
html.js .pp.is-ck .pp-list path:nth-of-type(4){transition-delay:.86s}
html.js .pp.is-ck .pp-list path:nth-of-type(5){transition-delay:.98s}
html.js .pp-seal{opacity:0}
html.js .pp.is-seal .pp-seal{animation:stamp .55s var(--ease-out) .55s both}
.flow__info{position:relative;padding-inline:2px}
.flow__cnt{display:none;align-items:baseline;gap:8px;line-height:1;color:var(--ink)}
.flow__cnt b{font-family:var(--ff-lat);font-weight:300;font-size:40px;line-height:1;min-width:.6em}
.flow__cnt span{font-family:var(--ff-lat);font-size:16px;color:var(--mute)}
.flow__list li{padding:18px 0 20px;border-top:1px solid var(--rule)}
.flow__list li:last-child{border-bottom:1px solid var(--rule)}
.flow__list h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-family:var(--ff-min);font-size:19px;letter-spacing:.06em;line-height:1.5}
.flow__list h3 small{font-family:var(--ff-go);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--mute)}
.flow__n{font-family:var(--ff-lat);font-style:italic;font-weight:300;font-size:22px;line-height:1;color:var(--ink)}
.flow__list p{margin-top:8px;font-size:16px;line-height:1.85}
.flow__days{display:flex;align-items:flex-start;gap:10px;margin-top:10px !important;font-family:var(--ff-min);font-weight:700;font-size:13.5px !important;line-height:1.75 !important;color:var(--ink);letter-spacing:.04em}
.flow__days span{flex:none;display:inline-flex;align-items:center;height:22px;margin-top:1px;padding:0 6px 0 7px;border:1px solid var(--ink);font-family:var(--ff-go);font-weight:500;font-size:12px;letter-spacing:.12em;line-height:1}
.flow__bar{display:none;gap:7px;margin-top:16px}
.flow__bar li{width:14px;height:14px;border:1px solid var(--ink);background:var(--sheet);transition:background-color .4s var(--ease)}
.flow__bar li.is-on{background:var(--ink)}
/* 動く時：画面を止めて、紙を1枚ずつ前へ */
html.js .flow__track{height:calc(100vh + 5 * 56vh);height:calc(100svh + 5 * 56svh)}
html.js .flow__stage{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));display:flex;align-items:center}
html.js .flow__in{width:100%;gap:14px}
html.js .flow__cnt{display:flex}
html.js .flow__bar{display:flex}
html.js .flow__list{display:grid;margin-top:12px}
html.js .flow__list li{grid-area:1/1;padding:14px 0 0;border-bottom:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s .45s}
html.js .flow__list li.is-cur{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .05s,transform .7s var(--ease-out) .05s}
html.js .flow__n{display:none}

/* ---------- 五 報酬 ---------- */
.fee__tbl{width:100%;margin-top:32px;border-collapse:collapse;border-top:3px double var(--ink)}
.fee__tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fee__tbl tr{display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.fee__tbl tbody th{grid-column:1;text-align:left;font-family:var(--ff-min);font-size:17px;letter-spacing:.04em;line-height:1.55;color:var(--ink);font-feature-settings:"palt"}
.fee__tbl th small{display:block;margin-top:2px;font-family:var(--ff-go);font-weight:400;font-size:12px;letter-spacing:.06em;line-height:1.7;color:var(--mute)}
.fee__tbl td{padding:0}
.fee__tbl td:nth-of-type(1){grid-column:1;grid-row:2;margin-top:6px;font-size:12px;line-height:1.6;color:var(--ink)}
.fee__tbl td:nth-of-type(1)::before{content:"出す先";display:inline-block;margin-right:10px;padding:0 6px 0 7px;border:1px solid var(--rule2);font-size:12px;letter-spacing:.1em;line-height:20px;color:var(--mute)}
.fee__tbl .is-free td:nth-of-type(1){display:none}
.fee__tbl td:nth-of-type(2){grid-column:2;grid-row:1/3;text-align:right;font-size:12px;line-height:1.2;white-space:nowrap;color:var(--ink)}
.fee__tbl td b{margin-right:2px;font-family:var(--ff-lat);font-weight:400;font-size:28px;letter-spacing:.01em;font-variant-numeric:lining-nums tabular-nums}
.fee__tbl .is-free td b{font-family:var(--ff-min);font-weight:700;font-size:18px;letter-spacing:.2em;color:var(--shu)}
.fee__notes{margin-top:22px}
.fee__notes li{position:relative;padding:3px 0 3px 18px;font-size:12.5px;line-height:1.9;text-wrap:pretty}
.fee__notes li::before{content:"";position:absolute;left:0;top:calc(3px + .95em);width:9px;height:1px;background:var(--ink)}

/* ---------- 六 行政書士から ---------- */
.message{background:var(--face)}
.message__body{margin-top:30px}
.ph--meet .ph__z{aspect-ratio:3/2}
.message__txt{padding:34px var(--gut) 0}
.message__txt .h2{margin-top:0}
.letter{margin-top:24px}
.letter p{font-size:16px;line-height:2.1;text-wrap:pretty}
.letter p+p{margin-top:1.2em}
.sign{display:flex;flex-direction:column;align-items:flex-end;margin-top:30px;line-height:1.7}
.sign small{font-size:12px;letter-spacing:.12em;color:var(--mute)}
.sign span{margin:4px 0 6px;font-family:var(--ff-min);font-size:25px;letter-spacing:.3em;color:var(--ink);padding-left:.3em}

/* ---------- 七 質問 ---------- */
.faq__list{margin-top:32px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:grid;grid-template-columns:26px 1fr 16px;align-items:start;gap:14px;padding:19px 0;cursor:pointer;list-style:none;font-family:var(--ff-min);font-weight:700;font-size:16px;letter-spacing:.04em;line-height:1.7;color:var(--ink);font-feature-settings:"palt"}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"問";display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--ink);font-size:12px;line-height:1}
.faq summary>span{padding-top:1px}
.faq summary i{position:relative;width:16px;height:26px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);transition:transform .5s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0deg)}
.faq details>div{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:0 0 22px}
.faq details>div::before{content:"答";display:grid;place-items:center;width:26px;height:26px;background:var(--ink);color:var(--paper);font-family:var(--ff-min);font-size:12px;line-height:1}
.faq details>div p{font-size:16px;line-height:1.9}
.faq details[open]>div{animation:faqIn .6s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 八 申し込み ---------- */
.apply{background:var(--face)}
.apply__card{position:relative;margin-top:30px;padding:24px 18px 22px;background:var(--sheet);border:1px solid var(--ink)}
.apply__card .msg__b{background:var(--paper)}
.btn--big{min-height:64px;margin-top:20px;font-size:16px}

/* ---------- 九 案内 ---------- */
.info{margin-top:30px;border-top:1px solid var(--ink)}
.info div{display:grid;grid-template-columns:5.6em 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--rule)}
.info dt{font-size:12px;font-weight:500;letter-spacing:.1em;line-height:2.1;color:var(--mute)}
.info dd{font-size:16px;line-height:1.85;color:var(--ink)}

/* ---------- 下の帯 ---------- */
.ft{position:relative;background:var(--paper);border-top:1px solid var(--ink)}
.ft__in{max-width:1320px;margin-inline:auto;padding:44px var(--gut) 34px}
.ft__brand{display:flex;align-items:center;gap:14px}
.ft__seal{flex:none;width:52px;height:52px;rotate:-4deg}
.ft__brand b{display:block;font-family:var(--ff-min);font-size:17px;letter-spacing:.12em;line-height:1.6;color:var(--ink)}
.ft__brand span{display:block;font-size:12px;line-height:1.8;color:var(--mute)}
.ft__nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px;margin-top:26px;border-top:1px solid var(--rule)}
.ft__nav a{display:flex;align-items:center;min-height:46px;font-family:var(--ff-min);font-size:14px;letter-spacing:.1em;color:var(--ink);border-bottom:1px solid var(--rule)}
.sample{padding:20px var(--gut) calc(84px + env(safe-area-inset-bottom,0px));background:var(--face);font-size:12px;line-height:1.95}
.sample__lnk{margin-top:8px}
.sample__lnk a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--shu)}

/* 追いかける「相談」の札と、見本のしるし */
.fcta{position:fixed;z-index:30;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;background:var(--ink);color:var(--paper);box-shadow:0 12px 26px -14px rgba(27,27,27,.7);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .5s var(--ease),transform .7s var(--ease-out)}
.fcta::before{content:"";position:absolute;inset:4px;border:1px solid rgba(251,250,247,.35)}
.fcta b{font-family:var(--ff-min);font-size:15px;letter-spacing:.14em;line-height:1.2;padding-left:.14em}
.fcta small{margin-top:3px;font-family:var(--ff-lat);font-size:12px;letter-spacing:.16em;line-height:1;padding-left:.16em}
.fcta.is-on{opacity:1;transform:none;pointer-events:auto}
.pill{position:fixed;z-index:30;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;height:38px;padding:0 14px 0 12px;border:1px solid var(--rule2);background:rgba(251,250,247,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;letter-spacing:.02em;line-height:1}
.pill span{color:var(--mute)}
.pill span::after{content:"";display:inline-block;width:1px;height:12px;margin-left:10px;vertical-align:-2px;background:var(--rule2)}
.pill a{display:flex;align-items:center;height:44px;margin:-3px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--shu)}
html.is-menu .fcta,html.is-menu .pill{opacity:0;pointer-events:none}
html.static .fcta{opacity:1;transform:none}

/* ================= 広い画面 ================= */
@media (min-width:900px){
  :root{--hh:76px}
  body{font-size:15.5px}
  .sec{padding-block:clamp(120px,11vw,176px)}
  .h2{margin-top:30px;font-size:clamp(32px,2.9vw,44px);line-height:1.55}
  .sh__lead{max-width:34em;font-size:15px}

  .hd__logo{gap:12px}
  .hd__seal{width:36px;height:36px}
  .hd__name b{font-size:17px}
  .hd__name small{font-size:12px}
  .hd__btn{display:none}
  .hd__nav{display:flex;gap:clamp(20px,2.4vw,40px);margin-left:auto;margin-right:clamp(24px,3vw,44px)}
  .hd__nav a{position:relative;display:flex;align-items:center;min-height:44px;font-family:var(--ff-min);font-size:14.5px;letter-spacing:.14em;color:var(--ink)}
  .hd__nav a::after{content:"";position:absolute;left:0;right:.14em;bottom:8px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
  .hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .hd__cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:50px;padding:0 24px;background:var(--ink);color:var(--paper);font-family:var(--ff-min);font-size:14.5px;letter-spacing:.12em;line-height:1;transition:background-color .4s}
  .hd__cta small{font-family:var(--ff-go);font-size:12px;letter-spacing:.16em;opacity:.8}
  .hd__cta:hover{background:var(--shu)}

  /* 最初の画面：写真を全面に。左の白い壁に言葉 */
  .hero{display:grid;grid-template-columns:100%;grid-template-rows:max(640px,100vh) auto;grid-template-rows:max(640px,100svh) auto;padding-top:0}
  .hero__media{grid-row:1;grid-column:1;aspect-ratio:auto;height:100%}
  .hero__media img{top:0;height:100%;object-position:50% 0%}
  .hero__txt{grid-row:1;grid-column:1;align-self:start;z-index:2;width:46vw;margin:calc(var(--hh) + 3.4vw) 0 0 7vw;padding:0}
  .hero__kind{font-size:12.5px}
  .hero__ttl{margin-top:2vw;font-size:3.7vw;line-height:1.42}
  .hero__seal{right:auto;left:7.15em;top:.06em;width:1.62em}
  .hero__lead{margin-top:1.7vw;max-width:19.5em;font-size:max(14px,1.02vw);line-height:2.1;color:var(--ink)}
  .hero__lnk{margin-top:1.2vw}
  .hero__facts{grid-row:2;grid-column:1;position:relative;z-index:2;display:flex;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gut)}
  .hero__facts li{flex:1;display:flex;align-items:center;gap:16px;padding:26px 30px 28px;border:0;border-left:1px solid var(--rule)}
  .hero__facts li:first-child{border-top:0;border-left:0;padding-left:0}
  .hero__facts p{font-size:16px}
  .hero__facts br{display:none}
  .hero+.sec{border-top:1px solid var(--ink)}

  .intro__in{display:grid;grid-template-columns:42fr 58fr;gap:6%;align-items:start}
  .intro .sh{position:sticky;top:calc(var(--hh) + 60px)}
  .stop{margin-top:8px}
  .stop li{grid-template-columns:30px 1fr;column-gap:26px;padding:34px 0 34px}
  .cb{width:30px;height:30px;margin-top:30px}
  .stop p{font-size:24px;line-height:1.7}
  .stop small{font-size:12px;margin-bottom:8px}
  .intro__close{grid-column:2;margin-top:40px;font-size:19px;padding-left:22px}

  .rules__body{display:grid;grid-template-columns:60fr 40fr;align-items:center;max-width:1600px;margin:56px auto 0}
  .ph--desk{grid-column:1;grid-row:1}
  .ph--desk .ph__z{aspect-ratio:4/3}
  .memo{grid-column:2;grid-row:1;margin:0 var(--gut) 0 -14vw;padding:46px 44px 36px;max-width:600px}
  .memo::before{inset:8px}
  .memo__list li{grid-template-columns:40px 64px 1fr;align-items:start;column-gap:14px;padding:24px 0}
  .memo__n{font-size:36px;padding-top:2px}
  .memo__k{margin-top:4px}
  .memo__list li>div{grid-column:auto;margin-top:0}
  .memo__list h3{font-size:19px}
  .memo__list p{font-size:16px}

  .ck{display:grid;grid-template-columns:44fr 56fr;gap:30px;align-items:start;margin-top:56px}
  .ck__sheet,.res{padding:32px 32px 28px}
  .ck__sheet{position:sticky;top:calc(var(--hh) + 32px)}
  .res{margin-top:0}
  .q legend span{font-size:17px}
  .opts{gap:10px;padding-left:28px}
  .opts--3{grid-template-columns:1fr 1fr 1.3fr}
  .opts--3 label:last-child{grid-column:auto}
  .opts label>span{min-height:54px;font-size:14.5px}
  .proc__name{font-size:22px}
  .proc__dl div{grid-template-columns:8em 1fr;padding:12px 0}
  .proc__dl dd{font-size:14px}
  .msg{padding:18px 20px 20px}
  .msg__b{font-size:13.5px}

  .flow__track{margin-top:56px}
  html.js .flow__track{height:calc(100vh + 5 * 62vh)}
  .flow__in{grid-template-columns:56fr 44fr;gap:6%;align-items:center}
  .flow__desk{--pw:clamp(220px,min(20vw,40vh),300px);height:calc(var(--pw) * 1.3 + 70px)}
  .flow__cnt b{font-size:64px}
  .flow__cnt span{font-size:20px}
  .flow__list h3{font-size:24px}
  .flow__list p{font-size:15px;max-width:26em}
  .flow__days{font-size:15px !important}
  .flow__bar{margin-top:26px}
  html:not(.js) .flow__in,html.static .flow__in{align-items:start}
  html.static .flow__desk{position:sticky;top:calc(var(--hh) + 40px)}
  .flow{padding-bottom:clamp(60px,6vw,100px)}

  .fee__in{display:grid;grid-template-columns:36fr 64fr;gap:7%;align-items:start}
  .fee__head{position:sticky;top:calc(var(--hh) + 60px)}
  .fee__tbl{margin-top:8px}
  .fee__tbl thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .fee__tbl tr{display:table-row;padding:0}
  .fee__tbl thead th{padding:12px 18px;background:var(--face);border-bottom:1px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:.16em;text-align:left;color:var(--mute)}
  .fee__tbl thead th:last-child{text-align:right}
  .fee__tbl tbody th,.fee__tbl td{display:table-cell;padding:26px 18px;border-bottom:1px solid var(--rule);vertical-align:middle}
  .fee__tbl tbody th{padding-left:0;font-size:20px}
  .fee__tbl thead th:first-child{padding-left:0;background:none}
  .fee__tbl td:nth-of-type(1){margin:0;font-family:var(--ff-min);font-weight:700;font-size:14.5px;letter-spacing:.1em;border-left:1px solid var(--rule)}
  .fee__tbl td:nth-of-type(1)::before{display:none}
  .fee__tbl .is-free td:nth-of-type(1){display:table-cell;color:var(--mute)}
  .fee__tbl td:nth-of-type(2){padding-right:0;font-size:13px;border-left:1px solid var(--rule)}
  .fee__tbl td b{font-size:36px}
  .fee__tbl .is-free td b{font-size:21px}
  .fee__notes{margin-top:30px}
  .fee__notes li{font-size:13.5px}

  .message__body{display:grid;grid-template-columns:54fr 46fr;align-items:center;max-width:1600px;margin:56px auto 0}
  .ph--meet .ph__z{aspect-ratio:4/3}
  .ph--meet figcaption{padding-inline:var(--gut) 0}
  .message__txt{padding:0 var(--gut) 0 6vw;max-width:720px}
  .letter{margin-top:34px}
  .letter p{font-size:15.5px;line-height:2.25}

  .faq__in{display:grid;grid-template-columns:36fr 64fr;gap:7%;align-items:start}
  .faq__head{position:sticky;top:calc(var(--hh) + 60px)}
  .faq__list{margin-top:8px}
  .faq summary{grid-template-columns:30px 1fr 18px;gap:20px;padding:26px 0;font-size:18px}
  .faq summary::before{width:30px;height:30px;font-size:13px}
  .faq summary i{width:18px;height:30px}
  .faq details>div{grid-template-columns:30px 1fr;gap:20px;padding:0 50px 30px 0}
  .faq details>div::before{width:30px;height:30px;font-size:13px}
  .faq details>div p{font-size:15px}

  .apply__in{display:grid;grid-template-columns:44fr 56fr;gap:7%;align-items:center}
  .apply__card{margin-top:0;padding:40px 40px 34px}
  .btn{padding:0 28px;font-size:16px}
  .btn i{width:34px}
  .ph--desk .ph__z img{top:-8%;height:116%}
  .btn--big{min-height:74px;font-size:17px}

  .office__in{display:grid;grid-template-columns:36fr 64fr;gap:7%;align-items:start}
  .info{margin-top:8px}
  .info div{grid-template-columns:8em 1fr;padding:20px 0}
  .info dd{font-size:15px}

  .ft__in{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:56px;padding-bottom:50px}
  .ft__nav{display:flex;gap:30px;margin-top:0;border:0}
  .ft__nav a{border:0;font-size:14.5px}
  .sample{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:18px var(--gut) 18px 250px}
  .sample br{display:none}
  .sample__lnk{margin-top:0;flex:none}
  .fcta{right:28px;bottom:28px;width:92px;height:92px}
  .fcta b{font-size:19px}
  .fcta small{font-size:11px;margin-top:5px}
  .pill{left:24px;bottom:24px}
}