@charset "utf-8";
@import url(dropMenu.css?date=191218);


.sp,hr, .co-blogsp {display: none !important;}
body#jp { font-size: 0.8em; } 
body#en { font-size: 0.8em; } 

img.phj.spaobi  { height: 110px ; }
img.phj.spaaki  { height: 130px ; }

header,
section,
footer
{ width: 90%; max-width: 1200px; margin-right: auto; margin-left: auto; }

section { padding:  20px 0 0 0 }
article {  } /*background-color: #ff0*/

/*******************見出し**********************/

.index h1 { width: 100% ; text-align: center; top: calc(50%  - 14px) ; left: 0 ; }
body#en.index h1 { top: 47% ; left: 0 ; }
body#jp.cnc h1 { font-size: 1.6em; }
body#en.cnc h1 { font-size: 1.6em; letter-spacing: 0.5em ; }

body.org.pages h1 { left: 30px;top: 102px ; font-size: 1.2em ; line-height: 1.2em ; z-index: 1000000 }

body.org.pages.rmm h1 { left: 0;top: 200px ; font-size: 1.8em ; line-height: 1.8em ; color: rgba(0,0,0,1); }
body.org.pages.fcm h1 { left: 10px;top: 200px ; font-size: 1.4em ; line-height: 1.4em ; color: rgba(0,0,0,1); }

body.org#jp.spaimg h1 ,body.org#jp.spapage h1,
body.org#en.spaimg h1 ,body.org#en.spapage h1
{ letter-spacing: 0.3em }

.homelogo,.homelogo a { width: 100px ; height: 90px; }

.info .homelogo a,
.bth .homelogo a,
.rms .homelogo a,
.rmm .homelogo a,
.cui2 .homelogo a,
.fcl .homelogo a,
.fcm .homelogo a
{ background-image: url(../img/logob.png); }

.accmap .homelogo a { opacity: 0 }

.copy-caption { bottom:-25px ; right: 0 ; }


header { position: relative ; height: 60px; margin-top: 20px; }
.navigation, .navigation2 { height: 60px; }

/*---------------------block float---------------------*/

.f-l{float: left;}.f-r{float: right;}.f-n{float: none;clear: both;}

#Conatiner {padding: 0 0 50px 0 ;}

#Reserv-box { padding: 10px 0 0 0; width: 65%; background-color: hsla(0,0%,0%,.0) } 
#en #Reserv-box { width: 70%; } 

#Main-box { margin: 50px 0 0 0 }

/*---------------------otozure---------------------*/

.english { width: 90%; }
.english a { padding-top: 5px; height: 25px; }

/**********************************************************************　アローリスト　*******************************************************************************/

#Reserv-box ul.arrowlist{ width: 100% ;}
#Reserv-box ul.arrowlist li{ float: left; width: calc(33.333333333% - 22px); margin: 0 15px 0 0; }
#Reserv-box ul.arrowlist li.hiduke{ margin: 0 0 0 0; }
#Reserv-box ul.arrowlist li.kakunin{ float: right; margin: 0 0 0 0; }
#Reserv-box ul.arrowlist li a { ;padding: 10px 0 0 0; }

/*---------------------Footer---------------------*/

footer { margin-bottom: 240px }

.footerlogo
{
	width: 64px; float: right; padding-top: 5px
}

.footerlink
{
	float: right;
	width: 70%;
	margin-top: 6px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.footerlink p
{
	font-size: 0.8em;
	line-height: 1.8em;
	letter-spacing: 0.1em;
	text-align: right;
}

ul.child li a:hover{
filter: alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}

.footerlinks { margin-top: 5px }
.footerlinks a { display: inline-block; border: 1px solid #aaa; padding: 3px 8px; line-height: 1em; margin-left: 6px; box-sizing: border-box; border-radius: 3px }
.footerlinks a.recruit { border-color: #999; background-color: #999; color: #fff }

.sptel a { text-decoration: none; pointer-events: none; }


/*---------------------navigation---------------------*/

.cnc .dropmenu li.co-concept,
.rms .dropmenu li.co-rooms,
.rmm .dropmenu li.co-rooms,
.cui .dropmenu li.co-cuisine,
.bth .dropmenu li.co-bath,
.spaimg .dropmenu li.co-spa,
.spapage .dropmenu li.co-spa,
.fcl .dropmenu li.co-facilities,
.acc .dropmenu li.co-access

{ background-image: url(../img/active.png);background-repeat: no-repeat;background-size: auto 4px ; background-position: bottom center; }

/***************************************************************** 　イメージフェード 　*************************************************************************/

.topcon,.rotator  { width: 100% ; background-size: 100% auto; }
/*max-height: 43vw; overflow-y: hidden　なぜこんな指定を！*/


/*********************************** concept *******************************************/

.cnc .homelogo {left: 30px;top: 100px;}
.cnc .imagefade:before { padding-top: 90.0%; }
body.org.cnc .navigation { width: 80% ; padding-left: 20% }
body.org.cnc .navigation p.current a,
body.org.cnc .navigation a { width: 25% ; text-align: center}

.cnc .r1 h1 { left: 30%;top: 20%; width: 40%; text-align: center }

body#en.cnc h1 { top: 120px ; left: 30px ; }

.cnc .r1 .copy-concept { left: 30%;top: 30%; width: 40%; }

.cnc .r2 h2 { left: 55%;top: 20%; width: 40%;text-align: right }
.cnc .r2 .copy-concept { left: 55%;top: 25%; width: 40%; }

.cnc .r3 h2 { left: 5%;top: 20%; width: 40%; }
.cnc .r3 .copy-concept { left: 5%;top: 26%; width: 25%; }

.cnc .r4 h2 { right: 5%;top: 20%; width: 40%; }
.cnc .r4 .copy-concept { right: 5%;top: 26%; width: 40%; }


/*********************************** rms *******************************************/

.rms .f-l { width: 24% ; padding: 0 0 0 0 ; background-color: hsla(359,100%,50%,.0) }
.rms .f-r { width: 70% ; margin: 100px 0 0 0 ; padding: 0 0 0 0 ; }
.rms h2	{ top: 250px ; left: 0 ; }

.rms .homelogo {left: 10px;top: 140px;}
body.org.rms .navigation { width: 80% ; padding-left: 20% ; background-color: rgba(0,0,0,1); z-index: 1 }
body.org.rms .navigation p.current a,
body.org.rms .navigation a { width: 20% ; text-align: center }


.rms .rotator { color: rgba(255,255,255,0.8) }
.rms .rotator.r1 { color: rgba(0,0,0,0.8) }

.rms .topcon {  }
.rms .rotator.r1 {  }
.rms .rotator.r2 { background-image: url(../rooms/02.jpg); }
.rms .rotator.r3 { background-image: url(../rooms/03.jpg); }
.rms .rotator.r4 { background-image: url(../rooms/04.jpg); }
.rms .rotator.r5 { background-image: url(../rooms/05.jpg); }

.rms .navigation {  }

.rms .copy-concept { left: 30% ; top: 38% ; width: 40% ; }
.rms .r1 .copy-concept { left: 0 ; top: 300px ; width: 24% ; }
.rms .r2 h2 { left: 150px ; top: 150px ; width: 40% ; }
.rms .r3 h2 { left: 150px ; top: 150px ; width: 40% ; }
.rms .r4 h2 { left: 31% ; top: 34% ; width: 40% ; text-align: center ;  }
.rms .r4 .copy-concept { left: 31% ; top: 38% ; width: 40% ; }
.rms .r5 h2 { left: 150px ; top: 20% ; width: 40% ; }
.rms .r5 .copy-concept { left: 150px ; top: 260px ; width: 400px ; }


.bt-room a {
	width: 50%;
	height: 100%;
	padding-left: 50%;
	padding-top: 40px;
	background-position: 0 40px;
	background-size: 46% auto;
	min-height: 120px;
}
.bt-room span.eng { position: absolute ; top: 0 ; left: 0 ;font-size: 2.0em ; line-height: 2.0em }

/*********************************** 施設類 *******************************************/
.room  { position: relative }
.room .topcon { width: 70% ; padding: 0 0 0 30% }

.copy-rooms { width: 100%; }

/*******************room**********************/

.room-box { width: 30%; float: left ; position: absolute ; left: 0 ; top:0 ; background-color: hsla(359,100%,50%,.0); z-index: 100 }
.conts { width: 70%; float: left ; padding: 170px 0 0 0 ; background-color: hsla(359,100%,50%,.0); }
body#en .conts { width: 80%; }

.thmbs { width: 30px; float: right ; padding: 0 0 0 0 ; z-index: 100; background-color: hsla(359,100%,50%,.0); }

.thmbs p a { display: block ; width: 30px ; height: 30px ; text-align: center ; font-size: 1.2em; line-height: 1.0em; background-color: hsla(239,100%,50%,0.0); }

.bt-room { float: left; width: 48%; }


/*********************************** facilities *******************************************/

.fasibox { margin: 0 0 0 0 }
.facithumb { padding: 20px 0 0 0 }

.fcl .homelogo { left: 20px;top: 40px; }

.fcl .fasibox:before { padding-top: 61.5%; }
body.org.fcl .navigation { width: 60% ; padding-left: 40%; z-index: 1 }
body.org.fcl .navigation a { width: 20% ; text-align: center}

.fcl .rotator, .fcl .rotator a { color: rgba(255,255,255,0.8) }

.faci  { position: relative }
.faci .topcon { width: 70% ; padding: 0 0 0 30% }

.bt-faci { float: left; width: 15%; margin-right: 5% }
.bt-faci.end { margin-right: 0 ;}
.bt-faci span.eng { position: absolute ; top: 0 ; left: 0 ; font-size: 1.8em ; line-height: 1.8em ; letter-spacing: -0.04em }

.fcm .conts  { z-index: 10 ;  }
.fcm .conts a { display: block ; font-size: 0.9em ; line-height: 1.0em ; padding: 6px 0 6px 10px ;  }
.fcm .conts a.hit { background-image: url(../img/active.png);background-repeat: no-repeat;background-size: auto 4px ; background-position: left 9px; }


/*********************************** acc *******************************************/

.accmap .rotator, .accmap .rotator a { color: rgba(0,0,0,0.8) }
body.org.accmap .navigation { width: 70% ; padding-left: 30%; background-color: rgba(0,0,0,1); z-index: 1 }

body.org.accmap .navigation p.current a,
body.org.accmap .navigation a { width: 33% ; text-align: center ; color: rgba(255,255,255,0.8) }

body.org.accmap .homelogo { left: 7%;top: 200px; }

body.org.accmap .taxi { margin-top: 100px ; }

body#jp.accmap .taxi .f-l { width: 66.7% ; }
body#jp.accmap .taxi .f-r { width: 33.2% ; }
body#en.accmap .taxi .f-l , body#en.accmap .taxi .f-r { width: 48% ; }



/*******************fc-box**********************/

.fc-box { width: 30%; float: left ; position: absolute ; left: 0 ; top:0 ; z-index: 100  }

.bt-faci a {
	width: 100%;
	height: 100px;
	padding: 15px 0 0 24px ;
	background-position: 0 40px;
	background-size: 100% auto;
}

/*********************************** cuisine *******************************************/

.cui .homelogo {left: 0px;top: 120px;}
.cui.topim .homelogo {left: 20px;top: 120px;}

body.org.topim h1 { font-size: 1.2em; top: 100px ; left: 30px }

.cui .r1 h2	{ top: 250px ; left: 0 ; }
.cui .r2 h2	{ top: 150px ; left: 200px ; }

.cui .fasibox:before { padding-top: 140.0%; }
body.org.cui .navigation2 { width: 60% ; padding-left: 40% ;background-color: rgba(0,0,0,1); z-index: 10 }
body.org.cui.topim .navigation2 { margin-top: 20px }
body.org.cui .navigation2 p.current a,
body.org.cui .navigation2 a { width: 40% ; text-align: center ; }

.cuitxt1 { position: absolute; z-index: 10; top: 230px; left: 20px; color: #fff; font-size: 1.1em; line-height: 1.8em }
.cuitxt2 { padding: 10px 0 0 0 }

.cui .rotator a { color: rgba(255,255,255,0.9) ; }

.cui .fasibox { padding-top: 40px }
.cui .rotator.r1 {  }
.cui .rotator.r2 {  }
.cui .rotator.r3 {  }
.cui .rotator.r4 {  }

.cui .copy-concept { top : 340px ; left: 0%; width: 24%; }
.cui .fasibox .r1 .f-l { width: 24% ; padding: 0 0 0 0 ; }
.cui .fasibox .r1 .f-r { width: 65% ; margin: 100px 0 0 0 ; padding: 0 0 0 0 ; }
.cui .fasibox .r1 .f-r img { padding: 0 0 20% 0 ; }

.cui .fasibox .r2 .f-l { margin: 250px 0 0 0 ; width: 47% }
.cui .fasibox .r2 .f-r { margin: 250px 0 0 0 ; width: 47% }

/*********************************** bth *******************************************/

.bth .homelogo { left: 30px;top: 110px; }
body.org.bth .navigation { width: 80% ; padding-left: 20% ; background-color: rgba(0,0,0,1); z-index: 1 }
body.org.bth .navigation p.current a,
body.org.bth .navigation a { width: 25% ; text-align: center}
.bth .rotator { padding-top: 100px; }
.bth .rotator.r1 { padding-top: 0px; }

.bth .r1 h2 { top: 38%; }
.bth .r1 .copy-concept { top: 45% }
.bth .r1  .copy-concept { right: 5% ; width: 60%; }
.bth .r1  .copy-concept p { text-align: right; }
.bth .r1 h2 { right: 4%; width: 60% ; text-align: right; }
body#en.bth .r1 h2 { right: 5%; }

.bth .fasibox .r2 .f-l , .bth .fasibox .r3 .f-l , .bth .fasibox .r4 .f-l { width: 24% ; }
.bth .fasibox .r2 .f-r , .bth .fasibox .r3 .f-r , .bth .fasibox .r4 .f-r { width: 70% ; }

.bth .r2 .gazo1 , .bth .r3 .gazo1 , .bth .r4 .gazo1 { width: 100% ; margin: 0 0 10% 0 }
.bth .r2 .gazo2 , .bth .r3 .gazo2 , .bth .r4 .gazo2 { width: 45% ; margin: 0 5% 10% 0 }
.bth .r2 .gazo3 , .bth .r3 .gazo3 , .bth .r4 .gazo3 { width: 45% ; margin: 0 0 10% 5% }

.bth .r2 h2 ,.bth .r3 h2, .bth .r4 h2 { top: 250px; left: 30px; }
.bth .r2 .copy-concept ,
.bth .r3 .copy-concept ,
.bth .r4 .copy-concept
{ top : 300px ; left: 30px; width: 24%; }

/*********************************** spaimg *******************************************/

.spaimg .homelogo { left: 30px;top: 40px; }

.spaimg .fasibox:before { padding-top: 80.0%; }
body.org.spaimg .navigation { width: 60% ; padding-left: 40% }
body.org.spaimg .navigation a { width: 20% ; text-align: center}

body.org.spaimg h1 { right: 0 ; top: 0 ; margin: 150px 30px 0 0 ; width: 95% ; text-align: right ; letter-spacing: 0.5em}
.spaimg .copy-concept { right: 60px ; top: 20% ; width: 60%; }


/*********************************** spatop *******************************************/

.spatop .copy-concept p { text-align: right; }
.spatop .r1 h2 { top: 38%; }.spatop .r1 .copy-concept { top: 45% }
.spatop .r2 h2 { top: 20%; }.spatop .r2 .copy-concept { top: 30%; }
.spatop .r3 h2 { top: 20%; }.spatop .r3 .copy-concept { top: 30%; }
.spatop .r4 h2 { top: 20%; }.spatop .r4 .copy-concept { top: 30%; }

/*********************************** spafaci *******************************************/

.spafaci .homelogo {left: 30px;top: 40px;}

.spafaci .fasibox:before { padding-top: 80.0%; }
body.org.spafaci .navigation { width: 60% ; padding-left: 40% }
body.org.spafaci .navigation a { width: 20% ; text-align: center}

.spafaci .copy-concept { right: 5% ; top: 20% ; width: 60%; }
.spafaci .copy-concept p { text-align: right; }
.spafaci h2 { right: 4%; width: 60% ; text-align: right; }


/*********************************** spapage *******************************************/

.spapage .topcon,.spapage .rotator  { width: 100% ; background-size: auto 100% }
body.org.spapage h1 { right: 6.5% ; top: 150px ; width: 93.5% ; text-align: right ; letter-spacing: 0.5em ; }
.spapage .homelogo {left: 30px;top: 30px;}
.spapage .fasibox:before { padding-top: 20.0% ; }
.spapage .menubox .f-l { width: 10% ; }
.spapage .menubox .f-r { width: 70% ; }
table.fee tr td { padding: 3px 20px ; }

.spaguide .menubox { background-image: url(../spa/spaguide.jpg) ; background-position: left bottom }
.spavoice .menubox { background-image: url(../spa/spavoice.jpg) ; background-position: left bottom }

.subcont { top: 50px;right: 30px; }
.subcont a { margin: 0 10px ;}

/*********************************** info *******************************************/

.info .homelogo {left: 0;top: 100px;}

body.org.info .navigation { width: 70% ; padding-left: 30% ; height: 60px ; background-color: #000 }
body.org.info .navigation p.current a,
body.org.info .navigation a { width: 30% ; text-align: center}

.info .fasibox  { padding-top: 100px ; width: 75% ; padding-left: 25% ; }
.stm .fasibox .f-l  { width: 33.0% ; }

table.cp tr td { padding: 10px 20px ; }