@charset "utf-8";

/*###########################################################

 全ページ共通のレスポンシブ
 
#############################################################/*/

@media screen and (max-width: 1320px) {		/* 画面の横幅が1300pxまでの幅の場合に適応される(iPad 横) */
	img{max-width: 100%;height: auto;width /***/:auto;　}

	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper{overflow: hidden;}
	.index-container{width: 98%;margin: 0 auto;}
	.container{width:98%;padding:0;}


	/*//////// indexのお部屋・温泉・料理 ///////////////////////*/
	.index-box-title,
	.index-box-title-right{width: 300px;height: 300px;}
	
	.index-box-title1 {padding-top: 35px;}
	
	.index-box-com-left,
	.index-box-com-right {margin-top: 340px;}
	
	.index-box-img-left,
	.index-box-img-right{width:87%;}
}




@media screen and (max-width: 1220px) {
	/*//////// 全ページ共通のheader ///////////////////////*/
	/*上から出現するメニュー----------*/
	.header-container {width: 98%;}
	#menutop li a {padding: 6px 10px 7px 10px;}
	#menutop li.btn-reserve-top a {font-size: 100%;width: 120px;}
	
	/*初期下部のメニュー*/
	#menu li a{padding: 9px 14px 12px 14px;}
	#menu li.btn-reserve a {width: 140px;padding: 10px 5px 0 5px;}
	
	
	/*//////// indexのお部屋・温泉・料理 ///////////////////////*/
	.index-box-title,
	.index-box-title-right{width:280px;height:280px;}

	.index-box-title1 {font-size: 410%;}
	.index-box-title2 {padding-top: 25px;}
	.index-box-title3 {padding-top: 22px;}
	.index-box-title-kuwashiku a {margin: 25px auto 0 auto;}
		
	.index-box-com-left,
	.index-box-com-right {margin-top:310px;font-size: 129%;}
}






@media screen and (max-width: 1130px) {
	/*-------------------------------------------------------------------------
	ページ上部右の出てくるスマホ用のナビmenuが出現して、入れ替わりに横メニューが消える
	--------------------------------------------------------------------------*/
	/*初期下部のメニューを非表示*/
	.under-menu-space{display: none;}

	/*上から出現するメニュー----------*/
	/*横メニューを非表示*/
	#change{display: none !important;}
	
	/*ページ上部右に出てくるスマホ用のナビmenu---*/
	.hamburger{display:block;z-index: 800;width:70px;height:70px;top:0px;right:0px;left: unset;background-color: #004688;}
	/* -----google言語翻訳ウィジェット  後ろにヘッダが隠れないようにずらす*/
	html.translated-ltr .hamburger {top: 40px;}
	.google-lang {max-width: 107px;margin: 0;left: 12px;}
	html.translated-ltr .google-lang {top: 56px !important;left: 12px;}

	/*メニューと閉じるの文字追加*/
	a.hamburger{text-decoration: none;}
	a.hamburger::after{content: 'メニュー';font-size: 9px;margin-left: 4px;color: #fff;font-family:sans-serif;font-weight:bold;}
	a.hamburger.active::after{content: '閉じる';font-size: 11px;color: #fff;font-family: initial;margin-left: 6px;}


	.hamburger__icon,
	.hamburger__icon::before,
	.hamburger__icon::after {width: 38px;background-color: #ccc;}
			
	.hamburger__icon {margin: 12px 0 10px 5px;}
	a.hamburger.active .hamburger__icon {margin: 12px 0 15px 4px;}
	
	.fat-nav{z-index:700;}
	.fat-nav ul {width: 100%;}
	.fat-nav li {padding:9px;font-size: 115%;}
	
	.fat-nav li a{letter-spacing: 0.2em;}
	
	.fat-nav ul ul{display:block;width:170px;margin: 0 auto;}

	/*------------------------------------
	ページ上部右の出てくるナビmenu
	------------------------------------*/
	#navi_sp ul#yoko-menu-sp li a:hover{opacity:0.6;}
	
	/*submenu*/
	#navi_sp ul#yoko-menu-sp li.spbox00 > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02 > a{background:url(../img/arrow_down_white7-6.png) no-repeat left center;padding-left: 10px;}
	#navi_sp ul#yoko-menu-sp li.selected > a{}
	
	#navi_sp ul#yoko-menu-sp ul.sub{border-top: 1px solid #666;border-bottom: 1px solid #666;margin: 10px auto 0 auto;padding: 5px 0;font-size: 79%;}
	
	#navi_sp ul#yoko-menu-sp ul.sub li a{letter-spacing:0;}


	/*vegasの下部のページャー*/
	ul.vegas-pager-navi{display:none;}

	/*下へボタン--点滅させる*/
	.btn-scroll {bottom: 20px;}
	.btn-scroll:hover {bottom:10px;}

}







@media screen and (max-width: 1046px) {
	/*index専用---newsボックス---最新情報------*/
	.news-content {width: 90%;}


	/*index専用---お部屋・温泉・料理---------------*/
	.index-box-title,
	.index-box-title-right{width:260px;height:260px;}

	.index-box-title1 {font-size:390%;}
	.index-box-title2 {padding-top:23px;}
	.index-box-title3 {padding-top:20px;}
	.index-box-title-kuwashiku a {margin:23px auto 0 auto;}
	
	.index-box-com-left,
	.index-box-com-right {margin-top:280px;font-size: 122%;line-height: 2.0;}
	.index-box-com-left span,
	.index-box-com-right span {padding: 1px 10px 2px 10px;}


	/*全ページ共通の宿泊プラン　-----------------*/
	.gallery-box {width: 98%;text-align: center;}
	.gallery-box .gallery {float:none;margin-right: 25px;display: inline-block;}
	.zoom-box {width: 280px;height: 200px;}
	.zoomin1 h3{width:280px;height:200px;padding-top: 45px;}
}






@media screen and (max-width: 980px) {		/*960px*/
	/*ページ下部の予約検索のフォーム部分*/
	.etc-yoyaku {display: none;}
	#booking-inner {float: none;width: 620px;}
}




@media screen and (max-width: 920px) {		/*900px*/	
	/*全ページ共通の宿泊プラン　-----------------*/
	.gallery-box .gallery {width: 30%;margin-right: 2%;}
	.zoom-box {width: 100%;}
	.zoomin1 h3 {width: 29.5%;}

	
	/*全ページ共通のフッター -------------------*/
	ul.footer-zip-ul li.tel ul.footer-tel {float: left;}
	/*sp専用のfacebook、insyagramアイコンが出現*/
	ul.footer-sp-icon {display:inline-block;float: left;margin: 0 0 0 20px;}
	ul.footer-sp-icon li{display:inline-block;margin-right:10px;}
}





@media screen and (max-width: 860px) {		/*840px*/	
	/*big画像上部のオープンテキスト*/
	h2.bigimg-txt1 {font-size: 180%;letter-spacing: 0.1em;}

	/*全ページ共通のメイン-------------------*/
	h2{font-size:300%;}

		
	/*index専用---お部屋・温泉・料理---------------*/
	.index-box-title,
	.index-box-title-right {width: 230px;height: 230px;}
	.index-box-title1 {font-size: 360%;}
	.index-box-title2 {padding-top: 15px;font-size: 60%;}
	.index-box-title3 {padding-top: 12px;font-size: 86%;}
	.index-box-title-kuwashiku a {margin: 17px auto 0 auto;}
	.index-box-com-left,
	.index-box-com-right {margin-top: 250px;font-size: 115%;margin-left: 5px;}
	.index-box-com-right {margin-right: 5px;}
	
	/*全ページ共通のフッター --------*/
	.footer-cont{width:100%;text-align: center;}
	.footer-left {float: none;}
	ul.footer-zip-ul {text-align: center;}
	ul.footer-zip-ul li.tel ul.footer-tel {text-align: center;float: unset;}
	.footer-right {float: none;width: 100%;text-align: center;margin-top:20px;}
	.footer-right dl.footer-yoyaku-dl dt {float: none;}
	.footer-right dl.footer-yoyaku-dl dt.btn-reserve-footer a {margin: 0 auto;}
	.footer-right dl.footer-yoyaku-dl dd {float: none;padding-top: 8px;}

	ul.footer-sp-icon {float: unset;margin: 5px 0 0 20px;}
}





@media screen and (max-width: 820px) {
	/*-- ページ上部右の出てくるスマホ用のナビ -----*/
	.fat-nav li {padding: 7px;font-size: 108%;}

	/*全ページ共通のフッター --------*/
	ul#footermenu-ul span {display:contents;}
}





@media screen and (max-width: 780px) {		/* 760px*/
	.container{width:94%;}

	/*全ページ共通の宿泊プラン　-----------------*/
	.zoomin1 h3 {padding-top: 55px;}
	.zoomin1 h3 img {width: 160px;}

	/*全ページ共通のフッター --------*/
	/*空室の検索のボタンを隠す*/
	.footer-right dl.footer-yoyaku-dl dd p.kuushitu{display:none;}
	
}






@media screen and (max-width: 650px) {		/*画面の横幅が630px*/	
	/*index専用---お部屋・温泉・料理---------------*/
	.index-box-img-left,
	.index-box-img-right {width: 100%;}
	.index-box-img-right {float: none;}
	
	.index-box-title,
	.index-box-title-right {position: relative;width:70%;height:170px;margin: 0 auto;}
	.index-box-title1 {font-size: 340%;padding-top: 20px;}
	.index-box-title2 {display: none;}
	
	.index-box-com-left,
	.index-box-com-right {position: relative;margin: 15px 5px 15px 10px;font-size:115%;text-align:left;letter-spacing: 0.1em;}
	.index-box-com-left span,
	.index-box-com-right span { padding: 1px 0 2px 0;background-color: transparent;}
	.index-box-com-left br,
	.index-box-com-right br{display:none;}


	/*index専用---newsボックス---最新情報------*/
	.news-content {width: 100%;}
	#index-news-waku dd {padding: 0 5px 0 120px;background: url(../img/arrow_blue4-7.png) no-repeat 112px 8px;}
	
	/*全ページ共通のフッター --------*/
	ul.footer-zip-ul li {font-size: 100%;}
	ul.footer-zip-ul li span {display:block;}
}





@media screen and (max-width: 570px) {		/*画面の横幅が550px*/	
	body {color:#000;}
	#main{font-size: 85%;}
	#footer {font-size: 90%;}

	/*index専用のテーブル構造　-------------------*/
	body#home .section{padding:60px 0 60px 0;}
	.btn-scroll {height: 100px;}
	
	/*全ページ共通のメイン-------------------*/
	h2 {font-size: 250%;}
	.h2-mark {height: 33px;width: 33px;margin: 0 auto;}
	.h2-mark img{max-width:100%;height:auto;}
	
	/*big画像上部のオープンロゴ*/
	.bigimg-rogo img{width:200px;}
	h2.bigimg-txt1 {font-size: 150%;}

	/*index専用---お部屋・温泉・料理---------------*/
	.index-box-title, .index-box-title-right {height: 150px;}
	.index-box-title1 {font-size: 300%;padding-top: 17px;}
	.index-box-title3 {padding-top: 7px;}
	.index-box-title-kuwashiku a {margin: 12px auto 0 auto;}

	/*newsボックス---最新情報 Whatsnew-----------------*/
	#index-news-waku dt{float:none; font-size: 93%;padding: 0 0 3px 10px;}
	#index-news-waku dd {padding: 0 5px 0 28px;background: url(../img/arrow_blue4-7.png) no-repeat 20px 8px;}

	/*全ページ共通の宿泊プラン　-----------------*/
	.gallery-box {margin: 30px auto 0 auto;}
	.gallery-box .gallery {width:315px;margin-right: 0;margin-bottom: 10px;}
	.zoomin1 h3 {width: 100%;right: 0;left: 0;padding-top: 55px;}
	.zoomin1 h3 img {width: 160px;}	
	
	/*-++++++++++++　全ページ共通のフッター +++++++++++++++*/
	.foot-rogo a {width: 180px;height: 45px;background-size: contain;}
	.footer-cont {margin: 5px auto 0 auto;}
}





@media screen and (max-width: 420px) {		/* 画面の横幅が400px*/	
	/*big画像上部のオープンロゴ*/
	.bigimg-rogo {top: 14%;}
	.bigimg-rogo img{width:180px;}
	
	h2.bigimg-txt1 {font-size:129%;}
}







@media screen and (max-width: 340px) {		/* 画面の横幅が320px*/	
	/*全ページ共通の宿泊プラン　-----------------*/
	.gallery-box .gallery {width:280px;}
	.zoom-box {height: 180px;}
	.zoomin1 h3 {padding-top: 40px;}
}