@charset "UTF-8";

/* ==========================================================================
   JENNI AUTUMN/WINTER COLLECTION Vol.1
   /Page/feature/jenni/260825_AWcollection/

   ■ 単位系（SP特化型デザイン）
     デザインは SP アートボード 375px の1枚のみ。PC(1400px) はその SP レイアウトを
     450px（= 375 × 1.2）でセンターに置き、左右に追従（sticky）要素を足す構成。
     そのため「デザイン1px」を表す --u を .p-feature に持たせ、全数値を
     calc(● * var(--u)) で記述している。展開結果は規約どおり:
       SP (767px以下) : --u = calc(100vw / 375)  →  calc(● * (100vw / 375))
       PC (768px以上) : --u = 0.12rem            →  ● × 1.2px の rem 値 (1rem = 10px)
     ※ PC専用要素（左右の追従ロゴ・ハート）はデザインが PC px で与えられているため
       --u を使わず rem を直接書いている。
   ========================================================================== */

/* パンくず下の余白（LPはパンくずとMVの間に余白がないため） */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ==========================================================================
   1. ベース（カスタムプロパティは :root ではなく .p-feature に定義する）
   ========================================================================== */
.p-feature {
  /* デザイン1px */
  --u: calc(100vw / 375);

  /* カラー */
  --pink-page: #f6cad9; /* PCの左右余白（ページ地） */
  --pink02: #f1b6ca;    /* センターカラム地 / ドットActive */
  --pink01: #eca2bb;    /* アクセントブロック */
  --cta: #ee558e;
  --brown: #611515;
  --sns-bg: #ffdfe9;

  /* フォント（Adobe Fonts の埋め込みコード未設置時は後続の代替で表示される） */
  --ff-serif: "source-serif-4", "Source Serif 4", "Times New Roman", serif;
  /* --ff-gothic: "sicgothicduex-hdl-e", "SicGothicDuex-HDL-E", var(--hirakaku, sans-serif); */
  --ff-gothic: "sicgothicduex-hdl-e", sans-serif;
  --ff-display: "ads-flaming", "ADS-flaming", var(--hirakaku, sans-serif);
  --ff-mplus: "M PLUS 1p", var(--hirakaku, sans-serif);

  background: var(--pink02);
  /* PC の追従ロゴ等がはみ出しても横スクロールを出さないための最終防波堤。
     hidden ではなく clip を使うのは、hidden がスクロールコンテナを作って
     子孫の position: sticky の基準をビューポートから奪ってしまうため。 */
  overflow-x: clip;
}

/* 必須指定 */
.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

.p-feature a {
  text-decoration: none;
}

.js .p-feature .fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

.js .p-feature .fade-in.is-active {
  opacity: 1;
}

.js .p-feature .fade-in.fade-delay--1{
  transition-delay: 0.2s;
}

.js .p-feature .fade-in.fade-delay--2{
  transition-delay: 0.4s;
}

/* スクロール連動フェード（下からふわっと）
   初期状態(opacity:0)は script.js が html に .js を付けたときだけ適用する。
   JS が落ちた／読み込めなかった場合に商品画像やCHECKボタンが永久に
   見えなくなるのを防ぐため。 */
.js .p-feature .fade-up {
  opacity: 0;
  transform: translateY(calc(30 * var(--u)));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .p-feature .fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .p-feature .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   2. レイアウト（PCは 1fr / センター450px / 1fr の3カラム）
   ========================================================================== */
.p-feature__main {
  background: var(--pink02);
}

/* ==========================================================================
   3. メインビジュアル
   ========================================================================== */
.p-mv {
  position: relative;
}

.p-mv__img {
  position: relative;
}

/* MV直下の白グラデーション（ロゴを読ませるための敷き） */
.p-mv__img::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(238 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.p-mv__logo {
  position: relative;
  z-index: 1;
  /* デザインのテキストボックス幅は 284 だが、Adobe Fonts 未適用時に
     "AUTUMN WINTER COLLECTION" が折り返さないよう全幅で中央寄せする */
  width: 100%;
  margin: calc(-15 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  font-family: var(--ff-serif);
  font-weight: 700;
  font-optical-sizing: auto;
  color: var(--cta);
  text-align: center;
  letter-spacing: 0.03em;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.p-mv__sub {
  font-size: calc(30 * var(--u));
  line-height: 1;
}

.p-mv__main {
  font-size: calc(40 * var(--u));
  line-height: 1;
}

.p-mv__txt {
  font-size: calc(18 * var(--u));
  line-height: 1.25;
}

/* ==========================================================================
   4. リード文（白ハート上に配置）
   ========================================================================== */
.p-lead {
  position: relative;
  width: calc(294 * var(--u));
  height: calc(240 * var(--u));
  margin: calc(60 * var(--u)) auto 0;
}
@media screen and (max-width: 767px) {
  .p-lead {
    margin: calc(62 * var(--u)) auto 0;
  }
}

.p-lead__heart {
  position: absolute;
  top: calc(-24 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(288 * var(--u));
}

.p-lead__txt {
  position: absolute;
  top: calc(62 * var(--u));
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(11 * var(--u));
  font-family: var(--ff-gothic);
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--brown);
  text-align: center;
}

/* デザインの改行位置を固定する。1行目「かわいいも、〜」は 294 枠に対し余裕が
   1px 未満で、Adobe Fonts 適用時に折り返してデザインの改行が崩れるため。
   .p-lead は幅を制限していないので、はみ出しても中央揃えのまま表示される。 */
.p-lead__txtBlock {
  white-space: nowrap;
}

/* 「JENNI と過ごす」の詰めスペース（デザイン上 6px 相当） */
.p-lead__thin {
  font-size: calc(6 * var(--u));
}

/* ==========================================================================
   5. ハート3つ（区切り装飾）
   ========================================================================== */
.p-hearts {
  margin: calc(60 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
}

.p-hearts__item {
  display: block;
  width: calc(12 * var(--u));
}

/* ==========================================================================
   6. 縦書きキャッチ（ADSフラミング / 白）
      枠幅を --vtw（デザインpx）で渡し、各行の left をそこから算出する。
      デザイン上、開き括弧は枠の右端 -22、1行目はその 16 左、以降 24 ずつ左へ。
   ========================================================================== */
.p-vtext {
  --vtw: 108;
  position: absolute;
  margin: 0;
  font-family: var(--ff-display);
  color: #fff;
}

.p-vtext__quote {
  position: absolute;
  font-size: calc(22 * var(--u));
  line-height: 1;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.p-vtext__quote--open {
  left: calc((var(--vtw) - 22) * var(--u));
  top: 0;
}

.p-vtext__quote--close {
  left: 0;
  top: calc(var(--vtq2-top) * var(--u));
  bottom: 0;
  transform: rotate(180deg);
}

.p-vtext__line {
  position: absolute;
  display: block;
  width: calc(16 * var(--u));
  writing-mode: vertical-rl;
  /* 縦書きでは height が行内方向になる。親 .p-vtext は高さを持たないため
     nowrap を付けないと1文字分に潰れて多段に折り返してしまう */
  white-space: nowrap;
  font-size: calc(16 * var(--u));
  line-height: 1.1;
  letter-spacing: 0.12em;
}

.p-vtext__line--1 {
  left: calc((var(--vtw) - 38) * var(--u));
  top: calc(8 * var(--u));
}

.p-vtext__line--2 {
  left: calc((var(--vtw) - 62) * var(--u));
  top: calc(62 * var(--u));
}

.p-vtext__line--3 {
  left: calc((var(--vtw) - 86) * var(--u));
  /* --vt3-top 未定義のブロックに3行目を足しても枠外へ飛ばないようフォールバックを持たせる */
  top: calc(var(--vt3-top, 137) * var(--u));
}

/* ==========================================================================
   7. クレジット（商品名 + CHECK ボタン）
   ========================================================================== */
.c-credit {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.c-credit__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-credit__name {
  /* min-width:0 が無いと商品名が長いときに縮まず、CHECK ボタンが右へ押し出されて
     他の行と列が揃わなくなる。0 にすることで（keep-all のまま）名前と価格の間の
     スペースで折り返して2行になり、ボタン位置は揃ったままになる。 */
  min-width: 0;
  font-family: var(--ff-mplus);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #fff;
  word-break: keep-all;
}

/* デザイン上、商品名と価格を2行に分けている箇所 */
.c-credit--stack .c-credit__item,
.c-credit--stack .c-credit__price {
  display: block;
}

.c-credit__btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  background: var(--cta);
  font-family: var(--ff-mplus);
  font-weight: 800;
  font-size: calc(12 * var(--u));
  line-height: 1;
  letter-spacing: 0.03em;
  color: #fff;
}

/* ==========================================================================
   8. スライダー（バニラJS / .js-slider）
      スライドはグリッドの同一セルに重ね、高さは一番高いスライドに追従させる。
   ========================================================================== */
.c-slider {
  position: relative;
  width: 100%;
}

.c-slider__track {
  display: grid;
}

.c-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility も transition に載せる。載せないと切替時に旧スライドが即座に
     hidden になり、新スライドがフェードインし終わるまで背景の地色が透ける。 */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.c-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-slider .c-credit {
  margin-top: calc(16 * var(--u));
}

/* 矢印（デザイン: cta 40% の円 + 白シェブロン。画像は300高の中央 = top 135） */
.c-slider__arrow {
  position: absolute;
  top: calc(135 * var(--u));
  z-index: 2;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 85, 142, 0.4);
  appearance: none;
  cursor: pointer;
}

.c-slider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.c-slider__arrow--prev {
  left: calc(10 * var(--u));
}

.c-slider__arrow--prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.c-slider__arrow--next {
  right: calc(10 * var(--u));
}

.c-slider__arrow--next::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

/* ページネーションドット（画像内 下10px / 8px 円） */
.c-slider__dots {
  position: absolute;
  top: calc(282 * var(--u));
  z-index: 2;
  display: flex;
  gap: calc(8 * var(--u));
}

.c-slider__dots--left {
  left: calc(10 * var(--u));
}

.c-slider__dots--right {
  right: calc(10 * var(--u));
}

.c-slider__dot {
  display: block;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: #fff;
}

.c-slider__dot.is-active {
  background: var(--pink02);
}

/* ==========================================================================
   9. マルキー（右から左へ自動で流れる）
      gap ではなく item の margin-right で間隔を作り、-50% で継ぎ目なく回す。
   ========================================================================== */
.c-marquee {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}

.c-marquee__track {
  display: flex;
  width: max-content;
  animation: p-marquee 20s linear infinite;
}

.c-marquee__item {
  flex: none;
  width: calc(250 * var(--u));
  margin-right: calc(15 * var(--u));
}

@keyframes p-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-marquee__track {
    animation: none;
  }
}

/* ==========================================================================
   10. 各ルックセクション（セクション間の余白はデザインどおり一律 60px）
   ========================================================================== */
.p-look {
  position: relative;
  margin-top: calc(58 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look {
    margin-top: calc(59 * var(--u));
  }
}

/* --- S1 セットアップ／レイヤード --------------------------------------- */
.p-look01 {
  height: calc(715 * var(--u));
}

.p-look01__imgA {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(250 * var(--u));
}

.p-look01__imgB {
  position: absolute;
  right: 0;
  top: calc(364 * var(--u));
  width: calc(250 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look01__imgB {
    top: calc(365 * var(--u));
  }
}

.p-vtext--l01 {
  left: calc(247 * var(--u));
  top: calc(111 * var(--u));
  --vt3-top: 137;
  /* --vtq2-left: 24; */
  --vtq2-left: 11;
  --vtq2-top: 289;
}

/* --- S2 ハーフジップ（スライダー①） ------------------------------------ */
/* デザインどおり 397（1枚目スライド基準）。スライダーは絶対配置なので、
   2枚目（クレジット3行 = 300+16+88 = 404）に切り替わったときは下に 32 はみ出すが、
   次セクションまで 60 の余白があるため衝突しない。高さは固定なので切替時の
   レイアウトシフト（CLS）は発生しない。 */
.p-look02 {
  height: calc(397 * var(--u));
}

.p-look02__panel {
  position: absolute;
  left: calc(135 * var(--u));
  top: 0;
  width: calc(180 * var(--u));
  height: calc(300 * var(--u));
  background: var(--pink01);
}

.p-look02__slider {
  position: absolute;
  left: calc(160 * var(--u));
  top: calc(25 * var(--u));
  width: calc(200 * var(--u));
}

.p-vtext--l02 {
  left: calc(13 * var(--u));
  top: calc(61 * var(--u));
  --vt3-top: 152;
  --vtq2-top: 289;
}

/* --- S3 キャミ＆カーデ（スライダー②） ---------------------------------- */
.p-look03 {
  height: calc(404 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look.p-look03 {
    margin-top: calc(60 * var(--u));
  }
}

.p-look03__slider {
  position: absolute;
  left: calc(15 * var(--u));
  top: 0;
  width: calc(200 * var(--u));
}

.p-vtext--l03 {
  left: calc(251 * var(--u));
  top: 0;
  --vt3-top: 136;
  --vtq2-top: 294;
}

/* --- S4 シャギーニット -------------------------------------------------- */
.p-look.p-look04{
  margin-top: calc(60 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look.p-look04 {
    margin-top: calc(62 * var(--u));
  }
}

.p-look04 {
  height: calc(992 * var(--u));
}

.p-look04__panel {
  position: absolute;
  left: calc(57 * var(--u));
  top: calc(140 * var(--u));
  width: calc(260 * var(--u));
  height: calc(650 * var(--u));
  background: var(--pink01);
}

.p-look04__itemA {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(230 * var(--u));
}

.p-look04__creditA {
  width: calc(220 * var(--u));
  margin: calc(16 * var(--u)) auto 0;
}

.p-look04__imgB {
  position: absolute;
  left: calc(205 * var(--u));
  top: calc(446 * var(--u));
  width: calc(170 * var(--u));
}

.p-look04__itemC {
  position: absolute;
  left: calc(102 * var(--u));
  top: calc(675 * var(--u));
  width: calc(180 * var(--u));
}

.p-look04__creditC {
  margin-top: calc(16 * var(--u));
}

.p-vtext--l04a {
  left: calc(244 * var(--u));
  top: calc(41 * var(--u));
  --vtw: 81;
  --vtq2-top: 217;
}

.p-vtext--l04b {
  left: calc(13 * var(--u));
  top: calc(527 * var(--u));
  --vtw: 86;
  --vtq2-top: 319;
}

.p-look04__heart {
  position: absolute;
  left: calc(38 * var(--u));
  top: calc(824 * var(--u));
  width: calc(15 * var(--u));
}

/* --- S5 ロゴニット×デニム（角丸2点） ----------------------------------- */
.p-look05 {
  height: calc(319 * var(--u));
}

.p-look05__imgs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: calc(15 * var(--u));
}

.p-look05__img {
  width: calc(165 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
}

.p-look05__credit {
  position: absolute;
  left: 50%;
  top: calc(263 * var(--u));
  transform: translateX(-50%);
  width: calc(220 * var(--u));
}

/* --- S6 ファーニットカーデ（自動フロー＋商品） -------------------------- */
.p-look06 {
  height: calc(782 * var(--u));
}

.p-look06__item {
  position: absolute;
  left: calc(15 * var(--u));
  top: calc(364 * var(--u));
  width: calc(230 * var(--u));
}

.p-look06__credit {
  margin-top: calc(16 * var(--u));
}

/* --- S7 ニットカーデ（スライダー③ 2秒自動切替） ------------------------ */
.p-look07 {
  height: calc(417 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look.p-look07 {
    margin-top: calc(61 * var(--u));
  }
}

.p-look07 .c-slider {
  position: absolute;
  left: calc(72.5 * var(--u));
  top: 0;
  width: calc(230 * var(--u));
}

.p-look07__credit {
  position: absolute;
  left: calc(77.5 * var(--u));
  top: calc(361 * var(--u));
  width: calc(220 * var(--u));
}

/* --- S8 セットアップ（角丸2点） ---------------------------------------- */
.p-look08 {
  height: calc(754 * var(--u));
}

.p-look08__imgA {
  position: absolute;
  left: calc(15 * var(--u));
  top: 0;
  width: calc(230 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
}

.p-look08__itemB {
  position: absolute;
  left: calc(130 * var(--u));
  top: calc(305 * var(--u));
  width: calc(230 * var(--u));
}

.p-look08__imgB {
  border-radius: calc(16 * var(--u));
  overflow: hidden;
}

.p-look08__itemB .c-credit {
  width: calc(220 * var(--u));
  margin: calc(16 * var(--u)) auto 0;
}

.p-vtext--l08 {
  left: calc(31 * var(--u));
  top: calc(327 * var(--u));
  --vtw: 84;
  --vtq2-top: 294;
}

/* --- S9 ジャージセットアップ ------------------------------------------- */
.p-look09 {
  height: calc(1382 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look.p-look09 {
    margin-top: calc(60 * var(--u));
  }
}

.p-look09__panel {
  position: absolute;
  left: calc(49.5 * var(--u));
  top: calc(210 * var(--u));
  width: calc(260 * var(--u));
  height: calc(850 * var(--u));
  background: var(--pink01);
}

.p-look09__itemA {
  position: absolute;
  left: calc(130 * var(--u));
  top: 0;
  width: calc(230 * var(--u));
}

.p-look09__itemB {
  position: absolute;
  left: calc(15 * var(--u));
  top: calc(446 * var(--u));
  width: calc(235 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look09__itemB {
    top: calc(448 * var(--u));
  }
}

.p-look09__itemC {
  position: absolute;
  left: calc(130 * var(--u));
  top: calc(931 * var(--u));
  width: calc(230 * var(--u));
}
@media screen and (max-width: 767px) {
  .p-look09__itemC {
    top: calc(933 * var(--u));
  }
}

.p-look09 .c-credit {
  width: calc(220 * var(--u));
  margin: calc(16 * var(--u)) auto 0;
}

.p-vtext--l09 {
  left: calc(9.5 * var(--u));
  top: calc(47 * var(--u));
  --vt3-top: 137;
  --vtq2-left: 24;
  --vtq2-top: 289;
}

/* ==========================================================================
   11. 締めのリード文 / ALL ITEMS / Follow Us
   ========================================================================== */
.p-outroLead {
  width: calc(294 * var(--u));
  margin: calc(57 * var(--u)) auto 0;
  font-family: var(--ff-gothic);
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--brown);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-outroLead {
    margin: calc(61 * var(--u)) auto 0;
  }
}

.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(310 * var(--u));
  height: calc(48 * var(--u));
  font-family: var(--ff-mplus);
  letter-spacing: 0.03em;
  text-align: center;
}

.c-btn--fill {
  background: var(--cta);
  font-weight: 800;
  font-size: calc(14 * var(--u));
  line-height: 1;
  color: #fff;
}

.c-btn--outline {
  background: #fff;
  border: 1px solid var(--cta);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  color: var(--cta);
}

/* ピンク地から白地へ繋ぐグラデーション帯（中にALL ITEMSボタン） */
.p-allitems {
  position: relative;
  height: calc(168 * var(--u));
  margin-top: calc(60 * var(--u));
  display: flex;
  justify-content: center;
}

.p-allitems::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

.p-allitems .c-btn {
  position: relative;
  margin-top: calc(60 * var(--u));
}

.p-follow {
  background: #fff;
  padding: calc(40 * var(--u)) 0 calc(100 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-follow__head {
  /* デザインのテキストボックス幅は 225 だが、実フォントでリード文が折り返すため全幅にする */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  font-family: var(--ff-mplus);
  color: var(--brown);
  text-align: center;
}

.p-follow__title {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

.p-follow__lead {
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.p-follow__list {
  display: flex;
  gap: calc(20 * var(--u));
  padding: calc(30 * var(--u)) 0;
}

.p-sns {
  width: calc(145 * var(--u));
  padding: calc(20 * var(--u)) 0;
  background: var(--sns-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  font-family: var(--ff-mplus);
}

.p-sns__icon {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-sns__icon img {
  width: calc(40 * var(--u));
}

.p-sns__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--u));
}

.p-sns__label {
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--cta);
}

.p-sns__name {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--brown);
}

/* ==========================================================================
   12. PC（768px以上）
       センター 450px（= 375 × 1.2）＋ 左右の追従要素。
       PC専用要素の数値は PC px なので rem で直書きする（1rem = 10px）。
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .p-feature {
    --u: 0.12rem;
    background: var(--pink-page);
  }

  .p-feature__layout {
    /* デザイン幅1400pxを基準にした「1px」。1400px以上では1pxに固定（=左右カラムも
       それ以上拡大しない）、1400px未満は viewport に比例して縮む。中央/左右の3列を
       同じ係数で縮めることで、画面を狭めても比率(518:450:432)を保ったまま縮小し、
       中央だけ固定幅のせいで左右が見切れる問題を避ける。 */
    --u-layout: min(1px, calc(100vw / 1400));
    display: grid;
    grid-template-columns: calc(518 * var(--u-layout)) calc(450 * var(--u-layout)) calc(432 * var(--u-layout));
    align-items: start;
    max-width: 140rem;
    margin-inline: auto;
    /* padding-inline: 2rem; */
  }

  .p-feature__main {
    min-width: 0;
    /* 1099px以下では左右の .p-feature__side が display:none になり
       グリッドから除外される。列を明示しないと自動配置で1列目(1fr)に
       落ちてセンターカラムが左に寄って全体が崩れるため必須。 */
    grid-column: 2;
  }

  .p-feature__side {
    position: sticky;
    top: 0;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    /* 中のロゴを内容幅に合わせて縮めるための基準（cqw の解決元）。
       overflow は付けない。付けるとロゴの左側が切り落とされるうえ、
       fade-up の初期 translate で要素が枠外に出て IntersectionObserver が
       発火しなくなる（永久に非表示）罠を踏む。はみ出しの最終防波堤は
       .p-feature の overflow-x: clip が担う。 */
    container-type: inline-size;
  }

  /* height は「デザイン上の要素下端位置 + padding-bottom」。
     padding-bottom(4rem) は fade-up の初期 translateY(3.6rem) を飲み込むための逃げ。
     これが無いと要素が overflow:hidden で完全に隠れ、IntersectionObserver が
     発火せず永久に非表示のままになる。
     justify-content は左右どちらもカラム内で常に中央に配置する（幅を縮めても
     センター列側に寄らないようにするため、片端寄せ用のスペーサーは廃止）。 */
  .p-feature__side--left {
    /* height: 57rem; */
    padding-bottom: 4rem;
    justify-content: center;

    height: 100vh;
    align-items: center;
  }

  .p-feature__side--right {
    /* height: 50.5rem; */
    padding-bottom: 4rem;
    justify-content: center;

    height: 100vh;
    align-items: center;
  }

  .p-sideLogo {
    /* デザイン: 幅 34.7rem / 3.75rem・5rem・2.25rem・gap 0.8rem。
       ただし最長行 "AUTUMN WINTER COLLECTION" は約 16em 幅あり、フォントが
       デザインの Source Serif 4 より広いとサイドカラムの内容幅を超えて
       overflow:hidden に左側を食われる。そこで基準サイズに cqw の上限を掛け、
       内容幅に必ず収まるようにする。最長行は約 16.3em 幅なので
       「(サイドカラム幅 - センターとの最小間隔 4rem) ÷ 16.3」を上限にすると、
       どの PC 幅でも間隔 4rem 以上を保ったまま収まる。
       デザイン幅(1400px)では上限 2.25rem 側が採用され設計どおりの文字サイズになる。
       3行はデザインの比率（37.5 : 50 : 22.5 / gap 8）を維持。 */
    --logo-fs: min(2.25rem, calc((100cqw - 4rem) / 16.3));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--logo-fs) * 0.3556);
    font-family: var(--ff-serif);
    font-weight: 700;
    font-optical-sizing: auto;
    color: var(--cta);
    text-align: center;
    letter-spacing: 0.015em;
    white-space: nowrap;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0-1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;
  }

  .p-sideLogo__sub {
    font-size: calc(var(--logo-fs) * 1.6667);
    line-height: 1;
  }

  .p-sideLogo__main {
    font-size: calc(var(--logo-fs) * 2.2222);
    line-height: 1;
  }

  .p-sideLogo__txt {
    font-size: var(--logo-fs);
    line-height: 1.25;
  }

  .p-sideHearts {
    width: 14rem;
    display: flex;
    justify-content: space-between;
  }

  .p-sideHearts img {
    width: 3rem;
  }
}

/* センターカラムとの間隔が確保できない幅では、左右の装飾要素を出さない。
   SP/PC の主分岐(767/768)はサイト共通 parts.css の .hidden-phone に任せており
   （左右要素には .hidden-phone を付与済み）、LP側で display を書くのはここだけ。
   .hidden-phone は2値しか表現できず「SPは非表示／狭いPCも非表示／広いPCは表示」の
   3段階が作れないため、この閾値のみ独自に足している。 */
/* @media only screen and (max-width: 1099px) {
  .p-feature__side {
    display: none;
  }
} */