@charset "utf-8";
.wrapper {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}
/* ロゴサイズ */
.logo-area img {
  max-width: 280px;
  height: auto;
}
.header-left {
  display: flex;
}
.header-left p {
  font-size: 16px;
  padding-top: 7pt;
}
.tel-moji {
  width: 280px;
  color: #fff;
  background-color: #a58c78;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  padding: 5px;
}
.tel-no {
  font-size: 25px;
  letter-spacing: 0.03em;
  padding-top: 5px;
}
.tel-no span {
  font-size: 14px;
}
.header-right {
  width: 280px;
  margin-left: 0;
}

/* ハンバーガーメニューーーーーーーーーーーーーーーー */
header {
  /* padding:10px; */
  width: 90%;
  margin: 0 auto;
  /* background: #ccc; */
  padding: 4%;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 4px;/*線の太さ*/
  width: 30px;/*長さ*/
  border-radius: 3px;
  background: #a58c78;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 50%;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 justify-content: space-between;
}
#nav-content ul li {
  padding: 5%;
}
/* ハンバーガーメニュENDーーーーーーーーーーーーーーー */

@media screen and (max-width: 767px) {
  .PC-TB-header {
    display: none;
  }
  .PC-nav {
    display: none;
  }
}
/* PC用ナビゲーションメニューーーーーーーーーーーーーー */

.PC-nav {
  margin: 0 auto;
}
.PC-nav ul {
  display: flex;
  justify-content: center;
  background-color: #a58c78;
  color: #fff;
  font-size: 16px;
}
.PC-nav ul li {
  width: 205px;
  box-sizing: border-box;
  text-align: center;
  border-right: #fff solid 1px;
}
.PC-nav ul li:last-child {
  border-right: none;
}
.PC-nav a {
  display: block;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* PC_TB ナビゲージョンメニューホバー設定 */
/*==================================================*/
.PC-nav a:hover {
  background-color: #000;
  transition: all .7s;
}
/*===================================*/




/* タブレットとPC用ロゴ＆ナビゲーションメニュー */
@media screen and (min-width: 768px) {
  .header-logo-menu {
    display: none;
  }
  .PC-TB-header {
    display: block;
    /* position: absolute;
    top: 10px;
    left: 10px; */
    /* height: 20px; */
    display: flex;
    align-items: center;
  }
  .PC-TB-header img {
    width: 250px;
  }
  .header-right {
    display: inline;
    align-items: center;
    width: 280px;
    margin-right: 0;
  }
  .PC-TB-header-BIG {
    display: flex;
    justify-content: space-between;
    height: 20px;
    align-items: center;
  }
  .header-left {
    display: none;
  }
  .logo-area a img {
    width: 600px;
  }
  .logomoji-PC {
    font-size: 16px;
    padding-left: 20px;
  }
  .tel-moji {
    width: 280px;
    padding: 2px;
    font-size: 16px;
    margin-top: 0;
    margin-right: 0;
  }
  .tel-no {
    width: 280px;
    font-size: 26px;
  }
}
/* トップページのメイン画像ーーーーーーーーーーーー */
main img {
  width: 100%;
  height: auto;
}
.top-main-PC {
  width: 100%;
  z-index: -1;
}
.top-back {
  position: relative;
}
.tategaki {
  line-height: 2;
  font-size: 12px;
  color: #fff;
}
.top-main-text-container {
  position: absolute;
  top: 15%;
  width: 130px;
  height: 130px;
  background-color: #000;
  text-align: center;
  padding: 20px;
}
.top-main-text-container h2 {
  font-size: 10px;
  line-height: 1.7;
}
.top-main-PC {
  display: none;
}
/* 縦書き文字の大きさ */
@media screen and (min-width:768px) {
  .top-main-text-container {
    top: 20%;
    width: 280px;
    height: 240px;
    padding: 30px;
  }
  .top-main-text-container h2 {
    font-size: 18px;
    line-height: 1.9;
  }
  .top-main img {
    display: none;
  }
  .top-main-PC {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* トップページの「HOUSE TOUR」タイトルーーーーーーーーーーーー */
.title {
  text-align: center;
  margin-top: 50px;
  padding-top: 50px;
}
.title img {
  width: auto;
  height: 170px;
}


/* トップページのご来場キャンペーンーーーーーーーーー */
.campain-back {
  width: 100%;
  height: auto;
  margin-top: 30px;
}
.campain {
  position: relative;
}
.campain-title {
  position: absolute;
  top: 30px;
  padding: 5px 30px;
  background-color: #000;
  color: #fff;
}
.campain-PC {
  display: none;
}

@media screen and (min-width:400px) {
  .campain {
    display: none;
  }
  .campain-PC {
    display: block;
    margin-top: 100px;
  }
  .campain-PC img {
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}
/* トップページのPLAN --------------------------- */
.PLAN-bg {
  margin-top: 150px;
  width: 100%;
  /* height: 150vh; */
  background-image: url(../img/plan-back-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 50px;
  padding-bottom: 50px;
}
.madori-box {
  width: 70%;
  height: auto;
  /* margin: 50px; */
  background-color: #fff;
  margin: 0 auto;
}
.plan img {
  width: 500px;
  height: auto;
  padding: 20px;
}
.plan {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 90%;
  background-color: #fff;
  margin: 30px auto;
}
.madori-text {
  width: 50%;
  padding: 20px;
}
.madori-text h4 {
  font-size: 23px;
  font-weight: bold;
}
.madori-text p {
  font-size: 13px;
  line-height: 1.6;
  padding-top: 20px;
}
/* 間取りとテキスト部分のレスポンシブ */
@media screen and (max-width:768px) {
  /* .PLAN-bg {
    height: auto;
  } */
  .plan {
    flex-direction: column;
    margin: 10px;
  }
  .madori-box {
    width: 90%;
  }
  .madori-text {
    width: 90%;
    padding: 0;
    text-align: center;
  }
  .madori-text h4 {
    font-size: 22px;
  }
  .madori-text p {
    font-size: 14px;
  }
}
/* PLAN タイトル(他タイトルも一緒) */
.title-2 {
    text-align: center;
    padding-top: 50px;
  }
.title-2 img {
    width: auto;
    height: 123px;
  }
@media screen and (max-width:768px) {
  .title-2 img {
    width: auto;
    height: 100px;
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーー */
.more img {
  background-color: #fff;
  width: 200px;
  height: auto;
  padding: 5px;
}
.more {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}
.more img:hover {
  transform: scale(1.1, 1.1);
  transition: all .2s;
}

/* トップページの性能ーーーーーーーーーーーーーーーーー */
.seinou-text p {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  padding-top: 50px;
}
.seinou-img {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
  margin-bottom: 30px;
}
.seinou-img img {
  width: 25%;
  height: auto;
}
/* ホバー設定 */
.seinou-img img:hover{
  transform: scale(1.1, 1.1);
  transition: all .7s;
  border-radius:15px; 
}


@media screen and (max-width:768px) {
  .seinou-text {
    width: 90%;
    font-size: 12px;
    margin: 0 auto;
  }
}
/* トップページのお客様の声ーーーーーーーーーーーーーーーーー */
.voice-box {
  background-color: #f4f1ea;
  padding-top: 0px;
  margin-top: 50px;
}
.koe-box {
  padding: 30px;
}
.family img {
  width: 40%;
  max-width: 350px;
  height: auto;
  padding-bottom: 20px;
}
.family {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 50px;
}
.family-text {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.family-text-title {
  padding: 10px;
  font-size: 25px;
}
.more-2 {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}
.more-2 img {
  width: 200px;
  height: auto;
  padding: 5px;
  padding-top: 30px;
}
.more-2 img:hover {
  transform: scale(1.1, 1.1);
  transition: all .2s;
}
/* お客様の声のレスポンシブ */
@media screen and (max-width:768px) {
  .family {
    display: block;
    /* display: inline-block; */
    justify-content: center;
  }
  .family img {
    width: 100%;
    max-width: 780px;
  }
  .family-text-title {
    width: 100%;
    font-size: 14px;
  }
}

/* p3-性能のページーーーーーーーーーーーーー */
.p3-main-back {
  background-color: #f4f1ea;
  margin-top: 70px;
}
.p3-h2 {
  width: 100%;
  height: auto;
  color: #a58c78;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  line-height: 1.7;
  font-size: 24px;
  font-weight: bold;
}
.seinou-illust {
  width: 100%;
  background-color: #f4f1ea;
  text-align: center;
  padding-bottom: 50px;
}
.seinou-illust img {
  width: 80%;
  height: auto;
  background-color: #f4f1ea;
}
.taiyou-icon {
  text-align: center;
  padding-top: 50px;
}
.taiyou-icon img {
  width: 60px;
  height: auto;
}
.hikaku-coment {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 28px;
  font-weight: bold;
}
.hikaku {
  width: 80%;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
}
.hikaku img {
  width: 300px;
  height: auto;
}
/* 比較のレスポンシブ */
@media screen and (max-width:768px) {
  .hikaku {
    display: block;
    text-align: center;
  }
  .hikaku img {
    margin-bottom: 30px;
  }
}
/* ーーーーーーーーーーーーーー */
.hosoku {
  text-align: center;
  font-size: 10px;
  padding-top: 20px;
  padding-bottom: 50px;
}
/* 各性能 */
.kakuseinou {
  background-color: #f4f1ea;
}
.item-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 50px;
}
.item {
  display: flex;
  padding: 15px;
  align-items: center;
  background-color: #fff;
  margin-bottom: 25px;
  margin-right: 30px;
  border-radius: 10px;
}
.item:nth-child(2n) {
  margin-right: 0;
}
.item img {
  width: 40%;
  height: auto;
  padding-right: 10px;
}
.item p {
  font-size: 12px;
  line-height: 1.6;
}
.h3-taiyoukou {
  color: #a58c78;
  padding-bottom: 10px;
}
.h3-taiyoukou {
  font-size: 18px;
  font-weight: bold;
  color: #a58c78;
}
/* 各性能のレスポンシブ */
@media screen and (max-width:768px) {
  .item-box {
    grid-template-columns: 1fr;
  }
  .item {
    margin-right: 0;
  }
}
/* ーーーーーーーーーーーーーーー */

/* p2 間取りのページーーーーーーーーーーーーーーーーー */
/* スライダー */
.slide-items {
  width: 90%;
  height: 90%;
  margin: 0 auto;

}
.slide-items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-dots li button:before {
  font-size: 18px;
  top: 6px;
}
/* スライダー　ENDーーーーーーーーーーーーーー */

.p2-h2 {
  width: 100%;
  height: auto;
  color: #a58c78;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  line-height: 1.7;
  font-size: 24px;
  font-weight: bold;
  margin-top: 70px;
}
.p2-h2-2 {
  width: 100%;
  height: auto;
  color: #a58c78;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  line-height: 1.7;
  font-size: 24px;
  font-weight: bold;
}
.kukaku-title {
  background-color: #a58c78;
  color: #fff;
  font-weight: 500;
  font-size: 24px;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 70px;
}
/* 区画 */
.kukaku-A {
  width: 80%;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .3);
}
.kakaku {
  font-size: 14px;
  color: #a58c78;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.kakaku span {
  font-size: 36px;
  font-weight: bold;
}
table {
  width: 80%;
  border-collapse:  collapse;
  margin: 0 auto;
  margin-bottom: 150px;
}
table th,
table td {
  border:#b6b6b6 solid;
  padding: 15px;
}
table th {
  font-weight: normal;
  background-color: #d8d8d8;
}
.table-mb {
  display: none;
}
/* 間取りページのレスポンシブ */
@media screen and (max-width:768px) {
  .table-pc {
    display: none;
  }
  .table-mb {
    display: block;
    margin: 0 auto;
    padding-bottom: 60px;
  } 
  .table-mb tr {
    width: 100%;
  }
  table {
    margin: 0 auto;
    font-size: 10px;
  }
}
/* お客様の声ーーーーーーーーーーーーーーーーーーーーーーー */
.koe-box {
  padding: 30px;
  padding-bottom: 70px;
}
.p4-koe img {
  width: 50%;
  height: auto;
  padding-bottom: 20px;
}
.p4-koe {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 50px;
}
.p4-koe-text {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.p4-koe-text-title {
  padding: 10px;
  font-size: 25px;
}
.p4-koe-text h4 {
  padding: 10px;
  border-bottom: #a58c78 1px solid;
  font-size: 14px;
}
/* お客様の声のレスポンシブ */
@media screen and (max-width:768px) {
  .p4-koe {
    display: block;
  }
  .p4-koe img {
    width: 100%;
    padding-top: 40px;
  }
}

/* フォーム-------------------------------------------- */
.form-box {
  background-color: #f4f1ea;
  width: 100%;
}
.form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #fff;
  padding: 50px;
  line-height: 2;
  border-radius: 5px;
  margin-left: 50px;
  margin-right: 50px;
  width: 90%;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"] {
  width: 300px;
  border: 1px solid #b6b6b6;
  border-radius: 5px;
}
input[type="submit"] {
  background-color: #a58c78;
  color: #fff;
  padding: 10px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  margin: 0 auto;
  font-size: 20px;
}
.btn {
  width: 100%;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.form-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 0 auto;
}
/* フォームのレスポンシブ */
 @media screen and (max-width:768px) {
  .form-container {
    grid-template-columns: 1fr;
    margin: 0 auto;
  }
  .form-item {
    padding: 0;
    margin: 0;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"] {
    width: 100%;
    border-radius: 5px;
}
 }
/* マップーーーーーーーーーーーーーーーーーーーー */
.map {
  padding-bottom: 50px;
  margin: 0 auto;
}
.map-BIG-box {
  margin: 0 auto;
  width: 80%;
}
.map-box {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.map-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 50px;
}
.map-text {
  line-height: 1.6;
  padding: 30px;
  margin-top: 50px;
}
@media screen and (max-width:768px) {
  .map-text {
    font-size: 12px;
  }
}

/* フッターーーーーーーーーーーーーーーー */
.PC-nav-footer ul {
  display: flex;
  justify-content: center;
  background-color: #a58c78;
  color: #fff;
  font-size: 16px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.PC-nav-footer ul li {
  width: 170px;
  box-sizing: border-box;
  text-align: center;
  border-right: #ffffff solid 1px;
  /* padding: 3px; */
}
.PC-nav-footer ul li a {
  display: block;
  padding: 3px;
}
.PC-nav-footer ul li:hover {
  background-color: #614d3f;
  transition: all .7s;
}
.PC-nav-footer ul li:last-child {
  border-right: none;
}

.sns-icon {
  display: flex;
  width: 300px;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 50px;
}
.sns-icon img {
  width: 30px;
  height: auto;
}

footer p {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 60px;
  color: #fff;
}
footer {
  background-color: #a58c78;
}
/* フッターのレスポンシブ */
@media screen and (max-width:768px) {
  .PC-nav-footer ul li {
    width: 80%;
    font-size: 10px;
  }
  .sns-icon {
    width: 80%;
  }
  footer p {
    font-size: 8px;
    letter-spacing: 2px;
  }
}

/*==================================================
ふわっ
===================================*/
  
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
  .fadeUp {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .fadeUp.on {
    transform: translateY(0);
    opacity: 1.0;
  }