@charset "UTF-8";

:root {
  --gold: #c9a15a;
  --gold-dark: #93692c;
  --teal: #0f5a5f;
  --teal-dark: #0a3f42;
}

:where(html) {
  overflow: overlay;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Noto Sans JP", Meiryo, sans-serif;
  /* lp-chokatsu と同じ vw ベースのスケーリング（750px基準デザインを縮小画面でも比率維持） */
  font-size: 1.33vw; /* defaultFontsize(10px) / maxWidth(750px) * 100 */
}
@media screen and (min-width: 750px) {
  :where(html) {
    font-size: 10px;
  }
}
:where(body) {
  width: 100%;
  margin: 0 auto;
}
:where(img) {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
}
a:where([class]) {
  display: inline-block;
  transition: opacity 0.15s;
}
a:where([class]):hover {
  opacity: 0.85;
}

.lparea {
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

/* --------------------
   header（box_lpimg01: lp-chokatsu の css/common.css を忠実に移植。
   画像は lp-chokatsu からの借用プレースホルダ = 要差し替え）
-------------------- */
.box_lpimg01 {
  height: 10rem;
  background: url("../images/header_bg_PLACEHOLDER.jpg") no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 0.7rem 0.5rem rgba(0, 0, 0, 0.1);
}
.box_lpimg01 .links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 75rem;
  margin: 0 auto;
}
.box_lpimg01 .btn01 {
  width: 25.6rem;
  margin-left: 3rem;
}
.box_lpimg01 .btn02 {
  width: 18rem;
  margin: 0 0 0 auto;
  filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.3));
}
.box_lpimg01 .btn03 {
  width: 18rem;
  margin: 0 1.5rem 0 2rem;
  filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.3));
}

/* --------------------
   コンテンツ画像セクション
-------------------- */
figure.lpimg {
  margin: 0;
}
figure.lpimg img {
  width: 100%;
}

/*
 * SEO/AI クローラー向けテキスト(figcaption)は視覚的に非表示にする。
 * display:none / visibility:hidden は使わない(検索エンジンに軽視されるため)。
 */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------
   CTA（16 ORDER / 買い物カゴ①②）: デザイナーのスライス書き出し画像を重ねる。
   diet_16_CTA.jpg（750×1527）は定期便カード・単品カードとも
   「ボタンが入る空白」を残した状態でデザインされている。そこへ
   diet_16_CTA_2.jpg（定期便・750×139）と
   diet_16_CTA_3.jpg（単品・750×116）を absolute で重ねる。
   （lp-toothpaste の .cta-sliced 方式を踏襲。ただし下記の点が異なる）

   ★歯磨き粉との違い（2026-08-25）
     歯磨き粉のボタンは 596×96 の透過PNGで、カード内に80%幅で中央配置していた。
     本LPのボタンは 750px 全幅の不透明JPGで、カード枠線ごと書き出されている。
     そのため width:100% / left:0 で重ねる（80%幅・translateX は使わない）。
     不透明のため flash_effect（border-radius でクリップ）は付けない
     ——角丸にすると全幅スライスの四隅から下地が覗くため。

   top% の算出（実測）:
     diet_16_CTA.jpg のカード内部を走査して空白帯を検出
       定期便: y=802〜948（147px） → ボタン139px を中央寄せ → top=806 → 52.78%
       単品:   y=1255〜1392（138px）→ ボタン116px を中央寄せ → top=1266 → 82.91%
-------------------- */
.btnarea {
  position: relative;
}
.cta-sliced img {
  width: 100%;
  display: block;
}
.cta-btnarea {
  position: relative;
}
.cta-sliced .btn-slice {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
}
.cta-sliced .cta-btn-teiki {
  top: 52.78%;
}
.cta-sliced .cta-btn-tanpin {
  top: 82.91%;
}

/* --------------------
   クーポンエリア（cvarea）: 歯磨き粉専用デザイン画像の積層構成。
   画像自体に背景 #efefef が焼き込まれているため、要素間の帯も同色で埋める。
   カウントダウンはチケット画像（クーポン有効期限はこちら▼）とコピーボタンの間に
   通常フローで表示する
-------------------- */
.cvarea {
  background: #efefef;
}
.cvarea .lpimg img {
  width: 100%;
  display: block;
}
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 2rem;
  letter-spacing: 0.2em;
  padding: 0 0 1rem;
}
#js-copybtn,
#js-copybtn_2,
#js-copybtn_3 {
  cursor: pointer;
}
#countdown-day,
#countdown-day_2,
#countdown-day_3,
#countdown-sec,
#countdown-sec_2,
#countdown-sec_3,
#countdown-hour,
#countdown-hour_2,
#countdown-hour_3,
#countdown-min,
#countdown-min_2,
#countdown-min_3 {
  margin: 0.2rem;
  padding: 0.2rem;
  font-size: 6rem;
}
.copy_alert,
.copy_alert_2,
.copy_alert_3 {
  display: none;
  color: #000;
  font-size: 3rem;
  text-align: center;
}
#countdownArea,
#countdownArea_2,
#countdownArea_3 {
  text-align: center;
}
.flash_effect {
  overflow: hidden;
  border-radius: 1rem;
}
.flash_effect:before {
  content: "";
  position: absolute;
  z-index: 3;
  left: -30%;
  top: -50%;
  display: block;
  width: 100px;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shiny 2s infinite linear normal;
  opacity: 0.7;
}
@keyframes shiny {
  0% { left: -30%; }
  30% { left: 120%; }
  100% { left: 120%; }
}

/* --------------------
   footer（実LPと同じクラス構成）
-------------------- */
/* ★2026-08-27: 緑（--teal-dark）から黒塗りつぶし + 白文字へ変更（堀口さん指示）。
   SNS アイコンは白フチが出るため透過 PNG（diet_00_icon_*.png）へ差し替え済み。 */
.footer {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #000;
  padding-top: 8px;
}
.footer .head {
  width: 140px;
  margin: 0 auto;
  padding: 30px 0 20px;
}
.footer .head img {
  filter: brightness(0) invert(1);
}
.footer .icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}
.footer .icons .icon {
  width: 32px;
}
/* アイコン画像(toothpaste_00_icon_1〜3)はブランドカラーの円形バッジデザインのため
   白抜きフィルタは適用しない(適用すると不透明円全体が白くなりロゴが消える) */
.footer .links {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.footer .links .link {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1;
}
.footer .links .link:not(:last-child) {
  margin-right: 1em;
  padding-right: 1em;
  border-right: 1px solid #fff;
}
.footer .legal {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px 20px;
}
.footer .legal p {
  color: #fff;
  font-size: 12px;
  margin-bottom: 8px;
}
.footer .legal ul {
  color: #fff;
  font-size: 11px;
  line-height: 1.7;
  padding-left: 1.2em;
  margin: 0 0 16px;
}
.footer small {
  display: block;
  text-align: center;
  padding-bottom: 16px;
}
.footer small img {
  display: inline-block;
  width: 220px;
  filter: brightness(0) invert(1) opacity(0.7);
}

/* ==================================================
   暫定テキストセクション（画像が未納品のセクション用）
   対象: 12 お召し上がり方 / 16 CTA・購入
   --------------------------------------------------
   ★画像が納品されたら、このブロックごと削除し、HTML 側も
     figure.lpimg + figcaption.visually-hidden（12）
     figure.lpimg.cta-sliced + .cta-btnarea + .btn-slice（16）
     へ置き換えること。
   ★配色は既存パレット内のゴールド(#c9a15a)と中立色のみを使用。
     最終デザインの配色と競合しないよう、あえてブランド色を決め打ちしていない。
   ================================================== */
.text-fallback {
  padding: 3.2rem 2rem;
  background: #fff;
}
.text-fallback h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #c9a15a;
}
.text-fallback ol {
  margin: 0 0 1.6rem 1.6em;
}
.text-fallback li {
  margin-bottom: 1rem;
  line-height: 1.8;
}
.text-fallback p {
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
.text-fallback .note {
  font-size: 1.2rem;
  color: #666;
}

/* CTA 画像の直下に置く購入リンク（16 CTA・購入）
   画像内のボタンは絵なので、実リンクをこのブロックで重ねずに直下に置く。
   ★画像内に「ご購入はこちら」ボタンが描かれているため、将来的には
     lp-toothpaste と同じ cta-sliced（画像にリンクを重ねるスライス方式）へ
     移行してもよい。その場合はこのブロックを削除する。 */
.cta-links {
  padding: 0 2rem 3.2rem;
  background: #efefef;
  text-align: center;
}
.cta-links .btn {
  position: relative;
  display: block;
  max-width: 42rem;
  margin: 1.2rem auto;
  padding: 1.6rem;
  border-radius: 1rem;
  text-decoration: none;
  font-weight: 700;
}
.cta-links .btn-teiki {
  background: #c9a15a;
  color: #fff;
}
.cta-links .btn-tanpin {
  background: #fff;
  color: #93692c;
  border: 2px solid #c9a15a;
}

/* --------------------
   エビデンスのグラフスライダー（横フリック）
   lp-chokatsu の .js-slider-noml（slick）を移植。
   ただし向こうは背景画像に重ねる position:absolute 前提で、
   本LPは figure 内の通常フローに置くためレイアウト指定は作り直している。
   挙動（横フリック + ドット + 矢印）は同じ。
   ※ rem 基準は 1rem = 10px（html font-size: 10px / SP は 1.33vw）
-------------------- */
.lpslider {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 1.6rem;
}
.js-slider-noml .box {
  width: 100%;
}
.js-slider-noml .box img {
  width: 100%;
  display: block;
}
/* slick 初期化前は全スライドが縦に並ぶため、1枚目だけ見せてチラつきを防ぐ。
   slick が読み込めなかった場合もこの状態で破綻せず表示される。 */
.js-slider-noml:not(.slick-initialized) .box:not(:first-child) {
  display: none;
}

/* ドット */
.js-slider-noml .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
}
.js-slider-noml .slick-dots li {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.8rem;
  border-radius: 50%;
  background: #d8d8d8;
}
.js-slider-noml .slick-dots li.slick-active {
  background: #c9a15a;
}
.js-slider-noml .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

/* 矢印（lp-chokatsu は専用画像を使うが本LPには素材が無いので CSS で描く） */
.js-slider-noml .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 4rem;
  height: 4rem;
  margin-top: -2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.js-slider-noml .slick-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.7rem;
  border-top: 0.2rem solid #93692c;
  border-right: 0.2rem solid #93692c;
  transform: rotate(45deg);
}
.js-slider-noml .slick-arrow.slick-prev {
  left: 1rem;
}
.js-slider-noml .slick-arrow.slick-prev::before {
  margin-left: -0.3rem;
  transform: rotate(-135deg);
}
.js-slider-noml .slick-arrow.slick-next {
  right: 1rem;
}
.js-slider-noml .slick-arrow.slick-disabled {
  opacity: 0.3;
}

/* --------------------
   固定フッター（電話相談バナー）: lp-chokatsu-ya の .js-fix / .fix_bnr を移植。
   スクロールが 100px を超えると is-active でフェードイン（js/common.js）。
   .js-fix 自体に高さを持たせ、固定バナーがフッター末尾を覆わないスペーサーにする。
   高さは画像のアスペクト比から算出（sp 750x190 = 25.33% ／ pc 2000x190 = 9.5%）。
-------------------- */
.js-fix {
  height: 25.33vw;
  max-height: 19rem;
}
.js-fix .fix_bnr {
  margin: 0;
  pointer-events: none;
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.js-fix .fix_bnr.is-active {
  pointer-events: auto;
  opacity: 1;
}
.js-fix .fix_bnr img {
  width: 100%;
  display: block;
}

/* PC / SP の出し分け（固定フッターの pc・sp 画像） */
@media (min-width: 751px) {
  .js-fix {
    height: 9.5vw;
    max-height: none;
  }
  .mobile {
    display: none !important;
  }
}
@media (max-width: 750px) {
  .desktop {
    display: none !important;
  }
}