@charset "UTF-8";
.bg-fv {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  height: 560px;
  z-index: 0;
  background-image: url(../../asset/img/fv.png);
}

@supports (background-image: url(../../asset/img/fv.webp)) {
  .bg-fv {
    background-image: url(../../asset/img/fv.webp);
  }
}
.bg-sub {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0;
  height: 150px;
  z-index: 0;
  background-image: url(../../asset/img/bg-sub.png);
}

@supports (background-image: url(../../asset/img/bg-sub.webp)) {
  .bg-sub {
    background-image: url(../../asset/img/bg-sub.webp);
  }
}
/*位置*/
.top-20 {
  top: 20px;
}

.top-n5 {
  top: -5px;
}

.top-n25 {
  top: -25px;
}

.top-n40 {
  top: -40px;
}

.top-n50 {
  top: -50px;
}

.top-n60 {
  top: -60px;
}

.pt-50 {
  padding-top: 50px;
}

.pb-50 {
  padding-bottom: 50px;
}

/*高さ*/
.h-56 {
  height: 56px;
}

.h-107 {
  height: 107px;
}

.h-115 {
  height: 115px;
}

.h-150 {
  height: 150px;
}

.h-560 {
  height: 560px;
}

@media screen and (min-width: 576px) {
  .h-sm-65 {
    height: 65px;
  }
  .h-sm-80 {
    height: 80px;
  }
  .h-sm-100 {
    height: 100px;
  }
  .h-sm-142 {
    height: 142px;
  }
  .h-sm-250 {
    height: 250px;
  }
}
@media screen and (min-width: 768px) {
  .h-md-86 {
    height: 86px;
  }
  .h-md-280 {
    height: 280px;
  }
}
/*幅*/
.w-15 {
  width: 15%;
}

.w-20 {
  width: 20px;
}

.w-40 {
  width: 40px;
}

.w100per-75per {
  width: 100%;
}

@media screen and (min-width: 576px) {
  .w100per-75per {
    width: 75%;
  }
  .w-sm-30 {
    width: 30px;
  }
}
@media screen and (min-width: 768px) {
  .w-md-10 {
    width: 10%;
  }
}
/*ボーダー*/
.border-color-purple {
  border-color: #9966FF !important;
}

.border-color-light-purple {
  border-color: #C7CDFA !important;
}

.border-color-blue {
  border-color: #00B1FD !important;
}

.border-color-light-blue {
  border-color: #BCF4FF !important;
}

.border-color-light-gray {
  border-color: #EEEEEE !important;
}

.border-color-red {
  border-color: #FF2281 !important;
}

/*シャドウ*/
.text-shadow {
  text-shadow: #000 2px 2px 10px;
}

.text-white-shadow {
  text-shadow: #fff 0px 0px 10px;
}

/*ボックス*/
.box-parent {
  box-sizing: border-box;
}

.box-child {
  flex-direction: column;
}

.box-child-text {
  flex-grow: 1;
} /*※この親のdisplay:flex;を指定する*/
/*テキスト*/
@media screen and (min-width: 768px) {
  .text-md-center {
    text-align: center;
  }
}
/*画像*/
.img-number {
  top: -15px;
  width: 40px;
}

/* 背景 */
.bg-blue-opacity85 {
  background-color: rgba(0, 177, 253, 0.8509803922);
}

.bg-purple-opacity85 {
  background-color: rgba(153, 102, 255, 0.8509803922);
}

.bg-red-opacity85 {
  background-color: rgba(255, 34, 129, 0.8509803922);
}

.bg-yellow-opacity85 {
  background-color: rgba(247, 171, 15, 0.8509803922);
}

.bg-diagonal-purple::after, .bg-diagonal-white::after, .bg-diagonal-gray::after {
  content: "";
  position: absolute;
  bottom: -75px;
  left: 0;
  width: 100%;
  height: 80px;
  aspect-ratio: 1;
  -webkit-clip-path: polygon(0 35%, 100% 0, 0 0);
          clip-path: polygon(0 35%, 100% 0, 0 0);
  background-color: #F7F9FF;
  z-index: 5;
}

.bg-diagonal-white::after, .bg-diagonal-gray::after {
  bottom: unset;
  top: -55px;
  -webkit-clip-path: polygon(190% 0, 0 100%, 100% 100%);
          clip-path: polygon(190% 0, 0 100%, 100% 100%);
  background-color: white;
}

.bg-diagonal-gray::after {
  background-color: #EEEEEE;
}

@media screen and (min-width: 576px) {
  .bg-diagonal-purple::after {
    bottom: -60px;
    -webkit-clip-path: polygon(0 70%, 100% 0, 0 0);
            clip-path: polygon(0 70%, 100% 0, 0 0);
  }
  .bg-diagonal-white::after, .bg-diagonal-gray::after {
    top: -40px;
    -webkit-clip-path: polygon(125% 0, 0 100%, 100% 100%);
            clip-path: polygon(125% 0, 0 100%, 100% 100%);
  }
}
@media screen and (min-width: 768px) {
  .bg-diagonal-purple::after {
    bottom: -55px;
    -webkit-clip-path: polygon(0 90%, 100% 0, 0 0);
            clip-path: polygon(0 90%, 100% 0, 0 0);
  }
  .bg-diagonal-white::after, .bg-diagonal-gray::after {
    top: -35px;
    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
            clip-path: polygon(100% 0, 0 100%, 100% 100%);
  }
}
.rainbow-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background-image: linear-gradient(90deg, rgb(0, 177, 253) 11%, rgb(255, 34, 209) 35%, rgb(255, 34, 87) 60%, rgb(247, 166, 12) 80%, rgb(254, 241, 51));
  z-index: 10;
}

.rainbow-diagonal-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background-image: linear-gradient(90deg, rgb(0, 177, 253) 11%, rgb(255, 34, 209) 35%, rgb(255, 34, 87) 60%, rgb(247, 166, 12) 80%, rgb(254, 241, 51));
  z-index: 10;
  transform: skewY(-5deg);
}

/*装飾*/
.triangle-bottom-purple::before,
.triangle-bottom-purple::after,
.triangle-bottom-red::before,
.triangle-bottom-red::after,
.triangle-bottom-arrow::before,
.triangle-bottom-white::before {
  content: "";
  position: absolute;
}

.triangle-bottom-purple::before, .triangle-bottom-red::before, .triangle-bottom-arrow::before, .triangle-bottom-white::before {
  border: 10px solid transparent;
  border-top: 12px solid #9966FF;
  top: 100%;
  left: 50%;
}

.triangle-bottom-red::before {
  border-top: 12px solid #FF2281;
}

.triangle-bottom-arrow::before {
  border-top: 12px solid #D2D7FB;
}

.triangle-bottom-white::before {
  border-top: 12px solid white;
}

.triangle-bottom-purple::after, .triangle-bottom-red::after {
  border: 9px solid transparent;
  border-top: 11.5px solid white;
  left: 50.1%;
  top: 98%;
}

.svg-color-white {
  filter: invert(100%) sepia(0%) saturate(603%) hue-rotate(123deg) brightness(116%) contrast(102%);
}

/*フローティングバナー*/
.float-banner {
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}
.float-banner.active {
  /*このクラスが付与されると表示する*/
  opacity: 1;
  visibility: visible;
  animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.w-420 {
  width: 420px;
}

.z-999 {
  z-index: 999;
}

@media screen and (min-width: 768px) {
  .bottom-md-20 {
    bottom: 20px !important;
  }
  .end-md-20 {
    right: 20px !important;
  }
}
/*topへ戻る*/
.top-88 {
  top: 88%;
}

/* アコーディオン用 */
#faq .accordion_title {
  display: flex;
  position: relative;
}

#faq .accordion_title::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: rotate(90deg);
  transition: 0.5s;
  z-index: 10;
}

#faq .accordion_title::after {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: rotate(0deg);
}

#faq .accordion_title.active::before {
  transform: rotate(0deg);
}

#faq .accordion_title:hover {
  cursor: pointer;
}

#faq .accordion-button::after, #faq .accordion-button:not(.collapsed)::after {
  display: none;
}

/* ボタン */
.accordion-btn {
  background-color: #373b5a;
  border: 1px solid #373b5a;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  left: 0;
  margin: auto;
  padding: 5px 15px;
  position: absolute;
  right: 0;
  text-align: center;
  transition: all 0.2s;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 1;
}

/* 続きを読むボタンの表記 */
.accordion-btn::after {
  content: "続きを読む";
}

/* ボタンhover時のスタイル */
.accordion-btn:hover {
  background-color: #fff;
  color: #373b5a;
}

.accordion-text {
  overflow: hidden; /* テキストを隠す */
  position: relative;
}

/* 最初に見えてるテキストエリアの高さ */
.accordion-text.is-hide {
  height: 4000px;
}

/* テキストをグラデーションで隠す */
.accordion-text::before {
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  bottom: 0;
  content: "";
  height: 60px; /* グラデーションで隠す高さ */
  position: absolute;
  width: 100%;
}

/* 閉じるボタンの位置 */
.accordion-btn.is-show {
  bottom: -3em;
}

/* 閉じるボタンの表記 */
.accordion-btn.is-show::after {
  content: "閉じる";
}

/* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
.accordion-btn.is-show + .accordion-text::before {
  display: none;
}/*# sourceMappingURL=style.css.map */