/* ============================================================
   旅ランカ — sub-page styles (tours / hotels / flights / etc.)
   Loaded alongside styles.css
   ============================================================ */

/* ---- page hero strip ---- */
.page-hero { position: relative; overflow: hidden; background: var(--c-primary-deep); }
.page-hero image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.page-hero .ph-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(var(--c-hero-tint),.9) 0%, rgba(var(--c-hero-tint),.62) 50%, rgba(var(--c-hero-tint),.4) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; padding-block: clamp(54px, 7.5vw, 104px); }
.crumb { display: flex; gap: 9px; align-items: center; font-family: var(--font-latin); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 20px; }
.crumb a:hover { color: #fff; }
.crumb .sep { opacity: .45; }
.page-hero .eyebrow { color: var(--c-accent-soft); }
.page-hero .eyebrow::before { background: var(--c-accent-soft); }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.2; margin-top: 18px; }
.page-hero h1 em { font-style: normal; color: var(--c-accent-soft); }
.page-hero .ph-sub { color: rgba(255,255,255,.88); font-size: clamp(15px,1.4vw,17px); margin-top: 18px; max-width: 56ch; line-height: 1.95; }

/* ---- filter bar ---- */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 48px); }
.chip {
  font-family: var(--font-jp-sans); font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  padding: 9px 20px; border: 1px solid var(--c-line-strong); border-radius: 100px;
  color: var(--c-ink-soft); background: var(--c-paper); cursor: pointer; transition: all .25s;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---- 3-col card grid variant (hotels / packages) ---- */
.pkg-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.pkg .pkg-img.shorter { aspect-ratio: 16/10; }
.stars { color: var(--c-accent); letter-spacing: 2px; font-size: 14px; }

/* ---- intro lede block (centered) ---- */
.lede { max-width: 64ch; margin: 0 auto; text-align: center; }
.lede .eyebrow { justify-content: center; }
.lede .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--c-accent); }
.lede h2 { font-size: clamp(26px, 3.2vw, 42px); margin-top: 18px; line-height: 1.4; }
.lede h2 em { font-style: normal; color: var(--c-primary); }
.lede p { color: var(--c-ink-soft); font-size: 17px; line-height: 2.05; margin-top: 18px; }

/* ---- routes table (flights) ---- */
.routes-wrap { border: 1px solid var(--c-line); background: var(--c-paper); }
.routes { width: 100%; border-collapse: collapse; }
.routes th, .routes td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--c-line); }
.routes thead th { font-family: var(--font-latin); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; background: var(--c-bg); }
.routes tbody tr:last-child td { border-bottom: none; }
.routes tbody tr:hover td { background: var(--c-bg); }
.routes .r-route { font-family: var(--font-jp-serif); font-size: 17px; font-weight: 600; color: var(--c-ink); }
.routes .r-air { font-size: 14px; color: var(--c-ink-soft); }
.routes .r-time { font-size: 14px; color: var(--c-ink-soft); }
.routes .fare { font-family: var(--font-latin); font-size: 24px; font-weight: 600; color: var(--c-primary); }
.routes .fare small { font-size: 14px; }

.airlines { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.airline { border: 1px solid var(--c-line); background: var(--c-paper); padding: 16px 26px; font-family: var(--font-jp-serif); font-size: 16px; color: var(--c-ink); letter-spacing: .04em; }
.airline span { display: block; font-family: var(--font-latin); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; }

/* ---- contact form ---- */
.form-grid { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13.5px; font-weight: 700; letter-spacing: .03em; color: var(--c-ink); }
.field > label .req { color: #fff; background: var(--c-primary); font-size: 10px; padding: 2px 7px; border-radius: 3px; margin-left: 8px; letter-spacing: .08em; vertical-align: middle; }
.field input, .field select, .field textarea {
  font-family: var(--font-jp-sans); font-size: 15px; padding: 13px 16px;
  border: 1px solid var(--c-line-strong); border-radius: 3px; background: var(--c-paper); color: var(--c-ink);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .sc-go { margin-top: 8px; }

.contact-info { background: var(--c-primary-deep); color: #fff; padding: clamp(28px, 3vw, 40px); }
.contact-info h3 { color: #fff; font-size: 22px; }
.contact-info > p { color: rgba(255,255,255,.75); font-size: 14px; margin-top: 12px; line-height: 1.9; }
.ci-item { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.ci-item:last-child { border-bottom: none; padding-bottom: 0; }
.ci-item .l { font-family: var(--font-latin); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent-soft); font-weight: 600; }
.ci-item .d { font-size: 16px; margin-top: 5px; color: #fff; }
.ci-item .d.big { font-family: var(--font-latin); font-size: 26px; font-weight: 600; }

/* ---- payment ---- */
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pm { border: 1px solid var(--c-line); padding: 34px 30px; background: var(--c-paper); display: flex; flex-direction: column; }
.pm .pm-ico { width: 46px; height: 46px; color: var(--c-primary); margin-bottom: 20px; }
.pm .pm-ico svg { width: 100%; height: 100%; }
.pm h3 { font-size: 22px; }
.pm .pm-tag { font-family: var(--font-latin); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; margin-top: 6px; }
.pm p { font-size: 14px; color: var(--c-ink-soft); margin-top: 14px; line-height: 1.95; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { position: relative; padding: 30px 26px; background: var(--c-bg); border: 1px solid var(--c-line); }
.step .sn { font-family: var(--font-latin); font-size: 42px; font-weight: 600; color: var(--c-accent); line-height: 1; }
.step h4 { font-size: 18px; margin-top: 12px; }
.step p { font-size: 13.5px; color: var(--c-ink-soft); margin-top: 8px; line-height: 1.85; }

.notes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-line); }
.notes li { padding: 16px 0 16px 26px; border-bottom: 1px solid var(--c-line); font-size: 14.5px; color: var(--c-ink-soft); position: relative; line-height: 1.85; }
.notes li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent); }

/* ---- company spec table ---- */
.spec { width: 100%; border-collapse: collapse; }
.spec th { text-align: left; width: 220px; vertical-align: top; padding: 18px 26px; background: var(--c-bg); border: 1px solid var(--c-line); font-family: var(--font-jp-serif); font-size: 15px; font-weight: 600; color: var(--c-primary); }
.spec td { padding: 18px 26px; border: 1px solid var(--c-line); font-size: 15px; vertical-align: top; line-height: 1.8; }
.spec td .sub { display: block; color: var(--c-ink-soft); font-size: 13px; margin-top: 4px; }

/* ---- map placeholder ---- */
.mapbox { aspect-ratio: 21/9; border: 1px solid var(--c-line); }
.mapbox image-slot { width: 100%; height: 100%; }

/* ---- two-col text/visual (company about) ---- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split .visual { position: relative; aspect-ratio: 4/3; }
.split .visual image-slot { width: 100%; height: 100%; }
.split h2 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.36; }
.split h2 em { font-style: normal; color: var(--c-primary); }
.split p { color: var(--c-ink-soft); font-size: 16px; line-height: 2.05; margin: 18px 0 0; }

/* ============================================================
   HOTEL LISTING — left filter rail + results
   ============================================================ */
.listing-sec { background: var(--c-paper); }
.listing { display: grid; grid-template-columns: 288px 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }

/* ---- filter rail ---- */
.filters { position: sticky; top: 96px; border: 1px solid var(--c-line); background: var(--c-bg); border-radius: 4px; padding: 22px 20px; }
.filters-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.filters-head h2 { font-size: 18px; font-weight: 700; color: var(--c-ink); }
.filters-reset { background: none; border: none; color: var(--c-primary); font-size: 12.5px; font-weight: 700; cursor: pointer; letter-spacing: .04em; padding: 0; }
.filters-reset:hover { text-decoration: underline; }

.filt-map { position: relative; aspect-ratio: 16/8; border-radius: 3px; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--c-line); }
.filt-map image-slot { width: 100%; height: 100%; }
.filt-map-btn { position: absolute; bottom: 8px; right: 8px; background: rgba(20,12,10,.72); color: #fff; font-size: 11.5px; padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(4px); }

.filt-search { padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--c-line); }
.filt-search label { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-ink); margin-bottom: 8px; }
.filt-search-row { display: flex; gap: 6px; }
.filt-search-row input { flex: 1; min-width: 0; border: 1px solid var(--c-line-strong); border-radius: 3px; padding: 8px 11px; font-family: var(--font-jp-sans); font-size: 13px; background: var(--c-paper); color: var(--c-ink); }
.filt-search-row input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 10%, transparent); }
.filt-search-row button { flex-shrink: 0; border: none; background: var(--c-primary); color: #fff; font-size: 12.5px; font-weight: 700; padding: 0 14px; border-radius: 3px; cursor: pointer; }
.filt-search-row button:hover { background: var(--c-primary-deep); }

.filt-group { border-bottom: 1px solid var(--c-line); }
.filt-title {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 15px 2px; text-align: left;
  font-family: var(--font-jp-serif); font-size: 14.5px; font-weight: 700; color: var(--c-ink); letter-spacing: .02em;
}
.filt-title .ft-ico { color: var(--c-primary); font-size: 10px; }
.filt-title .ft-caret { margin-left: auto; color: var(--c-ink-soft); font-size: 11px; transition: transform .25s; }
.filt-title[aria-expanded="false"] .ft-caret { transform: rotate(-90deg); }
.filt-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; overflow: hidden; }
.filt-body.collapsed { display: none; }

.filt-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px; border-radius: 3px; cursor: pointer;
  font-size: 13px; color: var(--c-ink); transition: background .18s;
}
.filt-opt:hover { background: var(--c-paper); }
.filt-opt input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--c-primary); cursor: pointer; margin: 0; }
.filt-opt span { flex: 1; line-height: 1.4; }
.filt-opt span.stars { color: var(--c-accent); letter-spacing: 1px; }
.filt-opt em { font-style: normal; font-family: var(--font-latin); font-size: 12px; color: var(--c-ink-soft); font-weight: 600; flex-shrink: 0; }
.filt-opt.zero { opacity: .4; }

/* ---- results column ---- */
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--c-ink); }
.results-count { font-size: 14px; color: var(--c-ink-soft); }
.results-count strong { color: var(--c-primary); font-family: var(--font-latin); font-size: 19px; font-weight: 700; }
.results-count b { color: var(--c-ink); font-family: var(--font-latin); font-size: 17px; }
.sortrow { display: flex; flex-wrap: wrap; gap: 0; }
.sorttab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-jp-sans); font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--c-ink-soft); padding: 6px 16px; position: relative;
}
.sorttab + .sorttab { border-left: 1px solid var(--c-line-strong); }
.sorttab:hover { color: var(--c-primary); }
.sorttab.on { color: var(--c-primary); font-weight: 700; }
.sorttab.on::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -18px; height: 2px; background: var(--c-primary); }

.result-list { display: flex; flex-direction: column; gap: 20px; }

/* tour card grid inside results column */
.tour-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 1240px) { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tour-grid { grid-template-columns: 1fr; } }
.hres {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr 210px;
  border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
  background: var(--c-paper); transition: box-shadow .35s, border-color .35s, transform .35s;
}
.hres:hover { box-shadow: 0 30px 60px -44px rgba(40,20,15,.5); border-color: var(--c-line-strong); }
.hres-go { position: absolute; inset: 0; z-index: 1; }

.hres-media { position: relative; }
.hres-media > image-slot { width: 100%; height: 172px; display: block; }
.hres-badge { position: absolute; top: 0; left: 12px; z-index: 2; background: var(--c-accent); color: var(--c-primary-deep); font-family: var(--font-jp-serif); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; padding: 5px 12px 6px; }
.hres-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.hres-thumbs image-slot { width: 100%; height: 56px; display: block; }

.hres-main { padding: 18px 22px; border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
.hres-loc { font-family: var(--font-latin); font-size: 12px; letter-spacing: .06em; color: var(--c-secondary); font-weight: 600; }
.hres-loc .sep { opacity: .55; margin: 0 2px; }
.hres-main h3 { font-size: 20px; line-height: 1.4; margin: 7px 0 0; }
.hres-desc { font-size: 13px; line-height: 1.8; color: var(--c-primary); margin: 9px 0 0; }
.hres-rate { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; }
.hres-rate .stars { color: var(--c-accent); letter-spacing: 1px; font-size: 14px; }
.hres-rate b { font-family: var(--font-latin); font-size: 17px; color: var(--c-ink); }
.hres-rate .rev { font-size: 12px; color: var(--c-ink-soft); }
.hres-amen { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hres-amen li { font-size: 11.5px; color: var(--c-ink-soft); border: 1px solid var(--c-line); border-radius: 100px; padding: 3px 11px; }
.hres-access { font-size: 12px; color: var(--c-ink-soft); line-height: 1.7; margin: 13px 0 0; }

.hres-buy { position: relative; z-index: 2; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 14px; text-align: right; }
.hres-price { display: flex; flex-direction: column; gap: 2px; }
.hres-price .from { font-size: 11px; color: var(--c-ink-soft); letter-spacing: .04em; }
.hres-price .amt { font-family: var(--font-latin); font-size: 30px; font-weight: 600; color: var(--c-primary); line-height: 1; }
.hres-price .amt small { font-size: 16px; }
.hres-price .tax { font-size: 10.5px; color: var(--c-ink-soft); }
.hres-btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 13px; }

.tour-pager, .hotel-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 32px 0 8px; }
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--c-line-strong); background: var(--c-paper);
  border-radius: 3px; font-family: var(--font-latin); font-size: 13px; font-weight: 600;
  color: var(--c-ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.pager-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pager-btn.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pager-btn.pager-arrow { font-size: 15px; }
.pager-ellipsis { display: flex; align-items: center; padding: 0 4px; color: var(--c-ink-soft); font-size: 13px; }
.no-results { text-align: center; padding: 60px 20px; color: var(--c-ink-soft); }
.no-results p { margin-bottom: 20px; font-size: 16px; }

@media (max-width: 1080px) {
  .listing { grid-template-columns: 250px 1fr; }
  .hres { grid-template-columns: 200px 1fr; }
  .hres-thumbs { display: none; }
  .hres-media > image-slot { height: 100%; min-height: 200px; }
  .hres-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-line); }
  .hres-btn { width: auto; }
}
@media (max-width: 820px) {
  .listing { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filt-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .filt-body.collapsed { display: none; }
}
@media (max-width: 560px) {
  .hres { grid-template-columns: 1fr; }
  .hres-media > image-slot { height: 180px; }
  .hres-main { border-left: none; border-right: none; border-top: 1px solid var(--c-line); }
  .filt-body { grid-template-columns: 1fr; }
  .results-bar { gap: 10px; }
  .sorttab { padding: 6px 10px; font-size: 12.5px; }
}
@media (max-width: 820px) {
  .pm-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pkg-grid.cols3 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .spec th { width: 130px; padding: 14px 16px; }
  .spec td { padding: 14px 16px; }
  .routes th, .routes td { padding: 14px 14px; }
  .routes .r-air, .routes .r-time { display: none; }
}

/* ============================================================
   SERVICE CARDS — 現地サービス一覧
   ============================================================ */
.svc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.6vw, 34px); }
.svc-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
  background: var(--c-paper);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .45s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -50px rgba(40,20,15,.55); border-color: var(--c-line-strong); }
.svc-card-go { position: absolute; inset: 0; z-index: 1; }
.svc-card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.svc-card-media image-slot { width: 100%; height: 100%; }
.svc-card-badge {
  position: absolute; top: 0; left: 16px; z-index: 2;
  background: var(--c-accent); color: var(--c-primary-deep);
  font-family: var(--font-jp-serif); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  padding: 6px 14px 7px;
}
.svc-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.svc-card-en { font-family: var(--font-latin); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.svc-card-body h3 { font-size: 23px; margin: 8px 0 0; line-height: 1.4; }
.svc-card-body p { font-size: 14px; line-height: 1.95; color: var(--c-ink-soft); margin: 12px 0 0; }
.svc-card-btn {
  margin-top: 22px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-primary); color: #fff;
  font-family: var(--font-jp-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
  padding: 12px 24px; border-radius: 2px;
  transition: background .3s, gap .3s;
}
.svc-card-btn .arr { font-family: var(--font-latin); font-size: 17px; }
.svc-card-btn:hover { background: var(--c-primary-deep); gap: 16px; }

@media (max-width: 760px) {
  .svc-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   FLIGHT SEARCH FORM
   ============================================================ */
.flightform {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-primary); border-radius: 4px;
  padding: clamp(22px, 3vw, 40px); max-width: 920px;
}
.ff-tabs { display: flex; gap: 0; margin-bottom: 26px; border-bottom: 1px solid var(--c-line); }
.ff-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-jp-serif); font-size: 16px; font-weight: 700; color: var(--c-ink-soft);
  padding: 12px 26px; position: relative;
}
.ff-tab:hover { color: var(--c-primary); }
.ff-tab.on { color: var(--c-primary); }
.ff-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c-primary); }

.ff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ff-col2 { grid-column: span 2; }

.field.invalid input, .field.invalid select { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

/* passengers */
.ff-pax { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.pax { border: 1px solid var(--c-line-strong); border-radius: 3px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--c-bg); }
.pax-l { display: flex; flex-direction: column; line-height: 1.3; }
.pax-l b { font-size: 14.5px; color: var(--c-ink); font-weight: 700; }
.pax-l span { font-size: 11px; color: var(--c-ink-soft); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--c-line-strong);
  background: var(--c-paper); color: var(--c-primary); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s;
}
.stepper button:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.stepper .pax-n { font-family: var(--font-latin); font-size: 19px; font-weight: 600; min-width: 26px; text-align: center; color: var(--c-ink); }

/* detailed conditions */
.ff-detail { margin-top: 22px; border: 1px solid var(--c-line); border-radius: 3px; background: var(--c-bg); }
.ff-detail-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--font-jp-serif); font-size: 15px; font-weight: 700; color: var(--c-ink);
  padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.ff-detail-toggle .ff-caret { color: var(--c-ink-soft); font-size: 12px; transition: transform .25s; }
.ff-detail-toggle[aria-expanded="false"] .ff-caret { transform: rotate(-90deg); }
.ff-detail-body { padding: 4px 20px 20px; }
.ff-detail-body.collapsed { display: none; }
.ff-checks { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 16px; }
.ff-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--c-ink); cursor: pointer; }
.ff-check input { width: 17px; height: 17px; accent-color: var(--c-primary); cursor: pointer; }

.ff-submit {
  margin-top: 24px; width: 100%; padding: 17px;
  background: var(--c-primary); color: #fff; border: none; border-radius: 3px;
  font-family: var(--font-jp-sans); font-weight: 700; letter-spacing: .1em; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; transition: background .3s, transform .15s;
}
.ff-submit .ff-q { font-size: 19px; }
.ff-submit:hover { background: var(--c-primary-deep); }
.ff-submit:active { transform: scale(.995); }
.ff-disclaimer { font-size: 12px; color: var(--c-ink-soft); margin: 14px 0 0; text-align: center; line-height: 1.7; }

/* success panel */
.ff-success {
  max-width: 720px; background: var(--c-paper); border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-secondary); border-radius: 4px;
  padding: clamp(30px, 4vw, 48px); text-align: center;
}
.ff-success-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--c-secondary); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ff-success h3 { font-size: 26px; }
.ff-success > p { color: var(--c-ink-soft); margin: 12px auto 26px; max-width: 42ch; line-height: 1.9; }
.ff-summary { text-align: left; border-top: 1px solid var(--c-line); margin: 0 0 26px; }
.ff-srow { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 4px; border-bottom: 1px solid var(--c-line); }
.ff-srow dt { font-size: 13px; font-weight: 700; color: var(--c-ink-soft); letter-spacing: .04em; }
.ff-srow dd { margin: 0; font-size: 14.5px; color: var(--c-ink); font-weight: 500; }

@media (max-width: 620px) {
  .ff-grid { grid-template-columns: 1fr; }
  .ff-col2 { grid-column: span 1; }
  .ff-pax { grid-template-columns: 1fr; }
  .ff-tab { padding: 12px 16px; font-size: 15px; }
  .ff-srow { grid-template-columns: 96px 1fr; gap: 10px; }
}

/* ============================================================
   INQUIRY FORM (contact) — note box, radio chips, date range
   ============================================================ */
.inquiry-note {
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-paper));
  border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  border-left: 4px solid var(--c-accent);
  border-radius: 4px; padding: 20px 24px; margin-bottom: 36px; max-width: 920px;
}
.iq-note-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-jp-serif); font-weight: 700; font-size: 16px; color: var(--c-primary); margin-bottom: 12px; }
.iq-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inquiry-note ul { margin: 0; padding-left: 20px; }
.inquiry-note li { font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.9; }
.inquiry-note li b { color: var(--c-ink); }

.field > label .opt { color: var(--c-ink-soft); background: var(--c-bg); border: 1px solid var(--c-line-strong); font-size: 10px; padding: 1px 7px; border-radius: 3px; margin-left: 8px; letter-spacing: .08em; vertical-align: middle; font-weight: 600; }

.radiochips { display: flex; flex-wrap: wrap; gap: 9px; }
.rchip { position: relative; cursor: pointer; }
.rchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rchip span {
  display: inline-flex; align-items: center; padding: 10px 18px;
  border: 1px solid var(--c-line-strong); border-radius: 100px;
  font-size: 13.5px; font-weight: 600; color: var(--c-ink-soft); background: var(--c-paper);
  transition: all .2s;
}
.rchip:hover span { border-color: var(--c-primary); color: var(--c-primary); }
.rchip input:checked + span { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.rchip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 20%, transparent); }
.field.invalid .radiochips span { border-color: #C0392B; }

.daterange { grid-template-columns: 1fr auto 1fr; align-items: center; }
.dr-sep { color: var(--c-ink-soft); font-weight: 600; }
@media (max-width: 760px) {
  .daterange { grid-template-columns: 1fr; }
  .daterange .dr-sep { display: none; }
}

/* ============================================================
   PAYMENT PAGE — methods, info cards, support
   ============================================================ */
.pay-methods { display: flex; flex-direction: column; gap: 18px; }
.pay-method {
  display: grid; grid-template-columns: 92px 1fr; align-items: stretch;
  border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; background: var(--c-paper);
  transition: box-shadow .35s, border-color .35s;
}
.pay-method:hover { box-shadow: 0 30px 60px -46px rgba(40,20,15,.5); border-color: var(--c-line-strong); }
.pm-num {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-latin); font-size: 40px; font-weight: 600; color: #fff;
  background: var(--c-primary);
}
.pm-content { padding: 26px 30px; }
.pm-content h3 { font-size: 23px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pm-en { font-family: var(--font-latin); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.pm-lead { font-size: 15px; color: var(--c-primary); margin: 10px 0 0; line-height: 1.8; }

.pay-list { list-style: none; padding: 0; margin: 14px 0 0; }
.pay-list li { position: relative; padding: 6px 0 6px 24px; font-size: 14px; color: var(--c-ink-soft); line-height: 1.85; }
.pay-list li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
.pay-list li b { color: var(--c-ink); }

.pm-rec { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.pm-rec-l { font-size: 12.5px; font-weight: 700; color: var(--c-ink); letter-spacing: .04em; }
.pm-rec-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-rec-chips i { font-style: normal; font-size: 12.5px; color: var(--c-secondary); background: color-mix(in srgb, var(--c-secondary) 12%, transparent); border-radius: 100px; padding: 4px 14px; font-weight: 600; }

.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); }
.info-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; padding: 30px 28px; }
.ic-ico { width: 48px; height: 48px; color: var(--c-primary); margin-bottom: 18px; }
.ic-ico svg { width: 100%; height: 100%; }
.info-card h3 { font-size: 20px; }
.info-card .pay-list { margin-top: 12px; }
.ic-foot { font-size: 13px; color: var(--c-ink-soft); line-height: 1.85; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--c-line-strong); }

.pay-support { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; background: var(--c-bg); border: 1px solid var(--c-line); border-left: 3px solid var(--c-primary); border-radius: 4px; padding: clamp(30px, 4vw, 52px); }
.ps-text h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 16px; }
.ps-text h2 em { font-style: normal; color: var(--c-primary); }
.ps-text p { color: var(--c-ink-soft); font-size: 15px; line-height: 1.95; margin-top: 16px; }
.ps-contacts { display: flex; flex-direction: column; gap: 14px; }
.ps-item { display: flex; flex-direction: column; gap: 6px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; padding: 20px 24px; transition: border-color .25s, transform .25s; }
.ps-item:hover { border-color: var(--c-primary); transform: translateY(-2px); }
.ps-l { font-family: var(--font-latin); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.ps-d { font-family: var(--font-latin); font-size: 21px; font-weight: 600; color: var(--c-primary); line-height: 1.4; }

@media (max-width: 880px) {
  .info-cards { grid-template-columns: 1fr; }
  .pay-support { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pay-method { grid-template-columns: 1fr; }
  .pm-num { padding: 14px 0; font-size: 30px; }
}

/* ============================================================
   ABOUT / COMPANY — CEO message, values, timeline, stats
   ============================================================ */
.ceo { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ceo-portrait { position: sticky; top: 100px; }
.ceo-portrait image-slot { width: 100%; aspect-ratio: 4/5; display: block; border-radius: 4px; overflow: hidden; }
.ceo-name { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 3px solid var(--c-accent); }
.ceo-role { font-family: var(--font-latin); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-soft); font-weight: 600; }
.ceo-jp { font-family: var(--font-jp-serif); font-size: 24px; font-weight: 700; color: #fff; }
.ceo-en { font-family: var(--font-latin); font-size: 14px; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.ceo-msg .eyebrow { color: var(--c-accent-soft); }
.ceo-msg .eyebrow::before { background: var(--c-accent-soft); }
.ceo-msg h2 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); margin-top: 18px; }
.ceo-msg h2 em { font-style: normal; color: var(--c-accent-soft); }
.ceo-msg p { color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 2.05; margin: 20px 0 0; }
.ceo-sign { margin-top: 30px; display: flex; align-items: baseline; gap: 14px; }
.ceo-sign-l { font-size: 13px; color: rgba(255,255,255,.6); }
.ceo-sign-n { font-family: var(--font-jp-serif); font-size: 26px; font-weight: 700; color: #fff; letter-spacing: .08em; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
.value { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; padding: 28px 24px; transition: transform .35s, box-shadow .35s, border-color .35s; }
.value:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -46px rgba(40,20,15,.5); border-color: var(--c-line-strong); }
.v-ico { width: 44px; height: 44px; color: var(--c-primary); margin-bottom: 18px; }
.v-ico svg { width: 100%; height: 100%; }
.value h3 { font-size: 20px; }
.value p { font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.9; margin: 11px 0 0; }

.timeline { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 28px; padding: 0 0 34px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 107px; top: 10px; bottom: -10px; width: 1px; background: var(--c-line-strong); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.tl-year { font-family: var(--font-latin); font-size: 26px; font-weight: 600; color: var(--c-primary); text-align: right; position: relative; }
.tl-year::after { content: ""; position: absolute; right: -23px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-accent); border: 2px solid var(--c-paper); box-shadow: 0 0 0 1px var(--c-line-strong); }
.tl-body h4 { font-size: 18px; }
.tl-body p { font-size: 14px; color: var(--c-ink-soft); line-height: 1.85; margin: 7px 0 0; }

.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 30px); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: clamp(28px, 3.5vw, 44px) 0; }
.ast { text-align: center; position: relative; }
.ast:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background: var(--c-line); }
.ast-n { display: block; font-family: var(--font-latin); font-size: clamp(38px, 4.5vw, 58px); font-weight: 600; color: var(--c-primary); line-height: 1; }
.ast-n small { font-size: .5em; }
.ast-l { display: block; font-size: 13px; color: var(--c-ink-soft); margin-top: 10px; letter-spacing: .02em; }

@media (max-width: 920px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .ast:nth-child(2)::after { display: none; }
  .ast:nth-child(-n+2) { padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 760px) {
  .ceo { grid-template-columns: 1fr; }
  .ceo-portrait { position: static; max-width: 300px; }
}
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 70px 1fr; gap: 18px; }
  .timeline li::before { left: 81px; }
  .tl-year { font-size: 21px; }
  .tl-year::after { right: -19px; }
}

/* ============================================================
   DESTINATIONS PAGE — alternating feature cards
   ============================================================ */
/* ---- destinations search ---- */
.dest-search-wrap { margin-bottom: 40px; }
.dest-search-box {
  position: relative; display: flex; align-items: center;
  background: #fff; border: 1.5px solid var(--c-line);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: border-color .2s;
}
.dest-search-box:focus-within { border-color: var(--c-primary); }
.dest-search-ico { width: 18px; height: 18px; flex-shrink: 0; margin: 0 12px 0 16px; color: var(--c-ink-soft); }
.dest-search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1rem; padding: 14px 0; color: var(--c-ink);
  font-family: var(--font-body);
}
.dest-search-box input::placeholder { color: var(--c-ink-soft); }
.dest-clear {
  display: none; border: none; background: transparent; cursor: pointer;
  padding: 0 16px; font-size: 14px; color: var(--c-ink-soft);
  line-height: 1;
}
.dest-clear:hover { color: var(--c-primary); }
.dest-search-count { margin-top: 10px; font-size: .85rem; color: var(--c-ink-soft); min-height: 1.2em; }
.dest-no-results { text-align: center; padding: 60px 20px; color: var(--c-ink-soft); }
.dest-no-results p { margin-bottom: 16px; font-size: 1rem; }

/* ---- social share bar ---- */
.social-share-bar { background: var(--c-paper); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 20px 0; }
.ss-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ss-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); white-space: nowrap; }
.ss-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.ss-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--c-line);
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--c-ink); background: #fff;
  transition: border-color .18s, background .18s, color .18s;
}
.ss-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ss-btn:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.ss-facebook:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }
.ss-instagram:hover { background: #e1306c; border-color: #e1306c; color: #fff; }
.ss-tiktok:hover    { background: #010101; border-color: #010101; color: #fff; }
.ss-linkedin:hover  { background: #0077b5; border-color: #0077b5; color: #fff; }
@media (max-width: 600px) {
  .ss-inner { gap: 12px; }
  .ss-btn span { display: none; }
  .ss-btn { padding: 9px 12px; }
}

/* ---- inline share icons (inside summary/price boxes) ---- */
.tsp-share { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.tsp-share-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.tsp-share-icons { display: flex; gap: 8px; }
.tsp-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08); text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.tsp-share-btn svg { width: 15px; height: 15px; }
.tsp-share-btn:hover { background: rgba(255,255,255,.9); color: #1a1a1a; border-color: transparent; }
.tsp-share-fb:hover  { background: #1877f2; color: #fff; }
.tsp-share-ig:hover  { background: #e1306c; color: #fff; }
.tsp-share-tt:hover  { background: #010101; color: #fff; }
.tsp-share-li:hover  { background: #0077b5; color: #fff; }

/* hotel price box variant (light background) */
.hd-price-box .tsp-share { border-top-color: var(--c-line); }
.hd-price-box .tsp-share-label { color: var(--c-ink-soft); }
.hd-price-box .tsp-share-btn { border-color: var(--c-line); color: var(--c-ink-soft); background: transparent; }

/* destination hero variant */
.page-hero .tsp-share { border-top-color: rgba(255,255,255,.2); }

/* day tour aside card variant */
.td-book-body .tsp-share { border-top-color: #f0ede8; }
.td-book-body .tsp-share-label { color: #aaa; }
.td-book-body .tsp-share-btn { border-color: #e5e0d8; color: #888; background: transparent; }

.destpage-grid { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.destcard {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  border: 1px solid var(--c-line); border-radius: 5px; overflow: hidden; background: var(--c-bg);
  transition: box-shadow .4s, border-color .4s;
}
.destcard:hover { box-shadow: 0 40px 80px -52px rgba(40,20,15,.5); border-color: var(--c-line-strong); }
.destcard:nth-child(even) .destcard-media { order: 2; }
.destcard-media { position: relative; min-height: 320px; overflow: hidden; }
.destcard-media image-slot { width: 100%; height: 100%; display: block; }
.destcard-num {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--font-latin); font-size: 16px; font-weight: 600; letter-spacing: .1em;
  color: #fff; background: rgba(20,12,10,.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3); border-radius: 100px; padding: 4px 14px;
}
.destcard-body { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
.destcard-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.destcard-en { font-family: var(--font-latin); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.destcard-region { font-size: 12px; color: var(--c-ink-soft); border-left: 1px solid var(--c-line-strong); padding-left: 14px; }
.destcard-body h3 { font-size: clamp(26px, 2.8vw, 38px); margin: 10px 0 0; line-height: 1.3; }
.destcard-cat { display: inline-block; margin-top: 14px; background: var(--c-primary); color: #fff; font-family: var(--font-jp-serif); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; padding: 5px 14px; border-radius: 3px; }
.destcard-body p { font-size: 15px; line-height: 2; color: var(--c-ink-soft); margin: 18px 0 0; }
.destcard-tags { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.destcard-tags li { font-size: 12.5px; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 5px 14px; }
.destcard-link {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--c-primary);
  border-bottom: 1px solid transparent; padding-bottom: 4px; transition: gap .3s, border-color .3s;
}
.destcard-link .arr { font-family: var(--font-latin); font-size: 17px; }
.destcard-link:hover { gap: 16px; border-color: var(--c-primary); }

@media (max-width: 820px) {
  .destcard { grid-template-columns: 1fr; }
  .destcard:nth-child(even) .destcard-media { order: 0; }
  .destcard-media { min-height: 240px; aspect-ratio: 16/9; }
}

/* ============================================================
   DESTINATION DETAIL PAGE
   ============================================================ */
.dest-intro { background: var(--c-paper); }
.dest-intro .lead-para { font-size: 16px; line-height: 2.1; color: var(--c-ink-soft); max-width: 78ch; margin: 0; }

.dest-detail { background: var(--c-paper); padding-top: 0; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 70px); align-items: start; }

/* gallery */
.dd-gallery { position: sticky; top: 100px; }
.dd-main { position: relative; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; border: 1px solid var(--c-line); }
.dd-main image-slot { width: 100%; height: 100%; display: block; }
.dd-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px 16px; color: #fff; font-size: 13px; line-height: 1.7; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,6,8,.82)); }
.dd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.dd-thumb { position: relative; aspect-ratio: 1/1; border-radius: 3px; overflow: hidden; border: 2px solid transparent; transition: border-color .25s; }
.dd-thumb.on { border-color: var(--c-primary); }
.dd-thumb image-slot { width: 100%; height: 100%; display: block; }

/* characteristics */
.dd-char .eyebrow { margin-bottom: 6px; }
.dd-char h2 { font-size: clamp(26px, 3vw, 40px); padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
.dd-char h2 em { font-style: normal; color: var(--c-primary); }
.dd-char .char-desc { font-size: 15px; line-height: 2.05; color: var(--c-ink-soft); margin: 24px 0 0; }

.char-feature { display: inline-flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--c-line-strong); border-radius: 4px; padding: 16px 26px; margin-top: 26px; max-width: 220px; }
.char-feature .cf-l { font-family: var(--font-jp-serif); font-size: 15px; font-weight: 700; color: var(--c-primary); line-height: 1.6; }

.char-spec { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.char-row { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: start; }
.char-row .cr-k { background: var(--c-bg); border-radius: 3px; padding: 12px 14px; font-family: var(--font-jp-serif); font-weight: 700; font-size: 13.5px; color: var(--c-ink); text-align: center; line-height: 1.5; }
.char-row .cr-v { font-size: 14px; line-height: 1.9; color: var(--c-ink-soft); padding-top: 11px; }

/* quick-link anchor bar */
.dd-quick { background: var(--c-bg); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); position: sticky; top: 78px; z-index: 20; }
.dd-quick .wrap { display: flex; flex-wrap: wrap; gap: 0; }
.dd-quick a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 22px; font-size: 14px; font-weight: 600; color: var(--c-ink); letter-spacing: .02em;
  border-right: 1px solid var(--c-line); position: relative; transition: color .2s, background .2s;
}
.dd-quick a:first-child { border-left: 1px solid var(--c-line); }
.dd-quick a .qa-c { width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent); color: var(--c-primary-deep); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; transition: transform .2s; }
.dd-quick a:hover { color: var(--c-primary); background: var(--c-paper); }
.dd-quick a:hover .qa-c { transform: translateY(2px); }

/* recommended hotels/tours mini cards */
.dd-rec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 30px); }
.dd-rec {
  position: relative;
  display: grid; grid-template-columns: 150px 1fr; border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
  background: var(--c-paper); transition: box-shadow .35s, border-color .35s;
}
.dd-rec:hover { box-shadow: 0 30px 60px -46px rgba(40,20,15,.5); border-color: var(--c-line-strong); }
.dd-rec-go { position: absolute; inset: 0; z-index: 1; }
.dd-rec-media { position: relative; }
.dd-rec-media image-slot { width: 100%; height: 100%; min-height: 150px; display: block; }
.dd-rec-body { padding: 18px 20px; display: flex; flex-direction: column; }
.dd-rec-tag { font-family: var(--font-latin); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.dd-rec-body h4 { font-size: 17px; line-height: 1.5; margin: 6px 0 0; }
.dd-rec-body p { font-size: 12.5px; color: var(--c-ink-soft); line-height: 1.8; margin: 8px 0 0; }
.dd-rec-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dd-rec-price { font-family: var(--font-latin); font-size: 19px; font-weight: 600; color: var(--c-primary); }
.dd-rec-price small { font-size: 12px; }
.dd-rec-link { font-size: 12px; font-weight: 700; color: var(--c-ink-soft); }
.dd-rec:hover .dd-rec-link { color: var(--c-primary); }

/* access + nearby */
.dd-nearby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); }
.dd-near { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; transition: transform .35s, box-shadow .35s; }
.dd-near:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -40px rgba(40,20,15,.5); }
.dd-near-media { aspect-ratio: 16/10; }
.dd-near-media image-slot { width: 100%; height: 100%; display: block; }
.dd-near-body { padding: 18px 20px 20px; }
.dd-near-cat { font-size: 11.5px; font-weight: 700; color: var(--c-secondary); letter-spacing: .04em; }
.dd-near-body h4 { font-size: 18px; margin: 6px 0 0; }
.dd-near-body p { font-size: 13px; color: var(--c-ink-soft); line-height: 1.85; margin: 8px 0 0; }

@media (max-width: 860px) {
  .dd-grid { grid-template-columns: 1fr; }
  .dd-gallery { position: static; }
  .dd-rec-grid { grid-template-columns: 1fr; }
  .dd-nearby-grid { grid-template-columns: 1fr; }
  .dd-quick { position: static; }
  .dd-quick .wrap { overflow-x: auto; flex-wrap: nowrap; }
  .dd-quick a { white-space: nowrap; }
}
@media (max-width: 480px) {
  .char-row { grid-template-columns: 92px 1fr; gap: 12px; }
  .dd-rec { grid-template-columns: 110px 1fr; }
}

/* ============================================================
   TOUR DETAIL PAGE
   ============================================================ */
.tourhero .th-code { font-family: var(--font-latin); font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.th-badges { display: flex; gap: 8px; margin-bottom: 14px; }
.th-badge { background: var(--c-accent); color: var(--c-primary-deep); font-family: var(--font-jp-serif); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; padding: 4px 12px; border-radius: 3px; }

/* summary bar */
.tour-summary { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.ts-inner { display: grid; grid-template-columns: 1fr 300px; gap: clamp(24px, 3vw, 48px); padding: clamp(26px, 3vw, 40px) 0; align-items: center; }
.ts-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.tf { background: var(--c-paper); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.tf-k { font-family: var(--font-latin); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.tf-v { font-size: 14px; font-weight: 600; color: var(--c-ink); line-height: 1.5; }
.tf-v small { font-size: 11.5px; font-weight: 400; color: var(--c-ink-soft); }
.ts-price { background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: 4px; padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tsp-from { font-size: 11px; color: var(--c-ink-soft); letter-spacing: .04em; }
.tsp-amt { font-family: var(--font-latin); font-size: 38px; font-weight: 600; color: var(--c-primary); line-height: 1; display: inline-block; }
.tsp-amt small { font-size: 19px; }
.tsp-amt:hover { text-decoration: underline; }
.tsp-tax { font-size: 11px; color: var(--c-ink-soft); }
.tsp-btn { width: 100%; justify-content: center; margin-top: 14px; }
.tsp-sub { font-size: 12.5px; color: var(--c-primary); font-weight: 600; margin-top: 10px; align-self: center; }
.tsp-sub:hover { text-decoration: underline; }

/* points */
.tour-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.tp { display: grid; grid-template-columns: 150px 1fr; border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; background: var(--c-bg); }
.tp-media { position: relative; }
.tp-media image-slot { width: 100%; height: 100%; min-height: 150px; display: block; }
.tp-num { position: absolute; top: 10px; left: 12px; z-index: 2; font-family: var(--font-latin); font-size: 14px; font-weight: 600; color: #fff; background: rgba(20,12,10,.55); border: 1px solid rgba(255,255,255,.3); border-radius: 100px; padding: 3px 12px; }
.tp-body { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.tp-body h3 { font-size: 18px; line-height: 1.5; }
.tp-body p { font-size: 13px; color: var(--c-ink-soft); line-height: 1.85; margin: 9px 0 0; }

/* itinerary timeline */
.itin { list-style: none; margin: 0; padding: 0; }
.itin-day { display: grid; grid-template-columns: 84px 1fr; gap: 24px; padding-bottom: 4px; position: relative; }
.itin-day::before { content: ""; position: absolute; left: 41px; top: 52px; bottom: -4px; width: 2px; background: var(--c-line); }
.itin-day:last-child::before { display: none; }
.id-mark { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.id-mark { width: 84px; }
.id-mark .id-d { font-family: var(--font-latin); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); }
.id-mark .id-n { width: 52px; height: 52px; border-radius: 50%; background: var(--c-primary); color: #fff; font-family: var(--font-latin); font-size: 24px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.id-body { padding-bottom: 30px; }
.id-body h3 { font-size: 19px; line-height: 1.5; }
.id-body p { font-size: 14px; color: var(--c-ink-soft); line-height: 1.9; margin: 8px 0 0; }
.id-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }
.id-stay, .id-meal { font-size: 12.5px; font-weight: 600; color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 100px; padding: 5px 14px; }
.id-meal { color: var(--c-secondary); }

/* included / excluded */
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.inc { border: 1px solid var(--c-line); border-radius: 4px; padding: 26px 28px; background: var(--c-bg); }
.inc h4 { font-size: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.inc h4::before { content: ""; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; flex-shrink: 0; }
.inc-yes h4 { color: var(--c-secondary); }
.inc-yes h4::before { content: "✓"; background: var(--c-secondary); color: #fff; font-size: 13px; align-items: center; justify-content: center; }
.inc-no h4 { color: var(--c-ink-soft); }
.inc-no h4::before { content: "✕"; background: var(--c-ink-soft); color: #fff; font-size: 12px; align-items: center; justify-content: center; }
.inc ul { list-style: none; padding: 0; margin: 0; }
.inc li { position: relative; padding: 7px 0 7px 20px; font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.8; border-bottom: 1px dashed var(--c-line); }
.inc li:last-child { border-bottom: none; }
.inc li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; }
.inc-yes li::before { background: var(--c-secondary); }
.inc-no li::before { background: var(--c-line-strong); }

/* price table */
.price-table .pt-price { font-family: var(--font-latin); font-size: 19px; font-weight: 600; color: var(--c-primary); }
.price-table .pt-period { font-size: 13.5px; color: var(--c-ink-soft); white-space: nowrap; }
.price-table th, .price-table td { text-align: left; padding: 16px 18px; }
.seat { font-size: 18px; font-weight: 700; }
.seat.ok { color: var(--c-secondary); }
.seat.few { color: var(--c-accent); }
.pt-btn { display: inline-block; background: var(--c-primary); color: #fff; font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 3px; white-space: nowrap; transition: background .25s; }
.pt-btn:hover { background: var(--c-primary-deep); }
.pt-note { font-size: 13px; color: var(--c-ink-soft); margin: 18px 0 0; line-height: 1.8; }

/* price table — vehicle / pax-count matrix */
.pt-matrix th { white-space: nowrap; font-size: 20px; }
.pt-matrix th { white-space: nowrap; }
.pt-matrix .pt-vehicle { background: var(--c-bg); vertical-align: middle; white-space: nowrap; }
.pt-matrix .pt-price { font-size: 15px; }
.pt-sgl-row td { background: var(--c-bg); font-size: 13px; color: var(--c-ink-soft); line-height: 1.5; }
.pt-peak { margin-top: 32px; }
.pt-peak h3 { font-family: var(--font-jp-serif); font-size: 17px; margin: 0 0 12px; }
.pt-peak h3 small { font-family: var(--font-latin); font-size: 12px; color: var(--c-ink-soft); font-weight: 400; }

/* ── Tour departure calendar ──────────────────────────────── */
/* ── Tour route map ───────────────────────────────────────── */
.tour-map-wrap { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.tour-map { height: 420px; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-line-strong); }
.tour-map-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tour-map-legend li { display: flex; align-items: flex-start; gap: 12px; }
.tm-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--font-latin); }
.tour-map-legend li strong { font-size: 14px; color: var(--c-ink); display: block; line-height: 1.3; }
.tour-map-legend li span { font-size: 12px; color: var(--c-ink-soft); line-height: 1.4; }
.tm-marker { width: 32px; height: 32px; background: var(--c-primary, #7E1834); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.tm-marker span { transform: rotate(45deg); color: #fff; font-size: 12px; font-weight: 700; font-family: sans-serif; }
@media (max-width: 760px) {
  .tour-map-wrap { grid-template-columns: 1fr; }
  .tour-map { height: 300px; }
  .tour-map-legend { flex-direction: row; flex-wrap: wrap; }
}

/* ── Tour departure calendar ──────────────────────────────── */
.tour-cal { margin-top: 40px; border: 1px solid var(--c-line-strong); border-radius: 6px; overflow: hidden; background: var(--c-paper); }
.tc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--c-primary); color: #fff; }
.tc-month { font-family: var(--font-jp-serif); font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.tc-nav { background: none; border: none; color: #fff; cursor: pointer; padding: 4px 8px; border-radius: 3px; transition: background .2s; display: flex; align-items: center; }
.tc-nav svg { width: 20px; height: 20px; }
.tc-nav:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.tc-nav:disabled { opacity: .35; cursor: default; }
.tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--c-line); }
.tc-day-name { text-align: center; padding: 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--c-ink-soft); background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.tc-day-name.sun { color: #c0392b; }
.tc-day-name.sat { color: #2471a3; }
.tc-cell { min-height: 90px; padding: 10px 8px 8px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tc-cell:nth-child(7n) { border-right: none; }
.tc-cell.empty { background: var(--c-bg); opacity: .4; }
.tc-cell.sun .tc-d { color: #c0392b; }
.tc-cell.sat .tc-d { color: #2471a3; }
.tc-d { font-size: 15px; font-weight: 600; color: var(--c-ink); line-height: 1; }
.tc-cell.empty .tc-d { display: none; }
.tc-cell.has-date { background: color-mix(in srgb, var(--c-primary) 6%, var(--c-paper)); cursor: default; }
.tc-cell.has-date.few { background: color-mix(in srgb, #d4a017 10%, var(--c-paper)); }
.tc-cell.has-date.full { background: var(--c-bg); opacity: .6; }
.tc-price { font-family: var(--font-latin); font-size: 16px; font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.tc-avail { font-size: 16px; font-weight: 700; }
.tc-avail.ok { color: var(--c-secondary, #1a7a4a); }
.tc-avail.few { color: #b7850a; }
.tc-avail.full { color: var(--c-ink-soft); }
.tc-legend { display: flex; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--c-line); background: var(--c-bg); }
.tc-leg { font-size: 12px; color: var(--c-ink-soft); }
.tc-leg.ok { color: var(--c-secondary, #1a7a4a); }
.tc-leg.few { color: #b7850a; }
@media (max-width: 600px) {
  .tc-cell { min-height: 70px; padding: 6px 3px 5px; }
  .tc-price { font-size: 11px; }
  .tc-avail { font-size: 12px; }
  .tc-d { font-size: 13px; }
}

.terms-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

@media (max-width: 900px) {
  .ts-inner { grid-template-columns: 1fr; }
  .tour-points { grid-template-columns: 1fr; }
  .inc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ts-facts { grid-template-columns: repeat(2, 1fr); }
  .tp { grid-template-columns: 110px 1fr; }
  .itin-day { grid-template-columns: 60px 1fr; gap: 16px; }
  .itin-day::before { left: 29px; }
  .id-mark { width: 60px; }
  .id-mark .id-n { width: 44px; height: 44px; font-size: 20px; }
  .price-table .r-air { display: none; }
}

/* ============================================================
   CHECKOUT PAGE — passenger select + price calendar + summary
   ============================================================ */
.checkout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(24px, 3vw, 44px); align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }

.cstep-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--c-ink); }
.cs-no { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--c-secondary); color: #fff; font-family: var(--font-latin); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.cstep-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.cs-hint { margin-left: auto; font-size: 12.5px; color: var(--c-ink-soft); transition: color .2s; }
.cs-hint.show { color: #C0392B; font-weight: 700; }

.cstep-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; }
.cstep-col { background: var(--c-bg); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cstep-coltitle { font-size: 14px; font-weight: 700; color: var(--c-ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cstep-coltitle small { font-size: 11px; color: var(--c-ink-soft); font-weight: 400; }
.cstep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cstep-row.sub { padding-left: 4px; }
.cstep-l { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cstep-l b { font-size: 15px; color: var(--c-ink); }
.cstep-l small { font-size: 11px; color: var(--c-ink-soft); }
.cstep-ico { font-size: 15px; }
.cstep-bed { font-size: 13px; color: var(--c-ink-soft); }
.cstep { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cstep button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-paper); color: var(--c-primary); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
.cstep button:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.cstep-n { font-family: var(--font-latin); font-size: 19px; font-weight: 600; min-width: 26px; text-align: center; color: var(--c-ink); }

/* month tabs */
.month-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.month-tab { background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 9px 22px; font-family: var(--font-jp-sans); font-size: 14px; font-weight: 600; color: var(--c-ink); cursor: pointer; transition: all .2s; }
.month-tab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.month-tab.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.cal-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--c-ink-soft); margin-bottom: 12px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg { font-style: normal; font-weight: 700; }
.lg.ok { color: var(--c-secondary); }
.lg.few { color: var(--c-accent); }
.lg.x { color: var(--c-ink-soft); }
.cal-note { font-size: 12px; color: var(--c-ink-soft); line-height: 1.8; margin: 0 0 22px; }

/* calendar grid */
.cal-grid { }
.cal-title { font-family: var(--font-jp-serif); font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.cal-wdrow, .cal-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { text-align: center; font-size: 13px; font-weight: 700; color: var(--c-ink-soft); padding-bottom: 8px; }
.cal-wd.sun { color: #C0392B; }
.cal-wd.sat { color: #2A6FAF; }
.cal-body { gap: 6px; margin-top: 6px; }
.cal-cell { aspect-ratio: 1/1.05; border: 1px solid var(--c-line); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--c-paper); }
.cal-cell.empty { border: none; background: transparent; }
.cal-cell.sun { background: color-mix(in srgb, #C0392B 5%, var(--c-paper)); }
.cal-cell.sat { background: color-mix(in srgb, #2A6FAF 6%, var(--c-paper)); }
.cal-cell .cal-d { font-family: var(--font-latin); font-size: 15px; font-weight: 600; color: var(--c-ink); }
.cal-cell.sun .cal-d { color: #C0392B; }
.cal-cell .cal-mark { font-size: 13px; font-weight: 700; line-height: 1; }
.cal-cell .cal-p { font-family: var(--font-latin); font-size: 12px; color: var(--c-ink-soft); }
button.cal-cell.sel { cursor: pointer; transition: all .18s; font-family: inherit; }
.cal-cell.ok .cal-mark { color: var(--c-secondary); }
.cal-cell.few .cal-mark { color: var(--c-accent); }
button.cal-cell.sel:hover { border-color: var(--c-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 18%, transparent); transform: translateY(-2px); }
.cal-cell.x { opacity: .5; }
.cal-cell.x .cal-mark { color: var(--c-ink-soft); }
.cal-cell.x .cal-d, .cal-cell.x .cal-p { color: var(--c-ink-soft); }
.cal-cell.on { border-color: var(--c-primary); background: var(--c-primary); box-shadow: 0 8px 20px -10px rgba(40,20,15,.5); }
.cal-cell.on .cal-d, .cal-cell.on .cal-mark, .cal-cell.on .cal-p { color: #fff; }

/* no-availability box */
.co-noavail { margin-top: 36px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 4px; padding: 24px; }
.co-na-head { text-align: center; font-family: var(--font-jp-serif); font-weight: 700; font-size: 17px; margin-bottom: 16px; }
.co-na-blue { background: color-mix(in srgb, var(--c-secondary) 12%, var(--c-paper)); border: 1px solid color-mix(in srgb, var(--c-secondary) 30%, transparent); border-radius: 4px; padding: 14px 18px; font-size: 13.5px; color: var(--c-ink); line-height: 1.8; text-align: center; }
.co-na-blue a { display: inline-block; color: var(--c-secondary); font-weight: 700; margin-top: 6px; }
.co-na-blue a:hover { text-decoration: underline; }
.co-na-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.co-na-search { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--c-primary); color: #fff; font-weight: 700; font-size: 14px; border-radius: 4px; padding: 18px; transition: background .25s; }
.co-na-search:hover { background: var(--c-primary-deep); }
.co-na-tel { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; padding: 14px 18px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.co-na-tel-l { font-size: 12px; color: var(--c-ink-soft); }
.co-na-tel-n { font-family: var(--font-latin); font-size: 22px; font-weight: 600; color: var(--c-primary); }
.co-na-tel-h { font-size: 11px; color: var(--c-ink-soft); }

/* summary side */
.checkout-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.cside { border: 1px solid var(--c-line-strong); border-radius: 6px; overflow: hidden; }
.cside-head { background: var(--c-primary); color: #fff; text-align: center; font-family: var(--font-jp-serif); font-weight: 700; font-size: 15px; letter-spacing: .08em; padding: 12px; }
.cside-body { padding: 18px 20px 22px; background: var(--c-paper); }
.cs-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.cs-block-t { font-size: 14px; font-weight: 700; color: var(--c-ink); margin-bottom: 10px; display: flex; gap: 7px; }
.cs-num { color: var(--c-accent); font-family: var(--font-latin); }
.cs-people { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.cs-people div { display: flex; justify-content: space-between; gap: 10px; }
.cs-people dt { font-size: 12.5px; color: var(--c-ink-soft); }
.cs-people dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.cs-date { font-family: var(--font-latin); font-size: 19px; font-weight: 600; color: var(--c-ink); }
.cs-date.muted { font-size: 14px; color: var(--c-ink-soft); font-family: var(--font-jp-sans); }
.cs-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0 16px; }
.cs-total-l { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.cs-total-v { font-family: var(--font-latin); font-size: 28px; font-weight: 700; color: var(--c-primary); }
.cside-confirm { width: 100%; padding: 15px; background: var(--c-primary); color: #fff; border: none; border-radius: 4px; font-family: var(--font-jp-sans); font-weight: 700; font-size: 16px; letter-spacing: .08em; cursor: pointer; transition: background .25s; }
.cside-confirm:hover { background: var(--c-primary-deep); }
.cside-confirm.disabled { background: var(--c-line-strong); cursor: not-allowed; }

.brk-toggle { width: 100%; margin-top: 12px; background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: 4px; padding: 12px; font-family: var(--font-jp-sans); font-size: 13.5px; font-weight: 700; color: var(--c-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.brk-caret { transition: transform .25s; }
.brk-toggle[aria-expanded="true"] .brk-caret { transform: rotate(90deg); }
.brk-box { margin-top: 12px; }
.brk-box.collapsed { display: none; }
.brk-sub { display: flex; justify-content: space-between; gap: 10px; background: var(--c-bg); padding: 10px 12px; border-radius: 3px; font-size: 13px; font-weight: 700; color: var(--c-ink); }
.brk-sub b, .brk-tax b { font-family: var(--font-latin); color: var(--c-primary); }
.brk-list { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.brk-list div { display: flex; justify-content: space-between; gap: 10px; padding: 0 12px; }
.brk-list dt { font-size: 12.5px; color: var(--c-ink-soft); }
.brk-list dd { margin: 0; font-family: var(--font-latin); font-size: 13px; color: var(--c-ink); }
.brk-tax { display: flex; justify-content: space-between; gap: 10px; background: var(--c-bg); padding: 10px 12px; border-radius: 3px; font-size: 13px; font-weight: 700; color: var(--c-ink); margin-top: 6px; }

.confirmed-panel { border: 1px solid var(--c-secondary); border-top: 3px solid var(--c-secondary); border-radius: 6px; padding: 26px 22px; text-align: center; background: var(--c-paper); }
.cf-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--c-secondary); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.confirmed-panel h3 { font-size: 19px; line-height: 1.5; }
.confirmed-panel > p { font-size: 13px; color: var(--c-ink-soft); line-height: 1.85; margin: 10px 0 18px; }
.cf-summary { text-align: left; border-top: 1px solid var(--c-line); margin: 0 0 18px; }
.cf-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--c-line); }
.cf-summary dt { font-size: 12px; color: var(--c-ink-soft); font-weight: 700; flex-shrink: 0; }
.cf-summary dd { margin: 0; font-size: 13px; color: var(--c-ink); text-align: right; }

@media (max-width: 980px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
  .cstep-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cal-body { gap: 3px; }
  .cal-wdrow { gap: 3px; }
  .cal-cell .cal-p { font-size: 10px; }
  .cal-cell .cal-d { font-size: 13px; }
  .co-na-row { grid-template-columns: 1fr; }
  .cstep-head { flex-wrap: wrap; }
  .cs-hint { margin-left: 0; flex-basis: 100%; }
}


/* ============================================================
   HOTEL DETAIL PAGE
   ============================================================ */
.hd-gallery { background: var(--c-bg); padding-top: 18px; padding-bottom: clamp(24px, 3vw, 40px); }
.crumb.light a, .crumb.light span { }
.gal { display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px; margin-top: 14px; height: clamp(320px, 44vw, 520px); }
.gal-main { border-radius: 5px; overflow: hidden; }
.gal-main image-slot { width: 100%; height: 100%; display: block; }
.gal-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.gal-thumb { position: relative; border: none; padding: 0; border-radius: 5px; overflow: hidden; cursor: pointer; background: var(--c-line); }
.gal-thumb image-slot { width: 100%; height: 100%; display: block; }
.gal-thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--c-primary); transition: box-shadow .2s; }
.gal-thumb.on::after { box-shadow: inset 0 0 0 3px var(--c-primary); }
.gal-thumb.more .gal-more { position: absolute; inset: 0; background: rgba(20,12,10,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-latin); font-size: 18px; font-weight: 600; letter-spacing: .05em; }

/* summary */
.hd-summary { background: var(--c-paper); border-bottom: 1px solid var(--c-line); padding: clamp(26px, 3vw, 40px) 0; }
.hd-sum-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.hd-tags { display: flex; gap: 8px; margin-bottom: 12px; }
.hd-tag { font-family: var(--font-jp-serif); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; padding: 4px 12px; border-radius: 3px; background: var(--c-bg); border: 1px solid var(--c-line-strong); color: var(--c-ink); }
.hd-tag.heritage { background: var(--c-primary-deep); color: #fff; border-color: var(--c-primary-deep); }
.hd-stars { color: var(--c-accent); letter-spacing: 2px; font-size: 16px; }
.hd-cat { color: var(--c-ink-soft); font-size: 12px; letter-spacing: .08em; margin-left: 8px; font-family: var(--font-jp-sans); }
.hd-sum-main h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 8px 0 0; line-height: 1.3; }
.hd-en { font-family: var(--font-latin); font-size: 15px; letter-spacing: .1em; color: var(--c-ink-soft); margin-top: 4px; }
.hd-loc { font-size: 13.5px; color: var(--c-secondary); font-weight: 600; margin-top: 12px; }
.hd-lead { font-size: 15px; line-height: 2; color: var(--c-ink-soft); margin: 16px 0 0; max-width: 60ch; }
.hd-keyfacts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; }
.hd-keyfacts li { background: var(--c-bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.kf-k { font-size: 11px; color: var(--c-ink-soft); }
.kf-v { font-size: 14px; font-weight: 700; color: var(--c-ink); }

.hd-sum-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.hd-score { display: flex; align-items: center; gap: 14px; border: 1px solid var(--c-line); border-radius: 5px; padding: 14px 18px; background: var(--c-bg); }
.hd-score-num { font-family: var(--font-latin); font-size: 34px; font-weight: 700; color: var(--c-primary); line-height: 1; }
.hd-score-num small { font-size: 15px; color: var(--c-ink-soft); }
.hd-score-meta { display: flex; flex-direction: column; gap: 2px; }
.hd-score-stars { color: var(--c-accent); letter-spacing: 1px; font-size: 14px; }
.hd-score-rev { font-size: 12px; color: var(--c-ink-soft); }
.hd-price-box { border: 1px solid var(--c-line-strong); border-radius: 5px; padding: 20px 22px; display: flex; flex-direction: column; gap: 3px; background: var(--c-paper); }
.hd-pb-l { font-size: 11px; color: var(--c-ink-soft); }
.hd-pb-amt { font-family: var(--font-latin); font-size: 34px; font-weight: 600; color: var(--c-primary); line-height: 1; }
.hd-pb-amt small { font-size: 17px; }
.hd-pb-tax { font-size: 11px; color: var(--c-ink-soft); }
.hd-pb-btn { width: 100%; justify-content: center; margin-top: 14px; }
.hd-pb-sub { font-size: 12.5px; color: var(--c-primary); font-weight: 600; text-align: center; margin-top: 8px; }
.hd-pb-sub:hover { text-decoration: underline; }

/* plans */
.plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-chip { background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 8px 18px; font-family: var(--font-jp-sans); font-size: 13px; font-weight: 600; color: var(--c-ink); cursor: pointer; transition: all .2s; }
.plan-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.plan-chip.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.plan-sortwrap { font-size: 12.5px; color: var(--c-ink-soft); display: flex; align-items: center; gap: 8px; }
.plan-sort { font-family: var(--font-jp-sans); font-size: 13px; padding: 8px 12px; border: 1px solid var(--c-line-strong); border-radius: 4px; background: var(--c-paper); color: var(--c-ink); cursor: pointer; }
.plan-count-row { font-size: 13px; color: var(--c-ink-soft); padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--c-ink); }
.plan-count-row b { color: var(--c-primary); font-family: var(--font-latin); font-size: 17px; }

.plan-list { display: flex; flex-direction: column; gap: 18px; }
.plan { display: grid; grid-template-columns: 220px 1fr 200px; border: 1px solid var(--c-line); border-radius: 5px; overflow: hidden; background: var(--c-paper); transition: box-shadow .35s, border-color .35s; }
.plan:hover { box-shadow: 0 30px 60px -44px rgba(40,20,15,.5); border-color: var(--c-line-strong); }
.plan-media image-slot { width: 100%; height: 100%; min-height: 170px; display: block; }
.plan-body { padding: 18px 22px; border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
.plan-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.plan-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 11px; border-radius: 3px; background: var(--c-secondary); color: #fff; }
.plan-badge.meal { background: var(--c-primary); }
.plan-badge.early { background: var(--c-accent); color: var(--c-primary-deep); }
.plan-badge.suite { background: var(--c-primary-deep); }
.plan-badge.soft { background: var(--c-bg); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.plan-body h3 { font-size: 18px; line-height: 1.55; }
.plan-desc { font-size: 13px; color: var(--c-ink-soft); line-height: 1.85; margin: 9px 0 0; }
.plan-feat { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-feat li { font-size: 11.5px; color: var(--c-ink-soft); border: 1px solid var(--c-line); border-radius: 100px; padding: 3px 11px; }
.plan-buy { padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; text-align: right; }
.plan-buy-l { font-size: 11px; color: var(--c-ink-soft); }
.plan-buy-strike { font-size: 13px; color: var(--c-ink-soft); text-decoration: line-through; }
.plan-buy-amt { font-family: var(--font-latin); font-size: 27px; font-weight: 600; color: var(--c-primary); line-height: 1.1; }
.plan-buy-amt small { font-size: 15px; }
.plan-buy-tax { font-size: 10.5px; color: var(--c-ink-soft); }
.plan-btn { width: 100%; justify-content: center; margin-top: 10px; padding: 11px; font-size: 13px; }

/* rooms */
.hd-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.hd-room { border: 1px solid var(--c-line); border-radius: 5px; overflow: hidden; background: var(--c-paper); }
.hd-room-media image-slot { width: 100%; height: 200px; display: block; }
.hd-room-body { padding: 18px 20px; }
.hd-room-body h3 { font-size: 19px; }
.hd-room-spec { font-family: var(--font-latin); font-size: 12px; letter-spacing: .04em; color: var(--c-secondary); font-weight: 600; margin: 6px 0 0; }
.hd-room-body p { font-size: 13px; color: var(--c-ink-soft); line-height: 1.8; margin: 9px 0 0; }

/* facilities */
.hd-fac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hd-fac { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; border: 1px solid var(--c-line); border-radius: 5px; padding: 22px 10px; background: var(--c-bg); font-size: 13px; font-weight: 600; color: var(--c-ink); }
.hf-i { font-size: 24px; }

/* reviews */
.hd-rev { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
.rv-overall { border: 1px solid var(--c-line); border-radius: 6px; padding: 24px; text-align: center; background: var(--c-paper); position: sticky; top: 96px; }
.rv-big { font-family: var(--font-latin); font-size: 52px; font-weight: 700; color: var(--c-primary); line-height: 1; }
.rv-big small { font-size: 20px; color: var(--c-ink-soft); }
.rv-stars { color: var(--c-accent); letter-spacing: 2px; font-size: 17px; margin-top: 6px; }
.rv-count { font-size: 12.5px; color: var(--c-ink-soft); margin-top: 4px; }
.rv-bars { margin: 20px 0 0; display: flex; flex-direction: column; gap: 11px; }
.rv-bars div { display: grid; grid-template-columns: 48px 1fr 32px; align-items: center; gap: 10px; }
.rv-bars dt { font-size: 12.5px; color: var(--c-ink-soft); text-align: left; }
.rv-bar { height: 7px; border-radius: 100px; background: var(--c-line); overflow: hidden; margin: 0; }
.rv-bar span { display: block; height: 100%; background: var(--c-accent); border-radius: 100px; width: 0; transition: width .8s cubic-bezier(.2,.7,.3,1); }
.rv-bars b { font-family: var(--font-latin); font-size: 13px; color: var(--c-ink); text-align: right; }
.rv-list { display: flex; flex-direction: column; gap: 16px; }
.rv-item { border: 1px solid var(--c-line); border-radius: 6px; padding: 20px 22px; background: var(--c-paper); }
.rv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rv-av { width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary); color: #fff; font-family: var(--font-latin); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-name { font-size: 14.5px; font-weight: 700; color: var(--c-ink); }
.rv-meta { font-size: 11.5px; color: var(--c-ink-soft); margin-top: 2px; }
.rv-item p { font-size: 13.5px; line-height: 1.95; color: var(--c-ink-soft); margin: 0; }

/* access */
.hd-access { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.hd-map { aspect-ratio: 16/11; min-height: 260px; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-line); }
.hd-map image-slot { width: 100%; height: 100%; display: block; }
.hd-map #hotelMap { width: 100%; height: 100%; min-height: 260px; }
.hd-acc-list { margin: 0; border-top: 1px solid var(--c-line); }
.hd-acc-list div { display: grid; grid-template-columns: 80px 1fr; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--c-line); }
.hd-acc-list dt { font-size: 12.5px; font-weight: 700; color: var(--c-ink); }
.hd-acc-list dd { margin: 0; font-size: 13px; color: var(--c-ink-soft); line-height: 1.7; }
.hd-near { margin-top: 22px; }
.hd-near-t { font-size: 13px; font-weight: 700; color: var(--c-ink); }
.hd-near ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hd-near li { font-size: 12.5px; color: var(--c-ink-soft); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 100px; padding: 5px 14px; }

/* sticky reserve bar */
.hd-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--c-paper); border-top: 1px solid var(--c-line-strong); box-shadow: 0 -10px 30px -20px rgba(40,20,15,.4); transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.hd-sticky.show { transform: translateY(0); }
.hd-sticky .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.hd-sticky-info b { font-family: var(--font-jp-serif); font-size: 16px; }
.hd-sticky-stars { color: var(--c-accent); letter-spacing: 1px; font-size: 13px; margin-left: 10px; }
.hd-sticky-buy { display: flex; align-items: center; gap: 18px; }
.hd-sticky-price { font-family: var(--font-latin); font-size: 24px; font-weight: 600; color: var(--c-primary); }
.hd-sticky-price small { font-size: 14px; }

@media (max-width: 980px) {
  .hd-sum-grid { grid-template-columns: 1fr; }
  .hd-sum-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .hd-score, .hd-price-box { flex: 1; min-width: 240px; }
  .hd-rev { grid-template-columns: 1fr; }
  .rv-overall { position: static; }
  .hd-fac-grid { grid-template-columns: repeat(4, 1fr); }
  .hd-rooms { grid-template-columns: 1fr 1fr; }
  .hd-access { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .gal { grid-template-columns: 1fr; height: auto; }
  .gal-main { height: 240px; }
  .gal-side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 70px; }
  .plan { grid-template-columns: 1fr; }
  .plan-media image-slot { height: 180px; min-height: 0; }
  .plan-body { border-left: none; border-right: none; border-top: 1px solid var(--c-line); }
  .plan-buy { align-items: stretch; text-align: left; border-top: 1px solid var(--c-line); }
  .hd-keyfacts { grid-template-columns: 1fr 1fr; }
  .hd-fac-grid { grid-template-columns: repeat(3, 1fr); }
  .hd-rooms { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .hd-fac-grid { grid-template-columns: repeat(2, 1fr); }
  .hd-sticky-info b { font-size: 14px; }
  .hd-sticky-price { font-size: 20px; }
}

/* ============================================================
   SERVICES DETAIL PAGE
   ============================================================ */
.sd-block { padding-block: clamp(48px, 6vw, 88px); }
.sd-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.sd-detail.reverse .sd-media { order: 2; }
.sd-media { position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-line); }
.sd-media image-slot { width: 100%; height: 100%; display: block; }
.sd-badge { position: absolute; top: 0; left: 16px; z-index: 2; background: var(--c-accent); color: var(--c-primary-deep); font-family: var(--font-jp-serif); font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 6px 14px 7px; }
.sd-en { font-family: var(--font-latin); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.sd-info h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 8px 0 0; }
.sd-lead { font-size: 15px; line-height: 2; color: var(--c-ink-soft); margin: 16px 0 0; }
.sd-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.sd-points li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.6; }
.sd-points li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--c-secondary); font-weight: 700; }
.sd-points b { color: var(--c-ink); }
.sd-pricebox { margin: 24px 0 0; border: 1px solid var(--c-line); border-radius: 5px; overflow: hidden; }
.sd-price { width: 100%; border-collapse: collapse; }
.sd-price th, .sd-price td { text-align: left; padding: 11px 16px; font-size: 13.5px; border-bottom: 1px solid var(--c-line); }
.sd-price thead th { background: var(--c-bg); font-size: 12px; color: var(--c-ink-soft); font-weight: 700; letter-spacing: .04em; }
.sd-price tbody tr:last-child td { border-bottom: none; }
.sd-price td b { font-family: var(--font-latin); font-size: 16px; color: var(--c-primary); }
.sd-price-note { font-size: 11.5px; color: var(--c-ink-soft); line-height: 1.7; margin: 10px 14px 12px; }
.sd-book { margin-top: 22px; }

/* flow */
.sd-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); counter-reset: none; }
.sd-flow li { position: relative; border: 1px solid var(--c-line); border-top: 3px solid var(--c-primary); border-radius: 5px; padding: 26px 22px 24px; background: var(--c-bg); }
.sf-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary); color: #fff; font-family: var(--font-latin); font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.sd-flow h3 { font-size: 18px; }
.sd-flow p { font-size: 13px; color: var(--c-ink-soft); line-height: 1.85; margin: 8px 0 0; }

/* faq */
.sd-faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--c-line); border-radius: 5px; background: var(--c-paper); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--font-jp-serif); font-weight: 700; font-size: 15.5px; color: var(--c-ink); display: flex; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; font-family: var(--font-latin); color: var(--c-accent); font-weight: 700; font-size: 17px; flex-shrink: 0; }
.faq-item summary::after { content: "＋"; margin-left: auto; color: var(--c-ink-soft); font-size: 18px; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 22px 20px 50px; font-size: 13.5px; line-height: 1.9; color: var(--c-ink-soft); }
.faq-a a { color: var(--c-primary); font-weight: 700; }
.faq-a a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .sd-detail, .sd-detail.reverse .sd-media { grid-template-columns: 1fr; }
  .sd-detail.reverse .sd-media { order: 0; }
  .sd-flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sd-points { grid-template-columns: 1fr; }
  .sd-flow { grid-template-columns: 1fr; }
}

/* ============================================================
   NEWS LISTING PAGE + DETAIL
   ============================================================ */
.news-filterbar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 2px solid var(--c-ink); }
.news-fchip { background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 8px 20px; font-family: var(--font-jp-sans); font-size: 13.5px; font-weight: 600; color: var(--c-ink); cursor: pointer; transition: all .2s; }
.news-fchip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.news-fchip.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.news-list-page .news-item a { grid-template-columns: 1fr auto; padding: 26px 6px 26px 0; }
.news-ex { grid-column: 1; font-size: 13.5px; line-height: 1.85; color: var(--c-ink-soft); margin: 8px 0 0; max-width: 70ch; }
.news-empty { text-align: center; padding: 50px 20px; color: var(--c-ink-soft); }

/* detail */
.na-article { max-width: 820px; margin: 0 auto; }
.na-head { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--c-line); }
.na-head .news-meta { display: flex; align-items: center; gap: 14px; }
.na-head time { font-family: var(--font-latin); font-size: 15px; letter-spacing: .06em; color: var(--c-ink-soft); font-weight: 600; }
.na-head h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.45; margin: 16px 0 0; }
.na-body p { font-size: 15.5px; line-height: 2.1; color: var(--c-ink); margin: 0 0 22px; }
.na-body p:first-child { font-size: 17px; color: var(--c-ink); }
.na-cta { margin-top: 40px; padding: 28px 30px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 6px; text-align: center; }
.na-cta p { font-size: 14.5px; color: var(--c-ink-soft); margin: 0 0 18px; }
.na-cta .terms-cta { justify-content: center; margin-top: 0; }

.na-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.na-nav-link { border: 1px solid var(--c-line); border-radius: 6px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; transition: border-color .25s, background .25s; }
.na-nav-link.next { text-align: right; align-items: flex-end; }
.na-nav-link:hover { border-color: var(--c-primary); background: var(--c-paper); }
.na-nav-link.disabled { border: none; background: transparent; pointer-events: none; }
.nn-dir { font-size: 12px; font-weight: 700; color: var(--c-primary); letter-spacing: .04em; }
.nn-t { font-size: 13px; color: var(--c-ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.na-related { max-width: 820px; margin: 56px auto 0; }
.na-related-t { font-size: 22px; padding-bottom: 14px; border-bottom: 2px solid var(--c-ink); margin-bottom: 6px; }
.na-related .news-item h3 { font-size: 16px; }

@media (max-width: 560px) {
  .na-nav { grid-template-columns: 1fr; }
  .na-nav-link.next { text-align: left; align-items: flex-start; }
}

/* ============================================================
   MOBILE & TABLET — SUPPLEMENTARY RESPONSIVE
   ============================================================ */

/* ---- page hero: tighter padding on phones ---- */
@media (max-width: 480px) {
  .page-hero .wrap { padding-block: clamp(32px, 7vw, 48px); }
}

/* ---- day tours listing grid base + responsive ---- */
.dt-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.dt-list-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: 6px; overflow: hidden;
  background: var(--c-paper);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s;
}
.dt-list-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -44px rgba(40,20,15,.55); border-color: var(--c-line-strong); }
.dt-list-go { position: absolute; inset: 0; z-index: 2; }
.dt-list-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg); }
.dt-list-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; background: var(--c-bg); }
.dt-badge {
  position: absolute; top: 0; left: 12px; z-index: 3;
  background: var(--c-accent); color: var(--c-primary-deep);
  font-family: var(--font-jp-serif); font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
  padding: 5px 12px 6px;
}
.dt-list-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.dt-list-place { font-size: 12px; color: var(--c-secondary); font-weight: 600; margin-bottom: 8px; }
.dt-list-body h3 { font-size: 18px; line-height: 1.5; }
.dt-list-lead { font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.85; margin: 9px 0 0; }
.dt-list-hl { list-style: none; padding: 0; margin: 9px 0 0; display: flex; flex-direction: column; gap: 5px; }
.dt-list-hl li { font-size: 12.5px; color: var(--c-ink-soft); padding-left: 14px; position: relative; line-height: 1.6; }
.dt-list-hl li::before { content: "✓"; position: absolute; left: 0; color: var(--c-secondary); font-weight: 700; }
.dt-list-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-line); margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dt-list-meta { font-size: 12px; color: var(--c-ink-soft); }
.dt-list-price { font-family: var(--font-latin); font-size: 22px; font-weight: 600; color: var(--c-primary); line-height: 1; }
.dt-list-price small { font-size: 12px; font-family: var(--font-jp-sans); font-weight: 400; color: var(--c-ink-soft); }
.dt-list-link { font-size: 12.5px; font-weight: 700; color: var(--c-ink-soft); letter-spacing: .02em; white-space: nowrap; transition: color .25s; }
.dt-list-card:hover .dt-list-link { color: var(--c-primary); }

@media (max-width: 900px) { .dt-listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dt-listing-grid { grid-template-columns: 1fr; } }

/* ---- routes table: scrollable on phones ---- */
@media (max-width: 560px) {
  .routes-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .routes { min-width: 480px; }
}

/* ---- spec table: compact on phones ---- */
@media (max-width: 420px) {
  .spec th { width: 90px; font-size: 13px; padding: 13px 12px; }
  .spec td { font-size: 13px; padding: 13px 12px; }
}

/* ---- payment: steps single col + info cards on phones ---- */
@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
  .pm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .info-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .info-cards { grid-template-columns: 1fr; }
}

/* ---- contact form: already collapses at 820px via bug-fix ---- */
/* ---- field row on tablets ---- */
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---- news chip filter: compact on phones ---- */
@media (max-width: 480px) {
  .news-filterbar { gap: 6px; }
  .news-fchip { padding: 7px 14px; font-size: 12.5px; }
}

/* ---- destination detail: anchor quick-links compact ---- */
@media (max-width: 480px) {
  .dd-quick a { padding: 12px 14px; font-size: 13px; }
  .dd-quick a .qa-c { width: 17px; height: 17px; font-size: 10px; }
}

/* ---- hotel detail: sticky reserve bar compact ---- */
@media (max-width: 480px) {
  .hd-sticky .wrap { gap: 10px; flex-wrap: wrap; }
  .hd-sticky-info b { font-size: 14px; }
  .hd-sticky-price { font-size: 19px; }
  .hd-sticky-buy { gap: 10px; }
}

/* ---- service-show cards: single col on phones ---- */
@media (max-width: 480px) {
  .svc-cards { grid-template-columns: 1fr; }
}

/* ---- about: CEO portrait smaller on phones ---- */
@media (max-width: 480px) {
  .ceo-portrait { max-width: 200px; }
}

/* ---- tour & hotel listing: sort row wraps on phones ---- */
@media (max-width: 480px) {
  .sortrow { flex-wrap: wrap; }
  .sorttab { font-size: 12px; padding: 5px 8px; }
  .results-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}