@charset "utf-8";





.how-frame{
	border: 1px solid;
	padding: .25em .75em;
	margin-left: .75em;
	margin-right: .75em;
}

@media (max-width: 768px){
	.how-frame{
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
}





/*--------------------------------------------------

 * 

--------------------------------------------------*/

.chapter{
	margin-top: 6em;
	margin-bottom: 6em;
	
	overflow: hidden;
}
.chapter__inner{}




.chapter-head{
	text-align: center;
	margin-bottom: 3em;
}
.chapter-head__icon{}
.chapter-head__heading{
	font-size: 1.5em;
	font-weight: normal;
	line-height: 2em;
}
.chapter-head__note{
	font-size: .875em;
	line-height: 2em;
}

.chapter__is-open{
	display: none;
}
.chapter__body{
	padding: 1em;
}
.chapter__note{
	margin: 0;
	padding: 0;
	
	font-size: .875em;
	line-height: 2em;
}
.chapter-heading__header{
	color: #fff;
	background-color: #ccc;
	
	padding: .5em;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
}
.chapter-heading__header__icon{
	flex: 0 0 auto;
	margin-right: 1em;
}
.chapter-heading__header__title{
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	
	font-size: 1.125em;
	font-weight: bold;
	line-height: 1.5em;
}

@media (min-width: 769px){}
@media (max-width: 768px){
	.chapter__body{
		transition-duration: 360ms;
		transition-timing-function: ease-out;
		transition-property: visibility opacity;
	}
	.chapter__is-open:not(:checked) ~ .chapter__open-target{
		position: fixed;
		visibility: hidden;
		opacity: 0;
	}
	.chapter-heading__header__title{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.capter__label{
		cursor: pointer;
	}
	.chapter-heading__header__title:after{
		margin-left: 1em;
	}
	.chapter__is-open:not(:checked) ~ .chapter__header-target .chapter-heading__header__title:after{
		content: "+";
	}
	.chapter__is-open:checked ~ .chapter__header-target .chapter-heading__header__title:after{
		content: "-";
	}
}





.l-roots{}
.l-roots__inner{}
.l-roots__item{}

@media (min-width: 769px){
	.l-roots{}
	.l-roots__inner{
		display: flex;
		align-items: center;
	}
	.l-roots__inner:after{
		content: "";
		display: block;
		margin-left: 2em;
		margin-right: 2em;
		
		width: 10%;
		min-width: 113px;
		align-self: stretch;
		
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url(./img--howto/roots__bg.jpg);
	}
	.l-roots__item{
		flex: 1 1 50%;
	}
	.l-roots__item:last-child{
		order: 1;
	}
}

@media (max-width: 768px){
	.l-roots{
		display: flex;
		align-items: center;
	}
	.l-roots:after{
		content: "";
		display: block;
		margin-left: 1em;
		
		align-self: stretch;
		width: 10%;
		min-width: 56.5px;
		
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url(./img--howto/roots__bg.jpg);
		
		margin-right: calc(-28.25px - 2.5%);
	}
	.l-roots__inner{
		flex: 1 1 auto;
	}
	.l-roots__item{}
}




.roots__item{
	margin-bottom: 1em;
}
.roots__item .chapter-heading__header{
	background-color: #308AB8;
}




.l-effect{}
.l-effect__title{}
.l-effect__notes{}
.l-effect__image{}

@media (min-width: 769px){
	.l-effect{
		display: grid;
		grid-column-gap: 2em;
		grid-template-columns: 1fr 35%;
		grid-template-areas:
			"effect__head effect__fig"
			"effect__note effect__fig";
	}
	.l-effect__title{
		grid-area: effect__head;
	}
	.l-effect__notes{
		grid-area: effect__note;
	}
	.l-effect__image{
		grid-area: effect__fig;
	}
}

@media (max-width: 768px){
	.l-effect{}
	.l-effect__title{}
	.l-effect__notes{}
	.l-effect__image{}
}

@media all and (-ms-high-contrast:none) and (min-width: 769px){
	.l-effect{
		display: -ms-grid;
		grid-column-gap: 2em;
		-ms-grid-columns: 1fr 35%;
	}
	.l-effect__title{
		-ms-grid-column: 1;
		-ms-grid-row: 1;
	}
	.l-effect__notes{
		-ms-grid-column: 1;
		-ms-grid-row: 2;
	}
	.l-effect__image{
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		
		margin-left: 2em;
	}
}

@media all and (-ms-high-contrast:none) and (max-width: 768px){
	.l-effect{}
	.l-effect__title{}
	.l-effect__notes{}
	.l-effect__image{}
}




.effect{}
.effect__item{
	margin-bottom: 1em;
}
.effect__figure{
	margin: 0;
	padding: 0;
}
.effect__img{
	max-width: 100%;
	margin-bottom: .5em;
}
.effect__caption{
	font-size: .75em;
	line-height: 2em;
}
.effect .chapter-heading__header{
	background-color: #4D997A;
}
.effect__fig-title{
	margin: 0;
	padding: 0;
	margin-bottom: .5em;
	
	font-size: 1em;
	line-height: 2em;
}
.effect__fig-note{
	margin: 0;
	padding: 0;
}

@media (min-width: 769px){
	.effect{}
	.effect__item{}
	.effect__figure{}
	.effect__img{}
	.effect__caption{}
}

@media (max-width: 768px){
	.effect{}
	.effect__item{}
	.effect__figure{}
	.effect__img{}
	.effect__caption{}
}






.spa-variety{
	min-width: 100%;
	border-collapse: collapse;
}
.spa-variety__thead{
	color: #fff;
	background-color: #9A70A8;
}
.spa-variety__tbody{
	font-size: .875em;
	line-height: 2em;
}
.spa-variety__tbody tr{
	border-bottom: 1px solid #999;
}
.spa-variety__head,
.spa-variety__body{
	padding: 1em;
	vertical-align: middle;
}
.spa-variety__head{
	font-weight: normal;
}
.spa-variety__body{
	border-left: 1px solid #999;
}




.documents{
	margin: 0;
	padding: 0;
	margin-top: 3em;
	
	display: table;
	margin-left: auto;
	margin-right: auto;
	
	color: #666;
	font-size: .75em;
	line-height: 2em;
}
.documents__heading{
	margin: 0;
	padding: 0;
	margin-bottom: .5em;
	padding-bottom: .5em;
	
	font-size: 1.2em;
	font-weight: normal;
	text-align: center;
	
	border-bottom: 1px solid;
}
.docuemnts__items{
	margin: 0;
	padding: 0;
	list-style: none;
	
	counter-reset: counter;
}
.documents__item{
	display: flex;
	
	counter-increment: counter;
}
.documents__item:before{
	content: counter(counter) ")";
	
	margin-right: 1em;
}






.hotel{
	color: #666;
	text-align: center;
}
.hotel__brand{
	width: 150px;
	height: 21px;
}
.hotel__catch{
	margin: 0;
	padding: 0;
	
	margin-bottom: 1em;
	
	font-size: 1.875em;
	font-weight: normal;
	line-height: 2em;
}
.hotel__note{}

.hotel-nav{
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-left: -1em;
	margin-bottom: -1em;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.hotel-nav__item{
	margin-left: 1em;
	margin-bottom: 1em;
}
.hotel-nav__button{
	display: flex;
	align-items: center;
	
	
	color: inherit;
	font-weight: bold;
	text-decoration: inherit;
	
	padding: .75em 2em;
	
	border: 1px solid;
	border-radius: 3px;
}
.hotel-nav__button:after{
	content: "";
	display: block;
	margin-left: 1em;
	
	width: .5em;
	height: .5em;
	
	border-style: solid;
	border-width: 0 3px 3px 0;
	
	transform: rotate(-45deg);
}


.l-howto{
	box-sizing: border-box;
	padding: 2em;
	border-radius: 3px;
	border: 1px solid #ccc;
	
	display: grid;
	grid-column-gap: 1em;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr;
}
.l-howto__title{
	grid-area: howto__title;
}
.l-howto__fig{
	grid-area: howto__fig;
}
.l-howto__note{
	grid-area: howto__note;
}
.l-howto__aside{
	grid-column: span 2;
}

@media (min-width: 769px){
	.l-howto{
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"howto__title	howto__fig"
			"howto__note	howto__fig"
			"howto__aside	howto__aside";
	}
	.l-howto__title{}
	.l-howto__fig{}
	.l-howto__note{}
	.l-howto__aside{}
}
@media (max-width: 768px){
	.l-howto{
		grid-template-columns: 1fr minmax(auto, 30%);
		grid-template-areas:
			"howto__title	howto__title"
			"howto__note	howto__fig"
			"howto__aside	howto__aside";
	}
	.l-howto__title{
		grid-area: howto__title;
	}
	.l-howto__fig{
		grid-area: howto__fig;
	}
	.l-howto__note{
		grid-area: howto__note;
	}
	.l-howto__aside{
		grid-column: span 2;
	}
}

@media all and (-ms-high-contrast:none){
	.l-howto{
		display: -ms-grid;
		-ms-grid-columns: 1fr auto;
		-ms-grid-rows: auto 1fr;
	}
	.l-howto__fig{
		margin-left: 1em;
	}
}

@media all and (-ms-high-contrast:none) and (min-width: 769px){
	.l-howto{
		-ms-grid-template-columns: 1fr auto;
		/*grid-template-areas:
			"howto__title	howto__fig"
			"howto__note	howto__fig"
			"howto__aside	howto__aside";*/
	}
	.l-howto__title{
		grid-area: howto__title;
		
		-ms-grid-column: 1;
		-ms-grid-row: 1;
	}
	.l-howto__fig{
		grid-area: howto__fig;
		
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
	}
	.l-howto__note{
		grid-area: howto__note;
		
		-ms-grid-column: 1;
		-ms-grid-row: 2;
	}
	.l-howto__aside{
		grid-column: span 2;
		
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 3;
	}
}
@media all and (-ms-high-contrast:none) and (max-width: 768px){
	.l-howto{
		grid-template-columns: 1fr minmax(auto, 30%);
		/*grid-template-areas:
			"howto__title	howto__title"
			"howto__note	howto__fig"
			"howto__aside	howto__aside";*/
	}
	.l-howto__title{
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 1;
	}
	.l-howto__fig{
		-ms-grid-column: 2;
		-ms-grid-row: 2;
		
		margin-top: 1em;
	}
	.l-howto__note{
		-ms-grid-column: 1;
		-ms-grid-row: 2;
	}
	.l-howto__aside{
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 3;
	}
}




.howto{
	box-sizing: border-box;
	width: 80%;
	max-width: 770px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px){
	.howto{
		width: auto;
	}
}

.howto .chapter-heading__header{
	background-color: #C46C8B;
}
.howto__item{}
.l-howto__fig > img{
	max-width: 100%;
}



.howto-aside{
	border-style: solid;
	border-color: #C46C8B;
	border-width: 1px 0;
	
	margin-top: 1em;
	margin-left: 5%;
	margin-right: 5%;
	
	display: flex;
	align-items: center;
}
.howto-aside__photo{
	flex: 0 0 auto;
	max-width: 40%;
}
.howto-aside__photo > img{
	max-width: 100%;
}
.howto-aside__note{
	padding-left: 1em;
	padding-right: 1em;
	
	font-size: .875em;
	line-height: 2em;
}



/* slick custom */
.howto.slick-slider{
	z-index: 0;
	
	display: flex;
	flex-direction: column;
}
.howto .slick-list{
	order: 1;
}


.howto .slick-track{
	display: flex;
	align-items: center;
}
.howto .slick-slide{
	float: none;
}



.howto .slick-dots{
	margin: 0;
	padding: 0;
	list-style: none;
	
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.howto .slick-dots li{
	width: 2em;
	height: 2em;
	
	
	overflow: hidden;
	border-radius: 99em;
	text-align: center;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
.howto .slick-dots button{
	border: 1px transparent;
	
	flex: 1 1 100%;
	
	cursor: pointer;
	
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 100%;
	line-height: 0em;
	text-align: center;
	
	color: #C5718E;
	background-color: transparent;
	outline: 1px transparent;
}
.howto .slick-dots .slick-active button{
	color: #fff;
	background-color: #C5718E;
}
/*
@media all and (-ms-high-contrast:none){
	.howto .slick-dots li{
		border: 1px solid red;
		
		line-height: 1em;
		
		width: 1em;
		height: 1em;
	}
	.howto .slick-dots button{
		border: 1px solid blue;
		
		line-height: 1em;
		
		
		width: 100%;
		height: 100%;
	}
}
*/


.howto .slick-arrow{
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	
	width: 1em;
	height: 1em;
	
	padding: 1em;
	
	text-indent: -999em;
	overflow: hidden;
	
	color: #fff;
	background-color: rgba(0, 0, 0, .5);
	
	
	outline: 0 none;
	border: 1px transparent;
}
.howto .slick-arrow:before{
	content: "";
	
	display: block;
	
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	
	width: 1em;
	height: 1em;
	font-size: .5em;
	
	border-style: solid;
	border-width: 0 .25em .25em 0;
	
	transform: rotate(-45deg);
}
.howto .slick-prev{
	left: 0;
	transform: translateX(-50%);
}
.howto .slick-prev:before{
	transform: rotate(-225deg);
}
.howto .slick-next{
	right: 0;
	transform: translateX(50%);
}





/*--------------------------------------------------

 * 

--------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}