/* Dela Gothic One の「が」は濁点が「か」の点と一体化して「か」に見えるため、が だけ太いゴシックで描く */
@font-face{font-family:"GaFix";src:local("HiraginoSans-W9"),local("Hiragino Sans W9"),local("HiraginoSans-W8"),local("NotoSansCJKjp-Black"),local("Noto Sans CJK JP Black"),local("NotoSansJP-Black"),local("YuGothic-Bold"),local("Yu Gothic Bold");unicode-range:U+304C;font-weight:100 900}
/* しゃらく 2026-10 rebuild : 浮世絵ポップ × スマホファースト */
:root{
  --y:#FFE500;--y2:#FFF27A;--cream:#FFF6D9;--r:#E60012;--r2:#FF3B30;--b:#1F62D8;--bd:#123F97;--k:#141414;--w:#fff;--line:#06C755;
  --bg:#FFFDF5;--card:#fff;--ink:#141414;--sub:#4a4a4a;--rule:#141414;--soft:#FFF6D9;
  --f-jp:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;--f-disp:"GaFix","Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;--f-en:"Bangers","Dela Gothic One",sans-serif;
  --wrap:min(1120px,100% - 32px);--rad:18px;--sh:6px 6px 0 var(--k);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121212;--card:#1d1d1d;--ink:#f3f3f3;--sub:#c7c7c7;--rule:#f3f3f3;--soft:#26231a}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kick{color:#FF5C66}}
:root[data-theme="dark"]{--bg:#121212;--card:#1d1d1d;--ink:#f3f3f3;--sub:#c7c7c7;--rule:#f3f3f3;--soft:#26231a}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.8 var(--f-jp);overflow-x:hidden;font-feature-settings:"palt"}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.3;margin:0;text-wrap:balance}
p,dd,li{text-wrap:pretty}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--y);color:var(--k);padding:8px 14px;font-weight:900;border:3px solid var(--k)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--b);outline-offset:3px}
.wrap{width:var(--wrap);margin-inline:auto}

/* 背景パターン */
.rays-b{background:repeating-conic-gradient(from 0deg at 30% 55%,var(--b) 0 5deg,var(--bd) 5deg 10deg)}
.rays-y{background:repeating-conic-gradient(from 0deg at 50% 45%,var(--y) 0 5deg,var(--y2) 5deg 10deg)}
.rays-r{background:repeating-conic-gradient(from 0deg at 50% 50%,var(--r) 0 5deg,var(--r2) 5deg 10deg)}
.dots{background-color:var(--soft);background-image:radial-gradient(rgba(230,0,18,.16) 2px,transparent 2.4px);background-size:14px 14px}

/* ヘッダー */
.prep{background:var(--k);color:var(--y);text-align:center;font-weight:900;font-size:.8rem;text-wrap:balance;padding:6px 12px;letter-spacing:.04em}
.hd{position:sticky;top:0;z-index:50;background:var(--y);border-bottom:3px solid var(--k)}
.hd .wrap{display:flex;align-items:center;gap:10px;height:56px}
.logo{display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--k);font:400 1.3rem/1 var(--f-disp);flex:none}
.logo img{width:32px;height:32px;border-radius:6px}
.nav{margin-left:auto;display:flex;gap:4px;white-space:nowrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--k);text-decoration:none;font-weight:900;font-size:.82rem;padding:0 9px;border-radius:999px}
@media (max-width:359px){.nav a{padding:0 6px;font-size:.78rem}}
.nav a:hover,.nav a[aria-current]{background:var(--k);color:var(--y)}
.nav .hd-cta{display:none}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--line);color:var(--k);text-decoration:none;font-weight:900;font-size:1.08rem;padding:15px 26px;border-radius:999px;border:3px solid var(--k);box-shadow:4px 4px 0 var(--k);transition:transform .12s,box-shadow .12s;min-height:56px}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--k)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn svg{width:24px;height:24px;flex:none}
.note{font-size:.78rem;font-weight:700;margin-top:10px}

/* 見出し */
.ttl{font:400 clamp(1.55rem,6.4vw,2.5rem)/1.35 var(--f-disp);margin:0 0 18px}
.ttl b{display:inline;background:var(--k);color:var(--y);padding:0 .25em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:400;text-shadow:2px 2px 0 var(--r)}
.kick{display:inline-block;font:400 1.05rem/1 var(--f-en);letter-spacing:.08em;color:var(--r);margin-bottom:8px}
.sec{padding:64px 0;position:relative}

/* ヒーロー */
.hero{position:relative;overflow:hidden;color:#fff;border-bottom:4px solid var(--k);min-height:min(640px,calc(100svh - 90px))}
.hero .wrap{position:relative;z-index:2;padding:30px 0 210px}
.hero-k{display:inline-block;background:var(--r);color:#fff;font-weight:900;font-size:.86rem;padding:4px 12px;border:2px solid var(--k);transform:rotate(-2deg);margin-bottom:14px}
.hero h1{font:400 clamp(2rem,9.5vw,4.6rem)/1.28 var(--f-disp);margin:0 0 16px}
.hero h1 span{display:inline-block;background:var(--k);color:var(--y);padding:.04em .28em;transform:skewX(-8deg);text-shadow:4px 4px 0 var(--r);margin-bottom:.12em}
.hero .sub{font-weight:900;font-size:clamp(1rem,4.2vw,1.25rem);line-height:1.6;max-width:23em;text-shadow:0 2px 0 var(--bd),2px 0 0 var(--bd),-2px 0 0 var(--bd),0 -2px 0 var(--bd);margin-bottom:20px}
.hero .note{color:#fff;text-shadow:0 1px 0 var(--bd)}
.hero-img{position:absolute;z-index:1;right:-6px;bottom:-8px;width:min(60vw,300px)}
@media (min-width:900px){
  .hero{min-height:620px}
  .hero .wrap{padding:84px 0 90px 46%}
  .hero h1{font-size:clamp(2.4rem,4.2vw,3.6rem)}
  .hero h1 span{white-space:nowrap}
  .hero-img{left:max(-10px,calc(50% - 600px));right:auto;width:auto;height:calc(100% - 24px);max-height:640px;bottom:0;object-fit:contain;object-position:left bottom}
}

/* 固定CTAバー（スマホ） */
.fix{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--y);border-top:3px solid var(--k);padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s}
.fix.show{transform:none}
.fix .btn{width:100%;font-size:1rem;padding:11px;min-height:50px}
@media (min-width:900px){.fix{display:none}.nav .hd-cta{display:inline-flex;background:var(--line);color:var(--k);border:2px solid var(--k);margin-left:6px}}
body.has-fix{padding-bottom:76px}
@media (min-width:900px){body.has-fix{padding-bottom:0}}

/* 共感 */
.pain{background:var(--soft)}
.pain-grid{display:grid;gap:26px;align-items:center}
.pain-img{width:min(78%,330px);margin:0 auto;filter:drop-shadow(6px 6px 0 var(--k))}
.bubbles{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bubbles li{position:relative;background:var(--card);border:3px solid var(--k);border-radius:22px;padding:12px 16px;font-weight:900;box-shadow:4px 4px 0 var(--k)}
.bubbles li small{display:block;font-weight:500;font-size:.85rem;color:var(--sub)}
.bubbles li:nth-child(odd){margin-right:10%}
.bubbles li:nth-child(even){margin-left:10%}
.punch{margin-top:30px;background:var(--r);color:#fff;text-align:center;font:400 clamp(1.25rem,5.6vw,2rem)/1.5 var(--f-disp);padding:18px 14px;border:3px solid var(--k);box-shadow:var(--sh);transform:rotate(-1deg)}
.punch em{font-style:normal;color:var(--y)}
@media (min-width:900px){.pain-grid{grid-template-columns:5fr 7fr}.bubbles{gap:22px}.bubbles li{font-size:1.2rem;padding:18px 24px}.bubbles li small{font-size:.95rem;margin-top:4px}}

/* ビフォーアフター */
.yon{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yon li{position:relative;border:3px solid var(--k);background:#fff;overflow:hidden}
.yon li span{position:absolute;left:6px;top:6px;background:var(--k);color:var(--y);font:400 .95rem/1 var(--f-en);padding:4px 7px}
.yon li p{position:absolute;left:8px;right:8px;bottom:8px;margin:0;background:#fff;color:var(--k);border:2px solid var(--k);border-radius:12px;font-weight:900;font-size:clamp(.75rem,3vw,.92rem);line-height:1.4;padding:4px 8px;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:900px){.yon{grid-template-columns:repeat(4,1fr)}}
.ba{display:grid;gap:16px}
.ba-col{border:3px solid var(--k);border-radius:var(--rad);padding:18px;background:var(--card);box-shadow:var(--sh)}
.ba-col h3{font:400 1.1rem/1.3 var(--f-disp);margin-bottom:12px}
.ba-col.after{background:var(--y);color:var(--k)}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flow li{display:flex;align-items:center;font-weight:900;font-size:.9rem}
.flow li b{border:2px solid var(--k);border-radius:10px;padding:5px 10px;background:var(--card);color:var(--ink)}
.ba-col.after .flow li b{background:#fff;color:var(--k)}
.flow li+li::before{content:"→";margin-right:6px;color:var(--r);font-weight:900}
.ba small{display:block;margin-top:10px;font-size:.8rem}
@media (min-width:900px){.ba{grid-template-columns:1fr 1fr}}

/* 3ステップ */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;counter-reset:s}
.step{display:grid;gap:16px;align-items:center;border:3px solid var(--k);border-radius:var(--rad);background:var(--card);padding:20px;box-shadow:var(--sh);position:relative}
.step-n{position:absolute;top:-18px;left:16px;background:var(--r);color:#fff;border:3px solid var(--k);font:400 1.3rem/1 var(--f-en);padding:6px 12px;letter-spacing:.06em}
.step h3{font:400 1.25rem/1.4 var(--f-disp);margin:8px 0 6px}
.step p{margin:0;color:var(--sub)}
.step-v{display:flex;justify-content:center}
.step-v img{max-height:240px;width:auto;border:3px solid var(--k);border-radius:14px;background:#fff}
.step-v .face{border:none;border-radius:0;max-height:180px}
.qr-mock{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--line);color:var(--k);border:3px solid var(--k);border-radius:16px;padding:16px 20px;font-weight:900;text-align:center}
.qr-mock b{font:400 1.4rem/1 var(--f-en);letter-spacing:.05em}
.qs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:300px}
.qs span{background:var(--soft);border:2px solid var(--k);border-radius:10px;padding:2px 9px;font-size:.82rem;font-weight:700}
.qs span.skip-t{background:var(--y);color:var(--k)}
@media (min-width:900px){
  .step{grid-template-columns:1fr 1fr;padding:30px}
  .step:nth-child(even) .step-v{order:-1}
  .steps{gap:40px}
}

/* 機能：デモ */
.feat-grid{display:grid;gap:30px}
@media (min-width:900px){.feat-grid{grid-template-columns:360px 1fr;align-items:start}.demo-col{position:sticky;top:90px}}
.demo-tag{display:block;width:max-content;margin:0 auto 10px;background:var(--r);color:#fff;border:2px solid var(--k);font-weight:900;font-size:.8rem;padding:3px 12px}
.phone{width:min(100%,330px);margin:0 auto;background:var(--k);border-radius:40px;padding:10px;box-shadow:10px 12px 0 rgba(0,0,0,.28)}
.screen{border-radius:31px;overflow:hidden;background:#EEF0F6;color:var(--k);display:flex;flex-direction:column}
.screen-top{background:#fff;padding:10px 14px;font-weight:900;font-size:.88rem;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e6e6e6}
.screen-top img{width:28px;height:28px;border-radius:50%;background:var(--y)}
.chat-wrap{display:grid;position:relative}
.chat-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(transparent,#EEF0F6);pointer-events:none}
.chat{padding:12px;display:flex;flex-direction:column;gap:9px;font-size:.8rem;line-height:1.62;height:360px;overflow-y:auto;overscroll-behavior:contain}
.msg{max-width:86%;padding:8px 11px;border-radius:16px;background:#fff;white-space:pre-line}
.msg.me{align-self:flex-end;background:#B9EBAA;border-top-right-radius:5px}
.msg.bot{border-top-left-radius:5px}
.msg.diary{border:3px solid var(--r)}
.msg.title{font-weight:700}
.wc-row{display:flex;flex-wrap:wrap;gap:4px;max-width:92%}
.wc{background:#fff;border:1px solid #d5dbe3;border-radius:999px;padding:1px 9px;white-space:nowrap;font-size:.75rem}
.wc.on{background:#e8f8ee;border-color:#06c755;color:#0a7a3a;font-weight:700}
.wcopy{align-self:flex-start;margin-top:-3px;background:rgba(255,255,255,.9);color:#1f2d3d;border-radius:999px;padding:0 10px;font-size:.75rem}
[data-demo]{grid-area:1/1;opacity:0;visibility:hidden}
.demo input{position:absolute;opacity:0;pointer-events:none}
#d-omakase:checked~.screen [data-demo=omakase],#d-shukkin:checked~.screen [data-demo=shukkin],#d-akiwaku:checked~.screen [data-demo=akiwaku],#d-orei:checked~.screen [data-demo=orei],#d-taikin:checked~.screen [data-demo=taikin],#d-jiyuu:checked~.screen [data-demo=jiyuu]{opacity:1;visibility:visible}
.kbar{position:relative;flex:none;background:#fff;border-top:1px solid #e6e9ee;line-height:1.4}
.kchips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px 6px}
.kc{display:block;text-align:center;background:#fff;color:var(--k);border:2px solid rgba(17,17,17,.5);border-radius:999px;padding:0;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;cursor:pointer;white-space:nowrap}
#d-omakase:checked~.screen [for=d-omakase],#d-shukkin:checked~.screen [for=d-shukkin],#d-akiwaku:checked~.screen [for=d-akiwaku],#d-orei:checked~.screen [for=d-orei],#d-taikin:checked~.screen [for=d-taikin],#d-jiyuu:checked~.screen [for=d-jiyuu]{background:var(--k);color:var(--y);border-color:var(--k)}
.demo input:focus-visible~.screen .kchips{outline:3px solid var(--b);outline-offset:-3px}
.inbar{display:flex;gap:6px;align-items:center;padding:0 10px 9px}
.inbar .in{flex:1;background:#f1f3f6;border-radius:999px;padding:3px 12px;color:#525a64;font-size:.75rem}
.inbar .snd{background:#c9d1db;color:#2b3138;border-radius:999px;padding:3px 12px;font-weight:700;font-size:.75rem}
.demo-cap{text-align:center;font-size:.78rem;font-weight:700;margin-top:12px;color:var(--sub)}

/* ベントー */
.bento{display:grid;gap:14px}
.bx{border:3px solid var(--k);border-radius:var(--rad);padding:18px;background:var(--card);box-shadow:4px 4px 0 var(--k)}
.bx h3{font:400 1.08rem/1.4 var(--f-disp);margin-bottom:6px}
.bx p{margin:0;font-size:.92rem;color:var(--sub)}
.bx.a{background:var(--y);color:var(--k)}.bx.a p{color:#333}
.bx.d{background:var(--b);color:#fff}.bx.d p{color:#e6eeff}
.bx.e{background:var(--r);color:#fff}.bx.e p{color:#ffe7e7}
.big{font:400 2.6rem/1 var(--f-disp);color:var(--r);text-shadow:2px 2px 0 var(--k);margin-right:3px;letter-spacing:.02em}.nw{white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.chips li{background:#fff;color:var(--k);border:2px solid var(--k);border-radius:10px;padding:2px 10px;font-weight:900;font-size:.85rem}
.lv{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 10px;align-items:center}
.lv li{display:contents;font-size:.85rem;font-weight:700}
.lv span{font-size:.85rem;font-weight:700;white-space:nowrap}
.lv i{display:block;width:var(--w);height:12px;background:var(--y);border:2px solid var(--k);border-radius:4px}
@media (min-width:900px){.bento{grid-template-columns:repeat(3,1fr);grid-template-areas:"a a b" "c d d" "e f f"}.bx.a{grid-area:a}.bx.b{grid-area:b}.bx.c{grid-area:c}.bx.d{grid-area:d}.bx.e{grid-area:e}.bx.f{grid-area:f}}

/* 料金 */
.price{border-top:4px solid var(--k);border-bottom:4px solid var(--k);color:var(--k)}
.price-box{background:#fff;border:4px solid var(--k);border-radius:24px;box-shadow:8px 8px 0 var(--k);padding:26px 20px;display:grid;gap:18px;align-items:center;position:relative}
.burst{display:grid;place-items:center;width:200px;height:200px;margin:0 auto;background:var(--r);color:#fff;text-align:center;font:400 1.15rem/1.35 var(--f-disp);clip-path:polygon(50% 0,61% 13%,77% 5%,79% 22%,96% 24%,88% 39%,100% 50%,88% 61%,96% 76%,79% 78%,77% 95%,61% 87%,50% 100%,39% 87%,23% 95%,21% 78%,4% 76%,12% 61%,0 50%,12% 39%,4% 24%,21% 22%,23% 5%,39% 13%);padding:30px}
.burst b{display:block;font:400 3rem/1 var(--f-en);color:var(--y);text-shadow:3px 3px 0 var(--k)}
.price-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.price-list li{display:flex;gap:10px;align-items:baseline;border-bottom:2px dashed #bbb;padding-bottom:8px;font-weight:700}
.price-list li b{flex:none;min-width:7.5em;font-weight:900}
.price-man{width:120px;margin:0 auto;filter:drop-shadow(4px 4px 0 var(--k))}
@media (min-width:900px){.price-box{grid-template-columns:auto 1fr auto;padding:36px}.price-man{width:160px}}

/* FAQ */
.faq{margin:0;display:grid;gap:12px}
.faq>div{border:3px solid var(--k);border-radius:var(--rad);background:var(--card);overflow:hidden}
.faq dt{background:var(--k);color:var(--y);font-weight:900;padding:10px 16px 10px 46px;position:relative}
.faq dt::before{content:"Q";position:absolute;left:14px;top:8px;font:400 1.3rem/1.2 var(--f-en);color:var(--r2)}
.faq dd{margin:0;padding:12px 16px 14px 46px;position:relative}
.faq dd::before{content:"A";position:absolute;left:15px;top:10px;font:400 1.3rem/1.2 var(--f-en);color:var(--b)}
@media (min-width:900px){.faq{grid-template-columns:1fr 1fr}}

/* 運営者 */
.org{display:grid;gap:14px;border:3px solid var(--k);border-radius:var(--rad);padding:20px;background:var(--card)}
.org dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.org dt{font-weight:900}.org dd{margin:0}
.caution{font-size:.82rem;color:var(--sub);margin-top:24px;padding-left:1.2em}
.caution li{margin-bottom:4px}

/* 最終CTA */
.final{color:#fff;text-align:center;border-top:4px solid var(--k);overflow:hidden}
.final img{width:auto;height:min(440px,62vw + 160px);margin:0 auto 14px;filter:drop-shadow(6px 6px 0 var(--k))}
.final h2{font:400 clamp(1.5rem,6.6vw,2.6rem)/1.4 var(--f-disp);text-shadow:3px 3px 0 var(--k);margin-bottom:22px}
.final .note{text-shadow:0 1px 0 var(--k)}

/* フッター */
.ft{background:var(--k);color:#eee;padding:34px 0 30px;font-size:.84rem}
.ft a{color:#fff}
.ft-links{display:flex;flex-wrap:wrap;gap:0 18px;list-style:none;margin:0 0 14px;padding:0}
.ft-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px}
.ft small{display:block;color:#bbb;margin-top:6px;font-size:.78rem}

/* 記事・下層ページ */
.page{padding:22px 0 50px}
.art{width:min(760px,100% - 32px);margin-inline:auto}
.crumb{font-size:.78rem;margin:14px 0 10px;color:var(--sub)}
.crumb a{color:var(--sub);display:inline-block;padding:12px 6px;margin:0 -6px}
.eye{border:3px solid var(--k);border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh);margin:0 0 20px;background:var(--y)}
.eye img{width:100%;aspect-ratio:3/2;object-fit:cover}
.eye.chara{display:flex;justify-content:center;align-items:flex-end;padding-top:18px;background:var(--b) repeating-conic-gradient(from 0deg at 50% 60%,var(--b) 0 5deg,var(--bd) 5deg 10deg)}
.eye.chara img{height:380px;margin-bottom:-34px;width:auto;max-width:100%;aspect-ratio:480/711;object-fit:contain}
.art h1{font:400 clamp(1.45rem,6vw,2.2rem)/1.45 var(--f-disp);margin:0 0 14px}
.art h2{font:400 1.25rem/1.45 var(--f-disp);margin:34px 0 12px;padding:6px 12px;background:var(--k);color:var(--y);border-left:8px solid var(--r);border-radius:4px}
.art h3{font-size:1.06rem;margin:22px 0 8px}
.art .lead{font-weight:700;font-size:1.04rem;border-left:5px solid var(--y);padding-left:12px}
.art ul,.art ol{padding-left:1.4em}
.art ul.cards{padding:0}
.art .cards li{margin:0}
.art li{margin-bottom:5px}
.art a:not(.btn){color:var(--b);font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art a:not(.btn){color:#8db4ff}}
:root[data-theme="dark"] .art a:not(.btn){color:#8db4ff}
.art .cards a{color:var(--ink);font-weight:inherit}
.pts{border:3px solid var(--k);border-radius:var(--rad);background:var(--soft);padding:16px;margin:20px 0}
.pts>b{display:block;font:400 1rem/1.3 var(--f-disp);margin-bottom:10px}
.pts ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:p}
.pts li{counter-increment:p;display:flex;gap:10px;align-items:center;background:var(--card);border:2px solid var(--k);border-radius:12px;padding:8px 12px;font-weight:700;margin:0;position:relative}
.pts li::before{content:counter(p);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--r);color:#fff;font:400 1rem/1 var(--f-en)}
.pts li+li::after{content:"";position:absolute;left:24px;top:-10px;width:3px;height:10px;background:var(--k)}
@media (min-width:700px){.pts ol{grid-template-columns:repeat(var(--n,3),1fr)}.pts li{flex-direction:column;text-align:center}.pts li+li::after{left:-10px;top:50%;width:10px;height:3px}}
.ex{position:relative;background:#fff;color:#141414;border:3px solid var(--r);border-radius:18px 18px 18px 4px;padding:14px 16px 14px;margin:14px 0 20px;box-shadow:4px 4px 0 var(--k);font-size:.95rem}
.ex::before{content:"例文";position:absolute;top:-12px;left:12px;background:var(--r);color:#fff;font-weight:900;font-size:.78rem;padding:1px 10px;border-radius:999px}
.cta-box{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:40px 0 0;border:3px solid var(--k);border-radius:var(--rad);background:var(--y);color:var(--k);padding:18px;box-shadow:var(--sh)}
.cta-box img{width:80px;height:80px;border-radius:50%;border:3px solid var(--k);background:#fff}
.cta-box b{font:400 1.1rem/1.45 var(--f-disp);display:block;margin-bottom:4px}
.cta-box p{margin:0;font-size:.88rem}
.cta-box .btn{grid-column:1/-1;width:100%}
.related{margin-top:34px}
.related h2{margin-top:0}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cards a{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--ink);border:3px solid var(--k);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:4px 4px 0 var(--k);transition:transform .12s}
.cards a:hover{transform:translate(-2px,-2px)}
.cards img{width:120px;height:80px;align-self:center;margin-left:10px;border:2px solid var(--k);border-radius:8px}
.cards span{padding:10px 10px 10px 0;font-weight:900;font-size:.9rem;line-height:1.5}
.cards small{display:block;font-weight:500;color:var(--sub);font-size:.78rem;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){.cards.g3{grid-template-columns:repeat(3,1fr)}.cards.g3 a{grid-template-columns:1fr}.cards.g3 img{width:100%;height:auto;margin:0;border:none;border-radius:0;border-bottom:3px solid var(--k)}.cards.g3 span{padding:10px 14px 14px}.cards.g3 li{display:grid}.cards.g3 a{align-content:start}.cards.g3 li:first-child{grid-column:1/-1}.cards.g3 li:first-child a{grid-template-columns:1fr 1fr;align-content:stretch;align-items:center}.cards.g3 li:first-child img{border-bottom:none;border-right:3px solid var(--k);height:100%;object-fit:cover}.cards.g3 li:first-child span{font-size:1.5rem;padding:20px 28px}.cards.g3 li:first-child small{font-size:.95rem;margin-top:8px;-webkit-line-clamp:3}}
.e404{text-align:center;padding:60px 0}
.e404 img{width:160px;height:auto;margin:0 auto 16px}

/* 出現アニメ */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}.btn,.fix{transition:none}}

/* 改行（build.py が文節ごとに <wbr> を入れる） */
h1,h2,h3,dt,.lead,.sub,.punch,.cards span,.pts li,.cta-box b,.bubbles li,.final h2,.hero-k{word-break:keep-all;overflow-wrap:anywhere}

/* 抜粋は普通の日本語禁則で折り返す（keep-all だと句点が行頭に来る） */
.cards small{word-break:normal;overflow-wrap:break-word;line-break:strict}
/* ダーク: 例文箱・強調帯を背景から浮かせる */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ex{background:var(--card);color:var(--ink)}:root:not([data-theme="light"]) .ttl b{background:var(--y);color:var(--k);text-shadow:none}}
:root[data-theme="dark"] .ex{background:var(--card);color:var(--ink)}:root[data-theme="dark"] .ttl b{background:var(--y);color:var(--k);text-shadow:none}