@charset "UTF-8";

/* ============================================================
   iekatsu トップページ — フロント固有スタイル
   デザイン本体は global.css → editorial.css が担当する。
   ここには Editorial トップにしか無い要素のみを置く:
     - 運営者セクションのわが家FV画像（.about-fv）
     - SEO 用 視覚非表示 h1（.top-h1-seo）
   （※ 旧 top.css にあった明朝・ベージュ系のデザインシステムは
      別デザイン案のもので editorial.css と競合するため撤去）
   ============================================================ */

/* ---------- 運営者: わが家の横長FV画像（about-display と同幅） ---------- */
.about-fv {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto clamp(30px, 4vw, 52px);
  border: 1px solid var(--line-strong);
  background-color: var(--paper-2);
  overflow: hidden;
}
.about-fv img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 本文カラムをFV画像と同じ幅に揃える（front のみ。about ページの 56ch は不変） */
.sec.about .about-body { max-width: 720px; }

/* 坪単価セクションのみ: リードをタイトルの下に積む（右寄せ解消・幅制限なし） */
#tsubo .sec-head { flex-direction: column; align-items: flex-start; }
#tsubo .sec-lead { max-width: none; }

/* ---------- 診断バナー（.diagband 内・診断ページへ誘導） ----------
   旧・擬似Q1ボックス（.diag-box）に代わるクリック可能なバナーCTA。 */
.diag-cta {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: clamp(26px, 3.4vw, 40px);
  text-decoration: none; color: var(--paper);
  transition: border-color 0.18s, background 0.18s;
}
.diag-cta:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.04); }
.diag-cta__no { font-family: var(--f-mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; }
.diag-cta__q { font-family: var(--f-ja); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.6; margin: 12px 0 14px; }
.diag-cta__lead { font-family: var(--f-ja); font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.85; }
.diag-cta__btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-family: var(--f-grotesk); font-weight: 700; font-size: 14px;
  background: var(--accent); color: #fff; padding: 13px 22px;
}

/* ---------- SEO 用 H1（視覚非表示・読み上げ/クローラ向け） ---------- */
.top-h1-seo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}