/* ESIENCE ナノシールドミルク LP (image-stack) */

:root {
  --container-max: 600px;
  --floating-z: 100;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  background: #fbf0ec;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 180px);
}

.lp {
  max-width: var(--container-max);
  margin: 0 auto;
  background: #fff;
}

.lp p,
.lp .offer {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.lp img {
  display: block;
  width: 100%;
  height: auto;
}

/* offer-2: 静止CTA 重ね */
.offer-2 {
  position: relative;
}

.offer-cta {
  position: absolute;
  left: 50%;
  bottom: 12.5%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 560px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
  transition: transform 150ms ease-out;
}

.offer-cta:active {
  transform: translateX(-50%) translateY(2px);
}

.offer-cta img,
.floating-cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* フローティングCTA: レスポンシブ */
.floating-cta {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%) translateY(20px);
  width: clamp(280px, 92vw, 560px);
  z-index: var(--floating-z);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22));
}

.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.floating-cta:active {
  transform: translateX(-50%) translateY(2px);
}

/* -------------------------
   会社情報（.esifoot）用スタイル（修正版）
------------------------- */
/* ① メインコンテンツと幅・位置を合わせる（前回のまま） */
.esifoot {
  max-width: var(--container-max);
  margin: 0 auto;
  background: #fbf0ec; /* LP全体の背景色に合わせる。#fffから変更。 */
}

/* ② 画像周りの余白をなくし、幅をぴったり合わせる（前回のまま） */
.esifoot p {
  margin: 0;
  line-height: 0;
}

.esifoot img {
  display: block;
  width: 100%;
  height: auto;
}

.esifoot .overlaid {
  position: relative;
}

/* 電話ボタンの配置調整（ここを修正） */
.esifoot .tel_order {
      bottom: 79.4%;
      left: 57px;
      right: 254px;
      width: 39%;
      margin: 0 auto;
      position: absolute
    }

/* クリック時の動き */
.esifoot .tel_order:active {
  transform: translateY(2px); /* 動きを修正（translateXは削除） */
}

/* ④ 下部のテキストリンク群の見た目調整（前回のまま） */
.esifoot_links {
  list-style: none;
  padding: 24px 10px;
  margin: 0;
  text-align: center;
  background-color: #fff; /* ここを白にすることで、LP本体との境界を明確に */
}

.esifoot_links li {
  display: inline-block;
  margin: 0 10px 10px;
}

.esifoot_links a {
  color: #333;
  font-size: 12px;
  text-decoration: underline;
}

/* スマホ（〜480px）はもう少し画面幅に張り付かせる */
@media (max-width: 480px) {
  .floating-cta {
    width: 94vw;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
  body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  }
}

/* タブレット以上（コンテナ幅と揃える） */
@media (min-width: 768px) {
  .floating-cta {
    width: min(560px, calc(var(--container-max) - 20px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta,
  .offer-cta {
    transition: none;
  }
}