@charset "utf-8";

/* -----------------------------------------------------------
    cmn-faq
-------------------------------------------------------------- */
.cmn-faq .faq-accordion .faq-box {
    border-bottom: #d1d1d1 solid 1px;
}

.cmn-faq .faq-accordion .title {
    color: var(--cmnblack);
    line-height: 1.5;
    letter-spacing: .05em;
    width: 100%;
    transition: .5s;
	font-size: 1.7rem;
}

.cmn-faq .faq-accordion .title:hover {
    opacity: .5;
}

.cmn-faq .faq-accordion .quest {
    display: flex;
    gap: 15px;
    position: relative;
    padding: 29px 20px 31px 70px;
    justify-content: space-between;
    width: 100%;
    transition: .5s;
}

.cmn-faq .faq-accordion .quest::before {
    content: "Q";
    font: 700 3.3rem /1 var(--en);
    color: #a4b4e3;
    display: block;
    position: absolute;
    height: 30px;
    line-height: 30px;
    left: 15px;
    top: 26px;
    text-align: center;
    width: 34px;
}

.cmn-faq .faq-accordion .quest:hover {
    cursor: pointer;
    color: #6c6d5d;
}

.cmn-faq .faq-accordion .answer {
    display: none;
    background: #fff;
    padding: 0 60px 0 70px;
    position: relative;
}

.cmn-faq .faq-accordion .answer::before {
    content: "A";
    font: 700 3.3rem /1 var(--en);
    color: var(--main);
    display: block;
    position: absolute;
    height: 30px;
    line-height: 30px;
    left: 17px;
    text-align: center;
    width: 34px;
    top: 32px;
}

.cmn-faq .faq-accordion .answer-txt {
    padding: 30px 0;
}

.cmn-faq .faq-accordion .answer-txt p {
    line-height: 1.8;
    letter-spacing: .07em;
}

.cmn-faq .faq-accordion .answer-txt a {
    color: var(--main);
    text-decoration: underline;
}

@media screen and (min-width: 769px){
    .cmn-faq .faq-accordion a[href^="tel:"] {
        color: #333!important;
        text-decoration: none;
    }
}

.cmn-faq .faq-accordion .answer-txt a:hover {
    text-decoration: none;
}

.cmn-faq .faq-accordion-icon {
    height: 24px;
    padding: 10px 0 0 0;
    position: relative;
    width: 24px;
}

.cmn-faq .faq-accordion .faq-section:first-of-type {
    margin: 20px 0 0 0;
}

.cmn-faq .faq-accordion-icon::before,
.cmn-faq .faq-accordion-icon::after {
    background-color: #aaa;
    content: "";
    height: 2px;
    position: absolute;
    width: 100%;
    transition: all .3s;
}
    
.cmn-faq .faq-accordion-icon::before {
    transform: rotate(0deg);
}

.cmn-faq .faq-accordion-icon::after {
    transform: rotate(90deg);
}

.cmn-faq .quest.faq-accordion-active .faq-accordion-icon::after {
    transform: rotate(180deg);
}

@media screen and (max-width: 768px){

    .cmn-faq .faq-accordion .faq-box a {
        position: relative;
    }

    .cmn-faq .faq-accordion .faq-box .title {
        font-size: 1.7rem;
        line-height: 1.7;
    }
    
    .cmn-faq .faq-accordion .quest {
        padding: 19px 8px 19px 40px;
    }

    .cmn-faq .faq-accordion .quest::before {
        font-size: 2.3rem;
        top: 21px;
        height: 28px;
        line-height: 28px;
        left: 4px;
        width: 28px;
    }

    .cmn-faq .faq-accordion .answer {
        padding: 23px 15px 8px 40px;
    }

    .cmn-faq .faq-accordion .answer::before {
        font-size: 2.3rem;
        top: 27px;
        height: 28px;
        line-height: 28px;
        left: 6px;
        width: 28px;
    }
    
    .cmn-faq .faq-accordion .answer-txt {
        padding: 0 0 20px 0;
        width: 100%;
    }
    
    .cmn-faq .faq-accordion .answer-txt p {
        font-size: 1.6rem;
        line-height: 2;
        letter-spacing: .07em;
    }
    
    .cmn-faq .faq-accordion-icon {
        height: 18px;
        padding: 15px 0 0 0;
        width: 18px;
    }
}