:root {
  --u: calc(100vw / 750);
}

@media (min-width: 750px) {
  :root {
    --u: 1px;
  }
}

body {
  margin: 0;
}

.main { 
  max-width: 750px ;
  margin: 0 auto;
}

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

html,
body {
  overflow-x: hidden;
}

.main {
  overflow-x: clip;   /* はみ出した部分を切る */
}

.sec-fv {
  width: 100%;
  background: #fff;
}

.sec-fv__inner {
  position: relative;
  width: 100%;
  max-width: 750px ;
  margin: 0 auto;
}

.sec-fv__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ボタンを画像の上に重ねる */
.sec-fv__btn {
  position: absolute;
  left: 50%;
  bottom: 2.5%;               /* カンプのボタン位置に合わせて調整 */
  width: 92%;                 /* ボタン画像の幅 ÷ 750 */
  transform: translateX(-50%);
  display: block;
  animation: fvBtnPulse 2s ease-in-out infinite;
}

.sec-fv__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.sec-fv__btn:hover {
  opacity: 0.85;
}

@keyframes fvBtnPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04); }
}

/* 動きを減らす設定のユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .sec-fv__btn {
    animation: none;
  }
}

/* 〇の配置 */
.sec-fv__circles {
  position: absolute;
  left: 0;
  top: 65%;            /* カンプに合わせて調整 */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sec-fv__circle {
  position: absolute;
  width: 28%;          /* 〇画像の幅 ÷ 750 */
}

.sec-fv__circle img {
  display: block;
  width: 100%;
  height: auto;
}

.sec-fv__circle--01 { left: 6%;  top: 0; }
.sec-fv__circle--02 { left: 36%; top: calc(var(--u) * 40); }   /* 真ん中は少し下 */
.sec-fv__circle--03 { left: 65%; top: 0; }

/* ふわっと下から出る */
.js-fadeup {
  opacity: 0;
  transform: translateY(calc(var(--u) * 30));
  transition: opacity 3s ease-out, transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 真ん中の〇だけ、下からの距離を長く */
.sec-fv__circle--02.js-fadeup {
  transform: translateY(calc(var(--u) * 80));
}

/* 表示されたとき */
.js-fadeup.is-active,
.sec-fv__circle--02.js-fadeup.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 真ん中だけ少し遅れて出す */
.sec-fv__circle--01 { transition-delay: 0s; }
.sec-fv__circle--02 { transition-delay: 0.3s; }
.sec-fv__circle--03 { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .js-fadeup {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.sec-01_01 img,
.sec-01_02 img {
  display: block;
  width: 100%;
  height: auto;
}

.sec-04 {
  position: relative;
}

.sec-04 .cta-animation {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 68%;
  transform: translateX(-50%);
}

.sec-04 .cta-animation img {
  display: block;
  
  width: 100%;
  height: auto;
}

.sec-04 .cta-animation {
  animation: cta04Pulse 2s ease-in-out infinite;
}

@keyframes cta04Pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
.sec-04 .cta-animation {
  animation: none;
  }
}

.sec-05 {
  position: relative; 
}

/* ===== オプション(1行ずつ調整できる) ===== */
.sec-05__option {
  position: absolute;
  left: calc(var(--u) * 95);               /* 全行共通の左位置 */
  width: calc(var(--u) * 593);             /* 全行共通の幅(右端は 40 + 670 = calc(var(--u) * 710)) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: calc(var(--u) * 26);          /* ★ 項目名・価格の文字サイズ(ここを大きくする) */
  line-height: 1;
  color: #4a3b3b;
  white-space: nowrap;
}


/* 価格の数字だけ大きく */
.sec-05__option-price b {
  font-size: 1.2em;
  font-weight: 400;
}

/* ★ 1行ずつの縦位置(ここを個別にいじる) */
.sec-05__option--01 { top: calc(var(--u) * 3594); }
.sec-05__option--02 { top: calc(var(--u) * 3643); }
.sec-05__option--03 { top: calc(var(--u) * 3691); }
.sec-05__option--04 { top: calc(var(--u) * 3740); }
.sec-05__option--05 { top: calc(var(--u) * 3790); }
.sec-05 .cta-animation {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 92%;
  transform: translateX(-50%);
  animation: cta05Pulse 2s ease-in-out infinite;
 }

.sec-05 .cta-animation img{
  display: block;
  width: 100%;
  height: auto;
}

@keyframes cta05Pulse {
  0%, 100% { transfom: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04);  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-05 .cta-animation {
    animation: none;
  }
}

.sec-06 {
  position: relative;
}

.sec-06__text {
  position: absolute;
  left: calc(var(--u) * 240);
  width: auto;
  white-space: nowrap;
  margin: 0;
  font-size: calc(var(--u) * 26);
  line-height: 1.45;
  color: #4a3b3b;
}

.sec-06__text small {
  font-size: 0.8em;
  color: #d05d79
}

.sec-06__text--01 { top: calc(var(--u) * 315); }
.sec-06__text--02 { top: calc(var(--u) * 608); }
.sec-06__text--03 { top: calc(var(--u) * 944); }
.sec-06__text--04 { top: calc(var(--u) * 1268); }
.sec-06__text--05 { top: calc(var(--u) * 1566); }
.sec-06__text--06 { top: calc(var(--u) * 1862); }
.sec-06__text--07 { top: calc(var(--u) * 2192); }
.sec-06__text--08 { top: calc(var(--u) * 2510); }

.sec-06 .cta-animation {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 92%;
  transform: translateX(-50%);
  animation: cta06Pulse 2s ease-in-out infinite;
}

.sec-06 .cta-animation img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes cta06Pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .sec-06 .cta-animation {
    animation: none;
  }
}


.sec-08 {
  position: relative;
}

.sec-08 .cta-animation {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 92%;
  transform: translateX(-50%);
  animation: cta08Pulse 2s ease-in-out infinite;
}


.sec-08 .cta-animation img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes cta08Pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .sec-08 .cta-animation {
    animation: none;
  }
}

.sec-01_01 {
  position: relative;
}

.sec-01_01__band {
  position: absolute;
  left: 8%;
  top: 57.5%;
  width: 84%;
}

.sec-01_01__band.js-fadeup {
  transform: translateY(calc(var(--u) * 80));
}

.sec-01_01__band.js-fadeup.is-active {
  transform: translateY(0);
}

html,
body {
  overflow-x: hidden;
}

.main {
  overflow-x: clip;
}

main.main {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}