@charset "UTF-8";

/* =========================================================
   Green&Body LP
   - デザイン基準幅：750px（SPデザイン等倍）
   - CTAボタンはCTA画像／FV画像の上に%指定で重ねる
   ========================================================= */

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

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

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

/* ---------- base ---------- */
body {
  background-color: #eef2ec;
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "游ゴシック体", meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- layout ---------- */
.lp {
  width: 100%;
  max-width: 750px;
  margin-inline: auto;
  background-color: #fff;
  overflow: hidden;
}

.lp__block {
  position: relative;
  font-size: 0;
  line-height: 0;
}

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

/* ---------- CTA button ---------- */
/*
  btn.webp = 635 x 158（緑の実体は 635 x 134、下部24pxは透明）
  配置基準（デザイン実測・750px幅）
    左右 : 中央配置（左右余白 57.5px ずつ）
           750 と 635 の差が 115px＝奇数のため、left を % で与えると
           ブラウザが整数に丸めて左58px／右57pxの非対称になる。
           left:50% + translateX(-50%) でサブピクセル中央に固定する。
           → 2x環境で左余白115px／右余白115px（AAなし）を実測確認済み
    幅   : 635px             → 84.6667%
    上端 : FV画像内  1073px  → 1073 / 1241 = 86.5000%（2026-07-30 短縮FV差替）
           CTA画像内  350px  →  350 /  514 = 68.0000%（2026-07-30 短縮CTA差替）
*/
.lp__btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 84.6667%;
  display: block;
  transition: opacity 0.2s ease;
}

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

.lp__btn--in-fv {
  top: 86.5%;
}

.lp__btn--in-cta {
  top: 68%;
}

@media (hover: hover) {
  .lp__btn:hover {
    opacity: 0.85;
  }
}

.lp__btn:active {
  opacity: 0.85;
}

/* ---------- footer ---------- */
/*
  LP本体が750px基準の画像のため、フッターの文字も同じ比率で縮尺させる。
  750px幅のとき 24px 相当 → min(3.2vw, 24px)
*/
.footer {
  background-color: #37473a;
  color: #fff;
  font-size: min(3.2vw, 24px);
  line-height: 1.8;
  padding: 5.3% 6.6% 6.6%;
}

.footer__acc {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.footer__acc:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.footer__head {
  position: relative;
  padding: 0.9em 1.6em 0.9em 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.footer__head::-webkit-details-marker {
  display: none;
}

.footer__head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.3em;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.35em;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.footer__acc[open] .footer__head::after {
  margin-top: -0.1em;
  transform: rotate(-135deg);
}

.footer__body {
  padding: 0 0 1.2em;
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.88);
}

.footer__body p {
  margin: 0;
}

.footer__dl {
  display: grid;
  grid-template-columns: 10.2em 1fr;
  gap: 0.5em 0.8em;
  margin: 0;
}

.footer__dl dt {
  color: rgba(255, 255, 255, 0.65);
}

.footer__dl dd {
  margin: 0;
}

.footer__dl a {
  color: #fff;
  text-decoration: underline;
}

.footer__copy {
  margin: 2.2em 0 0;
  font-size: 0.85em;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}