/* hidden 属性は常に非表示（.seg-item の display:flex に負けないよう） */
[hidden] { display: none !important; }

:root {
  /* 単一アクセント（Google 風ブルー） */
  --accent: #1a73e8;
  --accent-700: #1557b0;
  --accent-50: #e8f0fe;
  --accent-100: #d2e3fc;

  /* swap ボタンの上下矢印アイコン (SVG mask) */
  --swap-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4v13'/><path d='M4 7l3-3 3 3'/><path d='M17 20V7'/><path d='M20 17l-3 3-3-3'/></svg>");

  /* 価格のみグリーン */
  --price: #137a52;
  --price-700: #0f5c3e;

  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f1f4f7;
  --line: #dfe4e9;
  --line-2: #ebeff2;

  /* コントラスト要件: 全テキスト AA(4.5:1) 以上 */
  --text: #1f2933;
  --text-2: #47525d;
  --text-3: #5f6b75; /* 補助テキスト用・白地で約4.7:1 */

  --radius: 8px;   /* Google Flights 準拠: カード・検索ボックスは 8px */
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(60,64,67,.10), 0 4px 12px rgba(60,64,67,.08);
  --shadow-lg: 0 8px 28px rgba(60,64,67,.16);
  --maxw: 1180px;
  --font: "Roboto","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,"Segoe UI",sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body > iframe { max-width: 100% !important; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; min-height: 100vh; padding-bottom: 56px;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Top bar (minimal / white) ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; color: var(--text); }
.brand-link { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; cursor: pointer; }
.brand-link:hover .brand-name { opacity: .8; }
.brand-mark { font-size: 20px; }
.brand-name { line-height: 1.1; }
.brand-name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .04em; }

/* ---------- Search card ---------- */
.search-card {
  width: min(100%, var(--maxw)); margin: 22px auto 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px; position: relative; z-index: 5;
}
.tabs { display: flex; gap: 4px; margin: 2px 4px 8px; }
.tab {
  background: transparent; border: none; color: var(--text-2);
  padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600;
}
.tab:hover { background: var(--surface-2); }
.tab.active { background: var(--accent-50); color: var(--accent-700); }

.triprow { margin: 0 2px 10px; }
/* 往復/片道（Google Flights の trip type セグメント: 薄いコンテナに白いアクティブピル） */
.trip-seg { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius-pill); padding: 2px; }
.tt {
  border: none; background: transparent; color: var(--text-2); padding: 7px 18px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; transition: background .12s, color .12s, box-shadow .12s;
}
.tt:hover { color: var(--text); }
.tt.active { background: #fff; color: var(--accent-700); box-shadow: 0 1px 3px rgba(60,64,67,.18); }

.seg { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: visible; transition: border-color .15s, box-shadow .15s; } /* overflow は visible（港サジェストのパネルがクリップされないように。角丸は先頭/末尾アイテムで補う） */
.seg:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* Google Flights 風: フォーカスで青枠 */
.seg-item {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--surface); padding: 12px 16px; position: relative;
  flex: 1 1 200px; min-width: 150px; cursor: text; border-right: 1px solid var(--line);
}
.seg-item:last-of-type { border-right: none; }
.seg-item:hover { background: var(--surface-2); }
/* 角丸の補完（.seg の overflow: visible 化でサジェストをクリップしない代わりに、角に触れるアイテムへ丸みを付与） */
.seg > :first-child { border-top-left-radius: calc(var(--radius-sm) - 1px); border-bottom-left-radius: calc(var(--radius-sm) - 1px); }
.seg > :last-child { border-top-right-radius: calc(var(--radius-sm) - 1px); border-bottom-right-radius: calc(var(--radius-sm) - 1px); }
.seg-item.seg-date, .seg-item.seg-toggle { flex: 1 1 150px; }
.seg-ico { display: none; } /* ミニマル化: アイコン絵文字は非表示、ラベルで十分 */
.seg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.seg-label { font-size: 11px; color: var(--text-3); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.seg-input { border: none; background: transparent; font-size: 16px; font-weight: 600; color: var(--text);
  width: 100%; padding: 0; outline: none; }
.seg-toggle .seg-input { cursor: pointer; }
.seg-item:focus-within { background: var(--accent-50); }

.swap {
  flex: 0 0 auto; align-self: center; border: 1px solid var(--line); background: #fff;
  width: 38px; height: 38px; border-radius: 50%; color: var(--accent); font-size: 0;
  display: grid; place-items: center; margin: 0 -6px; position: relative; z-index: 6;
  overflow: hidden; transition: background .15s, box-shadow .15s; cursor: pointer;
}
.swap::before {
  content: ""; width: 16px; height: 16px;
  background: var(--accent);
  -webkit-mask: var(--swap-icon) center/contain no-repeat;
  mask: var(--swap-icon) center/contain no-repeat;
  transition: transform .25s ease;
}
.swap:hover { background: var(--accent-50); box-shadow: 0 1px 6px rgba(26,115,232,.25); }
.swap:active { transform: scale(.92); }
/* クリックで180°回転して保持（Google Flights と同じ。ホバー回転は廃止） */
.swap.rotated::before { transform: rotate(180deg); }

/* 港の入れ替えクロスオーバー（Google Flights 風: 上から下・下から上にすれ違う） */
@keyframes swOutDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120%); opacity: 0; } }
@keyframes swOutUp   { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120%); opacity: 0; } }
@keyframes swInUp    { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes swInDown  { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.seg-from.sw-out .seg-input, .seg-from.sw-in .seg-input,
.seg-to.sw-out .seg-input,   .seg-to.sw-in .seg-input {
  will-change: transform, opacity;
}
.seg-from.sw-out .seg-input { animation: swOutDown .14s ease-in forwards; } /* 出発港は下へ抜ける */
.seg-to.sw-out .seg-input   { animation: swOutUp   .14s ease-in forwards; } /* 到着港は上へ抜ける */
.seg-from.sw-in .seg-input  { animation: swInUp    .16s ease-out; }        /* 下から新しい出発港が入る */
.seg-to.sw-in .seg-input    { animation: swInDown  .16s ease-out; }        /* 上から新しい到着港が入る */
.search-btn {
  flex: 0 0 auto; align-self: center; background: var(--accent); color: #fff; border: none; padding: 12px 26px;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 700;
  transition: background .15s, transform .05s;
}
.search-btn:hover { background: var(--accent-700); }
.search-btn:active { transform: translateY(1px); }
.search-btn:disabled { background: #c5c9cf; color: #fff; cursor: not-allowed; opacity: .7; }

/* autocomplete */
.ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  overflow: hidden; z-index: 20; display: none;
}
.ac.open { display: block; max-height: 280px; overflow-y: auto; }
.ac-item { padding: 10px 14px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-item small { color: var(--text-3); }
.ac-code { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--accent-700); background: var(--accent-50); border: 1px solid var(--accent-100); border-radius: 6px; padding: 2px 6px; }
.ac-item:hover, .ac-item.active { background: var(--accent-50); }
.ac-connected { background: var(--accent-50); font-weight: 600; }
.ac-badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent-700); background: #fff; border: 1px solid var(--accent-100); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.ac-near { border-left: 3px solid var(--accent-500); }
.ac-badge.near { color: #fff; background: var(--accent-600); border-color: var(--accent-600); }

/* 人数セグメント（クリックでトラベラーメニューを開く。Google Flights の旅行者欄風） */
.seg-toggle { cursor: pointer; text-align: left; border: none; border-right: 1px solid var(--line); font-size: inherit; }
.seg-toggle:hover { background: var(--surface-2); }
.seg-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 12px; pointer-events: none; }

/* トラベラーメニュー（人数と車両を1か所に集約したポップオーバー） */

.traveler-pop {
  position: fixed; z-index: 60; width: 260px; max-width: calc(100vw - 16px); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 4px 14px;
}
.traveler-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.traveler-row + .traveler-row { border-top: 1px solid var(--line-2); }
.traveler-label { font-size: 14px; color: var(--text); font-weight: 600; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  font-size: 16px; color: var(--accent); }
.stepper button:hover { background: var(--accent-50); }
.stepper span { min-width: 20px; text-align: center; font-weight: 700; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; }
.slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff;
  border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* explore */
.explore-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.explore-row .seg { border: 1px solid var(--line); }
.explore-row .seg-item { flex: 1 1 240px; border-right: none; }
.region-toggle { display: flex; gap: 4px; flex-wrap: wrap; }
.region-toggle .rt { border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  padding: 8px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
.region-toggle .rt.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.explore-hint { color: var(--text-2); font-size: 13px; margin: 10px 2px 0; }

/* ---------- Date strip（Google Flights のカレンダー風: フラット・枠なし） ---------- */
.datestrip { width: min(100%, var(--maxw)); margin: 14px auto 0; display: flex; gap: 2px; overflow-x: auto;
  padding: 2px; scrollbar-width: thin; }
.daypill { flex: 0 0 auto; min-width: 54px; text-align: center; border: none; background: transparent;
  border-radius: var(--radius-sm); padding: 8px 6px; transition: background .12s; }
.daypill:hover { background: var(--surface-2); }
.daypill.active { background: var(--accent-50); }
.daypill .dp-dow { font-size: 11px; color: var(--text-3); }
.daypill.active .dp-dow { color: var(--accent-700); font-weight: 700; }
.daypill .dp-date { font-size: 14px; font-weight: 600; color: var(--text); }
.daypill.active .dp-date { color: var(--accent-700); }
.daypill .dp-price { font-size: 11px; color: var(--text-3); font-weight: 500; margin-top: 2px; }
.daypill.active .dp-price { color: var(--price-700); font-weight: 700; }
.daypill .dp-cap { font-size: 10px; font-weight: 700; margin-top: 2px; }
.daypill.active .dp-cap { color: var(--accent-700); }
/* 空席待ち除外フィルタで除外される日（減光＋「除外」バッジ） */
.daypill.dp-x { opacity: .45; }
.daypill.dp-x .dp-date { text-decoration: line-through; }
.daypill .dp-x-avail { color: var(--text-3); font-weight: 600; }
/* 往復時の復路ピル（薄緑＋復路キャプション） */
.daypill.ret { background: #e6f4ea; }
.daypill.ret .dp-dow, .daypill.ret .dp-date { color: #137333; }
.daypill.ret .dp-price { color: var(--text-3); }
.daypill.ret .dp-cap { color: #137333; }

/* ---------- Layout ---------- */
.layout { width: min(100%, var(--maxw)); margin: 18px auto 0; display: flex; gap: 18px; align-items: flex-start; flex-wrap: nowrap; }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  width: 248px; flex: 0 0 248px; position: sticky; top: 14px; }
.results { flex: 1 1 auto; min-width: 0; }
.f-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.f-group { border-top: 1px solid var(--line-2); padding: 10px 0; }
.f-group summary { font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; display: flex; align-items: center; }
.f-group summary::-webkit-details-marker { display: none; }
.f-group summary::before { content: "▾"; margin-right: 8px; color: var(--text-3); transition: transform .15s; }
.f-group:not([open]) summary::before { transform: rotate(-90deg); }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; color: var(--text-2); cursor: pointer; }
.chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.ops { display: flex; flex-direction: column; gap: 2px; }
.op { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; color: var(--text-2); cursor: pointer; }
.op input { accent-color: var(--accent); }
.timeopts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.range-row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.range-row input { width: 100%; accent-color: var(--accent); }

/* results */
.results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.rh-title { font-size: 17px; font-weight: 700; }
.rh-title small { color: var(--text-3); font-weight: 500; font-size: 13px; margin-left: 6px; }
.rh-hint { font-size: 13px; color: var(--text-3); margin: 0 0 12px; padding: 8px 12px; background: var(--accent-50); border-radius: var(--radius-sm); }
.rh-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ghost-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ghost-btn:hover { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.sort select { padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--text); }

.result-list { display: flex; flex-direction: column; gap: 10px; }
.leg { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; transition: border-color .15s; }
.leg:hover { border-color: var(--accent-100); }
.leg-main { min-width: 0; flex: 1 1 320px; }
.leg-op { font-size: 12px; color: var(--text-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.leg-op .tag { background: var(--accent-50); color: var(--accent-700); border-radius: 6px; padding: 1px 7px; font-weight: 600; }
.leg-times { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.leg-times .t { font-size: clamp(18px, 2.4vw, 21px); font-weight: 700; }
.leg-times .t small { font-size: 12px; color: var(--text-3); font-weight: 500; }
.leg-times .arrow { flex: 1 1 40px; height: 2px; min-width: 30px; background: var(--line); position: relative; }
.leg-times .arrow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.leg-meta { font-size: 13px; color: var(--text-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* タグはニュートラルグレーで統一（Google Flights は色数を絞る） */
.chip { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.chip.night, .chip.stop0, .chip.stop1, .chip.nextday { background: var(--surface-2); color: var(--text-2); border-color: var(--line-2); }
/* 空席バッジ（availability.json の実空席を色分け: 満席=赤 / 残りわずか=黄 / 空席あり=緑） */
.chip.avail-full { background: #fdecea; border-color: #f5b5ac; color: #b3261e; font-weight: 700; }
.chip.avail-few { background: #fef7e0; border-color: #f2dc8d; color: #8a6200; font-weight: 700; }
.chip.avail-ok { background: #e6f4ea; border-color: #b7dfc0; color: #137333; font-weight: 700; }
.chip.avail-wait { background: #e8f0fe; border-color: #b9d0f5; color: #1a56b3; font-weight: 700; }
/* 日付ストリップの空席ドット */
.dp-avail { font-size: 10px; font-weight: 700; margin-top: 2px; }
.dp-avail.avail-full { color: #b3261e; }
.dp-avail.avail-few { color: #8a6200; }
.dp-avail.avail-ok { color: #137333; }
.dp-avail.avail-wait { color: #1a56b3; }
.leg-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }

/* 到着港未指定時の「行き先を探す」カード（Google Flights Explore 風） */
.dest-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; }
.dest-card:hover { box-shadow: 0 2px 10px rgba(26,115,232,.14); border-color: var(--accent); transform: translateY(-1px); }
.dest-main { flex: 1 1 auto; min-width: 0; }
.dest-name { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dest-name small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.dest-meta { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.dest-price { flex: 0 0 auto; font-size: 20px; font-weight: 800; color: var(--text); text-align: right; }
.dest-price small { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); }
.dest-arrow { flex: 0 0 auto; width: 8px; height: 8px; border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3); transform: rotate(45deg); }
/* 価格は黒字（Google Flights は価格を黒で表示し、最安のみ緑タグ） */
.price { font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; color: var(--text); white-space: nowrap; }
.price small { font-size: 12px; font-weight: 500; color: var(--text-3); display: block; }
.price-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #137333; background: #e6f4ea; border-radius: 4px; padding: 2px 7px; margin-right: 6px; vertical-align: middle; }
.choose { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 18px;
  font-size: 14px; font-weight: 700; transition: background .15s, transform .05s; }
.choose:hover { background: var(--accent-700); }
.choose:active { transform: translateY(1px); }
.choose.chosen { background: var(--accent-700); }
.leg-sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-100); }

/* 往復セクション（見出しはプレーンテキスト: Google Flights は装飾を抑える） */
.rt-section { margin-bottom: 18px; }
.rt-h { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 0 0 8px; padding: 0 2px; }
.rt-empty { color: var(--text-3); font-size: 13px; padding: 8px 12px; }

/* まとめて予約バー */
.book-bar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--accent-100); border-radius: var(--radius);
  box-shadow: 0 -4px 20px rgba(60,64,67,.12); }
.book-bar .bb-hint { color: var(--text-2); font-size: 14px; }
.bb-info { min-width: 0; }
.bb-route { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-total { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.bb-dates { font-size: 12px; color: var(--text-2); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.bb-out::before { content: "▸ "; color: var(--accent); }
.bb-ret::before { content: "◀ "; color: var(--accent); }
.bb-total b { font-size: 18px; color: var(--text); }
.bb-btn { flex: 0 0 auto; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px 22px; font-size: 15px; font-weight: 700; transition: background .15s; }
.bb-btn:hover { background: var(--accent-700); }
@media (max-width: 560px) {
  .book-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .bb-btn { width: 100%; }
}

/* AdSense は Auto Ads（head のローダースクリプト）で配信。手動ユニット追加時はここにスタイルを復活させること */

/* booking memo（予約メモ・Google Flights の選択内容確認風モーダル） */
.memo-overlay { position: fixed; inset: 0; background: rgba(32,33,36,.45); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.memo-card { background: #fff; border-radius: 12px; max-width: 440px; width: 100%;
  box-shadow: 0 12px 40px rgba(60,64,67,.3); padding: 18px; max-height: 82vh; overflow: auto; }
.memo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.memo-title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.memo-hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 12px; line-height: 1.6; }
.memo-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.memo-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.mr-route { font-size: 14px; font-weight: 600; color: var(--text-1); }
.mr-route small { font-weight: 400; color: var(--accent); margin-left: 6px; }
.mr-meta { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.mr-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; display: flex; justify-content: space-between; gap: 8px; }
.memo-actions { display: flex; gap: 8px; }
.memo-actions .ghost-btn { flex: 1; }
.memo-actions .book-btn { flex: 2; }

/* explore map（行き先探索の簡易世界地図） */
.explore-map { background: linear-gradient(180deg, #eaf4fb, #dcecf7); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.explore-map svg { display: block; width: 100%; height: auto; }
.explore-map .grid { stroke: #ffffff; stroke-width: 1; opacity: .75; }
.explore-map .map-link { stroke: #8fbcdf; stroke-width: 1; opacity: .55; }
.explore-map .map-origin { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.explore-map .map-label { font-size: 13px; font-weight: 700; fill: #0b3d5c; }
.explore-map .map-dest { cursor: pointer; }
.explore-map .map-dest circle { fill: var(--price); stroke: #fff; stroke-width: 1.5; opacity: .95; transition: fill .12s; }
.explore-map .map-dest:hover circle, .explore-map .map-dest:focus circle { fill: var(--accent); }

/* 表示切替タブ（一覧 / 日程 / 料金グラフ） */
.vtabs { display: flex; gap: 4px; margin: 12px 0 0; }
.vtab {
  background: transparent; border: 1px solid var(--line); color: var(--text-2);
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  transition: background .12s, color .12s;
}
.vtab:hover { background: var(--surface-2); }
.vtab.active { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }

/* 日程グリッド（Google Flights の「日程」タブ風） */
.price-view { margin-top: 14px; }
.grid-bestline {
  display: inline-block; padding: 7px 14px; margin-bottom: 10px;
  background: #e6f4ea; color: #137333; border: 1px solid #ceead6; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
}
.grid-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.grid-table { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.grid-table th { font-weight: 600; color: var(--text-3); white-space: nowrap; }
.grid-table .g-corner, .grid-table .g-row { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.grid-table .g-col, .grid-table .g-row { text-align: left; padding: 2px 4px; }
.g-w { font-size: 10px; color: var(--text-3); font-weight: 500; }
.g-cell {
  display: block; min-width: 62px; width: 100%; padding: 6px 4px 4px;
  border: 1px solid rgba(19,122,82,.18); border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--text); text-align: center;
  transition: transform .05s, box-shadow .12s;
}
.g-cell:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--accent-100); transform: translateY(-1px); }
.g-cell.g-na { background: var(--surface-2) !important; color: var(--text-3); border-color: var(--line-2); cursor: default; }
.g-cell.g-best { border: 2px solid var(--price); background: rgba(19,122,82,.10) !important; padding-top: 5px; }
.g-badge {
  display: block; margin: 3px -2px -4px; padding: 2px 0;
  background: var(--price); color: #fff; border-radius: 0 0 4px 4px;
  font-size: 10px; font-weight: 700;
}
.grid-hint { font-size: 12px; color: var(--text-3); margin-top: 10px; line-height: 1.6; }

/* 料金グラフ（Google Flights の「料金グラフ」タブ風） */
.chart-track { margin-top: 16px; }
.chart-track h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-2); font-weight: 700; }
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 6px 2px 0; border-bottom: 1px solid var(--line); }
.bar-wrap { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.bar {
  width: 100%; min-height: 2px; border: none; border-radius: 3px 3px 0 0;
  background: var(--accent-100); transition: background .12s;
}
.bar:hover { background: var(--accent); }
.bar.bar-best { background: var(--price); }
.bar-val {
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--price-700); white-space: nowrap;
  background: #fff; padding: 1px 4px; border-radius: 4px; box-shadow: 0 1px 2px rgba(60,64,67,.18);
}
.chart-axis { display: flex; margin-top: 4px; }
.chart-axis span { flex: 1 1 0; font-size: 10px; color: var(--text-3); white-space: nowrap; overflow: hidden; }

.no-results { text-align: center; padding: 48px 16px; color: var(--text-2); }
.no-results p { font-size: 15px; }

/* empty state (初回アクセス時・Google Flights 風) */
.empty-state { text-align: center; padding: clamp(40px, 10vh, 96px) 16px; }
.es-icon { font-size: 44px; line-height: 1; margin-bottom: 18px; opacity: .55; }
.es-title { font-size: 20px; font-weight: 600; color: var(--text-1); margin: 0 0 8px; }
.es-sub { font-size: 14px; color: var(--text-2); margin: 0 0 26px; }
.es-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; margin: 0 auto; }
.chip-port { border: 1px solid var(--line); background: #fff; color: var(--text-1); font-size: 13px;
  border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.chip-port:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 1px 3px rgba(60,64,67,.12); }
.chip-port:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* summary sheet */
.summary { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff;
  box-shadow: 0 -10px 40px rgba(60,64,67,.18); border-top: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 14px clamp(16px,4vw,40px); transform: translateY(110%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.summary.show { transform: translateY(0); }
.summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.summary-route { font-size: 17px; font-weight: 800; }
.summary-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.icon-btn { background: none; border: none; font-size: 18px; color: var(--text-3); }
.icon-btn:hover { color: var(--text); }
.summary-body { margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.sum-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; flex: 1; min-width: 200px; }
.sum-card h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.cabin { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.cabin:first-of-type { border-top: none; }
.cabin .cn { color: var(--text-2); }
.cabin .cp { font-weight: 700; }
.cabin.sel { background: var(--accent-50); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.sum-total { min-width: 200px; }
.sum-total .tot { font-size: 26px; font-weight: 800; color: var(--price-700); }
.sum-total small { color: var(--text-3); font-size: 12px; }
.book-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px 20px;
  font-weight: 700; font-size: 15px; align-self: stretch; }
.book-btn:hover { background: var(--accent-700); }
.sum-note { width: 100%; font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* footer */
.site-foot { width: min(100%, var(--maxw)); margin: 36px auto 0; padding: 0 16px; color: var(--text-3); font-size: 12px; line-height: 1.6; }
.site-foot a { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .filters { width: 100%; flex: 1 1 auto; position: static; }
  .results { width: 100%; }
  .seg { flex-wrap: wrap; }
  .seg-item { border-right: none; border-bottom: 1px solid var(--line); }
  .seg-item:last-of-type { border-bottom: none; }
}
@media (max-width: 560px) {
  /* Google Flights 風: 出発/到着を横2列（間に円形入替）、日付・人数は下の行、検索は全幅 */
  .seg { overflow: visible; display: grid;
    grid-template-columns: 1fr 44px 1fr;
    grid-template-areas:
      "from swap to"
      "date date date"
      "dateRet dateRet dateRet"
      "pax pax pax"
      "search search search"; }
  .seg-item { flex: none; min-width: 0; border-right: none; border-bottom: 1px solid var(--line); }
  .seg-item:first-child { grid-area: from; border-right: 1px solid var(--line); }
  .seg-item:nth-child(3) { grid-area: to; }
  .seg-item.seg-date { grid-area: date; border-bottom: 1px solid var(--line); }
  .seg-item.seg-date-ret { grid-area: dateRet; border-bottom: 1px solid var(--line); } /* 出発日と同じセルに重ならないよう詳細度を上げる */
  .seg-item.seg-toggle { grid-area: pax; border-left: 1px solid var(--line); }
  .search-btn { grid-area: search; flex: none; }
  /* 入替ボタン: 横並びの間に円形で中央配置 */
  .swap { grid-area: swap; flex: none; width: 44px; height: 44px; border-radius: 50%; z-index: 6; align-self: center; justify-self: center;
    box-shadow: 0 1px 4px rgba(60,64,67,.18); background: #fff; }
  .swap:hover { background: var(--accent-50); }
  .leg-side { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
}