@charset "UTF-8";

/* ============================================================
   Peacockbluee — トップページ
   色・タイポの基準はすべてこの :root に集約
   ============================================================ */

:root {
  /* ブランドカラー */
  --peacock-deep: #0A3D47;  /* ダブルトーンの暗部・KV 背景 */
  --peacock:      #0E6E7E;  /* ブランドカラー */
  --mint:         #CFE7E1;  /* ダブルトーンの明部 */
  --marigold:     #F2A93B;  /* キャッチコピー */
  --paper:        #F3F6F4;
  --ink:          #0C1F24;

  /* Indian Spice のアクセント（有機的な色面・装飾に使う） */
  --chili:    #E24C56;
  --magenta:  #B05496;
  --leaf:     #56945C;
  --saffron:  #F07E3C;
  --violet:   #6254A8;
  --rose:     #E8788C;
  --cream:    #FBF6EC;   /* Kawaii 側のやわらかい地色 */

  /* 面の色（ダークモードで入れ替える） */
  --bg:   var(--cream);
  --fg:   var(--ink);
  --card: #FFFFFF;
  --rule: color-mix(in srgb, var(--peacock) 18%, transparent);

  /* 余白スケール（多めの余白＝世界観優先。節ごとに大きく空ける） */
  --pad-x:      clamp(20px, 5.5vw, 88px);
  --gap-block:  clamp(72px, 13vw, 200px);   /* 節と節のあいだ */
  --gap-inner:  clamp(28px, 5vw, 72px);     /* 節の中 */

  --font-en:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-ja:    "Zen Kaku Gothic New", system-ui, sans-serif;
  /* 手書き：実素材が届いたら差し替える。ここ1か所で効く */
  --font-hand:  "Caveat", "Zen Kaku Gothic New", cursive;

  /* セーフエリア（iPhone のノッチ・ホームバー） */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ダークモード：OS 設定に追従。data-theme で明示指定も可能 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:    #131A22;
    --fg:    #F2ECE0;
    --card:  #1C2630;
    --cream: #131A22;
    --rule:  color-mix(in srgb, var(--mint) 22%, transparent);
  }
}
:root[data-theme="dark"] {
  --bg:    #131A22;
  --fg:    #F2ECE0;
  --card:  #1C2630;
  --cream: #131A22;
  --rule:  color-mix(in srgb, var(--mint) 22%, transparent);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* hidden 属性は、どの display 指定よりも優先して消す */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ja);
  line-height: 1.8;                 /* 本文の行間 */
  text-spacing-trim: trim-start;    /* 行頭の約物アキを詰める */
  text-autospace: normal;           /* 和欧間の自動アキ */
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2 {
  font-feature-settings: "palt" 1;  /* 見出しは詰め組み */
  word-break: auto-phrase;          /* 文節で折る */
  text-wrap: pretty;
  line-height: 1.25;
  margin: 0;
}
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }


/* 共通：節の見出し */
.sec-title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 68px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.sec-title--center { text-align: center; }

/* 手書きの見出し（実素材の PNG） */
.sec-title--img { margin: 0; line-height: 0; }
.sec-title--img img { width: min(46vw, 380px); height: auto; }
.sec-title--img.sec-title--center { display: grid; justify-items: center; }
@media (max-width: 750px) {
  .sec-title--img img { width: min(66vw, 300px); }
}

/* 手書き（実素材が届いたら --font-hand を差し替える） */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  line-height: 1.25;
}

/* 節のリズム。余白は多めに取る */
main > section { padding-block: var(--gap-block); }

/* ============================================================
   1. ファーストビュー
   余白多め。売り込まず、世界観だけを置く
   ============================================================ */
/* FV を貼り付けておく舞台。ここの高さぶんスクロールすると紙がめくれる */
.fv-stage {
  position: relative;
  height: 200svh;            /* 1画面見せて、もう1画面ぶんでめくる */
  z-index: 1;
  /* 紙の透けた部分から About が見えるよう、stage 自体は透明 */
  pointer-events: none;
}
.fv-stage .fv { pointer-events: auto; }
.fv {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;               /* About の上に重ねる */
}

/* 紙。写真そのものは動かさず、clip-path の下辺だけを斜めに上げていく。
   --cut は「左端の切り取り位置」、--cut2 は「右端の切り取り位置」（%）。
   ふたつに差をつけることで斜めの線になる。 */
.fv__paper {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--cut2, 100%),
    0 var(--cut, 100%)
  );
  will-change: clip-path;
}
.fv__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* 文字を読ませるための薄い膜。下ほど濃い */
.fv__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--peacock-deep) 28%, transparent) 0%,
      transparent 32%,
      color-mix(in srgb, var(--peacock-deep) 42%, transparent) 72%,
      color-mix(in srgb, var(--peacock-deep) 82%, transparent) 100%);
  pointer-events: none;
}

/* --- 装飾（宮殿アーチ・孔雀・花） --- */
.fv__deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.fv__deco--arch {
  inset: auto auto -4% 50%;
  translate: -50% 0;
  width: min(46vw, 460px);
  opacity: .30;
}
.fv__deco--peacock {
  inset: calc(3vh + var(--safe-t)) calc(-4vw + var(--safe-r)) auto auto;
  width: min(38vw, 420px);
  opacity: .58;
  rotate: 8deg;
}
.fv__deco--flower {
  inset: auto auto 16% calc(3vw + var(--safe-l));
  width: min(16vw, 150px);
  opacity: .70;
}

/* --- 文字 --- */
.fv__text {
  position: absolute;
  inset: auto auto calc(9vh + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));
  z-index: 3;
  pointer-events: none;
  /* 紙と一緒に消えるよう、JS が --fade を書き換える */
  opacity: var(--fade, 1);
}
.fv__logo {
  overflow: hidden;            /* 枠。中身だけを動かす */
  margin: 0 0 .5em;
  line-height: 0;
}
.fv__logo-inner { display: block; will-change: transform, opacity; }
/* ロゴは手書きの実素材。白地の紺ロゴなので、暗い背景では白く反転させる */
.fv__logo img {
  width: min(52vw, 520px);
  height: auto;
  filter: brightness(0) invert(1);
}

.fv__catch {
  overflow: hidden;
  margin: 0;
  line-height: 0;
}
.fv__catch-inner { display: block; will-change: transform; }
/* 手書きコピーも実素材。マリーゴールド色に着色して載せる */
.fv__catch img {
  width: min(34vw, 340px);
  height: auto;
  filter: brightness(0) saturate(100%)
          invert(72%) sepia(52%) saturate(900%) hue-rotate(340deg) brightness(102%);
}

.fv__scroll {
  position: absolute;
  inset: auto calc(var(--pad-x) + var(--safe-r)) calc(4vh + var(--safe-b)) auto;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  writing-mode: vertical-rl;
}
.fv__scroll::after {
  content: ""; display: block;
  width: 1px; height: 46px;
  margin: 10px auto 0;
  background: currentColor;
  opacity: .5;
}

/* --- イントロの初期状態 --- */
.is-pending .fv__logo-inner  { opacity: 0; }
.is-pending .fv__catch-inner { transform: translateY(105%); }
.is-complete .fv__logo-inner  { opacity: 1; }
.is-complete .fv__catch-inner { transform: none; }

/* 重ねカード：canvas と文字の間 */
.fv__cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cards { position: absolute; inset: 0; }
.card {
  position: absolute;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center;
  /* 枠線は付けない */
  will-change: transform, opacity;
}
/* 奥の2枚は明るく寄せる（暗くするとはみ出しが枠線に見えるため） */
.card--back { filter: brightness(1.08) saturate(.6) hue-rotate(-8deg); }

/* 3連の固定カード（とらわらの虎）。
   虎は透過PNGなので、生成りの板に中央置きで載せる。
   参考の3連と同じく「同じ絵が少しずつずれて重なる」見え方にする */
.card--fixed {
  /* 板は敷かない。虎は透過PNGなので、そのまま写真の上に浮かせる */
  background-repeat: no-repeat;
  background-position: center;
  /* 写真に沈まないよう、やわらかい影だけ付ける */
  filter: drop-shadow(0 14px 22px color-mix(in srgb, #0A3D47 38%, transparent));
}

/* SP：ロゴ縦組み・左端いっぱい、キャッチは右下 */
@media (max-width: 750px) {
  .fv__text { inset: auto auto calc(7vh + var(--safe-b)) calc(var(--pad-x) + var(--safe-l)); }
  /* SP：ロゴ画像は縦組みにできないので、下部に大きく置く */
  .fv__logo { margin-bottom: .6em; }
  .fv__logo img { width: min(78vw, 420px); }
  .fv__catch img { width: min(62vw, 300px); }
  .fv__scroll { display: none; }
  .card { width: 44vw !important; }
  /* 虎の3連は SP でも小さめに（ぽん・ぽん・ぽんと離して置くため） */
  .card--fixed { width: 27vw !important; }
}

/* ============================================================
   1.5 About Peacockbluee — サンアドの book を再現
   全要素を grid の同じセル(1/1)に重ね、margin で位置決めする。
   座標はサンアドの実測（1440 幅基準）を % に換算
   ============================================================ */
.about {
  position: relative;
  /* 紙がめくれている間に下から見えるよう stage に食い込ませる */
  margin-top: -100svh;
  padding-top: calc(100svh * .18);   /* 切り取り線の直下に見出しが来る量 */
  padding-bottom: var(--gap-block);
  z-index: 0;

  /* book と同じ：1セルの grid に全部重ねる */
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, 1440px);
  margin-inline: auto;
  min-height: 62vw;              /* サンアドは 895px / 1440 */
  overflow: hidden;
}
.about > * { grid-area: 1 / 1; place-self: start; margin: 0; }

/* ① 見出し。サンアド：margin 106px 80px、下線付き */
.about__title {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 7.4vw;
  margin-left: 5.6vw;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 50px);
  line-height: 1.4;
  color: var(--peacock);
}
.about__title span {
  text-decoration-line: underline;
  text-decoration-thickness: .05em;
  text-underline-offset: .14em;
}


/* ③ 写真。サンアド：700×438、margin 257px 740px */
.about__visual {
  z-index: 1;
  width: 48.6vw;
  max-width: 700px;
  aspect-ratio: 700 / 438;
  margin-top: 17.8vw;
  margin-left: 51.4vw;
  overflow: hidden;
}
.about__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ④ 本文。サンアド：width 474、margin 350px 190px */
.about__description {
  z-index: 2;
  width: clamp(260px, 33vw, 474px);
  margin-top: 24.3vw;
  margin-left: 13.2vw;
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 2;
  font-weight: 400;
}
.about__description .pc { display: initial; }

/* ⑤ 3段重ねの文字。サンアド：768×266、margin 629px 71px
   3枚を上下にずらして重ね、色を3色で変える */
.about__drive {
  z-index: 2;
  position: relative;
  width: 53.3vw;
  max-width: 768px;
  aspect-ratio: 768 / 266;
  margin-top: 43.7vw;
  margin-left: 4.9vw;
}
.about__drive-item {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  will-change: transform, opacity;
  /* マウス追従の歪み。JS が --mouse-skew を書く */
  transform: skewX(var(--mouse-skew, 0deg));
  transform-origin: center bottom;
  transition: transform .18s ease-out;
}
.about__drive-item img { display: block; width: 100%; height: auto; }
/* サンアド：cyan は上、blue は少し小さく右下、yellow は下 */
.about__drive-item--1 { top: 0;    width: 100%; }
.about__drive-item--2 { top: 30%;  width: 71%; left: 7%; }
.about__drive-item--3 { top: 60%;  width: 100%; }

/* 色：透過PNGの黒インクを3色に着色（サンアドの --color-1/2/3 相当） */
.about__drive-item--1 img { filter: brightness(0) saturate(100%) invert(31%) sepia(48%) saturate(700%)  hue-rotate(155deg); }   /* 孔雀 */
.about__drive-item--2 img { filter: brightness(0) saturate(100%) invert(72%) sepia(52%) saturate(900%)  hue-rotate(340deg); }   /* マリーゴールド */
.about__drive-item--3 img { filter: brightness(0) saturate(100%) invert(38%) sepia(70%) saturate(1500%) hue-rotate(335deg); }   /* チリ */

/* --- 入場（サンアドの [data-anim] → _in） ---
   待機：skew ±20deg + 左右へ 45px ずれ + 透明。
   _in：skew 0 / ずれ 0 / 不透明。3枚が 0.9s ずつ遅れて入る */
.about__drive[data-anim] .about__drive-item {
  opacity: 0;
  transform: translateX(var(--drive-tx, -45px)) skewX(var(--drive-skew, 20deg));
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
}
.about__drive[data-anim] .about__drive-item--2 { --drive-tx: 45px; --drive-skew: -20deg; transition-delay: .45s; }
.about__drive[data-anim] .about__drive-item--3 { transition-delay: .9s; }
.about__drive[data-anim]._in .about__drive-item {
  opacity: 1;
  transform: translateX(0) skewX(var(--mouse-skew, 0deg));
}

/* --- 入ったあと、色が 1.8s ごとに3枚で回る（サンアドの book-drive-fill-rotation, step-end） --- */
.about__drive._in .about__drive-item--1 img { animation: about-drive-rot-1 1.8s step-end infinite; }
.about__drive._in .about__drive-item--2 img { animation: about-drive-rot-2 1.8s step-end infinite; }
.about__drive._in .about__drive-item--3 img { animation: about-drive-rot-3 1.8s step-end infinite; }
/* 3色を順に回す。--c1/2/3 は各段の色。filter は上と同じ3種 */
@keyframes about-drive-rot-1 {
  0%, 33.33%    { filter: brightness(0) saturate(100%) invert(31%) sepia(48%) saturate(700%)  hue-rotate(155deg); }
  33.34%, 66.66%{ filter: brightness(0) saturate(100%) invert(72%) sepia(52%) saturate(900%)  hue-rotate(340deg); }
  66.67%, 100%  { filter: brightness(0) saturate(100%) invert(38%) sepia(70%) saturate(1500%) hue-rotate(335deg); }
}
@keyframes about-drive-rot-2 {
  0%, 33.33%    { filter: brightness(0) saturate(100%) invert(72%) sepia(52%) saturate(900%)  hue-rotate(340deg); }
  33.34%, 66.66%{ filter: brightness(0) saturate(100%) invert(38%) sepia(70%) saturate(1500%) hue-rotate(335deg); }
  66.67%, 100%  { filter: brightness(0) saturate(100%) invert(31%) sepia(48%) saturate(700%)  hue-rotate(155deg); }
}
@keyframes about-drive-rot-3 {
  0%, 33.33%    { filter: brightness(0) saturate(100%) invert(38%) sepia(70%) saturate(1500%) hue-rotate(335deg); }
  33.34%, 66.66%{ filter: brightness(0) saturate(100%) invert(31%) sepia(48%) saturate(700%)  hue-rotate(155deg); }
  66.67%, 100%  { filter: brightness(0) saturate(100%) invert(72%) sepia(52%) saturate(900%)  hue-rotate(340deg); }
}

/* --- SP：重ねをやめて縦に流す --- */
@media (max-width: 750px) {
  .about { display: block; min-height: 0; padding-inline: var(--pad-x); }
  .about > * { margin: 0 0 clamp(20px, 5vw, 32px) !important; width: auto !important; max-width: none; }
  .about__title { font-size: clamp(22px, 6.4vw, 30px); }
  .about__visual { width: 100% !important; aspect-ratio: 4 / 3; }
  .about__description .pc { display: none; }
  .about__drive { width: 100% !important; aspect-ratio: 768 / 266; }
}

/* ============================================================
   2. Carry Joy — 参考サイトの「祭り」を再現
   中心の手書き文字を軸に、商品が放射状に飛び出す
   ============================================================ */
.joy {
  position: relative;
  padding: 0;                 /* 帯を上下ぴったりに付けるので節の余白は消す */
  overflow: hidden;
}

/* --- 孔雀色の帯。白い手書き文字が流れる --- */
.marquee {
  width: 100%;
  overflow: hidden;
  background: var(--peacock);
  padding-block: clamp(6px, .8vw, 12px);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: max-content;
  animation: marquee 28s linear infinite;
}
/* 下の帯は逆向きに流す（参考も上下で逆） */
.marquee--bottom .marquee__track { animation-direction: reverse; }
.marquee__track img {
  height: clamp(44px, 6.4vw, 86px);
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);   /* 緑インク → 白 */
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 舞台 --- */
.joy__stage {
  position: relative;
  aspect-ratio: 1440 / 960;        /* 商品を大きくしたぶん、縦は少し詰める */
  min-height: 70svh;
  width: 100%;
  /* 3D を効かせる */
  perspective: 850px;
}
/* 中心の手書き。動かない軸 */
.joy__core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(62%, 780px);
  margin: 0;
  line-height: 0;
  z-index: 5;
}
.joy__core img { width: 100%; height: auto; }

/* --- 飛び出すもの --- */
.joy__burst {
  position: absolute;
  /* 本来の位置。JS が data-x/y から left/top を決め、幅は data-w */
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 3;
  filter: drop-shadow(0 16px 26px color-mix(in srgb, var(--peacock) 22%, transparent));
  will-change: transform, opacity;
}
.joy__burst--sub { line-height: 0; z-index: 4; }
/* ホバーでぴょんと跳ねて、少し大きく */
.joy__burst:hover {
  animation-play-state: paused;
  transform: translate(-50%, -50%) translateY(-22px) rotate(calc(var(--ftilt, 0deg) * 1.6)) scale(1.12) !important;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 6;
}
.joy__burst--sub img { width: 100%; height: auto; }
.joy__burst--deco { z-index: 2; }

/* 特徴のタグ（サンアドの party__label 相当）。3つの形で散らし、自分のバッグの角に貼る */
.joy__tag {
  width: max-content !important;      /* JS が data-w で幅を書くが、文字は折らない */
  white-space: nowrap;
  display: grid;
  gap: .12em;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 24px);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--c, var(--peacock));
  filter: none;
  z-index: 4;
  cursor: default;
  transition: scale .35s cubic-bezier(.34,1.56,.64,1), rotate .35s ease;
}
/* 日本語の一言（もらった文言）。英語の下に小さく */
.joy__tag small {
  display: block;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: .5em;
  letter-spacing: .02em;
  opacity: .82;
}
/* ① ピル：縁取り */
.joy__tag--pill {
  padding: .3em .7em .34em;
  background: var(--cream);
  border: 2px solid currentColor;
  border-radius: 999px;
}
/* ② マーカー：下線だけ。手書きの文字に一番近い */
.joy__tag--marker {
  padding: .1em .15em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c) 32%, transparent) 58%);
}
.joy__tag--marker small { opacity: 1; }
/* ③ スタンプ：塗り。文字はクリーム */
.joy__tag--stamp {
  padding: .34em .75em .38em;
  background: var(--c);
  color: var(--cream);
  border-radius: 4px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 20%, transparent);
}
.joy__tag--stamp small { opacity: .9; }

/* ホバーで対が反応：タグは跳ねて水平に、バッグは浮く */
.joy__tag.is-hot { scale: 1.12; rotate: calc(var(--r, 0deg) * -1); z-index: 6; }
.joy__burst[data-name].is-hot {
  animation-play-state: paused;
  transform: translate(-50%, -50%) translateY(-14px) rotate(calc(var(--ftilt, 0deg) * 1.4)) scale(1.06) !important;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 5;
}

@media (max-width: 750px) {
  .joy__tag { font-size: 12px; }
  .joy__tag small { display: none; }        /* SP は狭いので英語だけ */
  .joy__tag--pill  { padding: .25em .5em; border-width: 1.5px; }
  .joy__tag--stamp { padding: .28em .55em; box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 20%, transparent); }
}

/* 待機：中心へ畳み込む（参考の _party-burst-ready）
   --bx/--by/--bz/--brx/--bry/--bang は JS が各アイテムに書く */
.joy__stage.is-ready .joy__burst {
  opacity: 0;
  transform: translate(-50%, -50%)
             translate3d(var(--bx, 0px), var(--by, 0px), var(--bz, -280px))
             rotateX(var(--brx, -12deg)) rotateY(var(--bry, 0deg)) rotateZ(var(--bang, 0deg))
             scale(.6);
}
/* 発火：本来位置へ（参考の _party-burst-visible + party-burst-launch）
   着地したら、そのまま「ふわふわ揺れ続ける」アニメへ引き継ぐ。
   --ftilt は着地後の傾き、--fdur は揺れの周期。JS が1つずつ変える */
.joy__stage.is-ready .joy__burst.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(var(--ftilt, 0deg)) scale(1);
  animation:
    joy-burst-launch .8s var(--bdelay, 0s) both,
    joy-float var(--fdur, 4s) calc(var(--bdelay, 0s) + .85s) ease-in-out infinite;
}
/* --- タグは放射に混ざらず、バッグが着地した「その場」で ぽんっ と出る ---
   待機：scale(0)。発火：--bdelay（バッグの着地後＋順番）で吹き出しのように弾んで出る。
   出た後はバッグと同じ周期・同じ位相で浮く（--fdur / --fdelay をバッグから継ぐ） */
.joy__stage.is-ready .joy__tag {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(var(--r, 0deg));
  animation: none;
}
.joy__stage.is-ready .joy__tag.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg));
  animation:
    joy-tag-pop .46s cubic-bezier(.34, 1.56, .64, 1) var(--bdelay, 0s) both,
    joy-tag-float var(--fdur, 4s) var(--fdelay, 0s) ease-in-out infinite;
}
@keyframes joy-tag-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0)    rotate(calc(var(--r, 0deg) - 18deg)); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.22) rotate(calc(var(--r, 0deg) + 6deg)); }
  78%  {             transform: translate(-50%, -50%) scale(.94)  rotate(var(--r, 0deg)); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(var(--r, 0deg)); }
}
/* タグの浮き。傾きは固定（バッグのように振らない）、上下だけバッグと同じ周期 */
@keyframes joy-tag-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0)    rotate(var(--r, 0deg)); }
  50%      { transform: translate(-50%, -50%) translateY(-14px) rotate(var(--r, 0deg)); }
}

/* 着地後のふわふわ。上下に揺れながら、傾きも行ったり来たり */
@keyframes joy-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0)    rotate(var(--ftilt, 0deg)); }
  50%      { transform: translate(-50%, -50%) translateY(-14px) rotate(calc(var(--ftilt, 0deg) * -1)); }
}
/* サンアド実測の時系列（フレーム単位、800ms で収束）をそのまま keyframe に。
   17点。距離は待機ベクトル(--bx/--by)への係数で、負の値＝本来位置を通り越す。
   回転は待機角(--bang)への係数で、負＝逆側へ振れる。
   前の定義値（58%で6px通り越し）より、実際は 450ms で 8%（約36px）通り越している */
@keyframes joy-burst-launch {
  0.00% { opacity: 0.05; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 1.000), calc(var(--by) * 1.000), calc(var(--bz) * 1.000)) rotateZ(calc(var(--bang) * 1.000)) scale(0.715); }
  6.25% { opacity: 0.23; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.760), calc(var(--by) * 0.760), calc(var(--bz) * 0.760)) rotateZ(calc(var(--bang) * 0.800)) scale(0.779); }
  12.50% { opacity: 0.45; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.545), calc(var(--by) * 0.545), calc(var(--bz) * 0.545)) rotateZ(calc(var(--bang) * 0.535)) scale(0.86); }
  18.75% { opacity: 0.64; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.360), calc(var(--by) * 0.360), calc(var(--bz) * 0.360)) rotateZ(calc(var(--bang) * 0.311)) scale(0.923); }
  25.00% { opacity: 0.77; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.215), calc(var(--by) * 0.215), calc(var(--bz) * 0.215)) rotateZ(calc(var(--bang) * 0.147)) scale(0.967); }
  31.25% { opacity: 0.87; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.115), calc(var(--by) * 0.115), calc(var(--bz) * 0.115)) rotateZ(calc(var(--bang) * 0.033)) scale(0.997); }
  37.50% { opacity: 0.93; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.030), calc(var(--by) * 0.030), calc(var(--bz) * 0.030)) rotateZ(calc(var(--bang) * -0.046)) scale(1.017); }
  43.75% { opacity: 0.97; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.040), calc(var(--by) * -0.040), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * -0.097)) scale(1.03); }
  50.00% { opacity: 0.99; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.070), calc(var(--by) * -0.070), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * -0.125)) scale(1.037); }
  56.25% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.078), calc(var(--by) * -0.078), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * -0.136)) scale(1.04); }
  62.50% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.045), calc(var(--by) * -0.045), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * -0.076)) scale(1.016); }
  68.75% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.010), calc(var(--by) * -0.010), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * -0.016)) scale(0.992); }
  75.00% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.010), calc(var(--by) * 0.010), calc(var(--bz) * 0.010)) rotateZ(calc(var(--bang) * -0.001)) scale(0.985); }
  81.25% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.002), calc(var(--by) * 0.002), calc(var(--bz) * 0.002)) rotateZ(calc(var(--bang) * 0.000)) scale(0.997); }
  87.50% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.006), calc(var(--by) * -0.006), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * 0.000)) scale(1.007); }
  93.75% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * -0.004), calc(var(--by) * -0.004), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * 0.000)) scale(1.005); }
  100.00% { opacity: 1.0; transform: translate(-50%, -50%) translate3d(calc(var(--bx) * 0.000), calc(var(--by) * 0.000), calc(var(--bz) * 0.000)) rotateZ(calc(var(--bang) * 0.000)) scale(1.0); }
}
/* 各点の間は linear で補間（実測点が密なので、点そのものがカーブになる） */
.joy__stage.is-ready .joy__burst.is-visible:not(.joy__tag) { animation-timing-function: linear; }

@media (max-width: 750px) {
  .joy__stage { aspect-ratio: 3 / 4; max-height: none; }
  .joy__core  { width: 86%; }
  /* SP は横が狭いので、中段（pouch / quilting）が中央の文字と同じ高さにならないよう
     data-y を CSS で上書きして上下に逃がす。data-w も少し絞る */
  .joy__burst[src*="pouch"]    { left: 88% !important; top: 32% !important; width: 24% !important; }   /* PC で 90% に寄せたぶん SP は戻す */
  .joy__burst[src*="quilting"] { left: 18% !important; top: 70% !important; width: 26% !important; }   /* PC の x=9 を引き継ぐと画面外に出る */
  .joy__burst--sub { top: 84% !important; }   /* PC で 86 に下げたぶん SP は戻す */
  /* SP のタグは3段の帯に並べ直す（幅が狭く、PC の位置では文字やバッグに当たる） */
  .joy__tag:nth-of-type(1) { left: 36% !important; top: 30% !important; }   /* Block Print */
  .joy__tag:nth-of-type(2) { left: 64% !important; top: 30% !important; }   /* Colorful */
  .joy__tag:nth-of-type(3) { left: 60% !important; top: 38% !important; }   /* One of a Kind */
  .joy__tag:nth-of-type(4) { left: 14% !important; top: 38% !important; }   /* Handmade */
  .joy__tag:nth-of-type(5) { left: 46% !important; top: 64% !important; }   /* Reversible：quilting の右へ */
  .joy__tag:nth-of-type(6) { left: 72% !important; top: 64% !important; }   /* Light Weight */
}

/* ============================================================
   3. Our Product — 参考サイトの人物ギャラリーを商品で再現
   3列固定グリッド。1枚ごとに手置き（参考も51枚すべて個別ルール）
   ============================================================ */
.prod { padding-inline: var(--pad-x); }
.prod__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(48px, 8vw, 120px);
}

/* 参考は 480px × 3列、行 439px、隙間なし。ここでは幅に応じて縮む */
.prod__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 480px));
  justify-content: center;
  gap: 0;
}
/* セルの高さは幅から決める（参考の 480:439） */
.prod__item {
  position: relative;
  aspect-ratio: 480 / 439;
}
.prod__link {
  position: absolute; inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  /* button のリセット */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  width: 100%; height: 100%;
}
.prod__link:focus-visible { outline: 2px solid var(--peacock); outline-offset: 4px; }

/* --- 要素はすべて絶対配置。座標は各カードの CSS 変数で与える --- */
.prod__main, .prod__small, .prod__name, .prod__copy {
  position: absolute;
  margin: 0;
}
/* 座標は「セル幅に対する%」で持つ（参考は 480px 基準の px） */
.prod__main  { left: var(--main-x); top: var(--main-y); width: var(--main-w); height: var(--main-h); z-index: 2; }
.prod__small { left: var(--small-x); top: var(--small-y); width: var(--small-w); z-index: 1; }
.prod__name  { left: var(--name-x); top: var(--name-y); z-index: 3; }
.prod__copy  { left: var(--copy-x); top: var(--copy-y); width: var(--copy-w); z-index: 3; }

/* --- 主写真：SVG。角の polygon は JS が呼吸させる --- */
.prod__tilt {
  display: block;
  width: 100%; height: 100%;
  /* 参考と同じ。JS が --rx / --ry を書き換え、is-tilting で効く */
  --rx: 0deg; --ry: 0deg;
  transform-style: preserve-3d;
  transition: transform .35s ease-out;
}
.prod__tilt.is-tilting {
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .08s linear;
}
.prod__tilt svg { display: block; width: 100%; height: 100%; }
/* 角の三角。参考のシアン → ブランドの孔雀色 */
.prod__corner { fill: var(--peacock); }
/* 切り抜きの後ろの色面。カードごとにスパイスカラーを変える */
.prod__plate { fill: var(--plate, color-mix(in srgb, var(--peacock) 14%, var(--cream))); }
.prod__item[data-slug="torawara"] { --plate: color-mix(in srgb, var(--marigold) 28%, var(--cream)); }
.prod__item[data-slug="flower"]   { --plate: color-mix(in srgb, var(--chili) 18%, var(--cream)); }
.prod__item[data-slug="tote"]     { --plate: color-mix(in srgb, var(--peacock) 16%, var(--cream)); }
.prod__item[data-slug="mini"]     { --plate: color-mix(in srgb, var(--magenta) 18%, var(--cream)); }
.prod__item[data-slug="pouch"]    { --plate: color-mix(in srgb, var(--saffron) 22%, var(--cream)); }
.prod__item[data-slug="quilting"] { --plate: color-mix(in srgb, var(--violet) 16%, var(--cream)); }

/* --- 小さい差し込み写真 --- */
.prod__small img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* 参考は白黒。ここでは少し彩度を落とすだけにして布の色を残す */
  filter: saturate(.55) contrast(1.05);
}

/* --- 名前 --- */
.prod__name {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--peacock);
  white-space: nowrap;
}
.prod__name.is-vertical   { writing-mode: vertical-rl; text-orientation: mixed; }
.prod__name.is-horizontal { writing-mode: horizontal-tb; }

/* --- 引用 --- */
.prod__copy {
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.75;
}
.prod__copy p { margin: 0; }
.prod__copy mark {
  background: var(--marigold);
  color: var(--ink);
  padding: 0 .12em;
}

/* ============================================================
   1枚ごとの配置（参考の実測値を 480×439 基準の % に換算して流用）
   ============================================================ */
/* 0: 縦書きの名前が左下、写真は右寄せ、小写真が下に潜る、引用は左上 */
.prod__item[data-slug="torawara"] {
  --main-x: 24%;  --main-y: 0%;    --main-w: 66%; --main-h: 84%;
  --small-x: 43%; --small-y: 66%;  --small-w: 27%;
  --name-x: 18%;  --name-y: 60%;
  --copy-x: 14%;  --copy-y: 10%;   --copy-w: 70%;
}
/* 1: 横書きの名前が右上、写真は横長で中央、小写真が左、引用なし */
.prod__item[data-slug="flower"] {
  --main-x: 11%;  --main-y: 18%;   --main-w: 75%; --main-h: 58%;
  --small-x: 5%;  --small-y: 26%;  --small-w: 22%;
  --name-x: 48%;  --name-y: 13%;
}
/* 2: 名前は写真の上に大きく、引用は下いっぱい */
.prod__item[data-slug="tote"] {
  --main-x: 10%;  --main-y: 9%;    --main-w: 66%; --main-h: 72%;
  --small-x: 1%;  --small-y: 27%;  --small-w: 31%;
  --name-x: 74%;  --name-y: 10%;
  --copy-x: -2%;  --copy-y: 59%;   --copy-w: 100%;
}
/* 3: 横書きの名前が右上、写真は横長、引用が下 */
.prod__item[data-slug="mini"] {
  --main-x: 20%;  --main-y: 16%;   --main-w: 84%; --main-h: 56%;
  --small-x: 11%; --small-y: 27%;  --small-w: 20%;
  --name-x: 67%;  --name-y: 12%;
  --copy-x: 11%;  --copy-y: 66%;   --copy-w: 100%;
}
/* 4: 写真は中央、小写真が下、引用が上、縦書きの名前が右 */
.prod__item[data-slug="pouch"] {
  --main-x: 24%;  --main-y: 6%;    --main-w: 66%; --main-h: 72%;
  --small-x: 15%; --small-y: 62%;  --small-w: 31%;
  --name-x: 82%;  --name-y: 40%;
  --copy-x: 15%;  --copy-y: 27%;   --copy-w: 100%;
}
/* 5: 縦長の写真、引用は縦書きで右、縦書きの名前が左下、小写真が上 */
.prod__item[data-slug="quilting"] {
  --main-x: 11%;  --main-y: 12%;   --main-w: 58%; --main-h: 86%;
  --small-x: 21%; --small-y: 8%;   --small-w: 29%;
  --name-x: 5%;   --name-y: 48%;
  --copy-x: 57%;  --copy-y: 4%;    --copy-w: 28%;
}
.prod__item[data-slug="quilting"] .prod__copy {
  writing-mode: vertical-rl;
  height: 76%;
  width: auto;
}

/* --- レスポンシブ：2列 → 1列。手置きの座標はそのまま縮む --- */
@media (max-width: 960px) {
  .prod__gallery { grid-template-columns: repeat(2, minmax(0, 440px)); }
}
@media (max-width: 750px) {
  .prod__gallery { grid-template-columns: minmax(0, 480px); }
  .prod__name { font-size: clamp(24px, 7vw, 34px); }
}

/* ============================================================
   4. Concept
   ============================================================ */
.concept {
  position: relative;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
}
.concept__deco {
  position: absolute;
  inset: 4% auto auto 42%;
  width: min(13vw, 120px);
  opacity: .5;
  pointer-events: none;
}
.concept__text { max-width: 34em; }
.concept__lead {
  font-size: clamp(19px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.55;
  margin: var(--gap-inner) 0 1em;
  color: var(--peacock);
}
.concept__body { margin-bottom: 1.2em; }

.concept__pics { display: grid; gap: clamp(14px, 2.4vw, 28px); }
.concept__pic { margin: 0; }
.concept__pic img {
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.concept__pic--a img { aspect-ratio: 4 / 5; }
.concept__pic--b img { aspect-ratio: 4 / 3; }
.concept__pic--a { rotate: -1.6deg; }
.concept__pic--b { rotate: 1.4deg; margin-inline-start: clamp(20px, 6vw, 80px); }

@media (max-width: 750px) {
  .concept { grid-template-columns: 1fr; }
  .concept__deco { display: none; }
  .concept__pic--b { margin-inline-start: 0; }
}

/* ============================================================
   5. Why Peacockbluee
   絵文字なし。理由ごとに実写真を1枚、少し傾けて、名前を角に重ねる
   ============================================================ */
.why {
  padding-inline: var(--pad-x);
  background: color-mix(in srgb, var(--peacock) 7%, transparent);
}
.why__lead {
  text-align: center;
  margin-top: .8em;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--chili);
}
.why__list {
  margin-top: var(--gap-inner);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 7vw, 96px) clamp(20px, 3vw, 48px);
  list-style: none;
  padding: 0;
}
/* 偶数番目を下げて段違いに（他セクションと同じリズム） */
.why__item:nth-child(even) { margin-top: clamp(28px, 5vw, 72px); }

.why__item { position: relative; }
.why__photo {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 14%, transparent);
  transition: rotate .4s ease, translate .4s ease;
}
.why__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why__item:hover .why__photo { rotate: 0deg; translate: 0 -6px; }

/* 名前は写真の左下の角に少し乗せる */
.why__name {
  position: relative;
  z-index: 1;
  margin: -.55em 0 0 -.15em;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--c, var(--peacock));
  /* 写真に少し食い込むので、下地色で縁取りして読ませる */
  -webkit-text-stroke: 6px var(--cream);
  paint-order: stroke fill;
}
.why__desc {
  margin-top: .6em;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.8;
}
.why__desc mark {
  background: linear-gradient(transparent 55%, var(--marigold) 55%);
  color: inherit;
  padding: 0 .1em;
}

@media (max-width: 960px) {
  .why__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 750px) {
  .why__list { gap: clamp(36px, 8vw, 56px) 16px; }
  .why__item:nth-child(even) { margin-top: 28px; }
  .why__name { font-size: 22px; -webkit-text-stroke-width: 4px; }
}

/* ============================================================
   6. GOODS — 参考サイトの party__goods を再現
   3列グリッド（400px・行間80・列間40）。
   商品ごとにサイズ・位置・キャプションの向きを手置き
   ============================================================ */
.goods { padding-inline: var(--pad-x); }

/* --- 見出しの残像。同じ画像を3枚、下へずらして薄く重ねる --- */
.goods__title {
  position: relative;
  width: min(60vw, 520px);
  aspect-ratio: 520 / 110;
  margin: 0 auto clamp(12px, 2vw, 20px);
  /* 残像に使う画像 */
  --label-image: url("images/title-life.png");
}
.goods__label-original {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%; height: 100%;
}
.goods__label-original img { width: 100%; height: 100%; object-fit: contain; }
.goods__label-delayed {
  position: absolute;
  inset: 0;
  background: var(--label-image) center / contain no-repeat;
  /* サンアド実測：静止時は残像ゼロ。発火の瞬間だけ伸びて（3枚目で13px）、
     約1秒かけて指数的に縮んで消える。「常に残像」ではなく「入場の一瞬だけ尾を引く」 */
  transform: translate3d(0, calc(var(--delayed-offset) * var(--n)), 0);
  --delayed-offset: 0px;
  filter: brightness(0) saturate(100%) invert(31%) sepia(48%) saturate(700%) hue-rotate(155deg);
}
/* 発火（_in）で、実測の減衰カーブを再生。1枚あたり 4.4px（3枚目=13.2px） */
.goods__title._in .goods__label-delayed {
  animation: goods-ghost-tail 1.2s cubic-bezier(.19,1,.22,1) both;
}
@keyframes goods-ghost-tail {
  0%   { --delayed-offset: 0px; }
  15%  { --delayed-offset: 4.4px; }   /* 212ms で最大 */
  100% { --delayed-offset: 0px; }
}
@property --delayed-offset { syntax: '<length>'; inherits: false; initial-value: 0px; }
.goods__label-delayed:nth-of-type(2) { --n: 1; z-index: 3; opacity: .8; }
.goods__label-delayed:nth-of-type(3) { --n: 2; z-index: 2; opacity: .55; }
.goods__label-delayed:nth-of-type(4) { --n: 3; z-index: 1; opacity: .3; }

.goods__lead {
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--chili);
  margin-bottom: clamp(48px, 8vw, 110px);
}

/* --- キャンバス。参考の goods-list（1280×1577）に自由配置 --- */
.goods__list {
  position: relative;
  width: min(100%, 1280px);
  aspect-ratio: 1280 / 1800;   /* サンアドは 1577。とらわらの行（写真491px＋虎スタンプ）が下に収まる高さ */
  margin-inline: auto;
  list-style: none;
  padding: 0;
}
/* 7点すべて絶対配置。座標は参考の実測を % に換算したもの（下に一覧） */
.goods__item {
  position: absolute;
  min-width: 0;
}
.goods__figure { position: relative; margin: 0; }
.goods__photo {
  position: relative;
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
  background: var(--card);
}
.goods__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 切り抜きは contain で、色面に載せる */
.goods__photo--cutout { background: color-mix(in srgb, var(--peacock) 7%, var(--cream)); }
.goods__photo--cutout img { object-fit: contain; padding: 8%; }

/* --- キャプション（参考の goods-caption） --- */
.goods__caption {
  position: absolute;
  left: 0; top: 100%;
  margin-top: 10px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--fg);
  white-space: nowrap;
}
.goods__caption--right { left: auto; right: 0; text-align: right; }
.goods__caption--above { top: auto; bottom: 100%; margin: 0 0 10px; }
/* 縦書きで右に添える */
.goods__caption--side {
  top: 0; bottom: auto; left: 100%;
  margin: 0 0 0 10px;
  writing-mode: vertical-rl;
}
/* 縦書きで左に添える（sticker） */
.goods__caption--side-left {
  top: auto; bottom: 8%; right: 100%; left: auto;
  margin: 0 12px 0 0;
  writing-mode: vertical-rl;
}

/* ============================================================
   参考の実測（1280×1577 基準）を % に換算
   ============================================================ */
/* サンアドの配置ルールを、うちの素材の縦横比で組み直したもの：
   - 形を交互に（縦長 / 縦長の切り抜き / 正方）
   - 縦長の隣は縦書き、正方の上は横書き（写真の形とキャプション向きが連動）
   - 大きな色面（②⑤）を奥に敷き、手前の写真が角に 50〜60px だけ乗る */
.goods__item--1 { left:  9.38%; top:  6.67%; width: 29.69%; --ar: 380 / 506; z-index: 3; }
.goods__item--2 { left: 34.38%; top:  4.44%; width: 31.25%; --ar: 400 / 560; z-index: 1; }
.goods__item--3 { left: 60.94%; top: 9.44%; width: 29.69%; --ar: 380 / 380; z-index: 3; }
.goods__item--4 { left: 10.94%; top: 41.62%; width: 29.69%; --ar: 380 / 380; z-index: 3; }
.goods__item--5 { left: 36.72%; top: 38.54%; width: 28.12%; --ar: 360 / 500; z-index: 1; }
.goods__item--6 { left: 60.16%; top: 42.93%; width: 31.25%; --ar: 400 / 400; z-index: 3; }
.goods__item--7 { left: 12.66%; top: 68.89%; width: 85.31%; z-index: 2; }
/* ⑦ とらわら：写真が主役。虎のアートは「スタンプ」として写真の右下の角に小さく重ねる
   （サンアドの sticker は横長の小シートだが、うちの虎は縦長の一枚絵なので主役にすると重い） */
.goods__figure--row { position: relative; display: block; }
.goods__item--7 .goods__photo { width: 45%; --ar: 1; margin: 0; }
.goods__artwork {
  position: absolute;
  left: 36%; bottom: -10%;
  width: 26%;
  z-index: 2;
  rotate: -6deg;
  filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--ink) 22%, transparent));
}
.goods__artwork img { width: 100%; height: auto; display: block; }
/* キャプションは写真の下・左（縦書きで左端に出すと狭い幅で切れる） */
.goods__item--7 .goods__caption { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; margin: 10px 0 0; writing-mode: horizontal-tb; }

/* 手前の写真には影（乗っている感） */
.goods__item--1 .goods__photo, .goods__item--3 .goods__photo,
.goods__item--4 .goods__photo, .goods__item--6 .goods__photo {
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 16%, transparent);
}

/* キャプション：写真の形に合わせて向きを変える */
.goods__item--2 .goods__caption--side { top: 0; left: 100%; margin: 0 0 0 10px; }                 /* 縦長 → 右に縦書き */
.goods__item--5 .goods__caption--side { top: 0; bottom: auto; left: 100%; right: auto; margin: 0 0 0 10px; }  /* 縦長 → 右に縦書き（左下だと花の角ととらわらに当たる） */

/* --- SP：サンアドのSP実測に合わせる。
   サンアドはSPでは「重ね」を捨て、重なりゼロの2列グリッドに整列している。
   横幅いっぱい → 中央寄せ → 2列 → 2列 → 横幅いっぱい、のリズム。
   （PCの散らばった重ね配置は @media の外にそのまま残る） --- */
@media (max-width: 750px) {
  .goods__list {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: clamp(64px, 15vw, 96px);   /* 下に付くキャプション（約 41px）＋余白が入る高さ */
    padding-bottom: 64px;               /* とらわらのスタンプとキャプションが下にはみ出すぶん */
  }
  .goods__item { position: static; width: auto !important; z-index: auto; }
  .goods__item .goods__photo { box-shadow: none; }

  /* 1行目：キターブ 横幅いっぱい（サンアド long-tshirt） */
  .goods__item--1 { grid-column: 1 / -1; --ar: 328 / 230 !important; }

  /* 2行目：ポーチ 中央・72%（サンアド short-tshirt）。キャプションは左に縦書き */
  .goods__item--2 { grid-column: 1 / -1; width: min(72%, 260px) !important; justify-self: center; --ar: 238 / 296 !important; }   /* タブレット幅で色面が巨大にならないよう上限 */
  .goods__item--2 .goods__caption { top: auto; bottom: 0; left: auto; right: 100%; margin: 0 8px 0 0; writing-mode: vertical-rl; }

  /* 3行目：机 / 花 2列（サンアド keyholder / cap）。花はキャプション上 */
  .goods__item--3 { grid-column: 1; --ar: 149 / 181 !important; }
  .goods__item--4 { grid-column: 2; --ar: 1 !important; }

  /* 4行目：ミニ / 植物 2列（サンアド sticker写真 / tote）。ミニは右に縦書き */
  .goods__item--5 { grid-column: 1; --ar: 148 / 184 !important; }
  .goods__item--6 { grid-column: 2; --ar: 1 !important; }

  /* 5行目：とらわら 横幅いっぱいの写真に、虎のスタンプを右下の角へ */
  .goods__item--7 { grid-column: 1 / -1; }
  .goods__figure--row { position: relative; display: block; }
  .goods__item--7 .goods__photo { width: 100%; margin: 0; --ar: 328 / 230; }
  .goods__artwork { position: absolute; left: auto; right: -4%; bottom: -14%; width: 34%; margin: 0; rotate: -6deg; }
  .goods__item--7 .goods__caption { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; margin: 8px 0 0; writing-mode: horizontal-tb; }

  /* ポーチ以外のキャプションはすべて写真の下・左に統一
     （縦書きを列の隙間に出すと隣の写真に隠れる。上に出すと前の行に当たる） */
  .goods__item--1 .goods__caption, .goods__item--3 .goods__caption, .goods__item--4 .goods__caption,
  .goods__item--5 .goods__caption, .goods__item--6 .goods__caption {
    position: absolute; top: 100%; bottom: auto; left: 0; right: auto; margin: 8px 0 0; writing-mode: horizontal-tb; text-align: left;
  }
}

/* ============================================================
   7. Tokyo × India — 旅ノート
   ============================================================ */
.trip {
  padding-inline: var(--pad-x);
  background: color-mix(in srgb, var(--marigold) 9%, transparent);
}
.trip__x { color: var(--chili); }
.trip__lead {
  text-align: center;
  margin-top: .9em;
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: .78;
}
.trip__steps {
  margin-top: var(--gap-inner);
  padding: 0;
  list-style: none;          /* 番号は trip__no で出すので ol の数字は消す */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(26px, 4vw, 56px);
  counter-reset: trip;
}
.trip__step {
  background: var(--card);
  padding: 12px 12px 20px;
  border-radius: 3px;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent);
  transition: rotate .4s ease, translate .4s ease;
}
.trip__step:hover { rotate: 0deg; translate: 0 -6px; }
.trip__step figure { margin: 0 0 14px; }
.trip__step img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.trip__cap { padding-inline: 6px; }
.trip__no {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--chili);
}
.trip__cap h3 {
  font-size: clamp(16px, 1.8vw, 20px);
  margin: .2em 0 .4em;
}
.trip__cap p { font-size: clamp(13px, 1.3vw, 15px); line-height: 1.7; opacity: .8; }

/* ============================================================
   8. Designer
   ============================================================ */
.designer {
  padding-inline: var(--pad-x);
  display: grid;
  /* 文字を左、写真を右。写真は head と body の2行ぶんにまたがる */
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head pics"
    "body pics";
  column-gap: clamp(28px, 6vw, 96px);
  row-gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.designer__head { grid-area: head; }
.designer__pics { grid-area: pics; display: grid; gap: clamp(14px, 2vw, 24px); align-self: center; }
.designer__text { grid-area: body; }

.designer__pic { margin: 0; }
.designer__pic img { width: 100%; object-fit: cover; border-radius: 4px; }
.designer__pic--main img { aspect-ratio: 4 / 5; }
.designer__pic--sub     { width: 62%; margin-inline-start: auto; rotate: 2deg; }
.designer__pic--sub img { aspect-ratio: 4 / 3; }
.designer__pic--meeting { width: 54%; margin-top: -8%; rotate: -1.5deg; }
.designer__pic--meeting img { aspect-ratio: 4 / 3; }

.designer__name {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px);
  margin: .6em 0 0;
  display: grid;
  gap: 6px;
}
.designer__role {
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: clamp(12px, 1.2vw, 14px);
  opacity: .7;
  letter-spacing: .05em;
}
.designer__body { margin-bottom: 1.2em; }

@media (max-width: 750px) {
  /* 1列。DOM 順 = 見出し → 写真 → 本文。虎アートの直下に文字が来る */
  .designer {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "pics" "body";
  }
  .designer__pics { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
  .designer__pic--main { grid-column: 1 / -1; }
  .designer__pic--sub, .designer__pic--meeting { width: 100%; margin: 0; rotate: 0deg; }
  .designer__pic--sub img, .designer__pic--meeting img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   9. Footer
   ============================================================ */
.foot {
  position: relative;
  overflow: hidden;
  background: var(--peacock-deep);
  color: var(--cream);
  padding: clamp(56px, 9vw, 120px) var(--pad-x)
           calc(clamp(32px, 5vw, 56px) + var(--safe-b));
}
.foot__deco { position: absolute; pointer-events: none; }
.foot__deco--peacock {
  inset: auto -6% -18% auto;
  width: min(34vw, 340px);
  opacity: .30;
}
.foot__deco--tiger {
  inset: auto -2% -6% auto;
  width: min(22vw, 200px);
  opacity: .35;
  rotate: -6deg;
}
.foot__inner { position: relative; z-index: 1; }
.foot__logo { line-height: 0; margin: 0 0 .5em; }
.foot__logo img {
  width: min(50vw, 420px); height: auto;
  filter: brightness(0) invert(1);     /* 紺地なので白へ */
}
.foot__katakana { line-height: 0; margin: 0; }
.foot__katakana img {
  width: min(34vw, 260px); height: auto;
  filter: brightness(0) invert(1);
  opacity: .82;
}
.foot__tag {
  margin-top: .4em;
  font-size: clamp(16px, 2.2vw, 26px);
  color: var(--marigold);
}
.foot__nav {
  margin-top: clamp(32px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 4vw, 56px);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2.4vw, 32px); }
.foot__links a {
  color: inherit;
  text-decoration: none;
  font-size: clamp(13px, 1.4vw, 16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.foot__links a:hover { border-bottom-color: currentColor; }
.foot__links a:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }
.foot__links--sub a { font-size: clamp(11px, 1.2vw, 13px); opacity: .72; }

.foot__bottom {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.foot__replay {
  font: inherit;
  font-size: 13px;
  color: var(--cream);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cream) 34%, transparent);
  border-radius: 999px;
  padding: .6em 1.4em;
  cursor: pointer;
  transition: background .2s ease;
}
.foot__replay:hover { background: color-mix(in srgb, var(--cream) 12%, transparent); }
.foot__replay:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.foot__copy { font-size: 12px; opacity: .6; }

/* ============================================================
   スクロールで現れる（JS が .is-in を付ける）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   商品のポップアップ
   ============================================================ */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
}
.pmodal__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--peacock-deep) 72%, transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.pmodal__panel {
  position: relative;
  width: min(100%, 960px);
  max-height: calc(100svh - 32px);
  overflow: auto;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 開くときはサンアドのバーストと同じバネで */
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .35s cubic-bezier(.19,1,.22,1), transform .55s cubic-bezier(.34,1.56,.64,1);
}
.pmodal.is-open .pmodal__backdrop { opacity: 1; }
.pmodal.is-open .pmodal__panel { opacity: 1; transform: none; }

.pmodal__close {
  position: sticky; top: 12px; margin-left: auto; margin-right: 12px; z-index: 2;
  grid-column: 1 / -1; justify-self: end; align-self: start;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.pmodal__close:hover { background: var(--marigold); }
.pmodal__close:focus-visible { outline: 2px solid var(--peacock); outline-offset: 2px; }

/* 左：切り抜き＋着用写真（カードと同じ「重ね」） */
.pmodal__visual {
  position: relative;
  min-height: 420px;
  background: color-mix(in srgb, var(--peacock) 10%, var(--cream));
  overflow: hidden;
}
.pmodal__img {
  position: absolute;
  inset: 10% 12% 22%;
  width: 76%; height: 68%;
  object-fit: contain;
  z-index: 2;
}
.pmodal__photo {
  position: absolute;
  left: 8%; bottom: 6%;
  width: 34%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  z-index: 1;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* 右：説明 */
.pmodal__body { padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px); }
.pmodal__cat {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--peacock);
}
.pmodal__name {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.02em; line-height: 1;
  color: var(--peacock);
  margin: .2em 0 0;
}
.pmodal__ja { font-size: 14px; opacity: .7; margin: .3em 0 1.4em; }
.pmodal__text { line-height: 1.9; margin-bottom: 1.4em; }
.pmodal__spec {
  list-style: none; padding: 0; margin: 0 0 1.6em;
  font-size: 13px; line-height: 1.9;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pmodal__spec li {
  padding: .4em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pmodal__price {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 1em;
}
.pmodal__cta {
  display: inline-block;
  padding: .8em 1.8em;
  background: var(--peacock);
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
  border-radius: 999px;
  transition: background .2s ease;
}
.pmodal__cta:hover { background: var(--peacock-deep); }
.pmodal__cta:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }

/* 開いている間は背面をスクロールさせない */
body.is-modal-open { overflow: hidden; }

@media (max-width: 750px) {
  .pmodal { padding: 0; align-items: end; }
  .pmodal__panel {
    grid-template-columns: 1fr;
    max-height: 92svh;
    border-radius: 16px 16px 0 0;
    transform: translateY(40px);
  }
  .pmodal__visual { min-height: 0; aspect-ratio: 1; }
  .pmodal__body { padding-bottom: calc(28px + var(--safe-b)); }
  .pmodal__close { top: 10px; right: max(10px, var(--safe-r)); }
}

/* ============================================================
   モーションを減らす設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fv__logo-inner, .fv__catch-inner { opacity: 1 !important; transform: none !important; }
  .joy__float { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}