@charset "utf-8";

/* mainimage */
#mainvisual{
	position: relative;
	overflow: hidden;
	width: 100%;
}
#mainvisual h2{
	width: 29.245%;
	position: absolute;
	bottom: -5px;
	right: 5%;
	z-index: 2;
	display: flex;
}
.mainimage{
	/* background: url("../img/main_image.webp") no-repeat top center; */
	/* background-size: cover; */
	width: 100%;
	/* min-height: 965px; */
}
/* .mainimage figcaption.cap_w{
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	right: 20px;
	z-index: 2;
}
.mainimage figcaption.cap_b{
	font-size: 10px;
	position: absolute;
	bottom: 10px;
	right: 20px;
	z-index: 2;
} */
.contents_imgbg{
	background: url("../../common/img/concept_bg.webp") no-repeat top center;
	background-size: cover;
}
.inner{
	max-width: 1180px;
	margin: 0 auto;
}

/* plan */
#plan{
	padding-top: 80px;
}
.plan_mainimg{
	max-width: 1560px;
	margin: 0px auto 80px;
	position: relative;
}
.plan_maintext{
	color: #FFF;
	width: 100%;
	height: 100%;
	padding: 110px 20px 20px;
	text-align: center;
	position: absolute;
	top: 0;
	z-index: 2;
	text-shadow:0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 3px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7);
	margin-bottom: 100px;
}
.plan_maintext h3{
	font-size: 32px;
	letter-spacing: 0.1em;
	margin-bottom: 35px;
	font-weight: 600;
}
.plan_maintext p{
	font-size:20px !important;
	letter-spacing: 0.1em;
	line-height: 200%;
	font-weight: 600;
}
.plan_container_wide{
	margin-bottom: 60px;
}
.plan_contents h4{
	color: #615465;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
}
.plan_contents p{
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 180%;
	margin-bottom: 30px;
}
.plan_contents p strong{color: #c30d23;}
.plan_container{
	margin-bottom: 50px;
	display: flex;
	align-items: center;
}
.sash_img{position: relative;display: flex;justify-content: space-between;flex-wrap: wrap; max-width: 500px;}
.sash_img img{height: 105px;}
.sash_img .cap_r{position: static;text-align: right;width: 100%;}
.plan_container .plan_contents{
	flex: 1;
}
.plan01{
	flex-direction: row;
}
.plan01 .plan_contentsimg{
	width: 46%;
	margin-left: 50px;
}
.plan02{
	flex-direction: row-reverse;
}
.plan02 .plan_contentsimg{
	width: 45.3781512605042%;
	margin-right: 50px;
}

.plan03{
	flex-direction: row;
}
.plan03 dl{
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	width:100%;
}
.plan03 dt{
	width: 23%;
}
.plan03 dd{
	width: 25%;
}
.plan03 .plan_contentsimg{
	/* width: 37.56302521008403%;
	margin-left: 50px; */
	position: relative;
}
.plan03 dd .plan_contents{
	width: 94%;
	padding: 0 10px 0 5px;	
}
.plan03 dd .plan_contents p{
	letter-spacing: 0;
}
.plan03 dd .plan_contents .note{
	font-size:12px;
}
.plan03 .plan_contents p{
	line-height: 150%;
}
/* plan detail */
.planinfo{
	padding: 100px 0;
}
.planinfo_container{
	display: flex;
	justify-content: space-between;
}
.plandetail{
	color: #FFF;
	width: 47.89915966386555%;
	background: #615465;
	padding: 50px 70px 30px;
}

.plandetail h3{
	font-size: 34px;
	text-align: center;
}
.plandetail h3 div{
	border-bottom: 1px solid #FFF;
	display: inline-block;
	min-width: 300px;
	padding-bottom: 20px;
	margin-bottom: 15px;
}
.plandetail h3 div strong{
	font-size: 1.5em;
	margin-right: 5px;
	line-height: 100%;
}
.planlabel{
	font-size: 1.4em;
	text-align: center;
}
.planlabel strong{
	font-size: 1.3em;
}
.areainfo{
	max-width: 350px;
	margin: 0 auto;
}
.areainfo p{
	font-size: 0.8em;
	letter-spacing: 0.1em;
}
.areainfo p strong{
	font-size: 2em;
	margin-left: 5px;
	line-height: 100%;
}
.areainfo p span{
	font-size: 2em;
}
.areainfo p small{
	font-size: 0.9em;
}
.planspec{
	max-width: 350px;
	margin: 0 auto 30px;
	font-size: 0.9em;
}
.planbtn{
	text-align: center;
	margin-top:40px; 
}
.planbtn a{
	background: #fff;
	color: #615465;
	font-size: 1.2em;
	letter-spacing: 0.025em;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 270px;
	height: 42px;
	text-decoration: none;
	margin: 0 auto;
}
.planbtn a:hover{
	background: #191919;
	color:#fff;
}

/* modal */
/* モーダル本体
.detail_wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.detail_layer {
  height: 100%;
  cursor: pointer;
} 

.detail_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 1000px);
  height: calc(100% - 40px);
  padding: 20px;
}*/

.detail_inner {
  position: relative;
  /*　overflow-y: scroll;　*/
  height: 100%;
  padding: 0 20px 50px;
}

/* モーダルを閉じるボタン */
.detail_close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(50, 50, 50, 1);
  cursor: pointer;
  transition: opacity .6s;
}

.detail_close:hover {
  opacity: .6;
}

.detail_close:before,
.detail_close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.detail_close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.detail_close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* .detail_wrapper{
	background: #615465;
} */
.detail_inner{
	max-width: 1000px;
	margin: 0 auto;
}
.detail_content{
	color: #000;
	text-align: center;
}
.detail_planttl{
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
	border-bottom: 1px solid #231815;
  padding-bottom: 20px;
  margin: 0 auto 15px;
}
.detail_planttl h3{
	font-size: 34px;
	text-align: center;
	border-right: 1px solid #231815;
	margin-right: 25px;
	padding-right: 25px;
}
.detail_planttl h3 div{
	display: inline-block;
}
.detail_planttl h3 div strong{
	font-size: 50px;
	margin-right: 5px;
	line-height: 60%;
	color: #615465;
}
.detail_content .areainfo {
  max-width: 100%;
  margin: 0 auto;
}
.detail_content .planspec {
	font-size: 14px;
  max-width: 100%;
  margin: 0 auto 30px;
}
.detail_content .areainfo p {
  font-size: 14px;
  letter-spacing: 0.1em;
}
.detail_plantag{
	display: inline-flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	width: 100%;
}
.detail_plantag .tag{
	border: 1px solid #FFF;
	width: 48%;
	font-size: 12px;
	height: 40px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	background:#615465;
	color:#fff;
	letter-spacing: -0.1em;
}
.centertext{
	font-size: 1.2em;
	text-align: center;
	margin: 35px 0 30px;
}
.detail_plandetail{
	background: #FFF;
	width: 100%;
	max-width: 900px;
	padding: 20px;
	margin: 0 auto 50px;
}
.detail_plandetail .note , .plan_wbg .note{
	font-size:12px;
	text-align:right;
	max-width: 700px;
	margin: 0 auto;
}
.detail_plandetail .note .underfloor_heating , .plan_wbg .note .underfloor_heating{
	color: #f7c9dd;
}
.detail_plandetail .note .storage , .plan_wbg .note .storage{
	color: #fbe6ef;
}
.plantabs{
	display: flex;
	justify-content: space-evenly;
	width: 80%;
	margin: 0 auto 30px;
}
.plantab{
	display: flex;
	width: 30%;
	height: 40px;
	justify-content: center;
	align-items: center;
	border: 3px solid;
	background: #706c6f;
	color: #bbbcbc;
	border-image: linear-gradient(to right, #c6bfc4, #625565);
	border-image-slice: 1;
	margin-inline: auto;
	font-weight: 600;
	font-size: 0.8em;
}
.plantab.on{
	background: #dbd6d9;
	color: #615465;
}
.detail_content .planimg{
	padding: 20px;
}
.detail_content .planimg img{
	width: 75%;
	margin: 0 auto;
}

.detail_content dl{display: flex;}
.detail_content dt{width: 35%;}
.detail_content dd{width: 64%;}


.plan_atype_img,.plan_btype_img{
	display: none;
}
.plan_atype_img.on,.plan_btype_img.on{
	display: block;
}
.point{
	display: inline-block;
	color: #231815;
	width: 100%;
	max-width: 700px;
	margin: 50px auto 30px;
}
.point_ttl{
	color: #615465;
	font-size: 24px;
	margin-bottom: 15px;
	letter-spacing: 0.1em;
}
.point ul{
	border-top: 1px dotted #000;
}
.point ul li{
	font-size: 14px;
	text-align: left;
	padding: 15px 5px;
	border-bottom: 1px dotted #000;
	text-indent: -1em;
	padding-left: 1em;
}
.backbtn {
	background-image: linear-gradient(90deg, #826a27, #a6905f);
	border: 1px solid #a79030;
	color: #FFF;
	display: inline-flex;
	font-size: 20px;
	width: 100%;
	max-width: 300px;
	height: 50px;
	justify-content: center;
	align-items: center;  
}
a .backbtn:hover{
	background-image: unset;
	background:#fff;
	border: 1px solid #826a27;
	color: #826a27;
}
#casbee{padding: 50px 0 80px 0;background: #fff;}
#casbee figure{text-align: center;}
#casbee figure img{width: 46.297%;max-width:500px;}

@media screen and (max-width: 1201px){
	.inner{
		width: 90%;
	}

}
@media screen and (max-width: 1001px){
	.plan_maintext h3 {
		font-size: 30px;
		margin-bottom: 25px;
	}
	.plan_maintext p {
		font-size: 18px;
	}
	.plandetail {
		padding: 30px 20px 20px;
	}
}
@media screen and (max-width: 767px){
	.inner{
		width: 90%;
	}
	
	/* mainimage */
	#mainvisual h2{
		width: 34.02%;
		position: absolute;
		bottom: -1px;
	}
	.mainimage{
		/* background: url("../img/main_image_sp.webp") no-repeat top center; */
		/* background-size: cover; */
		width: 100%;
		/* min-height: 384px; */
	}
	
	/* plan */
	#plan {
		padding-top: 0;
	}
	.plan_mainimg{
		margin-bottom: 30px;
		/* background: url("../img/plan_image.webp") no-repeat top center;
		background-size: cover; */
	}
	.plan_mainimg figure{
		/* display: none; */
	}
	.plan_maintext {
		padding: 100px 20px 50px;
		margin-bottom: 50px;
		/* position: relative; */
	}
	.plan_maintext h3 {
		font-size: 20px;
		margin-bottom: 15px;
	}
	.plan_maintext p {
		font-size: 15px !important;
        line-height: 180%;
        text-align: left;
	}
	.main_read{
		margin:30px auto 50px;
		font-size: 14px;
	}
	.plan_contents h4 {
		font-size: 18px;
        margin-bottom: 5px;
	}
	.plan_contents p {
		font-size: 14px;
		line-height: 180%;
		margin-bottom: 20px;
	}
.sash_img{position: relative;display: flex;justify-content: space-between;flex-wrap: wrap; max-width: 500px;}
.sash_img img{height: 95px;}
.sash_img img:nth-child(2){margin-top: 30px;}

	.detail_content dl{display: unset;}
	.detail_content dt{width: 100%;}
	.detail_content dd{width: 100%;margin-top:-50px;}
	
	.detail_content .areainfo p {
	    font-size: 12px;
	}
	.detail_content .planspec {
		font-size: 13px;
	}
	.plan_container {
		margin-bottom: 40px;
		/* display: block; */
		display: flex;
        flex-direction: column-reverse;
	}
	.plan01 .plan_contentsimg,.plan02 .plan_contentsimg,.plan03 .plan_contentsimg{
		width: 100%;
		margin:0px;
		text-align: center;
		position: relative;
	}
	.planinfo {
		padding: 50px 0 0;
	}
	.planinfo_container {
		display: block;
	}
	.plandetail {
		width: 100%;
		padding: 20px;
		margin-bottom: 30px;
	}
	.plandetail h3 div strong {
		font-size: 50px;
	}
	.plandetail h3,.planlabel {
		font-size: 20px;
	}
	.planlabel strong {
		font-size: 28px;
	}
	.areainfo p strong {
		font-size: 24px;
	}
	.areainfo p span {
		font-size: 24px;
	}
	.areainfo p small {
		font-size: 13px;
	}
	.planspec{
		height: auto !important;
	}
	.planimg figure{
		text-align: center;
	}
	.planbtn {
		margin-top: 20px;
	}
	.plan03 dl{
		flex-wrap: wrap;
	}
	.plan03 dt{
		width: 100%;
	}
	.plan03 dd{
		width: 100%;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.point{
		margin: 30px auto;
	}
	.point_ttl{
		font-size: 20px;
	}
	
	/* modal */
	.detail_container{
		padding: 0;
	}
	.detail_inner {
		padding: 30px 10px 20px;
	}
	.detail_plantag .tag {
        width: 48%;
        height: 40px;
	}
	.detail_planttl h3 div strong {
		font-size: 40px;
	}
	.detail_plantag{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
	}
	.plantabs{
		width: 100%;
		flex-wrap: wrap;
	}
	.plantab{
		width: 100%;
		margin-bottom:0.5em;
	}
	.detail_content .planimg{
		padding:0;
		margin-bottom: 2em;
	}
	.detail_content .planimg img{
		width: 100%;
	}
	.backLink{margin:30px auto;}
	.backbtn {
		font-size: 1.2em;
		height: 40px;
	}
	#casbee{padding: 30px 0 50px 0;}
	#casbee figure img{width: 80%;}
}