@layer pages {
/* スクロール挙動(統合ページ) */
html { scroll-behavior: smooth; }
[data-spy] { scroll-margin-top: 140px; }
/* ============================================================
02 あるある(リード) — ヘッダー直後に詰める
============================================================ */
.p-issue-intro { padding-top: 0; }
.p-issue-intro__lead {
font-family: var(--ff-display);
font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
line-height: 1.7;
letter-spacing: var(--tr-heading);
color: var(--c-text);
max-width: 28em;
margin: 0;
}
.p-issue-intro__sub {
margin-top: var(--sp-5);
color: var(--c-text-muted);
line-height: var(--lh-body);
max-width: 36em;
}
/* ============================================================
03 構造的な原因(★核) — 1カラム・狭いコンテナで一本の柱
============================================================ */
/* 原因の前に置く前提・前置き(任意。seo の「全国/地域」など) */
.p-cause__intro {
border-left: 3px solid var(--c-accent);
padding-left: var(--sp-6);
margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
}
.p-cause__intro--spaced { margin-top: clamp(var(--sp-7), 5vw, var(--sp-9)); }
.p-cause__intro-label {
display: block;
font-size: var(--fs-caption);
letter-spacing: var(--tr-eyebrow);
color: var(--c-accent);
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.p-cause__intro-lead {
font-family: var(--ff-display);
font-size: 1.25rem;
font-weight: var(--fw-medium);
letter-spacing: var(--tr-heading);
line-height: var(--lh-heading);
color: var(--c-text);
margin: 0 0 var(--sp-4);
}
.p-cause__intro-text {
color: var(--c-text-muted);
line-height: var(--lh-body);
margin: 0;
}
.p-cause__intro-text + .p-cause__intro-text { margin-top: var(--sp-3); }
.p-cause { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.p-cause__item {
padding-top: var(--sp-6);
border-top: 1px solid var(--c-line);
}
.p-cause__no {
display: block;
font-family: var(--ff-num);
font-size: var(--fs-eyebrow);
letter-spacing: 0.15em;
color: var(--c-accent);
margin-bottom: var(--sp-3);
}
.p-cause__title {
font-family: var(--ff-display);
font-size: 1.4rem;
font-weight: var(--fw-medium);
letter-spacing: var(--tr-heading);
line-height: var(--lh-heading);
margin: 0 0 var(--sp-4);
}
.p-cause__title::before { display: none; }
.p-cause__text {
color: var(--c-text-muted);
line-height: var(--lh-body);
margin: 0;
}
.p-cause__text + .p-cause__text { margin-top: var(--sp-3); }
/* ============================================================
04 解決アプローチ — 考え方(3) + 実践の一手(3)
============================================================ */
.p-approach-block + .p-approach-block { margin-top: clamp(var(--sp-7), 5vw, var(--sp-9)); }
.p-approach-block__label {
font-size: var(--fs-caption);
letter-spacing: var(--tr-eyebrow);
color: var(--c-accent);
text-transform: uppercase;
margin-bottom: var(--sp-5);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--c-line);
}
.p-solution {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.p-solution__item { }
.p-solution__no {
font-family: var(--ff-num);
font-size: var(--fs-eyebrow);
letter-spacing: 0.15em;
color: var(--c-text-subtle);
}
.p-solution__title {
font-family: var(--ff-display);
font-size: 1.15rem;
font-weight: var(--fw-medium);
letter-spacing: var(--tr-heading);
line-height: var(--lh-heading);
margin: var(--sp-2) 0 var(--sp-3);
}
.p-solution__title::before { display: none; }
.p-solution__text {
font-size: var(--fs-small);
color: var(--c-text-muted);
line-height: var(--lh-body);
margin: 0;
}
/* ============================================================
05 実績
============================================================ */
.p-result {
border-left: 3px solid var(--c-accent);
padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
max-width: 48em;
}
.p-result__text {
font-size: var(--fs-lead);
line-height: 1.9;
color: var(--c-text);
margin: 0;
}
.p-result__note {
display: block;
margin-top: var(--sp-4);
font-size: var(--fs-caption);
color: var(--c-text-subtle);
}
/* ============================================================
見積書サンプル(cost ページ) — 実績の代わりのSVG
============================================================ */
.p-quote { margin: var(--sp-6) 0 0; }
.p-quote__svg {
display: block;
width: 100%;
max-width: 600px;
height: auto;
border: 1px solid var(--c-line);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.p-quote__note {
margin-top: var(--sp-5);
max-width: 40em;
font-size: var(--fs-small);
color: var(--c-text-muted);
line-height: var(--lh-body);
border-left: 3px solid var(--c-accent);
padding-left: var(--sp-5);
}
/* ============================================================
07 他の課題(回遊)
============================================================ */
.p-other {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
}
.p-other__item {
display: block;
background: var(--c-bg);
padding: var(--sp-6);
text-decoration: none;
color: inherit;
transition: background var(--dur) var(--ease);
}
.p-other__item:hover { background: var(--c-bg-alt); }
/* 現在地のカード(自分自身) — リンクにせず、控えめに沈める */
.p-other__item.is-current {
background: var(--c-bg-alt);
cursor: default;
}
.p-other__item.is-current .p-other__no { color: var(--c-accent); }
.p-other__item.is-current .p-other__title { color: var(--c-text-subtle); }
.p-other__no {
font-family: var(--ff-num);
font-size: var(--fs-eyebrow);
letter-spacing: 0.15em;
color: var(--c-text-subtle);
}
.p-other__title {
font-family: var(--ff-display);
font-size: 1.05rem;
font-weight: var(--fw-medium);
line-height: var(--lh-heading);
margin: var(--sp-2) 0 0;
}
.p-other__title::before { display: none; }
@media (max-width: 768px) {
.p-solution { grid-template-columns: 1fr; gap: var(--sp-6); }
.p-other { grid-template-columns: 1fr; }
}
}