@charset "utf-8";
/* 家づくりの流れ（/schedule）・土地探しと資金計画（/plan）の共通部品（T347）
   ページ固有の CSS（page-schedule.css / page-plan.css）の前に読む。
   動きは js/guide-motion.js が html に gd-js を付けたときだけ有効（JS が動かなければ全部見える）
   色と書体は分譲地（page-real_estate.css・T337）にそろえる */

:root {
  --gd-brown: #b1774c;
  --gd-deep: #4a2d1a;
  --gd-gold: #c9a063;
  --gd-ink: #1a1a1a;
  --gd-sub: #5c5149;
  --gd-line: #e3dbd0;
  --gd-cream: #f6f1ea;
  --gd-mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Sawarabi Mincho", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
  --gd-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 最初の画面（左に見出し・右に写真を画面の右端まで） ---------- */
.gd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 64px; margin: 0 0 110px; padding-left: max(24px, calc((100% - 1100px) / 2)); overflow: hidden; }
.gd-hero::before { content: attr(data-en); position: absolute; left: max(16px, calc((100% - 1100px) / 2 - 12px)); bottom: -14px; font-family: "Barlow", sans-serif; font-weight: 600; font-size: 120px; line-height: 1; letter-spacing: .06em; color: rgba(177, 119, 76, .07); white-space: nowrap; pointer-events: none; }
.gd-hero-body { position: relative; padding: 40px 0 70px; }
.gd-hero-ttl { margin: 0; padding: 0; background: none; border: 0; font-weight: 500; }
.gd-hero-en { display: block; margin: 0 0 22px; font-family: "Barlow", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .3em; line-height: 1; color: var(--gd-gold); text-transform: uppercase; }
.gd-hero-ss { display: block; margin: 0 0 10px; font-family: var(--gd-mincho); font-size: 15px; letter-spacing: .12em; line-height: 1.6; color: var(--gd-sub); }
.gd-hero-jp { display: block; font-family: var(--gd-mincho); font-size: 34px; font-weight: 500; line-height: 1.6; letter-spacing: .1em; color: var(--gd-ink); }
.gd-hero-line { display: block; width: 64px; height: 1px; margin: 28px 0; background: var(--gd-brown); }
.gd-hero-txt { font-family: var(--gd-mincho); font-size: 15px; line-height: 2.1; letter-spacing: .05em; color: var(--gd-sub); }
.gd-hero-pic { position: relative; height: 460px; overflow: hidden; border-radius: 6px 0 0 6px; background: var(--gd-cream); }
.gd-hero-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 写真と文字のカード（/schedule の STEP 01 の 3 枚） ---------- */
.gd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 980px; margin: 48px auto 0; padding: 0; list-style: none; }
.gd-cards > li { margin: 0; padding: 0; }
.gd-card { display: flex; flex-direction: column; height: 100%; color: var(--gd-ink); text-align: left; text-decoration: none; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(74, 45, 26, .08); transition: transform .5s var(--gd-ease), box-shadow .5s var(--gd-ease); }
.gd-card:hover { color: var(--gd-ink); text-decoration: none; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(74, 45, 26, .16); }
.gd-card-pic { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gd-cream); }
.gd-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gd-ease); }
.gd-card-pic--book img { object-fit: contain; padding: 16px 24px; box-sizing: border-box; }
.gd-card:hover .gd-card-pic img { transform: scale(1.06); }
.gd-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.gd-card-lead { display: block; margin: 0 0 8px; font-size: 13px; line-height: 1.75; letter-spacing: .04em; color: var(--gd-sub); }
.gd-card-ttl { display: block; font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; }
.gd-card-go { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 14px; color: var(--gd-brown); }
.gd-card-go i { position: relative; display: block; width: 26px; height: 1px; background: currentColor; transition: transform .4s var(--gd-ease); }
.gd-card-go i::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 1px; background: currentColor; transform: rotate(35deg); transform-origin: right center; }
.gd-card:hover .gd-card-go i { transform: translateX(6px); }

/* ---------- 電話番号（画像だったものを文字のリンクに） ---------- */
.gd-tel { display: inline-flex; align-items: center; gap: 12px; font-family: "Barlow", sans-serif; font-size: 44px; font-weight: 500; line-height: 1.2; letter-spacing: .04em; color: var(--gd-deep); text-decoration: none; transition: color .3s var(--gd-ease); }
.gd-tel:hover { color: var(--gd-brown); text-decoration: none; }
.gd-tel svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--gd-brown); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 動き（JS が gd-js を付けたときだけ） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 最初の画面: 写真は右から幕が開き、ゆっくり引く。文字は順に出る */
  .gd-js .gd-hero-pic { clip-path: inset(0 0 0 100%); transition: clip-path 1.4s var(--gd-ease) .1s; }
  .gd-js .gd-hero-pic img { transform: scale(1.14); transition: transform 2.6s var(--gd-ease) .1s; }
  .gd-js .gd-hero.is-in .gd-hero-pic { clip-path: inset(0 0 0 0); }
  .gd-js .gd-hero.is-in .gd-hero-pic img { transform: none; }
  .gd-js .gd-hero-en, .gd-js .gd-hero-ss, .gd-js .gd-hero-jp, .gd-js .gd-hero-txt { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--gd-ease), transform 1s var(--gd-ease); }
  .gd-js .gd-hero-ss { transition-delay: .2s; }
  .gd-js .gd-hero-jp { transition-delay: .32s; }
  .gd-js .gd-hero-txt { transition-delay: .75s; }
  .gd-js .gd-hero.is-in .gd-hero-en, .gd-js .gd-hero.is-in .gd-hero-ss, .gd-js .gd-hero.is-in .gd-hero-jp, .gd-js .gd-hero.is-in .gd-hero-txt { opacity: 1; transform: none; }
  .gd-js .gd-hero-line { width: 0; transition: width 1.2s var(--gd-ease) .6s; }
  .gd-js .gd-hero.is-in .gd-hero-line { width: 64px; }

  /* 画面に入ったらふわっと出す（--gd-d で順番をずらす） */
  .gd-js .gd-rv { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--gd-ease), transform 1s var(--gd-ease); transition-delay: var(--gd-d, 0s); }
  .gd-js .gd-rv.is-in { opacity: 1; transform: none; }

  /* 写真は幕が上がるように出る（幕の色は --gd-veil。濃い地の上では地の色にする） */
  .gd-js .gd-rv .gd-pic { position: relative; overflow: hidden; }
  .gd-js .gd-rv .gd-pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--gd-veil, var(--gd-cream)); transform-origin: top; transition: transform 1.1s var(--gd-ease); transition-delay: calc(var(--gd-d, 0s) + .25s); }
  .gd-js .gd-rv.is-in .gd-pic::after { transform: scaleY(0); }
  .gd-js .gd-rv .gd-pic img { transform: scale(1.12); transition: transform 1.8s var(--gd-ease); transition-delay: calc(var(--gd-d, 0s) + .25s); }
  .gd-js .gd-rv.is-in .gd-pic img { transform: none; }
  .gd-js .gd-rv.is-in .gd-card:hover .gd-card-pic img { transform: scale(1.06); transition-delay: 0s; transition-duration: 1.2s; }
}

/* ---------- 窓幅が狭い PC ---------- */
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .gd-hero { column-gap: 40px; }
  .gd-hero-jp { font-size: 28px; }
  .gd-hero-pic { height: 400px; }
}

/* ---------- SP ---------- */
@media screen and (max-width: 767px) {
  .gd-hero { grid-template-columns: 1fr; margin: 0 0 56px; padding-left: 0; }
  .gd-hero::before { left: 12px; bottom: -6px; font-size: 60px; }
  .gd-hero-pic { order: -1; height: auto; aspect-ratio: 828 / 550; border-radius: 0; }
  .gd-hero-body { padding: 32px 20px 40px; }
  .gd-hero-en { font-size: 12px; margin-bottom: 16px; }
  .gd-hero-ss { font-size: 14px; }
  .gd-hero-jp { font-size: 24px; letter-spacing: .06em; }
  .gd-hero-line { margin: 22px 0; }
  .gd-hero-txt { font-size: 15px; line-height: 2; letter-spacing: .04em; }
  .gd-js .gd-hero-pic { clip-path: inset(0 0 100% 0); }
  .gd-cards { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .gd-card { display: grid; grid-template-columns: 40% 1fr; }
  .gd-card-pic { aspect-ratio: auto; min-height: 120px; height: 100%; }
  .gd-card-pic--book img { padding: 10px; }
  .gd-card-body { padding: 14px 14px 12px; }
  .gd-card-lead { font-size: 12px; margin-bottom: 4px; }
  .gd-card-ttl { font-size: 16px; }
  .gd-card-go { padding-top: 8px; }
  .gd-tel { font-size: 32px; gap: 8px; }
  .gd-tel svg { width: 24px; height: 24px; }
}