@charset "utf-8";
/* ==========================================================================
   上野工務店 — base / tokens
   デザイン正本: Figma「上野工務店様_HP」TOP_PC (1440) / TOP_SP (375)
   ========================================================================== */

:root{
  /* --- color（Figma variables 準拠） --- */
  --accent:#912d2a;          /* Newアクセント */
  --dark:#292625;            /* 背景など */
  --text:#1a1a1a;            /* テキスト */
  --white:#fff;
  --bg-soft:#f2f0ee;         /* セクションの淡い地 */
  --bg-page:#f6f4f2;         /* 下層ページのセクション地（Figma変数「背景」） */
  --bg-band:#f3f2f0;         /* モデルハウスの淡い帯 */
  --line:#d8d5d2;
  --muted:#7d7a77;
  --gold:#f3b53a;
  --gold-bar:#ffc451;
  --suumo:#61b214;

  /* --- layout --- */
  --wrap:1200px;             /* 内容幅（Figma x=120 / w=1200） */
  --wrap-narrow:1000px;      /* 下層の文章ページ（Figma x=220 / w=1000） */
  --side:clamp(16px, 8.3333vw, 120px);
  --side-sp:16px;            /* SPの左右ガター（Figma準拠。30pxに広げたい場合はここだけ変更） */

  /* --- rhythm（色境界=大 / 同色連続=小） --- */
  --sec:120px;
  --sec-sp:72px;

  /* --- type --- */
  --f-gothic:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --f-mincho:"Hiragino Mincho ProN","HiraMinProN-W3","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --f-en:"Poppins",var(--f-gothic);
  --f-num:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--f-gothic);
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  letter-spacing:.06em;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;vertical-align:middle}
img{border:0}
a{color:inherit;text-decoration:none;transition:opacity .3s var(--ease),color .3s var(--ease)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --------------------------------------------------------- utilities */
.l-wrap{width:min(100% - var(--side)*2, var(--wrap));margin-inline:auto}
.l-wrap--wide{width:min(100% - var(--side)*2, 1440px);margin-inline:auto}
.l-wrap--narrow{width:min(100% - var(--side)*2, var(--wrap-narrow));margin-inline:auto}
.u-pc{display:block}
/* ★スマホだけで改行する <br>（本文の「｜」から生成）。PCでは無効化する。
   SP側では指定を当てず、<br> 本来の挙動をそのまま使う（display:inline では戻らない環境があるため）。 */
@media (min-width:901px){ br.u-brsp{display:none} }
@media (max-width:900px){ br.u-brpc{display:none} }
.u-sp{display:none}
/* 途中で割りたくない語（会社名など）に付ける */
.u-nobr{white-space:nowrap}
.u-sec{padding-block:var(--sec)}
.u-sec--soft{background:var(--bg-soft)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------- 出現アニメ */
.js-rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-rv.is-in{opacity:1;transform:none}
.js-rv[data-rv-delay="1"]{transition-delay:.12s}
.js-rv[data-rv-delay="2"]{transition-delay:.24s}
.js-rv[data-rv-delay="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================ 共通部品 */
/* View more ボタン（白フチ・角丸ピル＋矢印） */
.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-width:253px;padding:21px 28px;
  border:1px solid var(--text);border-radius:999px;
  font-family:var(--f-en);font-size:14px;font-weight:400;letter-spacing:.1em;line-height:1;
  color:var(--text);background:transparent;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
 /* ★矢印は「軸1本＋<（山型）」。Figma の書き出し（Group 625116）は
      軸 = (0,4.87)→(15,4.87)、頭 = (10,0.37)→(15,4.87)→(10,9.37) の1pxストローク＝15×9。
      斜線1本だけの「半分の矢じり」ではない。
      画像にせずCSSで描くのは、白抜き/黒地/ホバーで色が変わる（currentColor が要る）ため。
      山型は「45°回した正方形の上辺＋右辺」。頂点は中心から (辺長/√2) 右にくるので、
      辺 7.07px なら頂点は中心 +5px ＝ 軸の右端に合わせるには right:5px。 */
.c-btn__arrow{
  position:relative;display:block;width:15px;height:1px;background:currentColor;flex:none;
  transition:transform .35s var(--ease);
}
.c-btn__arrow::after{
  content:"";position:absolute;right:5px;top:50%;width:7.07px;height:7.07px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translate(50%,-50%) rotate(45deg);
}
.c-btn:hover{background:var(--text);color:var(--white)}
.c-btn:hover .c-btn__arrow{transform:translateX(5px)}

.c-btn--light{border-color:var(--white);color:var(--white)}
.c-btn--light:hover{background:var(--white);color:var(--text)}
.c-btn--fill{background:var(--white);border-color:var(--white);color:var(--text)}
.c-btn--fill:hover{background:var(--text);border-color:var(--text);color:var(--white)}
.c-btn--dark{background:var(--dark);border-color:var(--dark);color:var(--white)}
.c-btn--dark:hover{background:transparent;color:var(--text);border-color:var(--text)}
/* 戻る系＝矢印が左向きで文字の前 */
.c-btn--back{min-width:253px;height:59px;padding:0 28px;gap:18px}
.c-btn--back .c-btn__arrow{width:15px;transform:scaleX(-1)}
.c-btn--back:hover .c-btn__arrow{transform:scaleX(-1) translateX(5px)}

/* 丸矢印（カード内・小） */
/* Figma: view more = Poppins Medium 14px/1.9 ＋ 8px ＋ ○23px(線0.5px)、中の矢印は12×9 */
.c-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-en);font-size:14px;line-height:1.9;letter-spacing:0;
}
.c-arrow i{
  position:relative;display:block;width:23px;height:23px;flex:none;
  border:.5px solid currentColor;border-radius:50%;transition:transform .35s var(--ease);
}
/* 軸（12px）と山型（.c-btn__arrow と同じ作り方） */
.c-arrow i::before{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:currentColor;
  transform:translate(-50%,-50%);
}
.c-arrow i::after{
  content:"";position:absolute;left:50%;top:50%;width:7.07px;height:7.07px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translate(calc(-50% + 1px),-50%) rotate(45deg);
}
a:hover .c-arrow i{transform:translateX(3px)}

/* セクション見出し（EN大 ＋ JP小） */
.c-sechead{display:flex;align-items:baseline;gap:18px}
/* ★Figma は Poppins SemiBold 64px（実装は48pxだった）。
     和文の添え字は Noto Sans JP Medium 15px/1.9。 */
.c-sechead__en{
  font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1.2;letter-spacing:.01em;
  color:var(--text);margin:0;
}
.c-sechead__ja{font-size:15px;font-weight:500;line-height:1.9;letter-spacing:.12em;color:var(--text);margin:0}
.c-sechead--center{flex-direction:column;align-items:center;gap:6px;text-align:center}
.c-sechead--center .c-sechead__en{font-size:64px}
.c-sechead--light .c-sechead__en,.c-sechead--light .c-sechead__ja{color:var(--white)}
.p-staff .c-sechead__ja,.p-review .c-sechead__ja{font-weight:700}

/* タグ（施工事例） */
.c-tag{
  display:inline-block;font-size:12px;letter-spacing:.06em;line-height:1;
  color:inherit;
}
/* スペック丸バッジ（C値 / UA値） */
.c-spec{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:96px;padding:7px 16px;border:1px solid currentColor;border-radius:999px;
  font-size:12px;letter-spacing:.04em;line-height:1;
}

/* スライダー矢印（＜ ＞） */
.c-nav{display:inline-flex;gap:13px}
.c-nav button{
  display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--text);border-radius:50%;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.c-nav button::before{
  /* ★矢印はFigma実測で「細長いシェブロン」＝PC 8×14 / SP 5×9（線幅 PC1px・SP0.5px）。
     従来は10pxの正方形に border-top/right を付けて45°回転させていたが、
     正方形を回転させると外接は必ず 1:1（14.1×14.1）になり、デザインの 8:14 の細長い形にはならない。
     ＝これが「矢印が歪」の正体（2026-08-22 修正）。マスクにして形を正確に出す。 */
  content:"";width:9px;height:15px;background:currentColor;
  -webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat;
}
.c-nav button.is-prev{--arw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%23000'><path d='M8.5 0.5L0.5 7.5L8.5 14.5'/></svg>")}
.c-nav button.is-next{--arw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%23000'><path d='M0.5 0.5L8.5 7.5L0.5 14.5'/></svg>")}
.c-nav button:hover{background:var(--text);border-color:var(--text);color:var(--white)}
.c-nav button[disabled]{opacity:.3;cursor:default}
.c-nav button[disabled]:hover{background:none;border-color:var(--text);color:inherit}

/* 横スライダー（transform 方式＝ページが縦に動かない） */
.c-slider__viewport{overflow:hidden}
.c-slider__track{
  display:flex;gap:var(--slider-gap,24px);
  transition:transform .6s var(--ease);will-change:transform;
}
.c-slider__item{flex:0 0 auto}

/* ============================================================== ヘッダー */
.l-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:19px 32px;
  transition:background-color .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
/* ★上へスクロールしている時だけ出す（下へスクロール中は隠す） */
.l-header.is-hide{transform:translateY(-100%)}
.l-header.is-drawer-open.is-hide{transform:none}
.l-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.l-header__logo{position:relative;display:block;width:281px;flex:none;line-height:0}
.l-header__logo img{width:100%;height:auto;transition:opacity .4s var(--ease)}
.l-header__logo--dark{position:absolute;inset:0;opacity:0}
.l-header__right{display:flex;align-items:center;gap:30px}
.l-header__nav{display:flex;align-items:center;gap:40px}
.l-header__menu{
  display:flex;align-items:center;gap:20px;
  font-size:14px;font-weight:700;line-height:1.7;letter-spacing:.03em;white-space:nowrap;
}
/* ★第1階層だけに白抜き（drop-shadow）とホバーを当てる。
     `.l-header__menu a` のままだと白いドロップダウンの中の文字まで白抜き扱いになり、
     白地×白文字で消える（ドロップダウン追加 2026-08-21）。 */
.l-header__menu>li>.l-header__link{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.25))}
.l-header__menu>li>.l-header__link:hover{opacity:.65}

/* -- PCナビのドロップダウン（下層ページ） -- */
.l-header__menu>li{position:relative}
.l-header__sub{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  /* ★透明な「橋」。ここを 0 にするとリンク下端〜カード上端が素通しになり、
       マウスを下ろす途中でホバーが切れて閉じる。＝見た目の余白と橋を兼ねている。
       28px（ヘッダー下端ぴったり）だと FV の透過ヘッダーで離れて見えるので 14px に詰めた。 */
  padding-top:14px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),visibility .25s var(--ease);
}
.l-header__menu>li:hover>.l-header__sub,
.l-header__menu>li:focus-within>.l-header__sub{opacity:1;visibility:visible;pointer-events:auto}
.l-header__sub-in{
  /* 親が白文字（FV上）でも中は必ず黒文字。色は継承させない。 */
  min-width:210px;padding:14px 0;
  background:var(--white);color:var(--text);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  font-size:14px;font-weight:500;letter-spacing:.03em;line-height:1.7;
}
.l-header__sub-in a{
  display:block;padding:9px 24px;color:var(--text);filter:none;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.l-header__sub-in a:hover{background:var(--bg-soft);opacity:1}
.l-header__cta{display:flex;align-items:center;gap:17px}
.l-header__cta-sep{width:1px;height:39px;background:currentColor;opacity:.6;flex:none}
.l-header__cta a{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;line-height:1.7;letter-spacing:.02em;white-space:nowrap;
  text-shadow:1px 1px 2px rgba(0,0,0,.25);
}
.l-header__cta a:hover{opacity:.65}
.l-header__cta img{width:20px;height:20px;object-fit:contain;flex:none}

/* 既定＝FV上にのせる白文字 */
.l-header{color:var(--white)}

/* スクロール後（追従）と下層ページは同じ見た目：
   白帯・赤ロゴ・黒文字・資料請求/お問い合わせは出さない（Figma 113:1344 / 189:579 / 293:3624 共通） */
.l-header.is-stuck,
.l-header.is-solid{
  background:var(--white);color:var(--text);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.l-header.is-stuck{padding:20px 32px}
.l-header.is-stuck .l-header__logo--light,
.l-header.is-solid .l-header__logo--light{opacity:0}
.l-header.is-stuck .l-header__logo--dark,
.l-header.is-solid .l-header__logo--dark{opacity:1}
.l-header.is-stuck .l-header__menu>li>.l-header__link,
.l-header.is-solid .l-header__menu>li>.l-header__link{filter:none}
.l-header.is-stuck .l-header__cta,
.l-header.is-solid .l-header__cta{display:none}
.l-header.is-stuck .l-header__burger span,
.l-header.is-solid .l-header__burger span{background:var(--text)}

/* ハンバーガー */
.l-header__burger{
  position:relative;width:42px;height:21px;flex:none;z-index:2;
}
.l-header__burger span{
  position:absolute;left:0;width:100%;height:1px;background:var(--white);
  transition:transform .4s var(--ease),opacity .3s var(--ease),background-color .4s var(--ease);
}
.l-header__burger span:nth-child(1){top:0}
.l-header__burger span:nth-child(2){top:10px}
.l-header__burger span:nth-child(3){top:20px}
.l-header__burger.is-open span{background:var(--white)}
.l-header__burger.is-open span:nth-child(1){transform:translateY(10px) rotate(25.5deg)}
.l-header__burger.is-open span:nth-child(2){opacity:0}
.l-header__burger.is-open span:nth-child(3){transform:translateY(-10px) rotate(-25.5deg)}

/* ----------------------------------------------------- ドロワーメニュー
   Figma: ハンバーガーメニュー_PC 112:564 / _SP 125:2323
   左=写真パネル547px（本社情報）／右=#292625 にナビ3列＋CTA＋プラポリ */
.l-drawer{
  position:fixed;inset:0;z-index:99;
  display:grid;grid-template-columns:547px minmax(0,1fr);
  background:var(--dark);color:var(--white);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.l-drawer.is-open{opacity:1;visibility:visible}
.l-drawer a:hover{opacity:.6}

/* 左：写真パネル */
.l-drawer__photo{position:relative;overflow:hidden;display:grid;place-items:center}
.l-drawer__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.l-drawer__photo::after{content:"";position:absolute;inset:0;background:rgba(26,22,16,.55)}
.l-drawer__info{position:relative;z-index:1;text-align:center;transform:translateY(-20px)}
.l-drawer__logo{width:302px;margin:0 auto}
.l-drawer__logo img{width:100%;height:auto}
.l-drawer__hqname{margin-top:60px;font-size:16px;font-weight:500;line-height:1.4}
.l-drawer__hqaddr{margin-top:14px;font-size:14px;font-weight:500;line-height:1.55;letter-spacing:.02em}
.l-drawer__hqaddr span{display:block}
.l-drawer__tel{margin-top:24px}
.l-drawer__tel a{display:inline-flex;align-items:baseline;gap:5px}
.l-drawer__tel small{font-family:var(--f-en);font-size:14px;letter-spacing:.02em}
.l-drawer__tel b{font-family:var(--f-num);font-size:24px;font-weight:400;letter-spacing:.02em}
.l-drawer__hours{margin-top:12px;font-size:12px;font-weight:500;line-height:1.4}

/* 右：ナビ */
/* ★ナビの塊は最大621px。左右のpaddingを固定にすると、1440より広い画面では
     余ったぶんが全部「右の余白」になる（2026-08-21）。
     右カラムの中で中央に置けば、どの幅でも左右が同じだけ空く。 */
.l-drawer__body{display:flex;align-items:center;justify-content:center;padding:60px 120px}
.l-drawer__inner{width:100%;max-width:621px;margin-inline:auto}
.l-drawer__nav{display:grid;grid-template-columns:182px 140px minmax(176px,max-content);gap:0 58px;align-items:start}
.l-drawer__nav>ul{display:flex;flex-direction:column;gap:29.4px}
.l-drawer__nav a{display:block;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;white-space:nowrap}
.l-drawer__sub{display:flex;flex-direction:column;gap:11.4px;margin-top:16.4px}
.l-drawer__sub a{font-size:14px;font-weight:500;padding-left:30px;position:relative}
.l-drawer__nav li.l-drawer__sp-only{display:none}
.l-drawer__rule{height:1px;background:rgba(255,255,255,.25);margin-top:50px}

/* CTA */
.l-drawer__cta{display:flex;gap:20px;margin-top:70px}
.l-drawer__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:299px;height:87px;border:1px solid rgba(255,255,255,.5);border-radius:2px;
  font-size:20px;font-weight:700;letter-spacing:.02em;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.l-drawer__btn img{width:20px;height:20px;transition:filter .35s var(--ease)}
.l-drawer__btn:hover{background:var(--white);border-color:var(--white);color:var(--dark);opacity:1}
.l-drawer__btn:hover img{filter:invert(1) brightness(.15)}

/* プラポリ＋Instagram */
.l-drawer__util{display:flex;align-items:center;justify-content:flex-end;gap:22px;margin-top:40px}
.l-drawer__util a:first-child{font-size:12px;font-weight:500}
.l-drawer__util img{width:28px;height:28px}

/* ドロワーを開いている間はヘッダーを透明＋白バーガーに戻す */
.l-header.is-drawer-open,
.l-header.is-drawer-open.is-stuck,
.l-header.is-drawer-open.is-solid{background:transparent;box-shadow:none;color:var(--white)}
.l-header.is-drawer-open .l-header__logo,
.l-header.is-drawer-open .l-header__right>.l-header__nav{opacity:0;pointer-events:none}
.l-header.is-drawer-open .l-header__logo--light{opacity:1}
.l-header.is-drawer-open .l-header__logo--dark{opacity:0}
.l-header.is-drawer-open .l-header__burger span{background:var(--white)}

/* ------------------------------------------------ 追従サイドナビ（PC） */
/* ★ヒーローを過ぎたら画面の右下に出す（2026-08-21） */
.l-fixnav{
  position:fixed;right:0;bottom:24px;top:auto;z-index:90;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.l-fixnav.is-in{opacity:1;visibility:visible;transform:none}
.l-fixnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:89px;height:76px;
  background:var(--dark);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.16);
  font-size:12px;line-height:1.25;letter-spacing:.02em;text-align:center;
  transition:background-color .3s var(--ease);
}
.l-fixnav a:last-child{border-bottom:0}
.l-fixnav a:hover{background:var(--accent)}
.l-fixnav svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.4}

/* ==================================================================== FV
   ★写真は全画面（100vh）。position:fixed で画面に固定し、スクロールすると
     次のセクションが上に乗って隠す。スクロール量に応じて灰色の幕（--fv-veil）が濃くなり、
     写真の彩度も落ちる（--fv-gray）＝上に載る文字が読みやすくなる。値は main.js が更新。 */
.p-fv{position:relative;height:100vh;min-height:640px;overflow:hidden;color:var(--white)}
/* スマホはアドレスバーの伸縮で 100vh が画面より高くなる＝下が切れるので svh を使う */
@supports (height:100svh){.p-fv{height:100svh}}
/* ★z-index は必ず -1。0 にすると「位置指定のないセクション」より前面に来て、
   ポイント節から下が写真に覆われる（要素単体のスクショでは気づけない）。
   -1 なら本文の背面・ページ地の前面に入り、背景が透明なコンセプト節だけ透けて見える。 */
.p-fv__media{position:fixed;inset:0;z-index:-1}
.p-fv__media img,.p-fv__media video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(var(--fv-gray,0));
}
/* ★動画は src が入る前は intrinsic 300×150 のインライン要素。
   上のルールで幅高さを当てているので流し込まれないが、読み込み前の地色だけ足しておく。 */
.p-fv__video{background:#25282a}
/* ★動画のときだけ敷く「読みやすさの下地」。
   写真1枚と違い動画はコマごとに明るさが変わり、白い壁のカットでは白文字が消える
   （素のままだとサブコピーの97%の画素がコントラスト4.5未満）。
   全34コマ×合成計算で基準（見出し3.0:1／サブ4.5:1）を満たす最小の濃さを採った＝PCは左下から .62。
   写真に戻すと .p-fv--video が付かない＝この下地も出ない。動画を差し替えたら測り直すこと。 */
.p-fv--video::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 100%,
    rgba(23,25,20,.62) 0%, rgba(23,25,20,.484) 30%, rgba(23,25,20,.186) 55%, rgba(23,25,20,0) 75%);
}
.p-fv__media::after{
  content:"";position:absolute;inset:0;
  background:rgba(64,67,52,.3);mix-blend-mode:hard-light;pointer-events:none;
}
/* スクロールで濃くなる灰色の幕 */
.p-fv__veil{position:absolute;inset:0;pointer-events:none;background:#25282a;opacity:var(--fv-veil,0)}
.p-fv__body{position:relative;z-index:1;height:100%;max-width:1440px;margin-inline:auto}

/* コピーは下端から測る（Figma 800px の枠で top:508 = 下から114px） */
.p-fv__copy{position:absolute;left:40px;bottom:114px;text-shadow:0 4px 4px rgba(0,0,0,.25)}
.p-fv__l1{
  font-family:var(--f-mincho);font-size:48px;font-weight:400;line-height:1.7;letter-spacing:.05em;
  white-space:nowrap;
}
.p-fv__l1 small{font-size:36px;letter-spacing:-.02em}
/* ★Figmaの2行は行送り1.7の行box（81.6px）を重ねて置いてあり、実際の行間は60px。
     CSSでpを2つ積むと81.6px空くので、差の21.6pxを詰める（2026-08-21）。
     ベースラインで検算：Figma 1行目567.0 / 2行目627.0＝60px。 */
.p-fv__l2{
  font-family:var(--f-mincho);font-size:48px;font-weight:400;line-height:1.7;letter-spacing:.05em;
  margin-top:-21.6px;padding-left:24px;white-space:nowrap;
}
.p-fv__sub{
  margin-top:8px;padding-left:20px;
  font-size:16px;font-weight:500;line-height:1.7;letter-spacing:.13em;
}
/* ★縦組みの英字は画面の右端に寄せる（1440固定の .p-fv__body の中だと広い画面で内側に寄ってしまう）。
   ★右の余白は18px。Figmaのノード情報（x=1422）は回転したテキストなので当てにならず、
     **描画を採寸して合わせた**：Figmaの実描画は文字の画素が x1405〜1416（右端から24px）、
     実装は x1423〜1434（右端から6px）＝ちょうど18pxぶん外に出ていた（2026-08-21）。
   縦位置は枠の 47.44%（(274+211/2)/800）を中心に置き、画面の高さが変わっても同じ位置に見せる。 */
.p-fv__vertical{
  position:absolute;right:18px;top:47.44%;transform:translateY(-50%);z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--f-en);font-size:12px;letter-spacing:.05em;line-height:1.7;white-space:nowrap;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}
.p-fv__scroll{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-family:var(--f-en);font-size:12px;letter-spacing:.05em;line-height:1.7;
}
.p-fv__scroll::after{content:"";width:1px;height:80px;background:rgba(255,255,255,.55);overflow:hidden}
.p-fv__scroll::before{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:80px;
  background:var(--white);transform-origin:top center;
  animation:ueno-scroll 2.4s var(--ease) infinite;
}
@keyframes ueno-scroll{
  0%{transform:scaleY(0);opacity:0}
  35%{opacity:1}
  70%,100%{transform:scaleY(1);opacity:0}
}

/* --- FV バッジ3種（画像1枚ずつ。2026-08-21）---
   Figma の枠幅と、3つの下端の微妙なズレ（760 / 755.37 / 766）をそのまま再現する。 */
.p-fv__badges{position:absolute;right:18px;bottom:34px;display:flex;align-items:flex-end;gap:0}
.p-badge{flex:none;display:block;height:auto;max-width:none}
.p-badge--suumo{width:148.25px;margin:0 15.6px 6px 0}
.p-badge--record{width:134.36px;margin:0 9.78px 10.63px 0}
.p-badge--award{width:180px;margin:0}

/* ★★ヒーローの写真／動画は position:fixed・z-index:-1。
   負の z-index は「ページの地（body の背景）より前・本文より後ろ」に入るので、
   ★背景色を持たないセクションは全部ヒーローが透けて見える（＝コンセプト節と同じ状態になる）。
   透けてよいのはコンセプト節だけ。以降のセクションには必ず地の色を持たせる。
   ※この抜けは「横漏れ0・死画像0・JSエラー0」の機械検証にも、要素単体のスクショにも出ない
     （要素スクショは背景透過で撮られるので、正常なセクションでも同じように透けて写る）。
     直したら実際のビューポートを撮って、余白の画素が地の色かどうかで判定すること。 */
.p-event,.p-mh,.p-works,.p-estate,.p-qa,.p-staff,.p-review,.p-banners{background:var(--white)}

/* =============================================================== Concept */
/* ★下端はポイント節が231px重なる（Figma：コンセプト 112:495 が y800〜2077、ポイント 112:496 が y1846〜）。
   本文の下に 47px + 231px = 278px の「写真だけの帯」を用意しておく。141pxのままだと
   重なりが View more ボタンを覆う（2026-09-01・透過グラデ）。 */
.p-concept{position:relative;color:var(--white);padding:141px 0 278px;overflow:hidden}
/* ★写真を敷かないとき＝下のヒーロー写真（固定）が透けて見える */
.p-concept__bg--fv{background:transparent}
.p-concept__bg{position:absolute;inset:0;z-index:0}
.p-concept__bg img{width:100%;height:100%;object-fit:cover;display:block}
.p-concept__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,30,22,.42) 0%,rgba(28,30,22,.46) 100%);
}
.p-concept__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,606px) minmax(0,594px)}
.p-concept__ttl{padding-top:0}
.p-concept__en{font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1.15;letter-spacing:.01em}
.p-concept__rule{display:block;width:140px;height:1px;background:rgba(255,255,255,.3);margin:15px 0}
.p-concept__ja{font-size:15px;font-weight:700;letter-spacing:.14em}
/* ★本文は「上から1行ずつ、ゆっくり現れる」（2026-09-01）。
   親自身はフェードさせない（行の動きと二重になるため）。行はJSが .c-line に包む。 */
.p-concept__body{padding-top:21px}
.p-concept__body.js-rv{opacity:1;transform:none;transition:none}
.p-concept__body.is-split .c-line{
  display:block;opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.p-concept__body.is-split.is-in .c-line{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .p-concept__body.is-split .c-line{opacity:1;transform:none;transition:none}
}
.p-concept__body p{font-size:18px;font-weight:700;line-height:2.2;letter-spacing:0;margin-bottom:20px}
.p-concept__body p:last-of-type{margin-bottom:0}
.p-concept__body mark{
  background:var(--accent);color:var(--white);
  padding:.14em .28em .18em;border-radius:1px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.p-concept__cta{margin-top:60px}
/* View more は共通の .c-btn（Figma 253x57〜59）に統一 */

/* ============================================================ 3つの良いとこ */
/* ★コンセプトの写真に231px重ね、地色を「上から透明→#f2f0ee」で190pxかけて出す
     ＝カンプの透過グラデーション（2026-09-01）。
     2026-08-21 の「スクロールで地色がふわっと出る」から差し替えた。
   ★透明側は必ず同じ色のアルファ0で書く（bare な transparent は黒を経由してくすむ）。
   ★.js-rv の既定（opacity:0 ＋ translateY）は全幅の節だと隙間になるので打ち消す。 */
.p-points{
  position:relative;margin-top:-231px;padding:170px 0 74px;
  background:linear-gradient(180deg,rgba(242,240,238,0) 0,var(--bg-soft) 190px,var(--bg-soft) 100%);
}
.p-points.js-rv{opacity:1;transform:none}
.p-points__head{text-align:center;margin-bottom:40px}
/* Figma 12:210 の1行目＝明朝24px・行送り1.31。下線は1行目の直下（y35） */
.p-points__lead{
  position:relative;display:inline-block;
  font-family:var(--f-mincho);font-size:24px;font-weight:400;line-height:1.31;letter-spacing:.04em;
  padding-bottom:4px;margin-bottom:0;
}
.p-points__lead::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:207px;height:1px;background:var(--text)}
/* 同2行目＝明朝32px／「3」だけ48px・「3つ」が赤（Figma 12:210） */
.p-points__ttl{font-family:var(--f-mincho);font-size:32px;font-weight:400;line-height:1.31;letter-spacing:.04em}
.p-points__ttl b{font-family:var(--f-mincho);font-size:48px;font-weight:400;color:var(--accent);letter-spacing:.1em}
.p-points__ttl em{font-style:normal;color:var(--accent)}
.p-points__grid{display:grid;grid-template-columns:508px minmax(0,1fr);gap:0 92px;align-items:center}
/* ★3枚は必ず同じ高さ（Figmaは3枚とも175px）。文章の行数が違っても崩れないよう
     grid の 1fr 行で揃える＝いちばん高いカードに3枚とも合う。 */
.p-points__list{display:grid;grid-auto-rows:1fr;gap:10px}
.p-point{display:grid;grid-template-columns:77px minmax(0,1fr) 155px;background:var(--white);min-height:175px}
.p-point__no{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--dark);color:var(--white);
}
.p-point__no small{font-family:var(--f-en);font-size:10px;letter-spacing:.08em;opacity:.85}
.p-point__no b{font-family:var(--f-num);font-size:36px;font-weight:700;line-height:1.1;letter-spacing:.02em}
.p-point__no i{display:block;width:30px;height:1px;background:rgba(255,255,255,.8);margin-top:4px}
.p-point__body{padding:20px}
.p-point__ttl{font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.6;letter-spacing:0;margin-bottom:8px}
/* Figma 144:671 は14px・行送り1.5・字間0（枠 210px = 15文字×14px ちょうど） */
.p-point__txt{font-size:14px;line-height:1.5;letter-spacing:0}
/* ★カードの高さは写真に引っ張られてはいけない（2026-08-21）。
     `img{height:100%}` は親の高さが auto だと効かず、写真は元の縦横比のまま伸びる。
     素材が 620×930 / 620×413 / 620×827 とバラバラだったため、
     カードが 233 / 175 / 207px になってFigma（3枚とも175px）と釣り合っていなかった。
     → 写真を絶対配置にして「行の高さを決める側」から外す。どんな写真を入れても175pxで揃う。 */
.p-point__img{position:relative;overflow:hidden}
.p-point__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* --- ベン図（1枚画像をやめてDOMで組む。Figma 16:311 = 600.19x479）---
   ●は「上→左→右」の順に出す。円は 235.46px・#912d2a・白1px。 */
.p-points__venn{--vw:1;width:calc(600.19px*var(--vw));height:calc(479px*var(--vw))}
/* 親自身はフェードさせない（中の●を1つずつ出すため） */
.p-points__venn.js-rv{opacity:1;transform:none;transition:none}
.p-venn3{position:relative;width:600.19px;height:479px;transform:scale(var(--vw));transform-origin:0 0}
.p-venn3__c{
  position:absolute;width:235.46px;height:235.46px;border-radius:50%;
  background:var(--accent);border:1px solid var(--white);color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;
  opacity:0;transform:scale(.86);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.p-venn3__c--top{left:181.21px;top:0}
.p-venn3__c--left{left:0;top:243.54px}
.p-venn3__c--right{left:365.89px;top:243.54px}
.p-venn3__chip{display:flex;align-items:center;gap:3px;font-size:14px;font-weight:700;line-height:1.9}
.p-venn3__chip b{display:inline-block;padding:0 6px;background:#000;font-weight:700}
.p-venn3__t{font-size:18px;font-weight:700;line-height:1.9;white-space:nowrap}
.p-venn3__i{width:80px;height:80px;object-fit:contain;margin-top:4px}
/* ★3つの円の真ん中に「上野工務店」。
     Figma 273:2883＝Noto Sans JP Bold 18px・#912d2a。ベン図の枠（600.19×479）の中で
     中心は (297.06, 300.3)＝三角形の重心よりわずかに下。円より後に出す。 */
.p-venn3__center{
  position:absolute;left:297.06px;top:300.3px;transform:translate(-50%,-50%);
  color:var(--accent);font-size:18px;font-weight:700;line-height:1.9;letter-spacing:0;white-space:nowrap;
  opacity:0;transition:opacity .5s var(--ease);
}
/* つなぎ線（Figma 14:275 / 14:278 / 14:276） */
/* ★線は「箱の中央に絶対配置」する。
     grid + place-items:center だと、箱（85.329px）より長い子（120.673px）を
     ブラウザがあふれ防止で端に寄せるため、線が自分の長さ方向に17.7pxずれる。
     左右でずれる向きが逆なので「左の線だけ下がって見える」（実測13.5px）。 */
.p-venn3__line{position:absolute;opacity:0;transition:opacity .5s var(--ease)}
.p-venn3__line b{position:absolute;left:50%;top:50%;width:120.673px;height:1px;background:var(--accent)}
/* ★左右は完全な面対称（軸＝左右の円の中心の中点 300.675px）。
     Figma自体が左の線を9px左に置いていて右より4px上に出るので、
     「右の線と高さを合わせたい」という指摘に従い右に合わせた（left 148.89 → 158.13）。 */
.p-venn3__line--l{left:158.13px;top:192.59px;width:85.329px;height:85.329px}
.p-venn3__line--l b{transform:translate(-50%,-50%) rotate(-45deg)}
.p-venn3__line--r{left:357.89px;top:192.59px;width:85.329px;height:85.329px}
.p-venn3__line--r b{transform:translate(-50%,-50%) rotate(45deg)}
.p-venn3__line--b{left:203.14px;top:382.05px;width:188.137px;height:1px;background:var(--accent)}
/* ★出る順＝上→左→右。最後につなぎ線 */
.p-points__venn.is-in .p-venn3__c{opacity:1;transform:none}
.p-points__venn.is-in .p-venn3__c--top{transition-delay:0s}
.p-points__venn.is-in .p-venn3__c--left{transition-delay:.26s}
.p-points__venn.is-in .p-venn3__c--right{transition-delay:.52s}
.p-points__venn.is-in .p-venn3__line{opacity:1;transition-delay:.78s}
.p-points__venn.is-in .p-venn3__center{opacity:1;transition-delay:1.02s}
/* Figma 12:214 は1行目18px・2行目24px（どちらも太字・中央） */
.p-points__foot1,.p-points__foot2{display:block;font-weight:700;line-height:1.9}
.p-points__foot1{font-size:18px}
.p-points__foot2{font-size:24px}
.p-points__foot{text-align:center;margin-top:50px;letter-spacing:.04em}

/* ================================================================= Event */
.p-event{padding:120px 0}
.p-event__nav{display:none}
.p-event__head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:6px;border-bottom:1px solid #cdcdcd;margin-bottom:30px}
.p-event__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.p-event__thumb{aspect-ratio:232/290;overflow:hidden;background:var(--bg-soft)}
.p-event__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s var(--ease)}
.p-card:hover .p-event__thumb img{opacity:.88}
/* Figma: タイトル＝Noto Sans JP Medium 16px/1.8、その下に15px空けてメタ */
.p-event__ttl{margin:18px 0 15px;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:0}
/* ★ラベルの地は #6d6d6d（実装は --dark #292625 で黒すぎた）。
     文字は12px Medium/1.8・白、左右12pxの余白、角丸なし。ラベルと値の間は15px、行のピッチは30px。 */
.p-meta{display:flex;flex-direction:column;gap:6px}
.p-meta__row{display:flex;align-items:center;gap:15px;font-size:12px;font-weight:500;line-height:1.8;letter-spacing:0}
.p-meta__row dt{
  flex:none;width:72px;padding:1px 12px;text-align:center;
  background:#6d6d6d;color:var(--white);font-size:12px;font-weight:500;line-height:1.8;letter-spacing:0;
}
.p-meta__row dd{margin:0}

/* ========================================================== Model House */
.p-mh{padding:120px 0 0}
.p-mh__head{text-align:center;margin-bottom:54px}
/* Figma: Noto Sans JP Bold 18px/1.9（実装はゴシック14px・字間.1emだった） */
.p-mh__sub{margin-top:4px;font-size:18px;font-weight:700;line-height:1.9;letter-spacing:0}

/* ★帯は全幅ではない。写真側だけ画面端に付き、文字側に64pxの余白が残る。
     Figma: 明るい行＝x1〜1376（右に64px）／暗い行＝x65〜1440（左に65px）。帯の高さは492px。 */
.p-mh__block{
  display:grid;grid-template-columns:minmax(0,1fr) 510px;align-items:center;
  min-height:492px;overflow:hidden;
}
.p-mh__block+.p-mh__block{margin-top:70px}
.p-mh__block--light{background:var(--bg-soft);color:var(--text);margin-right:64px}
.p-mh__block--dark{background:var(--dark);color:var(--white);margin-left:64px}
.p-mh__block--rev{grid-template-columns:510px minmax(0,1fr)}
.p-mh__block--rev .p-mh__gallery{order:2}
.p-mh__block--rev .p-mh__body{order:1}
/* ★写真は右から左へ流れる（2026-08-21）。
     器（.p-mh__gallery）は列いっぱいで overflow:hidden＝ここで左右を切る。
     中の帯（.p-mh__strip）が js-marquee で動く。幅は Figma の 420:316:428・すき間4px を
     3枚ごとに繰り返す（複製も同じ並びなので nth-child(3n) の周期が崩れない）。 */
/* ★本文を全文表示にしたので（2026-09-04）、文章側が444pxを超える。
   高さを固定したままだと写真の帯だけが宙に浮くので、ブロックの高さに追従させる。 */
.p-mh__gallery{position:relative;overflow:hidden;min-height:444px;align-self:stretch}
/* ★帯は絶対配置にする。高さを流し込みのままにすると、写真の原寸から帯の高さが決まり、
   文章より写真のほうが背の高い拠点（京都山科＝本文495pxに対し帯764px）でブロックが伸びる。
   絶対配置なら帯は高さに関与せず、ブロックの高さ＝文章の高さになる（下限444px）。 */
.p-mh__strip{position:absolute;inset:0 auto 0 0;display:flex;gap:4px;height:100%;width:max-content;will-change:transform}
.p-mh__strip figure{flex:none;margin:0;height:100%;overflow:hidden}
.p-mh__strip figure:nth-child(3n+1){width:420px}
.p-mh__strip figure:nth-child(3n+2){width:316px}
.p-mh__strip figure:nth-child(3n+3){width:428px}
.p-mh__strip img{width:100%;height:100%;object-fit:cover;display:block}
.p-mh__body{display:flex;flex-direction:column;justify-content:center;padding:24px 56px 24px 80px}
.p-mh__block--rev .p-mh__body{padding-left:56px;padding-right:80px}
/* Figma: 地名＝Noto Sans JP Bold 24px/1.9 ／ 種別＝同 Bold 20px（実装は明朝26px＋ゴシック15pxだった） */
.p-mh__name{font-family:var(--f-gothic);font-size:32px;font-weight:700;line-height:1.9;letter-spacing:0}
.p-mh__name span{font-family:var(--f-gothic);font-size:20px;font-weight:700;margin-left:8px;letter-spacing:0}
.p-mh__specs{display:flex;gap:10px;margin:3.5px 0 11.5px}
.p-mh__specs .c-spec{min-width:0;height:30px;padding:0 20px;border-width:.5px;font-size:13px;line-height:1.8;letter-spacing:0}
.p-mh__rule{height:1px;background:#c3c3c3;margin-bottom:15px}
.p-mh__catch{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.5;letter-spacing:.03em}
.p-mh__txt{margin-top:15px;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:0}
.p-mh__body .c-btn{margin-top:40px;align-self:flex-start;min-width:203px;padding:15.5px 28px}

/* ================================================================= Works */
.p-works{padding:120px 0}
.p-works__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:34px;padding-inline:var(--side)}
.p-works__lead{font-family:var(--f-mincho);font-size:18px;font-weight:600;line-height:1.9;letter-spacing:0}
.p-works__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.p-work{position:relative;display:block;overflow:hidden;aspect-ratio:475/630;color:var(--white)}
.p-work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease)}
.p-work:hover img{opacity:.88}
.p-work::after{
  content:"";position:absolute;inset:0;
  /* Figma 16:852：カード自体に #000 8% のフラットな膜がかかり、その上に Rectangle 178（下245px＝61%〜100%）のグラデ。
     ★見出しを32px（SP23px）にして文字が上へ伸び、さらに文字の影を外した（2026-09-01）ので、
       元の「61%から.55」では見出しの上端で膜がほぼ効かず、白文字が白い壁や天板に溶けた
       （実測の最悪値＝PC 1.31:1／SP 1.00:1＝完全に消える。基準は4.5:1）。
       白の上で4.5:1を出すには黒 .535 が要る。下地の .08 と重なるので膜側は .50 必要＝
       見出しが始まる62%までに .50 へ到達させ、下端まで保つ。 */
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.62) 100%),rgba(0,0,0,.08);
}
/* ★view more は本文と同じ行ではなく1行下（Figma: 本文 y455〜574 / view more y582）。
     下の余白でその1行ぶん（27px＋8px＋22px）を空けておかないと、タイトルに重なる。 */
/* view more は本文の1行下（Figma: 本文 y455〜574 / view more y582） */
.p-work__body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 33px 56px}
/* Figma 16:826：見出し＝Noto Sans JP Bold 20px/1.8（影 2px 2px 4px rgba(0,0,0,.25)）、
   20px空けてタグ行＝アイコン25px＋12px＋Regular 14px/1.9（2026-08-21） */
/* ★アイキャッチの見出しを大きく（2026-08-31・参考 dworkshome.com の D-Gallery＝48px）。
   参考はカード1枚が約1100px幅なので48pxが成立する。上野は475px幅の3列なので同じ48pxは入らない。
   2026-09-01 で 32px（32/475＝6.7%。参考 48/1100＝4.36% を上回る）。文字の影も外した。
   グラデ膜は下61%＝y384pxから。2行になっても見出しの上端は435pxで膜の中に収まる。 */
/* 2行になると長音符が行頭に来る（「寺院リノベ／ーション」）。禁則を強くする。
   ★html には当てない（/estate/ と /about/ が逆に横漏れする）ので、この見出しだけに当てる。 */
.p-work__ttl{font-size:32px;font-weight:700;line-height:1.8;letter-spacing:0;line-break:strict}
.p-work__tags{display:flex;align-items:center;gap:12px;margin-top:20px;padding-right:120px;font-size:14px;font-weight:400;line-height:1.9;letter-spacing:0}
.p-work__tags svg{width:25px;height:25px;flex:none;fill:currentColor}
.p-work__more{position:absolute;right:32px;bottom:21px;z-index:2}
.p-works__foot{display:flex;justify-content:center;margin-top:46px}

/* =========================================================== Real Estate */
.p-estate{padding:120px 0}
.p-estate__head{text-align:center;position:relative;margin-bottom:40px}
.p-estate__nav{position:absolute;right:0;bottom:4px}
/* ★全画面で自動スクロール。Figma も frame が x=-102 幅1723＝左右にはみ出す。
     .l-wrap の外に出してあるので、ここは幅の指定をしない＝画面幅いっぱいで左右が見切れる。 */
.p-estate .c-slider{--slider-gap:24px}
.p-estate .c-slider__viewport{overflow:hidden}
.p-estate .c-slider__track{padding-left:var(--side)}
.p-estate__item{width:413px}
/* ★物件のメインビジュアルは文字の入ったマイソク＝切ると情報が消える（2026-09-04）。
   枠の比率は一覧を揃えるために残し、中身は contain で切らない。
   画像も `ueno_card`（800×600のハードクロップ）をやめて `large`（比率を保つ）に変えた
   ＝これまでは「切った画像を、さらに枠で切る」二重の切り落としになっていた。
   ★hover の拡大は全クライアント共通で使わない方針なので外した。 */
.p-estate__thumb{aspect-ratio:413/276;overflow:hidden;background:var(--bg-soft)}
.p-estate__thumb img{width:100%;height:100%;object-fit:contain;display:block}
/* 枠より縦長の写真だけ切る（JSが付ける）＝マイソクは切らず、写真は枠いっぱいに */
.p-estate__thumb.is-cover img,.p-escard__thumb.is-cover img{object-fit:cover}
.p-estate__ttl{margin:19px 0 14px;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:0}
.p-estate__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.p-estate__price{font-weight:500}
/* Figma 16:899/16:903：ラベルの幅は文字数なり（所在地60px／価格48px）。左右12pxの余白だけ */
.p-estate .p-meta__row dt{width:auto}
/* view more は価格の行の右端（Figma 16:911 x=カード左+307＝右端そろえ） */
.p-estate__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.p-estate__more{display:flex;justify-content:center;margin-top:46px}

/* ================================================ Reform & Renovation */
.p-reform{position:relative;background:var(--bg-soft);padding:93px 0 62px;overflow:hidden}
/* ★背景の線画は「もう少し薄く」。
     Figma と実装を同じ場所で採寸して合わせた：線の暗さ（下位2%）Figma 229 / 実装 200、
     地の明るさ Figma 242 / 実装 247（線画のPNGが白地なので不透明度を上げるほど地も白く浮く）。
     .14 にすると線 229・地 242 でどちらもFigmaと一致する。 */
.p-reform__bg{
  position:absolute;inset:0;background:url(../img/reform-linebg.webp) center/cover no-repeat;
  opacity:.15;pointer-events:none;
}
.p-reform__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0 66px;align-items:start}
/* Figma 16:999 / 16:985 / 16:986 / 16:988（2026-08-21）
   英字＝Poppins SemiBold 64px・行送り1／リード＝Noto Sans JP Bold 18px/1.9
   赤いキャッチ＝ヒラギノ明朝W6 20px/1.9／本文＝Medium 14px/1.8 */
.p-reform__en{font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1;letter-spacing:.005em}
.p-reform__ja{margin-top:20px;font-size:18px;font-weight:700;line-height:1.9;letter-spacing:0}
.p-reform__cta{margin-top:71px}
/* ★写真は自動で横に流れる。Figma も 294px×3 が右端からはみ出している。
     マーキー（js-marquee）が同じ並びを複製して輪にするので、幅は決め打ちにせず
     はみ出したぶんは .p-reform の overflow:hidden で切る。 */
/* ★clip-path の右を負にすると「左だけ切って右は伸ばす」ができる。
     overflow:hidden だと右のはみ出しまで切ってしまい、画面端まで流れない。 */
.p-reform__strip{margin-top:-13px;margin-bottom:36px;clip-path:inset(0 -100vw 0 0)}
.p-reform__photos{display:flex;gap:7px;width:max-content;will-change:transform}
.p-reform__photos figure{flex:0 0 294px;margin:0;aspect-ratio:294/225;overflow:hidden}
.p-reform__photos img{width:100%;height:100%;object-fit:cover;display:block}
.p-reform__catch{font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.9;letter-spacing:0;color:var(--accent);margin-bottom:8px}
.p-reform__txt{font-size:14px;font-weight:500;line-height:1.8;letter-spacing:0}

/* ============================================================ HOUSE Q&A */
.p-qa{padding:120px 0}
.p-qa__head{display:flex;align-items:baseline;gap:22px;margin-bottom:38px}
/* Figma 16:1072＝Poppins SemiBold 48px・行送り1（他の節の64pxとは別サイズ）。
   和文の添え字だけ Bold 15px（2026-08-21） */
.p-qa__head .c-sechead__en{font-size:48px;line-height:1}
.p-qa__head .c-sechead__ja{font-weight:700}
.p-qa__grid{display:grid;grid-template-columns:399px minmax(0,1fr);gap:0 46px}
.p-qa__cats{grid-column:1;grid-row:1}
.p-qa__cta{grid-column:1;grid-row:2;align-self:end}
.p-qa__list{grid-column:2;grid-row:1/3}
/* Figma 16:1014＝行のピッチ48px（文字25px＋23px） */
.p-qa__cats{display:flex;flex-direction:column;gap:23px;font-size:14px;line-height:1.8;letter-spacing:.06em}
/* Figma 16:1015〜1019：どれも Noto Sans JP Medium 14px。現在地は「色だけ」変える（太くしない） */
.p-qa__cats a{color:#8e8e8e}
.p-qa__cats a.is-current,.p-qa__cats a:hover{color:var(--text)}
.p-qa__cta{margin-top:0}
/* ★Figma 16:1023：1行目の上に罫線は無い。行の中身25px→30px→罫線→30px→次の行（ピッチ85px）。
     日付62px・カテゴリー100px・間24px。実装は上に罫線があり、上下の余白も18pxだった（2026-08-21）。 */
.p-qa__list li{border-bottom:1px solid var(--line)}
/* ★カテゴリーの列は Figma だと100px（見本の文字が「カテゴリー」5文字だから）。
     実データは「アフターサポート」「家づくりの流れ」8文字なので 100px だと切れる＝140pxにする。 */
.p-qa__list a{display:grid;grid-template-columns:62px 140px minmax(0,1fr);align-items:center;gap:0 24px;padding:30px 0;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:0}
.p-qa__list li:first-child a{padding-top:0}
.p-qa__list a:hover{opacity:.6}
.p-qa__date{font-family:var(--f-en);font-size:12px;color:var(--text)}
.p-qa__cat{font-size:12px;color:var(--text);border-left:1px solid #a3a3a3;border-right:1px solid #a3a3a3;padding-inline:20px;text-align:center;line-height:1.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-qa__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ================================================================= Staff */
.p-staff{padding:120px 0}
.p-staff__head{text-align:center;position:relative}
.p-staff__lead{margin-top:24px;font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:0}
.p-staff__sub{margin-top:0;font-family:var(--f-mincho);font-size:16px;font-weight:600;line-height:1.9;letter-spacing:0}
.p-staff__nav{position:absolute;right:0;bottom:0}
/* ★全画面表示＋自動で流す・マウスが乗ったら止まる。
     Figma も frame が x=-116 幅1740＝左右にはみ出す。カードは348px・写真は288px。 */
.p-staff .c-slider{margin-top:42px;--slider-gap:0px}
.p-staff__item{width:348px;padding-inline:14px;border-right:1px solid var(--line);text-align:center}
.p-staff__photo{position:relative;width:288px;margin:0 auto;aspect-ratio:1}
.p-staff__photo__mask{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.p-staff__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* ★デザインでは写真の中央（実装は左端に寄せて少しはみ出していた＝2026-08-21）。
     Figma 16:1202 は幅92px・高さ30px・文字13px、円の下から23px内側。 */
.p-staff__role{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;z-index:1;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;height:32px;
  background:var(--accent);color:var(--white);font-size:13px;line-height:1.8;letter-spacing:.04em;padding:0 20px;
}
.p-staff__name{margin-top:10px;font-size:24px;font-weight:700;line-height:1.9;letter-spacing:0}
.p-staff__name span{font-family:var(--f-gothic);font-size:12px;font-weight:700;color:inherit;margin-left:20px;letter-spacing:0}
.p-staff__more{margin-top:10px;color:var(--accent)}
.p-staff__foot{display:flex;justify-content:center;margin-top:44px}

/* =============================================================== Reviews */
/* Trustindex ウィジェットの器（見出しと View more の間） */
.p-review__ti{margin-top:40px}
.p-review__ti .ti-widget{margin:0 !important}
.p-review{padding:120px 0}
.p-review__head{text-align:center;position:relative;margin-bottom:40px}
.p-review__nav{position:absolute;right:0;bottom:4px}
.p-review .c-slider{--slider-gap:16px}
.p-review__item{width:288px}
.p-review__card{display:block;background:#d9d9d9;aspect-ratio:288/193;overflow:hidden}
.p-review__card img{width:100%;height:100%;object-fit:cover;display:block}
.p-review__foot{display:flex;justify-content:center;margin-top:44px}

/* ================================================================ バナー
   Figma: Performance 38:1636 / Recruit 248:2437（PC 1200x351）
          SP  121:909（375x245）/ 248:2453（375x386）
   要素はデザインの実座標を % で絶対配置し、文字サイズは cqw で比例させる。 */
.p-banners{padding:0 0 120px}
.p-banners .l-wrap{display:flex;flex-direction:column;gap:40px}
.p-banner{
  position:relative;display:block;overflow:hidden;color:var(--white);
  aspect-ratio:1200/351;container-type:inline-size;background:var(--dark);
}
.p-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease)}
.p-banner:hover>img{opacity:.9}
.p-banner__in{display:contents}          /* 子をバナー基準で絶対配置する */
.p-banner__row{display:contents}
/* display:contents で親の z-index が消えるため、各要素に持たせて暗幕(::after)より前に出す */
.p-banner__en,.p-banner__ja,.p-banner__catch,.p-banner__rule,
.p-banner__tags,.p-banner__arrow,.p-banner__btn{z-index:2}
.p-banner__en{
  position:absolute;font-family:var(--f-en);font-size:5.33cqw;font-weight:600;
  line-height:1.7;letter-spacing:.01em;white-space:nowrap;
}
.p-banner__ja{position:absolute;font-size:1.33cqw;line-height:1.9;letter-spacing:.1em;white-space:nowrap}
.p-banner__catch{
  position:absolute;font-family:var(--f-mincho);font-size:1.92cqw;
  line-height:2;letter-spacing:.02em;white-space:nowrap;
}
.p-banner__rule{position:absolute;height:1px;background:rgba(255,255,255,.85)}
.p-banner__arrow{
  position:absolute;display:grid;place-items:center;
  width:3.67cqw;height:3.67cqw;border:1px solid var(--white);border-radius:50%;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
/* Figma の丸の中身は「›」ではなく矢印「→」（軸15px＋山型）。他のボタンと同じ作り。 */
.p-banner__arrow::before{
  content:"";position:absolute;left:50%;top:50%;width:1.25cqw;height:1px;background:currentColor;
  transform:translate(-50%,-50%);
}
.p-banner__arrow::after{
  content:"";position:absolute;left:50%;top:50%;width:.589cqw;height:.589cqw;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translate(calc(-50% + .208cqw),-50%) rotate(45deg);
}
.p-banner:hover .p-banner__arrow{background:var(--white);color:var(--text)}

/* --- Performance --- */
.p-banner--perf::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,.42)}
.p-banner--perf .p-banner__en{left:23%;top:24.5%}
.p-banner--perf .p-banner__ja{left:60.83%;top:38.75%}
.p-banner--perf .p-banner__rule{left:18.67%;top:52.14%;width:62.67%}
.p-banner--perf .p-banner__catch{left:19.08%;top:62.39%}
.p-banner--perf .p-banner__tags{
  position:absolute;left:46.5%;top:64.96%;
  display:flex;align-items:center;font-size:1.17cqw;letter-spacing:.04em;white-space:nowrap;
}
.p-banner--perf .p-banner__tags span{padding-inline:1.17cqw;border-left:1px solid rgba(255,255,255,.55)}
.p-banner--perf .p-banner__tags span:last-child{border-left:0}
.p-banner--perf .p-banner__arrow{left:88.42%;top:45.87%}

/* --- Recruit（写真3枚は斜めに切り替わる） --- */
.p-banner--recruit .p-banner__photos{position:absolute;inset:0}
.p-banner--recruit .p-banner__photos img{
  position:absolute;top:0;height:100%;width:auto;max-width:none;object-fit:cover;
}
.p-banner--recruit .p-banner__photos img:nth-child(1){
  left:0;width:33.33%;clip-path:polygon(0 0,100% 0,82.25% 100%,0 100%);
}
.p-banner--recruit .p-banner__photos img:nth-child(2){
  left:27.42%;width:39.25%;clip-path:polygon(15.07% 0,100% 0,87.05% 100%,0 100%);
}
.p-banner--recruit .p-banner__photos img:nth-child(3){
  left:61.58%;width:38.42%;clip-path:polygon(13.23% 0,100% 0,100% 100%,0 100%);
}
/* ★写真ごとに顔の高さが違うので、object-fit:cover の既定（中央）だと頭が切れる（2026-08-31）。
   YuNetで顔を実測：2枚目は約2px、3枚目は約60px、額から上が枠外に出ていた。
   上寄せにすると顔の上に髪ぶんの余白が残る（枠351pxに対し顔の上端が 2枚目58px／3枚目72px）。
   1枚目は横長で高さ側が余らない＝切れないので触らない。 */
/* ★1枚目は横長で高さ側が余らない＝縦は切れないが、横は 765px を 400px の枠で見るので
   既定の中央だと人物が右へ109pxずれる（Figmaでは顔の中心が枠内x=217、実装は326）。
   80% にすると 508.5-0.80*365=216.5 でカンプと一致（2026-09-01）。 */
.p-banner--recruit .p-banner__photos img:nth-child(1){object-position:80% 0}
.p-banner--recruit .p-banner__photos img:nth-child(2),
.p-banner--recruit .p-banner__photos img:nth-child(3){object-position:50% 0}
.p-banner--recruit::after{
  content:"";position:absolute;left:0;right:0;top:66.38%;bottom:0;background:rgba(26,26,26,.55);
}
.p-banner--recruit .p-banner__en{left:6.17%;top:66.38%}
.p-banner--recruit .p-banner__ja{left:27.42%;top:78.92%}
.p-banner--recruit .p-banner__catch{left:36.75%;top:76.64%}
.p-banner--recruit .p-banner__rule{display:none}
.p-banner--recruit .p-banner__btn{
  position:absolute;left:74.83%;top:75.21%;width:21.08%;height:16.24%;
  min-width:0;padding:0;font-size:1.17cqw;
}

/* =========================================================== Instagram */
.p-insta{background:var(--bg-soft);padding:96px 0}
.p-insta__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:36px}
/* Figma だけ和文が Bold 18px（他のセクションは Medium 15px） */
.p-insta__headin{text-align:center;flex:1}
.p-insta__headin .c-sechead__ja{font-size:18px;font-weight:700}
.p-insta__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* ★Figma は 226×283 の縦長（実装は 214×172 の横長だった） */
.p-insta__item{display:block;aspect-ratio:226/283;overflow:hidden;background:#ddd}
.p-insta__item img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s var(--ease)}
.p-insta__item:hover img{opacity:.85}
.p-insta__foot{display:none}   /* PCは見出し横のボタンを使う。SPのみ下部に出す */

/* =============================================================== Footer */
/* --- フッター（全ページ共通）
   デザイン正本: Figma 293:3865（PC 1440x782）。★列のx座標と縦のピッチはFigma実測：
   上段 ロゴx120 /【大阪本社】x463 / Tel x672 / プラポリx1138＋Instagram x1292、罫線 y204（幅1200）。
   中段 支店x120（ピッチ120px）／ナビ x703・x943・x1141（行ピッチ49px）／CTA x703 y532（299x87）。
   Copyright y719（中央）。★罫線は【上段の下】1本だけ。コピーライトの上には無い。 */
.l-footer{background:var(--dark);color:var(--white);padding:108px 0 48px}
.l-footer a:hover{opacity:.65}
/* 上段は4列。Figmaのx座標をそのままトラック幅にしている（343+209+466+182=1200） */
.l-footer__top{display:grid;grid-template-columns:343px 209px 466px minmax(0,1fr);align-items:start}
.l-footer__logo{width:297px;display:block;line-height:0;margin-top:23px}
.l-footer__hq h2{font-size:16px;font-weight:500;line-height:1.4;margin-bottom:9px}
.l-footer__hq address{font-style:normal;font-size:14px;font-weight:500;line-height:1.5;letter-spacing:.02em}
.l-footer__hq address span{display:block}
.l-footer__tel{display:flex;flex-direction:column;gap:0;margin-top:22px}
.l-footer__tel a{display:flex;align-items:baseline;gap:8px}
.l-footer__tel small{font-family:var(--f-en);font-size:14px;letter-spacing:.02em}
.l-footer__tel b{font-family:var(--f-num);font-size:24px;font-weight:400;line-height:1.5;letter-spacing:.02em}
.l-footer__hours{font-size:12px;font-weight:500;line-height:1.4}
.l-footer__util{display:flex;align-items:flex-end;gap:14px;justify-content:flex-end;margin-top:45px}
.l-footer__util a{font-size:12px;font-weight:500;letter-spacing:.17em}
.l-footer__util img{width:28px;height:28px}

.l-footer__mid{display:grid;grid-template-columns:376px minmax(0,1fr);gap:0 207px;margin-top:66px}
.l-footer__offices{display:flex;flex-direction:column;gap:39px}
/* ★罫線は見出しの行送りのすぐ下（Figma y293＝見出しtop+22＝1行ぶん）。padding は入れない。 */
.l-footer__office h3{font-size:16px;font-weight:500;line-height:1.4;padding-bottom:0;border-bottom:.5px solid rgba(255,255,255,.34)}
.l-footer__office address{display:block;font-style:normal;margin-top:17px;font-size:14px;font-weight:500;line-height:1.5;letter-spacing:.02em}
.l-footer__nav{display:grid;grid-template-columns:240px 198px minmax(0,1fr);font-size:14px;font-weight:500;line-height:1.4}
.l-footer__nav ul{display:flex;flex-direction:column;gap:29px}
.l-footer__nav ul ul{gap:11px;margin-top:16px;padding-left:30px}
/* CTAはナビと同じ右カラムの中（全幅の行ではない）＝支店リストの横に収まる */
.l-footer__cta{display:flex;gap:19px;margin-top:46px;justify-content:flex-end}
.l-footer__cta a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:299px;height:87px;border:.5px solid var(--white);border-radius:4px;
  font-size:20px;font-weight:700;letter-spacing:.02em;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.l-footer__cta a:hover{background:var(--white);color:var(--dark);opacity:1}
.l-footer__cta a:hover img{filter:invert(1) brightness(.15)}
.l-footer__cta img{width:20px;height:20px}
.l-footer__rule{height:.5px;background:rgba(255,255,255,.25);margin-top:23px}
.l-footer__copy{margin-top:100px;text-align:center;font-size:11px;font-weight:300;letter-spacing:.02em}

/* ======================================================== ページトップ */
.c-pagetop{
  position:fixed;right:24px;bottom:24px;z-index:80;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--dark);color:var(--white);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background-color .3s var(--ease);
}
.c-pagetop.is-in{opacity:1;visibility:visible;transform:none}
.c-pagetop::before{content:"";width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(-45deg) translate(-2px,2px)}
.c-pagetop:hover{background:var(--accent)}
/* 追従ナビ（幅89px）と重なるので、出ている幅ではページトップを左へ逃がす */
@media (min-width:1181px){
  .c-pagetop{right:105px}
}

/* ================================================ 下層ページ共通ヘッダー
   Figma プラポリ_PC 464:4893（見出しy=205 / パンくずy=387 / 罫線y=430）
        プラポリ_SP 464:5240（見出しy=129 / パンくずy=232 / 罫線y=260） */
.l-pagehead{border-bottom:1px solid var(--line);padding-top:205px}
.l-pagehead__inner{text-align:center}
.l-pagehead__en{
  font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1.203;
  letter-spacing:.01em;color:var(--text);
}
.l-pagehead__ja{
  margin:0;font-size:14px;font-weight:500;line-height:1.786;letter-spacing:.12em;color:var(--text);
}
.c-crumb{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin-top:80px;padding-bottom:21px;
  font-size:13px;line-height:1.7;letter-spacing:.04em;color:var(--text);
}
.c-crumb a:hover{opacity:.6}
.c-crumb__sep{width:12px;height:12px;flex:none;position:relative}
.c-crumb__sep::before{
  content:"";position:absolute;left:2px;top:50%;
  width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* 写真ヘッダー版（固定ページのACF「見出しの背景写真」を入れたページ）
   Figma お問い合わせ 189:1936 / 421:3392・資料請求 273:2485。
   写真の上に白文字＝ヘッダーも透過（body.has-photohead を header.php / main.js が見る）。 */
.l-pagehead--photo{position:relative;z-index:0;padding-top:0;border-bottom:0;color:var(--white)}
.l-pagehead--photo .l-pagehead__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 縦の見せ場（家具・目線）が中央より下にあるので少し下寄せで切る。
   Figma はさらに1.8倍ズームしているが、支給前の写真が1920pxしかなく拡大すると荒れるため、
   ズームせず「縦の位置合わせ」だけ合わせている。支給原寸に差し替えたら再調整する。 */
.l-pagehead--photo .l-pagehead__bg img{width:100%;height:100%;object-fit:cover;object-position:center 61%;display:block}
.l-pagehead--photo .l-pagehead__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.l-pagehead--photo .l-pagehead__inner{position:relative;z-index:1;padding:205px 0 124px}
.l-pagehead--photo .l-pagehead__en,
.l-pagehead--photo .l-pagehead__ja{color:var(--white)}
.l-pagehead--photo .c-crumb{position:absolute;right:0;bottom:21px;margin:0;padding:0;color:var(--white)}

/* ===================================================== 文章ページ（規約等）
   Figma プラポリ：本文15px/行間24・見出し22px＋下に罫線 */
.p-page{padding:70px 0 140px}
.p-page p{font-size:15px;line-height:1.6;letter-spacing:.04em}
.p-page h2{
  margin-top:60px;padding:15px 0 14px;   /* Figma Frame137=71px（15+41+14+罫線1） */
  font-size:22px;font-weight:700;line-height:1.86;letter-spacing:.06em;
  border-bottom:1px solid var(--line);
}
.p-page h2+*{margin-top:30px}
.p-page ul{margin-top:0}
.p-page li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;letter-spacing:.04em}
.p-page li::before{
  content:"";position:absolute;left:4px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--text);
}
.p-page address{font-style:normal;font-size:15px;line-height:1.6;letter-spacing:.04em}

/* =================================================================== 404
   Figma 404_PC 189:579（コンテンツ域 0-800／404はy=277）
        404_SP 421:3262（y=140、フッターはy=520）
   ※ 各要素の line-height は Figma のテキストボックス高さから逆算している。 */
.p-404{padding:277px 0 206px;text-align:center}
.p-404__inner{width:min(100% - var(--side)*2, 290px);margin-inline:auto}
.p-404__num{
  font-family:var(--f-en);font-size:66px;font-weight:500;line-height:.879;
  letter-spacing:.01em;color:var(--text);
}
.p-404__en{
  margin-top:16px;
  font-family:var(--f-en);font-size:34px;font-weight:400;line-height:.735;
  letter-spacing:.1em;color:var(--text);
}
.p-404__txt{margin-top:40px;font-size:14px;line-height:1.4;letter-spacing:.04em}
.p-404 .c-btn--back{margin-top:80px}

/* ============================================================= サンクス
   Figma 191:3185（Thank you y=214 / 本文y=321 / 注記y=516 / ボタンy=599） */
.p-thanks{padding:214px 0 142px}
.p-thanks__inner{width:min(100% - var(--side)*2, 433px)}
.p-thanks__en{font-size:64px;line-height:1.203}
.p-thanks__txt{margin-top:30px;font-size:15px;line-height:1.933;letter-spacing:.04em}
.p-thanks__txt+.p-thanks__txt{margin-top:29px}   /* Figma は1行ぶんの空行 */
.p-thanks__note{margin-top:50px;font-size:13px;line-height:1.7;letter-spacing:.04em;color:var(--muted)}
.p-thanks .c-btn--back{margin-top:60px}


/* ================================================== アーカイブ共通・部品
   Figma スタッフ紹介_PC 191:3301（本文開始y=531／ページャーy=2331／フッター2497） */
.p-archive{padding:100px 0 140px}
.p-archive__empty{padding:40px 0;font-size:15px}

/* 役職バッジ（赤） */
.c-role{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:74px;height:26px;padding:0 11px;
  background:var(--accent);color:var(--white);
  font-size:13px;line-height:1;letter-spacing:.02em;
}

/* ページャー */
.c-pager{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:100px}
.c-pager a,.c-pager span{
  display:grid;place-items:center;min-width:28px;height:26px;
  font-family:var(--f-en);font-size:16px;line-height:1;letter-spacing:.02em;color:var(--text);
  transition:opacity .3s var(--ease);
}
.c-pager a:hover{opacity:.5}
.c-pager .current{font-weight:600;text-decoration:underline;text-underline-offset:5px}
.c-pager .dots{letter-spacing:.1em}
.c-pager .prev,.c-pager .next{min-width:34px}
.c-pager__arrow{display:block;width:6px;height:11px;position:relative}
.c-pager__arrow::before{
  content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
}
.c-pager__arrow--prev::before{transform:rotate(-135deg)}
.c-pager__arrow--next::before{transform:rotate(45deg)}

/* ★画像のマウスオーバー拡大（transform:scale）は全クライアント共通で使わない方針。
   2026-09-05 に全9か所を撤去し、画像を拡大しない「わずかに沈むオーバーレイ」に置き換えた。
   ホバーの手応えは opacity のみで出す。
   ★口コミプラグイン（Trustindex）が自分のCSSで拡大するので、ここで打ち消す。
     プラグインのファイルは編集しない方針なので、テーマ側から上書きする。 */
.ti-widget .ti-review-item .ti-review-image:hover img{transform:none !important}
/* ============================================== スタッフ一覧（カード） */
/* しぼり込みタブ（2026-08-26）＝施工事例と同じ共用部品 .p-wkfilter。
   タブを挟むぶん、一覧の上余白は 100px → 60px に詰める（施工事例と同じリズム）。 */
.p-stafffilter + .p-archive{padding-top:60px}
.p-staffgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:80px 9px}
.c-staffcard{display:block}
.c-staffcard__photo{aspect-ratio:293/387;overflow:hidden;background:var(--bg-soft)}
.c-staffcard__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s var(--ease)}
.c-staffcard:hover .c-staffcard__photo img{opacity:.88}
.c-staffcard__body{padding-top:20px}
.c-staffcard__name{
  margin-top:5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:22px;font-weight:500;letter-spacing:.06em;
}
.c-staffcard__name span{font-family:var(--f-en);font-size:13px;color:var(--muted);letter-spacing:.04em}
.c-staffcard__more{margin-top:10px;color:var(--accent)}

/* ================================================== スタッフ詳細
   Figma 191:3998（写真 220,538,457x680／情報 800,788／パネル 220,1294） */
.p-staff-single{padding-top:107px}
.p-staff-single__main{display:grid;grid-template-columns:457px minmax(0,1fr);gap:0 123px;align-items:start}
.p-staff-single__photo{margin:0;aspect-ratio:457/680;overflow:hidden;background:var(--bg-soft)}
.p-staff-single__photo img{width:100%;height:100%;object-fit:cover;display:block}
.p-staff-single__info{padding-top:28px}
/* 「Message」は情報カラムより57px左へはみ出し、赤いコピーが下端に重なる（Figma実座標） */
.p-staff-single__mark{margin-left:-57px;color:#d6d6d6;line-height:0}
.p-staff-single__mark img{width:149px;height:auto}
.p-staff-single__catch{
  margin-top:-28px;position:relative;
  font-family:var(--f-mincho);font-size:24px;font-weight:400;line-height:1.79;
  letter-spacing:.06em;color:var(--accent);
}
.p-staff-single__profile{margin-top:40px;padding:30px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-staff-single__license{margin-top:8px;font-size:14px;line-height:1.64;letter-spacing:.04em}
.p-staff-single__name{
  margin-top:10px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  font-size:32px;font-weight:500;letter-spacing:.06em;
}
.p-staff-single__name span{font-family:var(--f-en);font-size:14px;color:var(--muted);letter-spacing:.04em}
.p-staff-single__home{
  display:flex;align-items:center;margin-top:20px;
  border:1px solid var(--line);min-height:47px;
}
.p-staff-single__home dt{padding:10px 20px;font-size:14px;letter-spacing:.04em}
.p-staff-single__home dd{margin:0;padding:10px 20px;font-size:14px;letter-spacing:.04em}
.p-staff-single__lead{margin-top:30px;font-size:14px;line-height:1.79;letter-spacing:.04em}

/* Weekend Lifestyle / Favorite Things */
.p-staff-single__panels{margin-top:76px;display:flex;flex-direction:column;gap:30px}
.p-staffpanel{background:var(--bg-soft);padding:40px 60px}
.p-staffpanel__head{display:flex;align-items:center;gap:40px}
.p-staffpanel__en{
  position:relative;padding-left:16px;flex:none;
  font-family:var(--f-en);font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.01em;
}
.p-staffpanel__en::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.p-staffpanel__rule{flex:none;width:182px;height:1px;background:var(--line)}
.p-staffpanel__ja{font-size:16px;letter-spacing:.06em}
.p-staffpanel__body{margin-top:30px;font-size:14px;line-height:1.79;letter-spacing:.04em}

/* 他のスタッフも見る */
.p-otherstaff{padding:200px 0 0}
.p-otherstaff__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.p-otherstaff__ttl{
  display:flex;align-items:baseline;gap:28px;
  font-family:var(--f-en);font-size:48px;font-weight:600;line-height:1.27;letter-spacing:.01em;
}
.p-otherstaff__ttl span{font-family:var(--f-gothic);font-size:16px;font-weight:500;letter-spacing:.06em}
/* ★1枚目を見出し（l-wrap）の左端にそろえる。スライダー自体は全幅のままで、
   トラックの左に l-wrap と同じぶんの余白を入れる（建売スライダーと同じ作法）。
   同じ職種の人だけを出すようになって枚数が1〜数枚になり、x=0 始まりだと
   画面の端で丸が切れて壊れて見えるため（2026-08-26）。 */
.p-otherstaff__slider .c-slider__track{padding-left:max(var(--side), calc((100% - var(--wrap)) / 2))}
.p-otherstaff__slider{margin-top:70px;--slider-gap:60px}
.p-otherstaff__item{width:288px}
.p-otherstaff__photo{position:relative;width:288px;aspect-ratio:1}
.p-otherstaff__mask{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.p-otherstaff__photo img{width:100%;height:100%;object-fit:cover;display:block}
.p-otherstaff__role{position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;min-width:92px;height:32px;font-size:14px;white-space:nowrap}
.p-otherstaff__name{
  margin-top:42px;display:flex;align-items:baseline;justify-content:center;gap:20px;flex-wrap:wrap;
  font-size:24px;font-weight:500;letter-spacing:.06em;text-align:center;
}
.p-otherstaff__name span{font-family:var(--f-en);font-size:14px;color:var(--muted);letter-spacing:.04em}
.p-otherstaff__more{margin-top:10px;justify-content:center;width:100%;color:var(--accent)}
.p-otherstaff__foot{display:flex;justify-content:center;margin-top:50px;padding-bottom:140px}

/* ================================================ ニュース/Q&A 一覧・詳細
   Figma 一覧 191:4719（タブy=491／リストy=600／項目1000x237・間隔40）
        詳細 191:5437（日付y=531／アイキャッチy=633 1000x496／本文y=1179） */
.p-archive--qa{padding-top:60px}
.c-tabs{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 30px;
  margin-bottom:80px;font-size:14px;letter-spacing:.06em;
}
.c-tabs a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:92px;height:29px;padding:0 18px;color:var(--muted);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.c-tabs a:hover{color:var(--text)}
.c-tabs a.is-current{background:var(--dark);color:var(--white)}

.p-newslist{display:flex;flex-direction:column}
.c-newsitem{
  display:grid;grid-template-columns:369px minmax(0,1fr);gap:0 83px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--line);
}
.c-newsitem+.c-newsitem{padding-top:40px}
.c-newsitem__thumb{aspect-ratio:369/217;overflow:hidden;background:var(--bg-soft)}
.c-newsitem__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s var(--ease)}
.c-newsitem:hover .c-newsitem__thumb img{opacity:.88}
.c-newsitem__body{padding-top:24px}
.c-newsitem__meta{display:flex;align-items:center;gap:24px;font-size:13px;line-height:1.7;letter-spacing:.04em;color:var(--muted)}
.c-newsitem__cat{
  position:relative;padding-inline:20px;
}
.c-newsitem__cat::before,.c-newsitem__cat::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:1px;height:14px;background:var(--line);
}
.c-newsitem__cat::before{left:0}
.c-newsitem__cat::after{right:0}
.c-newsitem__ttl{margin-top:20px;font-size:20px;font-weight:500;line-height:1.6;letter-spacing:.04em}
.c-newsitem__excerpt{
  margin-top:20px;font-size:14px;line-height:1.79;letter-spacing:.04em;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------------------------------------------------------- 記事詳細 */
.p-single{padding:100px 0 140px}
.p-single__head{padding-bottom:0}
.p-single__ttl{margin-top:12px;font-size:28px;font-weight:500;line-height:1.55;letter-spacing:.04em}
.p-single__eyecatch{margin:25px 0 0;aspect-ratio:1000/496;overflow:hidden;background:var(--bg-soft)}
.p-single__eyecatch img{width:100%;height:100%;object-fit:cover;display:block}
.p-single__foot{display:flex;justify-content:center;margin-top:128px}

/* 本文（クラシックエディタの出力） */
.c-entry{margin-top:50px;font-size:15px;line-height:1.93;letter-spacing:.04em}
.c-entry>*+*{margin-top:24px}
.c-entry h2{
  position:relative;padding-left:21px;margin-top:60px;
  font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.04em;
}
.c-entry h2::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.c-entry h3{
  position:relative;padding:0 0 8px 21px;margin-top:48px;
  font-size:20px;font-weight:500;line-height:1.6;letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}
.c-entry h3::before{
  content:"";position:absolute;left:0;top:.15em;width:5px;height:1.15em;background:var(--accent);
}
.c-entry p{font-size:15px;line-height:1.93;letter-spacing:.04em}
.c-entry ul{margin-top:16px}
.c-entry ul li{position:relative;padding-left:21px;line-height:1.93}
.c-entry ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.c-entry ol{margin-top:16px;padding-left:1.4em;list-style:decimal}
.c-entry a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.c-entry a:hover{opacity:.7}
.c-entry img{height:auto}
/* ★figure に margin:0 と書くと、上の .c-entry>*+*{margin-top} を打ち消してしまう
   （同じ詳細度で後ろにあるため）。本文と写真がぴったり付いて余白が0になっていた。
   左右だけ0にして、縦は本文リズムの指定に任せる（2026-08-31）。 */
.c-entry figure{margin-left:0;margin-right:0;margin-bottom:0}
.c-entry>figure:first-child{margin-top:0}
.c-entry blockquote{
  margin-top:30px;background:var(--bg-soft);padding:30px 32px;
}
.c-entry blockquote>*+*{margin-top:10px}
.c-entry strong{font-weight:700}

/* ============================================================ イベント一覧
   Figma 191:6302（グリッド x=120 y=511 / カード378x654・列間33・行間82） */
.p-archive--event{padding-top:80px}
.p-eventgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:82px 33px}
.p-eventgrid .p-event__thumb{aspect-ratio:378/472}
.p-eventgrid .p-event__ttl{margin:25px 0 15px;font-size:18px;line-height:1.6}

/* ========================================================== イベント詳細
   Figma 195:6842（PC 1440）/ 428:6738（SP 375）
   下層共通ヘッダー(l-pagehead)は使わない＝右上のパンくずだけ置く構成。
   各ブロックの上下間隔は Figma の y 座標の差をそのまま入れている。 */

/* -- 赤い塗りのCTA（イベント予約・フォーム送信で共用） -- */
.c-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:30px;
  min-width:336px;height:57px;padding:0 28px;border-radius:100px;
  background:var(--accent);color:var(--white);
  font-size:16px;font-weight:500;line-height:1.9;letter-spacing:.04em;
  transition:opacity .35s var(--ease);
}
.c-cta .c-btn__arrow{width:15px}
.c-cta:hover{opacity:.85}
.c-cta:hover .c-btn__arrow{transform:translateX(5px)}

/* -- パンくず（Figma y=108・右寄せ） -- */
.p-evdt__crumb{padding-top:108px}
.p-evdt__crumb .c-crumb{margin-top:0;padding-bottom:0}

/* -- ヒーロー：左に告知画像／右にタイトル・紹介文・CTA -- */
.p-evdt__hero{
  display:grid;grid-template-columns:456px minmax(0,1fr);gap:0 143px;   /* Figma 120|456|143|601 */
  align-items:start;margin-top:100px;
}
.p-evdt__flyer{aspect-ratio:456/569;overflow:hidden;background:var(--bg-soft)}
.p-evdt__flyer img{width:100%;height:100%;object-fit:cover;display:block}
.p-evdt__intro{padding-top:101px}                                       /* Figma 画像230 / タイトル331 */
.p-evdt__ttl{
  padding-bottom:20px;border-bottom:.5px solid #6d6d6d;
  font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:#000;
}
.p-evdt__lead{margin-top:27px;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em;color:#000}
.p-evdt__cta{margin-top:62px}

/* -- こんな方におすすめ -- */
.p-evrec{margin-top:101px;padding:80px 0;background:var(--bg-page)}
.p-evrec__head{text-align:center}
.p-evrec__en{
  font-family:var(--f-en);font-size:36px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:#000;
}
.p-evrec__ja{
  font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:#000;
}
.p-evrec__list{margin-top:30px;padding:40px 71px;background:var(--white)}
.p-evrec__item{
  display:flex;align-items:center;gap:30px;
  padding:0 20px 20px;border-bottom:.5px solid #a5a5a5;
}
.p-evrec__item+.p-evrec__item{margin-top:20px}
.p-evrec__item:last-child{padding-bottom:0;border-bottom:0}
.p-evrec__check{
  flex:none;width:27px;height:27px;
  background:url(../img/icon-check.svg) center/contain no-repeat;
}
.p-evrec__item span{font-size:16px;font-weight:500;line-height:1.7;letter-spacing:.04em;color:#000}

/* -- 本文（クラシックエディタ）。見出しの飾りが記事詳細と違うので --event で上書き -- */
.p-evdt__body{padding-top:80px}
/* ★本文の行送りは 220%（2026-09-01）。Figma 195:7228 も 1000x105＝3行＝行送り35px＝16x2.2 で一致。
   これまで 1.8 だったのはリード文だけ 2.2 にしていた名残り。 */
.c-entry--event{margin-top:0;font-size:16px;line-height:2.2;letter-spacing:.04em}
.c-entry--event>*+*{margin-top:34px}
.c-entry--event p{font-size:16px;font-weight:500;line-height:2.2;letter-spacing:.04em;color:#000}
.c-entry--event img{width:100%;height:auto;display:block}
/* Figma 197:7309 実測＝本文(1000x105)の下端105 → 写真(Rectangle 7)の上端139 ＝ 34px。
   .c-entry--event>*+*{margin-top:34px} がそれを出すはずだったが、下の margin:0 が消していた。 */
.c-entry--event figure{margin-left:0;margin-right:0;margin-bottom:0}
.c-entry--event>figure:first-child{margin-top:0}
.c-entry--event h3{
  position:relative;margin-top:40px;padding:0 0 0 21px;border:0;
  font-size:20px;font-weight:700;line-height:1.8;letter-spacing:.04em;color:#000;
}
.c-entry--event h3::before{                                /* 左の黒バー（Figma 5x37） */
  content:"";position:absolute;left:0;top:-1px;width:5px;height:calc(1.8em + 1px);background:#000;
}
.c-entry--event h3::after{                                 /* 見出し下の細い罫（618px） */
  content:"";position:absolute;left:5px;bottom:-1px;
  width:618px;max-width:calc(100% - 5px);height:1px;background:#a3a3a3;
}
.c-entry--event h3+p{margin-top:27px}
/* ★写真の前後は広くとる＝「どこで話が変わるか」を余白で見せる（2026-09-01）。
   行送りが35.2pxになったので34pxでは1行ぶんより狭く、区切りに見えない。上下とも60px。
   ★この2行は .c-entry--event h3{margin-top:40px} より「後ろ」に置くこと。
     同じ詳細度(0,1,1)なので、前に置くと写真の下だけ40pxのままになる（実測で踏んだ）。 */
.c-entry--event>figure{margin-top:60px}
.c-entry--event>figure+*{margin-top:60px}

/* -- イベント概要＋地図 -- */
.p-evov{margin-top:100px;padding:100px 0;background:var(--bg-page)}
.p-evov__grid{display:grid;grid-template-columns:473px minmax(0,1fr);gap:0 53px;align-items:start}
.p-evov--nomap .p-evov__grid{grid-template-columns:minmax(0,473px)}
.p-evov--nopanel .p-evov__grid{grid-template-columns:minmax(0,1fr)}
.p-evov--nopanel .p-evov__map{aspect-ratio:1200/500}
.p-evov__head{display:flex;align-items:center;gap:20px;padding:18px 30px;background:var(--dark)}
.p-evov__ja{
  font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:var(--white);
}
.p-evov__en{
  font-family:var(--f-en);font-size:14px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:var(--white);
}
.p-evov__list{
  display:grid;grid-template-columns:minmax(76px,max-content) minmax(0,1fr);gap:20px;
  align-items:start;padding:30px;background:var(--white);border:1px solid #bebebe;
}
.p-evov__row{display:contents}
.p-evov__row dt span{
  display:flex;align-items:center;justify-content:center;
  min-height:26px;padding:3px 10px;background:#7c7c7c;
  font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;white-space:nowrap;
  color:var(--white);text-align:center;
}
.p-evov__row dd{font-size:15px;font-weight:500;line-height:1.8;letter-spacing:.04em;color:#000}
.p-evov__map{aspect-ratio:674/537;background:#d9d9d9}
.p-evov__map iframe{width:100%;height:100%;border:0;display:block}

/* -- ご来場特典（金枠＋リボン装飾） --
   リボンは枠の外へはみ出す＝横スクロールを作らないよう overflow-x:clip で受ける
   （hidden にすると sticky 等が死ぬので clip を使う）。 */
.p-evpr{margin-top:72px;overflow-x:clip}
.p-evpr__wrap{position:relative}
.p-evpr__box{
  position:relative;padding:44px 54px;                     /* Figma padding50 - border6 */
  background:var(--dark);border:6px solid #aa7821;
}
.p-evpr__body{width:min(618px, calc(100% - 262px))}        /* 写真264＋間39＋右padding差ぶんを空ける */
.p-evpr__head{
  display:flex;align-items:center;gap:20px;
  padding-bottom:3px;margin-bottom:20px;border-bottom:1px solid #fff;
}
.p-evpr__en{
  font-family:var(--f-en);font-size:36px;font-weight:600;line-height:1.4;letter-spacing:.03em;
  background:linear-gradient(90deg,#aa7821 0%,#eacd66 20.957%,#e2c25b 23.962%,#d2ac45 32.976%,#cda53e 38.985%,#d7ba64 42.991%,#e3d491 47.999%,#ece6b2 52.005%,#f2f1c6 56.011%,#f4f6ce 59.015%,#aa7821 89.061%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.p-evpr__ja{
  font-family:var(--f-mincho);font-size:16px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:var(--white);
}
.p-evpr__lead{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.8;letter-spacing:.02em;color:var(--white)}
.p-evpr__note{font-family:var(--f-mincho);font-size:16px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:var(--white)}
.p-evpr__img{position:absolute;right:13px;top:17px;width:264px;height:198px;overflow:hidden}
.p-evpr__img img{width:100%;height:100%;object-fit:cover;display:block}
.p-evpr__wrap::before,.p-evpr__wrap::after{content:"";position:absolute;pointer-events:none}
.p-evpr__wrap::before{                                     /* 左上のリボン */
  left:-43px;top:-48px;width:181px;height:181px;
  background:url(../img/present-ribbon-1.webp) center/contain no-repeat;
}
/* ★右下リボンの right は「Figmaのメタデータのx」から出してはいけない（2026-08-22 修正）。
   回転ノードの x/y は AABB の左上ではないので、そこから引くと右へ100px以上ずれる。
   正しい出し方＝Figmaでノードを画像に描き出し、実画像どうしのテンプレートマッチで位置を測る。
   実測：PC `198:7703` の AABB(253=181×1.3976) 右端は箱の右端+92px、下端は箱の下端+88px。
         CSSの要素は181角なので AABB より (253-181)/2=36px 内側 → right:-56px / bottom:-52px。
         SP `428:6988` は AABB(184=132×1.3976) 右端が箱+67・下端が箱+48 → right:-41px / bottom:-22px。
   ※どちらも bottom は元の値と一致した＝横方向だけが間違っていた。 */
.p-evpr__wrap::after{                                      /* 右下のリボン（36.19度） */
  right:-56px;bottom:-52px;width:181px;height:181px;
  background:url(../img/present-ribbon-2.webp) center/contain no-repeat;
  transform:rotate(36.19deg);
}

/* -- 予約フォーム -- */
.p-evform{padding:114px 0 140px}
.p-evform__head{text-align:center}
.p-evform__en{
  font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1.2;letter-spacing:.022em;color:var(--text);
}
.p-evform__ja{font-size:14px;font-weight:700;line-height:1.8;letter-spacing:.04em;color:var(--text)}
.p-evform__note{margin-top:30px;font-size:14px;line-height:1.8;letter-spacing:.04em;text-align:center}
.p-evform__body{margin-top:60px}

/* ------------------------------------------------ フォーム部品（CF7） */
.c-form form{margin:0}
.c-form__row{
  display:grid;grid-template-columns:268px minmax(0,1fr);gap:0 11px;
  align-items:start;padding-bottom:30px;
}
.c-form__label{
  display:flex;align-items:center;gap:10px;min-height:53px;
  font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.04em;color:var(--text);
}
.c-form__labeltxt small{display:block;font-size:16px;font-weight:500}
.c-form__req{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:40px;height:18px;padding:0 8px;background:var(--accent);
  font-size:12px;font-weight:500;line-height:1;letter-spacing:.04em;color:var(--white);
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form input[type="date"],   /* ★常時受付の予約日＝カレンダー（2026-09-04） */
.c-form select,
.c-form textarea{
  width:100%;height:53px;padding:0 15px;
  background:#f8f8f8;border:1px solid #b5b5b5;border-radius:0;
  font-family:inherit;font-size:14px;line-height:1.8;letter-spacing:.04em;color:var(--text);
  appearance:none;-webkit-appearance:none;
}
.c-form textarea{height:165px;padding:15px}
.c-form input::placeholder,.c-form textarea::placeholder{color:#9a9a9a}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.c-form select{
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 0h8L4 4z' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:8px 4px;
}
.c-form .wpcf7-form-control-wrap{display:block}
.c-form__field--date{display:flex;flex-wrap:wrap;gap:11px}
.c-form__field--date .wpcf7-form-control-wrap{width:261px;max-width:100%}
/* ★iOS Safari は input[type=date] の高さを中身に合わせて潰すので、行の高さを明示する。
   値の位置も既定で中央寄せになるため左に揃える（他の入力欄と頭がそろわない）。 */
.c-form input[type="date"]::-webkit-date-and-time-value{text-align:left;height:53px;line-height:53px}
.c-form__field--stack{display:flex;flex-direction:column;gap:11px}

/* きっかけ（複数回答可）— Figma どおり丸いコントロールで並べる */
.c-form__field--checks{padding-top:18px}
.c-form__field--checks .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:18px 19px}
.c-form__field--checks .wpcf7-list-item{margin:0}
.c-form__field--checks .wpcf7-list-item label{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.c-form__field--checks input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:14px;height:14px;margin:0;border:1px solid var(--accent);border-radius:50%;
  display:grid;place-items:center;background:transparent;cursor:pointer;
}
.c-form__field--checks input[type="checkbox"]:checked::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);
}
.c-form__field--checks .wpcf7-list-item-label{font-size:14px;line-height:1;letter-spacing:.04em}

/* 同意チェック＋送信 */
.c-form__agree{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.c-form__agree .wpcf7-list-item{margin:0}
.c-form__agree label{display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.c-form__agree input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;
  background:#f8f8f8;border:1px solid #b5b5b5;cursor:pointer;display:grid;place-items:center;
}
.c-form__agree input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.c-form__agree input[type="checkbox"]:checked::before{
  content:"";width:9px;height:5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.c-form__agree .wpcf7-list-item-label,.c-form__agree a{font-size:14px;line-height:1.4;letter-spacing:.04em}
.c-form__agree a{text-decoration:underline;text-underline-offset:3px}
.c-form__agree a:hover{opacity:.7}
.c-form__submit{display:flex;justify-content:center;margin-top:26px}
/* ★inline-block だと中の input の下に行ボックスの余り(24px)がつき、包みが94pxになる。
     矢印は包みに対して top:50% なので、ボタン(70px)の中央より12px下に出る＝「矢印がおかしい」の正体
     flex にして包みの高さを input と同じにする。 */
.c-form__btn{position:relative;display:inline-flex}
.c-form__btn .wpcf7-submit{
  width:440px;height:70px;padding-right:52px;border:0;border-radius:100px;
  background:var(--accent);color:var(--white);
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:.04em;text-align:center;cursor:pointer;
  transition:opacity .35s var(--ease);
}
.c-form__btn .wpcf7-submit:hover{opacity:.85}
.c-form__btn .wpcf7-submit:disabled{opacity:.5;cursor:default}
/* ★CF7 は [submit] の直後に 24px のスピナーを吐く。包みの中に居ると包みが 440→464px になり、
     右基準で置いている矢印が 24px 右へずれる（もう半分の原因）。
     絶対配置にして包みの幅に効かせない。 */
.c-form__btn .wpcf7-spinner{position:absolute;left:calc(100% + 12px);top:50%;margin:0;transform:translateY(-50%)}
/* ★矢印は「軸1本＋<（山型）」＝ .c-btn__arrow と同じ作り（
     以前は斜線1本の「半分の矢じり」で、他所を直したときに
     このフォームだけ取り残されていた）。
     input[type=submit] は擬似要素を持てないので、包みの .c-form__btn に描く。
     ★このボタンだけ矢印が大きい。Figma 191:2822（Group 625116）＝ 22×13.2 で、
     共通の .c-btn の 15×9 をちょうど 1.4667 倍したもの。辺は 7.07×1.4667＝10.37px。
     山型の頂点は中心から 辺/√2 ＝ 7.33px 右に来るので、軸の右端(right:122px)に
     合わせるには中心を right:129.3px に置く。
     ボタン 440×70・矢印の右端 right:122px も Figma 191:2819/191:2822 と一致。 */
.c-form__btn::before,.c-form__btn::after{content:"";position:absolute;pointer-events:none}
.c-form__btn::after{right:122px;top:50%;width:22px;height:1px;background:var(--white);transform:translateY(-.5px)}
.c-form__btn::before{
  right:129.3px;top:50%;width:10.37px;height:10.37px;
  border-top:1px solid var(--white);border-right:1px solid var(--white);
  transform:translate(50%,-50%) rotate(45deg);
}

/* CF7 のメッセージ */
.c-form .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;line-height:1.6;color:var(--accent)}
.c-form .wpcf7-response-output{
  margin:24px 0 0;padding:16px 20px;border:1px solid var(--accent);
  font-size:14px;line-height:1.7;text-align:center;
}
.c-form .wpcf7-spinner{margin:0 auto;display:block}

/* ========================================================== お問い合わせ
   Figma 189:1936（PC 1440）/ 421:3392（SP 375）
   新規＝フォーム／既存のお客様＝メール・フリーダイヤル、の2経路。 */

/* -- 電話番号ブロック（お問い合わせ・資料請求で共用） -- */
.c-telbox{text-align:center}
.c-telbox__link{display:inline-flex;align-items:center;gap:0}
.c-telbox__link:hover{opacity:.7}
.c-telbox__icon{width:34px;height:34px;flex:none}
.c-telbox__num{
  font-family:var(--f-en);font-size:40px;font-weight:500;line-height:1.125;letter-spacing:.02em;color:var(--text);
}
.c-telbox__note{font-size:12px;font-weight:700;line-height:1.8;letter-spacing:.04em;color:var(--text)}

/* -- フォームの上（リード文＋電話） -- */
.p-contact{padding-top:81px}
.p-contact__intro{padding-bottom:60px;border-bottom:1px solid #d2d2d2;text-align:center}
.p-contact__lead{font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-contact__intro .c-telbox{margin-top:27px}
.p-contact__form{width:min(100%,1000px);margin:60px auto 0}

/* -- 既存のお客様用 --
   縦組みの Contact は枠外へ出るので overflow-x:clip で横スクロールを作らない。 */
.p-contactex{margin-top:140px;padding-bottom:140px;overflow-x:clip}
.p-contactex__box{position:relative;padding:40px 16.1%;background:var(--bg-page)}
.p-contactex__watermark{
  position:absolute;left:7.7%;top:23px;
  writing-mode:vertical-rl;
  font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1.2;letter-spacing:.022em;
  color:var(--white);pointer-events:none;user-select:none;
}
.p-contactex__inner{position:relative;z-index:1;text-align:center}
.p-contactex__ttl{
  display:inline-block;border-bottom:1px solid #c3c3c3;
  font-size:32px;font-weight:700;line-height:1.9;letter-spacing:.04em;
}
.p-contactex__txt{margin-top:20px;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.02em}
.p-contactex__mail{
  display:flex;align-items:center;justify-content:center;
  margin-top:20px;padding:10px 20px;background:var(--dark);
  font-family:var(--f-en);font-size:20px;font-weight:500;line-height:1.8;letter-spacing:.04em;color:var(--white);
  transition:opacity .35s var(--ease);
}
.p-contactex__mail:hover{opacity:.85}
.p-contactex__tel{margin-top:50px}
.p-contactex__telnote{font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-contactex__tel .c-telbox{margin-top:20px}

/* ============================================================== 資料請求
   Figma 273:2485（PC 1440）/ 432:15032（SP 375）
   お問い合わせと同じ骨格。上のリード文がカタログ紹介、電話ブロックがフォームの下に来る。
   「既存のお客様用」は parts/existing-customer.php で共用（.p-contactex）。 */
.p-catalog{padding-top:81px}

/* -- カタログ紹介（左に見出し／右にカタログ写真） --
   Figma は内容域が 220..1232＝l-wrap(120..1320) の内側に左100px・右88pxのオフセット。
   px固定だと狭い幅で溢れるので % に直して比率を保つ。 */
.p-catalog__intro{
  display:flex;align-items:center;justify-content:space-between;gap:0 6px;
  padding-inline:7.67% 7.33%;   /* Figma 212..1232＝内容域1020px */
}
.p-catalog__body{min-width:0;padding-left:8px}   /* 赤帯だけ8px外へ出るぶん */
.p-catalog__head{
  font-family:var(--f-mincho);font-size:32px;font-weight:600;line-height:1.8;letter-spacing:.01em;
}
.p-catalog__head1{display:block;color:var(--text)}
.p-catalog__head2{
  display:inline-block;margin-left:-8px;padding:0 8px;
  background:var(--accent);color:var(--white);
}
.p-catalog__note{margin-top:15px;font-size:15px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-catalog__img{flex:none;width:528px;max-width:100%}
.p-catalog__img img{width:100%;height:auto;display:block}

.p-catalog__form{width:min(100%,1000px);margin:63px auto 0}

/* -- フォームの下の電話（お問い合わせと違い、フォームの後ろに来る） -- */
.p-catalog__tel{margin-top:120px;padding-top:60px;border-top:1px solid #d2d2d2;text-align:center}
.p-catalog__tellead{font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-catalog__tel .c-telbox{margin-top:27px}

/* 既存のお客様用ブロックの前の余白だけ、お問い合わせ(140px)と違う */
.p-catalog .p-contactex{margin-top:60px}

/* ======================================================= モデルハウス一覧
   Figma 208:4702（PC 1440）/ 428:10083（SP 375）
   1棟＝［見出し行］＋［写真3点の全幅グリッド］。背景は白→濃色→白…と交互。
   見出し行の内容域は Figma 実測で 220..1397（左220・右43）＝l-wrap より右に寄っている。 */
.l-wrap--mh{padding-left:calc(var(--side) + 100px);padding-right:43px}

.p-mhlist__item{padding-top:160px}
.p-mhlist__item:first-child{padding-top:100px}
.p-mhlist__item--dark{background:var(--dark);color:var(--white);padding-bottom:40px}

.p-mhlist__head{
  display:grid;
  grid-template-columns:230px minmax(0,545px) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:73px;align-items:start;
  padding-bottom:20px;                       /* 見出し行の下端→写真まで20px */
}
/* ★見出しは［エリア名］＋［種別］の2つの塊。1列目(230px)＋gap(73px)＝コピー列の手前283pxを
   超える名前だけ、種別が2段目に落ちる（＝縦組）。京都山科支店のように長い名前がコピー列の
   文字に重なるのを防ぐ（2026-08-31）。塊の中では折り返さない（white-space:nowrap）。
   高槻235.6 / 吹田235.6 は283px以内なので1段のまま＝カンプどおり。 */
.p-mhlist__name{
  grid-column:1;grid-row:1;
  /* ★width:max-content が要る。grid の1列目(230px)に伸ばされたままだと max-width が働かず、
     短い名前まで2段に落ちる（実測で全棟が2段になった）。 */
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;width:max-content;max-width:283px;
  font-size:40px;font-weight:700;line-height:1.9;letter-spacing:.02em;white-space:nowrap;
}
.p-mhlist__name span{font-size:24px;font-weight:700;margin-left:0}
.p-mhlist__btn{grid-column:1;grid-row:2;align-self:start;margin-top:26px}
/* Figma 208:4776 ほか＝203×47。共通の .c-btn(253×58) だと 230px の1列目からはみ出す */
.p-mhlist__btn .c-btn{min-width:203px;padding:15.5px 28px}
.p-mhlist__copy{grid-column:2;grid-row:1 / 3;margin-top:6px}
.p-mhlist__catch{
  font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.5;letter-spacing:.03em;
}
.p-mhlist__txt{margin-top:20px;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.02em}
.p-mhlist__specs{
  grid-column:3;grid-row:1 / 3;justify-self:end;align-self:end;
  display:flex;gap:10px;
}
/* 白地は黒ベタ、濃色地は白フチ抜き（Figma 実測） */
.p-mhlist__specs .c-spec{
  min-width:0;height:30px;padding:0 20px;border-width:.5px;
  font-size:13px;font-weight:400;line-height:1.8;
  background:#000;border-color:var(--dark);color:var(--white);
}
.p-mhlist__item--dark .p-mhlist__specs .c-spec{
  background:transparent;border-color:currentColor;color:var(--white);
}

/* 写真3点（全幅・Figma 518/390/528 + 2px） */
.p-mhlist__gallery{display:grid;grid-template-columns:518fr 390fr 528fr;gap:2px;height:547px}
.p-mhlist__gallery figure{margin:0;overflow:hidden}
.p-mhlist__gallery img{width:100%;height:100%;object-fit:cover;display:block}


/* ===================================================== モデルハウス詳細
   Figma 191:5955 高槻 / 439:9254 吹田 / 439:10444 京都山科（PC 1440）
        432:11294 / 439:9765 / 439:10955（SP 375）
   帯の並び（PC実測）: 見出し431 → 全幅写真716 → 本文 → スライダー564 →
   Model point(#f6f4f2) → Model information・YouTube(白) → Our Strengths(#f6f4f2) → Q&A → 予約フォーム
   ★このページの「白いパネル」は l-wrap ではなく 1390px（左右25pxだけ空ける額縁）。
     パネルの中身が 1200px（＝l-wrap）で、表・地図・動画だけ 1000px。 */

/* -- 見出し（英字＋「エリア名 種別」）Figma 208:3534 -- */
.l-pagehead--mh{padding-top:187px}
.l-pagehead--mh .l-pagehead__en{letter-spacing:.0224em}
.l-pagehead--mh .l-pagehead__ja{font-size:24px;font-weight:700;line-height:1.9;letter-spacing:.04em}
.l-pagehead--mh .l-pagehead__ja b{font-size:32px;font-weight:700}
.l-pagehead--mh .l-pagehead__ja span{font-size:18px;font-weight:700}
.l-pagehead--mh .c-crumb{margin-top:62px}

/* -- ヒーロー：全幅写真＋明朝の白コピー（Figma 208:3561 / 208:3602）
      コピーは上下中央より少し下（PC 284/716）。中央寄せに padding-top で下駄をはかせる。 -- */
.p-mhhero{position:relative;display:flex;align-items:center;aspect-ratio:1440/716;padding:14px 120px 0}
.p-mhhero>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
/* ★Figma には無いが、文字側だけに薄い暗幕を敷いている。
   写真は差し替え前提で、明るいカット（吹田の候補写真など）だと白文字が完全に飛ぶため。
   暗い写真ではほぼ見えない濃さにしてある。不要なら .p-mhhero::before ごと削除する。 */
.p-mhhero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.16) 34%,rgba(0,0,0,0) 62%);
}
.p-mhhero--right::before{transform:scaleX(-1)}
.p-mhhero__catch{
  position:relative;z-index:2;
  font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.5;letter-spacing:.03em;
  color:var(--white);text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.p-mhhero--right{justify-content:flex-end;text-align:right}

/* -- デザイン×高機能住宅（見出し＝ACF／本文＝クラシックエディタ） -- */
.p-mhintro{padding-top:100px}
.p-mhintro__head{border-left:1px solid #959595;padding-left:40px}
.p-mhintro__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-mhintro__sub{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-mhintro__body{margin-top:50px}
.p-mhintro__body p{margin:0;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-mhintro__body p+p{margin-top:1.8em}        /* Figma の段落あき＝空行1つぶん */
.p-mhintro__body img{height:auto}

/* 赤マーカー（エディタの「段落 › 赤マーカー」で付く c-mark）
   行の高さ(28.8px)ではなく Figma 実測の22pxで塗る＝背景画像で高さを指定する。
   折り返しても行ごとに塗るため box-decoration-break:clone。 */
.c-mark,.p-mhintro__body mark{
  color:var(--white);background-color:transparent;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 50%;background-size:100% 22px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.is-accent{color:var(--accent)}

/* -- 写真スライダー：中央1枚が大きく、左右は見切れる（Figma 208:3580）
      中央寄せは JS（data-slider-center）が translate に (viewport-slide)/2 を足す。 -- */
.p-mhslider{position:relative;margin-top:100px}
.p-mhslider .c-slider__track{--slider-gap:5px}
.p-mhslider__item{width:min(815px,56.6vw);aspect-ratio:815/564;margin:0}
.p-mhslider__item img{width:100%;height:100%;object-fit:cover;display:block}
.p-mhslider__nav{display:block;height:0}
.p-mhslider__nav button{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:39px;height:39px;border:0;background:rgba(255,255,255,.72);color:var(--text);
}
.p-mhslider__nav button:hover{background:var(--white);color:var(--text)}
.p-mhslider__nav .is-prev{left:81px}
.p-mhslider__nav .is-next{right:81px}
.p-mhslider__dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:10px}
.p-mhslider__dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.65)}
.p-mhslider__dots button.is-current{background:var(--accent)}

/* -- Model point -- */
.p-mhpoint{background:var(--bg-page);padding:100px 0}
.p-mhpoint__inner{width:min(100% - 50px,1390px);margin-inline:auto}
.p-mhpoint__head{width:min(100%,1000px);margin-inline:auto}
.c-sechead--mh{gap:23px}
.c-sechead--mh .c-sechead__ja{font-size:14px;font-weight:700;line-height:1.9;letter-spacing:.04em}
.c-sechead--center.c-sechead--mh{gap:0}
.p-mhpoint__intro{margin-top:40px;border-left:.5px solid #7a7a7a;padding-left:40px}
/* ★禁則処理。既定の line-break:auto は「ー」「っ」「ゃ」を行頭に送る（例：プライバシ／ーの確保）。
   strict で日本語の組版どおりになる。★全体(html)には当てないこと——幅の余裕が無い箇所
   （/estate/ の価格 dd、/about/ の .is-accent）で禁則が効くと逆に横へあふれる（2026-08-22 実測）。
   幅に余裕のあるモデルハウス詳細の本文まわりに限定して当てる。 */
.p-mhhero__catch,.p-mhintro__ttl,.p-mhintro__sub,.p-mhintro__body,
.p-mhpoint__ttl,.p-mhpoint__lead,.p-mhblock__ttl,.p-mhblock__txt,
.p-mhcard__ttl,.p-mhcard__txt,.p-mhqa__q,.p-mhqa__a,
/* ★リフォームの本文も幅に余裕がある（SP343/309px・PC1000px）ので禁則を当てる。
   当てないと「現地調査からアフタ／ーフォロー」のように長音符が行頭に来る（2026-08-22 実測）。 */
.p-rfreason__txt,.p-rftype__txt,.p-rfworry__lead,.p-rfplan__lead{line-break:strict}
.p-mhpoint__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.8;letter-spacing:.03em}
/* 黒い帯。★PCは「帯＝p」で1本につながる。SPは「帯＝span」に移して、改行ごとに独立した帯へ分かれる
   （Figma＝PC 208:3605 は1ノード／SP 432:11876+432:11992 は独立2ノードで各々に背景）。 */
.p-mhpoint__badge{
  margin-top:6px;display:inline-block;padding:4px 20px;background:var(--dark);color:var(--white);
  font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.p-mhpoint__badge span{display:inline}
.p-mhpoint__lead{margin-top:19px}
.p-mhpoint__lead p{margin:0;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-mhpoint__panel{margin-top:40px;background:var(--white);padding:60px min(95px,6.6vw)}

/* 大きい見どころ（01・02…）＝写真と文章が左右交互 */
.p-mhpoint__blocks{display:flex;flex-direction:column;gap:50px}
/* 列は fr で持つ（1440で 600:110:490）。px固定だと1200pxあたりで文章側が潰れる。 */
.p-mhblock{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,490fr);align-items:center;column-gap:110px}
.p-mhblock--rev{grid-template-columns:minmax(0,490fr) minmax(0,600fr)}
.p-mhblock--rev .p-mhblock__img{order:2}
.p-mhblock__img{position:relative;margin:0;aspect-ratio:600/413;overflow:hidden}
.p-mhblock__img img{width:100%;height:100%;object-fit:cover;display:block}
/* 数字は写真の右下（Figma実測：字面の右42px・下端ぴったり）。
   ★下の逃げは em で持つ。px固定にすると、狭い画面で字を小さくしたときだけ下が切れる。 */
.p-mhblock__no{
  position:absolute;right:42px;bottom:-.203em;line-height:1;color:var(--white);
  font-family:var(--f-num);font-size:128px;
}
.p-mhblock__no b{
  display:block;font-size:inherit;font-weight:300;line-height:1;letter-spacing:-.075em;
}
.p-mhblock__no i{
  position:absolute;left:.17em;top:34%;
  font-family:var(--f-num);font-style:normal;font-size:15px;font-weight:300;line-height:1;letter-spacing:.02em;
  white-space:nowrap;transform:translate(-50%,-50%) rotate(90deg);
}
.p-mhblock__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-mhblock__txt{margin-top:30px;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}

/* 小さい見どころ（03・04…）＝4列（Figma 284px×4・列間21.33） */
.p-mhcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:21px;row-gap:35px;margin-top:80px}
.p-mhcard__img{margin:0;aspect-ratio:284/176;overflow:hidden;background:var(--bg-soft)}
.p-mhcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.p-mhcard__head{display:flex;align-items:center;gap:20px;margin-top:20px}
.p-mhcard--badge .p-mhcard__head{gap:15px}
.p-mhcard__no{
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  width:56px;height:46px;padding-right:20px;border-right:.5px solid rgba(161,161,161,.73);
  font-family:var(--f-num);color:#bbb;
}
.p-mhcard__no i{font-style:normal;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.083em}
.p-mhcard__no b{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.031em}
.p-mhcard__badge{
  flex:none;padding:0 7px;background:var(--dark);color:var(--white);
  font-family:var(--f-mincho);font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.03em;white-space:nowrap;
}
.p-mhcard__ttl{font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.03em}
.p-mhcard__ttl small{display:block;font-size:16px;font-weight:600}
.p-mhcard__txt{margin-top:15px;font-size:16px;font-weight:500;line-height:1.7;letter-spacing:.04em}

/* -- Model information -- */
.p-mhinfo{padding-top:140px}
.p-mhinfo__inner{width:min(100% - 50px,1390px);margin-inline:auto}
.p-mhinfo__head{width:min(100%,1200px);margin-inline:auto}
.p-mhinfo__panel{margin-top:30px;background:var(--white);padding:80px 0}
.p-mhplans{width:min(100% - 40px,1200px);margin-inline:auto;display:flex;justify-content:space-between;gap:40px;align-items:flex-start}
.p-mhplans--single{justify-content:center}
.p-mhplan{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 1 577px;min-width:0}
.p-mhplan__label{
  padding:5px 30px;background:var(--dark);color:var(--white);
  font-size:14px;font-weight:700;line-height:1.9;letter-spacing:.04em;
}
/* ★比率の決め打ち（577/256）をやめた（建売と同じ直し・2026-09-04）。
   Figma の1枚の実寸を全拠点に当てていたので、比率の違う図面が枠のなかで縮んでいた。
   実測：吹田2F（928×666）は 577×256 の枠に 357×256 しか描かれず、横の38%が空いていた。
   図面は切ると意味が変わるので cover にはせず、原寸の比率のまま枠いっぱいに出す。
   ★1Fと2Fで下端は揃わなくなる（比率が違うので当然）。ラベルの位置を揃えるため上寄せにしてある。 */
.p-mhplan img{width:100%;height:auto;display:block}
.p-mhspec{width:min(100% - 40px,1000px);margin:60px auto 0;border:1px solid #b3b3b3;background:var(--white)}
.p-mhspec__row{display:grid;grid-template-columns:239px minmax(0,1fr)}
.p-mhspec__row dt{
  display:flex;align-items:center;min-height:62px;padding:8px 10px 8px 29px;
  background:var(--dark);border:.5px solid #7b7b7b;color:var(--white);
  font-size:14px;font-weight:700;line-height:1.9;letter-spacing:.04em;
}
.p-mhspec__row dd{
  display:flex;align-items:center;margin:0;min-height:62px;padding:15px 30px;
  border-bottom:.5px solid #b3b3b3;
  font-size:14px;font-weight:500;line-height:1.9;letter-spacing:.04em;
}
.p-mhspec__row:last-child dd{border-bottom:0}
.p-mhmap{width:min(100% - 40px,1000px);margin:40px auto 0;aspect-ratio:1000/390;background:#d9d9d9}
.p-mhmap iframe{width:100%;height:100%;border:0;display:block}

/* -- YouTube -- */
.p-mhyt{padding:20px 0 40px}
.p-mhyt__inner{width:min(100% - 50px,1390px);margin-inline:auto}
.p-mhyt__head{width:min(100%,1200px);margin-inline:auto}
.p-mhyt__panel{margin-top:30px;padding:80px 0}
.p-mhyt__movie{width:min(100% - 40px,1000px);margin-inline:auto;aspect-ratio:1000/545;background:#d9d9d9}
.p-mhyt__movie iframe{width:100%;height:100%;border:0;display:block}

/* -- Our Strengths（3つのカード＋ベン図はトップページと同じ値を使う） -- */
.p-mhstr{background:var(--bg-page);padding:100px 0}
.p-mhstr__head{text-align:center}
.p-mhstr__ttl{margin-top:42px;font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.8;letter-spacing:.03em}
.p-mhstr__lead{margin-top:6px;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-mhstr__grid{margin-top:60px;gap:0 92px}
.p-mhrep{display:flex;align-items:center;gap:40px;margin-top:100px;border-left:1px solid #000;padding-left:30px}
.p-mhrep__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.8;letter-spacing:.03em;white-space:nowrap}
.p-mhrep__ttl b{font-size:32px;font-weight:600;color:var(--accent)}
.p-mhrep__txt{max-width:560px;font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-mhrep__imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.p-mhrep__imgs figure{margin:0;aspect-ratio:1/1;overflow:hidden}
.p-mhrep__imgs img{width:100%;height:100%;object-fit:cover;display:block}

/* -- Q&A（3拠点共通・サイト共通設定から） -- */
.p-mhqa{padding:120px 0}
.p-mhqa__head{text-align:center}
.p-mhqa__list{margin-top:40px}
.p-mhqa__q,.p-mhqa__a{display:flex;align-items:center;margin:0}
.p-mhqa__q{gap:14px;padding:10px 20px;background:var(--dark);color:var(--white)}
.p-mhqa__a{gap:15px;padding:20px;background:var(--bg-page)}
.p-mhqa__q i,.p-mhqa__a i{
  flex:none;font-family:var(--f-en);font-style:normal;font-size:32px;font-weight:600;line-height:1.2;letter-spacing:.013em;
}
.p-mhqa__a i{color:var(--accent)}
.p-mhqa__q span{font-size:16px;font-weight:700;line-height:1.9;letter-spacing:.04em}
.p-mhqa__a span{font-size:14px;font-weight:500;line-height:1.9;letter-spacing:.04em}

/* -- 予約フォーム（イベント詳細と同じ部品。上に細い罫線が入るのが違い） -- */
.p-evform--mh{padding-top:120px;border-top:1px solid #bebebe}


/* ======================================================= 施工事例 一覧
   Figma 231:2337（PC 1440）/ 432:12685（SP 375。フレームの見出しが「Real Estate 建売土地情報」のまま＝複製の消し残り）
   しぼり込み行 y491（見出しの罫線＝431 から60px）／カード 390x432・画像 390x266・段間60px・列間15px */
.p-wkfilter{padding-top:60px}
.p-wkfilter__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 60px}
.p-wkfilter__item{
  padding:5px 0;border-bottom:1px solid transparent;
  font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.04em;color:#8e8e8e;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.p-wkfilter__item:hover{color:var(--text)}
.p-wkfilter__item.is-current{color:var(--text);border-bottom-color:#afafaf}

.p-wklist{padding:60px 0 140px}
.p-wklist__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 15px}
.p-wkcard__thumb{aspect-ratio:390/266;overflow:hidden;background:var(--bg-soft)}
.p-wkcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s var(--ease)}
.p-wkcard__link:hover .p-wkcard__thumb img{opacity:.88}
.p-wkcard__body{margin-top:20px}
/* 種別バッジ（白地・線・ピル）。未設定の事例では出ないので、余白は隣接セレクタで持つ。 */
.p-wkcard__badge span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 22px;border:1px solid #5d5d5d;border-radius:100px;background:var(--white);
  font-size:12px;font-weight:500;line-height:1.8;letter-spacing:.04em;
}
.p-wkcard__ttl{
  padding-bottom:10px;border-bottom:.5px solid #636363;
  font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em;
}
.p-wkcard__badge+.p-wkcard__ttl{margin-top:10px}
.p-wkcard__specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.p-wkcard__spec{display:flex;align-items:center;gap:10px;flex:none;max-width:100%}
.p-wkcard__spec dt{
  flex:none;padding:1px 12px;background:#6d6d6d;color:var(--white);
  font-size:12px;font-weight:500;line-height:1.8;white-space:nowrap;
  letter-spacing:0;   /* Figmaのラベル幅は72px＝字間0。body既定の.06emが乗ると76pxになる */
}
.p-wkcard__spec dd{margin:0;font-size:12px;font-weight:500;line-height:1.8;white-space:nowrap}

/* ===================================================== 施工事例 詳細
   Figma 231:2329（PC 1440）/ 432:13318（SP 375。フレーム名が「モデルハウス紹介_高槻_SP」のまま＝複製の消し残り）
   ヒーロー y452（罫線から21px）／タイトル y1316／DATE y1421／本文 y1701／写真＋文章 y1917〜／Highlight y4382〜 */
.p-wkdt__hero{margin-top:21px;aspect-ratio:1440/764}
.p-wkdt__hero img{width:100%;height:100%;object-fit:cover;display:block}
.p-wkdt__top{padding:100px 0}
.p-wkdt__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.8;letter-spacing:.1em}

/* DATE（左4行・右3行。空欄の行は出さないので、行数が変わっても崩れないよう列は固定幅で持つ） */
.p-wkdate{display:flex;align-items:flex-start;gap:60px;margin-top:40px;padding:30px;background:var(--bg-page)}
.p-wkdate__en{
  flex:none;width:55px;text-align:center;
  font-family:var(--f-en);font-size:20px;font-weight:500;line-height:1.2;letter-spacing:.0715em;
}
.p-wkdate__cols{display:grid;grid-template-columns:repeat(2,minmax(0,345px));gap:50px}
.p-wkdate__col{margin:0}
.p-wkdate__row{display:flex;align-items:center;gap:30px;padding:10px 0;border-bottom:.5px solid #b3b3b3}
.p-wkdate__row:last-child{border-bottom:0}
.p-wkdate__row dt{
  flex:none;width:83px;border-right:.5px solid #7b7b7b;
  font-size:13px;font-weight:500;line-height:1.9;letter-spacing:.04em;
}
.p-wkdate__row dd{margin:0;font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.04em}

.p-wkdt__lead{margin-top:40px;font-size:16px;line-height:1.8}
.p-wkdt__lead p{font-size:16px;line-height:1.8;letter-spacing:.04em}

/* 写真＋文章（左右交互）。px固定にすると901〜1180pxで文章側が潰れるので比率＋gap px で持つ。 */
.p-wkblocks{padding:60px 0;background:var(--bg-page)}
.p-wkblock{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,490fr);gap:0 110px;align-items:start}
.p-wkblock--rev{grid-template-columns:minmax(0,490fr) minmax(0,600fr)}
.p-wkblock--rev .p-wkblock__img{order:2}
.p-wkblock--rev .p-wkblock__body{order:1}
.p-wkblock+.p-wkblock{margin-top:70px}
/* ★写真は切り抜かず、入れたものをそのままの比率で出す（2026-09-01）。
   これまでは 600x413 に aspect-ratio + object-fit:cover で切り抜いていたため、
   「文章のある行だけトリミングされる／写真だけの行はされない」という食い違いが出ていた。 */
.p-wkblock__img{background:var(--bg-soft)}
.p-wkblock__img img{width:100%;height:auto;display:block}
/* ★2枚以上のときだけ自動で切り替わるスライド。枠は1枚目の実寸比率（インラインで指定）。
   中は contain＝比率の違う写真を混ぜても絶対に切り取らない。 */
.p-wkblock__img--slide{position:relative;overflow:hidden}
.p-wkblock__img--slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity 1s var(--ease);
}
.p-wkblock__img--slide img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .p-wkblock__img--slide img{transition:none}
}
.p-wkblock__body{padding-top:44px}
/* 写真だけの行（移植した事例に多い）。Figmaの600/413で切り抜くと縦写真が壊れるので比率はそのまま */
.p-wkblock--photo .p-wkblock__img{aspect-ratio:auto}
.p-wkblock--photo .p-wkblock__img img{height:auto}
.p-wkblock__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-wkblock__txt{margin-top:30px;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}

/* Highlight こだわりポイント（3列。番号はテンプレ側で自動採番） */
.p-wkpoints{padding:100px 0}
.p-wkpoints__head .c-sechead{align-items:flex-end;gap:23px}
.p-wkpoints__head .c-sechead__ja{font-size:14px;font-weight:700;line-height:1.9;letter-spacing:.04em}
.p-wkpoints__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 39px;margin-top:40px}
.p-wkpoint__img{aspect-ratio:374/232;overflow:hidden;background:var(--bg-soft)}
.p-wkpoint__img img{width:100%;height:100%;object-fit:cover;display:block}
.p-wkpoint__head{display:flex;align-items:center;gap:20px;margin-top:20px}
.p-wkpoint__num{
  flex:none;width:56px;padding-right:20px;border-right:.5px solid rgba(161,161,161,.73);
  font-family:var(--f-en);color:#bbb;text-align:center;
}
.p-wkpoint__num span{display:block;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.083em}
.p-wkpoint__num b{display:block;font-size:32px;font-weight:600;line-height:.9;letter-spacing:-.031em}
.p-wkpoint__ttl{font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-wkpoint__txt{margin-top:20px;font-size:16px;font-weight:500;line-height:1.7;letter-spacing:.04em}

.p-wkdt__back{display:flex;justify-content:center;padding-top:40px}

/* その他の施工事例＝トップの Works と同じ部品。大きさと文字だけ変える。
   ★SP側（~900px）で .p-work__* を1クラスで再宣言しているため、
     ここで足した2クラスの上書きは SP でも勝ってしまう。メディアクエリ内に必ず打ち消しを書くこと。 */
.p-works--other{padding:100px 0 0}
.p-works--other .c-sechead__en{font-size:46px}
.p-works--other .p-works__lead{font-family:var(--f-mincho);font-size:18px;line-height:1.9;letter-spacing:.04em}
.p-works--other .p-works__list{gap:9px}
.p-works--other .p-work{aspect-ratio:475/630}
.p-works--other .p-work__body{padding:0 33px 56px}
.p-works--other .p-work__ttl{font-size:32px;font-weight:700;line-height:1.8;line-break:strict}
.p-works--other .p-work__tags{margin-top:20px;padding-right:120px;font-size:14px;line-height:1.9}
.p-works--other .p-work__tags svg{width:25px;height:25px}
.p-works--other .p-work__more{right:32px;bottom:21px;font-size:14px}
.p-works--other .p-work__more i{width:23px;height:23px}

/* モデルハウス／イベントの2枚バナー（Figma 235:4512・596x273・暗幕53%） */
.p-bnr2{padding:140px 0}
.p-bnr2__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.p-bnr2__item{position:relative;display:block;overflow:hidden;aspect-ratio:596/273;color:var(--white);background:var(--dark)}
.p-bnr2__item>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease)}
.p-bnr2__item:hover>img{opacity:.9}
.p-bnr2__item::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.53)}
.p-bnr2__txt{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.p-bnr2__en{font-family:var(--f-en);font-size:40px;font-weight:700;line-height:1.7}
.p-bnr2__ja{font-size:16px;font-weight:700;line-height:1.9;letter-spacing:.04em}
.p-bnr2__arrow{
  position:absolute;right:24px;bottom:14px;z-index:1;
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--white);border-radius:50%;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.p-bnr2__arrow::before{
  content:"";width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg) translate(-.5px,.5px);
}
.p-bnr2__item:hover .p-bnr2__arrow{background:var(--white);color:var(--text)}


/* ================================================= 建売・土地情報 一覧
   Figma 208:1563 / 208:2818（PC 1440・トグルの2状態）/ 428:7284（SP 375）
   トグル y491（見出しの罫線=431 から60px・192x54×2）／しぼり込み y587／カード y683・390x446 */
.p-estoggle{padding-top:60px}
.p-estoggle__inner{display:flex;justify-content:center}
.p-estoggle__item{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:192px;height:54px;background:#eee;color:#8e8e8e;
  font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.06em;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.p-estoggle__item i{
  position:absolute;right:20px;top:50%;width:5px;height:5px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
/* 一覧トップは「建売も土地も」＝どちらも選ばれていない状態になる（デザインには無い状態）。
   薄いまま2つ並ぶと1本の帯に見えるので、境目に細い線を入れて2択と分かるようにしている。 */
.p-estoggle__item+.p-estoggle__item{border-left:1px solid #dcdad8}
.p-estoggle__item.is-current+.p-estoggle__item,
.p-estoggle__item:has(+.p-estoggle__item.is-current){border-left-color:transparent}
.p-estoggle__item:hover{background:#e2e0de;color:var(--text)}
.p-estoggle__item.is-current{background:var(--dark);color:var(--white)}
/* しぼり込み行は施工事例と同じ部品（.p-wkfilter）。トグルの下は42px。 */
.p-esfilter{padding-top:42px}

.p-eslist{padding:60px 0 140px}
.p-eslist__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 15px}
/* ★一覧のサムネイルも同じ（2026-09-04）。切らずに枠に収める。 */
.p-escard__thumb{aspect-ratio:390/266;overflow:hidden;background:var(--bg-soft)}
.p-escard__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.p-escard__body{margin-top:20px}
.p-escard__ttl{font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.04em}
.p-escard__specs{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}
.p-escard__spec{display:flex;align-items:center;gap:15px;flex:none;max-width:100%}
.p-escard__spec dt{
  flex:none;padding:1px 12px;background:#6d6d6d;color:var(--white);
  font-size:12px;font-weight:500;line-height:1.8;white-space:nowrap;letter-spacing:0;
}
.p-escard__spec dd{margin:0;font-size:12px;font-weight:500;line-height:1.8;white-space:nowrap}
.p-escard__more{display:flex;justify-content:flex-end;margin-top:7px;font-size:14px}
.p-escard__more i{width:23px;height:23px}

/* ================================================= 建売・土地情報 詳細
   Figma 208:3187（PC 1440）/ 428:8614（SP 375）
   写真526＋余白92＋情報602／CTA y1078／Plan y1238／Equipment y2197／Access y3034／Similar y4329 */
.p-esdt__top{display:grid;grid-template-columns:minmax(0,526fr) minmax(0,602fr);gap:0 72px;align-items:start;padding-top:70px}

/* -- 写真（サムネイルで差し替え。スライダーではない） -- */
/* ★枠の比率は1枚目の実寸（--gal-ar）。中身は contain＝切らない（2026-09-04）。
   526/396 の決め打ち＋cover だと、1200×800 のメインビジュアルが左右で11%欠けていた。
   物件のメインビジュアルは文字の入ったマイソクなので、切ると情報が消える。 */
.p-esgal__main{position:relative;aspect-ratio:var(--gal-ar,526/396);overflow:hidden;background:var(--bg-soft)}
.p-esgal__main img{width:100%;height:100%;object-fit:contain;display:block}
.p-esgal__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  display:grid;place-items:center;width:31px;height:31px;
  background:rgba(255,255,255,.85);border-radius:50%;
  transition:background-color .3s var(--ease);
}
.p-esgal__arrow::before{
  content:"";width:7px;height:7px;
  border-top:1px solid var(--text);border-right:1px solid var(--text);
}
.p-esgal__arrow.is-prev{left:11px}
.p-esgal__arrow.is-prev::before{transform:rotate(-135deg) translate(-1px,-1px)}
.p-esgal__arrow.is-next{right:11px}
.p-esgal__arrow.is-next::before{transform:rotate(45deg) translate(-1px,-1px)}
.p-esgal__arrow:hover{background:var(--white)}
.p-esgal__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:15px}
.p-esgal__thumb{aspect-ratio:98/96;overflow:hidden;border:2px solid transparent;background:var(--bg-soft)}
.p-esgal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.p-esgal__thumb.is-current{border-color:var(--accent)}

/* -- 物件概要（右） -- */
/* 見出し・タグ・表と、右上の黒いボックスを2列のグリッドで並べる。
   ★絶対配置にすると、見出しが1行で終わった物件だけ黒いボックスが表に重なる。 */
.p-esinfo{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start}
.p-esinfo__head{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:3px;max-width:381px}
.p-esinfo__ttl{font-family:var(--f-mincho);font-size:32px;font-weight:600;line-height:1.8;letter-spacing:.03em}
.p-esinfo__catch{font-family:var(--f-mincho);font-size:14px;line-height:1.8;letter-spacing:.03em}
.p-esinfo__tags{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* 角丸ピル（施工事例カードのバッジと同じ形） */
.c-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 22px;border:1px solid #5d5d5d;border-radius:100px;background:var(--white);
  font-size:12px;font-weight:500;line-height:1.8;letter-spacing:.04em;
}
.p-estable{grid-column:1/-1;grid-row:3;margin-top:25px;border-bottom:.5px solid #b3b3b3}
.p-estable__row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:stretch}
.p-estable__row dt{
  display:flex;align-items:center;min-height:47px;padding:8px 10px 8px 29px;
  background:var(--bg-page);border:.5px solid #b3b3b3;border-bottom:0;
  font-size:14px;font-weight:500;line-height:1.9;letter-spacing:.04em;
}
.p-estable__row dd{
  display:flex;align-items:center;margin:0;padding:10px 20px;
  border:.5px solid #b3b3b3;border-left:0;border-bottom:0;
  font-size:14px;font-weight:500;line-height:1.9;letter-spacing:.04em;
}
/* 価格（黒いボックス）＝概要表の右上に重ねる */
/* ★Figma 208:3187 の実測＝箱174×88・左右padding16px で「ラベルも数字も左寄せ」。
     実装はPCだけ中央寄せだった（SP用CSSは元から左寄せ＝PCが取り残されていた）。 */
.p-esprice{
  grid-column:2;grid-row:1/span 2;justify-self:end;align-self:start;margin-top:65px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-width:174px;padding:8px 16px;background:var(--dark);color:var(--white);text-align:left;
}
.p-esprice__label{font-size:14px;font-weight:500;line-height:1.9;letter-spacing:.04em}
.p-esprice__num{display:flex;align-items:baseline;gap:4px}
.p-esprice__num b{font-family:var(--f-num);font-size:40px;font-weight:400;line-height:1.3;letter-spacing:.01em}
.p-esprice__num span{font-size:20px;font-weight:700;line-height:1.9}

/* ★Trustindexのウィジェットが描けたときだけ従来スライダー／矢印を隠す。
     JSで判定するまでは隠しておき、描けなかったら is-ti-hidden を外して戻す（parts/front-review.php）。 */
.is-ti-hidden{display:none!important}

/* -- 資料請求／お問い合わせ（角丸ピルのボタン） -- */
.p-esdt__cta{display:flex;justify-content:center;gap:19px;padding-top:70px}
.c-pillbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:299px;height:70px;border-radius:999px;
  font-size:16px;font-weight:500;letter-spacing:.06em;color:var(--white);
  transition:opacity .3s var(--ease);
}
.c-pillbtn img{width:20px;height:20px}
.c-pillbtn:hover{opacity:.82}
.c-pillbtn--dark{background:var(--dark)}
.c-pillbtn--accent{background:var(--accent)}

/* -- Plan（間取り図）＋ Point -- */
.p-esplan{margin-top:90px;padding:80px 0;background:var(--bg-page)}
.p-esplan__panel{margin-top:30px;padding:57px;background:var(--white)}
.p-esplan__figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:40px;align-items:start}
.p-esplan__figs figure{margin:0}
/* ★高さの決め打ち（165px）をやめた（「間取り・区画が小さい」2026-09-04）。
   165px 固定＋contain だと、1600×1000 の区画図が枠 423×165 のなかで
   264×165 にしか描かれず、列幅 423px の 6割しか使えていなかった。
   図面は切ると意味が変わるので cover にはせず、原寸の比率のまま枠いっぱいに出す。 */
.p-esplan__figs img{width:100%;height:auto;display:block}
/* 1点だけのときは横に広がりすぎないように上限をつける */
.p-esplan__figs--single{max-width:640px;margin-inline:auto}

/* -- 図面の拡大ボタン（建売の間取り図・モデルハウスの間取り図で共用） --
   ボタン＝図面そのもの。hover拡大はしない（クリックで原寸モーダル）。 */
.c-zoombtn{
  display:block;width:100%;padding:0;border:0;background:none;
  position:relative;cursor:zoom-in;
}
.c-zoombtn img{display:block;width:100%;height:auto}
.c-zoombtn__tag{
  position:absolute;right:10px;bottom:10px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 28px;border-radius:999px;
  background:rgba(26,26,26,.72);color:var(--white);
  font-size:12px;letter-spacing:.06em;line-height:1;
  transition:background .3s var(--ease)
}
.c-zoombtn__tag::before{
  content:"";position:absolute;left:11px;top:50%;margin-top:-5.5px;
  width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;
}
.c-zoombtn__tag::after{
  content:"";position:absolute;left:19px;top:50%;margin-top:2px;
  width:4px;height:1.5px;background:currentColor;transform:rotate(45deg);
}
.c-zoombtn:hover .c-zoombtn__tag,
.c-zoombtn:focus-visible .c-zoombtn__tag{background:var(--accent)}

/* -- 図面の拡大モーダル（JSが body 直下に作る） --
   ★position:fixed の包含ブロックを奪われないよう、節の中には置かない。 */
.c-zoom{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.c-zoom[hidden]{display:none}
/* ★.86 だと後ろの大見出しと地図が透けて図面が読みにくい＝ほぼ不透明にする */
.c-zoom__scrim{position:absolute;inset:0;background:rgba(26,26,26,.94);border:0;padding:0;cursor:zoom-out}
.c-zoom__panel{position:relative;max-width:min(1400px,100%);max-height:100%}
/* ★スマホは画面に収めただけでは図面が読めない（366px＝一覧とほぼ同じ）。
   図をもう一度押すと原寸まで開き、この枠のなかを指でなぞって見られるようにする。 */
.c-zoom__body{
  max-width:100%;max-height:calc(100vh - 48px);
  overflow:auto;-webkit-overflow-scrolling:touch;background:var(--white)
}
.c-zoom__img{
  display:block;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:calc(100vh - 48px);cursor:zoom-in
}
.c-zoom--full .c-zoom__img{max-width:none;max-height:none;width:var(--zw,100%);cursor:zoom-out}
.c-zoom__hint{
  position:absolute;left:10px;bottom:10px;margin:0;
  padding:5px 12px;border-radius:999px;
  background:rgba(26,26,26,.72);color:var(--white);
  font-size:12px;letter-spacing:.06em;line-height:1;pointer-events:none
}
.c-zoom__close{
  position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(26,26,26,.72);cursor:pointer
}
.c-zoom__close::before,.c-zoom__close::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;
  background:var(--white)
}
.c-zoom__close::before{transform:rotate(45deg)}
.c-zoom__close::after{transform:rotate(-45deg)}
.c-zoom__close:hover{background:var(--accent)}
body.is-zoom{overflow:hidden}
/* 開いている間は追従UIを引っ込める（モーダルの上に重ならないように） */
body.is-zoom .l-fixnav,body.is-zoom .c-pagetop,body.is-zoom .l-header{opacity:0;pointer-events:none}
.p-esplan__txt{margin-top:40px;font-size:14px;line-height:1.8;letter-spacing:.04em;text-align:center}
.p-espoint{margin-top:40px}
.p-espoint__ttl{font-family:var(--f-en);font-size:28px;font-weight:600;line-height:1.35;letter-spacing:.01em;color:var(--accent)}
.p-espoint__list{margin-top:15px}
.p-espoint__list li{display:flex;align-items:flex-start;gap:16px;padding:7px 0;font-size:14px;line-height:1.8;letter-spacing:.04em}
.p-espoint__list i{
  position:relative;flex:none;width:14px;height:14px;margin-top:.42em;
}
.p-espoint__list i::before{
  content:"";position:absolute;left:0;top:2px;width:12px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* -- Equipment（設備・仕様）／周辺環境 で共用する3列グリッド -- */
.c-photogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 35px}
.c-photogrid__img{aspect-ratio:310/187;overflow:hidden;background:var(--bg-soft)}
.c-photogrid__img img{width:100%;height:100%;object-fit:cover;display:block}
.c-photogrid__txt{margin-top:20px;font-size:14px;line-height:1.8;letter-spacing:.04em}
.p-esequip{padding:100px 0}
.p-esequip__grid{margin-top:30px}

/* -- Access（地図）＋ 周辺環境 -- */
/* ★Access の上に余白（PCのみ・2026-09-04）。
   直前の Plan（背景 #f6f4f2）と Access（白）は背景色が変わる境界なのに、上の余白が0だった。
   設備・仕様が入る物件では、その padding-bottom:100px と二重になるので下で相殺する。 */
.p-esaccess{padding-top:100px;padding-bottom:100px}
.p-esequip + .p-esaccess{padding-top:0}
.p-esaccess__map{margin-top:10px;aspect-ratio:1000/490;background:var(--bg-soft)}
.p-esaccess__map iframe{width:100%;height:100%;border:0;display:block}
.p-esaround__ttl{margin-top:100px;font-size:24px;font-weight:700;line-height:1.6;letter-spacing:.06em;text-align:center}
.p-esaround__grid{margin-top:50px}

/* -- Similar property（トップの Real Estate と同じスライダー部品） -- */
.p-estate--similar{padding:80px 0;background:var(--bg-page)}
.p-estate--similar .p-estate__head{margin-bottom:36px}
.p-estate--similar .p-estate__ttl{margin:16px 0 12px}
.p-estate--similar .p-escard__more{margin-top:12px}

/* -- 見学予約フォーム（イベント詳細と同じ部品） -- */
.p-evform--es{padding-top:100px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ------------------------------------------------- ~1440px（可変縮小） */
@media (max-width:1439px){
  /* ★ヘッダーは Figma の1440幅ぴったりで組まれていて左右の余白が32pxしかない。
       1440未満では ロゴ281＋メニュー7項目＋資料請求/お問い合わせ が入りきらず右端が画面外に出る
       （position:fixed なので横スクロールバーは出ず、切れていることに気づけない）。
       ナビに「建売土地情報」を足して更に106px増えたので、この幅帯を詰める。 */
  .l-header{padding:19px 24px}
  .l-header.is-stuck{padding:20px 24px}
  .l-header__logo{width:240px}
  .l-header__right{gap:22px}
  .l-header__nav{gap:24px}
  .l-header__menu{gap:14px}
  .l-header__cta{gap:12px}
  .l-header__cta-sep{height:32px}

  .p-concept__inner{grid-template-columns:minmax(0,1fr) minmax(0,52%);gap:0 40px}
  .p-points__grid{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:0 48px}
  /* ★この幅ではカードの列が狭くなるのに写真と番号の列がPCのままだと、
     本文の幅が半分以下になって行数が倍になる（＝カードが極端に縦長になる）。両端を詰める。 */
  .p-point{grid-template-columns:64px minmax(0,1fr) 120px;min-height:150px}
  .p-point__body{padding:16px}
  .p-point__ttl{font-size:18px}
  .p-point__txt{font-size:13px}
  .p-points__venn{--vw:.86}
  .p-mh__block,.p-mh__block--rev{grid-template-columns:minmax(0,1fr) minmax(0,38%)}
  .p-mh__block--rev{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  .p-mh__block--light{margin-right:32px}
  .p-mh__block--dark{margin-left:32px}
  .l-footer__top{grid-template-columns:240px minmax(0,1fr) auto;gap:0 30px}
  .l-footer__mid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:0 40px}
  .l-footer__logo{width:240px}
}

/* ------------------------------------ ~1180px（ヘッダーをバーガーへ） */
/* ------------------------------------------------- ~1280px（ヘッダーのCTAを落とす） */
@media (max-width:1279px){
  /* ★ここから下は「資料請求／お問い合わせ」を並べるとグローバルナビが画面外に出る。
       追従ヘッダー(is-stuck)と下層ページ(is-solid)では元から非表示だし、
       ドロワーと画面下の追従ナビにも同じ導線があるので、FV上でだけ落とす。 */
  .l-header__cta{display:none}
}

@media (max-width:1180px){
  .l-header{padding:16px var(--side)}
  .l-header.is-stuck{padding:14px var(--side)}
  .l-header__menu{display:none}
  .l-header__nav{gap:20px}
  .l-fixnav{display:none}
  .p-concept__en{font-size:52px}
  /* PCが64pxになったので中間幅も引き上げる（64 → 52 → 34） */
  .c-sechead__en,.c-sechead--center .c-sechead__en{font-size:52px}
  .p-reform__en{font-size:40px}
  .p-mh__body{padding:40px}
  .p-mh__catch{font-size:20px}
  .p-estate__item{width:340px}
  .p-staff__item{width:260px}
  /* -- イベント詳細 -- */
  .p-evdt__hero{gap:0 60px}
  .p-evdt__intro{padding-top:60px}
  .p-evrec__list{padding:40px}
  .p-evov__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0 40px}
  .p-evform__en{font-size:52px}
  .p-catalog__head{font-size:28px}
  .p-catalog__img{width:44%}
  .l-wrap--mh{padding-left:calc(var(--side) + 40px);padding-right:var(--side)}
  .p-mhlist__head{grid-template-columns:203px minmax(0,1fr) auto;column-gap:40px}
  .p-mhlist__name{font-size:32px;column-gap:10px;width:max-content;max-width:235px}
  .p-mhlist__name span{font-size:20px}
  .p-mhlist__catch{font-size:20px}
  .p-mhlist__gallery{height:38vw}
  /* -- モデルハウス詳細（PCの狭い側。SPレイアウトは900px以下） -- */
  .p-mhhero{padding-inline:60px}
  .p-mhhero__catch{font-size:30px}
  .p-mhintro__ttl{font-size:30px}
  .p-mhintro__sub{font-size:20px}
  .p-mhblock{column-gap:50px}
  .p-mhblock__ttl{font-size:20px}
  .p-mhblock__txt{font-size:15px}
  .p-mhblock__no{font-size:100px}
  .p-mhcards{column-gap:16px}
  .p-mhcard__head{gap:12px}
  .p-mhcard--badge .p-mhcard__head{gap:10px}
  .p-mhcard__no{width:48px;padding-right:14px}
  .p-mhcard__no b{font-size:28px}
  .p-mhcard__badge{font-size:14px}
  .p-mhcard__ttl{font-size:18px}
  .p-mhcard__ttl small{font-size:14px}
  .p-mhcard__txt{font-size:15px}
  .p-mhplan{flex:1 1 0}
  .p-mhrep{gap:24px}
  .p-mhrep__ttl{font-size:22px}
  .p-mhrep__ttl b{font-size:28px}
}

/* --------------------------------------------- ~900px（SPレイアウト） */
@media (max-width:900px){
  :root{
    --side:var(--side-sp);
    --sec:var(--sec-sp);
  }
  .u-pc{display:none}
  .u-sp{display:block}
  body{font-size:15px}

  /* ------------------------------------------- SP＝画面下の追従CTAバー
     Figma `125:2101`「WF_追従」（TOP_SP `125:1357` の中）。全ページに出す。
     マークアップはPCの右side追従ナビ（header.php の .l-fixnav）を流用し、SPだけ横並びの下部バーに組み替える。
     Figma実測：高さ48px／背景 #292625／3等分／2・3番目の左に .5px rgba(255,255,255,.84)／
               アイコン22px／ラベル11px Noto Sans JP Medium。
     ★PC用の登場アニメ（opacity:0 / visibility:hidden / translateX(16px)）を打ち消さないと出てこない。
     ★ドロワー(.l-drawer z-index:99・不透明・inset:0)がこのバー(z-index:90)を覆うので、開いている間は自動で隠れる。 */
  .l-fixnav{
    display:flex;flex-direction:row;
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:48px;
    background:#292625;
    opacity:1;visibility:visible;transform:none;
  }
  .l-fixnav a{
    flex:1 1 0;flex-direction:row;gap:5px;
    width:auto;height:48px;border-bottom:0;
    font-size:11px;font-weight:500;line-height:1.4;letter-spacing:0;
  }
  /* 仕切りは見た目の2・3番目の左に。order で入れ替えても「DOMの先頭以外」＝「見た目の先頭以外」なので成立する */
  .l-fixnav a+a{border-left:.5px solid rgba(255,255,255,.84)}
  .l-fixnav svg{width:22px;height:22px;flex:0 0 auto}
  /* ★「リフォーム/リノベ」は改行させず1行で出す（2026-08-22）。
     Figma `125:2124` は2行だが、実機で見て1行がよいという判断。
     header.php の <br> はPCの縦積みナビで使うので消さず、SPだけ無効化する。 */
  .l-fixnav br{display:none}
  .l-fixnav a{white-space:nowrap}
  /* Figmaの並び＝モデルハウス / リフォーム・リノベ / お問い合わせ。
     header.php は モデルハウス / お問い合わせ / リフォーム なので、SPだけ2番目と3番目を入れ替える（PCは触らない）。 */
  .l-fixnav a:nth-child(2){order:3}
  .l-fixnav a:nth-child(3){order:2}
  /* バーがページ最下部（フッター）を覆わないよう、その高さぶん本文を伸ばす */
  body{padding-bottom:48px}
  /* ★お問い合わせページは追従ボタン不要（2026-08-22）。余白も戻す。 */
  body.page-template-page-contact .l-fixnav{display:none}
  body.page-template-page-contact{padding-bottom:0}
  body.page-template-page-contact .c-pagetop{bottom:14px}

  /* -- 共通部品 -- */
  .c-btn{min-width:186px;padding:14px 24px;font-size:13px}
  .c-sechead{flex-direction:column;align-items:flex-start;gap:4px}
  .c-sechead__en,.c-sechead--center .c-sechead__en{font-size:34px}
  .c-sechead--center{align-items:center}
  .c-sechead__ja{font-size:12px}
  /* ★SPはFigma実測（118:4291-4294）＝円29px・stroke .5px・間隔9px・シェブロン5×9 */
  .c-nav{gap:9px}
  .c-nav button{width:29px;height:29px;border-width:.5px}
  .c-nav button::before{width:6px;height:10px}
  .c-nav button.is-prev{--arw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23000' stroke-width='.5'><path d='M5.5 0.5L0.5 5L5.5 9.5'/></svg>")}
  .c-nav button.is-next{--arw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23000' stroke-width='.5'><path d='M0.5 0.5L5.5 5L0.5 9.5'/></svg>")}
  .c-slider{--slider-gap:14px}

  /* -- ヘッダー -- */
  .l-header{padding:15px var(--side)}
  .l-header.is-stuck{padding:12px var(--side)}
  .l-header__logo{width:200px}
  .l-header__cta{display:none}
  .l-header__burger{width:32px;height:16px}
  .l-header__burger span:nth-child(2){top:7px}
  .l-header__burger span:nth-child(3){top:14px}
  .l-header__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(21deg)}
  .l-header__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-21deg)}
  /* SP: 写真を上に積む（Figma 125:2323） */
  /* auto 行は align-content:stretch で余白を分配され、写真行が伸びて上に隙間ができる */
  .l-drawer{grid-template-columns:minmax(0,1fr);grid-template-rows:337px auto;align-content:start}
  .l-drawer__photo{height:337px}
  .l-drawer__info{transform:none;padding-inline:16px}
  .l-drawer__logo{width:min(258px,72vw)}
  .l-drawer__hqname{margin-top:36px;font-size:15px}
  .l-drawer__hqaddr{margin-top:10px;font-size:14px}
  .l-drawer__hqaddr span{display:inline}
  .l-drawer__hqaddr span+span{margin-left:.6em}
  .l-drawer__tel{margin-top:16px}
  .l-drawer__tel b{font-size:26px}
  .l-drawer__hours{margin-top:8px}
  .l-drawer__body{padding:40px var(--side) 34px;align-items:flex-start}
  .l-drawer__inner{max-width:none}
  .l-drawer__nav{grid-template-columns:auto auto;justify-content:space-between;gap:0 20px}
  .l-drawer__nav a{white-space:normal}
  .l-drawer__nav>ul{gap:29px}
  /* ★ ベースの .l-drawer__nav>ul / li セレクタと同じ強さで打ち消す（class1つでは負ける） */
  .l-drawer__nav>ul.l-drawer__pc-only,
  .l-drawer__nav li.l-drawer__pc-only{display:none}
  .l-drawer__nav li.l-drawer__sp-only{display:block}
  .l-drawer__sub a{padding-left:18px}
  .l-drawer__rule{display:none}
  .l-drawer__cta{flex-direction:column;gap:10px;margin-top:70px}
  .l-drawer__btn{width:100%;height:87px}
  /* SPは お問い合わせ → 資料請求 の順（Figma） */
  .l-drawer__btn--mail{order:1}
  .l-drawer__btn--doc{order:2}
  .l-drawer__util{justify-content:center;margin-top:70px}

  /* -- FV -- */
  /* ★SPのファーストビューは動画を画面いっぱいに見せる（2026-08-22）。
     Figma（TOP_SP 116:3134 の FV は 375×645＝下にコンセプト節の頭が覗く）から**意図的に外している**。
     dvh はアドレスバーの伸縮に追従して常にちょうど1画面。svh→vh は古い実装向けの段階フォールバック。
     コピーは top:34% の比率指定、バッジ(bottom:80px)と SCROLL(bottom:0) は下端基準なので、
     高さを変えるだけで3つとも自動で追従する（main.js の veil/gray も fv.offsetHeight 実測なので影響なし）。 */
  .p-fv{height:100vh;min-height:520px}
  @supports (height:100svh){ .p-fv{height:100svh} }
  @supports (height:100dvh){ .p-fv{height:100dvh} }
  /* ★SPはコピーが画面の中ほど（top:34%）＝下からの帯では届かない。
     中央帯を濃くした縦グラデにする。濃さ .55 は PC と同じやり方で実測して出した最小値。 */
  .p-fv--video::before{
    background:linear-gradient(to bottom,
      rgba(23,25,20,0) 0%, rgba(23,25,20,.177) 14%, rgba(23,25,20,.55) 30%,
      rgba(23,25,20,.55) 60%, rgba(23,25,20,.195) 82%, rgba(23,25,20,0) 100%);
  }
  .p-fv__copy{
    left:0;right:0;top:34%;text-align:center;padding-inline:var(--side);
  }
  /* ★Figma実測（145:1013-1016）＝36px・行送り46px（＝line-height 1.28）・「を、」は32px。
     `.p-fv__l2{margin-top:-21.6px}` はPC(48px・行間60px)用の補正なので、SPでは必ず打ち消す。
     残すと行送りが29pxまで詰まる（2026-08-22）。 */
  .p-fv__l1{font-size:36px;line-height:1.28;letter-spacing:.03em}
  .p-fv__l1 small{font-size:32px}
  .p-fv__l2{font-size:36px;line-height:1.28;padding-left:0;margin-top:0;letter-spacing:.03em}
  .p-fv__sub{padding-left:0;font-size:14px;letter-spacing:.04em;margin-top:14px}
  .p-fv__vertical{display:none}
  .p-fv__badges{
    left:0;right:0;bottom:76px;justify-content:center;gap:9px;padding-inline:var(--side);
  }
  .p-fv__scroll{font-size:11px;gap:6px}
  .p-fv__scroll::after,.p-fv__scroll::before{height:40px}
  /* バッジ行ごと等比縮小（デザインSP=375幅で約309pxの3個並び）
     ※ scale() の引数は「単位なしの数値」。calc(100vw/481) は長さになり無効＝
        transform ごと破棄されて横に溢れるので、係数はブレークポイントで持つ。 */
  .p-fv__badges{
    --fvb:.70;
    right:auto;left:50%;bottom:80px;width:481px;padding-inline:0;justify-content:center;
    transform:translateX(-50%) scale(var(--fvb));
    transform-origin:center bottom;
  }

  /* -- Concept -- */
  /* ★SPも透過グラデ（Figma SP 実測：コンセプトの背景 645〜1630、ポイント 1405〜。
       中身の下端は1362＝ポイント節の43px上。重なりは225px、フェードは120px）。
       ★PCの -231px / 278px をそのまま効かせると、SPでは本文とView moreを159px覆う（実測で踏んだ）。 */
  .p-concept{padding:60px 0 268px}
  .p-concept__inner{grid-template-columns:minmax(0,1fr);gap:34px}
  .p-concept__en{font-size:44px}
  .p-concept__rule{margin:12px 0 10px}
  .p-concept__body{padding-top:0}
  .p-concept__body p{font-size:14.5px;line-height:1.95;margin-bottom:20px}
  .p-concept__cta{margin-top:40px;text-align:center}
  .p-concept .c-btn{min-width:224px;padding:16px 24px}

  /* -- 3つの良いとこ取り -- */
  .p-points{
    margin-top:-225px;padding:80px 0 60px;
    background:linear-gradient(180deg,rgba(242,240,238,0) 0,var(--bg-soft) 120px,var(--bg-soft) 100%);
  }
  .p-points__lead{font-size:15px}
  .p-points__lead::after{width:150px}
  /* ★Figma実測（144:898）＝24px / leading 1.49 / tracking -0.96px(=-.04em) / 「3」は32px。
     letter-spacing が +.04em（PC継承）のままだと1行に2文字ぶん入らず「3」だけが1行目に落ちる。 */
  .p-points__ttl{font-size:24px;line-height:1.49;letter-spacing:-.04em}
  .p-points__ttl b{font-size:32px;letter-spacing:-.04em}
  .p-points__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .p-point{grid-template-columns:56px minmax(0,1fr) 96px;min-height:132px}
  .p-point__no b{font-size:26px}
  .p-point__no i{width:22px}
  .p-point__body{padding:14px}
  .p-point__ttl{font-size:17px}
  .p-point__txt{font-size:12px}
  .p-points__venn{--vw:.55;margin-inline:auto}
  /* ★Figma実測：1行目 `144:896`＝13px/lh1.7、2行目 `144:990`＝18px/lh1.5（どちらもNoto Sans JP Bold・中央）。
     PCの 18px/24px がSPに残っていて大きすぎた。2行目の改行位置はFigmaが明示改行なので ｜ で指定する。 */
  .p-points__foot{margin-top:36px}
  .p-points__foot1{font-size:13px;line-height:1.7}
  .p-points__foot2{font-size:18px;line-height:1.5}

  /* -- Event -- */
  .p-event{padding:var(--sec) 0}
  .p-event__head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .p-event__head .c-btn{display:none}
  /* ★イベントの左右矢印はスマホだけ（PCは View more ボタンが出るので不要）。Figma 118:4296 */
  .p-event__nav{display:inline-flex}
  .p-event__list{
    display:flex;gap:20px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--side)*-1);padding-inline:var(--side);
    /* ★これが無いと scroll-snap が padding-inline を食って、1枚目が画面左端に貼り付く
       （初期 scrollLeft が padding ぶんズレる）。横スライドを作ったら必ずセットで入れる。 */
    scroll-padding-inline:var(--side);
    scrollbar-width:none;
  }
  .p-event__list::-webkit-scrollbar{display:none}
  .p-event__list>*{flex:0 0 min(296px,78vw);scroll-snap-align:start}
  .p-event__foot{display:flex;justify-content:center;margin-top:34px}

  /* -- Model House -- */
  .p-mh{padding:var(--sec) 0 0}
  .p-mh__head{margin-bottom:26px}
  .p-mh__sub{font-size:13px}
  .p-mh__block,.p-mh__block--rev{grid-template-columns:minmax(0,1fr);min-height:0}
  /* SPは帯が全幅（PCの64pxの余白と写真のはみ出しはPCだけの型） */
  .p-mh__block--light,.p-mh__block--dark{margin-left:0;margin-right:0}
  .p-mh__block+.p-mh__block{margin-top:34px}
  .p-mh__block--rev .p-mh__gallery,.p-mh__block--rev .p-mh__body{order:initial}
  /* SPも同じく流す（横スクロールではなく自動送り） */
  .p-mh__gallery{height:auto;min-height:0;overflow:hidden}
  .p-mh__strip{position:static;gap:2px;height:auto}
  .p-mh__strip figure{height:auto;aspect-ratio:262/287}
  .p-mh__strip figure:nth-child(3n+1),
  .p-mh__strip figure:nth-child(3n+2),
  .p-mh__strip figure:nth-child(3n+3){width:min(262px,70vw)}
  .p-mh__body{padding:26px var(--side) 34px}
  /* ★PCの `.p-mh__block--rev .p-mh__body{padding-left:56px;padding-right:80px}`（671行）は
     詳細度(0,2,0)が上のCSSなので、SPで `.p-mh__body`(0,1,0) だけ書いても**勝てない**。
     結果、暗いカード（吹田・京都山科＝--rev）だけ左56px・右80pxのままだった（2026-08-22）。
     同じ詳細度で明示的に打ち消す。 */
  .p-mh__block--rev .p-mh__body{padding-left:var(--side);padding-right:var(--side)}
  .p-mh__name{font-size:22px}
  .p-mh__name span{font-size:16px}
  /* ★Figma実測（118:4334/4336/4343）：名前＋スペック帯の下から キャッチまで 20px。
     直前は31px空いていた。下マージンを 14px→3px にして 20px に合わせる（上12pxは維持）。 */
  .p-mh__specs{margin:12px 0 3px}
  .c-spec{min-width:82px;padding:6px 12px;font-size:11px}
  .p-mh__rule{margin-bottom:16px}
  .p-mh__catch{font-size:19px;line-height:1.8}
  /* ★Figma実測（118:4346）＝14px / line-height 1.8 / Noto Sans JP Medium。12pxは小さすぎた。 */
  .p-mh__txt{font-size:14px;line-height:1.8}
  .p-mh__body .c-btn{margin-top:24px}

  /* -- Works --（Figma 118:5120：見出し中央／カード343x452／CTA中央） */
  .p-works{padding:var(--sec) 0}
  .p-works__head{flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:30px}
  .p-works__head .c-sechead{align-items:center;gap:4px}
  .p-works__lead{max-width:240px;margin-inline:auto;font-size:16px;line-height:1.6;letter-spacing:.05em}
  .p-works__list{grid-template-columns:minmax(0,1fr);gap:10px;padding-inline:var(--side)}
  .p-work{aspect-ratio:343/452}
  .p-work__body{padding:20px 16px 16px}
  /* ★SPも大きく（2026-09-01）。PCの32pxをカード幅比で移すと 32×343/475＝23.1px。 */
  .p-work__ttl{font-size:23px;line-height:1.7}
  .p-work__tags{padding-right:0;margin-top:12px;font-size:11px}
  /* ★view more はカード右下（Figma 118:4680＝カード343x455に対し右19px・下14px、丸18.2px）。
     position:static にすると、.p-work__body が絶対配置なので view more だけが
     カードの「上」へ流れてしまう＝右上に矢印が浮く（2026-08-31・会社概要SPの崩れ）。
     本文の下余白でタグ行との重なりを避ける（Figma：タグ行の下端はカード下から46px）。 */
  .p-work__body{padding-bottom:46px}
  .p-work__more{
    position:absolute;right:19px;bottom:14px;z-index:2;
    display:inline-flex;margin-top:0;font-size:11px;gap:6px;
  }
  .p-work__more i{width:18px;height:18px}
  .p-work__more i::before{width:9px}
  .p-work__more i::after{width:5.5px;height:5.5px;transform:translate(calc(-50% + 1px),-50%) rotate(45deg)}
  .p-works__foot{margin-top:40px}

  /* -- Real Estate -- */
  .p-estate{padding:var(--sec) 0}
  .p-estate__head{margin-bottom:22px}
  .p-estate__nav{position:static;display:flex;justify-content:center;margin-top:14px}
  .p-estate__head{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:30px}
  .p-estate__item{width:271px}
  .p-estate__foot{display:block}
  .p-estate__foot .c-arrow{display:flex;justify-content:flex-end;margin-top:12px}
  .p-estate__more{margin-top:36px}

  /* -- Reform -- */
  .p-reform{padding:66px 0 54px}
  .p-reform__inner{display:flex;flex-direction:column;gap:22px}
  .p-reform__inner>*{display:contents}
  .p-reform__en{order:1;font-size:34px}
  .p-reform__ja{order:2;font-size:14px;margin-top:14px}
  .p-reform__strip{order:3;margin-top:0}
  .p-reform__photos{order:3}
  .p-reform__catch{order:4}
  .p-reform__txt{order:5}
  .p-reform__cta{order:6;margin-top:4px}
  .p-reform__photos{gap:6px;margin-bottom:18px}
  .p-reform__catch{font-size:14px}
  .p-reform__txt{font-size:12px;line-height:1.95}

  /* -- Q&A -- */
  .p-qa{padding:var(--sec) 0}
  .p-qa__head{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:22px}
  .p-qa__head .c-sechead__en{font-size:30px}
  .p-qa__grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .p-qa__cats{grid-column:1;grid-row:1}
  .p-qa__list{grid-column:1;grid-row:2}
  .p-qa__cta{grid-column:1;grid-row:3;align-self:auto}
  .p-qa__cats{flex-direction:row;flex-wrap:wrap;gap:10px 18px;font-size:12px}
  .p-qa__cta{margin-top:26px;display:flex;justify-content:center}
  .p-qa__list a{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 2px}
  .p-qa__cat{border:0;padding:0;text-align:left;font-size:11px}
  .p-qa__t{white-space:normal;font-size:13px;line-height:1.7}
  .p-qa__date{font-size:11px}

  /* -- Staff -- */
  .p-staff{padding:var(--sec) 0}
  .p-staff__lead{font-size:18px;margin-top:16px}
  .p-staff__sub{font-size:12px}
  .p-staff__nav{position:static;display:flex;justify-content:center;margin-top:14px}
  .p-staff .c-slider{margin-top:24px}
  .p-staff__item{width:214px;padding-inline:8px}
  .p-staff__photo{width:170px}
  .p-staff__name{font-size:15px}
  .p-staff__name span{display:block;margin:2px 0 0}
  .p-staff__foot{margin-top:30px}

  /* -- Reviews --（Figma 121:1086：見出し左・矢印右・下に罫線） */
  .p-review{padding:var(--sec) 0}
  .p-review__head{
    text-align:left;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:30px;
  }
  .p-review__head .c-sechead{flex-direction:row;align-items:baseline;gap:12px}
  .p-review__nav{position:absolute;right:0;top:8px;margin-top:0}
  .p-review__item{width:288px}
  .p-review__card{aspect-ratio:288/193}
  .p-review__foot{margin-top:34px}

  /* -- バナー --（Figma SP 121:909 / 248:2453。全幅・中央寄せ） */
  .p-banners{padding-bottom:var(--sec)}
  .p-banners .l-wrap{width:100%;gap:40px}
  .p-banner{container-type:normal}

  /* Performance 375x245：中央寄せ */
  .p-banner--perf{aspect-ratio:375/245}
  /* ★SPのカンプ(121:909)は写真が実装より28%暗い（空・道路・塀の3か所で一致）。
     1-(1-.42)(1-.28)=.58。PCの .42 は確認済み(2026-08-21)なのでSPだけ上書きする。 */
  .p-banner--perf::after{background:rgba(26,26,26,.58)}
  /* ★Figma 121:913 の「Performance」は 212px 幅。34px だと 228.9px＝17px 太る（2026-09-01）。
     34 x 212/228.9 = 31.5px で幅が一致し、中央寄せの左端も 81px でカンプと合う。 */
  .p-banner--perf .p-banner__en{
    left:0;right:0;top:11.8%;text-align:center;font-size:31.5px;
  }
  /* ★和文は Figma 121:912 で y=80.7px（英字の箱の下）。25.7%＝63px だと
     「Performance」に重なる（2026-08-31・SPのバナー崩れ）。 */
  .p-banner--perf .p-banner__ja{left:0;right:0;top:32.9%;text-align:center;font-size:13px}
  .p-banner--perf .p-banner__rule{left:8%;top:49.4%;width:84.3%}
  .p-banner--perf .p-banner__catch{left:0;right:0;top:55.1%;text-align:center;font-size:17px}
  /* ★タグは「4つを1行」＋「etc... は次の行の右」（Figma 121:916 の中は4つで、
     etc...(121:914) は別ノードとして右下に置かれている）。5つを1行に詰めるとカンプと違う。 */
  .p-banner--perf .p-banner__tags{
    left:5.07%;right:6.13%;top:69%;
    flex-wrap:wrap;justify-content:center;row-gap:2px;font-size:11px;white-space:normal;
  }
  .p-banner--perf .p-banner__tags span{padding-inline:10px}   /* Figma 121:917 ほか＝枠の内側10px */
  .p-banner--perf .p-banner__tags span:nth-child(4):not(:last-child){border-right:1px solid rgba(255,255,255,.55)}
  /* タグが5つ以上のときだけ、最後の1つ（etc...）を次の行の右端へ落とす */
  /* Figma 121:914 の etc... は右端が332px（タグ枠の右端352pxより20px内側）＝W断熱の真下 */
  .p-banner--perf .p-banner__tags span:last-child:nth-child(n+5){
    flex-basis:100%;text-align:right;padding-inline:0 20px;
  }
  /* ★矢印は「丸＋→」。SPで ::before(軸・高さ1px)を 6x6 にしていたため白い四角になり、
     ::after(山型)は cqw 指定のままでSPでは約2px＝見えなかった。pxで組み直す（Figma 121:937＝22.3x23.4）。 */
  .p-banner--perf .p-banner__arrow{left:auto;right:2.31%;top:87.3%;width:23px;height:23px}
  .p-banner--perf .p-banner__arrow::before{width:9px;height:1px}
  .p-banner--perf .p-banner__arrow::after{
    width:4px;height:4px;transform:translate(calc(-50% + 3px),-50%) rotate(45deg);
  }

  /* Recruit 375x386：写真212px＋下に暗い帯 */
  .p-banner--recruit{aspect-ratio:375/386}
  .p-banner--recruit .p-banner__photos{inset:0 0 auto 0;height:54.92%}
  .p-banner--recruit .p-banner__photos img:nth-child(1){left:0;width:34.13%;clip-path:polygon(0 0,100% 0,81.25% 100%,0 100%)}
  .p-banner--recruit .p-banner__photos img:nth-child(2){left:27.73%;width:40.53%;clip-path:polygon(15.79% 0,100% 0,86.84% 100%,0 100%)}
  .p-banner--recruit .p-banner__photos img:nth-child(3){left:62.93%;width:37.07%;clip-path:polygon(14.39% 0,100% 0,100% 100%,0 100%)}
  .p-banner--recruit::after{top:54.66%;background:rgba(26,26,26,.55)}
  .p-banner--recruit .p-banner__en{left:15.73%;top:39.38%;font-size:40px}
  .p-banner--recruit .p-banner__ja{left:65.07%;top:47.15%;font-size:14px}
  .p-banner--recruit .p-banner__catch{left:0;right:0;top:61.4%;text-align:center;font-size:17px}
  .p-banner--recruit .p-banner__btn{
    left:11.47%;top:74.09%;width:76.8%;height:16.84%;font-size:14px;
  }

  /* -- Instagram --（Figma 121:942：縦長タイル2列＋下部CTA） */
  .p-insta{padding:60px 0 60px}
  .p-insta__head{flex-direction:column;gap:0;margin-bottom:30px}
  .p-insta__head>.c-btn{display:none}
  .p-insta__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .p-insta__item{aspect-ratio:167.5/208.3}
  .p-insta__foot{display:flex;justify-content:center;margin-top:40px}

  /* -- イベント一覧 -- */
  .p-archive--event{padding-top:40px}
  .p-eventgrid{grid-template-columns:minmax(0,1fr);gap:40px}
  .p-eventgrid .p-event__ttl{margin:16px 0 12px;font-size:15px}

  /* -- ニュース/Q&A -- */
  .p-archive--qa{padding-top:40px}
  .c-tabs{gap:8px 16px;margin-bottom:40px;font-size:13px}
  .c-tabs a{min-width:0;height:26px;padding:0 12px}
  .c-newsitem{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:24px}
  .c-newsitem+.c-newsitem{padding-top:24px}
  .c-newsitem__body{padding-top:16px}
  .c-newsitem__meta{gap:16px;font-size:12px}
  .c-newsitem__cat{padding-inline:14px}
  .c-newsitem__ttl{margin-top:12px;font-size:17px}
  .c-newsitem__excerpt{margin-top:12px;font-size:13px}

  .p-single{padding:60px 0 100px}
  .p-single__ttl{font-size:21px}
  .p-single__eyecatch{margin-top:20px}
  .p-single__foot{margin-top:80px}
  .c-entry{margin-top:32px;font-size:14px;line-height:1.86}
  .c-entry h2{margin-top:40px;font-size:19px;padding-left:18px}
  .c-entry h3{margin-top:32px;font-size:17px;padding-left:18px}
  .c-entry p{font-size:14px;line-height:1.86}
  .c-entry blockquote{padding:20px}

  /* -- アーカイブ/スタッフ --（Figma 421:3830 / 421:4557） */
  .p-archive{padding:60px 0 100px}
  .c-role{min-width:74px;height:22px;font-size:12px}
  .c-pager{margin-top:80px}
  .c-pager a,.c-pager span{min-width:24px;height:24px;font-size:15px}

  /* SPは6タブが1行に収まらず「バックオフィス」だけ2行目に落ちる（430px以下）。
     パンくず（.c-crumb）と同じ作法で、折り返さず横に流す。画面端まで届かせるため
     l-wrap の左右余白を打ち消してから同じぶんだけ内側に入れる。 */
  .p-stafffilter .p-wkfilter__inner{
    flex-wrap:nowrap;justify-content:flex-start;gap:0 21px;
    margin-inline:calc(var(--side-sp) * -1);padding-inline:var(--side-sp);
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .p-stafffilter .p-wkfilter__inner::-webkit-scrollbar{display:none}
  .p-stafffilter .p-wkfilter__item{flex:none;white-space:nowrap}
  .p-stafffilter + .p-archive{padding-top:40px}
  .p-staffgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 21px}
  .c-staffcard__photo{aspect-ratio:161/212}
  .c-staffcard__body{padding-top:15px}
  .c-staffcard__name{margin-top:5px;display:block;font-size:18px}
  .c-staffcard__name span{display:block;margin-top:2px;font-size:11px}
  .c-staffcard__more{margin-top:10px}

  .p-staff-single{padding-top:60px}
  .p-staff-single__main{grid-template-columns:minmax(0,1fr);gap:30px}
  .p-staff-single__photo{aspect-ratio:343/460}
  .p-staff-single__mark{margin-left:0}
  .p-staff-single__mark img{width:120px}
  .p-staff-single__catch{margin-top:-20px;font-size:19px;line-height:1.8}
  .p-staff-single__profile{margin-top:30px;padding:24px 0 18px}
  .p-staff-single__license{font-size:13px}
  .p-staff-single__name{margin-top:10px;font-size:25px;gap:12px}
  .p-staff-single__name span{font-size:13px}
  .p-staff-single__lead{margin-top:24px;font-size:13px}
  .p-staff-single__panels{margin-top:50px;gap:20px}
  .p-staffpanel{padding:24px 20px}
  .p-staffpanel__head{flex-wrap:wrap;gap:8px 16px}
  .p-staffpanel__en{font-size:19px}
  .p-staffpanel__rule{display:none}
  .p-staffpanel__ja{font-size:13px;width:100%}
  .p-staffpanel__body{margin-top:18px;font-size:13px}

  .p-otherstaff{padding-top:100px}
  .p-otherstaff__head{align-items:center}
  .p-otherstaff__ttl{flex-direction:column;align-items:flex-start;gap:2px;font-size:32px}
  .p-otherstaff__ttl span{font-size:13px}
  .p-otherstaff__slider{margin-top:40px;--slider-gap:24px}
  .p-otherstaff__item{width:200px}
  .p-otherstaff__photo{width:200px}
  .p-otherstaff__role{bottom:-12px;min-width:80px;height:26px;font-size:12px}
  .p-otherstaff__name{margin-top:28px;font-size:18px;gap:10px}
  .p-otherstaff__name span{font-size:12px}
  .p-otherstaff__foot{margin-top:36px;padding-bottom:100px}

  /* -- 下層ヘッダー --（Figma 464:5240） */
  .l-pagehead{padding-top:129px}
  .l-pagehead__en{font-size:34px;line-height:1}
  .l-pagehead__ja{margin-top:3px;font-size:13px;line-height:1.77}
  /* ★スマホは折り返さず横スライド（2026-08-22）。
     長いページ名で2行になると見出しの位置が動くので、1行のまま横に流す。
     画面端まで届かせたいので、l-wrap の左右余白を打ち消してから同じぶんだけ内側に入れる。 */
  .c-crumb{
    margin-top:43px;padding-bottom:8px;font-size:12px;
    flex-wrap:nowrap;justify-content:flex-start;
    margin-inline:calc(var(--side-sp) * -1);padding-inline:var(--side-sp);
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .c-crumb::-webkit-scrollbar{display:none}
  .c-crumb>*{flex:none}
  .c-crumb a,.c-crumb>span{white-space:nowrap}
  .c-crumb__sep{width:8px;height:8px}
  .c-crumb__sep::before{width:5px;height:5px;left:1px}

  /* -- 文章ページ -- */
  .p-page{padding:60px 0 100px}
  .p-page p,.p-page li,.p-page address{font-size:14px;line-height:1.71}
  .p-page h2{margin-top:40px;padding:15px 0 14px;font-size:18px;line-height:1.72}
  .p-page h2+*{margin-top:20px}

  /* -- サンクス --（Figma 421:3734） */
  .p-thanks{padding:140px 0 80px}
  .p-thanks__inner{width:min(100% - var(--side)*2, 343px)}
  .p-thanks__en{font-size:50px;line-height:.82}
  .p-thanks__txt{margin-top:81px;font-size:14px;line-height:1.786}
  .p-thanks__txt+.p-thanks__txt{margin-top:25px}
  .p-thanks__note{margin-top:50px;font-size:12px}
  .p-thanks .c-btn--back{margin-top:80px}

  /* -- 404 --（Figma 421:3262） */
  .p-404{padding:140px 0 80px}
  .p-404__num{font-size:50px;line-height:.82}
  .p-404__en{margin-top:16px;font-size:24px;line-height:1.04;letter-spacing:.08em}
  .p-404__txt{margin-top:40px}
  .p-404 .c-btn--back{margin-top:80px;min-width:253px}

  /* -- Footer -- */
  /* --- フッター（SP）: Figma 434:15524（375x1484）の実測どおり。
     ★PCと違うのは4点：①全部【左揃え】（中央揃えではない）②【上段の下の罫線が無い】
     ③プライバシーポリシーとInstagramは上段ではなく【ボタンの下・中央】
     ④ボタンの並びが逆（お問い合わせ→資料請求）。
     ③はDOM上 __util が __top の中にあるので、l-wrap を縦のflexにして order で並べ替えている。 */
  .l-footer{padding:60px 0 58px}
  .l-footer .l-wrap{display:flex;flex-direction:column}
  .l-footer__top{display:contents}
  .l-footer__logo{order:1;width:269px;margin-top:0}
  .l-footer__hq{order:2;margin-top:49px}
  .l-footer__tel{order:3;margin-top:29px}
  .l-footer__rule{display:none}
  .l-footer__mid{order:5;grid-template-columns:minmax(0,1fr);gap:58px;margin-top:45px}
  .l-footer__util{order:6;justify-content:center;margin-top:61px}
  .l-footer__copy{order:7;margin-top:30px}
  .l-footer__hq address{font-size:13px}
  .l-footer__hq address span{display:inline}
  .l-footer__hq address span+span{margin-left:.75em}
  .l-footer__tel a{justify-content:flex-start}
  .l-footer__offices{gap:48px}
  .l-footer__nav{grid-template-columns:229px minmax(0,1fr);row-gap:0}
  .l-footer__nav>ul:nth-child(1){grid-column:1;grid-row:1}
  .l-footer__nav>ul:nth-child(2){grid-column:2;grid-row:1}
  .l-footer__nav>ul:nth-child(3){grid-column:1;grid-row:2;margin-top:20px}
  .l-footer__nav ul{gap:20px}
  .l-footer__cta{flex-direction:column;gap:11px;margin-top:59px;justify-content:stretch}
  .l-footer__cta a{width:100%;height:87px;font-size:17px}
  /* SPだけボタンの並びが逆 */
  .l-footer__cta a:first-child{order:2}
  /* ★下部CTAバー(48px)と重なるので、その上へ逃がす（14+48=62px） */
  .c-pagetop{right:14px;bottom:62px;width:42px;height:42px}

  /* -- イベント詳細 --（Figma 428:6738） */
  .c-cta{min-width:307px;gap:30px}
  .p-evdt__crumb{padding-top:127px}
  .p-evdt__hero{grid-template-columns:minmax(0,1fr);gap:0;margin-top:48px}
  .p-evdt__flyer{aspect-ratio:343/452}
  .p-evdt__intro{padding-top:52px;text-align:left}
  .p-evdt__ttl{padding-bottom:0;border-bottom:0;font-size:22px;line-height:1.6}
  .p-evdt__lead{margin-top:40px;font-size:14px}
  .p-evdt__cta{display:flex;width:307px;max-width:100%;margin:40px auto 0}

  .p-evrec{margin-top:80px;padding:40px 0}
  .p-evrec__en{font-size:24px}
  .p-evrec__ja{font-size:14px}
  .p-evrec__list{padding:20px 4px}
  .p-evrec__item{gap:14px;padding:0 10px 20px}
  .p-evrec__check{width:20px;height:20px}
  .p-evrec__item span{font-size:14px}

  .p-evdt__body{padding-top:60px}
  .c-entry--event{font-size:14px}
  .c-entry--event>*+*{margin-top:24px}
  .c-entry--event p{font-size:14px}
  /* SPも写真の前後を広く（PCの60pxをSPの本文サイズに合わせて40px） */
  .c-entry--event>figure{margin-top:40px}
  .c-entry--event>figure+*{margin-top:40px}
  .c-entry--event h3{margin-top:32px;font-size:18px}
  .c-entry--event h3+p{margin-top:20px}

  .p-evov{margin-top:80px;padding:40px 0}
  .p-evov__grid,.p-evov--nomap .p-evov__grid{grid-template-columns:minmax(0,1fr);gap:40px 0}
  .p-evov__list{padding:24px 20px}
  .p-evov__map{aspect-ratio:343/214}

  .p-evpr{margin-top:60px}
  .p-evpr__box{display:flex;flex-direction:column;gap:20px;padding:44px 14px}
  .p-evpr__body{width:100%}
  .p-evpr__img{position:static;order:-1;width:100%;height:auto;aspect-ratio:303/175}
  .p-evpr__head{gap:7px;align-items:flex-end;padding-bottom:5px}
  .p-evpr__en{font-size:32px}
  .p-evpr__ja{font-size:14px}
  .p-evpr__lead{font-size:20px}
  .p-evpr__note{font-size:14px}
  .p-evpr__wrap::before{left:-27px;top:-32px;width:165px;height:165px}
  .p-evpr__wrap::after{right:-41px;bottom:-22px;width:132px;height:132px}

  .p-evform{padding:80px 0 100px}
  .p-evform__head{text-align:left}
  .p-evform__en{font-size:40px}
  .p-evform__ja{font-size:13px}
  .p-evform__note{text-align:left}
  .p-evform__body{margin-top:40px}

  /* フォーム：ラベルを入力欄の上に積む */
  .c-form__row{grid-template-columns:minmax(0,1fr);gap:11px 0;padding-bottom:35px}
  .c-form__label{min-height:0;font-size:14px}
  .c-form input[type="text"],
  .c-form input[type="email"],
  .c-form input[type="tel"],
  .c-form select,
  .c-form textarea{height:45px}
  .c-form textarea{height:165px}
  .c-form__field--date{flex-direction:column}
  .c-form__field--date .wpcf7-form-control-wrap{width:261px}
  .c-form__field--checks{padding-top:0}
  .c-form__field--checks .wpcf7-checkbox{gap:21px 19px;padding-left:21px}
  .c-form__btn .wpcf7-submit{width:287px;height:62px;padding-right:44px}
  .c-form__btn::after{right:59px;width:15px}
  .c-form__btn::before{right:64px}   /* 山型の中心＝軸の右端+5px */

  /* -- 写真ヘッダー --（Figma 421:3392）
     ★ .l-pagehead{padding-top:129px} がこの下（メディアクエリ内）にあり、同詳細度で後勝ちするため、
        --photo の打ち消しもここで書き直す必要がある。書かないと帯が258px分伸びる。 */
  .l-pagehead--photo{padding-top:0}
  .l-pagehead--photo .l-pagehead__inner{padding:129px 0 71px}
  .l-pagehead--photo .l-pagehead__en{font-size:40px;line-height:1.2}
  .l-pagehead--photo .l-pagehead__ja{margin-top:3px;font-size:13px;line-height:1.8}
  .l-pagehead--photo .c-crumb{bottom:10px}

  /* -- お問い合わせ -- */
  .c-telbox__link{gap:4px}
  .c-telbox__icon{width:23px;height:23px}
  .c-telbox__num{font-size:32px}

  .p-contact{padding-top:60px}
  .p-contact__intro{padding-bottom:0;border-bottom:0}
  .p-contact__lead{width:min(100%,269px);margin-inline:auto;font-size:14px;line-height:1.7}
  .p-contact__intro .c-telbox{margin-top:25px}
  .p-contact__form{margin-top:60px}

  .p-contactex{margin-top:80px;padding-bottom:80px}
  .p-contactex__box{padding:40px 20px}
  .p-contactex__inner{text-align:left}
  .p-contactex__ttl{font-size:18px;line-height:1.5;padding-bottom:5px}
  .p-contactex__txt{margin-top:15px;letter-spacing:-.05em}
  .p-contactex__mail{display:inline-flex;margin-top:20px;padding:8px 10px;font-size:16px}
  .p-contactex__tel{margin-top:30px}
  .p-contactex__telnote{font-size:14px}
  .p-contactex__tel .c-telbox{margin-top:20px;text-align:left}
  /* パネル右端に半分かかる位置（Figma実測：パネル右端から17px外・下から17px） */
  .p-contactex__watermark{left:auto;right:-17px;top:auto;bottom:17px;font-size:32px}

  /* -- 資料請求 --（Figma 432:15032） */
  .p-catalog{padding-top:60px}
  .p-catalog__intro{flex-direction:column;align-items:center;gap:0;padding-inline:0;text-align:center}
  .p-catalog__head{font-size:20px}
  .p-catalog__body{padding-left:0}
  .p-catalog__head2{margin-left:0}
  .p-catalog__note{margin-top:23px;font-size:13px}
  .p-catalog__img{width:312px;max-width:100%}
  .p-catalog__form{margin-top:80px}
  .p-catalog__tel{margin-top:80px;padding-top:40px}
  .p-catalog__tellead{font-size:14px}
  .p-catalog__tel .c-telbox{margin-top:25px}
  .p-catalog .p-contactex{margin-top:60px}

  /* -- モデルハウス一覧 --（Figma 428:10083） */
  .l-wrap--mh{
    width:min(100% - var(--side)*2, var(--wrap));margin-inline:auto;
    padding-left:0;padding-right:0;
  }
  .p-mhlist__item{padding-top:60px}
  .p-mhlist__item:first-child{padding-top:60px}
  .p-mhlist__item--dark{padding-bottom:37px}
  .p-mhlist__head{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:40px}
  /* SPは1カラムなので幅の制限を外す（縦組の判定はPC/タブレットだけ） */
  .p-mhlist__name{order:1;font-size:32px;white-space:normal;width:auto;max-width:none;column-gap:10px}
  .p-mhlist__name span{font-size:20px}
  /* PCの justify-self/align-self:end が flex では右寄せになるので戻す */
  .p-mhlist__specs{order:2;margin-top:16px;align-self:flex-start;justify-self:auto}
  .p-mhlist__copy{order:3;margin-top:16px}
  .p-mhlist__catch{font-size:22px}
  .p-mhlist__btn{order:4;margin-top:40px}
  /* 写真は［1枚全幅］＋［2枚並び］ */
  .p-mhlist__gallery{grid-template-columns:390fr 528fr;gap:1px;height:auto}
  .p-mhlist__gallery figure{height:155px}
  .p-mhlist__gallery figure:first-child{grid-column:1 / -1;height:220px}

  /* ------------------------------------------------ モデルハウス詳細（SP）
     Figma 432:11294（高槻SP 375）。★ .l-pagehead / .p-evform の SP 指定より
     「後ろ」に置くこと（同詳細度は後勝ち）。前に置くと打ち消せない。 */
  .l-pagehead--mh{padding-top:104px}
  .l-pagehead--mh .l-pagehead__en{font-size:40px;line-height:1.1}
  .l-pagehead--mh .l-pagehead__ja{margin-top:3px;font-size:16px;line-height:1.8}
  .l-pagehead--mh .l-pagehead__ja b{font-size:16px}
  .l-pagehead--mh .l-pagehead__ja span{font-size:13px}
  .l-pagehead--mh .c-crumb{margin-top:44px;padding-bottom:10px}

  /* SPは見出しの罫線とヒーロー写真の間に40pxあく（PCは詰めて置く。Figma実測） */
  .p-mhhero{margin-top:40px;aspect-ratio:375/304;padding:49px 17px 0}
  .p-mhhero__catch{font-size:18px;line-height:1.72}

  .p-mhintro{padding-top:40px}
  .p-mhintro__head{padding-left:20px}
  .p-mhintro__ttl{font-size:24px}
  /* Figma SP 432:11826 の小見出しは 16px / ls 0%。.03em のままだと1字あふれて最終行が「ス」1文字になる */
  .p-mhintro__sub{font-size:16px;letter-spacing:0}
  .p-mhintro__body{margin-top:30px}
  .p-mhintro__body p{font-size:14px;line-height:1.75}
  .p-mhintro__body p+p{margin-top:1.75em}

  .p-mhslider{margin-top:80px}
  .p-mhslider .c-slider__track{--slider-gap:4px}
  .p-mhslider__item{width:min(279px,74.4vw)}
  .p-mhslider__nav button{width:28px;height:28px}
  .p-mhslider__nav .is-prev{left:9px}
  .p-mhslider__nav .is-next{right:9px}
  .p-mhslider__dots{bottom:11px;gap:10px}
  .p-mhslider__dots button{width:5px;height:5px}

  .p-mhpoint{padding:60px 0}
  .p-mhpoint__inner{width:100%}
  .p-mhpoint__head{width:min(100% - var(--side)*2,1000px)}
  .p-mhpoint__intro{margin-top:40px;padding-left:20px}
  /* SPは見出しを一段落とす（Figma SP 432:11874＝20px。PCの24pxのままだと大きすぎる） */
  .p-mhpoint__ttl{font-size:20px}
  /* SPは帯を span 側へ移す。1本だけなら折り返しても帯が続く（box-decoration-break:clone）。
     改行で2本以上に分けたときは、帯ごとに幅を内容ぶんへ縮めて縦に並べる。 */
  .p-mhpoint__badge{display:block;padding:0;background:none;font-size:14px}
  .p-mhpoint__badge span{
    display:inline;padding:3px 12px;background:var(--dark);color:var(--white);
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .p-mhpoint__badge--multi span{display:table;margin-top:6px}
  .p-mhpoint__badge--multi span:first-child{margin-top:0}
  .p-mhpoint__lead p{font-size:14px;line-height:1.8}
  .p-mhpoint__panel{margin-top:0;padding:60px var(--side)}
  .p-mhblock{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .p-mhblock--rev{grid-template-columns:minmax(0,1fr)}
  .p-mhblock--rev .p-mhblock__img{order:0}
  .p-mhblock__img{aspect-ratio:343/249}
  .p-mhblock__no{right:22px;font-size:88px}
  .p-mhblock__no i{font-size:12px}
  .p-mhblock__body{max-width:none}
  /* Figma SP 432:11888＝22px（PC24px→SP22px）。中間ブレークポイントの20pxとは別物 */
  .p-mhblock__ttl{font-size:22px;line-height:1.7}
  .p-mhblock__txt{margin-top:20px;font-size:14px}
  .p-mhcards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:13px;row-gap:35px;margin-top:80px}
  .p-mhcard__img{aspect-ratio:165/102}
  .p-mhcard__head{flex-wrap:wrap;gap:10px;margin-top:20px}
  .p-mhcard--badge .p-mhcard__head{gap:10px}
  .p-mhcard__no{width:46px;height:38px;padding-right:12px}
  .p-mhcard__no i{font-size:11px}
  .p-mhcard__no b{font-size:26px}
  .p-mhcard__badge{font-size:14px}
  /* Figma SP 432:11907＝16px。
     ★見出しを次の行に落とすのは「性能」バッジ付きカードだけ（Figma SP）。
       バッジ無し＝番号と見出しが横並び（Point 03｜2階リビング）、
       バッジ有り＝番号とバッジが横並びで、見出し（断熱等級7級/(HEAT20 G3)）はその下。
       flex-basis:100% を全カードに当てると、バッジ無しでも見出しが落ちてデザインと変わる。 */
  .p-mhcard__ttl{font-size:16px}
  .p-mhcard--badge .p-mhcard__ttl{flex-basis:100%}
  .p-mhcard__ttl small{font-size:14px}
  .p-mhcard__txt{margin-top:12px;font-size:14px}

  .p-mhinfo{padding-top:80px}
  .p-mhinfo__inner{width:min(100% - var(--side)*2,1390px)}
  .p-mhinfo__panel{margin-top:30px;padding:0}
  .p-mhplans{width:100%;flex-direction:column;gap:20px}
  .p-mhplan{gap:10px;flex:none;width:100%}
  .p-mhplan__label{padding:2px 26px;font-size:13px}

  .p-mhspec{width:100%;margin-top:40px}
  .p-mhspec__row{grid-template-columns:100px minmax(0,1fr)}
  .p-mhspec__row dt{min-height:56px;padding:8px 8px 8px 14px;font-size:13px}
  .p-mhspec__row dd{min-height:56px;padding:12px 14px;font-size:13px}
  .p-mhmap{width:100%;margin-top:20px;aspect-ratio:343/171}

  .p-mhyt{padding:40px 0 0}
  .p-mhyt__inner{width:min(100% - var(--side)*2,1390px)}
  .p-mhyt__panel{margin-top:20px;padding:0}
  .p-mhyt__movie{width:100%;aspect-ratio:16/9}

  .p-mhstr{padding:60px 0}
  .p-mhstr__ttl{margin-top:30px;font-size:18px}
  .p-mhstr__lead{font-size:13px}
  .p-mhstr__grid{margin-top:30px;gap:40px}
  .p-mhrep{flex-direction:column;align-items:flex-start;gap:15px;margin-top:60px;padding-left:20px}
  .p-mhrep__ttl{font-size:20px}
  .p-mhrep__ttl b{font-size:26px}
  .p-mhrep__txt{max-width:none;font-size:13px}
  .p-mhrep__imgs{gap:13px;margin-top:20px}

  .p-mhqa{padding:80px 0}
  .p-mhqa__list{margin-top:30px}
  .p-mhqa__q,.p-mhqa__a{align-items:flex-start}
  .p-mhqa__q{gap:14px;padding:10px 20px}
  .p-mhqa__a{gap:15px;padding:20px}
  .p-mhqa__q i,.p-mhqa__a i{font-size:24px;line-height:1.9}
  .p-mhqa__q span{font-size:15px;line-height:1.9}
  .p-mhqa__a span{font-size:13px;line-height:1.9}

  .p-evform--mh{padding-top:120px}

  /* -------------------------------------------------- 建売・土地情報 一覧
     Figma 428:7284（SP 375）。トグルは全幅2分割、カードは2列。 */
  .p-estoggle__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-estoggle__item{width:auto;height:47px}
  .p-esfilter{padding-top:34px}
  .p-eslist{padding:46px 0 100px}
  .p-eslist__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 17px}
  .p-escard__ttl{font-size:14px;line-height:1.8}
  .p-escard__specs{gap:5px;margin-top:12px}
  /* ★2列カードでは「兵庫県伊丹市池尻4丁目」のような長い所在地が nowrap のままだと縮まず、
     カードごと画面外へ14〜22pxはみ出す（375/390/360で実測・2026-08-22）。
     SPでは折り返しを許可し、flexアイテムが縮めるよう min-width:0 を入れる。
     価格（「4,280万円(税込)」＝約100px）は列幅に収まるので1行のまま。 */
  .p-escard__spec{gap:10px;min-width:0}
  .p-escard__spec dt,.p-escard__spec dd{font-size:11px}
  .p-escard__spec dd{white-space:normal;min-width:0}
  .p-escard__more{margin-top:8px;font-size:12px}
  .p-escard__more i{width:20px;height:20px}

  /* -------------------------------------------------- 建売・土地情報 詳細
     Figma 428:8614（SP 375）。写真は全幅、情報は下に。価格の黒ボックスは
     ★絶対配置を解いて「タグ→価格→表」の並びにする（DOM順はSPに合わせてある）。 */
  .p-esdt__top{grid-template-columns:minmax(0,1fr);gap:0;padding-top:40px}
  /* SPは1列に積む。黒いボックスは「タグ→価格→表」の順で流す（DOM順のまま）。 */
  .p-esinfo{grid-template-columns:minmax(0,1fr);column-gap:0}
  .p-esinfo__head,.p-esinfo__tags,.p-estable{grid-column:1;grid-row:auto}
  .p-esgal__thumbs{gap:6px;margin-top:6px}
  .p-esgal__arrow{width:28px;height:28px}
  .p-esinfo{margin-top:44px}
  .p-esinfo__head{max-width:none;gap:8px}
  .p-esinfo__ttl{font-size:24px}
  .p-esinfo__catch{font-size:14px}
  .p-esprice{grid-column:1;grid-row:auto;justify-self:start;width:fit-content;margin-top:20px;align-items:flex-start;text-align:left}
  .p-esprice__num b{font-size:36px}
  .p-estable{margin-top:30px}
  .p-estable__row{grid-template-columns:105px minmax(0,1fr)}
  .p-estable__row dt{min-height:47px;padding:10px 8px 10px 14px;font-size:13px}
  .p-estable__row dd{padding:10px 14px;font-size:13px}

  .p-esdt__cta{flex-direction:column;align-items:center;gap:15px;padding-top:60px}
  .c-pillbtn{width:min(100%,311px);height:70px;font-size:16px}

  .p-esplan{margin-top:100px;padding:60px 0}
  .p-esplan__panel{margin-top:24px;padding:24px 16px}
  .p-esplan__figs{grid-template-columns:minmax(0,1fr);gap:20px}
  .p-esplan__figs--single{max-width:none}
  .c-zoombtn__tag{right:8px;bottom:8px;font-size:11px;padding:4px 10px 4px 25px}
  .c-zoom{padding:12px}
  .c-zoom__body{max-height:calc(100vh - 24px)}
  .c-zoom__img{max-height:calc(100vh - 24px)}
  .c-zoom__close{right:6px;top:6px;width:40px;height:40px}
  .c-zoom__hint{left:6px;bottom:6px;font-size:11px;padding:4px 10px}
  .p-esplan__txt{margin-top:24px;text-align:left}
  .p-espoint{margin-top:44px}
  .p-espoint__ttl{font-size:24px}
  .p-espoint__list li{gap:12px;font-size:13px}

  .c-photogrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 15px}
  .c-photogrid__txt{margin-top:12px;font-size:13px}
  .p-esequip{padding:70px 0}
  .p-esequip__grid{margin-top:24px}
  /* ★資料請求／お問い合わせボタンの直後に Access の見出しが来るので、上に間を入れる */
  .p-esaccess{padding-top:50px;padding-bottom:70px}
  .p-esaccess__map{margin-top:16px;aspect-ratio:343/300}
  .p-esaround__ttl{margin-top:70px;font-size:18px}
  .p-esaround__grid{margin-top:24px}

  .p-estate--similar{padding:60px 0}
  .p-estate--similar .p-estate__head{margin-bottom:24px}

  .p-evform--es{padding-top:70px}

  /* -------------------------------------------------------- 施工事例 一覧
     Figma 432:12685（SP 375）。しぼり込みは左寄せで2行に折り返す（項目間21px・行間14px）。 */
  .p-wkfilter__inner{justify-content:flex-start;gap:14px 21px}
  .p-wklist{padding:50px 0 100px}
  .p-wklist__grid{grid-template-columns:minmax(0,1fr);gap:60px}

  /* -------------------------------------------------------- 施工事例 詳細
     Figma 432:13318（SP 375）。ヒーローは全幅・DATEは1列・写真＋文章は写真が必ず上。 */
  .p-wkdt__hero{margin-top:41px;aspect-ratio:375/304}
  .p-wkdt__top{padding:60px 0 75px}
  .p-wkdt__ttl{font-size:24px;line-height:1.9;letter-spacing:.06em}

  .p-wkdate{flex-direction:column;gap:35px;margin-top:20px;padding:30px 20px}
  .p-wkdate__en{width:auto;text-align:left}
  .p-wkdate__cols{grid-template-columns:minmax(0,1fr);gap:0}
  /* SPは1列に連結するので、列の最後の行にも罫線を引く（最終行だけ消す） */
  .p-wkdate__col .p-wkdate__row:last-child{border-bottom:.5px solid #b3b3b3}
  .p-wkdate__cols .p-wkdate__col:last-child .p-wkdate__row:last-child{border-bottom:0}
  .p-wkdate__row{gap:20px}
  .p-wkdate__row dt{width:76px}

  .p-wkdt__lead{margin-top:35px}
  .p-wkdt__lead p{font-size:14px;line-height:1.8}

  .p-wkblocks{padding:60px 0 84px}
  .p-wkblock,.p-wkblock--rev{grid-template-columns:minmax(0,1fr);gap:0}
  .p-wkblock--rev .p-wkblock__img,.p-wkblock--rev .p-wkblock__body{order:0}
  .p-wkblock+.p-wkblock{margin-top:84px}
  .p-wkblock__body{padding-top:26px}
  .p-wkblock__ttl{font-size:22px}
  .p-wkblock__txt{margin-top:25px;font-size:14px}

  .p-wkpoints{padding:80px 0}
  .p-wkpoints__head .c-sechead{flex-direction:row;align-items:flex-end;gap:16px}
  .p-wkpoints__head .c-sechead__ja{font-size:12px}
  .p-wkpoints__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 14px;margin-top:36px}
  /* SPは番号を見出しの上に置き、区切りは縦罫でなく下の横罫にする */
  .p-wkpoint__head{display:block;margin-top:18px}
  .p-wkpoint__num{
    width:auto;padding:0 0 4px;text-align:left;
    border-right:0;border-bottom:.5px solid rgba(161,161,161,.73);
  }
  .p-wkpoint__num span{font-size:10px;letter-spacing:.08em}
  .p-wkpoint__num b{font-size:24px}
  .p-wkpoint__ttl{margin-top:10px;font-size:16px}
  .p-wkpoint__txt{margin-top:14px;font-size:14px}

  .p-wkdt__back{padding-top:60px}
  .p-wkdt__back .c-btn--back{min-width:253px}

  /* ★PCで足した .p-works--other の上書き（2クラス）は、ここの .p-work__*（1クラス）より強い。
     打ち消しを書かないとSPだけ3列・特大文字のまま崩れる。 */
  .p-works--other{padding:100px 0 0}
  .p-works--other .c-sechead__en{font-size:34px}
  .p-works--other .p-works__lead{font-size:14px;line-height:1.85}
  .p-works--other .p-works__list{gap:10px}
  .p-works--other .p-work{aspect-ratio:343/452}
  .p-works--other .p-work__body{padding:20px 16px 16px}
  .p-works--other .p-work__ttl{font-size:23px;line-height:1.7}
  .p-works--other .p-work__tags{margin-top:12px;padding-right:0;font-size:11px}
  .p-works--other .p-work__tags svg{width:14px;height:14px}
  /* ★「その他施工事例」も同じ（上の .p-work__more と同じ理由で右上に浮いていた） */
  .p-works--other .p-work__body{padding-bottom:46px}
  .p-works--other .p-work__more{
    position:absolute;right:19px;bottom:14px;z-index:2;
    display:inline-flex;margin-top:0;font-size:11px;gap:6px;
  }
  .p-works--other .p-work__more i{width:18px;height:18px}

  .p-bnr2{padding:100px 0}
  .p-bnr2__inner{grid-template-columns:minmax(0,1fr);gap:14px}
  .p-bnr2__item{aspect-ratio:343/182}
  .p-bnr2__en{font-size:34px}
  .p-bnr2__ja{font-size:14px}
  .p-bnr2__arrow{right:16px;bottom:12px;width:32px;height:32px}
}

/* --------------------------------------------------- ~420px（小型SP） */
@media (max-width:420px){
  .p-fv__badges{--fvb:.64}
  /* 360〜420pxは36pxだと1行に収まらないので少しだけ落とす（行送り比 1.28 は維持） */
  .p-fv__l1,.p-fv__l2{font-size:32px}
  .p-fv__l1 small{font-size:28px}
  .p-event__list>*{flex:0 0 78vw}
  .p-estate__item{width:84vw}
  .p-review__item{width:64vw}
}

@media (max-width:360px){
  .p-fv__badges{--fvb:.58}
}

/* ==========================================================================
   上野工務店を知る（page-about.php）
   デザイン正本: Figma 296:5373（PC 1440）/ 436:4653（SP 375）
   ★このブロックはファイル末尾に置いている。既存の @media(max-width:900px) より
     後ろになるので、下の SP 指定が確実に勝つ（同詳細度は後勝ち）。
   ========================================================================== */

/* ------------------------------------------------- 2. チーム写真の帯 */
/* ★写真は切らずに縦横比のまま全体を出す（2026-09-17）。キャッチを焼き込んだ写真に替わったため、
   高さ固定＋object-fit:cover だと上下が切れる。文字は入力したときだけ写真の上に重ねる。 */
.p-knowhero{position:relative}
.p-knowhero__bg{position:relative;z-index:0;overflow:hidden}
.p-knowhero__bg img{width:100%;height:auto;display:block}
.p-knowhero__inner{
  position:absolute;top:77px;left:0;right:0;z-index:1;display:flex;align-items:center;gap:40px;
  width:min(100% - var(--side)*2, var(--wrap));margin-inline:auto;padding-left:100px;
  text-shadow:0 4px 4px rgba(0,0,0,.25);color:var(--white);
}
.p-knowhero__catch{
  flex:none;font-family:var(--f-mincho);font-size:40px;font-weight:600;
  line-height:1.5;letter-spacing:.03em;white-space:nowrap;
}
/* [ ] で囲んだ部分＝赤い座布団に白抜き */
.p-knowhero__catch .is-accent{
  background:var(--accent);color:var(--white);padding:2px .04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.p-knowhero__lead{flex:none;font-size:16px;font-weight:500;line-height:1.8}

/* ------------------------------------------------ 3. わからないを解消 */
/* ★写真の下端のぼかしは外した（2026-09-17）。この帯を写真にかぶせず、写真の下から始める。
   見出しまでの距離は以前と同じ（写真の下端から約100px）。 */
.p-knowask{
  position:relative;z-index:1;padding-top:101px;padding-bottom:98px;
  background:var(--bg-soft);
}
.p-knowask__inner{text-align:center}
.p-knowask__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
/* 見出しの改行は「スマホでだけ」効かせる（PCは1行に収まるデザイン） */
.p-knowask__ttl br,.p-reason__ja br{display:none}
/* 圏点（文字の上の点）＝Figma では別テキストで置かれているが、CSS の text-emphasis で出す */
.p-knowask__ttl .is-accent{
  color:var(--accent);
  -webkit-text-emphasis:filled dot var(--accent);text-emphasis:filled dot var(--accent);
  -webkit-text-emphasis-position:over right;text-emphasis-position:over right;
}
.p-knowask__lead{margin-top:20px;font-size:14px;font-weight:500;line-height:1.8}
.p-knowask__line{display:block;width:1px;height:46px;margin:24px auto 0;background:var(--text)}
.p-knowask__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:22px}
.p-knowask__card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  width:262px;height:262px;padding:0 41px;border-radius:50%;background:var(--dark);
}
.p-knowask__icon{width:72px;height:72px;object-fit:contain}
.p-knowask__ctxt{font-size:18px;font-weight:500;line-height:1.78;color:var(--white)}
.p-knowask__foot{margin-top:46px;font-weight:700;line-height:1.8}
.p-knowask__foot span{display:block;font-size:18px}
.p-knowask__foot b{display:block;font-size:24px;font-weight:700;color:var(--accent)}

/* --------------------------------------------------- 4. 現場写真の帯 */
.p-knowband{line-height:0}
.p-knowband img{width:100%;height:403px;object-fit:cover;display:block}

/* ------------------------------------------------- 5. Reason 01〜05 */
.p-reason{padding-top:40px}
.p-reason__head{position:relative;text-align:center;padding-bottom:3px}
.p-reason__en{
  font-family:var(--f-en);font-size:128px;font-weight:600;line-height:1.8;letter-spacing:.03em;
  color:var(--bg-page);
}
.p-reason__ja{
  position:absolute;left:0;right:0;top:128px;
  font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em;
}
/* パネルは左右交互に画面端まではみ出す。中身の位置（内容域1000px）はどちらでも同じ。 */
.p-reason__item{
  position:relative;width:calc(100% - 120px);
  background:var(--bg-page);box-shadow:6px 7px 5px rgba(0,0,0,.16);
  padding:80px 100px 80px 220px;
}
.p-reason__item:nth-child(even){margin-left:120px;padding:80px 220px 80px 100px}
.p-reason__item + .p-reason__item{margin-top:40px}

.p-reason__top{display:flex;align-items:flex-start;gap:40px}
.p-reason__no{display:flex;align-items:center;gap:14px;flex:none;color:var(--accent);font-family:var(--f-en);font-weight:600}
.p-reason__no i{width:27px;height:5px;background:currentColor}
.p-reason__no small{font-size:16px;font-weight:600;line-height:1.8;letter-spacing:.03em}
.p-reason__no b{font-size:48px;font-weight:600;line-height:.875;letter-spacing:.03em}
.p-reason__ttlbox{flex:1 1 auto;min-width:0}
.p-reason__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-reason__sub{margin-top:10px;font-size:16px;font-weight:500;line-height:1.8}
/* 02〜05 の見出し＝赤い帯。帯は内容域の右端まで伸びる（文字数で幅を決めない）。 */
.p-reason__ttl--plate{background:var(--accent);color:var(--white)}
.p-reason__ttl--plate span{display:block;padding-left:30px}

.p-reason__body{
  display:grid;grid-template-columns:minmax(0,470fr) minmax(0,482fr);
  column-gap:48px;align-items:start;margin-top:40px;
}
/* 奇数枚目のパネル（03・05）は写真が右。01 は専用レイアウトなので除外する。 */
.p-reason__item:nth-child(odd):not(.p-reason__item--01) .p-reason__body{
  grid-template-columns:minmax(0,482fr) minmax(0,470fr);
}
.p-reason__item:nth-child(odd):not(.p-reason__item--01) .p-reason__col--pic{order:2}
.p-reason__col--txt{min-width:0}
.p-reason__txt{font-size:16px;font-weight:500;line-height:1.8}
.p-reason__btn{margin-top:30px}
.c-btn--know{min-width:269px;height:47px;padding:0 28px;background:var(--white)}
.c-btn--wide{min-width:253px;height:59px;padding:0 28px}

/* 写真：1枚／2枚（重ね）／3枚（大＋小2枚）で並べ方が変わる */
.p-reason__pics figure{margin:0;line-height:0;overflow:hidden}
.p-reason__pics img{width:100%;height:100%;object-fit:cover;display:block}
.p-reason__pics--1 figure{aspect-ratio:470/356}
.p-reason__pics--3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p-reason__pics--3 figure:first-child{grid-column:1 / -1;aspect-ratio:470/281}
.p-reason__pics--3 figure:nth-child(n+2){aspect-ratio:230/151}
.p-reason__pics--2{position:relative;aspect-ratio:470/518}
.p-reason__pics--2 figure:first-child{aspect-ratio:470/294}
/* 2枚目（記録書）は背景を透過に抜いた素材。写真の上に重ねる＝Figma と同じ見え方。 */
.p-reason__pics--2 figure:nth-child(2){
  position:absolute;left:25.74%;top:45.75%;width:71.06%;aspect-ratio:334/281;
}
.p-reason__pics--2 figure:nth-child(2) img{object-fit:contain}

/* ---- Reason 01 の 3択の表 */
.p-reason__item--01 .p-r1table{margin-top:22px}
.p-reason__item--01 .p-reason__body{margin-top:36px}
.p-r1table table{width:100%;border-collapse:collapse;table-layout:fixed}
.p-r1table th,.p-r1table td{
  height:47px;padding:4px;text-align:center;
  font-size:14px;font-weight:500;line-height:1.8;border:.5px solid #b3b3b3;
}
.p-r1table__corner{width:83px;border:0}
.p-r1table__rh{
  width:83px;border:0;border-bottom:.5px solid #7b7b7b;
  padding:4px 0 4px 29px;text-align:left;font-size:16px;font-weight:700;color:var(--accent);
}
.p-r1table__h{color:var(--white);font-weight:500}
.p-r1table__h--1{background:#292625}
.p-r1table__h--2{background:#008081}
.p-r1table__h--3{background:#c9a01b}
.p-r1table__c--1{background:#efefef}
.p-r1table__c--2{background:#ebf6f6}
.p-r1table__c--3{background:#fffae8}

/* ---- Reason 01 の本文＋ベン図 */
.p-reason__body--01{display:flex;gap:0;align-items:center;justify-content:space-between}
.p-reason__body--01 .p-reason__col--txt{flex:1 1 auto}
.p-r1lead{font-family:var(--f-mincho);font-weight:600;letter-spacing:.03em}
.p-r1lead small{display:block;font-size:24px;font-weight:600;line-height:1.6}
.p-r1lead b{display:block;font-size:32px;font-weight:600;line-height:1.6}
.p-r1lead .is-accent{color:var(--accent)}
.p-r1text{margin-top:30px;font-size:16px;font-weight:500;line-height:1.8}
.p-r1text .is-accent{color:var(--accent)}

/* ベン図は座標どおりの部品。SP・中間幅は --vs（拡大率）だけ変えて縮める。 */
.p-vennbox{--vs:1;flex:none;width:calc(528px*var(--vs));height:calc(422px*var(--vs));margin-right:-10px}
.p-venn{position:relative;width:528px;height:422px;transform:scale(var(--vs));transform-origin:0 0}
.p-venn__line{position:absolute;height:1px;background:var(--accent)}
.p-venn__line--1{left:115.5px;top:207.5px;width:106.2px;transform:rotate(-53.5deg)}
.p-venn__line--2{left:299.4px;top:207.5px;width:106.2px;transform:rotate(52.8deg)}
.p-venn__line--3{left:178.8px;top:336.7px;width:165.6px}
.p-venn__c{
  position:absolute;width:207px;height:207px;border-radius:50%;
  background:var(--accent);border:1px solid var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--white);text-align:center;
}
.p-venn__c--1{left:0;top:215px}
.p-venn__c--2{left:159px;top:0}
.p-venn__c--3{left:322px;top:215px}
.p-venn__chip{display:flex;align-items:center;gap:3px;font-size:14px;font-weight:700;line-height:1.9}
.p-venn__chip b{display:inline-block;padding:0 4px;background:var(--text);font-weight:700}
.p-venn__t{margin-top:4px;font-size:18px;font-weight:700;line-height:1.5}
.p-venn__t small{display:block;font-size:13px;font-weight:700;line-height:1.5}
.p-venn__i{width:54px;height:54px;object-fit:contain;margin-top:8px}
/* ★トップの「3つの良いとこ取り」と同じで、●が 上→左→右 の順にふわっと出る（2026-08-21）。
     箱自身はフェードさせない（中の●を1つずつ出すため）。DOMは 1=左 / 2=上 / 3=右。 */
.p-vennbox.js-rv{opacity:1;transform:none;transition:none}
.p-venn__c{opacity:0;transform:scale(.86);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.p-venn__line{opacity:0;transition:opacity .5s var(--ease)}
.p-vennbox.is-in .p-venn__c{opacity:1;transform:none}
.p-vennbox.is-in .p-venn__c--2{transition-delay:0s}
.p-vennbox.is-in .p-venn__c--1{transition-delay:.26s}
.p-vennbox.is-in .p-venn__c--3{transition-delay:.52s}
.p-vennbox.is-in .p-venn__line{opacity:1;transition-delay:.78s}

/* ------------------------------------------ 6. 数字が証明しています */
.p-knowrec{--gold-num:#ffde80;position:relative;padding:100px 0}
.p-knowrec__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.p-knowrec__bg img{width:100%;height:100%;object-fit:cover;display:block}
.p-knowrec__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.61)}
.p-knowrec__inner{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  width:min(100% - var(--side)*2, var(--wrap));margin-inline:auto;
}
.p-knowrec__ttl{
  font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em;
  color:var(--white);text-align:center;
}
.p-knowrec__badges{display:flex;flex-wrap:nowrap;justify-content:center;margin-top:40px}
.p-recbadge{
  flex:none;width:213px;height:213px;border-radius:50%;
  background:var(--dark);border:1px solid var(--white);
  display:flex;flex-direction:column;align-items:center;
  padding-top:24px;text-align:center;color:var(--white);
}
.p-recbadge + .p-recbadge{margin-left:-15.6px}
.p-recbadge__icon{height:39px;width:auto;object-fit:contain}
/* 4つめ（SUUMO AWARD）だけ写真アイコンで、Figma でも一回り大きい（63×67）。
   ここを変えると下のラベル・数字の位置も自動でついてくる。 */
.p-recbadge:nth-child(4) .p-recbadge__icon{height:67px}
.p-recbadge__label{margin-top:3px;font-size:15px;font-weight:700;line-height:1.7}
.p-recbadge__num{display:flex;align-items:baseline;justify-content:center;gap:1px;margin-top:-9px;color:var(--gold-num)}
.p-recbadge__num b{font-family:var(--f-num);font-size:48px;font-weight:700;line-height:1.7}
.p-recbadge__num i{font-style:normal;font-family:var(--f-gothic);font-size:36px;font-weight:700}
.p-recbadge__num span{font-size:18px;font-weight:700;line-height:1.7}
.p-recbadge__note{margin-top:-22px;font-size:13px;font-weight:700;line-height:1.7}
.p-knowrec__area{margin-top:30px;font-size:15px;font-weight:500;line-height:1.7;color:var(--white);text-align:center}
.p-knowrec__note{
  width:997px;max-width:100%;margin-top:40px;padding:20px 26px;
  border-top:1px solid var(--white);border-bottom:1px solid var(--white);
}
.p-knowrec__note p{font-size:16px;font-weight:500;line-height:1.8;color:var(--white);text-align:center}

/* --------------------------------------------------- 7. 代表の想い */
.p-knowmsg{background:var(--dark);padding:140px 0 100px;color:var(--white)}
.p-knowmsg__head{text-align:center}
.p-knowmsg__en{font-family:var(--f-en);font-size:48px;font-weight:600;line-height:1.2;letter-spacing:.009em}
.p-knowmsg__ja{font-size:14px;font-weight:700;line-height:1.9}
.p-knowmsg__grid{display:grid;grid-template-columns:minmax(0,526fr) minmax(0,509fr);column-gap:165px;margin-top:66px}
.p-knowmsg__pic{grid-column:1;grid-row:1;margin:0;aspect-ratio:526/653;overflow:hidden}
.p-knowmsg__pic img{width:100%;height:100%;object-fit:cover;display:block}
.p-knowmsg__name{grid-column:1;grid-row:2;margin-top:34px}
.p-knowmsg__body{grid-column:2;grid-row:1 / span 2}
.p-knowmsg__role{font-size:13px;font-weight:500;line-height:1.97}
.p-knowmsg__person{display:flex;align-items:baseline;gap:18px;margin-top:2px}
.p-knowmsg__person b{font-family:var(--f-en);font-size:32px;font-weight:500;line-height:1.97}
.p-knowmsg__person span{font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.97;letter-spacing:.08em}
.p-knowmsg__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-knowmsg__txt{margin-top:26px;font-size:16px;font-weight:500;line-height:1.97}

/* ------------------------------- 8. まずは、会いに来てください */
.p-knowvisit{position:relative;padding:70px 0}
.p-knowvisit__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.p-knowvisit__bg img{width:100%;height:100%;object-fit:cover;display:block}
.p-knowvisit__bg::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.8)}
.p-knowvisit__inner{position:relative;z-index:1}
.p-knowvisit__head{text-align:center}
.p-knowvisit__en{font-family:var(--f-en);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:.027em;color:var(--accent)}
.p-knowvisit__ttl{margin-top:10px;font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.2;letter-spacing:.03em}
.p-knowvisit__card{width:min(100% - var(--side)*2, 1188px);margin:20px auto 0;background:var(--white);padding:30px 60px}
.p-knowvisit__row{display:flex;align-items:center;justify-content:space-between;gap:75px}
.p-knowvisit__pic{flex:0 1 493px;margin:0;aspect-ratio:493/302;overflow:hidden}
.p-knowvisit__pic img{width:100%;height:100%;object-fit:cover;display:block}
.p-knowvisit__txt{flex:1 1 499px;min-width:0}
.p-knowvisit__lead{font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.8;color:var(--accent)}
.p-knowvisit__body{margin-top:1.8em;font-size:16px;font-weight:500;line-height:1.8}

/* --------------------------------------------------- 9. Model House */
.p-mh3{padding:120px 0 140px}
.c-sechead--lg .c-sechead__en{font-size:64px;line-height:1}
.c-sechead--lg .c-sechead__ja{font-size:15px;font-weight:500;letter-spacing:.06em}
.p-mh3__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:30px}
.p-mh3__card{position:relative;display:block;aspect-ratio:474/630;overflow:hidden;color:var(--white)}
.p-mh3__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s var(--ease)}
.p-mh3__card:hover .p-mh3__img{opacity:.9}
.p-mh3__card::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.08)}
.p-mh3__shade{position:absolute;left:0;right:0;bottom:0;z-index:1;height:245px;background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,0))}
.p-mh3__body{position:absolute;z-index:2;left:32px;right:32px;bottom:40px}
.p-mh3__name{display:block;font-size:32px;font-weight:700;line-height:1.9}
.p-mh3__name i{font-size:24px;font-style:normal;font-weight:700;margin-left:.2em}
.p-mh3__catch{display:block;margin-top:10px;font-family:var(--f-mincho);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.03em}
.p-mh3__foot{margin-top:58px;text-align:center}

/* ------------------------------------------------- 中間幅（〜1180px） */
@media (max-width:1180px){
  .p-knowhero__inner{padding-left:0}
  .p-reason__item{padding:80px 60px 80px 120px}
  .p-reason__item:nth-child(even){padding:80px 120px 80px 60px}
  /* Reason 01 は文章とベン図が横に並ばなくなる幅＝縦積みに切り替える */
  .p-reason__body--01{display:block}
  .p-reason__body--01 .p-reason__col--txt{padding-right:0}
  .p-vennbox{--vs:.9;margin:36px auto 0}
  .p-knowvisit__row{gap:40px}
  .p-knowmsg__grid{column-gap:60px}
}

/* --------------------------------------------------------- SP（〜900px） */
@media (max-width:900px){
  /* 2. 写真の帯 */
  .p-knowhero{margin-top:40px}
  .p-knowhero__inner{display:block;top:44px;width:100%;padding:0 20px}
  /* ★nowrap の1行コピー。22px固定だと360px幅で2pxはみ出す（実測 2026-08-22）。
     幅に追従させて、狭い端末でも1行に収める。390px以上では22pxで頭打ち。 */
  .p-knowhero__catch{font-size:min(22px,5.5vw)}
  .p-knowhero__lead{margin-top:137px;font-size:14px}

  /* 3. わからないを解消 */
  .p-knowask{padding-top:50px;padding-bottom:41px}
  .p-knowask__ttl{font-size:20px;line-height:2.3}
  .p-knowask__ttl br,.p-reason__ja br{display:inline}
  .p-knowask__lead{width:299px;max-width:100%;margin:20px auto 0;text-align:left}
  .p-knowask__line{height:36px;margin-top:16px}
  .p-knowask__cards{width:296px;max-width:100%;margin:16px auto 0;gap:12px;row-gap:0}
  .p-knowask__card{width:142px;height:142px;gap:6px;padding:0}
  .p-knowask__card:nth-child(3){margin-top:-8px}
  .p-knowask__icon{width:34px;height:34px}
  .p-knowask__ctxt{font-size:10px;line-height:1.68}
  .p-knowask__foot{margin-top:47px;text-align:left}
  .p-knowask__foot span{font-size:14px}
  .p-knowask__foot b{font-size:16px}

  /* 4. 現場写真の帯 */
  .p-knowband img{height:174px}

  /* 5. Reason */
  .p-reason{padding-top:60px}
  .p-reason__head{padding-bottom:80px}
  .p-reason__en{font-size:64px;line-height:.95}
  .p-reason__ja{top:39px;font-size:24px;line-height:1.5;padding-inline:var(--side-sp)}
  .p-reason__item,
  .p-reason__item:nth-child(even){width:100%;margin-left:0;padding:60px var(--side-sp);box-shadow:none}
  .p-reason__top{display:block}
  .p-reason__no{gap:10px}
  .p-reason__ttlbox{margin-top:15px}
  .p-reason__ttl{font-size:18px}
  .p-reason__sub{margin-top:20px;font-size:14px}
  /* SP の赤い帯は行ごとに分かれる＝文字にぴったり付く（Figma も1行1枚） */
  .p-reason__ttl--plate{background:none;line-height:2.5}
  .p-reason__ttl--plate span{
    display:inline;padding:.335em .72em;background:var(--accent);
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .p-reason__body,
  .p-reason__item:nth-child(odd):not(.p-reason__item--01) .p-reason__body{display:block;margin-top:20px}
  .p-reason__item:nth-child(odd):not(.p-reason__item--01) .p-reason__col--pic{order:0}
  .p-reason__col--txt{margin-top:36px}
  .p-reason__txt{font-size:14px}
  .p-reason__pics--1 figure{aspect-ratio:343/206}
  .p-reason__pics--3{gap:7px}
  .p-reason__pics--3 figure:first-child{aspect-ratio:343/205}
  .p-reason__pics--3 figure:nth-child(n+2){aspect-ratio:168/110}
  .p-reason__pics--2{aspect-ratio:343/271}
  .p-reason__pics--2 figure:first-child{aspect-ratio:343/206}
  .p-reason__pics--2 figure:nth-child(2){left:0;top:38%;width:58.3%;aspect-ratio:200/168}
  .p-reason__btn{margin-top:30px}
  .c-btn--know{min-width:269px;max-width:100%}

  /* Reason 01 */
  .p-reason__item--01 .p-r1table{margin-top:36px}
  .p-reason__item--01 .p-reason__body{margin-top:36px}
  .p-r1table th,.p-r1table td{height:auto;min-height:47px;padding:10px 4px;font-size:11px;line-height:1.6}
  .p-r1table__corner,.p-r1table__rh{width:38px}
  .p-r1table__rh{padding:10px 0;font-size:12px}
  .p-r1lead small{font-size:16px}
  .p-r1lead b{font-size:20px}
  .p-r1text{margin-top:20px;font-size:14px}
  .p-vennbox{--vs:.6496;margin:30px auto 0}

  /* 6. 数字が証明しています */
  .p-knowrec{padding:60px 0}
  .p-knowrec__inner{width:min(100% - 33px, 342px)}
  .p-knowrec__ttl{width:258px;max-width:100%;font-size:24px;line-height:1.6}
  .p-knowrec__badges{margin-top:25px;display:grid;grid-template-columns:repeat(2,171px);justify-content:center;column-gap:0;row-gap:10px}
  .p-recbadge{width:171px;height:171px;padding-top:16px}
  .p-recbadge + .p-recbadge{margin-left:0}
  .p-recbadge__icon{height:30px}
  .p-recbadge:nth-child(4) .p-recbadge__icon{height:52px}
  .p-recbadge__label{margin-top:2px;font-size:13px;line-height:1.6}
  .p-recbadge__num b{font-size:38px}
  .p-recbadge__num i{font-size:28px}
  .p-recbadge__num span{font-size:15px}
  .p-recbadge__note{margin-top:-6px;font-size:11px}
  .p-knowrec__area{margin-top:25px;font-size:15px}
  .p-knowrec__note{margin-top:25px;padding:20px 10px}
  .p-knowrec__note p{font-size:14px;text-align:left}

  /* 7. 代表の想い */
  .p-knowmsg{padding:60px 0}
  .p-knowmsg__en{font-size:36px}
  .p-knowmsg__grid{display:block;margin-top:30px}
  .p-knowmsg__pic{aspect-ratio:343/421}
  .p-knowmsg__name{margin-top:40px}
  .p-knowmsg__person{gap:14px}
  .p-knowmsg__person b{font-size:26px}
  .p-knowmsg__person span{font-size:16px}
  .p-knowmsg__body{margin-top:40px}
  .p-knowmsg__ttl{font-size:24px}
  .p-knowmsg__txt{margin-top:20px;font-size:14px}

  /* 8. まずは、会いに来てください */
  .p-knowvisit{padding:40px 0}
  .p-knowvisit__ttl{font-size:20px;line-height:1.5}
  .p-knowvisit__card{width:min(100% - 32px, 343px);padding:14px}
  .p-knowvisit__row{display:block}
  .p-knowvisit__pic{aspect-ratio:315/196}
  .p-knowvisit__txt{margin-top:24px}
  .p-knowvisit__lead{font-size:16px}
  .p-knowvisit__body{font-size:14px}

  /* 9. Model House */
  .p-mh3{padding:120px 0}
  .p-mh3__head .c-sechead{flex-direction:column;align-items:center;gap:0}
  .c-sechead--lg .c-sechead__en{font-size:40px}
  .p-mh3__list{grid-template-columns:minmax(0,1fr);gap:10px;width:min(100% - 32px, 343px);margin:20px auto 0}
  .p-mh3__card{aspect-ratio:343/450}
  .p-mh3__body{left:17px;right:17px;bottom:27px}
  .p-mh3__name{font-size:22px}
  .p-mh3__name i{font-size:16px}
  .p-mh3__catch{margin-top:8px;font-size:14px}
  .p-mh3__foot{margin-top:50px}
  .c-btn--wide{min-width:231px;height:52px}
}

/* ==========================================================================
   こだわりの性能（page-performance.php）
   デザイン正本: Figma 350:2874（PC 1440）/ 436:5476（SP 375）
   ★このブロックもファイル末尾（＝既存のメディアクエリより後）に置いている。
   ========================================================================== */
:root{ --brown:#4a3630; --tbl-line:#b3b3b3; --tbl-line2:#7b7b7b; --tbl-grey:#efefef; --tbl-red:#fef0f0; --tbl-lh:#e7e7e7; }

/* ------------------------------------------------------- 共通の小部品 */
/* 透かしの大文字＋和文見出し（Spec / Benefits） */
.c-wmhead{position:relative;text-align:center}
.c-wmhead__en{font-family:var(--f-en);font-size:128px;font-weight:600;line-height:.945;letter-spacing:.03em;color:var(--bg-page)}
.c-wmhead__ja{
  position:absolute;left:0;right:0;top:71px;
  font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em;
}
/* 番号（— Benefits 01） */
.c-secno{display:flex;align-items:center;gap:14px;color:var(--accent);font-family:var(--f-en);font-weight:600}
.c-secno i{width:27px;height:5px;background:currentColor}
.c-secno small{font-size:16px;font-weight:600;line-height:1.8;letter-spacing:.03em}
.c-secno b{font-size:48px;font-weight:600;line-height:.875;letter-spacing:.03em}
/* 赤帯の見出し（幅いっぱい／--auto は文字幅） */
.c-plate{background:var(--accent);width:fit-content;max-width:100%}
.c-plate span{
  display:block;padding:0 20px;text-align:center;
  font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:var(--white);
}
/* 「気密｜隙間を…」用。PCは span を2つ並べても赤帯1本に見せる（余白は帯側に持たせる）。 */
.c-plate--split{padding:0 20px}
.c-plate--split span{display:inline;padding:0}
.c-plate--auto{display:inline-block}
.c-plate--auto span{text-align:left}
/* 小さいラベル（茶／赤） */
.c-tagbox{
  display:inline-flex;align-items:center;justify-content:center;padding:0 20px;
  background:var(--brown);color:var(--white);
  font-size:16px;font-weight:500;line-height:2.3;
}
.c-tagbox--full{display:flex;width:100%;font-family:var(--f-mincho);font-size:14px;font-weight:600;line-height:1.8;letter-spacing:.03em}
.c-tagbox--accent{background:var(--accent);font-family:var(--f-mincho);font-size:14px;font-weight:600;line-height:1.8;letter-spacing:.03em}
/* 見出し（バー＋英字） */
.c-eyebrow{display:flex;align-items:center;gap:14px;color:var(--accent);font-family:var(--f-en);font-weight:600;font-size:16px;line-height:1.8;letter-spacing:.03em}
.c-eyebrow i{width:27px;height:5px;background:currentColor}

/* 表（用語集・サッシ・比較表 共通） */
.c-ptable table{width:100%;border-collapse:collapse;table-layout:fixed}
.c-ptable th,.c-ptable td{border:.5px solid var(--tbl-line);padding:20px 30px;text-align:left;vertical-align:middle}
.c-ptable thead th{background:var(--dark);color:var(--white);font-size:14px;font-weight:500;line-height:1.9}
.c-ptable thead .c-ptable__lh{border-color:var(--tbl-line2);font-weight:700;padding-left:29px}
.c-ptable__l{background:var(--tbl-lh);font-size:14px;font-weight:700;line-height:1.9;padding-left:29px}
.c-ptable__v{background:var(--white);font-size:13px;font-weight:500;line-height:1.9}
/* 用語集：1列目176px */
.c-ptable--glo .c-ptable__lh,.c-ptable--glo .c-ptable__l{width:176px}
/* サッシ：206 / 271 */
.c-ptable--sash{width:477px;max-width:100%}
.c-ptable--sash th,.c-ptable--sash td{padding:10px 30px}
.c-ptable--sash .c-ptable__lh,.c-ptable--sash .c-ptable__l{width:206px}
/* 行ラベルはFigmaが13px（見出し行だけ14px）。14pxのままだと「アルミ樹脂複合（標準）」が
   206px枠（内寸147px）に収まらず2行に折り返し、表が2行ぶん高くなる。 */
.c-ptable--sash .c-ptable__l{font-size:13px}
/* 3列の比較表 */
/* 比較表は上段ブロックから40px下（Figma 356:4572・367:2945）。指定が無いと本文に貼りつく。 */
.p-bene__item>.c-ptable{margin-top:40px}
.c-ptable--cmp th,.c-ptable--cmp td{height:47px;padding:8px 16px;text-align:center;font-size:14px;font-weight:700;line-height:1.9}
.c-ptable--cmp .c-ptable__c0{width:182px;background:var(--white);border-color:var(--tbl-line2);text-align:left;padding-left:29px;color:var(--text)}
.c-ptable--cmp thead .c-ptable__c0{background:var(--white);border-color:var(--tbl-line2)}
.c-ptable--cmp .c-ptable__c1{background:var(--tbl-grey);color:var(--text)}
.c-ptable--cmp .c-ptable__c2{background:var(--tbl-red);color:var(--accent)}
.c-ptable--cmp thead .c-ptable__c1{background:var(--dark);color:var(--white);font-weight:500}
.c-ptable--cmp thead .c-ptable__c2{background:var(--accent);color:var(--white);font-weight:500}
.c-ptable--plain .c-ptable__c2{color:var(--text)}
/* ライフサイクルコストの表：見出しは20px・金額の数字だけ大きく */
.c-ptable--lcc thead .c-ptable__c2{font-size:20px;font-weight:700}
.c-ptable--lcc .is-big td{font-size:16px}
.c-ptable--lcc .is-big .c-ptable__c1 b{font-family:var(--f-num);font-size:20px;font-weight:700}
.c-ptable--lcc .is-big .c-ptable__c2 b{font-family:var(--f-num);font-size:32px;font-weight:700}

/* -------------------------------------------------------------- 2. 導入 */
.p-perfhero{padding:100px 0 120px}
.p-perfhero__inner{
  width:calc(100% - var(--side));display:grid;
  grid-template-columns:minmax(0,720fr) minmax(0,600fr);align-items:start;
}
.p-perfhero__pic{position:relative;margin:0;width:83.9%}
.p-perfhero__pic>img:first-child{width:100%;aspect-ratio:604/388;object-fit:cover;display:block}
/* 記録書は写真の右下にはみ出して重なる（背景を透過に抜いた素材） */
.p-perfhero__sub{position:absolute;left:64.57%;top:74.23%;width:39.24%;height:auto}
.p-perfhero__ttl{font-family:var(--f-mincho);font-size:40px;font-weight:600;line-height:1.5;letter-spacing:.03em}
.p-perfhero__txt{margin-top:40px;width:551px;max-width:100%;font-size:16px;font-weight:500;line-height:2.7}
.p-perfhero__txt .is-accent{color:var(--accent);font-weight:700}

/* ---------------------------------------------------------- 3. 写真の帯 */
.p-perfband{line-height:0}
.p-perfband img{width:100%;height:397px;object-fit:cover;display:block}

/* ------------------------------------------------------------- 4. Spec */
.p-spec{padding:90px 0 0}
.p-spec__head{}
.p-spec__lead{margin-top:40px;font-size:16px;font-weight:500;line-height:2.3;text-align:center}
.p-glo{margin-top:60px;background:var(--bg-page);padding:60px 100px}
.p-glo__inner{width:1000px;max-width:100%;margin-inline:auto}
.p-glo__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.p-glo__ttl{margin-top:10px;font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-glo__lead{width:549px;max-width:100%;font-size:16px;font-weight:500;line-height:1.8}
.p-glo__note{font-size:14px;color:#6d6d6d}
.p-glo .c-ptable{margin-top:30px}

/* --------------------------------------------------------- 5. Benefits */
.p-bene{padding:120px 0 0}
.p-bene__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:40px}
.p-bene__note{margin-top:13px;font-size:16px;font-weight:500;line-height:2.3;text-align:center}
.p-bene__list{margin-top:60px;border-top:1px solid var(--line)}
.p-bene__item{width:1000px;max-width:100%;margin-inline:auto;padding:100px 0;border-bottom:1px solid var(--line)}
.p-bene__item:last-child{border-bottom:0}
.p-bene__top{display:grid;grid-template-columns:var(--tw,minmax(0,1fr)) auto;gap:40px;align-items:start;justify-content:space-between}
.p-bene__topbody{min-width:0}
.p-bene__topbody .c-plate{margin-top:20px}
.p-bene__lead{margin-top:30px;font-size:16px;font-weight:500;line-height:1.8}
.p-bene__biglead{margin-top:30px;font-size:20px;font-weight:700;line-height:1.8}
.p-bene__body{margin-top:1.8em;font-size:16px;font-weight:500;line-height:1.8}
.p-bene__body .is-accent,.p-bene__foottxt .is-accent{color:var(--accent);font-weight:700}
.p-bene__chart{margin:0;flex:none;width:579px;max-width:100%}
.p-bene__chart img{width:100%;height:auto;display:block}
.p-bene__main{margin:0;flex:none}
.p-bene__main img{max-width:100%;height:auto;display:block}
.p-bene__item--01 .p-bene__top{grid-template-columns:minmax(0,413fr) minmax(0,579fr);gap:8px}

/* 01 の断熱材3枚 */
.p-bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px}
.p-bcard__img{margin:0;aspect-ratio:309/165;overflow:hidden}
.p-bcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.p-bcard .c-tagbox--full{margin-top:7px}
.p-bcard__ttl{margin-top:5px;font-size:16px;font-weight:700;line-height:1.7;color:var(--accent);text-align:center}
.p-bcard__ttl small{font-size:13px;font-weight:700}
.p-bcard__txt{margin-top:10px;font-size:13px;font-weight:500;line-height:1.8}

/* 01 の開口部の断熱 */
.p-bwin{display:grid;grid-template-columns:minmax(0,505fr) minmax(0,495fr);gap:0;margin-top:40px;align-items:start}
.p-bwin__head{display:flex;align-items:center;gap:5px}
.p-bwin__head b{font-size:16px;font-weight:700;line-height:1.7;color:var(--accent)}
.p-bwin__txt{margin-top:10px;font-size:13px;font-weight:500;line-height:1.8}
.p-bwin .c-ptable{margin-top:20px}
.p-bwin__pics{position:relative;min-height:381px}
.p-bwin__p1{position:absolute;right:0;top:0;margin:0;width:324px;max-width:100%}
.p-bwin__p2{position:absolute;right:153px;top:224px;margin:0;width:273px;max-width:100%}
.p-bwin__pics img{width:100%;height:auto;display:block}

/* 01 の光熱費パネル */
.p-bcost{margin-top:40px;background:var(--bg-page);padding:34px 118px}
.p-bcost__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.5;letter-spacing:.03em;text-align:center}
/* Figma 356:4289（PC）／439:8225（SP）。列は等分ではなく 162:240:261（PC）・79:100:150（SP）。
   区切り線は「2行を貫く縦の点線2本」＋「行間の横の点線1本」＝セルの罫線で作る。
   等分＋セルごとの短い縦線だと、スマホで「約／80,500／円」のように数字が3行に割れる。 */
.p-bcost__panel{margin-top:10px;background:var(--white);padding:22px 50px}
.p-bcost__row{display:grid;grid-template-columns:162fr 240fr 261fr;align-items:stretch;text-align:center}
/* ★セルを行の高さいっぱいに伸ばす。align-items:center のままだと罫線が中身の高さぶんしか
   引かれず、点線がセルごとに途切れて段違いに見える（Figmaは2行を貫く1本）。
   伸ばしたぶん、中身は flex で上下中央に置き直す。 */
.p-bcost__row>*{padding:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.p-bcost__big{align-items:baseline}
.p-bcost__row>*+*{border-left:1px dashed var(--line)}
.p-bcost__row+.p-bcost__row>*{border-top:1px dashed var(--line)}
.p-bcost__row span{font-size:14px;font-weight:500;line-height:1.9}
.p-bcost__row b{font-size:16px;font-weight:700;line-height:1.9}
.p-bcost__row b.is-accent{color:var(--accent);font-size:20px}
.p-bcost__big{font-size:16px!important}
.p-bcost__big b{font-family:var(--f-num);font-size:32px;font-weight:700;border:0}
.p-bcost__note{margin-top:10px;font-family:var(--f-mincho);font-size:16px;font-weight:600;line-height:1.9;text-align:center}
.p-bcost__note .is-accent{font-size:20px;color:var(--accent)}

/* 02〜05 の下段（本文＋イラスト） */
.p-bene__foot{display:grid;grid-template-columns:minmax(0,624fr) minmax(0,330fr);gap:46px;align-items:center;margin-top:40px}
.p-bene__foottxt{font-size:16px;font-weight:500;line-height:1.7}
.p-bene__foottxt+.p-bene__ul,.p-bene__ul+.p-bene__foottxt{margin-top:18px}
.p-bene__ul{font-size:16px;font-weight:700;line-height:1.7}
.p-bene__ul li::before{content:"・"}
.p-bene__sub{margin:0;width:330px;max-width:100%}
.p-bene__sub img{width:100%;aspect-ratio:330/220;object-fit:contain;display:block}

/* 02・05 の下段2枚 */
.p-bpics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px;padding-inline:90px}
.p-bpic figure{margin:0;aspect-ratio:396/206;overflow:hidden}
.p-bpic figure img{width:100%;height:100%;object-fit:cover;display:block}
.p-bpic__ttl{margin-top:10px;font-size:18px;font-weight:700;line-height:1.7;color:var(--accent);text-align:center}
.p-bpic__txt{margin-top:5px;font-size:14px;font-weight:500;line-height:1.8}

/* ---------------------------------------------------------- 6. Realize */
.p-rea{position:relative;background:var(--bg-page);margin-top:120px;padding:100px 0}
.p-rea__wm{
  position:absolute;left:39px;top:-118px;
  font-family:var(--f-en);font-size:96px;font-weight:600;line-height:1.8;letter-spacing:.03em;color:var(--bg-page);
}
.p-rea__intro{display:grid;grid-template-columns:minmax(0,492fr) minmax(0,418fr);gap:90px;align-items:center;width:1000px;max-width:100%;margin-inline:auto}
.p-rea__pic{margin:0}
.p-rea__pic img{width:100%;aspect-ratio:492/310;object-fit:cover;display:block}
.p-rea__ttl{font-family:var(--f-mincho);font-size:32px;font-weight:600;line-height:1.9;letter-spacing:.03em;color:var(--accent);white-space:nowrap}
.p-rea__lead{margin-top:31px;font-size:16px;font-weight:500;line-height:1.8}
.p-rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;width:1000px;max-width:100%;margin:40px auto 0}
.p-rcard{background:var(--white);border:.5px solid var(--dark);border-radius:10px;overflow:hidden}
.p-rcard__ttl{
  background:var(--dark);color:var(--white);height:54px;display:flex;align-items:center;justify-content:center;
  padding:0 12px;font-size:18px;font-weight:700;line-height:1.8;text-align:center;
}
.p-rcard__txt{padding:15px 21px 20px;font-size:14px;font-weight:500;line-height:1.61}
/* 見学会バナー */
.p-rbnr{position:relative;width:1000px;max-width:100%;margin:40px auto 0;min-height:187px;overflow:hidden}
.p-rbnr__bg{position:absolute;inset:0;z-index:0}
.p-rbnr__bg img{width:100%;height:100%;object-fit:cover;display:block}
.p-rbnr__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.p-rbnr__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 43px 44px 51px}
.p-rbnr__head{display:flex;align-items:center;gap:11px}
.p-rbnr__head span{background:var(--accent);color:var(--white);padding:0 15px;font-size:18px;font-weight:700;line-height:1.8}
.p-rbnr__head b{color:var(--white);font-size:24px;font-weight:700;line-height:1.8}
.p-rbnr__txt{
  width:472px;max-width:100%;margin-top:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.6);
  color:var(--white);font-size:16px;font-weight:500;line-height:1.8;
}
/* 第三者品質監査 */
.p-audit{width:1000px;max-width:100%;margin:60px auto 0}
.p-audit__lead{margin-top:20px;font-size:16px;font-weight:500;line-height:2.1}
.p-audit__panel{margin-top:20px;background:var(--white);padding:41px 72px}
.p-audit__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 100px;
  counter-reset:audit;
}
.p-audit__list li{display:flex;align-items:center;gap:29px;counter-increment:audit}
.p-audit__no{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:var(--white);font-family:var(--f-en);font-size:16px;font-weight:600;line-height:1;letter-spacing:.03em;
}
.p-audit__no::before{content:counter(audit)}
.p-audit__t{font-size:14px;font-weight:500;line-height:1.8}

/* ------------------------------------------- 7. ライフサイクルコスト */
.p-lcc{background:var(--bg-page);padding:0 0 100px}
.p-lcc__intro{display:grid;grid-template-columns:minmax(0,492fr) minmax(0,418fr);gap:90px;align-items:center}
.p-lcc__pic{margin:0}
.p-lcc__pic img{width:100%;aspect-ratio:492/310;object-fit:cover;display:block}
.p-lcc__ttl{font-family:var(--f-mincho);font-size:32px;font-weight:600;line-height:1.9;letter-spacing:.03em;color:var(--accent)}
.p-lcc__lead{margin-top:31px;font-size:16px;font-weight:500;line-height:1.8}
.p-lcc .c-ptable{margin-top:40px}
.p-lcc__note{margin-top:30px;font-size:16px;font-weight:500;line-height:1.8}
.p-lcc__note .is-accent{color:var(--accent);font-weight:700}

/* ----------------------------------- 8. 保証・アフターメンテナンス */
.p-after{position:relative;padding:98px 0}
.p-after__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.p-after__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* ★写真を暗くする黒。Figma(367:3451)は黒なしだが、それだと白文字の最悪部が2.93:1で読めない。
   白文字のコントラストを実測し、WCAG AA(4.5:1)を満たす一番薄い値＝25%にした（45%はFigmaより31暗すぎた）。 */
.p-after__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.p-after__inner{position:relative;z-index:1;width:min(100% - var(--side)*2, var(--wrap));margin-inline:auto;text-align:center}
.p-after__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em;color:var(--white)}
.p-after__lead{margin-top:8px;font-size:16px;font-weight:500;line-height:1.8;color:var(--white)}
.p-after__list{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:38px}
.p-acircle{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* ★236px（Figma）だと「（有償点検で延長可）」が円からはみ出す（実測 片側 -16px）。
     円の弦幅と文字幅を実測して 260px＋補足14px にした（2026-08-22）。 */
  width:260px;height:260px;border-radius:50%;background:var(--bg-page);padding:0 20px;text-align:center;
}
.p-acircle__ico{width:55px;height:55px;object-fit:contain}
.p-acircle__ttl{
  margin-top:8px;padding-bottom:8px;border-bottom:1px solid currentColor;
  font-size:24px;font-weight:700;line-height:1.8;color:var(--accent);
}
.p-acircle__body{margin-top:10px;color:#000}
.p-acircle__body small{display:block;font-size:14px;font-weight:500;line-height:1.4}
.p-acircle__body b{display:block;font-size:24px;font-weight:500;line-height:1.4}

/* --------------------------------------------------------------- 9. FAQ */
.p-faq{padding:100px 0}
.p-faq__head .c-sechead__en{font-size:48px}
.p-faq__head .c-sechead__ja{font-size:14px;font-weight:700}
.p-faq__list{margin-top:30px}
.p-faq__item+.p-faq__item{margin-top:10px}
.p-faq__q{
  display:flex;align-items:center;gap:18px;min-height:62px;padding:12px 60px 12px 30px;
  background:var(--dark);color:var(--white);cursor:pointer;list-style:none;position:relative;
  font-family:var(--f-mincho);font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.03em;
}
.p-faq__q::-webkit-details-marker{display:none}
.p-faq__q i{font-family:var(--f-en);font-size:28px;font-weight:400;font-style:normal;line-height:1}
.p-faq__q::after{
  content:"";position:absolute;right:30px;top:50%;width:12px;height:12px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(-45deg);transition:transform .3s var(--ease);
}
.p-faq__item[open] .p-faq__q::after{transform:translateY(-20%) rotate(135deg)}
.p-faq__a{background:var(--bg-page);padding:20px 30px}
.p-faq__a p{font-size:14px;font-weight:500;line-height:1.9}

/* --------------------------------------------- 10. Model House のリード */
.p-mh3__ttl{margin-top:36px;font-family:var(--f-mincho);font-size:32px;font-weight:600;line-height:1.9;letter-spacing:.03em;text-align:center}
.p-mh3__lead{margin-top:14px;font-size:16px;font-weight:500;line-height:1.8;text-align:center}

/* ---------------------------------- こだわりの性能：中間幅（〜1180px） */
@media (min-width:901px){
  /* 赤帯は1行で置く（Figma も文字が列幅を少し超える） */
  .c-plate span{white-space:nowrap}
}
@media (max-width:1180px){
  .p-perfhero__txt{width:auto}
  .p-glo{padding:60px var(--side)}
  .p-bwin{grid-template-columns:minmax(0,1fr)}
  .p-bwin__pics{min-height:0;display:flex;gap:20px;margin-top:30px}
  .p-bwin__p1,.p-bwin__p2{position:static;width:auto;flex:1 1 0;min-width:0}
  .p-bcost{padding:34px 40px}
  .p-audit__panel{padding:32px 40px}
  .p-audit__list{gap:20px 40px}
  .p-rea__ttl{white-space:normal}
  .p-rea__intro,.p-lcc__intro{gap:40px}
  .p-rbnr__inner{padding:32px}
}

/* --------------------------------------- こだわりの性能：SP（〜900px） */
@media (max-width:900px){
  /* 共通部品 */
  .c-wmhead__en{font-size:64px;line-height:.95}
  /* Figma SP（436:5643 / 439:8096）は24px・行高46px＝1.9。字送り.03emのままだと
     「上野工務店が標準でこだわる、」14文字が343pxに3px足りず「る、」だけ次行に落ちる。 */
  .c-wmhead__ja{position:static;margin-top:-30px;font-size:24px;line-height:1.9;letter-spacing:.01em}
  .c-secno small{font-size:14px}
  .c-secno b{font-size:40px}
  .c-plate{width:100%}
  /* ★Figma実測（439:8553）＝20px / line-height 2.3 / 明朝W6 / 左寄せ。
     さらに「｜…」側は行ごとに帯が分かれる（Figmaは3本の帯）。inline＋box-decoration-break:clone で
     折り返した行それぞれに背景を付ける。display:table だと1本の全幅帯になり中央寄せに見える（＝旧実装の崩れ）。 */
  .c-plate span{white-space:normal;padding:4px 13px;font-size:20px;line-height:2.3;text-align:left}
  /* スマホは赤帯を2本に。それぞれ文字幅ぴったり（Figma 439:8507/8553/8590/8669） */
  .c-plate--split{width:fit-content;max-width:100%;background:none;padding:0}
  .c-plate--split span{
    display:inline;background:var(--accent);padding:4px 13px;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .c-plate--split span+span{margin-top:0}
  .c-tagbox{font-size:14px;padding:0 14px}
  .c-tagbox--full,.c-tagbox--accent{font-size:13px}
  .c-eyebrow{font-size:14px}

  /* 表：スマホでは文字と余白を詰める（横スクロールはさせない） */
  .c-ptable th,.c-ptable td{padding:12px 10px;font-size:12px}
  .c-ptable thead th{font-size:12px}
  .c-ptable thead .c-ptable__lh,.c-ptable__l{padding-left:10px;font-size:12px}
  .c-ptable__v{font-size:12px}
  .c-ptable--glo .c-ptable__lh,.c-ptable--glo .c-ptable__l{width:80px}
  .c-ptable--sash{width:100%}
  .c-ptable--sash th,.c-ptable--sash td{padding:10px}
  .c-ptable--sash .c-ptable__lh,.c-ptable--sash .c-ptable__l{width:44%}
  .c-ptable--cmp th,.c-ptable--cmp td{height:auto;padding:10px 6px;font-size:11px}
  .c-ptable--cmp .c-ptable__c0{width:24%;padding-left:8px}
  /* ★スマホの狭い列だと「隙間が少なく高めやす／い」のように1文字だけの行（孤立行）が出る。
     balance＝短い文を行数そのままで均等割りする。中央寄せの短い見出しにだけ当てる。
     未対応ブラウザでは単に無視されるので、崩れる心配はない。 */
  /* ★balance は「中央寄せの短い見出し」だけに当てる。
     左寄せの本文に当てると全行が短く揃えられ、右に余白が空いて“左に寄って見える”。 */
  .c-plate span,.c-wmhead__ja,.c-tagbox,.p-bpic__ttl,
  .p-bcost__ttl,.p-bcost__note,.p-bcost__row span,.p-bcost__row b,
  .c-ptable--cmp th,.c-ptable--cmp td,
  .p-mh3__ttl,.p-rea__ttl,.p-lcc__ttl,.p-after__ttl{text-wrap:balance}
  /* ★★ text-wrap:pretty は使わない（2026-08-22・実機報告「テキストが左に寄っている」の犯人）。
     Chrome の pretty は「最終行が極端に短くなるのを防ぐ」だけで行長は詰めないが、
     Safari 26 / iOS 26 の pretty は段落全体を組み直す実装で、balance と同じく全行を短く揃える。
     実測（Safari 26.5.2・箱170.5px・13px・.p-bpic__txt の実文）：
       pretty なし … 7行 / 最長行 166.8px ＝ 箱の98%
       pretty あり … 9行 / 最長行 125.1px ＝ 箱の73% ← 右に大きな余白＝「左に寄って見える」
     しかも hard な <br> をまたいで段落全体を均すので、意図した改行位置まで崩れる。
     Chrome では再現しないので headless Chrome の検証を素通りする。
     → 孤立行は pretty に頼らず ｜（スマホだけ改行）/ ‖（PCだけ改行）で明示的に組むこと。 */
  .c-ptable--lcc thead .c-ptable__c2{font-size:13px}
  .c-ptable--lcc .is-big .c-ptable__c1 b{font-size:15px}
  .c-ptable--lcc .is-big .c-ptable__c2 b{font-size:22px}

  /* 2. 導入 */
  .p-perfhero{padding:40px 0 60px}
  .p-perfhero__inner{display:block;width:100%}
  .p-perfhero__pic{width:100%}
  .p-perfhero__sub{left:auto;right:16px;top:66%;width:44%}
  .p-perfhero__body{width:min(100% - var(--side-sp)*2, 100%);margin:30px auto 0;padding-inline:var(--side-sp)}
  .p-perfhero__ttl{font-size:24px}
  .p-perfhero__txt{margin-top:20px;font-size:14px;line-height:2.1}

  /* 3. 写真の帯 */
  .p-perfband img{height:180px}

  /* 4. Spec */
  .p-spec{padding:60px 0 0}
  .p-spec__lead{margin-top:24px;font-size:14px;line-height:2;text-align:left}
  .p-glo{margin-top:40px;padding:40px var(--side-sp)}
  .p-glo__head{display:block}
  .p-glo__ttl{font-size:20px}
  .p-glo__lead{width:auto;margin-top:16px;font-size:14px}
  .p-glo__note{font-size:12px}

  /* 5. Benefits */
  .p-bene{padding:70px 0 0}
  .p-bene__tags{gap:10px;margin-top:24px}
  .p-bene__note{font-size:14px;line-height:1.9}
  .p-bene__list{margin-top:40px}
  .p-bene__item{padding:50px 0}
  .p-bene__top,
  .p-bene__item--01 .p-bene__top{display:block}
  .p-bene__topbody .c-plate{margin-top:14px}
  .p-bene__lead,.p-bene__body{margin-top:20px;font-size:14px}
  .p-bene__biglead{margin-top:20px;font-size:17px}
  .p-bene__chart,.p-bene__main{width:100%;margin-top:24px}
  .p-bene__chart img,.p-bene__main img{width:100%;max-width:none;height:auto}
  .p-bcards{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:30px}
  /* 01 のカードはスマホだと［写真｜文章］の横並び（Figma 準拠） */
  .p-bcard{display:grid;grid-template-columns:minmax(0,120fr) minmax(0,215fr);column-gap:14px;align-items:start}
  .p-bcard__img{grid-row:1 / span 4;aspect-ratio:120/200}
  .p-bcard .c-tagbox--full{margin-top:0}
  .p-bcard__ttl{text-align:left;font-size:15px}
  .p-bcard__txt{font-size:13px}
  .p-bwin{margin-top:30px}
  .p-bwin__head{flex-wrap:wrap}
  .p-bwin__txt{font-size:13px}
  .p-bwin__pics{display:block;margin-top:20px}
  .p-bwin__p1{width:74%;margin-left:auto}
  .p-bwin__p2{width:62%;margin-top:-24px}
  .p-bcost{margin-top:30px;padding:20px 7px}
  .p-bcost__ttl{font-size:17px}
  .p-bcost__panel{padding:0}
  .p-bcost__row{grid-template-columns:70fr 109fr 150fr}
  .p-bcost__row>*{padding:9px 2px}
  .p-bcost__row span,.p-bcost__row b,.p-bcost__row b.is-accent{font-size:12px;letter-spacing:0}
  .p-bcost__big b{font-size:20px}
  .p-bcost__note{font-size:14px}
  .p-bcost__note .is-accent{font-size:16px}
  .p-bene__foot{display:block;margin-top:26px}
  .p-bene__foottxt,.p-bene__ul{font-size:14px}
  .p-bene__sub{width:100%;margin-top:24px}
  .p-bpics{grid-template-columns:repeat(2,minmax(0,1fr));gap:29px;margin-top:30px;padding-inline:0}
  .p-bpic__ttl{font-size:16px}
  .p-bpic__txt{font-size:13px}

  /* 6. Realize */
  .p-rea{margin-top:70px;padding:60px 0}
  .p-rea__wm{left:var(--side-sp);top:-62px;font-size:50px}
  .p-rea__intro{display:block}
  .p-rea__body{margin-top:24px}
  .p-rea__ttl{font-size:22px;white-space:normal}
  .p-rea__lead{margin-top:18px;font-size:14px}
  .p-rcards{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:30px}
  .p-rcard__ttl{height:auto;padding:12px;font-size:16px}
  .p-rcard__txt{padding:14px 16px 16px;font-size:13px}
  .p-rbnr{margin-top:30px}
  .p-rbnr__inner{display:block;padding:24px 16px}
  .p-rbnr__head{flex-wrap:wrap;gap:8px}
  .p-rbnr__head span{font-size:14px}
  .p-rbnr__head b{font-size:18px}
  .p-rbnr__txt{width:auto;font-size:14px}
  .p-rbnr__btn{margin-top:20px}
  .p-audit{margin-top:40px}
  .p-audit__lead{margin-top:16px;font-size:14px;line-height:1.9}
  .p-audit__panel{margin-top:16px;padding:24px 16px}
  .p-audit__list{grid-template-columns:minmax(0,1fr);gap:14px}
  .p-audit__list li{gap:14px}
  .p-audit__no{width:28px;height:28px;font-size:14px}
  .p-audit__t{font-size:12px}

  /* 7. ライフサイクルコスト */
  .p-lcc{padding:0 0 60px}
  .p-lcc__intro{display:block}
  .p-lcc__body{margin-top:24px}
  .p-lcc__ttl{font-size:22px}
  .p-lcc__lead{margin-top:18px;font-size:14px}
  .p-lcc .c-ptable{margin-top:30px}
  .p-lcc__note{margin-top:20px;font-size:14px}

  /* 8. 保証・アフター */
  .p-after{padding:60px 0}
  .p-after__ttl{font-size:22px}
  .p-after__lead{font-size:13px}
  /* ★SPはカンプ（Figma 439:9041）どおりの三角配置に戻す（2026-09-01）。
     実測＝円は直径163px、上段2つの間16px、下段は中央。上下は中心間162pxで縁がちょうど接する。
     幅342px（163x2+16）の器に flex-wrap で並べれば、3つ目が折り返して中央に来る。
     ⚠️ カンプの補足行は10〜11px＝社内ルールの「本文最小12px」を下回る。カンプ優先で通した。 */
  .p-after__list{
    flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:0 16px;width:342px;margin-inline:auto;margin-top:26px;
  }
  .p-acircle{width:163px;height:163px;padding:0 10px}
  .p-acircle__ico{width:28px;height:28px}
  .p-acircle__ttl{margin-top:6px;padding-bottom:4px;font-size:16px;line-height:1.4}
  .p-acircle__body{margin-top:6px}
  .p-acircle__body small{font-size:11px;line-height:1.5;letter-spacing:0}
  .p-acircle__body b{font-size:16px;line-height:1.5;letter-spacing:0}

  /* 9. FAQ */
  .p-faq{padding:60px 0}
  .p-faq__head .c-sechead{flex-direction:column;align-items:flex-start;gap:2px}
  .p-faq__head .c-sechead__en{font-size:34px}
  .p-faq__list{margin-top:20px}
  .p-faq__q{gap:12px;min-height:0;padding:14px 44px 14px 16px;font-size:15px}
  .p-faq__q i{font-size:22px}
  .p-faq__q::after{right:18px;width:9px;height:9px}
  .p-faq__a{padding:16px}
  .p-faq__a p{font-size:13px}

  /* 10. Model House のリード */
  .p-mh3__ttl{margin-top:24px;font-size:20px}
  .p-mh3__lead{font-size:13px;text-align:left}
}

/* ==========================================================================
   リフォーム・リノベーション（page-reform.php）
   デザイン正本: Figma 293:4100（PC 1440・16570px）/ 434:15746（SP 375・23706px）
   ※本案件で最大のページ。ここから下はこのページ専用（.p-rf*）。
     共用部品（.p-knowrec / .p-wkfilter / .p-wklist / .p-faq / .p-mh3 / .c-ptable--cmp）は
     ページ側からしか効かない詳細度で上書きしている＝他ページに影響しない。
   ========================================================================== */

/* 透かしの英字（Reason / Plan / Housing Support / Flow）
   セクションの外（上の白地）にはみ出して置く。色はセクションの地色と同じ＝白の上でだけ薄く見える。
   ★行送りは Figma の箱の高さ（173px ÷ 96px = 1.8）。詰めると和文見出しの下に潜る。 */
.p-rfreason__wm,.p-rfplan__wm,.p-rfsub__wm,.p-rfflow__wm{
  position:absolute;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--f-en);font-size:clamp(40px,6.67vw,96px);font-weight:600;line-height:1.8;
  letter-spacing:.01em;color:var(--bg-page);
}

/* ------------------------------------------------------------- 2. ヒーロー */
.p-rfhero{position:relative;min-height:560px;display:grid;place-items:center;overflow:hidden;color:var(--white)}
.p-rfhero__bg{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.p-rfhero__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* 暗幕はCSS側。写真は素のまま書き出しているので、差し替えても白文字が読める。 */
.p-rfhero__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.p-rfhero__inner{position:relative;z-index:1;width:min(100% - var(--side)*2, 600px);text-align:center}
.p-rfhero__ttl{font-family:var(--f-mincho);font-size:40px;font-weight:600;line-height:1.5;letter-spacing:.03em}
.p-rfhero__sub{margin-top:10px;font-family:var(--f-mincho);font-size:20px;font-weight:400;line-height:1.5;letter-spacing:.08em}
.p-rfhero__txt{margin-top:68px;font-size:16px;font-weight:500;line-height:1.8}

/* --------------------------------------------- 3. 実績バッジの帯（写真なし版） */
.p-knowrec--flat{background:var(--dark);padding:80px 0 78px}
.p-knowrec--flat .p-knowrec__badges{margin-top:0}

/* ------------------------------------------- 4. こんなお悩みありませんか？ */
.p-rfworry{padding:116px 0 188px}
.p-rfworry__head{text-align:center}
.p-rfworry__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfworry__lead{margin-top:20px;font-size:16px;font-weight:500;line-height:1.8}
.p-rfworry__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 11px;margin-top:34px}
.p-rfworry__item{display:flex;align-items:center;gap:17px;min-height:94px;padding:12px 10px 12px 25px;background:var(--bg-page)}
.p-rfworry__icon{width:50px;height:50px;object-fit:contain;flex:none}
.p-rfworry__txt{font-size:15px;font-weight:500;line-height:1.8;letter-spacing:0}
.p-rfworry__ans{display:grid;grid-template-columns:minmax(0,484fr) minmax(0,479fr);column-gap:37px;align-items:center;margin-top:50px}
.p-rfworry__pic{margin:0;line-height:0}
.p-rfworry__pic img{width:100%;height:auto;display:block}
.p-rfworry__a1,.p-rfworry__a3{font-size:16px;font-weight:500;line-height:1.8}
.p-rfworry__a2{margin-top:6px;font-size:24px;font-weight:500;line-height:1.8;color:var(--accent)}
.p-rfworry__a3{margin-top:6px}

/* -------------------------------------------- 5. Reason ｜選ばれる理由 01〜06 */
.p-rfreason{position:relative;background:var(--bg-page);padding:100px 0}
.p-rfreason__wm{left:19px;top:-118px}
.p-rfreason__head{position:relative;z-index:1;text-align:center}
.p-rfreason__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfreason__lead{margin-top:8px;font-size:16px;font-weight:500;line-height:1.8}
.p-rfreason__list{margin-top:70px}
/* 写真600 ｜ 文章460。行の高さは写真の縦横比が決め、文章は上下中央で揃う。 */
.p-rfreason__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.p-rfreason__pic{margin:0;line-height:0}
.p-rfreason__pic img{width:100%;height:auto;display:block}
.p-rfreason__body{padding:0 50px 0 90px}
/* 偶数行は写真が右。中身の位置は左右どちらでも同じ（paddingを入れ替えるだけ）。 */
.p-rfreason__item:nth-child(even) .p-rfreason__pic{order:2}
.p-rfreason__item:nth-child(even) .p-rfreason__body{padding:0 90px 0 50px}
.p-rfreason__itemttl{margin-top:30px;font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfreason__txt{margin-top:30px;font-size:16px;font-weight:500;line-height:1.8}
.p-rfreason__box{margin-top:40px;background:var(--white);border:1px solid #c0c0c0;padding:10px 18px}
.p-rfreason__box p{font-size:13px;font-weight:500;line-height:1.8}
.p-rfreason__btn{margin-top:30px}

/* ---------------------------------------------------------- 6. 写真の帯 */
.p-rfband{line-height:0}
.p-rfband img{width:100%;height:auto;display:block}

/* ------------------------------------- 7. Plan ｜種類と費用目安 TYPE 01〜04 */
.p-rfplan{position:relative;padding:120px 0 200px}
.p-rfplan__wm{left:50%;transform:translateX(-50%);top:33px}
.p-rfplan__head{position:relative;z-index:1;text-align:center}
.p-rfplan__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfplan__lead{margin-top:8px;font-size:16px;font-weight:500;line-height:1.8}
.p-rfplan__list{margin-top:50px}

.p-rftype{
  display:grid;grid-template-columns:minmax(0,473fr) minmax(0,305fr);column-gap:113px;
  border:1px solid #979797;background:var(--white);padding:40px 55px;
}
.p-rftype+.p-rftype{margin-top:30px}
.p-rftype:nth-child(even){background:var(--bg-page)}      /* 地の色は自動で縞になる */
.p-rftype__lead{grid-column:1;grid-row:1}
.p-rftype__pics{grid-column:2;grid-row:1}
.p-rftype__spec{grid-column:1 / -1;grid-row:2;margin-top:27px}
.p-rftype__table{grid-column:1 / -1;grid-row:3;margin-top:30px}
/* 写真2枚＝右に縦並び。文章と黒帯は左半分に寄る（TYPE 03）。 */
.p-rftype--split{grid-template-columns:minmax(0,540fr) minmax(0,277fr);column-gap:69px}
.p-rftype--split .p-rftype__pics{grid-row:1 / span 2}
.p-rftype--split .p-rftype__spec{grid-column:1;margin-top:10px}

.p-rftype__ttlrow{display:flex;align-items:baseline;gap:30px;padding-bottom:4px;border-bottom:1px solid var(--text)}
.p-rftype__no{display:flex;align-items:baseline;gap:14px;flex:none;color:var(--accent);font-family:var(--f-en);font-weight:600}
.p-rftype__no small{font-size:16px;font-weight:600;letter-spacing:.03em}
.p-rftype__no b{font-size:48px;font-weight:600;line-height:.875;letter-spacing:.03em}
.p-rftype__ttl{font-family:var(--f-mincho);font-size:24px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rftype__txt{margin-top:26px;font-size:16px;font-weight:500;line-height:1.8}
.p-rftype__pics figure{margin:0;line-height:0}
.p-rftype__pics figure+figure{margin-top:7px}
.p-rftype__pics img{width:100%;height:auto;display:block}

.p-rftype__spec{
  display:grid;grid-template-columns:minmax(0,371fr) minmax(0,385fr);column-gap:76px;
  background:var(--dark);color:var(--white);padding:20px 30px;
}
.p-rftype__cost{border-left:1px solid rgba(255,255,255,.5);padding-left:77px}
/* 「よくある施工内容」が無いときは費用だけの1カラム（縦線も消す） */
.p-rftype__spec--nolist{display:block}
.p-rftype__spec--nolist .p-rftype__cost{border-left:0;padding-left:0}
.p-rftype__slabel{font-size:16px;font-weight:700;line-height:1.8}
.p-rftype__ul{margin-top:8px}
.p-rftype__ul li{position:relative;padding-left:1.1em;font-size:14px;font-weight:500;line-height:1.8}
.p-rftype__ul li::before{content:"";position:absolute;left:.25em;top:.85em;width:3px;height:3px;border-radius:50%;background:currentColor}
.p-rftype__prices{margin-top:6px}
.p-rftype__price{display:flex;align-items:baseline;flex-wrap:wrap;color:#ffde80}
.p-rftype__price b{font-family:var(--f-en);font-size:48px;font-weight:600;line-height:.875;letter-spacing:.01em}
.p-rftype__price i{font-size:20px;font-weight:700;font-style:normal;line-height:1.8}
.p-rftype__price small{margin-left:5px;font-size:14px;font-weight:500;color:var(--white)}
.p-rftype__pl{margin-right:8px;font-size:14px;font-weight:500;color:var(--white)}
/* 費用が複数行（部分リフォーム）は2列に並べ、数字を一回り小さく */
.p-rftype__prices--multi{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:1px 24px}
.p-rftype__prices--multi .p-rftype__price{flex-wrap:nowrap;white-space:nowrap}
.p-rftype__prices--multi .p-rftype__price b{font-size:36px}
.p-rftype__prices--multi .p-rftype__price i{font-size:16px}
.p-rftype__term{margin-top:12px}
.p-rftype__term b{display:block;font-size:20px;font-weight:700;line-height:1.5;color:#ffde80}
.p-rftype__term--inline{display:flex;align-items:baseline;gap:18px}
.p-rftype__term--inline b{display:inline;font-size:16px;line-height:1.8}
.p-rftype__note{margin-top:2px;font-size:12px;font-weight:500;line-height:1.8;color:var(--white)}
/* ○◎△ は先頭の記号だけ一回り大きく（マークは画像でなく文字＝CMSから変えられる） */
.p-rftype__table b{font-size:19px;font-weight:400;line-height:1}
.p-rftype__table b+span{margin-left:.35em}

/* -------------------------------- 8. Housing Support ｜補助金・助成金 */
.p-rfsub{position:relative;background:var(--bg-page);padding:100px 0}
.p-rfsub__wm{left:26px;top:-118px}
.p-rfsub__top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,564fr) minmax(0,546fr);column-gap:90px;align-items:start}
.p-rfsub__pic{margin:0;line-height:0}
.p-rfsub__pic img{width:100%;height:auto;display:block}
.p-rfsub__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em;color:var(--accent)}
.p-rfsub__lead{margin-top:3px;font-size:16px;font-weight:500;line-height:1.8}
.p-rfsub__box{margin-top:31px;background:var(--white);padding:17px 35px}
.p-rfsub__box p{font-size:16px;font-weight:500;line-height:1.8}
/* 3列で折り返し、最後の段は中央に寄る＝枚数が変わっても自然に収まる */
.p-rfsub__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 7px;margin-top:70px}
.p-rfcard{
  display:flex;flex-direction:column;width:395px;max-width:100%;
  background:var(--white);border:1px solid var(--c);border-radius:10px;overflow:hidden;
}
.p-rfcard__head{display:flex;align-items:center;gap:6px;min-height:54px;padding:9px 15px;background:var(--c);color:var(--white)}
.p-rfcard__head img{width:36px;height:32px;object-fit:contain;flex:none}
.p-rfcard__name{font-size:20px;font-weight:700;line-height:1.5;letter-spacing:.02em}
.p-rfcard__name i{font-size:15px;font-style:normal;font-weight:700}
.p-rfcard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:15px 26px 24px}
.p-rfcard__desc{font-size:14px;font-weight:500;line-height:1.65}
/* 罫線は Figma 実測の破線（2px + 2px）。border の dotted/dashed はブラウザで長さが変わる。 */
.p-rfcard__rows{
  margin-top:18px;padding-top:13px;
  background:repeating-linear-gradient(to right,var(--c) 0 2px,transparent 2px 4px) top left/100% 1px no-repeat;
}
.p-rfcard__row{display:flex;gap:30px}
.p-rfcard__row+.p-rfcard__row{margin-top:10px}
/* 固定幅のラベルは字間0（.06em が乗ると90pxに5文字が入らず折れる） */
.p-rfcard__row dt{width:90px;flex:none;font-size:18px;font-weight:700;line-height:1.8;letter-spacing:0;color:var(--c)}
.p-rfcard__row dd{margin:0;font-size:14px;font-weight:500;line-height:1.8}
.p-rfsub__note{margin-top:40px;font-size:14px;font-weight:500;line-height:1.8;color:#6d6d6d;text-align:center}

/* ------------------------------- 9. Works ｜施工事例／ビフォーアフター */
.p-rfworks{padding:100px 0 218px}
.p-rfworks__head .c-sechead{gap:0}
.p-rfworks__head .c-sechead__en,.p-rfworks__head .c-sechead--center .c-sechead__en{font-size:64px;line-height:1.2}
.p-rfworks__head .c-sechead__ja{font-size:14px;font-weight:700;letter-spacing:.06em}
.p-rfworks .p-wkfilter{padding-top:40px}
.p-rfworks .p-wklist{padding:40px 0 0}
.p-rfworks__foot{margin-top:50px;text-align:center}

/* ------------------------------ 10. Flow ｜リノベーションの流れ 01〜07 */
.p-rfflow{position:relative;background:var(--bg-page);padding:100px 0}
.p-rfflow__wm{left:32px;top:-118px}
.p-rfflow__head{position:relative;z-index:1;text-align:center}
.p-rfflow__ttl{font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfflow__lead{margin-top:8px;font-size:16px;font-weight:500;line-height:1.8}
/* 丸をつなぐ点線はリスト1本。行数が変わっても自動で伸び縮みする。 */
.p-rfflow__list{position:relative;margin-top:40px;padding-left:149px;padding-right:90px}
.p-rfflow__list::before{
  content:"";position:absolute;left:186px;top:65px;bottom:111px;width:1px;
  background:repeating-linear-gradient(to bottom,var(--accent) 0 2px,transparent 2px 4px);
}
.p-rfstep{display:grid;grid-template-columns:75px 70px 242px 34px minmax(0,490px);align-items:start}
.p-rfstep__no{grid-column:1}
.p-rfstep__pic{grid-column:3}
.p-rfstep__body{grid-column:5}
.p-rfstep+.p-rfstep{margin-top:21px}
.p-rfstep__no{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:75px;height:75px;border-radius:50%;background:var(--accent);color:var(--white);
  font-family:var(--f-en);font-weight:600;line-height:1;
}
.p-rfstep__no small{font-size:13px;font-weight:600}
.p-rfstep__no b{margin-top:3px;font-size:32px;font-weight:600}
.p-rfstep__pic{margin:0;line-height:0}
.p-rfstep__pic img{width:100%;aspect-ratio:242/159;object-fit:cover;display:block}
.p-rfstep__ttl{margin-top:10px;font-family:var(--f-mincho);font-size:20px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfstep__txt{margin-top:10px;font-size:14px;font-weight:500;line-height:1.8}

/* ------------------------------------------------------- 12. Contact 帯 */
.p-rfcontact{
  position:relative;min-height:534px;display:grid;place-items:center;overflow:hidden;
  margin-top:40px;padding:60px 0;color:var(--white);
}
.p-rfcontact__bg{position:absolute;inset:0}
.p-rfcontact__bg img{width:100%;height:100%;object-fit:cover;display:block}
.p-rfcontact__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.p-rfcontact__inner{position:relative;z-index:1;width:min(100% - var(--side)*2, 620px);text-align:center}
.p-rfcontact__en{font-family:var(--f-en);font-size:64px;font-weight:600;line-height:1.8;letter-spacing:.01em}
.p-rfcontact__ttl{margin-top:9px;font-family:var(--f-mincho);font-size:36px;font-weight:600;line-height:1.9;letter-spacing:.03em}
.p-rfcontact__txt{margin-top:8px;font-size:16px;font-weight:500;line-height:1.8}
.p-rfcontact__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:19px;margin-top:40px}
.p-rfcontact__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:299px;max-width:100%;height:87px;border:1px solid rgba(255,255,255,.5);border-radius:4px;
  font-size:20px;font-weight:700;letter-spacing:.06em;transition:background .3s var(--ease);
}
.p-rfcontact__btn:hover{background:rgba(255,255,255,.14)}
.p-rfcontact__btn img{width:20px;height:20px;object-fit:contain;flex:none}

/* --------------------------------------------------- 13. Model House の上余白 */
.p-rf .p-mh3{padding-top:140px}

/* ------------------------------------------------- 中間幅（〜1180px） */
@media (max-width:1180px){
  .p-rfreason__body{padding:0 0 0 50px}
  .p-rfreason__item:nth-child(even) .p-rfreason__body{padding:0 50px 0 0}
  .p-rftype{column-gap:60px}
  .p-rftype--split{column-gap:40px}
  .p-rftype__spec{column-gap:40px}
  .p-rftype__cost{padding-left:40px}
  /* split（写真2枚）のとき黒帯は左半分に入るので、金額の2列は入らない＝1列に落とす */
  .p-rftype__prices--multi{grid-template-columns:minmax(0,1fr);justify-content:start}
  .p-rfsub__top{column-gap:50px}
  .p-rfflow__list{padding-left:60px;padding-right:0}
  .p-rfflow__list::before{left:97px}
  .p-rfstep{grid-template-columns:75px 40px 242px 24px minmax(0,1fr)}
}

/* --------------------------------------------------------- SP（〜900px） */
@media (max-width:900px){
  /* 透かしの英字 */
  .p-rfreason__wm,.p-rfsub__wm,.p-rfflow__wm{left:var(--side-sp);top:-62px}
  .p-rfplan__wm{top:20px}

  /* 2. ヒーロー */
  .p-rfhero{min-height:298px;padding:40px 0}
  .p-rfhero__ttl{font-size:24px}
  .p-rfhero__sub{margin-top:4px;font-size:15px}
  .p-rfhero__txt{margin-top:26px;font-size:12px}

  /* 3. 実績バッジの帯（★ここを書かないと、上のPC用 padding がSPでも効いてしまう） */
  .p-knowrec--flat{padding:60px 0}

  /* 4. こんなお悩み */
  .p-rfworry{padding:60px 0 72px}
  .p-rfworry__head{text-align:left}
  /* ★SPの本文はFigma実測で 14px / line-height 1.8（Noto Sans JP Medium）。
     `434:16130` が text-[14px] leading-[1.8] で確定。さらに `434:16179`(175/7行) `434:16256`(150/6行)
     `434:16223`(100/4行) `434:16231`(75/3行) `434:16161`(50/2行) が全て行送り25px＝14×1.8 で一致。
     13px にしていたぶん1行あたり2〜3文字多く入り、改行位置がデザインとズレていた（2026-08-22 修正）。
     ※ `p-rfworry__txt`(行送り27) `p-rfhero__txt` `p-rfplan__lead` は行送りが違い未確定＝据え置き。 */
  .p-rfworry__ttl{font-size:24px}
  .p-rfworry__lead{margin-top:14px;font-size:14px}
  .p-rfworry__list{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:26px}
  .p-rfworry__item{min-height:0;gap:12px;padding:14px 16px}
  .p-rfworry__icon{width:40px;height:40px}
  .p-rfworry__txt{font-size:13px}
  .p-rfworry__ans{grid-template-columns:minmax(0,1fr);row-gap:20px;margin-top:36px}
  .p-rfworry__a1,.p-rfworry__a3{font-size:14px}
  .p-rfworry__a2{font-size:18px}

  /* 5. Reason */
  .p-rfreason{padding:60px 0}
  .p-rfreason__ttl{font-size:22px}
  .p-rfreason__lead{font-size:14px}
  .p-rfreason__list{margin-top:30px}
  .p-rfreason__item{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .p-rfreason__item+.p-rfreason__item{margin-top:40px}
  .p-rfreason__body,.p-rfreason__item:nth-child(even) .p-rfreason__body{padding:0}
  /* SPは1列＝DOM順（写真→文章）。順番の入れ替えは戻す。 */
  .p-rfreason__item:nth-child(even) .p-rfreason__pic{order:0}
  .p-rfreason__itemttl{margin-top:16px;font-size:20px}
  .p-rfreason__txt{margin-top:16px;font-size:14px}
  .p-rfreason__box{margin-top:24px;padding:12px 14px}
  .p-rfreason__box p{font-size:12px}
  .p-rfreason__btn{margin-top:20px}

  /* 7. Plan */
  .p-rfplan{padding:60px 0 72px}
  .p-rfplan__ttl{font-size:24px}
  .p-rfplan__lead{font-size:13px}
  .p-rfplan__list{margin-top:26px}
  .p-rftype,.p-rftype--split{grid-template-columns:minmax(0,1fr);padding:24px 16px}
  .p-rftype+.p-rftype{margin-top:20px}
  .p-rftype__lead,.p-rftype__pics,.p-rftype__spec,.p-rftype__table,
  .p-rftype--split .p-rftype__pics,.p-rftype--split .p-rftype__spec{grid-column:1;grid-row:auto}
  /* SPは【本文 → 写真 → 黒帯 → 表】の順（Figma 434:15746）。
     DOM順は PC のグリッド配置に合わせて 本文→黒帯→写真 なので、order で並べ直す。 */
  .p-rftype__lead{order:0}
  .p-rftype__pics{order:1;margin-top:20px}
  .p-rftype__spec,.p-rftype--split .p-rftype__spec{order:2}
  .p-rftype__table{order:3}
  .p-rftype__spec,.p-rftype--split .p-rftype__spec{margin-top:20px;display:block;padding:16px}
  .p-rftype__table{margin-top:20px}
  /* SPは TYPE番号と見出しが縦に積む（Figma 434:15746） */
  /* ★SPの見出しはFigma実測で 24px / line-height 1.9 / letter-spacing .03em(=0.72px)。
     `434:16129`（こんなお悩み）`434:16445`（種類と費用目安）`434:16255`（戸建てリノベーション）
     いずれも text-[24px] leading-[1.9] tracking-[0.72px]。22px・19px にしていたのを揃えた（2026-08-22）。
     ヒーロー `434:15988`＝24px/1.5、Reasonの小見出し `434:16178`＝20px/1.9 は元から一致していて触っていない。 */
  .p-rftype__ttlrow{flex-direction:column;align-items:flex-start;gap:0}
  .p-rftype__no b{font-size:34px}
  .p-rftype__ttl{font-size:24px}
  .p-rftype__txt{margin-top:16px;font-size:14px}
  .p-rftype__cost{border-left:0;padding-left:0;margin-top:16px}
  .p-rftype__slabel{font-size:14px}
  .p-rftype__ul li{font-size:13px}
  .p-rftype__price b{font-size:36px}
  .p-rftype__price i{font-size:16px}
  .p-rftype__price small{font-size:12px}
  .p-rftype__prices--multi{grid-template-columns:minmax(0,1fr);justify-content:start}
  .p-rftype__prices--multi .p-rftype__price b{font-size:30px}
  .p-rftype__term b{font-size:17px}
  .p-rftype__note{font-size:11px}
  .p-rftype__table b{font-size:16px}
  /* 比較表の左列は 182px 固定のままだと「比較ポイント」が2行に折れる。
     この表だけ狭める（こだわりの性能の比較表には触らない）。 */
  .p-rftype__table .c-ptable__c0{width:88px}

  /* 8. Housing Support */
  .p-rfsub{padding:60px 0}
  .p-rfsub__top{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .p-rfsub__pic{order:2}
  .p-rfsub__ttl{font-size:22px}
  .p-rfsub__lead{font-size:13px}
  .p-rfsub__box{margin-top:20px;padding:16px}
  .p-rfsub__box p{font-size:13px}
  .p-rfsub__cards{gap:12px;margin-top:30px}
  .p-rfcard{width:100%}
  .p-rfcard__name{font-size:16px}
  .p-rfcard__name i{font-size:13px}
  .p-rfcard__body{padding:14px 16px 18px}
  .p-rfcard__desc{font-size:13px}
  .p-rfcard__row{gap:14px}
  .p-rfcard__row dt{width:76px;font-size:14px}
  .p-rfcard__row dd{font-size:13px}
  .p-rfsub__note{margin-top:24px;font-size:12px;text-align:left}

  /* 9. Works */
  .p-rfworks{padding:60px 0 72px}
  .p-rfworks__head .c-sechead__en,.p-rfworks__head .c-sechead--center .c-sechead__en{font-size:40px}
  .p-rfworks__head .c-sechead__ja{font-size:13px}
  .p-rfworks .p-wkfilter{padding-top:26px}
  .p-rfworks .p-wklist{padding:26px 0 0}
  .p-rfworks__foot{margin-top:36px}

  /* 10. Flow */
  .p-rfflow{padding:60px 0}
  .p-rfflow__ttl{font-size:22px}
  .p-rfflow__lead{font-size:13px}
  .p-rfflow__list{margin-top:26px;padding:0}
  .p-rfflow__list::before{left:22px;top:44px;bottom:60px}
  .p-rfstep{grid-template-columns:44px 16px minmax(0,1fr)}
  .p-rfstep+.p-rfstep{margin-top:24px}
  .p-rfstep__no{width:44px;height:44px}
  .p-rfstep__no small{font-size:9px}
  .p-rfstep__no b{margin-top:1px;font-size:19px}
  .p-rfstep__no{grid-row:1}
  .p-rfstep__pic{grid-column:3;grid-row:1;margin:0}
  .p-rfstep__body{grid-column:3;grid-row:2;margin:0}
  .p-rfstep__ttl{margin-top:12px;font-size:17px}
  .p-rfstep__txt{margin-top:6px;font-size:13px}

  /* 12. Contact */
  .p-rfcontact{min-height:0;margin-top:30px;padding:44px 0}
  .p-rfcontact__en{font-size:40px}
  .p-rfcontact__ttl{margin-top:2px;font-size:24px}
  .p-rfcontact__txt{margin-top:8px;font-size:13px;text-align:left}
  .p-rfcontact__btns{flex-direction:column;gap:12px;margin-top:26px}
  .p-rfcontact__btn{width:100%;height:60px;font-size:16px}

  /* 13. Model House */
  .p-rf .p-mh3{padding-top:80px}
}

/* ==========================================================================
   会社概要（page-company.php）
   デザイン正本: Figma 293:3624（PC 1440・4127px）/ 434:15282（SP 375・5177px）
   ※Works は トップと同じ部品（parts/front-works）。ここでは上下の余白だけ足している。
   ========================================================================== */

/* 集合写真の帯。PCとSPで見せる高さが違う（PC 1440x649 / SP 375x230）。
   ★写真の縦位置は Figma のトリミングを実測して合わせた（原画を1440幅に伸ばした上端224px＝62%）。
     支給の原寸に差し替えたら、ここを測り直す。 */
.p-cohero{line-height:0}
.p-cohero img{width:100%;aspect-ratio:1440/649;object-fit:cover;object-position:center 62%;display:block}

/* 会社概要の表 */
.p-cotable{padding:80px 0 0}
.p-cotable__table{width:100%;border-collapse:collapse;table-layout:fixed;border:1px solid #c9c9c9}
.p-cotable__table th,
.p-cotable__table td{
  border:.5px solid #b3b3b3;padding:20px 30px;text-align:left;vertical-align:top;
  font-size:14px;line-height:1.9;
}
.p-cotable__table th{
  width:239px;border-color:#7b7b7b;background:var(--dark);color:var(--white);
  font-weight:700;padding-left:29px;
}
.p-cotable__table td{background:var(--white);color:var(--text);font-weight:500}
/* 「2列にする」行＝空行で区切ったかたまりを2列に並べる（所在地の4拠点） */
.p-cotable__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:50px;row-gap:30px}

/* Works（トップと同じ部品）の上下余白だけこのページ用に */
.p-co .p-works{padding:140px 0}

@media (max-width:900px){
  .p-cohero img{aspect-ratio:375/230}
  .p-cotable{padding:41px 0 0}
  .p-cotable__table th,
  .p-cotable__table td{padding:9px 14px;font-size:13px}
  .p-cotable__table th{width:92px;padding-left:12px;padding-right:8px}
  /* SPは2列に並べない（かたまりを縦に積む） */
  .p-cotable__cols{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .p-co .p-works{padding:72px 0}
}