@charset "utf-8";

/* layer
====================================================*/
header{z-index:2;position:relative;}
main{z-index:0;position:relative;}
footer{z-index:1;position:relative;}
aside{z-index:3;position:relative;}

/* header
====================================================*/
div#navWrap{
	width:96%;
	height:100px;
	position:fixed;
	top:10px;
	left:2%;
	text-align:center;
	overflow:hidden;
	border:1px solid #00aabb;
	background:rgba(255,255,255,1.0);
	display:block;
	border-top-right-radius: 40px;
	border-bottom-left-radius: 40px;
}
/* header h1
--------------------------*/
div#navWrap h1{
	width:120px;
	height:100px;
	position:absolute;
	top:0;
	left:30px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
div#navWrap h1 a{
	width:100%;

}
div#navWrap h1 img{
	width:100%;
	height:auto;
	display:block;
}
/* mainNav
--------------------------*/
ul#mainNav{
	width:calc(100% - 300px);
	height:100%;
	position:absolute;
	top:0;
	left:160px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	
}
ul#mainNav li{
	width:25%;
	height:auto;
	display:block;
	border-right:1px solid #eee;
}
ul#mainNav li:nth-child(5n){
		border-right:none;
}
ul#mainNav li a{
	width:100%;
	height:100%;
	padding:0;
	font-size:12px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
ul#mainNav li a span{
	font-size:11px;
	display:block;
	position:relative;
}
ul#mainNav li span::before,
ul#mainNav li span::after{
	content:"";
	width:4px;
	height:1px;
	margin:0 3px 3px 3px;
	display:inline-block;
	background:#000;
}
/* mainSNSLinks
--------------------------*/
ul#mainSNSLinks{
	width:140px;
	height:100px;
	position:absolute;
	top:0;
	right:0;
	display:flex;
	justify-content:space-around;
	align-items:center;
}
ul#mainSNSLinks li{
	width:auto;
	height:100%;
	float:left;
	display:block;
}
ul#mainSNSLinks li a{
	width:auto;
	height:100%;
	display:flex;
	align-items:center;
}
ul#mainSNSLinks li img{
	width:25px;
	height:auto;
	margin:0 auto;
	display:block;
}
/* main
====================================================*/
div.secBlock{
	padding:0;
	margin:0;
	position:relative;
	background:#fff;
	overflow:hidden;
	display:block;
	box-shadow:0 1px 0 #fff;//iOS対応（隙間を埋める）
}
/* div.sec common */
div.secInner{
	width:90%;
	height:auto;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
div.secInner h2{
	width:100%;
	height:auto;
	margin:0 auto;
	font-size:50px;
	letter-spacing:6px;
	display:block;
	position:relative;
}
div.secInner h3{
	font-size:30px;
	margin:0 0 30px 0;
	letter-spacing:6px;
	line-height:1.2;
	position:relative;
}
div.secInner p{
	width:100%;
	margin:0 auto 20px auto;
	text-align:justify;
	display:block;
}
/* sidebar（aside）
====================================================*/
div#menu{
	padding:10px;
	position:fixed;
	top:0;
	right:-100px;
	display:block;
	transition:all 0.8s ease-in-out;
}
/* menu
--------------------------*/
/* menu layer */
div#menuTrigger{z-index:2;}
ul#subNav{z-index:1;}
div#menuScreen{z-index:0;}

/* menuTrigger */
div#menuTrigger,
div#menuTrigger span {
	display:inline-block;
	transition:all .4s;
}
div#menuTrigger{
	position:relative;
	width:40px;
	height:20px;
	cursor:pointer;
}
div#menuTrigger span {
	position:absolute;
	left:0;
	width:100%;
	height:1px;
	background-color:#000;
}
div#menuTrigger span:nth-of-type(1) {
	top:0;
}
div#menuTrigger span:nth-of-type(2) {
	top:9px;
}
div#menuTrigger span:nth-of-type(3) {
	bottom:0;
}
div#menuTrigger:not(.active):hover span:nth-of-type(2) {
	width:70%;
}
div#menuTrigger:not(.active):hover span:nth-of-type(3) {
	width:35%;
}
div#menuTrigger.active span:nth-of-type(1) {
	transform:translateY(10px) rotate(-30deg);
}
div#menuTrigger.active span:nth-of-type(2) {
	opacity:0;
}
div#menuTrigger.active span:nth-of-type(3) {
	transform:translateY(-10px) rotate(30deg);
}
/* menuScreen */
div#menuScreen {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:-100%;
	background:#fff;
}
div#menuScreen.active {
	left:0;
	animation-name:fadeInScreen;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-fill-mode:backwards;
}
@keyframes fadeInScreen{
	0%{opacity:0;}
	100%{opacity:1;}
}
div#menuScreen.noActive {
	left:-100%;
	animation-name:slideScreen;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-delay:0.5s;
	animation-fill-mode:backwards;
}
@keyframes slideScreen{
	0%{transform:translateX(100%);}
	100%{transform:translateX(0);}
}
/* subNav
--------------------------*/
/* h1 logo */
div#menu h1{
	width:100%;
	height:50vh;
	position:absolute;
	top:0;
	left:0;
}
div#menu h1 a{
	width:150px;
	height:100%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
}
div#menu h1 a span:nth-child(2){
	width:130px;
	height:auto;
	margin:10px auto;
	text-align:center;
	display:block;
}
div#menu a span img{
	width:100%;
	height:auto;
	margin:0 auto;
	display:block;
}
div#menu h1 a span{
	opacity:0;
	animation-name:h1SlideUp;
	animation-duration:0.4s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes h1SlideUp{
	0%{transform:translateY(0px);opacity:1;}
	100%{transform:translateY(30px);opacity:0;}
}
div#menu h1.active a span{
	opacity:0;
	animation-name:h1SlideDown;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes h1SlideDown{
	0%{transform:translateY(-30px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}
div#menu h1.active a span:nth-child(1){animation-delay:0s;}
div#menu h1.active a span:nth-child(2){animation-delay:0.2s;}
div#menu h1.active a span:nth-child(3){animation-delay:0.4s;}

/* subNav */
ul#subNav{
	width:100%;
	height:200px;
	position:absolute;
	top:50%;
	left:0;
	margin-top:-50px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:center;
}
ul#subNav li{
	width:19%;
	height:45px;
	margin:10px 0.5%;
}
ul#subNav li a{
	width:100%;
	height:100%;
	padding:0;
	text-align:center;
	font-size:14px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
}
ul#subNav li a span{
	width:100%;
	font-size:11px;
	display:block;
	position:relative;
}
ul#subNav li span::before,
ul#subNav li span::after{
	content:"";
	width:4px;
	height:1px;
	margin:0 3px 3px 3px;
	display:inline-block;
	background:#000;
}
ul#subNav li a,
ul#subNav li a span{
	opacity:0;
	animation-name:subNavSlideDown;
	animation-duration:0.4s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes subNavSlideDown{
	0%{transform:translateY(0px);opacity:1;}
	100%{transform:translateY(30px);opacity:0;}
}
ul#subNav.active li a,
ul#subNav.active li a span{
	opacity:0;
	animation-name:subNavSlideUp;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes subNavSlideUp{
	0%{transform:translateY(-30px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}
ul#subNav.active li:nth-child(1) a{animation-delay:0s;}
ul#subNav.active li:nth-child(2) a{animation-delay:0s;}
ul#subNav.active li:nth-child(3) a{animation-delay:0s;}
ul#subNav.active li:nth-child(4) a{animation-delay:0s;}
ul#subNav.active li:nth-child(5) a{animation-delay:0s;}
ul#subNav.active li:nth-child(6) a{animation-delay:0.5s;}
ul#subNav.active li:nth-child(7) a{animation-delay:0.5s;}
ul#subNav.active li:nth-child(8) a{animation-delay:0.5s;}
ul#subNav.active li:nth-child(9) a{animation-delay:0.5s;}
ul#subNav.active li:nth-child(10) a{animation-delay:0.5s;}

ul#subNav.active li:nth-child(1) a span{animation-delay:0.2s;}
ul#subNav.active li:nth-child(2) a span{animation-delay:0.2s;}
ul#subNav.active li:nth-child(3) a span{animation-delay:0.2s;}
ul#subNav.active li:nth-child(4) a span{animation-delay:0.2s;}
ul#subNav.active li:nth-child(5) a span{animation-delay:0.2s;}
ul#subNav.active li:nth-child(6) a span{animation-delay:0.7s;}
ul#subNav.active li:nth-child(7) a span{animation-delay:0.7s;}
ul#subNav.active li:nth-child(8) a span{animation-delay:0.7s;}
ul#subNav.active li:nth-child(9) a span{animation-delay:0.7s;}
ul#subNav.active li:nth-child(10) a span{animation-delay:0.7s;}

/* subSNSLinks */
ul#subSNSLinks{
	width:100%;
	height:60px;
	position:absolute;
	left:0;
	bottom:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:center;
}
ul#subSNSLinks li{
	width:33.33%;
}
ul#subSNSLinks li a{
}
ul#subSNSLinks li img{
	width:auto;
	height:24px;
	margin:0 auto;
	display:block;
}
ul#subSNSLinks li a{
	opacity:0;
	animation-name:subSNSLinksSlideUp;
	animation-duration:0.4s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes subSNSLinksSlideUp{
	0%{transform:translateY(0px);opacity:1;}
	100%{transform:translateY(30px);opacity:0;}
}
ul#subSNSLinks.active li a{
	opacity:0;
	animation-name:subSNSLinksSlideDown;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes subSNSLinksSlideDown{
	0%{transform:translateY(-30px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}
ul#subSNSLinks.active li:nth-child(1) a{animation-delay:0s;}
ul#subSNSLinks.active li:nth-child(2) a{animation-delay:0.2s;}
ul#subSNSLinks.active li:nth-child(3) a{animation-delay:0.4s;}


/* footer
====================================================*/
div#footer{
	width:100%;
	height:140px;
	overflow:hidden;
	background:#0ab;
}
/* toPageTop
--------------------------*/
p#toPageTop{
	width:50px;
	height:50px;
	position:fixed;
	bottom:40px;
	right:20px;
	text-align:right;
	font-size:12px;
	border:1px solid #000;
	cursor:pointer;
	border-radius:50px;
	background: rgba(255,255,255,0);
	display:none;
	transition:all 0.5s ease-out;
}
p#toPageTop:hover{
	background: rgba(255,255,255,1.0);
}
p#toPageTop span:nth-child(1){
	width:1px;
	height:100%;
	margin:0 auto;
	background:#000;
	display:block;
}
p#toPageTop span:nth-child(1)::before,
p#toPageTop span:nth-child(1)::after{
	width:1px;
	height:60%;
	position:absolute;
	top:0;
	left:0;
	background:#000;
	display:block;
}
p#toPageTop span:nth-child(1)::before{
	content:"";
	top: -1px;
	left: 16px;
	transform: rotate(30deg);
}
p#toPageTop span:nth-child(1)::after{
	content:"";
	top:-1px;
	left:32px;
	transform:rotate(-30deg);
}
p#toPageTop span:nth-child(2){
	width:50%;
	margin:10px auto 0;
	border-bottom:1px solid #000;
	display:block;
	transition:all 0.5s ease-out;
}
p#toPageTop:hover span:nth-child(2){
	width:100%;
}
/* footerOtherLinks
--------------------------*/
ul#footerOtherLinks{
	width:auto;
	height:auto;
	position:absolute;
	top:20px;
	left:50px;
	border-left:1px solid #000;
	display:flex;
	justify-content:center;
	align-items:center;
	
}
ul#footerOtherLinks li{
	width:auto;
	height:100%;
	border-right:1px solid #000;
	display:block;
}
ul#footerOtherLinks li a{
	width:100%;
	height:100%;
	padding:12px 15px 5px 15px;
	font-size:12px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
}
ul#footerOtherLinks li a span{
	font-size:11px;
	display:block;
	position:relative;
}
ul#footerOtherLinks li span::before,
ul#footerOtherLinks li span::after{
	content:"";
	width:4px;
	height:1px;
	margin:0 3px 3px 3px;
	display:inline-block;
	background:#000;
}
/* footerSNSLinks
--------------------------*/
ul#footerSNSLinks{
	width:150px;
	height:auto;
	position:absolute;
	top:90px;
	left:37px;
	display:flex;
	justify-content:center;
	align-items:center;
	
}
ul#footerSNSLinks li{
	width:33.33%;
	height:auto;
	display:block;
}
ul#footerSNSLinks li a{
	width:100%;
	height:auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
}
ul#footerSNSLinks li img{
	width:auto;
	height:24px;
	margin:0 auto;
	display:block;
}
/* copyright
--------------------------*/
p#copyright{
	width:140px;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-70px;
	text-align:center;
}
p#copyright small{
	font-size:12px;
}



/* W:-900px
====================================================*/
@media screen and (max-width: 900px) {
	/* header
	============================================*/
	ul#mainSNSLinks{width:130px;}
	ul#mainNav{width:calc(100% - 250px);left:120px;}
	div#navWrap h1{width:100px;left:10px;}
}
/* W:-670px
====================================================*/
@media screen and (max-width: 670px){
	/* header
	============================================*/
	div#navWrap{display:none;}
	/* sidebar（aside）
	============================================*/
	div#menu{right:0px;display:block;}/*common.jsと連携 / index.cssと連携*/
}
/* W:-600px
====================================================*/
@media screen and (max-width: 600px) {
	/* main
	============================================*/
	/* sec common */
	div.secInner h2{font-size:30px;}
	/* sidebar（aside）
	============================================*/
	/* subNav
	--------------------------*/
	/* h1 logo */
	div#menu h1{height:200px;}
	div#menu a span:nth-child(1){width:120px;}
	div#menu a span:nth-child(2){
		width:130px;
	}
	/* subNav */
	ul#subNav{top:210px;height:calc(100% - 260px);}
	ul#subNav li{width:48%;}

	/* footer
	====================================================*/
	/* toPageTop
	--------------------------*/
	p#toPageTop{bottom:20px;right:10px;}
	/* footerOtherLinks
	--------------------------*/
	ul#footerOtherLinks{
		width:240px;
		height:auto;
		position:absolute;
		top:20px;
		left:50%;
		margin-left:-120px;
		border-left:none;
	}
	ul#footerOtherLinks li{
		width:100%;
		margin:0 auto 30px auto;
		border-right:1px solid #000;
		border-left:1px solid #000;
	}
	/* footerSNSLinks
	--------------------------*/
	ul#footerSNSLinks{
		width:200px;
		bottom:45px;
		left:50%;
		margin-left:-100px;
	}
	/* copyright
	--------------------------*/
	p#copyright{bottom:3px;}
}
/* W:-380px
====================================================*/
@media screen and (max-width: 380px) {
	ul#subNav li a{font-size:12px;}
	/* sidebar（aside）
	============================================*/
	/* menu*/
	div#menu h1{height:150px;}
}