@charset "utf-8";
/* 基本CSS */
ul,ol,div,img { margin: 0px; padding: 0px; list-style: none; }
header { width: 100%; margin: 0 auto; padding: 6px 0 9px; background-color: #FFF; border-top: solid 5px #0072bc; position: fixed; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2); z-index: 100; }
header a { color: #4B4B4B; text-decoration: none; font-weight: bold; }

/* ヘッダーナビ全体設定 */
#navi { width: 98%; height: 60px; margin: 0 auto; background-color: #FFF; }
#navi input { display: none; }

/* メインロゴエリア */
.menu-left { float: left; line-height: 58px; }
.menu-left img { vertical-align: middle; margin-left: 10px; width: 80%; max-width: 250px; }

/* メインロゴエリア(768px-1000px) */
@media screen and (min-width:768px) and (max-width:1000px){
.menu-left img { vertical-align: middle; margin-left: 10px; width: 80%; max-width: 50px; }
}

/* メインロゴエリア(-) */
@media screen and (max-width: 768px) {
.menu-left { float: left; line-height: 60px; }
.menu-left img { vertical-align: middle; margin-left: 10px; width: 100%; max-width: 220px; }
}

/* メインメニューエリア */
#menu { float: right; margin-right: 0px; }
#menu li { position: relative; white-space: nowrap; }
#menu li a { display: block; }
#menu li i { margin-right: 4%; }
#menu > li { float: left; margin: 0 18px; line-height: 60px; font-size: 15.5px; }
/* メインロゴエリア(768px-1000px) */
@media screen and (min-width:768px) and (max-width:1100px){
#menu > li  { margin: 0 10px; font-size: 14.5px; }
}

/* パソコンでは V を非表示 */
#menu > li .pd { display: none;}
#menu-navibtn { display: none; cursor: pointer; cursor: hand; }

/* スマホ用 */
@media screen and (max-width: 768px) {

/* 基本非表示 */
#menu { display: none; }
#menu li { height: auto; width: 86%; margin-top: 10px; padding: 0px 20px; border-bottom: 1px solid #DDD; white-space: nowrap; }

/* V を表示 */
#menu > li .pd { display: inline-block; width: 100%; }
#menu li a { display: inline-block; }
#menu li:first-child { border-top: 1px solid #DDD; }
#menu li i { padding: 0px 6px; }

/* メニューを移動させないため */
#menu-navibtn:checked ~ #navi { position: fixed; overflow-y: scroll; overflow-x: hidden; height: 100%; }
}

/* ドロップダウンメニュー */
#menu li ul { position: absolute; }

/* 子メニュー */
#menu > li > ul li { font-size: 14.5px; display: none; padding: 0px 18px; background-color: #FFF; border-left: 1px solid #EEE; border-right: 1px solid #EEE; border-bottom: 1px solid #DDD; }
/* メインロゴエリア(768px-1000px) */
@media screen and (min-width:768px) and (max-width:1100px){
#menu > li > ul li { font-size: 14px; padding: 0px 18px; }	
}
#menu li ul li:first-child { border-top: 1px solid #EEE; }
#menu li ul li:last-child { border-bottom: 1px solid #EEE; }
#menu li ul li ul { top: -1px; left: 100%; }
#menu li ul li ul li ul, #menu li:nth-child(n+3) ul li ul { left: inherit; right: 100%; }
#menu > li > ul { margin-left: -20px; width: auto; }

/* パソコン用 */
@media screen and (min-width: 768px) {
#menu li:hover { background: #FFF; }
#menu > li:hover > ul > li,#menu li ul li:hover > ul > li { display: block; }

/* 階層がある場合の誘導の印 */
#menu li ul li ul:before,#menu li ul li ul li ul:before,#menu li:nth-child(n+3) ul li ul:before { position: absolute; top: 26px; content: ""; border: 4px solid transparent; display: block; }

/* 通常タイプ */
#menu li ul li ul:before { left: -10px; border-left-color: #666; }

/* 右側タイプ */
#menu li ul li ul li ul:before,#menu li:nth-child(n+3) ul li ul:before { right: -12px; border-right-color: #666; }
}

/* スマホ用 */
@media screen and (max-width: 768px) {

/* ハンバーガーメニュー表示 */
#menu-navibtn:checked ~ * #menu { display: block; margin-top: 30px; }
#menu-navibtn:checked ~ * #menu > li { max-height: inherit; overflow-y: visible; }
#menu > li ul { line-height: 50px; }
#menu > li > label:hover { cursor: pointer; cursor: hand; }
#menu li ul { position: static; }

/* 子メニュー */
#menu > li > ul { margin-left: initial; position: relative; }
#menu li ul li:first-child { border-top: 1px solid #DDD; }
#menu ul li:last-child { border-bottom: none; }
#menu > li > ul li { border-left: none; border-right: none; }
#menu li ul li ul { top: inherit; left: 0; }
#menu li ul li:last-child { border-bottom: none; }

/* 子メニューがクリックされた時 */
#menu input[type="checkbox"]:checked ~ label ~ ul > li { max-height: inherit; overflow-y: visible; display: block; }
.angletoggle:before { content: "\f107"; }
#navi input[type="checkbox"]:checked ~ label .pd .angletoggle:before { content: "\f106"; }
}

/* ハンバーガー(非表示) */
#navi #navibtn { display: none; }

/* ハンバーガー(768px以下で表示) */
@media screen and (max-width: 768px) {
#navi #navibtn { display: block; position: absolute; top: 16px; right: 10px; }
#navibtn span { display: block; width: 40px; height: 40px; background-color: #000; border-radius: 5px; }
#navibtn span span { display: block; overflow: hidden; width: 1px; height: 1px;}
#navibtn span span::before,#navibtn span span::after,#navibtn span::after { position: absolute; left:10px; content:""; width: 20px; height: 3px; background-color: #FFF; }

/* 三の↑ */
#navibtn span span::before { top:10px; }
#menu-navibtn:checked ~ #navi label#navibtn span span::before { top:19px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

/* 三の↓ */
#navibtn span::after { bottom:10px; background-color: #FFF; }
#menu-navibtn:checked ~ #navi label#navibtn > span::after { bottom:18px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }

/* 三の← */
#navibtn span span::after { top:18px; }
#menu-navibtn:checked ~ #navi label#navibtn span span::after { display: none; }
}