/* ==========================================================================
   Install Design System — components.css
   tokens.css の後に読み込む。値の直書き禁止。すべて var(--*) 経由。
   ========================================================================== */

/* ---------- Layout ---------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-24); }
.section-sm { padding-block: var(--space-16); }
.section-alt { background: var(--color-page-alt); }
.section-green { background: var(--color-page-green); }
.section-dark { background: var(--color-page-dark); color: var(--color-fg-high-inverse); }
.section-dark .typo-eyebrow { color: var(--color-brand-green-300); }
.section-dark .text-middle { color: var(--color-fg-middle-inverse); }
.section-dark .text-low { color: var(--color-fg-low-inverse); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-16); }
}

/* Section header: eyebrow → heading → lead */
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-12); }
.section-head .lead { color: var(--color-fg-middle); max-width: 44em; }
.section-head.center { align-items: center; text-align: center; }
.section-dark .section-head .lead { color: var(--color-fg-middle-inverse); }

/* ---------- Marker（マーカー強調） ---------- */
.marker { background: linear-gradient(transparent 60%, var(--color-secondary-soft) 60%); padding-inline: 0.05em; }
.section-dark .marker { background: linear-gradient(transparent 60%, rgb(255 224 4 / 0.28) 60%); }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 3rem; padding-inline: var(--space-8);
  border-radius: var(--radius-full); border: 1.5px solid transparent;
  font-size: var(--text-sm); font-weight: var(--font-weight-bold); line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.btn-sm { height: 2.25rem; padding-inline: var(--space-4); font-size: var(--text-xs); }
.btn-lg { height: 3.5rem; padding-inline: var(--space-12); font-size: var(--text-base); }
.btn-primary { background: var(--color-primary); color: var(--color-fg-high-inverse); box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }
.btn-secondary { background: var(--color-surface); color: var(--color-fg-brand); border-color: var(--color-stroke-brand); }
.btn-secondary:hover { background: var(--color-primary-subtle); }
.btn-ghost { background: transparent; color: var(--color-fg-high); }
.btn-ghost:hover { background: var(--color-page-alt); }
.btn-inverse { background: var(--color-surface); color: var(--color-fg-brand); }
.btn-inverse:hover { background: var(--color-primary-subtle); }
.btn-dark { background: var(--color-fg-high); color: var(--color-fg-high-inverse); }
.btn-dark:hover { background: var(--color-slate-700); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-slate-200); color: var(--color-fg-disabled); box-shadow: none; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- Badge / Tag ---------- */
.badge { display: inline-flex; align-items: center; height: 1.5rem; padding-inline: var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: var(--tracking-wide); white-space: nowrap; }
.badge-dark { background: var(--color-fg-high); color: var(--color-fg-high-inverse); }
.badge-brand { background: var(--color-primary-soft); color: var(--color-brand-green-800); }
.badge-outline { background: transparent; color: var(--color-fg-middle); border: 1px solid var(--color-stroke-high); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-amber-100); }
.badge-inverse { background: rgb(255 255 255 / 0.14); color: var(--color-fg-high-inverse); }
.badge-pill { border-radius: var(--radius-full); padding-inline: var(--space-3); }

/* ---------- Card ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-stroke-middle); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.card-title { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-bold); }
.card-text { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-fg-middle); }
.card-accent { border: 0; border-top: 4px solid var(--color-primary); box-shadow: var(--shadow-sm); }
.card-outline-brand { border: 1.5px solid var(--color-stroke-brand); }
.card-dark { background: var(--color-surface-dark); border-color: var(--color-stroke-inverse); color: var(--color-fg-high-inverse); }
.card-dark .card-text { color: var(--color-fg-middle-inverse); }
.card-dark .card-ref { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-fg-low-inverse); border-top: 1px solid var(--color-stroke-inverse); padding-top: var(--space-3); margin-top: var(--space-2); }
.card-media { padding: 0; overflow: hidden; gap: 0; }
.card-media .card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.card-soft { background: var(--color-page-alt); border-color: transparent; }
.card-green { background: var(--color-primary-soft); border-color: transparent; }
.card-current { background: var(--color-page-green); border: 1.5px solid var(--color-stroke-brand); }

/* ---------- Number / Step ---------- */
.step-num { font-size: var(--text-xl); font-weight: var(--font-weight-black); color: var(--color-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.step-label { font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-fg-brand); }

/* ---------- Photo placeholder（ラフ用） ---------- */
.ph { background: var(--color-page-alt); border: 2px dashed var(--color-stroke-high); color: var(--color-fg-low); display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-wide); min-height: 160px; border-radius: var(--radius-sm); padding: var(--space-3); }
.card-media .ph { border-radius: 0; border-width: 0 0 2px 0; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: flex; flex-direction: column; }
.checklist li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-8); border-bottom: 1px dashed var(--color-stroke-middle); font-size: var(--text-sm); line-height: var(--leading-sm); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before { content: "✓"; position: absolute; left: var(--space-1); color: var(--color-primary); font-weight: var(--font-weight-black); }

/* ---------- Roadmap（横並びの段階） ---------- */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-8); }
.roadmap > * { position: relative; }
.roadmap > * + *::before { content: "→"; position: absolute; left: calc(var(--space-6) * -1); top: 50%; transform: translate(-50%, -50%); color: var(--color-primary); font-weight: var(--font-weight-black); font-size: var(--text-lg); }
@media (max-width: 860px) {
  .roadmap { grid-template-columns: 1fr; gap: var(--space-6); }
  .roadmap > * + *::before { content: "↓"; left: 50%; top: calc(var(--space-6) * -1); transform: translate(-50%, 50%); }
}

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); line-height: var(--leading-sm); }
.table th, .table td { border: 1px solid var(--color-stroke-middle); padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.table th { background: var(--color-page-alt); font-weight: var(--font-weight-bold); color: var(--color-fg-high); width: 22%; white-space: nowrap; }
.table td b { color: var(--color-fg-high); }

/* ---------- Accordion / FAQ ---------- */
.faq { background: var(--color-surface); border: 1px solid var(--color-stroke-middle); border-radius: var(--radius-sm); padding-inline: var(--space-6); }
.faq + .faq { margin-top: var(--space-3); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-4); padding-right: var(--space-8); font-weight: var(--font-weight-bold); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; position: absolute; right: 0; color: var(--color-primary); font-weight: var(--font-weight-normal); }
.faq[open] summary::after { content: "−"; }
.faq .faq-body { padding-bottom: var(--space-4); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-fg-middle); }

/* ---------- Quote ---------- */
.quote { border-left: 3px solid var(--color-primary); padding: var(--space-2) 0 var(--space-2) var(--space-6); }
.quote p { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-bold); }

/* ---------- Callout ---------- */
.callout { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--leading-sm); }
.callout-info { background: var(--color-info-soft); color: var(--color-slate-700); border: 1px solid var(--color-blue-100); }
.callout-warning { background: var(--color-warning-soft); color: var(--color-amber-700); border: 1px solid var(--color-amber-100); }
.callout-inverse { background: rgb(255 255 255 / 0.12); color: var(--color-fg-middle-inverse); border: 1px solid var(--color-stroke-inverse); }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field + .field { margin-top: var(--space-4); }
.label { font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-fg-high); display: flex; align-items: center; gap: var(--space-2); }
.label .req { font-size: var(--text-xs); color: var(--color-negative); font-weight: var(--font-weight-bold); }
.input, .select, .textarea { width: 100%; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-stroke-high); border-radius: var(--radius-xs); background: var(--color-surface); font-size: var(--text-base); line-height: 1.5; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.textarea { min-height: 7rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-fg-placeholder); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-outline-focus); box-shadow: var(--shadow-focus-ring); }
.form-card { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-8); color: var(--color-fg-high); text-align: left; }
.form-note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-fg-low); text-align: center; }

/* ---------- Header / Footer ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-stroke-middle); }
.site-header .bar { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { font-weight: var(--font-weight-black); letter-spacing: var(--tracking-wide); line-height: 1.2; }
.brand small { display: block; font-size: 0.625rem; color: var(--color-fg-low); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-widest); }
.nav { display: flex; gap: var(--space-6); list-style: none; font-size: var(--text-sm); }
.nav a { white-space: nowrap; transition: color var(--duration-fast); }
.nav a:hover { color: var(--color-fg-brand); }
@media (max-width: 860px) { .nav { display: none; } }
.site-footer { background: var(--color-brand-green-950); color: var(--color-fg-low-inverse); font-size: var(--text-xs); line-height: var(--leading-xs); padding-block: var(--space-8); text-align: center; }
.site-footer .links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-3); color: var(--color-fg-middle-inverse); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--color-page) 0%, var(--color-page-green) 55%, var(--color-primary-soft) 100%); padding-block: var(--space-24); position: relative; overflow: hidden; }
.hero .hero-body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40em; position: relative; }
.hero .hero-series { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-black); }
.hero .hero-series em { font-style: normal; color: var(--color-fg-brand); }
.hero .lead { color: var(--color-fg-middle); }
.hero .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.hero-visual { position: absolute; right: -2rem; bottom: -1rem; width: 26rem; transform: rotate(-4deg); }
@media (max-width: 1000px) { .hero-visual { display: none; } .hero { padding-block: var(--space-16); } }

/* ==========================================================================
   v0.2 追加（relay/succession の型を取り込み）
   ========================================================================== */

/* ---------- CTA button（黄・最重要導線。1画面に1つ） ---------- */
.btn-cta { background: var(--color-secondary); color: var(--color-fg-high); box-shadow: var(--shadow-cta); font-size: var(--text-base); height: 3.5rem; padding-inline: var(--space-12); border-radius: var(--radius-full); transform: translateY(0); transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast); }
.btn-cta:hover { background: var(--color-secondary-hover); }
.btn-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-brand-yellow-600); }
.btn-cta.btn-xl { height: 4rem; font-size: var(--text-lg); }
.btn-cta .arrow { font-weight: var(--font-weight-black); }

/* ---------- Pill badge（カード上部中央の「理由❶」型） ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 2rem; padding-inline: var(--space-4); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-fg-high-inverse); font-size: var(--text-sm); font-weight: var(--font-weight-bold); line-height: 1; white-space: nowrap; }
.pill-outline { background: var(--color-surface); color: var(--color-fg-brand); border: 1.5px solid var(--color-stroke-brand); }
.card-pill { position: relative; padding-top: var(--space-12); text-align: center; }
.card-pill > .pill { position: absolute; top: calc(var(--space-4) * -1); left: 50%; transform: translateX(-50%); }

/* ---------- Big card（角丸24・余白32。relayの白カード） ---------- */
.card-xl { border-radius: var(--radius-lg); padding: var(--space-8); gap: var(--space-4); }
@media (max-width: 860px) { .card-xl { padding: var(--space-6); } }

/* ---------- USP chips（ヒーロー下の3つの言い切り） ---------- */
.usp { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.usp-chip { flex: 1 1 10rem; background: var(--color-page-alt); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); text-align: center; display: flex; flex-direction: column; gap: 0; }
.usp-chip small { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--font-weight-bold); color: var(--color-fg-middle); }
.usp-chip b { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-black); color: var(--color-fg-brand); }

/* ---------- 見出し内の強調語（黒見出しの中の緑） ---------- */
.em-brand { color: var(--color-fg-brand); }
.em-yellow { background: linear-gradient(transparent 55%, var(--color-secondary) 55%); padding-inline: 0.1em; }

/* ---------- Speech bubble（画像の上に置く黄色の吹き出し） ---------- */
.bubble { position: absolute; background: var(--color-secondary); color: var(--color-fg-high); font-size: var(--text-sm); line-height: 1.4; font-weight: var(--font-weight-black); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); box-shadow: var(--shadow-md); transform: rotate(-4deg); text-align: center; white-space: nowrap; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--color-secondary); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.bubble.tr { top: calc(var(--space-4) * -1); right: var(--space-4); transform: rotate(4deg); }
.bubble.bl { bottom: var(--space-6); left: calc(var(--space-4) * -1); }
@media (max-width: 600px) { .bubble { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); } .bubble.bl { left: var(--space-2); } .bubble.tr { right: var(--space-2); } }

/* ---------- Media slot（写真・図の差し替え枠。ファイル差し替えだけで反映） ---------- */
.media { position: relative; border-radius: var(--radius-md); overflow: visible; }
.media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block; background: var(--color-page-alt); }
.media.r-16x10 img { aspect-ratio: 16 / 10; }
.media.r-4x3 img { aspect-ratio: 4 / 3; }
.media.r-3x2 img { aspect-ratio: 3 / 2; }
.media.r-1x1 img { aspect-ratio: 1 / 1; }
.media.rounded-sm img { border-radius: var(--radius-sm); }
.media .slot-id { position: absolute; left: var(--space-2); top: var(--space-2); font-family: var(--font-mono); font-size: 0.625rem; line-height: 1; background: var(--color-fg-high); color: var(--color-fg-high-inverse); padding: 3px 6px; border-radius: var(--radius-xs); opacity: .8; }   /* ラフ用。本番で削除 */
.media.screen img { box-shadow: var(--shadow-lg); border: 1px solid var(--color-stroke-middle); }

/* ---------- Icon tile（線画アイコン＋短いラベルのグリッド） ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
@media (max-width: 600px) { .icon-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.icon-tile { background: var(--color-page-alt); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-bold); }
.icon-tile .icon { width: 3.5rem; height: 3.5rem; }
.icon-tile .icon img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Note box（人物アイコン＋補足。クリーム面） ---------- */
.note-box { display: flex; align-items: center; gap: var(--space-3); background: var(--color-cream); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-fg-middle); text-align: left; }
.note-box .avatar { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); overflow: hidden; background: var(--color-primary-soft); }
.note-box .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA band（緑面の相談導線・ページ中に繰り返す） ---------- */
.cta-band { background: var(--color-primary); color: var(--color-fg-high-inverse); text-align: center; padding-block: var(--space-16); }
.cta-band .kicker { font-size: var(--text-sm); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); }
.cta-band .kicker::before, .cta-band .kicker::after { content: "＼"; margin-inline: var(--space-2); opacity: .8; }
.cta-band .kicker::after { content: "／"; }
.cta-band h2 { margin-top: var(--space-2); }
.cta-band .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cta-band .btn-secondary { background: transparent; color: var(--color-fg-high-inverse); border-color: rgb(255 255 255 / .6); }
.cta-band .btn-secondary:hover { background: rgb(255 255 255 / .12); }

/* ---------- Stat（数字の言い切り。数字は tabular） ---------- */
.stat { text-align: center; display: flex; flex-direction: column; gap: 0; }
.stat .num { font-size: var(--text-3xl); line-height: 1.1; font-weight: var(--font-weight-black); color: var(--color-fg-high); font-variant-numeric: tabular-nums; }
.stat .num small { font-size: var(--text-lg); margin-left: 0.1em; }
.stat .cap { font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-fg-middle); }

/* ---------- Sticky CTA（SPの下部固定） ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); border-top: 1px solid var(--color-stroke-middle); display: none; }
.sticky-cta .btn { width: 100%; }
@media (max-width: 860px) { .sticky-cta { display: block; } body.has-sticky { padding-bottom: 5rem; } }

/* ---------- Steps（縦の流れ。番号つき） ---------- */
.steps { list-style: none; display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: var(--space-4); padding-block: var(--space-4); position: relative; }
.steps li + li::before { content: ""; position: absolute; left: 1.5rem; top: 0; bottom: 100%; }
.steps li .no { width: 3rem; height: 3rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-fg-high-inverse); display: grid; place-items: center; font-weight: var(--font-weight-black); font-variant-numeric: tabular-nums; }
.steps li .no::before { content: counter(step, decimal-leading-zero); }
.steps li h4 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-bold); }
.steps li p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-fg-middle); }

/* ==========================================================================
   v0.3 追加（GEPPY STUDiO の型：余白・大パネル・淡色・白ピル）
   ========================================================================== */

/* ---------- Dot label（● セクション名） ---------- */
.label-dot { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-fg-high); }
.label-dot::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.section-dark .label-dot { color: var(--color-fg-high-inverse); }

/* ---------- Panel（角丸32の大きな面。セクション丸ごと包む） ---------- */
.panel { background: var(--color-panel); border-radius: var(--radius-xl); padding: var(--space-16) var(--space-12); }
.panel-white { background: var(--color-surface); border: 1px solid var(--color-stroke-middle); }
.panel-green { background: var(--color-page-green); }
@media (max-width: 860px) { .panel { padding: var(--space-8) var(--space-4); border-radius: var(--radius-lg); } }

/* ---------- Tint cards（淡色3色） ---------- */
.card-tint-mint { background: var(--color-tint-mint); border-color: transparent; }
.card-tint-sky { background: var(--color-tint-sky); border-color: transparent; }
.card-tint-cream { background: var(--color-tint-cream); border-color: transparent; }
.card-tint-mint .card-title, .card-tint-sky .card-title, .card-tint-cream .card-title { font-size: var(--text-base); line-height: var(--leading-base); }

/* ---------- Rule title（短い緑線つき見出し） ---------- */
.rule-title { display: flex; flex-direction: column; gap: var(--space-3); }
.rule-title::after { content: ""; width: 3rem; height: 3px; background: var(--color-primary); border-radius: 2px; }
.rule-title.center { align-items: center; }

/* ---------- Pill-arrow button（白ピル＋右端の丸矢印） ---------- */
.btn-pillarrow { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.75rem; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6); border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-stroke-middle); color: var(--color-fg-high); font-weight: var(--font-weight-bold); font-size: var(--text-base); transition: border-color var(--duration-base), box-shadow var(--duration-base); }
.btn-pillarrow .circle { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-fg-high-inverse); display: grid; place-items: center; font-weight: var(--font-weight-black); transition: transform var(--duration-base) var(--ease); }
.btn-pillarrow:hover { border-color: var(--color-stroke-brand); box-shadow: var(--shadow-md); }
.btn-pillarrow:hover .circle { transform: translateX(3px); }
.btn-pillarrow.primary { background: var(--color-primary); color: var(--color-fg-high-inverse); border-color: transparent; box-shadow: var(--shadow-primary); }
.btn-pillarrow.primary .circle { background: var(--color-surface); color: var(--color-primary); }
.btn-pillarrow.dark { background: var(--color-fg-high); color: var(--color-fg-high-inverse); border-color: transparent; }
.btn-pillarrow.dark .circle { background: var(--color-surface); color: var(--color-fg-high); }
.btn-pillarrow.block { width: 100%; }

/* ---------- Soft bubble（白ピル・緑文字。画像上のラベル） ---------- */
.bubble-soft { position: absolute; background: var(--color-surface); color: var(--color-fg-brand); border: 1.5px solid var(--color-stroke-brand); font-size: var(--text-sm); line-height: 1.3; font-weight: var(--font-weight-bold); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); white-space: nowrap; }
.bubble-soft.tr { top: var(--space-4); right: var(--space-4); }
.bubble-soft.bl { bottom: var(--space-4); left: var(--space-4); }
.bubble-soft.br { bottom: var(--space-4); right: var(--space-4); }
@media (max-width: 600px) { .bubble-soft { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); } }

/* ---------- Underline accent（本文中の緑下線） ---------- */
.ul-brand { text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 0.2em; color: var(--color-fg-brand); font-weight: var(--font-weight-bold); }

/* ---------- Product block（アイコン丸＋英字大見出し＋日本語サブ） ---------- */
.product-head { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-stroke-middle); margin-bottom: var(--space-6); }
.product-head .icon-round { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full); background: var(--color-primary); display: grid; place-items: center; overflow: hidden; }
.product-head .icon-round img { width: 60%; height: 60%; object-fit: contain; filter: brightness(0) invert(1); }
.product-head .en { font-family: var(--font-display-en); font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.product-head .ja { font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-fg-middle); }

/* ---------- Logo strip（実績ロゴ・連携先の帯） ---------- */
.logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-8) var(--space-12); padding-block: var(--space-8); }
.logo-strip img, .logo-strip .logo { height: 2rem; opacity: .75; filter: grayscale(1); }

/* ---------- Rough banner（ラフ確認用・公開時は削除） ---------- */
.rough { background: var(--color-warning-soft); border-bottom: 1px solid var(--color-amber-100); color: var(--color-amber-700); font-size: var(--text-xs); line-height: var(--leading-sm); padding: var(--space-2) var(--space-4); text-align: center; }
.rough b { background: var(--color-amber-700); color: var(--color-fg-high-inverse); padding: 2px var(--space-2); border-radius: var(--radius-xs); margin-right: var(--space-2); letter-spacing: var(--tracking-wide); white-space: nowrap; }
.ann { display: inline-block; background: var(--color-warning-soft); border: 1px solid var(--color-amber-100); color: var(--color-amber-700); font-size: var(--text-xs); line-height: 1.6; border-radius: var(--radius-xs); padding: 0 var(--space-2); vertical-align: 2px; margin-left: var(--space-2); }

/* LP v5.2: 教材図解・読み順・資料案内。寸法は既存トークンを利用。 */
.learning-visual { padding:var(--space-8); background:var(--color-page-green); border-radius:var(--radius-lg); color:var(--color-fg-high); }
.learning-visual .visual-label { display:block; color:var(--color-fg-brand); font-size:var(--text-xs); font-weight:var(--font-weight-bold); margin-bottom:var(--space-4); }
.book-spread { display:grid; grid-template-columns:1fr 1fr; background:var(--color-surface); border:1px solid var(--color-stroke-middle); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); overflow:hidden; }
.book-page { padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); min-width:0; }
.book-page + .book-page { border-left:1px solid var(--color-stroke-middle); background:var(--color-page-alt); }
.book-page .book-name { font-size:var(--text-xs); color:var(--color-fg-brand); font-weight:var(--font-weight-bold); }
.book-page h3 { font-size:var(--text-xl); line-height:var(--leading-xl); }
.book-page p { font-size:var(--text-sm); line-height:var(--leading-sm); }
.answer-lines { display:grid; gap:var(--space-6); margin-block:var(--space-2); }
.answer-lines span { border-bottom:1px solid var(--color-stroke-middle); height:var(--space-2); }
.visual-caption { font-size:var(--text-xs); color:var(--color-fg-low); margin-top:var(--space-4); line-height:var(--leading-xs); }
.topic-map { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.topic-map strong { grid-column:1/-1; text-align:center; background:var(--color-page-dark); color:var(--color-fg-high-inverse); padding:var(--space-4); border-radius:var(--radius-sm); }
.topic-map span { text-align:center; padding:var(--space-4); background:var(--color-surface); border:1px solid var(--color-stroke-brand); border-radius:var(--radius-sm); font-size:var(--text-sm); }
.learning-stages { list-style:none; display:grid; gap:var(--space-3); padding:0; counter-reset:learning; }
.learning-stages li { counter-increment:learning; padding:var(--space-4); border-radius:var(--radius-sm); background:var(--color-surface); display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); }
.learning-stages li::before { content:'0' counter(learning); color:var(--color-fg-brand); font-weight:var(--font-weight-black); }
.learning-stages li:last-child { background:var(--color-page-dark); color:var(--color-fg-high-inverse); }
.learning-stages li:last-child::before { color:inherit; }
.resource-summary { display:grid; grid-template-columns:1fr 2fr; gap:var(--space-8); align-items:center; text-align:left; max-width:var(--container-narrow); margin-inline:auto; }
.resource-cover { padding:var(--space-8) var(--space-6); background:var(--color-page-dark); color:var(--color-fg-high-inverse); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); }
.resource-cover strong { display:block; font-size:var(--text-xl); line-height:var(--leading-xl); margin-block:var(--space-6); }
.resource-cover small { color:var(--color-fg-middle-inverse); }
.resource-list { display:grid; gap:var(--space-2); padding-left:var(--space-6); margin-block:var(--space-4); }
.lp-refined .hero-grid { gap:var(--space-8); }
.lp-refined .hero-shots { display:block; }
.lp-refined .hero .typo-display { font-size:clamp(var(--text-2xl),4.8vw,var(--text-3xl)); }
.lp-refined .hero .lead { margin-top:var(--space-4); }
.lp-refined .hero .catch { font-size:var(--text-base); }
.lp-refined .hero-cta { flex-wrap:wrap; gap:var(--space-3); }
.lp-refined .audience-links { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.lp-refined .audience-links a { font-size:var(--text-xs); padding:var(--space-1) var(--space-3); border:1px solid var(--color-stroke-middle); border-radius:var(--radius-full); }
.lp-refined .audience-links a:hover { border-color:var(--color-stroke-brand); color:var(--color-fg-brand); }
.lp-refined .policy-card { border:0; border-radius:0; border-top:1px solid var(--color-stroke-middle); padding:var(--space-6) 0; }
.lp-refined .policy-card .icon { display:none; }
.lp-refined .policy-card .card-text { font-size:var(--text-base); line-height:var(--leading-base); }
.lp-refined .philosophy-note { border-top:1px solid var(--color-stroke-inverse); padding-top:var(--space-6); margin-top:var(--space-8); color:var(--color-fg-middle-inverse); }
.lp-refined .ann { white-space:normal; }
.lp-refined .rough { text-align:left; }
.lp-refined .rough summary { cursor:pointer; }
.lp-refined .rough p { margin-top:var(--space-2); }
.lp-refined .slot-id { display:none; }
.lp-refined .note-box .avatar { display:none; }
.lp-refined .contact .form-card { color:var(--color-fg-high); }
.lp-refined .field-note { color:var(--color-fg-low); font-size:var(--text-xs); margin-top:var(--space-2); }
.lp-refined .form-status { background:var(--color-page-green); padding:var(--space-4); border-radius:var(--radius-sm); margin-top:var(--space-4); }
.lp-refined [hidden] { display:none !important; }
.lp-refined .skip-link { position:absolute; top:var(--space-2); left:var(--space-2); transform:translateY(-200%); z-index:100; background:var(--color-surface); padding:var(--space-3); }
.lp-refined .skip-link:focus { transform:none; }
.lp-refined :focus-visible { outline:var(--space-1) solid var(--color-stroke-brand); outline-offset:var(--space-1); }
.lp-refined section[id] { scroll-margin-top:var(--space-24); }
.lp-refined .target-card { align-items:flex-start; text-align:left; }
.lp-refined .target-card .icon { margin-inline:0; }
.lp-refined .delivery-visual { background:var(--color-page-green); padding:var(--space-6); border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:var(--space-3); }
.lp-refined .delivery-visual strong { font-size:var(--text-lg); }
.lp-refined .delivery-visual span { font-size:var(--text-sm); }
.lp-refined .contact-purpose { border:0; padding:0; margin:0 0 var(--space-6); display:flex; flex-wrap:wrap; gap:var(--space-3); }
.lp-refined .contact-purpose legend { font-weight:var(--font-weight-bold); margin-bottom:var(--space-3); }
.lp-refined .contact-purpose label { border:1px solid var(--color-stroke-middle); border-radius:var(--radius-sm); padding:var(--space-3); flex:1; white-space:nowrap; }
@media (max-width:600px) {
 .learning-visual { padding:var(--space-4); }
 .book-page { padding:var(--space-4); gap:var(--space-3); }
 .book-page h3 { font-size:var(--text-lg); line-height:var(--leading-lg); }
 .resource-summary { grid-template-columns:1fr; gap:var(--space-6); }
 .resource-cover { padding:var(--space-6); }
 .resource-cover strong { margin-block:var(--space-3); }
 .lp-refined .hero { padding-block:var(--space-8) var(--space-12); }
 .lp-refined .hero-grid { gap:var(--space-8); }
 .lp-refined .hero .catch { font-size:var(--text-sm); }
 .lp-refined .hero-cta .btn { width:100%; padding-inline:var(--space-4); }
 .lp-refined .brand { max-width:50%; }
 .lp-refined .site-header .bar { gap:var(--space-2); }
 .lp-refined .hero-tints { margin-top:var(--space-8); }
 .lp-refined .hero-tints .card { min-height:0; }
 .lp-refined .topic-map span { padding:var(--space-3) var(--space-2); }
 .lp-refined .sticky-cta { padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { .lp-refined { scroll-behavior:auto; } .lp-refined * { transition:none !important; animation:none !important; } }

.lp-refined .book-page h3 { font-size:var(--text-lg); line-height:var(--leading-lg); }
.lp-refined #instructor { scroll-margin-top:var(--space-24); }

.lp-refined #textbook .typo-heading .em-brand { display:inline-block; }
@media (max-width:600px) {
 .lp-refined .book-spread { grid-template-columns:1fr; }
 .lp-refined .book-page + .book-page { border-left:0; border-top:1px solid var(--color-stroke-middle); }
 .lp-refined .book-page h3 br { display:none; }
 .lp-refined .input, .lp-refined .select, .lp-refined .textarea { font-size:var(--text-base); }
 .lp-refined .form-card { padding:var(--space-6); }
}

.lp-refined #main { scroll-margin-top:var(--space-24); }

/* LP v5.3: generated editorial illustrations and original SVG icon family. */
.lp-refined .illustration { margin:0; overflow:hidden; border-radius:var(--radius-md); background:var(--color-page-alt); }
.lp-refined .illustration img { width:100%; height:auto; display:block; aspect-ratio:3 / 2; object-fit:cover; }
.lp-refined .illustration figcaption { padding:var(--space-3) var(--space-4); font-size:var(--text-xs); line-height:var(--leading-xs); color:var(--color-fg-low); }
.lp-refined .hero-visual-note { padding:var(--space-6); border-radius:var(--radius-md); border:1px solid var(--color-stroke-middle); background:var(--color-surface); margin-top:var(--space-4); }
.lp-refined .hero-visual-note strong { display:block; font-size:var(--text-lg); line-height:var(--leading-lg); }
.lp-refined .hero-visual-note p { color:var(--color-fg-middle); font-size:var(--text-sm); line-height:var(--leading-sm); margin-top:var(--space-2); }
.lp-refined .hero-visual-note a { display:inline-block; font-size:var(--text-sm); font-weight:var(--font-weight-bold); color:var(--color-fg-brand); margin-top:var(--space-3); text-decoration:underline; text-underline-offset:var(--space-1); }
.lp-refined .policy-card .icon { display:block; flex-basis:var(--space-12); width:var(--space-12); height:var(--space-12); }
.lp-refined .policy-card { flex-direction:row; }
.lp-refined .policy-card > .stack { min-width:0; }
.lp-refined .target-card .icon { width:var(--space-16); height:var(--space-16); }
.lp-refined .delivery-card { overflow:hidden; }
@media (max-width:600px) {
 .lp-refined .hero-visual-note { padding:var(--space-4); }
 .lp-refined .policy-card { gap:var(--space-3); }
}

/* v5.4: simplified service diagrams. Original artwork, semantic labels in HTML. */
.lp-refined .service-concept { padding:var(--space-6); border-radius:var(--radius-lg); background:var(--color-page-green); }
.lp-refined .concept-caption { font-size:var(--text-lg); font-weight:var(--font-weight-bold); line-height:var(--leading-lg); text-align:center; margin-bottom:var(--space-4); }
.lp-refined .concept-core { max-width:70%; margin-inline:auto; background:var(--color-surface); border:1px solid var(--color-stroke-brand); border-radius:var(--radius-md); padding:var(--space-3); text-align:center; }
.lp-refined .concept-core img { display:block; width:100%; height:auto; max-height:var(--concept-core-height); object-fit:contain; }
.lp-refined .concept-core strong { display:block; font-size:var(--text-lg); line-height:var(--leading-lg); }
.lp-refined .concept-core span { display:block; font-size:var(--text-xs); color:var(--color-fg-brand); margin-top:var(--space-1); }
.lp-refined .concept-branches { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); position:relative; padding-top:var(--space-8); }
.lp-refined .concept-branches::before { content:''; position:absolute; top:var(--space-4); left:25%; right:25%; border-top:2px solid var(--color-stroke-brand); }
.lp-refined .concept-branches::after { content:''; position:absolute; top:0; left:50%; height:var(--space-4); border-left:2px solid var(--color-stroke-brand); }
.lp-refined .concept-node { position:relative; background:var(--color-surface); padding:var(--space-3); border-radius:var(--radius-sm); text-align:center; }
.lp-refined .concept-node::before { content:'↓'; position:absolute; top:calc(0px - var(--space-6)); left:calc(50% - var(--space-2)); color:var(--color-fg-brand); font-size:var(--text-lg); }
.lp-refined .concept-node img { display:block; width:100%; height:auto; }
.lp-refined .concept-node strong { display:block; font-size:var(--text-base); line-height:var(--leading-base); }
.lp-refined .concept-node span { display:block; font-size:var(--text-xs); color:var(--color-fg-middle); }
.lp-refined .diagram-label { color:var(--color-fg-brand); font-size:var(--text-sm); font-weight:var(--font-weight-bold); text-align:center; }
.lp-refined .illustration.diagram { background:var(--color-page-green); }
.lp-refined .illustration.diagram figcaption { background:var(--color-surface); padding-block:var(--space-4); }
.lp-refined .diagram-note { font-size:var(--text-xs); color:var(--color-fg-low); line-height:var(--leading-xs); margin-top:var(--space-3); text-align:center; }
@media (max-width:600px) { .lp-refined .service-concept { padding:var(--space-4); } .lp-refined .concept-core { max-width:80%; } .lp-refined .concept-branches { gap:var(--space-3); } }

/* v5.5: photograph-independent editorial composition; LP only. */
.lp-editorial .section { padding-block:var(--space-24); }
.lp-editorial .hero { background:var(--color-editorial-hero); color:var(--color-fg-high-inverse); padding-block:var(--space-16); }
.lp-editorial .hero-grid { grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--space-12); }
.lp-editorial .hero .catch { padding:0; background:none; color:var(--color-fg-high-inverse); font-size:var(--text-base); font-weight:var(--font-weight-medium); }
.lp-editorial .hero .catch em { color:var(--color-fg-high-inverse); }
.lp-editorial .hero .typo-display { font-size:clamp(var(--text-2xl),4.5vw,var(--text-editorial-hero)); line-height:1.4; margin-top:var(--space-6); letter-spacing:var(--tracking-tight); }
.lp-editorial .hero .typo-display .em-brand { color:var(--color-secondary-soft); }
.lp-editorial .hero .lead { color:var(--color-fg-high-inverse); margin-top:var(--space-6); font-size:var(--text-base); line-height:var(--leading-base); }
.lp-editorial .hero .text-low { color:var(--color-fg-middle-inverse); }
.lp-editorial .btn-cta { background:var(--color-page-dark); color:var(--color-fg-high-inverse); border-color:var(--color-page-dark); box-shadow:none; }
.lp-editorial .btn-cta:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); box-shadow:none; }
.lp-editorial .hero .btn-cta { background:var(--color-surface); border-color:var(--color-surface); color:var(--color-fg-brand); }
.lp-editorial .hero .btn-secondary { border-color:var(--color-stroke-inverse); color:var(--color-fg-high-inverse); background:none; }
.lp-editorial .hero .btn-secondary:hover { background:var(--color-page-dark); }
.lp-editorial .hero .audience-links a { color:var(--color-fg-high-inverse); border-color:var(--color-stroke-inverse); }
.lp-editorial .service-concept { color:var(--color-fg-high); padding:var(--space-6); background:var(--color-editorial-paper); }
.lp-editorial .concept-caption { font-size:var(--text-base); }
.lp-editorial .concept-core { max-width:85%; }
.lp-editorial .hero-tints { gap:0; margin-top:var(--space-16); border-top:1px solid var(--color-stroke-inverse); }
.lp-editorial .hero-tints .card { background:none; border:0; border-radius:0; padding:var(--space-6); gap:var(--space-3); min-height:0; color:var(--color-fg-high-inverse); }
.lp-editorial .hero-tints .card + .card { border-left:1px solid var(--color-stroke-inverse); }
.lp-editorial .hero-tints .card .kicker { color:var(--color-fg-middle-inverse); font-family:var(--font-sans); font-size:var(--text-xs); }
.lp-editorial .hero-tints .card .kicker i { display:none; }
.lp-editorial .hero-tints .card-title { font-size:var(--text-base); line-height:var(--leading-base); }
.lp-editorial .section-head .typo-eyebrow { font-size:var(--text-sm); letter-spacing:var(--tracking-wide); text-transform:none; }
.lp-editorial .section-head .typo-heading { font-size:clamp(var(--text-xl),3.5vw,var(--text-editorial-heading)); }
.lp-editorial #why { background:var(--color-editorial-paper); }
.lp-editorial #why .section-head { align-items:flex-start; text-align:left; max-width:var(--editorial-lead-width); margin-bottom:var(--space-16); }
.lp-editorial #why .grid-3 { gap:var(--space-8); }
.lp-editorial #why .card { background:none; border:0; border-top:1px solid var(--color-stroke-high); border-radius:0; padding:var(--space-6) 0 0; gap:var(--space-4); }
.lp-editorial #why .badge { background:none; color:var(--color-fg-brand); padding:0; font-size:var(--text-sm); }
.lp-editorial #why .card-text { font-size:var(--text-base); line-height:var(--leading-base); }
.lp-editorial #why > .container > p { text-align:left; max-width:var(--editorial-lead-width); font-size:var(--text-xl); line-height:var(--leading-xl); margin-top:var(--space-16); }
.lp-editorial #textbook { background:var(--color-page); }
.lp-editorial #textbook .section-head { text-align:left; align-items:flex-start; max-width:var(--editorial-lead-width); }
.lp-editorial #textbook .reason { border:0; border-top:1px solid var(--color-stroke-middle); border-radius:0; padding:var(--space-8) 0 0; background:none; gap:var(--space-3); }
.lp-editorial #textbook .reason > .pill { position:static; transform:none; background:none; color:var(--color-fg-brand); padding:0; align-self:flex-start; border:0; box-shadow:none; }
.lp-editorial #textbook .reason > h3 { text-align:left; font-size:var(--text-2xl); }
.lp-editorial #textbook .reason-grid { gap:var(--space-12); }
.lp-editorial #textbook .learning-visual { background:var(--color-page-green); }
.lp-editorial .cta-band { background:var(--color-editorial-paper); color:var(--color-fg-high); }
.lp-editorial .cta-band .typo-heading { color:var(--color-fg-high); }
.lp-editorial #target { background:var(--color-page-green); }
.lp-editorial #target .target-card { background:none; border:0; border-top:1px solid var(--color-stroke-brand); border-radius:0; padding:var(--space-6) 0; }
.lp-editorial #target .target-card .icon { width:var(--space-12); height:var(--space-12); margin-bottom:var(--space-3); }
.lp-editorial #target .pkg { border:0; box-shadow:none; margin-top:var(--space-8); padding:var(--space-8); }
.lp-editorial #delivery .grid-3 > .card { border:0; border-radius:0; padding:0 !important; gap:var(--space-4); }
.lp-editorial #delivery .illustration { border-radius:var(--radius-md); }
.lp-editorial #delivery .section-head { text-align:left; align-items:flex-start; }
.lp-editorial #delivery .roadmap .card { border-radius:var(--radius-sm); box-shadow:none; }
.lp-editorial #design { background:var(--color-editorial-paper); }
.lp-editorial #design .editorial-columns { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-16); align-items:start; }
.lp-editorial #design .section-head { text-align:left; align-items:flex-start; margin-bottom:0; }
.lp-editorial #design .grid-2 { grid-template-columns:1fr; gap:0; }
.lp-editorial #design .policy-card { background:none; padding-block:var(--space-6); }
.lp-editorial #design .policy-card .icon { display:none; }
.lp-editorial #design .policy-card:first-child { border-top:0; padding-top:0; }
.lp-editorial #design .card-title { font-size:var(--text-xl); line-height:var(--leading-xl); }
.lp-editorial #design .step-label { margin-bottom:var(--space-2); }
.lp-editorial #philosophy .section-head { text-align:left; align-items:flex-start; max-width:var(--editorial-lead-width); margin-bottom:var(--space-16); }
.lp-editorial #philosophy .grid-3 { display:flex; flex-direction:column; gap:0; }
.lp-editorial #philosophy .card { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:var(--space-12); row-gap:var(--space-3); border:0; border-top:1px solid var(--color-stroke-inverse); border-radius:0; background:none; padding:var(--space-8) 0; }
.lp-editorial #philosophy .badge { grid-column:1; padding:0; background:none; color:var(--color-fg-middle-inverse); height:auto; }
.lp-editorial #philosophy .card-title { grid-column:1; grid-row:2; font-size:var(--text-2xl); line-height:var(--leading-2xl); }
.lp-editorial #philosophy .card-text { grid-column:2; grid-row:1 / 3; font-size:var(--text-base); line-height:var(--leading-base); }
.lp-editorial #philosophy .card-ref { grid-column:2; border:0; padding:0; margin:0; line-height:var(--leading-sm); }
.lp-editorial #philosophy .quote { max-width:none !important; border:0; background:none; text-align:left; padding:var(--space-8) 0 0; }
.lp-editorial #philosophy .quote p { font-size:clamp(var(--text-xl),3vw,var(--text-2xl)); line-height:var(--leading-2xl); }
.lp-editorial #flow { background:var(--color-editorial-paper); }
.lp-editorial #flow .card { background:none; border:0; padding:0; }
.lp-editorial #company .learning-visual { background:var(--color-editorial-paper); }
.lp-editorial #contact { background:var(--color-page-green); color:var(--color-fg-high); }
.lp-editorial #contact .section-head .lead { color:var(--color-fg-middle); }
.lp-editorial #contact .typo-eyebrow { color:var(--color-fg-brand); }
.lp-editorial #contact .callout-inverse { background:none; color:var(--color-fg-low); border:0; }
@media (max-width:960px) {
 .lp-editorial .hero-grid { grid-template-columns:1fr; }
 .lp-editorial .hero-shots { max-width:var(--editorial-lead-width); width:100%; margin-inline:auto; }
 .lp-editorial #design .editorial-columns { grid-template-columns:1fr; gap:var(--space-12); }
}
@media (max-width:860px) {
 .lp-editorial .section { padding-block:var(--space-16); }
 .lp-editorial .hero-tints .card + .card { border-left:0; border-top:1px solid var(--color-stroke-inverse); }
 .lp-editorial .hero-tints .card { padding:var(--space-4) 0; }
 .lp-editorial #philosophy .card { grid-template-columns:1fr; }
 .lp-editorial #philosophy .card-text, .lp-editorial #philosophy .card-ref { grid-column:1; grid-row:auto; }
 .lp-editorial #textbook .reason-grid { gap:var(--space-6); }
}
@media (max-width:600px) {
 .lp-editorial .hero { padding-block:var(--space-12); }
 .lp-editorial .hero .typo-display { font-size:var(--text-2xl); line-height:1.5; }
 .lp-editorial .hero .catch { font-size:var(--text-sm); }
 .lp-editorial .hero-tints { margin-top:var(--space-8); }
 .lp-editorial .service-concept { padding:var(--space-4); }
 .lp-editorial #target .pkg { padding:var(--space-6); }
 .lp-editorial #philosophy .quote p { font-size:var(--text-xl); line-height:var(--leading-xl); }
}

.lp-editorial #design .section-head .typo-heading { font-size:clamp(var(--text-xl),3vw,var(--text-2xl)); }
.lp-editorial #design .typo-heading .sp { display:block; }

.lp-editorial #philosophy .typo-heading { width:100%; text-wrap:initial; }
.lp-editorial .btn-cta:disabled { background:var(--color-stroke-middle); border-color:var(--color-stroke-middle); color:var(--color-fg-disabled); cursor:not-allowed; }
@media (max-width:600px) { .lp-editorial .hero .typo-display { font-size:clamp(var(--text-xl),8vw,var(--text-2xl)); } }

/* v5.6 GEPPY-informed layout: clean hero, large panels, product rows. */
.lp-geppy .hero { background:var(--color-page); padding-block:var(--space-12) var(--space-16); }
.lp-geppy .hero-grid { grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--space-12); }
.lp-geppy .hero .catch { background:none; padding:0; color:var(--color-fg-high); font-size:var(--text-base); }
.lp-geppy .hero .catch em { color:var(--color-fg-brand); }
.lp-geppy .hero .typo-display { font-size:clamp(var(--text-2xl),4.5vw,var(--text-editorial-hero)); margin-top:var(--space-4); line-height:1.4; }
.lp-geppy .hero .lead { margin-top:var(--space-6); color:var(--color-fg-middle); }
.lp-geppy .service-concept { background:var(--color-page-alt); border-radius:var(--radius-xl); }
.lp-geppy .concept-caption { font-size:var(--text-base); }
.lp-geppy .concept-core { max-width:85%; border-color:var(--color-stroke-middle); }
.lp-geppy .btn { box-shadow:none; border-radius:var(--radius-full); }
.lp-geppy .btn-cta { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-fg-high); box-shadow:none; }
.lp-geppy .btn-cta:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); box-shadow:none; }
.lp-geppy .btn-secondary { background:var(--color-page); color:var(--color-fg-brand); border-color:var(--color-stroke-brand); }
.lp-geppy .btn-secondary:hover { background:var(--color-primary-soft); }
.lp-geppy .btn-cta:disabled { background:var(--color-stroke-middle); border-color:var(--color-stroke-middle); color:var(--color-fg-middle); cursor:not-allowed; }
.lp-geppy .hero-tints { gap:var(--space-4); margin-top:var(--space-12); }
.lp-geppy .hero-tints .card { background:var(--color-primary-soft); border:0; border-radius:var(--radius-md); min-height:0; gap:var(--space-3); padding:var(--space-6); }
.lp-geppy .hero-tints .card .kicker { color:var(--color-fg-brand); }
.lp-geppy .hero-tints .kicker i { background:var(--color-primary); width:var(--space-2); height:var(--space-2); }
.lp-geppy .hero-tints .card-title { font-size:var(--text-base); line-height:var(--leading-base); }
.lp-geppy .section { padding-block:var(--space-24); }
.lp-geppy .section-head { text-align:left; align-items:flex-start; gap:var(--space-4); }
.lp-geppy .section-head.center { text-align:left; align-items:flex-start; }
.lp-geppy .section-head .typo-heading { font-size:clamp(var(--text-xl),3vw,var(--text-2xl)); text-wrap:initial; }
.lp-geppy .section-head .lead { color:var(--color-fg-middle); max-width:var(--editorial-lead-width); }
.lp-geppy .section-marker { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:var(--font-weight-bold); color:var(--color-fg-high); }
.lp-geppy .section-marker::before { content:''; width:var(--space-2); height:var(--space-2); background:var(--color-primary); box-shadow:0 0 0 var(--space-1) var(--color-primary-soft); border-radius:var(--radius-full); }
.lp-geppy .section-word { font-family:var(--font-display-en); font-weight:var(--font-weight-bold); font-size:clamp(var(--text-2xl),5vw,var(--section-word-size)); line-height:1.15; letter-spacing:var(--tracking-tight); color:var(--color-fg-high); }
.lp-geppy .typo-eyebrow { color:var(--color-fg-brand); }
.lp-geppy #why { background:var(--color-page); }
.lp-geppy #why .card { border:0; border-top:1px solid var(--color-stroke-middle); border-radius:0; padding:var(--space-6) 0; background:none; }
.lp-geppy #why .badge { background:none; color:var(--color-fg-brand); padding:0; }
.lp-geppy #why > .container > p { text-align:left; }
.lp-geppy #textbook, .lp-geppy #delivery, .lp-geppy #flow { background:var(--color-page); padding-inline:var(--space-6); }
.lp-geppy #textbook > .container, .lp-geppy #delivery > .container, .lp-geppy #flow > .container-narrow { background:var(--color-panel); border-radius:var(--radius-xl); padding:var(--space-16) var(--space-12); }
.lp-geppy #textbook { padding-block:0 var(--space-16); }
.lp-geppy #textbook .reason { border:0; border-top:1px solid var(--color-stroke-middle); border-radius:0; background:none; padding:var(--space-8) 0 0; box-shadow:none; }
.lp-geppy #textbook .reason > .pill { position:static; transform:none; background:none; color:var(--color-fg-brand); border:0; padding:0; align-self:flex-start; box-shadow:none; }
.lp-geppy #textbook .reason > h3 { text-align:left; }
.lp-geppy #textbook .reason-grid { gap:var(--space-12); }
.lp-geppy .learning-visual { background:var(--color-primary-soft); border-radius:var(--radius-md); }
.lp-geppy .topic-map strong, .lp-geppy .learning-stages li:last-child { background:var(--color-primary); color:var(--color-page); }
.lp-geppy .note-box { background:var(--color-page); border:1px solid var(--color-stroke-middle); }
.lp-geppy .card-green { background:var(--color-primary-soft); }
.lp-geppy .cta-band { background:var(--color-primary-soft); color:var(--color-fg-high); }
.lp-geppy .cta-band .kicker::before, .lp-geppy .cta-band .kicker::after { content:none; }
.lp-geppy .cta-band .btn-secondary { color:var(--color-fg-brand); background:var(--color-page); border-color:var(--color-stroke-brand); }
.lp-geppy .resource-cover { background:var(--color-primary); box-shadow:none; }
.lp-geppy .resource-cover small { color:var(--color-page); }
.lp-geppy #target { background:var(--color-page); }
.lp-geppy .target-card { background:var(--color-page); border:1px solid var(--color-stroke-middle); border-radius:var(--radius-md); }
.lp-geppy .target-card .pill-outline { border-color:var(--color-stroke-middle); }
.lp-geppy #instructor { border-color:var(--color-stroke-middle); }
.lp-geppy #delivery { padding-top:0; }
.lp-geppy .service-rows { display:flex; flex-direction:column; gap:var(--space-16); }
.lp-geppy .service-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-12); align-items:center; padding:0 !important; border:0; border-radius:0; background:none; }
.lp-geppy .service-row .service-copy { padding:0 !important; gap:var(--space-4); }
.lp-geppy .service-row .card-title { font-size:var(--text-2xl); line-height:var(--leading-2xl); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-stroke-middle); }
.lp-geppy .service-row .card-text { font-size:var(--text-base); line-height:var(--leading-base); }
.lp-geppy .illustration.diagram { background:var(--color-primary-soft); border-radius:var(--radius-md); }
.lp-geppy .illustration.diagram figcaption { color:var(--color-fg-brand); background:var(--color-page); }
.lp-geppy .roadmap .card { box-shadow:none; border-color:var(--color-stroke-middle); }
.lp-geppy .roadmap .card-current { background:var(--color-primary-soft); border-color:var(--color-stroke-brand); }
.lp-geppy #design { background:var(--color-page); }
.lp-geppy #design .editorial-columns { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-16); }
.lp-geppy #design .grid-2 { grid-template-columns:1fr; gap:0; }
.lp-geppy #design .policy-card { background:none; }
.lp-geppy #design .policy-card .icon { display:none; }
.lp-geppy #design .policy-card:first-child { border-top:0; padding-top:0; }
.lp-geppy #design .typo-heading .sp { display:block; }
.lp-geppy #philosophy { background:var(--color-page-alt); color:var(--color-fg-high); }
.lp-geppy #philosophy .grid-3 { grid-template-columns:1fr; gap:0; }
.lp-geppy #philosophy .card { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:var(--space-12); border:0; border-top:1px solid var(--color-stroke-middle); border-radius:0; background:none; color:var(--color-fg-high); padding:var(--space-8) 0; }
.lp-geppy #philosophy .badge { grid-column:1; background:none; color:var(--color-fg-brand); padding:0; }
.lp-geppy #philosophy .card-title { grid-column:1; grid-row:2; font-size:var(--text-xl); }
.lp-geppy #philosophy .card-text { grid-column:2; grid-row:1 / 3; color:var(--color-fg-middle); font-size:var(--text-base); line-height:var(--leading-base); }
.lp-geppy #philosophy .card-ref { grid-column:2; border:0; padding:0; color:var(--color-fg-low); line-height:var(--leading-sm); }
.lp-geppy #philosophy .philosophy-note { color:var(--color-fg-middle); border-color:var(--color-stroke-middle); }
.lp-geppy #philosophy .text-inverse { color:var(--color-fg-brand); }
.lp-geppy #philosophy .quote { color:var(--color-fg-high); background:none; border-color:var(--color-stroke-brand); }
.lp-geppy #flow { padding-top:var(--space-16); }
.lp-geppy #flow .card { background:none; border:0; padding:0; }
.lp-geppy #spec { background:var(--color-page); }
.lp-geppy #contact { background:var(--color-primary-soft); color:var(--color-fg-high); }
.lp-geppy #contact .section-head .lead { color:var(--color-fg-middle); }
.lp-geppy #contact .callout-inverse { background:none; color:var(--color-fg-middle); border-color:var(--color-stroke-middle); }
.lp-geppy .rough, .lp-geppy .ann { background:var(--color-page-alt); border-color:var(--color-stroke-middle); color:var(--color-fg-low); }
.lp-geppy .rough b { background:var(--color-fg-middle); }
.lp-geppy .req { color:var(--color-fg-brand); }
.lp-geppy .badge-brand { color:var(--color-fg-brand); }
.lp-geppy .steps .no { background:var(--color-primary); color:var(--color-fg-high); }
@media (max-width:960px) { .lp-geppy .hero-grid, .lp-geppy #design .editorial-columns { grid-template-columns:1fr; gap:var(--space-12); } .lp-geppy .hero-shots { max-width:var(--editorial-lead-width); width:100%; margin-inline:auto; } }
@media (max-width:860px) {
 .lp-geppy .section { padding-block:var(--space-16); }
 .lp-geppy .service-row { grid-template-columns:1fr; gap:var(--space-6); }
 .lp-geppy #philosophy .card { grid-template-columns:1fr; }
 .lp-geppy #philosophy .card-text, .lp-geppy #philosophy .card-ref { grid-column:1; grid-row:auto; }
 .lp-geppy #textbook .reason-grid { gap:var(--space-6); }
}
@media (max-width:600px) {
 .lp-geppy .hero { padding-block:var(--space-8); }
 .lp-geppy .hero .typo-display { font-size:clamp(var(--text-xl),8vw,var(--text-2xl)); }
 .lp-geppy .hero .catch { font-size:var(--text-sm); }
 .lp-geppy #textbook, .lp-geppy #delivery, .lp-geppy #flow { padding-inline:var(--space-3); }
 .lp-geppy #textbook > .container, .lp-geppy #delivery > .container, .lp-geppy #flow > .container-narrow { padding:var(--space-12) var(--space-4); border-radius:var(--radius-md); }
 .lp-geppy .service-row .card-title { font-size:var(--text-xl); line-height:var(--leading-xl); }
 .lp-geppy .section-word { font-size:var(--text-2xl); }
 .lp-geppy .hero-tints { margin-top:var(--space-8); }
}

.lp-geppy #textbook .reason-grid > figure { order:2; }
.lp-geppy #textbook .reason-grid > .stack { order:1; }
.lp-geppy .callout-warning { border-color:var(--color-stroke-middle); color:var(--color-fg-middle); background:var(--color-page-alt); }
.lp-geppy .badge-dark { background:var(--color-fg-high); }

/* v5.7: neutral art-direction placeholders, no illustrations. */
.lp-geppy .image-slot { margin:0; background:var(--color-primary-soft); border-radius:var(--radius-md); aspect-ratio:3 / 2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); padding:var(--space-8); text-align:center; color:var(--color-fg-middle); }
.lp-geppy .image-slot strong { font-size:var(--text-base); line-height:var(--leading-base); font-weight:var(--font-weight-medium); }
.lp-geppy .image-slot figcaption { font-size:var(--text-sm); line-height:var(--leading-sm); max-width:var(--editorial-lead-width); }
.lp-geppy .image-slot .slot-label { font-size:var(--text-xs); line-height:var(--leading-xs); color:var(--color-fg-low); letter-spacing:var(--tracking-wide); }
.lp-geppy .image-slot-small { display:flex; align-items:center; justify-content:center; min-height:var(--space-16); padding:var(--space-3); background:var(--color-primary-soft); border-radius:var(--radius-sm); color:var(--color-fg-low); font-size:var(--text-xs); line-height:var(--leading-xs); text-align:center; }
.lp-geppy .target-card .image-slot-small { width:100%; margin-bottom:var(--space-3); }
.lp-geppy .icon-tile .image-slot-small { width:100%; }
.lp-geppy .resource-summary .image-slot { aspect-ratio:3 / 4; padding:var(--space-4); }
@media (max-width:600px) { .lp-geppy .image-slot { padding:var(--space-6); } .lp-geppy .resource-summary .image-slot { aspect-ratio:3 / 2; } }

/* v5.7.1: fresh green on large display text; readable ink for smaller labels. */
.lp-geppy .hero .em-brand { color:var(--color-primary); }

/* v5.7.2: supplied primary / secondary button reference. */
.lp-geppy .btn { --lp-button-height:3rem; height:var(--lp-button-height); border-radius:calc(var(--lp-button-height) * .355); }
.lp-geppy .btn-cta { --lp-button-height:3.5rem; }
.lp-geppy .btn-lg { --lp-button-height:3.5rem; }
.lp-geppy .btn-xl { --lp-button-height:4rem; }
.lp-geppy .site-header .btn { --lp-button-height:2.5rem; }
@media (max-width:600px) { .lp-geppy .site-header .btn { --lp-button-height:2.25rem; } }
.lp-geppy .btn-cta, .lp-geppy .btn-primary { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-page); }
.lp-geppy .btn-cta:hover, .lp-geppy .btn-primary:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.lp-geppy .btn-secondary, .lp-geppy .cta-band .btn-secondary { background:var(--color-page); color:var(--color-primary); border-color:var(--color-primary); }
.lp-geppy .btn-secondary:hover, .lp-geppy .cta-band .btn-secondary:hover { background:var(--color-primary-soft); }
.lp-geppy .btn-secondary.btn-xl { height:4rem; font-size:var(--text-lg); padding-inline:var(--space-12); }
.lp-geppy .btn-cta:active, .lp-geppy .btn-primary:active { box-shadow:none; transform:none; }
.lp-geppy .btn-cta:disabled { background:var(--color-stroke-middle); border-color:var(--color-stroke-middle); color:var(--color-fg-middle); }

/* v5.8: reading rhythm — open white sections, quiet panels, strong green CTAs. */
.lp-geppy #why { padding-block:var(--space-16) var(--space-24); }
.lp-geppy #why .section-head { max-width:48rem; margin-inline:auto; text-align:center; align-items:center; margin-bottom:var(--space-12); }
.lp-geppy #why > .container > p { text-align:center; margin-top:var(--space-8); }
.lp-geppy #textbook .section-head { margin-bottom:var(--space-12); }
.lp-geppy #textbook .reason { padding-top:var(--space-12); margin-top:var(--space-12); }
.lp-geppy .cta-band { background:var(--color-primary); color:var(--color-page); padding-block:var(--space-16); }
.lp-geppy .cta-band .typo-heading { color:var(--color-page); font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.5; margin-top:var(--space-4); }
.lp-geppy .cta-panel { background:var(--color-page); color:var(--color-fg-high); border-radius:var(--radius-xl); padding:var(--space-8) var(--space-12); max-width:54rem; margin:var(--space-8) auto 0; }
.lp-geppy .cta-panel .resource-summary { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:var(--space-8); }
.lp-geppy .cta-panel .image-slot { max-height:16rem; width:100%; }
.lp-geppy .cta-panel .actions { margin-top:var(--space-8); padding-top:var(--space-8); border-top:1px solid var(--color-stroke-middle); }
.lp-geppy #target .section-head { max-width:48rem; margin-inline:auto; align-items:center; text-align:center; }
.lp-geppy #delivery > .container { background:var(--color-page); padding-block:var(--space-8); }
.lp-geppy #delivery .service-rows { gap:var(--space-16); }
.lp-geppy #design { padding-top:var(--space-12); }
.lp-geppy #philosophy { background:var(--color-primary-soft); }
.lp-geppy #philosophy .section-head { max-width:48rem; margin-inline:auto; margin-bottom:var(--space-12); align-items:center; text-align:center; }
.lp-geppy #philosophy .quote { border:0; text-align:center; font-size:var(--text-xl); }
.lp-geppy #flow { padding-bottom:var(--space-12); }
.lp-geppy #spec { padding-top:var(--space-12); }
.lp-geppy #faq { background:var(--color-page-alt); }
.lp-geppy #company { background:var(--color-page); }
.lp-geppy #contact { background:var(--color-primary); padding-block:var(--space-16); }
.lp-geppy #contact .section-head { max-width:44rem; margin-inline:auto; align-items:center; text-align:center; margin-bottom:var(--space-8); }
.lp-geppy #contact .section-head :is(.section-marker,.section-word,.typo-heading,.lead) { color:var(--color-page); }
.lp-geppy #contact .section-marker::before { background:var(--color-page); box-shadow:none; }
.lp-geppy #contact .form-card { border-radius:var(--radius-xl); padding:var(--space-12); }
.lp-geppy #contact .callout-inverse { background:var(--color-page); color:var(--color-fg-middle); border:0; }
@media (min-width:861px) {
 .lp-geppy .service-row:nth-child(even) .service-copy { grid-column:2; grid-row:1; }
 .lp-geppy .service-row:nth-child(even) > figure { grid-column:1; grid-row:1; }
}
@media (max-width:600px) {
 .lp-geppy #why { padding-block:var(--space-12) var(--space-16); }
 .lp-geppy #textbook .reason { margin-top:var(--space-8); padding-top:var(--space-8); }
 .lp-geppy .cta-band, .lp-geppy #contact { padding-block:var(--space-12); }
 .lp-geppy .cta-panel { padding:var(--space-6); border-radius:var(--radius-md); }
 .lp-geppy .cta-panel .resource-summary { grid-template-columns:1fr; gap:var(--space-6); }
 .lp-geppy .cta-panel .image-slot { aspect-ratio:3 / 2; max-height:none; }
 .lp-geppy .cta-panel .actions { gap:var(--space-3); padding-top:var(--space-6); margin-top:var(--space-6); }
 .lp-geppy .cta-panel .actions .btn { width:100%; padding-inline:var(--space-4); }
 .lp-geppy #delivery > .container { padding-top:0; padding-bottom:var(--space-8); }
 .lp-geppy #delivery .service-rows { gap:var(--space-12); }
 .lp-geppy #contact .form-card { padding:var(--space-6); border-radius:var(--radius-md); }
}

/* v5.8.1: small English eyebrow, prominent Japanese heading. */
.lp-geppy .section-marker, .lp-geppy .typo-eyebrow, .lp-geppy .cta-band > .container > .kicker {
 font-family:var(--font-display-en); font-size:var(--text-sm); line-height:1.5;
 font-weight:var(--font-weight-bold); letter-spacing:.08em; text-transform:uppercase;
}

/* v5.8.2: plain section eyebrows without decorative dots. */
.lp-geppy .section-marker::before { content:none; }

/* v5.8.3: one size for all Japanese section headings. */
.lp-geppy { --lp-section-heading-size:clamp(var(--text-xl),3vw,var(--text-2xl)); }
.lp-geppy h2.typo-heading,
.lp-geppy .section-head .typo-heading,
.lp-geppy .cta-band .typo-heading {
 font-size:var(--lp-section-heading-size); line-height:1.5;
 font-weight:var(--font-weight-black); letter-spacing:var(--tracking-tight);
}

/* v5.8.4: full-width section backgrounds, using the existing palette only. */
.lp-geppy #why, .lp-geppy #spec, .lp-geppy #company { background:var(--color-primary-soft); }
.lp-geppy #textbook, .lp-geppy #target, .lp-geppy #design,
.lp-geppy #flow, .lp-geppy #faq { background:var(--color-page); }
.lp-geppy #delivery, .lp-geppy #philosophy { background:var(--color-primary-soft); }
.lp-geppy #textbook > .container, .lp-geppy #delivery > .container,
.lp-geppy #flow > .container-narrow { background:transparent; }
.lp-geppy #delivery { padding-top:var(--space-16); }
.lp-geppy #delivery .image-slot { background:var(--color-page); }
.lp-geppy #design, .lp-geppy #spec { padding-top:var(--space-24); }
.lp-geppy #flow { padding-bottom:var(--space-16); }
@media (max-width:860px) {
 .lp-geppy #delivery, .lp-geppy #design, .lp-geppy #spec { padding-top:var(--space-16); }
}

/* v5.8.5: align Flow and FAQ content edges at every viewport. */
.lp-geppy #flow, .lp-geppy #faq { padding-inline:0; }
.lp-geppy #flow > .container-narrow, .lp-geppy #faq > .container-narrow {
 max-width:var(--container-max); padding-inline:var(--gutter); margin-inline:auto;
}

/* v5.8.8: green English eyebrows; Japanese headings retain their original ink. */
.lp-geppy h2.typo-heading { color:var(--color-fg-high); }
.lp-geppy .section-marker, .lp-geppy .typo-eyebrow { color:var(--color-primary); }
.lp-geppy .cta-band h2.typo-heading,
.lp-geppy #contact h2.typo-heading { color:var(--color-page); }

/* v5.8.9: keep each feature heading with its copy; alternate the middle visual. */
.lp-geppy #textbook .reason-grid { margin-top:0; align-items:start; }
.lp-geppy #textbook .feature-heading { display:flex; flex-direction:column; gap:var(--space-2); }
.lp-geppy #textbook .feature-heading h3 { margin:0; }
.lp-geppy #textbook .feature-label { color:var(--color-primary); font-size:var(--text-sm); font-weight:var(--font-weight-bold); }
@media (min-width:861px) {
 .lp-geppy #textbook .reason-alternate .reason-grid > figure { order:1; }
 .lp-geppy #textbook .reason-alternate .reason-grid > .feature-copy { order:2; }
}

/* v5.8.10: supplied reference colors for image placeholders. */
.lp-geppy .image-slot, .lp-geppy .image-slot-small { background:var(--color-image-surface); }
.lp-geppy :is(#delivery, #company) .image-slot { background:var(--color-image-surface-on-tint); }

/* v5.8.11: introduction steps with a photo on the right. */
.lp-geppy #flow .flow-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-12); align-items:start; }
.lp-geppy #flow .flow-photo { aspect-ratio:4 / 5; margin-top:var(--space-4); }
@media (max-width:860px) {
 .lp-geppy #flow .flow-layout { grid-template-columns:1fr; gap:var(--space-6); }
 .lp-geppy #flow .flow-photo { aspect-ratio:3 / 2; margin-top:0; }
}

/* v5.9: stronger, responsive heading hierarchy. */
.lp-geppy { --lp-section-heading-size:46px; --lp-heading-1:60px; --lp-heading-3:28px; --lp-heading-4:20px; }
.lp-geppy .hero h1.typo-display { font-size:var(--lp-heading-1); line-height:1.3; }
.lp-geppy h2.typo-heading, .lp-geppy .section-head .typo-heading,
.lp-geppy .cta-band .typo-heading { line-height:1.4; }
.lp-geppy h3.card-title, .lp-geppy h3.typo-xl,
.lp-geppy .hero-tints h3.card-title, .lp-geppy .service-row h3.card-title,
.lp-geppy #philosophy h3.card-title { font-size:var(--lp-heading-3); line-height:1.5; }
.lp-geppy .steps li h4 { font-size:var(--lp-heading-4); line-height:1.5; }
@media (min-width:601px) and (max-width:960px) {
 .lp-geppy { --lp-heading-1:52px; --lp-section-heading-size:38px; --lp-heading-3:26px; }
}
@media (max-width:600px) {
 .lp-geppy { --lp-heading-1:clamp(30px,8.7vw,36px); --lp-section-heading-size:clamp(24px,7.2vw,30px); --lp-heading-3:22px; --lp-heading-4:18px; }
}

/* v5.9.1: centered section headings and English labels. */
.lp-geppy h2.typo-heading { text-align:center; width:100%; }
.lp-geppy .section-head, .lp-geppy .section-head.center { text-align:center; align-items:center; }
.lp-geppy .section-head .lead { margin-inline:auto; }
.lp-geppy #design .editorial-columns { display:block; }
.lp-geppy #design .section-head { margin-bottom:var(--space-12); }
.lp-geppy #design .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8) var(--space-12); }
.lp-geppy #design .policy-card { margin:0; padding-top:var(--space-6); border-top:1px solid var(--color-stroke-middle); }
@media (max-width:860px) {
 .lp-geppy #design .grid-2 { grid-template-columns:1fr; gap:var(--space-6); }
}

/* v6.0: consistent content width, section spacing and body typography. */
.lp-geppy { --lp-section-space:96px; }
.lp-geppy :is(#why,#textbook,#target,#delivery,#design,#philosophy,#flow,#spec,#faq,#company) {
 padding:var(--lp-section-space) 0;
}
.lp-geppy :is(#why,#textbook,#target,#delivery,#design,#philosophy,#flow,#spec,#faq,#company) > :is(.container,.container-narrow) {
 max-width:var(--container-max); padding:0 var(--gutter); margin-inline:auto;
}
.lp-geppy :is(#why,#textbook,#target,#delivery,#design,#philosophy,#flow,#spec,#faq,#company) .section-head {
 margin-bottom:var(--space-12); gap:var(--space-4);
}
.lp-geppy .card-text, .lp-geppy .note-box, .lp-geppy .faq-body,
.lp-geppy .steps li p, .lp-geppy .service-row .card-text,
.lp-geppy #philosophy .card-text, .lp-geppy .policy-card .card-text {
 font-size:var(--text-base); line-height:var(--leading-base);
}
.lp-geppy #design .policy-card:first-child { border-top:1px solid var(--color-stroke-middle); padding-top:var(--space-6); }
.lp-geppy #company .company-grid { border:0; padding:0; background:none; gap:var(--space-12); }
.lp-geppy #textbook .section-head + .reason { margin-top:0; }
.lp-geppy .note-box { display:block; }
.lp-geppy .section-head .lead { text-wrap:pretty; }
@media (max-width:860px) {
 .lp-geppy { --lp-section-space:64px; }
 .lp-geppy :is(#why,#textbook,#target,#delivery,#design,#philosophy,#flow,#spec,#faq,#company) .section-head { margin-bottom:var(--space-8); }
 .lp-geppy #company .company-grid { gap:var(--space-6); }
}

/* v6.0.1: compact hero navigation cards, separate from content H3s. */
.lp-geppy .hero-tints .card { justify-content:flex-start; gap:var(--space-3); }
.lp-geppy .hero-tints h3.card-title { font-size:18px; line-height:1.6; }

/* v6.0.2: concise, slightly larger hero catchline. */
.lp-geppy .hero .catch { font-size:20px; line-height:1.6; }
@media (max-width:600px) { .lp-geppy .hero .catch { font-size:16px; } }

/* v6.0.5: use whitespace instead of decorative separator lines. */
.lp-geppy #why .card,
.lp-geppy #textbook .reason,
.lp-geppy #design .policy-card,
.lp-geppy #design .policy-card:first-child,
.lp-geppy #philosophy .card,
.lp-geppy #philosophy .philosophy-note,
.lp-geppy .service-row .card-title,
.lp-geppy .cta-panel .actions { border:0; }
.lp-geppy .note-box { border:0; background:var(--color-image-surface); }
.lp-geppy .service-row .card-title { padding-bottom:0; }

/* v6.0.6: simple white step numbers. */
.lp-geppy #flow .steps .no { color:var(--color-page); }
.lp-geppy #flow .steps .no::before { content:counter(step); }

/* v6.0.7: three contextual photo placeholders for Why now. */
.lp-geppy #why .why-photo { background:var(--color-image-surface-on-tint); width:100%; aspect-ratio:3 / 2; padding:var(--space-6); margin-bottom:var(--space-2); }
.lp-geppy #why .why-photo figcaption { font-size:var(--text-sm); line-height:var(--leading-sm); }

/* v6.0.8: audience photo slots share the standard 3:2 image ratio. */
.lp-geppy .target-card .image-slot-small { aspect-ratio:3 / 2; min-height:0; width:100%; flex-shrink:0; font-size:var(--text-sm); line-height:var(--leading-sm); }

/* v6.0.9: distinguish the instructor package from the learner cards. */
.lp-geppy #instructor { background:var(--color-primary-soft); border:0; }
.lp-geppy #instructor .badge-brand { background:var(--color-page); }
.lp-geppy #instructor .icon-tile { background:var(--color-page); }
.lp-geppy #instructor .image-slot-small { background:var(--color-image-surface-on-tint); }

/* v6.1: resource visual left, explanation and actions right. */
.lp-geppy .cta-panel.resource-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:none; padding:0; overflow:hidden; border-radius:var(--radius-md); text-align:left; }
.lp-geppy .resource-split .resource-visual { width:100%; height:100%; max-height:none; aspect-ratio:auto; min-height:360px; border-radius:0; background:var(--color-image-surface); padding:var(--space-8); }
.lp-geppy .resource-copy { padding:var(--space-12) var(--space-8); align-self:center; }
.lp-geppy .resource-copy > .typo-lg { font-weight:var(--font-weight-bold); }
.lp-geppy .resource-copy .resource-list { margin-block:var(--space-6); gap:var(--space-4); }
.lp-geppy .resource-copy .actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); padding:var(--space-4); margin-top:var(--space-6); background:var(--color-primary-soft); border-radius:var(--radius-sm); }
.lp-geppy .resource-copy .actions .btn { width:100%; padding-inline:var(--space-3); font-size:18px; }
@media (max-width:860px) {
 .lp-geppy .cta-panel.resource-split { grid-template-columns:1fr; }
 .lp-geppy .resource-split .resource-visual { min-height:0; height:auto; aspect-ratio:3 / 2; }
 .lp-geppy .resource-copy { padding:var(--space-8) var(--space-6); }
}
@media (max-width:600px) {
 .lp-geppy .resource-copy .actions { grid-template-columns:1fr; }
}

/* v6.1.1: one centered action in the resource panel. */
.lp-geppy .resource-copy .actions { grid-template-columns:minmax(0,320px); justify-content:center; }

/* v6.2.1: alternate section backgrounds in the revised narrative order. */
.lp-geppy :is(#why,#design,#delivery,#flow,#faq) { background:var(--color-primary-soft); }
.lp-geppy :is(#textbook,#target,#philosophy,#spec,#company) { background:var(--color-page); }
.lp-geppy #flow .flow-photo { background:var(--color-image-surface-on-tint); }
.lp-geppy #company .image-slot { background:var(--color-image-surface); }

/* v6.3 — 統合セクション：既存テーマのトークンで階層を分ける */
.lp-geppy.lp-merged #main > .section { background:var(--color-page); }
.lp-geppy.lp-merged #main > .section-green { background:var(--color-primary-soft); }
.lp-geppy.lp-merged #main > .section-alt { background:var(--color-page-alt); }
.lp-geppy.lp-merged #main > .contact { background:var(--color-primary); }
.lp-merged .merged-block { margin-top:var(--space-16); }
.lp-merged .subsection-head { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; margin-bottom:var(--space-8); }
.lp-merged .subsection-title { font-size:var(--lp-heading-3); line-height:var(--leading-xl); margin:0; color:var(--color-fg-high); }
.lp-merged .subsection-head .lead { margin:0; color:var(--color-fg-middle); }
.lp-merged .company-band { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:center; gap:var(--space-8); padding:var(--space-8); margin-top:var(--space-12); background:var(--color-page); border-radius:var(--radius-md); }
.lp-merged .company-band .body { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.lp-merged .company-band .subsection-head { align-items:flex-start; text-align:left; margin:0; }
.lp-merged .company-band .image-slot { min-height:0; aspect-ratio:3 / 2; }
.lp-merged .merged-philosophy { background:var(--color-primary-soft); border-radius:var(--radius-md); padding:var(--space-8); }
.lp-merged .merged-philosophy .card { background:var(--color-page); color:var(--color-fg-high); border:0; }
.lp-merged .merged-philosophy .card-text { color:var(--color-fg-middle); }
.lp-merged .merged-philosophy .badge { background:none; color:var(--color-primary); padding:0; }
.lp-merged .merged-philosophy .card-ref { color:var(--color-fg-low); border:0; }
.lp-merged .merged-philosophy .quote { background:none; color:var(--color-fg-high); border:0; text-align:center; }
.lp-geppy.lp-merged #delivery #instructor { background:var(--color-page); }
.lp-geppy.lp-merged #delivery #instructor .icon-tile { background:var(--color-primary-soft); }
.lp-merged .merged-flow .flow-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-12); align-items:start; }
.lp-merged .merged-flow .card { background:none; border:0; padding:0; }
.lp-merged .merged-flow .flow-photo { aspect-ratio:4 / 5; margin-top:var(--space-4); }
.lp-merged .merged-flow .steps .no { color:var(--color-page); }
.lp-merged .merged-flow .steps .no::before { content:counter(step); }
.lp-merged .merged-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-12); }
.lp-geppy.lp-merged #contact .resource-split { margin-bottom:var(--space-12); background:var(--color-page); color:var(--color-fg-high); }
@media (max-width: 860px) {
 .lp-merged .company-band, .lp-merged .merged-flow .flow-layout { grid-template-columns:1fr; gap:var(--space-6); }
 .lp-merged .merged-flow .flow-photo { aspect-ratio:3 / 2; margin-top:0; }
}
@media (max-width: 600px) {
 .lp-merged .merged-block { margin-top:var(--space-12); }
 .lp-merged .company-band, .lp-merged .merged-philosophy { padding:var(--space-6); }
 .lp-merged .merged-actions .btn { width:100%; }
}
.lp-geppy.lp-merged #contact .resource-copy .text-low { color:var(--color-fg-low); }

/* v6.3 — 提供形態を白い3列カードで比較 */
.lp-geppy.lp-merged #delivery .service-rows { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.lp-geppy.lp-merged #delivery .service-row { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--space-6); padding:var(--space-6) !important; border-radius:var(--radius-md); background:var(--color-page); }
.lp-geppy.lp-merged #delivery .service-row > .image-slot { order:-1; width:100%; min-height:0; aspect-ratio:3 / 2; background:var(--color-image-surface); padding:var(--space-4); }
.lp-geppy.lp-merged #delivery .service-row .service-copy { gap:var(--space-3); }
.lp-geppy.lp-merged #delivery .service-row .card-title { font-size:var(--lp-heading-4); line-height:var(--leading-xl); }
@media (max-width: 860px) {
 .lp-geppy.lp-merged #delivery .service-rows { grid-template-columns:1fr; }
}

/* 派生パッケージは3つの提供形態を支える補足帯として区別 */
.lp-geppy.lp-merged #delivery #instructor { background:var(--color-brand-green-100); margin-top:var(--space-16); border-radius:var(--radius-md); }
.lp-geppy.lp-merged #delivery #instructor .icon-tile { background:var(--color-page); }
.lp-geppy.lp-merged #delivery #instructor .badge-brand { background:var(--color-primary); color:var(--color-page); }
.lp-geppy.lp-merged #delivery #instructor h3 { font-size:var(--lp-heading-4); line-height:var(--leading-xl); }

/* シリーズ展開：提供形態を補足するコンパクトな帯 */
.lp-geppy .series-band { padding:var(--space-8); background:var(--color-page); border-radius:var(--radius-md); }
.lp-geppy .series-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-3) var(--space-6); margin-bottom:var(--space-6); }
.lp-geppy .series-heading .subsection-title { font-size:var(--lp-heading-4); }
.lp-geppy .series-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); }
.lp-geppy .series-item { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); color:var(--color-fg-middle); }
.lp-geppy .series-item .card-title { font-size:var(--text-base); line-height:var(--leading-base); color:var(--color-fg-middle); }
.lp-geppy .series-item .step-label { color:var(--color-fg-low); }
.lp-geppy .series-current .card-title, .lp-geppy .series-current .step-label { color:var(--color-primary); }
@media (max-width: 860px) {
 .lp-geppy .series-track { grid-template-columns:1fr; gap:var(--space-6); }
 .lp-geppy .series-band { padding:var(--space-6); }
}

/* Program全体のH2／内容群のH3／カードのH4 */
.lp-geppy.lp-merged #delivery .program-methods-head { align-items:flex-start; text-align:left; }
.lp-geppy.lp-merged #delivery :is(.program-methods-head .subsection-title,.series-heading .subsection-title,#instructor h3) { font-size:var(--lp-heading-3); line-height:var(--leading-xl); }
.lp-geppy.lp-merged #delivery .series-heading { align-items:flex-start; flex-direction:column; gap:var(--space-3); }

/* v6.3.7 — 背景の役割：白／淡緑の交互、写真枠は共通の薄灰 */
.lp-geppy.lp-merged .image-slot,
.lp-geppy.lp-merged .image-slot-small { background:var(--color-image-surface); }
.lp-geppy.lp-merged #delivery #instructor .image-slot-small { background:var(--color-image-surface); }
.lp-geppy.lp-merged #why .why-photo { background:var(--color-image-surface); }

/* =====================================================================
   v7.0 Craft layer — 「ページそのものを一冊の教科書として組む」
   原稿・配色（主緑1系統）・ボタン形状・9ブロック構成・画像枠13点は変更しない。
   追加するのは：章番号／図番号／蛍光ペン／方眼／爪見出し／動き。
   装飾テキストは CSS の content（読み上げ対象外）か JS で aria-hidden 付きで挿入。
   ===================================================================== */

/* ---- 0. 文字組み：文節で折り返し、行頭の約物・1文字の孤立を防ぐ ---- */
.lp-craft :is(h1,h2,h3,h4,.lead,.typo-xl,.quote p) { word-break:auto-phrase; text-wrap:balance; }
.lp-craft :is(p,li,dd,td,.card-text,.faq-body) { line-break:strict; text-wrap:pretty; }
.lp-craft { hanging-punctuation:allow-end; }

/* ---- 1. 章番号（Chapter）：各セクションのラベルに 01〜08 ---- */
.lp-craft #main { counter-reset:chapter fig; }
.lp-craft #main > section:not(.hero):not(.cta-inline) { counter-increment:chapter; }
.lp-craft #main > section:not(.hero) > .container > .section-head > :is(.section-marker,.typo-eyebrow) {
 display:inline-flex; align-items:center; gap:var(--space-3);
}
.lp-geppy.lp-craft #main > section:not(.hero) > .container > .section-head > :is(.section-marker,.typo-eyebrow)::before {
 content:counter(chapter, decimal-leading-zero) / ""; display:inline-grid; place-items:center;
 min-width:var(--space-8); height:var(--space-6); padding-inline:var(--space-2);
 border:1px solid currentColor; border-radius:var(--radius-full);
 font-size:var(--text-xs); line-height:1; letter-spacing:var(--tracking-wide); background:none; box-shadow:none;
}
.lp-geppy.lp-craft #main > section:not(.hero) > .container > .section-head > :is(.section-marker,.typo-eyebrow)::after {
 content:""; width:var(--space-8); height:1px; background:currentColor; opacity:.5;
}

/* ---- 2. 図番号（Fig.）：13の画像枠に通し番号。教科書の図版の作法 ---- */
.lp-craft .image-slot { counter-increment:fig; position:relative; overflow:hidden; }
.lp-craft .image-slot::before {
 content:"Fig." counter(fig, decimal-leading-zero) / ""; position:absolute; top:var(--space-4); left:var(--space-4);
 font-family:var(--font-display-en); font-weight:var(--font-weight-bold); font-size:var(--text-xs); line-height:var(--leading-xs);
 letter-spacing:var(--tracking-wide); color:var(--color-fg-low);
}
/* トンボ（裁ち落としの目印）を右下に1つ。図版らしさの最小限の記号 */
.lp-craft .image-slot::after {
 content:"" / ""; position:absolute; right:var(--space-4); bottom:var(--space-4); width:var(--space-3); height:var(--space-3);
 border-right:1px solid var(--color-stroke-middle); border-bottom:1px solid var(--color-stroke-middle);
}

/* ---- 3. 蛍光ペン：見出しの緑の語に、読む速度で線が引かれる ---- */
.lp-craft :is(h1,h2) .em-brand,
.lp-craft .em-yellow {
 background-image:linear-gradient(transparent 58%, var(--color-highlighter) 58%, var(--color-highlighter) 88%, transparent 88%);
 background-repeat:no-repeat; background-size:0% 100%; background-position:0 0;
 transition:background-size var(--duration-reveal) var(--ease-out-expo);
 transition-delay:calc(var(--stagger) * 4);
 -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:.04em;
}
.lp-craft .is-in :is(h1,h2) .em-brand, .lp-craft .is-in.em-yellow, .lp-craft .is-in .em-yellow,
.lp-craft :is(h1,h2).is-in .em-brand,
html:not(.js) .lp-craft :is(h1,h2) .em-brand, html:not(.js) .lp-craft .em-yellow { background-size:100% 100%; }

/* ---- 4. ヒーロー：方眼ノートの上に、積み重なった教科書 ---- */
.lp-craft .hero { position:relative; overflow:hidden; isolation:isolate; padding-block:var(--space-16) var(--space-24); }
.lp-craft .hero::before {
 content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
 background-image:
  linear-gradient(var(--color-grid-line) 1px, transparent 1px),
  linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
 background-size:var(--grid-notebook) var(--grid-notebook);
 background-position:center top;
 -webkit-mask-image:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%);
 mask-image:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%);
}
.lp-craft .hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--space-16); }
.lp-craft .hero .catch { display:inline-flex; align-items:center; gap:var(--space-3); }
.lp-craft .hero .catch::before { content:"" / ""; width:var(--space-6); height:2px; background:var(--color-primary); }
.lp-craft .hero h1.typo-display { letter-spacing:-0.035em; line-height:1.24; }
.lp-craft .hero h1 .line { display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.lp-craft .hero h1 .line > span { display:inline-block; }
/* 本の束：画像枠の背後に2枚の紙。画像が入っても成立する額装 */
.lp-craft .hero-shots { position:relative; padding:var(--space-6) var(--space-6) var(--space-8) 0; }
.lp-craft .hero-shots::before, .lp-craft .hero-shots::after {
 content:"" / ""; position:absolute; border-radius:var(--radius-md); border:1px solid var(--color-stroke-middle); background:var(--color-page);
}
.lp-craft .hero-shots::before { inset:var(--space-12) 0 0 var(--space-6); transform:rotate(3deg); }
.lp-craft .hero-shots::after  { inset:var(--space-8) var(--space-3) var(--space-4) var(--space-3); transform:rotate(1.2deg); }
.lp-craft .hero-shots .image-slot { position:relative; z-index:1; aspect-ratio:4 / 5; box-shadow:var(--shadow-card-lift); background:var(--color-image-surface); }
/* 帯：教科書の背表紙をなぞる英字のリボン（JSで aria-hidden 付与） */
/* ヒーロー下の帯：フッターのワードマークと同じ「Install Series」の白抜き英字が、横にゆっくり流れる */
.lp-craft .hero { padding-bottom:0; }
.lp-craft .craft-marquee {
 position:relative; overflow:hidden; white-space:nowrap; pointer-events:none; user-select:none;
 margin-top:var(--space-8); padding-block:var(--space-4) var(--space-8);
 font-family:var(--font-display-en); font-weight:var(--font-display-en-weight); font-size:var(--text-marquee); line-height:1; letter-spacing:-0.05em;
 color:transparent; -webkit-text-stroke:1px var(--color-stroke-high);
}
.lp-craft .craft-marquee-track { display:inline-flex; will-change:transform; }
.lp-craft .craft-marquee-group { display:inline-flex; }
.lp-craft .craft-marquee-item { padding-right:.6em; }
@media (max-width:600px) { .lp-craft .craft-marquee { margin-top:var(--space-6); padding-block:var(--space-2) var(--space-6); } }

/* ---- 5. 特長：大きな白抜き数字。❶❷❸を誌面のリズムに ---- */
.lp-craft #textbook { counter-reset:feature; }
.lp-craft #textbook .reason { counter-increment:feature; position:relative; overflow:visible; }
.lp-craft #textbook .feature-copy { position:relative; }
.lp-craft #textbook .feature-copy::before {
 content:counter(feature, decimal-leading-zero) / ""; display:block; margin-bottom:calc(0px - var(--space-4));
 font-family:var(--font-display-en); font-weight:var(--font-display-en-weight); font-size:var(--text-numeral); line-height:1;
 letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1.5px var(--color-primary);
}
.lp-craft #textbook .reason + .reason { margin-top:var(--space-16); }
.lp-craft #textbook .reason-grid { gap:var(--space-16); align-items:center; }

/* ---- 6. 爪見出し（Thumb index）：辞書の小口の段差のように、現在の章を示す ---- */
.craft-rail { display:none; }
@media (min-width:1280px) {
 .lp-craft .craft-rail {
  display:flex; flex-direction:column; gap:var(--space-1); position:fixed; right:0; top:50%; z-index:40;
  transform:translate(100%, -50%); transition:transform var(--duration-slow) var(--ease-out-expo);
 }
 .lp-craft .craft-rail.is-shown { transform:translate(0, -50%); }
 .lp-craft .craft-rail a {
  display:flex; align-items:center; justify-content:flex-start; gap:var(--space-3);
  height:var(--space-8); width:var(--rail-width); padding-left:var(--space-3); margin-left:auto;
  background:var(--color-page); border:1px solid var(--color-stroke-middle); border-right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  font-family:var(--font-display-en); font-size:var(--text-xs); font-weight:var(--font-weight-bold); color:var(--color-fg-low);
  overflow:hidden; white-space:nowrap;
  transition:width var(--duration-slow) var(--ease-out-expo), background var(--duration-base), color var(--duration-base);
 }
 .lp-craft .craft-rail a span { opacity:0; transition:opacity var(--duration-base); font-family:var(--font-sans); }
 .lp-craft .craft-rail a:is(:hover,:focus-visible,[aria-current="true"]) { width:calc(var(--rail-width) * 3.5); }
 .lp-craft .craft-rail a:is(:hover,:focus-visible,[aria-current="true"]) span { opacity:1; }
 .lp-craft .craft-rail a[aria-current="true"] { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-page); }
}

/* ---- 7. ヘッダー：読み進める間は退き、戻ろうとすると現れる。進捗を細い線で ---- */
.lp-craft .site-header { transition:transform var(--duration-slow) var(--ease-out-expo), background var(--duration-base); }
.lp-craft .site-header.is-hidden { transform:translateY(-100%); }
.lp-craft .site-header::after {
 content:"" / ""; position:absolute; left:0; bottom:-1px; height:var(--progress-height); width:100%;
 background:var(--color-primary); transform-origin:0 50%; transform:scaleX(var(--progress, 0));
}
.lp-craft .nav a { position:relative; }
.lp-craft .nav a::after {
 content:"" / ""; position:absolute; left:0; right:0; bottom:calc(0px - var(--space-1)); height:1px; background:currentColor;
 transform:scaleX(0); transform-origin:100% 50%; transition:transform var(--duration-slow) var(--ease-out-expo);
}
.lp-craft .nav a:is(:hover,[aria-current="true"])::after { transform:scaleX(1); transform-origin:0 50%; }
.lp-craft .nav a[aria-current="true"] { color:var(--color-fg-brand); }

/* ---- 8. 手触り：ボタン・カード・FAQ ---- */
.lp-craft .btn { transition:transform var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo), background var(--duration-base), color var(--duration-base); will-change:transform; }
.lp-craft .btn:is(.btn-cta,.btn-primary):not(:disabled):hover { transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.lp-craft .btn-secondary:hover { transform:translateY(-2px); }
.lp-craft .btn:active { transform:translateY(0); transition-duration:var(--duration-fast); }
.lp-craft .btn .arrow { display:inline-block; transition:transform var(--duration-slow) var(--ease-out-expo); }
.lp-craft .btn:hover .arrow { transform:translateX(var(--space-1)); }
.lp-craft :is(#why .card, #target .card, #delivery .service-row, #instructor .icon-tile) {
 transition:transform var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo);
}
@media (hover:hover) {
 .lp-craft :is(#target .card, #delivery .service-row, #instructor .icon-tile):hover { transform:translateY(calc(0px - var(--space-1))); box-shadow:var(--shadow-card-lift); }
}
.lp-craft .faq { transition:border-color var(--duration-base), box-shadow var(--duration-slow) var(--ease-out-expo); interpolate-size:allow-keywords; }
.lp-craft .faq:hover { border-color:var(--color-stroke-brand); }
.lp-craft .faq[open] { box-shadow:var(--shadow-card-lift); border-color:transparent; }
.lp-craft .faq summary::after { content:"＋" / ""; transition:transform var(--duration-slow) var(--ease-out-expo); }
.lp-craft .faq[open] summary::after { content:"＋" / ""; transform:rotate(135deg); }
.lp-craft .faq::details-content { block-size:0; overflow:clip; transition:block-size var(--duration-slow) var(--ease-out-expo), content-visibility var(--duration-slow) allow-discrete; }
.lp-craft .faq[open]::details-content { block-size:auto; }

/* ---- 9. 導入の流れ：番号をつなぐ線が、読む順に伸びる ---- */
.lp-craft .merged-flow .steps li { position:relative; }
.lp-craft .merged-flow .steps li:not(:last-child)::after {
 content:"" / ""; position:absolute; left:1.5rem; top:calc(var(--space-4) + 3rem); bottom:calc(0px - var(--space-4)); width:1px;
 background:var(--color-primary); transform-origin:50% 0; transform:scaleY(0);
 transition:transform var(--duration-reveal) var(--ease-out-expo); transition-delay:calc(var(--i, 0) * var(--stagger) + 300ms);
}
.lp-craft .merged-flow .steps li.is-in::after, html:not(.js) .lp-craft .merged-flow .steps li::after { transform:scaleY(1); }

/* ---- 10. 引用：思想の結びを、ページで一番静かで大きな声に ---- */
.lp-craft .merged-philosophy .quote p { font-size:var(--lp-heading-3); line-height:1.7; letter-spacing:var(--tracking-tight); }
.lp-craft .merged-philosophy .quote::before {
 content:"" / ""; display:block; width:var(--space-12); height:2px; margin:0 auto var(--space-8); background:var(--color-primary);
}

/* ---- 11. お問い合わせ・フッター：最後のページの大きな署名 ---- */
.lp-craft #contact { position:relative; overflow:hidden; isolation:isolate; }
.lp-craft #contact::before {
 content:"" / ""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.14;
 background-image:linear-gradient(var(--color-page) 1px, transparent 1px), linear-gradient(90deg, var(--color-page) 1px, transparent 1px);
 background-size:var(--grid-notebook) var(--grid-notebook);
 -webkit-mask-image:linear-gradient(to bottom, #000, transparent 60%); mask-image:linear-gradient(to bottom, #000, transparent 60%);
}
.lp-craft .site-footer { position:relative; overflow:hidden; padding-top:var(--space-24); }
.lp-craft .site-footer::before {
 content:"Install Series" / ""; display:block; margin-bottom:var(--space-12);
 font-family:var(--font-display-en); font-weight:var(--font-display-en-weight); font-size:var(--text-mega); line-height:.9; letter-spacing:-0.05em;
 white-space:nowrap; text-align:center; color:transparent; -webkit-text-stroke:1px var(--color-primary); opacity:.7;
 transform:translateY(var(--footer-shift, 0)); transition:transform var(--duration-reveal) var(--ease-out-expo);
}

/* ---- 12. 現れ方（JS有効時のみ隠す。JSなし・動き低減ではすべて最初から表示） ---- */
html.js .lp-craft [data-reveal] {
 opacity:0; transform:translateY(var(--reveal-distance));
 transition:opacity var(--duration-reveal) var(--ease-out-expo), transform var(--duration-reveal) var(--ease-out-expo);
 transition-delay:calc(var(--i, 0) * var(--stagger));
}
html.js .lp-craft [data-reveal="wipe"] {
 opacity:1; transform:none; clip-path:inset(0 0 100% 0 round var(--radius-md));
 transition:clip-path var(--duration-reveal) var(--ease-in-out); transition-delay:calc(var(--i, 0) * var(--stagger));
}
html.js .lp-craft [data-reveal="line"] > span { transform:translateY(105%); transition:transform var(--duration-reveal) var(--ease-out-expo); transition-delay:calc(var(--i, 0) * var(--stagger) + 120ms); }
html.js .lp-craft [data-reveal="line"] { opacity:1; transform:none; }
html.js .lp-craft [data-reveal].is-in { opacity:1; transform:none; }
html.js .lp-craft [data-reveal="wipe"].is-in { clip-path:inset(0 0 0 0 round var(--radius-md)); }
html.js .lp-craft [data-reveal="line"].is-in > span { transform:none; }

/* ---- 13. レスポンシブ ---- */
@media (max-width:960px) {
 .lp-craft .hero-grid { grid-template-columns:1fr; gap:var(--space-12); }
 .lp-craft .hero-shots { max-width:none; margin-inline:0; }
 .lp-craft .hero-shots .image-slot { aspect-ratio:3 / 2; }
 .lp-craft #textbook .reason-grid { gap:var(--space-8); }
}
@media (max-width:600px) {
 .lp-craft .hero { padding-block:var(--space-8) 0; }
 .lp-craft .hero-shots { padding:var(--space-4) var(--space-4) var(--space-6) 0; }
 .lp-craft .hero-shots .image-slot { aspect-ratio:4 / 3; }
 .lp-craft #textbook .feature-copy::before { margin-bottom:calc(0px - var(--space-2)); }
 .lp-craft #textbook .reason + .reason { margin-top:var(--space-12); }
 .lp-craft .site-footer { padding-top:var(--space-16); }
 /* SPの追従CTAは、ファーストビューのボタンが画面から消えてから出す */
}
.lp-craft .sticky-cta { transition:transform var(--duration-slow) var(--ease-out-expo); }
.lp-craft .sticky-cta.is-parked { transform:translateY(110%); }

/* ---- 14. 動きを減らす設定：すべて最終状態で表示し、帯も止める ---- */
@media (prefers-reduced-motion:reduce) {
 html.js .lp-craft [data-reveal], html.js .lp-craft [data-reveal] > span { opacity:1 !important; transform:none !important; clip-path:none !important; }
 .lp-craft :is(h1,h2) .em-brand, .lp-craft .em-yellow { background-size:100% 100%; }
 .lp-craft .merged-flow .steps li::after { transform:scaleY(1); }
 .lp-craft .craft-marquee-track { transform:none !important; }
 .lp-craft .site-header.is-hidden { transform:none; }
}

/* v7.0.1 self-check: 短い強調語は割らない／左揃えのリードは均等割りにしない */
.lp-craft :is(h1,h2) .em-brand { white-space:nowrap; }
.lp-craft .hero .lead { text-wrap:pretty; max-inline-size:var(--measure-lead); }
/* SPの追従CTA分の余白は、本文の外（白）ではなくフッターの内側で確保する */
@media (max-width:860px) {
 .lp-craft.has-sticky { padding-bottom:0; }
 .lp-craft .site-footer { padding-bottom:calc(var(--space-24) + env(safe-area-inset-bottom)); }
}

/* ヒーロー：JSが初期状態を整えるまで描画しない（読み込み時のちらつき防止。3秒で自動解除） */
html.js .lp-craft .hero:not(.is-ready) :is(.hero-body, .hero-shots) { visibility:hidden; }

/* v7.1 — ページ途中の資料CTA帯（#resources）。お問い合わせと同じ主緑＋方眼、白パネル */
.lp-geppy.lp-merged #main > .cta-inline { background:var(--color-primary); padding-block:var(--lp-section-space); position:relative; overflow:hidden; isolation:isolate; }
.lp-craft #resources::before {
 content:"" / ""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.14;
 background-image:linear-gradient(var(--color-page) 1px, transparent 1px), linear-gradient(90deg, var(--color-page) 1px, transparent 1px);
 background-size:var(--grid-notebook) var(--grid-notebook);
}
.lp-geppy #resources .resource-split { margin:0; background:var(--color-page); color:var(--color-fg-high); }
.lp-geppy #resources .resource-copy .actions { grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
@media (max-width:600px) { .lp-geppy #resources .resource-copy .actions { grid-template-columns:1fr; } }
/* ナビ8項目：ロゴを潰さない。狭い幅では間隔を詰め、960px以下はナビを畳む */
.lp-craft .site-header .brand { flex-shrink:0; white-space:nowrap; }
@media (max-width:1100px) { .lp-craft .nav { gap:var(--space-4); } }
@media (max-width:960px) { .lp-craft .nav { display:none; } }

/* v7.2 — ファーストビューのスライド：束の一番上の紙がめくれて、次の紙が現れる */
.lp-craft .hero-shots::before, .lp-craft .hero-shots::after { content:none; }
.lp-craft .hero-slides { position:relative; display:grid; isolation:isolate; counter-increment:fig; }
.lp-craft .hero-slides::before, .lp-craft .hero-slides::after {
 content:"" / ""; position:absolute; z-index:-1; border-radius:var(--radius-md); border:1px solid var(--color-stroke-middle); background:var(--color-page);
}
.lp-craft .hero-slides::before { inset:var(--space-6) calc(0px - var(--space-6)) calc(0px - var(--space-8)) var(--space-6); transform:rotate(3deg); }
.lp-craft .hero-slides::after  { inset:var(--space-2) calc(0px - var(--space-3)) calc(0px - var(--space-4)) var(--space-3); transform:rotate(1.2deg); }
.lp-craft .hero-slide {
 grid-area:1 / 1; counter-increment:none; opacity:0; visibility:hidden; z-index:1;
 transform:translateY(var(--space-3)) rotate(1.2deg) scale(.97); transform-origin:100% 100%;
 transition:opacity var(--duration-reveal) var(--ease-out-expo), transform var(--duration-reveal) var(--ease-out-expo), visibility 0s linear var(--duration-reveal);
}
.lp-craft .hero-slide::before { content:"Fig." counter(fig, decimal-leading-zero) "-" attr(data-sub) / ""; }
.lp-craft .hero-slide.is-active { opacity:1; visibility:visible; transform:none; z-index:2; transition-delay:0s; }
.lp-craft .hero-slide.is-leaving {
 opacity:0; visibility:visible; z-index:3; transform:translate(-6%, calc(0px - var(--space-8))) rotate(-6deg); transform-origin:0 100%;
 transition:transform var(--duration-reveal) var(--ease-out-expo), opacity var(--duration-slow) var(--ease-in-out) calc(var(--duration-reveal) * .3), visibility 0s;
}
html:not(.js) .lp-craft .hero-slide:not(:first-child) { display:none; }

.lp-craft .hero-slides-nav { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-12); position:relative; z-index:2; }
.lp-craft .hero-slides-nav[hidden] { display:none; }
.lp-craft .hero-slides-dots { display:flex; gap:var(--space-2); }
.lp-craft .hero-slides-dots button {
 position:relative; width:var(--space-12); height:var(--space-6); padding:0; border:0; background:none; cursor:pointer;
}
.lp-craft .hero-slides-dots button::before, .lp-craft .hero-slides-dots button::after {
 content:"" / ""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:var(--radius-full);
}
.lp-craft .hero-slides-dots button::before { background:var(--color-stroke-middle); }
.lp-craft .hero-slides-dots button::after { background:var(--color-primary); transform:scaleX(0); transform-origin:0 50%; }
.lp-craft .hero-slides-dots button[aria-current="true"]::after { transform:scaleX(1); }
.lp-craft .hero-slides.is-playing ~ .hero-slides-nav button[aria-current="true"]::after { animation:craft-slide-progress var(--duration-slide) linear both; }
@keyframes craft-slide-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.lp-craft .hero-slides-toggle {
 display:grid; place-items:center; width:var(--space-8); height:var(--space-8); padding:0; cursor:pointer;
 border:1px solid var(--color-stroke-middle); border-radius:var(--radius-full); background:var(--color-page); color:var(--color-fg-middle);
 transition:border-color var(--duration-base), color var(--duration-base);
}
.lp-craft .hero-slides-toggle:hover { border-color:var(--color-stroke-brand); color:var(--color-primary); }
/* 一時停止＝2本線、再生＝三角 */
.lp-craft .hero-slides-toggle span { width:var(--space-2); height:var(--space-3); border-inline:2px solid currentColor; }
.lp-craft .hero-slides-toggle.is-paused span { width:0; height:0; border:0; border-left:var(--space-2) solid currentColor; border-block:6px solid transparent; margin-left:2px; }
@media (prefers-reduced-motion:reduce) { .lp-craft .hero-slide { transition:none; } }

/* v7.2 — 流れが独立セクションになったので、ステップ見出しを h3 に（見た目は従来の h4 と同じ） */
.lp-craft .steps li h3.step-title { font-size:var(--lp-heading-4); line-height:1.5; font-weight:var(--font-weight-bold); margin:0; }


/* =====================================================================
   v7.4 Craft polish（2026-10-15）
   ===================================================================== */

/* A. セクション見出し：一文字ずつ、ピントが合うように現れる */
html.js .lp-craft h2[data-reveal="chars"] { opacity:1; transform:none; }
html.js .lp-craft h2[data-reveal="chars"] .ch {
 opacity:0; filter:blur(var(--space-2));
 transition:opacity var(--duration-slow) var(--ease-out-expo), filter var(--duration-reveal) var(--ease-out-expo);
 transition-delay:calc(var(--ci, 0) * var(--char-stagger));
}
html.js .lp-craft h2[data-reveal="chars"].is-in .ch { opacity:1; filter:none; }

/* B. Why の結び：物語の転換点を、ページで2番目に大きな声に */
.lp-craft #why > .container > p.typo-xl {
 font-size:var(--lp-statement-size); line-height:1.6; font-weight:var(--font-weight-black); letter-spacing:var(--tracking-tight);
 margin-top:var(--space-24); margin-bottom:var(--space-8);
}

/* C. FAQ：Q と A の誌面。分類バッジは右へ退かせ、問いを主役に */
.lp-craft #faq .faq { border-radius:var(--radius-md); padding-inline:var(--space-8); }
.lp-craft #faq .faq + .faq { margin-top:var(--space-4); }
.lp-craft #faq .faq summary {
 gap:var(--space-4); padding-block:var(--space-6); padding-right:var(--space-12);
 font-size:var(--lp-heading-4); line-height:1.6;
}
.lp-craft #faq .faq summary::before {
 content:"Q" / ""; flex:0 0 var(--space-6); font-family:var(--font-display-en); font-weight:var(--font-display-en-weight);
 font-size:var(--text-xl); line-height:1; color:var(--color-primary);
}
.lp-craft #faq .faq summary .badge {
 order:2; margin-left:auto; flex-shrink:0; background:none; color:var(--color-fg-middle);
 border:1px solid var(--color-stroke-middle); border-radius:var(--radius-full); padding-inline:var(--space-3);
}
.lp-craft #faq .faq summary::after {
 content:"＋" / ""; display:grid; place-items:center; top:50%; width:var(--space-8); height:var(--space-8); margin-top:calc(0px - var(--space-4));
 border-radius:var(--radius-full); background:var(--color-primary-soft); color:var(--color-primary); font-size:var(--text-sm);
}
.lp-craft #faq .faq[open] summary::after { background:var(--color-primary); color:var(--color-page); }
.lp-craft #faq .faq-body {
 position:relative; padding:0 var(--space-12) var(--space-8) calc(var(--space-6) + var(--space-4));
 font-size:var(--text-base); line-height:var(--leading-base);
}
.lp-craft #faq .faq-body::before {
 content:"A" / ""; position:absolute; left:0; top:0; font-family:var(--font-display-en); font-weight:var(--font-display-en-weight);
 font-size:var(--text-xl); line-height:1.2; color:var(--color-fg-low);
}
@media (max-width:600px) {
 .lp-craft #faq .faq { padding-inline:var(--space-4); }
 .lp-craft #faq .faq summary { flex-wrap:wrap; font-size:var(--text-base); padding-right:var(--space-12); row-gap:var(--space-2); }
 .lp-craft #faq .faq summary .badge { order:-1; margin-left:0; flex-basis:auto; }
 .lp-craft #faq .faq summary::before { order:-2; }
 .lp-craft #faq .faq summary > :not(.badge) { flex-basis:100%; padding-left:calc(var(--space-6) + var(--space-4)); }
 .lp-craft #faq .faq-body { padding-right:0; }
}

/* D. 仕様表：罫を最小限にした、教科書の奥付のような表 */
.lp-craft #spec .table-wrap { max-width:var(--container-narrow); margin-inline:auto; border-radius:var(--radius-md); background:var(--color-page-alt); padding:var(--space-4) var(--space-8); }
.lp-craft #spec .table { background:none; font-size:var(--text-base); line-height:var(--leading-base); }
.lp-craft #spec .table th, .lp-craft #spec .table td { border:0; border-bottom:1px solid var(--color-stroke-middle); padding:var(--space-6) 0; }
.lp-craft #spec .table tr:last-child :is(th,td) { border-bottom:0; }
.lp-craft #spec .table th { background:none; width:9rem; padding-right:var(--space-6); font-size:var(--text-sm); color:var(--color-fg-middle); }
.lp-craft #spec .table th::before { content:"" / ""; display:inline-block; width:var(--space-2); height:var(--space-2); margin-right:var(--space-3); border-radius:var(--radius-full); background:var(--color-primary); vertical-align:middle; transform:translateY(-1px); }
@media (max-width:600px) {
 .lp-craft #spec .table-wrap { padding:var(--space-2) var(--space-6); }
 .lp-craft #spec .table, .lp-craft #spec .table tbody, .lp-craft #spec .table tr, .lp-craft #spec .table th, .lp-craft #spec .table td { display:block; width:auto; }
 .lp-craft #spec .table th { border-bottom:0; padding:var(--space-6) 0 var(--space-1); }
 .lp-craft #spec .table td { padding:0 0 var(--space-6); }
}

/* E. 学びの設計：POLICY ラベルを章番号と同じチップに */
.lp-craft #design .policy-card .step-label {
 display:inline-flex; align-self:flex-start; align-items:center; height:var(--space-6); padding-inline:var(--space-3);
 border:1px solid currentColor; border-radius:var(--radius-full); font-family:var(--font-display-en); letter-spacing:var(--tracking-wide);
}
.lp-craft #spec .table td { word-break:auto-phrase; }

/* v7.6 — 読み込みの演出は「少し浮き上がりながら、ふわっと現れる」1種類に統一（ユーザー指示：いやらしくない自然な動き） */
html.js .lp-craft [data-reveal] { transition-timing-function:cubic-bezier(.25,.6,.3,1); }
/* ヒーロー見出し：行のせり上がりマスクをやめ、行ごとに静かにフェード */
.lp-craft .hero h1 .line { overflow:visible; }
html.js .lp-craft [data-reveal="line"] > span {
 opacity:0; transform:translateY(.15em);
 transition:opacity var(--duration-reveal) cubic-bezier(.25,.6,.3,1), transform var(--duration-reveal) cubic-bezier(.25,.6,.3,1);
 transition-delay:calc(var(--i, 0) * var(--stagger) + 80ms);
}
html.js .lp-craft [data-reveal="line"].is-in > span { opacity:1; transform:none; }
/* 蛍光ペンは文字が出そろってから、短く */
.lp-craft :is(h1,h2) .em-brand, .lp-craft .em-yellow { transition-duration:var(--duration-slow); transition-delay:calc(var(--stagger) * 5); }
/* 動きは「現れるとき」だけ。隠す瞬間は即時（隠す→出すの二重の動きを防ぐ） */
html.js .lp-craft [data-reveal]:not(.is-in),
html.js .lp-craft [data-reveal="line"]:not(.is-in) > span { transition:none; }
.lp-craft :is(h1,h2):not(.is-in) .em-brand, .lp-craft :not(.is-in) > .em-yellow { transition:none; }

/* v7.7 — FAQ の分類チップを廃止（ユーザー指示）。SP は Q と問いを横並びに */
@media (max-width:600px) {
 .lp-craft #faq .faq summary { flex-wrap:nowrap; align-items:flex-start; }
 .lp-craft #faq .faq summary::before { order:0; line-height:1.4; }
}

/* v7.9 — 会社紹介は「なぜ教育か」の短い説明＋サイトへの導線だけの細い帯（画像なし） */
.lp-merged .company-band.company-brief {
 grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-8);
 padding:var(--space-6) var(--space-8); margin-top:var(--space-12); max-width:var(--container-narrow); margin-inline:auto;
}
.lp-merged .company-brief .body { gap:var(--space-2); }
.lp-merged .company-brief .typo-eyebrow { font-size:var(--text-xs); }
.lp-merged .company-brief .subsection-title { font-size:var(--text-lg); line-height:var(--leading-lg); }
.lp-merged .company-brief .card-text { font-size:var(--text-sm); line-height:var(--leading-sm); color:var(--color-fg-middle); }
.lp-merged .company-brief .btn { white-space:nowrap; }
@media (max-width:860px) {
 .lp-merged .company-band.company-brief { grid-template-columns:1fr; gap:var(--space-4); padding:var(--space-6); }
 .lp-merged .company-brief .btn { justify-self:start; }
}
.lp-merged .company-brief .btn { padding-inline:var(--space-6); }
@media (min-width:861px) { .lp-merged .company-band.company-brief { max-width:52rem; } }

/* v7.10 — 会社紹介の帯に小さな写真（左）。写真｜説明｜ボタン */
.lp-merged .company-band.company-brief { grid-template-columns:9rem minmax(0,1fr) auto; }
.lp-merged .company-brief .company-photo { width:100%; aspect-ratio:4 / 3; min-height:0; border-radius:var(--radius-sm); font-size:var(--text-xs); line-height:var(--leading-xs); background:var(--color-image-surface); }
@media (max-width:860px) {
 .lp-merged .company-band.company-brief { grid-template-columns:7rem minmax(0,1fr); }
 .lp-merged .company-brief .company-photo { align-self:start; }
 .lp-merged .company-brief .btn { grid-column:1 / -1; }
}
@media (max-width:480px) {
 .lp-merged .company-band.company-brief { grid-template-columns:1fr; }
 .lp-merged .company-brief .company-photo { aspect-ratio:3 / 2; }
}
@media (min-width:861px) { .lp-merged .company-band.company-brief { max-width:60rem; } }
@media (max-width:480px) { .lp-merged .company-brief .company-photo { aspect-ratio:5 / 2; } }

/* v7.12 — 途中CTAの見出し：英字ラベル＋「インストールシリーズを、資料で詳しく知る。」 */
.lp-geppy #resources .resource-copy .typo-eyebrow { margin-bottom:var(--space-3); }
.lp-geppy #resources .resource-title {
 font-size:var(--lp-heading-3); line-height:1.5; font-weight:var(--font-weight-black); letter-spacing:var(--tracking-tight);
 color:var(--color-fg-high); text-align:left; word-break:auto-phrase;
}

/* v7.13 — 特長のレイアウトを整理：数字＋見出し＋本文＋補足の1本の流れに */
.lp-craft { --text-numeral: clamp(4rem, 8vw, 7rem); }
/* 「特長❶〜❸」は大数字と重複するため画面では隠す（読み上げには残す） */
.lp-craft #textbook .feature-label {
 position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.lp-craft #textbook .feature-copy::before { margin-bottom:var(--space-4); }
.lp-craft #textbook .feature-copy { gap:var(--space-4); }
.lp-craft #textbook .reason-grid { align-items:start; }
.lp-craft #textbook .reason-grid > figure { margin-top:var(--space-12); }

/* 基礎編／応用編：1枚のパネルに縦並び。ラベル＋見出し＋説明 */
.lp-craft .drill-list { display:grid; gap:var(--space-6); margin:var(--space-2) 0 0; padding:var(--space-6); border-radius:var(--radius-md); background:var(--color-image-surface); }
.lp-craft .drill-item dt { display:flex; align-items:center; gap:var(--space-3); font-weight:var(--font-weight-bold); color:var(--color-fg-high); }
.lp-craft .drill-tag {
 display:inline-flex; align-items:center; height:var(--space-6); padding-inline:var(--space-3); border-radius:var(--radius-full);
 border:1px solid var(--color-primary); color:var(--color-primary); font-size:var(--text-xs); line-height:1; flex-shrink:0;
}
.lp-craft .drill-item:last-child .drill-tag { background:var(--color-primary); color:var(--color-page); }
.lp-craft .drill-item dd { margin:var(--space-2) 0 0; font-size:var(--text-sm); line-height:var(--leading-sm); color:var(--color-fg-middle); }
.lp-craft .drill-note { font-size:var(--text-base); line-height:var(--leading-base); color:var(--color-fg-high); }
.lp-craft .drill-note .marker { font-weight:var(--font-weight-bold); }
@media (max-width:860px) { .lp-craft #textbook .reason-grid > figure { margin-top:0; } }

/* v7.15 — 淡緑の背景では蛍光ペンを一段濃い緑（green-200）に（薄緑同士で見えなくなるため。白は不自然なので不採用） */
.lp-geppy.lp-merged #main > .section-green { --color-highlighter: var(--color-brand-green-200); }
/* v7.16 — 会社紹介の帯は上の3列と同じコンテナ幅に揃える */
.lp-merged .company-band.company-brief { max-width:none; margin-inline:0; }
@media (min-width:861px) { .lp-merged .company-band.company-brief { max-width:none; } }

/* ---- v7.17 — 背景の方眼（格子）をやめる：ヒーロー・資料請求の帯・お問い合わせ（B案は独自の紙の表現のため対象外） ---- */
body.lp-craft:not(.theme-akapen) .hero::before,
body.lp-craft:not(.theme-akapen) #resources::before,
body.lp-craft:not(.theme-akapen) #contact::before { content:none; background-image:none; }

/* ---- v7.18 — 資料請求の帯：白パネルをやめ、緑の全面に「左：見出し・項目・ボタン／右：資料の画像」 ---- */
.lp-geppy #resources .resource-band { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; text-align:left; }
.lp-geppy #resources .resource-copy { padding:0; }
.lp-geppy #resources .resource-title { font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.3; color:var(--color-fg-high); }
.lp-geppy #resources .resource-list { list-style:none; padding:0; margin:clamp(1.5rem,3vw,2.25rem) 0; display:grid; gap:.75rem; color:var(--color-fg-high); font-weight:var(--font-weight-medium); }
.lp-geppy #resources .resource-list li { display:flex; gap:.75em; align-items:baseline; padding:0; }
.lp-geppy #resources .resource-list li::before { content:"" / ""; flex:0 0 .6em; height:2px; background:var(--color-fg-high); transform:translateY(-.3em); border:0; border-radius:0; width:auto; position:static; }
.lp-geppy #resources .resource-copy .actions { display:flex; flex-wrap:wrap; gap:.75rem; padding:0; margin:0; background:none; }
.lp-geppy #resources .resource-copy .actions .btn { width:auto; min-width:10rem; padding-inline:var(--space-8); }
.lp-geppy #resources .btn-ink { background:var(--color-fg-high); border-color:var(--color-fg-high); color:var(--color-page); box-shadow:none; }
.lp-geppy #resources .btn-ink:hover { background:#000; border-color:#000; }
.lp-geppy #resources .btn-white { background:var(--color-page); border-color:var(--color-page); color:var(--color-fg-high); box-shadow:none; }
.lp-geppy #resources .btn-white:hover { background:var(--color-panel); border-color:var(--color-panel); }
.lp-geppy #resources .resource-note { margin-top:1rem; font-size:var(--text-xs); color:var(--color-fg-high); }
.lp-geppy #resources .resource-visual { width:100%; aspect-ratio:1 / 1; min-height:0; max-height:none; margin:0; border:0; border-radius:var(--radius-md); background:rgb(255 255 255 / .55); box-shadow:none; }
@media (max-width:860px) {
 .lp-geppy #resources .resource-band { grid-template-columns:1fr; }
 .lp-geppy #resources .resource-visual { aspect-ratio:3 / 2; }
}
@media (max-width:600px) { .lp-geppy #resources .resource-copy .actions .btn { flex:1 1 100%; } }

/* ---- v7.18 — 情緒の3視点にアイコン（フォーカス＝同心円、ベクトル＝矢印、ステージ＝階段） ---- */
.jocho-ic { width:3rem; height:3rem; margin-bottom:.25rem; flex-shrink:0; fill:none; stroke:var(--color-fg-brand); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.jocho-ic .fill { fill:var(--color-primary); stroke:none; }
@media (min-width:861px) {
 .lp-geppy #resources .resource-band { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
 .lp-geppy #resources .resource-title { font-size:clamp(1.75rem,2.9vw,2.375rem); white-space:nowrap; }
}

/* ---- v7.19 — 資料請求の帯の配色をA案のトンマナに（お問い合わせ欄と同じ：緑の面に白の文字、白のボタン） ---- */
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources :is(.resource-title, .resource-list, .resource-note) { color:var(--color-page); }
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-list li::before { background:var(--color-page); }
.lp-geppy #resources .btn-onbrand { background:var(--color-page); border-color:var(--color-page); color:var(--color-primary); box-shadow:none; }
.lp-geppy #resources .btn-onbrand:hover { background:var(--color-primary-subtle); border-color:var(--color-primary-subtle); }
.lp-geppy #resources .btn-onbrand-line { background:transparent; border:2px solid var(--color-page); color:var(--color-page); box-shadow:none; }
.lp-geppy #resources .btn-onbrand-line:hover { background:rgb(255 255 255 / .14); }
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-visual { background:var(--color-image-surface); }

/* ---- v7.20 — 資料請求の帯：緑の面の上に白いカード（お問い合わせ欄と同じ型）。ボタンはページ共通の形に戻す ---- */
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-band { background:var(--color-page); border-radius:var(--radius-md); padding:clamp(1.75rem,4.5vw,3.5rem); }
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources :is(.resource-title, .resource-list) { color:var(--color-fg-high); }
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-note { color:var(--color-fg-low); }
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-list li::before { background:var(--color-primary); }
body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-visual { background:var(--color-image-surface); }
@media (min-width:861px) { body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-title { font-size:clamp(1.625rem,2.6vw,2.25rem); } }
.lp-geppy #resources .resource-band > * { min-width:0; }
@media (max-width:860px) { body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-band { grid-template-columns:minmax(0,1fr); padding:1.5rem 1.25rem; } }
@media (max-width:600px) { body.lp-geppy:not(.theme-d):not(.theme-akapen) #resources .resource-title { font-size:min(1.75rem,5.7vw); white-space:nowrap; } }

/* ---- v7.21 — ボタンの角丸を8pxに統一（A案） ---- */
body.lp-geppy:not(.theme-d):not(.theme-akapen) :is(.btn, .btn-cta, .btn-primary, .btn-secondary) { border-radius:8px; }

/* ---- v7.22 — フッターの英字「Install Series」をゆっくり横に流す（同じ文字列を2組並べ、半分ずらして継ぎ目なく繰り返す） ---- */
body.lp-craft:not(.theme-akapen) .site-footer::before {
 content:"Install Series\2003Install Series\2003Install Series\2003Install Series\2003" / "";
 width:max-content; text-align:left; transform:none; transition:none;
 animation:footer-flow 48s linear infinite;
}
@keyframes footer-flow { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { body.lp-craft:not(.theme-akapen) .site-footer::before { animation:none; } }