@charset "utf-8";

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

#lead_col > div .cmn_tit01 { width: 100%; }
@media screen and (max-width: 600px){
  #lead_col { padding: 60px 0 50px;}
  #lead_col > div .cmn_tit01 .tit { font-size: 20px; }
}


/* ===================================================
faqレイアウト
=================================================== */
.faq_list { padding: 100px 0; }
.faq_list > div > dl { margin: 0 0 25px; line-height: 1.6; border-bottom: 1px solid #aeaeae; }
.faq_list > div > dl > dt,
.faq_list > div > dl > dd { display: flex; gap: 20px; position: relative; padding: 20px; }
.faq_list > div > dl > dt { font-size: 18px; }
.faq_list > div > dl > dt:before,
.faq_list > div > dl > dd:before { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; width: 35px; height: 35px; border-radius: 50%; margin-top: -0.2em; flex-shrink: 0; }
.faq_list > div > dl > dt::before { content: 'Q'; background: #5d6d90;}
.faq_list > div > dl > dd::before { content: 'A'; background: #9f8a57; top: 15px; }
.faq_list > div > dl > dt.acc_tit .arrow { align-content: center; margin: 0 0 0 auto; flex-shrink: 0; }
.faq_list > div > dl > dt.acc_tit .arrow::after { content: ''; display: block; background-repeat: no-repeat; background-size: contain; background-image: url(../img/arrow01_bk.svg); width: 13px; height: 9px; transition: transform .5s; }
.faq_list > div > dl > dt.acc_tit.active .arrow::after { transform: rotate(180deg);}

.faq_list > div > dl > dd :where(p, ul, dl) { margin-bottom: 30px; }
.faq_list > div > dl > dd > div { width: 100%;}
.faq_list > div > dl > dd .table_tit { margin-bottom: 15px;}
.faq_list > div > dl > dd [class^=table_layout] div { display: flex; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ccc; font-size: 16px; }
.faq_list > div > dl > dd [class^=table_layout] div :where(dt, dd)  { align-content: center; }
.faq_list > div > dl > dd .table_layout01 div :where(dt, dd) { flex: 1; }
.faq_list > div > dl > dd .table_layout02 div dt { width: 250px; flex-shrink: 0; }
.faq_list > div > dl > dd .table_layout02 div dd { flex-grow: 1; }
.faq_list > div > dl > dd ul li { padding-left: 1em; }
.faq_list > div > dl > dd ul li + li { margin-top: calc(0.5em * 1.05); }
.faq_list > div > dl > dd .date { display: inline-block; text-align: right; width: 4em; letter-spacing: 0; }
.faq_list > div > dl > dd .dot_list li { text-indent: calc(1em * -1.05); padding-left: calc(1em * 1.05); }
.faq_list > div > dl > dd .dot_list li::before { content: '・'; }
.faq_list > div > dl > dd p.caution,
.faq_list > div > dl > dd .caution li { text-indent: calc(1.5em * -1.05); padding-left: calc(1.5em * 1.05); font-size: 16px; }
.faq_list > div > dl > dd .caution li + li { margin-top: calc(0.5em * 1.05); }
.faq_list > div > dl > dd p.caution::before,
.faq_list > div > dl > dd .caution li::before { content: '※'; margin-right: 0.5em; }

_::-webkit-full-page-media, _:future, :root .faq_list > div > dl > dd .date {
  width: 4.7em;
}

@media screen and (max-width: 600px){
    .faq_list { padding: 0 0 60px; }
    .faq_list > div > dl { margin: 0 0 15px; }
    .faq_list > div > dl > dt:before,
    .faq_list > div > dl > dd:before { width: 26px; height: 26px; font-size: 15px; margin-top: -0.1em; }
    .faq_list > div > dl > dt,
    .faq_list > div > dl > dd { padding: 10px 4%; gap: 10px; }
    .faq_list > div > dl > dt { font-size: 16px;}
    .faq_list > div > dl > dt.acc_tit .arrow::after { width: 11px; height: 7px; top: calc(50% - 3.5px); right: 10px;}

    .faq_list > div > dl > dd :where(p, ul, dl) { margin-bottom: 20px; }
    .faq_list > div > dl > dd .table_tit { margin-bottom: 10px;}
    .faq_list > div > dl > dd [class^=table_layout] div { padding: 0 3% 10px; margin-bottom: 15px; font-size: 14px; }
    .faq_list > div > dl > dd [class^=table_layout] div dt { width: 100%; padding-bottom: 5px;}
    .faq_list > div > dl > dd span.view_sp { display: inline;}
    .faq_list > div > dl > dd .table_layout01 div,
    .faq_list > div > dl > dd .table_layout02.sp_layout div { flex-direction: column; }
    .faq_list > div > dl > dd .table_layout02:not(.sp_layout) div dt { width: 80px; }
    .faq_list > div > dl > dd ul li { padding-left: 10px; }
    .faq_list > div > dl > dd p.caution,
    .faq_list > div > dl > dd .caution li { font-size: 14px; }

}