/* =========================================================================
   OSAKA VUE ─ 記事詳細（試作）
   article.css
   =========================================================================

   ・すべて .ov-article 配下に限定する。トップ・カテゴリー・固定ページには
     一切影響しない（親テーマのインラインCSSも上書きしない）。
   ・色・書体・余白は既存トークン（--ov-*）だけを使う。新規トークンは足さない。
   ・!important は一切使わない。共通CSSの body.ov-body 系リセット
     （a / p / h1-h3 / ul / figure / img）に勝つ必要がある箇所は、
     セレクタの頭に body.ov-body を付けて詳細度をそろえることで解決している。
   ========================================================================= */

.ov-article {
  /* 本文の測り。写真より狭くして視覚的な強弱を作る */
  --ova-text:   750px;   /* 本文の実幅（PC） */
  --ova-hero:   800px;   /* メイン写真の表示幅。本文(750px)より広く、主役として残す。
                            画面いっぱいには広げない */
  --ova-media: 1000px;   /* 本文ワイド写真の最大幅
                            元素材が2000px幅なので、DPR2で実画素が足りる上限に合わせた */
  --ova-portrait: 520px; /* 本文中の縦写真の最大幅 */

  background: var(--ov-paper);
  color: var(--ov-ink-2);
  padding-bottom: var(--ov-space-section);
}

/* 版面。中央に置き、左右はサイト共通のガター。 */
.ov-article__wrap {
  /* 内側（本文）の実寸を --ova-text にしたいので、左右のガターを足した幅を上限にする。
     border-box のまま max-width だけ指定すると、ガターぶん内側が狭くなってしまう。 */
  max-width: calc(var(--ova-text) + var(--ov-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--ov-gutter);
  box-sizing: border-box;
}
.ov-article__wrap--wide { max-width: calc(var(--ova-media) + var(--ov-gutter) * 2); }
.ov-article__wrap--hero { max-width: calc(var(--ova-hero) + var(--ov-gutter) * 2); }


/* -------------------------------------------------------------------------
   1. 記事の入口
   ------------------------------------------------------------------------- */

.ov-article__head { padding: clamp(20px, 2.1vw, 30px) 0 0; }

/* パンくず */
body.ov-body .ov-article__crumb {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--ov-ui);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ov-ink-3);
  line-height: 1.6;
}
body.ov-body .ov-article__crumb a { color: var(--ov-ink-3); text-decoration: none; }
body.ov-body .ov-article__crumb a:hover { color: var(--ov-ink-2); text-decoration: underline; }
.ov-article__crumb_sep { padding: 0 8px; color: var(--ov-line-2); }

/* カテゴリー／エリア。ゴールドは小さなラベルだけに使う。 */
body.ov-body .ov-article__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  margin: 0 0 clamp(11px, 1.2vw, 15px);
}
/* カテゴリー。ゴールドが body.ov-body a の color:inherit に消されないよう
   body.ov-body 付きで指定する。 */
body.ov-body .ov-article__cat {
  font-family: var(--ov-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ov-gold);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ov-gold-line);
}
body.ov-body .ov-article__cat:hover { border-bottom-color: var(--ov-gold-line2); color: var(--ov-gold-soft); }
/* エリア。落ち着いたグレー。カテゴリーとの間だけ細い横線でつなぐ。 */
.ov-article__area {
  font-family: var(--ov-jp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ov-ink-3);
}
.ov-article__area:before {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  margin-right: 9px;
  vertical-align: middle;
  background: var(--ov-line-2);
}
/* 先頭に来たときは、つなぐ相手がいないので線を出さない */
.ov-article__area--first:before { display: none; }

/* 店名・施設名。見出しにはせず、エリアの隣に置く。
   金色は店名の文字だけ。区切りの縦線・エリア・本文には広げない。 */
body.ov-body .ov-article__shop {
  font-family: var(--ov-jp);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ov-gold);
  /* 長い店名はスマホで自然に折り返す */
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
/* 区切りの縦線。前に何か出ているときだけ。金色にはしない。 */
body.ov-body .ov-article__shop:before {
  content: "";
  display: inline-block;
  width: 1px; height: 11px;
  margin-right: 11px;
  vertical-align: -1px;
  background: var(--ov-line-2);
}
body.ov-body .ov-article__shop--first:before { display: none; }

/* タイトル。写真に重ねず、暗い地の上に独立して置く。 */
body.ov-body .ov-article__title {
  margin: 0;
  font-family: var(--ov-jps);
  /* 明朝の細さを生かす。太字にして主張を作らない。 */
  font-weight: 400;
  /* 写真より先に文字が目に入らないよう、承認済みの寸法から約2割下げた。
     46px → 36px（PC上限）／26px → 22px（スマホ下限） */
  /* 写真と店名に先に目が行くよう、さらに一段抑えた。
     46px（承認時）→ 36px → 32px。スマホ側は 26px → 22px → 21px。 */
  font-size: clamp(21px, 2.2vw, 32px);
  /* 幅は版面（750px）にまかせる。ch は「0」の幅が基準で、
     日本語だと1文字の半分ほどになってしまい、狙いより極端に狭くなる。 */
  line-height: 1.52;
  letter-spacing: 0.01em;
  /* 純白ではなく、地の黒に沈むウォームホワイト */
  color: var(--ov-ink);
  /* 長い日本語タイトルを省略せず自然に折り返す。
     text-wrap: balance で各行の長さをそろえ、最終行に2文字だけ残るのを防ぐ。
     非対応ブラウザでは従来どおり素直に折り返すだけで、崩れない。 */
  overflow-wrap: break-word;
  /* 語の途中（「席に着／くまでの」など）で折れないよう、文節で折る。
     対応していないブラウザはこの値を読み飛ばし、これまでどおり素直に折り返す。 */
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: balance;
}

/* 補助情報（公開日）。実在する情報だけを出す。 */
body.ov-body .ov-article__meta {
  margin: clamp(11px, 1.2vw, 14px) 0 0;
  font-family: var(--ov-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ov-ink-3);
}

/* リード文（明示的な抜粋がある場合だけ） */
body.ov-body .ov-article__lead {
  /* 幅は版面（750px）にまかせる。ch は「0」の幅が基準で、
     日本語だと 62ch がおよそ31文字にしかならず、狙いより極端に狭くなる。 */
  margin: clamp(14px, 1.6vw, 19px) 0 0;
  font-family: var(--ov-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ov-ink-2);
  /* 語の途中（「確／かめる」など）で折れないよう、文節で折る。
     対応していないブラウザはこの値を読み飛ばす。 */
  word-break: auto-phrase;
  overflow-wrap: break-word;
}


/* -------------------------------------------------------------------------
   2. メイン写真
   本文より広く。比率は元画像のまま（高さを固定しない）。
   ------------------------------------------------------------------------- */

/* タイトルから写真へは、余白を空けすぎずにつなぐ。 */
.ov-article__hero { margin: clamp(18px, 1.9vw, 26px) 0 0; }

body.ov-body .ov-article__hero figure { margin: 0; }

/* 3:2 にそろえる。
   PHP側で 3:2 に切り抜いた画像を渡しているので、通常は比率が既に合っており
   object-fit は働かない。切り抜きを作れなかった画像だけ、ここで枠に収める。
   縦横比を固定するのは枠であって画像ではないため、引き伸ばしは起きない。 */
body.ov-body .ov-article__hero img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  /* 記事ごとに写真の見せたい位置を動かせるようにしておく */
  object-position: var(--ova-hero-x, 50%) var(--ova-hero-y, 50%);
}

/* 本文中の縦写真は今までどおり。ここは一律に切り抜かない。
   後段の `body.ov-body .ov-article__body img { max-width:100% }` と詳細度が
   同じだと、あとに書いたそちらが勝って幅の制限が効かない。
   縦写真は本文の中にしか出ないので、.ov-article__body を挟んで詳細度をそろえる。 */
body.ov-body .ov-article__body .ov-article__figure--portrait img {
  width: auto;
  max-width: min(var(--ova-portrait), 100%);
  margin-inline: auto;
}

body.ov-body .ov-article__caption {
  margin: 10px 0 0;
  font-family: var(--ov-jp);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ov-ink-3);
}
.ov-article__credit { color: var(--ov-ink-3); opacity: 0.8; }


/* 記事冒頭の但し書き。デザイン確認用ページなどで、記事の性格を先に伝える。 */
.ov-article__notice {
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 13px 16px;
  border-left: 2px solid var(--ov-gold-line2);
  background: var(--ov-paper-2);
}
body.ov-body .ov-article__notice p {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ov-ink-3);
}
body.ov-body .ov-article__notice p + p { margin-top: 5px; }


/* -------------------------------------------------------------------------
   3. 目次（H2が3つ以上のときだけ出す）
   ------------------------------------------------------------------------- */

.ov-article__toc {
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px);
  background: var(--ov-paper-2);
  border-left: 1px solid var(--ov-gold-line);
}
body.ov-body .ov-article__toc_head {
  margin: 0 0 12px;
  font-family: var(--ov-ui);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ov-gold);
}
body.ov-body .ov-article__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: ovtoc; }
.ov-article__toc li { counter-increment: ovtoc; margin: 0; }
.ov-article__toc li + li { margin-top: 9px; }
body.ov-body .ov-article__toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px;
  font-family: var(--ov-jp);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ov-ink-2);
  text-decoration: none;
}
.ov-article__toc a:before {
  content: counter(ovtoc, decimal-leading-zero);
  font-family: var(--ov-ui);
  font-size: 10.5px;
  color: var(--ov-gold-mute);
}
body.ov-body .ov-article__toc a:hover { color: var(--ov-ink); text-decoration: underline; }


/* -------------------------------------------------------------------------
   4. 本文
   共通CSSのリセットに負けないよう、必要なものは明示的に戻す。
   すべて .ov-article__body 配下なので他ページには影響しない。
   ------------------------------------------------------------------------- */

.ov-article__body {
  margin: clamp(30px, 3.6vw, 52px) 0 0;
  font-family: var(--ov-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ov-ink-2);
  overflow-wrap: break-word;
}

body.ov-body .ov-article__body p {
  margin: 0 0 1.75em;
  color: var(--ov-ink-2);
}
.ov-article__body > *:last-child { margin-bottom: 0; }

/* 見出し。章の始まりが分かる余白を持たせる。 */
body.ov-body .ov-article__body h2 {
  margin: 2.4em 0 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--ov-line);
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--ov-ink);
}
body.ov-body .ov-article__body h3 {
  margin: 2em 0 0.7em;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 17.5px);
  line-height: 1.65;
  color: var(--ov-ink);
}
body.ov-body .ov-article__body h4 {
  margin: 1.8em 0 0.6em;
  font-family: var(--ov-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ov-ink);
}
.ov-article__body h2:first-child,
.ov-article__body h3:first-child { margin-top: 0; }

/* リンク。共通の body.ov-body a { color:inherit; text-decoration:none }（0,1,2）に
   負けないよう、body.ov-body を頭に付けて同じ土俵で上書きする。
   通常時から下線を出し、色だけに頼らずに本文と区別できるようにする。 */
body.ov-body .ov-article__body a {
  color: var(--ov-gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ov-gold-line2);
}
body.ov-body .ov-article__body a:hover {
  color: var(--ov-ink);
  text-decoration-color: currentColor;
}

/* リスト。共通CSSの list-style / padding リセットを戻す。 */
body.ov-body .ov-article__body ul,
body.ov-body .ov-article__body ol {
  margin: 0 0 1.75em;
  padding-left: 1.5em;
}
body.ov-body .ov-article__body ul { list-style: disc outside; }
body.ov-body .ov-article__body ol { list-style: decimal outside; }
body.ov-body .ov-article__body li { margin: 0 0 0.5em; }
body.ov-body .ov-article__body li::marker { color: var(--ov-gold-mute); }
body.ov-body .ov-article__body li > ul,
body.ov-body .ov-article__body li > ol { margin: 0.5em 0 0; }

/* 引用。細い罫線だけの控えめな表現。 */
body.ov-body .ov-article__body blockquote {
  margin: 2em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 1px solid var(--ov-gold-line);
  font-family: var(--ov-jps);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ov-ink);
}
body.ov-body .ov-article__body blockquote p:last-child { margin-bottom: 0; }
.ov-article__body blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-family: var(--ov-jp);
  font-size: 12.5px;
  font-style: normal;
  color: var(--ov-ink-3);
}

/* 表。暗色でも区切りが読める。狭い画面では表の領域内だけ横スクロール。 */
.ov-article__body .ov-article__tablewrap,
.ov-article__body figure.wp-block-table {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.ov-body .ov-article__body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--ov-jp);
  font-size: 14.5px;
  line-height: 1.7;
}
body.ov-body .ov-article__body th,
body.ov-body .ov-article__body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ov-line);
  text-align: left;
  vertical-align: top;
}
body.ov-body .ov-article__body th {
  color: var(--ov-ink);
  font-weight: 500;
  white-space: nowrap;
  border-bottom-color: var(--ov-line-2);
}
body.ov-body .ov-article__body td { color: var(--ov-ink-2); }
.ov-article__body tbody tr:last-child th,
.ov-article__body tbody tr:last-child td { border-bottom: 0; }

/* 本文中の画像・ギャラリー・キャプション。写真の白地は加工しない。 */
body.ov-body .ov-article__body figure { margin: 2em 0; }
body.ov-body .ov-article__body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
body.ov-body .ov-article__body figcaption {
  margin: 10px 0 0;
  font-family: var(--ov-jp);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ov-ink-3);
}

/* 本文より広く見せたい画像（任意）。版面の外へ少しだけ出す。
   body.ov-body .ov-article__body figure の margin ショートハンド（0,2,1）に
   margin-left を打ち消されるため、同じ強さで指定する。 */
body.ov-body .ov-article__body .ov-article__figure--wide {
  width: min(var(--ova-media), calc(100vw - var(--ova-gut, var(--ov-gutter)) * 2));
  max-width: none;
  margin: 2.4em 0 2.4em 50%;
  transform: translateX(-50%);
}

/* 区切り線・コード */
body.ov-body .ov-article__body hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--ov-line);
}
body.ov-body .ov-article__body code {
  padding: 0.15em 0.45em;
  background: var(--ov-paper-2);
  border-radius: 2px;
  font-size: 0.9em;
  color: var(--ov-ink);
}

/* 埋め込み。白地の中身は反転させない。 */
.ov-article__body .wp-block-embed__wrapper { position: relative; }
.ov-article__body iframe { max-width: 100%; }


/* -------------------------------------------------------------------------
   5. 読み終わった後
   ------------------------------------------------------------------------- */

.ov-article__after { margin: clamp(40px, 4.6vw, 68px) 0 0; }

/* 共有。
   チャコールの面と細い輪郭線だけで作る。ブランド色の大きな面・強い影・
   大きな角丸は使わない。ゴールドは輪郭線と、触れたときの反応だけに使う。 */
.ov-article__share {
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--ov-line);
}

/* 「SHARE」は小さな補助見出し。帯にしない。 */
body.ov-body .ov-article__share_label {
  margin: 0 0 12px;
  font-family: var(--ov-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ov-ink-3);
}

/* PCは整った横並び。狭い画面では幅に応じて均等に折り返す。 */
body.ov-body .ov-article__share_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}
.ov-article__share_cell { margin: 0; }

/* 3つとも同じ寸法。高さは操作領域の下限に合わせて 44px。 */
body.ov-body .ov-article__share_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--ov-line);
  border-radius: 2px;
  background: var(--ov-paper-2);
  color: var(--ov-ink-2);
  font-family: var(--ov-ui);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

/* アイコンの見た目の大きさを3つでそろえる。 */
.ov-article__share_ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--ov-ink-2);
  transition: color 0.3s ease;
}
.ov-article__share_ico svg { display: block; }

/* ラベルの位置も3つでそろえる。 */
.ov-article__share_txt { white-space: nowrap; }

body.ov-body .ov-article__share_btn:hover {
  border-color: var(--ov-gold-line2);
  background: var(--ov-paper-3);
  color: var(--ov-ink);
}
body.ov-body .ov-article__share_btn:hover .ov-article__share_ico { color: var(--ov-ink); }

/* 触れて確かめられない画面でも押せると分かるよう、押した瞬間に面を動かす。 */
body.ov-body .ov-article__share_btn:active {
  border-color: var(--ov-gold-line2);
  background: var(--ov-paper);
}
.ov-article__share_btn:focus-visible,
.ov-article__toc a:focus-visible,
.ov-article__body a:focus-visible,
.ov-article__crumb a:focus-visible,
.ov-article__cat:focus-visible,
.ov-article__rel_item a:focus-visible,
.ov-article__back:focus-visible {
  outline: 2px solid var(--ov-gold-soft);
  outline-offset: 3px;
}

/* 関連記事。最大3件。件数に応じて列が変わる。 */
.ov-article__rel { margin: clamp(40px, 4.6vw, 64px) 0 0; }
.ov-article__rel_head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ov-line);
}
.ov-article__rel_jp {
  font-family: var(--ov-jps);
  font-size: 16px;
  color: var(--ov-ink);
}
.ov-article__rel_en {
  font-family: var(--ov-ui);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ov-ink-3);
}
body.ov-body .ov-article__rel_list {
  display: grid;
  grid-template-columns: repeat(var(--ova-rel, 3), minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-article__rel_item a { display: block; text-decoration: none; }
.ov-article__rel_media { display: block; overflow: hidden; background: var(--ov-paper-2); }
/* 関連記事の写真だけは 3:2 に統一する（一覧カードと同じ扱い）。
   高さを px で決め打ちせず aspect-ratio を使うので、幅が変わっても比率は一定。 */
body.ov-body .ov-article__rel_media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 55%;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-article__rel_item a:hover .ov-article__rel_media img { transform: scale(1.05); }
.ov-article__rel_meta {
  display: block;
  margin: 12px 0 0;
  font-family: var(--ov-ui);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ov-ink-3);
}
body.ov-body .ov-article__rel_title {
  display: block;
  margin: 7px 0 0;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ov-ink);
}
.ov-article__rel_item a:hover .ov-article__rel_title { color: var(--ov-gold-soft); }

/* カテゴリー一覧へ戻る */
body.ov-body .ov-article__back_wrap { margin: clamp(34px, 3.6vw, 48px) 0 0; }
body.ov-body .ov-article__back {
  display: inline-flex;
  align-items: center;
  min-height: clamp(29px, calc(29px + (768px - 100vw) * 0.0893), 44px);
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ov-line-2);
  font-family: var(--ov-ui);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ov-ink-2);
  text-decoration: none;
}
body.ov-body .ov-article__back:hover { color: var(--ov-ink); border-bottom-color: var(--ov-gold-line2); }
.ov-article__back span { color: var(--ov-gold); }


/* -------------------------------------------------------------------------
   6. レスポンシブ
   共通の境界（1024/1025・600/601）に合わせる。
   ------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  /* 版面いっぱい（ガターは padding が持つ）。1000px を超えない */
  .ov-article__wrap--wide { max-width: 100%; }
}

/* スマホ（〜767px）の左右余白 ─ Eat の記事詳細だけ。
   タイトル・導入文・メイン写真と説明・本文・本文写真・SHARE・関連記事は
   すべて .ov-article__wrap の中にあるので、外側のこの1か所だけで決める。
   内側の要素には余白を足さない（二重に効かせない）。
   他の6セクションは --ova-gut を持たないので、下の 600px の指定がそのまま働く。
   --ov-gutter には触れないので、ヘッダーとフッターの共通余白も変わらない。 */
@media screen and (max-width: 767px) {
  .ov-article--eat { --ova-gut: 28px; }
  .ov-article--eat .ov-article__wrap { padding: 0 var(--ova-gut); }
}
/* 375px 未満の小さい画面だけ、少し詰める。 */
@media screen and (max-width: 374px) {
  .ov-article--eat { --ova-gut: 24px; }
}

@media screen and (max-width: 600px) {
  /* 600pxで 4.6vw = 27.6px。上限28pxにしておくと601pxから連続する。
     390px以下では 4.6vw < 20px となり、下限の20pxが効く。 */
  .ov-article__wrap { padding: 0 clamp(20px, 4.6vw, 28px); }

  /* 共有ボタンは横方向にも44pxを確保する（「X」のような短いラベル対策） */
  body.ov-body .ov-article__share_list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); max-width: none; }

  .ov-article__body { font-size: 14.5px; line-height: 1.9; }

  /* 600pxで26px（PC側の下限と一致）、390px以下で30px。境界で跳ねない。 */
  body.ov-body .ov-article__title {
    font-size: clamp(21px, calc(21px + (600px - 100vw) * 0.014), 24px);
    line-height: 1.55;
  }
  body.ov-body .ov-article__body h2 { font-size: 17px; }
  body.ov-body .ov-article__body h3 { font-size: 16px; }
  body.ov-body .ov-article__shop { font-size: 12.5px; }
  body.ov-body .ov-article__shop:before { height: 10px; margin-right: 9px; }
  body.ov-body .ov-article__lead { font-size: 14.5px; }
  body.ov-body .ov-article__rel_list { gap: 22px; }
  body.ov-body .ov-article__body .ov-article__figure--wide { width: auto; margin: 2em 0; transform: none; }
  body.ov-body .ov-article__body table { font-size: 14px; }
}

/* -------------------------------------------------------------------------
   関連記事の列数
   件数（data-count）と画面幅の両方で決める。
   すべて同じ詳細度（0,3,1）で書き、あとに来た指定が勝つ順番に並べている。
   件数側の指定だけを media の外に置くと、狭い画面でも件数分の列が残ってしまう。
   ------------------------------------------------------------------------- */
body.ov-body .ov-article__rel_list[data-count="1"] { --ova-rel: 1; max-width: 380px; }
body.ov-body .ov-article__rel_list[data-count="2"] { --ova-rel: 2; }
body.ov-body .ov-article__rel_list[data-count="3"] { --ova-rel: 3; }

@media screen and (max-width: 768px) {
  body.ov-body .ov-article__rel_list[data-count="1"] { --ova-rel: 1; }
  body.ov-body .ov-article__rel_list[data-count="2"],
  body.ov-body .ov-article__rel_list[data-count="3"] { --ova-rel: 2; }
}

@media screen and (max-width: 600px) {
  body.ov-body .ov-article__rel_list[data-count="1"],
  body.ov-body .ov-article__rel_list[data-count="2"],
  body.ov-body .ov-article__rel_list[data-count="3"] { --ova-rel: 1; max-width: none; }
}

/* =========================================================================
   ここから下は WordPress 実装時の追記
   ここより上は承認済み試作 _prototype/article.css と完全に同一
   （md5 ee17156f7665427b712a2606beeea7c0）。

   追記の目的は「デザインを足すこと」ではなく、
   the_content() が実際に吐くマークアップを、上の承認済み規則へ接続すること。
   すべて .ov-article 配下に閉じており、!important は使わない。
   ========================================================================= */

/* 読み上げ専用（共有結果の通知、アイコンだけのリンクのラベル） */
.ov-article .ov-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 目次から見出しへ飛んだとき、sticky のヘッダーに隠れないようにする。
   .ov-header は position:sticky / top:0 で、スクロール後は高さが縮む。
   縮んだあとの高さより少し大きい値にしてある。 */
body.ov-body .ov-article__body h2,
body.ov-body .ov-article__body h3 {
  scroll-margin-top: clamp(84px, 13vh, 132px);
}

/* 表。
   親テーマはクラシック本文の <table> を .s_table で包む（custom_editor.php）。
   その横スクロール指定は .post_content 配下限定なので記事側では効かない。
   承認済みの .ov-article__tablewrap と同じ扱いにして引き取る。
   ブロックの figure.wp-block-table は承認済みCSSが既に見ている。 */
.ov-article__body .s_table {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.ov-body .ov-article__body .s_table table { margin: 0; }
/* 親テーマのフィルターは figure.wp-block-table の中の <table> も .s_table で包む。
   そのままだと外側と内側の両方に余白が付いて間隔が倍になるので、内側だけ消す。 */
body.ov-body .ov-article__body figure.wp-block-table .s_table { margin: 0; }

/* 画像ブロック。
   figure と figcaption は承認済み規則がそのまま当たる。
   ここでは中央寄せと、はみ出し防止だけを補う。 */
/* :not() で「幅広指定でない figure」に限定する。
   これを付けないと、この規則（0,3,3）が承認済みの
   .ov-article__figure--wide（0,3,2）の max-width:none に勝ってしまい、
   alignwide の写真が本文幅のまま止まる。 */
body.ov-body .ov-article__body figure.wp-block-image:not(.ov-article__figure--wide),
body.ov-body .ov-article__body .wp-caption:not(.ov-article__figure--wide) {
  max-width: 100%;
}
body.ov-body .ov-article__body figure.wp-block-image img,
body.ov-body .ov-article__body .wp-caption img {
  margin-inline: auto;
}
body.ov-body .ov-article__body .wp-caption-text {
  margin: 10px 0 0;
  font-family: var(--ov-jp);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ov-ink-3);
}

/* 回り込みは本文750pxでは崩れやすいので、すべて中央に揃える。 */
body.ov-body .ov-article__body .aligncenter,
body.ov-body .ov-article__body .alignleft,
body.ov-body .ov-article__body .alignright {
  float: none;
  margin-inline: auto;
}

/* alignwide / alignfull は PHP 側（osakavue_single_prepare_content）で
   ov-article__figure--wide を付けているので、CSSでは受けない。
   ここに同じ指定を重ねると、承認済みの ≤600px の打ち消しが効かない
   二つ目の経路ができてしまうため、機構は一本に保つ。 */

/* 埋め込み。テーマは responsive-embeds に対応しているが、
   ブロック用CSSが読み込まれない場合に備えて比率だけ保つ。 */
body.ov-body .ov-article__body .wp-block-embed__wrapper iframe,
body.ov-body .ov-article__body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* 区切り */
body.ov-body .ov-article__body .wp-block-separator {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--ov-line);
}

/* 関連記事にアイキャッチが無い場合。巨大な仮画像は出さず、
   カードの比率だけ 3:2 で保つ。 */
.ov-article__rel_ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--ov-paper-2);
  border: 1px solid var(--ov-line);
  box-sizing: border-box;
}
.ov-article__rel_ph span {
  font-family: var(--ov-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ov-ink-3);
}

/* 本文のページ分割（<!--nextpage-->）。親テーマから引き継いだ機能の受け皿。 */
body.ov-body .ov-article__body .page-links {
  margin: 2.4em 0 0;
  font-family: var(--ov-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ov-ink-3);
}
body.ov-body .ov-article__body .page-links a {
  text-decoration: none;
  padding: 0 6px;
}

/* 共有ボタンは実寸で 44px 以上あるため、当たり判定を足す擬似要素は要らない。
   戻る導線は文字だけなので、透明な擬似要素で上下の当たり判定を広げる。 */
body.ov-body .ov-article__back { position: relative; }
body.ov-body .ov-article__back:after {
  content: "";
  position: absolute;
  top: -8px; right: 0; bottom: -8px; left: 0;
}

/* コピーがどうしても使えない環境で出す、手で写すためのURL欄。
   共有ボタンと同じ面と輪郭にそろえ、幅だけ広く取る。 */
body.ov-body .ov-article__share_manual {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 8px 0 0;
  padding: 0 14px;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--ov-gold-line2);
  border-radius: 2px;
  background: var(--ov-paper-2);
  color: var(--ov-ink-2);
  font-family: var(--ov-ui);
  font-size: 12px;
}

/* -------------------------------------------------------------------------
   本文写真のまとまり（写真 → 短い見出し → 説明文）
   PC・iPad は2列、スマホは1列。トップのメイン写真はこれまでどおり1列のまま。
   本文の文章そのものは段組みにせず、この写真のまとまりだけを並べる。
   ------------------------------------------------------------------------- */

body.ov-body .ov-article__body .ov-photoset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 24px;          /* 列間 24px（PC） */
  margin: clamp(26px, 3vw, 38px) 0;
}

/* グループブロックは中に入れ物を1枚はさむ。
   その入れ物を display:contents にして、中のまとまりを直接この並びに参加させる。 */
body.ov-body .ov-article__body .ov-photoset > .wp-block-group__inner-container,
body.ov-body .ov-article__body .ov-photoset__item > .wp-block-group__inner-container {
  display: contents;
}

/* 1つのまとまり。写真・見出し・説明の順に縦に並べる。
   figure を display:contents にして、中の写真と説明をこの並びに参加させる。
   これで「写真 → 見出し → 説明文」の順にできる。 */
body.ov-body .ov-article__body .ov-photoset__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
body.ov-body .ov-article__body .ov-photoset__item figure.wp-block-image { display: contents; }

/* 写真。すべて横長3:2で、上端と横幅をそろえる。枠線も影も付けない。 */
body.ov-body .ov-article__body .ov-photoset__item figure.wp-block-image img {
  order: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  margin: 0;
}

/* 短い見出し。写真のすぐ下。 */
body.ov-body .ov-article__body .ov-photoset__item h3 {
  order: 2;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ov-ink);
}

/* 説明文。見出しとの間は詰める。 */
body.ov-body .ov-article__body .ov-photoset__item figure.wp-block-image figcaption {
  order: 3;
  margin: 7px 0 0;
  font-family: var(--ov-jp);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ov-ink-3);
}

/* iPad。列間は 20px。768px の縦向きでも2列のまま。 */
@media (max-width: 1024px) {
  body.ov-body .ov-article__body .ov-photoset { gap: 30px 20px; }
}

/* スマホは1列。左→右→次段の並びがそのまま縦一列になる。 */
@media (max-width: 767px) {
  body.ov-body .ov-article__body .ov-photoset {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  body.ov-body .ov-article__body .ov-photoset__item h3 { font-size: 15.5px; margin-top: 12px; }
}


/* =========================================================================
   Eat の店舗情報と口コミ

   観光スポット・アフタヌーン特集の詳細ページと同じ考え方で、
   見出し・情報・行動ボタンの階層だけで組む。枠は増やさず、
   区画の境目にだけ細い罫線を引く。すべて .ov-eat 配下に閉じている。
   ========================================================================= */

.ov-eat {
  /* 観光詳細・アフタヌーン詳細と同じゴールドと線の濃さにそろえる。
     金は「線」と「小さなラベル」だけに使い、面には塗らない。 */
  --ove-gold: #c4aa75;
  --ove-line: rgba(196, 170, 117, 0.28);
  margin: clamp(30px, 3.6vw, 48px) 0 0;
}

/* 編集部から。箱で囲まず、左に2pxのゴールド線を1本だけ。 */
.ov-eat__note {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  padding: 12px 16px 12px 16px;
  border-left: 2px solid var(--ove-gold);
  /* 黒よりわずかに明るい程度。面としては主張させない。 */
  background: rgba(255, 255, 255, 0.022);
}
.ov-eat__note_label {
  margin: 0 0 4px;
  font-family: var(--ov-en);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ove-gold);
}
body.ov-body .ov-eat__note_body {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ov-ink-2);
}

/* 情報パネル。外周だけ実線、中の区切りは破線。個別の項目は囲まない。 */
.ov-eat__panel {
  border: 1px solid var(--ove-line);
  border-radius: 2px;
  padding: clamp(18px, 2.2vw, 26px);
  background: rgba(255, 255, 255, 0.012);
}
.ov-eat__block { padding: 0; border-top: 0; }
.ov-eat__block + .ov-eat__block {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px dashed var(--ove-line);
}

body.ov-body .ov-eat__h2 {
  margin: 0 0 clamp(13px, 1.5vw, 18px);
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ov-ink);
}

/* 情報。PC・iPadは2列、スマホは1列。長い値は2列ぶんを使う。 */
body.ov-body .ov-eat__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px clamp(20px, 2.4vw, 34px);
  margin: 0;
}
.ov-eat__row { min-width: 0; }
.ov-eat__row--wide { grid-column: 1 / -1; }

body.ov-body .ov-eat__k {
  margin: 0 0 3px;
  font-family: var(--ov-jp);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ove-gold);
}
body.ov-body .ov-eat__v {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ov-ink);
  /* 住所・営業時間・料金は長くなる。狭い画面でも折り返す。 */
  overflow-wrap: break-word;
}
/* 補足（料金の但し書きなど）はグレーで一段落とす。 */
body.ov-body .ov-eat__row--note .ov-eat__v { color: var(--ov-ink-3); font-size: 13px; }

/* 公式へのリンクは、ゴールドの文字に細い下線だけ。 */
body.ov-body .ov-eat__link {
  display: inline-block;
  min-height: 44px;
  padding: 8px 0 0;
  font-size: 14.5px;
  color: var(--ove-gold);
  border-bottom: 1px solid var(--ove-line);
  transition: color 0.4s var(--ov-ease), border-color 0.4s var(--ov-ease);
}
body.ov-body .ov-eat__link:hover { color: var(--ov-gold-soft); border-color: var(--ove-gold); }
body.ov-body .ov-eat__row--link .ov-eat__k { margin-bottom: 0; }

/* --- 口コミ --- */

.ov-eat-rv__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-family: var(--ov-jp);
  font-size: 14.5px;
  color: var(--ov-ink);
}
.ov-eat-rv__label {
  font-family: var(--ov-en);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ove-gold);
}
.ov-eat-rv__score strong { font-weight: 400; color: var(--ov-ink); font-size: 17px; }
.ov-eat-rv__count { font-size: 12px; color: var(--ov-ink-3); }

body.ov-body .ov-eat-rv__list { margin: 0 0 clamp(16px, 1.8vw, 22px); padding: 0; list-style: none; }
body.ov-body .ov-eat-rv__item {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px dashed var(--ove-line);
}
body.ov-body .ov-eat-rv__item:last-child { border-bottom: 0; }
.ov-eat-rv__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 6px;
}
body.ov-body .ov-eat-rv__name { margin: 0; font-size: 13px; color: var(--ov-ink); }
body.ov-body .ov-eat-rv__stars { margin: 0; }
body.ov-body .ov-eat-rv__date { margin: 0; font-family: var(--ov-en); font-size: 10.5px; color: var(--ov-ink-3); }
body.ov-body .ov-eat-rv__body { font-size: 14.5px; line-height: 1.9; color: var(--ov-ink-2); }
body.ov-body .ov-eat-rv__body p { margin: 0 0 0.9em; }
body.ov-body .ov-eat-rv__body p:last-child { margin-bottom: 0; }

body.ov-body .ov-eat-rv__empty,
body.ov-body .ov-eat-rv__notice {
  margin: 0 0 14px;
  font-family: var(--ov-jp);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ov-ink-3);
}
body.ov-body .ov-eat-rv__notice { color: var(--ov-gold-soft); }

/* --- スマホ --- */
@media screen and (max-width: 767px) {
  body.ov-body .ov-eat__grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .ov-eat__row--wide { grid-column: auto; }
}
@media screen and (max-width: 600px) {
  body.ov-body .ov-eat__note_body,
  body.ov-body .ov-eat__v,
  body.ov-body .ov-eat-rv__body { font-size: 14.5px; }
  body.ov-body .ov-eat__h2 { font-size: 17px; }
}

/* 口コミの4件目以降は、開くまで隠す（JSが無くても3件は読める） */
.ov-eat-rv__item--more { display: none; }
.ov-eat-rv.is-open .ov-eat-rv__item--more { display: list-item; }
.ov-eat-rv.is-open .ov-rv__more { display: none; }
body.ov-body .ov-eat-rv__visit { margin: 0; font-family: var(--ov-jp); font-size: 11px; color: var(--ov-ink-3); }


/* =========================================================================
   夜景ホテル5軒（デザインデモ）

   黒・アイボリー・既存のゴールド・短い金線だけで組む。
   太い枠、メダル、王冠、点数、順位表、強い影は使わない。
   ========================================================================= */

.ov-demo {
  --ovd-gold: #c4aa75;
  --ovd-line: rgba(196, 170, 117, 0.28);
  margin: clamp(26px, 3.2vw, 42px) 0 0;
}

/* --- 主役の1軒（中央の縦組み） --- */
.ov-demo__lead {
  position: relative;
  isolation: isolate;
  margin: 0 0 clamp(34px, 4vw, 56px);
  padding: clamp(26px, 3.2vw, 44px) 0 clamp(30px, 3.6vw, 48px);
  border-top: 1px solid var(--ovd-line);
  border-bottom: 1px solid var(--ovd-line);
  overflow: clip;
}
/* 背景は第一候補の区画だけ。白黒で薄く敷く。 */
.ov-demo__lead--bg:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--ovd-bg);
  background-size: cover;
  background-position: 50% 50%;
  filter: grayscale(1);
  opacity: 0.05;
}
.ov-demo__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16,18,21,0.9) 0%, rgba(16,18,21,0.72) 45%, rgba(16,18,21,0.94) 100%);
}
/* 第一候補だけは本文の測り（750px）より広く見せる。
   .ov-article__wrap の内側にあるので、中央から左右へ広げて外に出す。 */
.ov-demo__lead_in {
  width: min(920px, calc(100vw - var(--ov-gutter) * 2));
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.ov-demo__badge {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--ovd-gold);
}
.ov-demo__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 11px auto 0;
  background: var(--ovd-gold);
  opacity: 0.85;
}
body.ov-body .ov-demo__name {
  margin: 16px 0 0;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.4;
  color: var(--ov-ink);
}

/* 写真は3:2・最大820px・中央 */
body.ov-body .ov-demo__lead_fig {
  max-width: 820px;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
}
body.ov-body .ov-demo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
body.ov-body .ov-demo__imgnote {
  margin: 8px 0 0;
  font-family: var(--ov-jp);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ov-ink-3);
  text-align: left;
}

/* ホテル詳細。PC・iPadは3列、スマホは1列。箱で囲まず、列の間を淡い線で分ける。 */
body.ov-body .ov-demo__facts--lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-top: 1px solid var(--ovd-line);
  border-bottom: 1px solid var(--ovd-line);
  gap: 0;
  text-align: left;
}
.ov-demo__facts--lead > div {
  min-width: 0;
  padding: 0 clamp(12px, 1.6vw, 20px);
  border-left: 1px dashed var(--ovd-line);
}
.ov-demo__facts--lead > div:first-child { border-left: 0; padding-left: 0; }
.ov-demo__facts--lead > div:last-child { padding-right: 0; }

/* 編集部より */
.ov-demo__note {
  max-width: 680px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: clamp(16px, 1.8vw, 22px) 0 0;
  border-top: 1px solid var(--ovd-line);
  text-align: left;
}
.ov-demo__note_h {
  margin: 0 0 8px;
  font-family: var(--ov-jp);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--ovd-gold);
}
body.ov-body .ov-demo__note_b {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ov-ink-2);
}

/* 公式サイト・OSAKA VUEの詳細。ゴールドの文字に細い下線だけ。 */
body.ov-body .ov-demo__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
}
body.ov-body .ov-demo__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ov-jp);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ovd-gold);
  border-bottom: 1px solid var(--ovd-line);
  transition: color 0.4s var(--ov-ease), border-color 0.4s var(--ov-ease);
}
body.ov-body .ov-demo__link:hover { color: var(--ov-gold-soft); border-color: var(--ovd-gold); }

body.ov-body .ov-demo__links--center {
  justify-content: center;
  margin-top: clamp(18px, 2.2vw, 26px);
}

/* --- 残り4軒（小さなリスト表示） --- */
body.ov-body .ov-demo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 2.8vw, 36px) clamp(20px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ov-body .ov-demo__card { margin: 0; min-width: 0; }
.ov-demo__rest { padding-top: clamp(4px, 1vw, 10px); }
.ov-demo__no {
  margin: 0 0 8px;
  font-family: var(--ov-en);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--ovd-gold);
}
body.ov-body .ov-demo__media { margin: 0; }

body.ov-body .ov-demo__cname {
  margin: 12px 0 0;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45;
  color: var(--ov-ink);
}

/* 3行リスト。ラベル幅＋値の2列。箱・角丸・背景・影は使わない。 */
body.ov-body .ov-demo__list { margin: 12px 0 0; }
.ov-demo__li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--ovd-line);
}
.ov-demo__li:first-child { border-top: 0; padding-top: 0; }
body.ov-body .ov-demo__li dt {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--ovd-gold);
}
body.ov-body .ov-demo__li dd {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ov-ink);
  overflow-wrap: break-word;
}

/* --- 各ホテルのビューポイントを比較 --- */
.ov-demo__cmp {
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  border-top: 1px solid var(--ovd-line);
}
body.ov-body .ov-demo__h2 {
  margin: 0;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.45;
  color: var(--ov-ink);
}
.ov-demo__h2:after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 12px 0 0;
  background: var(--ovd-gold);
  opacity: 0.85;
}
body.ov-body .ov-demo__rows { margin: clamp(16px, 2vw, 22px) 0 0; padding: 0; list-style: none; }
body.ov-body .ov-demo__row {
  margin: 0;
  padding: clamp(24px, 2.4vw, 30px) 0;
  border-top: 1px dashed var(--ovd-line);
}
body.ov-body .ov-demo__row:first-child { border-top: 0; padding-top: 0; }
body.ov-body .ov-demo__rname {
  margin: 0 0 10px;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ov-ink);
}
/* PCは4項目を横に。表組みにしないので横スクロールは起きない。 */
body.ov-body .ov-demo__rfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px clamp(14px, 1.8vw, 24px);
  margin: 0;
}
.ov-demo__rfacts > div { min-width: 0; }
body.ov-body .ov-demo__rfacts dt {
  margin: 0 0 2px;
  font-family: var(--ov-jp);
  font-size: 11px;
  color: var(--ovd-gold);
}
body.ov-body .ov-demo__rfacts dd {
  margin: 0;
  font-family: var(--ov-jp);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ov-ink);
  overflow-wrap: break-word;
}
.ov-demo__sep { color: var(--ov-ink-3); margin: 0 4px; }

/* --- iPad --- */
@media screen and (max-width: 1024px) {
  /* iPadは 2列×2段 */
  body.ov-body .ov-demo__rfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- スマホ --- */
@media screen and (max-width: 767px) {
  /* ホテル詳細は1列。列を分ける線は上下の区切りに変える。 */
  body.ov-body .ov-demo__facts--lead { grid-template-columns: minmax(0, 1fr); }
  .ov-demo__facts--lead > div {
    padding: 10px 0;
    border-left: 0;
    border-top: 1px dashed var(--ovd-line);
  }
  .ov-demo__facts--lead > div:first-child { border-top: 0; padding-top: 0; }
  .ov-demo__facts--lead > div:last-child { padding-bottom: 0; }

  body.ov-body .ov-demo__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  body.ov-body .ov-demo__rfacts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.ov-body .ov-demo__row { padding: clamp(18px, 5vw, 24px) 0; }
  .ov-demo__li { grid-template-columns: 88px minmax(0, 1fr); }
}

/* デザイン確認用の記事であることを、いちばん上で伝える */
.ov-demo__tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 10px;
}
.ov-demo__tag_en {
  font-family: var(--ov-en);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--ov-ink-3);
}
.ov-demo__tag_jp {
  font-family: var(--ov-jp);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: #c4aa75;
}

/* =========================================================================
   固定ページ（プライバシーポリシー・免責事項・著作権について・お問い合わせ）

   記事詳細と同じ本文幅・同じ余白を使う。
   写真・共有ボタン・関連記事は無いので、その分だけ上下を詰める。
   ========================================================================= */

.ov-article--page .ov-article__head { padding-bottom: clamp(6px, 0.8vw, 12px); }

.ov-article--page .ov-article__title {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.5;
}

.ov-article--page .ov-article__body--page > h2 {
  margin-top: clamp(38px, 4vw, 58px);
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--ov-line);
  font-size: clamp(17px, 1.5vw, 20px);
}
.ov-article--page .ov-article__body--page > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

body.ov-body .ov-article--page .ov-article__body--page ul {
  margin: 18px 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
body.ov-body .ov-article--page .ov-article__body--page ul li {
  margin: 0 0 8px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.78);
}
body.ov-body .ov-article--page .ov-article__body--page a {
  color: var(--ov-gold-soft);
  border-bottom: 1px solid rgba(185, 162, 106, 0.4);
}

/* =========================================================================
   記事タイトル ─「記事タイトル — 店舗名」

   ・店舗名は本文より少し太いウェイトとゴールドで見分けをつける。
     箱・括弧・ラベルなどの装飾は付けない。
   ・ダッシュと店舗名はひとかたまり（.ov-title__venue）なので、
     その間では折り返さない。
   ・行数は js/title.js が実測して data-ov-lines に書き込む。
     二行以上のときだけ文字サイズを一段下げ、行間と上下の余白を調整する。
   ========================================================================= */

body.ov-body .ov-title { text-wrap: balance; }

.ov-title__main { }

/* ダッシュ＋店舗名。ここで折り返させない。 */
.ov-title__venue {
  display: inline-block;
  white-space: nowrap;
}
.ov-title__dash {
  padding: 0 0.42em 0 0.3em;
  color: var(--ov-ink-3);
  font-weight: 400;
}
body.ov-body .ov-title__shop {
  font-weight: 500;
  color: var(--ov-gold-soft);
  letter-spacing: 0.02em;
}

/* 幅が足りず「— 店舗名」が入りきらないときは、ひとかたまりのまま次の行へ送る。
   ダッシュと店舗名を切り離すことはしない。判定は js/title.js が行う。 */
.ov-title[data-ov-wrap="1"] .ov-title__venue {
  display: block;
  white-space: normal;
  margin-top: 0.1em;
}
.ov-title[data-ov-wrap="1"] .ov-title__dash { padding-left: 0; }

/* ---- 二行のとき ---- */
body.ov-body .ov-article__title[data-ov-lines="2"] {
  font-size: clamp(19px, 1.95vw, 28px);
  line-height: 1.46;
}
.ov-article__head .ov-article__title[data-ov-lines="2"] { margin-top: -0.08em; }
.ov-article__title[data-ov-lines="2"] + .ov-article__meta { margin-top: clamp(13px, 1.4vw, 17px); }

/* ---- 三行以上のとき（原則として出さない）---- */
body.ov-body .ov-article__title[data-ov-lines="3"] {
  font-size: clamp(17px, 1.7vw, 25px);
  line-height: 1.44;
}
.ov-article__title[data-ov-lines="3"] + .ov-article__meta { margin-top: clamp(14px, 1.5vw, 18px); }

@media (max-width: 767px) {
  body.ov-body .ov-article__title[data-ov-lines="2"] {
    font-size: clamp(19px, calc(19px + (600px - 100vw) * 0.012), 22px);
    line-height: 1.5;
  }
  body.ov-body .ov-article__title[data-ov-lines="3"] {
    font-size: clamp(17.5px, calc(17.5px + (600px - 100vw) * 0.010), 20px);
    line-height: 1.5;
  }
  .ov-title__dash { padding: 0 0.34em 0 0.24em; }
}

/* いちばん狭い画面。長い店舗名でも四行にならないよう、もう一段だけ下げる。 */
@media (max-width: 360px) {
  body.ov-body .ov-article__title[data-ov-lines="2"] { font-size: 19px; line-height: 1.5; }
  body.ov-body .ov-article__title[data-ov-lines="3"] { font-size: 17px; line-height: 1.5; }
  .ov-title[data-ov-wrap="1"] .ov-title__venue { margin-top: 0.06em; }
}

/* =========================================================================
   本文末の「あわせて読む」

   記事ごとの見出しではなく、共通の導線として扱う。
   見出し（h3）にすると、どの記事にも同じ小見出しが並んでしまうため。
   ========================================================================= */

.ov-article__body .ov-article__links_label {
  margin: clamp(34px, 3.6vw, 52px) 0 0;
  padding: clamp(14px, 1.5vw, 20px) 0 0;
  border-top: 1px solid var(--ov-line);
  font-family: var(--ov-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ov-ink-3);
}
body.ov-body .ov-article__body ul.ov-article__links {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
body.ov-body .ov-article__body ul.ov-article__links li {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--ov-line);
  line-height: 1.7;
}
body.ov-body .ov-article__body ul.ov-article__links li:before { content: none; }
body.ov-body .ov-article__body ul.ov-article__links a {
  font-size: 14px;
  color: var(--ov-ink-2);
  border-bottom: 0;
}
body.ov-body .ov-article__body ul.ov-article__links a:hover { color: var(--ov-gold-soft); }