/* CSS Document */

#header {
	position: fixed;
	transition: background 0.2s ease-out;
	}
#main{}
	#main h3{
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-gap: 1em 0;
		}
	_:-ms-lang(x)::-ms-backdrop, #main h3 svg{
		margin-bottom: 0.2em;
		}

#hero{
	position: relative;
	padding: 0;
	}

#heroSlide{}
	#heroSlide li{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		}
		#heroSlide li:before{
			content: "";
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0));
			z-index: 1;
			}
	#heroSlide .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		}

#heroText{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	}
	#heroText svg{
		align-self: center;
		fill: #fff;
		}
	_:-ms-lang(x)::-ms-backdrop, #heroText svg+svg{
		display: none;
		}
	#heroText h2{
		margin-top: 1em;
		padding: 0.5em;
		background: #000;
		color: #fff;
		text-align: center;
		letter-spacing: 0.5em;
		}
	[data-area="ise"] #heroText h2{
		background: #2a7ea6;
		}
	[data-area="yoshino"] #heroText h2{
		background: #a8992c;
		}
	[data-area="suzuka"] #heroText h2{
		background: #a8422a;
		}
	[data-area="murou"] #heroText h2{
		background: #628c42;
		}

#about{}
	#about h3{
		display: block;
		}
	#about h3+div{
		margin-top: 1.5em !important;
		}
	#about .googlemap{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f2f2f2;
		}

#popular{
	background: #f0ece9;
	overflow: hidden;
	}
	[data-area="ise"] #popular{
		background: #adcbd9;
		}
	[data-area="yoshino"] #popular{
		background: #e3da9c;
		}
	[data-area="suzuka"] #popular{
		background: #e0c3bc;
		}
	[data-area="murou"] #popular{
		background: #b8d1a6;
		}
	#popular h3{
		fill: #fff;
		}
	#popular h3+section{
		margin-top: 0;
		}
	#popular p{
		line-height: 1.8em;
		}

#activity{
	background: #f0ece9;
	}
	#activity h3{
		fill: #fff;
		}
	#activity h3+div{
		display: flex;
		flex-wrap: wrap;
		}
	#activity h3+div+div{}
		#activity h3+div+div a{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1em;
			border: solid rgba(0,0,0,0.2);
			border-width: 1px 0;
			color: inherit;
			fill: currentColor;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			line-height: 1.4em;
			}
			[data-area="ise"] #activity h3+div+div a:hover{
				background: #adcbd9;
				}
			[data-area="yoshino"] #activity h3+div+div a:hover{
				background: #e3da9c;
				}
			[data-area="suzuka"] #activity h3+div+div a:hover{
				background: #e0c3bc;
				}
			[data-area="murou"] #activity h3+div+div a:hover{
				background: #b8d1a6;
				}
			#activity h3+div+div a+a{
				margin-top: 1em;
				}
			#activity h3+div+div a i{
				position: relative;
				flex: 0 0 2em;
				width: 2em;
				height: 2em;
				margin-left: 0.5em;
				border: 1px solid rgba(0,0,0,0.2);
				border-radius: 100%;
				}
			#activity h3+div+div a svg{
				position: absolute;
				top: 20%;
				left: 20%;
				width: 60%;
				height: 60%;
				}
	#activity dl{
		position: relative;
		display: flex;
		flex-direction: column;
		background: #fff;
		line-height: 1.4em;
		}
		#activity dl:hover img{
			opacity: 0.7;
			}
	#activity dt+dd{
		order: -1;
		}
	#activity dd+dd{
		margin-top: 0.5em;
		}
	#activity dd a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-indent: -99999px;
		}

#course{
	background: #f0ece9;
	}
	[data-area="ise"] #course{
		background: #adcbd9;
		}
	[data-area="yoshino"] #course{
		background: #e3da9c;
		}
	[data-area="suzuka"] #course{
		background: #e0c3bc;
		}
	[data-area="murou"] #course{
		background: #b8d1a6;
		}
	#course h3{
		fill: #fff;
		}
	#course section{
		padding: 0;
		background: #fff;
		}
		#course section:hover img{
			opacity: 0.7;
			}
		#course section a{}
			#course section a i{
				position: relative;
				flex: 0 0 2em;
				width: 2em;
				height: 2em;
				margin: -1em 0;
				border: 1px solid rgba(0,0,0,0.2);
				border-radius: 100%;
				fill: #2b2926;
				}
			#course section a svg{
				position: absolute;
				top: 20%;
				left: 20%;
				width: 60%;
				height: 60%;
				}
	#course h4+div{
		margin-top: 1em;
		}
	#course figure{
		order: -1;
		}

#worcation{}
	#worcation section{
		margin-top: 1em;
		border: solid rgba(0,0,0,0.2);
		border-width: 1px 0;
		}
		#worcation section h4{}
			[data-area="ise"] #worcation section h4{
				color: #2a7ea6;
				}
			[data-area="yoshino"] #worcation section h4{
				color: #a8992c;
				}
			[data-area="suzuka"] #worcation section h4{
				color: #a8422a;
				}
			[data-area="murou"] #worcation section h4{
				color: #628c42;
				}
	#worcation footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 0;
		}
		#worcation footer h4{
			display: flex;
			align-items: center;
			justify-content: center;
			}
			#worcation footer h4 i{
				position: relative;
				top: 0.2em;
				transform: scale(1.2);
				}
				#worcation footer h4 i:nth-of-type(1){
					margin-right: 0.5em;
					}
				#worcation footer h4 i:nth-of-type(2){
					margin-left: 0.5em;
					}
		#worcation footer img{
			width: 100%;
			max-width: 600px;
			height: auto;
			}

.slide{}
	.slide .slick-arrow{
		position: absolute;
		top: 50%;
		border: 1px solid currentColor;
		border-radius: 100%;
		color: #fff;
		fill: currentColor;
		cursor: pointer;
		z-index: 1;
		}
		.slide .slick-arrow svg{
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			}
	.slide .slick-prev{
		left: 0;
		}
	.slide .slick-next{
		right: 0;
		}
	.slide .slick-dots{
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		}
		.slide .slick-dots li{
			width: 40px;
			height: 4px;
			background: #fff;
			cursor: pointer;
			overflow: hidden;
			}
			.slide .slick-dots li.slick-active{
				background: #bda58a;
				}
		.slide .slick-dots button{
			opacity: 0;
			}
	.slide .slick-dots li+li{
		margin-left: 10px;
		}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767.98px) {
/*767px以下*/
#main{}
	#main h3+div,
	#main h3+section{
		margin-top: 2em
		}
#about{}
	#about .googlemap{
		margin-top: 2em;
		}
#activity{}
	#activity h3+div{
		justify-content: space-between;
		}
	#activity h3+div+div{
		margin-top: 2em;
		}
	#activity dl{
		width: calc(50% - 0.5em);
		padding: 1em;
		}
		#activity dl:nth-of-type(n+3){
			margin-top: 1em;
			}
	#activity dt+dd{
		margin: -1em;
		margin-bottom: 1em;
		}
#course{}
	#course h3+section{
		margin-top: 2em;
		}
	#course section{
		margin-top: 1em;
		}
		#course section > div{
			padding: 1em;
			}
#worcation{}
	#worcation figure{
		margin-top: 1em;
		}
.slide{}
	.slide .slick-arrow{
		width: 2em;
		height: 2em;
		margin: -1em 1.5em;
		}
	.slide .slick-dots{
		padding: 1em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#main{}
	#main h3{}
		#main h3 svg{
			font-size: 3em;
			}
#heroSlide{}
	#heroSlide li{
		height: 100vw;
		}
#heroText{}
	#heroText svg{
		font-size: 5em;
		}
#about{}
	#about figure{
		margin-top: 1em;
		padding: 0 10%;
		}
#popular{
	padding-bottom: 0;
	}
	#popular section{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		}
	#popular h4{
		text-align: center;
		}
	#popular h4+div{
		order: 1;
		}
	#popular figure{
		margin: 1em -1.5em 0 -1.5em;
		}
#activity{}
	#activity dd+dd{
		font-size: 0.8em;
		line-height: 1.4em;
		}
#course{}
	#course section{
		display: flex;
		flex-direction: column;
		}
		#course section a{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 1em;
			padding: 1em;
			border: solid rgba(0,0,0,0.2);
			border-width: 1px 0;
			color: inherit;
			fill: currentColor;
			font-weight: bold;
			text-decoration: none;
			line-height: 1.4em;
			}
			#course section a i{
				margin-left: 1em;
				}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#heroSlide{}
	#heroSlide li{
		height: 50vw;
		}
#about{}
	#about figure{
		width: calc(30% - 1em);
		max-width: 20em;
		}
	#about .wrap{
		display: flex;
		justify-content: space-around;
		}
		#about .wrap > div{
			width: calc(70% - 1em);
			max-width: calc(100% - 30em);
			}
#popular{}
	#popular section{
		position: relative;
		min-height: 39.25vw;
		margin-top: 2em;
		}
		#popular section:nth-of-type(odd){
			padding-left: calc(50% + 2em);
			}
			#popular section:nth-of-type(odd) figure{
				right: 50%;
				}
		#popular section:nth-of-type(even){
			padding-right: calc(50% + 2em);
			}
			#popular section:nth-of-type(even) figure{
				left: 50%;
				}
	#popular figure{
		position: absolute;
		top: 0;
		width: 50vw;
		height: 100%;
		}
	#popular .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 39.25vw;
		}
#activity{}
	#activity dt{
		font-size: 1.2em;
		}
#course{}
	#course section{
		position: relative;
		display: -ms-grid;
		-ms-grid-columns: 20em calc(100% - 23em) 3em;
		display: grid;
		grid-template-columns: 1fr 2fr 3em;
		}
		#course section > div{
			-ms-grid-column: 2;
			}
		#course section figure{
			position: relative;
			-ms-grid-column: 1;
			order: -1;
			}
			#course section figure:before{
				content: "";
				display: block;
				padding-top: 66.66%;
				}
			#course section figure .thumb{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding-top: 0;
				}
		#course section a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
			#course section a i{
				position: absolute;
				top: 50%;
				right: 1em;
				margin: -1em 0;
				}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#main{}
	#main h3{}
		#main h3 svg{
			font-size: 5em;
			}
#heroText{}
	#heroText svg{
		font-size: 6em;
		}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#activity{}
	#activity dl{
		padding: 1.5em;
		}
	#activity dt+dd{
		margin: -1.5em;
		margin-bottom: 1.5em;
		}
#course{}
	#course section > div{
		padding: 1.5em;
		}
#worcation{}
	#worcation section{
		display: flex;
		justify-content: space-between;
		}
		#worcation section > div{
			width: 60%;
			}
.slide{}
	.slide .slick-arrow{
		width: 2.4em;
		height: 2.4em;
		margin: -1.2em 0;
		}
	.slide .slick-prev{
		left: 1em;
		}
	.slide .slick-next{
		right: 1em;
		}
	.slide .slick-dots{
		padding: 2em;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#main{}
	#main h3+div,
	#main h3+section{
		margin-top: 3em
		}
#about{}
	#about .googlemap{
		margin-top: 3em;
		}
#popular{}
	#popular section{
		margin-top: 2em;
		}
		#popular section:nth-of-type(odd){
			padding-left: calc(50% + 3em);
			}
		#popular section:nth-of-type(even){
			padding-right: calc(50% + 3em);
			}
#activity{}
	#activity h3+div+div{
		margin-top: 2em;
		}
	#activity dl{
		width: calc(33.33% - 1em);
		}
		#activity dl:nth-of-type(n+4){
			margin-top: 1.5em;
			}
		#activity dl:nth-of-type(3n+2){
			margin-left: 1.5em;
			margin-right: auto;
			}
#course{}
	#course section{
		margin-top: 1.5em;
		}
#worcation{}
	#worcation figure{
		width: calc(40% - 2em);
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#nav{
	position: fixed;
	margin: 0;
	}
#main{}
	#main h3{}
		#main h3 svg{
			font-size: 6em;
			}
	#main h3+div,
	#main h3+section{
		margin-top: 4em
		}
#heroText{}
	#heroText svg{
		font-size: 8em;
		}
#about{}
	#about .googlemap{
		margin-top: 4em;
		}
#popular{}
	#popular section{
		display: flex;
		align-items: center;
		margin-top: 2em;
		min-height: 33.25vw;
		}
		#popular section:nth-of-type(odd){
			padding-left: calc(50% + 4em);
			}
		#popular section:nth-of-type(even){
			padding-right: calc(50% + 4em);
			}
	#popular h4.subTitle{
		font-size: 1.6em;
		}
	#popular .thumb{
		padding-top: 66.66%;
		}
#activity{}
	#activity h3+div+div{
		margin-top: 3em;
		}
		#activity h3+div+div a{
			padding: 1.5em;
			}
	#activity dl{
		width: calc(33.33% - 1.33em);
		}
		#activity dl:nth-of-type(n+4){
			margin-top: 2em;
			}
		#activity dl:nth-of-type(3n+2){
			margin-left: 2em;
			margin-right: auto;
			}
#course{}
	#course h3+section{
		margin-top: 4em;
		}
	#course section{
		margin-top: 2em;
		}
#worcation{}
	#worcation figure{
		width: calc(40% - 4em);
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}