* { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
  }
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
    padding: 0 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .site-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--text); white-space: nowrap; text-decoration: none; }
  .site-logo .logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; }
  .site-logo .logo-mark img { width: 100%; height: 100%; display: block; }
  .site-header-nav-link { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--sub-accent, var(--accent-dark)); white-space: nowrap; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 999px; text-decoration: none; }
  .site-header-nav-link:hover { background: var(--accent-light); }
  @media print { .site-header { display: none; } }
  .wrap { max-width: 860px; margin: 0 auto; padding: 24px 20px 64px; }
  .breadcrumb { margin: 0 0 12px; font-size: 13px; color: var(--text-sub); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .breadcrumb a { color: var(--sub-accent, var(--accent-dark)); text-decoration: none; font-weight: 600; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb [aria-current="page"] { color: var(--text-sub); }
  .breadcrumb-sep { opacity: 0.6; }
  @media print { .breadcrumb { display: none; } }
  header.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--accent-dark);
    color: #fff;
    border-radius: 10px;
    padding: 28px 24px;
    margin-bottom: 24px;
  }
  header.hero .hero-text { flex: 1; min-width: 0; }
  header.hero h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: 0.02em; }
  header.hero .meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; opacity: 0.95; }
  header.hero .meta span { display: inline-flex; align-items: center; gap: 6px; }
  header.hero .meta .meta-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
  header.hero .hero-illustration { display: flex; align-items: center; flex: 0 0 auto; opacity: 0.65; }
  header.hero .hero-illustration .hero-motif { width: 64px; height: 64px; flex-shrink: 0; }
  @media (max-width: 600px) { header.hero .hero-illustration { display: none; } }
  section { margin-bottom: 28px; }
  h2 { font-size: 18px; border-left: 6px solid var(--accent); padding-left: 10px; margin-bottom: 12px; }
  .inline-link { color: var(--sub-accent, var(--accent-dark)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .map-link { display: inline-flex; align-items: center; gap: 6px; color: var(--sub-accent, var(--accent-dark)); font-weight: 600; text-decoration: none; }
  .map-link .btn-icon { width: 15px; height: 15px; flex-shrink: 0; }
  .map-link::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .map-link:hover { text-decoration: underline; }
  ul.checklist { padding-left: 0; list-style: none; }
  ul.checklist li { margin-bottom: 6px; }
  ul.checklist label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
  ul.checklist input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
  ul.checklist label:has(input[type="checkbox"]:checked) { color: var(--text-sub); text-decoration: line-through; }
  ul.reference-list { padding-left: 20px; list-style: disc; }
  ul.reference-list li { margin-bottom: 6px; font-size: 14px; }
  .schedule-timeline { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
  .timeline-item { display: flex; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
  .timeline-item:last-child { border-bottom: none; }
  .timeline-time { flex: 0 0 60px; font-weight: 700; color: var(--text); }
  .timeline-body { flex: 1; min-width: 0; word-break: break-word; }
  .timeline-dest { font-weight: 700; margin-bottom: 2px; }
  .timeline-note { font-size: 13px; color: var(--text-sub); }
  .candidate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .candidate-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: #fff; font-size: 14px; }
  .candidate-name { margin: 0 0 8px; font-weight: 700; color: var(--accent-dark); }
  .candidate-meta { margin: 0 0 8px; font-size: 13px; }
  .candidate-meta div { margin-top: 8px; }
  .candidate-meta div:first-child { margin-top: 0; }
  .candidate-meta dt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent-dark); background: var(--accent-light); border-radius: 999px; padding: 2px 10px; }
  .candidate-meta dt .detail-icon { width: 13px; height: 13px; flex-shrink: 0; }
  .candidate-meta dd { margin: 4px 0 0; padding: 0 10px; word-break: break-word; }
  .budget-list { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
  .budget-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
  .budget-row:last-child { border-bottom: none; }
  .budget-row.budget-total { font-weight: 700; background: var(--accent-light); }
  .note-box { background: var(--accent-light); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; font-size: 14px; line-height: 1.85; }
  /* 段落間を空けて、話題の切れ目が目で分かるようにする */
  .note-box p { margin: 0 0 18px; }
  .note-box p:last-child { margin-bottom: 0; }
  /* ==テキスト== の蛍光ペン風マーカー。文字の下半分だけを塗って読みやすさを保つ */
  .marker { background: linear-gradient(transparent 58%, #ffe483 58%); color: inherit; padding: 0 1px; }
  /* 「現地で気づいたこと」の本文と現地写真。テキストとfigureを交互に積む */
  .note-text + .photo-figure, .photo-figure + .note-text { margin-top: 14px; }
  .photo-figure { margin: 14px 0 0; }
  .photo-figure:first-child { margin-top: 0; }
  /* 実寸のwidth/heightを出しているので、max-width/max-heightで縦横比を保って縮める。
     高さの上限が無いと、本文幅いっぱいに引き伸ばされた写真(特に縦長)が画面を占領して
     読み物としてのリズムが崩れるため、本文の一部として収まる高さに制限する。 */
  .photo-figure img { display: block; width: auto; max-width: 100%; max-height: 420px; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
  .photo-caption { margin: 6px 0 0; font-size: 13px; color: var(--text-sub); line-height: 1.6; }
  .back-link { display: inline-block; margin-top: 16px; color: var(--sub-accent, var(--accent-dark)); font-weight: 600; }
  /* 関連しおり（ページ末尾の回遊導線） */
  .related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .related-link { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
  .related-link:hover { background: var(--accent-light); }
  .related-title { display: block; font-size: 14px; font-weight: 700; color: var(--accent-dark); line-height: 1.5; }
  .related-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-sub); }
  @media print { #related { display: none; } }
  .budget-note { font-size: 13px; color: var(--text-sub); }
  .day-details { margin-top: 12px; }
  .stop-detail { border: 1px solid var(--border); border-radius: 6px; padding: 22px 26px; margin-bottom: 20px; background: #fff; scroll-margin-top: 12px; }
  .stop-detail h4 { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--accent-dark); }
  .stop-time-badge { display: flex; width: fit-content; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-sub); background: var(--bg); border: 1px solid var(--border); border-width: 0 1px 1px 0; border-radius: 6px 0 8px 0; padding: 4px 10px; margin: -22px 0 10px -26px; }
  .stop-time-badge .detail-icon { width: 12px; height: 12px; flex-shrink: 0; }
  .stop-detail dl { margin: 0; }
  .stop-detail dt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent-dark); background: var(--accent-light); border-radius: 999px; padding: 2px 10px; margin-top: 20px; }
  .stop-detail dt:first-child { margin-top: 0; }
  .stop-detail dt .detail-icon { width: 13px; height: 13px; flex-shrink: 0; }
  .stop-detail dd { margin: 10px 0 0 2px; font-size: 14px; line-height: 1.7; }
  .transit-note { background: var(--accent-light); border: 1px dashed var(--accent); border-radius: 6px; padding: 8px 14px; margin: 0 0 12px 20px; font-size: 13px; color: var(--text-sub); }
  .transit-label { display: block; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; }
  .transit-route { display: block; margin-top: 2px; }
  .transit-steps { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
  /* align-items:flex-startにして、テキストが2行以上に折り返っても丸・アイコンは
     常に「1行目の高さ」に固定する(center指定だと折り返し行数でテキスト全体の縦中央に
     引き寄せられ、1行目からズレて見えるため)。line-heightを明示し、丸(top:10px)と
     アイコン(margin-top:3px)をその1行目の中心(20px÷2=10px)に揃える。 */
  .transit-steps li { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding-left: 22px; line-height: 20px; }
  .transit-steps li:first-child { margin-top: 0; }
  /* 丸(ドット)と接続線を、別要素の座標計算(left:0の丸 / left:6pxの線)を突き合わせるのではなく、
     同じ1つの擬似要素(::before)の背景に丸(radial-gradient)と線(linear-gradient)を重ねて
     描く。1つの要素・1回の描画にすることで、丸と線が別々にサブピクセル単位でずれて
     レンダリングされる(実機のdevicePixelRatioが非整数の端末で起きやすい)可能性を無くす。
     さらに、liの上にはmargin-top:8pxの隙間があり、これは前のliの外側(隙間の中に
     要素が無い)なので、隙間を挟んで隣のliの線と繋がらず途切れて見える。そこで先頭以外の
     liでは擬似要素自体をtop:-8pxまで広げてこの隙間ごと塗り、丸の中心位置もその分
     (10px→18px)下にずらして描く。 */
  .transit-steps li::before {
    content: "";
    position: absolute;
    left: 0; top: -8px; bottom: 0; width: 14px;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(circle 5px at 7px 18px, var(--accent-dark) 99%, transparent 100%),
      linear-gradient(var(--accent), var(--accent));
    background-size: 100% 100%, 2px 100%;
    background-position: 0 0, 6px 0;
    z-index: 1;
  }
  /* 先頭行は上に隙間がない(margin-top:0)ので隙間埋めは不要。丸の中心から下だけ線を描く */
  .transit-steps li:first-child::before {
    top: 0;
    background-image:
      radial-gradient(circle 5px at 7px 10px, var(--accent-dark) 99%, transparent 100%),
      linear-gradient(var(--accent), var(--accent));
    background-size: 100% 100%, 2px calc(100% - 10px);
    background-position: 0 0, 6px 10px;
  }
  /* 最終行は上の隙間は埋めるが、丸の中心より下には線を出さない */
  .transit-steps li:last-child::before { background-size: 100% 100%, 2px 18px; background-position: 0 0, 6px 0; }
  /* ステップが1件だけの場合は丸のみで線は出さない */
  .transit-steps li:first-child:last-child::before { top: 0; background-image: radial-gradient(circle 5px at 7px 10px, var(--accent-dark) 99%, transparent 100%); }
  .transit-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--accent-dark); }
  .transit-note a.map-link { margin-top: 4px; }
  .hotel-address-resolver { margin-top: 4px; background: var(--accent-light); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
  .resolver-pending-text { margin: 0 0 10px; font-size: 13px; }
  .resolver-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .resolver-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .resolver-input { flex: 1 1 220px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; color: var(--text); background: #fff; }
  .resolver-submit, .resolver-reset { border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .resolver-submit { background: var(--accent); color: #fff; }
  .resolver-submit:hover { background: var(--accent-dark); }
  .resolver-reset { background: none; color: var(--text-sub); font-weight: 400; text-decoration: underline; padding: 8px 4px; }
  .resolver-reset:hover { color: var(--accent-dark); }
  .resolver-decided-address { margin: 0 0 8px; font-weight: 600; }
  .resolver-decided-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .map-button { font-size: 15px; }
  .day-route-links { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .day-route-link { font-size: 13px; }
  @media print {
    header.hero { background: none; color: var(--text); border: 1px solid var(--border); }
    .back-link { display: none; }
    header.hero .hero-illustration { display: none; }
    /* 印刷時の写真は紙面を圧迫しない大きさに抑え、ページ途中で分断されないようにする */
    .photo-figure { break-inside: avoid; }
    .photo-figure img { max-width: 60%; }
  }
  .site-footer{border-top:1px solid #e3e3e3;background:#fff;margin-top:32px;}
  .site-footer .foot-in{max-width:960px;margin:0 auto;padding:20px;}
  .site-footer .foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
  .site-footer .foot-brand{font-weight:700;font-size:14px;color:#24292f;}
  .site-footer .foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;font-weight:700;color:#6e7781;}
  .site-footer .foot-links a:hover{color:#b58f05;}
  .site-footer .foot-note{margin:10px 0 0;font-size:12px;color:#6e7781;}
  @media(max-width:480px){.site-footer .foot-top{flex-direction:column;align-items:flex-start;}}