で本文を包む）
---------------------------------------------------------------------
ヘッダー・フッターを巻き込まずに「本文の組版」だけを決めるためのスコープ。
🚨 :where() で詳細度を 0 にしてある。ここを `.m-page p` と書くと
アイブロウやラベル（クラス1つ＝詳細度 0-1-0）に勝ってしまい、
「クラスを当てたのにサイズが変わらない」罠になる。
===================================================================== */
.m-page {
font-family: var(--font-body);
color: var(--c-text);
}
/* 本文（1行25〜35字・行間1.8・字間0.08em） */
:where(.m-page) :where(p) {
font-size: var(--fz-base);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
color: var(--c-text-sub);
/* 🚫 max-width は当てない。design_rules.md 2026-08-01 の方針転換により
本文への max-width は px/em/rem/ch すべて禁止（直近20案件中9案件・26件が
「変なところで改行される／右に余白ができる」＝AIが入れた max-width を消してくれ、
という修正指示だった）。行長は .l-container とグリッドの列数で決める。 */
}
/* 和文見出しは字間を締めて本文0.08emと対比させる（design_system 2-6） */
:where(.m-page) :where(h1, h2, h3, h4) {
font-family: var(--font-title);
font-weight: 700;
letter-spacing: 0.02em;
font-feature-settings: "palt";
color: var(--c-text);
margin: 0;
}
/* =====================================================================
1. Atoms
===================================================================== */
/* ──
── 英字アイブロウ（年輪の弧）＋ 和文特大見出し ───────── */
.m-heading {
display: grid;
gap: var(--m-gap-16);
margin-bottom: var(--m-gap-56);
}
.m-heading__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--m-gap-16);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--c-main);
line-height: 1;
}
.m-heading__eyebrow::before {
/* 年輪の弧を1本だけ引いた小さな印。汎用の飾り罫ではない */
content: '';
width: 40px;
height: 24px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--m-ring-arc) left center / contain no-repeat;
mask: var(--m-ring-arc) left center / contain no-repeat;
}
.m-heading__eyebrow-ja {
font-size: 0.875rem;
letter-spacing: 0.16em;
color: var(--c-text-sub);
font-weight: 700;
}
.m-heading__title {
font-size: var(--fz-sechead);
line-height: var(--lh-h2);
}
.m-heading__lead {
margin-top: var(--m-gap-8);
}
/* 濃色パネル内で使う見出し（下余白を持たず、パネル本文と 24px で続く）
⚠️ 複合セレクタ（詳細度 0,2,0）にしてあるのは、末尾のSPメディアクエリの
`.m-heading { margin-bottom: 40px }`（0,1,0・後勝ち）に潰されないため。
単一クラスで書くと SP だけ CTA の見出し下が 16px 広がる。 */
.m-heading.m-heading--on-dark {
display: block;
margin-bottom: 0;
}
.m-heading--on-dark .m-heading__eyebrow { color: #fff; }
.m-heading--on-dark .m-heading__eyebrow-ja { color: rgba(255, 255, 255, 0.72); }
.m-heading--on-dark .m-heading__title {
margin-top: var(--m-gap-16);
color: #fff;
/* CTAだけジャンプ率の床を割っていた（PC2.25倍 / SP1.50倍）。
design_system.md §2-6「2.5倍を下回らせない」「見出しサイズをコンポーネントに直書きしない」
に合わせ --fz-sechead を経由させる（40→52px＝SP2.5倍 / PC3.25倍）。 */
font-size: var(--fz-sechead);
line-height: var(--lh-h2);
}
/* ── ── アクセントの使い所は「キーワード」と「CTA」だけ（10%） ── */
.m-mark {
background: linear-gradient(transparent 62%, var(--c-accent-tint) 62%);
font-weight: 700;
color: var(--c-text);
}
/* ── ── 3状態（hover / focus-visible / active）を必ず持たせる ── */
.m-textlink {
display: inline-flex;
align-items: center;
gap: var(--m-gap-8);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--c-main);
padding-bottom: 6px; /* 下線とテキストの間。8ptスケールの微調整例外 */
border-bottom: 1px solid var(--c-border);
transition: color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.m-textlink:hover,
.m-textlink:focus-visible {
color: var(--c-accent-text);
border-bottom-color: var(--c-accent-text);
}
.m-textlink:active { color: var(--c-main-dark); }
/* ── 相当（ボタン・電話の並び）───────────────────────── */
.m-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--m-gap-24);
margin-top: var(--m-gap-40);
}
/* ── ── 写真は「記録写真」。角処理は控えめ・影は使わない ────── */
.m-photo {
margin: 0;
overflow: hidden;
border-radius: var(--radius-md);
background-color: var(--c-main-light);
}
.m-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 比率（枠を先に決めて CLS を出さない） */
.m-photo--r34 { aspect-ratio: 3 / 4; }
.m-photo--r43 { aspect-ratio: 4 / 3; }
.m-photo--r32 { aspect-ratio: 3 / 2; }
.m-photo--r11 { aspect-ratio: 1 / 1; }
.m-photo--r169 { aspect-ratio: 16 / 9; }
/* 角丸（意図的に散らす：基調10px／小6px／直角／切り口） */
.m-photo--radius-sm { border-radius: var(--radius-sm); }
.m-photo--radius-none { border-radius: 0; }
.m-photo--radius-cut { border-radius: 48px var(--radius-md) var(--radius-md) var(--radius-md); }
/* ── ───────────────────────────────────────────────── */
/* pill: カテゴリラベル（アクセント色の枠線ピル） */
.m-badge--pill {
display: inline-block;
padding: 4px 16px;
border: 1px solid var(--c-accent);
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-accent-text);
letter-spacing: 0.08em;
line-height: 1.6;
}
/* index: 連番（01, 02 …）。小さく letter-spacing を開けて記号的に扱う */
.m-badge--index {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--c-accent-text);
line-height: 1;
}
/* ring: 年輪の断面に番号を乗せた丸バッジ（signature） */
.m-badge--ring {
position: relative;
width: 64px;
height: 64px;
border-radius: var(--radius-full);
background-color: var(--c-bg-sub);
background-image: var(--m-ring);
background-size: 168% 168%;
background-position: center;
display: grid;
place-items: center;
font-size: 1.125rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
color: var(--c-main);
font-feature-settings: "tnum";
}
/* ── ── 電話番号は必ずここを通す（ページ間でデザインが割れるのを防ぐ）──
見た目の土台は _global.css の .c-tel。ここでは「数値の可読性」を固定する。
🚨 装飾フォント（明朝・Serif）が入らないよう --ff-sans を明示する。 */
.m-tel,
.m-tel .c-tel__number,
.m-tel .c-tel__time,
.m-tel .c-tel__label {
font-family: var(--ff-sans);
}
.m-tel .c-tel__number {
font-feature-settings: "tnum"; /* 等幅数字 */
}
/* ── ── 装飾は年輪1点。位置は使う側のセクションが決める ────── */
.m-accent--ring-mark {
width: 88px;
height: 88px;
border-radius: var(--radius-full);
background-color: var(--c-bg-sub);
background-image: var(--m-ring);
background-size: 150% 150%;
background-position: center;
display: grid;
place-items: center;
pointer-events: none;
}
/* 年輪の上半分をセクションの継ぎ目に沈める＝「切り口が地面から覗く」区切り。
汎用の波線・ただの罫線は使わない（design_system 2-5）。
親に overflow:hidden があるので上半分だけが自動で隠れる。 */
.m-accent--ring-seam {
position: absolute;
left: 14%;
top: 0;
width: 640px;
max-width: var(--width-ring-accent);
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background: var(--m-ring) center / contain no-repeat;
opacity: 0.14;
pointer-events: none;
}
/* 木の高さスケール（高木伐採の「高さ」を示す目盛り） */
.m-accent--height-scale {
width: 24px;
display: flex;
align-items: stretch;
color: var(--c-main);
opacity: 0.45;
pointer-events: none;
}
.m-accent--height-scale svg {
width: 24px;
height: 100%;
}
/* =====================================================================
2. Molecules
===================================================================== */
/* ── ── 3型。角丸＋影＋左縦線の「AIっぽいカード」は作らない ───── */
/* photo-top: 写真上・テキスト下（施工事例カード） */
.m-card--photo-top {
display: grid;
gap: var(--m-gap-16);
color: inherit;
text-decoration: none;
}
.m-card--photo-top .m-photo img {
transition: transform var(--duration-slow) var(--ease-out);
}
.m-card--photo-top:hover .m-photo img,
.m-card--photo-top:focus-visible .m-photo img { transform: scale(1.03); }
.m-card__meta {
display: flex;
align-items: center;
gap: var(--m-gap-16);
font-size: 0.8125rem;
letter-spacing: 0.08em;
color: var(--c-text-sub);
font-feature-settings: "tnum";
}
.m-card--photo-top .m-card__title {
font-size: 1.0625rem;
line-height: 1.6;
/* 🚨 字間は 0.04em にしない。施工事例のタイトルは microCMS 入力で
「宮城県石巻市 シュロの木 伐採及び抜根作業」のように20文字前後になり、
0.04em（＝17pxで0.68px/字）の積み上がりで最後の1〜2文字だけが
2行目に落ちていた（/debug 2026-10-02 実測・1440〜360pxの全幅で再現）。
CMS入力なので長さは制御できない。字間側で余裕を作る。 */
letter-spacing: 0.02em;
}
.m-card--photo-top:hover .m-card__title,
.m-card--photo-top:focus-visible .m-card__title { color: var(--c-main); }
/* photo-row: 写真とテキストの横並び1行（サービス一覧）。
並びの左右入れ替えは親セクション側（.m-service-section__list）が担当する。 */
.m-card--photo-row {
display: grid;
/* 写真列を広げて本文の行長を詰める。
🚫 本文に max-width を当てるのは禁止（design_rules 2026-08-01）なので、
行長は「グリッドの列幅」で調整する。216px→320px で本文は約49字→約42字。
実写真がこの案件の強みなので、写真を大きくする方向で解決している。 */
grid-template-columns: 320px minmax(0, 1fr);
gap: var(--m-gap-40);
align-items: center;
padding: var(--m-gap-24);
border-radius: var(--radius-md);
background-color: var(--c-surface);
}
.m-card--photo-row .m-card__body {
display: grid;
gap: var(--m-gap-8);
}
.m-card--photo-row .m-card__title {
font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 → 24px */
line-height: 1.4;
}
/* photo-note: 写真＋一言（お悩みカード）。年輪の中心を印に使う */
.m-card--photo-note {
display: grid;
gap: var(--m-gap-16);
}
.m-card--photo-note .m-card__note {
display: grid;
grid-template-columns: 24px 1fr;
gap: var(--m-gap-16);
align-items: start;
font-size: var(--fz-base);
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.04em;
color: var(--c-text);
max-width: none;
}
.m-card--photo-note .m-card__note::before {
content: '';
width: 24px;
height: 24px;
margin-top: 2px;
border-radius: var(--radius-full);
background-color: var(--c-accent-light);
background-image: var(--m-ring);
background-size: 190% 190%;
background-position: center;
}
/* ── ── 濃緑の「1枚パネル」＝ページの錨（design_system 2-2）──── */
.m-panel {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
background-color: var(--c-main);
color: #fff;
}
.m-panel::before {
content: '';
position: absolute;
background: var(--m-ring-cream) center / contain no-repeat;
pointer-events: none;
}
.m-panel__title {
color: #fff;
font-size: clamp(1.375rem, 2.6vw, 1.875rem); /* 22 → 30px */
line-height: 1.6; /* 3行組みで詰まって見えたため 1.4 → 1.6（2026-10-07 指示） */
}
.m-panel__text {
color: rgba(255, 255, 255, 0.86);
/* 🚫 max-width は当てない（design_rules 2026-08-01）。幅はパネルの padding で決める */
}
.m-panel__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--m-gap-48);
align-items: center;
}
/* overlap: 次のセクションへ乗り上げて継ぎ目をまたぐ＝ページの連続性装置
（自セクションの下余白を打ち消したうえで 64px 食い込ませる） */
.m-panel--overlap {
z-index: 2;
margin-top: var(--m-gap-80);
margin-bottom: calc(-1 * var(--section-pb) - var(--m-gap-64));
padding: var(--m-gap-64);
}
.m-panel--overlap::before {
right: -120px;
bottom: -220px;
width: 480px;
height: 480px;
opacity: 0.22;
}
/* dark: 単独の締めパネル（CTA） */
.m-panel--dark {
padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
}
.m-panel--dark::before {
left: -180px;
top: -200px;
width: 560px;
height: 560px;
opacity: 0.2;
}
/* =====================================================================
3. Organisms — （テキスト左＋縦写真2枚/横写真1枚の段差クラスタ）
---------------------------------------------------------------------
元素材が「最大1024px・224点中168点が縦位置」という制約を構図の個性に変換した型。
フルブリード1920pxの hero は作れないので全面に引き伸ばさない。
===================================================================== */
.m-hero-top {
position: relative;
overflow: hidden;
padding-top: var(--m-gap-80);
padding-bottom: var(--m-gap-96);
background-color: var(--c-bg);
}
/* 背景の工夫：右上に年輪の透かし（ベタ塗りで章分けしない） */
.m-hero-top::before {
content: '';
position: absolute;
top: -220px;
right: -260px;
width: 720px;
height: 720px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
.m-hero-top__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
gap: var(--m-gap-48);
align-items: center;
}
.m-hero-top__body { position: relative; }
/* 高さスケールは絶対配置。見出し・本文の左端はコンテナ基準（＝他セクションと同じ）に保つ。
グリッドの1列目に置くと hero だけ左端がずれて「揃っていない」見え方になる。 */
.m-hero-top__body > .m-accent--height-scale {
position: absolute;
left: -36px;
top: 4px;
bottom: 4px;
}
.m-hero-top__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--m-gap-16);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--c-main);
margin-bottom: var(--m-gap-24);
}
.m-hero-top__catch {
font-size: clamp(2.5rem, 5vw, 3.375rem); /* 40 → 54px（SPでも本文16pxの2.5倍を確保） */
line-height: 1.4; /* 1.22 → 1.4。h2（--lh-h2）とそろえる（2026-10-07 指示） */
letter-spacing: 0.01em;
}
.m-hero-top__catch em {
font-style: normal; /* 和文にイタリックを使わない */
color: var(--c-main);
}
.m-hero-top__text {
margin-top: var(--m-gap-32);
}
/* ── 写真1枚（2026-10-07 に縦・横・縦の3枚クラスタから変更。素材は 1280px 正方形） ── */
.m-hero-top__photo { position: relative; }
/* =====================================================================
4. Organisms — （こんなお悩みはありませんか？）
===================================================================== */
.m-worry-section {
position: relative;
z-index: 2;
}
.m-worry-section__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--m-gap-32) var(--m-gap-24);
}
/* =====================================================================
5. Organisms — （サービス一覧・行を左右交互に組む）
===================================================================== */
.m-service-section {
position: relative;
z-index: 1;
overflow: hidden;
}
/* 直前のセクションから濃緑パネルが 64px 乗り上げてくるので、見出しの上に逃げを作る
（ のときだけ付く） */
.m-service-section--panel-overlap .m-heading { padding-top: var(--m-gap-48); }
.m-service-section__list {
display: grid;
gap: var(--m-gap-16);
}
.m-service-section__list .m-card--photo-row:nth-child(even) {
grid-template-columns: minmax(0, 1fr) 320px; /* 奇数行と同じ写真幅に揃える */
}
.m-service-section__list .m-card--photo-row:nth-child(even) .m-photo { order: 2; }
.m-service-section__list .m-card--photo-row:nth-child(even) .m-card__body { order: 1; }
.m-service-section__foot { margin-top: var(--m-gap-48); text-align: center; } /* 一覧への導線を目立たせる（2026-10-07 指示：テキストリンク→緑塗りボタン中央） */
/* =====================================================================
6. Organisms — （選ばれる理由・2カラム＋年輪の番号）
※ 2026-10-07 指示で偶数列の段差（margin-top 56px）を撤去し、行をそろえた
===================================================================== */
.m-reason-section {
position: relative;
overflow: hidden;
}
.m-reason-section::before {
content: '';
position: absolute;
right: -320px; /* 左下 → 右上へ移動（2026-10-07 指示） */
top: -300px;
width: 860px;
height: 860px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.07;
pointer-events: none;
}
.m-reason-section__inner { position: relative; }
.m-reason-section__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--m-gap-56) var(--m-gap-64);
}
.m-reason-section__item > .m-badge--ring { margin-bottom: var(--m-gap-24); }
.m-reason-section__title {
font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 → 24px */
line-height: 1.45;
}
.m-reason-section__sub {
margin-top: var(--m-gap-8);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.06em;
color: var(--c-accent-text);
}
.m-reason-section__text { margin-top: var(--m-gap-16); }
/* =====================================================================
7. Organisms — （施工事例3カード・継ぎ目から年輪が覗く）
===================================================================== */
.m-works-section {
position: relative;
overflow: hidden;
}
.m-works-section__inner { position: relative; }
.m-works-section__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--m-gap-32);
list-style: none;
margin: 0;
padding: 0;
}
.m-works-section__foot { margin-top: var(--m-gap-48); text-align: center; } /* サービス案内と同じ緑塗りボタン中央（2026-10-07 指示） */
/* =====================================================================
8. Organisms — （写真とテキストの左右split）
===================================================================== */
.m-split-section {
position: relative;
overflow: hidden;
}
/* 淡い葉の写真をベタ塗りの代わりに使う背景の透かし（design_system 2-3） */
.m-split-section--leaf::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: min(46%, 640px);
height: 100%;
background: url("/images/bg_leaf_soft.jpg") center / cover no-repeat;
opacity: 0.5;
-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 72%);
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 72%);
pointer-events: none;
}
.m-split-section__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--m-gap-64);
align-items: center;
}
.m-split-section__media { position: relative; }
/* 写真を右に置く型（同じsplitを続けて使うときに左右を入れ替えて単調さを避ける） */
.m-split-section--media-right .m-split-section__media { order: 2; }
.m-split-section--media-right .m-split-section__body { order: 1; }
.m-split-section__title {
margin-top: var(--m-gap-24);
font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 → 24px */
line-height: 1.5;
}
.m-split-section__text { margin-top: var(--m-gap-24); }
/* =====================================================================
9. Organisms — （CTA 6型の「④電話ファースト分割」）
---------------------------------------------------------------------
🚨 導線の中身は が描く（src/data/site.ts が単一正書）。
この案件は LINE公式アカウントが無いので LINE を足さない。
===================================================================== */
.m-cta-section { position: relative; }
.m-cta-section__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
column-gap: var(--m-gap-56);
row-gap: var(--m-gap-24);
align-items: center;
}
/* ── スキップリンク ──
フォーカスが当たった時だけ左上に出る。背景は濃緑で文字は白（12.30:1）。 */
.c-skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: var(--m-gap-8) var(--m-gap-16);
background-color: var(--c-main-dark);
color: #fff;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transform: translateY(-120%);
}
.c-skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid var(--c-accent);
outline-offset: -3px;
}
/* ── タップ領域 44px ──
🚨 SP(390px) でフッターnavのリンクが **17px**、パンくずが **23px** しかなかった
（/debug 2026-10-02 実測）。`display:inline` のままなので padding が効かない。
行間（フッターnav 45.2px）に収まる範囲で当たり判定だけ広げる。 */
.l-footer__nav-link,
.l-footer__privacy-link,
.c-breadcrumb__link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ── ページャの折り返し ──
🚨 `.c-pagination__list` は flex だが **flex-wrap が無い**。番号は全ページ分出るので、
記事が増えると SP で「次へ」が画面外に出て押せなくなる
（375px で実測：7ページ＝55件から右端382pxで不可視。親が overflow:hidden なので
横スクロールでも救えない）。同じページの `.m-cat-tabs__list` は wrap しており、
1ページ内で折り返し方針が割れていた。
⚠️ 根本解決は Pagination.astro に省略（…）を入れること。ここは到達不能だけ先に潰す。 */
.c-pagination__list {
flex-wrap: wrap;
justify-content: center;
row-gap: var(--m-gap-8);
}
/* ── ボタンの状態表現 ──
🚨 テンプレの `.c-btn` は :hover しか持たず、:focus-visible / :active が無い
（キーボード操作時は UA 既定リング任せ、押した手応えも無い）。
`_global.css` は編集禁止なのでここで足す。design_system「全クリック要素に3状態」。 */
.c-btn:focus-visible {
/* 🚨 2色にすること。単色の outline を当てると **Chrome 既定の2色リング（青＋白）を
置き換えてしまい、かえって見えなくなる**（/debug 2026-10-02 実測：
オレンジ #F0A02E は白地 2.15:1 / クリーム地 1.94:1 で、.c-btn の79%が未達だった）。
内側のオレンジが濃緑パネル上（4.28:1）、外側の濃緑が白・クリーム上（12.30 / 11.09:1）で効く。
⚠️ この box-shadow は装飾の影ではなく**フォーカスの状態表示**。影を使わない方針の対象外。 */
outline: 3px solid var(--c-accent);
outline-offset: 3px;
box-shadow: 0 0 0 6px var(--c-main-dark);
}
.c-btn:active {
transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
.c-btn:active { transform: none; }
}
/* ── SPだけ改行したいときの区切り ──
🚨 `
` は使えない。`display:none` を当てても
**Chromium は
の改行を消さない**ため、PCでも改行されてしまう（/debug 2026-10-02 実測）。
改行したい手前の塊を で囲むこと。 */
.u-br-sp { display: inline; }
@media screen and (max-width: 767px) {
.u-br-sp { display: block; }
}
/* 見出しだけパネル全幅。左列に閉じ込めると 52px の和文12文字が入らない */
.m-cta-section__head { grid-column: 1 / -1; }
.m-cta-section__text {
grid-column: 1;
color: rgba(255, 255, 255, 0.86);
}
/* 電話を主役に。番号は角ゴ＋等幅数字（.c-tel の作法はテンプレ側が持つ） */
.m-cta-section__actions {
justify-self: end;
width: 100%;
}
.m-cta-section__actions .c-cta-actions--section {
flex-direction: column;
align-items: stretch;
gap: var(--m-gap-24);
}
.m-cta-section__actions .c-tel {
align-items: center; /* 番号・受付時間とも枠の中央に（2026-10-07 指示。旧 flex-start） */
gap: var(--m-gap-8);
padding: var(--m-gap-24) var(--m-gap-32);
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.28);
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.m-cta-section__actions .c-tel:hover,
.m-cta-section__actions .c-tel:focus-visible {
background-color: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.5);
}
.m-cta-section__actions .c-tel__number {
/* 🚨 下限 1.625rem(26px) ＋ white-space:nowrap で、SPでは幅が290pxに固定され
パネルからはみ出していた（360pxで電話番号の末尾1桁が欠けていた）。
vw係数を上げて実機幅で縮むようにする（630px以下でのみ効き、PCの34pxは不変）。 */
font-size: clamp(1.25rem, 5.4vw, 2.125rem);
}
.m-cta-section__actions .c-tel__time { font-size: 0.875rem; }
.m-cta-section__actions .c-btn { width: 100%; }
/* =====================================================================
10. Organisms — （よくあるご質問）
---------------------------------------------------------------------
TOP には無いが /first-time/ に8問あるため先に作る（横断セクションの必須5種）。
装飾は既存語彙のみ：薄い横罫1本＋年輪の印＋.c-arrow。新しいモチーフを足さない。
===================================================================== */
.m-faq-section { position: relative; }
.m-faq-section__list {
display: grid;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--c-border);
}
.m-faq-section__item { border-bottom: 1px solid var(--c-border); }
.m-faq-section__q {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: var(--m-gap-16);
align-items: start;
padding: var(--m-gap-24) 0 var(--m-gap-16);
}
/* ── お問い合わせの入力欄の枠線 ──
🚨 テンプレ既定の `--c-border`(#DFDACB) はクリーム地に対して **1.26:1** しかなく、
どこが入力欄か見えない（WCAG 1.4.11 は 3:1 必要。/debug 2026-10-02 実測）。
`--c-border` は装飾の罫線にも使い回しているのでトークン自体は変えず、
**入力欄だけ**濃くする。--c-text-sub は クリーム6.80 / 白7.54。 */
.m-contact-form .p-form__input,
.m-contact-form .p-form__textarea,
.m-contact-form .m-contact-form__select {
border-color: var(--c-text-sub);
}
/* ── お問い合わせフォームの同意チェック ──
🚨 テンプレ既定のままだと input が 13x13px・ラベルが 268x29px（高さ44px未満）で、
**送信をブロックする必須操作がページ内で一番押しにくい**状態になる（/debug 2026-10-02 実測）。
`_global.css` は編集禁止なので、ここで上書きする。 */
.p-form__privacy-label {
align-items: flex-start;
min-height: 44px;
padding-block: 10px;
text-align: left;
}
.p-form__privacy-label input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 0.15em; /* 1行目の文字の高さに合わせる */
accent-color: var(--c-main);
}
.m-faq-section__q-text {
font-size: 1.0625rem;
line-height: 1.6;
letter-spacing: 0.04em;
color: inherit;
}
.m-faq-section__q::before {
content: '';
width: 24px;
height: 24px;
margin-top: 2px;
border-radius: var(--radius-full);
background-color: var(--c-accent-light);
background-image: var(--m-ring);
background-size: 190% 190%;
background-position: center;
}
.m-faq-section__answer {
display: grid;
gap: var(--m-gap-8);
padding: 0 0 var(--m-gap-24) calc(24px + var(--m-gap-16));
}
.m-faq-section__a-lead {
font-weight: 700;
color: var(--c-main);
max-width: none;
}
/* =====================================================================
11. 登場アニメーション（transform と opacity のみ・ease は1本・遅延は --stagger 刻み）
---------------------------------------------------------------------
JS が動かない環境では [data-reveal-ready] が付かない＝常に可視（何も隠さない）。
スクリプトは Layout.astro の末尾。
===================================================================== */
[data-reveal-ready] .m-page [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out);
}
[data-reveal-ready] .m-page [data-reveal].is-in {
opacity: 1;
transform: none;
}
[data-reveal-ready] .m-page [data-reveal][data-reveal-delay="1"] { transition-delay: var(--stagger); }
[data-reveal-ready] .m-page [data-reveal][data-reveal-delay="2"] { transition-delay: calc(var(--stagger) * 2); }
[data-reveal-ready] .m-page [data-reveal][data-reveal-delay="3"] { transition-delay: calc(var(--stagger) * 3); }
@media (prefers-reduced-motion: reduce) {
[data-reveal-ready] .m-page [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* =====================================================================
12. レスポンシブ（PCファースト＝画面幅の大きい順に記述する）
===================================================================== */
@media screen and (max-width: 1240px) {
.m-accent--height-scale { display: none; }
}
@media screen and (max-width: 1080px) {
.m-hero-top__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-40);
}
/* 1カラムに落ちた時に写真が原寸を超えて引き伸ばされないよう幅を止める
（元素材は最大1024pxで、拡大するとすぐ画質が破綻する） */
/* 🚨 ここを 640px にすると PC(1440px=498px) よりタブレットの方が142px広くなり、
1081→1080px で hero が 701→1302px へ +601px 跳ねる（/debug 2026-10-02 実測）。
PC と SP(359px) の中間に収める。 */
.m-hero-top__photo {
width: 100%;
max-width: var(--width-hero-cluster);
/* 🚨 margin-inline が無いと1カラムに落ちた瞬間に左寄せのまま固定され、
1080px で右に597px の空白ができる（/debug 2026-10-02 実測）。
/first-time/ の hero 写真と同じ作法に揃える。 */
margin-inline: auto;
}
.m-worry-section__grid { grid-template-columns: repeat(2, 1fr); }
.m-panel__inner { grid-template-columns: 1fr; gap: var(--m-gap-24); }
.m-works-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-split-section__inner { gap: var(--m-gap-40); }
/* minmax(0,1fr) にしないとトラックの最小値が min-content になり、
中の nowrap 要素の幅でトラックが膨らんでパネルからはみ出す */
.m-cta-section__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--m-gap-24); column-gap: 0; }
.m-cta-section__head, .m-cta-section__text { grid-column: 1; }
.m-cta-section__actions { justify-self: stretch; }
}
@media screen and (max-width: 860px) {
.m-reason-section__grid { grid-template-columns: minmax(0, 1fr); gap: var(--m-gap-48); }
.m-split-section__inner { grid-template-columns: minmax(0, 1fr); }
.m-split-section__media { order: 2; }
.m-split-section__body { order: 1; }
}
@media screen and (max-width: 767px) {
.m-hero-top {
padding-top: var(--m-gap-48);
padding-bottom: var(--m-gap-64);
}
.m-hero-top::before { width: 480px; height: 480px; top: -160px; right: -200px; }
.m-heading { margin-bottom: var(--m-gap-40); }
.m-heading__eyebrow { gap: var(--m-gap-8); }
.m-worry-section__grid { grid-template-columns: minmax(0, 1fr); gap: var(--m-gap-24); }
.m-card--photo-note {
grid-template-columns: 136px minmax(0, 1fr);
gap: var(--m-gap-16);
align-items: center;
}
.m-card--photo-note .m-photo { aspect-ratio: 1 / 1; }
.m-panel--overlap {
margin-top: var(--m-gap-56);
margin-bottom: calc(-1 * var(--section-pb) - var(--m-gap-40));
padding: var(--m-gap-32) var(--m-gap-24);
}
.m-service-section--panel-overlap .m-heading { padding-top: var(--m-gap-32); }
.m-card--photo-row,
.m-service-section__list .m-card--photo-row:nth-child(even) {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-16);
padding: var(--m-gap-16);
}
.m-service-section__list .m-card--photo-row:nth-child(even) .m-photo { order: 0; }
.m-service-section__list .m-card--photo-row:nth-child(even) .m-card__body { order: 0; }
.m-card--photo-row .m-photo { aspect-ratio: 16 / 9; }
.m-works-section__grid { grid-template-columns: minmax(0, 1fr); gap: var(--m-gap-24); }
.m-photo--radius-cut { border-radius: 32px var(--radius-md) var(--radius-md) var(--radius-md); }
.m-split-section--leaf::before {
width: 100%;
opacity: 0.28;
-webkit-mask-image: none;
mask-image: none;
}
.m-cta-section__actions .c-tel { padding: var(--m-gap-16) var(--m-gap-24); }
.m-actions { gap: var(--m-gap-16); margin-top: var(--m-gap-32); }
/* 🚨 Q文のテキスト列が 287px しかなく、5問中4問で「か？」だけが2行目に落ちていた
（/debug 2026-10-02 実測）。gap と文字サイズをSPだけ詰めて1行に収める。 */
.m-faq-section__q { gap: var(--m-gap-8); }
.m-faq-section__q-text { font-size: 1rem; }
.m-faq-section__answer { padding-left: 0; }
}
/* =====================================================================
13. Organisms — 下層ページ用モジュール（2026-10-01 `/service/` 展開時に追加）
---------------------------------------------------------------------
/ / /
/ の5つ。
既存の語彙だけで組む：年輪（同心円）・クリームの面・段差・10px角丸・影なし。
新しいモチーフ・新しい角丸値・新しい duration は足していない。
レスポンシブはこのブロック末尾の「13-R」に降順でまとめる。
===================================================================== */
/* ── ── 全幅の写真帯＋左下にブロック ─────
TOPの （テキスト左＋写真クラスタ右）と構造を重複させないための型。
素材は最大1024pxの記録写真なので帯の高さを抑え、濃緑のオーバーレイで
粗さを隠しつつ白文字のコントラストを確保する。 */
/* 全 variant 共通の土台だけを持つ（高さ・地色・装飾は variant 側）。
variant 固有の宣言をここに書くと、写真を持たない type-grid / minimal に
濃緑の地が残ってしまう。 */
.m-hero-page {
position: relative;
display: grid;
overflow: hidden;
}
.m-hero-page--bg-block {
align-items: end;
min-height: clamp(320px, 34vw, 440px);
padding-top: var(--m-gap-96);
padding-bottom: var(--m-gap-56);
background-color: var(--c-main-dark);
}
/* signature の年輪。写真が見えている右側に沈める */
.m-hero-page--bg-block::before {
content: '';
position: absolute;
right: -180px;
bottom: -260px;
width: 620px;
height: 620px;
background: var(--m-ring-cream) center / contain no-repeat;
opacity: 0.18;
pointer-events: none;
z-index: 1;
}
.m-hero-page__media {
position: absolute;
inset: 0;
}
.m-hero-page__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* 既定のまま（50% 50%）にしない。bg-block は横長の帯に 4:3 を敷くので
上下が 44〜59% 切り落とされる＝どこを残すかを必ず明示する（review 3.5-14）。
service_hero.jpg は「伐採した松の枝が庭に積まれた」写真で、見せたいのは
中央〜やや下の枝の山。50% 55% が主役を帯の中に収められる（実測で 50/55/60/65 を比較）。 */
object-position: 50% 55%;
}
/* 左ほど濃いオーバーレイ＝左下のブロックだけを確実に読ませる */
.m-hero-page__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(96deg,
rgba(22, 60, 37, 0.92) 0%,
rgba(22, 60, 37, 0.74) 42%,
rgba(22, 60, 37, 0.34) 100%);
}
.m-hero-page__inner {
position: relative;
z-index: 2;
/* ⚠️ .l-container は margin:0 auto を持つ。グリッド項目に auto マージンがあると
stretch が無効になり、幅が shrink-to-fit（＝中身の幅）に潰れて中央寄せになる。
width:100% で幅を確定させ、max-width:1200px ＋ auto マージンで左端をコンテナに揃える。 */
width: 100%;
}
.m-hero-page__block {
display: grid;
justify-items: start;
gap: var(--m-gap-16);
}
.m-hero-page__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--m-gap-16);
margin: 0;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.22em;
line-height: 1;
color: #fff;
}
.m-hero-page__eyebrow::before {
content: '';
width: 40px;
height: 24px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--m-ring-arc) left center / contain no-repeat;
mask: var(--m-ring-arc) left center / contain no-repeat;
}
.m-hero-page__title {
color: #fff;
/* 40 → 56px。セクション見出し（--fz-sechead＝40→52px）の一段上に置く */
font-size: clamp(2.5rem, 5.2vw, 3.5rem);
line-height: var(--lh-sechead);
}
.m-hero-page__lead {
color: rgba(255, 255, 255, 0.88);
}
/* ── ── 見出し＋本文だけの面（写真もリストも持たない）── */
/* intro: 見出し左／本文右の2カラム。ページ冒頭の導入 */
.m-statement--intro .m-statement__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--m-gap-64);
align-items: start;
}
/* 🚫 本文に max-width は当てない（design_rules 2026-08-01）。
行長はこのグリッドの列幅（＝コンテナの約半分）で決める。 */
.m-statement--intro .m-heading { margin-bottom: 0; }
.m-statement--intro .m-statement__text { padding-top: var(--m-gap-8); }
/* note: クリーム地の上に白い1枚ブロックを置く（締めの一言）。
面の階層は色トーンの差だけで作る＝影・左の色付き縦線は使わない */
.m-statement--note .m-statement__inner {
position: relative;
overflow: hidden;
display: grid;
gap: var(--m-gap-24);
padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
border-radius: var(--radius-md);
background-color: var(--c-surface);
}
.m-statement--note .m-statement__inner::before {
content: '';
position: absolute;
right: -140px;
bottom: -220px;
width: 460px;
height: 460px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.1;
pointer-events: none;
}
.m-statement--note .m-heading,
.m-statement--note .m-statement__text { position: relative; }
.m-statement--note .m-heading { margin-bottom: 0; }
/* ── ── 1区分＝1記事。行ごとに左右を入れ替える ──
先頭1件だけ写真列を広げて「導入の1件」を作り、同型の反復に強弱を付ける
（design_system 2-1「同じ型を3連続させない」への構造的な対応）。 */
.m-service-detail { position: relative; }
.m-service-detail__list {
display: grid;
gap: var(--m-gap-96);
}
.m-service-detail__item {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: var(--m-gap-64);
align-items: center;
}
.m-service-detail__item--feature {
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: var(--m-gap-56);
}
/* 逆split。order で本文が1列目に来るので、列比も入れ替えて
「本文が広い列・写真が狭い列」を全行で揃える（写真の大きさが行ごとに暴れない） */
.m-service-detail__item--flip {
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}
.m-service-detail__item--flip .m-service-detail__media { order: 2; }
.m-service-detail__item--flip .m-service-detail__body { order: 1; }
/* 記事内の見出しなので、セクション見出しの下余白（56px）は使わない。
⚠️ 複合セレクタ（0,2,0）にしてあるのは、SPメディアクエリの
`.m-heading { margin-bottom: 40px }`（0,1,0・後勝ち）に潰されないため。 */
.m-service-detail__body .m-heading { margin-bottom: var(--m-gap-24); }
.m-service-detail__lead {
/* 20 → 24px。区分名（h2 52px）と本文（16px）の間を埋める階層 */
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
line-height: 1.5;
color: var(--c-main);
}
.m-service-detail__text { margin-top: var(--m-gap-16); }
/* 補足ブロック＝クリームの面。「角丸＋影＋左の色付き縦線」の三点セットは作らない */
.m-service-detail__note {
margin-top: var(--m-gap-32);
padding: var(--m-gap-24) var(--m-gap-32);
border-radius: var(--radius-md);
background-color: var(--c-bg-sub);
}
.m-service-detail__note-title {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: var(--m-gap-16);
align-items: start;
font-size: 1.0625rem;
line-height: 1.6;
letter-spacing: 0.04em;
}
/* 年輪の中心を印に使う（ / FAQ と同じ印） */
.m-service-detail__note-title::before {
content: '';
width: 24px;
height: 24px;
margin-top: 2px;
border-radius: var(--radius-full);
background-color: var(--c-accent-light);
background-image: var(--m-ring);
background-size: 190% 190%;
background-position: center;
}
.m-service-detail__note-text {
margin-top: var(--m-gap-8);
padding-left: calc(24px + var(--m-gap-16));
}
/* ── ── 「こんな場所・ケース」。2カラムで行をそろえる（2026-10-07 指示で偶数番目の段差を撤去） ── */
.m-case-section {
position: relative;
overflow: hidden;
}
.m-case-section::before {
content: '';
position: absolute;
right: -300px;
top: -280px;
width: 800px;
height: 800px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.07;
pointer-events: none;
}
.m-case-section__inner { position: relative; }
.m-case-section__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--m-gap-56) var(--m-gap-64);
}
.m-case-section__title {
/* ワイヤーが改行位置を指定している見出しがあるため、文字列中の実改行を活かす。
改行を含まない文字列には影響しない（孤立改行の解消もここで効く） */
white-space: pre-line;
margin-top: var(--m-gap-24);
font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 → 24px */
line-height: 1.45;
}
.m-case-section__text { margin-top: var(--m-gap-16); }
/* ── ── 見出し左／表右の「噛み合う2面」────────────────
表はテンプレ共通の .c-table（横線のみ）。
🚫 全周罫線・縦罫線を足さない／th に背景色とアイコンを付けない（B-13）。 */
.m-price-section__inner {
display: grid;
/* 左列は小見出し「現場の状況を確認してお見積もりします」（24px×18字）が
1行で収まる幅を確保する。右列は表なので残りを渡す。 */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: var(--m-gap-64);
align-items: start;
}
.m-price-section__body .m-heading { margin-bottom: var(--m-gap-24); }
.m-price-section__subtitle {
font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 → 24px */
line-height: 1.5;
color: var(--c-main);
}
.m-price-section__text { margin-top: var(--m-gap-16); }
/* 料金の表の文字も角ゴ（--ff-sans）。装飾フォントを当てない */
.m-price-section__table .c-table { font-family: var(--ff-sans); }
.m-price-section__table .c-table th {
width: 26%;
letter-spacing: 0.04em;
color: var(--c-text);
}
.m-price-section__table .c-table thead th:last-child { width: auto; }
.m-price-section__table .c-table thead th {
font-size: 0.8125rem;
letter-spacing: 0.16em;
color: var(--c-main);
}
.m-price-section__table .c-table td {
letter-spacing: var(--ls-base);
color: var(--c-text-sub);
}
/* =====================================================================
13-R. レスポンシブ（PCファースト＝画面幅の大きい順）
===================================================================== */
@media screen and (max-width: 1080px) {
.m-service-detail__list { gap: var(--m-gap-80); }
.m-service-detail__item,
.m-service-detail__item--feature { gap: var(--m-gap-40); }
.m-case-section__grid { gap: var(--m-gap-48) var(--m-gap-40); }
.m-price-section__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-40);
}
.m-statement--intro .m-statement__inner { gap: var(--m-gap-40); }
}
@media screen and (max-width: 860px) {
.m-service-detail__list { gap: var(--m-gap-64); }
.m-service-detail__item,
.m-service-detail__item--feature {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-32);
}
/* 1カラムに落ちたら常に「写真 → 本文」（DOM順）に戻す */
.m-service-detail__item--flip .m-service-detail__media,
.m-service-detail__item--flip .m-service-detail__body { order: 0; }
.m-case-section__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-40);
}
.m-statement--intro .m-statement__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-24);
}
}
@media screen and (max-width: 767px) {
/* 🚨 18文字×20px=360px がコンテナ331〜359pxを超え、最後の1〜2文字だけが
2行目に落ちていた（/service/ で9件・900pxでも2件／/debug 2026-10-02 実測）。
⚠️ この上書きは**セクション13の 767 ブロック**に置くこと。
前半（セクション12）の 767 ブロックに書くと、基底定義の方が後ろに来て効かない。 */
.m-service-detail__lead { font-size: 1.125rem; }
.m-price-section__subtitle { font-size: 1.125rem; }
/* 補足見出しは「24px マーク｜本文」の2列。gap を詰めて本文列を16px広げる */
/* 本文列を16px広げる（gap だけ詰める）。
⚠️ ここで font-size を 17→16px に下げるのは試したが、**360pxで悪化した**。
文字を小さくすると1行に入る字数が変わるだけで、折り返し位置が移動して
別の見出しが1文字落ちになる。日本語の孤立改行はサイズでは消せない。 */
.m-service-detail__note-title { gap: var(--m-gap-8); }
.m-hero-page--bg-block {
min-height: 280px;
padding-top: var(--m-gap-64);
padding-bottom: var(--m-gap-40);
}
.m-hero-page--bg-block::before {
right: -140px;
bottom: -180px;
width: 420px;
height: 420px;
}
/* SPは横幅が無く「左だけ濃く」が効かないので、縦方向のグラデーションに切り替える */
.m-hero-page__media::after {
background: linear-gradient(180deg,
rgba(22, 60, 37, 0.58) 0%,
rgba(22, 60, 37, 0.90) 66%);
}
.m-hero-page__eyebrow { gap: var(--m-gap-8); }
.m-service-detail__note { padding: var(--m-gap-24) var(--m-gap-16); }
.m-service-detail__note-text { padding-left: 0; }
/* SPは横幅が足りないので白ブロックの左右余白を詰める
（見出しの
の位置で折り返せるだけの行幅を確保する） */
.m-statement--note .m-statement__inner { padding-inline: var(--m-gap-16); }
.m-statement--note .m-statement__inner::before {
right: -120px;
bottom: -160px;
width: 340px;
height: 340px;
}
.m-case-section::before {
right: -200px;
top: -220px;
width: 560px;
height: 560px;
}
}
@media screen and (max-width: 600px) {
/* .c-table--sp-stack で th/td が縦積みになると、表頭の「項目」「内容」が
行のように2段で並んで迷子になる。原稿の語は消さずに、横並びの
小さな見出し行へ組み替える。 */
.m-price-section__table .c-table--sp-stack thead tr {
display: flex;
gap: var(--m-gap-24);
border-bottom: 1px solid var(--c-border);
}
.m-price-section__table .c-table--sp-stack thead th {
width: auto;
padding-block: var(--m-gap-8);
}
}
/* =====================================================================
14. Organisms — 施工事例ページ用モジュール（2026-10-01 `/works/` 展開時に追加）
---------------------------------------------------------------------
/ /
/ の4つ。
既存の語彙だけで組む：年輪（同心円）・クリームの面・10px角丸・影なし・
アクセントはCTAとキーワードだけ。新しいモチーフ・角丸値・duration は足していない。
レスポンシブはこのブロック末尾の「14-R」に降順でまとめる。
===================================================================== */
/* ── ── 大判タイポ＋下に小要素グリッド（パターンC）──
/works/ 一覧のFV。TOP（写真クラスタ）とも /service/（写真帯）とも構造が重ならない、
「写真を使わずタイポだけで開く」型。小要素グリッドには絞り込みタブが入る。 */
.m-hero-page--type-grid {
align-items: start;
padding-top: var(--m-gap-96);
padding-bottom: var(--m-gap-64);
background-color: var(--c-bg);
}
/* 年輪を右上に大きく沈める（ と同じ作法。モチーフを増やさない） */
.m-hero-page--type-grid::before {
content: '';
position: absolute;
right: -260px;
top: -300px;
width: 760px;
height: 760px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
.m-hero-page--type-grid .m-hero-page__eyebrow { color: var(--c-main); }
.m-hero-page--type-grid .m-hero-page__title {
color: var(--c-text);
/* 大判タイポ：48 → 80px。セクション見出し（--fz-sechead 40→52px）の一段上に置く */
font-size: clamp(3rem, 7.4vw, 5rem);
line-height: 1.1;
}
.m-hero-page--type-grid .m-hero-page__lead { color: var(--c-text-sub); }
/* 大判タイポと小要素グリッドの境目。セクションの区切りではなく「見出しブロックの底」 */
.m-works-list__filter { margin-bottom: var(--m-gap-48); }
.m-hero-page--type-grid .m-hero-page__grid {
position: relative;
margin-top: var(--m-gap-40);
padding-top: var(--m-gap-32);
border-top: 1px solid var(--c-border);
}
/* ── ── 薄い帯のミニマル（パターンF）──────────
/works/[id]/ 詳細のFV。本文側に記事タイトル（h1）があるので、ここは“所在地の表示”に徹する。
帯を低く抑え、クリーム地にして本文（白地）との段差だけで区切る。 */
.m-hero-page--minimal {
align-items: center;
padding-top: var(--m-gap-80);
padding-bottom: var(--m-gap-48);
background-color: var(--c-bg-sub);
}
.m-hero-page--minimal::before {
content: '';
position: absolute;
right: -120px;
top: -150px;
width: 380px;
height: 380px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
.m-hero-page--minimal .m-hero-page__eyebrow { color: var(--c-main); }
/* headingLevel="p" で描画されるため、見出し用の字形をここで明示する
（.m-page の見出しルールは h1〜h4 にしか当たらない） */
.m-hero-page--minimal .m-hero-page__title {
font-family: var(--font-title);
font-weight: 700;
letter-spacing: 0.02em;
font-feature-settings: "palt";
color: var(--c-text);
font-size: clamp(1.5rem, 2.8vw, 1.75rem); /* 24 → 28px */
line-height: 1.4;
}
/* ── ── 一覧の絞り込みタブ ───────────────────────────
🚨 角丸は 10px（基調）。ピルは CTA とカテゴリバッジに取ってあるので、
タブは角丸を変えて役割を見分けられるようにしている。 */
.m-cat-tabs__list {
display: flex;
flex-wrap: wrap;
gap: var(--m-gap-8);
list-style: none;
margin: 0;
padding: 0;
}
.m-cat-tabs__link {
display: inline-flex;
align-items: center;
min-height: 44px; /* タップ領域 44px */
padding-inline: var(--m-gap-24);
border: 1px solid var(--c-border);
border-radius: var(--radius-md);
background-color: var(--c-bg);
font-family: var(--ff-sans);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.4;
color: var(--c-text-sub);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard);
}
a.m-cat-tabs__link:hover,
a.m-cat-tabs__link:focus-visible {
color: var(--c-main);
border-color: var(--c-main);
background-color: var(--c-main-light);
}
a.m-cat-tabs__link:active { color: var(--c-main-dark); }
.m-cat-tabs__link:focus-visible { outline: 3px solid var(--c-main); outline-offset: 2px; }
/* 現在地は色だけでなく aria-current でも示す（HTML 側） */
.m-cat-tabs__link[aria-current="page"] {
background-color: var(--c-main);
border-color: var(--c-main);
color: #fff;
}
/* 該当記事が0件のカテゴリ。リンクにしない＝リンク切れを作らない */
.m-cat-tabs__link--off {
opacity: 0.4;
cursor: default;
}
/* ── ── 施工事例カードの3列グリッド ─────────────────
カードは TOP と同じ （ページ間でカードを割らない）。 */
.m-works-list {
position: relative;
overflow: hidden;
}
.m-works-list::before {
content: '';
position: absolute;
left: -280px;
bottom: -320px;
width: 720px;
height: 720px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.06;
pointer-events: none;
}
.m-works-list__inner { position: relative; }
.m-works-list__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--m-gap-48) var(--m-gap-32);
list-style: none;
margin: 0;
padding: 0;
}
.m-works-list__pager { margin-top: var(--m-gap-64); }
.m-card__date {
font-family: var(--ff-sans);
font-feature-settings: "tnum";
}
/* ── ── 施工事例の詳細記事 ────────────────────────────
区切りは「記事ヘッダーの下」と「記事送りの上」の2本だけ。
記事送りを枠線付きカードにしない（線だらけになる。hwp341 の実FB）。 */
/* 区切り線は「本文（または Before/After）が続くとき」だけ引く */
.m-work-article__header--divided {
padding-bottom: var(--m-gap-32);
border-bottom: 1px solid var(--c-border);
}
.m-work-article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--m-gap-16);
margin-bottom: var(--m-gap-16);
font-size: 0.8125rem;
letter-spacing: 0.08em;
color: var(--c-text-sub);
}
.m-work-article__date {
font-family: var(--ff-sans);
font-feature-settings: "tnum";
}
/* 記事タイトルはこのページの h1。サイトの見出しスケール（--fz-sechead）に乗せる
＝ ページごとに見出しサイズが割れない（40 → 52px） */
.m-work-article__title {
font-size: var(--fz-sechead);
line-height: var(--lh-sechead);
}
/* Before / After（microCMS に画像がある記事だけ出る） */
.m-work-article__ba {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--m-gap-32);
margin-top: var(--m-gap-48);
}
.m-work-article__ba-item { margin: 0; }
.m-work-article__ba-label {
margin-top: var(--m-gap-8);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--c-main);
}
.m-work-article__body { margin-top: var(--m-gap-48); }
/* 本文の写真は2列で並べる（2026-11-11）
microCMS のリッチエディタは画像を1枚ずつ にして縦に積む。施工写真は縦位置
（768×1024）が多く、全幅のままだと1枚が約1,000pxの高さになり、6枚でページが9,000pxを超えた。
→ 本文をグリッドにし、文章・見出しは全幅、続けて置かれた写真だけを2列に並べる。
写真が1枚だけのとき（前後が写真でない）は、これまでどおり全幅で見せる。
⚠️ グリッド内では margin が相殺されないので、写真の上下の余白は下側だけで取る */
.m-work-article__body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--m-gap-24);
align-items: start;
}
.m-work-article__body > * { grid-column: 1 / -1; }
.m-work-article__body > figure {
grid-column: auto;
margin: 0 0 var(--m-gap-24);
}
.m-work-article__body > figure:not(figure + figure):not(:has(+ figure)) { grid-column: 1 / -1; }
.m-work-article__body > figure img { width: 100%; }
.m-work-article__body > figure:not(figure + figure):not(:has(+ figure)) img { width: auto; }
.m-work-article__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--m-gap-16);
margin-top: var(--m-gap-64);
padding-top: var(--m-gap-32);
border-top: 1px solid var(--c-border);
}
.m-work-article__nav-link {
display: inline-flex;
align-items: center;
gap: var(--m-gap-8);
min-height: 44px; /* タップ領域 44px */
padding-block: var(--m-gap-8);
font-family: var(--font-title);
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: 0.08em;
line-height: 1.4;
color: var(--c-main);
text-decoration: none;
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-standard);
}
.m-work-article__nav-link--prev { justify-self: start; }
.m-work-article__nav-index { justify-self: center; }
.m-work-article__nav-link--next { justify-self: end; }
.m-work-article__nav-link:hover,
.m-work-article__nav-link:focus-visible { color: var(--c-accent-text); }
.m-work-article__nav-link:active { color: var(--c-main-dark); }
.m-work-article__nav-link:focus-visible {
outline: 3px solid var(--c-main);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* 前後どちらかが無いときも「一覧に戻る」を中央に保つための空きマス */
.m-work-article__nav-spacer { display: block; }
/* =====================================================================
14-R. レスポンシブ（PCファースト＝画面幅の大きい順）
===================================================================== */
@media screen and (max-width: 1080px) {
.m-works-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
.m-hero-page--type-grid {
padding-top: var(--m-gap-64);
padding-bottom: var(--m-gap-48);
}
.m-hero-page--type-grid::before {
right: -180px;
top: -200px;
width: 520px;
height: 520px;
}
.m-hero-page--type-grid .m-hero-page__grid {
margin-top: var(--m-gap-32);
padding-top: var(--m-gap-24);
}
.m-hero-page--minimal {
padding-top: var(--m-gap-56);
padding-bottom: var(--m-gap-32);
}
.m-hero-page--minimal::before {
right: -100px;
top: -120px;
width: 280px;
height: 280px;
}
.m-works-list__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-24);
}
.m-works-list__pager { margin-top: var(--m-gap-48); }
.m-work-article__ba {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-24);
}
/* 本文の写真は SP でも2列のまま（1列だと6枚で約2,900px）。間隔だけ詰める */
.m-work-article__body { column-gap: var(--m-gap-16); }
.m-work-article__body > figure { margin-bottom: var(--m-gap-16); }
/* SP は「前の記事｜次の記事」を1段目、「一覧に戻る」ボタンを2段目の中央に置く
（1段に3つ並べると 320px 幅で横スクロールが出た） */
.m-work-article__nav {
grid-template-columns: 1fr 1fr;
grid-template-areas: "prev next" "index index";
gap: var(--m-gap-16) var(--m-gap-8);
margin-top: var(--m-gap-48);
padding-top: var(--m-gap-24);
}
.m-work-article__nav > :first-child { grid-area: prev; }
.m-work-article__nav > :last-child { grid-area: next; }
.m-work-article__nav-index { grid-area: index; }
.m-work-article__nav-link {
font-size: 0.8125rem;
letter-spacing: 0.04em;
}
}
/* =====================================================================
15. Organisms — 初めての方へ用モジュール（2026-10-01 `/first-time/` 展開時に追加）
---------------------------------------------------------------------
/ / の3つ。
既存の語彙だけで組む：年輪（同心円）・クリームの面・ヘアライン・10px角丸・影なし。
新しいモチーフ・新しい角丸値・新しい duration は足していない。
レスポンシブはこのブロック末尾の「15-R」に降順でまとめる。
===================================================================== */
/* ── ── テキスト左＋大判写真右（パターンA）──
/first-time/ のFV。TOP（写真クラスタ3枚＋CTA）とも /service/（全幅の写真帯）とも
/works/（写真なしの大判タイポ）とも構造が重ならない、「1枚の写真と向き合う」型。
写真は ＝左上を大きく落とした「切り口」。ページに1箇所だけ置く。 */
.m-hero-page--split-photo {
align-items: center;
padding-top: var(--m-gap-96);
padding-bottom: var(--m-gap-80);
background-color: var(--c-bg);
}
/* 年輪は左下に沈める（type-grid は右上・bg-block は右下。FVごとに位置を変えて反復に見せない） */
.m-hero-page--split-photo::before {
content: '';
position: absolute;
left: -300px;
bottom: -340px;
width: 720px;
height: 720px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
.m-hero-page--split-photo .m-hero-page__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
align-items: center;
gap: var(--m-gap-64);
}
.m-hero-page--split-photo .m-hero-page__eyebrow { color: var(--c-main); }
.m-hero-page--split-photo .m-hero-page__title {
color: var(--c-text);
/* 40 → 56px。セクション見出し（--fz-sechead＝40→52px）の一段上に置く */
font-size: clamp(2.5rem, 5.2vw, 3.5rem);
line-height: var(--lh-sechead);
}
.m-hero-page--split-photo .m-hero-page__lead { color: var(--c-text-sub); }
.m-hero-page--split-photo .m-hero-page__photo { position: relative; }
/* ── ── お問い合わせから作業完了までの手順（01〜07）────────
番号は （年輪の断面）を流用。番号どうしは 1px のレールでつなぐ。
PCは「番号｜手順名｜本文」の3列＝本文の行長が伸びすぎないようにしている。 */
.m-flow-section {
position: relative;
overflow: hidden;
}
.m-flow-section::before {
content: '';
position: absolute;
right: -300px;
top: -280px;
width: 780px;
height: 780px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.07;
pointer-events: none;
}
.m-flow-section__inner { position: relative; }
.m-flow-section__list {
display: grid;
gap: var(--m-gap-40);
list-style: none;
margin: 0;
padding: 0;
}
.m-flow-section__item {
position: relative;
display: grid;
grid-template-columns: 64px minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: var(--m-gap-8) var(--m-gap-32);
align-items: start;
}
/* 番号どうしをつなぐレール（最後の手順には引かない）。
太さ・色は既存のヘアライン（--c-border）と同じ＝新しい装飾語彙を足さない */
.m-flow-section__item:not(:last-child)::before {
content: '';
position: absolute;
left: 32px; /* 64px バッジの中心 */
top: 72px; /* バッジ下端（64px）＋ 8px */
bottom: calc(var(--m-gap-8) - var(--m-gap-40));
width: 1px;
background-color: var(--c-border);
}
.m-flow-section__mark {
position: relative;
z-index: 1;
grid-column: 1;
grid-row: 1;
display: block;
}
.m-flow-section__title {
grid-column: 2;
grid-row: 1;
padding-top: var(--m-gap-16);
font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 → 24px */
line-height: 1.45;
}
.m-flow-section__text {
grid-column: 3;
grid-row: 1;
padding-top: var(--m-gap-16);
}
/* ── ── 見出しを持たない補足情報の小見出し群 ──────────────
原稿にセクション見出しが無いので を置かない（捏造しない）。
直前の と同じクリーム地なので、テンプレの
「同じ data-bg が隣接 → 縦余白を半分」が効いて前セクションの続きとして読める。 */
.m-notes-section__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--m-gap-48) var(--m-gap-64);
}
/* 区切りは上辺のルール1本だけ。角丸・影・左の色付き縦線のカードにしない */
.m-notes-section__item {
padding-top: var(--m-gap-24);
border-top: 2px solid var(--c-main);
}
.m-notes-section__title {
font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18 → 22px */
line-height: 1.5;
}
.m-notes-section__text { margin-top: var(--m-gap-16); }
/* =====================================================================
15-R. レスポンシブ（PCファースト＝画面幅の大きい順）
===================================================================== */
@media screen and (max-width: 1080px) {
.m-hero-page--split-photo .m-hero-page__inner { gap: var(--m-gap-40); }
.m-flow-section__item {
grid-template-columns: 64px minmax(0, 0.9fr) minmax(0, 1.1fr);
column-gap: var(--m-gap-24);
}
.m-notes-section__grid { gap: var(--m-gap-40); }
}
@media screen and (max-width: 860px) {
.m-hero-page--split-photo .m-hero-page__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-32);
}
/* 🚨 1カラムに落ちた瞬間、写真に上限が無いとコンテナ全幅まで伸びる。
861px で hero 469px → 860px で 895px（+426px）と跳ねていた（/debug 2026-10-02 実測）。
TOP の写真クラスタと同じ作法で上限を入れる。 */
.m-hero-page--split-photo .m-hero-page__photo {
max-width: var(--width-hero-photo);
margin-inline: auto;
}
/* 🚨 7タブは 818px 以上なら1行、767px 以下でも（この縮小が効いて）1行なのに、
768〜817px だけ 2行[6,1] に割れていた（/debug 2026-10-02 実測）。
幅を狭めるほど崩れるのは非単調でおかしいので、縮小の開始を 860px へ繰り上げる。 */
.m-cat-tabs__link {
padding-inline: var(--m-gap-16);
font-size: 0.8125rem;
letter-spacing: 0.04em;
}
/* 3列（番号｜手順名｜本文）が入らなくなるので、番号を左に残して右で2段に積む。
列幅は の実寸 64px のまま（縮めるとバッジがはみ出す） */
.m-flow-section__item { grid-template-columns: 64px minmax(0, 1fr); }
.m-flow-section__mark { grid-row: 1 / span 2; }
.m-flow-section__title {
grid-column: 2;
grid-row: 1;
padding-top: var(--m-gap-8);
}
.m-flow-section__text {
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
.m-notes-section__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-32);
}
}
@media screen and (max-width: 767px) {
.m-hero-page--split-photo {
padding-top: var(--m-gap-64);
padding-bottom: var(--m-gap-48);
}
.m-hero-page--split-photo::before {
right: auto;
left: -200px;
bottom: -240px;
width: 520px;
height: 520px;
}
.m-flow-section::before {
right: -200px;
top: -200px;
width: 540px;
height: 540px;
}
.m-flow-section__list { gap: var(--m-gap-32); }
.m-flow-section__item { column-gap: var(--m-gap-16); }
.m-flow-section__item:not(:last-child)::before {
bottom: calc(var(--m-gap-8) - var(--m-gap-32));
}
}
/* =====================================================================
16. Organisms — 事業概要・お問い合わせ用モジュール
（2026-10-01 `/about/` `/contact/` `/privacy/` 展開時に追加）
---------------------------------------------------------------------
/ / /
/ / /
の7つ。
既存の語彙だけで組む：年輪（同心円）・クリームの面・ヘアライン・10px角丸・影なし。
新しいモチーフ・新しい角丸値・新しい duration は足していない。
レスポンシブはこのブロック末尾の「16-R」に降順でまとめる。
===================================================================== */
/* ── ── 中央テキスト＋小要素（パターンE）────
/about/ のFV。TOP（写真クラスタ）／service（写真帯）／works（左寄せ大判タイポ）／
first-time（テキスト左＋写真右）／works詳細（薄い帯）のどれとも構造が重ならない、
「中央に置いて向き合う」型。小要素は年輪の断面をヘアラインに乗せた印だけ
（原稿に hero 用の小要素テキストが無いので文言を創作しない）。 */
.m-hero-page--center-type {
align-items: center;
padding-top: var(--m-gap-96);
padding-bottom: var(--m-gap-80);
background-color: var(--c-bg-sub);
}
/* 年輪は中央下に沈める（bg-block は右下・type-grid は右上・split-photo は左下・
minimal は右上。FVごとに位置を変えて反復に見せない） */
.m-hero-page--center-type::before {
content: '';
position: absolute;
left: 50%;
bottom: -420px;
width: 720px;
height: 720px;
margin-left: -360px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
.m-hero-page--center-type .m-hero-page__inner {
display: grid;
justify-items: center;
}
.m-hero-page--center-type .m-hero-page__block {
justify-items: center;
text-align: center;
}
.m-hero-page--center-type .m-hero-page__eyebrow { color: var(--c-main); }
.m-hero-page--center-type .m-hero-page__title {
color: var(--c-text);
/* 40 → 56px。セクション見出し（--fz-sechead＝40→52px）の一段上に置く */
font-size: clamp(2.5rem, 5.2vw, 3.5rem);
line-height: var(--lh-sechead);
}
.m-hero-page--center-type .m-hero-page__lead {
color: var(--c-text-sub);
text-align: center;
}
/* 小要素：中央のヘアラインに年輪の断面を1つ乗せた印 */
.m-hero-page__mark {
position: relative;
display: block;
width: 160px;
height: 24px;
margin-top: var(--m-gap-32);
}
.m-hero-page__mark::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: var(--c-border);
}
.m-hero-page__mark::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
background: var(--c-bg-sub) var(--m-ring) center / contain no-repeat;
}
/* ── をページ自身の見出しとして使うとき ──────────
/works/[id]/ は本文側に記事タイトル（h1）があるので headingLevel="p"＝24→56px に上げない。
/contact/ と /privacy/ は **このFVの見出しがページのh1**なので、他の下層ページ
（bg-block / split-photo / center-type）と同じ 40→56px に揃える。
揃えないと h1（28px）< h2（52px）の逆転が起きる。 */
.m-hero-page--minimal h1.m-hero-page__title {
font-size: clamp(2.5rem, 5.2vw, 3.5rem);
line-height: var(--lh-sechead);
}
/* ── ── 代表挨拶（見出し左／本文右）────────────────────
顔写真を持たない型。締めは署名テキスト1行（上にヘアライン1本）。 */
.m-message-section__inner {
display: grid;
/* 見出し列を 0.8fr→0.9fr に。0.8fr だと代表挨拶の見出しが1文字だけ溢れて
孤立改行になっていた（text-wrap:balance はこのリポジトリでは使用禁止のため列幅で解決） */
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--m-gap-64);
align-items: start;
}
.m-message-section__head .m-heading { margin-bottom: 0; }
.m-message-section__subtitle {
font-size: var(--fz-sechead-h3);
line-height: 1.4;
}
.m-message-section__text { margin-top: var(--m-gap-24); }
.m-message-section__sign {
margin-top: var(--m-gap-32);
padding-top: var(--m-gap-24);
border-top: 1px solid var(--c-border);
text-align: right;
font-weight: 700;
color: var(--c-text);
}
/* ── ── 考え方の項目（小見出し左／本文右の行をヘアラインで積む）──
番号を持たないので、原稿に無い連番を振らずに済む。
🚫 「角丸＋影＋左の色付き縦線」のカードにしない。 */
.m-stance-section__list {
display: grid;
gap: var(--m-gap-40);
}
.m-stance-section__item {
display: grid;
/* 見出し列を 1fr→1.15fr に（同上・孤立改行の解消） */
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr);
gap: var(--m-gap-40);
padding-top: var(--m-gap-40);
border-top: 1px solid var(--c-border);
}
.m-stance-section__title {
position: relative;
padding-left: 56px;
font-size: 1.25rem; /* 20px */
line-height: 1.5;
}
/* 年輪の弧の印（ のアイブロウと同じ印。モチーフを増やさない） */
.m-stance-section__title::before {
content: '';
position: absolute;
top: 0.2em;
left: 0;
width: 40px;
height: 24px;
background-color: var(--c-main);
-webkit-mask: var(--m-ring-arc) left center / contain no-repeat;
mask: var(--m-ring-arc) left center / contain no-repeat;
}
/* ── ── 会社概要（見出し上・表は全幅）────────────────────
（見出し左／表右）と配置を変えて、同じ型の使い回しに見せない。
🚫 全周罫線・縦罫線を引かない／th に背景色を付けない（.c-table の作法のまま）。 */
.m-company-section__table .c-table th {
width: 22%;
color: var(--c-main-dark);
}
/* ── ── 導入＋電話・メールの導線 ──────────────────
面の階層は色トーンの差だけで作る（影・左の色付き縦線は使わない）。 */
.m-contact-direct__inner {
display: grid;
/* 左は 52px の見出しが1行12字入る幅、右は が収まる幅。
1080px 以下では2カラムを維持すると見出しが「お／気軽に」で割れるので1カラムに落とす */
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: var(--m-gap-64);
align-items: start;
}
.m-contact-direct__body .m-heading { margin-bottom: var(--m-gap-32); }
.m-contact-direct__text + .m-contact-direct__text { margin-top: var(--m-gap-24); }
.m-contact-direct__panel {
position: relative;
overflow: hidden;
display: grid;
justify-items: start;
gap: var(--m-gap-24);
padding: clamp(32px, 3.6vw, 48px);
border-radius: var(--radius-md);
background-color: var(--c-bg-sub);
}
.m-contact-direct__panel::before {
content: '';
position: absolute;
right: -150px;
bottom: -220px;
width: 420px;
height: 420px;
background: var(--m-ring) center / contain no-repeat;
opacity: 0.1;
pointer-events: none;
}
.m-contact-direct__panel-title,
.m-contact-direct__panel .m-tel,
.m-contact-direct__mail { position: relative; }
.m-contact-direct__panel-title {
font-size: 1.125rem; /* 18px */
line-height: 1.5;
}
.m-contact-direct__mail {
display: grid;
gap: var(--m-gap-8);
}
.m-contact-direct__mail-label {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--c-text-sub);
}
.m-contact-direct__mail-link {
font-family: var(--ff-sans);
font-weight: 700;
color: var(--c-main-dark);
word-break: break-all;
border-bottom: 1px solid var(--c-border);
transition: color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.m-contact-direct__mail-link:hover,
.m-contact-direct__mail-link:focus-visible {
color: var(--c-accent-text);
border-bottom-color: var(--c-accent-text);
}
/* ── ── お問い合わせフォーム ───────────────────────
入力欄の形はテンプレ共通の .p-form__*。ここは「任意」バッジと select だけを足す。 */
.m-contact-form__form { margin-top: var(--m-gap-8); }
.m-contact-form__opt {
margin-left: 5px;
font-size: 0.8rem;
color: var(--c-text-sub);
}
.m-contact-form__select {
background-color: var(--c-surface);
color: var(--c-text);
}
/* ── ── 規約・方針の全文 ────────────────────────────────
長文を読ませる面。装飾を置かず、条のあいだのヘアラインだけで区切る。 */
.m-legal-section__intro { margin-bottom: var(--m-gap-48); }
.m-legal-section__article {
padding-top: var(--m-gap-40);
margin-top: var(--m-gap-40);
border-top: 1px solid var(--c-border);
}
.m-legal-section__title {
margin-bottom: var(--m-gap-16);
font-size: 1.25rem; /* 20px */
line-height: 1.5;
}
.m-legal-section__text + .m-legal-section__text { margin-top: var(--m-gap-16); }
.m-legal-section__list {
margin: var(--m-gap-16) 0 0;
padding-left: var(--m-gap-24);
list-style: disc;
}
.m-legal-section__list li {
font-size: var(--fz-base);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
color: var(--c-text-sub);
}
.m-legal-section__list li + li { margin-top: var(--m-gap-8); }
.m-legal-section__list--nested {
margin-top: var(--m-gap-8);
list-style: circle;
}
.m-legal-section__office {
display: grid;
gap: var(--m-gap-8);
margin: var(--m-gap-24) 0 0;
padding: var(--m-gap-24);
border-radius: var(--radius-md);
background-color: var(--c-bg-sub);
}
.m-legal-section__office-row {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: var(--m-gap-8);
}
.m-legal-section__office dt {
font-weight: 700;
color: var(--c-text);
}
.m-legal-section__office dd {
margin: 0;
color: var(--c-text-sub);
}
/* =====================================================================
16-R. レスポンシブ（PCファースト＝画面幅の大きい順）
===================================================================== */
@media screen and (max-width: 1080px) {
.m-message-section__inner { gap: var(--m-gap-40); }
.m-contact-direct__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--m-gap-40);
}
.m-stance-section__item { gap: var(--m-gap-24); }
}
@media screen and (max-width: 860px) {
.m-message-section__inner,
.m-stance-section__item {
grid-template-columns: minmax(0, 1fr);
}
.m-message-section__inner { gap: var(--m-gap-32); }
.m-stance-section__item {
gap: var(--m-gap-16);
padding-top: var(--m-gap-32);
}
.m-stance-section__list { gap: var(--m-gap-32); }
}
@media screen and (max-width: 767px) {
/* 🚨「第3条（個人情報を収集・利用する目的）」が360pxで最後の1文字だけ落ちていた
（/contact/ /privacy/ 各2件／/debug 2026-10-02 実測）。 */
.m-legal-section__title { font-size: 1.125rem; }
.m-hero-page--center-type {
padding-top: var(--m-gap-64);
padding-bottom: var(--m-gap-56);
}
.m-hero-page--center-type::before {
bottom: -320px;
width: 520px;
height: 520px;
margin-left: -260px;
}
.m-hero-page__mark {
width: 120px;
margin-top: var(--m-gap-24);
}
.m-message-section__sign { text-align: left; }
.m-stance-section__title { padding-left: 44px; }
.m-stance-section__title::before { width: 32px; }
.m-company-section__table .c-table th { width: 100%; }
.m-contact-direct__panel { padding: var(--m-gap-24); }
.m-legal-section__article {
padding-top: var(--m-gap-32);
margin-top: var(--m-gap-32);
}
.m-legal-section__office-row { grid-template-columns: minmax(0, 1fr); }
.m-legal-section__office dt { font-size: 0.875rem; }
}
/* 施工事例詳細のリード画像（Before/After が無い記事で記事上部に出す） */
.m-work-article__lead { margin: 0 0 var(--m-gap-40); }
/* 送信完了ページ（/contact/thanks/）の戻り導線 */
.m-thanks-actions__back { margin-top: var(--m-gap-32); text-align: center; }
/* ── アクセント（オレンジ）のCTA ── 問い合わせ・相談・電話の導線だけに使う（2026-10-07）
🚨 白文字にしない（#F0A02E と白は 2.15:1 で読めない）。文字は本文色 #1C2420（約 8:1） */
.c-btn.c-btn--accent {
background-color: var(--c-accent);
color: var(--c-text);
}
.c-btn.c-btn--accent:hover {
background-color: var(--c-accent-hover);
color: var(--c-text);
opacity: 1;
}
@media screen and (max-width: 767px) {
/* SP下部の追従バー：主導線の電話だけオレンジ地にする */
.l-floating-actions__btn--tel {
background-color: var(--c-accent);
color: var(--c-text);
}
}
/* ── 動きを減らす設定の尊重（取りこぼし分）──
🚨 `_global.css` は編集禁止で、そちらの reduce ブロックでは
`scroll-behavior: smooth` と 写真のズーム・矢印の transition が残っていた
（/debug 2026-10-02 実測）。登場アニメーションは正しく止まっている。 */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.m-card--photo-top .m-photo img,
.c-arrow {
transition: none;
}
}