/* ============================================
Components
モバイルファースト
============================================ */
/* ----- Container ----- */
.container,
.container-wide,
.container-hero {
width: 100%;
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
.container { max-width: calc(var(--max-w-text) + var(--gutter-mobile) * 2); }
.container-wide { max-width: calc(var(--max-w-wide) + var(--gutter-mobile) * 2); }
.container-hero { max-width: calc(var(--max-w-hero) + var(--gutter-mobile) * 2); }
@media (min-width: 900px) {
.container { padding-inline: var(--gutter-desktop); max-width: calc(var(--max-w-text) + var(--gutter-desktop) * 2); }
.container-wide { padding-inline: var(--gutter-desktop); max-width: calc(var(--max-w-wide) + var(--gutter-desktop) * 2); }
.container-hero { padding-inline: var(--gutter-desktop); max-width: calc(var(--max-w-hero) + var(--gutter-desktop) * 2); }
}
/* ----- Site Header ----- */
.site-header {
background: var(--color-bg);
border-bottom: var(--border-thin);
}
.site-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 60px;
padding-block: var(--space-2);
}
.site-header__logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
transition: opacity var(--duration-fast) var(--ease-out);
}
.site-header__logo:hover {
opacity: 0.7;
color: var(--color-text);
}
.site-header__photo {
width: var(--size-avatar-sm);
height: var(--size-avatar-sm);
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
display: block;
}
.site-header__brand {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.site-header__name {
font-size: var(--fs-base);
font-weight: var(--fw-bold);
letter-spacing: 0.02em;
}
.site-header__title {
font-size: var(--fs-xxs);
font-weight: var(--fw-normal);
color: var(--color-text-sub);
letter-spacing: 0.05em;
margin-top: 2px;
}
@media (min-width: 600px) {
.site-header__photo { width: var(--size-avatar-md); height: var(--size-avatar-md); }
.site-header__name { font-size: var(--fs-lg); }
.site-header__title { font-size: 12px; /* PC で +1px（全体1px拡大 2026-05-31） */ }
}
.site-header__nav {
display: flex;
gap: var(--space-4);
}
.site-header__nav a {
color: var(--color-text-sub);
text-decoration: none;
font-size: var(--fs-sm);
}
.site-header__nav a:hover { color: var(--color-accent); }
/* ----- Site Footer ----- */
.site-footer {
background: var(--color-bg-soft);
border-top: var(--border-thin);
padding-block: var(--space-6);
margin-top: var(--space-7);
}
/* minimal: シンプル中央寄せ */
.site-footer--minimal {
padding-block: var(--space-5);
margin-top: var(--space-6);
}
.site-footer--minimal .site-footer__nav { justify-content: center; }
.site-footer--minimal .site-footer__copy { text-align: center; margin: 0; }
.site-footer__name {
font-weight: var(--fw-bold);
margin: 0 0 var(--space-1);
}
.site-footer__bio {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0;
}
.site-footer__nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
}
.site-footer__nav a {
color: var(--color-text-sub);
text-decoration: none;
font-size: var(--fs-sm);
}
.site-footer__nav a:hover { color: var(--color-accent); }
.site-footer__copy {
font-size: var(--fs-xs);
color: var(--color-text-mute);
margin: var(--space-3) 0 0;
}
/* ----- Section variant ----- */
.section--soft { background: var(--color-bg-soft); }
/* ----- Hero ----- */
.hero {
padding-block: var(--space-6) var(--space-5);
text-align: center;
}
@media (min-width: 900px) {
.hero { padding-block: var(--space-8) var(--space-6); }
}
.hero h1 { margin-bottom: var(--space-3); }
.hero p { color: var(--color-text-sub); max-width: 560px; margin-inline: auto; }
/* ----- Card ----- */
.card {
background: var(--color-bg);
border: var(--border-thin);
border-radius: var(--radius-md);
padding: var(--space-4);
box-shadow: var(--shadow-1);
}
.card:hover { box-shadow: var(--shadow-2); }
/* ----- Button ----- */
.btn-primary, .btn-secondary {
display: inline-block;
padding: var(--space-3) var(--space-5);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
font-family: var(--font-base);
text-align: center;
text-decoration: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
line-height: 1.4;
border: 2px solid transparent;
}
.btn-primary {
color: var(--color-text-invert);
background: var(--color-accent);
border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-invert); }
.btn-secondary {
color: var(--color-accent);
background: transparent;
border-color: var(--color-accent);
}
.btn-secondary:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.btn-primary:focus-visible, .btn-secondary:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.btn-block { display: block; width: 100%; }
/* ----- CTA block ----- */
.cta-block {
background: var(--color-accent-soft);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-4);
text-align: center;
margin-block: var(--space-5);
}
.cta-block__heading { margin: 0 0 var(--space-2); }
.cta-block__lead { color: var(--color-text-sub); margin: 0 0 var(--space-4); }
/* ----- Accordion (FAQ) ----- */
details {
border-bottom: var(--border-thin);
padding: var(--space-3) 0;
}
summary {
cursor: pointer;
font-weight: var(--fw-medium);
list-style: none;
position: relative;
padding-right: var(--space-5);
}
summary::-webkit-details-marker { display: none; }
summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: var(--fs-xl);
color: var(--color-accent);
transition: transform var(--duration-normal) var(--ease-out);
}
details[open] summary::after {
content: "−";
}
details[open] > *:not(summary) {
margin-top: var(--space-3);
}
/* ----- Form ----- */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
textarea, select {
width: 100%;
padding: var(--space-3);
font-size: var(--fs-base);
font-family: var(--font-base);
line-height: 1.4;
color: var(--color-text);
background: var(--color-bg);
border: var(--border-thin);
border-radius: var(--radius-sm);
box-sizing: border-box;
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
/* selectをinputと完全に同じ見た目に揃える */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: calc(var(--space-3) * 2 + 12px);
}
input:focus, textarea:focus, select:focus {
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
outline: none;
}
textarea { resize: vertical; min-height: 120px; }
/* ----- AC Form ----- */
.ac-form { max-width: 480px; margin: 0 auto; }
.ac-form .form-row { margin-bottom: var(--space-4); }
.ac-form label {
display: block;
margin-bottom: var(--space-2);
font-weight: var(--fw-medium);
font-size: var(--fs-base);
color: var(--color-text);
}
.ac-form .required { color: var(--color-error); font-size: var(--fs-sm); margin-left: var(--space-1); }
.ac-form .btn-primary { margin-top: var(--space-3); }
/* ----- Video Embed (Vimeo / YouTube) ----- */
.video-embed {
position: relative;
padding-top: 56.25%; /* 16:9 */
overflow: hidden;
border-radius: var(--radius-md);
/* background も transparent に（黒い箱の四隅がアンチエイリアスで灰に見える対策） */
background: transparent;
/* 影で浮かせる（border は使わない） */
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin: var(--space-4) 0;
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
outline: 0;
display: block;
}
/* ----- Table ----- */
table {
width: 100%;
border-collapse: collapse;
margin: var(--space-4) 0;
font-size: var(--fs-base);
}
th, td {
padding: var(--space-3);
text-align: left;
border-bottom: var(--border-thin);
vertical-align: top;
}
th {
font-weight: var(--fw-bold);
color: var(--color-text);
background: var(--color-bg-soft);
width: 30%;
}
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ----- Blockquote ----- */
blockquote {
margin: var(--space-4) 0;
padding: var(--space-4);
background: var(--color-bg-soft);
border-left: 4px solid var(--color-accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
display: block;
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-sub);
font-style: normal;
}
blockquote cite::before { content: "— "; }
/* ----- List ----- */
ul, ol {
margin: var(--space-3) 0;
padding-left: var(--space-5);
line-height: var(--lh-loose);
}
ul li, ol li { margin-bottom: var(--space-2); }
ul ul, ol ol, ul ol, ol ul { margin: var(--space-2) 0; }
ul.check-list {
list-style: none;
padding-left: 0;
}
ul.check-list li {
padding-left: 1.8em;
position: relative;
}
ul.check-list li::before {
content: "✅";
position: absolute;
left: 0;
top: 0;
}
/* ----- Steps (番号付き手順) ----- */
.steps {
list-style: none;
counter-reset: step;
padding: 0;
margin: var(--space-5) 0;
}
.steps > li {
counter-increment: step;
padding: var(--space-4);
padding-left: calc(var(--space-4) + 48px);
position: relative;
margin-bottom: var(--space-3);
background: var(--color-bg-soft);
border-radius: var(--radius-md);
}
.steps > li::before {
content: counter(step);
position: absolute;
left: var(--space-3);
top: var(--space-4);
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-text-invert);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-bold);
font-size: var(--fs-base);
}
.steps h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
/* ----- Profile Mini ----- */
.profile-mini {
background: var(--color-bg-soft);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-block: var(--space-5);
}
.profile-mini__title {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0 0 var(--space-3);
font-weight: var(--fw-medium);
}
.profile-mini__body {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.profile-mini__text { flex: 1; min-width: 0; }
.profile-mini__photo {
width: var(--size-avatar-lg);
height: var(--size-avatar-lg);
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
}
.profile-mini__name {
font-weight: var(--fw-bold);
margin: 0 0 var(--space-1);
}
.profile-mini__bio {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0 0 var(--space-2);
}
.profile-mini__link {
font-size: var(--fs-sm);
}
/* ----- Sticky CTA (販売LPのモバイル用、画面下部固定) ----- */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
background: rgba(255,255,255,0.96);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-top: var(--border-thin);
box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
z-index: 100;
/* CTA3 / フッター到達時のフェードアウト用 */
transition: opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
visibility 0s linear 0s;
}
/* CTA3 or フッターが画面に入った時に非表示 */
.sticky-cta.is-hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
transform: translateY(20px);
transition: opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
visibility 0s linear var(--duration-normal);
}
.sticky-cta .btn-primary {
font-size: var(--fs-base);
padding-block: var(--space-3);
margin: 0;
box-shadow: 0 2px 8px rgba(42,111,79,0.25);
}
/* スティッキーCTA表示時はbodyの下部余白を確保（フッターと被らない） */
body:has(.sticky-cta) { padding-bottom: var(--sticky-cta-space); }
/* PC（900px以上）: 画面下中央にフローティングボタン化 */
@media (min-width: 900px) {
.sticky-cta {
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: var(--space-4);
width: auto;
max-width: 360px;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-full);
border: var(--border-thin);
box-shadow: var(--shadow-2);
}
/* PC版の隠れる時：translateX(-50%) を保持しつつ下に消える */
.sticky-cta.is-hidden {
transform: translateX(-50%) translateY(20px);
}
.sticky-cta .btn-primary {
border-radius: var(--radius-full);
padding-inline: var(--space-5);
}
body:has(.sticky-cta) { padding-bottom: 0; }
}
/* ----- タッチターゲット拡大（WCAG 2.5.5: 最小44x44px） ----- */
.site-header__nav a,
.site-footer__nav a {
display: inline-block;
min-height: 44px;
padding-block: var(--space-2);
line-height: 1.4;
}
/* ============================================
Optin Hero（ファーストビュー集中型 v2）
全デバイス1カラム：キャッチ → モック → フォーム
余白は最小限、CTAまでの距離を縮める
============================================ */
.optin-hero {
padding-block: var(--space-4) var(--space-5);
background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}
.optin-hero__head {
text-align: center;
margin-bottom: var(--space-4);
}
.optin-hero__eyebrow {
display: inline-block;
background: var(--color-accent);
color: var(--color-text-invert);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
padding: 4px var(--space-2);
border-radius: var(--radius-sm);
margin: 0 0 var(--space-2);
letter-spacing: 0.05em;
}
.optin-hero__title {
font-size: clamp(22px, 5.5vw, 32px);
line-height: 1.4;
margin: 0 0 var(--space-3);
}
.optin-hero__title strong {
color: var(--color-accent);
}
.optin-hero__benefits {
list-style: none;
padding: 0;
margin: 0 auto;
font-size: var(--fs-base);
display: inline-block;
text-align: left;
}
.optin-hero__benefits li { margin: var(--space-1) 0; }
.optin-hero__mockup {
max-width: 180px;
margin: 0 auto var(--space-4);
}
.optin-hero__mockup svg {
width: 100%;
height: auto;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
}
@media (min-width: 600px) {
.optin-hero__mockup { max-width: 220px; }
}
.optin-hero__form {
background: var(--color-bg);
border: var(--border-thin);
border-radius: var(--radius-md);
padding: var(--space-4);
box-shadow: var(--shadow-1);
max-width: 520px;
margin: 0 auto;
}
.optin-hero__form-label {
font-weight: var(--fw-bold);
margin: 0 0 var(--space-3);
text-align: center;
}
.optin-hero__note {
font-size: var(--fs-xs);
color: var(--color-text-mute);
text-align: center;
margin: var(--space-2) 0 0;
}
.optin-hero__form .ac-form { max-width: none; }
.optin-hero__form .form-row { margin-bottom: var(--space-2); }
/* ----- Footer Catch Copy（fullパターン上部） ----- */
/* ============================================
Site Footer Layout（engine既存レイアウト再現）
モバイル：縦並び（キャッチ → リンク → コピーライト）
PC：2カラム（左キャッチ／右リンク）＋ 下センターのコピーライト
============================================ */
.site-footer__row {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
@media (min-width: 900px) {
.site-footer__row {
flex-direction: row;
justify-content: center; /* 中央集約 */
align-items: flex-start;
gap: var(--space-7);
max-width: 640px; /* さらに絞って中央にまとめる */
margin-inline: auto;
}
.site-footer__catch { flex: 0 1 auto; max-width: 360px; }
.site-footer__nav { flex: 0 0 auto; }
}
/* 左カラム：キャッチコピー */
.site-footer__catch {
flex: 1 1 auto;
}
.site-footer__catch-head {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--color-text);
margin: 0 0 var(--space-3);
letter-spacing: 0.02em;
}
.site-footer__catch-sub {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0 0 var(--space-2);
line-height: 1.7;
}
.site-footer__catch-sub:last-child { margin-bottom: 0; }
/* 右カラム：リンク（縦並び） */
.site-footer--full .site-footer__nav {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 0 0 auto;
}
.site-footer--full .site-footer__nav a {
white-space: nowrap;
}
/* コピーライト（中央寄せ、区切り線も内側コンテナに揃える） */
.site-footer--full .site-footer__copy {
max-width: 640px;
margin: 0 auto;
padding-top: var(--space-4);
border-top: var(--border-thin);
text-align: center;
font-size: var(--fs-xs);
color: var(--color-text-mute);
}
/* minimal：シンプル中央寄せ */
.site-footer--minimal {
padding-block: var(--space-5);
margin-top: var(--space-6);
}
.site-footer--minimal .site-footer__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
}
.site-footer--minimal .site-footer__copy {
text-align: center;
margin: 0;
font-size: var(--fs-xs);
color: var(--color-text-mute);
}
/* ----- Optin 本文セクション（余白圧縮） ----- */
.optin-content {
padding-block: var(--space-5);
}
.optin-content h2 {
text-align: center;
margin-bottom: var(--space-4);
}
/* ----- Optin 第2CTA（最下部） ----- */
.optin-cta-bottom {
padding-block: var(--space-5);
background: var(--color-accent-soft);
}
.optin-cta-bottom__head {
text-align: center;
margin: 0 0 var(--space-3);
color: var(--color-accent);
}
/* ============================================
Voice Card（推薦者・お客様の声）
モバイル1カラム / タブレット2カラム / PC3カラム
============================================ */
.voice-section {
padding-block: var(--space-6);
background: var(--color-bg-soft);
}
.voice-section__eyebrow {
text-align: center;
font-size: var(--fs-sm);
color: var(--color-accent);
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
margin: 0 0 var(--space-2);
}
.voice-section__heading {
text-align: center;
margin: 0 0 var(--space-5);
}
.voice-section__heading::after { margin-left: auto; margin-right: auto; }
.voice-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 600px) {
.voice-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
.voice-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
}
.voice-card {
background: var(--color-bg);
border: var(--border-thin);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.voice-card__photo {
width: 96px;
height: 96px;
border-radius: var(--radius-full);
object-fit: cover;
margin-bottom: var(--space-3);
}
.voice-card__name {
font-weight: var(--fw-bold);
margin: 0 0 var(--space-2);
font-size: var(--fs-base);
}
.voice-card__result {
color: var(--color-accent);
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
margin: 0 0 var(--space-1);
line-height: 1.3;
}
.voice-card__sub-result {
color: var(--color-text-sub);
font-size: var(--fs-sm);
margin: 0 0 var(--space-3);
line-height: 1.4;
}
.voice-card__quote {
font-family: var(--font-base);
font-size: var(--fs-base);
color: var(--color-text);
font-weight: var(--fw-bold);
margin: var(--space-2) 0 var(--space-3);
line-height: 1.5;
text-align: left;
}
.voice-card__body {
font-size: var(--fs-sm);
color: var(--color-text-sub);
text-align: left;
margin: 0;
line-height: var(--lh-loose);
}
/* ============================================
LP Hero Variants（3案）
center ... 中央寄せ縦並び（コピー→画像→CTA）
split ... PCで左コピー＋右画像
fullbleed ... 背景画像フルブリードにコピーをオーバーレイ
モバイル基準、PCは @media で上書き
============================================ */
/* 共通要素 */
.hero-lp__eyebrow {
font-family: var(--font-base);
color: var(--color-accent);
font-size: var(--fs-base);
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
margin: 0 0 var(--space-2);
display: inline-block;
}
.hero-lp__title {
font-size: clamp(26px, 6vw, 44px);
line-height: 1.3;
margin: 0 0 var(--space-4);
}
/* 鶴村さん指示（2026-05-29）：強調部分も本文色に統一（アクセント色は使わない） */
.hero-lp__title strong {
color: inherit;
}
.hero-lp__sub {
font-size: var(--fs-base);
color: var(--color-text-sub);
margin: 0 0 var(--space-4);
}
.hero-lp__lead {
font-size: var(--fs-base);
color: var(--color-text-sub);
margin: 0 auto var(--space-5);
max-width: 34em;
line-height: var(--lh-loose);
}
.hero-lp__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-width: min(360px, 100%);
max-width: 100%; /* モバイルで画面端を超えないように */
padding-inline: var(--space-6);
}
.hero-lp__cta-arrow {
width: 1em;
height: 1em;
flex-shrink: 0;
/* 「ボタンを押すと下のCTAへスクロール」の予告アニメ。
base.css の prefers-reduced-motion ルールで自動停止 */
animation: hero-cta-hint 1.6s ease-in-out infinite;
}
.hero-lp__cta:hover .hero-lp__cta-arrow,
.hero-lp__cta:focus-visible .hero-lp__cta-arrow {
animation-play-state: paused;
}
@keyframes hero-cta-hint {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
.hero-lp__cta-note {
display: block;
font-size: var(--fs-sm);
color: var(--color-text-mute);
margin-top: var(--space-2);
}
/* ---------- 案A: center（中央寄せ）---------- */
.hero-lp-center {
padding-block: var(--space-3) var(--space-7);
text-align: center;
background: var(--color-bg);
}
.hero-lp-center .hero-lp__image {
margin: var(--space-5) auto;
max-width: 600px;
}
.hero-lp-center .hero-lp__image img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
/* ---------- 案B: split（左右分割）---------- */
.hero-lp-split {
padding-block: var(--space-6) var(--space-7);
background: var(--color-bg);
}
.hero-lp-split__inner {
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: center;
text-align: center;
}
.hero-lp-split__copy { width: 100%; }
.hero-lp-split__image { width: 100%; max-width: 420px; }
.hero-lp-split__image img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
@media (min-width: 900px) {
.hero-lp-split__inner {
flex-direction: row;
text-align: left;
align-items: center;
gap: var(--space-7);
}
.hero-lp-split__copy { flex: 1 1 0; }
.hero-lp-split__image { flex: 0 0 45%; max-width: 480px; }
}
/* ---------- 案C: fullbleed（背景画像にオーバーレイ）---------- */
.hero-lp-fullbleed {
position: relative;
min-height: 480px;
padding-block: var(--space-7) var(--space-6);
color: var(--color-text-invert);
background: var(--color-bg-dark);
overflow: hidden;
}
.hero-lp-fullbleed__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-lp-fullbleed__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-lp-fullbleed__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26,42,35,0.45) 0%, rgba(26,42,35,0.75) 100%);
}
.hero-lp-fullbleed .container,
.hero-lp-fullbleed .container-wide {
position: relative;
z-index: 1;
text-align: center;
}
.hero-lp-fullbleed .hero-lp__eyebrow {
color: var(--color-accent-soft);
}
.hero-lp-fullbleed .hero-lp__title {
color: var(--color-text-invert);
}
.hero-lp-fullbleed .hero-lp__title strong {
color: inherit; /* タイトル色（白）を継承 */
}
.hero-lp-fullbleed .hero-lp__lead {
color: rgba(255,255,255,0.85);
}
@media (min-width: 900px) {
.hero-lp-fullbleed { min-height: 600px; padding-block: var(--space-8) var(--space-7); }
}
/* hero-lp-center の画像が複数並ぶ場合のラッパー（縦並び） */
.hero-lp-center .hero-lp__images {
margin: var(--space-5) auto;
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
max-width: 600px;
}
.hero-lp-center .hero-lp__images .hero-lp__image {
margin: 0;
max-width: 100%;
width: 100%;
}
.hero-lp-center .hero-lp__images .hero-lp__image img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
/* ============================================
Letter Section（じっくり読む 長文手紙）
モバイル基準・本文720pxコンテナ内で展開
各letter は縦に並ぶ。間に区切り線。
============================================ */
.letter-section {
padding-block: var(--space-6);
background: var(--color-bg);
}
.letter-section__eyebrow {
text-align: center;
font-size: var(--fs-sm);
color: var(--color-accent);
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
margin: 0 0 var(--space-2);
}
.letter-section__heading {
text-align: center;
margin: 0 0 var(--space-5);
}
.letter-section__heading::after { margin-left: auto; margin-right: auto; }
.letter-section__note {
text-align: center;
color: var(--color-text-mute);
font-size: var(--fs-sm);
margin: 0 0 var(--space-5);
}
.letter {
padding-block: var(--space-5);
border-bottom: var(--border-thin);
}
.letter:first-of-type { padding-top: 0; }
.letter:last-of-type { border-bottom: 0; }
.letter__head {
display: flex;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-4);
}
.letter__photo {
width: 64px;
height: 64px;
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
}
.letter__meta { flex: 1 1 auto; }
.letter__title {
margin: 0 0 var(--space-1);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
line-height: 1.4;
color: var(--color-accent);
}
.letter__person {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-sub);
}
.letter__body p {
margin: 0 0 var(--space-3);
line-height: var(--lh-loose);
}
.letter__body p:last-child { margin-bottom: 0; }
/* ----- CTA画像（CTAセクション内のsmile3.0ロゴ等、汎用） ----- */
.cta-image {
max-width: 360px;
margin: 0 auto var(--space-4);
}
.cta-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-md);
}
/* ----- セクションキャッチ（H2の上、eyebrow より上品） ----- */
.section-catch {
text-align: center;
font-size: var(--fs-lg);
color: var(--color-text-sub);
margin: 0 0 var(--space-3);
font-weight: var(--fw-medium);
}
/* ----- 提供内容セクション ----- */
.offering-h3 {
text-align: left;
margin-top: var(--space-7);
margin-bottom: var(--space-4);
font-size: clamp(22px, 4vw, 28px); /* h3 より大きく、h2 より小さい中間サイズ */
font-weight: var(--fw-bold);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--color-accent);
}
.offering-category {
margin-top: var(--space-5);
margin-bottom: var(--space-2);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--color-accent);
line-height: 1.4;
}
.offering ul {
margin: 0 0 var(--space-4);
padding-left: var(--space-5);
}
.offering ul li {
margin-bottom: var(--space-1);
line-height: var(--lh-loose);
}
/* ----- 提供内容セクション内 画像2枚並び ----- */
.offering-images {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin: var(--space-4) auto var(--space-5);
max-width: 480px;
}
.offering-images img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-md);
}
/* 画像は常に縦並び（鶴村さん指示 2026-05-29） */
/* ============================================
Price Card（お得感重視・限定強調型）
- 上部：大きな「メルマガ読者様限定」バッジ
- 中部：価格は控えめ、月額を強調
- 下部：お得感のチェックリスト
============================================ */
.price-card {
max-width: 560px;
margin: var(--space-5) auto;
padding: 0; /* 内側パディングは各セクションで個別に */
position: relative;
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
border: 2px solid var(--color-accent);
}
/* 限定バッジエリア（カード最上部・深い緑背景・白文字） */
.price-card__limited {
border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
background: var(--color-accent);
color: var(--color-text-invert);
text-align: center;
padding: var(--space-4) var(--space-4);
}
.price-card__limited-label {
display: inline-block;
font-size: clamp(20px, 4.5vw, 26px);
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
padding: var(--space-1) var(--space-4);
background: var(--color-text-invert);
color: var(--color-accent);
border-radius: var(--radius-full);
}
.price-card__limited-sub {
margin: 0;
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--color-text-invert);
}
.price-card__limited-sub strong {
font-size: clamp(18px, 3.5vw, 22px);
font-weight: var(--fw-bold);
border-bottom: 2px solid var(--color-text-invert);
padding-bottom: 2px;
}
/* 価格本体エリア（控えめサイズ） */
.price-card__body {
text-align: center;
padding: var(--space-5) var(--space-4) var(--space-4);
}
.price-card__price {
font-size: clamp(26px, 5vw, 34px);
font-weight: var(--fw-bold);
color: var(--color-text);
margin: 0 0 var(--space-2);
line-height: 1.2;
}
.price-card__price-tax {
font-size: clamp(13px, 2.5vw, 15px);
color: var(--color-text-sub);
font-weight: var(--fw-normal);
/* 別行表示。マージンは不要 */
}
.price-card__monthly {
font-size: var(--fs-base);
color: var(--color-text-sub);
margin: 0;
line-height: var(--lh-normal);
}
.price-card__monthly strong {
display: inline-block;
margin-top: var(--space-1);
font-size: clamp(20px, 4vw, 26px);
color: var(--color-accent);
font-weight: var(--fw-bold);
}
/* お得感のチェックリスト */
.price-card__features {
background: var(--color-accent-soft);
margin: 0;
padding: var(--space-4) var(--space-5);
list-style: none;
}
.price-card__features li {
font-weight: var(--fw-medium);
color: var(--color-text);
}
/* 補足説明（白背景・境界なし） */
.price-card__note {
font-size: var(--fs-sm);
color: var(--color-text-sub);
text-align: left;
padding: var(--space-4);
background: var(--color-bg);
line-height: var(--lh-normal);
border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px); /* カード下の角を丸める（はみ出し修正 2026-05-31）*/
}
.price-card__note-head {
font-weight: var(--fw-bold);
color: var(--color-text);
margin: 0 0 var(--space-1);
}
/* ============================================
FAQ Section（よくあるご質問）
details/summary によるアコーディオン
============================================ */
.faq-section {
padding-block: var(--space-6);
}
.faq-list {
margin-top: var(--space-5);
}
.faq-item {
border-bottom: var(--border-thin);
padding: 0;
}
.faq-item:first-child { border-top: var(--border-thin); }
.faq-item__q {
cursor: pointer;
font-weight: var(--fw-bold);
font-size: var(--fs-base);
list-style: none;
position: relative;
padding: var(--space-4) calc(var(--space-5) + var(--space-2)) var(--space-4) 0;
line-height: 1.5;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
content: "+";
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
font-size: var(--fs-xl);
color: var(--color-accent);
font-weight: var(--fw-normal);
transition: transform var(--duration-normal) var(--ease-out);
line-height: 1;
}
.faq-item[open] .faq-item__q::after {
content: "−";
}
.faq-item__a {
padding: 0 0 var(--space-4) 0;
}
.faq-item__a p {
margin: 0 0 var(--space-3);
line-height: var(--lh-loose);
color: var(--color-text-sub);
}
.faq-item__a p:last-child { margin-bottom: 0; }
/* ============================================
Final Message Section（最後にメッセージ）
鶴村さんからのクロージング手紙
============================================ */
.message-section {
padding-block: var(--space-6);
}
.message-image {
max-width: 360px;
margin: 0 auto var(--space-5);
}
.message-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-md);
}
.message-body {
max-width: 560px;
margin: 0 auto;
}
.message-body p {
margin: 0 0 var(--space-4);
line-height: var(--lh-loose);
text-align: left;
}
.message-body p:last-child {
margin-bottom: 0;
}
/* ----- CTA3 用：カード/振込 2ボタンの間の「または」セパレーター ----- */
.cta-or {
display: flex;
align-items: center;
gap: var(--space-3);
max-width: 360px;
margin: var(--space-4) auto var(--space-3);
color: var(--color-text-mute);
font-size: var(--fs-sm);
text-align: center;
}
.cta-or::before,
.cta-or::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--color-border);
}
.cta-or__label {
flex: 0 0 auto;
padding: 0 var(--space-2);
}
/* ============================================
Media Section（メディア掲載実績）
============================================ */
.media-section {
padding-block: var(--space-6);
}
.media-section__catch {
text-align: center;
color: var(--color-text-sub);
margin: 0 0 var(--space-4);
font-size: var(--fs-sm);
}
.media-section__image {
max-width: 880px;
margin: 0 auto var(--space-4);
}
.media-section__image img {
width: 100%;
height: auto;
display: block;
}
.media-section__list {
max-width: 720px;
margin: 0 auto;
font-size: var(--fs-sm);
color: var(--color-text-sub);
line-height: var(--lh-loose);
text-align: center;
}
/* ============================================
Owner Info（運営者情報ブロック）
円形顔写真 + 肩書 + 名前 + ローマ字 + bio段落
============================================ */
.owner-info {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.owner-info__photo {
width: 240px;
height: 240px;
border-radius: var(--radius-full);
object-fit: cover;
margin: 0 auto var(--space-4);
display: block;
}
.owner-info__role {
font-size: var(--fs-base);
font-weight: var(--fw-bold);
letter-spacing: 0.2em;
color: var(--color-text);
margin: 0 0 var(--space-2);
}
.owner-info__name {
font-size: clamp(26px, 5vw, 36px);
font-weight: var(--fw-bold);
letter-spacing: 0.3em;
margin: 0;
line-height: 1.2;
}
.owner-info__name-en {
font-size: var(--fs-sm);
letter-spacing: 0.3em;
color: var(--color-text-sub);
margin: var(--space-1) 0 var(--space-5);
font-weight: var(--fw-medium);
}
.owner-info__bio {
text-align: left;
}
.owner-info__bio p {
margin: 0 0 var(--space-3);
line-height: var(--lh-loose);
}
.owner-info__bio p:last-child {
margin-bottom: 0;
}
/* ============================================
Pain Section（PASTOR: Pain ／こんなお悩みありませんか？）
読者の現状の不安を言語化、自分ごと化を促す
============================================ */
.pain-section {
padding-block: var(--space-6);
background: var(--color-bg-soft);
}
.pain-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
max-width: 720px;
margin: 0 auto var(--space-5);
padding-left: 0; /* ul デフォルト padding を解除（右ずれ対策） */
list-style: none; /* リストマーカー非表示 */
}
.pain-grid > li { margin-bottom: 0; } /* ul li の余白も解除 */
@media (min-width: 600px) {
.pain-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
}
.pain-item {
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-md);
display: flex;
gap: var(--space-3);
align-items: flex-start;
line-height: var(--lh-normal);
font-size: var(--fs-base);
box-shadow: var(--shadow-1);
}
.pain-item__check {
flex-shrink: 0;
width: 24px;
height: 24px;
background: var(--color-accent-soft);
color: var(--color-accent);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
margin-top: 2px;
}
.pain-item__text {
flex: 1 1 auto;
}
.pain-bridge {
text-align: center;
max-width: 560px;
margin: 0 auto;
font-weight: var(--fw-medium);
font-size: var(--fs-lg);
line-height: var(--lh-loose);
color: var(--color-text);
}
.pain-bridge strong {
color: var(--color-accent);
}
/* ============================================
Tsurumura Story Section（PASTOR: Person / 鶴村ストーリー）
過去→失敗→転機→継続→自由 の物語
============================================ */
.story-section {
padding-block: var(--space-7);
}
.story-photo {
max-width: 200px;
margin: 0 auto var(--space-5);
}
.story-photo img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-full);
}
.story-body {
max-width: 640px;
margin: 0 auto;
}
.story-body p {
margin: 0 0 var(--space-4);
line-height: var(--lh-loose);
text-align: left;
}
.story-body p:last-child {
margin-bottom: 0;
}
/* 強調引用：要所で大きく目立たせる */
.story-highlight {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--color-accent);
padding-left: var(--space-4);
border-left: 4px solid var(--color-accent);
margin: var(--space-5) 0 !important;
line-height: var(--lh-normal);
}
/* 最後の橋渡し用の強調インライン（太字＋アクセント色下線） */
.story-emph {
font-weight: var(--fw-bold);
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
/* ============================================
Future Section（PASTOR: Possibility / あなたの4ヶ月後の未来）
数字の階段 + 自由のシーン + 過去との対比 で「私にもできる」を確信化
============================================ */
.future-section {
padding-block: var(--space-7);
background: var(--color-bg-soft);
}
.future-intro {
text-align: center;
max-width: 560px;
margin: 0 auto var(--space-5);
font-size: var(--fs-lg);
line-height: var(--lh-loose);
}
/* 数字の階段（モバイル縦並び、PC横並び・段差で見せる） */
.future-staircase {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
max-width: 880px;
margin: var(--space-7) auto var(--space-6); /* アイコン分の上余白 */
}
/* モバイル（〜599px）：カードを段階的に右にずらして縦の階段風に */
@media (max-width: 599px) {
.future-staircase__step { width: 78%; }
.future-staircase__step--1 { margin-left: 0%; }
.future-staircase__step--2 { margin-left: 7%; }
.future-staircase__step--3 { margin-left: 15%; }
.future-staircase__step--4 { margin-left: 22%; }
}
@media (min-width: 600px) {
.future-staircase {
grid-template-columns: repeat(4, 1fr);
align-items: end;
gap: var(--space-2);
}
}
.future-staircase__step {
background: var(--color-bg);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-3);
text-align: center;
box-shadow: var(--shadow-1);
border: 2px solid var(--color-border);
color: var(--color-accent); /* SVG currentColor を継承 */
position: relative; /* アイコンの絶対配置の基準 */
}
/* アイコンはカードの「上」に立つ（外側にはみ出す） */
.future-staircase__icon {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
display: block;
}
/* 旗は最終段のカード上（白背景）に立つので、常に深い緑で固定 */
.future-staircase__step--4 .future-staircase__icon line,
.future-staircase__step--4 .future-staircase__icon polygon {
stroke: var(--color-accent);
fill: var(--color-accent);
}
@media (min-width: 600px) {
/* PC で右に行くほど少しずつ高く積む＝階段表現 */
.future-staircase__step--1 { padding-block: var(--space-3); }
.future-staircase__step--2 { padding-block: var(--space-4); }
.future-staircase__step--3 { padding-block: var(--space-5); }
.future-staircase__step--4 {
padding-block: var(--space-6);
background: var(--color-accent);
color: var(--color-text-invert);
border-color: var(--color-accent);
}
.future-staircase__step--4 .future-staircase__amount { color: var(--color-text-invert); }
.future-staircase__step--4 .future-staircase__period { color: rgba(255,255,255,0.85); }
.future-staircase__step--4 .future-staircase__sub { color: rgba(255,255,255,0.85); }
}
.future-staircase__period {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0 0 var(--space-2);
font-weight: var(--fw-medium);
}
.future-staircase__amount {
font-size: clamp(16px, 3vw, 20px);
font-weight: var(--fw-bold);
color: var(--color-accent);
margin: 0 0 var(--space-1);
line-height: 1.2;
}
.future-staircase__sub {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0;
line-height: 1.4;
}
/* 注意書き（景品表示法/特商法対応：成果・期間の保証ではない旨） */
.future-disclaimer {
text-align: center;
font-size: var(--fs-xs);
color: var(--color-text-mute);
margin: 0 auto var(--space-6);
max-width: 720px;
line-height: var(--lh-normal);
}
/* 自由のシーン（チェックリスト風） */
.future-vision-heading {
text-align: center;
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin: var(--space-6) 0 var(--space-4);
}
.future-vision {
max-width: 640px;
margin: 0 auto var(--space-6);
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
}
@media (min-width: 600px) {
.future-vision { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
}
.future-vision li {
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-md);
font-size: var(--fs-base);
line-height: var(--lh-normal);
display: flex;
gap: var(--space-2);
align-items: flex-start;
}
.future-vision li::before {
content: "✓";
color: var(--color-accent);
font-weight: var(--fw-bold);
flex-shrink: 0;
}
/* 過去との対比（控えめなコントラスト） */
.future-contrast {
max-width: 560px;
margin: 0 auto var(--space-5);
text-align: center;
color: var(--color-text-sub);
font-size: var(--fs-base);
line-height: var(--lh-loose);
}
/* 結び */
.future-closing {
max-width: 560px;
margin: 0 auto;
text-align: center;
font-size: var(--fs-lg);
line-height: var(--lh-loose);
font-weight: var(--fw-medium);
}
/* ============================================
Message Quote（最後にメッセージ内の引用カード）
DIE WITH ZERO等の書籍引用を上品に表現
============================================ */
.message-quote {
background: var(--color-bg);
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
border-left: 4px solid var(--color-accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: var(--space-5) 0 !important;
box-shadow: var(--shadow-1);
}
.message-quote__source {
font-size: var(--fs-sm);
color: var(--color-accent);
margin: 0 0 var(--space-3) !important;
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
}
.message-quote__list {
margin: var(--space-2) 0 var(--space-3);
padding-left: var(--space-5);
}
.message-quote__list li {
margin-bottom: var(--space-2);
line-height: var(--lh-loose);
}
.message-quote p:not(.message-quote__source):last-of-type {
margin-bottom: 0 !important;
font-weight: var(--fw-bold);
color: var(--color-text);
}
/* ----- Product Banner（商品バナー画像：本文幅に合わせて中央表示） ----- */
.product-banner { margin: 0 auto var(--space-5); }
.product-banner img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
/* ----- smileサポート個別調整：ヒーロー（テキストのみ）と動画を近づける ----- */
.page-smile-support .hero-lp-center { padding-block-end: var(--space-4); }
.page-smile-support .hero-lp-center + section { padding-top: var(--space-4); }
/* ----- 受講者さまの声（テキスト版・顔写真なし） ----- */
.testimonial-list { max-width: var(--max-w-text); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.testimonial-item { background: var(--color-bg); border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-1); }
.testimonial-item__title { font-weight: var(--fw-bold); color: var(--color-accent); margin: 0 0 var(--space-2); }
.testimonial-item__body { margin: 0; line-height: var(--lh-loose); }
/* ----- 3つのシナリオ（これから半年で起こりうる3つのこと） ----- */
.scenario-list { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-5); }
.scenario-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); background: var(--color-bg); border: var(--border-thin); border-radius: var(--radius-lg); padding: var(--space-5); }
.scenario-item__icon { width: 56px; height: 56px; color: var(--color-text-sub); }
.scenario-item--good .scenario-item__icon { color: var(--color-accent); }
.scenario-item__body-wrap { flex: 1 1 auto; }
.scenario-item--good { border-color: var(--color-accent); box-shadow: var(--shadow-2); }
.scenario-item__label { font-size: var(--fs-sm); color: var(--color-text-sub); font-weight: var(--fw-medium); margin: 0; }
/* ===== genre_202605 レイアウト改善（2026-05-30 Step2） ===== */
/* 期限バッジ（赤・強調） */
.deadline-badge {
display: inline-block;
background: var(--color-error);
color: #fff;
font-weight: var(--fw-bold);
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-full);
font-size: var(--fs-base);
letter-spacing: 0.02em;
}
/* 投資→回収の対比（元が取れるイメージ） */
.roi-compare {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
max-width: 560px;
margin: var(--space-5) auto 0;
}
.roi-box {
flex: 1 1 0;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
text-align: center;
}
.roi-box--invest { background: var(--color-bg-soft); border: var(--border-thin); }
.roi-box--return { background: var(--color-accent-soft); border: var(--border-accent); }
.roi-box__label { margin: 0 0 var(--space-1); font-size: var(--fs-sm); color: var(--color-text-sub); }
.roi-box__value { margin: 0; font-size: clamp(22px, 5vw, 30px); font-weight: var(--fw-bold); }
.roi-box__sub { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--color-text-sub); }
.roi-arrow { align-self: center; font-size: 28px; line-height: 1; color: var(--color-accent); transform: rotate(90deg); }
@media (min-width: 600px) {
.roi-compare { flex-direction: row; align-items: center; }
.roi-arrow { transform: none; }
}
/* 失敗しない3つの視点カード */
.viewpoint-list { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-5); }
.viewpoint-item { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-bg); border: var(--border-thin); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-1); }
.viewpoint-item__icon { flex-shrink: 0; width: 44px; height: 44px; color: var(--color-accent); }
.viewpoint-item__body-wrap { flex: 1 1 auto; }
.viewpoint-item__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.viewpoint-item__body { margin: 0; line-height: var(--lh-loose); }
/* 受講後の変化カード */
.change-list { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-5); }
.change-item {
display: flex; gap: var(--space-3); align-items: flex-start;
background: var(--color-accent-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.change-item__check { flex-shrink: 0; width: 28px; height: 28px; color: var(--color-accent); }
.change-item__text { margin: 0; line-height: var(--lh-loose); }
/* 受講者の声：引用符＋カード装飾の強化 */
.testimonial-item { position: relative; }
.testimonial-item::before {
content: "\201C"; position: absolute; top: -2px; left: var(--space-3);
font-size: 56px; line-height: 1; color: var(--color-accent-soft); font-family: Georgia, serif; z-index: 0;
}
.testimonial-item__title, .testimonial-item__body { position: relative; z-index: 1; }
/* ===== genre 見栄え改善2（2026-05-30） ===== */
/* 申込を主役にする薄緑ゾーン */
.accent-zone { background: var(--color-accent-soft); }
/* 料金まとめカード（情報の塊を1枚に集約） */
.offer-card {
position: relative;
max-width: 640px;
margin: var(--space-5) auto 0;
background: var(--color-bg);
border: var(--border-accent);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
padding: var(--space-6) var(--space-4);
text-align: center;
}
.offer-card__price { margin: var(--space-3) 0 0; font-size: clamp(40px, 9vw, 56px); font-weight: var(--fw-bold); line-height: 1.1; }
.offer-card__yen { font-size: 0.5em; margin-left: 0.1em; }
.offer-card__tax { display: block; font-size: var(--fs-sm); color: var(--color-text-sub); font-weight: var(--fw-normal); margin-top: var(--space-1); }
.offer-card__includes { list-style: none; margin: var(--space-5) 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: var(--space-3); }
.offer-card__includes li { display: flex; gap: var(--space-2); align-items: flex-start; line-height: var(--lh-loose); }
.offer-card__includes li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; background: var(--color-accent); border-radius: var(--radius-full);
-webkit-mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.offer-card__roi { margin: var(--space-4) 0 0; padding: var(--space-3); background: var(--color-accent-soft); border-radius: var(--radius-md); font-weight: var(--fw-bold); }
/* セクション見出し直下のアイコン（任意） */
.section-icon { width: 48px; height: 48px; color: var(--color-accent); margin: 0 auto var(--space-2); display: block; }
/* 期限の強調（緑の下線＋太字）— 赤バッジの代替 */
.deadline-emph {
font-weight: var(--fw-bold);
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 3px;
text-underline-offset: 4px;
}
/* 文章量が多い箇所の本文を一段小さく */
.text-sm { font-size: var(--fs-sm); }
/* CTA前の余白（薄緑なし。cta-blockの誤用回避） */
.cta-space { margin-top: var(--space-6); }
/* genre：最後のメッセージ画像を大きめに */
.page-genre .message-image { max-width: 520px; }
/* genre：緊急性の理由見出し（長いので小さめ） */
.reason-h { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-1); line-height: 1.5; }
.scenario-item__result { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; }
.scenario-item__note { font-size: var(--fs-sm); color: var(--color-text-sub); margin: 0; }
.text-left { text-align: left; }
.page-genre .hero-lp__lead { text-align: left; }
/* 料金カード内ボタンは左右余白を詰めてテキスト領域を広く */
.offer-card .hero-lp__cta { padding-inline: var(--space-3); width: 100%; }
.offer-card .cta-or { max-width: none; }
/* 料金カード右上の「特別価格」お得バッジ（price-card / offer-card 共通） */
.price-badge {
position: absolute;
top: calc(var(--space-3) * -1);
right: var(--space-4);
z-index: 2;
background: var(--color-warning);
color: #fff;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: 0.02em;
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-full);
box-shadow: var(--shadow-1);
}
/* ===== 優先登録者向けLP（genre_yusen 等）2026-05-30 ===== */
/* 最上部の優先案内バナー（アクセント背景の全幅帯）。で使い section余白を継がない */
.priority-banner {
background: var(--color-accent);
color: var(--color-text-invert);
text-align: center;
padding: var(--space-4) 0;
}
.priority-banner__label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: 0.08em;
margin: 0 0 var(--space-1);
opacity: 0.92;
}
.priority-banner__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
margin: 0;
}
@media (min-width: 600px) {
.priority-banner__title { font-size: clamp(22px, 4vw, 30px); }
}
/* offer-card 内：通常価格→特別価格の比較表示 */
.offer-card__regular {
margin: 0;
font-size: var(--fs-base);
color: var(--color-text-mute);
}
.offer-card__regular s { text-decoration-thickness: 2px; }
.offer-card__regular-label { font-size: var(--fs-sm); }
.offer-card__arrow {
display: block;
color: var(--color-accent);
font-weight: var(--fw-bold);
line-height: 1;
margin: var(--space-1) 0 var(--space-1);
}
/* ===== genre_yusen 余白調整（2026-05-30）===== */
/* 緑帯を少し厚く＋緑帯と「自分の好きなこと」見出しの間の白余白を広げる */
.page-genre-yusen .priority-banner { padding-block: var(--space-5); }
.page-genre-yusen .hero-lp-center { padding-block-start: var(--space-6); }
/* 申込ボタン直上のひと押しコピー */
.offer-card__pitch { font-weight: var(--fw-medium); margin: 0 0 var(--space-3); }
/* genre の offering 内 check-list は左寄せ（.offering ul の左padding 40px を継がない。✅ぶんのみのインデント）*/
.page-genre .offering .check-list { padding-left: 0; }
/* ===== profile ページ（2026-05-30）===== */
/* --- プロフィール ヒーロー --- */
.profile-intro h1 { text-align: center; margin-bottom: var(--space-4); }
.profile-hero { text-align: center; }
.profile-hero__photo {
width: 160px; height: 160px;
border-radius: var(--radius-full);
object-fit: cover;
margin: 0 auto var(--space-3);
box-shadow: var(--shadow-1);
}
.profile-hero__reading {
font-size: var(--fs-sm);
color: var(--color-text-mute);
margin: 0 0 var(--space-1);
}
.profile-hero__name {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
margin: 0 0 var(--space-1);
}
.profile-hero__role {
font-size: var(--fs-base);
color: var(--color-accent);
font-weight: var(--fw-medium);
margin: 0 0 var(--space-4);
}
.profile-hero__bio {
max-width: var(--max-w-text);
margin-inline: auto;
text-align: left;
}
.profile-hero__bio p { margin: 0 0 var(--space-3); }
.profile-hero__bio p:last-child { margin-bottom: 0; }
/* --- 写真ストーリー（家族との時間） --- */
.story-photos__item { margin: 0 auto var(--space-4); max-width: 860px; }
.story-photos__item:last-child { margin-bottom: 0; }
.story-photos__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
/* 吹き出し（旧・文字焼き込み画像をテキスト化。色は新トークンに統一） */
.speech-bubble {
position: relative;
max-width: 100%;
margin: 0 auto;
background: var(--color-accent-soft);
color: var(--color-text);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-align: center;
line-height: var(--lh-loose);
}
.speech-bubble p { margin: 0; }
.speech-bubble p + p { margin-top: var(--space-1); }
.speech-bubble::after {
content: "";
position: absolute;
bottom: -14px; left: 50%;
transform: translateX(-50%);
border: 14px solid transparent;
border-top-color: var(--color-accent-soft);
border-bottom: 0;
}
/* --- 好きな言葉（座右の銘）リスト --- */
.motto-list {
list-style: none;
margin: 0; padding: 0;
display: grid;
gap: var(--space-2);
}
@media (min-width: 700px) {
.motto-list { grid-template-columns: 1fr 1fr; }
}
.motto-list li {
background: var(--color-bg-soft);
border: var(--border-thin);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
}
/* --- コンテンツ誘導カード --- */
.profile-cards {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.profile-cards { grid-template-columns: repeat(3, 1fr); }
}
.profile-card {
display: flex;
flex-direction: column;
background: var(--color-bg);
border: var(--border-thin);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-1);
text-decoration: none;
color: inherit;
transition: box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.profile-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.profile-card__image { display: block; width: 100%; height: auto; }
.profile-card__body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.profile-card__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
margin: 0 0 var(--space-2);
color: var(--color-text);
}
.profile-card__text {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin: 0 0 var(--space-3);
line-height: var(--lh-normal);
}
.profile-card__more {
margin-top: auto;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--color-accent);
}
/* ===== guidebook（オプトイン）ページ個別調整（2026-05-30）===== */
/* お客様の声が2枚のとき左寄りになるのを中央寄せ＋幅を抑える */
.page-guidebook .voice-grid {
grid-template-columns: minmax(0, 520px);
justify-content: center;
}
/* 「ガイドブック内容」の見出しを大きく */
.page-guidebook .optin-hero__form-label { font-size: var(--fs-xl); }
/* お客様の声セクション内の注意書き */
.voice-section__note {
text-align: center;
color: var(--color-text-sub);
margin: var(--space-4) 0 0;
}
/* プロフィール見出し上の余白を詰める */
.page-guidebook .guidebook-profile { padding-top: var(--space-5); }
/* 特典リストとフォームの間隔を広げる */
.page-guidebook .optin-hero__benefits { margin-bottom: var(--space-5); }
/* オプトイン：サブ見出し＋絞り込み一言（2026-05-30 ver3） */
.optin-hero__sub {
text-align: center;
color: var(--color-text-sub);
font-size: var(--fs-base);
line-height: var(--lh-normal);
max-width: 34em;
margin: var(--space-2) auto var(--space-2);
}
.optin-hero__filter {
text-align: center;
color: var(--color-accent);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
margin: 0 0 var(--space-3);
}
/* guidebook 追加調整（2026-05-30）*/
/* (1) 鶴村ひと押しブロックを上へ：前後の余白を圧縮 */
.page-guidebook .optin-hero { padding-bottom: var(--space-4); }
.page-guidebook .optin-content { padding-block: var(--space-3); }
/* (3) 第2CTA見出しの緑下線を中央寄せ（テンプレの::afterが左寄せだった） */
.optin-cta-bottom__head::after { margin-left: auto; margin-right: auto; }
/* profile-mini 肩書（2026-05-30）*/
.profile-mini__role { font-size: var(--fs-sm); color: var(--color-accent); font-weight: var(--fw-medium); margin: 0 0 var(--space-1); }
/* (4) PC幅で各ブロックの横幅をフォームカード(520px)に統一＝赤線揃え */
.page-guidebook .profile-mini { max-width: 520px; margin-inline: auto; }
/* =========================================================
guidebook/download（Thanks / ガイドブック配布ページ）
- 縦に並ぶブロックは 560px に統一・中央寄せ（左右の端を揃える）
- 各セクションの上下padding は対称
========================================================= */
/* 全ブロック共通の幅揃え */
.page-gb-download .gb-dl-block { max-width: 520px; margin-inline: auto; }
/* (1) 配布ヒーロー */
.gb-dl-hero { padding-block: var(--space-4); text-align: center; }
.gb-dl-hero__title { font-size: var(--fs-h1); margin: 0 0 var(--space-5); }
.gb-dl-hero__cover { margin: 0 auto var(--space-5); max-width: 280px; }
.gb-dl-hero__cover a { display: block; }
.gb-dl-hero__cover img {
width: 100%; height: auto; display: block;
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
}
/* (2) 下への誘導（旧・黄色画像のテキスト版／speech-bubble 再利用） */
.gb-dl-cue { padding-block: var(--space-3); }
/* (3) クロスセル：失敗談ストーリー */
.gb-dl-story { padding-block: var(--space-7); }
.gb-dl-story__eyebrow {
text-align: center;
color: var(--color-accent);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: 0.08em;
margin: 0 0 var(--space-2);
}
.gb-dl-story__title { text-align: center; }
.gb-dl-story__title::after { margin-left: auto; margin-right: auto; }
.gb-dl-story__photo { margin: 0 auto var(--space-5); max-width: 520px; }
.gb-dl-story__photo img {
width: 100%; height: auto; display: block;
border-radius: var(--radius-md);
}
.gb-dl-story .story-body { max-width: none; } /* 親(560px)に揃える */
.gb-dl-story__lead {
text-align: center;
font-weight: var(--fw-bold);
color: var(--color-accent);
font-size: var(--fs-lg);
margin: var(--space-6) 0 var(--space-4);
}
/* (4) ボタンは 560px ブロック内で 360px 中央 */
.gb-dl-block .btn-primary { max-width: 360px; margin-inline: auto; }
/* (5) 運営者情報セクションの上下padding対称 */
.gb-dl-owner { padding-block: var(--space-7); }
/* (6) 「こちらもご覧ください」吹き出しを上下にゆっくりバウンス（下のセクションへ誘導）
prefers-reduced-motion は base.css のルールで自動停止 */
.gb-dl-cue .speech-bubble { animation: gb-dl-bob 1.8s ease-in-out infinite; }
@keyframes gb-dl-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* (7) この吹き出しは鶴村さん指示でクリック誘導が目的のため、
「動きを減らす」設定下でもバウンスを継続させる（base.css の全体停止を上書き）。
※明示的な例外。他のアニメは従来どおり reduced-motion を尊重する。 */
@media (prefers-reduced-motion: reduce) {
.gb-dl-cue .speech-bubble {
animation-duration: 1.8s !important;
animation-iteration-count: infinite !important;
}
}
/* (8) 「お知らせ／誘導」用の吹き出しバリアント（黄色系・新トークン color-notice）
※ボタン(緑)と差別化する注意喚起・誘導の再利用パーツ。2026-05-30 鶴村さん承認で新色追加 */
.speech-bubble--notice {
background: var(--color-notice);
color: var(--color-text);
font-weight: var(--fw-bold);
box-shadow: var(--shadow-1);
}
.speech-bubble--notice::after { border-top-color: var(--color-notice); }
/* =========================================================
blog-koukai-survay（アンケート型オプトイン／ブログ公開）
- 縦に並ぶブロックは 560px 統一・中央寄せ／上下padding対称
========================================================= */
.page-survey .survey-block { max-width: 560px; margin-inline: auto; }
/* 配布ヒーロー */
.survey-hero { padding-block: var(--space-4) var(--space-6); text-align: center; }
.survey-hero__title { font-size: var(--fs-h1); margin: 0 0 var(--space-5); }
.survey-hero__image {
margin: 0 auto var(--space-5);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.survey-hero__image img { width: 100%; height: auto; display: block; }
.survey-hero__lead { text-align: left; }
.survey-hero__lead p { margin: 0 0 var(--space-3); line-height: var(--lh-loose); }
.survey-hero__lead p:last-child { margin-bottom: 0; }
/* フォーム */
.survey-form-section { padding-block: var(--space-6); }
.survey-form-section__head { text-align: center; }
.survey-form-section__head::after { margin-left: auto; margin-right: auto; }
.survey-form__lead {
text-align: center;
color: var(--color-text-sub);
line-height: var(--lh-normal);
margin: 0 0 var(--space-5);
}
.survey-form-section .ac-form { max-width: none; } /* 560px ブロックに揃える */
/* 運営者情報 */
.survey-owner { padding-block: var(--space-6); }
/* =========================================================
Thanks/完了ページ（render_thanks 共通レイアウト）
- 中央寄せ・560px統一・上下padding対称
========================================================= */
.page-thanks .thanks-block { max-width: 560px; margin-inline: auto; }
.thanks-section { padding-block: var(--space-7); text-align: center; }
.thanks-check { width: 64px; height: 64px; margin: 0 auto var(--space-4); }
.thanks-check svg { width: 100%; height: 100%; display: block; }
.thanks-check__bg { fill: var(--color-accent-soft); }
.thanks-check__ring { fill: none; stroke: var(--color-accent); stroke-width: 2.5; }
.thanks-check__tick { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.thanks-title { font-size: var(--fs-h1); margin: 0 0 var(--space-5); }
.thanks-body { text-align: left; }
.thanks-body p { line-height: var(--lh-loose); margin: 0 0 var(--space-3); }
.thanks-body p:last-child { margin-bottom: 0; }
/* 振込先など枠付き情報ボックス（左寄せ） */
.thanks-paybox {
text-align: left;
background: var(--color-bg-soft);
border: var(--border-thin);
border-radius: var(--radius-md);
padding: var(--space-4);
margin: var(--space-5) 0;
}
.thanks-paybox p { margin: 0 0 var(--space-2); line-height: var(--lh-loose); }
.thanks-paybox p:last-child { margin-bottom: 0; }
/* CTA前の強調＋一言 */
.thanks-lead { font-weight: var(--fw-bold); margin: var(--space-6) 0 var(--space-2); line-height: var(--lh-normal); }
.thanks-cta-note { color: var(--color-text-sub); margin: 0 0 var(--space-3); }
.thanks-cta { margin-top: var(--space-4); }
.thanks-cta .btn-primary { min-width: 280px; }
/* 署名 */
.thanks-sign { text-align: left; margin-top: var(--space-6); color: var(--color-text-sub); font-size: var(--fs-sm); line-height: var(--lh-loose); }
/* =========================================================
銀行振込 申込フォーム（render_bankpay）
- 全ブロック 560px 統一・中央寄せ／フォームと説明カードの端を揃える
========================================================= */
.page-bankpay .bankpay-block { max-width: 560px; margin-inline: auto; }
.bankpay-section { padding-block: var(--space-6); }
.bankpay-title { text-align: center; font-size: var(--fs-h1); margin: 0 0 var(--space-5); }
.bankpay-eyebrow { text-align: center; color: var(--color-accent); font-weight: var(--fw-medium); letter-spacing: 0.08em; margin: 0 0 var(--space-2); }
.bankpay-product { text-align: center; margin-bottom: var(--space-5); }
.bankpay-product__name { font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: var(--lh-normal); margin: 0 0 var(--space-1); }
.bankpay-product__price { color: var(--color-text-sub); margin: 0; }
.bankpay-product__img { max-width: 420px; margin: 0 auto var(--space-3); }
.bankpay-product__img img { width: 100%; height: auto; display: block; }
/* オーダーバンプ説明カード（左寄せ） */
.bankpay-bump {
text-align: left;
margin-bottom: var(--space-5);
}
/* ■ 見出し行を少し強調（任意の小見出し） */
.bankpay-bump p { line-height: var(--lh-loose); margin: 0 0 var(--space-3); }
.bankpay-bump p:last-child { margin-bottom: 0; }
/* フォーム入力エリアを白カードで際立たせる（ページ全体は白背景） */
.bankpay-form {
background: var(--color-bg);
border: var(--border-thin);
border-radius: var(--radius-md);
box-shadow: var(--shadow-1);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.page-bankpay .ac-form { max-width: none; }
.bankpay-note { text-align: center; color: var(--color-text-sub); font-size: var(--fs-sm); line-height: var(--lh-loose); margin-top: var(--space-4); }
/* オーダーバンプ／注目アコーディオン（汎用）：誘導色で目立たせる開閉ボックス。
使い方：🎁 ...
...