/* Base */
:root {
  --bg: #f9f9f6;
  --ink: #2b2b2b;
  --muted: #444;
  --muted-2: #777;
  --card: #ffffff;
  --line: #ddd;
  --accent: #444;
  --accent-hover: #222;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Yu Mincho","Hiragino Mincho Pro",serif;
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.8;
  margin: 0;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid #888; outline-offset: 2px; }

header { position: relative; text-align: center; color: #fff; }

header.hero {
  background-image: url("../img/header.jpg"); /* ← パス調整可 */
  background-size: cover;
  background-position: center;
  height: 60vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-color: rgba(0,0,0,0.4); /* 文字コントラスト確保 */
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 2rem;
  text-shadow: 0 0 12px rgba(0,0,0,0.7);
  animation: fadeIn 2.5s ease-in-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-text { animation: none; }
}

.header-content h1 { font-size: 2.6rem; margin-bottom: 1rem; }
.header-content p { font-size: 1.2rem; }

main {
  padding: 4rem 10%;
  background-color: var(--bg);
}

h2 {
  font-size: 1.8rem;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.section {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */
  gap: 2.0rem;                   /* 距離をここで調整 */
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem; /* 左右余白を増やす */
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}


.section img {
  width: 300px;   /* PC時も大きめに */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ccc;
  flex-shrink: 0;
}


@media (max-width: 768px) {
  header.hero {
    height: 70vh; /* スマホ時は高さを低めにして1行目が隠れないように */
  }
  .hero-text {
    padding: 1rem;
  }
  .section {
    flex-direction: column;
    text-align: center; /* 全体中央寄せは残す（画像や見出しは中央） */
  }
  .section-content {
    text-align: left; /* 本文は左寄せ */
  }
}



.section h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }

.catch { font-style: italic; color: var(--muted); margin-bottom: 1rem; }

.character { font-weight: bold; color: var(--muted-2); margin-bottom: 1rem; }

ul { padding-left: 1.2rem; margin-top: 0.5rem; }
ul li { margin-bottom: 0.4rem; }

.button { margin-top: 1.2rem; display: inline-flex; gap: 10px; }
.button a {
  background-color: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.button a:hover { background-color: var(--accent-hover); }

footer {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.9rem;
  color: #888;
  background-color: #f0f0ed;
}

@media screen and (max-width: 768px) {
  .header-content h1 { font-size: 1.8rem; }
  .section { flex-direction: column; text-align: center; }
  .section-content { text-align: left; }
  .section img { width: 100%; max-width: 300px; }
}

/* オプション（バッジ類：詳細ページで使用） */
.badges { display:flex; gap:8px; flex-wrap:wrap; }
.badge { font-size:.85rem; background:#eee; border-radius:999px; padding:.15rem .6rem; color:#555; }
.exhibit-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:.4rem 0 .6rem; }
.time { font-size:.9rem; color:#666; }
.lead { color:#4a4a4a; }
.meta { color:#777; font-size:.92rem; margin-top:.4rem; }

/* ===== royal-aroma など個別展示ページ：見出しの高さと本文幅を元の意図へ ===== */

/* 中央寄せの安定レイアウト（幅はほんの少し絞る） */
main {
  max-width: 1200px;                          /* 広めに確保。狭めたければ 1120〜1180 で微調整 */
  padding: 4rem clamp(24px, 6vw, 64px);       /* 左右24〜64pxで可変 */
  margin: 0 auto;
}

/* PCでは横並びを固定。テキスト側が縮められるように */
@media (min-width: 1024px) {
  .section { flex-wrap: nowrap; }
  .section-content { min-width: 0; }          /* ← これがないと途中で縦積みになりがち */
  .section img { flex: 0 0 300px; }           /* 画像は300pxを死守（必要なら320に） */
}
/* サブページ専用のヒーロー高さ（トップには影響させない） */
.page-royal-aroma .hero--page { min-height: 45vh; }
@media (max-width: 768px) {
  .page-royal-aroma .hero--page { min-height: 42svh; } /* アドレスバー対策に svh 推奨 */
  .hero-text { padding: 1rem; }
}