/* ──────────────────────────────────────────────────────────────
   tabino.tw 新デザイン（2026-08-25 ハンドオフの確定値）
   本文 Noto Sans TC / 情緒的な見出し Noto Serif TC
   ────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;font-family:var(--sans);color:var(--ink-900);
 -webkit-font-smoothing:antialiased;line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand-hover)}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#D8D2CB;border-radius:8px}

/* 旧 style.css の上に重ねるので、必要なところは明示的に打ち消す
   写真は全幅、文字は 1440px の中央コンテナに入れる（追加指示 01） */
.shell{max-width:none;margin:0;background:#fff}
.shell>section{padding:0}
.shell .pad{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.in1440{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.pad{padding-left:var(--gut);padding-right:var(--gut)}

/* ── ヘッダー ───────────────────────────── */
.hd{display:flex;align-items:center;flex-wrap:wrap;row-gap:12px;gap:32px;
 padding:14px var(--gut);border-bottom:1px solid var(--line-head);
 position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
.hd-logo{display:flex;align-items:center;gap:10px}
.hd-logo img{height:76px;width:auto}
.hd-logo small{display:block;font-size:10.5px;color:var(--ink-300);letter-spacing:.06em;margin-top:3px}
.hd nav{display:flex;gap:26px;font-size:14.5px;font-weight:500}
.hd nav a{padding:6px 0;border-bottom:2px solid transparent}
.hd nav a:hover{border-bottom-color:var(--brand)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--ink-500)}
.btn-line{display:inline-flex;align-items:center;gap:8px;background:var(--line-green);color:#fff;
 font-weight:700;font-size:14px;padding:11px 20px;border-radius:var(--r-btn)}
.btn-line:hover{color:#fff;filter:brightness(.95)}
.btn-line:before{content:"";width:10px;height:10px;border-radius:2px;background:#fff}

/* ── ボタン ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 font-size:15.5px;font-weight:700;padding:19px 44px;border-radius:var(--r-btn);
 background:var(--brand);color:#fff;border:none;cursor:pointer;transition:background .18s}
.btn:hover{background:var(--brand-hover);color:#fff}
.btn-sm{padding:13px 26px;font-size:14.5px}
.btn-ghost{background:#fff;color:var(--ink-900);border:1px solid var(--line-1)}
.btn-ghost:hover{background:var(--surf-brandtint);color:var(--ink-900);border-color:#E7D6C7}

/* ── 見出し ─────────────────────────────── */
.eyebrow{font-size:11.5px;letter-spacing:.34em;color:var(--ink-300);font-weight:500}
.h-sec{font-size:24px;font-weight:900;letter-spacing:.03em;color:var(--ink-900)}
.h-sec small{font-size:13.5px;font-weight:400;color:var(--ink-500);letter-spacing:0;margin-left:14px}
.h-emo{font-family:var(--serif-tc);font-weight:700;font-size:clamp(28px,3.2vw,44px);
 line-height:1.55;color:var(--ink-700)}
.sec-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sec-more{margin-left:auto;font-size:13.5px;color:var(--ink-500)}
.sec-more:hover{color:var(--brand-text)}

/* ── ヒーロー ───────────────────────────── */
.hero{position:relative;height:620px;overflow:hidden;background:#0C1420}
.hero .sl{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero .sl.on{opacity:1}
.hero .sl img{width:100%;height:100%;object-fit:cover}
/* 2026-08-26 Iku さん「最初のページがくらい」。写真は style.css の
   .hero img{opacity:.72} で 28% 沈んだうえに、さらに左半分を .74 のスクリムで
   覆っていた。写真は素の明るさで出し、暗くするのは文字が乗る左下だけにする */
.hero .sl img{opacity:1}
/* 左半分を上から下までベタで暗くしていたので、文字が無い上のほうまで
   沈んでいた（2026-08-26 Iku さん「なんかくらい」）。
   下地は残しつつ、mask で上 3 分の 1 を完全に抜く。
   文字は下寄せなので、暗いのは文字がある左下だけになる */
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,
 rgba(8,14,22,.72) 0%,rgba(8,14,22,.30) 44%,rgba(8,14,22,0) 70%);
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 24%,#000 50%);
 mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 24%,#000 50%)}
.hero-scrim:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
 rgba(8,14,22,0) 0%,rgba(8,14,22,0) 46%,rgba(8,14,22,.34) 100%)}
/* 切り替えの重なり時間が長いと二重写しに見えるので短くする */
.hero .sl{transition:opacity .5s ease}
.hero-in{position:absolute;inset:0;max-width:var(--maxw);margin:0 auto;
 padding:0 var(--gut) 96px;display:flex;flex-direction:column;justify-content:flex-end;
 gap:20px;color:#fff;z-index:2;pointer-events:none}
.hero-in .eyebrow{color:rgba(255,255,255,.85);letter-spacing:.42em}
.hero-in h1{font-family:var(--serif-tc);font-weight:700;font-size:46px;
 line-height:1.4;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-in p{font-size:15.5px;line-height:2.1;color:rgba(255,255,255,.9)}
.hero-in p span{display:block}
/* 検索バーが Hero に 44px かぶるので、ドットと矢印はその上（コピー下 96px の帯）に置く */
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;
 display:flex;gap:6px;z-index:4}
.hero-dots i{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hero-dots i:before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);
 transition:.2s}
.hero-dots i.on:before{background:#fff;width:24px;height:6px;border-radius:3px}
/* 矢印は左右中央に置くとコピーに重なる（コピーはコンテナ左端から始まる）。
   Hero の内側・右下に寄せて、ドットと同じ帯に並べる。*/
.hero-nav{position:absolute;bottom:52px;width:44px;height:44px;
 border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
 border:1px solid rgba(255,255,255,.3);color:#fff;z-index:4;display:flex;
 align-items:center;justify-content:center;font-size:20px;cursor:pointer}
.hero-nav:hover{background:rgba(255,255,255,.28);color:#fff}
.hero-prev{right:76px}.hero-next{right:24px}

/* ── 検索バー（追加指示 03）─────────────── */
/* 検索バーは Hero の外。少しだけ重ねる（追加指示 01-4）*/
.srchwrap{padding:0 var(--gut);margin-top:-44px;position:relative;z-index:10}
/* たたんだ検索ボタン（スマホだけ出す）*/
.srchmini{display:none}
.srch{max-width:1360px;margin:0 auto;background:#fff;border:1px solid var(--line-1);
 border-radius:14px;box-shadow:0 14px 40px rgba(20,16,12,.14);padding:10px;
 display:grid;gap:0;align-items:stretch;
 /* 2026-08-27 順序変更：地區(n2) → 人數(n4) → 想做什麼(n1) */
 grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr) auto}
.srch label{display:flex;align-items:center;gap:12px;padding:6px 20px;min-width:0;
 border-right:1px solid var(--line-3);cursor:pointer;border-radius:8px;min-height:44px;
 position:relative}
.srch label:hover{background:#FCF9F5}
.srch label.n1{border-right:none}   /* 想做什麼 が最後の欄 */
/* 日付欄を外した代わりに、空室と料金がどこで見られるかを書く */
.srchnote{display:flex;align-items:center;padding:6px 20px;font-size:13px;
 color:var(--ink-400);border-left:1px solid var(--line-1);min-width:0}
.srch .ic{width:18px;height:18px;flex:0 0 auto;opacity:.42}
.srch .f{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;position:relative}
.srch .k{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-300)}
/* 2026-08-27 Iku さん「今動かないよこれ」。
   select の当たり判定が値の文字幅（59x25px）しか無く、枠 345x62px の 8 割が死んでいた。
   <label> で包んでも Chrome はラベルクリックで select を開かない（focus するだけ）。
   なので select を枠いっぱいの透明レイヤーにして、見える値は .v に描く。*/
.srch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:2;
 border:none;background:none;font:inherit;padding:0;margin:0;cursor:pointer;outline:none;
 -webkit-appearance:none;appearance:none}
.srch label:focus-within{background:#FCF9F5;box-shadow:inset 0 0 0 2px rgba(240,90,36,.28)}
.srch .v{font-size:14.5px;font-weight:500;color:var(--ink-900);line-height:1.4;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srch .v.un{color:var(--ink-300)}
.srch input{border:none;background:none;font:inherit;font-size:14.5px;font-weight:500;
 color:var(--ink-900);padding:0;margin:0;cursor:pointer;outline:none;width:100%;min-width:0;
 -webkit-appearance:none;appearance:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch input.un{color:var(--ink-300)}
.srch input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;
 height:100%;opacity:0;cursor:pointer}
.srch input[type=date]::-webkit-inner-spin-button{display:none}
/* シェブロンは値のすぐ右に置く（追加指示 03-問題2）。
   .f を伸ばしたままだと項目の右端まで飛んでいく。*/
.srch .f{flex:0 1 auto}
.srch .cv{flex:0 0 auto;margin-right:auto;align-self:flex-end;margin-bottom:6px}
.srch>.btn{margin-left:10px;padding:0 32px;display:flex;align-items:center;justify-content:center;
 font-size:15px;font-weight:700;letter-spacing:.06em;border-radius:10px;box-shadow:none;
 white-space:nowrap;background:var(--brand);color:#fff;border:none}
.srch>.btn:hover{background:var(--brand-hover);color:#fff}

/* 理由の帯：チェックの線だけ（追加指示 03）*/
.trustwrap{margin-top:0}
.trust{max-width:1360px;margin:0 auto;padding:20px var(--gut) 0;display:flex;align-items:center;
 gap:26px;flex-wrap:wrap}
.trust span{display:flex;align-items:center;gap:8px;font-size:13px;color:#4A443E;white-space:nowrap}
.trust svg{flex:0 0 auto}
.trust .cpnhint{margin-left:auto;gap:7px;font-size:12.5px;color:#666}
.trust .cpnhint b{font-size:13px;font-weight:900;color:var(--brand-text);background:#FFF4EC;
 border:1px solid var(--cpn-line);border-radius:6px;padding:3px 9px;letter-spacing:.06em}
.trust .cpnhint i{font-style:normal;font-size:13.5px;font-weight:900;color:var(--brand-text)}

/* ── 地區カード（追加指示 04・05・10）────────────
   写真の上に文字を置くときの順序は「文字の位置 → スクリムの向き」。
   大カードは文字が左に縦積みなので左からの斜め、
   4:3 のカードは文字が下端なので下から。濃さは check-contrast.mjs の実測で決める。*/
.areas{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.acols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
a.acard,div.acard{position:relative;border-radius:14px;overflow:hidden;display:block;
 transition:box-shadow .2s}
.acard.big{height:480px}
.acard.sq{aspect-ratio:auto;height:500px}
.acard.big:hover,.acard.sq:hover{box-shadow:0 16px 40px rgba(28,22,16,.16)}
.acard .cover{position:absolute;inset:0;z-index:1}
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.acard:hover img{transform:scale(1.04)}
.acard .in{position:absolute;inset:0;z-index:2;color:#fff}
.acard .in a{position:relative;z-index:3}

/* 大カード：左に情報、右は写真だけ */
.acard.big .sc{position:absolute;inset:0;background:linear-gradient(105deg,
 rgba(6,26,38,.86) 0%,rgba(6,26,38,.72) 34%,rgba(6,26,38,.24) 62%,rgba(6,26,38,0) 100%)}
.acard.big .in{padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;
 gap:10px;max-width:520px}
.acard.big .tag{align-self:flex-start;background:var(--brand);color:#fff;font-size:11.5px;
 font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:5px;margin-bottom:auto}
.acard.big h3{font-family:var(--serif-tc);font-size:42px;font-weight:700;letter-spacing:.06em;
 color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);line-height:1.25}
.acard.big .en{font-size:12px;letter-spacing:.38em;color:#fff;margin-top:-4px}
.acard.big p{font-size:14px;line-height:1.85;color:rgba(255,255,255,.94);max-width:440px}
.anote{font-size:12px;color:var(--ink-500);line-height:1.7}
/* チップ・棟数・CTA は下端の 1 つの塊にまとめる（写真の中央に浮かせない）*/
.acard.big .bt{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.acard.big .bt .n{font-size:14px;font-weight:700;color:#fff;display:flex;gap:10px;
 align-items:center;flex-wrap:wrap}
.acard.big .bt .n span{font-size:12.5px;font-weight:400;color:rgba(255,255,255,.9)}
.acard.big .go{margin-left:auto;background:var(--brand);color:#fff;font-size:13.5px;font-weight:700;
 padding:11px 20px;border-radius:8px;white-space:nowrap}
.acard.big .go:hover{background:var(--brand-hover);color:#fff}

/* 4:3 のカード：文字は下端。スクリムも下から */
.acard.sq .sc{position:absolute;inset:0;background:linear-gradient(180deg,
 rgba(6,26,38,0) 0%,rgba(6,26,38,0) 26%,rgba(6,26,38,.38) 40%,
 rgba(6,26,38,.84) 62%,rgba(6,26,38,.96) 100%)}
.acard.sq .in{padding:20px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.acard.sq h3{font-family:var(--serif-tc);font-size:25px;font-weight:700;color:#fff;line-height:1.25;
 text-shadow:0 2px 14px rgba(0,0,0,.55)}
.acard.sq .en{font-size:10.5px;letter-spacing:.3em;color:rgba(255,255,255,.92);margin-top:-3px}
.acard.sq p{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.94);max-width:340px}
.acard.sq .bt{display:flex;flex-direction:column;gap:8px;margin-top:3px}
.acard.sq .bt .n{font-size:14px;font-weight:700;color:#fff;display:flex;gap:9px;align-items:baseline;
 flex-wrap:wrap}
.acard.sq .bt .n span{font-size:12px;font-weight:400;color:rgba(255,255,255,.92)}

/* 市町は平文をやめてチップに（押せると分かる形にする）*/
.chs{display:flex;gap:8px;flex-wrap:wrap}
.chs .ch{font-size:13px;color:#fff;background:rgba(8,18,28,.56);
 border:1px solid rgba(255,255,255,.44);padding:8px 14px;border-radius:7px;
 backdrop-filter:blur(4px);display:flex;align-items:center;gap:7px;white-space:nowrap;
 min-height:38px;box-sizing:border-box}
.acard.sq .chs .ch{padding:6px 11px;font-size:12px;min-height:32px}
.chs .ch:hover{background:rgba(8,18,28,.74)}
.chs .ch b{font-weight:900;color:#fff}
.amore{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.94)}
.amore:hover{color:#fff;text-decoration:underline}

/* テーマ節の写真カード（大カードでも 4:3 カードでもない素の acard）*/
.tpanels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.acard.flat{height:330px;border-radius:var(--r-card)}
.acard.flat .sc{position:absolute;inset:0;background:linear-gradient(180deg,
 rgba(6,26,38,0) 0%,rgba(6,26,38,0) 18%,rgba(6,26,38,.48) 34%,
 rgba(6,26,38,.88) 56%,rgba(6,26,38,.95) 78%,rgba(6,26,38,.97) 100%)}
.acard.flat .in{padding:24px 24px 22px;display:flex;flex-direction:column;
 justify-content:flex-end;gap:5px}
.acard.flat h3{font-size:19px;font-weight:700;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.acard.flat .n{font-size:12.5px;color:#FBE3CC;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.acard.flat p{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.92);
 text-shadow:0 1px 8px rgba(0,0,0,.55)}
/* まとめたパネルの内訳リンク（海景 6 棟／海邊 9 棟）*/
.acard.flat .cs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;position:relative;z-index:3}
.acard.flat .cs a{font-size:12px;color:#fff;background:rgba(8,18,28,.62);
 border:1px solid rgba(255,255,255,.42);border-radius:6px;padding:5px 10px;white-space:nowrap}
.acard.flat .cs a:hover{background:rgba(8,18,28,.8);color:#fff}
.acard.flat .cs a b{font-weight:900;color:#fff}

/* ── 沖繩帯（追加指示 04-B）──────────────────── */
.oki{margin-top:56px;position:relative;overflow:hidden;height:400px}
.oki img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* 文字が左に縦積みなので、スクリムも左から（追加指示 10 C・D2）*/
.oki .sc{position:absolute;inset:0;background:linear-gradient(100deg,
 rgba(6,26,38,.86) 0%,rgba(6,26,38,.74) 30%,rgba(6,26,38,.34) 52%,
 rgba(6,26,38,.06) 74%,rgba(6,26,38,0) 100%)}
/* 文字は 1440px のコンテナの中。写真だけ全幅（追加指示 01-0）*/
.oki .in{position:absolute;inset:0;display:flex;align-items:center}
.oki .pad2{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%;
 display:flex;flex-direction:column;gap:18px;color:#fff}
.oki h2{font-family:var(--serif-tc);font-weight:700;font-size:40px;line-height:1.4;
 text-shadow:0 2px 20px rgba(0,0,0,.4)}
.oki p{font-size:15px;line-height:2;color:rgba(255,255,255,.9);max-width:480px}
.oki-bt{display:flex;gap:12px;flex-wrap:wrap}
.oki-bt .btn{font-size:15px;font-weight:700;padding:15px 30px;border-radius:9px}
/* 副ボタンは白ベタにしない（主ボタンと同じ強さになる）*/
.oki-bt .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;
 font-size:14px;padding:14px 26px}
.oki-bt .btn-outline:hover{background:rgba(255,255,255,.14);color:#fff}
.oki-bt .btn-outline:before{content:none}

/* ── 旅行タイプ ─────────────────────────── */
.trips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trip{border:1px solid var(--line-1);border-radius:var(--r-card);overflow:hidden;background:#fff}
.trip:hover{border-color:#DCD3C9}
.trip .ph{aspect-ratio:4/3;background:var(--surf-cream);overflow:hidden}
.trip .ph img{width:100%;height:100%;object-fit:cover}
.trip .bd{padding:15px 16px 17px;text-align:center}
.trip b{display:block;font-size:15.5px;font-weight:700}
.trip span{display:block;font-size:12.5px;color:var(--ink-500);margin-top:5px}

/* ── テーマ ─────────────────────────────── */
.themes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.theme{display:grid;grid-template-rows:72px 2.7em auto;justify-items:center;
 align-content:start;gap:6px;text-align:center}
/* 支給の粘土イラスト。丸い下地は敷かない（絵そのものに立体感があるので浮いて見える）*/
/* style.css の .ic（枠付きの箱）とぶつかるので、ここで打ち消す */
.theme .ic{width:72px;height:72px;display:flex;align-items:center;justify-content:center;
 border:none;background:none;border-radius:0;overflow:visible;transition:transform .25s}
.theme:hover .ic{transform:translateY(-3px) scale(1.04)}
.theme .ic img{width:100%;height:100%;object-fit:contain}
.theme b{font-size:13px;font-weight:700;color:var(--ink-700);line-height:1.35;
 display:flex;align-items:center}
.theme i{font-style:normal;font-size:11.5px;color:var(--ink-300)}

/* ── 物件カード（追加指示 05-B）──────────────────
   属性を 1 本の平文に潰さない。名前・場所／人數｜面積／設備チップ／価格の 4 段。*/
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.vcard{border:1px solid var(--line-1);border-radius:12px;overflow:hidden;
 background:#fff;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.vcard:hover{border-color:#DCD3C9;box-shadow:0 12px 30px rgba(28,22,16,.12)}
.vcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surf-ph)}
.vcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vcard:hover .ph img{transform:scale(1.04)}
.vcard .bd{padding:16px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.vcard .nm{display:flex;flex-direction:column;gap:4px}
.vcard .nm b{font-size:16px;font-weight:700;line-height:1.45;color:var(--ink-900)}
.vcard .nm span{font-size:12.5px;color:var(--ink-500)}
.vcard .sp{display:flex;align-items:center;gap:10px;font-size:13px;color:#4A443E;flex-wrap:wrap}
.vcard .sp i{font-style:normal;color:#DCD5CD}
.vcard .ex{font-size:11.5px;color:var(--ink-300);margin-top:-6px}
.vcard .chs{display:flex;gap:6px;flex-wrap:wrap}
.vcard .chs span{font-size:12px;color:#5A524A;background:#F7F3EE;border:1px solid var(--line-1);
 border-radius:6px;padding:5px 10px;white-space:nowrap}
/* margin-top:auto が高さを揃える鍵。カードに固定高さは付けない */
.vcard .price{font-size:12.5px;color:var(--ink-400);border-top:1px solid var(--line-2);
 padding-top:12px;margin-top:auto}

/* ── 選ばれる理由（追加指示 05-C）：4 枚 2×2 ────────── */
.why{margin-top:56px;background:var(--surf-pink);padding:52px var(--gut)}
.why .sec-head{max-width:var(--maxw);margin-left:auto;margin-right:auto}
/* 2026-08-26 Iku さん「こんなに場所使わないで、正方形で小さく横に並べて」。
   2 列の横長カードだと 4 枚で 500px 使っていた。4 列の正方形にする */
/* 2026-08-26 Iku さん「角を丸くして四角く小さくして4つ横に並べて」。
   .why は全幅の帯なので、幅の広い画面だと 1 枚 490px の巨大な正方形になっていた。
   中身の幅をページの本文幅に合わせて、正方形のまま小さくする */
.whys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px;
 max-width:var(--maxw);margin-left:auto;margin-right:auto;
 align-items:stretch}
.whyc{background:#fff;border:1px solid var(--line-1);border-radius:18px;padding:22px 20px;
 aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
/* 3D と線アイコンが並ぶので、下地の箱はどちらにも敷かない（片方だけ箱だと浮く）*/
.whyc .ic{width:50px;height:50px;display:flex;align-items:center;justify-content:center;
 flex:0 0 auto;background:none;border:none;border-radius:0;overflow:visible}
.whyc .ic img{width:36px;height:36px}
.whyc .ic.art img{width:100%;height:100%;object-fit:contain}

.whyc b{font-size:15px;font-weight:700;color:var(--ink-900)}
/* 繁体字の本文は 1 行 30〜40 字（追加指示 06-0）*/
.whyc p{font-size:12.8px;line-height:1.78;color:#4A443E;max-width:none}

/* ── Iku 老師のパネル（追加指示 06-A）────────────────
   地色は 1 色。本文は max-width 540px（繁体字は 1 行 30〜40 字）。*/
.story{border:1px solid var(--line-1);border-radius:16px;overflow:hidden;
 background:var(--surf-cream);display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.story .tx{padding:56px 56px 56px 60px;display:flex;flex-direction:column;gap:22px;
 align-items:flex-start;background:none}
.story .tx .h-emo{color:var(--ink-900)}
.story .bd{display:flex;flex-direction:column;gap:18px;max-width:540px}
.story .tx p{font-size:15px;line-height:2.1;color:#4A443E}
.story .tx p strong{color:var(--brand-text);font-weight:700}
.story .prof{border-top:1px solid #EAE0D2;padding-top:22px;width:100%;
 display:flex;align-items:center;gap:18px}
/* 2026-08-26 Iku さん「丸いのやめて四角にして」「半身で少し大きめに」 */
.story .prof img{width:96px;height:120px;border-radius:14px;object-fit:cover;
 object-position:center top;flex:0 0 auto}
.story .prof b{font-size:15px;font-weight:700;color:var(--ink-900);display:block}
.story .prof span{font-size:12.5px;line-height:1.75;color:var(--ink-500);display:block;
 margin-top:3px}
.story .sbt{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.story .tx .btn{align-self:flex-start;font-size:15px;font-weight:700;padding:16px 32px;
 border-radius:9px;width:auto}
/* イラストは白い台紙に載せる。クリームに縁が溶けるとギザギザが失敗に見える */
.story .ph{padding:40px 40px 40px 0;min-height:0}
/* 2026-08-26 Iku さん「これ写真見たいな白い四角いらない」。
   イラストを白い台紙に載せるのをやめ、そのまま置く */
.story .mat{background:none;border-radius:0;padding:0;box-shadow:none}
.story .mat img{width:100%;height:auto;display:block;border-radius:12px}
.story .mat .cap{font-size:11.5px;color:var(--ink-300);text-align:right;margin-top:8px}

/* ── 六件事（追加指示 06-B）──────────────────────── */
.fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.fcard{background:#fff;border:1px solid var(--line-1);border-radius:12px;padding:22px 24px;
 display:flex;flex-direction:column;gap:12px}
.fcard b{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--ink-900)}
.fcard .no{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;
 font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fcard p{font-size:14px;line-height:1.95;color:#4A443E;max-width:500px}
.fcard .fl{margin-top:4px;font-size:13px;font-weight:700;color:var(--brand-text)}
.fcard .fl:hover{color:var(--brand-hover)}
.sec-more.strong{font-size:13.5px;font-weight:700;color:var(--brand-text)}
.sec-more.strong:hover{color:var(--brand-hover)}

/* ── クーポン（追加指示 02）───────────────── */
.cpn2{border:1px solid var(--cpn-line);border-radius:16px;overflow:hidden;background:var(--cpn-bg);
 display:grid;grid-template-columns:minmax(0,851fr) minmax(0,509fr)}
/* バナーは原寸 851x315。cover にすると右カラムの高さに合わせて拡大＆左右が切れるので、
   高さは auto のまま中央に置く。素材の地色は白なのでセルも白にして継ぎ目を消す。*/
.cpn2 .cpnban{padding:0;margin:0;background:#fff;border:none;line-height:0;
 display:flex;align-items:center}
.cpn2 .cpnban img{width:100%;height:auto;display:block}
.cpn2 .use{border-left:1px solid var(--cpn-line);padding:30px 30px 24px;display:flex;
 flex-direction:column;gap:20px}
.cpn2 .use h3{font-size:13px;font-weight:900;letter-spacing:.04em;color:#1A1A1A}
.cpn2 .steps{display:flex;flex-direction:column;gap:14px}
.cpn2 .st{display:flex;align-items:baseline;gap:12px;font-size:13.5px;line-height:1.7;color:#1A1A1A}
.cpn2 .st b{font-family:var(--serif-tc);font-size:14px;font-weight:700;color:var(--brand-text);flex:0 0 auto}
.cpn2 .copy{margin-top:2px;align-self:flex-start;background:var(--brand);color:#fff;border:0;
 font-family:inherit;font-size:14px;font-weight:700;padding:13px 20px;border-radius:9px;
 cursor:pointer;white-space:nowrap}
.cpn2 .copy:hover{background:var(--brand-hover)}
.cpn2 .note{margin-top:auto;border-top:1px solid #F5E9DC;padding-top:14px;display:flex;
 flex-direction:column;gap:5px}
.cpn2 .note span{font-size:12px;line-height:1.7;color:var(--ink-400)}
.cpn2 .note span+span{color:var(--ink-300)}

/* ── LINE 帯 ────────────────────────────── */
.lineband{border:1px solid var(--line-1);border-radius:14px;padding:28px 30px;display:flex;
 align-items:center;gap:26px;background:var(--surf-pink);flex-wrap:wrap}
.lineband b{font-size:20px;font-weight:700}
.lineband p{font-size:13.5px;color:var(--ink-600);line-height:1.9;margin-top:6px}

/* ── フッター ───────────────────────────── */
.ft{background:var(--foot-bg);color:#B9B2AB;padding:48px var(--gut) 26px;margin-top:64px}
.ft-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.ft h4{font-size:12.5px;letter-spacing:.1em;color:rgba(255,255,255,.55);font-weight:700;
 margin-bottom:12px}
.ft a{display:block;font-size:13px;color:rgba(255,255,255,.78);padding:5px 0}
.ft a:hover{color:#fff;text-decoration:underline}
.ft .about{font-size:12.5px;line-height:2;color:var(--foot-ink)}
.ft .logo{background:#fff;border-radius:8px;padding:8px 10px;display:inline-block;margin-bottom:14px}
.ft .logo img{height:32px}
.ft .bot{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;
 display:flex;gap:22px;flex-wrap:wrap;font-size:12px}
.ft .bot a{display:inline;color:rgba(255,255,255,.62)}

/* ── レスポンシブ（ハンドオフは 1440px のみ。ここは実装側で設計）── */
@media(max-width:1439px){:root{--gut:40px}}
@media(max-width:1199px){
  .srch{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .srchnote{grid-column:1/-1;border-left:none;border-top:1px solid var(--line-1)}
  .srch label{border-right:none;border-bottom:1px solid var(--line-3)}
  .srch label.n2{border-right:1px solid var(--line-3)}
  .srch label.n1{grid-column:1/-1;border-right:none}
  .srch>.btn{grid-column:1/-1;margin:10px 0 0;padding:16px 32px}}
@media(max-width:1023px){:root{--gut:24px}
  .cpn2{grid-template-columns:minmax(0,1fr)}
  .cpn2 .cpnban img{height:auto}
  .cpn2 .use{border-left:none;border-top:1px solid var(--cpn-line)}}
@media(max-width:1100px){
  .acols{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 器が小さくなると文字が写真の明るいところに乗る。
     スクリムを濃くして写真をつぶすのではなく、写真の上に文字を置くのをやめる
     （追加指示 10 §0・B）。写真は 4:3 のまま、文字は下の無地へ。*/
  .acard.sq{aspect-ratio:auto;background:#fff;border:1px solid var(--line-1)}
  .acard.sq img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3}
  .acard.sq .sc{display:none}
  .acard.sq .in{position:relative;inset:auto;z-index:2;padding:16px 18px;color:var(--ink-900)}
  .acard.sq h3{font-size:21px;color:var(--ink-900);text-shadow:none}
  .acard.sq .en{color:var(--ink-300)}
  .acard.sq p{color:var(--ink-600);max-width:none}
  .acard.sq .bt .n{color:var(--ink-900)}
  .acard.sq .bt .n span{color:var(--ink-500)}
  .acard.sq .chs .ch{color:var(--ink-700);background:#F7F3EE;border-color:var(--line-1);
   backdrop-filter:none}
  .acard.sq .chs .ch:hover{background:#EFE9E1}
  .acard.sq .chs .ch b{color:var(--ink-900)}
  .acard.sq .amore{color:var(--brand-text)}
  .acard.sq .cover{position:absolute;inset:0;z-index:1}
  .acard.sq:hover img{transform:none}
}
@media(max-width:1023px){
  /* 幅が狭いと沖繩帯の本文が 66% まで伸びる。暗がりもそこまで伸ばす */
  .oki .sc{background:linear-gradient(90deg,rgba(6,26,38,.86) 0%,rgba(6,26,38,.80) 46%,
   rgba(6,26,38,.46) 68%,rgba(6,26,38,.10) 84%,rgba(6,26,38,0) 100%)}
  .acard.big{height:auto;min-height:0}
  /* この幅では写真の下の白地に文字を出す作りなので、ガラス板を外す
     （濃い文字が濃い板に乗って 比 2.01 になっていた・2026-08-26 実測）*/
  /* この幅では写真の下の白地に文字を出す（Trip・Agoda の一覧カードと同じ作り）。
     写真は 16:9 で丸ごと見せて、板も影も掛けない */
  .acard.big{height:auto;min-height:0;background:#fff;border:1px solid var(--line-1)}
  .acard.big img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9}
  .acard.big .cover{position:absolute;inset:0;z-index:1}
  .acard.big:hover img{transform:none}
  .acard.big .sc{display:none}
  .acard.big .in,.acard.sq .in{background:none!important;box-shadow:none!important;
   -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
   position:relative!important;inset:auto!important;max-width:none!important;z-index:2}
  .acard.big .in{padding:18px 20px;color:var(--ink-900)}
  .acard.big h3{color:var(--ink-900);text-shadow:none}
  .acard.big .en{color:var(--ink-300)}
  .acard.big p{color:var(--ink-600);max-width:none}
  .acard.big .bt .n{color:var(--ink-900)}
  .acard.big .bt .n span{color:var(--ink-500)}
  .acard.big .chs .ch{color:var(--ink-700);background:#F7F3EE;border-color:var(--line-1);
   backdrop-filter:none}
  .acard.big .chs .ch b{color:var(--ink-900)}
  .acard.big .amore{color:var(--brand-text)}
  .story{grid-template-columns:minmax(0,1fr)}
  .story .ph{padding:0 32px 40px}
  .fcards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1100px){
  .trips,.vgrid,.tpanels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .themes{grid-template-columns:repeat(5,minmax(0,1fr))}
  .whys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  /* 狭い画面ではヒーローのコピーが写真の明るいところに重なる */
  /* コピーを下半分に寄せたので、上は写真を見せて下だけ落とす */
  .hero-scrim{background:linear-gradient(180deg,rgba(8,14,22,.22) 0%,rgba(8,14,22,.12) 26%,
   rgba(8,14,22,.62) 52%,rgba(8,14,22,.88) 100%)}
  .hero-scrim:after{content:none}
  .srch{grid-template-columns:minmax(0,1fr)}
  .srch label,.srch label.n2{border-right:none;border-bottom:1px solid var(--line-3);
   min-height:56px}
  .srch label.n1{border-bottom:none}
  .srch>.btn{width:100%;margin:10px 0 0}
  .hero-in h1{font-size:30px}
  .h-emo{font-size:26px}
  .story .tx{padding:32px 24px}
  .story .ph{padding:0 24px 32px}
  .fcard{padding:18px 20px}
  [style*="nowrap"],.h-emo,.hero-in h1,.h-sec{white-space:normal!important}
}
@media(max-width:700px){
  :root{--gut:20px}

  .trust{gap:8px 14px;padding:12px var(--gut) 0}
  .trust span{font-size:11.5px;gap:5px}
  .trust svg{width:11px;height:11px}
  .trust .cpnhint{display:none}   /* 同じ内容が上のクーポン帯に出ている */
  .srchwrap{margin-top:-24px}
  /* 狭い画面では矢印がコピーに重なる。ドットとスワイプで送る */
  .hero-nav{display:none}
  .hd{gap:14px;padding:10px var(--gut)}
  .hd nav{display:none}
  .hero{height:460px}
  .trips,.vgrid,.tpanels,.acols{grid-template-columns:1fr}
  .whys{grid-template-columns:repeat(2,minmax(0,1fr))}  /* 正方形のまま 2 列 */
  /* 沖繩の大カード：スマホでは説明・注記・市町チップを出さない。
     バッジ・地名・棟数・ボタンだけにする（文字が多すぎて写真が埋まっていた）*/
  .acard.big h3{font-size:28px}
  .acard.big p,.acard.big .chs,.acard.big .amore{display:none}
  .acard.big .in{padding:18px 20px;gap:6px}
  .acard.big .bt{margin-top:auto;gap:8px}
  .acard.big{height:300px}
  .acard.big .go{margin-left:0}
  .oki h2{font-size:28px}
  .themes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .oki{height:330px}
  .ft-cols{grid-template-columns:1fr}
  .btn{padding:16px 28px;width:100%}
  .cpn2 .use{padding:24px 20px 20px}
  .cpn2 .copy{width:100%;align-self:stretch;text-align:center}
  /* 指で押す場所は 44px 以上 */
  .hd-r a,.theme,.ft a,.cpn2 .st{min-height:44px}
}

/* ── ナビのドロップダウン（旧サイトから継承）───────────── */
.hd .navdrop{position:relative}
.hd .navdrop>a:after{content:"▾";font-size:10px;margin-left:5px;color:var(--ink-300)}
.hd .dropmenu{position:absolute;left:0;top:100%;min-width:300px;background:#fff;
 border:1px solid var(--line-1);border-radius:12px;box-shadow:0 14px 40px rgba(26,20,15,.12);
 padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
 opacity:0;visibility:hidden;transition:.16s;z-index:80;max-height:70vh;overflow:auto}
.hd .navdrop:hover .dropmenu,.hd .navdrop:focus-within .dropmenu{opacity:1;visibility:visible}
.hd .dropmenu a{display:flex;justify-content:space-between;gap:10px;font-size:13px;
 font-weight:400;padding:8px 10px;border-radius:7px;border:none}
.hd .dropmenu a:hover{background:var(--surf-brandtint);color:var(--ink-900)}
.hd .dropmenu .c{color:var(--ink-300);font-size:12px}
@media(max-width:700px){.hd .dropmenu{display:none}}

/* ── クーポン帯（追加指示 01-5）───────────────────────── */
.cpnbar{background:var(--surf-brandtint);border-bottom:1px solid var(--cpn-line);
 padding:13px var(--gut)}
.cpnbar .in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
 justify-content:center;gap:14px;flex-wrap:wrap;padding:0}
.cpnbar .c1{font-size:13px;font-weight:500;color:#5A524A}
.cpnbar code{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--brand-text);
 background:#fff;border:1px solid var(--cpn-line);border-radius:6px;padding:4px 10px;
 letter-spacing:.06em}
.cpnbar .c2{font-size:14px;font-weight:900;color:var(--brand-text)}
.cpnbar .c3{font-size:12px;color:var(--ink-400)}


/* ══ 写真の上に何も敷かない ═════════════════════════════════════
   2026-08-26 Iku さん「後ろの影、ブロックやっぱりなし」。
   写真全面のスクリム（.hero-scrim / .sc）も、文字の後ろの板も、両方やめる。
   写真は opacity:1 のまま、暗くするものは一切重ねない。
   文字は白＋濃い落ち影だけで読ませる。
   ※ 落ち影はコントラスト比の計算には乗らないので、明るい空や白い壁の上では
     実測値が AA(4.5) を下回る箇所が出る。check-contrast.mjs はそれを
     そのまま報告する（黙らせていない）。 */
.hero-scrim{display:none}
.hero-in{background:none!important}
.acard.big .sc,.acard.sq .sc,.acard.flat .sc,.oki .sc{display:none}

/* 写真の上には文字も置かない。写真は丸ごと見せて、文字は写真の下に出す。
   （落ち影だけでは、明るい壁や空の上で白文字がどうしても読めない。
     Trip・Agoda の一覧カードと同じ「写真＋その下に文字」にする）*/
.hero{height:auto!important;overflow:visible!important;background:none!important}
.hero .sl{position:relative!important;inset:auto!important;height:0;overflow:hidden;
 opacity:1!important;transition:none!important}
.hero .sl.on{height:clamp(360px,46vw,560px)}
.hero .sl img{height:100%}
.hero-in{position:relative!important;inset:auto!important;z-index:2;pointer-events:auto!important;
 padding:26px var(--gut) 0!important;color:var(--ink-900)!important;gap:12px!important;
 justify-content:flex-start!important}
/* 2026-08-26 Iku さん「この無駄なシャドウやめろ」。
   文字が写真の上から降りたので、落ち影は 1 つも要らない
   （style.css の .hero p に残っていた）*/
.hero-in,.hero-in *{text-shadow:none!important}
.hero-in .eyebrow{color:var(--gold)!important;letter-spacing:.34em}
.hero-in h1{color:var(--ink-900)!important;font-size:clamp(28px,3.2vw,42px);text-shadow:none!important}
.hero-in p{color:var(--ink-600)!important;line-height:1.95}
.hero-dots{bottom:auto;top:clamp(320px,42vw,516px)}
.hero-nav{bottom:auto;top:clamp(316px,41.6vw,512px)}
.srchwrap{margin-top:18px!important}

/* 地區カード・テーマタイル・沖繩帯も同じ作りにする。
   写真は丸ごと見せて、文字はその下の白地に置く。
   写真の上に文字を残すのは、写真が暗いとき限定にしないと成立しない。 */
/* 2026-08-26 Iku さん「文字下の四角の枠やめろ」。白い箱も枠も付けない。
   写真があって、そのすぐ下に文字が乗っているだけにする */
.acard.big,.acard.sq,.acard.flat{height:auto!important;min-height:0!important;
 aspect-ratio:auto!important;background:none!important;border:none!important;
 box-shadow:none!important;overflow:visible!important;display:flex;flex-direction:column}
.acard.big>img,.acard.sq>img,.acard.flat>img{position:relative!important;inset:auto!important;
 width:100%;height:auto!important;object-fit:cover;border-radius:var(--r-card)}
.acard.big>img{aspect-ratio:21/9}
.acard.sq>img,.acard.flat>img{aspect-ratio:4/3}
.acard.big:hover>img,.acard.sq:hover>img,.acard.flat:hover>img{transform:none}
.acard .cover{position:absolute;inset:0;z-index:1}
.acard.big .in,.acard.sq .in,.acard.flat .in{position:relative!important;inset:auto!important;
 z-index:2;width:auto!important;max-width:none!important;padding:14px 2px 0!important;
 color:var(--ink-900)!important;background:none;box-shadow:none;
 -webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none}
.acard.big .in *,.acard.sq .in *,.acard.flat .in *{text-shadow:none!important}
.acard.big h3,.acard.sq h3,.acard.flat h3{color:var(--ink-900)!important}
.acard.big .en,.acard.sq .en{color:var(--ink-300)!important}
.acard.big p,.acard.sq p,.acard.flat p{color:var(--ink-600)!important;max-width:none}
.acard.big .bt .n,.acard.sq .bt .n{color:var(--ink-900)!important}
.acard.big .bt .n span,.acard.sq .bt .n span{color:var(--ink-500)!important}
.acard.flat .n{color:var(--brand-text)!important}
.acard.big .anote,.acard.sq .anote{color:var(--ink-500)!important}
.acard.big .amore,.acard.sq .amore{color:var(--brand-text)!important}
.acard .chs .ch{color:var(--ink-700)!important;background:#F7F3EE!important;
 border-color:var(--line-1)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.acard .chs .ch:hover{background:#EFE9E1!important}
.acard .chs .ch b{color:var(--ink-900)!important}
/* 「台灣人最多的選擇」は文字の並びの先頭に置く（写真の上に浮かせると
   見出しに重なる）*/
.acard.big .tag{position:static;align-self:flex-start;margin-bottom:2px}

/* 沖繩の帯も写真＋その下の文字に。
   2026-08-26：本家にある沖繩の風景写真は最大 800px しか無く、全幅（1920px）に
   引き伸ばすとぼやける（Iku さん「この写真解像度悪すぎ」）。
   帯を本文幅に収めて、引き伸ばし量を減らす。
   高解像度の差し替え素材が入ったら全幅に戻してよい。 */
.oki{position:relative;background:none;max-width:var(--maxw);margin:0 auto;
 padding-left:var(--gut);padding-right:var(--gut)}
.oki>img{position:relative!important;inset:auto!important;width:100%;height:auto!important;
 aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-card)}
.oki .in{position:relative!important;inset:auto!important;width:auto!important;
 max-width:none!important;display:block;padding:22px 0 30px!important;
 background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.oki .in *{text-shadow:none!important}
.oki .in .eyebrow{color:var(--gold)!important}
.oki .in h2{color:var(--ink-900)!important}
.oki .in p{color:var(--ink-600)!important}

/* ── スマホ実機（390〜430px）での詰め ────────────────────────
   このブロックは必ずファイルの最後に置く。dz.css は素の定義（.cpnbar など）が
   メディアクエリより後ろにあるため、途中に書くと後ろの定義に負ける。
   実機で見たら、ヘッダー・クーポン帯・ヒーローのコピーだけで 1 画面が終わり、
   写真も検索バーも見えていなかった。 */
@media(max-width:700px){
  /* ヘッダー（index は .hd / .hd-logo / .hd-r）*/
  .hd{padding:6px var(--gut);gap:10px}
  .hd-logo img,.logo img{height:42px}
  .hd-r .btn-line,.btn-line{font-size:11.5px;padding:8px 12px;gap:5px;min-height:34px}
  .hd-r .btn-line:before,.btn-line:before{width:8px;height:8px}

  /* クーポン帯：2 行 100px あった */
  .cpnbar{padding:8px var(--gut)}
  .cpnbar .in{gap:5px 8px}
  .cpnbar .c1{font-size:11.5px}
  .cpnbar code{font-size:12px;padding:3px 7px;letter-spacing:.04em}
  .cpnbar .c2{font-size:12.5px}
  .cpnbar .c3{display:none}   /* 「（優惠券代碼欄に入力）」は下のクーポン節に同じ説明がある */

  /* ヒーロー：スマホでは写真の上に文章を載せない。
     文字を小さくしても、コピーが 4 行あると写真が 1 ミリも見えない。
     写真を上、文章はその下の白地に置く（追加指示 10 §0 と同じ考え方）。*/
  .hero{height:auto;overflow:visible;background:none}
  .hero .sl{position:relative;inset:auto;height:0;overflow:hidden;opacity:1;transition:none}
  .hero .sl.on{height:250px}
  .hero .sl img{height:250px}
  .hero-scrim{display:none}

  /* 見出しは写真の上に重ねる（短いので写真を潰さない）、
     長い本文は写真の下の白地へ。写真が 1 ミリも見えない状態を作らない。*/
  .hero-in{position:static;inset:auto;max-width:none;padding:0;gap:0;
   color:var(--ink-900);pointer-events:auto;display:block}
  /* スマホも PC と同じ「写真＋その下に文字」。重ねる指定は使わない */
  .hero .sl.on{height:250px}
  .hero .sl.on:after{content:none}
  .hero-in{padding:18px var(--gut) 0!important;gap:8px!important}
  .hero-in .eyebrow{display:none}
  .hero-in h1{font-size:23px!important;line-height:1.35}
  .hero-in p .l1{display:none}
  .hero-in p .l3{display:block;font-size:13px;line-height:1.7}
  /* 1 行の文にドットが重なるので、写真の右下に小さく置く */
  .hero-dots{top:auto;bottom:8px;left:auto;right:var(--gut);transform:none;gap:3px}
  .hero-dots i{width:20px;height:20px}
  .hero-nav{display:none}

  /* 検索：Trip.com の実機は「目的地／日付／人數」が最初から開いていて 3 行。
     畳んでタップさせると 1 手増えるので、開いたまま詰める。
     地區は 1 行、日期 2 つと人數は 1 行に並べる（4 段 320px → 2 段 150px）。*/
  .srchwrap{margin-top:12px;padding:0 var(--gut)}
  .srchmini{display:none}
  .srchwrap .srch{display:grid;padding:6px;gap:0;
   grid-template-columns:repeat(2,minmax(0,1fr));border-radius:12px}
  .srch label{min-height:46px;padding:4px 12px;border-right:1px solid var(--line-3);
   border-bottom:1px solid var(--line-3)}
  .srch label.n2{border-right:1px solid var(--line-3)}
  .srch label.n4{border-right:none}
  .srch label.n1{grid-column:1/-1;border-right:none;border-bottom:none}
  .srch .k{font-size:10.5px}
  .srch select,.srch input{font-size:13.5px}
  .srch>.btn{grid-column:1/-1;margin:6px 0 0;padding:13px 20px;font-size:14.5px}
  /* ── スマホの並び順 ────────────────────────────────
     Trip.com の実機は 1 画面目が ヘッダー→検索→すぐカード。
     うちは物件カードの写真が y=7080（8 画面下）にあった。
     DOM は触らず（PC と SEO はそのまま）、order だけ入れ替える。*/
  .shell{display:flex;flex-direction:column}
  /* flex の子は min-width:auto なので、中身が広いとコンテナを押し広げる。
     0 にして初めて、中の overflow-x:auto が効く（これが無いと横スクロールが出る）*/
  .shell>*{order:50;min-width:0;width:100%;max-width:100%}
  /* 見出しと「查看全部 →」が 1 行に収まらず、セクションを押し広げていた */
  .sec-head{flex-wrap:wrap;gap:6px 12px}
  /* 節の導入文（飾りの一文）はスマホでは出さない。
     見出しと「查看全部 →」だけで意味は通る。
     ただし見出し脇の <small>（人數・設備は官方記載が基準、という但し書き）は残す。*/
  .lead-x{display:none}
  .sec-head .h-sec small{font-size:12px;line-height:1.7;color:var(--ink-500)}
  .sec-head .h-sec small{display:block;white-space:normal}
  .sec-more{margin-left:0}
  .shell>.hd{order:0}          /* ヘッダーとクーポン帯は先頭のまま */
  .shell>.cpnbar{order:0}
  .shell>#hero{order:1}
  .shell>.srchwrap{order:2}
  .shell>#picks{order:3}      /* 推薦・人氣的包棟住宿（写真のカード）*/
  .shell>#area{order:4}       /* 依地區 */
  .shell>#theme{order:5}      /* 依需求（テーマ）*/
  .shell>#okinawa{order:6}
  .shell>#stay{order:7}       /* 這次想怎麼旅行 */
  .shell>.trustwrap{order:8}
  .shell>.why{order:9}
  .shell>#story{order:10}
  .shell>#faq6{order:11}
  .shell>#coupon{order:12}
  .shell>#line{order:13}
  .shell>.ft{order:99}
  /* 上に来たセクションの余白を詰める */
  .shell>#picks{padding-top:26px!important}
  .shell>#area{padding-top:30px!important}
  .vgrid{gap:14px}

  /* ── 横スクロールのカード列 ──────────────────────────
     縦に 8 枚積むと 4,000px スクロールになる。
     Agoda・Trip.com と同じく、横に流して 1 画面に複数見えるようにする。*/
  .vgrid,.tpanels,.trips,.acols{
   display:flex!important;grid-template-columns:none!important;
   overflow-x:auto;scroll-snap-type:x proximity;gap:12px;
   max-width:100%;min-width:0;padding-bottom:6px;
   -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .vgrid::-webkit-scrollbar,.tpanels::-webkit-scrollbar,
  .trips::-webkit-scrollbar,.acols::-webkit-scrollbar{display:none}
  .vgrid>*,.trips>*,.acols>*{flex:0 0 78%;scroll-snap-align:start}
  .tpanels>*{flex:0 0 66%;scroll-snap-align:start}
  /* テーマパネル：スマホでは幅が 66%（約 257px）になって説明文が 4 行に増え、
     文字の塊が下地の暗い所（56% 以降）より上にはみ出していた。
     実測で見出し 比 2.30・本文 比 1.00（要 3.0／4.5・390px 幅）。
     写真を暗くするのではなく、文字が乗る帯を早めに始める */
  .acard.flat{height:288px}
  .acard.flat .sc{background:linear-gradient(180deg,rgba(6,26,38,0) 0%,
   rgba(6,26,38,.20) 12%,rgba(6,26,38,.68) 30%,rgba(6,26,38,.90) 50%,
   rgba(6,26,38,.96) 100%)!important}
  .acard.flat .in{padding:16px 16px 14px}
  .acard.flat{height:200px}
  /* 横に流すと 4:3 の器が高くなりすぎるので写真だけ詰める。
     カード自体に aspect-ratio を残すと、下の文字が切れて消える */
  .acard.sq{aspect-ratio:auto!important}
  .acard.sq img{aspect-ratio:16/11}
  .acard.sq .in{padding:12px 14px 14px}
  .acard.sq h3{font-size:19px}
  .acard.sq p{display:none}

}

/* ── 価格表示（2026-08-27）───────────────────────────────
   Iku さん「トップにも金額があった方がどれくらい安いかが一瞬でわかる」
   「しかもその横に台湾元も入れたりさ」。
   台湾人が見る站なので NT$ を主・円を根拠として小さく併記する。
   数値は 489ban の「1棟建物費用（2位客人利用時）」。請求通貨は円なので
   NT$ には必ず「參考匯率」と添える（scripts/apply-prices.py が書く）。*/
.pfrom{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-500);line-height:1.5}
.pfrom b{color:var(--brand);font-size:16px;font-weight:800;letter-spacing:.01em;
 font-variant-numeric:tabular-nums}
.pfrom .pj{display:block;font-size:11px;color:var(--ink-300);margin-top:1px;
 font-variant-numeric:tabular-nums}
.pfrom.big b{font-size:24px}
.pfrom.big{font-size:13.5px}
/* 2026-08-28 円が先・台湾元も同じ大きさで併記（Iku さん選択）*/
.pfrom .ptw{color:var(--brand);font-size:13.5px;font-weight:700;margin-left:8px;
 font-variant-numeric:tabular-nums;white-space:nowrap}
.pfrom.big .ptw{font-size:17px;margin-left:12px}