/* ==========================================================================
   推しとおでかけ — 記事詳細CSS
   article-gourmet-full.dc.html / article-hotel.dc.html のインラインスタイルを
   クラスに整理したもの。single.php はこのクラス名で組んでください。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  --bg:        #f0f0f0;
  --surface:   #ffffff;
  --ink:       #201e1d;
  --ink-card:  #33302b;
  --text:      #3a3733;
  --text-sub:  #605c59;
  --text-mute: #8a8a8a;
  --label:     #999999;
  --rule:      #dcdcdc;
  --rule-soft: #e3e3e3;

  --c-hotel:   #f1c242;
  --c-gourmet: #10a02a;
  --c-oshi:    #1116ed;
  --c-area:    #e73946;

  --c-hotel-dk:   #8a6206;
  --c-gourmet-dk: #0b7a20;
  --c-oshi-dk:    #1116ed;
  --c-area-dk:    #b7202c;

  --c-hotel-md:   #c99a13;

  --font-jp: "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Archivo", sans-serif;

  --pad-x: 34px;   /* 記事本文の左右パディング */
  --sec-gap: 52px; /* 大セクション間 */
}

/* カテゴリー別アクセント。記事ラッパーに .cat-* を付けるだけで全パーツが切り替わります */
.cat-hotel   { --accent: var(--c-hotel);   --accent-dk: var(--c-hotel-dk);   --accent-md: var(--c-hotel-md); --accent-on: var(--ink-card); }
.cat-gourmet { --accent: var(--c-gourmet); --accent-dk: var(--c-gourmet-dk); --accent-md: var(--c-gourmet-dk); --accent-on: #fff; }
.cat-oshi    { --accent: var(--c-oshi);    --accent-dk: var(--c-oshi-dk);    --accent-md: var(--c-oshi-dk); --accent-on: #fff; }
.cat-area    { --accent: var(--c-area);    --accent-dk: var(--c-area-dk);    --accent-md: var(--c-area-dk); --accent-on: #fff; }

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-jp);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.oto-article{
  max-width:1280px;
  margin:0 auto;
  background:var(--surface);
}

/* --------------------------------------------------------------------------
   3. 記事ヘッダー
   -------------------------------------------------------------------------- */
.oto-entry-head{
  padding:30px var(--pad-x) 24px;
  display:flex; flex-direction:column; gap:14px;
}
.oto-entry-meta{ display:flex; align-items:center; gap:12px; }

.oto-badge{
  display:inline-block;
  background:var(--accent);
  border:2px solid var(--ink-card);
  color:var(--accent-on);
  font:700 10px/1 var(--font-jp);
  letter-spacing:.06em;
  padding:5px 9px;
  text-decoration:none;
}
.oto-date{ font:400 10.5px/1 var(--font-jp); color:var(--text-mute); }

.oto-entry-title{
  margin:0;
  font:700 25px/1.6 var(--font-jp);
  color:var(--ink);
  text-wrap:pretty;
}

/* 記事上部のTAG（枠線なし） */
.oto-taglist{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.oto-taglist__label{ font:900 10.5px/1 var(--font-jp); letter-spacing:.18em; }
.oto-taglist a{
  font:500 11.5px/1 var(--font-jp);
  color:#4a463f; padding:4px 0; text-decoration:none;
}
.oto-taglist a .hash{ color:var(--accent); }
.oto-taglist a:hover{ color:var(--ink); }

/* --------------------------------------------------------------------------
   4. 画像
   -------------------------------------------------------------------------- */
.oto-thumb{ aspect-ratio:16/9; overflow:hidden; background:var(--rule-soft); }
.oto-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.oto-figure{ margin:0; }
.oto-figure img{ width:100%; height:auto; display:block; }
.oto-figure figcaption{
  margin-top:8px;
  font:400 10.5px/1.7 var(--font-jp);
  color:var(--text-mute);
}
.oto-figure-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* --------------------------------------------------------------------------
   5. 本文
   -------------------------------------------------------------------------- */
.oto-entry-body{
  max-width:1000px;
  margin:0 auto;
  padding:44px 0 54px;
  display:flex; flex-direction:column; gap:var(--sec-gap);
}
.oto-entry-body p{
  margin:0;
  font:400 13.5px/2.15 var(--font-jp);
  color:var(--text);
  text-wrap:pretty;
}
.oto-entry-body strong{ font-weight:700; color:var(--ink); }

.oto-entry-body a{
  color:var(--accent-dk);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.oto-entry-body a:hover{ color:var(--ink); text-decoration-color:var(--ink); }

/* テキストに背景を敷く強調 */
.oto-mark{
  background:linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 28%, transparent) 58%);
}

.oto-note{ font:400 10.5px/1.7 var(--font-jp); color:var(--text-sub); }
.oto-ad-notice{ font:400 10px/1.6 var(--font-jp); color:#a3a3a3; }

/* セクション（大セクションの中身） */
.oto-section{ display:flex; flex-direction:column; gap:22px; }
.oto-section--tight{ gap:16px; }
.oto-section--loose{ gap:30px; }

/* --------------------------------------------------------------------------
   6. 見出し
   同じ形が連続しないよう、セクションごとに使い分けます。
   -------------------------------------------------------------------------- */

/* A: 白抜き英字 ＋ 日本語 ＋ 短い色下線（h2の標準） */
.oto-h2{ display:flex; align-items:baseline; gap:14px; margin:0; }
.oto-h2__en{
  flex:none;
  font:800 15px/1 var(--font-en);
  letter-spacing:.06em;
  color:transparent;
  -webkit-text-stroke:.9px #9a9a9a;
  white-space:nowrap;
}
.oto-h2__jp{ display:flex; flex-direction:column; gap:6px; }
.oto-h2__jp > span:first-child{ font:700 19px/1.4 var(--font-jp); color:#1a1a1a; }
.oto-h2__bar{ width:28px; height:3px; background:var(--accent); }

/* B: カテゴリー色の縁取り文字（REVIEW / SETLIST / RELATED など強調用） */
.oto-h2-stroke{
  display:flex; align-items:baseline; gap:14px; margin:0;
}
.oto-h2-stroke__en{
  font:900 21px/1 var(--font-jp);
  letter-spacing:.12em;
  color:var(--accent);
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill; /* これがないと塗りが線に潰されます */
}
.oto-h2-stroke__jp{ font:700 14px/1 var(--font-jp); }

/* C: 大きな白抜き英字 ＋ 日本語 ＋ 全幅の色線（ORDER LIST / RECOMMEND） */
.oto-h2-poster{ display:flex; flex-direction:column; gap:8px; margin:28px 0 0; }
.oto-h2-poster__en{
  font:800 26px/1 var(--font-en);
  color:transparent;
  -webkit-text-stroke:1px #2b2b2b;
}
.oto-h2-poster__jp{ font:800 17px/1.5 var(--font-jp); color:#1a1a1a; }
.oto-h2-poster__bar{ height:2px; background:var(--accent); margin-top:4px; }

/* h3: 英字＋日本語を2pxの黒罫で受ける */
.oto-h3{
  display:flex; align-items:baseline; gap:12px; margin:0;
  border-bottom:2px solid var(--ink); padding-bottom:9px;
}
.oto-h3__en{ font:800 10.5px/1 var(--font-en); letter-spacing:.14em; color:var(--accent-dk); }
.oto-h3__jp{ font:700 16px/1.4 var(--font-jp); color:#1a1a1a; }

/* h3（小・2列に並べる用） */
.oto-h3-sm{
  display:flex; align-items:baseline; gap:10px; margin:0;
  border-bottom:1px solid var(--rule); padding-bottom:8px;
}
.oto-h3-sm__en{ font:800 10px/1 var(--font-en); letter-spacing:.14em; color:var(--accent-dk); }
.oto-h3-sm__jp{ font:700 14px/1.4 var(--font-jp); color:#1a1a1a; }

/* h3（左に色帯） */
.oto-h3-bar{
  display:flex; align-items:center; gap:11px; margin:0;
  font:700 15px/1.5 var(--font-jp); color:#1a1a1a;
}
.oto-h3-bar::before{
  content:""; flex:none; width:5px; height:18px; background:var(--accent);
}

/* 区分ラベル（DRINK / FOOD など） */
.oto-sublabel{
  display:block; margin:20px 0 10px;
  font:700 11px/1 var(--font-jp); letter-spacing:.12em; color:var(--accent-dk);
}

/* --------------------------------------------------------------------------
   7. 施設情報ヒーロー（SHOP INFO / HOTEL INFO）
   -------------------------------------------------------------------------- */
.oto-hero{
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:22px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:start;
}
.oto-hero__main{ display:flex; flex-direction:column; gap:10px; }
.oto-hero__kicker{
  font:900 11px/1 var(--font-jp); letter-spacing:.18em; color:var(--accent-dk);
}
.oto-hero__name{ font:700 27px/1.35 var(--font-jp); color:#1a1a1a; margin:0; }
.oto-hero__area{ font:700 12.5px/1.6 var(--font-jp); color:#4a463f; }
.oto-hero__side{
  display:flex; flex-direction:column; gap:12px;
  border-left:1px solid var(--rule); padding-left:24px;
}
.oto-hero__desc{ font:400 13px/1.9 var(--font-jp); color:var(--text); }
.oto-hero__chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* --------------------------------------------------------------------------
   8. チップ（利用形態・アメニティ・タグ）
   枠線ではなく地色を面として使います
   -------------------------------------------------------------------------- */
.oto-chip{
  display:inline-flex; align-items:center;
  background:var(--bg); color:var(--text);
  font:500 11px/1 var(--font-jp);
  padding:8px 10px;
  text-decoration:none;
}
.oto-chip .hash{ font-weight:700; color:var(--accent-dk); }
.oto-chip:hover{ background:var(--rule-soft); }
.oto-chips{ display:flex; flex-wrap:wrap; gap:7px; }

/* --------------------------------------------------------------------------
   9. 目次（INDEX）
   -------------------------------------------------------------------------- */
.oto-toc{
  border:1.5px solid var(--ink);
  padding:22px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.oto-toc__head{ display:flex; align-items:baseline; gap:12px; }
.oto-toc__label{ font:900 11px/1 var(--font-jp); letter-spacing:.18em; }
.oto-toc__sub{ font:400 10.5px/1 var(--font-jp); color:var(--text-mute); }
.oto-toc__list{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.oto-toc__list li{
  display:flex; gap:12px; align-items:baseline;
  border-top:1px solid var(--rule); padding:11px 0; margin:0;
}
.oto-toc__list li:last-child{ border-bottom:1px solid var(--rule); }
.oto-toc__num{ flex:none; font:700 12.5px/1 var(--font-jp); color:var(--accent-dk); }
.oto-toc__list a{
  font:400 12.5px/1 var(--font-jp); color:var(--ink);
  text-decoration:none; font-weight:400;
}
.oto-toc__list a:hover{ text-decoration:underline; text-decoration-color:var(--accent); }

/* --------------------------------------------------------------------------
   10. 情報グリッド（訪問情報・プラン情報・基本情報）
   ラベル＋値の2列。値が長い項目は .is-full で全幅に
   -------------------------------------------------------------------------- */
.oto-datagrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
.oto-datagrid > div{
  display:flex; flex-direction:column; gap:4px;
  border-top:1px solid var(--rule); padding:12px 0;
}
.oto-datagrid > div.is-full{ grid-column:1 / -1; }
/* 最終行に border-bottom を付ける（PHP側で .is-last を出力） */
.oto-datagrid > div.is-last{ border-bottom:1px solid var(--rule); }
.oto-datagrid dt,
.oto-datagrid .oto-datagrid__label{
  font:700 10.5px/1 var(--font-jp); color:var(--label); margin:0;
}
.oto-datagrid dd,
.oto-datagrid .oto-datagrid__value{
  font:700 14px/1.5 var(--font-jp); color:#222; margin:0;
}
/* 金額など強調する値 */
.oto-price{
  display:inline-block;
  background:var(--accent); color:var(--accent-on);
  padding:2px 7px;
}

/* --------------------------------------------------------------------------
   11. POINT囲み
   -------------------------------------------------------------------------- */
.oto-point{
  border:2px solid var(--accent);
  padding:22px 24px;
  display:flex; flex-direction:column; gap:16px;
}
.oto-point__head{ display:flex; align-items:baseline; gap:12px; }
.oto-point__label{
  font:900 11px/1 var(--font-jp); letter-spacing:.18em; color:var(--accent-dk);
}
.oto-point__title{ font:700 14px/1 var(--font-jp); }
.oto-point__list{ display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none; }
.oto-point__list li{
  display:flex; gap:11px; margin:0;
  font:400 13px/1.95 var(--font-jp); color:var(--text);
}
.oto-point__list li::before{
  content:"✓"; flex:none; font-weight:700; color:var(--accent-dk);
}

/* --------------------------------------------------------------------------
   12. 星評価（REVIEW）
   -------------------------------------------------------------------------- */
.oto-review{ display:flex; flex-direction:column; }
.oto-review__row{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--rule); padding:12px 0;
  font:400 13px/1 var(--font-jp);
}
.oto-review__row:last-child{ border-bottom:1px solid var(--rule); }
.oto-review__stars{
  font:400 15px/1 var(--font-jp);
  color:var(--accent-md);
  letter-spacing:.12em;
}
.oto-review__stars .off{ color:var(--rule); }

/* --------------------------------------------------------------------------
   13. パーセントバー（USE CASE）
   -------------------------------------------------------------------------- */
.oto-bar{
  display:flex; align-items:center; gap:18px;
  border-top:1px solid var(--rule); padding:14px 0;
}
.oto-bar:last-child{ border-bottom:1px solid var(--rule); }
.oto-bar__name{ flex:none; width:90px; font:700 12.5px/1 var(--font-jp); }
.oto-bar__track{ flex:1; height:8px; background:var(--rule-soft); }
.oto-bar__fill{ display:block; height:8px; background:var(--accent); }
.oto-bar__val{
  width:44px; text-align:right;
  font:700 12px/1 var(--font-jp); color:var(--accent-dk);
}

/* --------------------------------------------------------------------------
   14. 番号付き大項目（ORDER LIST / RECOMMEND）
   番号と区分ラベルは縦罫の上端、見出しは下端に揃えます
   -------------------------------------------------------------------------- */
.oto-numhead{
  display:grid;
  grid-template-columns:auto 1.5px 1fr;
  gap:0 16px;
  margin-top:28px;
  border-bottom:1px solid var(--rule);
  padding-bottom:13px;
}
.oto-numhead__num{
  align-self:start;
  font:800 30px/1 var(--font-en);
  color:var(--accent);
}
.oto-numhead__rule{ background:var(--rule); }
.oto-numhead__text{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:5px; min-height:30px;
}
.oto-numhead__kicker{
  align-self:start;
  font:800 11px/1 var(--font-jp); letter-spacing:.1em; color:var(--label);
}
.oto-numhead__title{
  align-self:start; margin:0;
  font:800 19px/1.4 var(--font-jp); color:#1a1a1a;
}

/* --------------------------------------------------------------------------
   15. メニュー表・2列リスト
   -------------------------------------------------------------------------- */
.oto-list2{
  display:grid; grid-template-columns:1fr 1fr; gap:0 26px;
  margin:0; padding:0; list-style:none;
}
.oto-list2 li{
  border-top:1px solid var(--rule); padding:10px 0; margin:0;
  font:400 12.5px/1 var(--font-jp);
}
.oto-list2 li:nth-last-child(-n+2){ border-bottom:1px solid var(--rule); }

/* 商品名＋金額 */
.oto-pricelist{ display:flex; flex-direction:column; }
.oto-pricelist__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-top:1px solid var(--rule); padding:13px 0;
}
.oto-pricelist__row:last-child{ border-bottom:1px solid var(--rule); }
.oto-pricelist__name{ font:400 12.5px/1.6 var(--font-jp); color:var(--text); }
.oto-pricelist__price{ flex:none; font:700 13px/1 var(--font-jp); color:var(--ink); }

/* --------------------------------------------------------------------------
   16. Q&A
   -------------------------------------------------------------------------- */
.oto-faq{ display:flex; flex-direction:column; }
.oto-faq__item{
  border-top:1px solid var(--rule); padding:16px 0;
  display:flex; flex-direction:column; gap:8px;
}
.oto-faq__item:last-child{ border-bottom:1px solid var(--rule); }
.oto-faq__q,
.oto-faq__a{ display:flex; gap:10px; }
.oto-faq__q > span:first-child{
  flex:none; font:800 12px/1.6 var(--font-jp); color:var(--accent-dk);
}
.oto-faq__q > span:last-child{ font:700 13px/1.7 var(--font-jp); }
.oto-faq__a > span:first-child{
  flex:none; font:800 12px/1.9 var(--font-jp); color:var(--label);
}
.oto-faq__a > span:last-child{
  font:400 12.5px/1.9 var(--font-jp); color:var(--text);
}

/* --------------------------------------------------------------------------
   17. 良い点／気になる点
   -------------------------------------------------------------------------- */
.oto-proscons{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.oto-prosbox{
  background:var(--bg); padding:14px 16px;
  display:flex; flex-direction:column; gap:8px;
  border-left:4px solid var(--c-gourmet);
}
.oto-prosbox--con{ border-left-color:#b3b3b3; }
.oto-prosbox__label{
  font:700 11px/1 var(--font-jp); letter-spacing:.1em; color:var(--c-gourmet-dk);
}
.oto-prosbox--con .oto-prosbox__label{ color:#6e6e6e; }
.oto-prosbox__body{ font:400 12.5px/1.9 var(--font-jp); color:var(--text); }

/* --------------------------------------------------------------------------
   18. 基本情報の地図
   -------------------------------------------------------------------------- */
.oto-map{ border:2px solid var(--ink); display:flex; flex-direction:column; }
.oto-map__canvas{ height:220px; }
.oto-map__canvas iframe{ width:100%; height:100%; border:0; display:block; }
.oto-map__foot{
  border-top:2px solid var(--ink);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.oto-map__note{ font:400 11px/1.7 var(--font-jp); color:var(--text-sub); }

/* --------------------------------------------------------------------------
   19. ボタン
   -------------------------------------------------------------------------- */
/* 枠線ボタン（地図を開く・予約サイト） */
.oto-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ink); color:var(--ink);
  font:700 12px/1 var(--font-jp);
  padding:14px 16px; text-decoration:none;
}
.oto-btn:hover{ background:var(--accent); color:var(--accent-on); }
.oto-btn--sm{ font-size:10.5px; padding:11px 15px; }
.oto-btngrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* もっと見る（テキスト部と矢印部を分割） */
.oto-more{
  display:inline-flex; align-items:stretch; align-self:flex-start;
  border:2px solid var(--accent); text-decoration:none;
}
.oto-more__label{
  font:700 11.5px/1 var(--font-jp); letter-spacing:.08em;
  color:var(--accent-dk); padding:11px 15px;
}
.oto-more__arrow{
  display:flex; align-items:center; padding:0 12px;
  background:var(--accent); color:var(--accent-on);
  font:700 12px/1 var(--font-jp);
}

/* --------------------------------------------------------------------------
   20. SHARE
   -------------------------------------------------------------------------- */
.oto-share{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:18px 0;
  display:flex; flex-direction:column; gap:11px;
}
.oto-share__row{ display:flex; align-items:center; gap:14px; }
.oto-share__label{ font:900 11px/1 var(--font-jp); letter-spacing:.18em; }
.oto-share__btns{ display:flex; gap:10px; }
.oto-share__btn{
  border:1.5px solid var(--ink); color:var(--ink);
  font:700 10.5px/1 var(--font-jp); padding:9px 14px; text-decoration:none;
}
.oto-share__btn--copy{
  border-color:var(--rule); color:var(--text-sub); font-weight:400;
}
.oto-share__btn:hover{ background:var(--accent); color:var(--accent-on); border-color:var(--ink); }
.oto-share__note{ font:400 11px/1.8 var(--font-jp); color:var(--text-mute); }

/* --------------------------------------------------------------------------
   21. 関連記事・記事カード
   -------------------------------------------------------------------------- */
.oto-cardgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.oto-card{
  border:2.5px solid var(--ink-card);
  background:var(--surface);
  display:flex; flex-direction:column;
  text-decoration:none;
}
.oto-card__thumb{
  aspect-ratio:16/9; overflow:hidden;
  border-bottom:2.5px solid var(--ink-card);
  background:var(--rule-soft);
}
.oto-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.oto-card__body{
  padding:13px 14px 15px;
  display:flex; flex-direction:column; gap:9px;
}
.oto-card__badge{
  align-self:flex-start;
  background:var(--accent); border:2px solid var(--ink-card);
  color:var(--accent-on);
  font:700 9.5px/1 var(--font-jp); letter-spacing:.06em;
  padding:4px 7px;
}
.oto-card__title{
  margin:0;
  font:700 13.5px/1.55 var(--font-jp); color:#2c2925;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.oto-card:hover .oto-card__title{ color:var(--accent-dk); }
.oto-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.oto-card__tags span{ font:500 9.5px/1 var(--font-jp); color:#6e6a63; }
.oto-card__tags .hash{ color:var(--accent); font-weight:700; }

/* ミニカード（サムネイル横並び・外枠なし） */
.oto-card-mini{
  display:flex; gap:10px; align-items:flex-start; text-decoration:none;
}
.oto-card-mini__thumb{
  flex:none; width:78px; height:59px; overflow:hidden;
  border:1.5px solid var(--ink-card); background:var(--rule-soft);
}
.oto-card-mini__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.oto-card-mini__body{ display:flex; flex-direction:column; gap:6px; }
.oto-card-mini__badge{
  align-self:flex-start;
  background:var(--accent); border:1.5px solid var(--ink-card);
  color:var(--accent-on);
  font:700 8.5px/1 var(--font-jp); padding:3px 6px;
}
.oto-card-mini__title{
  margin:0; font:400 11px/1.6 var(--font-jp); color:#2c2925;
}

/* --------------------------------------------------------------------------
   22. パンくず
   -------------------------------------------------------------------------- */
.oto-breadcrumb{
  display:flex; align-items:center; gap:8px;
  padding:12px var(--pad-x);
  font:400 11px/1.7 var(--font-jp);
  overflow-x:auto;
  scrollbar-width:none;
}
.oto-breadcrumb::-webkit-scrollbar{ display:none; }
.oto-breadcrumb a{ color:var(--text-sub); text-decoration:none; white-space:nowrap; }
.oto-breadcrumb a:hover{ color:var(--ink); }
.oto-breadcrumb__sep{ color:#b3b3b3; flex:none; }
.oto-breadcrumb__current{ font-weight:700; color:var(--ink); white-space:nowrap; }

/* --------------------------------------------------------------------------
   23. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .oto-cardgrid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:520px){
  :root{ --pad-x:18px; --sec-gap:40px; }

  .oto-entry-title{ font-size:21px; }
  .oto-entry-body{ padding:32px var(--pad-x) 44px; }

  /* 2列グリッドはすべて1列に */
  .oto-hero,
  .oto-datagrid,
  .oto-list2,
  .oto-proscons,
  .oto-figure-2col{ grid-template-columns:1fr; }

  .oto-hero__side{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:14px; }
  .oto-hero__name{ font-size:22px; }
  .oto-datagrid > div{ border-bottom:0; }
  .oto-datagrid > div:last-child{ border-bottom:1px solid var(--rule); }
  .oto-list2 li:nth-last-child(-n+2){ border-bottom:0; }
  .oto-list2 li:last-child{ border-bottom:1px solid var(--rule); }

  .oto-h2__en{ font-size:12px; }
  .oto-h2__jp > span:first-child{ font-size:16px; }
  .oto-h2-stroke__en{ font-size:17px; }
  .oto-h2-poster__en{ font-size:21px; }
  .oto-numhead__title{ font-size:16px; }

  .oto-cardgrid{ grid-template-columns:1fr; }
  .oto-btngrid{ grid-template-columns:1fr 1fr; }
  .oto-bar__name{ width:74px; font-size:11.5px; }

  /* タップ領域 44px 以上 */
  .oto-btn{ padding:15px 16px; }
  .oto-share__btn{ padding:14px 16px; }
  .oto-toc__list li{ padding:14px 0; }
}

/* --------------------------------------------------------------------------
   24. フォーカス・印刷
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media print{
  body{ background:#fff; }
  .oto-share, .oto-breadcrumb{ display:none; }
  .oto-article{ max-width:none; }
}