/* :root 変数定義 */
:root {
  --paper: #e8ecef; /* サブカラー: ペールグレー */
  --ink: #2b3d52; /* メインカラー: ネイビーブルー */
  --muted: #748294; /* 補助テキスト: ネイビー系グレー */
  --white: #f5f5f5; /* 補助色: ホワイトスモーク */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1120px;
  --primary: #c9a46c; /* ポイント: サンドゴールド */
  --accent: #0c6f38; /* アクセント: 深緑 */
  --link: #2b3d52; /* リンク: ネイビーブルー */
  --border-color: #c5cdd4; /* 境界線: 背景に馴染む色 */
}

/* --- 基本スタイル --- */
body {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  color: var(--ink);
  /* グラデーションを無効化し、シンプルな背景色に */
  background: linear-gradient(
    to bottom,
    /* グラデーションを無効化し、シンプルな背景色に */ #e8ecef 0%,
    var(--paper) 100%
  );
  background-color: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
  font-weight: 600;
}

.serif {
  font-family: "Noto Serif JP", serif;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

strong {
  font-weight: 600;
}

.container {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* 16px */
  padding-right: 1rem; /* 16px */
}

/* --- アクセシビリティ --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
}
.skip-link:focus {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 10px 15px;
  background: var(--link);
  color: var(--white);
  z-index: 9999;
  text-decoration: none;
}

/* --- ヘッダー --- */
.site-header {
  background-color: var(--white); /* 背景を不透明な白に変更 */
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 下に影を追加して立体感を出す */
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand__logo {
  font-weight: 700;
  font-size: 1.2rem;
}
.nav__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 狭い画面でボタンが折り返すように */
  gap: 12px;
}

/* --- ボタン --- */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.btn--primary {
  background-color: var(--primary);
  color: var(--ink); /* ゴールド背景にはネイビーの文字が見やすい */
  border-color: var(--primary);
}
.btn--primary:hover {
  filter: brightness(1.1);
  text-decoration: none;
}
.btn--ghost {
  border-color: var(--link);
  color: var(--link);
}
.btn--ghost:hover {
  background-color: var(--link);
  color: var(--white);
  text-decoration: none;
}

/* --- Hero セクション --- */
.hero {
  padding: 3rem 0 1.5rem;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center; /* 要素を上揃えに変更 */
  text-align: left;
}
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  /* 「増補改訂版」バッジの幅と間の余白分だけ左にずらし、下のタイトルと揃える */
  margin-left: calc(1.8rem + 0.8rem);
}
.badge {
  display: inline-block;
  background-color: #0c6f38;
  color: var(--white);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.9rem; /* 既存のmargin-bottomは.hero__badgesに移動 */
}

/* 監修者バッジの新しいスタイル */
.supervision-badge {
  --sup-fg: #e50157; /* 梅色 */
  --sup-bg: #fff; /* 背景色: 白 */
  --sup-br: #e50157; /* 枠線の色: 梅色 */

  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sup-fg);
  background: var(--sup-bg);
  border: 1px solid var(--sup-br);
  border-radius: 999px;
  padding: 0.4em 0.8em;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* タイトルの前に置くバッジ用の調整 */
.badge--title-prefix {
  display: inline-flex; /* Flexboxレイアウトを適用 */
  justify-content: center; /* 水平方向（主軸）の中央揃え */
  align-items: center; /* 垂直方向（交差軸）の中央揃え */
  writing-mode: vertical-rl; /* テキストを縦書きにする */
  text-orientation: upright; /* 縦書きでも文字を正立させる */
  padding: 0.8rem 0.5rem; /* 左右のパディングを少し広げて中央揃えを明確に */
  font-size: 0.8rem;
  letter-spacing: 0.15em; /* 文字間を少し広げて読みやすくする */
  margin-top: 0; /* 縦書きになったのでマージンをリセット */
}
.hero__title {
  /* 画面幅に応じてフォントサイズを滑らかに調整 */
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: 700;
  text-align: left; /* サブタイトルを左寄せにする */
  margin: 0; /* 新しい親要素でマージンを管理するためリセット */
}
.hero__title-group {
  display: flex; /* 要素を横並びにします */
  align-items: flex-start; /* 上端で揃えるように変更 */
  gap: 0.8rem; /* バッジとタイトルの間の余白を設定します */
  margin: 0 0 0.5rem;
}
.hero__subtitle-text {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
  color: var(--ink); /* タイトルと同じ色に */
  margin-top: 0.3rem;
}
.hero__subtitle {
  font-size: 1.1rem;
  line-height: 1.8;
}

.hero__invitation {
  display: inline-block; /* 下の余白を有効にするため */
  font-size: 1.35rem; /* 少し大きめに調整 */
  font-weight: 550; /* 太字 */
  margin-bottom: 0.2rem; /* 次の行との間に少し余白を追加 */
}
.hero__intro {
  margin: 1rem 0 0; /* 下の余白を削除 */
}
.hero__lead {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  text-align: left;
}
.hero__author {
  font-size: 1rem;
  line-height: 1.4;
  text-align: right; /* 右寄せに変更 */
  color: var(--ink); /* メインのテキストカラーに変更して可読性を向上 */
  margin: 1rem 0 0; /* 本文との間に余白を追加 */
}

.hero__subtitle strong {
  color: var(--accent);
}
.highlight-plum {
  color: #e50157 !important;
  font-weight: 700;
  color: #e50157;
}
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center; /* 中央揃え */
}
.pill {
  background-color: var(--white);
  border: 1px solid #e50157;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}
.hero__kv img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* width: 100% は基本スタイルで適用されているため不要 */
}
.hero__kv {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
  gap: 1.5rem; /* 画像とボタンの間の余白 */
}

/* --- JMCリンクボックス --- */
.jmc-link-box {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 中央揃え */
  gap: 0.75rem; /* 写真とテキストの間の余白 */
  margin-top: 1.5rem; /* 上の余白 */
  text-decoration: none;
}

.jmc-link-box__icon {
  flex-shrink: 0;
  width: 30%; /* 写真の横幅を調整 */
  height: auto; /* 高さは自動で調整し、アスペクト比を維持 */
  border-radius: 4px; /* 写真の角を少し丸める */
  display: block; /* 画像下の余分なスペースを削除 */
}

.jmc-link-box span {
  font-weight: 600;
}

.jmc-link-box__text {
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none; /* 下線を削除 */
  color: #ec3030; /* 赤色に変更 */
}

.jmc-link-box__text:hover,
a.jmc-link-box__text:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

/* --- Key points (split) --- */
.container[aria-label="本の見どころ"] {
  background-color: var(--white);
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-radius: var(--radius);
}
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.card {
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: #fff;
}
.card--with-image {
  overflow: hidden; /* 画像の角を丸めるため */
  padding: 0; /* 画像付きカードは内側の余白をリセット */
}
.card__image {
  width: 100%;
  object-fit: cover;
  display: block;
}
.card__content {
  padding: 1.2rem 0.8rem;
}
.card h3 {
  margin-top: 0;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
  color: var(--accent);
}
.card__description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  margin: 0;
  background-color: #fdfdfd;
  font-weight: 500;
}

/* ===== Magazine Style for TOC ===== */
#toc.toc--magazine {
  display: grid;
  grid-template-columns: 1fr; /* Mobile-first: single column */
  gap: 1rem;
  /* 他のセクションとスタイルを統一 */
  background-color: var(--white);
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  border-radius: var(--radius);
  position: relative; /* 画像を絶対配置するための基準点 */
  padding: 1.5rem 1rem 3rem; /* 左右のpaddingを他のコンテナと統一 */
}

#toc.toc--magazine .toc__header {
  display: flex;
  flex-direction: column; /* モバイルでは縦積み */
  gap: 1rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

#toc.toc--magazine .toc__title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

#toc.toc--magazine .toc__subtitle {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}

#toc.toc--magazine .toc__main-image {
  /* 不要な配置スタイルをすべて削除 */
  margin: 0;
  max-width: 100%; /* モバイルではコンテナ幅に合わせる */
  flex-shrink: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}
#toc.toc--magazine .toc__main-image img {
  display: block;
  mix-blend-mode: darken;
}

#toc.toc--magazine .toc-group:first-of-type {
  margin-top: 0; /* ヘッダーとの間の不要なマージンを削除 */
}

#toc.toc--magazine .toc-group__heading {
  font-size: 1.4rem;
  font-weight: 500;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ink);
  margin: 1 0 1rem 0;
  text-align: left; /* 見出しを中央揃え */
}

.toc-group__subheading {
  color: #c84a4a;
}

#toc.toc--magazine .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.6; /* 行間を詰める */
}

#toc.toc--magazine .toc-list > li {
  padding: 0.1rem 0; /* 上下の余白を詰める */
}

#toc.toc--magazine .toc-list__author {
  display: table-cell; /* テーブルセルとして扱う */
  text-align: right; /* セル内で右揃え */
  padding-left: 1rem; /* 項目名との最小の余白を確保 */
}

#toc.toc--magazine .toc-sub {
  list-style: none;
  padding-left: 1.5rem;
  margin-top: 0.1rem; /* 親項目との余白を詰める */
  font-size: 0.9em;
  color: var(--ink); /* メインの文字色と同じにして可読性を最大化 */
}
.toc-sub > li {
  display: table; /* テーブルとして扱う */
  width: 100%; /* 親要素の幅いっぱいに広がる */
}

.toc-link {
  display: table-cell; /* テーブルセルとして扱う */
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.toc-link:hover {
  color: var(--primary); /* ホバー時に色を変更 */
}

.toc-separator {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 0.5em -0.15em;
  position: relative;
}
.toc-separator::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.25em;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--accent); /* 深緑 */
  border-radius: 50%;
}

.toc-split-layout {
  display: grid;
  grid-template-columns: 1fr; /* モバイルでは1カラム */
  gap: 2rem;
  justify-content: center; /* コンテンツを中央に配置 */
}
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr; /* モバイルでは2カラム */
  gap: 1.5rem;
}

.toc__divider-image {
  margin-top: 1rem; /* 上の要素との間隔を調整 */
  width: auto; /* 幅を自動に */
  max-width: 100%; /* コンテナからはみ出さないように */
  margin-left: auto; /* 中央配置 */
  margin-right: auto; /* 中央配置 */
}
.toc__divider-image img {
  width: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* --- CTA band --- */
.cta-band {
  background-color: var(--accent);
  color: var(--white);
  padding: 3rem 0;
  text-align: center;
}
.cta-band .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.cta-band h3 {
  color: var(--white);
  border: none;
  max-width: 600px;
  margin: 0;
}
.cta-band .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.cta-band .btn--ghost:hover {
  background-color: var(--white);
  color: var(--accent);
}
.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* --- 所長メッセージ --- */
.director-message {
  margin-top: 4rem; /* 上のギャラリーとの余白 */
  background-color: var(--white); /* 背景色を目次と同じに変更 */
  border-radius: var(--radius);
  padding: 2rem;
  /* border: 1px solid var(--border-color); */ /* 背景色変更に伴い枠線を削除 */
}
.director-message__header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.director-message__title {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
  color: var(--ink);
}
.director-message__author {
  margin: 0;
  color: var(--ink); /* メインのテキストカラーに変更 */
  line-height: 1.6;
}
.director-message__body {
  max-width: 55em; /* テキストの最大幅を少し広げました */
  margin: 0 auto; /* 中央揃え */
  font-size: 1rem;
  line-height: 1.8;
}
.director-message__body p {
  margin: 0 0 1.5em 0;
}

/* --- ヒトもサルのなかま セクション --- */
.human-primate-section {
  padding-top: 1.5rem;
  padding-bottom: 5rem; /* 目次セクションとの間に余白を追加 */
}

.section-title-wrapper {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1.5rem; /* タイトルと線の間のスペースを調整 */
  /* border-bottom: 2px solid var(--ink); */ /* 既存の線を削除 */
  margin-bottom: 0; /* 線と画像の間のスペースを削除 */
  position: relative;
}

.section-title-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(
    100% - 14rem
  ); /* (写真の左右マージン 8rem * 2) - (コンテナの左右パディング 1rem * 2) = 14rem */
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='20' viewBox='0 0 300 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 H 140' stroke='%232b3d52' stroke-width='1.5'/%3E%3Cpath d='M160 10 H 300' stroke='%232b3d52' stroke-width='1.5'/%3E%3Cpath d='M145 10 C 147 5, 153 5, 155 10 C 153 15, 147 15, 145 10 Z' fill='%230c6f38'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.section-title {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  margin: 0;
}

.full-bleed-image {
  margin: 0; /* モバイルではマージンを0に */
}

.full-bleed-image img {
  width: 100%;
}

/* --- フル幅バナー --- */
.full-width-banner {
  width: 100%;
  margin: 0; /* 上下の余白をリセット */
}
.banner__image {
  width: 100%;
  height: auto; /* 高さを自動に設定してアスペクト比を維持 */
  display: block; /* 画像下の余分なスペースを削除 */
}

/* フッター内のゴーストボタンのスタイルを上書き */
.footer__cta-actions .btn--ghost {
  color: var(--white); /* 文字色を白に */
  border-color: rgba(255, 255, 255, 0.5); /* 枠線を半透明の白に */
}
.footer__cta-actions .btn--ghost:hover {
  background-color: var(--white); /* ホバー時の背景を白に */
  color: var(--ink); /* ホバー時の文字色をネイビーに */
}

/* --- フッター --- */
footer {
  background-color: var(--ink); /* 背景を「ネイビーブルー」に変更 */
  color: var(--paper); /* テキスト色を「和紙ベージュ」に反転 */
  padding: 3rem 0;
}
.footer__inner {
  display: block; /* モバイルではブロック要素としてシンプルに */
  text-align: center;
}
.footer__cta-title {
  font-size: 1.5rem;
  color: var(--white);
  margin: 0 0 0.5rem;
}
.footer__cta-subtitle {
  color: var(--paper);
  opacity: 0.8;
  margin: 0 0 2rem;
}
.footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.muted {
  color: var(--paper); /* こちらも明るい色に変更 */
  opacity: 0.8; /* 少し透明度を下げて、メインのコピーライトと差をつける */
}
.footer__bottom {
  margin-top: 2rem;
}
.footer__divider {
  border: none;
  height: 1px;
  background-color: rgba(245, 245, 245, 0.2);
  margin: 0 0 1.5rem;
}
.footer__copyright {
  margin: 0;
  text-align: center; /* モバイルでは中央揃え */
}

/* --- レスポンシブ対応 --- */
@media (min-width: 768px) {
  #toc.toc--magazine .toc__header {
    flex-direction: row; /* 横並びに変更 */
    justify-content: space-between; /* 両端に配置 */
    align-items: flex-end; /* 下揃え */
    gap: 2rem;
  }
  #toc.toc--magazine .toc__main-image {
    position: absolute; /* 絶対配置に変更 */
    top: -4rem; /* セクションの上にはみ出す */
    right: 1rem; /* 右端からの位置を調整 */
    max-width: 620px; /* 画像サイズを調整 */
  }
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .spec {
    grid-template-columns: 300px 1fr;
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr); /* デスクトップでは3カラムに戻す */
  }
  .toc-split-layout {
    grid-template-columns: 300px 1fr; /* 左カラムはコンテンツ幅に、右カラムは残りのスペースに合わせる */
    gap: 5rem; /* カラム間のスペースを調整 */
  }
  .toc-content-wrapper,
  #toc.toc--magazine .toc__header {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .full-bleed-image {
    margin: 0 8rem; /* タブレット以上でマージンを適用 */
  }
  .section-title-wrapper::after {
    width: calc(100% - 16rem); /* 写真の幅に合わせる */
  }
  .footer__copyright {
    text-align: right; /* デスクトップでは右寄せに戻す */
  }
}

@media (min-width: 992px) {
  .footer__inner {
    text-align: left; /* デスクトップでは左揃え */
  }
  .footer__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  .footer__cta-subtitle {
    margin-bottom: 0; /* デスクトップではサブタイトル下の余白を削除 */
  }
  .footer__cta-actions {
    justify-content: flex-end;
  }
  #toc.toc--magazine .toc__main-image {
    right: 2rem; /* さらに大きい画面で右からの位置を再調整 */
  }

  /* --- Desktop Magazine TOC (override tablet/mobile styles) --- */
}