/* =================================================================
   画面幅で切り替わる指定だけを置く（R1-3）

   スマホの見た目は hall.css。ここはそれを上書きするだけ。
   切り替え幅は 768px（R12-2）。幅と関係のない指定をここに書かない。
   ================================================================= */

@media (min-width: 768px){
  html{ font-size: 75%; }                                                  /* 1rem = 12px */
  body{ padding-bottom: 0; }
  .pconly, .visitor-band .pconly{ display: inline-flex; }
  .sponly{ display: none; }

  /* ---- ヘッダー：帯＋ヘッダーをまとめて固定し、スクロールで帯だけ上に隠す（帯の高さ 36px） ---- */
  .masthead{ display: flex; flex-direction: column; position: sticky; top: -36px; z-index: 30; }
  .visitor-band{ order: -1; height: 36px; padding-top: 0; padding-bottom: 0; justify-content: flex-end; }
  .visitor-band .vb-tel{ margin-right: auto; border-bottom: 0; }   /* 電話は帯の左端（営業案件のご相談が多いため） */
  .hd-nav .hd-tel, .hd.is-open .hd-nav .hd-tel{ display: none; }    /* PCは帯に出している */
  .hd{ position: static; height: 76px; gap: 20px; transition: height .2s; }
  .hd.is-scrolled{ height: 64px; }
  .hd-logo-img{ height: 40px; }
  .hd-acts{ display: flex; gap: 8px; }
  .hd-acts .act{ padding: 0 16px; font-size: 1.3rem; }
  /* 本文の主ボタンが画面から外れたら、ヘッダーの「見学を予約する」を主にする（R7-3。hall.js） */
  .hd.cta-on .hd-visit{ background: var(--key); color: #fff; border-color: var(--key); }
  /* 768〜1199px はメニューを「メニュー」ボタンの中に入れる（7項目が1行に入らないため） */
  .hd.is-open .hd-nav{ top: 100%; }

  .crumbs ol{ max-width: calc(var(--maxw) + var(--pad) * 2); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }

  /* ---- 節 ---- */
  .sec{ padding: 64px var(--pad); }
  .sec-head{ margin-bottom: 28px; }
  .sec-head h2{ font-size: 2.7rem; }
  .acts{ flex-direction: row; flex-wrap: wrap; }
  .closing .acts{ justify-content: center; }

  /* ---- ファーストビュー：左に文、右に写真 ---- */
  .hero-txt{ max-width: calc(var(--maxw) + var(--pad) * 2); margin-left: auto; margin-right: auto; padding: 32px var(--pad) 48px; }
  .hero h1{ font-size: 3rem; }
  .phead{ padding: 40px var(--pad) 40px; }
  .map iframe{ aspect-ratio: auto; height: 400px; }
  .phead-in{ max-width: var(--maxw); margin-left: auto; margin-right: auto; }
  .phead h1{ font-size: 2.6rem; max-width: 820px; }
  .phead-lead{ max-width: 820px; }
  /* 写真は本文の幅に収めて角を丸める（トップは画面の端まで。R12-3） */
  .phead-photo{ aspect-ratio: auto; height: 360px; max-width: var(--maxw); margin: 32px auto 0; border-radius: var(--r-lg); overflow: hidden; }

  /* ---- 一覧・カードを横に並べる（R12-3） ---- */
  .purpose{ grid-template-columns: 1fr 1fr 1fr; }
  .view-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
  .rooms{ grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
  .remote{ grid-template-columns: repeat(3, 1fr); }
  .reasons{ grid-template-columns: repeat(3, 1fr); column-gap: 28px; border-top: 0; }
  .reasons li{ border-top: 1px solid var(--line); border-bottom: 0; }
  .promises{ grid-template-columns: repeat(5, 1fr); }
  .promises li{ display: block; }
  .promises-ic{ margin-bottom: 10px; }
  .cases{ grid-template-columns: repeat(3, 1fr); }
  .methods{ grid-template-columns: repeat(3, 1fr); }
  .points{ grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .photos{ gap: 12px; margin-top: 28px; margin-bottom: 28px; }
  .photos-1{ grid-template-columns: 1fr 1fr; }
  .photos-3{ grid-template-columns: 1fr 1fr 1fr; }
  .photos-3 > :first-child{ grid-column: auto; }
  .photos-3 > :first-child img{ aspect-ratio: 4/3; }
  .photos-4{ grid-template-columns: repeat(4, 1fr); }

  /* ---- フッター ---- */
  .ft-nav{ grid-template-columns: repeat(4, 1fr); }

  /* PCでは固定バーを出さない（ヘッダーに見学予約がある） */
  .fixbar{ display: none; }
}

/* ---- 1024px 以上：写真は画面の幅いっぱいに、上に何も重ねない（奥行きを見せる。2026-09-27 鬼頭さんの指示）。
        文字は写真の下に2列（左：見出し・説明／右：数字・ボタン）。角を丸めない R12-5 ---- */
@media (min-width: 1024px){
  .hero-img{ height: 560px; aspect-ratio: auto; }
  .hero-txt{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start;
    max-width: calc(var(--maxw) + var(--pad) * 2); margin-left: auto; margin-right: auto; padding: 40px var(--pad) 56px; }
  .hero-txt > .eyebrow, .hero-txt > h1, .hero-txt > .hero-lead{ grid-column: 1; }
  .hero-txt > .spec-grid{ grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .hero-txt > .acts{ grid-column: 2; grid-row: 3; }
}

/* ---- 1200px 以上：ヘッダーにメニューを1行で並べる ---- */
@media (min-width: 1200px){
  .hd-nav, .hd.is-open .hd-nav{ display: flex; flex-direction: row; position: static; padding: 0; border: 0; gap: 18px; font-size: 1.3rem; }
  .hd-nav a, .hd.is-open .hd-nav a{ display: inline-flex; align-items: center; min-height: var(--tap); border-bottom: 0; white-space: nowrap; }
  .hd-nav a[aria-current="page"]{ border-bottom: 2px solid var(--ink); }
  .js .hd-menu{ display: none; }
}

@media (min-width: 768px){
  .eq-cards{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px){
  .eq-cards{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px){
  .post-cards{ grid-template-columns: repeat(2, 1fr); }
  .post-exit-cards{ grid-template-columns: 1fr 1fr; }
  .news-list li{ flex-direction: row; gap: 20px; }
  .post-head h1{ font-size: 2.6rem; }
}
@media (min-width: 1024px){
  .post-cards{ grid-template-columns: repeat(3, 1fr); }
}