/* 配置の考え: 夜明けの空(藍→浅葱→曙)がゆっくり動く上に、すりガラスの面と、太くて現代的なゴシックの題を置く。朱は押す所と大事な印だけ。(会長 11/10: 明朝と和風の飾りは見た目に合わないのでやめた) */
:root{
--bg:#f4f5fb;--bg2:#eaedf7;--solid:#ffffff;--glass:rgba(255,255,255,.62);--glass2:rgba(255,255,255,.9);
--ink:#121833;--ink2:#434a69;--ink3:#6b7291;--line:rgba(18,24,51,.10);--line2:rgba(18,24,51,.2);
--shu:#c93a1e;--shu2:#e9742f;--shu-soft:rgba(201,58,30,.09);--btn1:#c5361b;--btn2:#e25e2c;--on-btn:#ffffff;
--ai:#2c44d8;--ai-soft:rgba(44,68,216,.08);--asagi:#0c8f96;--ok:#1b7f54;--ok-soft:rgba(27,127,84,.10);--ng:#c23b25;--ng-soft:rgba(194,59,37,.08);--ki:#a8690f;
--au1:#93a5ff;--au2:#84e6da;--au3:#ffb49c;--au-op:.78;--grain:.05;
--shadow:0 1px 2px rgba(18,24,51,.05),0 14px 36px -14px rgba(18,24,51,.2);--shadow-btn:0 10px 26px -10px rgba(201,58,30,.6);
--xl:#1d6f42;--d-sun:block;--d-moon:none;
--f-disp:"M PLUS 2","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
--f-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
--f-hand:"Zen Kurenaido","Klee One","Hiragino Maru Gothic ProN",cursive;
--r:20px;--r-s:12px;--gut:20px;
--ease:cubic-bezier(.22,.8,.2,1);
--spring:cubic-bezier(.3,1.4,.5,1);
}
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1)}}
/* 会長の決め(11/10): いつも明るい画面から始める。端末の暗い設定には合わせない。暗い画面は右上のボタンで選んだ時だけ */
:root{color-scheme:light}
:root[data-ae="dark"]{--bg:#080b1a;--bg2:#0e1230;--solid:#141938;--glass:rgba(26,32,72,.52);--glass2:rgba(17,22,52,.92);--ink:#eef0fc;--ink2:#bcc1de;--ink3:#8f95b8;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.24);--shu:#ff7350;--shu2:#ffb86b;--shu-soft:rgba(255,115,80,.15);--btn1:#ff7a52;--btn2:#ffb05e;--on-btn:#230d05;--ai:#9aa9ff;--ai-soft:rgba(154,169,255,.14);--asagi:#5fd9cf;--ok:#5bd39b;--ok-soft:rgba(91,211,155,.14);--ng:#ff8f78;--ng-soft:rgba(255,143,120,.13);--ki:#f2c14e;--au1:#3144e6;--au2:#0c9f97;--au3:#e2553a;--au-op:.46;--grain:.09;--shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 44px -18px rgba(0,0,0,.7);--shadow-btn:0 10px 30px -10px rgba(255,122,82,.55);--xl:#2f9e68;--d-sun:none;--d-moon:block;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.9;font-weight:400;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--bg)}
.site{position:relative;line-break:strict;overflow-wrap:anywhere;text-spacing-trim:trim-start;transition:background-color .4s}
.wrap{max-width:1128px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;-webkit-tap-highlight-color:transparent}
p,ul,ol,figure,h1,h2,h3,table{margin:0}
ul,ol{padding:0;list-style:none}
b,strong,th{font-weight:700}
small{font-size:.82em}
img{height:auto;display:block}
button{font:inherit;color:inherit}
.ic{width:1.5em;height:1.5em;flex:none}
[id]{scroll-margin-top:92px}
#pagetop{scroll-margin-top:0}
:focus-visible{outline:2.5px solid var(--ai);outline-offset:3px;border-radius:6px}
::selection{background:var(--shu);color:var(--on-btn)}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--solid);padding:10px 16px;border-radius:0 0 12px 0}
.skip:focus{left:0}
h1,h2,h3,.fig2>figcaption,.tcard b,.gcard b,.vcard b,.btn,summary{word-break:keep-all;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){h2,h3,.fig2>figcaption,.tcard b,.gcard b,.vcard b,summary,.pains a,.pain3 b,.stampline,.promise6 b{word-break:auto-phrase}}
h1,h2,h3{text-wrap:balance}
p,li,small,td{text-wrap:pretty}

/* ---- 下書きの帯 ---- */
.draftbar{background:var(--ink);color:var(--bg);font-size:12.5px;line-height:1.6}
.draftbar .wrap{padding-block:7px;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center}
.draftbar a{font-weight:700;text-decoration:underline}

/* ---- 読んだ所までの線(スクロールに合わせて伸びる) ---- */
.prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:80;transform-origin:0 50%;scale:0 1;background:linear-gradient(90deg,var(--ai),var(--asagi) 55%,var(--shu2));pointer-events:none}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
.prog{animation:prog linear both;animation-timeline:scroll(root)}
.cap::before{animation:capIn linear both;animation-timeline:scroll(root);animation-range:0 140px}
.hero-in{animation:heroOut linear both;animation-timeline:view();animation-range:exit 5% exit 95%}
.aurora{animation:auOut linear both;animation-timeline:scroll(root);animation-range:0 700px}
}}
@keyframes prog{to{scale:1 1}}
@keyframes capIn{from{opacity:.5;box-shadow:none}to{opacity:1}}
@keyframes heroOut{to{opacity:.15;translate:0 46px}}
@keyframes auOut{to{translate:0 120px}}

/* ---- 頭の帯(すりガラス) ---- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-top:10px}
html[data-nav] .bar{view-transition-name:hdr}
.cap{position:relative;display:flex;align-items:center;gap:6px;height:58px;padding:0 8px 0 14px;border-radius:999px}
.cap::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);border:1px solid var(--line);box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.logo i{font-style:normal;font-family:var(--f-disp);font-weight:800;font-size:15px;line-height:1;color:var(--on-btn);width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--btn1),var(--btn2));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:rotate .6s var(--spring)}
.logo:hover i{rotate:-8deg}
.logo span{font-family:var(--f-disp);font-weight:800;font-size:17px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.logo small{display:block;font-family:var(--f-body);font-weight:500;font-size:10px;letter-spacing:.14em;color:var(--ink3)}
.gn{display:flex;align-items:center;gap:2px}
.gn>a,.gy>summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .25s,color .25s}
.gn>a:hover,.gy>summary:hover,.gy[open]>summary{background:var(--ai-soft);color:var(--ai)}
.gy>summary{list-style:none}
.gy>summary::-webkit-details-marker{display:none}
.gy>summary::after{content:"";width:7px;height:7px;border-right:1.8px solid;border-bottom:1.8px solid;rotate:45deg;translate:0 -2px;transition:rotate .35s var(--ease),translate .35s var(--ease)}
.gy[open]>summary::after{rotate:225deg;translate:0 2px}
.gypanel{position:absolute;left:0;right:0;top:calc(100% + 10px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 22px;padding:22px;border-radius:26px;background:var(--glass2);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100dvh - 172px);overflow-y:auto;overscroll-behavior:contain;transform-origin:50% 0;transition:opacity .28s,translate .4s var(--ease),scale .4s var(--ease)}
@starting-style{.gy[open]>.gypanel{opacity:0;translate:0 -10px;scale:.98}}
.gycol b{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink3);padding:4px 10px 6px}
.gycol a,.gyx a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:12px;text-decoration:none;font-size:14.5px;line-height:1.4;transition:background-color .2s,translate .3s var(--ease)}
.gycol a .ic{color:var(--ai);width:20px;height:20px}
.gycol a:hover,.gyx a:hover{background:var(--ai-soft);translate:3px 0}
.gyx{display:none}
.gyfoot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;border-top:1px solid var(--line);padding:14px 10px 0;margin-top:8px;font-size:13.5px;color:var(--ink2)}
.gyfoot a{font-weight:700;color:var(--ai)}
.tgl{position:relative;width:44px;height:44px;flex:none;border:0;background:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background-color .25s}
.tgl:hover{background:var(--ai-soft)}
.tgl svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:rotate .7s var(--spring)}
.tgl:active svg{rotate:40deg}
.tgl .sun{display:var(--d-sun)}.tgl .moon{display:var(--d-moon)}
.go{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;transition:scale .5s var(--spring),box-shadow .3s}
.go:hover{box-shadow:0 8px 22px -8px var(--ink)}
.go:active{scale:.95}

/* ---- 題の所(夜明けの光) ---- */
.hero{position:relative;isolation:isolate;margin-top:-68px;padding:calc(68px + clamp(44px,7vw,96px)) 0 clamp(40px,6vw,84px)}
.aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:clamp(360px,62vw,820px);aspect-ratio:1;border-radius:50%;opacity:var(--au-op);will-change:transform}
.aurora i:nth-child(1){left:-14%;top:-34%;background:radial-gradient(closest-side,var(--au1),transparent)}
.aurora i:nth-child(2){right:-18%;top:-22%;background:radial-gradient(closest-side,var(--au2),transparent)}
.aurora i:nth-child(3){left:28%;top:26%;background:radial-gradient(closest-side,var(--au3),transparent)}
.hero::before,.end::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:-1;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.hero-in{display:grid;gap:22px;justify-items:start;min-width:0}
.tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;line-height:1.5;color:var(--ink2);padding:7px 15px 7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--shu);box-shadow:0 0 0 4px var(--shu-soft);flex:none}
h1{font-family:var(--f-disp);font-weight:800;font-size:clamp(2.05rem,7vw,4.5rem);line-height:1.26;letter-spacing:-.015em;font-feature-settings:"palt"}
h1.sm{font-size:clamp(1.72rem,5.4vw,3.3rem);line-height:1.34}
.mark{background:linear-gradient(100deg,var(--shu) 10%,var(--shu2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.08em}
.lead{font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.95;color:var(--ink2);max-width:36em}
.stampline>span:last-child{text-wrap:balance}
.stampline{display:flex;align-items:center;gap:16px;font-weight:700;font-size:1.02rem;line-height:1.6}
.stamp{flex:none;width:70px;height:70px;display:grid;place-items:center;text-align:center;border-radius:50%;font-family:var(--f-disp);font-weight:800;font-size:14px;line-height:1.3;color:var(--on-btn);background:linear-gradient(135deg,var(--btn1),var(--btn2));box-shadow:var(--shadow-btn),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px var(--shu-soft)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;justify-content:center;gap:1px;min-height:60px;padding:9px 46px 9px 24px;border-radius:18px;font-weight:700;font-size:1.02rem;line-height:1.4;text-decoration:none;transition:scale .55s var(--spring),translate .4s var(--ease),box-shadow .3s,background-color .3s;max-width:100%}
.btn small{font-weight:500;font-size:.74rem;opacity:.86}
.btn::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-top:2px solid;border-right:2px solid;rotate:45deg;translate:0 -50%;transition:translate .4s var(--ease)}
.btn:hover::after{translate:5px -50%}
.btn:hover{translate:0 -2px}
.btn:active{scale:.96;translate:0 0}
.btn.main{color:var(--on-btn);background:linear-gradient(120deg,var(--btn1),var(--btn2));box-shadow:var(--shadow-btn),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.main::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);translate:-110% 0;pointer-events:none}
.btn.sub{color:var(--ink);background:var(--glass);border:1px solid var(--line2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn.sub:hover{background:var(--glass2)}
.mailto{font-size:.84rem;line-height:1.7;color:var(--ink2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.mailto b{color:var(--ink);user-select:all}
.copy{min-height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);font-size:.78rem;font-weight:700;cursor:pointer;transition:scale .5s var(--spring),background-color .2s}
.copy:active{scale:.93}
.copy.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.rip{position:absolute;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:currentColor;opacity:.22;pointer-events:none;animation:rip .6s var(--ease) forwards}
@keyframes rip{to{scale:26;opacity:0}}

/* 題の横の飾り */
.hero-art{display:none}
.svc{display:grid;gap:12px;width:330px}
.svc li{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;border-radius:20px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:var(--shadow);font-family:var(--f-disp);font-weight:700;font-size:1.02rem;line-height:1.45}
.svc li:nth-child(odd){translate:-22px 0}.svc li:nth-child(even){translate:14px 0}
.svc .ic{width:44px;height:44px;padding:11px;border-radius:13px;background:var(--ai-soft);color:var(--ai)}
.artdisc{width:300px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:var(--shadow);position:relative}
.artdisc::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed var(--line2)}
.artdisc .ic{width:132px;height:132px;stroke-width:.9;color:var(--ink)}
@media (min-width:980px){.hero .wrap{grid-template-columns:minmax(0,1fr) auto;gap:56px}.hero-art{display:block}}

/* ---- 本文 ---- */
main.wrap{display:grid;gap:clamp(64px,9vw,120px);padding-block:clamp(36px,6vw,72px) clamp(64px,9vw,120px)}
main.wrap>section{display:grid;gap:22px;min-width:0}
main.wrap>section>*{min-width:0}
.h2{font-family:var(--f-disp);font-weight:800;letter-spacing:-.01em;font-size:clamp(1.45rem,4vw,2.25rem);line-height:1.45;font-feature-settings:"palt";display:grid;gap:14px;justify-items:start}
.h2::before{content:"";width:34px;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--shu),var(--shu2))}
main p{max-width:40em}
.sub-lead{color:var(--ink2);font-size:1.02rem}
.note,.mini,.zk-sub,.refnote,.tn{font-size:.86rem;line-height:1.8;color:var(--ink2)}
.mini{display:block}
h3{font-size:clamp(1.12rem,2.6vw,1.4rem);line-height:1.6;font-weight:700}
main a:not([class]){color:var(--ai);font-weight:700}

.list{display:grid;gap:10px;max-width:44em}
.list li{position:relative;padding-left:1.5em}
.list li::before{content:"";position:absolute;left:.3em;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--shu)}
.list.no li::before{content:"";width:11px;height:11px;left:.15em;top:.68em;border-radius:0;background:none;border:0;background:linear-gradient(45deg,transparent 43%,var(--ink3) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--ink3) 43% 57%,transparent 57%)}

/* 札に共通: 光が指を追う */
.tcard,.gcard,.vcard,.task,.pain3>div,.st,.pains li{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--line);border-radius:var(--r)}
.tcard::before,.gcard::before,.vcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--ai-soft),transparent 70%)}
@media (hover:hover){.tcard:hover::before,.gcard:hover::before,.vcard:hover::before{opacity:1}
.tcard:hover,.gcard:hover,.vcard:hover{border-color:var(--line2);box-shadow:var(--shadow);translate:0 -3px}}
.tcard,.gcard,.vcard{text-decoration:none;transition:translate .45s var(--ease),scale .55s var(--spring),box-shadow .35s,border-color .35s}
.tcard:active,.gcard:active,.vcard:active{scale:.975}

/* 御品書き */
.tiles4{display:grid;gap:14px;grid-template-columns:repeat(12,minmax(0,1fr))}
.tcard{grid-column:span 12;display:grid;gap:10px;align-content:start;justify-items:start;padding:26px 24px 22px}
@media (min-width:760px){.tcard:nth-child(4n+1),.tcard:nth-child(4n){grid-column:span 7}.tcard:nth-child(4n+2),.tcard:nth-child(4n+3){grid-column:span 5}}
.tcard>.ic{width:46px;height:46px;padding:11px;border-radius:14px;color:var(--ai);background:var(--ai-soft)}
.tcard .num{display:none;position:absolute;right:22px;top:18px;font-family:var(--f-disp);font-weight:800;font-size:3.4rem;line-height:1;color:var(--ink);opacity:.13;pointer-events:none;transition:opacity .4s,translate .6s var(--ease)}
.tcard:hover .num{opacity:.3;translate:-4px 4px}
.tcard b{font-family:var(--f-disp);font-weight:800;font-size:1.36rem;line-height:1.5}
.tcard>span:not(.num):not(.price):not(.more){color:var(--ink2);font-size:.95rem;line-height:1.8}
.price{font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2)}
.more{font-size:.9rem;font-weight:700;color:var(--ai);margin-top:4px}

/* 動きの見本 */
.vcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.vcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:18px 20px}
.vcard>span:last-child{display:grid;gap:3px;justify-items:start}
.play{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:16px;padding-left:3px;color:var(--on-btn);background:linear-gradient(135deg,var(--btn1),var(--btn2))}
.play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--shu);opacity:0}
.tg{font-size:.72rem;font-weight:700;line-height:1.5;padding:2px 10px;border-radius:999px;background:var(--ai-soft);color:var(--ai)}
.vcard b{font-size:1.02rem;line-height:1.6}
.vcard small{color:var(--ink3)}

/* 業種別 */
.gwrap{display:grid;gap:0}
.gwrap>div{display:grid;gap:12px;padding-block:22px;border-top:1px solid var(--line)}
.ghead{font-family:var(--f-disp);font-size:1.08rem;font-weight:800;line-height:1.6}
@media (min-width:900px){.gwrap>div{grid-template-columns:210px minmax(0,1fr);gap:24px}.ghead{padding-top:14px}}
.gcards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.gcard{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-items:center;padding:14px 38px 14px 14px;border-radius:16px;min-height:68px}
.gcard>.ic{grid-row:span 2;width:42px;height:42px;padding:10px;border-radius:12px;background:var(--ai-soft);color:var(--ai);transition:rotate .6s var(--spring),background-color .3s,color .3s}
.gcard:hover>.ic{rotate:-8deg;background:var(--ai);color:var(--solid)}
.gcard b{font-size:1rem;line-height:1.5}
.gcard>span{font-size:.8rem;line-height:1.55;color:var(--ink2)}
.gcard::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-top:1.8px solid var(--ink3);border-right:1.8px solid var(--ink3);rotate:45deg;translate:0 -50%;transition:translate .4s var(--ease),border-color .3s}
.gcard:hover::after{translate:5px -50%;border-color:var(--ai)}
.gcard.other{border-style:dashed}

/* 図の枠 */
.fig2{position:relative;padding:clamp(18px,3.4vw,34px);border-radius:26px;background:linear-gradient(160deg,var(--glass2),var(--glass));border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:18px;min-width:0}
.fig2>*{min-width:0}
.fig2 figcaption{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--ink3);display:flex;align-items:center;gap:9px}
.fig2 figcaption::before{content:"";width:18px;height:1.5px;background:currentColor}

.band2{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.band2>div{display:grid;gap:4px;justify-items:start;padding:22px clamp(14px,3vw,30px)}
.band2 .ic{width:30px;height:30px}
.band2 b{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.3rem,4vw,1.9rem);line-height:1.4}
.band2 span{font-size:.95rem;line-height:1.7}
.b-ai{background:var(--ai-soft);color:var(--ai)}
.b-hu{background:var(--shu-soft);color:var(--shu)}
.band2 span{color:var(--ink)}

.promise6{display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.promise6>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.promise6 .ic{width:26px;height:26px;margin-top:3px;color:var(--shu)}
.promise6 span{display:grid;gap:2px}
.promise6 b{line-height:1.6}
.promise6 small{color:var(--ink2);font-size:.86rem;line-height:1.7}

/* 流れ */
.tl{counter-reset:tl;display:grid;gap:14px;position:relative}
.tl>li{counter-increment:tl;position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start}
.tl>li::before{content:counter(tl);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:1rem;line-height:1;background:var(--solid);border:1.5px solid var(--shu);color:var(--shu);position:relative;z-index:1}
.tl>li:not(:last-child)::after{content:"";position:absolute;left:18.25px;top:38px;bottom:-14px;width:1.5px;background:linear-gradient(var(--shu),var(--line2));transform-origin:50% 0}
.tl>li>div{display:grid;gap:8px;min-width:0}
.mailw{border-radius:14px;border:1px solid var(--line);background:var(--solid);overflow:hidden;min-width:0}
.mh{position:relative;padding:10px 14px;font-size:.84rem;line-height:1.75;background:var(--bg2);border-bottom:1px solid var(--line)}
.mh b{color:var(--ink2)}
.mh:has(.tg){padding-right:76px}
.mh .tg{position:absolute;right:10px;top:10px}
.tl:not(:has(.tg)) .mh b{color:var(--ink);font-size:.98rem}
.mb{padding:11px 14px;font-size:.93rem;line-height:1.8}
.tn{padding-left:4px}
@media (min-width:900px){.tl:not(:has(.tg)){grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tl:not(:has(.tg))>li{grid-template-columns:minmax(0,1fr);gap:12px}
.tl:not(:has(.tg))>li:not(:last-child)::after{left:38px;right:-12px;top:18.25px;bottom:auto;width:auto;height:1.5px;background:linear-gradient(90deg,var(--shu),var(--line2));transform-origin:0 50%}}

/* しめくくり */
.end{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(48px,8vw,104px)}
.end::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg),transparent 32% 62%,var(--bg))}
.end .aurora i:nth-child(1){top:-10%}.end .aurora i:nth-child(2){top:10%}.end .aurora i:nth-child(3){top:40%}
.box{display:grid;gap:20px;justify-items:start;padding:clamp(24px,5vw,56px);border-radius:32px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:var(--shadow)}
.box>*{min-width:0}
.ask4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;max-width:none;width:100%}
.ask4 li{padding:14px 16px;border-radius:14px;background:var(--glass2);border:1px solid var(--line);font-size:.9rem;line-height:1.7;color:var(--ink2)}
.ask4 li::before{display:none}
.ask4 li b{display:block;color:var(--ink);font-size:.95rem}

footer{border-top:1px solid var(--line);font-size:.84rem;line-height:1.9;color:var(--ink2);padding-block:40px 56px}
.fn{display:grid;gap:26px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-bottom:30px}
.fn>div:first-child{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 18px}
.fn>div:first-child b{flex-basis:100%}
.fn>div{display:grid;gap:2px;align-content:start;justify-items:start}
.fn b{color:var(--ink)}
.fn a,footer a{text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.fn a:hover,footer a:hover{color:var(--ai);text-decoration:underline}

/* ---- 業種のページ ---- */
.pains{display:grid;gap:10px}
.pains li{display:grid;gap:4px;padding:16px 52px 16px 20px;border-radius:18px;transition:translate .4s var(--ease),border-color .3s}
.pains a{font-weight:700;font-size:1.03rem;line-height:1.65;text-decoration:none}
.pains a::after{content:"";position:absolute;inset:0}
.pains li::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--shu);border-bottom:2px solid var(--shu);rotate:45deg;translate:0 -70%;transition:translate .4s var(--ease)}
.pains li:hover{border-color:var(--line2);translate:0 -2px}
.pains li:hover::after{translate:0 -30%}
.pains small{color:var(--ink2);font-size:.86rem;line-height:1.7}
.pain3{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.pain3>div{display:grid;gap:8px;align-content:start;padding:22px 20px}
.pain3 .ic{width:28px;height:28px;color:var(--shu)}
.pain3 b{line-height:1.65;font-size:1.03rem}
.pain3 small{color:var(--ink2);line-height:1.7;font-size:.86rem}

/* 図: 紙→AI事務員→表 */
.zk-pair3,.zk-pair{display:grid;gap:14px;align-items:center;justify-items:center}
.zk-side{min-width:0;max-width:100%;display:grid;gap:8px;justify-items:center}
.zk-arrow{position:relative;width:44px;height:30px;color:var(--shu);rotate:90deg}
.zk-arrow svg{width:30px;height:30px;display:block;margin:auto}
@media (min-width:860px){.zk-pair3{grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1.5fr)}.zk-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start}.zk-arrow{rotate:0deg}.zk-pair .zk-arrow{margin-top:190px}}
.paper{font-size:.9rem;line-height:2.1;padding:18px 20px 16px;background:var(--solid);border:1px solid var(--line);border-radius:4px 16px 4px 4px;box-shadow:var(--shadow);rotate:-1.6deg;background-image:repeating-linear-gradient(transparent 0 1.99em,var(--line) 1.99em 2.1em);min-width:min(100%,230px)}
.hw{font-family:var(--f-hand);font-size:1.05rem;color:var(--ai)}
.zk-engine{position:relative;text-align:center;font-weight:700;line-height:1.5;padding:20px 22px;border-radius:22px;background:var(--solid);isolation:isolate}
.zk-engine::before{content:"";position:absolute;inset:-2px;border-radius:24px;z-index:-2;background:conic-gradient(from var(--ang,0deg),var(--ai),var(--asagi),var(--shu2),var(--ai))}
.zk-engine::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:-1;background:var(--solid)}
.zk-engine .ic{width:30px;height:30px;color:var(--ai)}
.zk-engine small{display:block;font-weight:500;color:var(--ink2);font-size:.78rem}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.xl{width:100%;max-width:460px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--solid);box-shadow:var(--shadow);font-size:.8rem;line-height:1.5}
.xt{background:var(--xl);color:#fff;padding:7px 12px;font-weight:700;font-size:.78rem}
.xt i{font-style:normal;font-weight:400;opacity:.85}
.xl table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.xl th,.xl td{border:1px solid var(--line);padding:5px 8px;text-align:left;white-space:nowrap}
.xl thead th,.xl tbody th{background:var(--bg2);color:var(--ink3);font-weight:500;text-align:center;font-size:.72rem}
.xl tr.h td{font-weight:700;background:var(--ok-soft)}
.xl td.r{text-align:right}
.xl td.sum{font-weight:700;border-top:2px solid var(--xl)}
.xl .tabs{padding:5px 12px;font-size:.72rem;color:var(--xl);font-weight:700;background:var(--bg2);border-top:1px solid var(--line)}
.xl{overflow-x:auto}
.zk-stat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px}
.zk-stat b{font-family:var(--f-disp);font-weight:800;font-size:clamp(3.6rem,13vw,6.6rem);line-height:1.1;font-feature-settings:"palt";background:linear-gradient(100deg,var(--ai),var(--asagi));-webkit-background-clip:text;background-clip:text;color:transparent}
.zk-stat span{font-weight:700;line-height:1.7}
.zk-stat small{font-weight:400;color:var(--ink2)}

/* 前と後(今→AI→人) */
.ba3,.stepfig,.fl{display:grid;gap:8px;align-items:stretch}
.ar{display:grid;place-items:center;color:var(--ink3)}
.ar .ic{width:22px;height:22px;rotate:90deg}
@media (min-width:760px){.ba3,.stepfig,.fl{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}.ar .ic{rotate:0deg}}
.bx{display:grid;gap:4px;align-content:start;padding:15px 17px;border-radius:16px;border:1px solid var(--line);background:var(--solid);font-size:.94rem;line-height:1.7}
.bx small{font-weight:700;font-size:.76rem;letter-spacing:.04em}
.ba-now{border-style:dashed;border-color:var(--line2);background:transparent}
.ba-now small{color:var(--ink3)}
.ba-ai{border-color:transparent;background:var(--ai-soft)}
.ba-ai small{color:var(--ai)}
.ba-human{border-color:transparent;background:var(--shu-soft)}
.ba-human small{color:var(--shu)}

.block,.task{display:grid;gap:14px;min-width:0}
.block{padding-top:34px;border-top:1px solid var(--line)}
.block>*,.task>*{min-width:0}
.block h3{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.2rem,3vw,1.6rem);line-height:1.6}
@media (min-width:900px){.block{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:repeat(11,auto) 1fr;column-gap:48px}.block>*{grid-column:1}.block>.shots{grid-column:2;grid-row:1/-1;align-self:start;position:sticky;top:96px}}
.shots{display:grid;justify-items:center}
.shot{display:grid;gap:10px;max-width:270px}
.shot img{width:100%;border-radius:22px;border:6px solid var(--ink);background:#fff;box-shadow:var(--shadow);cursor:zoom-in;transition:scale .5s var(--spring),rotate .5s var(--ease)}
.shot img:hover{scale:1.02;rotate:-1deg}
.shot figcaption{font-size:.8rem;line-height:1.75;color:var(--ink2)}
.shot figcaption b{color:var(--ink)}
.human{position:relative;padding:14px 18px 14px 62px;border-radius:16px;background:var(--shu-soft);font-size:.95rem;line-height:1.8;font-weight:500;max-width:44em}
.human::before{content:"人";position:absolute;left:14px;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:.95rem;line-height:1;color:var(--on-btn);background:linear-gradient(135deg,var(--btn1),var(--btn2))}

.tbl{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--solid)}
.tbl table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.75;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 16px;border-top:1px solid var(--line)}
.tbl tr.hd th{border-top:0;background:var(--bg2);font-size:.8rem;color:var(--ink2)}
@media (max-width:719px){.tbl table,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl tr.hd{display:none}.tbl tr{padding:12px 16px;border-top:1px solid var(--line)}.tbl tr:nth-child(2){border-top:0}.tbl td{padding:3px 0;border:0}.tbl td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:700;color:var(--ink3)}}

.money{display:grid;gap:16px;min-width:0}
.money>*{min-width:0}
.refnote{padding:10px 16px;border-radius:12px;background:var(--bg2);max-width:none}
.st{display:grid;gap:2px;align-content:start;padding:18px 20px;background:var(--solid)}
.st small{font-weight:700;color:var(--ink3);font-size:.76rem}
.st b{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.3;color:var(--shu);font-feature-settings:"palt"}
.st span{font-size:.88rem;line-height:1.7;color:var(--ink2)}
.fs{display:grid;gap:2px;justify-items:start;align-content:start;padding:16px 18px;border-radius:16px;background:var(--solid);border:1px solid var(--line)}
.fs .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;line-height:1;background:var(--ai);color:var(--solid);margin-bottom:6px}
.fs small{color:var(--ink2)}

/* 開く所 */
.faq{display:grid;gap:10px;max-width:50em}
.faq details,.relv details{border-radius:18px;border:1px solid var(--line);background:var(--glass);overflow:hidden}
.faq summary,.relv summary{position:relative;list-style:none;cursor:pointer;padding:16px 56px 16px 20px;font-weight:700;line-height:1.65;min-height:56px;display:flex;align-items:center}
.faq summary::-webkit-details-marker,.relv summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after,.relv summary::before,.relv summary::after{content:"";position:absolute;right:22px;top:50%;width:14px;height:2px;border-radius:2px;background:var(--shu);translate:0 -50%;transition:rotate .45s var(--ease)}
.faq summary::after,.relv summary::after{rotate:90deg}
details[open]>summary::after{rotate:0deg}
.faq details p{padding:0 20px 18px;color:var(--ink2);max-width:none}
:root{interpolate-size:allow-keywords}
.faq details::details-content,.relv details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content,.relv details[open]::details-content{block-size:auto}
.relv ul{display:grid;gap:2px;padding:0 12px 14px}
.relv li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:10px;text-decoration:none;font-weight:500;color:var(--ink)}
.relv li a::before{content:"▶";font-size:.6rem;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;padding-left:2px;background:var(--shu-soft);color:var(--shu);flex:none}
.relv li a:hover{background:var(--ai-soft)}
.relnav,.others{display:flex;flex-wrap:wrap;gap:8px}
.relnav a,.others a{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);text-decoration:none;font-size:.9rem;font-weight:500;transition:translate .35s var(--ease),scale .5s var(--spring),border-color .3s,color .3s}
.relnav a:hover,.others a:hover{translate:0 -2px;border-color:var(--ai);color:var(--ai)}
.relnav a:active,.others a:active{scale:.95}
.relnav .ic{width:18px;height:18px;color:var(--ai)}

/* 美容室の図 */
.zk-tag{font-size:.76rem;font-weight:700;padding:3px 13px;border-radius:999px;background:var(--bg2);color:var(--ink2)}
.zk-a .zk-tag{background:var(--ok-soft);color:var(--ok)}
.ph{width:min(100%,270px);border-radius:30px;border:7px solid var(--ink);background:var(--solid);overflow:hidden;box-shadow:var(--shadow);font-size:.84rem;line-height:1.65}
.pt{display:flex;justify-content:space-between;padding:6px 16px 2px;font-size:.66rem;font-weight:700;color:var(--ink2)}
.ph-h{padding:7px 14px;font-weight:700;font-size:.8rem;text-align:center;border-bottom:1px solid var(--line)}
.ph-b{display:grid;gap:9px;padding:14px 12px 16px;min-height:150px;align-content:start;background:var(--bg2)}
.bub{padding:9px 12px;border-radius:16px;max-width:92%}
.bub.in{background:var(--solid);border:1px solid var(--line);border-bottom-left-radius:5px;justify-self:start}
.bub.dr{background:var(--ai-soft);border:1.5px dashed var(--ai);border-bottom-right-radius:5px;justify-self:end}
.bub.dr small{display:block;font-weight:700;color:var(--ai);font-size:.7rem}
.hl{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--shu2) 55%,transparent) 58%);font-weight:700}
.send{justify-self:end;font-size:.74rem;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--shu);color:var(--on-btn)}
.zk-svg{width:100%;max-width:520px;height:auto;font-family:var(--f-body)}
.zk-svg text{fill:var(--ink)}
.zk-svg rect[fill="#2f855a"]{fill:var(--ok)}
.zk-svg rect[fill="#c9412a"]{fill:var(--ng)}
.zk-svg rect{transform-box:fill-box;transform-origin:0 50%}
.task{padding:24px clamp(18px,3vw,28px);overflow:visible}
.task h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--f-disp);font-weight:800}
.kind{font-family:var(--f-body);font-size:.72rem;font-weight:700;line-height:1.5;padding:3px 12px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.vl{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ai);font-size:.92rem;line-height:1.7;text-decoration:none;padding:6px 0;min-height:44px}
.vl::before{content:"▶";font-size:.6rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;padding-left:2px;background:var(--ai);color:var(--solid);flex:none}
.vl:hover{text-decoration:underline}
.oxcol{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.oxcol>div{padding:18px 20px;border-radius:18px;display:grid;gap:8px;align-content:start}
.oxcol b{display:flex;align-items:center;gap:8px}
.oxcol .ic{width:22px;height:22px;stroke-width:2.6}
.oxcol ul{display:grid;gap:5px;font-size:.93rem}
.oxcol li{padding-left:1.1em;position:relative}
.oxcol li::before{content:"";position:absolute;left:.15em;top:.82em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.ox-y{background:var(--ok-soft)}.ox-y b{color:var(--ok)}
.ox-n{background:var(--ng-soft)}.ox-n b{color:var(--ng)}

/* 知らせ・大きく見る */
.toast{position:absolute;left:50%;z-index:90;width:max-content;max-width:calc(100% - 32px);translate:-50% 0;padding:12px 18px;border-radius:16px;background:var(--ink);color:var(--bg);font-size:.86rem;font-weight:500;line-height:1.6;box-shadow:var(--shadow);opacity:0;scale:.9;pointer-events:none;transition:opacity .3s,scale .5s var(--spring)}
.toast.on{opacity:1;scale:1}
.zoomov{position:absolute;left:0;right:0;top:0;z-index:95;background:rgba(6,8,20,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:zoom-out;animation:fade .3s both}
.zoomov img{position:absolute;left:50%;translate:-50% 0;width:auto;max-width:calc(100% - 32px);border-radius:18px;background:#fff;animation:pop .5s var(--spring) both}
.zoomov button{position:absolute;left:50%;translate:-50% 0;min-height:44px;padding:0 22px;border-radius:999px;border:0;background:#fff;color:#121833;font-weight:700;cursor:pointer}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;scale:.86}}

/* ---- 小さい画面 ---- */
@media (max-width:819px){
.gn>a{display:none}
.gyx{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.gypanel{grid-template-columns:1fr 1fr;padding:16px 12px;gap:10px 8px;border-radius:22px}
.gycol a{font-size:13.5px;padding:4px 8px;gap:8px}
.logo small{display:none}
.gy>summary{padding:0 12px;background:var(--ai-soft);color:var(--ai);font-weight:700}
}
@media (max-width:519px){.go{display:none}.cap{padding-right:8px}.gypanel{grid-template-columns:1fr}.gycol{display:grid;grid-template-columns:1fr 1fr;gap:0 6px}.gycol b{grid-column:1/-1}
.btn{width:100%}.stamp{width:62px;height:62px;font-size:13px}}

/* とても狭い画面(幅320など)でも、頭の帯のボタンがはみ出さないようにする */
@media (max-width:379px){:root{--gut:16px}.cap{gap:2px;padding-left:10px}.logo{gap:7px;min-width:0}.logo i{width:30px;height:30px;font-size:13px}.logo span{font-size:15px;overflow:hidden;text-overflow:ellipsis}.gy>summary{padding:0 10px;font-size:13.5px}.tgl{width:40px;height:40px}}
/* ---- 動き(動きを切る設定の人には出さない) ---- */
@media (prefers-reduced-motion:no-preference){
.aurora i:nth-child(1){animation:dr1 28s ease-in-out infinite alternate}
.aurora i:nth-child(2){animation:dr2 34s ease-in-out infinite alternate}
.aurora i:nth-child(3){animation:dr3 40s ease-in-out infinite alternate}
.view:not([hidden]) .stamp{animation:stamp .7s .55s var(--spring) both}
.view:not([hidden]) .hero-in>*{animation:up .8s var(--ease) both}
.view:not([hidden]) .hero-in>:nth-child(2){animation-delay:.07s}.view:not([hidden]) .hero-in>:nth-child(3){animation-delay:.14s}.view:not([hidden]) .hero-in>:nth-child(4){animation-delay:.21s}.view:not([hidden]) .hero-in>:nth-child(n+5){animation-delay:.28s}
.view:not([hidden]) .hero-art{animation:up 1s .2s var(--ease) both}
.view:not([hidden]) .svc li{animation:float 7s ease-in-out infinite alternate;animation-delay:calc(var(--k,0)*-1.7s)}
.btn.main:hover::before{animation:shine .9s var(--ease)}
.play::after{animation:ring 2.4s ease-out infinite}
.zk-engine::before{animation:spin 6s linear infinite}
.js .pre{transition:opacity .7s ease,translate .95s var(--ease);transition-delay:calc(var(--d,0)*55ms)}
.js .pre:not(.in){opacity:0;translate:0 22px}
.in>.ic,.in .b-ai .ic,.in .b-hu .ic,.view:not([hidden]) .artdisc .ic{stroke-dasharray:90;animation:draw 1.6s .15s var(--ease) both}
.fig2.in .hw{animation:up .5s both;animation-delay:calc(.15s + var(--i,0)*.22s)}
.fig2.in .zk-arrow{animation:nudge 1.8s var(--ease) infinite}
.fig2.in .xl tbody tr{animation:up .5s both;animation-delay:calc(.9s + var(--i,0)*.16s)}
.fig2.in .zk-engine{animation:up .6s .5s both}
.fig2.in .bx,.fig2.in .st,.fig2.in .fs,.task.in .bx{animation:up .6s both;animation-delay:calc(.1s + var(--i,0)*.28s)}
.fig2.in .ar,.task.in .ar{animation:fade .5s both;animation-delay:calc(.25s + var(--i,0)*.28s)}
.fig2.in .zk-svg rect{animation:bar .9s var(--ease) both;animation-delay:calc(.2s + var(--i,0)*.15s)}
.fig2.in .bub.dr{animation:bub .6s .7s var(--spring) both}
.fig2.in .send{animation:bub .5s 1.2s var(--spring) both}
.fig2.in .tl>li::before{animation:bub .5s var(--spring) both;animation-delay:calc(var(--i,0)*.22s)}
.fig2.in .tl>li::after{animation:line .5s ease-out both;animation-delay:calc(.15s + var(--i,0)*.22s)}
.fig2.in .mailw{animation:up .55s both;animation-delay:calc(.08s + var(--i,0)*.22s)}
.fig2.in .b-ai{animation:fromL .7s var(--ease) both}
.fig2.in .b-hu{animation:fromR .7s var(--ease) both}
.fig2.in .zk-stat b{animation:up .8s var(--ease) both}
.fig2.in .ox-y,.fig2.in .ox-n{animation:up .6s both}.fig2.in .ox-n{animation-delay:.18s}
html.vin .view:not([hidden]){animation:vin .5s var(--ease) both}
html.vin.back .view:not([hidden]){animation-name:vinb}
}
@keyframes float{to{transform:translateY(-9px)}}
@keyframes dr1{to{transform:translate3d(16%,12%,0) scale(1.15)}}
@keyframes dr2{to{transform:translate3d(-20%,16%,0) scale(.9)}}
@keyframes dr3{to{transform:translate3d(-12%,-18%,0) scale(1.2)}}
@keyframes stamp{from{opacity:0;scale:.4}}
@keyframes shine{to{translate:110% 0}}
@keyframes ring{from{opacity:.7;scale:1}to{opacity:0;scale:1.55}}
@keyframes spin{to{--ang:360deg}}
@keyframes draw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
@keyframes up{from{opacity:0;translate:0 14px}}
@keyframes nudge{50%{translate:5px 0}}
@keyframes bar{from{transform:scaleX(0)}}
@keyframes bub{from{opacity:0;scale:.6}}
@keyframes line{from{transform:scale(0)}}
@keyframes fromL{from{opacity:0;translate:-24px 0}}
@keyframes fromR{from{opacity:0;translate:24px 0}}
@keyframes vin{from{opacity:0;translate:0 18px}}
@keyframes vinb{from{opacity:0;translate:0 -14px}}

/* ---- ページの移り変わり(View Transitions) ---- */
::view-transition-group(hdr){z-index:5}
::view-transition-old(root){animation:.26s ease-in both vtOut}
::view-transition-new(root){animation:.5s var(--ease) both vtIn}
html[data-nav="back"]::view-transition-old(root){animation-name:vtOutB}
html[data-nav="back"]::view-transition-new(root){animation-name:vtInB}
@keyframes vtOut{to{opacity:0;translate:0 -18px}}
@keyframes vtIn{from{opacity:0;translate:0 26px}}
@keyframes vtOutB{to{opacity:0;translate:0 18px}}
@keyframes vtInB{from{opacity:0;translate:0 -26px}}
::view-transition-group(morph){animation-duration:.55s;animation-timing-function:var(--ease);z-index:4}
::view-transition-old(morph),::view-transition-new(morph){height:100%;width:100%;object-fit:cover;object-position:0 0;border-radius:20px;overflow:clip}
::view-transition-group(shot){animation-duration:.45s;animation-timing-function:var(--ease);z-index:99}
html[data-vt="theme"]::view-transition-old(root),html[data-vt="theme"]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-vt="theme"] .bar{view-transition-name:none}
html[data-vt="theme"]::view-transition-new(root){z-index:9}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* 案3(デザイン版)を、残りのページに広げるための足し分。記事の図・無料相談・動きの見本・会社概要の部品を、案3の色と字で描く。文と図の中身は元のまま。 */
:root{--y:var(--shu);--y-soft:var(--shu-soft);--y-ink:var(--on-btn);--sub:var(--ink2);--card:var(--glass2);--soft:var(--bg2);--font:var(--f-body);--serif:var(--f-disp);
--good:var(--ok);--good-soft:var(--ok-soft);--warn:var(--ki);--warn-soft:color-mix(in srgb,var(--ki) 14%,transparent);--bad:var(--ng);--bad-soft:var(--ng-soft);--info:var(--ai);--info-soft:var(--ai-soft)}
html{scroll-behavior:auto}
.nw{white-space:nowrap}
.sr{position:absolute;left:-999px}
.ph{background:var(--shu-soft);border-radius:4px;padding:0 4px;font-weight:700;color:var(--ink)}
h1.kp{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@supports (word-break:auto-phrase){h1.kp{word-break:auto-phrase;overflow-wrap:normal}}
/* 動きの見本の札 */
.cards{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;height:100%;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:translate .4s var(--ease),border-color .25s,scale .5s var(--spring)}
.card:hover{translate:0 -3px;border-color:var(--line2)}
.card:active{scale:.98}
.card b{font-size:1.1rem;line-height:1.5;text-wrap:balance}
.card span{color:var(--ink2);font-size:.93rem}
.card .more{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--ai);display:block;white-space:normal;line-height:1.6}
.pill{align-self:flex-start;background:var(--shu-soft);color:var(--ink);font-weight:700;font-size:.78rem;border-radius:999px;padding:2px 11px}
.vcard.soon{opacity:.75;border-style:dashed;cursor:default}
.vcard.soon .play{background:var(--ink3)}
/* 無料相談(6つの質問) */
.quiz{display:grid;gap:14px}
.quiz .go-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.quiz button{font:inherit;font-weight:700;cursor:pointer;min-height:52px;border-radius:16px;padding:12px 26px;border:0;background:linear-gradient(120deg,var(--btn1),var(--btn2));color:var(--on-btn);box-shadow:var(--shadow-btn);transition:scale .5s var(--spring)}
.quiz button:active{scale:.96}
.quiz button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.quiz .left{color:var(--ink2);font-size:.88rem}
.dots{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.dots li{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);background:transparent;transition:background-color .25s,scale .4s var(--spring)}
.dots li.on{background:var(--shu);border-color:var(--shu);scale:1.15}
.result{display:grid;gap:14px;min-width:0;background:var(--glass2);border:1px solid var(--line2);border-radius:var(--r);padding:22px 18px;scroll-margin-top:92px;box-shadow:var(--shadow)}
.result .verdict{display:inline-block;justify-self:start;font-weight:700;font-size:.85rem;border-radius:999px;padding:3px 13px;background:var(--shu-soft)}
.result .verdict.no{background:var(--bg2);color:var(--ink2)}
.result h3{font-size:1.3rem;font-weight:800;line-height:1.45}
.result p{color:var(--ink2)}
.result .box{background:var(--bg2);border-radius:var(--r-s);padding:12px 14px;display:grid;gap:6px;min-width:0}
.result .box b{color:var(--ink)}
.result pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .88rem/1.7 var(--f-body);color:var(--ink);background:var(--solid);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.result .copy{justify-self:start}
.result .next{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.result .next b{color:var(--ink);font-size:1.05rem}
/* 会社概要 */
.about h3{font-size:1.05rem;font-weight:800;margin:18px 0 6px}
.about p,.about li{color:var(--ink2)}
.about dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0}
.about dt{font-weight:700}
.about dd{margin:0;color:var(--ink2);overflow-wrap:anywhere}
/* 記事 */
.art{max-width:40em}
.art p{margin:0 0 1em}
.art ul{margin:0 0 1em;padding-left:1.4em;list-style:disc}
.art li{margin:4px 0}
.art h2{font-size:1.2rem;font-weight:800;margin:36px 0 12px;padding:8px 14px;border-left:5px solid var(--shu);background:var(--shu-soft);border-radius:0 12px 12px 0;text-wrap:balance}
.art h2:nth-of-type(4n+2){border-color:var(--ai);background:var(--ai-soft)}
.art h2:nth-of-type(4n+3){border-color:var(--ok);background:var(--ok-soft)}
.art h2:nth-of-type(4n+4){border-color:var(--ki);background:var(--warn-soft)}
.art .meta{color:var(--ink2);font-size:.85rem;margin-bottom:18px}
.art .fine{color:var(--ink2);font-size:.85rem;border-top:1px solid var(--line);padding-top:12px}
.art .vid{display:inline-block;margin:6px 0 18px;font-weight:700;color:var(--ai)}
.art .vid::before{content:"▶ ";color:var(--shu)}
.fig{margin:18px 0 24px;min-width:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;box-shadow:var(--shadow)}
.fig>b{display:block;font-size:.95rem;margin-bottom:10px}
.fig>b::before{content:"図 ";color:var(--ink3);font-weight:700}
.fig .note{color:var(--ink2);font-size:.8rem;margin:8px 0 0}
.t-neutral{background:var(--bg2);color:var(--ink)}
.t-accent{background:var(--shu-soft);color:var(--ink);border-color:var(--shu)!important}
.t-good{background:var(--ok-soft);color:var(--ink);border-color:var(--ok)!important}
.t-warn{background:var(--warn-soft);color:var(--ink);border-color:var(--ki)!important}
.t-bad{background:var(--ng-soft);color:var(--ink);border-color:var(--ng)!important}
.t-info{background:var(--ai-soft);color:var(--ink);border-color:var(--ai)!important}
.flow{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.flow .n{border:2px solid var(--line);border-radius:14px;padding:10px 12px;font-weight:700;line-height:1.45;min-width:0;text-align:center;overflow-wrap:anywhere}
.flow .n small{display:block;font-weight:500;color:var(--ink2);font-size:.8rem}
.flow .n big{display:block;font-size:1.6rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.flow .arrow{display:grid;place-items:center;color:var(--ink3);font-weight:800;font-size:1.3rem}
.flow .arrow::before{content:"↓"}
.flow .ends{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}.flow .arrow::before{content:"→"}.flow .ends{grid-template-columns:minmax(0,1fr)}}
.bars{display:grid;gap:10px}
.bars .row{display:grid;grid-template-columns:minmax(6em,30%) minmax(0,1fr);gap:10px;align-items:center;font-size:.92rem}
.bars .row span{font-weight:700;min-width:0;overflow-wrap:anywhere}
.bars .bar{height:30px;border-radius:9px;display:flex;align-items:center;padding:0 6px;font-weight:800;min-width:5.2em;max-width:100%;box-sizing:border-box;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bars .bar.b-good{background:var(--ok);color:#fff}
.bars .bar.b-warn{background:var(--ki);color:#fff}
.bars .bar.b-bad{background:var(--ng);color:#fff}
.bars .bar.b-info{background:var(--ai);color:#fff}
.bars .bar.b-accent{background:linear-gradient(120deg,var(--btn1),var(--btn2));color:var(--on-btn)}
.bars .bar.b-neutral{background:var(--line2);color:var(--ink)}
:root[data-ae="dark"] .bars .bar.b-good,:root[data-ae="dark"] .bars .bar.b-warn,:root[data-ae="dark"] .bars .bar.b-bad,:root[data-ae="dark"] .bars .bar.b-info{color:#0b0e20}
.steps2{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:st}
.steps2 li{counter-increment:st;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start}
.steps2 li::before{content:counter(st);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ai);color:#fff;font-weight:800}
.steps2 li:nth-child(2)::before{background:linear-gradient(135deg,var(--btn1),var(--btn2));color:var(--on-btn)}
.steps2 li:nth-child(3)::before{background:var(--ok)}
.steps2 li:nth-child(4)::before{background:var(--ki)}
.steps2 b{display:block}
.steps2 span{color:var(--ink2);font-size:.9rem}
.art-list{display:grid;gap:12px}
.art-list a{display:grid;gap:4px;min-width:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;text-decoration:none;box-shadow:var(--shadow);transition:translate .4s var(--ease),border-color .25s}
.art-list a:hover{border-color:var(--line2);translate:0 -3px}
.art-list b{font-size:1.05rem;line-height:1.5}
.art-list span{color:var(--ink2);font-size:.9rem}
.art-list small{color:var(--ink3);font-size:.8rem}
.who{display:grid;gap:14px;align-items:center;min-width:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:18px;grid-template-columns:auto minmax(0,1fr)}
.who .icon{flex:none;width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--btn1),var(--btn2));display:grid;place-items:center;color:var(--on-btn);font-weight:800;line-height:1.05;text-align:center;font-size:1.05rem}
.who .icon small{display:block;color:var(--on-btn);font-size:.55rem}
.who p{color:var(--ink2);font-size:.95rem}
.who a{font-weight:700;color:var(--ai)}
.prep{background:var(--bg2);border-radius:var(--r-s);padding:10px 14px;margin:8px 0;font-size:.93rem}
.prep b{display:inline-block;background:var(--shu-soft);border-radius:999px;padding:0 10px;font-size:.78rem;margin-right:6px}
.money.ref{padding:14px}
.money.ref .tiles{gap:8px}
.money.ref .tile{padding:8px 10px}
.money.ref .tile b{font-size:1rem}
.money.ref .refnote{font-weight:700;color:var(--ink);font-size:.9rem}
.art .fig,.art .who{max-width:100%}
/* 本文の幅が狭い所での折り返し */
.fig *,.card *,.result *,.who *,.art-list *{overflow-wrap:anywhere;min-width:0}
@media (max-width:420px){.card{padding:16px}.fig{padding:12px}.bars .row{grid-template-columns:minmax(5em,34%) minmax(0,1fr)}}
/* ページからページへの移り変わり(対応しているブラウザだけ・動きを切る設定では出さない) */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}.bar{view-transition-name:hdr}}
body{position:relative}
/* 5つの段の流れ(3つのものは案3の元の形) */
@media (min-width:760px){.fl:not(.f3){grid-template-columns:repeat(4,minmax(0,1fr) auto) minmax(0,1fr)}}

/* 運送ページの動画(yt-lite.js で押した時だけ読み込む) */
.movie{display:grid;gap:8px;margin:4px 0;max-width:44em}
.yt-lite,.yt-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-s);overflow:hidden;background:#121833}
.yt-lite{position:relative;color:#fff;text-decoration:none;box-shadow:var(--shadow)}
.yt-lite:focus-visible{outline:3px solid var(--btn1);outline-offset:3px}
.yt-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:68px;height:48px;border-radius:14px;background:#e00}
.yt-play::before{content:"";position:absolute;left:50%;top:50%;translate:-35% -50%;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt-t{position:absolute;left:14px;right:14px;bottom:12px;font-size:.85rem;line-height:1.6;font-weight:700}
.movie figcaption{font-size:.8rem;line-height:1.75;color:var(--ink2)}

/* ===== 磨き上げ(2026-11-14 会長「いい感じにして」) 文言は触らず、余白・幅・区切り・手触りだけを整える ===== */
:root{--gut:clamp(20px,5vw,40px);--r-m:16px;--sec:clamp(56px,8vw,104px);
--shadow-sm:0 1px 2px rgba(18,24,51,.04),0 8px 22px -14px rgba(18,24,51,.16)}
:root[data-ae="dark"]{--shadow-sm:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px -16px rgba(0,0,0,.6)}
/* ブラウザ既定の外枠8pxを消す(左右の縁が揃わず、題の光が額縁のように切れていた) */
html,body{margin:0}

/* 本文: 段の上下の余白を一つの値に揃え、段を1つおきに淡い帯で区切る */
main.wrap{gap:0;padding-block:clamp(8px,2vw,24px) 0}
main.wrap>section{gap:24px;padding-block:var(--sec)}
main.wrap>section:first-child{padding-top:clamp(28px,5vw,64px)}
main.wrap>section:nth-of-type(even){border-image:linear-gradient(var(--bg2) 0 0) fill 0/0/0 100vw}
.h2{margin-bottom:2px}
.h2+p,.h2+.sub-lead{margin-top:-6px}
main p,.lead{line-height:1.9}
.sub-lead{line-height:1.85}

/* 札の角丸と影を3段(20/16/12)に揃え、置いた時から少し浮かせる */
.tcard,.vcard,.pains li,.pain3>div,.card,.art-list a,.faq details,.relv details,.result{border-radius:var(--r)}
.gcard,.bx,.fs,.human,.tbl,.oxcol>div,.ask4 li,.mailw,.who,.st{border-radius:var(--r-m)}
.fig2{border-radius:24px}.box{border-radius:28px}
.tcard,.gcard,.vcard,.pains li,.pain3>div,.card,.art-list a,.faq details,.relv details,.task{box-shadow:var(--shadow-sm);background:var(--glass2)}
.tcard{padding:28px 26px 24px;gap:12px}
.tiles4,.vcards,.cards,.pain3{gap:16px}
.gcards{gap:12px}
.gwrap>div{padding-block:26px}
.gcard{min-height:72px}
/* 指で押した時の手触り(マウスの無い端末) */
@media (hover:none){
.gcard:active,.tcard:active,.vcard:active,.card:active,.art-list a:active{background:var(--solid);border-color:var(--line2)}
.pains li:active{scale:.98;border-color:var(--line2)}
.pains li{transition:translate .4s var(--ease),scale .5s var(--spring),border-color .3s}}

/* ボタン: 押せる所はどれも44px以上に */
.go{min-height:44px}
.copy{min-height:44px;padding:0 16px}
.fn a,footer a{min-height:44px}
@media (hover:hover) and (pointer:fine){.fn a,footer a{min-height:34px}}
.fn>div{gap:0}
.btns{gap:14px}
.btn{min-height:62px;padding:10px 48px 10px 26px;border-radius:var(--r-m)}
.btn.main{box-shadow:var(--shadow-btn),0 2px 0 rgba(255,255,255,.25) inset}
.btn.main:hover{box-shadow:0 16px 34px -12px rgba(201,58,30,.7),0 2px 0 rgba(255,255,255,.25) inset}
.quiz button{min-height:56px;border-radius:var(--r-m)}

/* 題の所: 見出しと引きの間を少し開け、押す所までの流れを整える */
.hero-in{gap:24px}
.hero-in>.btns{margin-top:6px}
.lead{max-width:34em}
@supports (word-break:auto-phrase){.mh b,.fs b{word-break:auto-phrase}}

/* 表(特商法・料金など): 行間と余白を広げ、見出しの列を落ち着いた色に */
.tbl{box-shadow:var(--shadow-sm)}
.tbl table{font-size:.93rem;line-height:1.85}
.tbl th,.tbl td{padding:16px 20px}
.tbl tr:first-child>th,.tbl tr:first-child>td{border-top:0}
.tbl tr:not(.hd)>th{color:var(--ink);white-space:nowrap;width:1%;background:color-mix(in srgb,var(--bg2) 55%,transparent)}
@media (max-width:719px){
.tbl th,.tbl tr:not(.hd)>th{display:block;width:auto;white-space:normal;background:none;padding:0 0 4px;border:0;font-size:.8rem;letter-spacing:.04em;color:var(--ink3)}
.tbl tr{padding:16px 18px}
.tbl tr:nth-child(2){border-top:1px solid var(--line)}
.tbl tr:first-child,.tbl tr.hd+tr{border-top:0}
.tbl td{padding:0}
.tbl td+td{padding-top:8px}}

/* 会社概要の項目表: 罫線で行を区切る。スマホでは項目名を上に置いて、右側が細く折れないようにする */
.about dl{gap:0 24px;border-top:1px solid var(--line);max-width:46em}
.about dt,.about dd{padding:14px 0;border-bottom:1px solid var(--line)}
.about dd{line-height:1.85}
@media (max-width:599px){.about dl{grid-template-columns:minmax(0,1fr)}.about dt{border-bottom:0;padding:14px 0 0;font-size:.85rem;color:var(--ink3)}.about dd{padding:2px 0 14px}}

/* 【】(決まり次第入れる所)の印: 電話画面の部品と名前が重なり、黒い太枠の箱になっていたのを直す */
span.ph{display:inline;width:auto;border:0;box-shadow:none;overflow:visible;font-size:inherit;line-height:inherit;padding:1px 6px;border-radius:6px}

/* 開く所・図・動画 */
.faq{gap:12px}
.faq summary,.relv summary{padding:18px 56px 18px 22px}
.faq details p{padding:0 22px 20px;line-height:1.85}
.movie{gap:10px;margin:8px 0}
.yt-lite,.yt-frame{border-radius:var(--r-m)}

/* しめくくりと足元 */
.box{gap:22px}
footer{padding-block:48px 64px}
@media (max-width:519px){.btn{min-height:60px}}

/* 無料相談(6つの質問): 選択肢を1つずつの押しやすい札にする(元は字が横に詰まって並び、丸が小さく押しにくかった) */
.quiz fieldset.q{margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--r);background:var(--glass2);box-shadow:var(--shadow-sm);padding:18px 16px 16px}
.quiz fieldset.q legend{float:left;width:100%;padding:0 4px 12px;font-weight:700;font-size:1.05rem;line-height:1.6}
.quiz fieldset.q legend small{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--shu)}
.quiz .opts{clear:both;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.quiz .opts label{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--solid);line-height:1.55;font-size:.95rem;cursor:pointer;transition:border-color .2s,background-color .2s,scale .4s var(--spring)}
.quiz .opts label:hover{border-color:var(--line2)}
.quiz .opts label:active{scale:.98}
.quiz .opts input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--shu)}
.quiz .opts label:has(input:checked){border-color:var(--shu);background:var(--shu-soft);font-weight:700}
/* 結果の値段の札 */
.tiles{display:grid;gap:10px}
.tile{display:grid;gap:2px;padding:14px 16px;border-radius:12px;background:var(--solid);border:1px solid var(--line)}
.tile small{color:var(--ink2);font-size:.78rem;line-height:1.6}
.tile b{font-family:var(--f-disp);font-weight:800;color:var(--shu);line-height:1.4}