@charset "UTF-8";

#allWrapper
{
	overflow:unset;
}

#mainWrapper
{
	padding: 10rem 0rem 10rem;

	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;

	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

a:not([class])
{
	text-decoration-color: rgb(200, 200, 200);
}

/**********************************************************************/
/****************************** MainPhoto *****************************/
/**********************************************************************/

.sumnailWrapper.hidden
{
	display: none;
}

.sumnailWrapper._b
{
	margin-top: 2rem;
	width: 100%;
}

.sumnailWrapper._b > .flex, .sumnailWrapper._a
{
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.sumnailWrapper._b .sum
{
	width: calc( (100% - 4rem) / 5);
	margin-left: 1rem;
	background-color: black;
	cursor:pointer;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.sumnailWrapper._b .sum:first-child
{
	margin-left: 0rem;
}

.sumnailWrapper._b .sum.gray > img,
body:not(.touch) .sumnailWrapper._b .sum:hover
{
	filter:alpha(opacity=70);
	-moz-opacity: .7;
	opacity: .7;
}

.sumnailWrapper._b .sum > img
{
	width:100%;
}


/**********************************************************************/
/****************************** Contents *******************************/
/**********************************************************************/

.moreInfoWrapper
{
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.contentsWrapper
{
	width:100%;
	margin: 0 auto;
	max-width: 1100px;
	padding: 4rem 2rem;
}

#description .description
{
	border-top: 1px solid rgb(200, 200, 200);
	padding-top: 3rem;
	padding-bottom: 4rem;
}

#description .description > div
{
	max-width: 900px;
	margin: 0 auto;
}

#description .description * + br,
#description .description div.moreinfo > br,
#description .description div.moreinfo ul > br
{
	display: none;
}

#description .description > div > h3
{
	margin: 2em 0 .5em;
}

div.moreinfo
{
	display:flex;
	flex-direction:column;
	align-items: center;
	font-size: .95em;
	max-width: calc(650px + 4rem);
	margin: 2rem auto 0;
	padding: 2rem 1rem;
	background-color: rgb(245,245,245);
}

.reservation_plan:nth-of-type(2n + 1) div.moreinfo
{
	background-color: rgb(255, 255, 255);
}


div.moreinfo li
{
	list-style:none;
	padding-left: 1em;
	margin-top: .5em;
}

div.moreinfo li:nth-of-type(1)
{
	margin-top: 1em;
}

div.moreinfo li:before
{
	content:"";
	display:block;
	position:absolute;
	top: .5em;
	left: 0;
	background-color: rgb(170,170,170);
	width: .5em;
	height: .5em;
	border-radius: 50%;
}

.contentsWrapper h2
{
	width:100%;
	font-weight: 400;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 1em;

/*	border-style: solid;
	border-width: 1px 0 0;
	border-color: rgb(100, 100, 100);*/
}

.contentsWrapper h2 span
{
	display: block;
	text-align: center;
	font-size: .9em;
	margin-top: .5em;
}

#reservation_plan
{
	width: 100%;
}

.reservation_plan
{
	padding: 3rem 2rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.reservation_plan:nth-of-type(2n + 1),
.reservation_plan:nth-of-type(2n + 1) .contentsTitleWrapper
{
	background-color: rgba(245, 245, 245, 1);
}

.reservation_plan .description
{
	margin-top: 3rem;
}

.reservation_plan .contentsTitleWrapper
{
	top: 1.5rem;
	padding: 2rem 0 0;
	position: sticky;
	width: 100%;
	max-width: 900px;
	z-index: 2;
	margin-bottom: 2rem;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgb(200,200,200);
	background-color: rgba(255, 255, 255, 1);
}

.reservation_plan .contentsTitleWrapper h2
{
	font-weight: 400;
	font-size: 1.2rem;
	text-align: center;
	color: rgb(0, 0, 0);
	margin: 1rem;
}

.reservation_plan .contents
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: calc(900px + 15rem);
	margin: 2rem auto 0rem;
}

.reservation_plan div.lead
{
	max-width: 900px;
	margin: 0 auto;
}

.reservation_plan .linkBtL
{
	white-space:nowrap;
	background-color: rgb(255, 255, 255);
	z-index: 5;
	margin-bottom: 0em;
	margin: 1rem;
}

.reservation_plan .contents .presentation
{
	width: 100%;
	max-width: 900px;
	padding-bottom: 5rem;
}

.reservation_plan .contents .presentation > .pageContainer + .pageContainer
{
	margin-top: 3rem;
}

/**********************************************************************/
/****************************** PHOTO *******************************/
/**********************************************************************/

#reservation_plan .photoWrapper
{
	width: 100%;
	margin: 0 auto;
}

#reservation_plan .slideFadeContainer .cap
{
	display: none;
}

.sumnailWrapper._a
{
	width: 100%;
}

.sumnailWrapper._a.hidden
{
	display: none;
}

.sumnailWrapper._a .sum
{
	width: 1.5rem;
	height: 2rem;
	cursor:pointer;
}
.sumnailWrapper .sum:first-child
{
	margin-left: 0rem;
}
.sumnailWrapper._a .sum:after
{
	content:"";
	position:absolute;
	display: block;
	width: .5rem;
	height: .5rem;
	top: calc(50% - .25rem);
	left: calc(50% - .25rem);
	border-radius: 50%;
	background-color: rgb(200, 200, 200);
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.sumnailWrapper._a .sum.gray:after,
.sumnailWrapper._a .sum.now:after,
body:not(.touch) .sumnailWrapper._a .sum:hover:after
{
	background-color: rgb(110, 110, 110);
}

.sumnailWrapper._a .sum > img
{
	display: none;
}

.singlePhotoWrapper 
{
	width: calc(100% - 4rem);
	max-width: calc(650px + 4rem);
	margin: 0 auto 2rem;
	padding: 0;
	background-color: rgba(245, 245, 245, 0);
}

.singlePhoto
{
	width: 100%;
	overflow: hidden;
}

.singlePhoto:before
{
	content:"";
	display: block;
	position: relative;
	padding-top: 67%;
}

.singlePhoto img
{
	position: absolute;
	display: block;
}

.singlePhoto .photoCover
{
	cursor: zoom-in;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(0, 0, 0, 1);
}

/**********************************************************************/
/******************************** LIST ********************************/
/**********************************************************************/

.listContainer
{
	font-size: .95em;
	max-width: calc(650px + 4rem);
	margin: 2rem auto 0;
	border: 1px solid rgb(160, 160, 160);
	padding: 1rem;
}

.listContainer .listTitle
{
	margin-bottom: .5em;
	padding-bottom: .5em;
	border-bottom: 1px solid rgb(160, 160, 106);
}

.listContainer > div{margin-top: 2em;}
.listContainer > div:first-child{margin-top: 0;}

.listContainer .listTitle + table tr:first-child td{padding-top: .5em;}

.listContainer table{width: 100%;}
.listContainer td
{
	vertical-align: top;
	line-height: 1.7;
	box-sizing: border-box;

	padding-top: .5em;
	padding-bottom: .5em;
	border-top: 1px solid rgb(230, 230, 230);
}

.listContainer tr:first-child td
{
	border-top-width: 0;
}

.listContainer tr td:not(.list-3):first-child
{
	padding-right: 2em;
}

.listContainer td.list-1,
.listContainer td.list-3
{
	color: rgb(70, 70, 70);
	text-align: left;
}
.listContainer td.list-1
{
	font-size: .95rem;
	width: 25%;
	min-width: 10rem;
}
.listContainer td.list-2
{
	text-align: left;
}

/*.listContainer div.text td.list-1 div br{display: none;}*/

.listContainer div.text td ul, {margin-top: .5em;}

.listContainer div.text td p._l
{
	padding-left: 1.8em;
	margin-top: 1em;
	position: relative;
}
.listContainer div.text td div p._l:first-of-type{margin-top: 0;}
.listContainer div.text td p._l:before
{
	content:"";
	position: absolute;
	box-sizing: border-box;
	width: 1em;
	height: 1px;
	top: .8em;
	margin-top: -.5px;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
}

.listContainer div.text td ul li,
.listContainer div.text div._c
{
	padding-left: 2em;
/*	font-size: .9em;*/
	margin-bottom: 1em;
}
.listContainer div.text div._c
{
	margin-top: .5em;
}
.listContainer div.text td ul li:last-of-type,
.listContainer div.text div._c:last-of-type
{
	margin-bottom: 0;
}

.listContainer p.long
{
	width: 20rem;
}

/**********************************************************************/
/**************************** PHOTO LIST ******************************/
/**********************************************************************/

.photoList
{
	margin-top: 4rem;
}

.photoList > .flex
{
	margin: 2rem;
	background-color: rgb(245, 245, 245);
/*	-webkit-align-items: flex-end;
	align-items: flex-end;*/
}
.photoList > .flex:first-child
{
	margin-top: 0rem;
}
.photoList > .flex .photoListPhoto
{
	cursor: zoom-in;
	width: 50%;
	line-height: 0;
	text-align: center;
	overflow: hidden;
}
.photoList > .flex .photoListPhoto > img
{
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.photoList > .flex .photoListPhoto > img.loaded
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.photoList > .flex .photoListPhoto > img.loaded + .loader
{
	display: none;
}

.photoList > .flex .photoListPhoto:after
{
	content:"";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset;
}

.photoList > .flex .caption
{
	width: 50%;
	padding: 2rem;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.photoList > .flex .caption h3 + br
{
	display: none;
}
.photoList > .flex .caption h3
{
	font-size: 1.2rem;
	margin-bottom: 1rem;
}
.photoList > .flex .caption h3 > .position
{
	display: block;
	color: rgb(100, 100, 100);
	font-size: .9rem;
	margin-top: .3rem;
	margin-bottom: 1rem;
}
.photoList > .flex .caption h3 > .num
{
	font-size: 3em;
	line-height: 1.1;
	color: rgb(200,200,200);
/*	position: absolute;
	top: -1.5em;*/
	display: block;
}
.photoList > .flex:nth-of-type(2n+1)
{
	-moz-flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.photoList .caption .photoCredit
{
	font-size: .7em;
	display: inline-block;
	text-align: left;
	margin-top: .5em;
	margin-left: 0rem;
}

.photoList .caption .photoCredit:before 
{
	content: "©︎ ";
	margin-left: 0em;
	font-size: .7rem;
}


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

@media screen and (max-width: 700px)
{
	.photoList > .flex:nth-of-type(2n)
	{
		padding: 0;
	}
	.photoList > .flex:nth-of-type(2n+1), .photoList > .flex
	{
		padding: 0;
		
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;

		-webkit-align-items: center;
		align-items: center;
		
		-webkit-justify-content: center;
		justify-content: center;
	}
	.photoList > .flex .photoListPhoto, .photoList > .flex .caption
	{
		width: calc(100% - 0rem);
	}
	.photoList > .flex .photoListPhoto > img
	{
		width: 100%;
		height: auto;
	}
	
	.reservation_plan .contents
	{
		flex-direction: column;
		align-items: center;
	}
	
	.reservation_plan .contents .presentation
	{
		width: 100%;
	}
	
	.reservation_plan .contents .linkBtL
	{
		margin-top: 3rem;
		margin-bottom: 0;
	}
}

@media screen and (max-width: 665px)
{
	.reservation_plan .contentsTitleWrapper
	{
		top: 0rem;
		padding: 2rem 0 0;
	}
	.reservation_plan
	{
		padding-top: 1rem;
	}
}

@media screen and (max-width: 600px)
{
	#mainWrapper
	{
		padding: 7rem 0rem 3rem;
	}
	.listContainer tr td:not(.list-3):first-child
	{
		padding-right: 0;
	}
	.listContainer td
	{
		display: block;
		border-top: 1px solid rgb(230, 230, 230);
	}
	.listContainer td.list-1
	{
		border-top-width: 0;
		width: 100%;
	}
	.listContainer td.list-2
	{
		border-top-width: 1px;
		text-align: left;
	}
	.listContainer tr:first-child td.list-2
	{
		border-top-width: 1px;
	}
}

@media screen and (max-width: 350px)
{
	.contentsConceptWrapper .subHead
	{	
		display: block;
	}
	.contentsConceptWrapper .subHead > span
	{
		display: inline;
	}
}

@media screen and (max-width: 30rem)
{
	.listContainer p.long
	{
		width: 100%;
	}
}