@charset "UTF-8";
/* =========================================================
   effects.css ｜ 動的演出用の追加スタイル
   きずな不動産 サンプルサイト

   このファイルがやること（見た目の部分だけ）：
   1. ヒーロー右パネルの「初回フワッと登場」用スタイル
   2. ヘッダーがスクロールで少し縮む演出のスタイル
   3. ナビの現在地ハイライト（金色の下線）
   4. 「数字で見るきずな不動産」バンドのデザイン
   5. アクセシビリティ配慮（動きを減らす設定への対応）

   ※ 実際に動かす処理は effects.js 側です。
   ※ index.html の <style> より後ろで読み込むので、
      同じ強さの指定はこちらが優先されます。
   ========================================================= */

/* ---------------------------------------------------------
   1. ヒーロー右パネルの登場アニメ
      <html> に .fx-on が付いたときだけ初期状態を「非表示」にし、
      JSが #hero に .is-loaded を付けたらフワッと出します。
      → JSが動かない環境では .fx-on が付かないので、
        パネルは最初から普通に表示されます（安全策）。
   --------------------------------------------------------- */
.fx-on #hero .hero-panel > div:first-child,
.fx-on #hero .hero-panel-btm {
 opacity: 0;
 transform: translateY(18px);
 transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}
.fx-on #hero.is-loaded .hero-panel > div:first-child {
 opacity: 1;
 transform: translateY(0);
}
.fx-on #hero.is-loaded .hero-panel-btm {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.18s; /* 上のブロックより少し遅れて出す */
}

/* ---------------------------------------------------------
   2. ヘッダーのスクロール演出
      下にスクロールすると JS が <header> に .is-scrolled を付与。
      ヘッダーが少し縮み、影が濃くなって「浮いてる感」を出します。
   --------------------------------------------------------- */
header {
 transition:
  box-shadow 0.3s ease,
  background-color 0.3s ease;
}
.header-inner {
 transition: height 0.3s ease;
}
.logo-img {
 transition: height 0.3s ease;
}

header.is-scrolled {
 background: rgba(255, 255, 255, 0.98);
 box-shadow: 0 6px 24px rgba(30, 92, 70, 0.16);
}
header.is-scrolled .header-inner {
 height: 60px;
}
header.is-scrolled .logo-img {
 height: 38px;
}

/* スマホ幅では元のヘッダーが少し小さいので、縮み幅もそれに合わせる */
@media (max-width: 900px) {
 header.is-scrolled .header-inner {
  height: 58px;
 }
 header.is-scrolled .logo-img {
  height: 32px;
 }
}

/* ---------------------------------------------------------
   3. ナビの現在地ハイライト（スクロールスパイ）
      今表示中のセクションに対応するメニューを JS が探し、
      .is-current を付与します。元からあるホバー下線を
      「点きっぱなし」にして、金色の文字色にします。
   --------------------------------------------------------- */
nav a.is-current {
 color: var(--navy);
}
nav a.is-current::after {
 width: 100%;
}

/* ---------------------------------------------------------
   4.「数字で見るきずな不動産」バンド
      選ばれる理由のすぐ下に入る、実績数字の帯です。
      数字は effects.js が 0 からカウントアップさせます。
   --------------------------------------------------------- */
.stats-band {
 background: var(--navy);
 color: var(--white);
 padding: 66px 0;
 position: relative;
 overflow: hidden;
}
/* 背景にうっすら光のにじみを置いて、のっぺり感を消す */
.stats-band::before {
 content: "";
 position: absolute;
 top: -40%;
 right: -10%;
 width: 420px;
 height: 420px;
 background: radial-gradient(
  circle,
  rgba(201, 160, 48, 0.16),
  rgba(201, 160, 48, 0) 70%
 );
 pointer-events: none;
}

.stats-head {
 text-align: center;
 margin-bottom: 42px;
 position: relative;
}
.stats-head-en {
 font-size: 13px;
 letter-spacing: 0.2em;
 color: var(--gold);
 font-weight: 700;
 text-transform: uppercase;
}
.stats-head-ja {
 font-family: var(--serif);
 font-size: clamp(22px, 2.4vw, 30px);
 color: var(--white);
 margin-top: 8px;
 letter-spacing: 0.04em;
}

.stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 position: relative;
}
.stat-item {
 text-align: center;
 padding: 18px 10px;
 position: relative;
}
/* 項目どうしの間に細い縦線 */
.stat-item:not(:last-child)::after {
 content: "";
 position: absolute;
 right: -10px;
 top: 50%;
 transform: translateY(-50%);
 width: 1px;
 height: 58px;
 background: rgba(255, 255, 255, 0.18);
}
.stat-num {
 font-family: var(--serif);
 font-weight: 700;
 line-height: 1;
 color: var(--gold);
 display: flex;
 align-items: baseline;
 justify-content: center;
 gap: 3px;
}
.stat-value {
 font-size: clamp(46px, 5vw, 66px);
 letter-spacing: 0.01em;
}
.stat-unit {
 font-size: clamp(18px, 2vw, 24px);
 font-weight: 600;
}
.stat-label {
 margin-top: 15px;
 font-size: 15px;
 color: rgba(255, 255, 255, 0.82);
 letter-spacing: 0.03em;
}
.stats-note {
 text-align: center;
 margin-top: 36px;
 font-size: 12px;
 color: rgba(255, 255, 255, 0.4);
 letter-spacing: 0.05em;
}

/* タブレット〜スマホ：2列に折り返し、縦線は消す */
@media (max-width: 760px) {
 .stats-band {
  padding: 54px 0;
 }
 .stats-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
 }
 .stat-item:not(:last-child)::after {
  display: none;
 }
 .stat-item {
  padding: 22px 8px;
 }
}

/* ---------------------------------------------------------
   5. アクセシビリティ配慮
      OS側で「視差効果を減らす」を ON にしている方には、
      フワッと動く演出を切って、最初から表示します。
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
 .fx-on #hero .hero-panel > div:first-child,
 .fx-on #hero .hero-panel-btm {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
 }
 header,
 .header-inner,
 .logo-img {
  transition: none !important;
 }
}
