@charset "utf-8";
/* ===================================================================
//CSS information

// file name  :  5min.css
// style info :  スタイル指定
=================================================================== */

/* specList
--------------------------------------------------------------------------------*/
.planWrap {
	margin-bottom: 100px;
}
.specList {
	margin-top: 50px;
}
.specList li{
	display: inline-block;
	width: 47%;
	background: #f3f3f3;
	padding: 30px 15px 29px;
	margin: 0 2% 15px 0;
	text-align: center;
	float: left;
}

p.specList_inner{position: relative; color: #69631f; font-size: 1.4em; padding-left: 30px; line-height: 1.3; text-align: left;}
span.specList_number{position: absolute; left: 0; top: 0;}
p.specList_read{font-size: 1em; text-align: left; line-height: 1.5;}

.specList li figure{margin-top: 20px;}
body.fontSize_large .specList li{padding: 30px 10px 15px;}
.specList li span{
	display: block;
	text-align: center;
    background: #b46b64;
    color: #fff;
    width: 25px;
    height: 25px;
    /*vertical-align: middle;
    margin-right: 10px;
	margin-bottom: 3px;
	padding: 2px;*/
    font-size: 0.9em;
}
.specList li small{font-size: 0.6em;}
.specList li:nth-child(2) span{background: #5e9b66;}
.specList li:nth-child(3) span{background: #3aa3af;}
.specList li:nth-child(4) span{background: #4b6296;}
.specList li:nth-child(5) span{background: #a98d1f;}
.specList li:nth-child(6) span{background: #805c73;}
.specList li:nth-child(7) span{background: #b054af;}
.specList li:nth-child(8) span{background: #d38522;}
.specList li:nth-child(9) span{background: #e7184e;}
.specList li.line1{padding-top: 40px;}

.planWrap .icon_area{margin-top:20px;}

@media only screen and (max-width: 767px) {
	.specList li {
		padding: 15px;
		font-size: 1em;
		float:none;
		display: block;
		width: 100%;
	}
	.specList li.line1{padding-top:15px;}
	.specList li br{display: none;}
	body.fontSize_large .specList li{padding: 15px 0;}
	
	.planWrap{margin-bottom:30px;}
	
}

.plan_image{padding: 10px;}

.floorPlan_box{margin-bottom: 100px;}
.floorPlan_box a{display: block; box-shadow:0 1px 12px rgba(0,0,0,.6); background: #fff; padding: 25px; transition:all .2s ease;}
.floorPlan_box a:hover{box-shadow: 0 0 0 rgba(0,0,0,.6); opacity: .7; border: 1px solid #ccc;}
.floorPlan_box a ul.type_detail_1{display: table; width: 100%;}
.floorPlan_box a ul.type_detail_1 li{display: table-cell; vertical-align: top; width: 50%; font-size: 1.5em; color:#787953; border-bottom: 1px solid #787953; padding-bottom: 10px; margin-bottom: 10px;}
.floorPlan_box a ul.type_detail_1 li b{font-size: 1.7em;}
.floorPlan_box a ul.type_detail_1 li:nth-child(2){text-align: right; vertical-align: middle;}
.floorPlan_box a p.type_detail_2{text-align: center; font-size: 1.5em; color: #787953;}
.floorPlan_box a figure{max-width: 100%; margin: 0 auto 30px;}
.floorPlan_box a p.about{text-align: center; margin-bottom: 0; background: #ccc; color: #fff; padding: 1px;
	background: rgb(121,121,121);
    background: -moz-linear-gradient(top, rgba(121,121,121,1) 0%, rgba(77,67,66,1) 100%);
    background: -webkit-linear-gradient(top, rgba(121,121,121,1) 0%,rgba(77,67,66,1) 100%);
    background: linear-gradient(to bottom, rgba(121,121,121,1) 0%,rgba(77,67,66,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#797979', endColorstr='#4d4342',GradientType=0 );
}
.floorPlan_box a p.about span{border: 1px solid #fff; display: block; padding: 5px 0;}
.floorPlan_box a p.about span:after{content: ""; display: block; width: 10px; height: 10px; border-top:1px solid #fff; border-right:1px solid #fff; transform: rotate(45deg); display: inline-block; margin-left: 5px;}

body.fontSize_large .floorPlan_box a ul.type_detail_1 li{font-size: 1.3em;}
body.fontSize_large .floorPlan_box a ul.type_detail_1 li b{font-size: 1.5em;}

@media screen and (max-width:414px){
	.plan_image{padding: 0;}
}

/* detail ーーーーーーーーーーーーーーーーーーーー*/
.floorPlanDetails{padding: 100px 0 0;}
.PlanDetails_header{max-width: 720px; margin: 0 auto 50px;}
.PlanDetails_header .col-sm-3{border-right: 1px solid #ccc;}
.PlanDetails_header p.type{font-size: 2em; text-align: center;}
.PlanDetails_header p.type b{font-size: 1.5em;}
.PlanDetails_header ul.about{padding-left: 20px; line-height: 1.5;}
.PlanDetails_header ul.about li:nth-child(1){font-size: 1.8em;}
.PlanDetails_header ul.about li:nth-child(2){font-size: 1.4em;}
.PlanDetails_header ul.about li:nth-child(2) b{font-size: 1.6em;}
.PlanDetails_header ul.about li:nth-child(3){font-size: 1em;}

.icon_area{max-width: 1170px;     margin: 20px auto 0; text-align:center;}
.icon_area ul li{display:inline-block; margin: 0 10px; font-size: 1em;}
.icon_area ul li img{width:40px;  vertical-align: middle; margin-right: 10px;}
.icon_area ul li:nth-child(3) span{width: 40px; height: 10px; background: #edccad; display: inline-block; margin-right: 10px;}
.icon_area ul li:nth-child(4) span{width: 40px; height: 10px; background: #c8dbe6; display: inline-block; margin-right: 10px;}
.icon_area ul li:nth-child(5) span{width: 40px; height: 10px; background: #edc9d7; display: inline-block; margin-right: 10px;}

.floorPlanBtn{text-align: center; margin: 50px 0 100px;}
.floorPlanBtn ul li{display: inline-block; margin-bottom: 10px;}
.floorPlanBtn ul li:nth-child(1) a{display: inline-block; padding: 20px 0; font-size: 1.2em; color: #fff; width: 260px;
	background: rgb(126,119,73);
    background: -moz-linear-gradient(top, rgba(126,119,73,1) 0%, rgba(75,66,1,1) 100%);
    background: -webkit-linear-gradient(top, rgba(126,119,73,1) 0%,rgba(75,66,1,1) 100%);
    background: linear-gradient(to bottom, rgba(126,119,73,1) 0%,rgba(75,66,1,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7749', endColorstr='#4b4201',GradientType=0 );
}
.floorPlanBtn ul li:nth-child(2) a{display: inline-block; padding: 20px 0; font-size: 1.2em; color: #fff; width: 260px;
	background: rgb(121,121,121);
    background: -moz-linear-gradient(top, rgba(121,121,121,1) 0%, rgba(77,67,66,1) 100%);
    background: -webkit-linear-gradient(top, rgba(121,121,121,1) 0%,rgba(77,67,66,1) 100%);
    background: linear-gradient(to bottom, rgba(121,121,121,1) 0%,rgba(77,67,66,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#797979', endColorstr='#4d4342',GradientType=0 );
}
.floorPlanBtn ul li a:hover{opacity: 0.7;}
.floorPlanImage{max-width: 720px; margin: 0 auto;}

@media screen and (max-width:414px){
	.floorPlanDetails{padding: 20px 0 0;}
	.icon_area ul li{font-size: 0.7em; margin: 0 5px;}
	.icon_area ul li img{width: 30px;}
	.icon_area ul li:nth-child(3) span,
	.icon_area ul li:nth-child(4) span{width: 30px;}
	
	.PlanDetails_header ul.about li:nth-child(2){font-size: 0.8em;}
	.PlanDetails_header ul.about li:nth-child(3){font-size: 0.8em;}
	.PlanDetails_header .col-sm-3{border-right:none;}
}

@media print{
	body {-webkit-print-color-adjust: exact;}
	header,.informationWrap,footer,.floorPlanBtn{display: none;}
	main{margin-top:30px !important;}
	.floorPlanDetails{padding:0;}
	.PlanDetails_header{margin-bottom:10px;}
	.PlanDetails_header .col-sm-3{width:30%;}
	.PlanDetails_header .col-sm-9{width:70%;}
	.floorPlanImage{max-width:80%;}
}


/*タブ*/
.floorPlanTab .tab-group{text-align: center;}
.floorPlanTab .tab_btn{display: inline-block;
	padding: 20px 0;
    font-size: 1.2em;
    color: #fff;
    width: 260px;
    background: #949494;
	margin-bottom: 10px;
}
.floorPlanTab .tab_btn.is-active{
	background: #7e7749;
	background: -moz-linear-gradient(top,  #7e7749 0%, #4b4201 100%);
	background: -webkit-linear-gradient(top,  #7e7749 0%,#4b4201 100%);
	background: linear-gradient(to bottom,  #7e7749 0%,#4b4201 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7749', endColorstr='#4b4201',GradientType=0 );
}
.floorPlanTab .tab_btn:hover{cursor: pointer;
	background: #7e7749;
	background: -moz-linear-gradient(top,  #7e7749 0%, #4b4201 100%);
	background: -webkit-linear-gradient(top,  #7e7749 0%,#4b4201 100%);
	background: linear-gradient(to bottom,  #7e7749 0%,#4b4201 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7749', endColorstr='#4b4201',GradientType=0 );
}

.panel_box{display:none;}
.panel_box.is-show{display:block;}

.floorPlanImage_wrap{max-width: 900px; margin: 20px auto 0;}
.floorPlanImage_wrap:after{content: ""; display: block; clear: both;}
.floorPlanImage_wrap .floorPlanText{float: left; width: 35%;}
.floorPlanImage_wrap .floorPlanImage{float: right; width: 65%;}

.floorPlanImage_wrap .floorPlanText .floorPlanText_inner{padding-left: 20px; padding-top: 30px;}
.floorPlanImage_wrap .floorPlanText .floorPlanText_inner p{position: relative; z-index: 1; border: 1px solid #ccc; padding: 15px; margin-bottom: 40px; font-size: 0.93em; background: #eee; line-height: 2;}
.floorPlanImage_wrap .floorPlanText .floorPlanText_inner p:before{content: ""; position: absolute; z-index: 2; bottom: -20px; left: 0; right: 0; width: 1px; display: block; margin: auto;
	 border-top: 20px solid #ccc; border-left: 15px solid transparent; border-right: 15px solid transparent;}
.floorPlanImage_wrap .floorPlanText .floorPlanText_inner p:after{content: ""; position: absolute; z-index: 2; bottom: -18px; left: 0; right: 0; width: 1px; display: block; margin: auto;
	 border-top: 20px solid #eee; border-left: 15px solid transparent; border-right: 15px solid transparent; clear: both;}
.floorPlanImage_wrap .floorPlanText .floorPlanText_inner figure{text-align: center; margin-bottom:20px;}

.floorPlanTitle h2{margin: 40px 0 20px; color: #787953; font-size: 1.5em;}

@media only screen and (max-width: 640px) {
	.floorPlanImage_wrap .floorPlanText{float: none; width: 100%;}
	.floorPlanImage_wrap .floorPlanImage{float: none; width: 100%;}	
	.floorPlanImage_wrap .floorPlanText .floorPlanText_inner{padding: 20px 15px 0;}	
}



/*モデルルーム ーーーーーーーー*/
#slider_wrap .bg_img{
    position: relative;
    z-index: 0;
}
#slider_wrap .bg_img .cap{position: absolute; bottom:0; right: 0; background: rgba(0,0,0,0.6); font-size: .8em; padding: 5px; color: #fff;}


#slider_wrap .thumbnail{border: none; padding: 0;margin-bottom: 50px;}
#slider_wrap .row{margin-left: 0; margin-right: 0;}
#slider_wrap .thumbnail .row {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
}
#slider_wrap .thumbnail a{width: calc(100% / 7);padding: 0;}
@media only screen and (min-width: 641px) {
    #slider_wrap .thumbnail a:nth-last-child(-n+6){
        width: calc(100% / 6);
    }
}

.thumbnail .wrap a:after {
    content: "";
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 10;
    top: 0;
}
.thumbnail div.wrap a.active:after {
    content: "";
    background: none;
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 10;
    top: 0;
}

@media only screen and (max-width: 640px) {
	#slider_wrap .thumbnail a{width: calc(100% / 5);}
}
/* DIRECTION CONTROLS (NEXT / PREV) */
#slider_wrap .bx-prev{
  left: -10px;
  background: url('../../../img/pages/plan/modelroom/prevBtn.png') no-repeat center center;
}
#slider_wrap .bx-next{
  right:-10px;
  background: url('../../../img/pages/plan/modelroom/nextBtn.png') no-repeat center center;
}
#slider_wrap .bx-controls-direction a{
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 70px;
  height: 90px;
  text-indent: -9999px;
  z-index: 9999;
}
#slider_wrap .bx-controls-direction a.disabled {
  display: none;
}
.bx-controls-direction a{
    text-decoration: none;
    display: block;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}
#slider_wrap:hover .bx-controls-direction .bx-prev{
    opacity: 0.7;
    left: 10px;
}
#slider_wrap:hover .bx-controls-direction .bx-next{
    opacity: 0.7;
    right: 10px;
}
#slider_wrap:hover .bx-controls-direction .bx-prev:hover,
#slider_wrap:hover .bx-controls-direction .bx-next:hover{
    opacity: 1;
}

@media only screen and (max-width: 640px) {
	#slider_wrap .bx-controls-direction a{width: 40px; height: 50px;}
}


/*間取りコメントーーーーーーー*/
.floorPlan_comment_box{position: relative; z-index: 1; border: 1px solid #ccc; padding: 10px 5px 10px 10px; margin-bottom: 40px;}
.floorPlan_comment_box:before{content: ""; position: absolute; z-index: 2; bottom: -20px; left: 20px; width: 1px; display: block; 
	 border-top: 20px solid #ccc; border-left: 15px solid transparent; border-right: 15px solid transparent;}
.floorPlan_comment_box:after{content: ""; position: absolute; z-index: 2; bottom: -18px; left: 20px; width: 1px; display: block; 
	 border-top: 20px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; clear: both;}
.floorPlan_comment_box p{font-size: 0.9em; line-height: 1.8; margin-bottom: 0;}
.floorPlan_comment_box p:after{content: "";}
.floorPlan_box a .floorPlan_comment_box .comment_space{float: right;}
.floorPlan_box a .floorPlan_comment_box .comment_space_1{height: 10px;}
.floorPlan_box a .floorPlan_comment_box .comment_space_2{height: 10px;}
.floorPlan_box a .floorPlan_comment_box .comment_space_3{height: 10px;}
.floorPlan_box a .floorPlan_comment_box .comment_space_4{height: 10px;}
.floorPlan_box a .floorPlan_comment_box figure{margin: 5px; float: right; clear: both;}
.floorPlan_box a .floorPlan_comment_box figure img{height: 100px; width: auto;}

@media only screen and (max-width: 640px) {
	.floorPlan_comment_box p br{display: none;}
}

/*キーワード ーーーーーーー*/
.floor_keyword{max-width: 700px; margin: 40px auto 0;}
.floor_keyword h3{text-align: center; font-size: 1.6em;}
.floor_keyword ul li{margin-bottom: 5px;}


.reverse-mortgage_link{max-width: 525px; margin: 0 auto;}
.reverse-mortgage_link a{position: relative; display: block; margin-bottom: 20px; background: #36bcef; text-align: center; color: #fff; padding: 20px 0; letter-spacing: 1px; transition: 0.5s; font-size: 1.2em;}
.reverse-mortgage_link a:before{content: ""; display: block; 
    border-left: 5px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    position: absolute; left: 25px; top: 24px;}
.reverse-mortgage_link a:hover{opacity: 0.7;}

@media only screen and (max-width: 640px) {
    .reverse-mortgage_link{max-width: 260px;}
    .reverse-mortgage_link a{line-height: 1.5; padding: 15px 0;}
}



/* M返済例 */
.pepaymentFrame{ 
    background: #ece7e0;
    padding: 50px 0;
}
.pepaymentFrame .pepayment{font-size: 1.6em;text-align: center;color: #2b080e;}
.pepaymentFrame .pepayment span.green_label{background: #33793c;color: #fff;padding: 8px 15px;display: inline-block;vertical-align: text-bottom;}
.pepaymentFrame .pepayment span.big{font-size: 2.2em;}
.pepaymentFrame .pepayment .Anno{font-size: 0.4em;color: #2b080e;text-align: left;margin-bottom: 0;margin-top: 10px;}
@media only screen and (max-width: 767px){
	.pepaymentFrame .pepayment{font-size: 1.4em;}
	.pepaymentFrame .pepayment span.green_label{display: block;margin-bottom: 10px;}
}

/**/
.floorPlan_Plan{ }
.floorPlan_Plan h3{ text-align: center; padding: 30px 0;}
.floorPlan_Plan h3 span{ position: relative; display: inline-block; padding-right: 120px;}
.floorPlan_Plan h3 .floorPlan_icon{ position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 100px;}

.floorPlan_Plan.floorPlan_Plan_single h3 span{ padding-right: 220px;}
.floorPlan_Plan.floorPlan_Plan_single h3 .floorPlan_icon{ width: 200px;}

.floorPlan_flex{ display: flex; flex-wrap: wrap; justify-content: center;}

.pc_only{ display: block;}
.sp_only{ display: none;}
@media only screen and (max-width: 767px){
	.pc_only{ display: none;}
	.sp_only{ display: block;}
	
	.floorPlan_Plan h3{ padding: 0 0 10px;}
	.floorPlan_Plan h3 .floorPlan_icon{ bottom: 10px; top: initial; right: initial; left: 50%; transform: translateY(0%) translateX(-50%);}
	.floorPlan_Plan h3 span{display: block;}
	.floorPlan_Plan h3 span,
	.floorPlan_Plan.floorPlan_Plan_single h3 span{ padding: 0 0 120px 0;}
}

.mt80 {
    margin-top: 80px;
}

.mt0 {
    margin-top: 0 !important;
}
.mb0 {
    margin-bottom: 0 !important;
}
.mb40 {
    margin-bottom: 40px !important;
}
.slide01 {
    margin: 120px auto 0;
}
@media only screen and (max-width: 767px){
    .slide01 {
        margin: 60px auto 0;
    }
    .mt40_sp {
        margin-top: 40px;
    }
}