/* 名刺ごっこ LP */
:root{--paper:#FAF9F6;--sheet:#FFFFFF;--tint:#EEF3EC;--ink:#2B2D2F;--ink-soft:#5F6367;--rule:#E2DFD8;--pop:#6B9A72;--pop-deep:#3F6B47;--clay:#A85A34;--clay-soft:#FBEDE4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;font-size:16px;line-height:1.85;letter-spacing:.03em;word-break:auto-phrase;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:var(--pop-deep)}
.ib{display:inline-block}
.in{max-width:1080px;margin:0 auto;padding:0 22px}
.in.narrow{max-width:760px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:10;background:rgba(250,249,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--ink);text-decoration:none;font-size:1.125rem;font-weight:900;letter-spacing:.1em}
.logo.small{font-size:1rem}
.logo-mark{width:30px;height:20px;border-radius:5px;background:var(--pop);position:relative;flex:none}
.logo-mark::after{content:"";position:absolute;left:5px;bottom:4px;width:6px;height:6px;border-radius:1.5px;background:#fff}
.hd-nav{display:flex;align-items:center;gap:6px 20px;font-size:.875rem}
.hd-nav a{color:var(--ink);text-decoration:none}
.hd-nav a:hover{color:var(--pop-deep)}
.hd-login{padding:6px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--pop)}
@media (max-width:720px){.hd-nav a:not(.hd-login){display:none}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--pop-deep);color:#fff;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:background .2s}
.btn:hover{background:#2F5A37;color:#fff}
.btn.ghost{background:transparent;color:var(--pop-deep);box-shadow:inset 0 0 0 1.5px var(--pop)}
.btn.ghost:hover{background:#fff}
.btn.light{background:#fff;color:var(--pop-deep)}
.btn.light:hover{background:var(--tint)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.note{margin:14px 0 0;font-size:.8125rem;color:var(--ink-soft)}

/* スマホの枠 */
.ph{margin:0;background:#1F2421;padding:7px;border-radius:22px;box-shadow:0 18px 40px rgba(40,52,42,.18)}
.ph img{border-radius:15px;width:100%}
.ph.small{padding:5px;border-radius:16px;box-shadow:0 10px 24px rgba(40,52,42,.14)}
.ph.small img{border-radius:11px}

/* ヒーロー */
.hero{padding:56px 0 72px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.eyebrow{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.16em;color:var(--pop-deep)}
.hero-h{margin:14px 0 0;font-size:clamp(1.875rem,4.6vw,3rem);font-weight:900;line-height:1.35;letter-spacing:.04em}
.hero-lead{margin:20px 0 0;font-size:1.0625rem;color:var(--ink-soft);max-width:30em}
.hero-vis{position:relative;padding:0 0 40px 0}
.hero-vis .ph-land{width:84%}
.hero-vis .ph-port{position:absolute;right:0;bottom:-6px;width:29%;padding:5px;border-radius:20px}
.hero-vis .ph-port img{border-radius:15px}
@media (max-width:860px){
  .hero{padding:36px 0 56px}
  .hero-in{grid-template-columns:1fr;gap:36px}
  .hero-vis{max-width:560px;margin:0 auto;width:100%}
}

/* セクション共通 */
.sec{padding:84px 0}
.sec.tint{background:var(--tint)}
.sec-eb{margin:0;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.24em;color:var(--clay)}
.sec-h{margin:10px 0 0;text-align:center;font-size:clamp(1.5rem,3.6vw,2.125rem);font-weight:900;line-height:1.45;letter-spacing:.05em}
.sec-h.left{text-align:left}
.sec-lead{max-width:40em;margin:18px auto 0;text-align:center;color:var(--ink-soft)}
.sec-foot{margin:36px 0 0;text-align:center;color:var(--ink-soft);font-size:.9375rem}
@media (max-width:720px){.sec{padding:64px 0}}

/* 3ステップ */
.steps3{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.steps3 li{display:flex;flex-direction:column}
.steps3 figure.ph{height:200px;display:flex;align-items:center;justify-content:center;background:none;box-shadow:none;padding:0;border-radius:0}
.steps3 figure.ph-land img,.steps3 figure.ph-port img{max-height:200px;width:auto;padding:5px;background:#1F2421;border-radius:16px;box-shadow:0 10px 24px rgba(40,52,42,.14)}
.st-no{display:grid;place-items:center;width:40px;height:40px;margin:26px 0 0;border-radius:50%;background:var(--clay);color:#fff;font-weight:900;font-size:1.125rem}
.st-h{margin:12px 0 0;font-size:1.25rem;font-weight:900;line-height:1.5}
.st-t{margin:8px 0 0;color:var(--ink-soft);font-size:.9375rem}
@media (max-width:860px){.steps3{grid-template-columns:1fr;gap:48px;max-width:460px;margin-left:auto;margin-right:auto}.steps3 figure.ph{height:auto}.steps3 figure.ph-land img{width:100%;max-height:none}.steps3 figure.ph-port img{max-height:260px}}

/* できること */
.feats{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.feats li{padding:22px 20px;background:var(--sheet);border-radius:16px}
.feats h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:1.0625rem;font-weight:900;line-height:1.5}
.feats p{margin:8px 0 0;font-size:.875rem;color:var(--ink-soft);line-height:1.85}
.feats li.is-soon{background:transparent;border:1.5px dashed #A9C2A6}
.soon{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--clay-soft);color:#8E4A28;font-size:.6875rem;font-weight:700;letter-spacing:.06em}
@media (max-width:960px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.feats{grid-template-columns:1fr}}

/* 手にあわせた画面 */
.hand{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.hand-txt .sec-eb{text-align:left}
.hand-txt>p{margin:18px 0 0;color:var(--ink-soft)}
.hand-list{margin:24px 0 0;display:grid;gap:16px}
.hand-list dt{display:flex;align-items:center;gap:10px;font-weight:900}
.hand-list dd{margin:4px 0 0;font-size:.9375rem;color:var(--ink-soft)}
.tag{display:inline-block;padding:2px 12px;border-radius:999px;color:#fff;font-size:.8125rem;font-weight:700}
.tag.r,.pin.r{background:var(--clay)}
.tag.l,.pin.l{background:#4F6D8A}
.hand-vis{position:relative;margin:0}
.pin{position:absolute;transform:translate(-50%,-50%);padding:5px 14px;border-radius:999px;color:#fff;font-size:.875rem;font-weight:900;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 6px 14px rgba(0,0,0,.2)}
@media (max-width:860px){.hand{grid-template-columns:1fr;gap:36px}}

/* マナー */
.manners{list-style:none;margin:44px auto 0;padding:0;max-width:860px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.manners li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:18px 20px;background:var(--sheet);border-radius:16px}
.mn{grid-row:span 3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--clay);color:#fff;font-weight:900;font-size:1.125rem}
.manners b{font-size:1.125rem;font-weight:900;line-height:1.5}
.manners q{font-size:1rem;font-weight:700;color:var(--pop-deep);line-height:1.6;quotes:"「" "」"}
.manners small{justify-self:start;padding:1px 10px;border-radius:999px;background:var(--clay-soft);color:#8E4A28;font-size:.75rem;font-weight:700}
@media (max-width:720px){.manners{grid-template-columns:1fr}}

/* 子ども */
.kids-grid{margin:44px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kid-card{padding:26px 22px;border-radius:16px;background:var(--sheet);box-shadow:0 1px 0 var(--rule)}
.kid-card h3{margin:0;font-size:1.0625rem;font-weight:900;line-height:1.5}
.kid-card p{margin:8px 0 0;font-size:.9375rem;color:var(--ink-soft)}
@media (max-width:860px){.kids-grid{grid-template-columns:1fr}}

/* はじめかた */
.start{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.start li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:22px 20px;background:var(--sheet);border-radius:16px}
.start .mn{grid-row:span 2}
.start h3{margin:6px 0 0;font-size:1.0625rem;font-weight:900;line-height:1.5}
.start p{margin:6px 0 0;font-size:.875rem;color:var(--ink-soft)}
@media (max-width:860px){.start{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* FAQ */
.faq{margin:40px 0 0;display:grid;gap:10px}
.faq details{background:var(--sheet);border-radius:14px;box-shadow:0 1px 0 var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 20px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--pop);border-bottom:2px solid var(--pop);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{margin:0;padding:0 20px 18px;color:var(--ink-soft);font-size:.9375rem}

/* 最後のCTA */
.final{background:var(--pop-deep);color:#fff;padding:72px 0}
.final-in{text-align:center}
.final-h{margin:0;font-size:clamp(1.625rem,4vw,2.375rem);font-weight:900;line-height:1.45;letter-spacing:.05em}
.final p{margin:14px 0 28px;opacity:.92}

/* フッター */
.ft{padding:36px 0 calc(36px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
.ft-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.875rem}
.ft-nav a{color:var(--ink-soft)}
.copy{margin:0;width:100%;font-size:.75rem;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== 中央揃え ===== */
.hero-in{grid-template-columns:1fr;gap:44px;text-align:center}
.hero-txt{max-width:720px;margin:0 auto}
.hero-lead{margin-left:auto;margin-right:auto}
.cta-row{justify-content:center}
.hero-vis{max-width:640px;margin:0 auto;width:100%}
.steps3 li{align-items:center;text-align:center}
.st-no{margin-left:auto;margin-right:auto}
.feats li{text-align:center}
.feats h3{justify-content:center}
.hand{grid-template-columns:1fr;gap:40px;text-align:center}
.hand-txt{max-width:640px;margin:0 auto}
.hand-txt .sec-eb,.sec-h.left{text-align:center}
.hand-list dt{justify-content:center}
.hand-vis{max-width:640px;margin:0 auto;width:100%}
.manners li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.manners small{justify-self:auto}
.kid-card{text-align:center}
.start li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.faq summary{justify-content:center;text-align:center}
.faq details p{text-align:center}
.ft-in{flex-direction:column;justify-content:center;text-align:center}
.ft-nav{justify-content:center}

/* ===== 導入（写真つき） ===== */
.hero{padding:64px 0 72px}
.hero-h{margin:0;font-size:clamp(2.5rem,7vw,4.25rem);font-weight:900;line-height:1.2;letter-spacing:.08em}
.hero-copy{margin:18px 0 0;font-size:clamp(1.375rem,3.6vw,2.125rem);font-weight:700;line-height:1.5;letter-spacing:.06em;color:var(--pop-deep)}
.hero-lead{margin:12px auto 0;font-size:clamp(1rem,2.2vw,1.1875rem);color:var(--ink-soft);letter-spacing:.06em}
.hero-photo{margin:0 auto;max-width:1040px;width:100%}
.hero-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;box-shadow:0 20px 44px rgba(40,52,42,.16)}
.manner-photo{margin:40px auto 0;max-width:520px}
.manner-photo img{width:100%;border-radius:22px;box-shadow:0 16px 36px rgba(40,52,42,.14)}
@media (max-width:720px){.hero{padding:44px 0 56px}.hero-photo img{border-radius:16px;aspect-ratio:4/3}.manner-photo img{border-radius:16px}}

/* ===== イメージカラー：ソフトトーン12色 ===== */
:root{
  --c1:#DDC354;--c2:#A9C25C;--c3:#70B187;--c4:#4EA497;--c5:#458CA8;--c6:#4E74A1;
  --c7:#6D709D;--c8:#A072A1;--c9:#C48590;--c10:#E08081;--c11:#E18A6C;--c12:#EFA14C;
  --pop:#4EA497;--pop-deep:#3A7B71;--tint:#EEF5F3;--clay:#9D604B;--clay-soft:#FCEBD8;
  --rainbow:linear-gradient(90deg,var(--c1) 0 8.33%,var(--c2) 0 16.66%,var(--c3) 0 25%,var(--c4) 0 33.33%,var(--c5) 0 41.66%,var(--c6) 0 50%,var(--c7) 0 58.33%,var(--c8) 0 66.66%,var(--c9) 0 75%,var(--c10) 0 83.33%,var(--c11) 0 91.66%,var(--c12) 0 100%);
}
.btn:hover{background:#2F665E}
.logo-mark{background:conic-gradient(var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c7),var(--c8),var(--c9),var(--c10),var(--c11),var(--c12),var(--c1))}
.hd{border-bottom:0}
.hd::after{content:"";display:block;height:3px;background:var(--rainbow)}

/* 12色のドット（導入） */
.dots{display:flex;justify-content:center;gap:8px;margin:0 0 22px}
.dots i{width:12px;height:12px;border-radius:50%}
.dots i:nth-child(1){background:var(--c1)}.dots i:nth-child(2){background:var(--c2)}.dots i:nth-child(3){background:var(--c3)}.dots i:nth-child(4){background:var(--c4)}
.dots i:nth-child(5){background:var(--c5)}.dots i:nth-child(6){background:var(--c6)}.dots i:nth-child(7){background:var(--c7)}.dots i:nth-child(8){background:var(--c8)}
.dots i:nth-child(9){background:var(--c9)}.dots i:nth-child(10){background:var(--c10)}.dots i:nth-child(11){background:var(--c11)}.dots i:nth-child(12){background:var(--c12)}

/* 番号：やわらかい色＋濃い文字 */
.st-no,.mn{color:var(--ink)}
.steps3 li:nth-child(1) .st-no{background:var(--c10)}
.steps3 li:nth-child(2) .st-no{background:var(--c12)}
.steps3 li:nth-child(3) .st-no{background:var(--c4)}
.manners li:nth-child(1) .mn{background:var(--c10)}
.manners li:nth-child(2) .mn{background:var(--c11)}
.manners li:nth-child(3) .mn{background:var(--c12)}
.manners li:nth-child(4) .mn{background:var(--c1)}
.manners li:nth-child(5) .mn{background:var(--c2)}
.manners li:nth-child(6) .mn{background:var(--c3)}
.start li:nth-child(1) .mn{background:var(--c11)}
.start li:nth-child(2) .mn{background:var(--c1)}
.start li:nth-child(3) .mn{background:var(--c4)}

/* カードの上に色の帯 */
.feats li,.kid-card{position:relative;overflow:hidden}
.feats li::before,.kid-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px}
.feats li:nth-child(1)::before{background:var(--c10)}
.feats li:nth-child(2)::before{background:var(--c11)}
.feats li:nth-child(3)::before{background:var(--c12)}
.feats li:nth-child(4)::before{background:var(--c1)}
.feats li:nth-child(5)::before{background:var(--c2)}
.feats li:nth-child(6)::before{background:var(--c4)}
.feats li:nth-child(7)::before{background:var(--c6)}
.feats li:nth-child(8)::before{background:var(--c8)}
.feats li.is-soon{border-color:#B7D3CD}
.kids-grid .kid-card:nth-child(1)::before{background:var(--c3)}
.kids-grid .kid-card:nth-child(2)::before{background:var(--c5)}
.kids-grid .kid-card:nth-child(3)::before{background:var(--c9)}

/* 右手・左手 */
.tag.r,.pin.r{background:#A86751}
.tag.l,.pin.l{background:var(--c6)}

/* 準備中のラベル */
.soon{color:#8A5418}

/* 最後のCTAとフッター */
.final{background:var(--pop-deep);position:relative}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rainbow)}
.ft{border-top:0;position:relative}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--rainbow)}

/* ===== フォント：Zen Maru Gothic ===== */
body{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif}

/* ===== 名刺交換するふたり（タイトルの左右） ===== */
.hero-title{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,2.4vw,28px)}
.bow{flex:none;width:clamp(44px,7vw,74px);height:auto;fill:currentColor;margin-bottom:.1em}
.bow.l{color:var(--c4)}
.bow.r{color:var(--c11);transform:scaleX(-1)}
.hero-title .hero-h{white-space:nowrap;font-size:clamp(1.75rem,8vw,4.25rem)}
.bow{width:clamp(34px,7vw,74px)}
@media (max-width:420px){.hero-title{gap:6px}.hero-title .hero-h{letter-spacing:.04em}}

/* ===== 背景は白 ===== */
:root{--paper:#FFFFFF}
.hd{background:rgba(255,255,255,.94)}
.kid-card{box-shadow:none;border:1px solid var(--rule)}
.faq details{box-shadow:none;border:1px solid var(--rule)}
.bow{width:clamp(40px,8vw,92px);margin-bottom:.12em}
/* 「。」の右の余白を詰めて、左右のイラストとの間隔をそろえる */
.hero-h .kuten{letter-spacing:0;margin-right:-.6em}
/* 導入：サブコピー */
.hero-sub{margin:14px 0 0;font-size:clamp(1rem,2.4vw,1.25rem);font-weight:700;color:var(--ink-soft);letter-spacing:.1em}
.hero-copy{margin-top:22px}

/* 導入の下の写真4枚 */
.gallery{list-style:none;margin:0 auto;padding:0;max-width:1080px;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gallery li{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#F2F2F0;box-shadow:0 10px 26px rgba(40,52,42,.12)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery li{border-radius:14px}}
.gallery li.fit img{object-fit:contain}
/* 写真2枚 */
.gallery{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;gap:18px}
@media (max-width:860px){.gallery{gap:10px}}
/* マーカー強調 */
.marker{background:linear-gradient(transparent 58%,rgba(221,195,84,.55) 58%);color:var(--ink);font-weight:700;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.marker{display:inline-block;margin-top:4px}
/* できること：アイコン */
.fi{display:grid;place-items:center;width:52px;height:52px;margin:6px auto 12px;border-radius:50%;background:color-mix(in srgb,var(--fc) 22%,#fff);color:color-mix(in srgb,var(--fc) 62%,#1d2422)}
.fi svg{width:28px;height:28px}
/* 手にあわせた画面：スマホの図を説明文のすぐ下に */
.hand-txt .hand-vis{margin:24px auto 8px}

/* こども用ページへのボタン・こども用ページ */
.hand-more{margin:30px 0 0}
.hand-more .btn{gap:8px}
.kids-hero{padding:64px 0 40px}
.kids-h{margin:10px 0 0;font-size:clamp(2rem,5.4vw,3.25rem);font-weight:900;letter-spacing:.08em;line-height:1.3}
.kids-hero .hero-lead{margin-top:16px;line-height:1.9}
.marker{display:inline;margin-top:0;line-height:2}
.sec.back{padding-top:0}

/* できること：7枚を中央寄せで並べる */
.feats{display:flex;flex-wrap:wrap;justify-content:center}
.feats li{flex:0 0 calc((100% - 42px)/4)}
@media (max-width:960px){.feats li{flex-basis:calc((100% - 14px)/2)}}
@media (max-width:520px){.feats li{flex-basis:100%}}

/* 6つのボタン：紹介ブロック */
.spot{margin:28px auto 0;max-width:880px;padding:40px 28px 36px;background:var(--sheet);border-radius:22px;text-align:center;position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c12)}
.spot .fi{width:60px;height:60px}
.spot .fi svg{width:32px;height:32px}
.spot-lb{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.14em;color:#8A5418}
.spot-h{margin:8px 0 0;font-size:clamp(1.375rem,3.2vw,1.875rem);font-weight:900;line-height:1.5;letter-spacing:.04em}
.spot-t{max-width:34em;margin:14px auto 0;color:var(--ink-soft)}
.spot-demo{display:flex;align-items:center;justify-content:center;gap:18px;margin:30px 0 0}
.spot-demo figure{margin:0;width:min(240px,40vw)}
.spot-demo .ph{padding:6px;border-radius:24px}
.spot-demo .ph img{border-radius:18px}
.spot-demo figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-weight:700;font-size:.9375rem}
.spot-demo figcaption .mn{width:28px;height:28px;font-size:.875rem;display:grid;place-items:center;border-radius:50%;flex:none}
.spot-demo figure:first-child .mn{background:var(--c11)}
.spot-demo figure:last-child .mn{background:var(--c4)}
.spot-arrow{flex:none;color:var(--c11)}
.spot-note{margin:26px auto 0;max-width:36em;font-size:.875rem;color:var(--ink-soft);padding:12px 16px;background:var(--tint);border-radius:12px}
@media (max-width:520px){.spot{padding:32px 16px 26px}.spot-demo{gap:6px}.spot-arrow svg{width:20px;height:20px}.spot-demo figcaption{font-size:.8125rem;flex-direction:column;gap:4px}}
/* 3ステップ：保存し忘れのフォロー */
.st-tip{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:14px;background:#FDEFE9;border:1.5px solid #F2C5B4;color:#7A3F27;font-size:.875rem;line-height:1.7;text-align:left}
.st-tip svg{flex:none;margin-top:1px;color:#C9664A}
.st-tip b{display:block;font-weight:900;color:#8A3F22}

/* ===== 枠の内側の余白を広めに ===== */
.feats li{padding:32px 26px 30px}
.feats p{margin-top:10px}
.spot{padding:52px 44px 44px}
.spot-note{padding:18px 26px}
.st-tip{padding:18px 20px;gap:12px}
.manners li{padding:28px 26px 26px}
.kid-card{padding:34px 30px 32px}
.start li{padding:32px 28px 30px}
.faq summary{min-height:64px;padding:16px 28px}
.faq details p{padding:0 28px 24px}
@media (max-width:520px){
  .feats li{padding:28px 22px 26px}
  .spot{padding:40px 20px 32px}
  .spot-note{padding:16px 18px}
  .st-tip{padding:16px 18px}
  .manners li,.kid-card,.start li{padding:26px 22px 24px}
  .faq summary{padding:14px 20px}
  .faq details p{padding:0 20px 20px}
}

/* できること：わたす人／受け取った人 */
.fgroup{margin-top:56px}
.fgroup+.fgroup{margin-top:72px;padding-top:64px;border-top:1.5px dashed #CFE0DA}
.fg-head{text-align:center}
.fg-lb{display:inline-block;padding:5px 18px;border-radius:999px;background:var(--fc);color:#fff;font-size:.875rem;font-weight:700;letter-spacing:.1em}
.fg-h{margin:14px 0 0;font-size:1.375rem;font-weight:900;line-height:1.5}
.fg-t{margin:8px 0 0;color:var(--ink-soft);font-size:.9375rem}
.fgroup .feats{margin-top:28px}
.feats li[style]::before{background:var(--fc)}
.feats-demo li{flex-basis:calc((100% - 14px)/2);display:flex;flex-direction:column;align-items:center}
.feat-demo{margin:22px 0 0;margin-top:auto;padding-top:22px;width:100%}
.feat-demo img{display:block;margin:0 auto;height:auto}
.feat-card img{width:min(100%,340px);filter:drop-shadow(0 8px 18px rgba(60,70,80,.18))}
.feat-shot img{width:min(100%,300px);border-radius:14px;border:1px solid #E6E2DA;box-shadow:0 8px 20px rgba(60,70,80,.10)}
.fgroup .spot{margin-top:14px}
.feats-wide{margin-top:14px!important}
.feats-wide li{flex-basis:100%}
@media (max-width:640px){.feats-demo li{flex-basis:100%}.fg-h{font-size:1.1875rem}.fgroup+.fgroup{margin-top:56px;padding-top:48px}}
.feats-demo,.feats-wide{max-width:880px;margin-left:auto;margin-right:auto}
.fgroup .feats{max-width:880px;margin-left:auto;margin-right:auto}
.fgroup .feats li{flex-basis:calc((100% - 14px)/2)}
.fgroup .feats-wide li{flex-basis:100%}
@media (max-width:640px){.fgroup .feats li{flex-basis:100%}}
.feat-flow{display:flex;flex-direction:column;align-items:center;gap:10px}
.feat-flow figure{margin:0;width:100%}
.feat-flow img{display:block;width:min(100%,320px);margin:0 auto;height:auto}
.feat-flow img:not(.shot){filter:drop-shadow(0 8px 18px rgba(60,70,80,.18))}
.feat-flow img.shot{border-radius:14px;box-shadow:0 8px 18px rgba(60,70,80,.16)}
.feat-flow figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:.875rem;font-weight:700}
.flow-arrow{display:flex;align-items:center;gap:4px;color:var(--c11);font-size:.8125rem;font-weight:700}
.feat-flow .mn{width:24px;height:24px;font-size:.8125rem;flex:none}
.feat-flow figure:last-child .mn{background:var(--pop-deep)}
.feats-demo .feat-demo{margin-top:0}
/* 表紙→QR を横並び（小さめ） */
.feat-flow{flex-direction:row;align-items:flex-start;justify-content:center;gap:8px}
.feat-flow figure{flex:1 1 0;min-width:0;max-width:170px}
.feat-flow img{width:100%}
.feat-flow img.shot{border-radius:8px}
.feat-flow figcaption{margin-top:8px;font-size:.75rem;gap:5px}
.feat-flow .mn{width:20px;height:20px;font-size:.6875rem}
.flow-arrow{flex-direction:column;gap:2px;flex:none;margin-top:22px;font-size:.6875rem}
.flow-arrow svg{width:18px;height:18px}
/* アピールページ枠の余白を広めに */
.spot{padding:68px 80px 60px}
.spot-demo{margin-top:36px}
.spot-note{margin-top:36px}
@media (max-width:860px){.spot{padding:56px 40px 48px}}
@media (max-width:520px){.spot{padding:48px 28px 40px}}
/* 準備中グループ */
.fgroup .feats-3 li{flex-basis:calc((100% - 28px)/3)}
.fgroup-soon .fg-t{font-size:.875rem}
.feats .who{margin:10px 0 4px;font-size:.75rem;font-weight:700;color:var(--fc);letter-spacing:.08em}
.feats .who+h3{margin-top:0}
@media (max-width:860px){.fgroup .feats-3 li{flex-basis:100%}}