/* ============================================================
沖繩交陪 OKINAWA · KAU-PUÊ — 台湾版トップ
2026-06-10 ビジュアル刷新
・パレットはブランド規定の5色（珊瑚橘/海/暖陽/奶油/墨）のみ
・フォントは Noto Sans TC 基軸 ＋ DM Mono（数値・タイムスタンプ）
・写真スロット（.shot）は「正直なプレースホルダー」：
![]()
を中に置くだけで全面カバー表示に切り替わる（崩れない）
・キャプションは写真の上に重ねない（差し込み後も可読性が落ちない）
============================================================ */
/* ---- tokens ---- */
:root {
/* brand-tw パレット */
--cream: #FBF1E2; /* 奶油 */
--ink: #3B2D28; /* 墨 */
--coral: #EE6A4C; /* 珊瑚橘 */
--sea: #2E9E9E; /* 海 */
--sun: #F4A24B; /* 暖陽 */
/* 派生トーン（oklch で同系統に揃える） */
--bg: oklch(0.962 0.024 79); /* 奶油ベースの地 */
--surface: oklch(0.988 0.012 84); /* カード面 */
--surface-2: oklch(0.955 0.020 80);
--ink-soft: oklch(0.43 0.030 48);
--ink-faint: oklch(0.57 0.024 52);
--coral-deep: oklch(0.56 0.150 32);
--coral-tint: oklch(0.93 0.040 38);
--sea-deep: oklch(0.50 0.085 195);
--sea-tint: oklch(0.93 0.032 200);
--sun-deep: oklch(0.62 0.115 70);
--sun-tint: oklch(0.945 0.045 82);
--line: oklch(0.875 0.024 76);
--line-soft: oklch(0.918 0.018 78);
--r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --pill: 999px;
--shadow-sm: 0 1px 2px oklch(0.40 0.05 50 / 0.05), 0 2px 8px oklch(0.40 0.05 50 / 0.05);
--shadow-md: 0 4px 14px oklch(0.40 0.06 45 / 0.10), 0 2px 6px oklch(0.40 0.06 45 / 0.06);
--tw-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
--font-mono: "DM Mono", "Noto Sans TC", ui-monospace, monospace;
--maxw: 1240px;
}
body.lang-ja { --tw-font: "Zen Kaku Gothic New", "Noto Sans TC", system-ui, sans-serif; }
/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--tw-font);
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.7; /* 繁体字＝行間に余裕 */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--tw-font); margin: 0; line-height: 1.3; letter-spacing: 0; font-style: normal; }
p { margin: 0; }
::selection { background: var(--coral-tint); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* ============================================================
写真スロット .shot — 正直なプレースホルダー
・空のとき: 奶油系の淡い斜めストライプ ＋ 中央にラベルチップ
（--h で色相だけ僅かに変わる。観光広告風グラデは廃止）
・![]()
を入れると全面カバー表示・ラベルは自動で消える
============================================================ */
.shot {
position: relative; overflow: hidden;
background:
repeating-linear-gradient(135deg,
oklch(0.952 0.018 var(--h, 79) / .75) 0 10px,
transparent 10px 20px),
oklch(0.924 0.028 var(--h, 79));
}
.shot::after {
content: "📷 " attr(data-shot);
position: absolute; inset: 0; margin: auto;
width: fit-content; height: fit-content;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
color: var(--ink-soft);
background: oklch(0.99 0.008 84 / .88);
border: 1px solid oklch(0.88 0.02 78);
padding: 4px 11px; border-radius: var(--pill);
white-space: nowrap; max-width: calc(100% - 16px);
overflow: hidden; text-overflow: ellipsis;
}
.shot > img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
}
.shot:has(> img)::after { display: none; }
/* shot 内のバッジ・メタ（実態が揃うまで末尾ブロックで非表示） */
.meta-likes { position: absolute; right: 9px; bottom: 8px; z-index: 2; white-space: nowrap;
font-family: var(--font-mono); font-size: 10.5px; color: #fff; display: inline-flex; gap: 9px;
text-shadow: 0 1px 3px oklch(0.25 0.04 50 / .6); }
.badge-hot { position: absolute; left: 9px; top: 9px; z-index: 2; white-space: nowrap;
font-size: 11px; font-weight: 700; background: var(--coral); color: #fff; padding: 3px 9px; border-radius: var(--pill); }
.badge-new { position: absolute; left: 9px; top: 9px; z-index: 2; white-space: nowrap;
font-size: 11px; font-weight: 700; background: var(--sea); color: #fff; padding: 3px 9px; border-radius: var(--pill); }
.badge-soft { background: oklch(1 0 0 / .9); color: var(--ink); }
/* ============================================================
header
============================================================ */
.head { position: sticky; top: 0; z-index: 60;
background: oklch(0.965 0.022 80 / .92);
backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid var(--line-soft); }
.head__bar { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__logo { width: 42px; height: 42px; flex: none; }
.brand__tx { font-weight: 900; font-size: 19px; letter-spacing: .02em; line-height: 1.15; }
.brand__tx small { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .22em; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav a { padding: 9px 13px; border-radius: var(--pill); font-weight: 700; font-size: 15px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav a:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.nav a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.head__right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.search { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--pill); padding: 8px 14px; color: var(--ink-faint); font-size: 13.5px; }
.search svg { width: 15px; height: 15px; }
.btn-line { background: #06C755; color: #fff; font-weight: 700; font-size: 14px; padding: 9px 15px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 7px; }
.btn-line svg { width: 16px; height: 16px; }
.lang-tog { display: inline-flex; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--pill); padding: 3px; gap: 2px; flex: none; }
.lang-tog button { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); padding: 6px 11px; border-radius: var(--pill); white-space: nowrap; }
.lang-tog button.on { background: var(--ink); color: var(--cream); }
/* ---- live ticker（実態が揃うまで非表示。復帰時用に維持） ---- */
.ticker { background: var(--ink); color: var(--cream); overflow: hidden; }
.ticker__in { display: flex; align-items: center; gap: 14px; height: 38px; }
.ticker__tag { flex: none; font-size: 12px; font-weight: 700; background: var(--coral); color: #fff; padding: 4px 11px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ticker__tag .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ticker__track { display: flex; gap: 34px; white-space: nowrap; animation: marq 30s linear infinite; font-size: 13px; }
.ticker__track span b { color: var(--sun); }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
/* ============================================================
hero（bento）
============================================================ */
.hero { padding: 30px 0 8px; }
.hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.hero__k { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--coral-deep); letter-spacing: .06em; }
.hero__k::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--coral); }
.hero__h { font-size: clamp(30px, 4.4vw, 50px); font-weight: 900; letter-spacing: .01em; line-height: 1.22; margin-top: 8px; }
.hero__h em { font-style: normal; color: var(--coral-deep);
text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 5px; text-underline-offset: 7px; }
.hero__sub { color: var(--ink-soft); font-size: 16px; margin-top: 12px; max-width: 580px; text-wrap: pretty; }
.hero__sub b { color: var(--ink); }
.repeat-pick { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 5px; gap: 3px; box-shadow: var(--shadow-sm); }
.repeat-pick button { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); padding: 8px 14px; border-radius: var(--pill); white-space: nowrap; }
.repeat-pick button.on { background: var(--coral); color: #fff; }
.bento { display: grid; grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 205px 205px; gap: 14px; }
.bento__feat { grid-row: span 2; }
/* タイル＝「写真エリアの下にキャプション」。ラベルとタグが重ならず、
写真が入っても文字が写真に乗らない */
.tile { position: relative; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line-soft);
border-radius: var(--r-lg); overflow: hidden; }
a.tile { transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
a.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); }
.tile__media { flex: 1 1 auto; min-height: 0; }
.tile .cap { padding: 11px 15px 13px; }
.tile .cap .t { font-weight: 900; font-size: 16px; line-height: 1.35;
display: flex; align-items: center; justify-content: space-between; gap: 8px; }
a.tile .cap .t::after { content: "→"; font-weight: 700; color: var(--coral); flex: none; transition: transform .15s ease; }
a.tile:hover .cap .t::after { transform: translateX(3px); }
.tile .cap .row { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.tile .cap .row span { font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-soft); padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
/* featured: マスコット＝ステッカーボード（白縁ステッカーが映える奶油面） */
.tile--mascots { background: var(--cream); }
.tile--mascots::before { content: ""; position: absolute; right: -52px; top: -52px;
width: 190px; height: 190px; border-radius: 50%; background: oklch(0.78 0.11 70 / .25); }
.tile--mascots::after { content: ""; position: absolute; left: -44px; top: 38%;
width: 130px; height: 130px; border-radius: 50%; background: oklch(0.64 0.08 195 / .16); }
.tile--mascots .mascots { position: relative; z-index: 1;
flex: 1 1 auto; min-height: 0;
display: flex; align-items: flex-end; justify-content: center; gap: 5%;
padding: 24px 18px 10px;
background: radial-gradient(46% 9% at 50% 97%, oklch(0.80 0.05 70 / .65), transparent 70%); }
.tile--mascots .mascots img { height: auto; max-height: 100%; max-width: 44%; object-fit: contain; object-position: bottom;
filter: drop-shadow(0 8px 10px oklch(0.35 0.05 48 / .14)); }
.tile--mascots .mascots img:first-child { transform: rotate(-2.5deg); }
.tile--mascots .mascots img:last-child { transform: rotate(2deg); }
.tile--mascots .cap { position: relative; z-index: 1; background: var(--surface); border-top: 1px solid var(--line-soft); padding: 14px 18px 17px; }
.tile--mascots .cap .t { font-size: 19px; justify-content: flex-start; }
.tile--mascots .cap .lead { color: var(--ink-soft); font-size: 13px; line-height: 1.65; margin-top: 6px; text-wrap: pretty; }
.tile--mascots .cap .row span { background: var(--coral-tint); color: var(--coral-deep); }
.tile--mascots .cap .row span + span { background: var(--sea-tint); color: var(--sea-deep); }
/* ============================================================
section frame
============================================================ */
section.sec { padding: 42px 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sec__head .k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
.sec__head h2 { font-size: clamp(23px, 2.8vw, 31px); font-weight: 900; margin-top: 6px; letter-spacing: .01em; }
.sec__head .desc { color: var(--ink-soft); font-size: 14.5px; margin-top: 7px; max-width: 620px; text-wrap: pretty; }
.more { font-weight: 700; font-size: 14px; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.k-hot { color: var(--coral-deep); } .k-teal { color: var(--sea-deep); }
.k-gold { color: var(--sun-deep); } .k-grape { color: var(--sea-deep); } .k-ok { color: var(--sea-deep); }
/* ============================================================
即時情報（鮮度ツール）
============================================================ */
.fresh { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 8px; box-shadow: var(--shadow-sm); }
.fresh__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fcard { border-radius: var(--r-lg); padding: 16px 16px 14px; position: relative; overflow: hidden; background: var(--surface-2); }
.fresh__grid .fcard:nth-child(1) { background: var(--coral-tint); }
.fresh__grid .fcard:nth-child(2) { background: var(--sea-tint); }
.fresh__grid .fcard:nth-child(3) { background: var(--sun-tint); }
.fcard__top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.fcard__top .ic { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: oklch(1 0 0 / .75); flex: none; }
.fcard__big { font-size: 22px; font-weight: 900; margin-top: 12px; letter-spacing: 0; font-family: var(--font-mono); }
.fcard__big small { font-size: 13px; font-weight: 700; color: var(--ink-soft); font-family: var(--tw-font); }
.fcard__lines { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.fline { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.fline a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; font-weight: 700; color: var(--ink-soft); }
.fline a:hover { color: var(--coral-deep); text-decoration-color: var(--coral); }
.fline .st { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); color: #fff; white-space: nowrap; flex: none; }
.st-open { background: var(--sea); } .st-warn { background: var(--sun-deep); } .st-close { background: var(--coral-deep); }
.fcard__upd { margin-top: 11px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.fcard__upd a { text-decoration: underline; text-underline-offset: 2px; }
.fresh__foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; font-size: 12.5px; color: var(--ink-faint); }
/* ============================================================
離島深掘
============================================================ */
.islands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.icard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; transition: transform .15s, box-shadow .2s; display: flex; flex-direction: column; }
.icard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.icard__media { height: 150px; position: relative; flex: none; }
.icard__body { padding: 13px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.icard__name { font-weight: 900; font-size: 17px; display: flex; align-items: baseline; gap: 7px; }
.icard__name small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); font-weight: 500; }
.icard__tag { color: var(--ink-soft); font-size: 13px; margin-top: 5px; text-wrap: pretty; }
.icard__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; }
.icard__body .icard__foot { margin-top: auto; }
.icard__tag + .icard__fare + .icard__foot { margin-top: 11px; }
.pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line-soft); white-space: nowrap; }
.pill-depth { background: var(--coral-tint); color: var(--coral-deep); border-color: transparent; }
/* ============================================================
在地新店 feed（非表示中。復帰時用に維持）
============================================================ */
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ncard { display: grid; grid-template-columns: 92px 1fr; gap: 13px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 11px; align-items: stretch; }
.ncard__media { border-radius: var(--r-md); position: relative; min-height: 92px; }
.ncard__b { display: flex; flex-direction: column; }
.ncard__date { font-family: var(--font-mono); font-size: 10.5px; color: var(--coral-deep); font-weight: 500; letter-spacing: .03em; }
.ncard__name { font-weight: 700; font-size: 15px; margin-top: 3px; line-height: 1.4; }
.ncard__meta { color: var(--ink-soft); font-size: 12.5px; margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.ncard__meta .loc { display: inline-flex; align-items: center; gap: 4px; }
/* ============================================================
購物・免稅 — ブランド5色のフラット面（写真不要のカテゴリカード）
============================================================ */
.shop { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.scard { position: relative; border-radius: var(--r-lg); overflow: hidden; color: var(--cream); min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 17px; transition: transform .15s, box-shadow .2s; }
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.scard::before { content: ""; position: absolute; right: -34px; top: -44px; width: 150px; height: 150px; border-radius: 50%; background: oklch(1 0 0 / .12); }
.scard--don { grid-row: span 2; background: var(--coral); }
.scard--outlet { background: var(--sea); }
.scard--costco { background: var(--ink); }
.scard--drug { background: var(--sea-deep); }
.scard--awase { background: var(--sun); color: var(--ink); }
.scard--awase::before { background: oklch(1 0 0 / .26); }
.scard__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.scard__t { font-weight: 900; font-size: 19px; margin-top: 4px; line-height: 1.3; }
.scard--don .scard__t { font-size: 25px; }
.scard__d { font-size: 12.5px; opacity: .92; margin-top: 7px; max-width: 92%; line-height: 1.65; text-wrap: pretty; }
.scard__tags { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.scard__tags span { font-size: 11px; font-weight: 700; background: oklch(1 0 0 / .18); padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.scard--awase .scard__tags span { background: oklch(1 0 0 / .42); }
/* ============================================================
社團 / SNS（非表示中。復帰時用に維持）
============================================================ */
.social { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.socard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px 15px; display: flex; flex-direction: column; gap: 4px; transition: transform .15s, box-shadow .2s; }
.socard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.socard__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px; margin-bottom: 6px; }
.socard__name { font-weight: 700; font-size: 15px; }
.socard__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.socard__d { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.ic-fb { background: #1877F2; } .ic-ig { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.ic-th { background: #000; } .ic-dc { background: #006aa6; } .ic-line { background: #06C755; }
/* ============================================================
交陪（#kaupue）＝信頼層。マスコットは使わず、静かで丁寧な面
============================================================ */
.kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 21px 20px 23px; }
.kpcard__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--sun-tint); margin-bottom: 12px; }
.kpcard:nth-child(2) .kpcard__ic { background: var(--sea-tint); }
.kpcard:nth-child(3) .kpcard__ic { background: var(--coral-tint); }
.kpcard h3 { font-size: 17px; font-weight: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpcard p { color: var(--ink-soft); font-size: 13.5px; margin-top: 8px; line-height: 1.75; text-wrap: pretty; }
.pill-soon { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--line);
padding: 2px 9px; border-radius: var(--pill); }
/* ============================================================
租車 / 票券 band
============================================================ */
.band { background: var(--coral); border-radius: var(--r-xl); padding: 30px 34px; color: #fff; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -50px; top: -60px; width: 230px; height: 230px; border-radius: 50%; background: oklch(1 0 0 / .13); }
.band::before { content: ""; position: absolute; right: 110px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: oklch(0.78 0.13 70 / .35); }
.band__b { position: relative; z-index: 1; }
.band__k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .88; }
.band__t { font-size: 26px; font-weight: 900; margin-top: 5px; }
.band__d { font-size: 14px; opacity: .94; margin-top: 8px; max-width: 480px; line-height: 1.7; text-wrap: pretty; }
.band__cta { position: relative; z-index: 1; margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.band__cta a { background: var(--cream); color: var(--coral-deep); font-weight: 900; font-size: 15px; padding: 13px 22px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.band__cta a:hover { background: #fff; }
.band__cta a.ghost { background: oklch(1 0 0 / .15); color: #fff; border: 1px solid oklch(1 0 0 / .45); }
.band__cta a.ghost:hover { background: oklch(1 0 0 / .25); }
/* ============================================================
footer ＋ 示意圖ノート（フッターに統合した帯。浮かせない）
============================================================ */
.foot { background: var(--ink); color: oklch(0.86 0.018 78); margin-top: 42px; padding: 42px 0 28px; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.foot h4 { font-size: 13px; color: var(--cream); margin-bottom: 12px; letter-spacing: .06em; }
.foot a { display: block; font-size: 13.5px; color: oklch(0.80 0.018 76); padding: 4px 0; }
.foot a:hover { color: var(--cream); }
.foot__brand { font-weight: 900; font-size: 20px; color: var(--cream); }
.foot__brand small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; color: oklch(0.68 0.018 76); margin-top: 3px; }
.foot__note { font-size: 12.5px; color: oklch(0.74 0.018 76); margin-top: 12px; max-width: 340px; line-height: 1.7; }
.foot__credits { margin-top: 24px; font-size: 10.5px; line-height: 1.8; color: oklch(0.60 0.018 76); }
.foot__credits a { display: inline; padding: 0; font-size: inherit; color: oklch(0.70 0.018 76); text-decoration: underline; text-underline-offset: 2px; }
.foot__credits a:hover { color: var(--cream); }
.foot__bottom { border-top: 1px solid oklch(0.40 0.024 52); margin-top: 14px; padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: oklch(0.64 0.018 76); }
.foot__bottom span { white-space: nowrap; }
/* 「照片為示意圖」＝固定リボンをやめ、フッター直下のサブバーに統合 */
.sample-tag { background: oklch(0.245 0.026 50); color: oklch(0.72 0.018 76);
border-top: 1px solid oklch(0.34 0.024 52);
text-align: center; font-family: var(--font-mono); font-size: 11px;
padding: 10px 16px; letter-spacing: .04em; }
.sample-tag b { color: var(--sun); font-weight: 500; }
/* ============================================================
responsive
============================================================ */
@media (max-width: 1140px) { .search { display: none; } }
@media (max-width: 1000px) {
.bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.bento__feat { grid-column: span 2; grid-row: auto; min-height: 300px; }
.tile--mascots .mascots img { max-height: 225px; }
a.tile { min-height: 180px; }
.fresh__grid, .islands { grid-template-columns: repeat(2, 1fr); }
.feed, .social { grid-template-columns: repeat(2, 1fr); }
.shop { grid-template-columns: 1fr 1fr; }
.scard--don { grid-row: auto; }
.kp { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.nav, .search { display: none; }
.head__bar { gap: 10px; }
.bento, .fresh__grid, .islands, .feed, .social, .shop { grid-template-columns: 1fr; }
.bento__feat { grid-column: auto; }
.bento { grid-auto-rows: minmax(170px, auto); }
.tile--mascots .mascots { padding-top: 16px; }
.foot__grid { grid-template-columns: 1fr 1fr; }
.band { padding: 26px 22px; }
.band__cta { margin-left: 0; }
}
/* ===== 実態に合わせた非表示(2026-06-08) =====
SNS未開設・手動更新が必要な鮮度情報を隠す。
データ/SNSが揃ったら、この最終ブロックと各要素の hidden 属性を外せば
元のサンプル設計にそのまま復帰する（マークアップは保持）。 */
[hidden] { display: none !important; }
.ticker, /* LIVEティッカー（毎日更新が必要） */
#new, /* 在地・新店開幕（週次の手動更新） */
#social, /* 在地社團・情報源（SNS未開設） */
.meta-likes, /* ♥いいね数・收藏（SNS由来の数値） */
.badge-hot, /* 本週最熱／最熱（週次の鮮度ラベル） */
.badge-new, /* 新店／季節限定バッジ */
.head .search, /* 検索（バックエンド未実装） */
.head .btn-line { /* 加LINE看即時（LINE未開設） */
display: none !important;
}
/* 離島カードの運賃・所要（実データ・data-jpyでTWD自動併記） */
.icard__fare { font: 500 .78rem/1.5 var(--font-mono); color: var(--ink-soft); margin: .5rem 0 .15rem; letter-spacing: .01em; }
.icard__fare span[data-jpy] { color: var(--coral-deep); font-weight: 600; }
/* ===== 離島の個別ページ（2026-06-10） ===== */
.crumbs { font-size: 12.5px; color: var(--ink-faint); margin: 18px 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--coral-deep); }
.ihero { padding: 0 0 8px; }
.ihero__media { height: clamp(220px, 34vw, 380px); border-radius: var(--r-xl); overflow: hidden; position: relative; margin-top: 14px; }
.ihero__body { padding: 0; }
.ihero h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; margin-top: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ihero h1 small { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); font-weight: 500; letter-spacing: .08em; }
.ihero__lead { color: var(--ink-soft); font-size: 15.5px; margin-top: 10px; max-width: 640px; }
.ihero__pills { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ifacts { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 18px 20px; }
.ifacts .fline { font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); align-items: baseline; }
.ifacts .fline:last-child { border-bottom: none; }
.ifacts .fline b { color: var(--ink); font-weight: 700; flex: none; min-width: 6.5em; }
.ifacts .fline span[data-jpy] { color: var(--coral-deep); font-weight: 600; font-family: var(--font-mono); }
.ifacts .fline a { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 2px; }
.ifacts__note { margin-top: 10px; font-size: 12px; color: var(--ink-faint); }
.iphoto { border-radius: var(--r-lg); overflow: hidden; margin-top: 18px; }
.iphoto img { width: 100%; height: auto; display: block; }
.iphoto figcaption { font-size: 12px; color: var(--ink-faint); padding: 8px 4px 0; }
@media (max-width: 640px) { .ihero__media { border-radius: var(--r-lg); } }
/* ── 法務・説明ページ（關於／隱私／免責・合作揭露／聯絡） ── */
.lback { font-size: 14px; font-weight: 700; color: var(--ink-soft); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.lback:hover { color: var(--ink); }
.legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 8px; }
.legal__k { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--coral-deep); letter-spacing: .06em; }
.legal__k::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--coral); }
.legal h1 { font-size: clamp(26px, 4vw, 34px); margin: 12px 0 6px; }
.legal__lead { color: var(--ink-soft); font-size: 15px; line-height: 1.8; margin-bottom: 8px; text-wrap: pretty; }
.legal__upd { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 26px; }
.legal h2 { font-size: 19px; margin: 30px 0 10px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 { font-size: 15.5px; margin: 18px 0 4px; color: var(--ink); }
.legal p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.85; margin: 10px 0; text-wrap: pretty; }
.legal ul { margin: 10px 0; padding-left: 20px; }
.legal li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.8; margin: 6px 0; }
.legal a { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal__note { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px 18px; margin: 20px 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
.legal__note strong { color: var(--coral-deep); }
.legal__contact { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--coral-deep); font-size: 17px; font-family: var(--font-mono); }
.legal__sig { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-faint); }
/* ── 「我們的選擇」合作カード（租車／住宿／體驗の予約導線） ── */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 4px; }
.pick { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 15px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.pick__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.pick__t { font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.35; }
.pick__why { font-size: 13px; color: var(--ink-soft); line-height: 1.7; flex: 1; text-wrap: pretty; }
.pick__cta { align-self: flex-start; font-weight: 700; font-size: 13.5px; color: #fff; background: var(--coral); padding: 9px 15px; border-radius: var(--pill); margin-top: 2px; }
.pick__cta:hover { background: var(--coral-deep); }
.pick__cta.ghost { background: transparent; color: var(--coral-deep); border: 1px solid var(--coral); }
.pick__cta.ghost:hover { background: var(--coral-tint); }
.aff-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 11px; line-height: 1.6; }
.aff-note a { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 2px; }