@charset "UTF-8";
/* CSS Document */

@keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes btnHover {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
@-webkit-keyframes btnHover {
  0% {
    -webkit-transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%); } }
/********************************/
.clear_fix {
  zoom: 1; }

.clear_fix:after {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  line-height: 0;
  visibility: hidden; }

/********************************/
/*
リセット
/***********************/
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 img {
  border: none; }

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; } }
@media screen and (max-width: 768px) {
  body {
    font-size: 3.73vw; }

  .pc_only {
    display: none !important; } }
.clearfix:after {
  font-size: 0; }

.clearfix {
  zoom: 1; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

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; }

@media screen and (max-width: 768px) {
  body {
    font-size: 3.73vw; } }
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; }

.lato {
  font-family: 'Lato', sans-serif; }

#wrapper {
  position: relative;
  width: 100%;
  height: auto; }

@media screen and (max-width: 768px) {
  #wrapper {
    min-width: 100%;
    overflow: hidden; } }
.sp {
  display: none !important; }

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

  .sp {
    display: block !important; } }
@keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes btnHover {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
@-webkit-keyframes btnHover {
  0% {
    -webkit-transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%); } }
/********************************/
.clear_fix {
  zoom: 1; }

.clear_fix:after {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  line-height: 0;
  visibility: hidden; }

body{
	color:#717071;
    padding: 0;
  margin: 0;
  line-height: 1.35;
}

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

.wrapper{
    position: relative;
    overflow: hidden;
}

header{
    width: 100%;
  height: 80px;
  background-color: #fff;
  position: fixed;
   left: 0; top: 0;
    z-index: 10;
}

.header__link:first-of-type{
  cursor: auto;
}

.header__site-logo{
  width: 32.33vw;
  max-width: 388px;
  position: absolute;
  top: 50%;
  left: 1.3125em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.header__matching{
  width: 266px;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
}

.header__matching.rev{
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
}

 .header__link.hover:hover{
  opacity: 1;
}

.main{
    position: relative;
    width: 100%;
    height: 53.875em;
    overflow: hidden;
    padding-top: 80px;
}

.main-logo{
  pointer-events: none;
}

@media screen and (max-width: 1080px) {
    .main{
        height: 73.7vw;
    }
}

.main-logo{
    width: 52.5%;
    max-width: 630px;
    position: absolute;
    left: 50%;
    top: 52.4%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  
}

.main-text{
    margin-bottom: 0;
    padding-top: 1.75em;
    padding-bottom: 4.75em;
    border-bottom: .0625em solid #717071;
}

.main-text>div{
    width: 83.33vw;
    max-width: 1000px;
    margin: 0 auto;
}

.main ul.slide{
    width: 100%;
    height:100%;
}

.main ul.slide li{
    width: 100%;
    height: 46.25em;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    outline: none;
}

.main ul.slide li.slide1{
    background-image: url(../img/main-list-item-1.jpg);
}

.main ul.slide li.slide2{
    background-image: url(../img/main-list-item-2.jpg);
}

.main ul.slide li.slide3{
    background-image: url(../img/main-list-item-3.jpg);
}

.main ul.slide li.slide4{
    background-image: url(../img/main-list-item-4.jpg);
}

.main ul.slide li.slide5{
    background-image: url(../img/main-list-item-5.jpg);
}

.main ul.slide li.slide6{
    background-image: url(../img/main-list-item-6.jpg);
}


.main ul.slide .slick-dots{
    display: inline-block;
    margin: 0 auto;
    margin-top: 1.25em;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.main ul.slide .slick-dots li{
    float: none;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 20px;
    background: none;
}

.main ul.slide .slick-dots li:last-child{
    margin-right: 0;
}

.slick-dots button{
    width: 13px;
    height: 13px;
    border-radius: 13px;
    position: relative;
    background-color: #ddd6d3;
    color: transparent;
    cursor: pointer;
    outline: none;
}

.slick-dots .slick-active button{
    background-color: #0080cb;
}

.slick-dots button:before{
    content: " ";
    display: block;
}

.slick-arrow{
    display: none !important;
}

.fixed-btn{
    display: block;
    width: 8.3vw;
    max-width: 100px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.box1{
    position: relative;
    margin: 0 auto;
    border-bottom: 1px solid #717071;
}

.box1 .inner{
    padding-top: 3.3125em;
    padding-bottom: 3.0625em;
    position: relative;
}

.box1 .inner .bg{
    background-color: #fcfcfc;
    width: 100%;
    height: calc(100% + 3em);
    position: absolute;
    top: -1.5em;
    z-index: -1;
}

.box1 h2{
    font-size: 1.625em;
    line-height: 1.16;
    color: #717071;
    font-weight: normal;
    text-align: center;
    margin-bottom: 2.475em;
}

.box1 ul{
    display: flex;
	flex-wrap: wrap;
    width: 80.83%;
    max-width: 970px;
    margin: 0 auto;
}

.box1 li{
    float: left;
    width: calc(25% - 3px);
    padding-right: 3px;
    position: relative;
}

.box1 li:last-child{
    padding-right: 0;
}

.box1 li:before{
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;top: 0;
    background-image: url(../img/box1-dot.png);
    background-repeat: no-repeat;
    background-position: right 3.4em;
    background-size: 4px auto;
}

.box1 li:last-child:before{
    background: none;
}

.box2{
    position: relative;
    background-color: #fffbf8;
    padding: 0 0 3.6875em;
    margin-top: 6.75em;
}

.box2 h2 {
    font-size: 1.625em;
    line-height: 1.16;
    color: #717071;
    font-weight: normal;
    text-align: center;
    top: -0.6em;
    margin-bottom: 3.476em;
}

.model__img{
  width: 78.75%;
  max-width: 945px;
  height: 22.75em;
  margin: 0 auto;
  background-image: url(../img/modelground2.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}


/*準備中のダミー*/
.model__link--tama{
  width: 15.91vw;
  max-width:  190px;
  position: absolute;
  top: -16.9%;
  left: 65.6%;
  z-index: 2;
pointer-events: none;
}
/*
.model__link--tama{
  width: 13.91vw;
  max-width: 167px;
  position: absolute;
  top: -25.9%;
  left: 8.6%;
  z-index: 2;
}
*/



.model__link--withearth{
  width: 15.16vw;
  max-width: 182px;
  position: absolute;
  top: 6.8%;
  left: 2.3%;
  z-index: 2;
}

.model__link--hebel{
  width: 13.75vw;
  max-width: 165px;
  position: absolute;
  top: 43.2%;
  left: 1.4%;
  z-index: 1;
}

.model__link--sumitomof{
  width: 13.25vw;
  max-width: 159px;
  position: absolute;
  top: -18%;
  left: 29.9%;
  z-index: 1;
}

.model__link--ai{
  width: 11.75vw;
  max-width: 141px;
  position: absolute;
  top: 14.0%;
  left: 31.9%;
  z-index: 1;
}

.model__link--misawa{
  width: 14.7vw;
  max-width: 175px;
  position: absolute;
  top: 41.0%;
  left: 30%;
  z-index: 1;
}

.model__link--sekisuihi{
  width: 12.33vw;
  max-width: 150px;
  position: absolute;
  top: -19.2%;
  left: 50%;
  z-index: 1;
}

.model__link--sumitomor{
  width: 12.16vw;
  max-width: 146px;
  position: absolute;
  top: 31.4%;
  left: 47%;
  z-index: 1;
  pointer-events: none;
}

.model__link--panasonic{
  width: 17.5vw;
  max-width: 210px;
  position: absolute;
  top: 63.4%;
  left: 45.9%;
  z-index: 1;
}

.model__link--nihon{
  width: 14.66vw;
  max-width: 176px;
  position: absolute;
  top: 14.9%;
  left: 72.1%;
  z-index: 1;
}

.model__link--ichijo{
  width: 13.66vw;
  max-width: 164px;
  position: absolute;
  top: 41.7%;
  left: 75.3%;
  z-index: 1;
}

.model__link--sekisuiho{
  width: 12.5vw;
  max-width: 150px;
  position: absolute;
  top: 69.9%;
  left: 81.6%;
  z-index: 1;
}

.circle-box{
	width:100%;
	height: 20em;
	position: relative;
}

.circle.show{
	visibility:visible;
}

.circle{
	max-width:50px;
	max-height:50px;
	width:13.33vw;
	height:13.33vw;
	position: absolute;
	transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
	cursor: pointer;
	visibility: hidden;
  z-index: 0;
    pointer-events: none;
}

.circle-1{
  top:-6.2%;
	left:16%;
  z-index: 3;
	display: none;
}

.circle-2{
  top:25%;
	left:11.7%;
  z-index: 3;
}

.circle-3{
  top:58.8%;
	left:10%;
  z-index: 3;
}

.circle-4{
  top:-9.2%;
	left:39%;
  z-index: 3;
}

.circle-5{
  top:61.5%;
	left:39.8%;
  z-index: 3;
}

.circle-6{
  top:-10.2%;
	left:57.5%;
  z-index: 3;
}

.circle-7{
  top:42.5%;
	left:55.2%;
  z-index: 3;
  display: none;
}

.circle-8{
  top:85.2%;
	left:56.2%;
  z-index: 3;
}

.circle-9{
  top:27.8%;
	left:81%;
  z-index: 3;
}

.circle-10{
  top:58%;
	left:84.8%;
  z-index: 3;
}

.circle-11{
  top:95%;
	left:89.8%;
  z-index: 3;
}

.circle-12{
  top:23.5%;
	left:39.8%;
  z-index: 3;
}

.box3{
    width: 83.33%;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 4.625em;
/*    padding-bottom: 7.375em;*/
  　padding-bottom: 4.0625em;
}

.box3 .top-pic-pc{
	margin: 0 auto 60px auto;
    width: 55vw;
	max-width: 666px;
}

.box3 ul{
    display: flex;
	flex-wrap: wrap;
}

.box3 li{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
    position: relative;
    overflow: hidden;
}

.box3 ul:nth-of-type(2) li:nth-child(1) a{
  pointer-events: none;
}

/*建築中時タマホームは飛べないようにする*/
.box3 ul:nth-of-type(2) li:nth-child(4) a{
  pointer-events: none;
}

.box3 ul:nth-of-type(2) li:nth-child(1) .btn{
  display: none;
}

.box3 li .btn{
    position: absolute;
    max-width: 172px;
    width: 68.8%;
    right: 14.5%;
    top: 64%;
}

.box3 li .btn .rev{
    position: relative;
}

.box3 li .btn .normal{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.box3 li .pic{
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    z-index: -1;
}

.box3 li img{
    width: 100%;
    height: auto;
    display: block;
}

.footer__place-box{
    width: 83.33vw;
    max-width: 1000px;
    margin: 0 auto;
}

.footer__gotop{
  width: 43.33vw;
  max-width: 52px;
  height: 43.333vw;
  max-height: 52px;
  margin: 1.375em auto 1.125em;
}

.copyright{
  font-size:.875em;
  text-align: center;
  margin-bottom: 1.785em;
}
.copyright span{
  font-size: 1.3em;
  font-weight: bold;
  vertical-align: middle;
}

.sansaku-box{
  position: absolute;
  top:0;left:0;
  width: 100%;height: 100%;
  z-index: 2;
  pointer-events: none;
}

.sansaku-box__circle {
    max-width: 49px;
    width: 4.08vw;
    position: absolute;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    cursor: pointer;
    pointer-events:auto;
}



.sansaku-box__circle img:first-child{
  position: relative;
  
}

@-webkit-keyframes yoyo{
  0%{-webkit-transform:translateY(0%);}
  50%{-webkit-transform:translateY(-10%);}
 100%{-webkit-transform:translateY(0%);}
}

@keyframes yoyo{
  0%{transform:translateY(0%);}
  50%{transform:translateY(-10%);}
  100%{transform:translateY(0%);}
}

.sansaku-box__circle img:last-child{
  position: absolute;
  top:0;
  left:0;
}

.sansaku-box__circle-1{
    left: 60.2%;
    top: 84.3%;
}

 /*20230831セキスイハイム不活化*/
 /* .box3 ul:nth-child(4) li:nth-child(2) .btn{
  display:none;
}

.box3 ul:nth-child(4) li:nth-child(2) a{
  pointer-events: none;
} */


@media screen and (min-width: 769px){

    .header__link:hover .header__matching.rev{
        opacity: 1;
    }

    .box3 li:hover .pic{
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    /*20230831セキスイハイム不活化*/
    /* .box3 ul:nth-child(4) li:nth-child(2):hover .pic{
      -webkit-transform: none;
        transform: none;
    } */

    .box3 li .btn:hover .normal{
        opacity: 0;
    }

    .model__btn--go:hover img.rev{
        opacity: 1;
    }
}

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

    header{
   height: 17.4vw;
  }

  .header__site-logo{
    width: 49.84%;
    max-width: inherit;
    left: 2.32%;
    top: 2.24vw;
    -webkit-transform: none;
    transform: none;
  }

  .header__matching{
      width: auto;
    height: 100%;
  }

    .fixed-btn{
        width: 14.17%;
    }

    .main{
        height: 85vw;
    padding-top: 17.4vw;
    margin-bottom: 8.1vw;
    }

    .main-logo{
        width: 74.66%;
        top: 56.3%;
    }
  
  .main ul.slide li{
    height: 46.875em;
  }

    .main ul.slide .slick-dots{
        margin-top: 2.93vw;
    }

    .main ul.slide .slick-dots li{
        width: 2.13vw;
        height: 2.13vw;
        margin-right: 3.2vw;
    }

    .slick-dots button{
        width: 100%;
        height: 100%;
    }

    .main-text{
        width: 100%;
        margin: 0 auto;
        padding: 10.86vw 5.33vw 10.76vw;
    }

    .main-text>div{
        width: 100%;
    }

    .box1{
        border: none;
    }

    .box1 .main-title{
        width: 89.33%;
        margin: 0 auto;
    }

    .box1 .inner{
        padding-top: 7.64vw;
        border-bottom: .0625em solid #717071;
    }

    .box1 .inner .bg{
        top: 0vw;
        height: calc(100% + 4vw);
    }

    .box1 h2{
        font-size: 5.6vw;
        line-height: 1.22;
        margin-bottom: 6.99vw;
    }

    .box1 ul{
        width: 100%;
        padding: 0 5.3%;
        box-sizing: border-box;
    }

    .box1 li{
        float: none;
        width: 100%;
        padding-right: 0;
        margin-bottom: 5.63vw;
    }
    .box1 li:last-child{
      margin-bottom: 0;
    }

    .box1 li:before{
        background:none;
    }

    .box2{
        padding: 20.26vw 0 14.33vw;
        margin-bottom: 10.8vw;
        margin-top: 17.06vw;
    }

    .box2 h2{
        font-size: 5.8vw;
        line-height: 1.22;
        margin-bottom: -15vw;
        top: -24vw;
    }

    .model__img{
        width: 89.33%;
        height: 53.156vw;
        margin: 0 auto;
        background-image: url(../img/modelground2-sp.png);
        background-size: contain;
    }

/*	元のタマホーム
    .model__link--tama{
        width: 19.66vw;
        max-width: inherit;
        top: -9.7%;
        left: -1%;
    }
*/
	
/*	準備中のダミー*/
	    .model__link--tama{
        width: 18vw;
        max-width: inherit;
        top: -2.7%;
        left: 81%;
		pointer-events: none;
    }

    .model__link--withearth{
        width: 26.93vw;
        max-width: inherit;
        top: 25.7%;
        left: -1.8%;
    }

    .model__link--hebel{
        width: 25.18vw;
        max-width: inherit;
        top: 56.5%;
        left: -1.4%;
    }

    .model__link--sumitomof{
        width: 26.45vw;
        max-width: inherit;
        top: -10.9%;
        left: 25.5%;
    }
	
	.model__link--ai{
        width: 20.00vw;
        max-width: inherit;
        top: 20.9%;
        left: 29.5%;
    }

    .model__link--misawa{
        width: 23vw;
        max-width: inherit;
        top: 50.1%;
        left: 27%;
    }

    .model__link--sekisuihi{
        width: 23.412vw;
        max-width: inherit;
        top: -11.9%;
        left: 55.5%;
    }

    .model__link--sumitomor{
        width: 18.56vw;
        max-width: inherit;
        top: 36.6%;
        left: 50.5%;
    }

    .model__link--panasonic{
        width: 20.9992vw;
        max-width: inherit;
        top: 67.6%;
        left: 49.6%;
    }

    .model__link--nihon{
        width: 24.49vw;
        max-width: inherit;
        top: 21.4%;
        left: 76.3%;
    }

    .model__link--ichijo{
        width: 21.54vw;
        max-width: inherit;
        top: 45.4%;
        left: 79.6%;
    }

    .model__link--sekisuiho{
        width: 20.7vw;
        max-width: inherit;
        top: 71.8%;
        left: 80%;
    }

    .cls-1{

    }

    .circle-1{
        top: 13%;
        left: 8.9%;
		display: none;
    }

    .circle-2{
        top: 73%;
        left: 8.7%;
    }

    .circle-3{
        top: 137%;
        left: 9.6%;
    }

    .circle-4{
        top: -3%;
        left: 43.9%;
    }

    .circle-5{
        top: 127%;
        left: 39.7%;
    }

    .circle-6{
        top: 0%;
        left: 68.8%;
    }

    .circle-7{
        top: 87%;
        left: 60.4%;
    }

    .circle-8{
        top: 156%;
        left: 61.7%;
    }

    .circle-9{
        top: 61%;
        left: 91.8%;
    }

    .circle-10{
        top: 113%;
        left: 92.6%;
    }

    .circle-11{
        top: 169%;
        left: 92.4%;
    }
	
	.circle-12{
        top:55.5%;
	    left:41.5%;
　　 }

    .model__btns{
        max-width: inherit;
        width: 100%;
        position: absolute;
        bottom: 0vw;
    }

    .model__btn--go{
        max-width: inherit;
    position: relative;
    top: 7.4vw;
    width: 26.12vw;
    visibility: visible;
    }

    .model__btn--use{
        max-width: inherit;
        position: relative;
        left: 20%;
        top: 8vw;
        width: 39vw;
    }

    .box3{
        width: 100%;
        padding: 0 5.3%;
       margin-bottom: 3.73vw;
    }

    .box3 .top-pic{
        margin-bottom: 9.78vw;
        width: 100%;
    }
	
    .box3 li{
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        margin-bottom: 4.26vw;
    }

    .box3 li .btn{
        max-width: inherit;
    right: 12%;
    top: 55%;
    width: 23.64vw;
    }
  
  .box3 ul:nth-child(2) li:nth-of-type(3) .btn{
    top: 61%;
  }
	
  .footer__place-box{
/*    width: 67.01vw;*/
    width: 89.33%;
    margin: 0 auto;
  }
  
  .footer__gotop{
    width: 10.38vw;
    height: 10.38vw;
    margin: 3.82vw auto 7.77vw;
  }
  
  .copyright-box{
    background-color: #0f8985;
  }
  
  .copyright{
    margin-bottom: 0;
    font-size: 2.66vw;
    line-height: 6.8vw;
    font-weight: bold;
    color: #fff;
    transform: scale(.8);
  }

  .sansaku-box__circle{
    width: 6.72%;
  }

  .sansaku-box__circle-1 {
    left: 61%;
    top: 105%;
  }
}