/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
*/
/* ================================================================
Font loading — Noto Sans JP / Noto Serif JP / JetBrains Mono
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;700&display=swap');
/* ================================================================
Tokens (mirror theme.json for non-block contexts: UM, plugin output)
================================================================ */
:root {
--bg-primary: #FEFEFE;
--bg-soft: #FAFAF7;
--brand-deep: #006330;
--brand-dark: #00331E;
--brand-mid: #004726;
--accent-green: #4EB031;
--accent-green-dim: #308F31;
--accent-light: #D1EEC2;
--text-body: #111E17;
--text-secondary: #3D3D3A;
--text-muted: #526465;
--text-stone: #6B6A64;
--neutral-100: #EDEAE3;
--neutral-200: #DBD4CE;
--neutral-300: #AEAFAF;
--border-soft: #E8E6DC;
--font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
--font-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco, monospace;
--font-display: "Cormorant Garamond", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
--whisper: 0 4px 24px rgba(0, 0, 0, 0.05);
--whisper-strong: 0 6px 32px rgba(0, 0, 0, 0.07);
--ring: 0 0 0 1px var(--border-soft);
}
/* ================================================================
Global resets / typography
================================================================ */
html { font-feature-settings: "palt" 1; }
body {
background: var(--bg-primary);
color: var(--text-body);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
strong, b { font-weight: 500; }
em, i { font-style: normal; color: var(--brand-deep); }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { color: var(--brand-mid); }
hr {
border: 0;
border-top: 1px solid var(--border-soft);
margin: 64px 0;
}
/* Numbers in stacks: tabular-nums */
.zb-num,
.zb-resource-meta,
.metric-value {
font-variant-numeric: tabular-nums;
}
/* ================================================================
Site header / footer (block theme parts)
================================================================ */
.zb-site-header {
background: var(--bg-primary);
border-bottom: 1px solid var(--border-soft);
}
.zb-site-header .wp-block-site-title a {
font-family: var(--font-sans);
font-weight: 500;
font-size: 18px;
color: var(--brand-deep);
letter-spacing: 0.02em;
}
.zb-site-footer {
border-top: 1px solid var(--border-soft);
background: var(--bg-soft);
margin-top: 96px;
}
/* ================================================================
Section labels (kami pattern: 01 — RESOURCES)
================================================================ */
.zb-section-num {
display: block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 8px;
}
.zb-section-title {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 500;
line-height: 1.25;
color: var(--text-body);
margin: 0 0 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-soft);
}
.zb-section-lede {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.65;
color: var(--text-muted);
margin: -4px 0 32px;
}
/* ================================================================
Page hero / title
================================================================ */
.zb-page-hero {
padding: 96px 24px 48px;
max-width: 1120px;
margin: 0 auto;
border-bottom: 1px solid var(--border-soft);
}
.zb-page-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-stone);
margin-bottom: 12px;
}
.zb-page-title {
font-family: var(--font-sans);
font-size: 44px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--text-body);
margin: 0 0 16px;
}
.zb-page-subtitle {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
color: var(--text-muted);
max-width: 640px;
margin: 0;
}
/* WP block heading override on partner-like pages */
.zb-section { padding: 48px 24px; max-width: 1120px; margin: 0 auto; }
.zb-section h2 { font-size: 28px; font-weight: 500; line-height: 1.25; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
/* ================================================================
Resource cards (partner page)
================================================================ */
.zb-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
}
.zb-resource-card {
background: var(--bg-soft);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 24px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
display: flex;
flex-direction: column;
gap: 8px;
}
.zb-resource-card:hover {
box-shadow: var(--whisper);
border-color: var(--neutral-200);
}
.zb-resource-card .zb-resource-kind {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-stone);
}
.zb-resource-card .zb-resource-title {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--text-body);
margin: 4px 0 0;
line-height: 1.4;
}
.zb-resource-card .zb-resource-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-stone);
margin: 0 0 12px;
letter-spacing: 0.04em;
}
.zb-resource-card .zb-dl-button {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
background: transparent;
color: var(--brand-deep);
padding: 8px 14px;
border: 1px solid var(--brand-deep);
border-radius: 4px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
transition: background 0.15s ease, color 0.15s ease;
text-decoration: none;
margin-top: auto;
}
.zb-resource-card .zb-dl-button:hover {
background: var(--brand-deep);
color: #fff;
}
.zb-resource-card .zb-dl-button::after {
content: "↓";
font-family: var(--font-mono);
margin-left: 2px;
}
/* ================================================================
Video embed
================================================================ */
.zb-video-wrap {
position: relative;
padding-top: 56.25%;
background: var(--text-body);
border-radius: 8px;
overflow: hidden;
margin: 0;
border: 1px solid var(--border-soft);
}
.zb-video-wrap iframe,
.zb-video-wrap > div {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: 0;
}
.zb-video-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
color: rgba(255,255,255,0.5);
gap: 12px;
}
.zb-video-placeholder .zb-play-icon {
width: 56px; height: 56px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: rgba(255,255,255,0.6);
}
.zb-video-placeholder .zb-vp-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ================================================================
SFA callout (external/internal/admin only)
================================================================ */
.zb-sfa-callout {
background: var(--accent-light);
border-left: 3px solid var(--brand-deep);
border-radius: 0 6px 6px 0;
padding: 28px 32px;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.zb-sfa-callout .zb-sfa-tag {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-deep);
}
.zb-sfa-callout h3 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 500;
margin: 0;
color: var(--text-body);
}
.zb-sfa-callout p {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin: 0 0 8px;
}
.zb-sfa-callout .zb-sfa-button {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
background: var(--brand-deep);
color: #fff;
padding: 11px 20px;
border-radius: 4px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
transition: background 0.15s ease;
}
.zb-sfa-callout .zb-sfa-button:hover {
background: var(--brand-mid);
}
.zb-sfa-callout .zb-sfa-button::after {
content: "→";
font-family: var(--font-mono);
}
/* ================================================================
Ultimate Member: Login form (kami-styled card)
================================================================ */
.um {
max-width: 440px !important;
margin: 88px auto 96px !important;
padding: 0 24px;
}
.um .um-form {
background: var(--bg-primary) !important;
padding: 40px 36px !important;
border: 1px solid var(--border-soft) !important;
border-radius: 8px !important;
box-shadow: var(--whisper);
}
.um .um-row { margin: 0 0 16px !important; }
.um .um-field-label label {
display: block;
font-family: var(--font-sans) !important;
font-weight: 500 !important;
color: var(--text-secondary) !important;
font-size: 13px !important;
margin-bottom: 6px !important;
letter-spacing: 0.02em;
}
.um .um-form input[type="text"],
.um .um-form input[type="email"],
.um .um-form input[type="password"] {
width: 100% !important;
border: 1px solid var(--neutral-200) !important;
border-radius: 4px !important;
padding: 12px 14px !important;
font-family: var(--font-sans) !important;
font-size: 15px !important;
color: var(--text-body) !important;
background: #fff !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.um .um-form input[type="text"]:focus,
.um .um-form input[type="email"]:focus,
.um .um-form input[type="password"]:focus {
border-color: var(--brand-deep) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--accent-light) !important;
}
/* "Remember me" checkbox row */
.um .um-checkbox-line { font-size: 13px !important; color: var(--text-muted) !important; }
/* Buttons (UM primary) */
.um-button,
input.um-button,
.um button[type="submit"] {
width: 100% !important;
background: var(--brand-deep) !important;
border: none !important;
border-radius: 4px !important;
color: #fff !important;
font-family: var(--font-sans) !important;
font-weight: 500 !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
padding: 13px 24px !important;
transition: background 0.15s ease;
cursor: pointer;
box-shadow: none !important;
}
.um-button:hover,
.um button[type="submit"]:hover {
background: var(--brand-mid) !important;
}
.um-button.um-alt {
background: transparent !important;
border: 1px solid var(--neutral-200) !important;
color: var(--text-muted) !important;
}
.um-button.um-alt:hover {
background: var(--neutral-100) !important;
color: var(--text-body) !important;
}
/* Forgot password link */
.um a.um-link-alt,
.um .um-modal-btn {
color: var(--brand-deep) !important;
font-family: var(--font-sans) !important;
font-size: 13px !important;
letter-spacing: 0.02em !important;
}
.um a.um-link-alt:hover { color: var(--brand-mid) !important; text-decoration: underline !important; }
/* Errors / notices */
.um-notice {
border-radius: 4px !important;
padding: 12px 16px !important;
font-family: var(--font-sans) !important;
font-size: 13px !important;
border: 1px solid !important;
margin: 0 0 16px !important;
}
.um-notice.err {
background: #FFF5F2 !important;
border-color: #E7715D !important;
color: #B43A1F !important;
}
/* Page title above UM form (login/profile/etc) */
.wp-block-post-title {
text-align: center;
margin: 88px auto 0;
max-width: 440px;
font-family: var(--font-sans);
font-size: 28px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-body);
position: relative;
}
.wp-block-post-title::before {
content: "ACCESS";
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--brand-deep);
margin-bottom: 8px;
text-transform: uppercase;
}
/* ================================================================
Profile / account page tweaks
================================================================ */
.um-account-side ul li a,
.um-tab-link {
font-family: var(--font-sans) !important;
letter-spacing: 0.02em !important;
}
/* ================================================================
Partner portal page (page-id-20) — WP テーマ干渉 reset
================================================================
- Twenty Twenty-Five 子テーマの site header / post title /
constrained layout を解除して 100% 幅をポータルに渡す
================================================================ */
body.page-id-20 > .wp-site-blocks > header,
body.page-id-20 .wp-block-template-part:not(.zb-sticky-header):first-child,
body.page-id-20 .wp-block-post-title,
body.page-id-20 .wp-block-post-featured-image {
display: none !important;
}
body.page-id-20 main.wp-block-group {
margin-top: 0 !important;
max-width: none !important;
padding: 0 !important;
}
body.page-id-20 main > .wp-block-group {
padding: 0 !important;
max-width: none !important;
}
body.page-id-20 .wp-block-post-content {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Twenty Twenty-Five constrained layout の child 全部 unbind */
body.page-id-20 .is-layout-constrained > *:not(.alignwide):not(.alignfull) {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* WP の wpautop が挿入する空 を消す */
body.page-id-20 .zb-portal-page p:empty,
body.page-id-20 main > p:empty { display: none; }
/* ================================================================
Partner portal v3 — Notion DESIGN.md 準拠
================================================================
SSOT: _shared/references/design-sources/inspirations/notion/DESIGN.md
- ボタンは 8px 角丸の矩形 (NOT pill)
- Notion Sans (Inter-based) + 日本語は Noto Sans JP
- Card は 12px 角丸 + 1px hairline
- Hero: brand-navy + 散ったブランド色 dot + 8px 矩形 purple CTA
================================================================ */
:root {
/* Brand & Primary — 緑主軸 (図面バンク ブランド色) */
--nt-primary: #3A6236; /* 図面バンク ブランドグリーン */
--nt-primary-pressed: #2C4E2A; /* hover/pressed */
--nt-primary-deep: #1F3D1B; /* 濃いめの緑（badge テキスト用） */
--nt-on-primary: #ffffff;
--nt-navy: #0a1530;
--nt-navy-deep: #070f24;
--nt-navy-mid: #1a2a52;
--nt-link-blue: #0075de;
/* Brand spectrum (decorative dots) */
--nt-pink: #ff64c8;
--nt-orange: #dd5b00;
--nt-orange-deep: #793400;
--nt-purple-800: #1F3D1B; /* deep green (旧 brand-purple-800 を緑化) */
--nt-teal: #2a9d99;
--nt-green: #1aae39;
--nt-yellow: #f5d75e;
/* Card tints (pastel feature cards) */
--nt-tint-peach: #ffe8d4;
--nt-tint-rose: #fde0ec;
--nt-tint-mint: #d9f3e1;
--nt-tint-lavender: #E4F0DC; /* 薄緑（sage、旧 lavender を緑化） */
--nt-tint-sky: #dcecfa;
--nt-tint-yellow: #fef7d6;
--nt-tint-yellow-bold: #f9e79f;
--nt-tint-cream: #f8f5e8;
--nt-tint-gray: #f0eeec;
/* Surface */
--nt-canvas: #ffffff;
--nt-surface: #f6f5f4;
--nt-surface-soft: #fafaf9;
--nt-hairline: #e5e3df;
--nt-hairline-soft: #ede9e4;
--nt-hairline-strong: #c8c4be;
/* Text */
--nt-ink-deep: #000000;
--nt-ink: #1a1a1a;
--nt-charcoal: #37352f;
--nt-slate: #5d5b54;
--nt-steel: #787671;
--nt-stone: #a4a097;
--nt-on-dark: #ffffff;
--nt-on-dark-muted: #a4a097;
/* Type stack (Notion Sans → Inter → Noto Sans JP for ja) */
--nt-font: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
"Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}
.zb-portal-page {
background: var(--nt-canvas);
color: var(--nt-ink);
font-family: var(--nt-font);
}
/* ================================================================
Top Navigation — sticky 白バー（content rail 944px に整列）
================================================================ */
.zb-sticky-header {
position: sticky;
top: 0;
background: var(--nt-canvas);
border-bottom: 1px solid var(--nt-hairline);
z-index: 100;
}
.zb-sticky-header-inner {
max-width: 944px;
margin: 0 auto;
padding: 0 32px;
height: 72px;
display: flex;
align-items: center;
gap: 20px;
}
.zb-sticky-logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
min-width: 0;
}
.zb-sticky-logo img {
height: 40px;
width: auto;
display: block;
flex-shrink: 0;
}
.zb-sticky-logo-eyebrow {
font-family: var(--nt-font);
font-size: 12px;
font-weight: 500;
line-height: 1.35;
color: var(--nt-slate);
padding-left: 12px;
border-left: 1px solid var(--nt-hairline);
white-space: nowrap;
}
.zb-sticky-nav {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: nowrap;
min-width: 0;
}
.zb-sticky-nav-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.zb-sticky-nav a {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--nt-charcoal);
text-decoration: none;
transition: color 0.15s ease;
white-space: nowrap;
}
.zb-sticky-nav a:hover { color: var(--nt-primary); }
/* LP CTA — 図面バンク ブランドグリーン (#3A6236) on white */
.zb-sticky-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--nt-font);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: #FFFFFF !important;
background: #3A6236;
border: 1px solid #3A6236;
border-radius: 8px;
padding: 7px 14px;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.zb-sticky-cta::after {
content: "↗";
font-size: 12px;
margin-left: 2px;
color: rgba(255, 255, 255, 0.8);
}
.zb-sticky-cta:hover {
background: #2C4E2A;
border-color: #2C4E2A;
color: #FFFFFF !important;
}
/* ================================================================
Hero band — 撤去（旧 hero は非表示）
================================================================ */
.zb-portal-hero { display: none; }
/* ================================================================
Greeting strip — ログイン中の営業担当者にパーソナライズ
================================================================ */
.zb-greeting {
background: var(--nt-surface);
border-bottom: 1px solid var(--nt-hairline);
padding: 24px 32px;
}
.zb-greeting-inner {
max-width: 944px;
margin: 0 auto;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 20px;
}
.zb-greeting-text-block {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
flex: 1;
}
.zb-greeting-mascot {
width: 96px;
height: auto;
max-height: 110px;
flex-shrink: 0;
object-fit: contain;
display: block;
}
/* ヘッダー右端のログアウト — 控えめなテキストリンク */
.zb-logout-link {
display: inline-flex;
align-items: center;
font-family: var(--nt-font);
font-size: 11px;
font-weight: 400;
line-height: 1.3;
color: var(--nt-stone);
text-decoration: underline;
text-decoration-color: var(--nt-hairline);
text-underline-offset: 2px;
white-space: nowrap;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.zb-logout-link::before { content: none; }
.zb-logout-link:hover {
color: var(--nt-steel);
text-decoration-color: var(--nt-steel);
}
.zb-greeting-eyebrow {
font-family: var(--nt-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.4;
text-transform: uppercase;
color: var(--nt-purple-800);
background: var(--nt-tint-lavender);
border-radius: 6px;
padding: 2px 8px;
margin: 0 0 6px;
display: inline-block;
}
.zb-greeting-text {
font-family: var(--nt-font);
font-size: 20px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.2px;
color: var(--nt-ink);
margin: 0;
}
.zb-greeting-text strong {
color: var(--nt-primary);
font-weight: 600;
}
.zb-greeting-sub {
font-family: var(--nt-font);
font-size: 13px;
font-weight: 400;
line-height: 1.55;
color: var(--nt-slate);
margin: 4px 0 0;
}
.zb-greeting-side {
font-family: var(--nt-font);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--nt-steel);
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--nt-canvas);
border: 1px solid var(--nt-hairline);
border-radius: 999px;
padding: 6px 14px;
}
.zb-greeting-side::before {
content: "";
width: 6px;
height: 6px;
background: var(--nt-green);
border-radius: 50%;
display: inline-block;
}
/* Decorative sticky-note dots */
.zb-portal-hero::before,
.zb-portal-hero::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
.zb-portal-hero::before {
width: 320px; height: 220px;
top: 0; left: -40px;
background:
radial-gradient(8px at 70px 40px, var(--nt-pink) 100%, transparent 101%),
radial-gradient(7px at 180px 22px, var(--nt-yellow) 100%, transparent 101%),
radial-gradient(6px at 250px 90px, var(--nt-teal) 100%, transparent 101%),
radial-gradient(7px at 30px 130px, var(--nt-orange) 100%, transparent 101%);
opacity: 0.85;
}
.zb-portal-hero::after {
width: 320px; height: 220px;
top: 0; right: -40px;
background:
radial-gradient(9px at 250px 40px, var(--nt-primary) 100%, transparent 101%),
radial-gradient(7px at 160px 90px, var(--nt-pink) 100%, transparent 101%),
radial-gradient(6px at 280px 150px, var(--nt-yellow) 100%, transparent 101%),
radial-gradient(7px at 100px 30px, var(--nt-orange) 100%, transparent 101%);
opacity: 0.85;
}
.zb-portal-hero > * {
max-width: 880px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.zb-portal-eyebrow {
display: inline-block;
font-family: var(--nt-font);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
color: var(--nt-on-dark-muted);
margin: 0 auto 12px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.zb-portal-title {
font-family: var(--nt-font);
font-size: 36px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.5px;
color: var(--nt-on-dark);
margin: 0 auto 12px;
}
.zb-portal-title br { display: none; }
.zb-portal-title-en {
display: block;
font-family: var(--nt-font);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: var(--nt-on-dark-muted);
margin-top: 8px;
letter-spacing: 0;
}
.zb-portal-hairline { display: none; }
.zb-portal-lede {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--nt-on-dark-muted);
max-width: 640px;
margin: 0 auto;
}
/* ================================================================
Sections — content rail 944px, 内部全部整列
================================================================ */
.zb-resources,
.zb-video-section,
.zb-qa,
.zb-changelog {
max-width: 944px;
margin: 0 auto;
padding: 64px 32px;
border-top: 0;
}
.zb-resources-header,
.zb-changelog-header {
display: block;
margin: 0 0 32px;
max-width: none;
}
/* badge-tag-purple: lavender bg + brand-purple-800 text */
.zb-changelog-num {
display: inline-block;
font-family: var(--nt-font);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
color: var(--nt-purple-800);
background: var(--nt-tint-lavender);
padding: 2px 8px;
border-radius: 6px;
margin-bottom: 16px;
}
.zb-changelog-eyebrow {
font-family: var(--nt-font);
font-size: 36px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--nt-ink);
margin: 0 0 8px;
padding: 0;
border: 0;
display: block;
}
.zb-changelog-sub {
display: block;
font-family: var(--nt-font);
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: var(--nt-slate);
margin: 0;
}
/* ================================================================
Resource list — card-base (canvas + 12px rounded + 1px hairline)
================================================================ */
.zb-resource-list {
list-style: none;
padding: 0;
margin: 0;
max-width: none;
border: 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.zb-resource-list li {
display: grid;
grid-template-columns: 200px 1fr auto auto;
align-items: center;
gap: 20px;
padding: 14px 18px 14px 14px;
background: var(--nt-canvas);
border: 1px solid var(--nt-hairline);
border-radius: 12px;
transition: box-shadow 0.15s ease;
}
.zb-resource-list li:hover {
box-shadow: rgba(15, 15, 15, 0.06) 0px 2px 8px 0px;
}
/* Thumbnail — 高さを揃え、portrait は縦長のまま中央寄せで表示 */
.zb-resource-list .zb-rl-index {
width: 200px; height: 130px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--nt-surface);
border: 1px solid var(--nt-hairline);
border-radius: 6px;
position: relative;
font-size: 0;
color: transparent;
}
.zb-resource-list .zb-rl-index img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
/* PDF badge overlay on bottom-right of thumbnail */
.zb-resource-list .zb-rl-index::after {
content: "PDF";
position: absolute;
bottom: 4px; right: 4px;
font-family: var(--nt-font);
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.04em;
color: var(--nt-on-primary);
background: rgba(15, 15, 15, 0.72);
padding: 3px 5px;
border-radius: 3px;
}
.zb-resource-list .zb-rl-title-cell {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.zb-resource-list .zb-rl-title {
font-family: var(--nt-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--nt-ink);
}
.zb-resource-list .zb-rl-en {
font-family: var(--nt-font);
font-size: 13px;
font-weight: 400;
line-height: 1.55;
color: var(--nt-slate);
max-width: 360px;
}
.zb-resource-list .zb-rl-meta {
font-family: var(--nt-font);
font-size: 13px;
line-height: 1.4;
color: var(--nt-stone);
white-space: nowrap;
}
/* button-primary (download) + button-secondary (view) — both 8px rounded rectangles */
.zb-rl-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.zb-resource-list .zb-rl-action,
.zb-resource-list .zb-rl-action-view {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease;
}
.zb-resource-list .zb-rl-action {
color: var(--nt-on-primary);
background: var(--nt-primary);
border: 0;
}
.zb-resource-list .zb-rl-action:hover {
background: var(--nt-primary-pressed);
color: var(--nt-on-primary);
}
.zb-resource-list .zb-rl-action-view {
color: var(--nt-ink);
background: transparent;
border: 1px solid var(--nt-hairline-strong);
}
.zb-resource-list .zb-rl-action-view:hover {
border-color: var(--nt-ink);
color: var(--nt-ink);
}
.zb-resource-list .zb-rl-action::after,
.zb-resource-list .zb-rl-action-view::after {
content: "";
margin-left: 0;
}
/* ================================================================
Video list — 1 動画 = 1 collapsible row (multi-video 想定)
================================================================ */
.zb-video-list {
list-style: none;
padding: 0;
margin: 0;
max-width: none;
display: grid;
gap: 12px;
}
.zb-video-item {
background: var(--nt-canvas);
border: 1px solid var(--nt-hairline);
border-radius: 12px;
overflow: hidden;
}
.zb-video-item[open] {
box-shadow: rgba(15, 15, 15, 0.04) 0px 1px 2px 0px;
}
.zb-video-item > summary {
display: grid;
grid-template-columns: 160px 1fr auto auto;
align-items: center;
gap: 20px;
padding: 14px 18px 14px 14px;
cursor: pointer;
list-style: none;
}
.zb-video-item > summary::-webkit-details-marker { display: none; }
.zb-video-thumb {
width: 160px; height: 96px;
display: block;
overflow: hidden;
background: #0a0a0a;
border: 1px solid var(--nt-hairline);
border-radius: 6px;
position: relative;
}
.zb-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.zb-video-thumb::after {
content: "▶";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 36px; height: 36px;
background: rgba(255, 255, 255, 0.92);
color: var(--nt-ink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
padding-left: 2px;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.zb-video-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.zb-video-title {
font-family: var(--nt-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--nt-ink);
}
.zb-video-sub {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--nt-steel);
}
.zb-video-note {
display: inline-block;
font-family: var(--nt-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
color: var(--nt-orange-deep);
background: var(--nt-tint-peach);
padding: 2px 8px;
border-radius: 6px;
margin-right: 6px;
margin-bottom: 2px;
}
.zb-video-duration {
font-family: var(--nt-font);
font-size: 13px;
font-weight: 500;
color: var(--nt-stone);
white-space: nowrap;
}
.zb-video-toggle {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--nt-hairline-strong);
border-radius: 8px;
color: var(--nt-charcoal);
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
transition: transform 0.15s ease, background 0.15s ease;
}
.zb-video-toggle::before { content: "+"; line-height: 1; }
.zb-video-item[open] .zb-video-toggle::before { content: "−"; }
.zb-video-body {
padding: 0 24px 24px;
border-top: 1px solid var(--nt-hairline);
}
.zb-video-body .zb-video-frame {
margin: 20px 0 16px;
border-radius: 8px;
}
.zb-video-desc {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--nt-charcoal);
margin: 0;
max-width: 720px;
}
.zb-video-empty {
font-family: var(--nt-font);
font-size: 14px;
color: var(--nt-stone);
padding: 20px 24px;
text-align: center;
background: var(--nt-surface);
border: 1px dashed var(--nt-hairline-strong);
border-radius: 12px;
}
/* Legacy unit fallback (まだ残っていれば消える) */
.zb-unit { display: none; }
.zb-unit-marker { display: none; }
.zb-unit-rule { display: none; }
.zb-unit-body { padding: 0; }
.zb-unit-title { display: none; }
.zb-unit-en { display: none; }
.zb-unit-desc { display: none; }
.zb-unit-meta { display: none; }
.zb-unit-actions { display: none; }
/* button-primary: 8px rounded rectangle */
.zb-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--nt-primary);
color: var(--nt-on-primary);
padding: 10px 18px;
border: 0;
border-radius: 8px;
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: background 0.15s ease;
}
.zb-btn:hover { background: var(--nt-primary-pressed); color: var(--nt-on-primary); }
.zb-btn::after { content: ""; }
/* button-secondary: outlined 8px rectangle */
.zb-btn-text {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--nt-ink);
text-decoration: none;
padding: 10px 18px;
border: 1px solid var(--nt-hairline-strong);
border-radius: 8px;
background: transparent;
transition: border-color 0.15s ease;
}
.zb-btn-text:hover { border-color: var(--nt-ink); background: transparent; }
.zb-btn-text::after { content: ""; }
.zb-video-frame {
position: relative;
padding-top: 56.25%;
margin: 0;
background: #0a0a0a;
border: 0;
border-radius: 0;
overflow: hidden;
}
.zb-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ================================================================
Q&A — search + faq-accordion-item (canvas + hairline divider)
================================================================ */
.zb-qa-placeholder {
padding: 32px;
border: 1px solid var(--nt-hairline);
border-radius: 12px;
background: var(--nt-surface);
text-align: center;
max-width: 880px;
}
.zb-qa-placeholder p {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--nt-slate);
margin: 0;
}
.zb-qa-placeholder a {
color: var(--nt-link-blue);
text-decoration: underline;
}
/* Search bar */
.zb-faq-controls {
max-width: none;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
margin: 0 0 16px;
}
.zb-faq-search {
position: relative;
}
.zb-faq-search input {
width: 100%;
height: 44px;
padding: 0 16px 0 44px;
background: var(--nt-surface);
border: 1px solid var(--nt-hairline);
border-radius: 8px;
font-family: var(--nt-font);
font-size: 16px;
line-height: 1.55;
color: var(--nt-ink);
transition: border-color 0.15s ease, background 0.15s ease;
}
.zb-faq-search input::placeholder { color: var(--nt-stone); }
.zb-faq-search input:focus {
outline: none;
background: var(--nt-canvas);
border-color: var(--nt-primary);
border-width: 2px;
padding-left: 43px;
}
.zb-faq-search::before {
content: "";
position: absolute;
left: 16px; top: 50%;
width: 16px; height: 16px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
pointer-events: none;
}
.zb-faq-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* pill-tab + pill-tab-active */
.zb-faq-filter {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--nt-steel);
background: transparent;
border: 1px solid var(--nt-hairline);
border-radius: 9999px;
padding: 8px 16px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.zb-faq-filter:hover { color: var(--nt-ink); border-color: var(--nt-hairline-strong); }
.zb-faq-filter.is-active {
background: var(--nt-ink-deep);
color: var(--nt-on-dark);
border-color: var(--nt-ink-deep);
}
.zb-faq-meta {
font-family: var(--nt-font);
font-size: 13px;
color: var(--nt-stone);
margin: 0 0 12px;
max-width: none;
}
.zb-qa-list {
list-style: none;
padding: 0;
margin: 0;
max-width: none;
display: block;
border-top: 1px solid var(--nt-hairline);
}
.zb-qa-item {
background: var(--nt-canvas);
border: 0;
border-bottom: 1px solid var(--nt-hairline);
border-radius: 0;
padding: 20px 24px;
}
.zb-qa-item > summary {
cursor: pointer;
font-family: var(--nt-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--nt-ink);
list-style: none;
display: flex;
align-items: flex-start;
gap: 12px;
}
.zb-qa-item > summary::-webkit-details-marker { display: none; }
.zb-qa-item > summary::before {
content: "+";
font-family: var(--nt-font);
font-size: 18px;
font-weight: 400;
color: var(--nt-steel);
flex-shrink: 0;
transition: transform 0.15s ease;
width: 16px;
text-align: center;
line-height: 1.4;
}
.zb-qa-item[open] > summary::before {
transform: rotate(45deg);
}
.zb-qa-category {
display: inline-block;
font-family: var(--nt-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
padding: 2px 8px;
border-radius: 6px;
margin-right: 8px;
vertical-align: middle;
}
.zb-qa-category[data-cat="機能"] { background: var(--nt-tint-lavender); color: var(--nt-purple-800); }
.zb-qa-category[data-cat="価格"] { background: var(--nt-tint-peach); color: var(--nt-orange-deep); }
.zb-qa-category[data-cat="運用"] { background: var(--nt-tint-mint); color: var(--nt-green); }
.zb-qa-category[data-cat="導入"] { background: var(--nt-tint-sky); color: var(--nt-navy); }
.zb-qa-category[data-cat="セキュリティ"] { background: var(--nt-tint-yellow); color: var(--nt-orange-deep); }
.zb-qa-category[data-cat="競合"] { background: var(--nt-tint-rose); color: var(--nt-pink-deep, #a02e6d); }
.zb-qa-category[data-cat="その他"] { background: var(--nt-tint-gray); color: var(--nt-slate); }
.zb-qa-item > div {
margin: 12px 0 0 28px;
font-family: var(--nt-font);
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: var(--nt-charcoal);
white-space: pre-wrap;
}
/* Empty state — お問い合わせフォーム */
.zb-faq-empty {
background: var(--nt-tint-lavender);
border: 0;
border-radius: 12px;
padding: 28px;
max-width: none;
}
.zb-faq-empty-head {
font-family: var(--nt-font);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--nt-charcoal);
margin: 0 0 6px;
}
.zb-faq-empty-sub {
font-family: var(--nt-font);
font-size: 14px;
line-height: 1.6;
color: var(--nt-charcoal);
margin: 0 0 18px;
}
.zb-faq-form {
display: grid;
gap: 12px;
background: var(--nt-canvas);
border-radius: 8px;
padding: 20px;
}
.zb-faq-form label {
display: grid;
gap: 6px;
font-family: var(--nt-font);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--nt-charcoal);
}
.zb-faq-form input,
.zb-faq-form textarea {
width: 100%;
font-family: var(--nt-font);
font-size: 15px;
line-height: 1.55;
color: var(--nt-ink);
background: var(--nt-canvas);
border: 1px solid var(--nt-hairline-strong);
border-radius: 8px;
padding: 10px 14px;
box-sizing: border-box;
transition: border-color 0.15s ease;
}
.zb-faq-form input:focus,
.zb-faq-form textarea:focus {
outline: none;
border: 2px solid var(--nt-primary);
padding: 9px 13px;
}
.zb-faq-form textarea { min-height: 96px; resize: vertical; }
.zb-faq-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.zb-faq-form-submit {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--nt-on-primary);
background: var(--nt-primary);
border: 0;
border-radius: 8px;
padding: 10px 18px;
cursor: pointer;
transition: background 0.15s ease;
}
.zb-faq-form-submit:hover { background: var(--nt-primary-pressed); }
.zb-faq-form-note {
font-family: var(--nt-font);
font-size: 12px;
color: var(--nt-stone);
}
mark.zb-hl {
background: var(--nt-tint-yellow-bold);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* ================================================================
Bookmark prompt toast — 初回訪問時のみ表示（localStorage で抑止）
================================================================ */
.zb-bookmark-toast {
position: fixed;
bottom: 24px;
right: 24px;
width: 340px;
max-width: calc(100vw - 32px);
background: var(--nt-canvas);
border: 1px solid var(--nt-hairline);
border-radius: 12px;
padding: 16px 18px 14px 16px;
box-shadow: rgba(15, 15, 15, 0.12) 0px 8px 24px;
z-index: 300;
display: flex;
gap: 12px;
align-items: flex-start;
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
pointer-events: none;
}
.zb-bookmark-toast.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.zb-bookmark-mascot {
width: 48px;
height: auto;
max-height: 60px;
flex-shrink: 0;
object-fit: contain;
}
.zb-bookmark-body {
flex: 1;
min-width: 0;
}
.zb-bookmark-title {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 4px;
color: var(--nt-ink);
}
.zb-bookmark-text {
font-family: var(--nt-font);
font-size: 12px;
font-weight: 400;
line-height: 1.55;
color: var(--nt-slate);
margin: 0 0 10px;
}
.zb-bookmark-text kbd {
font-family: var(--nt-font);
font-size: 11px;
font-weight: 600;
padding: 1px 6px;
background: var(--nt-surface);
border: 1px solid var(--nt-hairline);
border-radius: 4px;
color: var(--nt-ink);
}
.zb-bookmark-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.zb-bookmark-btn {
background: var(--nt-primary);
color: var(--nt-on-primary);
border: 0;
border-radius: 6px;
padding: 6px 14px;
font-family: var(--nt-font);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
}
.zb-bookmark-btn:hover { background: var(--nt-primary-pressed); }
.zb-bookmark-dismiss {
background: transparent;
color: var(--nt-steel);
border: 1px solid var(--nt-hairline);
border-radius: 6px;
padding: 6px 12px;
font-family: var(--nt-font);
font-size: 12px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.zb-bookmark-dismiss:hover { border-color: var(--nt-ink); color: var(--nt-ink); }
.zb-bookmark-close {
position: absolute;
top: 6px;
right: 8px;
background: transparent;
border: 0;
font-size: 20px;
line-height: 1;
color: var(--nt-stone);
cursor: pointer;
padding: 4px 8px;
font-family: var(--nt-font);
}
.zb-bookmark-close:hover { color: var(--nt-ink); }
@media (max-width: 480px) {
.zb-bookmark-toast {
bottom: 16px;
right: 16px;
left: 16px;
width: auto;
}
}
/* "今後追加予定" バッジ — badge-tag-orange */
.zb-soon-badge {
display: inline-block;
font-family: var(--nt-font);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
color: var(--nt-orange-deep);
padding: 2px 8px;
background: var(--nt-tint-peach);
border: 0;
border-radius: 6px;
margin-left: 12px;
vertical-align: middle;
}
.zb-soon-badge::before { content: ""; }
/* ================================================================
Changelog — comparison-row pattern (canvas + hairline-soft rows)
================================================================ */
.zb-changelog-list {
list-style: none;
padding: 0;
margin: 0;
max-width: none;
border: 0;
display: block;
border-top: 1px solid var(--nt-hairline);
}
.zb-changelog-list li {
display: grid;
grid-template-columns: 112px 1fr auto;
align-items: baseline;
gap: 20px;
padding: 14px 8px;
border-bottom: 1px solid var(--nt-hairline-soft);
border-top: 0;
}
/* WP の wpautop が
内の改行に
を挿入してグリッドを壊すので強制非表示 */
.zb-changelog-list li > br { display: none; }
.zb-changelog-list li:last-child {
border-bottom: 1px solid var(--nt-hairline);
}
.zb-changelog-list time {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: var(--nt-steel);
}
.zb-changelog-list .zb-changelog-text {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 400;
line-height: 1.55;
color: var(--nt-ink);
}
/* button-link (inline blue, NOT primary purple) */
.zb-changelog-list a {
font-family: var(--nt-font);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: var(--nt-link-blue);
text-decoration: none;
}
.zb-changelog-list a:hover { color: var(--nt-link-blue); text-decoration: underline; }
.zb-changelog-list a::after { content: " →"; }
/* ================================================================
Guest gate — card-feature-lavender (pastel feature card)
================================================================ */
.zb-gated-preview {
max-width: 720px;
margin: 96px auto;
padding: 48px 40px;
border: 0;
border-radius: 12px;
text-align: center;
background: var(--nt-tint-lavender);
}
.zb-gated-preview .zb-gated-eyebrow {
display: inline-block;
font-family: var(--nt-font);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
color: var(--nt-purple-800);
background: var(--nt-canvas);
margin-bottom: 16px;
padding: 2px 8px;
border-radius: 6px;
}
.zb-gated-preview h2 {
font-family: var(--nt-font);
font-size: 36px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
margin: 0 0 12px;
color: var(--nt-charcoal);
border: 0;
padding: 0;
}
.zb-gated-preview p {
font-family: var(--nt-font);
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: var(--nt-charcoal);
margin: 0 0 24px;
}
.zb-gated-preview .zb-btn {
background: var(--nt-primary);
border-radius: 8px;
}
.zb-gated-preview .zb-btn:hover { background: var(--nt-primary-pressed); }
/* User greeting badge (on-dark) */
.zb-portal-greeting {
display: inline-block;
font-family: var(--nt-font);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--nt-on-dark);
background: rgba(255, 255, 255, 0.12);
margin-left: 12px;
padding: 2px 8px;
border-radius: 6px;
vertical-align: middle;
}
/* ================================================================
Mobile
================================================================ */
@media (max-width: 768px) {
.zb-page-hero { padding: 64px 20px 32px; }
.zb-page-title { font-size: 32px; }
.zb-section { padding: 32px 20px; }
.zb-section h2 { font-size: 22px; }
.um { margin: 56px auto 64px !important; }
.um .um-form { padding: 28px 20px !important; }
.wp-block-post-title { margin: 56px auto 0; font-size: 22px; }
.zb-resource-grid { grid-template-columns: 1fr; }
.zb-sfa-callout { padding: 24px 20px; }
/* Hero */
.zb-portal-hero { padding: 40px 20px; }
.zb-portal-title { font-size: 26px; letter-spacing: -0.5px; }
.zb-portal-title-en { font-size: 13px; }
.zb-portal-lede { font-size: 13px; }
/* Greeting strip mobile */
.zb-greeting { padding: 16px 20px; }
.zb-greeting-inner { gap: 12px; }
.zb-greeting-text { font-size: 16px; }
.zb-greeting-side { font-size: 12px; padding: 4px 10px; }
.zb-greeting-mascot { width: 64px; max-height: 80px; }
/* Sections */
.zb-changelog,
.zb-resources,
.zb-video-section,
.zb-qa { padding: 48px 20px; }
.zb-changelog-eyebrow { font-size: 26px; }
/* Changelog */
.zb-changelog-list li {
grid-template-columns: 84px 1fr;
padding: 12px 0;
}
.zb-changelog-list li > a { grid-column: 1 / -1; padding-top: 4px; }
/* Resource list — 高さ揃え thumb 上、メタ/ボタン下 */
.zb-resource-list li {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
gap: 8px;
padding: 14px;
}
.zb-resource-list .zb-rl-index {
width: 100%; height: 220px;
grid-row: 1;
aspect-ratio: auto;
}
.zb-resource-list .zb-rl-index img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
}
.zb-resource-list .zb-rl-title-cell {
grid-row: 2;
}
.zb-resource-list .zb-rl-meta {
grid-row: 3;
}
.zb-rl-actions,
.zb-resource-list > li > .zb-rl-actions {
grid-row: 4;
margin-top: 4px;
}
.zb-resource-list .zb-rl-action,
.zb-resource-list .zb-rl-action-view {
padding: 8px 14px;
font-size: 13px;
}
.zb-resource-list .zb-rl-title { font-size: 14px; }
.zb-resource-list .zb-rl-en { font-size: 12px; max-width: none; }
.zb-resource-list .zb-rl-meta { font-size: 12px; }
/* Sticky header — LP CTA は残し、eyebrow を畳む */
.zb-sticky-header-inner { padding: 0 16px; height: 56px; gap: 10px; }
.zb-sticky-logo img { height: 22px; }
.zb-sticky-logo-eyebrow { display: none; }
.zb-sticky-nav { gap: 12px; flex: 1; justify-content: flex-end; }
.zb-sticky-nav a:not(.zb-sticky-cta) { font-size: 12px; }
.zb-sticky-cta { padding: 6px 10px; font-size: 12px; }
.zb-sticky-cta::after { display: none; }
/* Video collapsible — landscape thumb 上 */
.zb-video-item > summary {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
gap: 8px;
padding: 14px;
}
.zb-video-thumb {
width: 100%; height: 140px;
grid-column: 1 / -1;
grid-row: 1;
aspect-ratio: 16 / 9;
}
.zb-video-thumb::after { width: 44px; height: 44px; font-size: 15px; }
.zb-video-info { grid-column: 1; grid-row: 2; }
.zb-video-duration { grid-column: 1; grid-row: 3; margin-top: -2px; }
.zb-video-toggle { grid-column: 2; grid-row: 2 / 4; align-self: center; }
.zb-video-body { padding: 0 14px 14px; }
/* FAQ controls */
.zb-faq-controls {
grid-template-columns: 1fr;
gap: 10px;
}
.zb-faq-filters { overflow-x: auto; padding-bottom: 4px; }
.zb-faq-filter { padding: 7px 12px; font-size: 13px; }
.zb-qa-item { padding: 16px 18px; }
.zb-qa-item > summary { font-size: 15px; gap: 10px; }
.zb-qa-item > div { font-size: 13px; margin-left: 24px; }
/* Empty form */
.zb-faq-empty { padding: 20px; }
.zb-faq-form { padding: 16px; }
}
@media (max-width: 480px) {
.zb-sticky-cta { display: none; }
.zb-sticky-nav { gap: 14px; }
}
/* ================================================================
Home page (front-page /) — CTA gateway
================================================================ */
.zb-home {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 64px 24px;
background: var(--bg-soft);
}
.zb-home-inner {
max-width: 880px;
width: 100%;
text-align: center;
}
.zb-home-hero {
margin-bottom: 56px;
}
.zb-home-logo {
height: 56px;
margin-bottom: 32px;
display: inline-block;
}
.zb-home-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 16px;
}
.zb-home-title {
font-family: var(--font-sans);
font-size: 40px;
font-weight: 500;
line-height: 1.25;
color: var(--text-body);
margin: 0 0 16px;
letter-spacing: -0.005em;
}
.zb-home-subtitle {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.75;
color: var(--text-muted);
max-width: 560px;
margin: 0 auto;
}
.zb-home-cta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 720px;
margin: 0 auto;
}
.zb-home-cta {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 28px 28px 26px;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
position: relative;
text-align: left;
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.zb-home-cta:hover {
box-shadow: var(--whisper);
border-color: var(--brand-deep);
transform: translateY(-2px);
}
.zb-home-cta .zb-cta-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-stone);
margin-bottom: 6px;
}
.zb-home-cta .zb-cta-title {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
color: var(--text-body);
line-height: 1.35;
margin: 0;
}
.zb-home-cta .zb-cta-sub {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
margin-top: 6px;
}
.zb-home-cta .zb-cta-arrow {
position: absolute;
top: 26px;
right: 24px;
font-family: var(--font-mono);
font-size: 18px;
color: var(--text-stone);
transition: color 0.2s ease, transform 0.2s ease;
}
.zb-home-cta:hover .zb-cta-arrow {
color: var(--brand-deep);
transform: translateX(4px);
}
.zb-cta-primary {
background: var(--brand-deep);
border-color: var(--brand-deep);
}
.zb-cta-primary .zb-cta-eyebrow { color: rgba(255, 255, 255, 0.75); }
.zb-cta-primary .zb-cta-title { color: #fff; }
.zb-cta-primary .zb-cta-sub { color: rgba(255, 255, 255, 0.82); }
.zb-cta-primary .zb-cta-arrow { color: rgba(255, 255, 255, 0.85); }
.zb-cta-primary:hover {
background: var(--brand-mid);
border-color: var(--brand-mid);
}
.zb-cta-primary:hover .zb-cta-arrow { color: #fff; }
/* Contact page (account inquiry) */
.zb-contact-card {
background: var(--bg-soft);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 40px 40px 36px;
max-width: 640px;
margin: 0 auto;
}
.zb-contact-card .zb-contact-label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 8px;
}
.zb-contact-card .zb-contact-mail {
font-family: var(--font-sans);
font-size: 24px;
font-weight: 500;
color: var(--text-body);
margin: 0 0 20px;
letter-spacing: 0.01em;
}
.zb-contact-card p {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.7;
color: var(--text-muted);
margin: 0 0 16px;
}
.zb-contact-actions {
display: flex;
align-items: center;
gap: 24px;
margin-top: 24px;
flex-wrap: wrap;
}
.zb-contact-actions a.zb-back-link {
color: var(--text-muted);
font-size: 13px;
text-decoration: none;
}
.zb-contact-actions a.zb-back-link:hover { color: var(--text-body); }
@media (max-width: 640px) {
.zb-home-title { font-size: 30px; }
.zb-home-cta-grid { grid-template-columns: 1fr; }
.zb-home-cta .zb-cta-arrow { display: none; }
.zb-contact-card { padding: 28px 24px; }
}
/* ================================================================
Sticky header minimal variant (login / new-account)
================================================================ */
.zb-sticky-header-minimal .zb-sticky-nav { display: none; }
.zb-sticky-header-minimal .zb-sticky-logo-eyebrow { display: none; }
/* ================================================================
/new-account/ hero (above UM Register Form)
================================================================ */
.zb-account-request {
background: var(--bg-soft);
padding: 56px 24px 16px;
}
.zb-account-request-inner {
max-width: 640px;
margin: 0 auto;
}
.zb-account-request-head {
text-align: center;
}
.zb-account-request-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 12px;
}
.zb-account-request-title {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 500;
line-height: 1.3;
color: var(--text-body);
margin: 0 0 16px;
}
.zb-account-request-lede {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.75;
color: var(--text-muted);
margin: 0 auto;
max-width: 520px;
}
/* UM Register Form on /new-account/ — soft-bg background match */
body.page-template-default .um.um-register {
background: var(--bg-soft);
padding-bottom: 96px !important;
}
/* "Member type" radio: visually 2-option, end-user disabled */
.zb-member-type-note {
display: flex;
gap: 8px;
margin: 12px 0 24px;
max-width: 440px;
}
.zb-member-type-note .zb-mt-option {
flex: 1;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 6px;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--text-body);
text-align: center;
}
.zb-member-type-note .zb-mt-option.active {
border-color: var(--brand-deep);
background: var(--accent-light);
font-weight: 500;
}
.zb-member-type-note .zb-mt-option.disabled {
opacity: 0.5;
color: var(--text-stone);
position: relative;
}
.zb-member-type-note .zb-mt-option.disabled::after {
content: "準備中";
display: block;
font-size: 10px;
font-family: var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-stone);
margin-top: 4px;
}
@media (max-width: 600px) {
.zb-account-request { padding: 32px 16px 0; }
.zb-account-request-title { font-size: 24px; }
.zb-member-type-note { flex-direction: column; max-width: 100%; }
}
/* ================================================================
Home page 2-column split (mockup left + hero right)
Notion-style clean grid, no decoration shadows
================================================================ */
.zb-home-split {
background: var(--bg-soft);
min-height: calc(100vh - 64px);
display: flex;
align-items: center;
padding: 56px 0;
}
.zb-home-split .zb-home-grid {
width: 100%;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: center;
padding: 0 48px;
}
.zb-home-split .zb-home-left {
position: relative;
}
.zb-home-mockup-wrap {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid var(--border-soft);
box-shadow: var(--whisper);
}
.zb-home-mockup {
display: block;
width: 100%;
height: auto;
}
.zb-home-mockup-glow {
position: absolute;
inset: -40px;
background: radial-gradient(circle at 50% 50%, var(--accent-light) 0%, transparent 60%);
z-index: -1;
filter: blur(40px);
opacity: 0.45;
}
.zb-home-split .zb-home-right {
display: flex;
flex-direction: column;
gap: 32px;
}
.zb-home-split .zb-home-hero {
margin: 0;
text-align: left;
}
.zb-home-split .zb-home-logo {
display: inline-block;
margin-bottom: 24px;
}
.zb-home-split .zb-home-eyebrow {
text-align: left;
margin-bottom: 12px;
}
.zb-home-split .zb-home-title {
font-size: 36px;
text-align: left;
margin: 0 0 14px;
line-height: 1.3;
}
.zb-home-split .zb-home-subtitle {
text-align: left;
margin: 0;
max-width: 100%;
}
.zb-home-split .zb-home-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 100%;
}
.zb-home-split .zb-home-cta {
padding: 24px 24px 22px;
}
.zb-home-split .zb-home-cta .zb-cta-title {
font-size: 17px;
}
@media (max-width: 960px) {
.zb-home-split { padding: 32px 0 64px; }
.zb-home-split .zb-home-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 20px;
}
.zb-home-split .zb-home-left { order: 2; }
.zb-home-split .zb-home-right { order: 1; }
.zb-home-split .zb-home-title { font-size: 28px; }
.zb-home-split .zb-home-cta-grid { grid-template-columns: 1fr; }
.zb-home-mockup-glow { display: none; }
}
/* ================================================================
Hide WP block post-title on auth + portal pages
(タイトル「ホーム」「ログイン」などの大見出し重複を排除)
================================================================ */
body.page-id-12 .wp-block-post-title,
body.page-id-16 .wp-block-post-title,
body.page-id-20 .wp-block-post-title,
body.page-id-57 .wp-block-post-title,
body.page-id-29 .wp-block-post-title,
body.page-id-19 .wp-block-post-title,
body.page-id-18 .wp-block-post-title {
display: none !important;
}
/* Hide old sticky-header-minimal on split pages (置き換え) */
body.page-id-12 .zb-sticky-header-minimal,
body.page-id-16 .zb-sticky-header-minimal,
body.page-id-57 .zb-sticky-header-minimal {
display: none !important;
}
/* ================================================================
Split-screen layout (home / login / new-account)
Notion-style: white left, brand-deep right with product mockup
================================================================ */
.zb-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
background: #fff;
}
.zb-split-left {
display: flex;
flex-direction: column;
padding: 32px 56px 24px;
min-height: 100vh;
}
.zb-split-logo {
display: inline-block;
margin-bottom: 0;
width: fit-content;
}
.zb-split-logo img {
height: 40px;
width: auto;
display: block;
}
.zb-split-main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 440px;
margin: 0 auto;
padding: 48px 0;
}
.zb-split-h1 {
font-family: var(--font-sans);
font-size: 26px;
font-weight: 600;
line-height: 1.4;
color: var(--text-body);
margin: 0 0 12px;
text-align: center;
letter-spacing: 0;
}
.zb-split-lede {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.75;
color: var(--text-muted);
margin: 0 0 28px;
text-align: center;
}
.zb-split-footer {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
color: var(--text-muted);
}
.zb-split-footer-links a {
color: var(--text-muted);
text-decoration: none;
margin-right: 16px;
}
.zb-split-footer-links a:hover { color: var(--text-body); }
.zb-split-copyright { font-family: var(--font-sans); }
/* Right column: brand-deep flat */
.zb-split-right {
background: var(--brand-deep);
color: #fff;
padding: 96px 64px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.zb-split-right::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-deep) 50%, var(--brand-mid) 100%);
z-index: 0;
}
.zb-split-right-inner {
position: relative;
z-index: 1;
max-width: 560px;
margin: 0 auto;
width: 100%;
}
.zb-split-right h2 {
font-family: var(--font-sans);
font-size: 30px;
font-weight: 600;
line-height: 1.55;
color: #fff;
margin: 0 0 40px;
letter-spacing: 0;
}
.zb-split-mockup {
display: block;
width: 100%;
border-radius: 10px;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
}
/* ================================================================
Home split: left content adjustments
(eyebrow + title + subtitle + 2 CTAs in left column)
================================================================ */
.zb-home-main {
align-items: stretch;
text-align: left;
}
.zb-home-main .zb-home-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 12px;
text-align: left;
}
.zb-home-main .zb-home-title {
font-family: var(--font-sans);
font-size: 30px;
font-weight: 600;
line-height: 1.4;
color: var(--text-body);
margin: 0 0 14px;
text-align: left;
}
.zb-home-main .zb-home-subtitle {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.75;
color: var(--text-muted);
margin: 0 0 32px;
text-align: left;
max-width: 100%;
}
.zb-home-main .zb-home-cta-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
width: 100%;
max-width: 100%;
margin: 0;
}
.zb-home-main .zb-home-cta {
padding: 18px 20px;
border-radius: 6px;
}
.zb-home-main .zb-home-cta .zb-cta-eyebrow {
font-size: 10px;
letter-spacing: 0.12em;
margin-bottom: 3px;
}
.zb-home-main .zb-home-cta .zb-cta-title {
font-size: 15px;
font-weight: 600;
}
.zb-home-main .zb-home-cta .zb-cta-sub {
font-size: 12px;
margin-top: 2px;
}
/* ================================================================
Member type block (new-account page)
================================================================ */
.zb-member-type-block {
width: 100%;
margin: 0 0 28px;
}
.zb-member-type-label {
display: block;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
}
.zb-member-type-fixed {
background: var(--accent-light);
border: 1px solid var(--brand-deep);
border-radius: 6px;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--brand-deep);
display: flex;
align-items: center;
justify-content: space-between;
}
.zb-member-type-fixed::after {
content: "✓";
font-size: 16px;
color: var(--brand-deep);
}
/* ================================================================
UM form polish on split pages (Notion-clean style)
================================================================ */
body.page-id-16 .um,
body.page-id-57 .um {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-id-16 .um .um-form,
body.page-id-57 .um .um-form {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
body.page-id-16 .um .um-form input[type="text"],
body.page-id-16 .um .um-form input[type="email"],
body.page-id-16 .um .um-form input[type="password"],
body.page-id-57 .um .um-form input[type="text"],
body.page-id-57 .um .um-form input[type="email"],
body.page-id-57 .um .um-form input[type="password"] {
border: 1px solid #E4E4E0 !important;
border-radius: 6px !important;
padding: 11px 14px !important;
font-family: var(--font-sans) !important;
font-size: 14px !important;
background: #fff !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-id-16 .um .um-form input:focus,
body.page-id-57 .um .um-form input:focus {
border-color: var(--brand-deep) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--accent-light) !important;
}
body.page-id-16 .um .um-field-label label,
body.page-id-57 .um .um-field-label label {
font-family: var(--font-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--text-secondary) !important;
letter-spacing: 0 !important;
margin-bottom: 4px !important;
}
body.page-id-16 .um-button,
body.page-id-57 .um-button,
body.page-id-16 .um button[type="submit"],
body.page-id-57 .um button[type="submit"] {
width: 100% !important;
background: var(--brand-deep) !important;
border: none !important;
border-radius: 6px !important;
color: #fff !important;
font-family: var(--font-sans) !important;
font-weight: 500 !important;
font-size: 14px !important;
letter-spacing: 0.02em !important;
padding: 12px 24px !important;
margin-top: 8px !important;
transition: background 0.15s ease;
}
body.page-id-16 .um-button:hover,
body.page-id-57 .um-button:hover { background: var(--brand-mid) !important; }
body.page-id-57 .um-button.um-alt {
background: #fff !important;
color: var(--text-body) !important;
border: 1px solid #E4E4E0 !important;
}
/* Forgot password / register link on login form */
body.page-id-16 .um a.um-link-alt {
color: var(--brand-deep) !important;
font-size: 12px !important;
text-decoration: none !important;
}
body.page-id-16 .um a.um-link-alt:hover { text-decoration: underline !important; }
/* ================================================================
Mobile: stack vertically, hide right column
================================================================ */
@media (max-width: 960px) {
.zb-split { grid-template-columns: 1fr; min-height: auto; }
.zb-split-right { display: none; }
.zb-split-left { min-height: 100vh; padding: 24px 20px; }
.zb-split-main { padding: 32px 0; }
.zb-home-main .zb-home-title { font-size: 24px; }
.zb-split-h1 { font-size: 22px; }
}
/* ================================================================
Split-screen v2 — compact + device frame + tighter spacing
================================================================ */
/* Tighter padding on left column */
.zb-split-left { padding: 24px 48px 16px; }
.zb-split-main { padding: 24px 0; max-width: 400px; }
/* UM form: tighter input padding, smaller row gap */
body.page-id-16 .um .um-form input[type="text"],
body.page-id-16 .um .um-form input[type="email"],
body.page-id-16 .um .um-form input[type="password"],
body.page-id-57 .um .um-form input[type="text"],
body.page-id-57 .um .um-form input[type="email"],
body.page-id-57 .um .um-form input[type="password"] {
padding: 9px 12px !important;
font-size: 13.5px !important;
}
body.page-id-16 .um .um-row,
body.page-id-57 .um .um-row { margin: 0 0 12px !important; }
body.page-id-16 .um .um-field,
body.page-id-57 .um .um-field { margin-bottom: 12px !important; }
body.page-id-16 .um .um-field-label,
body.page-id-57 .um .um-field-label { margin-bottom: 2px !important; }
body.page-id-16 .um .um-field-label label,
body.page-id-57 .um .um-field-label label {
font-size: 11.5px !important;
margin-bottom: 2px !important;
}
body.page-id-16 .um-button,
body.page-id-57 .um-button,
body.page-id-16 .um button[type="submit"],
body.page-id-57 .um button[type="submit"] {
padding: 10px 20px !important;
font-size: 13.5px !important;
margin-top: 6px !important;
}
/* Secondary button (ログイン link in register form) hide on /new-account/ */
body.page-id-57 .um-button.um-alt,
body.page-id-57 .um-field-c.um-half:nth-child(2) { display: none !important; }
body.page-id-57 .um-field-c.um-half { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
/* ================================================================
UM validation error UI — minimal inline (replace ugly red tooltip)
================================================================ */
body.page-id-16 .um-field-error,
body.page-id-57 .um-field-error,
body.page-id-18 .um-field-error,
body.page-id-19 .um-field-error {
background: transparent !important;
color: #B94A4A !important;
padding: 0 !important;
margin: 5px 0 0 !important;
font-family: var(--font-sans) !important;
font-size: 11.5px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
border-radius: 0 !important;
border: none !important;
text-align: left !important;
box-shadow: none !important;
}
body.page-id-16 .um-field-arrow,
body.page-id-57 .um-field-arrow,
body.page-id-18 .um-field-arrow,
body.page-id-19 .um-field-arrow,
body.page-id-16 .um-field-error::before,
body.page-id-57 .um-field-error::before,
body.page-id-16 .um-field-error::after,
body.page-id-57 .um-field-error::after,
body.page-id-16 .um-field-error i,
body.page-id-57 .um-field-error i {
display: none !important;
}
/* Error state: red border on input */
body.page-id-16 .um-error input[type="text"],
body.page-id-16 .um-error input[type="email"],
body.page-id-16 .um-error input[type="password"],
body.page-id-57 .um-error input[type="text"],
body.page-id-57 .um-error input[type="email"],
body.page-id-57 .um-error input[type="password"],
body.page-id-16 .um-field-error ~ input,
body.page-id-57 .um-field-error ~ input,
body.page-id-16 input.um-error,
body.page-id-57 input.um-error {
border-color: #B94A4A !important;
background: #FFF8F6 !important;
}
/* Top-level error notice (form-wide) */
body.page-id-16 .um-notice.err,
body.page-id-57 .um-notice.err {
background: #FFF8F6 !important;
border: 1px solid #E7B4A5 !important;
color: #B43A1F !important;
border-radius: 6px !important;
padding: 10px 14px !important;
font-size: 12.5px !important;
margin-bottom: 12px !important;
box-shadow: none !important;
}
/* Compact lede / h1 on split */
.zb-split-h1 { font-size: 22px !important; margin-bottom: 8px !important; }
.zb-split-lede { font-size: 12.5px !important; margin-bottom: 20px !important; }
.zb-member-type-block { margin-bottom: 18px !important; }
.zb-member-type-fixed { padding: 9px 14px !important; font-size: 13px !important; }
/* Logo smaller */
.zb-split-logo img { height: 32px !important; }
/* ================================================================
Right column: device frame + tighter copy
================================================================ */
.zb-split-right { padding: 56px 48px !important; }
.zb-split-right h2 {
font-size: 24px !important;
line-height: 1.65 !important;
margin-bottom: 32px !important;
font-weight: 600 !important;
}
.zb-split-right-inner { max-width: 520px !important; }
/* Browser-window-style device frame around the mockup image */
.zb-device-frame {
position: relative;
background: #1f1f1f;
border-radius: 10px;
padding: 28px 0 0;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.36);
overflow: hidden;
}
.zb-device-frame::before {
content: "";
position: absolute;
top: 10px;
left: 14px;
width: 9px;
height: 9px;
background: #ff5f57;
border-radius: 50%;
box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #28c940;
}
.zb-device-frame::after {
content: "zumen-bank.com";
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.06);
padding: 3px 12px;
border-radius: 3px;
letter-spacing: 0;
}
.zb-device-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 0 0 10px 10px;
}
/* Mobile */
@media (max-width: 960px) {
.zb-split-left { padding: 20px 16px; }
.zb-split-main { padding: 16px 0; }
.zb-split-h1 { font-size: 20px !important; }
}
/* ================================================================
FORCE override — main column wider, padding adjusted
(split-main 400px ではユーザーに「横幅狭い」と複数回指摘されたため)
================================================================ */
.zb-split-main { max-width: 560px !important; padding: 32px 0 !important; }
.zb-split-left { padding: 32px 64px 24px !important; }
.zb-split-right { padding: 64px 56px !important; }
.zb-split-right h2 { font-size: 26px !important; line-height: 1.6 !important; }
body.page-id-16 .um,
body.page-id-57 .um { max-width: 100% !important; }
@media (max-width: 960px) {
.zb-split-left { padding: 24px 20px !important; }
}
/* ================================================================
2026-05-12 第 2 セッション fix
WP の theme.json contentSize=720px が .zb-split を縮めていた問題を解除
================================================================ */
.zb-split,
.entry-content > .zb-split,
.wp-block-group > .zb-split {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.zb-split-main { max-width: 640px !important; padding: 32px 0 !important; }
.zb-split-right-inner { max-width: 720px !important; }
.zb-device-frame { max-width: 760px !important; margin: 0 auto !important; }
.zb-split-right h2 { font-size: 32px !important; }
.zb-home-main .zb-home-title { font-size: 32px !important; line-height: 1.5 !important; }
.zb-home-main .zb-home-cta-grid { max-width: 480px; }
.zb-split-left { padding: 32px 80px 24px !important; }
.zb-split-right { padding: 96px 80px !important; }
@media (max-width: 1280px) {
.zb-split-left { padding: 32px 56px 24px !important; }
.zb-split-right { padding: 80px 56px !important; }
}
/* 登録完了 success notice */
.zb-success-notice {
font-family: var(--font-sans);
text-align: center;
padding: 56px 32px;
max-width: 560px;
margin: 80px auto;
background: #fff;
border: 1px solid #E8E6DC;
border-radius: 8px;
}
.zb-success-notice h2 {
color: #006330;
font-size: 20px;
font-weight: 600;
margin: 0 0 20px;
}
.zb-success-notice p {
color: #3D3D3A;
line-height: 1.85;
font-size: 14px;
margin: 0;
}
.zb-success-notice .zb-back-link {
display: inline-block;
margin-top: 28px;
color: #006330;
text-decoration: none;
font-size: 13px;
}
body.page-id-57.zb-status-success .um,
body.page-id-57.zb-status-success .um-form,
body.page-id-57.zb-status-success [class*=um-register] { display: none !important; }
/* ================================================================
2026-05-12 second pass: home / login / new-account を完全全画面化
上下左右の WP block 余白・admin bar・banner を全削除
================================================================ */
body.page-id-12, body.page-id-16, body.page-id-57 {
margin: 0 !important;
padding: 0 !important;
}
body.page-id-12 .wp-site-blocks,
body.page-id-16 .wp-site-blocks,
body.page-id-57 .wp-site-blocks {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-12 .wp-block-group,
body.page-id-16 .wp-block-group,
body.page-id-57 .wp-block-group,
body.page-id-12 .wp-block-post-content,
body.page-id-16 .wp-block-post-content,
body.page-id-57 .wp-block-post-content,
body.page-id-12 .entry-content,
body.page-id-16 .entry-content,
body.page-id-57 .entry-content,
body.page-id-12 main,
body.page-id-16 main,
body.page-id-57 main {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-12 header.wp-block-template-part,
body.page-id-16 header.wp-block-template-part,
body.page-id-57 header.wp-block-template-part,
body.page-id-12 footer.wp-block-template-part,
body.page-id-16 footer.wp-block-template-part,
body.page-id-57 footer.wp-block-template-part,
body.page-id-12 #wpadminbar,
body.page-id-16 #wpadminbar,
body.page-id-57 #wpadminbar {
display: none !important;
}
html.page-id-12, html.page-id-16, html.page-id-57,
body.page-id-12, body.page-id-16, body.page-id-57 {
margin-top: 0 !important;
}
/* split を viewport ぴったりに */
body.page-id-12 .zb-split,
body.page-id-16 .zb-split,
body.page-id-57 .zb-split {
min-height: 100vh !important;
height: 100vh !important;
overflow: hidden !important;
}
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
min-height: 100vh !important;
height: 100vh !important;
overflow-y: auto;
padding: 24px 64px !important;
}
body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
min-height: 100vh !important;
height: 100vh !important;
overflow: hidden !important;
padding: 64px 56px !important;
}
/* フォーム element を縦に詰める */
body.page-id-16 .zb-split-main,
body.page-id-57 .zb-split-main {
padding: 16px 0 !important;
justify-content: center;
}
body.page-id-16 .um-field,
body.page-id-57 .um-field {
margin-bottom: 10px !important;
}
body.page-id-16 .um-field input,
body.page-id-57 .um-field input {
padding: 8px 10px !important;
}
body.page-id-16 .um-field-label,
body.page-id-57 .um-field-label {
margin-bottom: 3px !important;
font-size: 12.5px !important;
}
/* ================================================================
2026-05-12 third pass: login/new-account 入力欄右配置 + スクロール削除
================================================================ */
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
grid-column: 2 !important;
overflow: hidden !important;
padding: 24px 56px !important;
}
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
grid-column: 1 !important;
}
body.page-id-16 .zb-split-main,
body.page-id-57 .zb-split-main {
padding: 8px 0 !important;
}
body.page-id-16 .um .um-form,
body.page-id-57 .um .um-form { margin: 0 !important; padding: 0 !important; }
body.page-id-16 .um-row,
body.page-id-57 .um-row { margin: 0 0 6px !important; }
body.page-id-16 .um-field,
body.page-id-57 .um-field { margin-bottom: 6px !important; padding: 0 !important; }
body.page-id-16 .um-field input,
body.page-id-57 .um-field input {
padding: 7px 10px !important;
height: auto !important;
line-height: 1.4 !important;
font-size: 13px !important;
}
body.page-id-16 .um-field-label,
body.page-id-57 .um-field-label {
margin-bottom: 2px !important;
font-size: 12px !important;
}
body.page-id-16 .zb-split-h1,
body.page-id-57 .zb-split-h1 { font-size: 22px !important; margin-bottom: 8px !important; }
body.page-id-16 .zb-split-lede,
body.page-id-57 .zb-split-lede {
font-size: 12.5px !important;
margin-bottom: 14px !important;
line-height: 1.7 !important;
}
body.page-id-16 .um-button,
body.page-id-57 .um-button {
margin-top: 4px !important;
padding: 8px 18px !important;
font-size: 13px !important;
}
body.page-id-57 .zb-member-type {
padding: 6px 10px !important;
margin-bottom: 10px !important;
}
/* 相互 CTA（new-account/login の下） */
.zb-cross-cta {
margin-top: 20px;
padding: 14px 16px;
background: #FAFAF7;
border: 1px solid #E8E6DC;
border-radius: 6px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
color: #526465;
line-height: 1.6;
}
.zb-cross-cta a {
color: #006330;
text-decoration: none;
font-weight: 600;
margin-left: 4px;
}
.zb-cross-cta a:hover { text-decoration: underline; }
/* grid-row 明示で同じ row1 に固定（auto-placement で row2 に流れる問題を解消） */
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
grid-row: 1 !important;
}
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
grid-row: 1 !important;
max-height: 100vh !important;
overflow: hidden !important;
}
/* box-sizing 強制で padding が height に外加算される問題を解消 */
body.page-id-12 .zb-split-left, body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-left, body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-left, body.page-id-57 .zb-split-right {
box-sizing: border-box !important;
}
body.page-id-12, body.page-id-16, body.page-id-57 {
overflow: hidden !important;
}
body.page-id-12 .zb-split, body.page-id-16 .zb-split, body.page-id-57 .zb-split {
box-sizing: border-box !important;
max-height: 100vh !important;
overflow: hidden !important;
}
/* cross-CTA を position:fixed で画面下に浮かせ、scrollHを引っ張らない */
.zb-cross-cta {
position: fixed !important;
bottom: 24px !important;
right: 64px !important;
left: auto !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
padding: 11px 18px !important;
border: 1px solid rgba(232, 230, 220, 0.8) !important;
border-radius: 999px !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
z-index: 100 !important;
font-size: 12.5px !important;
white-space: nowrap;
}
/* ================================================================
2026-05-12 fourth pass: / /login /new-account 3 ページ完全統一
================================================================ */
/* 1. CSS ブラウザモック frame 削除（SVG にすでに MacBook 含むため二重） */
.zb-device-frame::before,
.zb-device-frame::after { display: none !important; }
.zb-device-frame {
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.zb-device-frame img,
.zb-split-mockup {
border-radius: 0 !important;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25) !important;
}
/* 2. home (page-id-12) も layout 反転（緑左、CTA 右）*/
body.page-id-12 .zb-split-left {
grid-column: 2 !important;
grid-row: 1 !important;
}
body.page-id-12 .zb-split-right {
grid-column: 1 !important;
grid-row: 1 !important;
max-height: 100vh !important;
overflow: hidden !important;
}
/* 3. 図面バンクロゴ：白化 + 緑カラム上部に固定 + 拡大 */
body.page-id-12 .zb-split-logo,
body.page-id-16 .zb-split-logo,
body.page-id-57 .zb-split-logo {
position: fixed !important;
top: 32px !important;
left: 64px !important;
z-index: 50 !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
display: inline-block !important;
}
body.page-id-12 .zb-split-logo img,
body.page-id-16 .zb-split-logo img,
body.page-id-57 .zb-split-logo img {
filter: brightness(0) invert(1) !important;
height: 56px !important;
width: auto !important;
display: block !important;
}
/* 4. cross-CTA fixed pill 完全削除 */
.zb-cross-cta { display: none !important; }
/* 5. 3 ページ共通 padding / 構造を統一 */
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
padding: 80px 80px 32px !important; /* ロゴ高さ分上余白追加 */
justify-content: center;
align-items: stretch;
}
body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
padding: 80px !important;
}
/* h1 / h2 のフォントサイズ統一 */
body.page-id-12 .zb-split-h1,
body.page-id-12 .zb-home-title,
body.page-id-16 .zb-split-h1,
body.page-id-57 .zb-split-h1 {
font-size: 26px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
text-align: left !important;
margin: 0 0 14px !important;
color: var(--text-body) !important;
}
.zb-split-right h2 {
font-size: 30px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
color: #fff !important;
margin: 0 0 36px !important;
}
/* lede / subtitle 統一 */
body.page-id-12 .zb-split-lede,
body.page-id-12 .zb-home-subtitle,
body.page-id-16 .zb-split-lede,
body.page-id-57 .zb-split-lede {
font-size: 13px !important;
line-height: 1.8 !important;
color: var(--text-muted) !important;
margin: 0 0 28px !important;
text-align: left !important;
}
/* 上に詰まり過ぎ修正: 右カラム padding-top を増やす + 縦中央配置強化 */
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
padding: 120px 80px 60px !important;
justify-content: center !important;
}
body.page-id-12 .zb-split-main,
body.page-id-16 .zb-split-main,
body.page-id-57 .zb-split-main {
margin: auto 0 !important;
flex: none !important;
}
/* 左カラム（緑）も同様にバランス調整 */
body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
padding: 100px 80px !important;
justify-content: center !important;
}
body.page-id-12 .zb-split-right-inner,
body.page-id-16 .zb-split-right-inner,
body.page-id-57 .zb-split-right-inner {
margin: auto 0 !important;
}
/* ロゴと緑カラム content を縦中央寄せ */
body.page-id-12 .zb-split-logo,
body.page-id-16 .zb-split-logo,
body.page-id-57 .zb-split-logo {
top: 64px !important;
left: 80px !important;
}
/* 緑カラムを完全 flex center: ロゴ top 余白 + 中央 inner + 下余白 のバランス */
body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 80px !important;
}
body.page-id-12 .zb-split-right-inner,
body.page-id-16 .zb-split-right-inner,
body.page-id-57 .zb-split-right-inner {
margin: 0 !important;
width: 100%;
max-width: 720px !important;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 40px;
}
body.page-id-12 .zb-split-right h2,
body.page-id-16 .zb-split-right h2,
body.page-id-57 .zb-split-right h2 {
margin: 0 !important;
text-align: left;
}
/* footer 統一: 右カラム main は flex:1 で空間埋め、その中で content 中央、footer は flex 末尾 */
body.page-id-12 .zb-split-main,
body.page-id-16 .zb-split-main,
body.page-id-57 .zb-split-main {
flex: 1 1 auto !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
body.page-id-12 .zb-split-footer,
body.page-id-16 .zb-split-footer,
body.page-id-57 .zb-split-footer {
flex: 0 0 auto !important;
margin-top: auto !important;
padding-top: 20px !important;
border-top: 1px solid var(--border-soft);
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 12px !important;
}
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
display: flex !important;
flex-direction: column !important;
padding: 80px 80px 32px !important;
}
/* MacBook 画像をもっと大きく + ロゴ位置を下に + h2 size 調整 */
body.page-id-12 .zb-split-logo,
body.page-id-16 .zb-split-logo,
body.page-id-57 .zb-split-logo {
top: 112px !important;
left: 96px !important;
}
body.page-id-12 .zb-split-logo img,
body.page-id-16 .zb-split-logo img,
body.page-id-57 .zb-split-logo img {
height: 60px !important;
}
/* 右カラム inner を広げて画像大きく */
body.page-id-12 .zb-split-right-inner,
body.page-id-16 .zb-split-right-inner,
body.page-id-57 .zb-split-right-inner {
max-width: 880px !important;
gap: 36px !important;
}
body.page-id-12 .zb-device-frame img,
body.page-id-16 .zb-device-frame img,
body.page-id-57 .zb-device-frame img,
body.page-id-12 .zb-split-mockup,
body.page-id-16 .zb-split-mockup,
body.page-id-57 .zb-split-mockup {
width: 100% !important;
max-width: none !important;
height: auto !important;
}
/* h2 文字も少し大きく、可読性 */
body.page-id-12 .zb-split-right h2,
body.page-id-16 .zb-split-right h2,
body.page-id-57 .zb-split-right h2 {
font-size: 34px !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* 緑カラムの padding を MacBook 大型化に合わせて少し詰める */
body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
padding: 200px 64px 80px !important; /* top 大目: ロゴ・h2 が上、image 下 */
}
/* new-account だけフォーム要素多いので 100% zoom で footer 切れる対策。全要素圧縮 */
body.page-id-57 .zb-split-left {
padding: 64px 64px 24px !important;
}
body.page-id-57 .zb-split-h1 {
font-size: 20px !important;
margin: 0 0 6px !important;
}
body.page-id-57 .zb-split-lede {
font-size: 11.5px !important;
margin: 0 0 12px !important;
line-height: 1.6 !important;
}
body.page-id-57 .zb-member-type-container,
body.page-id-57 .zb-member-type-label,
body.page-id-57 [class*=member-type] {
font-size: 11.5px !important;
padding: 6px 12px !important;
margin-bottom: 8px !important;
}
body.page-id-57 .um-row { margin: 0 0 4px !important; }
body.page-id-57 .um-field { margin: 0 0 6px !important; }
body.page-id-57 .um-field input {
padding: 6px 10px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
body.page-id-57 .um-field-label {
font-size: 11px !important;
margin: 0 0 2px !important;
}
body.page-id-57 .um-button,
body.page-id-57 input[type=submit] {
padding: 8px 18px !important;
font-size: 12.5px !important;
margin-top: 6px !important;
}
body.page-id-57 .zb-split-footer {
font-size: 11px !important;
padding-top: 10px !important;
}
/* ロゴも new-account だけ少し小さく+上に */
body.page-id-57 .zb-split-logo { top: 80px !important; left: 80px !important; }
body.page-id-57 .zb-split-logo img { height: 48px !important; }
/* new-account 100%zoom (768px viewport) でも footer 入れる更圧縮 */
body.page-id-57 .zb-split-left { padding: 40px 56px 12px !important; }
body.page-id-57 .zb-split-logo { top: 48px !important; left: 56px !important; }
body.page-id-57 .zb-split-logo img { height: 40px !important; }
body.page-id-57 .zb-split-h1 { font-size: 18px !important; margin: 0 0 4px !important; }
body.page-id-57 .zb-split-lede { font-size: 11px !important; margin: 0 0 8px !important; line-height: 1.5 !important; }
body.page-id-57 .um-row { margin: 0 0 2px !important; }
body.page-id-57 .um-field { margin: 0 0 4px !important; padding: 0 !important; }
body.page-id-57 .um-field input { padding: 5px 10px !important; font-size: 11.5px !important; height: auto !important; }
body.page-id-57 .um-field-label { font-size: 10.5px !important; margin: 0 0 1px !important; }
body.page-id-57 .um-button,
body.page-id-57 input[type=submit] { padding: 7px 16px !important; font-size: 12px !important; margin-top: 4px !important; }
body.page-id-57 [class*=member-type] { padding: 5px 10px !important; margin-bottom: 6px !important; font-size: 11px !important; }
body.page-id-57 .zb-split-footer { font-size: 10.5px !important; padding-top: 8px !important; }
/* ================================================================
2026-05-12 fifth pass: viewport/zoom 耐性。全要素 clamp() で fluid 化
================================================================ */
/* MacBook 画像を緑カラム inner の幅まで拡張 */
body.page-id-12 .zb-device-frame,
body.page-id-16 .zb-device-frame,
body.page-id-57 .zb-device-frame {
max-width: none !important;
width: 100% !important;
}
body.page-id-12 .zb-device-frame img,
body.page-id-16 .zb-device-frame img,
body.page-id-57 .zb-device-frame img {
width: 100% !important;
max-width: none !important;
height: auto !important;
display: block !important;
}
/* 緑カラム inner: viewport に応じて柔軟、max 1000px */
body.page-id-12 .zb-split-right-inner,
body.page-id-16 .zb-split-right-inner,
body.page-id-57 .zb-split-right-inner {
max-width: clamp(360px, 80%, 1000px) !important;
gap: clamp(20px, 3vh, 48px) !important;
}
/* 緑カラム padding: vw ベース */
body.page-id-12 .zb-split-right,
body.page-id-16 .zb-split-right,
body.page-id-57 .zb-split-right {
padding: clamp(60px, 8vh, 140px) clamp(40px, 4vw, 96px) !important;
}
/* h2 fluid */
body.page-id-12 .zb-split-right h2,
body.page-id-16 .zb-split-right h2,
body.page-id-57 .zb-split-right h2 {
font-size: clamp(20px, 2.2vw, 36px) !important;
line-height: 1.45 !important;
}
/* ロゴ位置を vh/vw 化、サイズも clamp */
body.page-id-12 .zb-split-logo,
body.page-id-16 .zb-split-logo,
body.page-id-57 .zb-split-logo {
top: clamp(32px, 6vh, 96px) !important;
left: clamp(32px, 3.5vw, 80px) !important;
}
body.page-id-12 .zb-split-logo img,
body.page-id-16 .zb-split-logo img,
body.page-id-57 .zb-split-logo img {
height: clamp(36px, 4vh, 56px) !important;
}
/* 右カラム padding fluid + footer 右余白確保 */
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-57 .zb-split-left {
padding: clamp(48px, 7vh, 120px) clamp(32px, 4vw, 80px) clamp(16px, 2vh, 32px) !important;
}
/* h1 / lede fluid */
body.page-id-12 .zb-split-h1,
body.page-id-12 .zb-home-title,
body.page-id-16 .zb-split-h1,
body.page-id-57 .zb-split-h1 {
font-size: clamp(18px, 1.6vw, 26px) !important;
margin: 0 0 clamp(4px, 0.6vh, 12px) !important;
}
body.page-id-12 .zb-split-lede,
body.page-id-12 .zb-home-subtitle,
body.page-id-16 .zb-split-lede,
body.page-id-57 .zb-split-lede {
font-size: clamp(11px, 0.8vw, 13.5px) !important;
margin: 0 0 clamp(10px, 1.5vh, 24px) !important;
}
/* フォーム fluid */
body.page-id-16 .um-field input,
body.page-id-57 .um-field input {
padding: clamp(6px, 0.9vh, 11px) 12px !important;
font-size: clamp(11.5px, 0.9vw, 14px) !important;
height: auto !important;
}
body.page-id-16 .um-field-label,
body.page-id-57 .um-field-label {
font-size: clamp(10.5px, 0.75vw, 13px) !important;
margin: 0 0 clamp(1px, 0.3vh, 5px) !important;
}
body.page-id-16 .um-row,
body.page-id-57 .um-row { margin: 0 0 clamp(3px, 0.6vh, 10px) !important; }
body.page-id-16 .um-field,
body.page-id-57 .um-field { margin: 0 0 clamp(4px, 0.7vh, 12px) !important; }
body.page-id-16 .um-button,
body.page-id-57 .um-button,
body.page-id-57 input[type=submit] {
padding: clamp(7px, 1vh, 12px) clamp(16px, 1.5vw, 28px) !important;
font-size: clamp(12px, 0.9vw, 14px) !important;
margin-top: clamp(4px, 0.6vh, 12px) !important;
}
body.page-id-57 [class*=member-type] {
padding: clamp(6px, 0.9vh, 11px) clamp(10px, 1vw, 16px) !important;
margin-bottom: clamp(6px, 1vh, 12px) !important;
font-size: clamp(11.5px, 0.9vw, 13.5px) !important;
}
/* home の CTA カード fluid */
body.page-id-12 .zb-home-cta {
padding: clamp(12px, 1.5vh, 22px) clamp(14px, 1.5vw, 24px) !important;
font-size: clamp(12px, 0.9vw, 14.5px) !important;
}
body.page-id-12 .zb-home-cta-grid {
gap: clamp(8px, 1vh, 16px) !important;
}
/* footer 右見切れ対策 + fluid */
body.page-id-12 .zb-split-footer,
body.page-id-16 .zb-split-footer,
body.page-id-57 .zb-split-footer {
padding: clamp(8px, 1vh, 20px) 0 0 !important;
font-size: clamp(10px, 0.75vw, 13px) !important;
gap: clamp(8px, 1vw, 24px) !important;
}
body.page-id-12 .zb-split-footer-links,
body.page-id-16 .zb-split-footer-links,
body.page-id-57 .zb-split-footer-links {
display: inline-flex;
gap: clamp(8px, 1vw, 24px) !important;
}
body.page-id-12 .zb-split-footer-links a,
body.page-id-16 .zb-split-footer-links a,
body.page-id-57 .zb-split-footer-links a {
margin-right: 0 !important;
}
/* min viewport 720p で破綻しないように下限保証 */
@media (max-height: 720px) {
body.page-id-57 .zb-split-h1 { font-size: 16px !important; }
body.page-id-57 .zb-split-lede { font-size: 10.5px !important; }
}
/* フォーム全要素を左 0 基準に揃える + ボタン縦幅を入力欄と統一 */
body.page-id-16 .um,
body.page-id-16 .um-form,
body.page-id-16 .um-row,
body.page-id-16 .um-field,
body.page-id-16 .um-field > div,
body.page-id-57 .um,
body.page-id-57 .um-form,
body.page-id-57 .um-row,
body.page-id-57 .um-field,
body.page-id-57 .um-field > div,
body.page-id-57 [class*=member-type],
body.page-id-57 [class*=member-type] > * {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 「販売パートナー」box 自体は背景・borderあり、内側 padding はキープ */
body.page-id-57 [class*=member-type] {
padding: clamp(8px, 1vh, 14px) clamp(12px, 1vw, 18px) !important;
}
/* ボタン縦幅 = 入力欄と統一 */
body.page-id-16 .um-button,
body.page-id-16 input[type=submit],
body.page-id-57 .um-button,
body.page-id-57 input[type=submit] {
padding: clamp(8px, 1.1vh, 13px) clamp(16px, 1.5vw, 28px) !important;
font-size: clamp(12px, 0.9vw, 14px) !important;
line-height: 1.4 !important;
height: auto !important;
min-height: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
margin-top: clamp(8px, 1vh, 16px) !important;
}
/* h1 / lede / footer も同じ左基準 */
body.page-id-16 .zb-split-h1,
body.page-id-16 .zb-split-lede,
body.page-id-16 .zb-split-footer,
body.page-id-57 .zb-split-h1,
body.page-id-57 .zb-split-lede,
body.page-id-57 .zb-split-footer {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* 会員タイプ label を 完全左揃え */
body.page-id-57 .zb-member-type-label,
body.page-id-57 .zb-member-type-block,
body.page-id-57 .zb-member-type-block > span:first-child {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* member-type-block 内の選択 box（販売パートナー ✓）は内側 padding 維持 */
body.page-id-57 .zb-member-type-option,
body.page-id-57 .zb-member-type-block > div:not(.zb-member-type-label),
body.page-id-57 .zb-member-type-selected {
padding: clamp(8px, 1vh, 14px) clamp(12px, 1vw, 18px) !important;
}
/* 100% zoom 等で footer 見切れる場合の追加圧縮 */
@media (max-height: 1100px) {
body.page-id-57 .zb-split-left {
padding-top: clamp(40px, 5vh, 80px) !important;
padding-bottom: clamp(12px, 1.5vh, 20px) !important;
}
body.page-id-57 .um-field { margin-bottom: clamp(3px, 0.5vh, 7px) !important; }
}
/* ロゴをさらに拡大 + 開始位置を下に */
body.page-id-12 .zb-split-logo,
body.page-id-16 .zb-split-logo,
body.page-id-57 .zb-split-logo {
top: clamp(56px, 10vh, 140px) !important;
left: clamp(40px, 4vw, 96px) !important;
}
body.page-id-12 .zb-split-logo img,
body.page-id-16 .zb-split-logo img,
body.page-id-57 .zb-split-logo img {
height: clamp(52px, 6.5vh, 84px) !important;
}
/* password-reset (page-id-29) を 3 ページと同じ統一形式 */
body.page-id-29 {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.page-id-29 .wp-site-blocks,
body.page-id-29 .wp-block-group,
body.page-id-29 .wp-block-post-content,
body.page-id-29 .entry-content,
body.page-id-29 main {
padding: 0 !important;
margin: 0 !important;
}
body.page-id-29 header.wp-block-template-part,
body.page-id-29 footer.wp-block-template-part,
body.page-id-29 #wpadminbar {
display: none !important;
}
body.page-id-29 .zb-split {
min-height: 100vh !important;
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.page-id-29 .zb-split-left,
body.page-id-29 .zb-split-right {
box-sizing: border-box !important;
min-height: 100vh !important;
height: 100vh !important;
grid-row: 1 !important;
}
body.page-id-29 .zb-split-left {
grid-column: 2 !important;
display: flex !important;
flex-direction: column !important;
padding: clamp(48px, 7vh, 120px) clamp(32px, 4vw, 80px) clamp(16px, 2vh, 32px) !important;
}
body.page-id-29 .zb-split-right {
grid-column: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
max-height: 100vh !important;
overflow: hidden !important;
padding: clamp(60px, 8vh, 140px) clamp(40px, 4vw, 96px) !important;
}
body.page-id-29 .zb-split-right-inner {
margin: 0 !important;
max-width: clamp(360px, 80%, 1000px) !important;
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(20px, 3vh, 48px) !important;
}
body.page-id-29 .zb-split-right h2 {
font-size: clamp(20px, 2.2vw, 36px) !important;
line-height: 1.45 !important;
color: #fff !important;
margin: 0 !important;
}
body.page-id-29 .zb-device-frame { max-width: none !important; width: 100% !important; }
body.page-id-29 .zb-device-frame img,
body.page-id-29 .zb-split-mockup {
width: 100% !important;
max-width: none !important;
height: auto !important;
}
body.page-id-29 .zb-split-logo {
position: fixed !important;
top: clamp(56px, 10vh, 140px) !important;
left: clamp(40px, 4vw, 96px) !important;
z-index: 50 !important;
margin: 0 !important;
}
body.page-id-29 .zb-split-logo img {
filter: brightness(0) invert(1) !important;
height: clamp(52px, 6.5vh, 84px) !important;
width: auto !important;
display: block !important;
}
body.page-id-29 .zb-split-main {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
body.page-id-29 .zb-split-h1 {
font-size: clamp(18px, 1.6vw, 26px) !important;
margin: 0 0 clamp(4px, 0.6vh, 12px) !important;
}
body.page-id-29 .zb-split-lede {
font-size: clamp(11px, 0.8vw, 13.5px) !important;
margin: 0 0 clamp(10px, 1.5vh, 24px) !important;
line-height: 1.7 !important;
}
body.page-id-29 .um,
body.page-id-29 .um-form,
body.page-id-29 .um-row,
body.page-id-29 .um-field,
body.page-id-29 .um-field > div {
padding: 0 !important;
margin: 0 0 clamp(4px, 0.7vh, 12px) !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.page-id-29 .um-field input {
padding: clamp(8px, 1.1vh, 13px) 12px !important;
font-size: clamp(11.5px, 0.9vw, 14px) !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.page-id-29 .um-field-label {
font-size: clamp(10.5px, 0.75vw, 13px) !important;
margin: 0 0 clamp(1px, 0.3vh, 5px) !important;
}
body.page-id-29 .um-button,
body.page-id-29 input[type=submit] {
padding: clamp(8px, 1.1vh, 13px) clamp(16px, 1.5vw, 28px) !important;
font-size: clamp(12px, 0.9vw, 14px) !important;
width: 100% !important;
height: auto !important;
margin-top: clamp(8px, 1vh, 16px) !important;
box-sizing: border-box !important;
}
body.page-id-29 .zb-split-footer {
flex: 0 0 auto !important;
margin-top: auto !important;
padding: clamp(8px, 1vh, 20px) 0 0 !important;
font-size: clamp(10px, 0.75vw, 13px) !important;
border-top: 1px solid var(--border-soft);
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* ==== 100%zoom (実 viewport 高 1000px 以下) で footer 切れる問題の決定打 ==== */
@media (max-height: 1000px) {
body.page-id-57 .zb-split-left {
padding: 24px clamp(32px, 4vw, 80px) 8px !important;
}
body.page-id-57 .zb-split-h1 {
font-size: 16px !important;
margin: 0 0 2px !important;
}
body.page-id-57 .zb-split-lede {
font-size: 10.5px !important;
line-height: 1.45 !important;
margin: 0 0 6px !important;
}
body.page-id-57 [class*=member-type-label] { font-size: 10.5px !important; margin: 0 0 2px !important; }
body.page-id-57 [class*=member-type]:not([class*=label]) { padding: 5px 10px !important; margin-bottom: 4px !important; font-size: 10.5px !important; }
body.page-id-57 .um-row { margin: 0 0 1px !important; }
body.page-id-57 .um-field { margin: 0 0 2px !important; }
body.page-id-57 .um-field-label { font-size: 10px !important; margin: 0 0 0px !important; line-height: 1.3 !important; }
body.page-id-57 .um-field input { padding: 5px 10px !important; font-size: 11px !important; line-height: 1.3 !important; }
body.page-id-57 .um-button, body.page-id-57 input[type=submit] {
padding: 6px 16px !important; font-size: 11.5px !important; margin-top: 2px !important;
}
body.page-id-57 .zb-split-footer { padding-top: 4px !important; font-size: 10px !important; }
body.page-id-57 .zb-split-logo { top: 24px !important; }
body.page-id-57 .zb-split-logo img { height: 40px !important; }
}
@media (max-height: 850px) {
body.page-id-57 .zb-split-left { padding-top: 16px !important; padding-bottom: 4px !important; }
body.page-id-57 .zb-split-h1 { font-size: 14px !important; }
body.page-id-57 .zb-split-lede { font-size: 10px !important; margin-bottom: 4px !important; }
body.page-id-57 .um-field input { padding: 4px 10px !important; font-size: 10.5px !important; }
body.page-id-57 .um-field-label { font-size: 9.5px !important; }
body.page-id-57 .um-button, body.page-id-57 input[type=submit] { padding: 5px 14px !important; font-size: 11px !important; }
body.page-id-57 .zb-split-logo { top: 16px !important; }
body.page-id-57 .zb-split-logo img { height: 32px !important; }
}
/* ================================================================
2026-05-12 final pass: 4ページ zoom 挙動完全統一 (login 基準)
================================================================ */
body.page-id-12, body.page-id-16, body.page-id-29, body.page-id-57 {
margin: 0 !important; padding: 0 !important; overflow: hidden !important;
}
body.page-id-12 .wp-site-blocks, body.page-id-12 .wp-block-group, body.page-id-12 .entry-content, body.page-id-12 main,
body.page-id-16 .wp-site-blocks, body.page-id-16 .wp-block-group, body.page-id-16 .entry-content, body.page-id-16 main,
body.page-id-29 .wp-site-blocks, body.page-id-29 .wp-block-group, body.page-id-29 .entry-content, body.page-id-29 main,
body.page-id-57 .wp-site-blocks, body.page-id-57 .wp-block-group, body.page-id-57 .entry-content, body.page-id-57 main {
padding: 0 !important; margin: 0 !important;
}
body.page-id-12 header.wp-block-template-part, body.page-id-12 footer.wp-block-template-part, body.page-id-12 #wpadminbar,
body.page-id-16 header.wp-block-template-part, body.page-id-16 footer.wp-block-template-part, body.page-id-16 #wpadminbar,
body.page-id-29 header.wp-block-template-part, body.page-id-29 footer.wp-block-template-part, body.page-id-29 #wpadminbar,
body.page-id-57 header.wp-block-template-part, body.page-id-57 footer.wp-block-template-part, body.page-id-57 #wpadminbar {
display: none !important;
}
body.page-id-12 .zb-split, body.page-id-16 .zb-split, body.page-id-29 .zb-split, body.page-id-57 .zb-split {
height: 100vh !important; max-height: 100vh !important; min-height: 100vh !important;
overflow: hidden !important; box-sizing: border-box !important;
display: grid !important; grid-template-columns: 1fr 1fr !important;
}
body.page-id-12 .zb-split-left, body.page-id-16 .zb-split-left, body.page-id-29 .zb-split-left, body.page-id-57 .zb-split-left {
grid-column: 2 !important; grid-row: 1 !important;
display: flex !important; flex-direction: column !important;
box-sizing: border-box !important; height: 100vh !important;
padding: clamp(48px, 7vh, 120px) clamp(32px, 4vw, 80px) clamp(16px, 2vh, 32px) !important;
}
body.page-id-12 .zb-split-right, body.page-id-16 .zb-split-right, body.page-id-29 .zb-split-right, body.page-id-57 .zb-split-right {
grid-column: 1 !important; grid-row: 1 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
box-sizing: border-box !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important;
padding: clamp(60px, 8vh, 140px) clamp(40px, 4vw, 96px) !important;
}
body.page-id-12 .zb-split-right-inner, body.page-id-16 .zb-split-right-inner, body.page-id-29 .zb-split-right-inner, body.page-id-57 .zb-split-right-inner {
margin: 0 !important; max-width: clamp(360px, 80%, 1000px) !important; width: 100%;
display: flex; flex-direction: column; gap: clamp(20px, 3vh, 48px) !important;
}
body.page-id-12 .zb-split-right h2, body.page-id-16 .zb-split-right h2, body.page-id-29 .zb-split-right h2, body.page-id-57 .zb-split-right h2 {
font-size: clamp(20px, 2.2vw, 36px) !important; line-height: 1.45 !important; color: #fff !important; margin: 0 !important;
}
body.page-id-12 .zb-device-frame, body.page-id-16 .zb-device-frame, body.page-id-29 .zb-device-frame, body.page-id-57 .zb-device-frame {
max-width: none !important; width: 100% !important;
}
body.page-id-12 .zb-device-frame img, body.page-id-16 .zb-device-frame img, body.page-id-29 .zb-device-frame img, body.page-id-57 .zb-device-frame img {
width: 100% !important; max-width: none !important; height: auto !important; display: block !important;
}
body.page-id-12 .zb-split-logo, body.page-id-16 .zb-split-logo, body.page-id-29 .zb-split-logo, body.page-id-57 .zb-split-logo {
position: fixed !important; top: clamp(56px, 10vh, 140px) !important; left: clamp(40px, 4vw, 96px) !important;
z-index: 50 !important; margin: 0 !important; padding: 0 !important;
}
body.page-id-12 .zb-split-logo img, body.page-id-16 .zb-split-logo img, body.page-id-29 .zb-split-logo img, body.page-id-57 .zb-split-logo img {
filter: brightness(0) invert(1) !important; height: clamp(52px, 6.5vh, 84px) !important; width: auto !important; display: block !important;
}
body.page-id-12 .zb-split-main, body.page-id-16 .zb-split-main, body.page-id-29 .zb-split-main, body.page-id-57 .zb-split-main {
flex: 1 1 auto !important; margin: 0 !important;
display: flex !important; flex-direction: column !important; justify-content: center !important;
}
body.page-id-12 .zb-split-footer, body.page-id-16 .zb-split-footer, body.page-id-29 .zb-split-footer, body.page-id-57 .zb-split-footer {
flex: 0 0 auto !important; margin-top: auto !important;
padding: clamp(8px, 1vh, 20px) 0 0 !important; font-size: clamp(10px, 0.75vw, 13px) !important;
border-top: 1px solid var(--border-soft);
display: flex !important; justify-content: space-between !important; align-items: center !important;
}
body.page-id-12 .zb-split-h1, body.page-id-12 .zb-home-title,
body.page-id-16 .zb-split-h1, body.page-id-29 .zb-split-h1, body.page-id-57 .zb-split-h1 {
font-size: clamp(18px, 1.6vw, 26px) !important; line-height: 1.5 !important;
margin: 0 0 clamp(4px, 0.6vh, 12px) !important; padding: 0 !important;
}
body.page-id-12 .zb-split-lede, body.page-id-12 .zb-home-subtitle,
body.page-id-16 .zb-split-lede, body.page-id-29 .zb-split-lede, body.page-id-57 .zb-split-lede {
font-size: clamp(11px, 0.8vw, 13.5px) !important; line-height: 1.7 !important;
margin: 0 0 clamp(10px, 1.5vh, 24px) !important; padding: 0 !important;
}
body.page-id-16 .um, body.page-id-16 .um-form, body.page-id-16 .um-row, body.page-id-16 .um-field, body.page-id-16 .um-field > div,
body.page-id-29 .um, body.page-id-29 .um-form, body.page-id-29 .um-row, body.page-id-29 .um-field, body.page-id-29 .um-field > div,
body.page-id-57 .um, body.page-id-57 .um-form, body.page-id-57 .um-row, body.page-id-57 .um-field, body.page-id-57 .um-field > div {
padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
width: 100% !important; box-sizing: border-box !important;
}
body.page-id-16 .um-field, body.page-id-29 .um-field, body.page-id-57 .um-field {
margin-bottom: clamp(4px, 0.7vh, 12px) !important;
}
body.page-id-16 .um-row, body.page-id-29 .um-row, body.page-id-57 .um-row {
margin-bottom: clamp(3px, 0.6vh, 10px) !important;
}
body.page-id-16 .um-field input, body.page-id-29 .um-field input, body.page-id-57 .um-field input {
padding: clamp(6px, 0.9vh, 11px) 12px !important; font-size: clamp(11.5px, 0.9vw, 14px) !important;
height: auto !important; line-height: 1.4 !important;
}
body.page-id-16 .um-field-label, body.page-id-29 .um-field-label, body.page-id-57 .um-field-label {
font-size: clamp(10.5px, 0.75vw, 13px) !important; margin: 0 0 clamp(1px, 0.3vh, 5px) !important; padding: 0 !important;
}
body.page-id-16 .um-button, body.page-id-16 input[type=submit],
body.page-id-29 .um-button, body.page-id-29 input[type=submit],
body.page-id-57 .um-button, body.page-id-57 input[type=submit] {
padding: clamp(8px, 1.1vh, 13px) clamp(16px, 1.5vw, 28px) !important;
font-size: clamp(12px, 0.9vw, 14px) !important;
line-height: 1.4 !important; height: auto !important; min-height: 0 !important;
width: 100% !important; box-sizing: border-box !important;
margin-top: clamp(8px, 1vh, 16px) !important;
}
body.page-id-57 .zb-member-type-label, body.page-id-57 .zb-member-type-block,
body.page-id-57 [class*=member-type-label] {
padding-left: 0 !important; margin-left: 0 !important;
}
body.page-id-57 [class*=member-type]:not([class*=label]) {
padding: clamp(6px, 0.9vh, 11px) clamp(12px, 1vw, 16px) !important;
margin-bottom: clamp(6px, 1vh, 12px) !important;
font-size: clamp(11.5px, 0.9vw, 13.5px) !important;
}
@media (max-height: 1000px) {
body.page-id-57 .zb-split-left { padding-top: clamp(32px, 4vh, 56px) !important; padding-bottom: clamp(8px, 1vh, 16px) !important; }
body.page-id-57 .um-field { margin-bottom: clamp(2px, 0.4vh, 6px) !important; }
body.page-id-57 .um-field input { padding: clamp(5px, 0.7vh, 9px) 12px !important; }
body.page-id-57 .zb-split-h1 { font-size: clamp(16px, 1.4vw, 22px) !important; }
body.page-id-57 .zb-split-lede { font-size: clamp(10.5px, 0.75vw, 12.5px) !important; margin-bottom: clamp(8px, 1vh, 16px) !important; }
}
/* ================================================================
会員タイプ block の padding 16px を完全除去（forced）
================================================================ */
body.page-id-57 .zb-member-type-block,
body.page-id-57 div.zb-member-type-block,
body.page-id-57 [class~="zb-member-type-block"] {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.page-id-57 .zb-member-type-block > *:first-child,
body.page-id-57 .zb-member-type-label {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ================================================================
スクロール許容+ scrollbar 非表示 (フォーム多くても footer 見せる)
================================================================ */
body.page-id-12, body.page-id-16, body.page-id-29, body.page-id-57 {
overflow: hidden !important;
}
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-29 .zb-split-left,
body.page-id-57 .zb-split-left {
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body.page-id-12 .zb-split-left::-webkit-scrollbar,
body.page-id-16 .zb-split-left::-webkit-scrollbar,
body.page-id-29 .zb-split-left::-webkit-scrollbar,
body.page-id-57 .zb-split-left::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* ================================================================
footer sticky で常時画面下に固定
================================================================ */
body.page-id-12 .zb-split-footer,
body.page-id-16 .zb-split-footer,
body.page-id-29 .zb-split-footer,
body.page-id-57 .zb-split-footer {
position: sticky !important;
bottom: 0 !important;
background: #fff !important;
margin-top: auto !important;
z-index: 10 !important;
}
/* ================================================================
footer 完全統一 (4ページ identical visual)
================================================================ */
body.page-id-12 .zb-split-footer,
body.page-id-16 .zb-split-footer,
body.page-id-29 .zb-split-footer,
body.page-id-57 .zb-split-footer {
font-size: 12px !important;
line-height: 1.6 !important;
padding: 14px 0 !important;
margin: 0 !important;
border-top: 1px solid var(--border-soft) !important;
background: #fff !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 16px !important;
position: sticky !important;
bottom: 0 !important;
z-index: 10 !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.page-id-12 .zb-split-footer-links,
body.page-id-16 .zb-split-footer-links,
body.page-id-29 .zb-split-footer-links,
body.page-id-57 .zb-split-footer-links {
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
font-size: 12px !important;
margin: 0 !important;
}
body.page-id-12 .zb-split-footer-links a,
body.page-id-16 .zb-split-footer-links a,
body.page-id-29 .zb-split-footer-links a,
body.page-id-57 .zb-split-footer-links a {
color: var(--text-muted) !important;
text-decoration: none !important;
font-size: 12px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
body.page-id-12 .zb-split-footer-links a:hover,
body.page-id-16 .zb-split-footer-links a:hover,
body.page-id-29 .zb-split-footer-links a:hover,
body.page-id-57 .zb-split-footer-links a:hover {
color: var(--text-body) !important;
}
body.page-id-12 .zb-split-copyright,
body.page-id-16 .zb-split-copyright,
body.page-id-29 .zb-split-copyright,
body.page-id-57 .zb-split-copyright {
font-size: 12px !important;
color: var(--text-muted) !important;
white-space: nowrap !important;
}
/* new-account 上余白増加 (上詰まり修正) */
body.page-id-57 .zb-split-left {
padding-top: clamp(80px, 12vh, 160px) !important;
}
@media (max-height: 1000px) {
body.page-id-57 .zb-split-left {
padding-top: clamp(60px, 9vh, 100px) !important;
}
}
/* ================================================================
footer を position:fixed で画面下に完全固定（4ページ identical 位置）
sticky だと scroll container 内に閉じ込められて new-account でズレる
================================================================ */
body.page-id-12 .zb-split-footer,
body.page-id-16 .zb-split-footer,
body.page-id-29 .zb-split-footer,
body.page-id-57 .zb-split-footer {
position: fixed !important;
bottom: 0 !important;
left: 50vw !important;
right: 0 !important;
width: 50vw !important;
padding: 14px clamp(32px, 4vw, 80px) !important;
background: #fff !important;
border-top: 1px solid var(--border-soft) !important;
z-index: 100 !important;
box-sizing: border-box !important;
margin: 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 16px !important;
font-size: 12px !important;
}
/* form area の下に footer 分の余白を確保 */
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-29 .zb-split-left,
body.page-id-57 .zb-split-left {
padding-bottom: 60px !important;
}
/* password-reset: UM の .um.um-password の card 枠線+背景を完全 override */
body.page-id-29 .um,
body.page-id-29 .um.um-password,
body.page-id-29 .um-password,
body.page-id-29 form.um,
body.page-id-29 form[name="lostpasswordform"] {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
max-width: none !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.page-id-29 .um-form {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* ================================================================
右カラム(form側)の上に「ロゴ高さ＋余白」相当の空白ヘッダー領域を固定確保
エラー時もフォーム top 位置がぶれない、4ページ完全identical
================================================================ */
body.page-id-12 .zb-split-left,
body.page-id-16 .zb-split-left,
body.page-id-29 .zb-split-left,
body.page-id-57 .zb-split-left {
padding-top: 0 !important;
padding-bottom: 60px !important;
}
body.page-id-12 .zb-split-left::before,
body.page-id-16 .zb-split-left::before,
body.page-id-29 .zb-split-left::before,
body.page-id-57 .zb-split-left::before {
content: '';
display: block;
height: clamp(140px, 18vh, 220px);
flex-shrink: 0;
}
/* main の縦中央 → top alignment に変更 (エラー時 layout 不動) */
body.page-id-12 .zb-split-main,
body.page-id-16 .zb-split-main,
body.page-id-29 .zb-split-main,
body.page-id-57 .zb-split-main {
justify-content: flex-start !important;
}
@media (max-height: 1000px) {
body.page-id-12 .zb-split-left::before,
body.page-id-16 .zb-split-left::before,
body.page-id-29 .zb-split-left::before,
body.page-id-57 .zb-split-left::before {
height: clamp(100px, 13vh, 160px);
}
}
@media (max-height: 800px) {
body.page-id-12 .zb-split-left::before,
body.page-id-16 .zb-split-left::before,
body.page-id-29 .zb-split-left::before,
body.page-id-57 .zb-split-left::before {
height: clamp(80px, 10vh, 120px);
}
}
/* ================================================================
会員タイプの padding を完全解消（強制最終 fix）
.zb-member-type-block 自体には padding/margin 0
内側の選択 box (.zb-member-type-fixed) のみに内側 padding
================================================================ */
body.page-id-57 .zb-member-type-block,
body.page-id-57 div.zb-member-type-block,
html body.page-id-57 .zb-member-type-block {
padding: 0 !important;
margin: 0 0 clamp(6px, 1vh, 14px) !important;
border: none !important;
background: none !important;
}
body.page-id-57 .zb-member-type-label,
body.page-id-57 span.zb-member-type-label {
padding: 0 !important;
margin: 0 0 clamp(2px, 0.4vh, 6px) !important;
display: block !important;
font-size: clamp(10.5px, 0.75vw, 13px) !important;
color: var(--text-muted) !important;
text-align: left !important;
}
body.page-id-57 .zb-member-type-fixed,
body.page-id-57 div.zb-member-type-fixed {
padding: clamp(10px, 1.2vh, 16px) clamp(14px, 1.2vw, 20px) !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(0, 99, 48, 0.08) !important;
border: 1px solid rgba(0, 99, 48, 0.3) !important;
border-radius: 6px !important;
color: #006330 !important;
font-weight: 500 !important;
font-size: clamp(12px, 0.95vw, 14.5px) !important;
}
body.page-id-57 .zb-password-hint {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: clamp(10px, 0.7vw, 12px) !important;
color: var(--text-muted) !important;
line-height: 1.5 !important;
}
/* hint span を label と同じ行に */
body.page-id-57 .um-field-label:has(.zb-password-hint) {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
body.page-id-57 .zb-password-hint {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-size: clamp(10px, 0.7vw, 12px) !important;
color: var(--text-muted) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* 会員タイプ readonly box (他の input と同じ高さ・padding・border-radius) */
body.page-id-57 .zb-member-type-readonly {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: clamp(6px, 0.9vh, 11px) 12px !important;
background: rgba(0, 99, 48, 0.06) !important;
border: 1px solid rgba(0, 99, 48, 0.25) !important;
border-radius: 6px !important;
color: #006330 !important;
font-weight: 500 !important;
font-size: clamp(11.5px, 0.9vw, 14px) !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
width: 100% !important;
}
body.page-id-57 .zb-member-type-check {
color: #006330 !important;
font-weight: 600 !important;
}
/* password hint は label の右に隣接 (右寄せでなく左寄せ inline) */
body.page-id-57 .um-field-label:has(.zb-password-hint) {
justify-content: flex-start !important;
}
body.page-id-57 .zb-password-hint::before {
content: " — ";
color: var(--text-muted);
}
/* パスワード表示 toggle */
body.page-id-16 .zb-pw-wrap,
body.page-id-57 .zb-pw-wrap {
position: relative;
width: 100%;
}
body.page-id-16 .zb-pw-wrap input,
body.page-id-57 .zb-pw-wrap input {
padding-right: 60px !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.page-id-16 .zb-pw-toggle,
body.page-id-57 .zb-pw-toggle {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: none !important;
color: var(--text-muted) !important;
font-size: clamp(10.5px, 0.75vw, 12px) !important;
cursor: pointer !important;
padding: 4px 8px !important;
margin: 0 !important;
height: auto !important;
line-height: 1 !important;
width: auto !important;
min-width: 0 !important;
}
body.page-id-16 .zb-pw-toggle:hover,
body.page-id-57 .zb-pw-toggle:hover {
color: var(--brand-deep) !important;
}
/* パスワード再設定 完了画面の強調 banner */
body.page-id-29 .zb-success-banner {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 32px;
background: rgba(0, 99, 48, 0.06);
border-left: 4px solid #006330;
border-radius: 8px;
}
body.page-id-29 .zb-success-icon {
width: 56px; height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #006330;
color: #fff;
border-radius: 50%;
font-size: 28px;
font-weight: 700;
line-height: 1;
margin: 0 0 4px;
}
body.page-id-29 .zb-success-banner .zb-split-h1 {
margin: 0 !important;
color: #006330 !important;
}
body.page-id-29 .zb-success-banner .zb-split-lede {
margin: 0 !important;
}
body.page-id-29 .zb-success-cta {
display: inline-block !important;
width: auto !important;
padding: 10px 28px !important;
margin-top: 8px !important;
text-decoration: none !important;
font-size: clamp(12.5px, 0.95vw, 14.5px) !important;
}
/* eye icon toggle のスタイル微調整 (page 29 も対象) */
body.page-id-29 .zb-pw-wrap { position: relative; width: 100%; }
body.page-id-29 .zb-pw-wrap input { padding-right: 44px !important; width: 100% !important; box-sizing: border-box !important; }
body.page-id-29 .zb-pw-toggle {
position: absolute !important; right: 8px !important; top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important; border: none !important;
color: var(--text-muted) !important; cursor: pointer !important;
padding: 4px !important; margin: 0 !important; height: auto !important; line-height: 0 !important;
width: auto !important; min-width: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
}
body.page-id-29 .zb-pw-toggle:hover { color: var(--brand-deep) !important; }
body.page-id-16 .zb-pw-toggle,
body.page-id-57 .zb-pw-toggle,
body.page-id-29 .zb-pw-toggle {
padding: 4px !important;
line-height: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
body.page-id-16 .zb-pw-wrap input,
body.page-id-57 .zb-pw-wrap input {
padding-right: 44px !important;
}
body.page-id-16 .zb-pw-toggle svg,
body.page-id-57 .zb-pw-toggle svg,
body.page-id-29 .zb-pw-toggle svg {
display: block !important;
}
/* 「販売パートナー ✓」 改行抑止 */
body.page-id-57 .zb-member-type-readonly {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.page-id-57 .zb-member-type-check {
flex-shrink: 0 !important;
margin-left: 8px !important;
}
/* 会員タイプ readonly box: 入力欄と同じ padding/高さに統一 */
body.page-id-57 .zb-member-type-readonly {
padding: clamp(6px, 0.9vh, 11px) 12px !important;
font-size: clamp(11.5px, 0.9vw, 14px) !important;
line-height: 1.4 !important;
justify-content: flex-start !important;
}
/* 会員タイプ readonly box を入力欄(.um-form-field)と完全同寸法に */
body.page-id-57 .zb-member-type-readonly {
/* input と完全に同じ寸法 */
padding: clamp(6px, 0.9vh, 11px) 12px !important;
font-size: clamp(11.5px, 0.9vw, 14px) !important;
line-height: 1.4 !important;
height: auto !important;
min-height: 0 !important;
border-width: 1px !important;
border-style: solid !important;
border-radius: 6px !important;
background: rgba(0, 99, 48, 0.06) !important;
border-color: rgba(0, 99, 48, 0.25) !important;
color: #006330 !important;
font-weight: 500 !important;
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
display: block !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* QA 送信完了 banner */
.zb-faq-sent {
padding: 24px 28px;
background: rgba(0,99,48,0.06);
border-left: 4px solid #006330;
border-radius: 6px;
margin-top: 16px;
}
.zb-faq-sent h3 {
color: #006330;
margin: 0 0 8px;
font-size: 16px;
font-weight: 600;
}
.zb-faq-sent p { margin: 0; color: var(--text-body); line-height: 1.7; }