@charset "UTF-8";

/* ===== base ===== */
:root {
  --bg: #fbf8f5;
  --card: #ffffff;
  --ink: #2b2724;
  --ink-sub: #7d746c;
  --line: #ece5dd;
  --accent: #e0567f;
  --accent-soft: #fdeef3;
  --shadow: 0 2px 10px rgba(80, 60, 45, .07);
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 15px;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 18px 80px;
}

/* ===== header ===== */
.dayhead {
  background: var(--accent);
  color: #fff;
  padding: 26px 0 22px;
  margin-bottom: 22px;
}
.dayhead .wrap { padding-bottom: 0; }
.dayhead .kicker {
  font-size: 12px;
  letter-spacing: .18em;
  opacity: .85;
  margin: 0 0 6px;
}
.dayhead h1 {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 28px;
  line-height: 1.35;
  margin: 0 0 10px;
  font-weight: 700;
}
.dayhead .date {
  font-size: 15px;
  font-weight: 700;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 3px 14px;
  display: inline-block;
}
.dayhead .meta {
  margin: 12px 0 0;
  font-size: 13px;
  opacity: .95;
}

/* ===== day nav ===== */
.daynav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 0 4px;
  margin-bottom: 18px;
  scrollbar-width: thin;
}
.daynav a {
  flex: 0 0 auto;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-sub);
  white-space: nowrap;
}
.daynav a.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ===== summary strip ===== */
.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.summary div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.summary dt {
  font-size: 11px;
  color: var(--ink-sub);
  margin: 0 0 3px;
  letter-spacing: .04em;
}
.summary dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

/* ===== section title ===== */
.sec {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 34px 0 14px;
  padding-left: 12px;
  border-left: 5px solid var(--accent);
  line-height: 1.4;
}

/* ===== overview map ===== */
.mapbox {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  margin-bottom: 8px;
}
.mapbox iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}
.maproute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a73e8;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 6px;
}

/* ===== timeline ===== */
.tl { position: relative; }
.tl::before {
  content: "";
  position: absolute;
  left: 58px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}

.stop { position: relative; display: flex; align-items: flex-start; margin-bottom: 20px; }
.stop .time {
  flex: 0 0 52px;
  text-align: right;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.5;
  padding-top: 2px;
  white-space: nowrap;
}
.stop .dot {
  position: absolute;
  left: 53px;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
  z-index: 1;
}
.stop .card { flex: 1 1 auto; min-width: 0; margin-left: 26px; }

/* ===== card ===== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card figure { margin: 0; position: relative; }
.card figure img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #f0ebe6;
}
.card figure figcaption {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  opacity: .8;
}
.card .body { padding: 15px 17px 16px; }

.card h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 18px;
  margin: 0 0 2px;
  line-height: 1.4;
}
.card .fr {
  font-size: 11.5px;
  color: var(--ink-sub);
  letter-spacing: .02em;
  margin: 0 0 9px;
}
.card .lead {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 8px 11px;
  margin: 0 0 11px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
}
.card p.desc { margin: 0 0 12px; font-size: 14px; }

/* badges */
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  padding: 3px 9px;
  letter-spacing: .02em;
  line-height: 1.6;
}
.b-booked { background: #e3f3e6; color: #2b7a3d; }
.b-need   { background: #fdeaea; color: #c0392b; }
.b-free   { background: #eef1f4; color: #5b6672; }
.b-emily  { background: #f3e9fb; color: #8446bd; }
.b-price  { background: #fdf3e2; color: #a5711b; }
.b-photo  { background: #e6f2fa; color: #1f6f9c; }

/* info rows */
.info { border-top: 1px dashed var(--line); padding-top: 10px; font-size: 12.5px; }
.info dl { display: grid; grid-template-columns: 68px 1fr; gap: 3px 8px; margin: 0 0 10px; }
.info dt { color: var(--ink-sub); }
.info dd { margin: 0; }
.info dd.check { color: #c0392b; font-weight: 700; }

.links { display: flex; flex-wrap: wrap; gap: 7px; }
.links a {
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.links a.gmap { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.links a.walk { background: #f1f6ff; border-color: #cfe0fb; color: #1a5cb8; }

/* embedded map accordion */
details.spotmap { margin-top: 11px; }
details.spotmap summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: #1a5cb8;
  list-style: none;
  padding: 7px 0;
  border-top: 1px dashed var(--line);
}
details.spotmap summary::-webkit-details-marker { display: none; }
details.spotmap summary::before { content: "▸ "; }
details.spotmap[open] summary::before { content: "▾ "; }
details.spotmap iframe {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 10px;
  display: block;
}

/* tips */
.tips {
  background: #fffaf0;
  border: 1px solid #f3e4c4;
  border-radius: 10px;
  padding: 10px 13px;
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
}
.tips b { color: #a5711b; }
.tips ul { margin: 4px 0 0; padding-left: 18px; }
.tips li { margin-bottom: 3px; }

/* ===== move ===== */
.move {
  position: relative;
  padding-left: 78px;
  margin: -6px 0 14px;
  font-size: 12.5px;
  color: var(--ink-sub);
  font-weight: 700;
}
.move .bar {
  position: absolute;
  left: 52px;
  top: 0;
  width: 15px;
  text-align: center;
  font-size: 13px;
  background: var(--bg);
  line-height: 1.6;
}
.move span.note { font-weight: 400; }

/* ===== video ===== */
.video {
  position: relative;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 11px;
  background: #000;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== footer ===== */
.foot {
  margin-top: 46px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-sub);
  line-height: 1.8;
}
.pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.pager a {
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 17px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* ===== index page ===== */
.hero {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.hero img { width: 100%; height: 300px; object-fit: cover; }
.hero .cap {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  color: #fff;
  padding: 40px 22px 20px;
}
.hero h1 {
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0 0 4px;
  font-size: 26px;
}
.hero p { margin: 0; font-size: 13px; opacity: .9; }

.daylist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.daycard {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.daycard img { width: 100%; height: 140px; object-fit: cover; }
.daycard .t { padding: 12px 14px 14px; }
.daycard .n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 6px;
}
.daycard h3 { font-family: "Zen Maru Gothic", sans-serif; margin: 0 0 3px; font-size: 16px; }
.daycard p { margin: 0; font-size: 12px; color: var(--ink-sub); }

table.bk {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.bk th, table.bk td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
table.bk th { background: #f6f1ec; font-size: 12px; }
.tablewrap { overflow-x: auto; }

/* ===== responsive ===== */
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .dayhead h1 { font-size: 22px; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .tl::before { left: 50px; }
  .stop .time { flex-basis: 44px; font-size: 14px; }
  .stop .dot { left: 45px; }
  .stop .card { margin-left: 22px; }
  .move { padding-left: 66px; }
  .move .bar { left: 44px; }
  .card figure img { height: 180px; }
  .daylist { grid-template-columns: 1fr; }
  .hero img { height: 210px; }
}

/* ===== print ===== */
@media print {
  body { background: #fff; }
  .daynav, .pager, details.spotmap, .video, .maproute { display: none !important; }
  .mapbox iframe { height: 200px; }
  .card, .summary div, .mapbox { box-shadow: none; break-inside: avoid; }
  .dayhead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ===== cost sidebar ===== */
.tlwrap { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 26px; align-items: start; }
.costbox {
  position: sticky;
  top: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 15px 16px 16px;
  font-size: 12.5px;
}
.costbox h3 { font-family: "Zen Maru Gothic", sans-serif; font-size: 14px; margin: 0 0 1px; }
.costbox .unit { margin: 0 0 9px; font-size: 10.5px; color: var(--ink-sub); letter-spacing: .03em; }
.costbox .total {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 27px; font-weight: 700; color: var(--accent);
  line-height: 1.25; margin-bottom: 12px;
}
.costbox .total small { display: block; font-size: 10.5px; color: var(--ink-sub); font-weight: 400; }
.costbox ul { list-style: none; margin: 0; padding: 0; }
.costbox .catlist li { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.costbox .catlist li b { margin-left: auto; font-family: "Zen Maru Gothic", sans-serif; }
.costbox .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.sw-transport { background: #5b8def; }
.sw-food { background: #e0567f; }
.sw-sight { background: #41a97b; }
.sw-shop { background: #e0a33e; }
.sw-other { background: #9aa0a6; }
.costbox .detail { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; }
.costbox .detail li { display: flex; gap: 8px; padding: 4px 0; color: var(--ink-sub); line-height: 1.6; }
.costbox .detail li b { margin-left: auto; color: var(--ink); white-space: nowrap; font-weight: 700; }
.costbox .note { margin: 11px 0 0; font-size: 10.5px; color: var(--ink-sub); line-height: 1.7; }
.move .mcost { color: #a5711b; font-weight: 700; }

@media (max-width: 860px) {
  .tlwrap { grid-template-columns: 1fr; }
  .costbox { position: static; order: -1; margin-bottom: 4px; }
}
@media print {
  .tlwrap { grid-template-columns: 1fr; }
  .costbox { position: static; box-shadow: none; break-inside: avoid; }
}


/* ===== brand stops (HERMES / ROLEX) ===== */
.brandbar {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid #b9a06a;
  border-radius: 12px;
  padding: 12px 15px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
  font-size: 12.5px;
  line-height: 1.7;
}
.brandbar .ttl {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  letter-spacing: .04em;
}
.brandbar .none { color: var(--ink-sub); }
.brandbar ul { list-style: none; margin: 0; padding: 0; }
.brandbar li { margin-bottom: 3px; }
.brandbar li:last-child { margin-bottom: 0; }

.btag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 4px;
  padding: 1px 8px;
  margin-right: 7px;
  color: #fff;
  vertical-align: 1px;
}
.bt-hermes { background: #f37021; }
.bt-rolex { background: #006039; }

.brandblock {
  border: 1px dashed #d8c69a;
  background: #fffdf6;
  border-radius: 10px;
  padding: 10px 13px;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.75;
}
.brandblock .head {
  font-weight: 700;
  color: #8a6d2f;
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.brandblock ul { list-style: none; margin: 0; padding: 0; }
.brandblock li { margin-bottom: 4px; }
.brandblock li:last-child { margin-bottom: 0; }
.brandblock .rule { color: var(--ink-sub); font-size: 11.5px; }


/* ===== picks from the shared Google Maps list ===== */
.b-list { background: #e0f4f1; color: #0f766e; }
.listblock {
  border: 1px dashed #8fd3c9;
  background: #f3fbf9;
  border-radius: 10px;
  padding: 10px 13px;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.75;
}
.listblock .head { font-weight: 700; color: #0f766e; font-size: 11.5px; letter-spacing: .04em; margin-bottom: 5px; }
.listblock ul { list-style: none; margin: 0; padding: 0; }
.listblock li { margin-bottom: 5px; }
.listblock li:last-child { margin-bottom: 0; }
.listblock b { color: #0b5c56; }
.listblock .m { color: var(--ink-sub); font-size: 11.5px; }
.listblock a { color: #0f766e; font-weight: 700; text-decoration: none; margin-left: 6px; font-size: 11.5px; }
.outside { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.outside .oc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow); font-size: 13px; }
.outside .oc h4 { margin: 0 0 4px; font-family: "Zen Maru Gothic", sans-serif; font-size: 15px; }
.outside .oc .m { color: var(--ink-sub); font-size: 12px; margin-bottom: 6px; }
.outside .oc p { margin: 0; font-size: 12.5px; }
@media (max-width: 640px) { .outside { grid-template-columns: 1fr; } }