/*
Theme Name: sotoura
Theme URI: https://github.com/aduceinc/sotoura
Author: aduce
Description: 「だいすき外浦」サイト。Figma新デザイン（ティール基調・丸ゴ見出し・ポラロイド名鑑）を忠実再現した自作クラシックテーマ。
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: sotoura
*/

/* =========================================================================
   デザイントークン（Figma実値: node 10713:1457 から抽出）
   ※ 数値はFigma 1920px版の実測。見出し等はviewport比でclamp近似。
   ========================================================================= */
:root {
  /* 色 */
  --bg: #FDFBF7;          /* 温かい白（基調背景・カード地） */
  --teal: #008B9E;        /* ティール（さんぽ見出し/マップリンク/かわら版上端） */
  --ink: #4A4540;         /* 主要テキスト・見出し */
  --muted: #7F7A70;       /* 補助テキスト/タグライン/TEL/日付 */
  --tag-blue: #6A9AB0;    /* 名鑑カテゴリタグ文字 */
  --photo-ph: #CBC9C9;    /* ポラロイド写真プレースホルダ地 */
  --hair: #E5E0D8;        /* 区切り線/ページャ地 */
  --stroke: #4A4540;      /* ポラロイド枠線 */
  --stroke-dark: #0A0603; /* ボタン枠線 */

  /* フォント（Figma指定） */
  --font-round: "Zen Maru Gothic", system-ui, -apple-system, "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* レイアウト（Figma: 1920幅 / 左右80px / コンテンツ1760） */
  --maxw: 1280px;
  --pad-x: clamp(20px, 5.2vw, 80px);
  --section-pad: clamp(64px, 8vw, 120px);
  --gap: clamp(16px, 3vw, 32px);

  /* タイポスケール（64px@1920 ≒ 3.33vw 等） */
  --h-sec: clamp(30px, 3.33vw, 60px);   /* セクション見出し 64px */
  --h-sub: clamp(16px, 1.67vw, 30px);   /* サブコピー 32px */
}

/* =========================================================================
   ベース
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: var(--font-round);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 400; color: var(--ink); }

.container { width: min(100% - 2 * var(--pad-x), var(--maxw)); margin-inline: auto; }

/* 共通セクション見出し（中央・丸ゴ・ワイド字間） */
.sec-head {
  text-align: center;
  font-family: var(--font-round);
  font-weight: 400;
  font-size: var(--h-sec);
  letter-spacing: 0.14em;
  color: var(--ink);
}
.sec-head--teal { color: var(--teal); }
.sec-sub {
  text-align: center;
  font-size: var(--h-sub);
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-top: clamp(14px, 2.4vw, 30px);
  text-wrap: balance; /* 狭幅で末尾1文字だけ折返す不格好を防ぎ、行を均等配分 */
}
.sec-sub--teal { color: var(--teal); }

/* =========================================================================
   波形ディバイダ（セクション境界）
   ========================================================================= */
.wave-divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}
.wave-divider svg { width: 100%; height: 100%; display: block; }
.wave-divider--flip { transform: scaleY(-1); }
.wave-divider--top { top: -1px; bottom: auto; }

/* =========================================================================
   ヘッダー（既存踏襲）
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding-block: 14px;
}
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-size: 1.2rem; letter-spacing: 0.18em; color: var(--teal); }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.site-nav a { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--ink); }
.site-nav a:hover { color: var(--teal); }
.btn-map {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 1.4em; border: 1px solid var(--teal); border-radius: 999px;
  color: var(--teal); font-size: 0.85rem; letter-spacing: 0.08em;
  transition: background 0.2s, color 0.2s;
}
.btn-map:hover { background: var(--teal); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ink);
  margin: 5px 0; transition: transform 0.25s, opacity 0.25s;
}

/* =========================================================================
   ヒーロー（全面海岸写真＋暗→明グラデ＋丸ゴ白見出し）
   ========================================================================= */
.hero {
  position: relative;
  min-height: clamp(460px, 56vw, 900px);   /* Figma比 1083/1920 ≒ 56% */
  display: grid; place-items: center; text-align: center;
  padding-inline: var(--pad-x);            /* 見出しを左右に逃がす（狭幅での見切れ防止） */
  /* 写真の上に可読性確保の暗→透明グラデを重ねる（Figmaの暗→明グラデの意図を踏襲） */
  background:
    linear-gradient(180deg, rgba(33, 33, 33, 0.55) 0%, rgba(80, 80, 80, 0.28) 45%, rgba(255, 255, 255, 0) 100%),
    url("assets/img/hero.webp") center / cover no-repeat;
}
.hero__title {
  max-width: 100%;                         /* 収まらなければ折り返す（1行に固執しない） */
  font-family: var(--font-round);
  font-weight: 400;
  font-size: clamp(2rem, 3.33vw, 64px);
  letter-spacing: 0.1em;
  color: #FDFBF7;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: clamp(40px, 6vw, 90px); /* 波の上に少し持ち上げる */
}

/* =========================================================================
   外浦さんぽ（イラストマップ）
   ========================================================================= */
.sanpo-section {
  position: relative;
  background: var(--bg);
  padding: var(--section-pad) var(--pad-x) calc(var(--section-pad) + clamp(30px, 5vw, 80px));
}
.sanpo-inner {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.sanpo-map {
  width: 100%; max-width: 1262px; margin-top: clamp(28px, 4vw, 56px);
  aspect-ratio: 1262 / 647; /* Figma原本のマップ枠比。対話型マップをこの枠でインライン表示 */
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(10, 40, 50, 0.12);
}
.sanpo-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* モバイル専用の改行（br.br-sp）。デスクトップでは無効化。 */
.br-sp { display: none; }
@media (max-width: 640px) {
  .sanpo-map { aspect-ratio: auto; height: 68vh; }
  .br-sp { display: inline; }
}
.sanpo-open {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal); font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
}
.sanpo-open:hover { text-decoration: underline; }

/* =========================================================================
   かわら版（NEWS）：ティール→白の縦グラデ／枠なしカード
   ========================================================================= */
.news-section {
  position: relative;
  background: linear-gradient(180deg, var(--teal) 0%, #FFFEFE 100%);
  padding: clamp(80px, 10vw, 120px) var(--pad-x);
}
.news-inner {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.news-section .sec-head,
.news-section .sec-sub { color: var(--ink); }
.news-grid {
  width: 100%; margin-top: clamp(36px, 5vw, 80px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.news-card { display: flex; flex-direction: column; }
.news-card__img {
  width: 100%; aspect-ratio: 456 / 319; border-radius: 16px;
  background: var(--photo-ph) center / cover no-repeat;
  background-image: url("assets/img/news-placeholder.webp");
}
.news-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.news-card__body { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.news-card__title {
  font-family: var(--font-round); font-weight: 700;
  font-size: clamp(20px, 1.7vw, 32px); line-height: 1.2; letter-spacing: 0.01em;
  color: var(--ink);
}
.news-card__title a:hover { color: var(--teal); }
.news-card__excerpt { margin: 0; color: var(--muted); font-weight: 700; font-size: 16px; line-height: 1.6; }
.news-card__date { margin: 4px 0 0; color: var(--muted); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.news-more {
  margin-top: clamp(32px, 4vw, 56px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 32px; border: 1px solid var(--ink); border-radius: 999px;
  color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: 0.08em;
  transition: background 0.2s, color 0.2s;
}
.news-more:hover { background: var(--ink); color: var(--bg); }

/* =========================================================================
   外浦名鑑（タブ＋ページ送り＋ポラロイドカード）
   ========================================================================= */
.meikan-section { position: relative; background: var(--bg); padding: clamp(96px, 11vw, 140px) var(--pad-x); }
.meikan-inner {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 40px);
}

/* カテゴリタブ（ピル・枠線＋影） */
.filter-tabs { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.filter-tab {
  padding: 12px 30px;
  border: 1px solid var(--stroke-dark); border-radius: 100px;
  background: var(--bg); cursor: pointer;
  color: var(--ink); font-family: var(--font-round); font-weight: 500; font-size: 18px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.2s, color 0.2s;
}
.filter-tab:hover { background: var(--hair); }
.filter-tab.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.meikan-counter {
  margin: 0; text-align: center;
  color: var(--ink); font-size: clamp(16px, 1.6vw, 28px); letter-spacing: 0.06em;
}

/* ポラロイドカードのグリッド（4列＝8件/ページ） */
.meikan-grid {
  width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px; align-items: start;
}
.meikan-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--stroke);
  padding: 15px 15px 0;
  box-shadow: 0 8px 18px rgba(10, 40, 50, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
  /* ポラロイド風に1枚ずつランダムな微小回転（Figma原本もカードが少しずつ傾く）。
     --tilt を nth-child で割り当て、ホバー時のみ水平に戻して読みやすくする。 */
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transform-origin: center center;
}
.meikan-card:nth-child(8n+1) { --tilt: -3deg; }
.meikan-card:nth-child(8n+2) { --tilt: 2deg; }
.meikan-card:nth-child(8n+3) { --tilt: -1.5deg; }
.meikan-card:nth-child(8n+4) { --tilt: 3.5deg; }
.meikan-card:nth-child(8n+5) { --tilt: 1.5deg; }
.meikan-card:nth-child(8n+6) { --tilt: -2.5deg; }
.meikan-card:nth-child(8n+7) { --tilt: 2.5deg; }
.meikan-card:nth-child(8n+8) { --tilt: -2deg; }
.meikan-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 30px rgba(10, 40, 50, 0.18); z-index: 1; }

/* 写真エリア（グレー地＋カテゴリピル） */
.meikan-card__photo {
  position: relative;
  width: 100%; aspect-ratio: 374 / 341; overflow: hidden;
  background: var(--photo-ph);
}
.meikan-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.meikan-card__noimg { display: block; width: 100%; height: 100%; background: var(--photo-ph); }
.meikan-card__tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 6px 18px; border-radius: 100px;
  background: #fff; border: 1px solid var(--stroke-dark);
  color: var(--tag-blue); font-weight: 500; font-size: 16px; letter-spacing: 0.02em;
}

/* 本文（明朝店舗名＋タグライン＋ハーフライン＋TEL/HP/マップ） */
.meikan-card__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px 16px; }
.meikan-card__title {
  font-family: var(--font-round); font-weight: 500; font-size: 18px; line-height: 1.5; color: var(--ink);
}
.meikan-card__tagline { margin: 0; color: var(--muted); font-weight: 500; font-size: 16px; line-height: 1.5; }
.meikan-card__line { width: 100%; height: 1px; background: var(--hair); border: 0; margin: 8px 0; }
.meikan-card__tel { margin: 0; color: var(--muted); font-weight: 500; font-size: 18px; }
.meikan-card__tel a { color: inherit; }
.meikan-card__tel a:hover { text-decoration: underline; }
.meikan-card__hp {
  display: inline-block; margin-top: 4px; color: #000; font-weight: 500; font-size: 18px;
}
.meikan-card__hp .lbl { margin-right: 0.4em; }
.meikan-card__hp:hover { text-decoration: underline; }
.meikan-card__map {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--teal); font-weight: 500; font-size: 16px;
}
.meikan-card__map .pin { flex: 0 0 auto; }
.meikan-card__map:hover { text-decoration: underline; }

/* ページャ（丸矢印＋ページ＋次の8件へ） */
.meikan-pager {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: clamp(24px, 4vw, 60px);
}
.meikan-pager__btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 22px;
  background: var(--hair); border: 0; cursor: pointer;
  color: var(--ink); font-size: 18px; line-height: 1;
  transition: background 0.2s, opacity 0.2s;
}
.meikan-pager__btn:hover { background: #d8d2c7; }
.meikan-pager__btn:disabled { opacity: 0.4; cursor: default; }
.meikan-pager__page {
  color: var(--ink); font-size: clamp(20px, 1.7vw, 32px); letter-spacing: 0.05em;
}
.meikan-pager__next {
  background: none; border: 0; cursor: pointer;
  color: var(--ink); font-size: 16px; letter-spacing: 0.05em; padding: 6px 8px;
}
.meikan-pager__next:disabled { opacity: 0.4; cursor: default; }

/* =========================================================================
   外浦Sotoura（アクセス）：背景写真＋エリアマップ＋明朝銘
   ========================================================================= */
.access-section {
  position: relative;
  padding: clamp(64px, 8vw, 80px) var(--pad-x);
  /* Figmaは白→グレーのグラデ＋海岸写真。写真を活かしつつ可読性を確保するため
     グラデを半透明にして下の写真を透過させる（不透明だと写真が完全に隠れる）。 */
  background:
    linear-gradient(180deg, rgba(253, 251, 247, 0.80) 0%, rgba(253, 251, 247, 0.45) 44%, rgba(142, 141, 141, 0.55) 100%),
    url("assets/img/access-bg.webp") center / cover no-repeat;
}
.access-copy {
  width: min(100%, 872px); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 40px);
  text-align: center;
}
.access-title {
  font-family: var(--font-round); font-weight: 400;
  /* Figmaは外浦Sotouraをデスクトップ・タブレットとも64px。--h-secだと中間幅で過小に
     縮むため専用クランプで64px付近を維持する。 */
  font-size: clamp(44px, 4.8vw, 64px); letter-spacing: 0.3em; color: var(--ink);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.access-lead {
  margin: 0; font-weight: 400; font-size: var(--h-sub); line-height: 1.6; letter-spacing: 0.08em; color: var(--ink);
}
/* エリアマップ合成（伊豆半島＋下田市） */
.access-map {
  position: relative; width: min(100%, 1100px); margin: clamp(24px, 4vw, 48px) auto 0;
  aspect-ratio: 1700 / 1308;
}
.access-map__izu {
  position: absolute; left: 2%; top: 0; width: 50%; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
}
.access-map__shimoda {
  position: absolute; right: 0; top: 40%; width: 48%; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
}

/* =========================================================================
   para（日常と非日常が重なる）：写真コラージュ
   ========================================================================= */
.para-section { background: var(--bg); padding: clamp(80px, 10vw, 120px) var(--pad-x); }
.para-inner {
  width: min(100%, 1381px); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 80px);
}
.para-collage {
  width: 100%;
  display: grid; grid-template-columns: 461fr 410fr 460fr; gap: 25px;
  align-items: stretch;
}
.para-col { display: flex; flex-direction: column; gap: 35px; }
.para-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.para-col--split { }
.para-col--split img:first-child { aspect-ratio: 461 / 307; }
.para-col--split img:last-child { aspect-ratio: 461 / 272; }
.para-tall { aspect-ratio: 410 / 614; }
.para-tall--r { aspect-ratio: 460 / 614; }

/* =========================================================================
   フッター（また来たくなる場所＋安全リンク＋お問合せ＋SKILLPORT）
   ========================================================================= */
.site-footer {
  position: relative;
  padding: clamp(64px, 8vw, 80px) var(--pad-x) clamp(40px, 5vw, 80px);
  /* Figmaは白→グレーのグラデ＋海岸写真。半透明にして写真を透過させる。 */
  background:
    linear-gradient(180deg, rgba(253, 251, 247, 0.82) 0%, rgba(110, 110, 110, 0.50) 100%),
    url("assets/img/footer-bg.webp") center / cover no-repeat;
}
.footer-inner {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.footer-closing { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer-closing__title {
  font-family: var(--font-round); font-weight: 400; font-size: var(--h-sec);
  letter-spacing: 0.14em; color: var(--ink); text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.footer-closing__en {
  font-family: var(--font-round); font-weight: 400; font-size: var(--h-sec);
  letter-spacing: 0.3em; color: var(--ink); text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 海の安全バナー */
.footer-safety { width: 100%; margin-top: clamp(48px, 7vw, 100px); text-align: center; }
.footer-safety__lead {
  margin: 0 0 20px; font-family: var(--font-round);
  font-weight: 400; font-size: var(--h-sub); letter-spacing: 0.1em; color: var(--ink);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.footer-safety__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1660px; margin-inline: auto;
}
.footer-safety__btn {
  display: grid; place-items: center;
  height: 127px; padding: 10px;
  background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.footer-safety__btn img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

/* お問合せ / マップ掲載 / SKILLPORT */
.footer-bottom {
  width: 100%; margin-top: clamp(48px, 6vw, 90px); padding-top: clamp(24px, 3vw, 40px);
  border-top: 3px solid var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px);
}
.footer-contact {
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  font-family: var(--font-round);
  font-weight: 400; font-size: var(--h-sub); letter-spacing: 0.08em; color: var(--ink);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.footer-contact a:hover { color: var(--teal); }
.footer-skillport {
  display: inline-block; width: 400px; max-width: 100%; height: 127px;
  background: var(--bg) center / contain no-repeat;
  background-image: url("assets/img/skillport.png");
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.footer-copy {
  width: 100%; margin: clamp(32px, 4vw, 48px) 0 0; text-align: center;
  color: var(--ink); font-size: 13px; letter-spacing: 0.06em; opacity: 0.85;
}

/* =========================================================================
   NEWS 一覧（archive-news）／個別（single-news）
   ========================================================================= */
.news-archive { background: var(--bg); padding-block: clamp(48px, 8vw, 96px); }
.news-archive .news-inner,
.news-archive .news-panel { width: min(100% - 2 * var(--pad-x), var(--maxw)); margin-inline: auto; }
.news-archive .news-grid { color: var(--ink); margin-top: clamp(24px, 4vw, 40px); }
.news-archive .news-eyebrow { text-align: center; color: var(--teal); letter-spacing: 0.3em; font-size: 13px; margin: 0; }
.news-archive .news-title { text-align: center; font-family: var(--font-round); font-size: var(--h-sec); letter-spacing: 0.12em; margin: 8px 0 12px; }
.news-archive .news-sub { text-align: center; color: var(--muted); margin: 0 auto; max-width: 640px; }
.news-card__media { display: block; }
.news-card__link { display: inline-block; margin-top: 8px; color: var(--teal); font-size: 14px; font-weight: 500; }
.news-card__link:hover { text-decoration: underline; }
.news-archive .pagination,
.news-archive .nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.news-archive .page-numbers {
  padding: 6px 12px; border: 1px solid var(--hair); border-radius: 6px; color: var(--ink);
}
.news-archive .page-numbers.current { background: var(--teal); color: #fff; border-color: var(--teal); }

.news-single { background: var(--bg); padding-block: clamp(48px, 8vw, 96px); }
.news-article { width: min(100% - 2 * var(--pad-x), 760px); margin-inline: auto; }
.news-article__date { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.news-article__title {
  font-family: var(--font-round); color: var(--ink);
  font-size: clamp(1.6rem, 4vw, 32px); font-weight: 700; line-height: 1.4; margin: 0 0 24px;
}
.news-article__thumb { margin-bottom: 24px; border-radius: 12px; overflow: hidden; }
.news-article__body { color: var(--ink); line-height: 1.85; }
.news-article__body > * + * { margin-top: 1em; }
.news-article__back { margin-top: 40px; text-align: center; }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
/* ---- タブレット（Figma tablet_834）: 名鑑2列・安全リンク2列(2×2)。
       かわら版3列・para3列・アクセスマップ横並びは維持。見出しは縮小。 ---- */
@media (max-width: 1024px) {
  :root { --pad-x: 32px; }
  .hero__title { font-size: clamp(30px, 4.8vw, 40px); }
  .sec-head { font-size: clamp(28px, 4.3vw, 36px); }
  .para-section .sec-head, .footer-closing__title { font-size: clamp(26px, 3.8vw, 32px); }
  .footer-closing__en { font-size: clamp(28px, 4.3vw, 36px); }
  .access-title { font-size: clamp(40px, 7.6vw, 64px); }
  .sec-sub, .footer-safety__lead, .footer-contact { font-size: clamp(16px, 2.4vw, 20px); }
  /* 名鑑は 4→3→2 と段階的に減らす（1024で2列だとカードが過大になるため中間に3列を挟む）。 */
  .meikan-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-safety__list { grid-template-columns: repeat(2, 1fr); }
}

/* タブレット縦(~834): 名鑑2列（Figma tablet_834 準拠） */
@media (max-width: 880px) {
  .meikan-grid { grid-template-columns: repeat(2, 1fr); }
}

/* タブレット未満では かわら版を2列に（小幅で3列のままだとカードが極小になる）。
   Figma tablet_834 は3列のため 768 以下で切り替える。 */
@media (max-width: 768px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin-inline: auto; }
}

/* ---- ナビ（hamburger）---- */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 18px;
    background: #fff; border-bottom: 1px solid var(--hair);
    padding: 24px var(--pad-x);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.25s, opacity 0.25s;
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* ---- モバイル（Figma mobile_V2 390）: 全セクション1カラム積み。
       名鑑は list型カード(350px幅)相当の単列。余白20px・見出し縮小。 ---- */
@media (max-width: 600px) {
  :root { --pad-x: 20px; }
  .hero { min-height: clamp(400px, 92vw, 540px); }
  .hero__title { font-size: clamp(22px, 6.4vw, 30px); letter-spacing: 0.04em; }
  .sec-head { font-size: clamp(24px, 6.6vw, 32px); }
  .para-section .sec-head, .footer-closing__title { font-size: clamp(22px, 6vw, 28px); }
  .footer-closing__en { font-size: clamp(24px, 6.6vw, 30px); }
  .access-title { font-size: clamp(32px, 9vw, 48px); }
  .sec-sub, .footer-safety__lead, .footer-contact { font-size: 16px; }

  .news-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }

  /* 名鑑: 単列・カードは350px相当。モバイルでは傾きを解除しはみ出しを防ぐ */
  .meikan-grid { grid-template-columns: 1fr; max-width: 350px; margin-inline: auto; }
  .meikan-card { transform: none; box-shadow: 0 8px 18px rgba(10, 40, 50, 0.12); }
  .meikan-card:hover { transform: translateY(-4px); }

  /* コラージュ・安全リンクは縦積み */
  .para-collage { grid-template-columns: 1fr; gap: 16px; }
  .footer-safety__list { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .footer-bottom { flex-direction: column; }

  /* アクセスマップ：重ね合成をやめ縦並びに */
  .access-map { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .access-map__izu, .access-map__shimoda { position: static; width: min(86%, 340px); }
}