/* ===== ヒーロー（4案共通の土台） ===== */
.hero {
  position: relative;
  height: max(640px, min(100svh, 1000px));
  display: grid; place-items: center;
  padding: 72px 16px 40px;
  overflow: hidden;
}
.hero-block { display: flex; flex-direction: column; align-items: flex-start; position: relative; }

/* ワードマーク＋リュック。大きさはワードマークの文字サイズ（em）基準 */
.lockup { display: flex; align-items: baseline; gap: 0.26em; font-size: clamp(3rem, 8.4vw, 7.2rem); }
.wordmark-hero {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: 1em; line-height: 0.82; letter-spacing: -0.005em; margin: 0; user-select: none;
}
.backpack-stage { position: relative; width: 1.04em; height: 1.17em; cursor: pointer; flex: none; transform: translateY(0.025em); }

/* ===== 落ちて開くアニメーション（試作Aのまま） ===== */
/* ===== タイムライン（秒）=====
   0.15  影が出る（色は最初から固定。大きさだけ育つ）
   0.75  落下開始
   1.17  着地：潰れ・砂埃・衝撃線
   1.42  蓋が背面へ跳ね上がる
   1.68  中身が出る
================================ */

.shadow {
  position: absolute;
  left: 50%;
  bottom: -0.07em;
  width: 1.2em;
  height: 0.14em;
  margin-left: -0.6em;
  opacity: 0;
}
.shadow-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--shadow);
}
.animate .shadow { animation: shadowApproach 1.02s 0.15s both; }
.animate .shadow-inner { animation: shadowImpact 0.5s 1.17s both; }

@keyframes shadowApproach {
  0%   { transform: scale(0.15); opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  18%  { opacity: 1; }
  25%  { transform: scale(0.42); opacity: 1; animation-timing-function: ease-in-out; }
  42%  { transform: scale(0.38); opacity: 1; animation-timing-function: ease-in-out; }
  59%  { transform: scale(0.45); opacity: 1; animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes shadowImpact {
  0%   { transform: scaleX(1); }
  20%  { transform: scaleX(1.14); }
  100% { transform: scaleX(1); }
}

.bp-drop { position: absolute; inset: 0; z-index: 2; }
.animate .bp-drop { animation: drop 0.42s 0.75s both cubic-bezier(.55,.055,.675,.19); }
@keyframes drop {
  0%   { transform: translateY(-110vh) rotate(-7deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.bp-squash { width: 100%; height: 100%; transform-origin: 50% 100%; }
.animate .bp-squash { animation: squash 0.95s 0.75s both; }
@keyframes squash {
  0%    { transform: scale(1, 1); }
  42%   { transform: scale(0.94, 1.08); animation-timing-function: linear; }
  44.2% { transform: scale(1.15, 0.85); }
  54%   { transform: scale(1.13, 0.87); animation-timing-function: cubic-bezier(.3,0,.3,1); }
  70%   { transform: scale(0.97, 1.04); animation-timing-function: ease-in-out; }
  85%   { transform: scale(1.015, 0.988); animation-timing-function: ease-in-out; }
  100%  { transform: scale(1, 1); }
}

.backpack-svg { width: 100%; height: 100%; overflow: visible; }

/* マークの「抜き」は背景色で描く → 背景が変わっても切り抜きに見える */
.cut  { stroke: var(--bg); }
.cutf { fill: var(--bg); }

.bp-flap { transform-box: view-box; transform-origin: 80px 40px; }
.animate .bp-flap { animation: flapFlip 0.41s 1.17s both; }
@keyframes flapFlip {
  0%   { transform: scaleY(1);   animation-timing-function: ease-out; }
  22%  { transform: scaleY(0.9); animation-timing-function: ease-in-out; }
  45%  { transform: scaleY(1);   animation-timing-function: linear; }
  60%  { transform: scaleY(1);   animation-timing-function: cubic-bezier(.55,0,.9,.5); }
  100% { transform: scaleY(0); }
}

.bp-lining { transform-box: view-box; transform-origin: 80px 44px; }
.animate .bp-lining { animation: liningRise 0.5s 1.58s both; }
@keyframes liningRise {
  0%   { transform: scaleY(0) rotate(0deg);     animation-timing-function: cubic-bezier(.2,.9,.35,1); }
  45%  { transform: scaleY(1.14) rotate(-3deg); animation-timing-function: ease-in-out; }
  72%  { transform: scaleY(0.93) rotate(1deg);  animation-timing-function: ease-in-out; }
  100% { transform: scaleY(1) rotate(0deg); }
}

.item { transform-box: fill-box; transform-origin: 50% 100%; }
.animate .item-notebook { animation: itemPop 0.55s 1.68s both cubic-bezier(.34,1.5,.64,1); }
.animate .item-recorder { animation: itemPop 0.55s 1.8s both cubic-bezier(.34,1.5,.64,1); }
@keyframes itemPop {
  0%   { transform: translateY(60px); }
  100% { transform: translateY(0); }
}

.bp-tag { transform-box: view-box; transform-origin: 134px 66px; }
.animate .bp-tag { animation: tagSwing 1.6s 0.75s both; }
@keyframes tagSwing {
  0%   { transform: rotate(-8deg);  animation-timing-function: ease-in; }
  26%  { transform: rotate(-42deg); animation-timing-function: ease-out; }
  40%  { transform: rotate(26deg);  animation-timing-function: ease-in-out; }
  55%  { transform: rotate(-13deg); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(6deg);   animation-timing-function: ease-in-out; }
  85%  { transform: rotate(-2deg);  animation-timing-function: ease-in-out; }
  100% { transform: rotate(0deg); }
}

/* 着地エフェクト：白い煙＋黒い衝撃線 */
.fx {
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  width: 2.76em;
  height: 0.893em;
  margin-left: -1.38em;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.puff { transform-box: fill-box; transform-origin: center; transform: scale(0); fill: var(--paper); }
.animate .puff { animation-fill-mode: both; animation-timing-function: cubic-bezier(.15,.7,.35,1); }
.animate .puff-1 { animation-name: puff1; animation-duration: 0.62s; animation-delay: 1.17s; }
.animate .puff-2 { animation-name: puff2; animation-duration: 0.74s; animation-delay: 1.19s; }
.animate .puff-3 { animation-name: puff3; animation-duration: 0.55s; animation-delay: 1.21s; }
.animate .puff-4 { animation-name: puff4; animation-duration: 0.68s; animation-delay: 1.17s; }
.animate .puff-5 { animation-name: puff5; animation-duration: 0.8s;  animation-delay: 1.2s;  }
.animate .puff-6 { animation-name: puff6; animation-duration: 0.5s;  animation-delay: 1.23s; }
@keyframes puff1 { 0% { transform: translate(0,0) scale(0); } 40% { transform: translate(-30px,-8px) scale(1); }  100% { transform: translate(-52px,-20px) scale(0); } }
@keyframes puff2 { 0% { transform: translate(0,0) scale(0); } 35% { transform: translate(-46px,-14px) scale(1); } 100% { transform: translate(-78px,-34px) scale(0); } }
@keyframes puff3 { 0% { transform: translate(0,0) scale(0); } 45% { transform: translate(-14px,-22px) scale(1); } 100% { transform: translate(-22px,-44px) scale(0); } }
@keyframes puff4 { 0% { transform: translate(0,0) scale(0); } 40% { transform: translate(34px,-6px) scale(1); }   100% { transform: translate(60px,-16px) scale(0); } }
@keyframes puff5 { 0% { transform: translate(0,0) scale(0); } 38% { transform: translate(52px,-18px) scale(1); }  100% { transform: translate(90px,-40px) scale(0); } }
@keyframes puff6 { 0% { transform: translate(0,0) scale(0); } 45% { transform: translate(18px,-26px) scale(1); }  100% { transform: translate(26px,-50px) scale(0); } }

.impact-line {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 30 60;
  stroke-dashoffset: 30;
  opacity: 0;
}
.animate .impact-line { animation: impactLine 0.36s 1.17s both cubic-bezier(.2,.7,.4,1); }
.animate .impact-line.l2 { animation-delay: 1.19s; }
.animate .impact-line.l3 { animation-delay: 1.21s; }
@keyframes impactLine {
  0%   { stroke-dashoffset: 30;  opacity: 0; }
  1%   { opacity: 1; }
  97%  { opacity: 1; }
  100% { stroke-dashoffset: -32; opacity: 0; }
}

/* 見出しは着地後に下から出す */
@keyframes rise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* =====================================================
   A 着地：見出しの下に3つの数字
   ===================================================== */
.rec-row { display: flex; gap: 0; margin: 2.4rem 0 0; padding: 0; }
.rec-row div { padding: 0 clamp(16px, 2.4vw, 34px); border-left: 2.5px solid var(--ink); }
.rec-row div:first-child { padding-left: 0.03em; border-left: 0; }
.rec-row dd { margin: 0; font-family: var(--cond); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: .9; font-variant-numeric: tabular-nums; }
.rec-row dt { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.hero-a .rec-row { opacity: 0; }
.hero-a .animate .rec-row { animation: rise .5s 1.5s both cubic-bezier(.2,.8,.3,1); }

/* =====================================================
   B 荷札：リュックからひもで下がった大きな荷札
   ===================================================== */
.hero-b .lockup { font-size: clamp(3rem, 7.4vw, 6.4rem); }
.tag-string {
  position: absolute; left: 82%; top: 62%; width: 1.3em; height: 1.05em; overflow: visible; z-index: 1;
  fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke;
}
.tag-string path { vector-effect: non-scaling-stroke; }
.big-tag {
  position: absolute; left: calc(82% + 0.85em); top: calc(62% + 0.95em);
  width: clamp(230px, 22vw, 300px); z-index: 4;
  background: #FBF6EA; color: var(--ink);
  padding: 34px 20px 18px;
  font: 13px var(--mono);
  clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.18));
  transform-origin: 50% -30px;
  transform: rotate(6deg);
}
.big-tag::before { /* ひもを通す穴 */
  content: ""; position: absolute; left: 50%; top: 12px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px #E6DCC4;
}
.tag-top { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.tag-route { font-family: var(--cond); font-weight: 800; font-size: 2.6rem; line-height: 1; margin: 10px 0 8px; }
.tag-route i { font-style: normal; color: var(--bg); }
.tag-line { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #b9ae97; padding: 7px 0; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.tag-line b { font-family: var(--cond); font-weight: 800; font-size: 1.9rem; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.tag-foot { font-family: var(--hand); font-size: 1.05rem; color: #8a7f68; margin-top: 6px; text-align: right; }
.hero-b .big-tag, .hero-b .tag-string { opacity: 0; }
.hero-b .animate .tag-string { animation: fadeIn .2s 1.17s both; }
.hero-b .animate .big-tag { animation: bigTagSwing 2.2s 1.17s both; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes bigTagSwing {
  0%   { opacity: 1; transform: translateY(-40px) rotate(-30deg); animation-timing-function: ease-out; }
  22%  { transform: translateY(0) rotate(22deg); animation-timing-function: ease-in-out; }
  42%  { transform: rotate(-9deg); animation-timing-function: ease-in-out; }
  62%  { transform: rotate(10deg); animation-timing-function: ease-in-out; }
  80%  { transform: rotate(4deg); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: rotate(6deg); }
}
.hero-b .hero-block { margin-right: 18vw; }

/* =====================================================
   C 数字：数字が画面の主役
   ===================================================== */
.hero-c { place-items: stretch; padding: 84px clamp(16px, 3vw, 36px) 36px; }
.hero-c .hero-block { width: 100%; height: 100%; justify-content: space-between; }
.c-top { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; gap: 24px; flex-wrap: wrap; }
.hero-c .lockup { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.rec-giant { margin: 0; padding: 0; width: 100%; }
.rec-giant div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 3px solid var(--ink); padding: .1em 0 0;
}
.rec-giant dd {
  margin: 0; font-family: var(--cond); font-weight: 800; line-height: .82;
  font-size: clamp(4rem, 19vh, 15rem); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rec-giant div:nth-child(2) dd { color: var(--paper); }
.rec-giant dt { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2.6vw, 2.2rem); text-align: right; }
.hero-c .rec-giant div { opacity: 0; }
.hero-c .animate .rec-giant div { animation: rise .5s both cubic-bezier(.2,.8,.3,1); }
.hero-c .animate .rec-giant div:nth-child(1) { animation-delay: 1.35s; }
.hero-c .animate .rec-giant div:nth-child(2) { animation-delay: 1.5s; }
.hero-c .animate .rec-giant div:nth-child(3) { animation-delay: 1.65s; }

/* =====================================================
   D 歩く：コマ撮りの人＋写真、距離メーター
   ===================================================== */
.hero-d { background: #111; color: #fff; place-items: stretch; padding: 0; }
.walk-photos { position: absolute; inset: 0; }
.walk-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.walk-photos img.on { opacity: 1; }
.walk-photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55)); }
.walker {
  position: absolute; left: 50%; bottom: 13%; height: 52%; width: auto; transform: translateX(-42%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.walk-copy { position: absolute; left: clamp(16px, 3vw, 36px); top: 84px; }
.walk-mark { margin: 0; font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 8.4vw, 7.2rem); line-height: .82; }
.odo {
  position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 4vh, 40px);
  display: flex; gap: 10px; margin: 0;
}
.odo-cell { background: rgba(10,10,10,.86); border-radius: 10px; padding: 10px 14px 8px; }
.odo-digits {
  margin: 0; font: 600 clamp(1.4rem, 2.6vw, 2.2rem) var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  background: repeating-linear-gradient(90deg, #222 0 1.15ch, #1a1a1a 1.15ch 1.2ch); border-radius: 4px; padding: 2px 8px; color: #fff;
}
.odo-cell:last-child .odo-digits { color: #FFD23F; }
.odo-cell dt { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #aaa; margin-top: 6px; }
body.on-hero-d .site-head.overlay { color: #fff; }

@media (max-width: 760px) {
  .rec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  .rec-row div { border-left: 0; padding: 0; }
  .big-tag { position: relative; left: auto; top: auto; margin-top: 10px; }
  .hero-b .backpack-stage .big-tag, .hero-b .tag-string { display: none; }
  .odo { left: 16px; right: 16px; flex-wrap: wrap; }
}