@charset "UTF-8";

/* ---------------------------------------------------------------------
 * 間取り詳細ページ
 * --------------------------------------------------------------------- */
 .prebg{background: url("../images/plan/bg.jpg")}
.basebg{background: url("../images/plan/bg.jpg")}
 
.pages_main_title .inner{padding: 60px 0}
.pages_main_title{}
.pages_main_title h2{color: #c79f62;font-size: 40px;letter-spacing:0.2em;text-indent:0.2em;line-height:0.8;}


/* タブ */
.roomplan_detail_menu {width: 70%;font-size: 0;text-align: center;margin: 0px auto}
.roomplan_detail_menu li{display: inline-block;margin-left: 1%;margin-right: 1%;font-size: 15px;background: #fff;color: #b5b5b6; border: 1px solid #c79f62;position: relative;margin-bottom: 20px;border-radius: 4px;letter-spacing: 0.1em}
.roomplan_detail_menu a{color: #b5b5b6;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:#c79f62 }
.roomplan_detail_menu li.act a{color: #fff;}
.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: #c79f62 transparent transparent transparent;border-width: 10px 10px 0 10px;}
.roomplan_detail_menu li a{display: block;padding: 20px 0;}

/* 詳細 */
#body_roomplan{}
#body_roomplan .body_area_inner{padding: 60px 0}
#body_roomplan .body_area_inner h2{width: 50%;margin:60px  auto}
#body_roomplan .body_area_inner h2 img{width: 100%;height: auto}
#body_roomplan .body_area_inner h3{text-align: left;color: #231815; font-size: 18px;letter-spacing: 0.1em;margin-bottom: 40px}
#body_roomplan .zu{}
#body_roomplan .zu img{width: 100%;height: auto}

#body_roomplan .mark{margin: 60px auto; text-align: left;}
#body_roomplan .mark p{margin-top: 12px}
#body_roomplan .mark img{width: 100%;height: auto}
#body_roomplan .point li{border-left: 3px solid #c79f62;padding-left: 18px;text-align: left; margin: 15px 0;line-height: 1.9; font-size: 15px;}

/* 鳥かご */
#roomplan_detail_floorBox {position: relative;width: 460px;margin-top: 60px}
#roomplan_detail_floorBox img{width: 100%;height: auto}
#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:70px;left:27px;height:71px;width:25px;background:URL("../images/plan/detail/detail_floors_a.svg") no-repeat -26px -70px;background-size: 460px auto}
#roomplan_detail_floorBox #type_k{top:23px;left:285px;height:118px;width:25px;background:URL("../images/plan/detail/detail_floors_k.svg") no-repeat -285px -23px;background-size: 460px auto}
#roomplan_detail_floorBox #type_tr{top:23px;left:410px;height:24px;width:25px;background:URL("../images/plan/detail/detail_floors_tr.svg") no-repeat -410px -23px;background-size: 460px auto}

/* ボタン */
.btns{margin: 40px 0}
.btns p{margin: 4px}

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

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

/*===============================================================================
===============================================================================*/
@media screen and (max-width: 767px) {/*スマホ設定*/
.pages_main_title .inner{padding: 30px 0}
.pages_main_title h2{font-size: 30px;}


/* プラン詳細 */
#body_roomplan .body_area_inner{padding: 30px 0}
#body_roomplan .body_area_inner .col2{width: 80%;margin: auto}
 #body_roomplan .body_area_inner h2{margin-bottom: 30px}

#body_roomplan .point li{ font-size: 13px;}
#body_roomplan .body_area_inner h2{width: 90%;margin:0 auto 40px}
#body_roomplan .body_area_inner h3{font-size: 15px;}
#body_roomplan .zu{padding: 30px 0;margin: 40px auto;}
#body_roomplan .zu{width: 100%;margin: auto; text-align: center;}
#body_roomplan .zu img{width: 100%;height: auto}

#body_roomplan .zu .mark{text-align: left;padding-left: 20px;width: 50%}
 #body_roomplan .mark{width: 80%;margin: 30px auto; text-align: left;}
    
#roomplan_detail_floorBox{width: 70%;margin: 30px auto;}
#roomplan_detail_floorBox .floors a{display: none}

/* タブ */
.roomplan_detail_menu {width: 90%;font-size: 0;text-align: center;margin: 0px auto}
.roomplan_detail_menu li{font-size: 13px;}
.roomplan_detail_menu li a{display: block;padding: 10px 0;}
/* ボタン */
.btns p{width: 70%}
.roomplan_detail_navi_prev img,.roomplan_detail_navi_next img{width: 40px; }
.roomplan_detail_btns{width: 80%;margin: auto}
}

/*===============================================================================
===============================================================================*/
@media print {/*印刷設定*/
#main_image_member.movie .inner,
.pages_main_title .inner{padding: 20px 0!important}
.pages_main_title h2,
.pages_main_image h2{font-size: 20px!important;}

#body_roomplan{background: #fff;padding: 0}
#roomplan_area .box_plan a:before,
.btns,
#humberger,
#roomplan_detail_floorBox .floors a,
#body_member,
.roomplan_detail_btns,.roomplan_detail_navi_prev,.roomplan_detail_navi_next {display: none;}

#body_roomplan .body_area_inner{width: 90%;margin: auto}
#body_roomplan .point{width: 77%}
#body_roomplan .point li{margin:6px 0;line-height: 1.7em; font-size: 14px;}
#roomplan_detail_floorBox{width: 20%}
#body_roomplan .zu{width: 100%;text-align: center;padding: 30px 0;margin-top: 30px}
#body_roomplan .zu img{max-width:40% }
#header{position: absolute;left: 0;top: 0}
 #body_roomplan .body_area_inner h2{width: 35%;margin:20px auto;}
}