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

.main-content {
  width: calc(750 * var(--dpx));
  font-feature-settings: 'palt';
  margin: 0 auto;
  position: relative; /* 追従チップ等の position:absolute の位置基準（カンプ座標＝この器の左上原点） */
  display: flow-root; /* BFC化：子の margin-top を外に漏らさない（先頭要素の上余白がコンテナ内に収まる） */
  background-color: #f4f4f4; /* カンプBGレイヤーの全面塗り（FV以下の全アートボード共通） */
}
.main-content * {
  box-sizing: border-box;
}
.main-content img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.main-content a {
  color: inherit;
}
/* 見出し・段落のリセット：tag 指定（h1〜h6/p）でも div と同じ素の状態から始める。
   :where() は詳細度を上げない＝サイト側の素の h2{} 等には勝ち（.main-content ぶんの詳細度）、
   後続のクラス指定（意味クラスの font-size・連番クラスの margin-top）には普通に負ける */
.main-content :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}


/* look / asset は block 化（余白・幅・横位置は .lookNN/.assetNN 等の連番クラス）。.look 内の a も block（inline だと画像下に隙間が出る） */
.look, .asset { display: block; }
.look a { display: block; }

/* ==== スライダー（slider-build） ====
   横並び2枚 → 次が右にチラ見えする自動ループスライド（Splide）。
   スライド幅(360)・間隔(12)は各インスタンスの data-splide 属性が --dpx 基準で持つ。 */
/* スライド内の look は位置指定を持たない（並び・位置は Splide が管理） */
.js-slider .look { margin: 0; width: 100%; }
/* 1枚目の左端位置＝カンプの135。padding でなく track の margin にする＝135がクリップ境界になり、
   左側に前のスライドがチラ見えしない（カンプは左空白）。右のチラ見えは track 幅の残り(243)で自動 */
.js-slider .splide__track { margin-left: calc(135 * var(--dpx)); }
/* 上余白＝旧・横並び1枚目の margin-top をそのまま引き継ぐ
   （スライダーの高さは旧横並びと同じ＝後続要素の余白計算に影響しない） */
.look-slider01 {margin-top: calc(119 * var(--dpx));} /* look-number をフロー外(absolute)にした分(-493)を差し引き（旧609） */
.look-slider02 {margin-top: calc(120 * var(--dpx));}
.look-slider03 {margin-top: calc(262 * var(--dpx));}

/* look画像：margin-top=カンプ座標から自動計算、幅=実PNG幅、横位置（左寄せ=そのまま/右端一致=margin-left:auto/他=左からの距離） */
.look01 {margin-top: calc(22 * var(--dpx));width: calc(495 * var(--dpx));}
/* look02+03 はスライダー化（.look-slider01）：位置・幅は Splide 側（script.js）が持つ */
.look04 {margin-top: calc(42 * var(--dpx));width: calc(582 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.look05 {margin-top: calc(23 * var(--dpx));width: calc(750 * var(--dpx));}
.look06 { margin-top: calc(15 * var(--dpx)); width: calc(750 * var(--dpx)); }
.look07 { margin-top: calc(41 * var(--dpx)); width: calc(582 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.look08 { margin-top: calc(21 * var(--dpx)); width: calc(749 * var(--dpx)); }
.look09 {margin-top: calc(121 * var(--dpx));width: calc(431 * var(--dpx));margin-left: calc(103 * var(--dpx));}
.look10 { margin-top: calc(41 * var(--dpx)); width: calc(582 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.look11 {margin-top: calc(262 * var(--dpx));width: calc(609 * var(--dpx));margin-left: auto;}
.look12 {margin-top: calc(907 * var(--dpx));width: calc(351 * var(--dpx));}
.look13 { margin-top: calc(-226 * var(--dpx)); width: calc(267 * var(--dpx)); margin-left: calc(368 * var(--dpx)); }
.look14 { margin-top: calc(41 * var(--dpx)); width: calc(582 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.look15 { margin-top: calc(21 * var(--dpx)); width: calc(749 * var(--dpx)); }
/* look16+17 はスライダー化（.look-slider02）：位置・幅は Splide 側（script.js）が持つ */
.look18 {margin-top: calc(43 * var(--dpx));width: calc(582 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.look19 {margin-top: calc(23 * var(--dpx));width: calc(520 * var(--dpx));}
.look21 { margin-top: calc(117 * var(--dpx)); width: calc(297 * var(--dpx)); margin-left: calc(344 * var(--dpx)); }
.look20 { margin-top: calc(-234 * var(--dpx)); width: calc(327 * var(--dpx)); }
.look22 { margin-top: calc(41 * var(--dpx)); width: calc(582 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
/* look23+24 はスライダー化（.look-slider03）：位置・幅は Splide 側（script.js）が持つ */
.look25 { margin-top: calc(573 * var(--dpx)); width: calc(495 * var(--dpx)); }
.look26 { margin-top: calc(41 * var(--dpx)); width: calc(582 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.look27 { margin-top: calc(21 * var(--dpx)); width: calc(546 * var(--dpx)); }
.look28 { margin-top: calc(117 * var(--dpx)); width: calc(542 * var(--dpx)); margin-left: auto; }
.look29 { margin-top: calc(17 * var(--dpx)); width: calc(542 * var(--dpx)); margin-left: auto; }
.look30 { margin-top: calc(41 * var(--dpx)); width: calc(582 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }

/* 資産画像（LOOK以外）：margin-top=カンプ座標から自動計算、幅=bounds.width、横位置=bounds.x */
.fv-image01 { margin-top: calc(0 * var(--dpx)); width: calc(750 * var(--dpx)); }

/* テキスト：className 毎に代表値（値は layout.json 由来）＋直後の連番クラスに余白と個別差分 */

.look-number {
  font-size: calc(21 * var(--dpx));
  line-height: 1.07;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: right;
  color: #212121;
}
/* .fv-heading（画面高）内の下端＝画面下端の40上に貼り付く（グループごと追従）。
   right＝カンプの右端x714をグループ右端(513+213=726)からの距離に換算 */
.look-number01 { position: absolute; bottom: 0; right: calc(12 * var(--dpx)); }

.notes-heading {
  font-size: calc(21 * var(--dpx));
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
}
.notes-heading01 { margin-top: calc(124 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.notes-heading02 {margin-top: calc(127 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.notes-heading03 { margin-top: calc(116 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.notes-heading04 {margin-top: calc(118 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.notes-heading05 { margin-top: calc(116 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.notes-heading06 { margin-top: calc(116 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.notes-heading07 { margin-top: calc(116 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.notes-heading08 { margin-top: calc(116 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }

.look-name {
  width: calc(582 * var(--dpx));
  font-size: calc(27 * var(--dpx));
  line-height: 1.76;
  letter-spacing: 0.05em;
  font-family: "dnp-shuei-kakugo-kin-std", "游ゴシック体", "Yu Gothic", sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
  padding-bottom: calc(6 * var(--dpx));
  border-bottom: calc(2 * var(--dpx)) solid #212121;
  margin-top: calc(4 * var(--dpx));
  margin-left: calc(28 * var(--dpx));
}

.comment {
  font-size: calc(23 * var(--dpx));
  line-height: 1.83;
  letter-spacing: 0.05em;
  font-family: "dnp-shuei-kakugo-kin-std", "游ゴシック体", "Yu Gothic", sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
  margin-top: calc(26 * var(--dpx));
  margin-left: calc(28 * var(--dpx));
}


.shop-link {
  display: block;
  text-decoration: none !important;
  width: calc(582 * var(--dpx));
  font-size: calc(21 * var(--dpx));
  line-height: 1.06;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
  padding-bottom: calc(14 * var(--dpx));
  border-bottom: calc(2 * var(--dpx)) solid #212121;
  margin-top: calc(36 * var(--dpx));
  margin-left: calc(28 * var(--dpx));
  background: url(../img/arrow.svg) no-repeat top calc(5 * var(--dpx)) right calc(3 * var(--dpx));
  background-size: calc(16 * var(--dpx));
}

.shop-link09 {margin-top: calc(442 * var(--dpx));margin-left: calc(28 * var(--dpx));}

.tips-label {
  font-size: calc(21 * var(--dpx));
  line-height: 1.06;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
}
.tips-label01 {margin-top: calc(152 * var(--dpx));margin-left: calc(28 * var(--dpx));line-height: 1.05;letter-spacing: 0.01em;}
.tips-label02 {margin-top: calc(259 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.tips-label03 { margin-top: calc(271 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.tips-label04 { margin-top: calc(-812 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.tips-label05 {margin-top: calc(261 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.tips-label06 { margin-top: calc(272 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.tips-label07 { margin-top: calc(-481 * var(--dpx)); margin-left: calc(28 * var(--dpx)); }
.tips-label08 {margin-top: calc(263 * var(--dpx));margin-left: calc(28 * var(--dpx));}

/* ==== 追従（sticky）====
   .follow-track：FVアセット下端〜staff-credit を囲む器（sticky の効く範囲＝親）。
   .fv-heading：見出し3点＋LOOKナンバーの塊を画面右上に追従（sticky top）。
     グループ高＝画面高（top:40 と対＝下端は画面下端の40上）にし、
     見出し3点は上端基準・LOOKナンバーは下端基準(bottom:0)の absolute で置く。
   ▼フロー占有の戻し（旧グループ高501＝50+501で後続を動かさない）は
     「次要素 .section-heading01 側の負 margin-top」で行う（sticky要素に負マージン禁止）。
     負マージンを .fv-heading01 自身の margin-bottom に置くと、sticky の可動範囲は
     マージンボックスで判定されるため、負マージン分（≒画面高1枚）だけトラック下端を
     突き抜けて余分に追従し、コンテンツ末尾を越えてフッターへ被さる。
   --fv-heading-h は隣の .section-heading01 からも参照するので .follow-track に置く
     （.fv-heading に置くと兄弟へは継承されず var() が無効になる）。 */
.follow-track {
  position: relative;
  padding-bottom: calc(30 * var(--dpx));
  --fv-heading-h: calc(100vh - 80 * var(--dpx)); /* 画面高−上下40。dvh非対応ブラウザ用 */
}
@supports (height: 100dvh) {
  .follow-track { --fv-heading-h: calc(100dvh - 70 * var(--dpx)); }
}
.fv-heading {
  position: sticky;
  top: calc(40 * var(--dpx));
  z-index: 2;
  pointer-events: none; /* 画面大の透明ボックスが本文のリンク操作を塞がないように */
}
.fv-heading > * { pointer-events: auto; }
.fv-heading01 {
  margin-top: calc(50 * var(--dpx));
  margin-left: calc(513 * var(--dpx));
  width: calc(213 * var(--dpx));
  height: var(--fv-heading-h);
}

.season-label {
  font-size: calc(16 * var(--dpx));
  line-height: 1.13;
  letter-spacing: 0.006em;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: right;
  color: #212121;
  white-space: nowrap;
}
/* .fv-heading グループ内の absolute 配置（原点＝グループ左上 x512.55/y1131.96）。右寄せは right 指定 */
.season-label01 {position: absolute;top: calc(4 * var(--dpx));right: calc(140 * var(--dpx));}

.feature-title {
  font-size: calc(45 * var(--dpx));
  line-height: 0.84;
  letter-spacing: -0.08em;
  font-family: "Instrument Serif", "Times New Roman", serif;
  text-align: left;
  color: #212121;
  writing-mode: vertical-rl; /* カンプは縦組み（bounds 49x271。build.jsは縦書き非対応＝手当て） */
}
.feature-title01 {position: absolute;top: calc(-3 * var(--dpx));left: calc(170 * var(--dpx));}

.page-author {
  font-size: calc(25 * var(--dpx));
  line-height: 0.86;
  letter-spacing: 0.025em;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
  color: #212121;
  writing-mode: vertical-rl; /* カンプは縦組み（bounds 27x231。build.jsは縦書き非対応＝手当て） */
}
.page-author01 {position: absolute;top: calc(263 * var(--dpx));left: calc(172 * var(--dpx));}

.section-heading {
  font-size: calc(21 * var(--dpx));
  line-height: 1.05;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
}
/* margin-top ＝ 生成値0 ＋ FV見出しのフロー戻し（負値。詳細は上の「追従」ブロック） */
.section-heading01 {margin-top: calc(501 * var(--dpx) - var(--fv-heading-h));margin-left: calc(28 * var(--dpx));}

.lead {
  font-size: calc(23 * var(--dpx));
  line-height: 1.83;
  letter-spacing: 0.05em;
  font-family: "dnp-shuei-kakugo-kin-std", "游ゴシック体", "Yu Gothic", sans-serif;
  font-weight: 500;
  text-align: left;
  color: #212121;
}
.lead01 {margin-top: calc(24 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.lead02 {margin-top: calc(31 * var(--dpx));margin-left: calc(28 * var(--dpx));}
.lead03 {margin-top: calc(31 * var(--dpx));margin-left: calc(28 * var(--dpx));}

.staff-credit {
  font-size: calc(20 * var(--dpx));
  line-height: 1.4;
  letter-spacing: 0.025em;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  color: #212121;
}
.staff-credit01 {margin-top: calc(35 * var(--dpx));margin-left: calc(28 * var(--dpx));}

/* ==== スクロール出現アニメ（anim-scroll-reveal） ====
   HTML側：出したい要素に js-reveal を付けるだけ（動きを知らない）。
   JS側：画面内に入ったら .is-inview を付与するだけ（動きを知らない）。
   出現の仕方（fade/slide/時間差…）は企画ごとに ここのCSSだけ を差し替える。
   .js-anim は script.js が <html> に付けるフラグ＝JS無効環境では隠さない保険。
   ※この案件はフェードのみ＝opacity だけ触る（transform を書くと
     .fv-heading01 の translateX（pc-styles）を潰すので書かない）。 */
html.js-anim .js-reveal {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
html.js-anim .js-reveal.is-inview {
  opacity: 1;
}
/* OSで「視差効果を減らす」設定の人には動かさず即表示 */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .js-reveal {
    opacity: 1;
    transition: none;
  }
}