@charset 'utf-8';
/* ======================================== 
ナビメニュー用CSS
========================================*/

/* ==================== ▽ 色設定CSS ▽ ==================== */

/* ハンバーガー */
.hnb { background-color:#000; }
.hnb span { background-color:#fff; }

/* メニュー */
nav ul.main_nav_list { background-color:#fffef5; }
nav ul.main_nav_list h2 { background-color:#d4cbe4; color:#fff; }

/* 動かす */
#m_nav_ck:checked ~ .hnb_bg { background-color:#d4cbe490; }

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

}

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

/* メニュー */
nav ul.main_nav_list { background-color:rgba(255,255,255,0.8); }
nav ul.main_nav_list li a:link, nav ul.main_nav_list li a:visited { color:inherit; }
nav ul.main_nav_list li a:active, nav ul.main_nav_list li a:hover { color:#c7a5cc; } 

}

/* ==================== ▽ 構造CSS ▽ ==================== */

/* ハンバーガー */
div.main_nav input { display:none; }
div.main_nav label { cursor:pointer; }
.hnb { border-radius:50%; display:inline-block; position:fixed; z-index:101; top:1em; right:1.25em; overflow:hidden; height:42px; width:42px; }
.hnb span { border-radius:3px; display:inline-block; position:absolute; transition:.3s; z-index:102; left:50%; height:3px; width:24px; }
.hnb span.m_line_center { top:50%; transform:translate(-50%,-50%); opacity:1; }
.hnb span.m_line_top { top:11px; transform:translate(-50%,0); }
.hnb span.m_line_bottom { bottom:10px; transform:translate(-50%,0); }
.hnb_bg { position:fixed; transition:.15s; top:0; left:0; opacity:0; height:100vh; width:100vw; z-index:-100; }

/* メニュー */
nav ul.main_nav_list { box-sizing:border-box; padding:50px 30px; position:fixed; z-index:100; top:0; right:-100vw; transition:.3s; height:100vh; width:85vw; }
nav ul.main_nav_list h2 { padding:.25em 1.25em; margin:0 0 .75em 0; }
nav ul.main_nav_list li { font-size:1.75em; margin:0 0 10px 0; position:relative; z-index:1; }
nav ul.main_nav_list li:last-child { margin:0; }
nav ul.main_nav_list li a { display:block; padding:.25em .5em .25em 1.25em; }
nav ul.main_nav_list li a::before { content:'＞'; margin:0 .25em 0 0; position:absolute; z-index:0; top:50%; left:0; transform:translate(0,-50%); }
nav ul.main_nav_list li a:link, nav ul.main_nav_list li a:visited { transition:.3s; margin:0; }
nav ul.main_nav_list li a:active, nav ul.main_nav_list li a:hover { transition:.3s; margin:0 0 0 .5em; } 

/* 動かす */
#m_nav_ck:checked ~ .hnb span.m_line_center { transition:.3s; left:-50px; opacity:0; }
#m_nav_ck:checked ~ .hnb span.m_line_top { top:50%; transition:.3s; transform:translate(-50%,-50%) rotate(45deg); }
#m_nav_ck:checked ~ .hnb span.m_line_bottom { top:50%; bottom:auto; transition:.3s; transform:translate(-50%,-50%) rotate(-45deg); }
#m_nav_ck:checked ~ .hnb_bg { opacity:1; transition:.15s; z-index:99; }
#m_nav_ck:checked ~ nav ul.main_nav_list { right:0; transition:.3s; }

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

/* メニュー */
nav ul.main_nav_list { padding:60px 50px; }
nav ul.main_nav_list h2 { padding:.5em 1.25em; margin:0 0 1em 0; } 

}

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

/* ハンバーガー */
.hnb, .hnb_bg { display:none; visibility:hidden; }

/* メニュー */
nav ul.main_nav_list { backdrop-filter:blur( 10px ); border-radius:3em; display:flex; justify-content:space-around; align-items:flex-start; padding:0 1.5em; top:auto; margin:auto; right:auto; left:50%; transform:translate(-50%,0); height:auto; max-width:1024px; width:auto; }
nav ul.main_nav_list h2 { display:none; }
nav ul.main_nav_list li { font-size:1.5em; display:flex; align-items:center; margin:0; top:auto; transform:translate(0,0); white-space: nowrap; }
nav ul.main_nav_list li a { padding:.5em .75em; }
nav ul.main_nav_list li::after { background-image:url("../img/menu/icon.svg"); background-position:center center; background-repeat:no-repeat; background-size:contain; content:''; display:block; height:24px; width:26px; }
nav ul.main_nav_list li:last-child::after { display:none; }
nav ul.main_nav_list li a::before { content:''; margin:0; position:static; top:0; transform:translate(0,0); }
nav ul.main_nav_list li a:link, nav ul.main_nav_list li a:visited { transition:.3s; margin:0; }
nav ul.main_nav_list li a:active, nav ul.main_nav_list li a:hover { transition:.3s; margin:0; } 

}

@media only screen and (min-width:1200px) {
/* ◆ ===== クソデカ幅 ===== ◆ */

/* メニュー */
nav ul.main_nav_list { max-width:1200px; }

}