→ に変更。inc/main_visual.php） */
.main-visual__heading-lg .main-visual__eyebrow {
display: table;
margin-right: auto;
margin-left: auto;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.4;
-webkit-text-stroke: 0;
}
@media screen and (min-width: 768px) {
/* キャッチと同じ理由で px 固定（768〜1000px で :root が 1vw になるため） */
.main-visual__heading-lg .main-visual__eyebrow { font-size: 30px; }
}
/* --- 29-3 会社詳細（sec03）：モデルハウス一覧をアコーディオンに ---
ボタンはテーマ標準の .acc-more-btn（白地＋1px黒罫＋＋アイコン）をそのまま使い、
sec04 の「もっと見る」と同じ挙動（js-more-btn ＋ .more-content）にしています。
▼開閉のテキストは HTML の data-close-text で変えられます。 */
.sec03 .acc-more-btn { max-width: 46rem; }
.sec03 .more-content { display: none; }
.sec03 .more-content > .studio-block:first-child { margin-top: var(--s3); }
/* --- 29-4 愛知の注文住宅会社（sec04）：ジャンルのタグ ---
h3の直下に「設計事務所／ハウスメーカー／工務店」を並べ、該当するものだけ濃い色に。
色は簡易3選の .type-label と同じ考え方（設計事務所=赤／ハウスメーカー=ベージュ／工務店=青）です。
▼該当ジャンルは HTML 側の is-active で切り替えます。 */
.genre-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .6rem;
margin: 0 0 var(--s2);
padding: 0;
list-style: none;
}
.genre-tags li {
padding: .35rem 1rem;
background: var(--c-sub);
border: 1px solid var(--c-line);
color: var(--c-cap);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.4;
}
.genre-tags li::before { content: none; }
.genre-tags .genre-tag--office.is-active {
background: var(--c-type1);
border-color: var(--c-type1);
color: var(--c-base);
}
.genre-tags .genre-tag--maker.is-active {
background: var(--c-type2);
border-color: var(--c-type2);
color: var(--c-base);
}
.genre-tags .genre-tag--koumuten.is-active {
background: var(--c-type3);
border-color: var(--c-type3);
color: var(--c-base);
}
/* --- 29-5 sec06 / sec08：h2直下のリード画像をもう少し大きく（40% → 50%） --- */
.intro-media__side { width: 50%; }
/* --- 29-6 住宅展示場（sec08）：画像を右に置く --- */
.sec08 .intro-media { flex-direction: row-reverse; }
/* --- 29-7 住宅展示場（sec08）：背景に薄い四角モチーフ（sec06と同じ考え方） ---
位置は sec06 とずらして、並べたときに繰り返しに見えないようにしています。 */
.sec08 {
position: relative;
overflow: hidden;
/* ▼濃さを変えるときはこの2つだけ触ってください */
--sec08-fill: #F6F7F8;
--sec08-line: var(--c-line);
}
.sec08::before,
.sec08::after,
.sec08-l-center::before,
.sec08-l-center::after {
content: "";
position: absolute;
pointer-events: none;
}
/* 線の四角：右上 */
.sec08::before {
z-index: 0;
top: -11rem;
right: -12rem;
width: 42rem;
height: 42rem;
border: 1px solid var(--sec08-line);
}
/* 線の四角：左上 */
.sec08::after {
z-index: 0;
left: -14rem;
top: 8rem;
width: 36rem;
height: 36rem;
border: 1px solid var(--sec08-line);
}
.sec08-l-center { position: relative; z-index: 1; }
/* 塗りの四角：右下（コンテンツの背面） */
.sec08-l-center::before {
z-index: -1;
top: 46%;
right: -18rem;
width: 38rem;
height: 38rem;
background: var(--sec08-fill);
}
/* 線の四角：左下 */
.sec08-l-center::after {
z-index: -1;
top: 70%;
left: -16rem;
width: 30rem;
height: 30rem;
border: 1px solid var(--sec08-line);
}
/* --- 29-8 下層ページ：アイコン付き見出し（CHECK） ---
クラス付きの見出しなので、#low-page h3:not([class]) などの既定装飾は当たりません。
▼アイコンの文言は HTML の を書き換えてください。 */
.check-title {
display: flex;
align-items: center;
gap: var(--s2);
width: 100%;
margin-block: 3rem 2rem;
padding: var(--s2) 0;
border-top: 2px solid var(--c-red);
border-bottom: 1px solid var(--c-line);
font-size: 2.4rem;
font-weight: 900;
line-height: 1.5;
color: var(--c-ink);
}
.check-title__icon {
flex: none;
padding: .5em 1em;
background: var(--c-red);
color: var(--c-base);
font-size: 1.3rem;
font-weight: 800;
letter-spacing: .14em;
line-height: 1;
}
.check-title a { color: var(--c-ink); }
/* =========================================================
29-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 29-9 MVの小見出し：黒地にしたぶん padding を詰める --- */
.main-visual__heading-lg .main-visual__eyebrow {
padding: .28em .7em;
font-size: 1.9rem;
}
/* --- 29-10 sec06 / sec08 のリード画像：SPは縦積みなので幅いっぱい --- */
.intro-media__side { width: 100%; }
/* --- 29-11 sec08 の四角モチーフはSPで小さく --- */
.sec08::before { top: -6rem; right: -8rem; width: 23rem; height: 23rem; }
.sec08::after { left: -9rem; top: 5rem; width: 19rem; height: 19rem; }
.sec08-l-center::before { right: -11rem; width: 21rem; height: 21rem; }
.sec08-l-center::after { left: -10rem; width: 17rem; height: 17rem; }
/* --- 29-12 下層ページ：CHECK見出しはSPで小さく --- */
.check-title { font-size: 1.8rem; gap: var(--s1); }
.check-title__icon { padding: .5em .8em; font-size: 1.1rem; }
}
/* =========================================================
30. 2026-09-10（3回目）
========================================================= */
/* --- 30-1 MV：ロゴ〜リード文を少し上へ ---
小見出しを h2 の中に入れたぶん、ブロック全体が下がって見えていました。
「叶えられるかどうか」（キャッチの2行目）が円の上下中央にくる位置まで持ち上げます。
▼上下位置はこの --mv-lift の1つだけで調整できます（大きくするほど上へ）。 */
/* 大画面でも量が変わらないよう px 固定です（:root が clamp で伸びるため） */
.main-visual { --mv-lift: 14px;}
.main-visual__inner { top: calc(45% - var(--mv-lift)); }
.main-visual__text { top: calc(65vh - var(--mv-lift)); }
/* --- 30-2 会社詳細（sec03）：参考坪単価の見出しセルを灰色に ---
下線（テーブルの罫線）は消して、ベタ塗りだけで見せます。 */
.sec03 .spec-table th {
background-color: #999999;
border-bottom: 0;
}
.sec03 .spec-table td { border-bottom: 0; }
/* --- 30-3 アコーディオンボタンを角丸に戻す ---
9章で「角丸を廃止」して 0 にしていましたが、ご指示により
sec03（モデルハウス一覧）と sec04（もっと見る）とも角丸にします。 */
.acc-more-btn { border-radius: 100rem; }
/* --- 30-4 会社一覧（sec04）：ジャンルタグの色を灰色で統一 ---
赤・ベージュ・青の振り分けをやめ、該当するものだけ #666 で塗ります。 */
.genre-tags .genre-tag--office.is-active,
.genre-tags .genre-tag--maker.is-active,
.genre-tags .genre-tag--koumuten.is-active {
background: #666666;
border-color: #666666;
color: var(--c-base);
}
/* --- 30-5 会社一覧（sec04）：h3の左右でカードの縦線が切れて見える ---
原因は h3 の箱（.thb-box-full）と h3 自身が白で塗られていて、
カードの左右の1px罫線に重なっていたためです。背景を透明にすると、
カードの縦線が上から下まで1本につながります（上の赤い横線はそのまま）。 */
.sec04 .thb-box-full,
.sec04 .arrow-title { background-color: transparent; }
/* --- 30-6 アコーディオンの中のスライダーが出ない問題 ---
Swiper は初期化時にスライドの幅を測りますが、`display: none` の中にあると
0px になってしまい、開いても表示されませんでした。
開いたタイミングで測り直すよう js/custom-add.js に処理を追加しています。
（CSS側の対応は不要です。この行はメモです） */
/* =========================================================
30-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 30-7 MV：ロゴ〜キャッチを上へ（PCと同じ考え方。SPは円が top:52%） --- */
.main-visual { --mv-lift: 0rem; min-height:unset;}
.main-visual__inner { top: calc(52% - 8.4vw); }
/* --- 30-8 MV：小見出しが円からはみ出さないように ---
rem（SPは :root が 1vw）だと端末幅で効きが変わるので、vw で指定します。
▼はみ出す・小さすぎるときはこの 4.2vw だけを調整してください。 */
.main-visual__heading-lg .main-visual__eyebrow {
max-width: 100%;
padding: .3em .8em;
font-size: 3.8vw;
letter-spacing: .06em;
}
/* --- 30-9 会社詳細（sec03）：背景の細い四角モチーフはSPでは出さない ---
本文に線が重なって読みにくかったためです。 */
.sec03::before,
.sec03::after,
.sec03-l-center::before,
.sec03-l-center::after { display: none; }
/* --- 30-10 市町村（sec07）：地図のイラストをSPでも表示する ---
25-4 で消していたのを戻します。カードは 24-8 の「縦並び」になり、
画像はSVGの原寸比（3:2）でそのまま出します（切り抜きません）。 */
.city-card__img { display: block; }
.city-card__img img { aspect-ratio: 3 / 2; object-fit: contain; }
}
/* =========================================================
31. 2026-09-10（4回目）
========================================================= */
/* --- 31-1 会社詳細（sec03）：参考坪単価の見出しセルを白文字に --- */
.sec03 .spec-table th { color: var(--c-base); }
/* --- 31-2 会社一覧（sec04）：h3直上の赤い横線を削除 ---
19-3 / 28-7 で入れていた border-top をやめます。
（21-4 の margin-top: -1px は線を枠に重ねるための指定だったので、あわせて戻します） */
.sec04 .arrow-title { border-top: 0; }
.sec04 .thb-box-full { margin-top: 0; }
/* --- 31-3 会社一覧（sec04）：ジャンルタグの該当箇所を赤に（#666 → 赤） --- */
.genre-tags .genre-tag--office.is-active,
.genre-tags .genre-tag--maker.is-active,
.genre-tags .genre-tag--koumuten.is-active {
background: var(--c-red);
border-color: var(--c-red);
color: var(--c-base);
}
/* --- 31-4 市町村（sec07）：地図をご支給のイラスト1枚に差し替え ---
これまでは市ごとに13点のSVG（自社作成の簡易版）を用意していましたが、
**1枚の共通イラスト（/img/area-map.png）＋CSSで打つマーカー** に変えました。
・イラストは pixta_138480288 を、黒 → 灰色（#E4E7E8）に置き換えてタイトル部分を
トリミングしたものです（元データは 追加画像/ に残しています）。
・マーカーの位置は、旧SVGの座標を新しいイラストの外形に合わせて換算した値です。
▼位置を直すときは下の --pin-x / --pin-y だけ変えてください
（単位なしの数値＝イラスト左上からの％。余白ぶんは下の calc が差し引きます）。
▼イラストのまわりの余白は --map-pad の1か所で変えられます。 */
.city-card__img {
position: relative;
/* 2026-09-10（5回目）イラストが窮屈だったので余白を追加
2026-09-10（7回目）左右と上下を分けられるようにしました。
左右だけ広げるとイラストが小さくなり、カードの縦幅を抑えられます。 */
--map-pad: 1rem;
--map-pad-x: var(--map-pad);
--map-pad-y: var(--map-pad);
padding: var(--map-pad-y) var(--map-pad-x);
}
/* イラストは切り抜かず、そのままの比率で表示します（％指定の基準になるため） */
.city-card__img img {
aspect-ratio: auto;
height: auto;
object-fit: fill;
}
/* マーカーとズレるので、ホバー時の拡大はしません */
.city-card:hover .city-card__img img { transform: none; }
.city-card__img::before,
.city-card__img::after {
content: "";
position: absolute;
/* ％は「枠の内側（padding込み）」が基準になるため、余白ぶんを足し引きして
イラストの実寸に対する位置に直しています */
left: calc(var(--map-pad-x) + (100% - var(--map-pad-x) * 2) * var(--pin-x, 50) / 100);
top: calc(var(--map-pad-y) + (100% - var(--map-pad-y) * 2) * var(--pin-y, 50) / 100);
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--c-red);
pointer-events: none;
}
/* 外側のうすい円 */
.city-card__img::before {
width: calc((100% - var(--map-pad-x) * 2) * .154);
aspect-ratio: 1;
opacity: .18;
}
/* 中心の点（白フチつき） */
.city-card__img::after {
width: calc((100% - var(--map-pad-x) * 2) * .054);
aspect-ratio: 1;
box-shadow: 0 0 0 .15rem var(--c-base);
}
.city-card__img--nagoya { --pin-x: 20.19; --pin-y: 28.73; } /* 名古屋市 */
.city-card__img--tokoname { --pin-x: 16.00; --pin-y: 63.57; } /* 常滑市 */
.city-card__img--okazaki { --pin-x: 43.09; --pin-y: 55.50; } /* 岡崎市 */
.city-card__img--toyota { --pin-x: 41.59; --pin-y: 40.37; } /* 豊田市 */
.city-card__img--ichinomiya { --pin-x: 11.25; --pin-y: 14.27; } /* 一宮市 */
.city-card__img--anjo { --pin-x: 35.06; --pin-y: 55.07; } /* 安城市 */
.city-card__img--kariya { --pin-x: 28.36; --pin-y: 51.43; } /* 刈谷市 */
.city-card__img--kasugai { --pin-x: 25.80; --pin-y: 20.93; } /* 春日井市 */
.city-card__img--nagakute { --pin-x: 31.88; --pin-y: 28.43; } /* 長久手市 */
.city-card__img--miyoshi { --pin-x: 34.36; --pin-y: 39.20; } /* みよし市 */
.city-card__img--tokai { --pin-x: 19.81; --pin-y: 47.47; } /* 東海市 */
.city-card__img--handa { --pin-x: 22.90; --pin-y: 62.93; } /* 半田市 */
.city-card__img--toyohashi { --pin-x: 61.72; --pin-y: 77.43; } /* 豊橋市 */
/* --- 31-5 下層ページ：アイコン付き見出し（CHECK）を青い正円に --- */
.check-title { border-top-color: var(--c-blue); }
.check-title__icon {
display: flex;
align-items: center;
justify-content: center;
width: 5.6rem;
height: 5.6rem;
padding: 0;
border-radius: 50%;
background: var(--c-blue);
font-size: 1.1rem;
letter-spacing: .06em;
}
/* =========================================================
31-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 31-6 MV：ロゴ〜キャッチを下げて「その“こだわり”を」を上下中央に ---
30-7（calc(52% - 8.4vw)）は2行目基準でした。1行ぶん下げます。
▼位置はこの 1行だけで調整できます。 */
.main-visual__inner { top: calc(52% + 2.8vw); }
/* --- 31-7 MV：リード文の上のアキをなくす --- */
.main-visual__text { margin-top: 0; }
/* --- 31-8 市町村（sec07）：イラストは切り抜かず全体を出す --- */
.city-card__img img { aspect-ratio: auto; height: auto; object-fit: fill; }
/* --- 31-9 下層ページ：左端の目盛りと近いので、本文の幅を少し狭く --- */
#low-page.l-center {
padding-right: 2rem;
padding-left: 2rem;
}
/* --- 31-10 CHECKアイコンはSPで一回り小さく --- */
.check-title__icon { width: 4.6rem; height: 4.6rem; font-size: 1rem; }
}
/* =========================================================
32. 2026-09-10（5回目）
========================================================= */
/* --- 32-1 MV：キャッチとリード文のシャドウを少し強く ---
もともと薄くかけていました（h2: .18／リード文: .25）が、写真の明るい部分に
重なると読みにくかったので、にじみを大きく・濃度を上げています。
▼濃さはこの2か所の rgba の最後の数字（不透明度）で調整できます。 */
.main-visual__heading-lg {
text-shadow: 0 .1rem .2rem rgba(26, 26, 26, .40), 0 .2rem 1.4rem rgba(26, 26, 26, .34);
}
.main-visual__text {
text-shadow: 0 .1rem .2rem rgba(26, 26, 26, .40), 0 .2rem 1.2rem rgba(26, 26, 26, .34);
letter-spacing:1px;
}
/* 小見出しは黒地に白文字なので影は不要（28-1／29-2 のまま） */
.main-visual__heading-lg .main-visual__eyebrow { text-shadow: none; }
/* --- 32-2 会社一覧（sec04）：h3直上の赤い横線を復活 ---
31-2 で消したものを戻します。カードの枠線と1本に見えるよう、
21-4 の margin-top: -1px も戻しています（左右の縦線は 30-5 のまま出ます）。 */
.sec04 .arrow-title { border-top: 3px solid var(--c-red); }
.sec04 .thb-box-full { margin-top: -1px; }
/* --- 32-3 会社一覧（sec04）：ジャンルタグの該当箇所を #333 に --- */
.genre-tags .genre-tag--office.is-active,
.genre-tags .genre-tag--maker.is-active,
.genre-tags .genre-tag--koumuten.is-active {
background: #333333;
border-color: #333333;
color: var(--c-base);
}
/* =========================================================
32-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 32-4 市町村（sec07）：SPの余白 ---
2026-09-10（7回目）左右と上下を分ける形にしたので、指定は 33-12 に移しました。 */
}
/* =========================================================
33. 2026-09-10（7回目・テスト環境の確認を受けて）
========================================================= */
/* --- 33-0 【不具合】ヘッダーの出し入れでハンバーガーとSP固定CTAまで消えていた ---
24-2 で付けていたクラス名 `is-hidden` が、テーマ（custom.css 528行）の
**汎用クラス `.is-hidden { display: none }` と同名**でした。
そのため下スクロールで .header-area ごと display:none になり、
中にあるハンバーガー（.gnavi-ctrl）とSPの固定CTA（.sp-fix-cv）まで
消えていました。**クラス名を `is-header-hidden` に変更**して解消しています
（js/custom-add.js と 24-2 のセレクタ）。CSSの追記は不要です。 */
/* --- 33-1 大画面でのコンテンツ幅を 1400px前後 → 1300px に ---
リキッドデザイン（:root の font-size が最大14px）で 1920px 時に
セクションが 1478px・下層が 1409px まで広がっていたため、上限を足します。
2026-09-10（8回目）1300pxだと文字サイズはそのままで幅だけ狭くなり、
意図しない改行が出たため **1400px** に戻しました。
1428px以下（root=10px）では従来と1pxも変わりません。
▼簡易3選（.sec01-l-center）は今までどおりの幅のままにしています。 */
.sec02-l-center,
.sec03-l-center,
.sec04-l-center,
.sec05-l-center,
.sec06-l-center,
.sec07-l-center,
.sec08-l-center,
.pc-gnav__panel-inner { max-width: min(110rem, 1400px); }
/* 下層本文は content-box（幅にpaddingを含まない）なので、border-box にしてから上限を足します */
#low-page.l-center {
box-sizing: border-box;
max-width: min(100rem, 1300px);
}
/* --- 33-2 PCヘッダーナビ：カテゴリを5つ・2行前提に ---
文言が長くなる予定なので、折り返しを許可して**2行**で収まるようにします。
▼1行に戻したいときは white-space を nowrap に、
折り返す位置は max-width（文字数の目安）で調整できます。 */
@media screen and (min-width: 768px) {
.pc-gnav__list { gap: var(--s2); }
.pc-gnav__link {
max-width: 8.4em;
white-space: normal;
text-align: center;
line-height: 1.5;
}
/* ホバーの下線は2行ぶんの文字の下に */
.pc-gnav__link::after { bottom: calc(50% - 1.7em); }
/* --- 33-3 サイト名の右側に余白 --- */
.header-area-upper { padding-right: var(--s4); }
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
.pc-gnav__list { gap: var(--s1); }
.pc-gnav__link { max-width: 7.6em; }
}
/* --- 33-4 【不具合】ヘッダー・ハンバーガー・フッターのリンクに下線が付く ---
23-1 で `.header-area a { text-decoration: none }` を当てていましたが、
**2章の `li a[href^="http"]`（詳細度 0,1,2）のほうが強く**、
本番のように絶対URLで出力されるナビでは下線が勝っていました。
`li` を含めた形にして詳細度を上げます（0,2,2）。 */
.header-area a,
.header-area li a[href^="http"],
.gnavi-area a,
.gnavi-area li a[href^="http"],
.pc-gnav a,
.pc-gnav li a[href^="http"],
.footer-area a,
.footer-area li a[href^="http"] { text-decoration: none; }
.header-area a:hover,
.gnavi-area a:hover,
.pc-gnav a:hover,
.footer-area a:hover { text-decoration: underline; }
/* --- 33-5 会社一覧（sec04）：h3が1行の会社と2行の会社で画像の高さがずれる ---
テーマの matchHeight は `.sec04 p` が対象で、h3は揃いません。
2行ぶんの高さを常に確保して、下に続く画像の位置をそろえます。
（font-size 2.4rem × line-height 1.5 × 2行 ＋ 上下padding 1.6rem） */
.sec04 .arrow-title { min-height: calc(3em + 3.2rem); }
/* --- 33-6 住宅展示場（sec08）：フッターまでのアキを詰める --- */
.sec08-l-center { padding-bottom: 9rem; }
/* --- 33-7 下層ページ：目次の 01〜08 が上にずれて見える ---
::before に top: .1em を指定していたため、行の高さ（1.7）の中で
本文より上に浮いていました。同じ行送りに乗せます。 */
.onb-index02-chapter-h::before,
.onb-index01-chapter-h::before {
top: 0;
line-height: inherit;
}
/* --- 33-8 下層ページ：関連記事の●を黄色（サイトのタイプ色2）に --- */
.related-article01-list li::before { background-color: var(--c-beige); }
/* --- 33-9 下層ページ：h3の太さを 800 → 700 に（20-5の指定を上書き） --- */
#low-page h3:not([class]) { font-weight: 700; }
/* =========================================================
33-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 33-10 MV：リード文のシャドウは出さない ---
32-1 でPC向けに付けた影が、黒文字になるSPにも効いていました。 */
.main-visual__text { text-shadow: none; font-size:1.5rem;font-weight:normal;}
/* --- 33-11 会社詳細（sec03）：施工事例のアローを少し外側へ ---
PCは 28-6 で 6.4rem の余白を作っています。SPも同じ考え方で、
アロー（3.4rem）が画像に重ならない程度に余白をとります。
▼詰めたいときはこの値だけ変えてください。 */
.sec03 .slider-container .case-box { padding-right: 3.8rem; padding-left: 3.8rem; }
/* --- 33-12 市町村（sec07）：イラストを小さく（カードの縦幅を抑える） ---
余白を「左右だけ広く／上下は小さく」に分けました。
▼イラストの大きさは --map-pad-x（左右の余白）で調整します。大きいほど小さくなります。 */
.city-card__img {
--map-pad-x: 2.6rem;
--map-pad-y: 1rem;
}
}
/* =========================================================
34. 2026-09-10（8回目）
========================================================= */
/* --- 34-1 PCヘッダーナビ：文言を静的に短くしたので折り返し指定を見直す ---
カテゴリ名をそのまま出すと4行になってしまうため、`inc/pc_gnav.php` の
$pc_gnav_nav_labels でナビの文言だけ短いものに差し替えています（ … の中にあるため、2章の `p a[href^="http"]`
（詳細度 0,1,2）のほうが強いままでした。
`.footer-area a[href^="http"]`（0,2,1）にして、li・p のどちらにも勝つようにします。 */
.header-area a[href^="http"],
.gnavi-area a[href^="http"],
.pc-gnav a[href^="http"],
.footer-area a[href^="http"] { text-decoration: none; }
/* --- 36-5 下層ページ：目次の 01〜08 がまだ上にずれる ---------------------
33-7 では top だけを 0 にしていましたが、元の指定に
`transform: translateY(-50%)` と `height: 2rem` が残っていたため、
数字が 1rem ぶん上に引き上げられたままでした。両方とも打ち消します。 */
.onb-index01-chapter-h-two::before,
.onb-index01-chapter-h-three::before {
top: 0;
height: auto;
line-height: inherit;
transform: none;
}
/* --- 36-6 下層ページ 追加パーツ①：スライダーのアローの位置 ---------------
ねらい：アローを「画像の上下中央」に置き、「画像の少し外側」に出す。
・外側に出す … スライダーの箱（.slider-container）を画像より左右に広げ、
その余白（ガター）にアローを置きます。
※.swiper には overflow:hidden と clip-path が効いているので、
アローをマイナス値で外に出すと切れてしまいます。箱ごと広げるのが確実です。
・上下中央 … スライドの高さには引用元キャプションぶんも含まれるため、
50% だと画像の中心より下になります。画像の実寸を js/custom-add.js が
--slider-img-h に入れているので、その半分の位置に置きます。
▼画像とアローのアキは 11.2rem（左右合計）で調整できます。 */
@media screen and (min-width: 768px) {
.low-center-img-box .slider-container { max-width: 76%; }
.low-center-img-box .slider-container .low-center-img {
max-width: calc(100% - 11.2rem);
margin-left: auto;
margin-right: auto;
}
}
.low-center-img-box .slider-container .swiper-button-prev,
.low-center-img-box .slider-container .swiper-button-next {
top: calc(var(--slider-img-h, 100%) / 2);
transform: translateY(-50%);
}
/* --- 36-7 下層ページ：関連記事のリンクに下線が付く ------------------------
36-4 と同じ理由（2章の `li a[href^="http"]` が勝っていた）です。 */
.related-article01-list a[href^="http"],
.relations-box a[href^="http"] { text-decoration: none; }
/* =========================================================
36-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 36-8 MV：サイトロゴ〜h2 を円の上下中央に ---
31-6 で「その“こだわり”を」を中央に合わせるため 2.8vw ぶん下げていましたが、
ブロック全体としては下寄りに見えるため、円の中心（52%）に戻します。
▼位置はこの1行だけで調整できます。 */
.main-visual__inner { top: 50%; }
/* --- 36-9 会社詳細（sec03）：施工事例の左右paddingをやめる ---
33-11 で左右に 3.8rem の余白をとってアローを画像の外に出していましたが、
画像を大きく見せたいので余白は0にし、アローは画像の上に重ねます
（アロー自体は .slider-container の内側なので、はみ出しません）。 */
.sec03 .slider-container .case-box {
padding-right: 0;
padding-left: 0;
}
}
/* =========================================================
37. 2026-09-11（11回目）
========================================================= */
/* --- 37-1 会社一覧（sec04）：h3直上の赤い横線を削除 ---
32-2 で復活させた border-top を、あらためて外します。
（31-2 と同じ状態。`.thb-box-full` の -1px も戻します） */
.sec04 .arrow-title { border-top: 0; }
.sec04 .thb-box-full { margin-top: 0; }
/* --- 37-2 会社一覧（sec04）：ジャンルタグの色を簡易3選に合わせる ---
#666 → 赤 → #333 と変えてきましたが、簡易3選（.type-band--1〜3）と同じ
タイプ別の3色に戻します。
設計事務所＝赤（--c-type1）／ハウスメーカー＝黄（--c-type2）／工務店＝青（--c-type3）
▼該当しないタグは従来どおり薄いグレーのままです。 */
.genre-tags .genre-tag--office.is-active {
background: var(--c-type1);
border-color: var(--c-type1);
color: var(--c-base);
}
.genre-tags .genre-tag--maker.is-active {
background: var(--c-type2);
border-color: var(--c-type2);
color: var(--c-base);
}
.genre-tags .genre-tag--koumuten.is-active {
background: var(--c-type3);
border-color: var(--c-type3);
color: var(--c-base);
}
/* =========================================================
37-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 37-3 簡易3選（sec01）：タイプ帯のサブ文言を1行に ---
HTML側の … 設計事務所
で改行）。
CSS側は、その
の位置で素直に2行になるようにします。
▼配列に無いカテゴリはカテゴリ名がそのまま出るので、
そのときの保険として max-width（折り返す幅）は残しています。 */
@media screen and (min-width: 768px) {
.pc-gnav__link { max-width: 11em; }
.pc-gnav__label {
display: block;
white-space: normal;
}
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
.pc-gnav__link { max-width: 9.5em; }
}
/* =========================================================
35. 2026-09-10（9回目・コーディングチェック対応）
========================================================= */
/* --- 35-1 見出しの英字装飾（.en-label）を h2 の外に出した ---
コーディングチェック「Hタグ内に不要な要素が含まれていない（英字装飾はNG）」への対応です。
HTML側を ……
から
…
に変えたので、
h2 が持っていた中央寄せと下マージンを en-label 側にも持たせます。
▼見た目は変わりません（位置・余白とも従来どおり）。 */
.en-label--h2 {
margin: 0 0 2.2rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.en-label--h2 { margin-bottom: 1.6rem; }
}
/* =========================================================
36. 2026-09-10（10回目）
========================================================= */
/* --- 36-1 アローアイコンを細く・大きさを揃える -------------------
テーマ既定の `img/arrow-01-black-right.svg` は「塗りつぶしの三角」で、
しかも縦長（327.8 × 512）です。1.4rem角の枠に「幅100%」で敷いていたため、
・右向き … 1.4rem × 2.19rem（枠からはみ出す）
・下向き … 1.4rem × 0.90rem
と大きさがバラバラでした。
線だけのシェブロン（正方形のSVG）に差し替えて、太さと大きさを揃えます。
▼太さは SVG の中の stroke-width（1.6）で調整できます。
▼色を変えたいときは %231A1A1A（＝#1A1A1A）の部分を書き換えてください。 */
:root {
/* 正方形（ハンバーガーメニュー用：右向き／下向きで同じ大きさになります） */
--arw-sq-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20stroke=%22%231A1A1A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%203.2%2010.8%208%206%2012.8%22/%3E%3C/svg%3E");
--arw-sq-down: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20stroke=%22%231A1A1A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.2%206%208%2010.8%2012.8%206%22/%3E%3C/svg%3E");
/* 縦長（見出しの行末に置く用。元の三角と同じくらいの縦横比） */
--arw-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%209%2014%22%20fill=%22none%22%20stroke=%22%231A1A1A%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2.2%201.6%207%207%202.2%2012.4%22/%3E%3C/svg%3E");
}
/* ハンバーガーメニュー（SPのナビ） */
.gnavi-list__link::after {
width: 1.2rem;
height: 1.2rem;
background-image: var(--arw-sq-right);
background-size: contain; /* 正方形なので右向き・下向きが同じ大きさになります */
}
.gnavi-list__link--toggle::after { background-image: var(--arw-sq-down); }
/* 3章で右向きだけ小さくしていた指定（縦長SVG対策）は、正方形にしたので不要です */
.gnavi-list__link:not(.gnavi-list__link--toggle)::after { background-size: contain; }
/* 第2階層の「└」は文字なので、上の大きさ指定を打ち消します */
.gnavi-list__low .gnavi-list__link::after {
width: auto;
height: auto;
background-image: none;
}
/* 下層ページ：見出しにリンクを置いたときの行末アロー（h2〜h5） */
#low-page h2:not([class]) a,
#low-page h3:not([class]) a,
#low-page h4:not([class]) a,
#low-page h5:not([class]) a {
background-image: var(--arw-right);
background-size: auto 1em;
}
/* SPフッターのメニュー（開閉式）も同じ三角を使っているので合わせます */
@media screen and (max-width: 767px) {
.footer-menu-title__link--not-toggle::after,
.footer-menu__link {
background-image: var(--arw-right);
}
/* カテトップの開閉アイコン（▼／▲）も線のシェブロンに */
.footer-menu-title__link::after {
background-image: var(--arw-sq-down);
background-size: auto 1em;
}
}
/* --- 36-2 会社詳細（sec03）：アコーディオンを開くと背景の四角が動く -------
背景モチーフのうち3つが「セクションの高さ基準」で置かれていたため、
アコーディオンを開いて高さが変わると一緒に動いていました。
・.sec03::after … bottom: 8rem（下端から）
・.sec03-l-center::before … top: 32%
・.sec03-l-center::after … top: 63%
これを「上端からの固定距離（rem）」に置き換えます。
※閉じた状態の見た目は今までと同じ位置になる値を入れています。
▼位置を動かしたいときは、下の3つの数値だけを変えてください。
※.sec03::after だけ min() を挟んでいます。会社紹介が短いページでも
セクションの外にはみ出さないようにするための保険です。 */
.sec03::after {
top: min(351rem, calc(100% - 44rem));
bottom: auto;
}
.sec03-l-center::before { top: 126rem; }
.sec03-l-center::after { top: 249rem; }
/* --- 36-3 住宅展示場（sec08）：h2が文字落ちする ------------------------
本文幅は 1400px で頭打ちなのに、文字サイズ（rem）は画面幅に応じて
14px まで大きくなるため、1900px 前後から
「愛知にある住宅展示場を一気にチェック！」が1行に収まらず、
末尾の数文字だけが2行目に落ちていました。
この見出しだけ少し小さく・字間を詰めて、1行に収めます。
▼文言を長くするときは、この font-size を下げてください。 */
@media screen and (min-width: 768px) {
.sec08 .section-title04 {
font-size: 3.8rem;
letter-spacing: .02em;
}
}
/* --- 36-4 【不具合】フッターの「カテトップ」に下線が付く -----------------
33-4 で `li a[href^="http"]` 対策を入れましたが、カテトップのリンクは
を
に変えて、SPでは改行しないようにしました。
そのうえで文字を 1.35rem → 1.6rem に。
1行に収めるための実測：帯の内側は約252px、文言のいちばん長い
「実績とブランド力にこだわるなら」が 1.6rem で約250px とギリギリだったため、
・字間を 0 に
・帯の左右パディングを 1.6rem → 1.2rem
・アイコンとの間隔を 0.8rem → 0.6rem
の3つで余白を稼いでいます（実測で約12pxの余裕）。
▼文言を長くするときは、この font-size を下げてください。 */
.type-band { padding-right: 1.2rem; padding-left: 1.2rem; gap: .6rem; }
.type-band__sub {
font-size: 1.6rem;
letter-spacing: 0;
}
/* --- 37-4 会社詳細（sec03）：モデルハウス名（h6）を h5 より少し小さく ---
h5（.section-title05）はSPで 2.0rem です。 */
.studio-block__name { font-size: 1.8rem; }
}
/* =========================================================
38. 2026-09-11（12回目）
========================================================= */
/* --- 38-1 【不具合】存在しない画像を読みに行ってコンソールエラーになる ---
・pagetop.png … ページトップボタンは 14章でCSS描画に変えたので、
`footer.php` から ごと外しました（CSS側は変更なし）。
・sec01-b.png … テーマ既定の背景画像です。`header.php` の preload を外し、
ここで background-image も打ち消します（色は従来どおり）。 */
.sec01 { background-image: none; }
.mainvisual-low { background-image: none; }
/* --- 38-2 PCヘッダーナビ：カテトップどうしの間隔を広げる ---
33-2 で var(--s2)（1.6rem）にしていたものを var(--s3)（2.4rem）へ。
画面が狭いPC（〜1439px）は var(--s1) → var(--s2) に。
▼詰めたい・広げたいときはこの2か所の数値だけで調整できます。 */
@media screen and (min-width: 768px) {
.pc-gnav__list { gap: var(--s3); }
}
@media screen and (min-width: 768px) and (max-width: 1439px) {
.pc-gnav__list { gap: var(--s2); }
}
/* --- 38-3 PCヘッダーナビ：ホバーで開くパネルのカテトップ見出し ---
font-weight: 800 で小さい字が潰れて見えたので 700 に。 */
@media screen and (min-width: 768px) {
.pc-gnav__panel-head { font-weight: 700; }
}
/* --- 38-4 簡易3選（sec01）：見出し構造の変更にあわせた調整 ---
HTML側を
…
社名
→ 設計事務所社名
に変えています。ラベルが .title-catch の中に入ったことで
`.sec01 .title-catch span`（サブ行用の指定）が当たってしまうため、打ち消します。
※見た目は従来どおりです。 */
.sec01 .title-catch .type-label {
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto var(--s1);
padding: .4rem 1.6rem;
color: var(--c-base);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.4;
}
/* --- 38-5 テキストリンク（.btn-link）：アローと文字の間隔を少し広げる ---
テーマ既定は padding-right: 2rem で、アロー（1em分＝約1.9rem）とほぼ同じ幅でした。
em指定にして、文字サイズが変わっても同じ見え方になるようにしています。
▼アキを変えたいときはこの 2em だけを調整してください。 */
.btn-link a { padding-right: 2em; }
/* --- 38-6 フッター：サイトマップのアローが白くて見えない ---
コピーライト帯を黒→薄いグレーに変えた（13章）ため、
テーマ既定の白いアロー（arrow-01-right.svg）が見えなくなっていました。
36-1 で用意した黒い線のシェブロンに差し替えます。 */
.footer-sitemap__link { background-image: var(--arw-right); }
/* --- 38-7 サイト名リンクにホバーアクション --- */
.header-title a { transition: opacity .25s; }
.header-title a:hover { opacity: .6; }
/* =========================================================
38-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 38-8 外部リンクボタンと電話ボタンが近い ---
22-5 で -1.6rem 詰めていましたが、近すぎたので通常の間隔に戻し、
さらに少しだけアキをとります。
▼アキはこの1行で調整できます。 */
.btn-web + .btn-tel { margin-top: var(--s2); }
/* --- 38-9 会社詳細（sec03）：アコーディオンボタンの行間 --- */
.sec03 .acc-more-btn { line-height: 1.7; margin-bottom:1rem;}
/* --- 38-10 基礎知識（sec05）：h3の強調部分がh2より大きく見える ---
SPのh2（.section-title04）は 2.4rem です。h3はそれより少し小さくします。
▼「愛知の」の部分は .ttl-area（.74em）で連動して小さくなります。 */
.sec05 .twb-arrow-title { font-size: 2.2rem; }
/* --- 38-11 基礎知識（sec05）：h2直下のアキを少し詰める ---
テーマ既定のSPは margin-bottom: 6rem です。 */
.sec05 .section-title04 { margin-bottom: 3.6rem; }
/* --- 38-12 下層ページ：見出しの文字サイズ ---
h2 2.2 / h3 2.0 / h4 1.8 / h5 1.7 / h6 1.6rem に統一します。 */
#low-page h2:not([class]) { font-size: 2.2rem; }
#low-page h3:not([class]) { font-size: 2.0rem; }
#low-page h4:not([class]) { font-size: 1.8rem; }
#low-page h5:not([class]) { font-size: 1.7rem; }
#low-page h6:not([class]) { font-size: 1.6rem; }
/* --- 38-13 下層ページ：回り込み画像のキャッチを 2.0rem → 1.8rem --- */
#low-page .low-center-img-catch,
#low-page .low-left-img-catch,
#low-page .low-right-img-catch { font-size: 1.8rem; }
/* --- 38-14 下層ページ：テーブルのはみ出し対策 ---
【確認結果】SPではテーマ側でセルが縦並びになる作りのため、
4列・5列になっても画面からはみ出しません（390 / 375 / 320px で実測ずみ）。
残るリスクは「途中で改行できない長い文字列（URLなど）」がセルに入るケースなので、
そこだけ折り返すようにしておきます。 */
#low-page table th,
#low-page table td { overflow-wrap: anywhere; }
}
/* =========================================================
39. 2026-09-14（14回目）
========================================================= */
/* --- 39-1 会社詳細（sec03）：施工事例の縦位置の写真が間延びして見える ---
スライダーの画像は幅100%で表示していたため、縦長の写真（gh-p12441.jpg など）だけ
カードがとても縦長になっていました。高さの上限を決めて、中央に置きます。
▼大きさはこの max-height だけで調整できます。 */
.sec03 .case-box__side img {
width: auto;
max-width: 100%;
max-height: 30rem;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 767px) {
/* SPは1カラムなので、もう少し高さを許容します */
.sec03 .case-box__side img { max-height: 24rem; }
}
/* --- 39-2 会社詳細（sec03）：口コミの見出しの高さ ---
27-2 の min-height（3行ぶんを常に確保）をやめ、
`js/common.js` の matchHeight（`.sec03 .voice-card__title`）で
実際にいちばん高いカードに合わせるようにしました。
→ 見出しが2行だけの行では、余白が余らなくなります。 */
@media screen and (min-width: 768px) {
.voice-card__title { min-height: 0; }
}
/* --- 39-3 会社詳細（sec03）：地図と次の見出しのアキを広げる ---
拠点の区切りが分かりやすいように、地図の下の余白を 2.4rem → 4rem に。
▼アキはこの1行で調整できます。 */
.studio-block__gmap { margin-bottom: var(--s5); }
/* --- 39-4 会社詳細（sec03）：注釈（※参照元）と直後の見出しのアキ ---
トヨタホーム愛知のモデルハウス欄で、注釈と最初の拠点名が近すぎたため。 */
.sec03 .caption + .studio-block { margin-top: var(--s5); }
/* --- 39-5 会社一覧（sec04）：h3の高さ ---
33-5 の min-height（2行ぶんを常に確保）をやめ、
`js/common.js` の matchHeight（`.sec04 .arrow-title`）でそろえます。
※アコーディオンの中の6社は、開いたときに `js/custom-add.js` が resize を
発火させるので、そのタイミングで matchHeight が計算し直されます。 */
.sec04 .arrow-title { min-height: 0; }
/* --- 39-6 セクションのリード文（sec05 / sec07）---
簡易3選（.sec01-lead）と同じ体裁です。 */
.section-lead {
max-width: 80rem;
margin: -1rem auto var(--s4);
font-size: 1.5rem;
line-height: 1.9;
text-align: center;
}
@media screen and (max-width: 767px) {
.section-lead { text-align: left; margin-bottom: var(--s3); }
}
/* =========================================================
39-SP
========================================================= */
@media screen and (max-width: 767px) {
/* --- 39-7 簡易3選（sec01）：電話ボタンの上のアキを詰める ---
38-8 で全体を var(--s2)（1.6rem）にしましたが、
3選のカードの中では広く見えるため、ここだけ半分にします。 */
.sec01 .btn-web + .btn-tel { margin-top: 0; }
.sec01 .slider-container--small { margin-bottom: 1.5rem; }
.main-visual__heading-lg .mv-small { font-size: 4.5vw; }
}