@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（section 13）: デザイナーのスライス書き出し画像を隙間なく積層する。
   定期便/単品カード（15_CTA_3）はカード内に空白のボタン設置エリアが
   デザインされているため、ボタン画像（15_CTA_2 / 15_CTA_4）は積層せず
   .cta-btnarea を position:relative の重ね台にして absolute で重ねる
   （lp-chokatsu の .btnarea > .btn 方式を踏襲）。
   ボタン画像は元jpgの周囲に白/グレー背景とカード枠線の残骸が
   写り込んでいたため、外周と連結した背景だけをflood fillで透過化した
   *_transparent.png を使用（2026-07-15、ボタン内部のハイライトは保護）。
   top% はカード内の空白位置とクロップ後のボタン画像実寸から算出:
   15_CTA_3.jpg 750×1527px のうち、定期便ボタン設置域 y=800〜940px、
   単品ボタン設置域 y=1245〜1370px を基準にボタン幅80%表示で中央配置。
   ボタン画像は既に角丸PNGのため flash_effect のデフォルト
   border-radius（光沢アニメーションのクリップ用）はそのまま活かす。
-------------------- */
.btnarea {
  position: relative;
}
.cta-sliced img {
  width: 100%;
  display: block;
}
.cta-btnarea {
  position: relative;
}
.cta-sliced .btn-slice {
  display: block;
  position: absolute;
  left: 50%;
  width: 80%;
  transform: translateX(-50%);
}
.cta-sliced .cta-btn-teiki {
  top: 53.81%;
}
.cta-sliced .cta-btn-tanpin {
  top: 82.54%;
}

/* --------------------
   クーポンエリア（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と同じクラス構成）
-------------------- */
.footer {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: var(--teal-dark);
  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: #dfe9e8;
  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 #dfe9e8;
}
.footer .legal {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px 20px;
}
.footer .legal p {
  color: #9db3b1;
  font-size: 12px;
  margin-bottom: 8px;
}
.footer .legal ul {
  color: #9db3b1;
  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);
}