@charset "utf-8";

@media(max-width:900px){

/* ハンバーガーアイコン */
.toggle {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 7.5px;
    background: rgba(22, 38, 54, 0.9);
    border-radius: 2px;
    transition: all 500ms ease-in;
    span {
        background: #fff;
        width: 70%;
        height: 10%;
        display: block;
        position: absolute;
        top: 40%;
        left: 50%;
        border-radius: 2px;
        transition: all 500ms ease;
    }
}
.toggle span:nth-child(1) {
    transform: translate(-50%, -200%);
}
.toggle span:nth-child(2) {
    transform: translate(-50%, 0);
}
.toggle span:nth-child(3) {
    transform: translate(-50%, 200%);
}
.toggle::after {
    content: "menu";
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #fff;
    font-family: sans-serif;
    letter-spacing: 0.5px;
}



/* ハンバーガー開いたとき */
#open:checked+.toggle{
background: #234468;
}
#open:checked+.toggle span{
    top: 50%;
}
#open:checked+.toggle span:nth-child(1){
    transform: translate(-50%,-50%) rotate(-225deg) scaleX(1.3);
}
#open:checked+.toggle span:nth-child(2){
    transform: translate(-50%,-50%) scale(0);
}
#open:checked+.toggle span:nth-child(3){
    transform: translate(-50%,-50%) rotate(225deg) scaleX(1.3);
}
#open:checked+.toggle::after{
    display: none;;
}

/* メインメニュー */
.column_box{
    #main_menu_box{
        position: fixed;
        z-index: 100;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 50%;
        min-width: 325px;
        transition: all 500ms;
        background: #081d33f5;
        padding: 40px 0 0;
        overflow-y: scroll;
    }
    .contents_box{
        width: 100%;
    }
}
#open:checked ~ #main_menu_box{
    right: 0;
}
#main_menu{
    .to_top{
        .nav_logo{
            padding: 10px 1em;
        }
    }
    #page_link_list{
        .parent_item:nth-child(2), .parent_item:nth-child(7), .parent_item:nth-child(8), .parent_item:nth-child(9){
            background: #081627ea;
        }
        .parent_item:hover{
        background: #4e7fb3;
    }
    }
}

/* レイアウト調整 */
#top{
    .top_elements{
        flex-direction: column;
        justify-content: start;
        header{
            width: 300px;
            flex-direction: row;
            justify-content: start;
            .school_logo{
                margin: 0;
                width: 50px;
            }
            .school_name{
                small{
                    font-size: 1em;
                }
                br{
                    display: none;
                }
            }
        }
        .top_info_box{
            align-self: flex-end;
        }
    }

}
.sub_menu{
    padding: 0.5em 40px 0.5em 0;
}

}



@media(max-width:600px){

/* 学校概要 */
#enkaku{
    .enkaku_list{
        grid-template-columns: 1fr;
        gap: .5em;
    }
}
#kouka{
    .kouka_box{
        writing-mode: horizontal-tb;
        .song_title{
            text-align: center;
            padding-bottom: 0.25em;
            font-size: 1em;
        }
        .songwriter{
            text-align: center;
        }
        .lyrics{
            align-items: center;
        }
    }
}

/* 学校生活 */
#shoukai{
    i{
        display: block;
        text-align: center;
    }
    .Introduction_video_container{
        margin: 2rem auto;
        width: 100%;
        height:auto;
        aspect-ratio:16/9;
    }
}
#gyouji{
    .rough_schedul{
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* 本校を志望する方 */
#nyuushi_info{
    .nyuushi_category{
        grid-template-columns: 1fr;
    }
}
}