.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: -280px;
  }
}

.button-3 {
  margin-top: 15px;
  @media screen and (min-width: 640px) {
    margin-top: 20px;
  }
}

.button-4 {
  margin-top: -110px;
  @media screen and (min-width: 640px) {
    margin-top: -180px;
  }
}

.contents {
  margin-top: -100px;

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

.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;
  }
}



/*==================================================
スライダーのための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-item {
  margin: 10px;
  vertical-align: middle;
  background-color: transparent;
}

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

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

  gap: 8px;
  background-color: none;
  padding: 20px 10px;
  border-bottom: dotted 2px;
}
.faq-item .question .Q-num{
  display: flex;
  align-items: flex-end;
  margin: auto;
}

.faq-item .question .Q-num .Q{
  font-size: 1.2em;
  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: 30px;
}

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

.faq-item .question-text {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"; 
  font-size: 1.2em;
  flex: 1;
  margin: auto;
}

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

}



.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: 'Tsukushi A Round Gothic', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic"; 
  flex: 1;
  color: #000
}


.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;
}