@charset 'utf-8';
/* ハンバーガーメニューCSS */

div.main_nav input.nav_menu { display:none; }
div.main_nav { position:relative; z-index:100; top:0; right:0; width:100%; overflow-x:hidden; }
label.b_hanb { position:fixed; z-index:1000; top:5px; right:5px; height:35px; width:35px; display:inline-block; }
label.b_hanb span, label.b_hanb div { display:inline-block; transition:.5s; position:absolute; top:50%; right:50%; transform:translate(50%, -50%); height:2px; width:17.5px; }
label.b_hanb div { background-color:transparent; transition:.5s; }
label.b_hanb div::before, label.b_hanb div::after { content:''; transition:.5s; display:inline-block; position:absolute; right:50%; transform:translate(50%, 0); height:2px; width:17.5px; }
label.b_hanb div::before { top:7px; } label.b_hanb div::after { bottom:7px; }
#nav_menu:checked ~ label.b_hanb span { opacity:0; transition:.5s; right:-150%; }
#nav_menu:checked ~ label.b_hanb div::before { left:0; top:0; opacity:1; transform:rotate(45deg); transition:.5s; }
#nav_menu:checked ~ label.b_hanb div::after { left:0; bottom:0; opacity:1; transform:rotate(-45deg); transition:.5s; }
div.main_nav nav { display:table; height:100vh; width:100%; position:fixed; top:0; transform:translate( 100%, -100vh ); z-index:999; transition:.5s; }
#nav_menu:checked ~  nav { transform:translate( 0%, 0vh ); transition:.5s; }
div.main_nav nav ul { display:table-cell; vertical-align:middle; }
div.main_nav nav ul li { text-align:center; font-size:1.5em; line-height:2; }

@media screen and (min-width: 769px) {
/* PC用レイアウト */

label.b_hanb { display:none; }
div.main_nav nav { display:block; position:static; transform:none; height:auto; width:auto; }
div.main_nav nav ul { display:block; }
div.main_nav nav ul li { text-align:left; font-size:1em; line-height:1.61; }

}