@charset "utf-8";



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

 * contents

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

.hero{
	padding-top: 10em;
	padding-bottom: 2.5em;
}
.hero__bg{}
.hero__inner > *{
	width: 40%;
	margin-left: auto;
}
.hero__heading{
	text-align: right;
}
.hero__notes{
	margin-top: 4em;
	margin-bottom: 4em;
}


.hero-about{
	margin-top: 4em;
	margin-bottom: 4em;
}
.hero-about__title{
	font-size: 1.25em;
}
.hero-about__note{}

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






.i-data{
	padding-top: 3.75em;
	background-color: #F1F1F1;
}

@media (min-width: 769px){
	.i-data__nav{
		justify-content: flex-start;
	}
	.i-data__media{
		margin-top: 2em;
	}
	.i-data__media .media__body{
		padding-bottom: 3em;
	}
}
@media (max-width: 768px){
	.i-data{
		padding-bottom: 3.75em;
	}
	
}

img.illust{
	width:80%;
	display:block;
	margin:0 auto;
	border-radius:5px;
	box-shadow: 3px 5px 5px #cccccc;
	}
@media (max-width: 768px){
img.illust{
	width:90%;
}
}

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






.i-nav{}
.i-nav__items{
	margin: 0;
	padding: 0;
	list-style: none;
}
.i-nav__item{
	position: relative;
	z-index: 0;
}
.i-nav__bg{
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
}
.i-nav__bg--left{
	left: 0;
	right: 60%;
}
.i-nav__bg--right{
	left: 60%;
	right: 0;
}
.i-nav__bg--all{
	left: 0;
	right: 0;
}
.i-nav__bg:after{
	content: "";
	display: block;
	
	position: absolute;
	top: 0;
	bottom: 0;
	min-width: 100px;
}
.i-nav__bg--left:after{
	right: 0;
}
.i-nav__bg--right:after{
	left: 0;
}
.i-nav__bg-data{}
.i-nav__item .sitewidth{
	position: relative;
	z-index: 0;
}



.i-nav__title{
	margin: 0;
	padding: 0;
	
	margin-bottom: 1.5em;
	
	font-size: 1.875em;
	font-weight: bold;
	line-height: 1.25em;
}
.i-nav__note{
	margin: 0;
	padding: 0;
}
.i-nav__more{
	margin-top: 1.625em;
}

.i-nav__item--ion{
	color: #fff;
	background-color: #5E5249;
}
.i-nav__item--pillow{
	background-color: #CFC2B2;
}
.i-nav__item--bedding{
	color: #fff;
	text-align: center;
}
.i-nav__item--cocochi{
	background-color: #E5AE80;
}
.i-nav__item--onsen{
	color: #fff;
	text-align: center;
}


.i-nav__item--ion .i-nav__bg:after{
	background-image: linear-gradient(to right, transparent, #5E5249);
}
.i-nav__item--pillow .i-nav__bg:after{
	background-image: linear-gradient(to left, transparent, #CFC2B2);
}
.i-nav__item--bedding .i-nav__bg:after{}
.i-nav__item--cocochi .i-nav__bg:after{
	background-image: linear-gradient(to left, rgba(229, 174, 174, 0), #E5AE80);
}
.i-nav__item--onsen .i-nav__bg:after{}

@media (min-width: 769px){
	.i-nav__item{
		padding-top: 3em;
		padding-bottom: 3em;
	}
	.i-nav__bg--left{
		left: 0;
		right: 60%;
	}
	.i-nav__bg--right{
		left: 60%;
		right: 0;
	}
	.i-nav__bg--left + .sitewidth > .i-nav__inner{
		margin-left: calc(40vw - (100vw - 100%) / 2);
	}
	.i-nav__bg--right + .sitewidth > .i-nav__inner{
		margin-right: calc(40vw - (100vw - 100%) / 2);
	}
	.i-nav__item--bedding,
	.i-nav__item--onsen{
		padding-top: 6em;
		padding-bottom: 6em;
	}
}
@media (max-width: 768px){
	.i-nav__item{
		padding-top: 6em;
		padding-bottom: 6em;
	}
	.i-nav__bg--left{
		left: 0;
		right: 40%;
	}
	.i-nav__bg--right{
		left: 40%;
		right: 0;
	}
	.i-nav__bg--left + .sitewidth > .i-nav__inner{
		margin-left: calc(60vw - (100vw - 100%) / 2);
	}
	.i-nav__bg--right + .sitewidth > .i-nav__inner{
		margin-right: calc(60vw - (100vw - 100%) / 2);
	}
	.i-nav__note{
		display: none;
	}
}


















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

/* Advanced */
@media (max-width: 1024px) and (min-width: 768px){}