/* スタッフソリューション:読み幅・ヘッダー・下層ページ・フッター * 正本: このファイル(プラグイン enqueue) * 下層ページHTMLには style を埋め込まない * 同期元: _下層ページ原稿/プロフィール.html の style(移設時) */ /* スタッフソリューション:読み幅+トップ入口+ヘッダー */ :root { --ss-navy: #0d2257; --ss-navy-deep: #08163a; --ss-accent: #f7d240; --ss-em-blue: #0046e8; --ss-text: #1a202c; --ss-muted: #4a5568; --ss-line: #d7e3f0; --ss-bg-soft: #eaf3fb; --ss-bg-header: #eaf3fb; --ss-content-width: 720px; --global-content-width: 720px !important; --global-content-narrow-width: 680px !important; --global-content-wide-width: 920px !important; --global-calc-content-width: calc(720px - var(--global-content-edge-padding) - var(--global-content-edge-padding)) !important; } body { --wp--style--global--content-size: var(--global-calc-content-width); } /* ヘッダー:薄い水色・横幅に余白・固定(stickyなし) */ #masthead, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap), #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner, .site-main-header-wrap .site-header-row-container-inner, .site-top-header-wrap .site-header-row-container-inner, .site-bottom-header-wrap .site-header-row-container-inner { background: var(--ss-bg-header) !important; } #masthead .kadence-sticky-header, #masthead .kadence-sticky-header.item-is-fixed, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; transform: none !important; box-shadow: none !important; } .site-header .site-container, .site-main-header-wrap .site-container, .site-header-row-container-inner > .site-container { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; width: 100%; box-sizing: border-box; } /* ロゴ左=本文左、メニュー右=ヒーロー画像右に揃える */ .site-main-header-inner-wrap.site-header-row { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; width: 100%; box-sizing: border-box; } .site-header-main-section-left { justify-content: flex-start !important; padding-left: 0 !important; } .site-header-main-section-right { justify-content: flex-end !important; margin-left: auto !important; padding-right: 0 !important; } .site-branding { padding-left: 0 !important; margin-left: 0 !important; } .site-branding a.brand { display: inline-flex; align-items: center; } .site-branding a.brand img { max-width: 168px; width: auto; height: auto; margin-left: 0 !important; } /* メニューを読みやすく・はっきり */ .main-navigation .primary-menu-container > ul > li.menu-item > a { color: var(--ss-navy) !important; font-weight: 650; font-size: 0.95rem; letter-spacing: 0.03em; padding: 0.7em 0.95em !important; border-radius: 2px; } .main-navigation .primary-menu-container > ul > li.menu-item > a:hover { color: #1e4f8c !important; background: rgba(13, 34, 87, 0.06); } .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a, .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a { color: var(--ss-navy) !important; box-shadow: inset 0 -2px 0 var(--ss-accent); } .header-navigation .header-menu-container ul ul.sub-menu, .header-navigation .header-menu-container ul ul.submenu { background: var(--ss-navy) !important; border-radius: 6px; overflow: hidden; } .header-navigation .header-menu-container ul ul li.menu-item > a { color: #fff !important; font-size: 0.88rem !important; font-weight: 600; } .header-navigation .header-menu-container ul ul li.menu-item > a:hover { background: #163a7a !important; color: var(--ss-accent) !important; } .content-container.site-container, .entry-hero-layout-contained, .comments-area { max-width: 920px; } .entry-content.single-content, .entry-content { max-width: var(--ss-content-width); margin-left: auto; margin-right: auto; font-size: 1.15rem; line-height: 1.85; color: var(--ss-text); padding-bottom: 2.75rem; } .entry-content p, .entry-content li { line-height: 1.85; } /* ページ左右の背景は白で統一 */ .content-bg, body.content-style-unboxed .site, .entry.content-bg, .wp-site-blocks, body, #inner-wrap, .content-area, .site-content, .content-container { background: #fff !important; } /* トップ/下層:テーマの空タイトル帯を消し、ヘッダーと本文を分離 */ .home .entry-hero, .home .entry-header, .home .post-thumbnail, .home .entry-taxonomies, .page .entry-hero, .page .entry-header:not(.ss-keep-header), .single-page .entry-hero { display: none !important; } .page .content-area, .home .content-area { margin-top: 0 !important; } .page .entry-content-wrap { padding-top: 1.75rem !important; background: #fff; } /* wpautopでstyle/linkがpに包まれたときのパンくず押し下げを防ぐ */ .entry-content > p:has(> style), .entry-content > p:has(> link), .entry-content > p:has(style), .entry-content > p:has(link) { margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 0 !important; font-size: 0 !important; } .home .entry-content-wrap { padding: 0 !important; background: transparent !important; } .home .entry.content-bg, .home .content-bg { background: transparent !important; box-shadow: none !important; } /* 下層固定ページ:Kadenceの記事カード影を消す */ .entry.single-entry, .entry.content-bg.single-entry, .page .entry.single-entry, .page .entry.content-bg, .page .content-bg.single-entry, article.entry.single-entry { box-shadow: none !important; -webkit-box-shadow: none !important; } .home .entry-content.single-content, .home .entry-content { max-width: none; margin: 0; padding: 0; font-size: inherit; line-height: inherit; } /* ヘッダーは余白付きのまま、本文エリアだけ全幅 */ .home .content-area .content-wrap, .home .content-area .site-container.content-container { max-width: none; padding-left: 0; padding-right: 0; } .ss-home { color: var(--ss-text); } .ss-home .wp-block-group { margin-top: 0; margin-bottom: 0; } .ss-home .wp-block-buttons { gap: 0.8rem; } .ss-home .wp-block-button .wp-block-button__link, .ss-home a.ss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.35rem; border-radius: 4px; font-weight: 700; font-size: 0.98rem; text-decoration: none !important; line-height: 1.3; } .ss-home .ss-btn-primary .wp-block-button__link, .ss-home .wp-block-button.ss-btn-primary .wp-block-button__link { background: var(--ss-accent) !important; color: var(--ss-navy-deep) !important; border: 0 !important; box-shadow: none !important; } /* Kadenceのボタンホバー影を完全に消す */ .ss-home .wp-block-button .wp-block-button__link, .ss-home .wp-block-button .wp-block-button__link:hover, .ss-home .wp-block-button .wp-block-button__link:focus, .ss-home .wp-block-button .wp-block-button__link:active, .ss-home .wp-element-button, .ss-home .wp-element-button:hover, .ss-home .wp-element-button:focus, .ss-home .wp-element-button:active, .ss-home a.ss-btn, .ss-home a.ss-btn:hover, .ss-home a.ss-btn:focus, .ss-home a.ss-btn:active, .home .ss-home .wp-block-button__link:hover, .home .ss-home .wp-element-button:hover { box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; filter: none !important; } .ss-home .ss-btn-blue .wp-block-button__link, .ss-home .wp-block-button.ss-btn-blue .wp-block-button__link, .ss-home a.ss-btn-blue { background: var(--ss-navy) !important; color: #fff !important; border: 0 !important; } .ss-home .ss-btn-secondary .wp-block-button__link, .ss-home .wp-block-button.ss-btn-secondary .wp-block-button__link { background: transparent !important; color: var(--ss-navy) !important; border: 1px solid var(--ss-navy) !important; } .ss-hero .ss-btn-secondary .wp-block-button__link, .ss-hero .wp-block-button.ss-btn-secondary .wp-block-button__link { color: #fff !important; border-color: rgba(255, 255, 255, 0.55) !important; } /* トップのh2は下層の紺帯見出しを打ち消し、独自デザインで固定 */ .home .ss-home .ss-section h2, .home .ss-home .ss-final h2, .home .ss-section h2, .home .ss-final h2 { margin: 0 0 0.75rem !important; padding: 0 !important; background: transparent !important; color: var(--ss-navy) !important; border: 0 !important; border-radius: 0 !important; font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important; line-height: 1.4 !important; font-weight: 700 !important; } /* トップのh1:白文字を強制(テーマ上書き対策) */ .home .ss-home .ss-hero h1, .home .ss-hero h1, .ss-hero h1.wp-block-heading { color: #fff !important; background: transparent !important; padding: 0 !important; border: 0 !important; font-weight: 700; letter-spacing: 0; } .ss-home * { box-sizing: border-box; } .ss-home a { text-decoration: none; } .ss-inner { width: min(1080px, calc(100% - 2.5rem)); margin: 0 auto; } .ss-inner-narrow { width: min(720px, calc(100% - 2.5rem)); margin: 0 auto; } .ss-hero { background: radial-gradient(ellipse at 80% 20%, rgba(247, 210, 64, 0.18), transparent 45%), linear-gradient(145deg, var(--ss-navy-deep) 0%, var(--ss-navy) 55%, #163a7a 100%); color: #fff; padding: 4.5rem 0 4rem; } /* グリッドは WP の __inner-container 側へ(外側は1子だけになるため) */ .ss-hero-grid { display: block; } .ss-hero-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: 0.82fr 1.38fr; gap: 1.75rem; align-items: center; } .ss-prehead { display: inline-block; font-size: clamp(1.15rem, 2.1vw, 1.35rem); letter-spacing: 0.03em; color: #fff; margin: 0 0 1rem; font-weight: 700; line-height: 1.55; } .ss-hero h1 { margin: 0 0 1.1rem; font-size: clamp(1.7rem, 3.2vw, 2.55rem); line-height: 1.35; font-weight: 700; color: #fff !important; } .ss-hero-lead { margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.85; color: rgba(255, 255, 255, 0.88); max-width: 34em; } .ss-cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; } .ss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.35rem; border-radius: 4px; font-weight: 700; font-size: 0.98rem; text-decoration: none !important; transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease; } .ss-btn:hover, .ss-btn:focus { text-decoration: underline !important; opacity: 0.95; } .ss-home .ss-btn:hover, .ss-home .ss-btn:focus, .ss-home .wp-block-button.ss-btn:hover, .ss-home .wp-block-button.ss-btn:focus { transform: none !important; } .ss-btn:visited { text-decoration: none !important; } .ss-btn-stack { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: stretch; margin: 0 0 1.05rem; padding-top: 1.05rem; } .ss-btn-stack .ss-btn { margin: 0; } .ss-btn-primary { background: var(--ss-accent); color: var(--ss-navy-deep) !important; } .ss-btn-blue { background: var(--ss-navy); color: #fff !important; } .ss-btn-secondary { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.55); } .ss-page .ss-btn-secondary { color: var(--ss-navy) !important; border: 1px solid var(--ss-line) !important; } .ss-hero-visual { margin: 0; width: 100%; transform: scale(1.08); transform-origin: center right; } .ss-hero-visual img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } .ss-section { padding: 3.5rem 0; } .ss-section-soft { background: var(--ss-bg-soft); } .ss-section h2 { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.4; color: var(--ss-navy); } .ss-section-lead { margin: 0 0 1.75rem; color: var(--ss-muted); line-height: 1.85; max-width: none; white-space: normal; } .ss-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } .ss-pain { padding: 1.6rem 1.4rem; background: #fff; border: 1px solid #c9dbef; box-shadow: 0 8px 18px rgba(13, 34, 87, 0.06); } .ss-pain h3 { margin: 0 0 0.7rem; font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--ss-navy); line-height: 1.4; font-weight: 800; } .ss-pain p { margin: 0; color: var(--ss-muted); line-height: 1.75; font-size: 1rem; } .ss-solution-grid { display: block; max-width: 1080px; margin: 0 auto; } .ss-solution-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; align-items: center; } .ss-solution-grid > .wp-block-group__inner-container > .wp-block-group:first-child, .ss-solution-grid > .wp-block-group:first-child { order: 1; } .ss-solution-visual, .ss-solution-grid .ss-solution-visual, .ss-solution-grid > .wp-block-group__inner-container > figure, .ss-solution-grid > figure { order: 2; margin: 0; } .ss-solution-grid img, .ss-solution-visual img { width: 100%; height: auto; border-radius: 0; background: transparent; } .ss-points { margin: 1.25rem 0 0; padding: 0; list-style: none; text-align: left; margin-left: 0; } .ss-points li { position: relative; padding: 0.55rem 0 0.55rem 1.1rem; margin-left: 0; line-height: 1.7; border-bottom: 1px solid var(--ss-line); text-align: left; } .ss-points li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ss-accent); } .ss-trust-wrap { max-width: 720px; margin: 0 auto; } .ss-trust { display: grid; grid-template-columns: 140px 1fr; gap: 1.35rem; align-items: center; padding: 1.35rem 1.4rem; background: #fff; border: 1px solid var(--ss-line); border-left: 5px solid var(--ss-navy); } .ss-trust img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; } .ss-trust h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--ss-navy); } .ss-trust p { margin: 0; color: var(--ss-muted); line-height: 1.8; } .ss-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .ss-article { display: block; color: inherit !important; background: #fff; border: 1px solid var(--ss-line); overflow: hidden; transition: border-color 0.15s ease; } .ss-article:hover { border-color: var(--ss-navy); } .ss-article img { display: block; width: 100%; height: auto; } .ss-article-body { padding: 0.85rem 1.35rem 1.05rem; } .ss-article-body strong { display: block; font-size: 0.95rem; line-height: 1.5; color: var(--ss-navy); font-weight: 700; } /* 最終CTA:白背景・紺文字・青ベタボタン */ .ss-final { text-align: center; background: #fff; color: var(--ss-navy); padding: 2.75rem 0; border-top: 1px solid var(--ss-line); } .ss-final h2 { color: var(--ss-navy) !important; background: transparent !important; margin: 0 auto 0.7rem; text-align: center; } .ss-final .ss-inner, .ss-final .wp-block-group.ss-inner { text-align: center; } .ss-final p { margin: 0 auto 1.35rem; max-width: 34em; line-height: 1.85; color: var(--ss-muted); text-align: center !important; } .ss-final .ss-cta-row, .ss-final .wp-block-buttons { justify-content: center; } .ss-final .ss-btn-secondary { color: #fff !important; border: 0 !important; background: var(--ss-navy) !important; } /* フッター:Kadence標準を隠し、会社情報フッターへ */ #colophon.site-footer .site-footer-bottom-wrap, #colophon.site-footer .footer-html, #colophon.site-footer .site-info-inner { display: none !important; } #colophon.site-footer { background: transparent !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #colophon.site-footer .site-footer-row-container-inner, #colophon .site-footer-wrap { background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } #colophon .widget, #colophon .widget_custom_html, #colophon .widget-title { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #colophon .widget-title { display: none !important; } .ss-site-footer { background: #0d2257; color: rgba(255, 255, 255, 0.88); font-size: 0.82rem; line-height: 1.55; padding: 1.15rem 0 0; margin: 0; } .ss-footer-inner { width: min(1080px, calc(100% - 2.2rem)); margin: 0 auto; display: flex; flex-direction: column; gap: 0; align-items: flex-start; } .ss-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem 1.25rem; width: 100%; flex-wrap: wrap; } .ss-footer-brand-top { display: flex; align-items: center; gap: 0.65rem 1rem; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .ss-footer-name { margin: 0; color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.35; white-space: nowrap; } .ss-footer-name-link { color: #fff !important; text-decoration: none; } .ss-footer-name-link:hover { color: #f7d240 !important; } .ss-footer-catch { margin: 0; color: #f7d240; font-size: 0.8rem; font-weight: 600; line-height: 1.35; white-space: nowrap; } .ss-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding-top: 0; flex: 0 0 auto; margin-left: auto; } .ss-footer-nav a { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none; font-size: 0.78rem; font-weight: 600; white-space: nowrap; padding: 0 0.65rem; } .ss-footer-nav a:first-child { padding-left: 0; } .ss-footer-nav a:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.35); } .ss-footer-nav a:hover { color: #f7d240 !important; text-decoration: underline; } .ss-footer-copy { margin-top: 0.85rem; padding: 0.45rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; } .ss-footer-copy small { font-size: inherit; } /* ========== 下層ページ共通 ========== */ .ss-page { max-width: 820px; margin: 0 auto; color: var(--ss-text); } .ss-page * { box-sizing: border-box; } /* カバー画像を最初にドンと */ .ss-cover { margin: 0.7rem 0; border-radius: 10px; overflow: hidden; background: var(--ss-bg-soft); } .ss-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .ss-cover-portrait { max-width: none; margin-left: 0; margin-right: 0; } .ss-cover-portrait img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center right; border-radius: 10px; } .ss-page-hero { display: block; padding: 0; margin: 0 0 1.75rem; background: transparent; border: 0; } .ss-page-hero img { display: none; } .ss-page-kicker { margin: 0 0 0.45rem; color: #2b6cb0; font-weight: 700; font-size: 0.84rem; letter-spacing: 0.06em; } .ss-breadcrumb { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.6; color: #7b8794; } .ss-breadcrumb a { color: #7b8794; text-decoration: none; font-weight: 500; } .ss-breadcrumb a:hover { text-decoration: underline; } .ss-breadcrumb .ss-bc-sep { margin: 0 0.45rem; color: #9aa5b1; } .ss-page-lead { margin: 0 0 1rem; color: var(--ss-muted); line-height: 1.85; font-size: 1.05rem; } .ss-chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.85rem 0 0; } .ss-chip { display: inline-block; padding: 0.28rem 0.7rem; background: var(--ss-bg-soft); border: 1px solid var(--ss-line); color: var(--ss-navy); font-size: 0.82rem; font-weight: 700; } /* 見出し階層の統一(下層 .ss-page のみ。トップ .ss-home には当てない) */ .ss-page h1 { margin: 0 0 0.7rem; color: var(--ss-navy); font-size: clamp(1.7rem, 3.3vw, 2.25rem); line-height: 1.35; font-weight: 800; letter-spacing: 0.01em; } .ss-page h2 { margin: 2.6rem 0 1.2rem; padding: 1.05rem 1.25rem 1.05rem 1.45rem; background: var(--ss-navy); color: #fff !important; border: 0; border-left: 0; border-bottom: 0; border-radius: 10px; font-size: clamp(1.2rem, 2.3vw, 1.45rem); line-height: 1.45; font-weight: 800; } .ss-page h2 .ss-h2-em, .entry-content h2 .ss-h2-em, .ss-page h2 span.ss-h2-em { color: #f7d240 !important; font-weight: 800 !important; } .ss-page h1 .ss-h3-em, .ss-page h3 .ss-h3-em { color: var(--ss-em-blue); font-weight: 800; } .ss-page-end { margin-bottom: 0 !important; padding-bottom: 0.25rem; } .ss-page h3 { margin: 2.25rem 0 1.15rem; padding: calc(0.35rem + 5px) 0 0.7rem 0.95rem; border-left: 6px solid var(--ss-navy); border-bottom: 1px solid var(--ss-line); color: var(--ss-navy); font-size: clamp(1.22rem, 2.2vw, 1.4rem); line-height: 1.45; font-weight: 800; } .ss-page ul, .ss-page ol, .entry-content ul, .entry-content ol { margin: 1.05rem 0; padding-left: 1.35rem; color: var(--ss-text); line-height: 1.85; font-size: inherit; } .ss-page li, .entry-content li { margin: 0 0 0.4rem; line-height: 1.85; font-size: inherit; color: var(--ss-text); } .ss-page li:last-child, .entry-content li:last-child { margin-bottom: 0; } /* 直前段落の下余白とリスト上余白の二重加算を防ぐ */ .ss-page p + ul, .ss-page p + ol, .entry-content p + ul, .entry-content p + ol { margin-top: 0; } .ss-page p, .entry-content > p, .entry-content p { margin: 0 0 1.05rem; line-height: 1.85; } .ss-page-lead { margin: 0 0 1.25rem; color: var(--ss-muted); line-height: 1.85; font-size: 1.18rem; } .ss-service-card h3 { margin: 0 0 0.45rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ss-navy) !important; font-size: 1rem !important; line-height: 1.45 !important; font-weight: 800 !important; } .ss-service-card p { margin: 0 !important; line-height: 1.75 !important; font-size: 0.95rem !important; } .ss-page .entry-content img, .ss-page img.aligncenter, .entry-content img.aligncenter { display: block; width: 100%; max-width: 100%; height: auto; margin: 0.7rem auto 1.05rem; border-radius: 8px; } .ss-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 1rem 0 1.4rem; } .ss-card { background: #fff; border: 1px solid var(--ss-line); border-left: 4px solid var(--ss-navy); padding: 1rem 1.05rem; } .ss-card strong { display: block; color: var(--ss-navy); margin-bottom: 0.35rem; } .ss-card p { margin: 0; color: var(--ss-muted); font-size: 0.95rem; line-height: 1.7; } .ss-page > h1 { margin: 0 0 0.55rem; } .ss-cover.ss-cover-portrait { margin: calc(0.45rem + 10px) 0 calc(1.15rem + 5px); } .ss-profile-head { margin: 0 0 1.15rem; text-align: left; } .ss-profile-id { display: block; margin: 0 0 0.95rem; padding: 0; } .ss-profile-id .ss-profile-company, .ss-profile-id .ss-profile-kicker, .ss-profile-id .ss-profile-name-row { display: block; margin: 0; padding: 0; color: var(--ss-text); line-height: 1.35; } .ss-profile-id .ss-profile-company { margin-top: 30px; margin-bottom: calc(1.35rem + 20px - 50px + 5px); font-size: 1.05rem; font-weight: 600; } .ss-profile-id .ss-profile-kicker { margin-top: 12px; margin-bottom: calc(0.85rem - 12px); font-size: 0.98rem; font-weight: 400; } .ss-profile-id .ss-profile-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 0.85rem; margin-bottom: 0; } .ss-profile-name { font-size: clamp(1.55rem, 3.4vw, 1.95rem); letter-spacing: 0.03em; font-weight: 800; color: var(--ss-text); } .ss-profile-yomi { font-size: 0.95rem; font-weight: 400; letter-spacing: 0.04em; color: var(--ss-text); } .ss-page ul.ss-profile-titles, .entry-content ul.ss-profile-titles, ul.ss-profile-titles { list-style: disc !important; margin: 0 !important; padding-left: 1.2rem !important; padding-inline-start: 1.2rem !important; color: var(--ss-text); position: relative; left: 4px; } .ss-page ul.ss-profile-titles li, .entry-content ul.ss-profile-titles li, ul.ss-profile-titles li { margin: 0 0 0.12rem !important; line-height: 1.5; padding-left: 0 !important; } .ss-inline-img { margin: 0.7rem 0 1.05rem; text-align: center; } .ss-inline-img img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; border-radius: 8px; } .ss-inline-img.ss-inline-img-sm { margin: 0.7rem auto 1.15rem; max-width: 280px; } .ss-inline-img.ss-inline-img-sm img { width: 100%; max-width: 280px; margin: 0 auto; } .ss-inline-img figcaption { margin: 0.45rem 0 0; color: var(--ss-text); font-size: 0.95rem; line-height: 1.5; text-align: center; } /* 経歴・会社情報など下層の表は同一デザイン(プロフィールの経歴表が正) */ .ss-career-table, .ss-info-table { width: 100%; border-collapse: collapse; margin: 0.35rem 0 1.1rem; background: #fff; } .ss-career-table th, .ss-career-table td, .ss-info-table th, .ss-info-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--ss-line); text-align: left; vertical-align: top; line-height: 1.7; font-size: 1.05rem; } .ss-career-table th, .ss-info-table th { width: 5.5rem; color: var(--ss-navy); font-weight: 700; background: var(--ss-bg-soft); white-space: nowrap; } .ss-info-table th { /* 会社名/代表取締役など、年号より長い項目名向け */ width: 7rem; } .ss-career-table td, .ss-info-table td { color: var(--ss-text); } .ss-career-table ul, .ss-info-table ul { margin: 0; padding-left: 1.2rem; } .ss-quote { margin: 0 !important; margin-bottom: 1.05rem !important; padding: 0.95rem 1.15rem; background: #fff8d9; border: 0; border-left: 0; border-radius: 8px; color: var(--ss-text); font-weight: 600; font-size: 1.15rem; font-style: normal; line-height: 1.85; box-shadow: inset 0 0 0 1px rgba(13, 34, 87, 0.06); } .ss-page p:has(+ blockquote.ss-quote), .entry-content p:has(+ blockquote.ss-quote) { margin-bottom: 1.05rem !important; } .ss-quote + p { margin-top: 0 !important; } .ss-quote strong { font-style: normal; font-weight: 700; color: var(--ss-navy); } blockquote.ss-quote { quotes: none; margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; } .ss-map { margin: 0.5rem 0 0; border: 1px solid var(--ss-line); overflow: hidden; } .ss-map iframe { display: block; width: 100%; height: 360px; border: 0; } .ss-contact-stack { display: flex; flex-direction: column; gap: 1.35rem; } .ss-contact-grid { display: flex; flex-direction: column; gap: 1.35rem; } .ss-contact-side { background: var(--ss-bg-soft); color: var(--ss-text); border-left: 5px solid var(--ss-navy); padding: 1.25rem 1.2rem; } .ss-contact-side h2 { margin-top: 0 !important; margin-bottom: 0.75rem !important; border: 0 !important; border-bottom: 0 !important; padding: 0 !important; background: transparent !important; color: var(--ss-navy) !important; font-size: 1.28rem !important; line-height: 1.4; } .ss-contact-side p { margin: 0 0 0.55rem; font-size: 1.08rem; line-height: 1.75; color: var(--ss-text); } .ss-contact-side a { color: var(--ss-navy) !important; text-decoration: underline; } .ss-contact-note { margin-top: 1rem !important; color: var(--ss-muted) !important; font-size: 1rem !important; line-height: 1.7; } .ss-contact-form { background: #fff; border: 1px solid var(--ss-line); padding: 1.25rem 1.2rem 1.4rem; } .ss-contact-form h2 { margin-top: 0; font-size: 1.1rem; } /* Contact Form 7:ラベル上の空きを広め、ラベル→入力は詰める */ .ss-page .ss-contact-form .wpcf7 form p, .ss-contact-form .wpcf7 form p { margin-top: 0 !important; margin-bottom: 0.28rem !important; line-height: 1.7; } .ss-page .ss-contact-form .wpcf7 form > p:first-of-type, .ss-contact-form .wpcf7 form > p:first-of-type { margin-top: 0.1rem !important; } .ss-page .ss-contact-form .wpcf7 form p:has(.wpcf7-form-control-wrap):not(:has(.wpcf7-acceptance)):not(:has(.wpcf7-submit)), .ss-contact-form .wpcf7 form p:has(.wpcf7-form-control-wrap):not(:has(.wpcf7-acceptance)):not(:has(.wpcf7-submit)) { margin-bottom: 0.85rem !important; } .ss-page .ss-contact-form .wpcf7-form-control-wrap, .ss-contact-form .wpcf7-form-control-wrap { display: block; width: 100%; } .ss-page .ss-contact-form .wpcf7 input[type="text"], .ss-page .ss-contact-form .wpcf7 input[type="email"], .ss-page .ss-contact-form .wpcf7 textarea, .ss-page .ss-contact-form .wpcf7 select, .ss-contact-form .wpcf7 input[type="text"], .ss-contact-form .wpcf7 input[type="email"], .ss-contact-form .wpcf7 textarea, .ss-contact-form .wpcf7 select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin-top: 0; } .ss-page .ss-contact-form .wpcf7-list-item, .ss-contact-form .wpcf7-list-item { margin: 0 0.85rem 0 0 !important; } /* 確認チェック:左寄せ+チェックと文字の隙間をなくす */ .ss-page .ss-contact-form .wpcf7-acceptance, .ss-contact-form .wpcf7-acceptance { display: inline-flex !important; align-items: center; margin: 0 !important; } .ss-page .ss-contact-form .wpcf7-acceptance .wpcf7-list-item, .ss-contact-form .wpcf7-acceptance .wpcf7-list-item { margin: 0 !important; padding: 0 !important; } .ss-page .ss-contact-form .wpcf7-acceptance input[type="checkbox"], .ss-contact-form .wpcf7-acceptance input[type="checkbox"] { margin: 0 0.15rem 0 0 !important; vertical-align: middle; } .ss-page .ss-contact-form .wpcf7 form p:has(.wpcf7-acceptance), .ss-contact-form .wpcf7 form p:has(.wpcf7-acceptance) { display: flex !important; align-items: center; justify-content: flex-start; gap: 0.1rem; margin: 0.35rem 0 1rem !important; padding-left: 0 !important; text-indent: 0 !important; } /* 案内2行:段落空けではなく強制改行に見せる */ .ss-page .ss-contact-form .wpcf7 form p:has(+ p:has(+ p:has(.wpcf7-acceptance))), .ss-page .ss-contact-form .wpcf7 form p:has(+ p:has(.wpcf7-acceptance)) { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.75; } .ss-page .ss-contact-form .wpcf7 form p:has(+ p:has(+ p:has(.wpcf7-acceptance))) { margin-top: 0.95rem !important; } .ss-page .ss-contact-form input.wpcf7-submit, .ss-page .ss-contact-form input[type="submit"].wpcf7-submit, .ss-contact-form input.wpcf7-submit, .ss-contact-form input[type="submit"] { background: #f7d240 !important; background-color: #f7d240 !important; color: #08163a !important; border: 0 !important; border-radius: 4px !important; min-height: 48px; padding: 0.75rem 1.6rem !important; font-weight: 700 !important; font-size: 1rem !important; cursor: pointer; box-shadow: none !important; } .ss-page .ss-contact-form input.wpcf7-submit:hover, .ss-contact-form input.wpcf7-submit:hover { opacity: 0.95; } .ss-about-intro { display: block; margin: 0 0 1.5rem; } .ss-about-intro img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 1.25rem; } .ss-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.2rem 0 1.8rem; } .ss-service-card { padding: 1.1rem 1.05rem; background: #fff; border: 1px solid var(--ss-line); border-top: 3px solid var(--ss-navy); } .ss-service-card h3 { margin: 0 0 0.45rem; font-size: 1rem; } .ss-service-card p { margin: 0; color: var(--ss-muted); font-size: 0.92rem; line-height: 1.7; } @media (max-width: 900px) { .ss-hero-grid > .wp-block-group__inner-container, .ss-solution-grid > .wp-block-group__inner-container, .ss-pains, .ss-articles { grid-template-columns: 1fr; } .ss-hero-grid > .wp-block-group__inner-container { gap: 1.5rem; } .ss-trust { grid-template-columns: 1fr; text-align: center; } .ss-trust img { margin: 0 auto; } .ss-hero { padding: 3rem 0 2.5rem; } .ss-cta-row { flex-direction: column; } .ss-btn { width: 100%; } .site-header .site-container, .site-main-header-wrap .site-container, .site-header-row-container-inner > .site-container, .site-main-header-inner-wrap.site-header-row { padding-left: 1.1rem !important; padding-right: 1.1rem !important; } .ss-footer-inner { gap: 0.75rem; } .ss-footer-row { flex-direction: column; align-items: flex-start; gap: 0.65rem; } .ss-footer-brand-top { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .ss-footer-name, .ss-footer-catch { white-space: normal; } .ss-footer-nav { margin-left: 0; } .ss-footer-nav a { padding: 0 0.55rem; } .ss-page-hero, .ss-card-grid, .ss-service-grid, .ss-about-intro { grid-template-columns: 1fr; } .ss-info-table th { width: 7rem; white-space: normal; } } /* スマホのみ:本文を一回り小さく */ @media (max-width: 768px) { .entry-content.single-content, .entry-content { font-size: 1.05rem; } .ss-page p, .entry-content > p, .entry-content p, .ss-page li, .entry-content li, .ss-page ul, .ss-page ol, .entry-content ul, .entry-content ol, .ss-page-lead { font-size: 1.05rem; } .ss-career-table th, .ss-career-table td, .ss-info-table th, .ss-info-table td { font-size: 0.98rem; } .ss-quote { font-size: 1.05rem; } .ss-profile-id .ss-profile-company { font-size: 0.98rem; } .ss-profile-titles { font-size: 0.98rem; } .ss-inline-img.ss-inline-img-sm { max-width: 220px; } .ss-inline-img.ss-inline-img-sm img { max-width: 220px; } /* スマホのみ:フッター社名・キャッチを中央揃え */ .ss-footer-brand-top { align-items: center !important; text-align: center; width: 100%; } .ss-footer-name-link { display: block; width: 100%; text-align: center; } .ss-footer-name, .ss-footer-catch { text-align: center; width: 100%; } .ss-footer-catch { margin-top: -4px; } .ss-footer-row { align-items: center !important; } .ss-footer-nav { width: 100%; margin-left: 0 !important; justify-content: center !important; text-align: center; } .ss-footer-nav a { text-align: center; } /* スマホのみ:ヘッダーロゴを3px左&縦中央 */ .site-main-header-inner-wrap.site-header-row, .site-header-row-container-inner > .site-container, .site-header-main-section-left { display: flex !important; align-items: center !important; } .site-branding { display: flex !important; align-items: center !important; height: 100%; margin-left: -13px !important; padding-left: 0 !important; } .site-branding a.brand { display: inline-flex !important; align-items: center !important; height: 100%; } .site-branding a.brand img { margin-left: 0 !important; display: block; } /* スマホのみ:下ボタン縦並びの空きを約半分(全角スペース由来の空きを除去) */ .ss-page .ss-btn-stack { flex-direction: column; gap: 0.55rem; } .ss-page .ss-btn-stack .ss-btn { width: 100%; } }