/* =====================================================================
   ちいさなおくりもの — サイト共通スタイル（2026-10 刷新・5ページ構成）
   トップ / 作ってもらう / ツール / つくる人 / お問い合わせ が共有する。
   ブランド：緑#4A7C59＋琥珀#F5A623＋Noto Sans JP、署名は緑の句点（.maru）
   ===================================================================== */

:root{
  --bg:#FAFAF8; --bg-2:#F3F2EE; --card:#FFFFFF; --ink:#1C1C1E; --ink-2:#3A3A3C;
  --muted:#6B7280; --line:#E8E6E0; --line-2:#D9D6CE;
  --green:#4A7C59; --green-dk:#3A6347; --green-soft:#EAF2EC; --green-ink:#2F5A3D;
  --amber:#F5A623; --amber-ink:#8A5A00; --amber-soft:#FDF3E1;
  --dark:#0F1F15; --dark-2:#16301F; --on-dark:#F2F5F1; --on-dark-2:rgba(242,245,241,.68); --sage:#9FC4AC;
  --shadow-1:0 1px 2px rgba(28,28,30,.04),0 2px 8px rgba(28,28,30,.04);
  --shadow-2:0 2px 6px rgba(28,28,30,.05),0 18px 40px -12px rgba(28,28,30,.14);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic UI',sans-serif;
  /* カテゴリ色（ツール棚） */
  --c-money:#9A6B12; --c-money-bg:#FBF1DD;
  --c-pet:#A04D3A;   --c-pet-bg:#FBEAE4;
  --c-work:#2F5D86;  --c-work-bg:#E6EFF7;
  --c-rec:#3F7150;   --c-rec-bg:#E8F1EB;
  --c-daily:#6B4F9A; --c-daily-bg:#EFEAF7;
  color-scheme:light;
}
html.dark{
  --bg:#0E1310; --bg-2:#131A16; --card:#161E19; --ink:#EDF0EC; --ink-2:#C9CFC9;
  --muted:#98A39B; --line:#253029; --line-2:#323E36;
  --green:#6FAA82; --green-dk:#86BD97; --green-soft:rgba(111,170,130,.13); --green-ink:#A9D3B5;
  --amber:#F5B544; --amber-ink:#F5C46A; --amber-soft:rgba(245,166,35,.12);
  --dark:#08100B; --dark-2:#0E1A12;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 2px 6px rgba(0,0,0,.3),0 18px 40px -12px rgba(0,0,0,.55);
  --c-money:#E9B95A; --c-money-bg:rgba(233,185,90,.13);
  --c-pet:#E79A86;   --c-pet-bg:rgba(231,154,134,.13);
  --c-work:#8DB8E0;  --c-work-bg:rgba(141,184,224,.13);
  --c-rec:#8CC59E;   --c-rec-bg:rgba(140,197,158,.13);
  --c-daily:#B9A2E3; --c-daily-bg:rgba(185,162,227,.13);
  color-scheme:dark;
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.85;
  letter-spacing:.02em;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;overflow-x:hidden;
  transition:background-color .3s,color .3s}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,.btn,.nb-auto{word-break:auto-phrase}
.nb{display:inline-block}
.maru{color:var(--green)}
.on-dark .maru{color:var(--sage)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}
::selection{background:var(--green);color:#fff}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.wrap-s{max-width:880px}
.wrap-xs{max-width:680px}
.sec{padding:clamp(4.5rem,10vw,8rem) 0}
.sec-t{padding-top:clamp(2.5rem,6vw,4rem)}
.alt{background:var(--card)}
.tint{background:var(--bg-2)}
.center{text-align:center}

/* ── type ── */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor;border-radius:2px}
.center .eyebrow::after{content:"";width:18px;height:1.5px;background:currentColor;border-radius:2px}
.display{font-weight:900;font-size:clamp(2.35rem,7.2vw,5.4rem);line-height:1.14;letter-spacing:-.045em}
.h1{font-weight:900;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.25;letter-spacing:-.035em}
.h2{font-weight:900;font-size:clamp(1.65rem,3.8vw,2.6rem);line-height:1.35;letter-spacing:-.03em}
.h3{font-weight:800;font-size:clamp(1.12rem,2vw,1.3rem);line-height:1.5;letter-spacing:-.01em}
.lead{font-size:clamp(1rem,1.9vw,1.16rem);color:var(--muted);line-height:1.95}
.small{font-size:.82rem;color:var(--muted);line-height:1.7}
.sec-head{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.sec-head .lead{margin-top:1rem}
.center .lead{margin-left:auto;margin-right:auto;max-width:36rem}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.85rem 1.7rem;
  border-radius:999px;font-weight:800;font-size:1rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;border:0;
  font-family:inherit;transition:transform .2s var(--ease),box-shadow .2s,background-color .2s,color .2s;text-align:center;line-height:1.35}
.btn svg{flex:none;transition:transform .2s var(--ease)}
.btn:hover svg.arr{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--green);color:#fff;box-shadow:0 8px 22px -8px rgba(74,124,89,.65)}
html.dark .btn-p{color:#0E1310}
.btn-p:hover{background:var(--green-dk);box-shadow:0 12px 28px -8px rgba(74,124,89,.7)}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-g:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-w{background:#fff;color:#14281B}
.btn-w:hover{background:#F1F6F2}
.btn-lg{min-height:60px;padding:1rem 2.2rem;font-size:1.06rem}
.btn-sub{display:block;margin-top:.8rem;font-size:.8rem;color:var(--muted)}
.link{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--green);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease)}
.link:hover{background-size:100% 1.5px}

/* ── header ── */
.hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.hd.scrolled{border-bottom-color:var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.logo{display:flex;align-items:baseline;text-decoration:none;font-weight:900;font-size:1.12rem;letter-spacing:.01em;white-space:nowrap}
.logo b{color:var(--green);font-weight:900}
.logo span{color:var(--ink);font-weight:700;opacity:.82}
.logo i{font-style:normal;color:var(--green);margin-left:1px}
.gnav{display:none;align-items:center;gap:.25rem}
.gnav a{position:relative;padding:.5rem .8rem;font-size:.9rem;font-weight:600;color:var(--ink-2);text-decoration:none;border-radius:999px;transition:color .2s,background-color .2s}
.gnav a:hover{color:var(--ink);background:var(--bg-2)}
.gnav a[aria-current="page"]{color:var(--green)}
.gnav a[aria-current="page"]::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--green)}
.hd-act{display:flex;align-items:center;gap:.4rem}
.icon-btn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color .2s}
.icon-btn:hover{background:var(--bg-2)}
.hd-cta{display:none;min-height:42px;padding:.55rem 1.2rem;font-size:.88rem}
.theme-moon{display:block}.theme-sun{display:none}
html.dark .theme-moon{display:none}html.dark .theme-sun{display:block}
.menu{display:none;border-top:1px solid var(--line);padding:.6rem 0 1.2rem}
.menu.open{display:block}
.menu a{display:flex;justify-content:space-between;align-items:center;padding:.95rem .3rem;font-weight:700;font-size:1.02rem;text-decoration:none;border-bottom:1px solid var(--line)}
.menu a[aria-current="page"]{color:var(--green)}
.menu a small{font-weight:500;font-size:.75rem;color:var(--muted)}
.menu .btn{width:100%;margin-top:1.1rem;border-bottom:0}
@media(min-width:960px){.gnav{display:flex}.hd-cta{display:inline-flex}.menu-btn{display:none}.menu{display:none!important}}

/* ── モバイル追従CTA ── */
.sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:58px;border-radius:18px;background:var(--green);color:#fff;text-decoration:none;box-shadow:0 14px 34px -10px rgba(20,40,27,.55);
  transform:translateY(160%);transition:transform .4s var(--ease)}
html.dark .sticky{color:#0E1310}
.sticky.show{transform:none}
.sticky b{font-size:1rem;font-weight:800}
.sticky small{display:block;font-size:.66rem;font-weight:600;opacity:.8;letter-spacing:.04em}
@media(min-width:960px){.sticky{display:none}}

/* ── page hero（下層ページ共通） ── */
.phero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.8rem,6vw,4.5rem);position:relative;overflow:hidden}
.phero .lead{margin-top:1.4rem;max-width:38rem}
.phero.center .lead{margin-left:auto;margin-right:auto}
.crumb{display:flex;gap:.45rem;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:1.6rem}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}
.aura{position:absolute;inset:auto;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0}
.phero>.wrap,.hero>.wrap{position:relative;z-index:1}

/* ── TOP hero ── */
.hero{position:relative;overflow:hidden;padding:clamp(3.2rem,9vw,6.5rem) 0 clamp(4rem,9vw,6.5rem)}
.hero .display{margin-bottom:1.6rem}
.hero .lead{max-width:34rem;margin:0 auto 2.6rem}
.hero-grid{display:grid;gap:2.2rem;align-items:center}
.reveal-word{display:inline-block;opacity:0;transform:translateY(.35em);animation:rw .9s var(--ease) forwards}
@keyframes rw{to{opacity:1;transform:none}}
.fade-in{opacity:0;animation:rw .9s var(--ease) forwards}

/* 質問ボックス */
.qbox{max-width:48rem;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--shadow-2);text-align:left}
.qbox-q{display:flex;gap:.6rem;align-items:baseline;font-size:clamp(1.05rem,2.2vw,1.28rem);font-weight:800;margin-bottom:1.15rem;line-height:1.5}
.qbox-q em{font-style:normal;color:var(--green);font-weight:900}
.qgrid{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:640px){.qgrid{grid-template-columns:1fr 1fr}.qgrid .wide{grid-column:1/-1}}
.qchip{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:14px;
  font-weight:700;font-size:.94rem;text-decoration:none;background:var(--card);line-height:1.45;transition:border-color .2s,background-color .2s,transform .2s var(--ease)}
.qchip .qi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.qchip span{flex:1}
.qchip .qa{flex:none;color:var(--muted);transition:transform .2s var(--ease),color .2s}
.qchip:hover{border-color:var(--green);background:var(--green-soft)}
.qchip:hover .qa{transform:translateX(3px);color:var(--green)}
.qbox-note{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:1.1rem;font-size:.78rem;color:var(--muted)}
.qbox-note span{display:inline-flex;align-items:center;gap:.3rem}
.qbox-note svg{color:var(--green)}
.hero-sub{margin-top:1.8rem;font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;align-items:center}

/* ── できること3つ（扉） ── */
.doors{display:grid;gap:1rem}
@media(min-width:900px){.doors{grid-template-columns:1fr 1.12fr 1fr;align-items:stretch}}
.door{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.6rem 1.6rem;
  text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.door-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--bg-2);color:var(--ink-2);margin-bottom:1.3rem}
.door h3{margin-bottom:.5rem}
.door-price{font-size:1.9rem;font-weight:900;letter-spacing:-.03em;margin:.2rem 0 .8rem;line-height:1.2}
.door-price small{font-size:.78rem;font-weight:700;color:var(--muted);margin-left:.4rem;letter-spacing:.02em}
.door p.dd{color:var(--muted);font-size:.92rem;line-height:1.85;flex:1}
.door-go{display:flex;align-items:center;justify-content:space-between;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);font-weight:800;font-size:.92rem}
.door-go svg{transition:transform .25s var(--ease)}
.door:hover .door-go svg{transform:translateX(4px)}
.door.main{background:linear-gradient(165deg,#1F4430 0%,#14281B 100%);border-color:transparent;color:var(--on-dark);box-shadow:0 30px 60px -28px rgba(20,40,27,.7)}
.door.main .door-ic{background:rgba(255,255,255,.1);color:var(--sage)}
.door.main p.dd{color:var(--on-dark-2)}
.door.main .door-price small{color:var(--on-dark-2)}
.door.main .door-go{border-top-color:rgba(255,255,255,.14);color:#fff}
.door.main .door-go span.pill{background:#fff;color:#14281B;padding:.55rem 1rem;border-radius:999px}
.badge{position:absolute;top:-12px;left:1.6rem;background:var(--amber);color:#3A2600;font-size:.72rem;font-weight:800;padding:.32rem .8rem;border-radius:999px;letter-spacing:.06em}

/* ── mission（暗い帯） ── */
.mission{background:radial-gradient(120% 90% at 50% 0%,#1C3A27 0%,var(--dark) 60%);color:var(--on-dark);position:relative;overflow:hidden}
.mission .eyebrow{color:var(--sage)}
.beats{display:grid;gap:2.4rem;margin:3rem 0 3.4rem}
@media(min-width:820px){.beats{grid-template-columns:repeat(3,1fr);gap:0}}
.beat{text-align:center;padding:0 1.2rem;position:relative}
@media(min-width:820px){.beat+.beat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.12)}}
.beat-n{font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--sage);opacity:.8}
.beat .beat-w{font-size:clamp(2.8rem,6.4vw,4.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.2;margin:.4rem 0 .8rem;
  background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
.beat p{color:var(--on-dark-2);font-size:.95rem;line-height:1.85}
.beat .num{display:block;margin-top:.5rem;font-size:1.7rem;font-weight:900;color:var(--sage);letter-spacing:-.02em}
.beat .num small{font-size:.55em;color:var(--on-dark-2);font-weight:700}
.mission-close{text-align:center;font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:900;letter-spacing:-.025em;line-height:1.7}
.mission-close .t{color:var(--amber)}

/* ── 入口タイル ── */
.tiles{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiles.t4{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;gap:.45rem;padding:1.4rem 1.4rem 1.3rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;position:relative;min-height:150px}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:transparent}
.tile-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);margin-bottom:.4rem}
.tile b{font-size:1.06rem;font-weight:800}
.tile span.d{font-size:.85rem;color:var(--muted);line-height:1.7}
.tile .ta{position:absolute;right:1.2rem;top:1.4rem;color:var(--muted);transition:transform .25s var(--ease),color .2s}
.tile:hover .ta{transform:translate(3px,-3px);color:var(--green)}

/* ── ブログ一覧（行） ── */
.split{display:grid;gap:2.5rem}
@media(min-width:960px){.split{grid-template-columns:1.25fr 1fr;gap:3.5rem}}
.posts{border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.15rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .2s}
.post:hover{background:var(--bg-2)}
.post time{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.post b{font-weight:700;font-size:.97rem;line-height:1.6}
.post .tag{display:inline-block;font-size:.68rem;font-weight:700;color:var(--green);background:var(--green-soft);padding:.12rem .5rem;border-radius:6px;margin-bottom:.25rem}
.post svg{color:var(--muted)}
.minis{display:grid;gap:.75rem}
.mini{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.mini .mi{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff}
.mini b{display:block;font-weight:800;font-size:.98rem}
.mini span{font-size:.8rem;color:var(--muted);line-height:1.6}
.mini .ta{margin-left:auto;color:var(--muted)}

/* ── CTA帯 ── */
.cta-band{background:linear-gradient(160deg,#1F4430 0%,#0F1F15 100%);color:var(--on-dark);border-radius:var(--r-xl);padding:clamp(2.6rem,7vw,4.5rem) clamp(1.4rem,5vw,4rem);text-align:center;position:relative;overflow:hidden}
.cta-band .lead{color:var(--on-dark-2);margin:1rem auto 2rem;max-width:32rem}
.cta-band .eyebrow{color:var(--sage)}
.cta-band .btn-sub{color:var(--on-dark-2)}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(159,196,172,.22),transparent 70%)}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.8rem 0 0}
.trust li{list-style:none;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;padding:.45rem .85rem;border-radius:999px;background:var(--green-soft);color:var(--green-ink)}
.trust{padding:0}
.cta-band .trust li{background:rgba(255,255,255,.08);color:var(--on-dark)}
.trust svg{color:var(--green)}
.cta-band .trust svg{color:var(--sage)}

/* ── 手順 ── */
.steps{display:grid;gap:1rem;counter-reset:st}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:1.6rem 1.4rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);position:relative}
.step-n{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--green)}
.step h3{margin:.5rem 0 .55rem;font-size:1.08rem;font-weight:800}
.step p{font-size:.88rem;color:var(--muted);line-height:1.8}
.step .tag{display:inline-block;margin-top:.8rem;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:6px;background:var(--amber-soft);color:var(--amber-ink)}

/* ── 料金 ── */
.plans{display:grid;gap:1rem}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:1.9rem 1.6rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.plan.hl{border:2px solid var(--green);box-shadow:var(--shadow-2)}
.plan .plan-name{font-weight:800;font-size:1rem}
.plan .plan-price{font-size:2.3rem;font-weight:900;letter-spacing:-.035em;margin:.5rem 0 .2rem;line-height:1.2}
.plan-price small{font-size:.9rem;font-weight:700;color:var(--muted)}
.plan p{font-size:.9rem;color:var(--muted);line-height:1.85}
.plan ul{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.5rem;font-size:.88rem}
.plan li{display:flex;gap:.5rem;align-items:flex-start}
.plan li svg{flex:none;margin-top:.3rem;color:var(--green)}

/* ── 約束カード ── */
.promises{display:grid;gap:1rem}
@media(min-width:820px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{padding:1.7rem 1.5rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line)}
.promise .pi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);margin-bottom:1rem}
.promise h3{font-size:1.06rem;font-weight:800;margin-bottom:.45rem}
.promise p{font-size:.9rem;color:var(--muted);line-height:1.85}

/* ── ツール棚 ── */
.toolbar{position:sticky;top:68px;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);margin-bottom:2.5rem}
.toolbar-in{display:flex;gap:.45rem;overflow-x:auto;padding:.8rem 0;scrollbar-width:none}
.toolbar-in::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);
  font-family:inherit;font-weight:700;font-size:.85rem;color:var(--ink-2);text-decoration:none;cursor:pointer;white-space:nowrap;transition:all .2s}
.fchip:hover{border-color:var(--ink-2)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fchip .dot{width:8px;height:8px;border-radius:50%}
.fchip .ct{font-size:.72rem;opacity:.6;font-weight:600}
.shelf{margin-bottom:clamp(3rem,7vw,4.5rem);scroll-margin-top:140px}
.shelf-h{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
.shelf-h .si{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.shelf-h h2{font-size:clamp(1.25rem,2.6vw,1.55rem);font-weight:900;letter-spacing:-.02em}
.shelf-h .ct{font-size:.8rem;color:var(--muted);font-weight:600}
.grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.tool{display:flex;gap:1rem;padding:1.2rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;align-items:flex-start}
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:transparent}
.tool .ti{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center}
.tool .tb{flex:1;min-width:0}
.tool b{display:block;font-weight:800;font-size:1rem;line-height:1.5}
.tool p{font-size:.82rem;color:var(--muted);line-height:1.7;margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool .tm{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem}
.price{display:inline-flex;align-items:center;font-size:.76rem;font-weight:800;padding:.22rem .6rem;border-radius:7px;background:var(--bg-2);color:var(--ink)}
.price.free{background:var(--green-soft);color:var(--green-ink)}
.tool .go{font-size:.76rem;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:.2rem;transition:color .2s}
.tool:hover .go{color:var(--green)}
.tool[hidden]{display:none}
.k-money{--k:var(--c-money);--kb:var(--c-money-bg)} .k-pet{--k:var(--c-pet);--kb:var(--c-pet-bg)}
.k-work{--k:var(--c-work);--kb:var(--c-work-bg)} .k-rec{--k:var(--c-rec);--kb:var(--c-rec-bg)} .k-daily{--k:var(--c-daily);--kb:var(--c-daily-bg)}
.ti,.si{background:var(--kb);color:var(--k)}
.fchip .dot{background:var(--k)}

/* 特集（スミケシ） */
.feature{display:grid;gap:2rem;align-items:center;padding:clamp(1.8rem,5vw,3rem);border-radius:var(--r-xl);background:var(--dark);color:var(--on-dark);margin-bottom:clamp(3rem,7vw,4.5rem);overflow:hidden;position:relative}
@media(min-width:900px){.feature{grid-template-columns:1.1fr 1fr}}
.feature .eyebrow{color:var(--amber)}
.feature p.lead{color:var(--on-dark-2);margin:1rem 0 1.6rem}
.feature .acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.feature .note{font-size:.8rem;color:var(--on-dark-2);margin-top:1rem}
.doc{background:#FBFAF7;border-radius:14px;padding:1.4rem 1.3rem;color:#2A2A2A;box-shadow:0 30px 60px -25px rgba(0,0,0,.6);transform:rotate(-1.5deg);max-width:380px;justify-self:center;width:100%}
.doc .l{height:9px;border-radius:3px;background:#E3E0D8;margin:.55rem 0}
.doc .k{height:11px;border-radius:2px;background:#111;margin:.55rem 0}
.doc .ttl{font-size:.8rem;font-weight:800;letter-spacing:.1em;color:#555;margin-bottom:.8rem}
.doc .stamp{display:inline-block;margin-top:.9rem;font-size:.7rem;font-weight:800;color:#3F7150;border:1.5px solid #3F7150;border-radius:6px;padding:.15rem .5rem;transform:rotate(-3deg)}

/* こんな方に */
.cases{display:grid;gap:.9rem}
@media(min-width:820px){.cases{grid-template-columns:1fr 1fr}}
.case{padding:1.5rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line)}
.case p.who{font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--green)}
.case q{display:block;font-weight:800;font-size:1.02rem;margin:.45rem 0 .6rem;line-height:1.65;quotes:"「" "」"}
.case p{font-size:.88rem;color:var(--muted);line-height:1.8}
.case a{margin-top:.9rem}

/* ── つくる人 ── */
.prof{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.prof{grid-template-columns:.8fr 1.2fr;gap:4rem}}
.portrait{position:relative;max-width:340px;margin:0 auto;width:100%}
.portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--card);border:1px solid var(--line)}
.portrait .ring{position:absolute;inset:-14px;border-radius:50%;border:1.5px dashed var(--line-2)}
.portrait .tagp{position:absolute;right:0;bottom:8%;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-2);border-radius:14px;padding:.6rem .9rem;font-size:.8rem;font-weight:800}
.portrait .tagp small{display:block;font-weight:600;color:var(--muted);font-size:.7rem}
.prose p{color:var(--ink-2);line-height:2.05;margin-bottom:1.2rem}
.prose strong{color:var(--ink);background:linear-gradient(transparent 62%,var(--amber-soft) 62%)}
.honest{display:flex;gap:1rem;padding:1.5rem;border-radius:var(--r-md);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent)}
.honest svg{flex:none;color:var(--amber-ink);margin-top:.2rem}
.honest p{font-size:.94rem;line-height:1.9;color:var(--ink-2)}
.socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

/* ── フォーム ── */
.cgrid{display:grid;gap:2rem}
@media(min-width:960px){.cgrid{grid-template-columns:1fr 1.35fr;gap:3.5rem;align-items:start}}
.aside{display:grid;gap:.8rem}
.ac{display:flex;gap:.9rem;padding:1.2rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);text-decoration:none}
.ac .pi{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.ac b{display:block;font-weight:800;font-size:.95rem}
.ac span{font-size:.84rem;color:var(--muted);line-height:1.7}
a.ac{transition:transform .3s var(--ease),box-shadow .3s}
a.ac:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--shadow-1)}
.fld{margin-bottom:1.2rem}
.fld label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.45rem}
.fld label .req{font-size:.7rem;font-weight:700;color:#B91C1C;background:#FEF2F2;border-radius:5px;padding:.08rem .4rem;margin-left:.4rem}
html.dark .fld label .req{background:rgba(185,28,28,.18);color:#FCA5A5}
.field{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s;appearance:none}
.field:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
textarea.field{resize:vertical;min-height:150px;line-height:1.8}
select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;cursor:pointer}
.form .btn{width:100%}
.done{text-align:center;padding:3rem 1rem}
.done .pi{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);margin:0 auto 1.2rem}

/* ── footer ── */
.ft{background:var(--dark);color:var(--on-dark-2);padding:clamp(4rem,9vw,6rem) 0 calc(2rem + env(safe-area-inset-bottom))}
.ft-tag{font-size:clamp(1.5rem,4.2vw,2.8rem);font-weight:900;letter-spacing:-.035em;line-height:1.4;color:var(--on-dark);margin-bottom:3rem}
.ft-tag .t{color:var(--sage)}
.ft-grid{display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:900px){.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ft-brand{grid-column:1/-1}
@media(min-width:900px){.ft-brand{grid-column:auto}}
.ft .logo span{color:var(--on-dark)}
.ft-brand p{font-size:.84rem;margin-top:.6rem;line-height:1.8}
.ft h4{font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--sage);margin-bottom:.9rem}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ft ul a{font-size:.88rem;text-decoration:none;color:var(--on-dark-2);transition:color .2s}
.ft ul a:hover{color:#fff}
.ft-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:1.6rem;font-size:.76rem}
.ft-bottom nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.ft-bottom a{text-decoration:none;color:var(--on-dark-2)}
.ft-bottom a:hover{color:#fff}
.ft .x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);color:var(--on-dark)}

/* ── 出現アニメ ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
html.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.reveal-word,.fade-in{opacity:1!important;transform:none!important}
}

/* =====================================================================
   v2.1 — トップ刷新：時間の計算機・触れる見本・届くもの・FAQ・質感
   ===================================================================== */

/* 質感：方眼の地紋と、ブランドの「。」を大きく呼吸させる */
.paper{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 0);
  background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%)}
.big-maru{position:absolute;z-index:0;pointer-events:none;border-radius:50%;border:clamp(28px,5vw,64px) solid var(--green);opacity:.07;
  width:clamp(320px,48vw,720px);aspect-ratio:1;right:-12vw;top:-14vw;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06) translateY(10px)}}

/* ヒーロー（左：言葉／右：計算機） */
.hero2{position:relative;overflow:hidden;padding:clamp(2.6rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem)}
.hero2 .wrap{position:relative;z-index:1}
.hero2-grid{display:grid;gap:2.6rem;align-items:center}
@media(min-width:1000px){.hero2-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.hero2 h1{font-weight:900;font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.16;letter-spacing:-.045em;margin-bottom:1.5rem}
.hero2 .lead{max-width:30rem;margin-bottom:2rem}
.hero2-acts{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.drop{display:inline-block;animation:drop 1.1s cubic-bezier(.3,1.5,.5,1) 1s both}
@keyframes drop{0%{opacity:0;transform:translateY(-1.6em) scale(.6)}55%{opacity:1;transform:translateY(.06em) scale(1.08,.86)}75%{transform:translateY(-.08em) scale(.96,1.04)}100%{transform:none}}
.avail{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;color:var(--green-ink);background:var(--green-soft);padding:.4rem .85rem .4rem .7rem;border-radius:999px;margin-bottom:1.4rem}
.avail i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}

/* 時間の計算機 */
.calc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(1.3rem,3vw,2rem);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 80px -40px rgba(28,40,30,.35),0 8px 24px -12px rgba(28,40,30,.12)}
.calc-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.calc-h b{font-size:.74rem;font-weight:800;letter-spacing:.2em;color:var(--green)}
.calc-h span{font-size:.72rem;color:var(--muted)}
.calc-q{font-weight:800;font-size:1.02rem;margin:0 0 .7rem;line-height:1.5}
.tasks{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem}
.task{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.4rem .85rem;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);
  font-family:inherit;font-size:.84rem;font-weight:700;color:var(--ink-2);cursor:pointer;transition:all .2s}
.task svg{color:var(--muted)}
.task:hover{border-color:var(--ink-2)}
.task[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.task[aria-checked="true"] svg{color:var(--bg)}
.sliders{display:grid;gap:1.1rem;margin-bottom:1.4rem}
.sl label{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;font-weight:700;margin-bottom:.45rem}
.sl output,.sl label>span{font-size:1.15rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.sl output small{font-size:.72rem;font-weight:700;color:var(--muted);margin-left:.15rem}
.range{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;--p:20%}
.range::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--green) var(--p),var(--line) var(--p))}
.range::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--green) var(--p),var(--line) var(--p))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--green);margin-top:-9px;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .15s}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--green);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.result{display:flex;align-items:center;gap:1.1rem;padding:1.2rem 1.2rem;border-radius:20px;background:linear-gradient(150deg,#1F4430,#122619);color:var(--on-dark);margin-bottom:1rem;position:relative;overflow:hidden}
.result::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.25),transparent 70%)}
.gift{flex:none;width:64px;height:64px;position:relative;z-index:1}
.gift .lid{transform-origin:9px 32px;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.gift.open .lid{transform:translate(-2px,-9px) rotate(-14deg)}
.gift .glow{opacity:0;transition:opacity .4s}
.gift.open .glow{opacity:1}
.result-t{position:relative;z-index:1;min-width:0}
.result-t small{display:block;font-size:.74rem;color:var(--on-dark-2);font-weight:600}
.result-n{font-size:clamp(2rem,5vw,2.7rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums;color:#fff}
.result-n em{font-style:normal;font-size:.42em;font-weight:800;color:var(--sage);margin-left:.2rem;letter-spacing:0}
.result-s{font-size:.82rem;color:var(--on-dark-2);margin-top:.15rem}
.result-s b{color:var(--amber)}
.calc .btn{width:100%}
.calc-note{font-size:.7rem;color:var(--muted);margin-top:.7rem;text-align:center;line-height:1.6}

/* 事実の帯 */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);overflow:hidden}
.facts-in{display:flex;gap:2.4rem;padding:1.05rem 0;width:max-content;animation:marquee 38s linear infinite}
.facts:hover .facts-in{animation-play-state:paused}
.facts span{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.facts svg{color:var(--green)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ベント（できること3つ） */
.bento{display:grid;gap:1rem}
@media(min-width:900px){.bento{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}.bento .b-make{grid-row:1/3}}
.b{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);background:var(--card);border:1px solid var(--line);
  text-decoration:none;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.b:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.b .k{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--muted)}
.b h3{font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:900;letter-spacing:-.025em;line-height:1.35;margin:.5rem 0 .6rem}
.b .pr{font-size:clamp(2rem,4vw,2.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.1}
.b .pr small{font-size:.8rem;font-weight:700;color:var(--muted);margin-left:.4rem;letter-spacing:.02em}
.b p.d{color:var(--muted);font-size:.92rem;line-height:1.85;margin-top:.7rem}
.b .go{margin-top:auto;padding-top:1.4rem;display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.95rem}
.b .go svg{transition:transform .25s var(--ease)}
.b:hover .go svg{transform:translateX(4px)}
.b-make{background:radial-gradient(120% 80% at 100% 0%,#2C5A3E 0%,#17301F 55%,#0F1F15 100%);border-color:transparent;color:var(--on-dark);min-height:480px}
.b-make .k{color:var(--sage)}
.b-make p.d,.b-make .pr small{color:var(--on-dark-2)}
.b-make .badge{position:static;display:inline-block;align-self:flex-start;margin-bottom:1.2rem}
.flow{display:grid;gap:.55rem;margin:1.6rem 0 0}
.flow li{list-style:none;display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.88rem;font-weight:700}
.flow li i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:900;background:var(--sage);color:#14281B}
.flow li span{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--sage);white-space:nowrap}
.flow{padding:0}
.b-make .go .pill{background:#fff;color:#14281B;padding:.75rem 1.2rem;border-radius:999px;display:inline-flex;gap:.5rem;align-items:center}
.stack{display:flex;margin:1.1rem 0 .2rem}
.stack span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;border:3px solid var(--card);margin-left:-8px;box-shadow:0 4px 10px -4px rgba(0,0,0,.2)}
.stack span:first-child{margin-left:0}
.stack em{font-style:normal;align-self:center;margin-left:.7rem;font-size:.82rem;font-weight:800;color:var(--muted)}

/* スポットライト（カードにマウスの光） */
.spot{--mx:50%;--my:50%}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--green) 10%,transparent),transparent 60%)}
.b-make.spot::before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(159,196,172,.16),transparent 60%)}
.spot:hover::before{opacity:1}

/* 触れる見本 */
.demo{display:grid;gap:2rem;align-items:start}
@media(min-width:1000px){.demo{grid-template-columns:.8fr 1.2fr;gap:3rem}}
.dtabs{display:grid;gap:.6rem;margin-top:1.8rem}
.dtab{display:flex;gap:.9rem;align-items:flex-start;text-align:left;width:100%;padding:1rem 1.1rem;border-radius:16px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-family:inherit;color:var(--ink);transition:all .25s}
.dtab:hover{border-color:var(--line-2)}
.dtab[aria-selected="true"]{border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.dtab .ti{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.dtab b{display:block;font-size:.98rem;font-weight:800}
.dtab span.s{font-size:.8rem;color:var(--muted);line-height:1.6}
.window{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 50px 100px -40px rgba(20,40,27,.45),0 10px 30px -15px rgba(0,0,0,.15)}
.wbar{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--bg-2);border-bottom:1px solid var(--line)}
.wbar i{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.wbar i:nth-child(1){background:#F0605A}.wbar i:nth-child(2){background:#F5BD4F}.wbar i:nth-child(3){background:#58C25E}
.wurl{flex:1;margin-left:.4rem;font-size:.74rem;color:var(--muted);background:var(--card);border-radius:8px;padding:.3rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.35rem}
.wopen{font-size:.74rem;font-weight:700;color:var(--green);text-decoration:none;white-space:nowrap}
.wbody{position:relative;height:clamp(520px,70vh,660px);background:#fff}
.wbody iframe{width:100%;height:100%;border:0;display:block}
.wload{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.85rem;background:var(--bg)}
.demo-note{font-size:.78rem;color:var(--muted);margin-top:.9rem;display:flex;gap:.4rem;align-items:center}

/* 診断のあとに届くもの */
.deliver{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1000px){.deliver{grid-template-columns:1fr 1fr;gap:4rem}}
.tl{list-style:none;padding:0;margin:2rem 0 0;position:relative}
.tl::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--green),var(--line))}
.tl li{position:relative;display:flex;gap:1.1rem;padding:0 0 1.6rem}
.tl li:last-child{padding-bottom:0}
.tl .n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;background:var(--card);border:2px solid var(--green);color:var(--green);position:relative;z-index:1}
.tl b{display:block;font-size:1.05rem;font-weight:800;line-height:1.5;margin-top:.45rem}
.tl p{font-size:.88rem;color:var(--muted);line-height:1.8;margin-top:.2rem}
.tl .chip{display:inline-block;margin-top:.45rem;font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:6px;background:var(--amber-soft);color:var(--amber-ink)}
.letter{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-2);max-width:520px;justify-self:center;width:100%}
.letter::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:22px;background:var(--green-soft);z-index:-1}
.letter-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--line-2);margin-bottom:1.1rem}
.letter-top b{font-size:1rem;font-weight:900}
.sample{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--amber-ink);background:var(--amber-soft);border-radius:6px;padding:.2rem .55rem;white-space:nowrap}
.lrow{padding:.75rem 0;border-bottom:1px solid var(--line)}
.lrow:last-of-type{border-bottom:0}
.lrow small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-bottom:.2rem}
.lrow p{font-size:.94rem;font-weight:700;line-height:1.7}
.lrow ul{margin:.3rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem;font-size:.88rem}
.lrow li{display:flex;gap:.45rem;align-items:flex-start}
.lrow li svg{flex:none;margin-top:.3rem;color:var(--green)}
.lprice{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.6rem;padding:1rem 1.1rem;border-radius:14px;background:var(--green-soft)}
.lprice b{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;color:var(--green-ink)}
.lprice span{font-size:.8rem;font-weight:700;color:var(--green-ink)}
.letter-note{font-size:.72rem;color:var(--muted);margin-top:.9rem;line-height:1.6}

/* よくある質問 */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;gap:1rem;padding:1.35rem .2rem;cursor:pointer;font-weight:800;font-size:1.02rem;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:.85rem;font-weight:900}
.faq summary .pm{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--ink);border-color:var(--ink);color:var(--bg)}
.faq .a{padding:0 .2rem 1.4rem 3rem;color:var(--ink-2);font-size:.94rem;line-height:1.95}

/* 時間の言葉（締めの帯） */
.statement{text-align:center;position:relative;overflow:hidden}
.statement .words{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.2rem;margin-bottom:1.6rem;font-weight:900;font-size:clamp(1rem,2vw,1.2rem);color:var(--muted)}
.statement .words span{display:inline-flex;align-items:center;gap:1.2rem}
.statement .words span+span::before{content:"";width:28px;height:1.5px;background:var(--line-2)}
.statement p.big{font-size:clamp(1.8rem,5vw,3.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.45}
.statement .t{color:var(--green)}

@media (prefers-reduced-motion:reduce){.facts-in{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.big-maru{animation:none}.drop{animation:none}}

/* v2.1 短くする：スマホではツール棚を横スワイプ・料金も横スワイプ */
@media(max-width:619px){
  .grid.swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.7rem;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
  .grid.swipe::-webkit-scrollbar{display:none}
  .grid.swipe .tool{flex:0 0 78%;scroll-snap-align:start;flex-direction:column;gap:.7rem}
  .shelf{margin-bottom:2.2rem}
  .shelf-h{margin-bottom:.9rem}

  .plans.swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;margin:0 -20px;padding:4px 20px 8px;scrollbar-width:none}
  .plans.swipe::-webkit-scrollbar{display:none}
  .plans.swipe .plan{flex:0 0 82%;scroll-snap-align:center}
  .sec{padding:3.6rem 0}
  .phero{padding:2.4rem 0 2rem}
  .ft{padding-top:3rem}
  .ft-tag{font-size:1.45rem;margin-bottom:2rem}
  .ft-grid{grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
  .ft-brand{display:none}
  .ft ul a{font-size:.8rem}
  .cta-band{padding:2.2rem 1.2rem}
  .cta-band .trust{display:none}
  .b-make{min-height:0}
}
.sec-tight{padding:clamp(3rem,7vw,5rem) 0}
.plan,.tool{position:relative}
@media(max-width:999px){
  .dtabs{display:flex;overflow-x:auto;gap:.5rem;margin:1.2rem -20px 0;padding:4px 20px 6px;scrollbar-width:none}
  .dtabs::-webkit-scrollbar{display:none}
  .dtab{flex:none;width:auto;padding:.55rem .9rem;align-items:center;gap:.6rem;border-radius:999px}
  .dtab .ti{width:30px;height:30px;border-radius:9px}
  .dtab span.s{display:none}
  .dtab b{font-size:.86rem;white-space:nowrap}
}
@media(max-width:619px){.wbody{height:540px}.hero2 h1{font-size:clamp(2.1rem,9.6vw,2.6rem)}.calc{border-radius:22px}}
/* ボタン内の文節spanに隙間を入れない（アイコンだけ余白） */
.btn,.b-make .go .pill{gap:0}
.btn svg,.b-make .go .pill svg{margin-left:.5rem}
.btn svg:first-child{margin-left:0;margin-right:.5rem}
.sl output small{font-size:.72rem}
.demo>*,.deliver>*,.hero2-grid>*,.split>*,.cgrid>*,.prof>*{min-width:0}
.cta-band .words{color:var(--sage)}.cta-band .words span+span::before{background:rgba(255,255,255,.2)}
.bt{display:block}
[hidden]{display:none!important}
@media(max-width:619px){
  .shelf-h h2{font-size:1.12rem;white-space:nowrap}
  .shelf-h .si{width:34px;height:34px;flex:none}
  .shelf-h .ct{margin-left:auto;white-space:nowrap;font-size:.74rem}
  .shelf-h .ct::after{content:" ・ スワイプ →"}
}
/* v2.2 見出しが計算機に重ならないよう、2列のときは列幅に合わせる */
@media(min-width:1000px){
  .hero2-grid{grid-template-columns:1.15fr .85fr}
  .hero2 h1{font-size:clamp(2.4rem,3.9vw,3.3rem)}
}
/* プレゼント：線画アイコン（ふたが開く） */
.gift-wrap{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--amber);position:relative;z-index:1}
.gift-wrap .gift{width:40px;height:40px}
.gift .lid{transform-box:fill-box;transform-origin:0% 100%;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.gift.open .lid{transform:translate(-1px,-5px) rotate(-16deg)}
.gift .glow{stroke:#FFD27A;opacity:0;transition:opacity .4s}
.gift.open .glow{opacity:1}
/* v2.3 最初の1画面に収める・事実は静かな一覧に */
.hfacts{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.hfacts li{display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;font-weight:700;color:var(--ink-2)}
.hfacts svg{color:var(--green)}
@media(min-width:1000px){
  .hero2{min-height:calc(100svh - 68px);display:flex;align-items:center;padding:2.2rem 0}
  .hero2>.wrap{width:100%}
  .calc{padding:1.4rem 1.6rem}
  .calc .tasks{margin-bottom:1rem}.calc .sliders{gap:.7rem;margin-bottom:1rem}
}
.result{padding:1.1rem 1.3rem}
@media(min-width:1000px) and (max-height:820px){
  .hero2{padding:1.2rem 0}
  .calc{padding:1.1rem 1.4rem}
  .calc-h{margin-bottom:.6rem}.calc-q{margin-bottom:.5rem}
  .task{min-height:34px;padding:.3rem .75rem}
  .sl label{margin-bottom:.2rem}.range{height:24px}
  .result{padding:.8rem 1.1rem;margin-bottom:.7rem}
  .result-n{font-size:2rem}
  .calc .btn{min-height:46px}
  .calc-note{margin-top:.4rem}
  .hero2 h1{margin-bottom:1rem}.hero2 .lead{margin-bottom:1.4rem}
}
/* v2.4 迷子対策：診断の流れ1行・暮らしの入口 */
a.avail{text-decoration:none;transition:background-color .2s}
a.avail:hover{background:color-mix(in srgb,var(--green) 20%,transparent)}
a.avail svg{color:var(--green);flex:none}
.howto{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.howto li{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--ink-2);padding:.32rem .7rem .32rem .35rem;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.howto li b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:var(--green);color:#fff}
html.dark .howto li b{color:#0E1310}
.howto li+li::before{content:"";width:10px;height:1.5px;background:var(--line-2);margin:0 .15rem 0 -.75rem;order:-1;display:none}
.hfacts{margin-top:.9rem}