/*
Theme Name: 日青創建
Description: 外壁パネル・内壁・床の乾式内外装仕上げ「日青創建」のオリジナルテーマ。静的HTMLをそのまま移植しているため、見た目は元のサイトと同一です。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nissei
*/

/* =========================================================
   日青創建 — 共通スタイル
   意匠の核：外壁の「断面」。見えなくなる層の上に仕上がりがある、という主張を
   ヒーローの図と、墨出し線（両端に印のある細線）で通しています。
   色を変えたいときは下の :root だけを書き換えればサイト全体に反映されます。
   ========================================================= */

:root{
  /* 明るい配色で固定（端末のダークモードでフォームや配色が反転しないように） */
  color-scheme: light;

  /* ---- 素材の色 ---- */
  --c-ink:     #0D1922; /* 鉄紺：CTA帯とフッターの地 */
  --c-primary: #1F5C8B; /* 清々しい空（ブルー） */
  --c-accent:  #35A7D8; /* 水色：CTA・墨出しの印 */
  --c-zinc:    #A9B7C2; /* 亜鉛メッキ：罫線・図の輪郭 */
  --c-bg:      #F6F9FB; /* 生成りの白 */
  --c-paper:   #FFFFFF;
  --c-text:    #17242F; /* 黒に近い青 */
  --c-sub:     #5B7182; /* 補足文用アイスブルー */
  --c-line:    #D8E4ED; /* 区切り線 */

  /* ---- 断面の層（左＝先に施工する層／乾式外壁の構成） ---- */
  --l-01: #6E7C87; /* 躯体 */
  --l-02: #4E6B80; /* 防水シート */
  --l-03: #2E5F86; /* 通気胴縁 */
  --l-04: #2F81B4; /* 外装パネル */
  --l-05: #35A7D8; /* 目地・役物 */

  /* ---- 書体 ---- */
  --f-display:"Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body:"Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- 余白（8pxグリッド） ---- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-6:48px; --sp-8:64px; --sp-12:96px;
  --section-y:96px;
  --container:1120px;
}

/* =========================================================
   ベース
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px; font-weight:400; line-height:1.8;
  color:var(--c-text); background:var(--c-bg);
  font-feature-settings:"palt" 1;
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:var(--c-primary); text-decoration:none; transition:color .2s, background-color .2s, border-color .2s; }
a:hover{ color:var(--c-accent); }
h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:700; line-height:1.42; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* =========================================================
   共通部品
   ========================================================= */
.container{ width:min(100% - 40px, var(--container)); margin-inline:auto; }
.section{ padding-block:var(--section-y); }
.section--paper{ background:var(--c-paper); }
.section--ink{ background:var(--c-ink); color:#C8D6E0; }
.stack > * + *{ margin-top:var(--sp-3); }
.text-sub{ color:var(--c-sub); }

/* 墨出し線：両端に印を打った細線。区切りはすべてこれで統一する */
.rule{ position:relative; height:1px; background:var(--c-line); border:0; margin:0; }
.rule::before,.rule::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--c-accent); }
.rule::before{ left:0; } .rule::after{ right:0; }
.section--ink .rule{ background:rgba(255,255,255,.18); }

/* 数値・ラベル（等幅）。英字の見出し語ではなく、件数や工程番号など情報を載せる */
.meta{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; line-height:1.7; color:var(--c-sub);
}
.section--ink .meta{ color:#7E97A8; }

/* セクション見出し */
.s-head{ margin-bottom:var(--sp-6); }
.s-head .rule{ margin-bottom:var(--sp-2); }
.s-head .meta{ display:block; margin-bottom:var(--sp-2); }
.s-title{ font-size:clamp(23px, 3vw, 34px); letter-spacing:.02em; }
.section--ink .s-title{ color:var(--c-paper); }

/* セクション内の小見出し（h3）。s-title より一段小さく、本文より明確に大きく */
.sub-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(18px, 2.1vw, 22px); letter-spacing:.03em; line-height:1.5;
  margin-bottom:var(--sp-2);
}
.sub-title--gap{ margin-top:var(--sp-8); }

/* ボタン */
.btn{
  display:inline-block; padding:15px 30px;
  font-family:var(--f-body); font-size:15px; font-weight:700; letter-spacing:.04em;
  background:var(--c-accent); color:var(--c-ink);
  border:1px solid var(--c-accent); border-radius:2px; cursor:pointer; text-align:center;
  transition:background-color .2s, border-color .2s, color .2s,
             transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.btn:hover{ background:#5FBBE2; border-color:#5FBBE2; color:var(--c-ink); }
/* 乗せると少し浮き、押すと沈む */
.btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 6px 18px rgba(13,25,34,.16); }
.btn:active{ transform:translateY(0) scale(.98); box-shadow:none; }
.btn--ghost{ background:transparent; color:var(--c-primary); border-color:var(--c-zinc); }
.btn--ghost:hover{ background:transparent; color:var(--c-accent); border-color:var(--c-accent); }
.section--ink .btn--ghost{ color:var(--c-paper); border-color:rgba(255,255,255,.4); }
.btn--lg{ padding:18px 40px; font-size:16px; }


/* =========================================================
   スクロールで現れる演出
   すべて html.js（＝JSが動く環境）で修飾しています。
   JSが無効・読み込み失敗の場合、この節は一切効かず、内容は最初から見えたままです。
   ========================================================= */
html.js [data-reveal]{
  opacity:0;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d, 0) * 90ms);
  will-change:opacity, transform;
}
html.js [data-reveal="up"]   { transform:translateY(26px); }
html.js [data-reveal="left"] { transform:translateX(-44px); }
html.js [data-reveal="right"]{ transform:translateX(44px); }
html.js [data-reveal].is-visible{ opacity:1; transform:none; will-change:auto; }
/* 横方向のスライドで横スクロールバーが出ないように */
main{ overflow-x:clip; }

/* =========================================================
   画像プレースホルダ（方眼＝図面の地）
   画像未投入でも枠が崩れず、ファイル名と用途が枠内に出ます。
   画像を置くと <img> が枠を覆い、無ければ onerror で消えてラベルだけ残ります。
   ========================================================= */
.frame{
  position:relative; display:block; margin:0; overflow:hidden;
  background-color:var(--c-bg);
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size:16px 16px;
  box-shadow:inset 0 0 0 1px var(--c-line);
}
.frame::before{
  content:attr(data-label);
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--sp-2);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; line-height:1.8; color:#8FA2B0;
}
.frame img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.r-3x2{ aspect-ratio:3 / 2; }
.r-2x3{ aspect-ratio:2 / 3; }
.r-16x7{ aspect-ratio:16 / 7; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:50; background:var(--c-paper); border-bottom:1px solid var(--c-line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:var(--sp-2); }
.logo{ display:flex; flex-direction:column; line-height:1.15; color:var(--c-text); }
.logo b{ font-family:var(--f-display); font-weight:700; font-size:21px; letter-spacing:.06em; }
.logo span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; color:var(--c-sub); margin-top:4px; }
.gnav ul{ display:flex; align-items:center; gap:var(--sp-3); }
.gnav a{ display:inline-block; padding:8px 0; font-size:14px; letter-spacing:.04em; color:var(--c-text); }
.gnav a:hover{ color:var(--c-accent); }
.gnav a[aria-current]{ color:var(--c-primary); box-shadow:0 1px 0 var(--c-accent); }
.gnav__cta a{
  background:var(--c-ink); color:var(--c-paper); padding:11px 20px; border-radius:2px; font-weight:700;
  transition:background-color .2s, color .2s, transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.gnav__cta a:hover{
  background:var(--c-primary); color:var(--c-paper);
  transform:translateY(-2px) scale(1.03); box-shadow:0 6px 18px rgba(13,25,34,.2);
}
.gnav__cta a:active{ transform:translateY(0) scale(.98); box-shadow:none; }
.nav-toggle,.nav-toggle-btn,.nav-overlay{ display:none; }

/* =========================================================
   メインビジュアル（トップ最上部）
   建物の写真を全幅に敷き、その上に社名と業種を重ねます。
   写真（hero-main.jpg）が未投入でも、紺地のファーストビューとして成立します。
   ========================================================= */
.mv{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:clamp(420px, 68vh, 720px);
  background:var(--c-ink);
}
.mv__media{ position:absolute; inset:0; }
.mv__media img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
/* 文字が乗る左下だけを濃くする。
   縦と横の2枚を重ねることで、右上の空は明るいまま残ります。 */
.mv__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(13,25,34,.72) 0%,
      rgba(13,25,34,.34) 26%,
      rgba(13,25,34,.06) 56%,
      rgba(13,25,34,0) 100%),
    linear-gradient(to right,
      rgba(13,25,34,.46) 0%,
      rgba(13,25,34,.16) 38%,
      rgba(13,25,34,0) 64%);
}
.mv__body{ position:relative; z-index:1; padding-block:clamp(40px, 6vw, 76px); color:var(--c-paper); }
.mv__eyebrow{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--f-mono); font-size:clamp(12px, 1.35vw, 15px);
  font-weight:500; letter-spacing:.18em; color:var(--c-paper); margin-bottom:var(--sp-2);
  text-shadow:0 1px 12px rgba(13,25,34,.6);
}
/* 水色の文字は青空に埋もれるため、線だけをアクセント色にする（墨出し線のイメージ） */
.mv__eyebrow::before{
  content:""; flex:0 0 auto; width:clamp(24px, 3vw, 44px); height:2px; background:var(--c-accent);
}
.mv__name{
  margin:0; font-family:var(--f-display); font-weight:700; line-height:1.12;
  font-size:clamp(40px, 7.4vw, 96px); letter-spacing:.1em; color:var(--c-paper);
  text-shadow:0 2px 28px rgba(13,25,34,.45);
}
.mv__en{
  display:block; margin-top:var(--sp-2);
  font-family:var(--f-mono); font-weight:400; font-size:clamp(11px, 1.4vw, 15px);
  letter-spacing:.34em; color:rgba(255,255,255,.78); text-shadow:none;
}

/* =========================================================
   ヒーロー＋断面（このサイトの主役）
   ========================================================= */
.hero{ padding-block:clamp(48px, 7vw, 96px) var(--section-y); }
.hero__grid{ display:grid; grid-template-columns:6fr 6fr; gap:clamp(32px, 4.5vw, 72px); align-items:center; }
.hero__eyebrow{ display:block; margin-bottom:var(--sp-3); }
.hero__title{
  font-size:clamp(30px, 4.4vw, 52px); line-height:1.34; letter-spacing:.03em;
  margin-bottom:var(--sp-3);
}
.hero__lead{ color:var(--c-sub); margin-bottom:var(--sp-6); max-width:34em; }
.hero__actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* 断面図：左から施工順に層が並び、いちばん広い帯が仕上がりの写真。
   正方形にすると写真の枠がちょうど 2:3 になり、生成画像がそのまま収まる */
.cut{ margin:0; }
.cut__body{ display:flex; aspect-ratio:1 / 1; border:1px solid var(--c-zinc); background:var(--c-paper); }
.cut__strata{ display:flex; flex:0 0 auto; }
.cut__layer{
  position:relative; width:0; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  animation:cut-grow .55s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc((var(--i) - 1) * 90ms);
}
@keyframes cut-grow{ to{ width:var(--lw, 34px); } }
.cut__layer::before{
  content:attr(data-no);
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; color:rgba(255,255,255,.75);
}
.cut__name{
  writing-mode:vertical-rl;
  font-family:var(--f-display); font-weight:700; font-size:14px; letter-spacing:.16em;
  color:var(--c-paper); white-space:nowrap;
}
.cut__layer:nth-child(1){ background:var(--l-01); }
.cut__layer:nth-child(2){ background:var(--l-02); }
.cut__layer:nth-child(3){ background:var(--l-03); }
.cut__layer:nth-child(4){ background:var(--l-04); }
.cut__layer:nth-child(5){ background:var(--l-05); }
.cut__layer:nth-child(5)::before{ color:rgba(13,25,34,.6); }
.cut__layer:nth-child(5) .cut__name{ color:var(--c-ink); }
.cut__face{ flex:1 1 auto; min-width:0; box-shadow:none; animation:cut-fade .7s ease .48s both; }
@keyframes cut-fade{ from{ opacity:0; } to{ opacity:1; } }
.cut__cap{ display:flex; gap:var(--sp-2); margin-top:var(--sp-2); }
.cut__cap span:first-child{ white-space:nowrap; color:var(--c-primary); }

/* =========================================================
   対応範囲ストリップ（外壁・内壁・床・デザイン壁）
   ========================================================= */
.scope{ display:grid; grid-template-columns:repeat(4, 1fr); border-block:1px solid var(--c-line); }
.scope__item{ padding:var(--sp-3) var(--sp-3) var(--sp-3) 0; }
.scope__item + .scope__item{ padding-left:var(--sp-3); border-left:1px solid var(--c-line); }
.scope__name{ display:block; font-family:var(--f-display); font-weight:700; font-size:17px; margin-block:6px 4px; }
.scope__note{ font-size:14px; color:var(--c-sub); line-height:1.7; }

/* =========================================================
   3つの区画（基準・お客様の声で共用）
   ========================================================= */
.bays{ display:grid; grid-template-columns:repeat(3, 1fr); }
.bays > *{ padding-inline:var(--sp-4); }
.bays > *:first-child{ padding-left:0; }
.bays > *:last-child{ padding-right:0; }
.bays > * + *{ border-left:1px solid var(--c-line); }
.bay__label{ display:block; margin-bottom:var(--sp-2); color:var(--c-primary); }
.bay__title{ font-size:19px; margin-bottom:var(--sp-2); }

blockquote.voice{ margin:0; }
.voice p{ margin-bottom:var(--sp-2); }
.voice cite{ font-style:normal; display:block; }

/* =========================================================
   施工事例
   ========================================================= */
.works{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4) var(--sp-3); }
.work__body{ padding-top:var(--sp-2); border-top:1px solid var(--c-line); margin-top:var(--sp-2); }
.work__body .meta{ display:block; margin-bottom:var(--sp-1); }
.work__title{ font-size:18px; margin-bottom:var(--sp-1); }
.work__note{ font-size:15px; }

/* 事例を1件ずつ大きく見せる組み（左右交互）。
   件数を絞ったぶん、1件あたりの情報量と写真を大きくしています。 */
.works--feature{ display:block; }
.work--feature{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 72px); align-items:center;
}
.work--feature + .work--feature{ margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--c-line); }
.work--feature:nth-child(even) .work__body{ order:-1; }
.work--feature .work__body{ padding-top:0; border-top:none; margin-top:0; }
.work--feature .work__title{ font-size:clamp(21px, 2.6vw, 27px); margin-bottom:var(--sp-2); line-height:1.5; }
.work--feature .work__note{ font-size:16px; color:var(--c-text); }

/* 事例の詳細（現場の条件／やったこと／工事範囲） */
.work__spec{ margin-top:var(--sp-3); border-top:1px solid var(--c-line); }
.work__spec > div{ padding-block:var(--sp-2); border-bottom:1px solid var(--c-line); }
.work__spec dt{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  color:var(--c-primary); margin-bottom:4px;
}
.work__spec dd{ margin:0; font-size:15px; color:var(--c-sub); line-height:1.8; }

/* =========================================================
   工程（順序に意味があるので番号を使う）
   ========================================================= */
.flow{ border-top:1px solid var(--c-line); }
.flow__step{ display:grid; grid-template-columns:88px 1fr; gap:var(--sp-3); padding-block:var(--sp-3); border-bottom:1px solid var(--c-line); }
.flow__no{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--c-accent); padding-top:4px; }
.flow__title{ font-size:18px; margin-bottom:2px; }

/* =========================================================
   不安解消Q&A（人財募集）
   ========================================================= */
.qa{ border-top:1px solid var(--c-line); }
.qa__item{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-3); padding-block:var(--sp-4); border-bottom:1px solid var(--c-line); }
.qa__mark{ font-family:var(--f-mono); font-size:13px; font-weight:500; letter-spacing:.1em; color:var(--c-accent); padding-top:3px; }
.qa__q{ font-size:18px; letter-spacing:.02em; margin:0; }
.qa__a{ grid-column:2; margin:0; font-size:15px; color:var(--c-sub); line-height:1.9; }

/* Q&Aの横に並ぶ写真。2枚を縦に並べ、Q&A側の高さまで引き伸ばして余白を残さない */
.qa-media{ display:grid; gap:var(--sp-3); grid-template-rows:1fr 1fr; align-self:stretch; }
.qa-media .frame{ height:100%; min-height:0; }

/* =========================================================
   写真＋本文の組み
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 72px); align-items:center; }
.split--reverse .split__body{ order:-1; }
.split + .split{ margin-top:var(--sp-12); }
.split__portrait{ width:100%; max-width:440px; justify-self:center; }

/* =========================================================
   下層ページの見出し
   ========================================================= */
.page-head{ padding-block:var(--sp-8) var(--sp-6); }
.page-head .meta{ display:block; margin-bottom:var(--sp-2); }
.page-head h1{ font-size:clamp(28px, 4.4vw, 44px); letter-spacing:.04em; margin-bottom:var(--sp-3); }

/* =========================================================
   CTA帯
   ========================================================= */
.cta{ text-align:center; }
.cta__title{ font-size:clamp(24px, 3.6vw, 36px); color:var(--c-paper); letter-spacing:.03em; margin-bottom:var(--sp-2); }
.cta__text{ margin-bottom:var(--sp-6); }
.cta__actions{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
.cta__tel{ margin-top:var(--sp-4); }
.cta__tel a{ font-family:var(--f-mono); font-size:22px; letter-spacing:.06em; color:var(--c-paper); }
.cta__tel a:hover{ color:var(--c-accent); }

/* =========================================================
   会社情報 / 地図 / フォーム
   ========================================================= */
.spec{ width:100%; border-collapse:collapse; border-top:1px solid var(--c-line); }
.spec th,.spec td{ text-align:left; padding:var(--sp-2) 0; border-bottom:1px solid var(--c-line); vertical-align:top; }
.spec th{ width:220px; font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--c-primary); padding-top:calc(var(--sp-2) + 5px); }
.spec td{ font-size:15px; }

.form__row + .form__row{ margin-top:var(--sp-4); }
.form label,.wpcf7 label{ display:block; margin-bottom:var(--sp-1); font-size:14px; font-weight:700; letter-spacing:.04em; }
.form .req,.form .opt,.wpcf7 .req,.wpcf7 .opt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; padding:3px 6px; margin-left:8px; vertical-align:2px; border-radius:2px; }
.form .req,.wpcf7 .req{ background:var(--c-accent); color:var(--c-ink); }
.form .opt,.wpcf7 .opt{ background:var(--c-line); color:var(--c-sub); }
.form input,.form textarea,
.wpcf7 input:not([type="submit"]),.wpcf7 textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--c-text);
  padding:13px 14px; background:var(--c-paper); border:1px solid var(--c-line); border-radius:2px;
}
.form input:focus,.form textarea:focus,
.wpcf7 input:focus,.wpcf7 textarea:focus{ border-color:var(--c-accent); outline:2px solid rgba(53,167,216,.35); outline-offset:0; }
.form textarea,.wpcf7 textarea{ min-height:170px; resize:vertical; }
.form__note{ font-size:13px; color:var(--c-sub); margin-top:var(--sp-1); }
.form__submit{ margin-top:var(--sp-6); }

.tel-block{ text-align:center; }
.tel-block a{ font-family:var(--f-mono); font-size:clamp(26px, 4vw, 36px); letter-spacing:.06em; color:var(--c-primary); }

/* =========================================================
   フッター
   ========================================================= */
.site-footer{ background:var(--c-ink); color:#8FA2B0; padding-block:var(--sp-8) var(--sp-4); font-size:14px; }
.site-footer a{ color:#C8D6E0; }
.site-footer a:hover{ color:var(--c-accent); }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-6); }
.footer-logo{ display:block; font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:.08em; color:var(--c-paper); margin-bottom:var(--sp-2); }
.footer-nav ul{ display:grid; gap:var(--sp-1); }
.copyright{ margin-top:var(--sp-6); padding-top:var(--sp-3); border-top:1px solid rgba(255,255,255,.12); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-align:center; }

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--sp-6); }
  .works{ grid-template-columns:repeat(2, 1fr); }
  .work--feature{ grid-template-columns:1fr; gap:var(--sp-3); }
  .work--feature:nth-child(even) .work__body{ order:0; }
  .scope{ grid-template-columns:repeat(2, 1fr); }
  .scope__item:nth-child(odd){ padding-left:0; border-left:none; }
  .scope__item:nth-child(n+3){ border-top:1px solid var(--c-line); }
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 768px){
  :root{ --section-y:56px; }

  /* ハンバーガー（JSなし） */
  .header-inner{ position:relative; min-height:64px; }
  .nav-toggle-btn{
    display:block; position:relative; z-index:60; width:44px; height:44px;
    border:1px solid var(--c-line); border-radius:2px; background:var(--c-paper); cursor:pointer;
  }
  .nav-toggle-btn span,.nav-toggle-btn::before,.nav-toggle-btn::after{
    content:""; position:absolute; left:12px; width:18px; height:1px; background:var(--c-text);
    transition:transform .25s, opacity .2s;
  }
  .nav-toggle-btn::before{ top:16px; } .nav-toggle-btn span{ top:21px; } .nav-toggle-btn::after{ top:26px; }
  .nav-toggle:checked + .nav-toggle-btn::before{ transform:translateY(5px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-btn span{ opacity:0; }
  .nav-toggle:checked + .nav-toggle-btn::after{ transform:translateY(-5px) rotate(-45deg); }

  /* 右からスライドインするドロワー */
  .nav-overlay{
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(13,25,34,.55); cursor:pointer;
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
  }
  .nav-toggle:checked ~ .nav-overlay{ opacity:1; visibility:visible; }

  .gnav{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:55;
    width:min(86vw, 340px); padding:88px 24px 32px;
    background:var(--c-paper); border-bottom:none;
    box-shadow:-14px 0 36px rgba(13,25,34,.18);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  }
  .nav-toggle:checked ~ .gnav{ transform:translateX(0); }

  .gnav > ul{ display:block; padding:0; }
  .gnav li{
    border-bottom:1px solid var(--c-line);
    opacity:0; transform:translateX(18px);
    transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  /* 項目が少しずつ遅れて現れる */
  .nav-toggle:checked ~ .gnav li{ opacity:1; transform:none; }
  .nav-toggle:checked ~ .gnav li:nth-child(1){ transition-delay:.10s; }
  .nav-toggle:checked ~ .gnav li:nth-child(2){ transition-delay:.15s; }
  .nav-toggle:checked ~ .gnav li:nth-child(3){ transition-delay:.20s; }
  .nav-toggle:checked ~ .gnav li:nth-child(4){ transition-delay:.25s; }
  .nav-toggle:checked ~ .gnav li:nth-child(5){ transition-delay:.30s; }
  .nav-toggle:checked ~ .gnav li:nth-child(6){ transition-delay:.35s; }

  .gnav li:last-child{ border-bottom:none; padding:var(--sp-3) 0 0; }
  .gnav a{ display:block; padding:15px 0; font-size:16px; }
  .gnav__cta a{ text-align:center; }
  /* 開いている間は背景を動かさない */
  html:has(.nav-toggle:checked){ overflow:hidden; }

  /* 断面はスマホでも成立する（帯を細く） */
  .cut__layer{ --lw:26px; }
  .cut__name{ font-size:12px; letter-spacing:.1em; }
  .cut__cap{ flex-direction:column; gap:4px; }

  .mv{ min-height:clamp(360px, 62vh, 520px); }
  .mv__name{ letter-spacing:.06em; }
  .mv__en{ letter-spacing:.24em; }
  /* 横幅が足りず「…パネル工／事」と折り返すため、線を上の行に逃がす */
  .mv__eyebrow{ display:block; }
  .mv__eyebrow::before{ display:block; margin-bottom:10px; }
  .scope{ grid-template-columns:1fr; }
  .scope__item{ padding:var(--sp-2) 0; }
  .scope__item + .scope__item{ padding-left:0; border-left:none; border-top:1px solid var(--c-line); }
  .bays{ grid-template-columns:1fr; }
  .bays > *{ padding-inline:0; padding-block:var(--sp-3); }
  .bays > * + *{ border-left:none; border-top:1px solid var(--c-line); }
  .works{ grid-template-columns:1fr; }
  .work--feature + .work--feature{ margin-top:var(--sp-6); padding-top:var(--sp-6); }
  .qa__item{ grid-template-columns:1fr; gap:var(--sp-1); }
  .qa__a{ grid-column:1; }
  /* スマホでは引き伸ばさず、横長2枚として普通に積む */
  .qa-media{ grid-template-rows:auto auto; }
  .qa-media .frame{ aspect-ratio:3 / 2; height:auto; }
  .split{ grid-template-columns:1fr; gap:var(--sp-3); }
  .split--reverse .split__body{ order:0; }
  .split + .split{ margin-top:var(--sp-8); }
  .flow__step{ grid-template-columns:1fr; gap:4px; }
  .spec th,.spec td{ display:block; }
  .spec th{ border-bottom:none; padding-bottom:0; }
  .spec td{ padding-top:4px; }
  .footer-inner{ grid-template-columns:1fr; gap:var(--sp-4); }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .cut__layer{ width:var(--lw, 34px); animation:none; }
  .cut__face{ animation:none; opacity:1; }
  /* スクロール演出は行わず、最初から表示する */
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
  /* ボタンの拡大・沈み込みも止める */
  .btn:hover,.btn:active,.gnav__cta a:hover,.gnav__cta a:active{ transform:none; box-shadow:none; }
}

/* =========================================================
   Contact Form 7 用の調整
   CF7が出力するラッパーが、元のフォームの見た目を崩さないようにするだけのものです。
   CF7を使わない場合、この節は無くても動きます。
   ========================================================= */
.wpcf7-form-control-wrap{ display:block; }
.wpcf7 form .wpcf7-response-output{
  margin:var(--sp-3) 0 0; padding:var(--sp-2);
  border:1px solid var(--c-line); border-radius:2px;
  font-size:14px; line-height:1.8;
}
.wpcf7-not-valid-tip{ margin-top:6px; font-size:13px; color:#C0392B; }
.wpcf7-spinner{ margin:0 0 0 var(--sp-2); }
input.wpcf7-not-valid,
textarea.wpcf7-not-valid{ border-color:#C0392B; }