@charset "utf-8";
/* CSS Document */




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

 * otoku 共通アイテム

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

/* original skin */
.button2--longstay{
	color: #fff;
	background-color: #339999;
}



/* reserve button */
.otoku-reserve{
	margin-top: 5em;
	margin-bottom: 5em;
}
.otoku-reserve__items{
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-left: -1em;
	margin-bottom: -.5em;
	
	font-size: 1.125em;
	font-weight: bold;
	line-height: 2em;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.otoku-reserve__item{
	box-sizing: border-box;
	flex: 0 0 auto;
	
	min-width: calc(50% - 1em);
	
	margin-left: 1em;
	margin-bottom: .5em;
}



/* back button */
.otoku-navi{
	color: #999;
	
	font-size: .875em;
	line-height: 2em;
}
.otoku-navi__items{
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-left: -1em;
	margin-bottom: -.5em;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.otoku-navi__item{
	flex: 0 0 auto;
	
	margin-left: 1em;
	margin-bottom: .5em;
}

.otoku__heading{
	font-size: 1.125em;
	font-weight: bold;
	line-height: 2em;
	
	padding-top: .5em;
	padding-bottom: .5em;
	background-color: #efecdf;
}






/*
.otoku_hero{
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.otoku_hero:before,
.otoku_hero:after{
	content: "";
	
	display: block;
	
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.otoku_hero:before{
	filter: blur(12px);
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.otoku_hero:after{
	background-color: rgba(239, 236, 223, .75);
}
.otoku_hero__image{
	max-width: 100%;
}
*/
.otoku_hero{
	text-align: center;
}
.otoku_hero__image{
	max-width: 100%;
}





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

 * otoku 一覧

--------------------------------------------------*/
.plans{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	
	margin-left: -1em;
	margin-bottom: -1em;
}
.plans__item{
	flex: 0 1 auto;
	margin-left: 1em;
	margin-bottom: 1em;
	box-sizing: border-box;
	
	display: flex;
}
@media (min-width: 769px){
	.plans__item{
		flex-basis: calc(25% - 1em);
	}
}
@media (max-width: 768px){
	.plans__item{
		flex-basis: calc(50% - 1em);
	}
}
@media all and (-ms-high-contrast:none) and @media (min-width: 769px){
	.plans__item{
		flex-basis: auto;
		width: calc(25% - 1em);
	}
}
@media all and (-ms-high-contrast:none) and @media (max-width: 768px){
	.plans__item{
		flex-basis: auto;
		width: calc(50% - 1em);
	}
}
.plans__article{
	display: flex;
	flex: 1 1 auto;
}
.plans__link{
	flex: 1 1 auto;
	display: block;
	box-sizing: border-box;
	
	color: inherit;
	text-decoration: inherit;
	
	padding: 1em;
	border: 1px solid #ccc;
	background-color: #fff;
}
.plans__link:hover{
	background-color: #f8f8f8;
}
.plans__image{
	margin-bottom: 1em;
	text-align: center;
}
.plans__photo{
	max-width: 100%;
}
@media all and (-ms-high-contrast:none){
	.plans__photo{
		width: 100%;
	}
}
.plans__bg{
	display: block;
	position: fixed;
	left: 110%;
}
@media (max-width: 768px){
	.plans__image{
		max-width: 186px;
		margin-left: auto;
		margin-right: auto;
	}
}
.plans__body{}
.plans__title{
	margin: 0;
	padding: 0;
	
	font-size: .875em;
	line-height: 1.5em;
	text-align: center;
	
	margin-bottom: 1em;
	padding-bottom: 1em;
	
	border-bottom: 1px solid #ccc;
}
.plans__note{
	margin: 0;
	padding: 0;
	
	font-size: .75em;
	line-height: 1.75em;
}





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

 * ホテル一覧

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


.hotels_area{
	margin: 0;
	padding: 0;
	list-style: none;
}
.hotels_area__item{
	font-size: 1.125em;
	font-weight: bold;
	line-height: 2em;
	
	margin-top: .5em;
	margin-bottom: .5em;
}
.hotels_area__item + .hotels:not(:last-child){
	margin-bottom: 2em;
}



.hotels{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	
	
	margin-left: -1em;
	margin-bottom: -1em;
}
.hotels__item{
	box-sizing: border-box;
	
	flex: 0 1 auto;
	
	margin-left: 1em;
	margin-bottom: 1em;
}

@media (min-width: 769px){
	.hotels__item{
		flex-basis: calc(20% - 1em);
	}
}
@media (max-width: 768px){
	.hotels__item{
		flex-basis: calc(50% - 1em);
	}
}



.hotel__image{
	margin-bottom: .5em;
}
.hotel__photo{
	max-width: 100%;
}
.hotel__body{}
.hotel__name{
	margin: 0;
	padding: 0;
	
	text-align: center;
	
	font-size: 1em;
	line-height: 1.5em;
}



.hotel_nav{
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-top: 1em;
	
	font-size: .75em;
	line-height: 2em;
}
.hotel_nav__item:not(:last-child){
	margin-bottom: .5em;
}





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

 * tokutoku 2017

--------------------------------------------------*/
.i-rate{
	display: flex;
	
	align-items: center;
	justify-content: center;
	
	padding: 1em;
	
	font-size: 1.25em;
	font-weight: bold;
	
	color: #fff;
	background-color: #B62E34;
	
	border-radius: 3px;
}
.i-rate__number{
	font-size: 1.75em;
	font-style: normal;
}


h3.center{
	text-align:center;
	}
p.bordet-t-b{
	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	font-size:0.85em;
	padding:1em 0;
	}

ul.bordet-t-b{
	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	font-size:0.85em;
	padding:1em 0;
	}
ul.bordet-t-b li{
	text-align:left;
	margin:2% 0 2% 3%;
	padding-left:1%;
	}

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

 * slow plan

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


.slow-comp{
	border-collapse: collapse;
	
	margin-left: auto;
	margin-right: auto;
	
	font-size: 1.125em;
	line-height: 2em;
}
.slow-col-head{}
.slow-col-standard-plan{
	background-color: #F0f0f0;
	
	text-align: center;
	
	width: 100px;
}
.slow-col-slow-plan{
	color: #fff;
	background-color: #272F46;
}
.slow-comp__cell{
	padding: .5em 1em;
	border: 1px solid #ccc;
}
.slow-comp__cell--head{
	text-align: center;
	font-weight: normal;
}
.slow-comp__cell--std{
	text-align: center;
	font-weight: normal;
}
.slow-comp__cell--slow{
	text-align: center;
	font-weight: normal;
	
	color: #fff;
}
.slow-comp__thead .slow-comp__cell{
	font-weight: bold;
}







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

 * 長期滞在プラン

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

.grid-longstay{}
.grid-week__head{}
.grid-week__note1{}
.grid-week__note2{}
.grid-week__note3{}
.grid-month__head{}
.grid-month__note1{}
.grid-month__note2{}
.grid-month__note3{}
.grid-gutter__separate{}
.grid-gutter__note1{}
.grid-gutter__note2{}
.grid-gutter__note3{}

.i-gutter{
	color: #999;
	
	position: relative;
	display: block;
	
	height: 100%;
}
.i-gutter:before{
	content: "";
	
	display: block;
	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	
	width: 1px;
	
	border-left: 1px solid;
}

.i-note{
	color: #999;
	
	position: relative;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 3em;
	transform: translateY(.6em);
}
.i-note:before,
.i-note:after{
	content: "";
	
	display: block;
}
.i-note:before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	
	height: 1px;
	border-top: 1px solid;
}
.i-note:after{
	width: 1em;
	height: 1em;
	border-radius: 1em;
	
	background-color: #999;
}

@media (min-width: 769px){
	.grid-longstay{
		width:500px;
		margin:0 auto;
		grid-gap: 1em;
		grid-template-areas:
			"week-head	gutter-head		month-head"
			"week-note1	gutter-note1	month-note1"
			"week-note2	gutter-note2	month-note2"
			"week-note3	gutter-note3	month-note3";
	}
	.grid-week__head{
		grid-area: week-head;
	}
	.grid-week__note1{
		grid-area: week-note1;
	}
	.grid-week__note2{
		grid-area: week-note2;
	}
	.grid-week__note3{
		grid-area: week-note3;
	}
	.grid-month__head{
		grid-area: month-head;
	}
	.grid-month__note1{
		grid-area: month-note1;
	}
	.grid-month__note2{
		grid-area: month-note2;
	}
	.grid-month__note3{
		grid-area: month-note3;
	}
	.grid-gutter__separate{
		grid-area: gutter-head;
		grid-row: 1 / span 4;
	}
	.grid-gutter__note1{
		grid-area: gutter-note1;
	}
	.grid-gutter__note2{
		grid-area: gutter-note2;
	}
	.grid-gutter__note3{
		grid-area: gutter-note3;
	}
}

@media all and (-ms-high-contrast:none) and (min-width: 769px){
	.grid-longstay{
		width:500px;
		margin:0 auto;
		/*grid-template-areas:
			"week-head	gutter-head		month-head"
			"week-note1	gutter-note1	month-note1"
			"week-note2	gutter-note2	month-note2"
			"week-note3	gutter-note3	month-note3";*/
	}
	.grid-week__head{
		grid-area: week-head;
		
		-ms-grid-column: 1;
		-ms-grid-row: 1;
	}
	.grid-week__note1{
		grid-area: week-note1;
		
		-ms-grid-column: 1;
		-ms-grid-row: 2;
	}
	.grid-week__note2{
		grid-area: week-note2;
		
		-ms-grid-column: 1;
		-ms-grid-row: 3;
	}
	.grid-week__note3{
		grid-area: week-note3;
		
		-ms-grid-column: 1;
		-ms-grid-row: 4;
	}
	.grid-month__head{
		grid-area: month-head;
		
		-ms-grid-column: 3;
		-ms-grid-row: 1;
	}
	.grid-month__note1{
		grid-area: month-note1;
		
		-ms-grid-column: 3;
		-ms-grid-row: 2;
	}
	.grid-month__note2{
		grid-area: month-note2;
		
		-ms-grid-column: 3;
		-ms-grid-row: 3;
	}
	.grid-month__note3{
		grid-area: month-note3;
		
		-ms-grid-column: 3;
		-ms-grid-row: 4;
	}
	.grid-gutter__separate{
		grid-area: gutter-head;
		grid-row: 1 / span 4;
		
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 4;
	}
	.grid-gutter__note1{
		grid-area: gutter-note1;
		
		-ms-grid-column: 2;
		-ms-grid-row: 2;
	}
	.grid-gutter__note2{
		grid-area: gutter-note2;
		
		-ms-grid-column: 2;
		-ms-grid-row: 3;
	}
	.grid-gutter__note3{
		grid-area: gutter-note3;
		
		-ms-grid-column: 2;
		-ms-grid-row: 4;
	}
}

@media (max-width: 768px){
	.grid-longstay{
		border: 1px solid #999;
		
		padding: 2em;
	}
	.grid-week__head,
	.grid-month__head{
		margin-bottom: 2em;
	}
	
	.grid-week__note1{}
	.grid-week__note2{}
	.grid-week__note3{}
	
	.grid-month__note1{}
	.grid-month__note2{}
	.grid-month__note3{}
	.grid-gutter__separate,
	.grid-gutter__note1,
	.grid-gutter__note2,
	.grid-gutter__note3{
		display: none;
	}
	
	.grid-month__head:before{
		content: "";
		display: block;
		
		margin-top: 2em;
		margin-bottom: 2em;
		
		margin-left: -2em;
		margin-right: -2em;
		
		border-top: 1px solid #999;
	}
}

/* tab */
.longstay-case{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	margin-left: 1px;
	margin-bottom: 1px;
}
.longstay-case__item{
	border: 1px solid #999;
	
	margin-left: -1px;
	margin-bottom: -1px;
	
	
	padding: .25em 1em;
	
	display: block;
	
	outline: 0 none;
	border-color: transparent;
	background-color: transparent;
	
	font-weight: bold;
	text-align: center;
	
	border: 1px solid #ccc;
}

@media (max-width: 768px){
	.longstay-case__item{
		flex-grow: 1;
	}
}






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

 * sky ticket

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

.sky-hotel{
	margin: 0;
	padding: 0;
	list-style: none;
}
.sky-hotel__item{
	padding: 1em;
	border-bottom: 1px solid #ccc;
}
.sky-hotel__name{
	display: flex;
	align-items: center;
}
.sky-hotel__name:before{
	box-sizing: border-box;
	flex: 0 0 auto;
	
	margin-right: .5em;
	padding: .125em 1em;
	
	font-size: .75em;
	line-height: 2em;
	
	color: #fff;
	background-color: #999;
	
	border-radius: .1875em;
}
.sky-hotel-nav{
	margin: 0;
	padding: 0;
	list-style: none;
	
	font-size: .75em;
	line-height: 2em;
	
	display: flex;
}
.sky-hotel-nav__item:not(:first-child){
	margin-left: 1em;
}
.sky-hotel-nav .button2,
.sky-hotel-nav .button4{
	padding-top: .5em;
	padding-bottom: .5em;
	border-radius: .1875em;
}

@media (min-width: 769px){
	.sky-hotel{
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
	.sky-hotel__item{
		display: flex;
		justify-content: space-between;
	}
	.sky-hotel-nav{
		margin-left: 3em;
	}
}
@media (max-width: 768px){
	.sky-hotel-nav{
		margin-top: 1em;
		justify-content: flex-end;
	}
}


.sky-hotel__name--hokkaido:before	{ content: "北海道"; }
.sky-hotel__name--aomori:before		{ content: "青森"; }
.sky-hotel__name--iwate:before		{ content: "岩手"; }
.sky-hotel__name--miyagi:before		{ content: "宮城"; }
.sky-hotel__name--akita:before		{ content: "秋田"; }
.sky-hotel__name--yamagata:before	{ content: "山形"; }
.sky-hotel__name--fukushima:before	{ content: "福島"; }
.sky-hotel__name--ibaraki:before	{ content: "茨城"; }
.sky-hotel__name--tochigi:before	{ content: "栃木"; }
.sky-hotel__name--gunma:before		{ content: "群馬"; }
.sky-hotel__name--saitama:before	{ content: "埼玉"; }
.sky-hotel__name--chiba:before		{ content: "千葉"; }
.sky-hotel__name--tokyo:before		{ content: "東京"; }
.sky-hotel__name--kanagawa:before	{ content: "神奈川"; }
.sky-hotel__name--niigata:before	{ content: "新潟"; }
.sky-hotel__name--toyama:before		{ content: "富山"; }
.sky-hotel__name--ishikawa:before	{ content: "石川"; }
.sky-hotel__name--fukui:before		{ content: "福井"; }
.sky-hotel__name--yamanashi:before	{ content: "山梨"; }
.sky-hotel__name--nagano:before		{ content: "長野"; }
.sky-hotel__name--gifu:before		{ content: "岐阜"; }
.sky-hotel__name--shizuoka:before	{ content: "静岡"; }
.sky-hotel__name--aichi:before		{ content: "愛知"; }
.sky-hotel__name--mie:before		{ content: "三重"; }
.sky-hotel__name--shiga:before		{ content: "滋賀"; }
.sky-hotel__name--kyoto:before		{ content: "京都"; }
.sky-hotel__name--osaka:before		{ content: "大阪"; }
.sky-hotel__name--hyogo:before		{ content: "兵庫"; }
.sky-hotel__name--nara:before		{ content: "奈良"; }
.sky-hotel__name--wakayama:before	{ content: "和歌山"; }
.sky-hotel__name--tottori:before	{ content: "鳥取"; }
.sky-hotel__name--shimane:before	{ content: "島根"; }
.sky-hotel__name--okayama:before	{ content: "岡山"; }
.sky-hotel__name--hiroshima:before	{ content: "広島"; }
.sky-hotel__name--yamaguchi:before	{ content: "山口"; }
.sky-hotel__name--tokushima:before	{ content: "徳島"; }
.sky-hotel__name--kagawa:before		{ content: "香川"; }
.sky-hotel__name--ehime:before		{ content: "愛媛"; }
.sky-hotel__name--kochi:before		{ content: "高知"; }
.sky-hotel__name--fukuoka:before	{ content: "福岡"; }
.sky-hotel__name--saga:before		{ content: "佐賀"; }
.sky-hotel__name--nagasaki:before	{ content: "長崎"; }
.sky-hotel__name--kumamoto:before	{ content: "熊本"; }
.sky-hotel__name--oita:before		{ content: "大分"; }
.sky-hotel__name--miyazaki:before	{ content: "宮崎"; }
.sky-hotel__name--kagoshima:before	{ content: "鹿児島"; }
.sky-hotel__name--okinawa:before	{ content: "沖縄"; }

.sky-hotel__name--hokkaido:before{
	background-color: ;
}

.sky-hotel__name--aomori:before,
.sky-hotel__name--iwate:before,
.sky-hotel__name--miyagi:before,
.sky-hotel__name--akita:before,
.sky-hotel__name--yamagata:before,
.sky-hotel__name--fukushima:before{
	background-color: ;
}

.sky-hotel__name--ibaraki:before,
.sky-hotel__name--tochigi:before,
.sky-hotel__name--gunma:before,
.sky-hotel__name--saitama:before,
.sky-hotel__name--chiba:before,
.sky-hotel__name--tokyo:before,
.sky-hotel__name--kanagawa:before{
	background-color: #099;
}

.sky-hotel__name--niigata:before,
.sky-hotel__name--yamanashi:before,
.sky-hotel__name--nagano:before{
	background-color: ;
}

.sky-hotel__name--toyama:before,
.sky-hotel__name--ishikawa:before,
.sky-hotel__name--fukui:before{
	background-color: ;
}

.sky-hotel__name--gifu:before,
.sky-hotel__name--shizuoka:before,
.sky-hotel__name--aichi:before,
.sky-hotel__name--mie:before{
	background-color: ;
}

.sky-hotel__name--shiga:before,
.sky-hotel__name--kyoto:before,
.sky-hotel__name--osaka:before,
.sky-hotel__name--hyogo:before,
.sky-hotel__name--nara:before,
.sky-hotel__name--wakayama:before{
	background-color: #f33;
}

.sky-hotel__name--tottori:before,
.sky-hotel__name--shimane:before,
.sky-hotel__name--okayama:before,
.sky-hotel__name--hiroshima:before,
.sky-hotel__name--yamaguchi:before{
	background-color: #c93;
}

.sky-hotel__name--tokushima:before,
.sky-hotel__name--kagawa:before,
.sky-hotel__name--ehime:before,
.sky-hotel__name--kochi:before{
	background-color: ;
}

.sky-hotel__name--fukuoka:before,
.sky-hotel__name--saga:before,
.sky-hotel__name--nagasaki:before,
.sky-hotel__name--kumamoto:before,
.sky-hotel__name--oita:before,
.sky-hotel__name--miyazaki:before,
.sky-hotel__name--kagoshima:before{
	background-color: #930;
}

.sky-hotel__name--okinawa:before{
	background-color: #6c3;
}














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

 * 

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