/*==================================================
FAQ PAGE
==================================================*/

.faq-page{

    padding:160px 0 160px;

}


/*==================================================
FAQ PAGE TITLE
==================================================*/

.faq-page .section-title{

    margin-bottom:56px;

}

.faq-page .section-en{

    margin-bottom:18px;

    font-size:1.1rem;

    font-weight:700;

    letter-spacing:.18em;

    color:var(--color-main);

}

.faq-page .hero-divider{

    width:90px;

    margin-bottom:28px;

}

.faq-page .section-title h2{

    font-size:clamp(2.6rem,5vw,4rem);

    line-height:1.2;

}

/*----------------------------------
Lead
-----------------------------------*/

.faq-page__lead{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

    line-height:2;

    color:var(--color-gray);

}


/*==================================================
CATEGORY
==================================================*/

.faq-category{

    margin-bottom:70px;

}

.faq-category:last-child{

    margin-bottom:0;

}

.faq-category__title{

    margin-bottom:24px;

    padding-left:16px;

    border-left:4px solid var(--color-main);

    font-size:1.6rem;

    font-weight:700;

}


/*==================================================
LIST
==================================================*/

.faq-page__list{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==================================================
ITEM
==================================================*/

.faq-page__item{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:12px;

    overflow:hidden;

    transition:.3s;

}

.faq-page__item[open]{

    border-color:var(--color-main);

    box-shadow:0 12px 35px rgba(0,0,0,.05);

}


/*==================================================
QUESTION
==================================================*/

.faq-page__question{

    display:flex;

    align-items:center;

    cursor:pointer;

    padding:24px 28px;

    list-style:none;

    font-weight:700;

    transition:.3s;

}

.faq-page__question::-webkit-details-marker{

    display:none;

}

.faq-page__question:hover{

    background:#fffaf4;

}


/* Q */

.faq-page__q{

    margin-right:16px;

    color:var(--color-main);

    font-weight:700;

}


/* ＋ */

.faq-page__question::after{

    content:"+";

    margin-left:auto;

    font-size:1.8rem;

    color:var(--color-main);

    transition:.3s;

}

.faq-page__item[open] .faq-page__question::after{

    transform:rotate(45deg);

}


/*==================================================
ANSWER
==================================================*/

.faq-page__answer{

    padding:0 28px 28px 60px;

}

.faq-page__answer p{

    line-height:2;

    color:var(--color-gray);

}


/*==================================================
CTA
==================================================*/

.faq-page__cta{

    margin-top:90px;

    padding:56px 40px;

    text-align:center;

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:16px;

}

.faq-page__cta-title{

    margin-bottom:20px;

    font-size:2rem;

    font-weight:700;

}

.faq-page__cta-text{

    max-width:620px;

    margin:0 auto 32px;

    line-height:2;

    color:var(--color-gray);

}

.faq-page__button{

    min-width:320px;

}


/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

.faq-page{

      padding:160px 0 100px;

}

.faq-page__lead{

    margin-bottom:50px;

    text-align:left;

}

.faq-category{

    margin-bottom:50px;

}

.faq-category__title{

    font-size:1.35rem;

}

.faq-page__question{

    padding:20px;

    font-size:1rem;

}

.faq-page__answer{

    padding:0 20px 20px 48px;

}

.faq-page__cta{

    margin-top:60px;

    padding:40px 24px;

}

.faq-page__cta-title{

    font-size:1.7rem;

    line-height:1.35;

}

.faq-page__button{

    width:100%;

    min-width:0;

    max-width:340px;

}

}


/*==================================================
FAQ PAGE TITLE
==================================================*/

.faq-page .section-title{

    margin-bottom:56px;

}



.faq-page .section-en{

    margin-bottom:20px;

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:.18em;

    color:var(--color-main);

}

.faq-page .hero-divider{

    width:90px;

    margin-bottom:28px;

}

.faq-page .section-title h2{

    font-size:1.7rem;

    line-height:1.2;

    margin-bottom:0;

}