@charset "UTF-8";
/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* faq -------------------------------------*/
.main-ttl-box {
   background: url(../images/faq/main-ttl-bg.jpg) no-repeat center;
   background-size: cover;
   height: calc(772 / 1920 * 100vw);
}

#faq{  }
#faq .catelist{margin-bottom: -50px;display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;width: min(95%, 1280px);margin-inline: auto; }
#faq .catelist li{ display: inline-block; border: 1px #ccc solid; border-radius: 5px; margin-right: 10px; background: #333; }
#faq .catelist li a{ display: inline-block; padding: 10px 30px; line-height: 1; color: #fff; font-size: 20px; letter-spacing: 0.7px;}
#faq .catelist li a:hover{ text-decoration: none; background: #555; }

#faqcontents{width: min(95%, 1280px);margin-inline: auto;margin-bottom: 5rem;  }
#faqcontents .inner-Box{  }
#faqcontents .inner-Box h2{ padding-top: 100px; font-size: 24px; font-weight: 500; border-bottom: 3px solid #333; padding-bottom: 10px; margin-bottom: 30px; }
#faqcontents .inner-Box h2 span{font-size: 16px;position: relative;top: -5px;color: #ccc;font-weight: 500;display: inline-block;margin-right: 10px;}

#faq .accordion {margin: 3em auto; max-width: 60vw; }
#faq .toggle {display: none; }
#faq .option {position: relative; margin-bottom: 1em; }
#faq .title, .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
#faq .title {border: solid 1px #ccc;padding: 20px 40px 20px 20px;display: block;color: #333;font-weight: bold;}
#faq .title::after, .title::before {content: ""; position: absolute; right: 1.25em; top: 1.25em; width: 2px; height: 0.75em; background-color: #999; transition: all 0.3s; }
#faq .title::after {transform: rotate(90deg); }
#faq .content {max-height: 0; overflow: hidden; }
#faq .content p {margin: 0; padding: 0.5em 1em 1em; font-size: 0.9em; line-height: 1.5; }
#faq .toggle:checked + .title + .content {max-height: 500px; transition: all 1.5s; }
#faq .toggle:checked + .title::before {transform: rotate(90deg) !important; }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

/* faq -------------------------------------*/
.main-ttl-box {
   background: url(../images/faq/main-ttl-bg_sp.jpg) no-repeat center;
   background-size: cover;
   height: 66.43vw;
   margin-bottom: 5vw;
}
   
#faq{}
#faq .catelist{margin: 0 3vw 3.9vw;display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#faq .catelist li{display: inline-block;border: 0.1vw #ccc solid;border-radius: 0.7vw;margin-right: 1.3vw;background: #333;margin-bottom: 1vw;width: 45vw;text-align: center;}
#faq .catelist li a{display: inline-block;padding: 2.3vw 3.9vw;line-height: 1;color: #fff;font-size: 3.6vw;letter-spacing: 0.3vw;}
#faq .catelist li a:hover{ text-decoration: none; background: #555; }

#faqcontents{margin: 0 3vw;}
#faqcontents .inner-Box{  }
#faqcontents .inner-Box h2{padding-top: 8vw;font-size: 4.6vw;font-weight: 600;border-bottom: 0.4vw solid #333;padding-bottom: 1.3vw;margin-bottom: 3.9vw;}
#faqcontents .inner-Box h2 span{font-size: 3.6vw;position: relative;top: -0.7vw;color: #ccc;font-weight: 500;display: inline-block;margin-right: 1.3vw;}

#faq .accordion {margin: 3em auto; max-width: 60vw; }
#faq .toggle {display: none; }
#faq .option {position: relative; margin-bottom: 1em; }
#faq .title, .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
#faq .title {border: solid 0.1vw #ccc;padding: 3vw 9vw 3vw 3vw;display: block;color: #333;font-weight: bold;margin-bottom: 3vw;}
#faq .title::after, .title::before {content: "";position: absolute;right: 1.25em;top: 5vw;height: 3vw;background-color: #999;transition: all 0.3s;width: 0.4vw;}
#faq .title::after {transform: rotate(90deg); }
#faq .content {max-height: 0; overflow: hidden; }
#faq .content p {margin: 0;padding:  0;font-size: 0.9em;line-height: 1.5;}
#faq .toggle:checked + .title + .content {max-height: 65.2vw; transition: all 1.5s; }
#faq .toggle:checked + .title::before {transform: rotate(90deg) !important; }
}