をすべて伸ばしており、
まで余白を吸って
高さ 14px → 41px / 76px に膨らみ、3枚の見出しの天が 2536 / 2509 / 2570 と
バラバラになっていた（1440pxで実測）。同じ詳細度（0,4,1）で後から打ち消す。
要素修飾 `p.scy-mark` はそのためにある。短くしないこと。 */
:is(.scy-pg .post_content, .scy-pg) .scy-card p.scy-mark {
flex: 0 0 auto;
}
:is(.scy-pg .post_content, .scy-pg) .scy-card p.scy-card__body {
flex: 1 1 auto; /* 3枚の本文量が違っても「詳しく見る」が地に揃う */
margin-bottom: var(--scy-sp-3);
max-width: none; /* 列幅そのものが測度（3列＝約28字） */
}
:is(.scy-pg .post_content, .scy-pg) .scy-card p.scy-more {
flex: 0 0 auto;
margin-top: auto;
}
/* ============================================================
3. 詳細ページへの導線 .scy-more（仕様書 §6-4）
------------------------------------------------------------
列幅いっぱいの1本罫＋右端の矢印。文字だけの行にすると右に列幅ぶんの空きが残る。
矢印は CSS の擬似要素で出す（本文テキストを1字も増やさないため）。
色はインク単色。hover でだけアクセントに振れる（§3-1 の用途3）。
============================================================ */
:is(.scy-pg .post_content, .scy-pg) .scy-more {
margin: 0;
padding-top: var(--scy-sp-3);
border-top: 1px solid var(--scy-line);
max-width: none;
width: 100%;
}
:is(.scy-pg .post_content, .scy-pg) .scy-more a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--scy-sp-3);
width: 100%;
padding-top: 0;
border-top: 0;
font-family: var(--scy-sans);
font-size: .875rem; /* 14px */
font-weight: 600;
line-height: 1.5;
letter-spacing: .01em;
color: var(--scy-ink);
text-decoration: none;
transition: color var(--scy-dur-fast, .3s) var(--scy-ease, ease);
}
:is(.scy-pg .post_content, .scy-pg) .scy-more a::after {
content: "\2192";
display: inline-block;
transition: transform var(--scy-dur-fast, .3s) var(--scy-ease, ease);
}
:is(.scy-pg .post_content, .scy-pg) .scy-more a:hover {
color: var(--scy-accent);
text-decoration: none;
}
:is(.scy-pg .post_content, .scy-pg) .scy-more a:hover::after {
transform: translateX(4px);
}
:is(.scy-pg .post_content, .scy-pg) .scy-more a:focus-visible {
outline: 2px solid var(--scy-accent);
outline-offset: 3px;
}
/* ============================================================
4. .scy-pg__hero-fig（残置ガード）
------------------------------------------------------------
Phase 0 期の詳細ページが「右カラムの箱に収めた写真」に使っていたクラス。
Phase 2B で詳細6ページの写真は全幅バンド（.scy-band）へ昇格したため、
本文からは消えている。ただし functions.php の lazysizes 巻き戻しが
このクラスを対象に含んでおり、他レーン・下書きに残る可能性があるので、
出てきた場合でも「面」として出る最小限の規則だけ残す（角丸0・枠線なし・cover）。
============================================================ */
:is(.scy-pg .post_content, .scy-pg) .scy-pg__hero-fig {
margin: 0;
background: var(--scy-surface-2);
overflow: hidden;
}
:is(.scy-pg .post_content, .scy-pg) .scy-pg__hero-fig img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border: 0;
border-radius: 0;
padding: 0;
}
/* ============================================================
5. /services/global-mobility/ ── .scy-gm__* のトークン合流（仕様書 §7・§10）
------------------------------------------------------------
**構造は変えない。** 合流させるのは仕様書が挙げた5点のうちCSSで担う3点だけ。
(1) h1 を 56px → 40px（F-11。18ページと同値にする）
(3) 見出しのサイズ・ウェイトを §4-2 のトークンへ
(4) .scy-gm__band を .scy-band の寸法規則（高さ clamp）へ
（(2) 標番の挿入と (5) 巻末プレートの追加は markup 側＝
_scripts/redesign_services_2026-08-18.php が行う）
横位置（left / padding-inline）は nav.css §(7) が既に基準線 x=48 に合わせている。
.scy-gm__hero / .scy-gm__group の全幅は既存の alignfull が持っているので、
**ここで left 補正式を重ねてはならない**（二重補正＝横スクロールの原因）。
============================================================ */
/* (1)(3) ヒーロー見出し ─ display 役（40px / 500 / 1.30 / -0.01em）。
pages.css の `.post_content h1.scy-gm__hero-title`（0,2,1）を上回る詳細度で書く */
:is(.scy-pg .post_content, .scy-pg) h1.scy-gm__hero-title {
font-family: var(--scy-sans);
font-size: clamp(1.75rem, 3.2vw, 2.5rem); /* 40px。他18ページと同値 */
font-weight: 500;
line-height: 1.3;
letter-spacing: -.01em;
}
/* (3) 節見出し ─ h2 役（32px / 500）。pages.css と同値だが、本ファイル単独でも
成立させるため再掲する（Phase 3 で pages.css 側の重複を削除する予定） */
:is(.scy-pg .post_content, .scy-pg) h2.scy-gm__group-title {
font-family: var(--scy-sans);
font-size: clamp(1.5rem, 2.4vw, 2rem); /* 32px */
font-weight: 500;
line-height: 1.16;
letter-spacing: -.01em;
}
/* ヒーロー内の標番。地が写真＋スクリム（暗）なので、文字だけ on-dark トークンへ振る。
新しい色は足していない（style.css の --scy-on-dark-1/2 を参照しているだけ）。
縦罫（2px×14px アクセント）と寸法・位置は18ページと完全に同一＝S1を満たす。 */
:is(.scy-pg .post_content, .scy-pg) .scy-gm__hero-copy .scy-mark__no {
color: var(--scy-on-dark-1);
}
:is(.scy-pg .post_content, .scy-pg) .scy-gm__hero-copy .scy-mark__cat {
color: var(--scy-on-dark-2);
border-left-color: rgba(255, 255, 255, .34);
}
/* (4) 帯 ─ .scy-band と同じ高さ規則へ。横位置は既存の alignfull が持つので触らない。
style.css は height:clamp(320px,48vh,560px)、pages.css は clamp(240px,30vh,384px) と
ページごとに違う高さを持っていた。vh 依存をやめ、他ページの全幅バンドと同じ
clamp(300px,34vw,480px) に統一する（ページを跨いで帯の高さが1つになる）。 */
:is(.scy-pg .post_content, .scy-pg) .scy-gm__band {
height: auto;
margin: var(--scy-gap-m) 0;
overflow: hidden;
background: var(--scy-surface-2);
}
:is(.scy-pg .post_content, .scy-pg) .scy-gm__band img {
display: block;
width: 100%;
height: clamp(300px, 34vw, 480px);
object-fit: cover;
border: 0;
border-radius: 0;
padding: 0;
}
/* ============================================================
6. レスポンシブ（1200 / 960 / 782 の3本のみ・§9-4）
============================================================ */
@media (max-width: 1200px) {
/* カードは3列→2列。3枚目が単独で残るが、上罫1本の型は保たれる */
:is(.scy-pg .post_content, .scy-pg) .scy-cards,
:is(.scy-pg .post_content, .scy-pg) .scy-cards--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
/* 本文列が狭くなり、本文の高さが写真（16:9）を上回りはじめる幅域。
写真は align-self:stretch で行の高さまで伸びる＝下に空きを作らない */
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text {
column-gap: var(--scy-sp-6); /* 48px */
}
}
@media (max-width: 782px) {
/* ジグザグは1カラムに積む。写真が上・本文が下で、左右の別は無くなる */
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text,
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text.has-media-on-the-right {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--scy-sp-3);
margin-bottom: var(--scy-sp-8); /* 64px。SPの節間 */
}
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text__media,
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
grid-column: 1;
grid-row: 1;
}
/* 幅が狭いので 16:9 だと帯が薄くなりすぎる。3:2 に戻す */
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text__media::before {
padding-top: 66.6667%; /* 2 / 3 */
}
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text__content,
:is(.scy-pg .post_content, .scy-pg) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
grid-column: 1;
grid-row: 2;
justify-content: flex-start;
}
:is(.scy-pg .post_content, .scy-pg) .scy-lead + .wp-block-media-text {
margin-top: var(--scy-sp-8);
}
/* カードは1列。上罫1本の型はそのまま */
:is(.scy-pg .post_content, .scy-pg) .scy-cards,
:is(.scy-pg .post_content, .scy-pg) .scy-cards--3 {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--scy-sp-4);
margin-top: var(--scy-sp-8);
}
/* リロケーション支援の帯もSPでは .scy-band と同値に落とす */
:is(.scy-pg .post_content, .scy-pg) .scy-gm__band {
margin: var(--scy-sp-8) 0;
}
:is(.scy-pg .post_content, .scy-pg) .scy-gm__band img {
height: clamp(200px, 48vw, 300px);
}
}
/* ============================================================
7. /services/global-mobility/ のサービスカード（.scy-svc-card）
------------------------------------------------------------
【§8 の責任分担表に載っていないクラスについて】
.scy-svc-* は style.css（不可侵）が持つリロケーション支援ページ専用の部品で、
本サイトでは 1269 の1ページにしか出現しない（実測: 他18ページの post_content に出現ゼロ）。
§8 の表はこのクラスを4ファイルのどこにも割り当てていない＝所有者不在のまま
「角丸8px」と「hover時の影」を出していて、仕様書自身の絶対ゲート
S5「角丸は pill(999px) の1種のみ、それ以外は全て0」
§3-1 禁止事項「影・グラデーション・グローを作らない」
に反していた（1440/1024/768/390 の4幅で border-radius:8px を実測）。
構造・文言・余白・字面には一切触れず、**この2点だけ**を仕様書の規則に合わせる。
（このクラスの正式な帰属は仕様書の著者が決めること。§8 の表への追記が要る）
============================================================ */
/* 【2026-08-18 追加修正】CEO指摘「なんか線が多すぎて見にくいんよ」。
このページの罫は実測91本で全19ページ中の最多。うち大半がカード由来で、
1枚あたり「4辺の枠＋見出し下＋開閉リンク上＝6本」×11枚。
本サイトは他18ページに箱が1つも無く、区切りは横罫1本と余白だけで組んでいる。
カードも同じ語彙に合わせ、**枠を外して上の罫1本**にする（1枚6本→1本）。
文言・構造・余白の縦位置は変えない。 */
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card {
border: 0;
border-top: 1px solid var(--scy-rule);
border-radius: 0;
box-shadow: none;
background: none;
padding: var(--scy-sp-3) 0 var(--scy-sp-4);
transition: border-top-color .2s ease;
}
/* hover は影ではなく罫の色で示す（影はS5の禁止事項） */
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card:hover {
border-color: var(--scy-accent);
box-shadow: none;
}
/* 開閉リンクの上罫は、カードの上罫と合わせて二重になるので落とす */
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card__details {
border-top: 0;
}
/* ============================================================
8. 品質ゲート（2026-08-18）で検出した3件の修正
------------------------------------------------------------
仕様の正: _scripts/design_system_2026-08-18.md
検収レポート: _scripts/qa/2026-08-18/redesign/検収レポート_2026-08-18.md
============================================================ */
/* (8-1) S1 × ── 1269 だけ SP で左端が他18ページとずれていた（実測 x=24 / 他 x=15.6）
原因: style.css の .scy-gm__hero-copy は横位置に --scy-gutter（= max(24px,5vw)）を使う。
390px では max(24, 19.5) = 24px になるので、--swl-pad_container（4vw = 15.6px）と
8.4px ずれる。nav.css §(7) が同じ上書きを持っているが @media (min-width:960px) の
内側にあるため、SP・タブレットには効いていなかった。
直し方: nav.css は不可侵扱いなので触らず、.scy-gm__* の所有者である本ファイル（§8）で
**横位置だけ**を全幅で基準線に合わせる。余白・幅・縦組みには触れない。
S1 の「同一寸法・同一位置」は 360/390/768/1024/1440 の5幅すべてで成立するようになる。 */
:is(.scy-pg .post_content, .scy-pg) .scy-gm__hero-copy {
left: var(--swl-pad_container, 0px);
right: var(--swl-pad_container, 0px);
}
:is(.scy-pg .post_content, .scy-pg) .scy-gm__group {
padding-left: var(--swl-pad_container, 0px);
padding-right: var(--swl-pad_container, 0px);
}
/* (8-2) §9-4 × ── 「詳しく見る」のタップ領域が実測 18〜21px（PC 21 / SP 18）で、
§9-4「全インタラクティブ要素のタップ領域 44×44px 以上」と
WCAG 2.2 SC 2.5.8 Target Size (Minimum) 24×24px の両方を割っていた。
.scy-more a は既に列幅いっぱいの flex 行なので、min-height を与えるだけで
当たり判定が 44px になる（横幅は元から列幅ぶんある）。
align-items を baseline → center にするのは、行が高くなった分、文字と矢印を
行の中央で揃えるため。文字サイズ・字面・罫線の位置は変わらない。 */
:is(.scy-pg .post_content, .scy-pg) .scy-more a {
min-height: 44px;
align-items: center;
}
/* (8-3) S5 △ ── 1269 の「WERC国際サービス分類への準拠（参考）」の表だけが
SWELL 既定（is-style-simple）のままで、他ページの .scy-sheet と体裁が揃っていなかった。
この表は thead を持つ4列のマトリクスで、§6-3 の .scy-sheet（th[scope=row]＋td の
2列データシート・SPで定義リスト化）とは構造が違うため .scy-sheet は当てない。
当てるのは §6-3 の「横罫のみ・縦罫とゼブラと角丸は禁止」という体裁規則だけ。
（§8 責任分担表への追記が要る。検収レポートの裁定 F6 を参照） */
:is(.scy-pg .post_content, .scy-pg) .scy-gm__spec table,
:is(.scy-pg .post_content, .scy-pg) details .wp-block-table table {
border-collapse: collapse;
border-radius: 0;
font-size: .875rem; /* 14px = caption 役 */
}
:is(.scy-pg .post_content, .scy-pg) details .wp-block-table th,
:is(.scy-pg .post_content, .scy-pg) details .wp-block-table td {
border: 0;
border-bottom: 1px solid var(--scy-line);
background: none;
padding: 14px 20px 14px 0;
vertical-align: top;
line-height: 1.7;
}
:is(.scy-pg .post_content, .scy-pg) details .wp-block-table thead th {
border-bottom: 1px solid var(--scy-rule);
font-weight: 600;
letter-spacing: .04em;
color: var(--scy-ink-label);
text-align: left;
}
/* ============================================================
9. 最終ゲート（2026-08-18）── 1269 の「詳しく見る」を他18ページの語彙に合流させる
------------------------------------------------------------
【何が問題だったか（実測）】
.scy-svc-card__toggle は style.css（不可侵）で `color: var(--color_link, #1176d4)`。
--color_link はテーマ設定に無く、実効値は **#1176d4（青）** だった。
§3-2 の色トークン全量に青は存在せず、§3-1 は「新しい色を追加してはならない」と定める。
同じ「詳しく見る」が、他18ページ（.scy-more a）ではインク単色＋右端の矢印、
hover でだけアクセントに振れる。1269 の11枚だけが青いリンクで浮いていた。
【直し方】色の語彙だけを .scy-more a と一致させる。
既定 : var(--scy-ink) ＝ 他18ページと同値
hover : var(--scy-accent)（§3-1 用途3「リンク hover 時の文字色と矢印」）
シェブロン（::after）は style.css で `border-color: currentColor` なので、
文字色に自動追従する＝開閉状態の表現（rotate 45° ⇄ -135°）はそのまま動く。
opacity での hover 表現は「色が変わらないまま薄くなる」＝他18ページと違うので外す。
【壊してはならないもの（実機で確認済み）】
の開閉、aria-expanded、details[open] の擬似クラス、
list-style:none によるマーカー消し、min-height:44px のタップ領域。
本規則は color と opacity しか触っていないため、いずれにも影響しない。
============================================================ */
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card__toggle {
color: var(--scy-ink);
transition: color var(--scy-dur-fast, .3s) var(--scy-ease, ease);
}
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card__toggle:hover {
color: var(--scy-accent);
opacity: 1;
}
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card__details[open] > .scy-svc-card__toggle {
color: var(--scy-ink);
}
:is(.scy-pg .post_content, .scy-pg) .scy-svc-card__toggle:focus-visible {
outline: 2px solid var(--scy-accent);
outline-offset: 3px;
}