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

/* faq -------------------------------------*/
#faq #faqcontents {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   margin-bottom: 80px;
   width: min(95%, 1100px);
   margin-inline: auto;
}
#faq #faqcontents .option{
   border-bottom: 1px solid #1D1D1F;
   cursor: pointer;
   padding: 40px 81px 40px;
}
#faq #faqcontents .option:first-child {
   border-top: 1px solid #1D1D1F;
}
#faq #faqcontents .title{
   font-weight: 500;
   font-size: 18px;
   letter-spacing: 0.05em;
   line-height: 1.7777;
   color: #3b8461;
   display: grid;
   gap: 40px;
   align-items: center;
   grid-template-columns: 60px 1fr;
   padding-right: 40px;
}
#faq #faqcontents .title span {
   font-size: 20px;
   letter-spacing: 0;
   text-align: center;
   color: #fff;
   background: #3A4F44;
   display: grid;
   place-content: center;
   width: 60px;
   height: 60px;
   border-radius: 50%;
}
#faq #faqcontents .content {
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.625;
   display: grid;
   grid-template-columns: 60px 1fr;
   gap: 40px;
   align-items: center;
}
#faq #faqcontents .content span{
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.05em;
   text-align: center;
   display: grid;
   place-content: center;
   background: #fff;
   border: 1px solid #3a4f44;
   color: #3B8461;
   width: 60px;
   height: 60px;
   border-radius: 50%;
}

#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: -2em;top: 0.9em;width: 0.115em;height: 1.7em;background-color: #1D1D1F;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: 29px 0 0;}
#faq .toggle:checked + .title::before {transform: rotate(90deg) !important; }

#faq #faqcontents .option {
   transition: background-color 0.3s ease;
}
#faq #faqcontents .option:has(.toggle:checked) {
   background-color: #fff;
}

}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* faq -------------------------------------*/
#faq #faqcontents {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   margin-bottom: 9.5vw;
   width: 89.37vw;
   margin-inline: auto;
}
#faq #faqcontents .option{
   border-bottom: 0.2vw solid #1D1D1F;
   cursor: pointer;
   padding: 4.2vw 0vw 4.2vw 3.6vw;
}
#faq #faqcontents .option:first-child {
   border-top: 0.2vw solid #1D1D1F;
}
#faq #faqcontents .title{
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.7142857;
   color: #3b8461;
   display: grid;
   gap: 2.5vw;
   align-items: center;
   grid-template-columns: 9.66vw 1fr;
   padding: 0 11vw 0 0;
}
#faq #faqcontents .title span {
   font-size:3.382vw;
   letter-spacing: 0;
   text-align: center;
   color: #fff;
   background: #3A4F44;
   display: grid;
   place-content: center;
   width: 9.66vw;
   height: 9.66vw;
   border-radius: 50%;
   position: relative;
   top: -0.5vw;
}
#faq #faqcontents .content {
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 1.8333;
   display: grid;
   grid-template-columns: 9.66vw 1fr;
   gap: 2.5vw;
}
#faq #faqcontents .content span{
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0;
   text-align: center;
   display: grid;
   place-content: center;
   background: #fff;
   border: 0.2vw solid #3a4f44;
   color: #3B8461;
   width: 9.66vw;
   height: 9.66vw;
   border-radius: 50%;
   position: relative;
   top: 0.5vw;
}

#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: 5.5vw;top: 0.95vw;width: 0.1em;height: 1.15em;background-color: #1D1D1F;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: 2.5vw 14vw 0 0;}
#faq .toggle:checked + .title::before {transform: rotate(90deg) !important; }

#faq #faqcontents .option {
   transition: background-color 0.3s ease;
}
#faq #faqcontents .option:has(.toggle:checked) {
   background-color: #fff;
}
#faq .util-btn {
   margin-inline: auto;
}
}