/* ===== ブロックデザインプリセット ===== * .oc-page-content / .editor-styles-wrapper 内の WordPress 標準ブロックに * サイト全体で統一されたデザインを適用する。 * * プリセットはで切り替わり、 * CSS カスタムプロパティのセットが変わる仕組み。 * * 新しいプリセットを追加するには: * 1. .oc-style--pattern-N セクションをコピーして変数を書き換え * 2. ACF「ブロックデザインプリセット」の choices に追加 */ /* ===== Pattern 1: 背景ベタ塗り見出し・角丸 ===== */ .oc-style--pattern-1 { /* h2 */ --oc-h2-color: #fff; --oc-h2-bg: var(--wp--preset--color--primary, #33ADC7); --oc-h2-radius: 1.25rem; --oc-h2-padding: 1.25rem 2.375rem; --oc-h2-border: none; --oc-h2-border-left: none; --oc-h2-border-bottom: none; /* h3 */ --oc-h3-color: inherit; --oc-h3-bg: transparent; --oc-h3-border-left: 4px solid var(--wp--preset--color--primary, #33ADC7); --oc-h3-padding: 0.125rem 1.1875rem 0.3125rem; --oc-h3-after-border: 3px dotted var(--wp--preset--color--primary, #33ADC7); --oc-h3-after-bottom: -1rem; /* h4 */ --oc-h4-color: inherit; --oc-h4-border-bottom: 1px dashed var(--wp--preset--color--primary, #33ADC7); --oc-h4-padding-bottom: 0.875rem; /* h5 */ --oc-h5-color: var(--wp--preset--color--primary, #33ADC7); /* リスト */ --oc-list-marker-bg: var(--wp--preset--color--primary, #33ADC7); --oc-list-marker-radius: 50%; --oc-list-marker-width: 0.625rem; --oc-list-marker-height: 0.625rem; /* テーブル */ --oc-table-radius: 1rem; --oc-table-th-bg: var(--wp--preset--color--primary, #33ADC7); --oc-table-th-color: #fff; --oc-table-td-bg: #f8f8f8; --oc-table-td-first-bg: #e3f3f6; /* 画像・グループ */ --oc-img-radius: 1.25rem; --oc-group-radius: 1.25rem; /* セパレーター */ --oc-separator-border: 2px dashed #c0d7db; } /* ===== Pattern 2: 左ボーダーアクセント（shika-tanaka.com 系） ===== */ .oc-style--pattern-2 { /* h2 */ --oc-h2-color: inherit; --oc-h2-bg: transparent; --oc-h2-radius: 0; --oc-h2-padding: 0.75rem 0 0.75rem 1rem; --oc-h2-border: none; --oc-h2-border-left: 5px solid var(--wp--preset--color--primary, #25acbe); --oc-h2-border-bottom: none; /* h3 */ --oc-h3-color: inherit; --oc-h3-bg: var(--wp--preset--color--background-alt, #f8f9fa); --oc-h3-border-left: 4px solid var(--wp--preset--color--primary, #25acbe); --oc-h3-padding: 0.625rem 1rem; --oc-h3-after-border: none; --oc-h3-after-bottom: 0; /* h4 */ --oc-h4-color: var(--wp--preset--color--primary, #25acbe); --oc-h4-border-bottom: 2px solid var(--wp--preset--color--border, #dee2e6); --oc-h4-padding-bottom: 0.5rem; /* h5 */ --oc-h5-color: var(--wp--preset--color--primary, #25acbe); /* リスト */ --oc-list-marker-bg: var(--wp--preset--color--primary, #25acbe); --oc-list-marker-radius: 2px; --oc-list-marker-width: 0.5rem; --oc-list-marker-height: 0.5rem; /* テーブル */ --oc-table-radius: 0; --oc-table-th-bg: var(--wp--preset--color--primary, #25acbe); --oc-table-th-color: #fff; --oc-table-td-bg: #fff; --oc-table-td-first-bg: var(--wp--preset--color--background-alt, #f8f9fa); /* 画像・グループ */ --oc-img-radius: 0.5rem; --oc-group-radius: 0.5rem; /* セパレーター */ --oc-separator-border: 1px solid var(--wp--preset--color--border, #dee2e6); } /* ===== Pattern 3: 下線ミニマル（shibuya-shinbi.jp 系） ===== */ .oc-style--pattern-3 { /* h2 */ --oc-h2-color: inherit; --oc-h2-bg: transparent; --oc-h2-radius: 0; --oc-h2-padding: 0 0 1rem 0; --oc-h2-border: none; --oc-h2-border-left: none; --oc-h2-border-bottom: 2px solid var(--wp--preset--color--primary, #233b68); /* h3 */ --oc-h3-color: inherit; --oc-h3-bg: transparent; --oc-h3-border-left: none; --oc-h3-padding: 0 0 0.625rem 0; --oc-h3-border-bottom: 1px solid var(--wp--preset--color--border, #dee2e6); --oc-h3-after-border: none; --oc-h3-after-bottom: 0; /* h4 */ --oc-h4-color: inherit; --oc-h4-border-bottom: none; --oc-h4-padding-bottom: 0; /* h5 */ --oc-h5-color: var(--wp--preset--color--text-muted, #707070); /* リスト */ --oc-list-marker-bg: var(--wp--preset--color--text, #212529); --oc-list-marker-radius: 50%; --oc-list-marker-width: 0.375rem; --oc-list-marker-height: 0.375rem; /* テーブル */ --oc-table-radius: 0; --oc-table-th-bg: var(--wp--preset--color--text, #212529); --oc-table-th-color: #fff; --oc-table-td-bg: #fff; --oc-table-td-first-bg: #fff; /* 画像・グループ */ --oc-img-radius: 0; --oc-group-radius: 0; /* セパレーター */ --oc-separator-border: 1px solid var(--wp--preset--color--border, #dee2e6); } /* ===== Pattern 4: ドットライン（akitsu-dental.com 系） ===== */ .oc-style--pattern-4 { /* h2 */ --oc-h2-color: var(--wp--preset--color--primary, #0A4B8B); --oc-h2-bg: transparent; --oc-h2-radius: 0; --oc-h2-padding: 0 0 0.875rem 0; --oc-h2-border: none; --oc-h2-border-left: none; --oc-h2-border-bottom: 3px double var(--wp--preset--color--primary, #0A4B8B); /* h3 */ --oc-h3-color: inherit; --oc-h3-bg: transparent; --oc-h3-border-left: 3px solid var(--wp--preset--color--primary, #0A4B8B); --oc-h3-padding: 0.25rem 0 0.25rem 0.875rem; --oc-h3-after-border: none; --oc-h3-after-bottom: 0; /* h4 */ --oc-h4-color: inherit; --oc-h4-border-bottom: 1px dotted var(--wp--preset--color--secondary, #959FB1); --oc-h4-padding-bottom: 0.625rem; /* h5 */ --oc-h5-color: var(--wp--preset--color--primary, #0A4B8B); /* リスト */ --oc-list-marker-bg: var(--wp--preset--color--primary, #0A4B8B); --oc-list-marker-radius: 50%; --oc-list-marker-width: 0.5rem; --oc-list-marker-height: 0.5rem; /* テーブル */ --oc-table-radius: 0.5rem; --oc-table-th-bg: var(--wp--preset--color--primary, #0A4B8B); --oc-table-th-color: #fff; --oc-table-td-bg: #fff; --oc-table-td-first-bg: #eef2f7; /* 画像・グループ */ --oc-img-radius: 0.75rem; --oc-group-radius: 0.75rem; /* セパレーター */ --oc-separator-border: 2px dotted var(--wp--preset--color--secondary, #959FB1); } /* ===== 共通スタイル（変数を参照） ===== */ /* ----- h2 ----- */ .oc-page-content h2.wp-block-heading, .editor-styles-wrapper h2.wp-block-heading { font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: 0.1em; color: var(--oc-h2-color, inherit); background: var(--oc-h2-bg, transparent); border-radius: var(--oc-h2-radius, 0); padding: var(--oc-h2-padding, 0); border: var(--oc-h2-border, none); border-left: var(--oc-h2-border-left, none); border-bottom: var(--oc-h2-border-bottom, none); margin-top: 4rem; margin-bottom: 2.25rem; } /* ----- h3 ----- */ .oc-page-content h3.wp-block-heading, .editor-styles-wrapper h3.wp-block-heading { position: relative; font-size: 2rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; color: var(--oc-h3-color, inherit); background: var(--oc-h3-bg, transparent); border-left: var(--oc-h3-border-left, none); border-bottom: var(--oc-h3-border-bottom, none); padding: var(--oc-h3-padding, 0); margin-top: 4rem; margin-bottom: 2.25rem; } .oc-page-content h3.wp-block-heading::before, .editor-styles-wrapper h3.wp-block-heading::before { content: ""; position: absolute; width: 100%; height: 100%; bottom: var(--oc-h3-after-bottom, -1rem); left: 0; border-bottom: var(--oc-h3-after-border, none); pointer-events: none; } /* ----- h4 ----- */ .oc-page-content h4.wp-block-heading, .editor-styles-wrapper h4.wp-block-heading { font-size: 1.5rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; color: var(--oc-h4-color, inherit); border-bottom: var(--oc-h4-border-bottom, none); padding-bottom: var(--oc-h4-padding-bottom, 0); margin-top: 3.4375rem; margin-bottom: 1.0625rem; } /* ----- h5 ----- */ .oc-page-content h5.wp-block-heading, .editor-styles-wrapper h5.wp-block-heading { font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.1em; color: var(--oc-h5-color, inherit); margin-top: 2.5rem; margin-bottom: 1rem; } /* ----- h6 ----- */ .oc-page-content h6.wp-block-heading, .editor-styles-wrapper h6.wp-block-heading { font-size: 1.125rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; margin-top: 2rem; margin-bottom: 0.75rem; } /* ----- 段落 ----- */ .oc-page-content > .wp-block-paragraph, .oc-page-content .wp-block-group p:not([class*="__"]), .oc-page-content .wp-block-column p:not([class*="__"]), .editor-styles-wrapper .wp-block-paragraph { font-size: 1.25rem; font-weight: 500; line-height: 2; letter-spacing: 0.05em; margin-top: 0; margin-bottom: 1.5rem; } .oc-page-content .wp-block-heading + .wp-block-paragraph { margin-top: 0; } /* ----- リスト ----- */ .oc-page-content ul.wp-block-list, .oc-page-content ol.wp-block-list, .editor-styles-wrapper ul.wp-block-list { margin-top: 1.375rem; margin-bottom: 1.5rem; padding-left: 0; list-style: none; } .oc-page-content ol.wp-block-list { list-style: decimal; padding-left: 1.375rem; } .oc-page-content .wp-block-list > li, .editor-styles-wrapper .wp-block-list > li { position: relative; font-size: 1.125rem; font-weight: 500; line-height: 2; letter-spacing: 0.05em; padding-left: 1.375rem; } .oc-page-content ol.wp-block-list > li { padding-left: 0; } .oc-page-content ul.wp-block-list > li::before, .editor-styles-wrapper ul.wp-block-list > li::before { content: ""; position: absolute; width: var(--oc-list-marker-width, 0.625rem); height: var(--oc-list-marker-height, 0.625rem); top: 0.65em; left: 0; background: var(--oc-list-marker-bg, currentColor); border-radius: var(--oc-list-marker-radius, 50%); } .oc-page-content .wp-block-list > li:not(:first-child) { margin-top: 0.5rem; } /* ----- テーブル ----- */ .oc-page-content .wp-block-table { margin-top: 2.125rem; margin-bottom: 1.5rem; overflow: auto; border-radius: var(--oc-table-radius, 0); } .oc-page-content .wp-block-table table, .editor-styles-wrapper .wp-block-table table { width: 100%; border-collapse: collapse; margin: 0; } .oc-page-content .wp-block-table th, .editor-styles-wrapper .wp-block-table th { font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.3em; color: var(--oc-table-th-color, #fff); background: var(--oc-table-th-bg, currentColor); padding: 1.25rem 2rem; border-left: 1px solid #fff; text-align: left; } .oc-page-content .wp-block-table th:first-child, .editor-styles-wrapper .wp-block-table th:first-child { border-left: none; } .oc-page-content .wp-block-table td, .editor-styles-wrapper .wp-block-table td { font-size: 1.125rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; background: var(--oc-table-td-bg, #f8f8f8); border-left: 1px solid #fff; border-bottom: 1px solid #fff; padding: 1.125rem 2rem; } .oc-page-content .wp-block-table td:first-child, .editor-styles-wrapper .wp-block-table td:first-child { background: var(--oc-table-td-first-bg, #e3f3f6); border-left: none; text-align: center; } .oc-page-content .wp-block-table tr:last-child td { border-bottom: none; } /* ----- 画像 ----- */ .oc-page-content .wp-block-image { margin-top: 2rem; margin-bottom: 2rem; } .oc-page-content .wp-block-image img, .editor-styles-wrapper .wp-block-image img { border-radius: var(--oc-img-radius, 0); } /* ----- カラム ----- */ .oc-page-content .wp-block-columns { gap: 2.5rem; margin-top: 2rem; margin-bottom: 2rem; } /* ----- グループブロック背景 ----- */ .oc-page-content .wp-block-group.has-background, .editor-styles-wrapper .wp-block-group.has-background { border-radius: var(--oc-group-radius, 0); padding: 2.5rem 3rem; margin-top: 2rem; margin-bottom: 2rem; } /* ----- セパレーター ----- */ .oc-page-content .wp-block-separator, .editor-styles-wrapper .wp-block-separator { border-top: var(--oc-separator-border, 2px dashed #c0d7db); margin-top: 2.5rem; margin-bottom: 2.5rem; opacity: 1; } /* ===== レスポンシブ (768px以下) ===== */ @media (max-width: 768px) { /* pattern-1 用のスマホ固有値 */ .oc-style--pattern-1 { --oc-h2-radius: 2.56vw; --oc-h2-padding: 4.62vw 5.13vw; --oc-h3-padding: 1.54vw 4.87vw; --oc-h3-after-bottom: -3.08vw; --oc-img-radius: 2.56vw; --oc-group-radius: 2.56vw; } .oc-page-content h2.wp-block-heading { font-size: 6.15vw; margin-top: 8.21vw; margin-bottom: 6.67vw; } .oc-page-content h3.wp-block-heading { font-size: 5.13vw; margin-top: 8.21vw; margin-bottom: 6.67vw; } .oc-page-content h4.wp-block-heading { font-size: 4.62vw; margin-top: 6.15vw; margin-bottom: 2.82vw; } .oc-page-content h5.wp-block-heading { font-size: 4.62vw; margin-top: 6.15vw; margin-bottom: 2.56vw; } .oc-page-content h6.wp-block-heading { font-size: 4.1vw; margin-top: 5vw; margin-bottom: 2vw; } .oc-page-content > .wp-block-paragraph, .oc-page-content .wp-block-group p:not([class*="__"]), .oc-page-content .wp-block-column p:not([class*="__"]) { font-size: 4.1vw; line-height: 1.88; } .oc-page-content .wp-block-list > li { font-size: 4.1vw; line-height: 1.5; padding-left: 5.64vw; } .oc-page-content ul.wp-block-list > li::before { width: 2.56vw; height: 2.56vw; top: 1.54vw; } .oc-page-content .wp-block-table th { font-size: 4.62vw; padding: 5.13vw; letter-spacing: 0.1em; } .oc-page-content .wp-block-table td { font-size: 3.59vw; padding: 4.1vw; } .oc-page-content .wp-block-columns { gap: 5.64vw; } .oc-page-content .wp-block-group.has-background { padding: 6.15vw 4.1vw; } } /* ----- プライバシーポリシー: 長文向けに文字サイズを抑える ----- */ .oc-page-content--privacy > .wp-block-paragraph, .oc-page-content--privacy .wp-block-group p:not([class*="__"]), .oc-page-content--privacy .wp-block-column p:not([class*="__"]) { font-size: 1rem; font-weight: 400; line-height: 1.9; letter-spacing: 0.03em; margin-bottom: 1rem; } .oc-page-content--privacy h2.wp-block-heading { font-size: 1.75rem; line-height: 1.45; letter-spacing: 0.05em; margin-top: 3rem; margin-bottom: 1.5rem; } .oc-page-content--privacy h3.wp-block-heading { font-size: 1.375rem; letter-spacing: 0.05em; margin-top: 2.5rem; margin-bottom: 1.5rem; } .oc-page-content--privacy h4.wp-block-heading { font-size: 1.125rem; letter-spacing: 0.05em; margin-top: 2rem; } .oc-page-content--privacy .wp-block-list > li { font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.03em; } .oc-page-content--privacy ul.wp-block-list, .oc-page-content--privacy ol.wp-block-list { margin-left: 0.75em; } .oc-page-content--privacy .wp-block-list a[href^="http"] { word-wrap: break-word; overflow-wrap: break-word; overflow-wrap: anywhere; word-break: normal; } .oc-page-content--privacy ul.wp-block-list > li::before { width: 0.5rem; height: 0.5rem; top: 0.7em; } @media (max-width: 768px) { .oc-page-content--privacy > .wp-block-paragraph, .oc-page-content--privacy .wp-block-group p:not([class*="__"]), .oc-page-content--privacy .wp-block-column p:not([class*="__"]) { font-size: 0.9375rem; line-height: 1.85; } .oc-page-content--privacy h2.wp-block-heading { font-size: 1.25rem; line-height: 1.45; margin-top: 2.5rem; margin-bottom: 1.25rem; } .oc-page-content--privacy h3.wp-block-heading { font-size: 1.125rem; margin-top: 2rem; margin-bottom: 1.25rem; } .oc-page-content--privacy h4.wp-block-heading { font-size: 1rem; margin-top: 1.75rem; } .oc-page-content--privacy .wp-block-list > li { font-size: 0.9375rem; line-height: 1.75; padding-left: 1.25rem; } .oc-page-content--privacy ul.wp-block-list, .oc-page-content--privacy ol.wp-block-list { margin-left: 0.5em; } .oc-page-content--privacy .wp-block-list a[href^="http"] { display: block; margin-top: 0.1em; } .oc-page-content--privacy ul.wp-block-list > li::before { width: 0.4375rem; height: 0.4375rem; top: 0.72em; } }