@charset "UTF-8";
/* stylelint-disable declaration-colon-space-after */
/* 変数
----------------------------------------------------------------- */
/**
 * 新規作成方法
 * data:image/svg+xml;utf8,<svg ...></svg> ← svgコードをコピー
 * カラーコードの'#'を'%23'に変換する ex. fill="#000" → fill="%23000"
 * 不要なclassなどは削る
 */
/* アイコン - 01atoms/icon で使用
----------------------------------------------------------------- */
/* 汎用class
----------------------------------------------------------------- */
/**
 * margin/paddingの汎用class用
 * @param {number} $start 開始px
 * @param {number} $limit 上限
 * @param {number} $per   数値の刻み
 */
/**
 * 最大幅をつける
 * @param {string} $width     最大幅（$containerSize）のキー
 * @param {number} $pcPadding PC時の左右余白
 * @param {number} $spPadding SP時の左右余白
 */
.topFv {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  overflow: hidden;
  padding-bottom: 80px;
  padding-top: var(--header-height);
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .topFv {
    padding-bottom: 160px;
    padding-top: var(--header-height);
  }
}
.topFv__bg {
  background: linear-gradient(180deg, #4ac1f0 90%, #fff 90%);
  display: grid;
  grid-column: 1/-1;
  grid-row: 1/-1;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: -webkit-max-content;
  grid-template-rows: max-content;
  height: auto;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.topFv__bgCloud {
  aspect-ratio: 1280/532;
  display: grid;
  grid-column: 1/-1;
  grid-row: 1/-1;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  height: auto;
  justify-items: center;
  min-height: 383px;
  width: 100%;
}
@media screen and (min-width: 1281px) {
  .topFv__bgCloud {
    aspect-ratio: auto;
    height: 532px;
  }
}
@media screen and (max-width: 768px) {
  .topFv__bgCloud {
    aspect-ratio: 375/204;
    height: auto;
    min-height: 204px;
  }
}
.topFv__bgCloud::before {
  background: linear-gradient(180deg, rgba(173, 214, 233, 0.35) 90%, #fff 90%);
  content: "";
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 100%;
  -webkit-mask: url(../images/img_fv_bg_02.svg) repeat-x left -90px bottom 0/clamp(2160px, 234.375%, 3000px);
          mask: url(../images/img_fv_bg_02.svg) repeat-x left -90px bottom 0/clamp(2160px, 234.375%, 3000px);
  width: 100%;
  z-index: 0;
}
@media screen and (min-width: 1281px) {
  .topFv__bgCloud::before {
    -webkit-mask-position: left calc(50% + 770px) bottom 0;
            mask-position: left calc(50% + 770px) bottom 0;
    -webkit-mask-size: 3000px;
            mask-size: 3000px;
  }
}
@media screen and (max-width: 768px) {
  .topFv__bgCloud::before {
    -webkit-mask-position: left -48px bottom 0px;
            mask-position: left -48px bottom 0px;
    -webkit-mask-size: max(309.3333333333%, 1160px);
            mask-size: max(309.3333333333%, 1160px);
  }
}
.topFv__bgCloud::after {
  background: #fff;
  content: "";
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 100%;
  -webkit-mask: url(../images/img_fv_bg_01.svg) repeat-x left -52px bottom -16px/clamp(1937px, 210.15625%, 2690px);
          mask: url(../images/img_fv_bg_01.svg) repeat-x left -52px bottom -16px/clamp(1937px, 210.15625%, 2690px);
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1281px) {
  .topFv__bgCloud::after {
    -webkit-mask-position: left calc(50% + 653px) bottom -16px;
            mask-position: left calc(50% + 653px) bottom -16px;
    -webkit-mask-size: 2690px;
            mask-size: 2690px;
  }
}
@media screen and (max-width: 768px) {
  .topFv__bgCloud::after {
    -webkit-mask-position: left -38px bottom 0px;
            mask-position: left -38px bottom 0px;
    -webkit-mask-size: max(277.3333333333%, 1040px);
            mask-size: max(277.3333333333%, 1040px);
  }
}
.topFv__container {
  grid-column: 1/-1;
  grid-row: 1/-1;
  max-width: 1280px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.topFv__inner {
  display: grid;
  gap: 0;
  grid-template-areas: "ribbon" "catch" "title" "text";
  grid-template-columns: -webkit-max-content minmax(0, 1fr);
  grid-template-columns: max-content minmax(0, 1fr);
  position: relative;
}
@media screen and (max-width: 1050px) {
  .topFv__inner {
    container: fvInner/inline-size;
    grid-template-areas: "ribbon balloon" "catch catch" "title title" "text illust";
    grid-template-columns: minmax(0, 1fr) min(26.1248185776%, 414px);
  }
}
@media screen and (max-width: 768px) {
  .topFv__inner {
    grid-template-areas: "ribbon balloon" "catch catch" "title title" "badge badge" "text text";
  }
}
@media screen and (max-width: 480px) {
  .topFv__inner {
    grid-template-areas: "ribbon balloon" "catch catch" "title title" "badge badge" "text text";
    grid-template-columns: minmax(0, 1fr) min(11.9402985075%, 118px);
  }
}
.topFv__ribbon {
  container: fvRibbon/inline-size;
  grid-area: ribbon;
  width: 350px;
}
@media screen and (max-width: 768px) {
  .topFv__ribbon {
    max-width: 350px;
    min-width: 160px;
    width: 53.7313432836%;
  }
}
.topFv__ribbon:where(:not(:last-child)) {
  margin-bottom: 56px;
}
@media screen and (max-width: 768px) {
  .topFv__ribbon:where(:not(:last-child)) {
    margin-bottom: 24px;
  }
}
.topFv__ribbonInner {
  background: #004c92;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 4.5714285714cqw), 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 4.5714285714cqw), 0 100%);
  color: #fff;
  font-size: 6.8571428571cqw;
  font-weight: 700;
  padding: 5.7142857143cqw 11.4285714286cqw 9.1428571429cqw;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .topFv__ribbonInner {
    font-size: 7.7777777778cqw;
    line-height: 1.36;
  }
}
.topFv__ribbonText {
  font-size: inherit;
  font-weight: inherit;
}
.topFv__catchPhrase {
  font-size: 4.8rem;
  font-weight: 700;
  grid-area: catch;
  letter-spacing: 0;
  line-height: 1.6;
  margin-bottom: 22px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .topFv__catchPhrase {
    font-size: clamp(2rem, 7.1641791045cqw, 4rem);
    letter-spacing: 0;
  }
}
.topFv__title {
  -webkit-align-items: flex-start;
          align-items: flex-start;
  display: -webkit-flex;
  display: flex;
  gap: 19px;
  grid-area: title;
  grid-auto-flow: column;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .topFv__title {
    display: contents;
  }
}
.topFv__title:has(+ .topFv__text) {
  margin-bottom: 34px;
}
.topFv__logo {
  max-width: 100%;
  width: 542px;
}
@media screen and (max-width: 768px) {
  .topFv__logo {
    grid-area: title;
    width: 100%;
  }
}
.topFv__badge {
  aspect-ratio: 1;
  container: fvBadge/inline-size;
  display: grid;
  font-family: "Zen Maru Gothic", sans-serif;
  height: auto;
  min-width: 85px;
  place-items: center;
  width: 196px;
}
@media screen and (max-width: 768px) {
  .topFv__badge {
    grid-area: badge;
    margin-right: min(50.7462686567cqw, 280px);
    max-width: 230px;
    place-self: center;
    width: 47.7611940299cqw;
  }
}
.topFv__badge::before {
  aspect-ratio: 1;
  background: #fcd14e;
  border-radius: 200cqw;
  content: "";
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 86.7346938776cqw;
  z-index: 0;
}
.topFv__badgeInner {
  display: grid;
  gap: 5.1020408163cqw;
  grid-column: 1/-1;
  grid-row: 1/-1;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-items: center;
  margin-top: -10.2040816327cqw;
  width: 100%;
  z-index: 2;
}
.topFv__badgeLabel {
  background: #004c92;
  border-radius: 100cqw;
  color: #fff;
  font-size: 8.1632653061cqw;
  font-weight: 700;
  line-height: 1.36;
  padding: 1.5306122449cqw 10.2040816327cqw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.topFv__badgeText {
  color: #004c92;
  font-size: 12.2448979592cqw;
  font-weight: 700;
  text-align: center;
}
.topFv__badgeLine {
  color: #fcd14e;
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.topFv__badgeLineLong {
  -webkit-animation: badge-line-rotate 6s 1s cubic-bezier(0.5, -0.18, 0, 1.08) infinite;
          animation: badge-line-rotate 6s 1s cubic-bezier(0.5, -0.18, 0, 1.08) infinite;
  -webkit-transform-origin: center;
          transform-origin: center;
  will-change: transform;
}
.topFv__badgeLineShort {
  -webkit-animation: badge-line-rotate 6s 1s cubic-bezier(0.5, -0.18, 0.15, 1.06) infinite;
          animation: badge-line-rotate 6s 1s cubic-bezier(0.5, -0.18, 0.15, 1.06) infinite;
  -webkit-transform-origin: center;
          transform-origin: center;
  will-change: transform;
}
.topFv__text {
  font-weight: 500;
  grid-area: text;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .topFv__text {
    margin-top: 40px;
  }
}
.topFv__illustArea {
  display: grid;
  grid-column: 2/span 1;
  grid-row: 1/-1;
  min-width: 260px;
  place-self: stretch flex-end;
  width: 100%;
  z-index: 0;
}
@media screen and (max-width: 1050px) {
  .topFv__illustArea {
    display: contents;
  }
}
.topFv__adBalloon {
  -webkit-animation: balloon-translate 10s ease-in-out infinite;
          animation: balloon-translate 10s ease-in-out infinite;
  aspect-ratio: 118/263;
  grid-area: 1/-1;
  margin-left: -99.3227990971%;
  margin-top: 23px;
  max-width: 118px;
  min-width: 100px;
  place-self: flex-start center;
  width: 27.9909706546%;
  will-change: transform;
}
@media screen and (max-width: 1050px) {
  .topFv__adBalloon {
    grid-column: balloon;
    grid-row: balloon/catch;
    margin-left: 0;
    min-width: 80px;
    width: 44.4444444444%;
  }
}
@media screen and (max-width: 768px) {
  .topFv__adBalloon {
    margin-left: clamp(0px, 660.8235294118px + -96.4705882353cqw, 82px);
    margin-top: 10px;
    max-width: 118px;
    min-width: 40px;
    place-self: flex-start;
    width: 11.9402985075cqw;
  }
}
@media screen and (max-width: 480px) {
  .topFv__adBalloon {
    margin-left: 0;
  }
}
.topFv__adBalloon svg {
  -webkit-animation: balloon-rotate 16s ease-in-out infinite;
          animation: balloon-rotate 16s ease-in-out infinite;
  -webkit-transform-origin: 36.4406779661% 16.3498098859%;
          transform-origin: 36.4406779661% 16.3498098859%;
  -webkit-transform-origin: 13.5593220339% 100%;
          transform-origin: 13.5593220339% 100%;
  will-change: transform;
}
.topFv__illust {
  aspect-ratio: 414/454;
  grid-area: 1/-1;
  margin-bottom: 5.8690744921%;
  place-self: flex-end;
  width: auto;
}
@media screen and (max-width: 1050px) {
  .topFv__illust {
    grid-area: illust;
    margin-bottom: 0;
    margin-left: 16px;
    margin-top: -23.7154150198%;
    margin-top: clamp(-140px, 414.2857142857px + -57.1428571429cqw, -20px);
    place-self: flex-start;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .topFv__illust {
    grid-area: badge;
    margin-left: min(47.7611940299cqw, 270px);
    margin-top: 0;
    max-width: 240px;
    place-self: center;
    width: 50.7462686567cqw;
  }
}
.topFv.is_fixed {
  position: -webkit-sticky;
  position: sticky;
}

.topCampaign:has(+ .topAbout) {
  margin-bottom: 102px;
}
@media screen and (max-width: 768px) {
  .topCampaign:has(+ .topAbout) {
    margin-bottom: 50px;
  }
}
.topCampaign__flagGarlandWrap {
  display: grid;
  grid-template-columns: repeat(2, 119px);
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .topCampaign__flagGarlandWrap {
    contain-intrinsic-height: auto 64px;
    grid-template-columns: repeat(2, 80px);
  }
}
.topCampaign__flagGarlandWrap:not(:last-child) {
  margin-bottom: 20px;
}
.topCampaign__flagGarland {
  aspect-ratio: 119/96;
  height: auto;
  width: 100%;
}
.topCampaign__flagGarland:last-child {
  scale: -1 1;
}

.topAbout {
  position: relative;
  scroll-margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .topAbout__balloonContainer {
    --balloon-travel-distance: -180px;
  }
}
.topAbout__container_size_lg {
  margin: 0 auto;
  max-width: 1360px;
  padding: 0 40px;
}
@media screen and (max-width: 768px) {
  .topAbout__container_size_lg {
    padding: 0 20px;
  }
}
.topAbout__inner {
  -webkit-align-items: flex-start;
          align-items: flex-start;
  background: #fff;
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  gap: 64px;
  margin-bottom: 160px;
  padding: 56px 40px;
  position: relative;
}
@media screen and (max-width: 1050px) {
  .topAbout__inner {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media screen and (max-width: 768px) {
  .topAbout__inner {
    margin-bottom: 120px;
    padding: 40px 16px;
  }
}
.topAbout__title {
  margin-bottom: 40px;
  padding-right: 120px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .topAbout__title {
    padding-right: 0;
  }
}
.topAbout__text {
  position: relative;
  z-index: 1;
}
.topAbout__text:not(:last-child) {
  margin-bottom: 1.75em;
}
.topAbout__pic {
  aspect-ratio: 4/3;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  width: 38.3333333333%;
  z-index: 1;
}
@media screen and (max-width: 1050px) {
  .topAbout__pic {
    width: 100%;
  }
}
.topAbout__mark {
  aspect-ratio: 192/207;
  height: auto;
  position: absolute;
  right: -30px;
  top: -60px;
  width: 192px;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .topAbout__mark {
    right: -20px;
    top: -50px;
    width: 100px;
  }
}

.topAboutFeatures:not(:last-child) {
  margin-bottom: 101px;
}
.topAboutFeatures__content {
  container: topAboutFeatureContent/inline-size;
  display: grid;
  gap: 0 16px;
  grid-template-areas: ". title ." "balloon1 text balloon2";
  grid-template-columns: 12.8479657388% minmax(0, 1fr) 12.8479657388%;
  margin: 0 auto;
  max-width: 984px;
  padding-right: 4.4642857143%;
}
@media screen and (max-width: 768px) {
  .topAboutFeatures__content {
    gap: 0;
    grid-template-areas: "balloon1 title balloon2" "text text text";
    grid-template-columns: clamp(60px, 17.9104477612%, 80px) minmax(0, 1fr) clamp(60px, 17.9104477612%, 80px);
    padding-right: 0;
  }
}
.topAboutFeatures__content:not(:last-child) {
  margin-bottom: 116px;
}
.topAboutFeatures__content.is_visible .topAboutFeatures__balloon {
  -webkit-animation: floatUp var(--balloon-duration, 3s) calc(0.5s + var(--balloon-delay, 0s)) cubic-bezier(0.33, 1, 0.68, 1) both, balloon-floating 3s calc(3.5s + var(--balloon-delay, 0s)) ease-in-out infinite alternate both;
          animation: floatUp var(--balloon-duration, 3s) calc(0.5s + var(--balloon-delay, 0s)) cubic-bezier(0.33, 1, 0.68, 1) both, balloon-floating 3s calc(3.5s + var(--balloon-delay, 0s)) ease-in-out infinite alternate both;
  animation-composition: add;
}
.topAboutFeatures__title {
  grid-area: title;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .topAboutFeatures__title {
    align-self: flex-end;
    grid-column: balloon1/balloon2;
  }
}
.topAboutFeatures__title:not(:last-child) {
  margin-bottom: 22px;
}
.topAboutFeatures__textWrap {
  grid-area: text;
  text-align: center;
}
.topAboutFeatures__text {
  font-size: 1.8rem;
  font-weight: 500;
  z-index: 2;
}
.topAboutFeatures__text:not(:last-child) {
  margin-bottom: 1.6em;
}
.topAboutFeatures__balloonArea {
  aspect-ratio: 120/220;
  display: grid;
  height: auto;
  margin-top: 5px;
  max-width: 120px;
  width: 100%;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .topAboutFeatures__balloonArea {
    margin-bottom: 12px;
    margin-top: 0;
  }
}
@media screen and (max-width: 480px) {
  .topAboutFeatures__balloonArea {
    margin-bottom: 30px;
  }
}
.topAboutFeatures__balloonArea_pos_before {
  grid-area: balloon1;
  place-self: flex-start;
  scale: -1 1;
}
@media screen and (max-width: 768px) {
  .topAboutFeatures__balloonArea_pos_before {
    place-self: flex-end flex-start;
  }
}
.topAboutFeatures__balloonArea_pos_after {
  grid-area: balloon2;
  place-self: flex-start flex-end;
}
@media screen and (max-width: 768px) {
  .topAboutFeatures__balloonArea_pos_after {
    place-self: flex-end;
  }
}
.topAboutFeatures__balloon {
  --balloon-travel-distance: max(50svh, 300px);
  grid-column: 1/-1;
  grid-row: 1/-1;
  max-width: 100%;
  opacity: 0;
  place-self: flex-start;
  width: 45%;
  will-change: transform;
}
.topAboutFeatures__balloon_size_lg {
  contain-intrinsic-height: auto 160px;
  place-self: flex-end;
  width: 57.5%;
}
.topAboutFeatures__list {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: -webkit-max-content auto;
  grid-template-rows: max-content auto;
}
@media screen and (max-width: 1050px) {
  .topAboutFeatures__list {
    gap: 24px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.topAboutFeatures__item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
@media screen and (max-width: 1050px) {
  .topAboutFeatures__item {
    grid-row: auto;
    grid-template-rows: auto;
  }
}
@media screen and (max-width: 1050px) {
  .topAboutFeatures__item.fade-in-target {
    transition-delay: 0s;
  }
}

.topAboutDifference:not(:last-child) {
  margin-bottom: 101px;
}
.topAboutDifference__title {
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
}
.topAboutDifference__title:not(:last-child) {
  margin-bottom: 18px;
}
@media screen and (max-width: 768px) {
  .topAboutDifference__title {
    font-size: 2.4rem;
  }
}
.topAboutDifference__textWrap {
  margin-bottom: 34px;
}
.topAboutDifference__text {
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
}
.topAboutDifference__list {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0, 447px));
  grid-template-rows: -webkit-max-content 1fr;
  grid-template-rows: max-content 1fr;
  -webkit-justify-content: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .topAboutDifference__list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.topAboutDifference__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
@media screen and (max-width: 768px) {
  .topAboutDifference__item {
    grid-row: auto;
    grid-template-rows: auto;
  }
}
.topAboutDifference__item .detailsCard__inner {
  grid-row: span 2;
  grid-template-rows: subgrid;
}
@media screen and (max-width: 768px) {
  .topAboutDifference__item .detailsCard__inner {
    grid-row: auto;
    grid-template-rows: auto;
  }
}
.topAboutDifference__item:last-child .detailsCard__title {
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .topAboutDifference__item:last-child .detailsCard__title {
    font-size: 2.4rem;
  }
}

.topAboutRecommend {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.topAboutRecommend__container {
  max-width: unset;
}
.topAboutRecommend__title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .topAboutRecommend__title {
    font-size: 2.4rem;
    margin-bottom: 40px;
  }
}
.topAboutRecommend__carouselWrap {
  container: recommendCarousel/inline-size;
}
.topAboutRecommend__carousel {
  --swiper-navigation-color: #004c92;
  --swiper-navigation-size: 40px;
  --swiper-pagination-color: #60c3f1;
  --swiper-pagination-bullet-inactive-color: #dfdfdf;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin: 0 auto;
  max-width: 100%;
  width: 736px;
}
@media screen and (min-width: 2336px) {
  .topAboutRecommend__carousel {
    overflow: hidden;
    width: 2272px;
  }
}
@media screen and (max-width: 768px) {
  .topAboutRecommend__carousel {
    --swiper-navigation-size: 32px;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-horizontal-gap: 5px;
    width: 352px;
  }
}
.topAboutRecommend__carouselList {
  -webkit-align-items: stretch;
          align-items: stretch;
  box-sizing: inherit;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: -webkit-max-content auto 1fr;
  grid-template-rows: max-content auto 1fr;
}
.topAboutRecommend__carouselItem {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  height: auto;
}
.topAboutRecommend__carouselItem .recommendCard__inner {
  grid-row: span 3;
  grid-template-rows: subgrid;
}
.topAboutRecommend__carouselItem .recommendCard__title {
  -webkit-align-self: center;
          align-self: center;
}
.topAboutRecommend__carouselController {
  -webkit-align-items: center;
          align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: -webkit-max-content minmax(0, 1fr) -webkit-max-content;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  margin-top: 15px;
  max-width: 100%;
  width: 736px;
}
@media screen and (max-width: 768px) {
  .topAboutRecommend__carouselController {
    gap: 16px;
    width: 100cqw;
  }
}
.topAboutRecommend__carouselPagination {
  position: static;
}
.topAboutRecommend__carouselButton {
  display: grid;
  font-size: var(--swiper-navigation-size);
  place-items: center;
  position: static;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.topAboutRecommend__carouselButton.swiper-button-prev, .topAboutRecommend__carouselButton.swiper-button-next {
  margin: 0;
}
.topAboutRecommend__carouselButton_type_prev {
  -webkit-order: -1;
          order: -1;
}
.topAboutRecommend__carouselButtonIcon {
  font-size: 1.125em;
  overflow: hidden;
}

.topPrice {
  margin-top: -14px;
  position: relative;
  scroll-margin-top: 40px;
}
.topPrice:not(:last-child) {
  margin-bottom: 80px;
}
.topPrice__title {
  margin-bottom: 22px;
}
.topPrice__text {
  font-weight: 500;
  text-align: center;
}
.topPrice__text:not(:last-child) {
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .topPrice__text:not(:last-child) {
    margin-bottom: 40px;
  }
}
.topPrice__priceList {
  display: grid;
  gap: 36px;
  grid-auto-rows: -webkit-max-content 1fr;
  grid-auto-rows: max-content 1fr;
  grid-template-columns: minmax(0, 496px) -webkit-max-content minmax(0, 496px);
  grid-template-columns: minmax(0, 496px) max-content minmax(0, 496px);
  -webkit-justify-content: center;
          justify-content: center;
}
@media screen and (max-width: 1050px) {
  .topPrice__priceList {
    gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .topPrice__priceList {
    grid-auto-rows: auto;
    grid-template-columns: repeat(1, minmax(0, 480px));
    margin-bottom: 24px;
  }
}
.topPrice__priceItem {
  contain-intrinsic-size: auto 380px;
  display: grid;
  gap: 0;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
@media screen and (max-width: 768px) {
  .topPrice__priceItem {
    grid-row: auto;
    grid-template-rows: auto;
  }
}
.topPrice__priceItem .detailsCard__inner {
  grid-row: span 2;
  grid-template-rows: subgrid;
}
@media screen and (max-width: 768px) {
  .topPrice__priceItem .detailsCard__inner {
    grid-row: auto;
    grid-template-rows: auto;
  }
}
.topPrice__priceItem .detailsCard__head {
  min-height: 63px;
}
@media screen and (max-width: 768px) {
  .topPrice__priceItem .detailsCard__head {
    min-height: 56px;
  }
}
@media screen and (max-width: 768px) {
  .topPrice__priceItem.fade-in-target {
    transition-delay: 0s;
  }
}
.topPrice__pricePlus {
  aspect-ratio: 1;
  background: #dff2fc;
  border-radius: 1000px;
  display: grid;
  font-size: 0;
  grid-row: span 2;
  height: auto;
  place-items: center;
  place-self: center;
  width: 56px;
}
@media screen and (max-width: 1050px) {
  .topPrice__pricePlus {
    width: 48px;
  }
}
@media screen and (max-width: 768px) {
  .topPrice__pricePlus {
    grid-row: auto;
  }
}
.topPrice__pricePlus::before, .topPrice__pricePlus::after {
  background: #004c92;
  border-radius: 100px;
  content: "";
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 3px;
  width: 48.2142857143%;
}
.topPrice__pricePlus::after {
  rotate: 90deg;
}
.topPrice__notes {
  font-size: 1.2rem;
}
.topPrice__notes:not(:last-child) {
  margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .topPrice__notes:not(:last-child) {
    margin-bottom: 80px;
  }
}
.topPrice__note {
  -webkit-align-items: flex-start;
          align-items: flex-start;
  display: grid;
  grid-template-columns: -webkit-max-content minmax(0, 1fr);
  grid-template-columns: max-content minmax(0, 1fr);
}
.topPrice__note::before {
  content: "※";
}

.topFlow {
  margin-top: -14px;
  position: relative;
  scroll-margin-top: 40px;
}
.topFlow__inner {
  -webkit-align-items: flex-start;
          align-items: flex-start;
  display: grid;
  gap: 5.3571428571%;
  grid-template-columns: 560px minmax(0, 1fr);
}
@media screen and (max-width: 1050px) {
  .topFlow__inner {
    gap: 40px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.topFlow__title {
  margin-bottom: 22px;
}
.topFlow__textWrap:not(:last-child) {
  margin-bottom: 34px;
}
.topFlow__text {
  font-weight: 500;
}
.topFlow__steps {
  counter-reset: stepCounter;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.topFlow__step {
  counter-increment: stepCounter;
}
.topFlow__step:not(:last-child) {
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.topFlow__illust {
  -webkit-align-self: flex-start;
          align-self: flex-start;
  margin-top: 123px;
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height) + 5svh);
}
@media screen and (max-width: 1050px) {
  .topFlow__illust {
    justify-self: center;
    margin-bottom: 0;
    margin-top: 0;
    max-width: 500px;
    position: static;
    translate: 0 0;
  }
}

.topTemplate {
  margin-top: -14px;
  position: relative;
  scroll-margin-top: 40px;
}
.topTemplate__inner {
  -webkit-align-items: center;
          align-items: center;
  display: grid;
  gap: max(40px, 5.3571428571%);
  grid-template-columns: minmax(0, 1fr) max(420px, 44.6428571429%);
}
@media screen and (max-width: 768px) {
  .topTemplate__inner {
    gap: 24px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.topTemplate__inner:not(:last-child) {
  margin-bottom: 62px;
}
.topTemplate__illust {
  justify-self: center;
  margin-top: 8px;
  max-width: 100%;
  width: 309px;
}
@media screen and (max-width: 768px) {
  .topTemplate__illust {
    margin-top: 0;
    width: 120px;
  }
}
@media screen and (max-width: 768px) {
  .topTemplate__title {
    text-align: center;
  }
}
.topTemplate__title:not(:last-child) {
  margin-bottom: 22px;
}
.topTemplate__text {
  font-weight: 500;
}
.topTemplate__list {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 1050px) {
  .topTemplate__list {
    gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  .topTemplate__list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media screen and (max-width: 768px) {
  .topTemplate__item.fade-in-target {
    transition-delay: 0s;
  }
}

.topFaq {
  margin-top: -14px;
  position: relative;
  scroll-margin-top: 40px;
}
.topFaq__title {
  margin-bottom: 30px;
}
.topFaq__list {
  display: grid;
  gap: 31px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.top__content {
  background: linear-gradient(0deg, #fff 50%, #ebf8ff 50%);
  border-radius: 64px 64px 0 0;
  display: grid;
}
.top__bgGroup {
  background: #fff;
  border-radius: 64px;
  padding: 80px 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .top__bgGroup {
    border-radius: 32px;
  }
}
.top__bgGroup:nth-child(2n+1) {
  background: #ebf8ff;
}