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

/* @group commonstyle
--------------------------------------------------------------------------------------------------------------------*/
/* link */
a,a:link{ color: #333; text-decoration:none; }
a:visited { color: #333; }
a:hover, a:active { color: #333; text-decoration:none; }
::-moz-selection {color: #000;background: #f3f3f3;}
::selection { color: #000;background: #f3f3f3;}
.right-link{ float: right; font-weight: normal;}
.box-link{cursor: pointer;}

/* @group font */
.georgia{font-family:"Georgia", serif;}
.times{ font-family: Times New Roman Italic; }

.trans-link a{ text-decoration: none; color: #666; display: inline-block; text-align: center; width: 100px; padding: 10px 0; margin-right: 20px; border: 1px solid #999}
.trans-link.outer a{ background: url(../images/common/outerlink.png) 90% 50% no-repeat; padding-right: 10px;}
.trans-link a:hover{ background-color: #fafafa}
/*.trans-link a{display: inline-block; border: 1px solid #666; padding: 10px 20px}*/

/* form */
input[type='text'], input[type='password'], input[type='email'], input[type='search'], input.text, textarea { padding: 4px 5px; margin: 0 5px 0 0; -webkit-box-shadow: inset 1px 1px 4px #e6e6e6; -moz-box-shadow: inset 1px 1px 4px #e6e6e6; -ms-box-shadow: inset 1px 1px 4px #e6e6e6; -o-box-shadow: inset 1px 1px 4px #e6e6e6; box-shadow: inset 1px 1px 4px #e6e6e6; border-radius: 2.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: 1px solid #cccccc; vertical-align: middle; display: inline-block; font-weight: normal; }
input[type='text']:focus, input[type='text'].focus, input[type='password']:focus, input[type='password'].focus, input[type='email']:focus, input[type='email'].focus, input[type='search']:focus, input[type='search'].focus, input.text:focus, input.text.focus, textarea:focus, textarea.focus { border: 1px solid #999999; outline-color: transparent; outline-style: none; }
input[type='text'].size80, input[type='password'].size80, input[type='email'].size80, input[type='search'].size80, input.text.size80, textarea.size80 { width: 80px; }
input[type='text'].size160, input[type='password'].size160, input[type='email'].size160, input[type='search'].size160, input.text.size160, textarea.size160 { width: 160px; }
input[type='text'].size240, input[type='password'].size240, input[type='email'].size240, input[type='search'].size240, input.text.size240, textarea.size240 { width: 240px; }
input[type='text'].size320, input[type='password'].size320, input[type='email'].size320, input[type='search'].size320, input.text.size320, textarea.size320 { width: 320px; }
.field_with_errors input[type='text'], input[type='text'].error, .field_with_errors input[type='password'], input[type='password'].error, .field_with_errors input[type='email'], input[type='email'].error, .field_with_errors input[type='search'], input[type='search'].error, .field_with_errors input.text, input.text.error, .field_with_errors textarea, textarea.error { border: 1px solid #fa713b; color: #3c3c3c; }
input[type='text'][readonly], input[type='text'].readonly, input[type='password'][readonly], input[type='password'].readonly, input[type='email'][readonly], input[type='email'].readonly, input[type='search'][readonly], input[type='search'].readonly, input.text[readonly], input.text.readonly, textarea[readonly], textarea.readonly { background:#f5f5f5; }
input[type='text'][readonly]:focus, input[type='text'][readonly] .focus, input[type='text'].readonly:focus, input[type='text'].readonly .focus, input[type='password'][readonly]:focus, input[type='password'][readonly] .focus, input[type='password'].readonly:focus, input[type='password'].readonly .focus, input[type='email'][readonly]:focus, input[type='email'][readonly] .focus, input[type='email'].readonly:focus, input[type='email'].readonly .focus, input[type='search'][readonly]:focus, input[type='search'][readonly] .focus, input[type='search'].readonly:focus, input[type='search'].readonly .focus, input.text[readonly]:focus, input.text[readonly] .focus, input.text.readonly:focus, input.text.readonly .focus, textarea[readonly]:focus, textarea[readonly] .focus, textarea.readonly:focus, textarea.readonly .focus { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border: 1px solid #cccccc; }
input[type='text'].search, input[type='password'].search, input[type='email'].search, input[type='search'].search, input.text.search, textarea.search {padding-left: 25px; }

/* @group layout
--------------------------------------------------------------------------------------------------------------------*/
body{ line-height: 1.71; width: 100%}
.doc {margin: 0px auto; position: relative; text-align: left; color: #222}
#white-wrap{ background:#FCFBFC; position:absolute; z-index:999; width:100%; height:1400px; display:none; top: 102px; min-width: 1000px;}
.top #white-wrap{ height:9900px; background:#ffffff url(../images/top/toplogo.png) 50% 300px no-repeat fixed; z-index: 9999; top:0px;}
/*.top #white-wrap .loding{ width: 100%; height: 100%; background:url(../images/common/loading.gif) 50% 500px no-repeat fixed; z-index: 9999;}*/
.location #white-wrap{ height:2900px; }
.room #white-wrap{ height:4790px; }
.access #white-wrap{ height:890px; }
.developer #white-wrap{height:890px;}
.contact #white-wrap{height:1300px;}
.w80{ width: 80px!important;}
.w90{ width: 90px!important;}
.w100{ width: 100px!important;}
.w110{ width: 110px!important;}
.w120{ width: 120px!important;}
.w130{ width: 130px!important;}
.w140{ width: 140px!important;}
.w150{ width: 150px!important;}
.w160{ width: 160px!important;}
.w170{ width: 170px!important;}
.w180{ width: 180px!important;}
.w300{ width: 300px;}
.w650{ width: 650px;}
.w960{ width: 960px;}
.w980{ width: 980px;}
.w1000{ width: 1000px;}


/* @group  #contents */

/* @group #header
--------------------------------------------------------------------------------------------------------------------*/
#header{background:#fff; background:rgba(250,250,250,0.8) ; position: absolute;width: 100%; z-index: 9999; padding:0px 0; min-width: 1000px;}
#header .doc{min-width: 1000px;}
#logo{padding:20px 0; float: left;}
#logo a{ display: block; width: 227px; height: 62px; text-indent: -9999em; background: url(../images/common/logo_01.png) no-repeat; margin-left: 30px; }
#header.upper{ height: 102px;overflow: hidden;}
#header.upper #menu{ float: right; margin-right: 30px;}
#header.upper #menu ul{ text-align: center;}
#header.upper #menu ul li{ float: left; margin-left: 20px;}
#header.upper #menu ul li a{ text-decoration: none; display: block; padding:20px 10px; color: #666; font-size: 16px; font-weight: normal; line-height: 59px;}
.room #header.upper #menu ul li.menu01 a,
.location #header.upper #menu ul li.menu02 a,
.developer #header.upper #menu ul li.menu03 a,
.access #header.upper #menu ul li.menu04 a,
.contact #header.upper #menu ul li.menu05 a,
#header.upper #menu ul li a:hover{border-bottom: 3px solid #999; color: #333}


#header.scroll{position: fixed;bottom:0;left: 0; opacity: 0.85; z-index: 9999; background: #000; background: rgba(0,0,0,0.95)}
#header.scroll #logo a{width: 200px; height: 28px; text-indent: -9999em; background: url(../images/common/logo_02.png) no-repeat;}
#header.scroll #menu{ float: right; margin-right: 30px;}
#header.scroll #menu ul{ text-align: center;}
#header.scroll #menu ul li{ float: left; padding-left: 30px;}
#header.scroll #menu ul li a{text-decoration: none; color: #fff;
display: block; padding:20px 7px; font-size: 14px; font-weight: normal;}

.copyright{display: none;}
#header.scroll .copyright{display: block; float: left; color: #333; font-size: 11px; position: absolute; bottom: 17px; left: 240px;}

/*p, ul{ font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size-adjust:0.488; font-weight:200; font-style:normal;}*/
/*h1, #pixels{ font-family:"Museo 900", Verdana, serif; font-size-adjust:0.40; font-weight:700; font-style:normal;}*/
/*h2{ font-family:"Beau Sans Pro Book", Verdana, sans-serif; font-size-adjust:0.531; font-weight:500; font-style:normal;}*/


/* @group #footer
--------------------------------------------------------------------------------------------------------------------*/
#footer{ opacity: 0.85; z-index: 9999; background: #000; background: rgba(0,0,0,0.95); margin-top: 20px;}
#footer #logo a{width: 200px; height: 28px; text-indent: -9999em; background: url(../images/common/logo_02.png) no-repeat;}
#footer #menu{ float: right; margin-right: 30px;}
#footer #menu ul{ text-align: center;}
#footer #menu ul li{ float: left; padding-left: 30px;}
#footer #menu ul li a{text-decoration: none; color: #fff;
display: block; padding:20px 7px; font-size: 14px; font-weight: normal;}

#footer .copyright{display: block; float: left; color: #333; font-size: 11px; position: absolute; bottom: 17px; left: 240px;}




/* @group #top
--------------------------------------------------------------------------------------------------------------------*/
#nav{ list-style: none; position: fixed; right: 20px;}
#nav li{ margin: 0 0 15px 0;}
#header, #intro, #second{ width: 100%;}

.top .copy{ display:none!important; }
.slide{min-width: 1000px;}
/*#slide01 .copy{ top: 40%; left: 30%; position: fixed; z-index: 11;}
#slide02 .copy{ top: 40%; left:10%; position: fixed; z-index: 21}
#slide03 .copy{ top: 40%; left: 30%; position: fixed; z-index: 31}
#slide04 .copy{ top: 50%; left: 20%;position: fixed; z-index: 41}
#slide05 .copy{ top: 60%; right: 10%; position: fixed; z-index: 51}
#slide06 .copy{ top: 30%; right: 20%; position: fixed; z-index: 61}
#slide07 .copy{ top: 40%; left: 20%; position: fixed; z-index: 71}*/
#slide07 .trans-icon{ bottom:110px; position: fixed; width: 1000px; text-align: center}
#slide07 .trans-icon a{ display: inline-block; padding:13px 30px 12px 33px; border: 1px solid #fff;
-moz-border-radius:24px ;
-webkit-border-radius:24px ;
border-radius:24px;}

#slide01{ background:url(../images/top/mobile/1.jpg) 50% 0 no-repeat; color: white; height: 1200px; margin: 0 auto; padding: 0; z-index: 1}
#slide02{background: url(../images/top/mobile/2.jpg) 50% 0 no-repeat;height: 1200px;margin: 0 auto;overflow: hidden;z-index: 20}
#slide03{background: url(../images/top/mobile/3.jpg) 50% 0 no-repeat;height: 1200px;margin: 0 auto;overflow: hidden;z-index: 30}
#slide04{background: url(../images/top/mobile/4.jpg) 50% 0 no-repeat;height: 1200px;margin: 0 auto;overflow: hidden;z-index: 40}
#slide05{background: url(../images/top/mobile/5.jpg) 50% 0 no-repeat;height: 1200px;margin: 0 auto;overflow: hidden;z-index: 50}
#slide06{background: url(../images/top/mobile/6.jpg) 50% 0 no-repeat;height: 1200px;margin: 0 auto;overflow: hidden;z-index: 60}
#slide07{ background: url(../images/top/mobile/7.jpg) 50% 0 no-repeat; height: 1200px; padding:0;z-index: 70}
#slide08{ background: url(../images/top/mobile/8.png) 50% 0 no-repeat; height: 1200px;z-index: 70:; position: relative;}

.top .trans-link{display: none!important}

.top .trans-link-ios{ position:absolute; padding-left: 435px; padding-top: 750px; display: block!important;}
.top .trans-link-ios a{color: #fff; display: inline-block;  width: 150px; padding: 10px 0;border: 1px solid #fff; text-align: center;}
.top .trans-link-ios a:hover{ background: rgba(255,255,255,0.1)}


.fadein-box { overflow: hidden; margin-top: 40px; color: #333 }
.fadein-box div { float: left; }
.fadein-box .ballon { opacity: 0; filter: alpha(opacity=0); font-size: 36px; }
.fadein-box #step_01 { margin-left: 25px; }
.fadein-box #step_02 {  margin-left: 5px; }
.fadein-box #step_03 {  margin-left: 25px; }
.fadein-box #step_04 {  margin-left: 5px; }
.fadein-box #step_05 {  margin-left: 25px; }
.fadein-box #step_06 { margin-left: 5px; }
.fadein-box #step_07 { margin-left: 25px; }


/* @group room
--------------------------------------------------------------------------------------------------------------------*/
.room .lead .doc{padding: 200px 0 100px 0}
.room .lead{ background: url(../images/room/roomlead_03.jpg) no-repeat 90% 100%;}

.roompra{height: 800px;margin: 0 auto;padding: 0;}
.roomex{ padding:50px 0 150px 0;}

#room1{background:url(../images/room/room_03.jpg) 50% 0 no-repeat;}
#room2{background:url(../images/room/room_06.jpg) 50% 0 no-repeat;}
#room3{background:url(../images/room/room_08.jpg) 50% 0 no-repeat;}

.room-nav-wrapper{}
.room-nav ul li{ float: left;}
.room-nav-wrapper h2{ float: left; margin-right: 20px;}
.room-nav-wrapper ul li a{ text-decoration: none; color: #666; display: block; text-align: center; width: 100px; padding: 10px 0; margin-right: 20px; border: 1px solid #999}
.room-nav-wrapper ul li a:hover{ background: #fafafa}
.room-nav-wrapper{}

/*.room-nav-wrapper{ position: fixed; right: 20px; top: 130px;}
.room-nav ul li{ margin-bottom: 20px;}
.room-nav-wrapper ul li a{ text-decoration: none; color: #666; display: block; text-align: center; width: 100px; padding: 10px 0; border: 1px solid #999}
.room-nav-wrapper ul li a:hover{ background: #fafafa}
.room-nav-wrapper{}
*/

/* @group location
--------------------------------------------------------------------------------------------------------------------*/
.location .block01{ padding-top: 102px; margin-bottom: 40px;}
.location #main-visual{height: 556px; overflow: hidden; min-width: 1000px;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher ul, .bgstretcher ul li { position: absolute; top: 0; left: 0;}
.bgstretcher ul, .bgstretcher ul li { margin: 0; padding: 0; list-style: none;}
.bgstretcher { background: #fff; overflow: hidden; width: 100%; position: fixed; z-index: 1; _position: absolute; /*IE6 doesn't support fixed positioning*/ top: 0; left: 0;}

.location .block02{ width: 1000px; padding-top: 40px; overflow: hidden;}
.location .block02 ul{height: 1905px}
.location .block02 ul li{ float: left; margin-bottom: 30px; margin-right: 10px; width: 240px; /*height:271px; */overflow: hidden;}
.location .block02 ul li a{display: block; -webkit-transition: all 0.3s ease-in-out; z-index:1}
.location .block02 ul li img{ width: 240px}
/*.location .block02 ul li a img{opacity: 0;}*/
.location .block02 ul li a:hover{ cursor:pointer; -webkit-transform: rotate(0deg) scale(1.05);z-index:10000;}

.popup{ text-align: center; padding: 30px 0 20px 0}
.popup .image-wrapper{ margin:0 auto 10px auto; width: 700px; height: 468px; position: relative;}
.popup .title{font-weight: bold; font-size: 105%; margin-bottom: 20px;}
.popup .title span{ font-weight: normal; font-size: 84%;  margin-left: 10px;}
.popup .title span ,
.popup .title span a{color: #999;}
.popup .title span a:hover{text-decoration: underline;}
.popup #tab1{position: absolute; top:0; left:0; z-index: 999;}
.popup #map{ width: 700px; height: 468px}
.popup #mapbtn{ cursor: pointer;}

.location .block03{ width: 1000px; overflow: hidden;}
.location .block03 .align-c{ margin-left: -80px;}



/* @group developer
--------------------------------------------------------------------------------------------------------------------*/
.developer .block01{padding-top: 170px; text-align: center; margin-bottom: 100px;}

.developer .block02{ margin-bottom: 120px;}
.developer .block02 ul li{ margin-right:10px;width:272px; }

.simply-scroll,
.simply-scroll .simply-scroll-clip{height:168px;}
.simply-scroll-container { position: relative;}
.simply-scroll-clip { position: relative; overflow: hidden; z-index: 2;}
.simply-scroll-list { position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden;}
.simply-scroll-list li img { display: block;}
.simply-scroll .simply-scroll-list li { float: left; /* Horizontal scroll only */}


/* @group access
--------------------------------------------------------------------------------------------------------------------*/
.access .main-wrapper{text-align: center; padding-top: 170px}
.access .main-wrapper #map{width: 960px;height:400px; margin-bottom: 50px;}
.access .main-wrapper .logo{ margin-bottom: 40px;}
.access .main-wrapper .access-info{ margin-bottom: 50px;}
.access .main-wrapper{ margin-bottom: 50px;}


/* @group contact
--------------------------------------------------------------------------------------------------------------------*/
.contact .main-wrapper h2{ margin-bottom: 20px;}
.contact .main-wrapper h3{ margin-bottom: 20px;}
.contact .main-wrapper p{ margin-bottom: 60px;}

.contact .main-wrapper{padding-top: 170px}
.contact .form-wrapper{ background:#F2F2F2; padding: 40px 100px; margin-bottom: 100px;}
.contact th,.contact td{ padding: 7px 0}
.contact th{ vertical-align: top; width: 150px; padding-top: 9px}
.contact input.text{ padding: 5px 5px}
.contact input.text01{ width: 200px}
.contact input.text02{ width: 400px}
.contact table{ width: 100%}
.contact table textarea{ width: 100%}
.contact input.submit{ margin-left: 150px; padding: 20px 80px; background: #000; color: #fff; border: none; margin-top: 20px;}

/* @group outline
--------------------------------------------------------------------------------------------------------------------*/
.outline .main-wrapper{padding-top: 170px}
.outline .outline-wrapper{ margin-bottom: 100px; background: #f9f9f9; padding:20px 40px}
.outline th,.outline td{padding:17px 20px 14px 20px; font-size: 12px;border-bottom: 1px solid #eee; color: #333}
.outline tr:last-child th,.outline tr:last-child td{ border-bottom:none}
.outline th{ vertical-align: top; width: 120px; font-weight: bold;  /* background:#F2F2F2;*/}
.outline td{ width: }
.outline table{ width: 100%;}