@charset "utf-8";

#room #rnavi { width:870px; padding:20px 0 12px 0; margin:0 auto;}
#room #rnavi li { float:left; width:108px;}
#room #rnavi li a { display:block; width:108px; height:57px;}

.room1 #rnavi li.navi1 a img,
.room2 #rnavi li.navi2 a img,
.room3 #rnavi li.navi3 a img,
.room4 #rnavi li.navi4 a img,
.room5 #rnavi li.navi5 a img,
.room6 #rnavi li.navi6 a img,
.room7 #rnavi li.navi7 a img,
.room8 #rnavi li.navi8 a img { display:none;}

#room.room1 #rnavi li.navi1 a { background:url(../../room/img/gnavi1_on.gif) no-repeat;}
#room.room2 #rnavi li.navi2 a { background:url(../../room/img/gnavi2_on.gif) no-repeat;}
#room.room3 #rnavi li.navi3 a { background:url(../../room/img/gnavi3_on.gif) no-repeat;}
#room.room4 #rnavi li.navi4 a { background:url(../../room/img/gnavi4_on.gif) no-repeat;}
#room.room5 #rnavi li.navi5 a { background:url(../../room/img/gnavi5_on.gif) no-repeat;}
#room.room6 #rnavi li.navi6 a { background:url(../../room/img/gnavi6_on.gif) no-repeat;}
#room.room7 #rnavi li.navi7 a { background:url(../../room/img/gnavi7_on.gif) no-repeat;}
#room.room8 #rnavi li.navi8 a { background:url(../../room/img/gnavi8_on.gif) no-repeat;}

#room #sec1 { width:870px; margin:0 auto -20px auto;}
#room #sec1 .detail { float:left; width:250px; padding:0 23px 40px 0;}
#room #sec1 .detail h3 { text-align:center;}
#room #sec1 .detail p.text { text-align:center; padding:25px 0 20px 0;}
#room #sec1 .detail p { color:#c2bcbd;}
#room #sec1 .photo_col { float:right; width:597px; padding-top:6px;}
#room #sec1 .photo_col li { float:right; padding:10px 0 10px 10px; position:relative; z-index:10;}
#room #sec1 .photo_col li img { border:1px solid #867478;}
#room #sec1 .photo_col li a:hover img { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity:0.70;}

#room #sec2 { width:870px; margin:0 auto;}
#room #sec2 .detail {  color:#c2bcbd; float:left; padding-top:55px; margin-left:20px; width:380px;}
#room #sec2 #madori{ float:left;}
#room #sec2 #madori p { padding-bottom:15px;}
#room #sec2 #madori a:hover img { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity:0.70;}
#room #sec2 p.photo { float:right; width:209px; color:#c2bcbd; text-align:right; padding-top:100px;}
#room #sec2 p.photo img { display:block;}


/* room top */
#room.room1 #sec1 { width:950px; background:url(../../room/img/1_bg.jpg) no-repeat right top; padding-bottom:40px; padding-bottom: 0; margin: 0 auto;}
#room.room1 #sec1 p.intro { float:right; width:99px; padding:40px 496px 0 0;}
#room.room1 #sec1 p.text { float:right; width:174px; padding:73px 45px 0 0;}
#room.room1 #sec1 #sec1_1 { clear:both; width:908px; padding:40px 0 0 42px;}
#room.room1 #sec1 #sec1_1 div { float:left; width:167px; text-align:center; padding-bottom:30px;}
#room.room1 #sec1 #sec1_1 p { color:#d6d2d3; font-size:12px;line-height:1.4em; padding:0;}
#room.room1 #sec1 #sec1_1 a:hover img { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity:0.70;}
#room.room1 #sec1 #sec1_1 #room3 { width:163px; padding:0 18px;}
#room.room1 #sec1 #sec1_1 #room6{ margin:0 0 0 175px;}
#room.room1 #sec1 #sec1_1 #room6,
#room.room1 #sec1 #sec1_1 #room7{ width:257px;}
#room.room1 #sec1 #sec1_1 #room6 p,
#room.room1 #sec1 #sec1_1 #room7 p{ padding:10px 0;}
#room.room1 #sec1 #sec1_1 .room_about { clear:both; text-align:center; padding:5px 0}


/* .room2 */
#room.room2 #sec1 { width:870px; margin:0 auto; padding-bottom:16px;}
.room2 #sec2 #madori { width:244px;}
.room2 #sec2 #madori ul { position:relative; width:244px; height:219px;}
.room2 #sec2 #madori li.base { position:absolute; width:244px; height:219px;}


/* .room3 */
.room3 #sec2 #madori { width:244px;}
.room3 #sec2 #madori ul { position:relative; width:244px; height:220px;}
.room3 #sec2 #madori li.base { position:absolute; width:244px; height:220px;}
.room3 #sec2 #madori li.po1 { position:absolute; top:92px; left:75px; z-index:1;}
.room3 #sec2 #madori li.po2 { position:absolute; top:48px; left:133px; z-index:1;}


/* .room4 */
.room4 #sec2 #madori { width:214px;}
.room4 #sec2 #madori ul { position:relative; width:214px; height:220px;}
.room4 #sec2 #madori li.base { position:absolute; width:214px; height:220px;}
.room4 #sec2 #madori li.po1 { position:absolute; top:118px; left:42px; z-index:1;}
.room4 #sec2 #madori li.po2 { position:absolute; top:56px; left:110px; z-index:1;}


/* .room5 */
.room5 #sec2 #madori { width:240px;}
.room5 #sec2 #madori ul { position:relative; width:240px; height:220px;}
.room5 #sec2 #madori li.base { position:absolute; width:240px; height:220px;}
.room5 #sec2 #madori li.po1 { position:absolute; top:32px; left:195px; z-index:1;}
.room5 #sec2 #madori li.po2 { position:absolute; top:57px; left:124px; z-index:1;}
.room5 #sec2 #madori li.po3 { position:absolute; top:162px; left:159px; z-index:1;}
.room5 #sec2 #madori li.po4 { position:absolute; top:110px; left:16px; z-index:1;}


/* .room6 */
.room6 #sec2 #madori { float:left; width:248px;}
.room6 #sec2 #madori ul { position:relative; width:248px; height:220px;}
.room6 #sec2 #madori li.base { position:absolute; width:248px; height:220px;}
.room6 #sec2 #madori li.po1 { position:absolute; top:153px; left:177px; z-index:1;}
.room6 #sec2 #madori li.po2 { position:absolute; top:20px; left:187px; z-index:1;}
.room6 #sec2 #madori li.po3 { position:absolute; top:51px; left:115px; z-index:1;}
.room6 #sec2 #madori li.po4 { position:absolute; top:90px; left:17px; z-index:1;}


/* .room7 */
#room.room7 #sec1{ margin:0 auto;} 
#room.room7 #sec1 .detail p.btn{ padding:30px 0 0 0;}
#room.room7 #sec2 .detail{ margin:0; padding:0;}
#room.room7 #sec2 p.photo{padding:0;}
#room.room7 #sec1 .photo_col{ position:relative;}
#room.room7 #sec1 .photo_col p{ position:absolute; top:10px; left:10px;}
#room.room7 #sec1 .photo_col ul li{ padding:10px 0 10px 6px;}

/* .room8 */
#room.room8 #sec1{ margin:0 auto;} 
#room.room8 #sec1 .detail p.btn{ padding:30px 0 0 0;}
#room.room8 #sec2 .detail{ margin:0; padding:0;}
#room.room8 #sec2 p.photo{padding:0;}
#room.room8 #sec1 .photo_col{ position:relative;}
#room.room8 #sec1 .photo_col p{ position:absolute; top:10px; left:10px;}
#room.room8 #sec1 .photo_col ul li{ padding:10px 0 10px 6px;}