/*********************************************/	
@charset "utf-8";
/*********************************************/	

/*==================================================
Font
==================================================*/
*{
	font-size: 100%;
	font-family:  "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.minchou{
	font-family: 游明朝, "游明朝体", "Yu Mincho", YuMincho, "黎ミン L","Reimin Light", "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	font-weight:500;
}

/*IE11は游ゴシック体、游明朝体が使用できない*/
@media all and (-ms-high-contrast:none){
	*{
		font-size: 100%;
		font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	}
	.minchou{
		font-family: "Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
		font-weight:300;
		line-height:1.6em;
	}
}

body{
	color:#333333;
}

/*==================================================
nav
==================================================*/
nav{
	position: relative;
}

	nav div#trigger{
		background-color:rgba(255,255,255,0.75);
		position:fixed;
		width:150px;
		height:65px;
		right:0;
		top:0;
		z-index: 850;
		transition:0.4s;
	}

	nav ul{
		position: fixed;
		z-index: 800;
		right: -300px;
		top: 0;
		width: calc(100% - 45px);
		max-width: 255px;
		background-color: #333;
		padding: 100px 15px 10px 30px;
		transition: 0.5s;
		height: 100vh;
	}

		nav ul li{
			border-bottom: 1px #fff solid;
		}
		
			nav ul li a{
				display:block;
				width:calc(100% - 30px);
				height:calc(100% - 30px);
				color: #ffffff;
				text-decoration:none;
				letter-spacing:0.1em;
				padding:15px;
			}
			
			nav ul li a:hover{
				text-decoration:underline;
			}


/*menu_open*/
p#menu-trigger{
	position:absolute;
	right:30px;
	top:20px;
	z-index:900;
	cursor:pointer;
}

p#menu-trigger-text{
	width:60px;
	height:25px;
	line-height:25px;
	position:absolute;
	top:20px;
	right:65px;
	font-weight:bold;
	font-size:0.9em;
	color:#333;
	z-index:901;
	transition:0.4s;
	text-decoration:none;
	cursor:pointer;
	letter-spacing:0.1em;
}

/*IE11*/
@media all and (-ms-high-contrast:none){
p#menu-trigger-text{
	letter-spacing:0.25em;
}
}

	a#menu-trigger-text:hover{
		text-decoration:none;
	}

#menu-trigger,
#menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#menu-trigger {
	position: relative;
	width: 30px;
	height: 25px;
}
#menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #333;
	border-radius: 1px;
}
#menu-trigger span:nth-of-type(1) {
	top: 1px;
}
#menu-trigger span:nth-of-type(2) {
	top: 11px;
}
#menu-trigger span:nth-of-type(3) {
	bottom: 1px;
}

#menu-trigger {
	-webkit-animation: menu-close .6s;
	animation: menu-close .6s;
}
#menu-trigger.active {
	-webkit-animation: menu-open .6s;
	animation: menu-open .6s;
}
@-webkit-keyframes menu-close {
	30% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@keyframes menu-close {
	30% {
		transform: scale(0);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes menu-open {
	30% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@keyframes menu-open {
	30% {
		transform: scale(0);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

#menu-trigger-text.active{
	color:#ffffff;
}
#menu-trigger.active span{
    background-color: #ffffff;
}

#menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
#menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
#menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}



/*==================================================
footer
==================================================*/
footer{
	background-image:url(../img/index_pic_7.png);
	background-size:120px auto;
	background-position:center 50px;
	background-repeat:no-repeat;
	padding:220px 0 0 0;
	text-align:center;
}
	
	footer p{
		margin:5px 0;
	}
	
	footer p:first-child{
		font-size:1.15em;
		font-weight:bold;
	}
	
	/*IE11*/
	@media all and (-ms-high-contrast:none){
	footer p:first-child{
		font-weight:300;
	}
	}
	
	footer ul{
		letter-spacing:-0.4em;
	}
	
	footer ul + ul{
		margin:20px 0;
	}
	
	footer li{
		display:inline-block;
		letter-spacing:0.1em;
		margin:0 10px;
	}
	
		footer ul + ul li{
			border-left:1px #333 solid;
			margin:5px 10px 5px 0;
			padding:2px 0 2px 10px;
		}
	
	footer li:first-child{
		border:none;
	}
	footer ul + ul li:last-child{
		padding:2px 10px 2px 10px;
	}
	
	footer p:last-child{
		margin:40px 0 0 0;
		padding:5px 0;
		background-color:#333;
		color:#fff;
	}