/* =============================================================
   WalkingPad LP — Section Styles
   方式：全幅セクション＋中央1440pxの内側ブロック(.hero__inner)。
   - デザイン本体は中央1440pxに Figma の確定座標(px)で配置。
   - ハンバーガー / Scroll Down は「画面の端から120px」にビューポート固定し、
     拡大縮小しても端からの距離がずれないようにする。
   色・フォントは tokens.css の変数を参照。
   ============================================================= */

/* -------------------------------------------------------------
   中央1440pxのデザイン本体ブロック（中央寄せ）
   ------------------------------------------------------------- */
.hero__inner {
  position: relative;
  width: var(--design-width);   /* 1440px */
  height: 900px;
  margin-inline: auto;
}

.hero__inner > * { position: absolute; }

/* -------------------------------------------------------------
   ハンバーガーメニュー（天地中心固定・画面左端にピン留め）
   - 縦：viewportの中央に固定（スクロールしても画面中央）
   - 横：画面左端を基準に固定。アイコン右端が左から120pxの位置（左72px）。
     画面幅を変えても端からの距離は不変。
   ------------------------------------------------------------- */
.hamburger {
  position: fixed;
  top: 50%;
  left: 36px;                /* 左マージン(0-120px)の中央に48pxアイコンを配置＝(120-48)/2。
                                右端84px→コンテンツ(x120)と36px空き。1440でも接触しない */
  transform: translateY(-50%);
  z-index: 100;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  width: 48px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger__bar {
  position: relative;
  overflow: hidden;            /* coral塗りのはみ出しをクリップ */
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background: var(--color-ink);
  transform-origin: center;
  /* 3本線↔× のモーフ用 */
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              background-color .3s ease,
              opacity .25s ease;
}

/* 真ん中の線だけコーラル（デザインのディテール） */
.hamburger__bar--accent {
  background: var(--color-accent);
}

/* ホバー：3本とも coral が左→右に塗りつぶされる（上から少しずつ遅らせて波打たせる） */
.hamburger__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.6, 0, .2, 1);
}
.hamburger:hover .hamburger__bar::after { transform: scaleX(1); }   /* 3本とも同じタイミングで塗る（時差なし） */
@media (prefers-reduced-motion: reduce) {
  .hamburger__bar::after { transition: none; }
}

/* 初回表示の登場演出：中央コーラルが先に出て、続いて黒2本（中央→外へ線が伸びる＋フェード）。
   ×モーフは transform を使うため、登場は clip-path/opacity だけで実装（衝突回避）。
   backwards で遅延中は隠し、forwards を付けない＝終了後は通常状態に戻るので nav-open のモーフと干渉しない。 */
@keyframes hamburgerBarIn {
  from { opacity: 0; clip-path: inset(0 50%); }
  to   { opacity: 1; clip-path: inset(0 0); }
}
.hamburger__bar { animation: hamburgerBarIn .5s cubic-bezier(.16, 1, .3, 1) backwards; }
.hamburger__bar--accent { animation-delay: .35s; }                                   /* 中央コーラルが先 */
.hamburger__bar:nth-child(1),
.hamburger__bar:nth-child(3) { animation-delay: .8s; }                                /* 黒2本はその後 */
@media (prefers-reduced-motion: reduce) {
  .hamburger__bar { animation: none; }
}

/* メニューを開いたとき：3本線 → コーラルの×（上下バーが中央へ寄って回転・中央バーは消える） */
body.nav-open .hamburger__bar { background: var(--color-accent); }
body.nav-open .hamburger__bar:nth-child(1) { transform: translateY(12px) rotate(45deg); }
body.nav-open .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .hamburger__bar:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
body.nav-open .hamburger__bar::after { display: none; }   /* ×のときは hover 塗りを無効 */
.hamburger { z-index: 110; }                               /* パネル(90)より前面＝×をクリックで閉じれる */

/* =============================================================
   ハンバーガーメニュー オーバーレイ（左から1/3幅のパネル）
   ============================================================= */
.navmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;        /* 閉じている間はスクロール/クリックを透過（ページ操作を妨げない） */
  transition: opacity .4s ease, visibility 0s linear .4s;
}
body.nav-open .navmenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .4s ease;
}
/* メニューを開いている間は背面（ページ）の縦スクロールをロック */
body.nav-open { overflow: hidden; }
.navmenu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 8, 8, 0.42);   /* 残りを薄暗く（クリックで閉じる） */
  cursor: pointer;
}
.navmenu__panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: clamp(380px, 26vw, 410px);    /* slim：左ゲッター120pxは据え置き、右の空きを詰めて気持ちよく */
  box-sizing: border-box;
  background: #ffffff;                  /* 純白（surfaceトークンだとグレーに見えるため白に。ロゴ/文字が締まる） */
  color: var(--color-ink);
  /* 左はハンバーガー(右端84px)から離す＝120px（フッターのコピー左と同寸）。右は詰める。下はコピー用 */
  padding: 72px 20px 16px 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 44px;
  transform: translateX(-100%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 8px 0 48px rgba(0, 0, 0, .16);   /* 純白パネルの右端を背景から分離（控えめ・右方向へ） */
}
body.nav-open .navmenu__panel { transform: translateX(0); }

/* クローンしたフッターメニューを縦並びに（位置指定は解除） */
.navmenu .footer__menu {
  position: static;
  left: auto; top: auto;
  flex-direction: column;
  gap: 40px;
}
/* 白地用：見出し=インク／リンク=インク薄め→ホバーでコーラル（複製元は白文字なので上書き） */
.navmenu .footer__heading { color: var(--color-ink); }
.navmenu .footer__links a { color: rgba(68, 19, 19, 0.62); }
.navmenu .footer__links a:hover { color: var(--color-accent); }
/* 上部ロゴ（小さく）。トリミング済みワードマーク logo-wordmark.png を object-fit で素直に表示。
   ※旧実装は logo.png 全体を overflow:hidden の窓で切り出す crop 方式だったが、
     一部端末（実機 iOS 等）で巨大画像の絶対配置クロップが白抜けする報告があったため、
     トリミング済み専用アセット＋object-fit:contain の堅牢な方式へ変更（CDP/実機で安定）。 */
.navmenu__logo {
  display: block;
  width: 132px;
  height: 15px;
  margin-bottom: 8px;
}
.navmenu__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  max-width: none;
}
/* 開いたとき：ロゴ→各カラム→コピーが下からふわっと立ち上がる（時間差） */
.navmenu__logo,
.navmenu .footer__col,
.navmenu__copy {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
body.nav-open .navmenu__logo { transition-delay: .06s; }
body.nav-open .navmenu .footer__col:nth-child(1) { transition-delay: .16s; }
body.nav-open .navmenu .footer__col:nth-child(2) { transition-delay: .24s; }
body.nav-open .navmenu .footer__col:nth-child(3) { transition-delay: .32s; }
body.nav-open .navmenu__copy { transition-delay: .40s; }
body.nav-open .navmenu__logo,
body.nav-open .navmenu .footer__col,
body.nav-open .navmenu__copy { opacity: 1; transform: translateY(0); }
/* コピーライト：フッターと同じ級数(10px)・1行・パネル最下部・インク薄め */
.navmenu__copy {
  margin: 0;
  margin-top: auto;                    /* 下に押し下げ（フッター同様、最下部に） */
  margin-left: -96px;                  /* リンクの120pxインデントから引き戻し＝パネル左から約24pxへ（もっと左寄せ） */
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: var(--lh-tight);
  color: rgba(68, 19, 19, 0.5);
  white-space: nowrap;                 /* 1行で */
}

@media (prefers-reduced-motion: reduce) {
  .navmenu, .navmenu__panel, .navmenu__logo,
  .navmenu .footer__col, .navmenu__copy { transition: none; }
  body.nav-open .navmenu__panel { transform: translateX(0); }
}

/* =============================================================
   Section 1: FV（ヒーロー） — 全幅 / 高さ900 / 内側1440で配置
   ============================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;                 /* ファーストビュー＝1画面。スクロールで下へ */
  min-height: 600px;
  background: var(--color-bg);
  overflow: hidden;
  display: flex;                 /* 中の900pxブロックを画面中央にバランス配置（サイズは変えない） */
  align-items: center;
  justify-content: center;
}

/* FV→About の「1ページ」的な留まりは JS（bounded-snap / main.js）で実装。
   CSS scroll-snap は背の高いセクションで下に漏れて動画/セール帯で誤爆するため不使用。 */

/* 上中央：歩く、その先へ（明朝・字間20px）  x520 y95 w400 中央寄せ */
.hero__title {
  top: 95px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--fs-h1);            /* 40px */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero-jp);  /* 20px */
  text-indent: var(--ls-hero-jp);     /* 末尾字間ぶんを補正して中央に */
  color: var(--color-ink);
  white-space: nowrap;
}

/* 中央のランナー画像（動画スロット）  中心 (720, 474)  640×640 */
.hero__media {
  left: 50%;
  top: 474px;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 640px;
}

.hero__runner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Beyond：右端 x=554 / top=402 / 96px（右揃え） */
.hero__beyond {
  top: 402px;
  right: 886px;                /* 1440 - 554 */
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-display); /* 96px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}

/* Walk：中心 x=1050.81 / top=402 / 96px（中心基準でフォント差に強い） */
.hero__walk {
  top: 402px;
  left: 1050.81px;
  transform: translateX(-50%);
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-display); /* 96px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}

/* The＋下線：Walk と近すぎたため左へ寄せて余白を確保（Figma915→896）
   ※代替フォント時の調整値。本物フォント導入時に再確認する。 */
.hero__the {
  top: 414px;
  left: 896px;
  transform: translateX(-50%);
  padding-bottom: 3px;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-h2);     /* 32px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}

/* 下中央：ロゴ  x628 y844 w184 h21（Figmaのクロップ枠を再現） */
.hero__logo {
  top: 844px;
  left: 50%;
  transform: translateX(-50%);
  width: 184px;
  height: 21px;
  overflow: hidden;
}

.hero__logo img {
  position: absolute;
  width: 135.15%;
  height: 333.25%;
  left: -17.58%;
  top: -106.1%;
  max-width: none;
}

/* -------------------------------------------------------------
   ヒーロー登場アニメ（読み込み時に1回）
   ・Beyond / The / Walk：coral が左→右にワイプ → 続けて ink が左→右に重なって文字化
     （文字を透明にし、::before=coral / ::after=ink の2層を別々に clip-path ワイプ）
   ・ロゴ：ブラー＋フェードイン（Beyond の後にふわっと）
   ------------------------------------------------------------- */
.hero__beyond, .hero__the, .hero__walk { color: transparent; }
.hero__beyond::before, .hero__beyond::after,
.hero__the::before,    .hero__the::after,
.hero__walk::before,   .hero__walk::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);     /* 右側を隠す＝左→右に出す */
}
/* coral 層（先に・下） */
.hero__beyond::before, .hero__the::before, .hero__walk::before {
  color: var(--color-accent);
  animation: heroWipe .6s cubic-bezier(.5, 0, .2, 1) .2s both;
}
/* ink 層（少し遅れて・上に重なって最終文字に） */
.hero__beyond::after, .hero__the::after, .hero__walk::after {
  color: var(--color-ink);
  animation: heroWipe .6s cubic-bezier(.5, 0, .2, 1) .45s both;
}
/* Beyond / The / Walk は時間差をつけず「文字全体を1ユニット」として同期ワイプ。
   The の下線も別々に出ず、ink層と一緒にワイプさせる（罫線も含めて1ユニット）。 */
.hero__the::before, .hero__the::after {
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
}
@keyframes heroWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero__logo {
  animation: heroLogoIn 1s cubic-bezier(.2, .8, .3, 1) 1.0s both;
}
@keyframes heroLogoIn {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

/* 「歩く、その先へ」：読み込み時にマスクから上端→下へ開きつつ少し上がって出る（op.al風・控えめ）。
   clip-path / transform / opacity のみなので、字間・text-indent の中央寄せは保ったまま。 */
.hero__title {
  animation: titleRise 1s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes titleRise {
  from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__beyond, .hero__the, .hero__walk { color: var(--color-ink); }
  .hero__the { border-bottom: 2px solid var(--color-ink); }  /* 擬似要素を切るぶん下線を戻す */
  .hero__beyond::before, .hero__beyond::after,
  .hero__the::before,    .hero__the::after,
  .hero__walk::before,   .hero__walk::after { display: none; }
  .hero__logo { animation: none; }
}

/* 右下：( Scroll Down )
   画面右端から120pxにピン留め（.hero全幅基準なので拡大縮小しても端から120px）。
   下端はロゴと揃えて 865(=下35)。 */
.hero__scroll {
  position: absolute;
  bottom: 35px;                /* 900 - 865：ロゴ下端と一致 */
  right: 120px;                /* 画面右端から120px */
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-latin);
  font-size: var(--fs-base);   /* 16px */
  line-height: 1.4;
  color: var(--color-ink);
  white-space: nowrap;
}

.hero__scroll-paren {
  font-size: var(--fs-md);     /* 18px */
  display: inline-flex;
  align-items: center;
  height: 1.4em;               /* トラックと同じ天地中央基準に揃え、( ) と文字の中心を一致 */
  line-height: 1;
}

/* Scroll Down の縦ロール（daisheng.com.tw の loop_top 準拠）。
   linear の流れっぱなしをやめ、easeOut で「さっと下りて → ひと呼吸止まる」を繰り返す。 */
.hero__scroll-track {
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  position: relative;
  top: 2px;                    /* テキストを ( ) に対しもう少し下げる */
}

.hero__scroll-loop {
  display: block;
  /* easeOut(=expo) で動きが前半に集中→残りは静止に近い＝「止まる」感。daisheng と同じ 1.45s/easing */
  animation: scrollDownLoop 1.45s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.hero__scroll-loop > span {
  display: block;
  height: 1.4em;
}

/* 2コピーを縦に並べ -50%→0 で1行ぶん下りる。easeOut なので下りた後しばらく静止し、
   継ぎ目（同一テキスト）でループ＝下方向に「ロールして止まる」を反復。 */
@keyframes scrollDownLoop {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-loop { animation: none; }
}

/* =============================================================
   Section 2: コンテンツ（About） — 全幅 / 高さ900 / 内側1440で配置
   背景 #efefef
   ============================================================= */
.about {
  position: relative;
  width: 100%;
  height: 964px;                /* 900 + 64：上部に余白（降下する白帯ナビの着地に余裕を持たせる） */
  background: #efefef;
  overflow: hidden;
}

.about__inner {
  position: relative;
  top: 64px;                    /* コンテンツを下げて上部を空ける（ナビ着地の余白） */
  width: var(--design-width);   /* 1440 */
  height: 900px;
  margin-inline: auto;
}

.about__inner > * { position: absolute; }

/* ショルダー ( About )  left120 top119 */
.about__shoulder {
  left: 120px;
  top: 119px;
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-base);   /* 16px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}
.about__paren { font-size: var(--fs-md); }   /* 18px */

/* タイトル＋本文ブロック  left222 top183 w327 / gap40 */
.about__lead {
  left: 222px;
  top: 183px;
  width: 327px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);          /* 40px */
}

.about__title {
  margin: 0;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: var(--fs-h1);      /* 40px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.about__body {
  font-family: var(--font-gothic);
  font-size: var(--fs-base);    /* 16px */
  letter-spacing: 1.6px;
  color: var(--color-ink);
}
.about__body p {
  margin: 0;
  line-height: 1.75;
  white-space: nowrap;   /* 各行を折り返さない（「に。」が次行に落ちるのを防ぐ） */
}

/* ランニング動画  left630 top79 w408 h544 */
.about__running {
  left: 630px;
  top: 79px;
  width: 408px;
  height: 544px;
}
.about__running img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

/* 女性写真  left120 top642 w180 h258 */
.about__woman {
  left: 120px;
  top: 642px;
  width: 180px;
  height: 258px;
  overflow: hidden;
}
/* デザイン実レンダ(node 96:554)＝全身を【左右反転(scaleX -1)】し枠に fill（デザイン通り）。
   反転 ncc0.99/無反転 ncc-0.16。cover版は「変に歪む」とのことで取り消し、デザイン通りの fill に戻す。 */
.about__woman img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scaleX(-1);
  display: block;
}

/* Good Design ロゴ  left1140 top193 w179 h189 */
.about__gooddesign {
  left: 1140px;
  top: 193px;
  width: 179px;
  height: 189px;
  object-fit: contain;
}

/* 大きいコピー：歩くことから、はじまる
   縦中心751 / リュウミン60px コーラル / 右寄せ。
   右端は「見た目」でAbout King Smithリンク(下線・矢印の右端 x1319)に揃える＝
   letter-spacing末尾6px＋「る」の左サイドベアリング(計~17px)ぶん文字が枠内側で終わるので、
   枠を120→103へ外に出して文字インク右端を1319へ光学補正（Figma 96:553の box1334 と同主旨）。 */
.about__catch {
  right: 103px;
  top: 751px;
  transform: translateY(-50%);
  margin: 0;
  text-align: right;
  font-family: var(--font-mincho);
  font-size: 60px;
  line-height: 1.5;
  letter-spacing: 6px;
  color: var(--color-accent);
  white-space: nowrap;
}

/* リンク About King Smith  left1180 top812 w140 / 破線下線 */
.about__link {
  left: 1180px;
  top: 812px;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);          /* 4px */
  padding-bottom: 6px;
  text-decoration: none;
  color: var(--color-ink);      /* a要素のデフォルト青を抑止。下線(::after=currentColor)もインクに */
}
.about__link-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);          /* 8px */
  font-family: var(--font-latin);
  font-size: var(--fs-base);    /* 16px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}
.about__link-arrow {
  width: 11px;
  height: 8px;
  display: block;
}

/* =============================================================
   Section 3: 動画説明欄（高さ350px）
   daisheng風リビール：初期は四角くマージン（中央に縮んだ長方形）。マージン部分は
   .videoband の背景=上のsection2と同じ #efefef が続く。スクロールで枠内に入ると
   clip-path が inset(...)→inset(0) に展開し、全幅へビヨーンと伸びる。
   ============================================================= */
.videoband {
  position: relative;
  width: 100%;
  /* 高さは画像のアスペクトに追従（1440で350px、他幅では比例）。
     これで object-fit のズーム/トリミングが起きず、Figmaの構図をそのまま表示。 */
  overflow: hidden;
  background: #efefef;          /* マージン部分＝上ブロックのグレーが続く */
  line-height: 0;              /* img下の余白を消す */
}
.videoband img {
  width: 100%;
  height: auto;                /* 比例スケール＝トリミングなし（窮屈に見えない） */
  display: block;
  /* 初期：四角く縮んだ状態（左右に大きめ・上下に少しマージン） */
  clip-path: inset(16% 18%);
  transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1);  /* 素早く伸びて静かに着地 */
}
/* スクロールで枠内に入ったら全幅へ展開 */
.videoband.is-revealed img {
  clip-path: inset(0%);
}
@media (prefers-reduced-motion: reduce) {
  .videoband img { transition: none; clip-path: inset(0%); }
}

/* -------------------------------------------------------------
   汎用スクロール出現（控えめなフェードイン）
   data-reveal="up" を付けた要素が画面に入ると is-revealed が付き、ふわっと表示。
   --ri で時間差（Award/Ranking のカードを左から順に）。
   ※ videoband は値なし data-reveal なのでこの規則の対象外（独自clip）。
   位置は transform/absolute に依存しないよう opacity のみで安全に。
   ------------------------------------------------------------- */
[data-reveal="up"] {
  opacity: 0;
  transition: opacity .9s ease;
  transition-delay: calc(var(--ri, 0) * .12s);
}
[data-reveal="up"].is-revealed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal="up"] { opacity: 1; transition: none; }
}

/* data-reveal="rise"：マスクから上がって出るリビール（ヒーローのタグラインと対の演出）。
   フッターの締めコピーを画面に入ったら静かに1回。 */
[data-reveal="rise"] {
  opacity: 0;
  transform: translateY(16px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .9s ease,
              transform .9s cubic-bezier(.16, 1, .3, 1),
              clip-path .9s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal="rise"].is-revealed {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal="rise"] { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* =============================================================
   Section 4: セール枠（グリーン帯・横マーキー・高さ100px）
   ============================================================= */
.sale {
  width: 100%;
  height: 100px;
  background: var(--color-sale);   /* #74d188 */
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: pointer;                 /* クリック可能の合図（リンク化は次段） */
}
.sale__track {
  display: flex;
  width: max-content;
  /* 26s は JS 実行前の暫定値。main.js が幅に応じて等速(28px/s)に上書きする
     （フッター Contact Us と同じ仕組み・どの画面幅でもスキマなし） */
  animation: saleMarquee 26s linear infinite;
}
.sale__set {
  display: flex;
}
/* 1ユニット：クロック + Time Sale + テキスト + 15%off。末尾40pxで次と間隔 */
.sale__unit {
  display: flex;
  align-items: center;
  gap: var(--space-4);             /* 16px */
  margin-right: var(--space-7);    /* 40px：ユニット間 */
  white-space: nowrap;
}
.sale__clock {
  width: 52px;
  height: 52px;
  display: block;
  flex-shrink: 0;
}
.sale__title {
  font-family: var(--font-latin);
  font-size: var(--fs-h1);         /* 40px */
  line-height: var(--lh-tight);
  color: var(--color-accent);
}
.sale__text {
  margin-left: var(--space-2);     /* gap16 + 8 = 24（Time Sale→テキスト） */
  font-family: var(--font-gothic);
  font-size: var(--fs-lg);         /* 20px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.sale__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-5);  /* 8px 24px */
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-gothic);
  font-size: var(--fs-xl);         /* 24px */
  line-height: var(--lh-tight);
  letter-spacing: -0.72px;
}
@keyframes saleMarquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sale__track { animation: none; }
}

/* =============================================================
   Section 5: プロダクト紹介（全幅 / 内側1440 / 高さ2057）背景=白
   ============================================================= */
.products {
  position: relative;
  width: 100%;
  background: var(--color-bg);
}
.products__inner {
  position: relative;
  width: var(--design-width);    /* 1440 */
  height: 2057px;
  margin-inline: auto;
}
.products__inner > * { position: absolute; }

/* ショルダー ( Products )  x120 y119 */
.products__shoulder {
  left: 120px;
  top: 119px;
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}
.products__paren { font-size: var(--fs-md); }

/* 左右ナビ矢印  左:left120 / 右:left1304 / top390 / 16×32 */
.products__arrow {
  top: 390px;
  width: 16px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.products__arrow svg { width: 16px; height: 32px; display: block; }
/* インラインSVGなので stroke を直接 coral に。ホバーで発色 */
.products__arrow svg path { transition: stroke .3s ease; }
.products__arrow { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }   /* 写真サムネと同じ「持ち上げ」の動き（同じ -3px・同じ easeOut） */
/* コーラルは PC（マウス）ホバー時のみ。タッチ端末は :hover が残ってピンクが居座るため @media hover で除外。 */
@media (hover: hover) {
  .products__arrow:hover svg path { stroke: var(--color-accent); }
  .products__arrow:hover { transform: translateY(-3px); }   /* PCホバーで少し持ち上げ（サムネと同じ動き） */
}
/* タップ/クリックの手応え＝サムネ写真と同じ「少し上に持ち上げ」(-3px)。色は変えない（沈み込み scale は廃止）。 */
.products__arrow.is-pressed { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .products__arrow { transition: none; } }
.products__arrow--left { left: 120px; }
.products__arrow--right { left: 1304px; }

/* プロダクトメイン  x160 y137 w1062 h538 / 行：写真 + テキスト */
.products__main {
  left: 160px;
  top: 137px;
  width: 1062px;
  height: 538px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 58px;
}
.products__photo {
  flex-shrink: 0;
  width: 514px;
  height: 514px;
}
.products__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト列（入れ子のgapをFigma通りに） */
.products__detail   { display: flex; flex-direction: column; gap: 56px; }
.products__detail-a { display: flex; flex-direction: column; gap: 56px; width: 490px; }
.products__detail-b { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.products__detail-c { display: flex; flex-direction: column; gap: 16px; }
.products__head     { display: flex; flex-direction: column; gap: 40px; }

.products__name {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-h1);        /* 40px */
  letter-spacing: 0.8px;
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.products__sub {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-xl);        /* 24px */
  letter-spacing: -0.72px;
  line-height: var(--lh-tight);
  color: var(--color-accent);
}
.products__desc {
  font-family: var(--font-mincho);
  font-size: var(--fs-xs);        /* 12px */
  letter-spacing: -0.36px;
  color: var(--color-ink);
}
.products__desc p { margin: 0; line-height: 2.5; white-space: nowrap; }

.products__stars { width: 192px; height: 32px; display: block; }

.products__tags { display: flex; gap: 8px; }
.products__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-gothic);
  font-size: var(--fs-sm);        /* 13px */
  font-weight: 700;
  letter-spacing: -0.39px;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* View More（破線下線） */
.products__viewmore {
  position: relative;            /* 下線ワイプの ::before/::after の基準 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding-bottom: 5px;
  font-family: var(--font-latin);
  font-size: var(--fs-base);      /* 16px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-decoration: none;
}
.products__viewmore-arrow { width: 11px; height: 8px; display: block; }

/* プロダクト一覧  x358 y675 w724 / flex行 gap56 / pt80 */
.plist {
  left: 358px;
  top: 675px;
  width: 724px;
  padding-top: 80px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.plist__item {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  text-decoration: none;
  cursor: pointer;
}
.plist__thumb {
  width: 85.5px;
  height: 66.5px;
}
.plist__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
/* ホバーでサムネをわずかに持ち上げ（クリッカブルな手応え） */
.plist__item:hover .plist__thumb img { transform: translateY(-3px); }
/* アクティブ（選択中）の製品サムネは「上がったまま止まる」＝緑バーと併せて"選択中"を示す。
   ホバー時の持ち上げと同じ -3px。切替時は .plist__thumb img の transition(.4s easeOut)でふわっと上がってそのまま留まる
   （矢印/サムネ/スワイプ＝setActive で is-active が移動→新アクティブが上がり・旧アクティブが着地）。 */
.plist__item.is-active .plist__thumb img { transform: translateY(-3px); }

/* 区切り線（ネイビー）＋ アクティブ/ホバーで出る緑バー */
.plist__line {
  position: relative;
  width: 100px;
  height: 4px;
}
.plist__line::before {           /* ネイビーの細線 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #133044;
  transform: translateY(-50%);
}
.plist__line::after {            /* 緑バー（80×4）：左→右にスライド */
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: #69d681;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
/* 緑バー＝アクティブ製品(.is-active)の指標。ホバーではなく選択状態で表示。
   矢印/サムネ/スワイプで .is-active が動くと緑も追随（JS）。リビール後に表示。 */
.plist.is-revealed .plist__item.is-active .plist__line::after { transform: scaleX(1); transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .plist__thumb img,
  .plist__line::after { transition: none; }
}

/* 製品リスト下線の登場アニメ：黒線(::before)が左から引かれ→緑バー(::after)が左から引かれて止まる（ハンバーガー風の段階登場）。SP@mediaで .plist.is-revealed 時に発火。 */
@keyframes plistLineDraw { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
@keyframes plistBarDraw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.plist__name {
  font-family: var(--font-latin);
  font-size: var(--fs-base);       /* 16px */
  letter-spacing: -0.48px;
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-align: center;
}

/* FS Fit App ブロック  x222 y887 w444 / flex-col gap40 / pt160 */
.fsfit {
  left: 222px;
  top: 887px;
  width: 444px;
  padding-top: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.fsfit__text { display: flex; flex-direction: column; gap: 16px; }
.fsfit__head { display: flex; flex-direction: column; gap: 32px; white-space: nowrap; }
.fsfit__title {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-h1);         /* 40px */
  line-height: var(--lh-tight);
  color: var(--color-accent);
}
.fsfit__sub {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-xl);         /* 24px */
  letter-spacing: -0.72px;
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.fsfit__desc {
  width: 354px;
  font-family: var(--font-mincho);
  font-size: var(--fs-xs);         /* 12px */
  letter-spacing: -0.36px;
  color: var(--color-ink);
}
.fsfit__desc p { margin: 0; line-height: 2.5; white-space: nowrap; }
.fsfit__photo { width: 383px; height: 383px; }
.fsfit__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 携帯ブロック  写真 x677 y1047 396×550 / 機能列 x1075 y1137 / 接続線 x1019 */
.phone__photo {
  left: 677px;
  top: 1047px;
  width: 396px;
  height: 550px;
  overflow: hidden;
}
.phone__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* コーラルの接続線（ドット＋線）5本  x1019 / 先頭top1150 / 79px間隔 */
.phone__lines {
  left: 1019px;
  top: 1150px;
  display: flex;
  flex-direction: column;
  gap: 74px;                 /* 5px線 + 74 = 79px間隔 */
}
.phone__line { width: 56px; height: 5px; display: block; }

/* 機能列  x1075 y1137 w253 / flex-col gap24 */
.phone__features {
  left: 1075px;
  top: 1137px;
  width: 253px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.phone__feat { display: flex; flex-direction: column; gap: 8px; }
.phone__label {
  align-self: flex-start;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-xs);        /* 12px */
  letter-spacing: -0.36px;
  line-height: 1.5;
  white-space: nowrap;
}
.phone__featdesc {
  padding-inline: 4px;
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: -0.42px;
  line-height: 1.5;
  color: var(--color-ink);
  white-space: nowrap;
}

/* Award ブロック  テキスト x120 y1672 / pt120 / gap16 */
.award {
  left: 120px;
  top: 1672px;
  width: 443px;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.award__title {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-h1);         /* 40px */
  line-height: var(--lh-tight);
  color: var(--color-accent);
}
.award__desc {
  font-family: var(--font-mincho);
  font-size: var(--fs-xs);         /* 12px */
  letter-spacing: -0.36px;
  color: var(--color-ink);
}
.award__desc p { margin: 0; line-height: 2.5; white-space: nowrap; }

/* 受賞ロゴ3つ（ロゴ+線+キャプションの書き出し画像をそのまま配置） */
.award__logo { width: 230px; height: auto; }
.award__logo--gd  { left: 605px;  top: 1799px; }
.award__logo--if  { left: 844px;  top: 1796px; }
.award__logo--red { left: 1083px; top: 1771px; }

/* =============================================================
   Section 6: ランキング（全幅 / 内側1440 / 高さ592）背景=白
   ============================================================= */
.ranking {
  position: relative;
  width: 100%;
  background: var(--color-bg);
}
.ranking__inner {
  position: relative;
  width: var(--design-width);   /* 1440 */
  height: 592px;
  margin-inline: auto;
}
.ranking__inner > * { position: absolute; }

.ranking__title {
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-latin);
  font-size: var(--fs-h1);         /* 40px */
  line-height: var(--lh-tight);
  color: var(--color-accent);
}

/* ランキングカード  top80 / S1:left190 Z1:left571 X21:left952 */
.rcard {
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.rcard--1 { left: 190px; }
.rcard--2 { left: 571px; }
.rcard--3 { left: 952px; }

.rcard__badge {
  position: absolute;
  top: 23px;
  left: 0;
  z-index: 2;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-gothic);
  font-size: 13px;
  line-height: 25px;
  text-align: center;
}
.rcard__photo { width: 300px; height: 193px; }
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rcard__text { display: flex; flex-direction: column; gap: 24px; }
.rcard__name {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 28px;
  letter-spacing: -0.84px;
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.rcard__body { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.rcard__lead { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.rcard__tagline {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-lg);         /* 20px */
  letter-spacing: -0.6px;
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}
.rcard__tags { display: flex; gap: 8px; }
.rcard__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-xs);         /* 12px */
  letter-spacing: -0.36px;
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.rcard__viewmore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding-bottom: 5px;
  font-family: var(--font-latin);
  font-size: var(--fs-base);       /* 16px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-decoration: none;
}
.rcard__viewmore-arrow { width: 11px; height: 8px; display: block; }

/* =============================================================
   Section 7: Walking Journal（全幅 / 内側1440 / 高さ699）背景 #efefef
   ============================================================= */
.journal {
  position: relative;
  width: 100%;
  background: #efefef;
  overflow: hidden;
}
.journal__inner {
  position: relative;
  width: var(--design-width);   /* 1440 */
  height: 699px;
  margin-inline: auto;
}
.journal__inner > * { position: absolute; }

/* ノートアイコン  x120 y120 70×68 */
.journal__icon { left: 120px; top: 120px; width: 70px; height: 68.35px; }

/* タイトル  x120 y229 / gap32 */
.journal__title { left: 120px; top: 229px; display: flex; flex-direction: column; gap: 32px; }
.journal__title-en {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-h1);         /* 40px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.journal__title-sub {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-xl);         /* 24px */
  letter-spacing: -0.72px;
  line-height: var(--lh-tight);
  color: var(--color-accent);
}

/* 本文  x120 y341 / gap48 */
.journal__lead { left: 120px; top: 341px; display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
.journal__desc {
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: -0.42px;
  color: var(--color-ink);
}
.journal__desc p { margin: 0; line-height: 2.5; white-space: nowrap; }
.journal__viewmore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding-bottom: 5px;
  font-family: var(--font-latin);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-decoration: none;
}
.journal__viewmore-arrow { width: 11px; height: 8px; display: block; }

/* 左右ナビ矢印  x534 y565（通常 ink → ホバーで coral） */
/* 初回登場：カードが出そろった後にふわっと浮かび上がる（main.js が is-entered 付与） */
.journal__nav {
  left: 534px; top: 565px; display: flex; gap: 19px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: .7s;        /* カードの後に */
}
.journal__nav.is-entered { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .journal__nav { opacity: 1; transform: none; transition: none; }
}
.journal__nav button {
  width: 16px; height: 32px; padding: 0; border: none; background: none; cursor: pointer;
}
.journal__nav svg { width: 12px; height: 24px; display: block; }
.journal__nav svg path { stroke: var(--color-ink); transition: stroke .3s ease; }  /* 通常は茶色 */
.journal__nav button:hover svg path { stroke: var(--color-accent); }               /* ホバーで coral */
.journal__nav button svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.journal__nav button:first-child:hover svg { transform: translateX(-3px); }  /* 前へ：左にピコッ */
.journal__nav button:last-child:hover svg  { transform: translateX(3px); }   /* 次へ：右にピコッ */
/* 端（先頭/末尾）で進めない側のボタンは無効表示（薄く・押せない） */
.journal__nav button.is-disabled { opacity: .25; pointer-events: none; }

/* カルーセル：x630 から「画面の右端まで」切り取る窓。カードが端で切れず画面外まで連なる。
   right を負側に伸ばして画面端まで（section の overflow:hidden が画面端でクリップ）。
   上下はカードのホバー浮き＋影が切れないよう少し余白（top を上げ height を増やし、track を padding-top で元の y へ戻す）。 */
.journal__viewport {
  left: 630px;
  top: 99px;
  right: calc((var(--design-width) - 100vw) / 2);   /* 1440超では画面右端まで伸びる */
  height: 520px;
  overflow: hidden;
}
/* カード群（track）：flex行・ドラッグ可・無限ループは main.js がクローンで実現 */
.journal__cards {
  display: flex;
  gap: 24px;
  padding-top: 20px;            /* viewport を上に広げたぶんカードを元の y119 へ戻す */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  will-change: transform;
}
.journal__cards:active { cursor: grabbing; }

/* 初回スクロールイン：カードが左から順にスライドイン（--ji で左→右の時間差）。
   静止＝隠して左へ → .is-entered で所定位置へ。main.js が --ji と is-entered を付与。 */
.jcard {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s ease,
              transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--ji, 0) * .09s);
}
.journal__cards.is-entered .jcard {
  opacity: 1;
  transform: translateX(0);
}
/* ホバー：影で浮かせず、カード内の写真がふわっとズーム（編集的・平面のまま中身で反応）。
   上のドット→コーラルは別途維持。写真は jcard__photo の overflow:hidden 内でクリップ。 */
.jcard__photo img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.jcard:hover .jcard__photo img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .jcard { opacity: 1; transform: none; transition: none; }
  .jcard__photo img { transition: none; }
  .jcard:hover .jcard__photo img { transform: none; }
}

.jcard {
  flex-shrink: 0;
  width: 282px;
  height: 461.625px;
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}
.jcard__head { display: flex; flex-direction: column; gap: 16px; }
.jcard__date {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;                    /* 丸と日付の隙間（4→8px） */
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
/* 日付前の丸：デザイン通りコーラル（常時） */
.jcard__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent);
  transition: background-color .4s ease;
}
.jcard__person { display: flex; flex-direction: column; gap: 8px; color: var(--color-ink); }
.jcard__role { margin: 0; font-family: var(--font-gothic); font-size: 14px; line-height: var(--lh-tight); }
.jcard__name {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  line-height: var(--lh-tight);
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.jcard__suffix { font-weight: 400; font-size: 12px; }

.jcard__photo { width: 100%; height: 139px; overflow: hidden; }
.jcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.jcard__text { display: flex; flex-direction: column; gap: 8px; color: var(--color-ink); }
.jcard__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-base);       /* 16px */
  line-height: 1.5;
}
.jcard__excerpt {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 1.75;
  text-align: justify;
}

/* =============================================================
   Section 8: News（全幅 / 内側1440 / 高さ671）背景=白
   ============================================================= */
.news {
  position: relative;
  width: 100%;
  background: var(--color-bg);
}
.news__inner {
  position: relative;
  width: var(--design-width);   /* 1440 */
  height: 671px;
  margin-inline: auto;
}
.news__inner > * { position: absolute; }

.news__shoulder {
  left: 120px;
  top: 119px;
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  white-space: nowrap;
}
.news__paren { font-size: var(--fs-md); }

/* お知らせ一覧  x222 y177 w994 / 6行・各行 上border */
.news__list { left: 222px; top: 177px; width: 994px; display: flex; flex-direction: column; }
.nrow {
  height: 53px;                /* Figma実寸：6行×53=318。累積ズレ防止 */
  display: flex;
  align-items: center;
  gap: 32px;                   /* タイトルの右端〜矢印の余白＝32px */
  padding: 0 32px;
  border-top: 1px solid var(--color-ink);
  text-decoration: none;
  color: var(--color-ink);
}
.nrow__main { display: flex; align-items: center; gap: 32px; flex: 1; min-width: 0; }
.nrow__date {
  display: flex;
  align-items: center;
  gap: 8px;                    /* 丸と日付の隙間（4→8px） */
  flex-shrink: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: var(--lh-tight);
}
/* News 先頭の丸ポチは撤去（静止グレーで意味が薄いため）。日付が行の起点。 */
.nrow__title {
  flex: 1;                     /* 余白を埋め、矢印の32px手前で… に省略 */
  min-width: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nrow__more {
  display: inline-flex;         /* main(flex:1)が伸びて矢印は右端へ。隙間は .nrow の gap=32px */
  align-items: center;
  flex-shrink: 0;
}
.nrow__arrow { width: 11px; height: 8px; display: block; }
/* News は「View More」テキストを撤去し → のみ（一覧をクリーン）。
   矢印は4種ボタンの縦ロールとは別物にする＝右向き → が「ゆっくり右に行って戻る」ピコン＋
   コーラル発色（他ボタンと連動させない）。main.js が .nrow__arrow を .na-arrow（マスク）に置換。 */
.na-arrow {
  display: block;
  width: 11px;
  height: 8px;
  background: var(--color-ink);
  -webkit-mask: url("../assets/arrow.svg") no-repeat center / 100% 100%;
          mask: url("../assets/arrow.svg") no-repeat center / 100% 100%;
  transition: background-color .4s ease;   /* 色変化はなめらかに */
}
.nrow:hover .na-arrow {
  background: var(--color-accent);          /* coral 発色 */
  animation: naNudge .8s ease;              /* ゆっくり右に行って戻るピコン */
}
@keyframes naNudge {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(5px); }    /* 右へ */
  68%  { transform: translateX(-1.5px); } /* 少し左へ戻りすぎ */
  100% { transform: translateX(0); }      /* 中央に着地 */
}
@media (prefers-reduced-motion: reduce) {
  .na-arrow { transition: none; }
  .nrow:hover .na-arrow { animation: none; }
}

/* =============================================================
   View More 等：下線ワイプ（scalvinimarmi.it の o-button--arrow 準拠）
   文字も矢印も動かさず、下線だけが左→右に引き直される。
   2本の擬似要素（::before=左origin / ::after=右origin）の scaleX を入れ替える。
   静止時は ::after がフル表示（右origin）、ホバーで ::after を右へ収縮＋
   ::before を左から伸長＝下線が一方向にスーッと描き直される。離すと逆再生。
   ============================================================= */
.products__viewmore::before, .products__viewmore::after,
.rcard__viewmore::before,   .rcard__viewmore::after,
.journal__viewmore::before, .journal__viewmore::after,
.about__link::before,       .about__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  will-change: transform;
  transition: transform 1s cubic-bezier(.23, 1, .32, 1);
}
/* 左下線：通常は畳んでおく（左origin） */
.products__viewmore::before, .rcard__viewmore::before,
.journal__viewmore::before, .about__link::before {
  transform: scaleX(0);
  transform-origin: 0 0;
  transition-delay: 0s;
}
/* 右下線：通常はフル表示（右origin）＝静止時に見える下線 */
.products__viewmore::after, .rcard__viewmore::after,
.journal__viewmore::after, .about__link::after {
  transform: scaleX(1);
  transform-origin: 100% 0;
  transition-delay: 50ms;
}
/* ホバー：左を伸ばし（少し遅らせ）／右を畳む（即時）＝左→右に引き直し */
.products__viewmore:hover::before, .rcard__viewmore:hover::before,
.journal__viewmore:hover::before, .about__link:hover::before {
  transform: scaleX(1);
  transition-delay: 50ms;
}
.products__viewmore:hover::after, .rcard__viewmore:hover::after,
.journal__viewmore:hover::after, .about__link:hover::after {
  transform: scaleX(0);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .products__viewmore::before, .products__viewmore::after,
  .rcard__viewmore::before,   .rcard__viewmore::after,
  .journal__viewmore::before, .journal__viewmore::after,
  .about__link::before,       .about__link::after {
    transition: none;
  }
}

/* 4種ボタンの矢印だけ ↗（斜め上）に。横向き → を -45deg 回転。
   （News の矢印は → のまま＝下の .na-arrow。reduce 時は <img> が ↗ になるが許容） */
.products__viewmore-arrow,
.rcard__viewmore-arrow,
.journal__viewmore-arrow,
.about__link-arrow {
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------
   4種ボタンの矢印ロール（Contact Us と同じ巻き上げ＋コーラル発色）
   arrow.svg を CSS mask にして ink↗ と coral↗ を縦2枚重ね。ユニット全体を
   -45deg 回転（↗）し、ホバーで内側を1枚ぶん上へロール＝下から coral がくるん。
   ------------------------------------------------------------- */
.vm-arrow {
  display: inline-block;
  width: 11px;
  height: 8px;
  overflow: hidden;               /* 1枚ぶんだけ見せる窓 */
  transform: rotate(-45deg);      /* ↗ */
  flex-shrink: 0;
}
.vm-arrow__roll {
  display: block;
  transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1);  /* Contact Us と同じ巻き */
}
.vm-arrow__ic {
  display: block;
  width: 11px;
  height: 8px;
  background: var(--color-ink);
  -webkit-mask: url("../assets/arrow.svg") no-repeat center / 100% 100%;
          mask: url("../assets/arrow.svg") no-repeat center / 100% 100%;
}
.vm-arrow__ic--in { background: var(--color-accent); }       /* 下から来る coral */
.products__viewmore:hover .vm-arrow__roll,
.rcard__viewmore:hover .vm-arrow__roll,
.journal__viewmore:hover .vm-arrow__roll,
.about__link:hover .vm-arrow__roll {
  transform: translateY(-8px);    /* 1枚ぶん上げて coral を見せる */
}
@media (prefers-reduced-motion: reduce) {
  .vm-arrow__roll { transition: none; }
}

/* About King Smith：タッチ端末（ホバー不可）では矢印の「ロール」(下からコーラル↗が巻き上がる＝PCホバーと同じ動き)を
   周期的にループ発動＝「動き」。JSが矢印を .vm-arrow に置換するので .about__link .vm-arrow__roll を対象に。
   PCはホバーのまま＝干渉なし。reduce時は停止。 */
@keyframes aboutLinkArrowRoll {
  0%, 55%, 100% { transform: translateY(0); }       /* ink↗ */
  72%, 85%      { transform: translateY(-8px); }     /* coral↗ が下から */
}
@media (hover: none) {
  .products__viewmore .vm-arrow__roll,
  .rcard__viewmore .vm-arrow__roll,
  .journal__viewmore .vm-arrow__roll,
  .about__link .vm-arrow__roll { animation: aboutLinkArrowRoll 2.8s cubic-bezier(.19, 1, .22, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .products__viewmore .vm-arrow__roll,
  .rcard__viewmore .vm-arrow__roll,
  .journal__viewmore .vm-arrow__roll,
  .about__link .vm-arrow__roll { animation: none; }
}

/* -------------------------------------------------------------
   SPタッチ：PCの hover 演出をタップ(:active)でも発火。touch端末のみ(@media hover:none)＝PC非干渉。
   iOS は空の touchstart リスナで :active が効く（main.js で付与）。
   ------------------------------------------------------------- */
@media (hover: none) {
  /* カルーセル矢印の押下色は .is-pressed(JS) で制御＝離すと戻る。 */
  /* 製品サムネ：押すと持ち上がる（PCホバーと同じ） */
  .plist__item:active .plist__thumb img { transform: translateY(-3px); }
  /* 4種ボタン：押すと矢印が下からコーラル↗に巻き上がり、下線を引き直す（PCホバーと同じ） */
  .products__viewmore:active .vm-arrow__roll,
  .rcard__viewmore:active .vm-arrow__roll,
  .journal__viewmore:active .vm-arrow__roll,
  .about__link:active .vm-arrow__roll { transform: translateY(-8px); }
  .products__viewmore:active::before, .rcard__viewmore:active::before,
  .journal__viewmore:active::before, .about__link:active::before { transform: scaleX(1); transition-delay: 50ms; }
  .products__viewmore:active::after, .rcard__viewmore:active::after,
  .journal__viewmore:active::after, .about__link:active::after { transform: scaleX(0); transition-delay: 0s; }
}

/* 下部ロゴ  x623 y624 194×22 */
.news__logo { left: 623px; top: 624px; width: 194px; height: 22px; }

/* =============================================================
   Section 9: フッター（全幅 / 高さ589）背景 #441313（ダークマルーン）
   ============================================================= */
.footer {
  position: relative;
  width: 100%;
  height: 589px;
  background: var(--color-ink);   /* #441313 */
  overflow: hidden;
}

/* ( Contact Us ) マーキー（上部・横スクロール） y24 h40 */
.footer__contact {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 3;                    /* .footer__inner より前面に（ホバー/クリックを受ける） */
  overflow: hidden;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  perspective: 700px;            /* ホバー回転を立体的に */
}
/* duration は main.js が幅に応じて設定（一定速度・スキマなし）
   reverse で左→右に流れる */
.footer__contact-track {
  display: flex;
  width: max-content;
  animation: contactMarquee 30s linear infinite;
  animation-direction: reverse;
}
.footer__contact-set { display: flex; }
.footer__contact-item {
  display: inline-flex;
  align-items: center;
  padding: 0 40px;
  font-family: var(--font-latin);
  font-size: var(--fs-xl);        /* 24px */
  line-height: var(--lh-tight);
  color: var(--color-accent);
  white-space: nowrap;
}
@keyframes contactMarquee { to { transform: translateX(-50%); } }

/* ホバーで「Contact Us」が下から上にせり上がる（daisheng風ロール）。括弧 ( ) は固定。
   テキストを2コピー縦積みし、枠で1行ぶんだけ見せ、ホバーで1行ぶん上へスライド。 */
.footer__contact-win {
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5;
  vertical-align: middle;
}
.footer__contact-inner {
  display: block;
  position: relative;
  line-height: 1.5;
  white-space: nowrap;
  will-change: transform;
}
.footer__contact-inner::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
/* main.js が is-rolling を付与/除去（ホバー中は回り続け、離れたら1周の切れ目で停止＝完走式） */
.footer__contact-inner.is-rolling {
  animation: contactLoopTop 1.45s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
@keyframes contactLoopTop {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .footer__contact-track { animation: none; }
  .footer__contact-inner { animation: none; }
}

/* 内側1440 */
.footer__inner {
  position: relative;
  width: var(--design-width);
  height: 589px;
  margin-inline: auto;
}
.footer__inner > * { position: absolute; }

/* 3カラムメニュー  x120 y148 / gap64 */
.footer__menu { left: 120px; top: 148px; display: flex; gap: 64px; color: #fff; }
.footer__col { display: flex; flex-direction: column; gap: 24px; }
.footer__heading {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-base);      /* 16px（括弧は18） */
  line-height: var(--lh-tight);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.footer__links { display: flex; flex-direction: column; gap: 14px; }
.footer__links a {
  font-size: 14px;
  line-height: var(--lh-tight);
  color: rgba(255, 255, 255, 0.55);   /* マルーン地に透けたローズ */
  text-decoration: none;
  transition: color .3s ease;
}
.footer__links a:hover { color: var(--color-accent); }   /* ホバーで coral */
.footer__links--en a { font-family: var(--font-latin); text-transform: uppercase; }
.footer__links--jp a { font-family: var(--font-mincho); }

/* 大きいコピー：歩くことは、はじまりになる  右端1320 / y452 / リュウミン46 白 */
.footer__catch {
  top: 452px;
  right: 120px;
  margin: 0;
  text-align: right;
  font-family: var(--font-mincho);
  font-size: 46px;
  letter-spacing: 4.6px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

/* コピーライト  x120 y563 */
.footer__copy {
  left: 120px;
  top: 563px;
  margin: 0;
  font-family: var(--font-latin);
  font-size: 10px;
  line-height: var(--lh-tight);
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
}

/* =============================================================
   サイトヘッダー：FVを抜けると上からふわっと降りてくる
   FV上では非表示。コンテンツ域で「Product / ロゴ中央 / Contact」を常駐。
   z-index は通常コンテンツより上・navmenu(90)より下（メニュー開で覆われる）。
   ============================================================= */
.sitehead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* ロゴを常にど真ん中に固定 */
  align-items: center;
  padding: 26px 48px;
  background: #ffffff;                    /* グローバルナビのエリア＝白帯。下のコンテンツはこの下に潜る（ロゴ/文字と干渉しない） */
  pointer-events: auto;                   /* 白帯がクリックを受け、背面コンテンツへ抜けない */
  /* 初期＝上に隠れて透明（FVでは出さない） */
  transform: translateY(-16px);
  opacity: 0;
  visibility: hidden;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s, visibility 0s linear .8s;
}
.sitehead a { pointer-events: auto; }
.sitehead__link {
  font-family: var(--font-latin);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: none;
  transition: color .3s;
}
.sitehead__link:hover { color: var(--color-accent); }
/* 右側に Product + Contact をまとめる（Product はコンタクトの80px左） */
.sitehead__nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 40px;                             /* Product↔Contact の間隔（80→40で締めた） */
}
.sitehead__logo {                        /* ヒーロー/メニューと同じ wordmark crop */
  grid-column: 2;                        /* 中央列。左列は空でロゴはど真ん中のまま */
  justify-self: center;
  display: block;
  width: 150px;
  height: 17px;
  overflow: hidden;
  position: relative;
}
.sitehead__logo img {
  position: absolute;
  width: 135.15%;
  height: 333.25%;
  left: -17.58%;
  top: -106.1%;
  max-width: none;
}
/* FVを抜けたら、ふわっと降りてくる（主役の動き） */
.sitehead.is-in {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s;
}
@media (prefers-reduced-motion: reduce) {
  .sitehead { transition: opacity .3s; transform: none; }
}

/* =============================================================
   SP（〜480px）ファーストビュー v3 ＝ Figma SP_375px 設計に準拠
   構成：Beyond / The Walk（上・主役）→ ランナー（中央）→
         歩く、その先へ → 小ロゴ → Scroll Down（下にまとめ）。ハンバーガー左上。
   ============================================================= */
@media (max-width: 480px) {
  /* ★ SP FV＝375×667の設計を「画面幅にフィット」させる（ユーザー指定）。
     高さ=幅×667/375 にし、縦%は.hero高さ基準なので幅に連動。
     フォント・固定pxサイズは vw 化（375基準: 1px = 100/375 ≒ 0.2667vw）。
     これでどの端末幅でも設計と完全一致（中央寄せのズレ/字幅差が出ない）。 */
  .hero { height: calc(100vw * 667 / 375); min-height: 0; }

  /* ハンバーガー左上（設計24,24・38×19）。base の gap:10px×2=20px が19px枠を超えてバーが0pxに潰れていた → gap:8px に詰めて1pxバーを表示 */
  /* ヘッダー：背景を薄く（半透明＋ぼかし）。ロゴ・ハンバーガーを一回り小さく。 */
  .sitehead { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 18px 24px; }
  .sitehead__logo { width: 115px; height: 13px; }
  /* ハンバーガー：中心線をロゴ(中央 ≈24.5px)に合わせる＝top17(中心 17+7.5=24.5) */
  .hamburger { top: 17px; left: 20px; width: 30px; height: 15px; transform: none; gap: 6px; }
  .hamburger__bar { flex-shrink: 0; }
  /* ×モーフ：SPサイズ(高さ15・中心7.5)に合わせ translateY を ±7 に（±12だと中心を超えて歪む） */
  body.nav-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* タッチ端末ではホバーのコーラル塗り(::after)が指を離しても残る → 無効化。
     ×(メニュー開)のコーラルは body.nav-open の背景で出るのでそちらは維持。閉じれば黒に戻る。 */
  .hamburger__bar::after { display: none; }
  /* ハンバーガーメニュー：左寄せ（左パディング120→40px）＋文字を一回り小さく */
  .navmenu__panel { width: 84vw; max-width: 320px; padding: 60px 24px 20px 40px; gap: 36px; }
  .navmenu__logo { width: 110px; height: 12.5px; }
  .navmenu .footer__menu { gap: 32px; }
  .navmenu .footer__col { gap: 18px; }
  .navmenu .footer__heading { font-size: 13px; }
  .navmenu .footer__links a { font-size: 12px; }
  .navmenu__copy { margin-left: -16px; }
  /* SPはハンバーガーメニューに集約 → グローバルナビのProduct/Contactは非表示（ロゴは中央のまま） */
  .sitehead__nav { display: none; }

  .hero__inner { width: 100%; height: 100%; }

  /* 英語タイトル横1行。位置=中心%（幅連動）、font-size=vw（実数 Beyond/Walk40.919px→10.91vw / The13.64px→3.64vw）。 */
  .hero__beyond { top: 14.4%; left: 33.2%; right: auto; transform: translateX(-50%); font-size: 10.91vw; }
  .hero__the    { top: 15.2%; left: 56%;   transform: translateX(-50%); font-size: 3.64vw; }
  /* Walk：設計の " Walk"(先頭スペース付き)は見える文字が右に寄る。スペース無しの当方は左に食い込むため中心を右へ補正（71.4%→72.6%）。 */
  .hero__walk   { top: 14.4%; left: 72.6%; transform: translateX(-50%); font-size: 10.91vw; }
  /* Theの下線：設計は約0.86px（髪の毛線）。base 2px は太すぎるので SP では 1px に細く。 */
  .hero__the::before, .hero__the::after, .hero__the { border-bottom-width: 1px; }

  /* ランナー 450px角(120vw)・中心 x50.7%/y52.2%（%は幅連動の.hero高さ基準） */
  .hero__media  { top: 52.2%; left: 50.7%; transform: translate(-50%, -50%); width: 120vw; height: 120vw; }

  /* 歩く、その先へ（明朝）24px→6.4vw、字間12px→3.2vw。
     設計のグリフは y559-579。base line-height だと約13px下に出るため bottom を上げて合わせる。 */
  .hero__title  { top: auto; bottom: 12.8%; font-size: 6.4vw; letter-spacing: 3.2vw; text-indent: 3.2vw; }

  /* ロゴ小（127×14.5）→ vw */
  .hero__logo   { top: auto; bottom: 6.3%; width: 33.87vw; height: 3.87vw; }

  /* Scroll Down 中央下。設計実数(node177:2223): 文字=12px→3.2vw、( )=14px→3.73vw。
     ( ) と文字の間は設計のスペース約3pxに合わせ gap を 6px→0.8vw(≒3px) に詰める（base 6px だと幅が広く＝大きく見える）。 */
  .hero__scroll { top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: 2.4%; font-size: 3.2vw; gap: 0.8vw; }
  .hero__scroll-paren { font-size: 3.73vw; }
}

/* =============================================================
   SP（〜480px）About（2_コンテンツ）＝Figma SP_375px 設計準拠
   全幅動画(awardロゴ重ね)→( About )→タイトル/本文→キャッチ→リンク。女性写真は非表示。
   ============================================================= */
@media (max-width: 480px) {
  /* About(2_コンテンツ)＝Figma SP 375×1255 をスケールフィット(vw)で配置。背景#efefef。
     1px=100/375≒0.2667vw。縦は.about高さ(=幅連動)基準の絶対配置。 */
  .about { height: calc(100vw * 1279 / 375); min-height: 0; background: #efefef; position: relative; }   /* +24px：見出し以下を64pxリズムに揃えたぶん高さ 1255→1279 */
  .about__inner { position: absolute; inset: 0; width: 100%; height: 100%; display: block; padding: 0; transform: none; }
  .about__inner > * { position: absolute; }

  /* ランニング動画＝全幅・上部400px（cover・設計のクロップ位置に合わせ上寄り） */
  .about__running { top: 0; left: 0; width: 100%; height: calc(100vw * 400 / 375); margin: 0; overflow: hidden; aspect-ratio: auto; }
  .about__running img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  /* GOOD DESIGNロゴ＝動画左上。設計は top32pxだが、スクロール時に降りてくるグローバルナビ(高さ69px)に
     上部が隠れるため、ナビ高+余白ぶん下げて回避（32px→90px=24vw）。left/サイズは設計通り。 */
  .about__gooddesign { top: 24vw; left: 8.53vw; width: 25.6vw; height: 26.93vw; z-index: 2; }

  /* ( About ) y440 中央（( )=18px / About=16px） */
  .about__shoulder { top: 123.73vw; left: 0; width: 100%; text-align: center; margin: 0; font-size: 4.27vw; }   /* +6.4vw：( About )の上を 40→64px */
  .about__paren { font-size: 4.8vw; }

  /* タイトル＋本文 y490 中央。Not Just Walking.=32px / 本文=12px秀英ゴ字間1.2・行1.75・gap40 */
  .about__lead { top: 137.07vw; left: 0; width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10.67vw; text-align: center; }
  .about__title { font-size: 8.53vw; margin: 0; }
  .about__body { font-family: var(--font-gothic); font-size: 3.2vw; letter-spacing: 0.32vw; line-height: 1.75; }
  .about__body p { margin: 0; }

  /* 女性写真 y844 中央 130×187。デザイン通り＝反転(scaleX -1)＋fill。base と同一。 */
  .about__woman { display: block; top: 231.47vw; left: 32.53vw; width: 34.67vw; height: 49.87vw; overflow: hidden; }
  .about__woman img { width: 100%; height: 100%; object-fit: fill; transform: scaleX(-1); }

  /* 「歩くことは、はじまりになる」設計と同じ top1120＋translateY(-50%) で中心1120に。reveal は opacity のみなので transform と両立。 */
  .about__catch { top: calc(100vw * 1144 / 375); left: 0; width: 100%; margin: 0; text-align: center; transform: translateY(-50%);
    font-family: var(--font-mincho); color: var(--color-accent); font-size: 8.53vw; letter-spacing: 0.85vw; line-height: 1.5; white-space: normal; }   /* 228:3721：リュウミン32px / tracking3.2px / コーラル / 中央 / 2行 */
  /* 改行はSPのみ（PCはHTMLから<br>を外し1行のまま＝リンクと重ならない）。1行目だけ少し右へ（≈0.13em・フォント連動）。 */
  /* 新デザイン(228:3721)：2行とも中央付近で互いに揃える(視覚中心~194)。
     行1末尾「、」はインクが左寄りで視覚中心が左へズレるため、行1を多めに右寄せして行2と揃える
     (デザインは行1を box+pl22 で補正)。実測でデザイン 行1中心193.5/行2中心195.0 に合わせた値。 */
  .about__catch-l1, .about__catch-l2 { display: block; position: relative; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
  .about__catch-l1 { left: 0.53em; }
  .about__catch-l2 { left: 0.26em; }
  /* 登場アニメ：2行が下から少し上がって出る（l2を遅らせ左→右でなく上→下のスタッガー）。
     element の opacity は data-reveal="up"(JSが画面入りで is-revealed 付与)、行の上がりはこの transform で担当。 */
  .about__catch:not(.is-revealed) .about__catch-l1,
  .about__catch:not(.is-revealed) .about__catch-l2 { transform: translateY(0.6em); }
  .about__catch.is-revealed .about__catch-l2 { transition-delay: .14s; }
  @media (prefers-reduced-motion: reduce) {
    .about__catch-l1, .about__catch-l2 { transform: none; transition: none; }
  }

  /* About King Smith → リンク y1195 left118（16px＋下線） */
  .about__link { top: 325.07vw; left: 31.47vw; width: auto; font-size: 4.27vw; }
}

/* =============================================================
   SP（〜480px）動画説明欄（3_）＝Figma SP 375×350。
   横長動画(1828×443)を左-666/上-70に置き、375×350の枠でクロップ（女性がランナーを畳む構図）。
   ============================================================= */
@media (max-width: 480px) {
  .videoband { height: calc(100vw * 350 / 375); }
  /* SPもPC同様の「中央に縮んだ枠→全幅へビヨーンと展開」リビール。
     SPはimgが枠より大きい絶対配置クロップなので、clipはimgではなく枠＝.videoband__inner に当てる
     （imgに当てると水平方向だけ先に展開してタイミングが崩れる）。
     .videoband の地色#efefefが展開前マージンに見える＝PCと同じグレー余白。 */
  .videoband__inner {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    clip-path: inset(16% 18%);
    transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1);
  }
  .videoband.is-revealed .videoband__inner { clip-path: inset(0%); }
  @media (prefers-reduced-motion: reduce) {
    .videoband__inner { clip-path: inset(0%); transition: none; }
  }
  /* 動画素材トリミング(node 177:2242)：画像1444.244×350 を left-474.12/top0 に置き object-cover。
     絶対配置の基準は .videoband__inner（position:relative）。clipは枠側なのでimgは clip-path:none のまま。 */
  .videoband img {
    position: absolute; max-width: none; display: block;
    width: calc(100vw * 1444.244 / 375); height: calc(100vw * 350 / 375);
    left: calc(100vw * -474.122 / 375); top: 0;
    object-fit: cover; clip-path: none;
  }
}

/* =============================================================
   SP（〜480px）セール枠（4_）＝node 177:2244：375×50。
   PC(100px)を vw で約半分スケール。緑帯#74d188・横マーキーは共通(JSが幅連動)。
   1ユニット：時計26 / Time Sale20 / テキスト10 / 15%offバッジ12。
   gap: icon→title 8 / title→text 12(=8+text margin4) / text→badge 8 / ユニット間 20。
   ============================================================= */
@media (max-width: 480px) {
  .sale { height: calc(100vw * 50 / 375); }
  .sale__unit { gap: 2.13vw; margin-right: 5.33vw; }
  .sale__clock { width: 6.93vw; height: 6.93vw; }
  .sale__title { font-size: 5.33vw; }
  .sale__text { margin-left: 1.07vw; font-size: 2.67vw; }
  .sale__badge { padding: 1.07vw 3.2vw; font-size: 3.2vw; letter-spacing: -0.096vw; }
}

/* =============================================================
   SP（〜480px）プロダクト紹介（5_）＝node 177:2280 上部カルーセル。
   PCは2カラム絶対配置。SPは縦1カラムのカルーセル。
   入れ子(main/detail/…)を display:contents で平坦化し、order で
   ( Products )→名前→サブ→星→バッジ→写真(+左右矢印)→説明→View More→製品リスト に並べ替え。
   位置・サイズは 375基準 vw（1px=0.26667vw）。
   未デザインの FS Fit/携帯/Award は SP では一旦非表示（デザイン待ち）。
   ============================================================= */
@media (max-width: 480px) {
  .products { height: auto; margin-top: 6.4vw; }   /* リズム統一：( Products )見出しの上を 40→64px に（セクション上に24px） */
  .products__inner {
    position: relative; width: 100%; height: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 0; padding: 0; margin: 0; box-sizing: border-box; transform: none;
    min-height: calc(100vw * 2009 / 375);   /* 確定セクション高さ（FitApp+26/Award+36 のぶん 1973→2009） */
  }
  /* 直下の子の絶対配置を解除 */
  .products__inner > * { position: static; left: auto; top: auto; right: auto; transform: none; padding-top: 0; }
  /* PCの入れ子を平坦化＝カルーセル各要素を inner の flex 子に */
  .products__main, .products__detail, .products__detail-a,
  .products__detail-b, .products__detail-c, .products__head { display: contents; }

  /* 並び順とサイズ（カルーセル） */
  .products__shoulder { order: 1; margin: 10.67vw 0 0; font-size: 4.27vw; }  /* ( Products ) 文字16px */
  .products__paren { font-size: 4.8vw; }                                      /* 括弧 18px */
  .products__name { order: 2; margin: 8.53vw 0 0; font-size: 6.4vw; letter-spacing: 0.32vw; line-height: 1; text-align: center; }
  .products__sub  { order: 3; margin: 3.2vw 0 0; font-size: 4.27vw; letter-spacing: -0.128vw; line-height: 1; text-align: center; }
  .products__stars { order: 4; margin: 4.27vw 0 0; width: 25.6vw; height: 4.27vw; }
  .products__tags { order: 5; margin: 3.2vw 0 0; gap: 1.6vw; justify-content: center; flex-wrap: nowrap; }
  .products__tag  { padding: 1.33vw 3.2vw; font-size: 2.67vw; letter-spacing: -0.08vw; }
  .products__photo { order: 6; margin: 0; width: 53.07vw; height: 53.07vw; }
  .products__desc { order: 7; width: 91.47vw; margin: 0; font-family: var(--font-gothic); font-size: 0; letter-spacing: -0.096vw; text-align: justify; }
  .products__desc p { display: inline; white-space: normal; font-size: 3.2vw; line-height: 2; }
  .products__viewmore { order: 8; align-self: center; margin: 6.4vw 0 0; font-size: 4.27vw; gap: 2.13vw; padding-bottom: 1.33vw; }
  .products__viewmore-arrow { width: 2.93vw; height: 2.13vw; }
  .plist { order: 9; width: 83.73vw; padding-top: 0; margin: 10.67vw 0 0; flex-wrap: nowrap; gap: 4.27vw; justify-content: center; }
  .plist__item { width: 13.33vw; gap: 3.07vw; }
  .plist__item:nth-child(2) { --pi: 1; }
  .plist__item:nth-child(3) { --pi: 2; }
  .plist__item:nth-child(4) { --pi: 3; }
  .plist__item:nth-child(5) { --pi: 4; }
  .plist__thumb { width: 11.4vw; height: 8.87vw; }
  /* 下線：初期は黒線・緑バーとも左へ畳む(scaleX0)。.plist が画面に入る(.is-revealed)と
     黒線(::before)→緑バー(::after)の順に左から引かれて止まる。item毎に --pi で左→右へずらす。 */
  .plist__line  { width: 13.33vw; height: 0.53vw; }
  .plist__line::before { transform-origin: left center; transform: translateY(-50%) scaleX(0); }
  /* 黒線は登場アニメで左から引かれる。緑バー(::after)は .is-active へ transition で追随。 */
  .plist__line::after { left: 1.33vw; width: 10.67vw; height: 0.53vw; transform-origin: left center; transform: scaleX(0); transition: transform .4s cubic-bezier(.16,1,.3,1); }
  .plist.is-revealed .plist__line::before { animation: plistLineDraw .42s cubic-bezier(.16,1,.3,1) calc(var(--pi,0) * .09s) forwards; }
  .plist__name  { font-size: 2.67vw; letter-spacing: -0.08vw; }

  /* 左右ナビ矢印：写真の左右・縦中央付近に絶対配置（写真 y206-405 の y321 に合わせ top85.6vw） */
  .products__arrow { display: block; position: absolute; top: 85.6vw; width: 4.27vw; height: 8.53vw; }
  .products__arrow svg { width: 4.27vw; height: 8.53vw; }
  .products__arrow--left  { left: 4.27vw; right: auto; }
  .products__arrow--right { right: 4.27vw; left: auto; }

  /* === FS Fit App ブロック（node 177:2300 テキスト中央＋写真 177:2305） === */
  .fsfit { display: contents; }
  .fsfit__text { position: absolute; top: 180.8vw; left: 4.27vw; width: 91.47vw; margin: 0;   /* +6.93vw：FitApp見出しの上を 38→64px */
    display: flex; flex-direction: column; align-items: center; gap: 3.2vw; text-align: center; }
  .fsfit__head { gap: 8.53vw; padding-top: 10.67vw; align-items: center; white-space: nowrap; }
  .fsfit__title { font-family: var(--font-latin); font-size: 6.4vw; color: var(--color-accent); }
  .fsfit__sub { font-family: var(--font-mincho); font-size: 4.27vw; letter-spacing: -0.128vw; color: var(--color-ink); }
  /* 本文＝連続1段落・両端揃え(text-justify)。base幅354を343に上書き、3文を inline で連結。 */
  .fsfit__desc { font-family: var(--font-gothic); width: 91.47vw; text-align: justify; font-size: 0; letter-spacing: -0.096vw; }
  .fsfit__desc p { display: inline; font-size: 3.2vw; line-height: 2; white-space: normal; }
  .fsfit__photo { display: block; position: absolute; top: 239.73vw; left: 38.4vw; width: 59.47vw; height: 59.47vw; }

  /* === 携帯ブロック（スマホモック 177:2306 左食い込み＋5機能リスト 177:2308 右） === */
  /* スマホは透過PNG(phone-mock.png)を背景で配置＝デザインのクロップ(w162.88%/left-31.62%/top-8.44%)を再現。
     PCは <img src=fsfit-phone.png> のままなので img は SP で非表示にして干渉回避。 */
  .phone__photo { display: block; position: absolute; top: 265.6vw; left: -9.6vw; width: 69.6vw; height: 96.53vw;
    background-image: url(../assets/phone-mock.png); background-repeat: no-repeat;
    background-size: 113.36vw auto; background-position: -22.01vw -8.15vw; }
  .phone__photo img { display: none; }
  .phone__features { display: flex; flex-direction: column; position: absolute; top: 305.6vw; left: 54.67vw; width: 43.2vw; gap: 2.13vw; }
  .phone__feat { gap: 1.07vw; }
  .phone__label { padding: 0.53vw 2.13vw; font-size: 1.87vw; letter-spacing: -0.056vw; }
  .phone__featdesc { padding-inline: 0.53vw; font-size: 2.4vw; letter-spacing: -0.072vw; white-space: nowrap; }

  /* === Award ブロック（node 228:3869 テキスト y1332 ＋ 228:3875 ロゴ3つ y1527） === */
  .award { display: block; position: absolute; top: 364.8vw; left: 4.27vw; width: 91.47vw; padding: 0; margin: 0; }   /* +9.6vw：Award見出しの上を 54→64px */
  .award__title { display: block; margin: 10.67vw 0 0; padding: 0; font-family: var(--font-latin); font-size: 6.4vw; color: var(--color-accent); text-align: center; line-height: 1; white-space: normal; }
  .award__desc { margin: 3.2vw 0 0; font-family: var(--font-gothic); font-size: 0; text-align: justify; letter-spacing: -0.16vw; }
  .award__desc p { display: inline; font-size: 3.2vw; line-height: 2; white-space: normal; }
  /* 受賞ロゴ3つ：完成画像(ロゴ+線+キャプション)を中央・縦積み。高さでデザイン位置に合わせる。 */
  .award__logo { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: auto; }
  .award__logo--gd  { top: 416.8vw;  height: 26.34vw; }   /* +9.6vw */
  .award__logo--if  { top: 453.87vw; height: 27.41vw; }   /* +9.6vw */
  .award__logo--red { top: 492vw;    height: 33.27vw; }   /* +9.6vw */

  /* 接続線は SP デザインに無いので非表示 */
  .phone__lines { display: none; }
}

/* =============================================================
   SP（〜480px）残4セクション：ランキング/Journal/News/フッター
   各 __inner を縦フロー化（絶対配置解除）、画像全幅、nowrap解除、3カラム→縦。
   ============================================================= */
@media (max-width: 480px) {
  /* --- ランキング(6_) node 177:2390：順位アイコン→名前→タグライン→バッジ→写真→View More 中央縦積み --- */
  .ranking { height: auto; }
  .ranking__inner {
    position: relative; width: 100%; height: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 0; padding: 0 0 9.6vw; box-sizing: border-box;
  }
  .ranking__inner > * { position: static; left: auto; top: auto; transform: none; }
  .ranking__title { order: -1; margin: 10.67vw 0 2.67vw; font-size: 6.4vw; }   /* Ranking コーラル24px中央 */
  .rcard { width: 100%; max-width: none; flex-direction: column; align-items: center; gap: 0; margin: 0; }
  /* 入れ子(text/body/lead)を平坦化＝各要素を rcard の flex 子に */
  .rcard__text, .rcard__body, .rcard__lead { display: contents; }
  .rcard__badge { position: static; top: auto; left: auto; order: 1; margin: 12vw 0 0; width: 5.33vw; height: 5.33vw;
    font-family: var(--font-latin); font-size: 3.2vw; line-height: 5.33vw; }   /* 数字の上を開ける 32→45px */
  .rcard__name { order: 2; margin: 3.2vw 0 0; font-size: 6.4vw; letter-spacing: 0.32vw; text-align: center; }
  .rcard__tagline { order: 3; margin: 3.2vw 0 0; font-family: var(--font-mincho); font-size: 4.27vw; letter-spacing: -0.128vw; color: var(--color-accent); text-align: center; white-space: nowrap; }
  .rcard__tags { order: 4; margin: 3.2vw 0 0; gap: 1.6vw; justify-content: center; flex-wrap: nowrap; }   /* コンパクト 16→12px */
  .rcard__tag { padding: 1.33vw 3.2vw; font-size: 2.67vw; letter-spacing: -0.08vw; }
  .rcard__photo { order: 5; margin: 4.27vw 0 0; width: 53.07vw; height: 30.4vw; }   /* コンパクト 写真 133→114px */
  .rcard__photo img { object-fit: cover; }
  .rcard__viewmore { order: 6; align-self: center; margin: 4.8vw 0 0; font-size: 4.27vw; gap: 2.13vw; padding-bottom: 1.33vw; }   /* コンパクト 24→18px */
  .rcard__viewmore-arrow { width: 2.93vw; height: 2.13vw; }

  /* --- Journal(6_) node 177:2451：ヘッダー(アイコン左+タイトル)＋説明＋2カード横カルーセル(peek)＋下に View More中央&左右矢印。既存カルーセルJS(ドラッグ/矢印)で動く --- */
  .journal { height: auto; }
  .journal__inner { position: relative; width: 100%; height: calc(100vw * 727 / 375); margin: 0; padding: 0; box-sizing: border-box; }   /* +36px：本文/カードを下げて余白を足したぶん 691→727 */
  .journal__inner > * { position: absolute; left: auto; top: auto; transform: none; }
  .journal__icon { display: block; left: 13.87vw; top: 19.36vw; width: 13.87vw; height: 13.55vw; }  /* 177:2463 x52 y72.6 52×50.8 */
  .journal__title { left: 32vw; top: 19.2vw; gap: 3.2vw; }
  .journal__title-en { font-size: 6.4vw; letter-spacing: 0; }
  .journal__title-sub { font-size: 4.27vw; letter-spacing: -0.128vw; }
  .journal__lead { display: contents; }
  .journal__desc { position: absolute; left: 4.27vw; top: 41.6vw; width: 91.47vw; margin: 0; font-family: var(--font-gothic); font-size: 0; text-align: justify; letter-spacing: -0.096vw; }   /* +5.33vw：タイトル→本文 12→32px */
  .journal__desc p { display: inline; font-size: 3.2vw; line-height: 2; white-space: normal; }
  .journal__viewport { display: block; left: 4.27vw; top: 70.93vw; width: 95.73vw; height: 89.07vw; overflow: hidden; }   /* +9.6vw：本文→カード 22→38px */
  .journal__cards { position: relative; left: 0; margin: 0; padding: 0; flex-direction: row; gap: 4.27vw; width: max-content; }  /* padding:0 で PCホバー用 padding-top:20px のリークを打ち消し＝カードを設計 y230 に戻す（累積20px下ズレの原因） */
  /* 登場アニメ（SP）：カルーセルの横移動は journal__cards(track) の translateX が担当。
     カード自身は「下から少し上がってフェード」＝track の横軸とは別軸なので干渉しない。
     基底の transition(cubic-bezier(.16,1,.3,1)) と --ji(0,1,2…) を流用し、左→右に時間差で出す。
     is-entered は main.js が画面入り(top<85vh)で付与。reduced-motion は下のガードで無効化。
     内容が高さを超える分は overflow:hidden で省略（設計通り）＝写真は flex で潰さない。 */
  /* パディングは四方24px（設計 p-[24px]）。固定高さ+押し下げpxだとフォント差で上下余白がズレるため、
     高さauto＝下padding24pxを「内容の実下端」から測る方式に変更。本文の最終行ぶら下がり行間は
     .jcard__excerpt の負margin(em相対)で除去するので、下の見た目余白＝上(日付ドット)＝24pxが常に一致。
     gap4.96vw(18.6px×2)で総高さ≈333px（設計334に一致）。 */
  .jcard { width: 53.07vw !important; height: auto; padding: 6.4vw; gap: 4.96vw; box-sizing: border-box; overflow: hidden; transform: translateY(5.33vw); }  /* 登場前：20px下（opacity:0は基底） */
  .journal__cards.is-entered .jcard { transform: translateY(0); }  /* 登場後：所定位置へ（opacity:1は基底） */
  @media (prefers-reduced-motion: reduce) { .jcard { transform: none; opacity: 1; } }  /* 動き抑制時は即表示 */
  .jcard__head { gap: 3.2vw; flex-shrink: 0; }
  .jcard__photo { flex-shrink: 0; }
  .jcard__date { font-size: 2.67vw; gap: 1.07vw; }
  .jcard__dot { width: 2.67vw; height: 2.67vw; }
  .jcard__person { gap: 1.6vw; }
  .jcard__role { font-size: 2.67vw; }
  .jcard__name { font-size: 3.47vw; }
  .jcard__suffix { font-size: 2.13vw; }
  .jcard__photo { height: 22.77vw; }   /* 写真 85.4px：設計実測 写真帯 y94→179（177:2459 PNGデコード実測）に正確に合わせる */
  .jcard__text { gap: 2.13vw; }
  /* 代替フォントは設計フォント(秀英/リュウミン)より字幅が広く、本文が5行に折り返してカード下端を食い潰す
     → タイトル2行・本文4行でクランプ(…省略)。字幅に関係なく行数固定＝下パディング(約20px)が常に残り、設計の4行+「…」に一致 */
  /* 字間：設計フォント(秀英角ゴシック銀/リュウミン)は字幅が詰まった書体。Web未埋め込みでフォールバックが広い分、
     負の字間で密度を設計に合わせる。本文は -0.06em で約60字が4行に収まり「…動きだす10分...」まで表示＝設計の折り返しに一致 */
  .jcard__title {
    font-size: 3.2vw; line-height: 1.5; letter-spacing: -0.04em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .jcard__excerpt {
    font-size: 2.67vw; line-height: 1.75; letter-spacing: -0.06em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
    /* 最終行の下にぶら下がる行間(line-height1.75の半leading≈0.4em)を除去＝文字の実下端を箱の下端に合わせる。
       高さautoと併せ、下padding24pxが文字基準になり上(日付)と必ず一致する。 */
    margin-bottom: -0.4em;
  }
  .journal__viewmore { position: absolute; display: inline-flex; left: 50%; transform: translateX(-50%); top: 169.33vw; font-size: 4.27vw; gap: 2.13vw; padding-bottom: 1.33vw; }   /* +9.6vw：カード下げに連動 */
  .journal__viewmore-arrow { width: 2.93vw; height: 2.13vw; }
  /* 矢印 177:2473/2474：左端 x16・右端 x367（右から8px）。縦は View More と同じ高さに揃える
     （設計レンダリング実測で矢印中心≒View More中心 y608。metadata の y617 は実描画とズレるので render を正とする）。
     ボタン padding1.6vw(6px)ぶん外へ寄せて字形を実座標に合わせる */
  .journal__nav { display: flex; justify-content: space-between; align-items: center; left: 2.67vw; right: 1.6vw; width: auto; top: 168vw; opacity: 1; transform: none; }   /* +9.6vw：カード下げに連動 */
  .journal__nav button { padding: 1.6vw; }
  .journal__nav svg { width: 2.13vw; height: 4.27vw; }

  /* ===== News SP（node 177:2475 ニュースユニット / 行 177:2479） =====
     フレーム x16(左右16余白) / 各行 66px・上ボーダー1px(#441313)・padding px32 py16。
     行内＝日付(上)+タイトル(下) を縦積み(gap4) ＋ 右に → を縦中央。日付/タイトルとも 12px 秀英角ゴシック銀L。
     最下部に WalkingPad ロゴ（中央・148×17）。 */
  .news { height: auto; }
  .news__inner {
    position: relative; width: 100%; height: auto;
    display: flex; flex-direction: column;
    padding: 14.93vw 4.27vw 4.27vw; box-sizing: border-box;   /* 上56 / 左右16(フレーム余白) / 下16（ロゴ下端から16px） */
  }
  .news__inner > * { position: static; left: auto; top: auto; transform: none; }
  .news__shoulder { padding-left: 0; text-align: center; margin-bottom: 8.53vw; font-size: 4.27vw; }   /* ( News ) 16px・中央寄せ・下32px */
  .news__paren { font-size: 4.8vw; }                                                    /* 括弧 18px */
  .news__list { width: 100%; }
  .nrow {
    height: auto; min-height: 17.6vw;           /* 66px（16+34+16）＝設計行高。上ボーダーは基底 */
    padding: 4.27vw 8.53vw; gap: 4.27vw;        /* py16 / px32（テキスト左端＝16+32=48） */
  }
  .nrow__main { flex-direction: column; align-items: flex-start; gap: 1.07vw; }  /* 日付→タイトルを縦積み gap4 */
  .nrow__date { font-size: 3.2vw; }             /* 12px */
  .nrow__title { flex: none; width: 100%; font-size: 3.2vw; line-height: 1.5; }  /* 12px lh1.5（1行・はみ出しは…） */
  .nrow__arrow, .na-arrow { width: 2.93vw; height: 2.13vw; }   /* 矢印 11×8 */
  /* 最下部 WalkingPad ロゴ（中央・148×17）＝設計177-2475で追加（275:4280）。SP表示。 */
  .news__logo { display: block; width: 39.47vw; height: auto; margin: 18.93vw auto 0; }

  /* --- フッター：メニュー3カラム→縦、キャッチ/コピー縦積み --- */
  /* ===== Footer SP：メニューをハンバーガー(navmenu)と同じサイズ感に（見出し13px/リンク12px/詰めた余白）。
     コンタクトUsマーキーを通常フロー化してメニューと干渉させず、上→マーキー→メニュー→キャッチ→©で整える。 ===== */
  .footer { height: auto; }
  /* Contact Us マーキー：SPは絶対配置をやめ最上部に通常フロー（全幅スクロールは維持） */
  .footer__contact { position: static; height: auto; padding: 36px 0 0; }
  .footer__contact-item { font-size: 22px; padding: 0 28px; }   /* SPは少し詰める */
  /* SPはホバーが無いので「Contact Us」が周期的に下から上へ くるん と回り続ける（完走式 easeOut＝回って一拍止まる） */
  .footer__contact-inner { animation: contactLoopTop 2.4s cubic-bezier(.19, 1, .22, 1) infinite; }
  @media (prefers-reduced-motion: reduce) { .footer__contact-inner { animation: none; } }
  .footer__inner {
    position: relative; width: 100%; height: auto;
    display: flex; flex-direction: column; gap: 44px;
    padding: 44px 24px 16px; box-sizing: border-box;   /* 下16px＝コピーライトを下から16pxに（PC同様） */
  }
  .footer__inner > * { position: static; left: auto; top: auto; transform: none; }
  /* メニュー＝ハンバーガーのサイズ感（13/12px・section gap32・col gap18・link gap14） */
  .footer__menu { flex-direction: column; gap: 32px; }
  .footer__col { gap: 18px; }
  .footer__heading { font-size: 13px; }
  .footer__links { gap: 14px; }
  .footer__links a { font-size: 12px; }
  .footer__catch { font-size: 32px; line-height: 1.5; white-space: normal; text-align: left; }   /* ブランドキャッチ 32px */
  .footer__catch-l1, .footer__catch-l2 { display: block; }   /* SPは「歩くことは、」「はじまりになる」で綺麗に2行（PCはインライン＝1行のまま） */
  .footer__copy { font-size: 10px; }
}

/* 製品リスト下線アニメの reduced-motion フォールバック（SP）：動きを無効化し初期から表示。
   SP @media より後に置いて scaleX(0) を上書きする。 */
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .plist.is-revealed .plist__line::before,
  .plist.is-revealed .plist__line::after { animation: none; }
  .plist__line::before { transform: translateY(-50%) scaleX(1); }
  .plist__item.is-active .plist__line::after { transform: scaleX(1); }
}