/*ナビメニューの画像と名前指定*/
.menu1 {
    
}
.menu1:hover {
    background-color: #f5f5f5;
}
.menu1A {
	border-bottom: 3px solid #1e90ff;
}

.menu2 {
    
}

.menu2:hover {
    
}
.menu2A {
	border-bottom: 3px solid #1e90ff;
}

.menu3 {
    
}

.menu3:hover {
    
}
.menu3A {
	border-bottom: 3px solid #1e90ff;
}

.menu4 {
    
}

.menu4:hover {
    
}
.menu4A {
	border-bottom: 3px solid #1e90ff;
}

.menu5 {
    
}

.menu5:hover {
    
}
.menu5A {
	border-bottom: 3px solid #1e90ff;
}

.menu6 {
    
}

.menu6:hover {
    
}
.menu6A {
	border-bottom: 3px solid #1e90ff;
}

.menu7 {
    background-image: url(../image/menu/m_6.png);
}

.menu7:hover {
    background-color: #f5f5f5;
}

.menu1Moji:before {
    content: "ホーム";
}

.menu2Moji:before {
    content: "入門";
}

.menu3Moji:before {
    content: "初級";
}

.menu4Moji:before {
    content: "中級";
}

.menu5Moji:before {
    content: "上級";
}

.menu6Moji:before {
    content: "実践";
}

.menu7Moji:before {
    content: "掲示板";
}
.menu1MojiE:before {
    content: "top";
}

.menu2MojiE:before {
    content: "beginners'";
}

.menu3MojiE:before {
    content: "intermediate";
}

.menu4MojiE:before {
    content: "advanced";
}

.menu5MojiE:before {
    content: "superlative";
}

.menu6MojiE:before {
    content: "practice";
}

.menu7MojiE:before {
    content: "BBS";
}

/*ドロップメニューの設定*/
.menu_second {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

/*position: absoluteで幅をMAX*/
/*基準は親ulのposition: relative;で設定*/
.menu_second {
    position: absolute;
    top: 68px;
    left: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 2%;
    background-color: #FFFFFF;
    border: 1px solid #dddddd;
    text-align: left;
    list-style-type: none;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

/*liに触れたら.menu_secondを変更*/
.main_menu li:hover + .menu_second {
    position: absolute;
    top: 68px;
    visibility: visible;
    opacity: 1;
}

/*選択中は保持*/
.menu_second:hover {
    position: absolute;
    top: 68px;
    visibility: visible;
    opacity: 1;
}

.menu_Sleft {
    float: left;
    width: 300px;
}

.menu_Scenter {
    float: left;
    width: 300px;
}

/*--右メニューのスタイル表示*/
.menuTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    background-color: #092846;
}

.menuTitle:hover {
    color: #ffffff;
    background-color: #000080;
    text-decoration: none;
}

.menuTitleSub {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
    background-color: #ffff00;
}

.menuTitleSub:hover {
    color: #ffffff;
    background-color: #f0e68c;
    text-decoration: none;
}
.menuTitleRED {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    background-color: #ff0000;
    margin: 0px;
}


.menu ul {
    margin: 0 auto;
    padding: 0px;
}

.menu li {
    list-style-type: none;
}

.menu li a {
    display: block;
    width: 96%;
    color: #333;
    background: #ffffff;
    line-height: 30px;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #999;
    padding-left: 10px;
}

.menu li a:hover {
    display: block;
    color: #333;
    background: #f1f1f1;
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
    text-decoration: none;
}

@media screen and (max-width:640px) {
    .menuTitle {
        width: 94%;
        height: 60px;
    }

    .menu li a {
        width: 96%;
        height: 40px;
        color: #333;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menu li a:hover {
        display: flex;
        justify-content: center;
        align-items: center;
    }
		
}

}