/* ============================================================= * wp-content.css * 旧 WordPress + VK Blocks の本番 HTML を Astro 側に取り込む際の * 最小限の独自スタイル。これだけで .vk_*, .wp-block-*, .has-* 系の * クラスがほぼ本番と同じ見た目になることを目指す。 * これまでセルフホストしていた public/css/wp/*.css は全廃。 * ============================================================= */ /* ===== スクロールバー透明化 ===== * 本番 (macOS Safari/Chrome の overlay scrollbar) と同じ見た目に揃える。 * Firefox は scrollbar-color、WebKit 系は ::-webkit-scrollbar で個別指定。 */ html { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) transparent; overflow-x: clip; } body { overflow-x: clip; } ::-webkit-scrollbar { width: 0; height: 0; background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); border-radius: 4px; } /* ===== Layout vars ===== */ :root { --wp-content-max: 1140px; /* WP コア spacing preset (theme.json 由来) — inline style で参照される。 preset--spacing--20 = 0.44rem, --30 = 0.75rem (本番の値) */ --wp--preset--spacing--20: 0.44rem; --wp--preset--spacing--30: 0.75rem; /* --40 から --70 は本番 (VK Blocks) と同じく --wp-margin-* に結ぶ。固定値だと幅によって変わる余白 (インライン style の margin・padding に var(--wp--preset--spacing--40) など) が小さい画面・中間の幅で本番とずれる (#113) */ --wp--preset--spacing--40: var(--wp-margin-sm); --wp--preset--spacing--50: var(--wp-margin-md); --wp--preset--spacing--60: var(--wp-margin-lg); --wp--preset--spacing--70: var(--wp-margin-xl); --wp--preset--spacing--80: 5.06rem; --wp-color-primary: #f39813; --wp-color-primary-dark: #c2790f; --wp-color-primary-vivid: #ffa714; --wp-color-text: #333; --wp-color-text-light: #666; --wp-color-border: #e5e5e5; --wp-color-bg-soft: #fafafa; --wp-margin-xs: 0.75rem; /* 575px 以下の値は本番 (VK Blocks) の --vk-margin-* に合わせる。sm 1.5rem・md 2.4rem は本番では ≤575px に使われない (#113) */ --wp-margin-sm: 1rem; --wp-margin-md: 3rem; --wp-margin-lg: 4rem; --wp-margin-xl: 6rem; } @media (min-width: 576px) { :root { --wp-margin-sm: 2rem; --wp-margin-md: 4rem; --wp-margin-lg: 5rem; } } @media (min-width: 992px) { :root { --wp-margin-sm: 3rem; --wp-margin-md: 5rem; --wp-margin-lg: 6rem; } } /* ===== Wrappers ===== */ .site-body { padding: 0; } .site-body-container.container { max-width: var(--wp-content-max); margin: 0 auto; padding: 0 15px; } .main-section { width: 100%; } /* 本番 (WP + Lightning theme) は、body の line-height が normal、本文の段落 (p) は 1.7 で、p の margin-bottom は 1.5rem （Playwright で測定、2026-10-20）。.entry-body 全体を 1.7 にするのは、見出し・リスト・p を 1.7 に揃えるための簡略化。 body が normal なのでボタン・表など、本番で normal のものは個別に normal へ戻している。 line-height を 1.9 にすると 1 行あたり 3px 増え、TOP 全体で 500〜800px の余分な縦幅になるので 1.7 に合わせる。 */ .entry-body { line-height: 1.7; color: var(--wp-color-text); } .entry-body > * + * { margin-top: 0; } .entry-body p { margin: 0 0 1.5rem; line-height: 1.7; } .entry-body h1, .entry-body h2, .entry-body h3, .entry-body h4 { line-height: 1.4; } .entry-body ul, .entry-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; } .entry-body li { margin-bottom: 0.4rem; } /* 本番の `.main-section { --vk-color-text-link: #eb5722 }` と `a { color: var(--vk-color-text-link) }`（ホバーも #eb5722）。下線は BaseLayout の `li a, p a` で付く（#165） */ .entry-body a { color: var(--color-link); } .entry-body img { max-width: 100%; height: auto; } /* ===== Alignment ===== */ .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; } .alignwide { margin-left: calc(50% - 45vw); margin-right: calc(50% - 45vw); width: 90vw; } .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; } .alignleft { float: left; margin-right: 1rem; } .alignright { float: right; margin-left: 1rem; } .has-text-align-center { text-align: center; } .has-text-align-left { text-align: left; } .has-text-align-right { text-align: right; } /* ===== Color tokens (Geolonia brand) ===== */ .has-vk-color-primary-color { color: var(--wp-color-primary); } .has-vk-color-primary-vivid-color { color: var(--wp-color-primary-vivid); } .has-vk-color-primary-dark-color { color: var(--wp-color-primary-dark); } .has-vk-color-primary-background-color { background-color: var(--wp-color-primary); } /* luminous-vivid-orange は WordPress のプリセット色。本番ではボタン・見出し・背景のどこでも #ff6900 で描画される */ .has-luminous-vivid-orange-color { color: #ff6900; } .has-luminous-vivid-orange-background-color { background-color: #ff6900; } .has-vk-color-primary-vivid-background-color { background-color: var(--wp-color-primary-vivid); } .has-luminous-vivid-amber-background-color { background-color: #fcb900; } .has-white-color { color: #fff; } .has-cyan-bluish-gray-color { color: #abb8c3; } .has-cyan-bluish-gray-background-color { background-color: #abb8c3; } .has-white-background-color { background-color: #fff; } .has-black-background-color { background-color: #000; } .has-text-color { /* text color is set via inline style or specific class */ } .has-background { /* nothing — inline style or specific class drives this */ } /* 線の種類 (WP コアの global-styles)。インライン style に border-width・border-color があれば、その辺を実線にする。 * 本番と同じ強さ (0,0,1)。線の色の class と html :where(.has-border-color) は下の「VK Blocks の部品」の節にある (#155・#163) */ html :where([style*="border-color"]) { border-style: solid; } html :where([style*="border-top-color"]) { border-top-style: solid; } html :where([style*="border-right-color"]) { border-right-style: solid; } html :where([style*="border-bottom-color"]) { border-bottom-style: solid; } html :where([style*="border-left-color"]) { border-left-style: solid; } html :where([style*="border-width"]) { border-style: solid; } html :where([style*="border-top-width"]) { border-top-style: solid; } html :where([style*="border-right-width"]) { border-right-style: solid; } html :where([style*="border-bottom-width"]) { border-bottom-style: solid; } html :where([style*="border-left-width"]) { border-left-style: solid; } /* VK Blocks の画像の枠 (is-style-vk-image-border)。色は本番の --vk-color-border-image (#e5e5e5) */ figure.wp-block-image.is-style-vk-image-border img { border: 1px solid #e5e5e5; } .wp-block-image.is-style-vk-image-border figure.alignleft img, .wp-block-image.is-style-vk-image-border figure.alignright img, .wp-block-image.is-style-vk-image-border figure.aligncenter img { border: 1px solid #e5e5e5; } /* 背景色つきの段落の内側の余白。本番 (WP 7 の global-styles) の `:root :where(p.has-background)`。強さ 0,1,0 なので、style の padding には負ける (#163) */ :root :where(p.has-background) { padding: 1.25em 2.375em; } /* ===== Font size ===== * 本番（WordPress の theme.json）と同じ px 固定の値。基準の文字サイズ（991px 以下は 14px）が * 変わっても縮まない。本番は !important で指定しているため、ページ側の指定に負けないよう * :root をつけて詳細度を上げる（!important は使わない）。 */ :root .has-large-font-size { font-size: 36px; } :root .has-huge-font-size { font-size: 36px; } :root .has-medium-font-size { font-size: 20px; } :root .has-small-font-size { font-size: 13px; } :root .has-regular-font-size { font-size: 16px; } /* ===== Group / Columns ===== */ .wp-block-group { box-sizing: border-box; } /* is-layout-flow の子要素間に大きな margin を付けると hero 内の縦間隔が 膨らみすぎるため、WP 規定 (`block-gap`) と同じく 0 にする。 余白が必要な箇所は .vk_spacer が個別に補う。 */ .wp-block-group.is-layout-flow > * + * { margin-top: 0; } .wp-block-group.is-layout-constrained { max-width: var(--wp-content-max); margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* alignfull は 100vw いっぱいを取り padding を持たない。 コンテンツ幅の制約は子要素側 (max-width: var(--wp-content-max)) で行う。 */ .wp-block-group.alignfull.is-layout-constrained { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 0; padding-right: 0; } .wp-block-group.alignfull.is-layout-constrained > * { max-width: var(--wp-content-max); margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* flex layout (.is-layout-flex 系) と is-content-justification-* は WP コアブロックが横並びの配置を表現するクラス。実績ロゴや マスコミ掲載などのロゴ列がこの組み合わせで使われている。 */ .wp-block-group.is-layout-flex, .wp-block-buttons.is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; /* 本番と同じ WP のプリセット（--wp--preset--spacing--30 = .75rem）。1.5rem だと幅 768px で実績のロゴが 3 つ並ばない */ gap: 0.75rem; } /* グループの中の最後の段落・リスト・段組みの下の余白は 0 (本番 VK Blocks の同名の指定)。 これがないと、グループやカバーの下に 24px の余白が余分に残る (#113) */ .wp-block-group p:last-child, .wp-block-group ul:last-child, .wp-block-group ol:last-child, .wp-block-group dl:last-child, .wp-block-group table:last-child, .wp-block-group .wp-block-columns:last-child { margin-bottom: 0; } /* WP の flex レイアウト直下の子は margin 0 (本番の `.is-layout-flex > :is(*, div) { margin: 0 }`)。 折り返さない横並びの中の空の段組みの下に、:where(.wp-block-columns) の 1.75em が付かないようにする (#113) */ .is-layout-flex > :is(*, div) { margin: 0; } .is-content-justification-center { justify-content: center; } .is-content-justification-left { justify-content: flex-start; } .is-content-justification-right { justify-content: flex-end; } .is-content-justification-space-between { justify-content: space-between; } /* .wp-block-group.is-layout-flex (強さ 0,2,0) に負けると折り返してしまうので、同じ強さ以上にする (#113) */ .is-nowrap, .wp-block-group.is-layout-flex.is-nowrap, .wp-block-buttons.is-layout-flex.is-nowrap { flex-wrap: nowrap; } /* 折り返さない横並びは、本番では間隔の指定がなく WP の既定 (:root :where(.is-layout-flex) { gap: 24px }) になる。 .wp-block-group.is-layout-flex の 0.75rem は、間隔を style で指定する他のグループ用。 子は縮められるようにする (本番は子の中身が縮むので 414px 以下でもはみ出さない) (#113) */ .wp-block-group.is-layout-flex.is-nowrap { gap: 24px; } .wp-block-group.is-layout-flex.is-nowrap > * { min-width: 0; } /* 上の間隔 24px にすると、カードの min-width: 280px (.vk_post) が効いて 991px 前後で 2 列が 1 列に落ち、導入事例が 2 倍近い高さになる。本番のカードは min-width が 0 なので、この箱の中のカードだけ外す （トップの導入事例のカード .vk_card_item は、下の「投稿のカード」の節でも min-width: 0 と列の幅を指定している） */ @media (min-width: 768px) { .wp-block-group.is-layout-flex.is-nowrap .vk_post { min-width: 0; } } .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } /* 本番は :where() で強さ 0。.vk-cols--fit など個別の margin-bottom や、flow 直下の 0 に必ず負ける */ :where(.wp-block-columns) { margin-bottom: 1.75em; } /* WP のレイアウト (flow・constrained) は、子要素の下の余白を 0 にし、最後の子はさらに 0 にする (見出しも例外ではない。本番は `:root :where(.is-layout-flow) > :last-child` (0,2,0) が Lightning の見出しの規則 (0,1,2) に勝つ) (`:root :where(.is-layout-flow) > * { margin-block: 24px 0 }` と `> :last-child`)。 段組みの下や、グループ・カバー・段組みの列の最後の要素の下に 24px 前後の余白が余分に残るのを防ぐ (#113) */ .entry-body :is(.is-layout-flow, .is-layout-constrained) > :last-child, .entry-body :is(.is-layout-flow, .is-layout-constrained) > .wp-block-columns { margin-bottom: 0; } .wp-block-columns.are-vertically-aligned-center { align-items: center; } .wp-block-column { flex: 1 1 0; min-width: 0; word-break: break-word; } .wp-block-columns.is-layout-flex > .wp-block-column { flex: 1; } /* 本番は .wp-block-column 内の block-gap を 0 にし、要素ごとの margin (vk_spacer や p の margin-bottom) で縦間隔を制御する。直下子に 1rem 上マージンを付けると プロダクト説明文などが 16px ずつ広がるので付けない。 */ .wp-block-column.is-layout-flow > * + * { margin-top: 0; } /* vk-cols--reverse: TOP の Maps / SmartCity / 住所ソリューションは交互に 画像左右を入れ替えるため row-reverse 指定が必要。 */ .wp-block-columns.vk-cols--reverse { flex-direction: row-reverse; } /* 段組みは、横に並べる幅では折り返さない（本番は WordPress コアの全ページ共通の `@media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }`）。 列にインラインの flex-basis（例: 50% と 66.66%）があると、上の wrap では合計が 100% を超えて折り返し、 全幅で縦に積まれてしまう。nowrap にすると flex-basis の割合で縮んで横に並ぶ（本番と同じ幅になる）。 切り替えは 768px（本番は 782px。CLAUDE.md のモバイルの 768px に寄せ、このファイルのほかの指定と同じく 767px / 768px で分ける）。767px 以下は縦に積む (#201) */ @media (min-width: 768px) { .wp-block-columns { flex-wrap: nowrap; } } @media (max-width: 767px) { .wp-block-columns { flex-direction: column; } .wp-block-columns.vk-cols--reverse { flex-direction: column; } } /* /maps/ の画像と文の 2 段組 (wp-container-core-columns-is-layout-08c01c1c) の列の間隔。本番の同じ段組み用のクラス （本番ではクラスの名前が d9ad523d）の `gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40)`。 全幅で本番どおり（375px で 14px。縦積みのときの列の間も同じ） (#201) */ .wp-container-core-columns-is-layout-08c01c1c { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); } /* Contributions セクションは wp-block-columns 内に複数 column が並ぶ。 wp-block-columns 1 個に 3 つの column が入る前提で min-width を抑える。 */ .wp-block-columns > .wp-block-column { flex-basis: 0; } /* 実績/加盟団体/マスコミ系など、横並びのグループ内の画像は本番と同じく余白なし。 大きさは HTML の width・height 属性のまま（高さを CSS で制限すると、幅だけ指定した画像の縦横比が崩れる）。 */ .wp-block-group.is-layout-flex > .wp-block-image { margin: 0; } /* 中央寄せの画像（.aligncenter）は左右を auto のままにする（本番と同じ） */ .wp-block-group.is-layout-flex > .wp-block-image.aligncenter { margin-inline: auto; } /* ===== Heading (VK) ===== * 本番 (Lightning) は見出しすべてに `margin: 0 0 1em`（--vk-margin-headding-bottom）を持つ。 * 以前は余白ブロックと二重になって縦長になるとして 0 にしていたが、余白ブロックが本番と同じ高さに * 戻ったので (#113)、本番と同じ規則を移す。本番のセレクタは `h1, h2, ...` (強さ 0,0,1) なので、 * `:where(.entry-body) :is(h1, ...)` で同じ強さ (0,0,1) にそろえる。.entry-body 配下に限るのはヘッダー・フッターの * 見出しを巻き込まないため。これより強い .vk_post .vk_post_title などの個別の指定が、本番と同じ順で勝つ。 * BaseLayout の `h2 { font-size }` などは margin を持たないので競合しない。 */ :where(.entry-body) :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 1em; } /* 本番 (Lightning) の `p + h*, ul + h*, ol + h*, dl + h*, table + h* { margin-top: 2em }` と `figure + h1..h3 { margin-top: 2em }`・`figure + h4..h6 { margin-top: 1em }` */ :where(.entry-body) :is(p, ul, ol, dl, table, figure) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 2em; } :where(.entry-body) figure + :is(h4, h5, h6) { margin-top: 1em; } /* .entry-body の直下の子は、上の `.entry-body > * + * { margin-top: 0 }` に負けないように強さを上げる。 本番は .entry-body が WP のレイアウト (flow) ではないので、直下では本番の規則がそのまま効く。 flow・constrained の中では本番も WP の規則 (margin-block: 24px 0 → 見出しは 0) が勝つので、下の規則で 0 に戻す */ .entry-body > :is(p, ul, ol, dl, table, figure) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 2em; } .entry-body > figure + :is(h4, h5, h6) { margin-top: 1em; } :is(.is-layout-flow, .is-layout-constrained) > :is(p, ul, ol, dl, table, figure) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; } .wp-block-heading { font-weight: 700; } .vk_heading { display: block; } .is-style-vk-heading-plain .vk_heading_title { font-weight: 700; } /* .is-style-vk-heading-default は本番では装飾なし（下線を付けない）。トップのプロダクトの見出し (#98) */ /* VK Blocks (block-build.css 1.57.1.0) の見出しスタイルを本番と同じ規則で移す (#156)。 * 本番は「中央・右寄せでなければ左寄せ」を指定する。線・二重線は border、padding は 0.6em 0 0.5em（em は見出し自身の文字の大きさ）。 * 色は本番どおり #333（dotted だけ #111）。::before/::after は plain などで content: none になるが、 * 飾りのないスタイルは元から疑似要素を持たないので、それ以外だけを書く。 */ :is(.is-style-vk-heading-plain, .is-style-vk-heading-double_black, .is-style-vk-heading-double_bottomborder_black, .is-style-vk-heading-solid_black, .is-style-vk-heading-solid_bottomborder_black, .is-style-vk-heading-dotted_bottomborder_black):not(.has-text-align-center, .has-text-align-right) { text-align: left; } :is(.is-style-vk-heading-double_black, .is-style-vk-heading-double_bottomborder_black, .is-style-vk-heading-solid_black, .is-style-vk-heading-solid_bottomborder_black, .is-style-vk-heading-dotted_bottomborder_black) { position: relative; padding: 0.6em 0 0.5em; } .is-style-vk-heading-solid_black { border-top: 1px solid #333; border-bottom: 1px solid #333; } .is-style-vk-heading-double_black { border-top: 3px double #333; border-bottom: 3px double #333; } .is-style-vk-heading-solid_bottomborder_black { border-bottom: 1px solid #333; } .is-style-vk-heading-double_bottomborder_black { border-bottom: 3px double #333; } .is-style-vk-heading-dotted_bottomborder_black { border-bottom: 1px dotted #111; } /* 疑似要素の box-sizing は本番 (Lightning の `*, ::before, ::after { box-sizing: border-box }`) と同じ border-box にする。 * content-box のままだと height: 100% に上下の線が足されて括弧が 2px はみ出し、両端の線は高さ 0 になる。範囲は下の 2 つに絞る。 */ /* 背景つきの plain は本番で padding が --vk-heading-has-background-padding（0.6em 0.7em 0.5em）。style 属性の左右の padding が勝つ */ .is-style-vk-heading-plain { position: relative; display: block; } .is-style-vk-heading-plain[class*="has-background"] { padding: 0.6em 0.7em 0.5em; } /* 両端の線: 本番は文字の両側に 1px #333 の線（flex-grow: 1）、文字との間は 1em、文字は中央寄せ */ .is-style-vk-heading-both_ends { display: flex; align-items: center; text-align: center; position: relative; } .is-style-vk-heading-both_ends::before, .is-style-vk-heading-both_ends::after { content: ''; flex-grow: 1; box-sizing: border-box; border-bottom: 1px solid #333; } .is-style-vk-heading-both_ends::before { margin-right: 1em; } .is-style-vk-heading-both_ends::after { margin-left: 1em; } /* 角括弧: 本番は padding 0.7em、左右に高さ 100%・幅 12px の枠（上下 1px と外側 1px）を absolute で置く */ .is-style-vk-heading-brackets_black { position: relative; padding: 0.7em; text-align: center; } .is-style-vk-heading-brackets_black::before, .is-style-vk-heading-brackets_black::after { content: ''; position: absolute; top: 0; width: 12px; height: 100%; display: inline-block; box-sizing: border-box; border-top: 1px solid #333; border-bottom: 1px solid #333; } .is-style-vk-heading-brackets_black::before { left: 0; border-left: 1px solid #333; } .is-style-vk-heading-brackets_black::after { right: 0; border-right: 1px solid #333; } /* 飾りのある見出しの下の余白は 1.2em。本番 VK Blocks の block-build.css と同じ 8 つのスタイル・強さ (0,1,0)。 WP のレイアウト (flow・constrained・wp-container-*) の直下では、本番は Lightning の規則 (0,1,2) が勝って 1em に戻る。 だから「レイアウトの直下は 1em、それ以外 (.entry-body の直下など) は 1.2em」になる。同じ形で移す (#113) */ :is(.is-style-vk-heading-solid_bottomborder_black, .is-style-vk-heading-double_bottomborder_black, .is-style-vk-heading-solid_black, .is-style-vk-heading-double_black, .is-style-vk-heading-dotted_bottomborder_black, .is-style-vk-heading-both_ends, .is-style-vk-heading-brackets_black, .is-style-vk-heading-background_fill_lightgray) { margin-bottom: 1.2em; } body :is(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6), [class*="wp-container-"] > :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 1em; } /* 文字の大きさと字間は本番と同じく本文から引き継ぐ（大きさは多くの見出しで style に指定がある） */ /* 色は指定しない。本番と同じく、色の指定（has-*-color や style）がない小見出しは親の色（本文の #333）を引き継ぎ、 指定があればその色になる。ここで色を指定すると、同じ強さの has-*-color に勝ってしまう */ .vk_heading_subtext { display: block; margin-top: 0.4rem; } /* 本番は VK Blocks の `.vk_heading_subtext { margin-bottom: 0 }`。.entry-body p (強さ 0,1,1) の下の余白 1.5rem に負けないよう強さを合わせる (#163) */ .entry-body p.vk_heading_subtext { margin-bottom: 0; } .vk-heading-subtext-en { /* nothing extra */ } .vk-heading-key-visual { font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.3; } /* .vk-headding-lp はプロダクト説明の H3。本番は margin-bottom 2rem (32px)。 */ .vk-headding-lp { font-size: 1.8rem; margin-bottom: 2rem; } /* ===== Spacer ===== */ .vk_spacer { display: block; } .vk_spacer-type-margin-top:not(.vk_spacer-type-height) { display: block; height: 0; } .vk_spacer-type-height { display: block; } .vk_block-margin-0--height { height: 0; } .vk_block-margin-xs--height { height: var(--wp-margin-xs); } .vk_block-margin-sm--height { height: var(--wp-margin-sm); } .vk_block-margin-md--height { height: var(--wp-margin-md); } .vk_block-margin-lg--height { height: var(--wp-margin-lg); } .vk_block-margin-xl--height { height: var(--wp-margin-xl); } .vk_block-margin-0--margin-top { margin-top: 0 !important; } .vk_block-margin-xs--margin-top { margin-top: var(--wp-margin-xs) !important; } .vk_block-margin-sm--margin-top { margin-top: var(--wp-margin-sm) !important; } .vk_block-margin-md--margin-top { margin-top: var(--wp-margin-md) !important; } .vk_block-margin-lg--margin-top { margin-top: var(--wp-margin-lg) !important; } .vk_block-margin-xl--margin-top { margin-top: var(--wp-margin-xl) !important; } .vk_block-margin-0--margin-bottom { margin-bottom: 0 !important; } .vk_block-margin-xs--margin-bottom { margin-bottom: var(--wp-margin-xs) !important; } .vk_block-margin-sm--margin-bottom { margin-bottom: var(--wp-margin-sm) !important; } .vk_block-margin-md--margin-bottom { margin-bottom: var(--wp-margin-md) !important; } .vk_block-margin-lg--margin-bottom { margin-bottom: var(--wp-margin-lg) !important; } .vk_block-margin-xl--margin-bottom { margin-bottom: var(--wp-margin-xl) !important; } .vk_spacer-display-pc { display: block; } .vk_spacer-display-tablet { display: none; } .vk_spacer-display-mobile { display: none; } @media (max-width: 991px) { .vk_spacer-display-pc { display: none; } .vk_spacer-display-tablet { display: block; } } @media (max-width: 575px) { .vk_spacer-display-tablet { display: none; } .vk_spacer-display-mobile { display: block; } } /* ===== Cover ===== */ .wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 1em; overflow: hidden; color: #fff; } .wp-block-cover.is-light { color: #000; } .wp-block-cover__background { position: absolute; inset: 0; z-index: 0; } .wp-block-cover__background.has-background-dim { opacity: 0.5; background-color: #000; } .wp-block-cover__background.has-luminous-vivid-orange-background-color { background-color: #ff6900; } .wp-block-cover__background.has-vk-color-primary-background-color { background-color: var(--wp-color-primary); } .wp-block-cover__background.has-vk-color-primary-vivid-background-color { background-color: var(--wp-color-primary-vivid); } .wp-block-cover__background.has-luminous-vivid-amber-background-color { background-color: #fcb900; } .wp-block-cover__background.has-white-background-color { background-color: #fff; } .wp-block-cover__background.has-black-background-color { background-color: #000; } .wp-block-cover__background.has-background-dim.has-background-dim-0 { opacity: 0; } .wp-block-cover__background.has-background-dim.has-background-dim-10 { opacity: 0.1; } .wp-block-cover__background.has-background-dim.has-background-dim-20 { opacity: 0.2; } .wp-block-cover__background.has-background-dim.has-background-dim-30 { opacity: 0.3; } .wp-block-cover__background.has-background-dim.has-background-dim-40 { opacity: 0.4; } .wp-block-cover__background.has-background-dim.has-background-dim-50 { opacity: 0.5; } .wp-block-cover__background.has-background-dim.has-background-dim-60 { opacity: 0.6; } .wp-block-cover__background.has-background-dim.has-background-dim-70 { opacity: 0.7; } .wp-block-cover__background.has-background-dim.has-background-dim-80 { opacity: 0.8; } .wp-block-cover__background.has-background-dim.has-background-dim-90 { opacity: 0.9; } .wp-block-cover__background.has-background-dim.has-background-dim-100 { opacity: 1; } .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wp-block-cover__inner-container { position: relative; z-index: 1; width: 100%; max-width: var(--wp-content-max); margin: 0 auto; } /* 画像つきの帯 (背景の暗い膜 → 画像 → 中身の順) は、膜を画像の上に重ねる。本番 (WP コアの cover) の z-index の指定 (#163)。 * 膜の直後が中身 (.wp-block-cover__background + .wp-block-cover__inner-container) の帯は、この指定を受けない。 * 無いと画像が膜を隠し、採用情報の上の写真が暗くならず白い文字が読みにくい。 */ body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__background, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__inner-container { z-index: 1; } body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__image-background { z-index: 0; } /* ===== Button (vk_button) ===== * 本番 (VK Blocks Pro 1.57 の button/style.css + Lightning G3 の .btn / * .vk_button .btn + Bootstrap の .btn-block) の見た目を移植したもの。 * 本番のルートフォントは 991px 以下で 14px（#112 でこのサイトも同じにした）。 * 文字の大きさは px 固定、余白は rem なので 991px 以下では 14px 基準になる。 */ .vk_button { box-sizing: border-box; margin-top: 0; margin-bottom: 5px; text-align: center; } .vk_button.vk_button-align-left { text-align: left; } .vk_button.vk_button-align-center { text-align: center; } .vk_button.vk_button-align-right { text-align: right; } .vk_button.vk_button-align-block { display: block; } .vk_button.vk_button-align-block .vk_button_link { width: 100%; } .vk_button.vk_button-align-wide { display: block; margin-left: auto; margin-right: auto; max-width: 70%; } .vk_button.vk_button-align-wide .vk_button_btn, .vk_button.vk_button-align-wide .btn { display: block; } a.vk_button_link { text-decoration: none; } .vk_button .vk_button_link { min-width: 100px; min-height: 25px; box-sizing: border-box; } /* WP コアのボタン (wp-block-button__link。/pricing/ と /address-normalization/ で使う)。 * 本番 (WP コアの block-library・global-styles と Lightning の style-theme-json.css・style.css) の値を移したもの (#163)。 * 文字の太さは本番も本文から引き継ぐ 400 (このボタンも vk_button も、本番に太字のものは GeonicDB の .btn だけ)。 * 本番は body の line-height が normal なので、.entry-body の 1.7 を引き継がないよう normal にする。 * 背景色・文字色は下の既定と has-*-color / has-*-background-color のクラスで決まる。 */ :where(.wp-block-button__link) { border-radius: 9999px; box-shadow: none; padding: calc(0.667em + 2px) calc(1.333em + 2px); text-decoration: none; } /* 次の 1 つは、本番の 4 つの規則を重ねたもの。 * - WP コア block-library の .wp-block-button__link (align-content〜word-break) * - WP コア global-styles の :root :where(.wp-element-button, .wp-block-button__link) (border-width〜text-transform。background-color #32373c・color #fff は下の既定が上書きする) * - Lightning style.css の .wp-block-button__link (font-size・transition) * - Lightning style-theme-json.css の .wp-block-button__link:hover (filter) */ .wp-block-button__link { align-content: center; border-width: 0; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: inherit; font-size: 1rem; font-style: inherit; font-weight: inherit; height: 100%; letter-spacing: inherit; line-height: normal; text-align: center; text-decoration: none; text-transform: inherit; transition: 0.1s ease-in; word-break: break-word; } .wp-block-button__link:hover { text-decoration: none; filter: brightness(1.1) saturate(2); } /* 既定の色 (Lightning の .wp-block-button .wp-block-button__link と .wp-block-button__link, :hover)。 * .entry-body a (0,1,1) に負けないよう .entry-body を付ける */ .entry-body .wp-block-button .wp-block-button__link { background-color: var(--wp-color-primary); } .entry-body .wp-block-button__link, .entry-body .wp-block-button__link:hover { color: #fff; } /* 色のクラス。本番は WP が !important で当てる。.entry-body a:hover にも負けないよう !important にする */ .wp-block-button__link.has-white-color { color: #fff !important; } .wp-block-button__link.has-luminous-vivid-orange-color { color: #ff6900 !important; } .wp-block-button__link.has-white-background-color { background-color: #fff !important; } .wp-block-button__link.has-vk-color-primary-vivid-background-color { background-color: var(--wp-color-primary-vivid) !important; } .wp-block-buttons.has-custom-font-size .wp-block-button__link { font-size: inherit; } /* Bootstrap 4 由来の .btn (Lightning が読み込む) */ .vk_button_link.btn { display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; white-space: inherit; user-select: text; border: 1px solid transparent; padding: 0.8rem 1.5rem; /* 文字は本番（VK Blocks）と同じ px 固定（16px を基準に lg 1.25 倍・sm 0.875 倍）。 基準の文字サイズ（991px 以下は 14px、#112）が変わっても縮まない */ font-size: 16px; line-height: 1.5; border-radius: 100px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: box-shadow 0.3s ease 0s, transform 0.3s ease 0s, opacity 0.3s ease 0s; } @media (prefers-reduced-motion: reduce) { .vk_button_link.btn { transition: none; } .vk_button_link.btn:hover { transform: none; } } .vk_button_link.btn:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12); transform: translateY(0.1875em); } .vk_button-color-custom a:hover { opacity: 0.8; box-shadow: 0 0 0 0.2rem rgba(171, 184, 195, 0.25); } .vk_button .vk_button_link.btn.btn-lg { font-size: 20px; } .vk_button .vk_button_link.btn.btn-sm { font-size: 14px; } .vk_button_link.btn-block { display: block; width: 100%; } @media (max-width: 575px) { .vk_button .vk_button_link-type-text { font-size: 14px; } } /* テキストリンク型 (ボタンの枠なし) */ .vk_button .vk_button_link-type-text { box-shadow: none; padding: 0; transition: 0.3s; line-height: normal; } .vk_button:has(.vk_button_link-type-text) { line-height: normal; } /* 本番は body が normal。外側の行の高さを 24px にする */ .vk_button .vk_button_link-type-text:hover { background: none; box-shadow: none; letter-spacing: 0.15rem; } @media (prefers-reduced-motion: reduce) { .vk_button .vk_button_link-type-text { transition: none; } } /* `.vk_button_link` は本来 has-*-background-color / has-*-color が組み合わさって 色を決めるが、CSS リセット側の `a { color: ... }` が勝ってボタン文字が黒くなる ことがあるため `.btn` を組み合わせた明示的なフォールバックも入れる。 */ .vk_button_link.btn { background-color: var(--wp-color-primary); color: #fff; } .vk_button_link.has-vk-color-primary-background-color { background-color: var(--wp-color-primary); color: #fff; } /* 本番では WP プリセットの luminous-vivid-orange (#ff6900) で描画される */ .vk_button_link.has-luminous-vivid-orange-background-color, .vk_button_link.has-background.has-luminous-vivid-orange-background-color { background-color: #ff6900; color: #fff; } .vk_button_link.has-vk-color-primary-vivid-background-color { background-color: var(--wp-color-primary-vivid); color: #fff; } .vk_button_link.has-white-background-color { background-color: #fff; } .vk_button_link.has-vk-color-primary-color, .vk_button_link.has-text-color.has-vk-color-primary-color { color: var(--wp-color-primary); } .vk_button_link.has-luminous-vivid-orange-color { color: #ff6900; } .vk_button_link.has-white-color { color: #fff; } .vk_button_link.has-black-color { color: #000; } .vk_button_link_caption { display: inline-flex; align-items: center; justify-content: center; } .vk_button .vk_button_link_before { margin-right: 0.7rem; } .vk_button .vk_button_link_after { margin-left: 0.7rem; } .vk_button .vk_button_link_caption .vk_button_link_after { margin-right: 0; } .vk_button .vk_button_link_subCaption { display: block; overflow: hidden; margin: 0; font-size: 80%; } .vk-button-min-width .vk_button_link.btn { min-width: 18rem; } @media (max-width: 575px) { .vk-button-min-width .vk_button_link.btn { min-width: 252px; } } /* ===== Font Awesome アイコン (フォント不使用) ===== * 本番は Font Awesome 6 Free のウェブフォントで描画している。外部 CSS / フォントは * 入れない方針なので、同じ形の SVG (public/images/icons/fa-*.svg) を CSS mask で * に当て、色は currentColor に追従させる。マークアップは変更しない。 * 幅は FA のグリフ幅 (viewBox 幅 / 512) に合わせて em で指定。 * Icons: Font Awesome Free 6.1.0 (本番と同じ版) by @fontawesome (https://fontawesome.com) * License: CC BY 4.0 (https://fontawesome.com/license/free) * 相対 URL は CSS ファイル基準で解決されるため、staging の base パスでも動く。 */ i.fa-arrow-circle-right, i.fa-arrow-circle-down, i.fa-chevron-right, i.fa-user, i.fa-envelope, i.fa-print, i.fa-map-location-dot, i.fa-upload, i.fa-window-maximize, i.fa-building, i.fa-turn-up, i.fa-link, i.fa-calendar { display: inline-block; flex-shrink: 0; height: 1em; line-height: 1; font-style: normal; /* Font Awesome の文字と同じく、少し下げて文字のベースラインにそろえる */ vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* 強制カラー（Windows のハイコントラストなど）では背景色が消えるため、文字色で塗る */ @media (forced-colors: active) { i.fa-arrow-circle-right, i.fa-arrow-circle-down, i.fa-chevron-right, i.fa-user, i.fa-envelope, i.fa-print, i.fa-map-location-dot, i.fa-upload, i.fa-window-maximize, i.fa-building, i.fa-turn-up, i.fa-link, i.fa-calendar { forced-color-adjust: none; background-color: CanvasText; } } i.fa-arrow-circle-right { width: 1em; -webkit-mask-image: url(../images/icons/fa-arrow-circle-right.svg); mask-image: url(../images/icons/fa-arrow-circle-right.svg); } i.fa-arrow-circle-down { width: 1em; -webkit-mask-image: url(../images/icons/fa-arrow-circle-down.svg); mask-image: url(../images/icons/fa-arrow-circle-down.svg); } i.fa-chevron-right { width: 0.625em; -webkit-mask-image: url(../images/icons/fa-chevron-right.svg); mask-image: url(../images/icons/fa-chevron-right.svg); } i.fa-user { width: 0.875em; -webkit-mask-image: url(../images/icons/fa-user.svg); mask-image: url(../images/icons/fa-user.svg); } i.fa-envelope { width: 1em; -webkit-mask-image: url(../images/icons/fa-envelope.svg); mask-image: url(../images/icons/fa-envelope.svg); } i.fa-print { width: 1em; -webkit-mask-image: url(../images/icons/fa-print.svg); mask-image: url(../images/icons/fa-print.svg); } i.fa-map-location-dot { width: 1.125em; -webkit-mask-image: url(../images/icons/fa-map-location-dot.svg); mask-image: url(../images/icons/fa-map-location-dot.svg); } i.fa-upload { width: 1em; -webkit-mask-image: url(../images/icons/fa-upload.svg); mask-image: url(../images/icons/fa-upload.svg); } i.fa-window-maximize { width: 1em; -webkit-mask-image: url(../images/icons/fa-window-maximize.svg); mask-image: url(../images/icons/fa-window-maximize.svg); } /* fa-building は本番で使っている regular（線）の形。fa-solid fa-building を使うときは別の SVG が要る */ i.fa-building { width: 0.75em; -webkit-mask-image: url(../images/icons/fa-building.svg); mask-image: url(../images/icons/fa-building.svg); } i.fa-turn-up { width: 0.75em; -webkit-mask-image: url(../images/icons/fa-turn-up.svg); mask-image: url(../images/icons/fa-turn-up.svg); } i.fa-calendar { width: 0.875em; -webkit-mask-image: url(../images/icons/fa-calendar.svg); mask-image: url(../images/icons/fa-calendar.svg); } i.fa-link { width: 1.25em; -webkit-mask-image: url(../images/icons/fa-link.svg); mask-image: url(../images/icons/fa-link.svg); } /* ===== VK Blocks アイコン (vk_icon) ===== * 本番 (VK Blocks) の .wp-block-vk-blocks-icon のルールのうち、outline と noline スタイルの分だけ移植。 * 塗りスタイル（既定）は今のサイトで使っていないので入れていない。アイコンは上の mask 方式で描く。 */ @media (max-width: 991px) { .vk_icon { margin-bottom: 1.5em; } } .wp-block-vk-blocks-icon .vk_icon_frame { line-height: 1; } .wp-block-vk-blocks-icon .vk_icon_border { display: inline-block; position: relative; width: 80px; height: 80px; border-radius: 50%; } .wp-block-vk-blocks-icon .vk_icon_link { display: inline-block; } .wp-block-vk-blocks-icon .vk_icon_link:hover { opacity: 0.85; } .wp-block-vk-blocks-icon .vk_icon_font { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36px; } .wp-block-vk-blocks-icon .is-style-outline .vk_icon_border { background-color: transparent; border: 1px solid; } .wp-block-vk-blocks-icon .is-style-outline .vk_icon_border:not(.has-text-color) { color: #337ab7; } .wp-block-vk-blocks-icon .is-style-noline .vk_icon_border:not(.has-text-color) { color: #337ab7; } .wp-block-vk-blocks-icon .vk_icon_frame.text-center { text-align: center; } .wp-block-vk-blocks-icon .vk_icon_align_center { text-align: center; } .wp-block-vk-blocks-icon .vk_icon_align_right { text-align: right; } /* ===== Image / Figure ===== */ /* 本番の WP の既定 `:where(figure) { margin: 0 0 1em }`（強さ 0）。figure が UA の左右 40px を持たないように（#187 のギャラリー） */ :where(figure) { margin: 0 0 1em; } figure.wp-block-image { margin: 0 0 1em; } figure.wp-block-image img { display: block; max-width: 100%; height: auto; border-radius: 2px; } figure.wp-block-image.aligncenter { display: flex; justify-content: center; } figure.wp-block-image.size-full img { /* size-full は本来 width/height がそのまま反映されるべきだが、 本番ではロゴ列の中で のように 固定サイズで使われている。intrinsic サイズを尊重するため max-width: 100% / height: auto に留め、明示的な width を上書きしない。 */ max-width: 100%; height: auto; } figure.wp-block-image.is-resized img { width: auto; } /* ===== Outer (vk_outer) ===== */ /* 上下の padding は本番の .vk_outer-paddingVertical-use (em。--wp-margin-* とは別の段階) を移す。 1200px 以上の 3.5em の段は、ブレークポイントを増やさない方針 (#82) のため足していない */ .wp-block-vk-blocks-outer.vk_outer { position: relative; } .vk_outer-paddingVertical-use { padding-top: 1.5em; padding-bottom: 1.5em; } @media (min-width: 576px) { .vk_outer-paddingVertical-use { padding-top: 2em; padding-bottom: 2em; } } @media (min-width: 768px) { .vk_outer-paddingVertical-use { padding-top: 2.5em; padding-bottom: 2.5em; } } @media (min-width: 992px) { .vk_outer-paddingVertical-use { padding-top: 3em; padding-bottom: 3em; } } .vk_outer.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } .vk_outer-width-full { width: 100%; } .vk_outer-paddingLR-none > div > .vk_outer_container { padding-left: 0; padding-right: 0; } .vk_outer.vk_outer-paddingVertical-none, .wp-block-vk-blocks-outer.vk_outer.vk_outer-paddingVertical-none { padding-top: 0; padding-bottom: 0; } .vk_outer_container { position: relative; z-index: 1; max-width: var(--wp-content-max); margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .vk_outer-background-area { position: absolute; inset: 0; z-index: 0; } /* 背景の濃さ (dim) は本番 (VK Blocks の outer) どおり has-background-dim-N (0〜10) の値で決まる (#98)。 * dim-0 は透明（トップのプロダクトの灰色 #f3f4f5 は本番では見えない）。.has-background-dim 単独は 0.5 */ .vk_outer-background-area.has-background-dim { opacity: 0.5; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-0 { opacity: 0; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-1 { opacity: 0.1; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-2 { opacity: 0.2; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-3 { opacity: 0.3; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-4 { opacity: 0.4; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-5 { opacity: 0.5; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-6 { opacity: 0.6; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-7 { opacity: 0.7; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-8 { opacity: 0.8; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-9 { opacity: 0.9; } .wp-block-vk-blocks-outer.vk_outer .vk_outer-background-area.has-background-dim-10 { opacity: 1; } /* Grid column card 内はカードの中身なので、entry-body の余白と衝突しない 個別の line-height / margin を持たせる (本番と一致)。 */ .vk_gridColumn_item_inner { line-height: 1.7; border-radius: 5px; } .vk_gridColumn_item_inner.has-background-color { border-radius: 5px; } .vk_gridColumn_item_inner p { line-height: 1.7; margin: 0 0 1.5rem; } .vk_gridColumn_item_inner .vk_heading_title { margin: 0 0 1.25rem; } /* 同じ行のカードの高さを揃える。VK Blocks (grid-column-item) の本番と同じ指定。 .vk_gridColumn_item は flex の stretch で行の高さになるので、中身を 100% に伸ばす。 */ .wp-block-vk-blocks-grid-column-item .vk_gridColumn_item_inner { height: 100%; } /* ===== VK Grid Column (row / col-*) ===== * 本番は Bootstrap grid を利用しており .row の中の .col-md-6 等で * 横並び 2〜3 列を実現する。plugin CSS を取り込まないため最小限を再現。 * .vk_gridColumn 自体は inner container なので padding: 0 で、row の * -15px マージンで両サイドにはみ出す。max-width は本番と同じ 1110px。 */ .vk_gridColumn { padding-left: 0 !important; padding-right: 0 !important; max-width: 1110px; margin-left: auto; margin-right: auto; } .vk_gridColumn .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .vk_gridColumn_item { padding-left: 15px; padding-right: 15px; box-sizing: border-box; width: 100%; } .col-1 { width: 8.3333%; } .col-2 { width: 16.6667%; } .col-3 { width: 25%; } .col-4 { width: 33.3333%; } .col-5 { width: 41.6667%; } .col-6 { width: 50%; } .col-7 { width: 58.3333%; } .col-8 { width: 66.6667%; } .col-9 { width: 75%; } .col-10 { width: 83.3333%; } .col-11 { width: 91.6667%; } .col-12 { width: 100%; } @media (min-width: 576px) { .col-sm-1 { width: 8.3333%; } .col-sm-2 { width: 16.6667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.3333%; } .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.3333%; } .col-sm-8 { width: 66.6667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.3333%; } .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; } } @media (min-width: 768px) { .col-md-1 { width: 8.3333%; } .col-md-2 { width: 16.6667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.3333%; } .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; } } @media (min-width: 992px) { .col-lg-1 { width: 8.3333%; } .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; } .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; } } @media (min-width: 1200px) { .col-xl-1 { width: 8.3333%; } .col-xl-2 { width: 16.6667%; } .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.3333%; } .col-xl-5 { width: 41.6667%; } .col-xl-6 { width: 50%; } .col-xl-7 { width: 58.3333%; } .col-xl-8 { width: 66.6667%; } .col-xl-9 { width: 75%; } .col-xl-10 { width: 83.3333%; } .col-xl-11 { width: 91.6667%; } .col-xl-12 { width: 100%; } } @media (min-width: 1400px) { .col-xxl-1 { width: 8.3333%; } .col-xxl-2 { width: 16.6667%; } .col-xxl-3 { width: 25%; } .col-xxl-4 { width: 33.3333%; } .col-xxl-5 { width: 41.6667%; } .col-xxl-6 { width: 50%; } .col-xxl-7 { width: 58.3333%; } .col-xxl-8 { width: 66.6667%; } .col-xxl-9 { width: 75%; } .col-xxl-10 { width: 83.3333%; } .col-xxl-11 { width: 91.6667%; } .col-xxl-12 { width: 100%; } } /* ===== Grid Column Card (3 列カードレイアウト・料金プラン等) ===== */ .vk_gridcolcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 1.5rem 0; } @media (max-width: 781px) { .vk_gridcolcard { grid-template-columns: 1fr; } } .vk_gridcolcard_item { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp-color-border); border-radius: 8px; overflow: hidden; } .vk_gridcolcard_item_container { display: flex; flex-direction: column; height: 100%; } .vk_gridcolcard_item_body { flex: 1; } .vk_gridcolcard_item_body_inner { padding: 0; } .vk_gridcolcard_item_footer { padding: 0 1.25rem 1.25rem; } /* ===== Card (vk_card 系) ===== * 本番は wp-block-vk-blocks-card-item 単独で並ぶ flex item になっており * 親に grid を当てると WP 側の per-item ::before height トリックと衝突する。 * 親 .vk_posts (.vk_card_*) を flex にして、各 item は vk_post-col-md-* の * Bootstrap 風グリッド幅を尊重する。 * gap ではなく margin: 0 -15px / item margin: 0 15px の Bootstrap 風で * 本番と同等の spacing を再現する (本番は .vk_posts に flex + margin: 0 -15px)。 */ .vk_posts { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 0; clear: both; } .vk_posts > .vk_post { flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); margin: 0 15px 30px; min-width: 280px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp-color-border); border-radius: 8px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow 0.15s; } /* 新着情報の一覧 (postListText)。本番は Lightning G3 の .postListText / .postListText_date / .postListText_title と Evergreen の .vk_posts-layout-postListText .postListText で作っている。 日付は左に float し、タイトルは overflow: hidden の block で日付の右に収める。 991px 以下はタイトルが日付の下 (clear: both)、992px 以上は日付の右 (clear: none) になる（本番の @media (min-width: 992px)。Issue #114 の「576px」は誤り）。 本番は body の line-height が normal なので、この行も normal（.entry-body の 1.7 を引き継がない）。 一覧の下の余白（本番の Lightning は 0.8rem）は、本番では .is-layout-flow の最後の子の規則で 0 になるので付けない。 */ .vk_posts .vk_post.postListText { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* 本番の --vk-color-border-hr */ border-radius: 0; background: transparent; padding: 1rem 0 0.9rem; line-height: normal; margin: 0 15px; flex: 0 0 calc(100% - 30px); max-width: calc(100% - 30px); min-width: 0; display: block; overflow: hidden; } .vk_posts .postListText_date { float: left; display: block; font-size: 0.9rem; color: var(--wp-color-text-light); min-width: 115px; margin-right: 1em; white-space: nowrap; } .vk_posts .postListText_title { display: block; overflow: hidden; font-size: 1rem; line-height: 1.6; margin: 0; padding: 0.2rem 0 0; clear: both; } @media (min-width: 992px) { .vk_posts .postListText_title { padding-top: 0; clear: none; } } .vk_posts .postListText_title a { color: var(--wp-color-text); text-decoration: none; } .vk_posts .postListText_title a:hover { color: var(--color-link-hover); text-decoration: none; } /* 「新着」マーク。本番（VK Blocks の投稿リスト）の `.vk_post_title_new` と同じ規則。太さは親の見出しから引き継ぐ（本番も指定なし）。 span は public/js/new-mark.js が、投稿から 10 日以内の題名の末尾に足す。 .vk_post_title_new の中身の文字は、お知らせ・ブログの一覧は「新着!!」、トップ・前後の記事のカードは「New!!」（本番どおり） */ .vk_post_title_new { margin-left: 0.4em; font-size: 0.8em; white-space: nowrap; color: red; } /* 投稿リストの文字は本番（VK Blocks）と同じ px 固定。タイトルは h5 なので、見出しの rem 指定に負けないよう指定する。 基本はタイトル 14px・抜粋 12px・ボタン 12px。1 列（col-*-12）のときは幅に合わせて大きくなる （本番の 1200px 以上 21px は、本文の枠と同じく 992px 以上にした。#82）。カードは下の .vk_card_item の指定 */ .vk_post .vk_post_title { font-size: 14px; margin-bottom: 0; } .vk_post .vk_post_excerpt { font-size: 12px; } .vk_post .vk_post_btn { font-size: 12px; } @media (min-width: 576px) { .entry-body > .vk_posts > .vk_post-col-sm-12 .vk_post_title { font-size: 16px; } .entry-body > .vk_posts > .vk_post-col-sm-12 .vk_post_excerpt { font-size: 14px; } } @media (min-width: 768px) { .entry-body > .vk_posts > .vk_post-col-md-12 .vk_post_title { font-size: 18px; } .entry-body > .vk_posts > .vk_post-col-md-12 .vk_post_excerpt { font-size: 14px; } } @media (min-width: 992px) { .entry-body > .vk_posts > .vk_post-col-lg-12 .vk_post_title { font-size: 21px; } .entry-body > .vk_posts > .vk_post-col-lg-12 .vk_post_excerpt { font-size: 14px; } } /* ===== VK Blocks のカード (.vk_card_item): トップの導入事例、Maps・スマートマップ・資料の各ページ ===== * 本番は Lightning G3 の .card / .vk_post / .vk_post-btn-display / .vk_post_imgOuter / .vk_post-col-*、 * Evergreen の .card:not(.card-noborder)（影）、Bootstrap 4 由来の .btn / .btn-primary でできている。 * 枠線なし・影あり・角丸 5px、画像は幅の 62% の高さ（::before の padding-top。トップはマークアップ内の style で 150px）、 * 本文の下に 65px あけて、その下にボタンを絶対配置する。 * 上の .vk_posts > .vk_post（枠線の 2 列カード）が先に効くので、強さを上げて上書きする。 */ .vk_posts > .vk_post.vk_card_item { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; width: calc(100% - 30px); margin: 0 15px 30px; padding: 0; box-sizing: border-box; border: 0; border-radius: 5px; /* 本番の --vk-size-radius */ background: #fff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: 0.3s; } .vk_posts > .vk_post.vk_card_item:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12); transform: translateY(0.1875em); } @media (prefers-reduced-motion: reduce) { .vk_posts > .vk_post.vk_card_item { transition: none; } .vk_posts > .vk_post.vk_card_item:hover { transform: none; } } /* 列の幅: 本番の .vk_posts .vk_post-col-{xs,sm,md,lg}-{2,3,4,6,12} と同じ。576px 以上は sm、768px 以上は md、992px 以上は lg。 1 列 (12) のときだけ下の余白が 20px（本番の .card.vk_post-col-*-12。その幅で効いている列の指定のときだけ）。 1200px 以上の xl・xxl は、移行版は 1200px の段を足さない（#82）ので lg と同じ値のカードを前提にする */ .vk_posts > .vk_post.vk_card_item.vk_post-col-xs-2 { width: calc(16.66% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-xs-3 { width: calc(25% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-xs-4 { width: calc(33.3% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-xs-6 { width: calc(50% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-xs-12 { width: calc(100% - 30px); } @media (min-width: 576px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-sm-2 { width: calc(16.66% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-sm-3 { width: calc(25% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-sm-4 { width: calc(33.3% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-sm-6 { width: calc(50% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-sm-12 { width: calc(100% - 30px); } } @media (min-width: 768px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-md-2 { width: calc(16.66% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-md-3 { width: calc(25% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-md-4 { width: calc(33.3% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-md-6 { width: calc(50% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-md-12 { width: calc(100% - 30px); } } @media (min-width: 992px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-lg-2 { width: calc(16.66% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-lg-3 { width: calc(25% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-lg-4 { width: calc(33.3% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-lg-6 { width: calc(50% - 30px); } .vk_posts > .vk_post.vk_card_item.vk_post-col-lg-12 { width: calc(100% - 30px); } /* 本番は 1200px 以上を xl のクラスで決める。移行版は 1200px の段を足さない（#82）ので、992px 以上を xl の値にする。 xl の値が lg と違うのは /maps/ の下のカード (lg-6 xl-3) だけ。lg-6 の後に置き、4 列にする (#201) */ .vk_posts > .vk_post.vk_card_item.vk_post-col-xl-3 { width: calc(25% - 30px); } } @media (max-width: 575px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-xs-12 { margin-bottom: 20px; } } @media (min-width: 576px) and (max-width: 767px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-sm-12 { margin-bottom: 20px; } } @media (min-width: 768px) and (max-width: 991px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-md-12 { margin-bottom: 20px; } } @media (min-width: 992px) { .vk_posts > .vk_post.vk_card_item.vk_post-col-lg-12 { margin-bottom: 20px; } } /* 画像: 背景画像 (cover) を、幅の 62% の高さで見せる。リンクは画像いっぱい（.card-img-overlay） */ .vk_card_item .vk_post_imgOuter { position: relative; background-size: cover; background-position: center 50%; border-bottom: 1px solid var(--wp-color-border); /* 本番の --vk-color-border-image (#e5e5e5) */ } .vk_card_item .vk_post_imgOuter::before { content: ""; display: block; padding-top: 62%; } .vk_card_item .vk_post_imgOuter a { height: 100%; } .vk_card_item .vk_post_imgOuter > a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition-duration: 0.3s; } .vk_card_item .vk_post_imgOuter .card-img-overlay { position: absolute; inset: 0; padding: 1.25rem; border-radius: calc(-1px + 0.25rem); } /* 本文: 下の 65px はボタンの置き場所（.vk_post-btn-display） */ .vk_card_item .vk_post_body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; } .vk_card_item.vk_post-btn-display .vk_post_body { position: relative; height: 100%; padding-bottom: 65px; } .vk_card_item .vk_post_title { margin: 0; font-size: 16px; } .vk_card_item .vk_post_title a, .vk_posts > .vk_post.vk_card_item a { color: inherit; text-decoration: none; } .vk_card_item .vk_post_excerpt { margin: 0.8rem 0; font-size: 14px; line-height: 1.6; opacity: 0.8; } /* 抜粋の下の余白は、本番は 2 つの規則で決まる。ボタンの直前（後ろから 2 番目）なら 0、 WP のレイアウト (.is-layout-flow / constrained) の中で最後の子でなければ 1.5rem（Lightning の p の規則。強さも本番と同じ）。 */ body .container :is(.is-layout-flow, .is-layout-constrained) p:where(.vk_post_excerpt):where(:not(:last-child)) { margin-bottom: 1.5rem; } .vk_card_item.vk_post-btn-display .card-text:nth-last-child(2) { margin-bottom: 0; } .vk_card_item.vk_post-btn-display .vk_post_btnOuter { position: absolute; bottom: 1.25rem; width: calc(100% - 2.5rem); } /* ボタン: Bootstrap 4 の .btn.btn-primary（本番の「Read more」）。枠は 1px の濃い色、角は丸 */ .vk_posts > .vk_post.vk_card_item a.vk_post_btn { display: inline-block; padding: 0.375rem 1rem; border: 1px solid var(--wp-color-primary-dark); border-radius: 100px; background-color: var(--wp-color-primary); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .vk_posts > .vk_post.vk_card_item.card-yaizu a.vk_post_btn { display: none; } /* 本番の WP 追加 CSS (.card-yaizu .btn-primary { display: none })。スマートマップのカード */ .vk_posts > .vk_post.vk_card_item a.vk_post_btn:hover { background-color: var(--wp-color-primary-vivid); border-color: var(--wp-color-primary); } @media (prefers-reduced-motion: reduce) { .vk_posts > .vk_post.vk_card_item a.vk_post_btn { transition: none; } } /* ===== 投稿のカード (vk_posts-layout-card: 縦並びのカード) (#155) ===== * seminar2025 の「セミナー開催報告」。本番は Lightning G3 の style-theme-json.css（.card / .vk_post / * .vk_post_imgOuter / .vk_post-col-*）と Lightning の style.css（影・ラベルの丸み）で作っている。 * 上の .vk_posts > .vk_post（枠線の 2 列カード）が先に効くため、縦並びのカードだけ * .vk_posts-layout-card で絞って上書きする（横長は layout-card-horizontal で別クラス、トップの導入事例は * vk_card_item なので、どちらも影響しない）。 */ .vk_posts-layout-card > .vk_post.card { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; width: calc(100% - 30px); margin: 0 15px 30px; padding: 0; box-sizing: border-box; border: 0; border-radius: 5px; /* 本番の --vk-size-radius */ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: 0.3s; } .vk_posts-layout-card > .vk_post.card:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12); transform: translateY(0.1875em); } @media (prefers-reduced-motion: reduce) { .vk_posts-layout-card > .vk_post.card { transition: none; } .vk_posts-layout-card > .vk_post.card:hover { transform: none; } } /* 列の幅: 本番の .vk_posts .vk_post-col-{xs,sm,md,lg}-{2,3,4,6,12} と同じ（33.3% も本番どおり）。 576px 以上は sm、768px 以上は md、992px 以上は lg。1200px 以上の xl・xxl は lg と同じ値なので足さない (#82)。 1 列 (12) のときだけ下の余白が 20px（本番の .card.vk_post-col-*-12。その幅で効いている列の指定のときだけ）。 */ .vk_posts-layout-card > .vk_post.card.vk_post-col-xs-2 { width: calc(16.66% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-xs-3 { width: calc(25% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-xs-4 { width: calc(33.3% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-xs-6 { width: calc(50% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-xs-12 { width: calc(100% - 30px); } @media (max-width: 575px) { .vk_posts-layout-card > .vk_post.card.vk_post-col-xs-12 { margin-bottom: 20px; } } @media (min-width: 576px) { .vk_posts-layout-card > .vk_post.card.vk_post-col-sm-2 { width: calc(16.66% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-sm-3 { width: calc(25% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-sm-4 { width: calc(33.3% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-sm-6 { width: calc(50% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-sm-12 { width: calc(100% - 30px); } } @media (min-width: 576px) and (max-width: 767px) { .vk_posts-layout-card > .vk_post.card.vk_post-col-sm-12 { margin-bottom: 20px; } } @media (min-width: 768px) { .vk_posts-layout-card > .vk_post.card.vk_post-col-md-2 { width: calc(16.66% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-md-3 { width: calc(25% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-md-4 { width: calc(33.3% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-md-6 { width: calc(50% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-md-12 { width: calc(100% - 30px); } } @media (min-width: 768px) and (max-width: 991px) { .vk_posts-layout-card > .vk_post.card.vk_post-col-md-12 { margin-bottom: 20px; } } @media (min-width: 992px) { .vk_posts-layout-card > .vk_post.card.vk_post-col-lg-2 { width: calc(16.66% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-lg-3 { width: calc(25% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-lg-4 { width: calc(33.3% - 30px); } .vk_posts-layout-card > .vk_post.card.vk_post-col-lg-6 { width: calc(50% - 30px); } /* 本番は 1200px 以上を xl のクラスで決める。移行版は 1200px の段を足さない（#82）ので、lg と xl が同じ値のカードを前提にする */ .vk_posts-layout-card > .vk_post.card.vk_post-col-lg-12 { width: calc(100% - 30px); margin-bottom: 20px; } } /* 画像: 背景画像 (cover) を、幅の 62% の高さで見せる（::before の padding-top）。 は本番どおり画面外に逃がす。画像全体がリンクになるのは、リンクの中の .card-img-overlay が画像いっぱいに広がっているため。 画像が 2 枚並んで見えたのは、この が画面内に出ていたため。 */ .vk_posts-layout-card .vk_post_imgOuter { position: relative; min-height: 0; line-height: normal; background-size: cover; background-position: center 50%; border-bottom: 1px solid var(--wp-color-border); /* 本番の --vk-color-border-image (#e5e5e5) */ } .vk_posts-layout-card .vk_post_imgOuter::before { content: ""; display: block; padding-top: 62%; } .vk_posts-layout-card .vk_post_imgOuter .card-img-overlay { position: absolute; inset: 0; padding: 1.25rem; border-radius: 3px; } .vk_posts-layout-card .vk_post_imgOuter_img { position: absolute; left: -9999px; } /* カテゴリのラベル: 右上から 5px、10px の文字の丸いラベル（本番の .vk_posts .vk_post_imgOuter_singleTermLabel）。 */ .vk_posts-layout-card .vk_post_imgOuter_singleTermLabel { position: absolute; top: 5px; right: 5px; z-index: 100; display: block; padding: 0.1em 1em; border-radius: 100px; /* 本番の --vk-size-radius-btn-primary */ font-size: 10px; line-height: normal; } /* 本文: 余白は rem（991px 以下は html が 14px なので本番と同じく縮む）。タイトルの太さ・大きさは上の .vk_post .vk_post_title。 */ .vk_posts-layout-card .vk_post_body { box-sizing: border-box; min-height: 1px; padding: 1.25rem; } .vk_posts-layout-card .vk_post_title a { color: inherit; text-decoration: none; } .vk_posts-layout-card .vk_post_date { margin-top: 0.4rem; font-size: 11px; line-height: normal; color: var(--wp-color-text-light); } /* ===== 横長のカード (vk_posts-layout-card-horizontal / .card-horizontal) ===== * 子ページ一覧 (VK Blocks Pro の child-page) の横長カード。 * 本番は Lightning G3 の style-theme-json.css (.card / .card-horizontal / * .vk_post-btn-display / .card-post) と Bootstrap 4 の .row / .no-gutters / * .col-5 / .col-7 / .btn で「左に画像 (col-5)、右に本文 (col-7)」の横並びにし、 * 画像は背景画像 (cover) として表示、ボタンは本文の右下に絶対配置している。 * 移行版は上の .vk_posts > .vk_post (縦並びのグリッドカード用) が先に効くため、 * 横長カードだけ .card-horizontal で絞って上書きする (#105 のグリッドカードの * 高さ揃えには影響させない)。文字の大きさは別 PR (#126) の担当なので触らない。 */ .vk_posts .vk_post.card-horizontal { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; width: calc(100% - 30px); margin: 0 15px 15px; padding: 0; box-sizing: border-box; border: 0; border-radius: 5px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: 0.3s; } .vk_posts .vk_post.card-horizontal:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12); transform: translateY(0.1875em); } @media (prefers-reduced-motion: reduce) { .vk_posts .vk_post.card-horizontal { transition: none; } .vk_posts .vk_post.card-horizontal:hover { transform: none; } } /* 列の幅: 本番の .vk_posts .vk_post-col-{sm,md,lg}-{6,12} と同じ。 576px 以上は sm、768px 以上は md、992px 以上は lg。 余白は本番どおり 12 列 (1 列表示) は 15px、6 列 (2 列表示) は 30px。 */ .vk_posts .vk_post.card-horizontal.vk_post-col-xs-12 { width: calc(100% - 30px); } @media (min-width: 576px) { .vk_posts .vk_post.card-horizontal.vk_post-col-sm-6 { width: calc(50% - 30px); margin-bottom: 30px; } .vk_posts .vk_post.card-horizontal.vk_post-col-sm-12 { width: calc(100% - 30px); margin-bottom: 15px; } } @media (min-width: 768px) { .vk_posts .vk_post.card-horizontal.vk_post-col-md-6 { width: calc(50% - 30px); margin-bottom: 30px; } .vk_posts .vk_post.card-horizontal.vk_post-col-md-12 { width: calc(100% - 30px); margin-bottom: 15px; } } @media (min-width: 992px) { .vk_posts .vk_post.card-horizontal.vk_post-col-lg-6 { width: calc(50% - 30px); margin-bottom: 30px; } .vk_posts .vk_post.card-horizontal.vk_post-col-lg-12 { width: calc(100% - 30px); margin-bottom: 15px; } } /* .row.no-gutters: 左右の余白なしの横並び。.col-5 / .col-7 は 5:7 に分ける。 */ .card-horizontal .row { display: flex; flex-wrap: wrap; margin: 0; height: 100%; } .card-horizontal .col-5, .card-horizontal .col-7 { position: relative; box-sizing: border-box; padding: 0; min-height: 1px; } .card-horizontal .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .card-horizontal .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } /* 画像: 背景画像 (cover) で本文の高さいっぱいに切り抜く。 は本番どおり画面外に逃がし (高さだけ残る)。画像全体がリンクになるのは、リンクの中の .card-img-overlay が 画像いっぱいに広がっているため。 */ .card-horizontal .vk_post_imgOuter { position: relative; height: 100%; line-height: normal; /* の下の隙間を本番と同じにする */ background-size: cover; background-position: center 50%; border: 0; border-right: 1px solid var(--wp-color-border); /* 本番の --vk-color-border-image (#e5e5e5) */ } .card-horizontal .vk_post_imgOuter .card-img-overlay { position: absolute; inset: 0; } /* 本番の .card-img-use-bg: 見えない が列の幅いっぱいに伸び、カードの最小の高さを決める。 */ .card-horizontal .vk_post_imgOuter_img { display: inline; position: relative; left: -9999px; width: 100%; height: auto; } /* 本文 (余白は rem。991px 以下は html が 14px なので本番と同じく縮む): ボタンなしは下 1.5em、ボタンあり (.vk_post-btn-display) は絶対配置のボタンの分 だけ 65px 空ける。 */ .card-horizontal .card-body { position: relative; box-sizing: border-box; height: 100%; padding: 1.25rem 1.25rem 1.5em; } .card-horizontal.vk_post-btn-display .card-body { padding-bottom: 65px; } .card-horizontal .vk_post_title { margin: 0; } /* 日付 (/address-normalization/ のカードだけ表示): 本番の .vk_post .vk_post_date と同じ。 */ .card-horizontal .vk_post_date { margin-top: 0.4rem; font-size: 11px; line-height: normal; color: var(--wp-color-text-light); } /* ボタンがあるカードは、抜粋の下の余白をなくす (本番の .vk_post-btn-display .card-text:nth-last-child(2))。 */ .card-horizontal.vk_post-btn-display .card-text:nth-last-child(2) { margin-bottom: 0; } .card-horizontal .vk_post_title a, .card-horizontal .vk_post_excerpt { color: inherit; text-decoration: none; } /* 抜粋の余白・行の高さ・薄さ (本番の .vk_post .vk_post_excerpt)。 */ .card-horizontal .vk_post_excerpt { margin: 0.8rem 0; line-height: 1.6; opacity: 0.8; } .card-horizontal .vk_post_btnOuter { position: absolute; right: 1.25rem; bottom: 1.25rem; width: calc(100% - 2.5rem); margin: 0; text-align: right; } /* もっと見るボタン: Bootstrap の .btn.btn-sm.btn-primary を丸い塗りのボタンにする。 */ .card-horizontal .vk_post_btn { display: inline-block; padding: 0.25rem 1rem; border: 1px solid var(--wp-color-primary-dark); border-radius: 100px; line-height: 1.5; /* Bootstrap の .btn の行の高さ */ background-color: var(--wp-color-primary); color: #fff; text-decoration: none; white-space: nowrap; } /* ===== VK Blocks の部品（ステップ・チェックマーク・重なるカード・枠線）(#155) ===== * 本番 (VK Blocks 1.57.1.0 の block-build.css・VK ExUnit・Lightning G3 の style.css) の規則を移したもの。 * 本番は VK のサイズ変数 (--vk-size-text など) で値を作っているが、移行版には変数がないので、 * 本番の計算結果（--vk-size-text は 16px 固定、--vk-margin-md は --wp-margin-md と同じ）をそのまま書く。 */ /* --- 番号付きのステップ (vk_step) --- * 左に 50px の丸い番号（dot）、その右に見出しと説明。vk_step_item_lineStyle-default の項目は、 * 丸の下から次の項目へ縦の線を引く（::before）。丸の色・塗りは has-*-color / has-*-background-color のクラスが決める。 * 以前は dot の規則がなく、「STEP」「1」が普通の行として並び、塗りの丸は横いっぱいの帯になっていた。 */ .vk_step, body .container .is-layout-flow > .vk_step { margin: 2em auto; } /* WP コアの :root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 } が、本番では .vk_step の 2em に勝つ。 /smartmap/ の重なるカード（constrained のグループ）の最初の子がステップなので、上の余白を 0 にする */ .is-layout-constrained > .vk_step:first-child { margin-top: 0; } .vk_step .vk_step_item { position: relative; padding: 0 0 0 calc(16px * 4.5); margin: 0 auto; } .vk_step .vk_step_item h3:first-of-type, .vk_step .vk_step_item h4:first-of-type { padding-top: calc(16px * 0.5); margin-top: 0; } .vk_step .vk_step_item_content::after { border: 1px solid transparent; content: ""; display: block; clear: both; } .vk_step .vk_step_item_content > :last-child { margin-bottom: var(--wp-margin-md); } .vk_step .vk_step_item_content h1, .vk_step .vk_step_item_content h2, .vk_step .vk_step_item_content h3, .vk_step .vk_step_item_content h4, .vk_step .vk_step_item_content h5, .vk_step .vk_step_item_content h6 { margin-left: unset; margin-right: unset; } .vk_step .vk_step_item_content > p:first-child { margin-bottom: 0.3em; line-height: 1; color: #666; } .vk_step .vk_step_item .vk_step_item_caption { margin-bottom: 0.5em; color: #666; } .vk_step .vk_step_item .vk_step_item_dot { display: block; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 50px; height: 50px; border-radius: 50%; padding: 9px 0; text-align: center; /* Lightning の style.css: 数字は Roboto、大きさは 1.2rem。Roboto は入れていないので、サイトの文字（Noto Sans JP）に落とす。 何もないと OS の既定の細い文字になり、本番より弱く見える */ font-family: Roboto, "Noto Sans JP Variable", "Noto Sans JP", sans-serif; font-size: 1.2rem; } .vk_step .vk_step_item .vk_step_item_dot_num { line-height: calc(16px * 1.2); } .vk_step .vk_step_item .vk_step_item_dot.vk_step_item_style-default { color: #fff; } .vk_step .vk_step_item .vk_step_item_dot.vk_step_item_style-default:not(.has-background) { background-color: #337ab7; } .vk_step .vk_step_item .vk_step_item_dot.vk_step_item_style-outlined { border: 2px solid; } .vk_step .vk_step_item .vk_step_item_dot.vk_step_item_style-outlined:not(.has-text-color) { color: #337ab7; } .vk_step .vk_step_item .vk_step_item_dot_caption { font-size: calc(16px * 0.5); line-height: calc(16px * 0.875); } .vk_step_item_lineStyle-default::before { content: ""; width: 3px; background: rgba(0, 0, 0, 0.15); display: block; position: absolute; top: 54px; left: 23px; bottom: 4px; } /* --- チェックマークの箇条書き (is-style-vk-check-mark) --- * 本番はマークを Font Awesome のグリフ (fa-check, \f00c) の ::before で描く。フォントは使わない方針なので、 * 上の「Font Awesome アイコン」と同じ mask 方式で fa-check.svg を当てる。グリフの幅は 0.875em（viewBox 448 / 512）。 * 色は文字色に追従（本番も ::before に色指定なし）。 */ ul.is-style-vk-check-mark, ol.is-style-vk-check-mark { padding-inline-start: 2em; } ul.is-style-vk-check-mark li, ol.is-style-vk-check-mark li { list-style: none; position: relative; margin: calc(16px * 0.8) 0; line-height: calc(16px * 1.65); } ul.is-style-vk-check-mark li::before, ol.is-style-vk-check-mark li::before { content: ""; position: absolute; top: 0; left: -1.5em; width: 0.875em; height: calc(16px * 1.65); /* 項目の 1 行目の高さ（折り返しても伸ばさない） */ background-color: currentColor; -webkit-mask: url(../images/icons/fa-check.svg) no-repeat center / 100% 1em; mask: url(../images/icons/fa-check.svg) no-repeat center / 100% 1em; } @media (forced-colors: active) { ul.is-style-vk-check-mark li::before, ol.is-style-vk-check-mark li::before { forced-color-adjust: none; background-color: CanvasText; } } /* --- 上に重なるカード (vk-block-top-over-*) --- * 直前のブロック（カバーなど）の上に、rem 単位で重ねる。991px 以下は html が 14px なので、重なりも縮む（本番と同じ）。 * md は 7rem（1280px で 112px）。 */ .vk-block-top-over-lg { margin: -14rem auto 0; z-index: 1; position: relative; } .vk-block-top-over-md { margin: -7rem auto 0; z-index: 1; position: relative; } .vk-block-top-over-sm { margin: -3.5rem auto 0; z-index: 1; position: relative; } /* 角丸 (Lightning の .vk-size-radius。--vk-size-radius は 5px) */ .vk-size-radius { border-radius: 5px; } /* --- 枠線付きのグループ (has-border-color) --- * WP コアは、インライン style に border-width・border-color だけを書き、線種は html :where(.has-border-color) で solid にする。 * その規則がなく、線が出ていなかった。本番と同じ強さ (0,0,1) にして、クラスで border-style を書いたものには負けるようにする。 */ html :where(.has-border-color) { border-style: solid; } /* VK Blocks の block-build.css。外枠ブロックは has-border-color が付いても線を引かない（本番と同じ） */ .wp-block-vk-blocks-outer.vk_outer.has-border-color { border-style: none; } /* 線の色のプリセット（WP が !important で当てる。本番と同じ値）。線を描くようにしたので、色のクラスがないと文字色の線になる */ .has-cyan-bluish-gray-border-color { border-color: #abb8c3 !important; } .has-luminous-vivid-amber-border-color { border-color: #fcb900 !important; } .has-luminous-vivid-orange-border-color { border-color: #ff6900 !important; } /* WP のカバー (.wp-block-cover.aligncenter) は、中の文字を中央揃えにしない。上の .aligncenter は画像向けに text-align: center を持つため、カバーの中の文字（枠付きグループなど）まで中央になっていた。 */ .wp-block-cover.aligncenter { text-align: start; } /* ===== 埋め込み・ブログカード (wp-block-embed / blog-card) ===== * 本番の WP コア (block-library) と Lightning の blog-card.css を移したもの (#163)。 * 採用インタビューの末尾の求人一覧 (HERP) のカード。枠の色と角の丸みは本番の --vk-color-border・--vk-size-radius の値。 * 画像は右側 (本文 66.67%・画像 33.33%)。575px 以下は 1 列で、flex-flow: wrap-reverse により画像が本文の上に来る。 */ figure.wp-block-embed { margin: 0 0 1em; } .wp-block-embed { overflow-wrap: break-word; } .wp-block-embed :where(figcaption) { margin-bottom: 1em; margin-top: 0.5em; } .wp-block-embed iframe { max-width: 100%; } .wp-block-embed__wrapper { position: relative; } .blog-card { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 5px; display: flex; flex-flow: wrap-reverse; } .blog-card-image-outer, .blog-card-body-outer { padding: 1.5rem; } @media (min-width: 576px) { .blog-card-image-outer { width: 33.3333%; } } .blog-card-body-outer { padding-top: 0; } @media (min-width: 576px) { .blog-card-body-outer { padding: 1.5rem; width: 66.6667%; } } .blog-card-title { font-size: 1.125rem; } .blog-card-title a { color: #333; } .blog-card-image-frame { border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.12); display: block; overflow: hidden; } .blog-card-image-src { display: block; } .blog-card-site-title { line-height: normal; } /* 本番は body の line-height が normal */ .blog-card-site-title a { display: flex; align-items: center; } .blog-card-site-title a img { margin-right: 10px; } /* ===== Table ===== * 本番 (WP コアの block-library + Lightning の style-theme-json.css + VK Blocks Pro 1.57 の block-build.css) の * wp-block-table と同じセレクタ・同じ強さ・同じ並びで移したもの (#163)。 * 文字は .875rem (--vk-size-text-sm。991px 以下は 14px 基準なので 12.25px)、セルの余白は .5em。 * 本番は body の line-height が normal なので、表の中は normal にする (.entry-body の 1.7 を引き継がない)。 */ .wp-block-table { overflow-x: auto; } .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table .has-fixed-layout { table-layout: fixed; width: 100%; } .wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th { word-break: break-word; } .wp-block-table thead { border-bottom: 3px solid; } .wp-block-table td, .wp-block-table th { border: 1px solid; padding: 0.5em; } .wp-block-table.is-style-stripes { background-color: initial; border-collapse: inherit; border-spacing: 0; } .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) { background-color: #f0f0f0; } .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th { border-color: transparent; } .wp-block-table.is-style-stripes { border-bottom: 1px solid #f0f0f0; } .wp-block-table table[style*="border-style"] td, .wp-block-table table[style*="border-style"] th, .wp-block-table table[style*="border-style"] tr, .wp-block-table table[style*="border-style"] > * { border-style: inherit; } .wp-block-table table[style*="border-width"] td, .wp-block-table table[style*="border-width"] th, .wp-block-table table[style*="border-width"] tr, .wp-block-table table[style*="border-width"] > * { border-style: inherit; border-width: inherit; } /* style-theme-json.css (figure の margin: 0 0 1em は上の margin-bottom 1.5rem に置き換わる) */ .wp-block-table { margin: 0 0 1.5rem; border-color: rgba(0, 0, 0, 0.06); line-height: normal; } .wp-block-table:where(:not([class*="font-size"])) { font-size: 0.875rem; } .wp-block-table :is(table, thead, tbody, tfoot, th, td) { border-color: inherit; } .wp-block-table thead th.has-text-align-right { text-align: center; } /* 表の中のリスト。本番はブラウザ既定の上の余白 1em、Lightning の ol, ul { padding-left: 1.5em }・li { margin: .5em 0 } がそのまま効く (表の文字は 14px なので 14px・21px・7px)。本文のリスト (.entry-body ul・li は rem 基準) より強さを上げて合わせる */ .entry-body .wp-block-table :is(ul, ol) { margin-top: 1em; padding-left: 1.5em; } .entry-body .wp-block-table li { margin: 0.5em 0; } /* VK Blocks Pro */ .wp-block-table thead th { font-weight: bold; } .wp-block-table.is-style-vk-table-border-top-bottom table, .wp-block-table.is-style-vk-table-border-top-bottom th, .wp-block-table.is-style-vk-table-border-top-bottom td { border-left: none; border-right: none; } .wp-block-table.is-style-vk-table-border table:where(:not(.has-border-color)) th, .wp-block-table.is-style-vk-table-border table:where(:not(.has-border-color)) td { border: 1px solid rgba(0, 0, 0, 0.06); } .wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1) { background-color: #f0f0f0; } .wp-block-table.is-style-vk-table-border-stripes table:where(:not(.has-border-color)) th, .wp-block-table.is-style-vk-table-border-stripes table:where(:not(.has-border-color)) td { border: 1px solid rgba(0, 0, 0, 0.06); } /* ===== Spacer block (core) ===== */ .wp-block-spacer { display: block; height: 1rem; } /* ===== Separator ===== */ /* 本番に hr 用の margin の指定はなく、ブラウザ既定 (上下 .5em、左右 auto) のまま。余白が要るものは ブロックの style (var(--wp--preset--spacing--40) など) が持つ。ここで 2rem を付けると style のないものに 余分な余白が付き、0 にするとブラウザ既定の .5em まで消える (#113)。左右は触らない */ /* 線は本番どおり上だけ 2px・rgba(0,0,0,.06) (WP コアの `.wp-block-separator { border-width: 2px 0 0 }` と Lightning の `hr { border: 1px solid var(--vk-color-border-hr) }`)。1px の #e5e5e5 だと 1px 低くなる (#163) */ .wp-block-separator { border: 0; border-top: 2px solid rgba(0, 0, 0, 0.06); margin-top: 0.5em; margin-bottom: 0.5em; } /* WP のレイアウト (flow・constrained) の直下では、本番は上下とも 0 (WP の `margin-block: 24px 0` の上が、見出し・hr では 0 に効く) */ :is(.is-layout-flow, .is-layout-constrained) > .wp-block-separator { margin-top: 0; margin-bottom: 0; } /* ===== bg-offset (Geolonia Maps / SmartCity / 住所ソリューション の左右オフセット背景) ===== * .vk-bg-offset は wp-block-group.alignfull の中で淡いオレンジ帯を表現する * セクション。背景は別 .wp-block-cover (.vk-bg-offset-bg) として absolute * positioning される。 */ .vk-bg-offset { position: relative; padding: 0; overflow: hidden; } .wp-block-group.vk-bg-offset > .vk-bg-offset-bg, .vk-bg-offset > .vk-bg-offset-bg { position: absolute; inset: 0; display: block; min-height: 0; padding: 0; max-width: none; margin-left: 0; margin-right: 0; z-index: 0; } .vk-bg-offset > *:not(.vk-bg-offset-bg) { position: relative; z-index: 1; } /* ===== vk Inline font size (e.g. 28px 等の number) ===== */ .vk_inline-font-size { font-size: inherit; } /* ===== FAQ アコーディオン (vk_faq 等) — 基本崩れない最低限 ===== */ .veu_qaItem { margin: 1.25rem 0; padding: 1rem 1.5rem; border: 1px solid var(--wp-color-border); border-radius: 6px; } .veu_qaItem dt { font-weight: 700; margin-bottom: 0.5rem; } .veu_qaItem dd { margin: 0; color: var(--wp-color-text-light); } /* ===== Latest articles (新着情報の WP post list) ===== * 本番は左 = 日付 / 右 = タイトル の 2 列テーブル風表示。 */ .wp-block-latest-posts__list, ul.wp-block-latest-posts { list-style: none; padding: 0; margin: 0; } .wp-block-latest-posts__list > li, ul.wp-block-latest-posts > li { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--wp-color-border); font-size: 0.95rem; } .wp-block-latest-posts__post-date, .wp-block-latest-posts__list li time { color: var(--wp-color-text-light); font-size: 0.85rem; } .wp-block-latest-posts__list a { color: inherit; text-decoration: none; } .wp-block-latest-posts__list a:hover { text-decoration: underline; } /* ===== Feedzy (Graphia / Developer's Blog RSS) ===== * 本番は Feedzy プラグインの CSS（/wp-content/plugins/feedzy-rss-feeds/css/feedzy-rss-feeds.css。index.astro で読み込む。 * 区切り線・タイトルの太字・日付の斜体はこちら）に、WP の追加 CSS（geonicdb.astro の