/* CSS Document */

body{}
	body.scrollTop{}
		body.scrollTop #header div{
			}

#main{}
	#main .subject{
		padding: 1.5em 1em;
		background: #f4f3ed;
		}
	#main .bg{
		position: absolute;
		top: -1em;
		left: -1em;
		width: calc(100% + 2em);
		height: calc(100% + 2em);
		padding: 0 !important;
		filter: blur(0.1em);
		opacity: 0.5;
		}

#pagePath{
	display: none;
	}

#hero{
	overflow: hidden;
	position: relative;
	transition: opacity 0.2s ease-out;
	}
	.done #hero{
		opacity: 1 !important;
		}
	#hero .slide{
		position: relative;
		z-index: 1;
		}
	#hero .thumb{
		padding-top: 75%;
		}
	#hero .slick-arrow{
		background: #35220d;
		fill: #fff;
		}
		#hero .slick-arrow:hover,
		#hero .slick-arrow:active{
			background: #f1a107;
			opacity: 1;
			}

#emergency{}
	#emergency a{
		display: block;
		border: 2px solid #35220d;
		}
	#emergency .wrap{
		display: flex;
		justify-content: center;
		}

#special{}
	#special section{
		border: 3px solid rgba(102,77,15,0.1);
		background: linear-gradient(to right, rgba(195,180,131,0.2) 0%,rgba(220,214,178,0.2) 50%,rgba(195,180,131,0.2) 100%);
		color: #735B08;
		}
	#special section+section{
		margin-top: 2em;
		}
	#special h3{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		}
		#special h3:before,
		#special h3:after{
			content: "";
			width: 0.6em;
			border-top: 2px solid rgba(102,77,15,0.5);
			}
		#special h3:before{
			margin-right: 0.3em;
			}
		#special h3:after{
			margin-left: 0.3em;
			}
	#special p+p{
		margin-top: 1em;
		}
	#special .my-gallery{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}

#akajiru{}
	#akajiru h4{
		padding: 1em;
		background: linear-gradient(to bottom, rgba(90,25,29,0.8) 0%,rgba(63,26,29,0.8) 100%);
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 1em;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c191d', endColorstr='#3f1a1d',GradientType=0 );
		}
	#akajiru h4+div{
		padding: 1em;
		background: #fff;
		}
		#akajiru h4+div p{
			line-height: 1.4em;
			}
	#akajiru .my-gallery{
		justify-content: flex-end;
		}

#businessTrip{}
	#businessTrip h4{
		padding: 1em;
		background: linear-gradient(to bottom, rgba(90,25,29,0.8) 0%,rgba(63,26,29,0.8) 100%);
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 1em;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c191d', endColorstr='#3f1a1d',GradientType=0 );
		}
	#businessTrip h4+div{
		padding: 1em;
		background: #fff;
		}
	#businessTrip dl{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		margin-top: -1em;
		}
	#businessTrip dt,
	#businessTrip dd{
		margin-top: 1em;
		padding-top: 0.4em;
		}
	#businessTrip dt{
		width: 5em;
		padding: 0.5em;
		border: 1px solid #735B08;
		line-height: 1em;
		text-align: center;
		}
	#businessTrip dd{
		width: calc(100% - 5em);
		padding-left: 1em;
		line-height: 1.4em;
		}

#premium10{}
	#premium10 h3{}
		#premium10 h3 small{
			font-size: 0.6em;
			margin-right: 0.5em;
			}
	#premium10 .list.point > li:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0.5em;
		left: 0;
		width: 0.4em;
		height: 0.4em;
		background: none;
		border: 1px solid #4c4948;
		border-radius: 100%;
		opacity: 0.5;
		}
	#premium10 dl{
		background: #fff;
		}
	#premium10 dt{
		padding: 1em;
		background: linear-gradient(to bottom, rgba(90,25,29,0.8) 0%,rgba(63,26,29,0.8) 100%);
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 1em;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c191d', endColorstr='#3f1a1d',GradientType=0 );
		}
	#premium10 dd{
		padding: 1em;
		line-height: 1.4em;
		}
	#premium10 dd+dd{
		padding-top: 0;
		}

#locations{
	padding-top: 0;
	}
	#locations div+div{
		margin-top: inherit;
		}

#map{
	position: relative;
	}
	#map iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
	#map ul.findShop{
		position: absolute;
		top: 1.5em;
		left: -1.5em;
		list-style: none;
		z-index: 1;
		}
	#map ul.findShop li+li{
		margin-top: 0.5em;
		}
	#map ul.findShop a{
		position: relative;
		display: block;
		padding: 1em;
		padding-left: 2.5em;
		background: #35220d;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
		text-decoration: none;
		}
	#map ul.findShop a i{
		position: absolute;
		top: calc(50% - 0.8em);
		left: 0.5em;
		display: block;
		width: 1.6em;
		height: 1.6em;
		padding: 0.3em;
		background: #fff;
		border-radius: 100%;
		fill: #f1a107;
		}
		#map ul.findShop li a:hover{
			background: #563B1E;
			}

#selPref_safarimobile,
#map select{
	position: absolute;
	top:8px;
	left:initial;
	right:10px;
	width:auto;
	height: auto;
	border: solid 1px #35220d;
	border-radius: 2px;
	background:rgba(255,255,255,0.25);
	transition-duration: 0.5s;
	transition-property: all;
	}
	#selPref_safarimobile:hover{
		background-color:#fff;
		}
	#selPref_safarimobile li,
	#map select option{
		padding: 0.1em 0.5em;
		opacity:0.8;
		}
	#selPref_safarimobile li.selected{
		opacity:1;
		background-color:#f1a107;
		}
	#selPref_safarimobile li:not(.selected):hover{
		background-color: #f4b439;
		}
		.loadingLayer{display: none;margin:0}
		.loadingLayer > div{
			background: rgba(0,0,0,0.8);
			}
		.loadingLayer p{
			font-weight: bold;
			}
		.loadingLayer .loader{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 10em;
				height: 10em;
				margin: -5em;
				border: 2px solid #a90329;;
				border-top-color: transparent;
				border-radius: 100%;
				animation: spin 0.75s infinite linear;
				}
			@keyframes spin {
					from {
					transform: rotate(0deg);
					}
					to {
					transform: rotate(360deg);
					}
				}
		.mapMask{
			margin:0!important;
			position: absolute;
			top:0px;
			left:0px;
			width: 100%;
			height: 100%;
			opacity: 1;
			background-color: rgba(255,255,255,0.2);
			display: flex;        
			justify-content: center;
			align-items: center;
			border-radius: 4px;
			pointer-events: none
			}

#course{
	padding-top: 0;
	}
	#course section{
		display: flex;
		flex-wrap: wrap;
		padding-top: 0;
		}
		#course section > *{
			order: 1;
			width: 100%;
			}
		#course section figure{
			order: 0;
			margin: 0 0 1em;
			}
		#course section p{
			margin-top: 0.5em;
			line-height: 1.4em;
			}
	#course .subject{}
		#course .subject i{
			background: #00a6de;
			}
	#course .recommend{
		position: relative;
		}
		#course .recommend:before{
			content: "おすすめ";
			position: absolute;
			top: 0.5em;
			left: 0.5em;
			width: 5em;
			height: 5em;
			background: #f1a107;
			border-radius: 100%;
			color: #fff;
			font-weight: 500;
			line-height: 5em;
			text-align: center;
			z-index: 10;
			}
	#course .thumb{
		padding-top: 66.66%;
		}

#about{
	padding-top: 0;
	}
	#about section{
		position: relative;
		padding: 1em 0 0 1em;
		}
	#about h3{
		position: absolute;
		top: 0;
		left: 0;
		width: 10em;
		padding: 0.8em;
		background: #fff;
		border: 1px solid #000;
		color: #35220d;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1em;
		text-align: center;
		z-index: 1;
		}
	#about a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: transparent;
		}
	#about .subject{}
		#about .subject i{
			background: #009b8e;
			}
	#about .wrap{
		display: flex;
		flex-wrap: wrap;
		}

#contents{
	background: #f4f3ed;
	}

#faq{}
	#faq dl{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 1em;
		}
	#faq dt{
		font-weight: bold;
		}
	#faq dd{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		#faq dd:last-child{
			margin-bottom: 0;
			}
	#faq dt+dd{
		margin-left: 1em;
		}
	#faq dd+dd{
		width: 100%;
		margin-bottom: 1em;
		padding-left: 1em;
		padding-bottom: 1em;
		border-bottom: 1px dotted #cebbaf;
		}

#topics{}
	#topics li{
		flex-wrap: wrap;
		align-items: center;
		}
		#topics li a{
			width: 100%;
			margin: 0.5em 0 0 0;
			}

#sns{}
	#sns .title{
		position: relative;
		padding: 0.5em;
		padding-left: 2.5em;
		fill: #fff;
		line-height: 1em;
		}
		#sns .title i{
			position: absolute;
			top: 0;
			left: 0;
			width: 2em;
			height: 2em;
			background: #aa9c91;
			}
		#sns .title svg{
			width: 1.2em;
			height: 1.2em;
			margin: 0.4em;
			}
	#sns .title+div{
		margin: 1em;
		padding: 10em 0;
		background: #fff;
		text-align: center;
		}

#facebook,
#twitter,
#instagram{
	margin-top: 2em;
	background: #f4f3ed;
	overflow: hidden;
	}

#pageLink{}
	#pageLink li{
		margin: 0 0.5em;
		}

#message{
	position: relative;
	background: #aa9c91;
	overflow: hidden;
	}
	#message h2,
	#message p{
		color: #fff;
		fill: #fff;
		}
	#message .wrap{
		margin-bottom: 2.88em;
		position: relative;
		z-index: 1;
		}
	#message .bg{
		opacity: 0.4;
		}

#pageTop{
	position: relative;
	margin-top: -2.88em;
	}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#hero{
	padding: 0;
	}
	#hero .wrap{
		width: 100%;
		}
	#hero .bg{
		display: none;
		}
#special{}
	#special section{
		padding: 1em;
		}
	#special .my-gallery{
		margin-top: 1em;
		}
#akajiru{}
	#akajiru .my-gallery{
		justify-content: center;
		}
#about{}
	#about .thumb{
		padding-top: 60%;
		}
#contents{
	padding: 0;
	}
	#contents h2{
		text-align: center;
		}
	#contents *+div{
		margin-top: 1em;
		text-align: center;
		}
#faq{}
	#faq dl{
		border-top: 1px dotted #cebbaf;
		}
#topics{
	border-bottom: 1px solid #cebbaf;
	}
	#topics ul{
		border-top: 1px dotted #cebbaf;
		}
#pageLink{}
	#pageLink .wrap{
		width: 100%;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#special{}
	#special h3{
		justify-content: center;
		}
		#special h3.title{
			font-size: 1.2em;
			}
#premium10{}
	#premium10 h4{
		font-size: 1em;
		}
	#premium10 dt{
		padding: 1em 0;
		}
#about{}
	#about section{
		width: 100%;
		}
	#about section+section{
		margin-top: 1em;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#about{}
	#about section{
		width: calc(50% - 0.5em);
		}
		#about section:nth-of-type(even){
			margin-left: 1em;
			}
		#about section:nth-of-type(n+3){
			margin-top: 1em;
			}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
body{}
	body.scrollTop{}
		body.scrollTop #siteName{
			height: auto;
			}
		body.scrollTop #siteName+p{
			top: 1em;
			}
#wrapper{
	padding-top: 0;
	}
#siteName+p{
	left: 1em;
	}
#header{}
	#header div{
		transition: all 0.2s ease-out;
		}
#siteName{
	transition: all 0.2s ease-out;
	}
#siteName+p{
	position: absolute;
	display: block;
	top: -3em;
	transition: all 0.2s ease-out;
	}
	#siteName+p svg{
		font-size: 2em;
		}
#gNav{
	transition: all 0.2s ease-out;
	}
#hero{}
	#hero .slick-slide{
		transform: scale(0.9,0.9);
		background: #333;
		transition: transform,background 0.2s ease-out;
		}
		#hero .slick-slide > div{
			mix-blend-mode: screen;
			opacity: 0.5;
			transition: all 0.2s ease-out;
			}
	#hero .slick-active{
		transform: scale(1,1);
		background: #fff;
		}
		#hero .slick-active > div{
			mix-blend-mode: normal;
			opacity: 1;
			}
	#hero .slick-arrow{
		font-size: 3em;
		}
#special{}
	#special section{
		padding: 1.5em;
		}
	#special p{
		line-height: 2em;
		}
#course{}
	#course section{
		margin: 0 1em;
		}
	#course .slick-arrow{
		font-size: 3em;
		}
#contents{}
	#contents article{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		width: 50%;
		padding: 0;
		}
		#contents article:nth-child(odd){
			padding-right: 2em;
			}
		#contents article:nth-child(even){
			padding-left: 2em;
			}
	#contents h2{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		order: 0;
		width: calc(100% - 15rem);
		padding: 0.9em 0.8em;
		background: #fff;
		line-height: 1em;
		}
	#contents h2+*{
		width: 100%;
		margin: 0;
		border: none;
		order: 1;
		}
	#contents *+div{
		order: 0;
		width: 15rem;
		}
	#contents .wrap{
		display: flex;
		flex-wrap: wrap;
		}
	#contents .linkBut{
		display: block;
		line-height: 2em;
		}
#faq{
	border-left: 1px solid #cebbaf;
	}
#sns{}
	#sns .wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#sns .headline{
		width: 100%;
		}
#facebook,
#twitter{
	width: calc(50% - 1em);
	}
	#facebook div,
	#twitter div{
		padding: 50% 0;
		}
#instagram{
	width: 100%;
	}
#pageLink{}
	#pageLink .slick-slider{
		margin: 0 -0.5em;
		}
	#pageLink .slick-prev{
		left: -1em;
		}
	#pageLink .slick-next{
		right: -1em;
		}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
body{}
	body.scrollTop{}
		body.scrollTop #header div{
			}
		body.scrollTop #siteName{
			left: calc(50% - 4.44em);
			}
#main{}
	#main .subject+*{
		margin-top: 3em;
		}
#hero{
	padding-top: 9em;
	}
#special{}
	#special dd{
		padding: 1em;
		}
#akajiru{}
	#akajiru .my-gallery{
		justify-content: center;
		}
#about{}
	#about section{
		width: calc(50% - 1em);
		}
	#about section:nth-of-type(even){
		margin-left: 2em;
		}
	#about section:nth-of-type(n+3){
		margin-top: 2em;
		}
#pageLink{}
	#pageLink .slick-slider{
		margin: 0 1em;
		}
}
@media (max-width: 991px) {
/*991px以下*/
#special{}
	#special figure{
		width: calc(50% - 0.5em);
		}
#course{}
	#course .slick-slider{
		margin: 0 1em;
		}
	#course .slick-prev{
		left: -1em;
		}
	#course .slick-next{
		right: -1em;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
body{}
	body.scrollTop{}
		body.scrollTop #header div{
			}
		body.scrollTop #siteName{
			top: 1.2em;
			left: calc(50% - 6.66em);
			}
#main{}
	#main .subject+*{
		margin-top: 4em;
		}
#hero{
	padding-top: 12em;
	}
#special{}
	#special section{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#special figure{
		width: calc(50% - 0.5em);
		}
	#special .my-gallery{
		margin-top: 0;
		}
#course{}
	#course .slick-slider{
		margin: 0 -1em;
		}
#about{}
	#about section{
		width: calc(33.34% - 1.34em);
		margin-top: 0;
		}
	#about section:nth-of-type(3n+2){
		margin: 0 2em;
		}
#pageLink{}
	#pageLink .slick-slider{
		margin: 0 -0.5em;
		}
	#pageLink .slick-prev{
		left: -1em;
		}
	#pageLink .slick-next{
		right: -1em;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
#hero{}
	#hero .slick-prev{
		left: 1em;
		}
	#hero .slick-next{
		right: 1em;
		}
	
#special{}
	#special section > div,
	#special figure{
		width: calc(50% - 0.75em);
		}
#course{}
	#course .slick-prev{
		left: -0.5em;
		}
	#course .slick-next{
		right: -0.5em;
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
#hero{}
	#hero .slick-prev{
		left: calc(50% - 450px - 1.5em);
		}
	#hero .slick-next{
		right: calc(50% - 450px - 1.5em);
		}
#special{}
	#special section > div:nth-of-type(1){
		width: 55%;
		}
	#special section > div:nth-of-type(2){
		width: calc(45% - 1.5em);
		}
#course{}
	#course .slick-prev{
		left: -1em;
		}
	#course .slick-next{
		right: -1em;
		}
}


/* ie */
@media all and (-ms-high-contrast: none){}