@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
/* main-ttl-wrap
-------------------------------------*/
#modelhouse .gnav li a {
   color: #FFFFFF;
}
#modelhouse .gnav li a::after {
  background-color: #FFFFFF;
}
#modelhouse .seo_bread_list {
   color: #FFFFFF;
}
#modelhouse .seo_bread_list a {
   color: #FFFFFF;
}

.main-ttl-wrap {
   background: url(../images/modelhouse/fv.jpg) no-repeat;
   background-size: cover;
   padding: 34.31rem 0 0.15rem;
   margin-bottom: 4.65rem;
}
.main-ttl-wrap h1 {
   width: min(95%, 1066px);
   margin-left: auto;
   margin-right: calc(107 / 1920 * 100vw);
   position: relative;
   top: calc(5 / 1920 * 100vw);
}
.main-ttl-wrap h1 img {
   width: 100%;
   height: auto;
}

#modelhouse main {
  max-width: 1920px;
  margin-inline: auto;
  width: 100%;
}

/* intro
-------------------------------------*/
.intro {
   padding: 0 0 11.25rem;
 }
 .intro .btn {
   width: 37.5rem;
   margin-inline: auto;
   background: #404040;
   margin-bottom: 10rem;
 }
 .intro .btn a {
   font-size: 18px;
   line-height: 2.6666666667;
   letter-spacing: 0.05em;
   font-weight: 500;
   color: #FFFFFF;
   padding: 1.6rem 0 1.6rem 11.8rem;
   display: block;
 }
 .intro .btn a::before {
   content: "";
   position: absolute;
   left: 8.0625rem;
   top: 50%;
   transform: translateY(-50%);
   width: 2.5rem;
   height: 2.5rem;
   background: url(../images/modelhouse/modelhouse-icon.svg) no-repeat;
   background-size: contain;
 }
 .intro .btn a::after {
   content: "→";
   position: absolute;
   right: 2.25rem;
   top: 54%;
   transform: translateY(-50%);
   font-size: 24px;
   color: #fff;
   font-weight: 400;
   font-family: "Lato", sans-serif;
   transition: all 0.2s ease;
 }
 .intro .btn a:hover::after {
   right: 2rem;
 }
 .intro .inBox {
   width: min(95%, 1640px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 35.3658% 64.6341%;
 }
 .intro .inBox .txt-box {
   background: #333333;
   color: #FFFFFF;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: calc(120 / 1920 * 100vw);
   padding-right: calc(50 / 1920 * 100vw);
 }
 .intro .inBox .txt-box h2 {
   font-size: clamp(1.125rem, 0.625rem + 1.04vw, 1.875rem);
   line-height: 1.7;
   letter-spacing: 0.05em;
   font-weight: 700;
   margin-bottom: calc(38 / 1920 * 100vw);
 }
 .intro .inBox .txt-box .txt {
   font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
   line-height: 2.5;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: calc(39 / 1920 * 100vw);
 }
 .intro .inBox .txt-box .txt:nth-last-of-type(1) {
   margin-bottom: 0;
 }
 .intro .inBox .photo img {
   width: 100%;
   height: auto;
 }

 /* point
 -------------------------------------*/
 .point {
   display: grid;
   grid-template-columns: 66.66% 1fr;
   align-items: center;
   margin-bottom: 7.5rem;
 }
 .point .content .inner {
   background: #FFFFFF;
   padding: calc(68 / 1920 * 100vw) calc(30 /1920 *100vw) calc(68 /1920 *100vw) calc(86 / 1920 * 100vw);
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   left: calc(-175 / 1920 * 100vw);
 }
 .point .content .inner .num {
   font-size: 13px;
   line-height: 1.2307692308;
   letter-spacing: 0em;
   font-weight: 400;
   color: #333333;
   margin-bottom: 1.45rem;
 }
 .point .content .inner h2 {
   font-size: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
   line-height: 1.28125;
   letter-spacing: 0.05em;
   font-weight: 700;
   margin-bottom: calc(59 / 1920 * 100vw);
 }
 .point .content .inner .txt {
   font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 400;
   margin-bottom: calc(30 / 1920 * 100vw);
 }
 .point .content .inner .txt:nth-last-of-type(1) {
   margin-bottom: 0;
 }
 .point .photo img {
   width: 100%;
   height: auto;
 }

 /* point02 */
 .point02 {
   grid-template-columns: 33.33% 1fr;
 }
 .point02 .photo {
   order: 2;
 }
 .point02 .content {
   order: 1;
 }
 .point02 .content .inner {
   padding: calc(84 / 1920 * 100vw) calc(86 /1920 *100vw) calc(84 /1920 *100vw) calc(14 / 1920 * 100vw);
   left: calc(218 / 1920 * 100vw);
 }
 /* point03 */
 .point03 {
   margin-bottom: 12.5rem;
 }
 .point03 .content .inner {
   padding: calc(58 / 1920 * 100vw) calc(15 /1920 *100vw) calc(58 /1920 *100vw) calc(86 / 1920 * 100vw);
 }
 .point03 .content .inner .num {
   margin-bottom: 0.2rem;
 }
 .point03 .content .inner h2 {
   line-height: 1.875;
   margin-bottom: calc(51 / 1920 * 100vw);
 }

 /* gallery
 -------------------------------------*/
 .gallery {
   background: #F0EFEB;
   padding: 10rem 0 8.9rem;
 }
 .gallery .en-ttl {
   font-size: 40px;
   font-weight: 400;
   line-height: 1.2;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 0rem;
 }
 .gallery h2 {
   font-size: 16px;
   font-weight: 500;
   line-height: 2.5;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 3.65rem;
 }
 .gallery .slider-ttl {
   font-size: 20px;
   font-weight: 500;
   line-height: 2;
   letter-spacing: 0.05em;
   width: min(95%, 1640px);
   margin-inline: auto;
   margin-bottom: 0.85rem;
 }
 .gallery .slick-img {
   margin: 0 20px;
   width: min(95%, 520px);
 }
 .gallery .next-arrow,
 .gallery .prev-arrow {
   position: absolute;
   left: 50%;
   top: 49%;
   transform: translate(-50%, -50%);
   z-index: 3;
}
.gallery .next-arrow {
   margin-left: 801px;
   width: 80px;
}
.gallery .prev-arrow {
   margin-left: -801px;
   width: 80px;
}
.gallery .slider-1f {
   margin-bottom: 5.35rem;
}

/* kyoto
-------------------------------------*/
.kyoto {
   background: #F4F4F4;
   padding: 8.35rem 0 2.5rem;
   margin-top: 10.0625rem;
 }
 .kyoto .en-ttl {
   font-size: 16px;
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 400;
   text-align: center;
   margin-bottom: 0.8rem;
 }
 .kyoto h2 {
   font-size: 30px;
   line-height: 1.7;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: center;
   margin-bottom: 1.8rem;
 }
 .kyoto .lead {
   font-size: 16px;
   line-height: 2.5;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: center;
   margin-bottom: 7.05rem;
 }
 .kyoto .inBox {
   width: min(95%, 1280px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 36.03125% 58.90625%;
   align-items: center;
   gap: calc(65 / 1920 * 100vw);
   margin-bottom: 5.75rem;
 }
 .kyoto .inBox .txt-box {
   padding-left: 2.5rem;
   position: relative;
   top: calc(-4 / 1920 * 100vw);
 }
 .kyoto .inBox h3 {
   font-size: clamp(1.25rem, 0.833rem + 0.87vw, 1.875rem);
   line-height: 1.7;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2.6rem;
 }
 .kyoto .inBox .txt {
   font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2rem;
 }
 .kyoto .inBox .txt:nth-of-type(2) {
   margin-bottom: 0;
 }
 .kyoto .inBox .ytArea iframe {
   width: 100%;
   height: 100%;
   aspect-ratio: 16/9;
 }

 /* access
 -------------------------------------*/
 .access {
   padding: 10rem 0 7.9rem;
 }
 .access .en-ttl {
   font-size: 13px;
   line-height: 1.2308;
   letter-spacing: 0;
   text-align: center;
   color: #9a9a9a;
   margin-bottom: 0.625rem;
 }
 .access h2 {
   font-weight: bold;
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 1.708333;
   text-align: center;
   margin-bottom: 4.7rem;
 }
 .access .map {
   margin-bottom: 1.85rem;
}
.access .map iframe {
   aspect-ratio: 16 / 9;
   width: 100%;
}
.access .address {
   font-size: 16px;
   font-weight: 400;
   line-height: 2;
   letter-spacing: 0.05em;
   margin-bottom: 0.75rem;
   text-align: center;
}
.access .open-wrap {
   display: flex;
   justify-content: center;
   gap: 30px;
}
.access .open {
   font-size: 16px;
   font-weight: 400;
   line-height: 2;
   letter-spacing: 0.05em;
   text-align: center;
}
.access .open span {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: 0.05em;
   color: #FFFFFF;
   background: #333333;
   padding: 0 0.22rem;
   margin: 0 15px 0 0;
   width: 75px;
   display: inline-block;
   }

   /*form
   -------------------------------------*/
   #modelhouse .form-box-inner {
    width: min(95%, 1600px);
    margin-inline: auto;
    border: 1px solid #9A9A9A;
    padding: 6rem 0;
  }
  #modelhouse .form-box-inner .formttl_ja {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.7083;
    letter-spacing: 0.05em;
    margin-bottom: 7.2rem;
  }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1700px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1700px) {
/* point
-------------------------------------*/
.point {
   display: grid;
   grid-template-columns: 66.66% 1fr;
   align-items: center;
   margin-bottom: 7.059vw;
 }
 .point .content .inner {
   background: #FFFFFF;
   padding: 4vw 2.941vw 4vw 3.059vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   left: -10.294vw;
 }
 .point .content .inner .num {
   font-size: 0.765vw;
   line-height: 1.2307692308;
   letter-spacing: 0em;
   font-weight: 400;
   color: #333333;
   margin-bottom: 1.365vw;
 }
 .point .content .inner h2 {
   font-size: 1.882vw;
   line-height: 1.28125;
   letter-spacing: 0.05em;
   font-weight: 700;
   margin-bottom: 3.471vw;
 }
 .point .content .inner .txt {
   font-size: 0.941vw;
   line-height: 2;
   letter-spacing: 0.05em;
   font-weight: 400;
   margin-bottom: 1.765vw;
 }
 .point .content .inner .txt:nth-last-of-type(1) {
   margin-bottom: 0;
 }
 .point .photo img {
   width: 100%;
   height: auto;
 }
 
 /* point02 */
 .point02 {
   grid-template-columns: 33.33% 1fr;
 }
 .point02 .photo {
   order: 2;
 }
 .point02 .content {
   order: 1;
 }
 .point02 .content .inner {
   padding: 4.941vw 3.059vw 4.941vw 0.824vw;
   left: 12.824vw;
 }
 
 /* point03 */
 .point03 {
   margin-bottom: 11.765vw;
 }
 .point03 .content .inner {
   padding: 3.412vw 0.882vw 3.412vw 3.059vw;
 }
 .point03 .content .inner .num {
   margin-bottom: 0.188vw;
 }
 .point03 .content .inner h2 {
   font-size: 1.882vw;
   line-height: 1.875;
   margin-bottom: 3vw;
 }
 
 
}


@media screen and (min-width:768px) and (max-width:1800px) {
  .gallery .slick-img {
    margin: 0 1.111vw;
    width: 28.889vw;
}
.gallery .slick-img img {
    width: 100%;
    height: auto;
}
.gallery .next-arrow {
  margin-left: 44.5vw;
  width: 4.444vw;
}
.gallery .prev-arrow {
  margin-left: -44.5vw;
  width: 4.444vw;
}
}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
   #modelhouse .gnav li a {
      color: #FFFFFF;
   }
   #modelhouse .gnav li a::after {
    background-color: #FFFFFF;
  }
   #modelhouse .seo_bread_list {
      color: #FFFFFF;
   }
   #modelhouse .seo_bread_list a {
      color: #FFFFFF;
   }
   .main-ttl-wrap {
      background: url(../images/modelhouse/fv_sp.jpg) no-repeat;
      background-size: cover;
      padding: 125vw 0 0;
      margin-bottom: 12vw;
   }
   .main-ttl-wrap h1 {
      width: 85.75vw;
      margin-left: auto;
      margin-right: 0.8vw;
      position: relative;
   }
   .main-ttl-wrap h1 img {
      width: 100%;
      height: auto;
   }

   /* intro
-------------------------------------*/
.intro {
   padding: 0 0 19vw;
 }
 .intro .btn {
   width: 89.375vw;
   margin-inline: auto;
   background: #404040;
   margin-bottom: 14.2vw;
 }
 .intro .btn a {
   font-size:3.865vw;
   line-height: 1.5;
   letter-spacing: 0.05em;
   font-weight: 500;
   color: #FFFFFF;
   padding: 6.4vw 0 6vw 20.4vw;
   display: block;
 }
 .intro .btn a::before {
   content: "";
   position: absolute;
   left: 7vw;
   top: 50%;
   transform: translateY(-50%);
   width: 9.665vw;
   height: 9.665vw;
   background: url(../images/modelhouse/modelhouse-icon.svg) no-repeat;
   background-size: contain;
 }
 .intro .btn a::after {
   content: "→";
   position: absolute;
   right: 7vw;
   top: 54%;
   transform: translateY(-50%);
   font-size:5.797vw;
   color: #fff;
   font-weight: 400;
   font-family: "Lato", sans-serif;
   transition: all 0.2s ease;
 }
 .intro .btn a:hover::after {
   right: 6vw;
 }
 .intro .inBox {
   display: grid;
}
 .intro .inBox .txt-box {
   background: #333333;
   color: #FFFFFF;
   display: flex;
   flex-direction: column;
   justify-content: center;
   order: 2;
   padding: 9.2vw 0vw 8vw 11vw;
 }
 .intro .inBox .txt-box h2 {
   font-size:4.831vw;
   line-height: 1.75;
   letter-spacing: 0.05em;
   font-weight: 700;
   margin-bottom: 5vw;
 }
 .intro .inBox .txt-box .txt {
   font-size:3.382vw;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 8vw;
 }
 .intro .inBox .txt-box .txt:nth-last-of-type(1) {
   margin-bottom: 0;
 }
.intro .inBox .photo {
    order: 1;
}
 .intro .inBox .photo img {
   width: 100%;
   height: auto;
 }

/* point
 -------------------------------------*/
 .point {
   display: grid;
   margin-bottom: 3vw;
 }
 .point .content  {
   background: #FFFFFF;
   width: 94.7vw;
   margin-left: auto;
   position: relative;
   top: -12vw;
 }
 .point .content .inner {
   padding: 7.4vw 10vw 0 5vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 .point .content .inner .num {
   font-size:3.14vw;
   line-height: 1.2307692308;
   letter-spacing: 0em;
   font-weight: 400;
   color: #333333;
   margin-bottom: 3.6vw;
 }
 .point .content .inner h2 {
   font-size:4.831vw;
   line-height: 2.05;
   letter-spacing: 0.05em;
   font-weight: 700;
   margin-bottom: 4.8vw;
 }
 .point .content .inner .txt {
   font-size:3.382vw;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   font-weight: 400;
   margin-bottom: 7.7vw;
 }
 .point .content .inner .txt:nth-last-of-type(1) {
   margin-bottom: 0;
 }
 .point .photo {
   width: 89.375vw;
   margin-right: auto;
 }
 .point .photo img {
   width: 100%;
   height: auto;
 }

 /* point02 */
 .point02 {
 margin-bottom: 5.2vw;
 }
 .point02 .photo {
   margin-left: auto;
   margin-right: 0;
 }
 .point02 .content {margin-right: auto;margin-left: 0;top: -9.8vw;}
 .point02 .content .inner {padding: 7.4vw 5vw 0 10vw;}
 /* point03 */
.point03 {
    margin-bottom: 10vw;
}
 .point03 .content {
    top: -9.8vw;
}
 .point03 .content .inner {
   padding: 7.6vw 10vw 0 5vw;
 }
 .point03 .content .inner .num {margin-bottom: 4.4vw;}
 .point03 .content .inner h2 {
   line-height: 1.75;
   margin-bottom: 5.4vw;
 }

 /* gallery
 -------------------------------------*/
 .gallery {
   background: #F0EFEB;
   padding: 18vw 0 14vw;
   overflow: hidden;
 }
 .gallery .en-ttl {
   font-size:7.246vw;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 2.4vw;
 }
 .gallery h2 {
   font-size:3.623vw;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 7vw;
 }
 .gallery .slider-ttl {
   font-size:3.865vw;
   font-weight: 500;
   line-height: 2;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 3.8vw;
 }
 .gallery .slick-img {
   margin: 0 2.5vw;
   width: 76.815vw;
 }
 .gallery .next-arrow,
 .gallery .prev-arrow {
   position: absolute;
   left: 50%;
   top: 47.5%;
   transform: translate(-50%, -50%);
   z-index: 3;
   width: 16.91vw;
}
.gallery .next-arrow {
   margin-left: 45.5vw;
}
.gallery .prev-arrow {
   margin-left: -45.5vw;
}
.gallery .slider-1f {
   margin-bottom: 8vw;
}
   
/* kyoto
-------------------------------------*/
.kyoto {
   background: #F4F4F4;
   padding: 13.2vw 0 5vw;
   margin-top: 17vw;
 }
 .kyoto .en-ttl {
   font-size:3.382vw;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   font-weight: 400;
   text-align: center;
   margin-bottom: 3.6vw;
 }
 .kyoto h2 {
   font-size:5.797vw;
   line-height: 2.125;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: center;
   margin-bottom: 2.5vw;
 }
 .kyoto .lead {
   font-size:3.382vw;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: center;
   margin-bottom: 8vw;
 }
 .kyoto .inBox {
   width: 89.375vw;
   margin-inline: auto;
   display: grid;
   gap: 3vw;
   margin-bottom: 10.5vw;
 }
 .kyoto .inBox .txt-box {
   order: 2;
 }
 .kyoto .inBox h3 {
   font-size:4.831vw;
   line-height: 2.55;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 3.2vw;
 }
 .kyoto .inBox .txt {
   font-size:3.382vw;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 8vw;
 }
 .kyoto .inBox .txt:nth-of-type(2) {
   margin-bottom: 0;
 }
 .kyoto .inBox .ytArea {
   order: 1;
 }
 .kyoto .inBox .ytArea iframe {
   width: 100%;
   height: 100%;
   aspect-ratio: 16/9;
 }

  /* access
 -------------------------------------*/
 .access {
   padding: 14vw 0 5.7vw;
 }
 .access .en-ttl {
   font-size:7.246vw;
   line-height: 1.2;
   letter-spacing: 0.05em;
   text-align: center;
   color: #1C1C1C;
   margin-bottom: 0.7vw;
 }
 .access h2 {
   font-weight: bold;
   font-size:3.623vw;
   letter-spacing: 0.05em;
   line-height: 1.708333;
   text-align: center;
   margin-bottom: 9vw;
 }
 .access .map {
   margin-bottom: 2vw;
}
.access .map iframe {
   aspect-ratio: 16 / 9;
   width: 100%;
   height: 87vw;
}
.access .address {
   font-size:3.382vw;
   font-weight: 400;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   margin-bottom: 0.5vw;
   text-align: center;
}
.access .open-wrap {margin: 0 24vw 0 0;}
.access .open {
   font-size:3.382vw;
   font-weight: 400;
   line-height: 2.285714;
   letter-spacing: 0.05em;
   text-align: center;
   margin: -0.5vw 0 0;
}
.access .open span {
   font-size:3.382vw;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0.05em;
   color: #FFFFFF;
   background: #333333;
   padding: 1.1vw 0;
   margin: 0 2vw 0 0;
   width: 18vw;
   display: inline-block;
   }

   /* form
   -------------------------------------*/
   #modelhouse .form-Box {
    padding: 12vw 0 19vw;
  }
  #modelhouse .form-box-inner {
    margin-inline: auto;
  }
}