/* ============================================
   Base / Variables
   ============================================ */
:root {
  --width: 750;
  --color-text: #333;
  --color-bg: #fff;
  --color-primary: #8ec43d;
  --color-primary-dark: #70a621;
  --color-bg-gray: #f0f0f0;
  --color-primary-light: #eef6e2;
}

body {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

/* ============================================
   Layout
   ============================================ */
.l-wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

/* ============================================
   Header
   ============================================ */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(calc(60 / 750 * 100vw), 60px);
}

.header__logo {
  width: min(calc(199 / 750 * 100vw), 199px);
}

/* ============================================
   FV
   ============================================ */
.fv {
  overflow: hidden;
}

/* ============================================
   Section共通
   ============================================ */
.sec__title {
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
}

.sec__title .sec__label {
  display: block;
  color: var(--color-primary);
  font-family: "Barlow", sans-serif;
  font-size: min(calc(40 / 750 * 100vw), 40px);
}

.sec__title .sec__catch {
  display: block;
  color: var(--color-text);
  font-size: min(calc(44 / 750 * 100vw), 44px);
  margin-top: min(calc(25 / 750 * 100vw), 25px);
}

.sec__title .sec__number {
  display: block;
  color: var(--color-text);
  font-size: min(calc(64 / 750 * 100vw), 64px);
  margin-top: min(calc(-10 / 750 * 100vw), -10px);
}

.sec__title .sec__number strong {
  display: inline-block;
  font-size: min(calc(100 / 750 * 100vw), 100px);
}

.color-primary {
  color: var(--color-primary);
}

.text-emphasis {
  position: relative;
}

.text-emphasis::before {
  content: "・・";
  position: absolute;
  top: min(calc(-20 / 750 * 100vw), -20px);
  left: 0;
  line-height: 1;
}

/* ============================================
   Sokkyu Section
   ============================================ */
.sokkyu {
  background-color: var(--color-primary);
  color: var(--color-bg);
  height: min(calc(740 / 750 * 100vw), 740px);
}

.sokkyu .sec__inner {
  padding: min(calc(100 / 750 * 100vw), 100px) 0
    min(calc(100 / 750 * 100vw), 100px);
}

.sokkyu__title {
  font-size: min(calc(44 / 750 * 100vw), 44px);
  position: relative;
  padding-left: min(calc(100 / 750 * 100vw), 100px);
}

.sokkyu__title::before {
  content: "";
  position: absolute;
  left: min(calc(40 / 750 * 100vw), 40px);
  bottom: min(calc(10 / 750 * 100vw), 10px);
  width: min(calc(110 / 750 * 100vw), 110px);
  height: min(calc(100 / 750 * 100vw), 100px);
  background: url("../images/sokkyu_bubble.webp") no-repeat center / contain;
  transform: scale(var(--bubble-scale, 0));
}

.sokkyu__image {
  width: min(calc(500 / 750 * 100vw), 500px);
  margin: min(calc(40 / 750 * 100vw), 40px) auto 0;
}

.sokkyu__text {
  margin-top: min(calc(51 / 750 * 100vw), 51px);
  text-align: center;
  font-size: min(calc(36 / 750 * 100vw), 36px);
  line-height: 1.65;
  height: min(calc(184 / 750 * 100vw), 184px);
  background-image: url("../images/sokkyu_bg.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}

/* ============================================
   Reason Section
   ============================================ */
.reason .sec__title,
.flow .sec__title {
  overflow: hidden;
}

.reason {
  background-color: var(--color-bg-gray);
}

.reason .sec__inner {
  padding: min(calc(90 / 750 * 100vw), 90px) min(calc(60 / 750 * 100vw), 60px)
    min(calc(100 / 750 * 100vw), 100px);
}

.reason__list {
  margin-top: min(calc(80 / 750 * 100vw), 80px);
  counter-reset: reason-number;
}

.reason__item {
  position: relative;
  border: min(calc(4 / 750 * 100vw), 4px) solid var(--color-primary);
  border-radius: 20px;
  padding: min(calc(55 / 750 * 100vw), 55px) 0 min(calc(45 / 750 * 100vw), 45px);
  background-color: var(--color-bg);
}

.reason__item {
  counter-increment: reason-number;
}

.reason__item:not(:first-child) {
  margin-top: min(calc(80 / 750 * 100vw), 80px);
}

.reason__item::before {
  content: counter(reason-number);
  position: absolute;
  top: min(calc(-26 / 750 * 100vw), -26px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(80 / 750 * 100vw), 80px);
  height: min(calc(80 / 750 * 100vw), 80px);
  background-color: var(--color-primary);
  border-radius: 50%;
  color: var(--color-bg);
  font-weight: bold;
  font-size: min(calc(60 / 750 * 100vw), 60px);
  font-family: "Barlow", sans-serif;
}

.reason__item-label {
  display: block;
  text-align: center;
  line-height: 1.2;
  font-weight: bold;
  font-size: min(calc(36 / 750 * 100vw), 36px);
}

.reason__item-label strong {
  display: block;
  color: var(--color-primary-dark);
  font-size: min(calc(56 / 750 * 100vw), 56px);
  margin-top: min(calc(10 / 750 * 100vw), 10px);
}

.reason__item:nth-of-type(1) .reason__image {
  margin-top: min(calc(-5 / 750 * 100vw), -5px);
}

.reason__item:nth-of-type(2) .reason__image {
  margin-top: min(calc(15 / 750 * 100vw), 15px);
}

.reason__item:nth-of-type(3) .reason__image {
  margin-top: min(calc(15 / 750 * 100vw), 15px);
}

.reason__image {
  width: min(calc(450 / 750 * 100vw), 450px);
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   Flow Section
   ============================================ */

.flow .sec__inner {
  padding: min(calc(90 / 750 * 100vw), 90px) min(calc(60 / 750 * 100vw), 60px)
    min(calc(100 / 750 * 100vw), 100px);
}

.flow__list {
  margin: min(calc(75 / 750 * 100vw), 75px) auto 0;
  width: min(calc(580 / 750 * 100vw), 580px);
}

.flow__item {
  position: relative;
  height: min(calc(580 / 750 * 100vw), 580px);
}

.flow__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-light);
  border-radius: 50%;
  transform: scale(var(--circle-scale, 1));
  z-index: -1;
}

.flow__item:not(:first-child) {
  margin-top: min(calc(180 / 750 * 100vw), 180px);
}

.flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: max(calc(-125 / 750 * 100vw), -125px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: min(calc(60 / 750 * 100vw), 60px) solid transparent;
  border-right: min(calc(60 / 750 * 100vw), 60px) solid transparent;
  border-top: min(calc(70 / 750 * 100vw), 70px) solid var(--color-text);
}

.flow__item:nth-of-type(1) .flow__image {
  position: relative;
  top: min(calc(-15 / 750 * 100vw), -15px);
}

.flow__item:nth-of-type(2) .flow__image {
  position: relative;
  top: min(calc(-10 / 750 * 100vw), -10px);
}

.flow__item:nth-of-type(3) .flow__image {
  position: relative;
  top: 0;
}

.flow__image {
  width: min(calc(520 / 750 * 100vw), 520px);
  margin: 0 auto;
}

.flow__item-label {
  text-align: center;
}

.flow__item-label strong {
  display: block;
  margin: auto;
  font-size: min(calc(48 / 750 * 100vw), 48px);
  font-weight: bold;
  width: min(calc(440 / 750 * 100vw), 440px);
  background-color: var(--color-text);
  color: var(--color-bg);
  border-radius: min(calc(72 / 750 * 100vw), 72px);
}

.flow__item-label span {
  display: block;
  margin: min(calc(10 / 750 * 100vw), 10px) auto 0;
  font-size: min(calc(36 / 750 * 100vw), 36px);
  font-weight: bold;
  line-height: 1.4;
}

/* ============================================
   Welcome Section
   ============================================ */
.welcome {
  position: relative;
  background-color: var(--color-primary-light);
  overflow: hidden;
  height: min(calc(800 / 750 * 100vw), 800px);
  background-image: url("../images/welcome_bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

.welcome::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(calc(366 / 750 * 100vw), 366px);
  height: min(calc(670 / 750 * 100vw), 670px);
  background-image: url("../images/welcome_deco.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  filter: blur(var(--deco-blur, 4px));
  transform: scale(var(--deco-scale, 1.03));
}

.welcome .sec__inner {
  position: relative;
  z-index: 1;
  padding: min(calc(100 / 750 * 100vw), 100px) min(calc(60 / 750 * 100vw), 60px)
    min(calc(100 / 750 * 100vw), 100px);
}

.welcome__title {
  text-align: left;
}

.welcome__title span {
  display: block;
  color: #fff;
  font-size: min(calc(48 / 750 * 100vw), 48px);
}

.welcome__title .marker {
  color: #333;
  font-size: min(calc(60 / 750 * 100vw), 60px);
  background-image: linear-gradient(
    var(--color-primary-dark),
    var(--color-primary-dark)
  );
  background-size: var(--marker-width, 0%) min(calc(4 / 750 * 100vw), 4px);
  background-repeat: no-repeat;
  background-position: left bottom;
  line-height: 1.47;
}

.welcome__text {
  margin-top: min(calc(115 / 750 * 100vw), 115px);
  font-size: min(calc(32 / 750 * 100vw), 32px);
  line-height: 1.4;
}

.welcome__text .marker {
  font-size: min(calc(36 / 750 * 100vw), 36px);
  font-weight: bold;
  background-image: linear-gradient(#ffed29, #ffed29);
  background-size: var(--marker-width, 0%) min(calc(12 / 750 * 100vw), 12px);
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* ============================================
   Form Wrap
   ============================================ */
.formWrap {
  position: relative;
  z-index: 1;
}

.formWrap iframe {
  display: block;
  width: 100%;
  height: 1000px;
  border: none;
  overflow: hidden;
}

/* ============================================
   CTA Button (Fixed)
   ============================================ */
.cta {
  position: fixed;
  bottom: min(calc(30 / 750 * 100vw), 30px);
  right: max(
    min(calc(30 / 750 * 100vw), 30px),
    calc((100vw - 750px) / 2 + 30px)
  );
  z-index: 100;
  opacity: 0;
  visibility: hidden;
}

.cta__btn {
  display: block;
  width: min(calc(160 / 750 * 100vw), 160px);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.cta__btn:hover {
  transform: scale(1.02);
  filter: brightness(1.03);
}

.cta__btn:active {
  transform: scale(0.98);
}

.cta__btn img {
  width: 100%;
  height: auto;
}