
  * { 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;
  }
  .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: 20px; list-style: none; }
  ul.checklist li { margin-bottom: 6px; }
  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: 14px 16px; font-size: 14px; }
  .back-link { display: inline-block; margin-top: 16px; color: var(--sub-accent, var(--accent-dark)); font-weight: 600; }
  .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-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; }
  }
  .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;}}