/* Akari の LP。色・書体・角丸はアプリの DESIGN.md に合わせる（常に夜の配色・影なし・奥行きは光） */

@font-face {
  font-family: "Klee One";
  src: url("/assets/fonts/KleeOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("/assets/fonts/ZenMaruGothic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("/assets/fonts/ZenMaruGothic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --night: #1A1829;
  --night-deep: #1C1B2E;
  --sheet: #221F36;
  --cream: #FFE3C2;
  --amber: #FF9A62;
  --pink: #F25C9A;
  --indigo: #6A7BFF;
  --dawn: #FFF1E4;
  --text-sub: #B8AB9C;
  --text-note: #8C8275;
  --surface: rgba(255, 227, 194, 0.04);
  --line: rgba(255, 227, 194, 0.12);
  --divider: rgba(255, 227, 194, 0.08);
  /* 中国語・韓国語は書体を同梱しない（アプリと同じく OS の書体） */
  --font-hand: "Klee One", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --gutter: 16px;
}
:lang(ko), :lang(zh-Hans), :lang(zh-Hant) {
  --font-hand: system-ui, -apple-system, "PingFang SC", "PingFang TC", "Apple SD Gothic Neo", sans-serif;
  --font-body: system-ui, -apple-system, "PingFang SC", "PingFang TC", "Apple SD Gothic Neo", sans-serif;
}
/* 韓国語は、ことばのまとまり（어절）の途中で折り返さない */
:lang(ko) { word-break: keep-all; }
/* 欧文の長い語（ドイツ語の複合語など）は、画面からはみ出す前に折る */
h1, h2 { overflow-wrap: break-word; }
/* 日本語以外の見出しは、行の長さをそろえて折り返す（1語だけが次の行に落ちないように） */
html:not([lang="ja"]) :is(.hero h1 .line, .feature h2, .lead .line, .closing-line) { text-wrap: balance; }
html:not([lang="ja"]) .feature-text p { text-wrap: pretty; }

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

html { background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 55%, var(--night) 100%);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 全面に薄い粒子（DESIGN.md 5章） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/assets/img/grain.png");
  background-size: 256px 256px;
  mix-blend-mode: soft-light;
  opacity: 0.10;
  pointer-events: none;
  z-index: 10;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p { margin: 0; }

/* 背景のぼかし光（DESIGN.md 2.3） */
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(90px); }
.glow-indigo { background: var(--indigo); opacity: 0.16; top: -120px; left: -140px; }
.glow-peach { background: var(--pink); opacity: 0.10; top: 900px; right: -180px; }
.glow-amber { background: var(--amber); opacity: 0.12; top: 2000px; left: -160px; }

.top, .pages, main, .bottom { position: relative; z-index: 1; }

/* 見出しの行 */
.top {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-hand);
  font-size: 22px;
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* 灯（芯はクリーム、光は琥珀。呼吸する） */
.lamp {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 10px 3px rgba(255, 154, 98, 0.75), 0 0 28px 10px rgba(255, 154, 98, 0.30);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

main { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

/* はじめの画面。中央に文を置き、うしろで世界地図（うっすら光る灯つき）が左から右へゆっくり流れる。文は1行ずつフェードインする */
.page-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.hero {
  display: grid;
  place-items: center;
  min-height: min(calc(100svh - 80px), 820px);
  padding-top: 48px;
  padding-bottom: 104px;
  text-align: center;
}
/* 地図・灯・スタンプは、画面に固定して全ページのうしろで流し続ける */
.sky-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease;
  /* 上下の端は消えるようにぼかす */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
}
/* 世界地図（陸地と灯）を横にくり返して並べ、左から右へゆっくり流す。地図の1枚の幅は高さの2倍で、
   帯は2枚ぶん（幅は高さの4倍）。1枚ぶん右へ動かしてくり返すと、つなぎ目なく流れ続ける。
   1枚の幅が画面の幅より狭いとすき間が出るので、高さは 52vw より小さくしない。地図は文の場所の1.5倍の高さに拡大し
   （狭い画面では 130vw まで）、人の多い北半球が真ん中に来るよう、緯度25°あたり（上から38%）を中心に置く */
.hero-map {
  position: absolute;
  top: 50%;
  left: 0;
  height: max(min(150%, 130vw), 52vw);
  aspect-ratio: 4 / 1;
  background: url("/assets/img/world.svg") 0 0 / 50% 100% repeat-x;
  transform: translate(-50%, -38%);
  animation: map-flow 300s linear infinite, map-in 3s ease both;
}
/* 地図の上の灯で、ときどきスタンプが浮かぶ（アプリの「ぴょこ」。DESIGN.md 7.1）。1か所は36秒ごとに4秒だけ見え、
   0.4倍から出て、26 上へ登りながら消える。場所と時間のずれは tools/web/make_world_svg.py が index.html に書く */
.map-stamp {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 227, 194, 0.28));
  animation: stamp-pop 36s linear infinite;
}
.map-stamp img { display: block; width: 100%; height: 100%; }
@keyframes stamp-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); animation-timing-function: ease-out; }
  0.42% { opacity: 0.85; }
  0.97% { transform: translate(-50%, calc(-50% - 2px)) scale(1.08); animation-timing-function: ease-out; }
  1.6% { transform: translate(-50%, calc(-50% - 4px)) scale(1); animation-timing-function: ease-out; }
  5% { opacity: 0.85; }
  11.1% { opacity: 0; transform: translate(-50%, calc(-50% - 26px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 26px)) scale(1); }
}
/* 文のうしろを少し暗くし、地図と灯が見出しの邪魔をしないようにする */
.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(26, 24, 41, 0.72), rgba(26, 24, 41, 0));
}
@keyframes map-flow {
  from { transform: translate(-50%, -38%); }
  to { transform: translate(0, -38%); }
}
@keyframes map-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero .line { display: block; animation: line-in 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero .l1 { animation-delay: 0.4s; }
.hero .l2 { animation-delay: 1.1s; }
.hero .l3 { animation-delay: 2.0s; }
.hero .l4 { animation-delay: 2.6s; }
.hero .l5 { animation-delay: 3.4s; }
@keyframes line-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.hero h1 {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(34px, 8vw, 54px);
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.lead {
  margin-top: 22px;
  color: var(--text-sub);
  font-size: clamp(15px, 2.2vw, 17px);
}

.cta { margin-top: 36px; }
.store-soon {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 227, 194, 0.30);
  background: var(--surface);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.cta-note { margin-top: 12px; color: var(--text-note); font-size: 13px; }

/* 端末の枠。影は使わず、うしろに灯の光を置く */
.phone {
  position: relative;
  margin: 0 auto;
  /* --pw は端末の枠の幅。角丸とすき間は幅に対する割合にする（小さく出しても小判の形にならないよう、
     実物の iPhone に近い約14%）。角丸の縦の割合は、画面の縦横比（603×1311）に合わせて横の割合の0.46倍 */
  --pw: min(300px, 72vw);
  width: var(--pw);
  padding: calc(var(--pw) * 0.03);
  border-radius: 15% / 7.1%;
  border: 1px solid var(--line);
  background: var(--surface);
}
.phone img { border-radius: 13.5% / 6.2%; }
.phone::before {
  content: "";
  position: absolute;
  inset: 12% -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 154, 98, 0.22), rgba(255, 154, 98, 0));
}

/* 使い方の3つ */
.feature {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 1px solid var(--divider);
}
/* 狭い画面では、見出しと文を画面の画像より先に出す */
.feature-text { max-width: 460px; order: -1; }
.step {
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--amber);
  letter-spacing: 0.14em;
}
.feature h2 {
  margin-top: 10px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(26px, 5.4vw, 36px);
  line-height: 1.45;
  letter-spacing: 0.03em;
}
.feature-text p:not(.step) { margin-top: 18px; color: var(--text-sub); font-size: 15px; }

.phone-pair { --pair: min(360px, 86vw); position: relative; width: var(--pair); margin: 0 auto; }
.phone-pair .phone { --pw: calc(var(--pair) * 0.78); margin: 0; }
.phone-pair .phone-back {
  position: absolute;
  top: 12%;
  right: 0;
  --pw: calc(var(--pair) * 0.62);
  z-index: -1;
  opacity: 0.55;
}

/* おわりの言葉 */
.closing {
  padding: 96px 0 104px;
  text-align: center;
  border-top: 1px solid var(--divider);
}
/* アプリアイコン（tools/icon/make_app_icon.py。角はホーム画面と同じくらいに丸める）。うしろに灯の光を置く */
.closing-mark { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.closing-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 98, 0.30) 0%, rgba(255, 154, 98, 0.10) 36%, rgba(255, 154, 98, 0) 68%);
  opacity: 0.8;
  pointer-events: none;
}
.closing-icon {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 22.4%;
  box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(0, 0, 0, 0.35);
}
.closing-line { display: block; }
.closing-name {
  margin-top: 26px;
  font-family: var(--font-hand);
  font-size: 28px;
  letter-spacing: 0.04em;
}
.closing-text { margin-top: 18px; color: var(--text-sub); font-size: 15px; line-height: 2; }

/* 下の行 */
.bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px var(--gutter) 48px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--text-sub);
}
.links, .langs { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.langs { margin-top: 18px; font-size: 12px; }
.bottom a { text-decoration: none; }
.bottom a:hover { color: var(--cream); }
.langs a[aria-current="page"] { color: var(--cream); }
.copyright { margin-top: 22px; color: var(--text-note); font-size: 11px; }

a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* 広い画面では、文と画面を横に並べる */
@media (min-width: 860px) {
  .top { padding-top: 28px; }
  .feature { grid-template-columns: 1fr 1fr; gap: 72px; padding-top: 96px; padding-bottom: 96px; }
  /* 左に文、右に画面 */
  .feature-text { order: 0; justify-self: start; }
  .feature .phone, .feature .phone-pair { order: 2; }
}

/* 1ページずつ止まるページ（web/assets/js/story.js が html に .snap-on を付けたときだけ。付かないときは上の縦並びのまま）。
   ページに着いたら画面 → 見出し → 説明の順に出し、出ていくページは砂にして飛ばす */
html.snap-on { scroll-snap-type: y mandatory; }
html.snap-on .page {
  height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
html.snap-on .closing, html.snap-on .bottom { scroll-snap-align: start; }
html.snap-on .hero-page .top { position: absolute; top: 0; left: 0; right: 0; }
html.snap-on .hero { min-height: 0; padding-top: 0; padding-bottom: 0; }
html.snap-on .feature {
  --ph: min(38svh, 520px);
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 24px;
  justify-items: center;
}
/* 背の低いスマホ（iPhone SE など）は、下の追従 CTA のぶん、画面の画像を小さくする */
@media (max-width: 859px) and (max-height: 740px) {
  html.snap-on .feature { --ph: 28svh; }
  /* 訳の文は日本語より長いので、画像と本文をもう少し小さくする */
  html.snap-on:not([lang="ja"]) .feature { --ph: 24svh; }
  html.snap-on:not([lang="ja"]) .feature-text p:not(.step) { margin-top: 14px; font-size: 14px; line-height: 1.7; }
}
@media (max-width: 859px) and (max-height: 660px) {
  html.snap-on:not([lang="ja"]) .feature { --ph: 21svh; }
}
html.snap-on .feature .phone { --pw: calc(var(--ph) * 0.46 + 20px); }
html.snap-on .feature .phone-pair { --pair: calc((var(--ph) * 0.46 + 20px) / 0.78); }
html.snap-on .feature .phone-pair .phone { --pw: calc(var(--pair) * 0.78); }
html.snap-on .feature .phone-pair .phone-back { --pw: calc(var(--pair) * 0.62); }
@media (min-width: 860px) {
  html.snap-on .feature { --ph: min(70svh, 640px); gap: 72px; justify-items: stretch; }
  html.snap-on .feature .phone, html.snap-on .feature .phone-pair { justify-self: center; }
}
/* ページに着いたら、画面 → 見出し → 説明の順にふわっと出す */
html.snap-on .feature-page [data-part] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}
html.snap-on .feature-page [data-part="phone"] { transform: translateX(24px); }
html.snap-on .feature-page.is-in [data-part] { opacity: 1; transform: none; filter: none; }
html.snap-on .feature-page.is-in [data-part="caption"] { transition-delay: 0.35s; }
html.snap-on .feature-page.is-in [data-part="desc"] { transition-delay: 0.7s; }
/* 砂になったページは中身を隠す（砂の粒が代わりに描かれる。戻ってきたら、また順に出す） */
.page.is-gone [data-part], .page.is-gone [data-sand], .page.is-gone [data-sand-unit] { visibility: hidden; transition: none; }
/* 砂の粒を描く層（画面に固定して、ページの上に重ねる。story.js が 1 CSS px = 1 画素で描く） */
.sand-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
html:not(.snap-on) .sand-layer { display: none; }

/* おわりの節のロゴリビール（web/assets/js/story.js が html に .reveal-on を付け、節が見えたら .is-revealed を付ける）。
   灯がともるように、うしろの光がふくらむ → アイコンが暗さとぼけからピントが合う → 名前が字間を締めながら現れる
   → 文を1行ずつ → ボタン、の順に1つずつ出す。出たあとは、うしろの光だけが灯のようにゆっくり呼吸する */
html.reveal-on .closing:not(.is-revealed) :is(.closing-halo, .closing-icon, .closing-name, .closing-line, .closing-cta) { opacity: 0; }
html.reveal-on .closing.is-revealed .closing-halo {
  animation: halo-ignite 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) both, halo-breathe 5s ease-in-out 2.6s infinite;
}
html.reveal-on .closing.is-revealed .closing-icon { animation: icon-light 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both; }
html.reveal-on .closing.is-revealed .closing-name { animation: name-in 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s both; }
html.reveal-on .closing.is-revealed .closing-line { animation: line-in 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
html.reveal-on .closing.is-revealed .c1 { animation-delay: 2.4s; }
html.reveal-on .closing.is-revealed .c2 { animation-delay: 3.0s; }
html.reveal-on .closing.is-revealed .c3 { animation-delay: 3.6s; }
html.reveal-on .closing.is-revealed .closing-cta { animation: line-in 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 4.4s both; }
@keyframes halo-ignite {
  0% { opacity: 0; transform: scale(0.3); }
  45% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.8; transform: scale(1); }
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes icon-light {
  0% { opacity: 0; transform: scale(0.9); filter: brightness(0.3) blur(8px); }
  60% { opacity: 1; filter: brightness(1.2) blur(1px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes name-in {
  from { opacity: 0; letter-spacing: 0.34em; filter: blur(4px); }
  to { opacity: 1; letter-spacing: 0.04em; filter: none; }
}

/* 追従 CTA（アプリの説明のあいだだけ。web/assets/js/story.js が .is-shown を付け外しする）。
   下から上がって止まり、出るときは同じ道を沈む */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(26, 24, 41, 0.80);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 1px));
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.75, 0.2), opacity 0.5s ease-in, visibility 0s linear 0.5s;
}
.sticky-cta.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease-out, visibility 0s;
}
.sticky-cta-inner { display: flex; align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto; }
.sticky-cta-icon { flex: none; width: 44px; height: 44px; border-radius: 22.4%; box-shadow: 0 0 0 1px var(--line); }
.sticky-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sticky-cta-name { font-family: var(--font-hand); font-size: 18px; letter-spacing: 0.04em; }
.sticky-cta-note { color: var(--text-note); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta-store { flex: none; min-height: 44px; padding: 0 20px; font-size: 14px; letter-spacing: 0.04em; }
@media (max-width: 480px) {
  .sticky-cta-note { display: none; }
  .sticky-cta-store { padding: 0 16px; font-size: 13px; }
}
/* 1ページずつのときは、01〜04 の中身をバーの上で真ん中に置く */
html.snap-on .feature-page { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* 規約・ポリシー・サポートのページ（読み物。幅を狭くし、見出しは手書きの書体） */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0 96px;
  line-break: strict;
}
.doc h1 {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.doc-date { margin-top: 10px; color: var(--text-note); font-size: 13px; }
.doc-lead { margin-top: 28px; color: var(--text-sub); font-size: 15px; }
.doc h2 {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(20px, 4.4vw, 24px);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.doc h3 { margin: 28px 0 0; font-size: 16px; font-weight: 500; line-height: 1.6; }
.doc p, .doc ul, .doc ol { margin: 14px 0 0; color: var(--text-sub); font-size: 15px; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--cream); font-weight: 500; }
.doc a { text-decoration: underline; text-decoration-color: rgba(255, 227, 194, 0.4); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc a:hover { text-decoration-color: var(--cream); }
.doc-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14px; }
.doc-table th, .doc-table td { padding: 12px 8px; border-top: 1px solid var(--divider); text-align: left; vertical-align: top; }
.doc-table tr:last-child th, .doc-table tr:last-child td { border-bottom: 1px solid var(--divider); }
.doc-table th { color: var(--cream); font-weight: 500; }
.doc-table td { color: var(--text-sub); }
.doc-table td:last-child { white-space: nowrap; }
.doc-card {
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.doc-card p:first-child { margin-top: 0; }
.doc-path { color: var(--cream); }
.links a[aria-current="page"] { color: var(--cream); }

/* 日本語は語の途中で折れるので、長い行は句（.ph）の切れ目でだけ折り返す。iOS の Safari は word-break: auto-phrase を持たない */
.ph { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .lamp, .hero-map, .hero .line { animation: none; }
  .map-stamp { display: none; }
  .sticky-cta, .sticky-cta.is-shown { transform: none; }
}

/* 印刷するとき（規約などを紙や PDF にする）は、白地に黒い字にし、光と粒子を消す */
@media print {
  :root {
    --cream: #1a1a1a;
    --text-sub: #333333;
    --text-note: #666666;
    --amber: #1a1a1a;
    --surface: transparent;
    --line: #cccccc;
    --divider: #dddddd;
  }
  @page { size: A4; margin: 18mm 16mm; }
  html, body { background: #ffffff; }
  body { font-size: 11pt; }
  body::after, .sky, .lamp, .links { display: none; }
  .top { padding: 0 0 8mm; }
  main { padding: 0; }
  .doc { max-width: none; padding: 0; }
  .doc h2 { break-after: avoid; margin-top: 10mm; padding-top: 5mm; }
  .doc h3 { break-after: avoid; }
  .doc-card, .doc-table tr, .doc li { break-inside: avoid; }
  .bottom { padding: 6mm 0 0; }
}