/* =========================================================
   トマム雲海ツアー LP  —  壮大シネマ × 全行程タイムライン
   配色は「時刻が進むと空が朝焼けへ変わる」を軸に設計
   ========================================================= */

:root{
  --navy:        #0E1B2A;
  --navy-deep:   #0a131e;
  --navy-mid:    #16263B;
  --gold:        #E8B25E;
  --gold-soft:   #F2C879;
  --gold-ink:    #1B1206;
  --lavender:    #9A86C9;
  --teal:        #5BA6A8;
  --cloud:       #F5F8FC;
  --muted:       #b9c6d6;
  --muted-dim:   #8ea2bb;
  --line:        rgba(255,255,255,.12);

  --serif: "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", system-ui, sans-serif;

  --content: 680px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--navy);
  color:var(--cloud);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.serif{font-family:var(--serif);font-weight:300;letter-spacing:.06em}
.kicker{
  font-size:12px;letter-spacing:.28em;color:var(--gold);
  text-transform:uppercase;font-weight:500;
}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px}
.center{text-align:center}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;background:var(--gold);color:var(--gold-ink);
  font-weight:500;font-size:16px;letter-spacing:.08em;
  padding:16px 40px;border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,178,94,.35)}
.btn:active{transform:translateY(0)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:96px 0 110px;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(242,200,121,.5), transparent 60%),
    linear-gradient(180deg,#0a1320 0%, var(--navy-mid) 45%, #3a3550 72%, #caa05f 100%);
}
/* 写真を入れる場合は .hero に background-image を足し、下のオーバーレイで暗くする */
.hero__overlay{position:absolute;inset:0;background:rgba(8,16,26,.15)}
.hero .wrap{position:relative}
.hero__title{font-size:clamp(34px,9vw,54px);line-height:1.42;color:#fff;margin:22px 0 24px}
.hero__date{font-size:15px;letter-spacing:.1em;color:#dfe7f0;margin-bottom:8px}
.hero__date span{opacity:.6}
.hero__sub{font-size:14px;color:var(--muted);margin-bottom:36px}
.hero__note{font-size:12px;color:rgba(255,255,255,.6);margin-top:20px}

/* =========================================================
   ルート概要
   ========================================================= */
.route{padding:56px 0;background:var(--navy)}
.route__line{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 5px;font-size:13px;color:var(--muted);
}
.route__line .stop{color:#fff}
.route__line .peak{color:var(--gold);font-weight:500}
.route__line .seg{opacity:.35}
.route__cap{font-size:12px;color:var(--muted-dim);margin-top:16px}

/* =========================================================
   コンセプト
   ========================================================= */
.concept{padding:64px 0;background:var(--navy);text-align:center}
.concept p{font-size:clamp(18px,5vw,22px);line-height:2.05;color:#eef3fa}
.concept .small{display:block;font-size:15px;color:var(--muted-dim);margin-top:14px}

/* =========================================================
   全行程タイムライン  ——  空が朝焼けへ流れる
   ========================================================= */
.journey{
  padding:48px 0 56px;
  background:linear-gradient(180deg,
    #5aa0c4 0%,    /* 朝の空 */
    #8a7bbf 14%,   /* 富良野ラベンダー */
    #6f6aa8 28%,
    #3f5f7a 42%,   /* 夕方・青い池 */
    #21344e 52%,
    #0c1421 64%,   /* トマムの夜 */
    #0a1320 70%,
    #caa05f 86%,   /* 4:30 夜明け */
    #7fb0c9 100%); /* 帰路・朝 */
}
.journey__head{text-align:center;margin-bottom:34px}
.journey__head .sub{font-size:13px;color:rgba(255,255,255,.78);margin-top:6px}

.timeline{position:relative}
.timeline::before{
  content:"";position:absolute;left:80px;top:8px;bottom:8px;
  width:1px;background:rgba(255,255,255,.3);
}
.day-label{font-family:var(--serif);font-size:16px;color:#fff;margin:0 0 20px 6px}
.day-divider{
  margin:10px 0 26px;padding:11px 0;text-align:center;
  background:rgba(0,0,0,.28);border-radius:8px;
}
.day-divider span{font-family:var(--serif);font-size:15px;color:var(--gold)}

.stop{
  display:grid;grid-template-columns:52px 32px 1fr;
  align-items:flex-start;gap:0;position:relative;
  padding-bottom:26px;
}
.stop__time{font-family:var(--serif);font-weight:300;font-size:20px;color:#fff;padding-top:2px}
.stop__dot{
  width:28px;height:28px;border-radius:50%;
  background:rgba(10,19,30,.55);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;justify-self:center;z-index:1;
}
.stop__body{padding-left:4px}
.stop__name{font-weight:500;font-size:15px;color:#fff;margin:0}
.stop__note{font-size:13px;color:rgba(255,255,255,.82);margin:3px 0 0}
.stop__thumb{
  margin-top:10px;height:84px;border-radius:6px;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.08em;
  background-size:cover;background-position:center;
}

/* 日中（明るい背景）の行は文字を濃く */
.stop.is-light .stop__time,
.stop.is-light .stop__name{color:#0c2236}
.stop.is-light .stop__note{color:#274a66}
.stop.is-light .stop__thumb{background-color:rgba(0,0,0,.07);color:rgba(0,0,0,.4)}

/* 雲海＝この旅のピーク */
.stop.is-peak .stop__dot{background:rgba(255,255,255,.9)}
.stop.is-peak .stop__dot i{color:#caa05f}
.stop.is-peak .stop__time{color:var(--gold-ink)}
.stop.is-peak .stop__name{color:var(--gold-ink);font-size:17px}
.stop.is-peak .stop__note{color:#3a2c12}

/* =========================================================
   絶景3枚
   ========================================================= */
.highlights{padding:52px 0;background:var(--navy)}
.highlights__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;
}
.hl{
  position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;
  background-size:cover;background-position:center;
}
.hl--unkai{background:linear-gradient(160deg,#1b2c44,#caa05f)}
.hl--lavender{background:linear-gradient(160deg,#6f5fa3,#b9a7e0)}
.hl--pond{background:linear-gradient(160deg,#2a6f73,#7fc3c4)}
.hl__cap{position:absolute;top:10px;left:12px;font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.1em}
.hl__tag{
  position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.12em;
  color:#fff;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:4px;
}

/* =========================================================
   宿泊・代表予約
   ========================================================= */
.stay{padding:56px 0;background:var(--navy);border-top:.5px solid var(--line)}
.stay p.lead{font-size:14px;color:var(--muted);margin:14px 0 22px}
.callout{
  background:rgba(232,178,94,.1);border:1px solid rgba(232,178,94,.4);
  border-radius:10px;padding:20px 22px;
}
.callout h3{font-size:15px;color:var(--gold);font-weight:500;margin:0 0 8px}
.callout p{font-size:13.5px;color:#cdd8e6;line-height:1.85;margin:0}
.callout strong{color:#fff;font-weight:500}

/* =========================================================
   参加要項
   ========================================================= */
.info{padding:8px 0 56px;background:var(--navy)}
.info__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info__card{background:rgba(255,255,255,.05);border-radius:10px;padding:16px 18px}
.info__card .k{color:var(--muted-dim);font-size:11px;display:block;margin-bottom:3px}
.info__card .v{color:#fff;font-size:14px}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:56px 0;background:var(--navy);border-top:.5px solid var(--line)}
details.qa{
  border-bottom:.5px solid var(--line);padding:18px 0;
}
details.qa summary{
  list-style:none;cursor:pointer;font-size:15px;color:#fff;font-weight:500;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary i{color:var(--gold);transition:transform .2s ease}
details.qa[open] summary i{transform:rotate(45deg)}
details.qa p{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.85}

/* =========================================================
   クロージングCTA
   ========================================================= */
.closing{
  position:relative;padding:84px 0;text-align:center;
  background:linear-gradient(180deg,var(--navy-mid),#caa05f);
}
.closing h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,7vw,30px);line-height:1.8;color:#fff;margin-bottom:30px}
.closing .note{font-size:12px;color:rgba(27,18,6,.7);margin-top:18px}

/* ---------- フッター ---------- */
footer{padding:36px 0;background:var(--navy-deep);text-align:center}
footer p{font-size:12px;color:var(--muted-dim)}
footer .brand{color:var(--cloud);font-family:var(--serif);margin-bottom:6px;font-size:14px}

/* ---------- モバイル固定CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:12px 16px;background:rgba(10,19,30,.92);
  backdrop-filter:blur(8px);border-top:.5px solid var(--line);
  display:none;
}
.sticky-cta .btn{display:block;width:100%;text-align:center;padding:14px}

/* ---------- 両学長おすすめ等のバッジ ---------- */
.badge{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;
  background:rgba(232,178,94,.18);color:var(--gold);
  border:1px solid rgba(232,178,94,.5);
  padding:2px 9px;border-radius:999px;margin-left:6px;
  vertical-align:middle;white-space:nowrap;
}

/* =========================================================
   お部屋プラン スライダー
   ========================================================= */
.rooms{padding:56px 0;background:var(--navy);border-top:.5px solid var(--line)}
.rooms__lead{font-size:13px;color:var(--muted);margin:12px 0 26px;line-height:1.8}
.slider{position:relative}
.slider__track{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:2px 2px 8px;
}
.slider__track::-webkit-scrollbar{height:0}
.slide{
  flex:0 0 80%;scroll-snap-align:center;
  background:rgba(255,255,255,.05);border-radius:12px;overflow:hidden;
}
.slide__img{
  aspect-ratio:4/3;
  background:linear-gradient(160deg,#1b2c44,#3a3550);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.06em;
}
.slide__name{font-weight:500;font-size:15px;color:#fff;margin:14px 18px 4px}
.slide__desc{font-size:13px;color:var(--muted);margin:0 18px 18px;line-height:1.7}
.slider__btn{
  position:absolute;top:34%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(10,19,30,.82);border:1px solid var(--line);
  color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:background .15s ease,color .15s ease;
}
.slider__btn:hover{background:var(--gold);color:var(--gold-ink)}
.slider__btn--prev{left:-8px}
.slider__btn--next{right:-8px}
@media (min-width:560px){
  .slide{flex-basis:47%}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:560px){
  .highlights__grid{grid-template-columns:1fr 1fr}
  .hl--pond{grid-column:1 / -1;aspect-ratio:16/9}
  .timeline::before{left:64px}
  .stop{grid-template-columns:44px 30px 1fr}
  .stop__time{font-size:17px}
  .sticky-cta{display:block}
  body{padding-bottom:74px}
}