@charset "utf-8";

#faq {
    .wrap {
        .contents {
            .faq {
                border:1px solid #707070;
                font-size:1.6rem;
                &:not(:last-child) {
                    margin-bottom:30px;
                }
                dt {
                    display:grid;
                    grid-template-columns:auto 1fr auto;
                    align-items:center;
                    grid-column-gap:1.5em;
                    padding:1em;
                    cursor:pointer;
                    line-height:1.8;
                    &::before {
                        content:'Q';
                        font-size:2.2rem;
                        font-weight:600;
                        transform:translateY(-.1em);
                        align-self:start;
                    }
                    .arrow {
                        width:.5em;
                        height:.5em;
                        border-right:2px solid #000000;
                        border-bottom:2px solid #000000;
                        transform:rotate(45deg);
                        transition:.3s;
                    }
                    &.open {
                        background-color:#D3D3D3;
                        .arrow {
                            transform:rotate(-135deg);
                        }
                    }
                }
                dd {
                    display:none;
                    .answer {
                        display:grid;
                        grid-template-columns:auto 1fr;
                        align-items:start;
                        grid-column-gap:1.5em;
                        padding:1em;
                        &::before {
                            content:'A';
                            font-size:2.2rem;
                            font-weight:600;
                            transform:translateY(-.2em);
                            color:#FF8484;
                        }
                        line-height:1.8;
                        * {
                            line-height:1.8;
                        }
                    }
                }
            }
        }
    }
}

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

}

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

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

    #faq {
        .wrap {
            .contents {
                .faq {
                    font-size:1.4rem;
                    &:not(:last-child) {
                        margin-bottom:20px;
                    }
                    dt {
                        grid-column-gap:1em;
                        line-height:1.6;
                        &::before {
                            font-size:1.8rem;
                        }
                    }
                    dd {
                        display:none;
                        .answer {
                            grid-column-gap:1em;
                            &::before {
                                font-size:1.8rem;
                            }
                            line-height:1.6;
                            * {
                                line-height:1.6;
                            }
                        }
                    }
                }
            }
        }
    }
    
}