@charset "utf-8";

:root {
	--main_color: #2b665e;
}

.w1000 {
	max-width: 1000px;
	margin: 0 auto;
	width: 90%;
}

.imgbox {
	position: relative;
}

.imgnote {
	position: absolute;
	bottom: 10px;
	right: 20px;
	color: #fff;
	text-shadow: #000 0 0 10px;
	text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
	.imgnote {
		position: absolute;
		bottom: 5px;
		right: 10px;
		color: #fff;
		text-shadow: #000 0 0 10px;
		text-transform: uppercase;
		font-size: clamp(0.75rem, 0.393rem + 1.79vw, 1.25rem);
	}
}

/*============================
#main_img
============================*/
#main_img {
	background: url("../img/modelroom/main.jpg") no-repeat;
	background-size: cover;
	background-position: 100% center;
	margin-bottom: 80px;
	height: 36.8636vw;
	position: relative;
}

#main_img p.notion {
	content: '';
	position: absolute;
	bottom: 0.45vw;
	right: 2vw;
	color: #FFF;
}

#main_img p.notion span {
	text-transform: uppercase;
}


@media only screen and (max-width: 768px) {
	#main_img {
		background: url("../img/modelroom/main_sp.jpg") no-repeat top center / cover;
		margin-bottom: 40px;
		height: 69.6vw;
	}

	#main_img::before {
		width: 310px;
		height: 90px;
	}
}


.modelroom h3 {
	font-size: 32px;
	color: var(--main_color);
	letter-spacing: 0.075em;
	margin-bottom: 80px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	.modelroom h3 {
		font-size: 20px;
		margin-bottom: 40px;
	}
}

.modelroom .title {
	margin-bottom: 50px;
	text-align: center;
}

.modelroom ul {
	max-width: 1200px;
	margin: 0 auto;
}

.modelroom ul li {
	display: inline-block;
	margin-bottom: 20px;
}

.modelroom #main_img h2 {
	color: #fff;
	font-size: 48px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	position: absolute;
	left: 50%;
	top: 40%;
	-webkit-transform: translateY(-50%);
	transform: translate(-50%, -50%);
}

.modelroom #main_img h2 span {
	font-size: 42px;
}

@media screen and (max-width: 1400px) {
	.modelroom #main_img h2 {
		font-size: calc((48/1400) * 100vw);
	}

	.modelroom #main_img h2 span {
		font-size: calc((42/1400) * 100vw);
	}
}

@media only screen and (max-width: 768px) {

	.modelroom #main_img h2 {
		top: 50%;
	}

	.modelroom .title img {
		padding: 0 20px;
	}

	.modelroom .main {
		margin-bottom: 50px;
	}

	.modelroom .main2 img {
		width: 100%;
	}

	.modelroom #main_img h2 {
		/*font-size: 24px;*/
		font-size: clamp(1.5rem, 0.427rem + 4.58vw, 2.625rem);
		font-weight: bold;
		line-height: 0.5;
		width: max-content;
	}

	.modelroom #main_img h2 span {
		display: block;
		/*font-size: 12px;*/
		font-size: clamp(0.75rem, -0.443rem + 5.09vw, 2rem);
		line-height: 2;
	}
}






.modelroom .model_inner {
	max-width: 1000px;
	/*margin:50px auto;*/
	visibility: collapse;
	height: 0;
}

.modelroom .model_inner.active {
	margin: 50px auto;
	visibility: visible;
	height: 100%;
}

@media only screen and (max-width: 768px) {
	.modelroom .model_inner {
		max-width: 1000px;
		/*margin:20px auto 0;*/
	}

	.modelroom .model_inner.active {
		margin: clamp(1.25rem, -0.539rem + 7.63vw, 3.125rem) auto;
	}
}


/*slider タブ切替*/

.slide-tab {
	display: flex;
	justify-content: center;
}

.tab-item {
	width: 22%;
	margin: 0 10px;
	background: #B4B4B4;
	padding: clamp(0.5rem, 0.202rem + 1.27vw, 0.813rem) 0 clamp(0.625rem, 0.327rem + 1.27vw, 0.938rem);
	cursor: pointer;
}

.tab-item.active {
	background: linear-gradient(to top, #005A2E, #00863A);
}

.tab-item-text {
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-size: clamp(0.938rem, 0.714rem + 1.12vw, 1.25rem);
}

/*クローゼットプロット*/
.imgnote.note-posi {
	right: 32%;
	text-transform: none;
}



/*サムネイル*/
.thumbnail .slick-track {
	transform: unset !important;
}

.thumbnail .slick-slide {
	padding: 0 5px;
	opacity: .6;

}

.thumbnail .slick-current {
	opacity: 1;
}

@media only screen and (max-width: 768px) {
	.slide-tab {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tab-item {
		width: 48%;
		margin: 0 0 5px;
	}


	/*クローゼット*/
	.imgnote.note-posi {
		font-size: clamp(0.688rem, 0.21rem + 2.04vw, 1.188rem);
	}


	/*サムネイル*/
	.thumbnail .slick-track {
		margin: 0;
		width: 100% !important;
	}

	.thumbnail .slick-slide {
		width: calc(100% / 4) !important;
	}

}