@-webkit-keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/********************************/
/*
リセット
/***********************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a, a:hover {
  text-decoration: none; }

a > img, nav > img, li > img, div > img {
  width: 100%;
  height: auto; }

a {
  cursor: pointer;
  text-decoration: none;
  color: #000; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0; }

@media screen and (min-width: 769px) {
  .sp_only {
    display: none !important; } }
.clearfix {
      zoom: 1;
}

.clearfix:after {
  content: ".";
  height: 0;
  font-size: 0;
}

body {
  position: absolute;
  background-color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: "ヒラギノ角ゴシック Pro W3",Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,"MS Pゴシック",MS PGothic,sans-serif;
  overflow: visible; }

body * {
  box-sizing: border-box; }

div, h1, h2, h3, h4, h5, ul, ol, li, dl, dt, dd {
  position: relative; }

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  line-height: 1; }

p, div, span {
  margin: 0;
  padding: 0;
  line-height: 1.5; }

ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1; }

img,
a img {
  border: none;
  display: inline-block; }

img {
  width: 100%;
  height: auto; }

h1, h2 {
  font-weight: bold; }

@media screen and (max-width: 768px) {
  
  .pc_only {
    display: none !important; }

  .sp_only {
    display: block !important; } 
}
/********************************/

body {
  margin: 0;
  padding: 0;
  font-size:16px;
 /*  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden; */
}

@media screen and (max-width:1200px){
  body {
    font-size:1.3vw;
  }

}


@media screen and (min-width: 769px) {
  body {
    /* font-size: 16px; 
    font-size:1.3vw; */
    } 
  }

@media screen and (max-width: 768px) {
  body {
    font-size: 4vw; 
    } 
  }

body.noscroll {
  height: 100%;
  overflow: hidden; 
}




.wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  max-width:1200px;
  margin:0 auto;
}


.guide-h,
.guide-v{
  position: absolute;
   top: 0;
   left: 0;
   pointer-events:none;
}
.guide-h{
  height: 50%;
  width: 100%;
  /* border-bottom: solid 1px red; */

}

.guide-v{
  height:100%;
  width: 50%;
  /* border-right: solid 1px red; */
}

header{
  position:fixed;
  top:0;left:0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.header__inner.open{
  height:100%;
  pointer-events:auto;
}

.header__inner{
  position:absolute;
  top:0;left:0;
  width:100%;
  left:50%;
  transform:translate(-50%,0%);
  transition:height 0.5s ease-out;
  overflow:hidden;
  height:0;
  background-color: rgba(255,255,255,0.95);
  pointer-events:none;
  overflow-y: auto;
  display: flex;
  padding: 0 calc(200/750/2 * 100%);
  justify-content: space-between;
}

.header__map-list{
  width: calc(300/650 * 100%);
  /* margin:0 auto; */
  position: relative;
  font-size: 0.8em;
  height: 158vw;
  
  font-weight:bold;

  display: grid;
  /* row-gap: 0.5em; */
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: repeat(19,1fr);
  padding: 5em 0;
}

.header__map-title{
  aspect-ratio: 6/1;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  background-color: #fff;
  border: solid 1px #000;
}

header .header__map-btn{
  position:relative;
  /* width: 47%; */
  /* margin-bottom:1em; */
  height: auto;
}

header .header__map-btn img{
  vertical-align: bottom;
}

.header__map-kaijo{
  grid-row-start: -3;
}

.header__map-ginso{
  grid-row-start: -2;
}

/* header .header__map-btn.left{
  grid-column-start: 1;
}

header .header__map-btn.right{
  grid-column-start: 2;
} */

.header-right {
  top: 1.25em;
  width: 2.25em;
  position: absolute;
  right: 0vw;  
  margin-right: 5%;
  pointer-events:auto;
}

.header-right__btn{
  width:100%;
  height: calc(3.6em + 2px);
}

.header-right__btn > div {
  width: 100%;
  height: 2px;
  background-color: #585858;
  position: absolute;
  top: 0;
  transition:transform 0.5s ease-in-out;
}

.header-right__btn > div:nth-child(1) {
  /* top: -2px; */
}

.header-right__btn > div:nth-child(2) {
  top: 0.7em;
  transform-origin: center;
  transition:transform 0.3s ease-in-out,opacity 0.3s ease-out;
}

.header-right__btn > div:nth-child(3) {
  /* top: 1.6em; */
  transform: translateY(1.4em)
}

.header-right__btn.open > div:nth-child(1) {
   /*  top: 45%;
    transform: rotate(150deg); */
    transform: translateY(0.81em) rotate(140deg);
}

.header-right__btn.open > div:nth-child(2) {
  transform:translateY(0.1em) scaleX(0);
  opacity:0;
  
}

.header-right__btn.open > div:nth-child(3) {
  /* top: 45%;
  transform: rotate(-150deg); */
  transform: translateY(0.81em) rotate(-140deg);
}






.header__maker{
  display:block;
  line-height:1.2;
  display: none;
}

.header__number{
  line-height:1.2;
  width: 1.75em;
  display: inline-block;
}

.header__model{
  display:block;
  padding-left: 1.75em;
  display: none;
}

.main__title-area{
  position:relative;
  margin-bottom: 5em;
}

/* .main__title-area h1{
  position:absolute;
  left:58.33%;
  top:10%;
  width:37.5%;
} */

.main__copy{
  font-size: 2.2em;
    /* font-weight: bold; */
    text-align: center;
    padding: 0.75em;
    /* border-bottom: solid 2px; */
    /* margin-bottom: 7%; */
}

.main__discription-area{
  margin-bottom: 7%;
}


@media screen and (max-width: 768px){
  /* .main__title-area h1{
    width:60%;
    left:50%;
    transform:translateX(-50%);
    top:11.1%;
    margin:0 auto;
  } */
  .main__title-area{
  margin-bottom: 0;
}

  .main__copy{
    font-size: 1.3em;
    white-space: nowrap;
    padding-bottom: 0.5em;
  }

  .tsume-l{
    margin-left:-0.3em;
  }

  .tsume-r{
    margin-right:-0.3em;
  }

  .main__discription-area{

  }

}




.main__map-area{
  width:85.6%;
  margin:0 auto;
  margin-bottom: 7%;
}

.map__btn{
  /* border:solid red; */
  position:absolute;
  width:7.88%;
  height:10.15%;
}

.map__btn-normal{
  display:block;
  position:relative;
  transition:opacity 0.3s ease-out;
}

.map__btn-nomovie{
  display:block;
  position:relative;
}

.map__btn-hover{
  display:block;
  position:absolute;
  top:0;left:0;
  opacity:0;
  transition:opacity 0.2s ease-out,transform 0.3s ease-out;
}

.map__btn:hover .map__btn-normal{
  opacity:0;
}

.map__btn:hover .map__btn-hover{
  opacity:1;
  transform:scale(1.1);
}

.map__btn.v{
  width:6.57%;
  height:12.18%;
}

#map1{
  left:3.11%;
  top:1.88%;
}

#map2{
  left:11.51%;
  top:1.88%;
}

#map3{
  left:19.94%;
  top:1.88%;
}

#map4{
  left:28.3%;
  top:1.88%;
}

#map5{
  left:36.54%;
  top:16.6%;
}

#map6{
  left:36.54%;
  top:29.77%;
}

#map7{
  left:36.54%;
  top:42.78%;
}

#map8{
  left:7.05%;
  top:16.2%;
}

#map9{
  left:15.46%;
  top:16.2%;
}

#map10{
  left:7.05%;
  top:27.35%;
}

#map32{
  left:15.46%;
  top:27.35%;
}

#map11{
  left:3.11%;
  top:44.66%;
}

#map12{
  left:11.48%;
  top:44.66%;
}

#map13{
  left:19.8%;
  top:44.66%;
}

#map14{
  left:48.9%;
  top: 42.78%;
}

#map15{
  left:48.9%;
  top: 29.77%;
}

#map31{
  left:48.9%;
  top:16.6%;
}

#map16{
  left:58.51%;
  top: 29.3%;
}

#map17{
  left: 66.93%;
  top: 29.3%;
}

#map18{
  left:75.3%;
  top: 29.3%;
}

#map19{
  left:67.55%;
  top: 52.35%;
}

#map20{
  left:75.0%;
  top: 49.1%;
}

#map21{
  left:67.55%;
  top: 65.6%;
}

#map22{
  left:75.0%;
  top: 62.3%;
}

#map23{
  left:90.66%;
  top: 62.7%;
}

#map24{
  left:90.66%;
  top: 49.8%;
}

#map25{
  left:90.66%;
  top: 36.6%;
}

#map26{
  left:90.66%;
  top: 23.7%;
}

#map27{
  left:77.48%;
  top: 1.88%;
}

#map28{
  left:69.02%;
  top: 1.88%;
}

#map29{
  left:60.52%;
  top:1.88%;
}

#map30{
  left:52.02%;
  top:1.88%;
}

.map__btn.ginso{
  width: 5.35%;
  height: 11.88%;
}

#mapginso{
  left: 2.62%;
  top: 64.4%;
}

.map__btn.kaijo-1{
  width: 6.7%;
  height: 9.54%;
}

#mapkaijo-1{
  left: 28.64%;
  top: 66.9%;
}

.map__btn.kaijo-2{
  width: 7%;
  height: 6.5%;
}

#mapkaijo-2{
  left: 67.4%;
    top: 45%;
}

.map__btn.kaijo-3{
  width: 6.03%;
  height: 6.62%;
}

#mapkaijo-3{
  left: 45.5%;
  top: 1.5%;
}

.reserve-btn{
 
  margin-bottom:7%;
  
  border-bottom:solid 2px;
}

.reserve-btn a{
  display:block;
  width:25%;
  margin:0 auto 7%;
}

.serch__from-map,
.serch__from-list{
  width:47.6%;
  margin: -3.5% auto 2% auto;
}

.serch__from-map img{
  margin-left:5%;
}

.serch__from-list{
  margin: -2.5% auto 4.5% auto;
}

footer{
  max-width:1200px;
  margin:0 auto;

  padding-bottom:1px;
}

.banner_area{
  display:flex;
  justify-content:space-between;
  width:83.3%;
  margin:0 auto 7%;
}

.banner{
  width:30%;
}

.banner:nth-child(3){
  visibility:hidden;
}

.otoiawase{
  width:50%;
  margin:0 auto 7%;

}

.information{
  width:72.3%;
  margin:0 auto 7%;

}

.copyright{
  width:22.3%;
  margin:0 auto 3%;

}


.model-wrap,
.model-wrap2{
  /* display:flex;
  justify-content:space-between;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-auto-rows: minmax(13.3%, auto); */
  width: 83.3%;
  column-gap:4.99%;
 /*  row-gap:13%; */
  margin: 0 auto;
  
}
.model-wrap{
  margin-bottom:5%;
}

.model-wrap2{
  margin-bottom:8%;
}

.model-wrap2 .model-cell__number{
  visibility:hidden;
}

.model-wrap2 .model-cell__maker-name{
  margin-left: -1.4em;
}

.model-wrap2 #ginso .model-cell__maker-name{
  margin-left: -0.4em;
}

.model-wrap2 #ginso .model-cell__house{
  padding-left:0;
}



.model-cell{
  width:100%;
  
  flex-wrap: wrap;
 /*  aspect-ratio: 0.98 / 1;
  aspect-ratio: 1 / 1; */
  overflow: hidden;
  margin-bottom:5%; 
  position:relative;
}

.model-cell__border{
  pointer-events:none;
  position:absolute;
  width:100%;
  height:100%;
  border:solid orange 2px;
  top: 0;
  transition:opacity 0.3s ease-out;
  opacity:0;
}

.model-cell__border.show{
  opacity:1;
}

.model-cell__image img{
  display:block;
}

.model-cell__play-icon{
  position:absolute;
  width:20%;
  display:block;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-event:none;
}

.model-cell__info{
 
  background-size: 100%;
  height:33%;
  color: #000;
  font-weight:bold;
  background-color: #F2F2F3;
}

.model-cell__number{
  background: #000;
  color: #fff;
  /* padding: 0.55em 0.2em; */
  width: 2.75em;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(50/2.75/15.6 * 1em);

}

.model-cell__house{
  /* padding-left:7%; */
}

.model-cell__maker{
  font-size:1.2em;
  display: none;
}

.model-cell__name{
  font-size:0.95em;
  display: none;

}


.model-cell__number.no-number{
  display:none;
}

.model-cell__code{
  display:none;
}

@media screen and (max-width: 768px) {
  .model-cell__number{
    font-size: 0.6em;
  }
}


/************MODAL***************/

.movie-modal{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  visibility:hidden;
  opacity:0;
  transition:opacity 0.6s ease-out;
  pointer-events:none;
  z-index: 200;
}

.movie-modal.show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;

}

.movie-modal.hide{
  visibility:visible;
  pointer-events:none;
  opacity:0;

}

.movie__wrap{
  width:80%;
  left:50%;
  top:50%;
  max-width:805px;
  position:absolute;
  transform:translate(-50%,-50%);
}

.movie iframe{
aspect-ratio: 16 / 9; /* YouTube動画のアスペクト比 */
  width: 100%;
  margin-bottom:1em;
}

.movie__reserve-btn{
  width:40%;
  margin:0 auto;
  border-radius:2.5em;
  color:#fff;
  max-width:300px;


}

.movie__reserve-btn a{
  color:#fff;
  display:block;

  text-align:center;
}

.preloader{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:block;
  max-width:50px;
  width:6.2%;
  pointer-events:none;
  transition:opacity 0.3s ease-out;
}

.preloader.hide{
  opacity:0;
}

.movie__close-btn{
  background:#fff;
  border-radius:1em;
  /* padding: 0.2em; */
  height: 1em;
  width: 1em;
  line-height: 0.85;
  text-align: center;
  position: absolute;
  right: -0.5em;
  top: -0.5em;
  font-size:2em;
}

.model-cell__reserve{
  display:none;
}

@media screen and (max-width: 768px) {

  .model-wrap,
  .model-wrap2{
    width: 87%;
    column-gap:7%;
    grid-template-columns: 1fr 1fr
  }
  .model-wrap{
    margin-bottom: 18%;
  }
  .model-wrap2{
    margin-bottom: 20%;
  }

  .model-cell{
    /* width:48%; */
  }

  .model-cell .model-cell__maker{
    margin-left:-0.5em;
  }

  .model-cell__house {
   /*  padding-left:5%; */
  }

  .model-cell__info {
    font-size: 0.6em;
  }


  .model-wrap2 .model-cell__info {
    font-size: 0.57em;
  }

  .reserve-btn {
      border-bottom: solid 1px;
      padding-bottom: 12%;
      margin-bottom:8%;
  }

  .reserve-btn a{
    width:37.6%;
  }

  .movie__wrap{
    width:94%;
  }

  .movie__reserve-btn{
    width:40%;
  }

  .movie__reserve-btn a{

  }

  .movie img{
    max-width:40px;
    width:10%;

  }
  .movie__close-btn{
    font-size: 1.5em;
    right: -0.25em;
    top: -0.25em;
  }

  .banner_area{
    width:87%;
    flex-wrap: wrap;
  }

  .banner{
   width:100%;
   margin-bottom: 10%;
  }

  .otoiawase {
    width:87%;
  }

  .information{
    width:87%;
  }

  .copyright{
    width:35.7%;
  }

  .serch__from-map{
   /*  display:none; */
   margin-bottom: 6vw;
   width: 60%;
  }

  .serch__from-list{
    margin: 7% auto 5.5% auto;
    width:60%;
  }

  .banner:nth-child(3){
    display:none;
  }

  .main__map-area{
    margin-bottom: 6vw;
    width:87%;
  }
  
  .main__map-area.sp_only .main__map-area1,
  .main__map-area.sp_only .main__map-area2{
   
    position:relative;
  }
  .main__map-area.sp_only .main__map-area1{
    margin-bottom: 4vw;
  }
  

  .main__map-area1 .main__map-area-clip-inner{
    background-color:#fdf8dd;
  }

  .main__map-area2 .main__map-area-clip-inner{
    background-color:#ebf6f5;
  }

  .main__map-area-clip-inner{
    position:relative;
    padding: 14% 0 9%;
    margin-top:-5%;
  }

  .main__map-btn-bar{
    display:block;
    position:relative;
    z-index: 1;

  }

  .map-btn-bar__circle{
    display:block;
    position:absolute;
    width:6.24%;
    right:2.72%;
    top: 26%;
    z-index: 1;
    pointer-events:none;
  }

  .map-btn-bar__circle-close{
    display:block;
    position:relative;
  }

  .map-btn-bar__circle-open{
    display:block;
    position:absolute;
    top:0;
    right:0;
  }
  .map-btn-bar__circle.hidden  .map-btn-bar__circle-open{
    visibility: hidden;
  }

  .map__btn-sp{
    position:absolute;
    width:12.6%;
  }

  .map__btn-sp.v{
    width:10.61%;

  }

  img.map__btn-sp{
    width:100%;
  }

  #sp-map1,
  #sp-map2,
  #sp-map3,
  #sp-map4{
    top:13.2%;
  }

  #sp-map1{
    left:19.53%;
  }

  #sp-map2{
    left:33.07%;
  }

  #sp-map3{
    left:46.46%;
  }

  #sp-map4{
    left:59.7%;
  }

  #sp-map8,
  #sp-map9{
    top:26.3%;
  }

  #sp-map8,
  #sp-map10{
    left:26.46%;
  }

  #sp-map10,
  #sp-map32{
    top:35.9%;
  }

  #sp-map9,
  #sp-map32{
    left:39.7%;
  }

  #sp-map11,
  #sp-map12,
  #sp-map13{
    top:50.4%;
  }

  #sp-map11{
    left:19.53%;
  }

  #sp-map12{
    left:33.07%;

  }

  #sp-map13{
    left:46.46%;
  }


  #sp-map5{
    top:26.4%;
  }
  #sp-map6{
    top:37.67%;
  }
  #sp-map7{
    top:48.9%;

  }
  #sp-map5,
  #sp-map6,
  #sp-map7{
    left:72.9%;
  }

  #sp-map27,
  #sp-map28,
  #sp-map29,
  #sp-map30{
    top:14.3%;
  }

  #sp-map30{
    left:17.84%;
  }

  #sp-map29{
    left:31.23%;
  }

  #sp-map28{
    left:44.61%;
  }

  #sp-map27{
    left:58.15%;
  }


  #sp-map14,
  #sp-map15,
  #sp-map31{
    left:12.76%;
  }

  #sp-map14{
    top:49.17%;
  }

  #sp-map15{
    top:37.9%;
  }

  #sp-map31{
    top: 26.7%;
  }

  #sp-map16,
  #sp-map17,
  #sp-map18{
    top:38.5%;
  }

  #sp-map16{
    left:28.15%;
  }

  #sp-map17{
    left:41.38%;
  }

  #sp-map18{
    left:54.61%;
  }

  #sp-map19,
  #sp-map21{
    left:42%;
  }
  #sp-map19{
    top: 58.5%;
  }
  #sp-map21{
    top: 69.77%;
  }
  

  #sp-map20,
  #sp-map22{
    left:53.84%;
  }

  #sp-map20{
    top: 55.5%;
  }
  #sp-map22{
    top: 66.77%;
  }

  #sp-map23,
  #sp-map24,
  #sp-map25,
  #sp-map26{
    left:78.46%;
  }
  #sp-map23{
    top: 67.11%;
  }

  #sp-map24{
    top: 55.84%;
  }

  #sp-map25{
    top: 44.57%;
  }
  #sp-map26{
  top: 33.3%;
  }

  #sp-mapginso{
    width:8.61%;
    left:19.15%;
    top:68.5%;
  }

  #sp-mapkaijo-1{
    width:10.92%;
    left:60.21%;
    top:70.5%;
  }

  #sp-mapkaijo-2{
    width:13.53%;
    left:42%;
    top:52.5%;
  }

  #sp-mapkaijo-3{
    width:9.69%;
    left:7.38%;
    top:14.3%;
  }

  .main__map-area-clip{
    transition: height;
    overflow:hidden;
    transition: height 0.4s ease-out;
    height: 0vw;
    width: 100%;
  }

  .main__map-area-clip.open{
    height: 96vw;
  }
 

}

/*20240930、29旭化成と、3積水ハウス改修*/

/*
.disactive{
  pointer-events:none;
}
*/
/* .disactive .model-cell__play-icon{
  display:none;
} */

/* 20251020　6一条工務店　7旭化成　準備中 */
.disactive{
  pointer-events:none;
}

.disactive .model-cell__play-icon{
  display:none;
}