/* =========================================================
   Arch-LMOS — Type Generation LP (renewal)
   Apple 風：大きな見出し・広い余白・グレーのタイル・控えめなモーション
   色は Arch-LOG カラーパレット（261017-233740 / 261017-233857）に限定
   メインカラー（--brand）は「選ぶ・押す」ものにだけ使う：CTA・選択中の項目・寸法線
   ========================================================= */
:root {
  /* Brand（強調専用） */
  --brand: #E60012;
  --brand-hover: #D54040;
  --brand-soft: #FCE2E4;

  /* Neutral */
  --ink: #1C1C1C;             /* 見出し・本文 */
  --ink-2: #3C3C3C;           /* 本文（やや弱め）・濃いタイル */
  --gray: #707070;            /* 補足テキスト（白・F4F5F7 上で AA） */
  --gray-light: #C8C8C8;      /* 罫線（強）・暗背景上の補足テキスト */
  --line: #E8E8E8;            /* 罫線 */
  --surface: #F4F5F7;         /* タイル・交互セクション */
  --bg: #FFFFFF;

  /* Sub（イラスト専用） */
  --glass: #AFB4F1;
  --glass-edge: #757CDD;

  /* Type */
  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-num: var(--font);
  /* vw と svh の小さいほうで決める：横長・縦短の画面でも 1 パネルが 1 画面に収まる */
  --fs-hero: clamp(30px, min(4.2vw, 7.2svh), 80px);
  --fs-h2: clamp(28px, min(3.4vw, 5.4svh), 64px);
  --fs-h3: clamp(19px, min(1.6vw, 2.6svh), 30px);
  --fs-lead: clamp(16px, min(1.25vw, 2.1svh), 24px);
  --fs-body: clamp(16px, .9vw, 18px);
  --fs-eyebrow: clamp(15px, 1.05vw, 20px);

  /* Space（Apple 系の 8px グリッド。1920px で最大値になる） */
  --gutter: clamp(20px, 5vw, 120px);          /* 左右の余白 */
  --wrap: 1680px;                              /* FullHD で 1680px のコンテンツ幅 */
  --section-y: clamp(88px, 8.4vw, 160px);      /* セクション上下 */
  --head-gap: clamp(20px, min(2.4vw, 3.6svh), 44px);    /* 見出しブロック → 本体 */
  --tile-gap: clamp(12px, min(1.25vw, 2svh), 24px);   /* タイル間 */
  --tile-pad: clamp(22px, min(3.1vw, 4.6svh), 64px);  /* タイル内側 */
  --header-h: 52px;
  --panel-h: calc(100svh - var(--header-h));         /* スナップ 1 パネルの高さ */
  --radius: clamp(18px, 1.5vw, 28px);
  --radius-sm: 14px;

  --ease: cubic-bezier(.25, .1, .25, 1);
  --spd: .35;                 /* バリエーションタイルの速度係数（小さいほど速い） */
  --spd-pick: 1;              /* 項目選択（プルダウン）の速度係数。3D 動画もこの秒数に合わせてある */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 52px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: var(--fs-body); line-height: 1.75; font-feature-settings: "palt"; word-break: auto-phrase;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: .01em; font-weight: 700; word-break: auto-phrase; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--glass-edge); outline-offset: 3px; border-radius: 4px; }
.pc { display: none; }
@media (min-width: 860px) { .pc { display: inline; } }

.container { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: calc(980px + var(--gutter) * 2); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 28px; border-radius: 999px; border: 0;
  font: 700 16px/1.4 var(--font); text-decoration: none; text-align: center; text-wrap: balance;
  cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { transform: scale(.98); }
.btn-lg { min-height: 60px; padding: 14px 40px; font-size: clamp(16px, 1.05vw, 19px); }
.btn-sm { min-height: 34px; padding: 6px 16px; font-size: 13px; font-weight: 500; }
.link-more {
  display: inline-flex; align-items: center; gap: 6px; font-size: clamp(16px, 1.05vw, 19px);
  color: var(--ink); text-decoration: none; padding: 8px 4px;
}
.link-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Header（Apple のグローバルナビ風：細い・半透明） ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: 52px; }
.logo { text-decoration: none; }
.logo-text { font-family: var(--font-num); font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; letter-spacing: 0; }
.logo-text b { font-weight: 600; color: var(--gray); }
.logo-mark { color: var(--brand); }
.header-nav { display: none; gap: 36px; margin-left: auto; }
.header-nav a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.header-nav a:hover { color: var(--ink); }
.site-header .btn { display: none; margin-left: auto; }
@media (min-width: 760px) { .site-header .btn { display: inline-flex; } }
@media (min-width: 1100px) { .header-nav { display: flex; } .site-header .btn { margin-left: 8px; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(56px, 6vw, 112px) 0 var(--section-y); }
.hero-grid { display: grid; gap: clamp(28px, 2.6vw, 48px); align-items: center; }
@media (min-width: 1200px) {
  .hero { min-height: calc(100svh - 52px); display: grid; align-items: center; padding-block: 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
}
.eyebrow { margin-bottom: clamp(10px, 1vw, 18px); }
.badge-release { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--ink-2); letter-spacing: .04em; }
.hero h1 { display: grid; gap: .1em; color: var(--ink); }
.hero h1 .nw, .compare-card .nw { white-space: nowrap; }
.hero h1 .h1-main { font-size: var(--fs-hero); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.hero h1 .h1-sub { font-size: calc(var(--fs-hero) * .62); line-height: 1.3; font-weight: 700; color: var(--ink-2); margin-top: .3em; }
.hero h1 em { font-style: normal; }
.lead { margin-top: clamp(16px, 1.4vw, 26px); font-size: var(--fs-lead); line-height: 1.7; color: var(--gray); }
.lead strong { color: var(--ink); }
.lead-sub { margin-top: 10px; font-size: var(--fs-lead); font-weight: 700; color: var(--ink); }
.lead-sub .hl { font-style: normal; color: var(--brand); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(20px, 1.9vw, 36px); }
.service-intro { margin-bottom: clamp(16px, 1.5vw, 28px); padding-bottom: clamp(12px, 1vw, 18px); border-bottom: 1px solid var(--line); max-width: 52em; font-size: clamp(13px, .78vw, 15px); line-height: 1.7; color: var(--gray); }
.service-intro b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--ink); }
.service-intro b span { font-weight: 500; color: var(--gray); }

/* ヒーローのツールボード：タイプ生成（3D）／主なツール／カテゴリ別アイコン の 4 列 × 3 行 */
.tool-board { min-width: 0; }
.tb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, .7vw, 14px); }
@media (min-width: 760px) { .tb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb-card { background: var(--surface); border-radius: var(--radius-sm); padding: clamp(10px, .8vw, 16px); min-width: 0; display: grid; align-content: start; gap: 6px; }
.tb-name { font-size: clamp(12px, .78vw, 15px); font-weight: 700; color: var(--ink); line-height: 1.4; }
/* 1 行目：タイプ生成。白背景の 3D 動画を乗算でタイルに溶かす */
.tb-type { padding: 0 0 clamp(10px, .8vw, 14px); overflow: hidden; }
.tb-type .tb-name { padding-inline: clamp(10px, .8vw, 16px); }
.tb-video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; mix-blend-mode: multiply; }
/* 2 行目：主なツール（アイコン＋名前＋一言） */
.tb-tool img { width: clamp(36px, 2.6vw, 48px); height: auto; margin-bottom: 4px; }
.tb-desc { font-size: clamp(11px, .66vw, 13px); line-height: 1.6; color: var(--gray); }
/* 3 行目：カテゴリごとのアイコン（名前・説明なし） */
.tb-cat-name { font-size: clamp(11px, .66vw, 13px); font-weight: 700; color: var(--gray); }
.tb-icons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tb-icons img { width: 32px; height: 32px; image-rendering: auto; }
.tb-more { font-size: 12px; letter-spacing: .1em; color: var(--gray); padding-left: 2px; }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section-tint { background: var(--surface); }
.section-dark { background: var(--ink); color: var(--gray-light); }
.section-label { display: block; font-size: var(--fs-eyebrow); font-weight: 700; color: var(--gray); margin-bottom: clamp(6px, .6vw, 12px); letter-spacing: .04em; }
.section-dark .section-label { color: var(--gray-light); }
.section-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance; max-width: 22em; }
.section-dark .section-title { color: #fff; }
.section-lead { margin-top: clamp(10px, 1vw, 18px); font-size: var(--fs-lead); line-height: 1.7; color: var(--gray); max-width: 46em; }
.section-lead strong { color: var(--ink); }

/* compare */
.compare { display: grid; gap: var(--tile-gap); margin-top: var(--head-gap); align-items: stretch; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 48px 1fr; } }
.compare-card { border-radius: var(--radius); padding: var(--tile-pad); }
.compare-card h3 { font-size: var(--fs-h3); margin-bottom: clamp(12px, min(1.2vw, 2svh), 22px); }
.compare-card ol { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: clamp(8px, min(1vw, 1.5svh), 18px); }
.compare-card li { counter-increment: c; display: flex; gap: 16px; align-items: baseline; font-size: clamp(16px, 1.05vw, 20px); }
.compare-card li::before {
  content: counter(c); flex: none; width: 1.6em; height: 1.6em; border-radius: 50%;
  display: grid; place-items: center; font: 600 .8em var(--font-num); transform: translateY(.2em);
}
.before { background: var(--surface); color: var(--gray); }
.before h3 { color: var(--ink-2); }
.before li::before { background: var(--line); color: var(--ink-2); }
.after { background: var(--ink); color: #fff; display: flex; flex-direction: column; }
.after h3 { color: #fff; margin-bottom: 0; }
.after ol { flex: 1; align-content: center; padding-block: clamp(20px, min(3vw, 4svh), 56px); }
.after li { font-weight: 700; font-size: clamp(22px, 1.9vw, 36px); }
.after li::before { background: #fff; color: var(--ink); }
.compare-note { font-weight: 700; font-size: clamp(20px, 1.5vw, 28px); line-height: 1.5; color: #fff; }
.compare-arrow { position: relative; min-height: 32px; }
.compare-arrow::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  border-right: 3px solid var(--gray-light); border-bottom: 3px solid var(--gray-light); transform: translate(-50%, -70%) rotate(45deg);
}
@media (min-width: 900px) { .compare-arrow::after { transform: translate(-70%, -50%) rotate(-45deg); } }

/* change list：白いタイルの中に罫線で並べる */
.change-list { list-style: none; padding: 0 var(--tile-pad); margin: var(--head-gap) 0 0; background: #fff; border-radius: var(--radius); }
.change-list li { display: grid; gap: 6px; padding: clamp(12px, min(2vw, 2.7svh), 36px) 0; }
.change-list li + li { border-top: 1px solid var(--line); }
.change-list .from { color: var(--gray); font-size: clamp(15px, 1vw, 19px); text-decoration: line-through; text-decoration-color: var(--gray-light); }
.change-list .to { font-weight: 700; font-size: clamp(18px, 1.45vw, 28px); display: flex; gap: 16px; align-items: baseline; }
.change-list .to::before { content: "→"; color: var(--gray); }
@media (min-width: 900px) { .change-list li { grid-template-columns: 1fr 1.6fr; align-items: center; gap: 32px; } }

/* ---------- Product sections ---------- */
.product-grid { display: grid; gap: clamp(24px, 2.4vw, 44px); align-items: center; }
@media (min-width: 1000px) {
  .product-grid { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .reverse .product-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
  .reverse .product-copy { order: 2; }
}
.product-copy > p:not(.section-label):not(.result-chip) { margin-top: clamp(10px, min(1vw, 1.6svh), 18px); font-size: var(--fs-lead); line-height: 1.7; color: var(--gray); }
.product .section-title { font-size: clamp(24px, min(2.3vw, 4svh), 44px); }
.product-copy strong { color: var(--ink); }
.product-copy .em-pick { color: var(--ink); }

.spec-list { list-style: none; margin: clamp(14px, min(1.4vw, 2.2svh), 26px) 0 0; padding: 0; display: grid; gap: clamp(6px, 1svh, 10px); max-width: 560px; }
.spec-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; position: relative;
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: clamp(7px, min(.9vw, 1.2svh), 16px) 20px;
  transition: border-color .3s, box-shadow .3s;
}
.section-tint .spec-list li { border-color: #fff; }
.spec-list li::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--gray-light); border-bottom: 2px solid var(--gray-light); transform: translateY(-2px) rotate(45deg); flex: none; }
.spec-list .k { font-size: clamp(13px, .8vw, 15px); color: var(--gray); min-width: 5em; }
.spec-list .v { font-weight: 700; font-size: clamp(15px, .95vw, 18px); margin-left: auto; display: grid; justify-items: end; }
.spec-list .v > span { grid-area: 1 / 1; white-space: nowrap; }
.spec-list .v-ph { opacity: 0; color: var(--gray); font-weight: 400; font-size: .85em; }
/* プルダウンが開いて選択される演出 */
.spec-list .pick {
  position: absolute; z-index: 5; top: calc(100% - 6px); right: 32px; min-width: 170px;
  display: grid; padding: 6px; background: #fff; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14); opacity: 0; pointer-events: none; transform-origin: top right;
}
.spec-list .pick span { font-size: 14px; padding: 6px 12px; border-radius: 8px; color: var(--gray); white-space: nowrap; }
.spec-list .pick span.on { background: var(--brand-soft); color: var(--ink); font-weight: 700; }
.spec-list.is-play .pick { animation: pickOpen calc(.8s * var(--spd-pick)) ease calc((var(--d, 0s) - .5s) * var(--spd-pick)) both; }
.spec-list.is-play .v-ph { animation: phOut calc(.3s * var(--spd-pick)) ease calc(var(--d, 0s) * var(--spd-pick)) both; }
.spec-list.is-play .v-val { animation: valIn calc(.3s * var(--spd-pick)) ease calc(var(--d, 0s) * var(--spd-pick)) both; }
@keyframes pickOpen {
  0% { opacity: 0; transform: translateY(-6px) scaleY(.85); }
  20%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes phOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes valIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.result-chip {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 clamp(15px, .95vw, 18px) var(--font-num);
}
.result-chip span { font: 400 13px var(--font); color: var(--gray-light); }

.stage {
  position: relative; background: var(--surface); border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; width: 100%; max-height: min(72svh, 760px); margin-inline: auto;
}
.section-tint .stage { background: #fff; }
/* 動画は白背景で書き出してあり、乗算でタイルの色に溶け込ませる */
.asm-video { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 759px) { .stage { aspect-ratio: 1 / 1; } }

/* 仕様リストの同期ハイライト（選択中だけ強調色） */
.spec-list.is-play li { animation: specOn calc(.5s * var(--spd-pick)) ease calc(var(--d, 0s) * var(--spd-pick)) forwards; }
@keyframes specOn {
  0% { border-color: var(--line); }
  40% { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(230, 0, 18, .1); }
  100% { border-color: var(--ink); box-shadow: none; }
}
.js .product-copy .result-chip { opacity: 0; transform: translateY(8px); }
.product-copy.is-play .result-chip { animation: chipIn calc(.6s * var(--spd-pick)) ease calc(var(--d, 0s) * var(--spd-pick)) forwards; }
@keyframes chipIn { to { opacity: 1; transform: none; } }

/* ---------- Door variants gallery ---------- */
.variants { margin-top: 0; }
.v-intro { margin-bottom: clamp(12px, min(1.4vw, 2svh), 26px); }
.v-intro h3 { font-size: clamp(22px, min(2.2vw, 4svh), 44px); font-weight: 700; text-wrap: balance; }
.v-intro p { margin-top: 4px; font-size: var(--fs-lead); color: var(--gray); }
.v-rows { display: grid; gap: min(var(--tile-gap), 1.4svh); }
.v-row { display: grid; gap: 20px; align-items: start; background: var(--surface); border-radius: var(--radius); padding: clamp(16px, min(2.5vw, 2.8svh), 48px) clamp(20px, 2.5vw, 48px); }
@media (min-width: 900px) { .v-row { grid-template-columns: clamp(180px, 12vw, 240px) minmax(0, 1fr); gap: 24px; } }
.v-head { display: grid; gap: 8px; align-content: start; }
.v-head h4 { font-size: var(--fs-h3); }
.v-head p { color: var(--gray); font-size: 15px; line-height: 1.6; }
.v-panel .v-head p { color: var(--ink); font-weight: 700; }
.v-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
.v-tiles { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
@media (min-width: 900px) { .v-tiles { flex-wrap: wrap; row-gap: clamp(8px, 1.4svh, 20px); } }
/* 1 つずつ正方形カード。.vt は登場アニメーション、.vt-card はホバーで絵を拡大 */
.vt { flex: none; --vt: clamp(56px, min(5.2vw, 8.4svh), 112px); }
.v-panel .vt { --vt: clamp(74px, min(6.5vw, 10svh), 132px); } /* パネルは縦長の絵なので大きめ */
@media (max-width: 899px) { .v-panel .vt { --vt: 110px; } } /* スマホは横スクロールの列なので高さの制約がない */
/* パネルの絵は上部が余白なので、カードの中で 1.2 倍に拡大（扉の下端を基準に） */
.v-panel .vt-card img { scale: 1.2; transform-origin: 50% 70%; }
/* パネル名は 1 行。はみ出す名前は main.js が文字サイズを縮めて収める */
.v-panel .vt-card > span:last-child { display: block; white-space: nowrap; overflow: visible; font-size: 11px; }
.vt-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: var(--vt); height: var(--vt); padding: 6px 4px 5px; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 28, 28, .06); transition: box-shadow .35s var(--ease);
}
.vt-card img { display: block; flex: 1 1 0; width: 100%; height: 0; min-height: 0; object-fit: contain; border-radius: 6px; }
.vt-card > span:last-child { flex: none; font-size: clamp(9px, .55vw, 11px); line-height: 1.25; color: var(--gray); text-align: center; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: anywhere; }
.vt-more .vt-card > span:last-child { display: none; }
/* ホバーで絵を拡大。名前の帯を白地で上に重ね、はみ出した絵を隠す */
.vt-card > span:last-child { position: relative; z-index: 1; align-self: stretch; background: #fff; }
/* パネル・枠・沓摺のカードの拡大は、OS のアニメーション効果がオフでも動かす */
@media (hover: hover) and (pointer: fine) {
  .vt-card img { transition: scale .45s var(--ease); }
  .vt-card:hover { box-shadow: 0 12px 24px rgba(28, 28, 28, .14); }
  .vt-card:hover img { scale: 1.25; }
  .v-panel .vt-card:hover img { scale: 1.45; }
}
.v-tiles { gap: clamp(6px, .6vw, 10px); }
.more-box { width: clamp(50px, min(5.6vw, 7.4svh), 108px); height: clamp(50px, min(5.6vw, 7.4svh), 108px); }
/* パネル：床ラインが1本につながって見えるよう隙間なく並べる */

.more-box { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gray); font-weight: 700; letter-spacing: .1em; }
.vt-more .vt-card { border: 1px dashed var(--gray-light); box-shadow: none; }
.v-row.is-play .vt { animation: tileIn calc(.5s * var(--spd)) cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: calc((var(--i) * 85ms + .15s) * var(--spd)); }
.v-row.is-play .v-head { animation: headIn calc(.5s * var(--spd)) ease both; }
@keyframes tileIn { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes headIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* codes & fire rating */
.spec-extra { display: grid; gap: var(--tile-gap); margin-top: var(--head-gap); }
@media (min-width: 900px) { .spec-extra { grid-template-columns: 1fr 1fr; } }
.se-card { background: var(--surface); border-radius: var(--radius); padding: clamp(28px, 2.5vw, 48px); min-width: 0; display: grid; gap: 14px; align-content: start; }
.se-card h3 { font-size: var(--fs-h3); text-wrap: balance; }
.se-card p { color: var(--gray); }
.code-groups { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.code-groups li { display: flex; flex-wrap: wrap; gap: 8px; }
.code { font: 600 14px/1 var(--font-num); letter-spacing: .04em; background: #fff; border-radius: 8px; padding: 9px 12px; min-width: 52px; text-align: center; }
.code.code-more { background: transparent; color: var(--gray); min-width: 0; padding-inline: 4px; }

/* ---------- Steps（黒セクション） ---------- */
.steps { display: grid; gap: var(--tile-gap); margin-top: var(--head-gap); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { background: var(--ink-2); border-radius: var(--radius); padding: var(--tile-pad); }
.step-no { display: block; font: 600 clamp(40px, 3.6vw, 72px)/1 var(--font-num); color: #fff; margin-bottom: clamp(14px, 1.2vw, 24px); }
.step h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: 12px; }
.step p { color: var(--gray-light); font-size: var(--fs-lead); }
.note-change { margin-top: var(--head-gap); border-left: 3px solid var(--gray-light); padding: 4px 0 4px clamp(20px, 1.7vw, 32px); }
.note-change h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: 10px; }
.note-change p { color: var(--gray-light); font-size: var(--fs-lead); }

/* ---------- Value ---------- */
.cards3 { display: grid; gap: var(--tile-gap); margin-top: var(--head-gap); }
@media (min-width: 900px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.card { border-top: 1px solid var(--ink); padding-top: clamp(20px, 1.7vw, 32px); }
.card h3 { font-size: var(--fs-h3); }
.card-sub { color: var(--ink); font-weight: 700; font-size: var(--fs-lead); margin: 6px 0 clamp(16px, 1.25vw, 24px); }
.card p:last-child { color: var(--gray); }
.package { margin-top: 0; }
.package h3 { font-size: clamp(26px, 2.6vw, 52px); font-weight: 700; text-wrap: balance; }
.package > p { color: var(--gray); margin-top: 8px; font-size: var(--fs-lead); }
.package-list { list-style: none; padding: clamp(8px, 1vw, 16px) var(--tile-pad); margin: var(--head-gap) 0 0; display: grid; column-gap: clamp(32px, 3.3vw, 64px); background: var(--surface); border-radius: var(--radius); }
@media (min-width: 700px) { .package-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .package-list { grid-template-columns: repeat(3, 1fr); } }
.package-list li { padding: clamp(20px, 1.7vw, 32px) 0; border-bottom: 1px solid var(--line); }
.package-list li:last-child { border-bottom: 0; }
@media (min-width: 700px) { .package-list li:nth-last-child(2) { border-bottom: 0; } }
@media (min-width: 1100px) { .package-list li:nth-last-child(3) { border-bottom: 0; } }
.package-list b { display: block; font-size: clamp(18px, 1.25vw, 24px); margin-bottom: 8px; }
.package-list span { color: var(--gray); }

/* ---------- Release ---------- */
.release { background: var(--surface); }
.release-lead { font-size: var(--fs-h3); font-weight: 700; }
.release-date { font-family: var(--font-num); font-size: clamp(72px, 10vw, 200px); font-weight: 700; color: var(--ink); line-height: 1.05; margin: 8px 0 clamp(28px, 2.5vw, 48px); letter-spacing: -.02em; }
.release-date span { display: block; font-size: .24em; color: var(--ink); letter-spacing: 0; }
.release-date small { font-family: var(--font); font-size: .2em; color: var(--ink); margin-left: .2em; letter-spacing: 0; }
.release-sub { color: var(--gray); font-size: var(--fs-lead); margin-bottom: clamp(24px, 2vw, 40px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); color: var(--gray); padding: 0 0 40px; font-size: 12px; }
.footer-inner { display: grid; gap: 20px; padding-top: 24px; background: linear-gradient(var(--gray-light), var(--gray-light)) var(--gutter) 0 / calc(100% - var(--gutter) * 2) 1px no-repeat; }
@media (min-width: 800px) { .footer-inner { grid-template-columns: 1fr auto; align-items: end; } }
.site-footer .logo-text { margin-bottom: 8px; }
.footer-note { line-height: 1.8; }
.footer-links { display: grid; gap: 6px; }
@media (min-width: 800px) { .footer-links { text-align: right; } }
.footer-links a { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  /* 3D 動画・仕様リスト・バリエーション一覧（ホバー拡大を含む）の動きは製品説明なので止めない（画面に入るたび 1 回だけ再生、main.js） */
  html { scroll-behavior: auto; }
}

/* ---------- 1 パネル＝1 画面のスナップ ----------
   スクロールを止めると、動かした向きのパネルの頭に吸い付く。
   縦が短い画面やスマホでは中身が収まらないので、近いときだけ吸い付く（proximity）。 */
html { scroll-snap-type: y proximity; }
.snap { scroll-snap-align: start; }
.site-footer { scroll-snap-align: end; }
@media (min-width: 1024px) and (min-height: 700px) {
  /* PC は JS の「マグネット」で吸い付かせる（main.js）。JS が無いときだけ CSS の mandatory */
  html:not(.js) { scroll-snap-type: y mandatory; }
  html.js { scroll-snap-type: none; }
  .snap {
    min-height: var(--panel-h); display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(20px, min(5svh, 4vw), 72px);
  }
  .snap > .container { width: 100%; }
  .hero.snap { padding-block: clamp(24px, 4svh, 64px); }
  .release.snap { min-height: calc(var(--panel-h) - var(--footer-h, 0px)); }
}

/* ---------- パネル単位の拡大（中身の少ないパネルで画面を使い切る） ---------- */
@media (min-width: 1024px) and (min-height: 700px) {
  /* 建具表の符号・防火区分：2 枚の大きなタイル */
  #door-codes .spec-extra { margin-top: 0; }
  #door-codes .se-card { min-height: min(62svh, 640px); padding: var(--tile-pad); gap: clamp(16px, 2svh, 28px); align-content: space-between; grid-template-rows: auto auto 1fr; }
  #door-codes .se-card h3 { font-size: var(--fs-h2); line-height: 1.25; }
  #door-codes .se-card p { font-size: var(--fs-lead); line-height: 1.75; max-width: 30em; }
  #door-codes .code-groups { align-self: end; gap: clamp(10px, 1.4svh, 16px); }
  #door-codes .code { font-size: clamp(16px, min(1.1vw, 2svh), 22px); padding: .7em 1em; min-width: 4.6em; border-radius: 12px; }

  /* チームで使える標準：役割ごとの列を大きく */
  #value .cards3 { margin-top: var(--head-gap); }
  #value .card { padding-top: clamp(24px, 3.4svh, 44px); }
  #value .card h3 { font-size: var(--fs-h2); line-height: 1.2; }
  #value .card-sub { font-size: var(--fs-h3); margin: 6px 0 clamp(10px, 1.6svh, 18px); }
  #value .card p:last-child { font-size: var(--fs-lead); line-height: 1.75; }

}
@media (min-width: 1024px) and (min-height: 900px) {
  /* 縦に余裕がある画面（FullHD など）ではバリエーションのタイルを大きく */
  .vt { --vt: clamp(56px, min(5.4vw, 9.4svh), 112px); }
  .v-panel .vt { --vt: clamp(74px, min(6vw, 11svh), 120px); }
}

/* 解決方法：テキスト間の余白を 3 割詰める */
#solution .section-label { margin-bottom: clamp(4px, .42vw, 8px); }
#solution .section-lead { margin-top: clamp(7px, .7vw, 13px); }
#solution .change-list { margin-top: calc(var(--head-gap) * .7); }
#solution .change-list li { padding-block: clamp(8px, min(1.4vw, 1.9svh), 25px); }