@charset "UTF-8";

/* ---------------------------------------------------------------------
 * 間取り詳細ページ
 * --------------------------------------------------------------------- */
 
.pages_main_title{height:auto;position: relative;}
.pages_main_title .inner{position: static;padding: 0}
@media screen and (max-width: 767px) {/*スマホ設定*/
}



/* タブ */
.roomplan_detail_menu {width: 70%;font-size: 0;text-align: center;margin: 0px auto 60px}
.roomplan_detail_menu li{display: inline-block;margin-left: 1%;margin-right: 1%;font-size: 15px;background: #fff;position: relative;margin-bottom: 20px;border-radius: 4px;border: 1px solid #756f6c}
.roomplan_detail_menu a{color: #756f6c;display: block}
.roomplan_detail_menu.t3 li{width: 30%;}
.roomplan_detail_menu.t2 li{width: 47%;}
.roomplan_detail_menu.t4 li{width: 23%;}
.roomplan_detail_menu li.act{background:#756f6c }
.roomplan_detail_menu li.act:after{content: "";  position: absolute;  right: 0;  bottom: -10px;  left: 0;  width: 0px;  height: 0px;  margin: auto;  border-style: solid;  border-color: #756f6c transparent transparent transparent;border-width: 10px 10px 0 10px;}
.roomplan_detail_menu li.act a{color: #fff}
.roomplan_detail_menu li a{display: block;padding: 20px 0;}
@media screen and (max-width: 767px) {/*スマホ設定*/
.roomplan_detail_menu {width: 100%;margin-bottom: 30px}
.roomplan_detail_menu li{font-size: 13px;}
.roomplan_detail_menu li a{padding: 8px 0;}
}


/* 詳細 */
#body_roomplan{padding: 60px 0}
#body_roomplan img{max-width: 100%;height: auto}
#body_roomplan a:hover{opacity: 0.8}

#body_roomplan{background: url("../images/plan/detail/bg.jpg") no-repeat;background-size: cover}
#body_roomplan h2{color: #fff;font-size: 40px; letter-spacing: 0.2em;padding: 0px 0 30px;text-align: center}

#body_roomplan .body_area_inner{background: #fff;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;padding: 50px}

#body_roomplan .plan_detail_title{width: 812px;margin: auto}
#body_roomplan .plan_detail_title h3{width: 600px;margin: 0 auto 80px}
#body_roomplan .col60{width: calc(100% - 280px);}
#body_roomplan .col40{width: 215px}

#body_roomplan .point{text-align: left}
#body_roomplan .point dt{font-size: 18px;border-bottom: 1px solid #756f6c}
#body_roomplan .point dd{font-size: 14px;margin: 10px 0 20px}

#body_roomplan .notice{text-align: left;margin-top: 30px;}
#body_roomplan .mark{text-align:center;margin-top: 40px}
#body_roomplan .plan_detail_zu{width: 800px;margin: 60px auto 0}

@media screen and (max-width: 767px) {/*スマホ設定*/
#body_roomplan{padding: 30px 0}
#body_roomplan .body_area_inner{padding: 30px 20px}
#body_roomplan h2{font-size: 22px;}
#body_roomplan .plan_detail_title h3{width: 100%;margin: 0 auto 40px}
#body_roomplan .plan_detail_title{width: 80%;margin: auto}
#body_roomplan .col60{width: 100%;margin: auto}
#body_roomplan .col40{width: 100%;margin: auto}
#body_roomplan .point dt{font-size: 16px;border-bottom: 1px solid #756f6c}
#body_roomplan .point dd{font-size: 13px;margin: 10px 0 20px}
#body_roomplan .plan_detail_zu{width: 100%;margin: 30px auto 0}
}

/* 鳥かご */
#roomplan_detail_floorBox {position: relative;text-align:left;margin: 0px auto 40px;width: 215px}
#roomplan_detail_floorBox img{width: 215px;}
#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:25px;height:250px;width:27px;background:URL("../images/plan/detail/detail_floors_a.svg") no-repeat -25px 0px;background-size: 215px}
#roomplan_detail_floorBox #type_b{top:0px;left:58px;height:251px;width:27px;background:URL("../images/plan/detail/detail_floors_b.svg") no-repeat -58px 0px;background-size: 215px}
#roomplan_detail_floorBox #type_c{top:0px;left:90px;height:251px;width:27px;background:URL("../images/plan/detail/detail_floors_c.svg") no-repeat -90px 0px;background-size: 215px}
#roomplan_detail_floorBox #type_d{top:0px;left:122px;height:251px;width:27px;background:URL("../images/plan/detail/detail_floors_d.svg") no-repeat -122px 0px;background-size: 215px}
#roomplan_detail_floorBox #type_e{top:0px;left:155px;height:251px;width:27px;background:URL("../images/plan/detail/detail_floors_e.svg") no-repeat -155px 0px;background-size: 215px}
#roomplan_detail_floorBox #type_f{top:0px;left:187px;height:232px;width:27px;background:URL("../images/plan/detail/detail_floors_f.svg") no-repeat -187px 0px;background-size: 215px}


@media screen and (max-width: 767px) {/*スマホ設定*/

}
/* ボタン */
.roomplan_detail_btns {    width: 820px;    margin: 60px auto 0px auto;}
.roomplan_detail_btns p img{width: 100%;height: auto}
.roomplan_detail_btns p.roomplan_detail_print {	float:right;  width: 400px;  height: 64px;}
.roomplan_detail_btns p.roomplan_detail_close {	float:left;  width: 400px;  height: 64px;}
.roomplan_detail_btns p.roomplan_detail_print a {  background: url(../images/plan/detail/detail_print_ov.svg) no-repeat 0 0;  display: block; background-size: cover; height: 64px;  width: 400px;}
.roomplan_detail_btns p.roomplan_detail_close a {  background: url(../images/plan/detail/detail_back_ov.svg) no-repeat 0 0;  display: block; background-size: cover;  height: 64px;  width: 400px;}
.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 (max-width: 767px) {/*スマホ設定*/


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


/* ボタン */
.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,
.roomplan_detail_menu{display: none;}
#body_roomplan .box_plan a img {width: 100%;}
#body_roomplan .body_area_inner{width: 80%;margin: auto}
#body_roomplan .plan_detail_zu{width: 80%;margin: 60px auto 0}
#body_roomplan .body_area_inner{padding: 0px}
#body_roomplan{padding: 0px 0}
}