@charset "utf-8";
/* 機能ページ共通（D-336）── /features/ 以下の5ページが読む。色と部品はトップ（/）と同じ。
   ページごとに違うのは、ヒーロー右の「画面の見本」だけ（.mock の中身）。 */
:root{
  --pine:#2f5d50; --pine-2:#3c7364; --pine-wash:#eef4f1;
  --amber:#b7791f; --amber-wash:#fbf3e4; --gold:#c08a2b; --shu:#c0432c; --shu-wash:#fbecE8;
  --ink:#20272a; --ink-2:#47535a; --ink-3:#788790;
  --bg:#f6f4ef; --card:#ffffff; --rule:#e2ddd3; --rule-2:#eceae3;
  --shadow:0 1px 2px rgba(30,40,40,.04),0 6px 20px rgba(30,40,40,.05);
  --lift:0 2px 4px rgba(30,40,40,.05),0 14px 34px rgba(30,40,40,.09);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pine:#7fb8a6; --pine-2:#9fcbbd; --pine-wash:#1c2a27;
    --amber:#e0b25f; --amber-wash:#2c2519; --gold:#d9a441; --shu:#ff8f76; --shu-wash:#35211c;
    --ink:#eef1f0; --ink-2:#b7c1c1; --ink-3:#8a9694;
    --bg:#12181a; --card:#1a2224; --rule:#2b3538; --rule-2:#222b2d;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --lift:0 2px 4px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --pine:#7fb8a6; --pine-2:#9fcbbd; --pine-wash:#1c2a27;
  --amber:#e0b25f; --amber-wash:#2c2519; --gold:#d9a441; --shu:#ff8f76; --shu-wash:#35211c;
  --ink:#eef1f0; --ink-2:#b7c1c1; --ink-3:#8a9694;
  --bg:#12181a; --card:#1a2224; --rule:#2b3538; --rule-2:#222b2d;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --lift:0 2px 4px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;word-break:auto-phrase;line-break:strict}
a{color:var(--pine-2)}
b{font-weight:700;color:var(--ink)}
.nw{white-space:nowrap}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
section[id]{scroll-margin-top:74px}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px}

/* ── ヘッダー（トップと同じ） */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:10px;height:58px}
.nav .mascot{height:42px;width:auto;display:block}
.brand{font-weight:700;font-size:15px;margin-right:auto;text-decoration:none;color:var(--ink);line-height:1.3}
.brand small{display:block;font-weight:500;color:var(--ink-3);font-size:11px;letter-spacing:.06em}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;white-space:nowrap;line-height:1;border:0;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s,filter .15s}
.cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.cta.primary{background:var(--pine);color:#fff}
.cta.est{background:var(--card);color:var(--pine);border:1.5px solid var(--pine)}
.cta.contact{background:var(--gold);color:#fff;box-shadow:0 2px 10px rgba(192,138,43,.3)}
.snav{flex:none;display:flex;align-items:center;gap:8px}
.sbtn{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.sbtn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.sbtn svg{width:22px;height:22px;display:block}
.sbtn.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);box-shadow:0 2px 10px rgba(238,42,123,.33)}
.sbtn.x{background:linear-gradient(145deg,#2a3036,#0e1114);box-shadow:0 2px 10px rgba(14,17,20,.30)}
.sbtn.bl{background:#2f5d50;overflow:hidden;box-shadow:0 2px 10px rgba(47,93,80,.30)}
.sbtn.bl img{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:560px){.brand small{display:none}.nav .cta.est{display:none}
  .nav .snav{gap:5px}.nav .sbtn{width:34px;height:34px;border-radius:10px}.nav .sbtn svg{width:19px;height:19px}.nav .cta.contact{padding:10px 12px}}

/* ── パンくず・ヒーロー */
.crumb{font-size:12.5px;color:var(--ink-3);margin:18px 0 0}
.crumb a{color:var(--ink-3)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:18px 0 8px}
.hero>*{min-width:0}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:22px}}
.hero .eye{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.14em;color:var(--pine);font-weight:800;margin:0 0 10px;background:var(--pine-wash);border-radius:999px;padding:4px 12px}
.hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.32;margin:0 0 14px;text-wrap:balance;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--pine)}
.hero .lead{color:var(--ink-2);font-size:16.5px;margin:0 0 18px}
.hero .acts{display:flex;flex-wrap:wrap;gap:10px}
.hero .acts .cta{padding:14px 22px;font-size:15px}
.who{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.who span{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:3px 12px}

/* ヒーロー右：画面の見本（HTMLで描く・ページごとに中身が違う） */
.mock{background:var(--card);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--lift);overflow:hidden;font-size:13px;color:var(--ink-2)}
.mock .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--rule-2);background:color-mix(in srgb,var(--bg) 60%,var(--card))}
.mock .bar i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.mock .bar span{margin-left:8px;font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.mock .body{padding:14px 16px 16px}
.mock .cap{font-size:11.5px;color:var(--ink-3);text-align:center;padding:0 12px 12px}

/* ── このページで分かること（押せるタイル） */
.toc{margin:34px 0 0}
.toc h2{font-size:13px;letter-spacing:.12em;color:var(--ink-3);margin:0 0 10px;font-weight:700}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.toc li{flex:1 1 calc(25% - 10px);min-width:215px}
.toc ol:has(>li:nth-child(5):last-child) li,.toc ol:has(>li:nth-child(6):last-child) li{flex-basis:calc(33.3% - 10px)}
.toc a{display:flex;align-items:center;gap:10px;height:100%;text-decoration:none;color:var(--ink);font-weight:700;font-size:14.5px;line-height:1.45;
  background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;transition:border-color .15s,transform .15s,box-shadow .15s}
.toc a:hover{border-color:var(--pine);transform:translateY(-2px);box-shadow:var(--shadow)}
.toc a .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--pine-wash);color:var(--pine);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.toc a .t{flex:1}
.toc a::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--pine);border-bottom:2px solid var(--pine);transform:rotate(45deg);margin:-4px 4px 0 0}

/* ── 各問い */
.q{margin:72px 0 0}
.qh{text-align:center;margin:0 auto 22px;max-width:44em}
.qh .k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--pine);background:var(--pine-wash);border-radius:999px;padding:3px 12px;margin:0 0 8px;font-variant-numeric:tabular-nums}
.qh h2{font-size:clamp(22px,3.3vw,30px);line-height:1.4;margin:0 0 8px;text-wrap:balance}
.qh p{margin:0;color:var(--ink-2)}
.prose{max-width:46em;margin:0 auto}
.prose p{margin:0 0 12px;color:var(--ink-2)}

/* カード（中央揃え・アイコンつき） */
.cards{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards.c4{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards,.cards.c4,.cards.c2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:22px 18px 20px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:6px}
.card .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--pine-wash);color:var(--pine);margin:0 0 6px}
.card .ic svg{width:26px;height:26px}
.card h3{font-size:16.5px;line-height:1.45;margin:0;text-wrap:balance}
.card p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.card .tag{display:inline-block;font-size:11px;font-weight:800;color:var(--pine);border:1px solid color-mix(in srgb,var(--pine) 40%,transparent);border-radius:999px;padding:0 9px;margin-top:4px;letter-spacing:.06em}
.card.link{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.card.link:hover{border-color:var(--pine);transform:translateY(-2px)}
@media(max-width:560px){.card{flex-direction:row;text-align:left;align-items:flex-start;gap:14px;padding:16px}
  .card .ic{flex:none;width:44px;height:44px;border-radius:13px;margin:0}.card .ic svg{width:22px;height:22px}
  .card .tx{display:flex;flex-direction:column;gap:3px}}
.card .tx{display:contents}
@media(max-width:560px){.card .tx{display:flex}}

/* 大きな数字で言い切る箇所 */
.fact{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);max-width:46em;margin:18px auto 0}
.fact .big{font-size:52px;font-weight:800;line-height:1;color:var(--pine);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:center}
.fact .big small{display:block;font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;margin-top:6px}
.fact p{margin:0;color:var(--ink-2);font-size:15px}
@media(max-width:560px){.fact{grid-template-columns:1fr;gap:12px;padding:20px}.fact p{font-size:14.5px}}
.note{background:var(--amber-wash);border-radius:14px;padding:14px 18px;font-size:14.5px;color:var(--ink-2);max-width:46em;margin:16px auto 0}

/* 比べる表 */
.cmp{overflow-x:auto;border:1px solid var(--rule);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.cmp table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-2)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-size:13px;color:var(--ink-3);font-weight:700}
.cmp thead th.us{color:#fff;background:var(--pine);font-size:14px}
.cmp tbody th{white-space:nowrap;font-size:14px}
.cmp td{color:var(--ink-2)}
.cmp td.us{color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--pine-wash) 70%,transparent)}

/* ── 料金 */
.price{background:var(--card);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--lift);overflow:hidden}
.price .cells{display:grid;grid-template-columns:repeat(3,1fr)}
.price .cell{position:relative;padding:40px 22px 24px;text-align:center;border-right:1px solid var(--rule-2);display:flex;flex-direction:column;align-items:center;gap:4px}
.price .cell:last-child{border-right:0}
.price .h{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.price .v{font-size:40px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.price .v small{font-size:15px;font-weight:700;color:var(--ink-3);margin-left:2px;letter-spacing:0}
.price .mk{font-size:12.5px;color:var(--ink-3)}
.price .mk s{text-decoration-thickness:1px}
.price .off{display:inline-block;font-size:12px;font-weight:800;color:var(--pine);background:var(--pine-wash);border-radius:999px;padding:2px 10px;margin-top:4px}
.price .cell.mon{background:var(--shu-wash)}
.price .cell.mon .v{color:var(--shu)}
.price .cell.mon .off{color:#fff;background:var(--shu)}
.price .ribbon{position:absolute;top:14px;left:0;right:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--shu)}
.price .inc{border-top:1px solid var(--rule-2);padding:16px 22px 18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13.5px;color:var(--ink-2)}
.price .inc span{display:inline-flex;align-items:center;gap:7px}
.price .inc span::before{content:"";width:9px;height:5px;border-left:2px solid var(--pine);border-bottom:2px solid var(--pine);transform:rotate(-45deg) translateY(-2px)}
.price .inc .lbl{font-weight:800;color:var(--ink)}
.price .inc .lbl::before{display:none}
@media(max-width:700px){.price .inc{flex-direction:column;align-items:flex-start;padding:16px 20px}.price .cells{grid-template-columns:1fr}.price .cell{border-right:0;border-bottom:1px solid var(--rule-2);padding:18px}.price .cell:last-child{border-bottom:0}.price .v{font-size:34px}.price .cell.mon{padding-top:38px}}
.pnote{text-align:center;font-size:13px;color:var(--ink-3);margin:12px 0 0}

/* シミュレータへの誘導（ただの文字リンクにしない） */
.simbar{display:flex;align-items:center;gap:18px;margin:18px 0 0;padding:18px 22px;border-radius:18px;background:var(--pine-wash);border:1px solid color-mix(in srgb,var(--pine) 22%,transparent)}
.simbar .ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--pine);color:#fff}
.simbar .ic svg{width:26px;height:26px}
.simbar .tx{flex:1;min-width:0}
.simbar b{display:block;font-size:16px}
.simbar span{font-size:14px;color:var(--ink-2)}
.simbar .cta{padding:14px 22px;font-size:15px}
@media(max-width:640px){.simbar{flex-wrap:wrap;padding:16px}.simbar .cta{width:100%}}

/* 組み合わせ（ほかの機能ページへ） */
.combo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.combo a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:16px 18px;transition:border-color .15s,transform .15s}
.combo a:hover{border-color:var(--pine);transform:translateY(-2px)}
.combo .k{font-size:12px;font-weight:800;color:var(--pine-2);letter-spacing:.08em}
.combo h3{margin:0;font-size:16px}
.combo p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.combo .go{font-size:13px;font-weight:800;color:var(--pine);margin-top:4px}

/* よくある質問 */
.faqs{max-width:46em;margin:0 auto}
details.faq{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:0 18px;margin:10px 0 0}
details.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--pine);border-bottom:2px solid var(--pine);transform:rotate(45deg);transition:transform .2s;margin-top:-5px}
details.faq[open] summary::after{transform:rotate(225deg);margin-top:4px}
details.faq p{margin:0 0 14px;color:var(--ink-2);font-size:15px}

/* 最後の一押し */
.end{margin:80px 0 0;background:var(--pine);color:#fff;border-radius:24px;padding:36px 28px;text-align:center}
.end h2{margin:0 0 8px;font-size:clamp(21px,3vw,26px);color:#fff}
.end p{margin:0 auto 20px;opacity:.92;max-width:36em}
.end .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.end .cta{padding:14px 22px;font-size:15px}
.end .cta.primary{background:#fff;color:#2f5d50}
.end .cta.est{background:transparent;color:#fff;border-color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .end{background:#1f3a33}}
:root[data-theme="dark"] .end{background:#1f3a33}

/* フッター（PCではSNSのアイコンを文字の右に） */
footer{margin:56px 0 0;border-top:1px solid var(--rule);padding:22px 0 40px;color:var(--ink-3);font-size:12.5px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px}
footer a{color:var(--pine-2);text-decoration:none;font-weight:600}
footer .fsnav{display:flex;gap:8px}
footer .fsnav .sbtn{width:38px;height:38px;border-radius:11px}
footer .fsnav .sbtn svg{width:20px;height:20px}
@media(max-width:760px){footer{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.hero .acts .cta{flex:1 1 100%}}

/* マーカー（トップの理念の見出し・ブログの <mark> と同じ色・D-338）。スクロールで来たときに左から引く */
.mk{background:linear-gradient(transparent 58%,var(--mark) 58%,var(--mark) 92%,transparent 92%) no-repeat 0 0/100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 3px;margin:0 -3px;transition:background-size .9s cubic-bezier(.3,.7,.2,1)}
.mk.pre{background-size:0% 100%}
:root{--mark:rgba(226,86,78,.30)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mark:rgba(255,122,110,.34)}}
:root[data-theme="dark"]{--mark:rgba(255,122,110,.34)}

/* 流れ（本当に順番があるものだけ番号を振る） */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:f}
.flow li{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:18px 14px 16px;text-align:center;box-shadow:var(--shadow)}
.flow li::before{counter-increment:f;content:counter(f);display:grid;place-items:center;width:30px;height:30px;margin:0 auto 8px;border-radius:50%;background:var(--pine);color:#fff;font-weight:800;font-size:14px}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-10px;top:32px;width:8px;height:8px;border-right:2px solid var(--pine-2);border-top:2px solid var(--pine-2);transform:rotate(45deg);z-index:1}
.flow b{display:block;font-size:15px;margin:0 0 2px}
.flow span{display:block;font-size:13px;color:var(--ink-2);line-height:1.65}
.flow .by{justify-self:start;font-style:normal;display:inline-block;margin:8px 0 0;font-size:11px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:1px 9px;background:var(--pine-wash);color:var(--pine)}
.flow .by.me{background:var(--amber-wash);color:var(--amber)}
@media(max-width:900px){.flow{grid-template-columns:1fr}.flow li{display:grid;grid-template-columns:30px 1fr;gap:0 14px;text-align:left;align-items:start}
  .flow li::before{margin:2px 0 0;grid-row:span 3}.flow li:not(:last-child)::after{right:auto;left:28px;top:auto;bottom:-10px;transform:rotate(135deg)}}

/* 本物の画面（スクリーンショット＋ボタン） */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.shots{grid-template-columns:1fr}}
.shot{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:22px;overflow:hidden;box-shadow:var(--lift)}
.shot .img{position:relative;height:380px;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--rule-2)}
.shot .img img{display:block;width:100%;height:auto}
.shot .img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--card))}
.shot .tx{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.shot .k{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--pine-2)}
.shot h3{margin:0;font-size:18px}
.shot p{margin:0 0 8px;font-size:14px;color:var(--ink-2);flex:1}
.shot .cta{align-self:flex-start;padding:13px 20px;font-size:15px}
.shot.ig .cta{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);color:#fff}