@charset "UTF-8";
/* 主要ホテルサイト リニューアル 共通CSS（見本 v0.2 2026-11-11）
   考え方: 全サイト共通の目印は朱の「満員御礼」の印（ロゴと上位3位）。強い表現はそこだけにして、ほかは静かにまとめる。
   国ごとに変えるのは :root の色の変数だけ。部品・余白・文字はすべて共通 */

:root{
  --theme:#0E7C9B; --theme-dark:#0A5A71; --theme-line:#0E7C9B; --accent:#F2C14E; --accent-ink:#1E1E1E;
  --seal:#B3261E;                                  /* 満員御礼の印。全サイト共通 */
  --cta:#C75000; --cta-hover:#A84300;              /* 予約ボタン。全サイト共通（白文字 4.59） */
  --ink:#1E1E1E; --sub:#5B6169; --rule:#E2E5E9; --paper:#fff; --ground:#F3F4F6;
  --good:#1E7A46;
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --wrap:1100px; --side:300px;
  /* 文字の大きさの段階 */
  --t-xs:12px; --t-s:13.5px; --t-m:15px; --t-l:17px; --t-xl:21px; --t-2xl:27px;
}
[data-theme=bangkok]{--theme:#73675C;--theme-dark:#5E544B;--theme-line:#73675C;--accent:#D4A84A;--accent-ink:#1E1E1E}
[data-theme=thaigh]{--theme:#73675C;--theme-dark:#5E544B;--theme-line:#73675C;--accent:#6BAA3A;--accent-ink:#1E1E1E}
[data-theme=pattaya]{--theme:#0E7C9B;--theme-dark:#0A5A71;--theme-line:#0E7C9B;--accent:#F2C14E;--accent-ink:#1E1E1E}
[data-theme=seoul]{--theme:#B23A48;--theme-dark:#8A2C37;--theme-line:#B23A48;--accent:#2E4A7D;--accent-ink:#fff}
[data-theme=seoulgh]{--theme:#B23A48;--theme-dark:#8A2C37;--theme-line:#B23A48;--accent:#6BAA3A;--accent-ink:#1E1E1E}
[data-theme=taiwan]{--theme:#1C7C7B;--theme-dark:#145D5C;--theme-line:#29A4A3;--accent:#E8A0B4;--accent-ink:#1E1E1E}
[data-theme=manila]{--theme:#0057A8;--theme-dark:#00427F;--theme-line:#0057A8;--accent:#F2B705;--accent-ink:#1E1E1E}
[data-theme=bali]{--theme:#2F6B4F;--theme-dark:#224F3A;--theme-line:#2F6B4F;--accent:#E39B6C;--accent-ink:#1E1E1E}
[data-theme=australia]{--theme:#1F3A68;--theme-dark:#152946;--theme-line:#1F3A68;--accent:#E8B21E;--accent-ink:#1E1E1E}

/* ---- 基本 ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--t-m);line-height:1.75;color:var(--ink);background:var(--ground);font-feature-settings:"palt" 0}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--theme);text-underline-offset:3px}
a:hover{color:var(--theme-dark)}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sub{color:var(--sub);font-size:var(--t-s)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- 満員御礼の印（このデザインの目印） ---- */
.seal{display:inline-block;padding:.22em .24em;background:var(--seal);color:#fff;font-weight:800;line-height:1.06;letter-spacing:0;
  text-align:center;white-space:nowrap;border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px var(--seal);vertical-align:middle}
.rk .seal{display:inline-grid;place-items:center;width:1.9em;height:1.9em;padding:0}
/* おすすめのマーク（recommend_flg）。朱の印と同じ色の枠 */
.rec{display:inline-block;font-size:11px;font-weight:800;line-height:1;color:var(--seal);border:1.5px solid var(--seal);border-radius:3px;padding:3px 5px;margin-right:6px;vertical-align:3px;background:#fff}

/* ---- ヘッダー ---- */
.countries{background:var(--theme-dark);font-size:var(--t-xs)}
.countries .wrap{display:flex;gap:0 18px;overflow-x:auto;white-space:nowrap;padding-top:7px;padding-bottom:7px;scrollbar-width:none}
.countries .wrap::-webkit-scrollbar{display:none}
.countries a{color:rgba(255,255,255,.82);text-decoration:none}
.countries a:hover{color:#fff}
.countries a[aria-current]{color:#fff;font-weight:700}
.head{background:var(--theme);color:#fff}
.head .wrap{display:flex;align-items:center;gap:12px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.logo:hover{color:#fff}.logo:hover .name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.logo .name{font-size:var(--t-2xl);font-weight:800;line-height:1;letter-spacing:.04em}
.logo .seal{font-size:13px}
.logo .tag{font-size:11.5px;line-height:1.4;opacity:.92;border-left:1px solid rgba(255,255,255,.4);padding-left:10px;max-width:17em}
.head .tools{margin-left:auto}
.head .tools a{color:#fff;font-size:var(--t-s);text-decoration:none;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.6)}
.head .tools a:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:640px){.logo .tag{display:none}.logo .name{font-size:22px}}
/* 都市の切り替え（バンコクのサイトのようにタイ全土を扱うサイトだけ） */
.cities{background:var(--theme-dark)}
.cities .wrap{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;gap:2px}
.cities .wrap::-webkit-scrollbar{display:none}
.cities a{display:block;padding:9px 14px;color:rgba(255,255,255,.85);text-decoration:none;font-size:var(--t-s);font-weight:700}
.cities a:first-child{padding-left:0}
.cities a:hover{color:#fff}
.cities a[aria-current]{color:#fff;box-shadow:inset 0 -3px 0 var(--accent)}
.areas{background:var(--paper);border-bottom:1px solid var(--rule)}
.areas .wrap{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.areas .wrap::-webkit-scrollbar{display:none}
.areas a{display:block;padding:12px 14px 10px;color:var(--ink);text-decoration:none;font-size:var(--t-s);border-bottom:3px solid transparent}
.areas a:first-child{padding-left:0}
.areas a:hover{color:var(--theme)}
.areas a[aria-current]{border-bottom-color:var(--theme-line);font-weight:700}
@media (min-width:901px){.areas .wrap{flex-wrap:wrap}.subareas .wrap{flex-wrap:wrap}}   /* PC は折り返す（台湾は11都市）。スマホは横にスクロール */
/* 子エリアの段（パタヤビーチの中のエリアなど） */
.subareas{background:#fff;border-bottom:1px solid var(--rule)}
.subareas .wrap{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.subareas .wrap::-webkit-scrollbar{display:none}
.subareas a{display:block;padding:4px 12px;border:1px solid var(--rule);border-radius:14px;font-size:var(--t-s);color:var(--ink);text-decoration:none}
.subareas a:hover{border-color:var(--theme);color:var(--theme)}
.subareas a[aria-current]{background:var(--theme);border-color:var(--theme);color:#fff;font-weight:700}
.crumbs{font-size:var(--t-xs);color:var(--sub);padding:12px 0 4px}
.crumbs a{color:var(--sub)}
.crumbs li{display:inline}.crumbs li+li::before{content:"/";margin:0 8px;color:#B0B6BD}

/* ---- 2カラム ---- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:32px;align-items:start;padding:8px 0 48px}
.side{display:grid;gap:28px}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr);gap:24px}}

/* ---- 見出しと面 ---- */
.sec{margin-top:32px}
.sec>h2{font-size:var(--t-xl);line-height:1.4;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.sec>h2 small{font-size:var(--t-s);font-weight:400;color:var(--sub)}
.panel{background:var(--paper);padding:18px}
@media (max-width:640px){.panel{margin-left:-16px;margin-right:-16px}}
.more{display:inline-block;font-size:var(--t-s);margin-top:10px}

/* ---- 検索 ---- */
.search{background:var(--paper);padding:16px;margin-top:16px;border-top:3px solid var(--theme-line)}
.search form{display:grid;grid-template-columns:1.8fr 1.4fr .9fr 1fr auto;gap:10px;align-items:end}
.search label{display:block;font-size:var(--t-xs);color:var(--sub);margin-bottom:3px}
.search select,.search input{width:100%;height:46px;border:1px solid #C3C9D0;border-radius:6px;padding:0 10px;background:#fff}
.search .go{height:46px;border:0;border-radius:6px;background:var(--theme);color:#fff;font-weight:700;padding:0 24px;cursor:pointer}
.search .go:hover{background:var(--theme-dark)}
.search .name{grid-column:1/-1;font-size:var(--t-s)}
@media (max-width:640px){.search{margin-left:-16px;margin-right:-16px}.search form{grid-template-columns:1fr 1fr}.search .f-area,.search .go{grid-column:1/-1}}

.notice{margin-top:24px;max-width:728px}
.notice img{display:block;width:100%;border-radius:6px}

/* ---- 条件で探す・エリア ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:baseline;gap:6px;background:var(--paper);border:1px solid #CDD2D8;border-radius:999px;padding:7px 14px;color:var(--ink);text-decoration:none;font-size:var(--t-s)}
.chips a:hover{border-color:var(--theme);color:var(--theme)}
.chips a b{font-weight:400;color:var(--sub);font-size:var(--t-xs)}
.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));background:var(--paper);border-top:1px solid var(--rule)}
.areas-grid .ac{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);margin-left:16px}
.areas-grid .am{display:block;text-decoration:none;color:var(--ink)}
.areas-grid .am b{display:block;font-size:var(--t-l);color:var(--theme)}
.areas-grid .am:hover b{text-decoration:underline}
.areas-grid .am span{font-size:var(--t-s);color:var(--sub)}
.areas-grid .ak{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.areas-grid .ak a{display:inline-block;padding:3px 10px;border:1px solid var(--rule);border-radius:14px;background:#fff;font-size:var(--t-s);color:var(--ink);text-decoration:none}
.areas-grid .ak a:hover{border-color:var(--theme);color:var(--theme)}

/* ---- 絞り込み ---- */
.filters{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:14px 0}
.seg{display:flex;border:1px solid #C3C9D0;border-radius:6px;overflow:hidden;background:#fff}
.seg a{padding:7px 12px;font-size:var(--t-s);color:var(--ink);text-decoration:none;border-left:1px solid #C3C9D0;white-space:nowrap}
.seg a:first-child{border-left:0}
.seg a[aria-current],.seg a[aria-current]:hover{background:var(--ink);color:#fff;font-weight:700}
.seg a:hover{background:#F3F4F6}
.seg a small{opacity:.7;margin-left:2px}
@media (max-width:640px){.seg a{padding:7px 8px;font-size:12px}.seg a small{display:none}}

/* ---- ホテルの行（一覧・ランキング・特集で共通）: 白い面の上に区切り線で並べる ---- */
.hlist{background:var(--paper);border-top:1px solid var(--rule)}
@media (max-width:640px){.hlist{margin-left:-16px;margin-right:-16px}}
.hrow{display:grid;grid-template-columns:auto 184px minmax(0,1fr) 168px;gap:16px;padding:18px 16px;border-bottom:1px solid var(--rule);align-items:start}
.rk{width:2.3em;text-align:center;font-weight:800;font-size:var(--t-l);color:var(--sub);padding-top:2px}
.rk .seal{font-size:var(--t-l)}
.hrow .ph{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#DDE2E7}
.hrow .ph img{width:100%;height:100%;object-fit:cover}
.hrow .ph img.broken,.mini img.broken,.mylist img.broken{visibility:hidden}
.hrow h3{font-size:var(--t-l);line-height:1.45}
.hrow h3 a{color:var(--ink);text-decoration:none}
.hrow h3 a:hover{text-decoration:underline}
.hrow .where{font-size:var(--t-xs);color:var(--sub)}
.hrow .catch{font-size:var(--t-m);font-weight:700;color:var(--theme);margin-top:4px}
.hrow .point{font-size:var(--t-s);color:var(--sub);margin-top:6px}
.tags{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:8px}
.tags li{font-size:var(--t-xs);line-height:1;padding:5px 7px;border-radius:3px;background:#EDEFF2;color:#353B42}
.tags li.hi{background:var(--accent);color:var(--accent-ink);font-weight:700}
.buy{display:flex;flex-direction:column;gap:10px;text-align:right}
.score{font-size:var(--t-xs);color:var(--sub);white-space:nowrap}
.score b{font-size:var(--t-xl);color:var(--ink);font-weight:800;margin-right:2px}
.price{font-size:var(--t-xs);color:var(--sub)}
.price b{font-size:24px;color:var(--ink);font-weight:800}
.cta{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;padding:4px 16px;border-radius:6px;background:var(--cta);color:#fff!important;font-weight:700;font-size:var(--t-m);text-decoration:none;text-align:center;line-height:1.3}
.cta:hover{background:var(--cta-hover)}
.cta small{font-weight:400;font-size:11px;opacity:.92}
@media (max-width:760px){
  .hrow{grid-template-columns:auto 112px minmax(0,1fr);gap:10px 12px;padding:14px 16px}
  .rk{grid-row:span 2}
  .hrow .point{display:none}
  .hrow .buy{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;text-align:left}
  .hrow .buy .price b{font-size:21px}
  .hrow .buy .cta{flex:1;min-height:44px}
  .hrow h3{font-size:16px}
}

/* ---- 検索結果（空室と料金） ---- */
.vac-status{font-size:var(--t-s);color:var(--sub);padding:10px 12px;background:var(--paper);border-left:3px solid var(--theme-line)}
.vac-status.ng{border-left-color:var(--seal);color:var(--ink)}
.only{font-size:var(--t-s);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.price.vac{min-height:2.4em}
.price.vac .room{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--good);padding:2px 6px;border-radius:3px;margin-right:4px;vertical-align:2px}
.price.vac s{color:var(--sub);font-size:var(--t-xs)}
.price.vac .off{font-size:11px;font-weight:700;color:var(--seal);margin-left:2px}
.hlist.loaded .hrow.no-room .price.vac{color:var(--sub);font-size:var(--t-xs)}
.hlist.only-vacant .hrow.no-room{display:none}
@media (max-width:760px){.hrow .buy .price.vac{flex:1}}

/* ---- 特集・ランドマークの冒頭 ---- */
.lead-block{padding-top:8px}
.lead-block h1{font-size:var(--t-2xl);line-height:1.35}
.lead-block .lead{max-width:40em;margin-top:8px}
.lead-block .meta{font-size:var(--t-s);color:var(--sub);margin-top:6px}
.howto{background:var(--paper);padding:14px 18px;margin-top:16px;border-left:3px solid var(--theme-line)}
.howto h2{font-size:var(--t-m);margin-bottom:4px}
.howto li{font-size:var(--t-s);padding:2px 0}
.howto li::before{content:"\30fb ";color:var(--theme)}

/* ---- 地図（ランドマーク・エリアの地図）。地図の部品は見える位置に来てから読み込む ---- */
.mapbox{position:relative;aspect-ratio:16/10;background:#DCE3E8;border-radius:6px;overflow:hidden;display:grid;place-items:center;margin-top:14px;z-index:0}
.mapbox>button{border:1px solid #C3C9D0;border-radius:6px;background:#fff;color:var(--ink);font-weight:700;padding:10px 18px;cursor:pointer}
.mapbox .leaflet-container{position:absolute;inset:0;font:inherit}
.map-note{font-size:var(--t-xs);color:var(--sub);margin-top:4px}
.pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--theme);color:#fff;font-weight:800;font-size:12px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pin.on{background:var(--cta);transform:scale(1.2)}
.pin-land{display:grid;place-items:center;width:34px;height:34px;background:var(--seal);color:#fff;font-weight:800;font-size:11px;border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px var(--seal),0 1px 4px rgba(0,0,0,.35);line-height:1.05;text-align:center}
.leaflet-popup-content{margin:10px 12px;font-size:13px;line-height:1.5}
.leaflet-popup-content b{display:block;font-size:14px}
.dist{display:block;font-weight:800;font-size:var(--t-m);color:var(--ink);white-space:nowrap}
.dist small{display:block;font-weight:400;font-size:11px;color:var(--sub)}
.hrow.on{background:#FFF7E8}
.rk.dist-col{width:auto;min-width:4.2em;text-align:left}
.pin-no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--theme);color:#fff;font-size:11px;font-weight:800;margin-right:6px;vertical-align:2px}
.hrow.on .pin-no{background:var(--cta)}
@media (max-width:640px){.mapbox{aspect-ratio:4/3;margin-left:-16px;margin-right:-16px;border-radius:0}}

/* ---- エリアの地図ページ: 地図と一覧を並べる ---- */
.mapview{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:14px}
.mapview .mapbox{position:sticky;top:12px;aspect-ratio:auto;height:calc(100vh - 40px);max-height:720px;min-height:420px;margin-top:0}
.mlist{background:var(--paper);border-top:1px solid var(--rule)}
.mlist li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--rule);cursor:pointer}
.mlist li:hover,.mlist li.on{background:#FFF7E8}
.mlist .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--theme);color:#fff;font-weight:800;font-size:12px}
.mlist b{display:block;font-size:var(--t-m);line-height:1.4}
.mlist span{font-size:var(--t-xs);color:var(--sub)}
.mlist .p{text-align:right;font-weight:800;white-space:nowrap}
@media (max-width:900px){.mapview{grid-template-columns:minmax(0,1fr)}.mapview .mapbox{position:relative;top:0;height:60vh;min-height:320px}}

/* ---- 関連の特集・目印 ---- */
.related{display:flex;flex-wrap:wrap;gap:8px}

/* ---- 広告枠（手動。見本では位置だけ） ---- */
.ad{display:grid;place-items:center;min-height:100px;color:#8A929B;font-size:var(--t-xs);background:#E9ECEF;border:1px dashed #B9C0C7}
.ad.r{min-height:250px}
.hlist .ad{border-width:0 0 1px;border-style:solid;border-color:var(--rule)}
/* 本番の広告枠。広告が出る前から高さを確保して、表示がずれないようにする */
.ad-slot{min-height:100px;margin:16px 0;text-align:center}
.ad-slot.r{min-height:250px;margin:0}
.hlist .ad-slot{margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}

.pager{display:flex;justify-content:center;gap:6px;margin-top:18px}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 10px;border:1px solid #C3C9D0;border-radius:6px;background:#fff;text-decoration:none;color:var(--ink)}
.pager span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.pager a:hover{border-color:var(--ink);color:var(--ink)}

/* ---- 詳細 ---- */
.dhead{padding-top:6px}
.dhead h1{font-size:var(--t-2xl);line-height:1.35;letter-spacing:.01em}
.dhead .en{font-size:var(--t-s);color:var(--sub)}
.dhead .meta{font-size:var(--t-s);color:var(--sub);margin-top:2px}
.gal{position:relative;margin-top:14px}
.gallery{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;border-radius:6px}
.gallery::-webkit-scrollbar{display:none}
.gallery img{flex:0 0 auto;width:min(86%,560px);aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;border-radius:6px;background:#DDE2E7}
.gallery:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:640px){.gallery{margin-left:-16px;margin-right:-16px;padding-left:16px;scroll-padding-left:16px;border-radius:0}}
/* 何枚目か（スマホ・PC 共通） */
.gal-count{position:absolute;left:10px;bottom:10px;margin:0;padding:3px 9px;border-radius:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;line-height:1.5;pointer-events:none}
.gal-nav,.gal-thumbs{display:none}
/* PC: 1枚ずつ大きく見せ、左右のボタンとサムネイルで切り替える */
@media (min-width:901px){
  .gallery{gap:0}
  .gallery img{width:100%;aspect-ratio:3/2;border-radius:0}
  .gal-nav{display:flex;align-items:center;justify-content:center;position:absolute;top:calc((100% - 72px) / 2);transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:28px;line-height:1;padding:0 0 3px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
  .gal-nav.prev{left:12px}.gal-nav.next{right:12px}
  .gal-nav:hover{background:#fff}
  .gal-nav:disabled{opacity:0;pointer-events:none}
  .gal-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .gal-thumbs{display:flex;gap:6px;margin-top:6px;overflow-x:auto;scrollbar-width:thin;height:66px}
  .gal-thumbs button{flex:none;width:80px;height:60px;padding:0;border:2px solid transparent;border-radius:4px;background:#DDE2E7;cursor:pointer;overflow:hidden;opacity:.65}
  .gal-thumbs button:hover{opacity:1}
  .gal-thumbs button[aria-current="true"]{border-color:var(--theme);opacity:1}
  .gal-thumbs button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
  .gal-count{left:auto;right:10px;bottom:82px}
}
.gal:not([data-gal]) .gal-count{display:none}
.gallery-note{font-size:var(--t-xs);color:var(--sub);margin-top:4px}
.booking{display:grid;grid-template-columns:auto 1fr auto;gap:8px 20px;align-items:center;background:var(--paper);padding:16px;margin-top:12px;border-top:3px solid var(--theme-line)}
.booking .price b{font-size:30px}
.booking .cta{min-width:230px;min-height:54px;font-size:var(--t-l)}
.booking .src{grid-column:1/-1;font-size:11px;color:var(--sub)}
@media (max-width:640px){.booking{grid-template-columns:auto 1fr;margin-left:-16px;margin-right:-16px}.booking .price{text-align:right}.booking .cta{grid-column:1/-1;min-width:0}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.facts div{padding:12px 8px;border-bottom:1px solid var(--rule)}
.facts div+div{border-left:1px solid var(--rule)}
.facts b{display:block;font-size:var(--t-xl);font-weight:800}
.facts span{font-size:var(--t-xs);color:var(--sub)}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,1fr)}.facts div:nth-child(3){border-left:0}}
.bars{display:grid;gap:10px;margin-top:16px}
.bars div{display:grid;grid-template-columns:76px 1fr 32px;gap:10px;align-items:center;font-size:var(--t-s)}
.bars i{display:block;height:6px;background:#E6E9ED}
.bars i::before{content:"";display:block;height:100%;width:var(--v);background:var(--theme)}
.bars b{text-align:right}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;font-size:var(--t-m)}
.checks li::before{content:"\2713";color:var(--good);font-weight:700;margin-right:6px}
.voice{counter-reset:v}
.voice li{padding:10px 0 10px 0;border-bottom:1px solid var(--rule);font-size:var(--t-m)}
.voice li:first-child{padding-top:0}
.rec.sha{color:#1E6B52;border-color:#1E6B52}
.kuchi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.kg{border-left:4px solid var(--kc);background:var(--kbg);border-radius:0 6px 6px 0;padding:12px 14px}
.kg.good{--kc:#2E7D5B;--kbg:#EEF7F2}
.kg.bad{--kc:#B26A00;--kbg:#FBF3E6}
.kg h3{display:flex;align-items:center;gap:6px;font-size:var(--t-m);color:var(--kc);margin:0 0 6px}
.kg h3 small{margin-left:auto;font-size:var(--t-s);font-weight:400;color:var(--sub)}
.kg ul{margin:0;padding:0;list-style:none}
.kg li{display:flex;gap:8px;padding:7px 0;border-top:1px solid rgba(0,0,0,.07);font-size:var(--t-m);line-height:1.6}
.kg li:first-child{border-top:0}
.kg .mk{flex:none;color:var(--kc);font-weight:700}
.article h2{font-size:var(--t-l);margin:26px 0 10px}   /* 読み物（台湾の茶芸館など） */
.article p{max-width:40em;margin-top:8px}
.article-map{margin:14px 0 8px}
.article-map img{max-width:100%;height:auto;border-radius:6px}
.shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.shops li{border:1px solid var(--rule);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.shops b{font-size:var(--t-m)}
.shops span{font-size:var(--t-s)}
.shops small{color:var(--sub);font-size:var(--t-s)}
.side-sp ul{margin:0;padding:0;list-style:none}   /* サイドバーの特集 */
.side-sp li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:var(--t-s);line-height:1.5}
.side-sp a{color:var(--ink);text-decoration:none}
.side-sp a:hover{color:var(--theme);text-decoration:underline}
.near-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--t-m)}
.near-list li span{color:var(--sub);white-space:nowrap}
.map{position:relative;aspect-ratio:16/9;overflow:hidden;background:#DCE3E8;display:grid;place-items:center;margin-top:14px;border-radius:6px}
.map button{border:1px solid #C3C9D0;border-radius:6px;background:#fff;color:var(--ink);font-weight:700;padding:10px 18px;cursor:pointer}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.desc-lead{font-size:var(--t-m);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
details.desc summary{cursor:pointer;color:var(--theme);font-weight:700;margin-top:8px;font-size:var(--t-s)}
details.desc p{font-size:var(--t-m);margin-top:8px}
.spec{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.spec th,.spec td{border-bottom:1px solid var(--rule);padding:9px 6px 9px 0;text-align:left;vertical-align:top}
.spec th{width:30%;color:var(--sub);font-weight:400}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mini a{display:block;text-decoration:none;color:var(--ink);font-size:var(--t-s);line-height:1.45}
.mini img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-bottom:6px;background:#DDE2E7}
.mini b{display:block;font-size:var(--t-m)}
.mini span{color:var(--sub);font-size:var(--t-xs)}
@media (max-width:640px){.mini{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.mini a{flex:0 0 44%;scroll-snap-align:start}}

/* ---- スマホの固定予約バー ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--rule);transform:translateY(110%);transition:transform .2s}
.sticky.on{transform:none}
.sticky .price b{font-size:20px}
.sticky .cta{min-height:44px;padding:0 20px}
@media (max-width:900px){.sticky{display:grid}body.has-sticky{padding-bottom:70px}}

/* ---- サイド ---- */
.side h2{font-size:var(--t-l);padding-bottom:6px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.side ol li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--t-s)}
.side ol li i{font-style:normal;font-weight:800;color:var(--sub)}
.side ol li:nth-child(-n+3) i{color:var(--seal)}
.side ol a{color:var(--ink);text-decoration:none}
.side ol a:hover{text-decoration:underline}
/* マイリスト */
.h1row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.save{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px 12px;border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:var(--t-s);font-weight:700;cursor:pointer}
.save .ic{color:var(--sub);font-size:16px;line-height:1}
.save[aria-pressed="true"]{border-color:var(--seal);color:var(--seal)}
.save[aria-pressed="true"] .ic{color:var(--seal)}
.save:hover{border-color:var(--ink)}
.save:focus-visible,.mylist .del:focus-visible,.clear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.save.sm{min-height:32px;padding:2px 10px;margin-top:6px;justify-content:center}
.mylist li{display:flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--rule)}
.mylist a{flex:1;display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:var(--t-s);line-height:1.4;min-width:0}
.mylist a:hover b{text-decoration:underline}
.mylist .th{flex:none;width:64px;height:48px;border-radius:3px;overflow:hidden;background:#DDE2E7}
.mylist img{display:block;width:100%;height:100%;object-fit:cover}
.mylist b{display:block;font-weight:700}
.mylist small{color:var(--sub)}
.mylist .del{flex:none;width:32px;height:32px;border:0;background:none;color:var(--sub);font-size:18px;cursor:pointer;border-radius:4px}
.mylist .del:hover{background:var(--paper);color:var(--ink)}
.clear{margin-top:8px;border:0;background:none;padding:4px 0;color:var(--sub);font:inherit;font-size:var(--t-s);text-decoration:underline;cursor:pointer}

/* ---- フッター ---- */
.foot{background:var(--theme-dark);color:rgba(255,255,255,.85);font-size:var(--t-s);margin-top:24px}
.foot .wrap{padding-top:28px;padding-bottom:28px}
.foot h2{font-size:var(--t-s);color:#fff;margin:0 0 8px}
.foot ul{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:18px}
.foot a{color:rgba(255,255,255,.85);text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.foot small{display:block;margin-top:8px;color:rgba(255,255,255,.6)}
.foot .sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 28px;margin:0 0 20px}
.foot .sites div{margin:0}
.foot .sites div:last-child{grid-column:1/-1}
.foot .sites dt{font-weight:700;color:#fff;font-size:var(--t-xs);margin-bottom:2px}
.foot .sites dd{margin:0;display:flex;flex-wrap:wrap;gap:2px 14px}
.countries a[href="#sites"]{border-left:1px solid rgba(255,255,255,.35);padding-left:18px}

/* ---- 見本だけ（テーマの切り替え） ---- */
.mock-bar{position:fixed;right:10px;bottom:10px;z-index:60;background:#1E1E1E;color:#fff;border-radius:999px;padding:6px 6px 6px 14px;font-size:12px;display:flex;gap:8px;align-items:center}
.mock-bar select{border:0;border-radius:999px;padding:4px 8px;font-size:12px;color:#1E1E1E}
@media (max-width:900px){.mock-bar{position:static;justify-content:center;border-radius:0;padding:10px}}
.megasale{display:block;max-width:728px;margin:12px auto 0}.megasale img{display:block;width:100%;height:auto}

/* ---- TOPに戻る（下へスクロールしたら右下に出す。スマホの固定予約バーが出ているときはその上） ---- */
.totop{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;padding:10px 14px;border-radius:999px;background:#fff;color:var(--theme-dark);border:2px solid var(--theme-dark);font-size:var(--t-xs);font-weight:700;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,bottom .2s}
.totop.on{opacity:1;visibility:visible}
.totop:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:900px){body:has(.sticky.on) .totop{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}