@charset "UTF-8";

/*▲ページトップへ*/
.pagetop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 2%;
	z-index: 10;
}
.pagetop a {
	width: 40px;
	height: 40px;
	display: block;
	background-color: #000;
	text-align: center;
	color: #ea00ff;
	font-size: 160%;
	text-decoration: none;
	padding: 0px;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	border: 1px #ea00ff solid;
	position: relative;
}
.pagetop a::after{
	font-family: 'Material Icons';
	font-weight: 400;
	content: "\e5ce";
	position: absolute;
	top: 50%;
	left: 45%;
	transform: translateY(-50%) translateX(-45%);
	-webkit- transform: translateY(-50%) translateX(-45%);
	margin: auto;
	z-index: 10;
}


/*=====NAVIGATION=====*/
/*ハンバーガーメニュー*/
nav {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 20%;
	text-align: right;
	width: 80%;
	transform: translateX(100%);
	transition: all 0.6s;
}

nav ul {
	width: 80%;
	margin: 0 auto;
	padding: 4rem 12% 2% 8%;
	background: linear-gradient(to left, rgba(51,36,115,0.9) 55%, rgba(73,46,107,0) 100%);
	height: 100vh;
	list-style-type: none;
}

nav ul li {
	width: 100%;
	padding: 0;
}
nav ul li img {
	width: auto;
	height: 30px;
	padding: 0;
	border-bottom: 2px rgba(255,255,255,0) solid;
	-webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
	-moz-transition: .35s ease-in-out; /*変化の速度を指定*/
	transition: .35s ease-in-out; /*変化の速度を指定*/
}

nav ul li:last-child {
	border-bottom: none;
}

nav ul li a, nav ul li.of {
	display: block;
	color: #FFF;
	font-size: 120%;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 0.6rem 0;
}
nav ul li a:hover img, nav ul li.on a img {
	text-decoration: none;
	color: #00ffff;
	letter-spacing: 0.15em;
	opacity: 1;
	border-bottom: 1px #ea00ff solid;
}
nav ul li a:visited {
	color: #FFF;
}
nav ul li.of img {
	filter: brightness(50%);
}

/*ハンバーガーボタンが押されたときに付与するクラス*/
nav.active {
	transform: translateX(0);
}

/*ハンバーガーボタンのスタイルを指定*/
.menuBtn {
	display: block;
	position: fixed;
	right: 5%;
	top: 20px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 300;
}

/*ハンバーガーボタンの三本線*/
.menuBtn span {
	display: block;
	position: absolute;
	width: 100%;
	border-bottom: solid 3px #FFF;
	filter: drop-shadow(0px 0px 3px rgba(21, 93, 178, 0.8));
	-webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
	-moz-transition: .35s ease-in-out; /*変化の速度を指定*/
	transition: .35s ease-in-out; /*変化の速度を指定*/
}

.menuBtn span:nth-child(1) {
	top: 8px;
}
.menuBtn span:nth-child(2) {
	top: 18px;
}
.menuBtn span:nth-child(3) {
	top: 28px;
}
.menuBtn.active span {
/*	border-bottom: solid 3px #FFF;*/
}
/* 最初のspanをマイナス45度に */
.menuBtn.active span:nth-child(1) {
	top: 18px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.menuBtn.active span:nth-child(2),
.menuBtn.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}


/*=====Menu=====*/
#menuArea {
}
#menuArea ul {
	list-style-type: none;
	margin: 0px auto;
	width: 100%;
	box-sizing: border-box;
	font-size: 0;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-pack:justify;
	-moz-box-pack:justify;
	-webkit-flex-pack:justify;
	-moz-flex-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#menuArea ul li {
	width: 48%;
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
	margin-bottom: 1.0rem;
}
#menuArea ul li+li {
}
#menuArea ul li:nth-child(odd) {
	margin-left: 0;
}

#menuArea ul i {
	font-size: 0;
}
#menuArea ul li a {
	display:block;
	text-align: center;
	border: 1px solid #FFF;
	padding: 1.2rem 0;
	-webkit-transition: .2s ease-in-out; /*変化の速度を指定*/
	-moz-transition: .2s ease-in-out; /*変化の速度を指定*/
	transition: .2s ease-in-out; /*変化の速度を指定*/
	color: #FFF;
	position: relative;
	box-shadow: 0 0 8px #ea00ff, 0 0 8px #ea00ff inset;
}
#menuArea ul li a:hover {
	opacity: 1;
	box-shadow: 0 0 15px #ea00ff, 0 0 30px #ea00ff inset;
}
/*#menuArea ul li a::after {
	font-size: 10pt;
	content: "\e5e1";
	font-family: 'Material Icons';
	font-weight: 400;
	position: absolute;
	bottom: 8px;
	right: 10px;
	z-index: 10;
}*/
#menuArea ul li.up a::before{ /*UPアイコン*/
	content: "";
	display: block;
	background: url(../images/icon_up.png) no-repeat top left;
	-webkit-background-size: contain;
	background-size: contain;
	z-index: 100;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 30%;
	height: 30%;
	max-width: 38px;
	font-size:0;
	z-index: 100;
}

#menuArea ul li a img {
	display:block;
	margin: 0 auto;
}
#menuArea ul li img:first-child {
	height: 26px;
	width: auto;
}
#menuArea ul li img:last-child {
	height: 20px;
	width: auto;
}
#menuArea ul li img+img {
}
#menuArea ul::after{
	content :"";
	display :block;
	width: 48.0%;
}
#menuArea ul::before{
	content :"";
	display :block;
	width: 48.0%;
	order:1;
}

/* タブレットレイアウト : 481 px 〜 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 641px) {
/*=====NAVIGATION=====*/
	/*ナビゲーション*/
	nav ul li img {
		height: 18px;
	}
	nav ul {
		width: 80%;
		margin: 0 auto;
		padding: 5rem 10% 2% 10%;
	}
	/*ハンバーガーメニュー*/
	.menuBtn {
		right: 3%;
		top: 30px;
		width: 40px;
		height: 40px;
	}
	/*=====MENU=====*/
	#menuArea{
	}
	#menuArea ul {
		margin: 0px auto;
	}
	#menuArea ul li {
		width: 18.4%;
		width: 22.75%;
		margin-bottom: 1.8rem;
	}
	#menuArea ul::after, #menuArea ul::before{
		width: 18.4%;
		width: 22.75%;
	}
	#menuArea ul li+li {
	}
	#menuArea ul li:nth-child(odd) {
	}
	#menuArea ul li a {
	}
	#menuArea ul li a::after {
		font-size: 12pt;
		bottom: 12px;
		right: 15px;
	}
	#menuArea ul li.up a::before{ /*UPアイコン*/
		max-width: 45px;
	}
	#menuArea ul li:first-child,
	#menuArea ul li:nth-child(5) {
	}
	#menuArea ul li img:first-child {
		height: 18px;
	}
	#menuArea ul li img:last-child {
		height: 14px;
	}
}

/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media only screen and (min-width: 835px) {
/*=====NAVIGATION=====*/
	nav ul {
		width: 80%;
		padding: 6rem 15% 2% 5%;
	}
	nav ul li img {
		height: 30px;
	}
	nav ul li a, nav ul li.of {
		padding: 0.8rem 0;
	}
	/*ハンバーガーメニュー*/
	nav {
		left: 65%;
		width: 35%;
	}
	.menuBtn {
		right: 5%;
	}

	/*=====MENU=====*/
	#menuArea {
		margin-top: 3rem;
	}
	#menuArea ul {
		margin: 0 auto;
	}
	#menuArea ul li {
		width: 22.75%;
		width: 18.4%;
		margin-bottom: 1.8rem;
	}
	#menuArea ul::after, #menuArea ul::before{
		width: 22.75%;
		width: 18.4%;
	}
	#menuArea ul li+li {
	}
	#menuArea ul li:nth-child(odd) {
	}
	#menuArea ul li a {
		padding: 2.0rem 1rem;
		background-position: center right;
	}
	#menuArea ul li a::after {
		font-size: 12pt;
		bottom: 12px;
		right: 15px;
	}
	#menuArea ul li.up a::before{ /*UPアイコン*/
		max-width: 48px;
	}
	#menuArea ul li:first-child,
	#menuArea ul li:nth-child(6) {/*4つ並びのときは:nth-child(5)*/
		margin-left: 0;
	}
	#menuArea ul li img:first-child {
		height: 28px;
	}
	#menuArea ul li img:last-child {
		height: 22px;
	}
		#menuArea ul li img+img {
		}
}