@charset "utf-8";

/*//////////// 基本サイズ14px  ////////////
表示サイズ　指定する値
8px 　58%
9px 　65%
10px　72%
11px　79%
12px　86%
13px　93%
14px　100%
15px　108%
16px　115%
17px　122%
18px　129%
19px　136%
20px　143%
21px　150%
22px　158%
23px　165%
24px　172%
25px　179%
26px　186%
27px　193%
28px　200%
29px　208%
30px　215%
31px　222%
32px　229%
33px　236%
34px　243%
35px　250%
36px　258%
//////////////////////////////*/

/*************************************************
	index専用
*************************************************/
/*index専用のテーブル構造　-------------------*/
body#home .section{padding:80px 0 100px 0;}
/*body#home .section:nth-child(2n){background-color: rgba(188, 186, 92, 0.1);}*/
body#home .section:nth-child(2n){background-color: rgba(204, 204, 204, 0.25);}

.index-container{}




/*----トップローディング ---------------------*/
#loader {position: fixed;z-index:9000;text-align: center;width: 100%;height: 100%;background-color:#fff;}
#load-text {position: fixed;font-size: 72%;color: #999;text-align: center;width: 100%;top: 50%;margin-top: -90px;padding-top:90px;display: block;background:url(../js/loading.png) no-repeat center top;}
/*
#load-text {position: absolute;font-size: 72%;color: #888;text-align: center;width: 100%;top: 50%;margin-top: -90px;padding-top:100px;display: block;}
*/
/*横に伸びるバー
#bar {width: 100%;height: 1px;font-size: 2px;position: absolute;top: 50%;}
#bar span {display: block;width: 0px;height: 1px;background: #777;}*/



/*///////////////////////////////////////////////////////////////////////////////
 index専用のheader
///////////////////////////////////////////////////////////////////////////////*/
/*スライドで降りてきた場合　ページ上部のメニュー*/
#change{position: fixed;top: 0px;left: 0px;width: 100%;height:97px;background-color:rgba(255,255,255,1.0);text-align: center;display: none;z-index:100;border-top: 3px solid #004688;border-bottom: 1px solid #ccc;}
/*IE8以上*/
#change{height:94px\0;}


.header-bg{top:0;position:absolute;height:80px;z-index:3;width:100%;border-top: 3px solid #000;background-color:#fff;border-bottom: 1px solid #ccc;}
.logo-area{width:100%;margin:0 auto;text-align:center;}

/*big画像上部のオープンロゴ*/
.bigimg-rogo{position: relative;padding-top: 5%;text-align: center;right: 0;left: 0;z-index: 1;}
/*.bigimg-txt{position:relative;top:39%;text-align:center;}*/
.bigimg-txt {position: absolute;top: 42%;margin: 0 auto;right: 0;left: 0;}

h2.bigimg-txt1{font-size: 220%;text-align: center;color: #eee;line-height: 1.2;letter-spacing: 0.3em;font-weight: 400;margin-top: 5px;text-shadow: 0px 0px 3px #0f100f;}
h2.bigimg-txt1 span{font-weight: 400;margin-right:10px;}
h2.bigimg-txt1 strong{font-weight: 400;}


/* TOP上部の切り替わる画像-----------------------*/
/*vegasの左右の矢印 next、prev*/
ul.vegas-leftright-navi li a{position: absolute;top:40%;z-index:300;}
ul.vegas-leftright-navi li.prev a{left: 10px;background: url(../img/bx_arrow_left.png) no-repeat 0 0;height: 65px;width: 34px;display:block;text-indent: -9999px;}
ul.vegas-leftright-navi li.next a{right: 10px;background: url(../img/bx_arrow_right.png) no-repeat 0 0;height: 65px;width: 34px;display:block;text-indent: -9999px;}
ul.vegas-leftright-navi li a:hover,
ul.vegas-leftright-navi li a:focus{background-color:rgba(255, 255, 255,0.4);}

/*vegasの下部のページャー*/
ul.vegas-pager-navi{position:absolute;bottom:165px;right:0;left:0;text-align:center;}
ul.vegas-pager-navi li{display:inline;margin: 0 2px;font-size:10px;}
ul.vegas-pager-navi li a{color:#004688;text-decoration:none;}
ul.vegas-pager-navi li a:hover{opacity:0.5;}


/* TOP上部の動画（pcとスマホで切り替え）-----------------------*/
#topmovie-box {position: relative;width: 100%;height: 100vh;overflow: hidden;}
video.top-movie {position: absolute;left: 0;top: 0;min-height: 100%;min-height: 100vh;min-width: 100%;min-width: 100vw;z-index: -1;
							background: url(../sp202003.jpg) no-repeat center top;background-attachment: fixed;background-size:cover;}



/*下へボタン--点滅させる*/
.btn-scroll{position:absolute;bottom:102px;right:0;left:0;margin:0 auto;background: url("../img/index_downhead.png") no-repeat center top;width:72px;height:65px;text-indent: -9999px; overflow: hidden;display:block;
						-webkit-animation:blink 1.0s ease-in-out infinite alternate;-moz-animation:blink 1.0s ease-in-out infinite alternate;animation:blink 1.0s ease-in-out infinite alternate;}
.btn-scroll:hover{bottom:97px;opacity:0.4;}

/*点滅させる*/
@-webkit-keyframes blink{
	0%{opacity:0.6;}
100%{opacity:1;}
}
@-moz-keyframes blink{
	0%{opacity:0.6;}
100%{opacity:1;}
}
@keyframes blink{
	0%{opacity:0.6;}
100%{opacity:1;}
}





/*-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　index専用のメイン
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*お部屋 客室--------------*/
.index-box{max-width:1433px;margin:0 auto;position:relative;}
.index-box-title{position:absolute;z-index: 50;width:318px;height:318px;text-align:center;background:url(../img/index_box_title_bg.png) no-repeat center top;}
.index-box-title1{font-size: 450%;color: #fff;letter-spacing: 0.4em;line-height: 1.2;padding-top:47px;text-indent: 0.4em;}
.index-box-title2{font-size:72%;color:#8cc8da;line-height:1.2;padding-top:33px;}
.index-box-title3{font-size:100%;color:#fff;letter-spacing:0.2em;line-height:1.2;padding-top:30px;}

.index-box-com-left{position: absolute;z-index: 40;margin-top: 380px;margin-left: 20px;font-size: 136%;line-height: 2.2;letter-spacing: 0.2em;}

/*.index-box-com-left span{background-color: rgba(250,250,250,1.0);padding: 2px 10px 4px 10px;}*/
.index-box-com-left span{text-shadow: -1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff,-2px -2px 2px #fff,2px -2px 2px #fff,-2px 2px 2px #fff,2px 2px 2px #fff;}

.index-box-title-kuwashiku a{color: #fff;padding: 3px 0 6px 0;background-color: #002546;display: block;text-decoration: none;font-size: 93%;text-align: center;width: 130px;margin: 30px auto 0 auto;line-height: 1.2;}
.index-box-title-kuwashiku a:hover{background-color: #006bcc;}

.index-box-img-right{float: right;}


/*温泉--------------------*/
.index-box-title-right{position:absolute;right:0;width:318px;height:318px;text-align:center;background:url(../img/index_box_title_bg.png) no-repeat center top;}

.index-box-com-right{position: absolute;right:0;margin-top: 380px;margin-right: 20px;font-size: 136%;line-height: 2.2;letter-spacing: 0.2em;text-align:right;}
/*.index-box-com-right span{background-color:rgba(250,250,250,1.0);padding: 2px 10px 4px 10px;}*/
.index-box-com-right span{text-shadow: -1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff,-2px -2px 2px #fff,2px -2px 2px #fff,-2px 2px 2px #fff,2px 2px 2px #fff;}



/*====== SPA20%OFFの新着情報(colorbox内) ======*/
#spa-cont table.hotelfee-table{width:100%;margin-top:7px;}
#spa-cont table.hotelfee-table td {text-align: left;padding: 3px 12px 4px 12px;font-size:86%;border: none;padding-left: 1em;text-indent: -1em;color: #ccc;}
#spa-cont table.hotelfee-table td strong{font-size:115%;font-weight:400;}
#spa-cont table.hotelfee-table tr:before{margin-top:7px;}

#spa-cont .news-img img{width:280px;height:auto;}






/*newsボックス---最新情報 Whatsnew-----------------*/
.news-content{width:1000px;margin:45px auto 30px auto;}
.news-content-midashi{font-size:243%;display:table;line-height: 1.0;font-weight: 400;letter-spacing: 0.1em;color:#004688;}
.news-content-midashi span{font-size: 12px;font-weight: 300;display: table-cell;vertical-align: middle;line-height: 1.0;padding: 4px 0 0 17px;color: #666;}

#index-news-waku{margin:20px 0 0 0;border-bottom:1px dashed #94cad3;}
#index-news-waku dl{width:100%;padding:9px 0 11px 0;clear: both;border-top:1px dashed #94b7d3;}

#index-news-waku dt{float:left;font-size:108%;color:#555;line-height: 1.3;padding:0 0 0 10px;}
#index-news-waku dd{padding:0 5px 0 140px;font-size:108%;line-height:1.3;background: url(../img/arrow_blue4-7.png) no-repeat 130px 8px;}
#index-news-waku dd img{margin: 0 0 3px 5px;}

#index-news-waku a{color: #000;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;text-decoration:none;}
#index-news-waku a:hover dl{background-color:rgba(0,66,125,0.05);color:#004688;}
#index-news-waku a:hover dl dt{text-decoration:none !important;}
#index-news-waku a:hover dl dd{text-decoration:none !important;}


/*一覧を見るボタン*/
.btn-news{width:250px;margin:20px auto 0 auto;}
.btn-news a{font-size:108%;background-color: #004688;color: #fff;height:40px;line-height:38px;display: block;text-align: center;text-decoration: none;letter-spacing:0.15em;}
.btn-news a:hover{opacity: 0.5;}
/*.btn-hotelfee span{padding-left:8px;font-size:50%;color:#A6C2E1;}*/



/*====== indexのお知らせの詳細(colorbox内) ======*/
/*newsボックスが出たときの背景黒*/
#black-layer {position: absolute;z-index: 80; background:rgba(0,15,30,0.7);top: 0px;left: 0px;display: none;width:100%;height:100%;}
#news-box{width:70%;color:white;position:absolute;z-index:90;left:0;right:0;top: 30%;margin: 0 auto;display:none;border: 1px solid #888;padding: 20px;}
.news-box{padding-right: 20px;}
dl.news-title-box{padding:0 0 34px 0;background:url(../colorbox/images/dotline.png) repeat-x 0 bottom;margin-bottom:20px;}
dl.news-title-box dt{float:right;color:#ddd;font-size:86%;}
dl.news-title-box dd{font-size:115%;line-height:1.3;color:#fff;}
dl.news-title-box dd img{margin: 0 5px 5px 5px;}

.news-cont{font-size:100%;line-height:1.5;color:#ddd;}
.news-img{margin:20px 0;}
.news-img p{display:inline-block;margin-right:15px;}
.news-cont a{color:#ddd;}
.news-cont a:hover{color:#004688;}

.news-temp{font-size:100%;line-height: 1.1;background:url(../img/icon_pdf.gif) no-repeat 0px 0px;padding:0 0 13px 24px;padding:2px 0 13px 24px\0;margin-top:15px;}
.news-temp a{text-decoration:underline;color:#ddd;}
.news-temp a:hover{color: #004688;}






/*宿泊プラン　-----------------*/
.gallery-box{margin:40px auto 0 auto;width: 1020px;}
.gallery-box .gallery{float:left;margin-right:39px;}

.zoom-box{width:314px;height:210px;overflow: hidden;}

.zoomin1{background-color:#333;}
.zoomin1 img{width:314px;height:210px;opacity: 0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
.zoomin1 a:hover img{opacity: 0.9;filter: alpha(opacity=90);-moz-opacity: 0.9;-webkit-transform: scale(1.1);transform: scale(1.1);}

.zoomin1 h3{position:absolute;margin-top:-210px !important;width:314px;height:210px;padding-top:51px;text-align:center !important;}
.zoomin1 h3 img{width:187px;height:auto;opacity:1;filter: alpha(opacity=100);-moz-opacity: 1;}
.zoomin1 a:hover h3 img{-webkit-transform: scale(1);transform: scale(1);background-color:rgba(0,0,0,0.5);}