﻿@charset "utf-8";

@media all and (min-width:751px) {
.hu_nv {display: none;}
.hu_nvwr {display: none;}
#spfnavi{display: none;}
#spfnavi2{display: none;}
}

@media all and (max-width:750px) {
.hu_nvwr.open {display: block;}
.hu_nvwr.close {display: none;}
.hu_nvwr {display: none;position: fixed;left: 0;top: 0;z-index: 2;background-color: #8c63a9;width: 100%;height: 100%;}
.hu_nvwr .mnavi {height: 100%;position: relative;overflow-x: hidden;overflow-y: auto;}
body.fixed {position: fixed;width: 100%;}
	
.hu_nv {z-index: 10;position: fixed;width: 36px;height: 28px;cursor: pointer;right: 15px;top: 15px;text-decoration: none;}
.hu_nv::after {content: "MENU";color: #8c63a9;font-size: 9px;position: absolute;bottom: -18px;left: 4px;font-weight: 900;}
.hu_nv.active::after {color: #fff;}
.hu_nv.active small {display: none;}
.hu_nv:hover{opacity: 1;}
.hu_nv,.hu_nv span {display: inline-block;transition: all 0.2s;box-sizing: border-box;opacity: 1;}
.hu_nv span {position: absolute;right: 0;width: 100%;height: 4px;background-color:#8c63a9;border-radius: 4px;}
.hu_nv.active span {background-color: #fff;}
.hu_nv span:nth-of-type(1) {top: 0;}
.hu_nv span:nth-of-type(2) {top: 12px;}
.hu_nv span:nth-of-type(3) {bottom: 0;}
.hu_nv.active span:nth-of-type(1) {transform: translateY(12px) rotate(-45deg);}
.hu_nv.active span:nth-of-type(2) {opacity: 0;}
.hu_nv.active span:nth-of-type(3) {transform: translateY(-12px) rotate(45deg);}

.mnavi{display: block;}
.mnavi h2{display: block;}
.mnavi .contact{display: table;position: relative;left: 50%;transform: translate(-50%,0);color: #ffffff;font-size: 20px;text-decoration: none;margin-top: 15px;}
.mnavi .contact::before{content: "\260E";font-size: 18px;margin-right: 5px;}
.mnavi h2 img{display: block;width: 200px;margin: auto;margin-top: 20px;}
.mnavi>ul{width: 90%;margin: auto;margin-top: 5px;margin-bottom: 70px;}
.mnavi>ul>li{border-bottom: 1px dotted rgba(255,255,255,0.4);padding: 6px 0;}
.mnavi>ul>li a::before{content: "\25B8";margin-right: 3px;vertical-align: baseline;color: rgba(255,255,255,0.4);}
.mnavi>ul>li:last-child{border-bottom: none;}
.mnavi ul li a{text-decoration: none;color: #fff;font-size: 15px;}
}