@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
/* 全ページ共通の仕上げ(2026-10-09)
   方針:サイトの色(白・漆の赤・真鍮)と書体はそのまま。日本語の組版、読みやすさ、操作の手ざわりだけを整える。 */

/* 日本語の組版:見出しは文節で改行し、約物を詰める */
h1, h2, h3, .lede, .pull-quote{
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
  text-wrap: balance;
}
h1{ letter-spacing: 0.02em; }
p, li, dd, summary{
  line-break: strict;
  text-wrap: pretty;
  hanging-punctuation: allow-end;
}

/* 目次などで飛んだとき、見出しが固定ヘッダーの下に隠れないように */
html{ scroll-padding-top: 120px; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}
[id]{ scroll-margin-top: 120px; }

/* 選択色とキーボード操作の見た目 */
::selection{ background: rgba(168,58,44,0.16); }
a, button, input, select, summary, textarea{ -webkit-tap-highlight-color: rgba(168,58,44,0.12); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid #A83A2C;
  outline-offset: 3px;
  border-radius: 2px;
}

/* 記事の数字は桁をそろえる */
table, .price, .yen, .cost-total, .total{ font-variant-numeric: tabular-nums; }

/* 横に長い表は、ページ全体ではなく表だけを横スクロールさせる(refine.jsで包む) */
.dn-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4em;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right / 10px 100% no-repeat scroll;
}
.dn-scroll > table{ margin: 0; min-width: 100%; }

/* スマホの記事冒頭:パンくずと見出しの間が空きすぎていたのを詰める */
@media (max-width: 600px){
  .crumbs{ padding-top: 12px; padding-bottom: 4px; }
  .art-head{ padding-top: 28px !important; }
}

/* 画像の読み込み中に、背景が真っ白にならないように */
img{ background-color: #F2F0EA; }
img[src$=".svg"], .brand img, .flag img{ background-color: transparent; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print{
  .site-dock{ display: none !important; }
}

/* ===== サイト全体の配色と書体をトップページ(2026年10月リニューアル)に合わせる ===== */
:root{
  --ink:#12294A;
  --ink-soft:#5B6B78;
  --paper:#FFFFFF;
  --paper-deep:#F3F6F8;
  --lacquer:#2E7D80;
  --brass:#2E7D80;
  --line:#E1E7EB;
}
body{ background:var(--paper); color:var(--ink); font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif; }
h1, h2, h3, .rel-title, .featured-card-title{ font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif !important; font-weight:700 !important; letter-spacing:0; color:var(--ink); }
header.site{ background:rgba(255,255,255,.96) !important; border-bottom:1px solid var(--line) !important; }
header.site .brand{ font-family:'Bricolage Grotesque','Zen Kaku Gothic New',sans-serif !important; font-weight:700 !important; letter-spacing:-.02em !important; font-size:1.4rem !important; color:var(--ink) !important; display:inline-flex; align-items:center; gap:9px; }
header.site .brand::before{ content:""; width:20px; height:14px; border-radius:2px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23DA251D'/%3E%3Cpolygon points='15,3.5 16.53,7.9 21.18,7.99 17.47,10.8 18.82,15.26 15,12.6 11.18,15.26 12.53,10.8 8.82,7.99 13.47,7.9' fill='%23FFCD00'/%3E%3C/svg%3E") center/cover; }
header.site .brand-mark{ display:none !important; }
header.site .brand::after{ display:none; }
header.site .brand span{ color:inherit; }
header.site .tagline{ display:none; }
footer{ border-top:1px solid var(--line); }
.callout, .sources, .toc{ border-radius:10px; }
a.rel-card, .rel-card{ border-radius:10px; }

/* 見出しはすべて左揃え(右寄せの見出しは読みにくいため) */
.scene-h.r, h2.r{ text-align:left !important; margin-left:0 !important; }
.scene-h.r::after, h2.r::after{ margin-left:0 !important; left:0 !important; right:auto !important; }

/* ===== 飾りを減らす(2026-10-15) =====
   雑誌風の頭文字、傾いた手書き風メモ、大きな引用符、光る帯などをやめ、
   ふつうの文章の見た目にそろえる。レイアウトはそのまま。 */
.lede::first-letter{ float:none !important; font:inherit !important; color:inherit !important; padding:0 !important; line-height:inherit !important; }
.scene-h{ max-width:none !important; }
.pull-quote{ font-family:inherit !important; font-size:1rem !important; font-weight:700 !important; line-height:1.9 !important; margin:24px 0 !important; padding:0 !important; max-width:62ch; }
.pull-quote::before, .pull-quote::after{ content:none !important; display:none !important; }
.margin-note, .aside-note{
  font-family:inherit !important; font-size:0.94rem !important; line-height:1.9 !important; color:var(--ink) !important;
  background:none !important; box-shadow:none !important; transform:none !important;
  float:none !important; max-width:62ch !important; margin:22px 0 !important;
  padding:2px 0 2px 14px !important; border-left:3px solid var(--line) !important;
}
.margin-note::before, .margin-note::after, .aside-note::before, .aside-note::after{ content:none !important; display:none !important; }
.who, .signature{ display:none !important; }
.pick-badge::after{ display:none !important; animation:none !important; }
@media (min-width:1024px){ .site-dock{ display:none !important; } body{ padding-bottom:0 !important; } }
.hanko-mark{ display:none !important; }
/* 見出しを左右交互に寄せる飾りをやめ、すべて左そろえにする */
article h2{ text-align:left !important; margin-left:0 !important; }
article h2::after{ margin-left:0 !important; left:0 !important; right:auto !important; }
/* 追記した表の見た目を全記事でそろえる */
table.rate{ width:100%; border-collapse:collapse; margin:24px 0 34px; font-size:0.92rem; }
table.rate th, table.rate td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.rate th{ color:var(--ink-soft); font-weight:500; font-size:0.82rem; }
/* 実際に行ったときのメモ(訪問日・行き方など、筆者の体験だけを書く枠) */
.visit-memo{ background:var(--paper-deep); border-radius:8px; padding:14px 16px; margin:22px 0 30px; font-size:0.92rem; }
.visit-memo .vm-h{ font-weight:700; margin:0 0 8px; font-size:0.92rem; }
.visit-memo dl{ display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; }
.visit-memo dt{ color:var(--ink-soft); }
.visit-memo dd{ margin:0; min-width:0; }
@media (max-width:420px){ .visit-memo dl{ grid-template-columns:1fr; gap:2px; } .visit-memo dd{ margin-bottom:6px; } }
/* 見出しの幅を狭く固定していたため、「Jam / Space Café」のような不自然な改行が起きていた */
article h2, article h3{ max-width:none !important; }
/* 写真の上のリボン型ラベルをやめ、ただの写真説明にする */
.art-hero .cap{ background:none !important; clip-path:none !important; box-shadow:none !important; font-family:inherit !important; font-size:0.74rem !important; letter-spacing:0 !important; padding:0 !important; left:14px !important; bottom:10px !important; color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.6); }
.photo-overlay .cap{ font-family:inherit !important; font-size:0.8rem !important; font-weight:500 !important; left:14px !important; bottom:10px !important; }
/* 関連記事カードの浮き上がり・小さなピル型タグを控えめに */
.rel-card{ box-shadow:none !important; transition:border-color .15s ease !important; }
.rel-card:hover{ transform:none !important; box-shadow:none !important; }
.rel-tag{ background:none !important; padding:0 !important; border-radius:0 !important; color:var(--lacquer) !important; }
/* 評価の数字を明朝の大きな飾り数字から、ふつうの数字に */
.score, .rank-item .score{ font-family:inherit !important; font-size:1.15rem !important; font-weight:700 !important; color:var(--ink) !important; font-variant-numeric:tabular-nums; }
.fact-card{ box-shadow:none !important; border-radius:8px !important; }
/* 日本語の見出しを、単語の途中ではなく文節で折り返す(対応ブラウザのみ) */
h1, h2, h3, .catch{ word-break:auto-phrase; }

/* 記事内の縦長写真(figure.inline)が、ページによっては画面幅からはみ出していたのを統一 */
figure.inline{ margin:30px 0; }
figure.inline img{ width:100%; height:auto; border-radius:8px; display:block; }
figure.inline figcaption{ font-size:0.78rem; color:var(--ink-soft,#666); margin-top:8px; text-align:center; }
/* ホイアンの川の写真は下側にランタンの川面があるので、切り取るときは下寄せ */
img[src*="hoian-lantern-river"]{ object-position:50% 88% !important; }
/* 横長に切り取られる写真の位置合わせ(空だけにならないように) */
img[src*="hoian-riverside"]{ object-position:50% 80% !important; }
img[src*="mykhe-beach-day"]{ object-position:50% 85% !important; }
img[src*="banahills-buddha"]{ object-position:50% 22% !important; }
img[src*="dragon-bridge-dusk"]{ object-position:50% 62% !important; }
img[src*="dragon-bridge-lanterns"]{ object-position:50% 58% !important; }

/* 記事の流れの中で、関係する自作ツールへ案内する一行 */
.tool-link{ border-left:3px solid var(--lacquer,#A83A2C); padding:4px 0 4px 14px; margin:24px 0 30px; font-size:0.92rem; line-height:1.75; }
.tool-link .tl-k{ display:block; font-size:0.76rem; font-weight:700; color:var(--ink-soft,#555); letter-spacing:.04em; margin-bottom:2px; }
.tool-link a{ font-weight:700; color:var(--ink,#111); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.tool-link .tl-d{ color:var(--ink-soft,#555); }
/* アプリの画面のスクリーンショットは、画面いっぱいに引き伸ばさない */
figure.inline img[src*="grab-fare"]{ max-width:340px; margin:0 auto; }
figure.inline img[src*="jejuair-night"]{ max-height:520px; object-fit:cover; object-position:50% 72%; }
/* ロゴ横の国旗を少し大きく(3:2のまま 20×14 → 27×18) */
header.site .brand::before{ width:27px !important; height:18px !important; }
.hd .logo .flag, .ft .logo .flag{ width:27px !important; height:18px !important; vertical-align:-3px; }

/* スマホで指で押しやすいように、フッターなどの小さな文字リンクの押せる範囲を広げる(見た目の大きさは変えない) */
.ft-links a, footer .legal-links a{ display:inline-block; padding-top:8px; padding-bottom:8px; }
.sokuho-link, a.more{ display:inline-block; padding-top:6px; padding-bottom:6px; }

/* 記事の冒頭の「この記事の要点」:カードにせず、上下の線だけで区切る */
.key-points{ border-top:2px solid var(--ink,#111); border-bottom:1px solid var(--line,#ddd); padding:12px 0 6px; margin:4px 0 32px; }
.key-points .kp-h{ margin:0 0 6px; font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--ink-soft,#555); }
.key-points ul{ margin:0; padding-left:1.2em; }
.key-points li{ font-size:.95rem; line-height:1.75; margin:0 0 8px; }

/* 表の中の円の目安(ドンの下に小さく) */
td .yen{ display:block; font-size:.86em; color:var(--ink-soft); }

/* 広告(アフィリエイトリンク)の表示 */
.pr-top{ font-size:0.8rem; line-height:1.7; color:var(--ink-soft); margin:0 0 10px; }
.pr-top a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ad-tag{ display:inline-block; font-size:0.66rem; font-weight:600; line-height:1.45; letter-spacing:0.04em; padding:0 5px; margin-right:7px; border:1px solid currentColor; border-radius:3px; opacity:0.8; vertical-align:0.12em; }
.ad-banner-label{ font-size:0.72rem; color:var(--ink-soft); margin:24px 0 6px; }

/* カフェマップの文字の一覧 */
.cafe-all{ border-top:1px solid var(--line); padding:12px 0; }
.cafe-all:last-of-type{ border-bottom:1px solid var(--line); margin-bottom:28px; }
.cafe-all summary{ cursor:pointer; font-weight:700; font-size:0.95rem; padding:6px 0; }
.cafe-all ul{ list-style:none; padding:0; margin:10px 0 4px; }
.cafe-all li{ padding:8px 0; font-size:0.9rem; line-height:1.6; border-bottom:1px dashed var(--line); }
.cafe-all li:last-child{ border-bottom:0; }
.cafe-all .ca-meta{ font-size:0.78rem; color:var(--ink-soft); white-space:nowrap; }
.cafe-all .ca-desc{ font-size:0.82rem; color:var(--ink-soft); }
.cafe-all .ca-visited{ font-size:0.68rem; font-weight:600; margin-left:6px; padding:0 5px; border:1px solid currentColor; border-radius:3px; color:var(--lacquer); }

/* ===== レイアウトの手直し(2026-10-24) ===== */
/* 導入文(リード)は複数行の文章なので、見出し用の「行をそろえる折り返し」をやめ、ふつうに折り返す。
   (行の長さがばらばらになり、「行く/べき」のような不自然な改行が出ていた) */
.lede{ text-wrap:pretty !important; word-break:normal !important; }
/* 「広告」の小さな表示が、ボタンの中で縦に割れないように */
.ad-tag{ white-space:nowrap; flex:0 0 auto; }
/* スマホで3列以上の表は、列を細くしすぎず、表だけを横にスクロールできるようにする */
@media (max-width:560px){
  table.rate:has(tr > :nth-child(3)){ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.rate:has(tr > :nth-child(3)) th, table.rate:has(tr > :nth-child(3)) td{ min-width:6.5em; }
}