.button-1 {
  /* margin-top: -75vw; */
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));

  /* @media screen and (min-width: 640px) {
    margin-top: -480px;
  } */
}

.button-2 {
  margin-top: calc(-300 / 6.4 * 1vw);

  @media screen and (min-width: 640px) {
    margin-top: -300px;
  }
}

.button-main {
  display: inline-block;
  position: static;
}

.lp-imgs > div {
  position: relative;
  min-height: calc(150 / 6.4 * 1vw);
  height: auto;
}

@media screen and (min-width: 640px) {
  .lp-imgs > div {
    min-height: 150px;
  }
}

@media screen and (min-width: 640px) {
  .button-main2 img {
      width: 550px;
      margin: auto;
  }
}

.active-button a {
  display: block;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden
}

.active-button a:before {
  background-color: none;
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 40px;
  height: 100%;
  background-color: #fff;
  animation: shine-btn 3s ease-in-out infinite;
}


@keyframes shine-btn {
  0% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0;
  }

  80% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: .5;
  }

  81% {
      -webkit-transform: scale(4) rotate(45deg);
      opacity: 1;
  }

  100% {
      -webkit-transform: scale(50) rotate(45deg);
      opacity: 0;
  }
}



/*==================================================
スライダーのためのcss
===================================*/
.plan{
  aspect-ratio: 670 / 1024;
}
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  height: auto;
  margin: auto;
}

.slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
   margin:0 10px;
   height:auto;

}

/*矢印の設定*/

.slick-arrow {
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #fff;/*矢印の色*/
  border-right: 2px solid #fff;/*矢印の色*/
  height: 10px;
  width: 10px;
}


/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  border-style: none;
   z-index: 30;
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   /* outline: none;クリックをしたら出てくる枠線を消す */
   background-color : #90BBF9;
   border-radius: 50%;
   height: 30px;
   width: 30px;
   display: flex;
   justify-content: center;
   align-items: center;

}

.slick-prev {/*戻る矢印の位置と形状*/
  left: 0%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: 0%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
   text-align:center;
 margin:20px 0 0 0;
}

.slick-dots li {
   display:inline-block;
 margin:0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   width:8px;/*ドットボタンのサイズ*/
   height:8px;/*ドットボタンのサイズ*/
   display:block;
   border-radius:50%;
   background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
   background:#333;/*ドットボタンの現在地表示の色*/
}


/* FAQ */
.faq {
  background: url(./img/faq_bg.png) repeat;
  padding: 30px 25px;
}
.faq-item {
  margin-bottom: 15px;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #f79620;
  border-radius: 7px;
  padding: 10px 10px;
}

.faq-item:hover {
  cursor: pointer;
}

.faq-item .question {
  display: flex;
  color: #f79620;
  /* justify-content: center; */
  position: relative;
  font-weight: normal;

  gap: 8px;
  background-color: none;
}
.faq-item .question .Q-num{
  display: flex;
  align-items: flex-end;
  margin: auto;
}

.faq-item .question .Q-num .Q{
  font-size: 1.0em;
  font-family: sans-serif, serif, cursive, fantasy;
}
.faq-item .question .Q-num .num{
  font-family: sans-serif, serif, cursive, fantasy;
  font-size: 2em;
  padding-bottom: .1em;
}

.faq-item .question-icon {
  /* margin-top: -5px; */
  width: 18px;
}

.faq-item .answer-icon {
  /* margin-top: -5px; */
  width: 18px;
}
.faq-item .question-plus, .faq-item .question-minus {
  width: 15px;
}

.faq-item .question-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.0em;
  font-weight: 500;
  flex: 1;
  margin: auto;
}

.faq-item .answer {
  display: flex;
  align-items: flex-start;
  padding: 0;

}



.faq-item .question-plus,
.faq-item .question-minus {
  color: #23258E;
  font-size: 2em;
  font-weight: bold;
  align-self: center;
}

.faq-item.open .question-plus {
  display: none;
}

.faq-item .question-minus {
  display: none;
}

.faq-item.open .question-minus {
  display: block;
}

.faq-item .answer {
  display: none;
}

.faq-item.open .answer {
  display: flex;
}


.faq-item .answer .answer-text{
  font-family: 'Noto Sans JP', sans-serif;
  flex: 1;
  color: #f79620;
  font-size: 15px;
}


.line {
  height: 3px;
  position: relative;

}
.line::before {
  content: "";
  background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


.footer {
  background-color: #0080DE;
  background-image:none;
}

/* CTA */
.cta {
  padding: 50px 20px;
  text-align: center;
}
.cta_lead {
  margin-bottom: 40px;
}
.cta_lead2 {
  margin-bottom: 20px;
}
@media screen and (min-width:640px) {
  .cta_lead img {
    max-width: 550px;
    margin: 0 auto;
  }
}
.cta_btn:not(:last-child) {
  margin-bottom: 25px;
}
.cta_link a {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-top: 10px;
  border-bottom: 1px solid #fd5c68;
  @media screen and (max-width:768px) {
    font-size: 4.0vw;
  }
}
.cta_text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin: 10px 100px 0;
  text-align: left;
  @media screen and (max-width:768px) {
    font-size: 3.4vw;
    margin: 10px 7% 0;
  }
}
.cta_last {
  background: url(./img/cta_bg.webp) center center / cover no-repeat;
}

/* tab */
.tabs {
  display: flex;
  margin: 0 12px;
}
.tabs_item {
  width: calc(100% / 3 - 6px);
  margin: 0 3px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #efefef;
  border: 1px solid #ababab;
  border-bottom: none;
  padding: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #111110;
  text-align: center;
  line-height: 1.2;
  position: relative;
  cursor: pointer;
  @media screen and (max-width:639px) {
    font-size: 4.0vw;
  }
}
.tabs_item.active {
  color: #fff;
}
.tabs_item:nth-child(1).active {
  background-color: #f79620;
  border-color: #f79620;
}
.tabs_item:nth-child(2).active {
  background-color: #018372;
  border-color: #018372;
}
.tabs_item:nth-child(3).active {
  background-color: #61cab7;
  border-color: #61cab7;
}
.tab_osusume {
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  text-align: center;
}
.tab_osusume img {
  display: inline;
  max-width: 150px;
}
@media screen and (max-width:639px) {
  .tab_osusume {
    top: -60%;
  }
  .tab_osusume img {
    max-width: 80%;
  }
}
.tab_body_item {
  display: none;
}
.tab_body_item.active {
  display: block;
}

.cnt09 {
  margin-top: -7.0vw;
  position: relative;
  z-index: 1;
  @media screen and (min-width:640px) {
    margin-top: -45px;
  }
}
div:has(+.cnt09) {
  position: relative;
  z-index: 2;
}

/* フローティングボタン */
.screen-footer {
  position: fixed;
  max-width: 640px;
  width: 100%;
  bottom: 0;
  z-index: 10000;
}
body {
  padding-bottom: 25vw;
  @media screen and (min-width: 640px) {
    padding-bottom: 200px;
  }
}