@charset "utf-8";

.btn_container {
  background: #043454;
  padding-top: 50px;
  padding-bottom: 50px;
}
.btn {
  width: 85%;
}

.city {
  padding: 5.8vw;
  display: flex;
  flex-wrap: wrap;
  gap: 5.3vw;
  font-size: 4.5vw;
}

/* .title_box1 {
  background: #fff;
  border: solid #043454 1px;
  box-shadow: 4px 4px #2e9ddb;
  width: 85%;
  padding: 1rem 0;
  top: -3rem;
  right: 0;
  left: 0;
} */
.title_box2 {
  background: #fff;
  border: solid #043454 1px;
  box-shadow: 4px 4px #2e9ddb;
  width: 85%;
  padding: .6rem 0;
  top: -5rem;
  right: 0;
  left: 0;
}

.text_box {
  background: #fff;
  border: solid #043454 1px;
  width: 93%;
  padding: 4.5rem 1.8rem 3.3rem;
}

.free {
  background-image: url(assets/sp_free.png);
  background-repeat: no-repeat;
  background-size: 5.5rem;
  background-position: 4.8% 4%;
  margin: auto;
} 

.MEGURY {
  width: 60%;
}

.check_box {
  background: #fff;
  border: solid #043454 1px;
  box-shadow: 4px 4px #2e9ddb;
  width: 92%;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.check_box p {
  padding-left: 5rem;
  background: url(assets/check.png) no-repeat;
  background-size: 1.9rem;
  background-position: top .5rem left .4rem;
}

.LINEdekantan {
  width: 30rem;
}

.qa_box {
  background: #fff;
  border: solid #043454 1px;
  box-shadow: 4px 4px #2e9ddb;
  width: 92%;
  padding: 1.5rem 1.2rem;
  margin-bottom: 2rem;
  position: relative;
}
.qa_box h3 {
  text-align: start;
  padding-left: 2.6rem;
  background: url(assets/Q.png) no-repeat;
  background-size: 1.6rem;
  background-position: left .8rem;
}
.qa_box p {
  padding-top: .4rem;
}
.qa__child {
  padding-left: 2.6rem;
  background: url(assets/A.png) no-repeat;
  background-size: 1.6rem;
  background-position: 0% 3%;
  width: 85%;
  padding-top: 0;
  padding-bottom: 0;
    /* paddingの上下を0にする */
    max-height: 0;
    /* max-heightを0にする、レスポンシブ対応 */
    overflow: hidden;
    /* overflow: hidden;を付けるのがポイント */
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.qa__box {
  position: relative;
  z-index: 10;
}
.qa__box>dl>dt .crossBar {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
.qa__box>dl>dt .crossBar::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: center center;
  /* 中心を基準にtransform */
  transform: translateX(-50%) rotate(0deg);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.qa__box>dl>dt .crossBar::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #4D4D4D;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* アニメーション後のスタイル */
.qa__box>dl>dd.is-open {
  /* heightとpaddingをアニメーション */
  max-height: 40rem;
  padding-bottom: 4rem;
}
/* ＋ボタンのアニメーション */
.qa__box>dl>dt.is-open .crossBar::before {
  transform: translateX(-50%) rotate(90deg);
  /* 90度回転 */
}
.sp_button {
  width: 90%;
}

/* PC --------------------------------------------*/
@media screen and (min-width: 768px) {
  .btn {
    width: 45%;
  }
  .city {
    padding: 2.5rem 0;
    justify-content: center;
    gap: 7vw;
    font-size: 2rem;
  }
  .title_box1 {
    width: 66rem;
  }
  .title_box2 {
    width: 66rem;
    padding: 1rem 0;
    top: -3rem;
  }
  .title_box_title {
    font-size: 2.5rem;
  }
  .text_box {
    width: 76.8rem;
    padding: 7rem 8rem 5rem;
  }
  .graph {
    width: 60rem;
  }
  .free {
    background: none;
  }
  .free_pc {
    max-width: 80rem;
  }

  .MEGURY {
    width: 38rem;
    padding-top: 1.5rem;
  }
  .check_box {
    width: 70rem;
    border: solid #043454 2px;
    box-shadow: 5px 5px #2e9ddb;
    padding: 0;
  }
  .check_box p {
    padding: 2.4rem;
    padding-left: 10rem;
    background: url(assets/check.png) no-repeat;
    background-size: 3rem;
    background-position: top 2.5rem left 2rem;
    font-size: 2rem;
  }
  .qa_box {
    width: 70rem;
    border: solid #043454 2px;
    box-shadow: 5px 5px #2e9ddb;
    padding: 0;
  }

  .qa_box h3 {
    text-align: start;
    padding: 1.7rem;
    padding-left: 6.5rem;
    background: url(assets/Q.png) no-repeat;
    background-size: 2.6rem;
    background-position: top 2rem left 2rem;
    font-size: 2rem;
  }
  .qa__child {
    padding-left: 6.7rem;
    padding-right: 7rem;
    background: url(assets/A.png) no-repeat;
    background-size: 2.6rem;
    background-position: top 1rem left 2rem;
    width: 70rem;
  }
  .qa__child p {
    font-size: 1.7rem;
  }
  .pc_formbox {
    width: 76.8rem;
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .pc_people {
    background-image: url(assets/pc_people.png);
    background-repeat: no-repeat;
    background-size: 103rem;
    background-position: bottom;
  }

  .pc_padT60 {
    padding-top: 6rem;
  }
  .pc_padT80 {
    padding-top: 8rem;
  }
  .pc_padB100 {
    padding-bottom: 10rem;
  }
  .pc_padB60 {
    padding-bottom: 6rem;
  }
  .pc_padB15 {
    padding-bottom: 1.5rem;
  }
  .pc_pad60 {
    padding: 4rem 0 6rem;
  }
  .pc_pad90 {
    padding: 8rem 0 6.5rem;
  }
  .padT1 {
    padding-top: 1rem;
  }
  .padT25 {
    padding-top: 5rem;
  }
  .padT30 {
    padding-top: 8rem;
    padding-bottom: 1.7rem;
  }
  .padB38 {
    padding-bottom: 5rem;
  }

  .pc_s19 {
    font-size: 1.9rem;
  }
  .pc_s20 {
    font-size: 2.9rem;
  }
  .heading {
    font-size: 3.3rem;
  }
  .pc_lh30 {
    line-height: 3rem;
    letter-spacing: .18rem;
  }
}