@charset "utf-8"; /* ===================================================================== ヨミダス LP — style.css tokens.css（:root 変数）を前提に読み込むこと。 構成： 00 Base / Reset 01 Layout helpers (.wrap .section .on-ink ...) 02 Type primitives (.kicker .label .ttl .num ...) 03 Buttons 04 Header / Mobile dock 05 Hero 06 Problem 07 Reasons 08 CTA band 09 Founder 10 Case (worry / mechanism / bignum / comparison / voices) 11 Pillars + Flow 12 FAQ 13 Column (cards) 14 Philosophy + Why now 15 Form 16 Company / Footer 17 Column archive (chips / grid / pager) 18 Article single (byline / toc / prose / cta / share / related) 19 Reveal animation (.js gated) ブレークポイント：<768 / 768–1023 / ≥1024 ===================================================================== */ /* ============ 00 Base / Reset ============ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--f-body);color:var(--text);background:var(--paper); font-size:17px;line-height:2.0;-webkit-font-smoothing:antialiased; font-feature-settings:"palt" 1; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} /* A11y ユーティリティ：視覚的に隠す（スクリーンリーダーには読ませる） */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* スキップリンク：通常は隠し、フォーカス時のみ左上に表示 */ .skip-link{position:absolute;left:8px;top:-48px;z-index:100;background:var(--ink);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:14px;padding:10px 18px;border-radius:0 0 8px 8px;transition:top .15s} .skip-link:focus{top:0} /* 見出し・本文の和文改行：句の塊で折り返し、語中の泣き別れを防ぐ */ h1,h2,h3,h4,.ttl,.ttl-g,.solv,.worry,.answer,.lead,.fbio,.fname, .philo-big,.philo-body,.reason p,.pcard p,.mnode p,.acard h3,.acard p, .faq summary,.faq .ans,.prose p,.prose li,.prose blockquote,.h1-min,.intro{ word-break:auto-phrase;line-break:strict; } /* 見出し系は keep-all + overflow-wrap:anywhere で「の」「を」だけが落ちる泣き別れを防ぐ （auto-phrase 非対応ブラウザでも安定。本文は上の auto-phrase を維持） */ h1,h2,.ttl,.ttl-g,.h1-min,.fname,.philo-big,.solv,.worry,.answer{ word-break:keep-all;overflow-wrap:anywhere; } /* ============ 01 Layout helpers ============ */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .narrow{max-width:var(--read);margin:0 auto;padding:0 var(--gut)} .section{padding:clamp(80px,10vw,120px) 0} .company-sec{padding:72px 0} .on-ink{background:var(--ink);color:#EAF0F7} .on-soft{background:var(--paper-2)} .center{text-align:center} .sec-head{max-width:40em} .sec-head.center{margin:0 auto} /* WP移植ユーティリティ（静的ソースのインラインstyleを集約。デザイン値は不変） */ .mt-6{margin-top:var(--s6)} .mx-auto{margin-left:auto;margin-right:auto} .is-invert{color:#fff} :root{--gold-text:#8F6B2A} /* 小さいゴールド文字用の濃いゴールド（白地AA確保・§C8-1.5/2） */ /* ============ 02 Type primitives ============ */ .kicker{font-family:var(--f-disp);font-weight:700;font-size:clamp(13px,3.4vw,14px);letter-spacing:.16em;color:var(--gold-text)} .on-ink .kicker{color:var(--gold-soft)} .label{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.18em;color:var(--gold-text);display:flex;align-items:center;gap:11px;margin-bottom:16px} .label::before{content:"";width:24px;height:2px;background:var(--gold)} .label.is-center{justify-content:center} .on-ink .label{color:var(--gold-soft)} .ttl{font-family:var(--f-min);font-weight:700;font-size:clamp(27px,6vw,40px);line-height:1.62;letter-spacing:.02em} .ttl-g{font-family:var(--f-disp);font-weight:700;font-size:clamp(26px,5.6vw,35px);line-height:1.52} .lead{font-size:clamp(16.5px,4.4vw,19px);line-height:2.05;color:var(--muted);margin-top:18px;max-width:40em} .on-ink .lead{color:#C5D2E1} .num{font-family:var(--f-disp);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em} .num .u{font-weight:700;font-size:.46em;margin-left:.1em} /* ============ 03 Buttons ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-disp);font-weight:700;border:none;cursor:pointer;border-radius:10px;transition:transform .15s,box-shadow .15s;text-align:center} .btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#3c2d08;box-shadow:0 8px 22px rgba(193,154,75,.32)} .btn-gold:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(193,154,75,.42)} .btn-gold:active{transform:translateY(0)} .btn.lg{font-size:17.5px;padding:20px 30px;border-radius:12px} .btn .arr{font-weight:700} .btn-outline{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--ink);border:1.5px solid var(--ink);border-radius:10px;padding:14px 30px;transition:background .15s,color .15s} .btn-outline:hover{background:var(--ink);color:#fff} /* ============ 04 Header / Mobile dock ============ */ .nav{position:sticky;top:0;z-index:50;background:rgba(14,32,56,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(193,154,75,.2)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} .logo{font-family:var(--f-min);font-weight:800;color:#fff;letter-spacing:.18em;font-size:19px;display:inline-flex;align-items:center;gap:11px} .logo::before{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none} .nav .btn{font-size:13.5px;padding:10px 17px} .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(14,32,56,.95);backdrop-filter:blur(8px);border-top:1px solid rgba(193,154,75,.28);padding:10px 14px calc(10px + env(safe-area-inset-bottom))} .dock .btn{width:100%;font-size:16px;padding:14px} .dock small{display:block;text-align:center;color:#9fb0c2;font-size:13px;margin-top:6px} body{padding-bottom:88px} @media(min-width:880px){.dock{display:none}body{padding-bottom:0}} /* ============ 05 Hero ============ */ /* ── [C13] 旧2カラムhero（.hero/.hero-copy/.hero-photo系）。投資家ページの全幅画像化により未使用。削除せず保持 ── .hero{position:relative;overflow:hidden;background:radial-gradient(820px 460px at 84% -10%,#1d3c66 0%,#0E2038 60%)} .hero .wrap{position:relative;z-index:2;padding-top:var(--s7);padding-bottom:var(--s8)} .hero-glow{position:absolute;top:-180px;right:-140px;width:560px;height:560px;background:radial-gradient(circle,rgba(193,154,75,.16),transparent 68%);pointer-events:none;z-index:1} .hero-grid{display:grid;gap:var(--s7);align-items:center} @media(min-width:900px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:var(--s8)}} .hero-kicker{display:flex;flex-direction:column;gap:3px;margin-bottom:22px;line-height:1.5} .hero-kicker .k1{font-size:13px;letter-spacing:.14em;color:var(--gold-soft);font-weight:700;font-family:var(--f-disp)} .hero-kicker .k2{font-size:14.5px;letter-spacing:.06em;color:#fff;font-family:var(--f-min);font-weight:700} .hero h1{font-family:var(--f-min);font-weight:800;color:#fff;font-size:clamp(30px,7.6vw,50px);line-height:1.42;letter-spacing:.02em} .hero h1 .amt{display:inline-block;color:var(--gold-soft);font-size:1.32em;line-height:1;letter-spacing:0;text-shadow:0 4px 30px rgba(224,194,126,.3)} .hero h1 .amt .man{font-size:.5em;margin-left:.06em;font-weight:700} .hero-rule{display:block;width:66px;height:3px;background:linear-gradient(90deg,var(--gold),rgba(193,154,75,0));margin:24px 0} .hero-sub{font-size:clamp(15.5px,4vw,17.5px);line-height:2.0;max-width:30em;color:#C9D5E3} ── ここまで [C13] コメントアウト ── */ .trust{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(193,154,75,.22);border:1px solid rgba(193,154,75,.22);border-radius:12px;overflow:hidden;margin-top:var(--s7)} @media(min-width:480px){.trust{grid-template-columns:repeat(4,1fr)}} .trust .c{background:#0E2038;padding:16px 10px;text-align:center} .trust .num{font-size:clamp(26px,7vw,34px);color:var(--gold-soft)} .trust .l{font-size:12.5px;color:#9fb0c2;margin-top:7px} .hero-cta{margin-top:var(--s6)} .hero-cta .btn{width:100%;max-width:440px} .hero-note{font-size:13px;color:#90a1b4;margin-top:11px} .portrait{position:relative;border:1px solid rgba(193,154,75,.3);border-radius:16px;background:repeating-linear-gradient(135deg,#142c52 0 12px,#16315a 12px 24px);width:100%;display:flex;align-items:flex-end;justify-content:center;color:#7e90a6;font-size:12.5px;padding:20px} /* ── [C13] 旧 .hero-photo（投資家プレースホルダ）。未使用・削除せず保持 ── .hero-photo .portrait{aspect-ratio:4/5;border:1px solid rgba(224,194,126,.4);border-radius:18px} .hero-photo .portrait::before{content:"";position:absolute;top:14px;right:14px;width:46px;height:46px;border-top:2px solid var(--gold-soft);border-right:2px solid var(--gold-soft);border-radius:0 8px 0 0;opacity:.7} .hero-photo .portrait::after{content:"";position:absolute;bottom:14px;left:14px;width:46px;height:46px;border-bottom:2px solid var(--gold-soft);border-left:2px solid var(--gold-soft);border-radius:0 0 0 8px;opacity:.7} .hero-photo .badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#3c2d08;font-family:var(--f-disp);font-weight:700;font-size:13px;padding:8px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.3)} .hero-photo .ph-lbl{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#8197b2;font-size:12.5px} @media(min-width:900px){.hero-photo .portrait{max-height:520px}} ── ここまで [C13] ── */ /* v3リニューアル：H1下のサブ見出し＋3本柱チップ（実績ストリップ跡地） */ /* ── [C13] 旧 .hero h1 em / .hero-subhead（未使用・保持） ── .hero h1 em{font-style:normal;color:var(--gold-soft)} .hero-subhead{font-family:var(--f-disp);font-weight:700;font-size:clamp(15px,3.9vw,17.5px);line-height:1.8;color:#E6EDF5;margin-top:4px;margin-bottom:12px} ── ここまで [C13] ── */ /* ── ヒーロー全幅画像版（v7 / front-page）。上の旧 .hero 2カラムは investor で継続使用のため保持 ── */ .hero-sec{position:relative;width:100%;overflow:hidden;background:var(--ink)} .hero-picture{display:block;width:100%} .hero-img{display:block;width:100%;height:auto} /* §C10.6 ヒーロー画像の直後は紺の問題提起(.why-now-header)。境界はグラデ/マージンなしの単純な色切替。 */ /* §C16 投資家：パンくず帯 .inv-crumb はC16で撤去（ヒーロー画像→白Benefitsを直結）。 */ /* ============ 06 Problem ============ */ .problem .ttl{line-height:1.6} .probgrid{display:grid;gap:14px;margin-top:var(--s7)} @media(min-width:680px){.probgrid{grid-template-columns:1fr 1fr}} .prob{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px 24px} /* 悩みカード（トップ）：丸囲みアイコンを廃し、左ゴールドの縦アクセントバー */ .probgrid.worries .prob::before{content:"";flex:none;width:4px;align-self:stretch;border-radius:2px;background:var(--gold)} /* チェック用バリアント（投資家「こんな方へ」）：SVGを廃し CSS 疑似要素のチェックマーク */ .probgrid.checks .prob{gap:.75rem;align-items:center;position:relative} .probgrid.checks .prob::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold)} .probgrid.checks .prob::after{content:"";position:absolute;left:31px;top:50%;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-70%) rotate(-45deg)} .prob p{font-size:16px;line-height:1.78} .prob b{font-weight:700;color:var(--text)} .bridge{text-align:center;font-family:var(--f-min);font-weight:700;font-size:clamp(19px,4.8vw,26px);color:var(--ink);margin-top:var(--s8);line-height:1.7} .bridge::before,.bridge::after{content:"";display:inline-block;width:26px;height:2px;background:var(--gold);vertical-align:middle;margin:0 14px} /* v3リニューアル §3 Why Now：よくある壁→提供すること（.turnrow パターン流用） */ .wall-rows{margin-top:var(--s7);display:grid;gap:12px} .wall-row{display:grid;grid-template-columns:1fr 36px 1fr;gap:10px;align-items:stretch} .wall-row .wall,.wall-row .give{border-radius:0 4px 4px 0;padding:15px 18px;display:flex;flex-direction:column;gap:5px;justify-content:center} .wall-row .wall{background:var(--paper-2);border-left:3px solid var(--muted)} .wall-row .give{background:var(--ink);border-left:3px solid var(--gold)} .wall-row .wr-t{font-family:var(--f-disp);font-size:10.5px;letter-spacing:.14em;color:var(--muted)} .wall-row .give .wr-t{color:var(--gold-soft)} .wall-row .wr-v{font-family:var(--f-disp);font-weight:700;font-size:clamp(14.5px,3.6vw,16px);line-height:1.6;color:var(--text)} .wall-row .give .wr-v{color:#fff} .wall-row .warr{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px;font-weight:700} @media(max-width:600px){.wall-row{grid-template-columns:1fr;gap:6px}.wall-row .warr{transform:rotate(90deg);padding:2px 0}} /* §C10 Why Now ブロックA（訴求ヘッダー・紺/.on-ink・コンパクト）＋下三角で本体Bへ視線誘導 */ .why-now-header{position:relative;padding:60px 0} .why-now-header::after{content:"";position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);border-left:32px solid transparent;border-right:32px solid transparent;border-top:24px solid var(--ink);z-index:1} @media(max-width:600px){.why-now-header::after{bottom:-18px;border-left-width:24px;border-right-width:24px;border-top-width:18px}} /* §C10 Why Now ブロックB（本体・白）。上は三角分の呼吸 */ .why-now-body{padding-top:72px} /* §C10 共感チェックリスト（白地・ゴールドの空チェックボックス＝「あなたが埋める余白」） */ .check-list{list-style:none;padding:0;margin:2.5rem auto;max-width:640px;display:flex;flex-direction:column;gap:0} .check-item{display:flex;align-items:flex-start;gap:1rem;padding:1.125rem 1.25rem;border-bottom:1px solid rgba(14,32,56,.10);color:var(--text);font-size:16px;line-height:1.7;transition:background .2s} .check-item:hover{background:rgba(193,154,75,.05)} .check-item::before{content:"";flex-shrink:0;width:20px;height:20px;margin-top:.15em;border:1.5px solid var(--gold);background:#fff;border-radius:3px} /* §C10 転換コピー（明朝・中央・19px、「合図」ゴールド・白地） */ .pivot-copy{text-align:center;font-family:var(--f-min);font-weight:700;font-size:19px;line-height:1.7;color:var(--ink);margin:2rem auto 0;max-width:36em} .pivot-copy em{font-style:normal;color:var(--gold-deep)} /* ============ 07 Reasons ============ */ .reasons{display:grid;gap:24px;margin-top:var(--s7);counter-reset:reason} @media(min-width:760px){.reasons{grid-template-columns:repeat(3,1fr)}} .reason{text-align:center;padding:0 8px;counter-increment:reason} /* 丸囲みアイコンを廃し、ゴールドの大きな番号（01/02/03）で番号ベースに */ .reason::before{content:counter(reason,decimal-leading-zero);display:block;font-family:var(--f-disp);font-weight:900;font-size:40px;line-height:1;color:var(--gold);opacity:.3;margin-bottom:12px} .reason h3{font-family:var(--f-disp);font-weight:700;font-size:20px;margin-bottom:10px} .reason p{font-size:16px;color:var(--muted);line-height:1.9} /* v3リニューアル §4 プラン全体像：4本柱カード（ゴールド大数字＝.reason 番号スタイル流用） */ .plan-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:var(--s7);counter-reset:plan} @media(min-width:600px){.plan-grid{grid-template-columns:1fr 1fr}} @media(min-width:960px){.plan-grid{grid-template-columns:repeat(4,1fr)}} /* 差別化：薄グレー面に置く「白カード＋左ゴールドアクセント」。特徴カード（枠のみ）と対をなす。 */ .plancard{background:var(--paper);border:none;border-radius:8px;padding:28px 24px;box-shadow:0 1px 8px rgba(14,32,56,.06);position:relative;counter-increment:plan} .plancard::before{content:counter(plan,decimal-leading-zero);position:absolute;top:8px;right:14px;font-family:var(--f-disp);font-weight:900;font-size:64px;line-height:1;color:var(--gold);opacity:.18;z-index:0} .plancard h3,.plancard ul{position:relative;z-index:1} .plancard h3{font-family:var(--f-disp);font-weight:700;font-size:18px;margin-bottom:12px;color:var(--ink)} .plancard ul{list-style:none;display:flex;flex-direction:column;gap:7px} .plancard li{font-size:14px;color:var(--muted);line-height:1.7;padding-left:14px;position:relative} .plancard li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--gold);border-radius:50%} /* ============ 08 CTA band ============ */ .ctaband{background:linear-gradient(135deg,#10243f,#0c1b30);text-align:center;padding:var(--s8) 0} .ctaband .t{font-family:var(--f-min);font-weight:700;color:#fff;font-size:clamp(21px,5vw,28px);line-height:1.72;margin-bottom:var(--s5)} .ctaband .t b{color:var(--gold-soft)} /* CTA帯ゴールド変種（背景リズム上、特定の帯のみ金地・§C8-1.5）。ボタンは紺で可読性確保 */ .ctaband--gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold))} .ctaband--gold .t{color:var(--ink)} .ctaband--gold .t b{color:var(--ink)} .ctaband.ctaband--gold .note{color:rgba(14,32,56,.72)} .ctaband--gold .btn-gold{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(14,32,56,.28)} .ctaband--gold .btn-gold:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(14,32,56,.36)} /* 最終CV：紺CTA帯④→Contact(紺)の境界に金の細線（§4）＋Contactは上下ゆとり大 */ #contact{border-top:1px solid var(--gold-soft);padding-top:clamp(96px,12vw,120px);padding-bottom:clamp(96px,12vw,120px)} .ctaband .btn{font-size:17px;padding:18px 40px;width:100%;max-width:420px} .ctaband .note{font-size:13px;color:#90a1b4;margin-top:12px} /* ============ 09 Founder（ライト背景 paper-2） ============ */ .founder-sec{background:var(--paper-2)} .founder-grid{display:grid;gap:var(--s7)} @media(min-width:900px){.founder-grid{grid-template-columns:.82fr 1.18fr;align-items:start;gap:var(--s8)}} /* 人物プレースホルダ（紺系）はライト面で浮くよう影を付与 */ .portrait.f{aspect-ratio:3/4;box-shadow:0 10px 30px rgba(14,32,56,.12)} .fname{font-family:var(--f-min);font-weight:800;color:var(--ink);font-size:clamp(26px,5.8vw,40px);line-height:1.4;margin-bottom:4px} .fname small{display:block;font-family:var(--f-disp);font-size:12px;letter-spacing:.18em;color:var(--muted);margin-bottom:14px;font-weight:700} .fbio{color:var(--text);font-size:17px;line-height:2.05} /* 著書（ライト面 paper-2 ベース。白カードで浮かせる。フォントは Shippori Mincho=--f-min / Zen Kaku=--f-disp） */ .fbook{margin-top:32px} .fbook__label{font-family:var(--f-disp);font-size:13px;font-weight:700;color:var(--gold-text);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px} .fbook__item{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;border:none;border-left:3px solid var(--gold);border-radius:8px;text-decoration:none;color:inherit;transition:box-shadow .2s;background:var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.06)} .fbook__item:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)} .fbook__cover{width:120px;height:auto;border-radius:4px;flex-shrink:0;box-shadow:0 2px 8px rgba(14,32,56,.18)} .fbook__body{display:flex;flex-direction:column;justify-content:center;min-height:120px} .fbook__title{display:block;font-family:var(--f-min);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:4px} .fbook__meta{display:block;font-size:13px;color:var(--muted)} @media(max-width:767px){.fbook__cover{width:100px}} .fstats{display:grid;grid-template-columns:1fr 1fr;border:none;border-radius:8px;overflow:hidden;background:var(--paper-2);box-shadow:0 1px 4px rgba(0,0,0,.06);margin-top:var(--s6)} .fstats .c{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px} .fstats .num{font-size:clamp(28px,6vw,38px);color:var(--ink)} .fstats .l{font-size:12.5px;color:var(--muted);margin-top:6px} .turn{margin-top:var(--s6);display:grid;gap:12px} .turnrow{display:grid;grid-template-columns:1fr 30px 1fr;gap:8px} .turnrow .b,.turnrow .a{border:1px solid var(--line);border-radius:8px;padding:14px;text-align:center} /* BEFORE 枠：白セクション上で薄グレーのフラットカードに */ .turnrow .b{background:var(--paper-2);border:none} /* AFTER 枠：--ink 背景＋白文字で強調 */ .turnrow .a{background:var(--ink);border-color:var(--ink)} .turnrow .t{font-family:var(--f-disp);font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:5px} .turnrow .a .t{color:var(--gold-soft)} .turnrow .v{font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--text)} .turnrow .a .v{color:#fff} .turnrow .arr{display:flex;align-items:center;justify-content:center;color:var(--gold)} /* v3リニューアル §15 運営者紹介 縮小版（写真200px・氏名縮小・肩書） */ .founder-compact .founder-grid{grid-template-columns:1fr;gap:var(--s6)} @media(min-width:760px){.founder-compact .founder-grid{grid-template-columns:200px 1fr;align-items:start;gap:var(--s7)}} .founder-compact .portrait.f{max-width:200px;aspect-ratio:3/4} .founder-compact .fname{font-size:clamp(22px,4.6vw,28px)} .forg{font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--gold-text);letter-spacing:.08em;margin-bottom:16px} /* ============ 10 Case ============ */ .case .wrap{max-width:920px} .casemark{font-family:var(--f-disp);font-weight:700;letter-spacing:.18em;color:var(--gold-text);font-size:13px;margin-bottom:18px} .casemark b{font-size:30px;color:var(--gold);letter-spacing:0;margin-left:6px;vertical-align:-2px} .worry{display:flex;gap:14px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-family:var(--f-min);font-weight:700;font-size:clamp(18px,4.6vw,22px);color:var(--text);line-height:1.85;position:relative} .worry .q{flex:none;font-family:var(--f-min);color:var(--muted-2);font-size:26px;line-height:1} .answer{display:flex;gap:12px;align-items:center;margin:22px 0 6px;font-family:var(--f-disp);font-weight:700;font-size:16.5px;color:var(--blue)} .answer .chk{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px} .solv{font-family:var(--f-min);font-weight:800;font-size:clamp(21px,5.2vw,32px);line-height:1.7;letter-spacing:.02em;margin-bottom:14px} .solv .em{color:var(--gold-deep)} .mech{display:grid;grid-template-columns:1fr;gap:12px;margin-top:var(--s6)} @media(min-width:680px){.mech{grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:center}} .mnode{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px 16px;text-align:center;box-shadow:0 6px 18px rgba(14,32,56,.05)} .mnode h3{font-family:var(--f-disp);font-weight:700;font-size:17px;margin-bottom:6px} .mnode p{font-size:15px;color:var(--muted);line-height:1.85} .marr{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px} @media(max-width:679px){.marr{transform:rotate(90deg)}} .bignum{text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s6) 0;margin-top:var(--s6)} .bignum .cap{font-size:13px;color:var(--muted)} .bignum .num{font-size:clamp(40px,11vw,72px);color:var(--gold-deep);margin:8px 0 4px} .bignum .sub{font-size:12px;color:var(--muted-2)} /* comparison table — PC: 4列 / モバイル: カード縦持ち（横スクロール禁止） */ .cmp{margin-top:var(--s6);width:100%;border-collapse:separate;border-spacing:0;font-size:16px} .cmp th,.cmp td{padding:16px 16px;text-align:center;border-bottom:1px solid var(--line)} .cmp thead th{font-family:var(--f-disp);font-weight:700;color:var(--muted);font-size:14px;background:var(--paper-2)} .cmp tbody th{font-family:var(--f-disp);font-weight:700;text-align:left;background:var(--paper-2);width:22%;font-size:16px} .cmp .me{background:#faf4e6;font-weight:700;color:var(--gold-deep)} .cmp thead .me{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#3c2d08} .cmp td.me{border-left:1px solid #ecdcb4;border-right:1px solid #ecdcb4} .cmp tbody tr:last-child td.me{border-bottom:1px solid #ecdcb4} .cmp-note{font-size:13px;color:var(--muted-2);margin-top:14px;line-height:1.85} @media(max-width:679px){ .cmp,.cmp tbody,.cmp tr{display:block} .cmp thead{position:absolute;left:-9999px} .cmp tr{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden} .cmp tbody th{display:block;width:auto;background:var(--ink);color:#fff;border:none} .cmp td{display:flex;justify-content:space-between;text-align:right;padding:12px 16px} .cmp td::before{content:attr(data-l);color:var(--muted);font-weight:500;font-size:13px} .cmp td.me{background:#faf4e6;border:none} } /* voices */ .voices{display:grid;gap:16px;margin-top:var(--s6)} @media(min-width:760px){.voices{grid-template-columns:1fr 1fr}} .vcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 6px 20px rgba(14,32,56,.05)} .vtop{display:flex;gap:14px;align-items:center;margin-bottom:14px} .vava{width:52px;height:52px;border-radius:50%;background:repeating-linear-gradient(135deg,#e7ebf1 0 7px,#eef1f5 7px 14px);flex:none} .vtop .nm{font-family:var(--f-disp);font-weight:700;font-size:16px} .vtop .mt{font-size:13px;color:var(--muted-2)} .vamt{font-family:var(--f-disp);font-weight:900;color:var(--gold-deep);font-size:22px;margin-bottom:6px} .vamt .u{font-size:.6em;font-weight:700} .vtxt{font-size:16px;color:var(--muted);line-height:1.9} .ph-note{font-size:13px;color:var(--muted-2);margin-top:8px} .award{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s6)} .award .a{flex:1;min-width:150px;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;background:var(--paper)} .award .a .t{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--gold-text)} .award .a .s{font-size:12.5px;color:var(--muted-2);margin-top:5px} /* ============ 11 Pillars + Flow ============ */ .pill{display:grid;gap:16px;margin-top:var(--s6)} @media(min-width:760px){.pill{grid-template-columns:1fr 1fr}} .pcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.06)} /* アイコンを廃し、左ゴールドアクセント＋ラベル文字で簡潔に */ .pcard h3{font-family:var(--f-disp);font-weight:700;font-size:19.5px;margin-bottom:8px;padding-left:14px;border-left:3px solid var(--gold)} .pcard p{font-size:16px;color:var(--muted);line-height:1.9} /* 差別化：特徴（§5・白面）は枠線のみのフラットカード。カード左のゴールドアクセントは持たせない （＝プラン全体像の白カードと対比させる）。 */ .features-sec .pcard{background:transparent;border:none;border-left:2px solid var(--gold);border-radius:0;padding:4px 0 4px 20px;box-shadow:none} .features-sec .pcard h3{border-left:none;padding-left:0} /* 差別化：コミュニティ（§8・白面）は枠なしの薄グレーカード。ペルソナと同系だがゆとりを大きく取る。 */ .comm-grid .pcard{background:transparent;border:none;border-radius:0;padding:20px 16px;box-shadow:none} .comm-grid .pcard::before{content:"";display:block;width:24px;height:2px;background:var(--gold);margin-bottom:.75rem} .comm-grid .pcard h3{border-left:none;padding-left:0} /* 参加の流れ：カード＋接続線。ol/li を廃しdiv構造にして二重番号(1.＋01)を解消 */ .flow-steps{display:grid;grid-template-columns:1fr;gap:24px;margin-top:var(--s7)} @media(min-width:768px){.flow-steps{grid-template-columns:repeat(3,1fr);gap:16px}} @media(min-width:1024px){.flow-steps{grid-template-columns:repeat(6,1fr)}} .flow-step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:24px 20px;text-align:center} .flow-step__num{display:block;font-family:var(--f-disp);font-weight:900;font-size:32px;line-height:1;color:var(--gold);margin-bottom:12px} .flow-step__title{font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:8px} .flow-step__desc{font-size:13px;color:var(--muted);line-height:1.7} /* 接続線：SP=カード下に縦線 / PC(≥1024)=カード間に横線 / タブレットは省略 */ .flow-step:not(:last-child)::after{content:"";position:absolute;background:var(--line);left:50%;transform:translateX(-50%);bottom:-24px;width:1px;height:24px} @media(min-width:768px) and (max-width:1023px){.flow-step::after{display:none}} @media(min-width:1024px){.flow-step:not(:last-child)::after{left:auto;transform:none;bottom:auto;top:40px;right:-16px;width:16px;height:1px}} /* ============ 12 FAQ ============ */ .faq{margin-top:var(--s6);max-width:var(--read);margin-left:auto;margin-right:auto} /* §4-1/§2-3 FAQ：カード→フラット下線リスト。Qマーク(金・明朝)＋回答は白パネルで開状態を明確化 */ .faq details{background:transparent;border:none;border-bottom:1px solid rgba(14,32,56,.1);border-radius:0;margin-bottom:0} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:0;padding:20px 4px;font-family:var(--f-disp);font-weight:700;font-size:17px} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"Q";flex:none;font-family:var(--f-min);font-weight:700;font-size:1.35rem;line-height:1;color:var(--gold);margin-right:16px} .faq .pm{flex:none;margin-left:auto;width:24px;height:24px;color:var(--gold-deep);position:relative} .faq .pm::before,.faq .pm::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)} .faq .pm::before{width:13px;height:2px} .faq .pm::after{width:2px;height:13px;transition:transform .2s} .faq details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)} .faq .ans{background:#fff;border-radius:6px;margin:0 0 6px;padding:16px 20px 18px calc(1.35rem + 20px);font-size:16px;color:var(--muted);line-height:1.95} .faq summary:hover{background:rgba(193,154,75,.06)} /* ============ 13 Column cards (on LP) ============ */ .cols{display:grid;gap:20px;margin-top:var(--s7)} @media(min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}} .acard{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(14,32,56,.05);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s} .acard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(14,32,56,.1)} .acard .thumb{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#e7ebf1 0 9px,#eef1f5 9px 18px);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:12.5px} .acard .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1} .acard .meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted-2)} .acard .cat{background:var(--ink);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;letter-spacing:.04em} .acard .thumb img{width:100%;height:100%;object-fit:cover;display:block} .acard h2,.acard h3{font-family:var(--f-disp);font-weight:700;font-size:17px;line-height:1.62} .acard p{font-size:14.5px;color:var(--muted);line-height:1.85} /* ============ 14 Philosophy + Why now（ライト背景 paper） ============ */ .philo-sec{background:var(--paper);border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft)} .philo{text-align:center} .philo-big{font-family:var(--f-min);font-weight:800;color:var(--ink);font-size:clamp(26px,6.4vw,42px);line-height:1.6;letter-spacing:.03em} .philo-body{color:var(--text);max-width:38em;margin:var(--s5) auto 0;font-size:15px;line-height:2} .philo-link{display:inline-block;margin-top:var(--s6);color:var(--gold-text);font-family:var(--f-disp);font-weight:700;border-bottom:1px solid var(--gold);padding-bottom:3px} /* 白面（.philo-sec）上に置くため薄グレーで面を落とす */ .whynow{margin-top:var(--s8);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:28px;text-align:center} .whynow .l{font-family:var(--f-disp);font-weight:700;color:var(--gold-text);font-size:13px;letter-spacing:.16em;margin-bottom:10px} .whynow p{color:var(--text);font-size:14.5px;line-height:1.9;max-width:34em;margin:0 auto} /* v3リニューアル §16 理念：4本柱ミニチップ＋ヒーロー呼応の大きめ締め帯 */ .philo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:var(--s6) 0} .philo-chip{font-family:var(--f-disp);font-weight:700;font-size:13.5px;color:var(--gold-text);border:1px solid var(--gold-soft);border-radius:999px;padding:8px 20px} /* 理念の締めだけクライマックス扱い（ヒーロー h1 と呼応させ、他セクションより一段大きく） */ .philo-sec .closing-band{margin-top:56px;padding:28px 32px;border-top:none;border-bottom:none} .philo-sec .closing-band__text{font-size:22px} /* ============ 15 Form ============ */ .form-grid{display:grid;gap:var(--s7);margin-top:var(--s6)} @media(min-width:900px){.form-grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:var(--s8)}} .formcard{background:#fff;border-radius:18px;padding:30px 26px;box-shadow:0 24px 60px rgba(14,32,56,.28)} .field{margin-bottom:18px} .field label{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px;margin-bottom:8px;color:var(--text)} .field .req{color:#C0392B;font-size:11.5px;margin-left:6px} .field .opt{color:var(--muted-2);font-size:11.5px;margin-left:6px;font-weight:400} .field input,.field select,.field textarea{width:100%;font-family:var(--f-body);font-size:16px;padding:15px 16px;border:1px solid #D5DBE3;border-radius:10px;background:#fff;color:var(--text)} .field textarea{min-height:92px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(193,154,75,.2)} .formcard .btn{width:100%;font-size:17px;padding:18px;margin-top:4px} .formcard .note{text-align:center;font-size:12px;color:var(--muted-2);margin-top:11px} /* C-1: 相談フォーム見出し下の返信目安（No.22）。トップ・投資家ページ共通で、いずれも紺地(.on-ink)のため配色は .on-ink .lead に準拠 */ .reply-note{font-size:13.5px;line-height:1.9;color:#C5D2E1;margin-top:10px} .aside-faq h3{font-family:var(--f-disp);font-weight:700;color:#fff;font-size:15.5px;margin-bottom:14px} .aside-faq .qa{border-top:1px solid rgba(193,154,75,.22);padding:15px 0} .aside-faq .q{font-family:var(--f-disp);font-weight:700;color:#fff;font-size:14.5px} .aside-faq .qm{color:var(--gold-soft);margin-right:3px} .aside-faq .a{color:#bcc9d8;font-size:13.5px;margin-top:6px;line-height:1.85} /* ============ 16 Company / Footer ============ */ .company{margin-top:var(--s6);border-top:1px solid var(--line);max-width:var(--read)} .company .row{display:grid;grid-template-columns:8em 1fr;gap:14px;padding:18px 4px;border-bottom:1px solid rgba(14,32,56,.08);font-size:16px;align-items:start} .company .row:last-child{border-bottom:none} .company dt{font-family:var(--f-disp);font-weight:500;color:var(--muted);font-size:.875rem;letter-spacing:.05em;white-space:nowrap} .company dd{color:var(--text);line-height:1.85} .tbd{font-size:12px;color:var(--muted-2);margin-top:12px} /* §7 フッター3段（ロゴ＋事業内容 / ナビ / 法務＋コピーライト）。hover=opacity .7（§8） */ .site-footer{background:#091627;color:#9fb0c2;padding:var(--s8) 0} .site-footer .logo{font-size:21px;color:#fff;margin-bottom:8px} .site-footer .footer-biz{font-size:13.5px;color:#8296ab;line-height:1.8;max-width:40em;margin-bottom:28px} .site-footer .footer-nav{display:flex;flex-wrap:wrap;gap:14px 26px;font-size:14.5px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)} .site-footer .footer-nav a{color:#cdd8e4} /* T-5: SNSリンク枠。URL未設定時は footer.php 側で出力ごとスキップするため、空の余白は生じない */ .site-footer .footer-sns{display:flex;gap:12px;margin-top:20px} .site-footer .sns-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#cdd8e4} .site-footer .sns-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .site-footer .sns-link:hover{border-color:rgba(193,154,75,.55);color:#fff;opacity:1} .site-footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 26px;margin-top:20px} .site-footer .footer-legal{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:13px} .site-footer .footer-legal a{color:#9fb0c2} .site-footer .cc{font-size:12.5px;color:#5e6f82} .site-footer a{transition:opacity .2s} .site-footer a:hover{opacity:.7} /* ============ 17 Column archive ============ */ .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted-2);margin-bottom:22px} .crumb a:hover{color:var(--gold-text)} .crumb .sep{color:var(--line)} /* ダーク背景ヒーロー（投資家ページ）上のパンくずは明色に */ /* ── [C13] 旧 .hero .crumb（紺hero用。投資家は .inv-hero-foot .crumb に移行・未使用保持） ── .hero .crumb{color:rgba(255,255,255,.7)} .hero .crumb a{color:rgba(255,255,255,.85)} .hero .crumb a:hover{color:var(--gold-soft)} .hero .crumb .sep{color:rgba(255,255,255,.3)} ── ここまで [C13] ── */ /* 404 ページ */ .err404__actions{margin-top:var(--s6)} .err404__related-ttl{margin-top:var(--s9)} .h1-min{font-family:var(--f-min);font-weight:800;font-size:clamp(28px,6.4vw,44px);line-height:1.5;letter-spacing:.02em} .intro{font-size:clamp(16px,4.2vw,18px);line-height:2.05;color:var(--muted);margin-top:18px;max-width:42em} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)} .chip{font-family:var(--f-disp);font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s;text-decoration:none} .chip:hover{border-color:var(--gold)} .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)} .grid{display:grid;gap:22px;margin-top:var(--s7)} @media(min-width:620px){.grid{grid-template-columns:1fr 1fr}} @media(min-width:920px){.grid{grid-template-columns:repeat(3,1fr)}} .pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:var(--s8)} .pager a,.pager span{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--line);font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--muted);background:#fff} .pager .on{background:var(--ink);color:#fff;border-color:var(--ink)} .pager .nx{padding:0 16px;color:var(--ink)} /* ============ 18 Article single ============ */ .artmeta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted-2);margin-bottom:16px} .artmeta .cat{background:var(--ink);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:11.5px;padding:5px 12px;border-radius:999px;letter-spacing:.04em} .byline{display:flex;align-items:center;gap:14px;margin-top:var(--s6);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .byline .ava{width:54px;height:54px;border-radius:50%;background:repeating-linear-gradient(135deg,#e7ebf1 0 7px,#eef1f5 7px 14px);flex:none} .byline .nm{font-family:var(--f-disp);font-weight:700;font-size:15.5px} .byline .role{font-size:12.5px;color:var(--muted-2);margin-top:3px} .arthero{aspect-ratio:16/9;border-radius:16px;margin-top:var(--s6);background:repeating-linear-gradient(135deg,#e7ebf1 0 11px,#eef1f5 11px 22px);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:13px;overflow:hidden} .arthero img{width:100%;height:100%;object-fit:cover;display:block} .toc{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-top:var(--s7)} .toc .tt{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:12px;letter-spacing:.04em} .toc ol{list-style:none;counter-reset:t;display:flex;flex-direction:column;gap:9px} .toc li{counter-increment:t;font-size:14.5px;color:var(--muted);padding-left:30px;position:relative;line-height:1.6} .toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--f-disp);font-weight:700;font-size:12.5px;color:var(--gold-text)} .toc a:hover{color:var(--gold-text)} .toc li.toc-sub{padding-left:46px} .prose{margin-top:var(--s7)} .prose h2{font-family:var(--f-min);font-weight:700;font-size:clamp(21px,4.8vw,27px);line-height:1.6;margin:var(--s7) 0 var(--s4);padding-left:16px;border-left:4px solid var(--gold)} .prose h3{font-family:var(--f-disp);font-weight:700;font-size:18.5px;line-height:1.6;margin:var(--s6) 0 12px} .prose p{font-size:17px;line-height:2.05;color:#26313f;margin-bottom:var(--s4)} .prose ul{margin:0 0 var(--s4);padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px} .prose ul li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.9;color:#26313f} .prose ul li::before{content:"";position:absolute;left:4px;top:13px;width:8px;height:8px;background:var(--gold);border-radius:50%} .prose blockquote{margin:var(--s6) 0;padding:18px 22px;border-left:4px solid var(--blue);background:var(--paper-2);border-radius:0 10px 10px 0;font-size:16.5px;line-height:1.95;color:var(--ink-2)} .prose .ph-fig{aspect-ratio:16/9;border-radius:12px;margin:var(--s6) 0;background:repeating-linear-gradient(135deg,#e7ebf1 0 9px,#eef1f5 9px 18px);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:12.5px} .artcta{background:linear-gradient(135deg,#10243f,#0c1b30);border-radius:18px;padding:32px 28px;text-align:center;margin:var(--s8) 0} .artcta .t{font-family:var(--f-min);font-weight:700;color:#fff;font-size:clamp(19px,4.6vw,24px);line-height:1.6;margin-bottom:var(--s5)} .artcta .t b{color:var(--gold-soft)} .artcta .btn{font-size:16px;padding:16px 34px} .artcta .note{font-size:12.5px;color:#90a1b4;margin-top:12px} .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s6)} .tags .tg{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:#fff} .share{display:flex;align-items:center;gap:12px;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)} .share .lb{font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--muted)} .share .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);background:#fff;transition:all .15s} .share .ic:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .share .ic svg{width:18px;height:18px;fill:currentColor} .related{background:var(--paper-2);border-top:1px solid var(--line)} .related h2{font-family:var(--f-disp);font-weight:700;font-size:22px;margin-bottom:var(--s5)} /* ============ 19 Reveal animation（.js のときのみ隠す＝グレースフル） ==== JS無効時・reduced-motion時は隠さない（main.js が .is-visible を即付与）。 */ .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s} .js .reveal.is-visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}} /* ============ 20 Header 2系統入口（1段バー） ============ ロゴ｜（起業家のみなさまへ／投資家のみなさまへ）＋CTA を1本の固定バーに。 現在ページの入口は .is-active（白文字＋ゴールド下線）。≤860px で入口非表示。 */ .nav .wrap{height:64px} .nav-right{display:flex;align-items:center;gap:26px} .nav-entries{display:flex;align-items:center;gap:24px} .entry{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:700;font-size:14px;color:#c5d2e1;padding:7px 1px;border-bottom:2px solid transparent;white-space:nowrap} .entry svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .entry:hover{color:#fff} .entry.is-active{color:#fff;border-bottom-color:var(--gold)} @media(max-width:860px){.nav-entries{display:none}} /* ============ 21 追従バナー（全ページ共通：起業家／投資家） ============ PC（≥880px）：画面右端に縦並び・画面下から96px、左側のみ角丸。 モバイル（<880px）：画面下に固定の2分割バー。 現在ページ対象＝ゴールド（.is-active）、他方＝ネイビー/アウトライン。 */ .cta-rail{position:fixed;z-index:60;display:flex} .rail-btn{display:flex;align-items:center;text-decoration:none;font-family:var(--f-disp);font-weight:700;transition:transform .15s,box-shadow .15s,background .15s} .rail-btn svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .rail-btn .rl{line-height:1.2} .rail-btn .rs{font-weight:500;opacity:.85} /* --- モバイル：下部2分割バー --- */ @media(max-width:879px){ .cta-rail{left:0;right:0;bottom:0;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(14,32,56,.95);backdrop-filter:blur(8px);border-top:1px solid rgba(193,154,75,.28)} .rail-btn{flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border-radius:11px;padding:9px 8px;text-align:center} .rail-btn svg{width:20px;height:20px;margin-bottom:1px} .rail-btn .rl{font-size:14px} .rail-btn .rs{font-size:10.5px} .rail-btn.is-active{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#3c2d08;box-shadow:0 4px 14px rgba(193,154,75,.4)} .rail-btn:not(.is-active){background:rgba(255,255,255,.06);color:#dbe6f2;border:1px solid rgba(255,255,255,.2)} } /* --- PC：右端縦並び・下寄り --- */ @media(min-width:880px){ .cta-rail{right:0;bottom:96px;flex-direction:column;gap:10px;align-items:flex-end} .rail-btn{flex-direction:row;gap:10px;padding:15px 18px;border-radius:12px 0 0 12px;font-size:15px;box-shadow:-6px 8px 24px rgba(14,32,56,.22)} .rail-btn svg{width:22px;height:22px} .rail-btn .rl{font-size:15px} .rail-btn .rs{display:block;font-size:11px;margin-top:1px} .rail-btn .rtxt{display:flex;flex-direction:column} .rail-btn.is-active{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#3c2d08} .rail-btn:not(.is-active){background:var(--ink);color:#dbe6f2;border:1px solid rgba(193,154,75,.3)} .rail-btn:hover{transform:translateX(-3px)} } /* ============ 22 投資家ページ専用の小物 ============ */ .trio{display:grid;gap:16px;margin-top:var(--s6);counter-reset:bene} @media(min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}} .mcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);counter-increment:bene;position:relative;overflow:hidden} /* 丸線アイコンを廃し、ゴールドの大きな番号（01/02/03）を背景的な水印として表示 */ .mcard::before{content:counter(bene,decimal-leading-zero);position:absolute;top:10px;right:16px;font-family:var(--f-disp);font-weight:900;font-size:56px;line-height:1;color:var(--gold);opacity:.12;z-index:0} .mcard .big,.mcard h3,.mcard p{position:relative;z-index:1} .mcard .big{font-family:var(--f-disp);font-weight:900;font-variant-numeric:tabular-nums;color:var(--gold-deep);font-size:34px;line-height:1.05} .mcard .big .u{font-size:.5em;font-weight:700;margin-left:.1em} .mcard h3{font-family:var(--f-disp);font-weight:700;font-size:18px;line-height:1.5} .mcard p{font-size:15px;color:var(--muted);line-height:1.85} .taxcards{display:grid;gap:14px;margin-top:var(--s6)} @media(min-width:760px){.taxcards{grid-template-columns:repeat(3,1fr)}} .taxcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px} .taxcard.feat{border:2px solid var(--gold);background:#fbf6ea} .taxbadge{display:inline-block;font-family:var(--f-disp);font-weight:700;font-size:10.5px;letter-spacing:.08em;color:#3c2d08;background:linear-gradient(180deg,var(--gold-soft),var(--gold));border-radius:999px;padding:3px 11px;margin-bottom:11px} .taxcard .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px} .taxcard .nm{font-family:var(--f-disp);font-weight:700;font-size:16px;color:var(--ink)} .taxcard.feat .nm{font-weight:900} .taxcard .tag{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--gold-text)} .taxcard p{font-size:14px;color:var(--muted);line-height:1.8} .notes{margin-top:var(--s6);background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px} .notes p{font-size:12.5px;color:var(--muted);line-height:1.85;margin:0} .notes p+p{margin-top:8px} .on-ink .notes{background:rgba(255,255,255,.05);border-color:rgba(193,154,75,.22)} .on-ink .notes p{color:#bcc9d8} /* 投資家ページのトラストストリップ（3項目） */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(193,154,75,.22);border:1px solid rgba(193,154,75,.22);border-radius:12px;overflow:hidden;margin-top:var(--s6);max-width:680px} .strip .c{background:#0E2038;padding:20px 10px;text-align:center} .strip .num{font-size:clamp(26px,7vw,36px);color:var(--gold-soft)} .strip .l{font-size:12.5px;color:#9fb0c2;margin-top:7px} /* Why YOMIDASU（投資家ページ・.why-yomidas）：薄グレー面で差別化。数字カードは白で浮かせる ※クラス名 .why-yomidas は互換のため据え置き（C23でラベル表記のみ YOMIDASU に統一） */ .why-yomidas{background:var(--paper-2)} .why-yomidas .strip{background:none;border:none;border-radius:0;overflow:visible;gap:14px} .why-yomidas .strip .c{background:var(--paper);border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06)} .why-yomidas .strip .num{color:var(--gold-deep)} .why-yomidas .strip .l{color:var(--muted)} /* 投資家導線（トップLPのエンジェル税制内リンク） */ .investor-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:var(--s6);background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:18px 22px} .investor-link p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0} .investor-link a{flex:none;font-family:var(--f-disp);font-weight:700;font-size:14.5px;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px;white-space:nowrap} .investor-link a:hover{color:var(--gold-text)} /* 投資家ページ：静的ソースのインラインstyleをクラス化（インラインCSS禁止のため。色は既存運用に合わせる） */ /* ── [C13] 旧投資家hero専用（.inv-amt / .portrait-43）。未使用・保持 ── .hero h1 .amt.inv-amt{font-size:1.12em} .hero-photo .portrait.portrait-43{aspect-ratio:4/3;border-radius:18px} ── ここまで [C13] ── */ .trust.trust-list{grid-template-columns:1fr} /* ダーク背景(#0E2038)上のため、メイン文言を白系に（注釈 .trust-sub は別色で維持） */ .trust.trust-list .c{text-align:left;padding:14px 16px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.6} .trust-sub{display:block;font-size:11.5px;color:#9fb0c2;margin-top:4px;font-weight:400} .strip .num .u{font-size:.5em;font-weight:700} .on-ink.is-deep{--ink-deep:#0b1c33;background:var(--ink-deep)} /* ============ 23 Contact Form 7（ネイビー面・金融系LP品質） ============ * CF7 のデフォルトマークアップ（p > label + input + .wpcf7-*）を v6 に合わせる。 * フォームは contact / 投資家ページとも .on-ink（--ink / --ink-deep）上に置かれる前提。 * フォームHTMLの編集はスコープ外＝CSS のみで対応する。 */ .on-ink .wpcf7{margin-top:var(--s4)} .on-ink .wpcf7-form{max-width:600px;width:100%;margin-inline:auto} /* 入力行（CF7 は各項目を

でラップ） */ .on-ink .wpcf7-form p{margin:0 0 24px} /* ラベル（Zen Kaku Gothic New 500 / 白 / 下マージン4px） */ .on-ink .wpcf7-form label{display:block;font-family:var(--f-disp);font-weight:500;font-size:14px;color:#fff;line-height:1.6} /* 見出しラベル：複数inputの行（チェックボックス群）は