/* SAMPLE-REALESTATE テーマ — 配色・書体・タイポサイズのみ
 *
 * 骨格は _kit/style-base.css。ここは「明色クール（霧のグレー＋濃紺）／
 * 可変ウェイト 650 のヒューマニストサンセリフ／直角の矩形塗り」という
 * このサンプルの声だけを持つ。
 * 色の実値は書かない。すべて config.js の palette から CSS 変数で届く（G7）。
 *
 * ★K2: _kit に出てくる素のクラス名を、_kit と同じプロパティで上書きしない。
 *   ここで書いているのは _kit が持っていないプロパティだけ。
 *   （例: _kit の .cta は display/align-self/margin-top/padding/text-decoration/transition。
 *     こちらは border/border-radius/background/color/font-* だけを足す）
 *
 * 対比の軸（既存5本との違い）:
 *   配色 … 暖色暗色3本・緑の明色1本・青緑の暗色1本 → 霧のグレー地に濃紺
 *   書体 … 400/500/600/800/900 → 650（100刻みの外。G15 を満たせる唯一の帯）
 *   CTA … 線のピル／塗りのピル／角の枠線／下線だけ／角丸4pxの塗り → ★直角の矩形塗り
 */

html, body {
  /* --c-bg が入るまでの下地。★明色基調なので白側から始める（暗転させない） */
  background: var(--c-bg, #F7F7F8);
}

body {
  color: var(--c-ink);
  font-family: var(--f-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ------------------------------------------------------------ タイポ */
/* ヒューマニストサンセリフ 650。字面に厚みがあるので字間は詰めすぎない。
   sample-cafe（幾何学 500・軽い）とは、太さと行間の詰め方で分ける */

.headline {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 650);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-size: clamp(2.1rem, 9.5vw, 7.2rem);
  color: var(--c-ink);
}

.headline--hero { font-size: var(--hero-size, clamp(2.2rem, 13.5vw, 8.8rem)); letter-spacing: -.03em; }

.sub {
  font-size: clamp(.95rem, 3.4vw, 1.18rem);
  color: var(--c-ink);
  line-height: 1.9;
}

/* ★文字は ink のまま（15.06:1）。accent は罫だけに使う。
   accent2 は bg の上で 2.66:1 しか出ないので、文字には一切使わない（実測）。 */
.tagline {
  font-size: clamp(.85rem, 3vw, 1.02rem);
  color: var(--c-ink);
  letter-spacing: .08em;
  border-left: 4px solid var(--c-accent);
  padding-left: .9em;
}

/* ★5種目の CTA は「直角の矩形塗り」。枠線を持たないのが既存5種との違い。
   枠線を1pxでも足すと sample-dining と形の署名が完全一致して G15 が落ちる。
   accent 塗りに bg の文字で 7.46:1（実測）。ink を載せると 2.02:1 で不可。 */
.cta {
  border: 0;
  border-radius: 0;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: clamp(.85rem, 3vw, 1rem);
  font-weight: 650;
  letter-spacing: .14em;
}
/* 明色地では「透明に戻す」と矩形が消えてしまうので、濃くする方向で反応させる */
.cta:hover, .cta:focus-visible {
  background: color-mix(in srgb, var(--c-accent) 78%, var(--c-ink));
  color: var(--c-bg);
}

/* S6 のブランド表示。明色基調に発光は効かないので、
   文字の足元に濃紺の板を差し込んで「銘板」に見せる（光らせない） */
.neon {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 650);
  font-size: clamp(1.8rem, 8.5vw, 6.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--c-ink);
  text-shadow: none;
  box-shadow: inset 0 -.22em 0 color-mix(in srgb, var(--c-accent) 26%, transparent);
  display: inline-block;
  align-self: flex-start;
  padding: 0 .16em;
}

/* ------------------------------------------------- 静的章（S7 / S8） */

.stage--static .headline { font-size: clamp(1.9rem, 6.5vw, 3.9rem); }

/* 価格表は罫で仕切らず、左に濃紺の柱を立てて「区画」に見せる */
.cards { background: transparent; border: 0; }

.card {
  background: color-mix(in srgb, var(--c-accent) 5%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.card__name {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .03em;
  color: var(--c-ink);
}
.card__price {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-accent);
}
/* 明るい地では ink を薄めるほどコントラストが落ちる（暗色基調と逆）。
   4.5:1 を確保できる濃さまでしか薄くしない */
.card__note { font-size: .84rem; color: color-mix(in srgb, var(--c-ink) 90%, transparent); }

.map {
  border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
  background: color-mix(in srgb, var(--c-accent) 6%, transparent);
}
.map__pin {
  background: var(--c-accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 16%, transparent);
}
.map__label { font-size: .8rem; color: color-mix(in srgb, var(--c-ink) 92%, transparent); letter-spacing: .05em; }

.access div { font-size: clamp(.9rem, 3.1vw, 1.05rem); color: var(--c-ink); }

/* ★ここだけ accent2（真鍮）を使う。罫なので文字のコントラストには関わらない */
.footnote {
  border-top: 3px solid color-mix(in srgb, var(--c-accent2) 60%, transparent);
  font-size: .78rem;
  color: color-mix(in srgb, var(--c-ink) 90%, transparent);
  letter-spacing: .03em;
}

/* ================================================ 文字の出現：ぼやけ → 合焦 */
/*
 * 既存6サイトはどれも「左→右のワイプ（clip-path）＋左からのスライド」で、
 * 演出が完全に同一だった（実測）。ここだけは輪郭が結ばれて決まる出方にする。
 * ★不動産＝「見極める」の比喩。ぼけた像が合焦して像を結ぶ。
 *
 * ■ 基底スタイル＝合焦後（鮮明）。ぼけているのは @keyframes の from 側だけ。
 *   ガードは撮影の直前に animation:none を注入するので、
 *   アニメーションが消えた要素は必ず「基底＝鮮明」で描かれる（G3 が最終状態を測る）。
 *
 * ■ [data-reveal] は js/reveal.js が付ける合図。付かなければ（JS が読めなければ）
 *   下の規則は1つも効かず、_kit 既定のワイプのまま文字が読める（G6）。
 *
 * ■ K2: _kit の素のクラスを同じプロパティで上書きしない。
 *   ここはすべて .stage[data-reveal…] を噛ませた別セレクタ。
 *   拡大は transform ではなく独立プロパティの scale を使う
 *   （transform は _kit が毎フレーム inline で書くので取り合いになる）。
 */

/* _kit 既定のワイプと横スライドを止める。JS が生きているときだけ */
.stage[data-reveal] .headline,
.stage[data-reveal] .neon {
  clip-path: none !important;
  transform: none !important;
}
.stage[data-reveal] .sub { transform: none !important; }

/* ★EDIT-RE-1 調整: キーフレームから opacity を外した。
 * 理由（実測）: ・.sub は .12s、.cta は .24s の遅延を持ち、fill-mode: both のため
 *   遅延中は from の opacity: 0 を保持する。章へ送って 140ms 後の実測で
 *   .sub = 0 / .cta = 0（280ms で .cta = 0.092、500ms で 0.910）だった。
 *   ★js/reveal.js は章を出るたび 'ready' に戻して再入時に再生し直すため、
 *   スクロールの往復で CTA（個別相談を予約）が毎回 0.24 秒間消える。
 * ★見た目は変えていない: 「ぼやけ→合焦」の比喩は filter: blur() が担っており、
 *   fill-mode: both のままなので遅延中は「ぼけている」状態で待機する。
 *   違うのは「透明だったが→読める」点だけ。 */
@keyframes re-focus-lead {
  from { filter: blur(14px); scale: 1.03; }
  to   { filter: blur(0);    scale: 1; }
}
@keyframes re-focus-body {
  from { filter: blur(8px); scale: 1.02; }
  to   { filter: blur(0);   scale: 1; }
}

/* 見出し → リード文 → タグライン → CTA の順に、わずかな時間差で決まる。
   イージングは終わりにかけて強く減速する（止まり際がゆっくり）。 */
.stage[data-reveal='in'] .headline,
.stage[data-reveal='in'] .neon {
  animation: re-focus-lead .72s cubic-bezier(.16, 1, .3, 1) both;
}
.stage[data-reveal='in'] .sub {
  animation: re-focus-body .68s cubic-bezier(.16, 1, .3, 1) .12s both;
}
.stage[data-reveal='in'] .tagline {
  animation: re-focus-body .68s cubic-bezier(.16, 1, .3, 1) .18s both;
}
.stage[data-reveal='in'] .cta {
  animation: re-focus-body .66s cubic-bezier(.16, 1, .3, 1) .24s both;
}

/* ★動きを減らす設定では演出せず、最終状態を即座に出す（既存の作法と同じ） */
@media (prefers-reduced-motion: reduce) {
  .stage[data-reveal='in'] .headline,
  .stage[data-reveal='in'] .neon,
  .stage[data-reveal='in'] .sub,
  .stage[data-reveal='in'] .tagline,
  .stage[data-reveal='in'] .cta {
    animation: none;
  }
}

/* ============================================================== B24 */
/* JS が動かなくても真っ白にしないための塊。                          */
/* ★組み立てが終わった合図（<html data-ready="1"）が付いたときだけ隠す。 */
/*   付かない＝どこかで失敗した、なので出したままにする。             */
/* ★色は config の palette を使わない（G7 のハードコード検査に触れる）。 */
/*   代わりにブラウザの標準色（Canvas / CanvasText）を自分で塗る。      */
/*   JS が動かない＝palette も届かないので、どのサイトでも読める。      */
/* ============================================================== */

.nojs {
  position: absolute;
  inset: 0;
  padding: 12vmin 7vmin;
  display: grid;
  gap: 1.1rem;
  align-content: center;
  justify-items: start;
  background: Canvas;
  color: CanvasText;
  font-family: system-ui, sans-serif;
}

.nojs__lead { font-size: clamp(20px, 5vw, 34px); line-height: 1.5; margin: 0; }

.nojs__price { font-size: clamp(14px, 3.4vw, 18px); line-height: 1.7; margin: 0; }

.nojs__go {
  align-items: center;
  min-height: 48px;
  padding: 0 1.4em;
  border: 2px solid currentColor;
  border-radius: 0;
  color: CanvasText;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
}

/* ★B31-d: 飛び先を持たない（＝押せない）ときは、押せる見た目をやめる。
   文言はそのまま出す。JS が組み上がると href が付き、この指定は外れる。 */
.nojs__go:not([href]) {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
}

/* JS が動くなら隠す（明色なので暗転はしないが、二重表示を避ける） */
:root[data-js='1'] .nojs { display: none; }

/* ★読み込みが終わっても組み立ての合図が無い＝失敗。受け皿を戻して出す */
:root[data-boot='failed'] .nojs { display: grid; }