/* yadoly デザインCSS — モバイルファースト / シンプル（参考: smwr.jp のトーン） */
:root {
  --ink: #1b2430;      /* 基本文字色（濃紺寄りの黒） */
  --sub: #8a929c;      /* 補助文字 */
  --line: #e8eaed;     /* 罫線 */
  --bg: #eef0f3;       /* デスクトップ時の左右余白 */
  --paper: #ffffff;
  --must: #a8493f;     /* 譲れない */
  --must-bg: #f7e7e4;
  --want: #3d6494;     /* あれば嬉しい */
  --want-bg: #e4edf7;
  --ok: #3d8464;
  --field-bg: #f5f6f8;
  --brand: #1ba69b;       /* ブランドカラー（ティール） */
  --brand-dark: #12857c;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  margin: 0 auto;
  max-width: 480px;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 14px;
  box-shadow: 0 0 24px rgba(0, 0, 0, .06);
}

/* ヘッダー */
header {
  display: block;
  text-align: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
header .logo { font-family: 'Comfortaa', -apple-system, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .04em; }
header .logo a { color: var(--brand); text-decoration: none; }
header .tagline {
  display: block;
  font-size: 10px;
  color: var(--sub);
  letter-spacing: .08em;
  margin-top: 2px;
}

main { padding: 8px 20px 56px; }
main a { color: var(--ink); }
h1 { font-size: 18px; margin: 20px 0 8px; letter-spacing: .04em; }
h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
  border: none;
  padding: 0;
  margin: 28px 0 4px;
}

/* 枠線ボックスは廃止し、余白と罫線で区切る */
section.box {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 12px;
}

/* 入力 */
label.field { display: inline-block; margin: 0 12px 10px 0; font-size: 13px; color: var(--ink); }
select, input[type="date"], input[type="number"], input[type="text"] {
  font-size: 15px;
  padding: 9px 12px;
  margin-left: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--ink);
}
input[type="text"] { width: 100%; max-width: 260px; }

/* 条件行と3値トグル */
.cond-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.cond-row:last-child { border-bottom: none; }
.seg {
  display: inline-flex;
  background: var(--field-bg);
  border: none;
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.seg button {
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--sub);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button.active-none { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.seg button.active-want { background: #fff; color: var(--want); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.seg button.active-must { background: #fff; color: var(--must); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* タグ */
.tag {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 2px 4px 2px 0;
  font-size: 11px;
}
.tag.must { background: var(--must-bg); color: var(--must); border: none; }
.tag.want { background: var(--want-bg); color: var(--want); border: none; }
.tag.plain { background: var(--field-bg); color: var(--sub); }

.summary { font-size: 13px; }

/* ボタン */
.btn-primary {
  display: block;
  width: 100%;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  letter-spacing: .1em;
  padding: 14px;
  border: none;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* 検索結果カード（写真を上に積むアプリ風） */
.card {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.card:hover h3 { text-decoration: underline; }
.card:last-of-type { border-bottom: none; }
.card .thumb, .thumb {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  background: #e9e6e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3afa7;
  font-size: 11px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.card h3 { margin: 0 0 2px; font-size: 16px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card .meta, .meta { font-size: 12px; color: var(--sub); }
.badge-must { color: var(--must); font-size: 12px; font-weight: 700; }
.badge-want { color: var(--want); font-size: 12px; font-weight: 700; }
.cond-marks { font-size: 12px; margin: 4px 0; }
.cond-marks .ok { color: var(--ok); }
.cond-marks .ng { color: #c2c7cd; text-decoration: line-through; }
.card .links { margin-top: 10px; font-size: 12px; }
.card .links a, .card .links span {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 4px 6px 0 0;
  color: var(--ink);
  text-decoration: none;
}

/* テーブル → 罫線だけのリスト風 */
table.plain { border-collapse: collapse; width: 100%; font-size: 13px; background: none; }
table.plain th, table.plain td {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: left;
}
table.plain th { background: none; color: var(--sub); font-weight: normal; font-size: 11px; white-space: nowrap; }

.note { font-size: 11px; color: var(--sub); }

/* 検索条件サマリーバー */
.searchbar {
  background: var(--field-bg);
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 4px;
  font-size: 12px;
  display: block;
}
.searchbar a { color: var(--ink); }
.sb-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.sb-dest { font-size: 15px; font-weight: 700; }
.sb-meta { font-size: 12px; color: var(--sub); margin-top: 2px; }
.sb-edit {
  flex-shrink: 0;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.sb-row { margin-top: 6px; }
.sb-label {
  display: block;
  font-size: 10px;
  color: var(--sub);
  margin-bottom: 1px;
}
.sb-tags {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sb-tags::-webkit-scrollbar { display: none; }
.searchbar { padding: 10px 14px; }
.searchbar .tag { font-size: 10.5px; padding: 1px 8px; margin: 1px 4px 1px 0; }

/* もっと見る（継ぎ足しページング） */
.loadmore-wrap { margin: 8px 0 24px; }
.btn-more {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-size: 14px;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}

/* 目的地オートコンプリート */
.suggest {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 280px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.suggest-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--field-bg); }
.dest-ok { display: block; color: var(--ok); font-size: 12px; margin: 6px 0 2px; }

/* トップページ: 3ステップ構成 */
.step { margin: 0 0 30px; }
.step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 8px;
}
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-title { font-size: 15px; font-weight: 700; letter-spacing: .06em; }

/* 設定画面風の行（ラベル左・入力右） */
.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.form-row:last-child { border-bottom: none; }
.form-row input[type="checkbox"] { width: 18px; height: 18px; }

/* 目的地入力（全幅） */
.dest-wrap { position: relative; }
.dest-wrap input[type="text"] { width: 100%; max-width: none; margin: 0; }
.dest-wrap .suggest { width: 100%; min-width: 0; }

/* 予算の下限〜上限 */
.budget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: 14px;
}
.budget-row select { flex: 1; margin: 0; }

/* 条件チップ（タップで3状態を循環） */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
}
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  padding: 8px 14px;
  cursor: pointer;
}
.chip.want {
  background: var(--want-bg);
  border-color: var(--want-bg);
  color: var(--want);
  font-weight: 700;
}
.chip.must {
  background: var(--must-bg);
  border-color: var(--must-bg);
  color: var(--must);
  font-weight: 700;
}
.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 8px;
  font-size: 12px;
  background: #fbf5e4;
  border-radius: 12px;
  padding: 12px 14px;
}
.legend .legend-label { width: 100%; color: #8a7346; font-size: 12px; }
.legend .chip { padding: 4px 10px; font-size: 11px; cursor: default; background: #fff; border-color: #fff; }
.legend .chip.want { background: var(--want-bg); border-color: var(--want-bg); }
.legend .chip.must { background: var(--must-bg); border-color: var(--must-bg); }
.legend .arrow { color: var(--sub); }

/* 下部固定バー（選択中の条件 + 検索ボタン） */
main.has-bottombar { padding-bottom: 140px; }
.bottombar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 10px 20px 16px;
  z-index: 30;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .05);
}
.bottombar .chips {
  white-space: nowrap;
  overflow-x: auto;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.bottombar .chips::-webkit-scrollbar { display: none; }

/* フッター */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--sub);
}
.site-footer a { color: var(--sub); margin-right: 12px; }
.site-footer .copyright { letter-spacing: .08em; }

/* 静的ページ（プライバシーポリシー等） */
.static-page h1 { font-size: 17px; }
.static-page h2 { font-size: 14px; letter-spacing: .06em; margin: 26px 0 6px; }
.static-page p { font-size: 13px; line-height: 1.9; }
.static-page table.plain th { width: 8em; white-space: nowrap; }
.static-page a { text-decoration: underline; }

/* Flashメッセージ */
.message {
  max-width: 440px;
  margin: 12px auto 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--must-bg);
  color: var(--must);
}