@charset "utf-8";
/*
 * renovation-modelhouse ページ専用CSS
 */

/* ===== Variables ===== */
.inner-rv {
 max-width: 1080px;
 margin-inline: auto;
}

/* アンセット */
.inner:has(.rv-page),
#content2 {
 width: 100%;
 max-width: unset;
 padding-block-end: 0;

 .f_bc {
  width: min(1100px, 100%);
  margin-inline: auto;
 }
}

.post {
 margin-block-end: 0;
 padding-block-end: 0;
}

.post .rv-page{
 /* font-family: 'Noto Sans JP', sans-serif; */
 font-family: "Meiryo", "メイリオ", 'Noto Sans JP', "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

/* <-===== Base Reset for this page ===== */
.rvmhouse {
 margin-block-start: 4rem;
}

p.rv-hero-location {
 color: #5D737F;
 font-size: clamp(15px, -2.411rem + 6.7vw, 30px);
 line-height: 1.6785;
 text-align: center;
 margin-block-end: 1rem; 
 @media (max-width: 767px) {
  padding-block-end: 0;
 }

 &::before {
  content: '\\\\';
  margin-right: 0.5em;
 }

 &::after {
  content: '//';
  margin-left: 0.5em;
 }
}

.rv-hero {
 display: grid;
 justify-content: center;
 position: relative;
 isolation: isolate;

 img {
  display: block;
  position: relative;
  background-color: transparent;
  margin-block-end: 3rem;
  width: min(1080px, 100% - 2rem);
  margin-inline: auto;
 }

 &::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 95%;
  max-height: clamp(15.313rem, 0.086rem + 64.97vw, 44.75rem);
  bottom: 0;
  display: block;
  z-index: -1;
  background-color: #5D737F;
 }
}

.information-data {
 background-color: #E8EFF3;
 padding-block: clamp(1.5rem, -0.9rem + 6.4vw, 3.5rem);

 h3 {
  text-align: center;
  margin-block-start: 0;
  font-size: clamp(1.25rem, 0.557rem + 1.85vw, 1.827rem);
  line-height: 1.8;
 }

 > div {
  width: fit-content;
  margin-inline: auto;

  &.event-date {
   > span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;

    span {
     font-family: "Lora", sans-serif;
     font-size: clamp(1.875rem, -0.26rem + 5.69vw, 3.654rem);
     font-weight: 500;
     display: inline-block;
     margin-inline: 0.5rem 0.25rem;
    }
   }
  }
 }
}

.MsOpenInformation {
 display: flex;
 gap: clamp(1rem, -1.667rem + 5.33vw, 2rem);
 justify-content: center;
 align-items: center;
 margin-block-start: 1.5rem;
 .accessMap a,
 .openTime {
  display: flex;
  align-items: center;
  gap: 0.5rem;
 }
 .openTime {
  font-family: "Lora", sans-serif;
  font-size: clamp(1.25rem, -0.25rem + 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
 }
 a {
  color: #333;
  transition: 0.3s ease;
  font-size: clamp(0.75rem, 0.15rem + 1.6vw, 1.25rem);
  &:hover {
   color: #5e5e5e
  }
 }

 svg{
  width: auto;height: auto;max-width: 100%;
  &:nth-child(1){width:clamp(0.75rem, -0.118rem + 2.31vw, 1.473rem)}
  &:nth-child(2){width:clamp(0.375rem, -0.45rem + 2.2vw, 1.063rem)}
}
}
@media(1024px > width){
  .information-data {
    & > div {
        &.event-date {text-align: center;}
    }
  }
}
.rv-hero-tips {
 color: #817864;
 margin-block: 41px;
 background-color: #F8F5EF;
 border-radius: 10px;
 padding: 1.75em clamp(1em, -9.667rem + 21.33vw, 5em);
 width: fit-content;
 margin-inline: auto;
 display: flex;
 gap: 2rem 3rem;

 p {
  font-size: 1.375rem;
  line-height: 1.36;
  font-weight: bolder;
  text-align: center;
  align-content: end;
  width: 306px;
  padding-block-end: 1.25em;
  background-image: url(../images/remodel-svg1.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
 }

 ul {
  font-weight: 600;
  padding-inline-start: 2em;

  li {
   border-bottom: unset;

   &::before {
    content: "・";
    display: inline-block;
   }
  }
 }

 &.bonus {
  width: 100%;
  padding-inline: unset;
  margin-block-end: 0;
  padding-block: 60px;
  position: relative;
  margin-block-start:clamp(5rem, -1rem + 16vw, 10rem);

  &::before {
   content: "";
   position: absolute;
   top: 0;
   display: block;
   width: 100%;
   max-width: 324px;
   height: 30px;
   background-image: url(../images/remodel_h3backimage.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   left: 50%;
   transform: translateX(-50%);
  }

  .inner-rv > div {
   display: grid;
   grid-template-columns: repeat(2, minmax(523px, 1fr));
   column-gap: 2rem;
  }

  h3 {
   position: absolute;
   top: -1em;
   left: 50%;
   transform: translateX(-50%);
   font-size: 1.875rem;
   line-height: 0.9;

   &::before {
    content: '\\\\';
    margin-right: 0.5em;
   }

   &::after {
    content: '//';
    margin-left: 0.5em;
   }
  }

  small {
   grid-column: 1 / 3;
   justify-self: end;
  }
 }
}

.rv-page-reservation {
 background-color: #F5D774;
 padding-block: 60px;
 padding-inline:1em;
 text-align: center;
 transition: 0.15s cubic-bezier(0.693, -0.063, 0.846, 0.928);
 background-image: url(../images/remodel-reservetionimage.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: contain;
 p {
  line-height: 1.8;
  padding-bottom: 0.9rem;
 }
 p[class] a {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5em;
 }

 .rv-reserve-btn {
  background-color: #fff;
  border-radius: 100px;
  padding-block: clamp(1em, -0.333rem + 2.67vw, 1.5em);
  max-width: clamp(18.75rem, -111.25rem + 260vw, 67.5rem);
  margin-inline: auto;
  margin-block-start: 1rem;
  box-shadow: 4px 8px 0 0 #CEAC3D;
  transition: transform 0.08s cubic-bezier(0.25, 0, 0.5, 1), box-shadow 0.08s cubic-bezier(0.25, 0, 0.5, 1);

  a {
   color: #9A7705;
   font-size: clamp(1rem, -1.333rem + 4.67vw, 1.875rem);
   font-weight: bold;
  }

  &:hover {
   transform: translateY(7px);
   box-shadow: 2px 1px 0 0 #a6892a;
  }
 }

 .check-other-model {
  margin-block-start: 40px;
  width: fit-content;
  margin-inline: auto;

  a {
   color: #fff;
   background-color: #9A7705;
   border-radius: 6em;
   font-size: clamp(0.625rem, -0.208rem + 1.67vw, 0.938rem);
   font-weight: 600;
   line-height: 4;
   padding-inline: 3em;
   transition: 0.09s cubic-bezier(.17,-0.18,.92,1.6);

   &:hover {
    transform: translateX(7px);
    color: #ffffffaa;
   }
  }

  svg {
   width: 12px;
   height: 12px;
  }
 }

}

.remodel-explanation {
 margin-block: clamp(3.75rem, 0.75rem + 8vw, 6.25rem);
 padding-inline: 1em;
 display: grid;
 row-gap: 4.5em;

 .lead-copy {
  color: #333;
  font-size: clamp(1.25rem, 1.071rem + 0.48vw, 1.5rem);
  line-height: 1.6;
  margin-block: 0;
 }

 > div {
  display: grid;
  justify-content: center;
 }

 p {
  padding-block-end: 0;
 }

 .remodel-explanation_ex {
  .view-point {
   p {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    line-height: 3;
    font-size: 1.25rem;
   }

   li {
    border-bottom: none;
    font-size: 0.9375rem;
    text-indent: -1em;
    margin-inline-start: 1em;

    &::before {
     content: "";
     width: 20px;
     height: 20px;
     background-image: url(../images/remode-li-icn.svg);
     background-repeat: no-repeat;
     background-position: left center;
     background-size: contain;
     display: inline-block;
     margin-right: 0.5em;
     vertical-align: middle;
    }
   }
  }
 }
}

.upword {
 font-size: clamp(1.5rem, 0.786rem + 1.9vw, 2.5rem);
 color: #00470D;
}

[class*="remodel-performance"] {
 p{text-align: center;}
 h2 {
  width: 100%;
  border-bottom: none;
  color: #333;
  font-size: clamp(1.625rem, 1.325rem + 0.8vw, 1.875rem);
  display: flex;
  align-items: center;
  gap: 1em;

  &::before,
  &::after {
   content: "";
   flex: 1;
   border-top: 1px solid #333;
   border-bottom: 1px solid #333;
   height: 4px;
  }
 }
  > div {
   margin-block: 56px;
   display: grid;
   max-width: 890px;
   grid-template-columns: repeat(2, minmax(160px, 1fr));
   gap: 2.5em 1.5em;
   margin-inline: auto;
   a{pointer-events: none;}
   figure {
    margin: 0;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
   }
   }
}
.remodel-performance-heat{
 > div {
   figure {
    img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
    }
   }
  }
}

/* ===== オリジナルライトボックス ===== */
#rv-lightbox {
 display: none;

 &.is-open {
  display: block;
 }

 .rv-lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9000;
 }

 .rv-lb-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 9001;
  max-width: 90vw;
  max-height: 90vh;
  padding: 10px;
  background-color: #fff;
 }

 &.is-open .rv-lb-content {
  animation: rv-lb-zoom 1.2s ease forwards;
 }

 &.is-closing .rv-lb-content {
  animation: rv-lb-zoom-out 0.9s ease forwards;
 }

 .rv-lb-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
 }

 .rv-lb-close {
  position: absolute;
  top: -8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: 0.3s ease-in;
  color:#5D737F;
  &:hover {
   background: #fff;
  }
 }
}
.sp-none {display: none;}
.pc-none {display: none;}
@keyframes rv-lb-zoom {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}

@keyframes rv-lb-zoom-out {
 from {
  opacity: 1;
 }

 to {
  opacity: 0;
 }
}


/* 販売価格 */
.rv-price-info,.rv-modelhouse-info{
 display: grid;
 padding-block: 50px 40px;
 border-top: 1px solid #ccc;
 place-content: center;
 justify-items: center;
 gap:1em;

.shippori-m-r.arrowb{
  font-size: clamp(1.625rem, 1.325rem + 0.8vw, 1.875rem);
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  margin-block: 0 0.75em;
  &::after{
    content: "";
    width: 30px;
    height: 15px;
    display: block;
    background-image: url(../images/arrow-bcolor.svg);
    background-repeat: no-repeat;
    margin-inline: auto;
  }
}
}

/* モデルハウス概要 */
.rv-modelhouse-info{
display: block;
padding-block-end: 0;
}
/* テーブル内の画像 */
.rv-page table {
  margin-block-end: 0;

 th{
  background-color: #E8EFF3;
  text-align: center;
  align-content: start;
  border-left: none;
 }

 tr,td{
  padding-inline:1.5em;
  padding-block: 1em;
  border-left: none;
 }
 div {
  display: flex;
  gap: 1rem;
  width: fit-content;
  align-items: center;
  small {grid-column: auto;}
  iframe,img {max-width: 100%;}
 }
}

@media(1024px > width) {
 .remodel-explanation {
    > div {
      width:clamp(21.25rem, 4.638rem + 70.88vw, 50rem);
      justify-content:unset;
      margin-inline: auto;
      row-gap:2em;
    }
    .remodel-explanation_ex{
      img{width:100%; max-width: unset;height: auto; display:block}
    }
    h3{text-align: center;}
  }
 }

@media(1024px <=width) {
 .remodel-explanation {
  padding-inline: unset;
  > div {
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(2, auto);
   justify-content: space-between;
   gap: 2em;
   max-width: unset;

   > div {
    max-width: 30em;
   }

   &.remodel-explanation_ex:nth-child(1) {
    h3 {
     grid-column: 1/2;
     grid-row: 1/2;
    }

    div {
     grid-column: 1/2;
     grid-row: 2/3;
    }

    figure {
     grid-column: 2/3;
     grid-row: 1/3;
    }
   }

   &.remodel-explanation_ex:nth-child(2) {
    h3 {
     grid-column: 2/3;
     grid-row: 1/2;
    }

    .view-point {
     grid-column: 2/3;
     grid-row: 2/3;
    }

    figure {
     grid-column: 1/2;
     grid-row: 1/3;
    }
   }

   &.remodel-explanation_img {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: unset;
    align-items: center;
    column-gap: 0.75em;

    figure {
     padding: 1rem 1.25rem;
     border: 1px solid #D4D4D4;
     display: grid;
     place-content: center;

     img {
      display: block;
     }
    }
   }
  }
 }
}

@media(1080px <=width) {
 .sp-none {
  display: block;
 }
 .pc-none {
  display: none;
 }

 img.sp-none {
  width: 100%;
  max-width: 890px;
  margin-inline: auto;
  margin-block: 56px;
 }
 section.inner-rv.remodel-performance-earthquake .pc-none{
  display: none;
 }
}

@media (1080px > width) {
 .sp-none {display: none;}
 .pc-none {display: block;}
 .rv-hero-tips {
  max-width:calc(100% - 2em);
  margin-inline: auto;
  flex-direction: column;
  p.shippori-m-s{
  margin-inline: auto;
  background-size: contain;
  padding-block: 4em 1em;
  background-position: center top;
  }
  ul{
    padding-inline-start: 0.5em;
    li{line-height: 1.6;}
  }
  &.bonus {
    max-width:unset;
    margin-inline: unset;
    h3{font-size:clamp(1.5rem, 1.05rem + 1.2vw, 1.875rem);width: 100%;text-align: center;}
   .inner-rv > div {
    grid-template-columns: 1fr;
    gap:2em;
    padding-inline:1.5em;
    small {grid-column: unset;grid-row: unset;display: block;}
   }
   &::before{
    background-size: 75%;
   }
  }
 }
 .inner-rv:has(>table) {
  padding-inline: 2rem;
 }
 .rv-page table div {
  iframe,img {max-width: 45%;}
 }
.remodel-explanation {
  row-gap: 3.5em;
    .remodel-explanation_img{
     width: fit-content;
     margin-inline:auto;
     gap:1em;
     >div{
      justify-self: center;
      place-content: center;
     
     svg{
      margin:auto;
      width:clamp(1.3rem, 0.76rem + 1.44vw, 1.75rem);
      height: auto;
     transform-origin: center center;
     transform: rotate(90deg);
     align-content: center;
     line-height: 1;
     }
    }
    }
}
  [class*="remodel-performance"] {
  padding-inline: 1rem;
  > div {
   a {
    display: block;
    width: 100%;
    position: relative;
    pointer-events: auto;

    &::after {
     position: absolute;
     background-image: url(../images/remode-search-icn.svg);
     top: 50%;
     left: 50%;
     width: 3rem;
     height: 3rem;
     transform: translate(-50%, -50%);
     background-repeat: no-repeat;
     background-position: center;
     content: "";
     transition: 0.3s ease;
     background-color: #ffffffab;
     border-radius: 50%;
    }
    &:hover::after {
     width: 3.5rem;
     height: 3.5rem;
     transition: 0.3s ease;
    }
   }
   figure {
    img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
    }
   }
  }
 }

 .inner-rv.remodel-performance-earthquake {
  div.pc-none figure:nth-last-child(1) {
   img {object-fit: contain;margin-inline: auto 0;}
  }
 }
}

@media(1100px > width){
  .remodel-explanation_ex{margin-inline: 1em;}
.rv-page table div iframe{ height: auto; aspect-ratio: 417 / 262;}

}
@media (645px > width) {
  table.sptbl, table.sptbl th, table.sptbl td{border:none;}
  table.sptbl td{background-color: #fbfbfb;}
  table.sptbl th,table.sptbl td{padding-inline-start: 1em;text-align: start;}
  .rv-page table div{flex-direction: column;margin-inline: auto;
    iframe,img{max-width: unset;width:100%;}
  }
  .rv-price-info, .rv-modelhouse-info {
    .shippori-m-r.arrowb::after{background-size: contain;width:clamp(1.625rem, 1.325rem + 0.8vw, 1.875rem)}
   p {margin-inline: 1rem;}
   p:has(small) {max-width: 19.5em;text-align: center;}
  }
}
@media (400px > width) {
  .rv-page-reservation {p br{ display:none;}}
  .rv-hero-tips {margin-inline: 1em;}
   .remodel-explanation {
    > div {
      width:100%;

      li br{display: none;}
    }
  }
  .rv-price-info, .rv-modelhouse-info {
    .shippori-m-r.arrowb span {font-size:20px}
  }
}