@charset "utf-8";

#recruit {
    .wrap {
        .contents {
            position: relative;
            text-align: center;
           .angel_01{
                position: absolute;
                width: 80px;
                top:50px;
                right:50px;
            }
            .angel_02{
                position: absolute;
                width: 80px;
                bottom:80px;
                left:80px;
            }
            p{
                text-align: center;
                font-size:1.8rem;
                &.body{
                    display: inline;
                    color: #7abb3f;
                    font-size:3.2rem;
                    margin-bottom: 1em;
                    border-bottom: #7abb3f dotted 5px;
                    font-weight:600;
                }
            }
            img{
                width:100%;
                max-width: 800px;
                margin-bottom: 100px;
                margin-top: 50px;
            }
        }
    }
}
#about {
    .wrap {
        .contents {
            max-width: 1200px;
            .contents_inner{
                display: grid;
                grid-template-columns: 46% 39%;
                grid-column-gap: 5%;
                margin-top: 90px;
                align-items: center;
                p{
                    text-align: left;
                }
                h2{
                    display: inline-block;
                    color: #7abb3f;
                    font-size:3.2rem;
                    margin-bottom: 1em;
                }
            }
        }
    }
}
#job {
    .wrap {
        padding-top:90px;
        .contents {
            position: relative;
            max-width:1200px;
            h2 {
                margin-bottom:1em;
            }
            .angel_01{
                position: absolute;
                width: 80px;
                top:-40px;
                left:70%;
            }
            .job_box{
                background-color: #f7fcec;
                padding: 60px 90px;
                border-radius:90px;
                    h3{
                        background-color: #f388a6;
                        color: #fff;
                        font-size: 3.2rem;
                        text-align: center;
                        padding: 0.5em 0;
                        font-weight: 500;
                        border-radius: 10px;
                        margin-bottom: 70px;
                        line-height:1.5;
                    }
                    dl{
                        margin-bottom: 70px;
                    }
                    h4{
                        font-size: 2.4rem;
                        font-weight: 500;
                        position: relative;
                        text-indent: -1.2em;
                        padding-left:1.2em;
                        line-height: 1.6;
                        margin-bottom: 1em;
                        &::before{
                            content:"";
                            display: inline-block;
                            background-color: #7abb3f;
                            border-radius: 50%;
                            height: 0.5em;
                            width: 0.5em;
                            top:0.6em;
                            margin-right:.66em;
                            transform:translateY(-.1em);
                        }
                    }
                    .detail_box{
                        background-color: #fff;
                        padding: 70px;
                        margin-bottom: 70px;
                        border-radius:30px;
                        .detail_inner{
                            dl{
                                display: grid;
                                grid-template-columns: 10em 1fr;
                                grid-column-gap: 2em;
                                border-bottom: #7abb3f dotted 5px;
                                margin-bottom: 0!important;
                                dt{
                                    padding: 1.5em 0;
                                    line-height: 2;
                                }
                                dd{
                                    padding: 1.5em 0;
                                    line-height: 2;
                                    ul{
                                        li{
                                            line-height: 2;
                                            margin-bottom: 1.5em;
                                            &:last-child{
                                                margin-bottom: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
            }
            .training{
                .contents_inner{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    grid-column-gap: 50px;
                    dl{
                        dt{
                            background-color: #fff;
                            font-size: 1.8rem;
                            padding: 1em;
                            border-radius: 20px;
                        }dd{
                            line-height: 2;
                            padding: 1em;
                        }
                    }
                }
            }
            .message{
                .contents_inner{
                    display: grid;
                    /* grid-template-columns: 1fr 1fr; */
                    grid-column-gap: 50px;
                    align-items: center;
                    img {
                        border-radius:20px;
                    }
                }
            }
        }
    }
}

#faq {
    display: none;
}

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

}

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

    #recruit {
        .wrap {
            .contents {
                p{
                    font-size:1.6rem;
                }
                img{
                    margin-bottom: 50px;
                }
            }
        }
    }
    #about {
        .wrap {
            padding-top:0;
            .contents {
                .contents_inner{
                    grid-template-columns: 46% 1fr;
                    margin-top: 0px;
                    p{
                        text-align: left;
                    }
                    h2{
                        font-size:3.0rem;
                        margin-bottom: .5em;
                    }
                }
            }
        }
    }
    #job {
        .wrap {
            padding-top:60px;
            .contents {
                .job_box{
                    padding: 40px;
                    border-radius:60px;
                    h3{
                        font-size: 2.4rem;
                        margin-bottom:2em;
                    }
                    dl{
                        margin-bottom: 50px;
                    }
                    h4{
                        margin-bottom: .5em;
                    }
                    .detail_box{
                        padding: 30px 40px;
                        margin-bottom: 50px;
                    }
                }
                .training{
                    .contents_inner{
                        grid-column-gap: 4%;
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #recruit {
        .wrap {
            .contents {
                .angel_01{
                    width: 60px;
                    top:60px;
                    right:0px;
                }
                .angel_02{
                    width: 50px;
                    bottom:80px;
                    left:-10px;
                }
                p{
                    text-align: left;
                    font-size:1.5rem;
                    &.body{
                        font-size:2.0rem;
                    }
                }
                img{
                    margin-bottom: 30px;
                    margin-top: 30px;
                }
            }
        }
    }
    #about {
        .wrap {
            .contents {
                .contents_inner{
                    grid-template-columns: 1fr;
                    .detail {
                        display:contents;
                    }
                    h2{
                        font-size:2.0rem;
                        margin-bottom:.66em;
                    }
                    img {
                        grid-area:2/1/3/2;
                        margin-bottom:20px;
                    }
                }
            }
        }
    }
    #job {
        .wrap {
            padding-top:0;
            .contents {
                .angel_01{
                    width: 50px;
                    top:-20px;
                    left:auto;
                    right:0;
                }
                .job_box{
                    padding: 20px;
                    border-radius:30px;
                    h3{
                        font-size: min(4.2vw,2.2rem);
                        border-radius: 6px;
                        margin-bottom:1em;
                    }
                    dl{
                        margin-bottom: 30px;
                    }
                    h4{
                        font-size: 2.0rem;
                    }
                    .detail_box{
                        padding: 20px;
                        margin-bottom: 20px;
                        border-radius:20px;
                        .detail_inner{
                            dl{
                                grid-template-columns: 1fr;
                                border-bottom: #7abb3f dotted 3px;
                                dt{
                                    padding: 1em 0 0;
                                    line-height: 1.5;
                                    font-size:1.5rem;
                                    font-weight:600;
                                }
                                dd{
                                    padding: .5em 0 1em;
                                    font-size:1.4rem;
                                    line-height:1.6;
                                    ul{
                                        li{
                                            line-height: 1.6;
                                            margin-bottom: .5em;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .training{
                    .contents_inner{
                        grid-template-columns: 1fr;
                        grid-row-gap:30px;
                        dl{
                            dt{
                                font-size: 1.5rem;
                                padding: .66em;
                                border-radius: 10px;
                            }dd{
                                line-height: 1.5;
                                padding: 1em .5em 0;
                                font-size:1.5rem;
                            }
                        }
                    }
                }
                .message{
                    .contents_inner{
                        display: grid;
                        grid-template-columns: 1fr;
                        grid-row-gap:20px;
                        img {
                            margin:.5em auto 0;
                            max-width: 250px;
                        }
                    }
                }
            }
        }
    }
    
}