@charset "utf-8";
/* CSS Document */
/* modelroom_overwrite.css */





/* =========================
breakpoint
========================= */
@media screen and ( min-width: 769px ){
    /* SP <> PC ブレークポイント */
}
@media screen and ( min-width: 1389px ){
    /* XDデザインサイズ　1388 */
}





img {
    max-width: none;
    width: 100%;
}
@media screen and ( min-width: 769px ){
    img {
    }
}
@media screen and ( min-width: 1389px ){
}





/* =========================
c-title--page--full
========================= */
.c-title--page--full {
    height: auto;
}
@media screen and ( min-width: 769px ){
}
@media screen and ( min-width: 1389px ){
}





/* =========================
page_main_visual
========================= */
.page_main_visual .c-title--page--full__title picture {
    width: calc( 218.58 * 100vw / 375 );
    aspect-ratio: 298 / 44;
}
@media screen and ( min-width: 769px ){
    .page_main_visual .c-title--page--full__title picture {
        width: max( min( calc( 298 * 100vw / 1388 ), 411.24px ), 298px );
    }
}
@media screen and ( min-width: 1389px ){
}





/* =========================
each_part
========================= */
.each_part {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}
@media screen and ( min-width: 769px ){
    .each_part {
        padding: max( min( calc( 55 * 100vw / 1388 ), 75.9px ), 55px ) 0;
    }
}
@media screen and ( min-width: 1389px ){
}

.each_part .wrapper {
    position: relative;
    width: 100%;
    margin: 0 a;
    padding: 0;
}
@media screen and ( min-width: 769px ){
    .each_part .wrapper {
    }
}
@media screen and ( min-width: 1389px ){
}

.each_part h2 {
    position: relative;
    margin: 0 auto calc( 20 * 100vw / 375 );
    padding: 0;
}
@media screen and ( min-width: 769px ){
    .each_part h2 {
        margin: 0 auto max( min( calc( 30 * 100vw / 1388 ), 41.4px ), 30px );
    }
}
@media screen and ( min-width: 1389px ){
}

.each_part .catchcopy {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 calc( 20 * 100vw / 375 );
    padding: 0;
    color: #333;
    font-size: var( --font_size-ex_large );
    line-height: 1.54;
    letter-spacing: 0;
    text-align: center;
}
.each_part .lead {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 calc( 20 * 100vw / 375 );
    padding: 0;
    color: #333;
    font-size: var( --font_size-large );
    line-height: 1.76;
    letter-spacing: 0;
    text-align: center;
}
.each_part .text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 calc( 20 * 100vw / 375 );
    padding: 0;
    color: #333;
    font-size: var( --font_size-normal );
    line-height: 2;
    letter-spacing: 0;
    text-align: center;
}

.each_part.part_01{
  padding-top: 50px;
  padding-bottom: 30px;
}
@media screen and ( min-width: 769px ){
    .each_part.part_01{
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .each_part .catchcopy {
        margin: 0 auto max( min( calc( 30 * 100vw / 1388 ), 41.4px ), 30px );
    }
    .each_part .lead {
        margin: 0 auto max( min( calc( 30 * 100vw / 1388 ), 41.4px ), 30px );
    }
    .each_part .text {
        margin: 0 auto max( min( calc( 30 * 100vw / 1388 ), 41.4px ), 30px );
    }
}
@media screen and ( min-width: 1389px ){
}





/* =========================
photogallery
========================= */
.photogallery {
    background-image: url( '../img/modelroom/photogallery-bg.webp' );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.photogallery .each_part h2 {
    width: calc( 194 * 100vw / 375 );
}
.photogallery .each_part .catchcopy {
    color: #fff;
}
.photogallery .each_part .lead {
    color: #fff;
}
.photogallery .each_part .text {
    color: #fff;
}
@media screen and ( min-width: 769px ){
    .photogallery {
    }
    .photogallery .each_part h2 {
        width: max( min( calc( 194 * 100vw / 1388 ), 267.7px ), 194px );
    }
}
@media screen and ( min-width: 1389px ){
}


.l-content-section--v2 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.l-content-section-inner, 
.l-content-section-inner--v2 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 calc( 27 * 100vw / 375 );
}
.l-content-section-inner.border-bottom, 
.l-content-section-inner--v2.border-bottom {
    border-bottom: 1px solid #333;
}
@media screen and ( min-width: 769px ){
    .l-content-section {
        margin: 0;
    }
    .l-content-section--v2 {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 0;
    }
    .l-content-section-inner {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 min( calc( 100 * 100vw / 1388 ), 100px );
    }
    .l-content-section-inner--v2 {
        padding: 0;
    }
}

/* スライダー
--------------------------------------------------------------- */
.modelroom {
  width: 100%;
  max-width: 1920px;
  margin: auto;
}
.modelroom .slider_main .slider_item img{
  height: 200px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
/* .modelroom .slider_main .slider_item img.img08{
  object-position: 80% 50%;
} */
.modelroom .slider_item {
  position: relative;
  width: 100%;
  margin-bottom: 60px;
}
.modelroom img {
}
.modelroom .lead {
  position: absolute;
  left: 0%;
  bottom: 0px;
  padding: 5px 10px;
  color: #FFFFFF;
  font-size: 1.3rem;
  background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
}
.modelroom .lead+.lead {
  position: absolute;
  left: 60%;
  bottom:0px;
  color: #FFFFFF;
  font-size: 1.3rem;
}
.modelroom .cap {
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: #FFFFFF;
  padding: 5px;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.4);
}
.modelroom .inner {
	width: 96%;
  margin: 0 auto;
}

.slider_thum .slick-track {
  transform:unset!important;
  width: 100% !important;
  margin: auto;
  transform: none !important;
}
.modelroom .slider_thum{
  width: 98% !important;
  margin: 5 auto 20px;
  justify-content: flex-start;
}
.modelroom .slider_item{
  margin-bottom: 20px;
}

.modelroom .slider_main[data-slick="02"] {
  position: relative;
  padding-top: 0px;
  margin-top: 0px;
}
.modelroom .slider_main[data-slick="02"]::after {
  position: absolute;
  top: 0;
  left: 20px;
  width: calc(100% - 40px);
  height: 1px;
  /*background: rgba(62, 58, 57, .25);*/
  content: '';
}
.modelroom .slider_thum .slick-track {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.modelroom .slider_thum_item {
  position: relative;
  /* margin: 1% 1%;
  width: calc(94% / 3) !important; */
  width: 100% !important;
}
.slick-track:before, .slick-track:after {
  content: none;
}

.modelroom .slider_thum_item.slick-current .area {
  display: none;
}

.slider_thum .slick-list{
  padding: 0 0px !important;
}

.slick-slide img{
  margin: 0 auto;
}

.modelroom .slider_thum_item .area {
  position: absolute;
  left: 50%;
  top:50%;
  width: 100%;
  height: 100%; 
  padding-top: 15%;
  transform: translate(-50%,-50%);
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
}
.modelroom .slider_thum_item .area span{
  position: absolute;
  left: 50%;
  top:50%;
  width: 100%;
  transform: translate(-50%,-50%);
}
/* .slider_thum .slick-track{
  width: 100% !important;
} */
/* .slick-slider .slick-list.draggable{
  padding: 0 0;
  width: 100%;
  margin: 0 auto;
} */

/* .slick-sls */
.caption{
  padding: 0 15px;
  margin: 0 auto 10px;
  padding-top: 20px;
}

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  margin: auto;
  width: 30px;
  z-index: 1;
}
.slide-arrow.prev-arrow{
    left:10px;
}
.slide-arrow.next-arrow{
    right: 10px;
}

@media screen and (min-width:768px) {
.slide-arrow {
    width: 80px;
}
.slide-arrow.prev-arrow{
    left:5px;
}
.slide-arrow.next-arrow{
    right: 5px;
}
}



/*

.modelroom {
}
.modelroom .slider_main {
  margin-bottom: 2%;
}
.modelroom .slider_item {
}
.modelroom .slider_item img {
}
.modelroom .lead {
}
.modelroom .cap {
}
.modelroom .inner {
  width: 80%;
  margin: 0 auto;
}
.modelroom .slider_thum {
}
.slick-list.draggable {
  padding: 0!important;
}
.modelroom .slider_thum_item {
  position: relative;
  width: 150px;
}
.modelroom .slider_thum_item img {
  width: 150px;
  height: 86px;
  object-fit: cover;
}
.modelroom .area {
  display: table-cell;
  max-width: 150px;
  max-height: 86px;
  vertical-align: middle;
  background-color: #000;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.modelroom .slider_thum_item.slick-current.slick-active .area {
  background: none;
}

.slider_thum .slick-track {
transform:unset!important;
}
*/

/* サムネイル
--------------------------------------------------------------- */

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

  .modelroom .slider_main .slider_item img{
    height: auto;
  }

    
    .modelroom .cap {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #FFFFFF;
      font-size: 1.2rem;
      padding: 0;
      background: none;
      text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 1px #000;
    }
    .modelroom .lead{
	  position: absolute;
      font-size: 2.4rem;
      bottom: 0px;
	  background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
    }
    .modelroom .lead+.lead {
      right: 3%;
      bottom: 40px;
      font-size: 2.4rem;
	  text-align: right;
    }
    .modelroom .cap{
      font-size: 1.4rem;
    }
	
	.modelroom .slider_thum{
      width: 100% !important;
    }
    .modelroom .slider_thum .slick-track {
      grid-template-columns: repeat(5, 1fr);
    }
    .modelroom .slider_thum_item .area{
      padding-top: 22%;
      font-size:1.8rem;
    }
    .slider_thum .slick-track{
      margin-right: 0;
    }
    .caption{
      max-width: 1540px;
      margin: 0 auto 15px;
      width: 90%;
      padding-top: 40px;
    }
}



@media screen and (min-width:1300px) {
  /* .modelroom .slider_main .slider_item img.img08{
    object-fit:cover;
    height: auto;
    width: 100%;
    object-position: center center;
  } */
	
  .modelroom .lead+.lead {
      right: 3%;
      bottom: 40px;
      font-size: 2.4rem;
	  text-align: right;
    }
   .slick-slider .slick-track, .slick-slider .slick-list{
    padding:  0 0 !important;
  } 
	
  .modelroom .slider_thum{
    cursor: pointer;
    max-width: 1540px !important;
    width: 100% !important;
    margin: 0 auto;
  }
  .modelroom .slider_thum .slick-track {
    grid-template-columns: auto;
    grid-auto-flow: column;
  }
  .modelroom .slider_thum_item {
    /* position: relative;
    margin: 10px 1px;
    width: calc((100% - 20px) /10)!important;
    margin-bottom: 10px; */
  }
  .modelroom .slider_thum_item span{
	font-size: 1.4rem;
  }

  .modelroom .slider_thum_item:last-of-type {
    margin-right:0px;
  }
  .modelroom .slider_main[data-slick="02"] {
    padding-top: 0px;
    margin-top: 0px;
  }
}

/* 1枚目がおかしい場合は疑似要素をチェック */
.slick-track::before,
.slick-track::after {
  display: none !important; /* 謎の余白を生むclearfixを消す */
}