@charset "utf-8";


body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


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

 - module

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

/* convert background */
.js--bg{
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.js--bg__trigger{
	visibility: hidden;
	
}





.g-include{
	border: 0 none;
	overflow: hidden;
}
.g-include--gnavi{
	margin-top: 40px;
	margin-bottom: 40px;
}
.g-include--hotels{
	margin-top: 40px;
}
.g-include--conceptnav{
	margin-top: 40px;
}
.g-include--onsen-voice{
	margin-top: 40px;
	margin-bottom: 40px;
}
.g-include--goto_travel{
	margin-top: 40px;
	margin-bottom: 40px;
}




.fit{
	width: 100%;
}




.media:after{
	content: "";
	display: block;
	clear: both;
}
.media__image{
	float: left;
	margin-right: 20px;
}
.media__image--right{
	float: right;
	margin-left: 20px;
	margin-right: 0;
}
.media__body{
	overflow: hidden;
}





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

 - base style

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




.g-body{
	margin: 0;
	padding: 0;
	font-feature-settings : "palt";
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	
	
	
	overflow: hidden; /* fix for IE11 (予約ボタン) */
}
.g-wrap{}





.g-header{
	color: #000;
	
	position: relative;
	height: 111px;
	background: url(img/header__bg.png) no-repeat left top;
}
.g-header_logo{
	position: absolute;
	left: 25px;
	top: 50px;
}
.g-header_logo__link{
	color: #000!important;
	text-decoration: none;
}
.g-header_logo__link:hover{
	text-decoration: none;
}
.g-header_logo__text{
	display: block;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.g-header_logo__text--main{
	font-size: 24px;
	font-weight: bold;
	line-height: 1em;
}
.g-header_logo--small .g-header_logo__text--main{
	font-size: 20px;
}
.g-header_logo__text--sub{
	
	display: none;
	
	font-size: 14px;
	line-height: 1.5em;
}
.g-header_logo--small .g-header_logo__text--sub{
	font-size: 12px;
}
.g-header_info{
	position: absolute;
	left: 527px;
	top: 24px;
	
	font-size: 11px;
	line-height: 1.5em;
}
.g-header_info__address{
	font-style: normal;
}
.g-header_info__phone{}
.g-header_info__phone__note{}
.g-header_info__phone__note--tel{}
.g-header_info__phone__note--fax{}
.g-header_map{
	position: absolute;
	right: 41px;
	top: 24px;
}
.g-header_map__link{}





.g-mainvisual{
	position: relative;
}
.g-mainvisual .g-include--reservation{
	position: absolute;
	z-index: 100;
	right: 26px;
	top: 0;
}
.g-brand-concept + .g-mainvisual{
	margin-top: 40px;
}





.g-gnavi{
	width: 950px;
}
.g-gnavi__items{
	margin: 0;
	padding: 0;
	
	display: table;
	width: 100%;
	table-layout: fixed;
}
.g-gnavi__item{
	display: table-cell;
	vertical-align: top;
	text-align: center;
}
.g-gnavi__item:first-child{
	margin-left: 0;
}
.g-gnavi__link{
	display: block;
	margin-left: 8px;
	margin-right: 8px;
}
.g-gnavi__item.is--active .g-gnavi__link{
	background-color: #E6E2D6;
}
.g-gnavi__photo{
	height: 109px;
}
.g-gnavi__link:hover .g-gnavi__photo{
	opacity: .5;
}
.g-gnavi__name{
	padding-top: 10px;
	padding-bottom: 10px;
	background: url(img/bn__title--bg.png) no-repeat right bottom;
}
.g-gnavi__item--top{}
.g-gnavi__item--reservation{}
.g-gnavi__item--plan{}
.g-gnavi__item--room{}
.g-gnavi__item--access{}
.g-gnavi__item--lohas{}






.g-hotelnews{
	margin-top: 40px;
	margin-bottom: 40px;
}
.g-hotelnews__title{
	line-height: 1.33;
	font-size: 1.25em;
	font-weight: bold;
	
	margin-bottom: 1em;
	text-align: center;
}
.g-include--hotelnews{
	width: 100%;
	min-height: 12em;
}






.g-hotels{
	width: 950px;
	height: 599px;
	
	overflow: hidden;
	border-top: 3px solid #000;
	background: url(img/hotels__bg.png) no-repeat left top;
	
	box-sizing:				border-box;
	-o-box-sizing:			border-box;
	-ms-box-sizing:			border-box;
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
}
.g-hotels__heading{
	margin-top: 	20px;
	margin-left: 	20px;
	margin-bottom: 	20px;
}
.g-hotels__items{
	margin: 0;
	padding: 0;
	
	text-align: center;
	margin-left: -10px;
	
	/*letter-spacing: -1em;*/
}
.g-hotels__item{
	width: 80px;
	display: inline-block;
	letter-spacing: normal;
	
	vertical-align: top;
	margin-left: 10px;
	margin-bottom: 10px;
}
.g-hotels__link{
	display: block;
	
	color: inherit;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.25em;
	text-decoration: none;
}
.g-hotels__outer{
	height: 105px;
	overflow: hidden;
	
	margin-bottom: 10px;
	border: 2px solid #fff;
	
	box-shadow: 			2px 2px 2px 0px rgba(0,0,0,.3);
	-o-box-shadow: 			2px 2px 2px 0px rgba(0,0,0,.3);
	-ms-box-shadow: 		2px 2px 2px 0px rgba(0,0,0,.3);
	-moz-box-shadow: 		2px 2px 2px 0px rgba(0,0,0,.3);
	-webkit-box-shadow: 	2px 2px 2px 0px rgba(0,0,0,.3);
}
.g-hotels__name{
	text-align: center;
}






.g-footer{
	height: 122px;
	padding: 0 40px 20px 40px;
	
	background-color: #E6E2D6;
	position: relative;
	
	box-sizing:				border-box;
	-o-box-sizing:			border-box;
	-ms-box-sizing:			border-box;
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
}
.g-footer_logo{
	padding-top: 24px;
	margin-bottom: 10px;
	background: url(img/footer__logo.png) no-repeat left top;
}
.g-footer_logo__text{
	display: block;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.g-footer_logo__text--main{
	font-size: 14px;
	font-weight: bold;
	line-height: 1em;
}
.g-footer_logo__text--sub{
	
	display: none;
	
	font-size: 12px;
	line-height: 1.5em;
}
.g-footer_info{
	font-size: 10px;
	line-height: 1.5em;
}
.g-footer_info__address{}
.g-footer_info__phone{}
.g-footer_info__phone__note{}
.g-footer_info__phone__note--tel{}
.g-footer_info__phone__note--fax{}
.g-footer_info__checkin{}
.g-footer_mailmag{
	position: absolute;
	right: 40px;
	bottom: 20px;
}
.g-footer_mailmag__link{}





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

 - top page

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



.g-news-frame{
	border: 1px solid;
}
.g-news{
	padding: 1em;
}
.g-news__title{
	line-height: 2;
	font-size: 1.25em;
	font-weight: bold;
}
.g-news__more{
	color: inherit;
	text-decoration: inherit;
}

.g-news-list{
	margin: 0;
	padding: 0;
	list-style: none;
	
	line-height: 2;
	font-size: .875em;
	
	
	height: 6em;
	overflow: auto;
}
.g-news-list__item{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}






.g-catch{
	position: relative;
	height: 134px;
	background: url(img/catch__bg.png) no-repeat left top;
}
.g-catch__inner{
	display: table;
	position: absolute;
	left: 450px;
	right: 0;
	top: 0;
	
	width: 460px;
	height: 100%;
}
.g-catch__note{
	display: table-cell;
	vertical-align: middle;
	
	font-size: 14px;
	line-height: 1.5em;
}






.g-concept{
	position: relative;
	border-top: 3px solid #000;
	margin-bottom: 40px;
}
.g-concept__bg{
	height: 202px;
	overflow: hidden;
	background-color: #000;
}
.g-concept__bg img{
	opacity: .5;
}
.g-concept__inner{
	display: table;
	position: absolute;
	left: 0;
	top: 0;
	height: 202px;
}
.g-concept__content{
	display: table-cell;
	padding: 20px 40px;
	text-align: left;
	vertical-align: middle;
	
	color: #fff;
	font-feature-settings : "palt";
}
.g-concept__heading{
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1em;
}
.g-concept__note{
	font-size: 14px;
	line-height: 1.5em;
}





.g-rooms{
	margin-bottom: 60px;
}
.g-room{
	position: relative;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 40px;
}
.g-room:after{ content: ""; display: block; clear: both; }
.g-room__photo{
	float: left;
	width: 605px;
	height: 264px;
	overflow: hidden;
	margin-right: 40px;
}
.g-room__name{
	overflow: hidden;
	padding-left: 10px;
	
	color: #000;
	border-left: 5px solid;
}
.g-room__name--main{
	font-size: 20px;
	font-weight: bold;
	line-height: 1em;
}
.g-room__name--sub{
	font-size: 12px;
	font-weight: normal;
	line-height: 1em;
	
	margin-top: 1em;
}
.g-room__reserve{
	position: absolute;
	right: 0;
	bottom: 0;
}






.g-facilities{
	padding-left: 15px;
	padding-right: 40px;
}
.g-facilities__grid{
	float: left;
	width: 420px;
	margin-left: 25px;
}
.g-facilities__group{
	margin-bottom: 20px;
}
.g-facilities__heading{
	padding: 10px 15px;
	margin-bottom: 10px;
	
	color: #000;
	border: 1px solid;
}
.g-facilities__heading--main{
	font-size: 16px;
	font-weight: bold;
	line-height: 1em;
	vertical-align: middle;
	display: inline-block;
}
.g-facilities__heading--sub{
	font-size: 12px;
	font-weight: normal;
	line-height: 1em;
	vertical-align: middle;
	display: inline-block;
	margin-left: 1em;
}
.g-facility__items{
	margin-left: -1em;
}
.g-facility__item{
	list-style: none;
	display: inline-block;
	margin-left: 1em;
	
	
	font-size: 13px;
	line-height: 1.5em;
}




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

 - gallery

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

.g-gallery{
	margin: 0;
	padding: 0;
	list-style: none;
	
	border: 1px solid #B3B3B3;
}
.g-gallery__item{}
.g-gallery__photo{}









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

 - brand navi

----------*/
.brand-nav{}
.brand-nav__items{
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-left: -1.5em;
	margin-bottom: -1em;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	color: #999;
}
.brand-nav__item{
	border: 1px solid;
	margin-left: 1.5em;
	margin-bottom: 1em;
}
.brand-nav__link{
	display: block;
	color: inherit;
	text-decoration: none;
	
	box-sizing: border-box;
	padding: .5em 2em;
	
	transition: color 96ms ease-out;
}
.brand-nav__link:hover{
	color: #000;
}
.brand-nav__ruby,
.brand-nav__note{
	display: block;
	text-align: center;
}
.brand-nav__ruby{
	font-size: 1.125em;
	line-height: 2em;
}
.brand-nav__note{
	font-size: .875em;
	line-height: 2em;
}

/* 状態 */
.brand-nav__item--active{
	color: #000;
}
.brand-nav__item--active .brand-nav__link{
	pointer-events: none;
}









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

 - onsen voice

----------*/
.voice{
	position: relative;
	z-index: 0;
	
	padding-top: 3em;
	padding-bottom: 3em;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(//www.superhotel.co.jp/onsen/img/gallery__bg.jpg);
}
.voice__mask{
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	
	height: 30px;
	width: 100%;
}
.voice__maskPolygon{
	fill: #fff;
}
@media (max-width: 768px){
	.voice__mask{
		display: none;
	}
}
.voice__inner{}
.voice__heading{
	margin: 0;
	padding: 0;
	
	margin-bottom: 1rem;
	margin-left: 1em;
	margin-right: 1em;
	
	color: #fff;
	font-size: 1.75em;
	font-weight: normal;
	line-height: 2em;
}
.voice__items{
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 768px){
	.voice__items{
		padding-left: 1em;
		padding-right: 1em;
	}
}
.voice__item{
	box-sizing: border-box;
	
	display: flex;
	
	overflow: hidden;
	border-radius: 6px;
	background-color: rgba(255,255,255,.9);
	
	box-shadow: 0 0 3px #333;
}
.voice__photo{
	flex: 0 0 auto;
	max-width: 50%;
}
.voice__img{
	max-width: 100%;
}
.voice__notes{
	align-self: center;
	flex: 1 1 auto;
	
	padding: 1em;
	
	font-size: .875em;
	line-height: 2em;
}
@media (max-width: 768px){
	.voice__photo{
		order: 1;
	}
}




/* slick custom */
.voice__items{
	z-index: 0;
}
.voice__items .slick-slide{
	transition: opacity 180ms ease-in-out;
}
.voice__items .slick-slide:not(.slick-current){
	opacity: .25;
}
.voice__items .slick-slide{
	margin-left: 1em;
	margin-right: 1em;
}
.voice__items .slick-slide > div{}

@media (min-width: 769px){
	.voice__items .slick-slide > div:nth-child(1){
		margin-bottom: 1em;
	}
	.voice__items .slick-slide div:nth-child(1)	.voice__item{
		transform: translateX(-80%);
	}
	.voice__items .slick-slide div:nth-child(2)	.voice__item{
		transform: translateX(-20%);
	}
	.voice__items .slick-slide div:nth-child(1)	.voice__photo{
		order: 1;
	}
}

.voice__items .slick-arrow{
	cursor: pointer;
	
	border-color: transparent;
	background-color: transparent;
	
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	
	text-align: left;
	text-indent: -999em;
	overflow: hidden;
	
	font-size: 3em;
	width: 1.5em;
}
.voice__items .slick-arrow:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	
	font-size: inherit;
	width: 1em;
	height: 1em;
	box-sizing: border-box;
	border-color: #fff;
	border-style: solid;
	border-width: 0 1px 1px 0;
	transition: opacity 64ms ease-out;
	
	transform: rotate(-225deg) translate(-12.5%, -12.5%);
	transform-origin: 62.5% 62.5%;
}
.voice__items .slick-prev{
	left: 0;
}
.voice__items .slick-next{
	right: 0;
}
.voice__items .slick-next:before{
	transform: rotate(-45deg) translate(-12.5%, -12.5%);
}

@media (max-width: 768px){
	.voice__items .slick-list{}
	.voice__items .slick-track{
		display: flex;
		align-items: center;
	}
	.voice__items .slick-slide{
		float: none;
	}
}





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

 - safety

----------*/
.g-safety{
	text-align: center;
}




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

 - safety

----------*/
.g-covid-19{
	text-align: center;
}





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

 - goto travel

----------*/
.bn-goto-travel{
	text-align: center;
}





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

 - Plan list

----------*/
.g-plan{}
.plan-sect{
	margin: 3.75em 0;
}
.plan-anchor{}



.plan-header{
	text-align: center;
	
	background: #E5E1D5;
	padding: 0 1.5em 1.5em 1.5em;
}
.plan-header__title{
	font-size: 1.75em;
	margin-bottom: 1em;
}



.plan-head-nav{
	display: flex;
	justify-content: center;
	
	margin: 0 0 0 -1em;
}
.plan-head-nav__item{
	margin: 0 0 0 1em;
}
.plan-head-nav__more{
	font-size: .875em;
	font-weight: bold;
	
	color: inherit !important;
	
	display: block;
	box-sizing: border-box;
	
	border: 1px solid #999;
	border-radius: 3px;
	
	padding: 1em;
}
.plan-head-nav__more:hover{
	text-decoration: inherit;
	background: #B2AEA5;
}



.plan-title{
	font-size: 1.25em;
	font-weight: bold;
	
	display: flex;
	align-items: center;
	
	margin: 0 0 1em;
}
.plan-title__icon{
	font-size: .85em;
	
	flex: 0 0 auto;
	
	color: #fff;
	background: #999;
	border-radius: 3px;
	
	padding: .5em;
	margin-right: .5em;
}
.plan-title__icon--recommend{
	background: #FC4850;
}
.plan-title__icon--benefit{
	background: #C148FC;
}
.plan-title__icon--minority{
	background: #59ADFF
}
.plan-title__icon--group{
	background: #90C418;
}
.plan-title__main{
	flex: 1 1 auto;
}



.plan-list{
	display: flex;
	flex-wrap: wrap;
	
	margin: 0 0 -2em -3.33%;
}
.plan-list__item{
	box-sizing: border-box;
	flex: 0 0 30%;
	margin: 0 0 2em 3.33%;
}
.plan-list__more{
	color: inherit !important;
}
.plan-list__more:hover{
	text-decoration: inherit;
}
.plan-list__thumb{
	text-align: center;
	margin-bottom: 1em;
}
.plan-list__banner{
	max-width: 100%;
}
.plan-list__title{
	font-size: 1.125em;
	font-weight: bold;
	margin: 0 .5rem .75em;
}
.plan-list__note{
	font-size: .75em;
	margin: 0 .5rem;
}