/* ==========================================================================
   HOKKAIDO LP (JAPOW) — style.css
   PC: レイアウト（幅・余白・位置・画像/SVG）は rem（1rem = 10px @1440、それ未満は 100vw/144 で比例縮小。コンテナ 130rem = 1300px 中央寄せ）。
       文字は px 固定（本人指示 2026-09-14「文字は固定、vwにしない」）。文字で決まる箱（固定ナビ・CTA・Tipラベル）も px。表示見出し JAPOW と SVG 見出しだけ写真に合わせて縮む
   SP: 360 基準、左右 5.556%（px は据え置き）。境界 1099/1100（2026-09-14 本人指示: 1100 未満は SP レイアウト）
   実測値の根拠: _design/spec.md（カンプ1280の値を 1300 コンテナに合わせて置き直し済み）
   ========================================================================== */

:root {
  --red: #b6241c;
  --peach: #fad5bd;
  --peach-bg: #fdd1bb;
  --yellow: #f8cb4e;
  --cta: #f9be00;
  --cta-light: #fbd55a;
  --ink: #222;
  --line: rgba(255, 255, 255, .12);
  --band: rgba(255, 255, 255, .1);
  --nav-bg: rgba(35, 20, 10, .62);
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "futura-pt", Futura, "Jost", sans-serif;
  --container: 130rem;
  --gutter: 4rem;
  --edge: calc(50% - 65rem); /* 130rem コンテナの左端（親幅中央基準）。PCの左右位置は全部これ起点 */
  --cta-right: 15px; /* 固定UI（ロゴ・ナビ・CTA・バッジ）は画面端基準＝右寄せ／左寄せ（本人指示）。コンテンツだけ中央のコンテナ基準 */
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 62.5%; /* 10px = 10px */
  scroll-behavior: smooth;
  scroll-padding-top: 10rem;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1100px) {
  html { font-size: min(calc(100vw / 144), 10px); } /* 1440 で 10px、それ未満は比例。上限 10px（コンテナ 1300 で止まる） */
}

body {
  position: relative;
  margin: 0;
  overflow-x: clip;
  background: var(--red);
  color: #fff;
  font-family: var(--font);
  font-size: 20px;
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg use { pointer-events: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-sp { display: none !important; }

.l-container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
}

.l-main { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   grid lines (decorative)
   -------------------------------------------------------------------------- */
.l-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.l-lines__inner {
  position: relative;
  width: min(var(--container), 100% - var(--gutter) * 2);
  height: 100%;
  margin: 0 auto;
}
.l-lines__inner span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.l-lines__inner span:nth-child(1) { left: 0; }
.l-lines__inner span:nth-child(2) { left: calc((100% - 5rem) / 2 - 1px); }
.l-lines__inner span:nth-child(3) { left: calc((100% - 5rem) / 2 + 5rem); }
.l-lines__inner span:nth-child(4) { right: 0; }

/* --------------------------------------------------------------------------
   header (logo / SP static nav)
   -------------------------------------------------------------------------- */
.l-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
}
.l-header__logo {
  position: absolute;
  top: 4.5rem;
  left: 4rem; /* 画面左端基準（カンプ: 40） */
  display: block;
  width: 21rem;
}
.l-header__logo img { width: 100%; height: auto; }

/* SP only (static row) */
.l-header__badge { display: none; position: absolute; top: 1.5rem; right: 4.444%; /* 16/360 */ width: 6rem; height: 6rem; border-radius: 50%; background: #fff; }
.l-header__badge img { width: 100%; height: 100%; padding: .7rem; filter: brightness(.133); }
.l-header__nav {
  display: none;
  position: absolute;
  top: 10.2rem;
  left: var(--gutter);
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.l-header__home,
.l-header__item {
  position: relative;
  color: #fff;
  text-decoration: none;
}
.l-header__home { display: block; width: 1.4rem; height: 1.4rem; margin-right: 2rem; color: #fff; }
.l-header__home svg { display: block; }
.l-header__item + .l-header__item { margin-left: 1.6rem; }
.l-header__home.is-active,
.l-header__item.is-active { color: var(--yellow); }
.l-header__home.is-active::after,
.l-header__item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px; /* SP静的ナビ: ドット下端 y122（カンプ実測） */
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--yellow);
}

/* --------------------------------------------------------------------------
   fixed nav pill
   -------------------------------------------------------------------------- */
.l-nav {
  position: fixed;
  top: 35px;
  right: calc(var(--cta-right) + 500px); /* CTA(480)の左 20（カンプ: ピル右端765 / CTA左端785） */
  z-index: 20;
  display: flex;
  align-items: center;
  height: 42px; /* 文字で決まる箱なので px（文字固定） */
  padding: 0 30px 4px 25px; /* 下4px: 文字のcapトップをカンプ(y49)に合わせる */
  border-radius: 21px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.l-nav__home,
.l-nav__item {
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: color .3s ease-out;
}
.l-nav__home { display: block; width: 14px; height: 14px; margin-right: 20px; }
.l-nav__home svg { display: block; }
.l-nav__item + .l-nav__item { margin-left: 17px; }
.l-nav__home:hover,
.l-nav__item:hover { color: var(--yellow); }
.l-nav__home.is-active,
.l-nav__item.is-active { color: var(--yellow); }
.l-nav__home.is-active::after,
.l-nav__item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px; /* ドット下端: PC y68 / SP UI y43（カンプ実測） */
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--yellow);
}

/* --------------------------------------------------------------------------
   fixed CTA (flights)
   -------------------------------------------------------------------------- */
.c-cta {
  position: fixed;
  top: 15px;
  right: var(--cta-right);
  z-index: 20;
  width: 480px; /* 文字で決まる箱なので px（文字固定） */
  height: 80px;
  padding: 14px 28px 0 90px;
  border-radius: 40px;
  background: var(--cta);
  color: #000;
  white-space: nowrap;
}
.c-cta__icon {
  position: absolute;
  top: 10px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cta-light);
}
.c-cta__icon svg { display: block; }
.c-cta__lead {
  font-size: 15px;
  line-height: 20px;
}
.c-cta__place { color: var(--red); font-weight: 700; }
.c-cta__links {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-top: 5px;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
}
.c-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .3s ease-out;
}
.c-cta__link:hover { opacity: .7; }
.c-cta__arrow { flex: none; }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.p-hero {
  position: relative;
  isolation: isolate; /* 2026-09-17 写真とタイトルの重なり順を KV 内で閉じる（Safari 対策の一部） */
  padding-bottom: 10rem; /* 小写真／本文の下端 → 帯（カンプ 1164→1265） */
}
.p-hero__photo {
  position: absolute;
  background: var(--red);
  top: 0;
  right: 0;
  left: calc(var(--edge) + 20rem); /* コンテナ左端 +200（カンプ: 290 vs 90） */
  height: 72rem;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 0 4rem 0; /* カンプ: 右下だけ角丸40（実測）。他3隅は直角 */
}
.p-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.p-hero__scroll {
  position: absolute;
  top: 41.1rem;
  left: calc(var(--edge) + 1.2rem - 5px); /* グリフ x=コンテナ+12（カンプ 102 vs 90）。縦書きの行ボックス 20px の中央にグリフが来るので -5px */
  z-index: 2;
  writing-mode: vertical-rl;
  color: var(--peach);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.p-hero__title {
  position: absolute;
  top: 58.5rem;
  left: var(--edge); /* コンテナ左端に揃える（カンプ: 91 vs 90） */
  z-index: 2;
  color: var(--peach);
  font-family: var(--font-display);
  font-size: 18.2rem; /* 表示見出しは写真に合わせて縮む（SVG見出しと同じ扱い）。通常の文字は px 固定（本人指示） */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.p-hero__badge {
  position: absolute;
  top: 68.4rem;
  right: 1.6rem; /* 画面右端基準（カンプ: 16） */
  z-index: 3;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #fff;
}
.p-hero__badge img { width: 100%; height: 100%; padding: 1.2rem; filter: brightness(.133); }
/* Visit Sapporo バッジ（リンク）: ホバーで少し大きく＋不透明度（傾き・影は本人NG 2026-09-15）。transition なので途中で外しても滑らかに戻る */
.p-hero__badge,
.l-header__badge { transition: transform .4s cubic-bezier(.25, .46, .45, .94), opacity .4s ease-out; }
a.p-hero__badge:hover,
a.p-hero__badge:focus-visible,
a.l-header__badge:hover,
a.l-header__badge:focus-visible { transform: scale(1.05); opacity: .8; } /* a 付きは [data-reveal].is-shown{opacity:1} に勝つため */
.p-hero__content {
  position: relative;
  z-index: 2;
  display: grid; /* 左: 小写真 354 ／ 間 118 ／ 右: 見出し＋本文 827（カンプ 300/100/700 を 1300 に比例）。文字は px 固定なので行数が変わっても小写真は本文の先頭に揃う */
  grid-template-columns: 35.4rem minmax(0, 1fr);
  grid-template-areas:
    ". lead"
    "sub text";
  column-gap: 11.8rem;
  align-items: start;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: 81.7rem 0 0;
}
.p-hero__lead {
  grid-area: lead;
  color: var(--yellow);
  font-size: 40px;
  font-weight: 700;
  line-height: 55px;
}
.p-hero__text {
  grid-area: text;
  margin-top: 32px; /* 文字まわりの間隔は px */
  font-size: 17px; /* カンプ実測（1.7rem） */
  line-height: 32px;
}
.p-hero__sub {
  grid-area: sub;
  z-index: 2;
  width: 35.4rem; /* カンプ 300/1100 を 1300 に比例（354） */
  margin-top: 38px; /* 本文の上端に対してカンプは +6（cap 968 / 写真 965）→ 本文 margin-top 32 + 6 */
}
.p-hero__sub img { width: 100%; height: auto; aspect-ratio: 601 / 400; object-fit: cover; }

/* 本文の実サイズ（本人指摘 2026-09-14）: カンプ画像の実測はイラレの nominal（20pt/17.5pt）より小さく、
   ヒーロー・セクション本文 17px／カード・Tip 本文 15px（x-height で判定。イラレ側の垂直比率 85% 相当）。
   以前の「横比率 85% を scale で再現」は廃止し、素の Inter で組む */

/* --------------------------------------------------------------------------
   flight band
   -------------------------------------------------------------------------- */
.c-flight { position: relative; z-index: 1; }
.c-flight__inner {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: 5rem 0 5.8rem;
  background: var(--band);
  text-align: center;
}
.c-flight__title {
  color: var(--yellow);
  font-size: 36px;
  font-weight: 700;
  line-height: 41px;
}
.c-flight__list {
  display: flex;
  justify-content: center;
  gap: 3.5rem; /* 30 × 1300/1100 */
  margin-top: 3rem;
}
.c-flight__card {
  position: relative;
  display: grid;
  place-items: center;
  width: 54.4rem; /* 460 × 1300/1100（帯 1300 に比例。インセット 88.6） */
  height: 14.2rem;
  border-radius: .8rem;
  background: #fff;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.c-flight__card:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .18);
}
.c-flight__logo--aircanada { width: 36.2rem; height: 4.7rem; } /* 306×40 × 1.1818 */
.c-flight__logo--united { width: 31.3rem; height: 5.7rem; } /* 265×48 × 1.1818 */
.c-flight__arrow {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  color: var(--ink);
}
.c-flight__note {
  margin-top: 3.1rem;
  font-size: 14px;
  line-height: 1.43;
}
.c-flight + .p-feature { margin-top: 13rem; }
.p-tips + .c-flight { margin-top: 10rem; }

/* --------------------------------------------------------------------------
   feature sections (SKI / NIGHTLIFE / RECHARGE)
   -------------------------------------------------------------------------- */
.p-feature + .p-feature { margin-top: 14.1rem; }
.p-feature + .p-tips { margin-top: 14.3rem; }

.p-feature__hero {
  position: relative;
  width: 100%; /* 明示しないと max-height が aspect-ratio 経由で幅まで縮める */
  aspect-ratio: 2 / 1; /* 2560x1280 */
  max-height: 70rem; /* 全幅のまま高さだけ上限（本人指示 2026-09-14）。超えた分は center で cover */
  overflow: hidden;
  border-radius: 4rem;
}
.p-feature__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.p-feature__title {
  position: absolute;
  bottom: 2rem; /* カンプ: 線の実体がブロック下端から 21（SVG の余白込みで 2rem） */
  left: calc(var(--edge) - .5rem); /* カンプ: 85 vs コンテナ 90 */
  height: 29rem; /* SVG（本人支給・アウトライン済み）。3つとも高さ ≒290 なので高さで揃える。幅は auto */
  margin: 0;
}
.p-feature__title img { display: block; width: auto; height: 100%; }
/* SP は幅% で持つ（本人指示）。最も長い &RECHARGE をカンプの 317.6/360 = 88.2% にし、他は SVG の幅比で同じ高さになるように */
.p-feature__title--ski { --title-w: 54.46%; }       /* 653.75 / 1058.71 × 88.2 */
.p-feature__title--nightlife { --title-w: 84.93%; } /* 1019.51 / 1058.71 × 88.2 */
.p-feature__title--recharge { --title-w: 88.2%; }
.p-feature__lead {
  margin-top: 6.7rem;
  color: var(--yellow);
  font-size: 40px;
  font-weight: 700;
  line-height: 55px;
}
.p-feature__text {
  max-width: 80rem;
  margin-top: 3.7rem;
  font-size: 17px; /* カンプ実測（1.7rem） */
  line-height: 32px;
}

.c-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 5rem;
  row-gap: 6.2rem;
  margin-top: 6.6rem;
}
.c-card__img { overflow: hidden; }
.c-card__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.c-card__title {
  margin-top: 3.1rem;
  color: var(--yellow);
  font-size: 28px;
  font-weight: 700;
  line-height: 43px;
}
.c-card__text {
  margin-top: 1.4rem;
  font-size: 15px; /* カンプ実測（本人指摘） */
  line-height: 30px;
}

/* --------------------------------------------------------------------------
   tips
   -------------------------------------------------------------------------- */
.p-tips {
  position: relative;
  z-index: 1;
  padding: 11.2rem 0 14.7rem;
  border-radius: 4rem;
  background: var(--peach-bg);
  color: var(--ink);
}
.p-tips__title {
  max-width: 110rem; /* カンプの折り返し（3行）を保つ。1300 いっぱいだと2行で右罫線に当たる */
  color: var(--red);
  font-size: 54px;
  font-weight: 700;
  line-height: 72px;
}
.p-tips__phases { margin-top: 7.6rem; }

.c-phase {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon tips";
  column-gap: 4rem;
  align-items: start;
}
.c-phase + .c-phase { margin-top: 7.7rem; }
.c-phase__icon {
  grid-area: icon;
  width: 16rem;
  height: 16rem;
  margin-top: -.9rem;
  border-radius: 50%;
  background: #fff;
}
.c-phase__icon img { width: 16rem; height: 16rem; }
.c-phase__title {
  grid-area: title;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
}
.c-phase__num { color: var(--red); }
.c-phase__tips { grid-area: tips; }

.c-tip { margin-top: 2.9rem; }
.c-tip + .c-tip { margin-top: 3.8rem; }
.c-tip__title {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 700;
}
.c-tip__label {
  flex: none;
  width: 60px; /* 文字の箱なので px */
  height: 30px;
  background: var(--red);
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}
.c-tip__name {
  color: var(--red);
  font-size: 20px;
  line-height: 1.5;
}
.c-tip__text {
  margin-top: .7rem;
  font-size: 15px; /* カンプ実測（本人指摘） */
  line-height: 30px;
}

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  z-index: 1;
  padding: 11.6rem 0 16.5rem;
  text-align: center;
}
.l-footer__badge { width: 13.2rem; height: 12rem; margin: 0 auto; }
.l-footer__link {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: fit-content;
  margin: 2.5rem auto 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  transition: opacity .3s ease-out;
}
.l-footer__link:hover { opacity: .7; }
.l-footer__arrow { flex: none; }
.l-footer__privacy {
  display: block;
  width: fit-content;
  margin: 4rem auto 0;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-underline-offset: .2em;
  transition: opacity .3s ease-out;
}
.l-footer__privacy:hover { opacity: .7; }
.l-footer__copy {
  margin-top: 5rem;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  line-height: 1.54;
}
.l-footer__copy small { font-size: inherit; }

/* --------------------------------------------------------------------------
   reveal (data-reveal → .is-shown、一度表示したら戻さない)
   -------------------------------------------------------------------------- */
/* マルト醤油の型: opacity 0→1 ＋ y 30px→0、0.8s power2.out、要素上端が画面下端に触れたら1回だけ。
   JSが動く環境（html.js）でだけ隠す。JS無効時は最初から表示。
   カード等の並びは main.js が --reveal-delay（index×0.1s）を付けて stagger */
.js [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-y, 44px); /* 2026-09-15 本人「ほんの少し強め」: 30→44px、.8→1s、イージングを expo 寄りに。--reveal-y で要素ごとに距離を変えられる */
  /* 「もうちょいふわっと」（2026-09-15）: opacity を長め（1.4s）にして不透明度主体、上がる動きはゆっくり（1.2s） */
  transition: opacity 1.2s cubic-bezier(.25, .46, .45, .94), translate 1s cubic-bezier(.22, .61, .36, 1); /* 1.4/1.2 → 「ちょっと遅すぎ」で 1.2/1 */
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-shown {
  opacity: 1;
  translate: 0 0;
}
/* 面で見せる写真（.js-inview-media 相当）: scale 1.08→1、1.2s。親（.p-feature__hero）の overflow:hidden ではみ出しを切る */
.js [data-reveal="media"] {
  translate: none;
  scale: 1.12;
  transition: opacity 1.4s cubic-bezier(.25, .46, .45, .94), scale 1.4s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal="media"].is-shown { scale: 1; }
.p-feature__hero picture { display: block; height: 100%; }
/* KV の読込演出（2026-09-15 本人「kvにもインビュー」「大きい状態から収まる」）: 写真は media 型（scale 1.12→1・1.4s）、
   JAPOW→Scroll Down/キュー→リード→本文→小写真→バッジの順に時差。IO が読込直後に in-view と判定して .is-shown が付く */
.p-hero__photo picture { display: block; height: 100%; }
.p-hero__title { --reveal-delay: .35s; }
.p-hero__scroll, .p-hero__cue { --reveal-delay: .6s; --reveal-y: 16px; }
.c-card { --reveal-y: 24px; } /* カードは高さ控えめ（本人: 高さはそんなになくていい） */
.p-hero__lead { --reveal-delay: .55s; }
.p-hero__text { --reveal-delay: .7s; }
.p-hero__sub { --reveal-delay: .85s; }
/* バッジは transition だとホバー用の transition と衝突するので、表示は animation（backwards で遅延中は 0% を保持、終わったら通常の hover transition に戻る） */
.js [data-reveal="pop"] { translate: none; transition: transform .4s cubic-bezier(.25, .46, .45, .94), opacity .4s ease-out; }
[data-reveal="pop"].is-shown { animation: reveal-pop .8s cubic-bezier(.34, 1.56, .64, 1) .9s backwards; }
@keyframes reveal-pop {
  0%   { opacity: 0; scale: .8; }
  100% { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0 0; scale: none; transition: none; }
  [data-reveal="pop"].is-shown { animation: none; }
}
/* ?noanim（検証用）／IntersectionObserver 非対応: 遷移なしで即表示 */
.is-noanim [data-reveal] { opacity: 1; translate: 0 0; scale: none; transition: none; animation: none; }

/* ==========================================================================
   SP (〜76.7rem) — 360 基準、左右20
   ========================================================================== */
@media (max-width: 1099px) {
  :root { --gutter: 5.556%; } /* 20/360。横マージンは固定pxにしない（幅広の端末でも比率を保つ） */
  html { scroll-padding-top: 70px; }
  body { font-size: 16px; }
  .u-pc { display: none !important; }
  .u-sp { display: block !important; }
  br.u-sp { display: inline !important; }

  .l-lines { display: none; } /* 2026-09-17 デザイナー: 白いガイド線は SP 版では削除（PC はデザインとして残す） */

  /* header: static */
  .l-header { position: relative; height: auto; aspect-ratio: 18 / 7; } /* 360:140。ロゴ・バッジが%なので高さも幅に追従させる */
  .l-header__badge { display: block; }
  .l-header__nav { display: flex; }
  /* SP の画像・SVG文字は % で持つ（本人指示 2026-09-14）。基準は親幅（ヘッダー=360 / コンテナ=320 / カード=280） */
  .l-header__logo { top: 10.714%; left: var(--gutter); width: 29.444%; } /* 15/140, 106/360 */
  .l-header__badge { top: 10.714%; width: 16.667%; height: auto; aspect-ratio: 1 / 1; } /* 60/360 */
  .l-header__badge img { padding: 11.667%; } /* 7/60 */
  .l-header__nav { top: 72.857%; } /* 102/140 */

  /* fixed nav pill: shown after scroll */
  .l-nav {
    top: 10px;
    right: 2.778%; /* 10/360 */
    left: 2.778%;
    justify-content: space-between; /* 項目はピル幅で等分（360でカンプの間隔≒19、広い端末でも右が空かない） */
    padding: 0 23px 2px 25px; /* 下2px: 文字のcap行をカンプ(UI) y25-34 に合わせる（4pxだと1px高い） */
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease-out, transform .3s ease-out, visibility 0s linear .3s;
  }
  .l-nav__home { margin-right: 0; margin-top: -4px; } /* 家アイコン上端をカンプ(UI) y22 に（flex中央揃えなので -4px で 2px 上がる） */
  .l-nav .l-nav__home::after { bottom: -10px; } /* アイコンを2px上げた分ドットを下げ、項目のドットと同じ高さ（下端 y45）に。後ろの Motion 節の -8px より詳細度を上げて勝たせる */
  .l-nav__item + .l-nav__item { margin-left: 0; }
  /* タップ領域: 文字は14pxなので透明の ::before で 42px 高に広げる（見た目は変えない） */
  .l-nav__home::before,
  .l-nav__item::before { content: ""; position: absolute; inset: -14px -6px; }
  .l-nav__home::before { inset: -11px -6px -17px; } /* 家は margin-top:-4px で 2px 上にあるので当たり判定をピル(y10-52)に合わせ直す */
  .l-header__home::before,
  .l-header__item::before { content: ""; position: absolute; inset: -10px -6px; }
  .is-scrolled .l-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease-out, transform .3s ease-out;
  }

  /* fixed CTA: bottom, shown after scroll */
  .c-cta {
    top: auto;
    right: 2.778%; /* 10/360 */
    bottom: 10px;
    left: 2.778%;
    width: auto;
    height: 90px;
    padding: 16px 16px 0 18px;
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease-out, transform .3s ease-out, visibility 0s linear .3s;
  }
  .is-scrolled .c-cta {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease-out, transform .3s ease-out;
  }
  .c-cta__icon {
    position: static;
    float: left;
    width: 26px;
    height: 26px;
    margin: -3px 8px 0 0;
  }
  .c-cta__icon svg { width: 14px; height: 14px; }
  .c-cta__lead { font-size: 14px; line-height: 20px; }
  .c-cta__links {
    clear: both;
    margin: 10px 0 0 4px;
    font-size: 19px;
    line-height: 24px;
  }
  .c-cta__link { gap: 8px; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  /* hero */
  .p-hero { min-height: 0; padding-bottom: 50px; }
  .p-hero__photo {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    height: auto;
    aspect-ratio: 681 / 560; /* hero-kimono-sp.webp の比率＝カンプ枠 340×280（x=20→右端いっぱい） */
    margin: 0 0 0 var(--gutter);
    border-radius: 0 20px 20px 0; /* カンプ: 右上・右下 20（実測）。左は直角 */
  }
  .p-hero__title {
    position: relative; /* 写真(z-index:1)より手前に。static だと重なる10pxが写真の下に隠れる */
    transform: translateZ(0); /* 2026-09-17 先方 iPhone SE でタイトルが出ない件: 写真は scale トランジション＋overflow:hidden＋角丸で合成レイヤーになり、それに重なる relative 要素を古い Safari が描かない既知の挙動 → 自前のレイヤーを持たせる（reveal の translate とは別プロパティなので干渉しない） */
    top: auto;
    left: auto; /* PCの left(max(...)) を殺す。残すと relative のオフセットになり横にはみ出す */
    margin: -19px 0 0 var(--gutter); /* カンプ実測: 写真下端 419 に対してグリフ上端 410（10px 重ねる）。一度「重ねない」にしたが本人指示で CUISINE と同じくカンプどおりに戻した（2026-09-17） */
    font-size: 66px; /* 文字は px 固定（本人指示。vw にしない） */
  }
  .p-hero__content {
    display: block;
    width: auto;
    margin: 0 var(--gutter);
    padding: 33px 0 0; /* h2 capトップ 509（spec） */
  }
  .p-hero__lead { font-size: 24px; line-height: 35px; }
  .p-hero__text { margin-top: 25px; font-size: 14px; line-height: 26px; } /* 本文 capトップ 637（spec） */
  .p-hero__sub {
    width: auto;
    margin: 44px 0 0; /* 親 .p-hero__content が左右 gutter を持つ。カンプ実測: 小写真 960（46 だと 962 で 2px 下）2026-09-17 */
  }
  .p-hero__sub img { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* SP 専用画像 hero-night-skiers-sp（640×360）。カンプ 320×180 */

  /* flight band */
  .c-flight__inner { padding: 38px var(--gutter) 32px; } /* %paddingの基準は親(.c-flight=全幅)なので gutter そのまま。下32: 注記の行送り20→24（+8）と注記→帯下端の差を相殺して帯高さ 361（カンプ 360） */
  .c-flight__title { font-size: 21px; line-height: 24px; text-align: left; } /* SP は黄色の見出しを左寄せ（本人指示 2026-09-14。カンプは中央） */
  .c-flight__list { flex-direction: column; gap: 15px; margin-top: 29px; }
  .c-flight__card { width: 100%; height: auto; aspect-ratio: 7 / 2; } /* 280×80 */
  .c-flight__logo--aircanada { width: 73.8%; height: auto; } /* 高さ27相当（306:40）/ カード280 */
  .c-flight__logo--united { width: 67%; height: auto; } /* 高さ34相当（265:48）/ カード280 */
  .c-flight__arrow { top: 10%; right: 2.857%; } /* 要素の内側余白 8/80（上は高さ基準）・8/280（右は幅基準）。線の実体はカンプ実測どおり右上から 9px（要素13pxの中に線が約1px内側） */
  .c-flight__note { max-width: 230px; margin: 15px auto 0; font-size: 13px; line-height: 24px; } /* カンプの折り返し「…to change / without notice.」と行送り24 */
  .c-flight + .p-feature { margin-top: 65px; }
  .p-tips + .c-flight { margin-top: 61px; }

  /* feature */
  .p-feature + .p-feature { margin-top: 70px; }
  .p-feature + .p-tips { margin-top: 70px; }
  .p-feature__hero { aspect-ratio: 9 / 8; border-radius: 16px; } /* 720x640 */
  .p-feature__title {
    bottom: 12px;
    left: var(--gutter);
    width: var(--title-w); /* 見出しごとの % 幅（3つとも同じ高さ ≒ 87px @360） */
    height: auto;
  }
  .p-feature__title img { width: 100%; height: auto; }
  .p-feature__lead { margin-top: 45px; font-size: 24px; line-height: 35px; }
  .p-feature__text { max-width: none; margin-top: 24px; font-size: 14px; line-height: 26px; }
  /* 2026-09-17: 16px×横87.5% の squeeze（scale .875 1）を廃止し、カンプ実寸の 14px/26px に。
     理由: 端末の「視差効果を減らす」ON だと .js [data-reveal]{scale:none} が勝って本文が 114% 幅になり、
     iOS Safari がレイアウトビューポートを広げて全セクションが右に余る（先方 iPhone17 で再現）。元に戻すなら各 font-size を 16px に */
  .c-cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 46px;
    margin-top: 45px;
  }
  .c-card__img img { aspect-ratio: 16 / 9; } /* SP 専用画像 *-sp.webp（640×360）。カンプ 320×180（PC は 3:2） */
  .c-card__title { margin-top: 25px; font-size: 20px; line-height: 30px; }
  .c-card__text { margin-top: 19px; font-size: 14px; line-height: 26px; }

  /* tips */
  .p-tips { padding: 55px 0 70px; border-radius: 16px; }
  .p-tips__title { font-size: 26px; line-height: 37px; }
  .p-tips__phases { margin-top: 42px; }
  .c-phase {
    grid-template-columns: 31.25% minmax(0, 1fr); /* 100/320 */
    grid-template-areas:
      "icon title"
      "tips tips";
    column-gap: 20px;
  }
  .c-phase + .c-phase { margin-top: 52px; }
  .c-phase__icon { width: 100%; height: auto; aspect-ratio: 1 / 1; margin-top: -7px; }
  .c-phase__icon img { width: 100%; height: 100%; }
  .c-phase__title { font-size: 20px; line-height: 30px; }
  .c-phase__num { display: block; }
  .c-tip { margin-top: 18px; }
  .c-tip + .c-tip { margin-top: 22px; }
  .c-tip__title { display: block; }
  .c-tip__label { display: block; width: 15.625%; font-size: 15px; } /* 50/320 */
  .c-tip__name { display: block; margin-top: 3px; font-size: 16px; line-height: 28px; }
  .c-tip__text { margin-top: 12px; font-size: 14px; line-height: 26px; }

  /* footer */
  .l-footer { padding: 51px var(--gutter) 158px; } /* 58 + 固定CTA(90+10)。コピーライトがCTAに隠れないように */
  .l-footer__badge { width: 30.625%; height: auto; } /* 98/320 */
  .l-footer__link { margin-top: 11px; padding: 10px 0; font-size: 14px; line-height: 20px; } /* タップ高40（見た目位置は据え置き） */
  .l-footer__privacy { margin-top: 3px; font-size: 12px; line-height: 17px; }
  .l-footer__copy { margin-top: 29px; font-size: 12px; line-height: 17px; } /* 38 − リンクの padding-bottom 10 + 1（カンプ: リンクcap→コピー2行目 76） */
}

/* ==========================================================================
   Motion (icons) — 2026-09-14 「アイコンは動かしてもいい」
   UIは 0.2〜0.6s / ease-out、ループは ±.3rem 程度に抑える。reduced-motion で全停止
   ========================================================================== */

/* 飛行機（CTA）: ホバー／フォーカスで「ピューん」— 右上へ飛び出して丸の外に消え、左下から戻ってくる（1回きり）。
   丸（.c-cta__icon）は overflow:hidden なので丸の縁で出入りして見える。待機中は動かさない */
.c-cta__icon { overflow: hidden; }
/* ホバー中に外しても途中で止まらないよう、hover 直結ではなく main.js が .is-flying を付けて animationend で外す（1往復は必ず完走） */
.c-cta__icon.is-flying svg { animation: plane-whoosh .7s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes plane-whoosh {
  0%   { transform: translate(0, 0); }
  42%  { transform: translate(160%, -80%); }   /* 丸の外へ（右上） */
  42.1%{ transform: translate(-160%, 80%); }   /* 瞬間移動して左下の外に */
  100% { transform: translate(0, 0); }
}

/* 矢印（↗）: 親リンク／カードのホバーで右上へ2px */
.c-cta__arrow,
.c-flight__arrow,
.l-footer__arrow { transition: transform .3s ease-out; }
.c-cta__link:hover .c-cta__arrow,
.c-cta__link:focus-visible .c-cta__arrow,
.c-flight__card:hover .c-flight__arrow,
.c-flight__card:focus-visible .c-flight__arrow,
.l-footer__link:hover .l-footer__arrow,
.l-footer__link:focus-visible .l-footer__arrow { transform: translate(2px, -2px); }

/* Tipsのアイコン: 表示時にポップインだけ（浮き沈みのループは入れない）。
   親 .c-phase のスライドに任せるので自身の translate／transition は切る */
@keyframes icon-pop {
  0%   { transform: scale(.9); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.js [data-reveal="icon"] { opacity: 0; translate: none; transition: none; }
[data-reveal="icon"].is-shown {
  opacity: 1;
  animation: icon-pop .6s cubic-bezier(.2, .7, .2, 1) both;
}

/* 活性ドット: 常に生成しておき、活性時にスケールイン（固定ナビ／SP静的ナビの両方） */
.l-nav__home::after,
.l-nav__item::after,
.l-header__home::after,
.l-header__item::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--yellow);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.l-nav__home::after,
.l-nav__item::after { bottom: -8px; }
.l-header__home::after,
.l-header__item::after { bottom: -7px; }
.l-nav__home.is-active::after,
.l-nav__item.is-active::after,
.l-header__home.is-active::after,
.l-header__item.is-active::after { transform: scale(1); }

/* Scroll cue: 左ガイド線の上、「Scroll Down」の上端から JAPOW の下までの区間だけに、
   ガイド線と同じ1pxの単色線が「上から現れる → 下へ抜けて消える」を繰り返す（CSSのみ・PCのみ）。
   区間は overflow:hidden のマスク。ヒーローに absolute なのでスクロールすれば KV と一緒に流れる。
   光らせない・太らせない（2026-09-14 本人指示）。JAPOW の J と重なる分はガイド線と同じ扱い */
.p-hero__cue {
  position: absolute;
  top: 41.1rem;   /* 「Scroll Down」の上端 */
  left: var(--edge);
  z-index: 1;     /* 写真と同層、文字（z:2）の下 */
  width: 1px;
  height: 55.4rem; /* → 96.5rem＝小写真（hero-night-skiers）の上端。2026-09-15 本人「画像の上まで」（それ以前は JAPOW 下 76rem） */
  overflow: hidden;
  pointer-events: none;
}
.p-hero__cue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--peach);
  transform: translateY(-100%);
  animation: scroll-cue 3.4s cubic-bezier(.45, 0, .55, 1) infinite; /* 区間が 35→55rem に伸びた分、速さが変わらないよう 2.2s→3.4s */
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="icon"].is-shown,
  .p-hero__cue::before { animation: none; }
  .p-hero__badge, .l-header__badge { transition: none; }
  .c-cta__icon svg,
  .c-cta__arrow,
  .c-flight__arrow,
  .l-footer__arrow { transform: none; transition: none; animation: none; }
  .js [data-reveal="icon"] { opacity: 1; }
  .l-nav__home::after,
  .l-nav__item::after,
  .l-header__home::after,
  .l-header__item::after { transition: none; }
}