@charset "UTF-8";

.inner_main {
    background-image: url(../images/main.jpg); }

.sec_model {
padding: clamp(40px, 6.667vw, 80px) 0 80px;
background: url("../images/bg.jpg") center center/cover no-repeat;
background-position: top left; 
z-index: 1;}

.sec_model .inner {
max-width: 1200px; }

.slider_wrapper {
  margin: 100px 0; /* 上下の余白を確保 */
}

.modelroom_bg{
background-image: url(../images/modelroom_bg.jpg);
background-size: 100%;
background-position: bottom center;
background-repeat: repeat-y;
}

.modelroom_box {
width: 100%;
margin-bottom:50px;
}

.modelroom_box .thumbnail {
line-height: 0 !important;
font-size: 0 !important;
margin:0;
}

.modelroom_box .thumbnail .slick-track {
transform: unset !important;
}

.modelroom_box .thumbnail div {
width: 100%;
}

.modelroom_box .thumbnail-img {
width: 100%;
border: none;
position: relative !important;
border: 2px solid #fff;
}

.modelroom_box .thumbnail-img img.slide_img {
opacity: 0.3;
transition: opacity .3s linear;
cursor: pointer;
}

.modelroom_box .thumbnail .slick-current .thumbnail-img {
border: 1px solid #002738;
margin-right:1rem;
}

.modelroom_box .thumbnail .thumbnail-img img {
  width: 100%;
  display: block;
  margin-right:1rem;
}

.modelroom_box .thumbnail .slick-current .thumbnail-img img.slide_img {
opacity: 1;
}

.modelroom_box .thumbnail .slick-current .thumbnail-img img.slide_text {
display: none;
}

.modelroom_box .thumbnail-img img.slide_text {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.modelroom_box .slick-img img.slide_text {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
transform: translateY(-10px);
}

.modelroom_box .slider .slick-current .slick-img img.slide_text {
animation: 1s SlideText ease-in-out forwards;
}

.caption_area {
    margin-top:-30px; }



@keyframes SlideText{
0%{
opacity: 0;
transform: translateY(-10px);
}

100%{
opacity: 1;
transform: translateY(0);
}}

.slider{
position: relative;
}

.modelroom_box .slick-img {
width: 100%;
position: relative !important;
}


.slider .slide-arrow {
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 50px;
height: 50px;
font-size: 0;
line-height: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #002738;
color: #333;
transition : all 0.5s ease 0s;
z-index: 8000;
}

.slider .slide-arrow:hover {
background-color: #c09f33;
color: #fff;
}

.slider .prev-arrow {
left: 0;
}

.slider .next-arrow {
right: 0;
}


.slider .slide-arrow span {
position: relative;
display: inline-block;
width: 16.1px;
height: 30.3px;
}

.slider .slide-arrow span:before,
.slider .slide-arrow span:after {
content: "";
position: absolute;
top: calc(50% - 1px);
width: 22px;
height: 2px;
border-radius: 9999px;
background-color: #fff;
}

.slider .slide-arrow span._next:before,
.slider .slide-arrow span._next:after {
right: 0;
transform-origin: calc(100% - 1px) 50%;
}

.slider .slide-arrow span._pre:before,
.slider .slide-arrow span._pre:after {
left: 0;
transform-origin: 1px 50%;
}


.slider .slide-arrow span:before {
transform: rotate(45deg);
}

.slider .slide-arrow span:after {
transform: rotate(-45deg);
}



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

.slider .slide-arrow {
width: 30px;
height: 30px;
}

.slider .slide-arrow span {
width: 9.1px;
height: 16.1px;
}

.slider .slide-arrow span:before,
.slider .slide-arrow span:after {
width: 12px;
height: 2px;
}

.modelroom_box .thumbnail {
margin: 0;
padding: 0;
line-height: 0 !important;
font-size: 0 !important;
}


.modelroom_box .thumbnail .slick-list,
.modelroom_box .thumbnail .slick-track {
display: flex !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}

.modelroom_box .thumbnail .slick-track {
display: flex !important;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap !important;
width: 100%;
}

.modelroom_box .thumbnail .slick-slide {
width: 25% !important;
height: auto !important;
padding: 2px !important;
margin: 0 !important;
}

.modelroom_box .thumbnail-img {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}

.modelroom_box .thumbnail-img img.slide_img {
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}

.caption_area {
  margin-top:-80px;
  padding-top: 40px; }
}