@charset "utf-8";
/*-------------------
#under-mvリセット
---------------------*/
#page-faq #under-mv{ min-height: 300px; margin-bottom: 40vh;}
#page-faq #under-mv .inner-wrap { padding: 20vh 3% 50px;}
#page-faq #under-mv .inner-wrap .txt{ max-width: 360px;}
#page-faq #under-mv .inner-wrap .txt span { margin-top: 20px;}
#page-faq #under-mv #page-main{ padding-top: 30px;}
/*-------------------
#faqArea
---------------------*/
#page-faq .section-faq{ width: 100%; display: block; padding: 5px 0 30px;}
#page-faq .section-faq h2 { width: 100%; display: block; position: relative; margin: 60px 0 20px; border-left: solid 6px #DDC399;}
#page-faq .section-faq h2 span{ display: inline-block; background: #fff; position: relative; line-height: 22px; padding:5px 15px; font-size: 20px; z-index: 10;}
#page-faq .section-faq#faq1 h2{ margin-top:50px; }
#page-faq .section-faq h2::after{ width: 100%; height: 1px; position: absolute; left: 0; top: 50%; margin-top: 2px; background: #aaa; border-radius: 10px; z-index: 1; content: "";}
/*h3*/
#page-faq .section-faq h3 { width: 100%; display: flex; align-items: center; margin: 70px 0 0; font-weight: 500;}
#page-faq .section-faq h3::before{ width: 8px; height: 8px; content: ""; border-radius: 100%; margin-right: 8px; border:solid 4px #111}
/*dl*/
#page-faq .section-faq dl{ width: 100%; display: block;} 
#page-faq .section-faq dl > * { width: 100%; display: block; position: relative; padding: 10px 25px 15px 54px;}
#page-faq .section-faq dl > * span{ width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-weight: 200; position: absolute; top: 10px; left: 10px; border-radius: 3px; font-size: 20px; font-family: 'Jost', sans-serif;}
/*dt*/
#page-faq .section-faq dl dt{ font-size: 18px; border-bottom: solid 1px #ddd; border-radius: 4px; margin-top: 20px; transition: 0.4s; padding-right: 40px; cursor: pointer;}
#page-faq .section-faq dl dt::after{ width: 14px; height: 14px; position: absolute; right: 15px; top: 50%; margin-top: -14px; border-right: solid 1px #aaa; border-bottom: solid 1px #aaa; content: "×"; transform: rotate(45deg); transition: 0.4s; color: #fff; font-weight: 200; font-size: 2px;}
#page-faq .section-faq dl dt.open::after{ border-right: solid 1px #fff; border-bottom: solid 1px #fff; transform: rotate(0); color: #777; font-size: 22px; margin-top: -22px;}
#page-faq .section-faq dl dt:hover{ box-shadow: 0 4px 10px rgba(0,0,0,.1);}
#page-faq .section-faq dl dt span{ border: solid 1px #fff; background: #fff; color: #111; margin-bottom: 2px; transition: 0.4s;}
#page-faq .section-faq dl dt span{}
#page-faq .section-faq dl dt span:hover{ background: #ddd;}
#page-faq .section-faq dl dt.open { color: #000;}
#page-faq .section-faq dl dt.open span, 
#page-faq .section-faq dl dt.open span:hover{ background: #bbb; color: #fff; border: solid 1px #ddd;}
/*dd*/
#page-faq .section-faq dl dd{ margin-bottom: 60px; line-height: 1.8em; display: none;}
#page-faq .section-faq dl dd span{ background:var(--create-color); color: #111;}
#page-faq .section-faq dl dd a{ text-decoration: underline; color: #007AC8; transition: 0.2s;}
#page-faq .section-faq dl dd a:hover{ text-decoration: none; color:#fa7a65;}
@media screen and (max-width: 1100px) {
#page-faq .section-faq#faq1 h2{ margin-top:0px; }
#faqArea .right { width: 100%; display: block; padding: 3%; margin: 0;}
}
@media screen and (max-width: 600px) {
#page-faq .section-faq h2 { margin: 20px 0 ;}
#page-faq .section-faq dl dt.open::after{ margin-top: -12px;}
#page-faq .section-faq dl dt{ font-size: 14px;}
#page-faq .section-faq dl dd{ font-size: 13px;}
}