/* NDSO 事業相談LP（v1.0.0）
元：LP/review_v8.html。色・書体のルールは アートディレクション_v8.md を参照 */
/* v8（レビュー用）：アートディレクション_v8.md に沿った試作。FV＋02共感まで。
世界観：書斎で、信頼できる相談相手と向き合う時間。アイボリーの紙に、紺のインクと細い線。
色：ロゴはロゴ画像の色（#006CA8）のまま。それ以外は資料の正式色（Navy #003A54／NDSO Blue #0074A8／Deep Blue #005579／Gray #DCDDDD）。
追加色：アイボリー #F7F4EE・#EFEAE0、本文インク #1B2A33、シャンパンゴールド #B49A6A（線・飾りのみ。文字色にしない）。
書体：訴求＝源ノ明朝（Noto Serif JP）、説明・手順・料金・ボタン＝Noto Sans JP。数字も明朝。 */
:root {
--navy: #003A54; --blue: #0074A8; --deep: #005579; --gray: #DCDDDD; --white: #FFFFFF;
--ivory: #F7F4EE; --ivory2: #EFEAE0; --ink: #1B2A33; --sub: #46545C; --mute: #66727A; --gold: #B49A6A; --gold-lt: #D9C7A3;
--serif: "Noto Serif JP", "Source Han Serif JP", "源ノ明朝", "Yu Mincho", serif;
--sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
--max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.9; font-feature-settings: "palt"; line-break: strict; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.nb { display: inline-block; }
@media (max-width: 600px) { br.pc { display: none; } }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.reviewbar { background: #FFF4C2; color: #5A4500; font-size: 14px; text-align: center; padding: 7px 16px; line-height: 1.6; }
/* 金の線つきラベル */
.label { display: inline-flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 700; letter-spacing: .08em; color: var(--navy); }
.label::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
/* ボタン：NDSOブルーの丸ボタン（影は控えめ） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 14px 36px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: .04em; box-shadow: 0 6px 16px rgb(0 58 84 / .22); transition: background .2s, transform .2s, box-shadow .2s; }
.btn:hover { background: var(--deep); }
.btn:active { transform: translateY(1px); box-shadow: 0 3px 8px rgb(0 58 84 / .22); }
.btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
/* ヘッダー：アイボリー地に青いロゴ＋細い罫線 */
.site-head { background: var(--ivory); border-bottom: 1px solid var(--gray); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand span { font-size: 13.5px; color: var(--sub); letter-spacing: .06em; padding-left: 22px; border-left: 1px solid var(--gray); }
.gnav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; }
.gnav a { text-decoration: none; color: var(--ink); }
.gnav a:hover { color: var(--blue); }
.gnav a.btn, .gnav a.btn:hover { color: #fff; }
.gnav .btn { min-height: 44px; padding: 8px 22px; font-size: 14.5px; box-shadow: none; }
.gnav .btn::after { display: none; }
/* ===== 01 FV ===== */
.fv-top { max-width: var(--max); margin: 0 auto; padding: 16px 40px 14px; display: grid; grid-template-columns: 50fr 50fr; gap: 40px; align-items: center; }
.fv h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 4.5vw, 64px); line-height: 1.28; letter-spacing: .02em; color: var(--navy); margin: 18px 0 18px; }
.fv .sub { font-size: 18px; line-height: 1.9; color: var(--sub); max-width: 27em; }
.venn { width: 100%; max-width: 520px; justify-self: center; }
.venn svg { width: 100%; height: auto; display: block; }
.venn .v-main { font-size: 26px; }
.venn .v-sub { display: none; }
.venn .v-note { font-size: 21px; }
/* 紺の帯：v6のレイアウト（中央に見出し→丸3つ→申込ブロック） */
.fv-band { background: var(--navy); color: #fff; padding: 24px 0 30px; }
.fv-band .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.fv-band .scenes-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scene-label { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .08em; display: flex; align-items: center; gap: 18px; }
.scene-label::before, .scene-label::after { content: ""; width: 36px; height: 1px; background: var(--gold); }
.scenes { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.scenes li { position: relative; width: 108px; height: 108px; border-radius: 50%; border: 1px solid var(--gold-lt); display: grid; place-items: center; text-align: center; font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.55; letter-spacing: .02em; padding: 6px; cursor: default; white-space: nowrap; }
.scenes li::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .14); }
.cta-box { width: 100%; max-width: 760px; margin-top: 4px; background: var(--white); color: var(--ink); padding: 20px 44px 18px; border-top: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cta-lead { font-size: 15.5px; color: var(--sub); letter-spacing: .04em; }
.price { display: flex; align-items: baseline; justify-content: center; gap: 18px; flex-wrap: wrap; }
.price .label2 { font-size: 17px; font-weight: 700; color: var(--navy); }
.price .label2 small { font-size: 15px; font-weight: 500; color: var(--mute); margin-left: 10px; }
.price .yen { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; color: var(--navy); letter-spacing: .01em; }
.price .yen span { font-size: 19px; margin-left: 2px; }
.price .yen small { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--mute); margin-left: 6px; }
.cta-box .btn { width: 100%; max-width: 500px; margin-top: 6px; font-size: 18px; }
.assure { font-size: 14.5px; color: var(--mute); }
/* ===== 02 共感：アイボリー濃の面、問いを明朝の引用として左右にずらす ===== */
.ask { background: var(--ivory2); padding: 150px 0 140px; }
/* 02（PC）：左に見出し（追従）、右に3つの問いを左端そろえで縦に並べる。参考：Gron（悩みを罫線の行で）・エムハンド（番号＋見出しの行） */
.ask-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.ask .head { position: sticky; top: 40px; }
.ask h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1.55; color: var(--navy); margin: 22px 0 24px; letter-spacing: .02em; }
.ask .head p { color: var(--sub); }
.quotes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold); }
.quotes li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 24px; padding: 36px 0 34px; border-bottom: 1px solid rgb(0 58 84 / .14); }
.quotes .no { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--gold); line-height: 1; grid-row: span 3; padding-top: 4px; }
.quotes .scene { font-size: 14px; font-weight: 700; color: var(--mute); letter-spacing: .06em; }
.quotes .q { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 27px); font-weight: 500; line-height: 1.65; color: var(--navy); letter-spacing: .02em; margin: 6px 0 12px; }
.quotes .note { color: var(--sub); font-size: 16px; max-width: 34em; }
.quotes li.more { padding: 26px 0; align-items: center; }
.quotes li.more .no { grid-row: auto; font-size: 24px; padding-top: 0; }
.quotes .q-more { font-size: 16.5px; color: var(--navy); font-weight: 500; }
/* 02の小さな線画（FVと同じタッチ・紺の線＋金の一点） */
.quotes li { grid-template-columns: 64px minmax(0, 1fr) 84px !important; }
.quotes li .mini { grid-column: 3; grid-row: 1 / span 3; width: 72px; height: 72px; justify-self: end; align-self: center; }
.quotes li .scene, .quotes li .q, .quotes li .note { grid-column: 2; }
.quotes li.more { grid-template-columns: 64px minmax(0, 1fr) !important; }
.ask .close { margin-top: 112px; text-align: center; }
.ask .close p { display: inline-block; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; line-height: 1.7; color: var(--navy); padding: 0 8px; }
.ask .close::before { content: ""; display: block; width: 1px; height: 56px; background: var(--gold); margin: 0 auto 28px; }
/* FVの線画：壁に付箋を貼って整理する代表 */
.wall { width: 100%; max-width: 560px; justify-self: end; position: relative; }
.wall svg { width: 100%; height: auto; display: block; }
.wall-note { position: absolute; left: 10px; bottom: 30px; font-size: 12px; color: var(--mute); letter-spacing: .06em; background: rgb(255 255 255 / .85); padding: 0 6px; }
/* 03：白い面。左に言葉、右に3つの円 */
.method { background: var(--white); padding: 120px 0 112px; }
.method .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.method h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.5; color: var(--navy); margin: 22px 0 26px; letter-spacing: .02em; }
.method .body { color: var(--sub); }
.m-venn { max-width: 520px !important; justify-self: center !important; }
/* 未確定の印 */
.tbd { display: inline-block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #5A4500; background: #FFF4C2; padding: 1px 7px; margin: 0 6px; vertical-align: middle; letter-spacing: 0; }
.tbd-note { margin-top: 18px; font-size: 14px; color: var(--mute); }
.label-inv { color: #fff; }
/* 03：架空例の表 */
.method .example-wrap { display: block; margin-top: 72px; }
.example { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.example .ex-head p.t { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.6; color: var(--navy); margin-top: 14px; }
.example .ex-head p.d { margin-top: 10px; font-size: 15.5px; color: var(--sub); }
.example .ex-head .tbd { margin-left: 0; }
.example dl { margin: 0; display: grid; grid-template-columns: 11em 1fr; border-top: 1px solid var(--navy); }
.example dt, .example dd { margin: 0; padding: 15px 18px; border-bottom: 1px solid var(--gray); font-size: 16px; }
.example dt { font-weight: 700; color: var(--navy); padding-left: 0; }
.example dd { color: var(--sub); }
.example dd.next { color: var(--ink); }
/* 04：持ち帰るもの */
.take { background: var(--ivory); padding: 136px 0 128px; }
.take .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.report svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }
.take h2, .host h2, .beyond h2, .apply h2, .faq h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.5; color: var(--navy); margin: 22px 0 24px; letter-spacing: .02em; }
.take .body, .beyond .body { color: var(--sub); max-width: 32em; }
.items { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--gold); }
.items li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--gray); }
.items .no { font-family: var(--serif); font-size: 22px; color: var(--gold); }
.items b { font-size: 18px; font-weight: 700; color: var(--navy); }
/* 05：代表（明るい面。紺はFVの帯・06の料金・09に任せる） */
.host { background: var(--ivory2); color: var(--ink); padding: 120px 0 112px; }
.host .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.portrait { position: relative; max-width: 320px; }
.portrait::before { content: ""; position: absolute; inset: 6% -7% -5% 9%; border: 1px solid var(--gold); }
.portrait img { position: relative; width: 100%; height: auto; }
.host .name { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: .06em; color: var(--navy); margin: 20px 0 20px; line-height: 1.5; }
.host .body { color: var(--sub); max-width: 34em; }
.career { margin: 30px 0 0; display: grid; grid-template-columns: 8em 1fr; border-top: 1px solid var(--gold); }
.career dt, .career dd { margin: 0; padding: 14px 0; border-bottom: 1px solid rgb(0 58 84 / .14); font-size: 16px; }
.career dt { font-family: var(--serif); color: var(--gold); }
.career dd { color: var(--ink); }
/* 06：料金・申込 */
.apply { background: var(--white); padding: 128px 0 120px; }
.apply .a-head { text-align: center; margin-bottom: 48px; }
.apply .a-head h2 { margin-bottom: 0; }
.a-box { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); border: 1px solid var(--navy); }
.a-price { background: var(--navy); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.a-name { font-size: 18px; font-weight: 700; }
.a-name small { display: block; font-size: 14.5px; font-weight: 500; color: rgb(255 255 255 / .75); }
.a-yen { font-family: var(--serif); font-size: 58px; font-weight: 600; line-height: 1.1; margin: 14px 0 18px; }
.a-yen span { font-size: 22px; margin-left: 2px; }
.a-yen small { font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgb(255 255 255 / .75); margin-left: 6px; }
.a-note { font-size: 15px; color: rgb(255 255 255 / .85); padding-top: 18px; border-top: 1px solid rgb(217 199 163 / .5); }
.a-flow { padding: 40px 44px; }
.a-flow h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.a-flow ol { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--gray); }
.a-flow li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 0 4px; padding: 13px 0; border-bottom: 1px solid var(--gray); }
.a-flow li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); color: var(--gold); font-size: 17px; grid-row: span 2; }
.a-flow li b { font-size: 16.5px; color: var(--navy); }
.a-flow li span { font-size: 15px; color: var(--sub); }
.a-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn-line { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); box-shadow: none; }
.btn-line:hover { background: #F0F6FA; }
.btn.is-off { opacity: .45; pointer-events: none; }
/* 07：継続支援 */
.beyond { background: var(--ivory2); padding: 120px 0 112px; }
.beyond .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.b-note { margin-top: 18px; font-size: 14.5px; color: var(--mute); }
.areas { list-style: none; margin: 0; padding: 0; }
.areas li { padding: 20px 0 18px; border-bottom: 1px solid var(--gray); position: relative; padding-left: 40px; }
.areas li::before { content: ""; position: absolute; left: 0; top: 34px; width: 24px; height: 1px; background: var(--gold); }
.areas b { display: block; font-size: 18px; color: var(--navy); }
.areas span { font-size: 15px; color: var(--sub); }
/* 08：FAQ */
.faq { background: var(--white); padding: 120px 0 112px; }
.faq .wrap { max-width: 920px; }
.qa-list { margin-top: 8px; border-top: 1px solid var(--navy); }
.qa-list details { border-bottom: 1px solid var(--gray); }
.qa-list summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 700; font-size: 17px; color: var(--navy); }
.qa-list summary::-webkit-details-marker { display: none; }
.qa-list summary::before { content: "Q"; font-family: var(--serif); color: var(--gold); margin-right: 16px; }
.qa-list summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.qa-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa-list details p { padding: 0 0 22px 34px; color: var(--sub); }
/* 09：最終CTA */
.final { background: var(--navy); color: #fff; padding: 112px 0 120px; text-align: center; }
.final .wrap { display: flex; flex-direction: column; align-items: center; }
.f-mark { width: 96px; height: auto; margin-bottom: 26px; }
.final h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.6; letter-spacing: .03em; }
.f-price { margin: 26px 0 28px; font-size: 16px; color: rgb(255 255 255 / .85); }
.f-price b { font-family: var(--serif); font-size: 34px; font-weight: 600; color: #fff; margin-left: 6px; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #E9EEF1; }
/* フッター */
.site-foot { background: var(--ivory); padding: 64px 0 48px; font-size: 14px; color: var(--sub); }
.site-foot .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.site-foot img { height: 34px; width: auto; }
.site-foot dl { margin: 0; display: grid; grid-template-columns: 7em 1fr; }
.site-foot dt, .site-foot dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--gray); }
.site-foot dt { color: var(--mute); }
.site-foot .copy { grid-column: 1 / -1; font-size: 12.5px; color: var(--mute); }
@media (max-width: 960px) {
.example, .take .wrap, .host .wrap, .beyond .wrap, .site-foot .wrap { grid-template-columns: 1fr; gap: 40px; }
.a-box { grid-template-columns: 1fr; }
.portrait { max-width: 240px; margin: 0 auto; }
}
@media (max-width: 600px) {
.example dl { grid-template-columns: 1fr; }
.example dt { padding: 14px 0 2px; border-bottom: 0; }
.example dd { padding: 0 0 14px; }
.take, .host, .apply, .beyond, .faq, .final { padding: 72px 0; }
.take h2, .beyond h2, .apply h2, .faq h2 { font-size: 26px; }
.host .name { font-size: 24px; }
.a-price, .a-flow { padding: 28px 20px; }
.a-yen { font-size: 46px; }
.a-cta .btn { width: 100%; }
.career { grid-template-columns: 1fr; }
.career dt { padding-bottom: 0; border-bottom: 0; }
.career dd { padding-top: 2px; }
.qa-list summary { font-size: 16px; }
.qa-list details p { padding-left: 0; }
.final h2 { font-size: 24px; }
.final .btn { font-size: 15.5px; padding: 14px 18px; letter-spacing: 0; }
.site-foot { padding-bottom: 110px; }
}
.ex-tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--navy); border: 1px solid var(--gold); padding: 2px 10px; letter-spacing: .04em; }
.a-cta .btn::after { transform: rotate(-45deg); margin-top: 0; }
/* 未制作の案内 */
.later { background: var(--ivory); padding: 72px 0 100px; }
.later h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--navy); }
.later ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gray); }
.later li { display: grid; grid-template-columns: 52px 18em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--gray); font-size: 15.5px; color: var(--sub); }
.later li b { color: var(--ink); font-weight: 600; }
.later li span:first-child { font-family: var(--serif); color: var(--gold); }
/* スマホの固定CTA */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--gray); transform: translateY(110%); transition: transform .25s; }
.sticky.show { transform: none; }
.sticky .s-price { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.sticky .btn { min-height: 48px; padding: 10px 22px; font-size: 15px; }
@media (min-width: 961px) { .sticky { display: none; } }
@media (max-width: 960px) {
.wrap { padding: 0 24px; }
.gnav a:not(.btn), .brand span { display: none; }
.fv-top { grid-template-columns: 1fr; padding: 36px 24px 40px; gap: 28px; }
.wall { justify-self: center; max-width: 460px; }
.method .wrap { grid-template-columns: 1fr; gap: 40px; }
.ask-grid { grid-template-columns: 1fr; gap: 36px; }
.ask .head { position: static; }
}
@media (max-width: 600px) {
body { font-size: 16px; }
.wrap { padding: 0 16px; }
.site-head .wrap { height: 60px; }
.brand img { height: 30px; }
.gnav .btn { min-height: 40px; padding: 6px 16px; font-size: 13.5px; }
.fv-top { padding: 28px 16px 32px; gap: 24px; }
.fv h1 { font-size: 35px; margin: 18px 0 18px; }
.fv .sub { font-size: 16px; }
.wall { max-width: 360px; }
.method { padding: 72px 0; }
.method h2 { font-size: 26px; }
.fv-band { padding: 34px 0 36px; }
.fv-band .wrap { gap: 18px; }
.scene-label { font-size: 18px; gap: 12px; }
.scene-label::before, .scene-label::after { width: 22px; }
.scenes { gap: 8px; }
.scenes li { width: 104px; height: 104px; font-size: 14px; line-height: 1.5; }
.cta-box { padding: 22px 16px 20px; }
.price { gap: 4px 12px; }
.price .label2 { font-size: 15.5px; }
.price .yen { font-size: 40px; }
.cta-box .btn { font-size: 16px; min-height: 56px; }
.ask { padding: 80px 0 72px; }
.ask h2 { font-size: 27px; }
.quotes li { position: relative; grid-template-columns: 40px minmax(0, 1fr) !important; gap: 4px 12px; padding: 24px 0 22px; }
.quotes li .mini { grid-column: 2; grid-row: auto; justify-self: start; width: 44px; height: 44px; margin-bottom: 4px; }
.quotes li .no { grid-row: span 4; }
.quotes li.more { grid-template-columns: 40px minmax(0, 1fr) !important; }
.quotes .no { font-size: 22px; }
.quotes .q { font-size: 21px; }
.quotes .note { font-size: 15.5px; }
.ask .close { margin-top: 64px; }
.ask .close p { font-size: 20px; }
.later li { grid-template-columns: 36px 1fr; }
.later li span:last-child { grid-column: 2; }
.later { padding-bottom: 120px; }
}
@media (max-width: 600px) {
.venn .v-main { font-size: 30px; }
.venn .v-sub { display: none; }
.venn .v-note { font-size: 24px; }
.cta-box .btn { font-size: 15.5px; letter-spacing: 0; padding: 14px 18px; }
}
@media (max-width: 340px) {
.scenes li { width: 94px; height: 94px; font-size: 13px; }
.cta-lead { font-size: 13.5px; text-align: center; letter-spacing: 0; }
.cta-box .btn { font-size: 14.5px; padding: 12px 10px; letter-spacing: 0; }
}
/* 特商法・個人情報のページ */
.legal-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.legal-back { font-size: 14.5px; color: var(--navy); }
.legal { background: var(--white); padding: 72px 0 96px; }
.legal .wrap { max-width: 880px; }
.legal-title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3vw, 38px); line-height: 1.5; color: var(--navy); margin: 0 0 36px; letter-spacing: .02em; }
.legal-lead { color: var(--sub); margin: 0 0 32px; }
.legal-table { margin: 0; border-top: 1px solid var(--navy); }
.legal-table > div { display: grid; grid-template-columns: 12em 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--gray); }
.legal-table dt { font-weight: 700; color: var(--navy); }
.legal-table dd { margin: 0; }
.legal-table small { display: block; margin-top: 4px; font-size: 14.5px; color: var(--sub); }
.legal-sec { padding: 26px 0; border-top: 1px solid var(--gray); }
.legal-sec h2 { font-size: 18px; color: var(--navy); margin: 0 0 8px; }
.legal-sec p, .legal-sec ul { margin: 0 0 8px; }
.legal-sec ul { padding-left: 1.2em; }
.legal-date { margin-top: 40px; font-size: 14px; color: var(--mute); }
@media (max-width: 600px) {
.legal { padding: 48px 0 72px; }
.legal-table > div { grid-template-columns: 1fr; gap: 2px; }
.legal-back { font-size: 13.5px; }
}