@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
:root {
  --font-ja: YakuHanMP, "Noto Serif JP", serif;
  --font-en: "Montserrat", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.wrap {
  width: 100%;
  overflow: hidden;
}

.contents_wrapp {
  margin-top: 80px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
  font-family: var(--font-ja);
  font-weight: 500;
}

.contents_wrapp_in {
  width: 90%;
  max-width: 940px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .contents_wrapp_in {
    width: 85.7142857143vw;
  }
}

.modelroom_heading {
  text-align: center;
  white-space: nowrap;
}
.modelroom_heading p {
  font-family: var(--font-en);
  font-size: min(2.734375vw, 35px);
  font-weight: 600;
  letter-spacing: 0.37em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .modelroom_heading p {
    font-size: 6.4285714286vw;
    letter-spacing: 0.2em;
  }
}
.modelroom_heading h3 {
  margin-top: 1em;
  font-size: min(1.640625vw, 21px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .modelroom_heading h3 {
    font-size: 4vw;
  }
}
.modelroom_lead {
  margin-top: 2.5em;
  font-size: min(2.1875vw, 28px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-align: center;
  white-space: nowrap;
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .modelroom_lead {
    font-size: 5.2857142857vw;
    line-height: 2;
  }
}
.modelroom_text {
  margin-top: 2.5em;
  font-size: min(1.09375vw, 14px);
  line-height: 2.5;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .modelroom_text {
    font-size: 3.4285714286vw;
    letter-spacing: 0;
  }
}
.modelroom_text_under {
  margin-bottom: 80px;
  font-size: min(1.09375vw, 14px);
  line-height: 2.5;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .modelroom_text_under {
    font-size: 3.4285714286vw;
    letter-spacing: 0;
  }
}
.modelroom_img {
  overflow: hidden;
  position: relative;
  margin-top: min(6.25vw, 80px);
  margin-inline: calc(50% - 50vw);
}
@media screen and (max-width: 768px) {
  .modelroom_img {
    margin-top: 10.7142857143vw;
  }
}
.modelroom_img figcaption {
  position: absolute;
  right: 1.5em;
  bottom: 0.5em;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
}
.modelroom_img figcaption:not(:last-child) {
  right: calc(50% + 1.5em);
}
@media screen and (max-width: 768px) {
  .modelroom_img figcaption:not(:last-child) {
    right: 1.5em;
    bottom: calc(52% + 0.5em);
  }
}

.modelroom_header {
  position: relative;
  z-index: 0;
  height: min(30.3125vw, 388px);
  background: #fff;
}
@media screen and (max-width: 768px) {
  .modelroom_header {
    height: 93.5714285714vw;
  }
}
.modelroom_header .mv_cap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 11px;
  color: #fff;
  z-index: 2;
}
.modelroom_header_title {
  position: absolute;
  z-index: 1;
  inset: 45% 50%;
  translate: -50% -50%;
  width: min(27.5vw, 352px);
}
@media screen and (max-width: 768px) {
  .modelroom_header_title {
    width: 53.4285714286vw;
  }
}
.modelroom_header_bg {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.modelroom_header_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro_text {
  font-size: min(2.1875vw, 28px);
  font-weight: 500;
  line-height: 2.1428571429;
  text-align: center;
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .intro_text {
    font-size: 4vw;
  }
}

.modelroom_header_ornaments {
  position: relative;
  width: 100%;
  padding-top: 100px;
}

.modelroom_header_ornament {
  position: absolute;
  z-index: 2;
  top: 0;
  mix-blend-mode: multiply;
  transition-delay: 0.8s;
}
.modelroom_header_ornament:nth-of-type(1) {
  left: 0;
  width: min(44.921875vw, 575px);
}
@media screen and (max-width: 768px) {
  .modelroom_header_ornament:nth-of-type(1) {
    width: 61.5714285714vw;
  }
}
.modelroom_header_ornament:nth-of-type(2) {
  right: 0;
  width: min(38.203125vw, 489px);
}
@media screen and (max-width: 768px) {
  .modelroom_header_ornament:nth-of-type(2) {
    width: 52.2857142857vw;
  }
}

.modelroom_section {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.modelroom_section .in_text {
  font-size: min(1.09375vw, 14px);
  line-height: 2;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .modelroom_section .in_text {
    font-size: 2.1428571429vw;
    line-height: 2;
  }
}

.mr_wrapp {
  width: 100%;
  margin-top: 120px;
  position: relative;
}
.mr_wrapp h3 {
  background: #3782DE;
  background: linear-gradient(95deg, rgb(55, 130, 222) 0%, rgb(39, 100, 176) 33%, rgb(9, 46, 91) 71%);
  color: #fff;
  padding: 50px 0;
  font-size: min(2.734375vw, 35px);
  font-weight: 600;
  letter-spacing: 0.37em;
  text-align: center;
  line-height: 1;
  margin: 0 auto 30px;
}
@media screen and (max-width: 768px) {
  .mr_wrapp h3 {
    font-size: 5.7142857143vw;
    letter-spacing: 0.2em;
    padding: 30px 0;
  }
}
.mr_wrapp .mr_text {
  font-size: min(2.1875vw, 28px);
  font-weight: 500;
  line-height: 2.1428571429;
  text-align: center;
  margin: 0 auto 40px;
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_text {
    font-size: 4vw;
    margin-bottom: 40px;
  }
}
.mr_wrapp .mr_image {
  position: relative;
}
.mr_wrapp .mr_image.bc-type {
  margin-top: 12vw;
}
.mr_wrapp .mr_image img {
  width: 100%;
  max-width: inherit;
  height: auto;
}
.mr_wrapp .mr_image.rig_wrapp {
  width: 80%;
  margin-left: 20%;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image.rig_wrapp {
    width: 95%;
    margin-left: 5%;
  }
}
.mr_wrapp .mr_image.lef_wrapp {
  width: 80%;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image.lef_wrapp {
    width: 95%;
  }
}
.mr_wrapp .mr_image .flo_box {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image .flo_box {
    margin-bottom: 40px;
  }
}
.mr_wrapp .mr_image .flo_box.item_top {
  align-items: flex-start;
}
.mr_wrapp .mr_image .flo_box.left_set {
  justify-content: start;
  gap: 2%;
}
.mr_wrapp .mr_image .cap {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #000;
  padding-right: 5px;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image .cap {
    margin-top: 10px;
    font-size: min(1.8vw, 11px);
  }
}
.mr_wrapp .mr_image .wide {
  position: relative;
  width: 100%;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image .wide {
    margin-bottom: 40px;
  }
}
.mr_wrapp .mr_image .wi_60 {
  position: relative;
  width: 60%;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image .wi_60 {
    margin-bottom: 40px;
  }
}
.mr_wrapp .mr_image .wi_60.mgl_40 {
  margin-left: 40%;
}
.mr_wrapp .mr_image .wi_30 {
  position: relative;
  width: 33.3333333333%;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image .wi_30 {
    width: 38%;
  }
}
.mr_wrapp .mr_image .wi_40 {
  position: relative;
  width: 39.8148148148%;
}
.mr_wrapp .mr_image .wi_66 {
  position: relative;
  width: 61.5740740741%;
}
@media screen and (max-width: 768px) {
  .mr_wrapp .mr_image .wi_66 {
    width: 55%;
  }
}
.mr_wrapp .mr_photo {
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}

.list_btn_wrapp {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .list_btn_wrapp {
    width: 71.378%;
  }
}
.list_btn_wrapp .back_list_btn {
  width: 48%;
}
@media screen and (max-width: 768px) {
  .list_btn_wrapp .back_list_btn {
    width: 100%;
    margin-bottom: 15px;
  }
}
.list_btn_wrapp .back_list_btn.plan a {
  background-color: #8969a5;
}

.back_list_btn {
  margin: 0 auto;
  width: 53.6%;
  max-width: 311px;
}
@media screen and (max-width: 768px) {
  .back_list_btn {
    width: 71.378%;
  }
}
.back_list_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  color: #fff;
  font-family: var(--font-ja);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  background-color: #4d4d4d;
  border-radius: 100px;
  transition: 0.3s all ease-in-out 0s;
}
.back_list_btn a:hover {
  opacity: 0.8;
}
@media screen and (max-width: 900px) {
  .back_list_btn a {
    height: 5.333vw;
    font-size: 1.888vw;
  }
}
@media screen and (max-width: 768px) {
  .back_list_btn a {
    height: 8.85714vw;
    font-size: 3.2857vw;
  }
}

.mask_text {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 1s linear;
  will-change: clip-path;
}
.mask_text.on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.posi_wrapp {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}

.acce_img {
  position: absolute;
  width: min(17.65625vw, 226px);
  z-index: 3;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 768px) {
  .acce_img {
    width: min(16.09375vw, 206px);
  }
}
.acce_img.onm_1 {
  left: 3%;
  top: -1.5%;
  width: min(15.3125vw, 196px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_1 {
    left: 3%;
    top: -1%;
    width: min(20.78125vw, 266px);
  }
}
.acce_img.onm_2 {
  width: min(20.78125vw, 266px);
  right: 3%;
  top: 1.2%;
}
@media screen and (max-width: 768px) {
  .acce_img.onm_2 {
    width: min(17.65625vw, 226px);
    top: 2%;
  }
}
.acce_img.onm_3 {
  right: -56%;
  top: 2%;
  width: min(25.46875vw, 326px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_3 {
    width: min(25.46875vw, 326px);
  }
}
.acce_img.onm_4 {
  left: 2%;
  bottom: 55%;
  width: min(22.46875vw, 236px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_4 {
    width: min(18.4375vw, 236px);
    bottom: 75%;
  }
}
.acce_img.onm_5 {
  right: 120%;
  top: 5%;
  width: min(22.46875vw, 236px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_5 {
    width: min(19.21875vw, 246px);
  }
}
.acce_img.onm_6 {
  right: 6%;
  bottom: -8%;
  width: min(20vw, 256px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_6 {
    width: min(17.65625vw, 226px);
    bottom: -12%;
  }
}
.acce_img.onm_7 {
  left: 3%;
  top: 4%;
  width: min(15.3125vw, 196px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_7 {
    width: min(20.78125vw, 266px);
    left: 0;
  }
}
.acce_img.onm_8 {
  width: min(20.78125vw, 266px);
  right: 0%;
  top: -5%;
}
@media screen and (max-width: 768px) {
  .acce_img.onm_8 {
    width: min(20.78125vw, 266px);
    top: -4%;
    right: -2%;
  }
}
.acce_img.onm_9 {
  right: -56%;
  top: 2%;
  width: min(25.46875vw, 326px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_9 {
    width: min(23.90625vw, 306px);
  }
}
.acce_img.onm_10 {
  left: 2%;
  bottom: 65%;
  width: min(22.46875vw, 236px);
}
@media screen and (max-width: 768px) {
  .acce_img.onm_10 {
    width: min(17.65625vw, 226px);
    top: auto;
    bottom: 28%;
  }
}

.peoples_img {
  position: absolute;
  width: min(14.53125vw, 186px);
  z-index: 3;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 768px) {
  .peoples_img {
    width: min(20vw, 256px);
  }
}
.peoples_img.peo_1 {
  right: 3%;
  top: -30%;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_1 {
    top: auto;
    bottom: 0%;
  }
}
.peoples_img.peo_2 {
  left: 3%;
  bottom: 0%;
}
.peoples_img.peo_3 {
  right: 3%;
  top: -20%;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_3 {
    top: -10%;
  }
}
.peoples_img.peo_4 {
  left: 3%;
  bottom: -15%;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_4 {
    left: auto;
    right: 10%;
    bottom: 5%;
  }
}
.peoples_img.peo_5 {
  right: 3%;
  top: -10%;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_5 {
    top: -5%;
  }
}
.peoples_img.peo_6 {
  left: -5%;
  top: -5%;
  mix-blend-mode: inherit;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_6 {
    width: min(27.8125vw, 356px);
    left: -5%;
    top: -2%;
  }
}
.peoples_img.peo_7 {
  right: -8%;
  top: 40%;
  mix-blend-mode: inherit;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_7 {
    width: min(27.8125vw, 356px);
    right: 0%;
    top: 60%;
  }
}
.peoples_img.peo_8 {
  left: -5%;
  bottom: 5%;
  mix-blend-mode: inherit;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_8 {
    width: min(27.8125vw, 356px);
    left: -2%;
    bottom: 5%;
  }
}
.peoples_img.peo_9 {
  left: 3%;
  top: -10%;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_9 {
    top: -10%;
  }
}
.peoples_img.peo_10 {
  right: -3%;
  bottom: -12%;
}
@media screen and (max-width: 768px) {
  .peoples_img.peo_10 {
    bottom: -6%;
  }
}

.ornament {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  mix-blend-mode: multiply;
}
.ornament img {
  pointer-events: none;
  user-select: none;
}
.ornament01 {
  position: absolute;
  top: min(3.125vw, 40px);
  left: max(-9.375vw, -120px);
  width: min(18.359375vw, 235px);
}
@media screen and (max-width: 768px) {
  .ornament01 {
    top: 32.8571428571vw;
    left: -12.8571428571vw;
    width: 30.2857142857vw;
  }
}
.ornament02 {
  position: absolute;
  top: min(2.34375vw, 30px);
  right: max(-11.71875vw, -150px);
  width: min(18.90625vw, 242px);
}
@media screen and (max-width: 768px) {
  .ornament02 {
    top: 2.8571428571vw;
    right: -17.1428571429vw;
    width: 31.1428571429vw;
  }
}
.ornament03 {
  position: absolute;
  top: min(0.78125vw, 10px);
  right: calc(50% + min(31.25vw, 400px));
  width: min(15.3125vw, 196px);
}
@media screen and (max-width: 768px) {
  .ornament03 {
    top: -7.1428571429vw;
    left: -2.8571428571vw;
    right: initial;
    width: 25.1428571429vw;
  }
}
.ornament04 {
  position: absolute;
  top: max(-3.125vw, -40px);
  right: max(-10.9375vw, -140px);
  width: min(18.359375vw, 235px);
}
@media screen and (max-width: 768px) {
  .ornament04 {
    top: -11.4285714286vw;
    right: -20vw;
    width: 32.4285714286vw;
  }
}
.ornament05 {
  position: absolute;
  top: 0;
  left: max(-10.9375vw, -140px);
  width: min(16.015625vw, 205px);
}
@media screen and (max-width: 768px) {
  .ornament05 {
    top: 35.7142857143vw;
    left: -12.8571428571vw;
    width: 24.4285714286vw;
  }
}
.ornament06 {
  position: absolute;
  top: min(3.90625vw, 50px);
  right: max(-9.375vw, -120px);
  width: min(12.1875vw, 156px);
}
@media screen and (max-width: 768px) {
  .ornament06 {
    top: 2.8571428571vw;
    right: -5.7142857143vw;
    width: 20vw;
  }
}

/* ================================
   オーナメント
================================ */
.acce_img {
  position: absolute;
  width: min(12.1875vw, 156px);
  z-index: 3;
  mix-blend-mode: multiply;
}

/* ================================
  CV
================================ */
.mr_reserve {
  width: 80%;
  max-width: 504px;
  margin: 0 auto;
  text-align: center;
}
.mr_reserve .do_text {
  text-align: center;
  display: inline-block;
  margin: 0 auto 20px;
  font-size: min(2.8vw, 30px);
  position: relative;
}
@media screen and (max-width: 768px) {
  .mr_reserve .do_text {
    font-size: min(4.5vw, 25px);
  }
}
.mr_reserve .do_text::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 10px;
  width: 1px;
  height: 60px;
  background: #333;
  transform: rotate(310deg);
}
@media screen and (max-width: 768px) {
  .mr_reserve .do_text::before {
    top: 0px;
    height: 50px;
  }
}
.mr_reserve .do_text::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 10px;
  width: 1px;
  height: 60px;
  background: #333;
  transform: rotate(50deg);
}
@media screen and (max-width: 768px) {
  .mr_reserve .do_text::after {
    top: 0px;
    height: 50px;
  }
}
.mr_reserve .topAction__button {
  padding-left: 1em;
  transition: 0.5s ease-in-out;
}
.mr_reserve .topAction__button:hover {
  opacity: 0.8;
}
.mr_reserve .topAction__button .button {
  height: 90px;
  font-size: min(2.8vw, 25px);
  padding-left: 1em;
}
@media screen and (max-width: 768px) {
  .mr_reserve .topAction__button .button {
    height: 70px;
    font-size: min(4.5vw, 25px);
  }
}

/* ================================
   矢印
================================ *//*# sourceMappingURL=modelroom.css.map */