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

/* ---------------------------------------------------
	Cnav、共通
------------------------------------------------------ */
.cnav { background: var(--color-bg); }
.cnav ul { flex-wrap: wrap; }

@media screen and (hover: hover) {
}

@media screen and (min-width: 601px) {
	.cnav ul li:nth-child(n+4) { width: calc((100% - 120px) / 4); margin-top: 60px; }
}

@media screen and (max-width: 600px) {
	.cnav ul li a span::after { margin-left: 8px;}
}

/* ---------------------------------------------------
	faqレイアウト
------------------------------------------------------ */
.faq_list { padding: 115px 0 0; }
.faq_list + .faq_list { padding: 85px 0 0; }
.faq_list:last-of-type { padding-bottom: 100px; }
.faq_list h2 { font-size: 30px; margin-bottom: 35px; }
.faq_list [class*="layout"] { line-height: 1.6; border-bottom: 1px solid #596269;}
.faq_list [class*="layout"] > dt { font-size: 18px; padding: 30px 40px 30px 65px; position: relative;}
.faq_list [class*="layout"] > dd { position: relative; padding: 0 40px 35px 65px; }
.faq_list [class*="layout"] > dd a { color: #cecece;}
.faq_list [class*="layout"] > dt:before,
.faq_list [class*="layout"] > dd:before { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; position: absolute; top: 32px; left: 10px; color: var(--color-gray03); font-size: 22px; letter-spacing: 0; line-height: 1; font-family: 'EB Garamond';}
.faq_list [class*="layout"] > dt::before { content: 'Q.'; background: none; }
.faq_list [class*="layout"] > dd::before { top: 3px; content: 'A.'; background: none; }
.faq_list [class*="layout"] > dt.acc_tit .icon { position: absolute; width: 23px; height: 23px; right: 5px; top: 50%; transform: translateY(-50%); }
.faq_list [class*="layout"] > dt.acc_tit .icon::after { content: ''; display: block; height: 1px; width: 100%; position: absolute; top: calc(50% - 0.5px); right: 0; background: #596269; }
.faq_list [class*="layout"] > dt.acc_tit .icon::before { content: ''; display: block; height: 100%; width: 1px; position: absolute; top: 0; right: calc(50% - 0.5px); background: #596269; transition: all .5s; }
.faq_list [class*="layout"] > dt.acc_tit.active .icon::before { transform: rotate(90deg); }

@media screen and (max-width: 600px){
  .faq_list { padding: 60px 0 0;}
  .faq_list + .faq_list { padding: 60px 0 0; }
  .faq_list:last-of-type { padding-bottom: 60px; }
  .faq_list h2 { font-size: 20px; margin-bottom: 10px; }
  .faq_list [class*="layout"] > dt:before,
  .faq_list [class*="layout"] > dd:before { width: 16px; height: 16px; font-size: 16px; top: 22px; left: 8px; font-size: 18px; }
  .faq_list [class*="layout"] > dd::before { top: 2px;}
  .faq_list [class*="layout"] > dt { padding: 20px 25px 20px 40px; font-size: 14px;}
  .faq_list [class*="layout"] > dd { padding: 0 0 20px 40px;}
  .faq_list [class*="layout"] > dt.acc_tit .icon { right: 3px; width: 15px; height: 15px; }
}


/* ---------------------------------------------------
	Sec07
------------------------------------------------------ */
#sec05 p + .cmn_list_data_01 { margin-top: 25px; }
.cmn_list_data_01 dl {
	display: grid; grid-template-rows: auto auto;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-flow: column; text-align: center;
}
.cmn_list_data_01 dt,
.cmn_list_data_01 dd { padding: 15px; box-sizing: border-box; border-left: 1px solid #596269; display: flex; align-items: center; justify-content: center;}
.cmn_list_data_01 dt:last-of-type,
.cmn_list_data_01 dd:last-of-type { border-right: 1px solid #596269;}
.cmn_list_data_01 dt { background: #cecece; border-top: 1px solid #596269; color: #313131;}
.cmn_list_data_01 dd { border-bottom: 1px solid #596269;}

@media screen and (max-width: 600px) {
  #sec05 p + .cmn_list_data_01 { margin-top: 15px; }
	.cmn_list_data_01 dl { display: flex; flex-wrap: wrap;}
	.cmn_list_data_01 dt,
	.cmn_list_data_01 dd { width: 50%; padding: 10px 5px; border-left: none; border-top: 1px solid #596269;}
	.cmn_list_data_01 dt:last-of-type,
	.cmn_list_data_01 dd:last-of-type { border-bottom: 1px solid #596269;}
	.cmn_list_data_01 dt:last-of-type { border-right: none;}
	.cmn_list_data_01 dd { border-bottom: none; border-right: 1px solid #596269;}
}