/* ==========================================================================
 $よくある質問
========================================================================== */

.tabArticle.qa-wrapper .tabSection {
  padding-bottom: 150px;
}


.tabArticle.tabArticle__form {
  margin-top: -130px;
}

a.under-line-fixed {
  padding-bottom: 2px;
}


.tab_contents {
 margin: 0 auto 100px;
 padding: 0px;
}

.tab_wrap {
 margin: 0 auto;
 opacity: 1;
 text-align: center;
}

.tab_wrap .tab_area {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.tab_lab1 ,
.tab_lab2 ,
.tab_lab3 ,
.tab_lab4 ,
.tab_lab5 { 
 display: inline-block;
 margin: 0;
 padding: 15px 43px;
 background: #fff;
 border-radius: 999px;
 border: 2px solid #000;
 color: #3e3a39;
 font-weight: 700;

}

.tab_lab1 {  }
.tab_lab2 {  }
.tab_lab3 {  }
.tab_lab4 {  }
.tab_lab5 {  }

#tab1:checked ~ .tab_area .tab_lab1, .tab_lab1:hover { background-color: rgba(var(--keyColor-base), 1); color: rgba(var(--color-text), 1); }
#tab2:checked ~ .tab_area .tab_lab2, .tab_lab2:hover { background-color: rgba(var(--keyColor-base), 1); color: rgba(var(--color-text), 1); }
#tab3:checked ~ .tab_area .tab_lab3, .tab_lab3:hover { background-color: rgba(var(--keyColor-base), 1); color: rgba(var(--color-text), 1); }
#tab4:checked ~ .tab_area .tab_lab4, .tab_lab4:hover { background-color: rgba(var(--keyColor-base), 1); color: rgba(var(--color-text), 1); }
#tab5:checked ~ .tab_area .tab_lab5, .tab_lab5:hover { background-color: rgba(var(--keyColor-base), 1); color: rgba(var(--color-text), 1); }


.panels { margin: 0px auto 0; }


.panels p {
  color: #3e3a39;
  line-height: 1.75;
}

.panels .text {
  text-align: left;
}

.panels a.under-line-fixed {
  border-bottom: solid 1px #3e3a39;
}

/*タブボタンとボックス連動*/
#tab1:checked~.panels #area1 {
 display: block;
}
#tab2:checked~.panels #area2 {
 display: block;
}
#tab3:checked~.panels #area3 {
 display: block;
}
#tab4:checked~.panels #area4 {
 display: block;
}
#tab5:checked~.panels #area5 {
 display: block;
}

/*チェックボックスとボックス非表示*/
.tab_contents input[name="check"] ,
.tab_contents input[type="radio"] { 
 display:none; 
}
.tab_contents .panel {
 display: none;
}

@media screen and (max-width: 1040px) {
.tab_contents {
 padding: 0 40px;
}
}



@media screen and (max-width: 737px) {
.tab_contents { padding: 0px; }
.panels { margin: 10px auto 0; }
 
.tab_lab1, .tab_lab2 {
 width: 413px;
 }
 
.tab_lab3, .tab_lab4, .tab_lab5{
 width: 195px;
 padding: 15px 5px;
 }
}

@media screen and (max-width: 540px) {
.tab_lab1, .tab_lab2, .tab_lab3, .tab_lab4, .tab_lab5 {
 width: 100%;
 margin: 0;
 line-height: 1.45;
 }
}


.answer-list {
  margin-left: 1.8vw;
}

.answer-list-item {
  line-height: 1.72;
  width: -moz-fit-content;
  width: fit-content;
  counter-increment: cnt;
  position: relative;
}

.answer-list-item::before {
  content: "(" counter(cnt) ")";
  display: inline-block;
  margin-left: -1.8vw;
  width: 1.8vw;
  position: absolute;
  top: 0;
  left: 0;
}

.answer-list-label {
  font-weight: 600;
}


/* ------------------------------------------------------------------------------
  アコーディオン
-----------------------------------------------------------------------------*/
/*チェックボックスを消す*/
.checkbox{
  display: none;
}
 
/*アコーディオンの大きさと位置調整*/
.accordion{
  margin: 0 auto 0;
  height: auto;
  overflow: hidden;
}
 
/*アコーディオンのラベルの設定*/
.accordion dl{
  font-size: 2.0rem;
  line-height: 1.5;
  text-align: left;
}
 
.accordion dt{
  margin: 0 0 5px;
  padding: 0px;
  background-color: rgba(var(--keyColor-base), 1);
  color: rgba(var(--color-text), 1);
  border-radius: 1.4641288433vw;
}
 
.accordion dt label{
  position: relative;
  display: block;
  padding: 25px 70px 25px 20px;
  cursor: pointer;
  font-weight: 700;
}

/*ラベル内の矢印の設定*/
.accordion dt label::after{
 content:'';
 display: block;
 width: 15px;
 height: 15px;
 border: 2px solid;
 border-color: #3e3a39 #3e3a39 transparent transparent;
 transform: translate(0,-50%) rotate(135deg);
 position: absolute;
 top: 42%;
 right: 30px;
 transition:.1s .1s;
}
 
/*表示される要素の基本設定*/
.accordion dd{
 height: 0;
 transition:.4s;
 overflow: hidden;
 padding: 0 80px;
 border-radius: 0;
}
 
/*ラベル内の矢印のアニメーション設定*/
.checkbox:checked ~ dl dt label::after{
 transform: translate(0,-50%) rotate(-180deg);
 transform: rotate(-45deg);
}
 
/*表示される要素のアニメーション設定*/
.checkbox:checked ~ dl dd{
  height: auto;
  margin: 0 0 5px;
  padding: 30px 80px;
  background: #dcdcdc;
  border: dashed 2px #3e3a39;
  border-radius: 1.4641288433vw;
}

@media screen and (max-width: 737px) {
.accordion dd{
 padding: 0 30px;
 }
.checkbox:checked ~ dl dd {
 padding:30px ;
 }
}

/* ------------------------------------------------------------------------------
  フォーム部分
-----------------------------------------------------------------------------*/
.formpage {
 color: #000;
}

.formpage .form-register {
 color: #000;
}

.formpage .form-register {
 width: 1000px;
}

.formpage .section-title {
 margin-bottom: 80px;
}
.formpage .section-title2 {
 text-align: center;
 display: block;
 font-size: 2.5rem;
 font-weight: 600;
 color: #000;
}

.formpage a span {
 border-bottom: solid 1px #3e3a39;
 padding-bottom: 0;
}

.formpage .form-register .item:first-child {
 padding:12.5px 0;
 border-top: solid 1px #3e3a39;
}

.formpage .form-register .item .input-box { width: 735px; }

/* .formpage .radio-label {
 display: inline-block;
 padding-top: 12.5px;
 padding-bottom: 12.5px;
 white-space: nowrap;
} */

.formpage .inq-link { 
  padding: 2.5622254758vw 0;
 }

/* .form .input-box-radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
} */

.formpage .btn.confirm:hover {
 opacity: .6;
}

.inputText {
  padding: 0;
  border: none;
}


/*確認画面*/
.formpage-comp .comp-wrap {
 border-radius: 0;
 padding-bottom: 50px;
}

.formpage-comf .form .item .label {
  margin-top: 0;
}

.formpage-comf .form .item:last-child {
  padding-bottom: 25px;
}

@media only screen and (max-width: 767px) {

  .form .input-box-radio {
    grid-template-columns: 1fr;
  }

  .accordion dt label {
    padding: 1rem 3.8rem 1.5rem 1.5rem;
  }

  .answer-list {
    margin-left: 5vw;
  }

  .answer-list-item::before {
    margin-left: -5vw;
    width: 5vw;

  }

}


@media screen and (max-width: 599px) {
  .formpage .section-title {
    margin-bottom: 5rem;
  }

  .formpage .inq-link {
    line-height: 1.5;
  }

  .accordion dt label::after {
    width: 16px;
    height: 16px;
    right: 1.5rem;
  }

}