@charset "UTF-8";
/* CSS Document */
.billboard-style-03 {height: 25em;background: url("../img/modelroom/modelroom_mv01_img01_pc.webp") no-repeat center/cover;}
.block-modelroom-01 .container {padding: 3em 0 4em;}
.block-modelroom-01 .container p {font-size: 200%;text-align: center;letter-spacing: 0.1em;}
.block-modelroom-02 .container {padding: 5em 0;background: #e8f0f2;}
.block-modelroom-02 .container .swiper {width: 90%;max-width: calc(1300px + 10em);margin: 0 auto;padding: 0 5em;}
.block-modelroom-02 .container .swiper ul {}
.block-modelroom-02 .container .swiper ul li figure figcaption {font-size: 93.75%;}
.block-modelroom-02 .container .swiper .swiper-button-next,
.block-modelroom-02 .container .swiper .swiper-button-prev {width: 2.5em;height: 3em;}
.block-modelroom-02 .container .swiper .swiper-button-next:after,
.block-modelroom-02 .container .swiper .swiper-button-prev:after {content: '';width: 100%;height: 100%;}
.block-modelroom-02 .container .swiper .swiper-button-next:after {background: url("../img/common/common_arrow4.svg") no-repeat center/contain;}
.block-modelroom-02 .container .swiper .swiper-button-prev:after {background: url("../img/common/common_arrow4.svg") no-repeat center/contain;transform: rotate(180deg);}
.block-modelroom-02 .container .swiper-thumbnail {width: 90%;max-width: calc(1300px + 10em);margin: 0 auto;padding: 0 5em;}
.block-modelroom-02 .container .swiper-thumbnail ul {display: flex;flex-wrap: wrap;justify-content: flex-start;margin: 0.6em -0.6em 0;width: auto;}
.block-modelroom-02 .container .swiper-thumbnail ul li {width: calc(33.33% - 1.2em) !important;margin: 0.6em;cursor: pointer;}
.block-modelroom-02 .container .swiper-thumbnail ul li figure {position: relative;z-index: 1;}
.block-modelroom-02 .container .swiper-thumbnail ul li figure::after {display: block;content: '';width: 100%;height: 100%;background: rgba(0,0,0,0.44);position: absolute;top: 0;left: 0;z-index: 1;transition: 0.4s;}
.block-modelroom-02 .container .swiper-thumbnail ul li figure figcaption {display: block;color: #fff;font-size: 150%;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%);}
.block-modelroom-02 .container .swiper-thumbnail ul li.swiper-slide-thumb-active figure::after {opacity: 0;}
.block-modelroom-03 .container {padding: 7em 0;}
.block-modelroom-03 .container h3 + p + p {font-size: 150%;text-align: center;line-height: 2;letter-spacing: 0.1em;margin-top: 2em;}
.block-modelroom-03 .container h3 + p + p small {display: block;font-size: 10px;}
.block-modelroom-03 .container ul {display: flex;flex-wrap: wrap;justify-content: flex-start;margin: 3em -0.6em 0;}
.block-modelroom-03 .container ul li figure figcaption {display: block;font-size: 112.5%;text-align: center;margin-top: 0.5em;}
.block-modelroom-03 .container:nth-child(1) ul li {width: calc(33.33% - 1.2em);margin: 0 0.6em;}
.block-modelroom-03 .container:nth-child(2) {padding-top: 0;}
.block-modelroom-03 .container:nth-child(2) ul li {width: calc(50% - 1.2em);margin: 0 0.6em;}
.block-modelroom-03 .container:nth-child(2) ul li figure {position: relative;}
.block-modelroom-03 .container:nth-child(2) ul li figure::before {display: inline-block;color: #fff;font-size: 150%;line-height: 1;padding: 0.3em 0.5em 0.25em;background: #4c4948;position: absolute;top: 0;left: 0;}
.block-modelroom-03 .container:nth-child(2) ul li:nth-child(1) figure::before {content: 'OPEN';}
.block-modelroom-03 .container:nth-child(2) ul li:nth-child(2) figure::before {content: 'CLOSE';}
@media only screen and (max-width: 1600px) {}
@media only screen and (min-width: 1450px) {}
@media only screen and (max-width: 1450px) {}
@media only screen and (max-width: 1350px) {}
@media only screen and (min-width: 768px) and (max-width: 1350px) {
  .block-modelroom-02 .container {font-size: 1vw;}
}
@media only screen and (max-width: 1200px) {}
@media only screen and (max-width: 1100px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (max-width: 767px) {
  .billboard-style-03 {height: 10em;background: url("../img/modelroom/modelroom_mv01_img01_sp.webp") no-repeat center/cover;}
  .block-modelroom-01 .container {padding: 2em 0;}
  .block-modelroom-01 .container p {font-size: 125%;}
  .block-modelroom-02 .container {padding: 2em 0 1.7em;}
  .block-modelroom-02 .container .swiper {width: 90%;padding: 0;}
  .block-modelroom-02 .container .swiper .swiper-button-next,
  .block-modelroom-02 .container .swiper .swiper-button-prev {width: 2em;height: 2.5em;}
  .block-modelroom-02 .container .swiper .swiper-button-next {right: 0;}
  .block-modelroom-02 .container .swiper .swiper-button-prev {left: 0;}
  .block-modelroom-02 .container .swiper .swiper-button-next:after,
  .block-modelroom-02 .container .swiper .swiper-button-prev:after {filter: brightness(0) invert(1);}
  .block-modelroom-02 .container .swiper ul li figure figcaption {font-size: 112.5%;right: 0.5em;bottom: 0.5em;}
  .block-modelroom-02 .container .swiper-thumbnail {width: 90%;padding: 0;}
  .block-modelroom-02 .container .swiper-thumbnail ul {margin: 0.3em -0.3em 0;}
  .block-modelroom-02 .container .swiper-thumbnail ul li {width: calc(33.33% - 0.6em) !important;margin: 0.3em;}
  .block-modelroom-02 .container .swiper-thumbnail ul li figure figcaption {font-size: 62.5%;letter-spacing: 0;}
  .block-modelroom-03 .container {padding: 2em 0;}
  .block-modelroom-03 .container h3 + p + p {font-size: 100%;letter-spacing: 0;margin-top: 1em;}
  .block-modelroom-03 .container ul {margin: 1em -0.3em 0;}
  .block-modelroom-03 .container ul li {width: 100% !important;margin: 0 0 1.5em !important;}
  .block-modelroom-03 .container ul li figure figcaption {font-size: 100%;margin-top: 0.3em;}
  .block-modelroom-03 .container:nth-child(2) ul li figure::before {font-size: 125%;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}