html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}



/*　-----------------------　メインビジュアル　-----------------------　*/

#MainVisual {
    padding-top: 70px;
    position: relative;
}
#MainVisual figure {
    width: 100%;
    height: calc(100dvh - 70px);
    background-image: url(../images/modelroom/main.jpg);
    background-position: bottom right;
    background-size: cover;
}
#MainVisual figure img {
    width: 100%;
    height: calc(100vh - 70px);
    mix-blend-mode: multiply;
}
#MainVisual .main_logo {
    font-family: var(--fontCiz);
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
    left: 8vw;
    color:#fff;
    font-size: max(2.5vw,30px);
    letter-spacing: 0.2em; /*他とは異なる*/
    filter: drop-shadow(0 0 5px #000);
    -webkit-filter: drop-shadow(0 0 5px #000);
}

/* ----------------------- */
/* 1000*/
/* ----------------------- */
@media screen and (max-width: 1000px) {


}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {

#MainVisual {
    padding-top: 70px;
    position: relative;
}
#MainVisual figure {
    width: 100%;
    height: calc(100dvh - 70px - 20vw);
    background-image: url(../images/modelroom/main_sp.jpg);
}
#MainVisual figure img {
    width: 100%;
    height: calc(100vh - 70px - 20vw);
    mix-blend-mode: multiply;
}
#MainVisual figure figcaption {
    bottom:1%;
}
#MainVisual .main_logo {
    top: 18%;
    left:inherit;
    width: 100%;
    text-align: center;
    font-size:10vw;
}

}



/*　-----------------------　Sec01　-----------------------　*/

#ModelRoom h2 {
    font-family: var(--fontOrp);
    color: var(--Color4);
    font-size: 3.125rem;
    text-align: center;
    margin: 80px 0 40px;
}
#ModelRoom p {
	text-align: center;
}
#ModelRoom p.annotation {
    text-align: justify;
}
#ModelRoom p.model_copy {
	font-size: 1.5rem;
    margin-top: 80px;
	margin-bottom: 40px;
}

#ModelSlide {
	width: 1280px;
	margin: 80px auto;
}
#ModelSlide figcaption {
    text-align: right;
    line-height: 1;
}
#ModelSlide figcaption.cap01 {
	right: 68%;
}
#ModelSlide figcaption.cap02 {
	right: 34%;
}
#ModelSlide figcaption.cap03 {
	right: 1%;
}
#ModelSlide figcaption.cap04 {
    right: 34%;
}
#ModelSlide .thumbnail-slider {
	width: 98%;
	margin: 1% auto;
}
#ModelSlide .thumbnail-slider li div {
	margin: 2%;
	background-color: var(--Color1);
	overflow: hidden;
}
#ModelSlide .thumbnail-slider li div img {
	opacity: .5;
	transition: .5s;
}
#ModelSlide .thumbnail-slider li div img:hover {
	opacity: 1;
	transition: .5s;
	transform:scale(1.2,1.2);
}
#ModelSlide .thumbnail-slider li.slick-current div img {
	opacity: 1;
}
#ModelSlide .thumbnail-slider li.slick-current div img:hover {
	transform:scale(1,1);
}

/* ----------------------- */
/* 1300 */
/* ----------------------- */
@media screen and (max-width: 1300px) {

#ModelSlide {
	width: 90%;
}

}


/* ----------------------- */
/* 1000 */
/* ----------------------- */
@media screen and (max-width: 1000px) {

#ModelRoom p.model_copy {
font-size: clamp( 1.25rem, 0.422rem + 1.72vw,   1.5rem);
}



}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {

#ModelRoom p.model_copy {
font-size: clamp( 1.25rem,  1.09rem + 0.85vw,   1.5rem);
margin-top: 8vw;
}
#ModelSlide {
    margin: 8vw auto;
}
#ModelRoom .thumbnail-slider {
	display: none;
}
.slick-dots li button:before {
	font-size: 12px;
}

}


/* ----------------------- */
/* slide-arrow */
/* ----------------------- */

.main-slider {
    position: relative;
}
.slide-arrow {
    width: 30px;
    position: absolute;
    z-index: 10000;
}
.prev-arrow {
    top: 50%;
    left: -40px;
}
.next-arrow {
    top: 50%;
    right: -40px;
    transform: scale(-1, 1);
}
.prev-arrow:hover  {
    transform: translateY(2px);
}
.next-arrow:hover  {
    transform: scale(-1, 1) translateY(2px);
}