@charset "utf-8";

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

/* ---------------------------------------------------
	Sec_lead
------------------------------------------------------ */
#sec_lead { padding: 145px 0 40px; }

@media screen and (max-width: 600px) {
	#sec_lead { padding: 60px 0 20px; }
}

/* ---------------------------------------------------
	Faq_list
------------------------------------------------------ */
.faq_list { margin: 80px 0 0;}
.faq_list:last-of-type { margin-bottom: 145px; }
.faq_list .tit { font-size: 24px; margin-bottom: 45px; color: var(--color-beige); }
.faq_list [class*="layout"] { margin: 0 0 25px; line-height: 1.6;}
.faq_list [class*="layout"] > dt { font-size: 16px; padding: 10px 40px 10px 45px; position: relative; border-bottom: 1px solid #ccc; }
.faq_list [class*="layout"] > dd { position: relative; line-height: 2.2;}
.faq_list [class*="layout"] > dd a { text-decoration: underline;}
.faq_list [class*="layout"] > dt:before,
.faq_list [class*="layout"] > dd:before { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; font-size: 16px; position: absolute; top: 10px; left: 0; border-radius: 50%; letter-spacing: 0;}
.faq_list [class*="layout"] > dt::before { content: 'Q'; background: var(--color-green);}
.faq_list [class*="layout"] > dd::before { content: 'A'; background: #fff; border: 1px solid var(--color-green); color: var(--color-green); top: 27px;}
.faq_list [class*="faqicon"] > dt.acc_tit::after { content: ''; display: block; position: absolute; right: 20px; background-repeat: no-repeat; background-size: contain;}

@media screen and (max-width: 600px){
  .faq_list { margin: 40px 0 0;}
  .faq_list:last-of-type { margin-bottom: 80px; }
  .faq_list .tit { font-size: 20px; margin-bottom: 20px; }
  .faq_list [class*="layout"] { margin: 0 0 15px;}
  .faq_list [class*="layout"] > dt { line-height: 1.8;}
  .faq_list [class*="layout"] > dd { line-height: 1.8; }
  .faq_list [class*="layout"] > dt:before,
  .faq_list [class*="layout"] > dd:before { width: 24px; height: 24px; font-size: 16px; position: absolute; top: 11px; left: 0; font-family: serif;}
  .faq_list [class*="layout"] > dd::before { top: 14px;}
  .faq_list [class*="layout"] > dt { padding: 10px 25px 10px 40px; font-size: 15px;}
  .faq_list [class*="faqicon"] > dt.acc_tit::after { right: 10px;}
}

.faq_list [class*="layout2"] > dd { padding: 25px 20px 20px 45px; }
@media screen and (max-width: 600px){
  .faq_list [class*="layout2"] > dd { padding: 15px 0 10px 40px;}
}

.faq_list .faqicon_1 > dt.acc_tit::after { background-image: url(../../faq/img/arrow.svg); width: 10px; height: 8px; transform: rotate(180deg); top: calc(50% - 9px); transition: transform .5s;}
.faq_list .faqicon_1 > dt.acc_tit.active::after { transform: rotate(0deg);}
@media screen and (max-width: 600px){
  .faq_list .faqicon_1 > dt.acc_tit::after { width: 8px; height: 14px; top: calc(50% - 7px);}
}