@charset "utf-8";

header {
    &#title {
        .title {
            background:url(../img/opencampus/ttl_bg.jpg) no-repeat center center/cover;
            aspect-ratio:16/9;
            display:grid;
            align-items:center;
            justify-content:center;
            width: 100%;
            max-width: 1300px;
            h1 {
                width:80%;
                max-width:800px;
                margin:0 auto;
                transform:translateY(100%);
                img {
                    display:block;
                }
            }
        }
    }
}

#opencampus {
    .wrap {
        padding:90px 0;
        .contents {
            .enter {
                font-size:2.8rem;
                border:3px solid #ef7a10;
                border-radius:.2em;
                width:18em;
                height:2em;
                display:grid;
                align-items:center;
                justify-content:center;
                margin:0 auto;
                position:relative;
                &:not(:last-child) {
                    margin-bottom:3em;
                }
                &::after {
                    content:'';
                    width:.4em;
                    height:.4em;
                    border-right:3px solid #ef7a10;
                    border-top:3px solid #ef7a10;
                    position:absolute;
                    top:50%;
                    right:.5em;
                    transform:translate(0, -50%) rotate(45deg);
                }
            }
            h2 {
                font-size:4rem;
                line-height:1.5;
                text-align:center;
                color:#ef7a10;
                font-weight:500;
                margin-bottom:1em;
            }
            .schedule {
                width:80%;
                margin:0 auto 90px;
            }
            .img {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                grid-column-gap:3%;
                margin-bottom:60px;
            }
            h3 {
                color:#FFFFFF;
                background-color:#ef7a10;
                display:grid;
                align-items:center;
                justify-content:center;
                text-align:center;
                font-size:3.0rem;
                line-height:1.5;
                padding:.5em;
                max-width:24em;
                margin:0 auto 2em;
                font-family: "M PLUS 1p";
                font-weight:500;
                border-radius:8px;
                span {
                    font-size:1.8rem;
                }
            }
            .obj {
                display:block;
                max-width:250px;
                margin:0 auto 30px;
            }
        }
    }
}

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

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

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

    header {
        &#title {
            .title {
                background:url(../img/opencampus/ttl_bg.jpg) no-repeat center center/cover;
                aspect-ratio:16/9;
                display:grid;
                align-items:center;
                justify-content:center;
                width: 100%;
                max-width: 100%;
                h1 {
                    width:80%;
                    max-width:800px;
                    margin:0 auto;
                    transform:translateY(100%);
                    img {
                        display:block;
                    }
                }
            }
        }
    }
    
    #opencampus {
        .wrap {
            padding:60px 0;
            .contents {
                .enter {
                    font-size:clamp(1.8rem,5vw,2.4rem);
                    width:16em;
                    &:not(:last-child) {
                        margin-bottom:1.5em;
                    }
                }
                h2 {
                    font-size:2.6rem;
                }
                .schedule {
                    width:100%;
                    margin:0 auto 60px;
                }
                .img {
                    grid-template-columns:repeat(2,1fr);
                    grid-gap:10px;
                }
                h3 {
                    font-size:2.0rem;
                    span {
                        font-size:1.5rem;
                    }
                }
                .obj {
                    display:block;
                    max-width:250px;
                    margin:0 auto 30px;
                }
            }
        }
    }
    
}