/* ルートにだけ変数を置く（他と衝突しない） */
.real-estate-page{
  --maxw:1080px;
  --gap: 36px;
  --pad-section: 80px;
}

/* ヒーロー */
.real-estate-hero{
  /*min-height:50vh;*/
  min-height: calc(100dvh - 400px);
  display:grid;
  place-items:center;
  text-align:center;
  padding:40px 16px;
  background-image: url(/theme/omotenashi2/img/real-estate/r-e-hero.jpg);
  background-repeat: no-repeat;
  background-position: center 20%; /* 👈 横はセンター、縦は70%に */
  background-size: cover; /* 👈 ポイント */
}
/* 999px〜788px */
@media (max-width: 999px) and (min-width: 788px) {
  .real-estate-hero {
    min-height: calc(100vh - 292.5833px);
  }
}

/* 787px〜500px */
@media (max-width: 787px) and (min-width: 500px) {
  .real-estate-hero {
    min-height: calc(100vh - 252.5833px);
  }
}

/* 499px以下 */
@media (max-width: 499px) {
  .real-estate-hero {
    min-height: calc(100vh - 197.3833px);
  }
}


/* テキストラッパー */
.real-estate-hero .real-estate-wrap{
  max-width:var(--maxw);
  margin: 0 auto;
  padding:0;
  transform: translateY(-70%); /* 上へ動かす */
}

.real-estate-hero h1{
  margin:0;
  font-size:clamp(24px,3.2vw,36px);
  color: #FFF;
}
.real-estate-hero p{
  color: #FFF;
}
.scroll-down {
  display: inline-block;
  /*margin-top: 30px;*/
  font-size: 28px;       /* 矢印の大きさ */
  color: #fff;           /* 色はヒーローに合わせて */
  text-decoration: none;
  animation: bounce 1.8s infinite;
  cursor: pointer;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}
/* ホバー時のエフェクト */
.scroll-down:hover {
  opacity: 0.7;
  color:  yellow;
}



/* セクション */
/* 共通（PCデフォルト） */
.real-estate-feature {
  padding: 60px 0; /* 元の80pxから縮める */
  border-bottom: 1px solid #eee;
  background: #fff;
}
/* タブレット以下 */
@media (max-width: 999px) {
  .real-estate-feature {
    padding: 50px 0;
  }
}
/* スマホ */
@media (max-width: 767px) {
  .real-estate-feature {
    padding: 32px 0; /* さらにギュッと詰める */
  }
}

.real-estate-feature__inner{
  display:grid;
  gap:var(--gap);
  align-items:center;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
@media (max-width: 900px) {
  .real-estate-feature__inner {
    gap: 10px;           /* gapも無効化 */
  }
}

/* 交互レイアウト用（画像が右） */
.real-estate-feature--alt .real-estate-feature__inner{ direction: rtl; }
.real-estate-feature--alt .real-estate-feature__inner > *{ direction: ltr; }

/* 画像・テキスト（スコープ内のみ） */
.real-estate-feature figure{ margin:0; }
.real-estate-feature figure img{ width:100%; height:auto; display:block; border-radius:12px; }
.real-estate-text h2{
  font-size: clamp(20px, 2.6vw, 28px);
  margin:0 0 8px;
  background: #568b2f;
  color: #FFF;
  width: auto;
  padding: 5px 10px;
  border-radius: 5px;
}
@media (min-width: 901px){
  .real-estate-text h2 {
    position: relative;
    z-index: 2;
    background: #568b2f;
    color: #FFF;
    padding: 10px 10px 10px 20px;
    border-radius: 5px;
    display: block;
    width: 120%;          /* 帯を広げる */
    box-sizing: border-box;
  }

  /* 画像が左側にあるセクション */
  .real-estate-feature:not(.real-estate-feature--alt) .real-estate-text h2 {
    margin-left: -20%;    /* 左に食い込む */
  }

  /* 画像が右側にあるセクション */
  .real-estate-feature--alt .real-estate-text h2 {
    margin-left: 0;       /* 左は基準通り */
    margin-right: -20%;   /* 右に食い込む */
  }
}


.real-estate-text h5{ font-size: clamp(16px, 2vw, 20px); margin:0 0 12px; color:#555; }
.real-estate-text p{ margin:0; color:#444; }

/* アニメーションの芯（reveal） */
.real-estate-reveal{
  opacity:0;
  transform: translate3d(0,0,0);
  transition: opacity 1200ms ease, transform 1500ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.real-estate-reveal[data-direction="left"]  { transform: translate3d(-800px, 0, 0); }
.real-estate-reveal[data-direction="right"] { transform: translate3d( 800px, 0, 0); }
.real-estate-reveal[data-direction="up"]    { transform: translate3d( 0, 32px, 0); }
.real-estate-reveal[data-direction="down"]  { transform: translate3d( 0,-32px, 0); }
.real-estate-reveal.is-inview{
  opacity:1; transform: translate3d(0,0,0);
}

/* よく使う遅延（任意で拡張可） */
.real-estate-reveal[data-delay="60"]  { transition-delay:60ms;  }
.real-estate-reveal[data-delay="120"] { transition-delay:120ms; }
.real-estate-reveal[data-delay="180"] { transition-delay:180ms; }
.real-estate-reveal[data-delay="240"] { transition-delay:240ms; }

/* モーション低減 */
@media (prefers-reduced-motion: reduce){
  .real-estate-reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* スマホ縦並び */
@media (max-width: 900px){
  .real-estate-feature__inner{ grid-template-columns: 1fr; }
  .real-estate-feature--alt .real-estate-feature__inner{ direction:ltr; } /* モバイルは通常順でOK */
  /* オフセット距離を少し短くして軽快に */
  /*.real-estate-reveal[data-direction="left"]  { transform: translate3d(-90px, 0, 0); }
  .real-estate-reveal[data-direction="right"] { transform: translate3d( 90px, 0, 0); }*/
}

/* 余白＆視線誘導 */
.real-estate-kicker{ display:inline-block; font-weight:600; color:#4a6cf7; background:#eef2ff; border-radius:999px; padding:4px 10px; font-size:12px; margin-bottom:10px; }


@media (max-width: 900px){
  /* 方向アニメーションを無効化して中央ズームに統一 */
  .real-estate-reveal[data-direction="left"],
  .real-estate-reveal[data-direction="right"],
  .real-estate-reveal[data-direction="up"],
  .real-estate-reveal[data-direction="down"],
  .real-estate-reveal {
    transform: scale(0.85);  /* ← 少し小さめから */
    opacity: 0;
  }

  .real-estate-reveal.is-inview {
    transform: scale(1);     /* ← 自然に等倍へ */
    opacity: 1;
    transition: opacity 900ms ease, transform 900ms ease;
  }
}