/* ぬいたび 扉ページ(間もなくリリース)専用スタイル。素のCSS(フレームワーク不要)。
   2026-09-28: lp.css(現行LP)の変数・書体・レール(線路)のモチーフを引き継いだ新規ファイル。
   ライト固定(color-scheme:light)・モバイルファースト(390px基準・320〜430pxで横スクロールゼロ)。
   中央寄せの縦カラム(.door-shell)最大520pxはlp.cssの.lp-shellと同じ考え方を踏襲する。
   2026-09-29: Opusレビュー(REVIEW-opus.md)の🟡🟢反映(文字サイズ・コントラスト・作例表示・表の折返し等)。 */

:root {
  --lp-cream: #f9e9d2;
  --lp-cream-light: #fff8ec;
  --lp-navy: #1e3a5f;
  --lp-teal: #2e8fb0;
  --lp-orange: #e2622b;
  --lp-yellow: #e9a93d;
  --lp-ink: #3a2e22;
  --lp-ink-muted: #8a7a63;
  --lp-radius-sm: 8px;
  --lp-radius-md: 14px;
  --lp-radius-lg: 22px;
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 24px;
  --lp-space-6: 40px;
  --lp-shell-max-width: 520px;
  /* 扉ページもブランド(クリーム地・多色線画)を常に保つ固定ライトテーマにする(現行LPと同じ方針)。
     ダーク端末で見てもブランドが崩れないよう、color-scheme: light を明示する。 */
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* レビュー🟢13: アニメーションを減らす設定の利用者にはスムーススクロールを出さない */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body.door-body {
  background: var(--lp-cream);
  color: var(--lp-ink);
  font-family:
    'Zen Kaku Gothic New',
    -apple-system,
    BlinkMacSystemFont,
    'Hiragino Sans',
    'Yu Gothic',
    'Segoe UI',
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* レビュー🟢13: 実測で横はみ出しは無い(機械確認済み)。overflow-x:hiddenで隠すと、
     将来はみ出しが起きても気づけなくなるため外す。 */
}

.maru,
h1,
h2,
h3 {
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  color: var(--lp-navy);
  margin: 0 0 var(--lp-space-2);
  line-height: 1.5;
  font-weight: 900;
}

p {
  margin: 0 0 var(--lp-space-2);
}

a {
  color: var(--lp-teal);
}

a:hover {
  color: var(--lp-orange);
}

/* デスクトップでも無理に横展開せず、中央寄せの縦カラムで成立させる(lp.cssと同じ考え方)。 */
.door-shell {
  max-width: var(--lp-shell-max-width);
  margin: 0 auto;
}

/* ===== ヒーロー ===== */
.door-hero {
  position: relative;
  padding: var(--lp-space-6) var(--lp-space-5) var(--lp-space-2);
  text-align: center;
  overflow: hidden;
}

.door-hero__badge {
  position: absolute;
  top: var(--lp-space-5);
  left: var(--lp-space-5);
  width: 44px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(30, 58, 95, 0.18);
}

.door-hero__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lp-teal);
  margin: var(--lp-space-1) 0 var(--lp-space-2);
}

.door-hero__title {
  font-size: clamp(1.4rem, 5.6vw, 1.7rem);
  font-weight: 900;
  margin-bottom: var(--lp-space-2);
}

.door-hero__title-hi {
  color: var(--lp-orange);
}

.door-hero__sub {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lp-navy);
  margin-bottom: var(--lp-space-3);
}

.door-hero__lead {
  font-size: 0.95rem;
  /* レビュー🟡10: #8a7a63 on #fff8ec は3.49:1で読みにくい。本文色(--lp-ink)に上げる。 */
  color: var(--lp-ink);
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}

.door-hero__cta {
  display: block;
  /* レビュー🟢14: var(--lp-orange)そのままだと#fff8f0文字で3.31:1。ブランドに近い濃いめの橙に
     調整し、白文字との比率を4.5:1以上へ(実測約4.8:1)。 */
  background: #b84e1f;
  color: #fff8f0;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 15px;
  min-height: 44px;
  border-radius: 999px;
  box-shadow: 0 4px 0 #8a3c15;
  margin: var(--lp-space-4) 0 var(--lp-space-3);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.door-hero__cta:hover {
  color: #fff8f0;
  filter: brightness(1.05);
}

.door-hero__cta:active {
  transform: scale(0.98);
}

.door-hero__char {
  width: clamp(120px, 34vw, 160px);
  height: auto;
  margin: var(--lp-space-3) auto 0;
}

/* ===== レール(線路モチーフ・現行LPの.lp-track/.lp-stopをそのまま引き継ぐ) ===== */
.lp-track {
  position: relative;
  padding: var(--lp-space-3) var(--lp-space-4) 0 62px;
}

.lp-track::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-image: repeating-linear-gradient(to bottom, var(--lp-teal) 0 9px, transparent 9px 18px);
}

.lp-stop {
  position: relative;
  padding-bottom: var(--lp-space-6);
}

.lp-stop:last-child {
  padding-bottom: var(--lp-space-4);
}

.lp-stop__marker {
  position: absolute;
  left: -40px;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lp-cream-light);
  border: 3px solid var(--lp-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--lp-navy);
  box-shadow: 0 3px 6px rgba(30, 58, 95, 0.18);
}

.lp-stop__marker--orange {
  border-color: var(--lp-orange);
}

.lp-stop__marker--yellow {
  border-color: var(--lp-yellow);
}

.lp-stop__eyebrow {
  font-size: 0.7rem;
  color: var(--lp-teal);
  font-weight: 700;
  margin-bottom: var(--lp-space-1);
}

.lp-stop__title {
  font-size: 1.15rem;
  margin-bottom: var(--lp-space-3);
}

.lp-stop__card {
  position: relative;
  background: var(--lp-cream-light);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-4);
  box-shadow: 0 5px 14px rgba(58, 46, 34, 0.12);
}

.lp-stop__desc {
  /* レビュー🟡10: 14.4pxは小さい。本文は1remへ。 */
  font-size: 1rem;
  line-height: 1.85;
  color: var(--lp-ink);
  margin-bottom: 0;
}

/* WP後レビュー追補: 以前はカード右下に絶対配置(60px・カードの外へわずかにはみ出す)していたが、
   ウェイトリストのカードに注記(door-table__note)を追加した結果、320〜430pxの狭い幅で
   注記の行末とキャラが重なる不具合が出た。カードの外・中央下の通常フローに変更し、
   コンテンツの長さに関わらず重ならないようにする(幅120〜160px)。 */
.lp-stop__char {
  display: block;
  width: clamp(120px, 32vw, 160px);
  height: auto;
  margin: var(--lp-space-3) auto 0;
  transform: scaleX(-1);
  pointer-events: none;
}

/* ===== 機能カード内の写真サムネ(しおりデザイン見本・オリジナルフレーム作例) =====
   レビュー🟢3: role="list"/role="listitem"の<div>/<img>をやめてul/liに変更したため、
   リストの既定余白・マーカーをここでリセットする。 */
.door-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-2);
  margin-top: var(--lp-space-3);
  list-style: none;
  padding: 0;
}

.door-thumbs li {
  margin: 0;
}

.door-thumbs img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: var(--lp-radius-sm);
}

/* オリジナルフレーム作例(レビュー🟡2): height:148px;object-fit:coverだと幅の55〜74%しか
   見えず枠の飾りが切れて「ただの写真」に見えてしまう。4:5の実物比率のまま全体を見せる。 */
.door-thumbs--tall img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

/* §14: 実機スクリーンショット(縦長780×1688)を縦横比のまま小さく全体表示する(タップで拡大)。 */
.door-thumbs--3 img {
  height: auto;
  aspect-ratio: 780 / 1688;
  object-fit: contain;
}

.door-thumbs--1 {
  grid-template-columns: 1fr;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

.door-thumbs--1 img {
  height: auto;
  aspect-ratio: 780 / 1688;
  object-fit: contain;
}

/* ===== 無料とぬいたびプラスの表 =====
   320〜430pxで横スクロールさせないため、各行を「カード」として縦に積む
   レスポンシブテーブル・パターン(表そのものの意味構造はtable/th/tdのまま保つ・
   theadは視覚的に隠す=sr-onlyでスクリーンリーダー向けの列見出しは残す)。 */
.door-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--lp-space-3);
}

.door-table thead th {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.door-table tbody {
  display: block;
}

.door-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-2);
  background: var(--lp-cream);
  border-radius: var(--lp-radius-md);
  padding: var(--lp-space-3);
  margin-bottom: var(--lp-space-2);
}

.door-table tbody tr:last-child {
  margin-bottom: 0;
}

.door-table th[scope='row'] {
  flex: 1 1 100%;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lp-navy);
  padding: 0;
  margin: 0 0 var(--lp-space-1);
}

/* レビュー🟡8: 行見出しの条件部分(コード・QR等)を2行目に分け、語の途中で折り返さないようにする */
.door-table__sub {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  /* 再レビュー🟡3: ink-mutedだと#f9e9d2地で3.49:1しか無い。○に付く条件(最長7日・月5件等)の
     打消し表示に相当するため、本文色(--lp-ink)へ上げて11.05:1を確保する。 */
  color: var(--lp-ink);
}

/* 再レビュー🟡1/🟡2: 表の行見出しとフッターのWeb版リンクで、語の途中(送/る・公/開など)で
   折り返さないようにする範囲を囲むユーティリティ。 */
.door-nowrap {
  white-space: nowrap;
}

/* 高橋さん決定(69=価格を載せる): 表の直後に1回だけ出す価格の一言。door-table__subと同じ
   大きさ・色(打消し表示と同じ理由で本文色)。「ぬいたびプラス」列(表の右側)に寄せて右揃え。
   各行(カード)の「ぬいたびプラス」ラベル側には付けない(繰り返し表示を避けるため)。 */
.door-table__price {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--lp-ink);
  text-align: right;
  margin: var(--lp-space-2) 0 0;
}

.door-table td {
  flex: 1 1 0;
  min-width: 0;
  background: var(--lp-cream-light);
  border-radius: var(--lp-radius-sm);
  padding: var(--lp-space-2) var(--lp-space-1);
  text-align: center;
}

.door-table td::before {
  content: attr(data-label);
  display: block;
  /* レビュー🟡10: 10.4pxは小さすぎる */
  font-size: 0.75rem;
  color: var(--lp-ink-muted);
  font-weight: 700;
  margin-bottom: 2px;
}

.door-table__val {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lp-ink);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.door-table__val.is-yes {
  color: var(--lp-teal);
  font-size: 1.05rem;
}

.door-table__val.is-no {
  color: var(--lp-ink-muted);
  font-weight: 400;
}

.door-table__note {
  /* レビュー🟡10: 表の注記(打消し表示に相当)は12.5px/3.94:1では条件を伝えたことになりにくい */
  font-size: 0.875rem;
  color: var(--lp-ink);
  line-height: 1.7;
  margin: var(--lp-space-2) 0 0;
}

.door-table__note::before {
  content: '※ ';
}

/* ===== ウェイトリストフォーム(lp.jsがclassNameを直接書き換えるため、
   waitlist__* のクラス名は現行LPと完全に同じにする必要がある) ===== */
.waitlist__form {
  margin-top: var(--lp-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-2);
}

.waitlist__input {
  width: 100%;
  /* レビュー🟡1: 0.95rem(15.2px)だとiOS Safariがフォーカス時に画面を拡大してしまう。16px以上に固定。 */
  font-size: 16px;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--lp-navy);
  background: #fff;
  color: var(--lp-ink);
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.waitlist__input::placeholder {
  color: #a99a86;
}

.waitlist__input:focus {
  outline: 2px solid var(--lp-teal);
  outline-offset: 2px;
}

/* honeypot: 人間には見えない(botだけが埋めてしまう)入力欄 */
.waitlist__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.waitlist__submit {
  margin-top: var(--lp-space-1);
  /* レビュー🟢14: var(--lp-teal)そのままだと白文字で3.70:1。濃いめの青緑にして4.5:1以上へ(実測約4.9:1)。 */
  background: #257a97;
  color: #fff;
  text-align: center;
  padding: 13px;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.waitlist__submit:hover {
  filter: brightness(1.05);
}

.waitlist__submit:active {
  transform: scale(0.98);
}

.waitlist__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist__message {
  margin-top: var(--lp-space-2);
  font-size: 0.85rem;
  min-height: 1.4em;
}

.waitlist__message--ok {
  color: var(--lp-teal);
  font-weight: 700;
}

.waitlist__message--error {
  color: var(--lp-orange);
  font-weight: 700;
}

/* ===== データの扱いについて(CSSだけの鍵アイコン・現行LPと同じ意匠) ===== */
.lp-data-icon {
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  margin-bottom: var(--lp-space-2);
}

.lp-data-icon__body {
  position: absolute;
  left: 2px;
  top: 8px;
  width: 16px;
  height: 12px;
  border: 1.6px solid var(--lp-navy);
  border-radius: 0 0 3px 3px;
}

.lp-data-icon__shackle {
  position: absolute;
  left: 5px;
  top: 0;
  width: 10px;
  height: 9px;
  border: 1.6px solid var(--lp-navy);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

/* ===== フッター ===== */
.door-footer {
  padding: var(--lp-space-5) var(--lp-space-5) var(--lp-space-6);
  text-align: center;
}

.door-footer__brand {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--lp-navy);
  margin-bottom: var(--lp-space-3);
}

/* レビュー🟡11: フッターのリンクは実測16〜21px相当の高さしか無くタップしにくい。44px確保。 */
.door-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.door-footer__legal {
  /* レビュー🟡10: 0.75rem(12px)は小さい */
  font-size: 0.8125rem;
  display: flex;
  gap: var(--lp-space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--lp-space-2);
}

.door-footer__legal a {
  color: var(--lp-ink-muted);
  text-decoration: underline;
}

.door-footer__web {
  font-size: 0.8125rem;
  margin-bottom: var(--lp-space-3);
}

.door-footer__web a {
  /* レビュー🟡10: #b7ab98 on #f9e9d2は1.90:1でほぼ読めない。ink-mutedへ上げる。 */
  color: var(--lp-ink-muted);
  text-decoration: underline;
}

.door-footer__copy {
  font-size: 0.8125rem;
  color: var(--lp-ink-muted);
  margin-bottom: 0;
}

.door-footer__copy a {
  color: var(--lp-ink-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== ライトボックス(§14: prod-base/lp/lp.cssから移植・原文どおり) =====
   lp.jsのinitLightboxが[data-lightbox]要素を拾ってtabindex/role="button"を付与し、
   クリックで.lp-lightboxオーバーレイを開閉する。CSSはlp.cssの該当ブロックをそのまま引き継ぐ。 */
[data-lightbox] {
  cursor: zoom-in;
}

.lp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lp-space-4);
  background: rgba(20, 15, 10, 0.86);
  /* pinch-zoomを妨げない: touch-actionは既定(auto)のまま・preventDefaultもJS側で呼ばない */
}

.lp-lightbox[hidden] {
  display: none;
}

.lp-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--lp-radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  background: var(--lp-cream-light);
}

.lp-lightbox__close {
  position: absolute;
  top: var(--lp-space-3);
  right: var(--lp-space-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--lp-cream-light);
  color: var(--lp-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* §14: ①旅の記録カードの見出し一言(前LP「地図帳が育つ」と同じ構成)・写真2〜3枚の並び */
.door-stop__quote {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lp-orange);
  line-height: 1.7;
  margin-bottom: var(--lp-space-3);
}

/* §14: ⑥のCodex挿絵。PCは本文の横、スマホは本文の下(通常フローで自然に下へ回る)。 */
.door-record-figure {
  display: flex;
  justify-content: center;
  margin: var(--lp-space-3) 0 0;
}

.door-record-figure img {
  width: clamp(140px, 42vw, 200px);
  height: auto;
}

.door-record-figure figcaption {
  display: none;
}

/* 430(スマホ最大の確認幅)より上・480px以上を「PC」とみなして横並びにする(本文の横に画像)。
   .lp-stop__cardの実幅自体は.door-shell上限(520px)で頭打ちのため、480px以上の閲覧幅であれば
   常にこの横並びが有効になる(ビューポート基準の判定・カード内側の実測幅は約470pxで収まる)。 */
@media (min-width: 480px) {
  .door-record-with-figure {
    display: flex;
    align-items: center;
    gap: var(--lp-space-3);
  }
  .door-record-with-figure .door-record-figure {
    margin-top: 0;
    flex: none;
  }
}