/* ═══════════════════════════════════════════
   琥珀楼 — en.css
   英語版専用の上書きスタイル
   （config.css / common.css / pc.css / sp.css の後に読み込む）
═══════════════════════════════════════════ */

/* ───────────────────────────────────────────
   J/E 言語切り替えスイッチ（HV右上）
   イントロ到達でフェードアウト（main.jsのheader-show連動）
─────────────────────────────────────────── */
.lang-switch {
  position: fixed;
  top: 30px; right: 55px;
  z-index: 250;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-serif);
  opacity: 1;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
/* ヘッダーが出たら（=イントロ通過）切り替えスイッチを消す */
.lang-switch.lang-switch--hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.lang-switch-btn {
  font-size: 17px; font-weight: 400; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.55);
  transition: color 0.3s var(--ease);
  line-height: 1;
}
.lang-switch-btn:hover { color: var(--amber); }
.lang-switch-btn.is-active { color: var(--amber); }
.lang-switch-sep { color: rgba(255,255,255,0.3); font-size: 12px; }

/* ヘッダー内 日本語リンク */
.header-lang { font-size: 0.72rem !important; }

/* SPナビ内 言語切り替えリンク */
.sp-nav-lang { font-size: 16px; color: var(--amber); }

@media (min-width: 768px) {
  /* ───────────────────────────────────────
     MV — 英語を大字（白）、日本語を小字（琥珀）
  ─────────────────────────────────────── */
  /* 英語＝白・大字（serif）。元の .mv-catch-en（琥珀小）を上書き */
  .lang-en .mv-catch-en.mv-catch-main {
    font-family: var(--font-serif);
    font-size: 37px; font-weight: 600;
    line-height: 1.6; letter-spacing: 4px;
    color: var(--white);
    margin-top: 0; white-space: nowrap;
  }
  /* 日本語＝琥珀色・小字（明朝）。元の .mv-catch-ja（白大）を上書き */
  .lang-en .mv-catch-ja.mv-catch-sub {
    font-family: var(--font-mincho);
    font-size: 16px; font-weight: 400;
    line-height: 1.5; letter-spacing: 8px;
    color: rgba(212,184,122,0.8);
    margin-top: 45px; white-space: nowrap;
  }

  /* ───────────────────────────────────────
     INTRO — 横書き：英語（大）＋日本語（小）
     縦書きブロックは廃止。stage高さを調整
  ─────────────────────────────────────── */
  .intro-stage { height: 560px; }

  /* 英語＝白・大字ゴシック。写真a（left:360px）に被らない幅に */
  .lang-en .intro-en-lead {
    position: absolute; top: 350px; left: 75px; width: 520px;
  }
  .lang-en .intro-en-lead p {
    font-family: var(--font-serif);
    font-size: 20px; font-weight: 400;
    line-height: 1.4; letter-spacing: 1px;
    color: var(--white);
  }
  /* 日本語＝琥珀色・明朝小字。写真の下にマージンを取って配置 */
  .lang-en .intro-ja-sub {
    position: absolute; top: 460px; left: 95px; width: 520px;
  }
  .lang-en .intro-ja-sub p {
    font-family: var(--font-mincho);
    font-size: 13px; font-weight: 400;
    line-height: 2.0; letter-spacing: 0.12em;
    color: rgba(212,184,122,0.75);
  }
  /* 写真の位置はそのまま活かす（pc.css の a/b/c を継承） */

  /* ───────────────────────────────────────
     PLACE — 横書き：英語（大）＋日本語（小）
     右側に配置
  ─────────────────────────────────────── */
  .place-stage { height: 600px; }

  /* 英語＝白・大字ゴシック。写真d（left:380〜750px）を避け右側に */
  .lang-en .place-en-lead {
    position: absolute; top: 50px; left: 800px; width: 290px;
      text-align: right
  }
  .lang-en .place-en-lead p {
    font-family: var(--font-serif);
    font-size: 20px; font-weight: 400;
    line-height: 1.6; letter-spacing: 0.5px;
    color: var(--white);
  }
  /* 日本語＝琥珀色・明朝小字。下にマージンを取って配置 */
  .lang-en .place-ja-sub {
    position: absolute; top: 250px; left: 530px; width: 520px;
    text-align: right;
  }
  .lang-en .place-ja-sub p {
    font-family: var(--font-mincho);
    font-size: 13px; font-weight: 400;
    line-height: 2.0; letter-spacing: 0.12em;
    color: rgba(212,184,122,0.7);
  }

  /* ───────────────────────────────────────
     MENU — 英語（大）＋日本語（小）
  ─────────────────────────────────────── */
  .lang-en .menu-title-main {
    font-family: var(--font-serif);
    font-size: 34px; font-weight: 700;
    line-height: 1.1; letter-spacing: 6px;
    color: var(--black); margin-bottom: 14px;
  }
  .lang-en .menu-title-sub {
    font-family: 'Noto Serif JP', var(--font-mincho);
    font-size: 14px; font-weight: 500;
    letter-spacing: 0.3em; color: var(--brown);
    margin-bottom: 14px;
  }

    /* MENU サブコピー：英語（大）＋日本語（琥珀・小） */
  .lang-en .menu-sub-copy-en {
    font-family: var(--font-serif);
    font-size: 18px; font-weight: 400;
    line-height: 1.8; letter-spacing: 2px;
    color: var(--black);
  }
  .lang-en .menu-sub-ja {
    font-family: 'Noto Serif JP', var(--font-mincho);
    font-size: 13px; font-weight: 500;
    line-height: 1.9; letter-spacing: 0.1em;
    color: var(--amber-dark);
    opacity: 1; margin-top: 26px;
  }
  /* ───────────────────────────────────────
     INFORMATION — 英語（大）＋日本語（小）
  ─────────────────────────────────────── */
  .lang-en .info-title-main {
    font-family: var(--font-serif);
    font-size: 30px; font-weight: 700;
    line-height: 1.2; letter-spacing: 5px;
    color: var(--black); margin-bottom: 12px;
  }
  .lang-en .info-title-sub {
    font-family: 'Noto Serif JP', var(--font-mincho);
    font-size: 14px; font-weight: 500;
    letter-spacing: 0.2em; color: var(--brown);
    margin-bottom: 12px;
  }
  /* INFO テーブル：英語ラベルは折り返さず幅確保 */
  .lang-en .info-table th { width: 130px; }

} /* end PC */


@media (max-width: 767px) {
  /* 言語スイッチ：SPは右上・小さめ */
  .lang-switch { top: 25px; right: 40px; }
  .lang-switch-btn { font-size: 12px; }

  /* MV 英語＝白・大字（serif）／日本語＝琥珀色・小字 */
  .lang-en .mv-catch-en.mv-catch-main {
    font-family: var(--font-serif);
    font-size: 38px; font-weight: 600;
    line-height: 1.35; letter-spacing: 2px;
    color: var(--white); white-space: normal;
    padding: 0 24px;
  }
  .lang-en .mv-catch-ja.mv-catch-sub {
    font-family: var(--font-mincho);
    font-size: 13px; font-weight: 400;
    letter-spacing: 5px; color: rgba(212,184,122,0.8);
    margin-top: 14px;
  }

  /* INTRO / PLACE コピー：英語＝白・大字ゴシック／日本語＝琥珀色・明朝小字 */
  .lang-en .sp-section-copy-en p {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 400;
    line-height: 1.75; letter-spacing: 0.3px;
    color: var(--white);
  }
  .lang-en .sp-section-ja-sub p {
    font-family: var(--font-mincho);
    font-size: 12px; font-weight: 400;
    line-height: 2.0; letter-spacing: 0.1em;
    color: rgba(212,184,122,0.75);
          text-align: right;

  }

  /* MENU タイトル 英語（大）＋日本語（小） */
  .lang-en .menu-title-main {
    font-family: var(--font-serif);
    font-size: 24px; font-weight: 700;
    letter-spacing: 4px; color: var(--black);
    margin-bottom: 10px;
  }
  .lang-en .menu-title-sub {
    font-family: 'Noto Serif JP', var(--font-mincho);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.25em; color: var(--brown);
    margin-bottom: 12px;
  }
    
    /* MENU サブコピー：英語（大）＋日本語（琥珀・小） */
  .lang-en .menu-sub-copy-en {
    font-family: var(--font-serif);
    font-size: 14px; font-weight: 400;
    line-height: 1.8; letter-spacing: 1px;
    color: var(--black);
  }
  .lang-en .menu-sub-ja {
    font-family: 'Noto Serif JP', var(--font-mincho);
    font-size: 11px; font-weight: 500;
    line-height: 1.9; letter-spacing: 0.08em;
    color: var(--amber-dark);
    opacity: 1; margin-top: 12px;
  }

  /* INFO タイトル 英語（大）＋日本語（小） */
  .lang-en .info-title-main {
    font-family: var(--font-serif);
    font-size: 22px; font-weight: 700;
    letter-spacing: 3px; color: var(--black);
    margin-bottom: 10px;
  }
  .lang-en .info-title-sub {
    font-family: 'Noto Serif JP', var(--font-mincho);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.2em; color: var(--brown);
    margin-bottom: 12px;
  }
  .info-table th { width: 92px; }

} /* end SP */

/* ═══════════════════════════════════════════
   HV 画像の PC/SP 出し分け（共通）
   .mv-photo は inset:0 の枠。中の img は枠いっぱいに敷く
═══════════════════════════════════════════ */
.mv-img-pc, .mv-img-sp {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   中間ブレイクポイント（768px〜1279px）— EN版
   ── pc.css側のJP版と同じ考え方で、EN版テキストブロックの
      left/width を1100px基準の%に変換して追従させる
   ── 写真（.intro-photo-*, .place-photo-*）はJP/EN共通クラスなので
      pc.css側の変換で既に追従済み。ここではEN専用テキストのみ調整
═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1279px) {

  /* ── INTRO（EN） ── 元 75/1100, 520/1100 ／ 95/1100, 520/1100 */
  .lang-en .intro-en-lead { left: 6.8%; width: 47.3%; }
  .lang-en .intro-ja-sub  { left: 8.6%; width: 47.3%; }

  /* ── PLACE（EN） ── 元 800/1100, 290/1100 ／ 530/1100, 520/1100 */
  .lang-en .place-en-lead { left: 72.7%; width: 26.4%; }
  .lang-en .place-ja-sub  { left: 48.2%; width: 47.3%; }

} /* end 中間BP（EN） */