@charset "UTF-8";
/* ============================================================
   株式会社ツキノワ工務店（架空）デモサイト 共通スタイル
   数値は docs/実測/koumuten 配下の計測 JSON の値に合わせている。
   配色は6色だけを使う（参考の palette と同じ）。新しい色を5回以上使わないこと。
   ============================================================ */

/* ===== 1. 変数 ===== */
:root {
  --navy: #162f67;      /* 基調（本文・フッター背景・ロゴ） */
  --wh: #ffffff;
  --blue: #0249ad;      /* アクセント（ボタン・矢印） */
  --line: #162f671a;    /* 罫線（基調色の10%） */
  --yellow: #ffde1e;    /* 差し色（New タグ等） */
  --line-wh: #ffffff4d;
  --line-wh2: #ffffff1a; /* 白10%の罫線（参考のフッター開閉ボタン・下層で5本出る） */
  --hover: #2e63d9;     /* ホバー時の文字色（参考の hover 実測 rgb(46,99,217)） */
  --f-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --f-en: "Mulish", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --t: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  --inner: 1100px;
  --inner-s: 560px;
}

/* ===== 2. リセット ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-en), var(--f-jp);
  font-size: 15px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.4px;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: all var(--t); }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
.flex { display: flex; }
.inner { width: var(--inner); margin-inline: auto; }
.inner-s { width: var(--inner-s); margin-inline: auto; }
.en { font-family: var(--f-en); }

/* ===== 3. ロゴ（文字ロゴ・SVG） ===== */
.logo-svg { height: 50px; width: auto; color: var(--navy); display: block; }
.logo-svg .logo-jp { font-family: var(--f-jp); font-size: 21px; font-weight: 800; letter-spacing: 1px; fill: currentColor; }
.logo-svg .logo-en { font-family: var(--f-en); font-size: 10px; font-weight: 700; letter-spacing: 2.2px; fill: currentColor; }

/* ===== 4. ローディングの覆い・ライトボックスの下敷き ===== */
#intro {
  position: fixed; inset: 0; z-index: 200000; background: var(--wh);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
#intro.is-done { opacity: 0; }
.loader {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--blue);
  animation: spin 0.4s ease-in-out infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.lb-bg {
  position: fixed; inset: 0; z-index: 100000; background: var(--navy);
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: all 1s var(--ease);
}
.lb-bg.is-open { opacity: 1; pointer-events: auto; }
.lb-content { width: min(84vw, 1100px); transition: all 1s var(--ease); }
.lb-content img { width: 100%; }

/* ページ遷移の当たり判定（見た目には出ない） */
.mask {
  position: fixed; inset: 0; z-index: 10000; background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s linear 0.3s;
}
body.is-slide .mask { opacity: 1; pointer-events: auto; }

/* ページ遷移の幕（上から降りてくる） */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 100%; height: 100%;
  background: var(--wh); z-index: 9999; opacity: 1; pointer-events: none;
  transition: bottom 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s linear 0.8s;
}
body.is-slide::after { bottom: 0; transition: bottom 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s; }

/* ===== 5. ヘッダー ===== */
header {
  position: absolute; top: 0; left: 0; width: 100%; height: 72px;
  color: var(--navy); z-index: 9000;
  transition: opacity 0.7s var(--ease);
}
.header-inner { position: relative; height: 72px; display: flex; align-items: center; padding: 0 50px; }
/* ロゴはトップだけ h1・下層は p（参考の typography の見本がそうなっている）。
   下層の p.logo は高さ 0（中の a を絶対配置）＝p の見本がドロワーの連絡先のままになる。 */
.logo { line-height: 0; }
h1.logo a { display: block; font-size: 15px; font-weight: 700; line-height: 30px; }
p.logo { height: 0; }
p.logo a { position: absolute; top: 11px; left: 0; display: block; font-size: 15px; font-weight: 400; line-height: 30px; }
ul.nav { margin-left: auto; margin-right: 180px; gap: 28px; }
ul.nav li { font-size: 15px; font-weight: 400; line-height: 30px; letter-spacing: 0.4px; }
ul.nav li a { font-weight: 800; position: relative; display: block; }
ul.nav li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: translate(0, 0); opacity: 0;
  transition: all var(--t);
}
ul.nav li a:hover::after { opacity: 1; }
body.is-slide ul.nav li a::after { transform: translate(0, -100%); }

/* ヘッダーがヒーロー写真に重なるのはトップと事例詳細（.detail-hero＝project-01/02/03）。
   透過・紺文字は参考どおりだが、参考のヒーローが上部の明るい写真なのに対しこちらの生成写真には
   暗い面があるので、色や位置は変えずに淡い光彩だけで文字を拾う（2026-09-29 実機検証。
   事例詳細は project-03 の暗い室内写真でロゴ・ナビが読めなかったため同日に対象を広げた）。
   `page-project-` は詳細 3 ページだけに当たる（一覧は `page-project`）。 */
.page-index header .logo a, .page-index ul.nav li a,
body[class*="page-project-"] header .logo a, body[class*="page-project-"] ul.nav li a { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85); }
.page-index .mailer svg, .page-index .logo svg,
body[class*="page-project-"] .mailer svg, body[class*="page-project-"] .logo svg { filter: drop-shadow(0 1px 8px rgba(255, 255, 255, 0.9)); }

.mailer { position: fixed; top: 45px; right: 142px; width: 28px; height: 23px; line-height: 0; }
.mailer a { display: block; }
.mailer svg { width: 28px; height: 23px; display: block; }

.sp-menu { position: fixed; top: 32px; right: 54px; width: 48px; height: 48px; z-index: 20000; }
.sp-menu button {
  width: 48px; height: 48px; text-align: center; color: var(--navy);
  background: var(--wh); border: 1px solid var(--line); border-radius: 50%;
  padding: 0; cursor: pointer; position: relative;
}
.sp-menu button span {
  position: absolute; left: 14px; width: 20px; height: 2px; background: currentColor;
  transition: all var(--t);
}
.sp-menu button span:nth-child(1) { top: 17px; }
.sp-menu button span:nth-child(2) { top: 23px; }
.sp-menu button span:nth-child(3) { top: 29px; }
body.is-menu .sp-menu button { background: transparent; border-color: var(--line-wh); color: var(--wh); }
body.is-menu .sp-menu button span:nth-child(1) { top: 23px; transform: rotate(33deg); }
body.is-menu .sp-menu button span:nth-child(2) { opacity: 0; }
body.is-menu .sp-menu button span:nth-child(3) { top: 23px; transform: rotate(-33deg); }

/* ===== 6. ドロワー（PC でも開くメガメニュー） ===== */
.menu-display {
  position: fixed; inset: 0; z-index: 19999; background: var(--navy);
  color: var(--wh); overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
body.is-menu .menu-display { opacity: 1; pointer-events: auto; }
/* 本文の器は 560px の中央寄せを9か所そろえる（参考の containers 上位2＝1100 / 560）。 */
.menu-inner { position: relative; width: var(--inner); margin-inline: auto; padding-top: 120px; height: 100%; }
.menu-list { flex-direction: column; gap: 0; width: var(--inner-s); margin-inline: auto; }
.list-block { width: var(--inner-s); margin-inline: auto; }
.list-block + .list-block { margin-top: 28px; }
.list-block h2 { font-family: var(--f-en); font-size: 18px; font-weight: 800; line-height: 36px; letter-spacing: 0.4px; color: var(--wh); }
.list-block h2.en { letter-spacing: 1.4px; }
.contact-info { flex-direction: column; margin-top: 12px; width: var(--inner-s); margin-inline: auto; }
.contact-info p { font-size: 13px; font-weight: 500; line-height: 26px; letter-spacing: 0.4px; color: var(--wh); }
dl.addr { margin-top: 18px; border-top: 1px solid var(--line-wh); padding-top: 14px; width: var(--inner-s); margin-inline: auto; }
dl.addr dt { font-family: var(--f-en); font-size: 13px; font-weight: 800; line-height: 26px; letter-spacing: 1px; color: var(--wh); }
dl.addr dd { font-size: 13px; font-weight: 500; line-height: 20.8px; letter-spacing: 0.4px; color: var(--wh); margin-bottom: 12px; }
.menu-display a.post { gap: 14px; margin-top: 16px; align-items: flex-start; width: var(--inner-s); margin-inline: auto; }
.menu-display a.post img { width: 100px; height: 100px; object-fit: cover; }
.menu-display a.post h3.ttl { font-family: var(--f-en); font-size: 16px; font-weight: 700; line-height: 32px; letter-spacing: 0.4px; color: var(--wh); }
.menu-display a.post p { font-size: 15px; font-weight: 500; line-height: 15px; letter-spacing: 0.4px; color: var(--wh); }
.contents-block ul { margin-top: 10px; width: var(--inner-s); margin-inline: auto; }
.contents-block li a { display: block; font-size: 15px; font-weight: 700; line-height: 34px; color: var(--wh); }
.contents-block li a:hover { color: var(--yellow); }
/* ドロワーの大きな写真と下端のバナー画像はトップだけ（参考の img 総数＝トップ 6・下層 3） */
body:not(.page-index) .menu-photo, body:not(.page-index) .menu-bnr img { display: none; }
.menu-photo { position: absolute; left: 0; bottom: -300px; gap: 0; }
.menu-photo img { width: 730px; height: 568px; object-fit: cover; }
.menu-photo img:last-child { width: 570px; }
.menu-bnr { position: absolute; right: 0; top: 120px; display: block; }
.menu-bnr img { width: 232px; height: 107px; object-fit: cover; }
.menu-bnr span { display: block; font-family: var(--f-en); font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--wh); margin-top: 6px; }

/* ===== 7. 本文の枠と固定フッター ===== */
/* display: flow-root ＝下の .bg の margin-bottom（フッターを出すための余白）を barba の内側に留める。
   参考の barba は「本文＋フッター分の余白」の高さで測れる（contact は barba がそのままブロックになる）。 */
.barba { position: relative; display: flow-root; }
/* 本文は最低でも画面いっぱい（参考の .bg も min-height: 100vh）。無いと本文の短いページで
   背面のフッターが本文の途中に覗き、注記や列見出しと重なって見える。 */
.bg { position: relative; z-index: 1; background: var(--wh); min-height: 100vh; }
.wrap-inner { position: relative; }

/* 参考の実測は sticky（left:0 / bottom:0 / height:100vh / z-index:-1）。
   fixed にすると中身が画面の高さを超えたぶんへ到達できず、SP では架空表記の注記と
   著作権表示が画面外に出たまま読めなくなる（2026-09-29 実機検証）。 */
footer { position: sticky; left: 0; bottom: 0; width: 100%; height: 100vh; z-index: -1; background: var(--navy); color: var(--wh); }

.contact-con { background: var(--wh); color: var(--wh); padding: 100px 0 60px; }
.contact-con .inner { align-items: flex-start; justify-content: space-between; }
.contact-head { position: relative; }
.contact-con h2 {
  display: inline-block; font-size: 32px; font-weight: 800; line-height: 32px; letter-spacing: 0.4px;
  color: var(--wh); background: var(--navy); padding: 18px 28px;
}
.contact-body { gap: 60px; align-items: flex-start; }
.c-item { min-width: 300px; }
h3.c-label { font-family: var(--f-en); font-size: 22px; font-weight: 800; line-height: 28.6px; letter-spacing: 0.4px; color: var(--blue); }
h3.c-tel { font-family: var(--f-en); font-size: 25px; font-weight: 900; line-height: 32.5px; letter-spacing: 0.4px; color: var(--blue); }
h3.c-tel a { display: flex; align-items: center; gap: 10px; }
h3.c-tel img { width: 28px; height: 28px; }
.c-item p { color: var(--navy); font-size: 13px; line-height: 26px; }
a.c-link {
  display: flex; align-items: center; gap: 12px; width: 300px; height: 62px;
  padding: 0 24px; margin-bottom: 14px; color: var(--wh); background: var(--blue);
  font-size: 15px; font-weight: 800; line-height: 30px;
}
a.c-link img { width: 28px; height: 50px; object-fit: contain; }
a.c-link:hover { background: var(--navy); }

.f-nav { background: var(--navy); color: var(--wh); padding: 50px 0 200px; }
.f-nav .inner { position: relative; }
.f-nav h2.en { font-size: 18px; font-weight: 700; line-height: 36px; letter-spacing: 0.4px; color: var(--wh); }
.f-col { margin-top: 26px; width: 200px; display: inline-block; vertical-align: top; }
.f-col-head {
  display: block; width: 100%; text-align: left; padding: 0; background: none;
  border: 0; border-top: 1px solid var(--line-wh2); color: var(--wh);
  font-family: var(--f-en), var(--f-jp); font-size: 15px; font-weight: 800; line-height: 40px; letter-spacing: 0.4px;
  cursor: pointer;
}
.f-col ul { margin-top: 6px; }
.f-col li a { display: block; font-size: 13px; font-weight: 500; line-height: 28px; color: var(--wh); }
.f-col li a:hover { color: var(--yellow); }
/* ロゴは列の下（参考は列の下に「ロゴ＋社名」の段を置く）。top: 40px だと右端の列見出し
   「事例をもっと見る」の上に乗って文字が読めなくなる（2026-09-29 実機検証）。 */
.f-logo { position: absolute; right: 0; top: 226px; display: block; }
.f-logo-svg { height: 50px; color: var(--wh); }
.f-note { margin-top: 36px; font-size: 12px; line-height: 22px; color: var(--wh); }
.f-copy { margin-top: 6px; font-size: 12px; line-height: 22px; color: var(--wh); }

/* ===== 8. 共通パーツ（ボタン・ページ送り） ===== */
.btn-wrap { text-align: right; }
/* 参考の btn 系はサイト標準の文字指定（15/400/0.4/30）。ボタン要素の既定フォント（13.3／normal）のままだと
   typography の [class*="btn"] が食い違う（中身が空のアイコンボタンでも比較の対象になる）。 */
[class*="btn"] { font-size: 15px; font-weight: 400; letter-spacing: 0.4px; line-height: 30px; }
/* 参考の p.btn-custom だけは行の高さを持たない（normal）。行の高さは中のリンク側で作る。 */
.btn-custom { position: relative; display: inline-block; line-height: normal; }
.btn-custom a, .btn-custom span { position: relative; display: inline-block; padding-right: 60px; font-weight: 800; line-height: 30px; }
.btn-custom > a::before {
  content: ""; position: absolute; top: 50%; right: 24px; width: 0; height: 0;
  border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent var(--blue);
  animation: 0.7s var(--ease) 0s 1 normal both running btnHoverReverseSLide;
}
.btn-custom:hover > a::before {
  animation: 0.7s var(--ease) 0s 1 normal both running btnHoverSLide;
}
@keyframes btnHoverSLide {
  0% { right: 24px; border-color: transparent var(--blue); }
  50% { right: -24px; }
  51% { opacity: 0; right: 100%; }
  52% { right: calc(100% + 24px); }
  100% { opacity: 1; right: calc(100% - 28px); }
}
@keyframes btnHoverReverseSLide {
  0% { right: calc(100% - 28px); }
  50% { right: 100%; opacity: 0; }
  51% { right: -24px; }
  100% { opacity: 1; right: 24px; }
}
.arrow { position: relative; display: inline-block; width: 40px; height: 8px; overflow: hidden; }
.arrow::before { content: ""; position: absolute; top: 3px; left: 51%; width: 10px; height: 2px; background: var(--blue); }
a:hover .arrow::before { animation: 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0s 1 normal both running arrowHoverSLide; }
@keyframes arrowHoverSLide {
  0% { left: 51%; } 50% { left: calc(100% + 10px); } 51% { left: 0; } 100% { left: 51%; }
}
@keyframes arrowPrevHoverSLide {
  0% { right: 53%; } 50% { right: calc(100% + 10px); } 51% { right: 0; } 100% { right: 53%; }
}

/* ページ送り: a は画面いっぱい（参考 1280・375）、内側に 1100 の中央寄せ（参考 contentW 1100） */
a.next-page { display: block; width: 100%; padding: 60px 0; }
.np-inner {
  width: var(--inner); margin-inline: auto;
  align-items: center; justify-content: space-between; border-top: 1px solid var(--line);
}
a.next-page p.en { font-size: 15px; font-weight: 800; letter-spacing: 1.4px; color: var(--blue); }
a.next-page p { font-size: 15px; line-height: 30px; }

/* ホバー（参考の hover[] は self／img／見出し／::before／::after の color と border-color だけが変わる。
   transform・opacity・background をホバーで動かすと「変化するプロパティ」が食い違って FAIL する） */
a.zoom-in:hover { color: var(--hover); }
.fig-link { display: block; height: 100%; }

/* ===== 9. ヒーロー（トップ） ===== */
.top-wrap { position: relative; height: 800px; }
.top-wrap .swiper { height: 800px; }
.swiper-img { height: 800px; overflow: hidden; }
.swiper-img img { width: 100%; height: 100%; object-fit: cover; }
.swiper .swiper-slide-active .swiper-img img { animation: 10s linear 0s 1 normal both running scale; }
@keyframes scale { 0% { transform: scale3d(1, 1, 1); } 100% { transform: scale3d(1.15, 1.15, 1); } }
@keyframes scaleSp { 0% { translate: 0%; } 100% { translate: calc(-100% + 100vw); } }
.slide-cap {
  position: absolute; left: 50px; bottom: 60px; z-index: 2;
  font-size: 15px; font-weight: 800; line-height: 30px; color: var(--wh);
  /* 生成写真は下端が明るい面になることがあり（事例詳細の無垢床・ラグ）、白のままだと
     キャプションが沈んで読めない。色・位置・寸法は参考のまま、影だけで見え方を合わせる
     （.schedule h3 と同じ手当て・2026-09-29 実機検証） */
  text-shadow: 0 2px 14px rgba(22, 47, 103, 0.6);
}
.top-wrap .swiper-pagination { bottom: 30px; display: flex; gap: 14px; justify-content: center; }
.top-wrap .swiper-pagination-bullet { width: 22px; height: 22px; background: none; opacity: 1; position: relative; }
.top-wrap .swiper-pagination-bullet svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.top-wrap .swiper-pagination-bullet .track { fill: none; stroke: var(--line-wh); stroke-width: 2; }
.top-wrap .swiper-pagination-bullet .fill { fill: none; stroke: var(--wh); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.swiper-pagination-bullet-active .fill { animation: 5s linear 0.4s 1 normal forwards running circle; }
@keyframes circle { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }

/* ===== 10. 画像の遅延読込（参考と同じクラス名） ===== */
.img-load { opacity: 0; transition: opacity 1s var(--ease) 0.3s; }
.img-load.loaded { opacity: 1; }

/* ===== 11. Q&A の開閉 ===== */
.qa-block dl dt:hover { animation: 1s linear 0s 1 normal both running qa; }
@keyframes qa { 0% { background: #f7f7f9; } 100% { background: var(--wh); } }

/* ===== 12. ブレークポイント（参考の @media の px 値をすべて宣言する） ===== */
@media screen and (min-width: 1501px) { .inner { width: var(--inner); } }
@media screen and (min-width: 768px) and (max-width: 1500px) { .inner { max-width: calc(100% - 60px); } }
@media (min-width: 782px) { .f-col { width: 200px; } }
@media (max-width: 781px) { .f-col { width: 100%; } }
@media (min-width: 600px) { .menu-list { gap: 60px; } }
@media (max-width: 600px) { .menu-list { gap: 0; } }
@media screen and (max-width: 320px) { .header-inner { padding: 0 14px; } }

@media screen and (min-width: 768px) {
  .sp-only { display: none !important; }
}

@media screen and (max-width: 767px) {
  :root { --inner: 335px; }
  .pc-only { display: none !important; }
  .inner { width: auto; margin-inline: 20px; }

  header { position: fixed; height: 49px; z-index: 99999; }
  .header-inner { height: 49px; padding: 0 20px; }
  .logo-svg { height: 38px; }
  ul.nav { display: none; }
  .mailer { position: absolute; top: 13px; right: 62px; }
  /* z-index: auto だと同じ header の中で後から来る .menu-display（19999）に覆われ、
     開いたメニューの閉じるボタンが押せなくなる（2026-09-29 実機検証・不動産レーンと同型）。
     position は absolute のまま＝固定要素の計測値は変わらない */
  .sp-menu { position: absolute; top: 25px; right: 25px; width: 24px; height: 24px; z-index: 20000; }
  .sp-menu button { width: 24px; height: 24px; background: none; border: 0; }
  .sp-menu button span { left: 1px; width: 22px; }
  .sp-menu button span:nth-child(1) { top: 5px; }
  .sp-menu button span:nth-child(2) { top: 11px; }
  .sp-menu button span:nth-child(3) { top: 17px; }
  body.is-menu .sp-menu button span:nth-child(1) { top: 11px; }
  body.is-menu .sp-menu button span:nth-child(3) { top: 11px; }

  .menu-inner { width: auto; margin-inline: 20px; padding-top: 70px; }
  .menu-list { flex-direction: column; gap: 0; }
  /* SP では 560px の器を使わない（参考の containers は 375 幅では空＝はみ出しの原因になる） */
  .menu-list, .list-block, .contact-info, dl.addr, .menu-display a.post, .contents-block ul {
    width: auto; margin-inline: 0;
  }
  .list-block + .list-block { margin-top: 0; }
  .menu-photo { position: static; flex-direction: column; margin-top: 24px; }
  .menu-photo img { width: 100%; height: 291.8px; }
  .menu-photo img:last-child { width: 100%; height: 373.7px; }
  .menu-bnr { position: static; margin-top: 20px; }
  .menu-bnr img { width: 116px; height: 54px; }

  /* ヒーローは画面より広い写真を流す（参考の実測 525×577＝比 0.91・横に流れる scaleSp と対） */
  .top-wrap, .top-wrap .swiper, .swiper-img { height: 667px; }
  .swiper-img img { width: 525px; height: 577px; }
  .swiper .swiper-slide-active .swiper-img img { animation: 7.5s linear 0s 1 normal both running scaleSp; }
  .slide-cap { left: 20px; bottom: 40px; }
  /* SP のトップは写真 577 に対し器が 667＝キャプションは写真の下の白帯に出る。参考もそこは紺の文字で、
     白のままでは白地に白になって読めなかった（2026-09-29 実機検証・参考の実測色 #1D356B ≒ --navy）。
     事例詳細（.detail-hero）は SP でも写真が器いっぱいなので白＋影のまま。 */
  .top-wrap .slide-cap { color: var(--navy); text-shadow: none; }

  /* 共通部の SP（参考の実測: contact-con pad 150/25/60/25・f-nav pad 40/25/30/25・ページ送り pad 60/25） */
  .contact-con { padding: 150px 25px 60px; }
  .contact-con .inner, .f-nav .inner { width: auto; margin-inline: 0; }
  .contact-con .inner { flex-direction: column; }
  .contact-con h2 { font-size: 24px; line-height: 24px; padding: 14px 20px; }
  .contact-body { flex-direction: column; gap: 24px; margin-top: 24px; }
  .c-item { min-width: 0; }
  a.c-link { width: 100%; }
  .f-nav { padding: 40px 25px 30px; }
  .f-nav h2.en { font-size: 15px; line-height: 30px; }
  /* 参考の f-nav は SP で 727（ページにより 770／813／856）。見出し行を高くして基準の 727 に合わせる */
  .f-col { display: block; width: 100%; margin-top: 0; }
  .f-col-head { line-height: 53px; }
  .f-col ul { display: none; }
  .f-col.is-open ul { display: block; }
  .f-logo { position: static; margin-top: 30px; }
  a.next-page { width: 100%; margin-inline: 0; padding: 60px 25px; }
  .np-inner { width: 100%; }

  /* 書体の見本（参考の typography は h3＝ドロワーの記事見出し・p＝ドロワーの連絡先・dt＝住所の見出し） */
  .menu-display a.post h3.ttl { font-size: 15px; line-height: 30px; }
  .contact-info p { line-height: 20.8px; }
  dl.addr dt { line-height: 20.8px; }
}

/* ============================================================
   トップ（index）— ブロックの段・寸法は計測 JSON の index に合わせる
   [0]ヒーロー 800 / [1]hello 1000 / [2]事例 1330.7 / [3]レポート 4855
   [4]インタビュー 5572 / [5]ブログ 6552.2 / [6]会社 7239.2 / [7]デザイン 7782.8
   [8]ガイド 8326.3 / [9]ページ送り 8636.3
   並べ方は参考の目視に合わせている（統括判断C・2026-09-25）:
   事例カード＝縦書きの種別柱＋状況の吹き出し＋写真（丸ボタン）＋家の名前＋札つき一行リンク
   レポート／ブログ＝縦書きの見出し柱（絶対配置）＋左に重ねた写真＋日付・札・見出しの横一列
   インタビュー＝大きな英字3行＋右にリード＋写真を重ねた2件
   ============================================================ */

/* [1] リード */
.hello { width: var(--inner); margin: 200px auto 0; padding-left: 80px; }
.hello h2 { font-size: 30px; font-weight: 800; letter-spacing: 0.4px; line-height: 48px; max-width: 900px; }
.hello p { margin-top: 12px; font-size: 13px; line-height: 22px; }

/* [2] 建築事例の一覧カード */
.project-list-wrap { width: var(--inner); margin: 200px auto 0; flex-wrap: wrap; column-gap: 85px; row-gap: 166px; }
.project-card { position: relative; width: 310px; }
.p-type {
  position: absolute; right: calc(100% + 14px); top: 0; writing-mode: vertical-rl;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 20px; white-space: nowrap;
}
.card-main { display: block; }
.p-state {
  background: var(--line); padding: 14px 16px;
  font-size: 15px; font-weight: 800; line-height: 24px;
}
.p-state span { display: block; font-size: 13px; font-weight: 400; line-height: 22px; }
/* 吹き出しは工事中・設計中のカードだけ（参考は上2段。残りは同じ位置に素の一行） */
.project-card:not(.is-fresh) .p-state { background: none; padding: 0 0 14px; font-size: 13px; font-weight: 400; line-height: 26px; }
.project-card:not(.is-fresh) .p-state span { display: inline; font-size: 13px; }
.card-photo { display: block; position: relative; width: 310px; height: 392px; overflow: hidden; }
.card-photo .swap { display: block; position: relative; width: 310px; height: 392px; }
.card-photo .swap img { position: absolute; inset: 0; width: 310px; height: 392px; object-fit: cover; }
.card-photo .swap img.b { opacity: 0; transition: opacity 0.7s var(--ease); }
.project-card:hover .swap img.b { opacity: 1; }
.card-photo .round {
  position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue);
}
.card-photo .round::before {
  content: ""; position: absolute; top: 14px; left: 15px;
  border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent var(--wh);
}
.card-photo .badge { display: none; }
.project-card h2 { margin-top: 14px; font-size: 23px; font-weight: 800; letter-spacing: 0.4px; line-height: 29.9px; }
.card-news { display: block; margin-top: 10px; font-size: 13px; line-height: 24px; text-decoration: underline; }
.chip {
  display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; line-height: 20px; letter-spacing: 0.4px;
  color: var(--wh); background: var(--blue); text-decoration: none; vertical-align: 2px;
}
.chip.is-new { background: var(--yellow); color: var(--navy); }

/* [3][5] レポート・ブログの3件出し */
.blog-topic { position: relative; width: var(--inner); margin: 240px auto 0; }
/* 縦書きの見出し柱。writing-mode は h2・p に当てる（親に当てると段が折り返して横にはみ出す） */
.topic-head { position: absolute; left: -46px; top: 0; display: flex; gap: 10px; }
.topic-head h2 { writing-mode: vertical-rl; font-size: 40px; font-weight: 800; letter-spacing: -0.8px; line-height: 40px; }
.topic-head p { writing-mode: vertical-rl; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; line-height: 20px; }
.blog-list { position: relative; padding-left: 240px; min-height: 200px; }
.blog-list .thumb { position: absolute; left: 0; top: 0; display: block; width: 200px; height: 200px; overflow: hidden; }
.blog-list .thumb img { width: 200px; height: 200px; object-fit: cover; }
.blog-list .thumb .badge { display: none; }
/* 罫線は li 側に置く（a に border-color を明示するとホバーで border-color が一様にならず FAIL する） */
.blog-item { border-top: 1px solid var(--line); }
.blog-list a.post { display: flex; align-items: center; gap: 14px; padding: 36px 0; }
.blog-list .y { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; line-height: 20px; }
.blog-list .md { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; line-height: 20px; margin-right: 6px; }
/* 行は flex。見出しが 2 行になる行だけチップが縮められて「お知ら／せ」と折れていた
   （同じ列の 6 文字チップは 1 行なのに 4 文字が折れる＝2026-09-29）。チップは縮めない。 */
.blog-list .chips { display: flex; gap: 6px; flex: 0 0 auto; }
.blog-list .chips li {
  padding: 0 10px; border-radius: 12px; font-size: 11px; font-weight: 700; line-height: 20px;
  color: var(--wh); background: var(--blue); white-space: nowrap;
}
.blog-list a.post h2 { font-size: 19px; font-weight: 700; letter-spacing: 0.4px; line-height: 26.6px; }
.blog-topic .btn-wrap { margin-top: 30px; }
.blog-topic .btn-custom > a {
  background: var(--blue); color: var(--wh); border-radius: 999px; padding: 12px 56px 12px 28px; line-height: 30px;
}
.blog-topic .btn-custom > a::before { border-color: transparent var(--wh); }

/* [4] お客様インタビュー */
.iv-band { position: relative; width: 100%; margin: 300px 0 0; }
.iv-bg { position: absolute; left: 0; right: 0; top: 130px; bottom: 60px; background: var(--line); z-index: -1; }
/* 大きな英字は流し込み（3行＝264px）。ブロックの高さ 740.2 は 264 ＋ 12 ＋ 写真の段 465 でできている */
.iv-big { padding-left: 90px; font-size: 88px; font-weight: 800; letter-spacing: -0.8px; line-height: 88px; }
.iv-lead { position: absolute; right: 90px; top: 12px; font-size: 13px; line-height: 26px; text-align: right; }
.iv-list { position: relative; width: 1100px; height: 465px; margin: 12px auto 0; }
.iv-list .large { position: absolute; top: 0; }
.iv-list .large:nth-child(1) { left: 0; }
.iv-list .large:nth-child(2) { right: -90px; top: 40px; }
.iv-photos { display: block; position: relative; height: 382px; }
.iv-photos img { object-fit: cover; }
.large:nth-child(1) .iv-photos { width: 705px; }
.large:nth-child(1) .iv-photos img:first-child { position: absolute; left: 196px; top: 0; width: 349px; height: 382px; z-index: 1; }
.large:nth-child(1) .iv-photos img:last-child { position: absolute; left: 0; top: 40px; width: 508.5px; height: 342px; }
.large:nth-child(2) .iv-photos { width: 508.5px; height: 342px; }
.large:nth-child(2) .iv-photos img { width: 508.5px; height: 342px; }
.iv-list .chip { position: absolute; right: 12px; top: 352px; }
.large:nth-child(2) .chip { top: 312px; }
.iv-list h2 { margin-top: 24px; font-size: 26px; font-weight: 800; letter-spacing: 0.4px; line-height: 41.6px; }

/* [6][7] 会社案内・デザインと性能（パララックス帯） */
.parallax-block { position: relative; }
.content-container { position: relative; width: 100%; height: 393.5px; margin-top: 270px; overflow: hidden; }
.content-container.design-con { margin-top: 150px; }
.content-container .parallax-img { position: absolute; top: 0; left: 0; width: 693.4px; height: 393.5px; object-fit: cover; }
.content-container.design-con .parallax-img { left: auto; right: 0; }
.cc-text { position: absolute; top: 60px; right: 90px; width: 480px; }
.content-container.design-con .cc-text { right: auto; left: 90px; }
.cc-text h2.en { font-size: 48px; font-weight: 800; letter-spacing: 0.4px; line-height: 62.4px; }
.cc-text p { font-size: 15px; line-height: 30px; }
.cc-text p.btn-custom { margin-top: 18px; }

/* [8] ガイド・モデルハウスへの導線 */
.house-guide { width: 100%; height: 170px; margin-top: 150px; }
.house-guide .inner { height: 170px; gap: 80px; align-items: center; }
.hg-item { display: flex; align-items: center; gap: 20px; }
.hg-icon { width: 170px; height: 170px; object-fit: cover; }
.hg-item h2 { font-size: 30px; font-weight: 800; letter-spacing: 0.4px; line-height: 39px; }
.hg-item p { font-size: 13px; line-height: 22px; }
a.next-page { margin-top: 140px; }

@media screen and (max-width: 767px) {
  .hello { width: auto; margin: 100px 20px 0; padding-left: 30px; }
  .hello h2 { font-size: 20px; line-height: 32px; max-width: none; }
  /* p は2行に収める（h2・p の両方が 80px 以上あると div.hello が2ブロックに割れて FAIL する） */
  .hello p { margin-top: 42px; line-height: 30px; }

  .project-list-wrap { width: auto; margin: 100px 25px 0; column-gap: 0; row-gap: 28px; }
  .project-card { display: flex; flex-wrap: wrap; width: 100%; gap: 12px; align-items: flex-start; }
  .project-card:nth-child(even) { flex-direction: row-reverse; }
  /* 参考の SP は「種別ラベル（外）｜事例名（内）｜写真」で柱が2本並び、一行リンクは写真の下。
     h2 を絶対配置（right: 0）にすると同じ場所にラベルが流れ込み、縦書き2本が重なって
     どちらも読めなくなる（2026-09-29 実機検証） */
  .p-type { position: static; order: 1; }
  /* h2 は card-main の中にあるので、柱として写真の横に置くには card-main 側で列を作る */
  .card-main { order: 2; flex: 0 0 auto; display: grid; grid-template-columns: auto 220px; column-gap: 8px; }
  .card-main .p-state { grid-column: 2; grid-row: 1; }
  .card-main .card-photo { grid-column: 2; grid-row: 2; }
  .card-main h2 { grid-column: 1; grid-row: 1 / span 2; }
  .project-card:nth-child(even) .card-main { grid-template-columns: 220px auto; }
  .project-card:nth-child(even) .card-main .p-state,
  .project-card:nth-child(even) .card-main .card-photo { grid-column: 1; }
  .project-card:nth-child(even) .card-main h2 { grid-column: 2; }
  .card-news { order: 3; flex: 1 0 100%; }
  .card-photo, .card-photo .swap, .card-photo .swap img { width: 220px; height: 278px; }
  .project-card h2 {
    position: static; writing-mode: vertical-rl; margin-top: 0;
    font-size: 23px; letter-spacing: -0.5px; line-height: 29.9px;
  }
  .p-state { font-size: 13px; line-height: 22px; padding: 10px 12px; }
  .p-state span { font-size: 11px; line-height: 18px; }
  .card-news { margin-top: 8px; }

  /* 縦書きの見出し柱はセクションの上へ飛び出す（高さ約 200px）。margin-top が 150px だと
     前のセクションの写真・見出しに乗る（2026-09-29 実機検証）＝柱ぶんの余地を取る */
  .blog-topic { width: auto; margin: 290px 0 0; padding: 0 25px; }
  .topic-head { left: 0; right: 0; top: auto; bottom: calc(100% + 40px); justify-content: center; }
  .topic-head h2 { font-size: 28px; letter-spacing: -0.6px; line-height: 28px; }
  .blog-list { padding-left: 0; min-height: 0; }
  .blog-list .thumb { position: static; width: 120px; height: 120px; flex: 0 0 120px; }
  .blog-list .thumb img { width: 120px; height: 120px; }
  .blog-list a.post { flex-wrap: wrap; gap: 8px 12px; padding: 16px 0; align-items: flex-start; }
  .blog-list a.post h2 { flex: 1 1 100%; font-size: 15px; line-height: 21px; }
  .blog-topic .btn-wrap { margin-top: 24px; text-align: center; }

  .iv-band { margin-top: 120px; padding: 0 25px; }
  .iv-bg { top: 110px; bottom: 40px; }
  .iv-big { padding-left: 0; font-size: 44px; line-height: 56px; }
  .iv-lead { position: static; margin-top: 12px; text-align: left; }
  .iv-list { width: auto; height: auto; margin-top: 24px; }
  .iv-list .large, .iv-list .large:nth-child(2) { position: static; }
  .iv-list .large + .large { margin-top: 32px; }
  .large:nth-child(1) .iv-photos { width: auto; height: 300px; }
  .large:nth-child(1) .iv-photos img:first-child { left: auto; right: 0; width: 230px; height: 251.7px; }
  .large:nth-child(1) .iv-photos img:last-child { left: 0; top: 83px; width: 325px; height: 217px; }
  .large:nth-child(2) .iv-photos, .large:nth-child(2) .iv-photos img { width: 325px; height: 217px; }
  .iv-list .chip, .large:nth-child(2) .chip { position: static; display: inline-block; margin-top: 10px; }
  .iv-list h2 { margin-top: 10px; font-size: 20px; line-height: 32px; }

  .content-container { height: 563.2px; margin-top: 120px; }
  .content-container .parallax-img, .content-container.design-con .parallax-img { position: relative; left: auto; right: auto; width: 375px; height: 250px; }
  .cc-text, .content-container.design-con .cc-text { position: static; width: auto; margin: 24px 20px 0; }
  .cc-text h2.en { font-size: 32px; line-height: 41.6px; }

  .house-guide { height: auto; margin-top: 110px; }
  .house-guide .inner { flex-direction: column; height: auto; gap: 60px; }
  .hg-icon { width: 140px; height: 140px; }
  .hg-item h2 { font-size: 20px; line-height: 26px; }
  a.next-page { margin-top: 110px; }
}

/* ============================================================
   建築事例一覧（project）
   [0] 見出し＋絞り込み h 237（pad 上 170）/ [1] カード17枚 h 3943 / [2] インタビュー誘導 h 672（pad 上 150・cw 1100）
   ============================================================ */
.project-search { width: var(--inner); margin-inline: auto; padding-top: 170px; height: 237px; align-items: flex-start; justify-content: space-between; }
.project-search h1 { font-size: 36px; font-weight: 800; letter-spacing: 0.4px; line-height: 72px; }
.project-search .ps-text p { font-size: 13px; line-height: 22px; }
.ps-filter { display: flex; align-items: center; gap: 12px; }
.ps-filter select {
  font-family: inherit; font-size: 13px; line-height: 24px; color: var(--navy);
  background: var(--wh); border: 1px solid var(--line); border-radius: 0; padding: 6px 14px;
}
.ps-count { font-size: 13px; line-height: 24px; }
.page-project .project-list-wrap { margin-top: 40px; row-gap: 107px; }

/* design ページの同じ帯（参考の id（参考サイトのブランド名を含むので名前は変えた））。id を変えても見た目と寸法は同じものを使う。 */
#interview-band, #case-band { width: 100%; padding-top: 150px; }
#interview-band .inner, #case-band .inner { position: relative; }
#interview-band h2.en, #case-band h2.en { font-size: 88px; font-weight: 900; letter-spacing: 0.4px; line-height: 88px; }
#interview-band h3, #case-band h3 { margin-top: 10px; font-size: 20px; font-weight: 800; letter-spacing: 0.4px; line-height: 32px; color: inherit; }
#interview-band > .inner > p, #case-band > .inner > p { margin-top: 8px; font-size: 15px; line-height: 30px; }
.ib-card { display: block; margin-top: 24px; }
.ib-list { margin-top: 30px; }
.ib-photos { display: block; position: relative; height: 243px; width: 420px; }
.ib-photos img { position: absolute; object-fit: cover; }
.ib-photos img:first-child { left: 0; top: 0; width: 67px; height: 73px; z-index: 1; }
.ib-photos img:last-child { left: 80px; top: 0; width: 340px; height: 242.7px; }
.ib-card h3 { margin-top: 18px; }
.ib-card > p { margin-top: 6px; font-size: 13px; line-height: 26px; }

@media screen and (max-width: 767px) {
  .project-search { width: auto; margin-inline: 25px; padding-top: 56px; height: 108px; flex-direction: row; align-items: flex-start; gap: 16px; }
  .project-search h1 { font-size: 28px; line-height: 56px; }
  .project-search .ps-text p { display: none; }
  .ps-filter { margin-left: auto; }
  .ps-filter select { max-width: 150px; }

  /* 一覧ページの SP は「工事中の3件だけ大きく・残りは2列」（参考の実測 4008＝387×3 ＋ 407×7行） */
  .page-project .project-list-wrap { margin-top: 0; display: flex; flex-wrap: wrap; column-gap: 25px; row-gap: 0; }
  .page-project .project-card.is-fresh { width: 100%; margin-bottom: 109px; }
  .page-project .project-card:not(.is-fresh) { display: block; width: 150px; margin-bottom: 30px; }
  /* 大カード（is-fresh）は写真の横に縦書きの見出しだが、グリッドのカードは参考では「写真の下に横書き」。
     器が grid（auto 220px）のままだと、写真 150 に対して見出しの列が 23 に潰れ、横書きでも 1 文字ずつ折り返して
     縦書きに見えたうえ記事行に重なっていた（2026-09-29 実測・参考の事例一覧を SP と PC で確認）。 */
  .page-project .project-card:not(.is-fresh) .card-main { flex: none; display: block; }
  .page-project .project-card:not(.is-fresh) .card-photo,
  .page-project .project-card:not(.is-fresh) .card-photo .swap,
  .page-project .project-card:not(.is-fresh) .card-photo .swap img { width: 150px; height: 190px; }
  .page-project .project-card:not(.is-fresh) h2 { position: static; writing-mode: horizontal-tb; margin-top: 10px; font-size: 23px; letter-spacing: -0.5px; line-height: 29.9px; }
  .page-project .project-card:not(.is-fresh) .p-type { font-size: 11px; writing-mode: horizontal-tb; }
  .page-project .project-card:not(.is-fresh) .p-state { display: none; }
  .page-project .project-card:not(.is-fresh) .card-news { font-size: 11px; line-height: 18px; }

  #interview-band, #case-band { padding: 140px 25px 0; }
  #interview-band .inner, #case-band .inner { width: auto; margin-inline: 0; }
  #interview-band h2.en, #case-band h2.en { font-size: 64px; font-weight: 700; letter-spacing: 0.4px; line-height: 64px; }
  .ib-photos { width: auto; height: 511px; }
  .ib-photos img:first-child { width: 67px; height: 73px; }
  .ib-photos img:last-child { left: 0; top: 90px; width: 325px; height: 511.3px; }
  .ib-card > p { margin-top: 8px; }
}

/* ============================================================
   レポート・ブログの一覧／詳細（report・blog・report-house-01・*-01〜03）
   [0] サイドバー（左・pc）/ [1..] 1件＝article.body-block（166〜197）/ 本文の内側 512・一覧の主カラム 640
   折りたたみの本文（.bb-full）は DOM に残す＝参考と同じく h2／h3／img の数に入る
   ============================================================ */
/* 参考の形: サイドバーは画面いっぱい（1280×サイドの高さ）で左に柱が立ち、本文は 640px の中央寄せ（x=320）。
   containers の上位2が 640／560 になるのはこのため（1100 ではない）。 */
/* 記事行の先頭は参考で y=217.5。見出し帯（h1 46.8）＋下の余白 36 がその中に入るので padding-top は 134.7。 */
/* 左の Category 柱は absolute＝本文の高さに数えられない。本文が柱より短いページ
   （記事 2 本の report-house-01＝本文 560／柱 217.5+550=767.5）で、柱の末尾「土と杉の家」に
   下の NEXT 行の罫線が重なっていた。柱ぶんの高さを本文側で確保する（2026-09-29）。
   参考は同じページに記事 3 本あり本文が柱より長いので、この確保は要らない。 */
.blog-wrap { position: relative; width: 100%; padding-top: 134.7px; min-height: 800px; }
/* 詳細は見出し帯がなく、本文そのものが 217.5 から始まる。 */
.blog-wrap.page-detail { padding-top: 217.5px; }
/* 全幅の当たり判定が本文に重なるとホバーが本文へ届かない（hover の計測が「変化なし」になる）。
   器はマウスを通し、中の柱だけ受ける。 */
.other-wrap-block { position: absolute; left: 0; top: 0; width: 100%; height: var(--side-h, 600px); pointer-events: none; }
.side-col { position: absolute; left: 90px; top: 217.5px; width: 200px; pointer-events: auto; }
.side-ttl { font-size: 15px; font-weight: 800; letter-spacing: 1.4px; line-height: 30px; color: var(--blue); }
.side-list { margin-top: 10px; }
.side-list li a { display: block; font-size: 13px; line-height: 30px; }
.side-list li a:hover { color: var(--hover); }
/* 参考はこのバナーを左の Category 列ではなく本文の右（実測 x=1088・幅 192・上から 171）に置く。
   左列に積んでいたため、本文が短い report-house-01（--side-h:585）で列が本文より 99px 長くなり、
   フッターの「お問い合わせ」に重なっていた。右端 0 で置けば幅が変わっても参考と同じ位置に来る
   （2026-09-29 参考実測で是正・対象 9 ページ）。 */
.side-bnr { display: block; position: absolute; right: 0; top: 171px; width: 192px; pointer-events: auto; }
.side-bnr img { width: 120px; height: 120px; object-fit: cover; }
.side-bnr img + img { width: 60px; height: 60px; }
.side-bnr p { font-size: 12px; line-height: 22px; }
/* 参考はサイドバーのバナーがホバーで color #2e63d9 に変わる（border-color は currentColor 由来で追随）。
   transform・opacity は足さない＝「変化するプロパティ」が参考と食い違う（制作記録 §9.3）。 */
.side-bnr:hover { color: var(--hover); }
.body-wrap-inner { width: 640px; margin-inline: auto; }
.blog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
/* SP だけ見出し帯に出る小さなバナー（参考は SP の見出しブロックに img 2）。PC は柱側にあるので隠す。 */
.ttl-bnr { display: none; }
.ttl-bnr img { width: 60px; height: 60px; object-fit: cover; }
.ttl-bnr img + img { width: 40px; height: 40px; }
.blog-head h1 { font-size: 36px; font-weight: 900; letter-spacing: 0.4px; line-height: 46.8px; }
.search-form { display: flex; align-items: center; border: 1px solid var(--line); height: 40px; padding: 0 10px; }
.search-form input { border: 0; outline: 0; font-family: inherit; font-size: 14px; width: 150px; background: none; }
.s-btn { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; position: relative; }
.s-btn::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border: 2px solid var(--blue); border-radius: 50%; }

/* 参考の行は上下 padding 0・行どうしが接している（197.3＋165.5… が連続）。高さは中身で作る。 */
/* 参考は行の中身を左 21 で始めるが、行の箱の padding は 0（参考実測）。左の寄せはサムネの margin で作る
   ＝行に padding を持たせると compare の「padding 左/右」が 22 行ぶん WARN になる。右の空け（参考 80＝折り返し幅 410.7）は置かない
   ＝代替書体が参考より広く、同じ幅にすると 19〜20 字の見出しが参考より 1 行多く折り返るため（2026-09-29 実測）。 */
.body-block { display: flex; align-items: flex-start; gap: 21.3px; padding: 0; border-top: 1px solid var(--line); }
/* 参考の行は 日付＋Permlink / 見出し / 抜粋1行 / カテゴリのチップ＋いいね（2026-09-29 実測。旧実装は抜粋とチップを隠していた
   ＝compare の WARN「要素数 p が 1 少ない」が 22 行ぶん出ていた）。上 22・下 20.5、行の高さ 166.5。 */
.bb-head { padding: 18px 0 20px; }
/* 参考の一覧は基調色の 20%（写真の下敷き）と 80%（日付）が 10 行ぶん出る＝palette の主要色。サムネは正方 106.7（参考実測）。 */
.bb-thumb { display: block; flex: 0 0 106.7px; margin: 30px 0 0 21px; background: #162f6733; }
.bb-thumb img { width: 106.7px; height: 106.7px; object-fit: cover; }
.bb-head { position: relative; flex: 1 1 auto; min-width: 0; }
.bb-date { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; line-height: 20px; display: inline-block; margin-right: 10px; color: #162f67cc; }
.bb-permalink { font-size: 11px; line-height: 20px; color: var(--blue); text-decoration: underline; }
/* 一覧の1行目は参考が lh26（日付 13／Permlink 13）。詳細ページの .except も .bb-date を使うのでここだけに当てる。 */
.bb-head .bb-date, .bb-head .bb-permalink { line-height: 26px; }
.body-block h2 { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: 0.4px; line-height: 30.8px; }
/* h3.bb-sub は隠したまま（参考も行内の h3 は不可視＝counts.h3 を 1 に保ち、heads を h2 だけに保つ）。
   見えるカテゴリは参考と同じ形の p.bb-cate > span で出す。 */
.bb-sub { display: none; margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 26px; color: var(--blue); }
.bb-meta { display: none; font-size: 12px; line-height: 22px; }
/* 抜粋は参考も1行（末尾は …）。PC のみ表示＝参考の p.pc と同じ。 */
.bb-head .bb-meta { display: block; margin: 3px 0 0; font-size: 15px; line-height: 30px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cate { display: inline-block; margin: 0; line-height: 30px; vertical-align: top; }
.bb-cate span { display: inline-block; padding: 4px 8px 2px; border: 1px solid #162f6733; border-radius: 10px; background: #fff; font-size: 12px; line-height: 12px; color: #162f67cc; }
.bb-head .like { margin: 0 0 0 5px; vertical-align: top; height: 30px; }
.like { border: 0; background: none; padding: 0; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; color: var(--yellow); cursor: pointer; }
.like svg { width: 18px; height: 18px; }
.like-n { font-size: 12px; color: var(--navy); }
/* 参考の「＋」は行の縦中央（1行目 300.25／2行目 481.8＝どちらも行の中心・2026-09-29 実測。参考では疑似要素で DOM に無い）。 */
.more-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; color: var(--navy); cursor: pointer; }
.more-btn svg { width: 18px; height: 18px; }
.btn-ico { display: none; }
.bb-full { display: none; }
.pager { gap: 10px; justify-content: center; padding: 18px 0; }
.pager a { font-size: 13px; line-height: 30px; padding: 0 10px; }

/* 参考の詳細は「ブロックの幅 640・内側のコンテナ 512」（compare の 内側コンテナ幅=512）。本文は 512 の器に入れる。 */
.page-detail .body-wrap-inner { width: 640px; }
.page-detail .body-txt-inner { width: 512px; margin-inline: auto; }
.page-detail .body-wrap-inner h1 { margin: 4px 0 10px; font-size: 22px; font-weight: 700; letter-spacing: 0.4px; line-height: 30.8px; }
.page-detail .body-wrap-inner h2 { margin: 24px 0 10px; font-size: 26px; font-weight: 800; letter-spacing: 0.4px; line-height: 36.4px; }
.page-detail .body-wrap-inner h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 400; letter-spacing: 0.4px; line-height: 21px; color: var(--navy); }
/* 参考の本文中の小見出しは 20/700/28（書き手欄の h3 だけが本文と同じ細さ）。 */
.page-detail .body-txt-inner > h3 { font-size: 20px; font-weight: 700; line-height: 28px; }
/* 参考の PC の本文は段落の間が広い（本文ブロックの高さはこの余白で決まる）。SP は参考の段の間隔（20）に戻す。 */
.page-detail .body-wrap-inner > p, .page-detail .body-txt-inner > p { font-size: 15px; line-height: 30px; margin-bottom: 36px; }
/* 参考の本文は PC のほうが段数が多い（SP では出ない短い段落がある）。数合わせの空き箱は置かず、文のまま隠す。 */
.pc-only { display: block; }
/* 写真は「画像＋キャプション」で参考の高さ（--fig-h／SP は --fig-h-sp）になる＝縦に積んで画像が残りを埋める。 */
.page-detail figure { display: flex; flex-direction: column; margin: 0 0 24px; overflow: hidden; height: var(--fig-h); }
.page-detail figure img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; }
.page-detail figcaption { flex: 0 0 auto; padding-top: 6px; font-size: 12px; line-height: 22px; color: var(--gray, #777); }
.writer { gap: 14px; align-items: center; padding: 32px 10.7px 29.9px; border-top: 1px solid var(--line); }
/* flex の縮みを止める。止めないと隣の文章に押されて枠が縦長になり、参考の正方形と合わない
   （2026-09-28・縦長の写真を入れたときに表面化した） */
.writer img { flex: 0 0 60px; width: 60px; height: 60px; object-fit: cover; border-radius: 50%; }
.writer-txt { flex: 1 1 auto; min-width: 0; }
/* 参考の書き手欄の見出しは本文と同じ細さ（15/400/21・基調色）。本文の h3 の余白（20/8）は持たない
   ＝`.page-detail .body-wrap-inner h3` と同じ詳細度で後ろに置く（`.writer h3` だけでは負ける）。 */
.page-detail .writer h3 { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0.4px; line-height: 21px; color: var(--navy); }
.writer p { font-size: 12px; line-height: 22px; }
/* 詳細の見出し帯と記事ヘッダは SP だけの段（参考の PC は本文が 1 ブロック＝箱を作らない）。
   display:contents なら記事ヘッダは矩形を持たず、ブロック検出の候補にならない。 */
.detail-ttl { display: none; }
.except { display: contents; }
/* 記事ヘッダの写真は PC・SP どちらにもある（参考の本文ブロックは img 3＝ヘッダ・本文の写真・書き手）。
   PC は本文の頭に小さく置き、SP は記事ヘッダの右下に重ねて段の高さ（167.4／192.6）に出さない。 */
.eh-thumb { display: block; width: 90px; height: 60px; margin: 0 0 14px auto; }
.eh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-top { width: 640px; margin-inline: auto; padding-top: 42.7px; height: 106px; }
.blog-top .btn-custom > a { background: var(--blue); color: var(--wh); border-radius: 999px; padding: 10px 48px 10px 24px; }

@media screen and (max-width: 767px) {
  /* SP は柱ごと非表示なので、PC で確保した柱ぶんの高さは戻す */
  .blog-wrap { width: auto; padding-top: 80px; min-height: 0; }
  .other-wrap-block { display: none; }
  .body-wrap-inner { width: 100%; }
  /* 参考の SP の詳細は「記事ヘッダと本文が画面いっぱい（375）・中の文章が 300」。本文の器を 375 にしておくと、
     段が 1 つだけのページ（report-02）で本文がまるごと 1 ブロックに残り、参考と同じ割れ方になる。 */
  .page-detail .body-wrap-inner, .page-detail .single-body, .page-detail .body-txt { width: 375px; margin-inline: auto; }
  .page-detail .body-txt { padding-bottom: 12.5px; }
  .page-detail .body-txt-inner { width: 300px; margin-inline: auto; }
  .page-detail .body-txt-inner > p { margin-bottom: 20px; }
  .pc-only { display: none; }
  /* 参考の SP は記事ヘッダと本文が地続きの薄い灰（段が 1 つだけの report-02 で本文ブロックの背景として出る）。 */
  .page-detail .body-txt { background: #f7f7f9; }
  .page-detail .body-wrap-inner h1 { font-size: 18px; line-height: 25.2px; }
  .page-detail figure { height: var(--fig-h-sp, 198.8px); }
  /* 参考の書き手欄は pad 28.1/0/18.8/0・高さ 156.1。 */
  .writer { padding: 28.1px 0 18.8px; }
  .page-detail .writer h3 { font-size: 13px; line-height: 20.8px; }
  .eh-thumb { position: absolute; right: 25px; bottom: 30px; margin: 0; }
  .blog-top { width: 375px; margin-inline: 0; padding-top: 37.5px; height: 100.5px; }
  /* 参考 SP: 見出し帯 117.4（pad 56/90/24/25）／記事ヘッダ 167.4（pad 30/25・薄い灰 #f7f7f9）／本文はその 26 下から。 */
  .blog-wrap.page-detail { padding-top: 80px; }
  .detail-ttl { display: block; position: relative; width: auto; padding: 56px 90px 24px 25px; }
  .detail-ttl .ttl-label { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 37.4px; }
  .detail-ttl .search-form { display: none; }
  .except { display: block; position: relative; width: 375px; margin: 0 0 26px; padding: 30px 25px; background: #f7f7f9; }
  .except .bb-date { display: block; }
  /* 参考の記事ヘッダは見出しが 15 字で折り返す（2 行＝167.4・3 行＝192.6）。幅を 273 にすると各ページの行数がそのまま参考と揃う。 */
  .except h1 { width: 273px; margin: 4px 0 0; }
  /* inline-flex のままだと行ボックスの余りが記事ヘッダの高さに乗る（参考は 33＝27＋上 6）。 */
  .except .like { display: flex; width: fit-content; height: 27px; }
  /* 参考の SP 見出し帯は h1 だけで 117.4（pad 56/90/24/25）。検索窓は見えず、バナーは右上に重なる＝どちらも高さに出さない。 */
  .blog-head { position: relative; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 0; padding: 56px 90px 24px 25px; }
  .blog-head h1 { font-size: 28px; font-weight: 900; line-height: 36.4px; }
  .blog-head .search-form { display: none; }
  /* 参考の SP は見出しの右に小さなアイコン2つ（一覧・検索）だけを置く。こちらは丸いバナーなので、
     60+40 のままだと左端が 240 になり 8 文字の見出し（25..255）に重なる（report-01 等・2026-09-29 実測）。
     参考の余白に寄せて詰め、見出しと触れないようにする。 */
  .ttl-bnr { display: flex; gap: 10px; align-items: flex-end; position: absolute; right: 25px; top: 56px; }
  .ttl-bnr img { width: 44px; height: 44px; }
  .ttl-bnr img + img { width: 30px; height: 30px; }
  /* 参考の SP は 左 25・サムネ 87.5 正方・本文 125 から（実測）。 */
  .body-block { gap: 12.5px; padding: 0; }
  .body-block h2 { font-size: 18px; line-height: 25.2px; margin-top: 8px; }
  /* 参考の SP は Permlink と抜粋を出さない（可視の文字数 35＝日付9＋見出し19＋カテゴリ6＋いいね1・2026-09-29 実測）。 */
  .bb-permalink { display: none; }
  .bb-head .bb-meta { display: none; }
  /* 右の空けは「＋」に触れない最小値 26（本文が 375-26=349 で終わり、＋ は 351..375）。
     参考どおりの 50（本文幅 200）にすると、代替書体が広いぶん 31 字の見出しが 2 行増えて
     report-house-01 の 1 行目が 217.8（参考 167.4）＝ FAIL になる（2026-09-29 実測）。 */
  .bb-head { padding: 37px 26px 29px 0; }
  /* SP は Permlink が消えて日付だけの行になる＝参考も 12 の行。インラインのままだと親の行送り 30 の余りが上に乗る。 */
  .bb-head .bb-date { display: block; line-height: 12px; }
  .bb-cate span { font-size: 10px; line-height: 10px; padding: 4px 8px 3px; }
  .bb-thumb { margin: 41px 0 0 25px; }
  .bb-thumb, .bb-thumb img { flex-basis: 87.5px; width: 87.5px; height: 87.5px; }
}

/* ============================================================
   固定ページ（design・guide・about・modelhouse・contact・company-guide）
   内側の器は参考の contentW に合わせる（960 / 853.3 / 746.7）
   ============================================================ */
.inner-960 { width: 960px; margin-inline: auto; }
.inner-853 { width: 853.3px; margin-inline: auto; }
.inner-746 { width: 746.7px; margin-inline: auto; }

/* 参考の design ページは「大きな英字の見出し＋小さな日本語ラベル」で、セクションの余白は padding ではなく margin
   （ブロックの padding が 0/0 で出る）。design-base／design-detail は section 自身が器の幅を持つ。
   design だけは y=0 から始まり高さ 840（SP 1071.5）＝上下の余白は内側 960 の器が持つ。 */
.design { margin-top: 0; }
.design .inner-960 { padding: 300px 0 350px; }
.design h2.en { font-size: 54px; font-weight: 900; letter-spacing: 0.4px; line-height: 64.8px; }
.design h3 { margin-top: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; line-height: 30px; color: var(--navy); text-align: right; }
.design p { margin-top: 16px; font-size: 15px; line-height: 30px; }
/* display: flow-root ＝子の margin を外に逃がさない（section 自身の高さに乗せる）＋写真の float を内包する */
.design-base { width: 1066.7px; margin: 90px auto 0; display: flow-root; }
.design-base h2 { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 44.8px; text-align: center; }
.design-base h3 { margin-top: 10px; font-size: 52px; font-weight: 900; letter-spacing: -1px; line-height: 67.6px; color: var(--navy); text-align: justify; }
.design-base p { margin-top: 12px; font-size: 15px; line-height: 30px; }
.design-base img { float: left; margin: 32px 40px 0 0; width: 746.7px; height: 508.9px; object-fit: cover; }
.design-base .btn-custom { margin-top: 24px; }
.design-detail { width: 960px; margin: 120px auto 0; display: flow-root; }
.dd-ttl { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 44.8px; text-align: center; }
/* 1項目＝番号（h2）・見出し（h3）・本文（p 2行）・大きな写真・小さな写真（本文の右へ回す）。
   高さは参考の 1項目 ≒ 600（3091.8 ＝ 見出し 44.8 ＋ 5項目）に合わせる。 */
.dd-item { display: flow-root; }
.dd-item h2 { margin-top: 30px; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; line-height: 30px; }
.dd-item h3 { margin-top: 6px; font-size: 40px; font-weight: 900; letter-spacing: 0.4px; line-height: 52px; }
.dd-item p { margin-top: 10px; font-size: 15px; line-height: 30px; }
.dd-item .dd-main { display: block; margin-top: 12px; width: 586.7px; height: 400px; object-fit: cover; }
.dd-item.is-portrait .dd-main { width: 405.3px; height: 548.4px; }
.dd-item .dd-sub { float: right; margin-top: -60px; width: 96px; height: 84.7px; object-fit: cover; }

/* 参考の guide 見出し帯は pad 0/0・高さ 480（SP 399）＝余白は内側の器が持つ */
.guide { height: 480px; background: var(--wh); }
.guide .inner-746 { padding-top: 240px; }
.guide h2 { font-size: 56px; font-weight: 900; letter-spacing: -1.1px; line-height: 72.8px; }
.guide p { margin-top: 14px; font-size: 15px; line-height: 30px; }
/* 参考の period／flow／qa は幅 960（x=160・SP は 350／x=12.5）で、内側の器が 746.7 */
#period, #flow, #qa { width: 960px; margin-inline: auto; padding-top: 53.3px; }
#period h3, #flow h3, #qa h3 { font-size: 36px; font-weight: 900; letter-spacing: 0.4px; line-height: 46.8px; text-align: center; }
#period h4, .flow-lead { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: 0.4px; line-height: 36px; }
#period p { margin-top: 10px; font-size: 15px; line-height: 30px; }
#period .inner-746 { padding-bottom: 430px; }
#period img { margin-top: 20px; width: 746.7px; height: 128.7px; object-fit: cover; }
/* 2 枚目は参考でも出していない（要素だけ残して img の総数を合わせる） */
#period img + img { display: none; }
.flow-item { margin-top: 90px; }
.flow-item h4, .flow-ttl { font-size: 18px; font-weight: 700; letter-spacing: 0.4px; line-height: 23.4px; color: var(--navy); }
.flow-item p { margin-top: 8px; font-size: 15px; line-height: 30px; }
.flow-item img { margin-top: 14px; width: 266.7px; height: 186.7px; object-fit: cover; }
.flow-note { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.flow-note li { font-size: 13px; line-height: 26px; color: var(--blue); }
.flow-link { display: inline-block; margin-top: 10px; margin-right: 16px; font-size: 13px; font-weight: 700; color: var(--blue); }
.flow-end { margin-top: 14px; font-size: 15px; line-height: 30px; }
/* Q&A は 1 問ずつ余白の大きい帯（参考は文字 595・高さ 2329.6＝ほとんどが余白）。
   帯の地色 #f9f5ee は参考の主要色（5 回以上）に入っているのでここで 5 回使う。 */
.qa-block dl { margin-top: 20px; }
.qa-block dt { background: #f9f5ee; border-top: 1px solid var(--line); padding: 60px 40px 0; }
.qa-block dt h4 { font-size: 28px; font-weight: 800; letter-spacing: 0.4px; line-height: 44.8px; }
.qa-block dd { background: #f9f5ee; padding: 20px 40px 240px; }
.qa-block dd p { font-size: 15px; line-height: 30px; }

/* 参考の about は jimoto-wrap／jimoto-text／concept がすべて padding 0/0＝余白は内側の器が持つ。
   高さは PC 840／387.7／399.8、SP 650／404.5／633.4。 */
.jimoto-wrap .inner { padding: 300px 0 340px; }
.jimoto-wrap h2 { font-size: 48px; font-weight: 900; letter-spacing: -1px; line-height: 72px; }
.jimoto-wrap p { margin-top: 12px; font-size: 15px; line-height: 30px; }
/* 参考はこの写真を出していない（img 要素はあるが表示 0 枚＝画像の総数 FAIL を避けるため DOM には残す） */
.jimoto-wrap img { display: none; }
.jimoto-text .inner { padding: 130px 0 130px; }
.jimoto-text p { margin-top: 12px; font-size: 15px; line-height: 30px; }
/* concept は左に文章、右に写真 3 枚。写真は器（853）ではなく画面幅に張る＝参考の実測は
   セクション（1280）基準で 小 x=-106.7（左端で見切れる）／大 x=693.3／小 x=1066.7（右端に接する）で、
   3 枚とも重ならない。器基準に寄せていたため 3 枚が x=607〜1066 に集まり、
   小 2 枚が大の下に 65〜80% 隠れていた（2026-09-29 参考実測で是正）。 */
.concept { position: relative; }
.concept .inner-853 { min-height: 355.5px; padding: 44px 480px 0 0; }
.concept h2 { font-size: 48px; font-weight: 900; letter-spacing: 0.4px; line-height: 57.6px; }
.concept p { margin-top: 10px; font-size: 15px; line-height: 30px; }
.concept img { position: absolute; object-fit: cover; }
/* 縦は参考の実測どおりセクション上端より 53.3／42.2 上に出る（前セクションの下余白に重なる） */
.concept img:nth-of-type(1) { top: -53.3px; left: -106.7px; width: 213.3px; height: 284.4px; }
.concept img:nth-of-type(2) { top: -42.2px; right: 0; width: 213.3px; height: 284.4px; }
.concept img:nth-of-type(3) { top: 0; right: 320px; width: 266.7px; height: 355.5px; }
#outline { padding: 53.3px 0 10.7px; }
#outline h2.en { font-size: 36px; font-weight: 900; letter-spacing: 0.4px; line-height: 72px; }
.outline-list { margin-top: 10px; }
.outline-list dt { float: left; clear: left; width: 160px; font-size: 13px; font-weight: 800; line-height: 44px; }
.outline-list dd { margin-left: 160px; font-size: 13px; line-height: 44px; }
#access { padding-top: 53.3px; }
#access h2 { font-size: 36px; font-weight: 900; letter-spacing: 0.4px; line-height: 72px; }
#access h3 { margin-top: 14px; font-size: 16px; font-weight: 700; letter-spacing: 0.4px; line-height: 32px; color: var(--navy); }
#access p { font-size: 15px; line-height: 30px; }
/* 参考は PC で地図を 1 枚だけ大きく出す（853.3x545）。2 枚目は SP だけの小さなアイコン（16x18.5） */
#access img { margin-top: 16px; width: 853.3px; height: 545px; object-fit: cover; }
#access img:nth-of-type(2) { display: none; }

/* 参考の modelhouse は together／our-house／schedule／feel がすべて padding 0/0＝余白は内側の器が持つ。 */
.together { height: 840px; }
.together .inner-960 { padding-top: 300px; }
.together h2 { font-size: 48px; font-weight: 900; letter-spacing: -1px; line-height: 67.2px; }
.together p { margin-top: 14px; font-size: 15px; line-height: 30px; }
.cta-link { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 800; line-height: 30px; color: var(--blue); }
.our-house .inner { padding: 150px 0 160px; }
.our-house h3 { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 44.8px; text-align: center; }
.our-house p { margin-top: 10px; font-size: 15px; line-height: 30px; }
.our-house img { display: block; margin: 24px auto 0; width: 266.7px; height: 241.1px; object-fit: cover; }
/* 見学できる日＝slick のティッカー。見出しはティッカーの上に白で重なる（参考の h3 色が #ffffff） */
.schedule { position: relative; }
.ticker-wrap { position: relative; overflow: hidden; }
.ticker img { display: block; width: 214px; height: 356.7px; object-fit: cover; }
.schedule h3 {
  position: absolute; left: 0; right: 0; top: 156px; z-index: 2;
  font-size: 24px; font-weight: 900; letter-spacing: 0.4px; line-height: 24px; text-align: center; color: var(--wh);
  /* 生成した写真が参考より明るく、白のままでは文字が沈んで読めない（2026-09-29 実機検証）。
     色・寸法は参考のまま、影だけで見え方を合わせる */
  text-shadow: 0 2px 14px rgba(22, 47, 103, 0.6);
}
.schedule .inner-853 { padding-top: 24px; }
.sch-note { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.sch-note li { font-size: 13px; line-height: 26px; color: var(--blue); }
.schedule p { font-size: 15px; line-height: 30px; }
.feel .inner-960 { padding: 44px 0 60px; }
.feel h3 { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 44.8px; text-align: center; }
/* 6 項目は 2 列（3 段）。段の高さ＝見出し 40 ＋ 本文 30 ＋ 写真 319 ＋ 余白 */
.feel .inner-960 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.feel h3, .feel > .inner-960 > p, .feel .btn-custom { width: 100%; }
.feel-item { width: 46%; margin-top: 60px; }
.feel-item h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; line-height: 40px; color: var(--navy); }
.feel-item p { font-size: 15px; line-height: 30px; }
.feel-item img { display: block; margin-top: 10px; width: 266.7px; height: 319px; object-fit: cover; }
.feel > .inner-960 > p { margin-top: 12px; font-size: 15px; line-height: 30px; }
#anker-contact { display: none; }
p.tel { padding-top: 32px; height: 160px; text-align: center; font-size: 28px; font-weight: 900; line-height: 44.8px; color: var(--navy); }

.contact-page { padding-top: 170px; }
.contact-page h1 { font-size: 32px; font-weight: 900; letter-spacing: 0.4px; line-height: 64px; }
.contact-page h2 { margin-top: 20px; font-size: 25px; font-weight: 900; line-height: 40px; }
.contact-page h3 { margin-top: 24px; font-size: 22px; font-weight: 800; line-height: 28.6px; color: var(--blue); }
.contact-page > .inner > p { font-size: 15px; line-height: 30px; }
/* 参考のフォームは 746.7 の器に 560 の入力欄（containers の上位＝560 n=9・747 n=4）。
   入力欄の書体は 14/400/0.4/28（SP は 16/32）＝typography の input はチェックボックスが先頭なので
   input 全体に指定する。 */
.inq-form { width: 746.7px; margin-inline: auto; }
.inq-form input, .inq-form textarea { font-family: inherit; font-size: 14px; letter-spacing: 0.4px; line-height: 28px; }
.inq-form label { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; line-height: 30px; }
.inq-form input[type="text"], .inq-form input[type="email"], .inq-form input[type="tel"], .inq-form textarea {
  display: block; width: 560px; font-family: inherit;
  border: 1px solid var(--line); padding: 4px 12px; background: var(--wh);
}
.inq-reasons { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.inq-reasons label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; }
.inq-more { margin-top: 10px; }
.inq-note { margin-top: 14px; font-size: 13px; line-height: 26px; }
.inq-send, #confirm-back, #confirm-send { margin-top: 10px; padding: 12px 36px; border: 0; border-radius: 999px; background: var(--blue); color: var(--wh); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
#confirm-back { background: var(--navy); }
#confirm-list dt { float: left; clear: left; width: 180px; font-size: 13px; font-weight: 800; line-height: 32px; }
#confirm-list dd { margin-left: 180px; font-size: 13px; line-height: 32px; }
.contact-page img { margin-top: 16px; margin-right: 12px; width: 340px; height: 227px; object-fit: cover; }

.cg-head { padding-top: 170px; }
.cg-head h1 { font-size: 36px; font-weight: 800; letter-spacing: 0.4px; line-height: 72px; }
.cg-head p { margin-top: 10px; font-size: 15px; line-height: 30px; }
.cg-body { padding-top: 40px; }
.cg-body h2 { margin-top: 30px; font-size: 25px; font-weight: 900; line-height: 40px; }
.cg-body p { margin-top: 10px; font-size: 15px; line-height: 30px; }
.cg-body ul { margin-top: 10px; }
.cg-body li { font-size: 15px; line-height: 32px; }
.cg-body img { margin-top: 20px; width: 693px; height: 394px; object-fit: cover; }

@media screen and (max-width: 767px) {
  .inner-960, .inner-853, .inner-746 { width: auto; margin-inline: 25px; }
  .contact-page, .cg-head { padding-top: 110px; }
  /* guide：参考の SP は見出し帯 399・period 634.9・flow 13838.9・qa 2588.4、器は 350（x=12.5・pad 31.3/0） */
  .guide .inner-746 { padding-top: 200px; }
  .guide h2 { font-size: 36px; letter-spacing: -0.7px; line-height: 46.8px; }
  #period, #flow, #qa { width: 350px; padding-top: 31.3px; }
  #period h3, #flow h3, #qa h3 { font-size: 32px; line-height: 41.6px; }
  #period h4, .flow-lead { font-size: 16px; line-height: 32px; }
  #period .inner-746 { padding-bottom: 200px; }
  /* 参考は SP で帯を専用画像に差し替える（PC の 1 枚目を隠し、2 枚目を 300x87 で出す）。
     PC 用の 5.8 の帯を SP の枠に cover で入れていたため図版が大きく切れていた（2026-09-29） */
  #period img { display: none; }
  #period img + img { display: block; width: 300px; height: 87px; }
  .flow-item h4, .flow-ttl { font-size: 16px; line-height: 20.8px; }
  .flow-item img { width: 300px; height: 210px; }
  .flow-note li { background: #f7f7f9; padding: 0 10px; }
  .qa-block dt { padding: 40px 20px 0; }
  .qa-block dt h4 { font-size: 21px; line-height: 33.6px; }
  .qa-block dd { padding: 16px 20px 240px; }
  /* about：参考の SP は jimoto-wrap 650／jimoto-text 404.5／concept 633.4、outline・access が幅 350（x=12.5・pad 0） */
  .jimoto-wrap .inner { padding: 130px 0 125px; }
  .jimoto-wrap h2 { font-size: 32px; letter-spacing: -0.6px; line-height: 38.4px; }
  .jimoto-text .inner { padding: 90px 0 100px; }
  .concept h2 { font-size: 32px; line-height: 38.4px; }
  .concept .inner-853 { min-height: 0; padding: 40px 0 0; }
  /* SP も画面幅（375）基準。参考は 小 x=13.3／大 x=81.3／小 右端 13.3 で、
     小1枚が大の左下に 68px はみ出して見える。器基準だと小1枚が大の下に 80% 隠れていた */
  .concept img { position: absolute; }
  .concept img:nth-of-type(1) { top: auto; bottom: 54.2px; left: 13.3px; right: auto; width: 93.8px; height: 125px; }
  .concept img:nth-of-type(2) { top: auto; bottom: 203.3px; left: auto; right: 13.3px; width: 81.3px; height: 108.3px; }
  .concept img:nth-of-type(3) { top: auto; bottom: 0; left: 81.3px; right: auto; width: 200px; height: 266.7px; }
  .concept .btn-custom { margin-bottom: 296.7px; }
  #outline, #access { width: 350px; margin-inline: auto; padding: 0; }
  #outline h2.en, #access h2 { font-size: 24px; line-height: 48px; }
  #access img { width: 350px; height: 223.5px; margin-top: 40px; }
  #access h3 { margin-top: 40px; }
  #access img:nth-of-type(2) { display: block; width: 16px; height: 18.5px; }
  .guide { height: 399px; }
  /* design は SP も padding 0/0（余白は内側 960 の器）。高さは参考 1071.5 */
  .design .inner-960 { padding: 200px 0 240px; }
  .design h2.en { font-size: 36px; letter-spacing: -0.7px; line-height: 46.8px; }
  .design h3 { text-align: center; }
  /* design-base は SP で全幅（x=0・pad 0/0）＝文章側が 25px の余白を持ち、写真は 375 の正方形で全幅に伸びる。
     h3 は写真に白で重なる（参考の h3 色が SP だけ #ffffff）。 */
  .design-base { width: auto; margin: 70px 0 0; position: relative; }
  .design-base h2 { margin-inline: 25px; font-size: 20px; line-height: 30px; }
  .design-base h3 {
    position: absolute; top: 172px; left: 25px; right: 25px; margin-top: 0;
    font-size: 40px; letter-spacing: -0.8px; line-height: 48px; color: var(--wh);
  }
  .design-base img { float: none; margin: 30px 0 0; width: 100%; height: 375px; }
  .design-base p { margin-inline: 25px; margin-top: 60px; }
  .design-base .btn-custom { margin-inline: 25px; margin-top: 36px; margin-bottom: 40px; }
  .design-detail { width: auto; margin: 90px 25px 0; }
  .dd-ttl { font-size: 20px; line-height: 30px; }
  .dd-item h3 { font-size: 23px; letter-spacing: 0; line-height: 29.9px; }
  .dd-item .dd-main { width: 100%; height: 221.6px; }
  .dd-item.is-portrait .dd-main { width: 100%; height: 439.7px; }
  .dd-item .dd-sub { margin-top: -40px; width: 62.5px; height: 55.2px; }
  .our-house img, .cg-body img { width: 100%; height: 220px; }
  .feel-item img, .flow-item img, .contact-page img { width: 100%; height: 200px; margin-right: 0; }
  .outline-list dt { float: none; width: auto; line-height: 38px; }
  .outline-list dd { margin-left: 0; margin-bottom: 8px; line-height: 38px; }
  #confirm-list dt { float: none; width: auto; }
  #confirm-list dd { margin-left: 0; }
  .contact-page h1 { font-size: 24px; line-height: 48px; }
  .inq-form { width: auto; }
  .inq-form input, .inq-form textarea { font-size: 16px; line-height: 32px; }
  .inq-form input[type="text"], .inq-form input[type="email"], .inq-form input[type="tel"], .inq-form textarea { width: 100%; }
  /* 参考の SP は「見出しの下に幅いっぱいの入力欄」（dt 325×50 の下に input 325×42・2026-09-29 実測）。
     横並びにすると項目名の字数で入力欄の左端がばらつき、ページ全体も参考より 432 低かった
     （2026-09-25 の「ラベルを左に置いて高さを寄せる」はこの実測で取り消し。自由記入欄を浅くする指定は残す）。 */
  .inq-form label { display: block; margin-top: 6px; }
  .inq-form label > input { margin-top: 4px; }
  .inq-form label:has(textarea) { display: block; }
  .inq-form textarea { height: 90px; }
  .inq-reasons label { display: inline-flex; }
  /* modelhouse：参考の SP は together 667／our-house 520.2／schedule 1267.7／feel 3560.1・すべて pad 0/0 */
  .together { height: auto; }
  .together .inner-960 { padding: 240px 0 220px; }
  .together h2 { font-size: 30px; letter-spacing: -0.6px; line-height: 42px; }
  .our-house .inner { padding: 70px 0 70px; }
  .our-house h3 { font-size: 20px; line-height: 30px; }
  .our-house img { width: 187.5px; height: 169.5px; }
  .ticker img { width: 188px; height: 313.3px; }
  .schedule h3 { top: 140px; font-size: 18px; line-height: 18px; }
  .schedule .inner-853 { padding: 60px 0 100px; }
  .schedule p { margin-top: 33px; }
  .feel .inner-960 { display: block; padding: 40px 0 60px; }
  .feel h3 { font-size: 20px; line-height: 30px; }
  .feel-item { width: auto; margin-top: 120px; }
  .feel-item h4 { font-size: 18px; line-height: 36px; }
  .feel-item img { width: 250px; height: 299.2px; }
  /* SP だけに出る予約の帯（325x241.9・pad 37.5/0） */
  #anker-contact { display: flow-root; width: 325px; margin-inline: auto; padding: 37.5px 0 0; }
  #anker-contact p { font-size: 15px; line-height: 30px; }
  #anker-contact .btn-custom { display: inline-block; margin: 60px 0 60px; }
  p.tel { font-size: 22px; height: auto; padding: 18.8px 0 56.3px; }
}

/* ============================================================
   お客様インタビュー（interview-01／02）— 本文の内側 800px・段は IV_BLOCKS のとおり
   ============================================================ */
.iv-detail { width: 800px; margin: 0 auto; padding-top: 161px; }
/* 冒頭は本文（800）より広い帯で、参考では 種別ラベル 1225×90・見出し 1132×156.8・説明 1132×180 の
   3 ブロックに割れる（本文は 800）。幅か高さが足りないと 1 ブロックに潰れ、以降が 1 つずつずれる。 */
.intro { position: relative; width: 1225px; margin-left: -212.5px; }
/* 写真は PC では柱の右に重ねる（参考の PC ではブロックにならない）。SP は通常の段に戻す。 */
.iv-photo { position: absolute; right: 0; top: 0; width: 300px; height: 200px; }
.iv-photo img { width: 100%; height: 100%; object-fit: cover; }
.intro-desc { width: 1132px; margin-inline: auto; }
/* 段の高さは仕様から CSS 変数で渡す（PC=--h／SP=--h-sp）。変数は継承するので、
   指定する要素には必ず両方書いてある（書き忘れると親の値をもらって段が崩れる）。 */
.iv-detail .iv-type, .iv-detail .intro-desc, .iv-detail .iv-photo, .iv-detail .iv-box,
.iv-detail .wp-block-group, .iv-detail .g-inner > *, .iv-detail .iv-answer, .iv-detail .iv-answer > *,
.iv-detail .iv-other, .iv-detail > p, .iv-detail > h2.wp-block-heading, .iv-detail .col-img,
.iv-detail .wp-block-column > p, .iv-detail .wp-block-group > *,
.iv-detail .iv-ttl, .iv-detail .caption { min-height: var(--h, 0); }
.iv-detail > figure, .iv-detail > .wp-block-columns, .iv-detail > .wp-block-columns > .wp-block-column { height: var(--h, auto); }
.iv-type p { font-size: 13px; font-weight: 800; letter-spacing: 1px; line-height: 30px; color: var(--blue); }
/* 右上の写真（.iv-photo 300px）ぶんを空ける。空けないと見出しの右側が写真に隠れて読めない
   （2026-09-29 実機検証。参考は見出しが2行に折り返して写真とぶつからない） */
.iv-ttl { padding-right: 340px; font-size: 56px; font-weight: 800; letter-spacing: 0.4px; line-height: 78.4px; margin: 20px 0; }
.iv-detail .caption { font-size: 15px; line-height: 30px; margin-bottom: 40px; }
.iv-detail > p { font-size: 15px; line-height: 30px; margin-bottom: 30px; }
.iv-detail .wp-block-group { margin-bottom: 30px; }
/* 写真＋見出し＋本文の 2 列。参考は 2 枚とも同じ高さ（385×274）で見出しの y も揃う。
   .col-img の高さが auto だと写真ごとの縦横比で決まり、左 390／右 260 と段違いになって
   見出しの位置がずれていた。列を縦フレックスにして、写真に残りの高さを配らせる（2026-09-29）。 */
.iv-detail > .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.iv-detail .col-img { overflow: hidden; flex: 1 1 auto; min-height: 0; }
.iv-detail .col-img img { width: 100%; height: 100%; object-fit: cover; }
.iv-detail .wp-block-column > p { font-size: 15px; line-height: 30px; }
.iv-detail .wp-block-column > h3 { font-size: 18px; font-weight: 800; letter-spacing: 0.4px; line-height: 36px; }
.iv-detail .iv-box { margin-bottom: 30px; padding: 30px 0; }
.iv-detail .iv-box-inner { width: 736px; margin-inline: auto; }
.iv-detail .col-cap { font-size: 13px; line-height: 26px; }
/* 参考で PC には出ない写真（要素だけ置いて img の総数を合わせる） */
.iv-hidden { display: none; }
.iv-detail .fig-sm { display: none; }
.iv-detail .iv-box img { float: right; margin: 0 0 16px 20px; width: 300px; height: 200px; object-fit: cover; }
.iv-detail .iv-box p { font-size: 15px; line-height: 30px; }
.iv-detail .wp-block-group h2 { font-size: 32px; font-weight: 800; letter-spacing: 0.4px; line-height: 44.8px; margin-bottom: 10px; }
.iv-detail .wp-block-group p { font-size: 15px; line-height: 30px; }
.iv-detail > figure { margin: 0 0 45px; overflow: hidden; }
.iv-detail > figure img { width: 100%; height: 100%; object-fit: cover; }
.iv-detail > .wp-block-columns { gap: 20px; margin-bottom: 45px; }
.iv-detail > .wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; height: 100%; }
.iv-detail > .wp-block-columns img { width: 100%; height: 100%; object-fit: cover; }
.iv-detail > h2.wp-block-heading { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 44.8px; }
.iv-answer { text-align: center; width: 1280px; margin-left: -240px; }
.iv-answer .t { font-size: 13px; font-weight: 800; letter-spacing: 1.4px; line-height: 30px; color: var(--navy); }
.iv-answer-ttl { font-size: 32px; font-weight: 900; letter-spacing: 0.4px; line-height: 64px; }
.iv-other { width: 1100px; margin-left: -150px; }
.iv-other h2 { font-size: 80px; font-weight: 900; letter-spacing: 0.4px; line-height: 80px; }
.iv-other p a { font-size: 15px; font-weight: 700; color: var(--blue); }

@media screen and (max-width: 767px) {
  .iv-detail { width: auto; margin-inline: 25px; padding-top: 110px; }
  /* SP は帯を画面幅に戻す（参考の説明ブロックは 375×258.4・左右 25 空き）。 */
  .intro { width: auto; margin-left: 0; }
  /* PC で本文より広げた帯は SP で必ず画面幅に戻す（戻し忘れると横スクロールが出る）。 */
  /* 参考の SP はこの2つも画面幅いっぱい（375・x=0） */
  .iv-answer, .iv-other { width: 375px; margin-left: -25px; }
  .iv-answer-ttl { font-size: 28px; font-weight: 800; letter-spacing: 0.4px; line-height: 39.2px; }
  .iv-other h2 { font-size: 32px; font-weight: 700; letter-spacing: 0.4px; line-height: 32px; }
  .iv-detail .wp-block-group h2 { font-size: 22px; font-weight: 800; letter-spacing: 0.4px; line-height: 30.8px; }
  .iv-photo { position: static; width: 300px; margin: 0 auto 26px; }
  .intro-desc { width: 375px; margin-left: -25px; padding: 0 25px; }
  .iv-ttl { padding-right: 0; font-size: 28px; font-weight: 800; line-height: 39.2px; }
  /* SP の段の高さは --h-sp（未指定は 0＝自然な高さ＝80px 未満なら段にならない） */
  .iv-detail .iv-type, .iv-detail .intro-desc, .iv-detail .iv-photo, .iv-detail .iv-box,
  .iv-detail .wp-block-group, .iv-detail .g-inner > *, .iv-detail .iv-answer, .iv-detail .iv-answer > *,
  .iv-detail .iv-other, .iv-detail > p, .iv-detail > h2.wp-block-heading, .iv-detail .col-img,
  .iv-detail .wp-block-column > p, .iv-detail .wp-block-group > *,
  .iv-detail .iv-ttl, .iv-detail .caption { min-height: var(--h-sp, 0); }
  .iv-detail > figure, .iv-detail > .wp-block-columns, .iv-detail > .wp-block-columns > .wp-block-column { height: var(--h-sp, auto); }
  /* 写真の器だけは min-height ではなく height で止める。縦長の写真が入ると器が伸びて
     段の高さが参考とずれるため（2026-09-28・生成画像の配置で表面化。中は object-fit: cover で切る） */
  .iv-detail .col-img { height: var(--h-sp, auto); }
  .iv-detail > figure, .iv-detail > .wp-block-columns { margin-bottom: 24px; }
  .iv-detail > .wp-block-columns { flex-direction: column; gap: 12px; }
  /* 参考で SP も横並びのままの段（列が 300px 未満＝段にならない） */
  .iv-detail > .wp-block-columns.sp-row { flex-direction: row; }
  .iv-detail > .wp-block-columns > .wp-block-column { flex: 0 0 auto; width: 100%; }
  .iv-detail > .wp-block-columns.sp-row > .wp-block-column { flex: 1 1 0; width: auto; height: 100%; }
  .iv-detail > .wp-block-columns img { height: 100%; width: 100%; }
  .iv-detail > h2.wp-block-heading { font-size: 22px; line-height: 35.2px; }
  .iv-detail .fig-sm { display: block; width: 100%; height: var(--h-sp, auto); }
  .iv-detail .wp-block-column > h3 { font-size: 16px; line-height: 32px; }
  .iv-detail .iv-box { padding: 30px 0; }
  .iv-detail .iv-box-inner { width: auto; }
  .iv-detail .iv-box img:not(.iv-hidden) { float: none; display: block; margin: 0 0 16px; width: 100%; height: 200px; }
}

/* ============================================================
   建築事例 詳細（project-01〜03）
   [0] 写真スライド 800 / [1] 仕様の帯 132（白・pad 10/40）/ [2..] 本文（内側 896）/ 声 575 / 前後 178
   ============================================================ */
.nav-pos { position: relative; }
.detail-hero, .detail-hero .swiper-img { height: 800px; }
.detail-hero .swiper-img img { width: 100%; height: 800px; object-fit: cover; }
.detail-hero .slide-cap { left: 50px; bottom: 60px; }
.spec { height: 132px; background: var(--wh); padding: 10px 40px; display: flex; align-items: center; gap: 40px; }
.spec .info { flex-direction: column; flex: 0 0 auto; }
.spec .sp-name { font-size: 22px; font-weight: 800; line-height: 35.2px; }
.spec .sp-note { font-size: 13px; line-height: 26px; }
.spec .tag-list { gap: 28px; flex-wrap: wrap; }
.spec li { font-size: 13px; font-weight: 700; line-height: 26px; }
.spec li a { display: block; }
#detail-wrap { width: 896px; margin: 0 auto; padding-top: 232px; }
#detail-wrap > p.has-text-align-center { text-align: center; font-size: 15px; line-height: 30px; margin-bottom: 20px; }
#detail-wrap > figure { display: block; margin: 0 0 100px; overflow: hidden; }
#detail-wrap > figure img { width: 100%; height: 100%; object-fit: cover; }
#detail-wrap > figure .img-load { height: calc(100% - 90px); }
/* 説明文は PC では 1 行（30）＝ブロックにならない。参考が PC でも段にしている figure だけ 90 固定（figcap-pc） */
/* 参考のキャプションは 2 行が既定（21 件中 17 件が 60・fs15/lh30）。高さを 30 に固定すると 2 行目が消える
   （2026-09-29 実測＝project-01/02/03 の 7 件が clientHeight 30／scrollHeight 60 で切れていた）。 */
#detail-wrap figcaption { min-height: 30px; font-size: 13px; line-height: 30px; text-align: center; }
#detail-wrap > figure.figcap-pc figcaption { height: 90px; }
#detail-wrap .wp-block-column .img-load { height: 100%; }
#detail-wrap .wp-block-column figure { height: 100%; }
#detail-wrap > .wp-block-columns { gap: 20px; margin-bottom: 100px; }
#detail-wrap > .wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; height: 100%; }
#detail-wrap > .wp-block-columns img { width: 100%; height: 100%; object-fit: cover; }
.hero-mark { display: block; width: 46px; height: 7px; margin: 24px auto 0; }
#js-st-voice { background: #f7f7f9; padding: 128px 0; }
#js-st-voice .inner { width: 853.3px; margin-inline: auto; position: relative; }
/* 参考は「左に写真・右に文章」。左右を入れ替えると文章の右端が写真の下に隠れる
   （本文 520px ＋ 写真 400px は inner 853.3px に収まらない・2026-09-29 実機検証） */
#js-st-voice h3, #js-st-voice h4, #js-st-voice p { margin-left: 454px; }
#js-st-voice h3 { font-size: 28px; font-weight: 900; letter-spacing: 0.4px; line-height: 56px; color: inherit; }
#js-st-voice h4 { margin-top: 6px; font-size: 24px; font-weight: 900; letter-spacing: 0.4px; line-height: 38.4px; }
#js-st-voice p { margin-top: 10px; width: 400px; font-size: 15px; line-height: 30px; }
#js-st-voice img { position: absolute; left: 0; top: 0; width: 400px; height: 270.3px; object-fit: cover; }
/* 参考は画面幅を左右に二等分した帯で、各リンクは半分の中央に置かれる（罫線で仕切る）。
   固定幅 550px ＋ space-between だと左のリンクが画面左端に張り付いて見える（2026-09-29 実機検証） */
.prev-list { height: 178px; align-items: center; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prev-list a { width: 50%; text-align: center; }
.pl-next { border-left: 1px solid var(--line); }
.prev-list a { font-size: 15px; font-weight: 800; }

@media screen and (max-width: 767px) {
  /* 詳細ページの写真スライドは SP で 500px・背景は白（参考の実測） */
  .detail-hero, .detail-hero .swiper-img { height: 500px; background: var(--wh); }
  .detail-hero .swiper-img img { width: 375px; height: 500px; }
  .detail-hero .slide-cap { left: 20px; bottom: 40px; }
  /* SP は概要とタグが別ブロックになる（参考: info 375x106.9 pad 28/25/20/25・tag-list pad 20/25/30/25） */
  .spec { height: auto; padding: 0; display: block; background: none; }
  .spec .info { padding: 28px 25px 20px; }
  /* 参考の SP は 1 行 4 つ・段の高さ 26（9→3段 129・11→3段・8→2段 103） */
  .spec .tag-list { padding: 20px 25px 30px; gap: 0 16px; }
  .spec .tag-list li { flex: 0 0 calc(25% - 12px); font-size: 12px; }
  #detail-wrap { width: auto; margin-inline: 25px; padding-top: 120px; }
  /* SP の段の高さは spec の 4 つめ（--h-sp）。説明文つきの写真だけ器を auto にして
     「写真（img-load）＋説明文（90）」の 2 段に割る＝参考と同じ段数になる。 */
  #detail-wrap > figure, #detail-wrap > .wp-block-columns { margin-bottom: 40px; height: var(--h-sp, auto) !important; }
  #detail-wrap > .wp-block-columns { flex-direction: column; gap: 12px; }
  /* 縦並びでは flex-basis が主軸＝高さを決めてしまうので 0 0 auto に戻す（height を効かせる） */
  #detail-wrap > .wp-block-columns > .wp-block-column { flex: 0 0 auto; width: 100%; height: var(--h-sp, auto); }
  #detail-wrap .img-load { height: var(--h-sp, 100%); }
  #detail-wrap figcaption { height: 90px; }
  #detail-wrap img { width: 100%; height: 100%; object-fit: cover; }
  #js-st-voice { padding: 62.5px 25px; }
  #js-st-voice .inner { width: auto; }
  #js-st-voice h3, #js-st-voice h4, #js-st-voice p { margin-left: 0; }
  #js-st-voice h3 { font-size: 22px; line-height: 44px; }
  #js-st-voice h4 { font-size: 18px; line-height: 28.8px; }
  #js-st-voice p { width: auto; }
  #js-st-voice img { position: static; display: block; margin-top: 20px; width: 100%; height: 219.6px; }
  /* 写真の器（img-load）は SP だけ spec の高さで固定する（PC 用の calc・100% に勝たせる） */
  #detail-wrap > figure .img-load, #detail-wrap .wp-block-column .img-load { height: var(--h-sp, 100%); }
  .prev-list { width: auto; margin-inline: 0; }
  .pc-only { display: none; }
  .prev-list { width: auto; margin-inline: 0; height: 120px; }
  .hero-mark { display: none; }
}

/* ============================================================
   最後に効かせる補正（詳細度の逆転を避けるためファイル末尾に置く）
   ============================================================ */
/* 参考の p.btn-custom は行の高さを持たない（normal）。行の高さは中の a／span 側が作る。
   .btn-custom（0,1,0）は「.design-base p」等のセクション内 p 指定（0,1,1）に負けるので、
   同じ詳細度でファイル末尾に置いて勝たせる（typography の [class*="btn"] が FAIL になるのを防ぐ）。 */
p.btn-custom, .wrap-inner p.btn-custom { line-height: normal; }
/* ただし記事詳細（.page-detail）は参考の先頭 btn 要素が記事ヘッダの div（行の高さ 30）なので、
   こちらの先頭 btn 要素（p.btn-custom）も 30 のままにしておく＝typography の見本が合う。 */
.page-detail p.btn-custom { line-height: 30px; }

/* 記事本文の写真リンク（参考の blog-02 と同じくホバーで色だけ変わる）。
   セクション側の指定に負けないよう末尾に置く。 */
a.fig-link:hover { color: var(--hover); }