@charset "UTF-8";
/* =========================================================================
   おきなわLovers 日本語版 — バニラCSS v2
   白銀比（1:√2=1.414）を全数値の土台にする。
   - タイプ: 11 / 13 / 16 / 19 / 23 / 32 / 45（×1.414と半段階×1.19）
   - 余白:   8 / 11 / 16 / 23 / 32 / 45 / 64 / 91 / 128
   - 角丸:   11 / 16 / 23 / 32
   - 写真比: 1.414:1（標準）/ 2.828:1（ワイド帯 = 2√2）
   - 行間:   本文 2.0（=1.414²）/ 見出し 1.414
   誌面はベタ色の「章バンド」を波でめくる構造。文字領域もバナーと同じ
   1200px（--content-max）に統一する。
   2026-08-04
   ========================================================================= */

/* ---------- tokens: colors ---------- */
:root {
  --ol-turquoise: #4EC3CE;
  --ol-turquoise-deep: #2FA9B5;
  --ol-turquoise-tint: #DCF3F5;
  --ol-red: #E8442E;
  --ol-red-deep: #C93520;
  --ol-red-tint: #FDE8E4;
  --ol-green: #57A845;
  --ol-green-deep: #3F8A30;
  --ol-green-tint: #E5F3E1;
  --ol-yellow: #F9C449;
  --ol-yellow-deep: #E5A81F;
  --ol-yellow-tint: #FDF3D9;
  --ol-purple: #8E44AD;
  --ol-pink: #E0708C;

  --ol-white: #FFFDF7;
  --ol-paper: #FFF8EC;
  --ol-sand: #FBEFD9;
  --ol-ink: #2B2420;
  --ol-ink-soft: #5C534C;
  --ol-ink-faint: #948A82;
  --ol-line: #EADFD0;

  --surface-card: #FFFFFF;
  --text-body: var(--ol-ink);
  --text-muted: var(--ol-ink-soft);
  --text-faint: var(--ol-ink-faint);
  --link-color: var(--ol-turquoise-deep);
  --link-hover: var(--ol-red);

  /* ---------- tokens: typography（白銀比スケール） ---------- */
  --font-display: 'Mochiy Pop One', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-text: 'Noto Sans JP', 'Hiragino Sans', sans-serif;

  --text-xs: 11px;   /* 16 ÷ 1.414 */
  --text-sm: 13px;   /* 11 × 1.19（半段階） */
  --text-base: 16px; /* 基準 */
  --text-md: 19px;   /* 16 × 1.19 */
  --text-lg: 23px;   /* 16 × 1.414 */
  --text-xl: 32px;   /* 16 × 2 */
  --text-2xl: 45px;  /* 32 × 1.414 */

  --leading-body: 2.0;      /* 1.414² — 本文はたっぷり */
  --leading-heading: 1.414; /* 見出しは白銀比そのもの */
  --leading-tight: 1.19;    /* 半段階 */

  /* ---------- tokens: layout（白銀比スケール） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 11px;
  --space-4: 16px;
  --space-5: 23px;
  --space-6: 32px;
  --space-7: 45px;
  --space-8: 64px;
  --space-9: 91px;
  --space-10: 128px;

  --radius-sm: 11px;
  --radius-md: 16px;
  --radius-lg: 23px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --ratio-photo: 1.414 / 1;  /* 白銀比の横長 */
  --ratio-wide: 2.828 / 1;   /* 2√2 のワイド帯 */

  --shadow-card: 0 2px 0 rgba(43, 36, 32, .06), 0 8px 23px rgba(43, 36, 32, .08);
  --shadow-float: 0 11px 32px rgba(43, 36, 32, .14);
  --shadow-stamp: 3px 3px 0 var(--ol-ink);
  --border-pop: 2px solid var(--ol-ink);

  --content-max: 1200px;   /* 文字もバナーも全てこの幅 */
  --header-h: 60px;

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-quick: 180ms;
  --duration-fun: 350ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ol-white);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: var(--leading-body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--ol-turquoise); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 全コンテンツ共通の幅 — 文字領域もバナーと同じ */
.inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }

/* ---------- 章バンド（シグネチャー）----------
   セクションごとにベタ色の地が波でめくれていく。
   各バンドの先頭に「前の章の色」の波を敷く。 */
.band { position: relative; padding: var(--space-7) 0 var(--space-8); overflow: hidden; }
.band--white { background: var(--ol-white); }
.band--tint  { background: var(--ol-turquoise-tint); }
.band--paper { background: var(--ol-paper); }
.band-wave { display: block; width: 100%; height: 45px; margin-bottom: var(--space-6); }
.band > .band-wave { margin-top: calc(-1 * var(--space-7)); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 247, .96);
  border-bottom: 1px solid rgba(234, 223, 208, .8);
}
.hdr-in {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-4); height: var(--header-h);
}
.hdr-logo { height: 46px; width: auto; margin-top: 3px; }
.hdr-nav { display: none; gap: 2px; }
/* 広い画面ではヘッダーにも出す（これまで display:none のままで、一度も表示されていなかった） */
@media (min-width: 1024px) { .hdr-nav { display: flex; } }
.hdr-nav a {
  font-weight: 700; font-size: var(--text-sm); color: var(--text-body);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill);
  transition: background var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.hdr-nav a:hover { background: var(--ol-turquoise-tint); color: var(--ol-turquoise-deep); }
.hdr-spacer { flex-grow: 1; }
.btn-search {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--ol-turquoise); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5);
  font-weight: 700; font-size: var(--text-sm); cursor: pointer;
  transition: transform var(--duration-quick) var(--ease-bounce), background var(--duration-quick) var(--ease-out);
}
.btn-search:hover { background: var(--ol-turquoise-deep); transform: translateY(-2px); }
.btn-search:active { transform: scale(.97); }
.btn-menu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--ol-red); color: #fff; border: none; border-radius: 50%;
  width: 45px; height: 45px; flex-shrink: 0; cursor: pointer;
  transition: transform var(--duration-quick) var(--ease-bounce), background var(--duration-quick) var(--ease-out);
}
.btn-menu:hover { background: var(--ol-red-deep); transform: translateY(-2px); }
.btn-menu:active { transform: scale(.97); }
.btn-menu .bars { display: flex; flex-direction: column; gap: 3px; }
.btn-menu .bars i { width: 15px; height: 2px; background: #fff; border-radius: 2px; display: block; }
.btn-menu span.lbl { font-size: 8px; font-weight: 700; line-height: 1; }

/* ドロワー */
.drawer { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(43, 36, 32, .45); }
.drawer.open { display: block; }
.drawer-panel {
  position: absolute; top: 0; right: 0; width: min(320px, 86vw); height: 100%;
  background: var(--ol-white); padding: var(--space-5); overflow-y: auto;
  box-shadow: var(--shadow-float);
}
.drawer-panel h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-md);
  color: var(--ol-turquoise-deep); margin: var(--space-1) 0 var(--space-4);
}
.drawer-panel a {
  display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-weight: 700; font-size: var(--text-base); color: var(--text-body);
}
.drawer-panel a:hover { background: var(--ol-turquoise-tint); color: var(--ol-turquoise-deep); }
.drawer-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: var(--ol-red); color: #fff; border: none; border-radius: 50%;
  width: 38px; height: 38px; font-size: 17px; cursor: pointer; line-height: 1;
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 481px; /* 340 × 1.414 — 評価と天気が乗っても写真が見える高さ */
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43, 36, 32, 0) 30%, rgba(43, 36, 32, .58) 100%);
}
.hero-body { position: relative; width: 100%; padding-bottom: var(--space-8); }
.hero-meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.hero-date { font-size: var(--text-xs); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(43, 36, 32, .6); }
.hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(var(--text-lg), 5vw, var(--text-2xl)); line-height: var(--leading-heading);
  color: #fff;
  text-shadow: 0 2px 4px rgba(43, 36, 32, .5), 0 8px 28px rgba(43, 36, 32, .35);
}
/* 施設名を主役に、タグラインを副に。
   ひと目で「どこの施設を見ているのか」が分かることを最優先する。2026-08-04 */
.hero h1 .hname { display: block; }
.hero h1 .htag {
  display: block; margin-top: var(--space-2);
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(var(--text-base), 2.4vw, var(--text-lg));
  line-height: 1.55; letter-spacing: .01em;
}
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 45px; display: block; }

/* 天気ピル — ヒーロー右上（コンテナ右端に揃える） */
.weather {
  position: absolute; z-index: 2;
  top: var(--space-5);
  right: max(var(--space-5), calc((100% - var(--content-max)) / 2 + var(--space-5)));
  display: none; align-items: center; gap: var(--space-3);
  background: rgba(255, 253, 247, .95);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  box-shadow: var(--shadow-card);
}
.weather.on { display: inline-flex; }
.weather .w-ico { width: 32px; height: 32px; color: var(--ol-turquoise-deep); flex-shrink: 0; }
.weather .w-ico.sun { color: var(--ol-yellow-deep); }
.weather .w-ico.rain, .weather .w-ico.storm { color: var(--ol-turquoise-deep); }
.weather .w-body { display: flex; flex-direction: column; line-height: var(--leading-tight); }
.weather .w-place { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
.weather .w-temp { font-family: var(--font-display); font-size: var(--text-md); color: var(--text-body); }
.weather .w-temp small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; color: var(--text-faint); margin-left: var(--space-1); }

/* 評価ストリップ — ヒーロー内タイトル下 */
.hero-rating {
  display: inline-flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-4);
  background: rgba(255, 253, 247, .95);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
}
.hero-rating .rating { gap: var(--space-2); }
.hero-rating .rating .lbl { width: 7.5em; font-size: var(--text-xs); color: var(--text-body); }
.hero-rating .rating .marks img { width: 14px; height: 14px; }
.hero-rating .rating .score { font-size: var(--text-xs); }
.hero-rating .rating-note { display: none; margin: 0; }
@media (min-width: 700px) {
  .hero-rating {
    flex-direction: row; align-items: center; gap: var(--space-6);
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6);
  }
  .hero-rating .rating .lbl { width: auto; margin-right: var(--space-2); font-size: var(--text-sm); }
  .hero-rating .rating .marks img { width: 16px; height: 16px; }
}

/* ---------- 章見出し（キッカー + 見出し + 波下線） ---------- */
.sec-head { margin: 0 0 var(--space-6); }
.kicker {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-sm); letter-spacing: .19em;
  color: var(--ol-red); margin-bottom: var(--space-2);
}
.kicker::after { content: ''; height: 2px; width: var(--space-7); background: var(--ol-red); border-radius: 2px; opacity: .5; }
.band--tint .kicker { color: var(--ol-turquoise-deep); }
.band--tint .kicker::after { background: var(--ol-turquoise-deep); }
.sec-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
  line-height: var(--leading-heading); color: var(--text-body);
}
.sec-head svg.underwave { display: block; margin-top: var(--space-2); }

/* 記事内の小見出し */
.h3 {
  font-family: var(--font-text); font-size: var(--text-md); font-weight: 900;
  margin: var(--space-7) 0 var(--space-4); display: flex; align-items: center; gap: var(--space-2);
  line-height: var(--leading-heading);
}
.h3::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--ol-red); flex-shrink: 0; }

/* ---------- 本文 ---------- */
.prose p {
  font-family: var(--font-text); font-size: var(--text-base);
  line-height: var(--leading-body); letter-spacing: .03em;
  margin: 0 0 1.414em;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; background: linear-gradient(transparent 62%, var(--ol-yellow-tint) 62%); }
.band--tint .prose strong,
.band--paper .prose strong { background: linear-gradient(transparent 62%, #fff 62%); }
.meta-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) 0 var(--space-5);
}
.byline { font-size: var(--text-sm); font-weight: 700; color: var(--ol-turquoise-deep); }

/* ---------- badge / chip ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); line-height: 1;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  color: #fff; background: var(--ol-turquoise);
  border: 2px solid var(--ol-ink); box-shadow: var(--shadow-stamp);
}
.badge.red { background: var(--ol-red); }
.badge.green { background: var(--ol-green); }
.badge.purple { background: var(--ol-purple); }
.badge.yellow { background: var(--ol-yellow); color: var(--ol-ink); }
.chip {
  display: inline-flex; align-items: center; font-weight: 700; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--ol-turquoise-tint); color: var(--ol-turquoise-deep);
}
.chip.red { background: var(--ol-red-tint); color: var(--ol-red-deep); }
.chip.green { background: var(--ol-green-tint); color: var(--ol-green-deep); }
.chip.yellow { background: var(--ol-yellow-tint); color: var(--ol-yellow-deep); }

/* ---------- リード帯（評価 + 目次を1200px幅で横に組む） ---------- */
.lead-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: var(--space-6) 0 0; }
.rating-card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); align-self: start;
}
.rating { display: flex; align-items: center; gap: var(--space-3); }
.rating .lbl { font-size: var(--text-sm); font-weight: 700; width: 7.5em; flex-shrink: 0; color: var(--text-muted); }
.rating .marks { display: flex; gap: 3px; }
.rating .marks img { width: 19px; height: 19px; }
.rating .marks img.off { opacity: .22; filter: grayscale(.6); }
.rating .score { font-size: var(--text-xs); font-weight: 700; color: var(--ol-ink-faint); }
.rating-note { margin: var(--space-1) 0 0; font-family: var(--font-text); font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-heading); }

.toc { background: var(--ol-turquoise-tint); border-radius: var(--radius-lg); padding: var(--space-5); }
.toc-head { display: flex; align-items: center; gap: var(--space-2); }
.toc-head img { width: 27px; }
.toc-head b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-base); color: var(--ol-turquoise-deep); }
.toc ol {
  margin: var(--space-3) 0 0; padding-left: var(--space-5);
  font-size: var(--text-base); line-height: 2.0; font-weight: 700; font-family: var(--font-text);
}
.toc ol a { color: var(--ol-ink); }
.toc ol a:hover { color: var(--ol-red); }

/* ---------- local voice ---------- */
.voice { display: flex; align-items: flex-start; gap: var(--space-4); margin: var(--space-6) 0 0; }
.voice-char { width: 91px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(43, 36, 32, .18)); }
.voice-bubble {
  position: relative; background: #fff; border: var(--border-pop);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  font-family: var(--font-text); font-size: var(--text-base); line-height: var(--leading-body);
  box-shadow: var(--shadow-stamp);
}
.voice-bubble::before,
.voice-bubble::after { content: ''; position: absolute; top: 27px; width: 0; height: 0; border-style: solid; }
.voice-bubble::before { left: -14px; border-width: 8px 14px 8px 0; border-color: transparent var(--ol-ink) transparent transparent; }
.voice-bubble::after { left: -10px; border-width: 7px 12px 7px 0; border-color: transparent #fff transparent transparent; }
.voice-name {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-xs); color: var(--ol-turquoise-deep); margin-bottom: var(--space-1);
}

/* ---------- info box ---------- */
.infobox {
  border-radius: var(--radius-lg); padding: var(--space-5);
  margin: var(--space-6) 0 0; font-family: var(--font-text);
  background: var(--ol-turquoise-tint);
}
.infobox .ttl {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  margin-bottom: var(--space-2); color: var(--ol-turquoise-deep);
}
.infobox .ttl svg { flex-shrink: 0; }
.infobox p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); }
.infobox p + p { margin-top: .8em; }
.infobox.caution { background: var(--ol-red-tint); }
.infobox.caution .ttl { color: var(--ol-red-deep); }
.infobox.point { background: var(--ol-yellow-tint); }
.infobox.point .ttl { color: var(--ol-yellow-deep); }

/* 赤の大アラート */
.alert {
  background: var(--ol-red); color: #fff; border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-6);
  box-shadow: var(--shadow-card); font-family: var(--font-text);
}
.alert .ttl {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-md);
  line-height: var(--leading-heading); margin-bottom: var(--space-3);
}
.alert .ttl .ico {
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  color: var(--ol-red); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--text-md); flex-shrink: 0; font-family: var(--font-body);
}
.alert p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); }
.alert p + p { margin-top: .8em; }
.alert a { color: #fff; text-decoration: underline; font-weight: 700; }
.alert a:hover { color: var(--ol-yellow); }
.alert strong, .point-card strong { background: none; border-bottom: 2px solid rgba(255, 255, 255, .75); padding-bottom: 1px; }

/* ---------- 結論カード ---------- */
.points { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-6) 0 0; }
.point-card {
  border-radius: var(--radius-lg); padding: var(--space-5); color: #fff;
  box-shadow: var(--shadow-card); font-family: var(--font-text);
  transition: transform var(--duration-fun) var(--ease-bounce), box-shadow var(--duration-fun) var(--ease-out);
}
.point-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.point-card.c1 { background: var(--ol-red); }
.point-card.c2 { background: var(--ol-green); }
.point-card.c3 { background: var(--ol-turquoise-deep); }
.point-card .num {
  font-family: var(--font-display); font-size: var(--text-sm); opacity: .85;
  letter-spacing: .11em; display: block; margin-bottom: var(--space-1);
}
.point-card h3 {
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-md);
  margin: 0 0 var(--space-2); line-height: var(--leading-heading);
}
.point-card p { margin: 0; font-size: var(--text-sm); line-height: 1.9; }

/* ---------- spot info ---------- */
.spotinfo {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; margin: var(--space-6) 0 0;
}
.spotinfo .name {
  background: var(--ol-turquoise); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-2);
}
.spotinfo dl { margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); }
.spotinfo .row { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--ol-line); font-family: var(--font-text); }
.spotinfo .row:last-child { border-bottom: none; }
.spotinfo dt { width: 6.5em; flex-shrink: 0; font-weight: 700; font-size: var(--text-sm); color: var(--ol-turquoise-deep); line-height: 1.9; }
.spotinfo dd { margin: 0; font-size: var(--text-sm); line-height: 1.9; }

/* ---------- ad slot（AdSense in-article。広告が読めない環境では小さく畳まれる） ---------- */
.adslot { margin: var(--space-6) 0 0; text-align: center; }
.adslot > span {
  display: block; font-size: var(--text-xs); font-weight: 700;
  color: var(--text-faint); letter-spacing: .12em; margin-bottom: var(--space-1);
}
.adslot .adsbygoogle { border-radius: var(--radius-md); overflow: hidden; }

/* ---------- affiliate button ---------- */
.affi { text-align: center; margin: var(--space-6) 0 0; }
.affi a {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--ol-red); color: #fff; border: var(--border-pop);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-stamp);
  padding: var(--space-4) var(--space-6); font-weight: 700; font-size: var(--text-base);
  transition: transform var(--duration-quick) var(--ease-bounce), background var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out);
}
.affi a:hover { background: var(--ol-red-deep); color: #fff; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ol-ink); }
.affi a:active { transform: scale(.97); }
.affi .prov { display: block; font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-2); }

/* ---------- share ---------- */
.share { display: flex; align-items: center; gap: var(--space-2); }
.share .lbl { font-size: var(--text-xs); font-weight: 700; color: var(--text-faint); }
.share a, .share button {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--ol-turquoise-tint); color: var(--ol-turquoise-deep);
  transition: transform var(--duration-quick) var(--ease-bounce), background var(--duration-quick) var(--ease-out);
}
.share a:hover, .share button:hover { background: var(--ol-turquoise); color: #fff; transform: translateY(-2px); }
.band--paper .share a, .band--tint .share a { background: #fff; }

/* ---------- figures（白銀比の写真比率） ---------- */
.figs { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-6) 0 0; }
.fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; }
.fig img { width: 100%; aspect-ratio: var(--ratio-photo); object-fit: cover; }
.fig.portrait img { aspect-ratio: 1 / 1.19; } /* 縦位置写真は白銀比の半段階（√√2）で */
.fig.wide img { aspect-ratio: var(--ratio-photo); }
.fig figcaption {
  font-family: var(--font-text); font-size: var(--text-sm); color: var(--text-muted);
  padding: var(--space-3) var(--space-4); line-height: var(--leading-heading);
}
.fig-solo { margin: var(--space-6) 0 0; }
/* 単独のワイド写真は、直前のブロック（表・注意書き・カード）とくっつかないよう上を空ける。
   .figs の中に .fig.wide は入れないので、ここは常に単独。
   直前が .prose のときはマージンが相殺されるので、間隔は変わらない。2026-08-04 */
.fig.wide { margin-top: var(--space-6); }

/* ---------- tenant cards ---------- */
.tenants { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0 0 var(--space-6); }
.tcard {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--duration-fun) var(--ease-bounce), box-shadow var(--duration-fun) var(--ease-out);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.tcard .genre {
  align-self: flex-start; font-size: var(--text-xs); font-weight: 700; line-height: 1;
  color: #fff; background: var(--ol-turquoise); border-radius: var(--radius-pill);
  padding: 6px var(--space-3);
}
.tcard .genre.red { background: var(--ol-red); }
.tcard .genre.green { background: var(--ol-green); }
.tcard .genre.purple { background: var(--ol-purple); }
.tcard .genre.pink { background: var(--ol-pink); }
.tcard .genre.yellow { background: var(--ol-yellow-deep); }
.tcard h4 { margin: 0; font-family: var(--font-body); font-weight: 900; font-size: var(--text-md); line-height: var(--leading-heading); }
.tcard h4 .yomi { font-size: var(--text-xs); font-weight: 700; color: var(--text-faint); margin-left: var(--space-2); }
.tcard p { margin: 0; font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; flex-grow: 1; }
.tcard .hours { display: flex; align-items: center; gap: 6px; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 700; color: var(--ol-turquoise-deep); }
.tcard .hours svg { flex-shrink: 0; }
.tenant-note {
  font-family: var(--font-text); font-size: var(--text-sm); color: var(--text-muted);
  background: #fff; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin: 0; line-height: 1.9;
}

/* ---------- faq ---------- */
.faq { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-3); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-4) 52px var(--space-4) var(--space-5);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  position: relative; line-height: var(--leading-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; border-radius: 50%; background: var(--ol-turquoise);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; transition: transform var(--duration-quick) var(--ease-out);
}
.faq[open] summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); }
.faq .body { padding: 0 var(--space-5) var(--space-5); font-family: var(--font-text); }
.faq .body p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); }
.faq .body p + p { margin-top: .8em; }

/* ---------- 出典（普段は畳んでおく。検索エンジンとAIにはテキストとして見える） ---------- */
.sources {
  margin-top: var(--space-6);
  background: var(--ol-paper); border-radius: var(--radius-md);
  font-family: var(--font-text); font-size: var(--text-xs); line-height: 2.0; color: var(--text-muted);
}
.sources summary {
  list-style: none; cursor: pointer;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-weight: 700; color: var(--ol-turquoise-deep);
  display: flex; align-items: center; gap: var(--space-2);
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before {
  content: '+'; width: 19px; height: 19px; border-radius: 50%;
  background: var(--ol-turquoise); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.sources[open] summary::before { content: '−'; }
.sources p { margin: 0; padding: 0 var(--space-5) var(--space-4); }

/* ---------- あわせて読みたい ---------- */
.next-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.next-head img { width: 32px; }
.next-head b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); }
.cards { display: flex; flex-direction: column; gap: var(--space-3); }
.acard {
  display: flex; gap: var(--space-4); background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; color: var(--text-body);
  transition: transform var(--duration-fun) var(--ease-bounce), box-shadow var(--duration-fun) var(--ease-out);
}
.acard:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); color: var(--text-body); }
.acard .thumb { width: 108px; flex-shrink: 0; background: var(--ol-turquoise-tint); }
.acard .thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
/* リンク先のヒーロー写真を出す版。どこの記事へ飛ぶのかが写真で分かる。2026-08-04 */
.acard .thumb.photo { background: var(--ol-line); }
.acard .thumb.photo img { object-fit: cover; padding: 0; }
.acard .body { padding: var(--space-3) var(--space-4) var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-1); justify-content: center; }
.acard .cat {
  font-size: var(--text-xs); font-weight: 700; color: #fff; background: var(--ol-turquoise);
  border-radius: var(--radius-pill); padding: 3px var(--space-3); align-self: flex-start; line-height: 1.6;
}
.acard .cat.red { background: var(--ol-red); }
.acard .cat.green { background: var(--ol-green); }
.acard .cat.purple { background: var(--ol-purple); }
.acard .ttl { font-weight: 700; font-size: var(--text-base); line-height: var(--leading-heading); }
.acard .date { font-size: var(--text-xs); color: var(--text-faint); }

/* ---------- footer ---------- */
.ftr { background: var(--ol-turquoise); color: #fff; position: relative; }
.ftr .band-wave { margin: 0; }
.ftr-in { max-width: var(--content-max); margin: 0 auto; padding: var(--space-2) var(--space-5) var(--space-6); }
.ftr-brand { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.ftr-brand img { width: 91px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(43, 36, 32, .2)); }
.ftr-brand b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); }
.ftr-brand p { margin: var(--space-2) 0 0; font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; }
.ftr-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.ftr-nav a {
  background: rgba(255, 255, 255, .18); color: #fff; border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); font-weight: 700; font-size: var(--text-sm);
}
.ftr-nav a:hover { background: #fff; color: var(--ol-turquoise-deep); }
.ftr-base {
  border-top: 1px solid rgba(255, 255, 255, .3); padding-top: var(--space-4);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-xs);
}
.ftr-base a { color: #fff; text-decoration: underline; }

/* ---------- バンドのモチーフ装飾（3箇所だけ・PCのみ表示） ---------- */
.band-motif { display: none; position: absolute; pointer-events: none; filter: drop-shadow(0 6px 11px rgba(43, 36, 32, .16)); }
@media (min-width: 700px) {
  .band-motif { display: block; }
  /* ハイビスカスは右上。見出しは左にあるので当たらない */
  .band-motif.hibiscus { top: 23px; right: -16px; width: clamp(64px, 9vw, 108px); transform: rotate(8deg); }
  /* 葉は波の下から、左端ごしに顔を出す（上端で切らない） */
  .band-motif.monstera { top: 91px; left: -45px; width: clamp(91px, 12vw, 154px); transform: rotate(24deg); }
}
/* 本文幅（--content-max）＋余白が取れない画面では、葉が章見出しに重なる。
   1400px 未満では出さない（装飾なので消えて困らない）。2026-08-04 修正 */
@media (max-width: 1399px) {
  .band-motif.monstera { display: none; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(23px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-bounce); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (min-width: 700px) {
  :root { --header-h: 76px; }
  .hdr-logo { height: 62px; margin-top: 5px; }
  .btn-search { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }
  .btn-menu { width: 52px; height: 52px; }
  .hero { min-height: 537px; } /* 380 × 1.414 — 評価ストリップぶん白銀比で一段上げる */
  .hero-wave { height: 64px; }
  .hero-body { padding-bottom: var(--space-9); }
  .band { padding: var(--space-8) 0 var(--space-9); }
  .band-wave { height: 64px; margin-bottom: var(--space-7); }
  .band > .band-wave { margin-top: calc(-1 * var(--space-8)); }
  .points { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .figs.two { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .tenants { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .voice-char { width: 108px; }
  .toc ol { columns: 2; column-gap: var(--space-7); }
}
@media (min-width: 1100px) {
  .prose p { font-size: var(--text-md); }           /* 19px = 16×1.19 */
  .infobox p, .alert p, .faq .body p { font-size: var(--text-md); }
  .faq summary { font-size: var(--text-md); }
  .tenants { grid-template-columns: repeat(3, 1fr); }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .cards .acard { flex-direction: column; }
  .cards .acard .thumb { width: 100%; height: 154px; }
  /* 写真サムネはカードの幅いっぱいに、白銀比で大きく見せる */
  .cards .acard .thumb.photo { height: auto; aspect-ratio: 1.414 / 1; }
  .cards .acard .body { padding: var(--space-1) var(--space-5) var(--space-5); }
  /* 単独のワイド写真は 2√2 : 1 の帯にトリミング */
  .fig.wide img { aspect-ratio: var(--ratio-wide); }
}

/* ===== アフィリエイト（全ページ共通） ===== */
/* アフィリエイト表示（景表法のステマ規制対応） */
.afl { margin: var(--space-3) 0 0; font-family: var(--font-text); font-size: var(--text-xs);
  line-height: 1.8; color: var(--text-faint); }
/* 購入の分岐カード */
.buy { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-4); margin: var(--space-7) 0 0; }
@media (min-width: 700px) { .buy { padding: var(--space-6); } }
.buy-h { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.buy-h b { font-family: var(--font-body); font-weight: 900; font-size: var(--text-md); line-height: 1.4; }
.pr { flex: none; font-family: var(--font-text); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-faint); border: 1px solid var(--ol-line); border-radius: var(--radius-pill);
  padding: 2px var(--space-2); }
.buy-g { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .buy-g { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.bc { border: 2px solid var(--ol-line); border-radius: var(--radius-md); padding: var(--space-4);
  display: flex; flex-direction: column; }
.bc.on { border-color: var(--ol-red); }
.bl { font-family: var(--font-text); font-size: var(--text-xs); font-weight: 700; color: var(--text-faint); }
.bp { margin: var(--space-1) 0 var(--space-3); font-family: var(--font-display);
  font-size: var(--text-xl); line-height: 1.1; color: var(--ol-ink); }
.bc.on .bp { color: var(--ol-red); }
.bp small { font-family: var(--font-body); font-size: var(--text-md); margin-left: 2px; }
.bd { margin: 0 0 var(--space-4); font-family: var(--font-text); font-size: var(--text-sm);
  line-height: 1.9; flex: 1; }
.bb { display: block; text-align: center; text-decoration: none; border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-weight: 900;
  font-size: var(--text-sm); background: var(--ol-red); color: #fff; }
.bb:hover { background: var(--ol-red-deep); }
.bb.ghost { background: transparent; color: var(--ol-turquoise-deep);
  box-shadow: inset 0 0 0 2px var(--ol-turquoise); }
.bb.ghost:hover { background: var(--ol-turquoise-tint); }
.buy-n { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--ol-line);
  font-family: var(--font-text); font-size: var(--text-xs); line-height: 1.8; color: var(--text-muted); }
/* 記事後半の細いCTA */
.buy.slim { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 700px) { .buy.slim { grid-template-columns: 1fr auto; gap: var(--space-6); } }
.buy.slim .bb { min-width: 15em; }
.buy.slim .buy-h { margin-bottom: var(--space-2); }
.buy.slim p { margin: 0; font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; }

/* CTAのサムネイル（2026-08-05 追加）。
   施設の実写を小さく添える。バナー広告に見えないよう、幅は本文グリッドに収める。
   写真は美ら海の黒潮の海（当サイト撮影）。人物はシルエットのみで個人は特定できない。 */
.buy-in { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 700px) { .buy-in { grid-template-columns: 132px 1fr; gap: var(--space-5); } }
.buy-thumb { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--ol-turquoise-tint); }
.buy-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.buy.slim .buy-in .buy-h { margin-bottom: var(--space-2); }


/* ===== AIに聞く ===== */
.askai { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-4); margin: var(--space-7) 0 0; border-top: 5px solid var(--ol-turquoise); }
@media (min-width: 700px) { .askai { padding: var(--space-6); } }
.askai .h { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-2); }
.askai .h b { font-family: var(--font-body); font-weight: 900; font-size: var(--text-md); }
.askai .h span { font-family: var(--font-text); font-size: var(--text-xs); color: var(--text-faint); }
.askai .lead { margin: 0 0 var(--space-4); font-family: var(--font-text); font-size: var(--text-sm);
  line-height: 1.9; color: var(--text-muted); }
.ai-prompt { display: block; width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 7em; background: var(--ol-white); border: 2px solid var(--ol-line);
  border-radius: var(--radius-md); padding: var(--space-4); overflow: hidden;
  font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; color: var(--ol-ink); }
.ai-prompt:focus { outline: none; border-color: var(--ol-turquoise); }
.ai-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.ai-btns button, .ai-btns a { font-family: var(--font-body); font-weight: 900; font-size: var(--text-sm);
  border: 0; border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5);
  cursor: pointer; text-decoration: none; }
.ai-copy { background: var(--ol-turquoise); color: #fff; }
.ai-copy:hover { background: var(--ol-turquoise-deep); }
.ai-copy.done { background: var(--ol-green); }
.ai-btns a { background: transparent; color: var(--ol-turquoise-deep);
  box-shadow: inset 0 0 0 2px var(--ol-turquoise); }
.ai-btns a:hover { background: var(--ol-turquoise-tint); }
.askai .note { margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px dashed var(--ol-line); font-family: var(--font-text); font-size: var(--text-xs);
  line-height: 1.85; color: var(--text-muted); }

/* ===========================================================
   記事パーツ（2026-08-05 追加・共通化）

   ここまで各ページの <style> に同じ定義をコピーしていた。
   .tl だけで28ページに同じものが入っていて、直すときに全部を触る必要があった。
   これ以降に作るページは、ページ内 <style> にこれらを書かないこと。
   =========================================================== */

/* 左が項目名、右にラベルが立つ表 */
.tl { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; margin: var(--space-6) 0 0; }
.tl .trow { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--ol-line); }
.tl .trow:first-child { border-top: 0; }
.tl .trow.hot { background: #FDE8E4; }
.tl .ty { font-family: var(--font-body); font-weight: 900; font-size: var(--text-base); line-height: 1.4; }
.tl .td { margin: 0; font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; color: var(--text-muted); }
.tl .hh { font-family: var(--font-body); font-weight: 900; color: var(--ol-red); white-space: nowrap; }
@media (min-width: 700px) {
  .tl .trow { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-6); }
  .tl .td { grid-column: 1 / 2; }
  .tl .hh { grid-row: 1 / 3; grid-column: 2 / 3; font-size: var(--text-md); }
  .tl .ty { font-size: var(--text-md); }
}

/* 料金・条件の表 */
.ptable { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; margin: var(--space-6) 0 0; }
.ptable .prow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--ol-line); }
.ptable .prow:first-child { border-top: 0; }
.ptable .prow.hot { background: #FDE8E4; }
.ptable .pname { font-family: var(--font-body); font-weight: 900; font-size: var(--text-base); line-height: 1.4; margin: 0; }
.ptable .pprice { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; justify-self: end; }
.ptable .now { font-family: var(--font-body); font-weight: 900; font-size: var(--text-md); color: var(--ol-red); }
.ptable .sub { font-family: var(--font-text); font-size: var(--text-sm); color: var(--text-faint); }
.ptable .pnote { grid-column: 1 / -1; margin: 0; font-family: var(--font-text); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.9; }
.ptable .phead { background: var(--ol-turquoise-tint); padding: var(--space-3) var(--space-5); font-family: var(--font-body); font-weight: 900; font-size: var(--text-sm); color: var(--ol-turquoise-deep); letter-spacing: .04em; }

/* 番号つきの札（のりば・手順） */
.stops { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; }
.stop { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); display: grid; grid-template-columns: 46px 1fr; gap: var(--space-4); align-items: start; }
.stop .no { width: 46px; height: 46px; border-radius: 50%; background: var(--ol-turquoise-deep); color: #fff; font-family: var(--font-body); font-weight: 900; font-size: var(--text-md); display: grid; place-items: center; }
.stop.rc .no { background: var(--ol-red); font-size: var(--text-base); }
.stop .to { display: block; font-family: var(--font-body); font-weight: 900; font-size: var(--text-base); line-height: 1.5; }
.stop .li { margin: var(--space-1) 0 0; font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; color: var(--text-muted); }

/* 手順（丸数字が自動で振られる） */
.steps { counter-reset: st; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.steps .st { position: relative; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 34px); }
.steps .st::before { counter-increment: st; content: counter(st); position: absolute; left: var(--space-4); top: var(--space-4); width: 26px; height: 26px; border-radius: 50%; background: var(--ol-red); color: #fff; font-family: var(--font-body); font-weight: 900; font-size: var(--text-sm); display: grid; place-items: center; }
/* 見出しは直下の b だけ。本文中の b まで block にすると改行が入る */
.steps .st > b { display: block; font-family: var(--font-body); font-weight: 900; font-size: var(--text-base); line-height: 1.5; }
.steps .st p { margin: var(--space-1) 0 0; font-family: var(--font-text); font-size: var(--text-sm); line-height: 1.9; color: var(--text-muted); }

/* 記事中の写真 */
.shot { margin: var(--space-6) 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); background: var(--ol-turquoise-tint); }
.shot figcaption { margin: var(--space-2) 0 0; font-family: var(--font-text); font-size: var(--text-xs); line-height: 1.9; color: var(--text-faint); }
.shots { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; }
@media (min-width: 700px) { .shots { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.shots .shot { margin: 0; }

/* ===== パーツの前後の余白（2026-08-05 Naru指摘） =====
   表や写真のあとに本文が続くと、くっついて読みにくかった。
   各パーツは上マージンしか持っていないので、続く要素側で開ける。 */
.tl + .prose, .ptable + .prose, .stops + .prose, .steps + .prose,
.shot + .prose, .shots + .prose,
.tl + .tl, .ptable + .ptable, .tl + .ptable, .ptable + .tl,
.prose + .shot, .prose + .shots { margin-top: var(--space-6); }

/* 「あわせて読みたい」が直前のカードに寄りすぎていた */
.next-head { margin-top: var(--space-8); }
.askai + .next-head { margin-top: var(--space-8); }