@charset "UTF-8";

/* ==========================================================================
   JENNI AUTUMN/WINTER COLLECTION Vol.2
   /Page/feature/jenni/261002_AWcollection2/

   ■ 単位系（SP特化型デザイン / Vol.1 と同じ方式）
     デザインは 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 を直接書いている。

   ■ セクションの組み方
     デザインが「重なり前提の自由配置」のため、各セクションは
     .p-sec__inner を position:relative + 固定高さ（デザインの高さ）にして、
     子要素をデザイン座標そのままで absolute 配置している。
   ========================================================================== */

/* パンくず下の余白（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);

  /* カラー */
  --cta: #ee558e;          /* CTA / 見出し影 / ドットActive下地 */
  --pink-light: #ffaed2;   /* スライダーのアクティブドット・PCロゴ */
  --brown: #68462e;        /* 本文（ピンク背景セクション） */
  --brown-deep: #611515;   /* Follow Us */
  --bg-pink: #ffeef5;      /* 02 / 04 の地色 */
  --bg-brown: #7f5437;     /* 01 / 03 の地色 */
  --sns-bg: #ffdfe9;
  --page-pc: #956b4f;      /* PCの左右余白（ページ地） */

  /* フォント
     sicgothicduex-hdl-e は Adobe Fonts（Vol.1 と同じ指定）。
     埋め込みコード未設置の環境ではフォールバックで表示される。 */
  --ff-gothic: "sicgothicduex-hdl-e", sans-serif;
  --ff-mplus: m-plus-1p, sans-serif;

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

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

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

.p-feature p {
  margin: 0;
}

/* ▽ スクロール連動アニメーション
   初期状態(opacity:0)は script.js が html に .js を付けたときだけ適用する。
   JS が落ちた／読み込めなかった場合に画像が永久に見えなくなるのを防ぐため。 ▽ */
.js-ready .p-feature .fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

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

.js-ready .p-feature .fade-up {
  opacity: 0;
  transform: translateY(calc(30 * var(--u)));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.js-ready .p-feature .fade-delay--1 {
  transition-delay: 0.25s;
}

.js-ready .p-feature .fade-delay--2 {
  transition-delay: 0.65s;
}

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

/* ==========================================================================
   2. レイアウト（PCは 519 / 450 / 431 の3カラム）
   ========================================================================== */
.p-feature__main {
  background: var(--bg-pink);
}

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

/* ==========================================================================
   4. セクション共通
   ========================================================================== */
.p-sec__inner {
  position: relative;
  width: 100%;
  /* 傾いた写真などがセクション外にはみ出すのを止める */
  overflow: hidden;
}

.p-sec--01 {
  /* MV下端(460)とセクション上端(458)の差を吸収する */
  margin-top: calc(-2 * var(--u));
}

.p-sec--01 .p-sec__inner,
.p-sec--03 .p-sec__inner {
  background: var(--bg-brown) url("../img/bg_brown.png") repeat left top;
  background-size: calc(68 * var(--u)) calc(68 * var(--u));
}

.p-sec--02 .p-sec__inner,
.p-sec--04 .p-sec__inner {
  background: var(--bg-pink) url("../img/bg_pink.png") repeat left top;
  background-size: calc(68 * var(--u)) calc(68 * var(--u));
}

.p-sec--01 .p-sec__inner { height: calc(3014 * var(--u)); }
.p-sec--02 .p-sec__inner { height: calc(1530 * var(--u)); }
.p-sec--03 .p-sec__inner { height: calc(1259 * var(--u)); }
.p-sec--04 .p-sec__inner { height: calc(1678 * var(--u)); }

/* デザイン座標そのままで置く要素の共通指定 */
.p-sec__inner > * {
  position: absolute;
}

/* ==========================================================================
   5. 共通コンポーネント
   ========================================================================== */

/* ▽ 商品バナー（バナー全体が支給画像） ▽ */
.c-bnr {
  display: block;
  font-size: 0;
}

/* ▽ モデルクレジット（名前 / 身長） ▽ */
.c-credit__model {
  font-family: var(--ff-mplus);
  font-weight: 500;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-align: center;
  color: #fff;
}

.c-credit__items {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

/* ▽ 着用アイテム（サムネ + 商品名 + CHECK） ▽ */
.c-item {
  position: relative;
  display: block;
  flex: none;
  width: calc(110.5 * var(--u));
  height: calc(55 * var(--u));
}

.c-item__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(45 * var(--u));
  height: calc(55 * var(--u));
  object-fit: cover;
}

.c-item__body {
  position: absolute;
  left: calc(55 * var(--u));
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
}

.c-item__txt {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}

.c-item__name,
.c-item__price {
  font-family: var(--ff-mplus);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.07em;
  color: #fff;
  white-space: nowrap;
}

.c-item__name { font-size: calc(11 * var(--u)); }
.c-item__price { font-size: calc(10 * var(--u)); }

.c-item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(15 * var(--u));
  padding: 0 calc(5 * var(--u));
  border-radius: calc(100 * var(--u));
  background: #fff;
  font-family: var(--ff-mplus);
  font-weight: 700;
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--cta);
  white-space: nowrap;
}

/* ▽ スタックフェードスライダー
   1枚ずつ下から上へ重なり、最後まで行くと全スライドが同時にフェードアウトして
   「0枚」になってから1枚目に戻る（ユーザー指定仕様）。 ▽ */
.c-stack {
  width: calc(263 * var(--u));
  height: calc(474 * var(--u));
}

.c-stack__view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(343 * var(--u));
}

.c-stack__slide {
  position: absolute;
  left: 50%;
  top: calc(171.5 * var(--u));
  width: calc(230 * var(--u));
  height: calc(320 * var(--u));
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

.c-stack__slide.is-stacked,
.c-stack__slide.is-active {
  opacity: 1;
}

.c-stack__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* JS が動かない環境では1枚目だけを表示する（真っ白防止） */
.c-stack__slide:first-child { opacity: 1; }
.js-ready .c-stack__slide:first-child { opacity: 0; }
.js-ready .c-stack__slide.is-stacked:first-child,
.js-ready .c-stack__slide.is-active:first-child { opacity: 1; }

.c-stack__dots {
  position: absolute;
  left: 50%;
  top: calc(352 * var(--u));
  transform: translateX(-50%);
  display: flex;
  gap: calc(10 * var(--u));
}

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

.c-stack__dot.is-active {
  background: var(--pink-light);
}

.c-stack__credit {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(370 * var(--u));
  width: calc(231 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
}

/* ▽ 2枚をフェードで切り替える（リバーシブルの表／裏） ▽ */
.c-crossfade {
  position: relative;
}

.c-crossfade img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.c-crossfade img.is-active {
  opacity: 1;
}

/* JS が無い環境では1枚目を表示（JS が動く環境では .is-active に任せる） */
.c-crossfade img:first-child { opacity: 1; }
.js-ready .c-crossfade img:first-child { opacity: 0; }
.js-ready .c-crossfade img.is-active { opacity: 1; }

/* ▽ 動画（Vimeo）
   デザイン枠は 179:250、動画の実寸は 240:426（9:16）。
   枠いっぱいに cover 表示するため、幅を合わせて上下をトリミングする。 ▽ */
.c-movie {
  position: relative;
  overflow: hidden;
  background: #d3d3d3;
}

.c-movie iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 426;
  border: 0;
}

/* ▽ CTAボタン ▽ */
.c-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(48 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  font-family: var(--ff-mplus);
  letter-spacing: 0.03em;
  text-align: center;
}

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

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

/* ==========================================================================
   6. 01 リバーシブルアウター
   ========================================================================== */
.p-s01__heart {
  left: calc(43 * var(--u));
  top: calc(58 * var(--u));
  width: calc(294 * var(--u));
  height: calc(294 * var(--u));
  background: url("../img/bg_heart.png") no-repeat center / contain;
}

.p-s01__lead1 {
  left: calc(194.5 * var(--u));
  top: calc(140 * var(--u));
  transform: translateX(-50%);
  font-family: var(--ff-gothic);
  font-size: calc(21 * var(--u));
  line-height: 1.8;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  color: var(--cta);
    -webkit-font-smoothing: antialiased;
}

.p-s01__lead2 {
  left: calc(20 * var(--u));
  top: calc(370 * var(--u));
  width: calc(335 * var(--u));
  font-family: var(--ff-gothic);
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  color: #fff;
    -webkit-font-smoothing: antialiased;
}

.p-s01__hearts {
  left: calc(149.5 * var(--u));
  top: calc(525 * var(--u));
  width: calc(76 * var(--u));
  height: calc(12 * var(--u));
  background: url("../img/deco_heart.svg") no-repeat center / contain;
}

.p-s01__ttl {
  left: calc(20.5 * var(--u));
  top: calc(577 * var(--u));
  width: calc(335 * var(--u));
}

.p-s01__vtxt1 {
  left: calc(19.8 * var(--u));
  top: calc(684.2 * var(--u));
  width: calc(66 * var(--u));
  z-index: 2;
}

.p-s01__stackA {
  left: calc(92 * var(--u));
  top: calc(679 * var(--u));
}

.p-s01__vtxt2 {
  left: calc(293.9 * var(--u));
  top: calc(1192 * var(--u));
  width: calc(62 * var(--u));
  z-index: 2;
}

.p-s01__stackB {
  left: calc(20 * var(--u));
  top: calc(1194 * var(--u));
}

.p-s01__bnr1 {
  left: 0;
  top: calc(1688 * var(--u));
  width: calc(375 * var(--u));
}

.p-s01__balloon1 {
  left: calc(142 * var(--u));
  top: calc(1867 * var(--u));
  width: calc(156 * var(--u));
  z-index: 3;
}

.p-s01__ph3 {
  left: 0;
  top: calc(1916.8 * var(--u));
  width: calc(120 * var(--u));
}

.p-s01__ph6 {
  left: calc(162 * var(--u));
  top: calc(1999.8 * var(--u));
  width: calc(215 * var(--u));
}

.p-s01__ph4 {
  left: calc(-1 * var(--u));
  top: calc(2103.8 * var(--u));
  width: calc(141 * var(--u));
}

.p-s01__path1 {
  left: calc(10.6 * var(--u));
  top: calc(2059.5 * var(--u));
  width: calc(211.5 * var(--u));
  z-index: 3;
}

.p-s01__credit1 {
  left: calc(72 * var(--u));
  top: calc(2308.8 * var(--u));
  width: calc(231 * var(--u));
  gap: calc(10 * var(--u));
}

.p-s01__ph5 {
  position: absolute;
  left: calc(145 * var(--u));
  top: calc(2464 * var(--u));
  width: calc(230 * var(--u));
  height: calc(320 * var(--u));
}

.p-s01__balloon2 {
  left: calc(-13 * var(--u));
  top: calc(2431 * var(--u));
  width: calc(210 * var(--u));
  z-index: 3;
}

.p-s01__model2 {
  left: calc(77.14 * var(--u));
  top: calc(2683.4 * var(--u));
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

.p-s01__item2 {
  position: absolute;
  left: calc(21.6 * var(--u));
  top: calc(2729.4 * var(--u));
  z-index: 2;
}

.p-s01__path2 {
  left: calc(58 * var(--u));
  top: calc(2808 * var(--u));
  width: calc(128.5 * var(--u));
  z-index: 3;
}

.p-s01__bnr2 {
  left: calc(45.8 * var(--u));
  top: calc(2833 * var(--u));
  width: calc(295 * var(--u));
}

/* ==========================================================================
   7. 02 中綿アウターシリーズ
   ========================================================================== */
/* 2枚のルック写真（順番にフェードイン） */
.c-look {
  position: absolute;
}

.c-look__cell {
  position: absolute;
  width: calc(179 * var(--u));
}

.c-look__credit {
  margin-top: calc(10 * var(--u));
  font-family: var(--ff-mplus);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-align: center;
  color: var(--brown);
  margin-top: 10px !important;
}

.p-s02__ttl {
  left: calc(20 * var(--u));
  top: calc(50 * var(--u));
  width: calc(335 * var(--u));
}

.p-s02__deco1 {
  left: calc(13.7 * var(--u));
  top: calc(199.7 * var(--u));
  width: calc(177.5 * var(--u));
  z-index: 2;
}

.p-s02__look1 {
  left: 0;
  top: calc(160.7 * var(--u));
  width: calc(376 * var(--u));
  height: calc(374.3 * var(--u));
}

.p-s02__look1 .c-look__cell--tr { left: calc(196 * var(--u)); top: 0; }
.p-s02__look1 .c-look__cell--bl { left: 0; top: calc(80.1 * var(--u)); }

.p-s02__lead {
  left: calc(21 * var(--u));
  top: calc(567 * var(--u));
  width: calc(334 * var(--u));
  font-family: var(--ff-gothic);
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-align: center;
  color: var(--brown);
    -webkit-font-smoothing: antialiased;
}

.p-s02__balloon1 {
  left: calc(0 * var(--u));
  top: calc(621 * var(--u));
  width: calc(125 * var(--u));
  z-index: 3;
}

.p-s02__bnr1 {
  left: calc(40 * var(--u));
  top: calc(636.3 * var(--u));
  width: calc(295 * var(--u));
}

.p-s02__balloon2 {
  left: calc(155.7 * var(--u));
  top: calc(844.3 * var(--u));
  width: calc(156 * var(--u));
  z-index: 3;
}

.p-s02__look2 {
  left: 0;
  top: calc(897.8 * var(--u));
  width: calc(375 * var(--u));
  height: calc(387.2 * var(--u));
}

.p-s02__look2 .c-look__cell--tl { left: 0; top: 0; }
.p-s02__look2 .c-look__cell--br { left: calc(196 * var(--u)); top: calc(93.4 * var(--u)); }

.p-s02__vtxt {
  left: calc(167.8 * var(--u));
  top: calc(964 * var(--u));
  width: calc(39.5 * var(--u));
  z-index: 2;
}

.p-s02__bnr2 {
  left: 0;
  top: calc(1300 * var(--u));
  width: calc(375 * var(--u));
}

/* ==========================================================================
   8. 03 アニマルアウター
   ========================================================================== */
.p-s03__ttl {
  left: calc(15.5 * var(--u));
  top: calc(60 * var(--u));
  width: calc(335 * var(--u));
}

.p-s03__ph1 {
  left: calc(20.5 * var(--u));
  top: calc(162 * var(--u));
  width: calc(240 * var(--u));
}

.p-s03__grp {
  left: calc(206.9 * var(--u));
  top: calc(241.2 * var(--u));
  width: calc(152.6 * var(--u));
  height: calc(360.4 * var(--u));
  z-index: 2;
}

.p-s03__balloon {
  position: absolute;
  left: calc(46.5 * var(--u));
  top: 0;
  width: calc(106.1 * var(--u));
  z-index: 2;
}

.p-s03__cut1 {
  position: absolute;
  left: 0;
  top: calc(71.8 * var(--u));
  width: calc(144.1 * var(--u));
}

.p-s03__vtxt {
  left: calc(27.2 * var(--u));
  top: calc(446 * var(--u));
  width: calc(65 * var(--u));
  z-index: 2;
}

.p-s03__cut2 {
  left: calc(94 * var(--u));
  top: calc(530 * var(--u));
  width: calc(152 * var(--u));
  z-index: 2;
}

.p-s03__ph2 {
  left: calc(196.5 * var(--u));
  top: calc(645.4 * var(--u));
  width: calc(179 * var(--u));
}

.p-s03__movie {
  position: absolute;
  left: calc(-3 * var(--u));
  top: calc(809 * var(--u));
  width: calc(179 * var(--u));
  height: calc(250 * var(--u));
}

.p-s03__bnr {
  left: 0;
  top: calc(1079 * var(--u));
  width: calc(375 * var(--u));
}

/* ==========================================================================
   9. 04 ガーリー or スポ
   ========================================================================== */
/* 4枚が左右から集まって 2×2 に並ぶ */
.c-gather {
  position: absolute;
}

.c-gather__cell {
  position: absolute;
  width: calc(168 * var(--u));
  height: calc(234.9 * var(--u));
  overflow: hidden;
}

.c-gather__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-gather__credit {
  position: absolute;
  bottom: calc(5 * var(--u));
  width: calc(148 * var(--u));
  font-family: var(--ff-mplus);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.07em;
  color: #fff;
}

.c-gather__cell--tl { left: 0; top: 0; }
.c-gather__cell--tr { left: calc(168 * var(--u)); top: 0; }
.c-gather__cell--bl { left: 0; top: calc(234.9 * var(--u)); }
.c-gather__cell--br { left: calc(168 * var(--u)); top: calc(234.9 * var(--u)); }

.c-gather__cell--tl .c-gather__credit,
.c-gather__cell--bl .c-gather__credit { left: calc(6 * var(--u)); }
.c-gather__cell--tr .c-gather__credit,
.c-gather__cell--br .c-gather__credit { left: calc(10 * var(--u)); }

.js-ready .c-gather__cell {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-ready .c-gather__cell--tl { transform: translate(calc(-50 * var(--u)), calc(-50 * var(--u))) rotate(-15deg); }
.js-ready .c-gather__cell--tr { transform: translate(calc(50 * var(--u)), calc(-50 * var(--u))) rotate(15deg); }
.js-ready .c-gather__cell--bl { transform: translate(calc(-40 * var(--u)), calc(50 * var(--u))) rotate(15deg); }
.js-ready .c-gather__cell--br { transform: translate(calc(50 * var(--u)), calc(50 * var(--u))) rotate(-15deg); }

.js-ready .c-gather.is-active .c-gather__cell {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.js-ready .c-gather.is-active .c-gather__cell--tr { transition-delay: 0.1s; }
.js-ready .c-gather.is-active .c-gather__cell--bl { transition-delay: 0.2s; }
.js-ready .c-gather.is-active .c-gather__cell--br { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .c-gather__cell {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.p-s04__ttl {
  left: calc(16.5 * var(--u));
  top: calc(49.9 * var(--u));
  width: calc(335.5 * var(--u));
}

.p-s04__grid {
  left: calc(17 * var(--u));
  top: calc(176 * var(--u));
  width: calc(336 * var(--u));
  height: calc(469.9 * var(--u));
}

.p-s04__bnr1 {
  left: calc(21 * var(--u));
  top: calc(676 * var(--u));
  width: calc(160 * var(--u));
}

.p-s04__bnr2 {
  left: calc(193 * var(--u));
  top: calc(676 * var(--u));
  width: calc(160 * var(--u));
}

.p-s04__movie {
  position: absolute;
  left: calc(99 * var(--u));
  top: calc(846 * var(--u));
  width: calc(179 * var(--u));
  height: calc(250 * var(--u));
}

.p-s04__lead {
  left: calc(21.5 * var(--u));
  top: calc(1126 * var(--u));
  width: calc(334 * var(--u));
  font-family: var(--ff-gothic);
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-align: center;
  color: var(--brown);
    -webkit-font-smoothing: antialiased;
}

.p-s04__cta1 {
  left: calc(34 * var(--u));
  top: calc(1226 * var(--u));
  width: calc(310 * var(--u));
}

/* ▽ Follow Us ▽ */
.p-follow {
  left: calc(34 * var(--u));
  top: calc(1324 * var(--u));
  width: calc(310 * var(--u));
}

.p-follow__ttl {
  font-family: var(--ff-mplus);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--brown-deep);
}

.p-follow__txt {
  margin-top: calc(10 * var(--u)) !important;
  font-family: var(--ff-mplus);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--brown-deep);
}

.p-follow__list {
  margin-top: calc(30 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--u));
}

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

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

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

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

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

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

.p-follow__cta {
  margin-top: calc(30 * var(--u));
  width: 100%;
}

/* ==========================================================================
   10. PC（768px以上）
       センター 450px（= 375 × 1.2）＋ 左右の追従要素。
       PC専用要素の数値は PC px なので rem で直書きする（1rem = 10px）。
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .p-feature {
    /* デザイン幅1400pxを基準にした「1px」。
       1400px以上では 0.1rem（= 1px。共通CSSの html { font-size: 62.5% } より）に固定し、
       1400px未満は viewport に比例して縮める。
       ※ 共通 common.css は 1200px 以下でしか html の font-size を縮めないため、
         カラム幅だけを 100vw 基準・中身を rem 基準にするとカーブが一致せず、
         1400px未満でセンターカラムの中身がカラム幅を超えて右端が欠ける。
         そこで中身の単位 --u もこの --u-layout から導出し、同じカーブで縮める。 */
    --u-layout: min(0.1rem, calc(100vw / 1400));
    /* センターカラム幅。基本は 450px（= デザイン 375px × 1.2）だが、
       狭いPC幅では SP 実寸の 375px を下回らないようにする。
       この下限が無いと 768px でセンターが 247px まで縮み、本文が 6.6px と
       実質読めなくなる（iPad 縦 768/820px が直撃する）。 */
    --center: max(calc(450 * var(--u-layout)), min(375px, calc(100vw - 8rem)));
    /* 中身の「デザイン1px」は必ずセンターカラム幅から導出する（375デザインpx = センター幅） */
    --u: calc(var(--center) / 375);
    background: var(--page-pc);
  }

  .p-feature__layout {
    display: grid;
    /* 左右はデザインの 519 : 431 の比で残り幅を分け合う
       （1400px 時にデザインどおり 519 / 450 / 431 になる） */
    grid-template-columns: 519fr var(--center) 431fr;
    align-items: start;
    max-width: 140rem;
    margin-inline: auto;
  }

  .p-feature__main {
    min-width: 0;
    grid-column: 2;
  }

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

  .p-sideLogo {
    /* デザイン: 幅 34.7rem。サイドカラムが狭いときはカラム幅に追従させ、
       センターカラムとの間隔（4rem）を必ず確保する。 */
    width: min(34.7rem, calc(100cqw - 4rem));
    margin: 0;
  }

  .p-sideHearts {
    display: block;
    width: min(14rem, calc(100cqw - 4rem));
    aspect-ratio: 140 / 30;
    background: url("../img/pc_logo_heart.svg") no-repeat center / contain;
  }
}