@charset "utf-8";

#course{
    .wrap{
        .contents{
            .contents_inner{
                display: grid;
                grid-gap: 30px;
                margin-bottom: 90px;
                &:last-child{
                    margin-bottom: 0;
                }
                .detail{
                    padding: 30px;
                    background-color: #F7F7F7;
                    display: grid;
                    grid-gap: 1em;
                    dl{
                        display: grid;
                        grid-gap: 1.5em;
                        align-items: center;
                        &.ver1{                          
                            grid-template-columns: 7em 6em 1fr;
                        }
                        &.ver2{
                            grid-template-columns: 7em 6em 6em 1fr;
                        }
                        &.ver3{
                            grid-template-columns: auto 1fr;
                        }
                        dt{
                            background-color: #FFAB86;
                            color: #fff;
                            padding: 0.5em 1em;
                            text-align: center;
                            font-size: 1.5rem;
                            &.blue{
                                background-color: #4491DE;
                            }
                            &.green{
                                background-color: #32B487;
                            }
                            &.d_green{
                                background-color: #027A36;
                            }
                        }
                        .detail_inner{
                            ul{
                                padding: 0;
                                display: grid;
                                grid-template-columns: auto auto;
                                justify-content: start;
                                grid-gap: 1.5em;
                                li{
                                    position: relative;
                                    text-indent: 1.2em;
                                    &::before{
                                        content:"";
                                        background-color: #999;
                                        height: 0.7em;
                                        width: 0.7em;
                                        border-radius: 50px;
                                        position: absolute;
                                        left:0;
                                        top: 58%;
                                        transform: translateY(-50%);   
                                    }
                                }
                            }
                        }
                    }
                    &.ver2{
                        padding: 0;
                        background-color: #fff;
                        display: grid;
                        grid-template-columns: auto auto;
                        grid-gap: 1.5em;
                        justify-content: start;
                        align-items: center;
                        li{
                            background-color: #F474C2;
                            color: #fff;
                            padding: 0.5em 1.2em 0.6em;
                            text-align: center;
                            font-size: 1.5rem;
                            &.violet{
                                background-color: #745CF8;
                            }
                        }
                    }                   
                }
                .caution{
                    display: grid;
                    grid-gap: 0.7em;
                    margin-top: -1em;
                    li{
                        position: relative;
                        text-indent: 1.5em;
                        font-size: 0.9em;
                        &::before{
                            content:"※";
                            height: 1em;
                            width: 1em;
                            border-radius: 50px;
                            position: absolute;
                            left:-1.2em;
                            top: 58%;
                            transform: translateY(-50%);   
                        }
                    }
                }
                .course{
                    background-color: #8FBE10;
                    height: 125px;
                    position: relative;
                    dt{
                        z-index: 2;
                        .en{
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            font-size: 8rem;
                            color: #fff;
                            opacity: 0.5;
                            font-weight: 700;
                        }
                        .jp{
                            font-size: 2.8rem;
                            color: #fff;
                            text-align: center;
                            position: absolute;
                            top:50%;
                            transform: translateY(-50%);
                            left:45%;
                        }
                    }
                    &::after {
                        content: "";
                        display: block;
                        background-image: url(../img/course/course_01.jpg);
                        background-position: center;
                        background-size: cover;
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        width: 35%;
                        height: 100%;
                    }
                    &.course_02{
                        background-color: #EABC3F;
                        &::after {
                            background-image: url(../img/course/course_02.jpg);
                        }
                    }
                    &.course_03{
                        background-color: #6B91C2;
                        &::after {
                            background-image: url(../img/course/course_03.jpg);
                        }
                    }
                    &.course_04{
                        background-color: #C26BB1;
                        &::after {
                            background-image: url(../img/course/course_04.jpg);
                        }
                    }
                    &.course_05{
                        background-color: #027A36;
                        &::after {
                            background-image: url(../img/course/course_05.jpg);
                        }
                    }
                }
            }
        }
    }
}

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

}

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

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