@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese);
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap");
@import url("https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy&display=swap");
.anim {
  -webkit-transition: all 0.6s ease;
  transition: all  0.6s ease;
  opacity: 0;
  transform: translateY(20px); }
  .anim.active {
    opacity: 1;
    transform: translateY(0px); }

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

*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  font-size: 62.5%; }

body {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  background: url("../img/bg.png");
  background-size: 40px;
  }
  
  @media screen and (max-width: 960px) {
    body {
      font-size: 15px;
      font-size: 1.5rem; } }

.pc {
  display: block !important; }

.sp {
  display: none !important; }

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

  .sp {
    display: block !important; } }
a[href^="tel:"] {
  cursor: default; }
a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all  0.3s ease; }
a:hover,
a:active {
  text-decoration: none; }
p {
  line-height: 2;
  letter-spacing: 0.1em; }
.txtC {
  text-align: center !important; }
.txtR {
  text-align: right !important; }
.txtL {
  text-align: left !important; }
.bold {
  font-weight: bold !important; }
.normal {
  font-weight: normal !important; }
img {
  max-width: 100%;
  height: auto;
  border: 0; }
a:hover img {
  filter: alpha(opacity=70);
  opacity: 0.7; }

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

* html .cf {
height: 1%; }

.cf {display: block; }

/*wrap*/
.wrap{
  margin: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bg_illust.png") no-repeat top center;
  background-size:100%;
}
@media screen and (max-width: 960px) {
  .wrap {
  }
}
.header {
  width:100%;
  margin: 30px 0 0;
  position: relative;
  padding: 145px 0 0;
  text-align: center;
}
.header h1 img{
  width: 832px;
}
@media screen and (max-width: 960px) {
  .header {
    padding-top: 30px; 
  }
}

/*main*/
main {
  margin: 0 auto;
  max-width: 1000px;
}
@media screen and (max-width: 960px) {
  main {
    padding: 0 20px;
  }
}

h2{
  width:100%;
  text-align: center;
  margin: 0 auto; 
  padding: 30px 0 50px;
  position: relative;
  background: url("../img/img_house.png") no-repeat 90% bottom;
  background-size: 15.6%;
}
h2 img{
  width: 292px;
}
h3{
  margin-bottom: 50px;
}

/*movie*/
.movie-wrap{
  margin-bottom:80px;
  width: 100%;
}
.movie{
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
.movie:not(first-child){
  margin-top: 40px;
}
.movie iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.movie-wrap p{
  text-align: left;
  color: #fff;
  font-size: 92%;
}

/**/
.box2col{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 80px;
}
.box2col li{
  width: 48%;
}

/**/
.photo li{
  display: block;
  margin-bottom: 40px;
}

/*footer*/
.footer {
  padding: 100px 0;
  text-align: center;
  margin: 0;
  width: 100%;
}
.footer .logo{
  margin: auto;
  display: block;
  width: 300px;
}
@media screen and (max-width: 767px) {
  h2{  
    padding: 0 0 30px;
  }
  h3{  
   margin-bottom:30px;
  }
  .movie-wrap{
    margin-bottom:20px;
  }
  .box2col{
    margin-bottom: 20px;
  }
  .box2col li{
    width: 100%;
    margin-bottom: 20px;
  }
  .photo li{
    margin-bottom: 20px;
  }
  .footer  {
    padding: 20px 0 50px;
  }
  .footer .logo{
    width: 50%;
  }
}
  
 
.pagetop {
  position: fixed;
  right: 3%;
  bottom: 5%;
}