@charset "UTF-8";
@import url("https://use.typekit.net/gcy2lyv.css");
#top #main {
  overflow: hidden;
}
#top .bgBrown {
  background: rgba(64, 51, 46, 0.9);
}
#top .main-cont {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .mainVisual .img img {
    width: 100%;
  }
}

.top-movie {
  position: fixed;
  top: 122px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  z-index: 0;
  width: 100vw;
  max-width: 1920px;
  background: rgba(64, 51, 46, 0.9);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .top-movie {
    top: 110px;
  }
}
@media (max-width: 767px) {
  .top-movie {
    top: 60px;
  }
}
.top-movie video {
  display: block;
  width: 100%;
  aspect-ratio: 1280/720;
}
@media (max-width: 767px) {
  .top-movie video {
    aspect-ratio: 720/1280;
  }
}

.topInfo {
  padding: 95px 0 110px;
}
@media (max-width: 767px) {
  .topInfo {
    padding: 70px 0px;
  }
}
.topInfo .title {
  font-size: 32px;
  letter-spacing: 0.09em;
  line-height: 1.6;
  text-align: center;
  color: #fff;
}
@media (max-width: 900px) {
  .topInfo .title {
    font-size: 25px;
  }
}
.topInfo .sec-heading {
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .topInfo .sec-heading {
    padding-bottom: 70px;
  }
}
.topInfo .entry-box {
  margin-bottom: 80px;
}

.topInfo-point {
  padding-bottom: 80px;
  max-width: 1000px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .topInfo-point {
    padding-bottom: 70px;
  }
}
.topInfo-point ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 2%;
}
.topInfo-point ul li {
  width: 49%;
}
@media (max-width: 767px) {
  .topInfo-point ul li {
    width: 100%;
  }
}
.topInfo-point ul li:nth-child(n+3) {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .topInfo-point ul li:nth-child(n+2) {
    margin-top: 10px;
  }
}

.topLead {
  position: relative;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, #EBE3D4), color-stop(45%, #EBE3D4));
  background-image: -webkit-linear-gradient(transparent 0%, #EBE3D4 30%, #EBE3D4 45% 100%);
  background-image: linear-gradient(transparent 0%, #EBE3D4 30%, #EBE3D4 45% 100%);
  padding: 260px 0 0;
}
@media (max-width: 767px) {
  .topLead {
    padding: 390px 0px 0;
  }
}
.topLead .sec-head {
  padding-bottom: 80px;
}
.topLead .topLead-btn {
  max-width: 400px;
  margin-inline: auto;
}
.topLead .images-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 734px;
}
@media (max-width: 767px) {
  .topLead .images-wrap {
    overflow: hidden;
    width: 390px;
    top: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.topLead .images-wrap .images-container {
  position: relative;
  height: 810px;
}
@media (max-width: 1300px) {
  .topLead .images-wrap .images-container {
    aspect-ratio: 1300/810;
    height: auto;
  }
}
@media (max-width: 900px) {
  .topLead .images-wrap .images-container {
    aspect-ratio: 1110/810;
  }
}
@media (max-width: 767px) {
  .topLead .images-wrap .images-container {
    aspect-ratio: auto;
    height: 100%;
  }
}
.topLead .images-wrap .img {
  position: absolute;
}
.topLead .images-wrap .img.anim-up {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transition: ease 1.5s;
  transition: ease 1.5s;
}
.topLead .images-wrap .img.anim-up.is-move {
  -webkit-filter: blur(0);
          filter: blur(0);
}
.topLead .images-wrap .img-01 {
  width: 325px;
  top: 14%;
  left: 0;
}
@media (max-width: 1300px) {
  .topLead .images-wrap .img-01 {
    width: 25%;
  }
}
@media (max-width: 767px) {
  .topLead .images-wrap .img-01 {
    width: 210px;
    top: 60px;
  }
}
.topLead .images-wrap .img-02 {
  width: 230px;
}
@media (min-width: 768px) {
  .topLead .images-wrap .img-02 {
    top: 0;
    right: 5.7%;
  }
}
@media (max-width: 1300px) {
  .topLead .images-wrap .img-02 {
    width: 17%;
  }
}
@media (max-width: 767px) {
  .topLead .images-wrap .img-02 {
    width: 145px;
    bottom: 95px;
    left: 0;
  }
}
.topLead .images-wrap .img-03 {
  width: 230px;
}
@media (min-width: 768px) {
  .topLead .images-wrap .img-03 {
    left: 5.7%;
    bottom: 0;
  }
}
@media (max-width: 1300px) {
  .topLead .images-wrap .img-03 {
    width: 17%;
  }
}
@media (max-width: 767px) {
  .topLead .images-wrap .img-03 {
    width: 145px;
    top: 130px;
    right: 0;
  }
}
@media (min-width: 768px) {
  .topLead .images-wrap .img-03 .caption {
    text-align: right;
    bottom: 3px;
  }
}
.topLead .images-wrap .img-04 {
  width: 325px;
  bottom: 3.7%;
  right: 0;
}
@media (max-width: 1300px) {
  .topLead .images-wrap .img-04 {
    width: 25%;
  }
}
@media (max-width: 767px) {
  .topLead .images-wrap .img-04 {
    width: 210px;
    bottom: 60px;
  }
}

.topLead-title {
  max-width: 255px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .topLead-title {
    max-width: 175px;
  }
}

.topLead-text {
  font-size: 16px;
  line-height: 78px;
  text-align: center;
}
@media (max-width: 767px) {
  .topLead-text {
    font-size: 14px;
    line-height: 37px;
    padding-bottom: 25px;
  }
}

.topMain-footer {
  height: 1691px;
  background: transparent url(../img/top/top-footer-bg.webp) no-repeat top center/1920px 1691px;
  padding-top: 140px;
  position: relative;
}
@media (max-width: 767px) {
  .topMain-footer {
    padding-top: 70px;
    height: 1058px;
    background: transparent url(../img/top/sp/top-footer-bg-sp.webp) no-repeat top center/767px 1058px;
  }
}
.topMain-footer.bgImageNone {
  background-image: none;
  height: auto;
  padding-top: 0 !important;
  padding-bottom: 140px;
  background-color: rgba(64, 51, 46, 0.9);
}
@media (max-width: 767px) {
  .topMain-footer.bgImageNone {
    padding-bottom: 70px;
  }
}
.topMain-footer.bgImageNone .caption-area {
  display: none;
}
.topMain-footer .caption-area {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (max-width: 767px) {
  .top-pageLink .bnr-area {
    padding-bottom: 70px;
  }
}
@media (max-width: 767px) {
  .top-pageLink .bnr-area .banner {
    padding: 0 20px;
  }
}

#page-svg {
  background: #000;
}

#design path,
#plan path,
#access path,
#location path {
  fill-opacity: 0; /*透過0で塗りの色が見えない状態*/
  -webkit-transition: fill-opacity 0.5s;
  transition: fill-opacity 0.5s; /*0.5秒で色が付くアニメーション*/
  fill: none; /*塗りの色*/
  stroke: #fff; /*線の色*/
}
#design.done path,
#plan.done path,
#access.done path,
#location.done path {
  fill-opacity: 1; /*透過1で塗りの色が見える状態*/
  stroke: #fff; /*線の色*/
}

.top-pageLink .bnr-area {
  background-color: rgba(64, 51, 46, 0.9);
  padding-bottom: 140px;
}
.top-pageLink .bnr-area .pageLink {
  background-color: transparent;
}
.top-pageLink .bnr-area .banner {
  padding: 0 20px;
  display: block;
  max-width: 790px;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 768px) {
  .top-pageLink .bnr-area .banner:hover {
    opacity: 0.7;
  }
}

.topLead-bnr {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: 80px;
}
@media (max-width: 767px) {
  .topLead-bnr {
    margin-bottom: 70px;
  }
}

.lead-img {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: -3px;
}
.lead-img.caption-cont .caption {
  bottom: 5px;
  right: -20px;
}
@media (max-width: 767px) {
  .lead-img.caption-cont .caption {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
  }
}

/* --- top.css 末尾をこれだけに修正してください --- */
/* メインビジュアル */
.mainVisual {
  position: relative;
  z-index: 2;
  width: 100%;
  /* ▼背景色は透明に戻す（透過画像で動画を見せるため） */
  background: transparent !important;
  /* ▼最重要：下の要素を1pxだけ上に引き上げて、物理的に隙間をなくす */
  margin: 0 0 -1px 0 !important;
  padding: 0 !important;
  line-height: 0; /* 行間を消す */
  font-size: 0; /* 文字サイズを消す */
}

/* 画像周りの設定 */
.mainVisual .img,
.mainVisual picture {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 0;
  font-size: 0;
}

.mainVisual img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom; /* 画像の下に隙間を作らせない */
  border: none;
  /* 計算誤差対策の微拡大 */
  -webkit-transform: scale(1.001);
          transform: scale(1.001);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

/* 動画の窓（透明エリア） */
#top .movie-area {
  background: transparent;
  width: 100%;
  /* 高さはJSで制御 */
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* 下のコンテンツ */
.content-wrapper {
  position: relative;
  z-index: 2;
  background-color: #fff;
  margin: 0 !important;
  padding: 0 !important;
}

/* 文字消え防止 */
.topInfo .title {
  opacity: 1 !important;
  -webkit-transform: none !important;
          transform: none !important;
  visibility: visible !important;
}