@charset 'utf-8';

/* ナビゲーション：構造 */
div.main_nav input { display:none; }
div.main_nav label { position:fixed; z-index:12; top:5vh; right:1.25em; transform:translate(0,-50%); height:42px; width:42px; }
div.main_nav label span, div.main_nav label span::before, div.main_nav label span::after { display:inline-block; position:absolute; z-index:11; left:50%; height:2px; width:24px; border-radius:2px; transform:translate(-50%,-1px); transition:.3s; }
div.main_nav label span.menu_line { top:50%; }
div.main_nav label span.menu_line::before, div.main_nav label span.menu_line::after { content:''; }
div.main_nav label span.menu_line::before { top:10px; }
div.main_nav label span.menu_line::after { bottom:8px; }
div.main_nav ul { position:fixed; z-index:11; top:-50vh; left:0; width:100%; transition:.5s; }
#mnv_ck:checked ~ ul.nav_main { top:10vh; transition:.5s; }
#mnv_ck:checked ~ label span.menu_line { transition:.3s; visibility:hidden; }
#mnv_ck:checked ~ label span.menu_line::before { transition:.3s; top:50%; transform:translate(-50%,-50%) rotate(45deg); visibility:visible; }
#mnv_ck:checked ~ label span.menu_line::after { transition:.3s; bottom:50%; transform:translate(-50%,50%) rotate(-45deg); visibility:visible; }
div.main_nav ul li a { display:block; padding:1em 1.5em; }

/* ナビゲーション：色 */
div.main_nav label { background-color:#fff; }
div.main_nav label span.menu_line, div.main_nav label span.menu_line::before, div.main_nav label span.menu_line::after { background-color:#333; }
#mnv_ck:checked ~ label span.menu_line { background-color:#ffffff00; }
#mnv_ck:checked ~ label span.menu_line::before { background-color:#333; }
#mnv_ck:checked ~ label span.menu_line::after { background-color:#333; }
div.main_nav ul li a { border-bottom:1px solid #333; }
div.main_nav ul li a:link, div.main_nav ul li a:visited { background-color:#fff }
div.main_nav ul li a:active, div.main_nav ul li a:hover { background-color:#fcc800; }

@media only screen and (min-width:600px) {
/* タブレット */

}

@media only screen and (min-width:1025px) {
/* PC */

/* ナビゲーション：構造 */
div.main_nav label { display:none; }
div.main_nav ul { position:static; display:flex; justify-content:space-around; align-items:flex-start; }
div.main_nav ul li a { padding:.5em 4em; }

/* ナビゲーション：色 */
div.main_nav ul li a { border-bottom:none; border:1px solid #fff; }
div.main_nav ul li a:link, div.main_nav ul li a:visited { background-color:transparent; color:#fff; }
div.main_nav ul li a:active, div.main_nav ul li a:hover { background-color:rgba(0,0,0,0.25); color:#fcc800; }

}