/* ================================================================
   THE NORTH FACE KIDS 26 FALL
   Kids Athletics Tee Collection
   ================================================================ */

/* ---- Color tokens ---- */
/* design2 のカンプ実測値に合わせた配色 */
:root {
  --blue: #4770e2;        /* セクション背景の青（アクセントと同色） */
  --blue-accent: #4770e2; /* テキスト・矢印・枠のアクセント青（素材と同色） */
  --lime: #d0f78d;
  --orange: #ff7437;
  --magenta: #db70e4;
  --white: #f9f9f9;       /* 白背景セクション（純白ではなくわずかにグレー） */
  --ink: #1a1a1a;

  --pc-pad: 60px;
  --sp-pad: 24px;
}

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* 写真やマーキーは演出上わざと画面幅より外へ出しており、それを clip で隠している。
   body だけに指定しても、スクロールコンテナである html 側のスクロール領域には
   反映されないブラウザ（Safari 等）があり横スクロールが出るため、html にも指定する。
   hidden ではなく clip：hidden は html/body をスクロールコンテナ化して
   .item-info の position:sticky を壊すが、clip なら壊さない */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  /* 日本語・本文：Zen Kaku Gothic New Medium(500) */
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---- Blob frame（矩形写真をマスク形にクロップ＋色枠SVGを重ねる） ---- */
/* aspect-ratio と clip-path は main.js が data-mask に応じて付与 */
.blob-frame {
  position: relative;
}
.blob-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blob-frame .blob-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* ---- Rect frame（矩形写真の細い色枠） ---- */
.rect-frame {
  border: 6px solid var(--blue);
  line-height: 0;
}
.rect-frame img { width: 100%; }
.frame-orange { border-color: var(--orange); }
.frame-blue { border-color: var(--blue); }
.frame-green { border-color: #17a67a; }

/* 英字見出し用：Chelsea Market */
.script-heading,
.feature-title,
.concept-title-en,
.item-name,
.all-item-link,
.marquee {
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---- Section background helpers ---- */
.sec-blue { background: var(--blue); color: var(--white); }
.feature.sec-blue { color: var(--ink); }
.all-item.sec-blue { color: var(--ink); }
.sec-lime { background: var(--lime); color: var(--ink); }
.sec-orange { background: var(--orange); color: var(--ink); }
.sec-magenta { background: var(--magenta); color: var(--ink); }
.sec-white { background: var(--white); color: var(--ink); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  padding: 100px var(--pc-pad) 126px;
  background: var(--white);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.hero-photo img {
  width: 100%;
}

/* 左：ブロブ切り抜き写真 */
.hero-photo-blob {
  max-width: 430px;
  justify-self: start;
}

.hero-title {
  text-align: center;
}
.hero-tnf {
  width: 96px;
  margin: 0 auto 20px;
}
.hero-headline {
  margin: 0 auto;
}
.hero-headline-pc {
  display: block;
  width: 210px;
}
.hero-headline-sp {
  display: none;
  width: 240px;
}

/* 右：矩形写真 */
.hero-photo-rect {
  max-width: 340px;
  justify-self: end;
}

.hero-arrow {
  text-align: center;
  margin-top: 40px;
}
.hero-arrow img, .hero-arrow svg {
  width: 40px;
  margin: 0 auto;
}

/* ================================================================
   CONCEPT
   ================================================================ */
.concept {
  padding: 150px var(--pc-pad);
  text-align: center;
}

.concept-title-en {
  font-size: 41px;
  line-height: 51px;
  margin-bottom: 8px;
}

.concept-title-ja {
  font-size: 35px;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 48px;
}

.concept-text {
  font-size: 20px;
  line-height: 1.8;
}
/* 改行の出し分け（クラスなしの br は PC/SP 共通の改行位置） */
.br-sp { display: none; }

/* ================================================================
   SCHOOLS / PARKS
   ================================================================ */
.schools {
  padding: 70px var(--pc-pad) 90px;
}

.schools-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 695px;
}

.script-heading {
  font-size: 68px;
  font-weight: 700;
}

.schools-label {
  position: absolute;
  top: 0;
  left: 6%;
}

.parks-label {
  position: absolute;
  bottom: -10px;
  left: 44%;
  color: var(--blue-accent);
}

.schools-photo {
  position: absolute;
  width: 40%;
}

.schools-photo-left {
  top: 70px;
  left: 0;
  width: 34%;
}

.schools-photo-right {
  top: 40px;
  right: 2%;
  width: 42%;
}

.frac-label {
  position: absolute;
  font-family: "Chelsea Market", cursive;
  font-size: 40px;
  font-weight: 400;
}
.frac-left { top: 40%; left: -6%; color: var(--blue-accent); }   /* 青ブロブ側 → 青 */
.frac-right { bottom: -6%; right: 14%; color: #111; }     /* 黒ブロブ側 → 黒 */

.schools-arrow {
  position: absolute;
  pointer-events: none;
}
/* 写真スライドショー（葉っぱ型ブロブ）：2枚を重ねてクロスフェード＋左右矢印で操作 */
.schools-photo[data-slides] .blob-frame img:not(.blob-outline) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.55s ease;
}
.schools-photo[data-slides] .s-arrow-black-left,
.schools-photo[data-slides] .s-arrow-black-right,
.schools-photo[data-slides] .s-arrow-blue-left,
.schools-photo[data-slides] .s-arrow-blue-right {
  pointer-events: auto;
  cursor: pointer;
}
/* 矢印：スクロールでビューに入ったら少し置いてからフェードイン（JS が is-in を付与） */
.arrow-fade { opacity: 0; transition: opacity 0.8s ease; }
.arrow-fade.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .arrow-fade { opacity: 1; transition: none; }
}

/* クリック時に「ブルっ」と震わせる */
@keyframes arrow-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  12% { transform: translateX(-3px) rotate(-2.5deg); }
  28% { transform: translateX(3px) rotate(2.5deg); }
  44% { transform: translateX(-2px) rotate(-1.5deg); }
  60% { transform: translateX(2px) rotate(1.5deg); }
  78% { transform: translateX(-1px) rotate(-0.5deg); }
}
.schools-arrow.shake {
  animation: arrow-shake 0.45s ease;
}

/* ---- クリック機能のない装飾矢印：マウスオーバーで軽く揺らす ----
   当たり判定は main.js が重ねる透明の太線（.arrow-hit）が担う。
   svg の bbox 全体だと線から遠い位置でも反応し、下の要素のホバーも塞ぐため。
   親が pointer-events:none でも、子で指定すれば子はイベントを受け取れる */
/* ヒーロー矢印は親に pointer-events:none がないため、svg 側で明示的に切る
   （切らないと線から離れた bbox 全体が反応してしまう） */
.hero-arrow svg { pointer-events: none; }
/* stroke 指定は「塗られているか」に依存せず線の周囲だけを判定できる（透明でも効く） */
.arrow-hit { pointer-events: stroke; fill: none; }
/* transform ではなく個別プロパティで揺らす。
   .size-arrow-right などは配置に transform: scaleX(-1) を使っており、
   transform で揺らすと反転が打ち消されて矢印が裏返るため */
@keyframes arrow-wobble {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: -2px 0; rotate: -1.5deg; }
  45% { translate: 2px 0; rotate: 1.5deg; }
  70% { translate: -1px 0; rotate: -0.7deg; }
}
.hero-arrow svg:hover,
.s-arrow-black-down:hover,
.s-arrow-curve-1:hover,
.size-arrow:hover {
  animation: arrow-wobble 0.5s ease;
}
/* スライドショーの左右矢印もホバーで揺らす。こちらはクリック用に svg 全体が
   当たり判定（pointer-events:auto）なので、線に限定せず bbox で反応させる。
   :not(.shake) はクリック時の強い揺れ（.schools-arrow.shake）を優先させるため。
   これが無いとホバー中＝クリック中は詳細度で勝つこちらが上書きしてしまう */
.schools-photo[data-slides] .schools-arrow:hover:not(.shake) {
  animation: arrow-wobble 0.5s ease;
}
/* 左ブロブ周りの青矢印（.schools-photo-left 基準） */
.s-arrow-blue-left  { bottom: 2%; left: -16%; width: 46px; }
.s-arrow-blue-right { bottom: -6%; right: -18%; width: 60px; }
/* 黒の下向き矢印（.schools-inner 基準・黒ブロブの上） */
.s-arrow-black-down  { top: -6px; left: 70%; width: 74px; }
/* 左右の黒矢印（.schools-photo-right 基準） */
.s-arrow-black-left  { top: 40%; left: -16%; width: 46px; }
.s-arrow-black-right { top: 40%; right: -16%; width: 46px; }
/* 青の曲線コネクタ（.schools-inner 基準） */
.s-arrow-curve-1 { top: 24%; left: 40%; width: 150px; }

/* ================================================================
   FEATURE（大判・サイズ注釈つき）
   ================================================================ */
.feature {
  padding: 42px var(--pc-pad) 46px;
  text-align: center;
}

.feature-title {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 48px;
  letter-spacing: 0;
}

.feature-photo {
  position: relative;
  max-width: 455px;
  margin: 0 auto;
}
/* 写真は .rect-frame img で 100% になる。ここで img 全体に width:100% を
   かけると size-arrow まで巻き込むため指定しない */

.size-note {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  font-weight: 700;
}
.size-note em {
  font-style: normal;
  font-family: "Chelsea Market", cursive;
  font-size: 33px;
  font-weight: 400;
  letter-spacing: 0;
}
.size-note .wear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Chelsea Market", cursive;
  font-size: 33px;
  font-weight: 400;
}
.size-note .wear-badge {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  line-height: 1.4;
}
.size-note-left {
  top: 42%;
  left: -42%;
  align-items: flex-start;
}
.size-note-right {
  top: 42%;
  right: -42%;
  align-items: flex-end;
}

/* サイズ注釈→写真の曲線矢印 */
.size-arrow {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.size-arrow-left {
  top: 50%;
  left: -30%;
  width: 175px;
}
.size-arrow-right {
  top: 50%;
  right: -30%;
  width: 175px;
  transform: scaleX(-1);
}

/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-wrap {
  --wave: 50px;
  position: relative;
  z-index: 2;
  margin: calc(-1 * var(--wave)) 0;
}
.marquee {
  position: relative;
  white-space: nowrap;
  background: #faf7ef;
  color: #17a67a;
  padding: calc(66px + var(--wave)) 0;
  font-size: 45px;
  /* 上下の色境界を波形ライン（line1/line2）の形に切り抜く */
  -webkit-mask:
    url(../img/wave-top-fill.svg) top / 100% var(--wave) no-repeat,
    url(../img/wave-bottom-fill.svg) bottom / 100% var(--wave) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--wave)) no-repeat;
  mask:
    url(../img/wave-top-fill.svg) top / 100% var(--wave) no-repeat,
    url(../img/wave-bottom-fill.svg) bottom / 100% var(--wave) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--wave)) no-repeat;
}
.marquee-viewport {
  overflow: hidden;
}
/* 上下の波形ライン（line1/line2）— 色境界のマスクと同じ位置に重ねる */
.marquee-line {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: var(--wave);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.marquee-line-top {
  top: 0;
  transform: none;
}
.marquee-line-bottom {
  bottom: 0;
  transform: none;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 60s linear infinite; /* linear等速なので duration 倍 = 速度半分 */
}
.marquee-track span {
  display: inline-block;
}
/* ✦ は字形の左右のアキが非対称で、前後の空白が同数でも左に寄って見える
   （実測：左36.9px / 右55.4px）。字形は歪ませず、margin で左右のアキを均す */
.mq-star {
  font-style: normal;
  display: inline-block;
  margin-left: 9px;
  margin-right: -9px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ================================================================
   ITEM LINEUP
   ================================================================ */
.item-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 44px var(--pc-pad);
  /* hidden はスクロールコンテナを作り、中の .item-info の position:sticky を無効化する。
     clip は同じくはみ出しを切るがスクロールコンテナを作らないので sticky が効く */
  overflow: clip;
}

.item-photo {
  flex: 0 0 41%;
  max-width: 41%;
}
.item-photo img {
  width: 100%;
}

/* ---- 写真スタック（複数写真を重ね、スクロールでポン／情報ホバーで前面） ---- */
/* 各層は --x / --y / --w で個別に位置・サイズを指定（デザイン採寸値を反映）。
   --stack-h はスタックの高さ＝幅に対する比率。重なり順は DOM 順（後ろほど前面）。 */
.photo-stack {
  position: relative;
  padding-top: var(--stack-h, 130%);
}
.photo-layer {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, 100%);
}
/* 2枚目以降：初期は下＋透明 → stack-in で「ポン」と押し上げ
   （group でラップされても効くよう data-photo で判定する） */
.photo-layer:not([data-photo="0"]) {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.5s ease-out, transform 0.8s cubic-bezier(0.57, 0, 0, 0.96);
}
.item-photo.stack-in .photo-layer:not([data-photo="0"]) {
  opacity: 1;
  transform: translateY(0);
}
.photo-layer[data-photo="1"] { transition-delay: 0.12s; }
.photo-layer[data-photo="2"] { transition-delay: 0.26s; }

/* 写真上の商品番号ラベル（--nx / --ny は写真層に対する位置） */
.photo-num {
  position: absolute;
  left: var(--nx, 0);
  top: var(--ny, 0);
  z-index: 2;
  font-family: "Chelsea Market", cursive;
  font-weight: 400;
  line-height: 1;
  color: var(--num-color, var(--lime));
  pointer-events: none;
}
/* 情報ホバーで該当写真を前面に（写真スタックがあるブロックのみ） */
.photo-layer.front { z-index: 10; }
.item-info [data-photo] { cursor: default; }

.item-info {
  flex: 1;
  min-width: 0;
}

.item {
  position: relative;
  max-width: 460px;
}
.item + .item {
  margin-top: 32px;
}

.item-name {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.item-num {
  margin-right: 4px;
}

.item-desc {
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 20px;
}

.item-row {
  position: relative; /* SHOPリンクを行全体に広げる基準 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid currentColor;
  transition: background-color 0.25s ease;
}
/* ホバーで色が変わる範囲＝クリックできる範囲にする。
   マークアップを変えずに、SHOPリンクの疑似要素で行全体を覆う */
.item-shop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* ホバーで地にライムグリーン。ライム背景のセクションでは白に */
.item-row:hover {
  background: var(--lime);
}
.sec-lime .item-row:hover {
  background: var(--white);
}
.item-row:last-of-type {
  border-bottom: 1px solid currentColor;
}

.item-code {
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.item-size {
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.item-price {
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}
/* 「span」で書くと行分割が生成する .line-mask / .line-inner / 単語span にも当たり、
   ¥6,600 まで 14px に縮んでしまう。必ず .tax-note に限定すること */
.item-price .tax-note {
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap; /* 「( Tax Incl. )」を内部の空白で折り返させない */
}

.item-shop {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.item-shop img {
  width: 40px;
}
.item-shop:hover {
  opacity: 0.7;
}

/* 手描き矢印（装飾） */

/* ================================================================
   ALL ITEM
   ================================================================ */
.all-item {
  padding: 124px var(--pc-pad);
  text-align: center;
  /* スライドイン前のラベル(-64px)・矢印(+64px)が左右にはみ出すため、ここで切る。
     hidden ではなく clip：スクロールコンテナを作らず sticky 等に影響しない */
  overflow: clip;
}
.all-item-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 40px;
  color: var(--white);
}
.all-item-link img, .all-item-link svg {
  width: 48px;
}
.all-item-link:hover {
  opacity: 0.8;
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  padding: 180px var(--pc-pad) 150px;
  background: var(--white);
  color: var(--blue);
  font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive;
  font-weight: 400;
}
.footer-inner {
  display: flex;
  gap: 60px;
  max-width: 1280px;
  margin: 0 auto;
}
.footer-logo {
  flex-shrink: 0;
}
.footer-logo img {
  width: 130px;
}
.footer-credits {
  flex: 1;
}
.credit-title {
  font-size: 12px;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.footer-credits .credit-block + .credit-block {
  margin-top: 24px;
}
.footer-credits p,
.footer-company p {
  font-size: 12px;
  line-height: 1.7;
}
.footer-company {
  flex-shrink: 0;
  min-width: 260px;
}
.footer-company a {
  text-decoration: underline;
}
.footer-notice {
  max-width: 1280px;
  margin: 40px auto 0;
  text-align: right;
}
.footer-notice p {
  font-size: 12px;
  color: var(--ink);
}

/* ================================================================
   InView Fade-in
   ================================================================ */
/* 移動を伴う演出は .line-inner と同じ ease-in-out 系で質感を揃える
   （前半でためて後半に走る。フェードだけの要素は ease-out のままでよい） */
.inview {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.8s cubic-bezier(0.57, 0, 0, 0.96);
}
.inview.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FEATURE：写真（.inview / transform 0.8s）が出きるのに合わせて、サイズ注釈と矢印が
   上に重なって出る。時間任せにせず写真の is-visible を起点にするので写真より先には出ない。
   矢印の .arrow-fade.is-in と詳細度が並ぶため、必ずそれより後ろに置くこと（274行目付近） */
.feature-photo .size-note,
.feature-photo .size-arrow {
  opacity: 0;
  transition: opacity 0.6s ease-out 0.8s; /* 遅延は写真の transform 0.8s に合わせる */
}
.feature-photo.is-visible .size-note,
.feature-photo.is-visible .size-arrow {
  opacity: 1;
}

/* ---- Copy reveal（コピーが下から出てくる） ---- */
[data-up] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.5s ease-out, transform 0.8s cubic-bezier(0.57, 0, 0, 0.96);
  will-change: opacity, transform;
}
[data-up].is-up {
  opacity: 1;
  transform: none;
}
/* ALL ITEM だけは上からではなくスライドイン。ラベルは左から・矢印は右から入る。
   親は透明度だけを担当し、移動は中の2要素が別々に持つ（親を動かすと両方が同じ向きになる）。
   :not(.is-up) を付けないと [data-up].is-up と詳細度が並び、後勝ちで着地が壊れる */
.all-item-link[data-up]:not(.is-up) {
  transform: none;
}
.all-item-label,
.all-item-link img,
.all-item-link svg {
  display: inline-block; /* inline のままだと transform が効かない */
  transition: transform 0.8s cubic-bezier(0.57, 0, 0, 0.96);
}
.all-item-link[data-up]:not(.is-up) .all-item-label { transform: translateX(-64px); }
.all-item-link[data-up]:not(.is-up) img,
.all-item-link[data-up]:not(.is-up) svg { transform: translateX(64px); }
/* テキストラッパーのブロックアニメは無効化（個別コピーで動かすため二重動作を防ぐ） */
.concept-inner.inview,
.item.inview,
.footer-inner.inview {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 行ごとのマスク出現（参考サイト風：マスク領域から下から順に押し上げ） */
.line-mask {
  display: block;
  overflow: hidden;
}
/* ① イージング：ease-out 系（開始直後が最速）だと「ヌルッ」と出るため、
   前半でためて後半に一気に走る ease-in-out 系にする（参考サイトと同系の形）。
   進捗率： 経過10%で1% / 25%で14% / 50%で82% ＝ 前半はほぼ静止＝ため */
.line-inner {
  display: inline-block;
  vertical-align: top;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.57, 0, 0, 0.96), opacity 0.5s ease-out;
  will-change: transform, opacity;
}
.lines-split.is-up .line-inner {
  opacity: 1;
  transform: translateY(0);
}
/* ② duration を役割ごとに変える。全部同じ長さだと着地が揃って機械的に見えるため、
   見出しは短く歯切れよく・本文は長くゆったり、と差をつける。
   値は transition の記述順（transform, opacity）に対応 */
.concept-title-en .line-inner,
.concept-title-ja .line-inner,
.feature-title .line-inner { transition-duration: 0.6s, 0.35s; }
.concept-text .line-inner { transition-duration: 0.95s, 0.6s; }
/* 商品情報は点数が多く、ゆったりだともたつくのでシャキシャキ出す。
   要素間のタメ（STEP_BLOCK）は残したまま、1つ1つの動きだけ速くする */
.item-name .line-inner { transition-duration: 0.45s, 0.3s; }
.item-desc .line-inner { transition-duration: 0.55s, 0.35s; }
/* ④ 移動距離も役割で変える。見出しは大きく振って勢いを出し、本文は控えめに。
   マスクで隠すため 100% を下回ると文字の頭が見える。本文は行高が詰まっていて
   106% だと余裕が1px台しか残らず、フォント差で露出しかねないので 112% を下限とする */
.concept-title-en .line-inner,
.feature-title .line-inner,
.item-name .line-inner { transform: translateY(122%); }
.concept-title-ja .line-inner { transform: translateY(116%); }
.concept-text .line-inner,
.item-desc .line-inner { transform: translateY(112%); }
/* 品番・サイズ・価格：行分割せず要素ごとにフェードのみ（スライドなし）。
   順番は行分割組と同じ通しディレイ（JS がインラインで transition-delay を振る） */
.fade-only {
  opacity: 0;
  transition: opacity 0.3s ease-out; /* ② 品番・価格・SHOP は短く歯切れよく */
}
.fade-only.is-up { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-up] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .line-inner { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fade-only { opacity: 1 !important; transition: none !important; }
  .feature-photo .size-note, .feature-photo .size-arrow { opacity: 1 !important; transition: none !important; }
  .hero-arrow svg:hover, .s-arrow-black-down:hover,
  .s-arrow-curve-1:hover, .size-arrow:hover,
  .schools-photo[data-slides] .schools-arrow:hover:not(.shake) { animation: none !important; }
  .schools-arrow.shake { animation: none !important; }
}

/* ================================================================
   Responsive
   ================================================================ */
@media screen and (max-width: 768px) {
  :root {
    --pc-pad: 24px;
  }

  /* HERO */
  .hero {
    padding: 20px 20px 80px;
  }
  /* 矢印を絶対配置で下にはみ出させ、次セクションの境目をまたがせる
     （margin collapse に依存しない確実な方法） */
  .hero-arrow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -44px;
    margin: 0;
    z-index: 3;
  }
  /* SP: 縦積み（ブロブ → タイトル → 緑写真 → 矢印） */
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hero-photo-blob { max-width: 88%; }
  .hero-photo-rect { max-width: 79%; }
  .hero-title { margin: 4px 0; }
  .hero-tnf { width: 88px; margin-bottom: 8px; }
  .hero-headline-pc { display: none; }
  .hero-headline-sp { display: block; width: 262px; }
  .hero-arrow img, .hero-arrow svg { width: 129px; }

  /* CONCEPT */
  .concept { padding: 118px 24px 121px; }
  .concept-title-en { font-size: 37px; line-height: 43px; }
  .concept-title-ja { font-size: 30px; margin-bottom: 32px; }
  .concept-text { font-size: 15px; line-height: 2; }
  .br-sp { display: inline; }
  .br-pc { display: none; }

  /* SCHOOLS（SP：黒ブロブ→青ブロブの順。矢印・1/5 表示） */
  /* スライドショーの左右矢印だけ線を細く。SVGは PC/SP 共用で stroke-width="8" の
     presentation attribute を持つが、CSS の方が優先度が高いので SP だけ 6px に上書きできる
     （non-scaling-stroke 指定なのでこの値がそのまま画面上の実px） */
  .s-arrow-blue-left path, .s-arrow-blue-right path,
  .s-arrow-black-left path, .s-arrow-black-right path { stroke-width: 6; }

  .schools { padding: 56px 24px 80px; }
  .schools-inner { min-height: auto; display: flex; flex-direction: column; gap: 26px; align-items: center; }
  .script-heading { font-size: 43px; }
  .schools-label { position: static; order: 0; align-self: flex-start; }
  .parks-label { position: static; order: 4; align-self: flex-end; margin-right: 6%; margin-top: 57px; }
  .schools-photo { position: relative; width: 89% !important; text-align: center; }
  .schools-photo-right { order: 1; top: -10px; }  /* 黒ブロブ（2人）を先に */
  .schools-photo-left { order: 3; margin-top: -80px; }   /* 青ブロブ（ポール）を後に・黒ブロブに寄せる */
  .schools-arrow { display: block; }
  .s-arrow-black-down { top: -100px; left: 93px; width: 226px; }
  .s-arrow-black-left { top: 42%; left: -9%; width: 27px; }
  .s-arrow-black-right { top: 42%; right: -13%; width: 27px; }
  /* 青ブロブ左右の ← → 矢印（少し下げて内側に） */
  .s-arrow-blue-left { top: 50%; left: -7%; width: 27px; }
  .s-arrow-blue-right { top: 50%; right: -7%; width: 27px; }
  /* 見た目は 27px 幅のままタップ領域だけ広げる。指で押すには小さすぎて
     （Apple推奨 44x44px）狙いが外れ、スライドが切り替わらないため。
     content-box にして width=描画幅を保ち、padding で box を外側へ広げ、
     同値の負マージンで見た目の位置を元に戻す */
  .schools-photo[data-slides] .s-arrow-black-left,
  .schools-photo[data-slides] .s-arrow-black-right,
  .schools-photo[data-slides] .s-arrow-blue-left,
  .schools-photo[data-slides] .s-arrow-blue-right {
    box-sizing: content-box;
    padding: 12px 16px;
    margin: -12px -16px;
  }
  /* 青ブロブ下→parksの下から出る曲線＋↑（.schools-inner 基準） */
  .s-arrow-curve-1 { top: auto; bottom: -86px; left: 14%; width: 209px; z-index: 2; }
  .frac-label { display: inline-block; position: static; margin-top: -25px; font-size: 33px; }
  .frac-left { margin-top: -11px; }  /* 青ブロブ（もこもこ）下の1/5 */

  /* FEATURE（SP：147cmを写真の上・128cmを写真の下） */
  .feature { padding: 56px 24px 90px; }
  /* feature1（オレンジ）を上げて schools の青い曲線矢印の領域に被せる（矢印自体は上に表示） */
  .feature.sec-orange { margin-top: -50px; padding-top: 83px; padding-bottom: 140px; position: relative; z-index: 1; }
  .feature-photo { max-width: 88%; }
  /* margin-bottom は「見出し ⇔ 注釈」の見た目が「注釈 ⇔ 写真」(22px) と揃う値 */
  .feature-title { font-size: 37px; line-height: 43px; margin-bottom: 92px; }
  .feature.sec-blue { padding: 56px 24px 148px; }
  /* 見出しの行ボックスには文字下のアキが含まれ、要素間 20px でも見た目は 31px 空く。
     注釈の下側（22px）と視覚的に揃うよう 9px 詰める */
  .feature.sec-blue .feature-title { margin-bottom: 93px; }
  /* ブルーは左=上・右=下（オレンジと上下反転）。
     注釈と写真の空きを上下で揃える（旧: 上14px / 下30px → 22pxずつ。注釈の高さ60px + 22px = 82px） */
  .feature.sec-blue .size-note-left { top: -82px; bottom: auto; }
  .feature.sec-blue .size-note-right { top: auto; bottom: -82px; }
  .feature.sec-blue .size-arrow-right { transform: none; top: -73px; right: 33%; width: 110px; }
  .feature.sec-blue .size-arrow-left { transform: none; top: auto; bottom: -64px; left: 19%; width: 144px; }
  .size-note-right { top: -54px; right: 2%; bottom: auto; }
  .size-note-left { top: auto; bottom: -50px; left: 2%; }
  /* 注釈と写真の空きを上下で揃える（旧: 上26px / 下18px → 22pxずつ） */
  .feature.sec-orange .size-note-right { top: -82px; }
  .feature.sec-orange .size-note-left { bottom: -82px; }
  .size-note em { font-size: 23px; }
  .size-note .wear { font-size: 23px; }
  .size-arrow-right { top: -40px; right: 8%; width: 62px; transform: scaleX(-1); }
  .size-arrow-left { top: auto; bottom: -34px; left: 8%; width: 62px; transform: scaleX(-1); }
  .feature.sec-orange .size-arrow-right { width: 112px; transform: none; top: -66px; right: 32%; }
  .feature.sec-orange .size-arrow-left { width: 147px; transform: none; top: auto; bottom: -64px; left: 27%; }

  /* MARQUEE */
  .marquee-wrap { --wave: 14px; }
  .marquee { font-size: 33px; padding: calc(17px + var(--wave)) 0; }

  /* ITEMS */
  /* SP：全ブロック テキスト上・写真下 */
  .item-block {
    flex-direction: column-reverse; /* DOM: 写真→情報 を反転（情報を上に） */
    gap: 28px;
    padding: 54px 45px 189px;
  }
  /* SPは写真が縦に並ぶので、.item-photo 単位の一括表示だと画面外の2・3枚目まで
     出てしまう。一括表示を打ち消し、各レイヤーが画面に入った時点で個別に出す。
     打ち消し側と同じ詳細度(0,3,0)なので、表示側をこの後に書いて後勝ちさせる */
  .item-photo.stack-in .photo-layer:not([data-photo="0"]) {
    opacity: 0;
    transform: translateY(46px);
  }
  /* 打ち消し側と同じ詳細度(0,4,0)にして、後に書くことで勝たせる */
  .item-photo .photo-layer.in-view:not([data-photo="0"]) {
    opacity: 1;
    transform: translateY(0);
  }
  /* 各ブロックの1枚目の写真はブロック上端に接しており、マスクSVGの上端にある
     約0.6pxの透明余白から、ブロック自身の背景色が細い帯として前セクションとの
     境界に出る（ブルーの下に白帯 等）。写真をわずかに上へ出して帯を隠す */
  .item-block .photo-layer[data-photo="0"] { margin-top: -2px; }
  .item-block-b,
  .item-block-d {
    flex-direction: column; /* DOM: 情報→写真（情報が上） */
  }
  .item-photo { flex: none; max-width: 100%; width: 92%; margin: 0 auto; }
  .item-block-b .item-photo { width: 84vw; max-width: none; align-self: flex-start; margin-left: calc(50% - 42vw); }

  /* ---- SP block-a：design2 採寸（390px基準 / セクション高1782）----
     「全幅の黒写真 → 情報 → マゼンタ＋青の重なり」。item-photo と photo-stack を
     display:contents で解消し、先頭層と group を item-block の直接の子として並べる */
  .item-block-a {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 0 0 36px;
  }
  .item-block-a .item-photo,
  .item-block-a .photo-stack { display: contents; }
  /* 先頭層（黒）＝画面幅より少し広く全幅ブリード（w408 / x-9） */
  .item-block-a .photo-layer[data-photo="0"] {
    position: relative;
    left: auto;
    top: auto;
    width: 104.6%;
    margin-left: -2.3%;
    order: 1;
  }
  .item-block-a .item-info { order: 2; padding: 0 44px; }
  /* マゼンタ＋青のペア（group内で重ねる。x32 w327 / 高さ567） */
  .item-block-a .photo-group {
    order: 3;
    position: relative;
    width: 83.8%;
    margin-left: 8.2%;
    /* padding-% は「親の幅(390)」基準。目標高さ567px = 390の145.4% */
    padding-top: 145.4%;
  }
  .item-block-a .photo-layer[data-photo="1"] { --x: 0%; --y: 0%; --w: 82.9%; }
  .item-block-a .photo-layer[data-photo="2"] { --x: 14.1%; --y: 34.9%; --w: 85.9%; }
  .item-block-a .photo-num { font-size: 58px; }
  .item-block-a .photo-num-1 { --nx: 15.2%; --ny: 22.6%; }
  .item-block-a .photo-num-2 { --nx: 78.2%; --ny: 55.6%; }

  /* ---- SP block-b：design2 採寸（セクション高1458 / 構造は block-a と同じ）---- */
  .item-block-b {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 0 0 40px;
  }
  .item-block-b .item-photo,
  .item-block-b .photo-stack { display: contents; }
  .item-block-b .photo-layer[data-photo="0"] {
    position: relative;
    left: auto;
    top: auto;
    width: 104.6%;
    margin-left: -2.3%;
    order: 1;
  }
  .item-block-b .item-info { order: 2; padding: 0 44px; }
  /* ライム＋オレンジのペア（x35 w325 / 高さ616 = 390の158%） */
  .item-block-b .photo-group {
    order: 3;
    position: relative;
    width: 83.3%;
    margin-left: 9%;
    padding-top: 158%;
  }
  .item-block-b .photo-layer[data-photo="1"] { --x: 13.8%; --y: 0%; --w: 86.2%; }
  .item-block-b .photo-layer[data-photo="2"] { --x: 0%; --y: 42.9%; --w: 84.9%; }
  .item-block-b .photo-num { font-size: 58px; }
  .item-block-b .photo-num-1 { --nx: 73.3%; --ny: 46.6%; }

  /* ---- SP block-c：design2 採寸（セクション高1435 / 構造は block-a と同じ）---- */
  .item-block-c {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 0 0 30px;
  }
  .item-block-c .item-photo,
  .item-block-c .photo-stack { display: contents; }
  .item-block-c .photo-layer[data-photo="0"] {
    position: relative;
    left: auto;
    top: auto;
    width: 104.6%;
    margin-left: -2.3%;
    order: 1;
  }
  .item-block-c .item-info { order: 2; padding: 0 44px; }
  /* ブルー＋ピンクのペア（x29 w331 / 高さ582 = 390の149.2%） */
  .item-block-c .photo-group {
    order: 3;
    position: relative;
    width: 84.9%;
    margin-left: 7.4%;
    padding-top: 149.2%;
  }
  .item-block-c .photo-layer[data-photo="1"] { --x: 16.3%; --y: 0%; --w: 83.7%; }
  .item-block-c .photo-layer[data-photo="2"] { --x: 0%; --y: 37.6%; --w: 84%; }
  .item-block-c .photo-num { font-size: 58px; }
  .item-block-c .photo-num-1 { --nx: 37.3%; --ny: 14%; }

  /* ---- SP block-d：design2 採寸（セクション高1552 / 構造は block-a と同じ）---- */
  .item-block-d {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 0 0 54px;
  }
  .item-block-d .item-photo,
  .item-block-d .photo-stack { display: contents; }
  .item-block-d .photo-layer[data-photo="0"] {
    position: relative;
    left: auto;
    top: auto;
    width: 104.6%;
    margin-left: -2.3%;
    order: 1;
  }
  .item-block-d .item-info { order: 2; padding: 0 44px; }
  /* ブルー＋ブラックのペア（x25 w333 / 高さ601 = 390の154.1%） */
  .item-block-d .photo-group {
    order: 3;
    position: relative;
    width: 85.4%;
    margin-left: 6.4%;
    padding-top: 154.1%;
  }
  .item-block-d .photo-layer[data-photo="1"] { --x: 0%; --y: 0%; --w: 88.6%; }
  .item-block-d .photo-layer[data-photo="2"] { --x: 14.4%; --y: 44.4%; --w: 85.6%; }
  .item-block-d .photo-num { font-size: 58px; }
  .item-block-d .photo-num-1 { --nx: 68.4%; --ny: 21.6%; --num-color: var(--orange); }
  .item { max-width: 100%; }
  /* letter-spacing: 「4. S/S Back Graphic」が fs30 で 301.7px とコンテナ302pxに対し
     余裕0.3pxしかなく折り返してしまうため、わずかに詰めてカンプ同様2行に収める */
  .item-name { font-size: 30px; line-height: 1.1; margin-bottom: 4px; letter-spacing: -0.01em; }
  .item-desc { font-size: 13px; line-height: 1.7; margin-bottom: 7px; }
  .item-code { font-size: 17px; line-height: 1.4; }
  .item-size { font-size: 17px; line-height: 1.2; }

  /* ALL ITEM */
  .all-item { padding: 39px 24px; }
  .all-item-link { font-size: 51px; gap: 14px; color: #000; }
  .all-item-link img, .all-item-link svg { width: 60px; }

  /* FOOTER */
  .footer { padding: 44px 45px 32px; }
  .footer-logo img { width: 113px; }
  .footer-inner {
    flex-direction: column;
    gap: 48px;
  }
  .footer-company { min-width: 0; margin-top: -24px; }
  .footer-notice { text-align: left; margin-top: 32px; }
}

/* ================================================================
   PC（769px以上）専用の調整
   SP（max-width:768px）には一切影響しない。PCの微調整はすべてここに書く
   ================================================================ */
@media screen and (min-width: 769px) {
  /* PCレイアウトは横方向をすべて % / vw で組み、幅に応じて比例縮小させる（min-width なし）。
     基準は design2 の 1512px。 */

  /* HERO */
  /* design2 実測では写真上端 y=79。padding 85px だと grid の中央揃えの分だけ
     下がって y=115 になり、上部が間延びして見えるため詰める */
  .hero { padding-top: 49px; }
  /* design2 実測（1512基準・行ごとに走査して確定）
       左ブロブ x76〜608（幅532）
       TNFロゴ  x677〜815（幅138・中心746）
       見出し   x643〜871（幅228・中心757）← ロゴとは中心が11pxずれている
       右四角   x916〜1413（幅497）
     中央列は 647〜877（中心762）なので、ロゴを16px・見出しを5px 左へ寄せる。
     全て fr / % なので幅の縮小に比例して追従する */
  .hero-inner { max-width: 1360px; grid-template-columns: 532fr 230fr 520fr; }
  /* width:100% が無いと justify-self:start/end で内容幅（＝画像の実寸944/946px）に縮み、
     max-width が効かないまま小さく表示される */
  /* 中央ロゴ側へ少し寄せる。transform は .inview の出現アニメが使うため
     position:relative + left で動かす（レイアウトにも影響しない）。
     右四角も margin-right で同じ「左へ寄る」動きに揃えている */
  .hero-photo-blob { max-width: 532px; width: 100%; position: relative; left: 6px; }
  .hero-photo-rect { max-width: 496px; width: 100%; margin-right: 8px; }
  .hero-title { width: 100%; justify-self: center; }
  /* 中央列(230)に対し 229/230=99.6%。translateX は自身の幅基準なので -5/229=-2.18% */
  .hero-headline-pc { width: 99.6%; max-width: none; transform: translateX(-2.18%); }
  /* 138/230=60%。ロゴは -16px 左へ = -16/138=-11.59% */
  .hero-tnf { width: 60%; max-width: none; transform: translateX(-11.59%); margin: 0 auto 32px; }
  .hero { padding-bottom: 80px; }
  .hero-arrow { position: absolute; left: 0; right: 0; bottom: -73px; width: 13.5vw; max-width: 205px; margin: 0 auto; z-index: 5; }
  .hero-arrow img, .hero-arrow svg { width: 100%; }

  /* CONCEPT */
  .concept-title-ja { margin-bottom: 29px; }

  /* SCHOOLS */
  .schools { padding: 70px 3.968% 40px; }
  .script-heading { font-weight: 400; }
  .schools-photo-left { width: 45%; top: 96px; left: 0%; }
  .schools-photo-right { width: 43%; top: -6px; right: 4%; }
  .schools-label { top: -48px; left: 15.8%; }
  .parks-label { top: auto; bottom: -20px; left: 58%; }
  .frac-left { top: -2%; left: 8%; }
  .frac-right { top: auto; bottom: -6%; right: 40%; }
  .s-arrow-black-down { top: -132px; left: 40%; width: 41.481%; }
  .s-arrow-curve-1 { top: auto; bottom: -87px; left: 17%; width: 38.889%; }
  .s-arrow-blue-left { bottom: 31%; left: 1%; width: 8.436%; }
  .s-arrow-blue-right { bottom: 27%; right: 1%; width: 8.025%; }
  .s-arrow-black-left { top: 42%; left: -10%; width: 8.828%; }
  .s-arrow-black-right { top: 38%; right: -11%; width: 9.905%; }

  /* FEATURE（大判・オレンジ/ブルー共通） */
  .feature { padding-left: 3.968%; padding-right: 3.968%; }
  .feature-title { font-size: 45px; margin-bottom: 26px; }
  /* サイズ注釈が写真基準の -74% 等で外へ出るため、写真も幅に追随させる。
     design2 実測：枠の外寸 456px（x528〜984・中央揃え）。
     width:% の基準は .feature の「内容幅」（＝1512 − 左右padding 3.968%×2 = 1392）なので
     ビューポート幅ではなく 456/1392 で算出する */
  .feature-photo { max-width: none; width: 32.759%; }
  .size-note .wear-badge { font-size: 17px; padding: 4px 8px; }

  /* MARQUEE */
  .marquee { padding: calc(26px + var(--wave)) 0; }

  /* FEATURE1（オレンジ / S/S Back） */
  /* 左右はショートハンドで上書きせず % を維持する（60px 固定に戻ると幅縮小に追随しない） */
  .feature.sec-orange { padding: 70px 3.968% 124px; text-align: center; }
  .feature.sec-orange .size-note-left { top: 29%; left: -74%; align-items: center; }
  .feature.sec-orange .size-note-right { top: 40%; right: -76%; align-items: center; }
  /* PCのみ左右の矢印画像を入れ替え（SPは main.js の _sp を維持） */
  .feature.sec-orange .size-arrow-left { transform: none; top: 13%; left: -56%; width: 71.021%; content: url(../img/yajirushi_c_4.svg); }
  .feature.sec-orange .size-arrow-right { transform: none; top: 52%; right: -56%; width: 66.983%; content: url(../img/yajirushi_c_5.svg); }

  /* ITEMS */
  .item-name { font-size: 30px; margin-bottom: 7px; }
  .item-desc { line-height: 1.4; margin-bottom: 10px; }
  .item-price { line-height: 1.2; }
  .item-size { font-family: "Chelsea Market", "Zen Kaku Gothic New", cursive; font-weight: 400; font-size: 16px; line-height: 20px; }
  .item + .item { margin-top: 20px; }
  /* item-block-a（白 / L/S Middy・Mobility Short） */
  .photo-num { font-size: 4.894vw; }
  /* PCでは group ラッパーを解消し、3層すべてを photo-stack 直下で絶対配置する */
  .photo-group { display: contents; }

  /* design2 採寸（1512px基準）：写真 x257 幅645 / 情報 x950 幅294・上端y665 */
  .item-block-a .item-photo { --stack-h: 186.4%; }
  .item-block-a .photo-layer[data-photo="0"] { --x: 0%; --y: 0%; --w: 80.5%; }
  .item-block-a .photo-layer[data-photo="1"] { --x: 43%; --y: 37.5%; --w: 57%; }
  .item-block-a .photo-layer[data-photo="2"] { --x: 1.4%; --y: 58%; --w: 59.5%; }
  .item-block-a .photo-num-1 { --nx: 15%; --ny: 19.9%; }
  .item-block-a .photo-num-2 { --nx: 78.4%; --ny: 49.5%; }
  .item-block-a { justify-content: flex-start; align-items: flex-start; gap: 4.017%; padding: 84px 3.968% 77px 17%; }
  .item-block-a .item-photo { flex: 0 0 53.975%; max-width: none; }
  .item-block-a .item-info { flex: 0 0 24.603%; max-width: none; }

  /* ---- 順送り配置（[data-seq] ブロック共通）----
     前の写真の上端がウィンドウ上端に達するたびに次の写真が配置される
     （段階は JS が step-N をブロックに付与）。
     段階クラスをブロック側に持たせることで、info と photo の DOM 順に依存しない
     （b・d は info が先、a・c は photo が先） */
  /* stack-in による一括表示を打ち消す。表示側より詳細度を低く保つこと */
  .item-block[data-seq] .photo-layer:not([data-photo="0"]) {
    opacity: 0;
    transform: translateY(46px);
    transition-delay: 0s;
  }
  .item-block[data-seq].step-1 .photo-layer[data-photo="1"],
  .item-block[data-seq].step-2 .photo-layer[data-photo="2"] {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .item-block[data-seq] .photo-layer:not([data-photo="0"]) { opacity: 1; transform: none; }
  }

  /* ---- 情報カラムは sticky で追従 ----
     写真カラムがブロック高の大半を占め（1200px前後）、情報は270〜610pxしかないため、
     スクロールすると情報だけ先に流れてしまう。デザインの位置（margin-top）から始まり、
     画面上端120pxまで来たらそこで留まる。
     flex アイテムは既定で縦に伸びる（stretch）と sticky が効かないため align-self を明示 */
  .item-block .item-info {
    position: sticky;
    top: 120px;
    align-self: flex-start;
  }
  /* item-block-b（マゼンタ / L/S Short Middy） info左・photo右 */
  /* design2 採寸（1512px基準）：情報 x272 幅300・上端y807 / 写真 x657 幅599 */
  .item-block-b .item-photo { --stack-h: 196.5%; }
  .item-block-b .photo-layer[data-photo="0"] { --x: 13.4%; --y: 0%; --w: 86.6%; }
  .item-block-b .photo-layer[data-photo="1"] { --x: 0%; --y: 34.3%; --w: 63.8%; }
  .item-block-b .photo-layer[data-photo="2"] { --x: 33.7%; --y: 59%; --w: 63.1%; }
  .item-block-b .photo-num-1 { --nx: 74%; --ny: 49.7%; --num-color: var(--blue); }
  .item-block-b { justify-content: flex-start; align-items: flex-start; gap: 7.203%; padding: 89px 3.968% 91px 17.989%; }
  .item-block-b .item-info { flex: 0 0 25.424%; max-width: none; }
  .item-block-b .item-photo { flex: 0 0 50.763%; max-width: none; }
  /* item-block-c（白 / S/S Back Graphic Wide Tee） photo左・info右 */
  /* design2 採寸（1512px基準）：写真 x257 幅629 / 情報 x950 幅292・上端y910 */
  .item-block-c .item-photo { --stack-h: 204.8%; }
  .item-block-c .photo-layer[data-photo="0"] { --x: 0%; --y: 0%; --w: 82.5%; }
  .item-block-c .photo-layer[data-photo="1"] { --x: 39.9%; --y: 34.4%; --w: 60.1%; }
  .item-block-c .photo-layer[data-photo="2"] { --x: 9.5%; --y: 61.5%; --w: 60.9%; }
  .item-block-c .photo-num-1 { --nx: 37.2%; --ny: 13.9%; --num-color: var(--magenta); }
  .item-block-c { justify-content: flex-start; align-items: flex-start; gap: 5.356%; padding: 94px 3.968% 78px 17%; }
  .item-block-c .item-photo { flex: 0 0 52.636%; max-width: none; }
  .item-block-c .item-info { flex: 0 0 24.435%; max-width: none; }
  /* item-block-d（ライム / S/S Big Root Tee） info左・photo右 */
  /* design2 採寸（1512px基準）：情報 x272 幅300・上端y812 / 写真 x648 幅608 */
  .item-block-d .item-photo { --stack-h: 195.2%; }
  .item-block-d .photo-layer[data-photo="0"] { --x: 14.6%; --y: 0%; --w: 85.4%; }
  .item-block-d .photo-layer[data-photo="1"] { --x: 0%; --y: 35.1%; --w: 66.3%; }
  .item-block-d .photo-layer[data-photo="2"] { --x: 27.1%; --y: 61.8%; --w: 63.5%; }
  .item-block-d .photo-num-1 { --nx: 68.4%; --ny: 23.7%; --num-color: var(--orange); }
  .item-block-d { justify-content: flex-start; align-items: flex-start; gap: 6.441%; padding: 73px 3.968% 72px 17.989%; }
  .item-block-d .item-info { flex: 0 0 25.424%; max-width: none; }
  .item-block-d .item-photo { flex: 0 0 51.525%; max-width: none; }

  /* FOOTER */
  .footer { padding: 55px var(--pc-pad) 40px; }
  .footer-inner { max-width: 1100px; }
  .footer-credits { margin-left: 170px; }
  .footer-credits p,
  .footer-company p { font-size: 14px; line-height: 1.5; }
  .footer-notice { max-width: 1100px; text-align: left; padding-left: 840px; white-space: nowrap; }

  /* ALL ITEM */
  .all-item { padding: 72px var(--pc-pad); text-align: center; }
  .all-item-link { color: #000; font-size: 92px; }
  .all-item-link img, .all-item-link svg { width: 113px; }

  /* FEATURE2（ブルー / L/S Middy） */
  .feature.sec-blue { padding: 122px 3.968% 106px; }
  /* PCのみ左右の矢印画像を入れ替え（SPは main.js の _sp を維持） */
  .feature.sec-blue .size-note-left { top: 43%; left: -77%; align-items: center; }
  .feature.sec-blue .size-note-right { top: 36%; right: -77%; align-items: center; }
  .feature.sec-blue .size-arrow-left { content: url(../img/yajirushi_o_1.svg); top: 58%; left: -57%; width: 70.071%; }
  .feature.sec-blue .size-arrow-right { content: url(../img/yajirushi_o_2.svg); transform: none; top: 18%; right: -58%; width: 70.309%; }
}