@charset "UTF-8";

/* ---------------------------------------------------------------------
 * 間取り詳細ページ
 * --------------------------------------------------------------------- */
.pages_main_image{height:auto;position: relative}
.pages_main_image .images{width: 100%;height: auto;min-width: 1200px;}

/* タブ */
.roomplan_detail_menu {text-align: center;margin: 30px auto }
.roomplan_detail_menu li{font-size: 18px;letter-spacing: 0.1em; background: #9ca88e;position: relative;margin-bottom: 20px;}

.roomplan_detail_menu.t3 li{width: 30%;}
.roomplan_detail_menu.t2 li{width: 48%;}
.roomplan_detail_menu.t4 li{width: 23%;}
.roomplan_detail_menu li.act a{background: #0f3233}
.roomplan_detail_menu li.menu.act  a{color: #fff;}

.roomplan_detail_menu li a{color: #fff;display: block;padding: 40px 0;}



.roomplan_detail_menu li.close{color: #fff;display: block;padding: 40px 0;}
.roomplan_detail_menu li.close{opacity: 0.5}

/* 詳細 */
#body_roomplan{padding: 0px 0;background: #e6e6e6}
#body_roomplan h3{font-size: 32px;color: #5a6072;letter-spacing: 0.1em;text-indent: 0.1em;margin-bottom: 40px}
#body_roomplan .body_area_inner{background: #fff;padding: 40px 0}
#body_roomplan h2{text-align: left}
#body_roomplan .inner{width: 1100px;margin: auto;}
#body_roomplan .inner img{max-width: 100%;}
#body_roomplan .inner .col3{width: 40%}
#body_roomplan .inner .col3_2{width: 60%}


#body_roomplan .point {margin-top: 30px;}
#body_roomplan .point p{width: 100%; text-align: center; line-height: 1.9em; letter-spacing: 0.1em;font-size: 18px;color: #fff; padding: 12px 0; margin-bottom: 12px;background: linear-gradient(to bottom,  #0f3233 0%,#000000 100%);}
#body_roomplan .zu{text-align: center}
#body_roomplan .kagu{background: #ececec;margin-top: 40px;}
#body_roomplan .kagu h3{text-align: center; line-height: 1.9em; letter-spacing: 0.1em;font-size: 22px;color: #fff; padding: 12px 0; margin-bottom: 12px;background: linear-gradient(to bottom,  #0f3233 0%,#000000 100%);}
#body_roomplan .kagu p{padding: 30px 0;width: 60%;margin: auto }
@media screen and (max-width: 767px) {/*スマホ設定*/
#body_roomplan .inner .col3{width: 100%}
#body_roomplan .inner .col3_2{width: 100%;margin-top: 30px}



#body_roomplan .kagu h3{font-size: 18px;}
#body_roomplan .kagu p{padding: 30px 0;width: 90%;margin: auto }
}

/* 鳥かご */
#roomplan_detail_floorBox {position: relative;text-align:left;margin: 40px auto 40px;width: 200px}
#roomplan_detail_floorBox img{width: 200px;}
#roomplan_detail_floorBox .floors {  position: absolute;  cursor: pointer;  opacity: 0;  -webkit-transition: opacity 0.25s linear;  -o-transition: opacity 0.25s linear;  transition: opacity 0.25s linear;}
#roomplan_detail_floorBox .floors:hover,
#roomplan_detail_floorBox .floors.onover {  opacity: 1;}
#roomplan_detail_floorBox .floors a {  display: block;  height: 100%;}

#roomplan_detail_floorBox #type_a{top:0px;left:31px;height:280px;width:40px;background:URL("../images/plan/detail/detail_floors_a.svg") no-repeat -31px 0px;background-size: 200px}
#roomplan_detail_floorBox #type_b{top:0px;left:74px;height:302px;width:40px;background:URL("../images/plan/detail/detail_floors_b.svg") no-repeat -74px 0px;background-size: 200px}

#roomplan_detail_floorBox #type_d{top:0px;left:160px;height:302px;width:40px;background:URL("../images/plan/detail/detail_floors_d.svg") no-repeat -160px 0px;background-size: 200px}
#roomplan_detail_floorBox #type_c{top:0px;left:117px;height:302px;width:40px;background:URL("../images/plan/detail/detail_floors_c.svg") no-repeat -117px 0px;background-size: 200px}
#roomplan_detail_floorBox #type_c1{top:304px;left:160px;height:20px;width:40px;background:URL("../images/plan/detail/detail_floors_c1.svg") no-repeat -160px -304px;background-size: 326px}
#roomplan_detail_floorBox #type_d1{top:304px;left:117px;height:20px;width:40px;background:URL("../images/plan/detail/detail_floors_d1.svg") no-repeat -117px -304px;background-size: 326px}

/* ボタン */
.roomplan_detail_btns {    width: 734px;    margin: 0 auto 0px auto;}
.roomplan_detail_btns p.roomplan_detail_print {	float:right;  width: 356px;  height: 59px;}
.roomplan_detail_btns p.roomplan_detail_close {	float:left;  width: 359px;  height: 59px;}
.roomplan_detail_btns p.roomplan_detail_print a {  background: url(../images/plan/detail/detail_print_ov.svg) no-repeat 0 0;background-size: cover;  display: block;  height: 59px;  width: 356px;}
.roomplan_detail_btns p.roomplan_detail_close a {  background: url(../images/plan/detail/detail_back_ov.svg) no-repeat 0 0;background-size: cover;  display: block;  height: 59px;  width: 359px;}
.roomplan_detail_btns p.roomplan_detail_print a:hover img,
.roomplan_detail_btns p.roomplan_detail_close a:hover img {  display: none;}


.roomplan_detail_navi_prev {    position: fixed;    top: 50%;    left: 0;    margin-top: -58px;    z-index: 100;}
.roomplan_detail_navi_next {    position: fixed;    top: 50%;    right: 0;    margin-top: -58px;    z-index: 100;}

/*===============================================================================
===============================================================================*/
@media screen and (min-width: 768px) { /*PC設定*/
}

/*===============================================================================
===============================================================================*/
@media screen and (max-width: 767px) {/*スマホ設定*/
.roomplan_detail_menu {width: 90%;text-align: center;margin: 0px auto 30px}
.roomplan_detail_menu li{font-size: 12px}
.roomplan_detail_menu li a,
.roomplan_detail_menu li.close{color: #fff;display: block;padding: 10px 0;}
#body_roomplan .body_area_inner{background: #fff;padding: 0px}

#body_roomplan .inner{width: 90%;margin: auto;padding: 30px 0 0}
#body_roomplan{padding:0px 0 0}
#body_roomplan h3{font-size: 20px;;margin-bottom: 40px}
#body_roomplan .point{width: 100%;margin: 30px auto 0}
#body_roomplan .point p{font-size: 13px;}

#body_roomplan p.txtL{margin-top: 12px;font-size: 10px;}

#roomplan_detail_floorBox {width: 50%;margin:30px auto 0;padding-bottom: 30px}
#roomplan_detail_floorBox .floors a{display: none}
#roomplan_detail_floorBox .floors{display: none}

/* タブ */

/* ボタン */
.roomplan_detail_btns {  width: 80%;  margin: 20px auto 0;}
.roomplan_detail_btns p.roomplan_detail_close a,
.roomplan_detail_btns p.roomplan_detail_close img {  width: 100%;height: auto;  background: none;}
.roomplan_detail_btns p.roomplan_detail_close {  float:none;  width: 100%;}
.roomplan_detail_btns p.roomplan_detail_close a:hover img {  display: block;}

.roomplan_detail_navi_prev,
.roomplan_detail_navi_next {width: 45px;}
.roomplan_detail_navi_prev img,
.roomplan_detail_navi_next img {width: 100%;height: auto}

.roomplan_detail_navi_prev {    position: fixed;    top: 50%;    left: 0;    margin-top: -58px;    z-index: 100;    width: 30px;    height: 58px;}
.roomplan_detail_navi_next {    position: fixed;    top: 50%;    right: 0;    margin-top: -58px;    z-index: 100;    width: 30px;    height: 58px;}
}

/*===============================================================================
===============================================================================*/
@media print {/*印刷設定*/

#roomplan_area .box_plan a:before,
#main_title_plan,
.roomplan_detail_btns,.roomplan_detail_navi_prev,.roomplan_detail_navi_next {display: none;}
#body_roomplan .box_plan a img {width: 100%;}
#body_roomplan .body_area_inner{width: 80%;margin: auto}

}