:root{
  /* ---- ブランドカラー ----
     セクション背景は「白」か「#84A4A3」の2色だけを交互に使う。
     濃色 --brand-dark はフッターとRC造セクションのアクセント面のみ。 */
  --brand:      #84a4a3;   /* メインカラー：アクセント（面には使わない） */
  --paper:      #edf2f1;   /* セクション背景の淡色（参考サイト準拠） */
  --paper-2:    #f5f8f8;   /* さらに淡い面 */
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 2px 6px rgba(22,48,46,.04), 0 14px 34px rgba(22,48,46,.06);
  --brand-2:    #7ba8a5;   /* ひとつ沈めた面（重ね・ホバー） */
  --brand-deep: #3d6a67;   /* 線・小さな文字・塗りボタン（白背景でのコントラスト確保） */
  --brand-dark: #24413f;   /* アンカー面（フッター・RC造）／メインカラー面の上の小文字 */
  --brand-a:    #24413f;   /* メインカラー面の上のアクセント */
  --brand-tint: #e9f2f1;   /* 小さなパーツ用の淡色（セクション背景には使わない） */
  --brand-pale: #dcecea;   /* 小さなパーツ用の中間色（セクション背景には使わない） */

  /* ---- 地の色（すべてメインカラーと同色相に統一） ---- */
  --sky:    #b4d3d1;   /* 空 */
  --sky-2:  #dcecea;
  --sand:   #e9f2f1;   /* 旧ベージュ → メインカラーの淡いティント */
  --sand-2: #d7e7e5;
  --wood:   #c08d5f;   /* イラストの木部のみ */

  --white:  #ffffff;
  --ink:    #333333;   /* 墨（メインカラーと同色相の濃色） */
  --ink-2:  #444444;
  --grey:   #444444;
  --grey-2: #666666;
  --line:   #dbe7e5;

  /* 全ページ・全セクション共通のコンテンツ幅（左右の端をここで揃える） */
  --maxw: 1240px;
  --gap: clamp(72px, 8vw, 124px);

  --disp: "Jost", "Noto Sans JP", sans-serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --serif: "Playfair Display", "Times New Roman", serif;   /* agent.html エディトリアルFV見出し */
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* fieldset はブラウザ既定の枠線が残るのでリセット */
fieldset{ border:0; min-inline-size:0; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--white); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16.5px; line-height:1.95;
  letter-spacing:.02em; font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- 共通 ---------- */
.container{ width:min(var(--maxw), 100% - 48px); margin-inline:auto; }
/* 旧・狭幅コンテナ。セクションの左右端を全ページで揃えるため .container と同幅に統一。
   読み物系の行長は中身側（.msg / .news__list など）で調整する。 */
.container--narrow{ width:min(var(--maxw), 100% - 48px); margin-inline:auto; }
.section{ padding:var(--gap) 0; position:relative; background:var(--white); }
/* セクション背景は「白（.section 単体）」と「淡色 #EDF2F1（.section--brand）」の2色を交互に使う。
   メインカラー #84A4A3 は面ではなく、罫線・アイコン・ハイライトのアクセントとして使う。
   カードは面と反転させる（白面 → 淡色カード ／ 淡色面 → 白カード） */
.section--sand,.section--pale{ background:var(--white); }
.section--dark,.section--brand,.section--ink{ background:var(--paper); color:var(--ink); }

/* ---- メインカラー面の上での可読性・見え方の調整 ---- */
.section--brand .note{ color:var(--grey-2); }
.section--brand .faq__item,.section--brand .faq__item:first-child{ border-color:rgba(22,48,46,.14); }
.section--brand .faq__a-inner p{ color:var(--ink-2); }
.section--brand .news__list,.section--brand .news__item{ border-color:rgba(22,48,46,.14); }
.section--brand .news__item:hover{ background:var(--white); }
.section--brand .news__date,.section--brand .news__cat{ color:var(--brand); border-color:rgba(22,48,46,.16); }
.section--brand .profile__stats{ border-color:rgba(22,48,46,.14); }
.section--brand .profile__stat span,.section--brand .profile__role{ color:var(--grey); }
.section--brand .profile__career li{ color:var(--ink-2); }
.section--brand .profile__career li::before{ background:var(--brand-dark); }
.section--brand .shots figcaption span{ color:var(--ink-2); }
.section--brand .form__note,.section--brand .way p,.section--brand .way__spec b{ color:var(--grey); }
.section--brand .coming{ background:var(--white); border-color:var(--brand); }
.section--brand .coming p{ color:var(--grey); }
.section--brand .radar text{ fill:var(--ink-2); }
.section--brand .msg{ border-left-color:var(--brand); }

.eyebrow{
  display:inline-block; font-family:var(--disp); font-weight:600;
  font-size:12.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brand); margin-bottom:20px;
}
.section--dark .eyebrow,.section--brand .eyebrow{ color:var(--brand); }
.eyebrow--line{ position:relative; padding-left:42px; }
.eyebrow--line::before{ content:""; position:absolute; left:0; top:50%; width:30px; height:1px; background:currentColor; }

.h-xl{ font-weight:600; font-size:clamp(30px,4.4vw,48px); line-height:1.4; letter-spacing:.01em; }
.h-lg{ font-weight:600; font-size:clamp(24px,3.3vw,38px); line-height:1.45; letter-spacing:.01em; }
.h-md{ font-weight:600; font-size:clamp(19px,2.2vw,24px); line-height:1.6; }
.h-thin{ font-weight:400; }
.mark{ color:var(--brand); }
.mark{ color:var(--brand); }
.section--dark .mark,.section--brand .mark,.page-hero .mark{ color:var(--brand); background:linear-gradient(transparent 62%, rgba(132,164,163,.42) 62%); }

.section-head{ margin-bottom:clamp(40px,5vw,64px); }
.section-head--center{ text-align:center; }
.section-head--center .lead{ max-width:680px; margin-inline:auto; }
.section-head .eyebrow{ margin-bottom:16px; }
.lead{ font-size:clamp(15.5px,1.6vw,18px); line-height:2.05; color:var(--grey); }
.section--dark .lead,.section--brand .lead{ color:var(--ink-2); }
.note{ font-size:14px; line-height:1.85; color:var(--grey-2); }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:17px 34px; font-size:14.5px; letter-spacing:.06em; font-weight:700; border-radius:999px;
  border:1.5px solid var(--brand-deep); color:#fff; background:var(--brand-deep); transition:.32s ease;
}
.btn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn__arrow{ transition:transform .32s ease; }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn--brand{ background:var(--brand-deep); border-color:var(--brand); color:#fff; }
.btn--brand:hover{ background:var(--brand-d); border-color:var(--brand-d); }
.btn--line{ background:#06c755; border-color:#06c755; color:#fff; }
.btn--line:hover{ background:#05b04b; border-color:#05b04b; color:#fff; }
.btn--ghost-light{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--ghost-light:hover{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:transparent; transition:background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo__en{ font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:.2em; }
.logo__ja{ display:block; font-size:9px; letter-spacing:.24em; color:var(--grey); margin-top:3px; }
.gnav__list{ display:flex; align-items:center; gap:30px; list-style:none; }
.gnav__link{ font-size:13.5px; font-weight:500; letter-spacing:.06em; position:relative; padding:8px 0; }
.gnav__link::after{ content:""; position:absolute; left:0; bottom:2px; width:0; height:1.5px; background:var(--brand-deep); transition:width .3s; }
.gnav__link:hover::after{ width:100%; }
.header-cta .btn{ padding:12px 22px; font-size:13px; }
.nav-toggle{ display:none; }
.mobile-nav{ display:none; }

/* =========================================================
   ① FV（空を大きく／建物は低め・小さめ／空にコピーを置く）
   写真の空は #8dafb0。ページ側のグラデーションを同色に合わせ、
   写真上部24%（＝屋根ラインまで）をマスクで空へ溶かし込んでいる
   ========================================================= */
.fv{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  /* 空：天頂は濃く、地平に近づくほど白く霞む（実際の空の減光を再現） */
  background:linear-gradient(180deg,
    #6b96a9 0%, #7aa5b0 18%, #8ab2b4 38%, #9abeba 56%, #aecac2 74%, #c4d8cd 90%, #d3e1d5 100%);
}
/* 雲：やわらかい塊をいくつか重ね、ごくゆっくり流す */
.fv::before{
  content:""; position:absolute; inset:-6% -8%; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 26% at 16% 18%, rgba(255,255,255,.50), rgba(255,255,255,0) 68%),
    radial-gradient(30% 17% at 27% 25%, rgba(255,255,255,.42), rgba(255,255,255,0) 70%),
    radial-gradient(38% 20% at 58% 10%, rgba(255,255,255,.40), rgba(255,255,255,0) 70%),
    radial-gradient(52% 22% at 86% 24%, rgba(255,255,255,.34), rgba(255,255,255,0) 72%),
    radial-gradient(60% 18% at 42% 36%, rgba(255,255,255,.26), rgba(255,255,255,0) 74%),
    radial-gradient(70% 16% at 74% 45%, rgba(255,255,255,.20), rgba(255,255,255,0) 76%);
  animation:skyDrift 140s ease-in-out infinite alternate;
}
@keyframes skyDrift{ from{ transform:translate3d(-1.6%,0,0) } to{ transform:translate3d(1.6%,0,0) } }
@media (prefers-reduced-motion: reduce){ .fv::before{ animation:none } }
/* 建物：右下に寄せ、右端・下端いっぱいまで。左辺は空へ溶かし込む */
.fv__visual{
  position:absolute; right:0; bottom:0; z-index:0; pointer-events:none;
  /* 写真(2400×1360)とほぼ同じ比率にして、建物の左右が切れないようにする */
  width:min(76%, 1240px); aspect-ratio:100/58; max-height:70svh;
}
.fv__stage{
  position:relative; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 34%);
}
/* 反転して背の高い棟を右へ。空(#8dafb0)はページ背景と同色なので継ぎ目が出ない */
.fv__photo{
  width:100%; height:100%; object-fit:cover; object-position:center bottom; transform:scaleX(-1);
  /* 写真自身の空（上24%＝屋根ラインまで）を抜き、ページ側の空と雲に置き換える */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 6%,#000 24%);
          mask-image:linear-gradient(180deg,transparent 0%,transparent 6%,#000 24%);
}
.fv__people{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* コピーは左半分に置く */
.fv__inner{ position:relative; z-index:2; padding:clamp(96px,11vh,132px) 0 clamp(44px,6vh,80px); }
.fv__copy{ max-width:min(760px, 55%); }
.fv__label{
  display:inline-block; font-family:var(--disp); font-weight:500; font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.22em; color:var(--brand); margin-bottom:20px;
  position:relative; padding-left:44px;
}
.fv__label::before{ content:""; position:absolute; left:0; top:.72em; width:32px; height:1.5px; background:var(--brand-dark); }
.fv__title{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(36px,6.3vw,92px); line-height:1.08; letter-spacing:-.02em; color:var(--ink);
}
.fv__title .accent{ color:#fff; }
.fv__sub{ margin-top:22px; font-weight:600; font-size:clamp(15px,1.85vw,23px); line-height:1.75; letter-spacing:.04em; color:var(--ink); }
.fv__note{ margin:14px 0 0; font-size:clamp(13.5px,1.45vw,16px); line-height:1.95; color:var(--ink-2); max-width:30em; }
.fv__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start; }
.fv__scroll{
  position:absolute; right:clamp(20px,4vw,56px); bottom:22px; z-index:3;
  font-family:var(--disp); font-size:10px; letter-spacing:.28em; color:var(--ink-2); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.fv__scroll i{ display:block; width:1px; height:44px; background:linear-gradient(var(--ink-2),transparent); }

/* FVアニメーション：①イラスト→②文字→③人 */
@keyframes fvArt{ from{ opacity:0; transform:scale(1.04) } to{ opacity:1; transform:none } }
@keyframes fvUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
.fv__visual{ animation:fvArt 1.5s cubic-bezier(.2,.7,.2,1) both; }
.fv__label{ animation:fvUp .9s ease-out .9s both; }
.fv__title{ animation:fvUp 1s ease-out 1.1s both; }
.fv__sub{ animation:fvUp 1s ease-out 1.35s both; }
.fv__note{ animation:fvUp 1s ease-out 1.5s both; }
.fv__actions{ animation:fvUp 1s ease-out 1.65s both; }
.fv__scroll{ animation:fvUp 1s ease-out 2.2s both; }

/* ③ 人が並んでアプローチを歩いて行く */
.walkers{ animation:fvWalk 34s linear 1.9s infinite; }
@keyframes fvWalk{
  0%{ transform:translateX(-460px); opacity:0 }
  4%{ opacity:1 }
  95%{ opacity:1 }
  100%{ transform:translateX(1620px); opacity:0 }
}
.walker__body{ animation:fvBob .62s ease-in-out infinite alternate; }
@keyframes fvBob{ from{ transform:translateY(0) } to{ transform:translateY(-3px) } }
.leg{ animation:fvStep .62s ease-in-out infinite alternate; }
.leg--b{ animation-direction:alternate-reverse; }
@keyframes fvStep{ from{ transform:rotate(-13deg) } to{ transform:rotate(13deg) } }
@media (prefers-reduced-motion: reduce){
  .fv__visual,.fv__label,.fv__title,.fv__sub,.fv__note,.fv__actions,.fv__scroll,
  .walkers,.walker__body,.leg{ animation:none !important; }
  .walkers{ transform:translateX(380px); }
}

/* =========================================================
   ② 不動産エージェント？？（黒基調・ゴシック）
   ========================================================= */
.agent{ background:var(--paper); color:var(--ink); overflow:hidden; }
.agent__index{ display:flex; align-items:center; gap:14px; font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--brand); margin-bottom:24px; }
.agent__index::before{ content:""; width:46px; height:1.5px; background:var(--brand-dark); flex:none; }
.agent__title{ font-weight:600; font-size:clamp(26px,5.1vw,68px); line-height:1.1; letter-spacing:-.02em; }
.agent__title .q{ display:block; color:var(--brand); }
.agent__slogan{ margin-top:20px; font-family:var(--disp); font-weight:600; font-size:clamp(13px,1.7vw,20px); letter-spacing:.18em; color:var(--brand); }

/* 横に流れる帯 */
.marquee{ background:var(--brand-dark); color:#fff; padding:16px 0; margin:clamp(44px,6vw,76px) 0 clamp(40px,5vw,64px); overflow:hidden; }
.marquee__track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee__track span{ display:inline-flex; align-items:center; gap:clamp(24px,3vw,44px); font-weight:700; font-size:clamp(15px,2vw,26px); letter-spacing:.04em; padding-right:clamp(24px,3vw,44px); white-space:nowrap; }
.marquee__track span::after{ content:""; width:7px; height:7px; background:var(--brand); transform:rotate(45deg); flex:none; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none } }

/* キャッチコピーが動く（絵コンテ指定：行ごとにせり上がる） */
.agent__line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.agent__line > span{ display:block; transform:translateY(112%); transition:transform 1.05s cubic-bezier(.2,.75,.2,1); }
.agent__line:first-of-type > span{ color:var(--brand); }
.agent__line--q > span{ color:var(--ink); }
.reveal.is-in .agent__line:nth-of-type(1) > span{ transform:none; transition-delay:.06s; }
.reveal.is-in .agent__line:nth-of-type(2) > span{ transform:none; transition-delay:.22s; }
@media (prefers-reduced-motion: reduce){ .agent__line > span{ transform:none !important; } }

/* 小は、大を兼ねる（フリーエージェント × TERASS） */
.synergy{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,2.4vw,32px); align-items:stretch; }
.synergy__card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(28px,3vw,42px); }
.synergy__card--fill{ background:var(--brand-dark); color:#fff; }
.synergy__tag{ font-family:var(--disp); font-size:11px; letter-spacing:.2em; color:var(--brand); }
.synergy__card--fill .synergy__tag{ color:var(--brand); }
.synergy__name{ font-weight:600; font-size:clamp(18px,2.2vw,24px); line-height:1.5; margin:10px 0 24px; }
.synergy__head{ font-family:var(--disp); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2); margin:22px 0 12px; }
.synergy__card--fill .synergy__head{ color:#8fb0ae; }
.synergy__list{ list-style:none; display:grid; gap:10px; }
.synergy__list li{ position:relative; padding-left:24px; font-size:15.5px; line-height:1.8; color:var(--grey); }
.synergy__card--fill .synergy__list li{ color:#cfe0de; }
.synergy__list li::before{ content:"○"; position:absolute; left:0; top:.1em; font-size:12px; color:var(--brand); }
.synergy__card--fill .synergy__list li::before{ color:var(--brand); }
.synergy__list--minus li::before{ content:"△"; color:#b08d4a; }
.synergy__x{ display:flex; align-items:center; justify-content:center; }
.synergy__x svg{ width:clamp(34px,4vw,56px); height:auto; stroke:var(--brand-dark); stroke-width:5; fill:none; stroke-linecap:round; }
.synergy__result{ text-align:center; margin:clamp(30px,4vw,52px) 0 clamp(48px,6vw,80px); font-weight:600; font-size:clamp(26px,5vw,60px); line-height:1.4; letter-spacing:.02em; color:var(--ink); }
.synergy__result em{ font-style:normal; background:linear-gradient(transparent 56%, rgba(132,164,163,.45) 56%); }

/* 比較表 */
.compare{ display:grid; grid-template-columns:clamp(120px,15vw,190px) 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.compare__row{ display:contents; }
.compare__label,.compare__col{ background:var(--paper-2); }
.compare__label{ display:flex; align-items:center; padding:20px clamp(12px,1.4vw,20px); font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--ink); }
.compare__col{ padding:22px clamp(16px,1.8vw,26px); font-size:15.5px; line-height:1.9; }
.compare__col--a{ background:#fff; }
.compare__col--b{ background:var(--paper); color:var(--ink-2); }
.compare__row--head .compare__label{ background:var(--paper-2); }
.compare__row--head .compare__col{ padding-top:28px; padding-bottom:26px; }
.compare__row--head .compare__col--a{ box-shadow:inset 0 4px 0 var(--brand-deep); }
.compare__tag{ display:block; font-family:var(--disp); font-size:10.5px; letter-spacing:.2em; color:var(--brand); margin-bottom:10px; }
.compare__col--b .compare__tag{ color:var(--brand); }
.compare__row--head b{ font-weight:600; font-size:clamp(16px,1.9vw,21px); line-height:1.5; }

/* 結論 */
.agent__conclusion{ margin-top:clamp(36px,4.5vw,60px); background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(32px,4vw,58px); text-align:center; }
.agent__conclusion p{ font-weight:600; font-size:clamp(21px,3.4vw,38px); line-height:1.5; letter-spacing:.01em; }
.agent__conclusion em{ font-style:normal; color:var(--brand); }
.agent__conclusion span{ display:block; margin-top:18px; font-size:15.5px; line-height:1.95; color:var(--grey); }

/* 訴求4点 */
.points{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,20px); margin-top:clamp(28px,3.4vw,48px); }
.point{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:34px 26px; text-align:center; }
.point .ico{ width:34px; height:34px; margin:0 auto 16px; color:var(--brand); }
.point h3{ font-weight:700; font-size:15.5px; letter-spacing:.02em; margin-bottom:9px; color:var(--ink); }
.point p{ font-size:15px; line-height:1.85; color:var(--grey); }

/* 住宅模型モチーフ（右上・左下などに配置して統一感を出す） */
.deco-model{ position:absolute; z-index:0; width:clamp(92px,11vw,164px); height:auto; color:var(--brand); opacity:.4; pointer-events:none; }
.deco-model--tr{ top:clamp(22px,4vw,60px); right:clamp(14px,3.4vw,64px); }
.deco-model--bl{ bottom:clamp(22px,4vw,60px); left:clamp(14px,3.4vw,64px); }
.section > .container{ position:relative; z-index:1; }

/* =========================================================
   ③ CLASSOについて（5段階＋3つのマッチング＋プロフィール）
   ========================================================= */
.about__top{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,80px); align-items:center; }
.about__catch{ font-weight:600; font-size:clamp(23px,3.4vw,40px); line-height:1.5; letter-spacing:.01em; }
.about__catch .hl{ background:none; }
.about__body{ margin-top:26px; font-size:16px; line-height:2.05; color:var(--grey); }
.about__models{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.about__models img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); }
.about__models figure:first-child{ margin-top:56px; }

/* 5段階 */
.steps5{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,16px); margin-top:clamp(48px,6vw,76px); }
.step5{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 24px 28px; }
.step5__no{ display:none; }
.step5__ico{ width:38px; height:38px; margin:14px 0 12px; color:var(--brand); }
.step5 h3{ font-weight:600; font-size:16px; line-height:1.55; margin-bottom:10px; }
.step5 p{ font-size:15px; line-height:1.85; color:var(--grey); }

/* 3つのマッチング（△＝三角形に配置：01を頂点、02・03を底辺に） */
.matching{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:52px; }
.matching--tri{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px) clamp(40px,8vw,140px);
  max-width:820px; margin-inline:auto; position:relative;
}
.matching--tri .match:first-child{ grid-column:1 / -1; justify-self:center; width:min(300px,52%); }
/* 三角形をなぞる細い補助線 */
.matching--tri::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .75px), rgba(61,106,103,.28) calc(50% - .75px), rgba(61,106,103,.28) calc(50% + .75px), transparent calc(50% + .75px)) left top / 50% 100% no-repeat,
    linear-gradient(to bottom left,  transparent calc(50% - .75px), rgba(61,106,103,.28) calc(50% - .75px), rgba(61,106,103,.28) calc(50% + .75px), transparent calc(50% + .75px)) right top / 50% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 26%,#000 52%,transparent 62%);
          mask-image:linear-gradient(180deg,transparent 4%,#000 26%,#000 52%,transparent 62%);
}
.matching--tri .match{ position:relative; z-index:1; }
.match{ text-align:center; }
.match__circle{
  width:min(220px,72%); aspect-ratio:1/1; margin:0 auto 20px; border-radius:50%;
  border:1.5px solid var(--brand-deep); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:18px; transition:background .35s, color .35s;
}
.match:hover .match__circle{ background:var(--brand-deep); color:#fff; }
.match__circle .ico{ width:38px; height:38px; }
.match__circle b{ font-weight:700; font-size:16px; letter-spacing:.04em; }
.match__no{ font-family:var(--disp); font-size:11px; letter-spacing:.22em; color:var(--brand); }
.match p{ font-size:15px; line-height:1.9; color:var(--grey); }

/* プロフィール */
.profile{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(36px,5vw,74px); align-items:center; }
.profile__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); }
/* 正方形の原版を3:4で切り出す際、人物が中央に収まるよう寄せる */
.profile__media--focus-right img{ object-position:80% center; }
/* TOP：写真を小さめにして本文側に幅を渡す */
.profile--sm-media{ grid-template-columns:.58fr 1.42fr; }
/* ABOUT：横長写真を3/4で切り出すと住宅模型が切れるので、右寄りを見せる */
.about__models--focus-right{ object-position:62% center; }

/* TOP：ボタンの右どなり（ブロック右下）にレーダーチャートを収める */
.profile__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,44px); flex-wrap:wrap;
}
.profile__foot .radar{ flex:0 0 auto; width:min(320px,100%); }
/* 図が小さくなるぶん、軸ラベルは相対的に大きくする */
.profile__foot .radar text{ font-size:14px; }
@media (max-width:900px){
  .profile__foot{ justify-content:flex-start; }
  .profile__foot .radar{ margin-inline:auto; }
}
.profile__name{ font-weight:600; font-size:clamp(22px,2.8vw,30px); letter-spacing:.06em; }
.profile__name small{ display:block; font-family:var(--disp); font-weight:400; font-size:14px; letter-spacing:.18em; color:var(--brand); margin-top:8px; }
.profile__role{ font-size:15px; line-height:1.9; color:var(--grey); margin:16px 0 26px; }
.profile__grid{ display:grid; grid-template-columns:1fr minmax(300px,460px); gap:clamp(24px,3vw,48px); align-items:center; }
.profile__career{ list-style:none; display:grid; gap:10px; }
.profile__career li{ font-size:15.5px; line-height:1.9; color:var(--ink-2); padding-left:20px; position:relative; }
.profile__career li::before{ content:""; position:absolute; left:0; top:.85em; width:8px; height:1.5px; background:var(--brand-deep); }
.radar{ width:100%; max-width:460px; height:auto; }
.radar text{ font-family:var(--sans); font-size:12px; fill:var(--ink-2); font-weight:700; }
.profile__stats{ display:flex; gap:36px; flex-wrap:wrap; margin:26px 0; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.profile__stat b{ font-family:var(--disp); font-weight:400; font-size:34px; line-height:1; }
.profile__stat i{ font-style:normal; font-size:14px; }
.profile__stat span{ display:block; font-size:12.5px; letter-spacing:.04em; color:var(--grey-2); margin-top:8px; }

/* =========================================================
   ④ サービス
   ========================================================= */
.srv{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.srv + .srv{ margin-top:clamp(72px,9vw,120px); }
.srv--rev .srv__media{ order:2; }
.srv__no{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.24em; color:var(--brand); }
.srv__title{ font-weight:600; font-size:clamp(21px,2.9vw,32px); line-height:1.5; margin:12px 0 18px; }
.srv__text{ font-size:16.5px; line-height:2.02; color:var(--grey); }
.section--brand .srv__text{ color:var(--ink-2); }
.srv__media{ display:grid; gap:12px; }
.srv__media img{ width:100%; height:100%; object-fit:cover; }
.srv__media svg{ width:100%; height:auto; display:block; }
.srv__media--trio{ grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:4/3; }
.srv__media--trio figure:first-child{ grid-row:span 2; }
.srv__media figure{ overflow:hidden; border-radius:var(--radius); }
.srv__media figcaption{ font-size:11px; letter-spacing:.06em; color:var(--grey-2); margin-top:6px; }
.section--brand .srv__media figcaption{ color:var(--brand); }

.merit-list{ list-style:none; display:grid; gap:14px; margin-top:26px; border-top:1px solid var(--line); padding-top:22px; }
.section--brand .merit-list{ border-color:rgba(22,48,46,.14); }
.merit-list li{ display:grid; grid-template-columns:32px 1fr; gap:14px; align-items:start; font-size:15.5px; line-height:1.85; }
.merit-list b{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--brand); padding-top:.35em; }
.section--brand .merit-list b{ color:var(--brand); }
.merit-list span{ color:var(--grey); }
.section--brand .merit-list span{ color:var(--ink-2); }
.merit-list strong{ display:block; font-weight:700; color:var(--ink); margin-bottom:2px; }
.section--brand .merit-list strong{ color:var(--ink); }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tags li{ font-size:13.5px; font-weight:700; letter-spacing:.04em; border:1px solid currentColor; border-radius:999px; padding:8px 18px; color:var(--brand); }
.section--brand .tags li{ color:var(--brand); }

.rc-values{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,20px); margin-top:clamp(48px,6vw,72px); }
.rc-value{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 24px; text-align:center; }
.rc-value .ico{ width:34px; height:34px; margin:0 auto 14px; color:var(--brand); }
.rc-value h4{ font-weight:700; font-size:16px; margin-bottom:9px; }
.rc-value p{ font-size:15px; line-height:1.85; color:var(--grey); }

.cmp{ width:100%; border-collapse:collapse; margin-top:32px; font-size:14px; }
.cmp caption{ text-align:left; font-size:13px; color:var(--brand); padding-bottom:12px; }
.cmp th,.cmp td{ border:1px solid rgba(22,48,46,.18); padding:12px 10px; text-align:center; }
.cmp thead th{ font-weight:700; font-size:13px; letter-spacing:.04em; background:rgba(22,48,46,.08); }
.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink-2); white-space:nowrap; }
.cmp .best{ background:#fff; color:var(--ink); font-weight:700; }
.cmp .mk{ font-family:var(--disp); font-size:16px; }

.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,16px); margin-top:clamp(48px,6vw,76px); }
.flow__item{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 22px; }
.flow__no{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.16em; color:var(--brand); }
.flow__item h4{ font-weight:600; font-size:15px; margin:10px 0 6px; }
.flow__item p{ font-size:14.5px; line-height:1.8; color:var(--grey); }

.coming{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:clamp(48px,6vw,72px); border:1px dashed var(--brand); border-radius:var(--radius); background:var(--white); padding:clamp(24px,3vw,34px); }
.coming__tag{ font-family:var(--disp); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; background:var(--brand-deep); color:#fff; padding:7px 16px; border-radius:999px; }
.coming p{ font-size:15.5px; line-height:1.95; color:var(--grey); flex:1 1 320px; }

/* =========================================================
   service.html：3サービスの色分け
   白 ↔ 淡色 #EDF2F1 を交互に敷き、カードは白で浮かせる
   ========================================================= */
.section--ink .rc-value{ background:var(--white); }

/* セクション見出しの通し番号（01 / 02 / 03） */
.svc-index{ display:flex; align-items:baseline; gap:16px; margin-bottom:14px; }
.svc-index b{ font-family:var(--disp); font-weight:300; font-size:clamp(40px,5.4vw,68px); line-height:1; color:var(--brand); }
.section--brand .svc-index b{ color:var(--brand); }
.section--ink .svc-index b{ color:var(--brand); }
.svc-index span{ font-family:var(--disp); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-2); }
.section--brand .svc-index span{ color:var(--brand); }
.section--ink .svc-index span{ color:var(--grey-2); }

/* 経歴クレデンシャル帯（絵コンテ左端の「元◯◯出身」） */
.creds{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,16px); }
.creds li{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 24px; }
.creds small{ display:block; font-family:var(--disp); font-size:11.5px; letter-spacing:.2em; color:var(--brand); margin-bottom:10px; }
.creds b{ display:block; font-size:15.5px; font-weight:600; line-height:1.65; color:var(--ink); }
.creds span{ display:block; font-size:14.5px; line-height:1.8; color:var(--grey); margin-top:10px; }

/* 絵コンテ上段の4コマ（エリア・相場・現地・総額） */
.shots{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); margin-top:clamp(32px,4vw,50px); }
.shots figure{ margin:0; }
.shots img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.shots figcaption{ margin-top:14px; font-size:14.5px; font-weight:700; letter-spacing:.04em; color:var(--ink); }
.shots figcaption span{ display:block; margin-top:6px; font-size:14px; font-weight:400; line-height:1.8; color:var(--grey); }

/* RC造の価値5項目 */
.rc-values--5{ grid-template-columns:repeat(5,1fr); }

/* 設計・提案 × 担当者（絵コンテ中段の2つの丸） */
.duo{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(14px,2.4vw,34px); margin-top:clamp(34px,4.4vw,56px); }
.duo__circle{
  width:clamp(150px,17vw,208px); aspect-ratio:1/1; border-radius:50%;
  border:1.5px solid var(--brand-dark); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center;
}
.duo__circle .ico{ width:34px; height:34px; }
.duo__circle b{ font-weight:700; font-size:16.5px; letter-spacing:.04em; }
.duo__circle small{ display:block; font-size:14px; line-height:1.7; color:var(--ink-2); }
.duo__x{ font-family:var(--disp); font-size:clamp(22px,3vw,34px); color:var(--brand); }

/* =========================================================
   ⑤ Q&A・ご相談
   ========================================================= */
.persona{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); }
.persona__card{ text-align:center; }
.persona__face{ width:96px; height:96px; margin:0 auto 18px; }
.persona__bubble{
  position:relative; background:var(--white); border:1.5px solid var(--brand-deep); border-radius:var(--radius);
  padding:24px 22px; font-size:15.5px; line-height:1.9; color:var(--ink-2);
}
.persona__bubble::before,.persona__bubble::after{ content:""; position:absolute; left:calc(50% - 11px); border:11px solid transparent; }
.persona__bubble::before{ top:-22px; border-bottom-color:var(--brand); }
.persona__bubble::after{ top:-19px; border-bottom-color:var(--white); }
.persona__name{ display:block; font-weight:700; color:var(--brand); margin-bottom:6px; font-size:15.5px; }

/* 幅は他セクションと同じ（コンテナ幅いっぱい）に揃える */
.faq{ max-width:none; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-child{ border-top:1px solid var(--line); }
.faq__q{
  width:100%; text-align:left; background:none; border:0; display:flex; align-items:center; gap:16px;
  padding:26px 4px; font-size:16.5px; font-weight:700; letter-spacing:.02em; line-height:1.6; color:var(--ink);
}
.faq__q .mark-q{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand-deep); color:#fff;
  font-family:var(--disp); font-size:13px; display:flex; align-items:center; justify-content:center;
}
.faq__q .plus{ margin-left:auto; flex:none; position:relative; width:15px; height:15px; }
.faq__q .plus::before,.faq__q .plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--ink); }
.faq__q .plus::before{ width:15px; height:1.5px; }
.faq__q .plus::after{ width:1.5px; height:15px; transition:transform .3s ease; }
.faq__item.is-open .plus::after{ transform:scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq__a-inner{ display:flex; gap:16px; padding:0 4px 26px; }
.faq__a-inner .mark-a{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand-tint); color:var(--ink-2);
  font-family:var(--disp); font-size:13px; display:flex; align-items:center; justify-content:center;
}
.faq__a-inner p{ font-size:16px; line-height:2; color:var(--grey); }

/* 相談方法 */
.ways{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(20px,3vw,32px); }
.way{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; }
.way--reco{ outline:2px solid var(--brand-deep); outline-offset:-2px; position:relative; }
.way__reco{ position:absolute; top:-14px; left:clamp(26px,3vw,38px); background:var(--brand-deep); color:#fff; font-size:12px; font-weight:700; letter-spacing:.1em; padding:7px 18px; border-radius:999px; }
.way__ico{ width:40px; height:40px; color:var(--brand); margin-bottom:18px; }
.way h3{ font-weight:600; font-size:clamp(18px,2.2vw,22px); margin-bottom:12px; }
.way p{ font-size:15.5px; line-height:1.95; color:var(--grey); }
.way__spec{ list-style:none; margin:20px 0; display:grid; gap:8px; }
.way__spec li{ display:grid; grid-template-columns:100px 1fr; gap:12px; font-size:14.5px; line-height:1.75; }
.way__spec dt,.way__spec b{ color:var(--grey-2); font-weight:500; }
.gift{ display:flex; align-items:center; gap:14px; background:var(--paper); border-radius:var(--radius-sm); padding:18px 20px; margin:6px 0 20px; }
.gift b{ font-size:16px; font-weight:700; color:var(--brand); white-space:nowrap; }
.gift span{ font-size:14px; line-height:1.75; color:var(--ink-2); }
.way .btn{ width:100%; margin-top:auto; }

/* フォーム */
.form{ max-width:820px; margin:clamp(56px,7vw,88px) auto 0; }
.form__title{ text-align:center; font-weight:600; font-size:20px; margin-bottom:8px; }
.form__note{ text-align:center; margin-bottom:36px; }
.field{ margin-bottom:22px; }
.field label,.field legend{ display:block; font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-2); margin-bottom:10px; }
.field .req{ font-family:var(--disp); color:#fff; background:var(--brand-deep); font-size:10px; margin-left:8px; letter-spacing:.08em; padding:2px 7px; }
.field .opt{ font-family:var(--disp); color:var(--grey-2); border:1px solid var(--line); font-size:10px; margin-left:8px; letter-spacing:.08em; padding:2px 7px; }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); }
.field textarea{ min-height:130px; resize:vertical; line-height:1.8; }
.field--half{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.radios{ display:flex; flex-wrap:wrap; gap:12px; border:0; }
.radios label{ display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:500; font-size:14px; border:1px solid var(--line); border-radius:999px; padding:12px 20px; cursor:pointer; background:var(--white); }
.radios input{ width:auto; }
.form__submit{ text-align:center; margin-top:10px; }
.form__submit .btn{ padding:17px 54px; }

/* CTA帯 */
.cta{ text-align:center; }
.cta__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer{ background:var(--brand-dark); color:#c2d6d4; padding:76px 0 32px; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
.footer .logo__en{ color:#fff; }
.footer .logo__ja{ color:var(--brand); }
.footer__info{ font-size:14.5px; line-height:1.95; margin-top:20px; color:#c2d6d4; }
.footer__title{ font-family:var(--disp); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:18px; }
.footer__links{ list-style:none; display:grid; gap:11px; }
.footer__links a{ font-size:14.5px; transition:color .3s; }
.footer__links a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); }
.copyright{ font-family:var(--disp); font-size:11px; letter-spacing:.12em; color:#7d9997; }

/* =========================================================
   スクロール演出（参考サイト TERASS と同じ仕様）
   単体要素＝0.7s／グリッドの子要素＝0.6s を 0.1s ずつ遅延
   ========================================================= */
.reveal,[data-reveal]{
  opacity:0; transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
.reveal.is-in,[data-reveal].is-visible,[data-reveal].is-in{ opacity:1; transform:translate(0,0); }

/* グリッドは器を出しっぱなしにして、中のカードを順に立ち上げる */
.reveal:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list),[data-reveal-children]{
  opacity:1; transform:none; transition:none;
}
.reveal:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *,
[data-reveal-children] > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1),
             box-shadow .25s ease, background-color .25s ease;
}
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *,
[data-reveal-children]:is(.is-visible,.is-in) > *{
  opacity:1; transform:translateY(0);
}
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:nth-child(1),[data-reveal-children].is-in > *:nth-child(1){ transition-delay:0s; }
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:nth-child(2),[data-reveal-children].is-in > *:nth-child(2){ transition-delay:.1s; }
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:nth-child(3),[data-reveal-children].is-in > *:nth-child(3){ transition-delay:.2s; }
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:nth-child(4),[data-reveal-children].is-in > *:nth-child(4){ transition-delay:.3s; }
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:nth-child(5),[data-reveal-children].is-in > *:nth-child(5){ transition-delay:.4s; }
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:nth-child(6),[data-reveal-children].is-in > *:nth-child(6){ transition-delay:.5s; }
/* 出現後のホバーは遅延させない */
.reveal.is-in:is(.merits,.svc-cards,.steps5,.flow,.traits,.creds,.rc-values,.points,.shots,.matching,.persona,.model-gallery,.news__list,.faq,.ways,.duo,.profile__stats,.merit-list) > *:hover,[data-reveal-children].is-in > *:hover{ transition-delay:0s; }

@media (prefers-reduced-motion: reduce){
  .reveal,[data-reveal],.reveal > *,[data-reveal-children] > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1080px){
  .steps5,.flow{ grid-template-columns:repeat(3,1fr); }
  .points,.rc-values,.rc-values--5{ grid-template-columns:1fr 1fr; }
  .shots{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .about__top,.profile,.profile__grid,.srv,.ways,.synergy{ grid-template-columns:1fr; }
  .synergy__x{ padding:4px 0; }
  .compare{ grid-template-columns:1fr 1fr; }
  .compare__label{ grid-column:1 / -1; background:var(--paper); padding:12px 16px; }
  .srv--rev .srv__media{ order:0; }
  .profile__media,.about__models{ max-width:480px; }
  .radar{ margin-inline:auto; }
  .versus{ grid-template-columns:1fr; }
  .versus__x{ padding:6px 0; }
  .matching{ grid-template-columns:1fr; }
  .matching--tri{ grid-template-columns:1fr; }
  .matching--tri::before{ display:none; }
  .matching--tri .match:first-child{ width:min(200px,58%); }
  .match__circle{ width:min(200px,58%); }
  .persona{ grid-template-columns:1fr; }
  .persona__card{ max-width:460px; margin-inline:auto; }
  .creds{ grid-template-columns:1fr 1fr; }
  /* FV：文字 → 建物の縦積み（建物は幅いっぱい・低く） */
  .fv{ min-height:auto; }
  .fv__inner{ padding:104px 0 clamp(16px,3vh,28px); }
  .fv__copy{ max-width:100%; }
  .fv__visual{ position:relative; right:auto; bottom:auto; width:100%; height:auto; }
  .fv__stage{ height:auto; width:100%; -webkit-mask-image:none; mask-image:none; }
  .fv__photo{ height:auto; aspect-ratio:2400/1360; }
  .fv__scroll{ display:none; }
}
@media (max-width: 700px){
  .gnav,.header-cta{ display:none; }
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:0; }
  .nav-toggle span{ display:block; width:24px; height:1.6px; background:var(--ink); transition:.3s; margin-left:auto; }
  .site-header.nav-open{ background:var(--white); border-bottom-color:var(--line); }
  .nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
  .mobile-nav{ display:block; position:fixed; inset:76px 0 auto 0; z-index:59; background:var(--white); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .4s ease; }
  .mobile-nav.is-open{ max-height:84vh; }
  .mobile-nav ul{ list-style:none; padding:12px 24px 26px; }
  .mobile-nav a{ display:block; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .mobile-nav .btn{ margin-top:18px; width:100%; }
  .steps5,.flow,.points,.rc-values,.rc-values--5{ grid-template-columns:1fr; }
  .creds{ grid-template-columns:1fr; }
  .shots{ grid-template-columns:1fr 1fr; }
  .compare{ grid-template-columns:1fr; }
  .compare__col--a,.compare__col--b{ padding-top:14px; padding-bottom:14px; }
  .deco-model{ display:none; }
  .srv__media--trio{ grid-template-columns:1fr 1fr; }
  .srv__media--trio figure:first-child{ grid-row:span 1; grid-column:span 2; }
  .field--half{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .cmp{ font-size:12px; }
  .cmp th,.cmp td{ padding:9px 5px; }
}

/* =========================================================
   下層ページ共通（profile / service / rc / contact）
   ========================================================= */
.page .site-header{ background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.gnav__link.is-current{ color:var(--brand); }
.gnav__link.is-current::after{ width:100%; }
.mobile-nav a[aria-current]{ color:var(--brand); font-weight:700; }

.page-hero{ background:var(--paper); color:var(--ink); padding:calc(76px + clamp(52px,8vw,104px)) 0 clamp(52px,7vw,88px); position:relative; overflow:hidden; }
.page-hero > .container{ position:relative; z-index:1; }
.page-hero--brand{ background:var(--paper); color:var(--ink); }
.page-hero--brand .lead{ color:var(--ink-2); }
.page-hero--brand .eyebrow{ color:var(--brand); }
.page-hero .eyebrow{ color:var(--brand); }
.page-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; }
.page-hero h1{ font-weight:600; font-size:clamp(26px,4.2vw,46px); line-height:1.45; letter-spacing:.01em; margin-bottom:22px; }
.page-hero .lead{ max-width:38em; color:var(--ink-2); }
/* 縦長のポートレートは正方形で切り出し（顔は切らず、余白が出過ぎないバランス） */
.page-hero__media:not(.page-hero__media--wide){ max-width:430px; margin-left:auto; }
.page-hero__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 40%; border-radius:var(--radius); }
.page-hero__media--wide img{ aspect-ratio:4/3; object-position:center; }
/* 本文が短いページのヒーローは上下の余白を詰める */
.page-hero--compact{ padding:calc(76px + clamp(34px,5vw,64px)) 0 clamp(34px,5vw,64px); }
.page-hero--compact .page-hero__grid{ grid-template-columns:1.12fr .88fr; }
.breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; letter-spacing:.06em; color:var(--grey-2); margin-bottom:24px; }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb li+li::before{ content:"／"; margin-right:10px; }
.page-hero--brand .breadcrumb{ color:var(--brand); }

/* TOP：3サービスへの振り分けカード */
.services__crown{ text-align:center; margin-bottom:14px; font-size:12.5px; letter-spacing:.12em; color:var(--brand); }
.svc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); }
.svc-card{ display:flex; flex-direction:column; background:none; border-radius:0; box-shadow:none; transition:opacity .35s ease; }
.svc-card:hover{ opacity:.86; }
.svc-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--brand-tint); }
.svc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-card__media img{ transform:scale(1.05); }
.svc-card__no{ position:absolute; top:12px; left:14px; z-index:2; font-family:var(--disp); font-size:12px; letter-spacing:.2em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.svc-card__body{ padding:22px 0 0; display:flex; flex-direction:column; flex:1; }
.svc-card__title{ font-weight:600; font-size:18.5px; line-height:1.5; margin-bottom:12px; }
.svc-card__text{ font-size:15.5px; line-height:1.9; color:var(--grey); flex:1; }
.svc-card__more{ display:inline-flex; align-items:center; gap:.6em; margin-top:22px; font-size:13px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--brand-deep); border:0; border-radius:999px; padding:12px 24px; align-self:flex-start; transition:opacity .3s ease, gap .3s ease; }
.svc-card:hover .svc-card__more{ gap:1.1em; }

/* 選ばれる理由 / メリット3点 */
.merits{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.2vw,52px); }
.merit__no{ display:block; font-family:var(--disp); font-weight:300; font-size:38px; line-height:1; color:var(--brand); }
.merit__title{ font-weight:600; font-size:18.5px; line-height:1.5; margin:16px 0 14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.merit__text{ font-size:15.5px; line-height:1.95; color:var(--grey); }

/* お知らせ */
.news__list{ list-style:none; border-top:1px solid var(--line); }
.news__item{ display:grid; grid-template-columns:110px 108px 1fr; gap:20px; align-items:center; padding:22px 4px; border-bottom:1px solid var(--line); transition:background .3s; }
.news__item:hover{ background:var(--brand-tint); }
.news__date{ font-family:var(--disp); font-size:15px; letter-spacing:.06em; color:var(--grey-2); }
.news__cat{ font-family:var(--disp); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; text-align:center; color:var(--brand); border:1px solid var(--line); border-radius:999px; padding:6px 0; }
.news__title{ font-size:16px; line-height:1.75; color:var(--ink-2); }

/* ご挨拶メッセージ */
.msg{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); border-left:3px solid var(--brand-deep); padding:clamp(28px,3.4vw,46px); }
.msg p{ font-size:16.5px; line-height:2.1; color:var(--ink-2); margin-bottom:1.4em; }
.msg p:last-child{ margin-bottom:0; }
.msg__sign{ text-align:right; font-weight:700; letter-spacing:.06em; }

/* 人となり：できること */
.traits{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,16px); }
.trait{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 20px; text-align:center; }
.trait .ico{ width:34px; height:34px; margin:0 auto 14px; color:var(--brand); }
.trait b{ display:block; font-size:15px; font-weight:600; line-height:1.6; }
.trait span{ display:block; font-size:14.5px; line-height:1.8; color:var(--grey); margin-top:8px; }

/* 要確認プレースホルダ */
.notice{ border:1px dashed var(--brand-deep); border-radius:var(--radius); background:var(--white); padding:22px 24px; font-size:15px; line-height:1.9; color:var(--ink-2); }
.notice b{ color:var(--brand); }
.section--brand .notice,.page-hero--brand .notice{ background:var(--white); color:var(--ink-2); border-color:var(--brand); }
.section--brand .notice b{ color:var(--brand); }

/* 事例イメージ */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,20px); }
.gallery figure{ background:rgba(255,255,255,.5); border:1px dashed rgba(22,48,46,.28); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.gallery figcaption{ font-size:12px; letter-spacing:.08em; color:var(--brand); }

@media (max-width: 900px){
  .page-hero__grid{ grid-template-columns:1fr; }
  .page-hero__media{ max-width:520px; }
  .svc-cards{ grid-template-columns:1fr 1fr; }
  .traits{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px){
  .svc-cards,.merits,.traits,.gallery{ grid-template-columns:1fr; }
  .news__item{ grid-template-columns:1fr; gap:8px; }
  .news__cat{ justify-self:start; padding:5px 14px; }
}

/* ブランド色のヒーローに、同じブランド色のセクションが続く場合の余白調整（rc.html） */
.page-hero--brand{ padding-bottom:clamp(24px,3vw,40px); }
.page-hero--brand + .section--brand{ padding-top:clamp(32px,4vw,56px); }

/* =========================================================
   agent.html : 不動産エージェントとは（Generative Agents 風エディトリアルFV）
   ========================================================= */
.agent-hero{
  position:relative; min-height:min(100svh, 960px); display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%, #f2f7f6 56%, var(--brand-tint) 100%);
}
/* 遠近のドットグリッド（背景の奥行き） */
.agent-hero::before{
  content:""; position:absolute; right:-4%; bottom:-12%; width:74%; height:92%; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(61,106,103,.18) 1.1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(118deg, transparent 34%, #000 105%);
          mask-image:linear-gradient(118deg, transparent 34%, #000 105%);
  transform:perspective(720px) rotateX(60deg); transform-origin:bottom right;
}
/* 建築模型：左下タグラインと右下サブタイトルの間に置く背景オブジェクト */
.agent-hero__model{
  position:absolute; left:23%; bottom:0; width:clamp(190px,26vw,400px); z-index:1;
  opacity:.62; pointer-events:none; filter:drop-shadow(0 30px 44px rgba(36,65,63,.14));
  animation:fvArt 1.7s cubic-bezier(.2,.7,.2,1) both;
}
.agent-hero__inner{
  position:relative; z-index:3; width:min(var(--maxw),100% - 48px); margin-inline:auto; flex:1;
  display:flex; flex-direction:column; padding-top:clamp(84px,9.4vh,112px); padding-bottom:clamp(22px,3.2vh,42px);
}
.agent-hero__eyebrow{
  font-family:var(--disp); font-weight:500; font-size:clamp(11px,1.1vw,13px); letter-spacing:.28em; text-transform:uppercase;
  color:var(--brand); display:inline-flex; align-items:center; gap:15px; margin-bottom:0;
  animation:fvUp .9s ease-out .3s both;
}
.agent-hero__eyebrow::before{ content:""; width:38px; height:1.5px; background:var(--brand-deep); }

/* メインタイトル（特大の英字） */
.agent-hero__title{
  font-family:var(--serif); font-weight:500; font-size:clamp(44px,16.4vw,252px); line-height:.92; letter-spacing:-.025em;
  /* Playfair の字面上の空きを打ち消し、ディセンダ分は下に逃がす */
  margin-top:-.13em; padding-bottom:.05em;
  white-space:nowrap; color:var(--ink);
}
.agent-hero__title span{ display:block; animation:fvUp 1s ease-out .5s both; color:#1b3a37; }
.agent-hero__title span:last-child{ animation-delay:.66s; color:#3f6d69; }
/* 行末に添える和文ルビ */
.agent-hero__title i{
  font-family:var(--sans); font-style:normal; font-weight:500;
  font-size:.072em; letter-spacing:.34em; color:var(--ink-2);
  vertical-align:2.4em; margin-left:.14em; white-space:nowrap;
}

/* 下段：左＝タグライン／右＝サブタイトル */
.agent-hero__foot{
  margin-top:auto; padding-top:clamp(18px,3.6vh,48px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,64px);
}
.agent-hero__tagline{
  flex:0 0 auto; padding-bottom:8px;
  font-family:var(--disp); font-weight:500; font-size:clamp(11px,1.15vw,15px);
  letter-spacing:.16em; color:var(--brand);
  animation:fvUp 1s ease-out 1.2s both;
}
.agent-hero__lede{ max-width:min(560px, 46%); animation:fvUp 1s ease-out 1.05s both; }
.agent-hero__lede h1,.agent-hero__lede h2{ font-weight:600; font-size:clamp(20px,2.7vw,38px); line-height:1.5; letter-spacing:.01em; color:var(--ink); }
.agent-hero__lede h1 em,.agent-hero__lede h2 em{ font-style:normal; background:linear-gradient(transparent 62%, rgba(132,164,163,.6) 62%); }
.agent-hero__lede p{ margin-top:14px; font-size:clamp(14px,1.45vw,16.5px); line-height:2; color:var(--grey); }
.agent-hero__lede .btn{ margin-top:22px; }
.btn--pill{ border-radius:999px; background:var(--ink); border-color:var(--ink); color:#fff; padding:16px 32px; }
.btn--pill:hover{ background:var(--brand-deep); border-color:var(--brand); color:#fff; }

/* index：不動産エージェント ティザー（詳細は agent.html） */
.agent__lead-c{ max-width:46em; margin:clamp(30px,3.4vw,42px) 0 clamp(24px,2.8vw,34px); text-align:left; font-size:clamp(14px,1.5vw,16px); line-height:2.15; color:var(--ink-2); }

/* 建築模型ギャラリー（下層ページ共通） */
.model-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); align-items:end; }
.model-gallery figure{ text-align:center; }
.model-gallery img{ width:100%; height:auto; filter:drop-shadow(0 22px 30px rgba(36,65,63,.14)); transition:transform .4s ease; }
.model-gallery figure:hover img{ transform:translateY(-6px); }
.model-gallery figcaption{ margin-top:14px; font-family:var(--disp); font-size:11.5px; letter-spacing:.14em; color:var(--brand); }
.section--brand .model-gallery figcaption{ color:var(--brand); }

@media (max-width:900px){
  .agent-hero__foot{ flex-direction:column; align-items:flex-start; gap:clamp(10px,2vh,18px); }
  .agent-hero__tagline{ padding-bottom:0; }
  .agent-hero__lede{ max-width:100%; }
  .agent-hero__title{ white-space:normal; }
  .agent-hero__title i{ display:block; margin:.6em 0 0; vertical-align:baseline; font-size:.11em; }
  /* 模型はテキストの下に回して、大きく見せる */
  .agent-hero{ min-height:auto; padding-bottom:clamp(20px,4vh,40px); }
  .agent-hero__inner{ order:1; flex:none; }
  .agent-hero__model{ order:2; position:relative; left:auto; bottom:auto; width:min(88%,520px); margin:clamp(8px,2vh,24px) 0 0 auto; opacity:.9; }
}
@media (max-width:700px){
  .agent-hero__title{ font-size:clamp(44px,16vw,86px); }
  .agent-hero__model{ width:min(96%,460px); }
  .model-gallery{ grid-template-columns:1fr 1fr; }
}


/* =========================================================
   レイアウト調整（参考サイト TERASS の構造に合わせる）
   ========================================================= */

/* --- 数字リスト（01〜）：上罫線＋テールの番号（参考サイトの見せ方） --- */
.merits{ gap:clamp(20px,2.6vw,40px); }
.merit{ border-top:2px solid var(--brand-deep); padding-top:22px; }
.merit__no{ font-family:var(--disp); font-weight:600; font-size:26px; line-height:1; color:var(--brand); letter-spacing:.04em; }
.merit__title{ font-weight:600; font-size:17.5px; line-height:1.55; margin:12px 0 12px; padding-bottom:0; border-bottom:0; }
.merit__text{ font-size:15.5px; line-height:1.9; color:var(--grey); }

/* --- 強調バナー（参考サイトの淡色の帯） --- */
.callout{
  max-width:720px; margin:clamp(28px,3.4vw,44px) auto 0; text-align:center;
  background:var(--paper); border-radius:var(--radius); padding:clamp(22px,2.6vw,32px);
}
.section--brand .callout{ background:var(--white); }
.callout b{ display:block; font-size:clamp(17px,2vw,22px); font-weight:600; color:var(--brand); line-height:1.6; }
.callout span{ display:block; margin-top:10px; font-size:15px; line-height:1.85; color:var(--grey); }

/* --- 比較表：自社列をテールで塗る（参考サイト準拠） --- */
.compare__row--head .compare__col--a{ background:var(--brand-deep); color:#fff; box-shadow:none; }
.compare__row--head .compare__col--a .compare__tag{ color:rgba(255,255,255,.72); }
.compare__col--a{ background:var(--white); }
.compare__row:not(.compare__row--head):nth-of-type(odd) .compare__col--a{ background:var(--paper-2); }
.compare__row--head .compare__col--a b{ color:#fff; }
.compare__row--head .compare__col--a{ box-shadow:none; }

/* --- サービス各節の見出しも中央寄せに --- */
.svc-index{ justify-content:center; }
.svc-head{ text-align:center; margin-bottom:clamp(36px,4.4vw,56px); }
.svc-head .lead{ max-width:700px; margin-inline:auto; }

/* --- 2カラムの図版＋本文：余白と比率を整える --- */
.srv{ gap:clamp(36px,4.6vw,64px); align-items:center; }
.srv + .srv{ margin-top:clamp(64px,8vw,104px); }

/* --- 見出し下のリード文は本文幅を抑えて可読性を上げる --- */
.about__body,.srv__text{ max-width:36em; }
.merit-list{ max-width:40em; }

/* --- 中央寄せの小見出し（左右に細い罫線） --- */
.subhead{
  display:flex; align-items:center; justify-content:flex-start; gap:18px;
  margin:0 0 clamp(26px,3.2vw,40px);
  font-size:clamp(15px,1.6vw,18px); font-weight:700; letter-spacing:.08em; color:var(--ink);
}
.subhead::after{ content:""; flex:1; height:1px; background:var(--line); }

/* --- 強み（5段階）：説明文＋レーダーチャートを中央に積む --- */
.strength{ text-align:left; }
.strength__note{
  max-width:38em; margin:0 0 clamp(24px,3vw,40px);
  font-size:15.5px; line-height:1.95; color:var(--grey);
}
.strength .radar{ width:min(520px,100%); max-width:none; margin-inline:0; }
.strength .radar text{ font-size:11.5px; }

/* =========================================================
   ホバー時のアクション（参考サイト TERASS と同じ仕様）
   カード＝0.25s で 4px 浮かせて影を強める／塗りボタン＝opacity 0.9
   ========================================================= */
/* 塗りボタンは不透明度、線のボタンは反転 */
.btn--brand,.btn--line,.btn--pill{ transition:opacity .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.btn--brand:hover,.btn--line:hover,.btn--pill:hover{ opacity:.9; }
.btn--line:hover{ background:#06c755; border-color:#06c755; }
.header-cta .btn--line:hover{ transform:translateY(-1px); }

/* 矢印は少しだけ進む（参考サイトは 2px） */
.btn__arrow{ transition:transform .25s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* テキストリンク系は不透明度で反応 */
.svc-card__more,.footer__links a,.breadcrumb a{ transition:opacity .2s ease, color .2s ease, gap .3s ease; }
.svc-card:hover .svc-card__more{ opacity:.75; }
.faq__q{ transition:color .2s ease; }
.faq__q:hover{ color:var(--brand); }
.faq__q .plus::before,.faq__q .plus::after{ transition:background-color .2s ease, transform .3s ease; }
.faq__q:hover .plus::before,.faq__q:hover .plus::after{ background:var(--brand-deep); }

/* フォーム・タグの反応 */
.radios label{ transition:border-color .2s ease, background-color .2s ease; }
.radios label:hover{ border-color:var(--brand); }
.tags li{ transition:background-color .25s ease, color .25s ease; }

/* =========================================================
   EDITORIAL LAYOUT ─ 雑誌型
   箱（カード・角丸・影）をやめ、罫線＋余白＋大きな数字で組む
   ========================================================= */

/* ---- 面：白を基調に、淡色はごく薄く ---- */
:root{ --paper:#f4f7f6; --paper-2:#fafcfb; --rule:#1d3735; }

/* ---- 見出し：小さな英字ラベル＋大きな和文タイトルを中央に置くだけのシンプル版 ---- */
:root{ --indent: 0px; }
.section-head{
  display:block; text-align:center;
  border-top:0; padding-top:0;
  margin-bottom:clamp(40px,5vw,72px);
}
.section-head .eyebrow{
  display:block; writing-mode:horizontal-tb;
  margin:0 0 clamp(14px,1.6vw,20px);
}
.section-head h2,.section-head h3{ font-weight:600; letter-spacing:.01em; }
.section-head .lead{ max-width:34em; margin:20px auto 0; }
.services__crown{ text-align:center; margin:0 0 12px; }

/* 画像の帯は逆に紙面いっぱいへ抜く */
.model-gallery{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-inline:clamp(16px,3vw,56px);
}

/* ご挨拶は段組みに（雑誌の本文流し） */
@media (min-width:900px){
  .msg{ columns:2; column-gap:clamp(28px,3vw,48px); }
  .msg p{ break-inside:avoid; }
  .msg__sign{ column-span:all; }
}

@media (max-width:900px){
  .section-head .eyebrow{ margin-bottom:14px; }
  .model-gallery{ padding-inline:0; }
}

/* ---- 中央寄せが必要な帯（CTA）だけは例外 ---- */
.cta .section-head,.cta{ text-align:center; }

/* ---- カード：角丸＋十分な内側余白。面と反転させて浮かせる ---- */
:root{ --radius:16px; --radius-sm:12px; --card-pad:clamp(24px,2.4vw,32px); }

.step5,.flow__item,.trait,.creds li,.rc-value,.point,.way,.synergy__card,
.svc-card,.msg,.coming,.notice,.gift,.agent__conclusion,.persona__bubble{
  background:var(--paper); border:0; border-radius:var(--radius); box-shadow:none;
  padding:var(--card-pad);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
/* 淡色の面では白カード＋やわらかい影 */
.section--brand .step5,.section--brand .flow__item,.section--brand .trait,
.section--brand .creds li,.section--brand .rc-value,.section--brand .point,
.section--brand .way,.section--brand .synergy__card,.section--brand .svc-card,
.section--brand .msg,.section--brand .coming,.section--brand .notice,
.section--brand .gift,.section--brand .agent__conclusion,.section--brand .persona__bubble,
.section--ink .rc-value,.agent .synergy__card,.agent .agent__conclusion{
  background:var(--white); box-shadow:0 1px 3px rgba(22,48,46,.04), 0 12px 30px rgba(22,48,46,.06);
}
.step5:hover,.flow__item:hover,.trait:hover,.creds li:hover,.rc-value:hover,
.point:hover,.way:hover,.synergy__card:hover,.svc-card:hover{
  transform:translateY(-4px); box-shadow:0 8px 24px rgba(22,48,46,.12);
}
.synergy__card--fill,.section--brand .synergy__card--fill,.agent .synergy__card--fill{
  background:var(--brand-dark); box-shadow:none;
}

/* カード間の間隔（罫線グリッドをやめたので gap で離す） */
.steps5,.flow,.traits,.creds,.rc-values,.rc-values--5,.points,.ways{
  gap:clamp(12px,1.4vw,18px);
}
/* 5列の密なグリッドは軸の外に開放して、1枚あたりの幅を確保する */
.section .steps5,.section .flow,.section .rc-values--5{ margin-left:0; }
.steps5 .step5,.flow .flow__item,.rc-values--5 .rc-value{ padding:24px 20px; }
.svc-cards{ gap:clamp(18px,2.2vw,30px); }
.rc-value,.trait,.point{ text-align:left; }
.trait .ico,.rc-value .ico,.point .ico{ margin:0 0 14px; }
.creds li small{ margin-bottom:12px; }

/* 画像・図版も角丸に */
.svc-card__media,.about__models img,.profile__media img,.page-hero__media img,
.srv__media figure,.shots img,.compare{ border-radius:var(--radius); }
.svc-card{ padding:0; overflow:hidden; }
.svc-card__media{ border-radius:0; }
.svc-card__body{ padding:var(--card-pad); border-top:0; }
.compare{ overflow:hidden; border:1px solid var(--line); }

/* 帯・注記は角丸の色面で */
.gift{ border-left:0; background:var(--brand-tint); padding:20px 24px; }
.section--brand .gift{ background:var(--paper); }
.msg{ border-left:3px solid var(--brand-deep); }
.notice{ border:1px dashed var(--brand-deep); }
.coming{ border:1px dashed var(--brand); }
.persona__bubble{ border:0; }
.persona__bubble::before,.persona__bubble::after{ display:none; }
.persona__card{ text-align:left; }
.persona__face{ margin:0 0 18px; }

/* ボタン・タグ・入力も角丸に戻す */
.btn{ border-radius:999px; border-width:1.5px; padding:16px 32px; }
.btn--pill{ border-radius:999px; }
.tags li,.news__cat,.radios label,.coming__tag,.way__reco{ border-radius:999px; }
.field input,.field select,.field textarea{ border-radius:var(--radius-sm); }

/* ---- 数字は大きく細く（雑誌の柱） ---- */
/* ※ .step5 p / .flow__item p / .match p の方が詳細度が高いので、親を含めて指定する */
.flow__item .flow__no,.match .match__no,.svc-card__no{
  font-family:var(--disp); font-weight:300; letter-spacing:.06em; color:var(--brand);
}
.flow__item .flow__no{ font-size:34px; line-height:1; }
.match .match__no{ font-size:13px; letter-spacing:.2em; line-height:1.4; }
.step5__ico,.flow__item h4{ margin-top:16px; }
.merit{ border-top:1px solid var(--rule); padding-top:26px; }
.merit__no{ font-family:var(--disp); font-weight:300; font-size:clamp(40px,4.4vw,60px); line-height:1; letter-spacing:.04em; color:var(--brand); }
.merit__title{ font-size:19px; margin:18px 0 12px; }
.svc-index b{ font-family:var(--disp); font-weight:300; }

/* ---- サービスカード：枠をやめ、画像＋罫線＋テキスト ---- */
.svc-cards{ gap:clamp(28px,3.4vw,52px); }
.svc-card__no{ position:absolute; top:14px; left:18px; z-index:2; font-family:var(--disp); font-weight:300; font-size:24px; letter-spacing:.02em; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.45); }
.svc-card__media{ aspect-ratio:3/2; }
.svc-card:hover .svc-card__media img{ transform:scale(1.03); }

/* ---- 相談方法：おすすめ枠だけ縁取りで差をつける ---- */
.way--reco{ outline:2px solid var(--brand-deep); outline-offset:-2px; }
.way__reco{ position:absolute; top:-14px; left:var(--card-pad); background:var(--brand-deep);
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.1em; padding:7px 18px; }

/* ---- 比較表：角丸の枠の中で自社列をテールに ---- */
.compare{ gap:1px; background:var(--line); }
.compare__label,.compare__col{ background:var(--paper-2); }
.compare__col--a{ background:var(--white); }
.compare__row--head .compare__col--a{ background:var(--brand-deep); color:#fff; box-shadow:none; }
.compare__row--head .compare__col--a b{ color:#fff; }
.compare__row--head .compare__col--a .compare__tag{ color:rgba(255,255,255,.72); }
.compare__row--head .compare__label,.compare__row--head .compare__col--b{ background:var(--paper); }

/* ---- 画像は大きく、余白で見せる ---- */
.about__models{ gap:clamp(12px,1.6vw,20px); }
.model-gallery{ gap:clamp(20px,3vw,44px); }

@media (max-width:900px){
  .steps5,.flow,.traits,.creds,.rc-values,.rc-values--5,.points{ gap:12px; }
}


/* =========================================================
   Service：箱（カード）をやめて、写真＋テキストだけで見せる
   ========================================================= */
.svc-card,.section--brand .svc-card{
  background:none; box-shadow:none; border-radius:0; padding:0; overflow:visible;
}
.svc-card:hover,.section--brand .svc-card:hover{ transform:none; box-shadow:none; opacity:.86; }
.svc-card__media{ border-radius:var(--radius); }
.svc-card__body{ padding:22px 0 0; }

/* MV直下に置いた流れる帯は、上の余白を詰めて写真と地続きに見せる */
.fv + .marquee{ margin-top:0; }

/* =========================================================
   背景の住宅模型モチーフは非表示に
   ========================================================= */
.deco-model{ display:none !important; }

/* Service：見出し上のリードは枠付きのボックスで見せる（かぎ括弧は使わない） */
.services__crown{
  display:inline-block; margin:0 0 16px; padding:9px 20px;
  border:1px solid var(--brand); border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; color:var(--brand-deep);
  background:var(--white);
}
.section--brand .services__crown{ background:var(--white); }

/* ボタンは全て塗り（文字だけ・枠だけのボタンは使わない） */
.btn{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.btn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn--line{ background:#06c755; border-color:#06c755; color:#fff; }
.btn--ghost-light,.btn--pill{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--ghost-light:hover,.btn--pill:hover{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }

/* 見出し「不動産エージェント／って、何ですか？」の行間をひろげる */
.agent__title{ line-height:1.32; }
.agent__line{ padding-bottom:.12em; margin-bottom:-.12em; }

/* 「担当者ガチャ」の見出し：2行組み＋一部だけメインカラー */
.about__catch .hl{ background:none; color:var(--brand); }

/* Service：リードのボックスはメインカラーの塗りに */
.services__crown{
  background:var(--brand); border-color:var(--brand); color:var(--ink);
}
.section--brand .services__crown{ background:var(--brand); }

/* 「担当者ガチャ」の見出しは2行で収める（文字サイズと段組み比を調整） */
.about__top{ grid-template-columns:1fr 1fr; }
.about__catch{ font-size:clamp(22px,2.7vw,34px); }

/* =========================================================
   CTA帯（お問い合わせ）：写真の上に黒の透過を重ねた面にする
   ========================================================= */
.section--cta{
  position:relative; isolation:isolate;
  background:
    linear-gradient(rgba(12,20,19,.66), rgba(12,20,19,.72)),
    url("../img/hero-family.jpg") center 38% / cover no-repeat;
  background-attachment:scroll;
  color:#fff;
}
.section--cta .container{ position:relative; z-index:1; }
.section--cta .eyebrow{ color:#fff; opacity:.8; }
.section--cta h2,.section--cta .h-lg{ color:#fff; }
.section--cta .lead,.section--cta .note{ color:rgba(255,255,255,.86); }
.section--cta .mark{
  color:#fff;
  background:linear-gradient(transparent 62%, rgba(132,164,163,.55) 62%);
}
/* 暗い面では（LINE以外の）ボタンを白の塗りにして、写真から浮かせる */
.section--cta .btn:not(.btn--line){
  background:#fff; border-color:#fff; color:var(--ink);
}
.section--cta .btn:not(.btn--line):hover{
  background:var(--brand); border-color:var(--brand); color:var(--ink);
}

/* =========================================================
   MV下の流れる帯：白い余白をなくし、面はメインカラーに
   ========================================================= */
.marquee{ background:var(--brand); color:var(--ink); }
.marquee__track span::after{ background:var(--ink); }
.fv + .marquee{ margin:0; }

/* =========================================================
   エージェント紹介：左＝建築模型／右＝テキスト
   ========================================================= */
.agent__intro{
  display:grid; grid-template-columns:.86fr 1.14fr;
  gap:clamp(28px,4.4vw,72px); align-items:center;
}
.agent__model img{ width:100%; height:auto; filter:drop-shadow(0 30px 46px rgba(36,65,63,.16)); }
.agent__body{ min-width:0; }
.agent__title{ font-size:clamp(24px,4.1vw,54px); }
.agent__lead-c{ max-width:100%; }
@media (max-width:900px){
  .agent__intro{ grid-template-columns:1fr; }
  .agent__model{ max-width:340px; margin-inline:auto; }
}

/* =========================================================
   h2のサイズは全て統一
   ========================================================= */
.h-xl,.h-lg,.about__catch,.srv__title,.section-head h2,.section-head h3{
  font-size:clamp(23px,2.9vw,34px);
}

/* Service：リードのボックスは白文字で */
.services__crown{ color:#fff; }

/* =========================================================
   フッター：大きなステートメントを載せてインパクトを出す
   ========================================================= */
.site-footer{ padding:0 0 32px; overflow:hidden; }
.footer__hero{
  display:grid; grid-template-columns:1.25fr .75fr; align-items:end;
  gap:clamp(20px,3vw,48px);
  padding:clamp(64px,8vw,110px) 0 clamp(44px,5vw,68px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.footer__hero-en{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(38px,7.4vw,104px); line-height:1.02; letter-spacing:-.02em;
  color:#fff;
}
.footer__hero-en em{ font-style:normal; color:var(--brand); }
.footer__hero-ja{
  font-size:clamp(13px,1.4vw,16px); line-height:2; letter-spacing:.04em;
  color:rgba(255,255,255,.78); padding-bottom:.5em;
}
.footer__grid{ padding-top:clamp(44px,5vw,68px); }
.footer .logo__en{ font-size:clamp(17px,1.9vw,22px); }
.footer__title{ font-size:12.5px; color:var(--brand); }
.footer__links a{ font-size:15px; color:rgba(255,255,255,.82); }
.footer__links a:hover{ color:var(--brand); }
.footer__info{ color:rgba(255,255,255,.72); }
.footer__bottom{ margin-top:clamp(48px,6vw,72px); }
@media (max-width:900px){
  .footer__hero{ grid-template-columns:1fr; align-items:start; gap:22px; }
  .footer__hero-ja{ padding-bottom:0; }
}

/* =========================================================
   英字は Montserrat に統一
   ========================================================= */
:root{
  --disp:  "Montserrat", "Noto Sans JP", sans-serif;
  --serif: "Montserrat", "Noto Sans JP", sans-serif;
}

/* =========================================================
   カーニング：詰まって見える箇所をゆるめる
   ========================================================= */
/* 和文は palt（約物の詰め）を効かせたまま、字間だけをゆるめる。
   palt を切ると「、」「？」の前後だけが大きく空いてしまうため。 */
.fv__title{ letter-spacing:0; }
.agent__title{ letter-spacing:.03em; line-height:1.34; }
.footer__hero-en{ letter-spacing:0; }
.agent-hero__title{ letter-spacing:-.01em; }
.h-xl,.h-lg,.about__catch,.srv__title,.section-head h2,.section-head h3{
  letter-spacing:.035em; line-height:1.62;
}
.lead,.about__body,.srv__text,.msg p,.faq__a-inner p,.agent__lead-c{ letter-spacing:.03em; }
.svc-card__title,.merit__title,.way h3,.step5 h3,.trait b,.creds b,.news__title{ letter-spacing:.03em; }
.btn{ letter-spacing:.08em; }

/* =========================================================
   MV下の帯：文字は白で
   ========================================================= */
.marquee{ color:#fff; }
.marquee__track span::after{ background:#fff; }

/* =========================================================
   エージェント紹介：写真とテキストの間・上下の余白を広げる
   ========================================================= */
.agent{ padding:clamp(96px,10vw,150px) 0; }
.agent__intro{ gap:clamp(40px,6.4vw,104px); }
.agent__index{ margin-bottom:30px; }
.agent__slogan{ margin-top:26px; }
.agent__lead-c{ margin:clamp(38px,4.4vw,56px) 0 clamp(30px,3.4vw,42px); }

/* Montserrat は Jost より字幅が広いので、大きな英字見出しはサイズを調整して
   意図した行数（MV＝2行）を保つ */
.fv__title{ font-size:clamp(32px,5.1vw,74px); }
.footer__hero-en{ font-size:clamp(34px,6.1vw,86px); }

/* =========================================================
   余白の調整（下層ページ共通）
   ========================================================= */
/* セクション間が開きすぎていたので詰める */
:root{ --gap: clamp(60px,6.2vw,96px); }
.agent{ padding:clamp(72px,7.4vw,112px) 0; }
.page-hero{ padding:calc(76px + clamp(44px,5.6vw,76px)) 0 clamp(44px,5.6vw,76px); }
.page-hero--compact{ padding:calc(76px + clamp(32px,4vw,52px)) 0 clamp(32px,4vw,52px); }
.section--cta{ padding:clamp(72px,7.4vw,112px) 0; }

/* Montserrat はPlayfairより字幅が広いので、エディトリアルFVの見出しを縮める */
.agent-hero__title{ font-size:clamp(30px,11.6vw,178px); }

/* 三角のマッチング図：左右が余りすぎていたので幅を広げる */
.matching--tri{ max-width:980px; }

/* 強み（レーダー）：左に取り残されていたので、本文＋図の2カラムに */
.strength{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.strength__note{ max-width:100%; margin:0; }
.strength .radar{ width:min(460px,100%); margin-inline:auto; }
@media (max-width:900px){
  .strength{ grid-template-columns:1fr; }
  .strength .radar{ margin-inline:auto; }
}

/* 模型ギャラリーの上下の空きを詰める */
.model-gallery{ padding-inline:clamp(16px,3vw,56px); }
.model-gallery img{ max-height:clamp(220px,26vw,380px); width:auto; margin-inline:auto; }

/* スマホ：エディトリアルFVの模型が大きすぎたので抑える */
@media (max-width:900px){
  .agent-hero__model{ width:min(74%,360px); }
}
@media (max-width:700px){
  .agent-hero__model{ width:min(70%,300px); }
  .agent__model{ max-width:260px; }
}

/* Montserrat は Playfair より字面の天地が詰まっているため、
   打ち消し用の負のマージンを解除（ラベルと見出しの重なりを防ぐ） */
.agent-hero__title{ margin-top:0; padding-bottom:.02em; }

/* 模型が大きくなりすぎないように高さで頭打ちにする */
.agent__model img{ max-height:clamp(260px,33vw,470px); width:auto; margin-inline:auto; }

/* =========================================================
   マーカー（蛍光ペン風の下線）は全ページで廃止し、色だけで見せる
   ========================================================= */
.mark,.section--dark .mark,.section--brand .mark,.page-hero .mark,.section--cta .mark,
.about__catch .hl,.synergy__result em,.agent-hero__lede h1 em,.agent-hero__lede h2 em{
  background:none;
}
.mark,.section--dark .mark,.section--brand .mark,.page-hero .mark{ color:var(--brand); }
.section--cta .mark{ color:#fff; }
.synergy__result em,.agent-hero__lede h1 em,.agent-hero__lede h2 em{ color:var(--brand); }

/* =========================================================
   ナンバリング：不要なものは消し、残すものは小さく
   ========================================================= */
.svc-card__no,.svc-index b{ display:none; }
.svc-index{ margin-bottom:10px; }
.merit__no{ font-size:15px; font-weight:600; letter-spacing:.18em; }
.profile__stat b{ font-size:30px; }

/* =========================================================
   プロフィール：顔写真を大きく、本文との間を詰める
   ========================================================= */
.page-hero--compact .page-hero__grid{ grid-template-columns:1fr minmax(320px,420px); gap:clamp(24px,3.2vw,48px); }
.page-hero__media:not(.page-hero__media--wide){ max-width:100%; margin-left:0; }

/* =========================================================
   3つのマッチング：円は塗りに
   ========================================================= */
.match__circle{ background:var(--brand); border-color:var(--brand); color:var(--ink); }
.match__circle b,.match__circle span{ color:var(--ink); }

/* =========================================================
   ご挨拶：カード（箱）をやめる
   ========================================================= */
.msg,.section--brand .msg{
  background:none; box-shadow:none; border:0; border-left:0; padding:0;
}

/* =========================================================
   人となり：できること／強み を2カラムに
   ========================================================= */
.persona2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.persona2 .traits{ grid-template-columns:1fr; }
.persona2 .strength{ grid-template-columns:1fr; gap:20px; }
.persona2 .strength .radar{ width:min(420px,100%); margin-inline:auto; }
.persona2 .subhead{ margin-top:0; }
@media (max-width:900px){
  .persona2{ grid-template-columns:1fr; }
}

/* =========================================================
   模型は右・テキストは左に。特大英字も一段小さく
   ========================================================= */
.agent__intro{ grid-template-columns:1.14fr .86fr; }
.agent__body{ order:1; }
.agent__model{ order:2; }

.agent-hero__title{ font-size:clamp(28px,9.2vw,140px); }
.agent-hero__model{ left:auto; right:3%; width:clamp(170px,22vw,330px); }
.agent-hero__lede{ order:1; margin-right:auto; max-width:min(560px,52%); }
.agent-hero__tagline{ order:2; }

@media (max-width:900px){
  .agent__model{ order:2; }
  .agent-hero__model{ right:auto; margin-inline:auto; }
}

/* 「小は、大を兼ねる。」：サイズを抑えて上下の余白を揃える */
.synergy__result{
  font-size:clamp(22px,3.4vw,40px);
  margin:clamp(40px,5vw,64px) 0;
}

/* ご挨拶は段組みにせず1カラムで流す */
@media (min-width:900px){
  .msg{ columns:auto; }
}
.msg{ max-width:46em; }

/* 模型を右に置いたので、下段のコピーは左に縦積みにして重なりを避ける */
.agent-hero__foot{ flex-direction:column; align-items:flex-start; gap:clamp(10px,1.6vh,20px); }
.agent-hero__tagline{ order:0; padding-bottom:0; }
.agent-hero__lede{ order:1; max-width:min(560px,54%); }

/* 下段（「不動産エージェントって、何ですか？」）は元どおり 左＝模型／右＝テキスト に戻す */
.agent__intro{ grid-template-columns:.86fr 1.14fr; }
.agent__model{ order:1; }
.agent__body{ order:2; }
@media (max-width:900px){
  .agent__model{ order:1; }
  .agent__body{ order:2; }
}

/* =========================================================
   MV：写真の左右反転とフェード（マスク）をやめ、画面いっぱいの一枚絵に
   ========================================================= */
.fv__visual{
  position:absolute; inset:0; width:100%; height:100%;
  max-height:none; aspect-ratio:auto;
}
.fv__stage{ -webkit-mask-image:none; mask-image:none; }
.fv__photo{
  transform:none; object-position:center center;
  -webkit-mask-image:none; mask-image:none;
}
/* 写真が全面になったので、ページ側の空・雲の描画は不要 */
.fv::before{ display:none; }
.fv__people{ display:none; }
/* コピーが写真の上に乗るので、左側にごく薄い白のかぶせで可読性を確保 */
.fv::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 38%, rgba(255,255,255,0) 62%);
}

/* ご挨拶は中央揃えの見出しに合わせてブロックも中央に */
.msg{ margin-inline:auto; }

/* =========================================================
   MV：白いかぶせ（フェード）をやめる。コピーは白＋「Design.」だけ色。
   写真は淡いので、文字が沈まないよう控えめな暗幕だけ残す
   ========================================================= */
.fv::after{
  background:linear-gradient(100deg, rgba(18,32,31,.52) 0%, rgba(18,32,31,.34) 42%, rgba(18,32,31,.06) 72%, rgba(18,32,31,0) 100%);
}
.fv__copy{ max-width:min(900px,68%); }
.fv__title{
  font-size:clamp(36px,6.3vw,92px); line-height:1.05; color:#fff;
  text-shadow:0 2px 24px rgba(12,24,23,.28);
}
.fv__title .accent{ color:var(--brand); }
.fv__label{ color:rgba(255,255,255,.9); }
.fv__label::before{ background:rgba(255,255,255,.9); }
.fv__sub{ color:#fff; text-shadow:0 2px 18px rgba(12,24,23,.3); }
.fv__note{ color:rgba(255,255,255,.9); }
.fv__scroll{ color:rgba(255,255,255,.85); }
.fv__scroll i{ background:linear-gradient(rgba(255,255,255,.85),transparent); }

/* =========================================================
   タイプスケール ─ h1 / h2 / h3 を役割ごとに固定して全ページ統一
   （個別に散らばっていた見出しサイズは、ここで最終的に上書きする）
   ========================================================= */
:root{
  --h1: clamp(30px, 3.9vw, 50px);   /* ページタイトル */
  --h2: clamp(24px, 3.0vw, 36px);   /* セクション見出し */
  --h3: clamp(17px, 1.7vw, 21px);   /* ブロック・カード見出し */
  --h4: clamp(15px, 1.4vw, 17px);
  --display-mv:    clamp(36px, 5.6vw, 82px);   /* MVの英字（トップの主役） */
  --display-hero:  clamp(32px, 6.0vw, 88px);   /* 下層FVの英字 */
  --display-lead:  clamp(24px, 3.4vw, 44px);   /* 大きめのリード文 */
}

/* --- 見出しレベルごとの基本 --- */
h1,.h-xl,.page-hero h1{ font-size:var(--h1); line-height:1.5; letter-spacing:.035em; }
h2,.h-lg,.section-head h2,.about__catch,.srv__title,.svc-head h2,.way h3{ font-size:var(--h2); line-height:1.6; letter-spacing:.035em; }
h3,.section-head h3,.svc-card__title,.merit__title,.step5 h3,.profile__name,.synergy__name,.trait b,.creds b{
  font-size:var(--h3); line-height:1.65; letter-spacing:.03em;
}
h4,.flow__item h4{ font-size:var(--h4); line-height:1.7; }

/* --- 特大の英字（ディスプレイ）はスケールの外だが、比率は揃える --- */
.fv__title{ font-size:var(--display-mv); line-height:1.08; }
.agent-hero__title{ font-size:var(--display-hero); line-height:1.02; }
.footer__hero-en{ font-size:var(--display-hero); line-height:1.06; }
.agent__title{ font-size:calc(var(--h2) * 1.34); line-height:1.42; }
.agent__conclusion p,.synergy__result{ font-size:var(--display-lead); }
.compare__row--head b{ font-size:var(--h3); }
.form__title{ font-size:var(--h3); }
.agent-hero__lede h1,.agent-hero__lede h2{ font-size:var(--h2); }
.callout b{ font-size:var(--h3); }

/* 「担当者ガチャ」の見出しだけは2行に収める都合で少し小さめに固定 */
.about__catch{ font-size:clamp(23px,2.8vw,33px); }

/* =========================================================
   MV：写真の上には一切かぶせない（暗幕・フェードなし）
   そのぶん文字は写真に沈まない濃色に戻し、「Design.」だけ差し色にする
   ========================================================= */
.fv::after{ content:none; }
.fv__title{ color:var(--ink); text-shadow:none; }
.fv__title .accent{ color:var(--brand-deep); }
.fv__label{ color:var(--brand-deep); }
.fv__label::before{ background:var(--brand-deep); }
.fv__sub{ color:var(--ink); text-shadow:none; }
.fv__note{ color:var(--ink-2); }
.fv__scroll{ color:var(--ink-2); }
.fv__scroll i{ background:linear-gradient(var(--ink-2),transparent); }

/* =========================================================
   全体の文字サイズを一段小さく
   ========================================================= */
:root{
  --h1: clamp(28px, 3.5vw, 46px);
  --h2: clamp(23px, 2.7vw, 33px);
  --h3: clamp(16px, 1.6vw, 20px);
  --h4: clamp(14.5px, 1.3vw, 16px);
  --display-mv:   clamp(32px, 4.8vw, 68px);
  --display-hero: clamp(30px, 5.3vw, 78px);
  --display-lead: clamp(22px, 3.0vw, 38px);
}
.about__catch{ font-size:clamp(22px,2.6vw,31px); }
.agent__title{ font-size:calc(var(--h2) * 1.32); }

/* =========================================================
   MV：写真はそのまま（かぶせなし）。文字は白、「Design.」だけ差し色。
   画像を暗くしない代わりに、文字側の影だけで視認性を確保する
   ========================================================= */
.fv__title{
  color:#fff;
  text-shadow:0 1px 2px rgba(14,28,27,.42), 0 6px 28px rgba(14,28,27,.34);
}
.fv__title .accent{ color:var(--brand); }
.fv__label{ color:#fff; text-shadow:0 1px 10px rgba(14,28,27,.4); }
.fv__label::before{ background:#fff; }
.fv__sub{ color:#fff; text-shadow:0 1px 2px rgba(14,28,27,.4), 0 4px 20px rgba(14,28,27,.32); }
.fv__note{ color:#fff; text-shadow:0 1px 2px rgba(14,28,27,.4), 0 4px 18px rgba(14,28,27,.3); }
.fv__scroll{ color:#fff; text-shadow:0 1px 8px rgba(14,28,27,.4); }
.fv__scroll i{ background:linear-gradient(rgba(255,255,255,.9),transparent); }

/* =========================================================
   agent.html FV ─ 作り直し
   左＝ラベル／特大タイトル／タグライン／リード、右＝建築模型 の2カラム。
   絶対配置・nowrap・マスクをやめ、素直なグリッドで組む。
   ========================================================= */
.agent-hero{
  position:relative; display:block; overflow:hidden; min-height:0;
  background:linear-gradient(180deg,#fff 0%, var(--paper) 100%);
  padding:calc(76px + clamp(40px,5vw,76px)) 0 clamp(48px,6vw,88px);
}
.agent-hero::before{ display:none; }
.agent-hero__inner{
  position:relative; z-index:2; flex:none;
  width:min(var(--maxw),100% - 48px); margin-inline:auto;
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4.6vw,72px); align-items:center;
  padding:0;
}
.agent-hero__copy{ min-width:0; }
.agent-hero__eyebrow{ margin-bottom:clamp(14px,1.8vw,22px); }
.agent-hero__title{
  white-space:normal; margin:0 0 clamp(16px,2vw,24px); padding:0;
  font-size:clamp(34px,5.4vw,80px); line-height:1.06; letter-spacing:-.005em;
}
.agent-hero__title span{ display:block; }
.agent-hero__title i{
  display:inline-block; font-size:.13em; letter-spacing:.24em;
  vertical-align:.55em; margin-left:.5em; color:var(--ink-2); white-space:nowrap;
}
.agent-hero__tagline{ margin:0 0 clamp(18px,2.4vw,30px); padding:0; }
.agent-hero__lede{ max-width:100%; margin:0; }
.agent-hero__lede h1,.agent-hero__lede h2{ font-size:var(--h2); }
.agent-hero__lede p{ max-width:34em; }
.agent-hero__figure{
  position:static; margin:0; justify-self:end; width:100%;
}
.agent-hero__model{
  position:static; left:auto; right:auto; bottom:auto;
  width:100%; max-width:440px; margin-left:auto; opacity:1;
  filter:drop-shadow(0 30px 46px rgba(36,65,63,.16));
  animation:fvArt 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@media (max-width:900px){
  .agent-hero__inner{ grid-template-columns:1fr; gap:clamp(24px,4vw,40px); }
  .agent-hero__figure{ justify-self:center; order:2; }
  .agent-hero__model{ max-width:320px; margin-inline:auto; }
  .agent-hero__title i{ display:block; margin:.8em 0 0; vertical-align:baseline; }
}

/* =========================================================
   MV：英字タイトルは「全て白・装飾なし・大きめ」。それ以外の和文は濃色のまま
   ========================================================= */
:root{ --display-mv: clamp(36px, 6.0vw, 86px); }
.fv__title{ color:#fff; text-shadow:none; }
.fv__title .accent{ color:#fff; }
.fv__label{ color:var(--ink-2); text-shadow:none; }
.fv__label::before{ background:var(--ink-2); }
.fv__sub{ color:var(--ink); text-shadow:none; }
.fv__note{ color:var(--ink-2); text-shadow:none; }
.fv__scroll{ color:var(--ink-2); text-shadow:none; }
.fv__scroll i{ background:linear-gradient(var(--ink-2),transparent); }

/* MV：コピー群を上下中央よりわずかに上へ */
.fv__inner{ padding:clamp(80px,9vh,112px) 0 clamp(96px,13vh,180px); }

/* 「こんな方が、ご相談しています。」の人物イラストは表示しない */
.persona__face{ display:none; }
.persona__card{ padding-top:0; }

/* 人物イラストを外したので、吹き出しの三角も不要 */
.persona__bubble::before,.persona__bubble::after{ display:none; }

/* スマホでもMV写真は画面いっぱいに敷く（旧レイアウトの上書きを打ち消す） */
@media (max-width:900px){
  .fv__visual{ position:absolute; inset:0; width:100%; height:100%; margin:0; }
  .fv__stage{ height:100%; }
  .fv__photo{ height:100%; width:100%; aspect-ratio:auto; object-fit:cover; object-position:62% center; }
  .fv__inner{ padding:clamp(96px,16vh,150px) 0 clamp(48px,9vh,90px); }
}

/* =========================================================
   MV：英字タイトルをさらに大きく／文字群をもう少し上へ／「.」だけメインカラー
   ========================================================= */
:root{ --display-mv: clamp(38px, 6.8vw, 98px); }
.fv__copy{ max-width:min(1020px, 76%); }
.fv__inner{ padding:clamp(72px,8vh,104px) 0 clamp(120px,17vh,230px); }
.fv__title .dot{ color:var(--brand); }
@media (max-width:900px){
  .fv__copy{ max-width:100%; }
  .fv__inner{ padding:clamp(92px,15vh,144px) 0 clamp(64px,11vh,116px); }
}

/* MV：写真をほんの少しだけ寄る */
.fv__photo{ transform:scale(1.06); transform-origin:center center; }

/* MV：サブコピーはメインカラー。黒文字は他ページと同じ #333333 に揃える */
.fv__sub{ color:var(--brand); }
.fv__note{ color:var(--ink); }
.fv__label{ color:var(--ink); }
.fv__label::before{ background:var(--ink); }

/* MV：黒文字はMVだけ一段やわらかく（#555555）。サブコピーは1px小さく */
.fv__note,.fv__label,.fv__scroll{ color:#555555; }
.fv__label::before{ background:#555555; }
.fv__scroll i{ background:linear-gradient(#555555,transparent); }
.fv__sub{ font-size:clamp(14px,1.78vw,22px); }

/* =========================================================
   MV：英字タイトルを「白 → うすいメインカラー」のグラデーションに
   （background-clip:text。非対応環境では白のまま表示される）
   ========================================================= */
.fv__sub{ color:#fff; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fv__title{
    background-image:linear-gradient(128deg,
      #ffffff 0%, #ffffff 38%, #e2ecea 62%, #bdd2d0 88%, #a9c2c0 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  /* 子要素が自前の色で塗りつぶすとグラデーションが消えるので継承させる */
  .fv__title .accent{ color:inherit; -webkit-text-fill-color:transparent; }
  /* 末尾の「.」だけはメインカラーのベタで残す */
  .fv__title .dot{ -webkit-text-fill-color:var(--brand); color:var(--brand); }
}

/* グラデーションは白を主役にして、終端だけほんのり色を差す
   （終端を濃くすると、明るい屋根の上で「Design」が沈んでしまうため） */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fv__title{
    background-image:linear-gradient(122deg,
      #ffffff 0%, #ffffff 58%, #f2f7f6 74%, #dfebe9 90%, #cfe0de 100%);
  }
}

/* =========================================================
   MV：グラデーションをはっきり見せる。「.」も同じ色（グラデーションに含める）
   サブコピーは本文と同じ黒（#555555）に
   ========================================================= */
.fv__sub{ color:#555555; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fv__title{
    background-image:linear-gradient(118deg,
      #ffffff 0%, #ffffff 26%, #dfeceb 52%, #b9cfcd 76%, #93b3b1 100%);
  }
  .fv__title .dot{ -webkit-text-fill-color:transparent; color:inherit; }
}

/* =========================================================
   MV：白からの片寄せではなく、タイトル全体に均等なグラデーション。
   停止点を等間隔に置くことで、1文字ずつ色が移り変わって見える
   ========================================================= */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fv__title{
    background-image:linear-gradient(102deg,
      #ffffff 0%,
      #e4f0ee 22%,
      #c6dbd9 44%,
      #a8c5c3 66%,
      #8fb2b0 84%,
      #7ba8a5 100%);
    background-size:100% 100%;
  }
}

/* MV：タイトルは「白 → シルバー」の均等グラデーション */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fv__title{
    background-image:linear-gradient(102deg,
      #ffffff 0%,
      #f0f1f1 20%,
      #d8dbdb 42%,
      #bfc3c3 64%,
      #a8adad 84%,
      #949a9a 100%);
  }
}

/* =========================================================
   MV：タイトルはグラデーションをやめて白一色。
   写真を加工しない代わりに、文字側にごく薄い影だけ入れて視認性を確保する
   ========================================================= */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fv__title{ background-image:none; }
}
.fv__title,.fv__title .accent,.fv__title .dot{
  color:#fff; -webkit-text-fill-color:#fff;
}
.fv__title{
  text-shadow:0 1px 2px rgba(20,34,33,.18), 0 8px 26px rgba(20,34,33,.22);
}

/* =========================================================
   MV：写真を緑の多いものへ差し替えたのに伴う可読性の調整。
   以前の写真は左半分が淡い空だったのでかぶせ無しで成立していたが、
   新しい写真は樹木がコピー位置まで入るため、左側だけごく薄い白を敷く。
   （かぶせを完全に無くしたい場合は、この .fv::after を content:none に）
   ========================================================= */
.fv::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.74) 26%,
    rgba(255,255,255,.40) 48%,
    rgba(255,255,255,0) 68%);
}

/* =========================================================
   MV 仕上げ
   ・サブコピーを一段大きく
   ・コピー群の位置をもう少し上へ（FVは上下中央寄せなので下パディングで押し上げる）
   ・登場を「写真 → ラベル → タイトル1行目 → 2行目 → サブ → リード → ボタン」と時間差に
   ========================================================= */
.fv__title .fv__line{ display:block; }
.fv__sub{ font-size:clamp(15.5px,2.05vw,26px); }
.fv__inner{ padding:clamp(60px,6.5vh,88px) 0 clamp(150px,21vh,270px); }
/* FVは上下中央寄せのため、下パディングを増やすほどコピーが上がる。
   縦が短い画面では上げ幅を戻さないと固定ヘッダー（76px）と重なる */
@media (max-height:820px){
  .fv__inner{ padding-top:96px; padding-bottom:clamp(40px,8vh,90px); }
}
/* スマホは元の余白のまま（上の指定で上書きしないよう最後に置く） */
@media (max-width:900px){
  .fv__inner{ padding:clamp(92px,15vh,144px) 0 clamp(64px,11vh,116px); }
}

.fv__visual{ animation:fvArt 1.8s cubic-bezier(.2,.7,.2,1) both; }
.fv__label{ animation:fvUp .9s ease-out .5s both; }
.fv__title{ animation:none; }
.fv__title .fv__line:nth-child(1){ animation:fvUp 1s ease-out .8s both; }
.fv__title .fv__line:nth-child(2){ animation:fvUp 1s ease-out 1.05s both; }
.fv__sub{ animation:fvUp 1s ease-out 1.4s both; }
.fv__note{ animation:fvUp 1s ease-out 1.7s both; }
.fv__actions{ animation:none; }
.fv__actions .btn:nth-child(1){ animation:fvUp .9s ease-out 2s both; }
.fv__actions .btn:nth-child(2){ animation:fvUp .9s ease-out 2.2s both; }
.fv__scroll{ animation:fvUp 1s ease-out 2.55s both; }

@media (prefers-reduced-motion: reduce){
  .fv__title .fv__line,.fv__actions .btn{ animation:none !important; }
}

/* =========================================================
   MV：タイトルを白から墨色（本文と同色）に変更。
   白文字用の暗い影は濁るので、明るい背景から浮かせる淡い白のにじみに置き換える
   ========================================================= */
.fv__title,.fv__title .accent,.fv__title .dot{
  color:var(--ink); -webkit-text-fill-color:var(--ink);
}
.fv__title{ text-shadow:0 1px 12px rgba(255,255,255,.6), 0 0 2px rgba(255,255,255,.5); }

/* =========================================================
   MV：コピー各要素の間隔を広げる。
   ブロックが縦に伸びるとヘッダーとぶつかるため、余白は vh 連動の clamp にして
   画面が低いときは自動的に元の詰まった値まで戻るようにしている
   ========================================================= */
.fv__label{ margin-bottom:clamp(18px,3.4vh,38px); }
.fv__title{ line-height:1.14; }
.fv__sub{ margin-top:clamp(20px,4.2vh,46px); }
.fv__note{ margin-top:clamp(14px,2.8vh,32px); }
.fv__actions{ margin-top:clamp(26px,5.4vh,60px); }

/* =========================================================
   オープニング（参考：geecreate.com の導入演出を踏襲）
   全画面のブランドカラー面にロゴが弾んで登場 → 少し保持 →
   下辺を弧に描きながら上へ抜けて、MVが現れる。
   尺は --op-hold（保持）と --op-out（退場）の2つだけで調整できる。
   ========================================================= */
html.is-opening, html.is-opening body{ overflow:hidden !important; }
/* オープニング中はMVの登場アニメを頭出しの位置で止めておく
   （止めないと幕の裏で再生し切ってしまい、幕が上がった時には終わっている） */
html.mv-hold .fv__visual,
html.mv-hold .fv__label,
html.mv-hold .fv__title .fv__line,
html.mv-hold .fv__sub,
html.mv-hold .fv__note,
html.mv-hold .fv__actions .btn,
html.mv-hold .fv__scroll{ animation-play-state:paused !important; }

.opener{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#8fb2b1; color:#fff;
  --op-hold:1.7s; --op-out:.85s;
  animation:openerOut var(--op-out) cubic-bezier(.76,0,.24,1) var(--op-hold) forwards;
}
.opener__inner{ text-align:center; padding:0 24px; }
/* letter-spacing は最後の字の右にも空きが出るので、同じ分だけ左に足して中央を合わせる */
.opener__name{
  display:block; font-family:var(--disp); font-weight:600;
  font-size:clamp(38px,8vw,92px); letter-spacing:.2em; line-height:1;
  margin-bottom:.3em; padding-left:.2em;
  opacity:0; animation:openerPop .85s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.opener__area{
  display:block; font-family:var(--disp); font-weight:500;
  font-size:clamp(13px,2.1vw,21px); letter-spacing:.36em; line-height:1;
  margin-bottom:clamp(22px,3vw,34px); padding-left:.36em;
  opacity:0; animation:openerUp .8s cubic-bezier(.2,.7,.2,1) .42s both;
}
.opener__tag{
  margin:0; font-size:clamp(12px,1.6vw,16px); letter-spacing:.08em;
  line-height:1.8; color:#fff;   /* 背景が淡いので白のまま透かさない */
  opacity:0; animation:openerUp .8s cubic-bezier(.2,.7,.2,1) .62s both;
}
@keyframes openerOut{
  0%  { transform:translateY(0); border-radius:0; }
  100%{ transform:translateY(-100%); border-radius:0 0 45% 45% / 0 0 18% 18%; visibility:hidden; }
}
@keyframes openerPop{
  0%  { opacity:0; transform:translateY(28px) scale(.78); }
  60% { opacity:1; transform:translateY(0) scale(1.06); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes openerUp{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
/* スマホは尺を短く */
@media (max-width:900px){
  .opener{ --op-hold:1.25s; --op-out:.65s; }
}
@media (prefers-reduced-motion: reduce){
  .opener{ display:none !important; }
}

/* =========================================================
   ★ 修正まとめ（2026-08 クライアント指摘）
   ・FVの文字を左に寄せ、家の写真にかぶらない大きさに
   ・アクション（動き）を全体的にゆっくり
   ・「なぜ今〜」帯の繰り返しを控えめに
   ・見出し「不動産エージェントって、何ですか？」を拡大
   ・「ハウスメーカー出身の宅建士による」帯を大きく
   ・プロフィールを名前大きく／写真の上に／レーダー大きく
   ========================================================= */

/* --- FV：コピーは左半分に収め、家の写真にかぶらない --- */
@media (min-width:901px){
  :root{ --display-mv: clamp(40px, 5.8vw, 80px); }   /* もっと大きく（家にかぶらない範囲で） */
  .fv__copy{ max-width:min(680px, 52%); margin-left:calc(-1 * clamp(4px, 1vw, 22px)); } /* 気持ち左寄せ */
  /* コピー群をもっとメイン上側へ（下パディングを増やすほど上がる） */
  .fv__inner{ padding:clamp(52px,6vh,84px) 0 clamp(150px,23vh,270px); }
  /* 左の白かぶせを広げ、左側の文字をくっきり */
  .fv::after{
    background:linear-gradient(96deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.80) 32%,
      rgba(255,255,255,.44) 52%,
      rgba(255,255,255,0) 70%);
  }
}
.fv__sub{ max-width:none; }
.fv__note{ max-width:none; }
.logo__en{ white-space:nowrap; }

/* --- アクション（動き）を全体的にゆっくり --- */
.marquee__track{ animation-duration:46s; }
.walkers{ animation-duration:50s; }
.walker__body,.leg{ animation-duration:.9s; }
.fv__title .fv__line,.fv__sub,.fv__note,.fv__actions .btn,.fv__label,.fv__scroll{ animation-duration:1.35s; }
.opener{ --op-hold:2.1s; --op-out:1.05s; }

/* --- 「なぜ今〜」帯：間隔を広げ、画面には最大1〜2個だけ見せる --- */
.marquee{ padding:18px 0; }
.marquee__track span{ gap:clamp(40px,7vw,120px); padding-right:clamp(40px,7vw,120px); }

/* --- 見出し「不動産エージェントって、何ですか？」を約1.5倍に --- */
.agent__title{ font-size:calc(var(--h2) * 2.05); line-height:1.28; }

/* --- 「ハウスメーカー出身の宅建士による」帯を大きく（帯も文字も） --- */
#service .section-head{ text-align:center; }
.services__crown,.section--brand .services__crown{
  display:inline-block; margin:0 0 20px; padding:.72em 1.6em;
  border:none; border-radius:999px;
  background:var(--brand-dark); color:#fff;
  font-size:clamp(14px,1.7vw,19px); font-weight:700; letter-spacing:.1em;
  box-shadow:0 8px 22px rgba(36,65,63,.18);
}

/* --- サービス（白背景に移設）：カードに軽い区切りを --- */
#service .svc-card__media{ box-shadow:0 14px 34px rgba(20,40,38,.08); }

/* --- プロフィール：名前を大きく写真の上に、セクションとして強調 --- */
.profile-head{ text-align:center; margin-bottom:clamp(30px,4.4vw,56px); }
.profile-head .eyebrow{ display:inline-block; padding-left:0; }
.profile-head .eyebrow--line::before{ display:none; }
.profile__name--hero{
  font-size:clamp(24px,2.9vw,37px); line-height:1.25; letter-spacing:.06em; font-weight:600; margin:0 0 4px;
}
.profile__name--hero small{
  display:inline-block; font-family:var(--disp); font-weight:400;
  font-size:.4em; letter-spacing:.14em; color:var(--brand); margin:0 0 0 .7em; vertical-align:.18em;
}
.profile__role--lg{
  font-size:clamp(15px,1.5vw,19px); line-height:1.85; color:var(--grey); margin:14px auto 0; max-width:44em;
}
/* --- 「プロフィール」はセクションのメイン見出しとして大きく --- */
.profile__section-title{ font-size:clamp(30px,3.8vw,50px); letter-spacing:.06em; }
/* 名前・役職などは写真の“となり”（右カラム）に配置 */
.profile__name--hero{ margin-top:0; }

/* --- 実績（数字）の隣にレーダーチャートを並べる（27年の隣） --- */
.profile__data{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:clamp(14px,2.6vw,44px); margin:26px 0;
}
.profile__data .profile__stats{ margin:0; }
.profile__data .radar.radar--lg{ width:min(320px,38vw); }
.profile__data .radar.radar--lg text{ font-size:13px; }
/* 数字を仕切る棒線は半分の長さに（27年の下だけに短く） */
.profile__stats{ border-top:none !important; border-bottom:none !important; position:relative; }
.profile__stats::before,.profile__stats::after{
  content:""; position:absolute; left:0; width:50%; height:1px; background:rgba(22,48,46,.18);
}
.profile__stats::before{ top:0; }
.profile__stats::after{ bottom:0; }
.profile__foot{ margin-top:8px; }

/* =========================================================
   ★ スマホ最適化
   ========================================================= */
@media (max-width:900px){
  /* FV：家を右へ寄せ、コピーは左側に収める（家に文字がかぶらない） */
  .fv__sub,.fv__note{ max-width:100%; }
  /* 帯の文字が詰まりすぎないよう間隔を確保 */
  .marquee__track span{ gap:clamp(28px,10vw,64px); padding-right:clamp(28px,10vw,64px); font-size:clamp(13px,3.6vw,17px); }
  /* プロフィール見出し */
  .profile__name--hero{ font-size:clamp(26px,7.4vw,38px); }
  .profile__name--hero small{ display:block; margin:.5em 0 0; font-size:.5em; }
  .profile__role--lg{ font-size:14px; }
  /* サービス見出しの帯 */
  .services__crown,.section--brand .services__crown{ font-size:13px; padding:.6em 1.2em; }
  /* 見出し（何ですか？）はスマホで大きくなりすぎない */
  .agent__title{ font-size:calc(var(--h2) * 1.7); line-height:1.34; }
}
/* タブレット〜小型PC：家を右端へ寄せ、コピーは左64%に収める */
@media (min-width:601px) and (max-width:900px){
  :root{ --display-mv: clamp(30px, 5.4vw, 50px); }
  .fv__photo{ object-position:92% center; }
  .fv__copy{ max-width:64%; }
}
/* スマホ：家は右端に、コピーは全幅。左〜中央に白かぶせで文字をくっきり */
@media (max-width:600px){
  :root{ --display-mv: clamp(30px, 8.4vw, 44px); }
  .fv__photo{ object-position:90% center; }
  .fv__copy{ max-width:100%; }
  .fv::after{
    content:""; background:linear-gradient(180deg,
      rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 40%,
      rgba(255,255,255,.5) 66%, rgba(255,255,255,0) 100%);
  }
}
@media (max-width:600px){
  /* 5ステップは2列に（縦長になりすぎない） */
  .steps5{ grid-template-columns:1fr 1fr; gap:10px; }
  .steps5 .step5{ padding:20px 16px; }
  .step5 h3{ font-size:15px; }
  .step5 p{ font-size:13.5px; line-height:1.75; }
  /* プロフィール：数字とレーダーは縦積みで中央寄せ */
  .profile__data{ grid-template-columns:1fr; gap:8px; }
  .profile__data .radar.radar--lg{ width:min(340px,86%); margin:6px auto 0; }
  .profile__stats::before,.profile__stats::after{ width:100%; }
  .profile__foot{ justify-content:center; }
  .profile__stats{ gap:20px; }
  .profile__stat b{ font-size:28px; }
  /* サービスカードは縦積み時にタップしやすく余白確保 */
  #service .svc-card__body{ padding:16px 0 0; }
}

/* =========================================================
   ★ スマホ：文字と画像は横並びをやめ、縦に積む
   （後方の無条件ルールで2カラムに戻っていたのを最終上書き）
   ========================================================= */
@media (max-width:900px){
  /* 「不動産エージェントって、何ですか？」：文字→画像で縦積み */
  .agent__intro{ grid-template-columns:1fr !important; gap:clamp(24px,5vw,40px) !important; }
  .agent__intro .agent__body{ order:1; }
  .agent__intro .agent__model{ order:2; max-width:360px; margin-inline:auto; }

  /* 「担当者ガチャ」：文章→画像で縦積み */
  .about__top{ grid-template-columns:1fr !important; gap:clamp(24px,5vw,40px) !important; }
  .about__models{ max-width:560px; margin-inline:auto; }
  .about__models figure:first-child{ margin-top:0; }
}
@media (max-width:520px){
  /* 極小画面では担当者ガチャの2枚も1枚ずつ縦に */
  .about__models{ grid-template-columns:1fr; max-width:420px; }
  .about__models img{ aspect-ratio:4/3; }
}

/* =========================================================
   ★ スマホ最適化：MVは縦位置の専用ビジュアルへ差し替え
   （index.html の <picture> で 600px 以下は hero-house-sp.jpg を読み込む）
   ========================================================= */
.fv__stage picture{ display:block; width:100%; height:100%; }
@media (max-width:600px){
  /* 縦長写真なので、水盤と建物の両方が入る位置でトリミング */
  .fv__photo{ object-position:78% center; transform:scale(1.03); }
  /* 上部の空が明るいぶん、白かぶせは薄めにして写真の抜け感を残す */
  .fv::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.78) 0%, rgba(255,255,255,.62) 38%,
      rgba(255,255,255,.34) 62%, rgba(255,255,255,0) 100%);
  }
}

/* =========================================================
   ★ スマホ：長いラベルのボタンが2行に折り返さないように
   （折り返す場合も矢印が文末に続くよう、フレックスから通常の行送りへ）
   ========================================================= */
@media (max-width:600px){
  .btn{
    display:inline-block; text-align:center;
    padding:15px 22px; font-size:13.5px; letter-spacing:.02em;
  }
  .btn .btn__arrow{ display:inline-block; margin-left:.7em; }
}

/* お問い合わせフォーム：送信先が未設定のときに出る案内文 */
.form__pending{
  width:100%; margin:16px 0 0; text-align:center;
  color:#b4432c; font-weight:600; line-height:1.8;
}