@charset "utf-8";

#voice {
    .wrap {
        .contents {
            max-width:1000px;
            .contents_inner {
                li {
                    &:not(:last-child) {
                        margin-bottom:50px;
                    }
                    a {
                        display:grid;
                        border:3px solid #002D82;
                        grid-template-columns:20% 1fr 30px;
                        align-items:center;
                        position:relative;
                        padding-right:20px;
                        & > img {
                            &:first-child {
                                height:100%;
                                aspect-ratio:1;
                                object-fit:cover;
                            }
                        }
                        .job {
                            position:absolute;
                            top:-3px;
                            right:-3px;
                            background-color:#002D82;
                            color:#FFFFFF;
                            padding:.5em 1em;
                        }
                        .voice_box {
                            display:grid;
                            justify-items:start;
                            padding:40px 30px;
                            h2 {
                                font-size:1.8rem;
                                background-color:unset;
                                border:none;
                                padding:0 2em .5em 0;
                                color:#002D82;
                                display:flex;
                                flex-wrap:wrap;
                                column-gap:1em;
                                border-bottom:2px solid #002D82;
                                margin-bottom:1em;
                            }
                            p {
                                line-height:1.5;
                            }
                        }
                    }
                }
            }
        }
    }
    &.single {
        .wrap {
            .contents {
                max-width:1200px;
                h2 {
                    &.ttl {
                        display:flex;
                        align-items:center;
                        gap:.3em .5em;
                        flex-wrap:wrap;
                        .job {
                            background-color:#FFFFFF;
                            color:var(--color_main);
                            font-size:.7em;
                            padding:0 .5em;
                        }
                    }
                }
                .contents_inner {
                    display:grid;
                    grid-template-columns:25% 1fr;
                    grid-column-gap:5%;
                    align-items:center;
                    & > img {
                        aspect-ratio:1;
                        object-fit:cover;
                        box-shadow:10px 10px 0 var(--color_main);
                    }
                    .info {
                        background-color:#EFEFEF;
                        font-size:1.8rem;
                        padding:2em;
                        border-radius:1em;
                        display:grid;
                        grid-template-columns:auto 1fr;
                        grid-row-gap:1em;
                        &:has(+ .faq) {
                            margin-bottom:30px;
                        }
                    }
                    .faq {
                        dt {
                            font-size:1.8rem;
                            line-height:1.5;
                            border-bottom:3px solid var(--color_main);
                            margin-bottom:1em;
                        }
                        dd {
                            line-height:1.8;
                            &:not(:last-child) {
                                margin-bottom:2em;
                            }
                        }
                    }
                }
                & > .back {
                    background-color:var(--color_main);
                    color:#FFFFFF!important;
                    text-decoration:none!important;
                    display:grid;
                    align-items:center;
                    justify-content:center;
                    height:2.2em;
                    width:8em;
                    margin:3em auto 0;
                }
            }
        }
    }
}

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

}

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

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

    #voice {
        .wrap {
            .contents {
                .contents_inner {
                    li {
                        &:not(:last-child) {
                            margin-bottom:20px;
                        }
                        a {
                            grid-template-columns:100px 1fr 20px;
                            padding-right:5px;
                            .job {
                                font-size:1.4rem;
                            }
                            .voice_box {
                                display:grid;
                                justify-items:start;
                                padding:40px 15px 15px;
                                h2 {
                                    font-size:1.5rem;
                                    margin-bottom:.5em;
                                }
                                p {
                                    line-height:1.5;
                                }
                            }
                        }
                    }
                }
            }
        }
        &.single {
            .wrap {
                .contents {
                    h2 {
                        &.ttl {
                            .job {
                                font-size:.8m;
                            }
                        }
                    }
                    .contents_inner {
                        grid-template-columns:1fr;
                        grid-row-gap:30px;
                        & > img {
                            max-width:300px;
                            margin:0 auto;
                        }
                        .info {
                            font-size:1.5rem;
                            padding:1.5em;
                            grid-row-gap:.66em;
                        }
                        .faq {
                            dt {
                                font-size:1.5rem;
                            }
                            dd {
                                font-size:1.4rem;
                            }
                        }
                    }
                }
            }
        }
    }

}