/* 基本的なレイアウトとメニューバーのcssを記述する */
html{
    font-family: YuGothic;
}
body{
    display: grid;
    grid-template-areas:"menu_bar main";
    grid-template-columns: 27% 73%;
}
.menu_bar{
    position: fixed;
    grid-area: menu_bar;
    /* padding-top: 2em; */
    /* padding-left: 2em; */
    /* background: red; */
}
.main{
    grid-area: main;
    padding-top: 2em;
    top: 0;
    bottom: 0;
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
    /* height: 100vh; */
    /* background: green; */
}

/* menu bar */
.menu{
    display: inline;
    /* position: absolute; */
}
.menu_japanese{
    font-family: YuGothic;
	font-size:40%;
    text-align: left;
    margin-left: 10px;
}
.menu_alphabet{
    font-family:Courier New;
    font-size:80%;
}
#menu_bar{
    left: 3%;
    top: 5%;
    display: flex;
    /* display: none; */
    flex-direction: column;
    justify-content: space-between;
    height: 90vh;
    width: 12vw;
    /* background: red; */
}
.menu_content{
    border-bottom: solid gray 1px;
}

/* icons */
.icon{
    vertical-align: middle;
    margin-right: 1em;
    width: 1.5vw;
}
.icon:hover{
    cursor: pointer;
}

/* タグ */
.menu_bar a{
    text-decoration: none;
    color: black;
}
p{
    display: inline;
    font-family:Courier New,YuGothic;
}

.main a{
    text-decoration: none;
    color: rgb(25, 174, 233);
}

/* main */
.title{
    margin-top: 5vh;
    margin-bottom: 15vh;
}
#title1{
    font-size: 200%;
}
#title2{
    font-size: 100%;
}
.main_body{
    margin-left: 12vw;
    /* background: orange; */
}
.japanese_text{
    /* font-family:游ゴシック; */
    letter-spacing: 0.09em;
    font-size: 70%;
}
.alphabet_text{
    font-size: 90%;
}