@charset "UTF-8";

/* =========================================================
   Maison de Bonheur ハンドクリーム LP
   デザイン基準幅: 750px（SPデザインをそのまま中央寄せ）
   ========================================================= */

:root {
  --lp-width: 750px;      /* デザイン基準幅 */
  --lp-bg:    #9B191F;    /* 背景の赤（15_footer.png 最下部の平均色に一致させ、継ぎ目を消す） */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lp-bg);
  color: #FFF3DF;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

/* スムーススクロールはJS側で制御（reduced-motion対応のため） */

/* ---------- LP本体 ---------- */
.lp {
  width: 100%;
  max-width: var(--lp-width);
  margin-inline: auto;
  background: var(--lp-bg);
}

/* 画像セクション：画像間に隙間を作らない */
.lp__sec {
  position: relative;
  display: block;
  font-size: 0;
  line-height: 0;
}

/* <picture> は既定でinline要素のため、画像間に隙間が出ないようblock化する */
.lp__sec picture {
  display: block;
}

.lp__img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  /* スライス境界の白線対策 */
  margin-bottom: -1px;
}
.lp__sec--footer .lp__img { margin-bottom: 0; }

/* ---------- 画像上の透明リンク（%指定なので拡大縮小でズレない） ---------- */
.lp__hit {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 2px;
  /* タップハイライトを消す */
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
}
.lp__hit:hover  { opacity: .75; }
.lp__hit:active { opacity: .6; }
.lp__hit:focus-visible {
  outline: 3px solid #FFF3DF;
  outline-offset: 3px;
}

/* リンクテキストは読み上げ用に残しつつ視覚的に隠す */
.lp__hitLabel {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- FV内の商品ボタン ----------
   1_KV.png は 750x1552。白文字は y=1217 で終わり、
   その下に 334px の赤い余白がある。
   216px のボタンをその帯の中央に置く（上下とも59px空き）。
   位置は全て%指定なので、画面幅が変わってもズレない。 */
.lp__fvBtns {
  position: absolute;
  left: 0;
  right: 0;
  /* 1277 / 1552 */
  top: 82.28%;
  z-index: 2;
}

.lp__fvBtn {
  position: absolute;
  top: 0;
  display: block;
  /* 237 / 750 */
  width: 31.60%;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
}
.lp__fvBtn:hover  { opacity: .8; }
.lp__fvBtn:active { opacity: .65; }
.lp__fvBtn:focus-visible {
  outline: 3px solid #FFF3DF;
  outline-offset: 3px;
}

.lp__fvBtn picture { display: block; }
.lp__fvBtn img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* 750px基準：左右9.5pxの余白、ボタン間9.5px */
.lp__fvBtn--peach  { left:  1.27%; }                   /*   9.5 / 750 */
.lp__fvBtn--rychee { left: 34.13%; }                   /* 256.0 / 750 */
.lp__fvBtn--forest { left: 67.00%; width: 31.73%; }    /* 502.5 / 750, 238 / 750 */

/* 2_CTA.png のボタン実測位置（750x167 / x163-585, y31-112） */
.lp__hit--cta {
  left:   21.73%;
  top:    18.56%;
  width:  56.40%;
  height: 49.10%;
}

/* 10・12・14_lineup.png のボタン実測位置（750x85-87 / x240-480, y0-53）
   ボタン自体は縦54pxと小さいため、スライス下部の余白まで
   縦方向のタップ領域を広げている（見た目は変わらない） */
.lp__hit--buy {
  left:   32.00%;
  top:    0;
  width:  32.20%;
  height: 100%;
}

/* ---------- フッターリンク（企業情報／プライバシーポリシー） ----------
   15_footer.png の下端には赤の余白が100px（750基準）あるため、
   その続きとして同じ赤地の上にテキストを置いている */
.lp__footerNav {
  background: var(--lp-bg);
  text-align: center;
  /* 750px基準：下余白 80px（%指定なので幅に比例して縮む） */
  padding: 0 4.00% 10.67%;
  /* 750px基準：26px */
  font-size: min(3.467vw, 26px);
  line-height: 1.5;
  letter-spacing: .04em;
  white-space: nowrap;
}

.lp__footerLink {
  display: inline-block;
  color: #FFFFFF;
  text-decoration: none;
  /* 見た目を変えずにタップ領域を広げる */
  padding: .7em .2em;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
}
.lp__footerLink:hover  { opacity: .7; }
.lp__footerLink:active { opacity: .55; }
.lp__footerLink:focus-visible {
  outline: 2px solid #FFF3DF;
  outline-offset: 2px;
}

.lp__footerSep {
  display: inline-block;
  color: #FFFFFF;
  margin: 0 .5em;
}

/* ---------- PC（大画面） ---------- */
@media screen and (min-width: 751px) {
  body {
    /* 750pxの外側は赤で埋める */
    background: var(--lp-bg);
  }
  .lp {
    box-shadow: 0 0 60px rgba(0, 0, 0, .25);
  }
}

/* ---------- アニメーションを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp__hit,
  .lp__fvBtn,
  .lp__footerLink { transition: none; }
}