/*
 * 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 {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:none; padding:0; line-height:1; text-align:center;
}
.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%; }
}

/* Cooperative LP: legible specs, process photos, and compact navigation */
.hero-media-inner.is-contained { display:flex; align-items:center; justify-content:center; overflow:hidden; transform:none!important; will-change:auto; }
.hero-media-inner.is-contained img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; transform:none; }
.story-art.is-contained { display:flex; justify-content:center; align-items:center; }
.story-art.is-contained img { position:relative; inset:auto; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.hero-media-note { font-size:12px; line-height:1.5; letter-spacing:.12em; }
.spec-group { margin-top:var(--space-4); }
.spec-group h3,.tour-card h3 { font-size:22px; line-height:1.5; margin-bottom:var(--space-2); }
.spec-scroll { overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--line); border-radius:8px; background:#fff; }
.spec-scroll:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.spec-scroll table { border-collapse:collapse; width:100%; min-width:560px; text-align:left; }
.spec-scroll th,.spec-scroll td { padding:14px 16px; border-bottom:1px solid var(--line); font-size:16px; line-height:1.55; }
.spec-scroll thead th { background:#f0f1eb; font-weight:700; }
.spec-scroll tbody th { font-weight:600; }
.spec-scroll tr:last-child th,.spec-scroll tr:last-child td { border-bottom:0; }
.spec-scroll-hint { display:none; margin-top:6px; color:#454b43; font-size:14px; line-height:1.6; }
.spec-note,.spec-details p,.overview-note { color:#454b43; font-size:15px; line-height:1.8; }
.spec-note { margin-top:var(--space-3); }
.spec-details { margin-top:var(--space-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.spec-details summary { cursor:pointer; padding:16px 4px; font-size:16px; font-weight:600; }
.spec-details p { padding:0 4px 18px; }
.process-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.process-card { min-width:0; background:#f4f3ed; border-radius:10px; overflow:hidden; }
.process-image { aspect-ratio:3/2; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#e6e4dc; }
.process-image img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.process-copy { padding:20px 22px 24px; }
.process-number { font-size:14px; color:#626a5e; letter-spacing:.08em; }
.process-copy h3 { margin-top:6px; font-size:21px; line-height:1.5; }
.process-copy p { margin-top:8px; font-size:16px; line-height:1.8; color:#343a33; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:var(--space-4); align-items:start; }
.overview-facts { margin:0; border-top:1px solid var(--line); }
.overview-facts > div { display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:17px 4px; border-bottom:1px solid var(--line); }
.overview-facts dt { font-size:15px; font-weight:700; }
.overview-facts dd { margin:0; font-size:16px; line-height:1.75; overflow-wrap:anywhere; }
.overview-facts a { text-decoration:underline; text-underline-offset:3px; }
.tour-card { padding:26px; border-radius:10px; background:#f4f3ed; }
.tour-card h3 { margin-top:10px; }
.tour-card > p { font-size:16px; line-height:1.8; }
.tour-card .btn { margin-top:20px; }
.overview-note { margin-top:20px; }

@container lp (max-width:800px) {
  .desktop-nav { display:none !important; }
  .mobile-menu-toggle { display:inline-flex !important; }
  .site-header .header-actions .header-link { display:none !important; }
  .overview-grid { grid-template-columns:1fr; }
}
@container lp (max-width:600px) {
  .process-grid { grid-template-columns:1fr; gap:var(--space-3); }
  .process-image { aspect-ratio:3/2; }
  .spec-scroll-hint { display:block; }
  .process-copy { padding:18px 20px 22px; }
  .overview-facts > div { grid-template-columns:100px minmax(0,1fr); gap:12px; }
  .spec-scroll table { min-width:540px; }
}

/* Higashishirakawa photo-led layout refinement; source images remain unscaled up. */
.hero { grid-template-columns:minmax(0,1fr) minmax(360px,400px); padding-right:clamp(24px,5vw,72px); }
.hero-media {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:min(100%,336px); height:auto; min-height:0; justify-self:center; align-self:center;
  padding:8px; overflow:visible; border-radius:2px;
}
.hero-media::after { display:none; }
.hero-media-inner.is-contained { position:relative; inset:auto; width:min(300px,100%); height:auto; aspect-ratio:3/2; flex:none; }
.hero-media-note {
  position:static; align-self:stretch; padding:0; color:var(--ink); mix-blend-mode:normal;
  font-size:12px; line-height:1.5; letter-spacing:.08em; overflow-wrap:anywhere;
}
.story { min-height:0; align-items:center; }
.story-art.is-contained { width:min(100%,324px); height:224px; justify-self:center; }
.process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.process-card { align-self:start; padding:10px; border-radius:6px; }
.process-image { width:100%; aspect-ratio:3/2; border-radius:2px; }
.process-copy { padding:14px 6px 10px; }
.process-copy p { font-size:16px; line-height:1.75; }

@container lp (max-width:1020px) {
  .hero { grid-template-columns:minmax(0,1fr) 360px; padding-right:24px; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@container lp (max-width:760px) {
  .hero { display:flex; flex-direction:column; padding-right:0; }
  .hero-media {
    order:1; width:min(100% - 24px,340px); height:auto; min-height:0; margin:76px auto 0;
    padding:8px 10px; gap:6px;
  }
  .hero-media-note { font-size:11px; }
  .hero-copy { order:2; padding-top:40px; padding-bottom:64px; }
  .hero-title { text-wrap:balance; }
  .hero-scroll { bottom:16px; }
  .story { grid-template-columns:1fr; }
  .story-art.is-contained { width:100%; height:224px; }
  .story-text { padding-top:56px; padding-bottom:56px; }
  .process-grid { gap:12px; }
  .process-grid { grid-template-columns:1fr; }
  .process-card { display:grid; grid-template-columns:128px minmax(0,1fr); align-items:center; gap:12px; padding:12px; }
  .process-image { width:128px; height:auto; aspect-ratio:3/2; }
  .process-copy { min-width:0; padding:4px 0; }
  .process-copy h3 { font-size:18px; }
  .process-copy p { font-size:16px; line-height:1.7; }
  .mobile-menu a:last-child {
    display:flex; justify-content:center; align-items:center; min-height:50px; margin-top:12px;
    padding:12px 16px; border:1px solid var(--ink); background:var(--ink); color:var(--surface);
  }
}
@container lp (max-width:600px) {
  .section-pad { padding-block:56px; }
  .section-header { margin-bottom:24px; }
  .story-text { padding-inline:var(--page-gutter); }
  .cta { padding:56px var(--page-gutter); }
}
@container lp (max-width:420px) {
  .hero-title { font-size:31px; letter-spacing:0; }
}
@container lp (max-width:359px) {
  .brand-name { font-size:17px; }
  .brand-sub { font-size:8px; }
  .hero-title { font-size:30px; letter-spacing:0; text-wrap:pretty; }
  .process-card { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .process-image { width:100%; height:auto; aspect-ratio:3/2; }
  .process-copy { padding:14px 6px 8px; }
}