@charset "UTF-8";
/* HANWAY Premium Gift Collection
   寸法は全て layout.json / figma-raw の正値（カンプpx ÷ 10 = rem）
   PC カンプ 1440px（等倍）／ SP カンプ 375px（等倍）・ブレークポイント 767px
   html の font-size を vw 連動させ、1rem = カンプ1px × 縮尺 で全体が相似スケールする。

   配置方針:
   - セクション・テキストの並びはフロー（margin / padding / flex）
   - absolute は「重なりが本質」のものだけ＝MV上のテキスト、写真クリップ窓の中身、
     Guide/Category の写真上プレート、ヘッダー
   - 枠系は辺別線が正（Figma実測）: CTA=下線のみ・Feature行=上下線・QA行=上線のみ */

/* リセットは LP の根（.page）配下だけにスコープする。
   素の全称セレクタ（* { margin:0; padding:0; box-sizing:border-box }）は置かない
   ＝掲載先CMS（MOONBAT ONLINE SHOP）へ style.css を上げると CMS 側のヘッダー・
   フッター・ナビにも掛かってLPの外を壊すため。 */
.page, .page * { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: min(calc(100vw / 144), 10px); }
body {
  margin: 0; /* ローカル単体表示用。CMS側は共通CSSが持つ＝上書きしても実質同値 */
  background: #FBFAF7;
  color: #2E2C29;
  font-family: 'Zen Old Mincho', serif;
  -webkit-font-smoothing: antialiased;
  /* hidden だと祖先がスクロールコンテナ化して .story-pin の sticky が死ぬ＝clip（スクロールコンテナを作らない） */
  overflow-x: clip;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
.sp-only { display: none !important; }
button { font-family: inherit; }
.l-footer{
  margin: 0;
}

/* ===== CMS組み込み用の必須CSS（cms-embed 参照。消さない） =====
   掲載先CMSのラッパー .l-container が幅を絞る（規定幅は案件により異なる）→ 全幅に上書き */
.l-container { width: 100%; }

/* ページは全幅。144remの制約はコンテンツ側（各セクション/.mv-inner/.site-header）に付ける */
.page {
  position: relative;
  /* overflow:hidden は sticky killer（Issue化予定の教訓）。横のはみ出し（帯・MV写真）だけ clip で切る */
  overflow-x: clip;
}
.story, .feature, .gift, .guide, .category, .reviews, .qa {
  max-width: 144rem;
  margin-left: auto; margin-right: auto;
}

/* ===== 出現アニメの共通型（JS無効でも壊れない＝body.anim が無ければ初期表示のまま） ===== */
body.anim .js-mv-bg, body.anim .js-mv-title, body.anim .js-mv-late, body.anim .site-header {
  opacity: 0;
  transition: opacity 1.2s ease;
}
body.anim .js-mv-bg.is-on, body.anim .js-mv-title.is-on,
body.anim .js-mv-late.is-on, body.anim .site-header.is-on { opacity: 1; }

/* ===== ヘッダー（MVに重なる＝absolute） ===== */
/* ヘッダーとMVは全幅ヒーロー＝vw基準の完全比例スケール（カンプpx÷14.4=vw。1440px以下は従来rem値と等価） */
.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; }
.header-logo { position: absolute; top: 1.667vw; left: -0.208vw; }
/* ロゴはFigmaで白版＋黒地のSCREEN合成＝blendはヘッダーのスタッキングコンテキストで効かないため
   事前合成の白版PNG（asset-02-white）を使う。メニュー側はEXCLUSION相当の黒版（asset-02-dark） */
.header-logo img { width: 18.056vw; height: 4.514vw; }
.header-nav {
  position: absolute; top: 2.917vw; left: 17.569vw;
  display: flex; gap: 1.667vw;
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: 1.111vw; line-height: 1.8; letter-spacing: 0.08em; color: #FBFAF7;
  white-space: nowrap;
}
.menu-open { display: none; }

/* ===== SPメニューオーバーレイ ===== */
.menu-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: #FBFAF7;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
html.menu-locked, html.menu-locked body { overflow: hidden; }

/* ===== MV（全画面ヒーロー＝100vh・写真はcover。文字はvw比例＋下端基準
   （下からの余白はカンプ値: タイトル144px=10vw・エンブレム/CTA 40px=2.778vw） ===== */
.mv { position: relative; height: 100vh; height: 100svh; background: #F6F6F6; z-index: 1; }
.mv-photo-wrap { position: absolute; inset: 0; overflow: hidden; }
.mv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-inner { position: absolute; inset: 0; }
.mv-title {
  position: absolute; bottom: 10vw; left: 2.778vw;
  font-size: 2.778vw; line-height: 1.4; font-weight: 700; color: #FBFAF7;
}
.mv-emblem { position: absolute; bottom: 2.778vw; left: 2.778vw; width: 4.444vw; height: 4.444vw; }
.mv-brand-sp { display: none; }
.mv-brand {
  position: absolute; bottom: 2.986vw; left: 8.889vw;
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: 1.667vw; line-height: 1.208; letter-spacing: 0.08em;
  text-transform: uppercase; color: #FBFAF7;
}
.mv-btn {
  position: absolute; bottom: 2.778vw; left: 75vw;
  width: 22.222vw; height: 3.611vw;
  border-bottom: 1px solid #FBFAF7;
  padding: 0.556vw 0 0 1.667vw;
  font-size: 1.389vw; line-height: 1.8; font-weight: 700; color: #FBFAF7;
}
.btn-arrow { position: absolute; right: 1.6rem; top: 1.4rem; width: 1.6rem; height: 1.6rem; }
/* 下向きシェブロン（MV/メニューのCTA）＝支給SVG（img/btn-arrow.svg・25x25）を mask で描画。
   色は currentColor（MV=白・メニュー=黒が自動で乗る） */
.mv-btn .btn-arrow, .menu-mv-btn .btn-arrow {
  background-color: currentColor;
  -webkit-mask: url(../img/btn-arrow.svg) no-repeat center / contain;
  mask: url(../img/btn-arrow.svg) no-repeat center / contain;
}
.menu-mv-btn .btn-arrow { right: 0.8rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; }
.mv-btn .btn-arrow {
  right: 1.533vw; top: 44%; transform: translateY(-50%);
  width: 1.736vw; height: 1.736vw;
}

/* ===== セクション見出し（罫＋ラベル） ===== */
.sec-label { display: flex; align-items: center; margin-left: 6.4rem; }
.sec-rule { width: 16rem; height: 1px; background: #DCDCDC; }
.sec-name {
  margin-left: 1.6rem;
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 2.4rem; line-height: 3.6rem;
}
.sec-brand {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 1.6rem; line-height: 2.1rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sec-label-brand .sec-rule { margin-left: 1.4rem; }

/* ===== Gift Story（ピン演出はJSが .is-pin を付けたときだけ＝既定は静的） ===== */
.story { background: #FBFAF7; }
.story-pin { padding-top: 8.8rem; }
.story.is-pin { height: 280vh; }
.story.is-pin .story-pin {
  /* height:100vh 固定だと SP縦積み（〜950px）と低背PC（768px）で本文下端が
     overflow:hidden に食われて永久に見えない＝min-height＋成り行きで内容ぶん伸ばす。
     --cms-header-h＝掲載先CMSの追尾ヘッダー実測高（script.jsが設定・ローカルは未定義→0px）。
     ヘッダー下端に止め、見える高さも同じぶん詰める（詰めないと下端がフォールド下へはみ出す） */
  position: sticky; top: var(--cms-header-h, 0px);
  min-height: calc(100vh - var(--cms-header-h, 0px));
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.story-cols { display: flex; margin-top: 4rem; }
.story-left { width: 71.9rem; padding-left: 6.4rem; flex: none; }
.story-title { font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
.story-photo { margin-top: 4.8rem; width: 61.6rem; height: 41rem; }
.story-right { border-left: 1px solid #DCDCDC; padding-left: 4.2rem; padding-top: 4.8rem; }
.story-text { font-size: 1.8rem; line-height: 3.2rem; font-weight: 500; }
body.anim .story.is-pin .js-story-title,
body.anim .story.is-pin .js-story-photo { opacity: 0; transition: opacity 1.2s ease; }
body.anim .story.is-pin .js-story-title.is-on,
body.anim .story.is-pin .js-story-photo.is-on { opacity: 1; }
/* 右文章の下から上（js-story-text）の transform/opacity は script.js がインラインpxで駆動する。
   旧実装の transform: calc(var(--story-t)…) は iOS Safari（WebKit）が変数更新時の再解決を
   取りこぼし、実機で不発だった＝パララックスと同じ px 直書き方式へ変更 */

/* ===== Feature ===== */
.feature { padding-top: 16.8rem; }
/* 見出しはh2一つ（Figmaコメント指示）＝2行はspanで段組み */
.feature-heading { margin: 3.2rem 0 0 6.4rem; font-weight: 500; }
.feature-lead { display: block; font-size: 2.4rem; line-height: 4.3rem; }
.feature-title { display: block; font-size: 3.2rem; line-height: 5.8rem; }
/* --fea-zoom＝ホバー時の写真の拡大率（ノブ。1で無効・上げすぎると左の説明文に写真が被る）
   説明文の右端は実測 74.1rem・写真の右端は 128.8rem 固定なので、
   1.5 を超えると写真の左端が 74.6rem まで来て衝突する＝上限は 1.45 前後 */
.feature-list { --fea-zoom: 1.4; margin: 6.4rem 6.4rem 0; }
.feature-item {
  position: relative; height: 16rem; margin-bottom: 0.8rem;
  border-top: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC;
  display: flex; align-items: center;
}
.feature-item:last-child { margin-bottom: 0; }
.feature-num { position: absolute; top: 1rem; left: 1rem; font-size: 1.4rem; line-height: 2.5rem; font-weight: 500; }
.feature-name { margin-left: 2.4rem; width: 21.6rem; font-size: 2.4rem; line-height: 3.4rem; font-weight: 500; flex: none; }
.feature-desc { font-size: 1.6rem; line-height: 2.9rem; }
/* 高さは aspect-ratio で幅に追従＝ホバーで幅を伸ばすと相似で拡大する（36:14.4＝カンプ実測）。
   中の画像は rem 直値でなく窓に対する % ＝窓が伸びても切り抜き位置・比率が1pxも変わらない
   （% の基準は left/width＝窓の幅・top/height＝窓の高さ。SP側は rem 直値のまま上書きする） */
.feature-photo-win {
  position: absolute; top: 0.8rem; left: 92.8rem;
  width: 36rem; aspect-ratio: 36 / 14.4; overflow: hidden;
}
.feature-photo-win img { position: absolute; }
.feature-item1 .feature-photo-win img { top: -137.5%; left: 0; width: 100%; height: 375%; }
.feature-item2 .feature-photo-win img { top: -4.8611%; left: 0; width: 100%; height: 109.7222%; }
.feature-item3 .feature-photo-win img { top: -79.8611%; left: -16.3889%; width: 133.0556%; height: 221.5278%; }

/* ===== Gift ===== */
.gift { padding-top: 12rem; }
.gift-title { margin: 3.2rem 0 0 6.4rem; font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
.gift-row { position: relative; height: 72rem; }
.gift-row1 { margin-top: 6.4rem; }
.gift-heading { font-size: 2.4rem; line-height: 4.3rem; font-weight: 500; }
.gift-heading-sp { display: none; }
.gift-sub { margin-top: 4.8rem; font-size: 1.8rem; line-height: 3.2rem; }
.gift-body { margin-top: 2.4rem; font-size: 1.6rem; line-height: 2.9rem; }
.gift-tag {
  display: block; width: fit-content; margin-top: 3.2rem;
  border: 1px solid #A98F71; height: 3.3rem; padding: 0 1.6rem;
  font-size: 1.4rem; line-height: 3.1rem; color: #A98F71;
}
.gift-row2 .gift-tag { margin-top: 4rem; }
.gift-row1 .gift-text-col { padding: 6.4rem 0 0 6.4rem; width: 72rem; }
.gift-photo-win { position: absolute; overflow: hidden; }
.gift-photo-win1 { top: 0; left: 72rem; width: 72rem; height: 72rem; }
.gift-photo-win1 img { position: absolute; top: 0; left: -18rem; width: 107.9rem; height: 72rem; }
.gift-photo-win2 { top: 0; left: 0; width: 72rem; height: 72rem; }
.gift-photo-win2 img { width: 72rem; height: 72rem; }
.gift-row2 .gift-text-col { padding: 6.4rem 0 0 78.4rem; }

/* ===== ベージュ帯（Guide〜Collection）＝背景は全幅・中のセクションが144rem中央 ===== */
.beige { background: #EFEAE6; padding-bottom: 12.8rem; }
/* Collection（スライダー）は全幅のまま＝144rem制約を付けない。見出しだけ中央カラムに整列 */
.collection .sec-label { margin-left: calc(6.4rem + max(0px, 50% - 72rem)); }

/* ===== Gift Guide ===== */
.guide { padding-top: 12rem; }
.guide-title { margin: 3.2rem 0 0 6.4rem; font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
.guide-title-sp { display: none; }
.guide-item { position: relative; height: 44rem; margin-top: 12rem; }
.guide-item + .guide-item { margin-top: 8rem; }
.guide-photo-win {
  position: absolute; top: 0; left: 37.2rem;
  width: 100.4rem; height: 44rem; overflow: hidden;
}
.guide-photo-win img { position: absolute; }
.guide-item1 .guide-photo-win img { top: -40.9rem; left: 0; width: 100.4rem; height: 124.9rem; }
.guide-item2 .guide-photo-win img { top: -22rem; left: -9.8rem; width: 120rem; height: 80rem; }
.guide-item3 .guide-photo-win img { top: -53.7rem; left: 0; width: 100.4rem; height: 150.5rem; }
.guide-head { position: absolute; top: 0; left: 0; width: 37.2rem; height: 10.5rem; }
.guide-head-label {
  position: absolute; top: 1.3rem; left: 6.4rem;
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 1.2rem; line-height: 1.8rem; text-transform: uppercase; white-space: nowrap;
}
.guide-head-num { position: absolute; top: 3.1rem; left: 7.2rem; font-size: 4rem; line-height: 4rem; }
.guide-head-en {
  position: absolute; top: 0.8rem; left: 14rem;
  width: 15rem; height: 4.8rem; background: #FBFAF7;
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 4.8rem; line-height: 4.8rem; text-align: center;
}
.guide-head-ja {
  position: absolute; top: 6rem; left: 14rem;
  width: 15rem; height: 2.4rem; background: #FBFAF7;
  font-size: 2.4rem; line-height: 2.4rem; text-align: center;
}
.guide-copy {
  position: absolute; right: 2.4rem; bottom: 2.1rem;
  background: #FBFAF7; height: 4.3rem; padding: 0 1.6rem;
  font-size: 2.4rem; line-height: 4.3rem; white-space: nowrap;
}
.guide-btn {
  position: absolute; top: 38rem; left: 6.4rem;
  width: 24.4rem; height: 5.2rem;
  border-bottom: 1px solid #2E2C29;
  padding: 0.8rem 0 0 1.6rem;
  font-size: 2rem; line-height: 3.6rem; font-weight: 700;
}
/* 右向きシェブロン＝支給SVGの-90°回転版（img/btn-arrow-right.svg・25x25）を mask で描画。
   MV/メニューと同方式（CSS罫線+rotateはサブピクセルでズレるため廃止）。色は currentColor */
.guide-btn .btn-arrow {
  right: 1.6rem; top: 1.5rem; width: 2.4rem; height: 2.4rem;
  background-color: currentColor;
  -webkit-mask: url(../img/btn-arrow-right.svg) no-repeat center / contain;
  mask: url(../img/btn-arrow-right.svg) no-repeat center / contain;
}

/* 全幅フォトコラージュ帯（マーキー：左→右へ流れる。1周期=1セット160rem・計3セットで無限ループ。
   1440px超では1rem=10px固定＝100vw>144remになるため、始点translateX(-160rem)でも右端まで埋まるよう
   3セット必要（2セットだと右端152remで途切れ、開始時に右側が空く）。
   knob=--mq-dur。JS無効/anim=0/reduced-motionでは静止＝デザイン位置） */
/* 帯は全幅（.guideが144rem制約を持つのでブレイクアウト） */
.guide-band { overflow: hidden; margin: 16rem 0 0 calc(50% - 50vw); width: 100vw; }
.band-track { display: flex; width: max-content; margin-left: -8rem; }
body.anim .band-track { animation: band-flow var(--mq-dur, 48s) linear infinite; }
@keyframes band-flow {
  from { transform: translateX(-160rem); }
  to { transform: translateX(0); }
}
.band-win { flex: none; width: 32rem; height: 21.3rem; overflow: hidden; position: relative; }
.band-win img { position: absolute; top: 0; left: 0; width: 32rem; height: 21.3rem; }
.band-win3 img { top: -13.3rem; width: 32rem; height: 48rem; }
.band-win4 img { top: -6.7rem; left: -10rem; width: 52rem; height: 34.7rem; }
.band-win5 img { left: -0.3rem; width: 32.6rem; height: 21.3rem; }

/* ===== Category ===== */
.category { padding-top: 16rem; }
.category-title { margin: 3.2rem 0 0 6.4rem; font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
/* flex-wrap＋ぴったり幅は丸め誤差で1カラムに落ちる（768px等で実測）＝折り返し得ないgridで2カラム固定 */
.category-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
  margin: 6.4rem 6.4rem 0;
}
.category-card { position: relative; height: 31.6rem; overflow: hidden; display: block; }
.category-card img { position: absolute; left: 0; width: 64.8rem; }
.category-card1 img { top: -16.7rem; height: 65rem; }
.category-card2 img { top: -5.4rem; height: 42.3rem; }
.category-card3 img { top: -5.8rem; height: 43.2rem; }
.category-card4 img { top: -5.8rem; height: 43.2rem; }
.category-name {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #FBFAF7; padding: 0.4rem 1.6rem;
  font-size: 2.4rem; line-height: 4.3rem; white-space: nowrap;
}

/* ===== Gift Collection（スライダー） ===== */
.collection { padding-top: 12rem; }
.collection-title { margin: 3.2rem 0 0 calc(6.4rem + max(0px, 50% - 72rem)); font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
.collection-slider { margin-top: 6.4rem; }
/* ループのクローンが左パディング帯に見えないよう、コンテンツ列左端（=JSのpadding.leftと同式）で切る */
.collection-slider .splide__track { clip-path: inset(0 0 0 calc(6.4rem + max(0px, 50% - 72rem))); }
.product-card { display: block; width: 28rem; }
.product-photo-win { position: relative; overflow: hidden; }
.product-photo { width: 100%; height: auto; }
.product-photo-wide { position: absolute; top: 0; left: -7.1rem; width: 42.3rem; height: 28rem; }
.product-tag {
  display: inline-block; margin: 0.8rem 0 0 0.8rem;
  border: 1px solid #A98F71; height: 2.5rem; padding: 0 5px;
  font-size: 1.4rem; line-height: 2.3rem; text-align: center; color: #A98F71;
}
.product-name { margin: 0.4rem 0 0 0.8rem; font-size: 2rem; line-height: 3.6rem; }
.product-kana { margin-left: 0.4rem; font-size: 1.2rem; line-height: 2.2rem; }
.product-price { margin: -0.4rem 0 0 0.8rem; font-size: 1.6rem; line-height: 2.9rem; }
.product-tax { margin-left: 0.4rem; font-size: 1.2rem; line-height: 2.2rem; }
.collection-slider .splide__arrow {
  width: 4.8rem; height: 4.8rem; opacity: 1;
  background: #FFFFFF; border: 1px solid #DDDDDD;
  top: 18.8rem; transform: none;
}
/* prev矢印は先頭商品（144remコンテンツ列）の左端に重なる位置＝デザイン準拠 */
.collection-slider .splide__arrow--prev { left: calc(4rem + max(0px, 50% - 72rem)); background: #FBFAF7; border-color: #DCDCDC; }
.collection-slider .splide__arrow--next { right: 4rem; }
/* 矢印の中身は既定の塗り三角SVGでなく細線シェブロン（カンプ準拠） */
.collection-slider .splide__arrow svg { display: none; }
.collection-slider .splide__arrow::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1.1rem; height: 1.1rem;
  border-top: 1px solid #DCDCDC; border-right: 1px solid #DCDCDC;
}
.collection-slider .splide__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.collection-slider .splide__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }

/* ===== Reviews ===== */
.reviews { padding-top: 8.8rem; }
.reviews-title { margin: 3.2rem 0 0 6.4rem; font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
.reviews-grid {
  display: flex; flex-wrap: wrap; column-gap: 4rem; row-gap: 4rem;
  margin: 6.4rem 0 0 19.6rem; width: 104.8rem;
}
.review-card {
  width: 50.4rem; border-radius: 0 2.4rem 2.4rem 2.4rem; /* 左上のみ角丸なし */
  background: #EFEAE6;
  padding: 2.4rem 3.2rem 2.4rem;
}
/* 出現：下1remから透過フェード（body.animのときだけ） */
body.anim .js-reveal { opacity: 0; transform: translateY(1rem); transition: opacity 1.2s ease, transform 1.2s ease; }
body.anim .js-reveal.is-on { opacity: 1; transform: none; }
/* Giftの写真窓は透過のみ（移動なし）で出現 */
body.anim .gift-photo-win.js-reveal { transform: none; }
.review-card2, .review-card4 { margin-top: 4rem; }
.review-head { display: flex; min-height: 8.5rem; }
.review-head-left { flex: none; width: 14.3rem; }
.review-icon { width: 5.6rem; height: 5.6rem; margin-left: 6.3rem; }
.review-age { margin-left: 5.5rem; font-size: 1.6rem; line-height: 2.9rem; }
.review-head-right { border-left: 1px solid #FBFAF7; padding-left: 1.6rem; display: flex; }
/* 窓はアイコン上端（=headの上端）から1.45rem下（Figma正値: win 8643.94 - icon 8629.44） */
.review-thumb-win { flex: none; width: 5.6rem; height: 5.6rem; margin-top: 1.45rem; overflow: hidden; position: relative; }
.review-thumb-win img { position: absolute; }
.review-thumb-win .thumb-wide { left: -1.2rem; width: 8rem; height: 5.6rem; }
.review-thumb-win .thumb-tall { top: -1.2rem; left: -0.2rem; width: 6rem; height: 8rem; }
.review-meta { margin-left: 1rem; padding-top: 1.2rem; }
.review-product { font-size: 1.6rem; line-height: 2.9rem; }
.review-reason { margin-top: 0.4rem; display: flex; align-items: center; }
.review-reason-label {
  border: 1px solid #FBFAF7; padding: 0 0.8rem;
  font-size: 1.2rem; line-height: 2rem;
}
.review-reason-value { margin-left: 1.6rem; font-size: 1.6rem; line-height: 2.9rem; }
.review-divider { border: none; border-top: 1px solid #FBFAF7; margin: 2.4rem 0 0; }
.review-text { margin-top: 2.4rem; font-size: 2rem; line-height: 3.6rem; }
.review-text-sp { display: none; }

/* ===== Q&A ===== */
.qa { padding-top: 8.8rem; display: flex; }
.qa-side { flex: none; width: 37.3rem; }
.qa-title { margin: 3.2rem 0 0 6.4rem; font-size: 3.2rem; line-height: 5.8rem; font-weight: 500; }
.qa-list { flex: 1; margin-right: 6.4rem; margin-top: 1.6rem; }
.qa-item { border-top: 1px solid #DCDCDC; padding: 3.2rem 0 3.1rem; position: relative; }
.qa-q { display: flex; }
.qa-mark { font-size: 2.4rem; line-height: 4.3rem; font-weight: 500; margin-left: 1.6rem; }
.qa-question { margin-left: 4rem; font-size: 2rem; line-height: 3.6rem; font-weight: 500; padding-top: 0.4rem; }
.qa-toggle { position: absolute; top: 5.4rem; right: 1.6rem; width: 4.4rem; height: 1px; background: #2E2C29; }
.qa-answer { margin: 3.2rem 0 0 8rem; font-size: 1.6rem; line-height: 2.9rem; font-weight: 500; }
.qa-more { margin: 1rem 1.6rem 0 0; text-align: right; font-size: 1.6rem; line-height: 2.9rem; font-weight: 500; }
.qa-more a { text-decoration: underline; text-underline-offset: 0.4rem; }

/* ===== フッター写真帯（全幅。画像%は1440px以下で従来値と等価・超では端まで＋上下中央） ===== */
.footer-band { position: relative; margin-top: 8.8rem; height: 44rem; overflow: hidden; }
.footer-band-photo-pc { width: 100%; height: auto; margin-top: calc(22rem - 15.28%); }
.footer-band-photo-sp { display: none; }
/* パララックス時は1.3倍で上下に遊びを作る（animのときだけ＝静的表示はデザイン等倍のまま） */
body.anim .footer-band-photo-pc {
  position: absolute; top: 0; left: -15%;
  width: 130%; height: auto; margin-top: calc(22rem - 19.86%);
}

/* ===== ホバー（アニメ指示: ホバー時0.6透過。hoverが本当にある環境限定＝SPタップ張り付き防止） ===== */
@media (hover: hover) {
  .mv-btn, .guide-btn, .menu-mv-btn, .product-card,
  .header-nav a, .qa-more a, .header-logo, a.gift-tag {
    transition: opacity 0.3s ease;
  }
  .mv-btn:hover, .guide-btn:hover, .menu-mv-btn:hover,
  .product-card:hover, .header-nav a:hover, .qa-more a:hover, .header-logo:hover,
  a.gift-tag:hover {
    opacity: 0.6;
  }
  /* category-card は透過でなく枠内で画像ズーム */
  .category-card img { transition: transform 0.6s ease; }
  .category-card:hover img { transform: scale(1.2); }
}

/* Feature の写真ホバー拡大（Figmaフレーム外の指示「画像ホバーで大きくなる」＋参考 yokanka.com の NEWS）
   参考の実装＝クリップ窓そのものの width を伸ばし、高さは aspect-ratio で追従・行の高さも伸びる。
   ここも同じ型。ただし窓は行の中に絶対配置で右へ 2.4rem しか余白が無いので、右端 128.8rem を
   固定したまま左へ伸ばす（margin-left の負値。right 指定にしないのは、html の font-size が
   100vw 基準＝スクロールバーの有無で行の右端の rem 値が動き、静止位置がズレるため）。
   窓は top: 0.8rem のまま下へ伸び、行も同じだけ下へ伸びる＝上下 0.8rem の余白は自動で保たれる。
   幅767px以下は SP レイアウト（行 display:block・高さ別値）＝ここの height 上書きを掛けない */
@media (hover: hover) and (min-width: 768px) {
  .feature-item { transition: height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .feature-photo-win {
    transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                margin-left 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .feature-item:hover { height: calc(1.6rem + 14.4rem * var(--fea-zoom)); }
  .feature-item:hover .feature-photo-win {
    width: calc(36rem * var(--fea-zoom));
    margin-left: calc(36rem * (1 - var(--fea-zoom)));
  }
}

/* ============================================================ */
/* ===== SP（≦767px・カンプ375等倍） ===== */
/* ============================================================ */
@media (max-width: 767px) {
  html { font-size: calc(100vw / 37.5); }
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }

  /* ヘッダー：ロゴ＋ハンバーガー */
  .header-logo { top: 0.6rem; left: -1.4rem; }
  .header-logo img { width: 18rem; height: 4.5rem; }
  .header-nav { display: none; }
  .menu-open {
    display: block; position: absolute; top: 3rem; right: 2rem;
    width: 4rem; height: 1.5rem;
    background: none; border: none; cursor: pointer;
  }
  .menu-open span {
    position: absolute; left: 0; width: 4rem; height: 1px; background: #FBFAF7;
    box-shadow: 0 0 0.4rem rgba(0,0,0,0.25);
  }
  .menu-open span:first-child { top: 0; }
  .menu-open span:last-child { bottom: 0; }

  /* SPメニュー（menuアートボード375x650の正値） */
  .menu-head { position: relative; }
  .menu-logo { position: absolute; top: 2.9rem; left: -0.3rem; }
  .menu-logo img { width: 26rem; height: 6.5rem; }
  .menu-close {
    position: absolute; top: 2.4rem; right: 2rem;
    width: 3.4rem; height: 3.4rem;
    background: none; border: none; cursor: pointer;
  }
  .menu-close span { position: absolute; top: 50%; left: 0; width: 3.4rem; height: 1px; background: #2E2C29; }
  .menu-close span:first-child { transform: rotate(45deg); }
  .menu-close span:last-child { transform: rotate(-45deg); }
  .menu-nav { display: flex; flex-direction: column; padding: 12.2rem 0 0 4rem; }
  .menu-nav a {
    font-family: 'Cormorant Garamond', serif; font-weight: 700;
    font-size: 1.6rem; line-height: 2.9rem; letter-spacing: 0.08em;
    margin-bottom: 1.6rem;
  }
  .menu-mv { position: absolute; left: 0; bottom: 0; width: 100%; height: 13rem; }
  .menu-emblem { position: absolute; top: 0.2rem; left: 4rem; width: 4rem; height: 4rem; }
  .menu-brand {
    position: absolute; top: 4.6rem; left: 2rem; width: 8rem;
    font-family: 'Cormorant Garamond', serif; font-weight: 700;
    font-size: 1rem; line-height: 1.2rem; letter-spacing: 0.08em;
    text-transform: uppercase; text-align: center;
  }
  .menu-mv-btn {
    position: absolute; top: 4.1rem; left: 12.4rem;
    width: 23.1rem; height: 4.1rem;
    border-bottom: 1px solid #2E2C29;
    padding: 0.8rem 0 0 0.8rem;
    font-size: 1.6rem; line-height: 2.9rem; font-weight: 700;
  }
  .menu-mv-btn .btn-arrow { right: 0.8rem; width: 2.5rem; height: 2.5rem; }

  /* MV（写真差し替え＝MV枠クロップ1枚をcover表示・100vh。下要素群は下端基準） */
  .mv { height: 100vh; height: 100svh; }
  .mv-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mv-photo-sp-a, .mv-photo-sp-b { display: none !important; }
  .mv-title { top: 8.8rem; bottom: auto; left: 1.6rem; font-size: 2.4rem; line-height: 3.4rem; }
  .mv-emblem { top: auto; bottom: 8.3rem; left: 3.6rem; width: 4.8rem; height: 4.8rem; }
  .mv-brand-pc { display: none; }
  .mv-brand-sp {
    display: block !important; top: auto; bottom: 4rem; left: 1.6rem; width: 8.8rem;
    font-size: 1.1rem; line-height: 1.3rem; letter-spacing: 0.08em; text-align: center;
  }
  .mv-btn {
    top: auto; bottom: 4rem; left: 12.8rem; width: 23.1rem; height: 4.1rem;
    padding: 0.8rem 0 0 0.8rem; font-size: 1.6rem; line-height: 2.9rem;
  }
  .mv-btn .btn-arrow { right: 0.8rem; width: 2.5rem; height: 2.5rem; }

  /* セクション見出し */
  .sec-label { margin-left: 1.6rem; margin-right: 1.6rem; }
  .sec-rule { flex: 1; width: auto; }
  .sec-name { font-size: 1.6rem; line-height: 2.4rem; }
  .sec-brand { font-size: 1.1rem; line-height: 1.4rem; }

  /* Gift Story */
  .story-pin { padding-top: 8.8rem; }
  .story-cols { display: block; margin-top: 4.8rem; }
  .story-left { width: auto; padding-left: 1.6rem; padding-right: 1.6rem; }
  .story-title { font-size: 2.4rem; line-height: 4.3rem; }
  .story-photo { margin-top: 3.2rem; width: 34.3rem; height: 22.9rem; }
  .story-right { border-left: none; padding: 4.8rem 1.6rem 0; }
  .story-text { font-size: 1.6rem; line-height: 2.6rem; }

  /* Feature */
  .feature { padding-top: 16rem; }
  .feature-heading { margin: 4.8rem 1.6rem 0; }
  .feature-lead { font-size: 1.8rem; line-height: 3.2rem; }
  .feature-title { font-size: 2.4rem; line-height: 4.3rem; }
  .feature-list { margin: 6.4rem 1.6rem 0; }
  .feature-item { display: block; height: 38.3rem; margin-bottom: 2.4rem; }
  .feature-item3 { height: 40.3rem; }
  .feature-num { top: 1.6rem; left: 0; }
  .feature-name { margin: 0; padding-top: 4.9rem; width: auto; font-size: 2rem; line-height: 3.6rem; }
  .feature-desc { margin-top: 2.4rem; font-size: 1.6rem; line-height: 2.9rem; }
  .feature-photo-win { top: auto; bottom: 1.6rem; left: 0; width: 34.3rem; height: 16rem; }
  .feature-item1 .feature-photo-win img { top: -19rem; left: 0; width: 36rem; height: 54rem; }
  .feature-item2 .feature-photo-win img { top: -0.4rem; left: 0; width: 34.3rem; height: 15.1rem; }
  .feature-item3 .feature-photo-win img { top: -8rem; left: -6.8rem; width: 47.9rem; height: 31.9rem; }

  /* Gift */
  .gift { padding-top: 16rem; padding-bottom: 16rem; }
  .gift-title { margin: 4.8rem 1.6rem 0; font-size: 2.4rem; line-height: 4.3rem; }
  .gift-row { height: auto; }
  .gift-row1 { margin-top: 6.4rem; display: flex; flex-direction: column-reverse; }
  .gift-row1 .gift-text-col { padding: 6.4rem 1.6rem 0; width: auto; }
  .gift-heading-pc { display: none; }
  .gift-heading-sp { display: block; }
  .gift-heading { font-size: 2rem; line-height: 3.6rem; }
  .gift-sub { margin-top: 4.8rem; font-size: 1.8rem; line-height: 3.2rem; }
  .gift-body { margin-top: 4rem; font-size: 1.6rem; line-height: 2.9rem; }
  .gift-tag { margin-top: 3.3rem; height: 3rem; line-height: 2.8rem; font-size: 1.2rem; padding: 0 1.6rem; }
  .gift-row2 .gift-tag { margin-top: 3.1rem; }
  .gift-photo-win { position: static; }
  .gift-photo-win1 { width: 37.5rem; height: 37.5rem; }
  .gift-photo-win1 img { position: static; width: 37.5rem; height: 37.5rem; }
  .gift-photo-win2 { width: 37.5rem; height: 37.5rem; margin-top: 12rem; }
  .gift-photo-win2 img { width: 37.5rem; height: 37.5rem; }
  .gift-row2 .gift-text-col { padding: 6.4rem 1.6rem 0; }

  /* ベージュ帯 */
  .beige { padding-bottom: 9.6rem; }

  /* Gift Guide */
  .guide { padding-top: 8.8rem; }
  .guide-title-pc { display: none; }
  .guide-title-sp { display: block; margin: 4.8rem 1.6rem 0; font-size: 2.4rem; line-height: 4.3rem; font-weight: 500; }
  .guide-item { height: auto; margin-top: 8.8rem; }
  .guide-item + .guide-item { margin-top: 8.8rem; }
  .guide-head { position: relative; width: auto; height: 14.2rem; }
  .guide-head-label { top: 0.5rem; left: 1.6rem; }
  .guide-head-num { top: 0; left: 8.6rem; font-size: 2.4rem; line-height: 2.4rem; }
  .guide-head-en {
    top: 3.8rem; left: 1.6rem; width: auto; height: 3.2rem;
    padding: 0 0.6rem; font-size: 3.2rem; line-height: 3.2rem;
  }
  .guide-head-ja { top: 7.4rem; left: 1.6rem; width: auto; height: 2rem; padding: 0 2rem; font-size: 2rem; line-height: 2rem; }
  .guide-photo-win { position: relative; top: auto; left: 1.6rem; width: 34.3rem; height: 40rem; }
  .guide-item1 .guide-photo-win img { top: -10.4rem; left: -5.8rem; width: 48.9rem; height: 60.8rem; }
  .guide-item2 .guide-photo-win img { top: -9.2rem; left: -20.6rem; width: 75.5rem; height: 50.4rem; }
  .guide-item3 .guide-photo-win img { top: -6.1rem; left: 0; width: 34.3rem; height: 51.4rem; }
  .guide-copy {
    right: auto; left: 0; bottom: 5.7rem;
    height: 2.9rem; padding: 0 0.8rem;
    font-size: 1.6rem; line-height: 2.9rem;
  }
  .guide-copy-line2 { bottom: 2.4rem; }
  .guide-btn {
    position: relative; top: auto; left: auto;
    margin: 1.6rem 1.6rem 0 auto; display: block;
    width: 15.2rem; height: 4.1rem;
    padding: 0.8rem 0 0 0.8rem; font-size: 1.6rem; line-height: 2.9rem;
  }
  .guide-btn-classic { width: 18.4rem; }
  .guide-btn .btn-arrow { right: 1.1rem; top: 1.4rem; width: 1.8rem; height: 1.8rem; }

  /* 帯 */
  .guide-band { margin: 12.8rem 0 0; }
  .band-track { margin-left: -12.8rem; }

  /* Category */
  .category { padding-top: 20rem; }
  .category-title { margin: 4.8rem 1.6rem 0; font-size: 2.4rem; line-height: 4.3rem; }
  /* スマホ幅（≦480px）までは2カラム維持＝SPカード(34.3×16)を半分幅へ相似縮小(×0.4767)。列はgrid継承 */
  .category-grid { margin: 6.4rem 1.6rem 0; }
  .category-card { height: 7.63rem; }
  .category-card img { width: 16.35rem; }
  .category-card1 img { top: -4.39rem; height: 16.4rem; }
  .category-card2 img { top: -1.53rem; height: 10.68rem; }
  .category-card3 img { top: -1.62rem; height: 10.92rem; }
  .category-card4 img { top: -1.62rem; height: 10.92rem; }
  .category-name { padding: 0 0.8rem; font-size: 1.6rem; line-height: 2.9rem; }

  /* Gift Collection */
  .collection { padding-top: 16rem; }
  .collection .sec-label { margin-left: 1.6rem; }
  .collection-title { margin: 4.8rem 1.6rem 0; font-size: 2.4rem; line-height: 4.3rem; }
  .collection-slider { margin-top: 6.4rem; }
  .collection-slider .splide__track { padding-left: 1.6rem; clip-path: none; }
  .collection-slider .splide__arrow { top: 16.9rem; }
  .collection-slider .splide__arrow--prev { left: 1.6rem; }
  .collection-slider .splide__arrow--next { right: 1.6rem; }

  /* Reviews */
  .reviews { padding-top: 16rem; }
  .reviews-title { margin: 4.8rem 1.6rem 0; font-size: 2.4rem; line-height: 4.3rem; }
  .reviews-grid { display: block; margin: 6.4rem 1.6rem 0; width: auto; }
  .review-card { width: 34.3rem; padding: 1.6rem 1.6rem 1.6rem; margin-bottom: 4rem; }
  .review-card2, .review-card4 { margin-top: 0; }
  .review-card:last-child { margin-bottom: 0; }
  .review-head { min-height: 7rem; }
  .review-head-left { width: 7.5rem; }
  .review-icon { width: 4.8rem; height: 4.8rem; margin-left: 0.3rem; }
  .review-age { margin-left: 0; font-size: 1.2rem; line-height: 2.2rem; }
  .review-head-right { padding-left: 0.3rem; }
  /* SPの窓はFigma正値で4rem角・head上端から1.5rem下・画像は高さフィット（下余白なし） */
  .review-thumb-win { width: 4rem; height: 4rem; margin-top: 1.5rem; }
  .review-thumb-win .thumb-wide { left: -0.86rem; top: 0; width: 5.73rem; height: 4rem; }
  .review-thumb-win .thumb-tall { top: -2rem; left: -1rem; width: 6rem; height: 8rem; }
  .review-meta { margin-left: 0.8rem; padding-top: 0.8rem; }
  .review-product { font-size: 1.4rem; line-height: 2.5rem; }
  .review-reason-label { font-size: 1.2rem; line-height: 2rem; padding: 0 0.4rem; }
  .review-reason-value { margin-left: 0.8rem; font-size: 1.4rem; line-height: 2.5rem; }
  .review-divider { margin-top: -0.2rem; }
  .review-text { margin-top: 2.2rem; font-size: 1.3rem; line-height: 2.3rem; }
  .review-text-pc { display: none; }
  .review-text-sp { display: block; }

  /* Q&A */
  .qa { display: block; padding-top: 16rem; }
  .qa-side { width: auto; }
  .qa-title { margin: 4.8rem 1.6rem 0; font-size: 2.4rem; line-height: 4.3rem; }
  .qa-list { margin: 6.4rem 1.6rem 0; }
  .qa-item { padding: 1.6rem 0 3.1rem; }
  .qa-mark { margin-left: 1.6rem; font-size: 1.6rem; line-height: 2.9rem; }
  .qa-question { margin-left: 1.6rem; font-size: 1.6rem; line-height: 2.9rem; padding-top: 0; }
  .qa-toggle { top: 3rem; right: 0.8rem; width: 2.4rem; }
  .qa-answer { margin: 1.6rem 0 0; font-size: 1.3rem; line-height: 2.3rem; }
  .qa-more { margin: 1.6rem 0 0; font-size: 1.3rem; line-height: 2.3rem; }

  /* フッター写真帯 */
  .footer-band { margin-top: 16rem; height: 24rem; }
  .footer-band-photo-pc { display: none !important; }
  .footer-band-photo-sp { display: block; width: 37.5rem; height: 24rem; }
  body.anim .footer-band-photo-sp {
    position: absolute; top: -3.6rem; left: -5.6rem;
    width: 48.8rem; height: 31.2rem;
  }
  .footer{
    padding: 0;
  }
}

/* ===== スマホ幅（≦480px）＝Category はここで1カラム（SPカンプ375の原寸） ===== */
@media (max-width: 480px) {
  .category-grid { display: block; }
  .category-card { width: 34.3rem; height: 16rem; margin-bottom: 1.6rem; }
  .category-card:last-child { margin-bottom: 0; }
  .category-card img { width: 34.3rem; }
  .category-card1 img { top: -9.2rem; height: 34.4rem; }
  .category-card2 img { top: -3.2rem; height: 22.4rem; }
  .category-card3 img { top: -3.4rem; height: 22.9rem; }
  .category-card4 img { top: -3.4rem; height: 22.9rem; }
}