/* ===== ブロックデザインプリセット ===== * .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: 16px; --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); } @media screen and (max-width:767px) { :root { --wp--preset--spacing--xl: 1.2em!important; } } /* ===== 共通スタイル（変数を参照） ===== */ .editor-styles-wrapper { --font-color: #5E4628; --link-color: #71BB42; } .oc-page-content h2.wp-block-heading, .oc-page-content h3.wp-block-heading, .oc-page-content h4.wp-block-heading, .oc-page-content h5.wp-block-heading, .editor-styles-wrapper h2.wp-block-heading, .editor-styles-wrapper h3.wp-block-heading, .editor-styles-wrapper h4.wp-block-heading, .editor-styles-wrapper h5.wp-block-heading { font-family: "Zen Kaku Gothic New", sans-serif; } /* ----- h2 ----- */ .oc-page-content h2.wp-block-heading, .editor-styles-wrapper h2.wp-block-heading { position: relative; margin: 0 calc(clamp(0px, calc(-149.630px + 14.815vw), 40px) * -1); margin-top: clamp(15px, calc(5.385px + 1.923vw), 30px); margin-bottom: clamp(40px, calc(24.615px + 3.077vw), 64px); padding: 0 0 24px 24px; color: var(--link-color); font-size: clamp(22px, calc(15.590px + 1.282vw), 32px); font-weight: 700; line-height: 1.5; letter-spacing: 0; border-bottom: var(--link-color) 2px dashed; } .oc-page-content h2.wp-block-heading::before, .editor-styles-wrapper h2.wp-block-heading::before { content: ""; position: absolute; top: 4px; left: 0; width: 5px; height: clamp(28px, calc(20.308px + 1.538vw), 40px); background: var(--link-color); } /* ----- h3 ----- */ .oc-page-content h3.wp-block-heading, .editor-styles-wrapper h3.wp-block-heading { margin: clamp(32px, calc(21.744px + 2.051vw), 48px) 0 48px; padding: 0 0 20px; color: var(--link-color); font-size: 24px; font-weight: 700; line-height: 1.333; letter-spacing: 0.1em; border-bottom: var(--link-color) 2px dotted; } /* ----- h4 ----- */ .oc-page-content h4.wp-block-heading, .editor-styles-wrapper h4.wp-block-heading { display: flex; align-items: center; gap: 10px; margin: clamp(32px, calc(21.744px + 2.051vw), 48px) 0 32px; padding: 0; color: var(--link-color); font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 0; border: 0; } .oc-page-content h4.wp-block-heading::before, .editor-styles-wrapper h4.wp-block-heading::before { content: ""; flex: 0 0 3px; width: 3px; height: 28px; background: var(--link-color); } /* ----- h5 ----- */ .oc-page-content h5.wp-block-heading, .editor-styles-wrapper h5.wp-block-heading { display: flex; align-items: center; gap: 10px; margin: clamp(24px, calc(13.744px + 2.051vw), 40px) 0 24px; padding: 0; color: var(--link-color); font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0; border: 0; } .oc-page-content h5.wp-block-heading::before, .editor-styles-wrapper h5.wp-block-heading::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; background: var(--link-color); } /* ----- h6 ----- */ .oc-page-content h6.wp-block-heading, .editor-styles-wrapper h6.wp-block-heading { color: var(--link-color); font-size: clamp(16px, calc(14.718px + 0.256vw), 18px); font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; margin-top: clamp(25px, calc(8.974px + 3.205vw), 50px); margin-bottom: clamp(10px, calc(3.590px + 1.282vw), 20px); } .oc-page-content h6.wp-block-heading:before, .editor-styles-wrapper h6.wp-block-heading:before{ content: '■'; display: inline-block; margin-right: 5px; font-size: 12px; transform: translateY(-3px); } /* ----- 段落 ----- */ .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: 16px; font-weight: 500; line-height: 1.7; letter-spacing: 0; margin-top: 0; margin-bottom: 32px; } .oc-page-content .wp-block-heading + .wp-block-paragraph { margin-top: 0; } /* 段落の後に始まる大見出しは、セクション間の余白を確保する */ .oc-page-content > .wp-block-paragraph + h2.wp-block-heading, .editor-styles-wrapper .wp-block-paragraph + h2.wp-block-heading { margin-top: clamp(40px, calc(28px + 3.077vw), 64px); } /* ----- リスト ----- */ .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: 16px; font-weight: 500; line-height: 1.7; letter-spacing: 0; padding-left: 1.2rem; } .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: 10px; aspect-ratio: 1 / 1; top: 0.5em; left: 0; background: var(--link-color); 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; } .oc-page-content .wp-block-table table, .editor-styles-wrapper .wp-block-table table { border-collapse: collapse; margin: 0; width: auto; } .oc-page-content .wp-block-table th, .editor-styles-wrapper .wp-block-table th, .oc-page-content .wp-block-table td, .editor-styles-wrapper .wp-block-table td { font-size: 16px; line-height: 1.7; text-align: center; border: none; border-right: #fffaee 4px solid; border-bottom: #fffaee 4px solid; } .oc-page-content .wp-block-table th, .editor-styles-wrapper .wp-block-table th { padding: 12px 8px; color: #fff; font-weight: 700; background: var(--link-color); } .oc-page-content .wp-block-table td, .editor-styles-wrapper .wp-block-table td { padding: 16px 10px; font-weight: 500; background: #EEF4E2; } /* .editor-styles-wrapper .wp-block-table td:first-child */ .oc-page-content .wp-block-table tr:last-child td { border-bottom: none; } .oc-page-content .wp-block-table th:last-child, .oc-page-content .wp-block-table td:last-child { border-right: none; } /* ----- 画像 ----- */ .oc-page-content .wp-block-image { margin-top: clamp(30px, calc(10.769px + 3.846vw), 60px); margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px); } .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-group, .oc-page-content .wp-block-columns { gap: 2.5rem; margin-top: clamp(30px, calc(10.769px + 3.846vw), 60px); margin-bottom: clamp(40px, calc(14.359px + 5.128vw), 80px); } /* ----- グループブロック背景 ----- */ .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, .editor-styles-wrapper h2.wp-block-heading { margin-top: 8.21vw; margin-bottom: 6.67vw; font-size: 24px; } .oc-page-content h3.wp-block-heading, .editor-styles-wrapper h3.wp-block-heading { margin-top: 8.21vw; margin-bottom: 6.67vw; font-size: 20px; } .oc-page-content h4.wp-block-heading, .editor-styles-wrapper h4.wp-block-heading { margin-top: 6.15vw; margin-bottom: 2.82vw; font-size: 18px; } .oc-page-content h5.wp-block-heading { margin-top: 6.15vw; margin-bottom: 2.56vw; } .oc-page-content h6.wp-block-heading { 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*="__"]) { line-height: 1.88; } .oc-page-content .wp-block-list > li { line-height: 1.5; padding-left: clamp(16px, 4vw, 20px); } .oc-page-content .wp-block-table th { padding: 3vw; letter-spacing: 0.1em; } .oc-page-content .wp-block-table td { padding: 3vw; } .oc-page-content .wp-block-columns { gap: 5.64vw; } .oc-page-content .wp-block-group.has-background { padding: 6.15vw 4.1vw; } }