@charset "utf-8";
/* ===================================================
	faq CSS
====================================================== */
/* ------------------------------------------------------ */
.lead_contact{ margin: 0 auto;}
.lead_contact a{
	display: block; margin: 0 auto; padding: 20px; width: 320px;
	color: #fff; font-size: 16px; background: #7e6b2e; box-sizing: border-box; transition: all .5s;
}

@media screen and (hover:hover) and (min-width: 601px) {
	.lead_contact a:hover{ text-decoration: none; opacity: .75;}
}
@media screen and (max-width: 600px) {
	.lead_contact{ margin: 5vw auto;}
	.lead_contact a{ padding: 4vw; width: 100%;}
}


.faq_col{ margin-bottom: 150px;}

@media screen and (max-width: 600px) {
	.faq_col{ margin-bottom: 10vw;}
}


/* ===================================================
cnav
=================================================== */
#faq .cnav li{ width: 31%;}


/* ===================================================
faqレイアウト
=================================================== */
/*--------------------------------------------------------
	faqレイアウト共通スタイル※消さないで
--------------------------------------------------------*/
.faq_list { margin: 80px 0 0;}
.faq_list [class*="layout"] { margin: 0 0 25px; line-height: 1.6;}
.faq_list [class*="layout"] > dt { font-size: 18px; padding: 20px 40px 20px 80px; position: relative;}
.faq_list [class*="layout"] > dd { position: relative;}
.faq_list [class*="layout"] > dt:before,
.faq_list [class*="layout"] > dd:before { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; position: absolute; top: 20px; left: 30px;}
.faq_list [class*="layout"] > dt::before { content: 'Q'; color: #fff; background: #7e6b2e;}
.faq_list [class*="layout"] > dd::before { content: 'A'; color: #000; background: #ebdcb2;}
.faq_list [class*="faqicon"] > dt.acc_tit::after { content: ''; display: block; position: absolute; right: 20px; background-repeat: no-repeat; background-size: contain;}
.lead_txt { text-align: center; line-height: 2; margin: 30px 0 60px;}
.lead_txt > a { display: block; width: 320px; margin: 20px auto 0; padding: 12px 0; color: #fff; background: #525252; transition: opacity .5s;}
.lead_txt > a:hover { text-decoration: none; opacity: 0.8;}

@media screen and (max-width: 1360px) {
	.faq_list{ padding-left: 50px;}
}
@media screen and (max-width: 600px){
  .faq_list { margin: 8vw 0 0; padding-left: 0;}
  .faq_list [class*="layout"] { margin: 0 0 15px;}
  .faq_list [class*="layout"] > dt:before,
  .faq_list [class*="layout"] > dd:before { width: 24px; height: 24px; font-size: 16px; position: absolute; top: 11px; left: 5px;}
  .faq_list [class*="layout"] > dt { padding: 10px 25px 10px 40px; font-size: 16px;}
  .faq_list [class*="faqicon"] > dt.acc_tit::after { right: 10px;}
  .lead_txt { margin: 30px 0 8vw; text-align: left;}
  .lead_txt > a { width: 250px; padding: 8px 0; text-align: center;}
}


/* faq基本レイアウトtype
--------------------------------------------------------*/
/* ▼ faq基本レイアウトtype1 ここから --------------*/
.faq_list [class*="layout1"] { border-bottom: 1px solid #ccc;}
.faq_list [class*="layout1"] > dd { padding: 15px 40px 20px 80px; font-size: 16px; line-height: 2;}
.faq_list [class*="layout1"] > dd p { margin-bottom: 25px;}
.faq_list [class*="layout1"] > dd p.tit,
.faq_list [class*="layout1"] > dd dl { margin-bottom: 10px;}
.faq_list [class*="layout1"] > dd dt span{ font-weight: bold;}
.faq_list [class*="layout1"] > dd:before { top: 15px;}
.faq_list [class*="layout1"] > dd em{ font-style: normal; font-weight: bold;}
.faq_list dd a{ text-decoration: underline;}
.faq_list dd a:hover{ text-decoration: none;}

@media screen and (max-width: 600px){
  .faq_list [class*="layout1"] > dd { padding: 10px 0 10px 40px;}
}
/* ▲ faq基本レイアウトtype1 ここまで --------------*/


/* 開閉アイコンtype
--------------------------------------------------------*/
/* ▼ 開閉アイコンtype1 ここから --------------*/
.faq_list .faqicon_1 > dt.acc_tit::after { background-image: url(../../faq/img/arrow_5.svg); width: 10px; height: 16px; transform: rotate(90deg); top: calc(50% - 9px); transition: transform .5s;}
.faq_list .faqicon_1 > dt.acc_tit.active::after { transform: rotate(270deg);}
@media screen and (max-width: 600px){
  .faq_list .faqicon_1 > dt.acc_tit::after { width: 8px; height: 14px; top: calc(50% - 7px);}
}
/* ▲ 開閉アイコンtype1 ここまで --------------*/