/* okamoto-taro.css — combined from Paper export (base.css + sections/*.css) */
/* ==========================================================================
   base.css — page shell for the Ground Y x Okamoto Taro x Fujiko Pro PC page
   Literal reproduction from Paper file 01KVCHD72DN6DX6H1CHSCKWAF2,
   page 1-0, artboard ILG-0 ("PC_GYxokamoto", 1440px wide desktop-only build)
   ========================================================================== */

body {
  margin: 0;
  padding: 0;
  /* width:100vw full-bleed sections (.s01-hero, .s03-lookbook) include the
     scrollbar's own width, which can bleed a few px past the visible
     viewport and trigger a horizontal scrollbar. overflow-x:hidden on the
     root body propagates to the viewport itself (doesn't break descendant
     position:sticky the way it would on an ordinary element). */
  overflow-x: hidden;
}

.page-wrap {
  background-color: #F9F9F9;
}

/* Section 02 (intro) is narrower (701px) than the 1440px page — center it. */
.s02-intro {
  margin: 0 auto;
}


/* ===== sections/01-hero-nav.css ===== */
/* =========================================================
   01-hero-nav — hero topbanner + GroundY SNS widget + arrow
   + global fixed side-menu + to-top button
   Source: Paper file 01KVCHD72DN6DX6H1CHSCKWAF2, page 1-0,
   artboard ILG-0 (PC_GYxokamoto, 1440px)
   Nodes: ILQ-0, INC-0, INM-0, INO-0, IQ2-0
   ========================================================= */

.s01-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 1036px;
  background-image:none;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- FV background video (背面フルブリード, 従来のtopbanner画像の代替) ---- */
.s01-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  pointer-events: none;
}

/* FV動画のミュート切替ボタン。アイコン実寸は22x20だが、SPでのタップを
   考慮して44x44のタップ領域(WCAG 2.5.8のターゲットサイズ)を確保する。
   指定座標(PC top24/left28, SP top18/left20)は「アイコンの左上」なので、
   ボタン自身はアイコンとの差分((44-20)/2=12, (44-22)/2=11)ぶん外側に置く。 */
.s01-hero__sound {
  position: absolute;
  top: 12px;
  left: 17px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* on/off の2枚をHTMLに置き、displayで出し分ける。JS側でsrcを差し替えると
   サブディレクトリ配信(/yohji/配下)でパスが絶対パスになり404になるため。 */
.s01-hero__sound-icon {
  display: block;
  width: 22px;
  height: 20px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.s01-hero__sound-icon--on {
  display: none;
}

.s01-hero__sound.is-unmuted .s01-hero__sound-icon--off {
  display: none;
}

.s01-hero__sound.is-unmuted .s01-hero__sound-icon--on {
  display: block;
}

@media (hover: hover) {
  .s01-hero__sound:hover .s01-hero__sound-icon {
    opacity: 1;
  }
}

/* ---- GroundY SNS widget (node INC-0 / IND-0 / INF-0) ---- */
.s01-hero__sns {
  position: absolute;
  right: 0;
  top: 35px;
  width: 327px;
  box-sizing: border-box;
  padding: 24px 50px 24px 20px;
  background-color: #242424;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s01-hero__sns-label {
  margin: 0;
  color: #F7F7F7;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-align: right;
}

.s01-hero__sns-icons {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.s01-hero__sns-icons li {
  display: flex;
  align-items: center;
}

.s01-hero__sns-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.s01-hero__sns-icons img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ---- decorative vertical arrow line (node INM-0) ---- */
.s01-hero__arrow {
  position: absolute;
  right: 70px;
  top: 754px;
  width: 1px;
  height: 130px;
}

.s01-hero__arrow::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  animation: scrolldown 3s infinite cubic-bezier(.6, 0, .4, 1);
}

@keyframes scrolldown {
  0% {
    transform-origin: bottom left;
    scale: 1;
  }
  50% {
    scale: 1;
  }
  80% {
    transform-origin: bottom left;
    scale: 0;
  }
  81% {
    transform-origin: top left;
    scale: 0;
  }
  to {
    transform-origin: top left;
    scale: 1;
  }
}

/* =========================================================
   Global fixed side menu (node INO-0 "menu")
   Positioned as a page-wide fixed rail; not nested in .s01-hero
   ========================================================= */
.side-menu {
  position: fixed;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  /* APPLIQUE(index 0)がアクティブになったタイミングでフェードイン
     (.is-visibleはokamoto-taro.jsが currentIndex >= 0 でトグルする) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.side-menu.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.side-menu nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.side-menu li {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.side-menu a {
  display: block;
  color: #A9A9A9;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.side-menu li.is-active a {
  color: #000000;
}

/* =========================================================
   Global fixed "back to top" button (node IQ2-0 "to_top")
   ========================================================= */
.to-top {
  position: fixed;
  right: 37px;
  bottom: 40px;
  /* category-nav(z-index:40)と同値だとDOM順依存になるため、常に
     nav側が上に来るよう1段下げる(「to-topはnavの下のレイヤーに
     したい」との指示、2026-07-06) */
  z-index: 39;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* Figma 2388:1924 annotation: 作品エリアに入るとフェード表示される */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.to-top__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.to-top__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Figma 2388:1924 annotation: PCはホバーで三角が上に10px動く */
.to-top:hover .to-top__arrow {
  transform: translateY(-10px);
}

.to-top__label {
  color: #A5A5A5;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 100%;
  letter-spacing: 0.05em;
  text-align: center;
}

.to-top__circle {
  flex-shrink: 0;
  width: 78px;
  height: 81px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f7f7f7;
}

.to-top__circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma 2388:1930 spec: circle graphic opacity 69% */
  opacity: 0.69;
}

/* ===== sections/02-intro.css ===== */
.s02-intro {
  position: relative;
  width: 701px;
  margin-top: 122px;
}

.s02-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 40px;
}

.s02-intro__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 700px;
  padding: 0 117px 19px 116px;
  box-sizing: border-box;
}

.s02-intro__logo {
  display: block;
  width: 467px;
  height: 309px;
}

.s02-intro__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 612px;
}

.s02-intro__text {
  margin: 0;
  width: 612px;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.07em;
  color: #000000;
  white-space: normal;
  font-feature-settings: "palt";
}

/* ===== sections/03-lookbook.css ===== */
/* 03-lookbook: Ground Y x Okamoto Taro x Fujiko Pro lookbook gallery (PC) */

.s03-lookbook {
  position: relative;
  /* z-index:0でスタッキングコンテキストを作り、.s03-lookbook__tower の
     z-index:1 がこのセクション内の他の要素より上に来るようにする。
     背景色は無し — 直前に仕込んだ.s04-catalog-a__bgnonが太陽の塔の
     背面から透けて見えるようにするため */
  z-index: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 73px;
  padding-bottom: 200px;
  /* overflow-x:clip (overflow:hiddenではなく) でスクロールコンテナ化せずに
     横方向のマーキーのはみ出しだけをクリップする */
  overflow-x: clip;
}

.s03-lookbook__rows {
  position: relative;
  width: 1440px;
  margin: 0 auto;
}

/* Row guard: clips the marquee and applies the Figma card tilt to the whole row */
.s03-lookbook__row-guard {
  width: 120vw;
  margin-left: -10vw;
  overflow: hidden;
  transform: translateX(-6vw) rotate(5deg);
  transform-origin: center center;
  /* 120vw幅を5°回転すると角が上下に (width/2)×sin(5°) ≒ 70px振れる。
     上端の見切れ対策で margin-top のみ広めに確保。 */
  margin-top: 90px;
  margin-bottom: 24px;
}

/* .s03-lookbook__portrait-frame と接する側だけ余白を詰める(スライダーとの
   間を空けない指定) — 反対側(ページ最上部/最下部に面する側)の余白は
   5°回転した角のはみ出し対策としてそのまま残す */
.s03-lookbook__row-guard:has(+ .s03-lookbook__portrait-frame) {
  margin-bottom: 0;
}
.s03-lookbook__portrait-frame + .s03-lookbook__row-guard {
  margin-top: 0;
}
/* 1つ目のrow-guard(row1)だけmargin-topを+60px(90→150px)。PCのみ、
   SP側は下の@mediaで90pxに戻す(2026-07-07) */
.s03-lookbook__rows > .s03-lookbook__row-guard:first-child {
  margin-top: 150px;
}

.s03-lookbook__row {
  width: 120vw;
  margin-left: -10vw;
}

/* 純CSS transform marquee (Swiper置換、2026-07-07)。row1 は左→右、
   row2 は右→左 (Figma 2388:1931 annotation 準拠)。装飾目的のみでスライド内に
   操作対象は無いため pointer-events:none。実際の横方向クリップは
   .s03-lookbook__row-guard(overflow:hidden)側で行う。 */
.s03-lookbook__marquee {
  width: 100%;
  overflow: visible; /* row-guard 側で clip 済み */
  pointer-events: none;
}

/* トラック: スライド群を2セット複製して横並び(合計9×2=18)。
   translateX を 1セット分ずらすとちょうど複製セットが元セットの位置に
   重なりシームレスにループする。gap:20px は旧 Swiper spaceBetween:20 と同値。
   align-items:center で高さの違うカードを縦中央揃え(旧 swiper-wrapper と同じ)。
   linear infinite・will-change:transform でGPU合成の滑らかな連続移動。 */
.s03-lookbook__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 速度は ≒79 px/s に合わせて算出(旧 Swiper speed:2000 の体感)。
   1セット(9枚)幅+9個のgap ぶんずらす。PC: (260+280+300)×3=2520px + 20×9=180px
   = 2700px。duration = 2700 / 79 ≒ 34.18s。左右とも同じずらし量なので同px/s。
   row1(左→右)は -shift → 0、row2(右→左)は 0 → -shift。 */
.s03-lookbook__track--row1 {
  animation-name: s03-marquee-row1-pc;
  animation-duration: 34.18s;
}
.s03-lookbook__track--row2 {
  animation-name: s03-marquee-row2-pc;
  animation-duration: 34.18s;
}

@keyframes s03-marquee-row1-pc {
  from { transform: translateX(-2700px); }
  to   { transform: translateX(0); }
}
@keyframes s03-marquee-row2-pc {
  from { transform: translateX(0); }
  to   { transform: translateX(-2700px); }
}

/* アクセシビリティ: モーション低減設定ではマーキーを停止 */
@media (prefers-reduced-motion: reduce) {
  .s03-lookbook__track {
    animation: none;
  }
}

.s03-lookbook__item {
  flex-shrink: 0;
}

/* Repeated lookbook slide card: photo cropped/clipped to a fixed-size frame */
.s03-lookbook__card {
  position: relative;
  overflow: hidden;
  background-color: #000;
}

/* Per-slide size variation is now baked directly into each slide's
   .s03-lookbook__card width/height (260x465 / 280x502 / 300x539, looping
   per row) in the markup — no CSS transform:scale layer needed. A
   transform-based approach was tried and removed: it multiplied on top of
   each card's own authored width, and stacking it with a real 3-size loop
   double-shrunk every other slide. */

.s03-lookbook__slide-img {
  position: absolute;
  display: block;
  object-fit: cover;
}

/* Character portrait — scale/rotate driven by scroll progress, no sticky
   固定 (Figma 2388:1815 annotation: scale 48%→60%→45%, rotation
   0°→16°→-7°→3°)。頭が画面に現れてから足が消えるまでの間だけJS
   (okamoto-taro.js)がこの要素にtransformを適用する。
   .s03-lookbook__portrait 自体は常に等倍(1700x2001.16px)のサイズを持つ
   ため、そのままフローに置くとscale後の見た目よりずっと大きい空白が
   前後にできてしまう。.s03-lookbook__portrait-frame がスライダーと隙間
   なく詰まる実際のフロー高さ(1220.3px)を確保し、中の等倍要素はflexで
   中央揃えしたままoverflowで自由にはみ出す */
.s03-lookbook__portrait-frame {
  width: 100%;
  height: 1220.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* row1/row2は5°回転で角がはみ出す(.row-guard参照)ため、隙間なく
     詰めた際にportraitと重なる。z-index指定でスライダーより下に
     沈めておく(row-guard側はz-index:autoのまま = 実質0扱い) */
  position: relative;
  z-index: -1;
}

/* base size は 826.18x972.56 / 0.48 — scale(0.48)(Figma初期値)でちょうど
   826.18px幅になるようにしている(1700x2001.16pxの等倍要素からの逆算) */
.s03-lookbook__portrait {
  width: 1700px;
  height: 2001.16px;
  overflow: hidden;
  flex-shrink: 0;
}

.s03-lookbook__portrait-img {
  display: block;
  width: 1700px;
  height: auto;
}

/* Tower of the Sun (Okamoto Taro sculpture) anchor image — bottom-right,
   bleeding past the section edge (clipped by .s03-lookbook overflow:hidden) */
.s03-lookbook__tower {
  position: absolute;
  /* Figma 2388:2025 left:116.94px is relative to the 1440px canvas;
     .s03-lookbook__tower's containing block is .s03-lookbook (100vw), so
     re-anchor against the centered 1440px content column */
  left: calc((100% - 1440px) / 2 + 116.94px);
  bottom: -460px;
  width: 534.49px;
  height: 736.8px;
  z-index: 1;
}

/* 画面幅1440px以上では塔を左25%基準に寄せる(2026-07-07)。
   1439px以下は上のcalc()式のまま(見た目を変えない) */
@media (min-width: 1440px) {
  .s03-lookbook__tower {
    left: 6%;
  }
}

.s03-lookbook__tower-img {
  position: absolute;
  left: 116.94px;
  top: 0px;
  width: 424px;
  height: 673.4px;
  display: block;
  object-fit: cover;
  transform-origin: 50% 50%;
  animation: s03-tower-sway 2.5s ease-in-out infinite;
}

/* node 2388:2025 annotation: 18°↔8°, 1往復2.5秒, 永遠にループ */
@keyframes s03-tower-sway {
  0%,
  100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

/* ===== sections/04-catalog-a.css ===== */
/* 04-catalog-a: product catalog blocks (Applique / Collage / Cutwork) */

.s04-catalog-a {
  width: 100%;
  margin-top: 382px;
}

.s04-catalog-a__inner {
  width: 1114px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 130px;
}

/* ---------- Category block ---------- */

.s04-catalog-a__category {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s04-catalog-a__category--applique .s04-catalog-a__header {
  margin-bottom: 80px;
}

.s04-catalog-a__category--collage .s04-catalog-a__header,
.s04-catalog-a__category--cutwork .s04-catalog-a__header,
.s04-catalog-a__category--graphics .s04-catalog-a__header,
.s04-catalog-a__category--accessory .s04-catalog-a__header {
  margin-bottom: 120px;
}

/* ---------- Header ---------- */

.s04-catalog-a__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.s04-catalog-a__label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.s04-catalog-a__label {
  margin: 0;
  font-family: "YuGothic", "Yu Gothic", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.2em;
  text-align: center;
  font-feature-settings: "palt" 1;
  color: #000000;
  white-space: pre;
}

.s04-catalog-a__title {
  margin: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
}

.s04-catalog-a__desc {
  margin: 0;
  width: 610px;
  font-family: "YuGothic", "Yu Gothic", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 150%;
  letter-spacing: 0.07em;
  text-align: center;
  font-feature-settings: "palt" 1;
  color: #000000;
  white-space: normal;
}

/* ---------- Rows / cards ---------- */

.s04-catalog-a__rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.s04-catalog-a__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
}

.s04-catalog-a__row--single {
  justify-content: flex-start;
  width: 100%;
}

.s04-catalog-a__card {
  width: 504px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}

.s04-catalog-a__image {
  width: 290px;
  height: 410px;
  position: relative;
  flex-shrink: 0;
  background: #ffffff;
}

.s04-catalog-a__image-inner {
  width: 249px;
  height: 344px;
  position: absolute;
  left: 23px;
  top: 33px;
  background-repeat: no-repeat;
}

/* 画像が切り替わるカード(現状05-graphic-tshirt-04)だけ<img>タグを使う —
   他のカードはbackground-imageのまま(style属性で直接指定) */
.s04-catalog-a__image-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* 表裏クロスフェード(05-graphic-tshirt-04) — 1枚のsrc差し替えではなく、
   表/裏2枚の<img>を.s04-catalog-a__image-inner(position:absolute=
   containing block)に重ねてopacityでクロスフェードする。JSが一定間隔
   (data-crossfade-interval)で.is-activeを付け替える(okamoto-taro.js参照)。
   2026-07-07、「2枚目が出ない」src差し替え方式の不具合を解消 */
.s04-catalog-a__crossfade-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* フェードなしで瞬間的に表裏切替(transition削除、2026-07-07) */
}

.s04-catalog-a__crossfade-img.is-active {
  opacity: 1;
}

.s04-catalog-a__info {
  width: 182px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}

.s04-catalog-a__name {
  margin: 0;
  width: 182px;
  /* 商品名が2行以上になってもクリップせず伸びるよう固定高さ→fit-content */
  height: fit-content;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 135%;
  letter-spacing: 0.05em;
  color: #000000;
  white-space: normal;
}

.s04-catalog-a__desc-item {
  margin: 0;
  width: 182px;
  font-family: "YuGothic", "Yu Gothic", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0em;
  font-feature-settings: "palt" 1;
  color: #000000;
}

.s04-catalog-a__meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.s04-catalog-a__price,
.s04-catalog-a__code {
  margin: 0;
  width: 100%;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 120%;
  letter-spacing: 0.05em;
  color: #000000;
}

.s04-catalog-a__btn {
  width: 160px;
  height: 40px;
  position: relative;
  flex-shrink: 0;
  background-color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.s04-catalog-a__btn--black {
  background-color: #000000;
}

/* ホバー時: bg #3d3d3d(ダークグレー) / 文字 白 (Figma 2768:4088) */
.s04-catalog-a__btn:hover {
  background-color: #3d3d3d;
}

.s04-catalog-a__btn span {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 150%;
  letter-spacing: 0.15em;
  text-align: center;
  color: #ffffff;
  transition: color 0.3s ease;
}

.s04-catalog-a__btn:hover span {
  color: #ffffff;
}

/* ===== sections/06-campaign-footer.css ===== */
/* ==========================================================================
   06-campaign-footer — Campaign info block + page footer (bottom of page)
   Literal extraction from Paper file 01KVCHD72DN6DX6H1CHSCKWAF2, page 1-0
   Nodes: ITZ-0 "Frame 626337" (campaign: 受注期間 / ノベルティ / ノベルティ),
          IVM-0 "Frame 626312" (footer: share / logo / copyright)
   ========================================================================== */

.s06-campaign-footer {
  /* .s04-catalog-a__bgnon (装飾用の背景キャラ、position:absolute + z-index:0)
     は.s04-bgnon-scope内でこのsectionの兄弟要素。このsection自身に
     position+z-indexとbackground-colorを両方持たせると、section box
     全体(実コンテンツが無い左右の余白や.__inner外側も含む)がbgnonより
     前面かつ不透明になり、s04-bgnon-scope内でbgnonが全く見えなくなって
     しまう(実コンテンツの無い場所までbgnonを覆い隠す回帰)。そのため
     このsection自体はposition:static/背景transparentのままにし、
     実コンテンツを包む.s06-campaign-footer__inner側にposition+z-index
     +背景色を持たせる。static要素はスタッキング順でbgnon(z-index:0の
     positioned要素)より下に描画されるため、このsectionの箱そのものは
     bgnonの上に何も描かず、.__inner(実コンテンツ)だけがbgnonより前面に
     昇格して不透明に描画される */
  width: 100%;
  margin-top: 286px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.s06-campaign-footer__inner {
  /* このsection内の実コンテンツ(パネル群・share/logo/copyright)を
     bgnonより前面のスタッキングコンテキストに昇格させる */
  position: relative;
  z-index: 1;
  width: 1030px;
  max-width: 1030px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------- */
/* Campaign block (ITZ-0) — 3 stacked panels, gap 118px between them       */
/* ---------------------------------------------------------------------- */

.s06-campaign-footer__campaign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 118px;
  width: 1030px;
  box-sizing: border-box;
}

.s06-campaign-footer__panel {
  width: 1030px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 80px 100px;
}

.s06-campaign-footer__panel--info {
  gap: 40px;
}

.s06-campaign-footer__panel--novelty {
  gap: 24px;
}

.s06-campaign-footer__panel--profile {
  gap: 24px;
}

/* Shared "INFORMATION" / "CAMPAIGN" chip label ---------------------------- */

.s06-campaign-footer__chip {
  flex-shrink: 0;
  width: 200px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #c5c5c5;
  color: #ffffff;
  text-align: center;
}

.s06-campaign-footer__panel--info .s06-campaign-footer__chip {
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 150%;
}

/* CAMPAIGNチップのフォントを INFORMATION(panel--info)と同一に揃える
   (2026-07-08) */
.s06-campaign-footer__panel--novelty .s06-campaign-footer__chip {
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 150%;
}

/* Info panel (受注期間 / store list) -------------------------------------- */

.s06-campaign-footer__info-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 700px;
  box-sizing: border-box;
}

.s06-campaign-footer__info-text {
  margin: 0;
  width: 700px;
  color: #f7f7f7;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 150%;
  text-align: center;
}

.s06-campaign-footer__stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  box-sizing: border-box;
}

.s06-campaign-footer__store-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

.s06-campaign-footer__store {
  flex-shrink: 0;
  width: 128px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #0e101b;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 13px;
  line-height: 150%;
  text-align: center;
  /* 元は<div>だったのを店舗モーダルを開く<button>に変更したためのreset */
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ホバー時: bg #363636 / 文字 白 (Figma 2505:5141) */
@media (hover: hover) {
  .s06-campaign-footer__store:hover {
    background-color: #363636;
    color: #ffffff;
  }
}

.s06-campaign-footer__store--tight {
  font-size: 12px;
  letter-spacing: -0.03em;
}

/* Shop location modal (theshopyohjiyamamoto.jp の"GINZA SIX"モーダルと
   同じ挙動: data-shop-buttons内の.s06-campaign-footer__storeをindexで
   data-shop-modals内の.s06-campaign-footer__shop-modal-itemと対応させ、
   クリックでopacity/visibilityをトグルする。JSはokamoto-taro.js参照 */
.s06-campaign-footer__shop-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.s06-campaign-footer__shop-modal .s06-campaign-footer__shop-modal-section,
.s06-campaign-footer__shop-modal .s06-campaign-footer__shop-modal-section * {
  visibility: hidden;
}

.s06-campaign-footer__shop-modal.is-showed {
  opacity: 1;
  visibility: visible;
}

.s06-campaign-footer__shop-modal.is-showed .s06-campaign-footer__shop-modal-section,
.s06-campaign-footer__shop-modal.is-showed .s06-campaign-footer__shop-modal-section * {
  visibility: visible;
}

.s06-campaign-footer__shop-modal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s06-campaign-footer__shop-modal-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 480px);
  height: max-content;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

.s06-campaign-footer__shop-modal-item.is-showed {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.s06-campaign-footer__shop-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 20px;
  height: 20px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.s06-campaign-footer__shop-modal-close img {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) {
  .s06-campaign-footer__shop-modal-close:hover {
    transform: rotate(180deg);
  }
}

.s06-campaign-footer__shop-modal-section {
  background-color: #f7f7f7;
  padding: 30px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

.s06-campaign-footer__shop-modal-title {
  margin: 0 0 20px 0;
  color: #0e101b;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 130%;
  /* タイトルは明示的な<br>だけで改行し、各行(例「Y’s」「表参道」)が
     文字単位でさらに折り返さないようにする。flex-shrink:0でタイトル列が
     詰められて幅ゼロ折返しになるのも防ぐ(2026-07-07) */
  white-space: nowrap;
  flex-shrink: 0;
}

.s06-campaign-footer__shop-modal-info {
  font-style: normal;
}

.s06-campaign-footer__shop-modal-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s06-campaign-footer__shop-modal-row {
  display: flex;
  /* ラベル(ADDRESS/TEL)と値の間隔を倍に(8px→16px、2026-07-07) */
  gap: 16px;
}

.s06-campaign-footer__shop-modal-term {
  flex-shrink: 0;
  /* ADDRESS(実測62.2px)が1行で収まる固定幅。TELも同クラスで同幅になり、
     右揃え(text-align:right)と合わせて両行の値の開始位置が揃う。
     56pxだとADDRESSが折り返してレイアウトが崩れ値がはみ出していた
     (2026-07-07) */
  width: 68px;
  white-space: nowrap;
  /* ラベルを右揃え + もう少しだけ薄いグレーに(#999999→#b3b3b3、
     2026-07-07)。値(desc)側の色は可読性のため据え置き */
  text-align: right;
  color: #b3b3b3;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 150%;
  text-transform: uppercase;
}

.s06-campaign-footer__shop-modal-desc {
  margin: 0;
  /* 残り幅を使って自然に折り返す。min-width:0でflexの最小幅制約を外し、
     長い住所本文が行(term+desc)からはみ出さないようにする(2026-07-07) */
  flex: 1;
  min-width: 0;
  color: #0e101b;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 150%;
}

.s06-campaign-footer__shop-modal-map {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
}

.s06-campaign-footer__shop-modal-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SP: 参考サイト(theshopyohjiyamamoto.jp ismodesmartphone=on)の .modal-section に
   合わせる。参考は display:grid で「左カラム = タイトル / 情報(縦積み)」+「右カラム
   = マップアイコン(縦中央)」の2カラム構成。PC(480px)は横並びでも破綻しないため
   base ルールを維持し、狭いSP(item=335px)のみここで上書きする。
   崩れの原因: 横並び(title|dl|map)のまま住所列が~116pxに潰れ本文が1文字ずつ
   縦折り返ししていた → タイトル上/情報下の縦積みにし、住所本文を左カラム全幅で
   自然に折り返させる(2026-07-07) */
@media (max-width: 919px) {
  .s06-campaign-footer__shop-modal-section {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 30px;
  }

  .s06-campaign-footer__shop-modal-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    /* 左カラムは十分広い(約215px)ので、参考同様 normal に戻す。
       これで長い店名(Y's SUPER POSITION 等)も単語区切りで折り返せる */
    white-space: normal;
  }

  .s06-campaign-footer__shop-modal-info {
    grid-column: 1;
    grid-row: 2;
  }

  .s06-campaign-footer__shop-modal-map {
    grid-column: 2;
    /* タイトル+情報の縦中央に配置(参考と同じ) */
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* 参考の .list gap(20px)。address行 / tel行の間隔 */
  .s06-campaign-footer__shop-modal-dl {
    gap: 20px;
  }

  /* 参考の各行は縦積み(ラベル上・値下、gap 5px)。横並び前提の
     term幅68px固定/右揃えは縦積みでは不要なので解除する */
  .s06-campaign-footer__shop-modal-row {
    flex-direction: column;
    gap: 5px;
  }

  .s06-campaign-footer__shop-modal-term {
    width: auto;
    text-align: left;
  }
}

/* Novelty panel (Ground Y x Taro Okamoto postcard) ------------------------ */

.s06-campaign-footer__novelty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  box-sizing: border-box;
}

.s06-campaign-footer__novelty-image {
  position: relative;
  flex-shrink: 0;
  width: 260px;
  height: 260px;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

.s06-campaign-footer__novelty-image img {
  position: absolute;
  /* 差し替え後の画像(Figma node 2388-2059 のエクスポート)は260x260の
     正方形コンポジット(ポストカード集合、周囲の余白・©表記も内包)。
     旧・縦長画像用の height:360px / top:-55px / object-fit:cover だと
     正方形をカバーで拡大して上下左右がクロップされてはみ出す。
     Figma同様、260x260の白フレームに画像を丸ごと収める(container側と
     同アスペクトなのでcontainで余白なくぴったり収まりクロップ無し、
     2026-07-07) */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.s06-campaign-footer__credit {
  position: absolute;
  bottom: 8px;
  right: 9px;
  color: #333333;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.05em;
  line-height: 160%;
  white-space: pre;
}

.s06-campaign-footer__novelty-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  box-sizing: border-box;
}

.s06-campaign-footer__novelty-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 433px;
  box-sizing: border-box;
}

.s06-campaign-footer__novelty-title p {
  margin: 0;
  width: 384px;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 130%;
}

.s06-campaign-footer__novelty-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 433px;
  box-sizing: border-box;
}

.s06-campaign-footer__novelty-desc {
  margin: 0;
  width: 433px;
  color: #ffffff;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 150%;
  white-space: normal;
}

/* .novelty-body の flex gap:40px は本来 note→cta 用(Figma node 2388:2070)。
   desc→note はFigma上は別グループ(node 2388:2071, 内部gap:16px)なので、
   DOMをネストし直す代わりに40pxのgapを16pxまで打ち消すnegative
   margin-topで調整している(40-16=24px) */
.s06-campaign-footer__novelty-note {
  margin: -24px 0 0 0;
  width: 433px;
  color: #ffffff;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 150%;
}

/* text-box-trim対応ブラウザでは、Figma(node 2388:2065)のgap実値を
   そのまま使い、text-box-trimでハーフレディングを除去する
   ([[feedback_figma_text_box_trim]]参照) */
@supports (text-box-trim: trim-both) {
  .s06-campaign-footer__novelty-title {
    gap: 16px;
  }
  .s06-campaign-footer__novelty-copy {
    gap: 32px;
  }
  .s06-campaign-footer__novelty-title p,
  .s06-campaign-footer__novelty-note {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .s06-campaign-footer__novelty-desc {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.s06-campaign-footer__cta {
  flex-shrink: 0;
  width: 128px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: #f7f7f7;
  color: #0e101b;
  text-decoration: none;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 13px;
  line-height: 150%;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ホバー時: s06-campaign-footer__store と同じ bg #363636 / 文字 白 */
@media (hover: hover) {
  .s06-campaign-footer__cta:hover {
    background-color: #363636;
    color: #ffffff;
  }
}

/* Profile panel (Taro Okamoto bio) ---------------------------------------- */

.s06-campaign-footer__profile-row {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s06-campaign-footer__profile-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* text-box-trim非対応ブラウザ向けフォールバック値。line-height:130%が
     glyph実測より大きいハーフレディング分の余白を生むため、Figmaの
     gap値(20px)からその余分(約11.2px)を差し引いた近似値。
     text-box-trim対応ブラウザでは下の@supportsでFigmaと同じ20pxに
     上書きされる(text-box-trimによりハーフレディングが無くなるため) */
  gap: 8.8px;
  width: 384px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* text-box-trim対応ブラウザでは、Figma同様cap-height〜baselineに
   トリムしたボックスを使い、gapもFigmaの実値(20px)をそのまま使う */
@supports (text-box-trim: trim-both) {
  .s06-campaign-footer__profile-name {
    gap: 20px;
  }
  .s06-campaign-footer__profile-en,
  .s06-campaign-footer__profile-jp-name,
  .s06-campaign-footer__profile-years {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.s06-campaign-footer__profile-en {
  margin: 0;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 130%;
}

.s06-campaign-footer__profile-jp {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.s06-campaign-footer__profile-jp-name {
  flex-shrink: 0;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.05em;
  line-height: 130%;
}

.s06-campaign-footer__profile-years {
  flex-shrink: 0;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 130%;
}

.s06-campaign-footer__profile-bio {
  margin: 0;
  width: 400px;
  flex-shrink: 0;
  color: #ffffff;
  font-family: "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 180%;
}

/* ---------------------------------------------------------------------- */
/* Footer (IVM-0) — share widget / brand logomark / copyright             */
/* ---------------------------------------------------------------------- */

.s06-campaign-footer__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 288.69px;
  margin-top: 153px;
  box-sizing: border-box;
}

.s06-campaign-footer__share {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  box-sizing: border-box;
}

.s06-campaign-footer__share-label {
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 100%;
  white-space: pre;
}

.s06-campaign-footer__share-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.s06-campaign-footer__share-icon {
  display: block;
  width: 26.5px;
  height: 26.5px;
}

.s06-campaign-footer__share-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* icon/line.png・facebook.pngは濃色ヘッダー用の白アートワーク。
     明るいfooter背景(#f9f9f9)では見えなくなるため黒化する */
  filter: brightness(0);
}

.s06-campaign-footer__share-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.s06-campaign-footer__logo {
  flex-shrink: 0;
  width: 288.69px;
  height: 190.9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s06-campaign-footer__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   okamoto-taro.css — SP (mobile) overrides for top-half sections
   YY-001: Ground Y x Okamoto Taro x Fujiko Pro — SP_GYxokamoto (Figma
   node 2388:2231, 375px reference frame)
   Sections covered: .s01-hero (header/sns/banner), .s02-intro,
   .s03-lookbook (marquee rows + sticky portrait + tower).
   Only fixed-px, desktop-specific declarations are overridden here —
   viewport-relative (vw) rules and per-slide inline styles in the PC
   base stylesheet already work unmodified at this breakpoint and are
   intentionally left alone (row-guard rotation/clip, swiper base rules,
   card/credit rules, keyframes, etc).
   ========================================================================== */

@media (max-width: 919px) {

  /* ---- 01-hero-nav (Figma nodes 2388:2249 sns / 2388:2244 topbanner /
     2388:2257 arrow) -------------------------------------------------- */

  .s01-hero {
    /* SP frame has no 1036px fixed hero height — banner is a discrete
       375x666.667 image directly under the sns bar (Figma 2388:2246),
       not a full-bleed cover background sized to a tall hero box. */
    height: 731.67px;
    background-position: center 15%;
    /* overflow must stay visible so .s01-hero__arrow (Figma 2388:2257,
       y:694-814) can bleed past the banner's own bottom edge (731.67px)
       into the gap before .s02-intro, matching the Figma SP layout. */
    overflow: visible;
  }

  /* SPは.s01-hero__sns(高さ65px)が動画に被さるため、その下=動画が見え始める
     位置を起点に top18/left20。44x44タップ領域ぶんのオフセット(12/11)を引く。 */
  .s01-hero__sound {
    top: 71px; /* 65 + 18 - 12 */
    left: 9px; /* 20 - 11 */
  }

  /* GroundY sns-sp (2388:2249) — on SP this is a solid full-width dark
     bar stacked above the banner image, not a floating box overlaid on
     top-right of it like PC. */
  .s01-hero__sns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  /* Figma's SP frame renders no visible "Ground Y SNS" label glyph in
     this bar (icons only) — content is kept in the DOM for parity with
     PC/accessibility but visually hidden, same technique as
     .s03-lookbook__credit. */
  .s01-hero__sns-label {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* decorative vertical arrow line (2388:2257 / 2567:853) — centered on
     SP vs. right-anchored on PC. Also black on SP vs. white on PC: the
     SP node's exported SVG stroke is `var(--stroke-0, black)` while the
     PC node's (2006:12697) is `var(--stroke-0, white)` — two different
     colors per breakpoint, not a shared value. */
  .s01-hero__arrow {
    right: auto;
    left: 50%;
    top: 694px;
    width: 1px;
    height: 120px;
    transform: translateX(-50%);
  }

  .s01-hero__arrow::before {
    background-color: #000;
  }

  /* ---- 02-intro (Figma 2388:2258 "Frame 626309") -------------------- */

  .s02-intro {
    width: 375px;
    max-width: 100%;
    margin: 113px auto 0;
  }

  .s02-intro__logo-wrap {
    width: 301px;
    padding: 0;
  }

  .s02-intro__logo {
    width: 301px;
    height: 198px;
  }

  .s02-intro__text-wrap {
    width: 305px;
  }

  .s02-intro__text {
    width: 305px;
    /* font-size/line-height/letter-spacing/color/white-space/palt are
       identical to PC at this breakpoint per Figma 2388:2279 — no
       override needed, inherited from the base rule. */
  }

  /* ---- 03-lookbook (Figma 2388:2280 row1 / 2388:2461 row2 /
     2388:2628 portrait / 2388:2795 tower) ------------------------------ */

  .s03-lookbook {
    margin-top: 40px;
    /* extra trailing space so .s03-lookbook__tower's bottom bleed (see
       below) has room without colliding with the next section. */
    padding-bottom: 180px;
  }

  .s03-lookbook__rows {
    width: 100%;
    margin: 0;
  }

  /* .s03-lookbook__row-guard / __row / __marquee / __item / __card /
     __slide-img / __credit are all viewport-relative (vw) or driven
     entirely by the per-slide inline styles in the markup — the PC base
     rules already render correctly at 375px and are intentionally left
     unmodified here. */

  /* marquee 速度/ずらし量だけSPスライド幅に合わせて再算出。
     1セット(9枚)幅: (138.28+148.92+159.55)×3 = 1340.25px、+ gap 20×9 = 180px
     = 1520.25px。duration = 1520.25 / 79 ≒ 19.24s(PCと同じ ≒79 px/s)。
     PCと同名キーワードだと2700pxのままになるためSP専用keyframesに差し替える。 */
  .s03-lookbook__track--row1 {
    animation-name: s03-marquee-row1-sp;
    animation-duration: 19.24s;
  }
  .s03-lookbook__track--row2 {
    animation-name: s03-marquee-row2-sp;
    animation-duration: 19.24s;
  }

  @keyframes s03-marquee-row1-sp {
    from { transform: translateX(-1520.25px); }
    to   { transform: translateX(0); }
  }
  @keyframes s03-marquee-row2-sp {
    from { transform: translateX(0); }
    to   { transform: translateX(-1520.25px); }
  }
  /* 1つ目のrow-guardのmargin-top +60px(150px)はPC専用のため、SPは
     従来の90pxに戻す */
  .s03-lookbook__rows > .s03-lookbook__row-guard:first-child {
    margin-top: 90px;
  }

  /* Character portrait (2388:2628) — 同じscroll-driven scale/rotate JS
     (okamoto-taro.js)をモバイル用サイズに再スケール。scale(0.48)
     (progress 0)でFigma SPスナップショットの284x335boxになるよう
     base 591.67x697.92 * 0.48 = 284x335 とする */
  .s03-lookbook__portrait-frame {
    height: 335px;
  }

  .s03-lookbook__portrait {
    width: 591.67px;
    height: 697.92px;
  }

  .s03-lookbook__portrait-img {
    width: 591.67px;
    /* height: auto inherited from base rule */
  }

  /* Tower of the Sun (2388:2795) — SP asset is already a self-contained
     cropped image matching its box 1:1 (no PC-style inner crop offset
     needed). Positioned via `bottom` (not `top`) so it anchors to the
     end of the section's content (after row2) — same technique PC uses
     for its own (much larger) bleed. */
  .s03-lookbook__tower {
    left: 25.69px;
    bottom: -93px;
    width: 193.82px;
    height: 302.84px;
  }

  .s03-lookbook__tower-img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* animation: s03-tower-sway inherited from base rule */
  }

}
/* ==========================================================================
   okamoto-taro — SP (mobile) overrides for the bottom half of the page:
   s04-catalog-a (product catalog, 5 categories) + s06-campaign-footer
   (campaign info panels + page footer).
   Source: Figma gMWkVkW9kFROUDVj8b1qHc, node 2388:2231 "SP_GYxokamoto" (375px)
   Children used: 2388:2728 "Frame 626335" (catalog list, 5 sub-groups
   2388:2729/2743/2760/2768/2787), 2388:2673 "Frame 626329" (campaign panels
   2388:2674/2700/2719), 2388:2636 "Frame 626119" (share/logo),
   2388:2665 "Frame 626246" (copyright).
   Card count: applique 6, collage 7, cutwork 2, graphics 9 (PC markup is the
   source of truth for graphics — Figma's SP mock only shows 8, PC has 9),
   accessory 2. Total 26 cards.
   ========================================================================== */

@media (max-width: 919px) {

  /* ------------------------------------------------------------------ */
  /* 04-catalog-a — product catalog                                     */
  /* ------------------------------------------------------------------ */

  .s04-catalog-a {
    width: 100%;
    /* Approximate — exact distance from the preceding section (lookbook,
       built by another agent) isn't in this task's scope; scaled down from
       PC's 382px top margin. */
    margin-top: 120px;
    box-sizing: border-box;
  }

  .s04-catalog-a__inner {
    width: 334px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma metadata: consistent 130px gap between every category block
       (applique→collage, collage→cutwork, cutwork→graphics, graphics→
       accessory) — same literal value as PC, not scaled down. */
    gap: 130px;
    box-sizing: border-box;
  }

  /* ---------- Category block ---------- */

  .s04-catalog-a__category {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* header → rows gap is a uniform 50px for every category on SP
       (unlike PC's 80px/120px split) */
    gap: 50px;
  }

  .s04-catalog-a__category--applique .s04-catalog-a__header,
  .s04-catalog-a__category--collage .s04-catalog-a__header,
  .s04-catalog-a__category--cutwork .s04-catalog-a__header,
  .s04-catalog-a__category--graphics .s04-catalog-a__header,
  .s04-catalog-a__category--accessory .s04-catalog-a__header {
    margin-bottom: 0;
  }

  /* ---------- Header ---------- */

  .s04-catalog-a__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .s04-catalog-a__label-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* .s04-catalog-a__label and .s04-catalog-a__title keep their PC values —
     font-size/letter-spacing ratios are identical between PC and SP
     (label 12px/0.2em, title 26px/0.1em). No override needed. */

  .s04-catalog-a__desc {
    width: 300px;
  }

  /* ---------- Rows / cards ---------- */

  .s04-catalog-a__rows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .s04-catalog-a__row {
    display: flex;
    /* テキスト量でカード高さが違っても、画像は上端・VIEW ITEMは下端で
       揃えたい。center だと短いカードが縦中央寄せされ画像の上に空白が
       できていた → stretch でカードを等高にし、画像上端を揃える(2026-07-07) */
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
  }

  .s04-catalog-a__row--single {
    justify-content: flex-start;
    width: 100%;
  }

  /* Card: PC lays image+info out side-by-side (row); SP stacks them
     (image on top, info below) in a single 160px-wide column. */
  .s04-catalog-a__card {
    width: 160px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .s04-catalog-a__image {
    width: 160px;
    height: 221px;
  }

  .s04-catalog-a__image-inner {
    width: 140px;
    height: 193px;
    left: 10px;
    top: 14px;
  }

  .s04-catalog-a__info {
    width: 160px;
    gap: 20px;
    /* row stretch でカードが等高になったぶん、info が画像下の残り高さを
       埋める。中の .s04-catalog-a__meta を margin-top:auto で下端に寄せ、
       VIEW ITEM ボタンをカード間で揃える */
    flex-grow: 1;
  }

  .s04-catalog-a__name {
    width: 160px;
    height: fit-content;
    /* font-size は SP 独自(13px)。weight は PC と同じ 600 に揃える */
    font-size: 13px;
  }

  .s04-catalog-a__desc-item {
    width: 160px;
    font-size: 11px;
    letter-spacing: 0;
    /* desc-item の line-height 変更(150%)はPC限定。SPは従来の160%を維持 */
    line-height: 160%;
  }

  .s04-catalog-a__meta {
    gap: 8px;
    /* 価格/品番+VIEW ITEM をカード下端へ寄せて、隣カードとボタン位置を揃える */
    margin-top: auto;
  }

  .s04-catalog-a__price {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #000000;
  }

  .s04-catalog-a__code {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: #979797;
  }

  .s04-catalog-a__btn {
    width: 125px;
    height: 40px;
  }

  .s04-catalog-a__btn span {
    color: #eeeeee;
  }

  /* ------------------------------------------------------------------ */
  /* 06-campaign-footer — campaign info block + page footer             */
  /* ------------------------------------------------------------------ */

  .s06-campaign-footer {
    width: 100%;
    margin-top: 270px;
  }

  .s06-campaign-footer__inner {
    width: 100%;
    max-width: 375px;
    box-sizing: border-box;
  }

  .s06-campaign-footer__campaign {
    width: 315px;
    gap: 51px;
  }

  .s06-campaign-footer__panel {
    width: 315px;
    padding: 60px 30px;
  }

  .s06-campaign-footer__panel--info {
    gap: 32px;
  }

  .s06-campaign-footer__panel--novelty {
    gap: 24px;
  }

  .s06-campaign-footer__chip {
    width: 180px;
    height: 40px;
  }

  /* Info panel (受注期間 / store list) ------------------------------- */

  .s06-campaign-footer__info-top {
    gap: 32px;
    width: 255px;
  }

  .s06-campaign-footer__info-text {
    width: 255px;
    font-size: 12px;
  }

  /* PC lays the 9 store chips out as two explicit fixed rows; SP wraps
     them 2-per-row via flex-wrap (334→255px content width fits exactly
     2×124px chips + 6px gap per row). */
  .s06-campaign-footer__stores {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: 255px;
  }

  .s06-campaign-footer__store-row {
    display: contents;
  }

  .s06-campaign-footer__store {
    width: 124px;
  }

  /* .s06-campaign-footer__store--tight keeps its PC font-size/tracking
     ratio (12px / -0.03em) — identical on SP. */

  /* Novelty panel (Ground Y x Taro Okamoto postcard) ------------------ */
  /* PC order: image, title, desc/note/cta (image first, side-by-side with
     copy). SP order: title, image, desc, note, cta (stacked, title first).
     Achieved without changing markup by flattening .novelty-copy via
     display:contents and reordering its former children with flex `order`
     inside .novelty-row. */

  .s06-campaign-footer__novelty-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .s06-campaign-footer__novelty-image {
    order: 2;
  }

  .s06-campaign-footer__novelty-copy {
    display: contents;
  }

  .s06-campaign-footer__novelty-title {
    order: 1;
    align-items: center;
    text-align: center;
    width: 255px;
  }

  .s06-campaign-footer__novelty-body {
    order: 3;
    /* base row gap (24px) + 8px = 32px between the image and the desc
       paragraph that follows it, matching Figma's asymmetric gap */
    margin-top: 8px;
    gap: 28px;
    width: 255px;
  }

  .s06-campaign-footer__novelty-desc {
    margin: 0;
    width: 255px;
  }

  .s06-campaign-footer__novelty-note {
    width: 255px;
    /* PCの margin-top:-24px(body gap40px→desc→note16pxに詰める補正)を
       SPでは打ち消す。SPは body gap:28px のままにして desc→note=28px
       (Figma node 2636-2550: desc y0/h70, note y98 → gap28px)に合わせる。
       -24pxが残っていると28-24=4pxになりnoteがdescに貼り付いていた
       (2026-07-07 SPのみ修正) */
    margin-top: 0;
  }

  .s06-campaign-footer__cta {
    width: 124px;
    /* Figma SP(node 2636-2550/2388-2717): desc/noteは左寄せ255px幅のまま、
       CTA(124x48白ボタン・中央テキスト・下線なし)だけを255px列の中で
       水平センターに置く。body は flex column なので align-self:center で
       このボタンだけ中央寄せ(desc/noteは255px=全幅なので影響なし、
       2026-07-07 SPのみ) */
    align-self: center;
  }

  /* Profile panel (Taro Okamoto bio) ----------------------------------- */
  /* PC lays name-block + bio side-by-side; SP stacks them. */

  .s06-campaign-footer__profile-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .s06-campaign-footer__profile-name {
    width: 100%;
  }

  .s06-campaign-footer__profile-bio {
    width: 237px;
  }

  /* ---------------------------------------------------------------- */
  /* Footer (share / logo / copyright)                                 */
  /* ---------------------------------------------------------------- */

  .s06-campaign-footer__footer {
    width: 100%;
    gap: 0;
    /* distance from bottom of the profile panel to the top of the share
       block, per Figma frame coordinates */
    margin-top: 103px;
  }

  /* PC absolutely-positions the label + icon inside a fixed 203.5x105 box;
     SP uses a simple centered flex column (label above the icon). */
  .s06-campaign-footer__share {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: auto;
    height: auto;
    margin-bottom: 60px;
  }

  .s06-campaign-footer__share-label {
    position: static;
    transform: none;
    font-size: 16px;
    letter-spacing: 0.05em;
  }

  .s06-campaign-footer__share-icon {
    position: static;
  }

  .s06-campaign-footer__logo {
    width: 216px;
    height: 143px;
    margin-bottom: 32px;
  }

}

/* ==========================================================================
   category-nav — SP固定カテゴリナビ (Figma node 2388:2629)
   商品エリア(.s04-catalog-a)に入るとフェード表示、スクロールで
   アクティブなカテゴリのラベルをハイライト。クリックで該当セクションへ。
   ========================================================================== */

.category-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  background: #1c1c1c;
  padding: 26px 16px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.category-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.category-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-nav__item a {
  display: block;
  color: #a9a9a9;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.category-nav__item.is-active a {
  color: #ffffff;
}

/* to-top(SP)は画面下部・左右中央にposition:fixedで固定する。
   表示はキャラ(.s04-catalog-a__bgnon)がis-final(ゆらゆら開始)になった
   瞬間にJSが付ける.is-visibleで初めてフェードイン+クリック可能になる
   (それまではbase側のopacity:0/pointer-events:noneのまま=押せない)。
   キャラ直下追従(position:absolute)からfixed固定へ変更(2026-07-06) */
@media (max-width: 919px) {
  .to-top {
    position: fixed;
    right: auto;
    left: 50%;
    bottom: 86px;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   s04-catalog-a__bgnon — 固定背景キャラ (Figma 2564:850 / 2564:851)
   .s04-bgnon-scope が s04-catalog-a〜s06-campaign-footer をまたいでラップ。
   bgnonは常時position:absoluteで、topはJSが毎スクロールフレーム連続
   計算する(sticky追従位置↔最終静止位置を最下部手前900pxからprogressで
   線形補間) — position自体の切替(sticky→absolute)はCSSで補間できず
   スナップの原因になるため使わない。opacity/幅も同じprogressで補間。
   ========================================================================== */

.s04-bgnon-scope {
  position: relative;
  /* 予約領域は.s04-bgnon-tail(次の兄弟要素)に持たせる — scope自身に
     padding-bottomを持たせると、scopeの下端(bottom)が予約領域の分だけ
     常にページ末尾と一致してしまい、「scopeを完全に通り過ぎてから」の
     判定が構造上絶対に成立しなくなるため(scope.bottom = maxScroll + vh
     が恒等式になる)。tail側に持たせることで、scopeの下端は本文の自然な
     終わり(footer末尾)になり、それより後ろに予約領域ぶんスクロール
     できる余地が生まれる。bgnon自体はscope基準のposition:absoluteの
     ままでよい(tailの高さ分だけscopeの外へ視覚的にはみ出して描画される
     — 祖先にoverflow:hidden/clipが無いため問題なく表示できる) */
}

.s04-bgnon-tail {
  /* footer末尾からの144pxギャップ + キャラ実寸(707px)分の余白。
     --bgnon-space はJSで実測したimg高さ+144pxに更新される
     (キャラがfooterの下に完全に収まりスクロールで見えるようにする) */
  height: var(--bgnon-space, 851px);
}

.s04-catalog-a__bgnon {
  /* topはJSが連続計算するため常にposition:absolute。sticky時の
     位置(頭が#appliqueの最初の商品カードと同じ高さ)もJS側で
     15vh + header高さとして計算している */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}

.s04-catalog-a__bgnon-img {
  position: absolute;
  /* 左右は.s04-catalog-a__innerと同じ中央基準(.s04-catalog-aのflex中央)に揃える */
  left: 50%;
  /* .bgnonのtopがJSで連続計算した「頭の位置」になるため、imgは常に
     top基準(下方向に伸びる)で統一 */
  top: 0;
  width: 60vw;
  max-width: 1264px;
  opacity: 0;
  mix-blend-mode: multiply;
  transform: translate(-50%, 0) scale(1) rotate(0deg);
  /* opacity/width/.bgnonのtopは全てJSがスクロール位置に応じて毎フレーム
     inline styleで連続補間するため、transitionを付けない(付けるとJSの
     更新にラグをつけて反発するように動いてしまう=遅れて追従する) */
}

.s04-catalog-a__bgnon.is-final .s04-catalog-a__bgnon-img {
  /* Figma 2564:851 (黒ノン_白ボディ42 6_動くNON) の実寸600px。
     sticky時の60vw/1064pxは背景ウォーターマーク用の大きさで、
     最終状態はそれよりずっと小さい固定サイズに切り替える
     (幅自体はJSがprogressで補間済みなのでここはanimation発火用)。
     0°→5°の導入(一度きり、0.4s)の後、5°↔-5°の無限往復(1.6s/往復)に
     delay:0.4sでバトンタッチする。導入がforwardsで5°に着地した瞬間、
     無限側の0%(5deg)から始まるので継ぎ目なく連続する */
  animation:
    s04-bgnon-sway-in 0.4s ease-out forwards,
    s04-bgnon-sway 1.6s ease-in-out 0.4s infinite;
}

/* 0°→5°の一度きりの導入。角度の変化量(5°)が本振動の半往復(10°)の半分
   なので、同じ角速度になるよう本振動の半周期(0.8s)の半分(0.4s)にしている */
@keyframes s04-bgnon-sway-in {
  from {
    transform: translate(-50%, 0) rotate(0deg);
  }
  to {
    transform: translate(-50%, 0) rotate(5deg);
  }
}

/* s03-tower-swayと同じ「2点を均等往復」パターン。0°を経由する3点
   (0/25/75/100%)の非対称な間隔だと各キーフレームでease-in-outが
   毎回減速→再加速しカクついて見えるため、2値のみで滑らかに往復させる。
   導入アニメ(s04-bgnon-sway-in)がdelay分だけ先に0°→5°を再生するので、
   こちらは常に5°から始まる無限往復のみを担当する */
@keyframes s04-bgnon-sway {
  0%,
  100% {
    transform: translate(-50%, 0) rotate(5deg);
  }
  50% {
    transform: translate(-50%, 0) rotate(-5deg);
  }
}

@media (max-width: 919px) {
  .s04-catalog-a__bgnon-img {
    width: 85vw;
  }
}