@charset "UTF-8";

.pre-inc main.pagehead {
	background: url("../img/plan/main_image.jpg") no-repeat;
	background-size: cover;
	height: 600px;
	width: 100%;
}
.pre-inc #contents-80{
  margin-top:80px;
}
.pre-inc .plan{
  margin-top:80px;
}

.pre-inc .plan_tit{
    color: #FFF;
    font-size: clamp(24px, 3vw, 36px);
    background:linear-gradient(90deg, #0c3b1f, #0c1d0c);;
    padding:0;
    margin-bottom:1em;
    text-align:center;
}
.pre-inc .plan_tit small{
    font-size: 0.5em;
}
.pre-inc .plan_tit big{
    font-size: 2em;
}

.pre-inc main.pagehead.on{
}
.pre-inc .roomplan{
	padding-bottom: 80px;
}
.pre-inc .roomplanflex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.pre-inc .roomplanflex .flexitem{
	border: 2px solid #333333;
	border-radius: 10px;
	width: 46.875%;
	padding: 30px;
	color: #224142;
	margin-bottom:2em;
}
.pre-inc .roomplanflex .flexitem .residence{
	color:#fff;
	padding:0.5em 0;
	text-align:center;
}
.pre-inc .roomplanflex .flexitem .residence.armira{
	background:linear-gradient(0deg, #3c6992, #6597c4);
}
.pre-inc .roomplanflex .flexitem .residence.bloomy{
	background:linear-gradient(0deg, #486782, #6c8aa5);
}
.pre-inc .roomplanflex .flexitem .residence.calm{
	background:linear-gradient(0deg, #142739, #324a60);
}
.pre-inc .roomplanflex .flexitem .residence.dear{
	background:linear-gradient(0deg, #396937, #6fa56c);
}
.pre-inc .roomplanflex .flexitem .residence.ease{
	background:linear-gradient(0deg, #1c391a, #477145);
}
.pre-inc .roomplanflex .flexitem .roomplanhead{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #000;
	margin-bottom: 20px;
}
.pre-inc .roomplanflex .flexitem .roomplanhead .type{
	font-size: clamp(24px,3.6vw,36px);
}
.pre-inc .roomplanflex .flexitem .roomplanhead .type::first-letter{
	font-size: clamp(36px,5vw,50px);
}
.pre-inc .roomplanflex .flexitem .roomplanhead .floorplan{
	font-size: clamp(20px,3.2vw,32px);
	text-align: right;
}
.pre-inc .roomplanflex .flexitem .roomplanhead .floorplan::first-letter{
	font-size: clamp(36px,5vw,50px);
}
.pre-inc .planinfoflex{
	display: flex;
	justify-content: space-between;
}
.pre-inc .planinfoflex .flexleft{
	width: 145px;
}
.pre-inc .planinfoflex .flexright{
	flex: 1;
	margin-left: 15px;
}
.pre-inc .planinfoflex .flexright i{
    z-index: 2;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 1.6em;
    font-weight: 500;
    width: 80%;
    margin-left: 10%;
    white-space: pre;
    background: rgb(129 16 16);
    padding: 16% 0px;
    height: 13em;
   	display:flex;
    align-items: center;
    justify-content: center;
    font-size:1.3em;
}
.pre-inc .roomplaninner{
	position: relative;
	padding-bottom: 90px;
	height: 100%;
}
.pre-inc .planinfohead{
	margin-bottom: 30px;
}
.pre-inc .planinfohead .floor{
	font-size: clamp(24px,3.6vw,36px);
	line-height: 1;
	margin-top: 10px;
}
.pre-inc .planinfohead .floor strong{
	font-size: clamp(36px,5vw,50px);
	line-height: 0;
}
.pre-inc .planinfohead .floornote{
	text-align: center;
}
.pre-inc .roomplan_equipment .equipment_label{
	background: #224142;
	color: #FFF;
	font-size: clamp(16px,1.8vw,18px);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 5px;
	line-height: 120%;
	padding: 5px;
}
.pre-inc .morebtn,.pre-inc .requestbtn{
	width: 100%;
	position: absolute;
	bottom: 0px;
	text-align: center;
}
.pre-inc .backbtn{
	width: 100%;
	text-align: center;
	margin-top: 80px;
}
.pre-inc .morebtn a{
	background: url("../common/img/btn_arw.svg") no-repeat,linear-gradient(90deg, #0c3b1f, #0c1d0c);
	background-size: 24px auto,cover;
	background-position: right 12px center,center center;
	color: #FFF;
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: clamp(18px,2.4vw,24px);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	max-width: 360px;
	width: 100%;
	height: 50px;
	transition: 0.5s;
}
.pre-inc .requestbtn a{
	background: url("../common/img/btn_arw.svg") no-repeat,linear-gradient(90deg, #1d3577, #131f40);
	background-size: 24px auto,cover;
	background-position: right 12px center,center center;
	color: #FFF;
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: clamp(18px,2.4vw,24px);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	max-width: 360px;
	width: 100%;
	height: 50px;
	transition: 0.5s;
}
.pre-inc .backbtn a{
	background: url("../common/img/btn_arw_l.svg") no-repeat,linear-gradient(90deg, #0c3b1f, #0c1d0c);
	background-size: 24px auto,cover;
	background-position: left 12px center,center center;
	color: #FFF;
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: clamp(18px,2.4vw,24px);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	max-width: 360px;
	width: 100%;
	height: 50px;
	transition: 0.5s;
}
.pre-inc .morebtn a:hover,.pre-inc .requestbtn a:hover,.pre-inc .backbtn a:hover{
	opacity: 0.85;
}

/* plan detail */
.pre-inc #detail{
}
.pre-inc #detail .roomdetail{
	padding: 50px 0 80px;
}
.pre-inc #roomdetail_info{
	background: #224142;
	color: #FFF;
	padding: 10px 0 15px;
}
.pre-inc #roomdetail_info .roomplanhead {
  display: flex;
  justify-content: space-between;
}
.pre-inc #roomdetail_info .roomplanhead .type{
	font-size: clamp(24px,3.6vw,36px);
}
.pre-inc #roomdetail_info .roomplanhead .type::first-letter{
	font-size: clamp(36px,5vw,50px);
}
.pre-inc #roomdetail_info .roomplanhead .planname{
	font-size: clamp(12px,3.6vw,24px);
	margin-left:1em;
}
.pre-inc #roomdetail_info .residence_name{
	font-size: 0.8em;
	margin-left: 1em;
}
.pre-inc #roomdetail_info .roomplanhead .floorplan{
	font-size: clamp(20px,3.2vw,32px);
	text-align: right;
}
.pre-inc #roomdetail_info .roomplanhead .floorplan::first-letter{
	font-size: clamp(36px,5vw,50px);
}
.pre-inc .detailflex{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.pre-inc .detailflex .flexleft{
	width: calc(450 / 1024 * 100%);
	margin-top: 50px;
}
.pre-inc .detailflex .flexleft .roomplan_equipment{
	margin-top: 40px;
}
.pre-inc .floorflex{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.pre-inc .floorflex .floordetaillabel{
	margin-right: 20px;
	width: 50%;
	max-width: 180px;
	text-align: right;
	font-size: 13px;
}
.pre-inc .floorflex .floordetail *{
	display: inline-block;
}
.pre-inc .detailflex .roomplan_equipment .equipment_label{
	padding: 8px;
	margin-bottom: 10px;
}
.pre-inc .detailflex .flexright{
	margin-left: 35px;
	flex: 1;
}
.pre-inc .detailflex .flexright .plan_note{
	width: 24em;
    margin: 1em auto 0;
}

/* 切り替え */
.pre-inc .plan_switch_btn{display: flex;justify-content: center;gap: 0 1.25em;border-bottom: 1px solid #fff;margin: 2em auto 0;font-size: 1.2em;}
.pre-inc .plan_switch_btn > li{font-size: 0.9em;width: 11em;text-align: center;padding: 0.5em;color: #fff;background: #b2b2b2;cursor: pointer;transition: 0.3s all;}
.pre-inc .plan_switch_btn > li.active{pointer-events: none;background: #224142;}
.pre-inc .plan_switch_btn ~ .plan_detail_wrap{display: none;}
.pre-inc .plan_switch{display: none;margin-top: 0;}
.pre-inc .plan_switch.active{display: block;}
.pre-inc .foot_note i{display: none;}
.pre-inc .foot_note i.active{display: inline;}

.pre-inc .roomplaninner .check_point{margin-top: 3em;}
.pre-inc .roomplaninner .check_point > li{margin-top: 0.5em;padding: 1em;text-align: left;color: #333;background:#EFEDE2;border-radius: 0.5em;font-weight: 400;font-size: 0.9em;}
.pre-inc .roomplaninner .check_point > li img{width:4em;margin-bottom: 0.5em;}


@media screen and (max-width: 768px) {
	.pre-inc #contents-80{
	  margin-top:40px;
	}
	.pre-inc .roomplanflex .flexitem {
		width: 100%;
		padding: 15px;
		margin-bottom: 20px;
	}
	.pre-inc #detail .roomdetail {
		padding: 30px 0 40px;
	}
	.pre-inc .detailflex {
		display: block;
		width: 96%;
		margin: 0 auto;
	}
	.pre-inc .detailflex .flexright {
		margin-left: 0px;
		flex: none;
		margin-bottom: 30px;
	}
	.pre-inc .detailflex .flexleft {
		width: 100%;
		margin-top: 0px;
	}
	.pre-inc .roomplaninner {
		padding-bottom: 0px;
	}
	.pre-inc .backbtn{
		margin-top: 0;
	}
	.pre-inc .morebtn, .pre-inc .requestbtn{
		position: relative;
		margin-top: 20px;
	}
	/* 切り替え */
	.pre-inc .plan_switch_btn{margin: 1em auto 0;font-size: 1em;}
	.pre-inc .plan_switch_btn > li{width: 10em;}
	.pre-inc .plan_switch{margin-top: 0;}
	.pre-inc .roomplaninner .check_point{margin: 1.5em auto;}
	.pre-inc .roomplaninner .check_point > li img{width:4.5em;}
}