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

/* ---------------------------------------------------
	Box Lead
------------------------------------------------------ */
.box_lead{ text-align: center; padding: 100px 0;}
.box_lead .txt{ font-size: 18px; line-height: 2.1;}

@media screen and (max-width: 600px){
.box_lead{ text-align: left; padding: 40px 4%;}
.box_lead .txt{ font-size: 16px; line-height: 1.7;}
}


/* ---------------------------------------------------
	Box Button
------------------------------------------------------ */
.box_btn{ padding: 100px 0 150px; text-align: center;}
.box_btn .cmn_btn_01{ padding: 20px 90px;}

@media screen and (max-width: 600px){
.box_btn{ padding: 40px 0 80px;}
.box_btn .cmn_btn_01{ padding: 20px 50px;}
.box_btn .cmn_btn_01::before, 
.box_btn .cmn_btn_01::after{ bottom: 25px;}
.box_btn .cmn_btn_01::before{ width: 30px;}
}


/* ===================================================
faqレイアウト
=================================================== */
/*--------------------------------------------------------
	faqレイアウト共通スタイル※消さないで
--------------------------------------------------------*/
.faq_list { margin: 0;}
.faq_list [class*="layout"] { padding: 25px 0; 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; color: #fff; font-size: 18px; position: absolute; top: 20px; left: 30px;}
.faq_list [class*="layout"] > dt::before { content: 'Q'; background: #cb5219; color: #fff; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.faq_list [class*="layout"] > dd::before { content: 'A'; background: #ddd0c4; color: #000; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; }
.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: 600px){
  .faq_list { margin: 0;}
  .faq_list [class*="layout"] { padding: 15px 0;}
  .faq_list [class*="layout"] > dt:before,
  .faq_list [class*="layout"] > dd:before { width: 24px; height: 24px; font-size: 14px; position: absolute; top: 11px; left: 5px;}
  .faq_list [class*="layout"] > dt { padding: 12px 25px 10px 40px; font-size: 15px;}
  .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レイアウト選択スタイル※不要なスタイルは削除
--------------------------------------------------------*/

/* faq基本レイアウトtype
--------------------------------------------------------*/
/* ▼ faq基本レイアウトtype1 ここから --------------*/
.faq_list [class*="layout1"] { border-bottom: 1px solid #ccc;}
.faq_list [class*="layout1"] > dd { padding: 20px 40px 20px 80px; }
.faq_list [class*="layout1"] > dd:before { top: 15px;}
@media screen and (max-width: 600px){
  .faq_list [class*="layout1"] > dd { padding: 15px 0 10px 40px; font-size: 14px;}
}
/* ▲ faq基本レイアウトtype1 ここまで --------------*/


/* 開閉アイコンtype
--------------------------------------------------------*/
/* ▼ 開閉アイコンtype1 ここから --------------*/
.faq_list .faqicon_1 > dt.acc_tit::after { background-image: url("../img/common/ico_arrow_01.svg"); background-size: 20px; width: 20px; height: 10px; top: calc(50% - 5px); transition: transform .5s;}
.faq_list .faqicon_1 > dt.acc_tit.active::after { transform: rotate(180deg);}
@media screen and (max-width: 600px){
  .faq_list .faqicon_1 > dt.acc_tit::after { background-image: url("../img/common/ico_arrow_01.svg"); background-size: 10px; width: 10px; height: 5px; top: calc(50% - 2px);}
}
/* ▲ 開閉アイコンtype1 ここまで --------------*/