@charset "utf-8";

/*====================================================================================================

  トップ

====================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  main slide
  
----------------------------------------------------------------------------------------------------*/

#mainSlide-wrap {
  width:100%;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  background-color:#464137;
}

.csstransitions #mainSlide.load:before,
.csstransitions #mainSlide.loaded:before {
  width:100%;
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  background-color:#464137;
}
.csstransitions #mainSlide.loaded:before {
  -webkit-animation:mainSlide-in 0.5s forwards ease-out;
  animation:mainSlide-in 0.5s forwards ease-out;
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s;
}

@-webkit-keyframes mainSlide-in {
  100% {
    -webkit-transform:translateX(100%);
  }
}
@keyframes mainSlide-in {
  100% {
    transform:translateX(100%);
  }
}

#mainSlide {
  width:100%;
  height:100%;
  overflow:hidden;
  list-style:none;
}

#mainSlide .slide {
  width:100%;
  position:relative;
  overflow:hidden;
}

#mainSlide .slideTxt {
  height:auto;
  position:absolute;
  left:50%;
  top:50%;
  text-align:left;
  transform:translate(-50%,-55%);
}
  
.csstransitions #mainSlide .slideTxt img {
  opacity:0;
  margin-top:-50px;
  -webkit-transition:margin 0.5s ease-out, opacity 0.3s;
  transition:margin 0.5s ease-out, opacity 0.3s;
  -webkit-transition-delay:0.4s;
  transition-delay:0.4s;
}

.csstransitions #mainSlide.is-aniSet .slideTxt img {
  -webkit-transition-delay:0.8s;
  transition-delay:0.8s;
}

.csstransitions #mainSlide .slide.is-active .slideTxt img {
  opacity:1;
  margin-top:0;
}

#mainSlide .slidePhoto {
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transform-origin:left center;
}

.csstransitions #mainSlide .slide.is-active .slidePhoto {
  -webkit-animation:mainSlide-zoom 40s forwards ease-out;
  animation:mainSlide-zoom 40s forwards ease-out;
}

@-webkit-keyframes mainSlide-zoom {
  100% {
    -webkit-transform:scale(1.3) translate(-50%,-50%) rotate(0.1deg);  /* IEカクつき対処（rotate）*/
  }
}
@keyframes mainSlide-zoom {
  100% {
    transform:scale(1.3) translate(-50%,-50%) rotate(0.1deg);  /* IEカクつき対処（rotate）*/
  }
}

@media print,screen and (min-width:641px) {
  #mainSlide-wrap,
  #mainSlide .slide {
    height:800px;
  }

  #mainSlide .slideTxt {
    width:1180px;
  }
  
  #mainSlide .slidePhoto {
    min-width:2000px;
    min-height:1000px;
  }
}

@media screen and (max-width:640px) {
  #mainSlide-wrap,
  #mainSlide .slide {
    height:-webkit-calc(700 / 640 * 100vw);
    height:calc(700 / 640 * 100vw);
  }

  #mainSlide .slideTxt {
    width:100%;
    padding-left:8%;
    padding-right:8%;
  }

  #mainSlide .slide--01 .slidePhoto {
    margin-left:-25%;
  }

  #mainSlide .slide--03 .slidePhoto {
    margin-left:10%;
  }
  
  #mainSlide .slidePhoto {
    min-width:-webkit-calc(1400 / 640 * 100vw);
    min-width:calc(1400 / 640 * 100vw);
    min-height:-webkit-calc(700 / 640 * 100vw);
    min-height:calc(700 / 640 * 100vw);
  }
}


/*-----------------------------------------------------------------------------------
  dots
-----------------------------------------------------------------------------------*/

.mainSlide__dots {
  position:relative;
  z-index:1;
  text-align:left;
}

.mainSlide__dots .slick-dots {
  margin-left:-1rem;
  margin-right:-1rem;
}

@media print,screen and (min-width:641px) {
  .mainSlide__dots {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    height:80px;
    margin-top:-80px;
  }
}

@media screen and (max-width:640px) {
  .mainSlide__dots {
    width:100%;
    height:4em;
    margin-top:-4em;
  }
}


/*----------------------------------------------------------------------------------------------------

  常設展示場
  
----------------------------------------------------------------------------------------------------*/

.modelHouse {
  width:100%;
}

.modelHouse__hdline,
.modelHouse p {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

.modelHouse__hdline {
  height:100%;
}

.ua-pc .modelHouse {
  -webkit-transition:opacity 0.25s ease;
  transition:opacity 0.25s ease;
}
  
.ua-pc .modelHouse:hover {
  opacity:0.7;
}

@media print,screen and (min-width:641px) {
  .modelHouse {
    height:450px;
    background:url(../image/top/modelHouse_bg.jpg) no-repeat center center;
  }
  
  .modelHouse__hdline {
    background:url(../image/top/modelHouse.png?v=0302) no-repeat center center;
  }
}

@media screen and (max-width:640px) {
  .modelHouse {
    height:-webkit-calc(432 / 640 * 100vw);
    height:calc(432 / 640 * 100vw);
    background:url(../image/top/modelHouse_bg__sp.jpg) no-repeat center center;
    background-size:cover;
  }

  .modelHouse {
    margin-top:6%;
  }
  
  .modelHouse__hdline {
    background:url(../image/top/modelHouse_sp.png?v=0302) no-repeat center center;
    background-size:cover;
  }
}


/*----------------------------------------------------------------------------------------------------

  新着・イベント情報
  
----------------------------------------------------------------------------------------------------*/

.newsList a { display:block; }
.newsList a,
.newsList a:visited,
.newsList a:hover { color:inherit; text-decoration:none; }
.ua-pc .newsList a:hover { text-decoration:underline; }

.newsList {
  list-style:none;
  text-align:center;
}

.newsList li {
  text-align:center;
  position:relative;
  padding-left:1em;
  padding-right:1em;
  line-height:1.4;
}

.newsList .date {
  display:inline-block;
  position:absolute;
  left:0;
  top:0;
  z-index:3;
  background-color:#fff;
  box-shadow:0px 0px 10px 0 rgba(50,45,35, 0.05);
  line-height:1.3;
  padding:0.6em;
}

.newsList .date__week {
  display:block;
  font-size:0.7em;
}

.newsList .photo {
  margin-left:auto;
  margin-right:auto;
  position:relative;
  margin-bottom:1.2em;
}

.newsList .photoItem {
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.newsList .photoItem img {
  width:auto;
  max-width:none;
}

.newsList .photoMask {
  display:block;
  position:relative;
  overflow:hidden;
  z-index:2;
}

.newsList .photoMask:before,
.newsList .photoMask:after {
  content:"";
  width:100%;
  position:absolute;
  top:-1px;
  z-index:2;
  background:url(../image/bg.jpg) no-repeat center top;
}

.newsList .photoMask:before {
  transform:rotate(-25deg);
  transform-origin:left bottom;
  left:-1px;
}

.newsList .photoMask:after {
  transform:rotate(25deg);
  transform-origin:right bottom;
  right:-1px;
}

.newsList .photo:after {
  content:"";
  display:block;
  width:100%;
  position:absolute;
  right:-0.5em;
  bottom:-0.5em;
  background:url(../image/pattern.svg) repeat left top;
  opacity:0.8;
}

.ua-pc.csstransitions .newsList .photoItem img {
  -webkit-transition:transform 0.3s ease-out;
  transition:transform 0.3s ease-out;
}

.ua-pc.csstransitions .newsList a:hover .photoItem img {
  transform:scale(1.08);
}

@media print,screen and (min-width:641px) {
  .news {
    padding-top:80px;
    padding-bottom:90px;
  }
  
  .newsList {
    padding-top:80px;
    padding-bottom:60px;
  }
  
  .newsList li {
    width:295px;
    display:inline-block;
    vertical-align:top;
  }
  
  .newsList .photo {
    width:240px;
  }
  
  .newsList .photoItem img {
    min-width:240px;
  }

  .newsList .photo,
  .newsList .photoMask,
  .newsList .photoItem img {
    height:240px;
  }

  .newsList .photoMask:before,
  .newsList .photoMask:after {
    height:60px;
  }
  
  .newsList .photo:after {
    height:170px;
  }
  
  .news-err {
    padding-top:80px;
    padding-bottom:40px;
    font-size:1.1em;
  }
}

@media screen and (max-width:640px) {
  .news {
    padding-top:12%;
    padding-bottom:12%;
  }
  
  .newsList {
    padding-top:2%;
    padding-bottom:10%;
  }
  
  .newsList li {
    width:50%;
    float:left;
    margin-top:8%;
  }
  
  .newsList li:nth-child(odd) {
    padding-right:2%;
  }
  
  .newsList li:nth-child(even) {
    padding-left:2%;
  }
  
  .newsList .date {
    left:1em;
    font-size:3vw;
  }
  
  .newsList .photo {
    width:-webkit-calc(250 / 640 * 100vw);
    width:calc(250 / 640 * 100vw);
  }
  
  .newsList .photoItem img {
    min-width:-webkit-calc(250 / 640 * 100vw);
    min-width:calc(250 / 640 * 100vw);
  }

  .newsList .photo,
  .newsList .photoMask,
  .newsList .photoItem img {
    height:-webkit-calc(250 / 640 * 100vw);
    height:calc(250 / 640 * 100vw);
  }

  .newsList .photoMask:before,
  .newsList .photoMask:after {
    height:-webkit-calc(60 / 640 * 100vw);
    height:calc(60 / 640 * 100vw);
  }
  
  .newsList .photo:after {
    height:-webkit-calc(170 / 640 * 100vw);
    height:calc(170 / 640 * 100vw);
  }
  
  .news-err {
    padding-top:12%;
    padding-bottom:4%;
  }
}


/*----------------------------------------------------------------------------------------------------

  私たちの家づくり
  
----------------------------------------------------------------------------------------------------*/

.quality {
  background:url(../image/top/quality_bg.jpg) no-repeat center center;
}
    
.quality .l-hdline {
  color:#fff;
}

.quality .l-hdline__en {
  display:inline-block;
  padding-bottom:0.5em;
}
  
.quality__subHdline img {
  vertical-align:top;
}
  
.quality__subHdline .subHdline__item {
  display:inline-block;
  vertical-align:top;
}

.quality__subHdline .subHdline__item--02 {
  position:relative;
}

.quality__subHdline .subHdline__item--02:after {
  content:"";
  width:225px;
  height:55px;
  display:inline-block;
  background:url(../image/top/quality_subHdline__en.png) no-repeat left top;
  background-size:cover;
  position:absolute;
}

.quality__subHdline .em {
  display:inline-block;
  position:relative;
  overflow:hidden;
  border:2px solid #fff;
}

.csstransitions .quality__subHdline .em img {
  opacity:0;
}

.csstransitions .quality__subHdline .em:before {
  background-color:#fff;
  content:"";
  width:102%;
  height:102%;
  position:absolute;
  left:-1%;
  top:-1%;
  right:-1%;
  bottom:-1%;
  transform-origin:right top;
  transform:scale(0,1);
}

.quality__subHdline .em:before {
  -webkit-transition:transform 0.35s ease-out;
  transition:transform 0.35s ease-out;
}
  
.quality__subHdline .em.is-aniSet:before {
  transform-origin:left top;
  transform:scale(1,1);
}
  
.quality__subHdline .em.is-aniEnd:before {
  transform-origin:right top;
  transform:scale(0,1);
}

@media print,screen and (min-width:641px) {
  .quality {
    padding-top:90px;
    padding-bottom:100px;
  }
  
  .quality .l-hdline {
    padding-bottom:70px;
  }
  
  .quality__subHdline {
    padding-bottom:55px;
  }
  
  .quality__subHdline img {
    max-height:55px;
  }

  .quality__subHdline .subHdline__item--02:after {
    right:-60px;
    bottom:-50px;
  }
}

@media screen and (max-width:640px) {
  .quality {
    padding:14% 2% 12% 2%;
    background-size:cover;
  }
  
  .quality__subHdline-lo {
    padding-top:8%;
    padding-bottom:10%;
    overflow:hidden;
  }
  
  .quality__subHdline {
    width:620px;
    height:180px;
  }
  
  .quality__subHdline img {
    max-height:50px;
  }
  
  .quality__subHdline .subHdline__item--01 {
    display:block;
    text-align:left;
    padding-left:1.5em;
  }
  
  .quality__subHdline .subHdline__item--01 {
    padding-bottom:0.75rem;
  }
  .quality__subHdline .subHdline__item--02:after {
    right:-60px;
    bottom:-50px;
  }
}


/*--------------------------------------------------------------------------------
  List
--------------------------------------------------------------------------------*/

.qualityList {
  list-style:none;
}

.qualityList li {
  background-color:#fff;
}

.qualityList li:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.qualityList p {
  line-height:1.6;
  font-size:1.1em;
  font-weight:500;
}

.qualityList .em {
  font-weight:700;
  font-size:1.5em;
}

.qualityList .em:before {
  content:"\A";
  white-space:pre;
}

@media print,screen and (min-width:641px) {
  .qualityList {
    padding-top:60px;
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .qualityList li {
    width:33.333333%;
    float:left;
  }
  
  .qualityList li:nth-child(2) p {
    box-shadow:2px 0 1px -1px #eaeae9 inset, -2px 0 1px -1px #eaeae9 inset;
  }
  
  .qualityList p {
    padding:1em 1em 2em 1em;
  }
}

@media screen and (max-width:640px) {
  .qualityList {
    padding-left:4%;
    padding-right:4%;
  }
  
  .qualityList .photo {
    width:40%;
    float:left;
    overflow:hidden;
    position:relative;
  }
  
  .qualityList .photo img {
    max-width:140%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  
  .qualityList p {
    padding:1.25em 1em 2.25em 1em;
    width:60%;
    float:left;
  }
  
  .qualityList li:nth-child(2) p {
    box-shadow:0 2px 1px -1px #eaeae9 inset, 0 -2px 1px -1px #eaeae9 inset;
  }
}

@media screen and (max-width:500px) {
  .qualityList p {
    padding:1em 1em 2em 1em;
    font-size:1em;
  }
}


/*----------------------------------------------------------------------------------------------------

  ZEH
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .zeh {
    padding-top:80px;
  }
}

@media screen and (max-width:640px) {
  .zeh {
    padding-left: 6%;
    padding-right: 6%;
    padding-top:10%;
  }
}


/*----------------------------------------------------------------------------------------------------

  プラン
  
----------------------------------------------------------------------------------------------------*/

.plan-lo {
  overflow:hidden;
}
  
@media print,screen and (min-width:641px) {
  .plan-lo {
    padding-top:80px;
  }
}

@media screen and (max-width:640px) {
  .plan-lo {
    padding-top:12%;
  }
}


/*----------------------------------------------------------------------------------------------------

  らくまま・リブ
  
----------------------------------------------------------------------------------------------------*/

.planB-lo {
  width:100%;
  position:relative;
  color:#fff;
}

@media print,screen and (min-width:641px) {
  .planB {
    width:1180px;
    margin:0 auto;
    text-align:left;
    position:relative;
    z-index:2;
  }
    
  .planB-lo:before {
    content:"";
    width:-webkit-calc(50% + 190px);
    width:calc(50% + 190px);
    height:100%;
    display:block;
    position:absolute;
    top:0;
    z-index:-1;
  }
  
  .csstransitions .planB-lo:before {
    width:0;
    -webkit-transition:width 0.9s ease-out;
    transition:width 0.9s ease-out;
  }
  
  .csstransitions .planB-lo.is-aniSet:before {
    width:100%;
  }
  
  .planB-photo-wrap {
    width:-webkit-calc(50% + 90px);
    width:calc(50% + 90px);
    height:500px;
    display:block;
    position:absolute;
    z-index:3;
  }
  
  .planB-photo {
    width:100%;
    height:100%;
    display:block;
    position:relative;
    overflow:hidden;
  }
  
  .planB-photo img {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    min-width:875px;
    min-height:500px;
  }
  
  .planB__ct p {
    padding-top:50px;
    padding-bottom:50px;
  }
  
  .csstransitions .planB__ct {
    opacity:0;
    margin-top:-50px;
    -webkit-transition:margin 0.5s ease-out, opacity 0.3s;
    transition:margin 0.5s ease-out, opacity 0.3s;
    -webkit-transition-delay:0.2s;
    transition-delay:0.2s;
  }
  
  .csstransitions .planB__ct.is-aniSet {
    opacity:1;
    margin-top:0;
  }
}

@media screen and (max-width:640px) {
  .planB-photo {
    display:block;
    position:relative;
    height:350px;
    overflow:hidden;
  }
  
  .planB-photo img {
    width:auto;
    max-width:none;
    height:130%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  
  .planB__ct {
    padding-top:10%;
    padding-bottom:12%;
  }
  
  .planB__ct p {
    padding:8% 6%;
  }
}

@media screen and (max-width:500px) {
  .planB-photo {
    height:0;
    padding-top:70%;
  }
}


/*--------------------------------------------------------------------------------
  らくまま
--------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .plan-rakumama .planB-photo-wrap:after {
    content:"";
    display:block;
    background:url(../image/top/rakumama_en.png) no-repeat center top;
    background-size:contain;
    position:absolute;
    z-index:10;
    width:250px;
    height:170px;
    right:-webkit-calc(100% - 680px);
    right:calc(100% - 680px);
    top:-210px;
  }

  .plan-rakumama {
    z-index:2;
    margin-top:60px;
    padding-top:90px;
    min-height:720px;
  }

  .plan-rakumama.planB-lo:before {
    background-color:#ff93ae;
    right:-webkit-calc(50% - 190px);
    right:calc(50% - 190px);
  }

  .plan-rakumama .planB-photo-wrap {
    top:90px;
    left:-webkit-calc(50% - 90px);
    left:calc(50% - 90px);
  }
  
  .plan-rakumama .planB__ct {
    width:420px;
    padding-top:20px;
  }
  
  .plan-rakumama .planB-hdline {
    width:300px;
  }
}

@media screen and (max-width:640px) {
  .plan-rakumama:after {
    content:"";
    display:block;
    background:url(../image/top/rakumama_en.png) no-repeat center top;
    background-size:contain;
    position:absolute;
    z-index:10;
    width:35%;
    height:50%;
    right:4%;
    top:-11%;
    pointer-events:none;
  }
  
  .plan-rakumama {
    background-color:#ff93ae;
    margin-top:12%;
  }
  
  .plan-rakumama .planB-hdline img {
    max-width:280px;
    width:51.875%;
  }
}

@media screen and (max-width:500px) {
  .plan-rakumama:after {
    top:-10%;
  }
}


/*--------------------------------------------------------------------------------
  リブ
--------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .plan-live .planB-photo-wrap:after {
    content:"";
    display:block;
    background:url(../image/top/live_en.png) no-repeat center top;
    background-size:contain;
    position:absolute;
    z-index:10;
    width:120px;
    height:85px;
    left:-webkit-calc(100% - 680px);
    left:calc(100% - 680px);
    top:-50px;
  }

  .plan-live {
    margin-top:-60px;
    padding-top:170px;
    min-height:790px;
  }
  
  .plan-live.planB-lo:before {
    background-color:#f7ae51;
    left:-webkit-calc(50% - 190px);
    left:calc(50% - 190px);
  }
  
  .plan-live .planB-photo-wrap {
    top:170px;
    right:-webkit-calc(50% - 90px);
    right:calc(50% - 90px);
  }
  
  .plan-live .planB__ct {
    width:400px;
    float:right;
    padding-top:40px;
  }
  
  .plan-live .planB-hdline {
    width:260px;
  }
}

@media screen and (max-width:640px) {
  .plan-live:after {
    content:"";
    display:block;
    background:url(../image/top/live_en.png) no-repeat center top;
    background-size:contain;
    position:absolute;
    z-index:10;
    width:19%;
    height:50%;
    left:6%;
    top:-5%;
    pointer-events:none;
  }
  
  .plan-live {
    background-color:#f7ae51;
    margin-top:16%;
  }
  
  .plan-live .planB-hdline img {
    max-width:240px;
    width:45.625%;
  }
}


/*----------------------------------------------------------------------------------------------------

  スマイル・地下倶楽部
  
----------------------------------------------------------------------------------------------------*/

.planS-lo {
  position:relative;
}
  
.planS {
  position:relative;
  z-index:3;
}
  
.planS__ct {
  background-color:#fff;
}

.planS-photo {
  position:relative;
  z-index:2;
}

.planS-photo:after {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  display:block;
  background-position:center center;
  background-repeat:no-repeat;
}

@media print,screen and (min-width:641px) {
  .planS-lo {
    background-color:rgba(70,65,55,0.3);
    margin-top:60px;
    padding-bottom:90px;
  }

  .planS-lo:before {
    content:"";
    width:-webkit-calc(50% + 190px);
    width:calc(50% + 190px);
    height:350px;
    display:block;
    position:absolute;
    right:-webkit-calc(50% - 190px);
    right:calc(50% - 190px);
    top:-120px;
    z-index:1;
    background-color:#6b675f;
  }
  
  .csstransitions .planS-lo:before {
    width:0;
    -webkit-transition:width 0.9s ease-out;
    transition:width 0.9s ease-out;
  }
  
  .csstransitions .planS-lo.is-aniSet:before {
    width:100%;
  }
  
  .planS {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .planS-col {
    width:560px;
  }
  
  .planS-photo:after {
    background-size:50% auto;
  }
  
  .planS__ct {
    padding-top:40px;
    padding-bottom:50px;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
  
  .planS__ct p {
    padding-bottom:3rem;
  }
}

@media screen and (max-width:640px) {
  .planS-lo {
    position:relative;
    padding-top:10%;
    padding-bottom:4%;
  }
  
  .planS-lo:after {
    content:"";
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    top:6%;
    left:0;
    z-index:0;
    background-color:rgba(70,65,55,0.3);
  }

  .planS-col:before {
    content:"";
    width:80%;
    height:0;
    padding-top:80%;
    display:block;
    position:absolute;
    top:0;
    z-index:1;
    background-color:#6b675f;
  }
  
  .planS-col {
    padding:12% 8% 8% 8%;
    position:relative;
  }
  
  .planS-photo:after {
    background-size:60% auto;
  }
  
  .planS__ct {
    padding:8% 6% 12% 6%;
    position:relative;
    z-index:2;
  }
  
  .planS__ct p {
    padding-bottom:8%;
  }
}


/*--------------------------------------------------------------------------------
  スマイル
--------------------------------------------------------------------------------*/

.plan-smile .planS-photo:after {
  background-image:url(../image/top/smile.png);
}

@media print,screen and (min-width:641px) {
  .plan-smile {
    float:left;
    margin-top:-30px;
  }
}

@media screen and (max-width:640px) {
  .plan-smile:before {
    left:0;
  }
}


/*--------------------------------------------------------------------------------
  地下倶楽部
--------------------------------------------------------------------------------*/

.plan-bClub .planS-photo:after {
  background-image:url(../image/top/bClub.png);
}

@media print,screen and (min-width:641px) {
  .plan-bClub {
    float:right;
    margin-top:60px;
  }
}

@media screen and (max-width:640px) {
  .plan-bClub:before {
    right:0;
  }
}


/*----------------------------------------------------------------------------------------------------

  賢い家づくり実現ノート
  
----------------------------------------------------------------------------------------------------*/

.myhomeNote-btm {
  width:100%;
  display:block;
  position:relative;
  overflow:hidden;
  border-top:1px solid #58544b;
  margin-top:-1px;
}

.myhomeNote-btm:before,
.myhomeNote-btm:after {
  content:"";
  width:50%;
  position:absolute;
  top:0;
  border-style:solid;
}

.myhomeNote-btm:before {
  border-color:#58544b transparent transparent transparent;
}

.myhomeNote-btm:after {
  border-color:transparent #58544b transparent transparent;
}

.myhomeNote {
  width:100%;
  overflow:hidden;
  background-color:#58544b;
  color:#fff;
  position:relative;
}

.myhomeNote:before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  background:url(../image/top/myhomeNote_p.jpg) no-repeat center top;
  background-size:2000px auto;
}

.myhomeNote__hdline {
  width:1180px;
  height:420px;
  margin-left:auto;
  margin-right:auto;
  background:url(../image/top/myhomeNote.png) no-repeat center top;
  position:relative;
  z-index:2;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

.ua-pc .myhomeNote .p-btn:before {
  background-color:#322d23;
}

@media print,screen and (min-width:641px) {
  .myhomeNote-btm-wrap {
    display:block;
    height:130px;
  }
  
  .myhomeNote-btm {
    height:-webkit-calc(200 / 2000 * 100vw);
    height:calc(200 / 2000 * 100vw);
    min-width:1180px;
    min-height:130px;
  }
  
  .myhomeNote-btm:before,
  .myhomeNote-btm:after {
    height:200px;
  }
  
  .myhomeNote-btm:before {
    left:-webkit-calc(50% - 1000px);
    left:calc(50% - 1000px);
    border-width:200px 1000px 0 0;
  }
  
  .myhomeNote-btm:after {
    right:-webkit-calc(50% - 1000px);
    right:calc(50% - 1000px);
    border-width:0 1000px 200px 0;
  }
  
  .myhomeNote__ct {
    padding-top:40px;
    padding-bottom:90px;
  }
  
  .myhomeNote__ct p {
    font-size:1.1em;
    padding-bottom:45px;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

@media screen and (max-width:640px) {
  .myhomeNote-btm {
    height:-webkit-calc(100 / 640 * 100vw);
    height:calc(100 / 640 * 100vw);
  }
  
  .myhomeNote-btm:before,
  .myhomeNote-btm:after {
    height:100px;
  }
  
  .myhomeNote-btm:before {
    left:-webkit-calc(50% - 340px);
    left:calc(50% - 340px);
    border-width:100px 340px 0 0;
  }
  
  .myhomeNote-btm:after {
    right:-webkit-calc(50% - 340px);
    right:calc(50% - 340px);
    border-width:0 340px 100px 0;
  }
  
  .myhomeNote:before {
    background-size:200% auto;
  }
  
  .myhomeNote__hdline {
    width:100%;
    height:0;
    padding-top:57%;
    background-size:160% auto;
  }
  
  .myhomeNote__ct {
    padding-top:8%;
    padding-bottom:12%;
  }
  
  .myhomeNote__ct p {
    padding-bottom:8%;
    padding-left:6%;
    padding-right:6%;
  }
}


/*----------------------------------------------------------------------------------------------------

  電話
  
----------------------------------------------------------------------------------------------------*/

.top-contactTel {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
}

.top-contactTel__time {
  display:block;
  padding:0.2em 1em;
  background-color:#fff;
  margin-top:0.8rem;
}

@media print,screen and (min-width:641px) {
  .top-contactTel {
    font-size:1.1em;
  }
}

@media screen and (max-width:640px) {
  .top-contactTel {
    padding-top:4%;
  }
}


/*----------------------------------------------------------------------------------------------------

  お問い合わせ・資料請求　facebook
  
----------------------------------------------------------------------------------------------------*/

.top-bnr {
  list-style:none;
}

.top-bnr li a {
  display:block;
}

.top-bnr li .photo {
  display:block;
  position:relative;
  overflow:hidden;
}

.top-bnr li .photo:after {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background-repeat:no-repeat;
  background-position:center center;
}

.top-bnr__contact .photo:after {
  background-image:url(../image/icon/mail_white.svg);
}

.top-bnr__fb .photo:after {
  background-image:url(../image/icon/fb_white.svg);
}

.top-bnr li .photoZoom {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.ua-pc .top-bnr li .photoZoom img {
  -webkit-transition:transform 0.3s ease-out;
  transition:transform 0.3s ease-out;
}

.ua-pc .top-bnr li a:hover .photoZoom img {
  transform:scale(1.08);
}

.top-bnr li .bnrTtl {
  width:100%;
  display:block;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

.top-bnr__contact .bnrTtl {
  background-image:url(../image/top/bnr_contact__ttl.png);
  background-color:#f2e146;
}

.top-bnr__fb .bnrTtl {
  background-image:url(../image/top/bnr_fb__ttl.png);
  background-color:#4870be;
}

@media print,screen and (min-width:641px) {
  .top-bnrs {
    padding-top:80px;
    padding-bottom:115px;
  }
  
  .top-bnr {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    vertical-align:bottom;
  }
  
  .top-bnr li {
    width:420px;
    float:left;
    margin:0 20px;
  }
  
  .top-bnr li .photo {
    height:240px;
  }
  
  .top-bnr li .photo:after {
    background-size:auto 70px; 
  }
  
  .top-bnr li .bnrTtl {
    height:140px;
  }
}

@media screen and (max-width:640px) {
  .top-bnrs {
    padding-top:10%;
    padding-bottom:10%;
  }
  
  .top-bnr {
    padding-left:4%;
    padding-right:4%;
  }
  
  .top-bnr li {
    width:50%;
    float:left;
    padding-left:2%;
    padding-right:2%;
  }
  
  .top-bnr li .photo {
    height:calc(200 / 640 * 100vw);
  }
  
  .top-bnr li .photoZoom {
    width:inherit;
  }
  
  .top-bnr li .photo img {
    height:100%;
    max-width:inherit;
  }
  
  .top-bnr li .photo:after {
    background-size:auto -webkit-calc(70 / 640 * 100vw);
    background-size:auto calc(70 / 640 * 100vw);
  }
  
  .top-bnr li .bnrTtl {
    height:calc(120 / 640 * 100vw);
  }
}