@charset "UTF-8";
/* [ ヤマハボート免許教室 ] renew.css */
#info .info-wrap {
  padding: clamp(90px, 7.29vw, 140px) 0 clamp(80px, 6.77vw, 130px);
}
#info .info-wrap .info-txt > div h2 {
  font-size: clamp(3rem, 1.88vw, 3.6rem);
}
@media only screen and (max-width: 768px) {
  #info .info-wrap {
    padding: max(57px, 14.5vw) 0 max(74px, 18.83vw);
  }
  #info .info-wrap .info-txt > div h2 {
    font-size: clamp(2rem, 5.09vw, 3rem);
  }
}

#license #stepup, #license #license-renew {
  padding: 54px 0 140px;
}
#license #stepup .content-wrap > h3, #license #license-renew .content-wrap > h3 {
  font-size: clamp(1.6rem, 1.15vw, 2.2rem);
}
#license #stepup .content-wrap > h3 span, #license #license-renew .content-wrap > h3 span {
  font-size: clamp(2.4rem, 1.56vw, 3rem);
}
#license #stepup .content-wrap > p, #license #license-renew .content-wrap > p {
  font-size: clamp(1.4rem, 0.94vw, 1.8rem);
  line-height: 1.667;
}
#license #stepup .content-wrap .boxlist-yl .box-item, #license #license-renew .content-wrap .boxlist-yl .box-item {
  width: calc(50% - 10px);
}
#license #stepup .content-wrap .boxlist-yl .box-item .box-item-ttl .item-icon, #license #license-renew .content-wrap .boxlist-yl .box-item .box-item-ttl .item-icon {
  width: 20%;
}
#license #stepup .content-wrap .boxlist-wh, #license #license-renew .content-wrap .boxlist-wh {
  flex-direction: column;
  gap: min(26px, 1.35vw);
}
#license #stepup .content-wrap .boxlist-wh .box-item, #license #license-renew .content-wrap .boxlist-wh .box-item {
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid #707070;
  padding: 24px min(104px, 5.42vw) 36px;
}
#license #stepup .content-wrap .boxlist-wh .box-item > .flex, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex {
  flex-direction: column;
  width: 49.3%;
}
#license #stepup .content-wrap .boxlist-wh .box-item > .flex .box-item-ttl, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex .box-item-ttl {
  gap: 8px;
}
#license #stepup .content-wrap .boxlist-wh .box-item > .flex + div, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex + div {
  width: calc(100% - (49.3% + 54px));
}
#license #stepup .content-wrap .boxlist-wh .box-item .trial-btn, #license #stepup .content-wrap .boxlist-wh .box-item .entry-btn, #license #license-renew .content-wrap .boxlist-wh .box-item .trial-btn, #license #license-renew .content-wrap .boxlist-wh .box-item .entry-btn {
  width: 100%;
}
#license #stepup .content-wrap .boxlist-wh .box-item > div:last-child p, #license #license-renew .content-wrap .boxlist-wh .box-item > div:last-child p {
  font-size: clamp(1.2rem, 0.83vw, 1.6rem);
}
#license #stepup {
  background: #CBEAFC;
}
#license #stepup.wave::after {
  background: #CBEAFC;
}
#license #license-renew {
  background: #E5F4F9;
}
#license #license-renew.wave::after {
  background: #E5F4F9;
}
#license #license-renew .content-wrap .indent {
  gap: 46px;
}
#license #license-renew .content-wrap .indent img {
  width: min(413px, 21.52vw);
  height: auto;
  aspect-ratio: 826/475;
}
#license #license-renew .content-wrap .indent p {
  font-size: clamp(1.4rem, 0.94vw, 1.8rem);
  line-height: 1.667;
}
@media only screen and (max-width: 768px) {
  #license #stepup, #license #license-renew {
    padding: max(30px, 7.63vw) 0 max(130px, 33.08vw);
  }
  #license #stepup .content-wrap > h3, #license #license-renew .content-wrap > h3 {
    font-size: clamp(1.6rem, 4.07vw, 2.2rem);
  }
  #license #stepup .content-wrap > h3 span, #license #license-renew .content-wrap > h3 span {
    font-size: clamp(2.4rem, 6.11vw, 3rem);
  }
  #license #stepup .content-wrap > p, #license #license-renew .content-wrap > p {
    font-size: clamp(1.4rem, 3.56vw, 1.8rem);
  }
  #license #stepup .content-wrap .boxlist-wh, #license #license-renew .content-wrap .boxlist-wh {
    gap: max(20px, 5.09vw);
  }
  #license #stepup .content-wrap .boxlist-wh .box-item, #license #license-renew .content-wrap .boxlist-wh .box-item {
    justify-content: center;
    flex-direction: column !important;
    padding: max(30px, 7.63vw) max(22px, 5.6vw);
  }
  #license #stepup .content-wrap .boxlist-wh .box-item > .flex, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex {
    width: 100%;
  }
  #license #stepup .content-wrap .boxlist-wh .box-item > .flex .box-item-ttl.flex, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex .box-item-ttl.flex {
    align-items: center;
  }
  #license #stepup .content-wrap .boxlist-wh .box-item > .flex .item-entry .item-price, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex .item-entry .item-price {
    justify-content: center;
  }
  #license #stepup .content-wrap .boxlist-wh .box-item > .flex + div, #license #license-renew .content-wrap .boxlist-wh .box-item > .flex + div {
    width: 100%;
  }
  #license #license-renew .content-wrap .indent {
    flex-direction: column-reverse;
    gap: 40px;
  }
  #license #license-renew .content-wrap .indent img {
    width: 100%;
  }
  #license #license-renew .content-wrap .indent p {
    font-size: clamp(1.4rem, 3.56vw, 1.8rem);
  }
}

#notification-service {
  padding: min(120px, 6.25vw) 20px min(132px, 6.88vw);
}
#notification-service .content-wrap.bg-gy {
  border-radius: 25px;
  padding: 44px 20px 52px;
}
#notification-service .content-wrap.bg-gy .indent .flex img {
  width: clamp(40px, 2.66vw, 51px);
  height: auto;
  aspect-ratio: 51/37;
}
#notification-service .content-wrap.bg-gy .indent .flex h3 {
  font-size: clamp(2.1rem, 1.35vw, 2.6rem);
}
#notification-service .content-wrap.bg-gy .indent .flex h3 span {
  display: inline-block;
  font-size: clamp(1.5rem, 1.04vw, 2rem);
}
#notification-service .content-wrap.bg-gy .indent .flex p {
  font-size: clamp(1.4rem, 0.94vw, 1.8rem);
  line-height: 1.667;
}
@media only screen and (max-width: 768px) {
  #notification-service {
    padding: 68px 16px 64px;
  }
  #notification-service .content-wrap.bg-gy {
    border-radius: 15px;
    padding: max(34px, 8.65vw) 24px max(42px, 10.69vw);
  }
  #notification-service .content-wrap.bg-gy .indent .flex img {
    width: clamp(40px, 10.18vw, 51px);
  }
  #notification-service .content-wrap.bg-gy .indent .flex h3 {
    font-size: clamp(2.1rem, 5.34vw, 2.6rem);
  }
  #notification-service .content-wrap.bg-gy .indent .flex h3 span {
    font-size: clamp(1.5rem, 3.82vw, 2rem);
  }
  #notification-service .content-wrap.bg-gy .indent .flex p {
    font-size: clamp(1.4rem, 3.56vw, 1.8rem);
  }
}/*# sourceMappingURL=renew.css.map */