を復活させる。このラッパが挟まるとグリッドが1カラムに潰れるので箱だけ消す（pages.css と同一。pg-core 単独でも成立させるため再掲） */ :is(.scy-pg .post_content, .scy-pg) .wp-block-group > .wp-block-group__inner-container { display: contents; } :is(.scy-pg .post_content, .scy-pg) .scy-lay { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--scy-col-gap, var(--scy-sp-4)); row-gap: var(--scy-gap-s); align-items: start; } /* SWELL/WPのブロック余白（> * + * のマージン）はグリッドの行間と二重になるので止める */ :is(.scy-pg .post_content, .scy-pg) .scy-lay > *, :is(.scy-pg .post_content, .scy-pg) :is(.c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c12, .right-4, .right-5) { margin-block: 0; } :is(.scy-pg .post_content, .scy-pg) :is(.c3, .is-c3) { grid-column: span 3; } :is(.scy-pg .post_content, .scy-pg) :is(.c4, .is-c4) { grid-column: span 4; } :is(.scy-pg .post_content, .scy-pg) :is(.c5, .is-c5) { grid-column: span 5; } :is(.scy-pg .post_content, .scy-pg) :is(.c6, .is-c6) { grid-column: span 6; } :is(.scy-pg .post_content, .scy-pg) :is(.c7, .is-c7) { grid-column: span 7; } :is(.scy-pg .post_content, .scy-pg) :is(.c8, .is-c8) { grid-column: span 8; } :is(.scy-pg .post_content, .scy-pg) :is(.c9, .is-c9) { grid-column: span 9; } :is(.scy-pg .post_content, .scy-pg) :is(.c10, .is-c10) { grid-column: span 10; } :is(.scy-pg .post_content, .scy-pg) :is(.c12, .is-c12) { grid-column: span 12; } /* 右端に寄せる列（サイドレール）。左に間を1カラム空ける */ :is(.scy-pg .post_content, .scy-pg) :is(.right-4, .is-right-4) { grid-column: 9 / span 4; } :is(.scy-pg .post_content, .scy-pg) :is(.right-5, .is-right-5) { grid-column: 8 / span 5; } /* カラム幅そのものが測度を担う（6カラム＝692px＝1行約43字）。 7カラム以上（813px＝50字〜）は長すぎるので、そこだけ43emで止める。 */ :is(.scy-pg .post_content, .scy-pg) :is(.c7, .c8, .c9, .c10, .c12) p:not([class*="scy-"]) { max-width: var(--scy-measure-text, 43em); } /* ============================================================ 3. ページヘッダー .scy-pagehead（§6-0） ------------------------------------------------------------ 字（40px/500/1.3/-0.01em/左）は page-title.css が既に持っている（不可侵ファイル）。ここでは器＝下罫と余白だけを足す。詳細度は page-title.css(0,1,0)より高いので順序に依存しない。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) .scy-pagehead { margin: 0 0 var(--scy-gap-s); padding-bottom: var(--scy-sp-3); border-bottom: 1px solid var(--scy-rule); } :is(.scy-pg .post_content, .scy-pg) .scy-pagehead__title { margin: 0; } /* ============================================================ 4. 署名要素 .scy-mark（標番）── S1の判定対象。寸法を変えてはならない（§5-2） ------------------------------------------------------------ 細い縦罫(accent 2×14px) ＋ 2桁番号(等幅) ＋日本語カテゴリを1行に組んだ13pxのラベル行。 h1と全セクション見出しの直上、左端 x = --swl-pad_container に置く。縦罫・ラベル・見出しが同じxから始まるので、前フェーズの成果（基準線1本）が保たれる。 SPでも寸法・位置とも同一（S1の無条件成立）。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) .scy-mark { display: flex; align-items: center; gap: 12px; min-height: 14px; margin: 0 0 10px; padding: 0; font-size: .8125rem; /* 13px */ line-height: 1; max-width: none; } :is(.scy-pg .post_content, .scy-pg) .scy-mark::before { content: ""; flex: none; width: 2px; height: 14px; background: var(--scy-accent); } :is(.scy-pg .post_content, .scy-pg) .scy-mark__no { font-family: var(--scy-num); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .06em; color: var(--scy-accent); } :is(.scy-pg .post_content, .scy-pg) .scy-mark__cat { font-weight: 600; letter-spacing: .04em; color: var(--scy-ink-label); } /* 番号とカテゴリの間は縦の細罫で区切る（番号が無い形態③では罫も出ない） */ :is(.scy-pg .post_content, .scy-pg) .scy-mark__no + .scy-mark__cat { padding-left: 12px; border-left: 1px solid var(--scy-line); } /* ============================================================ 5. タイポ6役（§4-2）── S2の判定対象 ------------------------------------------------------------ display は .scy-pagehead__title（page-title.css）が担当。ここは h2/h3/lead/body/caption。要素修飾（h2.scy-h2）で書いているのは、style.css:1242 と pages.css:789 の `.post_content h2.scy-reveal`（0,3,1）を同点＋後勝ちで打ち消すため（F-9）。短くしないこと。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) h2.scy-h2, :is(.scy-pg .post_content, .scy-pg) .scy-h2 { font-family: var(--scy-sans); font-size: clamp(1.5rem, 2.4vw, 2rem); /* 32px */ font-weight: 500; line-height: 1.16; letter-spacing: -.01em; color: var(--scy-ink); text-align: left; background: none; border: none; padding: 0; margin: 0; } :is(.scy-pg .post_content, .scy-pg) h3.scy-h3, :is(.scy-pg .post_content, .scy-pg) .scy-h3 { font-family: var(--scy-sans); font-size: 1.375rem; /* 22px */ font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--scy-ink); text-align: left; background: none; border: none; padding: 0; margin: 0; } /* SWELLの見出し装飾（下線・左バー・番号）の擬似要素を止める */ :is(.scy-pg .post_content, .scy-pg) :is(.scy-h2, .scy-h3)::before, :is(.scy-pg .post_content, .scy-pg) :is(.scy-h2, .scy-h3)::after { content: none; display: none; } /* lead ─ body との差は「サイズ1.25倍＋ウェイト500」の二重差（S2の根拠） */ :is(.scy-pg .post_content, .scy-pg) .scy-lead { font-family: var(--scy-sans); font-size: clamp(1.125rem, 1.5vw, 1.25rem); /* 20px → SP 18px */ font-weight: 500; line-height: 1.7; letter-spacing: 0; color: var(--scy-ink); text-align: left; max-width: var(--scy-measure-lead, 34em); margin: 0; } :is(.scy-pg .post_content, .scy-pg) .scy-body { font-family: var(--scy-sans); font-size: 1rem; /* 16px */ font-weight: 400; line-height: 1.8; color: var(--scy-ink); max-width: var(--scy-measure-text, 43em); margin: 0 0 1.5em; } :is(.scy-pg .post_content, .scy-pg) .scy-body:last-child { margin-bottom: 0; } /* caption ─ 6役で唯一の別色（ink-label 5.01:1）。色で役が判別できる */ :is(.scy-pg .post_content, .scy-pg) .scy-cap { font-family: var(--scy-sans); font-size: .875rem; /* 14px */ font-weight: 400; line-height: 1.7; letter-spacing: .01em; color: var(--scy-ink-label); margin: 10px 0 0; } /* 記録値の等幅（§4-1の7か所だけに当てる）。和文を流してはならない */ :is(.scy-pg .post_content, .scy-pg) .scy-num { font-family: var(--scy-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* ============================================================ 6. CTA .scy-cta（§6-1）── S5の4状態はここで定義する ------------------------------------------------------------ 1ページに塗りCTAは1つまで。ゴーストは補助にのみ使う。角丸は pill(999px) ＝サイト内で角丸が許される唯一の場所。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) .scy-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; /* タップ領域44px以上を満たす */ padding: 0 32px; border: 0; border-radius: var(--scy-r-pill, 999px); background: var(--scy-accent); color: #fff; font-family: var(--scy-sans); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; transition: background var(--scy-dur-fast, .3s) var(--scy-ease, ease), transform var(--scy-dur-fast, .3s) var(--scy-ease, ease); } :is(.scy-pg .post_content, .scy-pg) .scy-cta__arw { transition: transform var(--scy-dur-fast, .3s) var(--scy-ease, ease); } :is(.scy-pg .post_content, .scy-pg) .scy-cta:hover { background: var(--scy-accent-hover); color: #fff; text-decoration: none; } :is(.scy-pg .post_content, .scy-pg) .scy-cta:hover .scy-cta__arw { transform: translateX(4px); } :is(.scy-pg .post_content, .scy-pg) .scy-cta:active { transform: translateY(1px); } /* 地がアクセントなので、リングはインクで抜く（アクセント同士を隣接させない・§3-1） */ :is(.scy-pg .post_content, .scy-pg) .scy-cta:focus-visible { outline: 2px solid var(--scy-ink); outline-offset: 3px; } :is(.scy-pg .post_content, .scy-pg) .scy-cta--ghost { background: transparent; color: var(--scy-ink); border: 1px solid var(--scy-rule); } :is(.scy-pg .post_content, .scy-pg) .scy-cta--ghost:hover { background: var(--scy-accent-soft); border-color: var(--scy-accent); color: var(--scy-accent); } :is(.scy-pg .post_content, .scy-pg) .scy-cta--ghost:focus-visible { outline: 2px solid var(--scy-accent); outline-offset: 3px; } /* ============================================================ 7. 索引行 .scy-idx（§6-2） ------------------------------------------------------------ 段組みは必ず grid-auto-flow:column ＋ grid-template-rows。 columns プロパティを使うと列内で番号が飛ぶ（01,02 / 03,04 にならない）。行数は変種の既定値を持たせ、必要なら .scy-idx--rowsN で上書きする（インラインstyleを書かせないための逃げ道。§8 衝突防止ルール1）。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) .scy-idx { list-style: none; margin: 0; padding: 0; /* 上罫は引かない（見出しが上端を示す）。行の下罫だけで一覧を組む */ max-width: none; } :is(.scy-pg .post_content, .scy-pg) .scy-idx li { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--scy-line); } :is(.scy-pg .post_content, .scy-pg) .scy-idx li::marker { content: none; } :is(.scy-pg .post_content, .scy-pg) .scy-idx a, :is(.scy-pg .post_content, .scy-pg) .scy-idx .scy-idx__cur { display: grid; grid-template-columns: 56px 1fr 24px; align-items: center; gap: 16px; min-height: 56px; /* SPでも同値＝44px以上 */ padding: 8px 0; color: var(--scy-ink); font-size: 1rem; text-decoration: none; transition: color var(--scy-dur-fast, .3s) var(--scy-ease, ease); } :is(.scy-pg .post_content, .scy-pg) .scy-idx__n { font-family: var(--scy-num); font-variant-numeric: tabular-nums; font-size: .8125rem; /* 13px */ font-weight: 600; letter-spacing: .06em; color: var(--scy-ink-label); } :is(.scy-pg .post_content, .scy-pg) .scy-idx__t { font-size: 1rem; font-weight: 400; line-height: 1.5; } :is(.scy-pg .post_content, .scy-pg) .scy-idx__arw { text-align: right; color: var(--scy-ink-label); transition: transform var(--scy-dur-fast, .3s) var(--scy-ease, ease); } :is(.scy-pg .post_content, .scy-pg) .scy-idx a:hover { color: var(--scy-accent); text-decoration: none; } :is(.scy-pg .post_content, .scy-pg) .scy-idx a:hover .scy-idx__n { color: var(--scy-accent); } :is(.scy-pg .post_content, .scy-pg) .scy-idx a:hover .scy-idx__arw { color: var(--scy-accent); transform: translateX(4px); } :is(.scy-pg .post_content, .scy-pg) .scy-idx a:focus-visible { outline: 2px solid var(--scy-accent); outline-offset: 2px; } /* 現在地。ではなくに置換して使う */ :is(.scy-pg .post_content, .scy-pg) .scy-idx__cur { font-weight: 600; } :is(.scy-pg .post_content, .scy-pg) .scy-idx__cur .scy-idx__n { color: var(--scy-accent); } :is(.scy-pg .post_content, .scy-pg) .scy-idx li:has(.scy-idx__cur) { box-shadow: inset 2px 0 0 var(--scy-accent); /* 署名の縦罫と同じ2px */ padding-left: 14px; } /* 変種 ─ 2列 / 3列 / 右レール */ :is(.scy-pg .post_content, .scy-pg) .scy-idx--2, :is(.scy-pg .post_content, .scy-pg) .scy-idx--3 { display: grid; grid-auto-flow: column; column-gap: var(--scy-sp-8); } :is(.scy-pg .post_content, .scy-pg) .scy-idx--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--scy-idx-rows, 4), auto); /* 7件を2列4行 */ } :is(.scy-pg .post_content, .scy-pg) .scy-idx--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--scy-idx-rows, 1), auto); /* 3件を3列1行 */ } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rows1 { --scy-idx-rows: 1; } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rows2 { --scy-idx-rows: 2; } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rows3 { --scy-idx-rows: 3; } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rows4 { --scy-idx-rows: 4; } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rail { border-top: 1px solid var(--scy-rule); } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rail a, :is(.scy-pg .post_content, .scy-pg) .scy-idx--rail .scy-idx__cur { grid-template-columns: 44px 1fr 20px; min-height: 48px; font-size: .875rem; } :is(.scy-pg .post_content, .scy-pg) .scy-idx--rail .scy-idx__t { font-size: .875rem; } /* レールの見出し（「取扱業務」「所在地」等の小見出し）【2026-08-18 追補】.railhead は pg-core で唯一 scy- 接頭辞を持たないクラスのため、 pages.css:263 の `.scy-pg .post_content p:not([class*="scy-"])`（詳細度 0,3,1）に同着で負けうる。p.railhead / li.railhead を明示して同詳細度＋後勝ちを確定させる。（Phase 2C が markup 側で class="railhead scy-cap" と併記して回避していた事象の恒久対応。併記した markup もこの規則で同じ値になるので、どちらの書き方でも結果は一致する） */ :is(.scy-pg .post_content, .scy-pg) p.railhead, :is(.scy-pg .post_content, .scy-pg) li.railhead, :is(.scy-pg .post_content, .scy-pg) .railhead { font-size: .8125rem; /* 13px */ font-weight: 600; letter-spacing: .04em; color: var(--scy-ink-label); margin: 0 0 var(--scy-sp-2); max-width: none; } /* ============================================================ 8. 全幅バンド .scy-band（§6-7）── S3の「面」その1 ------------------------------------------------------------ 【重要】SWELL の .alignfull は既に position:relative; left:calc(-1*var(--swl-pad_container) + var(--swl-scrollbar_width)/2); width:100vw を当てている（1440pxで left:-48px を実測）。同じ式を重ねると二重にずれて横スクロールが出るため、alignfull が付いていないときだけ自前で補正する。 markup が figure.alignfull.scy-band の場合はSWELL側の式がそのまま正解になる。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) .scy-band { margin: var(--scy-gap-m) 0; overflow: hidden; background: var(--scy-surface-2); /* 読込中の面。画像が乗れば見えない */ } :is(.scy-pg .post_content, .scy-pg) .scy-band:not(.alignfull):not(.alignwide) { position: relative; left: calc(-1 * var(--swl-pad_container, 0px) + var(--swl-scrollbar_width, 0px) / 2); width: 100vw; max-width: 100vw; } :is(.scy-pg .post_content, .scy-pg) .scy-band img { display: block; width: 100%; height: clamp(300px, 34vw, 480px); object-fit: cover; border: 0; border-radius: 0; padding: 0; } /* 空が大半の写真は下寄せで切る */ :is(.scy-pg .post_content, .scy-pg) .scy-band--skyline img { object-position: 50% 78%; } /* 元の本文にキャプションがある場合のみ出る。無いページに新規で書かない（§6-7） */ :is(.scy-pg .post_content, .scy-pg) .scy-band figcaption { margin: var(--scy-sp-2) 0 0; padding-inline: var(--swl-pad_container, 0px); font-size: .875rem; line-height: 1.7; color: var(--scy-ink-label); text-align: left; } /* 地図等の埋め込みを帯に昇格させる場合（/company/ /contact/） */ :is(.scy-pg .post_content, .scy-pg) .scy-band iframe { display: block; width: 100%; height: clamp(280px, 30vw, 420px); border: 0; } /* ============================================================ 9. 巻末プレート .scy-foot（§6-8）── S3/S4を同時に成立させる中核 ------------------------------------------------------------ 全19ページがこれで終わる。最終セクション直後の巨大な空白が機械的に消える。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) .scy-foot { margin: var(--scy-gap-l) 0 0; background: var(--scy-surface-2); } :is(.scy-pg .post_content, .scy-pg) .scy-foot:not(.alignfull):not(.alignwide) { position: relative; left: calc(-1 * var(--swl-pad_container, 0px) + var(--swl-scrollbar_width, 0px) / 2); width: 100vw; max-width: 100vw; } :is(.scy-pg .post_content, .scy-pg) .scy-foot__in { max-width: var(--scy-bodyw, 1600px); margin: 0; /* 中央寄せしない＝左端は基準線に揃う */ padding: 0 var(--swl-pad_container, 0px); } :is(.scy-pg .post_content, .scy-pg) .scy-foot__idx { padding: var(--scy-sp-8) 0 var(--scy-sp-6); } :is(.scy-pg .post_content, .scy-pg) .scy-foot__h { margin: 0 0 var(--scy-sp-3); } :is(.scy-pg .post_content, .scy-pg) .scy-foot__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--scy-sp-6); flex-wrap: wrap; padding: var(--scy-sp-6) 0; /* 【2026-08-18】索引の最終行の罫と隣接して二重線になるため上罫は引かない。索引が無いページでは下の :first-child 規則で引き直す（区切りが必要なため） */ border-top: 0; } /* 索引が無い＝CTAだけのプレートは、上罫が無いと本文と地続きに見えるので1本だけ引く */ :is(.scy-pg .post_content, .scy-pg) .scy-foot--plain .scy-foot__cta, :is(.scy-pg .post_content, .scy-pg) .scy-foot__in > .scy-foot__cta:first-child { border-top: 1px solid var(--scy-rule); } /* プレートの中では罫を1段強くする（地が #f5f6f7 のため行罫が沈む） */ :is(.scy-pg .post_content, .scy-pg) .scy-foot .scy-idx li { border-bottom-color: var(--scy-rule); } /* ============================================================ 10. データシート表 .scy-sheet（§6-3） ------------------------------------------------------------ 横罫のみ。縦罫・ゼブラ・角丸は禁止（P5）。要素修飾（table.scy-sheet td）は pages.css の `table:not(:has(thead)) td`（0,3,2）と同点に並べて後勝ちさせるため。短くしないこと。 ============================================================ */ :is(.scy-pg .post_content, .scy-pg) table.scy-sheet { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 0; } :is(.scy-pg .post_content, .scy-pg) table.scy-sheet th { width: 180px; padding: 18px 24px 18px 0; text-align: left; vertical-align: top; font-size: .875rem; /* 14px */ font-weight: 600; letter-spacing: .04em; line-height: 1.6; color: var(--scy-ink-label); background: none; border: 0; } :is(.scy-pg .post_content, .scy-pg) table.scy-sheet td { padding: 14px 0 18px; vertical-align: top; line-height: 1.7; color: var(--scy-ink); background: none; border: 0; } /* 【2026-08-18 修正】CEO指摘「なんか線が多すぎて見にくいんよ」。全行に罫を引くと、1画面に横線が階段状に20本以上並んで文字より罫が目立つ。罫は「種類が変わる境目」だけに残し、行と行は余白で分ける。構造は左のラベル列（14px/600/ink-label）と値（16px/ink）のコントラストが担う。最終行にだけ底を1本引いて、表がどこで終わるかを示す。 */ :is(.scy-pg .post_content, .scy-pg) table.scy-sheet tr:last-child th, :is(.scy-pg .post_content, .scy-pg) table.scy-sheet tr:last-child td { border-bottom: 1px solid var(--scy-line); } /* ============================================================ 11. 出現演出 .scy-reveal（§6-10）── S6の判定対象 ------------------------------------------------------------ 機構は inc/scroll-fx.php の IntersectionObserver（threshold .15 / 1回のみ）を再利用。ここでは見た目の初期状態だけを定義する。**.scy-reveal に装飾を持たせない**（F-9）。 stagger は markup 側の style="--scy-d:60ms" で最大4段（0/60/120/180ms）まで。 prefers-reduced-motion: reduce のときはブロックごと無効＝最初から表示済み。 ============================================================ */ @media (prefers-reduced-motion: no-preference) { :is(.scy-pg .post_content, .scy-pg) .scy-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--scy-ease, ease), transform .5s var(--scy-ease, ease); transition-delay: var(--scy-d, 0ms); } :is(.scy-pg .post_content, .scy-pg) .scy-reveal.is-visible { opacity: 1; transform: none; } } /* ============================================================ 12. フォーカスリング（§9-5・S5） ------------------------------------------------------------ 本文内のリンク・ボタンに共通のリングを与える。ヘッダー/フッターのナビは nav.css の担当なので巻き込まない（.post_content と .scy-foot に限定）。 ============================================================ */ .scy-pg .post_content a:focus-visible, .scy-pg .post_content button:focus-visible, .scy-pg .post_content [tabindex]:focus-visible, .scy-pg .scy-foot a:focus-visible, .scy-pg .scy-foot button:focus-visible { outline: 2px solid var(--scy-accent); outline-offset: 2px; } /* ============================================================ 13. ブレークポイント（1200 / 960 / 782 の3本のみ・新設禁止） ============================================================ */ @media (max-width: 1200px) { /* 3列の索引は2列へ（56px+1fr+24px の行が潰れる前に畳む） */ :is(.scy-pg .post_content, .scy-pg) .scy-idx--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--scy-idx-rows-md, 2), auto); column-gap: var(--scy-sp-6); } } @media (max-width: 960px) { /* 12カラムを6カラムに畳む（半分の関係だけ残す） */ :is(.scy-pg .post_content, .scy-pg) .scy-lay { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--scy-sp-4); } :is(.scy-pg .post_content, .scy-pg) :is( .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c12, .right-4, .right-5, .is-c3, .is-c4, .is-c5, .is-c6, .is-c7, .is-c8, .is-c9, .is-c10, .is-c12, .is-right-4, .is-right-5 ) { grid-column: span 6; } :is(.scy-pg .post_content, .scy-pg) .scy-band img { height: clamp(240px, 34vw, 360px); } :is(.scy-pg .post_content, .scy-pg) .scy-foot__idx { padding: var(--scy-sp-6) 0 var(--scy-sp-4); } } @media (max-width: 782px) { /* ---- 1カラム化。インラインstyleの grid-column が無いことが前提（§8 ルール1） ---- */ :is(.scy-pg .post_content, .scy-pg) .scy-lay { grid-template-columns: minmax(0, 1fr); row-gap: var(--scy-sp-4); } :is(.scy-pg .post_content, .scy-pg) :is( .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c12, .right-4, .right-5, .is-c3, .is-c4, .is-c5, .is-c6, .is-c7, .is-c8, .is-c9, .is-c10, .is-c12, .is-right-4, .is-right-5 ) { grid-column: 1 / -1; } /* ---- タイポのSP値（§4-2）。display と lead は clamp が自動で 28px / 18px に落ちる ---- */ :is(.scy-pg .post_content, .scy-pg) .scy-h2 { font-size: 1.375rem; } /* 22px */ :is(.scy-pg .post_content, .scy-pg) .scy-h3 { font-size: 1.1875rem; } /* 19px */ :is(.scy-pg .post_content, .scy-pg) .scy-cap { font-size: .8125rem; } /* 13px */ /* 標番はSPでも同一寸法（S1） */ /* ---- 索引は1列に戻す ---- */ :is(.scy-pg .post_content, .scy-pg) .scy-idx--2, :is(.scy-pg .post_content, .scy-pg) .scy-idx--3 { display: block; grid-template-columns: none; grid-template-rows: none; } /* ---- CTAは全幅（タップ領域と親指の届く範囲） ---- */ :is(.scy-pg .post_content, .scy-pg) .scy-cta { display: flex; width: 100%; justify-content: center; } /* ---- 巻末プレート ---- */ :is(.scy-pg .post_content, .scy-pg) .scy-foot { margin-top: var(--scy-gap-m); } :is(.scy-pg .post_content, .scy-pg) .scy-foot__cta { flex-direction: column; align-items: flex-start; gap: var(--scy-sp-3); } :is(.scy-pg .post_content, .scy-pg) .scy-band { margin: var(--scy-sp-8) 0; } :is(.scy-pg .post_content, .scy-pg) .scy-band img { height: clamp(200px, 48vw, 300px); } /* ---- 表は行ごとの定義リストとして積む（横スクロール・縦罫を作らない・§6-3） ---- */ :is(.scy-pg .post_content, .scy-pg) table.scy-sheet, :is(.scy-pg .post_content, .scy-pg) table.scy-sheet tbody, :is(.scy-pg .post_content, .scy-pg) table.scy-sheet tr, :is(.scy-pg .post_content, .scy-pg) table.scy-sheet th, :is(.scy-pg .post_content, .scy-pg) table.scy-sheet td { display: block; width: auto; } :is(.scy-pg .post_content, .scy-pg) table.scy-sheet tr { padding: var(--scy-sp-2) 0; border-bottom: 1px solid var(--scy-line); } :is(.scy-pg .post_content, .scy-pg) table.scy-sheet tr:first-child { border-top: 1px solid var(--scy-rule); } :is(.scy-pg .post_content, .scy-pg) table.scy-sheet th { padding: 0 0 2px; border: 0; } :is(.scy-pg .post_content, .scy-pg) table.scy-sheet td { padding: 0; border: 0; } /* ---- SWELLの固定ボトムナビが本文末に重なる（F-7）。本文の下端に逃げを作る ---- 巻末プレートがあるページはプレート側で確保し、白い余白を足さない。 */ .scy-pg .post_content:not(:has(.scy-foot)) { padding-bottom: calc(var(--scy-sp-8) + env(safe-area-inset-bottom, 0px)); } :is(.scy-pg .post_content, .scy-pg) .scy-foot__cta { padding-bottom: calc(var(--scy-sp-6) + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ 14. 品質ゲート（2026-08-18）で検出した修正 ------------------------------------------------------------ 仕様の正: _scripts/design_system_2026-08-18.md 検収レポート: _scripts/qa/2026-08-18/redesign/検収レポート_2026-08-18.md ============================================================ */ /* (14-1) §9-4 × ── データシート内のリンク（電話・メール・PDFファイル名）のタップ領域が実測 16〜19px で、§9-4「44×44px 以上」と WCAG 2.2 SC 2.5.8 Target Size (Minimum) 24×24px を割っていた。 /contact/ 03-6280-3062（tel:） info@supercity.jp（mailto:） /brochure/ supercitygroup（PDF）インライン要素の padding は行ボックスの高さに影響しない（＝表の行高・字面・罫線の位置は1pxも動かない）が、当たり判定には算入される。これを使って高さだけ稼ぐ。 13px × 2 + 文字高 19px = 45px ≧ 44px。 */ :is(.scy-pg .post_content, .scy-pg) table.scy-sheet td a { padding-block: 15px; /* 実測: PC 19+30=49px / SP 16+30=46px / 360px 15+30=45px。全幅で44px以上 */ } /* (14-2) 走り文の中のリンク（例: /history/ の「社会貢献」）は WCAG 2.2 SC 2.5.8 の Inline 例外（文中にあり行高で寸法が決まるリンク）に当たるため拡大しない。拡大すると行間が破綻し、可読性のほうが落ちる。識別できるよう下線だけは必ず残す（色だけに依存しない＝SC 1.4.1）。 */ :is(.scy-pg .post_content, .scy-pg) p a:not([class]) { text-underline-offset: .18em; } /* ============================================================ 15. 最終ゲート（2026-08-18）の修正 ------------------------------------------------------------ CEO指摘「なんか線が多すぎて見にくいんよ」の残り分と、巻末プレートの形の不揃いを、19ページ横断で片づける。 ============================================================ */ /* (15-1) 罫の削減 ── 索引の無い巻末プレート（`--plain`）の上罫を廃止する。実測（1440px）: 索引の無い10ページ（サービス詳細6＋法務4）では、この罫が .scy-foot__cta の上端＝プレート（#f5f6f7）の**上端そのもの**に引かれていた。罫は x=48..1392（コンテナ幅）、プレートの面は x=0..1440（全幅）なので、「白 → 内側に48px引っ込んだ1本の細線 → 面の縁」という二重の境目になっていた。面の色が変わること自体が既に最も強い区切りである（索引を持つ9ページはこの位置に罫を引いておらず、それで成立している）。同じ語彙に合わせて落とす。 → 該当10ページが各1本ずつ減る。 */ :is(.scy-pg .post_content, .scy-pg) .scy-foot--plain .scy-foot__cta, :is(.scy-pg .post_content, .scy-pg) .scy-foot__in > .scy-foot__cta:first-child { border-top: 0; } /* (15-2) 巻末プレートのCTAが単独（左の標番＋文を持たない）ページで、ボタンが左端に取り残されていた（実測: /contact/ /sent-successfully/ /post/ の3ページ）。他16ページのボタンはすべてプレート右端にある。読み終えたあと目が行く位置がページによって左右に飛ぶのを止め、ボタンの居場所を19ページで1箇所に固定する。 `:has()` を使うのは、左ブロックの有無を markup 側の追加クラス無しで判定するため。文言・行き先・ボタンの種類（塗り／ゴースト）は一切変えない。 */ :is(.scy-pg .post_content, .scy-pg) .scy-foot__cta:not(:has(> div)) { justify-content: flex-end; } @media (max-width: 782px) { /* SPは縦積み（flex-direction:column）なので、主軸の flex-end は「下寄せ」になってしまう。 SPではCTAが width:100% なので左右の寄せは無関係＝既定に戻す。 */ :is(.scy-pg .post_content, .scy-pg) .scy-foot__cta:not(:has(> div)) { justify-content: flex-start; } }