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

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

/* ハンバーガー */
.hnb_menu { background-color:#226a73; }
.hnb_menu span { background-color:#fff; }

/* メインナビ */
div.side_content { background-color:#d9d9d9; }
div.side_content ul li a { color:#226a73; }
div.side_content p.side_en_btn a { background-color:#ff9b9b; }
div.search input { background-color:#fff; border:1px solid #333; }

/* ナビ背景 */
.menu_bg { background-color:rgba( 0,0,0,0.7 ); }

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

}

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

/* メインナビ */
div.side_content { background-color:transparent; }

}

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

/* ハンバーガー */
.hnb_menu { border-radius:50%; cursor:pointer; display:inline-block; position:fixed; z-index:100; top:10px; right:10px; overflow:hidden; height:42px; width:42px; }
.hnb_menu span { border-radius:3px; display:inline-block; position:absolute; left:50%; transition:.3s; height:3px; width:22px; }
.hnb_menu span.top_line { top:25%; transform:translate(-50%,-25%);  }
.hnb_menu span.center_line { opacity:1; visibility:visible; top:50%; transform:translate(-50%,-50%);  }
.hnb_menu span.bottom_line { bottom:25%; transform:translate(-50%,25%); }

/* ハンバーガー動作 */
#hnb:checked ~ .hnb_menu span.top_line { top:50%; transform:translate(-50%,-50%) rotate(45deg); transition:.3s; width:25px; }
#hnb:checked ~ .hnb_menu span.center_line { opacity:0; visibility:hidden; left:100px; transform:translate(0,-50%); transition:.3s; }
#hnb:checked ~ .hnb_menu span.bottom_line { bottom:50%; transform:translate(-50%,50%) rotate(-45deg); transition:.3s; width:25px; }

/* メインナビ */
div.main_nav input { display:none; }
div.side_content { padding:25px 30px; position:fixed; z-index:99; top:0; right:-80vw; transition:.3s; height:100vh; max-width:80vw; }
div.side_content ul { margin:0 0 20px 0; }
div.side_content ul li { font-size:18px; margin:0 0 5px 0; }
div.side_content p { text-align:center; margin:0 0 15px 0; }
div.side_content p.side_en_btn a { display:block; padding:5px 16px; }
div.search { display:flex; justify-content:flex-start; align-items:center; margin:0 0 10px 0; }
div.search input { display:block; padding:10px; margin:0 10px 0 0; width:90%; }
div.side_sns { display:none; }

/* ナビ背景 */
.menu_bg { display:none; position:fixed; z-index:98; top:0; left:0; height:100vh; width:100vw; }

/* ナビを出す */
#hnb:checked ~ div.side_content { right:0; transition:.3s; }

/* 背景処理 */
#hnb:checked ~ .menu_bg { display:block; }

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

/* メインナビ */
div.side_content div.search, div.side_content p { max-width:300px; }

}

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

/* ハンバーガー */
.hnb_menu { display:none; }

/* メインナビ */
div.side_content ul li { font-size:16px; }
div.side_content { padding:0; position:static; z-index:1; height:auto; width:auto; }
div.side_sns { display:block; }

/* ナビ背景 */
.menu_bg { display:none; }

}