@charset "UTF-8";
/* CSS Document */
#billboard::before {color: #000;padding: 0 0.5em 0.5em 0;}
#Main .block-modelroom-01 {background: #474341;}
#Main .block-modelroom-01 .container:nth-child(1) {color: #fff;font-size: 187.5%;text-align: center;letter-spacing: 0.075em;padding: 3em 0 1.5em;background: #322f2c;}
#Main .block-modelroom-01 .container:nth-child(2) {padding: 3em 0;}
#Main .block-modelroom-01 .container:nth-child(2) > p {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;color: #fff;text-align: center;margin-bottom: 1em;}
#Main .block-modelroom-01 .container:nth-child(2) > p span {display: block;padding: 0 20px;position: relative;}
#Main .block-modelroom-01 .container:nth-child(2) > p span + span::before {display: inline-block;content: '';width: 1px;height: 25px;background: #fff;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
#Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(1) {font-size: 168.75%;}
#Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(1) small {font-size: 71.4%;}
#Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(2) {font-size: 125%;}
#Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(2) small {font-size: 60%;}
#Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(3) {font-size: 125%;}
#Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(3) small {font-size: 60%;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper {width: 90%;max-width: calc(1300px + 10em);margin: 0 auto;padding: 0 5em;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper ul {padding: 0.75em 0;border-top: 1px solid #fff;border-bottom: 1px solid #fff;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper ul li figure figcaption {color: #fff;font-size: 87.5%;position: absolute;left: 2em;bottom: 1.5em;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper ul li figure figcaption small {display: block;font-size: 10px;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-next,
#Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-prev {width: 2.5em;height: 3em;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-next:after,
#Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-prev:after {content: '';width: 100%;height: 100%;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-next:after {background: url("../img/common/common_arrow3.svg") no-repeat center/contain;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-prev:after {background: url("../img/common/common_arrow3.svg") no-repeat center/contain;transform: rotate(180deg);}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail {width: 74%;margin: 0 auto;padding: 0 5em;box-sizing: border-box;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul {display: flex;flex-wrap: wrap;justify-content: flex-start;margin: 2.5em -0.3em 0;width: auto;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li {width: calc(20% - 0.6em) !important;margin: 0.3em;cursor: pointer;overflow: hidden;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li figure {padding-top: 67%;position: relative;z-index: 1;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li figure::after {display: block;content: '';width: 102%;height: 102%;background: rgba(50,47,44,0.8);position: absolute;top: -1%;left: -1%;z-index: 1;transition: 0.4s;mix-blend-mode: multiply;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li figure figcaption {display: block;color: #fff;font-size: 87.5%;text-shadow: 0 0 6px rgba(0,0,0,0.6);white-space: nowrap;text-align: center;position: absolute;top: 50%;left: 50%;z-index: 2;transform: translate(-50%,-50%);}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li figure figcaption small {display: block;font-size: 71.4%;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li figure img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;}
#Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li.swiper-slide-thumb-active figure::after {opacity: 0;}
#Main .block-common-note {background: #474341;}
#Main .block-common-note ul li {color: #fff;}
@media only screen and (min-width: 768px) and (max-width: 1350px) {
  #Main .block-modelroom-01 .container:nth-child(2) {font-size: 1vw;}
}
@media only screen and (max-width: 1100px) {
  #Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail {width: 90%;max-width: calc(1300px + 10em);}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li {width: calc(25% - 0.6em) !important;}
}
@media only screen and (min-width: 768px) {}
@media only screen and (max-width: 767px) {
  #billboard::before {color: #fff;}
  #Main .block-modelroom-01 .container:nth-child(1) {font-size: 175%;letter-spacing: 0;padding: 2em 0 1em;}
  #Main .block-modelroom-01 .container:nth-child(2) {padding: 2em 0 3em;}
  #Main .block-modelroom-01 .container:nth-child(2) > p span:nth-child(1) {width: 100%;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper {width: 100%;padding: 0;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper ul {padding: 0.5em 0;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-next,
  #Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-prev {width: 2em;height: 2.5em;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-next {right: 0;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-prev {left: 0;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-next:after,
  #Main .block-modelroom-01 .container:nth-child(2) .swiper .swiper-button-prev:after {filter: brightness(0) invert(1);}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper ul li figure figcaption {font-size: 112.5%;left: 1em;bottom: 0.5em;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail {width: 90vw;padding: 0;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul {margin: 5vw -0.15em 0;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li {width: calc(25% - 0.3em) !important;margin: 0.15em;}
  #Main .block-modelroom-01 .container:nth-child(2) .swiper-thumbnail ul li figure figcaption {font-size: 62.5%;letter-spacing: 0;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}