/* 本番の head のスタイルを**同じ順序**で連結したもの（事例・ウェビナー・資料の個別・区間 1）。 * 生成: scripts/fetch-wp-assets.mjs — 手で編集しない。 * 順序がカスケードを決めるため、並べ替え・分割をしないこと。 * ★別種別の bundle と混ぜないこと（読み込む子テーマCSSが違う）。 */ /* ===== css/lp/theme.css ===== */ /* [読み込み] 英語ラベル用のセリフ体（Playfair Display）。@import は先頭に置く必要がある。 */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap"); /* ===================================================================== AI検索パートナーズ — ブランドテーマ（カラートークンのみ） 共通DS: techsuite-ds.css ／ 差分はこの配色だけ。 ベース: ロゴのマゼンタ→バイオレット グラデーション（実測 色相≈333°→283°） ===================================================================== */ :root { --font-en-serif: "Playfair Display", "Noto Serif JP", "Hiragino Mincho ProN", serif; --accent:#6b5090; /* 主役バイオレット（見出しem・リンク・アイコン） */ --accent-2:#57406f; /* 小さい文字・バッジ用の濃色 */ --accent-soft:#ece7f1; /* 淡いラベンダー面 */ --accent-glow:rgba(107, 80, 144, .18); --teal:#6b5090; /* グラデ開始＝マゼンタ */ --teal-2:#6b5090; --dark: #1c1240; /* ダークセクション＝深いインディゴ（ロゴ終端） */ --dark-2: #271a55; --accent-on-dark:#c9bcd6; /* ダーク上のラベンダー */ --shadow-cta:0 12px 26px rgba(107, 80, 144, .32); --glow-hero-1:rgba(107, 80, 144, .16); /* ヒーロー装飾：マゼンタ */ --glow-hero-2:rgba(107, 80, 144, .10); /* 同：バイオレット */ --glow-section:rgba(107, 80, 144, .16); /* クロージング等の装飾グロー */ } /* ===== css/lp/header.css ===== */ /* ===================================================================== TechSuite 共通ヘッダー（.hd）単体スタイル 目的: WordPress通常ページ（記事/QA/ブログ等）にも LP と同じ .hd ヘッダーを 載せるための「ヘッダーだけ」の自己完結CSS。 本文に影響しないよう全て .hd 配下にスコープ（body.nav-open のバーガー除く）。 色は各サイトの theme.css（:root の --accent/--teal/--accent-glow/--shadow-cta）を利用。 3種のボタン構成（①LP=アンカー ②contact/meeting=ロゴ+CTAのみ ③その他=全ナビ）は マークアップ側（hd_links の中身）で切替。CTAは全種共通で入れる。 ===================================================================== */ .hd { /* ヘッダー用の構造トークン（.hd スコープ＝本文の :root を汚さない） */ --border: #e3eaf0; --maxw: 1200px; --pill: 999px; --fg: #0e2a43; --fg-muted: #52697a; /* DS にしか無いトークンをここでも定義する。WPページは DS を読まないので、 これが無いと var() が無効になり、メガメニューの「＋」や丸い矢印の枠線（＝丸）が消える（2026-10-11） */ --border-strong: #c8d5df; --fg-body: #3f5566; --fg-dim: #7a8b98; --font-en: "Inter", system-ui, sans-serif; /* LP（body.ui-flat）と同じフラットなヘッダーにするためのトークン。 --hd-fg はナビの文字色（LPは page.css が #242422 を入れている。ここでは本文色を使う） */ --hd-fg: var(--fg); --bg-soft: #f3f8fb; --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; --ease: cubic-bezier(.4, 0, .2, 1); position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); font-family: var(--font-jp); } .hd *, .hd *::before, .hd *::after { box-sizing: border-box; } .hd a { text-decoration: none; } .hd_inner { width: min(var(--maxw), 94%); margin-inline: auto; height: 70px; display: flex; align-items: center; gap: 34px; } .hd_logo { flex: none; } .hd_logo img { height: 30px; width: auto; display: block; } .hd_nav { flex: 1; display: flex; align-items: center; gap: 30px; } .hd_links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; } /* ナビ/テキストリンクの色は LP（body.ui-flat）と同じ「本文色・ホバーはダーク」にする。 アクセント色（紫）にしないのは、LPでフラットなトーンに統一しているため（2026-10-11） */ .hd_links a { position: relative; padding-block: 6px; font-size: 14px; font-weight: 700; color: var(--hd-fg, var(--fg-muted)); transition: color .15s; } .hd_links a:hover, .hd_actions .txt:hover { color: var(--dark); } .hd_actions { display: flex; align-items: center; gap: 16px; margin-left: auto; } .hd_actions .txt { font-size: 13.5px; font-weight: 700; color: var(--fg); } /* 今いるセクションのリンクはダーク＋下線（マークアップが aria-current を付けたときだけ効く） */ .hd_links a[aria-current="true"] { color: var(--dark); } .hd_links a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; } /* 電話CV（サイト別・任意。markupがある時だけ表示） */ .hd_tel { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.12; text-decoration: none; } .hd_tel__copy { font-size: 10px; font-weight: 700; color: var(--accent); } .hd_tel__num { font-family: var(--font-en); font-size: 16px; font-weight: 800; color: var(--fg); letter-spacing: .01em; } .hd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; border-radius: var(--pill); font-family: var(--font-jp); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .hd .btn--cv { color: #fff; background: linear-gradient(135deg, var(--teal) 0%, var(--accent) 62%); box-shadow: var(--shadow-cta); } .hd .btn--cv:hover { transform: translateY(-2px); box-shadow: 0 16px 32px var(--accent-glow); } .hd .btn--cv::after { content: "→"; font-weight: 700; line-height: 1; transition: transform .18s var(--ease); } .hd .btn--cv:hover::after { transform: translateX(3px); } /* ヘッダー右上に細いCVを複数並べる型（ai-searchのみ使用。.btn--cv=塗り / .btn--ghost=線 を .btn--slim で細く） */ .hd_actions--slim { gap: 8px; } .hd .btn--slim { padding: 5px 14px; font-size: 12.5px; line-height: 1.4; letter-spacing: 0; border-radius: 4px; box-shadow: none; white-space: nowrap; gap: 0; } .hd .btn--slim.btn--cv { background: var(--accent); border-color: var(--accent); } .hd .btn--slim.btn--cv::after { content: none; } .hd .btn--slim.btn--cv:hover { transform: none; box-shadow: none; background: var(--accent-2, var(--accent)); border-color: var(--accent-2, var(--accent)); } .hd .btn--slim.btn--ghost { background: #fff; color: var(--accent); border-color: var(--accent); } .hd .btn--slim.btn--ghost:hover { background: var(--accent-soft, #f4f0f8); } @media (max-width: 1320px) { .hd_inner:has(.hd_actions--slim) { gap: 18px; } .hd_inner:has(.hd_actions--slim) .hd_nav { gap: 16px; } .hd_inner:has(.hd_actions--slim) .hd_links { gap: 14px; } .hd_inner:has(.hd_actions--slim) .hd_links a { font-size: 13px; } .hd .btn--slim { padding: 5px 10px; } .hd_actions--slim { gap: 6px; } } @media (min-width: 641px) and (max-width: 1100px) { .hd_actions--slim .btn--ghost { display: none; } } .hd_burger { display: none; width: 30px; height: 22px; position: relative; background: none; border: 0; cursor: pointer; } .hd_burger span { position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--fg); border-radius: 2px; transition: .25s; } .hd_burger span:nth-child(1) { top: 1px; } .hd_burger span:nth-child(2) { top: 10px; } .hd_burger span:nth-child(3) { top: 19px; } body.nav-open .hd_burger span:nth-child(1) { top: 10px; transform: rotate(45deg); } body.nav-open .hd_burger span:nth-child(2) { opacity: 0; } body.nav-open .hd_burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); } @media (max-width: 640px) { .hd_nav { display: none; } .hd_burger { display: block; margin-left: auto; } .hd_nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 22px; position: absolute; top: 70px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 26px 28px 32px; /* 画面より高くなるので、ドロワー自身をスクロールさせる（下が見切れて到達できないのを防ぐ）。 ヘッダーが sticky なので、はみ出した分はページスクロールでは見えない。 */ max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(32px + env(safe-area-inset-bottom)); } .hd_nav.open .hd_links { flex-direction: column; gap: 18px; } .hd_nav.open .hd_actions { flex-direction: column; align-items: stretch; margin-left: 0; } .hd_nav.open .hd_tel { align-items: center; margin-bottom: 4px; } .hd_nav.open .btn { width: 100%; } /* contact/meeting（hd_nav無し＝ハンバーガー無し）もCTAボタンを表示する（他ページと統一）。 ロゴ＋CTAのみで収まるよう、テキストリンク・電話番号はモバイルで畳む （フルナビ機種でもモバイル既定は非表示＝ハンバーガー展開時のみ表示、と同じ考え方）。 */ .hd_inner > .hd_actions { gap: 10px; } .hd_inner > .hd_actions .txt, .hd_inner > .hd_actions .hd_tel { display: none; } .hd_inner > .hd_actions .btn { padding: 9px 14px; font-size: 12.5px; } .hd_inner > .hd_actions--slim .btn--ghost { display: none; } .hd_inner > .hd_actions--slim .btn--slim { padding: 6px 12px; } .hd_nav.open .hd_actions--slim .btn--ghost { display: inline-flex; } } /* ---------- 中くらいの幅（641〜1100px）: LP（body.ui-flat）と同じくナビのリンクを畳んでバーガーにする。 リンクを隠す帯（〜1100px）とバーガーが出る帯（〜640px）が食い違っていると、その帯だけ ナビに到達できず、ホバーでメガメニューが開いてしまう（2026-10-11 に LP 側で修正済みの内容を WP にも適用） ---------- */ @media (min-width: 641px) and (max-width: 1100px) { .hd_links { display: none; } .hd_actions { margin-left: auto; } .hd_burger { display: block; margin-left: auto; } .hd_nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 22px; position: absolute; top: 70px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 26px 28px 32px; /* 画面より高くなるので、ドロワー自身をスクロールさせる（下が見切れて到達できないのを防ぐ） */ max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(32px + env(safe-area-inset-bottom)); } .hd_nav.open .hd_links { display: flex; flex-direction: column; gap: 18px; } .hd_nav.open .hd_actions { flex-direction: column; align-items: stretch; margin-left: 0; } } /* ---------- ヘッダー全幅版（.hd--wide）: ロゴを左端・CTAを右端に寄せ、左右の余白をなくす（本文幅の制限を外す）。 LP/front と同じ体裁。techsuite-ds.css と同一仕様 ---------- */ .hd--wide .hd_inner { width: 100%; max-width: none; padding-inline: clamp(20px, 3vw, 48px); box-sizing: border-box; } .hd--wide { border-bottom: 0; } /* ---- ヘッダーナビ折り返し防止（WP非frontで各ラベル/電話/ボタンが2行化する不具合の修正） ---- */ .hd_nav { flex-wrap: nowrap; min-width: 0; } .hd_links { flex-wrap: nowrap; justify-content: flex-start; } .hd_links li { flex: 0 0 auto; list-style: none; } .hd_links a { white-space: nowrap; } .hd_tel { flex: 0 0 auto; } .hd_tel__num, .hd_tel__copy { white-space: nowrap; } .hd_actions { flex: 0 0 auto; } .hd_actions .txt { white-space: nowrap; } .hd .btn { white-space: nowrap; } /* ---- ヘッダーナビのホバードロップダウン（項目をまとめて折り返しを防ぐ場合に使用。LP/frontの techsuite-ds.css と同一仕様） ---- */ .hd_links li.hd_dropdown { position: relative; } .hd_links li.hd_dropdown > a { display: inline-flex; align-items: center; gap: 4px; } .hd_links li.hd_dropdown > a::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; } /* トリガーとメニューの間の余白は見た目だけの隙間で、その部分にカーソルを置くとホバーが外れてメニューが閉じてしまう。 実際にホバー判定される透明ブリッジを敷いて、隙間を移動中もドロップダウンが開いたままになるようにする。 */ .hd_links li.hd_dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; } .hd_dropdown_menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 30px rgba(14, 42, 67, .14); padding: 8px; min-width: 120px; list-style: none; margin: 8px 0 0; z-index: 60; } .hd_links li.hd_dropdown:hover > .hd_dropdown_menu, .hd_links li.hd_dropdown:focus-within > .hd_dropdown_menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .hd_dropdown_menu li { white-space: nowrap; } .hd_dropdown_menu a { display: block; padding: 6px 10px; font-size: 13.5px; font-weight: 700; color: var(--fg-muted); white-space: nowrap; } .hd_dropdown_menu a:hover { color: var(--dark); background: var(--bg-soft); } /* LP（.ui-flat）と同じホバー */ @media (max-width: 640px) { .hd_links li.hd_dropdown { position: static; } .hd_links li.hd_dropdown::after { content: none; } .hd_dropdown_menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; padding: 8px 0 0 14px; margin: 6px 0 0; } } /* ---- ヘッダーナビのメガメニュー（baigie.me のサービスメニューを参考。header.css / techsuite-ds.css と同一仕様） ---- ・「サービス」「お役立ち情報」のように項目をまとめる場合に使う。列組み（.hd_mega_cols）で中見出し＋リンクを並べる ・トリガーの丸い「＋」は、ホバー/フォーカスで縦棒が回って「−」になる ・リンクは .hd_mega_ic（丸い矢印）付き。ホバーで反転する */ /* 項目の文字を上下中央に揃える（素のリンクは行ボックスで上に寄り、ドロップダウンとずれるため）。 メガメニューを持つヘッダー＝ai-search だけに効かせる（他サービスの見た目を変えない）。 */ /* PC幅だけ。モバイル（ハンバーガー展開）は li をブロックのままにして、 メガメニューのパネルがトリガーの下に積まれるようにする。 */ @media (min-width: 641px) { .hd:has(.hd_mega) .hd_links > li { display: flex; align-items: center; } .hd:has(.hd_mega) .hd_links > li > a { display: inline-flex; align-items: center; } /* バーガーを開いたときは縦積みに戻す（横並びのままだとパネルがトリガーの横に付く） */ .hd:has(.hd_mega) .hd_nav.open .hd_links > li { display: block; } } /* パネルはトリガーの真下に開く（li を基準にし、左端をトリガーに揃える）。 left:50% の中央寄せだと、左寄りのトリガーでパネルが画面外へはみ出すため。 li をヘッダーの高さ（.hd_links を100%）まで伸ばし、top:100% がヘッダー下端に来るようにする。 */ .hd:has(.hd_mega) .hd_nav { align-self: stretch; } .hd:has(.hd_mega) .hd_links { height: 100%; align-items: stretch; } .hd:has(.hd_mega) .hd_links > li.hd_mega { position: relative; } /* display:inline-block が必須。素の はインラインなので width/height が効かず、 モバイル（ハンバーガー内＝ が flex でない）で円が潰れて滲んでいた。 寸法は 17px（border-box）＝中身15px。バーを 7×1 の整数座標に置くと、回転後も 輪郭が整数に乗って滲まない（50%＋translate だと 0.5px ずれて滲む）。 */ .hd_mega_i { display: inline-block; vertical-align: middle; position: relative; flex: none; width: 17px; height: 17px; margin-left: 7px; border: 1px solid var(--border-strong); border-radius: 50%; } .hd_mega_i::before, .hd_mega_i::after { content: ""; position: absolute; top: 7px; left: 4px; width: 7px; height: 1px; background: currentColor; transition: transform .3s cubic-bezier(.215, .61, .355, 1); } .hd_mega_i::after { transform: rotate(90deg); } .hd_links li.hd_mega:hover .hd_mega_i::after, .hd_links li.hd_mega:focus-within .hd_mega_i::after { transform: rotate(0); } .hd_mega_panel { position: absolute; top: calc(100% - 4px); left: 0; z-index: 110; width: max-content; max-width: min(1080px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px rgba(14, 42, 67, .14); opacity: 0; visibility: hidden; pointer-events: none; transition: visibility .2s, opacity .2s; } /* トリガーとパネルの隙間を渡るときに閉じないよう、透明のブリッジを敷く（.hd_dropdown と同じ考え方） */ .hd_mega_panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .hd_links li.hd_mega:hover > .hd_mega_panel, .hd_links li.hd_mega:focus-within > .hd_mega_panel { opacity: 1; visibility: visible; pointer-events: auto; } .hd_mega_in { padding: 34px 38px 38px; } .hd_mega_cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 34px; } .hd_mega_head { margin: 0; font-family: var(--font-jp); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--fg); } .hd_mega_sub { display: block; margin-top: 6px; font-family: var(--font-en-serif, var(--font-en)); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); } .hd_mega_list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .hd_mega_list a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--fg-body); white-space: nowrap; } .hd_mega_list a:hover { color: var(--accent); } .hd_mega_ic { position: relative; flex: none; width: 17px; height: 17px; border: 1px solid var(--border-strong); border-radius: 50%; transition: border-color .15s, background-color .15s, color .15s; } .hd_mega_ic::before { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .hd_mega_list a:hover .hd_mega_ic { border-color: var(--accent); background: var(--accent); color: #fff; } /* 1100px以下（ui-flat のナビが隠れる帯）はパネルを画面幅に合わせ、列を縦に積む */ @media (max-width: 1100px) { .hd_mega_panel { left: 0; transform: none; width: 100%; max-width: none; } .hd_mega_cols { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 22px; } .hd_mega_in { padding: 24px 22px 28px; } } /* ハンバーガー内のメガメニューはアコーディオン（タップで開閉）。 以前は「常時開いて見せる」だったため、ドロワーが長くなり中見出しも重複していた。 ホバーでは開かない（タッチで意図せず開くため）。開閉は JS が付ける li.on だけで決める。 ui-flat のページは 641〜1100px でもバーガーになるので、その帯も含める。 */ @media (max-width: 1100px) { .hd_nav.open .hd_mega_panel { position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; width: auto; max-width: none; margin: 0; } .hd_nav.open li.hd_mega.on > .hd_mega_panel { display: block; } .hd_nav.open .hd_mega_in { padding: 12px 0 2px 14px; } /* 中見出しの1列目はトリガーと同じ文言なので出さない（2列目以降は小見出しとして残す） */ .hd_nav.open .hd_mega_col:first-child .hd_mega_head { display: none; } .hd_nav.open .hd_mega_cols { gap: 18px; } .hd_nav.open .hd_mega_list { margin-top: 0; gap: 14px; } .hd_nav.open .hd_mega_list a { white-space: normal; } /* 開閉アイコン: 閉=＋ / 開=−（ホバー・フォーカスでは動かさない） */ .hd_nav.open li.hd_mega.on .hd_mega_i::after, .hd_nav.open li.hd_mega.on:hover .hd_mega_i::after, .hd_nav.open li.hd_mega.on:focus-within .hd_mega_i::after { transform: rotate(0); } .hd_nav.open li.hd_mega:not(.on):hover .hd_mega_i::after, .hd_nav.open li.hd_mega:not(.on):focus-within .hd_mega_i::after { transform: rotate(90deg); } } /* ---- ヘッダーのCVボタンを LP系（body.ui-flat）と同じ平坦な見た目に揃える（2026-10-11） ---- 値は techsuite-ds.css の .ui-flat .btn と同一。techsuite-ds.css を読まない WP/CV ページでも LP と同じボタンになるように、ここにも持たせる。 --btn-bg は各サービスの theme/page CSS が定義。未定義のサービスでは、そのサービスの --accent （theme.css / theme-vars.css）に落とす。以前は ai-search の #6b5090 固定だったため、 bakuyasu・media-partners などのヘッダーCTAが ai-search の紫になっていた（2026-10-11 修正）。 */ .hd .btn--cv { background: var(--btn-bg, var(--accent, var(--dark))); border-color: var(--btn-bg, var(--accent, var(--dark))); color: #fff; box-shadow: none; border-radius: 4px; font-weight: 500; } .hd .btn--cv:hover { background: #fff; color: var(--btn-bg, var(--accent, var(--dark))); transform: none; box-shadow: none; } .hd .btn--cv::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .hd .btn--cv:hover::after { transform: translateX(3px) rotate(45deg); } .hd .btn--ghost { background: #fff; border-color: var(--border-strong); color: var(--fg); box-shadow: none; border-radius: 4px; } .hd .btn--ghost:hover { background: var(--fg); border-color: var(--fg); color: #fff; transform: none; box-shadow: none; } /* ===== css/lp/footer.css ===== */ /* ===================================================================== TechSuite 共通フッター（.cta3 3分割CTA ＋ .rel 製品導線 ＋ .ft サイトフッター）単体CSS 目的: WordPress通常ページにも LP と同じフッターを載せる（旧 site-footer/lp-chrome.css は廃止）。 本文に影響しないよう .cta3 / .rel / .ft 配下にスコープ。DS全体(techsuite-ds.css)は載せない。 ブランド色は各サイト theme.css（:root の --dark/--accent/--accent-2/--accent-on-dark）を利用。 トークンは必ず .cta3 / .rel / .ft の3つに配る。WPページには DS も theme-vars.css も無いため、 ここが抜けると var() が未定義になり、そのセクションだけ SWELL の body フォント・全幅に落ちる （2026-10-11: .cta3 がトークンを持たず、フッターより139px広く・書体も違っていた）。 ===================================================================== */ .cta3, .rel, .ft { --on-dark: #e8f0f6; --on-dark-dim: #9fb4c4; --fg: #0e2a43; --fg-muted: #52697a; --fg-dim: #7a8b98; --border: #e3eaf0; --r-sm: 14px; --maxw: 1200px; --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; --font-en: "Inter", system-ui, sans-serif; --ease: cubic-bezier(.4, 0, .2, 1); } /* 書体の既定。書体を宣言していない要素（フッターの会社名・住所・リンク・コピーライト等）が WPの body（SWELLのZen Kaku Gothic New）に落ちないよう、配下の既定をここで決める（2026-10-11） */ .cta3 { font-family: var(--font-jp); } .rel, .ft { font-family: var(--font-jp); } .cta3 *, .rel *, .ft *, .cta3 *::before, .rel *::before, .ft *::before { box-sizing: border-box; } .cta3 a, .rel a, .ft a { text-decoration: none; } .rel .wrap { width: min(var(--maxw), 89%); margin-inline: auto; } .rel { background: #fff; padding: clamp(60px, 7vw, 92px) 0; border-top: 1px solid var(--border); } .rel_logo { text-align: center; } /* ロゴは中央。テンプレートのインラインstyleから移した（2026-10-11） */ .rel_logo img { height: 24px; width: auto; margin: 0 auto 14px; opacity: .7; display: block; } .rel h2 { text-align: center; font-family: var(--font-jp); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); color: var(--fg); margin: 0; } .rel .div { text-align: center; font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin: 36px 0 16px; } .rel_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rel_card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 22px 24px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; } .rel_card:hover { border-color: var(--accent); } /* 浮き上がらせない（DS の ui-flat と同じ流儀） */ .rel_card .d { font-size: 12.5px; color: var(--fg-muted); line-height: 1.7; margin: 0 0 8px; } .rel_card .n { font-family: var(--font-jp); font-weight: 700; font-size: 16px; color: var(--fg); } .ft { background: var(--dark); color: var(--on-dark-dim); padding: 56px 0 84px; } .ft_inner { width: min(var(--maxw), 89%); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 32px 64px; justify-content: space-between; } .ft_info dt img { height: 30px; filter: brightness(0) invert(1); margin-bottom: 16px; } .ft_info dt.co { font-weight: 800; color: #fff; font-size: 15px; } .ft_info dd { margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; max-width: 340px; } .ft_col h5 { margin: 0 0 12px; font-family: var(--font-en); font-size: 11.5px; letter-spacing: .12em; color: var(--on-dark); font-weight: 600; } .ft_col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ft_col a { font-size: 13px; color: var(--on-dark-dim); transition: color .15s; } .ft_col a:hover { color: var(--accent-on-dark); } .ft_copy { width: min(var(--maxw), 89%); margin: 40px auto 0; font-size: 12px; color: var(--fg-dim); } @media (max-width: 640px) { .rel_grid { grid-template-columns: 1fr; } } /* ===================================================================== フッター上の3分割CTA（.cta3）= 資料請求 / お問い合わせ / メールマガジン WP全ページのフッター（footer-block.php）で .rel（製品・サービス）の上に置く。 メールマガジンは記事下のウィジェットと同じ HubSpot フォーム（新規作成しない）。 色は DS のトーンに合わせ、白の半透明だけで組む（v1 の青灰 --on-dark-dim は使わない）。 ===================================================================== */ .cta3 { background: var(--dark); color: #fff; padding: clamp(48px, 6vw, 76px) 0; } .cta3_in { width: min(var(--maxw), 89%); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .cta3_col { min-width: 0; display: flex; flex-direction: column; padding: 0 clamp(20px, 2.6vw, 40px); } .cta3_col:first-child { padding-left: 0; } .cta3_col:last-child { padding-right: 0; } .cta3_col + .cta3_col { border-left: 1px solid rgba(255, 255, 255, .28); } .cta3_h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--font-jp); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: #fff; } .cta3_h svg { flex: none; width: 26px; height: 26px; } .cta3_d { margin: 0 0 24px; font-family: var(--font-jp); font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .72); } /* 大きめの枠線ボタン（右端に丸い矢印）。寸法は padding で取り、アイコンは整数座標で描く（滲ませない） */ .cta3_btn { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 18px 26px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-family: var(--font-jp); font-size: 16px; font-weight: 700; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .cta3_btn i { position: relative; flex: none; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; } .cta3_btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); transition: transform .2s var(--ease); } .cta3_btn:hover { background: #fff; border-color: #fff; color: var(--dark); } .cta3_btn:hover i::after { transform: translate(calc(-50% + 2px), -50%) rotate(45deg); /* ホバーで右へ2px（端数を作らない） */ } /* メールマガジンのフォーム（HubSpot）: 記事下のウィジェットと同じもの。 ※ HubSpot のフォームはクロスオリジンの iframe で描画されるため、中の要素は装飾できない （CVページのフォームも同じ）。見た目は HubSpot 側のフォームエディタで設定する。 */ .cta3_col--news .cta3_d { margin-bottom: 16px; } .cta3_form iframe, .cta3_form .hs-form-frame { width: 100%; max-width: 100%; border: 0; } @media (max-width: 900px) { .cta3_in { grid-template-columns: 1fr; } .cta3_col { padding: 0; } .cta3_col + .cta3_col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); margin-top: 32px; padding-top: 32px; } .cta3_btn { margin-top: 4px; } } /* ===== css/base/luminous.css ===== */ /*! * Luminous v2.3.4 * Copyright 2015-2021, Zebrafish Labs * Licensed under BSD-2 (https://github.com/imgix/luminous/blob/main/LICENSE.md) */@-webkit-keyframes lum-fade{0%{opacity:0}to{opacity:1}}@keyframes lum-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes lum-fadeZoom{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes lum-fadeZoom{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes lum-loader-rotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0)}50%{-webkit-transform:translate(-50%,-50%) rotate(-180deg);transform:translate(-50%,-50%) rotate(-180deg)}to{-webkit-transform:translate(-50%,-50%) rotate(-1turn);transform:translate(-50%,-50%) rotate(-1turn)}}@keyframes lum-loader-rotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0)}50%{-webkit-transform:translate(-50%,-50%) rotate(-180deg);transform:translate(-50%,-50%) rotate(-180deg)}to{-webkit-transform:translate(-50%,-50%) rotate(-1turn);transform:translate(-50%,-50%) rotate(-1turn)}}@-webkit-keyframes lum-loader-before{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.2) translateX(6px);transform:scale(1.2) translateX(6px)}25%{-webkit-transform:scale(1.3) translateX(8px);transform:scale(1.3) translateX(8px)}40%{-webkit-transform:scale(1.2) translateX(6px);transform:scale(1.2) translateX(6px)}50%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(.8) translateX(6px);transform:scale(.8) translateX(6px)}75%{-webkit-transform:scale(.7) translateX(8px);transform:scale(.7) translateX(8px)}90%{-webkit-transform:scale(.8) translateX(6px);transform:scale(.8) translateX(6px)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes lum-loader-before{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.2) translateX(6px);transform:scale(1.2) translateX(6px)}25%{-webkit-transform:scale(1.3) translateX(8px);transform:scale(1.3) translateX(8px)}40%{-webkit-transform:scale(1.2) translateX(6px);transform:scale(1.2) translateX(6px)}50%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(.8) translateX(6px);transform:scale(.8) translateX(6px)}75%{-webkit-transform:scale(.7) translateX(8px);transform:scale(.7) translateX(8px)}90%{-webkit-transform:scale(.8) translateX(6px);transform:scale(.8) translateX(6px)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes lum-loader-after{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.2) translateX(-6px);transform:scale(1.2) translateX(-6px)}25%{-webkit-transform:scale(1.3) translateX(-8px);transform:scale(1.3) translateX(-8px)}40%{-webkit-transform:scale(1.2) translateX(-6px);transform:scale(1.2) translateX(-6px)}50%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(.8) translateX(-6px);transform:scale(.8) translateX(-6px)}75%{-webkit-transform:scale(.7) translateX(-8px);transform:scale(.7) translateX(-8px)}90%{-webkit-transform:scale(.8) translateX(-6px);transform:scale(.8) translateX(-6px)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes lum-loader-after{0%{-webkit-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.2) translateX(-6px);transform:scale(1.2) translateX(-6px)}25%{-webkit-transform:scale(1.3) translateX(-8px);transform:scale(1.3) translateX(-8px)}40%{-webkit-transform:scale(1.2) translateX(-6px);transform:scale(1.2) translateX(-6px)}50%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(.8) translateX(-6px);transform:scale(.8) translateX(-6px)}75%{-webkit-transform:scale(.7) translateX(-8px);transform:scale(.7) translateX(-8px)}90%{-webkit-transform:scale(.8) translateX(-6px);transform:scale(.8) translateX(-6px)}to{-webkit-transform:scale(1);transform:scale(1)}}.lum-lightbox{background:rgba(0,0,0,.6)}.lum-lightbox-inner{bottom:2.5%;left:2.5%;right:2.5%;top:2.5%}.lum-lightbox-inner img{position:relative}.lum-lightbox-inner .lum-lightbox-caption{color:#fff;margin:0 auto;max-width:700px;text-align:center}.lum-loading .lum-lightbox-loader{-webkit-animation:lum-loader-rotate 1.8s linear infinite;animation:lum-loader-rotate 1.8s linear infinite;display:block;height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:66px}.lum-lightbox-loader:after,.lum-lightbox-loader:before{background:hsla(0,0%,100%,.9);border-radius:20px;content:"";display:block;height:20px;margin-top:-10px;position:absolute;top:50%;width:20px}.lum-lightbox-loader:before{-webkit-animation:lum-loader-before 1.8s linear infinite;animation:lum-loader-before 1.8s linear infinite;left:0}.lum-lightbox-loader:after{-webkit-animation:lum-loader-after 1.8s linear infinite;animation:lum-loader-after 1.8s linear infinite;-webkit-animation-delay:-.9s;animation-delay:-.9s;right:0}.lum-lightbox.lum-opening{-webkit-animation:lum-fade .18s ease-out;animation:lum-fade .18s ease-out}.lum-lightbox.lum-opening .lum-lightbox-inner{-webkit-animation:lum-fadeZoom .18s ease-out;animation:lum-fadeZoom .18s ease-out}.lum-lightbox.lum-closing{-webkit-animation:lum-fade .3s ease-in;animation:lum-fade .3s ease-in;animation-direction:reverse}.lum-lightbox.lum-closing .lum-lightbox-inner{-webkit-animation:lum-fadeZoom .3s ease-in;animation:lum-fadeZoom .3s ease-in;animation-direction:reverse}.lum-img{transition:opacity .12s ease-out}.lum-loading .lum-img{opacity:0}.lum-gallery-button{background:transparent;border:0;cursor:pointer;height:100px;margin:0;max-height:100%;outline:0;overflow:hidden;padding:0;position:absolute;text-indent:150%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;width:60px}.lum-close-button{height:32px;opacity:.3;position:absolute;right:5px;top:5px;width:32px}.lum-close-button:hover{opacity:1}.lum-close-button:after,.lum-close-button:before{background-color:#fff;content:" ";height:33px;left:15px;position:absolute;width:2px}.lum-close-button:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.lum-close-button:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.lum-previous-button{left:12px}.lum-next-button{right:12px}.lum-gallery-button:after{border-top:4px solid hsla(0,0%,100%,.8);content:"";display:block;height:36px;position:absolute;top:50%;width:36px}.lum-previous-button:after{border-left:4px solid hsla(0,0%,100%,.8);border-radius:3px 0 0 0;box-shadow:-2px 0 rgba(0,0,0,.2);left:12%;-webkit-transform:translateY(-50%) rotate(-45deg);transform:translateY(-50%) rotate(-45deg)}.lum-next-button:after{border-radius:0 3px 0 0;border-right:4px solid hsla(0,0%,100%,.8);box-shadow:2px 0 rgba(0,0,0,.2);right:12%;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}/*! * SWELL */.lum-lightbox{z-index:999}@media(max-width:460px){.lum-lightbox-image-wrapper{-webkit-overflow-scrolling:touch;display:flex;overflow:auto}.lum-lightbox-caption{bottom:0;position:absolute;width:100%}.lum-lightbox-position-helper{margin:auto}.lum-lightbox-inner img{max-height:none;max-height:88vh;max-width:none;max-width:150vw}.lum-gallery-button:after{height:6vw;width:6vw}} /* ===== css/app/resource.css ===== */ /* ========================================================= 導入事例（case）／お役立ち資料（useful）／ウェビナー（seminar） archive-case.php・taxonomy-case-category.php・single-case.php archive-useful.php・taxonomy-useful_category.php・single-useful.php archive-seminar.php・taxonomy-seminar-category.php・single-seminar.php の共通CSS。3タイプとも同一の resource-card / resource-single__* 型に一本化 （サムネ＋カテゴリ＋タイトル＋抜粋＋CTA）。会社名・従業員数等のACFメタは扱わない。 配色/フォント等のトークン(--accent 等)は blog-hub.css / theme-vars.css を継承。 .l-single-case / .l-single-useful / .l-single-seminar には .blog-hub を付けないため、 qa-single.css と同様にここで自前定義する。 2026-07-03 新設（既定値＝ai-search）／2026-07-10 case を統合 ========================================================= */ /* サイドバーを消して1カラム（レイアウト・blog-hub非依存） */ .l-archive-case aside#sidebar, .l-single-case aside#sidebar, .l-archive-useful aside#sidebar, .l-single-useful aside#sidebar, .l-archive-seminar aside#sidebar, .l-single-seminar aside#sidebar { display: none; } .-sidebar-on .l-archive-case.l-mainContent, .l-archive-case.l-mainContent, .-sidebar-on .l-single-case.l-mainContent, .l-single-case.l-mainContent, .-sidebar-on .l-archive-useful.l-mainContent, .l-archive-useful.l-mainContent, .-sidebar-on .l-single-useful.l-mainContent, .l-single-useful.l-mainContent, .-sidebar-on .l-archive-seminar.l-mainContent, .l-archive-seminar.l-mainContent, .-sidebar-on .l-single-seminar.l-mainContent, .l-single-seminar.l-mainContent { width: 100%; } /* ---------- アーカイブ／カテゴリー：カード内メタ ---------- */ .blog-hub .resource-cards { grid-template-columns: repeat(3, 1fr); } .blog-hub .resource-card__cat { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 9px; border-radius: var(--radius-pill); margin: 0 0 8px; } .blog-hub .resource-card__excerpt { margin: 4px 0 0; font-size: 13px; line-height: 1.75; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-hub .resource-card__cta { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--accent); } /* ---------- 個別ページ ---------- */ .l-single-case, .l-single-useful, .l-single-seminar { --accent:#6b5090; --accent-2:#57406f; --accent-soft:#ece7f1; --fg: #0e2a43; --fg-muted: #52697a; --fg-dim: #7a8b98; --border: #e3eaf0; --radius-pill: 999px; } .resource-single__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .resource-single__cat { display: inline-block; padding: 4px 12px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; text-decoration: none; } .resource-single__cat:hover { background: var(--accent); color: #fff; } .resource-single__title { font-size: clamp(1.3em, 3vw, 1.7em); font-weight: 700; line-height: 1.55; margin: 0 0 24px; padding-bottom: 22px; border-bottom: 2px solid var(--border); } .resource-single__thumb { margin: 0 0 32px; border-radius: 14px; overflow: hidden; } .resource-single__thumb img { width: 100%; height: auto; display: block; } /* 業種タグクラウド（アイキャッチ直下・非階層タクソノミー） */ .resource-single__industries { margin: 0 0 32px; } .resource-single__industries-label { display: block; font-size: 12px; font-weight: 700; color: var(--fg-dim); letter-spacing: .04em; margin: 0 0 8px; } .resource-single__industries-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .resource-single__industry { display: inline-block; padding: 4px 14px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; text-decoration: none; } .resource-single__industry:hover { background: var(--accent); color: #fff; } .resource-single__body > :first-child { margin-top: 0; } .resource-single__back { margin-top: 40px; } @media screen and (max-width: 768px) { .blog-hub .resource-cards { grid-template-columns: 1fr; } } /* ===== css/app/theme-vars.css ===== */ /* [読み込み] LP/front と同じフォント（Noto Sans JP + Inter）。@import は先頭に置く必要があるためここに置く。 */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&family=Playfair+Display:wght@500;600;700&display=swap"); /* フォントは LP/front に合わせる。SWELL が本文にインラインで出している設定（游ゴシック・weight500）を 上書きする。SWELL の :root 定義より詳細度を上げて（html:root）、読み込み順に依存せず効かせる。 */ html:root{ --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; --font-en: "Inter", system-ui, sans-serif; --font-en-serif: "Playfair Display", "Noto Serif JP", "Hiragino Mincho ProN", serif; --swl-font_family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; --swl-font_weight: 400; } /* SWELL 子テーマの style.css が body に "Zen Kaku Gothic New" を当てているため、 LP/front と同じ Noto Sans JP に上書きする（body だけでは負けるので html:root で詳細度を上げる）。 */ html:root body { font-family: var(--font-jp); font-weight: 400; } /* ai-search — WP トークン（blog / Q&A 共通・色とフォントだけ差分） shared/css（blog-hub / qa-archive / qa-single）の後に読み込む。構造CSSは書かない。 ai-search＝バイオレット（/blog の既存トーンを踏襲）。 */ .blog-hub, .l-archive-qa, .l-single-qa, .l-archive-case, .l-single-case, .l-archive-useful, .l-single-useful, .l-archive-seminar, .l-single-seminar{ --accent:#6b5090; --accent-2:#57406f; --accent-soft:#ece7f1; --accent-shadow:rgba(107,80,144,.18); --cv-orange:#6b5090; --cv-orange-hi:#57406f; } /* ===== css/page-single-resource/12.css ===== */ @media (max-width: 768px) { .newsletter-section .newsletter-header { font-size: 18px !important; padding: 8px !important; } .newsletter-section .newsletter-content { flex-direction: column !important; padding: 12px !important; gap: 15px !important; } .newsletter-section .content-left, .newsletter-section .content-right { width: 100% !important; padding: 0 !important; } } @media (max-width: 480px) { .newsletter-section .newsletter-header { font-size: 16px !important; padding: 6px !important; } }