@charset "utf8";

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}
picture {
  display: block;
  height: 100%;
  margin: 0 auto;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  ._pc{ display: none; }
}

@media screen and (min-width: 768px) {
  ._sp{ display: none; }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(../image/bk.png);
  background-repeat: repeat-y;
  background-size: 750px;
  background-position: center 0;
}
@media screen and (max-width: 767px) {
  body {
    background-size: 100%;
  }
}

img {
  width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}
/*---------------------------
section
---------------------------*/
section {
  width: 100%;
}
/*---------------------------
article
---------------------------*/
.article {
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .article {
    width: 100%;
  }  
}
.fv {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .fv {
    width: 100%;
  }  
}
.fv-cta {
  position: absolute;
  bottom: 6%;
  right: 62px;
  width: 360px;
}
@media screen and (max-width: 767px) {
  .fv-cta {
    right: calc(29vw / 3.6);
    width: calc(175vw / 3.6);
  }  
}
.yamamoto {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .yamamoto {
    width: 100%;
  }  
}
.yamamoto-btn {
  position: absolute;
  bottom: 5.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
}
@media screen and (max-width: 767px) {
  .yamamoto-btn {
    width: calc(288vw / 3.6);
  }  
}
.item-01 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-01 {
    width: 100%;
  }  
}
.item-01_cta {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 632px;
}
@media screen and (max-width: 767px) {
  .item-01_cta {
    width: calc(305vw / 3.6);
  }  
}
.item-02 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-02 {
    width: 100%;
  }  
}
.item-03 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-03 {
    width: 100%;
  }  
}
.item-04 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-04 {
    width: 100%;
  }  
}
.item-05 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-05 {
    width: 100%;
  }  
}
.item-05-btn {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 563px;
}
@media screen and (max-width: 767px) {
  .item-05-btn {
    width: calc(270vw / 3.6);
  }  
}
.item-06 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-06 {
    width: 100%;
  }  
}
.item-07 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-07 {
    width: 100%;
  }  
}
.item-08 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-08 {
    width: 100%;
  }  
}
.item-09 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-09 {
    width: 100%;
  }  
}
.item-10 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-10 {
    width: 100%;
  }  
}
.item-11 {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-11 {
    width: 100%;
  }  
}
.item-12 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-12 {
    width: 100%;
  }  
}
/* card */
.card_1 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .card_1 {
    width: 100%;
  }
}
.card_1_link_1 {
  position: absolute;
  bottom: 0.636%;
  left: 50%;
  transform: translateX(-50%);
  width: 562px;
}
@media screen and (max-width: 767px) {
  .card_1_link_1 {
    width: calc(270vw / 3.6);
  }
}
.card_1_link_2 {
  position: absolute;
  top: 9.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
}
@media screen and (max-width: 767px) {
  .card_1_link_2 {
    width: calc(290vw / 3.6);
  }
}
.card_2 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .card_2 {
    width: 100%;
  }
}
.card_2_link_1 {
  position: absolute;
  bottom: 1.04%;
  left: 50%;
  transform: translateX(-50%);
  width: 577px;
}
@media screen and (max-width: 767px) {
  .card_2_link_1 {
    width: calc(280vw / 3.6);
  }
}
.card_2_link_2 {
  position: absolute;
  top: 21.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 577px;
}
@media screen and (max-width: 767px) {
  .card_2_link_2 {
    width: calc(280vw / 3.6);
  }
}
.card_3 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .card_3 {
    width: 100%;
  }
}
.card_3_link_1 {
  position: absolute;
  bottom: 1.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 577px;
}
@media screen and (max-width: 767px) {
  .card_3_link_1 {
    width: calc(280vw / 3.6);
  }
}
.card_3_link_2 {
  position: absolute;
  top: 21.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 577px;
}
@media screen and (max-width: 767px) {
  .card_3_link_2 {
    width: calc(280vw / 3.6);
  }
}
.card_4 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .card_4 {
    width: 100%;
  }
}
.card_4_link {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  width: 577px;
}
@media screen and (max-width: 767px) {
  .card_4_link {
    width: calc(280vw / 3.6);
  }
}
.card_5 {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .card_5 {
    width: 100%;
  }
}
.card_5_link {
  position: absolute;
  top: 47.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 577px;
}
@media screen and (max-width: 767px) {
  .card_5_link {
    width: calc(280vw / 3.6);
  }
}

/* comparison table */
.comparison_table_wraper {
  display: flex;
  width: 750px;
  padding: 0 0 0 16px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #002d72;
}
@media screen and (max-width: 767px) {
  .comparison_table_wraper {
    width: 100%;
  padding: 0 0 0 calc(8vw / 3.6);
  }
}
.comparison_table_head {
  width: 50%;
}
.comparison_table_wrap {
  width: 100%;
  padding-right: 16px;
  overflow-x: scroll;
  overflow-y: hidden;
  overscroll-behavior: contain;
}
@media screen and (max-width: 767px) {
  .comparison_table_wrap {
    padding-right: calc(8vw / 3.6);
  }
}
.comparison_table {
  position: relative;
  width: 519%;
  margin: 0;
}
.reservation_1 {
  position: absolute;
  width: 435px;
  top: 2400px;
  left: 27px;
}
@media screen and (max-width: 767px) {
  .reservation_1 {
    width: calc(210vw / 3.6);
    top: calc(1150vw / 3.6);
    left: calc(12vw / 3.6);
  }
}
.reservation_2 {
  position: absolute;
  width: 435px;
  top: 2400px;
  left: 527px;
}
@media screen and (max-width: 767px) {
  .reservation_2 {
    width: calc(210vw / 3.6);
    top: calc(1150vw / 3.6);
    left: calc(251vw / 3.6);
  }
}
.reservation_3 {
  position: absolute;
  width: 435px;
  top: 2400px;
  left: 1018px;
}
@media screen and (max-width: 767px) {
  .reservation_3 {
    width: calc(210vw / 3.6);
    top: calc(1150vw / 3.6);
    left: calc(488vw / 3.6);
  }
}
.reservation_4 {
  position: absolute;
  width: 435px;
  top: 2400px;
  left: 1520px;
}
@media screen and (max-width: 767px) {
  .reservation_4 {
    width: calc(210vw / 3.6);
    top: calc(1150vw / 3.6);
    left: calc(726vw / 3.6);
  }
}
.reservation_5 {
  position: absolute;
  width: 435px;
  top: 2400px;
  left: 2014px;
}
@media screen and (max-width: 767px) {
  .reservation_5 {
    width: calc(210vw / 3.6);
    top: calc(1150vw / 3.6);
    left: calc(965vw / 3.6);
  }
}

/* アコーディオンカスタム */

.accordion-wrap {
  width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .accordion-wrap {
    width: 100%;
  }
}
.accordion-item {
  margin: 0 0 20px;
}
@media screen and (max-width: 767px) {
  .accordion-item {
    margin: 0 0 calc(8vw / 3.6);
  }
}
.question_1 {
  height: 148px;
  background-image: url('../image/btn-01_on.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_1 {
    height: calc(71vw / 3.6);
  }
}
.question_2 {
  height: 148px;
  background-image: url('../image/btn-02_off.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_2 {
    height: calc(71vw / 3.6);
  }
}
.question_3 {
  height: 148px;
  background-image: url('../image/btn-03_off.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_3 {
    height: calc(71vw / 3.6);
  }
}
.question_4 {
  height: 148px;
  background-image: url('../image/btn-04_off.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_4 {
    height: calc(71vw / 3.6);
  }
}
.question_5 {
  height: 148px;
  background-image: url('../image/btn-05_off.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_5 {
    height: calc(71vw / 3.6);
  }
}
.question_6 {
  height: 148px;
  background-image: url('../image/btn-06_off.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_6 {
    height: calc(71vw / 3.6);
  }
}
.question_7 {
  height: 148px;
  background-image: url('../image/btn-07_off.png?261020');
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .question_7 {
    height: calc(71vw / 3.6);
  }
}
.__toggle:checked + .__Label.question_1 {
  background-image: url('../image/btn-01_off.png?261020');
}
.__toggle:checked + .__Label.question_2 {
  background-image: url('../image/btn-02_on.png?261020');
}
.__toggle:checked + .__Label.question_3 {
  background-image: url('../image/btn-03_on.png?261020');
}
.__toggle:checked + .__Label.question_4 {
  background-image: url('../image/btn-04_on.png?261020');
}
.__toggle:checked + .__Label.question_5 {
  background-image: url('../image/btn-05_on.png?261020');
}
.__toggle:checked + .__Label.question_6 {
  background-image: url('../image/btn-06_on.png?261020');
}
.__toggle:checked + .__Label.question_7 {
  background-image: url('../image/btn-07_on.png?261020');
}
._clear {
  visibility: hidden;
}
/*---------------------------
アコーディオン
---------------------------*/
.__toggle {
  display: none;
}

.__Label {
  display: block;
  cursor: pointer;
}

.__Label,
.__content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.__Label {
  transition: all 0.1s ease-out;
}
.__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out; /* max-heightをスムーズに変化 */
}

/* 開閉時のスタイル */
.__toggle:checked + .__Label + .__content {
  max-height: 4000px; /* 最大の高さを十分に大きく設定 */
}
.__toggle.is-open + .__Label + .__content {
  max-height: 4000px; /* 最大の高さを十分に大きく設定 */
}
.__toggle.is-open:checked + .__Label + .__content {
  max-height: 0;
}
