/**
* EX REDESiGN — assets/css/pages.css
*
* 固定ページ専用スタイル。
* 設計哲学:
* - テーマ本来のコンテンツ幅 (theme.json contentSize) を一切上書きしない
* - 装飾を引き算したエディトリアルデザイン、タイポグラフィと余白で階層を作る
* - ブログ見出し設定 (body.single-post スコープ) とは完全独立
* - 中央揃えテキストだが、テーブル・リストは読みやすさのため内部だけ左揃え
*
* スコープ: body.page (フロントページ = body.home 除く)
*/
/* ============================================================
* @section page-widths
* 固定ページ専用の幅トークン。1 箇所変えれば全ページに波及。
* ========================================================= */
body.page:not(.home) {
--exr-page-w-narrow: 640px;
--exr-page-w-base: 720px;
--exr-page-w-wide: 800px;
}
/* ============================================================
* @section page-typography
* テキスト揃えを中央をデフォルトとする。幅は theme.json の contentSize に任せる。
* ========================================================= */
body.page:not(.home) .exr-main p:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center):not(.wp-block-post-excerpt__excerpt) {
text-align: center;
}
/* ============================================================
* @section page-eyebrow
* 見出し上の小見出し。エディトリアル誌の「セクションラベル」表現。
* ========================================================= */
/* body.page:not(.home) .exr-main .ex-eyebrow: インライン属性で表現 (Phase 2.3 で移行済、各内部ページのアイブロウを align:center + letterSpacing:0.18em + fontWeight:500 で設定) */
/* ============================================================
* @section page-h1
* ページタイトル。装飾一切なし、タイポグラフィと余白だけで語る。
* font-size はクランプで広いビューポート適応。
* ========================================================= */
body.page:not(.home) .exr-main h1.wp-block-heading:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: center;
}
body.page:not(.home) .exr-main h1.wp-block-heading:not(.exr-hero-slide__content *) {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
margin-block: 0 2em;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
/* ============================================================
* @section page-h2
* セクション見出し。上に短いヘアラインを入れて「章区切り」感を出す。
* 下線ではなく上のアクセントは、雑誌・書籍のチャプター区切りを描寫する。
* ========================================================= */
body.page:not(.home) .exr-main h2.wp-block-heading:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: var(--exr-page-h2-align, center);
}
body.page:not(.home) .exr-main h2.wp-block-heading:not(.exr-hero-slide__content *) {
font-size: var(--exr-fs-xl, 1.5rem);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.4;
margin-block-start: var(--exr-page-h2-margin-top, 80px);
margin-block-end: var(--exr-page-h2-margin-bottom, 28px);
position: relative;
/* 拡張: 背景・パディング・角丸・背景時の文字色 (transparent / inherit の時は何も起きない) */
background-color: var(--exr-page-h2-bg-color, transparent);
color: var(--exr-page-h2-text-color-on-bg, inherit);
padding-block: var(--exr-page-h2-bg-padding-y, 0);
padding-inline: var(--exr-page-h2-bg-padding-x, 0);
border-radius: var(--exr-page-h2-bg-radius, 0);
}
/* h2 ::after = 下に横棒 (rule_position: below / both) */
body.page:not(.home) .exr-main h2.wp-block-heading:not(.exr-hero-slide__content *)::after {
content: "";
display: var(--exr-page-h2-after-display, none);
width: var(--exr-page-h2-rule-width, 32px);
height: var(--exr-page-h2-rule-thickness, 1px);
background-color: var(--exr-page-h2-rule-color, var(--color-text-primary, var(--wp--preset--color--text-primary)));
opacity: var(--exr-page-h2-rule-opacity, 0.32);
margin-top: var(--exr-page-h2-rule-gap, 28px);
margin-bottom: 0;
margin-inline-start: var(--exr-page-h2-rule-mis, auto);
margin-inline-end: var(--exr-page-h2-rule-mie, auto);
}
body.page:not(.home) .exr-main h2.wp-block-heading:not(.exr-hero-slide__content *)::before {
content: "";
display: var(--exr-page-h2-rule-display, block);
width: var(--exr-page-h2-rule-width, 32px);
height: var(--exr-page-h2-rule-thickness, 1px);
background-color: var(--exr-page-h2-rule-color, var(--color-text-primary, var(--wp--preset--color--text-primary)));
opacity: var(--exr-page-h2-rule-opacity, 0.32);
margin-top: 0;
margin-bottom: var(--exr-page-h2-rule-gap, 28px);
margin-inline-start: var(--exr-page-h2-rule-mis, auto);
margin-inline-end: var(--exr-page-h2-rule-mie, auto);
}
/* ============================================================
* @section page-h3
* サブセクション。テキストを中央に、左右に帶びるヘアラインで「チャプターサブ区切り」を表現。
* 長めの H3 でも中央揃えのバランスが保たれる flex レイアウト。
* border-inline-start はリセット（他ステートシートからの漏れガード）。
* ========================================================= */
body.page:not(.home) .exr-main h3.wp-block-heading:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: var(--exr-page-h3-text-align, center);
}
body.page:not(.home) .exr-main h3.wp-block-heading:not(.exr-hero-slide__content *) {
display: var(--exr-page-h3-display, flex);
align-items: center;
justify-content: var(--exr-page-h3-justify, center);
gap: var(--exr-page-h3-flanks-gap, 20px);
font-size: var(--exr-fs-lg, 1.125rem);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.5;
margin-block-start: var(--exr-page-h3-margin-top, 44px);
margin-block-end: var(--exr-page-h3-margin-bottom, 16px);
/* 他シートからの border / padding リークを明示リセット */
border-inline-start: none;
padding-inline-start: 0;
border-bottom: none;
padding-bottom: 0;
/* 拡張: 背景・パディング・角丸・背景時の文字色 */
background-color: var(--exr-page-h3-bg-color, transparent);
color: var(--exr-page-h3-text-color-on-bg, inherit);
padding-block: var(--exr-page-h3-bg-padding-y, 0);
padding-inline: var(--exr-page-h3-bg-padding-x, 0);
border-radius: var(--exr-page-h3-bg-radius, 0);
}
/* 左右に対称の短いヘアライン (24px) をフランキング。チャプターサブ区切りの表現。 */
body.page:not(.home) .exr-main h3.wp-block-heading:not(.exr-hero-slide__content *)::before {
content: "";
display: var(--exr-page-h3-before-display, block);
flex: 0 0 var(--exr-page-h3-flanks-width, 24px);
width: var(--exr-page-h3-flanks-width, 24px);
height: var(--exr-page-h3-flanks-thickness, 1px);
background-color: var(--exr-page-h3-flanks-color, var(--color-text-primary, var(--wp--preset--color--text-primary)));
opacity: var(--exr-page-h3-flanks-opacity, 0.28);
margin-top: var(--exr-page-h3-before-mt, 0);
margin-bottom: var(--exr-page-h3-before-mb, 0);
margin-inline-start: var(--exr-page-h3-rule-mis, auto);
margin-inline-end: var(--exr-page-h3-rule-mie, auto);
}
body.page:not(.home) .exr-main h3.wp-block-heading:not(.exr-hero-slide__content *)::after {
content: "";
display: var(--exr-page-h3-after-display, block);
flex: 0 0 var(--exr-page-h3-flanks-width, 24px);
width: var(--exr-page-h3-flanks-width, 24px);
height: var(--exr-page-h3-flanks-thickness, 1px);
background-color: var(--exr-page-h3-flanks-color, var(--color-text-primary, var(--wp--preset--color--text-primary)));
opacity: var(--exr-page-h3-flanks-opacity, 0.28);
margin-top: var(--exr-page-h3-after-mt, 0);
margin-bottom: var(--exr-page-h3-after-mb, 0);
margin-inline-start: var(--exr-page-h3-rule-mis, auto);
margin-inline-end: var(--exr-page-h3-rule-mie, auto);
}
/* ============================================================
* @section page-h4
* サブサブセクション。
* ========================================================= */
body.page:not(.home) .exr-main h4.wp-block-heading:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: center;
}
body.page:not(.home) .exr-main h4.wp-block-heading:not(.exr-hero-slide__content *) {
font-size: var(--exr-fs-base, 1rem);
font-weight: 600;
line-height: 1.6;
margin-block-start: 2.25em;
margin-block-end: 0.75em;
}
/* ============================================================
* @section page-h5-h6
* 最小レベル。ラベル的な使用を想定し、small caps 調。
* ========================================================= */
body.page:not(.home) .exr-main h5.wp-block-heading:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center),
body.page:not(.home) .exr-main h6.wp-block-heading:not(.exr-hero-slide__content *):not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: center;
}
body.page:not(.home) .exr-main h5.wp-block-heading:not(.exr-hero-slide__content *),
body.page:not(.home) .exr-main h6.wp-block-heading:not(.exr-hero-slide__content *) {
font-size: var(--exr-fs-sm, 0.9rem);
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.5;
color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
margin-block-start: 1.75em;
margin-block-end: 0.5em;
}
/* ============================================================
* @section page-list
* リスト。枠付き装飾は Block Style `is-style-ex-bordered-list`
* (inc/block-styles.php で登録) に委譲。デフォルトは裸のリスト。
* 下記はすべてのリストに適用される基本タイポグラフィ (li 間隔とマーカー色)。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-list li,
body.page:not(.home) .exr-main ul:not(.wp-block-buttons):not(.wp-block-post-template) li,
body.page:not(.home) .exr-main ol:not(.wp-block-post-template) li {
margin-block: 0.4em;
line-height: 1.75;
padding-inline-start: 0.25em;
}
body.page:not(.home) .exr-main .wp-block-list li::marker,
body.page:not(.home) .exr-main ul:not(.wp-block-buttons):not(.wp-block-post-template) li::marker,
body.page:not(.home) .exr-main ol:not(.wp-block-post-template) li::marker {
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
}
/* カード・カラム内ではリストのフレームを外し、原型として振る舞う */
body.page:not(.home) .exr-main .wp-block-columns .wp-block-list:not(.ex-checklist),
body.page:not(.home) .exr-main .wp-block-columns ul:not(.wp-block-list):not(.wp-block-buttons):not(.ex-checklist),
body.page:not(.home) .exr-main .wp-block-columns ol:not(.wp-block-list),
body.page:not(.home) .exr-main .ex-page-card .wp-block-list,
body.page:not(.home) .exr-main .ex-page-card ul:not(.wp-block-list):not(.wp-block-buttons),
body.page:not(.home) .exr-main .ex-page-card ol:not(.wp-block-list) {
max-width: none;
margin-inline: 0;
padding: 0 0 0 1.5em;
border: none;
border-radius: 0;
}
/* ============================================================
* @section page-table
* テーブル。すべてのテーブルをコンテンツ幅一杯・同じカラム区切り位置に
* 揃えるため、table-layout: fixed + 先頭セルの固定幅を指定。
* これにより同一ページ上の複数テーブルがピクセルパーフェクトに
* 列幅を揃え、並べて見たときの裸足感を消す。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-table {
margin-inline: auto;
/* contentSize (1200px) より中ぐらい、中央揃いレイアウトで裁丁合いのよいサイズ */
max-width: var(--exr-page-w-wide, 800px);
width: 100%;
overflow-x: auto;
}
/* alignwide / alignfull 指定時は広めを許容 */
body.page:not(.home) .exr-main .wp-block-table.alignwide {
max-width: var(--wp--style--global--wide-size, 1200px);
}
body.page:not(.home) .exr-main .wp-block-table.alignfull {
max-width: none;
}
body.page:not(.home) .exr-main .wp-block-table table {
width: 100%;
max-width: 100%;
margin-inline: auto;
border-collapse: collapse;
table-layout: fixed;
}
body.page:not(.home) .exr-main .wp-block-table th:not(.has-text-align-center):not(.has-text-align-right),
body.page:not(.home) .exr-main .wp-block-table td:not(.has-text-align-center):not(.has-text-align-right) {
text-align: left;
}
body.page:not(.home) .exr-main .wp-block-table th,
body.page:not(.home) .exr-main .wp-block-table td {
vertical-align: middle;
padding: 0.85rem 1.25rem;
line-height: 1.65;
word-break: break-word;
overflow-wrap: anywhere;
}
body.page:not(.home) .exr-main .wp-block-table th {
font-weight: 600;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
background-color: transparent;
line-height: 1.5;
}
/* TH 内に二段表記を許容し、上段日本語 · 下段英語サブタイトル */
body.page:not(.home) .exr-main .wp-block-table th .ex-th-en {
display: block;
margin-block-start: 0.25em;
font-size: 0.78em;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
font-style: normal;
}
/* key:value テーブル (tbody 内の TH をラベルとして使うケース) のみ
先頭列を固定幅に揃える。td は対象外にし、データテーブルの
1 列目 (例: アクセス表の 「路線」列) に巻き込まないようにする。 */
body.page:not(.home) .exr-main .wp-block-table tbody > tr > th:first-child {
width: 9.5em;
}
@media (max-width: 600px) {
body.page:not(.home) .exr-main .wp-block-table tbody > tr > th:first-child {
width: 7em;
}
}
/* thead を持つデータテーブルは内容に合わせて自然配分 */
body.page:not(.home) .exr-main .wp-block-table table:has(thead) {
table-layout: auto;
}
/* アクセス型 3 列データテーブルの推奨配分
路線名が長めなので 1 列目を最も広く、以降を小さくしていく */
body.page:not(.home) .exr-main .wp-block-table table:has(thead) thead th:first-child {
width: 50%;
}
body.page:not(.home) .exr-main .wp-block-table table:has(thead) thead th:nth-child(2) {
width: 25%;
}
body.page:not(.home) .exr-main .wp-block-table table:has(thead) thead th:nth-child(3) {
width: 25%;
white-space: nowrap;
}
/* ============================================================
* @section page-map
* アクセス地図。テーマ設定の Google Maps (.ex-gmaps) を
* テーブルと同一の最大幅 (800px) ・中央配置で表示するラッパー。
* iframe の高さ・表示ロジックはテーマ側 (assets/css/google-maps.css)
* が揃えるため、ここでは押さえだけにとどめる。
* ========================================================= */
body.page:not(.home) .exr-main .ex-page-map {
margin-inline: auto;
margin-block: 1.5rem 0;
max-width: var(--exr-page-w-wide, 800px);
width: 100%;
border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
border-radius: 2px;
overflow: hidden;
background-color: var(--color-bg-subtle, var(--wp--preset--color--bg-base));
}
/* ============================================================
* @section message-page
* メッセージページ専用レイアウト。
* エッセイ本文を狭めの読みやすいカラムにし、
* 章転換・宣言・カード・署名のタイポグラフィックコントラストで
* 視覚リズムを組み立てる。
* ========================================================= */
/* 本文ブロック: 読みやすい 640px 、本文は左揃え */
body.page:not(.home) .exr-main .ex-message-body {
max-width: var(--exr-page-w-narrow, 640px);
margin-inline: auto;
}
body.page:not(.home) .exr-main .ex-message-body p:not(.has-text-align-center):not(.has-text-align-right) {
text-align: left;
line-height: 1.9;
margin-block: 0.85em;
}
/* プルクオート (wp:quote をリデザイン) */
body.page:not(.home) .exr-main .ex-message-body .wp-block-quote {
margin-block: 1.75em;
padding-block: 1em;
border-inline-start: none;
position: relative;
}
body.page:not(.home) .exr-main .ex-message-body .wp-block-quote::before,
body.page:not(.home) .exr-main .ex-message-body .wp-block-quote::after {
content: "";
display: block;
width: 24px;
height: 1px;
background: var(--color-text-muted, var(--wp--preset--color--text-muted));
opacity: 0.4;
margin: 0 auto;
}
body.page:not(.home) .exr-main .ex-message-body .wp-block-quote::before { margin-bottom: 0.9em; }
body.page:not(.home) .exr-main .ex-message-body .wp-block-quote::after { margin-top: 0.9em; }
body.page:not(.home) .exr-main .ex-message-body .wp-block-quote p:not(.has-text-align-left):not(.has-text-align-right) {
text-align: center;
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-style: italic;
font-weight: 500;
line-height: 1.75;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
/* ピボットステートメント 「だから派手にしないと決めました」 */
body.page:not(.home) .exr-main .ex-message-pivot {
text-align: center;
font-size: clamp(1.375rem, 3vw, 1.875rem);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.6;
margin-block: 2.5em 2em;
max-width: var(--exr-page-w-wide, 800px);
margin-inline: auto;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
position: relative;
}
body.page:not(.home) .exr-main .ex-message-pivot::before,
body.page:not(.home) .exr-main .ex-message-pivot::after {
content: "";
display: block;
width: 48px;
height: 1px;
background: var(--color-text-primary, var(--wp--preset--color--text-primary));
opacity: 0.32;
margin: 0 auto;
}
body.page:not(.home) .exr-main .ex-message-pivot::before { margin-bottom: 0.9em; }
body.page:not(.home) .exr-main .ex-message-pivot::after { margin-top: 0.9em; }
/* コミットメントリスト — 番号付きのエディトリアル箸条書きスタイル。
デフォルトのリスト枠 (border + max-width: 560px) を上書きし、
上下のヘアラインと番号プレフィックスだけで雰囲気を作る。 */
body.page:not(.home) .exr-main ol.wp-block-list.ex-message-commitments,
body.page:not(.home) .exr-main ol.ex-message-commitments {
list-style: none;
max-width: var(--exr-page-w-narrow, 640px);
margin-inline: auto;
margin-block: 1.5em 2em;
padding: 0;
border: none;
border-radius: 0;
counter-reset: commitment;
}
body.page:not(.home) .exr-main ol.ex-message-commitments li {
counter-increment: commitment;
position: relative;
padding: 1.25em 0 1.25em 4em;
border-block-start: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
line-height: 1.85;
margin: 0;
text-align: left;
}
body.page:not(.home) .exr-main ol.ex-message-commitments li:last-child {
border-block-end: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
}
body.page:not(.home) .exr-main ol.ex-message-commitments li::before {
content: "0" counter(commitment);
position: absolute;
inset-inline-start: 0;
top: 1.4em;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
}
body.page:not(.home) .exr-main ol.ex-message-commitments li::marker {
content: none;
}
body.page:not(.home) .exr-main ol.ex-message-commitments li strong {
display: block;
font-weight: 600;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
margin-block-end: 0.35em;
}
/* クロージングライン */
body.page:not(.home) .exr-main .ex-message-closing {
text-align: center;
font-size: clamp(1.125rem, 2.25vw, 1.5rem);
font-weight: 600;
line-height: 1.7;
margin-block: 2em 1.5em;
max-width: var(--exr-page-w-base, 720px);
margin-inline: auto;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
/* 署名中央揃え */
body.page:not(.home) .exr-main .ex-message-signature {
text-align: center;
margin-block: 1.5em 2em;
max-width: var(--exr-page-w-narrow, 640px);
margin-inline: auto;
color: var(--color-text-secondary, #4b5563);
font-size: 0.9rem;
letter-spacing: 0.04em;
line-height: 1.8;
}
body.page:not(.home) .exr-main .ex-message-signature strong {
display: inline-block;
margin-top: 0.4em;
font-size: 1.0625rem;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
letter-spacing: 0.08em;
}
body.page:not(.home) .exr-main .wp-block-table figcaption {
text-align: center;
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
font-size: var(--exr-fs-xs, 0.85rem);
margin-block-start: 0.75em;
}
/* ============================================================
* @section page-quote
* 引用。中央揃え・左ボーダー除去、左右センターと上下の薄い区切りで表現。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-quote:not(.has-text-align-left):not(.has-text-align-right) {
text-align: center;
border-inline-start: none;
padding-inline: 0;
padding-block: 1.5em;
margin-block: 2.5em;
position: relative;
}
body.page:not(.home) .exr-main .wp-block-quote::before,
body.page:not(.home) .exr-main .wp-block-quote::after {
content: "";
display: block;
width: 24px;
height: 1px;
background: var(--color-text-muted, var(--wp--preset--color--text-muted));
opacity: 0.4;
margin: 0 auto;
}
body.page:not(.home) .exr-main .wp-block-quote::before {
margin-bottom: 1.25em;
}
body.page:not(.home) .exr-main .wp-block-quote::after {
margin-top: 1.25em;
}
body.page:not(.home) .exr-main .wp-block-quote p {
font-size: var(--exr-fs-base, 1rem);
line-height: 1.7;
font-style: italic;
}
body.page:not(.home) .exr-main .wp-block-quote cite {
display: block;
margin-block-start: 0.75em;
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
font-style: normal;
font-size: var(--exr-fs-sm, 0.9rem);
letter-spacing: 0.02em;
}
/* ============================================================
* @section page-buttons
* CTA ボタン — 中央配置。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-buttons {
justify-content: center;
}
/* ============================================================
* @section page-image
* 画像。中央配置 + caption 中央。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-image {
text-align: center;
margin-inline: auto;
}
body.page:not(.home) .exr-main .wp-block-image figcaption {
text-align: center;
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
font-size: var(--exr-fs-xs, 0.85rem);
margin-block-start: 0.5em;
}
/* ============================================================
* @section page-separator
* 区切り線 — 短め・中央、薄いトーン。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-separator {
margin-inline: auto;
max-width: 80px;
border: none;
border-block-start: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
opacity: 0.6;
margin-block: 3em;
}
/* ============================================================
* @section page-columns
* カラムレイアウト。内部は左揃え、H2 のアクセントラインも非表示。
* ========================================================= */
body.page:not(.home) .exr-main .wp-block-columns {
text-align: left;
}
/* ユーザーが WP UI で alignment を明示指定した場合はそれを尊重:
:not(.has-text-align-center):not(.has-text-align-right) で除外 */
body.page:not(.home) .exr-main .wp-block-columns p:not(.has-text-align-center):not(.has-text-align-right),
body.page:not(.home) .exr-main .wp-block-columns h2.wp-block-heading:not(.has-text-align-center):not(.has-text-align-right),
body.page:not(.home) .exr-main .wp-block-columns h3.wp-block-heading:not(.has-text-align-center):not(.has-text-align-right),
body.page:not(.home) .exr-main .wp-block-columns h4.wp-block-heading:not(.has-text-align-center):not(.has-text-align-right) {
text-align: left;
}
body.page:not(.home) .exr-main .wp-block-columns h2.wp-block-heading {
margin-block-start: 0;
}
body.page:not(.home) .exr-main .wp-block-columns h2.wp-block-heading::before,
body.page:not(.home) .exr-main .wp-block-columns h3.wp-block-heading::before,
body.page:not(.home) .exr-main .wp-block-columns h3.wp-block-heading::after {
display: none;
}
body.page:not(.home) .exr-main .wp-block-columns h3.wp-block-heading {
display: block;
}
/* ============================================================
* @section page-link
* テキストリンク。控えめな下線、hover でコントラスト強化。
* ========================================================= */
body.page:not(.home) .exr-main p a:not(.wp-element-button),
body.page:not(.home) .exr-main .wp-block-list li a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
text-decoration-color: var(--color-border-subtle, #d1d5db);
transition: text-decoration-color 150ms ease;
}
body.page:not(.home) .exr-main p a:not(.wp-element-button):hover,
body.page:not(.home) .exr-main .wp-block-list li a:hover {
text-decoration-color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
/* ============================================================
* @section works-query
* 実績ハブページの Query Loop カード。
* コンテンツ幅一杯・3 カラム・各カードにサムネイル・タイトル・抑えた抑象。
* ========================================================= */
body.page:not(.home) .exr-main .ex-works-query {
max-width: 100%;
margin-inline: auto;
margin-block: 2.5em 2em;
}
/* WP ネイティブの is-layout-grid をベースに、3 カラム固定 + gap 調整。
超狭いモバイル (≤ 480px) のみ 1 カラムにダウンし、それ以外は常に 3 カラム。 */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template.is-layout-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
/* services ページ wp:columns の WP デフォルト gap (24px) と一致 */
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
max-width: none;
border: none;
}
@media (max-width: 600px) {
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template.is-layout-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* 個々のカード (post-template > li) — services ページの .ex-page-card と同様に、
border + 内部 padding + flex column でボタンを下固定。カード自体はホバーで動かさず、
画像だけスケールアニメーションする。 */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template > li {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
/* アイキャッチ画像 img の border-radius (blog.css 8px) と一致させる */
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: transparent;
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template > li > * {
max-width: 100%;
}
/* カード本体の上スライドは廃止 — ホバー効果は画像スケールのみ (下の img ルールを参照)。 */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template > li::marker {
content: none;
}
/* サムネイル — カード上端いっぱい 。 画像の上角だけカードと同じ 8px、下角は 0 (本文と接する面) 。 */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-featured-image {
margin: 0;
overflow: hidden;
border-radius: 0;
background-color: var(--color-bg-subtle, var(--wp--preset--color--surface-raised));
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-featured-image img {
border-radius: 8px 8px 0 0;
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-featured-image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform 400ms ease;
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template > li:hover .wp-block-post-featured-image img {
transform: scale(1.03);
}
/* タイトル — カード内部 1.5rem padding、サムネイル下に 1.5rem 余白 */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-title {
text-align: left;
font-size: var(--exr-fs-base, 1.0625rem);
font-weight: 600;
line-height: 1.55;
letter-spacing: -0.005em;
margin: 1.5rem 1.5rem 0.6em;
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-title a {
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
text-decoration: none;
background-image: none;
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-title a:hover {
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-thickness: 1px;
}
/* 抹粋 — カード内部 1.5rem horizontal padding + ボタンとの間にも余白 */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-excerpt {
margin: 0 1.5rem 1.25rem;
}
/* 「詳しく見る」ボタン (wp:read-more) をカード下部に固定 + 中央揃え */
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-template > li > .wp-block-read-more {
margin: auto auto 1.5rem;
align-self: center;
}
body.page:not(.home) .exr-main .ex-works-query .wp-block-post-excerpt__excerpt {
text-align: left;
font-size: 0.875rem;
line-height: 1.75;
color: var(--color-text-secondary, #4b5563);
margin: 0;
}
/* ============================================================
* @section checklist
* .ex-checklist を付けた wp:list。チェックボックス型マーカー + 説明文。
* 通常のリスト枠 (border + max-width 560px) をここで上書きしてシンプルなチェックリストに。
* mask-image でアイコンを currentColor 染め、テーマパレットと連動。
* ========================================================= */
body.page:not(.home) .exr-main ul.wp-block-list.ex-checklist,
body.page:not(.home) .exr-main ul.ex-checklist {
list-style: none;
border: none;
padding: 0;
max-width: var(--exr-page-w-base, 720px);
margin-inline: auto;
margin-block: 1.5em 2em;
border-radius: 0;
}
body.page:not(.home) .exr-main ul.ex-checklist li {
position: relative;
padding-block: 0.5rem;
padding-inline-start: 2.25rem;
margin: 0;
line-height: 1.75;
text-align: left;
font-size: var(--exr-fs-base, 1rem);
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
body.page:not(.home) .exr-main ul.ex-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 1.15rem;
height: 1.15rem;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='2'%20width='12'%20height='12'%20rx='1.5'/%3E%3Cpolyline%20points='5%208%207.5%2010.5%2011.5%205.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='2'%20width='12'%20height='12'%20rx='1.5'/%3E%3Cpolyline%20points='5%208%207.5%2010.5%2011.5%205.5'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
body.page:not(.home) .exr-main ul.ex-checklist li::marker {
content: none;
}
/* ============================================================
* @section list-extension
* core/list ブロック拡張と連携したタイポグラフィ。
* .ex-list-extended : 【廃止】v1.4 より is-style-ex-bordered-list へ移行。DB 上は自動クリーンアップ
* .ex-list-icon-marker : 画像マーカー
* .ex-list-bordered + .ex-li-border-{top|bottom|left|right} : アイテムごとの罫線
* ========================================================= */
/* アイコン画像マーカー
他のスコープ高いルール (.ex-checklist など) と同等以上の特異度を確保するため
body.page:not(.home) .exr-main スコープとトップレベルスコープを並記する。
トップレベルも残しているためテーマ以外のコンテキスト (エディタ iframe) でも動作する。 */
/* トップレベルスタイル (エディタ iframe + テーマ外コンテキスト) — padding は li レベルで採り、
他の li padding ルール (.ex-checklist) と競合したときも全スコープでストレートに勝てるようにする。 */
ul.ex-list-icon-marker,
ol.ex-list-icon-marker,
.ex-list-icon-marker > ul,
.ex-list-icon-marker > ol,
.ex-list-icon-marker ul,
.ex-list-icon-marker ol {
list-style: none;
padding-inline-start: 0;
}
ul.ex-list-icon-marker > li,
ol.ex-list-icon-marker > li,
.ex-list-icon-marker ul > li,
.ex-list-icon-marker ol > li {
position: relative !important;
/* !important はエディタ iframe 内での WP コアの li reset (.wp-block-list-item 等) や
.ex-checklist トップレベルルールとの交差でも確実に padding を見せるため。
フロントの body.page スコープ版 (下記) も同様に !important を付けている。 */
padding-inline-start: calc(var(--ex-list-icon-size, 20px) + var(--ex-list-icon-gap, 12px)) !important;
}
ul.ex-list-icon-marker > li::before,
ol.ex-list-icon-marker > li::before,
.ex-list-icon-marker ul > li::before,
.ex-list-icon-marker ol > li::before {
content: "";
position: absolute;
left: 0;
top: calc(0.4em + var(--ex-list-icon-y-offset, 0px));
width: var(--ex-list-icon-size, 20px);
height: var(--ex-list-icon-size, 20px);
background-color: transparent;
background-image: var(--ex-list-icon);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
-webkit-mask-image: none;
mask-image: none;
}
ul.ex-list-icon-marker > li::marker,
ol.ex-list-icon-marker > li::marker,
.ex-list-icon-marker ul > li::marker,
.ex-list-icon-marker ol > li::marker {
content: none;
}
/* テーマスコープオーバーライド — .ex-checklist (li padding-inline-start: 2.25rem, ::before に mask-image) と競合しても勝てるよう
body.page:not(.home) .exr-main スコープで並記し、!important で上書き。 */
body.page:not(.home) .exr-main ul.ex-list-icon-marker > li,
body.page:not(.home) .exr-main ol.ex-list-icon-marker > li,
body.single-post .entry-content ul.ex-list-icon-marker > li,
body.single-post .entry-content ol.ex-list-icon-marker > li {
position: relative;
padding-inline-start: calc(var(--ex-list-icon-size, 20px) + var(--ex-list-icon-gap, 12px)) !important;
}
body.page:not(.home) .exr-main ul.ex-list-icon-marker > li::before,
body.page:not(.home) .exr-main ol.ex-list-icon-marker > li::before,
body.single-post .entry-content ul.ex-list-icon-marker > li::before,
body.single-post .entry-content ol.ex-list-icon-marker > li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
inset-inline-start: 0 !important;
top: calc(0.4em + var(--ex-list-icon-y-offset, 0px)) !important;
width: var(--ex-list-icon-size, 20px) !important;
height: var(--ex-list-icon-size, 20px) !important;
background-color: transparent !important;
background-image: var(--ex-list-icon) !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* マスクモード (.ex-list-icon-mask) — 単色 SVG を CSS で着色。
Iconify / Font Awesome / Material Symbols や、メディアライブラリの単色画像に適用。
--ex-list-icon-color (デフォルト: 本文色 currentColor) でアイコンを塗る。 */
ul.ex-list-icon-marker.ex-list-icon-mask > li::before,
ol.ex-list-icon-marker.ex-list-icon-mask > li::before,
.ex-list-icon-marker.ex-list-icon-mask ul > li::before,
.ex-list-icon-marker.ex-list-icon-mask ol > li::before {
background-image: none;
background-color: var(--ex-list-icon-color, currentColor);
-webkit-mask-image: var(--ex-list-icon);
mask-image: var(--ex-list-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
body.page:not(.home) .exr-main ul.ex-list-icon-marker.ex-list-icon-mask > li::before,
body.page:not(.home) .exr-main ol.ex-list-icon-marker.ex-list-icon-mask > li::before,
body.single-post .entry-content ul.ex-list-icon-marker.ex-list-icon-mask > li::before,
body.single-post .entry-content ol.ex-list-icon-marker.ex-list-icon-mask > li::before {
background-image: none !important;
background-color: var(--ex-list-icon-color, currentColor) !important;
-webkit-mask-image: var(--ex-list-icon) !important;
mask-image: var(--ex-list-icon) !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
-webkit-mask-position: center center !important;
mask-position: center center !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
}
/* ============================================================
* @section feature-card
* アドバイザリーページ「提供する 3 つの機能」他、
* 「番号+タイトル (主色背景) × リスト」の 50:50 2 カラムカード。
* モバイルでは縦積みに切り替わる。
* ========================================================= */
.ex-feature-card {
border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
border-radius: 4px;
overflow: hidden;
margin-block: 1.5rem;
margin-inline: auto;
}
/* アドバイザリー型カード (50:50 2 カラム、子に .wp-block-columns を持つ .ex-feature-card)
* だけ padding をゼロにしてカラムを枠にフラッシュさせる。
* :has() で features-3col 型 (画像+見出し+本文+ボタン) のカードに誤発しないよう限定。 */
body.page:not(.home) .ex-feature-card.has-global-padding:has(> .wp-block-columns) {
padding-left: 0 !important;
padding-right: 0 !important;
padding-inline: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* テーマの contentSize は 680px なので、カードを 800px にさせるには wide 揃えが必要。
wide 揃え時には 800px 上限で中央揃えとする。 */
.ex-feature-card.alignwide {
max-width: var(--exr-page-w-wide, 800px) !important;
}
/* グループで constrained レイアウトを ON にしても、カード自身の幅が制約となるため、
子要素を contentSize で中央揃えさせるデフォルト動作をキャンセル。 */
.ex-feature-card.is-layout-constrained > * {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.ex-feature-card .wp-block-columns {
align-items: stretch;
margin-block: 0;
/* WP コアの :root :where(.is-layout-flex) と、blockGap 生成 CSS の
.wp-container-core-columns-is-layout-XXX が両方 row-gap を付けてくるため、
カード内部ではギャップを完全にゼロにする。 */
gap: 0 !important;
}
.ex-feature-card .wp-block-column.ex-feature-side {
background: var(--color-text-primary);
color: var(--color-bg-base, var(--wp--preset--color--surface));
display: flex;
flex-direction: column;
justify-content: center;
/* stretch にして子要素をカラム幅まで伸ばす。
これによりレスポンシブクラスの text-align: center が実際に効くようになる。
デスクトップではテキストは依然 text-align: left のため見た目変わらず。 */
align-items: stretch;
gap: 0.45rem;
padding: 1.5rem 1.75rem;
}
.ex-feature-num {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
margin: 0;
opacity: 0.7;
color: inherit;
}
.ex-feature-side .ex-feature-title,
body.page:not(.home) .exr-main h3.ex-feature-title,
body.single-post .entry-content h3.ex-feature-title {
display: block !important;
font-size: 1.15rem !important;
line-height: 1.45 !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
/* text-align はパターン側の textAlign 属性 (has-text-align-*) に委譲。デフォルトパターンは center、ユーザーが UI で変えれば上書き。 */
}
body.page:not(.home) .exr-main h3.ex-feature-title::before,
body.page:not(.home) .exr-main h3.ex-feature-title::after,
body.single-post .entry-content h3.ex-feature-title::before,
body.single-post .entry-content h3.ex-feature-title::after {
display: none !important;
content: none !important;
}
.ex-feature-subtitle {
font-size: 0.85rem;
margin: 0;
opacity: 0.78;
color: inherit;
}
.ex-feature-card .wp-block-column.ex-feature-body {
padding: 1.5rem 1.75rem;
display: flex;
align-items: center;
}
.ex-feature-card .ex-feature-body ul,
.ex-feature-card .ex-feature-body ol {
margin: 0;
width: 100%;
}
@media (max-width: 781px) {
.ex-feature-card .wp-block-columns {
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
}
.ex-feature-card .wp-block-column.ex-feature-side,
.ex-feature-card .wp-block-column.ex-feature-body {
flex-basis: 100% !important;
width: 100% !important;
}
/* スマホでは縦揃えstretchを解除し、カラムを内容高さにフィットさせる。 */
.ex-feature-card .wp-block-column.is-vertically-aligned-stretch {
align-self: auto;
}
/* body の flex 中央揃えを解除—上とんやりスペースを防ぐ。 */
.ex-feature-card .wp-block-column.ex-feature-body {
display: block;
padding: 1.25rem 1.5rem;
}
}
/* アイテムごとの罫線 */
ul.ex-list-bordered > li,
ol.ex-list-bordered > li,
.ex-list-bordered ul > li,
.ex-list-bordered ol > li {
border-style: var(--ex-li-border-style, solid);
border-color: var(--color-border-subtle, var(--wp--preset--color--border-subtle));
border-width: 0;
padding-block: 0.6em;
padding-inline: 0.5em;
}
ul.ex-list-bordered.ex-li-border-top > li,
ol.ex-list-bordered.ex-li-border-top > li,
.ex-list-bordered.ex-li-border-top ul > li,
.ex-list-bordered.ex-li-border-top ol > li {
border-top-width: var(--ex-li-border-width, 1px);
}
ul.ex-list-bordered.ex-li-border-right > li,
ol.ex-list-bordered.ex-li-border-right > li,
.ex-list-bordered.ex-li-border-right ul > li,
.ex-list-bordered.ex-li-border-right ol > li {
border-right-width: var(--ex-li-border-width, 1px);
}
ul.ex-list-bordered.ex-li-border-bottom > li,
ol.ex-list-bordered.ex-li-border-bottom > li,
.ex-list-bordered.ex-li-border-bottom ul > li,
.ex-list-bordered.ex-li-border-bottom ol > li {
border-bottom-width: var(--ex-li-border-width, 1px);
}
ul.ex-list-bordered.ex-li-border-left > li,
ol.ex-list-bordered.ex-li-border-left > li,
.ex-list-bordered.ex-li-border-left ul > li,
.ex-list-bordered.ex-li-border-left ol > li {
border-left-width: var(--ex-li-border-width, 1px);
}
/* 2 カラムグリッドモディファイア 2×N で広げて見せるときに使う。 */
body.page:not(.home) .exr-main ul.ex-checklist.ex-checklist--2col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.75rem;
row-gap: 0.25rem;
max-width: none;
}
@media (max-width: 600px) {
body.page:not(.home) .exr-main ul.ex-checklist.ex-checklist--2col {
grid-template-columns: 1fr;
}
}
/* チェックリスト + 画像の 2 カラムレイアウト。
.ex-image-fill は div に background-image で画像を描画するレイアウトター。
![]()
タグを使わないため、WP コアの wp-block-image ルールと干渉せず、
div は自然高さゼロ、flex の stretch で兄弟カラムに高さを同期させることができる。 */
body.page:not(.home) .exr-main .ex-checklist-row {
align-items: stretch !important;
}
/* 画像カラム (右 = nth-child(2)) を position: relative にし、
中の .ex-image-fill を position: absolute でカラムをフルにカバー。
カラムの高さはチェックリスト (左カラム) により flex stretch で決定される。 */
body.page:not(.home) .exr-main .ex-checklist-row > .wp-block-column:nth-child(2) {
position: relative !important;
align-self: stretch !important;
min-height: 200px;
overflow: hidden;
}
body.page:not(.home) .exr-main .ex-checklist-row > .wp-block-column:nth-child(2) > .ex-image-fill {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
height: auto !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-radius: 4px;
display: block;
}
/* モバイルスタック時に wp:image の alignright が右寄せのままになるのを防ぐ 2 カラム内で中央揃えに。 */
@media (max-width: 781px) {
body.page:not(.home) .exr-main .wp-block-columns .wp-block-column .wp-block-image.alignright {
float: none !important;
text-align: center !important;
margin-inline: auto !important;
width: 100% !important;
}
body.page:not(.home) .exr-main .wp-block-columns .wp-block-column .wp-block-image.alignright > img {
margin-inline: auto !important;
display: block !important;
}
/* width: 250px などカラムに flex-basis インラインがあるケースも、モバイルではフル幅 × 中央揃え。
ex-feature-card カードのカラムは中身の揃えを「カードの意図」または「レスポンシブクラス」に任せるため除外。 */
body.page:not(.home) .exr-main .wp-block-columns > .wp-block-column[style*="flex-basis"]:not(.ex-feature-side):not(.ex-feature-body) {
flex-basis: auto !important;
width: 100% !important;
text-align: center;
}
/* 除外した .ex-feature-* カラムもモバイルではフル幅にする (text-align は覇らず、デフォルトを保持)。 */
body.page:not(.home) .exr-main .wp-block-columns > .wp-block-column.ex-feature-side[style*="flex-basis"],
body.page:not(.home) .exr-main .wp-block-columns > .wp-block-column.ex-feature-body[style*="flex-basis"] {
flex-basis: auto !important;
width: 100% !important;
}
}
/* 以前の .ex-image-fill / .ex-checklist-row パターン用のモバイル調整 */
@media (max-width: 781px) {
body.page:not(.home) .exr-main .ex-checklist-row {
align-items: center !important;
}
body.page:not(.home) .exr-main .ex-checklist-row > .wp-block-column:nth-child(2) {
position: static !important;
overflow: visible !important;
min-height: 0;
width: 100%;
display: flex;
justify-content: center;
}
body.page:not(.home) .exr-main .ex-checklist-row > .wp-block-column:nth-child(2) > .ex-image-fill {
position: relative !important;
width: 100% !important;
max-width: 480px !important;
height: 280px !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin-inline: auto !important;
}
}
/* ============================================================
* @section process-flow
* サービスページで使う「工程フロー」レイアウト。
* 各ステップ: 左にアイコン、右に番号バッジ + タイトル + 説明。
* ステップの間にシェブロンダブルダウンで連続意識を出す。
* EX REDESiGN のミニマル・エディトリアル调のため、色はグレー/ロスケール、アイコンは線画。
* ========================================================= */
.ex-process-flow {
max-width: var(--exr-page-w-wide, 800px);
margin-inline: auto;
margin-block: 2em 2.5em;
}
.ex-process-step {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
border-radius: 4px;
background: var(--color-surface, var(--wp--preset--color--surface));
text-align: left;
}
@media (max-width: 600px) {
.ex-process-step {
flex-direction: column;
}
}
/* 左カラム: 上段バッジ (番号) + 下段 (アイコン) の 2 段スタック。
.ex-process-step の overflow: hidden が角丸に合わせてクリップするため、
ここでは border-radius 不要。 */
.ex-process-side {
flex: 0 0 120px;
display: flex;
flex-direction: column;
background: var(--color-surface-raised, var(--wp--preset--color--surface-raised));
}
@media (max-width: 600px) {
.ex-process-side {
flex-direction: row;
width: 100%;
flex: 0 0 auto;
height: 60px;
}
}
/* 上段: メインカラー背景 + 白文字番号 */
.ex-process-num {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-text-primary, var(--wp--preset--color--text-primary));
color: var(--color-bg-base, var(--wp--preset--color--surface));
padding: 0.55rem 0.5rem;
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.2;
flex-shrink: 0;
}
@media (max-width: 600px) {
.ex-process-num {
flex: 0 0 70px;
}
}
/* 下段: アイコンエリア (薄グレー背景) */
.ex-process-icon {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.65rem;
min-height: 60px;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
.ex-process-icon svg {
width: 100%;
max-width: 48px;
height: auto;
display: block;
}
.ex-process-body {
flex: 1;
min-width: 0;
padding: 1.1rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.4rem;
}
@media (max-width: 600px) {
.ex-process-body {
padding: 1rem 1.25rem;
}
}
/* h3.ex-process-title — 他の h3.wp-block-heading スタイル (フランキングライン付き中央揃え) を控える。
同一特異度では負けるため h3 要素セレクタを含めて同じ特異度にセットし、
后出し勝ちで上書きします。 */
body.page:not(.home) .exr-main h3.ex-process-title,
.ex-process-title {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 600;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
margin: 0;
letter-spacing: -0.005em;
line-height: 1.4;
text-align: left;
display: block;
justify-content: flex-start;
align-items: flex-start;
gap: 0;
border: none;
padding: 0;
}
body.page:not(.home) .exr-main h3.ex-process-title::before,
body.page:not(.home) .exr-main h3.ex-process-title::after,
.ex-process-title::before,
.ex-process-title::after {
display: none;
content: none;
}
.ex-process-title::before,
.ex-process-title::after {
display: none;
}
.ex-process-desc {
color: var(--color-text-secondary, #4b5563);
font-size: 0.9rem;
line-height: 1.85;
margin: 0;
text-align: left;
}
/* ステップ間のコネクター — 「▼」 (下向き三角) を wp:paragraph で表示。
▼ グリフは em-box 上部に寄って描画されるため、padding を非対称にして視覚中央に調整。 */
.ex-process-arrow {
display: flex;
justify-content: center;
align-items: center;
padding-block: 1.2rem 0.4rem;
margin: 0;
color: var(--color-text-muted, var(--wp--preset--color--text-muted));
font-size: 1.75rem;
line-height: 1;
font-weight: 300;
letter-spacing: 0;
text-align: center;
}
.ex-process-arrow svg {
width: 1.5rem;
height: 1.5rem;
display: block;
}
/* ============================================================
* @section page-card
* カード型コンテンツパターン。
* 上段アイコン / 中段タイトル / 下段説明、という 3 部構造。
* wp:columns 内で wp:group に className="ex-page-card" を付けて使用。
* カード内部は中央揃え、ストレートな余白・未仕上げの境界。
* ========================================================= */
/* ============================================================
* @section card-base (.ex-page-card / .ex-feature-card 共通)
* 両カードの外観基底 — padding / border / radius / flex-column / height。
* 差分:
* .ex-page-card … アイコン中心 (text-align:center)
* .ex-feature-card … 画像入り (.ex-feature-image を edge-bleed)
* layout=constrained で挿入されたカードは .has-global-padding を WP が自動付与し、
* ネスト規則で L/R padding=0 になるため、このルールが正しく上書きする。
* ========================================================= */
body.page .exr-main .wp-block-columns .wp-block-group.ex-page-card,
.exr-main .wp-block-columns .wp-block-group.ex-feature-card,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card {
margin: 0; /* レガシー .ex-feature-card { margin-block: 1.5rem } を features-3col スタイルではリセット */
border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
/* 実績カード (アイキャッチ画像 radius=8px) と一致 */
border-radius: 8px;
background-color: transparent;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.85rem;
overflow: hidden; /* 画像 edge-bleed のため */
}
/* アイコン中心カード: アイコンの周りに余裕を設ける padding */
body.page .exr-main .wp-block-columns .wp-block-group.ex-page-card {
padding: 2rem 1.5rem;
text-align: center;
}
/* 画像入りカード: 全方位を padInner で揃え、画像の negative margin と完全一致させる */
.exr-main .wp-block-columns .wp-block-group.ex-feature-card,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card {
padding: var(--wp--custom--exr--card--pad-inner, 1.5rem);
}
/* section-latest-posts カード 固有: アイキャッチ画像の bottom 角を square にする。
* 画像 top 角はカードの overflow:hidden + border-radius:8px で自動クリップされるため
* ここでは img 自身の radius を 0 にしてもカード上部の丸みは保たれる。 */
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > figure.wp-block-post-featured-image img,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > .exr-thumbnail-placeholder-wrap img {
border-radius: 0;
}
/* 画像入りカード固有: features-3col パターンは layout=default と inline negative margin により edge-bleed。
* CSS 側は display:block を保値して選択肢を隶さずにするのみ。 */
/* 画像 edge-bleed: features-3col (wp:image.ex-feature-image) と
* section-latest-posts (wp:post-featured-image + placeholder fallback) 両方をサポート。
* wp:image のインライン margin と CSS は同じ計算結果になるため袳しちしない。
* 動的ブロック (post-featured-image / placeholder) は CSS だけで edge-bleed。 */
.exr-main .wp-block-columns .wp-block-group.ex-feature-card > .ex-feature-image,
.exr-main .wp-block-columns .wp-block-group.ex-feature-card > figure.wp-block-post-featured-image,
.exr-main .wp-block-columns .wp-block-group.ex-feature-card > .exr-thumbnail-placeholder-wrap,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > .ex-feature-image,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > figure.wp-block-post-featured-image,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > .exr-thumbnail-placeholder-wrap {
display: block;
margin-top: calc(var(--wp--custom--exr--card--pad-inner) * -1);
margin-right: calc(var(--wp--custom--exr--card--pad-inner) * -1);
/* 画像→タイトル間を他の text-text sibling 間隔と同じ「見た目」にするため
margin は他より一段階広めにする。画像側は line-height による leading が 0 なので、
text 同士の間隔 (margin + 上下 leading) とバランスを取るため 0.5rem とした。
旧旧: var(--wp--custom--exr--card--pad-inner) (1.5rem) */
margin-bottom: 0.5rem;
margin-left: calc(var(--wp--custom--exr--card--pad-inner) * -1);
}
.exr-main .wp-block-columns .wp-block-group.ex-feature-card > .ex-feature-image img,
.exr-main .wp-block-columns .wp-block-group.ex-feature-card > figure.wp-block-post-featured-image img,
.exr-main .wp-block-columns .wp-block-group.ex-feature-card > .exr-thumbnail-placeholder-wrap img,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > .ex-feature-image img,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > figure.wp-block-post-featured-image img,
.exr-main .wp-block-post-template .wp-block-group.ex-feature-card > .exr-thumbnail-placeholder-wrap img {
display: block;
width: 100%;
height: auto;
}
/* カード内アイコンエリア (HTML ブロック + .ex-card-icon クラス) */
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card .ex-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0.5rem auto 0.75rem;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card .ex-card-icon svg {
width: 100%;
height: 100%;
display: block;
}
/* カード内 H3 はフランキングラインを出さず、中央揃えシンプルに */
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card h3.wp-block-heading {
display: block;
text-align: center;
font-size: var(--exr-fs-base, 1.05rem);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.5;
margin-block: 0 0.5rem;
border: none;
padding: 0;
}
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card h3.wp-block-heading::before,
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card h3.wp-block-heading::after {
display: none;
}
/* カード内本文は読みやすさを優先して左揃え、トーンをやや落とす。
:not(.has-text-align-*) チェーンはデザイン上不要だが、「全 を中央揃え」ノデフォルトルールに勝つため specificity を底上げしている。 */
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card p:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: left;
font-size: var(--exr-fs-sm, 0.9rem);
line-height: 1.75;
color: var(--color-text-secondary, #4b5563);
margin: 0;
}
/* カードボタン — 説明文の長さに関わらずカード下部に锥り付け。
.ex-page-card は flex column なので、ボタンを包む
に margin-top: auto を付与すると
他の要素を全て上に押し上げ、ボタンが下にスタックされる。 */
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card .ex-card-button-wrap {
margin-top: auto;
text-align: left;
padding-top: 0.75rem;
}
body.page:not(.home) .exr-main .ex-page-card .ex-card-button {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.55rem 1.1rem;
border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
border-radius: 999px;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
color: var(--color-text-primary, var(--wp--preset--color--text-primary));
background: none;
transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
body.page:not(.home) .exr-main .ex-page-card .ex-card-button:hover {
border-color: var(--color-text-primary, var(--wp--preset--color--text-primary));
background: var(--color-text-primary, var(--wp--preset--color--text-primary));
color: var(--color-bg-base, var(--wp--preset--color--surface));
text-decoration: none;
}
body.page:not(.home) .exr-main .ex-page-card .ex-card-button-icon {
width: 0.9em;
height: 0.9em;
flex-shrink: 0;
transition: transform 200ms ease;
}
body.page:not(.home) .exr-main .ex-page-card .ex-card-button:hover .ex-card-button-icon {
transform: translateX(2px);
}
/* ============================================================
* @section page-mobile
* モバイル調整 — 余白をやや詰める。
* ========================================================= */
@media (max-width: 600px) {
body.page:not(.home) .exr-main h2.wp-block-heading {
margin-block-start: 3.5em;
margin-block-end: 1.25em;
}
body.page:not(.home) .exr-main .wp-block-quote {
padding-block: 1em;
margin-block: 2em;
}
}
/* ============================================================
* @section responsive-controls
* ブロック拡張 (assets/js/responsive-controls.js) から追加される
* クラスに対応した BP 別スタイル。
* BP（テーマ統一）: Desktop ≥ 1025px / Tablet 601–1024 / Mobile ≤ 600
*
* クラス命名:
* .ex-r-{d|t|m}-text-{left|center|right|justify}
* .ex-r-{d|t|m}-hidden
*
* カスケード設計:
* - Desktop ルールはメディアクエリ外に置き、常に適用される、
* Tablet / Mobile のメディアルールで上書きされる。
* - テーマの見出しルール等の先見性に勝つため !important を付ける。
* ========================================================= */
/* Desktop (≥ 1025px を含む全サイズ、下位 BP で上書き)
エディタプレビュー用の低特異度ルール (body.page スコープが不在のコンテキストでヒット) */
.ex-r-d-text-left { text-align: left !important; }
.ex-r-d-text-center { text-align: center !important; }
.ex-r-d-text-right { text-align: right !important; }
.ex-r-d-text-justify { text-align: justify !important; }
.ex-r-d-hidden { display: none !important; }
/* フロントページ用の高特異度ルール。
クラスを重複させて (0, 5, 1) 以上とし、
テーマの (0, 4, 2) コンポーネントルール (.ex-feature-title など) に勝つようにする。 */
body.page:not(.home) .exr-main .ex-r-d-text-left.ex-r-d-text-left,
body.single-post .entry-content .ex-r-d-text-left.ex-r-d-text-left { text-align: left; }
body.page:not(.home) .exr-main .ex-r-d-text-center.ex-r-d-text-center,
body.single-post .entry-content .ex-r-d-text-center.ex-r-d-text-center { text-align: center; }
body.page:not(.home) .exr-main .ex-r-d-text-right.ex-r-d-text-right,
body.single-post .entry-content .ex-r-d-text-right.ex-r-d-text-right { text-align: right; }
body.page:not(.home) .exr-main .ex-r-d-text-justify.ex-r-d-text-justify,
body.single-post .entry-content .ex-r-d-text-justify.ex-r-d-text-justify { text-align: justify; }
body.page:not(.home) .exr-main .ex-r-d-hidden.ex-r-d-hidden,
body.single-post .entry-content .ex-r-d-hidden.ex-r-d-hidden { display: none; }
/* Tablet (601 – 1024) */
@media (min-width: 601px) and (max-width: 1024px) {
.ex-r-t-text-left { text-align: left !important; }
.ex-r-t-text-center { text-align: center !important; }
.ex-r-t-text-right { text-align: right !important; }
.ex-r-t-text-justify { text-align: justify !important; }
.ex-r-t-hidden { display: none !important; }
body.page:not(.home) .exr-main .ex-r-t-text-left.ex-r-t-text-left,
body.single-post .entry-content .ex-r-t-text-left.ex-r-t-text-left { text-align: left; }
body.page:not(.home) .exr-main .ex-r-t-text-center.ex-r-t-text-center,
body.single-post .entry-content .ex-r-t-text-center.ex-r-t-text-center { text-align: center; }
body.page:not(.home) .exr-main .ex-r-t-text-right.ex-r-t-text-right,
body.single-post .entry-content .ex-r-t-text-right.ex-r-t-text-right { text-align: right; }
body.page:not(.home) .exr-main .ex-r-t-text-justify.ex-r-t-text-justify,
body.single-post .entry-content .ex-r-t-text-justify.ex-r-t-text-justify { text-align: justify; }
body.page:not(.home) .exr-main .ex-r-t-hidden.ex-r-t-hidden,
body.single-post .entry-content .ex-r-t-hidden.ex-r-t-hidden { display: none; }
}
/* Mobile (≤ 600) */
@media (max-width: 600px) {
.ex-r-m-text-left { text-align: left !important; }
.ex-r-m-text-center { text-align: center !important; }
.ex-r-m-text-right { text-align: right !important; }
.ex-r-m-text-justify { text-align: justify !important; }
.ex-r-m-hidden { display: none !important; }
body.page:not(.home) .exr-main .ex-r-m-text-left.ex-r-m-text-left,
body.single-post .entry-content .ex-r-m-text-left.ex-r-m-text-left { text-align: left; }
body.page:not(.home) .exr-main .ex-r-m-text-center.ex-r-m-text-center,
body.single-post .entry-content .ex-r-m-text-center.ex-r-m-text-center { text-align: center; }
body.page:not(.home) .exr-main .ex-r-m-text-right.ex-r-m-text-right,
body.single-post .entry-content .ex-r-m-text-right.ex-r-m-text-right { text-align: right; }
body.page:not(.home) .exr-main .ex-r-m-text-justify.ex-r-m-text-justify,
body.single-post .entry-content .ex-r-m-text-justify.ex-r-m-text-justify { text-align: justify; }
body.page:not(.home) .exr-main .ex-r-m-hidden.ex-r-m-hidden,
body.single-post .entry-content .ex-r-m-hidden.ex-r-m-hidden { display: none; }
}
/* @section responsive-controls (editor TabPanel)
サイドバーのタブパネルを 3 等分、アイコン+ラベル中央揃え。 */
.ex-responsive-tabs .components-tab-panel__tabs {
display: flex !important;
width: 100% !important;
}
.ex-responsive-tabs .components-tab-panel__tabs > button {
flex: 1 1 0 !important;
min-width: 0 !important;
justify-content: center !important;
text-align: center !important;
padding-inline: 4px !important;
}
/* @section list-marker-center-fix
.ex-list-icon-marker とレスポンシブ text-align center の交差対処。
ul 自体をコンテンツ幅（fit-content）でブロック化し、margin-inline:auto で中央揃え。
拡 flex / block 両方の親コンテキストで動作。アイコンは li::before の絶対配置のままで縦に揃う。 */
body.page:not(.home) .exr-main ul.ex-list-icon-marker.ex-r-d-text-center,
body.page:not(.home) .exr-main ol.ex-list-icon-marker.ex-r-d-text-center,
body.page:not(.home) .exr-main .ex-r-d-text-center ul.ex-list-icon-marker,
body.page:not(.home) .exr-main .ex-r-d-text-center ol.ex-list-icon-marker,
body.single-post .entry-content ul.ex-list-icon-marker.ex-r-d-text-center,
body.single-post .entry-content ol.ex-list-icon-marker.ex-r-d-text-center,
body.single-post .entry-content .ex-r-d-text-center ul.ex-list-icon-marker,
body.single-post .entry-content .ex-r-d-text-center ol.ex-list-icon-marker {
display: block !important;
width: fit-content !important;
max-width: 100% !important;
margin-inline: auto !important;
text-align: left !important;
}
@media (min-width: 601px) and (max-width: 1024px) {
body.page:not(.home) .exr-main ul.ex-list-icon-marker.ex-r-t-text-center,
body.page:not(.home) .exr-main ol.ex-list-icon-marker.ex-r-t-text-center,
body.page:not(.home) .exr-main .ex-r-t-text-center ul.ex-list-icon-marker,
body.page:not(.home) .exr-main .ex-r-t-text-center ol.ex-list-icon-marker,
body.single-post .entry-content ul.ex-list-icon-marker.ex-r-t-text-center,
body.single-post .entry-content ol.ex-list-icon-marker.ex-r-t-text-center,
body.single-post .entry-content .ex-r-t-text-center ul.ex-list-icon-marker,
body.single-post .entry-content .ex-r-t-text-center ol.ex-list-icon-marker {
display: block !important;
width: fit-content !important;
max-width: 100% !important;
margin-inline: auto !important;
text-align: left !important;
}
}
@media (max-width: 600px) {
body.page:not(.home) .exr-main ul.ex-list-icon-marker.ex-r-m-text-center,
body.page:not(.home) .exr-main ol.ex-list-icon-marker.ex-r-m-text-center,
body.page:not(.home) .exr-main .ex-r-m-text-center ul.ex-list-icon-marker,
body.page:not(.home) .exr-main .ex-r-m-text-center ol.ex-list-icon-marker,
body.single-post .entry-content ul.ex-list-icon-marker.ex-r-m-text-center,
body.single-post .entry-content ol.ex-list-icon-marker.ex-r-m-text-center,
body.single-post .entry-content .ex-r-m-text-center ul.ex-list-icon-marker,
body.single-post .entry-content .ex-r-m-text-center ol.ex-list-icon-marker {
display: block !important;
width: fit-content !important;
max-width: 100% !important;
margin-inline: auto !important;
text-align: left !important;
}
}
/* @section responsive-spacing
ブロック拡張 (responsive-controls.js) の
exResponsiveMargin / exResponsivePadding 属性の相当クラスと CSS 変数を結合する。
.ex-r-{d|t|m}-{m|p}{t|r|b|l}-set + --ex-r-{d|t|m}-{m|p}{t|r|b|l}:
*/
/* Desktop (全サイズ、下位 BP で上書き) */
.ex-r-d-mt-set { margin-top: var(--ex-r-d-mt) !important; }
.ex-r-d-mr-set { margin-right: var(--ex-r-d-mr) !important; }
.ex-r-d-mb-set { margin-bottom: var(--ex-r-d-mb) !important; }
.ex-r-d-ml-set { margin-left: var(--ex-r-d-ml) !important; }
.ex-r-d-pt-set { padding-top: var(--ex-r-d-pt) !important; }
.ex-r-d-pr-set { padding-right: var(--ex-r-d-pr) !important; }
.ex-r-d-pb-set { padding-bottom: var(--ex-r-d-pb) !important; }
.ex-r-d-pl-set { padding-left: var(--ex-r-d-pl) !important; }
body.page:not(.home) .exr-main .ex-r-d-mt-set.ex-r-d-mt-set,
body.single-post .entry-content .ex-r-d-mt-set.ex-r-d-mt-set { margin-top: var(--ex-r-d-mt); }
body.page:not(.home) .exr-main .ex-r-d-mr-set.ex-r-d-mr-set,
body.single-post .entry-content .ex-r-d-mr-set.ex-r-d-mr-set { margin-right: var(--ex-r-d-mr); }
body.page:not(.home) .exr-main .ex-r-d-mb-set.ex-r-d-mb-set,
body.single-post .entry-content .ex-r-d-mb-set.ex-r-d-mb-set { margin-bottom: var(--ex-r-d-mb); }
body.page:not(.home) .exr-main .ex-r-d-ml-set.ex-r-d-ml-set,
body.single-post .entry-content .ex-r-d-ml-set.ex-r-d-ml-set { margin-left: var(--ex-r-d-ml); }
body.page:not(.home) .exr-main .ex-r-d-pt-set.ex-r-d-pt-set,
body.single-post .entry-content .ex-r-d-pt-set.ex-r-d-pt-set { padding-top: var(--ex-r-d-pt); }
body.page:not(.home) .exr-main .ex-r-d-pr-set.ex-r-d-pr-set,
body.single-post .entry-content .ex-r-d-pr-set.ex-r-d-pr-set { padding-right: var(--ex-r-d-pr); }
body.page:not(.home) .exr-main .ex-r-d-pb-set.ex-r-d-pb-set,
body.single-post .entry-content .ex-r-d-pb-set.ex-r-d-pb-set { padding-bottom: var(--ex-r-d-pb); }
body.page:not(.home) .exr-main .ex-r-d-pl-set.ex-r-d-pl-set,
body.single-post .entry-content .ex-r-d-pl-set.ex-r-d-pl-set { padding-left: var(--ex-r-d-pl); }
@media (min-width: 601px) and (max-width: 1024px) {
.ex-r-t-mt-set { margin-top: var(--ex-r-t-mt) !important; }
.ex-r-t-mr-set { margin-right: var(--ex-r-t-mr) !important; }
.ex-r-t-mb-set { margin-bottom: var(--ex-r-t-mb) !important; }
.ex-r-t-ml-set { margin-left: var(--ex-r-t-ml) !important; }
.ex-r-t-pt-set { padding-top: var(--ex-r-t-pt) !important; }
.ex-r-t-pr-set { padding-right: var(--ex-r-t-pr) !important; }
.ex-r-t-pb-set { padding-bottom: var(--ex-r-t-pb) !important; }
.ex-r-t-pl-set { padding-left: var(--ex-r-t-pl) !important; }
body.page:not(.home) .exr-main .ex-r-t-mt-set.ex-r-t-mt-set,
body.single-post .entry-content .ex-r-t-mt-set.ex-r-t-mt-set { margin-top: var(--ex-r-t-mt); }
body.page:not(.home) .exr-main .ex-r-t-mr-set.ex-r-t-mr-set,
body.single-post .entry-content .ex-r-t-mr-set.ex-r-t-mr-set { margin-right: var(--ex-r-t-mr); }
body.page:not(.home) .exr-main .ex-r-t-mb-set.ex-r-t-mb-set,
body.single-post .entry-content .ex-r-t-mb-set.ex-r-t-mb-set { margin-bottom: var(--ex-r-t-mb); }
body.page:not(.home) .exr-main .ex-r-t-ml-set.ex-r-t-ml-set,
body.single-post .entry-content .ex-r-t-ml-set.ex-r-t-ml-set { margin-left: var(--ex-r-t-ml); }
body.page:not(.home) .exr-main .ex-r-t-pt-set.ex-r-t-pt-set,
body.single-post .entry-content .ex-r-t-pt-set.ex-r-t-pt-set { padding-top: var(--ex-r-t-pt); }
body.page:not(.home) .exr-main .ex-r-t-pr-set.ex-r-t-pr-set,
body.single-post .entry-content .ex-r-t-pr-set.ex-r-t-pr-set { padding-right: var(--ex-r-t-pr); }
body.page:not(.home) .exr-main .ex-r-t-pb-set.ex-r-t-pb-set,
body.single-post .entry-content .ex-r-t-pb-set.ex-r-t-pb-set { padding-bottom: var(--ex-r-t-pb); }
body.page:not(.home) .exr-main .ex-r-t-pl-set.ex-r-t-pl-set,
body.single-post .entry-content .ex-r-t-pl-set.ex-r-t-pl-set { padding-left: var(--ex-r-t-pl); }
}
@media (max-width: 600px) {
.ex-r-m-mt-set { margin-top: var(--ex-r-m-mt) !important; }
.ex-r-m-mr-set { margin-right: var(--ex-r-m-mr) !important; }
.ex-r-m-mb-set { margin-bottom: var(--ex-r-m-mb) !important; }
.ex-r-m-ml-set { margin-left: var(--ex-r-m-ml) !important; }
.ex-r-m-pt-set { padding-top: var(--ex-r-m-pt) !important; }
.ex-r-m-pr-set { padding-right: var(--ex-r-m-pr) !important; }
.ex-r-m-pb-set { padding-bottom: var(--ex-r-m-pb) !important; }
.ex-r-m-pl-set { padding-left: var(--ex-r-m-pl) !important; }
body.page:not(.home) .exr-main .ex-r-m-mt-set.ex-r-m-mt-set,
body.single-post .entry-content .ex-r-m-mt-set.ex-r-m-mt-set { margin-top: var(--ex-r-m-mt); }
body.page:not(.home) .exr-main .ex-r-m-mr-set.ex-r-m-mr-set,
body.single-post .entry-content .ex-r-m-mr-set.ex-r-m-mr-set { margin-right: var(--ex-r-m-mr); }
body.page:not(.home) .exr-main .ex-r-m-mb-set.ex-r-m-mb-set,
body.single-post .entry-content .ex-r-m-mb-set.ex-r-m-mb-set { margin-bottom: var(--ex-r-m-mb); }
body.page:not(.home) .exr-main .ex-r-m-ml-set.ex-r-m-ml-set,
body.single-post .entry-content .ex-r-m-ml-set.ex-r-m-ml-set { margin-left: var(--ex-r-m-ml); }
body.page:not(.home) .exr-main .ex-r-m-pt-set.ex-r-m-pt-set,
body.single-post .entry-content .ex-r-m-pt-set.ex-r-m-pt-set { padding-top: var(--ex-r-m-pt); }
body.page:not(.home) .exr-main .ex-r-m-pr-set.ex-r-m-pr-set,
body.single-post .entry-content .ex-r-m-pr-set.ex-r-m-pr-set { padding-right: var(--ex-r-m-pr); }
body.page:not(.home) .exr-main .ex-r-m-pb-set.ex-r-m-pb-set,
body.single-post .entry-content .ex-r-m-pb-set.ex-r-m-pb-set { padding-bottom: var(--ex-r-m-pb); }
body.page:not(.home) .exr-main .ex-r-m-pl-set.ex-r-m-pl-set,
body.single-post .entry-content .ex-r-m-pl-set.ex-r-m-pl-set { padding-left: var(--ex-r-m-pl); }
}
/* @section card-icon-image
.ex-page-card 内の wp:image を 56×56 のカードアイコンとして表示 (旧 .ex-card-icon 継承) */
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card > .wp-block-image,
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card > figure.wp-block-image {
width: 56px;
height: 56px;
margin: 0.5rem auto 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card > .wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
display: block;
max-width: 100%;
}
/* @section button-card-style
core/button の block style 「card-button」 (is-style-card-button)
旧 .ex-card-button のミニマル線アウトラインを移植。
矢印は ::after 擬似要素で mask-image 差し替え (Iconify lucide:chevrons-right) */
.wp-block-button.is-style-card-button { margin: 0; }
.wp-block-button.is-style-card-button > .wp-block-button__link,
.wp-block-button.is-style-card-button > .wp-block-button__link.wp-element-button,
a.wp-block-read-more.is-style-card-button,
body.page:not(.home) .exr-main .wp-block-button.is-style-card-button > .wp-block-button__link,
body.page:not(.home) .exr-main a.wp-block-read-more.is-style-card-button,
body.single-post .entry-content .wp-block-button.is-style-card-button > .wp-block-button__link,
body.single-post .entry-content a.wp-block-read-more.is-style-card-button {
display: inline-flex !important;
align-items: center;
gap: 0.5em;
padding: 0.55rem 1.1rem !important;
border: 1px solid var(--color-text-muted, var(--wp--preset--color--text-muted)) !important;
border-radius: 999px !important;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
text-decoration: none !important;
color: var(--color-text-primary, var(--wp--preset--color--text-primary)) !important;
background: none !important;
background-color: transparent !important;
transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.wp-block-button.is-style-card-button > .wp-block-button__link::after,
a.wp-block-read-more.is-style-card-button::after {
content: '';
display: inline-block;
width: 0.9em;
height: 0.9em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: url('https://api.iconify.design/lucide:chevrons-right.svg');
mask-image: url('https://api.iconify.design/lucide:chevrons-right.svg');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform 200ms ease;
}
.wp-block-button.is-style-card-button > .wp-block-button__link:hover,
.wp-block-button.is-style-card-button > .wp-block-button__link.wp-element-button:hover,
a.wp-block-read-more.is-style-card-button:hover,
body.page:not(.home) .exr-main .wp-block-button.is-style-card-button > .wp-block-button__link:hover,
body.page:not(.home) .exr-main a.wp-block-read-more.is-style-card-button:hover,
body.single-post .entry-content .wp-block-button.is-style-card-button > .wp-block-button__link:hover,
body.single-post .entry-content a.wp-block-read-more.is-style-card-button:hover {
border-color: var(--color-text-primary, var(--wp--preset--color--text-primary)) !important;
background: var(--color-text-primary, var(--wp--preset--color--text-primary)) !important;
background-color: var(--color-text-primary, var(--wp--preset--color--text-primary)) !important;
color: var(--color-bg-base, var(--wp--preset--color--surface)) !important;
text-decoration: none !important;
}
.wp-block-button.is-style-card-button > .wp-block-button__link:hover::after,
a.wp-block-read-more.is-style-card-button:hover::after {
transform: translateX(2px);
}
/* .ex-page-card 内の .wp-block-buttons をカード下部に寄せる */
body.page:not(.home) .exr-main .wp-block-columns .ex-page-card .wp-block-buttons {
margin-top: auto;
padding-top: 0.75rem;
justify-content: flex-start;
}
/* ============================================================
* @section features-3col-card-equalize
* features-3col パターンのカード高さを flex で揃え、最下段ボタンを下端に固定する。
* :has() は WP 6.0+ で全モダンブラウザサポート済み (Safari 16+ / Chrome 105+ / Firefox 121+)。
* ========================================================= */
.wp-block-columns > .wp-block-column:has(> .ex-feature-card) {
display: flex;
}
.wp-block-columns > .wp-block-column > .ex-feature-card {
flex: 1;
display: flex;
flex-direction: column;
}
.wp-block-columns > .wp-block-column > .ex-feature-card > .wp-block-buttons {
margin-block-start: auto;
}
/* =========================================================================
.exr-page-eyebrow (grevia/page-eyebrow ブロック)
------------------------------------------------------------------------
ページタイトルの上に表示される小さいラベル。 3 層 cascade で解決されたテキストが
ここで表示される。 既存 .ex-section-eyebrow / .exr-eyebrow と心象裢裂した
デザイン (small / uppercase / letter-spacing / text-muted / 中央揃え) を踏襲。
========================================================================= */
/* page-eyebrow ブロック: スタイリングは theme.json (styles.blocks["grevia/page-eyebrow"]) でデフォルト定義され、 Site Editor でブロック個別に上書き可能。 ここでは text-align のみ補完 (theme.json には textAlign supports がない)。 */
.exr-page-eyebrow {
text-align: center;
}
/* Title group — タイトル + Eyebrow を flex コンテナで包み、 data-position でタイトルの上 / 下を入れ替える。 */
.exr-page-title-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.exr-page-title-group > .exr-page-eyebrow[data-position="below"] {
order: 1;
}
.exr-page-title-group > .wp-block-post-title,
.exr-page-title-group > .wp-block-query-title,
.exr-page-title-group > .wp-block-heading,
.exr-page-title-group > h1,
.exr-page-title-group > .ex-page-title,
.exr-page-title-group > .ex-post-title,
.exr-page-title-group > .ex-archive-title {
margin-block: 0;
/* Phase 3: 配置は --exr-title-align (4 層 cascade で dynamic-css.php が解決) で制御。
Layer 1 default は 'center' なので、設定変更前は従来通り中央寄せのまま。 */
text-align: var(--exr-title-align, center);
}
/* Phase 4: アーカイブ description (core/term-description ブロック) を
title-group 内に取り込み、タイトル配置に連動 + サイズ・フォントは独立 cascade で制御。
空 description は inc/dynamic/term-description.php の render フィルタで空文字に置換されるため、
このセレクタはマッチせず余白も発生しない (空コンテナの margin 問題を回避)。 */
.exr-page-title-group > .wp-block-term-description {
margin-block-start: 0.75rem;
margin-block-end: 0;
/* 配置: タイトル配置 cascade に連動 */
text-align: var(--exr-title-align, center);
/* サイズ: Layer 1 (general) / Layer 3 (term meta) cascade で解決された slug を --exr-fs-* で消費 */
font-size: var(--exr-description-size, var(--exr-fs-base));
/* フォント: 設定が 'inherit' なら本文と同じ。指定があれば見出しフォント一覧から */
font-family: var(--exr-description-font, inherit);
/* 色は secondary text (副次的に弱める) */
color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
line-height: 1.75;
}
.exr-page-title-group > .exr-page-eyebrow {
margin-block: 0;
}
/* ==========================================================================
下マージン無効化 (core/paragraph + core/heading 拡張)
assets/js/margin-controls.js が付与する is-exr-no-margin-below--{both|self|next}
クラスに対する 4 ルール。WP 標準の block_gap (= 次要素 margin-block-start)
由来も、稀にある margin-bottom 直書き由来も両方止められる。
========================================================================== */
.is-exr-no-margin-below--both,
.is-exr-no-margin-below--self {
margin-block-end: 0 !important;
}
.is-exr-no-margin-below--both + *,
.is-exr-no-margin-below--next + * {
margin-block-start: 0 !important;
}