@charset "UTF-8";

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

/* slider */
.pre-inc #slider{
	padding: 80px 0;
}
.pre-inc .thumbnail{
	margin-top: 2px;
}
.pre-inc .thumbnail .slick-list {
  margin: 0 -1px;
}
.pre-inc .thumbnail .slick-slide {
  margin: 0 1px;
}
.pre-inc #slider figcaption.cap_wb,.pre-inc .modelroom_bottom figcaption.cap_wb{
	font-size: clamp(13px, 1.5vw, 15px);
}
.pre-inc #slider .slick-prev {
	background: url("../common/img/btn_arw_l.svg") no-repeat rgba(0,0,0,0.7);;
	background-size: 20px auto;
	background-position: center center;
  left: 0;
}
.pre-inc #slider .slick-next {
	background: url("../common/img/btn_arw.svg") no-repeat rgba(0,0,0,0.7);;
	background-size: 20px auto;
	background-position: center center;
  right: 0;
}
.pre-inc #slider .slider .slick-prev::before,.pre-inc #slider .slider .slick-next::before{
	content: "";
}
.pre-inc #slider .slider .slick-prev, .pre-inc #slider .slider .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 30px;
  height: 160px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
	z-index: 100;
}

/* modelroom */
.pre-inc #modelroom{
	background: url("../img/modelroom/modelbg.jpg") repeat-y;
	background-size: 100% auto;
	padding: 80px 0;
}
.pre-inc #modelroom .modelroom_main{
	margin-bottom: 130px;
}
.pre-inc .mainpanel{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1520px;
	margin: 0 auto;
	aspect-ratio: 76 / 43;
	position: relative;
}
.pre-inc .photo_panel .photoimage {
  opacity: 0;
  transform: scale(1.2);
  transform-origin: center center;
}
.pre-inc .photo_panel .photoimage img {
  display: block;
  width: 100%;
  height: auto;
}
.pre-inc .mainpanel .mainlead{
	font-size: clamp(24px,4.6vw,46px);
  letter-spacing: 0.05em;
  margin-top: -6%;
  text-align: center;
	opacity: 0;
}
.pre-inc .photo_panel{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 2;
}
.pre-inc .photopanel{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.pre-inc .photopanel .photoimage{
	position: absolute;
	z-index: 2;
}
.pre-inc .photopanel .photo01 .photoimage{
	width: calc(320 / 1520 * 100%);
	left: 11.2%;
  top: 7%;
	aspect-ratio: 320 / 213;
}
.pre-inc .photopanel .photo02 .photoimage{
	width: calc(300 / 1520 * 100%);
	left: 40.4%;
  top: 7%;
	aspect-ratio: 300 / 200;
}
.pre-inc .photopanel .photo03 .photoimage{
	width: calc(400 / 1520 * 100%);
	left: 68.2%;
  top: 0%;
	aspect-ratio: 400 / 266;
}
.pre-inc .photopanel .photo04 .photoimage{
	width: calc(300 / 1520 * 100%);
	left: 2%;
  top: 37%;
	aspect-ratio: 300 / 201;
}
.pre-inc .photopanel .photo05 .photoimage{
	width: calc(260 / 1520 * 100%);
	left: 0.1%;
  top: 66.5%;
	aspect-ratio: 260 / 173;
}
.pre-inc .photopanel .photo06 .photoimage{
	width: calc(180 / 1520 * 100%);
	left: 21.8%;
  top: 63%;
	aspect-ratio: 180 / 270;
}
.pre-inc .photopanel .photo07 .photoimage{
	width: calc(360 / 1520 * 100%);
	left: 41.7%;
  top: 55%;
	aspect-ratio: 360 / 240;
}
.pre-inc .photopanel .photo08 .photoimage{
	width: calc(190 / 1520 * 100%);
	left: 63.1%;
  top: 73.1%;
	aspect-ratio: 192 / 228;
}
.pre-inc .photopanel .photo09 .photoimage{
	width: calc(340 / 1520 * 100%);
	left: 77.5%;
  top: 48.5%;
	aspect-ratio: 340 / 227;
}


/* bottomimages */
.pre-inc .bottomimages{}
.pre-inc .bottomimages{
	display: flex;
	column-gap: 10px;
}
.pre-inc .bottomimages .bottomimg{
	display: inline-block;
	margin-right: 20px;
}

@media screen and (max-width: 768px) {
	
	/* slider */
	.pre-inc #slider{
		padding: 40px 0;
	}
	.pre-inc #slider .slick-prev {
		background: url("../common/img/btn_arw_l.svg") no-repeat rgba(0,0,0,0.7);;
		background-size: 16px auto;
		background-position: center center;
		left: 0;
	}
	.pre-inc #slider .slick-next {
		background: url("../common/img/btn_arw.svg") no-repeat rgba(0,0,0,0.7);;
		background-size: 16px auto;
		background-position: center center;
		right: 0;
	}
	.pre-inc #slider .slider .slick-prev, .pre-inc #slider .slider .slick-next {
		width: 20px;
		height: 120px;
	}
	
	/* modelroom */
	.pre-inc #modelroom{
		background: url("../img/modelroom/modelbg.jpg") no-repeat;
		background-size: cover;
		padding: 40px 0;
	}
	.pre-inc .mainpanel .mainlead {
		font-size: clamp(15px,3.6vw,36px);
		margin-top: -6%;
		text-align: center;
		opacity: 0;
		transition: 1s;
	}
	.pre-inc .mainpanel {
		aspect-ratio: 2 / 3;
	}
	.pre-inc .photopanel .photo01 .photoimage{
		width: calc(320 / 1100 * 100%);
    left: 5.2%;
    top: 7%;
    aspect-ratio: 320 / 213;
	}
	.pre-inc .photopanel .photo02 .photoimage{
		width: calc(300 / 900 * 100%);
    left: 50.4%;
    top: 5%;
    aspect-ratio: 300 / 200;
	}
	.pre-inc .photopanel .photo03 .photoimage{
		width: calc(400 / 1250 * 100%);
    left: 64.2%;
    top: 23%;
    aspect-ratio: 400 / 266;
	}
	.pre-inc .photopanel .photo04 .photoimage{
		width: calc(300 / 950 * 100%);
    left: 13%;
    top: 24%;
    aspect-ratio: 300 / 201;
	}
	.pre-inc .photopanel .photo05 .photoimage{
		width: calc(260 / 980 * 100%);
    left: 2.1%;
    top: 57.5%;
    aspect-ratio: 260 / 173;
	}
	.pre-inc .photopanel .photo06 .photoimage{
		width: calc(180 / 1160 * 100%);
    left: 38.8%;
    top: 63%;
    aspect-ratio: 180 / 270;
	}
	.pre-inc .photopanel .photo07 .photoimage{
		width: calc(360 / 1200 * 100%);
    left: 57.7%;
    top: 57%;
    aspect-ratio: 360 / 240;
	}
	.pre-inc .photopanel .photo08 .photoimage{
		width: calc(190 / 960 * 100%);
    left: 20%;
    top: 71.1%;
    aspect-ratio: 192 / 228;
	}
	.pre-inc .photopanel .photo09 .photoimage{
		width: calc(340 / 1140 * 100%);
    left: 70.5%;
    top: 72.5%;
    aspect-ratio: 340 / 227;
	}
	.pre-inc #modelroom .modelroom_main{
		margin-bottom: 60px;
	}
	
	/* bottom */
	.pre-inc .bottomimages{
		display: flex;
		column-gap: 10px;
	}
	.pre-inc .bottomimages .bottomimg{
		flex: 1;
		margin-right: 0px;
	}
}