@charset "utf-8";
/* ===================================================
	FAQ Unique Style （モバイルファースト）
====================================================== */

.inner_sm { width: 92%; max-width: 1100px; margin: 0 auto; }

.lead{ text-align: left;}
.lead .txt{ font-size: 20px; line-height: 1.4; color: #2d1a13; padding: 0 0 20px 0;}

@media screen and (min-width: 601px) {
.lead{ text-align: center;}
.lead .txt{ font-size: 28px; line-height: 1.8; padding: 0 0 50px 0;}
}

/* ---------------------------------------------------
Contents Navigation
------------------------------------------------------ */
.cnav { font-size: 16px; text-align: center; margin: 0; }
.cnav li a { width: 100%; padding: 10px 2%; border: 1px solid #aaa; box-sizing: border-box; margin-bottom: 10px; display: block; }
.cnav li a:hover { text-decoration: none; background-color: #F4F4F4; }
.cnav li:last-child a{ margin-bottom: 0; }

@media screen and (min-width: 601px) {
.cnav { font-size: 18px; width: 100%; margin: 0 0 50px; display: flex; justify-content: space-between; }
.cnav li { width: 19%; margin: 0; }
.cnav li a { width: 100%; padding: 15px 2%;}
}

/* ---------------------------------------------------
Section FAQ
------------------------------------------------------ */
.sec_faq{ padding: 50px 0 0; width: 92%; margin: 0 auto;}
.sec_faq .tit_01{ font-size: 20px; padding: 0 0 10px 0;}
.sec_faq .tit_01::first-letter{ color: #95712f;}
.sec_faq dl{ border: solid 1px #aaaaaa; margin: 0 0 10px; width: 100%; box-sizing: border-box; position: relative;}
.sec_faq dl dt,
.sec_faq dl dd{ line-height: 1.7;}
.sec_faq dl dt{ background-image: url(/faq/img/ico_q_01.webp); background-repeat: no-repeat; background-position: 16px 18px; background-size: 24px; padding: 15px 35px 15px 50px; font-size: 16px; color: #40281e;}
.sec_faq dl dd{ padding: 0 15px 15px 15px; font-size: 14px;}
.sec_faq dl dt::after{ content: ""; display: block; width: 10px; height: 10px; border-right: solid 1px #95712f; border-bottom: solid 1px #95712f; transform: rotate(45deg); position: absolute; top: 20px; right: 15px; transition: all 0.5s;}
.sec_faq dl dt.active::after{ transform: rotate(-135deg); top: 25px;}
.sec_faq dl dd span.tit{ font-weight: bold;}

@media screen and (min-width: 601px) {
.sec_faq{ padding: 50px 0 0; max-width: 1100px;}
.sec_faq .tit_01{ font-size: 28px; padding: 0 0 20px 0;}
.sec_faq dl{ margin: 0 0 20px; width: 100%;}
.sec_faq dl dt,
.sec_faq dl dd{ line-height: 1.8;}
.sec_faq dl dt{ background-position: 25px 25px; background-size: 40px; padding: 30px 65px 30px 80px; font-size: 18px;}
.sec_faq dl dd{ padding: 0 30px 30px 80px; font-size: 16px;}
.sec_faq dl dt::after{ width: 12px; height: 12px; top: 38px; right: 39px;}
.sec_faq dl dt.active::after{ top: 38px;}
}

/* ---------------------------------------------------
 .info_col
------------------------------------------------------ */
.info_col { display: flex; justify-content: center; flex-wrap: wrap; margin: 40px auto 50px; }
.info_col .box_in { display: flex; flex-direction: column; align-items: center; background: #f4f0e3; width: 100%; }
.info_col .box_in::before { content: ''; width: 90%; height: 1px; background: #2d1a13; order: 1; margin: 15px 5%; }

/* faq */
.faq { width: 100%; text-align: center; padding: 8vw 5% 0; }
.faq_tit { font-size: 16px; color: #640e10; }
.faq a { display: block; width: 100%; font-size: 16px; color: #fff; border: none; text-align: center; margin: 3vw 0 0; }
.faq a:hover { opacity: 0.7; text-decoration: none; }
.faq p:last-of-type { font-size: 14px; color: #000; margin-top: 3vw; }

/* contact */
.contact { order: 2; width: 100%; padding: 0 5% 8vw; text-align: center; }
.contact_tit { font-size: 16px; padding-top: 0; }
.contact span.tel_link { display: inline-block; line-height: 1; padding: 5px 0; font-size: 25px; position: relative; }
.contact span.tel_link a { text-decoration: none; font-size: 30px; padding: 0 5px 0 7px; pointer-events: auto; color: #000; }
.contact span.tel_link a:hover { opacity: 0.7; }
.contact span.time { display: inline-block; font-size: 15px; }

@media screen and (min-width: 601px) {
	/* info_col */
	.info_col { margin: 100px auto 200px; justify-content: space-between; }
	.info_col .box_in { justify-content: space-between; flex-direction: row; }
	.info_col .box_in::before { content: ''; width: 1px; height: calc(100% - 80px); margin: 40px 0; }

	/* faq */
	.faq_tit { font-size: 22px; }
	.faq { width: 55%; max-width: 605px; padding: 40px 0;  }
	.faq a { width: 70%; max-width: 390px; margin: 15px auto 0; }
	.faq p:last-of-type { font-size: 18px; margin-top: 15px; }

	/* contact */
	.contact { width: 44%; max-width: 484px; padding: 0; }
	.contact_tit { font-size: 18px; padding-top: 3px;}
	.contact span.tel_link { padding: 15px 0 12px; }
	.contact span.tel_link a { padding: 0 5px; pointer-events: none; font-size: 40px; }
}