/*
 * Motion LP v1.2 — 読みやすさと余白のマスタールール
 * Based on a consistent spacing scale and clear typographic hierarchy;
 * no Apple assets, stylesheets, or proprietary visual design are copied.
 * This file is deliberately loaded after style.css so that future projects
 * can tune the design safely without changing the application logic.
 */
:root {
  /* 文字はスマホでも小さくしない。内容を読むための標準サイズ */
  --type-body: 18px;
  --type-lead: 19px;
  --type-caption: 14px;
  --type-aux: 13px;
  --type-section: clamp(34px, 6.3cqw, 42px);
  --type-feature: 23px;
  --type-hero: clamp(39px, 7.2cqw, 49px);
  --text-leading: 1.85;
  /* 余白は8pxを基準に統一。セクション間は役割の違いで変える */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 96px;
  --page-gutter: clamp(24px, 5cqw, 40px);
  --muted: #4e5951;
}
:root[data-theme="sage"] { --muted:#496153; }
:root[data-theme="night"] { --muted:#d0d9d2; }

/* モジュール全体の共通基準。各モードで共通の横位置を使う */
body { font-size:var(--type-body); line-height:var(--text-leading); }
.container { padding-inline:var(--page-gutter); }
.section-pad { padding-block:var(--space-8); }
.section-header { margin-bottom:var(--space-5); }
.section-header .kicker { margin:var(--space-2) 0 var(--space-3); }
.section-heading,
.statement h2,
.story h2 { font-size:var(--type-section); line-height:1.5; letter-spacing:.035em; overflow-wrap:anywhere; }
.section-lead { font-size:var(--type-lead); line-height:1.8; margin-top:var(--space-3); }
.section-index { font-size:var(--type-caption); }
.kicker { gap:var(--space-2); font-size:var(--type-aux); line-height:1.6; letter-spacing:.12em; }
.kicker::before { width:24px; }

/* ヘッダーは中央固定の左右余白と揃える */
.site-header-inner { padding-inline:var(--page-gutter); }
.brand-name { font-size:23px; }
.brand-sub { font-size:11px; letter-spacing:.18em; }
.desktop-nav { gap:var(--space-3); }
.desktop-nav a { font-size:var(--type-caption); }
.header-link { min-height:48px; display:inline-flex; align-items:center; padding:8px 16px; font-size:var(--type-caption); }
.motion-toggle { min-height:44px; font-size:var(--type-aux); }
.mobile-menu-toggle { width:48px; height:48px; flex:none; }
.mobile-menu a { font-size:17px; padding:16px 5px; }

/* ファーストビューの情報構造：写真 → 見出し → リード → 本文 → CTA */
.hero-copy { padding-inline:var(--page-gutter); }
.hero .kicker { margin-bottom:var(--space-3); }
.hero-title { font-size:var(--type-hero); line-height:1.48; letter-spacing:.035em; overflow-wrap:anywhere; }
.hero-lead { margin-top:var(--space-4); font-size:var(--type-lead); line-height:1.7; letter-spacing:.015em; }
.hero-description { margin-top:var(--space-2); font-size:var(--type-body); line-height:var(--text-leading); }
.hero-links { margin-top:var(--space-4); column-gap:var(--space-3); row-gap:var(--space-2); }
.btn { min-height:52px; font-size:16px; font-weight:600; line-height:1.45; letter-spacing:.02em; padding:14px 24px; text-align:center; }
.btn-plain { font-size:16px; line-height:1.5; }
.hero-media-note { left:var(--page-gutter); font-size:var(--type-aux); }
.hero-scroll { left:var(--page-gutter); font-size:var(--type-aux); }

/* 余白を“単純に広く”ではなく関係性で整理。本文の読みやすさを優先 */
.statement-grid { gap:var(--space-3); }
.statement-description { margin-top:var(--space-4); font-size:var(--type-body); line-height:var(--text-leading); }
.statement-side { margin-top:var(--space-4); font-size:var(--type-aux); letter-spacing:.1em; }
.statement-mark { display:none; } /* 意味の薄い巨大装飾を省く */
.feature-grid { gap:var(--space-2); }
.feature-card { padding:var(--space-4); min-height:0; }
.feature-count { margin-top:var(--space-3); font-size:var(--type-aux); }
.feature-card h3 { margin-top:var(--space-2); font-size:var(--type-feature); line-height:1.5; }
.feature-card p { margin-top:var(--space-2); font-size:var(--type-body); line-height:1.75; }
.gallery-grid { gap:var(--space-3); }
.gallery-caption { margin-top:var(--space-2); padding-top:var(--space-2); }
.gallery-caption h3 { font-size:20px; line-height:1.6; }
.gallery-caption p { font-size:var(--type-aux); letter-spacing:.03em; white-space:normal; }
.story .kicker { margin:0 0 var(--space-3); }
.story-text { padding-inline:var(--page-gutter); }
.story-description { margin-top:var(--space-3); font-size:var(--type-body); line-height:var(--text-leading); }
.story .round-link { margin-top:var(--space-4); }
.round-link { min-height:48px; font-size:16px; }
.steps-grid { gap:var(--space-2); }
.step { padding-top:var(--space-4); }
.step h3 { margin-top:var(--space-3); font-size:var(--type-feature); line-height:1.55; }
.step p { margin-top:var(--space-2); max-width:none; font-size:var(--type-body); line-height:1.75; }
.faq-item summary { font-size:var(--type-body); line-height:1.75; padding:var(--space-3) 48px var(--space-3) 4px; }
.faq-answer { font-size:var(--type-body); line-height:1.85; padding:0 40px var(--space-4) 4px; }
.cta { padding:var(--space-8) var(--page-gutter); }
.cta h2 { margin-top:var(--space-4); font-size:var(--type-section); line-height:1.55; }
.cta-description { margin:var(--space-3) auto var(--space-4); font-size:var(--type-body); line-height:1.85; }
.cta-caption { font-size:var(--type-caption); line-height:1.75; margin-top:var(--space-3); }
.site-footer { padding:var(--space-5) var(--page-gutter) var(--space-6); }
.footer-note, .footer-copy { font-size:var(--type-caption); line-height:1.85; }

/* コンテナ幅680以下（中央固定モード）でもPC並みの大きさで読めるように */
@container lp (max-width:760px) {
  #main { font-size:var(--type-body); }
  .site-header-inner { padding-inline:var(--page-gutter); }
  .brand-name { font-size:22px; }
  .brand-sub { font-size:10px; }
  .motion-toggle { font-size:var(--type-aux); }
  .mobile-menu { padding:16px var(--page-gutter) 24px; }
  .mobile-menu a { font-size:17px; }
  .hero-media { height:min(61svh,540px); min-height:310px; }
  .hero-copy { padding:var(--space-6) var(--page-gutter) var(--space-7); }
  .hero .kicker { font-size:var(--type-aux); margin-bottom:var(--space-3); }
  .hero-title { font-size:var(--type-hero); line-height:1.5; }
  .hero-lead { margin-top:var(--space-3); font-size:var(--type-lead); }
  .hero-description { margin-top:var(--space-2); font-size:var(--type-body); line-height:var(--text-leading); }
  .hero-links { margin-top:var(--space-4); gap:var(--space-2); }
  .hero .btn { min-height:52px; font-size:16px; padding:14px 20px; }
  .hero-scroll { left:var(--page-gutter); bottom:var(--space-3); }
  .section-pad { padding-block:var(--space-7); }
  .section-header { margin-bottom:var(--space-4); }
  .section-header .kicker { margin:var(--space-2) 0 var(--space-3); }
  .section-heading { font-size:var(--type-section); }
  .section-lead { font-size:var(--type-lead); margin-top:var(--space-3); }
  .statement-grid { gap:var(--space-3); }
  .statement h2 { font-size:var(--type-section); }
  .statement-description { font-size:var(--type-body); margin-top:var(--space-3); line-height:var(--text-leading); }
  .statement-side { margin-top:var(--space-4); font-size:var(--type-aux); }
  .feature-grid { gap:var(--space-2); }
  .feature-card { padding:var(--space-3); min-height:0; grid-template-columns:52px minmax(0,1fr); column-gap:var(--space-2); }
  .feature-icon { width:48px; height:48px; }
  .feature-count { margin-top:0; font-size:var(--type-aux); }
  .feature-card h3 { margin-top:var(--space-1); font-size:var(--type-feature); }
  .feature-card p { margin-top:var(--space-1); font-size:var(--type-body); }
  .gallery-grid { gap:var(--space-3) var(--space-2); }
  .gallery-caption { margin-top:var(--space-2); padding-top:var(--space-2); }
  .gallery-caption h3 { font-size:20px; }
  .gallery-caption p { font-size:var(--type-aux); }
  .story-text { padding:var(--space-7) var(--page-gutter); }
  .story h2 { font-size:var(--type-section); }
  .story-description { font-size:var(--type-body); line-height:var(--text-leading); margin-top:var(--space-3); }
  .step { padding:var(--space-4) 0; grid-template-columns:56px minmax(0,1fr); column-gap:var(--space-2); }
  .step h3 { margin-top:0; font-size:var(--type-feature); }
  .step p { margin-top:var(--space-2); font-size:var(--type-body); }
  .faq-item summary { font-size:var(--type-body); padding:var(--space-3) 40px var(--space-3) 4px; }
  .faq-answer { font-size:var(--type-body); padding-right:var(--space-3); }
  .cta { padding:var(--space-7) var(--page-gutter); }
  .cta h2 { font-size:var(--type-section); }
  .footer-inner { gap:var(--space-3); }
  .site-footer { padding-inline:var(--page-gutter); }
}
/* とくに狭い画面でも文字を小さくせず、カードを一列に切り替えて収める */
@container lp (max-width:420px) {
  .gallery-grid { grid-template-columns:1fr; gap:var(--space-4); }
  .gallery-card:nth-child(3) { grid-column:auto; width:100%; }
  .gallery-picture { aspect-ratio:4/3; }
  .gallery-caption h3 { font-size:22px; }
  .hero-title { font-size:clamp(36px,9.7cqw,42px); }
}
@container lp (max-width:390px) {
  .brand-name { font-size:20px; }
  .brand-sub { font-size:9px; }
  .header-actions { gap:var(--space-1); }
  .hero-title { font-size:36px; }
  .hero-links { flex-direction:column; align-items:stretch; }
  .hero .btn { width:100%; }
}