@charset "utf-8";

/* detail_page_area ========*/
#detail_page_area{
    background: url(../../../img/elements/back_img.png);
    padding: 160px 0 0;
}

.detail_spec{padding: 0 0 50px;}
.room_type{}
.room_type_01{font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: 3px; border-bottom: 1px solid #CECECE; padding: 0 0 10px;}
.room_type_01 b{font-size: 215%; line-height: 1;}
.room_type_01 .direction{display: inline-block; color: #9b1623; border: 5px solid #9b1623; font-size: 28px; font-weight: 700; letter-spacing: 0; padding: 10px 15px; margin-left: 20px; transform: translateY(-12px);}
.room_type_02{}
.room_type_02 .spec{font-size: 30px; font-weight: 500; letter-spacing: 2px;}
.room_type_02 .spec b{font-size: 160%;}
.room_type_02 .area{font-family: 'Inter','Noto Sans JP', sans-serif; font-size: 30px; font-weight: 500; padding-left: 30px;}
.room_type_02 .area b{font-size: 160%;}
.room_type_03 .area{font-family: 'Inter','Noto Sans JP', sans-serif; font-size: 25px; font-weight: 500;}
.room_type_03 .area b{font-size: 140%;}

.room_features{margin-top: 6px;}
.room_features ul li{border: 1px solid #6A6A6A; font-size: 25px; font-weight: 500; letter-spacing: 0; padding: 5px 20px; margin-right: 15px;}

@media screen and (max-width: 960px){
    .detail_spec{padding: 0 0 35px;}
    .room_features ul li{font-size: 20px; margin-bottom: 15px;}
}
@media screen and (max-width: 640px){
    #detail_page_area{padding: 110px 0 0;}
    .detail_spec{padding: 0;}
    .room_type_01{font-size: 26px;}
    .room_type_01 .direction{border: 2px solid #9b1623; font-size: 15px; font-weight: 700; letter-spacing: 0; padding: 5px; margin-left: 5px; transform: translateY(-5px);}
    .room_type_02{display: flex; flex-direction: column;}
    .room_type_02 .spec{font-size: 20px; letter-spacing: 1px;}
    .room_type_02 .area{font-size: 18px; padding-left: 0;}
	.room_type_03 .area{font-size: 16px;}
    .room_features ul li{font-size: 12px; margin-bottom:5px; margin-right: 5px;}
}


.detail_drawing{
    padding: 20px 0 150px;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%);
}
.detail_drawing .inner{max-width: 1100px;}
.drawing_notes{margin: 20px 0 90px;}
.drawing_notes ul{justify-content: center; margin-bottom: 5px;}
.drawing_notes ul li{margin-right: 10px;}
.drawing_notes ul li span{width: 60px; height: 20px; display: inline-block; vertical-align: middle; background: #ccc; margin-right: 5px;}
.drawing_notes ul li span.wind{background: url(../../../img/pages/roomplan/detail/icon_wind.svg) no-repeat right center; background-size: 70%;}
.drawing_notes ul li span.daylighting{background: url(../../../img/pages/roomplan/detail/icon_daylighting.svg) no-repeat right center; background-size: 70%;}
.drawing_notes ul li span.storage{background: #d4c6a8;}
.drawing_notes ul li span.heating{background: #f9f0e3; border: 1px dashed #d2a36c;}
.drawing_notes p{margin-top: 5px; /*text-align: center;*/}
.detail_drawing .btn_style{max-width: 280px;}

@media screen and (max-width: 960px){
}
@media screen and (max-width: 640px){
    .detail_drawing{padding: 20px 0 50px;}
    .drawing_notes{margin: 15px 0 30px;}
    .drawing_notes ul li{font-size: 10px;}
    .drawing_notes ul li span{width: 45px; height: 15px;}
    .drawing_notes p{font-size: 10px;}
    .detail_drawing .btn_style{max-width: 150px; text-align: left;}
}


/* 2カラムになる */
.detail_drawing.column2 .inner{max-width: 1230px;}
.column2_area{flex-direction: row-reverse;}
.column2_drawing{width: 550px; margin: 0 auto;}
.column2_point{width: calc(100% - 550px);}

.column2_drawing .drawing_notes p,
.column2_drawing .drawing_notes ul li{font-size: 11px;}
.column2_point_wrap{justify-content: center; padding: 40px 30px 0;}
.column2_point_box{width: 50%; padding: 15px; margin: 0 17px;background: #f9f6ea;}
.column2_point_box h3{position: relative; font-size: 16px; font-weight: 500; line-height: 1.3; padding-left: 30px; margin-bottom: 5px;}
.column2_point_box h3 small{font-size: 67%;}
.column2_point_box h3 span{position: absolute; top: 0; left: 0; width: 25px; height: 25px; border-radius: 20px; background: #a8cf8a; color: #fff; font-size: 20px; display: flex; justify-content: center; align-items: center;}
.column2_point_box figure{text-align: center;}

@media screen and (max-width: 960px){
    .column2_drawing{width: 100%;}
    .column2_point{width: 100%; padding: 0 20px; margin-bottom: 50px;}
    .column2_point_box{ margin: 0 10px;}
    .column2_drawing .floor_drawing{text-align: center;}
}
@media screen and (max-width: 640px){
    .column2_point{margin-bottom: 30px;}
    .column2_point_wrap{padding: 20px;}
    .column2_point_box{width: 100%; margin: 0 5px;}
    .column2_point_box h3{font-size: 14px;}
    .column2_point_box:last-child{margin-bottom: 0;}
}

/* ご返済シミュレーション */
.repayWrap{max-width: 1000px; margin: 0 auto 60px; border: 1px solid #000;}
.repayWrap h3{color: #fff; text-align: center; font-size: 25px; line-height: 40px; background: #000; padding: 5px;}
.repayWrap h3 b{font-size: 150%;}
.repayWrap_inner{padding: 20px 30px;}

.repay_roomtype{border-bottom: 1px solid #ccc; text-align: center; margin-bottom: 15px;}
.repay_roomtype p{font-size: 30px;}
.repay_roomtype p small{font-size: 55%;}
.repay_roomtype p .price_box{font-size: 120%;}
.repay_roomtype p .price_row b{font-size: 180%; line-height: 1.2;}
.repay_roomtype_cap{justify-content: center;}

.repay_payment{background: #ebebeb; max-width: 80%; margin: 0 auto 20px; padding: 20px;}
.repay_payment h4{text-align: center; font-size: 20px; font-weight: 500; margin-bottom: 10px;}
.repay_payment_list{justify-content: center;}

.repay_payment ul{flex-direction: column; align-items: center;}
.repay_payment ul li{font-size: 24px; padding: 0 15px;}
.repay_payment .payment{font-size: 15px; color: #fff; background: #000;padding: 3px 10px; margin: 0 10px 0 0; vertical-align: 5px;}
.repay_payment ul li b{font-size: 180%; line-height: 1.2;}
.repay_payment ul li small{font-size: 14px;}

.repayWrap .details {margin-bottom: 12px; font-size: 13px;}
.repayWrap p.caption{font-size: 11px; margin-bottom: 20px;}

@media screen and (max-width: 960px){
    .repay_payment{max-width: 100%;}
}

@media screen and (max-width: 640px){
    .repayWrap h3{font-size: 18px;}
    .repayWrap_inner{padding: 15px;}
    .repay_roomtype p{font-size: 20px;}
    .repay_roomtype p .price_box{font-size: 105%;}
    .repay_payment{padding: 10px 15px;}
    .repay_payment h4{font-size: 16px;}
    .repay_payment ul li{padding: 0; line-height: 1.2; text-align: centers;}
    .repay_payment ul li + li{margin-top: 20px;}
    .repay_payment .payment{display: block; margin: 0; font-size: 12px;}
    .repay_payment ul li b{font-size: 150%;}
}


/* 2026.03.04 */
.tab-group {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 60px;
}
.tab-group .tab {
	width: 300px;
	height: 60px;
	list-style:none;
	text-align:center;
	cursor:pointer;
	color: #B4AE98;
	background: #F9F0E3;
	font-size: 18px;
	line-height: 60px;
}
.tab-group .is-active {
	background-color: #B4AE98;
	color: #fff;
	pointer-events: none;
}
.tab-group .tab:hover {
	color: #fff;
	background-color: #B4AE98;
}
.tab-group .tab-select:hover,
.tab-group .tab-select.is-active {
	color: #fff;
	background-color: #B4AE98;
}
.panel-group > div {
	display: none;
}
.panel-group > div.panel-box.is-show {
	display: block;
}
@media screen and (max-width: 767px) {
	.tab-group {
		margin: 0 0 20px;
	}
	.tab-group .tab {
		max-width: 300px;
		width: 50%;
		height: 40px;
		font-size: 14px;
		line-height: 40px;
	}
}

.detail_view {
	margin-bottom: 80px;
	/*aspect-ratio: 16 / 9;
	background: #ccc;*/
}
.column2_point_wrap {
	max-width: 1060px;
	margin: 0 auto 40px;
}
.detail_ttl_wrap {
	max-width: 1680px;
	width: 100%;
	padding: 0 40px;
	margin: 0 auto 60px;
}
.detail_ttl {
	font-size: 45px;
	margin: 0 auto 30px;
}
.detail_ttl::after {
	content: "";
	display: block;
	width: 80px;
	height: 1px;
	background: #333333;
}
.detail_txt {
	font-size: 30px;
}
.column2_point_wrap + a {
	display: block;
	width: 400px;
	height: 60px;
	background: #B4AE98;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 60px;
	text-align: center;
	margin: 0 auto 60px;
	transition: .4s;
}
.column2_point_wrap + a:hover {
	opacity: .7;
}
@media screen and (max-width: 767px) {
	.detail_ttl_wrap {
		margin-bottom: 30px;
	}
	.detail_ttl {
		font-size: 25px;
		margin-bottom: 20px;
	}
	.detail_txt {
		font-size: 16px;
	}
	.detail_view {
		margin-bottom: 40px;
	}
	.column2_point_wrap {
		margin-bottom: 20px;
	}
	.column2_point_wrap + a {
		max-width: 400px;
		width: 100%;
	}
}

.slide-arrow {
  background-color: #333;
  bottom: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.prev-arrow {
  border-bottom: 30px solid #FFFFFF;
  border-left: 0;
  border-right: 20px solid #a8cf8a;
  border-top: 30px solid #FFFFFF;
  left: -25px;
}
.next-arrow {
  border-bottom: 30px solid #FFFFFF;
  border-left: 20px solid #a8cf8a;
  border-right: 0;
  border-top: 30px solid #FFFFFF;
  right: -25px;
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
}
.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}
.slick-slide img {
	display: inline-block;
}
.slick-initialized .slick-slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}