/* 2026-10-19 タブレット対応：縦向きのタブレット(幅1199pxまで)はスマホと同じ1列のレイアウトにする。
   PCのレイアウトのまま縮めると、768×1024 で本文が8〜11pxまで小さくなり読めなかったため。
   以下の「スマホ」の条件はすべて (max-width:767px),(max-width:1199px) and (orientation:portrait) で揃えている */
/* 全画面表示：シフトラと同じく、PCは画面幅1440px・スマホは400pxを基準に、ページ全体を画面幅に比例させる(1rem=10px@基準幅) */
/* 1項目=1画面：幅だけでなく高さにも連動(画面高 = 常に 90rem 以上。各セクションは 80rem 以下に設計) */
html{font-size:min(calc(100vw / 144),calc(100svh / 90))}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){html{font-size:min(calc(100vw / 40),calc(100svh / 90))}}

/* Layout: グレーの地に角丸パネルを積む(シフトラの文法)。単色のみ・グラデーションなし。読み手は企業の担当者に絞る */
:root{
  --mint:#06443E; --mint-deep:#06443E; --bg:#F7F8F7;
  --forest:#06443E; --cream:#F6EDD6;
  --face:#FFFFFF; --line-mint:rgba(6,68,62,.25);
  --ground:#F7F8F7; --gray-panel:#F7F8F7; --white:#FFFFFF; --line:#E0E6E3;
  --ink:#141414; --sub:#141414;
  --head:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --r-panel:2.8rem; --r-card:2rem; --r-sm:1.4rem;
  --hdr:7.2rem;
  --e-chara:cubic-bezier(0,1.475,.545,.94); --e-bubble:cubic-bezier(.235,1.335,.63,1);
  --e-in4:cubic-bezier(.755,.05,.855,.06); --e-out4:cubic-bezier(.165,.84,.44,1);
  color-scheme:light;
}
:root[data-font="zen"]{--head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.6rem;line-height:1.9;letter-spacing:.04em;padding-inline:0;padding-block:var(--hdr) 0;margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);font-weight:900;margin:0;text-wrap:balance;letter-spacing:.03em;line-height:1.45}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.in{max-width:108rem;margin:0 auto;padding-inline:4rem}
.panel{background:var(--bg);border-radius:0;margin:0;max-width:none;position:relative;overflow:hidden;padding-block:12rem}
.panel.face{background:var(--bg)}
.kh{font-size:3.8rem;text-align:center}
.kh em{font-style:normal;color:var(--mint);font-size:1.18em}
.kh .ln{white-space:nowrap}
.eyebrow{display:block;text-align:center;font-size:1.3rem;font-weight:700;color:var(--mint);letter-spacing:.18em;margin-bottom:1.4rem}
.lead{color:var(--sub);text-align:center;max-width:36em;margin:2.2rem auto 0;font-size:1.6rem}
.note{font-size:1.2rem;color:var(--sub)}
.sample{display:inline-block;font-size:1.15rem;font-weight:700;color:var(--sub);border:0;border-radius:99.9rem;padding:1px 1rem;background:var(--bg)}

/* ボタン：単色 */
.pill{display:inline-flex;align-items:center;gap:1.4rem;border-radius:99.9rem;font-family:var(--head);font-weight:900;font-size:1.6rem;text-decoration:none;padding:1.4rem 1.4rem 1.4rem 3rem;line-height:1.3;white-space:nowrap;transition:transform .2s ease}
.pill i{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;flex:none}
.pill i svg{width:1.4rem;height:1.4rem}
.pill:hover{transform:translateY(-2px)}
.pill:focus-visible,.tab:focus-visible,summary:focus-visible,.seg button:focus-visible,.chip:focus-visible{outline:0.3rem solid #F2B84B;outline-offset:0.3rem}
.pill.main{background:var(--mint-deep);color:#fff}
.pill.main i{background:#fff;color:var(--mint-deep)}
.pill.white{background:var(--forest);color:#fff}
.pill.white i{background:#fff;color:var(--forest)}
.pill.ghost{background:#fff;color:var(--forest);border:0;padding-block:1.4rem}
.pill.ghost i{background:var(--bg);color:var(--forest)}
.pill.line{background:#fff;color:var(--forest);border:0;padding-block:1.4rem}
.pill.line i{background:var(--bg);color:var(--forest)}

/* ヘッダー */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:var(--hdr);background:rgba(247,248,247,.95);backdrop-filter:blur(1rem);z-index:50;display:flex;align-items:center;gap:2.4rem;padding-inline:3.6rem}
.logo{color:var(--ink);display:flex;align-items:center;gap:1rem;text-decoration:none}
.logo svg{height:2.4rem;width:auto}
.logo small{font-size:1rem;font-weight:700;color:var(--forest);border:0;background:#fff;border-radius:99.9rem;padding:1px 0.8rem;letter-spacing:.1em}
.nav{display:flex;gap:3rem;margin-inline:auto;font-size:1.4rem;font-weight:700}
.nav a{text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--mint)}
.hdr-cta{display:flex;gap:1rem;align-items:center}
/* ログイン：枠なし・深緑の文字だけ(資料請求・無料ではじめるより一段控えめ) */
.login{font-family:var(--head);font-weight:700;font-size:1.4rem;color:var(--forest);text-decoration:none;white-space:nowrap;padding:1rem 1.2rem;border-radius:99.9rem;transition:background .2s ease}
.login:hover{background:#fff}
.login:focus-visible{outline:0.3rem solid #F2B84B;outline-offset:0.3rem}
.hdr .pill{font-size:1.4rem;padding:1rem 2.2rem}
.hdr .pill.line{padding:0.9rem 2rem}
.burger{display:none;width:4.4rem;height:4.4rem;border-radius:50%;border:0;background:#fff;color:var(--forest);place-items:center}

/* FV＋問題＋比較 を1枚の器に */
/* overflow:clip：hidden と同じく角丸で切り抜くが、スクロール容器にならないので中の sticky(ミルピン)が画面に対して貼り付く */
.stack{max-width:none;margin:0;border-radius:0;overflow:clip;background:var(--bg)}
.fv{position:relative;color:var(--ink);background:var(--bg);padding-top:7.6rem}
.fv-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5.6rem;align-items:center;max-width:124rem;margin:0 auto;padding-inline:6.4rem}
.fv .kicker{font-size:1.4rem;font-weight:700;letter-spacing:.08em;display:inline-flex;align-items:center;gap:0.8rem;background:#fff;color:var(--forest);border-radius:99.9rem;padding:0.4rem 1.4rem}
.fv h1{font-size:5.2rem;line-height:1.38;margin-top:1.8rem}
.fv h1 .ln{white-space:nowrap}
.fv h1 em{font-style:normal;display:inline-block;background:transparent;color:var(--forest);border-radius:1.2rem;padding:0 .16em;margin-top:.1em}
.fv h1 sup{font-size:.32em;vertical-align:top;margin-left:2px;opacity:.9}
.fv .desc{margin-top:2rem;font-size:1.6rem;max-width:30em}
.fv .ctas{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2.8rem}
.fv .fnote{margin-top:1.4rem;font-size:1.2rem;opacity:.85}
.fvc,.vis{display:none}
:root[data-fv="a"] .fvc.a,:root[data-fv="b"] .fvc.b,:root[data-fv="c"] .fvc.c{display:block}
:root[data-fv="a"] .vis.a,:root[data-fv="b"] .vis.b,:root[data-fv="c"] .vis.c{display:block}
.vis{position:relative}
/* A：提案画面 */
.ui{background:#fff;color:var(--ink);border-radius:var(--r-card);padding:2rem;display:grid;gap:1.2rem;max-width:47rem;margin-left:auto}
.ui-url{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;background:var(--ground);border-radius:1.2rem;padding:1rem 1.4rem;font-size:1.3rem}
.ui-url span{font-weight:700;color:var(--sub);white-space:nowrap}
.ui-url b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:1.25rem}
.ui-step{font-size:1.2rem;font-weight:700;color:var(--mint);display:flex;align-items:center;gap:0.8rem}
.ui-step::before{content:"";width:1.8rem;height:1.8rem;border-radius:50%;background:var(--face);border:2px solid var(--mint)}
.ui h4{font-size:1.3rem;color:var(--sub);font-weight:700;font-family:var(--body)}
.bars{display:grid;gap:0.6rem}
.bar{display:grid;grid-template-columns:8rem minmax(0,1fr) 3.4rem;gap:1rem;align-items:center;font-size:1.3rem}
.bar span{height:0.8rem;border-radius:99.9rem;background:var(--face);position:relative;overflow:hidden}
.bar span::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--mint);border-radius:99.9rem}
.bar b{font-variant-numeric:tabular-nums;text-align:right}
.bar.top{font-weight:700}
.cands{display:grid;gap:0.6rem}
.cand{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;gap:1rem;align-items:center;font-size:1.3rem;background:var(--face);border-radius:1.2rem;padding:0.6rem 1.2rem 0.6rem 0.6rem}
.cand img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover}
.cand small{display:block;font-size:1.1rem;color:var(--sub);line-height:1.3}
.cand b{font-family:var(--head);color:var(--mint);font-size:1.8rem;font-variant-numeric:tabular-nums}
.ui .sample{justify-self:end}
/* B：写真 */
.frame{border-radius:var(--r-card);overflow:hidden;background:#E9F7F1;aspect-ratio:5/4}
.frame img{width:100%;height:100%;object-fit:cover;object-position:76% 40%}
.tag{position:absolute;background:#fff;color:var(--mint-deep);font-size:1.2rem;font-weight:700;border-radius:99.9rem;padding:0.6rem 1.4rem;white-space:nowrap;left:-1.2rem;bottom:14%}
.tag b{color:var(--mint)}
/* C：名簿 */
.roster{background:#fff;color:var(--ink);border-radius:var(--r-card);padding:1.8rem 1.8rem 1.4rem;max-width:50rem;margin-left:auto;display:grid;gap:0.4rem}
.roster-h{display:flex;justify-content:space-between;align-items:center;font-size:1.25rem;color:var(--sub);font-weight:700;padding:0 0.4rem 0.8rem;border-bottom:1px solid var(--line)}
.roster-h b{color:var(--mint)}
.row{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 6.2rem 6.2rem 7.8rem;gap:1rem;align-items:center;font-size:1.3rem;padding:0.7rem 0.6rem;border-radius:1rem;position:relative}
.row img{width:3.2rem;height:3.2rem;border-radius:50%;object-fit:cover}
.row .h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.row .n{font-variant-numeric:tabular-nums;text-align:right}
.row .n small{display:block;font-size:1rem;color:var(--sub);line-height:1.2}
.row .u{font-size:1.1rem;font-weight:700;color:var(--sub);text-align:center;border-radius:99.9rem;padding:2px 0;background:var(--ground)}
.row.on{animation:rowflash 1.1s ease}
.row.on .u,.row.done .u{background:var(--face);color:var(--mint-deep)}
@keyframes rowflash{0%{background:transparent}25%{background:#DDF4EA}100%{background:transparent}}
.roster .sample{justify-self:end;margin-top:0.6rem}

.trust{position:relative;display:flex;flex-wrap:wrap;margin:5.2rem auto 0;max-width:124rem;padding-inline:6.4rem}
.st{padding:0.4rem 4rem;border-left:0}
.st:first-child{border-left:0;padding-left:0}
.st small{display:block;font-size:1.2rem;color:var(--ink)}
.st strong{display:block;font-family:var(--head);font-weight:900;font-size:3.4rem;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--forest)}
.st strong u{text-decoration:none;font-size:.5em;margin-left:2px}
.st span{display:block;font-size:1.1rem;color:var(--ink)}
.arc{display:none;width:100%;height:12rem;margin-top:4rem}
.arc path{fill:var(--gray-panel)}

/* キャラ ― シフトラの実測値：出る .4s 行き過ぎて戻る／消える .2s／吹き出しは遅れて膨らむ */
.ch{position:absolute;z-index:30;pointer-events:none}
.ch.fixed{position:fixed;z-index:35}
.ch .body{opacity:0;transform-origin:50% 100%;transition:opacity .2s ease,translate 0s .2s var(--e-in4),scale 0s .2s var(--e-in4),rotate 0s .2s}
.ch.pop .body{translate:0 50%;scale:.75}
.ch.from-r .body{translate:25% 0}
.ch.from-l .body{translate:-25% 0}
.ch.is-show .body{opacity:1;translate:0 0;scale:1;rotate:0deg;transition:opacity .2s ease,translate .4s var(--e-chara),scale .4s var(--e-chara),rotate .55s var(--e-chara)}
.ch .sway{transform-origin:50% 100%}
.ch.is-show .sway{animation:sway 1.6s ease-in-out .5s infinite alternate}
@keyframes sway{from{rotate:-2.5deg}to{rotate:2.5deg}}
.otter{width:100%;height:auto}
.otter.outline{filter:drop-shadow(0.3rem 0 0 #fff) drop-shadow(-0.3rem 0 0 #fff) drop-shadow(0 0.3rem 0 #fff) drop-shadow(0 -0.3rem 0 #fff)}
.bubble{position:absolute;background:#fff;color:var(--forest);font-family:var(--head);font-weight:900;font-size:1.4rem;padding:1rem 1.8rem;border-radius:99.9rem;white-space:nowrap;box-shadow:0 0.6rem 1.8rem rgba(4,40,32,.18)}
.bubble::after{content:"";position:absolute;bottom:-0.9rem;right:3.4rem;border:0.9rem solid transparent;border-top-color:#fff;border-bottom:0}
.bubble.l::after{right:auto;left:3rem}
.ch .bubble{opacity:0;translate:0 50%;scale:0;transform-origin:50% 100%;transition:opacity .2s ease,translate 0s .2s var(--e-in4),scale 0s .2s var(--e-in4)}
.ch.is-show .bubble{opacity:1;translate:0 0;scale:1;transition:opacity .2s ease .3s,translate .45s var(--e-bubble) .3s,scale .35s var(--e-bubble) .4s}
.ch.peek{bottom:100%;margin-bottom:-6px}
.ch.peek .win{overflow:hidden;aspect-ratio:1/.8}
.ch.peek .face{opacity:0;translate:0 100%;transition:opacity .2s ease,translate 0s .2s}
.ch.peek.is-show .face{animation:peek .5s var(--e-out4) forwards}
@keyframes peek{0%{translate:0 70%}55%{translate:0 -6%}100%{translate:0 0}}
.ch.peek .bubble{top:-1.4rem;right:78%}
.c-fv{right:5.6rem;bottom:-0.6rem;width:18rem;z-index:3}
.c-fv .bubble{right:62%;top:-0.4rem}
.c-r{right:1.6rem;bottom:-2.4rem;width:16rem}
.c-r .bubble{right:66%;top:-0.6rem}
.c-rc{right:18%;bottom:-2.4rem;width:17rem}
.c-rc .bubble{right:64%;top:-0.6rem}
.c-l{left:1.6rem;bottom:-2.4rem;width:16rem}
.c-l .bubble{left:66%;top:-0.6rem}
.c-faq{left:0;bottom:0;width:17rem}
.c-faq .bubble{left:58%;top:-1.2rem}
.c-pk{right:8%;width:14rem}

/* 2 問題 */
.problem{padding:6.4rem 0 0}
.worries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:5.2rem}
.wcard{background:#fff;border-radius:var(--r-card);padding:2.8rem 2.4rem 2.4rem;display:grid;gap:1.2rem;align-content:start;text-align:center}
.wicon{width:7.6rem;height:7.6rem;border-radius:50%;background:var(--face);display:grid;place-items:center;margin:0 auto 2px;color:var(--mint)}
.wicon svg{width:3.6rem;height:3.6rem}
.wcard h3{font-size:2rem}
.wcard p{font-size:1.45rem;color:var(--sub);text-align:left}
.wcard .voice{background:var(--cream);color:var(--ink);border-radius:var(--r-sm);padding:1.2rem 1.4rem;font-size:1.35rem;line-height:1.75;text-align:left;position:relative}
.wcard .voice::before{content:"";position:absolute;top:-0.8rem;left:2.6rem;border:0.8rem solid transparent;border-bottom-color:var(--cream);border-top:0}
.cause{margin:2.8rem auto 0;max-width:76rem;background:#fff;border-radius:var(--r-card);padding:2.4rem 3.6rem;text-align:center;border:2px solid var(--mint)}
.cause p{font-size:1.5rem;color:var(--sub);margin-top:0.8rem}
.cause h3{font-size:2.2rem}
.cause h3 em{font-style:normal;color:var(--mint)}
.problem .note{text-align:center;margin-top:1.4rem}
.chev{display:block;width:16rem;height:auto;margin:5.6rem auto 0}
.chev path{fill:var(--mint)}

/* 3 比較 */
.compare{padding:4.8rem 0 11rem}
.cmp-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6.4rem;align-items:start;margin-top:4.4rem}
.vtitle{writing-mode:vertical-rl;font-family:var(--head);font-weight:900;font-size:6.6rem;line-height:1.15;color:var(--mint);letter-spacing:.06em}
.vtitle span{color:var(--ink);font-size:.6em}
.cmp{display:grid;gap:1rem}
.cmp-row{display:grid;grid-template-columns:15rem minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:stretch}
.cmp-row > *{border-radius:var(--r-sm);padding:1.4rem 1.6rem;font-size:1.45rem;line-height:1.7}
.cmp-row .k{background:transparent;font-weight:900;font-family:var(--head);display:flex;align-items:center;padding-left:0}
.cmp-row .old{background:#fff;color:var(--sub)}
.cmp-row .new{background:#fff;border:2px solid var(--mint);font-weight:700}
.cmp-head > *{padding-block:0.4rem;font-size:1.3rem;font-weight:700;background:transparent!important;border:0!important;color:var(--sub)}
.cmp-head .new{color:var(--mint)}

/* 4 仕組み */
.mech-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6.4rem;align-items:center;margin-top:5.6rem}
.mech-grid .roster{margin:0;border:1px solid var(--line)}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;counter-reset:f}
.flow li{background:var(--face);border-radius:var(--r-sm);padding:1.8rem 2rem 1.8rem 6.6rem;position:relative;counter-increment:f}
.flow li::before{content:counter(f);position:absolute;left:1.8rem;top:1.8rem;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--mint-deep);color:#fff;font-weight:900;display:grid;place-items:center;font-size:1.5rem}
.flow b{display:block;font-size:1.6rem}
.flow span{display:block;font-size:1.4rem;color:var(--sub);margin-top:2px;line-height:1.75}
.est{margin-top:2.8rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.est div{border:1px solid var(--line);border-radius:var(--r-sm);padding:1.4rem 1.6rem;font-size:1.35rem;color:var(--sub);line-height:1.75}
.est b{display:block;color:var(--ink);font-size:1.45rem}

/* 5 始め方 */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:5.6rem}
.step{background:#fff;border-radius:var(--r-card);overflow:hidden;display:grid;align-content:start}
.step .pic{aspect-ratio:16/10;overflow:hidden}
.step .pic img{width:100%;height:100%;object-fit:cover}
.step .body{padding:2rem 2.2rem 2.4rem;display:grid;gap:0.8rem}
.step .no{font-family:var(--head);font-weight:900;color:var(--mint);font-size:1.3rem;letter-spacing:.14em}
.step .no b{font-size:2.8rem;letter-spacing:0;margin-left:0.4rem}
.step h3{font-size:1.9rem}
.step p{font-size:1.4rem;color:var(--sub)}
.step .chip{justify-self:start;background:var(--face);color:var(--mint-deep);font-size:1.2rem;font-weight:700;border-radius:99.9rem;padding:0.4rem 1.2rem}

/* 6 証拠 */
.big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.8rem;margin-top:7.2rem}
.big{text-align:center;display:grid;gap:0.8rem;justify-items:center;padding-block:0.8rem}
.big .lb{font-size:1.4rem;font-weight:700;color:var(--sub)}
.big strong{font-family:var(--head);font-weight:900;font-size:8rem;line-height:1.05;letter-spacing:0;color:var(--mint);font-variant-numeric:tabular-nums}
.big strong u{text-decoration:none;font-size:.34em;color:var(--ink)}
.big .src{font-size:1.25rem;color:var(--sub);max-width:18em;line-height:1.7;border-top:1px solid var(--line);padding-top:1rem;margin-top:0.4rem}

/* 7 自分の場合 */
.prop{background:#fff;border-radius:var(--r-card);margin-top:5.2rem;padding:3.6rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:4.8rem}
.prod{background:var(--ground);border-radius:var(--r-sm);padding:1.8rem;display:grid;gap:0.8rem;align-content:start}
.prod h4{font-size:1.3rem;color:var(--sub);font-family:var(--body);font-weight:700}
.prod dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.6rem 1.4rem;font-size:1.4rem}
.prod dt{color:var(--sub)}
.prod dd{margin:0;font-weight:700}
.sns{display:grid;gap:1rem}
.sns-row{display:grid;grid-template-columns:9.6rem 5.2rem minmax(0,1fr);gap:1.2rem;align-items:start;padding:1.2rem 1.4rem;border-radius:var(--r-sm);border:1px solid var(--line)}
.sns-row.best{border:2px solid var(--mint);background:var(--face)}
.sns-row b{font-size:1.5rem}
.sns-row strong{font-family:var(--head);font-size:2.4rem;color:var(--mint);line-height:1.1;font-variant-numeric:tabular-nums}
.sns-row span{font-size:1.35rem;color:var(--sub);line-height:1.7}
.sns-row em{font-style:normal;font-size:1.1rem;font-weight:700;color:#fff;background:var(--mint-deep);border-radius:99.9rem;padding:1px 0.8rem;margin-left:0.6rem;vertical-align:2px}
.prop .foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0.8rem 1.6rem;align-items:center;justify-content:space-between}
.sub-h{font-size:2.4rem;text-align:center;margin-top:8rem}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:0.8rem;margin-top:2rem}
.chip{border:1.5px solid var(--line-mint);background:#fff;color:var(--mint-deep);border-radius:99.9rem;padding:0.7rem 1.8rem;font-size:1.4rem;font-weight:700;cursor:pointer;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--mint-deep);border-color:var(--mint-deep);color:#fff}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.4rem}
.case{background:#fff;border-radius:var(--r-card);overflow:hidden;display:grid;align-content:start}
.case[hidden]{display:none}
.case .pic{aspect-ratio:4/3;overflow:hidden;position:relative}
.case .pic img{width:100%;height:100%;object-fit:cover}
.case .pic span{position:absolute;left:1.4rem;top:1.4rem;background:#fff;color:var(--mint-deep);font-size:1.2rem;font-weight:700;border-radius:99.9rem;padding:0.3rem 1.2rem}
.case .body{padding:1.8rem 2rem 2rem;display:grid;gap:0.8rem}
.case .meta{font-size:1.2rem;color:var(--sub)}
.case h3{font-size:1.7rem}
.case p{font-size:1.35rem;color:var(--sub);line-height:1.8}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);padding-top:1rem}
.nums div{text-align:center;border-left:1px dashed var(--line)}
.nums div:first-child{border-left:0}
.nums small{display:block;font-size:1.1rem;color:var(--sub)}
.nums b{font-family:var(--head);font-size:1.8rem;color:var(--mint);font-variant-numeric:tabular-nums}
.center{text-align:center;margin-top:1.6rem}

/* 8 不安 */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:5.2rem}
.fit > div{border-radius:var(--r-card);padding:2.4rem 3rem}
.fit .yes{background:var(--face)}
.fit .no{background:var(--ground)}
.fit h3{font-size:1.8rem;display:flex;align-items:center;gap:1rem}
.fit h3 i{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.5rem;flex:none}
.fit .yes h3 i{background:var(--mint-deep);color:#fff}
.fit .no h3 i{background:#fff;color:var(--sub);border:1px solid var(--line)}
.fit ul{margin:1.4rem 0 0;padding-left:1.2em;display:grid;gap:0.8rem;font-size:1.45rem}
.fit .no li{color:var(--sub)}
.faqwrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:6.4rem;align-items:start;margin-top:9.6rem}
.faqhead{position:relative;min-height:40rem}
.faqhead .kh{text-align:left}
.faqhead p{color:var(--sub);margin-top:1.6rem;font-size:1.5rem}
.faqs{display:grid;gap:1.2rem}
details{background:var(--face);border-radius:var(--r-sm);padding:0 2rem}
summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3rem minmax(0,1fr) 2.4rem;gap:1.2rem;align-items:center;padding:1.6rem 0;font-weight:700;font-size:1.55rem}
summary::-webkit-details-marker{display:none}
summary .q{width:3rem;height:3rem;border-radius:50%;background:var(--bg);color:var(--forest);display:grid;place-items:center;font-family:var(--head);font-weight:900;font-size:1.4rem}
summary .pm{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--bg);color:var(--mint);display:grid;place-items:center;font-weight:900;transition:transform .2s}
details[open] summary .pm{transform:rotate(45deg)}
details .a{padding:0 0 1.8rem 4.2rem;color:var(--sub);font-size:1.45rem;line-height:1.85}

/* 9 条件 */
.terms-card{position:relative;background:#fff;border-radius:var(--r-card);margin-top:9.6rem;padding:3.6rem}
.terms{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.terms div{padding:0.6rem 1.8rem;border-left:1px dashed var(--line);display:grid;gap:0.4rem;align-content:start}
.terms div:first-child{border-left:0;padding-left:0}
.terms dt{font-size:1.25rem;color:var(--sub);font-weight:700}
.terms dd{margin:0;font-family:var(--head);font-weight:900;font-size:1.9rem;line-height:1.4}
.terms dd small{display:block;font-family:var(--body);font-weight:400;font-size:1.25rem;color:var(--sub);line-height:1.6;margin-top:0.4rem}

/* 10 CTA */
.cta{background:var(--mint-deep);color:#fff;text-align:center}
.cta .kh{color:#fff}
.cta .kh em{color:#fff;font-size:1em;border-bottom:0.4rem solid rgba(255,255,255,.5)}
.get{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;max-width:82rem;margin:3.4rem auto 0;text-align:left}
.get > div:not(.ch){background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:1.6rem 1.8rem;display:grid;gap:0.4rem}
.get > div small{color:var(--mint);font-weight:900;font-size:1.2rem;letter-spacing:.1em}
.get > div b{font-size:1.55rem}
.get > div span{font-size:1.3rem;color:var(--sub);line-height:1.7}
.cta .pill{margin-top:3.2rem}
.cta .also{margin-top:1.4rem;font-size:1.4rem;opacity:.95}
.assure{display:flex;justify-content:center;gap:0.8rem 2.2rem;flex-wrap:wrap;margin-top:1.8rem;font-size:1.4rem}
.assure span::before{content:"✓";margin-right:0.6rem;font-weight:900}

/* ブログ・クリエイター導線・ブランドライン */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:5.2rem}
.post{background:var(--face);border-radius:var(--r-card);overflow:hidden;text-decoration:none;display:grid;align-content:start}
.post .pic{aspect-ratio:800/431;overflow:hidden}
.post .pic img{width:100%;height:100%;object-fit:cover}
.post .body{padding:1.8rem 2.2rem 2.2rem;display:grid;gap:0.8rem}
.post .cat{justify-self:start;background:var(--bg);color:var(--forest);font-size:1.2rem;font-weight:700;border-radius:99.9rem;padding:0.3rem 1.2rem}
.post h3{font-size:1.7rem}
.post time{font-size:1.2rem;color:var(--sub);font-variant-numeric:tabular-nums}
.more{display:flex;justify-content:center;margin-top:2.8rem}
.creators{max-width:none;margin:0;background:var(--bg);border-radius:0;padding:2.4rem 4.8rem;display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center;justify-content:space-between}
.creators p{font-size:1.5rem}
.creators b{font-family:var(--head)}
.brandline{text-align:center;padding-block:8.8rem}
.brandline p{font-family:var(--head);font-weight:900;font-size:4rem;line-height:1.5}
.brandline p em{font-style:normal;color:var(--mint)}
.brandline small{display:block;margin-top:1.2rem;color:var(--sub);font-size:1.4rem}

/* フッター */
.ft{position:relative;background:var(--bg);color:var(--ink);border-radius:0;max-width:none;margin:0;padding:7.2rem 6.4rem 4rem}
.ft-grid{max-width:108rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 36rem;gap:2.8rem}
.ft .logo{color:var(--ink)}
.ft p{font-size:1.3rem;margin-top:1.4rem}
.ft h4{font-size:1.3rem;letter-spacing:.12em;color:var(--forest);font-family:var(--body);font-weight:700}
.ft ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:0.6rem;font-size:1.4rem}
.ft ul a{text-decoration:none}
.ft small{display:block;max-width:108rem;margin:4rem auto 0;font-size:1.2rem;border-top:0;padding-top:2rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.pill{transition:none}
  .ch .body,.ch.is-show .body,.ch .bubble,.ch.is-show .bubble{transition:opacity .2s ease;translate:0 0;scale:1}
  .ch.is-show .sway{animation:none}
  .ch .body,.ch.is-show .body{rotate:0deg}
  .ch.peek .face,.ch.peek.is-show .face{animation:none;translate:0 0;transition:none}
  .ch.peek .face{opacity:0}.ch.peek.is-show .face{opacity:1}
  .row.on{animation:none}
}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .nav{display:none}
  .hdr-cta .pill.line{display:none}
  .hdr-cta{margin-left:auto;gap:0.4rem}
  .login{font-size:1.3rem;padding:0.9rem 0.8rem}
  .burger{display:grid}
  .terms{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.6rem}
  .terms div:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .fv-grid{grid-template-columns:1fr}
  .ui,.roster{margin-inline:auto}
  .worries,.steps,.cases,.big3,.get,.fit,.est{grid-template-columns:1fr}
  .cmp-grid,.mech-grid,.prop{grid-template-columns:1fr}
  .vtitle{writing-mode:horizontal-tb;font-size:3.4rem;text-align:center}
  .vtitle br{display:none}
  .vtitle span{font-size:.7em}
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row .k{grid-column:1/-1;padding:0.8rem 0 0}
  .faqwrap{grid-template-columns:1fr}
  .faqhead{min-height:0}
  .posts{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  :root{--hdr:6.2rem}
  body{padding-inline:0;padding-block:var(--hdr) 0}
  .panel,.stack,.creators{margin-bottom:0;border-radius:0}
  .hdr .pill{font-size:1.3rem;padding:0.9rem 1.6rem}
  .logo small{display:none}
  .fv h1{font-size:2.6rem}
  .fv .kicker{font-size:1.2rem}
  .trust{justify-content:space-between}
  .st{padding:0.6rem 0.8rem;flex:1 1 30%}
  .st:first-child{padding-left:0}
  .st strong{font-size:2rem}
  .st small{font-size:1rem}
  .ch .bubble{font-size:1.2rem;padding:0.7rem 1.2rem}
  .row{grid-template-columns:2.8rem minmax(0,1fr) 4.6rem 6rem;gap:0.8rem;font-size:1.2rem}
  .row .u{font-size:1.05rem}
  .brandline p{font-size:1.9rem}
  .brandline p .ln{white-space:nowrap}
  .row .n.f{display:none}
  .terms{grid-template-columns:1fr 1fr}
  .terms div{border-left:0!important;padding-left:0!important}
  .sns-row{grid-template-columns:8rem 4.4rem minmax(0,1fr);gap:0.8rem}
  .sns-row span{grid-column:1/-1}
  .ft-grid{grid-template-columns:1fr}
}

/* ===== 資料ベース版で増えた部品(144rem基準のpxで書き、rem に変換される) ===== */
.fv .who{font-size:1.3rem;margin-top:1rem;opacity:.9;letter-spacing:.06em}
.refs{display:flex;flex-wrap:wrap;gap:0.6rem}
.refs span{background:var(--ground);border-radius:99.9rem;padding:0.4rem 1.2rem;font-size:1.2rem}
.cand b{font-size:1.3rem;font-family:var(--body);background:#fff;border-radius:99.9rem;padding:2px 1rem;color:var(--mint-deep)}
/* 情報がつながる図 */
.loop{position:relative;background:#fff;color:var(--ink);border-radius:2rem;padding:2.8rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b" "d c" "s s";column-gap:4rem;row-gap:12rem;max-width:none}
.loop .ring{position:absolute;left:50%;top:calc(50% - 1.4rem);width:26rem;height:26rem;transform:translate(-50%,-50%);overflow:visible}
.loop .ring circle{fill:none;stroke:var(--line-mint);stroke-width:2;stroke-dasharray:6 6}
.loop .ring path{fill:var(--mint)}
.node{position:relative;z-index:1;background:var(--bg);border-radius:1.4rem;padding:1.4rem 1.6rem;display:grid;gap:2px;transition:background .3s,color .3s}
.node small{color:var(--mint);font-weight:900;font-size:1.2rem;letter-spacing:.1em}
.node b{font-size:1.8rem;font-family:var(--head)}
.node span{font-size:1.3rem;color:var(--sub);line-height:1.6}
.node.on{background:#E3EBE9;color:var(--ink)}
.node.on small{color:var(--forest)}.node.on span{color:var(--ink)}
.n1{grid-area:a}.n2{grid-area:b}.n3{grid-area:c}.n4{grid-area:d}
.hub{position:absolute;z-index:2;left:50%;top:calc(50% - 1.4rem);transform:translate(-50%,-50%);width:12rem;height:12rem;border-radius:50%;background:var(--bg);color:var(--forest);display:grid;place-items:center;text-align:center;font-family:var(--head);font-weight:900;font-size:1.6rem;line-height:1.4}
.loop .sample{grid-area:s;justify-self:end}
/* 悩みの調査 */
.pains{display:grid;gap:1.2rem;margin:5.6rem auto 0;max-width:104rem}
.pain{display:grid;grid-template-columns:14rem minmax(0,1fr) minmax(0,1.2fr) 3.6rem;gap:2.4rem;align-items:center;background:#fff;border-radius:1.4rem;padding:1.6rem 2.8rem}
.pn{font-family:var(--head);font-weight:900;font-size:4rem;color:var(--mint);font-variant-numeric:tabular-nums;line-height:1.1}
.pn u{font-size:.5em;text-decoration:none}
.pb{height:1.2rem;background:var(--face);border-radius:99.9rem;position:relative;overflow:hidden}
.pb i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--mint);border-radius:99.9rem}
.pain b{font-size:2rem;font-family:var(--head)}
.pain small{font-size:1.2rem;color:var(--sub);text-align:right}
.src-note{font-size:1.2rem;color:var(--sub);max-width:104rem;margin:1.6rem auto 0;line-height:1.7}
/* 市場データ */
.market{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:2rem;margin-top:5.6rem}
.mk{background:#fff;border-radius:2rem;padding:2.8rem 3rem;min-width:0}
.mk h3{font-size:1.8rem}
.mk-sub{font-size:1.3rem;color:var(--sub);margin-top:0.4rem}
.mk-row{display:grid;grid-template-columns:15rem minmax(0,1fr) 6rem minmax(0,1fr) 7.2rem;gap:1.2rem;align-items:center;margin-top:1.8rem;font-size:1.5rem}
.mk-row b{font-size:1.5rem}
.mk-bar{height:1.2rem;background:var(--ground);border-radius:99.9rem;position:relative;overflow:hidden}
.mk-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 2);background:var(--mint-deep);border-radius:99.9rem}
.mk-bar i.old{background:#B9C5C1}
.mk-row em{font-style:normal;color:var(--sub);font-variant-numeric:tabular-nums}
.mk-row strong{font-family:var(--head);font-weight:900;font-size:2.4rem;color:var(--mint);font-variant-numeric:tabular-nums}
.mk-s strong{display:block;font-family:var(--head);font-weight:900;font-size:5.6rem;color:var(--mint);line-height:1.1;margin-top:1rem;font-variant-numeric:tabular-nums}
.mk-s strong u{font-size:.4em;text-decoration:none;color:var(--ink)}
.mk-s p{font-size:1.4rem;color:var(--sub)}
.mk-src{font-size:1.15rem;color:var(--sub);margin-top:1.2rem}
.compare .cmp-grid{margin-top:9.6rem}
/* 6つの機能 */
.six{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;counter-reset:s}
.six li{background:var(--face);border-radius:1.4rem;padding:1.8rem 2rem;counter-increment:s;display:grid;gap:0.4rem}
.six b{font-size:2rem;font-family:var(--head)}
.six b::before{content:"0" counter(s);color:var(--mint);font-size:1.3rem;margin-right:1rem;letter-spacing:.08em}
.six span{font-size:1.4rem;color:var(--sub);line-height:1.7}
.mech-grid{align-items:start}
/* Ceeevの実績 */
.ceeev{margin-top:9.6rem;background:#fff;border-radius:2rem;padding:4rem}
.ce-head{display:flex;justify-content:space-between;gap:2.4rem;align-items:end;flex-wrap:wrap}
.ce-head p{font-family:var(--head);font-weight:900;font-size:2.6rem;line-height:1.5}
.ce-num small{display:block;font-size:1.4rem;color:var(--sub)}
.ce-num strong{font-family:var(--head);font-weight:900;font-size:7.2rem;color:var(--mint);line-height:1}
.ce-num strong u{font-size:.4em;text-decoration:none;color:var(--ink)}
.ce-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:2.8rem}
.ce-cases div{background:var(--bg);border-radius:1.4rem;padding:2rem 2.2rem;display:grid;gap:0.4rem}
.ce-cases small{font-size:1.3rem;color:var(--sub);font-weight:700}
.ce-cases strong{font-family:var(--head);font-weight:900;font-size:3.6rem;color:var(--mint);line-height:1.2}
.ce-cases span{font-size:1.4rem}
.ceeev .note{margin-top:1.6rem}
/* 立場別タブ */
.tabs{display:flex;justify-content:center;margin-top:4rem}
.tablist{display:inline-flex;background:#fff;border-radius:99.9rem;padding:0.6rem;gap:0.4rem;border:1px solid var(--line-mint)}
.tab{border:0;background:transparent;border-radius:99.9rem;padding:1.2rem 2.8rem;font-family:var(--head);font-weight:900;font-size:1.7rem;color:var(--sub);cursor:pointer}
.tab[aria-selected="true"]{background:var(--mint-deep);color:#fff}
.tabpanel{background:#fff;border-radius:2rem;margin-top:2.8rem;padding:4.8rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:5.6rem;align-items:start}
.tabpanel h3{font-size:3rem}
.tabpanel .txt p{color:var(--sub);margin-top:1.6rem;font-size:1.6rem}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.tl li{display:grid;grid-template-columns:4.8rem minmax(0,1fr);gap:1.6rem;align-items:start;background:var(--face);border-radius:1.4rem;padding:1.8rem}
.tl li i{width:4.8rem;height:4.8rem;border-radius:50%;background:#fff;color:var(--mint);display:grid;place-items:center;font-style:normal;font-weight:900;font-family:var(--head);font-size:1.5rem}
.tl b{display:block;font-size:1.8rem}
.tl span{font-size:1.4rem;color:var(--sub);line-height:1.7}
/* 料金 */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.plan{border:0;border-radius:2rem;padding:3.2rem 2.8rem;display:grid;gap:0.8rem;align-content:start;position:relative;background:#fff}
.plan.rec{border:0}
.badge{position:absolute;top:1.8rem;left:auto;right:2.4rem;background:var(--bg);color:var(--forest);font-size:1.3rem;font-weight:700;border-radius:99.9rem;padding:0.3rem 1.4rem}
.plan h3{font-size:2.6rem}
.plan .for{font-size:1.4rem;color:var(--sub)}
.price{display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap;margin-top:0.8rem}
.price small{font-size:1.3rem;color:var(--sub);width:100%}
.price strong{font-family:var(--head);font-weight:900;font-size:4.8rem;color:var(--mint);line-height:1;font-variant-numeric:tabular-nums}
.price u{text-decoration:none;font-size:1.6rem}
.price2{font-size:1.4rem;color:var(--sub)}
.plan ul{list-style:none;margin:1rem 0 0;padding:1.4rem 0 0;display:grid;gap:0.6rem;font-size:1.5rem;border-top:0}
.plan li::before{content:"✓";color:var(--mint);margin-right:0.8rem;font-weight:900}
.terms-card .terms{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3.2rem;border-top:1px solid var(--line);padding-top:2.4rem}
.terms-card .terms dd{font-family:var(--body);font-weight:700;font-size:1.5rem;line-height:1.7}
.terms-card .terms dt{font-size:1.3rem}
.terms-card > .note{margin-top:1.6rem}
.cta-btns{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap}
.cta-btns .pill{margin-top:3.2rem}
.cta .also{margin-top:2rem}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .loop{column-gap:1.4rem;row-gap:11rem;padding:1.8rem}
  .loop .ring{width:20rem;height:20rem}
  .hub{width:9.6rem;height:9.6rem;font-size:1.3rem}
  .node b{font-size:1.5rem}
  .node span{font-size:1.15rem}
  .pain{grid-template-columns:9.6rem minmax(0,1fr);gap:0.6rem 1.4rem;padding:1.4rem 1.6rem}
  .pain .pb{grid-column:1/-1;grid-row:3}
  .pain b{font-size:1.5rem}
  .pain small{display:none}
  .pn{font-size:3rem;grid-row:1/3}
  .market{grid-template-columns:1fr}
  .mk-row{grid-template-columns:minmax(0,1fr) 5.6rem;row-gap:0.6rem}
  .mk-row b{grid-column:1/-1}
  .mk-s strong{font-size:4.4rem}
  .six{grid-template-columns:1fr}
  .ceeev{padding:2.4rem 1.8rem}
  .ce-head p{font-size:1.9rem}
  .ce-num strong{font-size:5.2rem}
  .ce-cases{grid-template-columns:1fr}
  .ce-cases strong{font-size:2.8rem}
  .tablist{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .tab{padding:1rem 0.8rem;font-size:1.3rem}
  .tabpanel{grid-template-columns:1fr;padding:2.4rem 1.8rem;gap:2.4rem}
  .tabpanel h3{font-size:2.1rem}
  .plans{grid-template-columns:1fr;gap:2.4rem}
  .price strong{font-size:4rem}
  .terms-card .terms{grid-template-columns:1fr;row-gap:1.2rem}
  .cta-btns{flex-direction:column;align-items:center}
}

/* ===== シフトラの構成に合わせた部品(144rem基準px) ===== */
.fv h1.main-copy{font-size:6.8rem;line-height:1.3;margin-top:2.8rem}
.fv h1.main-copy em{padding:0 .12em}
.collage{position:relative;height:54rem}
.collage .ph{position:absolute;border-radius:2rem;overflow:hidden;background:#E9F7F1}
.collage .ph img{width:100%;height:100%;object-fit:cover}
.collage .p1{left:6%;top:12%;width:60%;aspect-ratio:4/3.3;z-index:2}
.collage .p1 img{object-position:72% 35%}
.collage .p2{right:2%;top:0;width:30%;aspect-ratio:1}
.collage .p3{right:0;top:54%;width:38%;aspect-ratio:16/10}
.collage .p4{left:0;bottom:0;width:26%;aspect-ratio:1}
.collage .tag.t1{left:28%;bottom:4%;z-index:3}
.problem{position:relative;padding-bottom:10rem}
.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.8rem;margin-top:6.4rem}
.scene{display:grid;justify-items:center;text-align:center;gap:1.6rem}
.circle{position:relative;width:30rem;max-width:100%;aspect-ratio:1}
.circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sb{position:absolute;background:var(--mint-deep);color:#fff;font-family:var(--head);font-weight:700;font-size:1.5rem;line-height:1.5;padding:1rem 1.6rem;border-radius:1.2rem;text-align:left;white-space:nowrap}
.sb::after{content:"";position:absolute;bottom:-0.8rem;left:2.4rem;border:0.8rem solid transparent;border-top-color:var(--mint-deep);border-bottom:0}
.sb1{left:-1.2rem;top:2.8rem}.sb2{right:-1.8rem;top:1.2rem}.sb2::after{left:auto;right:2.4rem}.sb3{left:-0.8rem;bottom:5.6rem}
.sc-txt{font-size:1.6rem;max-width:30rem}
.sc-num{display:grid;justify-items:center;gap:2px}
.sc-num strong{font-family:var(--head);font-weight:900;font-size:4.4rem;color:var(--mint);line-height:1.1}
.sc-num strong u{font-size:.5em;text-decoration:none}
.sc-num span{font-size:1.3rem;color:var(--sub)}
.problem .src-note{text-align:center;max-width:90rem;margin-top:3.2rem}
.resolve{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4.8rem;align-items:start;margin-top:5.6rem}
.rv-col{display:grid;gap:2.4rem}
.rv-r{margin-top:12rem}
.rv{background:#fff;border-radius:2.4rem;padding:3.6rem}
.rv h3{font-size:2.6rem;color:var(--mint);line-height:1.4}
.rv p{font-size:1.5rem;color:var(--sub);margin-top:1.2rem;line-height:1.8}
.resolve .vtitle{margin-top:4rem}
.how-panel{margin-top:5.6rem;background:transparent;border-radius:0;padding:4.8rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4rem;align-items:center}
.how-fig .loop{margin:0}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.how-steps li{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:1.8rem;align-items:center;background:#fff;border-radius:1.6rem;padding:1.8rem 2.2rem}
.hs-n{width:5.6rem;height:5.6rem;border-radius:50%;background:var(--bg);color:var(--mint);font-family:var(--head);font-weight:900;font-size:2.4rem;display:grid;place-items:center}
.how-steps b{font-size:2.2rem;font-family:var(--head);color:var(--mint)}
.how-steps p{font-size:1.45rem;color:var(--sub)}
#how .note{margin-top:2rem}
.fn-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5.6rem;align-items:start}
.funcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.fc{background:#fff;border-radius:2.4rem;padding:3.2rem 3rem;display:grid;gap:1rem;align-content:start;position:relative}
.fc .ic{position:absolute;right:2.4rem;top:2.4rem;width:4.6rem;height:4.6rem;border-radius:50%;background:var(--bg);color:var(--mint);display:grid;place-items:center}
.fc .ic svg{width:2.2rem;height:2.2rem}
.fc small{font-size:1.3rem;color:var(--mint);font-weight:900;letter-spacing:.1em}
.fc h3{font-size:2.2rem;padding-right:5.6rem}
.fc p{font-size:1.4rem;color:var(--sub);line-height:1.75}
.fn-title{position:sticky;top:12rem}
.fn-note{margin-top:3.6rem}
.num4{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));gap:3.2rem;margin-top:7.2rem;align-items:end}
.nm{position:relative;display:grid;gap:1rem;justify-items:start}
.nm .lb{background:var(--bg);color:var(--forest);font-size:1.3rem;font-weight:700;border-radius:0.6rem;padding:0.3rem 1.2rem}
.nm strong{font-family:var(--head);font-weight:900;font-size:6rem;color:var(--mint);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.nm-main strong{font-size:9.6rem}
.nm strong u{font-size:.38em;text-decoration:none;color:var(--ink)}
.nm p{font-size:1.3rem;color:var(--sub);line-height:1.7}
.scribble{position:absolute;left:-2.8rem;top:0.8rem;width:calc(100% + 4rem);height:15rem;pointer-events:none;overflow:visible}
.scribble path{fill:none;stroke:#F2C94C;stroke-width:4;stroke-linecap:round}
.price-sec{background:var(--bg);color:var(--ink)}
.price-sec .lead{color:var(--ink)}
.plans-wrap{position:relative;margin-top:30rem}
.plan{color:var(--ink)}
.plan-note{font-size:1.3rem;margin-top:2rem;line-height:1.8}
.ent{margin-top:3.2rem;border:0;background:#fff;border-radius:2rem;padding:2.4rem 3.2rem;display:flex;justify-content:space-between;align-items:center;gap:2.4rem;flex-wrap:wrap}
.ent p{font-size:1.5rem}
.ent b{display:block;font-size:2rem;font-family:var(--head)}
.faqwrap .faqhead .faq-ttl{font-size:8rem;text-align:left;line-height:1.25}
.faqwrap{margin-top:0}
.entry{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:7.2rem;align-items:start}
.entry .en-ttl{text-align:left;font-size:6.4rem}
.en-lead{font-size:1.8rem;margin-top:1.6rem}
.en-steps{list-style:none;margin:4rem 0 0;padding:0;display:grid;gap:1.4rem}
.en-steps li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:1.6rem;align-items:center;background:#fff;border-radius:1.6rem;padding:1.6rem 2rem}
.en-steps span{width:5.2rem;height:5.2rem;border-radius:50%;background:var(--bg);color:var(--forest);font-family:var(--head);font-weight:900;font-size:2.2rem;display:grid;place-items:center}
.en-steps b{display:block;font-size:1.9rem}
.en-steps small{font-size:1.3rem;color:var(--sub)}
.en-form-wrap{position:relative;margin-top:15rem}
.en-form{background:#fff;border-radius:2.4rem;padding:4rem;display:grid;gap:0.6rem}
.en-form label{font-size:1.4rem;font-weight:700;margin-top:1.2rem;display:flex;gap:0.8rem;align-items:center}
.en-form label em{font-style:normal;font-size:1.1rem;color:var(--forest);background:var(--bg);border-radius:0.4rem;padding:0 0.6rem}
.en-form input[type=text],.en-form input[type=email],.en-form input[type=tel],.en-form select{width:100%;font:inherit;font-size:1.6rem;padding:1.4rem 1.6rem;border:0;border-radius:1rem;background:var(--bg);color:var(--ink)}
.en-form input[type=checkbox]{accent-color:var(--forest);color:var(--ink)}
.en-form .agree{font-weight:400;margin-top:1.8rem}
.en-form button{justify-self:center;margin-top:2rem;border:0;cursor:pointer}
.form-msg{text-align:center;color:var(--mint-deep);font-weight:700}
.en-form .note{margin-top:1rem;text-align:center}
.about{text-align:center;padding-block:20rem}
.ab-photos .ap{position:absolute;border-radius:2rem;overflow:hidden}
.ab-photos .ap img{width:100%;height:100%;object-fit:cover}
.a1{left:3%;top:12%;width:16%;aspect-ratio:4/3}.a2{right:5%;top:8%;width:12%;aspect-ratio:1}.a3{left:7%;bottom:10%;width:13%;aspect-ratio:1}.a4{right:3%;bottom:14%;width:18%;aspect-ratio:4/3}
.ab-in{position:relative;z-index:1}
.ab-ttl{font-size:6.4rem;line-height:1.45}
.ab-ttl em{font-style:normal;color:var(--mint)}
.about .ab-in > p{font-size:1.7rem;color:var(--sub);margin-top:3.2rem;line-height:2}
.ft-cta{position:relative;background:#fff;color:var(--ink);border-radius:2rem;padding:2.8rem;display:grid;gap:1.4rem;justify-items:start;align-self:start}
.ft .ft-cta p{font-family:var(--head);font-weight:900;font-size:2.2rem;line-height:1.4;color:var(--forest);opacity:1;margin:0}
.ft-cta .pill.white{background:var(--mint-deep);color:#fff}
.ft-cta .pill.white i{background:#fff;color:var(--mint-deep)}
.ft-cta{margin-top:14rem}
.ft-cta .c-ft{right:3rem;width:26rem}
.ft-cta .c-ft .bubble{right:92%;top:2.4rem}
.ft-cta .pill{white-space:nowrap}
/* フッターCTA：カードの白地を ::before で描き、キャラ(z 0)より上(z 1)に重ねて切り口を隠す。文字とボタンはさらに上(z 2) */
.ft-cta{background:transparent}
.ft-cta::before{content:"";position:absolute;inset:0;background:#fff;border-radius:2rem;z-index:1}
.ft-cta>p,.ft-cta>.pill{position:relative;z-index:2}
.ft-cta .c-ft{z-index:0;margin-bottom:-1.55rem}  /* peek1 の縁は幅の5.7%上 */
.ch .bubble{z-index:5}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .fv h1.main-copy{font-size:4.2rem}
  .collage{height:auto;aspect-ratio:4/3.4;margin-top:0.8rem}
  .scenes{grid-template-columns:1fr;gap:5.6rem}
  .circle{width:24rem}
  .sb{font-size:1.3rem}
  .sc-num strong{font-size:3.6rem}
  .resolve{grid-template-columns:1fr;gap:1.6rem}
  .resolve .vtitle{order:-1;margin:0 0 0.8rem}
  .rv-r{margin-top:0}
  .rv{padding:2.4rem 2.2rem}
  .rv h3{font-size:2rem}
  .how-panel{grid-template-columns:1fr;padding:1.8rem;gap:1.8rem}
  .how-steps b{font-size:1.8rem}
  .how-steps li{grid-template-columns:4.4rem minmax(0,1fr);padding:1.4rem 1.6rem}
  .hs-n{width:4.4rem;height:4.4rem;font-size:1.9rem}
  .fn-wrap{grid-template-columns:1fr;gap:2.4rem}
  .fn-title{order:-1;position:static}
  .funcs{grid-template-columns:1fr}
  .fc{padding:2.4rem 2.2rem}
  .fc h3{font-size:1.9rem}
  .num4{grid-template-columns:1fr;gap:2.8rem;margin-top:4rem}
  .nm-main strong{font-size:6rem}
  .nm strong{font-size:4.4rem}
  .scribble{height:11rem}
  .plans-wrap{margin-top:20rem}
  .ent{padding:2rem}
  .faqwrap .faqhead .faq-ttl{font-size:4.4rem}
  .entry{grid-template-columns:1fr;gap:2.8rem}
  .entry .en-ttl{font-size:3.6rem}
  .en-form{padding:2.4rem 2rem}
  .en-form-wrap{margin-top:20rem}
  .about{padding-block:9.6rem}
  .ab-photos .a3,.ab-photos .a4{display:none}
  .a1{top:3%;width:30%}.a2{top:4%;width:22%}
  .ab-ttl{font-size:2.6rem;margin-top:12rem}
  .ft{padding-inline:2.4rem}
  .ft-cta{margin-top:14.5rem;padding-inline:2rem}
  .ft-cta .c-ft{right:0.8rem;width:18rem;margin-bottom:-1.1rem}
  .ft-cta .c-ft .bubble{right:78%;top:-1.6rem}
}

/* 新しいミルピン(白背景を抜いて切りそろえ済み)：輪郭に白フチ。覗く系は窓のトリミングをやめて絵全体を出す */
.ch .mp{display:block;width:100%;height:auto;filter:drop-shadow(0.3rem 0 0 #fff) drop-shadow(-0.3rem 0 0 #fff) drop-shadow(0 -0.3rem 0 #fff) drop-shadow(0 0.3rem 0 #fff)}
.ch.peek .win:has(.mp){aspect-ratio:auto;overflow:hidden}
/* 胸で切れている絵は、下に体の色を45%伸ばした画像を使い、伸ばした分を画面の外へ逃がす(弾んでも切り口が見えない) */
.ch .mp.ext{margin-bottom:-45%}
/* 覗く絵は行き過ぎずに止める(窓の下端より上に切り口が出ない) */
.ch.peek.is-show .face:has(.mp){animation:peek2 .45s var(--e-out4) forwards}
@keyframes peek2{0%{translate:0 100%}100%{translate:0 0}}

/* FVのパーツ：体は止めて、しっぽと挙げた手だけ動かす。付け根を体の内側まで差し込み、パーツは体の後ろに置いて切り口を隠す。輪郭の白フチは合成後の全体に付ける */
.fvstage{filter:drop-shadow(0.3rem 0 0 #fff) drop-shadow(-0.3rem 0 0 #fff) drop-shadow(0 -0.3rem 0 #fff)}
.fvstage .fvchar{filter:none;position:relative;z-index:1}
.fvstage .part{position:absolute;left:0;top:0;width:100%;height:auto;z-index:0}
.c-fv.is-show .t1{animation:tail1 1.6s ease-in-out infinite alternate}
.c-fv.is-show .t2{animation:tail2 .5s ease-in-out 1.8s infinite alternate}
.c-fv.is-show .arm{animation:wave .42s ease-in-out 1.9s infinite alternate}
.c-fv .sway{transform-origin:50% 100%}
.c-fv.is-show .sway{animation:breathe 2.6s ease-in-out .6s infinite}
@keyframes breathe{0%,100%{scale:1 1}50%{scale:1.012 .988}}
/* 虫眼鏡のレンズに光を流す(①は数秒おき、②は切り替え時に1回) */
.glint{position:absolute;z-index:2;border-radius:50%;overflow:hidden;pointer-events:none}
.g1{left:26.1%;top:13.2%;width:30.75%;height:34.6%}
.g2{left:35.4%;top:47.7%;width:25.4%;height:28.6%}
.glint i{position:absolute;top:-20%;left:-60%;width:32%;height:140%;rotate:25deg;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0))}
.c-fv.is-show .g1 i{animation:glint 2.2s ease-in-out .7s infinite}
.c-fv.is-show .g2 i{animation:glint .9s ease-out 1.85s 1,glintSlow 3.6s ease-in-out 4.2s infinite}
@keyframes glint{0%{left:-60%}55%,100%{left:130%}}
@keyframes tail1{from{rotate:-4deg}to{rotate:4deg}}
@keyframes tail2{from{rotate:-6deg}to{rotate:6deg}}
@keyframes wave{from{rotate:-6deg}to{rotate:12deg}}
@media (prefers-reduced-motion:reduce){.c-fv.is-show .sway,.c-fv.is-show .glint i,.c-fv.is-show .part{animation:none}}

/* FV：①探している → 約1.8秒で ②見つけた！ に切り替え(シフトラと同じ時間配分) */
.c-fv .sway{position:relative}
.c-fv .s2{position:absolute;inset:0;opacity:0;transition:opacity 0s .2s}
.c-fv .s1{transition:opacity 0s .2s}
.c-fv.is-show .s1{opacity:0;transition:opacity .15s ease 1.8s}
.c-fv.is-show .s2{opacity:1;transition:opacity .15s ease 1.7s;animation:found .5s var(--e-chara) 1.75s both}
@keyframes found{0%{translate:0 0}40%{translate:0 -1.4rem}100%{translate:0 0}}
.c-fv .bubble.b1,.c-fv.is-show .bubble.b1{transition:none}
.c-fv.is-show .bubble.b1{animation:b1life 1.45s ease .35s both}
@keyframes b1life{0%{opacity:0;scale:0;translate:0 50%}18%{opacity:1;scale:1;translate:0 0}82%{opacity:1;scale:1;translate:0 0}100%{opacity:0;scale:0;translate:0 0}}
.c-fv.is-show .bubble.b2{transition:opacity .2s ease 1.95s,translate .45s var(--e-bubble) 1.95s,scale .35s var(--e-bubble) 2.05s}
@media (prefers-reduced-motion:reduce){
  .c-fv.is-show .s1{opacity:0;transition:none}
  .c-fv.is-show .s2{opacity:1;transition:none;animation:none}
  .c-fv.is-show .bubble.b1{animation:none;opacity:0}
  .c-fv.is-show .bubble.b2{transition:none}
}

/* FVのミルピン：虫眼鏡で反応を見る。反応アイコンが順に現れ、笑顔だけ光る */
.fvchar{width:100%;height:auto;display:block;filter:drop-shadow(0.3rem 0 0 #fff) drop-shadow(-0.3rem 0 0 #fff) drop-shadow(0 -0.3rem 0 #fff)}
.reacts{position:absolute;inset:0;pointer-events:none}
.rx{position:absolute;width:14.5%;aspect-ratio:1;translate:-50% -50%;opacity:0;scale:.4;transition:opacity .2s ease,scale 0s .2s}
.rx svg{width:100%;height:100%;display:block}
.ch.is-show .rx{opacity:1;scale:1;transition:opacity .25s ease calc(var(--d) * 1s + .4s),scale .4s var(--e-bubble) calc(var(--d) * 1s + .4s)}
.ch.is-show .rx{animation:rxfloat 2.6s ease-in-out calc(var(--d) * 1s + .9s) infinite alternate}
.ch.is-show .rx.good svg{animation:rxglow 1.4s ease-in-out calc(var(--d) * 1s + .9s) infinite alternate}
@keyframes rxfloat{from{transform:translateY(0)}to{transform:translateY(-0.8rem)}}
@keyframes rxglow{from{filter:drop-shadow(0 0 0.3rem rgba(150,240,200,.5))}to{filter:drop-shadow(0 0 1.6rem rgba(150,240,200,1))}}
@media (prefers-reduced-motion:reduce){.ch.is-show .rx,.ch.is-show .rx.good svg{animation:none}}

/* ===== ファインダーの枠(フルミル固有のモチーフ)：四隅の線で囲み、見えたら少し縮んでピントが合う ===== */
.vf,.vf-sm{position:relative;--vf-c:var(--mint-deep);--vf-l:2.6rem;--vf-g:-1.2rem}
.vf::after,.vf-sm::after{content:"";position:absolute;inset:calc(var(--vf-g) - 1.6rem);opacity:0;pointer-events:none;z-index:2;background:linear-gradient(var(--vf-c),var(--vf-c)) top left/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) top left/2px var(--vf-l) no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) top right/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) top right/2px var(--vf-l) no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom left/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom left/2px var(--vf-l) no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom right/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom right/2px var(--vf-l) no-repeat;transition:inset .6s var(--e-out4),opacity .3s ease}
.vf.vf-in::after,.vf-sm.vf-in::after{inset:var(--vf-g);opacity:1}
.vf-w{--vf-c:var(--forest)}
.vf-sm{--vf-l:1.6rem;--vf-g:1.2rem}
.vf-sm2{--vf-l:1.4rem;--vf-g:-0.8rem}
@media (prefers-reduced-motion:reduce){.vf::after,.vf-sm::after{transition:none;inset:var(--vf-g);opacity:1}}
/* FV：ファインダー越しの1枚 */
.finder{position:relative;padding:1.2rem}
.shot{--vf-g:1.6rem;--vf-l:4.4rem}

.hud{position:absolute;z-index:3;color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:.14em;background:rgba(6,40,34,.6);padding:0.3rem 1rem;border-radius:0.4rem}
.hud.h1{left:7.2rem;top:4.4rem}.hud.h2{right:7.2rem;top:4.4rem}.hud.h3{left:7.2rem;bottom:4.4rem}.hud.h4{right:7.2rem;bottom:4.4rem}
.grid9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.8rem;padding:0.8rem;background:#fff;border-radius:2rem}
.grid9 .t{position:relative;aspect-ratio:1;border-radius:1rem;overflow:hidden}
.grid9 .t img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .4s ease}
.grid9 .t.pick img{opacity:1}
.grid9 .t.pick::after{content:"";position:absolute;inset:0.6rem;border:2px solid #fff;border-radius:0.6rem;box-shadow:0 0 0 99.9rem rgba(0,0,0,0)}

/* 悩み：4:5の写真＋心の声 */
.pic45{margin:0;width:30rem;max-width:100%;aspect-ratio:4/5}
.pic45 img{width:100%;height:100%;object-fit:cover;border-radius:1.6rem;display:block}
.pic45 figcaption{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;z-index:3;background:rgba(255,255,255,.95);color:var(--ink);border-radius:1rem;padding:1rem 1.4rem;font-size:1.5rem;font-weight:700;font-family:var(--head);text-align:left;line-height:1.5}
.pic45 figcaption::before{content:"心の声";display:block;font-size:1.1rem;color:var(--mint);letter-spacing:.12em}
.answer{display:grid;justify-items:center;gap:1.8rem;margin-top:10.4rem}
.vf-ico{width:4.8rem;height:4.8rem;--vf-c:var(--mint);--vf-l:1.4rem;background:linear-gradient(var(--vf-c),var(--vf-c)) top left/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) top left/2px var(--vf-l) no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) top right/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) top right/2px var(--vf-l) no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom left/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom left/2px var(--vf-l) no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom right/var(--vf-l) 2px no-repeat,linear-gradient(var(--vf-c),var(--vf-c)) bottom right/2px var(--vf-l) no-repeat}
/* 解決：3×2 */
.resolve{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem;margin-top:4.8rem}
.rv{padding:4.4rem 3.8rem 3.8rem}
.rv small{display:block;color:var(--mint);font-weight:900;font-size:1.3rem;letter-spacing:.12em;margin-bottom:0.6rem}
/* 機能：見出しは上 */
.funcs{margin-top:5.6rem}
/* 数字：枠＋撮影日のような時点表記 */
.num4{align-items:stretch}
.nm.vf{background:#fff;padding:3rem 2.4rem 2.4rem;--vf-g:0px;--vf-l:2.2rem;align-content:start}
.stamp{position:absolute;right:1.4rem;top:1rem;font-family:ui-monospace,Menlo,monospace;font-size:1.2rem;color:var(--forest);letter-spacing:.08em}
.faqwrap .faqhead .faq-ttl{font-size:4.4rem}
#num .in{padding-left:21rem}
.nm-main strong{font-size:8.4rem}
.entry .en-ttl{font-size:5.2rem;line-height:1.35}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .finder{padding:0.6rem}
  .shot{--vf-l:2.8rem;--vf-g:1rem}
  .hud{font-size:1rem;padding:2px 0.6rem}
  .hud.h1,.hud.h3{left:4.4rem}.hud.h2,.hud.h4{right:4.4rem}
  .hud.h1,.hud.h2{top:2.2rem}.hud.h3,.hud.h4{bottom:2.2rem}
  .pic45{width:24rem}
  .answer{margin-top:7.2rem}
  .resolve{grid-template-columns:1fr}
  .nm.vf{padding:2.6rem 1.8rem 1.8rem}
  .faqwrap .faqhead .faq-ttl{font-size:3.2rem}
  .entry .en-ttl{font-size:3rem}
  #num .in{padding-left:2rem}
}

/* ===== シフトラ実測値に合わせた上書き(PC：1440px基準のrem) ===== */
:root{--hdr:7.7rem}
body{font-size:1.6rem;line-height:1.8;letter-spacing:.05em;padding-inline:0;padding-block:var(--hdr) 0}
.in{max-width:124.8rem;padding-inline:0}
.panel{padding-block:16rem}
.kh{font-size:6rem;line-height:1.45}
.kh em{font-size:1.2em}
.eyebrow{font-size:1.4rem;margin-bottom:1.6rem}
.lead{font-size:1.6rem;margin-top:3.2rem;max-width:64rem}
.note{font-size:1.3rem}
.sample{font-size:1.3rem}
.nav{font-size:1.4rem}
.logo svg{height:2.8rem}
.hdr .pill{font-size:1.4rem;padding:1.1rem 2.4rem}
.pill{font-size:2rem;padding:1.8rem 1.6rem 1.8rem 3.4rem;gap:1.6rem}
.pill i{width:3.6rem;height:3.6rem}
.pill i svg{width:1.6rem;height:1.6rem}
/* FV：1画面を使い切る */
.fv{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;padding-top:6rem}
.fv-grid{max-width:none;width:100%;padding-inline:9.6rem 38rem;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);column-gap:4rem}
.fv .kicker{font-size:1.4rem;padding:.5rem 1.6rem}
.fv h1{font-size:4rem;line-height:1.35;margin-top:2.4rem}
.fv h1 em{font-size:1.2em}
.fv .desc{font-size:1.6rem;margin-top:2.4rem}
.fv .ctas{margin-top:3.6rem;gap:1.6rem}
.trust{max-width:none;padding-inline:9.6rem;margin-top:5.6rem}
.st small{font-size:1.3rem}
.st strong{font-size:3.2rem}
.st span{font-size:1.1rem}
.ui,.roster{max-width:none}
.ui{font-size:1.4rem}
/* 本文 */
.wcard{padding:4rem 3.2rem 3.2rem;gap:1.6rem}
.wcard h3{font-size:2.6rem}
.wcard p{font-size:1.6rem}
.wcard .voice{font-size:1.5rem}
.wicon{width:9.6rem;height:9.6rem}
.cause h3{font-size:3.2rem}
.cause p{font-size:1.6rem}
.vtitle{font-size:9rem}
.cmp-row{grid-template-columns:18rem minmax(0,1fr) minmax(0,1fr)}
.cmp-row > *{font-size:1.8rem;padding:2rem 2.4rem}
.cmp-row .k{font-size:2.2rem}
.cmp-head > *{font-size:1.5rem}
.flow b{font-size:2.4rem}
.flow span{font-size:1.6rem}
.flow li{padding:2.4rem 2.8rem 2.4rem 8rem}
.flow li::before{width:4rem;height:4rem;font-size:1.8rem;left:2.4rem;top:2.4rem}
.est div{font-size:1.5rem}
.est b{font-size:1.8rem}
.step h3{font-size:2.6rem}
.step p{font-size:1.6rem}
.step .chip{font-size:1.4rem}
.big .lb{font-size:1.8rem}
.big3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
.big strong{font-size:8.4rem}
.big .src{font-size:1.4rem}
.prod dl{font-size:1.6rem}
.sns-row{grid-template-columns:14rem 7rem minmax(0,1fr)}
.sns-row b{font-size:2rem}
.sns-row strong{font-size:4rem}
.sns-row span{font-size:1.5rem}
.sub-h{font-size:3.6rem}
.chip{font-size:1.6rem;padding:.9rem 2.4rem}
.case h3{font-size:2.2rem}
.case p{font-size:1.5rem}
.nums b{font-size:2.4rem}
.fit h3{font-size:2.6rem}
.fit ul{font-size:1.8rem}
.faqwrap{grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr)}
.faqhead{order:2;min-height:68rem}
.faqhead .kh{font-size:6rem}
summary{font-size:1.8rem;grid-template-columns:4.4rem minmax(0,1fr) 3rem;padding:2.2rem 0}
summary .q{width:4.4rem;height:4.4rem;font-size:2rem}
details{padding:0 2.8rem}
details .a{font-size:1.6rem;padding:0 0 2.4rem 5.6rem}
.terms dt{font-size:1.5rem}
.terms dd{font-size:3.2rem}
.terms dd small{font-size:1.4rem}
.get{position:relative;max-width:110rem;margin-top:12rem}
.get > div b{font-size:2.2rem}
.get > div span{font-size:1.5rem}
.cta .also,.assure{font-size:1.6rem}
.post h3{font-size:2.2rem}
.creators p{font-size:1.8rem}
.brandline p{font-size:4.8rem}
.ft ul{font-size:1.5rem}

/* キャラ：シフトラの位置と大きさ(シフトラの正方形キャラの幅 ≒ カワウソの高さ になるよう、幅は÷1.54) */
.bubble{font-size:1.8rem;padding:1.4rem 2.6rem}
.ch .bubble{left:auto;right:auto}
.c-fv{position:fixed;z-index:35;right:-4rem;bottom:-2rem;width:44rem}
.ch.diag:not(.is-show) .body{translate:25% 50%}
.c-fv .bubble{right:30%;top:-9%;z-index:4}
/* 解決：カードを左右2列にして、中央カラム(30rem)をキャラの居場所として空ける(シフトラと同じ) */
.resolve{grid-template-columns:minmax(0,1fr) 30rem minmax(0,1fr);column-gap:3rem;row-gap:2.4rem;margin-top:9rem}
.resolve .rv:nth-child(odd){grid-column:1}
.resolve .rv:nth-child(even){grid-column:3}
/* キャラは中央カラムの grid item として sticky：カードが見えている間は画面下端に貼り付き、カラムの外(上下の見出し)には出ない */
.c-worry{position:sticky;grid-column:2;grid-row:1/4;align-self:end;justify-self:center;left:auto;right:auto;bottom:0;width:30rem}
.c-worry .bubble{left:0;right:0;width:max-content;margin-inline:auto;top:-6rem}
/* 機能：カードを2列・86remに収め、右カラムをキャラ用に空ける */
.funcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;max-width:86rem}
.c-mech{right:1.9rem;bottom:0;width:34rem}
.c-mech .bubble{right:40%;top:-6rem}
.c-proof{left:-4rem;bottom:0;width:30rem}
.c-proof .bubble{left:7.6rem;top:-20%}
.c-faq{left:auto;right:0;bottom:0;width:26rem}
.c-faq .bubble{right:50%;top:-6rem}
.c-pk{width:16rem}
.c-terms{right:10.2rem}
.c-cta{left:calc(50% - 11rem)}
.ch.peek .bubble{right:80%;top:-1rem}
#price .c-pk{width:28rem;right:2rem}
#price .c-pk .bubble{right:86%;top:1rem}
#entry .c-pk{width:25rem;left:1rem;right:auto}
#entry .c-pk .bubble{left:70%;right:auto;top:-1.4rem}
/* 覗く系の切り口：料金・申込はカードをキャラより上に重ね、絵のお腹の平らな縁(手より約12px上)ごとカードの裏に隠す */
.plans,.en-form{position:relative;z-index:1}
/* お腹の平らな縁は画像の下端から「幅の7.2%」上にある(実測)。pxだと画面幅で絵の大きさが変わりズレるので、幅と同じremで沈める */
#price .c-pk{z-index:0;margin-bottom:-2.1rem}
#entry .c-pk{z-index:0;margin-bottom:-1.9rem}

/* ===== スマホ：400px基準のrem ===== */
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  :root{--hdr:6.4rem}
  body{padding-inline:0;padding-block:var(--hdr) 0}
  .in{padding-inline:2rem}
  .panel{padding-block:8rem}
  .kh{font-size:2.4rem}
  .kh .ln{white-space:normal}
  .lead{font-size:1.5rem}
  .pill{font-size:1.7rem;padding:1.5rem 1.4rem 1.5rem 2.6rem;white-space:normal;max-width:100%;text-align:left}
  .hdr .pill{font-size:1.3rem;padding:.9rem 1.6rem;white-space:nowrap}
  .hdr{padding-inline:2rem;gap:1rem}
  .logo svg{height:2.4rem}
  .fv{min-height:0;padding-top:4rem}
  .fv-grid{padding-inline:2rem;grid-template-columns:1fr}
  .fv h1{font-size:2.6rem}
  .fv .kicker{font-size:1.2rem}
  .fv .desc{font-size:1.4rem}
  .trust{padding-inline:2rem;margin-top:3.6rem}
  .st strong{font-size:2rem}
  .st small{font-size:1rem}
  .wcard h3{font-size:2rem}
  .wcard p,.wcard .voice{font-size:1.5rem}
  .wicon{width:7.6rem;height:7.6rem}
  .cause h3{font-size:2rem}
  .vtitle{font-size:4.5rem}
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row > *{font-size:1.4rem;padding:1.2rem 1.4rem}
  .cmp-row .k{font-size:1.6rem;padding:.8rem 0 0}
  .flow b{font-size:1.8rem}
  .flow span{font-size:1.4rem}
  .flow li{padding:1.8rem 1.8rem 1.8rem 6.4rem}
  .flow li::before{width:3.2rem;height:3.2rem;font-size:1.5rem;left:1.8rem;top:1.8rem}
  .step h3{font-size:2rem}
  .step p{font-size:1.5rem}
  .big3{grid-template-columns:1fr}
  .big strong{font-size:6.4rem}
  .big .lb{font-size:1.6rem}
  .sns-row{grid-template-columns:9rem 5rem minmax(0,1fr)}
  .sns-row strong{font-size:2.8rem}
  .sns-row b{font-size:1.6rem}
  .sub-h{font-size:2.2rem}
  .case h3{font-size:1.8rem}
  .fit h3{font-size:2rem}
  .fit ul{font-size:1.5rem}
  .faqwrap{grid-template-columns:1fr}
  .faqhead{order:0;min-height:0}
  .faqhead .kh{font-size:3.6rem}
  summary{font-size:1.6rem;grid-template-columns:3.6rem minmax(0,1fr) 2.6rem}
  summary .q{width:3.6rem;height:3.6rem;font-size:1.6rem}
  details{padding:0 1.6rem}
  details .a{font-size:1.4rem;padding:0 0 1.8rem 4.8rem}
  .terms dd{font-size:2.2rem}
  .get{margin-top:9rem}
  .get > div b{font-size:1.8rem}
  .brandline p{font-size:1.9rem}
  .creators p{font-size:1.5rem}
  .bubble{font-size:1.3rem;padding:.8rem 1.4rem}
  /* スマホのキャラ：fixed をやめてセクション内 absolute。各セクションの下余白を居場所として空け、幅は画面の42〜52%(シフトラと同じ) */
  .ch.fixed{position:absolute;z-index:30}
  /* FV：初回画面の「資料請求」ボタン右の空きに置き、写真グリッドをその分だけ下げる(シフトラSPと同じく1画面目に出す) */
  .c-fv{position:absolute;right:-1.2rem;top:49.4rem;bottom:auto;width:18.4rem;z-index:3}
  .c-fv .bubble{right:82%;top:14%}
  .finder{margin-top:7rem;position:relative;z-index:4}  /* 写真グリッドをキャラ(z 3)の上に重ね、胸の切り口を隠す */
  .shot{background:var(--bg)}  /* FV と同色の不透明地。グリッドの余白越しに切り口が透けない */
  .arc{margin-top:4.8rem}
  .resolve{grid-template-columns:1fr;gap:1.6rem}
  .resolve .rv:nth-child(odd),.resolve .rv:nth-child(even){grid-column:auto}
  .problem{padding-bottom:32rem}
  .c-worry{position:absolute;left:auto;right:-1rem;bottom:0;width:18.7rem}
  .c-worry .bubble{left:auto;right:55%;width:auto;margin:0;top:-2rem}
  .funcs{grid-template-columns:1fr;max-width:none}
  #func.panel{padding-bottom:27rem}
  .c-mech{right:-0.5rem;bottom:0;width:20rem}
  .c-mech .bubble{right:55%;top:-2.8rem}
  #num.panel{padding-bottom:33rem}
  .c-proof{left:-2rem;bottom:0;width:18rem}
  .c-proof .bubble{left:55%;top:-2.8rem}
  .faqhead{padding-bottom:28rem}
  .c-faq{display:block;left:auto;right:-2rem;bottom:0;width:17rem}
  .c-faq .bubble{right:60%;top:-1.5rem}
  #price .c-pk,#entry .c-pk{width:18rem;left:auto;right:2rem;margin-bottom:-1.4rem}
  #price .c-pk .bubble,#entry .c-pk .bubble{left:auto;right:72%;top:-1rem}
}

/* ===== 動きのキット(絵は変えない：全身の transform と周囲の光・点だけ) ===== */
/* ---- A. 登場バリエーション(.body) ---- */
.ch.diag-l .body{translate:-25% 50%;scale:.8}
.ch.lean-l .body{rotate:-8deg}
.ch.lean-r .body{rotate:8deg}

/* ---- B. 覗く系の登場 3 種(下端=切り口は動かさない) ---- */
.ch.peek .face{transform-origin:50% 100%}
.ch.peek.is-show .face{opacity:1;transition:opacity .15s ease}
.ch.peek .win:has(.mp){padding-top:6%}
.ch.peek .bubble{top:calc(-1rem + 6%)}
.ch.peek.is-show .face:has(.mp){animation:peek3 .55s var(--e-out4) forwards}
.ch.peek[data-zone="entry"].is-show .face:has(.mp){animation:peekShy 1s var(--e-out4) forwards}
.ch.peek[data-zone="ft"].is-show .face:has(.mp){animation:peekSide .5s var(--e-out4) forwards}
@keyframes peek3{0%{translate:0 100%;scale:1 .9}62%{translate:0 0;scale:1 1.06}100%{translate:0 0;scale:1 1}}
@keyframes peekShy{0%{translate:0 100%}38%{translate:0 50%}60%{translate:0 50%}100%{translate:0 0}}
@keyframes peekSide{0%{translate:-16% 100%}100%{translate:0 0}}

/* ---- C. 吹き出しの遅れを配置ごとに(--bd)。FV の b1/b2 は既存ルールのまま ---- */
.ch.is-show .bubble{transition-delay:var(--bd,.3s),var(--bd,.3s),calc(var(--bd,.3s) + .1s)}
.c-mech{--bd:.55s}
.c-proof{--bd:.35s}
.c-faq{--bd:.5s}
.ch.peek[data-zone="price"]{--bd:.5s}
.ch.peek[data-zone="entry"]{--bd:1.05s}
.ch.peek[data-zone="ft"]{--bd:.45s}
.ch:not(.c-fv) .bubble.b1,.ch:not(.c-fv).is-show .bubble.b1{transition:none}
.ch:not(.c-fv).is-show .bubble.b1{animation:b1life var(--b1-t,1.7s) ease var(--bd,.3s) both}
.ch:not(.c-fv).is-show .bubble.b2{transition-delay:var(--b2-d,2.1s),var(--b2-d,2.1s),calc(var(--b2-d,2.1s) + .1s)}
.bubble.swap{animation:bswap .45s var(--e-bubble)}
@keyframes bswap{0%{scale:.6}100%{scale:1}}

/* ---- D. 待機(features / func / num / faq。FV は既存の breathe/tail/arm のまま) ---- */
@keyframes breathe2{0%,100%{scale:1 1}50%{scale:1.015 .985}}
@keyframes hop{0%,84%,100%{translate:0 0}88%{translate:0 -1.4rem}93%{translate:0 .25rem}}
@keyframes nod{0%,100%{translate:0 0}50%{translate:0 -.5rem}}
@keyframes tilt{0%,58%,100%{rotate:0deg}66%,84%{rotate:-4deg}}
@media (prefers-reduced-motion:no-preference){
  .c-worry.is-show .sway{animation:sway 1.8s ease-in-out .5s infinite alternate,breathe2 2.6s ease-in-out .6s infinite,hop 6.5s var(--e-chara) 2.4s infinite}
  .c-mech.is-show .sway{animation:breathe2 3.2s ease-in-out .7s infinite,hop 9s var(--e-chara) 3.4s infinite}
  .c-proof.is-show .sway{animation:nod 2.2s ease-in-out .5s infinite,breathe2 2.2s ease-in-out .5s infinite}
  .c-faq.is-show .sway{animation:breathe2 2.8s ease-in-out .5s infinite,tilt 5.5s var(--e-chara) 1.6s infinite}
}

/* ---- E. 待機(覗く系 3 体: .mp に scaleY / skewX だけ。下端は固定) ---- */
@keyframes pkBreathe{0%,100%{scale:1 1}50%{scale:1 1.025}}
@keyframes pkLean{0%,100%{transform:skewX(0)}32%{transform:skewX(-1.8deg)}68%{transform:skewX(1.8deg)}}
@keyframes pkDuck{0%,80%,100%{transform:scaleY(1)}86%{transform:scaleY(.9)}92%{transform:scaleY(1.03)}}
@keyframes pkWave{0%,58%,100%{transform:skewX(0)}62%{transform:skewX(-2.4deg)}66%{transform:skewX(2.4deg)}70%{transform:skewX(-2.4deg)}74%{transform:skewX(2.4deg)}78%{transform:skewX(0)}}
@media (prefers-reduced-motion:no-preference){
  .ch.peek .mp{transform-origin:50% 100%}
  .ch.peek[data-zone="price"].is-show .mp{animation:pkBreathe 2.6s ease-in-out .8s infinite,pkLean 5s ease-in-out 1.4s infinite}
  .ch.peek[data-zone="entry"].is-show .mp{animation:pkBreathe 3s ease-in-out 1.2s infinite,pkDuck 7s var(--e-chara) 3s infinite}
  .ch.peek[data-zone="ft"].is-show .mp{animation:pkBreathe 2.4s ease-in-out .8s infinite,pkWave 5s ease-in-out 1.6s infinite}
}

/* ---- F. アクセント形状(ブランド色の点・星・光。キャラの絵には触れない) ---- */
.spk,.star{position:absolute;pointer-events:none;z-index:4;opacity:0;left:var(--x);top:var(--y)}
.spk{width:var(--s,1.2rem);height:var(--s,1.2rem);border-radius:50%;background:var(--forest)}
.star{width:var(--s,1.6rem);height:var(--s,1.6rem);background:var(--c,#F6EDD6);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes spkBurst{0%{opacity:0;scale:.2;translate:0 0}30%{opacity:1;scale:1}100%{opacity:0;scale:.5;translate:var(--dx,0) var(--dy,-2.4rem)}}
@keyframes spkThink{0%,8%{opacity:0;scale:.4}16%,55%{opacity:1;scale:1}62%,100%{opacity:0;scale:.4}}
@keyframes starTw{0%,100%{opacity:0;scale:.3;rotate:0deg}30%{opacity:1;scale:1}60%{opacity:.9;scale:.75;rotate:35deg}80%{opacity:0;scale:.3;rotate:45deg}}
@keyframes glintSlow{0%{left:-60%}28%,100%{left:130%}}
.c-proof .sway{position:relative}
.c-proof .g3{left:34%;top:62%;width:34%;height:31%;border-radius:.8rem}
@media (prefers-reduced-motion:no-preference){
  .c-fv.is-show .spk{animation:spkBurst .7s steps(5) calc(1.75s + var(--i) * .06s) both}
  .c-faq.is-show .spk{animation:spkThink 3.6s ease calc(1.2s + var(--i) * .35s) infinite}
  .c-worry.is-show .star{animation:starTw 2.8s ease-in-out calc(.9s + var(--i) * .5s) infinite}
  .c-proof.is-show .g3 i{animation:glintSlow 3.2s ease-in-out 1.4s infinite}
}

/* ---- G. ポインタで浮く(hover 端末のみ。class 指定なので fixed/absolute どちらでも同じ) ---- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .c-worry .body,.c-mech .body,.c-proof .body,.c-faq .body{pointer-events:auto}
  .c-worry.is-show .body:hover,.c-mech.is-show .body:hover,.c-proof.is-show .body:hover,.c-faq.is-show .body:hover{translate:0 -.8rem}
}

/* ---- reduce：覗く系は opacity だけで出し入れ(傾き・ひょこっ・待機なし) ---- */
@media (prefers-reduced-motion:reduce){
  .ch .body,.ch.is-show .body{rotate:0deg}
  .ch.peek .face:has(.mp),.ch.peek.is-show .face:has(.mp),.ch.peek[data-zone].is-show .face:has(.mp){animation:none;translate:0 0;transition:none}
  .ch.peek .face{opacity:0}.ch.peek.is-show .face{opacity:1}
}

/* ===== 1項目=1画面(2026-10-16 オーナー指示)：各セクション = 1画面(ヘッダー除く)。文言・配色・順番・絵は不変、余白と文字サイズだけ ===== */
.panel,.stack>section{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.panel>:not(.ch),.stack>section>:not(.ch){width:100%}
.panel{padding-block:2.4rem}
.kh{font-size:5rem}
.lead{margin-top:1.6rem}
/* fv：本文を上下中央、アーチは下端 */
.fv{padding-top:4rem;min-height:calc(100svh - var(--hdr))}
.fv-grid{margin:auto auto 0}
.fv-grid>.trust{grid-column:1/-1;padding-inline:0;max-width:none;margin:3rem 0 3rem}
.arc{height:6rem;margin-top:auto}
/* 悩み */
#worry{padding:3rem 0}
.scenes{margin-top:3.2rem;gap:3.2rem}
.pic45{width:24rem}
.sc-txt{font-size:1.5rem}
.problem .src-note{margin-top:2rem}
/* 解決：見出し(だから、フルミルする。)＋3行×2列。中央カラム 26rem にキャラ(sticky) */
#features{padding:3rem 0 0;justify-content:flex-end}  /* グリッド下端＝パネル下端にして、沈めた切り口を .stack の clip で隠す */
.answer{margin-top:0;gap:1.4rem}
.resolve{margin-top:3rem;row-gap:2rem;grid-template-columns:minmax(0,1fr) 26rem minmax(0,1fr)}
.rv{padding:2.6rem 2.8rem 2.4rem}
.rv h3{font-size:2.2rem}
.rv p{font-size:1.4rem;margin-top:.8rem;line-height:1.7}
.c-worry{width:26rem;bottom:-1.5rem;margin-bottom:-1.5rem}
.c-worry .mp.ext{margin-bottom:0;aspect-ratio:669/900;object-fit:cover;object-position:top}
/* 使い方 */
.how-panel{margin-top:2.4rem;padding:2.4rem;gap:2.4rem}
.loop{padding:2.4rem 2.4rem 3.6rem;row-gap:6.4rem;column-gap:3rem;grid-template-areas:"a b" "d c"}
.loop .ring{width:22rem;height:22rem;top:calc(50% - .6rem)}
.hub{width:9rem;height:9rem;font-size:1.4rem;top:calc(50% - .6rem)}
.loop .sample{position:absolute;right:2.4rem;bottom:.8rem}
.how-steps li{padding:1.2rem 2rem}
.how-steps b{font-size:2rem}
#how .note{margin-top:1.2rem}
/* 機能：3列×3行、キャラは見出しの右横でカードの上端に立つ(伸ばした体は使わず、下端をカードの裏に沈める) */
.fn-body{position:relative;margin-top:2rem}
.funcs{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;max-width:none;margin-top:0}
.fc{padding:1.8rem 2.2rem;z-index:31}
.fc .ic{width:4rem;height:4rem;right:2rem;top:2rem}
.fc h3{font-size:1.9rem;padding-right:5rem}
.fc p{font-size:1.3rem;line-height:1.65}
.fn-note{margin-top:1.2rem}
.c-mech{position:absolute;left:auto;right:3rem;top:auto;bottom:100%;width:23rem;margin-bottom:-1.6rem}
.c-mech .mp.ext{margin-bottom:0;aspect-ratio:900/832;object-fit:cover;object-position:top}
.c-mech .bubble{right:72%;top:2rem}
/* 数字 */
.num4{margin-top:3rem;gap:2.4rem}
.nm.vf{padding:2.4rem 2rem 2rem}
.nm strong{font-size:5.2rem}
.nm-main strong{font-size:7.2rem}
.ceeev{margin-top:3rem;padding:2.4rem 3.2rem}
.ce-head p{font-size:2.2rem}
.ce-num strong{font-size:6rem}
.ce-cases{margin-top:2rem}
.ce-cases div{padding:1.4rem 2rem}
.ce-cases strong{font-size:3rem}
.ceeev .note{margin-top:1.2rem}
/* 料金：キャラは見出しの右横(プラン上端の縁から顔を出す) */
#price.panel{padding-block:2rem}
.price-sec .lead{max-width:64rem;margin-top:1.2rem}
.plans-wrap{margin-top:2.8rem}
#price .c-pk{width:23rem;right:0;margin-bottom:-1.7rem}
#price .c-pk .bubble{right:76%;top:1rem}
.plan{padding:1.8rem 2.4rem 1.8rem}
.plan h3{font-size:2.2rem}
.price strong{font-size:3.8rem}
.plan ul{font-size:1.4rem;line-height:1.5;gap:.4rem}
.plan-note{margin-top:1rem;line-height:1.7}
.ent{margin-top:1.2rem;padding:1rem 2.8rem}
/* FAQ */
.faqhead{min-height:58rem}
.faqhead p{margin-top:1.2rem}
.faqs{gap:1rem}
summary{padding:1.4rem 0;font-size:1.55rem;grid-template-columns:3.6rem minmax(0,1fr) 3rem;gap:1rem}
summary .q{width:3.6rem;height:3.6rem;font-size:1.6rem}
details .a{font-size:1.5rem;padding:0 0 2rem 4.6rem;line-height:1.75}
.c-faq{width:24rem}
.c-faq .bubble{right:auto;left:0;top:-3rem}
/* 申込 */
.entry{gap:6rem}
.en-lead{margin-top:1.2rem}
.en-steps{margin-top:2.4rem;gap:1rem}
.en-steps li{padding:1.2rem 1.8rem;grid-template-columns:4.4rem minmax(0,1fr);gap:1.4rem}
.en-steps span{width:4.4rem;height:4.4rem;font-size:1.9rem}
.en-steps b{font-size:1.7rem}
#entry .c-pk{width:23rem;margin-bottom:-1.7rem}
#entry .c-pk .bubble{left:70%;top:2rem}
.en-form-wrap{margin-top:15.5rem}
.en-form{padding:1.8rem 3.2rem;gap:.2rem}
.en-form label{margin-top:.3rem;font-size:1.3rem}
.en-form input[type=text],.en-form input[type=email],.en-form input[type=tel],.en-form select{padding:.7rem 1.4rem;font-size:1.4rem}
.en-form .agree{margin-top:1rem}
.en-form button{margin-top:1.2rem}
.en-form .note{margin-top:.8rem;line-height:1.6}
/* 想い・ブログ・フッター */
.about{padding-block:6rem}
.posts{margin-top:3.2rem}
.post .pic{aspect-ratio:16/7}
.more{margin-top:2rem}
.ft{padding:4rem 6.4rem 3rem}
.ft small{margin-top:3rem}

/* ---- スマホ(1rem = min(幅/40, 高さ/90))：横スクロールの帯と小カードで 80rem 以下に ---- */
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .panel,#num.panel,#func.panel{padding-block:2.4rem}
  #num.panel{padding-block:3.4rem 1.4rem}  /* 吹き出しの頭ぶんだけ下げる(合計は同じ) */
  .kh{font-size:2.4rem}
  .pill i{width:3rem;height:3rem}
  /* fv：写真グリッド(左)＋実績3つ(右の縦積み)。キャラは右下、切り口はセクション下端で隠す */
  .fv{padding-top:2.4rem;overflow:clip}
  .fv-grid{grid-template-columns:minmax(0,1fr) 13.5rem;column-gap:1.2rem;row-gap:1.6rem;padding-inline:2rem;align-items:stretch}
  .fv-grid>div:first-child{grid-column:1/-1}
  .finder{grid-column:1;grid-row:2;margin-top:0;align-self:start}
  .fv-grid>.trust{grid-column:2;grid-row:2;display:grid;align-content:space-between;gap:.4rem;margin:0;padding:0}
  .st{padding:.5rem 0 .3rem;border-left:0;border-top:0;flex:none}
  .st:first-child{border-top:0;padding-top:0}
  .st strong{font-size:2rem}.st small{font-size:1rem}.st span{font-size:1rem;line-height:1.45}
  .fv h1.main-copy{font-size:2.6rem;margin-top:1.4rem}
  .fv .desc{font-size:1.4rem;margin-top:1.4rem}
  .fv .ctas{margin-top:1.6rem;gap:1rem;flex-wrap:nowrap}
  .fv .ctas .pill{font-size:1.5rem;padding:1.2rem 1.1rem 1.2rem 2rem;gap:1rem;white-space:nowrap}
  .arc{margin-top:6rem;height:6rem}
  .c-fv{position:absolute;right:-1rem;top:auto;bottom:0;width:13rem}
  .c-fv .bubble{right:80%;top:10%}
  /* 悩み：3カードの横スクロール帯 */
  #worry{padding:2.4rem 0}
  .scenes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.6rem;margin:2.4rem -2rem 0;padding:1.6rem 2rem;scrollbar-width:none}
  .scenes::-webkit-scrollbar{display:none}
  .scene{flex:0 0 76vw;scroll-snap-align:start;gap:1.2rem}
  .pic45{width:24rem}
  .sc-txt{font-size:1.4rem}
  .sc-num strong{font-size:3.2rem}
  .problem .src-note{margin-top:1.2rem;font-size:1.1rem;line-height:1.6}
  /* 解決：2列×3行の小カード。キャラは見出しの右横で1行目のカード上端に立つ */
  #features{padding:2.4rem 0}
  .answer{grid-template-columns:minmax(0,1fr) 10rem;justify-items:start;text-align:left;row-gap:1rem;column-gap:.4rem;min-height:14rem;align-content:end}
  .answer .vf-ico,.answer .kh{grid-column:1}
  .answer .vf-ico{width:3.6rem;height:3.6rem}
  #features .kh{font-size:1.9rem}
  .resolve{position:relative;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
  .resolve .rv{z-index:31;padding:1.4rem 1.2rem}
  .rv small{font-size:1.1rem;margin-bottom:.3rem}
  .rv h3{font-size:1.5rem;line-height:1.35}
  .rv p{font-size:1.2rem;line-height:1.55;margin-top:.6rem}
  .vf-sm{--vf-g:.8rem;--vf-l:1.2rem}
  .c-worry{position:absolute;grid-column:auto;grid-row:auto;left:auto;right:0;top:auto;bottom:100%;width:11rem;margin-bottom:-1rem}
  .c-worry .mp.ext{margin-bottom:0;aspect-ratio:669/900;object-fit:cover;object-position:top}
  .c-worry .bubble{left:auto;right:60%;width:auto;margin:0;top:-3.6rem}
  /* 使い方：図は小さく、4ステップは横スクロール帯 */
  .how-panel{margin-top:2.4rem;padding:1.4rem;gap:1.4rem}
  .loop{padding:1.4rem 1.4rem 3.6rem;row-gap:6rem;column-gap:1.4rem;grid-template-areas:"a b" "d c"}
  .loop .ring{width:18rem;height:18rem;top:calc(50% - 1.1rem)}
  .hub{width:7.4rem;height:7.4rem;font-size:1.1rem;top:calc(50% - 1.1rem)}
  .node{padding:1.2rem}
  .node small{font-size:1.1rem}.node b{font-size:1.4rem}.node span{font-size:1.15rem;line-height:1.55}
  .loop .sample{right:1.4rem;bottom:.8rem;font-size:1.1rem}
  .how-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin:0 -1.4rem;padding:0 1.4rem;scrollbar-width:none}
  .how-steps::-webkit-scrollbar{display:none}
  .how-steps li{flex:0 0 68vw;scroll-snap-align:start;grid-template-columns:3.6rem minmax(0,1fr);gap:1.2rem;padding:1.2rem 1.4rem}
  .hs-n{width:3.6rem;height:3.6rem;font-size:1.6rem}
  .how-steps b{font-size:1.6rem}
  .how-steps p{font-size:1.25rem;line-height:1.6}
  #how .note{margin-top:1.2rem;font-size:1.1rem}
  /* 機能：9カードの横スクロール帯。キャラは見出し右横で帯の上端に立つ(カード間の隙間は地色の影で塞ぐ) */
  #func .kh,#func .lead{text-align:left;padding-right:13rem}
  #func .lead{font-size:1.3rem;margin:1rem 0 0;max-width:none}
  .fn-body{margin-top:2rem}
  .funcs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.4rem;margin:0 -2rem;padding:0 2rem;scrollbar-width:none;max-width:none}
  .funcs::-webkit-scrollbar{display:none}
  .fc{flex:0 0 72vw;scroll-snap-align:start;padding:1.8rem;box-shadow:0 0 0 .8rem var(--bg)}
  .fc h3{font-size:1.8rem;padding-right:4.6rem}
  .fc p{font-size:1.3rem;line-height:1.6}
  .fn-note{margin-top:1.4rem;font-size:1.1rem}
  .c-mech{right:0;width:12rem;margin-bottom:-1.2rem}
  .c-mech .bubble{right:30%;top:-5rem}
  /* 数字：見出し左横にキャラ、数字は2列×2行、事例は横スクロール帯 */
  #num .in{padding-inline:2rem}
  #num .kh,#num .lead{text-align:left;padding-left:11rem}
  #num .kh{font-size:1.9rem}
  #num .lead{font-size:1.3rem;margin:.8rem 0 0;max-width:none}
  .num4{position:relative;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
  .nm.vf{padding:2rem 1.2rem 1.2rem;z-index:31;gap:.5rem}
  .nm .lb{font-size:1.1rem;padding:.2rem .8rem}
  .nm strong,.nm-main strong{font-size:3.6rem}
  .nm p{font-size:1.1rem;line-height:1.45}
  .stamp{font-size:1rem;right:1rem;top:.6rem}
  .c-proof{position:absolute;left:0;right:auto;top:auto;bottom:100%;width:10rem;margin-bottom:-1.2rem}
  .c-proof .mp.ext{margin-bottom:0;aspect-ratio:640/900;object-fit:cover;object-position:top}
  .c-proof .bubble{left:40%;top:-4.6rem}
  .ceeev{margin-top:1.6rem;padding:1.4rem 1.2rem}
  .ce-head{flex-wrap:nowrap;gap:1.2rem;align-items:center}
  .ce-head p{font-size:1.4rem;line-height:1.5}
  .ce-head p br{display:none}
  .ce-num{flex:none}.ce-num small{font-size:1rem}.ce-num strong{font-size:3.6rem}
  .ce-cases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin:1.2rem -1.2rem 0;padding:0 1.2rem;scrollbar-width:none}
  .ce-cases::-webkit-scrollbar{display:none}
  .ce-cases div{flex:0 0 60vw;scroll-snap-align:start;padding:1rem 1.4rem}
  .ce-cases strong{font-size:2.4rem}.ce-cases small{font-size:1.1rem}.ce-cases span{font-size:1.2rem}
  .ceeev .note{margin-top:.8rem;font-size:1rem;line-height:1.5}
  /* 料金：3プランの横スクロール帯。キャラは見出し右横で帯の上端から顔を出す */
  #price .kh,#price .lead{text-align:left;padding-right:12.5rem}
  #price .kh{font-size:2.3rem}
  #price .lead{font-size:1.3rem;margin:.8rem 0 0;max-width:none}
  #price.panel{padding-block:2rem}
  .plans-wrap{margin-top:2rem}
  #price .c-pk{width:11.5rem;right:0;margin-bottom:-2.3rem}
  #price .c-pk .bubble{right:5%;top:-7rem;font-size:1.2rem;padding:.7rem 1.2rem}
  .plans{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.2rem;margin:0 -2rem;padding:1.4rem 2rem 0;scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 78vw;scroll-snap-align:start;padding:1.6rem 1.6rem 1.4rem;gap:.5rem;box-shadow:0 0 0 .7rem var(--bg)}
  .badge{top:1.4rem;right:1.6rem;font-size:1.1rem}
  .plan h3{font-size:2rem}.plan .for{font-size:1.2rem;line-height:1.5}
  .price{margin-top:.4rem}.price small{font-size:1.15rem}.price strong{font-size:3.2rem}.price u{font-size:1.3rem}.price2{font-size:1.2rem}
  .plan ul{font-size:1.3rem;line-height:1.5;gap:.4rem;margin-top:.6rem;padding-top:1rem}
  .plan-note{font-size:1.1rem;line-height:1.55;margin-top:1rem}
  .ent{margin-top:1.2rem;padding:1.2rem 1.4rem;gap:1rem;flex-wrap:nowrap;align-items:center}
  .ent p{font-size:1.2rem;line-height:1.55;min-width:0}
  .ent b{font-size:1.5rem}
  .ent .pill{flex:none;font-size:1.3rem;padding:1rem 1rem 1rem 1.6rem;gap:.8rem}
  /* FAQ：見出し右横にキャラ 10rem */
  .faqwrap{gap:1.6rem}
  .faqhead{position:relative;min-height:17.5rem;padding:0 11rem 0 0}
  .faqwrap .faqhead .faq-ttl{font-size:2.6rem}
  .faqhead p{font-size:1.3rem;margin-top:1rem}
  .c-faq{width:10rem;right:0;bottom:0}
  .c-faq .bubble{left:auto;right:30%;top:-2.8rem;font-size:1.2rem;padding:.7rem 1.2rem}
  .faqs{gap:.7rem}
  summary{padding:.9rem 0;font-size:1.3rem;line-height:1.5;grid-template-columns:3rem minmax(0,1fr) 2.2rem;gap:.8rem}
  summary .q{width:3rem;height:3rem;font-size:1.4rem}
  details{padding:0 1.4rem}
  details .a{font-size:1.25rem;padding:0 0 1.2rem 3.8rem;line-height:1.6}
  /* 申込：3ステップは3列1行、フォームは2列(ラベル｜入力)。キャラはフォーム右上 */
  .entry{gap:2rem}
  .entry .en-ttl{font-size:2.6rem}
  .en-lead{font-size:1.4rem;margin-top:.8rem}
  .en-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
  .en-steps li{display:grid;grid-template-columns:1fr;gap:.3rem;padding:.8rem .8rem;text-align:center;justify-items:center}
  .en-steps span{width:2.8rem;height:2.8rem;font-size:1.4rem}
  .en-steps b{font-size:1.2rem;line-height:1.4}
  .en-steps small{font-size:1rem;line-height:1.4}
  .en-form-wrap{margin-top:9.4rem}
  #entry .c-pk{width:11rem;right:0;left:auto;margin-bottom:-.8rem}
  #entry .c-pk .bubble{right:72%;top:0}
  .en-form{padding:1.6rem 1.6rem;gap:.4rem;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .en-form label{margin-top:0;font-size:1.2rem;gap:.4rem}
  .en-form label em{font-size:.95rem}
  .en-form input[type=text],.en-form input[type=email],.en-form input[type=tel],.en-form select{padding:.75rem 1rem;font-size:1.4rem}
  .en-form .agree,.en-form button,.en-form .form-msg,.en-form .note{grid-column:1/-1}
  .en-form .agree{margin-top:.8rem;font-size:1.2rem}
  .en-form button{margin-top:1rem;font-size:1.5rem;padding:1.2rem 1.2rem 1.2rem 2rem}
  .en-form .note{font-size:1.05rem;line-height:1.5;margin-top:.4rem}
  /* 想い・ブログ(画像左38%の帯)・フッター */
  .about{padding-block:4rem}
  .posts{gap:1.2rem;margin-top:2rem}
  .post{grid-template-columns:38% minmax(0,1fr);align-items:stretch}
  .post .pic{aspect-ratio:auto;align-self:stretch}
  .post .body{padding:1.2rem 1.4rem;gap:.5rem}
  .post h3{font-size:1.5rem;line-height:1.4}
  .post .cat{font-size:1.05rem}
  .more{margin-top:1.6rem}
  .ft{padding:3.2rem 2.4rem 2.4rem}
  .ft-grid{grid-template-columns:1.2fr .9fr 1.1fr;gap:1.6rem 1.2rem}
  .ft .logo svg{height:2.4rem}
  .ft p{font-size:1.15rem;line-height:1.6;margin-top:1rem}
  .ft h4{font-size:1.15rem}
  .ft ul{font-size:1.2rem;gap:.4rem;margin-top:.6rem}
  .ft-cta{grid-column:1/-1;margin-top:13rem;padding:1.8rem 1.6rem;gap:1rem}
  .ft .ft-cta p{font-size:1.8rem}
  .ft-cta .pill{font-size:1.4rem;padding:1.1rem 1.1rem 1.1rem 1.8rem;gap:.8rem}
  .ft-cta .c-ft{width:12rem;right:.8rem;margin-bottom:-.7rem}
  .ft-cta .c-ft .bubble{right:70%;top:-1.4rem}
  .ft small{margin-top:2.4rem;font-size:1.05rem;padding-top:1.2rem}
}
/* SP：1画面を「使い切る」。中身(文字・カード・キャラ)を大きくして、上下の空白帯をなくす。横帯のカード幅は rem(画面の縦横比で詰まり方が変わらない) */
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  /* fv */
  .fv{padding-top:3rem}
  .fv .kicker{font-size:1.3rem;padding:.6rem 1.6rem}
  .fv h1.main-copy{font-size:3.6rem;margin-top:1.6rem;line-height:1.3}
  .fv .desc{font-size:1.6rem;line-height:1.8;margin-top:1.6rem}
  .fv .ctas{margin-top:2.4rem}
  .fv .ctas .pill{font-size:1.5rem;padding:1.5rem 1rem 1.5rem 1.7rem}
  .fv-grid{row-gap:2rem;grid-template-columns:minmax(0,1fr) 15rem}
  .fv-grid>.trust{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:0}
  .st,.st:first-child{border-top:0;border-left:0;padding:0 .8rem 0 1.2rem}
  .st:first-child{border-left:0;padding-left:0}
  .st strong{font-size:2.6rem;white-space:nowrap}.st small{font-size:1.15rem}.st span{font-size:1.1rem}
  .finder{grid-column:1;grid-row:3}
  .arc{margin-top:auto;height:6rem}
  .c-fv{width:18rem;right:-1rem}
  .c-fv .bubble{right:60%;top:-2%}
  /* 悩み */
  #worry .kh{font-size:2.5rem}
  .scene{flex:0 0 31rem}
  .pic45{width:25rem}
  .pic45 figcaption{font-size:1.6rem}
  .sc-txt{font-size:1.6rem;line-height:1.75}
  .sc-num strong{font-size:4rem}
  .sc-num span{font-size:1.3rem}
  .problem .src-note{font-size:1.2rem;margin-top:1.6rem}
  /* 解決 */
  /* 使い方 */
  #how .kh{font-size:2.8rem}
  #how .lead{font-size:1.5rem}
  .how-steps li{flex:0 0 30rem}
  /* 機能：2段の横帯(9枚が5列×2段)。キャラは見出し右横 */
  #func .kh{font-size:2.4rem;padding-right:12rem}
  #func .lead{padding-right:17.5rem}
  .c-mech .bubble{right:4%;top:-4.8rem}
  #func .lead{font-size:1.6rem;line-height:1.7}
  .fn-body{margin-top:3rem}
  .funcs{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:30rem;gap:2rem 1.4rem}
  .fc{padding:2.8rem 2.2rem;gap:1.2rem}
  .fc .ic{width:4.4rem;height:4.4rem}
  .fc small{font-size:1.3rem}
  .fc h3{font-size:2.4rem}
  .fc p{font-size:1.6rem;line-height:1.75}
  .fn-note{font-size:1.2rem;margin-top:2rem}
  .c-mech{width:16rem}
  /* 申込 */
  #entry .c-pk .bubble{left:auto;right:76%;top:1.2rem}
  .en-steps b{font-size:1.35rem}
  .en-steps small{display:block;font-size:1.1rem;line-height:1.45;margin-top:.2rem}
  /* 数字 */
  .ce-cases div{flex:0 0 26rem}
  /* 想い：写真を上下に、文字を大きく */
  .ab-photos .a3,.ab-photos .a4{display:block}
  .a1{top:3%;width:34%}.a2{top:5%;width:26%}.a3{bottom:4%;width:26%;left:6%}.a4{bottom:3%;width:36%;right:4%}
  .ab-ttl{font-size:3.6rem;margin-top:0}
  .about .ab-in > p{font-size:1.65rem;line-height:2.1;margin-top:3.2rem}
  /* ブログ：画像を上、本文を下の縦積み */
  #blog .kh{font-size:2.4rem}
  .posts{gap:1.6rem;margin-top:2.2rem}
  .post{grid-template-columns:1fr}
  .post .pic{aspect-ratio:auto;height:14rem}
  .post .body{padding:1.2rem 1.8rem 1.4rem;gap:.5rem}
  .post h3{font-size:1.7rem;line-height:1.45}
  .post .cat{font-size:1.2rem}
  .post time{font-size:1.3rem}
  .more{margin-top:2rem}
}
/* 枠なし(2026-10-16)：FV下端のアーチを外した分の高さを余白で保つ(本文とキャラの位置は従来どおり) */
.fv{height:calc(100svh - var(--hdr))}
.fv::after{content:"";display:block;flex:0 1 6rem;min-height:0}  /* アーチと同じく、狭い画面では縮む(高さを1画面に固定して縮ませる) */
.en-form input::placeholder{color:var(--forest);opacity:1}  /* 入力例は深緑(入力済みの#141414と区別) */
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){.how-steps{margin:0 -3.4rem;padding:0 3.4rem;scroll-padding-inline:3.4rem}}  /* 緑の器を外したので、横帯は画面端まで */
@media (min-width:768px) and (orientation:landscape),(min-width:1200px){.fv-grid{padding-inline:10.8rem 39.2rem}}  /* 外周の余白(1.2rem)を外した分だけ内側へ。写真とキャラの位置関係を従来どおりに */

/* ===== 公開用の追加(2026-10-19) ===== */
/* 申し込みフォーム：送信結果。うまくいかなかったときも色は深緑のまま、太字で知らせる(文字色は #141414 と深緑だけ) */
.form-msg.ng{color:var(--ink)}
.en-form button:disabled{opacity:.6;cursor:progress}
.en-form .agree a{color:var(--forest)}
/* 迷惑送信よけ(人には見えない入力欄。ここに何か入っていたら機械とみなす) */
.en-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ft small a{color:inherit;text-underline-offset:.2em}
.ft-grid p a{color:inherit}
/* スマホのメニュー：ヘッダーの真下に開く。PCでは出さない */
.spnav{display:none}
@media (max-width:767px),(max-width:1199px) and (orientation:portrait){
  .spnav:not([hidden]){display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:1.2rem 2rem 2.4rem;box-shadow:0 1.2rem 2.4rem rgba(20,20,20,.08);max-height:calc(100svh - var(--hdr));overflow-y:auto}
  .spnav a{font-family:var(--head);font-weight:700;font-size:1.6rem;color:var(--ink);text-decoration:none;padding:1.2rem 0.4rem}
  .spnav a:hover{color:var(--forest)}
  .spnav a.pill{margin-top:1.6rem;justify-content:center;color:var(--forest);background:var(--bg)}
  .burger[aria-expanded="true"]{background:var(--forest);color:#fff}
}
/* 縦向きタブレット：幅に余裕があるので、記事は2列に戻す(1列だと1本が1画面を占めてしまう) */
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}