/* ドロワーメニュー
------------------------------------------------- */
.overlay {
	content: "";
	display: block;
	width: 0;
	height: 0;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity .5s;
}
.overlay.open {
	width: 100%;
	height: 100%;
	opacity: 1;
}
/*
main.open {
	transform: translateX(-250px);
}
*/
.menu-trigger {
    display: inline-block;
    /*
	width: 36px;
	height: 28px;*/
    width: 58px;
    height: 50px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 100;
    background-color: rgba(18,139,205,0.85);
}

.menu-trigger span {
	display: inline-block;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	/*
	width: 100%;
	height: 4px;
	*/
	width:36px;
	height:4px;
	margin:11px;
	/*開く時時のボタン*/
	background-color: #fff;
	transition: all .5s;

}
/*閉じる時のボタン*/
.menu-trigger.active span {
	background-color: #fff;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
	top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-12px) rotate(45deg);
}

nav.slide {
    width: 280px;
    height: 100%;
    padding-top: 60px;
    text-align: center;
    /*スライドメニューの背景の色*/
    background-color: rgba(18,139,205,0.85);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    transform: translate(280px);
    transition: all .5s;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}
nav.slide img {
	width:100px;
}
nav.slide h3 {
	font-size:21px;
	text-align:center;
	margin:10px 0 5px 0;
	font-family: 'Oswald', sans-serif;
}
nav.slide h4 {
	font-size:12px;
	text-align:center;
	margin:5px 0 10px 0;
	font-family: 'Noto Serif JP', serif;
}
nav.slide p {
	width:90%;
	text-align:center;
	margin:21px auto 25px auto;
	font-size:28px;

}
nav.slide p i {
	margin-right:8px;
}
nav.slide p small {
    width: 100%;
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
}
nav.open {
	transform: translateZ(0);
}
nav.slide ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}
nav.slide li {
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    border-bottom: 1px solid #fff;
    font-family: 'Oswald', sans-serif;
}
nav.slide li:first-child {
	border-top:1px solid #fff;
}
nav.slide li a {
    padding-top: 20px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 20px;
    color: #fff;
    display: block;
    text-decoration: none;
}
nav.slide li a:hover {
	background-color: rgba(255, 255, 255, 0.2);
	text-decoration: none;
}