/* ═══════════════════════════════════════════════════════════
   LP 共通スタイル v1 (2026-05-28 作成 / コンテンツ分科会3)
   ───────────────────────────────────────────────────────────
   対象: LP-ORG / LP-A / LP-B / LP-C / LP-D / LP-F 等 すべての LP
   役割: ブランド帯・フッター・connect-bar・lang-switch を
         バイトレベル完全同一に保証する単一の source of truth
   使い方: 各 LP の <head> に以下を追加
         <link rel="stylesheet" href="../_shared/lp-common.css">
   注意: 共通要素はここでのみ定義。各 LP 独自の要素 (footer-disclaimer 等)
         はその LP の <style> で定義する
   ═══════════════════════════════════════════════════════════ */


/* ─── BRAND HEADER (ブランド帯) ─── */

html body .brand-header,
html .brand-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 92px !important;
  padding: 0 !important;
  /* 2026-05-29 (95点+ 一貫性): wash → 単色に戻す（ハード境界で統一）*/
  background-image: none !important;
  background-color: #FAF8F5 !important;
  /* 2026-05-29 (95点狙い): border-top 撤去、box-shadow は維持（浮遊感）*/
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 1000 !important;
}

/* ロゴ: absolute で左端固定、height 68% */
html body .brand-header .brand-header-logo {
  position: absolute !important;
  left: 36px !important;
  top: 47% !important;
  transform: translateY(-50%) !important;
  height: 68% !important;
  width: auto !important;
  display: block !important;
  z-index: 2 !important;
}

/* ナビ: absolute で右から 36px、flex 横並び */
html body .brand-header .brand-header-nav {
  position: absolute !important;
  right: 36px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* ナビメニュー a: Cinzel 700 13px uppercase */
html body .brand-header-nav a {
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #2E2220 !important;
  padding: 8px 4px !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}
html body .brand-header-nav a:hover {
  color: #B03028 !important;
}

/* nav-cta (BOOK): Sacred Red 塗りつぶし */
html body .brand-header-nav .nav-cta {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  padding: 12px 24px !important;
  background: #B03028 !important;
  color: #FFFFFF !important;
}
html body .brand-header-nav .nav-cta:hover {
  background: #8E1F1A !important;
  color: #FFFFFF !important;
}

/* crescent (装飾) は非表示 */
html body .brand-header .brand-header-crescent {
  display: none !important;
}

/* ─── ブランド帯下端の装飾線 (金線 + 赤線) ─── */
/* 2026-05-29 (95点+ 一貫性): ヘッダー下端に 3px 金グラデ線
   （フッター上端と同仕様、ハード境界で「金で挟む」鏡像構造を成立）
   2026-05-29 補強: display: block を明示（ORG 内部の display: none 古ルール対策）*/
html body .brand-header::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    rgba(168,115,26,0) 0%,
    #A8731A 10%,
    #D4A040 25%,
    #F0D060 50%,
    #D4A040 75%,
    #A8731A 90%,
    rgba(168,115,26,0) 100%) !important;
  box-shadow: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* 2026-05-29: 赤線撤去（refinement #1）— 装飾過剰感解消 */
html body .brand-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ─── LANG-SWITCH / JA-TOGGLE (JP OFF ボタン) ─── */
/* LP-A 系は .ja-toggle、ORG は .lang-switch、両方カバー */
html body .lang-switch,
html body .ja-toggle,
html body button.lang-switch#langSwitch,
html body button.ja-toggle#jaToggle {
  position: fixed !important;
  top: 18px !important;
  right: 220px !important;             /* BOOK CTA の左に配置 */
  z-index: 2000 !important;
  background: rgba(255,255,255,0.95) !important;
  color: #2E2220 !important;
  border: 1px solid #C49830 !important;
  padding: 8px 18px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
  border-radius: 50px !important;      /* pill 形 */
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  display: inline-block !important;
}
html body .lang-switch:hover,
html body .ja-toggle:hover {
  background: #FFFFFF !important;
  color: #C49830 !important;
}

/* ─── nav 表示制御 (mobile では非表示) ─── */
@media (max-width: 900px) {
  html body .brand-header .brand-header-nav {
    display: none !important;
  }
  html body .lang-switch,
  html body .ja-toggle {
    top: 14px !important;
    right: 14px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
  }
}

/* ─── 本番リリース時 JP OFF ボタン削除フラグ ───
   May 大原則: 本番では JP ボタンを消す。制作確認中は残す
   使い方: 本番リリース時に <body> タグに class="production" を追加
   例: <body class="production"> でボタン自動非表示
   完成後は HTML から button タグも削除すれば完全削除 */
html body.production .lang-switch,
html body.production .ja-toggle,
html body.production button.lang-switch#langSwitch,
html body.production button.ja-toggle#jaToggle {
  display: none !important;
}


/* ─── FOOTER (LP 共通フッター) ─── */

/* 2026-05-29: F-inv 反転グラデーション（中庸） + 上部 5px 金ライン
   ── May 最終決定: F-inv を採用
       上 純白 → 下 saturated gold #C89830 へグラデーション
       上端に 5px 濃金グラデ線を維持（ボディとの境界を framing）
   ── 旧版バックアップ:
       lp-common.css.バックアップ_F+実装直前_20260529 (ダーク系)
       lp-common.css.F+試作版_20260529.bak (F+ 直前)
   ── 反映先: ORG, LP-A, 今後すべての LP（共通CSS のため）*/
html body footer.footer {
  position: relative !important;
  padding-top: 56px !important;
  padding-bottom: 40px !important;
  /* 2026-05-29 (95点狙い): 終点 #E5C779（中庸ゴールド止め）、中間点を詰めて滑らかに */
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #FFFAEC 22%,
    #FBF1D2 45%,
    #F2DFAE 68%,
    #E8D094 86%,
    #E5C779 100%) !important;
  color: #2E2220 !important;
  border-top: none !important;
}

/* footer 上端: 金グラデ線（3px、refinement #3 で 5px → 3px に細く）*/
html body footer.footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    rgba(168,115,26,0) 0%,
    #A8731A 10%,
    #D4A040 25%,
    #F0D060 50%,
    #D4A040 75%,
    #A8731A 90%,
    rgba(168,115,26,0) 100%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* footer 上端中央: 赤ハイライト（撤去）*/
html body footer.footer::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* footer-grid (左 1.4fr 右 1fr の 2 カラム) */
html body footer.footer .footer-grid {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 50px !important;
  padding-bottom: 40px !important;
  border-bottom: none !important;
}

/* footer-brand-label (上部小ラベル "World Divine Light Organization") */
html body footer.footer .footer-brand-label {
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  color: #A8731A !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin: 0 !important;
  opacity: 1 !important;
  /* ★ 枠なし (May 指示) */
}

/* footer-brand (大ブランド名 - Cormorant Garamond 28px 600 戦略統括即決 案D) */
html body footer.footer .footer-brand {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 28px !important;
  color: #2E2220 !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  font-style: normal !important;
  margin-top: 6px !important;
}
html body footer.footer .footer-brand .ja {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 14px !important;
  color: #4A3A28 !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  font-style: normal !important;
  margin-top: 8px !important;
  display: block !important;
}

/* footer-desc (本文説明) */
html body footer.footer .footer-desc {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4A3A28 !important;
  font-weight: 400 !important;
  max-width: 460px !important;
  margin-top: 16px !important;
}
html body footer.footer .footer-desc .ja {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 12px !important;
  color: #5A4A30 !important;
  margin-top: 8px !important;
  line-height: 1.7 !important;
  display: block !important;
}

/* footer-contact (右カラム) */
html body footer.footer .footer-contact {
  text-align: right !important;
}
html body footer.footer .footer-contact-label {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  color: #A8731A !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  opacity: 1 !important;
  /* ★ 枠なし (May 指示) */
}
html body footer.footer .footer-contact-label .ja {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 11px !important;
  color: #4A3A28 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
  margin-top: 4px !important;
  display: block !important;
}
html body footer.footer .footer-contact p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-top: 6px !important;
  color: #2E2220 !important;
}
html body footer.footer .footer-contact a {
  color: #6E4A1A !important;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(110,74,26,0.55) !important;
  padding-bottom: 1px !important;
}
html body footer.footer .footer-contact a:hover {
  text-decoration: underline !important;
}

/* footer-bottom (コピーライト + Privacy Policy) */
html body footer.footer .footer-bottom {
  max-width: 1100px !important;
  margin: 32px auto 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: rgba(46,34,32,0.88) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  border-top: 1px solid rgba(110,74,26,0.42) !important;
  padding-top: 22px !important;
  position: relative !important;
}
/* footer-bottom 上に中央装飾: gold area 上なので白菱形+金縁取りで視認性 */
html body footer.footer .footer-bottom::before {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 10px !important;
  height: 10px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #A8731A !important;
}
html body footer.footer .footer-bottom p {
  margin: 0 !important;
  color: rgba(46,34,32,0.88) !important;
}
html body footer.footer .footer-bottom a {
  color: #4A3010 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}
html body footer.footer .footer-bottom a:hover {
  color: #2E2220 !important;
}

/* JP OFF 完全対応: footer 内の全 .ja を隠す */
html body.hide-ja footer.footer .ja,
html body.hide-ja footer.footer .footer-brand .ja,
html body.hide-ja footer.footer .footer-desc .ja,
html body.hide-ja footer.footer .footer-contact-label .ja {
  display: none !important;
}


/* ─── CONNECT BAR (締めの薄ゴールド帯) ─── */

html body section.connect-bar {
  position: relative !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  background:
    radial-gradient(ellipse at 70% 25%, rgba(255,237,196,0.85) 0%, rgba(255,237,196,0) 50%),
    radial-gradient(ellipse at 25% 75%, rgba(244,221,178,0.65) 0%, rgba(244,221,178,0) 55%),
    radial-gradient(ellipse at 90% 90%, rgba(232,199,136,0.45) 0%, rgba(232,199,136,0) 50%),
    linear-gradient(180deg, #FCF6E5 0%, #F4ECDB 50%, #E8D9B4 100%) !important;
  color: #4A3A28 !important;
}
html body section.connect-bar .connect-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 50px !important;
  align-items: center !important;
}
html body section.connect-bar h4 {
  font-family: 'Cinzel', serif !important;
  font-size: 18px !important;
  color: #8A6A22 !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
html body section.connect-bar h4 .ja {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 12px !important;
  color: rgba(74,58,40,0.75) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
  display: block !important;
}
html body section.connect-bar .signup-form {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  max-width: 460px !important;
}
html body section.connect-bar .signup-form input {
  flex: 1 !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(176,134,46,0.45) !important;
  color: #2E2218 !important;
  font-family: 'EB Garamond', serif !important;
  font-size: 15px !important;
  border-radius: 2px !important;
}
html body section.connect-bar .signup-form button {
  padding: 14px 24px !important;
  background: #B03028 !important;
  color: #FFF !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}
html body section.connect-bar .connect-note {
  font-style: italic !important;
  font-size: 12px !important;
  color: rgba(74,58,40,0.65) !important;
  margin-top: 10px !important;
}
html body section.connect-bar .connect-note .ja {
  font-style: normal !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  display: block !important;
}
html body section.connect-bar .socials {
  text-align: right !important;
}
html body section.connect-bar .socials-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #8A6A22 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}
html body section.connect-bar .socials-label .ja {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 11px !important;
  color: rgba(74,58,40,0.65) !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  display: block !important;
  margin-top: 2px !important;
}
html body section.connect-bar .socials-list {
  display: flex !important;
  gap: 22px !important;
  justify-content: flex-end !important;
}
html body section.connect-bar .socials-list a {
  color: #4A3A28 !important;
  text-decoration: none !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
html body section.connect-bar .socials-list a:hover {
  color: #8A6A22 !important;
}


/* ─── HERO の上部 padding 確保 (fixed brand-header 92px と隙間ゼロ) ─── */
/* min-height を固定して JP OFF でも hero が十分な高さを保つ */
html body section.hero {
  padding-top: 92px !important;
  min-height: 92vh !important;
}

/* ─── HERO ゴールド divider を「主文と副文の間」の正しい位置に固定 ─── */
/* hero-credentials 上の border-top を撤去 (重なる原因) */
html body section.hero .hero-credentials {
  border-top: none !important;
}
/* hero::after (セクション境界の細金線) は hero-title と被るので撤去
   セクション境界は次セクションの background 色で十分に区別される */
html body section.hero::after {
  display: none !important;
}
/* hero-sub の border-top にゴールド divider を明示固定
   May「線を大文字の上部に触れるくらい近く」 */
html body section.hero .hero-sub {
  border-top: 1px solid rgba(168, 115, 26, 0.55) !important;
  padding-top: 0 !important;               /* 線と副文 = 完全密着 */
  margin-top: 18px !important;             /* 主文と線 (May「2ミリ下げて」) */
  line-height: 1.3 !important;             /* 行間を詰めて line-height の上余白を最小化 = 線が大文字の上端に触れる */
}

/* HERO 内 border 装飾撤去ルールは撤回 (May 2026-05-28 確認: 主文と副文の間のゴールド divider は意図された装飾) */


/* ═══════════════════════════════════════════════════════════
   JP OFF 完全対応 (May 大原則: 本番運用は JP OFF、日本語は制作確認用)
   全 .ja クラスを body.hide-ja で確実に display: none に
   hero, sections, footer, connect-bar 内すべての日本語要素を網羅
   ═══════════════════════════════════════════════════════════ */
html body.hide-ja .ja,
html body.hide-ja .hero-title-ja,
html body.hide-ja .hero-subtext-ja,
html body.hide-ja .hero-trust-ja,
html body.hide-ja .sec-heading-ja,
html body.hide-ja .section-title-center .ja,
html body.hide-ja section .ja,
html body.hide-ja section .hero-label .ja,
html body.hide-ja section .hero-title .ja,
html body.hide-ja section .hero-sub .ja,
html body.hide-ja section .hero-credentials .ja,
html body.hide-ja section h1 .ja,
html body.hide-ja section h2 .ja,
html body.hide-ja section h3 .ja,
html body.hide-ja section h4 .ja,
html body.hide-ja section p .ja,
html body.hide-ja section span .ja,
html body.hide-ja section .story-card .ja,
html body.hide-ja section .featured-story .ja,
html body.hide-ja section .step-text .ja,
html body.hide-ja section .faq-question .ja,
html body.hide-ja section .faq-answer .ja,
html body.hide-ja section.connect-bar .ja,
html body.hide-ja section.connect-bar h4 .ja,
html body.hide-ja section.connect-bar .connect-note .ja,
html body.hide-ja section.connect-bar .socials-label .ja,
html body.hide-ja footer .ja,
html body.hide-ja footer.footer .ja,
html body.hide-ja footer.footer .footer-brand .ja,
html body.hide-ja footer.footer .footer-desc .ja,
html body.hide-ja footer.footer .footer-contact-label .ja,
html body.hide-ja footer.footer .footer-disclaimer .ja,
html body.hide-ja header .ja,
html body.hide-ja .brand-header .ja {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   HERO 内レイアウト固定 (JP OFF でも安定する縦リズム)
   日本語 span が消えても各要素間の余白が一定になるよう、明示 margin
   ═══════════════════════════════════════════════════════════ */
html body section.hero .hero-label {
  margin-bottom: 24px !important;
}
html body section.hero h1.hero-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;          /* hero-sub の margin-top で間隔制御 */
}
html body section.hero .hero-title-ja {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
/* hero-sub の margin-top/padding-top は line 528 周辺で定義済み (主文との距離 + 線+ 副文の直前) */
html body section.hero .hero-sub {
  margin-bottom: 18px !important;        /* 副文と credentials の距離 */
}
html body section.hero .hero-credentials {
  margin-top: 24px !important;
  margin-bottom: 28px !important;
}


/* ═══════════════════════════════════════════════════════════
   HERO VIDEO (動画化対応・写真と完全に同じ箱で振る舞う)
   ── 仕様 ─────────────────────────────────────────────────
   ・<video class="hero-img hero-video"> として配置（既存 .hero-img の
     position/size 規則を継承する）
   ・autoplay/muted/loop/playsinline で背景動画として常時静音再生
   ・poster は従来のポスター画像（読込中/再生不可端末は写真表示）
   ・object-fit: cover で写真と同じ構図、object-position は .hero-img を継承
   ・iOS Safari 等で autoplay 拒否されてもユーザーに違和感が無いよう
     インライン再生 + ミュート + posters を必須にしている
   ═══════════════════════════════════════════════════════════ */
html body section.hero video.hero-img,
html body section.hero .hero-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 70% 50% !important;
  display: block !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* 一部 Chromium で video が overflow を作る対策 */
  pointer-events: none !important;
  background: #2E2220 !important;
}
/* video 内 fallback img は CSS で外形を合わせる */
html body section.hero video.hero-img > img,
html body section.hero .hero-video > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 70% 50% !important;
}
