@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {font-size: 230%;font-weight: normal;font-family: 'Cinzel', serif;letter-spacing: 0.35em;line-height: 1;text-align: center;opacity: 0;}
#Billboard h2 span {display: inline-block;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Billboard h2 + p {font-size: 112.5%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;letter-spacing: 0.35em;line-height: 1;text-align: center;opacity: 0;}
#Billboard h2 + p span {display: inline-block;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Billboard h2 + p::before {content: "";display: block;margin: 1em auto;max-width: 20em;width: calc(100% - 4em);height: 1px;background: linear-gradient(90deg, rgba(167, 138, 96,0.2) 0%, rgba(180, 167, 158,1) 50%, rgba(167, 138, 96,0.2) 100%);}
#Billboard h2.append,
#Billboard h2.append + p {letter-spacing: 0.3em;opacity: 1;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms,letter-spacing cubic-bezier(0.445, 0.05, 0.55, 0.95) 1500ms;}
#Billboard h2.append + p::before {max-width: 30em;transition: max-width cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms 1000ms;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 5em 2em;margin-left: auto;margin-right: auto;box-sizing: border-box;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #e6eff4 url("../img/common/bg_07.webp") no-repeat 50% 0 / 100% auto;}

#Main .block-modelroom-01 {background: transparent url("../img/exclusive/bg_02.webp") no-repeat 50% 0 / cover;}
#Main .block-modelroom-01 h3 {font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 150%;text-align: center;color: var(--light-beige);}
#Main .block-modelroom-01 h3 strong {font-size: 125%;font-weight: normal;}
#Main .block-modelroom-01 h3 + p {max-width: 42em;width: calc(100% - 2em);margin: 2em auto;line-height: 2.4;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;text-align: center;color: #fff;}
#Main .block-modelroom-01 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-modelroom-01 .container {position: relative;}
#Main .block-modelroom-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}

#Main .block-modelroom-02 {position: relative;padding-top: 1px;background: transparent url("../img/common/bg_03.webp") no-repeat 50% 0 / 100% auto;}
#Main .block-modelroom-02 .ttl-style-01 {margin-top: 3em;}
#Main .block-modelroom-02 .ttl-style-01 span {font-size: 150%;}
#Main .block-modelroom-02 .lead {max-width: 42em;margin: 1em auto 3em;}
#Main .block-modelroom-02 .venogallery {position: relative;background-size: cover;background-position: 50%;background-repeat: no-repeat;}
#Main .block-modelroom-02 .venogallery::after {content: "";display: block;width: 2em;height: 2em;position: absolute;top: 0;right: 0;background: #fff url("../img/common/icon_search.svg") no-repeat 50%;background-size: auto 50%;z-index: 2;filter: invert(100%) sepia(0%) saturate(6071%) hue-rotate(321deg) brightness(112%) contrast(103%);}
#Main .block-modelroom-02 .venogallery span {display: block;padding: 1.5em 1em 0.5em;background: rgb(0,0,0);background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);font-family: 'EB Garamond', "serif";font-size: 100%;line-height: 1;letter-spacing: 0.2em;text-align: right;color: #fff;}
#Main .block-modelroom-02 .container {position: relative;padding-top: 0;margin-top: calc(-2em - 1px);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-modelroom-02 .gallery {display: flex;justify-content: space-between;flex-wrap: wrap;}
  #Main .block-modelroom-02 .gallery > div {margin: 1em 0;}
  #Main .block-modelroom-02 .gallery > div:nth-child(1) {width: 100%;}
  #Main .block-modelroom-02 .gallery > div:nth-child(2) {width: calc(50% - 1em);}
  #Main .block-modelroom-02 .gallery > div:nth-child(3) {width: calc(50% - 1em);}
  #Main .block-modelroom-02 .gallery > div:nth-child(4) {width: calc(33.33% - 1em);}
  #Main .block-modelroom-02 .gallery > div:nth-child(5) {width: calc(33.33% - 1em);}
  #Main .block-modelroom-02 .gallery > div:nth-child(6) {width: calc(33.33% - 1em);}
  #Main .block-modelroom-02 .gallery > div:nth-child(7) {width: 100%;}
  #Main .block-modelroom-02 .gallery > div:nth-child(1) .venogallery {padding-top: 50%;}
  #Main .block-modelroom-02 .gallery > div:nth-child(2) .venogallery {padding-top: 18em;}
  #Main .block-modelroom-02 .gallery > div:nth-child(3) .venogallery {padding-top: 18em;}
  #Main .block-modelroom-02 .gallery > div:nth-child(4) .venogallery {padding-top: 16em;}
  #Main .block-modelroom-02 .gallery > div:nth-child(5) .venogallery {padding-top: 16em;}
  #Main .block-modelroom-02 .gallery > div:nth-child(6) .venogallery {padding-top: 16em;}
  #Main .block-modelroom-02 .gallery > div:nth-child(7) .venogallery {padding-top: 50%;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1324px) {}
@media only screen and (min-width: 769px) and (max-width: 1200px) {}
@media only screen and (min-width: 769px) and (max-width: 1080px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .container {padding: 2.5em 0;}
  #Billboard h2 {font-size: 175%;}
  #Billboard h2 small::before {margin: 0.5em 0 0.75em;}

  #Main .block-modelroom-01 figure {overflow: hidden;}
  #Main .block-modelroom-01 figure img {width: 150vw;margin: 0 -25vw;}

  #Main .block-modelroom-02 .ttl-style-01 {margin-top: 2em;}
  #Main .block-modelroom-02 .gallery {margin-top: 3em;}
  #Main .block-modelroom-02 .gallery > div {margin: 1em 0 0;}
  #Main .block-modelroom-02 .gallery > div .venogallery {padding-top: 14em;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}