@charset "UTF-8";

/* ==========================================================================
   Base
   - デザイン幅：SP 375 / PC 1920（768px で切替）
   - --u = デザイン上の 1px。.u204l の幅（cqw）に比例して拡縮する。
     100vw だとスクロールバー分ずれるため、コンテナ幅を基準にしている
   ========================================================================== */
:root {
  --u204l-bg: #e1e1dd;
  --u204l-black: #000;
  --u204l-white: #fff;
  --u204l-font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --u204l-font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --u204l-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* LOOK の大きな輪郭数字（01〜04）の線の太さ。Figma は 1px だが、細くて見づらいので 2px にしている */
  --u204l-num-stroke: 2px;
  --u: calc(100cqw / 375);
  /* EC 側の固定ヘッダーの高さ（実寸 px。--u では拡縮しない） */
  --u204l-head-h: 75px;
}

@media (min-width: 768px) {
  :root {
    --u: calc(100cqw / 1920);
    --u204l-head-h: 79px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--u204l-bg);
  color: var(--u204l-black);
  font-family: var(--u204l-font-ja);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: none;
}

p,
h1,
h2,
h3 {
  margin: 0;
  font-weight: inherit;
}

.u204l {
  position: relative;
  /* width: 100% がないと、親が flex のとき（EC の .l-container）に margin: auto と container-type: inline-size で幅が 0 になる */
  width: 100%;
  margin: 0 auto;
  overflow-x: clip;
  container-type: inline-size;
}

/* EC ヘッダー分の白い余白。KV をヘッダーの下から始める */
.u204l-headspace {
  height: var(--u204l-head-h);
  background: var(--u204l-white);
}

.u204l-sp {
  display: inline;
}

.u204l-pc {
  display: none;
}

@media (min-width: 768px) {
  .u204l-sp {
    display: none;
  }

  .u204l-pc {
    display: inline;
  }
}

/* 見出しの行マスク：外側 .u204l-line がマスク、内側 .u204l-line__in が動く */
.u204l-line {
  display: block;
  overflow: hidden;
}

.u204l-line__in {
  display: block;
}

/* ==========================================================================
   KV
   ========================================================================== */
.u204l-kv {
  position: relative;
  height: calc(760 * var(--u));
  overflow: hidden;
}

/* 写真（背景）と前景切り抜きは同じクリップ枠 */
.u204l-kv__photo,
.u204l-kv__fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(589 * var(--u));
  overflow: hidden;
}

.u204l-kv__photo {
  z-index: 1;
}

.u204l-kv__bg {
  position: absolute;
  top: calc(-38.25 * var(--u));
  left: calc(-213 * var(--u));
  width: calc(837.33 * var(--u));
  height: calc(628 * var(--u));
  object-fit: cover;
}

.u204l-kv__glow {
  position: absolute;
  top: calc(-39.5 * var(--u));
  left: calc(-457 * var(--u));
  width: calc(1323 * var(--u));
  height: calc(875.5 * var(--u));
  border-radius: 50%;
  background: var(--u204l-white);
  opacity: 0.1;
  filter: blur(calc(52.5 * var(--u)));
  mix-blend-mode: overlay;
}

.u204l-kv__fg {
  z-index: 3;
  pointer-events: none;
}

.u204l-kv__fg img {
  position: absolute;
  top: calc(27.75 * var(--u));
  left: calc(16 * var(--u));
  width: calc(343 * var(--u));
  height: calc(561 * var(--u));
}

/* 204L：写真と前景の間。SP の中心は x=191.5 */
.u204l-kv__title-wrap {
  position: absolute;
  z-index: 2;
  top: calc(27.5 * var(--u));
  left: calc(4 * var(--u));
  width: 100%;
}

.u204l-kv__title {
  color: var(--u204l-white);
  font-family: var(--u204l-font-en);
  font-size: calc(136 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
}

/* INLINE / LIGHT / MODERNISM（SP：INLINE と LIGHT が同じ行） */
.u204l-kv__lead-wrap {
  position: absolute;
  z-index: 4;
  top: calc(491 * var(--u));
  right: 0;
}

.u204l-kv__lead {
  position: relative;
  color: var(--u204l-white);
  font-family: var(--u204l-font-en);
  font-size: calc(63 * var(--u));
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-align: right;
  white-space: nowrap;
}

.u204l-kv__lead .u204l-line:first-child {
  position: absolute;
  top: calc(-1.5 * var(--u));
  right: calc(182 * var(--u));
}

.u204l-kv__brand-wrap {
  position: absolute;
  z-index: 5;
  top: calc(96.5 * var(--u));
  left: calc(22 * var(--u));
}

.u204l-kv__brand {
  font-family: var(--u204l-font-en);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* SPORTS HERITAGE, / STYLED FOR NOW. */
.u204l-kv__copy-wrap {
  position: absolute;
  z-index: 5;
  top: calc(454 * var(--u));
  left: calc(10 * var(--u));
}

.u204l-kv__copy {
  position: relative;
  font-family: var(--u204l-font-en);
  font-size: calc(10 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.u204l-kv__copy span {
  display: block;
}

.u204l-kv__copy span + span {
  position: absolute;
  top: calc(1 * var(--u));
  left: calc(122 * var(--u));
}

.u204l-kv__text-wrap {
  position: absolute;
  z-index: 5;
  top: calc(620 * var(--u));
  left: calc(71 * var(--u));
}

.u204l-kv__text {
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .u204l-kv {
    height: calc(1538 * var(--u));
  }

  .u204l-kv__photo,
  .u204l-kv__fg {
    height: calc(1530 * var(--u));
  }

  .u204l-kv__bg {
    top: calc(-58 * var(--u));
    left: calc(-166 * var(--u));
    width: calc(2316 * var(--u));
    height: calc(1737 * var(--u));
  }

  .u204l-kv__glow {
    top: calc(183 * var(--u));
    left: calc(-374 * var(--u));
    width: calc(2646 * var(--u));
    height: calc(1751 * var(--u));
    filter: blur(calc(105 * var(--u)));
  }

  .u204l-kv__fg {
    z-index: 4;
  }

  .u204l-kv__fg img {
    top: calc(126 * var(--u));
    left: calc(465 * var(--u));
    width: calc(951 * var(--u));
    height: calc(1553 * var(--u));
  }

  /* PC：204L は中心 x=966 */
  .u204l-kv__title-wrap {
    z-index: 3;
    top: calc(123 * var(--u));
    left: calc(966 * var(--u));
    width: auto;
    transform: translateX(-50%);
  }

  .u204l-kv__title {
    font-size: calc(400 * var(--u));
  }

  /* PC：INLINE / LIGHT / MODERNISM の3行、前景の下 */
  .u204l-kv__lead-wrap {
    z-index: 2;
    top: calc(1022 * var(--u));
    right: calc(-12 * var(--u));
  }

  .u204l-kv__lead {
    font-size: calc(216 * var(--u));
  }

  .u204l-kv__lead .u204l-line:first-child {
    position: static;
  }

  .u204l-kv__brand-wrap {
    top: calc(345 * var(--u));
    left: calc(399 * var(--u));
  }

  .u204l-kv__brand {
    font-size: calc(45 * var(--u));
  }

  .u204l-kv__copy-wrap {
    top: calc(901 * var(--u));
    right: calc(45 * var(--u));
    left: auto;
  }

  .u204l-kv__copy {
    font-size: calc(40 * var(--u));
    text-align: right;
  }

  .u204l-kv__copy span + span {
    position: static;
  }

  .u204l-kv__text-wrap {
    top: calc(1243 * var(--u));
    left: calc(70 * var(--u));
  }

  .u204l-kv__text {
    font-size: calc(18 * var(--u));
  }
}

/* ==========================================================================
   導入（BUILT ACROSS ERAS.）
   位置は Figma の座標からセクション上端を引いた値
   ========================================================================== */
/* SP：導入の枠は KV の下端に 60px 重なる（Figma の配置。写真は枠の上端から 73px 下に描く） */
.u204l-intro {
  position: relative;
  height: calc(1309 * var(--u));
  margin-top: calc(-60 * var(--u));
}

.u204l-intro__ph1,
.u204l-intro__ph2,
.u204l-intro__txt1,
.u204l-intro__txt2 {
  position: absolute;
}

.u204l-intro__head {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.u204l-intro__ph1 {
  top: 0;
  left: 0;
  width: calc(314 * var(--u));
  height: calc(540 * var(--u));
}

.u204l-intro__ph2 {
  top: calc(873 * var(--u));
  left: calc(61 * var(--u));
  width: calc(314 * var(--u));
  height: calc(228.96 * var(--u));
}

.u204l-intro__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.u204l-intro__frame img {
  position: absolute;
}

.u204l-intro__ph1 img {
  top: calc(73 * var(--u));
  left: calc(-35 * var(--u));
  width: calc(350 * var(--u));
  height: calc(467 * var(--u));
}

.u204l-intro__ph2 img {
  top: calc(-0.33 * var(--u));
  left: calc(-4.25 * var(--u));
  width: calc(321.41 * var(--u));
  height: calc(241.06 * var(--u));
}

/* 縦組みキャプション（写真 1 の右外側） */
.u204l-intro__cap {
  position: absolute;
  top: calc(75 * var(--u));
  left: calc(315 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(16 * var(--u));
  height: calc(146 * var(--u));
  font-family: var(--u204l-font-en);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.u204l-intro__cap span {
  display: block;
  flex: none;
  transform: rotate(90deg);
  white-space: nowrap;
}

.u204l-intro__title {
  position: absolute;
  top: calc(496 * var(--u));
  left: calc(71 * var(--u));
  font-family: var(--u204l-font-en);
  font-size: calc(72 * var(--u));
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.u204l-intro__tag {
  position: absolute;
  top: calc(500 * var(--u));
  right: calc(11 * var(--u));
  font-family: var(--u204l-font-en);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-align: right;
  white-space: nowrap;
}

.u204l-intro__text {
  font-size: calc(11 * var(--u));
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.u204l-intro__txt1 {
  top: calc(711 * var(--u));
  left: calc(10 * var(--u));
}

.u204l-intro__txt2 {
  top: calc(1113 * var(--u));
  left: calc(10 * var(--u));
}

.u204l-intro__label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--u204l-font-en);
  font-size: calc(9 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  white-space: pre;
}

.u204l-intro__label--r {
  left: calc(183 * var(--u));
}

.u204l-intro__text--2 {
  position: relative;
  top: calc(52 * var(--u));
  left: calc(61 * var(--u));
  line-height: 2.2;
}

@media (min-width: 768px) {
  .u204l-intro {
    height: calc(1720 * var(--u));
    margin-top: calc(114 * var(--u));
  }

  .u204l-intro__ph1 {
    width: calc(790 * var(--u));
    height: calc(1220 * var(--u));
  }

  .u204l-intro__ph2 {
    top: calc(1020 * var(--u));
    left: calc(960 * var(--u));
    width: calc(960 * var(--u));
    height: calc(700 * var(--u));
  }

  .u204l-intro__ph1 img {
    top: calc(-89 * var(--u));
    left: calc(-148 * var(--u));
    width: calc(1025 * var(--u));
    height: calc(1366 * var(--u));
  }

  .u204l-intro__ph2 img {
    top: calc(-1 * var(--u));
    left: calc(-13 * var(--u));
    width: calc(982 * var(--u));
    height: calc(737 * var(--u));
  }

  .u204l-intro__cap {
    top: calc(928 * var(--u));
    left: calc(790 * var(--u));
    width: calc(31 * var(--u));
    height: calc(292 * var(--u));
    font-size: calc(24 * var(--u));
  }

  .u204l-intro__title {
    top: calc(97 * var(--u));
    left: calc(1141 * var(--u));
    font-size: calc(160 * var(--u));
    line-height: 1;
  }

  .u204l-intro__tag {
    top: calc(108 * var(--u));
    right: calc(71 * var(--u));
    font-size: calc(30 * var(--u));
  }

  .u204l-intro__text {
    font-size: calc(18 * var(--u));
  }

  .u204l-intro__txt1 {
    top: calc(628 * var(--u));
    left: calc(1150 * var(--u));
  }

  .u204l-intro__txt1 .u204l-intro__text {
    line-height: 2.4;
  }

  .u204l-intro__txt2 {
    top: calc(1325 * var(--u));
    left: calc(70 * var(--u));
  }

  .u204l-intro__label {
    font-size: calc(14 * var(--u));
  }

  .u204l-intro__label--r {
    left: calc(360 * var(--u));
  }

  .u204l-intro__text--2 {
    top: calc(110 * var(--u));
    left: calc(360 * var(--u));
  }
}

/* ==========================================================================
   CTA ボタン（商品名と価格 / VIEW MORE）
   ========================================================================== */
.u204l-btn {
  position: absolute;
  display: block;
  width: calc(355 * var(--u));
  height: calc(45 * var(--u));
  color: var(--u204l-black);
  font-family: var(--u204l-font-en);
  font-weight: 700;
  text-decoration: none;
}

.u204l-btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--u204l-black);
}

.u204l-btn__more {
  position: absolute;
  top: calc(15.75 * var(--u));
  left: calc(227.5 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* 商品名と価格：SP は 1 行に並べ、PC は名前と価格を別々の位置に置く */
.u204l-btn__info {
  position: absolute;
  top: calc(12.07 * var(--u));
  left: calc(10.87 * var(--u));
  line-height: 1;
  white-space: pre;
}

.u204l-btn__name {
  font-size: calc(16 * var(--u));
  font-weight: 700;
}

.u204l-btn__gap {
  font-size: calc(12 * var(--u));
  font-weight: 700;
}

.u204l-btn__price {
  color: #444;
  font-weight: 500;
}

.u204l-btn__slash {
  font-size: calc(11 * var(--u));
}

.u204l-btn__hy {
  font-size: calc(11 * var(--u));
}

.u204l-btn__arrow {
  position: absolute;
  top: calc(20.11 * var(--u));
  left: calc(295 * var(--u));
  width: calc(50 * var(--u));
  height: calc(5.77 * var(--u));
}

@media (min-width: 768px) {
  .u204l-btn {
    width: calc(700 * var(--u));
    height: calc(90 * var(--u));
  }

  .u204l-btn__info {
    display: contents;
  }

  .u204l-btn__gap {
    display: none;
  }

  .u204l-btn__name {
    position: absolute;
    top: calc(31 * var(--u));
    left: calc(40 * var(--u));
    font-size: calc(28 * var(--u));
    line-height: 1;
    white-space: nowrap;
  }

  .u204l-btn__price {
    position: absolute;
    top: calc(37 * var(--u));
    left: calc(204 * var(--u));
    line-height: 1;
    white-space: pre;
  }

  .u204l-btn__slash {
    font-size: calc(17 * var(--u));
  }

  .u204l-btn__hy {
    font-size: calc(17 * var(--u));
  }

  .u204l-btn__more {
    top: calc(36 * var(--u));
    left: calc(507 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .u204l-btn__arrow {
    top: calc(42.11 * var(--u));
    left: calc(610 * var(--u));
    width: calc(60 * var(--u));
  }
}

/* ==========================================================================
   LOOK（01〜04 共通。--rev は左右反転：LOOK 02 / 04）
   位置は Figma の座標からセクション上端を引いた値
   ========================================================================== */
.u204l-look {
  position: relative;
  height: calc(1651 * var(--u));
  margin-top: calc(55 * var(--u));
}

.u204l-look__ph1,
.u204l-look__ph2,
.u204l-look__gal {
  position: absolute;
}

.u204l-look__head,
.u204l-look__dhead,
.u204l-look__dtxt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.u204l-look__head {
  z-index: 2;
}

.u204l-look__ph1 {
  top: calc(152 * var(--u));
  left: calc(10 * var(--u));
  width: calc(365 * var(--u));
  height: calc(482 * var(--u));
}

.u204l-look__ph2 {
  top: calc(644 * var(--u));
  left: calc(11 * var(--u));
  width: calc(303 * var(--u));
  height: calc(369 * var(--u));
}

.u204l-look__ph1 > img,
.u204l-look__ph2 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真に付く英字（SP：縦組み / PC：横組み） */
.u204l-look__cap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(307 * var(--u));
  width: calc(12 * var(--u));
  font-family: var(--u204l-font-en);
  font-size: calc(9 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.u204l-look__cap span {
  display: block;
  flex: none;
  transform: rotate(90deg);
  white-space: nowrap;
}

.u204l-look__cap--1 {
  top: 0;
  height: calc(72 * var(--u));
}

.u204l-look__cap--2 {
  top: calc(121 * var(--u));
  height: calc(92 * var(--u));
}

/* 見出し：LOOK ─ 01 とサブタイトル */
.u204l-look__title {
  font-family: var(--u204l-font-en);
}

.u204l-look__ttl {
  position: absolute;
  top: 0;
  left: calc(6 * var(--u));
  display: block;
  width: calc(347 * var(--u));
  height: calc(128 * var(--u));
}

.u204l-look__word,
.u204l-look__no {
  position: absolute;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.u204l-look__word {
  top: calc(49.4 * var(--u));
  left: 0;
  font-size: calc(72 * var(--u));
  font-weight: 700;
}

.u204l-look__hy {
  position: absolute;
  z-index: 1;
  top: calc(82.2 * var(--u));
  left: calc(196.1 * var(--u));
  width: calc(32 * var(--u));
  height: calc(4 * var(--u));
  background: var(--u204l-black);
}

.u204l-look__no {
  top: 0;
  left: calc(207 * var(--u));
  color: transparent;
  font-size: calc(128 * var(--u));
  font-weight: 500;
  -webkit-text-stroke: var(--u204l-num-stroke) var(--u204l-black);
  /* 輪郭線が LCD（サブピクセル）描画でギザつくのを避ける。専用レイヤーにして、グレースケールの描画にする */
  text-rendering: geometricPrecision;
  will-change: transform;
}

.u204l-look__sub {
  position: absolute;
  top: calc(118.5 * var(--u));
  left: calc(9 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ギャラリー */
.u204l-look__slide {
  position: absolute;
  top: calc(1023 * var(--u));
  left: calc(10 * var(--u));
  width: calc(355 * var(--u));
  height: calc(236.25 * var(--u));
  overflow: hidden;
}

.u204l-look__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.u204l-look__slide-img.is-current {
  opacity: 1;
}

.u204l-look__arrow {
  position: absolute;
  top: calc(105 * var(--u));
  width: calc(12.5 * var(--u));
  height: calc(25 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.u204l-look__arrow::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.u204l-look__arrow img {
  position: absolute;
  top: -1.41%;
  left: -2.83%;
  width: 108.49%;
  height: 102.82%;
}

.u204l-look__arrow--prev {
  left: calc(10 * var(--u));
  transform: rotate(180deg);
}

.u204l-look__arrow--next {
  top: calc(107 * var(--u));
  left: calc(333 * var(--u));
  width: calc(12 * var(--u));
}

.u204l-look__thumbs {
  position: absolute;
  top: calc(1274 * var(--u));
  left: calc(10 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, calc(81.143 * var(--u)));
  gap: calc(10.143 * var(--u));
  width: calc(355 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.u204l-look__thumbs li {
  height: calc(51.09 * var(--u));
}

.u204l-look__thumbs button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0.4;
  cursor: pointer;
}

.u204l-look__thumbs button[aria-current="true"] {
  opacity: 1;
}

.u204l-look__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 説明：白い英字・小さな LOOK 番号・日本語見出し・本文 */
.u204l-look__white {
  position: absolute;
  top: calc(1338.25 * var(--u));
  right: calc(10 * var(--u));
  color: var(--u204l-white);
  font-family: var(--u204l-font-en);
  font-size: calc(37.5 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  white-space: nowrap;
}

/* 行末の空白も幅に含める（Figma の右揃えに合わせる） */
.u204l-look__white .u204l-line__in {
  white-space: pre;
}

.u204l-look__num {
  position: absolute;
  top: calc(1346.75 * var(--u));
  left: calc(263 * var(--u));
  font-family: var(--u204l-font-en);
  font-size: calc(8 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  white-space: pre;
}

.u204l-look__jp {
  position: absolute;
  top: calc(1367.25 * var(--u));
  left: calc(10 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.u204l-look__body {
  position: absolute;
  top: calc(1443 * var(--u));
  left: calc(73 * var(--u));
  width: calc(291 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
}

.u204l-look .u204l-btn {
  top: calc(1606 * var(--u));
  left: calc(10 * var(--u));
}

@media (min-width: 768px) {
  .u204l-look {
    height: calc(2386 * var(--u));
    margin-top: calc(198 * var(--u));
  }

  .u204l-look__ph1 {
    top: calc(134 * var(--u));
    left: calc(790 * var(--u));
    width: calc(1060 * var(--u));
    height: calc(1400 * var(--u));
  }

  .u204l-look__ph2 {
    top: calc(682 * var(--u));
    left: calc(70 * var(--u));
    width: calc(700 * var(--u));
    height: calc(852 * var(--u));
  }

  .u204l-look__cap {
    display: block;
    top: calc(-26 * var(--u));
    left: 0;
    width: auto;
    height: auto;
    font-size: calc(14 * var(--u));
  }

  .u204l-look__cap span {
    transform: none;
  }

  .u204l-look__cap--2 {
    top: calc(-26 * var(--u));
    left: calc(360 * var(--u));
    height: auto;
  }

  .u204l-look__ttl {
    left: calc(59 * var(--u));
    width: calc(885 * var(--u));
    height: calc(320 * var(--u));
  }

  .u204l-look__word {
    top: calc(121 * var(--u));
    font-size: calc(180 * var(--u));
  }

  .u204l-look__hy {
    top: calc(203 * var(--u));
    left: calc(527 * var(--u));
    width: calc(80 * var(--u));
    height: calc(10 * var(--u));
  }

  .u204l-look__no {
    left: calc(536 * var(--u));
    font-size: calc(320 * var(--u));
  }

  .u204l-look__sub {
    top: calc(299 * var(--u));
    left: calc(68 * var(--u));
    font-size: calc(54 * var(--u));
    line-height: 1.2;
  }

  .u204l-look__slide {
    top: calc(1634 * var(--u));
    left: 0;
    width: calc(1130 * var(--u));
    height: calc(752 * var(--u));
  }

  .u204l-look__arrow {
    top: calc(353 * var(--u));
    width: calc(23 * var(--u));
    height: calc(46 * var(--u));
  }

  .u204l-look__arrow img {
    top: -1.54%;
    left: -3.07%;
    width: 109.22%;
    height: 103.08%;
  }

  .u204l-look__arrow--prev {
    left: calc(30 * var(--u));
  }

  .u204l-look__arrow--next {
    top: calc(353 * var(--u));
    left: calc(1077 * var(--u));
    width: calc(23 * var(--u));
  }

  .u204l-look__thumbs {
    top: calc(2284 * var(--u));
    left: calc(1150 * var(--u));
    grid-template-columns: repeat(4, calc(160 * var(--u)));
    gap: calc(20 * var(--u));
    width: calc(700 * var(--u));
  }

  .u204l-look__thumbs li {
    height: calc(100.74 * var(--u));
  }

  .u204l-look__white {
    top: calc(1633 * var(--u));
    right: auto;
    left: calc(1506 * var(--u));
    font-size: calc(75 * var(--u));
    text-align: left;
  }

  .u204l-look__num {
    top: calc(1662 * var(--u));
    left: calc(1490 * var(--u));
    font-size: calc(16 * var(--u));
  }

  .u204l-look__jp {
    top: calc(1711 * var(--u));
    left: calc(1190 * var(--u));
    font-size: calc(26 * var(--u));
  }

  .u204l-look__body {
    top: calc(1861 * var(--u));
    left: calc(1190 * var(--u));
    width: auto;
    font-size: calc(18 * var(--u));
    white-space: nowrap;
  }

  .u204l-look .u204l-btn {
    top: calc(2028 * var(--u));
    left: calc(1150 * var(--u));
  }
}

/* --------------------------------------------------------------------------
   LOOK 02（左右反転）：写真は 大＝左 / 小＝右、ギャラリーは右、説明は左
   -------------------------------------------------------------------------- */
.u204l-look--rev {
  height: calc(1651 * var(--u));
  margin-top: calc(120 * var(--u));
}

.u204l-look--rev .u204l-look__ph1 {
  left: 0;
}

.u204l-look--rev .u204l-look__ph2 {
  left: calc(62 * var(--u));
}

.u204l-look--rev .u204l-look__cap {
  left: calc(-14 * var(--u));
}

.u204l-look--rev .u204l-look__cap--1 {
  height: calc(58 * var(--u));
}

.u204l-look--rev .u204l-look__cap--2 {
  height: calc(79 * var(--u));
}

.u204l-look--rev .u204l-look__no {
  letter-spacing: -0.05em;
}

.u204l-look--rev .u204l-look__num {
  left: calc(173 * var(--u));
}

.u204l-look--rev .u204l-btn {
  top: calc(1606 * var(--u));
}

@media (min-width: 768px) {
  .u204l-look--rev {
    height: calc(2374 * var(--u));
    margin-top: calc(162 * var(--u));
  }

  .u204l-look--rev .u204l-look__ph1 {
    top: calc(122 * var(--u));
    left: calc(70 * var(--u));
  }

  .u204l-look--rev .u204l-look__ph2 {
    top: calc(670 * var(--u));
    left: calc(1152 * var(--u));
  }

  .u204l-look--rev .u204l-look__cap--1 {
    left: calc(-2 * var(--u));
    height: auto;
  }

  .u204l-look--rev .u204l-look__cap--2 {
    left: calc(358 * var(--u));
    height: auto;
  }

  .u204l-look--rev .u204l-look__ttl {
    left: calc(939 * var(--u));
  }

  .u204l-look--rev .u204l-look__sub {
    left: calc(948 * var(--u));
  }

  .u204l-look--rev .u204l-look__slide {
    top: calc(1622 * var(--u));
    left: calc(790 * var(--u));
  }

  .u204l-look--rev .u204l-look__thumbs {
    top: calc(2272 * var(--u));
    left: calc(70 * var(--u));
  }

  .u204l-look--rev .u204l-look__white {
    top: calc(1612 * var(--u));
    left: calc(425 * var(--u));
  }

  .u204l-look--rev .u204l-look__num {
    top: calc(1649 * var(--u));
    left: calc(408 * var(--u));
  }

  .u204l-look--rev .u204l-look__jp {
    top: calc(1699 * var(--u));
    left: calc(99 * var(--u));
  }

  .u204l-look--rev .u204l-look__body {
    top: calc(1849 * var(--u));
    left: calc(99 * var(--u));
  }

  .u204l-look--rev .u204l-btn {
    top: calc(2036 * var(--u));
    left: calc(59 * var(--u));
  }
}

/* --------------------------------------------------------------------------
   LOOK 03（LOOK 01 と同じ向き。数値が違う箇所だけ上書き）
   -------------------------------------------------------------------------- */
.u204l-look--03 {
  height: calc(1611 * var(--u));
  margin-top: calc(110 * var(--u));
}

.u204l-look--03 .u204l-look__cap--1 {
  height: calc(90 * var(--u));
}

.u204l-look--03 .u204l-look__cap--2 {
  height: calc(152 * var(--u));
}

.u204l-look--03 .u204l-look__num {
  left: calc(223 * var(--u));
}

.u204l-look--03 .u204l-btn {
  top: calc(1566 * var(--u));
}

@media (min-width: 768px) {
  .u204l-look--03 {
    height: calc(2386 * var(--u));
    margin-top: calc(164 * var(--u));
  }

  .u204l-look--03 .u204l-look__cap--1,
  .u204l-look--03 .u204l-look__cap--2 {
    height: auto;
  }

  .u204l-look--03 .u204l-look__white {
    top: calc(1625 * var(--u));
    left: calc(1507 * var(--u));
  }

  .u204l-look--03 .u204l-look__num {
    left: calc(1490 * var(--u));
  }

  .u204l-look--03 .u204l-btn {
    top: calc(1998 * var(--u));
  }
}

/* --------------------------------------------------------------------------
   LOOK 04（LOOK 02 と同じ左右反転。数値が違う箇所だけ上書き）
   -------------------------------------------------------------------------- */
.u204l-look--04 {
  height: calc(1631 * var(--u));
}

.u204l-look--04 .u204l-look__cap--1 {
  height: calc(101 * var(--u));
}

/* 「4」は字形の重なり部分の輪郭が線になって出るため、塗りを地色にして線の内側半分ごと隠す
   （04 は写真に重ならないので地色で問題ない）。線の内側半分が隠れるので、太さは 2 倍で指定する */
.u204l-look--04 .u204l-look__no {
  color: var(--u204l-bg);
  paint-order: stroke fill;
  -webkit-text-stroke-width: calc(var(--u204l-num-stroke) * 2);
}

.u204l-look--04 .u204l-look__cap--2 {
  height: calc(97 * var(--u));
}

.u204l-look--04 .u204l-look__num {
  left: calc(213 * var(--u));
}

.u204l-look--04 .u204l-btn {
  top: calc(1586 * var(--u));
}

@media (min-width: 768px) {
  .u204l-look--04 {
    height: calc(2374 * var(--u));
  }

  .u204l-look--04 .u204l-look__cap--1,
  .u204l-look--04 .u204l-look__cap--2 {
    height: auto;
  }

  .u204l-look--04 .u204l-look__white {
    top: calc(1617 * var(--u));
  }

  .u204l-look--04 .u204l-look__num {
    left: calc(408 * var(--u));
  }

  .u204l-look--04 .u204l-btn {
    top: calc(2006 * var(--u));
  }
}

/* ==========================================================================
   固定 LOOK ナビ
   .u204l の外に置く。fixed のラッパーを新しいコンテナにして --u（cqw）を解決する
   （ラッパーは pointer-events: none。ナビ本体だけがクリックを受ける）
   ========================================================================== */
.u204l-navwrap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  height: 0;
  container-type: inline-size;
  pointer-events: none;
}

.u204l-nav {
  position: absolute;
  bottom: env(safe-area-inset-bottom, 0px);
  left: calc(50% - 177.5 * var(--u));
  width: calc(355 * var(--u));
  height: calc(60 * var(--u));
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: var(--u204l-black);
  font-family: var(--u204l-font-en);
  pointer-events: auto;
}

.u204l-nav__logo {
  display: none;
}

.u204l-nav__item {
  position: absolute;
  top: calc(5 * var(--u));
  display: block;
  width: calc(80 * var(--u));
  height: calc(55 * var(--u));
  color: inherit;
  text-decoration: none;
}

.u204l-nav__item[data-nav="1"] { left: calc(10 * var(--u)); }
.u204l-nav__item[data-nav="2"] { left: calc(95 * var(--u)); }
.u204l-nav__item[data-nav="3"] { left: calc(180 * var(--u)); }
.u204l-nav__item[data-nav="4"] { left: calc(265 * var(--u)); }

.u204l-nav__ph {
  position: absolute;
  top: calc(14 * var(--u));
  left: 0;
  width: calc(80 * var(--u));
  height: calc(34.29 * var(--u));
  object-fit: cover;
}

/* 輪郭だけの数字。字形の重なりが線として出ないよう、内側を SVG のマスクで抜く */
.u204l-nav__no {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(39.71 * var(--u));
  height: calc(24.62 * var(--u));
  overflow: visible;
}

.u204l-nav__no text {
  fill: none;
  stroke: var(--u204l-black);
  stroke-width: 1.3;
  font-family: var(--u204l-font-en);
  font-size: 34px;
  font-weight: 700;
}

.u204l-nav__no mask text {
  fill: #000;
  stroke: none;
}

.u204l-nav__look {
  position: absolute;
  top: calc(7 * var(--u));
  left: 0;
  font-size: calc(9 * var(--u));
  font-weight: 700;
  line-height: 0.9;
  white-space: nowrap;
}

.u204l-nav__ttl {
  display: none;
}

/* 表示／退場（JS があるときだけ隠す。動きを減らす設定では常に表示） */
.u204l-js .u204l-nav {
  opacity: 0;
  translate: 0 8px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 250ms ease, translate 250ms ease, visibility 0s linear 250ms;
}

.u204l-js .u204l-nav.is-shown {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 250ms ease, translate 250ms ease, visibility 0s;
}

/* 現在の LOOK 以外は少し淡く（大きさ・位置は変えない） */
.u204l-nav.has-current .u204l-nav__item {
  opacity: 0.5;
  transition: opacity 250ms ease;
}

.u204l-nav.has-current .u204l-nav__item[aria-current="true"] {
  opacity: 1;
}

.u204l-nav__item:focus-visible {
  outline: 2px solid var(--u204l-black);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .u204l-nav {
    bottom: calc(20 * var(--u));
    left: calc(50% - 380 * var(--u));
    width: calc(740 * var(--u));
    height: calc(110 * var(--u));
    border-radius: 5px;
  }

  .u204l-nav__logo {
    display: block;
    margin: 0;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .u204l-nav__logo span {
    position: absolute;
    display: block;
  }

  .u204l-nav__the {
    top: calc(23 * var(--u));
    left: calc(21 * var(--u));
    font-size: calc(13 * var(--u));
    letter-spacing: -0.03em;
  }

  .u204l-nav__u,
  .u204l-nav__style {
    font-size: calc(27 * var(--u));
    letter-spacing: -0.03em;
    text-align: center;
  }

  .u204l-nav__u {
    top: calc(34 * var(--u));
    left: calc(22.1 * var(--u));
    width: calc(85.8 * var(--u));
  }

  .u204l-nav__style {
    top: calc(59 * var(--u));
    left: calc(23 * var(--u));
    width: calc(84 * var(--u));
  }

  .u204l-nav__item {
    top: calc(10 * var(--u));
    width: calc(138 * var(--u));
    height: calc(85 * var(--u));
  }

  .u204l-nav__item[data-nav="1"] { left: calc(127 * var(--u)); }
  .u204l-nav__item[data-nav="2"] { left: calc(275 * var(--u)); }
  .u204l-nav__item[data-nav="3"] { left: calc(423 * var(--u)); }
  .u204l-nav__item[data-nav="4"] { left: calc(571 * var(--u)); }

  .u204l-nav__ph {
    top: calc(24 * var(--u));
    width: calc(140 * var(--u));
    height: calc(60 * var(--u));
  }

  .u204l-nav__no {
    width: calc(50 * var(--u));
    height: calc(31 * var(--u));
  }

  .u204l-nav__no text {
    stroke-width: 1;
  }

  .u204l-nav__look {
    top: calc(16 * var(--u));
    font-size: calc(10 * var(--u));
  }

  .u204l-nav__ttl {
    position: absolute;
    top: calc(3 * var(--u));
    left: 0;
    display: block;
    width: calc(138 * var(--u));
    font-size: calc(10 * var(--u));
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-align: right;
    white-space: nowrap;
  }
}

/* ==========================================================================
   VIEW MORE だけのボタン（SUEDE / METALLIC）
   ========================================================================== */
.u204l-btn--simple {
  width: calc(294 * var(--u));
  height: calc(50 * var(--u));
}

.u204l-btn--simple .u204l-btn__more {
  top: calc(17 * var(--u));
  left: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
}

.u204l-btn--simple .u204l-btn__arrow {
  top: calc(22.11 * var(--u));
  left: calc(214 * var(--u));
  width: calc(60 * var(--u));
  height: calc(5.77 * var(--u));
}

@media (min-width: 768px) {
  .u204l-btn--simple {
    width: calc(460 * var(--u));
    height: calc(70 * var(--u));
  }

  .u204l-btn--simple .u204l-btn__more {
    top: calc(25 * var(--u));
    left: calc(40 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1;
    letter-spacing: 0;
  }

  .u204l-btn--simple .u204l-btn__arrow {
    top: calc(34.11 * var(--u));
    left: calc(350 * var(--u));
  }
}

/* ==========================================================================
   FIND YOUR U204L（SUEDE / METALLIC）と ONE SHOE.
   位置は Figma の座標からセクション上端（MADE TO MOVE. の上端）を引いた値
   ========================================================================== */
.u204l-fy {
  position: relative;
  height: calc(2002.5 * var(--u));
  margin-top: calc(119 * var(--u));
}

.u204l-fy__ph,
.u204l-fy__tx,
.u204l-fy__ctx {
  position: absolute;
}

.u204l-fy__head,
.u204l-fy__pt,
.u204l-fy__chead {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.u204l-fy__ph {
  width: calc(304 * var(--u));
  height: calc(391.36 * var(--u));
}

.u204l-fy__ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u204l-fy__ph--suede {
  top: calc(287 * var(--u));
  left: calc(71 * var(--u));
}

.u204l-fy__ph--metal {
  top: calc(977 * var(--u));
  left: calc(71 * var(--u));
}

/* 見出し：MADE TO MOVE. / FIND YOUR / U204L */
.u204l-fy__made,
.u204l-fy__find,
.u204l-fy__ptitle,
.u204l-fy__one {
  font-family: var(--u204l-font-en);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.u204l-fy__made {
  position: absolute;
  top: 0;
  left: calc(10 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1;
}

/* 文字サイズを行ごとに持つ見出しは、字間（em）も行の側に置く */
.u204l-fy__l1,
.u204l-fy__l2,
.u204l-fy__one .u204l-line {
  letter-spacing: -0.03em;
}

.u204l-fy__l1,
.u204l-fy__l2 {
  position: absolute;
  line-height: 1;
}

.u204l-fy__l1 {
  top: calc(90 * var(--u));
  left: calc(56 * var(--u));
  font-size: calc(50 * var(--u));
}

.u204l-fy__l2 {
  top: calc(122.5 * var(--u));
  left: calc(2.5 * var(--u));
  width: 100%;
  font-size: calc(130 * var(--u));
  text-align: center;
}

/* 商品見出し */
.u204l-fy__ptitle {
  position: absolute;
  left: calc(10 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.3;
}

.u204l-fy__pt--suede .u204l-fy__ptitle {
  top: calc(260 * var(--u));
}

.u204l-fy__pt--metal .u204l-fy__ptitle {
  top: calc(952 * var(--u));
}

/* 本文 */
.u204l-fy__tx {
  width: calc(294 * var(--u));
}

.u204l-fy__tx--suede {
  top: calc(693 * var(--u));
  left: calc(71 * var(--u));
}

.u204l-fy__tx--metal {
  top: calc(1383 * var(--u));
  left: calc(71 * var(--u));
}

.u204l-fy__body {
  font-size: calc(11 * var(--u));
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.u204l-fy__btn {
  left: calc(71 * var(--u));
}

.u204l-fy__btn--suede {
  top: calc(851 * var(--u));
}

.u204l-fy__btn--metal {
  top: calc(1523 * var(--u));
}

/* クロージング：ONE SHOE. / ENDLESS WAYS TO STYLE IT. / 日本語 */
.u204l-fy__one .u204l-line {
  position: absolute;
  line-height: 1;
  text-align: center;
}

.u204l-fy__one .u204l-line:first-child {
  top: calc(1691 * var(--u));
  left: calc(0.5 * var(--u));
  width: 100%;
  font-size: calc(70 * var(--u));
}

.u204l-fy__endless {
  top: calc(1760 * var(--u));
  left: calc(1 * var(--u));
  width: 100%;
  font-size: calc(26 * var(--u));
}

.u204l-fy__ctx {
  inset: 0;
  pointer-events: none;
}

.u204l-fy__cjp,
.u204l-fy__cbody {
  position: absolute;
  width: 100%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.u204l-fy__cjp {
  top: calc(1816 * var(--u));
  left: calc(7 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.4;
}

.u204l-fy__cbody {
  top: calc(1892.5 * var(--u));
  left: calc(5 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 2;
}

@media (min-width: 768px) {
  .u204l-fy {
    height: calc(2723 * var(--u));
    margin-top: calc(264 * var(--u));
  }

  .u204l-fy__ph {
    width: calc(870 * var(--u));
    height: calc(1120 * var(--u));
  }

  .u204l-fy__ph--suede {
    top: calc(449 * var(--u));
    left: calc(70 * var(--u));
  }

  .u204l-fy__ph--metal {
    top: calc(449 * var(--u));
    left: calc(980 * var(--u));
  }

  .u204l-fy__made {
    left: calc(70 * var(--u));
    font-size: calc(57 * var(--u));
    line-height: 1.1579;
  }

  .u204l-fy__l1 {
    top: calc(170 * var(--u));
    left: calc(692 * var(--u));
    font-size: calc(100 * var(--u));
  }

  .u204l-fy__l2 {
    top: calc(223 * var(--u));
    left: calc(0.5 * var(--u));
    font-size: calc(330 * var(--u));
  }

  .u204l-fy__ptitle {
    font-size: calc(36 * var(--u));
  }

  .u204l-fy__pt--suede .u204l-fy__ptitle {
    top: calc(1607 * var(--u));
    left: calc(70 * var(--u));
  }

  .u204l-fy__pt--metal .u204l-fy__ptitle {
    top: calc(1607 * var(--u));
    left: calc(980 * var(--u));
  }

  /* METALLIC の 3 行目「TECHNICAL EDGE.」は PC では 1 行（SP は 2 行） */
  .u204l-fy__w {
    display: inline-block;
    vertical-align: top;
  }

  .u204l-fy__tx {
    width: calc(460 * var(--u));
  }

  .u204l-fy__tx--suede {
    top: calc(1620 * var(--u));
    left: calc(430 * var(--u));
  }

  .u204l-fy__tx--metal {
    top: calc(1607 * var(--u));
    left: calc(1340 * var(--u));
  }

  .u204l-fy__body {
    font-size: calc(16 * var(--u));
  }

  .u204l-fy__btn--suede {
    top: calc(1850 * var(--u));
    left: calc(430 * var(--u));
  }

  .u204l-fy__btn--metal {
    top: calc(1850 * var(--u));
    left: calc(1340 * var(--u));
  }

  .u204l-fy__one .u204l-line:first-child {
    top: calc(2223 * var(--u));
    left: calc(437 * var(--u));
    width: auto;
    font-size: calc(200 * var(--u));
    text-align: left;
  }

  .u204l-fy__endless {
    top: calc(2417 * var(--u));
    left: calc(-0.5 * var(--u));
    font-size: calc(100 * var(--u));
  }

  .u204l-fy__cjp {
    top: calc(2548 * var(--u));
    left: calc(622 * var(--u));
    width: auto;
    font-size: calc(36 * var(--u));
    line-height: 1.8;
    text-align: left;
  }

  .u204l-fy__cbody {
    top: calc(2636 * var(--u));
    left: 0;
    font-size: calc(16 * var(--u));
    line-height: 1.8;
  }
}

/* ==========================================================================
   BLACK COFFEE（COMING SOON）
   位置は Figma の座標からセクション上端を引いた値
   ========================================================================== */
.u204l-bc {
  position: relative;
  height: calc(520 * var(--u));
  margin-top: calc(74.5 * var(--u));
  color: var(--u204l-bg);
}

.u204l-bc__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.u204l-bc__zoom {
  position: absolute;
  inset: 0;
}

.u204l-bc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u204l-bc__soon {
  position: absolute;
  top: calc(240 * var(--u));
  left: calc(1 * var(--u));
  width: 100%;
  font-family: var(--u204l-font-en);
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

/* ロゴ：SP は上に new balance 204L、下に B TOKYO JAPAN */
.u204l-bc__nb {
  position: absolute;
  top: calc(50 * var(--u));
  left: calc(77 * var(--u));
  width: calc(221 * var(--u));
  height: calc(56 * var(--u));
}

.u204l-bc__b {
  position: absolute;
  top: calc(414 * var(--u));
  left: calc(164 * var(--u));
  width: calc(47.93 * var(--u));
  height: calc(56 * var(--u));
}

@media (min-width: 768px) {
  .u204l-bc {
    height: calc(830 * var(--u));
    margin-top: calc(288 * var(--u));
    color: var(--u204l-white);
  }

  .u204l-bc__soon {
    top: calc(375 * var(--u));
    left: calc(0.5 * var(--u));
    font-size: calc(80 * var(--u));
    font-weight: 600;
  }

  /* PC：左に B TOKYO JAPAN、右に new balance 204L */
  .u204l-bc__nb {
    top: calc(367 * var(--u));
    left: calc(1425 * var(--u));
    width: calc(380 * var(--u));
    height: calc(96 * var(--u));
  }

  .u204l-bc__b {
    top: calc(367 * var(--u));
    left: calc(110 * var(--u));
    width: calc(82.17 * var(--u));
    height: calc(96 * var(--u));
  }
}

/* ==========================================================================
   演出（js/motion.js と対）
   ========================================================================== */

/* 写真の枠（overflow: hidden）の内側で、ズームとパララックスを担当する層。
   枠の切り取りは動かさず、中身だけを動かす */
.u204l-kv__zoom {
  position: absolute;
  inset: 0;
}

/* 出現前の状態。JS が使える環境（html.u204l-js）で、
   演出を実装済みのセクション（.u204l-motion）の data-rv だけを隠す。
   時間と遅れは JS が --rv-dur / --rv-delay で渡す。共通イージングは仕様どおり */
.u204l-js .u204l-motion [data-rv] {
  --rv-dur: 450ms;
  --rv-delay: 0ms;
}

/* フェード（本文・小さな英字・写真） */
.u204l-js .u204l-motion [data-rv="fade"] {
  opacity: 0;
  transition: opacity var(--rv-dur) var(--u204l-ease) var(--rv-delay);
}

.u204l-js .u204l-motion [data-rv="fade"].is-in {
  opacity: 1;
}

/* 行ごとの下→上（外側の .u204l-line が overflow: hidden のマスク） */
.u204l-js .u204l-motion [data-rv="clip-y"] {
  transform: translateY(105%);
  transition: transform var(--rv-dur) var(--u204l-ease) var(--rv-delay);
}

.u204l-js .u204l-motion [data-rv="clip-y"].is-in {
  transform: none;
}

/* 左→右のクリップ。文字は動かさず、表示領域だけを広げる（はみ出しを切らないよう余白を持たせる） */
.u204l-js .u204l-motion [data-rv="clip-x"] {
  clip-path: inset(-20% 100% -20% -20%);
  transition: clip-path var(--rv-dur) var(--u204l-ease) var(--rv-delay);
}

.u204l-js .u204l-motion [data-rv="clip-x"].is-in {
  clip-path: inset(-20% -20% -20% -20%);
}

/* --------------------------------------------------------------------------
   LOOK の演出
   -------------------------------------------------------------------------- */

/* 日本語見出し：境界がやわらかい左→右のマスク。文字は動かさず、マスクだけが進む（#9） */
@property --u204l-rv {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.u204l-js .u204l-motion [data-rv="clip-xs"] {
  display: inline-block;
  vertical-align: top;
  --u204l-rv: 0%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--u204l-rv) - 12%), transparent var(--u204l-rv));
  mask-image: linear-gradient(90deg, #000 calc(var(--u204l-rv) - 12%), transparent var(--u204l-rv));
  transition: --u204l-rv var(--rv-dur) var(--u204l-ease) var(--rv-delay);
}

.u204l-js .u204l-motion [data-rv="clip-xs"].is-in {
  --u204l-rv: 112%;
}

/* ギャラリー：新しい写真を上でフェードイン（350ms）、前の写真はその下に残す（透けない） */
.u204l-look__slide {
  touch-action: pan-y;
}

.u204l-look__slide-img {
  z-index: 0;
  transition: opacity 350ms ease;
}

.u204l-look__slide-img.is-prev {
  z-index: 1;
  opacity: 1;
}

.u204l-look__slide-img.is-current {
  z-index: 2;
}

.u204l-look__arrow,
.u204l-look__auto {
  z-index: 3;
}

/* 自動再生の停止／再開（矢印の下に小さく）。停止中は再生マーク、動作中は一時停止マーク */
.u204l-look__auto {
  position: absolute;
  top: calc(138 * var(--u));
  left: calc(10 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}

.u204l-look__auto::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.u204l-look__auto span {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(3 * var(--u));
  width: calc(10 * var(--u));
  height: calc(12 * var(--u));
  background: linear-gradient(90deg, #fff 0 32%, transparent 32% 68%, #fff 68% 100%);
}

.u204l-look__auto[aria-pressed="true"] span {
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (min-width: 768px) {
  .u204l-look__auto {
    top: calc(415 * var(--u));
    left: calc(30 * var(--u));
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  .u204l-look__auto span {
    top: calc(3 * var(--u));
    left: calc(5 * var(--u));
    width: calc(14 * var(--u));
    height: calc(18 * var(--u));
  }
}

/* --------------------------------------------------------------------------
   CTA のホバー（#21）：PC のホバー・キーボードフォーカスで、VIEW MORE だけを縦にロール。
   枠は 1 行分で固定し、文言を 2 段（上に抜ける / 下から入る）にする。
   矢印は右へ 4px、下線は軽く強調。SP ではホバーを前提にしない
   -------------------------------------------------------------------------- */
.u204l-btn__more {
  overflow: hidden;
}

/* CTA のホバー（#21 を Figma の「バリアント2」に合わせたもの）：全面の黒がフェードインし、文字と矢印が白になる（動きなし） */
.u204l-btn {
  isolation: isolate;
  transition: color 400ms var(--u204l-ease);
}

/* 背景の黒は、下から広げず、その場でフェードインさせる */
.u204l-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--u204l-black);
  opacity: 0;
  transition: opacity 400ms var(--u204l-ease);
}

.u204l-btn::after {
  z-index: -1;
}

.u204l-btn__price {
  transition: color 400ms var(--u204l-ease);
}

.u204l-btn__arrow {
  transition: filter 400ms var(--u204l-ease);
}

/* 出現のフェード（data-rv）と、ホバーの色の切り替えを両立させる */
.u204l-js .u204l-motion .u204l-btn[data-rv="fade"] {
  transition: opacity var(--rv-dur) var(--u204l-ease) var(--rv-delay), color 400ms var(--u204l-ease);
}

@media (min-width: 768px) and (hover: hover) {
  .u204l-btn:hover,
  .u204l-btn:focus-visible {
    color: var(--u204l-white);
  }

  .u204l-btn:hover::before,
  .u204l-btn:focus-visible::before {
    opacity: 1;
  }

  .u204l-btn:hover .u204l-btn__price,
  .u204l-btn:focus-visible .u204l-btn__price {
    color: #999;
  }

  .u204l-btn:hover .u204l-btn__arrow,
  .u204l-btn:focus-visible .u204l-btn__arrow {
    filter: invert(1);
  }
}

/* 動きを減らす設定：切り替えとホバーの動きを止め、自動再生のボタンも出さない */
@media (prefers-reduced-motion: reduce) {
  .u204l-look__slide-img,
  .u204l-btn,
  .u204l-btn__price,
  .u204l-btn__arrow,
  .u204l-btn::before {
    transition: none;
  }

  .u204l-look__auto {
    display: none;
  }
}