@charset "utf-8";

header {
    &#title {
        .title {
            h1 {
                max-width:200px;
                margin:0 auto;
                padding:50px 0;
                img {
                    display:block;
                }
            }
        }
    }
}

#faq {
    .wrap {
        padding-bottom:90px;
        .contents {
            .pagemenu {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                align-items:center;
                grid-column-gap:3%;
                margin-bottom:60px;
                li {
                    a {
                        font-size:1.8rem;
                        color:#FFFFFF;
                        background-color:#4489be;
                        display:grid;
                        height:2em;
                        align-items:center;
                        justify-content:center;
                        padding-bottom:.2em;
                        border-radius:1em;
                    }
                }
            }
            h2 {
                font-size:3.6rem;
                line-height:1.5;
                text-align:center;
                color:#4489be;
                font-weight:500;
                margin-bottom:1em;
                & + dl {
                    border-top:2px dotted #999999;
                }
            }
            .faq {
                position:relative;
                .obj {
                    display:block;
                    width:18%;
                    position:absolute;
                    z-index:1;
                    right:0;
                    bottom:0;
                }
                &:not(:last-child) {
                    margin-bottom:50px;
                }
                dl {
                    border-bottom:2px dotted #999999;
                    font-size:1.8rem;
                    padding:1em;
                    dt,dd {
                        line-height:1.5;
                        display:grid;
                        grid-template-columns:1.2em 1fr;
                        grid-column-gap:.5em;
                        img {
                            transform:translateY(-.1em);
                        }
                    }
                    dt {
                        color:#4489be;
                        margin-bottom:.66em;
                    }
                    dd {
                        padding-left:1.33em;
                    }
                }
                &#faq1 {
                    .obj {
                        
                    }
                }
                &#faq2 {
                    .obj {
                        width:25%;
                    }
                }
                &#faq3 {
                    .obj {
                        width:20%;
                    }
                }
                &#faq4 {
                    .obj {
                        width:12%;
                        bottom:15%;
                        right:2%;
                    }
                }
            }
        }
    }
}

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

@media screen and (max-width:1024px){
    
    #faq {
        .wrap {
            padding-bottom:90px;
            .contents {
                .pagemenu {
                    grid-template-columns:repeat(4,auto);
                }
                h2 {
                    font-size:3.2rem;
                }
                .faq {
                    dl {
                        font-size:1.6rem;
                    }
                    &#faq1 {
                        .obj {
                            width:14%;
                        }
                    }
                    &#faq3 {
                        .obj {
                            width:18%;
                        }
                    }
                    &#faq4 {
                        .obj {
                            bottom:45%;
                        }
                    }
                }
            }
        }
    }
    
}

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

    header {
        &#title {
            .title {
                h1 {
                    max-width:160px;
                    padding:0;
                }
            }
        }
    }
    
    #faq {
        .wrap {
            padding-bottom:90px;
            .contents {
                .pagemenu {
                    grid-template-columns:repeat(2,1fr);
                    grid-gap:10px;
                    margin-bottom:40px;
                    li {
                        a {
                            font-size:1.4rem;
                        }
                    }
                }
                h2 {
                    font-size:2.4rem;
                }
                .faq {
                    position:relative;
                    .obj {
                        display:block;
                        width:18%;
                        position:absolute;
                        z-index:1;
                        right:0;
                        bottom:0;
                    }
                    &:not(:last-child) {
                        margin-bottom:50px;
                    }
                    dl {
                        font-size:1.4rem;
                        &:nth-last-child(2) {
                            dd {
                                padding-right:20%;
                            }
                        }
                    }
                    &#faq1 {
                        .obj {
                            width:18%;
                        }
                    }
                    &#faq2 {
                        .obj {
                            width:20%;
                        }
                    }
                    &#faq3 {
                        .obj {
                            width:20%;
                        }
                    }
                    &#faq4 {
                        .obj {
                            width:15%;
                            bottom:0%;
                        }
                    }
                }
            }
        }
    }
    
}