@charset "utf-8";
/* ========================================================
	top.css => トップページ用CSS
======================================================== */
/* slick
------------------------------------------------------------- */
.slider li {
  position: relative;
}
.slider img {
  width: 100%;
  height: auto;
}
.slider span {
  position: absolute;
  right: 5vw;
  top: 5.5vw;
  z-index: 1;
  width: 30vw;
  height: auto;
}
.slick-slider {
  margin-bottom: 0 !important;
}
/* 背景
------------------------------------------------------------- */
.bg_w {
  background: #fff;
}
/*スクロール
------------------------------------------------------------- */
.allwrap {
  position: relative;
  width: 100%;
  height: auto; 
}

.bg-img {
  display: block;
  width: 100%; 
  height: auto; 
}

.head-logo{
  position: absolute;
  top: 40px;
  left: 20px;
}

.head-ttl{
  position: absolute;
  top: 116px;
  left: 0;
}

.head-ttl img{
  width: 270px;
  height: auto;
}

.scrolldown {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  text-align: center;
  width: 100%;
}
/* 上部のテキスト */
.scroll-text {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  width: 100%;
  white-space: normal;
  font-family: "Noto Serif JP";
}
/* アニメーション縦線 */
.scroll-line {
  position: relative;
  width: 1px;
  height: 5rem;
  margin: 0 auto 0.8rem;
  background: none;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  animation: scroll 2s ease-in-out infinite;
}
/* 下部の (scroll down)  */
.scroll-label {
  display: block;
  font-size: 1.5rem;
  font-family: "Noto Serif JP";
}
/*@media screen and (max-width: 960px) {
  .scroll-text { 
  }
  .scroll-label {
  }
}*/
/* スクロールアニメーション */
@keyframes scroll {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
/* 見出し
------------------------------------------------------------- */
h2.title {
  font-size: 3.2rem;
  font-family: "Noto Serif JP";
  text-align: center;
  margin-bottom: 0.5em;
}
h2.title span {
  display: block;
  font-size: 1.6rem;
  font-family: "Noto Sans JP";
  color: #878cb0;
}
/*
---------------------------------------------------------------*/
.img_kado img {
  border-radius: 5px;
}

/*------------------------------------
    モデルハウスセクション
------------------------------------*/
.modelhouse-container {
  position: relative;
  background-color: #ffffff;
}

.modelhouse-container .contact-title {
  padding-inline: 13px;
}

.modelhouse-box {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  padding-inline: 20px;
  transform: translateY(8px);
}

.modelhouse-copy-box {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 20px * 2);
  width: 100%;
  text-align:  center;
}

.modelhouse-copy-body01 {
  width: 208px;
  margin-bottom: 44px;
}

.modelhouse-copy-body02 {
  width: 316px;
}

.modelhouse-gallary-box {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  gap: 12px;
  justify-content: center;
  max-width: calc(100% - 30px * 2);
  width: 100%;
  margin-inline: auto;
  transform: translate(-50%, -32%);
}

.modelhouse-gallary-box p:nth-of-type(2) {
  padding-top: 70px;
}

.w_px0{
  position: relative;
  display: block;
  max-width: 434px;
  margin: 0 auto;
  padding: 1em 0;
}
.px-1em{
  padding-left: 1em;
  padding-right: 1em;
}

[data-observe] {
  opacity: 0;
  filter: blur(0.2em);
  transition-property: opacity, transform, filter;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

[data-observe].is-show {
  opacity: 1;
  filter: blur(0);
}

/*------------------------------------
    CTA ボタン（固定表示）
------------------------------------*/

/* 固定 CTA 全体 */
.cta-wrap {
  position: fixed;
  left: 50%;
  bottom: 12px;                 /* 画面最下部からの距離 */
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;

  width: 90%;
  max-width: 420px;             /* PC で幅が広がりすぎないように */
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;

  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;

  pointer-events: none;         /* 非表示時はクリック無効 */
}

/* CTA 表示中 */
.cta-wrap.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* クリック領域を広く */
.cta-link {
  display: block;
  width: 100%;
  cursor: pointer;
}

/* CTA 画像 */
.cta-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* contact の位置は1px で OK */
#contact {
  height: 1px;
  width: 100%;
  display: block;
}

.special_movie_ttl {
  font-size: 3.2rem;
  font-family: "Noto Serif JP";
  text-align: center;
  margin-bottom: 0.5em;
}
.special_movie_ttl span {
  display: block;
  font-size: 1.6rem;
  font-family: "Noto Sans JP";
  color: #878cb0;
}