@charset "UTF-8";
/* =============================================================
   top.css — TOPページ固有のセクションスタイル
   （共通部品は common.css。ここは各ブロックの組版のみ）
   ============================================================= */

/* ---- HERO -------------------------------------------------- */
/* ⚠ 2026-09-08：**初期表示にお知らせの帯まで見えるように。**
   ヒーローと帯を .hero-wrap（100svh）に入れ、ヒーローは「残り」を取る。
   帯の高さを px で引き算しない（文字数・画面幅で変わるため）。 */
.hero-wrap{height:100svh;min-height:560px;display:flex;flex-direction:column}
.hero{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.34) 0%,rgba(20,18,16,.24) 38%,rgba(20,18,16,.24) 62%,rgba(20,18,16,.40) 100%)}
.hero__inner{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto}
/* ヒーロー見出し＝日本語1行・36px（SPは1行を保つため縮小） */
.hero__title{color:#fff;font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,4.7vw,36px);line-height:1.5;letter-spacing:.06em;white-space:nowrap;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* 見出しの下の「ブランドコンセプトを見る」（2026-09-11）。
   ⚠ 写真の上なので .btn.primary（オレンジ地・白文字）。透過の .btn だと明るい写真で輪郭が消える。
   ⚠ 下に番号ボタン（.hero__dots）とスクロールキュー（.hero__scroll）があるので、
      余白を取りすぎると縦に詰まる。実測でここは 26px。 */
.hero__cta{margin-top:clamp(18px,2.2vw,26px)}
@media (max-width:600px){
  .hero__cta{font-size:13px;padding:13px 24px}
}
/* ---- HERO：動画1枚＋写真3枚の送り（[data-pslide]を全面で使う） ----
   仕掛けは下層の写真スライドと同じ。器だけ「カード」から「全面」に付け替える。
   ⚠ .pslide__track は既定で min-height を持つ器なので、ここで絶対配置に上書きする。
      上書きを忘れると、スライドがヒーローの外に高さを作って下のセクションを押し下げる。 */
.hero__track{position:absolute;inset:0;height:100%;min-height:0;aspect-ratio:auto}
.hero__slide{margin:0}
/* 動画も写真も同じ扱い（.hero__media で cover）。
   ⚠ .pslide__item は pointer-events:none なので、ドットは器の側（.hero直下）に置く。 */
.hero__slide img,
.hero__slide video{width:100%;height:100%;object-fit:cover;display:block}

/* 写真のどこを残すか（common.css の「--op 系」）。
   ⚠ 縦長の画面（スマホ）ではヒーローの器が 0.53 になり、3:2 の写真は
      横の 35% しか映らない（実測）。真ん中で切ると、人が画面の外へ出てしまう
      （リビングの写真は祖母と孫が右寄りで、既定のままだと空のソファだけになる）。
      なので写真ごとに「残す位置」を持たせる。横長の画面では全幅が映るので効かせない。 */
.hero__slide{--op:50%}
.hero__slide--living{--op:48%}    /* 板張りの天井とカウンター＝中央 */
.hero__slide--kitchen{--op:50%}   /* アイランドと石目の壁＝中央 */
.hero__slide--dining{--op:60%}    /* ダイニングと窓＝やや右 */
@media (max-aspect-ratio:1/1){
  .hero__slide img{object-position:var(--op) center}
}

/* ドット＝ヒーローの右下。スクロールキュー（中央下）とSNS（右中央）を避ける位置。
   ⚠ 座布団も枠線も付けない（2026-09-05）。数字だけを写真の上に置く。
      読めるかは .hero::after のスクリム（下端 rgba(20,18,16,.40)）＋数字の影で担保する。
      共通の .pslide__dots は白い座布団を持っているので、ここで background と
      border を打ち消しておかないとヒーローだけ白い丸帯が出る。
   ⚠ 座布団を外すと padding（8px 18px 7px）の分だけ数字が端に寄る。位置を
      変えないよう、その分を right / bottom に足し戻している。 */
.hero__dots{position:absolute;z-index:3;
  right:calc(clamp(14px,4.4vw,84px) + 18px);bottom:calc(clamp(30px,3.4vw,44px) + 7px);
  align-items:flex-end;
  background:none;border:0;border-radius:0;padding:0;gap:clamp(14px,1.4vw,20px);
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* 数字は写真の明暗に関係なく読めること。座布団が無いので、見出しと同じ影を敷いて
   明るい写真でも輪郭が残るようにする。選んでいない番号も白の62%までは落とさない。 */
.hero__dots .pslide__dot--num{color:rgba(255,255,255,.62);
  text-shadow:0 1px 10px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.35)}
.hero__dots .pslide__dot--num:hover{color:#fff}
.hero__dots .pslide__dot--num.is-current{color:#fff}
.hero__dots .pslide__dot--num:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ※ 追従SNS（.hero__social / .hsoc）は全ページ共通のため common.css に移設 */
/* ※ スクロールキュー（.hero__scroll）は全ページ共通のため common.css に移設 */

/* ---- ブランドコンセプト ----------------------------------- */
.concept{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size)}
/* ※ 写真＋重なる白ボックス（.concept__overlap/photo/box/title/lead/script）は
   下層でも使う共通レイアウトのため common.css に移設 */

/* ---- 2入口分岐 -------------------------------------------- */
.entry{background:var(--white)}
/* コンテンツ幅に揃えた2カード（カード間に余白・区切り罫なし） */
.entry__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,48px)}
.entry__card{display:block;position:relative;background:transparent;overflow:hidden;border:none}
.entry__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.entry__media img{width:100%;height:100%;object-fit:cover}
.entry__body{padding:clamp(22px,2.4vw,34px) 2px 4px}
.entry__cat{font-family:var(--en);font-size:13px;letter-spacing:.18em;color:var(--accent);
  text-transform:uppercase;font-weight:600}
.entry__cat small{font-family:var(--serif);color:var(--sub);text-transform:none;letter-spacing:.06em;font-size:12px;margin-left:8px}
.entry__title{font-family:var(--serif);font-size:clamp(21px,2.6vw,32px);font-weight:500;line-height:1.55;margin:5px 0 14px;letter-spacing:.04em}
.entry__desc{font-size:15px;color:var(--sub);line-height:1.95;margin:0 0 10px}
.entry__tags{position:absolute;right:14px;bottom:14px;z-index:2;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.entry__media .tag{margin:0;background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6);color:var(--ink)}
/* カードのCTA＝オレンジボタン（「詳しく見る」）。矢印入り・サイズを約2倍に */
/* 高さを少し抑える（上下22→15px。文字の大きさと横幅はそのまま） */
.entry__cta{margin-top:18px;padding:15px 48px;font-size:18px;gap:.8em}
.entry__undecided{margin:60px 0 0;text-align:center;
  border:0;padding:clamp(28px,4vw,48px);background:var(--bg)}
.entry__undecided h3{font-size:clamp(17px,2vw,22px);font-weight:500;margin-bottom:14px;letter-spacing:.08em}
/* 見出しの下のリード文 */
.entry__undecided-lead{font-size:15px;line-height:2.1;color:var(--sub);
  letter-spacing:.04em;margin:0 auto 24px;max-width:640px}
/* ボタンを左右で同じ大きさに（各200px幅）＋矢印でボタンと分かるように（コメント） */
/* テキストは中央／矢印は右端に寄せる */
.entry__undecided .btn{width:200px;position:relative;justify-content:center;gap:0}
.entry__undecided .btn .btn__arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%)}

/* ---- 事例グリッド／流れるカード（共通カード） ------------- */
/* 背景を「三角屋根の家」の形にする（2026-09-05）。
   意匠はコンセプトの家型カード（.vhouse）と同じ＝頂点と軒先を丸めた切妻。
   ⚠ 面は要素そのものではなく ::before に描く。clip-path では角を丸められないため、
      屋根のSVGマスクと胴体の矩形マスクを2枚重ねる（重なりの和で家型になる）。
   ⚠ z-index:-1 は使わない（背景の裏に回って消える）。::before を 0、中身を 1 に置く。
   ⚠ 屋根のぶんだけ上の余白を足す。足さないと見出しが三角の中に入って左右が切れる。
   ⚠ 上が白い節（.entry）だから屋根が見える。順番を入れ替えるときは、
      この節の上が白のままかを確かめる。 */
/* ⚠⚠ 屋根で切り抜いた「外側」は白でなければ見えない。
      body の地は同じクリーム（--bg）なので、ただ切り抜くと**切り抜いた所にも同じ色が出て
      屋根が消える**（2026-09-05 実測。画素で確かめるまで気づけなかった）。
      → この節じたいを白で塗り、その上にクリームの家型を重ねる。上の節（.entry）が白なので
        切り抜いた三角はそのまま白でつながる。 */
.works{position:relative;background:var(--white);
  /* ⚠ 全幅の帯では、屋根を低くすると「傾いた区切り線」にしか見えない。
        1440pxで100px（勾配8度）は屋根に見えなかった＝実測。勾配15度前後まで立てる。 */
  --roof:clamp(96px,13.5vw,250px);
  --roof-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20140%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%22M0%2C140%20L0%2C128%20Q0%2C120%209%2C115.5%20L705%2C3.4%20Q720%2C-1.4%20735%2C3.4%20L1431%2C115.5%20Q1440%2C120%201440%2C128%20L1440%2C140%20Z%22%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  /* 屋根のぶん全部を足すと見出しが下がりすぎる。屋根＋通常余白の6割で受ける。 */
  padding-top:calc(var(--roof) + var(--sec-pad) * .6)}
.works::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--bg) var(--grain) repeat;background-size:var(--grain-size);
  -webkit-mask-image:var(--roof-mask),linear-gradient(#000,#000);
          mask-image:var(--roof-mask),linear-gradient(#000,#000);
  /* 胴体は1pxぶん重ねて、屋根との継ぎ目に線が出ないようにする */
  -webkit-mask-size:100% var(--roof),100% calc(100% - var(--roof) + 1px);
          mask-size:100% var(--roof),100% calc(100% - var(--roof) + 1px);
  -webkit-mask-position:top center,bottom center;
          mask-position:top center,bottom center;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat}
.works > *{position:relative;z-index:1}
/* ※ .cards3 / .workcard 系 / .center-more は全ページ共通のため common.css に移設 */

/* ---- 4つの約束（.promise 系）→ 全ページ共通のため common.css に移設 --- */

/* ---- お客様の声 ------------------------------------------- */
.voice{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size)}
/* ※ .voice__score / .quote 系は全ページ共通のため common.css に移設 */

/* ---- イベント（薄グレー帯＋上端に重なる見出し） ---------- */
.event{background:var(--white)}
/* ※ .event__band 以下のイベント組版は全ページ共通のため common.css に移設 */

/* ---- 下層導線（4カード） ---------------------------------- */
/* 背景（paper）はカード垂直中央〜下のみ＝カードが背景から飛び出す */
.nav4{background:var(--white);padding-top:0}
.nav4__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);position:relative;z-index:0}
.nav4__grid::before{content:"";position:absolute;z-index:-1;
  top:50%;bottom:calc(-1 * var(--sec-pad));left:calc(50% - 50vw);width:100vw;
  background:var(--bg) var(--grain) repeat;background-size:var(--grain-size)}
/* .navcard 系は部位別ページ（#plan）でも使うため common.css に移設した */

/* ---- CTAバンド（.cta 系）＋改行ヘルパー → common.css に移設 ---- */

/* ---- レスポンシブ ----------------------------------------- */
@media (max-width:880px){
  .nav4__grid{grid-template-columns:1fr 1fr}
  .nav4{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size)}
  .nav4__grid::before{display:none}
  /* ⚠ ここで .nav4 も紙色になり、次の「お知らせ」と地続きになる。
        ところが .nav4 には .section-paper が付いていないので
        「同じ背景色が続く境目は詰める」規則（.section-paper + .section-paper）が効かず、
        96px + 96px ＝ **192px も空いていた**（2026-09-05・スマホ）。
        色が変わらない境目なので、ほかと同じ 48px + 48px にそろえる。
        ⚠ 880pxより広い画面では .nav4 は白で、下の余白は紙色の帯を作るために要る。触らない。 */
  .nav4{padding-bottom:var(--sec-pad-same)}
  .nav4 + .section-paper{padding-top:var(--sec-pad-same)}
}
@media (max-width:768px){
  /* スマホは2入口カードの間隔を広げる（この要素のみ） */
  .entry__grid{grid-template-columns:1fr;gap:60px}

  /* ※ お客様の声の横スワイプは全ページ共通のため common.css に移設 */
}
@media (max-width:560px){
  .nav4__grid{grid-template-columns:1fr 1fr;gap:25px} /* スマホ間隔 14→25 */
  /* ⚠ 2026-09-11：**ファーストビューの下に白い余白を出さない。**
     88svh だと、お知らせの帯の下に画面の12%（390×844で約100px）が白く残っていた。
     100svh にすると「ヒーロー写真＋お知らせの帯」でちょうど初期表示が埋まる。
     ⚠ svh（small viewport height）＝アドレスバーが出ている状態の高さ。
        vh にするとアドレスバーぶん足りなくなって帯が画面の下に隠れる。
     ⚠ 高さは器（.hero-wrap）で持つ。.hero に付けると帯のぶんだけはみ出す。 */
  .hero-wrap{height:100svh}
}
@media (max-width:600px){
  /* スマホ：「詳しく見る」ボタン(entry__cta)を小さく（2026-07-25） */
  .entry__cta{font-size:14px;padding:10px 20px}
  /* スマホ：ナビカードの和文ラベルを縮小・字間を詰める（2026-07-25） */
  /* スマホ：ヒーロー見出しをこの要素のみ調整（2026-07-25） */
  .hero__title{font-size:24px;line-height:40px;letter-spacing:2px}
  /* 2026-09-11：**スマホのヒーローは中央寄せ／ナビの下に少し余白。**
     ⚠ 見出しとボタンは justify-content:center で真ん中にある。上に余白を足すと、
        その半分だけ塊が下がる＝ヘッダーの下に空きができて、なお中央に見える。
        上の値はヘッダーの実寸（390pxで約84px）に合わせた。
     ⚠⚠ **下にも余白が要る。** スマホのヒーローは下から「バナー → 番号ボタン」が積まれる。
        下を空けずに中央へ寄せると、背の低い画面（375×667＝iPhone SE 等・ヒーロー560px）で
        **CTAボタンが番号ボタンに重なる**（実測）。下の積み荷のぶんを引いてから中央に寄せる。
        `--fixbnr-h` はバナーの実測の高さ（js/main.js が入れる。無いときは0）。 */
  .hero__inner{padding-top:84px;padding-bottom:calc(50px + var(--fixbnr-h,0px) + 40px)}
  /* スマホは右下ではなく **画面の中央下**（2026-09-05＝当時は SCROLL の真上）。
     ⚠⚠ 2026-09-11：SCROLLキューは600px以下で出さなくなり、代わりに**左下のバナー**が
        ヒーロー下端から50px上に入った。134px の決め打ちだと重なる（実測で7px重なっていた）。
        → **バナーの実測の高さから逆算する**。`--fixbnr-h` は js/main.js が入れる
          （画像しだいで高さが変わるので、CSSに数字を書かない。バナーが無ければ0）。
     ⚠ 右寄せをほどくので right:auto を明記する。付け忘れると left と right が
        両方効いて、幅いっぱいに広がったまま中央に寄らない。
     座布団を外したので padding は持たせない（PC側と同じ扱い）。 */
  .hero__dots{left:50%;right:auto;bottom:calc(50px + var(--fixbnr-h,0px) + 18px);
    transform:translateX(-50%);padding:0;gap:15px}
  /* スマホ：「まず相談・資料請求」ボタン幅 200→300（2026-07-25） */
  .entry__undecided .btn{width:300px}
}


/* ---- ヒーロー直下のお知らせ（1行）------------------------------
   2026-09-08。最新の1件だけを横1行で。
   ⚠ 節（.section）ではないので、余白のリズム（.section-white + …）は効かない。
     上下の余白はここで持つ。
   ⚠ トップだけで使う。トップが読むCSSは common と top の2本（functions.php）。 */
.hero-news{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size);
  border-bottom:1px solid var(--line)}
/* ⚠ 右端に追従しているSNSのボタン（.hero__social は position:fixed）と重なる。
   矢印を右端まで飛ばさず**文字のすぐ後ろ**に置き、右側に逃げ幅も取る。 */
/* ⚠⚠ .hero-news__in は .wrap そのもの。**左右の余白は .wrap の padding で作られている。**
   ここで padding-right を書くと**その余白を置き換えてしまい**、
   ・PC＝ボタンが右へ寄って追従SNS（fixed・.wrap の右端から始まる）に触れる
   ・スマホ＝右の余白が消えて画面の端にくっつく
   という2つが同時に起きた（2026-09-08）。**足す**書き方にする。 */
.hero-news__in{display:flex;align-items:center;gap:clamp(16px,2vw,32px);
  padding-block:clamp(14px,1.4vw,20px);
  padding-right:calc(var(--gut) + clamp(0px,2vw,40px))}
.hero-news__label{flex:none;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.16em;color:var(--accent2);
  padding-right:clamp(16px,2vw,32px);border-right:1px solid var(--line)}
.hero-news__item{flex:1;min-width:0;display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  color:var(--ink)}
.hero-news__date{flex:none;font-family:var(--num);font-size:14px;letter-spacing:.06em;color:var(--sub)}
/* ⚠ タイトルは1行で。長いものは「…」で切る（帯の高さを動かさないため） */
.hero-news__ttl{flex:0 1 auto;min-width:0;font-size:15px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-news__arw{flex:none;width:8px;height:8px;border-top:1px solid var(--ink);
  border-right:1px solid var(--ink);transform:rotate(45deg);transition:transform .3s ease}
.hero-news__item:hover .hero-news__ttl{color:var(--accent)}
/* お知らせ一覧へのボタン（2026-09-08）。
   ⚠ **色と形はヘッダーのCTAと同じ .btn.primary に任せる**（2026-09-08）。
      ここではヘッダーと同じ「小さめ」の寸法だけを指定する（common.css の
      .head-cta .btn{padding:12px 26px;font-size:13px} と同じ値）。
      オレンジを直に書かない＝ブランドの色を変えたとき一緒に変わる。
   ⚠ 追従SNS（.hero__social は fixed）は .wrap の右端から始まる。
      .hero-news__in の右余白（clamp(0,3vw,56px)）がその逃げ幅になっている。触らない。 */
.hero-news__all{flex:none;padding:12px 26px;font-size:13px}
@media (max-width:760px){
  /* スマホは2段。1行目＝ラベル（見出しのように小さく）／2行目＝日付とタイトルを続けて流す。
     ⚠ 縦線（border-right）は、右に何も来ない行だと**行き場のない線**になるので消す。 */
  /* スマホは追従SNSが出ないので、逃げ幅は要らない。.wrap の余白だけに戻す */
  .hero-news__in{flex-wrap:wrap;gap:6px;padding-block:14px;padding-right:var(--gut)}
  /* ラベルの行が空いているので、一覧ボタンはその右端に置く（行を増やさない） */
  .hero-news__label{flex:1;padding-right:0;border-right:0;font-size:12px}
  .hero-news__all{order:1;padding:9px 18px;font-size:12px}   /* 楕円ボタンなので上下をもう少し取る */
  .hero-news__item{order:2}
  /* ⚠ タイトルが長いと帯がどこまでも伸びる（実測：390pxで87→146px）。2行で止める。 */
  .hero-news__item{flex:1 1 100%;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .hero-news__date{display:inline;margin-right:10px}
  .hero-news__ttl{display:inline;white-space:normal;overflow:visible;font-size:15px;line-height:1.75}
  .hero-news__arw{display:none}
}

/* ---- 下層導線のすぐ下の節（いまはブランドコンセプト）の上余白 ----
   2026-09-08「Brand Concept の上の余白が少し広すぎる」。
   ⚠ .nav4 は白地だが、.nav4__grid::before が**紙色の帯をカードの途中から下へ**伸ばしていて、
     境目では色が変わっていない。なのに .nav4 には .section-paper が付いていないため
     「同じ色が続く境目は詰める」規則が効かず、**150px（異色境界の値）**が入っていた。
     色が変わらない境目なので、ほかと同じ 75px にそろえる。
   ⚠ 880px以下には同じ規則がすでにある（この下の @media）。ここは広い画面用。 */
@media (min-width:881px){
  .nav4 + .section-paper{padding-top:var(--sec-pad-same)}
}

/* ※ お客様の声のカルーセル（.vcaro）は 2026-09-11 に common.css へ移した。
     トップだけでなく下層ページ（/renovation/ ・/reform/ ・/service/ ・/showroom/ ・
     部位別の特集4本）でも同じ口コミを出すようになったため。
     下層は common + category しか読まないので、top.css に置いたままだと素の縦積みになる。 */

/* ---- ヒーローの送り：ゆっくりズームで、動画と写真のつなぎ目をなじませる（2026-09-15） ----
   奇数枚目はズームイン、偶数枚目はズームアウト。
   消えていくコマ（.is-prev）にも同じアニメを当てたままにする＝フェード中に拡大がパッと戻らない。
   ⚠ 送りの時間（5秒）＋フェード（0.9秒）より長くしておく。短いと止まったコマがフェード中に見える。 */
@keyframes okKbIn{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes okKbOut{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero__slide .hero__media{transform-origin:50% 50%;will-change:transform}
.hero__slide:nth-child(odd).is-current .hero__media,
.hero__slide:nth-child(odd).is-prev .hero__media{animation:okKbIn 6.4s ease-out both}
.hero__slide:nth-child(even).is-current .hero__media,
.hero__slide:nth-child(even).is-prev .hero__media{animation:okKbOut 6.4s ease-out both}
@media (prefers-reduced-motion:reduce){ .hero__slide .hero__media{animation:none!important} }