@charset "UTF-8";
/* ==========================================================
   MARO17 オールインワンシャンプー LP
   デザイン基準: 375px幅（アートボード02）
   1em = デザイン上の10px（375px表示で10px / 750px表示で20px）
   ========================================================== */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #1b332f;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  color: #fff;
}

/* ---- スコープ内リセット ---- */
#maro17-aio,
#maro17-aio * { box-sizing: border-box; }
/* :where() で詳細度0にして、各コンポーネントの指定を優先させる */
:where(#maro17-aio) :where(h1, h2, p, ul, li, figure, button) {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: inherit;
}
#maro17-aio img { display: block; max-width: none; height: auto; border: 0; }
#maro17-aio a { color: inherit; }
#maro17-aio a:focus-visible,
#maro17-aio button:focus-visible { outline: 2px solid #af9968; outline-offset: 2px; }

/* ---- 外枠（SP幅デザインを中央に配置、最大750px） ---- */
.lp {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  /* JS未実行でもおおよそ正しいサイズになるよう CSS でも算出 */
  font-size: min(calc(100vw / 37.5), 20px);
  background: #fff;
  overflow: hidden;
  /* 固定購入バー分の余白 */
  padding-bottom: 7.1em;
}
.lp-wrap { display: block; }

.lp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- セクション ---- */
.lp-sec { position: relative; width: 100%; }
.lp-sec > .lp-bg { position: absolute; top: 0; left: 0; width: 100%; }
.lp-kv { height: 37.5em; }
.lp-kv > .lp-bg { height: 100%; object-fit: cover; }
.lp-award { background: #fff; }
.lp-scene { overflow: hidden; }
.lp-slim { z-index: 2; } /* バッジが上のセクションにはみ出す */

.lp-part { position: absolute; }
.lp-part img { width: 100%; }
.lp-btn { display: block; transition: opacity .3s, transform .3s; }
@media (hover: hover) {
  .lp-btn:hover,
  .is-js .lp-btn.is-active:hover { opacity: .85; }
}

/* ---- READ MORE（開閉） ---- */
.lp-more {
  position: relative;
  background: #1b332f;
  padding-bottom: 5.8em;
}
.lp-more__btn {
  display: block;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lp-more__btn img { width: 100%; }
.lp-more__close { display: none !important; }
.lp-more.is-open .lp-more__open { display: none !important; }
.lp-more.is-open .lp-more__close { display: block !important; }

.lp-more__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s ease;
}
.lp-more.is-open .lp-more__body { grid-template-rows: 1fr; }
.lp-more__inner { overflow: hidden; min-height: 0; }
.lp-card { max-width: none; }
/* JS無効時は常に展開 */
html:not(.is-js) .lp-more__body { grid-template-rows: 1fr; }
html:not(.is-js) .lp-more__btn { display: none; }

/* ---- フッター ---- */
.lp-footer {
  background: #08362b;
  height: 8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .6em;
  text-align: center;
  line-height: 1.4;
}
.lp-footer__links { display: flex; list-style: none; font-size: 1.2em; font-weight: 700; }
.lp-footer__links li + li::before { content: "|"; margin: 0 .6em; opacity: .8; }
.lp-footer__links a { text-decoration: none; }
.lp-footer__copy { font-size: .96em; font-weight: 700; }
.lp-footer__copy small { font-size: 100%; }

/* ---- 固定購入バー ---- */
.lp-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 100;
  transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  font-size: min(calc(100vw / 37.5), 20px);
  height: 7.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #af9968;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}
.lp-cta img { width: 16.1em; }

/* ---- フェードイン（JS実行時のみ非表示から開始） ---- */
.is-js .js-fade { opacity: 0; transform: translateY(1.5em); transition: opacity .8s ease, transform .8s ease; }
.is-js .js-fade.is-active { opacity: 1; transform: none; }
/* 影・光彩付きコピーは背景ごと切り出した不透明画像のため、動かさずフェードのみ（ずらすと枠が見える） */
.is-js .lp-part--flat.js-fade { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .is-js .js-fade { opacity: 1; transform: none; transition: none; }
  .lp-more__body { transition: none; }
}