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

/* faq -------------------------------------*/
#faq{  }
#faq .catelist{margin-bottom: 10px;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;gap: 10px;}
#faq .catelist li{display: inline-block;border-radius: 5px;background: #D75B43;}
#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: #fff;color: #D75B43; }
#faq .system-contents {
   width: min(95%, 1280px);
   margin-inline: auto;
   padding:25px 0 121px;
}
#faq #faqcontents {
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   margin-bottom: 80px;
}
#faq #faqcontents .option{
   border-radius: 9px;
   background: #fff;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   padding: 20px 30px 20px;
   cursor: pointer;
}
#faq #faqcontents .title{
   font-weight: bold;
   font-size: 18px;
   line-height: 1.4583;
   letter-spacing: 0.05em;
   display: grid;
   gap: 20px;
   align-items: center;
   grid-template-columns: 50px 1fr;
   padding-right: 60px;
}
#faq #faqcontents .title span {
   font-weight: 500;
   font-size: 20px;
   text-align: center;
   color: #fff;
   background: #D75B43;
   display: grid;
   place-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
}
#faq #faqcontents .content {
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.875;
   display: grid;
   grid-template-columns: 50px 1fr;
   gap: 20px;
   align-items: flex-start;
}
#faq #faqcontents .content span.f-mon{
   font-weight: 500;
   font-size: 25px;
   text-align: center;
   color: #d75b43;
   display: grid;
   place-content: center;
   width: 40px;
   height: 40px;
   background: #fff;   
   border-radius: 50%;
   border: 1px solid #d75b43;
}

#faq .toggle {display: none; }
#faq .title, #faq .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
#faq .title::after, #faq .title::before {content: "";position: absolute;right: 0.75em;top: 0.1em;width: 0.15em;height: 1.7em;background-color: #D75B43;transition: all 0.3s;cursor: pointer;}
#faq .title::after {transform: rotate(90deg); }
#faq .content {max-height: 0; overflow: hidden; }
#faq .toggle:checked + .title + .content {max-height: 2000px;transition: all 1.5s;padding: 26px 0 0;}
#faq .toggle:checked + .title::before {transform: rotate(90deg) !important; }

.faq-term-title{ font-size: 26px; line-height: 1.6; letter-spacing: 1px; font-weight: bold;  margin: 80px 0 0 0; }


}

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

/* faq -------------------------------------*/
#faq{  }
#faq .catelist{
   margin: 0 3vw 10vw;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 2vw;
}
#faq .catelist li{display: inline-block;border-radius: 0.7vw;background: #D75B43;text-align: center;}
#faq .catelist li a{display: 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: #fff;color: #D75B43;}
#faq .system-contents {
   width: 89.375vw;
   margin-inline: auto;
}
#faq #faqcontents {
   display: grid;
   gap: 5.1vw;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   margin-bottom: 9vw;
}
#faq #faqcontents .option{
   border-radius: 3vw;
   background: #fff;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   padding: 5.6vw 3.6vw;
   cursor: pointer;
}
#faq #faqcontents .title{
   font-weight: bold;
   font-size:3.865vw;
   line-height: 1.625;
   letter-spacing: 0.05em;
   display: grid;
   gap: 2.7vw;
   align-items: flex-start;
   grid-template-columns: 5.8vw 1fr;
   padding: 0 7vw 0 0;
}
#faq #faqcontents .title span {
   font-weight: 500;
   font-size:2.898vw;
   text-align: center;
   color: #fff;
   background: #D75B43;
   display: grid;
   place-content: center;
   width: 5.8vw;
   height: 5.8vw;
   border-radius: 50%;
}
#faq #faqcontents .content {
   font-weight: 500;
   font-size:3.14vw;
   letter-spacing: 0.05em;
   line-height: 1.692307;
   display: grid;
   grid-template-columns: 5.8vw 1fr;
   gap: 2.7vw;
   align-items: flex-start;
}
#faq #faqcontents .content span.f-mon{
   font-weight: 500;
   font-size:2.898vw;
   text-align: center;
   color: #d75b43;
   display: grid;
   place-content: center;
   width: 5.8vw;
   height: 5.8vw;
   background: #fff;
   border-radius: 50%;
   border: 0.2vw solid #d75b43;
}

#faq .toggle {display: none; }
#faq .title, #faq .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; }
#faq .title::after, #faq .title::before {content: "";position: absolute;right: 3.5vw;top: 0.5vw;width: 0.5vw;height: 5vw;background-color: #D75B43;transition: all 0.3s;cursor: pointer;}
#faq .title::after {transform: rotate(90deg); }
#faq .content {max-height: 0; overflow: hidden; }
#faq .toggle:checked + .title + .content {max-height: 500px;transition: all 1.5s;padding: 3.9vw 6vw 0 0;}
#faq .toggle:checked + .title::before {transform: rotate(90deg) !important; }

.faq-term-title{ font-size:5.28vw; line-height: 1.6; letter-spacing: 0.2vw; font-weight: bold;  margin: 10vw 0 0 0; }

}