/* =========================================================
   JUWARI 通常販売LP — style.css  (v3: Coral Pink リデザイン／パッケージ由来のブランドカラー)
   コンセプト: Appleの余白 × 韓国プレミアムコスメの洗練 × JUWARIのやさしさ
   方針: CLAUDE.md §5 / §9
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root {
  /* 花びらマスター・パレット（軍神と偽りの花嫁 表紙の花弁を実測 #E9848E／色相そのまま展開） */
  --c-white:      #FFFFFF;
  --c-ivory:      #FBF6F6;  /* ベース（花弁を含んだ温かい白） */
  --c-sheer-1:    #FDF4F5;  /* 最淡・花弁トーンの白ピンク */
  --c-sheer-2:    #FBE7EA;  /* 淡・花弁ピンク */
  --c-sheer-3:    #FBE8EB;  /* 淡・花弁ピンク（別調） */
  --c-sheer-4:    #F4EDEE;  /* 花弁グレージュ */
  --c-pink:       #E9848E;  /* ★マスター：花びらの代表色（コーラルローズ／透明感） */
  --c-pink-deep:  #D3626F;  /* 強調：花弁を濃く（見出し・数字・CTA・#・アイコン） */
  --c-pink-soft:  #F8DBDE;  /* チップ・ピル背景・縁取り用の淡花弁 */
  --c-heading:    #7A555C;  /* 構造的見出し・名前・Q等（花弁系ダスティローズ・可読） */
  --c-text:       #7D6A6D;  /* 本文（ローズトープ） */
  --c-text-soft:  #A99B9E;  /* 補足テキスト */
  --c-line:       #F0DCE0;  /* 罫線（花弁ローズ） */
  --c-gold:       #C8A870;  /* シャンパンゴールド（アクセント5%以内・現状維持） */

  /* タイポグラフィ（メイン: Zen Kaku Gothic New ／ 英字・数字: Jost） */
  --f-sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif;
  --f-en:   'Jost', 'Zen Kaku Gothic New', sans-serif;   /* 英字ラベル（CHANGE等） */
  --f-num:  'Jost', 'Zen Kaku Gothic New', sans-serif;   /* 数字（洗練・ミニマル） */

  /* レイアウト（余白広め・呼吸感） */
  --maxw: 1080px;
  --gutter: clamp(22px, 6vw, 60px);
  --section-y: clamp(96px, 18vw, 184px);
  --radius: 20px;
  --btn-h: 60px;

  /* 枠線に頼らず、余白とごく薄い陰影だけで区切る（Tamburins的な空気感） */
  --shadow-soft:   0 18px 50px rgba(180,150,150,.07);
  --shadow-softer: 0 12px 36px rgba(180,150,150,.05);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-ivory);
  line-height: 2.05;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-break: strict;   /* 日本語の禁則処理を厳格に適用 */
  word-break: normal;
}
/* 意味の途中で改行させたくない語句に付ける小ユーティリティ（助詞・末尾の孤立を防ぐ） */
.nb { white-space: nowrap; }
/* 改行ユーティリティ：スマホのみ改行（PCでは1行に）。意味の区切りで改行を制御 */
.br-sp { display: inline; }
@media (min-width: 768px) { .br-sp { display: none; } }
img, video { max-width: 100%; height: auto; display: block; }
/* 内容写真は読み込み失敗・待機中も、壊れアイコンではなく上品なシアーピンク面を見せる
   （不透明JPEGのみ対象。ロゴ透過PNG・使い方SVGは除外して透過を保つ） */
.solution__bg img {
  background: linear-gradient(135deg, var(--c-sheer-2), var(--c-sheer-3));
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* ---------- 共通レイアウト ---------- */
.section { padding: var(--section-y) var(--gutter); }
.container { max-width: var(--maxw); margin-inline: auto; }
.container--narrow { max-width: 680px; }
.center { text-align: center; }

/* 英語エンブレム：小さめ・細め・字間広め（上品） */
.eyebrow {
  font-family: var(--f-en);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .46em;
  text-indent: .46em;
  text-transform: uppercase;
  color: var(--c-pink-deep);
  margin-bottom: 1.8em;
}

/* 日本語見出し：繊細・上品・抜け感（韓国プレミアムコスメ風の軽やかなタイポ） */
.headline {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  line-height: 1.8;
  letter-spacing: .06em;
  /* 上下グラデーション（上=濃いピンク→下へ自然に淡く）。繊細で上質な透明感・立体感 */
  color: #D6748C;                                                /* 非対応ブラウザ用フォールバック（フッター系の青み寄りピンク） */
  background: linear-gradient(180deg, #D6748C 12%, #EDA6B7 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;   /* 見出しの行を均等に折り返し、2〜3行に収める */
}
/* 見出しはブランドのキーカラー（青み寄りのやわらかいピンク・グラデーション）で全セクション統一。
   視認性のためのシャドウ・縁取り・色の変更は行わない（ブランドカラー優先） */
.lead {
  font-size: clamp(.92rem, 3.8vw, 1.04rem);
  line-height: 2.2;
  margin-top: 1.6em;
  color: var(--c-text);
  text-wrap: pretty;    /* 行末の孤立文字を防ぐ */
}

/* 金の細線（アクセント） */
.rule-gold {
  width: 36px; height: 1px;
  background: var(--c-gold);
  margin: 2em auto;
  border: 0;
}

/* 注釈（※注記）— コントラスト確保のため少し濃いめ */
.note {
  font-size: .73rem;
  line-height: 1.85;
  color: #877074;
  letter-spacing: .01em;
}

/* ---------- ボタン（プレミアムCTA） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: var(--btn-h);
  padding: 0 clamp(2.2rem, 8vw, 3.6rem);
  background: linear-gradient(135deg, #F3A7B0 0%, var(--c-pink-deep) 100%);
  color: var(--c-white);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .12em;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(211,98,111,.34), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, filter .4s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(211,98,111,.46), inset 0 1px 0 rgba(255,255,255,.4); filter: saturate(1.05); }
.btn:active { transform: translateY(-1px); }
.btn .arrow { font-size: .9em; transition: transform .4s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.cta-block { text-align: center; margin-top: clamp(2.4rem, 7vw, 3.4rem); }
.cta-block .supp { display:block; font-size:.78rem; color: var(--c-text-soft); margin-top: 1em; }

/* =========================================================
   ① ファーストビュー（ヒーロー動画）
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--c-sheer-1);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 縦動画。商品が中央〜下にあるため、PCで上下トリミング時も商品が美しく見える位置に */
  object-position: center 55%;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero__media video.is-active { opacity: 1; }
/* オーバーレイは廃止：動画そのものを主役に、色かぶり・グラデーション（下部のピンク等）は一切重ねない。
   文字の可読性はロゴ／見出しの白いグロー（drop-shadow・text-shadow）で確保する */
.hero__overlay { display: none; }
.hero__inner { position: relative; z-index: 2; padding: var(--gutter); }
/* ブランドロゴを主役に（最も印象的に） */
.hero__logo {
  width: clamp(196px, 54vw, 312px);
  height: auto;
  aspect-ratio: 3732 / 936;     /* logo-wordmark.png の比率でレイアウト安定 */
  object-fit: contain;
  margin: 0 auto clamp(1.4em, 4vw, 2em);
  /* ロゴはキーカラーに再着色済みPNG（透過クリーン）。白グローは弱く・広く・低不透明にして、
     輪郭（縁）が見えず背景の動画に自然になじむ程度にとどめる */
  filter: drop-shadow(0 1px 10px rgba(255,255,255,.28));
}
.hero__eyebrow {
  font-family: var(--f-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .5em; text-indent: .5em;
  text-transform: uppercase;
  color: #C56E7A;
  margin-bottom: 1.6em;
}
.hero__title {
  font-family: var(--f-sans);
  font-weight: 500;
  /* 小さめ・1行表示（スマホ375〜430px優先）。nowrapで改行させない */
  font-size: clamp(1.15rem, 5vw, 1.95rem);
  line-height: 1.5;
  letter-spacing: .04em;
  white-space: nowrap;
  /* ロゴと同じキーカラー（単色）。下へ淡くなるグラデを廃止し、白飛び（背景に溶ける）を解消 */
  color: #D6748C;
  /* シャドーは白ではなく、ロゴカラーと調和する落ち着いた深ブラウン系。動画のどのシーンでも背景から自然に浮かせる（強すぎない） */
  text-shadow: 0 1px 2px rgba(70, 52, 56, .5), 0 2px 8px rgba(70, 52, 56, .34);
}
/* 見出し内の各フレーズは意味の途中で折れないように */
.hero__title .nb { display: inline-block; }
.hero__product {
  margin-top: 1.8em;
  font-size: clamp(.82rem, 3.4vw, .98rem);
  letter-spacing: .2em;
  color: #6E5B5D;
}
.hero__cta { margin-top: clamp(2.2rem, 8vw, 3rem); }
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  transform: translateX(-50%);
  font-family: var(--f-en); font-size: .62rem; font-weight: 400; letter-spacing: .3em;
  color: #9E898D; writing-mode: vertical-rl;
}
.hero__scroll::after {
  content:""; display:block; width:1px; height:38px; margin: 10px auto 0;
  background: linear-gradient(var(--c-pink), transparent);
  animation: scrollline 2.2s ease-in-out infinite;
}
@keyframes scrollline { 0%{transform:scaleY(.2);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 100%{transform:scaleY(.2);transform-origin:bottom} }

/* =========================================================
   ② 共感 CHANGE  — 背景: 白
   ========================================================= */
/* 悩みへの共感：白背景に、右へ寄せた鮮明な女性写真＋左に✓チェックリスト。
   画像はぼかし・透過なし。白背景の写真をそのまま白い面へ溶け込ませて配置する */
.empathy {
  position: relative; overflow: hidden; padding: 0;
  background: var(--c-white);
}
/* 女性をセクション全高いっぱいに（下端まで隙間なく／背景として全体を支える・鮮明なまま） */
.empathy__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.empathy__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; }
/* 左側だけをやさしく明るく（テキスト可読性を確保。右側の女性は加工せず鮮明なまま） */
.empathy::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 26%, rgba(255,255,255,0) 50%); }
/* 左：悩みのチェックリスト（罫線なし・✓）。左に十分な余白を取り、テキスト最優先 */
.empathy__text { position: relative; z-index: 2; padding: var(--section-y) var(--gutter); min-height: 82vh; max-width: 74%; display: flex; flex-direction: column; justify-content: center; }
/* 各項目をガラス風プレート（Glassmorphism）に。均等な余白でリズムよく縦並び */
.empathy__list { list-style: none; margin: 1.8em 0 0; padding: 0; display: grid; gap: clamp(.6em, 2.4vw, .9em); }
.empathy__list li {
  position: relative;
  padding: .82em 1.1em .82em 2.7em;   /* 左＝✓のスペース。✓もボックス内に収める */
  border-radius: 16px;
  background: rgba(255, 255, 255, .42);            /* 完全な白ではなく、女性がほんのり透ける半透明 */
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05); /* ごく弱いぼかしで可読性確保 */
  border: 1px solid rgba(255, 255, 255, .5);        /* 細い境界線 */
  box-shadow: 0 6px 20px rgba(180, 130, 140, .10);   /* やわらかい影 */
  font-size: clamp(.92rem, 4vw, 1.06rem); line-height: 1.6; color: var(--c-text); letter-spacing: .01em;
}
.empathy__list li::before {
  content: "✓"; position: absolute; left: 1.05em; top: .86em;
  color: var(--c-pink-deep); font-weight: 500; font-size: 1.0em;
}

/* =========================================================
   ③ 解決策 BEFORE SLEEP — 背景: シアーピンク + 写真
   ========================================================= */
/* うるおって、ふれたくなる私へ。 — 商品を大胆に背面レイヤー、テキストを前面に融合 */
.solution {
  position: relative; overflow: hidden; padding: 0; color: var(--c-heading); text-align: center;
  background: linear-gradient(160deg, #FBEFF1 0%, #FBF2F3 55%, #F6EEF0 100%);
}
/* メインビジュアル：完成画像を主役として全面に（不透明・カバー）。上部を少しだけ明るくして文字を読みやすく */
.solution__bg { position: absolute; inset: 0; z-index: 0; }
.solution__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: 1; }
.solution__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,252,253,.6) 0%, rgba(255,252,253,.15) 30%, rgba(255,252,253,0) 52%); }
/* テキスト（前面・上寄せ）。メインビジュアルを活かし、上部の水面エリアにコピー／ハッシュタグ／CTAを配置 */
.solution__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; padding: var(--section-y) var(--gutter); min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; }
.solution .headline { font-size: clamp(1.85rem, 8vw, 3rem); line-height: 1.62; letter-spacing: .05em; text-wrap: balance; }
.points { list-style: none; margin: clamp(1.6rem, 6vw, 2.6rem) 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: .6em; }
.point {
  border: 1px solid var(--c-pink-soft); border-radius: 999px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .5em 1.2em; font-size: clamp(.76rem, 3.4vw, .92rem); color: var(--c-pink-deep); font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(205,120,135,.12);
}
.points__note { margin-top: clamp(1.4rem, 4vw, 2rem); max-width: 32em; margin-inline: auto; text-shadow: 0 1px 8px rgba(255,250,251,.9); }
.solution .cta-block { margin-top: clamp(1.8rem, 5vw, 2.6rem); }

/* =========================================================
   ④ 専門家コメント TRUST — 背景: アイボリー
   ========================================================= */
/* 画像の下端＝セクションの下端に。下パディングを無くし、次セクションへ自然につなぐ */
.trust { background: var(--c-ivory); padding-bottom: 0; }
/* 施術写真を背景に、コメントをレイヤーとして重ねる（一体型ビジュアル） */
.expert {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); max-width: none;
  background: #fff; border-radius: 0; padding: 0; box-shadow: none;   /* 右側フェード先＝白 */
}
.expert__photo { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden;
  /* 画像そのものを右へ向かってなめらかに白へ溶かす（白い帯・パネルは重ねない）。左（人物の顔側）は 0〜30% を
     原画のまま維持し、テキスト側は 48%で約55%・74%で約88%・右端で白へ。テキスト帯全体を均一に明るくしてコントラストを確保 */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.12) 74%, rgba(0,0,0,0) 96%);
          mask-image: linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.12) 74%, rgba(0,0,0,0) 96%);
}
/* スマホの横トリミング時、人物を左へ寄せて右側（カーテン→白）にテキストの余白を確保（PCは全幅表示で影響なし） */
.expert__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
/* 可読性用の全体スクリムは廃止（左の原画を一切加工しない）。右のテキストは白フェード上に乗るので読める */
.expert::before { display: none; }
/* テキストは右エリアへ。右揃え＆右寄せ配置で、白くフェードした側に収める */
.expert__body { position: relative; z-index: 2; padding: var(--section-y) var(--gutter); min-height: 84vh; display: flex; flex-direction: column; justify-content: center; max-width: 560px; margin-left: auto; text-align: right;
  /* シャドーは全文字で均一・ごく控えめ（発光・縁取りに見せない）。可読性は主に背景の白フェードで確保する */
  text-shadow: 0 0 3px rgba(255,255,255,.7); }
/* 並び順：肩書き → 名前 → 本文（雑誌のインタビュー記事のように） */
.expert__name { margin: 0 0 1.8em; font-size: .9rem; letter-spacing: .06em; }
.expert__name b { display: block; font-weight: 500; font-size: 1.14rem; color: var(--c-heading); }
.expert__name span { display:block; color: var(--c-text-soft); font-size: .8rem; margin-bottom:.4em; }
.expert__comment { font-size: clamp(.95rem, 4vw, 1.06rem); line-height: 2.2; margin: 0; }

/* =========================================================
   ⑤ レビュー（judge.me 埋め込み枠）— 背景: 白
   ========================================================= */
.reviews { background: var(--c-white); text-align:center; }
.reviews .lead { max-width: 560px; margin-inline: auto; }

/* 平均評価サマリー */
.reviews__summary { display:flex; flex-direction:column; align-items:center; gap:.25em; margin-top: 2.8em; }
.reviews__stars { color: var(--c-gold); font-size: 1.5rem; letter-spacing:.16em; }
.reviews__avg { font-family: var(--f-num); font-size: 2.4rem; font-weight:600; color: var(--c-heading); line-height:1; }
.reviews__count { font-size:.8rem; color: var(--c-text-soft); letter-spacing:.06em; }

/* レビューカード（サンプル／judge.me差し替え枠） */
.reviews__cards { display:grid; grid-template-columns: 1fr; gap: 20px; margin-top: 2.8em; text-align:left; }
.review-card {
  margin:0; background: var(--c-sheer-1);
  border-radius: var(--radius); padding: clamp(1.6rem,5vw,2.2rem);
  box-shadow: var(--shadow-softer);
  display:flex; flex-direction:column; gap:.9em;
}
.review-card__stars { color: var(--c-gold); letter-spacing:.14em; font-size:1rem; }
.review-card__body { margin:0; font-size:.92rem; line-height: 2.0; color: var(--c-text); font-style: normal; }
.review-card__meta { display:flex; flex-direction:column; gap:.15em; margin-top:auto; }
.review-card__name { font-size:.9rem; color: var(--c-heading); font-weight:500; }
.review-card__product { font-size:.74rem; color: var(--c-text-soft); }
.reviews__sample-note { margin-top: 2em; }

/* ===== Judge.me お客様の声（外部LP・Reviews Carousel） ===== */
/* 淡いピンクのパネルにカルーセルを収め、余白を活かして上品に。ブランドカラーをアクセントに */
.juwari-reviews {
  --jdgm-primary-color: #F2AFB1;          /* Judge.me の星などのアクセント色 */
  margin: clamp(2.4rem, 7vw, 3.4rem) auto 0;
  max-width: 940px;
  background: #FFF7F8;                     /* 淡いピンク（白でも可） */
  border-radius: 22px;
  padding: clamp(1.6rem, 5vw, 2.8rem) clamp(1rem, 4vw, 2rem);
}
.juwari-reviews .jdgm-carousel-wrapper { text-align: center; }
.jdgm-carousel-title {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(1.1rem, 4.6vw, 1.5rem); line-height: 1.6; letter-spacing: .04em;
  color: var(--c-heading); margin: 0 0 .3em;
}
/* 星評価は残しつつ、「from ○ reviews」の英語表記は目立たせない（文字を消して星だけ表示） */
.jdgm-all-reviews-rating-wrapper {
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 0; text-decoration: none;
  margin-bottom: clamp(1.6rem, 5vw, 2.4rem);
}
.jdgm-all-reviews-rating-wrapper .jdgm-all-reviews-rating { font-size: 1.15rem; }
/* Judge.me が注入するレビュー1件＝白いカード型（角丸・やわらかい影・余白） */
.juwari-reviews .jdgm-carousel-item {
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(200,150,160,.14);
  padding: clamp(1.2rem, 4vw, 1.9rem);
}
/* スマホでカルーセルが横幅いっぱいになりすぎないよう左右に余白（パネルのpaddingで確保済み＋念のため） */
@media (max-width: 767px) {
  .juwari-reviews { margin-inline: clamp(0px, 1.5vw, 12px); }
}

/* =========================================================
   ⑥ アンケート REAL DATA — 背景: シアーピンク最淡
   ========================================================= */
/* 写真を背景に、見出し・数字をレイヤーとして重ねる（1枚のビジュアルとして構成） */
.survey { position: relative; overflow: hidden; padding: 0; background: var(--c-sheer-2); }
.survey__photo { position: absolute; inset: 0; z-index: 0; }
.survey__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
/* 可読性のための光のスクリム。左上からゆるやかに消える白のグラデ（テキスト周辺のみ自然に明るく）＋
   下部（カード）を軽く明るく。四角い面ではなく、背景が元々少し明るかったように見せる */
.survey::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(96% 68% at 22% 4%,
      rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 44%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg,
      rgba(255,250,251,.62) 0%, rgba(255,250,251,.28) 22%,
      rgba(255,250,251,.08) 46%, rgba(255,250,251,.5) 74%, rgba(255,250,251,.95) 100%);
}
.survey__inner {
  position: relative; z-index: 2;
  min-height: 90vh; padding: var(--section-y) var(--gutter);
  display: flex; flex-direction: column;
}
.survey__intro { max-width: 26ch; }
/* 背景からほんのり浮かび上がる程度の、ごく弱い白い光彩（文字自体は濃く・太くしない） */
/* 見出しはキーカラーのまま（シャドウなし） */
/* 質問文もキャッチと同じトーンで。写真の上に出る右側まで読めるよう、ごく弱い白グロー＋幅を抑えて明るいゾーン内に収める */
.survey__intro .lead { max-width: 30ch; margin: 1.3em 0 0; text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 255, 255, .82); }
/* 回答結果は下部（肩・体の上）に。顔（目・口元）を隠さない配置 */
.survey__stats { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: clamp(.7em, 2.6vw, 1em); }
/* 各結果を透明なガラスカード（Glassmorphism）に。高さを抑えた横並び（数値=大／回答文=横）で
   顔に届かない下部にコンパクトに配置する */
.stat {
  display: flex; align-items: center; gap: .85em;
  padding: .68em 1.15em;
  border-radius: 16px;
  background: rgba(255, 255, 255, .44);                 /* 背景写真がほんのり透ける半透明 */
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
          backdrop-filter: blur(7px) saturate(1.05);    /* ごく弱いぼかし */
  border: 1px solid rgba(255, 255, 255, .55);           /* 細い境界線 */
  box-shadow: 0 8px 24px rgba(180, 130, 140, .12);      /* やわらかい影 */
}
.stat__num {
  flex: 0 0 auto;
  font-family: var(--f-num); font-weight: 600;
  font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1;
  color: var(--c-pink-deep); white-space: nowrap;
}
.stat__num em { font-style: normal; font-size: .4em; font-weight: 500; margin-left: .05em; color: var(--c-pink); }
.stat__label { font-size: clamp(.78rem, 3.2vw, .92rem); line-height: 1.35; color: var(--c-text); word-break: keep-all; }
.survey__note { margin-top: clamp(1.6rem, 5vw, 2.4rem); }

/* スマホ専用：カードは元の高さ（フロー配置）のまま、幅を短く＆左寄せにして口元に届かせない。
   写真は少しズームアウト（顔のアップを避け、肩・首元まで自然に見せる）。PC版は変更しない */
@media (max-width: 767px) {
  /* 画像全体をズームアウト表示：写真枠を画像と同じ比率(576:720)にして cover でも一切トリミングせず、
     頭・頬・顎まで顔全体を自然に収める。写真は上寄せ、下は背景ピンクの余白にしてカードを置く。
     写真の下端はピンクへ自然にフェードさせ、境界の直線を出さない */
  /* 背景は左＝白、右＝シアーピンク。写真が透けて消える左側が「白い余白」として機能する */
  .survey { background: linear-gradient(100deg, #FFFFFF 0%, #FEF6F7 38%, var(--c-sheer-2) 100%); }
  .survey__photo {
    inset: 0 0 auto 0; height: auto; aspect-ratio: 576 / 720;
    /* 写真そのものを、顔(右)を中心に左へ向かって透過させ背景の白へ溶け込ませる（放射状マスク）＋
       下端も背景へフェード。2枚のマスクの重なり(intersect)で「左」と「下」を同時に自然消し */
    -webkit-mask-image:
      radial-gradient(72% 92% at 76% 40%, #000 46%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(72% 92% at 76% 40%, #000 46%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, #000 84%, transparent 100%);
    mask-composite: intersect;
  }
  .survey__photo img { object-position: center 20%; }   /* 比率一致＝切り取りなし。頭上に少し余白 */
  /* セクション高さを写真高さ(=横幅の125%)に連動させ、写真の下にカード帯をコンパクトに置く */
  .survey__inner { min-height: calc(125vw + 190px); }
  /* 左は背景の白で十分明るいので、追加の白スクリムは不要 */
  .survey::before { background: none; }
  /* カードは写真の下（ピンク帯）に配置。幅を抑えて左寄せ */
  .survey__stats { max-width: 260px; gap: .5em; }
  .stat { padding: .55em 1em; }
  .stat__num { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .stat__label { font-size: clamp(.74rem, 3vw, .86rem); line-height: 1.3; }
}

/* =========================================================
   ⑦ 配合成分 FORMULATION — 背景: 白
   ========================================================= */
/* 背景は真っ白（余白を活かしたミニマル） */
.formula { text-align: center; background: var(--c-white); }

/* 成分：美容液テクスチャーを主役に、成分名をポイント＋線で引き出すキービジュアル */
/* 正方形のキャンバス。ポイント/線/ラベルはすべて％座標でスケール（スマホ・PC共通） */
.formula__key { position: relative; width: min(92vw, 540px); margin: clamp(2.4rem, 7vw, 3.8rem) auto 0; aspect-ratio: 1 / 1; }
/* テクスチャー（白背景・エフェクトなし・中央に大きく） */
.formula__texture { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; }
/* 引き出し線（細く繊細なウォームグレー） */
.formula__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.formula__lines line { stroke: rgba(150,138,132,.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* ポイント（テクスチャー上の狙った位置） */
.cdot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #E39AA6; box-shadow: 0 0 0 3px rgba(205,120,135,.16); transform: translate(-50%,-50%); z-index: 2; }
/* 成分名ラベル（細い枠のピル） */
.clabel {
  position: absolute; transform: translate(-50%,-50%); z-index: 3; white-space: nowrap;
  border: 1px solid var(--c-pink-soft); border-radius: 999px; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: .44em .95em; font-size: clamp(.64rem, 2.9vw, .82rem); color: #6E5B5D; letter-spacing: .02em;
}
.clabel sup { font-size: .6em; color: var(--c-pink-deep); }
/* 各成分の位置（テクスチャーの形状に合わせて個別調整） */
.cdot--1 { left: 42%; top: 34%; }  .clabel--1 { left: 24%; top: 13%; }
.cdot--2 { left: 66%; top: 33%; }  .clabel--2 { left: 75%; top: 15%; }
.cdot--3 { left: 60%; top: 46%; }  .clabel--3 { left: 76%; top: 53%; }
.cdot--4 { left: 52%; top: 58%; }  .clabel--4 { left: 48%; top: 91%; }
.cdot--5 { left: 34%; top: 38%; }  .clabel--5 { left: 15%; top: 40%; }

.formula__use { margin-top: clamp(2.4rem, 7vw, 3.2rem); font-weight: 500; font-size: 1.12rem; color:var(--c-heading); letter-spacing:.05em; }

/* =========================================================
   ⑧ 安全性 SAFETY — 背景: シアーピンク（別調）
   ========================================================= */
/* 上部は少し濃いシアーピンク→下は白へグラデ（安心感・清潔感） */
.safety { position: relative; overflow: hidden; text-align: center; background: linear-gradient(180deg, #F8D5DB 0%, #FDEEF0 34%, #FFFFFF 100%); }
/* 背景アクセント：小さな白い＋を散りばめる */
.safety__plus { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.safety__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
/* 安心ポイント（横長カプセル×3・チェック付き） */
.safety__list {
  list-style: none; margin: clamp(1.8rem, 6vw, 2.6rem) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .7em; max-width: 430px; margin-inline: auto;
}
.safety__list li {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  background: #fff; border-radius: 999px; padding: .85em 1.4em;
  box-shadow: 0 6px 18px rgba(205,125,138,.12);
  font-size: clamp(.9rem, 3.8vw, 1.02rem); color: var(--c-heading); letter-spacing: .02em; word-break: keep-all;
}
.safety__list .check {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%;
  background: var(--c-pink); color: #fff; font-size: .74em; font-weight: 500; flex: 0 0 auto; line-height: 1;
}
.safety__list sup { font-size: .58em; color: var(--c-text-soft); }
/* 商品ビジュアル：個包装を横向きに寝かせ、少し斜めに配置して立体感を出す */
.safety__visual { position: relative; width: min(90vw, 460px); aspect-ratio: 2.6 / 1; margin: clamp(1.2rem, 4vw, 2rem) auto 0; }
/* 個包装（横長・約3.5:1）を少し斜めに。枠より少し小さめの幅で回転しても見切れないように */
.safety__sachet { position: absolute; left: 50%; top: 50%; width: 90%; transform: translate(-50%, -50%) rotate(-7deg); filter: drop-shadow(0 16px 26px rgba(180,150,155,.22)); }
.safety__note { margin-top: clamp(2rem, 6vw, 2.8rem); max-width: 34em; margin-inline: auto; }

/* =========================================================
   ⑨ 使用方法 HOW TO USE — 背景: アイボリー
   ========================================================= */
/* カード廃止：白背景に、STEP番号＋丸いイラストだけを余白広く配置（ミニマル） */
.howto { background: var(--c-white); text-align:center; }
/* 購入(price)の直後に置いたとき：CTA→使い方 を自然につなぐため、上の余白だけ少し詰める（下と次セクションは通常どおり） */
.price + .howto { padding-top: clamp(2.4rem, 8vw, 4.4rem); }
.steps { display:grid; gap: clamp(2.8rem,10vw,4rem); margin-top: clamp(2.8rem,9vw,3.8rem); grid-template-columns: 1fr; }
.step { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.step__no { font-family: var(--f-num); font-size: 2.1rem; font-weight:600; color: var(--c-pink-deep); letter-spacing:.08em; }
.step__no small { display:block; font-family: var(--f-sans); font-size:.58rem; font-weight:500; letter-spacing:.3em; color: var(--c-text-soft); }
.step__title { font-weight: 500; font-size: 1.18rem; color:var(--c-heading); margin-top:.5em; }
.step__img { margin-top:1.3em; border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; width:100%; }
/* 使い方イラスト（SVG・円形カット済み）は正方形でそのまま表示 */
/* 使い方イラスト（原本PNG・背景透過の円形／無加工でそのまま表示） */
.step__illust { width: clamp(150px, 48vw, 200px); aspect-ratio: 1/1; object-fit: contain; border-radius: 0; background: none; margin: 1.4em auto .4em; }

/* =========================================================
   PRICE ご購入 — 背景: シアーピンク最淡（TODO: 価格要確定）
   ========================================================= */
/* カード無し＋白背景。白背景の商品画像（Photoroom切り抜き）をそのまま自然に溶け込ませる */
.price { background: var(--c-white); text-align:center; }
.plans { display:grid; gap: clamp(3rem, 9vw, 4.5rem); margin: 3em 0 0; grid-template-columns: 1fr; max-width: 820px; margin-inline:auto; }
.plan { display: flex; flex-direction: column; align-items: center; background: none; box-shadow: none; border: 0; padding: 0; text-align: center; }
/* 商品画像：中央に。画像自身に自然な影が入っているため CSS影は付けない（不透明画像で四角い影が出るのを防ぐ） */
.plan__media { width: min(84%, 360px); margin: 0 auto; }
.plan__media img { width: 100%; height: auto; display: block; margin-inline: auto; }
.plan__name { font-weight: 500; font-size: 1.32rem; color: var(--c-heading); letter-spacing: .05em; margin-top: .7em; }
.plan__limit { font-size: .8rem; color: var(--c-text-soft); margin-top: .4em; }

/* 価格入りボタン（単品／定期）。CTAと統一しつつ、定期を主役に */
.plan__cta { margin-top: 1.5em; display: grid; gap: 1em; width: min(100%, 360px); }
.btn-buy {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .12em;
  border-radius: 18px; padding: 1.05em 1.2em; text-decoration: none;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, filter .35s ease;
}
.btn-buy:hover { transform: translateY(-3px); }
.btn-buy__title { font-size: 1.02rem; font-weight: 500; letter-spacing: .07em; }
.btn-buy__price { font-family: var(--f-num); font-size: 1.55rem; font-weight: 600; letter-spacing: .02em; line-height: 1.15; }
.btn-buy__price small { font-family: var(--f-sans); font-size: .48em; letter-spacing: .04em; margin-left: .15em; }
.btn-buy__note { font-size: .72rem; letter-spacing: .04em; opacity: .92; margin-top: .1em; }
.btn-buy__ship { font-size: .78rem; font-weight: 500; letter-spacing: .06em; margin-top: .15em; }
/* 単品購入＝控えめ（アウトライン）。送料無料は赤で目に入る */
.btn-buy--single { background: var(--c-white); border: 1.5px solid var(--c-pink-soft); color: var(--c-heading); box-shadow: 0 6px 18px rgba(200,150,160,.08); }
.btn-buy--single .btn-buy__ship { color: #D93B4D; }
.btn-buy--single:hover { box-shadow: 0 12px 26px rgba(200,150,160,.16); }
/* 定期購入＝主役（塗り）。自然に選びたくなる存在感 */
.btn-buy--sub { background: linear-gradient(135deg, #F3A7B0, var(--c-pink-deep)); color: #fff; box-shadow: 0 14px 34px rgba(211,98,111,.32); padding-top: 1.2em; }
.btn-buy--sub:hover { box-shadow: 0 20px 44px rgba(211,98,111,.42); filter: saturate(1.05); }
/* 特典バッジ（左から：1番お得／12%OFF／選べる配送スパン）を横一列に */
.btn-buy__pops { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4em; margin-bottom: .5em; }
.btn-buy__pops .pop { font-size: .68rem; font-weight: 500; letter-spacing: .03em; color: var(--c-pink-deep); background: rgba(255,255,255,.94); border-radius: 999px; padding: .3em .8em; white-space: nowrap; }
/* 「1番お得」＝最も目立つ（ゴールドの塗り・バッジ行の先頭） */
.btn-buy__pops .pop--best { color: #fff; background: linear-gradient(135deg, #DCC08C, var(--c-gold)); font-weight: 700; box-shadow: 0 3px 10px rgba(150,120,70,.35); }
/* PC：2商品を横並びで比較しやすく */
@media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; align-items: start; } }

/* 全成分アコーディオン（「全成分はこちら」） */
.allingr { margin: 2.6em auto 0; text-align: left; }
.allingr__head {
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6em;
  background: var(--c-sheer-2); color: var(--c-heading);
  border:0; border-radius: 999px; padding: 1em 1.4em;
  font-family: var(--f-sans); font-size:.92rem; font-weight:500; letter-spacing:.06em;
  transition: background .3s ease;
}
.allingr__head:hover { background: var(--c-sheer-3); }
.allingr__icon { position:relative; width:13px; height:13px; flex:0 0 auto; }
.allingr__icon::before, .allingr__icon::after {
  content:""; position:absolute; left:50%; top:50%; background: var(--c-pink-deep);
  transform: translate(-50%,-50%); transition: transform .35s ease;
}
.allingr__icon::before { width:13px; height:1.5px; }
.allingr__icon::after  { width:1.5px; height:13px; }
.allingr.is-open .allingr__icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.allingr__body { max-height:0; overflow:hidden; transition: max-height .45s ease; }
.allingr__inner { padding: 1.4em .4em .2em; }
.allingr__inner p { font-size:.82rem; line-height: 2.1; color: var(--c-text); letter-spacing:.02em; }

/* =========================================================
   ⑪ 創業ストーリー OUR STORY — 背景: シアーピンク
   ========================================================= */
/* 背景：ピンクの波紋を上部にしっかり、下へ向かって白へフェード（テキスト可読性優先） */
.story { position: relative; overflow: hidden; background: var(--c-white); text-align:center; }
.story__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.story__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .5; display: block; }
.story__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.92) 82%, #fff 100%);
}
.story > .container { position: relative; z-index: 1; }
.story__body p { font-size: clamp(.95rem,4vw,1.06rem); line-height: 2.45; margin-bottom: 1.7em; }
.story__sign { font-weight: 500; font-size: 1.2rem; color:var(--c-heading); margin-top:.6em; letter-spacing:.06em; }

/* =========================================================
   ⑩ FAQ QUESTIONS — 背景: 白
   ========================================================= */
.faq { background: var(--c-white); }
.faq__list { margin-top: 3.2em; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  width:100%; text-align:left; background:none; border:0;
  padding: 1.4em 2.4em 1.4em .2em; position: relative;
  font-size: clamp(.95rem,4vw,1.02rem); font-weight:500; color: var(--c-heading); letter-spacing:.03em;
  font-family: var(--f-sans);
}
.faq__q::before { content:"Q"; color: var(--c-pink-deep); font-family: var(--f-num); font-weight:500; font-size:1.15em; margin-right:.7em; }
.faq__q::after {
  content:""; position:absolute; right:.4em; top:50%; width:13px; height:13px;
  background:
    linear-gradient(var(--c-pink-deep),var(--c-pink-deep)) center/13px 1.5px no-repeat,
    linear-gradient(var(--c-pink-deep),var(--c-pink-deep)) center/1.5px 13px no-repeat;
  transform: translateY(-50%) rotate(0); transition: transform .35s ease;
}
.faq__item.is-open .faq__q::after { transform: translateY(-50%) rotate(135deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq__a-inner { padding: 0 .2em 1.5em 1.8em; font-size: .92rem; line-height: 2.1; color: var(--c-text); }

/* =========================================================
   ⑫ フッター FOOTER — 背景: グレージュピンク（明るく上品）
   ========================================================= */
/* フッター：上部の波（白→ピンク）＋下部ピンクを主背景に。白ロゴを主役に、テキストは可読性の高いダーク */
.footer { background: #F4B4B5; color: #5B4B4D; text-align:center; }
/* 帯の下端を透明にフェードし、ピンク地へ継ぎ目なく溶け込ませる（横線・矩形を消す） */
.footer__wave {
  display:block; width:100%; height:auto; margin-bottom:-1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.footer__body { padding: clamp(1.2rem,4vw,2.4rem) var(--gutter) clamp(48px,10vw,72px); }
/* JUWARIロゴ（白）＝メインビジュアル。余白を活かして中央に */
.footer__logo { display:block; width: min(52vw, 200px); height:auto; margin: 0 auto clamp(1.8em,5vw,2.6em); }
.footer__sns { display:inline-flex; gap:1.2em; margin-bottom: 2em; color: #5B4B4D; }
.footer__sns svg { width:26px; height:26px; }
.footer__sns a { transition: opacity .3s; } .footer__sns a:hover { opacity:.6; }
.footer__links { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap: .9em 1.8em; padding:0; margin: 0 0 2.2em; font-size:.84rem; }
.footer__links a { color: #5B4B4D; transition: opacity .3s; }
.footer__links a:hover { opacity:.6; }
.footer__copy { font-size:.74rem; color: rgba(91,75,77,.72); letter-spacing:.05em; }

/* =========================================================
   スマホ固定CTA（画面下部・常時表示）
   ========================================================= */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(250,248,250,0), rgba(250,248,250,.97) 34%);
  transform: translateY(120%);
  transition: transform .4s ease;
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }
/* 追従CTAのみ、ブランドのピンクではなく上品で落ち着いたティールに。
   「いつでも購入できるボタン」として自然に目に入る別色。各セクションの購入ボタン(.btn単体)は変更しない */
.sticky-cta .btn {
  background: #5F8F8A;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(60,100,95,.32), inset 0 1px 0 rgba(255,255,255,.26);
}
.sticky-cta .btn:hover {
  background: #4E7C77;
  box-shadow: 0 18px 40px rgba(60,100,95,.44), inset 0 1px 0 rgba(255,255,255,.3);
}
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* =========================================================
   スクロール・フェードイン
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   レスポンシブ（タブレット / PC）
   ========================================================= */
@media (min-width: 768px) {
  /* 共感：女性は全高で右、テキストは左（余白広め） */
  .empathy__photo img { object-position: 66% 20%; }
  .empathy::before { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 30%, rgba(255,255,255,0) 56%); }
  .empathy__text { min-height: 78vh; max-width: 52%; padding-inline: clamp(2.5rem, 7vw, 6rem); }

  .reviews__cards { grid-template-columns: repeat(3, 1fr); }

  /* アンケート：背景写真（右に人物）の左余白へ、見出し・数字をレイヤー配置 */
  .survey__photo img { object-position: right center; }
  .survey::before { background: linear-gradient(100deg, rgba(255,250,251,.95) 0%, rgba(255,250,251,.82) 32%, rgba(255,250,251,.4) 52%, rgba(255,250,251,0) 72%); }
  .survey__inner { min-height: 86vh; max-width: 640px; padding-inline: clamp(2.5rem, 5vw, 4.5rem); justify-content: center; }
  .survey__stats { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }

  /* 専門家：施術写真は左に原画のまま、右へ白フェード。テキストは右側に右揃え配置 */
  .expert__body { min-height: 82vh; max-width: 620px; padding-inline: clamp(2.5rem, 7vw, 7rem); }

  .steps  { grid-template-columns: repeat(3, 1fr); }
  .plans  { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hero__title { font-size: 3.4rem; }
}

/* =========================================================
   アクセシビリティ: モーション低減の尊重
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__media video { transition: none; }
}