html{-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;word-break:keep-all;overflow-wrap:break-word;font-size:18px;line-height:1.8;letter-spacing:.02em}
p,li,dd,dt,h1,h2,h3,summary,figcaption{text-wrap:pretty}
img,svg{max-width:100%}
.bx{display:inline}
@media (min-width:900px){.v-sp{display:none!important}}
@media (max-width:899px){.v-pc{display:none!important}}
.mockbar{background:#222;color:#fff;font-size:16px;text-align:center;padding:4px 8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{text-underline-offset:.2em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:8px 24px;font-weight:700;font-size:20px;text-decoration:none;text-align:center;line-height:1.4}
.retline{font-size:16px;line-height:1.7}
.retline a{margin-left:6px}
details.dd summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.qr{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:16px}
.qr svg{display:block}
/* 案C 前と後。前＝黄ばんだ紙の地 #E9E3D6、後＝澄んだ地 #F3F7F4。文字は墨 #22262B（11.9:1〜）、後の印は深緑 #1B5A44（白地 8.1:1）、主ボタンはれんが #8A3412（白字 8.1:1）。
   ---- 組み方の土台：Start Bootstrap「Landing Page」（src/scss/sections/_masthead.scss・_showcase.scss と src/pug/index.pug の並び）----
   並び：masthead → features-icons（3列・中央ぞろえ）→ showcase（.row の左右を1段ごとに入れ替え、絵の半分は min-height 30rem・文の半分は padding 7rem）
   → call-to-action → footer（左にリンクを横並び・右に運営）。Bootstrap 本体は読み込まず、この並びと余白の決まりだけを CSS grid で書き直した。
   The MIT License (MIT) Copyright (c) 2013-2023 Start Bootstrap LLC
   Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
   The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
.v-pc .showcase .c-row{display:grid;grid-template-columns:1.2fr 1fr}
.v-pc .showcase .c-rev{grid-template-columns:1fr 1.2fr}
.v-pc .showcase .c-rev .showcase-img{order:2}
.v-pc .showcase-img{min-height:30rem;display:flex;align-items:center;justify-content:center}
.v-pc .showcase-text{padding:4.5rem 4rem;align-self:center}
.features-icons{padding-top:5rem;padding-bottom:4rem;text-align:center}
/* ---- 土台ここまで ---- */
:root{--ink:#22262B;--sub:#3D4248;--old:#E9E3D6;--new:#F3F7F4;--g:#1B5A44;--main:#8A3412;--main-d:#6E290D;--mark:#FFE38A;--rule:#D3D9D5;--line:#08602F;
  --ud:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;--hand:"Yomogi","Klee One",cursive;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif}
body{background:#fff;color:var(--ink);font-family:var(--sans)}
.hf,h1,h2,h3{font-family:var(--ud);font-weight:700}
.hf2{font-family:var(--hand);font-weight:400}
a{color:var(--g)}
.btn{border-radius:8px}
.c-btn{background:var(--main);color:#fff;box-shadow:0 3px 0 var(--main-d)}
.c-btn:hover{background:var(--main-d)}
.c-btn-sub{background:#fff;color:var(--ink);border:2px solid var(--ink);font-size:18px;min-height:52px}
.c-btn-line{background:var(--line);color:#fff;box-shadow:0 3px 0 #04401F}
.c-small{font-size:16px;margin:6px 0 0}
.teiki{border-left:5px solid var(--g);background:var(--new);padding:10px 14px}
.teiki p{margin:0}
.teiki a{margin-left:4px}
.c-container{max-width:1160px;margin:0 auto;padding:0 24px}
.c-tag{display:inline-block;background:var(--mark);color:var(--ink);font-size:16px;font-weight:700;padding:0 10px;border-radius:4px;margin:0 0 0 10px;line-height:1.7}
.c-lb,.c-la{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-weight:700;font-size:20px;margin-right:10px;font-family:var(--ud)}
.c-lb{background:#fff;color:var(--ink);border:2.5px dashed var(--ink)}
.c-la{background:var(--g);color:#fff}
figure{margin:0}
figcaption{display:flex;align-items:center;flex-wrap:wrap;font-weight:700;margin:0 0 10px}
.c-memo{background:#FFF2B3;padding:22px 24px;transform:rotate(-2deg);box-shadow:0 10px 16px -10px rgba(60,40,10,.4)}
.c-memo p{margin:0;font-size:24px;line-height:1.7;color:#2B2A27}
.c-doc{background:#fff;padding:24px 28px;border:1px solid var(--rule);box-shadow:0 14px 22px -14px rgba(20,60,40,.35)}
.c-doc-t{text-align:center;font-size:22px;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--g)}
.c-doc p:not(.c-doc-t){margin:0 0 6px}
.c-doc-s{padding:16px 18px}
.c-doc-s .c-doc-t{font-size:19px}
.c-doc-s p{font-size:17px;line-height:1.65}
.c-tbl-mini{border-collapse:collapse;background:#fff;width:100%;box-shadow:0 10px 18px -12px rgba(20,60,40,.35)}
.c-tbl-mini th,.c-tbl-mini td{border:1px solid #9AA8A0;padding:6px 12px;text-align:left}
.c-tbl-mini th{background:#E3EEE8}
.c-arr{font-size:40px;color:var(--g);font-weight:700;line-height:1}

/* ---------- パソコン ---------- */
.c-navbar{background:#fff;border-bottom:1px solid var(--rule)}
.v-pc .c-nav-in{display:flex;align-items:center;gap:20px;height:76px}
.c-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);font-size:26px;line-height:1.25;margin-right:auto}
.c-brand small{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--sub)}
.c-nav{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.c-nav a{display:flex;align-items:center;min-height:48px;padding:4px 12px;color:var(--ink);font-weight:700;text-decoration:none;border-radius:6px}
.c-nav a:hover{background:var(--new)}
.v-pc .c-nav-cta{min-height:50px;font-size:18px}
.v-pc .masthead{background:linear-gradient(90deg,var(--old) 0 50%,var(--new) 50% 100%);border-bottom:1px solid var(--rule)}
.v-pc .c-mast-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 500px 1fr;gap:28px;align-items:center;padding:26px 28px 30px}
.v-pc .c-mb img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:6px}
.v-pc .c-ma{display:grid;gap:16px}
.v-pc .c-ma .c-doc{padding:18px 22px}
.v-pc .c-ma .c-doc-t{font-size:20px}
.v-pc .c-ma .c-doc p{font-size:17px;line-height:1.65}
.v-pc .c-ma .c-tbl-mini{width:78%;margin-left:auto;transform:translateY(-6px)}
.c-mc{background:#fff;border-radius:14px;padding:30px 32px 26px;box-shadow:0 0 0 1px var(--rule),0 22px 40px -24px rgba(20,40,30,.45)}
.c-eyebrow{margin:0 0 6px;font-weight:700;color:var(--sub)}
.v-pc .c-mc h1{font-size:34px;line-height:1.42;margin:0 0 18px}
.v-pc .c-mc .btn-l{width:100%}
.c-txt{display:flex;align-items:center;justify-content:center;min-height:48px;font-weight:700;margin:4px 0 10px}
.c-issuer{margin:12px 0 0;font-size:17px;line-height:1.7;color:var(--sub);border-top:1px solid var(--rule);padding-top:10px}
.c-issuer a{display:inline-flex;align-items:center;min-height:44px}
.c-intro{background:#fff;padding:44px 0 8px}
.v-pc .c-intro .c-container{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center}
.c-lead{font-size:21px;line-height:1.9;margin:0;padding-left:20px;border-left:6px solid var(--mark)}
.c-line{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--new);border-radius:10px;padding:14px}
.c-line p{margin:0;font-size:16px;line-height:1.6}
.c-line b{font-size:18px}
.c-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.c-facts h3{font-size:23px;margin:10px 0 6px}
.c-facts p{margin:0;text-align:left}
.c-ic{display:block;margin:0 auto}
.showcase{padding-top:56px}
.c-sh-head{text-align:center;margin-bottom:36px}
.c-sh-head h2,.c-sec h2{font-size:32px;line-height:1.4;margin:0 0 6px}
.c-sub{margin:0 0 26px;color:var(--sub)}
.v-pc .showcase .c-row{border-top:1px solid var(--rule)}
.v-pc .showcase-img{background:linear-gradient(90deg,var(--old) 0 50%,var(--new) 50% 100%);padding:40px 28px}
.c-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;width:100%;max-width:720px;position:relative}
.c-pair>.c-tag{position:absolute;top:-30px;left:0;margin:0}
.c-pair img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.c-pair .c-memo p{font-size:21px}
.c-no{margin:0;font-size:42px;line-height:1;color:var(--g);letter-spacing:.04em}
.showcase-text h3{font-size:27px;line-height:1.4;margin:6px 0 2px}
.showcase-text .c-d{margin:0 0 6px;color:var(--sub)}
.showcase-text .c-p{font-family:var(--ud);font-weight:700;font-size:34px;margin:0 0 6px;line-height:1.3}
.showcase-text .c-p small{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--sub);margin-left:6px}
.c-meta{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c-meta li{border:1.5px solid var(--g);color:var(--ink);border-radius:6px;padding:0 10px;font-size:16px;line-height:1.9}
.c-meta b{margin-right:6px}
.need{margin:0 0 6px}
.retline{color:var(--sub);margin:0 0 8px}
.dd{border:1.5px solid var(--rule);border-radius:8px;padding:0 14px;margin:0 0 14px}
.dd summary{color:var(--g)}
.dd-in{padding:0 0 12px}
.dd-h{margin:8px 0 2px;font-weight:700}
.dd ul{margin:0;padding:0 0 0 1.3em}
.dd li{margin:0 0 4px}
.do li::marker{content:"○ "}
.dont li::marker{content:"× "}
.c-sec{padding:80px 0}
.c-gray{background:var(--new)}
.c-narrow{max-width:900px}
.c-tbl{width:100%;border-collapse:collapse;background:#fff}
.c-tbl th,.c-tbl td{border-bottom:1px solid var(--rule);padding:4px 14px;text-align:left;vertical-align:middle}
.c-tbl thead th{background:var(--new);border-bottom:2px solid var(--g);padding:10px 14px}
.c-tbl tbody th{width:14em;font-weight:700}
.c-tbl td a{display:inline-flex;align-items:center;min-height:48px;margin-right:22px}
.c-big{display:grid;grid-template-columns:1fr auto 1.3fr;gap:30px;align-items:center;background:linear-gradient(90deg,var(--old) 0 44%,#fff 44%);padding:40px;border-radius:12px;box-shadow:0 0 0 1px var(--rule)}
.c-big .c-memo p{font-size:26px}
.c-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:f}
.c-flow li{position:relative;padding:0 18px 0 0}
.v-pc .c-flow li:not(:last-child)::before{content:"";position:absolute;left:56px;right:8px;top:23px;height:4px;background:var(--g);border-radius:2px}
.c-fn{position:relative;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--g);color:#fff;font-size:24px;margin:0 0 10px}
.c-flow h3{font-size:22px;margin:0 0 4px}
.c-flow p{margin:0}
.c-faq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.c-qa{background:#fff;border-radius:10px;padding:20px 24px;box-shadow:0 0 0 1px var(--rule)}
.c-qa h3{font-size:21px;line-height:1.5;margin:0 0 6px;padding-left:1.6em;text-indent:-1.6em}
.c-qa h3::before{content:"Q.";color:var(--g);margin-right:.4em}
.c-qa p{margin:0}
.call-to-action{background:linear-gradient(90deg,var(--old) 0 50%,var(--new) 50%);padding:80px 0}
.v-pc .c-cta-in{display:grid;grid-template-columns:1fr 220px;gap:24px;max-width:960px}
.c-cta-main,.c-cta-line{background:#fff;border-radius:14px;padding:34px 38px;box-shadow:0 0 0 1px var(--rule)}
.c-cta-line{text-align:center;padding:24px 16px}
.c-cta-main h2{font-size:30px;margin:0 0 6px}
.c-cta-main p{margin:0 0 18px}
.footer{background:#fff;border-top:1px solid var(--rule);padding:44px 0 56px}
.v-pc .c-ft-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.c-ft-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px}
.c-ft-links li:not(:last-child)::after{content:"｜";color:var(--sub);margin-left:6px}
.c-ft-links a{display:inline-flex;align-items:center;min-height:44px}
.c-ft-op{text-align:right}
.c-ft-op p{margin:0}

/* ---------- スマホ ---------- */
.v-sp .c-navbar{padding:10px 14px 6px}
.v-sp .c-brand{display:inline-flex;min-height:44px;justify-content:center}
.v-sp .c-nav{gap:4px;margin-top:4px}
.v-sp .c-nav li{flex:1}
.v-sp .c-nav a{justify-content:center;background:var(--new);padding:4px}
.v-sp .masthead{background:var(--new);padding:14px 12px 30px}
.v-sp .c-mc{padding:22px 18px 18px}
.v-sp .c-mc h1{font-size:27px;line-height:1.45;margin:0 0 8px}
.c-sp-lead{margin:0 0 14px}
.v-sp .c-mc .btn{width:100%;margin:0 0 10px}
.v-sp .c-issuer{font-size:18px;border:0;padding:0;margin:4px 0 10px}
.c-flip{margin-top:26px}
.c-flip .c-b{background:var(--old);padding:14px;border-radius:10px}
.c-flip .c-b img{display:block;width:100%;height:auto}
.c-flip .c-a{background:#fff;padding:14px;border-radius:10px;box-shadow:0 0 0 1px var(--rule)}
.c-down{text-align:center;font-size:40px;color:var(--g);margin:6px 0;line-height:1;font-weight:700}
.v-sp .features-icons{padding:48px 16px 24px}
.v-sp .features-icons h2{font-size:26px;margin:0 0 18px}
.v-sp .c-facts{grid-template-columns:1fr;gap:18px;text-align:left}
.v-sp .c-facts li{display:grid;grid-template-columns:56px 1fr;gap:12px}
.v-sp .c-facts h3{font-size:21px;margin:4px 0}
.v-sp .showcase{padding:32px 0 10px}
.v-sp .c-sh-head{padding:0 16px;margin-bottom:20px}
.v-sp .c-sh-head h2,.v-sp .c-sec h2{font-size:26px}
.v-sp .c-row{margin:0 0 40px}
.v-sp .showcase-img{background:linear-gradient(180deg,var(--old) 0 50%,var(--new) 50%);padding:44px 14px 22px}
.v-sp .c-pair{grid-template-columns:1fr;gap:6px}
.v-sp .c-pair>.c-tag{top:-32px}
.v-sp .c-pair .c-arr{transform:rotate(90deg);justify-self:center}
.v-sp .showcase-text{padding:20px 16px 0}
.v-sp .showcase-text h3{font-size:23px}
.v-sp .showcase-text .c-p{font-size:30px}
.v-sp .c-meta{flex-direction:column}
.v-sp .showcase-text .btn{width:100%}
.v-sp .c-sec{padding:48px 16px}
.c-inds{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.c-inds li{border-bottom:1px solid var(--rule);padding:10px 0}
.c-ind-n{margin:0;font-size:19px}
.c-inds a{display:flex;align-items:center;min-height:44px}
.v-sp .c-flow{grid-template-columns:1fr}
.v-sp .c-flow li{display:grid;grid-template-columns:50px 1fr;gap:14px;padding:0 0 22px}
.v-sp .c-flow li:not(:last-child)::before{content:"";position:absolute;left:23px;top:52px;bottom:0;width:4px;background:var(--g)}
.v-sp .c-fn{margin:0}
.v-sp .c-faq{grid-template-columns:1fr;gap:12px}
.v-sp .c-qa{padding:16px}
.v-sp .call-to-action{padding:40px 12px;background:linear-gradient(180deg,var(--old) 0 50%,var(--new) 50%)}
.v-sp .c-cta-main{padding:26px 18px}
.v-sp .c-cta-main h2{font-size:24px}
.v-sp .c-cta-main .btn{width:100%;margin:0 0 10px}
.v-sp .footer{padding:32px 16px 120px}
.v-sp .c-ft-links{flex-direction:column;margin-bottom:16px}
.v-sp .c-ft-links li::after{content:none!important}
.bar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--rule);box-shadow:0 -6px 16px rgba(20,40,30,.12);transition:transform .2s}
.bar .btn{min-height:56px;font-size:18px;padding:6px 8px}
.bar.hide{transform:translateY(110%)}
.c-note{margin:-14px 0 0;font-size:16px;color:var(--sub)}
.c-flip+.c-note{margin:10px 0 0}
.c-sp-tag{margin:0;font-size:16px;color:var(--sub)}
.v-sp .c-big{grid-template-columns:1fr;padding:22px 14px;gap:12px;background:linear-gradient(180deg,var(--old) 0 40%,#fff 40%)}
.v-sp .c-big .c-arr{justify-self:center}
.v-sp .c-big .c-memo p{font-size:22px}
/* スマホの最初の画面の下端で定期購入の箱が切れないよう、上を少し詰める（11/12 統括の指摘） */
.v-sp .masthead{padding-top:8px}
.v-sp .c-mc{padding-top:16px}
.v-sp .c-mc h1{line-height:1.4}
.v-sp .c-issuer{margin:4px 0 6px}

/* 法務の札に合わせて足した表示（11/12） */
.c-op-h{display:inline-block;background:var(--g);color:#fff;font-size:16px;line-height:1.6;padding:0 10px;border-radius:3px;margin:0 10px 0 0}
.c-ind-l{display:block;font-size:16px;color:var(--sub);line-height:1.5}
/* まとまった仕事の段と、下の帯の運営者（site 23:18 版に合わせる） */
.c-mcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.c-mc{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--rule);border-radius:10px;padding:22px 22px 20px;border-top:6px solid var(--g)}
.c-mc .mk-tag{align-self:flex-start;margin:0 0 8px;padding:0 10px;font-size:16px;font-weight:700;line-height:1.7;color:var(--ink);background:var(--mark);border-radius:4px}
.c-mc h3{margin:0;font-size:22px;line-height:1.45}
.c-mc .c-d{margin:2px 0 0;color:var(--sub)}
.c-mc .c-p{margin:10px 0 6px;font-size:30px;font-weight:700;line-height:1.2}
.c-mc .c-p small{font-size:16px;font-weight:400;color:var(--sub);margin-left:6px}
.c-mm{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c-mm li{font-size:16px;line-height:1.7;padding:0 10px;border:1.5px solid var(--g);border-radius:6px}
.c-mdl{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:17px;line-height:1.6}
.c-mdl dt{font-weight:700;white-space:nowrap}
.c-mdl dd{margin:0}
.c-mc .retline{font-size:16px;line-height:1.7;color:var(--sub);margin:0 0 12px}
.c-mc .btn{margin-top:auto;width:100%}
.v-sp .c-mdl{grid-template-columns:1fr;gap:0}
.v-sp .c-mdl dd{margin:0 0 6px}
.v-sp .c-mcs{grid-template-columns:1fr;gap:20px}
.c-note2{margin:-4px 0 24px;color:var(--sub);font-size:16px}
.c-mfoot{margin:22px 0 0;color:var(--sub)}
.c-ft-op1{font-size:16px;margin:8px 0 0}
.c-pair-none{display:flex;align-items:center;justify-content:center;min-height:200px;background:var(--old)}
.c-none{margin:0;color:var(--sub)}

/* 標準：手書き風の書体を使わない（図書館008の7番） */
.hf2{font-family:var(--ud);font-weight:700}