@charset "UTF-8";
/*
 * 参考
 * https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*-------------------------------
inner
-------------------------------*/
/*-------------------------------
余白
-------------------------------*/
/*-------------------------------
フォント
-------------------------------*/
/*-------------------------------
ベースフォントサイズ
-------------------------------*/
/*-------------------------------
Color
-------------------------------*/
/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/
/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
html {
  font-size: 10px;
}
@media (max-width: 550px) {
  html {
    font-size: 1.8181818182vw;
  }
}

body {
  margin-inline: auto;
  max-width: 55rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #333;
  font-size: 1.6rem;
  background-color: #fff;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 767px) {
  .pc-view {
    display: none !important;
  }
}

.sp-view {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sp-view {
    display: inline-block !important;
  }
}

/*-------------------------------
cta-btn
-------------------------------*/
.cta-btn {
  width: 93.7333333333%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cta-btn a {
  display: inline-block;
  transition: 0.4s;
}

@media (any-hover: hover) {
  .cta-btn a:hover {
    transform: scale(1.05);
    opacity: 1;
  }
}
/*-------------------------------
fv
-------------------------------*/
.fv {
  position: relative;
}

.fv-btn {
  margin-inline: auto;
  width: 93.0666666667%;
  position: absolute;
  bottom: 2.8%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: 0.4s;
}

@media (any-hover: hover) {
  .fv-btn:hover {
    transform: translateX(-50%) scale(1.05);
    opacity: 1;
  }
}
/*-------------------------------
question
-------------------------------*/
.question-box {
  position: relative;
}

.question-box__list {
  width: 77.3333333333%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6rem;
}

.question-box__item {
  width: 100%;
  height: 6.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  font-size: 3.2rem;
  line-height: 1;
  color: #fff;
  background-color: #cccccc;
}

.question-box__item.is-click {
  background-color: #43a7a1;
}

.-yes-btn,
.-no-btn {
  cursor: pointer;
  transition: 0.3s;
}

@media (any-hover: hover) {
  .-yes-btn:hover,
  .-no-btn:hover {
    opacity: 0.8;
  }
}
.q1 {
  display: none;
}

.q2 {
  display: none;
}

.q3 {
  display: none;
}

.q1__list {
  bottom: 18%;
}

.q2__list {
  bottom: 11%;
}

.q3__list {
  bottom: 10.5%;
}

/*-------------------------------
content
-------------------------------*/
.content {
  display: none;
}

.content.is-visible {
  display: block;
}

/*-------------------------------
section1
-------------------------------*/
.section1 {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ブレンドの影響範囲をsection1内に閉じる */
}

/* 背景画像 */
.img1 {
  position: relative;
  z-index: 10;
}

/* 紙吹雪レイヤー（動画） */
.section1__movie {
  width: 100%;
  height: auto;
  position: absolute;
  top: -6.6%;
  left: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 1; /* 親opacityは下げない（背景が濁る原因になる） */
  mix-blend-mode: screen; /* blendはラッパー側へ（SPでも効きやすい） */
  /* 合成レイヤー化（描画の安定化） */
  transform: translateZ(0);
  will-change: transform;
}

/* 黒マットを飛ばして紙吹雪だけ見せる */
.section1__movie video {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  mix-blend-mode: normal; /* video側は切る（ラッパー側で合成する） */
  background: transparent;
  /* 黒フチが残る場合だけ、ここを少しずつ上げて調整 */
  filter: brightness(1.2) contrast(1.2);
}

/*-------------------------------
section1
-------------------------------*/
.section2 {
  position: relative;
}

.img2 {
  margin-top: -8.3rem;
}

.section2__btn.cta-btn {
  top: 7%;
}

/*-------------------------------
section3
-------------------------------*/
/*-------------------------------
section4
-------------------------------*/
.img4 {
  position: relative;
  z-index: 10;
}

/*-------------------------------
section5
-------------------------------*/
.section5 {
  padding-bottom: 14.4rem;
  background-color: #e9e4d1;
  position: relative;
}

.section5::after {
  content: "";
  width: 19rem;
  height: 4.4rem;
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/featre-big-arrow.png) center/contain no-repeat;
}

.section5__list {
  margin-top: 5%;
  padding-inline: 5.13rem;
  display: flex;
  flex-direction: column;
  gap: 3.8rem;
}

.section5__item {
  padding: 2.6rem 2.4rem 0.8rem;
  background-color: #fff;
}

.section5__item:nth-child(1) .section5__item-img {
  width: 84.9090909091%;
}

.section5__item:nth-child(2) .section5__item-img {
  width: 81.0909090909%;
}

.section5__item:nth-child(3) .section5__item-img {
  width: 92.1818181818%;
}

.section5__item-text {
  margin-top: 2.1rem;
  margin-inline: 1rem;
  padding: 2.4rem 1.6rem;
  font-size: 1.8rem;
  line-height: 3.4rem;
  border-top: 1px solid #e9e4d1;
  border-bottom: 1px solid #e9e4d1;
  display: none;
}

.section5__item-btn {
  margin-top: 0.8rem;
}

.section5__item-btn span {
  margin-inline: auto;
  padding: 0.8rem;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.4rem;
  line-height: 2.8rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: 0.3s;
  cursor: pointer;
}

@media (any-hover: hover) {
  .section5__item-btn span:hover {
    opacity: 0.8;
  }
}
.section5__item-btn span::before {
  content: "";
  width: 2rem;
  height: 1rem;
  background: url(../images/feature-arrow.png) center/contain no-repeat;
  transform: rotate(180deg);
  transition: 0.3s;
}

.section5__item-btn span.is-open::before {
  transform: rotate(0deg);
}

/*-------------------------------
section6
-------------------------------*/
.section6 {
  margin-top: -25%;
  position: relative;
  z-index: 10;
}

.section6__btn.cta-btn {
  bottom: 5.8%;
}

/*-------------------------------
section7
-------------------------------*/
.section7 {
  margin-top: -16%;
  position: relative;
}

.section7__link {
  width: 72%;
  height: 3rem;
  position: absolute;
  bottom: 41.5%;
  left: 8%;
}

.section7__link a {
  width: 100%;
  height: 100%;
  display: block;
}

/*-------------------------------
flow
-------------------------------*/
.flow {
  position: relative;
}

.flow__swiper {
  width: 82.1333333333%;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
}

.flow-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -8.5%;
}

.flow__swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: #fff;
  margin-inline: 1rem;
  width: 1rem;
  height: 1rem;
  opacity: 1;
}

.flow__swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: #4c438a;
}

.flow-swiper .swiper-button-prev,
.flow-swiper .swiper-button-next {
  width: 5.13rem;
  height: 5.13rem;
  background: url(../images/slide-arrow.png) center/contain no-repeat;
}

.flow-swiper .swiper-button-prev {
  left: -6%;
  transform: rotate(180deg);
}

.flow-swiper .swiper-button-next {
  right: -6%;
}

.flow__btn {
  width: 85.4666666667%;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.flow__btn a {
  width: 100%;
  display: block;
  transition: 0.4s;
}

@media (any-hover: hover) {
  .flow__btn a:hover {
    transform: scale(1.05);
    opacity: 1;
  }
}
/*-------------------------------
faq
-------------------------------*/
/*-------------------------------
contact
-------------------------------*/
/*-------------------------------
footer
-------------------------------*/
.footer {
  position: relative;
}

.footer__access {
  width: 89.7333333333%;
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
}

.footer__access-link {
  width: 80%;
  height: 4.5%;
  position: absolute;
  top: 21%;
  left: 11%;
}

.footer__access-link a {
  width: 100%;
  height: 100%;
  display: none;
}
@media screen and (max-width: 767px) {
  .footer__access-link a {
    display: block;
  }
}

/*-------------------------------
floating-btn
-------------------------------*/
.floating-btn {
  width: 100%;
  max-width: 55rem;
  position: fixed;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

.floating-btn.active {
  opacity: 1;
  visibility: visible;
}

.floating-btn__list {
  padding-inline: 1rem;
  display: flex;
  gap: 0.9rem;
}

.floating-btn__item {
  width: 50%;
}

.floating-btn__item img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/*# sourceMappingURL=style.css.map */