/* =====================
   Hero / Header セクション
   バリアント: .hero--overlay … ヘッダーを画像上に重ね、コピーを中央配置（現行）
===================== */
.hero {
  position: relative;
}

/* ---- ヘッダー（.site-header、hero--overlay時の見た目） ----
   ヘッダー自体はページ全体でposition: fixed（css/base.cssの.site-header）。
   overlay時は画像に透けて重ねる見た目にしたいので、ナビバー1行分の高さにだけ
   背景を敷く（展開メニューに引きずられないよう::beforeに委譲） */
.site-header--overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: var(--color-header-box);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
  z-index: -1;
  pointer-events: none;
}

/* ---- ナビゲーション（hero に内包） ---- */
.navbar-brand.logo {
  padding: 0 0 0 24px;
}

.navbar .navbar-brand.logo {
  font-size: 32px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-shadow: rgba(0, 0, 0, 0.45) 0px 1px 6px;
  text-decoration: none;
}

.nav-link {
  font-size: 20px;
  font-family: "Cormorant Garamond", "Playfair Display", "Noto Serif JP", serif;
  color: var(--color-nav-link);
  letter-spacing: 0.06em;
  font-weight: 400;
}

.navbar-toggler {
  border-color: var(--color-toggler-border);
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ---- ヒーロービジュアル ---- */
.main-pic img {
  width: 100%;
  height: 75vh;
  object-fit: cover;
  display: block;
}

/* ---- 画像上のテキスト配置（可読性スクリム、references/css-visual-techniques.md参照）
   これまでWFプレースホルダーのインラインstyleのまま実案件に流用されており、
   写真を差し込んだときの可読性確保処理が無かったため本体に昇格（2026-08-30） ---- */
.hero--overlay .main-pic {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero--overlay .main-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 下ほど暗く＝キャッチコピー・ボタンが乗る中央〜下寄りの可読性を確保。
     画像全体を一律に暗くしないので、写真そのものの見え方は保たれる */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 75%);
}

.hero--overlay .hero-catch {
  position: relative;
  z-index: 1;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--color-white);
  text-shadow: rgba(0, 0, 0, 0.45) 0px 1px 6px;
}

.hero--overlay .hero-sub {
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--color-white);
  text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px;
}

.hero--overlay .hero-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* =====================
   レスポンシブ（768px以下）
===================== */
@media (max-width: 768px) {
  /* スマホでヒーロー画像が画面の大半を占有しないよう縦幅を縮小 */
  .main-pic img {
    height: 45vh;
  }

  /* メニュー展開時の余白 */
  .navbar-collapse.show {
    padding: 8px 0 16px;
  }

  /* width: max-content でコンテナを最長アイテム幅に縮め、margin-left: auto で右寄せ。
     .collapsing も含めるのは、閉じるアニメーション中に全幅バーが出るのを防ぐため */
  .navbar-collapse.show .navbar-nav,
  .navbar-collapse.collapsing .navbar-nav {
    width: max-content;
    margin-left: auto;
    margin-right: -1rem; /* container-fluid の px-3（右パディング 1rem）を打ち消す */
    background: var(--color-header-box);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .navbar-collapse.show .nav-link {
    color: var(--color-bg-section);
    padding: 4px 16px;
  }
}

/* Bootstrap lg ブレークポイント（992px）に揃えてナビリンク間隔を設ける */
@media (min-width: 992px) {
  .navbar-nav {
    gap: 3rem;
  }
}