@charset "UTF-8";

/*▲ページトップへ*/
.pagetop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 2%;
}
.pagetop a {
	width: 40px;
	height: 40px;
	display: block;
	background-color: #FFF;
	text-align: center;
	color: #0085dc;
	font-size: 160%;
	text-decoration: none;
	padding: 0px;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	/*border: 1px #FFF solid;*/
	border-radius: 20px;
	position:relative;
	z-index: 10000;
}
.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: 0;
	text-align: center;
	width: 100%;
	transform: translateY(-100%);
	transition: all 0.6s;
}

nav ul {
	width: 92%;
	margin: 0 auto;
	padding: 22px 4% 2% 4%;
	background-color: rgba(0,108,193,0.9);
	height: 100vh;
	list-style-type: none;
}

nav ul li {
	width: 100%;
	border-bottom: 1px #FFF solid;
	padding: 0;
}

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

nav ul li a, nav ul li.of {
	display: block;
	color: #FFF;
	font-size: 120%;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 1em 0;
}
nav ul li a:hover {
	text-decoration: none;
	color: #fff666;
	letter-spacing: 0.15em;
	opacity: 1;
}
nav ul li a:visited {
	color: #FFF;
}
nav ul li.of {
	color: #333;
}
nav ul li.nav_guideline {
	border-bottom: none;
	text-align: right;
}
nav ul li.nav_guideline a {
	display: inline-block;
	margin-right: 12%;
	background-color: #df0707;
	padding: 0.5em 1em;
	font-size: 100%;
}
nav ul li.nav_guideline a:hover {
	letter-spacing: 0.05em;
}

/*ハンバーガーボタンが押されたときに付与するクラス*/
nav.active {
	transform: translateY(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;
	-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;
}

/* 最初の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);
}


/*=====SCHEDULE=====*/
#scheArea{
	padding: 20px 0;
	background-image: url(../images/bg_sche.jpg);
	background-repeat: no-repeat;
	background-positon: center center;
	-webkit-background-size: cover;
	background-size: cover;
}
#scheArea .container{
}

#scheArea ul {
	list-style-type: none;
	margin: 20px auto 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:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#scheArea ul li {
	width: 33.3333%;
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
}
#scheArea ul p {
	font-size:0;
}
#scheArea ul li a {
	display:block;
	height: auto;
	width: 100%;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	padding-top: 71%;
}
#scheArea ul li a:hover, #scheArea ul li.on a {
	padding-top: 71%;
	opacity: 1;
}
#scheArea ul li.on a{
	background-color: #FFF;
}

/*8.13(土) 8.14(日) E.L.L.&ell.FITS ALL&ell.SIZE*/
#scheArea ul li.ell p,
#scheArea ul li.ell a{
	background-color: #c07100;
	background-image: url(../images/sche_ell.png);
	background-repeat: no-repeat;
}
#scheArea ul li.ell a:hover{
	background-color: #f59000;
}
#scheArea ul li.ell.on a{
	background-image: url(../images/sche_ell_on.png);
}
/*8.20(土) ダイアモンドホール*/
#scheArea ul li.dia p,
#scheArea ul li.dia a{
	background-color: #871a10;
	background-image: url(../images/sche_dia.png);
	background-repeat: no-repeat;
}
#scheArea ul li.dia a:hover{
	background-color: #b22418;
}
#scheArea ul li.dia.on a{
	background-image: url(../images/sche_dia_on.png);
}
/*8.21(日) クラブクアトロ*/
#scheArea ul li.qua p,
#scheArea ul li.qua a{
	background-color: #1b721b;
	background-image: url(../images/sche_qua.png);
	background-repeat: no-repeat;
}
#scheArea ul li.qua a:hover{
	background-color: #219021;
}
#scheArea ul li.qua.on a{
	background-image: url(../images/sche_qua_on.png);
}
/*8.24(水) Zepp Nagoya*/
#scheArea ul li.zep p,
#scheArea ul li.zep a{
	background-color: #aa0067;
	background-image: url(../images/sche_zep.png);
	background-repeat: no-repeat;
}
#scheArea ul li.zep a:hover{
	background-color: #da0184;
}
#scheArea ul li.zep.on a{
	background-image: url(../images/sche_zep_on.png);
}
/*9.3(土) 9.4(日) 蒲郡ラグーナビーチ*/
#scheArea ul li.lag {
	width: 66.6666%;
}
#scheArea ul li.lag a,
#scheArea ul li.lag a:hover, #scheArea ul li.lag.on a {
	padding-top: 35.5%;
}
#scheArea ul li.lag p,
#scheArea ul li.lag a{
	background-color: #006bb1;
	background-image: url(../images/sche_lag_sp.png);
	background-repeat: no-repeat;
}
#scheArea ul li.lag a:hover{
	background-color: #0085dc;
}
#scheArea ul li.lag.on a{
	background-image: url(../images/sche_lag_on_sp.png);
}


/* タブレットレイアウト : 481 px 〜 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 641px) {
/*=====NAVIGATION=====*/
	/*ナビゲーション*/
	nav ul {
		width: 80%;
		margin: 0 auto;
		padding: 32px 10% 2% 10%;
	}
	nav ul li.nav_guideline a {
		margin-right: 0;
	}
	/*ハンバーガーメニュー*/
	.menuBtn {
		right: 3%;
		top: 30px;
		width: 40px;
		height: 40px;
	}
}

/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media only screen and (min-width: 835px) {
/*=====NAVIGATION=====*/
	nav ul li a, nav ul li.of {
		font-size: 140%;
	}
	/*ハンバーガーメニュー*/
	.menuBtn {
		right: 5%;
	}

	/*=====SCHEDULE=====*/
	#scheArea{
		padding: 30px 0 20px 0;
	}
	#scheArea ul li, #scheArea ul li.lag {
		width: 20%;
	}
	#scheArea ul li.lag a,
	#scheArea ul li.lag a:hover, #scheArea ul li.lag.on a {
		padding-top: 71%;
	}
	#scheArea ul li.lag p,
	#scheArea ul li.lag a{
		background-image: url(../images/sche_lag.png);
	}
	#scheArea ul li.lag.on a{
		background-image: url(../images/sche_lag_on.png);
	}
}