@charset "utf-8";
/* ===================================================
	FAQ CSS
====================================================== */

/* Common Local Navigation 01 Overwrite */
.cmn_lnav_01{ width: 90%; max-width: 1200px; margin: 0 auto; padding: 50px 0 90px; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.cmn_lnav_01 li{ width: 19%; margin: 0 0.5%; border: solid 1px #b0b0b0; box-sizing: border-box;}

@media screen and (max-width: 600px) {
.cmn_lnav_01{ width: 100%; padding: 20px 0 0; flex-wrap: wrap;}
.cmn_lnav_01 li{ width: 49%; margin: 0 0.5% 1%;}
}

/* ---------------------------------------------------
Section FAQ
------------------------------------------------------ */
.sec_faq{ padding: 100px 0; background-color: #f2f2f2;}
.sec_faq:nth-of-type(2n){ background-color: #fff;}
.sec_faq .cmn_tit_02{ align-items: center;}
.sec_faq dl{ border-bottom: solid 1px #ccc; padding: 40px 0; width: 90%; max-width: 1200px; margin: 0 auto;}
.sec_faq dl dt,
.sec_faq dl dd{ background-size: 20px; background-repeat: no-repeat; background-position: 0 8px; line-height: 2;}
.sec_faq dl dt{ background-image: url(../../faq/img/ico_q_01.webp); padding: 0 0 15px 40px; font-size: 18px;}
.sec_faq dl dd{ background-image: url(../../faq/img/ico_a_01.webp); padding: 0 0 0 40px;}
.sec_faq dl dd a{ text-decoration: underline;}
.sec_faq dl dd a:hover{ text-decoration: none;}

@media screen and (max-width: 600px) {
.sec_faq{ padding: 50px 0 5%;}
.sec_faq dl{ padding: 15px 0 0;}
.sec_faq dl dt,
.sec_faq dl dd{ background-position: 0 3px; line-height: 1.7; font-size: 15px;}
.sec_faq dl dt{ padding: 0 30px 15px 30px; position: relative;}
.sec_faq dl dt::before,
.sec_faq dl dt::after{ content: ""; display: block; width: 10px; height: 1px; background-color: #181818; position: absolute; top: 12px; right: 10px; transition: transform 0.5s;}
.sec_faq dl dt::after{ transform: rotate(90deg);}
.sec_faq dl dt.active::after{ transform: rotate(0deg);}
.sec_faq dl dd{ padding: 0 0 20px 30px;}
}

/* ---------------------------------------------------
Box Message
------------------------------------------------------ */
.box_msg{ padding: 80px 0 150px; text-align: center;}
.box_msg .txt{ padding: 0 0 30px; line-height: 2; font-size: 20px;}
.box_msg .btn{ display: inline-block;}

@media screen and (max-width: 600px) {
.box_msg{ padding: 30px 0 70px;}
.box_msg .txt{ padding: 0 5% 20px; line-height: 1.7; font-size: 18px; text-align: left;}
}