/* =============================================================
 * Bremont.jp LP — Stylesheet
 * Source of Truth: bremont.com 実機 computed style (取得 2026-06-24)
 * Tokens: Color / Typography / Layout
 * ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── DESIGN TOKENS ─── */
:root {
  /* COLOR (bremont.com 実機トークン名+値) */
  --Color_Brand:        #121212;
  --Color_Brand-80:     rgba(18, 18, 18, .8);
  --Color_Brand-60:     rgba(18, 18, 18, .6);
  --Color_Brand-40:     rgba(18, 18, 18, .4);
  --Color_Brand-10:     rgba(18, 18, 18, .1);
  --Color_White:        #fff;
  --Color_White-80:     rgba(255, 255, 255, .8);
  --Color_White-70:     rgba(255, 255, 255, .7);
  --Color_White-60:     rgba(255, 255, 255, .6);
  --Color_White-40:     rgba(255, 255, 255, .4);
  --Color_White-20:     rgba(255, 255, 255, .2);
  --Color_White-10:     rgba(255, 255, 255, .1);
  --Color_Brown:        #aa9069;        /* Wayfinder Gold / 強調 */
  --Color_DarkGrey:     #312e2b;
  --Color_Grey:         #707070;
  --Color_Supernova:    #76bada;
  --Color_Border-light: rgba(255, 255, 255, .1);
  --Color_Border:       rgba(18, 18, 18, .1);
  --Color_Cream:        #f2f1eb;
  --Color_PlaceholderBg:#f4f4f4;

  /* TYPOGRAPHY (実機: Decimal=見出し+本文, Montserrat=ナビ/UI, JP=Shippori Mincho) */
  --Font_Family-headings: Georgia, "Times New Roman", "Decimal", serif;
  --Font_Family-decimal:  Georgia, "Times New Roman", "Decimal", serif;
  --Font_Family-body:     "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --Font_Family-jp:       "Shippori Mincho", Georgia, serif;

  /* LAYOUT (実機) */
  --Grid_Container:        1440px;
  --Grid_Container-medium: 1054px;
  --Grid_Container-small:  675px;
  --Grid_Gutter:           30px;
  --Nav_Height:            90px;
  --Nav_Height-condensed:  70px;
}

html {
  scroll-behavior: smooth;
  /* スマホの「ぐにゃぐにゃ」対策 (2026-07-02):
   * - overflow-x: body 側だけの hidden は iOS Safari で横に引っ張れる → html 側でも封じる
   * - overscroll-behavior-y: 縦端のゴムバンド / Pull-to-Refresh を抑制 */
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* ─── BASE TYPOGRAPHY (bremont.com 実機準拠: body bg #fff / color #121212) ─── */
body {
  background: var(--Color_White);
  color: var(--Color_Brand);
  font-family: var(--Font_Family-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
  /* ダブルタップズームによる揺れを抑制 (タップ遅延も解消) */
  touch-action: manipulation;
}

/* 実機準拠 spec
 * H1 = Decimal 32/48/0.3 non-upper
 * H2 = 24/32/8px UPPER
 * H3 = 16/20/1.6 UPPER
 * P  = Decimal 20/28/0.3
 * A  = Montserrat 16/0.3
 * 色は文脈ごとに上書き
 */
h1 { font-family: var(--Font_Family-headings); font-size: 32px; font-weight: 400; letter-spacing: 0.3px; line-height: 48px; }
h2 { font-family: var(--Font_Family-headings); font-size: 24px; font-weight: 400; letter-spacing: 8px;   line-height: 32px; text-transform: uppercase; }
h3 { font-family: var(--Font_Family-headings); font-size: 16px; font-weight: 500; letter-spacing: 1.6px; line-height: 20px; text-transform: uppercase; }
p  { font-family: var(--Font_Family-headings); font-size: 20px; font-weight: 400; letter-spacing: 0.3px; line-height: 28px; }
a  { font-family: var(--Font_Family-body);     font-size: 16px; font-weight: 400; letter-spacing: 0.3px; text-decoration: none; color: var(--Color_Brand); }

/* ─── BUTTON (実機 outline スタイル) ─── */
.btn {
  display: inline-block;
  font-family: var(--Font_Family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  line-height: 1;
  text-transform: uppercase;
  padding: 14px 24px 12px;
  border-radius: 0;
  background: transparent;
  color: var(--Color_White);
  border: 1px solid var(--Color_White);
  cursor: pointer;
  white-space: nowrap;
}
.btn--gold {
  border-color: var(--Color_Brown);
  color: var(--Color_Brown);
}

/* ─── EYEBROW (実機 spec: 12/600/0.8 UPPER) ─── */
.eyebrow {
  font-family: var(--Font_Family-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--Color_Grey);
}
.eyebrow--on-dark { color: var(--Color_White-70); }
.eyebrow--gold    { color: var(--Color_Brown); }

/* ─── DOUBLE HEADER (ISHIDA 白 + BREMONT 透明) ─── */
.header-ishida {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 90px;
  background: var(--Color_White);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.header-ishida img { height: 40px; width: auto; }

.header-bremont {
  position: fixed;
  top: 90px; left: 0; right: 0;
  z-index: 99;
  height: 90px;
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 180px 0 96px;       /* ishida 90 + bremont 90 */
  background: var(--Color_Brand);
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* 動画素材にハードコードされた letterbox 黒帯を画面外へ */
  transform: scale(1.3);
  transform-origin: center center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0%,    /* 上部完全透明 — BREMONT ヘッダーが動画を透ける */
    rgba(0, 0, 0, 0)    22%,
    rgba(0, 0, 0, 0.10) 45%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.95) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--Grid_Container);
  margin: 0 auto;
  /* max-width(1440px) 到達後は padding が伸び続けないよう頭打ち
     (1440px * 8% = 115.2px) — ウィンドウを広げるほど文字幅が
     狭まり意図しない改行が起きる不整合を解消 */
  padding: 0 clamp(24px, 8vw, 115.2px);
  text-align: center;
}

/* DNA コピー: 詩情のある日本語、Shippori Mincho */
.dna-copy {
  font-family: var(--Font_Family-jp);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.16em;
  color: var(--Color_White-80);
  margin-bottom: 8px;
}
.dna-copy strong {
  display: block;
  font-weight: 500;
  color: var(--Color_White);
  margin-top: 4px;
}

.gold-rule {
  width: 1px;
  height: 56px;
  background: var(--Color_White-40);
  margin: 48px auto;
}

/* Killer Copy: 実機 Decimal H1 を踏襲しつつ尺感は LP 向けに拡大 */
.killer-jp {
  display: block;
  font-family: var(--Font_Family-jp);
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--Color_White);
  margin-bottom: 20px;
}
.killer-en {
  display: block;
  font-family: var(--Font_Family-headings);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--Color_Supernova);
}

.launch-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 64px;
  font-family: var(--Font_Family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--Color_White-70);
}
.launch-line .dot {
  width: 4px;
  height: 4px;
  background: var(--Color_White-40);
  border-radius: 50%;
}
.launch-line strong {
  color: var(--Color_White);
  font-weight: 600;
  letter-spacing: 1.6px;
}

/* ─── REGISTRATION GATE (light section: Cream背景 / 黒文字)
 * 7/16 紅林様FB: HERO直下へ移動。ダーク動画→Creamでキャンペーン帯として独立させる ─── */
.section-gate {
  padding: 140px 8vw;
  background: var(--Color_Cream);
  border-top: 1px solid var(--Color_Border);
}
.gate-inner {
  max-width: var(--Grid_Container-medium);
  margin: 0 auto;
  text-align: center;
}
.gate-eyebrow { margin-bottom: 32px; }
.gate-headline {
  font-family: var(--Font_Family-jp);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--Color_Brand);
  margin-bottom: 32px;
}
.gate-headline span {
  display: block;
  margin-top: 12px;
  font-family: var(--Font_Family-headings);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--Color_Grey);
}
.gate-body {
  font-family: var(--Font_Family-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 2;
  color: var(--Color_DarkGrey);
  margin: 0 auto 56px;
  max-width: 640px;
}
.gate-body em {
  font-style: normal;
  color: var(--Color_Brand);
  font-weight: 600;
}

/* ─── AI体験 公開中バッジ + ステップ導線 (8/14 FB) ─── */
.gate-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--Font_Family-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  color: var(--Color_Brown);
  border: 1px solid var(--Color_Brown);
  padding: 10px 22px 9px;
  margin-bottom: 32px;
}
.gate-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--Color_Brown);
  animation: gate-live-pulse 2s ease-in-out infinite;
}
@keyframes gate-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.gate-steps {
  max-width: 760px;
  margin: 0 auto 64px;
}
.gate-steps-lead {
  font-family: var(--Font_Family-jp);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--Color_Brand);
  margin-bottom: 36px;
}
.gate-steps-lead em {
  font-style: normal;
  color: var(--Color_Brown);
}
.gate-steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gate-steps-list li {
  background: var(--Color_White);
  border: 1px solid var(--Color_Border);
  padding: 28px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--Color_Brown);
  border-radius: 50%;
  font-family: var(--Font_Family-headings);
  font-size: 20px;
  line-height: 1;
  color: var(--Color_Brown);
}
.step-txt {
  font-family: var(--Font_Family-body);
  font-size: 13px;
  letter-spacing: 0.4px;
  line-height: 1.9;
  color: var(--Color_DarkGrey);
}
.step-txt em {
  font-style: normal;
  font-weight: 600;
  color: var(--Color_Brand);
}
.gate-steps-arrow {
  font-size: 24px;
  color: var(--Color_Brown);
  margin: 24px 0 16px;
}
.gate-steps-done {
  font-family: var(--Font_Family-jp);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--Color_Brand);
}
.gate-steps-done span {
  display: block;
  margin-top: 10px;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--Color_DarkGrey);
}

/* ─── BEFORE / AFTER 体験イメージ (7/16 紅林様FB + 閣下FB)
 * 「公式シーン + あなたの1枚 → あなたがそこにいる」の数式で見せる。
 * 左(公式シーン)と右(After)は同一DNAで同期クロスフェード、中央のあなたの1枚は固定 ─── */
.gate-ba {
  max-width: 880px;
  margin: 0 auto 64px;
}
.gate-ba-eyebrow { margin-bottom: 28px; }
.gate-ba-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.gate-ba-pair figure { margin: 0; }
.gate-ba-pair figcaption {
  margin-top: 12px;
  font-family: var(--Font_Family-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--Color_Grey);
}
.gate-ba-after-caption { color: var(--Color_Brand) !important; font-weight: 600; }

/* 中央ユニット: ＋ あなたの1枚 → */
.gate-ba-mid {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gate-ba-plus,
.gate-ba-arrow {
  font-size: 22px;
  color: var(--Color_Brown);
  line-height: 1;
}
.gate-ba-you img {
  width: clamp(96px, 11vw, 150px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--Color_Border);
}
.gate-ba-you figcaption {
  text-align: center;
  font-size: 11px !important;
  margin-top: 8px !important;
}
.gate-ba-frames {
  position: relative;
  aspect-ratio: 1 / 1;
}
.gate-ba-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--Color_Border);
  opacity: 0;
  transition: opacity 900ms ease;
}
.gate-ba-frames img.is-active { opacity: 1; }
.gate-ba-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.gate-ba-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--Color_Brand-10);
  transition: background 300ms ease;
}
.gate-ba-dots span.is-active { background: var(--Color_Brown); }
.gate-ba-note {
  margin-top: 16px;
  font-family: var(--Font_Family-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--Color_Grey);
}

/* ─── FORM (実機 outline 美学) ─── */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.form-row             { display: flex; width: 100%; }
.form-row-name,
.form-row-kana        { gap: 12px; }
.form-row-email       { gap: 0; }

.register-form input[type="email"],
.register-form input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  background: var(--Color_White);
  border: 1px solid var(--Color_Brand-40);
  color: var(--Color_Brand);
  font-family: var(--Font_Family-body);
  font-size: 14px;
  letter-spacing: 0.3px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
/* email + button は密着レイアウト */
.form-row-email input[type="email"]   { border-right: none; }
.register-form input::placeholder     { color: var(--Color_Grey); }
.register-form input:focus            { border-color: var(--Color_Brand); }

/* 実機 btn-Button-primary 準拠: bg #121212 / color #fff / border 1px #121212 */
.register-form button {
  height: 56px;
  padding: 0 32px;
  background: var(--Color_Brand);
  border: 1px solid var(--Color_Brand);
  color: var(--Color_White);
  font-family: var(--Font_Family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.register-form button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ─── PRIVACY CONSENT ─── */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  margin: 24px auto 0;
  font-family: var(--Font_Family-body);
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 1.7;
  color: var(--Color_DarkGrey);
  text-align: left;
}
.consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--Color_Brand);
  cursor: pointer;
}
.consent label { cursor: pointer; }
.consent a {
  color: var(--Color_Brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 13px;
}

.form-message {
  margin-top: 18px;
  font-family: var(--Font_Family-body);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--Color_DarkGrey); /* 旧 White-70 は light 背景で不可視だった */
  min-height: 18px;
  text-align: center;
}

.success-message {
  display: none;
  max-width: 560px;
  margin: 0 auto;
  padding-top: 16px;
}
.success-message.show       { display: block; }
.register-form.hide         { display: none; }
.success-message p {
  font-family: var(--Font_Family-jp);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--Color_Brand);
  margin-bottom: 10px;
}
.success-message small {
  font-family: var(--Font_Family-body);
  font-size: 13px;
  letter-spacing: 0.4px;
  line-height: 1.9;
  color: var(--Color_Brand-60);
}

.gate-note {
  margin: 36px auto 0;
  font-family: var(--Font_Family-body);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--Color_Grey);
  line-height: 1.9;
  max-width: 560px;
}

/* ─── SECTION HEADING (共通) ─── */
.section-heading {
  text-align: center;
  max-width: var(--Grid_Container-medium);
  margin: 0 auto 64px;
}
.section-heading .eyebrow { margin-bottom: 20px; }
.section-heading h2 {
  font-family: var(--Font_Family-jp);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: none;
  color: var(--Color_Brand);
}
.section-heading h2 .en {
  display: block;
  margin-top: 16px;
  font-family: var(--Font_Family-headings);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--Color_Grey);
}

/* ─── DNA GRID (4 シーン: 焼込PoC v2 / 白背景) ─── */
.section-dna {
  padding: 140px 8vw 100px;
  background: var(--Color_White);
}
.dna-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: var(--Grid_Container);
  margin: 0 auto;
}
/* dna-item は <a> (7/16 紅林様FB: バナー扱いで全てクリッカブル → 商品ページへ) */
.dna-item {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--Color_PlaceholderBg);
}
.dna-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease, opacity 600ms ease;
}
.dna-item:hover img {
  transform: scale(1.03);
  opacity: 0.92;
}

/* ─── PRESS EVENT (Cream / Ivory 背景) ─── */
.section-press {
  padding: 140px 8vw;
  background: var(--Color_Cream);
  border-top: 1px solid var(--Color_Border);
}
.press-inner {
  max-width: var(--Grid_Container-medium);
  margin: 0 auto;
  text-align: center;
}
.press-eyebrow { margin-bottom: 24px; }
.press-title {
  font-family: var(--Font_Family-jp);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--Color_Brand);
  margin-bottom: 40px;
}
.press-body {
  font-family: var(--Font_Family-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 2.1;
  color: var(--Color_DarkGrey);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.press-body strong {
  color: var(--Color_Brand);
  font-weight: 600;
}

/* ─── FOOTER (BREMONT Black) ─── */
footer {
  padding: 72px 8vw 48px;
  background: var(--Color_Brand);
  color: var(--Color_White);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
footer img {
  height: 36px;
  width: auto;
  opacity: 0.95;
}
.footer-domain {
  font-family: var(--Font_Family-headings);
  font-size: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--Color_White);
  margin-top: 4px;
}
.footer-links {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid var(--Color_White-10);
  width: 100%;
  max-width: 720px;
  margin-top: 8px;
}
.footer-links a {
  font-family: var(--Font_Family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--Color_White-70);
}
.footer-copy {
  font-family: var(--Font_Family-body);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--Color_White-40);
  line-height: 1.8;
}

/* ─── PC/SP responsive line break utilities ─── */
@media (max-width: 768px) {
  .pc-only { display: none; }
}
@media (min-width: 769px) {
  .sp-only { display: none; }
}

/* ─── HERO INNER (公式アナウンス版) ─── */
.hero-inner--announcement {
  text-align: center;
}
.hero-announcement-eyebrow {
  color: var(--Color_Brown);
  margin-bottom: 8px;
}
.hero-announcement-headline {
  font-family: var(--Font_Family-jp);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.55;
  color: var(--Color_White);
  margin: 0 auto 48px;
}
.hero-announcement-body {
  font-family: var(--Font_Family-body);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 2.1;
  color: var(--Color_White-80);
  max-width: 640px;
  margin: 0 auto;
}
.hero-announcement-body strong {
  color: var(--Color_White);
  font-weight: 600;
}

/* ─── GATE CAMPAIGN (旧 hero copy をキャンペーン section に移動 / White 背景仕様) ─── */
.gate-prologue {
  font-family: var(--Font_Family-jp);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.16em;
  color: var(--Color_DarkGrey);
  margin-bottom: 32px;
}
.gate-prologue strong {
  display: block;
  font-weight: 500;
  color: var(--Color_Brand);
  margin-top: 4px;
}
.gate-killer {
  margin: 0 0 32px;
}
.gate-killer .killer-jp {
  color: var(--Color_Brand);
  font-size: clamp(28px, 4vw, 56px);
}
.gate-killer .killer-en {
  color: var(--Color_Brown);
}

/* h3 化に伴う既存 .gate-headline サイズ縮小 */
.gate-headline {
  font-size: clamp(22px, 2.8vw, 36px) !important;
}

/* ─── ANNOUNCEMENT (日本 本格上陸 + 正規代理店 / Cream 静謐型 / hero に統合済 = dead code) ─── */
.section-announcement {
  padding: 160px 8vw;
  background: var(--Color_Cream);
  border-top: 1px solid var(--Color_Border);
}
.announcement-inner {
  max-width: var(--Grid_Container-medium);
  margin: 0 auto;
  text-align: center;
}
.announcement-eyebrow { margin-bottom: 24px; }
.announcement-rule {
  width: 1px;
  height: 56px;
  background: var(--Color_Brown);
  margin: 32px auto 40px;
}
.announcement-headline {
  font-family: var(--Font_Family-jp);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--Color_Brand);
  margin-bottom: 48px;
}
.announcement-body {
  font-family: var(--Font_Family-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 2.1;
  color: var(--Color_DarkGrey);
  max-width: 640px;
  margin: 0 auto;
}
.announcement-body strong {
  color: var(--Color_Brand);
  font-weight: 600;
}

/* ─── STORES (ISHIDA表参道 公式店舗誘導 / White 背景) ─── */
.section-stores {
  padding: 140px 8vw;
  background: var(--Color_White);
  border-top: 1px solid var(--Color_Border);
}
.stores-inner {
  max-width: var(--Grid_Container-medium);
  margin: 0 auto;
  text-align: center;
}
.stores-eyebrow { margin-bottom: 24px; }
.stores-headline {
  font-family: var(--Font_Family-jp);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--Color_Brand);
  margin-bottom: 32px;
}
.stores-body {
  font-family: var(--Font_Family-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 2.1;
  color: var(--Color_DarkGrey);
  max-width: 640px;
  margin: 0 auto 48px;
}
.stores-body strong {
  color: var(--Color_Brand);
  font-weight: 600;
}

/* stores-media (Map + 店舗外観 2列 grid) */
.stores-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 100%;
  margin: 48px auto 40px;
}

/* stores-map (Google Map iframe / Bremont 高級感のため subtle desaturate) */
.stores-map {
  margin: 0;
  border: 1px solid var(--Color_Border);
  background: var(--Color_White);
}
.stores-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  filter: grayscale(0.15);
}

/* stores-photo (店舗外観写真) */
.stores-photo {
  border: 1px solid var(--Color_Border);
  background: var(--Color_White);
  overflow: hidden;
}
.stores-photo img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}

/* stores-info (住所 / 電話 / 営業時間 — definition list 形式) */
.stores-info {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: left;
  border-top: 1px solid var(--Color_Border);
}
.stores-info-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--Color_Border);
  align-items: baseline;
}
.stores-info dt {
  font-family: var(--Font_Family-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--Color_Brown);
  margin: 0;
}
.stores-info dd {
  font-family: var(--Font_Family-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 1.8;
  color: var(--Color_DarkGrey);
  margin: 0;
}
.stores-info dd a {
  color: var(--Color_DarkGrey);
  text-decoration: none;
  border-bottom: 1px solid var(--Color_Border);
  transition: color 200ms ease, border-color 200ms ease;
}
.stores-info dd a:hover {
  color: var(--Color_Brown);
  border-bottom-color: var(--Color_Brown);
}

/* ─── PRODUCTS (BREMONT 商品ページ誘導 / Cream 背景) ─── */
.section-products {
  padding: 140px 8vw;
  background: var(--Color_Cream);
  border-top: 1px solid var(--Color_Border);
}
.products-inner {
  max-width: var(--Grid_Container-medium);
  margin: 0 auto;
  text-align: center;
}
.products-eyebrow { margin-bottom: 24px; }
.products-headline {
  font-family: var(--Font_Family-jp);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--Color_Brand);
  margin-bottom: 32px;
}
.products-body {
  font-family: var(--Font_Family-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 2.1;
  color: var(--Color_DarkGrey);
  max-width: 640px;
  margin: 0 auto 48px;
}

/* ─── CTA LINK (Warm Gold underline / stores + products 共通) ─── */
.cta-link {
  display: inline-block;
  font-family: var(--Font_Family-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--Color_Brown);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--Color_Brown);
  transition: opacity 200ms ease;
}
.cta-link:hover { opacity: 0.7; }

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
  .header-ishida          { height: 96px; padding: 0 20px; }
  .header-ishida img      { height: 40px; }
  .header-bremont         { top: 96px; height: 64px; }

  .hero                   { padding: 180px 0 72px; }
  .hero-inner             { padding: 0 24px; }

  .section-gate           { padding: 100px 24px; }
  .section-dna            { padding: 100px 24px 72px; }
  .section-press          { padding: 100px 24px; }
  .section-announcement   { padding: 100px 24px; }
  .section-stores         { padding: 100px 24px; }
  .section-products       { padding: 100px 24px; }

  .stores-media           {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stores-map iframe      { height: 240px; }
  .stores-photo img       { height: 240px; }
  .stores-info-row        {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 4px;
  }
  .gate-killer .killer-jp { font-size: clamp(26px, 8vw, 40px); }

  /* DNA 4行が375px幅で3行に折れる対策 (2026-07-02):
   * 16pxではセグメント幅339px > 実効327px。14pxなら298pxで2行に収まる */
  .gate-body              { font-size: 14px; letter-spacing: 0.3px; }

  /* AI体験ステップ: SPは縦積み・番号を左に置く横組みカード */
  .gate-steps-list        { grid-template-columns: 1fr; gap: 12px; }
  .gate-steps-list li     {
    flex-direction: row;
    text-align: left;
    padding: 16px 18px;
    gap: 16px;
  }
  .step-no                { flex-shrink: 0; width: 34px; height: 34px; font-size: 17px; }
  .step-txt br            { display: none; }
  .gate-live-badge        { font-size: 12px; letter-spacing: 2px; padding: 9px 18px 8px; }

  /* 「BREMONT 全コレクションを、」がSPで折れて「を、」孤立する対策。
   * 20pxで2行に収まることを390px実測で確認済み */
  .products-headline      { font-size: 20px; }

  .register-form          { flex-direction: column; }

  .dna-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .launch-line            { flex-wrap: wrap; gap: 8px; font-size: 11px; }
  .footer-links           { gap: 24px; }

  /* SP は縦並びの数式 (シーン → ＋ → あなたの1枚 → ↓ → After)。横並びは画像が小さすぎる (閣下FB 7/16) */
  .gate-ba-pair {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .gate-ba-scene,
  .gate-ba-after { width: min(100%, 300px); }
  .gate-ba-pair figcaption { text-align: center; }
  .gate-ba-mid {
    flex-direction: column;
    gap: 12px;
  }
  .gate-ba-plus,
  .gate-ba-arrow { font-size: 20px; }
  .gate-ba-arrow { transform: rotate(90deg); }
  .gate-ba-you img { width: 110px; margin: 0 auto; }
  .gate-ba-dots  { margin-top: 20px; }
}