@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// TOP /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

body:not(.menu) #selector .logo
{
	transform:scale(0);
}

#head
{
	width: 100%;
	padding-top: 75px;
	display:flex;
	flex-direction:column;
	background: rgb(255, 255, 255);
}

#head .h
{
	width: 100%;
	margin: 0 auto;
	padding: 2rem 2rem 2rem;
	position: relative;
	top:0;
	z-index: 20;
	display:flex;
	justify-content: space-between;
	align-items:center;
	
/*	mix-blend-mode: exclusion;
	color: rgba(255,255,255,.8);*/
	color: rgba(0, 0, 0, 1);
}

.en #head .h
{
	padding-top: 0;
}

#head .h h1
{
	font-size: clamp(1.5rem, 2.5vw, 3rem);
	letter-spacing: .1em;
	width: calc(100% - clamp(15rem, 20vw, 20rem));
	overflow:hidden;
	text-shadow: 0 0 .25em rgb(255,255,255);
}

.en #head .h h1
{
	letter-spacing: .05em;
}

#head .h h1 > span
{
	display: flex;
	transform: translateX(2em);
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	flex-wrap: wrap;
}

.en #head .h h1 > span > span
{
	margin-right: .25em;
}

#head .h h1 > span:nth-of-type(1)
{
	transition: transform 1s ease 1.5s, opacity 1s ease 1.5s;
}
#head .h h1 > span:nth-of-type(2)
{
	transition: transform 1s ease 2s, opacity 1s ease 2s;
}
#head .h h1 > span:nth-of-type(3)
{
	transition: transform 1s ease 2.5s, opacity 1s ease 2.5s;
}

#head .h.end h1 > span
{
	transform: translateX(0em);
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

#head a.logo_snow
{
	position:absolute;
	right: 2rem;
	top: clamp(1rem, 1.5vw, 2rem);
	margin-top: 4.75rem;
	display: block;
	width: clamp(15rem, 20vw, 20rem);
	pointer-events: auto;

	background-size: cover;
	background-image: url(../_img/logo_snow.svg);
}

#head a.logo_snow:after
{
	content:"";
	display:block;
	position: relative;
	padding-top: 25%;
}

#top
{
	width: 100%;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	transition: transform 1s ease .75s, opacity 1s ease .75s;
}

.end + a + #top
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}


#slide_linear
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#slide_linear .bannerSlideContainer .photoTrim,
.bannerSlideContainer .photoTrim .photoArea
{
	height: 100%;
}

#slide_linear .bannerSlider .bannerChildren img
{
	object-fit: cover;
}

#slide_linear .sumnailWrapper,
.bannerSlider .bannerChildren .photoWrapper > a:before
{
	display: none;
}

.bannerSlider .bannerChildren .photoWrapper > a
{
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-width: 0 .5rem 1rem;
}

#slide_linear .photoDir
{
	color:white;
}

#head .concept
{
	width: 100%;
	background: rgb(244, 244, 239);
	font-size: clamp(1rem, 1.5vw, 1.5rem);
}

#head .concept > div
{
	font-size: 1.2rem;
	display: flex;
	padding: 5rem clamp(2rem, 2vw, 4rem) 5em;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 0 auto;
}

#head .concept div > div
{
	max-width: 30em;
	line-height: 2em;
}

#head .concept .direction
{
	font-size: 1em;
	margin: 2em 4em 0;
}

#head .concept .caution
{
	font-size: .8em;
	line-height: 1.5;
	padding-left: 1em;
	margin: 1em 0;
	color: rgb(100, 100, 100);
}
#head .concept .caution:before
{
	content:"*";
	display: block;
	position:absolute;
	left: 0;
	top: 0;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////// Image ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#image
{
	width: 100%;
	padding: 5rem 0rem;
}

#image .img,
#head .img
{
	width: 100%;
	background: rgb(244, 244, 239);
}

#head .img figure,
#image .img figure
{
	width: 100%;
/*	max-width: 1020px;*/
	margin: 0 auto;
	background-size: cover;
	background-position: 50%;
	max-height: 500px;
	
	overflow:hidden;
}

body._a #head .img figure,
body._a #image .img figure
{
	background-image:url(../_img/forward_a.jpg);
}
body._b #head .img figure,
body._b #image .img figure
{
	background-image:url(../_img/forward_a.jpg);
}

#head .img figure:before,
#image .img figure:before
{
	content:"";
	display:block;
	padding-top: 50%;
}

/*#image .img figure:after
{
	content:"";
	display:block;
	position: absolute;

	top: 0;
	left:0;
	background-image: radial-gradient(rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 0), radial-gradient(rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 0);
	background-position: 0 0, 2px 2px;
	background-size: 4px 4px;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
}*/

#video
{
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
}

#video
{
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	top: 0;
	left: 0;
	position: absolute;
}

body._a #video
{
	background-image:url(../_img/forward_a.jpg);
}
body._b #video
{
	background-image:url(../_img/forward_a.jpg);
}

#image .text
{
	margin-top: 5rem;
}

#image .text h2
{
	margin-bottom: 2em;
	text-align: center;
}
body:not(.en) #image .text h2 > br
{
	display:none;
}

#image .text .icons,
#image .text .icons > div:nth-of-type(1) > div
{
	display:flex;
	align-items: flex-start;
}

#image .text .icons > div:nth-of-type(1)
{
	width: 60%;
	transform: translateX(-5%);
}
#image .text .icons > div:nth-of-type(2)
{
	width: 40%;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
}

#image .text .icons > div .direction
{
	margin-top: 1em;
}

#image .text .icons > div figure,
#image .text .icons > div span
{
	display:block;
	width: calc(100% / 3);
	border-radius: 50%;
}
#image .text .icons > div span
{
	position:absolute;
	width: calc(100% / 3);
	height:100%;
	border: 2px solid;
}
#image .text .icons > div span:nth-of-type(1)
{
	left: calc(50% - 100% / 2);
	transform: translateX(10%);
}
#image .text .icons > div span:nth-of-type(2)
{
	left: calc(50% - 100% / 3 / 2);
}
#image .text .icons > div span:nth-of-type(3)
{
	left: calc(100% / 3 * 2);
	transform: translateX(-10%);
}

#image .text .icons > div figure
{
	background-color: rgb(255, 255, 255);
	background-size:cover;
	background-position: 50%;
}
#image .text .icons > div figure:before
{
	content:"";
	display:block;
	padding-top: 100%;
}
#image .text .icons > div figure:nth-of-type(1)
{
	background-image:url(../_img/icon_1.svg);
	transform: translateX(10%);
}
#image .text .icons > div figure:nth-of-type(2)
{
	background-image:url(../_img/icon_2.svg);
}
#image .text .icons > div figure:nth-of-type(3)
{
	background-image:url(../_img/icon_3.svg);
	transform:translateX(-10%);
}

.en #image .text .icons > div figure:nth-of-type(1)
{
	background-image:url(../_img/icon_1_en.svg);
}
.en #image .text .icons > div figure:nth-of-type(2)
{
	background-image:url(../_img/icon_2_en.svg);
}
.en #image .text .icons > div figure:nth-of-type(3)
{
	background-image:url(../_img/icon_3_en.svg);
}

/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////// Foreword ////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#foreword
{
	padding: 5rem 0;
}

#foreword .msg
{
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	padding: 0 1rem;
}

#foreword h2
{
	display:inline-block;
	font-size: clamp(1.1rem, 4vw, 2rem);
	padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
	letter-spacing: .1em;
	text-align:center;
	border-bottom: 2px solid;
}

.en #foreword h2
{
	font-size: clamp(1.1rem, 4vw, 2rem);
	padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
}

#foreword h2 span
{
	display:block;
	text-align: center;
}

#foreword ul
{
	font-size: clamp(1rem, 2vw, 1.3rem);
	margin-top: 2em;
	padding: 0 2rem;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	list-style:none;
}

.en #foreword ul
{
	font-size: clamp(1.1rem, 2vw, 1.3rem);
}


#foreword ul > li
{
	padding-left: 1.5em;
}

#foreword ul > li:before
{
	content: "\f140";
	font-family: "Font Awesome 5 Free";
	display:inline-block;
	position:absolute;
	left: 0;
	top: -.1em;
}

#foreword ul > li + li
{
	margin-top: .5em;
}

#msg_slide
{
	width:100%;
	overflow:hidden;
	
	margin: 5rem 0;
	padding: 3rem 1rem;
	background-color: rgb(255, 255, 255);
	border-radius: 3rem;
}

#msg_slide h3
{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	margin-bottom: 2rem;
}

#msg_slide .slideWrapper
{
	overflow: hidden;
}

.bannerSlideContainer .photoDirR,
.end .bannerSlideContainer .photoDirR,
.bannerSlideContainer .photoDirL,
.end .bannerSlideContainer .photoDirL
{
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	background-color: rgba(255, 255, 255, 0);
	top: calc(50% - 2rem);
}

#msg_slide .slideWrapper .textWrapper
{
	width: 100%;
	display:flex;
	flex-direction: column;
	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

#msg_slide .slideWrapper .textWrapper:before
{
	content:"";
	display:block;
	position:absolute;
	width: calc(100% - 8rem);
	left: 4rem;
	top:0;
	height:100%;
	background: rgb(244, 244, 239);
	border-radius: 3rem;
}
#msg_slide .slideWrapper .textWrapper > p
{
	font-size: clamp(1rem, 2vw, 1.2rem);	
	padding: 5rem 5rem;
	max-width: 45rem;
	display: inline-block;
}

body:not(.en) #msg_slide .slideWrapper .textWrapper > p
{
	text-align: justify;
}



/*//////////////////////////////////////////////////////////////////////////////////
////////////////////////////////// Retreat ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#retreat
{
	padding: 5rem 0 0;
}

/*//////////// SLIDE //////////////*/
#retreat_slide
{
	display:flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	margin: 0 auto;
	overflow:hidden;
}

#retreat_slide .slideWrapper
{
	width: clamp(calc(100% - 700px), 70%, calc(100% - 500px));
	margin: 0 0;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

#retreat_slide .slideFadeContainer
{
	overflow: hidden;
	border-radius: 2rem 0 0rem 2rem;
}

#retreat_slide .bannerContainer .cap
{
	display: none;
}

#retreat_slide .textWrapper
{
	width: clamp(500px, 30%, 700px);
	padding: 0 2rem;
	
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#retreat_slide .textWrapper > h2
{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	
	height: 100%;
	max-height: 7em;
	
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
	letter-spacing: .1em;
}

#retreat_slide .textWrapper > h2 > span:nth-of-type(2)
{
	font-size: .8em;
}

#retreat_slide .textWrapper > h2 > span:nth-of-type(1),
#retreat_slide .textWrapper > h2 > span:nth-of-type(3)
{
/*	border-bottom: 2px solid rgb(255, 255, 255);*/
	background: linear-gradient(transparent 70%, rgb(255, 255, 255) 70%, rgb(255, 255, 255) 90%, transparent 90%);
}

/*/////////// TAB /////////////*/
#retreat_tab
{
	margin-top: 10vw;
	padding: 2rem 1rem;
}

#retreat_tab .uc
{
	text-align:center;
	padding: 2rem;
	width: 100%;
}

#retreat_tab .title
{
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

#retreat_tab .archives
{
	margin: 5rem 0 2rem;
	font-size: .9rem;
	display:flex;
	justify-content:center;
}

#retreat_tab .tabContents._b .archives a.box
{
	color: rgb(156, 173, 202);
}
#retreat_tab .tabContents._a .archives a.box
{
	color: rgb(150, 181, 62);
}


/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////// GUIDE & STAY //////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#guide_stay
{
	padding: 5rem 2rem 7rem;
}

#guide_stay > div > div
{
	display:flex;
	justify-content: space-between;
	align-items:center;
}
#guide_stay .guide
{
	flex-direction:row-reverse;
	margin-bottom: 5rem;
}

#guide_stay > div > div > div
{
	width: calc(50%  - 1rem);
}

#guide_stay .photo
{
	border-radius: .5rem;
	background-size:cover;
	background-position: 50%;
}
#guide_stay .photo:before
{
	content:"";
	display:block;
	padding-top: 60%;
}

#guide_stay .guide .photo
{
	background-image:url(../_img/top_guide.jpg);
}
#guide_stay .stay .photo
{
	background-image:url(../_img/top_stay.jpg);
}

#guide_stay .text > h3
{
	font-size: 1.5rem;
}
.en #guide_stay .text > h3
{
	font-size: 1.3rem;
}

#guide_stay .text > p
{
	margin: 1.5rem 0;
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// NEWS ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#news
{
	padding: 5rem 1rem;
}

#news h2
{
	margin-bottom: .5em;
}

#news .archives
{
	display:flex;
	justify-content:flex-end;
	margin-top: 1rem;
	font-size: .9rem;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 1000px)
{
	#retreat_slide .textWrapper
	{
		width: 40%;
	}
	#retreat_slide .slideWrapper
	{
		width: 60%;
	}
}

@media screen and (max-width: 900px)
{
	#image .text .icons
	{
		flex-direction:column;
		align-items: center;
	}
	#image .text .icons > div:nth-of-type(1),
	#image .text .icons > div:nth-of-type(2)
	{
		width: 100%;
	}
	#image .text .icons > div:nth-of-type(1)
	{
		max-width: 600px;
		transform:translateX(0);
	}
	#image .text .icons > div:nth-of-type(2)
	{
		margin-top: 2rem;
		max-width: 650px;
	}
}

@media screen and (max-width: 800px)
{
	#retreat_slide
	{
		flex-direction:column;
		overflow: hidden;
		align-items:flex-end;
	}
	#retreat_slide .textWrapper
	{
		width: 100%;
		margin-bottom: 2rem;
	}
	#retreat_slide .slideWrapper
	{
		width: calc(100% - 4rem);
		margin-right: 2rem;
	}
	#retreat_slide .slideFadeContainer
	{
		border-radius: 2rem;
	}
	
	.bannerSlideContainer .photoDirR,
	.end .bannerSlideContainer .photoDirR
	{
		right: 0;
	}
	.bannerSlideContainer .photoDirL,
	.end .bannerSlideContainer .photoDirL
	{
		left: 0;
	}
	#msg_slide .slideWrapper .textWrapper:before
	{
		width: calc(100% - 6rem);
		left: 3rem;
	}
	#msg_slide .slideWrapper .textWrapper > p
	{
		padding: 2rem 5rem;
	}
	
	#foreword,
	#image
	{
		padding-bottom:0;
	}
	#msg_slide
	{
		margin-bottom: 0;
	}
}


@media screen and (max-width: 700px)
{
	#head a.logo_snow
	{
		width: 10rem;
		right: auto;
		top: 4.5rem;
		margin-top: 0;
		left: calc(50% - 5rem);
	}

	#head .concept div > div
	{
		width: 100%;
	}
	
	#head .h
	{
		position: relative;
		top: 20px;
		justify-content: center;
	}
	#head .h h1,
	#head .h h1 > span
	{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	#head .h h1 > span > span
	{
		text-align:center;
	}

	#head .h
	{
		padding-top: 2rem;
	}
	.en #head .h
	{
		line-height: 1.5;
		padding-top: 2.5rem;
		padding-bottom: 3rem;
	}
	
	#image .text
	{
		margin-top: 2rem;
	}

}

@media screen and (max-width: 650px)
{
	#head .img figure:before,
	#image .img figure:before
	{
		padding-top: 65%;
	}

	#guide_stay .guide,
	#guide_stay .stay
	{
		flex-direction:column;
	}
	#guide_stay > div > div > div
	{
		width:100%;
	}
	#guide_stay .photo
	{
		margin-bottom: 1rem;
	}
}

@media screen and (max-width: 450px)
{
	body:not(.en) #head .h h1 > span > br,
	body:not(.en) #image .text h2 > br
	{
		display:inline;
	}
	
	.bannerSlideContainer .photoDirR,
	.end .bannerSlideContainer .photoDirR,
	.bannerSlideContainer .photoDirL,
	.end .bannerSlideContainer .photoDirL
	{
		display:none;
	}
	#msg_slide .slideWrapper .textWrapper:before
	{
		width: calc(100% - 1rem);
		left: .5rem;
	}
	#msg_slide .slideWrapper .textWrapper > p
	{
		padding: 2rem 2rem;
	}

}