/* ============================================================
   meguri — wellness & beauty lab（架空ブランド・デザインモック）
   生成り紙 × 手描き流線 × 流れるアニメーション
   ============================================================ */

:root {
  --paper:      #F7F2E9;  /* 生成り */
  --paper-deep: #F1EADC;  /* 一段深い生成り */
  --ink:        #3B3128;  /* 墨茶 */
  --ink-soft:   #6B5D4F;
  --accent:     #3D5C9C;  /* 藍（テクノロジーの色） */
  --accent-soft:#7388BE;
  --spark:      #BC6A55;  /* テラコッタ（小さな差し色・人の温度） */
  --green:      #58705B;  /* 青磁苔 */
  --serif-ja:   "Shippori Mincho", serif;
  --serif-en:   "Cormorant", serif;
  --gothic:     "Zen Kaku Gothic New", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 紙の質感（粒子） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.19 0 0 0 0 0.15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

/* ============ ヘッダー ============ */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 34px 48px 18px;
  transition: background-color .5s ease, backdrop-filter .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}

/* 下へスクロールすると、生成りがほんのり染みて文字が立つ（要素は動かさない） */
.site-head.scrolled {
  background-color: rgba(243, 236, 224, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(59, 49, 40, .08);
}

.brand { display: flex; flex-direction: column; gap: 5px; }

.brand-logo {
  font-family: var(--serif-en);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .42em;
  line-height: 1;
}

.brand-sub {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink-soft);
}

.gnav {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 6px;
}

.gnav a {
  font-family: var(--serif-en);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .14em;
  position: relative;
  transition: color .35s;
}

.gnav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.gnav a:not(.nav-cta):hover { color: var(--accent); }
.gnav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 26px;
  transition: background .4s, color .4s, border-color .4s;
}

.nav-cta:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ============ ファーストビュー ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* --- 流線レイヤー --- */
.flow-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.flow-svg path {
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-svg .cur-green { stroke: var(--green); }

.flow-svg .cur-dot { stroke-dasharray: 1 9 !important; } /* 点描のながれ（描画後に適用） */

/* 地球儀とグローバルネットワーク */
.flow-svg circle {
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
}

.flow-svg .globe { stroke-width: 2.1; stroke-opacity: .8; }
.flow-svg .merid { stroke-width: 1.4; stroke-opacity: .45; }
.flow-svg .link  { stroke-width: 1.7; stroke-opacity: .75; }
.flow-svg .thin  { stroke-width: 1.4; stroke-opacity: .6; }

/* 紙飛行機（テラコッタ＝人の温度）と点線の軌跡 */
.flow-svg .plane { stroke: var(--spark); stroke-width: 1.8; stroke-opacity: .85; fill: rgba(251, 247, 239, .95); }

.flow-svg .trail {
  stroke: var(--spark);
  stroke-width: 1.6;
  stroke-dasharray: 2 10;
  opacity: 0;
  transition: opacity 1.2s ease 1.4s;
}

.inked .trail { opacity: .55; }

/* 電波のアーク */
.flow-svg .wave { stroke: var(--green); stroke-width: 1.8; stroke-opacity: .75; }

/* 小さな灯：描画後にぽっと点く */
.flow-svg .spark-dot {
  fill: var(--spark);
  stroke: none;
  opacity: 0;
  transition: opacity 1s ease 2.4s;
}

.inked .spark-dot { opacity: .85; }

/* 自己描画：JS が --len を与え .drawn を付ける */
.draw {
  stroke-dasharray: var(--len, 1500);
  stroke-dashoffset: var(--len, 1500);
}

/* 流線はヘッドラインの書き上がり（body.inked）を合図に描き始める */
.inked .draw {
  animation: drawLine 2.4s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--di, 0) * .18s);
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* 永続のゆらぎ（呼吸） */
.sway   { will-change: transform; }
.sway-a { animation: swayA 14s ease-in-out infinite alternate; }
.sway-b { animation: swayB 18s ease-in-out infinite alternate; }
.figure { animation: swayC 22s ease-in-out infinite alternate; }

@keyframes swayA { from { transform: translateY(0) }       to { transform: translateY(-9px) } }
@keyframes swayB { from { transform: translateY(0) }       to { transform: translateY(11px) } }
@keyframes swayC { from { transform: translate(0,0) }      to { transform: translate(-5px, 6px) } }

/* ながれを旅する雫（SVG circle。viewBox 座標なので全画面幅でラインに乗る） */
.traveler {
  fill: var(--accent);
  stroke: none !important;
  opacity: 0;
}

.inked .traveler { animation-name: travel, travelFade; animation-fill-mode: forwards; }

.t1 {
  offset-path: path("M -40 210 C 240 150, 520 250, 780 210 C 920 200, 990 226, 1037 248");
  animation-duration: 19s, 19s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 2.6s;
}

.t2 {
  offset-path: path("M -40 470 C 260 420, 520 510, 820 470 C 1000 444, 1100 470, 1170 540");
  fill: var(--spark);
  animation-duration: 26s, 26s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 6s;
}

.t3 {
  offset-path: path("M -40 540 C 280 500, 560 580, 860 540 C 1040 516, 1180 560, 1480 520");
  fill: var(--green);
  animation-duration: 32s, 32s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 9s;
}

@keyframes travel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes travelFade {
  0%, 100% { opacity: 0; }
  6%, 88%  { opacity: .75; }
}

/* --- コピーブロック --- */
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 120px 48px 140px 9vw;
  max-width: 760px;
}

/* 流線の上でも文字が静かに読めるよう、背後にやわらかな紙だまりを敷く */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 6% -8% 4% -22%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 42% 52%, var(--paper) 38%, rgba(247, 242, 233, .55) 62%, transparent 78%);
  pointer-events: none;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif-en);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .3em;
  color: var(--accent);
  margin-bottom: 34px;
}

.eyebrow-line {
  display: inline-block;
  width: 52px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: lineGrow 1.2s cubic-bezier(.22,1,.36,1) 1.5s backwards;
}

@keyframes lineGrow { from { transform: scaleX(0); } }

/* --- 手書きヘッドライン：一文字ずつ「なぞり描き→インクが染みる」 --- */
.hero-title { line-height: 0; }

.hw-svg {
  width: clamp(250px, 48vw, 640px); /* 最小値は回廊確保後のスマホ幅（390-96px）に収まる値 */
  overflow: visible;
  transform-origin: center;
}

.hw-word {
  font-family: "Great Vibes", cursive;
  font-size: 112px;
  visibility: hidden; /* JS の tspan 化が済むまで素の文字を見せない */
}

.hw-ready .hw-word { visibility: visible; }

/* JS が一文字ずつ tspan 化し、--hd（書き出し）/--hdur（所要）/--fd（染み）/--dash（線長）を振る。
   所要時間は文字幅から算出＝太い大文字はゆっくり・小文字はさらっと、の強弱がつく */
.hw-word tspan {
  fill: var(--ink);
  fill-opacity: 0;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-opacity: .9;
  stroke-dasharray: var(--dash, 1600);
  stroke-dashoffset: var(--dash, 1600);
}

.drawn .hw-word tspan {
  /* 書き出しゆっくり→中盤すっと→止め、のペン運び */
  animation:
    hwTrace var(--hdur, 1s) cubic-bezier(.6, .04, .35, .96) forwards,
    hwFill  .65s ease-out forwards;
  animation-delay: var(--hd, 1s), var(--fd, 1.7s);
}

@keyframes hwTrace {
  to { stroke-dashoffset: 0; }
}

@keyframes hwFill {
  to { fill-opacity: 1; stroke-opacity: 0; }
}

/* --- スプラッシュ：画面中央・前面で書き上がり、シュルッと定位置へ --- */
.hw-splash {
  position: relative;
  z-index: 40;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--ds, 1.6));
}

.hw-splash.hw-dock {
  animation: dockFlow 1.9s linear forwards; /* 緩急は各区間の timing-function で出す */
}

/* 川の流れに乗るような S 字軌道：
   ふわっと流れ出す → 下流へ沈む → すくい上げられて定位置へ → 余韻のひと揺れ */
@keyframes dockFlow {
  0% {
    transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--ds, 1.6)) rotate(0deg);
    filter: blur(0);
    animation-timing-function: cubic-bezier(.6, .05, .55, .45); /* ゆっくり流れ出す */
  }
  35% {
    transform: translate(calc(var(--dx, 0px) * .68), calc(var(--dy, 0px) * .75 + 56px))
               scale(calc(var(--ds, 1.6) * .75 + .25)) rotate(-2.6deg);
    filter: blur(2.5px);
    animation-timing-function: cubic-bezier(.38, .1, .3, 1); /* 流れに乗って加速 */
  }
  72% {
    transform: translate(calc(var(--dx, 0px) * .1 - 14px), calc(var(--dy, 0px) * .12 - 10px))
               scale(calc(var(--ds, 1.6) * .1 + .9)) rotate(.8deg);
    filter: blur(.8px);
    animation-timing-function: cubic-bezier(.3, 0, .2, 1); /* すくい上げ→そのまま滑らかに着地 */
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* 文末のピリオドはテラコッタをひと差し（人の温度） */
.hw-word .hw-dot {
  fill: var(--spark);
  stroke: var(--spark);
}

.hero-script {
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .42em;
  color: var(--accent);
  margin: 30px 0 0 6px;
  position: relative;
  display: inline-block;
}

.script-flourish {
  position: absolute;
  left: 2px;
  bottom: -14px;
  width: min(220px, 90%);
  height: 24px;
}

.script-flourish path {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-opacity: .65;
}

.draw-late {
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
}

.docked .draw-late {
  animation: drawLine 1.4s cubic-bezier(.4,0,.2,1) .5s forwards;
}

.hero-lead {
  margin-top: 46px;
  font-size: 14.5px;
  line-height: 2.3;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

.hero-actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.btn-fill {
  font-family: var(--serif-ja);
  font-size: 15px;
  letter-spacing: .22em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 17px 44px;
  transition: background .45s, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}

.btn-fill:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(61, 92, 156, .5);
}

.btn-line {
  font-family: var(--serif-ja);
  font-size: 15px;
  letter-spacing: .22em;
  position: relative;
  padding-bottom: 8px;
  transition: color .35s;
}

.btn-line-bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transition: background .35s, transform .45s cubic-bezier(.22,1,.36,1);
  transform-origin: left;
}

.btn-line:hover { color: var(--accent); }
.btn-line:hover .btn-line-bar { background: var(--accent); transform: scaleX(.6); }

/* --- スクロールキュー --- */
.scroll-cue {
  position: absolute;
  left: 48px;
  bottom: 92px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cue-label {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  writing-mode: vertical-rl;
}

.cue-bar {
  width: 1px;
  height: 64px;
  background: linear-gradient(var(--accent), transparent);
  position: relative;
  overflow: hidden;
}

.cue-bar::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 100%; height: 40%;
  background: var(--ink);
  animation: cueFlow 2.2s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes cueFlow {
  to { top: 110%; }
}

/* --- 流れる帯 --- */
.marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(59, 49, 40, .12);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 46s linear infinite;
}

.marquee-track span {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .26em;
  color: var(--ink-soft);
  opacity: .68;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============ ロード時リビール ============ */
/* ヘッドラインのドッキング完了（body.docked）を合図に立ち上がる */
.reveal-load {
  opacity: 0;
  transform: translateY(18px);
}

.docked .reveal-load {
  animation: rise 1.2s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ============ フィロソフィー ============ */
.philosophy {
  position: relative;
  background: var(--paper-deep);
  padding: 150px 9vw 140px;
  text-align: center;
}

.philo-flow {
  position: absolute;
  top: -30px; left: 0;
  width: 100%;
  height: 120px;
}

.philo-flow path,
.philo-text svg path {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: .45;
}

.philo-eyebrow {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 17px;
  letter-spacing: .3em;
  color: var(--accent);
}

.philo-title {
  font-family: var(--serif-ja);
  font-weight: 500;
  font-size: clamp(27px, 3.2vw, 40px);
  letter-spacing: .18em;
  margin-top: 22px;
}

.philo-lead {
  margin-top: 34px;
  font-size: 14px;
  line-height: 2.4;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

/* --- 特徴：テキスト⇄画像のジグザグ --- */
.philo-rows {
  max-width: 1060px;
  margin: 96px auto 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
  text-align: left;
}

.philo-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  align-items: center;
}

/* 偶数行は画像が左 */
.philo-row--rev .philo-text  { order: 2; }
.philo-row--rev .philo-media { order: 1; }

.philo-text svg {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}

.philo-text svg .icon { stroke-width: 2; stroke-opacity: .85; }
.philo-text svg .icon-green { stroke: var(--green); }

.philo-text h3 {
  font-family: var(--serif-ja);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .26em;
}

.philo-text p {
  margin-top: 16px;
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

/* --- 画像の演出：カーテンワイプ → ズーム静定 → ゆったり浮遊 --- */
.philo-media {
  position: relative;
  z-index: 0;
  margin: 0;
}

.philo-media .imgwrap {
  overflow: hidden;
  border-radius: 2px;
  clip-path: inset(0 100% 0 0); /* 左から開く */
  transition: clip-path 1.3s cubic-bezier(.7, 0, .25, 1) .2s;
}

.philo-row--rev .imgwrap { clip-path: inset(0 0 0 100%); } /* 偶数行は右から */

.philo-row.in-view .imgwrap { clip-path: inset(0 0 0 0); }

.philo-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 2.4s cubic-bezier(.22, 1, .36, 1) .2s;
}

.philo-row.in-view img { transform: scale(1); }

.philo-media:hover img {
  transform: scale(1.04);
  transition-duration: 1.2s;
}

/* 着地後はゆったり呼吸するように浮遊 */
.philo-row.in-view .philo-media {
  animation: mediaFloat 9s ease-in-out 2s infinite alternate;
}

@keyframes mediaFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* 手描き風のオフセット枠が遅れて寄り添う */
.philo-media::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(61, 92, 156, .4);
  border-radius: 2px;
  opacity: 0;
  transform: translate(-12px, -12px);
  transition: opacity 1s ease .9s, transform 1s cubic-bezier(.22, 1, .36, 1) .9s;
  pointer-events: none;
  z-index: -1;
}

.philo-row--rev .philo-media::after {
  inset: 18px 18px -18px -18px;
  transform: translate(12px, -12px);
}

.philo-row.in-view .philo-media::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* スクロール連動：自己描画＋せり上がり */
.draw-scroll {
  stroke-dasharray: var(--len, 1600);
  stroke-dashoffset: var(--len, 1600);
  transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1);
  transition-delay: var(--di, 0s);
}

.in-view .draw-scroll,
.in-view.draw-scroll { stroke-dashoffset: 0; }

.reveal-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
}

.reveal-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============ スクロール追従の紙飛行機 ============ */
.plane-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}

.plane-sky.flying { opacity: 1; }

.sky-route { stroke: none; fill: none; } /* 振付パス（不可視・計測用） */

/* ロケットの排気煙：モクモクと膨らんで消えるパフ */
.sky-trail circle {
  fill: #C9BAA3;
  stroke: none;
}

.plane-sky a {
  pointer-events: auto; /* 空レイヤーは透過、ロケットだけ掴める */
  cursor: pointer;
}

.sky-plane {
  /* 宙に浮いている影 */
  filter: drop-shadow(0 5px 7px rgba(59, 49, 40, .18));
}

/* ロケット（ICOOON MONO シルエット）：機体テラコッタ＋噴煙イエロー */
.r-ico       { fill: var(--spark); stroke: none; }
.r-ico-flame { fill: #E2A93F; stroke: none; }

/* 透明ヒットエリア（塗りは透明でもクリックを受ける） */
.sky-plane .hit { fill: transparent; stroke: none; }

/* 噴煙はゆらゆらと脈打つ */
.r-ico-flame {
  animation: flickO .5s ease-in-out infinite alternate;
}

@keyframes flickO {
  from { opacity: .65; }
  to   { opacity: 1; }
}

/* クリック後のブースト飛行中は最上位レイヤー（紙テクスチャ・ヘッダーより上） */
.plane-sky.boost { z-index: 200; }

/* ヒーローに駐機しているロケット：流線の描画に合わせてふわっと現れる */
.hero-rocket {
  opacity: 0;
  transition: opacity 1.1s ease .9s;
}

.inked .hero-rocket { opacity: 1; }

/* ホバーでふわっと拡大（追従の transform とは独立） */
.item-scale {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

#skyLink:hover .item-scale { transform: scale(1.18); }

/* ロケットが押しに来た瞬間の contact ボタン：着火フラッシュ＋広がるグロー */
.nav-cta.pressed {
  background: var(--spark);
  color: var(--paper);
  border-color: var(--spark);
  transform: scale(.92);
  animation: igniteGlow .55s ease-out;
}

@keyframes igniteGlow {
  0%   { box-shadow: 0 0 0 0 rgba(188, 106, 85, .65); }
  100% { box-shadow: 0 0 28px 16px rgba(188, 106, 85, 0); }
}

/* 火花パーティクル：放射状に飛んで消える */
.spark-fly {
  stroke: none;
  animation: sparkFly .65s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes sparkFly {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)); opacity: 0; }
}

.nav-cta { transition: background .4s, color .4s, border-color .4s, transform .25s cubic-bezier(.22,1,.36,1); }

/* 飛び立った後、ヒーロー内の駐機していた紙飛行機はそっと消える */
#heroPlane {
  transition: opacity .7s ease;
}

.flown #heroPlane { opacity: 0; }

/* ============ フッター ============ */
.site-foot {
  background: var(--paper);
  padding: 44px 9vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(59, 49, 40, .1);
}

.foot-logo {
  font-family: var(--serif-en);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .42em;
}

.site-foot small {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* ============ レスポンシブ ============ */
@media (max-width: 900px) {
  .site-head { padding: 24px 24px 0; }
  .gnav a:not(.nav-cta) { display: none; }
  .hero-copy { padding: 140px 24px 150px; } /* とまり木方式になったので回廊余白は不要 */
  .flow-svg { opacity: .55; }
  .traveler { display: none; }
  .scroll-cue { left: 24px; bottom: 76px; }
  .philo-rows { gap: 64px; }
  .philo-row { grid-template-columns: 1fr; gap: 28px; }
  .philo-row--rev .philo-text  { order: 1; } /* モバイルは常にテキスト→画像 */
  .philo-row--rev .philo-media { order: 2; }
  .philo-media::after { display: none; }      /* 狭い画面では枠を省略 */
  .philosophy { padding: 110px 24px 100px; } /* とまり木方式になったので回廊余白は不要 */
  .site-foot { flex-direction: column; gap: 14px; text-align: center; }
}

/* 差し替え線（非PC用）はデフォルト非表示 */
.cur-sub { display: none; }

/* 非PCサイズ：地球儀を縮小して右上へ退避（Brand Message と被らせない）。
   transform は「中心 (1150,380) を目標座標へ写す」計算値。
   流れ込む2本の線も、新住所行きの差し替え線に切り替える */
@media (max-width: 1100px) {
  .figure-pos { transform: translate(677.5px, -9px) scale(.55); } /* 中心→(1310,200) */
  .cur-pc { display: none; }
  .cur-sub { display: block; }
  .traveler { display: none; }  /* 雫はPC限定（旧線に乗るため） */
}

/* スマホ：ヘッダー下端（〜100px）と見出し開始（〜240px）の間の帯に収める。
   接続線は窓の外で途切れて見えるため非表示にし、全幅の環境線だけ残す */
@media (max-width: 520px) {
  .figure-pos { transform: translate(962px, 46.4px) scale(.32); } /* 中心→(1330,168)・直径≈126px */
  .cur-sub { display: none; }
}

/* ============ モーション低減設定の尊重 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
    transition-duration: .01s !important;
  }
  .draw, .draw-late, .draw-scroll { stroke-dasharray: none; stroke-dashoffset: 0; }
  .hw-word tspan { fill-opacity: 1; stroke-opacity: 0; stroke-dasharray: none; stroke-dashoffset: 0; }
  .hw-svg { transform: none !important; }
  .traveler { display: none; }
}