@charset "UTF-8"; /* Template: swell Theme Name: SWELL CHILD Theme URI: https://swell-theme.com/ Description: SWELLの子テーマ Version: 1.0.0 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ====================================================== ⚫︎ 〇〇 ====================================================== */ /* ------------------------------------------------------ ◯ 〇〇 ------------------------------------------------------ */ /* ------------------------------------------------------ 〇〇　end ------------------------------------------------------ */ /* ====================================================== 〇〇　end ====================================================== */ /* --------------------------------------------------------------------------------------- */ /* ============================================ サイト全体: 流線型背景デザイン ============================================ */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 120% 60% at 0% 30%, rgba(0, 176, 240, 0.04) 0%, transparent 70%), radial-gradient(ellipse 100% 80% at 100% 70%, rgba(0, 130, 200, 0.035) 0%, transparent 60%), radial-gradient(ellipse 140% 50% at 50% 0%, rgba(0, 176, 240, 0.03) 0%, transparent 50%), radial-gradient(ellipse 80% 100% at 90% 50%, rgba(0, 100, 180, 0.025) 0%, transparent 60%), #fff; background-attachment: fixed; } body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900'%3E%3Cpath d='M0 300 C300 200 600 400 900 280 S1200 180 1440 320' fill='none' stroke='rgba(0,160,230,0.04)' stroke-width='2'/%3E%3Cpath d='M0 500 C200 420 500 580 800 450 S1100 350 1440 480' fill='none' stroke='rgba(0,120,200,0.035)' stroke-width='1.5'/%3E%3Cpath d='M0 700 C350 620 700 750 1000 650 S1300 550 1440 680' fill='none' stroke='rgba(0,140,210,0.03)' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center center; background-size: cover; background-attachment: fixed; opacity: 1; } /* ============================================ 固定ページ・シングルページ: 未来的背景デザイン ※ body にクラスがないため #body_wrap を使用 ============================================ */ /* レイヤー1: グラデーションオーブ＋回路線 */ #body_wrap.page::before, #body_wrap.single::before, #body_wrap.single-post::before { content: ""; background: /* 左上: 大きな光のオーブ */ radial-gradient(circle 600px at 5% 15%, rgba(0, 150, 255, 0.06) 0%, transparent 70%), /* 右下: 光のオーブ */ radial-gradient(circle 500px at 92% 80%, rgba(0, 200, 255, 0.05) 0%, transparent 65%), /* 中央: 広がる光 */ radial-gradient(circle 800px at 50% 50%, rgba(0, 120, 220, 0.025) 0%, transparent 60%), /* 右上: アクセント */ radial-gradient(circle 350px at 85% 10%, rgba(0, 180, 240, 0.045) 0%, transparent 60%), /* 左下: アクセント */ radial-gradient(circle 400px at 10% 85%, rgba(0, 160, 230, 0.04) 0%, transparent 55%), #fff !important; background-attachment: fixed !important; } /* レイヤー2: 幾何学模様（リング・ライン・ドット・グリッド） */ #body_wrap.page::after, #body_wrap.single::after, #body_wrap.single-post::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='2400' viewBox='0 0 1920 2400'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%230096ff' stop-opacity='0.06'/%3E%3Cstop offset='100%25' stop-color='%2300c8ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%230080dd' stop-opacity='0.05'/%3E%3Cstop offset='100%25' stop-color='%2300b0f0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- 大きなリング 左上 --%3E%3Ccircle cx='120' cy='200' r='220' fill='none' stroke='rgba(0,150,255,0.06)' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='200' r='180' fill='none' stroke='rgba(0,150,255,0.04)' stroke-width='1'/%3E%3Ccircle cx='120' cy='200' r='140' fill='none' stroke='rgba(0,150,255,0.025)' stroke-width='0.8'/%3E%3C!-- リング 右 --%3E%3Ccircle cx='1750' cy='500' r='280' fill='none' stroke='rgba(0,180,240,0.05)' stroke-width='1.5'/%3E%3Ccircle cx='1750' cy='500' r='230' fill='none' stroke='rgba(0,180,240,0.035)' stroke-width='1'/%3E%3Ccircle cx='1750' cy='500' r='180' fill='none' stroke='rgba(0,180,240,0.02)' stroke-width='0.8'/%3E%3C!-- リング 中央下 --%3E%3Ccircle cx='900' cy='1600' r='320' fill='none' stroke='rgba(0,140,220,0.045)' stroke-width='1.5'/%3E%3Ccircle cx='900' cy='1600' r='260' fill='none' stroke='rgba(0,140,220,0.03)' stroke-width='1'/%3E%3Ccircle cx='900' cy='1600' r='200' fill='none' stroke='rgba(0,140,220,0.018)' stroke-width='0.8'/%3E%3C!-- 回路風の直線（水平） --%3E%3Cline x1='0' y1='350' x2='400' y2='350' stroke='rgba(0,160,230,0.05)' stroke-width='1'/%3E%3Cline x1='400' y1='350' x2='430' y2='380' stroke='rgba(0,160,230,0.05)' stroke-width='1'/%3E%3Cline x1='430' y1='380' x2='600' y2='380' stroke='rgba(0,160,230,0.05)' stroke-width='1'/%3E%3Ccircle cx='600' cy='380' r='3' fill='rgba(0,160,230,0.08)'/%3E%3C!-- 回路風の直線（右側） --%3E%3Cline x1='1920' y1='800' x2='1500' y2='800' stroke='rgba(0,140,210,0.045)' stroke-width='1'/%3E%3Cline x1='1500' y1='800' x2='1470' y2='830' stroke='rgba(0,140,210,0.045)' stroke-width='1'/%3E%3Cline x1='1470' y1='830' x2='1300' y2='830' stroke='rgba(0,140,210,0.045)' stroke-width='1'/%3E%3Ccircle cx='1300' cy='830' r='3' fill='rgba(0,140,210,0.07)'/%3E%3C!-- 回路風の直線（下部左） --%3E%3Cline x1='0' y1='1200' x2='350' y2='1200' stroke='rgba(0,170,235,0.04)' stroke-width='1'/%3E%3Cline x1='350' y1='1200' x2='380' y2='1170' stroke='rgba(0,170,235,0.04)' stroke-width='1'/%3E%3Cline x1='380' y1='1170' x2='550' y2='1170' stroke='rgba(0,170,235,0.04)' stroke-width='1'/%3E%3Ccircle cx='550' cy='1170' r='3' fill='rgba(0,170,235,0.06)'/%3E%3C!-- 流線カーブ --%3E%3Cpath d='M0 600 C400 500 700 700 1100 550 S1500 400 1920 580' fill='none' stroke='url(%23g1)' stroke-width='1.5'/%3E%3Cpath d='M0 1000 C300 920 600 1080 1000 950 S1400 820 1920 1000' fill='none' stroke='url(%23g2)' stroke-width='1.2'/%3E%3Cpath d='M0 1800 C500 1700 900 1900 1300 1750 S1700 1600 1920 1780' fill='none' stroke='rgba(0,150,230,0.04)' stroke-width='1.2'/%3E%3C!-- ドットグリッド 左エリア --%3E%3Cg fill='rgba(0,160,240,0.045)'%3E%3Ccircle cx='60' cy='500' r='1.5'/%3E%3Ccircle cx='90' cy='500' r='1.5'/%3E%3Ccircle cx='120' cy='500' r='1.5'/%3E%3Ccircle cx='150' cy='500' r='1.5'/%3E%3Ccircle cx='60' cy='530' r='1.5'/%3E%3Ccircle cx='90' cy='530' r='1.5'/%3E%3Ccircle cx='120' cy='530' r='1.5'/%3E%3Ccircle cx='150' cy='530' r='1.5'/%3E%3Ccircle cx='60' cy='560' r='1.5'/%3E%3Ccircle cx='90' cy='560' r='1.5'/%3E%3Ccircle cx='120' cy='560' r='1.5'/%3E%3Ccircle cx='150' cy='560' r='1.5'/%3E%3Ccircle cx='60' cy='590' r='1.5'/%3E%3Ccircle cx='90' cy='590' r='1.5'/%3E%3Ccircle cx='120' cy='590' r='1.5'/%3E%3Ccircle cx='150' cy='590' r='1.5'/%3E%3C/g%3E%3C!-- ドットグリッド 右エリア --%3E%3Cg fill='rgba(0,140,220,0.04)'%3E%3Ccircle cx='1750' cy='1100' r='1.5'/%3E%3Ccircle cx='1780' cy='1100' r='1.5'/%3E%3Ccircle cx='1810' cy='1100' r='1.5'/%3E%3Ccircle cx='1840' cy='1100' r='1.5'/%3E%3Ccircle cx='1870' cy='1100' r='1.5'/%3E%3Ccircle cx='1750' cy='1130' r='1.5'/%3E%3Ccircle cx='1780' cy='1130' r='1.5'/%3E%3Ccircle cx='1810' cy='1130' r='1.5'/%3E%3Ccircle cx='1840' cy='1130' r='1.5'/%3E%3Ccircle cx='1870' cy='1130' r='1.5'/%3E%3Ccircle cx='1750' cy='1160' r='1.5'/%3E%3Ccircle cx='1780' cy='1160' r='1.5'/%3E%3Ccircle cx='1810' cy='1160' r='1.5'/%3E%3Ccircle cx='1840' cy='1160' r='1.5'/%3E%3Ccircle cx='1870' cy='1160' r='1.5'/%3E%3Ccircle cx='1750' cy='1190' r='1.5'/%3E%3Ccircle cx='1780' cy='1190' r='1.5'/%3E%3Ccircle cx='1810' cy='1190' r='1.5'/%3E%3Ccircle cx='1840' cy='1190' r='1.5'/%3E%3Ccircle cx='1870' cy='1190' r='1.5'/%3E%3C/g%3E%3C!-- 六角形（テック感） --%3E%3Cpolygon points='1600,150 1630,132 1660,150 1660,185 1630,203 1600,185' fill='none' stroke='rgba(0,170,240,0.05)' stroke-width='1'/%3E%3Cpolygon points='1640,185 1670,167 1700,185 1700,220 1670,238 1640,220' fill='none' stroke='rgba(0,170,240,0.04)' stroke-width='0.8'/%3E%3Cpolygon points='1560,185 1590,167 1620,185 1620,220 1590,238 1560,220' fill='none' stroke='rgba(0,170,240,0.035)' stroke-width='0.8'/%3E%3C!-- 六角形（左下） --%3E%3Cpolygon points='200,1400 230,1382 260,1400 260,1435 230,1453 200,1435' fill='none' stroke='rgba(0,150,230,0.05)' stroke-width='1'/%3E%3Cpolygon points='240,1435 270,1417 300,1435 300,1470 270,1488 240,1470' fill='none' stroke='rgba(0,150,230,0.04)' stroke-width='0.8'/%3E%3Cpolygon points='160,1435 190,1417 220,1435 220,1470 190,1488 160,1470' fill='none' stroke='rgba(0,150,230,0.035)' stroke-width='0.8'/%3E%3C!-- 縦のダッシュライン --%3E%3Cline x1='300' y1='0' x2='300' y2='100' stroke='rgba(0,160,235,0.04)' stroke-width='0.8' stroke-dasharray='8 12'/%3E%3Cline x1='1650' y1='900' x2='1650' y2='1050' stroke='rgba(0,160,235,0.035)' stroke-width='0.8' stroke-dasharray='8 12'/%3E%3Cline x1='100' y1='1800' x2='100' y2='1950' stroke='rgba(0,160,235,0.03)' stroke-width='0.8' stroke-dasharray='8 12'/%3E%3C!-- 小さなアクセント円（ノード） --%3E%3Ccircle cx='400' cy='350' r='5' fill='none' stroke='rgba(0,180,255,0.07)' stroke-width='1'/%3E%3Ccircle cx='400' cy='350' r='2' fill='rgba(0,180,255,0.1)'/%3E%3Ccircle cx='1500' cy='800' r='5' fill='none' stroke='rgba(0,160,240,0.06)' stroke-width='1'/%3E%3Ccircle cx='1500' cy='800' r='2' fill='rgba(0,160,240,0.08)'/%3E%3Ccircle cx='350' cy='1200' r='5' fill='none' stroke='rgba(0,170,235,0.06)' stroke-width='1'/%3E%3Ccircle cx='350' cy='1200' r='2' fill='rgba(0,170,235,0.08)'/%3E%3C/svg%3E") no-repeat center top !important; background-size: 100% auto !important; background-attachment: fixed !important; opacity: 1 !important; } /* ====================================================== ⚫︎ 共通パーツ ====================================================== */ /* ------------------------------------------------------ ◯ 見出し ------------------------------------------------------ */ .home { h2 { font-size: 1.8rem !important; color: var(--color_main); } } .page:not(.home) { .section-title { color: #fff !important; background: var(--color_main) !important; font-size: 1.8rem !important; padding: 0.5rem 1rem !important; text-align: center !important; } } .single { h1, h2, h3, h4, h5, h6 { color: var(--color_main) !important; text-align: left !important; padding: 0 !important; margin-left: 0 !important; } } /* ------------------------------------------------------ 見出し　end ------------------------------------------------------ /* /* ------------------------------------------------------ ◯ ボタン ------------------------------------------------------ */ /* ------------------------------------------------------ ボタン　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ ボックスメニュー ------------------------------------------------------ */ .swell-block-box-menu.is-style-default .swell-block-box-menu__item { border: none; } /* ------------------------------------------------------ ボックスメニュー　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ フルワイドブロック ------------------------------------------------------ */ .swell-block-fullWide { margin-bottom: 0; } /* ------------------------------------------------------ フルワイドブロック　end ------------------------------------------------------ */ /* ====================================================== 共通パーツ　end ====================================================== */ /* ====================================================== ⚫︎ header ====================================================== */ /* ------------------------------------------------------ ◯ ヘッダーバー（上段：キャッチコピー＋ユーティリティ） ------------------------------------------------------ */ /* ============================================ ヘッダー1行レイアウト ロゴ | キャッチコピー | 検索 | ユーティリティ を横一列に ============================================ */ /* .l-header を横並び1行に */ .l-header { display: flex !important; flex-wrap: wrap; align-items: center; position: relative; max-width: 1280px; margin: 0 auto; padding: 12px 40px !important; border-bottom: 1px solid #D0DEE8; } /* ── ロゴ部分 ── */ .l-header>.l-header__inner { order: 1; flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: none !important; } /* ── キャッチ＋検索＋ユーティリティ ── */ .l-header>.l-header__bar { order: 2; flex: 1 1 0% !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } /* メガメニューパネルは下の行に */ .l-header>[class*="megamenu-"] { order: 3; flex: 0 0 100%; } /* barInner: l-container の幅制約を解除 */ .l-header .l-header__bar .l-header__barInner { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* header-bar__inner: 横並び・右寄せ */ .l-header .l-header__bar .header-bar__inner { display: flex !important; justify-content: flex-end; align-items: center; width: 100%; gap: 24px; padding: 0 !important; margin: 0 !important; } /* キャッチコピー: 2つの

を1行にまとめる */ .l-header .l-header__bar .header-bar__catch { flex-shrink: 0; display: flex; gap: 0.5em; } .l-header .l-header__bar .header-bar__catch p { margin: 0 !important; font-size: 12px; line-height: 1; color: var(--color_main); font-weight: 500; white-space: nowrap; } /* 右側（検索＋リンク） */ .l-header .l-header__bar .header-bar__actions { display: flex; align-items: center; gap: 30px; flex-shrink: 0; } /* ─── Google CSE 検索フォーム（ヘッダー専用） ─── */ /* CSEラッパー幅 */ .l-header__bar #___gcse_0 { width: 280px !important; max-width: 280px !important; } /* コントロール外枠リセット */ .l-header__bar #___gcse_0 .gsc-control-cse { background: transparent !important; border: none !important; padding: 0 !important; } /* form リセット */ .l-header__bar #___gcse_0 form.gsc-search-box { margin: 0 !important; padding: 0 !important; } /* ─ 外側テーブル＝フォーム全体の枠 ─ */ .l-header__bar #___gcse_0 table.gsc-search-box { margin: 0 !important; border: 1px solid var(--color_main) !important; border-spacing: 0 !important; border-collapse: separate !important; height: 38px; width: 100%; } /* 全セル共通リセット */ .l-header__bar #___gcse_0 table.gsc-search-box>tbody>tr>td { padding: 0 !important; border: none !important; vertical-align: middle; height: 36px; } /* ─ 入力エリア ─ */ .l-header__bar #___gcse_0 td.gsc-input { height: 36px; } .l-header__bar #___gcse_0 .gsc-input-box { border: none !important; border-radius: 0 !important; height: 36px !important; padding: 0 !important; margin: 0 !important; background: #fff !important; box-shadow: none !important; } .l-header__bar #___gcse_0 .gsc-input-box table.gsc-input { height: 36px !important; padding: 0 !important; margin: 0 !important; } .l-header__bar #___gcse_0 .gsc-input-box tbody { display: flex !important; height: 36px !important; } .l-header__bar #___gcse_0 .gsc-input-box tbody tr { display: flex !important; width: 100% !important; height: 36px !important; border: none !important; } /* テキスト入力セル */ .l-header__bar #___gcse_0 .gsib_a { display: flex !important; align-items: center !important; flex-grow: 1 !important; height: 36px !important; max-height: none !important; padding: 0 !important; border: none !important; background: #fff !important; } .l-header__bar #___gcse_0 .gsib_a input.gsc-input { width: 100% !important; height: 36px !important; padding: 0 12px !important; margin: 0 !important; border: none !important; outline: none !important; background-image: none !important; background-color: #fff !important; font-size: 14px !important; color: #092F48 !important; box-shadow: none !important; line-height: 36px !important; } /* プレースホルダー色 */ .l-header__bar #___gcse_0 .gsib_a input.gsc-input::placeholder { color: var(--color_main) !important; opacity: 1; } /* クリア（×）ボタン：非表示 */ .l-header__bar #___gcse_0 .gsib_b { display: none !important; } /* ─ 検索ボタン（右端ネイビー＋白虫眼鏡） ─ */ .l-header__bar #___gcse_0 td.gsc-search-button { width: 44px !important; min-width: 44px !important; height: 36px !important; background-color: var(--color_main) !important; } .l-header__bar #___gcse_0 button.gsc-search-button-v2 { width: 44px !important; height: 36px !important; min-width: 44px !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background-color: var(--color_main) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.2s; position: relative !important; overflow: hidden !important; } .l-header__bar #___gcse_0 button.gsc-search-button-v2:hover { background-color: #00406B !important; } /* CSEデフォルトSVGを隠してカスタム虫眼鏡アイコンに差し替え */ .l-header__bar #___gcse_0 button.gsc-search-button-v2 svg { display: none !important; } .l-header__bar #___gcse_0 button.gsc-search-button-v2::after { content: "" !important; display: block !important; width: 20px !important; height: 20px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; } /* 結果クリアボタン：非表示 */ .l-header__bar #___gcse_0 td.gsc-clear-button { display: none !important; } /* 検索結果オーバーレイ */ .l-header__bar #___gcse_0 .gsc-results-wrapper-overlay { z-index: 9999; } /* ユーティリティリンク（GLOBAL・採用情報・ストア） */ .l-header .l-header__bar .util-links { display: flex; align-items: center; gap: 15px; } .l-header .l-header__bar .util-item { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #092F48; font-weight: 500; text-decoration: none; transition: opacity 0.2s ease; } .l-header .l-header__bar .util-item:hover { opacity: 0.7; } .l-header .l-header__bar .util-item svg { fill: var(--color_main); } .l-header .l-header__bar .util-divider { width: 1px; height: 20px; background-color: var(--color_main); } /* SNSアイコンリスト非表示 */ .l-header .l-header__bar .c-iconList { display: none; } /* ------------------------------------------------------ ヘッダーバー　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ ヘッダー本体（ロゴ＋ナビゲーション） ------------------------------------------------------ */ /* ── ヘッダー本体（ロゴ部分） ── */ .l-header .l-header__inner { position: relative; display: flex; align-items: center; justify-content: flex-start; } .l-header .l-header__inner .l-header__logo { position: relative; top: auto; left: auto; padding: 0; z-index: 999; flex-shrink: 0; } /* * ヘッダー内ナビ: * - トップページでは JS で .home-gnav へ DOM移動されるのでヘッダーからは消える * - 下層ページでは従来通りヘッダー内にナビ表示 */ /* ヘッダー内ナビスタイル（下層ページ用 — トップではDOMが移動済み） */ .l-header .l-header__inner .l-header__gnav { position: relative; top: auto; left: auto; right: auto; margin: 0; display: flex; justify-content: flex-start; } .l-header .l-header__inner .l-header__gnav .c-gnav { width: 100%; display: flex; list-style: none; gap: 60px; justify-content: flex-start; } .l-header .l-header__inner .l-header__gnav .c-gnav .menu-item { position: relative; padding-bottom: 0; } .l-header .l-header__inner .l-header__gnav .c-gnav .menu-item>a { display: flex; flex-direction: column; align-items: center; gap: 4px; } .l-header .l-header__inner .l-header__gnav .c-gnav .menu-item>a span { font-size: 15px !important; font-weight: 500; color: var(--color_main); } .l-header .l-header__inner .l-header__gnav .c-gnav .menu-item::before { display: none; } /* ============================================ MV下 ナビゲーションバー（トップページ専用） ナビ＋メガメニューをDOMごと移動して配置 ============================================ */ /* 受け皿コンテナ: 全幅ブルー */ .home-gnav { background: linear-gradient(135deg, #125B8C 0%, #1772AE 50%, #1B88D0 100%) !important; border-bottom: none; position: relative; z-index: 100; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* 移動後の .l-header__gnav を上書き */ .home-gnav .home-gnav__nav { display: flex !important; justify-content: center !important; position: relative !important; margin: 0 auto !important; max-width: 1200px; } .home-gnav .home-gnav__nav .c-gnav { display: flex !important; list-style: none !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; justify-content: center; } .home-gnav .home-gnav__nav .c-gnav>.menu-item { position: relative; padding-bottom: 0 !important; } /* メニューアイテム間の区切り線 */ .home-gnav .home-gnav__nav .c-gnav>.menu-item+.menu-item::before { content: "" !important; display: block !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40%; background: rgba(255, 255, 255, 0.3); } .home-gnav .home-gnav__nav .c-gnav>.menu-item>a { display: flex; align-items: center; justify-content: center; padding: 16px 30px; font-size: 14px; text-decoration: none !important; transition: background 0.25s; position: relative; } /* 白文字 */ .home-gnav .home-gnav__nav .c-gnav>.menu-item>a span { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; letter-spacing: 0.06em; transition: opacity 0.25s; } /* ホバー: 少し明るく */ .home-gnav .home-gnav__nav .c-gnav>.menu-item:hover>a { background: rgba(255, 255, 255, 0.12); } .home-gnav .home-gnav__nav .c-gnav>.menu-item:hover>a span { color: #fff !important; opacity: 1; } /* ホバー下線: 白 */ .home-gnav .home-gnav__nav .c-gnav>.menu-item>a::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 70%; height: 2px; background: #fff; transition: transform 0.25s ease; } .home-gnav .home-gnav__nav .c-gnav>.menu-item:hover>a::after { transform: translateX(-50%) scaleX(1); } /* 下向き矢印を非表示 */ .home-gnav .home-gnav__nav .c-gnav>.menu-item::before { display: none !important; } /* メガメニュー（ドロップダウン）: 位置調整 */ .home-gnav .home-gnav__nav .c-gnav>.menu-item .sub-menu, .home-gnav .home-gnav__nav .c-megaMenu { z-index: 200; } /* ── MV下に移動されたメガメニューパネル（上方向に展開） ── */ .home-gnav [class*="megamenu-"] { display: none; position: absolute; bottom: 100%; left: 0; width: 100%; margin-bottom: 0 !important; box-shadow: 0px -4px 12px 1px rgba(100, 100, 100, .2); z-index: 999; background-color: #EEF4F9; } /* メガメニュー内スタイル（.home-gnav用） */ .home-gnav .swell-block-fullWide h4.wp-block-heading, .home-gnav .swell-block-fullWide h4.wp-block-heading a { font-size: 1rem; font-weight: 700; color: var(--color_main, #00406B) !important; margin-bottom: 0; text-decoration: none; } .home-gnav .swell-block-fullWide .swell-block-linkList { font-size: 0.85rem; } .home-gnav .swell-block-fullWide .swell-block-linkList__link { color: #092F48; text-decoration: none; padding: 4px 0; display: block; } .home-gnav .swell-block-fullWide .swell-block-linkList__link:hover { color: var(--color_main, #00406B); opacity: 0.8; } .home-gnav .swell-block-fullWide .swl-bg-color.has-swl-main-background-color { display: inline-block; padding: 2px 12px; border-radius: 0; font-weight: 600; } /* ------------------------------------------------------ ヘッダー本体　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ ヘッダー レスポンシブ ------------------------------------------------------ */ @media screen and (max-width: 959px) { /* SP: 縦積みに戻す */ .l-header { flex-direction: column !important; max-width: none; padding: 10px 15px !important; } .l-header .l-header__inner { padding: 0 !important; gap: 0; width: 100% !important; } .l-header .l-header__inner .l-header__logo { top: 0; } .l-header .l-header__inner .l-header__gnav { display: none !important; } .l-header .l-header__bar { display: none !important; } /* MV下ナビ：SPでは非表示（ハンバーガーメニューに委ねる） */ .home-gnav { display: none !important; } } /* ------------------------------------------------------ ヘッダー レスポンシブ　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ 固定ヘッダー（スクロール時） ------------------------------------------------------ */ .l-fixHeader .l-fixHeader__inner { max-width: 1280px; display: flex; align-items: center; gap: 80px; } .l-fixHeader .l-fixHeader__gnav .c-gnav { display: flex; gap: 60px; } .l-fixHeader .l-fixHeader__gnav .c-gnav .menu-item>a span { font-size: 14px !important; font-weight: 500; color: var(--color_main); } /* ------------------------------------------------------ 固定ヘッダー　end ------------------------------------------------------ */ /* ====================================================== header　end ====================================================== */ /* ====================================================== ⚫︎ footer ====================================================== */ .w-beforeFooter {} /* ------------------------------------------------------ ◯ 右固定ボタン（資料ダウンロード＆お問い合わせ） ------------------------------------------------------ */ .side-fixed-btns { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; } .side-fixed-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 120px; padding: 20px 10px; text-decoration: none; color: #fff; transition: transform 0.25s, box-shadow 0.25s; } .side-fixed-btn:hover { color: #fff; transform: translateX(-4px); box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.3); } /* 上ボタン: 明るめブルー + 立体グラデーション */ .side-fixed-btn--dl { border-radius: 12px 0 0 0; background: linear-gradient(180deg, #1B88D0 0%, #1772AE 50%, #125B8C 100%); box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* 下ボタン: やや深めブルー + 立体グラデーション */ .side-fixed-btn--tel { border-radius: 0 0 0 12px; background: linear-gradient(180deg, #1B88D0 0%, #1772AE 50%, #00406B 100%); box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2); } .side-fixed-btn__text { font-size: 0.8rem; font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: 0.05em; } .side-fixed-btn svg { display: block; } /* ------------------------------------------------------ 右固定ボタン　end ------------------------------------------------------ */ /* ====================================================== footer　end ====================================================== */ /* ====================================================== ⚫︎ トップページ ====================================================== */ /* ------------------------------------------------------ ◯ NEWS ティッカー（ポカリスエット風 1行表示） ------------------------------------------------------ */ /* ニュースティッカー: ダークブルー全幅バー */ .news-ticker { background: #092F48 !important; border-bottom: none; padding: 0; margin-bottom: 0; } .news-ticker__inner { display: flex; align-items: center; gap: 0; padding: 12px 40px; max-width: 900px; margin: 0 auto; } .news-ticker__label { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #fff; background: transparent; padding: 0; border-radius: 0; letter-spacing: 0.12em; flex-shrink: 0; margin-right: 20px; } /* ロールアップコンテナ */ .news-ticker__roll { flex: 1; min-width: 0; position: relative; height: 2em; overflow: hidden; display: flex; align-items: center; } /* 各ニュースアイテム */ .news-ticker__link { display: flex; align-items: center; gap: 16px; text-decoration: none; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(100%); transition: transform 0.5s ease, opacity 0.5s ease; pointer-events: none; } /* 表示中 */ .news-ticker__link.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } /* 上にスライドアウト */ .news-ticker__link.is-out { opacity: 0; transform: translateY(-100%); position: absolute; } .news-ticker__link:hover { opacity: 0.7; } .news-ticker__date { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); flex-shrink: 0; letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.4); padding: 1px 10px; border-radius: 2px; line-height: 1.6; white-space: nowrap; } .news-ticker__title { font-size: 0.85rem; font-weight: 400; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-ticker__more { flex-shrink: 0; margin-left: 24px; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-decoration: none; letter-spacing: 0.02em; transition: opacity 0.2s; white-space: nowrap; } .news-ticker__more:hover { opacity: 0.7; color: #fff; } @media screen and (max-width: 959px) { .news-ticker__inner { padding: 12px 16px; gap: 0; } .news-ticker__label { font-size: 0.65rem; padding: 3px 10px; margin-right: 12px; } .news-ticker__date { font-size: 0.75rem; } .news-ticker__title { font-size: 0.8rem; } .news-ticker__more { display: none; } } /* ------------------------------------------------------ NEWS ティッカー　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ solution ------------------------------------------------------ */ /* 検索ページ用CSEスタイル（.search 内のみ適用） */ .search #___gcse_0, .search #___gcse_1 { max-width: 150px; } .search #___gcse_1 .gsc-control-cse.gsc-control-cse-ja, .search #___gcse_0 .gsc-control-cse.gsc-control-cse-ja { background: transparent; border: transparent; } .search #___gcse_1 .gsc-search-box.gsc-search-box-tools, .search #___gcse_0 .gsc-search-box.gsc-search-box-tools { max-width: max-content; margin: 0 auto; } .search #___gcse_0 .gsc-input, .search #___gcse_1 .gsc-input { border: none !important; } .search #___gcse_0 .gsc-input-box, .search #___gcse_1 .gsc-input-box { border: none !important; } .search #___gcse_0 .gsc-input-box tbody tr, .search #___gcse_1 .gsc-input-box tbody tr { border: 1px solid var(--color_main) !important; display: flex; max-height: 32px; } .search #___gcse_0 .gsib_a, .search #___gcse_1 .gsib_a { display: flex; max-height: 30px; border: none; background: #fff; } .search #___gcse_0 .gsib_a .gsc-input, .search #___gcse_1 .gsib_a .gsc-input { border: none !important; background: #fff !important; } .search #___gcse_0 .gsib_b, .search #___gcse_1 .gsib_b { position: relative; background-color: var(--color_main) !important; padding: 0; border: 1px solid var(--color_main) !important; max-height: 28px; } .search #___gcse_0 .gsib_b .gsst_b, .search #___gcse_1 .gsib_b .gsst_b { width: 100%; height: 100%; padding: 0; } .search #___gcse_0 .gsib_b .gsst_a, .search #___gcse_1 .gsib_b .gsst_a { color: #fff !important; position: relative; z-index: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .search #___gcse_0 .gsib_b .gsst_a::after, .search #___gcse_1 .gsib_b .gsst_a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #fff; z-index: -1; } .search #___gcse_0 .gsib_b::before, .search #___gcse_1 .gsib_b::before { content: ""; position: absolute; top: 30%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; width: 20px; height: 20px; background: url("https://daisotest.2-d.jp/wp-content/uploads/2026/04/search-button.png"); background-repeat: no-repeat; background-size: cover; } .search #___gcse_0 .gsib_b::after, .search #___gcse_1 .gsib_b::after { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: var(--color_main) !important; z-index: -1; } /* --- ソリューション検索セクション --- */ .solution-search { background-color: rgba(209, 218, 225, 0.5) !important; } /* SWELLのh2デフォルトスタイルを完全リセット */ .post_content .solution-search h2, .post_content .solution-search h2.search-header__title, .solution-search h2.search-header__title { background: none !important; background-color: transparent !important; color: #00406B !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; position: relative !important; } .post_content .solution-search h2::before, .post_content .solution-search h2::after { display: none !important; content: none !important; } /* --- 検索ヘッダー（アイコン＋見出し） --- */ .solution-search .search-header { text-align: center; margin-bottom: 20px; display: block !important; } .solution-search .search-header__title { font-size: 1.5rem; font-weight: 900; color: #00406B !important; letter-spacing: 0.08em; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center; gap: 10px; background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-align: center !important; line-height: 1.4 !important; position: relative !important; } .solution-search .search-header__icon { display: inline-block !important; width: 22px; height: 22px; vertical-align: middle; flex-shrink: 0; } .solution-search .search-header__title::before, .solution-search .search-header__title::after { display: none !important; content: none !important; background: none !important; } /* --- 検索バー --- */ .solution-search .search-bar { max-width: 720px; margin: 0 auto 32px; display: block !important; } .solution-search .search-bar__inner { display: flex !important; width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .solution-search .search-bar__select { flex: 0 0 180px; padding: 14px 16px; font-size: 0.95rem; border: 1px solid #D0DEE8; border-right: 1px solid #D0DEE8; border-radius: 0; background: #fff; color: #092F48; appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; height: auto; line-height: 1.4; margin: 0; } .solution-search .search-bar__input { flex: 1; padding: 14px 16px; font-size: 0.95rem; border: 1px solid #D0DEE8; border-left: none; border-radius: 0; outline: none; background: #fff; color: #092F48; height: auto; line-height: 1.4; margin: 0; } .solution-search .search-bar__btn { flex: 0 0 52px; display: flex !important; align-items: center; justify-content: center; background: #1B88D0; border: none; cursor: pointer; transition: opacity 0.2s; padding: 0; margin: 0; border-radius: 0; } .solution-search .search-bar__btn:hover { opacity: 0.85; } .solution-search .search-bar__btn svg { width: 20px; height: 20px; fill: #fff; } /* --- メインタブ（抜型検索／資材検索／課題検索） --- */ .solution-search .tf-tabs { display: flex !important; gap: 0; margin-bottom: 0; } .solution-search .tf-tab { flex: 1; padding: 16px 8px; font-size: 1rem; font-weight: 700; text-align: center; border: none; cursor: pointer; background: #1772AE; color: #fff !important; transition: background 0.2s; border-radius: 0; margin: 0; line-height: 1.4; letter-spacing: 0.04em; } .solution-search .tf-tab+.tf-tab { border-left: 1px solid rgba(255, 255, 255, 0.15); } .solution-search .tf-tab:hover { background: #125B8C; } .solution-search .tf-tab.active { background: #1B88D0; } /* --- タクソノミーフィルター全体 --- */ .solution-search .tax-filter, .solution-search .tf-panel, .solution-search .tf-tabs { border: none !important; border-left: none !important; outline: none !important; box-shadow: none !important; } /* --- キーワードで絞るヘッダー --- */ .solution-search .tf-keyword-header { text-align: center; font-size: 0.95rem; font-weight: 700; color: #fff !important; background: #00406B; padding: 10px 20px; margin: 0; letter-spacing: 0.06em; } /* --- キーワードタグエリア --- */ .solution-search .tf-keywords { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 16px; background: #fff; justify-content: center; } .solution-search .tf-keyword-tag { display: inline-block; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; color: #00406B !important; text-decoration: none !important; background: #EEF4F9; border: 1px solid #D0DEE8; border-radius: 4px; transition: all 0.2s ease; line-height: 1.4; cursor: pointer; } .solution-search .tf-keyword-tag:hover { background: #1B88D0; color: #fff !important; border-color: #1B88D0; } /* --- SP レスポンシブ --- */ @media (max-width: 768px) { .solution-search .search-bar__select { flex: 0 0 120px; font-size: 0.85rem; padding: 10px; } .solution-search .search-bar__input { font-size: 0.85rem; padding: 10px; } .solution-search .tf-tab { font-size: 0.85rem; padding: 12px 4px; } .solution-search .tf-keywords { gap: 6px; padding: 14px 10px; } .solution-search .tf-keyword-tag { font-size: 0.78rem; padding: 8px 12px; } } /* ------------------------------------------------------ solution　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ problems ------------------------------------------------------ */ /* --- お困りごとヘッダー --- */ .problems-section { background-color: #fff !important; } .problems-header { text-align: center; margin-bottom: 40px; } .problems-header__icon { display: block; margin: 0 auto 12px; } .problems-header__icon svg { display: inline-block; } .problems-header__title, .post_content .problems-section h2.problems-header__title { font-size: 1.8rem; font-weight: 900; color: #00406B !important; margin: 0 0 16px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; letter-spacing: 0.04em; display: block !important; } .problems-header__title::before, .problems-header__title::after, .post_content .problems-section h2::before, .post_content .problems-section h2::after { display: none !important; content: none !important; } .problems-header__desc { font-size: 0.95rem; color: #092F48; line-height: 1.8; margin: 0; } /* --- 4カラムカードグリッド --- */ .problems-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; } .problems-card { background: #EEF4F9; display: flex; flex-direction: column; justify-content: space-between; border-radius: 0; } .problems-card__body { padding: 24px 20px 16px; flex: 1; } .problems-card__list { list-style: disc; padding-left: 20px; margin: 0; font-size: 0.88rem; line-height: 2; color: #092F48; } .problems-card__list li { padding: 0; margin: 0; } .problems-card__btn { display: block; text-align: center; padding: 16px 12px; font-size: 1.1rem; font-weight: 900; color: #00406B !important; text-decoration: none !important; letter-spacing: 0.02em; transition: opacity 0.2s; } .problems-card__btn:hover { opacity: 0.7; } .problems-card__arrow { margin-right: 4px; font-weight: 900; } /* --- SP レスポンシブ --- */ @media (max-width: 959px) { .problems-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .problems-grid { grid-template-columns: 1fr; } .problems-header__title, .post_content .problems-section h2.problems-header__title { font-size: 1.4rem; } } /* ------------------------------------------------------ problems　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ service ------------------------------------------------------ */ /* --- サービスの全体像セクション --- */ .sv-section { background-color: #EEF4F9 !important; } /* タイトル */ .sv-section__title, .post_content .sv-section h2.sv-section__title { text-align: center; font-size: 2rem; font-weight: 900; color: #00406B !important; margin: 0 0 48px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; letter-spacing: 0.1em; display: block !important; } .sv-section__title::before, .sv-section__title::after, .post_content .sv-section h2::before, .post_content .sv-section h2::after { display: none !important; content: none !important; } /* 図と説明文のラッパー */ .sv-diagram-wrap { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; gap: 20px 32px; align-items: center; max-width: 1100px; margin: 0 auto; } /* ===== 説明テキスト ===== */ .sv-desc { max-width: 280px; } .sv-desc--tl { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; } .sv-desc--tr { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; } .sv-desc--bl { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; } .sv-desc--br { grid-column: 3; grid-row: 2; justify-self: start; text-align: left; } .sv-desc__catch { font-size: 0.95rem; font-weight: 800; color: #00406B; margin: 0 0 6px; line-height: 1.6; white-space: nowrap; } .sv-desc__text { font-size: 0.82rem; color: #092F48; line-height: 1.8; margin: 0; text-align: left; } /* ===== 円の図エリア ===== */ .sv-circles { grid-column: 2; grid-row: 1 / 3; position: relative; width: 420px; height: 420px; } /* 中央の白い円 */ .sv-center-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 230px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; box-shadow: 0 4px 24px rgba(0, 82, 117, 0.12); } .sv-center-circle span { display: block; font-size: 0.82rem; font-weight: 600; color: #00406B; line-height: 1.7; white-space: nowrap; } .sv-center-circle strong { display: block; font-size: 1rem; font-weight: 900; color: #00406B; line-height: 1.7; margin-top: 2px; white-space: nowrap; } /* ===== 4つのサービス円（軌道上） ===== */ .sv-orbit { position: absolute; width: 150px; height: 150px; background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; box-shadow: 0 4px 20px rgba(0, 82, 117, 0.25); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; cursor: pointer; } .sv-orbit:hover { transform: scale(1.15); box-shadow: 0 10px 40px rgba(0, 82, 117, 0.4); background: linear-gradient(135deg, #00406B 0%, #1C8DD9 100%); } .sv-orbit__main { font-size: 1.15rem; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: 0.04em; } .sv-orbit__sub { font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.06em; margin-top: 2px; } /* 配置（左上・右上・左下・右下） */ .sv-orbit--tl { top: 10px; left: 20px; } .sv-orbit--tr { top: 10px; right: 20px; } .sv-orbit--bl { bottom: 10px; left: 20px; } .sv-orbit--br { bottom: 10px; right: 20px; } /* ===== スクロールアニメーション ===== */ .sv-anim { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } .sv-anim[data-anim="fadeLeft"] { transform: translateX(-30px); } .sv-anim[data-anim="fadeRight"] { transform: translateX(30px); } .sv-anim[data-anim="scaleUp"] { transform: scale(0.85); } .sv-anim[data-anim="popIn"] { transform: scale(0.3); } .sv-anim.is-visible { opacity: 1; transform: translateX(0) scale(1); } /* ===== レスポンシブ ===== */ @media (max-width: 959px) { .sv-diagram-wrap { grid-template-columns: 1fr; grid-template-rows: auto; gap: 24px; justify-items: center; } .sv-desc--tl, .sv-desc--tr, .sv-desc--bl, .sv-desc--br { grid-column: 1; grid-row: auto; justify-self: center; text-align: center; max-width: 400px; } .sv-circles { grid-column: 1; grid-row: auto; order: -1; } .sv-desc--tl { order: 1; } .sv-desc--tr { order: 2; } .sv-desc--bl { order: 3; } .sv-desc--br { order: 4; } } @media (max-width: 599px) { .sv-section__title, .post_content .sv-section h2.sv-section__title { font-size: 1.5rem !important; margin-bottom: 32px !important; } .sv-circles { width: 300px; height: 300px; } .sv-center-circle { width: 165px; height: 165px; } .sv-center-circle span { font-size: 0.68rem; white-space: normal; } .sv-center-circle strong { font-size: 0.82rem; white-space: normal; } .sv-orbit { width: 110px; height: 110px; } .sv-orbit__main { font-size: 0.9rem; } .sv-orbit__sub { font-size: 0.62rem; } .sv-orbit--tl { top: 5px; left: 8px; } .sv-orbit--tr { top: 5px; right: 8px; } .sv-orbit--bl { bottom: 5px; left: 8px; } .sv-orbit--br { bottom: 5px; right: 8px; } .sv-desc__catch { font-size: 0.88rem; white-space: normal; } .sv-desc__text { font-size: 0.78rem; } } /* ------------------------------------------------------ service　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ ability（大創ができること） ------------------------------------------------------ */ /* セクション背景 */ .ab-section { background-color: #EEF4F9 !important; } /* タイトル */ .ab-header__title, .post_content .ab-section h2.ab-header__title { text-align: center; font-size: 2rem; font-weight: 900; color: #00406B !important; margin: 0 0 40px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; letter-spacing: 0.1em; display: block !important; } .ab-header__title::before, .ab-header__title::after, .post_content .ab-section h2::before, .post_content .ab-section h2::after { display: none !important; content: none !important; } /* スクロールラップ */ .ab-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } /* 図全体 */ .ab-diagram { min-width: 800px; max-width: 1000px; margin: 0 auto; } /* === パッケージ製作の流れ === */ .ab-flow-label { font-size: 0.85rem; font-weight: 700; color: #00406B; margin-bottom: 10px; padding-left: 4px; } .ab-flow { display: flex; align-items: stretch; gap: 0; margin-bottom: 28px; } .ab-flow__step { flex: 1; background: #D0DEE8; color: #092F48; text-align: center; padding: 14px 4px; font-size: 0.82rem; font-weight: 700; line-height: 1.4; position: relative; display: flex; justify-content: center; align-items: center; } .ab-flow__step:first-child { border-radius: 4px 0 0 4px; } .ab-flow__step:last-child { border-radius: 0 4px 4px 0; } .ab-flow__step--hl { background: #1C8DD9; color: #fff; } .ab-flow__arrow { display: flex; align-items: center; justify-content: center; color: #125B8C; font-size: 0.7rem; padding: 0 2px; background: #D0DEE8; flex-shrink: 0; width: 18px; } /* === 大創のソリューション === */ .ab-sol-label { font-size: 0.85rem; font-weight: 700; color: #00406B; margin-bottom: 12px; padding-left: 4px; border-top: 1px solid rgba(0, 82, 117, 0.15); padding-top: 16px; } /* 5つのサービスボックス */ .ab-services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; } .ab-svc { background: #fff; border: 1px solid #D0DEE8; border-radius: 6px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ab-svc:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 82, 117, 0.15); } .ab-svc--accent { background: #fff; border: 2px solid #1B88D0; box-shadow: 0 2px 12px rgba(0, 148, 212, 0.15); } .ab-svc--accent:hover { box-shadow: 0 8px 28px rgba(0, 148, 212, 0.25); } .ab-svc__title { background: #00406B; color: #fff; font-size: 0.85rem; font-weight: 800; text-align: center; padding: 10px 8px; letter-spacing: 0.04em; } .ab-svc--accent .ab-svc__title { background: #1B88D0; } .ab-svc__body { color: #092F48; font-size: 0.75rem; text-align: center; padding: 12px 8px; line-height: 1.7; } /* 資材・機材販売バー */ .ab-wide-bar { background: linear-gradient(135deg, #1C8DD9 0%, #1C8DD9 100%); border-radius: 6px; padding: 18px 24px; margin-bottom: 10px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ab-wide-bar:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 82, 117, 0.2); } .ab-wide-bar__title { font-size: 1.05rem; font-weight: 900; color: #fff; margin-bottom: 4px; letter-spacing: 0.06em; } .ab-wide-bar__text { font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } /* 抜型ソリューション提案バー */ .ab-full-bar { background: linear-gradient(135deg, #00406B 0%, #1C8DD9 100%); border-radius: 6px; padding: 22px 24px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ab-full-bar:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 82, 117, 0.25); } .ab-full-bar__title { font-size: 1.2rem; font-weight: 900; color: #fff; margin-bottom: 4px; letter-spacing: 0.08em; } .ab-full-bar__text { font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } /* SP レスポンシブ */ @media (max-width: 768px) { .ab-header__title, .post_content .ab-section h2.ab-header__title { font-size: 1.5rem !important; } } /* ------------------------------------------------------ ability　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ pickup ------------------------------------------------------ */ /* --- 共通セクションヘッダー（PICK UP / Instagram 用） --- */ .sec-header { text-align: center; margin-bottom: 24px; } .sec-header__title, .post_content .pickup-section h2.sec-header__title, .post_content .insta-section h2.sec-header__title { font-size: 1.3rem; font-weight: 900; color: #00406B !important; display: inline-flex !important; align-items: center; gap: 8px; margin: 0 0 10px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; letter-spacing: 0.06em; } .sec-header__title::before, .sec-header__title::after, .post_content .pickup-section h2::before, .post_content .pickup-section h2::after, .post_content .insta-section h2::before, .post_content .insta-section h2::after { display: none !important; content: none !important; } .sec-header__icon { display: inline-block !important; width: 28px; height: 28px; flex-shrink: 0; } .sec-header__desc { font-size: 0.85rem; color: #092F48; line-height: 1.8; margin: 0; } /* --- PICK UP カルーセル --- */ .pickup-carousel { position: relative; display: flex; align-items: center; gap: 16px; } /* 左右ボタン */ .pickup-btn { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #00406B; background: #fff; color: #00406B; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s, color 0.25s; } .pickup-btn:hover { background: #00406B; color: #fff; } /* ビューポート（はみ出し隠す） */ .pickup-viewport { flex: 1; overflow: hidden; } /* トラック（横並び・スライドアニメ） */ .pickup-track { display: flex; transition: transform 0.6s ease; } /* 各カード — PC3枚＋gap24px */ .pickup-card { flex: 0 0 calc((100% - 48px) / 3); margin: 0 8px; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s, transform 0.3s; } .pickup-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-3px); } .pickup-card__link { display: block; text-decoration: none; color: inherit; } .pickup-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; } .pickup-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .pickup-card__body { padding: 10px 14px 14px; } .pickup-card__term { text-align: center; padding: 4px 8px; font-size: 0.75rem; font-weight: 700; color: var(--color_main, #00406B); border: 1px solid var(--color_main, #00406B); border-radius: 3px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pickup-card__term--alt { background: var(--color_main, #00406B); color: #fff; border-color: var(--color_main, #00406B); } .pickup-card__title { font-size: 0.85rem; font-weight: 600; line-height: 1.5; margin: 0; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pickup-card__date { display: block; margin-top: 6px; font-size: 0.75rem; color: #999; } /* レスポンシブ */ @media (max-width: 959px) { .pickup-card { flex: 0 0 calc((100% - 32px) / 2); } } @media (max-width: 599px) { .pickup-carousel { gap: 8px; } .pickup-btn { flex: 0 0 34px; width: 34px; height: 34px; } .pickup-card { flex: 0 0 calc(100% - 16px); } } /* --- Instagram フォローボタン --- */ .insta-follow { text-align: center; margin-top: 24px; } .insta-follow__btn { display: inline-flex; align-items: center; gap: 8px; background: #1B88D0; color: #fff !important; font-size: 0.9rem; font-weight: 700; padding: 12px 32px; border-radius: 50px; text-decoration: none !important; transition: opacity 0.2s; letter-spacing: 0.03em; } .insta-follow__btn:hover { opacity: 0.8; } .insta-follow__btn svg { flex-shrink: 0; } /* ------------------------------------------------------ pickup / instagram　end ------------------------------------------------------ */ .marquee-wrapper { overflow: hidden; width: 100%; height: auto; position: relative; } .marquee { display: flex; width: max-content; animation: scroll-left 50s linear infinite; } .marquee .slide { flex: 0 0 auto; width: 400px; height: 400px; margin-right: 20px; border-radius: 12px; overflow: hidden; background: #EEF4F9; } .marquee .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ------------------------------------------------------ instagram　end ------------------------------------------------------ */ /* ====================================================== トップページ　end ====================================================== */ /* ====================================================== ⚫︎ 固定ページ ====================================================== */ /* ------------------------------------------------------ ◯ ヘッダータイトルエリア ------------------------------------------------------ */ .l-topTitleArea { background: var(--color_main) !important; .l-topTitleArea__img { display: none; } .l-topTitleArea__body { display: flex; justify-content: center; .c-pageTitle { font-size: 1.8rem; color: #fff !important; } } } /* ------------------------------------------------------ ヘッダータイトルエリア　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ 固定ページ共通スタイリッシュテンプレート ------------------------------------------------------ */ .wp-singular, .archive { .l-content.l-container { padding: 0; margin: 0; max-width: 100%; } } /* ── ページ全体のコンテンツエリア（トップページ除外） ── */ .l-topTitleArea~.l-content .l-topTitleArea~.l-content .post_content { max-width: 960px; margin: 0 auto; padding: 0 20px; } /* ── H2 セクション見出し: 英語風アクセント付き ── */ /* ── H2 全スタイル上書き（SWELL is-style-default / is-style-section_ttl） ── */ .l-topTitleArea~.l-content .post_content>h2.wp-block-heading, .l-topTitleArea~.l-content .post_content>h2.wp-block-heading.is-style-default, .l-topTitleArea~.l-content .post_content>h2.wp-block-heading.is-style-section_ttl { font-size: 1.7rem !important; font-weight: 800 !important; color: #fff !important; letter-spacing: 0.06em; margin-top: 80px !important; margin-bottom: 24px !important; padding: 16px 24px 16px 24px !important; background: linear-gradient(135deg, #1772AE 0%, #1C8DD9 60%, #1C8DD9 100%) !important; border: none !important; border-radius: 6px !important; position: relative; line-height: 1.4; box-shadow: 0 3px 12px rgba(0, 120, 212, 0.2); } /* H2 下のアクセントライン */ .l-topTitleArea~.l-content .post_content>h2.wp-block-heading::after, .l-topTitleArea~.l-content .post_content>h2.wp-block-heading.is-style-default::after, .l-topTitleArea~.l-content .post_content>h2.wp-block-heading.is-style-section_ttl::after { content: "" !important; position: absolute; bottom: -4px; left: 24px; width: 60px; height: 3px; background: rgba(255, 255, 255, 0.6); border-radius: 2px; } /* H2: SWELL の ::before もリセット */ .l-topTitleArea~.l-content .post_content>h2.wp-block-heading::before { display: none !important; } /* 最初のH2は上マージンを減らす */ .l-topTitleArea~.l-content .post_content>h2.wp-block-heading:first-child { margin-top: 40px !important; } /* ── H1 キャッチコピー ── */ .l-topTitleArea~.l-content .post_content>h1.wp-block-heading { font-size: 1.6rem !important; font-weight: 700 !important; color: #092F48 !important; line-height: 1.8; letter-spacing: 0.04em; margin-top: 16px !important; margin-bottom: 40px !important; padding-left: 20px !important; border-left: 4px solid #1B88D0 !important; background: transparent !important; } /* ── H3 サブ見出し ── */ .l-topTitleArea~.l-content .post_content>h3.wp-block-heading, .l-topTitleArea~.l-content .post_content>h3.wp-block-heading.is-style-default, .l-topTitleArea~.l-content .post_content>h3.wp-block-heading.is-style-section_ttl { font-size: 1.15rem !important; font-weight: 700 !important; color: #1772AE !important; margin-top: 50px !important; margin-bottom: 20px !important; padding: 14px 24px !important; background: linear-gradient(135deg, #EEF4F9 0%, #EEF4F9 100%) !important; border: none !important; border-left: 4px solid #1B88D0 !important; border-radius: 0 8px 8px 0 !important; line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 176, 240, 0.08); } .l-topTitleArea~.l-content .post_content>h3.wp-block-heading::before, .l-topTitleArea~.l-content .post_content>h3.wp-block-heading::after { display: none !important; } /* ── H4 小見出し ── */ .l-topTitleArea~.l-content .post_content h4.wp-block-heading { font-size: 1.05rem !important; font-weight: 700 !important; color: #1772AE !important; margin-top: 36px !important; margin-bottom: 14px !important; padding: 0 0 0 20px !important; position: relative; line-height: 1.5; background: transparent !important; border: none !important; } .l-topTitleArea~.l-content .post_content h4.wp-block-heading::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 10px !important; height: 10px !important; background: linear-gradient(135deg, #1B88D0, #1B88D0) !important; border-radius: 50% !important; display: block !important; } .l-topTitleArea~.l-content .post_content h4.wp-block-heading::after { display: none !important; } /* ── 段落テキスト: 読みやすさ重視 ── */ .l-topTitleArea~.l-content .post_content>p { font-size: 0.95rem; line-height: 2; color: #092F48; margin-bottom: 1.8em; letter-spacing: 0.03em; } /* ── メディア＋テキストブロック: カード風 ── */ .l-topTitleArea~.l-content .post_content .wp-block-media-text { margin-top: 30px !important; margin-bottom: 50px !important; background: #fff; border-radius: 12px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); overflow: hidden; padding: 0; border: 1px solid #D0DEE8; } .l-topTitleArea~.l-content .post_content .wp-block-media-text__content { padding: 36px 40px !important; } .l-topTitleArea~.l-content .post_content .wp-block-media-text__content p { font-size: 0.92rem; line-height: 2; color: #092F48; } .l-topTitleArea~.l-content .post_content .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; } /* ── カラムブロック: カード化 ── */ .l-topTitleArea~.l-content .post_content .wp-block-columns { margin-top: 30px !important; margin-bottom: 40px !important; gap: 24px; } .l-topTitleArea~.l-content .post_content .wp-block-column { background: #fff; border-radius: 10px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05); padding: 28px 24px; border: 1px solid #D0DEE8; transition: transform 0.25s, box-shadow 0.25s; } .l-topTitleArea~.l-content .post_content .wp-block-column:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1); } /* ── グループブロック: セクション背景切替 ── */ .l-topTitleArea~.l-content .post_content .wp-block-group { margin-top: 40px !important; margin-bottom: 40px !important; padding: 40px 36px; border-radius: 12px; } .l-topTitleArea~.l-content .post_content .wp-block-group.has-background { border-radius: 12px; overflow: hidden; } /* ── テーブル: モダンクリーン ── */ .l-topTitleArea~.l-content .post_content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 30px 0 40px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05); } .l-topTitleArea~.l-content .post_content table th { background: var(--color_main, #00406B); color: #fff; font-weight: 600; font-size: 0.88rem; padding: 14px 20px; text-align: left; white-space: nowrap; width: 160px; vertical-align: top; } .l-topTitleArea~.l-content .post_content table td { padding: 14px 20px; font-size: 0.9rem; line-height: 1.8; color: #092F48; background: #fff; border-bottom: 1px solid #D0DEE8; } .l-topTitleArea~.l-content .post_content table tr:last-child td { border-bottom: none; } .l-topTitleArea~.l-content .post_content table tr:nth-child(even) td { background: #EEF4F9; } /* ── リスト: スタイリッシュ ── */ .l-topTitleArea~.l-content .post_content ul { margin: 20px 0 30px; padding: 0; list-style: none; } .l-topTitleArea~.l-content .post_content ul li { position: relative; padding: 8px 0 8px 24px; font-size: 0.92rem; line-height: 1.8; color: #092F48; border-bottom: 1px solid #D0DEE8; } .l-topTitleArea~.l-content .post_content ul li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--color_main, #00406B); } .l-topTitleArea~.l-content .post_content ul li:last-child { border-bottom: none; } /* ── 画像ブロック: 角丸シャドウ ── */ .l-topTitleArea~.l-content .post_content .wp-block-image { margin: 30px 0 40px; } .l-topTitleArea~.l-content .post_content .wp-block-image img { border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* ── ボタンブロック: モダン ── */ .l-topTitleArea~.l-content .post_content .wp-block-buttons { margin: 30px 0 40px; } .l-topTitleArea~.l-content .post_content .wp-block-button .wp-block-button__link { border-radius: 50px; padding: 14px 40px; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; transition: transform 0.25s, box-shadow 0.25s; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12); } .l-topTitleArea~.l-content .post_content .wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); } /* ── 区切り線: 装飾的 ── */ .l-topTitleArea~.l-content .post_content hr.wp-block-separator { border: none; height: 1px; background: linear-gradient(90deg, transparent 0%, #D0DEE8 20%, #D0DEE8 80%, transparent 100%); margin: 50px 0; } /* ── 引用ブロック ── */ .l-topTitleArea~.l-content .post_content blockquote { background: linear-gradient(135deg, #EEF4F9 0%, #EEF4F9 100%); border-left: 4px solid var(--color_main, #00406B); border-radius: 0 10px 10px 0; padding: 28px 32px; margin: 30px 0 40px; font-style: normal; } .l-topTitleArea~.l-content .post_content blockquote p { color: #092F48; font-size: 0.92rem; line-height: 2; } /* ── SWELL専用ブロック: フルワイドブロック ── */ .l-topTitleArea~.l-content .post_content .swell-block-fullWide { border-radius: 0; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* ── ページタイトルエリア リデザイン ── */ .l-topTitleArea { background: linear-gradient(135deg, #125B8C 0%, #1772AE 40%, #1C8DD9 100%) !important; padding: 54px 0 !important; position: relative; overflow: hidden; } /* 流線型デコレーション */ .l-topTitleArea::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200'%3E%3Cpath d='M0 80 C300 30 600 130 900 60 S1200 10 1440 90' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='2'/%3E%3Cpath d='M0 140 C250 90 500 170 800 110 S1100 60 1440 140' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.5'/%3E%3Ccircle cx='1200' cy='40' r='120' fill='rgba(255,255,255,0.03)'/%3E%3Ccircle cx='200' cy='160' r='80' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E") no-repeat center; background-size: cover; pointer-events: none; } .l-topTitleArea .l-topTitleArea__body .c-pageTitle { font-size: 2rem !important; font-weight: 700; letter-spacing: 0.1em; color: #fff !important; position: relative; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } /* パンくずリスト: スタイリッシュ */ .l-topTitleArea+.c-breadcrumb, .p-breadcrumb { font-size: 0.78rem; color: #125B8C; padding: 12px 0; } /* ── レスポンシブ ── */ @media screen and (max-width: 959px) { .l-topTitleArea~.l-content .post_content { padding: 0 16px; } .l-topTitleArea~.l-content .post_content>h2.wp-block-heading { font-size: 1.3rem !important; margin-top: 50px !important; } .l-topTitleArea~.l-content .post_content>h1.wp-block-heading { font-size: 1.2rem !important; } .l-topTitleArea~.l-content .post_content .wp-block-media-text { border-radius: 8px; } .l-topTitleArea~.l-content .post_content .wp-block-media-text__content { padding: 24px 20px !important; } .l-topTitleArea~.l-content .post_content .wp-block-column { padding: 20px 16px; } .l-topTitleArea~.l-content .post_content table th { width: 100px; padding: 10px 12px; font-size: 0.82rem; } .l-topTitleArea~.l-content .post_content table td { padding: 10px 12px; font-size: 0.85rem; } .l-topTitleArea { padding: 35px 0 !important; } .l-topTitleArea .l-topTitleArea__body .c-pageTitle { font-size: 1.5rem !important; } } /* --- ソリューション検索セクション --- */ .page-template .solution-search { background-color: transparent !important; } /* ------------------------------------------------------ 固定ページ共通スタイリッシュテンプレート　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ 固定ページ 資材ページ(products) ------------------------------------------------------ */ .products-main { .post_content { .p-postList__item::before { display: none; } } } /* ------------------------------------------------------ 固定ページ 資材ページ(products)　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ 固定ページ 抜型ページ(nukigata) リニューアル ------------------------------------------------------ */ /* === ヒーロー === */ .nk-hero { background: linear-gradient(135deg, #1a4b7a 0%, #2a6cb0 50%, #3a8ad0 100%); padding: 60px 0; text-align: center; position: relative; overflow: hidden; } .nk-hero::before { content: ""; position: absolute; inset: 0; background: url('data:image/svg+xml,') repeat-x bottom/100% 40px; pointer-events: none; } .nk-hero__title { color: #fff; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.12em; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* === イントロ === */ .nk-intro { padding: 56px 20px 40px; text-align: center; max-width: 900px; margin: 0 auto; } .nk-intro__catch { font-size: 1.5rem; font-weight: 700; color: #1a3c5e; line-height: 1.7; margin: 0 0 20px; } .nk-intro__text { font-size: 0.95rem; line-height: 1.9; color: #444; margin: 0 0 40px; } /* === 強み === */ .nk-strength { background: #f7f9fc; border-radius: 12px; padding: 36px 40px; text-align: left; max-width: 800px; margin: 0 auto; } .nk-strength__title { font-size: 1.15rem; font-weight: 700; color: #1a3c5e; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #2a6cb0; } .nk-strength__list { list-style: none; padding: 0; margin: 0 0 24px; } .nk-strength__list li { position: relative; padding: 8px 0 8px 28px; font-size: 0.92rem; line-height: 1.7; color: #333; } .nk-strength__list li::before { content: "●"; position: absolute; left: 0; top: 8px; color: #2a6cb0; font-size: 0.7rem; } .nk-strength__btn-wrap { text-align: center; } /* === ボタン共通 === */ .nk-btn { display: inline-block; padding: 14px 40px; border-radius: 6px; font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: all 0.3s ease; letter-spacing: 0.05em; } .nk-btn--primary { background: #2a6cb0; color: #fff; border: 2px solid #2a6cb0; } .nk-btn--primary:hover { background: #1a4b7a; border-color: #1a4b7a; color: #fff; } .nk-btn--outline { background: transparent; color: #2a6cb0; border: 2px solid #2a6cb0; } .nk-btn--outline:hover { background: #2a6cb0; color: #fff; } .nk-btn--white { background: #fff; color: #2a6cb0; border: 2px solid #fff; } .nk-btn--white:hover { background: rgba(255,255,255,0.85); color: #1a4b7a; } .nk-btn--lg { padding: 16px 48px; font-size: 1rem; } /* === 製品セクション === */ .nk-products { padding: 0 0 60px; } .nk-products__header { text-align: center; padding: 48px 20px 0; max-width: 900px; margin: 0 auto; } .nk-products__title { font-size: 1.5rem; font-weight: 700; color: #1a3c5e; margin: 0 0 12px; position: relative; } .nk-products__title::after { content: ""; display: block; width: 60px; height: 3px; background: #2a6cb0; margin: 16px auto 0; } .nk-products__sub { font-size: 0.92rem; color: #666; margin: 16px 0 0; } /* === 検索タブ === */ .nk-search { max-width: 1100px; margin: 40px auto 0; padding: 0 20px; } .nk-search__label { text-align: center; font-size: 1.1rem; font-weight: 700; color: #1a3c5e; margin: 0 0 16px; } .nk-tabs { display: flex; border-radius: 6px 6px 0 0; overflow: hidden; border: 1px solid #2a6cb0; border-bottom: none; } .nk-tabs__btn { flex: 1; padding: 14px 8px; background: #fff; border: none; font-size: 0.92rem; font-weight: 700; color: #2a6cb0; cursor: pointer; transition: all 0.25s ease; border-right: 1px solid #2a6cb0; } .nk-tabs__btn:last-child { border-right: none; } .nk-tabs__btn.is-active, .nk-tabs__btn:hover { background: #2a6cb0; color: #fff; } /* タブパネル */ .nk-tab-panel { border: 1px solid #2a6cb0; border-radius: 0 0 6px 6px; overflow: hidden; } .nk-tab-panel__head { background: #1a3c5e; color: #fff; text-align: center; padding: 10px; font-size: 0.9rem; font-weight: 700; } .nk-tab-panel__tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px; background: #fff; } .nk-tag { display: inline-block; padding: 8px 20px; border: 1px solid #2a6cb0; border-radius: 4px; color: #2a6cb0; font-size: 0.85rem; text-decoration: none; transition: all 0.25s ease; font-weight: 500; } .nk-tag:hover { background: #2a6cb0; color: #fff; } .nk-tab-panel__empty { padding: 16px; color: #888; font-size: 0.88rem; } /* === セクション === */ .nk-section { margin-top: 56px; } .nk-section__heading { background: linear-gradient(135deg, #1a4b7a, #2a6cb0); color: #fff; text-align: center; padding: 20px; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 8px; margin: 0 0 32px; } .nk-section__btn-wrap { text-align: center; margin-top: 32px; } /* === カードグリッド === */ .nk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* === カード === */ .nk-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .nk-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); color: inherit; } .nk-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eef4f9; } .nk-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .nk-card:hover .nk-card__img { transform: scale(1.05); } .nk-card__term { position: absolute; top: 0; left: 0; background: rgba(9,47,72,0.85); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 14px; z-index: 2; letter-spacing: 0.03em; } .nk-card__number { position: absolute; bottom: 8px; left: 8px; width: 36px; height: 36px; background: #2a6cb0; color: #fff; font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .nk-card__body { padding: 14px 16px 16px; } .nk-card__title { font-size: 0.92rem; font-weight: 700; line-height: 1.5; color: #1a3c5e; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nk-card__num-label { display: none; /* PC: 番号はサムネイル上に表示 */ } /* === CTA帯 === */ .nk-cta-band { margin-top: 48px; background: linear-gradient(135deg, #1a4b7a, #2a6cb0); border-radius: 8px; padding: 36px 20px; text-align: center; } .nk-cta-band__inner { max-width: 600px; margin: 0 auto; } .nk-cta-band__icon { font-size: 2rem; margin: 0 0 8px; color: #fff; } .nk-cta-band__text { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 0 0 20px; } /* === お問い合わせ === */ .nk-contact { background: #f0f4f8; padding: 48px 20px; margin-top: 60px; } .nk-contact__inner { max-width: 900px; margin: 0 auto; text-align: center; } .nk-contact__label { font-size: 1.2rem; font-weight: 700; color: #1a3c5e; margin: 0 0 24px; } .nk-contact__cols { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .nk-contact__tel { display: flex; flex-direction: column; align-items: center; } .nk-contact__tel-num { font-size: 1.8rem; font-weight: 800; color: #1a3c5e; letter-spacing: 0.05em; } .nk-contact__tel-note { font-size: 0.8rem; color: #666; margin-top: 4px; } /* === レスポンシブ === */ @media (max-width: 959px) { .nk-hero__title { font-size: 1.6rem; } .nk-intro__catch { font-size: 1.2rem; } .nk-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .nk-tabs { flex-wrap: wrap; } .nk-tabs__btn { flex: 1 1 48%; border-bottom: 1px solid #2a6cb0; } .nk-strength { padding: 24px 20px; } } @media (max-width: 599px) { .nk-hero { padding: 40px 0; } .nk-hero__title { font-size: 1.3rem; } .nk-intro { padding: 32px 16px 24px; } .nk-intro__catch { font-size: 1.05rem; } .nk-grid { grid-template-columns: 1fr; gap: 14px; } .nk-section__heading { font-size: 1.05rem; padding: 14px 16px; } .nk-contact__cols { flex-direction: column; gap: 24px; } .nk-tabs__btn { flex: 1 1 100%; padding: 12px 8px; } .nk-btn { padding: 12px 28px; font-size: 0.88rem; } .nk-products__title { font-size: 1.2rem; } } /* === ポップアップモーダル === */ .nk-modal { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; } .nk-modal.is-open { display: flex; } .nk-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); cursor: pointer; } .nk-modal__content { position: relative; z-index: 1; background: #fff; border-radius: 12px; max-width: 760px; width: 92%; max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25); animation: nkModalIn 0.3s ease; } @keyframes nkModalIn { from { opacity: 0; transform: scale(0.92) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .nk-modal__close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 2rem; line-height: 1; color: #666; cursor: pointer; z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; } .nk-modal__close:hover { background: rgba(0, 0, 0, 0.08); color: #333; } .nk-modal__body { display: flex; gap: 0; } .nk-modal__img-wrap { flex: 0 0 45%; max-width: 45%; } .nk-modal__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 0 0 12px; display: block; } .nk-modal__info { flex: 1; padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; } .nk-modal__title { font-size: 1.2rem; font-weight: 700; color: #1a3c5e; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #dde5ed; } .nk-modal__desc { font-size: 0.9rem; line-height: 1.8; color: #444; margin: 0 0 24px; } @media (max-width: 599px) { .nk-modal__body { flex-direction: column; } .nk-modal__img-wrap { flex: none; max-width: 100%; } .nk-modal__img { border-radius: 12px 12px 0 0; max-height: 240px; } .nk-modal__info { padding: 20px 20px 24px; } .nk-modal__title { font-size: 1.05rem; } } /* === 抜型 個別ページ: アイキャッチ重複防止 + 前後ナビ非表示 + FAQ非表示 === */ .single-nukigata .p-articleThumb { display: none !important; } .single-nukigata .p-pnLinks { display: none !important; } /* よくある質問の見出し + 直後のアコーディオンを非表示 */ .single-nukigata .post_content > h2.is-style-section_ttl:last-of-type, .single-nukigata .post_content > .swell-block-accordion { display: none !important; } /* === 製品（product）個別ページ: 抜型ページと同じデザイン調整 === */ .single-product .p-articleThumb { display: none !important; } .single-product .p-pnLinks { display: none !important; } .single-product .post_content > h2.is-style-section_ttl:last-of-type, .single-product .post_content > .swell-block-accordion { display: none !important; } /* 製品ページ・抜型ページ: 画像はみ出し防止 + 左寄せ */ .pd-content img { max-width: 100% !important; height: auto !important; } .pd-content figure.wp-block-image, .pd-content .wp-block-image { float: none !important; display: block !important; max-width: 100% !important; width: fit-content !important; margin-left: 0 !important; margin-right: auto !important; margin-bottom: 1.5em !important; clear: both !important; } .pd-content figure.wp-block-image img, .pd-content .wp-block-image img { display: block !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: auto !important; } /* 旧スタイル互換 */ .nukigata-main { .post_content { .p-postList__item::before { display: none; } } } /* ------------------------------------------------------ 固定ページ 抜型ページ(nukigata)　end ------------------------------------------------------ */ /* === トップページ用タブ検索（2段構成） === */ .nk-search--top { margin-top: 24px; } .nk-search--top .nk-tabs--main { border-radius: 6px 6px 0 0; } .nk-search--top .nk-tabs--sub { border: 1px solid #2a6cb0; border-top: none; border-bottom: none; border-radius: 0; } .nk-search--top .nk-tabs__btn--sub { background: #e8eff6; color: #2a6cb0; font-size: 0.85rem; padding: 10px 8px; border-right: 1px solid #c5d6e8; } .nk-search--top .nk-tabs__btn--sub:last-child { border-right: none; } .nk-search--top .nk-tabs__btn--sub.is-active, .nk-search--top .nk-tabs__btn--sub:hover { background: #2a6cb0; color: #fff; } .nk-search--top .nk-main-panel { border: 1px solid #2a6cb0; border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; background: #fff; } .nk-search--top .nk-sub-panel { border-top: none; } .nk-search--top .nk-tab-panel__head { background: #1a3c5e; color: #fff; text-align: center; padding: 10px; font-size: 0.88rem; font-weight: 700; } .nk-search--top .nk-tab-panel__tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px; } @media (max-width: 599px) { .nk-search--top .nk-tabs--main .nk-tabs__btn { flex: 1 1 100%; } .nk-search--top .nk-tabs__btn--sub { flex: 1 1 48%; border-bottom: 1px solid #c5d6e8; font-size: 0.8rem; padding: 8px 6px; } } /* ------------------------------------------------------ ◯ お見積もり・ご相談フォーム ------------------------------------------------------ */ /* ------------------------------------------------------ お見積もり・ご相談フォーム　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ global NET ------------------------------------------------------ */ .box-menu.--global { .swell-block-box-menu__figure { img { max-width: 200px; object-fit: contain; } } } /* ------------------------------------------------------ global NET　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ 資材 ------------------------------------------------------ */ /* 資材 */ .--products_term-list { .p-postList__item { padding-bottom: 2rem; border-bottom: 1px solid var(--color_main); .p-postList__link { justify-content: flex-start; gap: 2rem; .p-postList__thumb { max-width: 200px; aspect-ratio: 1 / 1; .c-postThumb__figure { width: 100%; object-fit: cover; height: 100%; } } } .p-postList__meta { flex-direction: column; justify-content: flex-start; align-items: flex-start; } } .p-postList__item:last-of-type { border-bottom: none; } } .--nukigata_term-list { .p-postList__item { width: 24% !important; .p-postList__link { .p-postList__thumb { max-width: 200px; aspect-ratio: 1 / 1; .c-postThumb__figure { width: 100%; object-fit: cover; height: 100%; } } } } } /* ------------------------------------------------------ 資材 終わり　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ About ページテンプレート（page-about.php 専用） ------------------------------------------------------ */ /* ── ヒーローエリア ── */ .about-hero { background: linear-gradient(135deg, #125B8C 0%, #1772AE 40%, #1C8DD9 100%); padding: 70px 0 50px; position: relative; overflow: hidden; text-align: center; } .about-hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 40px; } .about-hero__title-en { font-size: 3rem; font-weight: 800; color: #fff; letter-spacing: 0.12em; margin: 0 0 8px; line-height: 1.2; } .about-hero__title-jp { font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.15em; margin: 0; font-weight: 500; } .about-hero__wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; z-index: 1; } /* （パンくずはSWELL標準の .p-breadcrumb を使用） */ /* ── メインレイアウト: サイドバー + コンテンツ ── */ .about-layout { display: flex; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 48px 40px 80px; align-items: flex-start; } /* ── サイドバーナビ ── */ .about-sidebar { flex: 0 0 220px; position: sticky; top: 100px; } .about-sidebar__heading { font-size: 1.1rem; font-weight: 800; color: #092F48; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #1772AE; } .about-sidebar__list { list-style: none; margin: 0; padding: 0; } .about-sidebar__item { border-bottom: 1px solid #D0DEE8; } .about-sidebar__item a { display: block; padding: 12px 12px 12px 16px; font-size: 0.88rem; color: #092F48; text-decoration: none; transition: all 0.2s; position: relative; } .about-sidebar__item a::before { content: "›"; position: absolute; left: 0; top: 12px; color: #1772AE; font-weight: 700; transition: left 0.2s; display: none; } .about-sidebar__item a:hover { color: #1772AE; background: #EEF4F9; } .about-sidebar__item a:hover::before { left: 4px; } .about-sidebar__item.is-current a { color: #1772AE; font-weight: 700; background: linear-gradient(90deg, #EEF4F9 0%, transparent 100%); border-left: 3px solid #1772AE; padding-left: 13px; } /* ── メインコンテンツ ── */ .about-main { flex: 1; min-width: 0; } /* ── About内のH2: 英語タイトル風 ── */ /* alignwide 等でコンテンツがはみ出さないようにする */ .about-content { overflow: hidden; } .about-content .alignwide, .about-content .alignfull { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .about-content>h2.wp-block-heading, .about-content>h2.wp-block-heading.is-style-default, .about-content>h2.wp-block-heading.is-style-section_ttl { font-size: 2.2rem !important; font-weight: 800 !important; color: #1772AE !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 0 12px 0 !important; margin-top: 72px !important; margin-bottom: 8px !important; margin-left: 0 !important; margin-right: 0 !important; position: relative; letter-spacing: 0.04em; line-height: 1.3; max-width: 100% !important; width: 100% !important; } .about-content>h2.wp-block-heading::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 50px !important; height: 3px !important; background: #1B88D0 !important; border-radius: 2px !important; } .about-content>h2.wp-block-heading::before { display: none !important; } .about-content>h2.wp-block-heading:first-child { margin-top: 0 !important; } /* ── About内のH1: サブキャッチ ── */ .about-content>h1.wp-block-heading { font-size: 1.5rem !important; font-weight: 700 !important; color: #092F48 !important; background: transparent !important; border: none !important; padding: 0 !important; margin-top: 8px !important; margin-bottom: 32px !important; line-height: 1.8; letter-spacing: 0.03em; } /* ── About内のH3 ── */ .about-content>h3.wp-block-heading, .about-content>h3.wp-block-heading.is-style-section_ttl { font-size: 1.2rem !important; font-weight: 700 !important; color: #1772AE !important; background: transparent !important; border: none !important; border-bottom: 1px solid #EEF4F9 !important; border-radius: 0 !important; padding: 0 0 10px 0 !important; margin-top: 48px !important; margin-bottom: 16px !important; box-shadow: none !important; } .about-content>h3.wp-block-heading::before, .about-content>h3.wp-block-heading::after { display: none !important; } /* ── About内の段落 ── */ .about-content>p { font-size: 0.92rem; line-height: 2.1; color: #092F48; margin-bottom: 1.6em; } /* ── About内のメディア+テキスト ── */ .about-content .wp-block-media-text { margin: 24px 0 48px !important; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); border: 1px solid #D0DEE8; background: #fff; } .about-content .wp-block-media-text__content { padding: 32px 36px !important; } .about-content .wp-block-media-text__content p { font-size: 0.9rem; line-height: 2; color: #092F48; } .about-content .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; } /* ── About内のテーブル（会社概要用） ── */ .about-content table { width: 100%; border-collapse: collapse; margin: 24px 0 48px; border-top: 2px solid #1772AE; } .about-content table th { background: #EEF4F9; color: #092F48; font-weight: 700; font-size: 0.88rem; padding: 16px 20px; text-align: left; white-space: nowrap; width: 160px; vertical-align: top; border-bottom: 1px solid #EEF4F9; } .about-content table td { padding: 16px 20px; font-size: 0.9rem; line-height: 1.8; color: #092F48; background: #fff; border-bottom: 1px solid #EEF4F9; } /* ── About内のカラム（拠点カード等） ── */ .about-content .wp-block-columns { gap: 24px; margin: 24px 0 48px !important; } .about-content .wp-block-column { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); padding: 0; overflow: hidden; border: 1px solid #D0DEE8; transition: transform 0.3s, box-shadow 0.3s; } .about-content .wp-block-column:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1); } .about-content .wp-block-column img { width: 100%; display: block; } .about-content .wp-block-column p, .about-content .wp-block-column h3, .about-content .wp-block-column h4 { padding-left: 20px; padding-right: 20px; } /* ── About内の画像 ── */ .about-content .wp-block-image { margin: 24px 0 40px; } .about-content .wp-block-image img { border-radius: 8px; } /* ── About内のボタン: 明るいブルー ── */ .about-content .wp-block-button .wp-block-button__link, .about-content .wp-block-button.is-style-fill .wp-block-button__link { background: linear-gradient(135deg, #1C8DD9 0%, #1772AE 100%) !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 16px 40px !important; font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: 0.06em; box-shadow: 0 3px 12px rgba(0, 136, 204, 0.3); transition: transform 0.25s, box-shadow 0.25s, background 0.25s; } .about-content .wp-block-button .wp-block-button__link:hover { background: linear-gradient(135deg, #1B88D0 0%, #1C8DD9 100%) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 160, 233, 0.35); } /* アウトラインスタイルのボタン */ .about-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: #1772AE !important; border: 2px solid #1772AE !important; box-shadow: none; } .about-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #1772AE !important; color: #fff !important; } /* ── 次のページリンク ── */ .about-next-page { margin-top: 80px; padding-top: 40px; border-top: 1px solid #EEF4F9; text-align: center; } .about-next-page__label { font-size: 0.78rem; color: #125B8C; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; } .about-next-page__link { display: inline-flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 700; color: #1772AE; text-decoration: none; padding: 16px 32px; border: 1px solid #EEF4F9; border-radius: 8px; transition: all 0.25s; } .about-next-page__link:hover { background: #EEF4F9; border-color: #1772AE; transform: translateX(4px); } .about-next-page__arrow { display: flex; color: #1772AE; } /* ── お問い合わせセクション ── */ .about-contact { background: linear-gradient(135deg, #125B8C 0%, #1772AE 50%, #1C8DD9 100%); padding: 60px 0; margin-top: 0; position: relative; overflow: hidden; } .about-contact::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cpath d='M0 150 C150 50 300 200 450 100 S600 50 600 150' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='2'/%3E%3Ccircle cx='500' cy='60' r='80' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E") no-repeat center; background-size: cover; pointer-events: none; } .about-contact__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; z-index: 2; } .about-contact__title { font-size: 2rem; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: 0.08em; } .about-contact__sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin: 0 0 12px; letter-spacing: 0.1em; } .about-contact__desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); line-height: 1.8; margin: 0; } .about-contact__actions { display: flex; gap: 16px; flex-shrink: 0; } .about-contact__btn { display: flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; white-space: nowrap; } .about-contact__btn--form { background: #fff; color: #1772AE; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); } .about-contact__btn--tel { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); flex-direction: column; align-items: center; gap: 4px; } .about-contact__btn--tel small { font-size: 0.7rem; font-weight: 400; opacity: 0.7; } .about-contact__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } /* ── SWELL デフォルトのページタイトルを非表示（About テンプレートでは独自ヒーローを使うため） ── */ .page-template-page-about .l-topTitleArea { display: none !important; } /* SWELLパンくずをヒーロー直下に密着 */ .page-template-page-about .p-breadcrumb { margin-top: 0 !important; padding: 10px 0; font-size: 0.78rem; } /* ヒーローとコンテンツ間の余白をなくす */ .page-template-page-about .about-hero { margin-bottom: 0; } .page-template-page-about .about-hero+.p-breadcrumb+.about-layout, .page-template-page-about .about-hero+.about-layout { padding-top: 36px; } /* ── レスポンシブ ── */ @media screen and (max-width: 959px) { .about-hero { padding: 50px 0 36px; } .about-hero__title-en { font-size: 2rem; } .about-layout { flex-direction: column; padding: 32px 16px 60px; gap: 24px; } .about-sidebar { flex: none; width: 100%; position: static; } .about-sidebar__list { display: flex; flex-wrap: wrap; gap: 4px; } .about-sidebar__item { border: 1px solid #EEF4F9; border-radius: 6px; } .about-sidebar__item a { padding: 8px 14px 8px 8px; font-size: 0.8rem; } .about-sidebar__item a::before { display: none; } .about-content>h2.wp-block-heading { font-size: 1.6rem !important; margin-top: 48px !important; } .about-contact__inner { flex-direction: column; text-align: center; } .about-contact__actions { flex-direction: column; width: 100%; } .about-contact__btn { justify-content: center; width: 100%; } } /* ------------------------------------------------------ About ページテンプレート　end ------------------------------------------------------ */ /* ====================================================== 固定ページ　end ====================================================== */ /* ====================================================== ⚫︎ 投稿ページ ====================================================== */ /* ------------------------------------------------------ ◯ ヘッダータイトルエリア ------------------------------------------------------ */ .single { .l-topTitleArea { .c-postTitle__ttl { color: #fff !important; } } /* ------------------------------------------------------ ヘッダータイトルエリア　end ------------------------------------------------------ */ /* ------------------------------------------------------ ◯ 抜型ページ ------------------------------------------------------ */ .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; } .swell-block-accordion__item { margin-bottom: 0.5rem; border: none !important; } .swell-block-accordion__title { position: relative; padding: 2rem 1.5rem !important; background: #EEF4F9 !important; color: var(--color_main); } .swell-block-accordion__title::before { content: ""; position: absolute; top: 0; left: 0; width: 0.5rem; height: 100%; background: var(--color_main); color: #fff; z-index: 1; } .swell-block-accordion__body { color: var(--color_main); background: #fff; padding: 2rem 1.5rem !important; } .dt-layout-start { display: none; } .dt-layout-end { display: none; } .tablepress { :where(tbody.row-striping)>:nth-child(even of :where(:not(.child, .dtrg-group)))>* { background-color: #0000 !important; } thead { th { color: var(--color_main); background: #EEF4F9; } } th, td { border: 1px solid #092F48; } .column-1 { a { position: relative; color: var(--color_main) !important; padding-right: 2rem; } a::after { content: ""; display: inline-block; width: 1.4em; height: 1.1em; background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxjaXJjbGUgY3g9IjE3NiIgY3k9IjQxNiIgcj0iMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjQwMCIgY3k9IjQxNiIgcj0iMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiPjwvY2lyY2xlPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiIGQ9Ik00OCA4MGg2NGw0OCAyNzJoMjU2Ij48L3BhdGg+PHBhdGggZD0iTTE2MCAyODhoMjQ5LjQ0YTggOCAwIDAwNy44NS02LjQzbDI4LjgtMTQ0YTggOCAwIDAwLTcuODUtOS41N0gxMjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiPjwvcGF0aD48L3N2Zz4"); background-size: contain; background-repeat: no-repeat; margin-left: 1em; transform: translateY(2px); } } } } /* ====================================================== 抜型ページ　end ====================================================== */ /* ====================================================== 投稿ページ　end ====================================================== */ /* ====================================================== ⚫︎ アーカイブページ ====================================================== */ .c-pageTitle__subTitle { display: none; } /* ====================================================== アーカイブページ　end ====================================================== */ /* var(--color_main) */ /* .post_content td,.post_content th { padding: 0 !important; } */ /* メガメニュー ---------------------------------------------------- */ /* ヘッダーを位置基準にする */ .l-header { position: relative; box-shadow: none; background: none; } /* メガメニュー位置（直書き用） */ .l-header .megamenu-1, .l-header .megamenu-2, .l-header .megamenu-3, .l-header .megamenu-4, .l-header .megamenu-5, .l-fixHeader .megamenu-1, .l-fixHeader .megamenu-2, .l-fixHeader .megamenu-3, .l-fixHeader .megamenu-4, .l-fixHeader .megamenu-5 { display: none; position: absolute; top: 100%; left: 0; width: 100%; margin-top: 0 !important; box-shadow: 0px 10px 12px 1px rgba(100, 100, 100, .3); z-index: 999; background-color: #EEF4F9; } /* メガメニュー is-active で表示 */ .megamenu-1.is-active, .megamenu-2.is-active, .megamenu-3.is-active, .megamenu-4.is-active, .megamenu-5.is-active { display: block !important; } /* メガメニュー内のテキストスタイル統一 */ .l-header .swell-block-fullWide h4.wp-block-heading, .l-fixHeader .swell-block-fullWide h4.wp-block-heading, .l-header .swell-block-fullWide h4.wp-block-heading a, .l-fixHeader .swell-block-fullWide h4.wp-block-heading a { font-size: 1rem; font-weight: 700; color: var(--color_main, #00406B) !important; margin-bottom: 0; text-decoration: none; } .l-header .swell-block-fullWide .swell-block-linkList, .l-fixHeader .swell-block-fullWide .swell-block-linkList { font-size: 0.85rem; } .l-header .swell-block-fullWide .swell-block-linkList__link, .l-fixHeader .swell-block-fullWide .swell-block-linkList__link { color: #092F48; text-decoration: none; padding: 4px 0; display: block; } .l-header .swell-block-fullWide .swell-block-linkList__link:hover, .l-fixHeader .swell-block-fullWide .swell-block-linkList__link:hover { color: var(--color_main, #00406B); opacity: 0.8; } /* カテゴリ見出しバッジ（各メニュー共通） */ .l-header .swell-block-fullWide .swl-bg-color.has-swl-main-background-color, .l-fixHeader .swell-block-fullWide .swl-bg-color.has-swl-main-background-color { display: inline-block; padding: 2px 12px; border-radius: 0; font-weight: 600; } /* メガメニュー ---------------------------------------------------- */ /* トップ NEWS セクション ======================================== */ .news-section { padding: 0 !important; } .news-block { display: flex; align-items: stretch; background: #fff; } /* 左カラム: アイコン＋NEWS */ .news-block__left { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 180px; padding: 30px 20px; flex-shrink: 0; } .news-block__icon svg { display: block; margin: 0 auto 8px; } .news-block__label { display: block; font-size: 1.3rem; font-weight: 900; color: #00406B; letter-spacing: 0.15em; text-align: center; } /* 右カラム: ニュース行リスト */ .news-block__right { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 10px 0; } /* 各行 */ .news-block__row { display: flex; align-items: center; gap: 20px; padding: 14px 30px; text-decoration: none !important; color: inherit; transition: background-color 0.2s; } .news-block__row:hover { background-color: #EEF4F9; } .news-block__row+.news-block__row {} /* 日付 */ .news-block__date { flex-shrink: 0; font-size: 0.9rem; color: #092F48; white-space: nowrap; min-width: 90px; } /* カテゴリバッジ */ .news-block__badge { flex-shrink: 0; display: inline-block; background: #1B88D0; color: #fff !important; font-size: 0.78rem; font-weight: 600; padding: 6px 0; border-radius: 2px; white-space: nowrap; width: 120px; text-align: center; } /* タイトル */ .news-block__title { flex: 1; font-size: 0.95rem; color: #092F48; line-height: 1.5; } /* SP レスポンシブ */ @media (max-width: 768px) { .news-block { flex-direction: column; } .news-block__left { flex-direction: row; min-width: auto; padding: 16px 20px; gap: 12px; border-bottom: none; } .news-block__left .news-block__icon svg { width: 40px; height: 40px; margin: 0; } .news-block__label { font-size: 1rem; } .news-block__right { border-left: none; padding: 0; } .news-block__row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; } .news-block__date { font-size: 0.8rem; min-width: auto; } .news-block__badge { font-size: 0.7rem; padding: 3px 12px; min-width: auto; } .news-block__title { width: 100%; font-size: 0.85rem; } } /* ============================================ 採用情報ページ テンプレート ============================================ */ /* SWELLデフォルトのタイトル・パンくずを非表示（カスタムヒーローに集約） */ .page-template-page-recruit .l-topTitleArea, .page-template-page-recruit .l-topTitleArea+.c-breadcrumb, .page-template-page-recruit>.p-breadcrumb { display: none !important; } /* ── ヒーローエリア ── */ .recruit-hero { position: relative; background: linear-gradient(135deg, #00406B 0%, #125B8C 40%, #1772AE 70%, #1C8DD9 100%); padding: 80px 40px 60px; text-align: center; overflow: hidden; } .recruit-hero::before { content: ""; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); pointer-events: none; } .recruit-hero::after { content: ""; position: absolute; bottom: -30%; left: -5%; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.05); pointer-events: none; } .recruit-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .recruit-hero__label { font-family: 'Poppins', 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; } .recruit-hero__title { font-size: 2.2rem !important; font-weight: 700; color: #fff !important; margin: 0 0 16px !important; background: none !important; padding: 0 !important; letter-spacing: 0.05em; } .recruit-hero__catch { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); line-height: 1.8; letter-spacing: 0.04em; } .recruit-hero__deco { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; pointer-events: none; } /* ── レイアウト（サイドバー＋メイン） ── */ .recruit-layout { display: flex; gap: 48px; padding-top: 48px; padding-bottom: 80px; align-items: flex-start; } /* ── サイドバー ── */ .recruit-sidebar { flex: 0 0 240px; position: sticky; top: 100px; } .recruit-sidebar__nav { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0, 50, 100, 0.06); overflow: hidden; border: 1px solid rgba(0, 100, 180, 0.08); } .recruit-sidebar__heading { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #125B8C, #1772AE); color: #fff; font-size: 0.9rem; font-weight: 700; padding: 16px 20px; margin: 0; letter-spacing: 0.04em; } .recruit-sidebar__heading svg { stroke: #fff; flex-shrink: 0; } .recruit-sidebar__list { list-style: none; margin: 0; padding: 8px 0; } .recruit-sidebar__item a { display: block; padding: 12px 20px; font-size: 0.85rem; color: #092F48; text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s ease; line-height: 1.5; } .recruit-sidebar__item a:hover { background: rgba(0, 120, 212, 0.04); color: #1772AE; border-left-color: #1772AE; } .recruit-sidebar__item.is-current a { background: rgba(0, 120, 212, 0.08); color: #125B8C; font-weight: 600; border-left-color: #1772AE; } /* お問い合わせカード */ .recruit-sidebar__card { margin-top: 20px; background: linear-gradient(135deg, #EEF4F9, #EEF4F9); border-radius: 12px; padding: 24px 20px; text-align: center; border: 1px solid rgba(0, 100, 180, 0.1); } .recruit-sidebar__card-title { font-size: 0.85rem; font-weight: 700; color: #125B8C; margin: 0 0 8px; } .recruit-sidebar__card-text { font-size: 0.75rem; color: #092F48; line-height: 1.7; margin: 0 0 16px; } .recruit-sidebar__card-btn { display: inline-block; background: linear-gradient(135deg, #1772AE, #1C8DD9); color: #fff !important; font-size: 0.8rem; font-weight: 600; padding: 10px 24px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 120, 212, 0.25); } .recruit-sidebar__card-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 120, 212, 0.35); } /* ── メインコンテンツ ── */ .recruit-main { flex: 1; min-width: 0; } /* 記事コンテンツ */ .recruit-content { background: #fff; border-radius: 16px; box-shadow: 0 2px 20px rgba(0, 50, 100, 0.05); padding: 48px 40px; border: 1px solid rgba(0, 100, 180, 0.06); } /* h2 見出し */ .recruit-content h2 { font-size: 1.5rem !important; font-weight: 700 !important; color: #00406B !important; background: none !important; padding: 0 0 12px !important; margin: 48px 0 24px !important; border-bottom: 2px solid #1772AE !important; position: relative; text-align: left !important; } .recruit-content h2:first-child { margin-top: 0 !important; } .recruit-content h2::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background: #1C8DD9; } /* h3 見出し */ .recruit-content h3 { font-size: 1.25rem !important; font-weight: 700 !important; color: #125B8C !important; background: none !important; padding: 12px 0 12px 16px !important; margin: 36px 0 20px !important; border-left: 4px solid #1772AE !important; border-bottom: none !important; } /* h4 見出し */ .recruit-content h4 { font-size: 1.05rem !important; font-weight: 700 !important; color: #092F48 !important; background: none !important; padding: 0 !important; margin: 28px 0 12px !important; } /* 募集要項テーブル */ .recruit-content table, .recruit-content .recruit-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.9rem; border-radius: 8px; overflow: hidden; border: 1px solid #EEF4F9; } .recruit-content table th, .recruit-content .recruit-table th, .recruit-content table td:first-child { background: linear-gradient(135deg, #EEF4F9, #EEF4F9) !important; color: #00406B !important; font-weight: 600; padding: 14px 20px; border: 1px solid #EEF4F9; width: 160px; vertical-align: top; font-size: 0.85rem; white-space: nowrap; } .recruit-content table td, .recruit-content .recruit-table td { padding: 14px 20px; border: 1px solid #EEF4F9; line-height: 1.8; color: #092F48; vertical-align: top; } .recruit-content table tr:hover td { background: rgba(0, 120, 212, 0.02); } /* 段落 */ .recruit-content p { line-height: 1.9; color: #092F48; margin-bottom: 1.2em; } /* ボタン */ .recruit-content .btn a, .recruit-content a.wp-block-button__link, .recruit-content .wp-block-buttons .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #1772AE, #1C8DD9) !important; color: #fff !important; padding: 14px 36px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 3px 12px rgba(0, 120, 212, 0.25); border: none !important; } .recruit-content .btn a:hover, .recruit-content a.wp-block-button__link:hover, .recruit-content .wp-block-buttons .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 120, 212, 0.35); } /* 求める人物像ボックス */ .recruit-content .recruit_box { background: linear-gradient(135deg, #EEF4F9, #EEF4F9); border: 1px solid rgba(0, 120, 212, 0.12); border-radius: 16px; padding: 36px 32px; margin: 32px 0; position: relative; } .recruit-content .recruit_box h2 { border-bottom: none !important; text-align: center !important; margin-bottom: 20px !important; } .recruit-content .recruit_box h2::after { display: none; } .recruit-content .recruit_catch { font-size: 1.2rem; font-weight: 600; color: #00406B; text-align: center; line-height: 2; } /* schema.org JSON-LD を非表示 */ .recruit-content>p:first-child { display: none; } /* ── 次のページナビ ── */ .recruit-next-page { margin-top: 48px; } .recruit-next-page__link { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid rgba(0, 100, 180, 0.1); border-radius: 12px; padding: 20px 28px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 50, 100, 0.04); } .recruit-next-page__link:hover { border-color: #1772AE; box-shadow: 0 4px 20px rgba(0, 120, 212, 0.12); transform: translateY(-2px); } .recruit-next-page__label { font-family: 'Poppins', 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #D0DEE8; display: block; margin-bottom: 4px; } .recruit-next-page__title { font-size: 1rem; font-weight: 600; color: #125B8C; } .recruit-next-page__arrow { color: #1772AE; transition: transform 0.3s ease; } .recruit-next-page__link:hover .recruit-next-page__arrow { transform: translateX(4px); } /* ── CTA（応募セクション） ── */ .recruit-cta { background: linear-gradient(135deg, #00406B 0%, #125B8C 40%, #1772AE 100%); padding: 60px 20px; text-align: center; position: relative; overflow: hidden; } .recruit-cta::before { content: ""; position: absolute; top: -60%; left: 60%; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.05); pointer-events: none; } .recruit-cta__inner { position: relative; z-index: 1; } .recruit-cta__title { font-family: 'Poppins', 'Inter', sans-serif; font-size: 2rem !important; font-weight: 700; color: #fff !important; margin: 0 0 4px !important; background: none !important; padding: 0 !important; letter-spacing: 0.05em; border: none !important; } .recruit-cta__sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; letter-spacing: 0.08em; } .recruit-cta__desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); line-height: 1.9; margin-bottom: 32px; } .recruit-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .recruit-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .recruit-cta__btn--primary { background: #fff; color: #125B8C !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .recruit-cta__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } .recruit-cta__btn--primary svg { stroke: #125B8C; } .recruit-cta__btn--secondary { background: rgba(255, 255, 255, 0.15); color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); } .recruit-cta__btn--secondary:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .recruit-cta__btn--contact { background: rgba(255, 255, 255, 0.15); color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); } .recruit-cta__btn--contact:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } /* ── レスポンシブ ── */ @media screen and (max-width: 959px) { .recruit-hero { padding: 60px 20px 40px; } .recruit-hero__title { font-size: 1.6rem !important; } .recruit-layout { flex-direction: column; gap: 24px; padding-top: 32px; padding-bottom: 48px; } .recruit-sidebar { flex: none; width: 100%; position: static; } .recruit-sidebar__card { display: none; } .recruit-content { padding: 32px 20px; } .recruit-content table th, .recruit-content table td:first-child { width: 100px; font-size: 0.8rem; } .recruit-cta__actions { flex-direction: column; align-items: center; } .recruit-cta__btn { width: 100%; max-width: 320px; justify-content: center; } } /* フッター ===================================================== */ .w-beforeFooter { margin-top: 0; } /* フッター背景: 明るいブルー */ .l-footer { background: linear-gradient(135deg, #125B8C 0%, #1772AE 50%, #1C8DD9 100%) !important; color: #fff; } .l-footer__foot { background: rgba(0, 0, 0, 0.15) !important; padding: 40px 0 32px; } .l-footer__foot .l-container { text-align: center; } /* ポリシーリンク（4項目均等・中央揃え） */ .l-footer__policy { display: flex !important; justify-content: center; list-style: none; margin: 0 0 24px; padding: 0; width: 100%; } .l-footer__policy li { flex: 1 1 0; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.3); } .l-footer__policy li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.3); } .l-footer__policy li a { display: block; color: rgba(255, 255, 255, 0.85) !important; font-size: 0.85rem; text-decoration: none; padding: 8px 16px; transition: opacity 0.2s; } .l-footer__policy li a:hover { opacity: 0.7; } /* SWELLフッターメニュー */ .l-footer__foot .l-footer__nav { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 16px; padding: 0; } .l-footer__foot .l-footer__nav li a { color: rgba(255, 255, 255, 0.75) !important; font-size: 0.8rem; text-decoration: none; transition: opacity 0.2s; } .l-footer__foot .l-footer__nav li a:hover { opacity: 0.7; } .l-footer__foot .copyright { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.95rem; font-weight: 500; margin: 0; letter-spacing: 0.02em; } /* サイトマップ4列レイアウト */ .footer-sitemap { display: grid; grid-template-columns: 220px 1fr 1fr 1fr; gap: 30px 40px; padding: 50px 0 40px; } /* 各列 */ .footer-sitemap__col { min-width: 0; } /* ロゴ */ .footer-logo { margin-bottom: 24px; } .footer-logo img { max-width: 180px; height: auto; } /* カテゴリ大見出し（抜型製作、製品ラインナップ等） */ .footer-category__heading { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 12px; padding-left: 12px; border-left: none; position: relative; } .footer-category__heading a { color: inherit; text-decoration: none; } .footer-category__heading a:hover { text-decoration: underline; opacity: 0.85; } .footer-category__heading::before { content: "－"; margin-right: 4px; } /* カテゴリ中見出し（用途別、種類別等） */ .footer-category { margin-bottom: 16px; } .footer-category__title { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 6px; padding-left: 8px; } .footer-category__title::before { content: "•"; margin-right: 6px; } .footer-category__title a { color: #fff; text-decoration: none; } .footer-category__title a:hover { opacity: 0.7; } /* サブリスト */ .footer-sub { list-style: none; padding: 0 0 0 20px; margin: 0 0 8px; } .footer-sub li { font-size: 0.75rem; color: rgba(255, 255, 255, 0.85); line-height: 2; } .footer-sub li a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .footer-sub li a:hover { color: #fff; opacity: 0.7; } /* 太字サブリスト */ .footer-sub--bold li { font-weight: 700; font-size: 0.85rem; } .footer-sub--bold li::before { content: "•"; margin-right: 6px; } /* 列1の基本リンク */ .footer-links { list-style: none; padding: 0; margin: 0 0 16px; } .footer-links li { font-size: 0.85rem; line-height: 2.2; position: relative; padding-left: 12px; } .footer-links li::before { content: "－"; position: absolute; left: 0; } .footer-links li a { color: #fff; text-decoration: none; } .footer-links li a:hover { opacity: 0.7; } .footer-links--bottom li { font-size: 0.85rem; } /* 列1の大創についてセクション */ .footer-sitemap__col--info .footer-category { margin-bottom: 20px; } .footer-sitemap__col--info .footer-category__title { font-size: 0.85rem; padding-left: 12px; } .footer-sitemap__col--info .footer-category__title::before { content: "－"; margin-right: 4px; } .footer-sitemap__col--info .footer-sub { padding-left: 28px; } .footer-sitemap__col--info .footer-sub li::before { content: "•"; margin-right: 6px; } /* 旧ウィジェットCSS上書き */ .l-footer .c-listMenu a { border-bottom: none !important; color: #fff !important; padding: 0.5rem 0.5rem 0.5rem 2rem; } /* メルマガ登録セクション */ .footer-magazine { padding: 30px 20px; text-align: center; background: linear-gradient(135deg, #125B8C 0%, #1772AE 50%, #1C8DD9 100%) !important; } .footer-magazine__inner { max-width: 600px; margin: 0 auto; } .footer-magazine__sns { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; } .footer-magazine__sns a { display: inline-flex; color: #fff; transition: opacity 0.3s; } .footer-magazine__sns a:hover { opacity: 0.7; } .footer-magazine__btn { display: inline-block; background: #fff; color: #00406B !important; font-size: 1.1rem; font-weight: 700; text-decoration: none !important; padding: 16px 50px; border-radius: 50px; margin-bottom: 12px; transition: opacity 0.3s; } .footer-magazine__btn:hover { opacity: 0.8; color: #00406B !important; } .footer-magazine__unsub { margin: 0; } .footer-magazine__unsub a { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-decoration: none; } .footer-magazine__unsub a:hover { color: #fff; } /* フッター end ===================================================== */ /* ====================================================== footer mobile fix ====================================================== */ @media (max-width: 1024px) { .footer-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 40px 0 32px; } .footer-sitemap__col--info { grid-column: 1 / -1; } .footer-logo { margin-bottom: 20px; } .footer-logo img { max-width: 160px; } .footer-category__heading { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .footer-sub { padding-left: 16px; } } @media (max-width: 767px) { .footer-sitemap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0 28px; } .footer-sitemap__col, .footer-sitemap__col--info { grid-column: auto; } .footer-category, .footer-links, .footer-sub, .footer-sub--bold { margin-bottom: 0; } .footer-sitemap__col { padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .footer-sitemap__col:last-child { padding-bottom: 0; border-bottom: none; } .footer-category { margin-bottom: 14px; } .footer-category__heading { font-size: 0.95rem; margin-bottom: 12px; padding-left: 0; padding-bottom: 8px; } .footer-category__title, .footer-links li, .footer-links--bottom li, .footer-sub--bold li { font-size: 0.82rem; } .footer-sub { padding-left: 14px; } .footer-sub li { font-size: 0.74rem; line-height: 1.8; } .footer-magazine { padding: 28px 16px 32px; } .footer-magazine__sns { gap: 16px; margin-bottom: 18px; } .footer-magazine__btn { display: block; width: 100%; max-width: 360px; margin: 0 auto 12px; padding: 14px 20px; font-size: 0.95rem; line-height: 1.5; } .l-footer__foot .l-container { padding-left: 16px; padding-right: 16px; } .l-footer__nav { display: flex; flex-direction: column; gap: 8px; } } @media (max-width: 479px) { .footer-sitemap { padding: 28px 0 24px; gap: 20px; } .footer-logo img { max-width: 140px; } .footer-category__heading { font-size: 0.9rem; } .footer-category__title, .footer-links li, .footer-links--bottom li, .footer-sub--bold li { font-size: 0.78rem; } .footer-sub li { font-size: 0.72rem; line-height: 1.75; } .footer-magazine__btn { font-size: 0.9rem; padding: 13px 18px; } .footer-magazine__unsub a { font-size: 0.75rem; line-height: 1.6; } } /* ====================================================== 製品詳細ページ (single-product) ====================================================== */ /* ===== SWELLタイトルエリア非表示（製品個別ページ） ===== */ .single-product .l-topTitleArea, .single-product #top_title_area, .single-product .c-mvArea, #body_wrap.single-product .l-topTitleArea, #body_wrap.single-product #top_title_area { display: none !important; } /* ===== コンテンツエリア ===== */ .pd-content { padding: 40px 0 60px; background: #fff; } /* ===== パンくず ===== */ .pd-crumbs { font-size: 0.8rem; margin-bottom: 24px; color: #6b8fa8; font-style: italic; } .pd-crumbs a { color: #6b8fa8; text-decoration: underline; } .pd-crumbs a:hover { color: #00406B; text-decoration: none; } .pd-crumbs__sep { margin: 0 6px; color: #9bb8cc; } /* ===== メイン：テキスト＋画像 2カラム ===== */ .pd-main { display: flex; gap: 48px; margin-bottom: 56px; align-items: flex-start; } .pd-main__text { flex: 1; min-width: 0; } .pd-main__images { flex: 0 0 460px; max-width: 460px; } /* タイトル */ .pd-main__title { font-size: 2.2rem; font-weight: 900; color: #092F48; margin: 0 0 24px; line-height: 1.35; border: none; background: none; padding: 0; } .pd-main__title::before, .pd-main__title::after { display: none !important; content: none !important; } /* 説明文 */ .pd-main__desc { font-size: 0.95rem; color: #333; line-height: 2; margin-bottom: 28px; } .pd-main__desc p { margin: 0 0 14px; } /* ボタンエリア（左カラム内） */ .pd-buttons { display: flex; gap: 16px; margin: 32px 0 0; flex-wrap: wrap; } .pd-btn { display: inline-block; background: #1B88D0; color: #fff !important; font-size: 0.92rem; font-weight: 700; padding: 16px 36px; border-radius: 4px; text-decoration: none !important; transition: background 0.2s, opacity 0.2s; letter-spacing: 0.02em; text-align: center; } .pd-btn:hover { opacity: 0.85; } .pd-btn--outline { background: #fff; color: #00406B !important; border: 2px solid #1B88D0; } .pd-btn--outline:hover { background: #EEF4F9; } /* メイン画像 */ .pd-main__img-main { margin: 0 0 12px; border-radius: 6px; overflow: hidden; } .pd-main__img-main img { width: 100%; height: auto; display: block; } /* サブ画像（3列） */ .pd-main__img-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pd-main__img-sub { margin: 0; border-radius: 4px; overflow: hidden; } .pd-main__img-sub img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; } /* ===== セクション共通 ===== */ .pd-section { margin-bottom: 48px; } .pd-section__title { font-size: 1.5rem; font-weight: 900; color: #092F48; margin: 0 0 20px; padding: 0; background: none !important; border: none !important; box-shadow: none !important; } .pd-section__title::before, .pd-section__title::after { display: none !important; content: none !important; } .pd-section__body { font-size: 0.93rem; color: #333; line-height: 1.9; } /* ===== FAQ ===== */ .pd-faq { margin-top: 56px; } .pd-faq__list { display: flex; flex-direction: column; gap: 12px; } .pd-faq__item { background: #EEF4F9; border-radius: 4px; overflow: hidden; border-left: 4px solid #1B88D0; } .pd-faq__question { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; font-size: 1rem; font-weight: 700; color: #092F48; cursor: pointer; list-style: none; } .pd-faq__question::-webkit-details-marker { display: none; } .pd-faq__q-text { flex: 1; } .pd-faq__icon { font-size: 1.5rem; font-weight: 400; color: #092F48; margin-left: 16px; flex-shrink: 0; transition: transform 0.2s; } .pd-faq__item[open] .pd-faq__icon { transform: rotate(45deg); } .pd-faq__answer { padding: 0 24px 20px; font-size: 0.9rem; color: #333; line-height: 1.9; } .pd-faq__answer p { margin: 0; } /* ===== 投稿本文エリア ===== */ .pd-post-content .post_content h2, .pd-post-content .post_content h3 { color: #092F48; font-weight: 900; border: none !important; background: none !important; padding: 0 !important; } .pd-post-content .post_content h2::before, .pd-post-content .post_content h2::after, .pd-post-content .post_content h3::before, .pd-post-content .post_content h3::after { display: none !important; content: none !important; } /* ===== SP レスポンシブ ===== */ @media (max-width: 768px) { .pd-content { padding: 24px 0 40px; } .pd-main { flex-direction: column; gap: 24px; } .pd-main__images { flex: auto; max-width: 100%; } .pd-main__title { font-size: 1.5rem; } .pd-buttons { flex-direction: column; } .pd-btn { width: 100%; } .pd-faq__question { padding: 14px 16px; font-size: 0.92rem; } .pd-sw-features__item { padding: 16px; } .pd-sw-features__num { width: 32px; height: 32px; font-size: 0.85rem; } .pd-mc-video__wrap { padding-bottom: 56.25%; } } /* ===== ソフトウェア専用: 特徴リスト ===== */ .pd-sw-features__list { display: flex; flex-direction: column; gap: 16px; } .pd-sw-features__item { display: flex; align-items: flex-start; gap: 20px; padding: 24px; background: #f4f8fb; border-radius: 8px; border-left: 4px solid #1B88D0; } .pd-sw-features__num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; background: #1B88D0; color: #fff; font-size: 1rem; font-weight: 900; border-radius: 50%; } .pd-sw-features__text { flex: 1; font-size: 0.95rem; color: #333; line-height: 1.8; } /* ===== ソフトウェア専用: 下部CTA ===== */ .pd-sw-cta { text-align: center; margin-top: 48px; } .pd-sw-cta__inner { background: linear-gradient(135deg, #e8f2fb 0%, #f0f6fa 100%); padding: 48px 32px; border-radius: 12px; } .pd-btn--cta { background: #e86c30; font-size: 1rem; } .pd-btn--cta:hover { background: #d45a20; } .pd-btn--lg { padding: 20px 48px; font-size: 1.1rem; } /* ===== 機械専用: 動画セクション ===== */ .pd-mc-video__wrap { position: relative; width: 100%; max-width: 800px; padding-bottom: 45%; border-radius: 8px; overflow: hidden; background: #000; } .pd-mc-video__wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ===== テンプレートタイプ別の微調整 ===== */ .pd-type-software .pd-main__title { color: #1B88D0; } .pd-type-machine .pd-main__title { color: #092F48; } /* ========================================================================== テーブルデザイン（固定ページ共通 — スタイリッシュ青系） ========================================================================== */ /* ── テーブル全体 ── */ #body_wrap.page .post_content table { width: 100% !important; max-width: 100%; border-collapse: separate; border-spacing: 0; border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 60, 120, 0.08), 0 1px 3px rgba(0, 60, 120, 0.06); margin: 2em auto; font-size: 0.95rem; line-height: 1.7; } /* ── ヘッダーセル（TH） ── */ #body_wrap.page .post_content table th { background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); color: #fff; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; padding: 16px 24px; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: left; vertical-align: top; white-space: normal; width: 240px; min-width: 200px; position: relative; } /* TH 右側のアクセントライン */ #body_wrap.page .post_content table th::after { content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 2px; background: linear-gradient(180deg, transparent, rgba(0, 170, 255, 0.5), transparent); } /* ── データセル（TD） ── */ #body_wrap.page .post_content table td { background: #fff; color: #092F48; padding: 16px 24px; border: none; border-bottom: 1px solid #EEF4F9; vertical-align: top; line-height: 1.8; } /* ── 偶数行のストライプ ── */ #body_wrap.page .post_content table tr:nth-child(even) td { background: #EEF4F9; } /* ── ホバーエフェクト ── */ #body_wrap.page .post_content table tr:hover td { background: #EEF4F9; transition: background 0.25s ease; } #body_wrap.page .post_content table tr:hover th { background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); transition: background 0.25s ease; } /* ── 最初の行の角丸 ── */ #body_wrap.page .post_content table tr:first-child th { border-radius: 12px 0 0 0; } #body_wrap.page .post_content table tr:first-child td:last-child { border-radius: 0 12px 0 0; } /* ── 最後の行の角丸 ── */ #body_wrap.page .post_content table tr:last-child th { border-radius: 0 0 0 12px; border-bottom: none; } #body_wrap.page .post_content table tr:last-child td { border-bottom: none; } #body_wrap.page .post_content table tr:last-child td:last-child { border-radius: 0 0 12px 0; } /* ── テーブル内リンク ── */ #body_wrap.page .post_content table td a { color: #1772AE; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } #body_wrap.page .post_content table td a:hover { color: #125B8C; border-bottom-color: #125B8C; } /* ── SP レスポンシブ ── */ @media (max-width: 599px) { #body_wrap.page .post_content table { display: block; border-radius: 10px; font-size: 0.88rem; } #body_wrap.page .post_content table thead { display: none; } #body_wrap.page .post_content table, #body_wrap.page .post_content table tbody, #body_wrap.page .post_content table tr, #body_wrap.page .post_content table th, #body_wrap.page .post_content table td { display: block; width: 100% !important; } #body_wrap.page .post_content table tr { margin-bottom: 0; border-bottom: 2px solid #D0DEE8; } #body_wrap.page .post_content table tr:last-child { border-bottom: none; } #body_wrap.page .post_content table th { width: 100% !important; min-width: 0; border-radius: 0 !important; padding: 12px 16px 8px; font-size: 0.82rem; } #body_wrap.page .post_content table th::after { display: none; } #body_wrap.page .post_content table td { padding: 8px 16px 14px; border-bottom: none; } #body_wrap.page .post_content table tr:first-child th { border-radius: 10px 10px 0 0 !important; } #body_wrap.page .post_content table tr:last-child td:last-child { border-radius: 0 0 10px 10px !important; } } /* ========================================================================== ページネーション — スタイリッシュデザイン ========================================================================== */ /* ── コンテナ ── */ .c-pagination { display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 40px 0 20px; } /* ── 共通ボタンスタイル ── */ .c-pagination .page-numbers { display: inline-flex !important; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 14px; border-radius: 12px !important; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; position: relative; overflow: hidden; background: #fff !important; color: #092F48 !important; border: 2px solid #D0DEE8 !important; box-shadow: 0 2px 8px rgba(0, 40, 90, 0.06); } /* ── ホバー ── */ .c-pagination a.page-numbers:hover { background: linear-gradient(135deg, #092F48, #1772AE) !important; color: #fff !important; border-color: #092F48 !important; box-shadow: 0 6px 20px rgba(10, 42, 94, 0.3) !important; transform: translateY(-2px); } /* ── ホバー時のシャインエフェクト ── */ .c-pagination a.page-numbers::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .c-pagination a.page-numbers:hover::before { left: 100%; } /* ── 現在のページ（アクティブ） ── */ .c-pagination .page-numbers.current { background: linear-gradient(135deg, #092F48 0%, #125B8C 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 16px rgba(10, 42, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; cursor: default; } /* ── ドット省略 ── */ .c-pagination .c-pagination__dot { min-width: auto; height: auto; padding: 0 4px; background: transparent !important; border: none !important; box-shadow: none !important; color: #D0DEE8 !important; font-size: 1.1rem; letter-spacing: 0.15em; } /* ── 前へ・次へ矢印ボタン ── */ .c-pagination .page-numbers.prev, .c-pagination .page-numbers.next { min-width: 48px; font-size: 1.1rem; } /* ── SP レスポンシブ ── */ @media (max-width: 599px) { .c-pagination { gap: 6px; padding: 30px 0 16px; } .c-pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px !important; font-size: 0.85rem; } } /* ========================================================================== お問い合わせページ（page-inquiry.php） ========================================================================== */ /* SWELL デフォルトタイトル非表示 */ .page-template-page-inquiry .l-topTitleArea, .page-template-page-inquiry .l-topTitleArea+.c-breadcrumb, .page-template-page-inquiry>.p-breadcrumb { display: none !important; } /* ── ヒーローエリア ── */ .inquiry-hero { background: linear-gradient(135deg, #092F48 0%, #125B8C 50%, #1772AE 100%); padding: 64px 20px 80px; text-align: center; position: relative; overflow: hidden; } .inquiry-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(0, 170, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 120, 200, 0.08) 0%, transparent 50%); pointer-events: none; } .inquiry-hero__inner { position: relative; z-index: 1; } .inquiry-hero__label { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 4px 20px; margin-bottom: 16px; } .inquiry-hero__title { font-size: 2rem; font-weight: 700; color: #fff; margin: 16px 0 12px; letter-spacing: 0.08em; } .inquiry-hero__sub { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin: 0; } .inquiry-hero__deco { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; } /* ── ボディ ── */ .inquiry-body { max-width: 860px; margin: 0 auto; padding: 48px 20px 80px; } /* ── 電話セクション ── */ .inquiry-tel { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 16px; padding: 28px 36px; box-shadow: 0 4px 24px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; margin-bottom: 48px; } .inquiry-tel__icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #092F48, #1772AE); border-radius: 14px; color: #fff; } .inquiry-tel__heading { font-size: 0.85rem; font-weight: 600; color: #092F48; margin: 0 0 4px; } .inquiry-tel__number { font-family: "Montserrat", sans-serif; font-size: 1.6rem; font-weight: 700; color: #092F48; text-decoration: none; letter-spacing: 0.04em; } .inquiry-tel__number:hover { color: #1772AE; } .inquiry-tel__note { font-size: 0.8rem; color: #D0DEE8; margin-left: 8px; } /* ── フォームセクション ── */ .inquiry-form-section { background: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 4px 24px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; } .inquiry-form__heading { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; color: #092F48; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 2px solid #EEF4F9; } .inquiry-form__heading svg { color: #1772AE; flex-shrink: 0; } /* 注意書き */ .inquiry-form__notes { background: #EEF4F9; border-radius: 10px; padding: 20px 24px; margin-bottom: 28px; } .inquiry-form__notes ul { list-style: none; padding: 0; margin: 0; } .inquiry-form__notes li { font-size: 0.82rem; color: #092F48; line-height: 1.8; padding-left: 1.2em; text-indent: -1.2em; margin-bottom: 4px; } .inquiry-form__notes li::before { content: "※"; color: #1772AE; margin-right: 4px; } .inquiry-form__notes a { color: #1772AE; text-decoration: underline; } /* ── ステップ表示 ── */ .inquiry-steps { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 28px; } .inquiry-steps__item { display: flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 30px; background: #EEF4F9; color: #D0DEE8; font-size: 0.85rem; font-weight: 600; } .inquiry-steps__item.is-active { background: linear-gradient(135deg, #092F48, #125B8C); color: #fff; box-shadow: 0 4px 12px rgba(10, 42, 94, 0.25); } .inquiry-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 0.78rem; font-weight: 700; } .inquiry-steps__item.is-active .inquiry-steps__num { background: rgba(255, 255, 255, 0.25); } .inquiry-steps__arrow { width: 24px; height: 2px; background: #D0DEE8; position: relative; } .inquiry-steps__arrow::after { content: ""; position: absolute; right: 0; top: -3px; border: solid #D0DEE8; border-width: 0 2px 2px 0; padding: 3px; transform: rotate(-45deg); } /* 必須注記 */ .inquiry-form__required-note { font-size: 0.82rem; color: #D0DEE8; margin-bottom: 24px; text-align: right; } .inquiry-asterisk { color: #e05050; font-weight: 700; margin-left: 4px; } /* ── テーブル ── */ .inquiry-table { width: 100%; border-collapse: separate; border-spacing: 0; border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 40, 90, 0.05); } .inquiry-table th { background: linear-gradient(135deg, #1772AE 0%, #1C8DD9 100%); color: #fff; font-weight: 600; font-size: 0.88rem; padding: 18px 24px; text-align: left; vertical-align: middle; width: 200px; min-width: 160px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; } .inquiry-table td { background: #fff; padding: 14px 24px; border-bottom: 1px solid #EEF4F9; vertical-align: middle; } .inquiry-table tr:nth-child(even) td { background: #EEF4F9; } .inquiry-table tr:last-child th, .inquiry-table tr:last-child td { border-bottom: none; } /* ── フォーム部品 ── */ .inquiry-table input[type="text"], .inquiry-table input[type="tel"], .inquiry-table input[type="email"], .inquiry-table select, .inquiry-table textarea { width: 100%; padding: 12px 16px; border: 2px solid #D0DEE8; border-radius: 8px; font-size: 0.92rem; color: #092F48; background: #fff; transition: border-color 0.25s ease, box-shadow 0.25s ease; box-sizing: border-box; font-family: inherit; } .inquiry-table input:focus, .inquiry-table select:focus, .inquiry-table textarea:focus { outline: none; border-color: #1772AE; box-shadow: 0 0 0 3px rgba(26, 107, 181, 0.12); } .inquiry-table input::placeholder, .inquiry-table textarea::placeholder { color: #D0DEE8; } .inquiry-table textarea { resize: vertical; min-height: 120px; } .inquiry-table select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9bb5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* エラー状態 */ .inquiry-table .is-error { border-color: #e05050 !important; box-shadow: 0 0 0 3px rgba(224, 80, 80, 0.1) !important; } /* ── 同意チェックボックス ── */ .inquiry-form__agree { text-align: center; margin: 32px 0 24px; } .inquiry-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: #092F48; } .inquiry-checkbox input[type="checkbox"] { display: none; } .inquiry-checkbox__mark { display: inline-block; width: 22px; height: 22px; border: 2px solid #D0DEE8; border-radius: 6px; position: relative; transition: all 0.25s ease; flex-shrink: 0; } .inquiry-checkbox input:checked+.inquiry-checkbox__mark { background: linear-gradient(135deg, #092F48, #1772AE); border-color: #092F48; } .inquiry-checkbox input:checked+.inquiry-checkbox__mark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .inquiry-checkbox a { color: #1772AE; text-decoration: underline; } /* ── 送信ボタン ── */ .inquiry-form__submit { text-align: center; } .inquiry-submit-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 56px; background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(10, 42, 94, 0.3); } .inquiry-submit-btn:hover:not(:disabled) { background: linear-gradient(135deg, #092F48 0%, #1772AE 100%); box-shadow: 0 8px 28px rgba(10, 42, 94, 0.4); transform: translateY(-2px); } .inquiry-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .inquiry-submit-btn svg { transition: transform 0.3s ease; } .inquiry-submit-btn:hover:not(:disabled) svg { transform: translateX(4px) translateY(-2px); } /* ── SP レスポンシブ ── */ @media (max-width: 599px) { .inquiry-hero { padding: 40px 16px 60px; } .inquiry-hero__title { font-size: 1.5rem; } .inquiry-body { padding: 32px 12px 60px; } .inquiry-tel { flex-direction: column; text-align: center; padding: 24px 20px; } .inquiry-form-section { padding: 24px 16px; } .inquiry-steps { gap: 10px; } .inquiry-steps__item { padding: 8px 16px; font-size: 0.78rem; } .inquiry-table, .inquiry-table tbody, .inquiry-table tr, .inquiry-table th, .inquiry-table td { display: block; width: 100% !important; } .inquiry-table th { border-radius: 0 !important; padding: 12px 16px 8px; font-size: 0.82rem; } .inquiry-table td { padding: 8px 16px 16px; border-bottom: none; } .inquiry-table tr { border-bottom: 2px solid #EEF4F9; } .inquiry-table tr:last-child { border-bottom: none; } .inquiry-submit-btn { width: 100%; justify-content: center; padding: 16px 24px; } } /* SWELL デフォルトタイトル非表示（サンクスページ） */ .page-template-page-inquiry-thankyou .l-topTitleArea, .page-template-page-inquiry-thankyou .l-topTitleArea+.c-breadcrumb, .page-template-page-inquiry-thankyou>.p-breadcrumb { display: none !important; } /* ── ステップ完了状態 ── */ .inquiry-steps__item--done { background: #D0DEE8; color: #125B8C; } /* ── サンクスカード ── */ .thankyou-card { background: #fff; border-radius: 16px; padding: 56px 40px; box-shadow: 0 4px 24px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; text-align: center; max-width: 700px; margin: 0 auto; } .thankyou-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, #28a745 0%, #34d058 100%); color: #fff; margin-bottom: 28px; box-shadow: 0 6px 20px rgba(40, 167, 69, 0.25); } .thankyou-card__title { font-size: 1.35rem; font-weight: 700; color: #092F48; line-height: 1.8; margin: 0 0 20px; } .thankyou-card__desc { font-size: 0.92rem; color: #092F48; line-height: 1.9; margin: 0 0 24px; } .thankyou-card__notice { background: #EEF4F9; border-radius: 10px; padding: 16px 24px; margin-bottom: 24px; } .thankyou-card__notice p { font-size: 0.85rem; color: #092F48; line-height: 1.8; margin: 0; } /* 電話番号 */ .thankyou-card__tel { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 36px; } .thankyou-card__tel-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #092F48, #1772AE); color: #fff; flex-shrink: 0; } .thankyou-card__tel-number { font-family: "Montserrat", sans-serif; font-size: 1.5rem; font-weight: 700; color: #092F48; text-decoration: none; letter-spacing: 0.04em; } .thankyou-card__tel-number:hover { color: #1772AE; } .thankyou-card__tel-note { font-size: 0.8rem; color: #D0DEE8; } /* ボタン */ .thankyou-card__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .thankyou-card__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .thankyou-card__btn--home { background: linear-gradient(135deg, #092F48, #125B8C); color: #fff; box-shadow: 0 4px 16px rgba(10, 42, 94, 0.25); } .thankyou-card__btn--home:hover { background: linear-gradient(135deg, #092F48, #1772AE); box-shadow: 0 6px 24px rgba(10, 42, 94, 0.35); transform: translateY(-2px); color: #fff; } .thankyou-card__btn--back { background: #fff; color: #092F48; border: 2px solid #D0DEE8; } .thankyou-card__btn--back:hover { background: #EEF4F9; border-color: #092F48; color: #092F48; } /* ── SP レスポンシブ ── */ @media (max-width: 599px) { .thankyou-card { padding: 40px 20px; } .thankyou-card__icon { width: 72px; height: 72px; } .thankyou-card__icon svg { width: 36px; height: 36px; } .thankyou-card__title { font-size: 1.1rem; } .thankyou-card__tel { flex-direction: column; gap: 8px; } .thankyou-card__tel-number { font-size: 1.3rem; } .thankyou-card__actions { flex-direction: column; } .thankyou-card__btn { width: 100%; justify-content: center; } } /* ========================================================================== メールマガジン登録ページ（page-magazine.php） ========================================================================== */ /* SWELL デフォルトタイトル非表示 */ .page-template-page-magazine .l-topTitleArea, .page-template-page-magazine .l-topTitleArea+.c-breadcrumb, .page-template-page-magazine>.p-breadcrumb { display: none !important; } /* ── ヒーロー（inquiry と共通構造、色味を変えてアクセント） ── */ .magazine-hero { background: linear-gradient(135deg, #092F48 0%, #125B8C 50%, #1772AE 100%); padding: 64px 20px 80px; text-align: center; position: relative; overflow: hidden; } .magazine-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 40%, rgba(0, 170, 255, 0.12) 0%, transparent 50%), radial-gradient(circle at 75% 60%, rgba(0, 200, 255, 0.08) 0%, transparent 50%); pointer-events: none; } .magazine-hero__inner { position: relative; z-index: 1; } .magazine-hero__label { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 4px 20px; margin-bottom: 16px; } .magazine-hero__title { font-size: 2rem; font-weight: 700; color: #fff; margin: 16px 0 12px; letter-spacing: 0.08em; } .magazine-hero__sub { font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); margin: 0; } .magazine-hero__deco { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; } /* ── ボディ ── */ .magazine-body { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; } /* ── 説明カード ── */ .magazine-intro { display: flex; align-items: flex-start; gap: 20px; background: #fff; border-radius: 16px; padding: 28px 36px; box-shadow: 0 4px 24px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; margin-bottom: 40px; } .magazine-intro__icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #092F48, #1772AE); border-radius: 14px; color: #fff; } .magazine-intro__content p { font-size: 0.9rem; color: #092F48; line-height: 1.9; margin: 0 0 8px; } .magazine-intro__note { font-size: 0.82rem !important; color: #D0DEE8 !important; padding: 10px 14px; background: #EEF4F9; border-radius: 8px; margin-top: 8px !important; } /* ── フォームセクション ── */ .magazine-form-section { background: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 4px 24px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; } .magazine-form__heading { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; color: #092F48; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 2px solid #EEF4F9; } .magazine-form__heading svg { color: #1772AE; flex-shrink: 0; } .magazine-form__required-note { font-size: 0.82rem; color: #D0DEE8; margin-bottom: 24px; text-align: right; } .magazine-asterisk { color: #e05050; font-weight: 700; margin-left: 4px; } /* ── テーブル ── */ .magazine-table { width: 100%; border-collapse: separate; border-spacing: 0; border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 40, 90, 0.05); } .magazine-table th { background: linear-gradient(135deg, #1772AE 0%, #1C8DD9 100%); color: #fff; font-weight: 600; font-size: 0.88rem; padding: 18px 24px; text-align: left; vertical-align: middle; width: 180px; min-width: 140px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); white-space: nowrap; } .magazine-table td { background: #fff; padding: 14px 24px; border-bottom: 1px solid #EEF4F9; vertical-align: middle; } .magazine-table tr:nth-child(even) td { background: #EEF4F9; } .magazine-table tr:last-child th, .magazine-table tr:last-child td { border-bottom: none; } /* フィールド説明テキスト */ .magazine-field-desc { display: block; font-size: 0.78rem; color: #D0DEE8; margin-top: 6px; } /* ── フォーム部品 ── */ .magazine-table input[type="text"], .magazine-table input[type="email"], .magazine-table select { width: 100%; padding: 12px 16px; border: 2px solid #D0DEE8; border-radius: 8px; font-size: 0.92rem; color: #092F48; background: #fff; transition: border-color 0.25s ease, box-shadow 0.25s ease; box-sizing: border-box; font-family: inherit; } .magazine-table input:focus, .magazine-table select:focus { outline: none; border-color: #1772AE; box-shadow: 0 0 0 3px rgba(26, 107, 181, 0.12); } .magazine-table input::placeholder { color: #D0DEE8; } .magazine-table select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9bb5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .magazine-table .is-error { border-color: #e05050 !important; box-shadow: 0 0 0 3px rgba(224, 80, 80, 0.1) !important; } /* ── 同意チェックボックス ── */ .magazine-form__agree { text-align: center; margin: 32px 0 24px; } .magazine-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: #092F48; } .magazine-checkbox input[type="checkbox"] { display: none; } .magazine-checkbox__mark { display: inline-block; width: 22px; height: 22px; border: 2px solid #D0DEE8; border-radius: 6px; position: relative; transition: all 0.25s ease; flex-shrink: 0; } .magazine-checkbox input:checked+.magazine-checkbox__mark { background: linear-gradient(135deg, #092F48, #1772AE); border-color: #092F48; } .magazine-checkbox input:checked+.magazine-checkbox__mark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .magazine-checkbox a { color: #1772AE; text-decoration: underline; } /* ── 送信ボタン ── */ .magazine-form__submit { text-align: center; } .magazine-submit-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 48px; background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); color: #fff; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.06em; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(10, 42, 94, 0.3); } .magazine-submit-btn:hover:not(:disabled) { background: linear-gradient(135deg, #092F48 0%, #1772AE 100%); box-shadow: 0 8px 28px rgba(10, 42, 94, 0.4); transform: translateY(-2px); } .magazine-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .magazine-submit-btn svg { transition: transform 0.3s ease; } .magazine-submit-btn:hover:not(:disabled) svg { transform: translateX(4px) translateY(-2px); } /* ── SP レスポンシブ ── */ @media (max-width: 599px) { .magazine-hero { padding: 40px 16px 60px; } .magazine-hero__title { font-size: 1.5rem; } .magazine-body { padding: 32px 12px 60px; } .magazine-intro { flex-direction: column; text-align: center; padding: 24px 20px; align-items: center; } .magazine-form-section { padding: 24px 16px; } .magazine-table, .magazine-table tbody, .magazine-table tr, .magazine-table th, .magazine-table td { display: block; width: 100% !important; } .magazine-table th { border-radius: 0 !important; padding: 12px 16px 8px; font-size: 0.82rem; } .magazine-table td { padding: 8px 16px 16px; border-bottom: none; } .magazine-table tr { border-bottom: 2px solid #EEF4F9; } .magazine-table tr:last-child { border-bottom: none; } .magazine-submit-btn { width: 100%; justify-content: center; padding: 16px 24px; } } /* ========================================================================== 資料ダウンロードページ（page-whitepaper.php） ========================================================================== */ /* SWELL デフォルトタイトル非表示 */ .page-template-page-whitepaper .l-topTitleArea, .page-template-page-whitepaper .l-topTitleArea+.c-breadcrumb, .page-template-page-whitepaper>.p-breadcrumb { display: none !important; } /* ── ヒーロー ── */ .wp-hero { background: linear-gradient(135deg, #092F48 0%, #125B8C 50%, #1772AE 100%); padding: 64px 20px 80px; text-align: center; position: relative; overflow: hidden; } .wp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 35%, rgba(0, 170, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 65%, rgba(0, 120, 200, 0.08) 0%, transparent 50%); pointer-events: none; } .wp-hero__inner { position: relative; z-index: 1; } .wp-hero__label { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 4px 20px; margin-bottom: 16px; } .wp-hero__title { font-size: 2rem; font-weight: 700; color: #fff; margin: 16px 0 12px; letter-spacing: 0.08em; } .wp-hero__sub { font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); margin: 0; } .wp-hero__deco { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; } /* ── ボディ ── */ .wp-body { max-width: 1080px; margin: 0 auto; padding: 48px 20px 80px; } /* ── カードグリッド ── */ .wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 56px; } /* ── 各カード ── */ .wp-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .wp-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 40, 90, 0.12); } /* サムネイル */ .wp-card__thumb { position: relative; background: #EEF4F9; display: flex; align-items: center; justify-content: center; padding: 24px 20px; min-height: 200px; } .wp-card__thumb img { max-width: 140px; max-height: 180px; width: auto; height: auto; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); border-radius: 4px; transition: transform 0.3s ease; } .wp-card:hover .wp-card__thumb img { transform: scale(1.03); } .wp-card__pages { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #092F48, #125B8C); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.04em; } /* ボディ部分 */ .wp-card__body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; } .wp-card__title { font-size: 0.95rem; font-weight: 700; color: #092F48; line-height: 1.6; margin: 0 0 10px; } .wp-card__desc { font-size: 0.82rem; color: #092F48; line-height: 1.8; margin: 0 0 16px; flex: 1; } /* ダウンロードボタン */ .wp-card__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, #092F48, #125B8C); color: #fff; font-size: 0.85rem; font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; align-self: flex-start; } .wp-card__btn:hover { background: linear-gradient(135deg, #092F48, #1772AE); box-shadow: 0 4px 12px rgba(10, 42, 94, 0.3); color: #fff; } .wp-card__btn svg { transition: transform 0.3s ease; } .wp-card__btn:hover svg { transform: translateY(2px); } /* ── CTAセクション ── */ .wp-cta { background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); border-radius: 16px; padding: 48px 40px; text-align: center; position: relative; overflow: hidden; } .wp-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 170, 255, 0.08) 0%, transparent 60%); pointer-events: none; } .wp-cta__inner { position: relative; z-index: 1; } .wp-cta__title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 12px; } .wp-cta__desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin: 0 0 28px; } .wp-cta__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .wp-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .wp-cta__btn--primary { background: #fff; color: #092F48; } .wp-cta__btn--primary:hover { background: #EEF4F9; color: #092F48; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .wp-cta__btn--secondary { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); } .wp-cta__btn--secondary:hover { border-color: #fff; color: #fff; transform: translateY(-2px); } /* ── SP レスポンシブ ── */ @media (max-width: 959px) { .wp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 599px) { .wp-hero { padding: 40px 16px 60px; } .wp-hero__title { font-size: 1.5rem; } .wp-body { padding: 32px 12px 60px; } .wp-grid { grid-template-columns: 1fr; gap: 20px; } .wp-card__thumb { min-height: 160px; padding: 20px 16px; } .wp-cta { padding: 36px 20px; } .wp-cta__title { font-size: 1.1rem; } .wp-cta__actions { flex-direction: column; } .wp-cta__btn { width: 100%; justify-content: center; } } /* ========================================================================== 課題解決 — 一覧ページ (archive-problem-solution.php) ========================================================================== */ /* SWELL デフォルトタイトル非表示 */ .post-type-archive-problem-solution .l-topTitleArea, .post-type-archive-problem-solution .l-topTitleArea+.c-breadcrumb { display: none !important; } /* ── ヒーロー ── */ .ps-hero { background: linear-gradient(135deg, #092F48 0%, #125B8C 50%, #1772AE 100%); padding: 64px 20px 80px; text-align: center; position: relative; overflow: hidden; } .ps-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 35%, rgba(0, 170, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 65%, rgba(0, 120, 200, 0.08) 0%, transparent 50%); pointer-events: none; } .ps-hero__inner { position: relative; z-index: 1; } .ps-hero__label { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 4px 20px; margin-bottom: 16px; } .ps-hero__title { font-size: 2rem; font-weight: 700; color: #fff; margin: 16px 0 12px; letter-spacing: 0.08em; } .ps-hero__sub { font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); margin: 0; } .ps-hero__deco { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; } /* ── ボディ ── */ .ps-body { max-width: 1100px; margin: 0 auto; padding: 48px 20px 80px; } /* ── カードグリッド ── */ .ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; } /* ── カード ── */ .ps-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 40, 90, 0.07); border: 1px solid #EEF4F9; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ps-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 40, 90, 0.13); } .ps-card__thumb { position: relative; height: 180px; overflow: hidden; background: #EEF4F9; } .ps-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ps-card:hover .ps-card__img { transform: scale(1.05); } .ps-card__no-img { display: flex; align-items: center; justify-content: center; height: 100%; color: #D0DEE8; } .ps-card__body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; } .ps-card__title { font-size: 0.95rem; font-weight: 700; color: #092F48; line-height: 1.6; margin: 0 0 8px; } .ps-card__excerpt { font-size: 0.82rem; color: #092F48; line-height: 1.7; margin: 0 0 auto; padding-bottom: 12px; } .ps-card__more { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: #1772AE; margin-top: auto; transition: gap 0.3s ease; } .ps-card:hover .ps-card__more { gap: 8px; } /* 空メッセージ */ .ps-empty { text-align: center; color: #D0DEE8; font-size: 0.95rem; grid-column: 1 / -1; padding: 60px 0; } /* ── CTA ── */ .ps-cta { background: linear-gradient(135deg, #092F48 0%, #125B8C 100%); border-radius: 16px; padding: 48px 40px; text-align: center; position: relative; overflow: hidden; } .ps-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 170, 255, 0.08) 0%, transparent 60%); pointer-events: none; } .ps-cta__inner { position: relative; z-index: 1; } .ps-cta__title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 12px; } .ps-cta__desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin: 0 0 28px; } .ps-cta__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .ps-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .ps-cta__btn--primary { background: #fff; color: #092F48; } .ps-cta__btn--primary:hover { background: #EEF4F9; color: #092F48; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .ps-cta__btn--secondary { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); } .ps-cta__btn--secondary:hover { border-color: #fff; color: #fff; transform: translateY(-2px); } /* ── SP ── */ @media (max-width: 959px) { .ps-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 599px) { .ps-hero { padding: 40px 16px 60px; } .ps-hero__title { font-size: 1.5rem; } .ps-body { padding: 32px 12px 60px; } .ps-grid { grid-template-columns: 1fr; gap: 18px; } .ps-card__thumb { height: 160px; } .ps-cta { padding: 36px 20px; } .ps-cta__actions { flex-direction: column; } .ps-cta__btn { width: 100%; justify-content: center; } } /* ========================================================================== 課題解決 — 詳細ページ (single-problem-solution.php) ========================================================================== */ /* SWELL デフォルトタイトル・パンくず非表示 */ .single-problem-solution .l-topTitleArea, .single-problem-solution .l-topTitleArea+.c-breadcrumb, .single-problem-solution .p-breadcrumb, .single-problem-solution .c-breadcrumb { display: none !important; } /* ── ヒーロー ── */ .ps-single-hero { background: linear-gradient(135deg, #125B8C 0%, #1772AE 40%, #1B88D0 100%); padding: 60px 20px 76px; text-align: center; position: relative; overflow: hidden; } .ps-single-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 85% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); pointer-events: none; } /* 悩みイラスト（人物シルエット） */ .ps-single-hero::after { content: ""; position: absolute; right: 2%; bottom: 60px; width: 440px; height: 220px; opacity: 0.12; pointer-events: none; background-image: url("images/thinking-people.svg"); background-repeat: no-repeat; background-size: contain; background-position: center bottom; } .ps-single-hero__inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; text-align: center; } .ps-single-hero__label { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 20px; padding: 5px 20px; margin-bottom: 16px; backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.08); } .ps-single-hero__title { font-size: 1.8rem; font-weight: 800; color: #fff !important; background: transparent !important; margin: 16px auto 12px; letter-spacing: 0.06em; line-height: 1.55; text-align: center !important; text-shadow: 0 2px 8px rgba(0, 40, 100, 0.25); } .ps-single-hero__title p, .ps-single-hero__title span, .ps-single-hero__title strong, .ps-single-hero__title em, .ps-single-hero__title a { color: #fff !important; background: transparent !important; } .ps-single-hero__sub { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); margin: 0; } .ps-single-hero__deco { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; z-index: 1; } /* ── 悩み＋解決策 統合カード ── */ .ps-story-card { max-width: 1100px; margin: 0 auto; padding: 28px 20px 0; } .ps-story-card__inner { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(21, 101, 192, 0.08); overflow: hidden; } /* 悩みパート */ .ps-story-card__problem { padding: 32px 36px 24px; border-bottom: 1px solid #EEF4F9; } .ps-story-card__problem-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: #125B8C; background: linear-gradient(135deg, #EEF4F9 0%, #EEF4F9 100%); padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; } .ps-story-card__problem-label svg { flex-shrink: 0; } .ps-story-card__problem-body { font-size: 0.95rem; line-height: 1.9; color: #092F48; } .ps-story-card__problem-body p:last-child { font-weight: 700; color: #125B8C; margin-bottom: 0; font-size: 1rem; } /* 解決策パート */ .ps-story-card__solution { padding: 24px 36px 28px; background: linear-gradient(135deg, #125B8C 0%, #1772AE 100%); position: relative; } .ps-story-card__solution::before { content: ""; position: absolute; top: 0; left: 36px; right: 36px; height: 1px; background: rgba(255, 255, 255, 0.15); } .ps-story-card__solution-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.15); padding: 5px 14px; border-radius: 20px; margin-bottom: 14px; } .ps-story-card__solution-label svg { flex-shrink: 0; } .ps-story-card__solution-title, .ps-story-card__solution h2 { font-size: 1.2rem !important; font-weight: 800 !important; color: #fff !important; background: transparent !important; background-color: transparent !important; line-height: 1.7; margin: 0 !important; border: none !important; border-bottom: none !important; padding: 0 !important; letter-spacing: 0.03em; } .ps-story-card__solution *, .ps-story-card__solution-title *, .ps-story-card__solution h2 *, .ps-story-card__solution-title span, .ps-story-card__solution-title strong, .ps-story-card__solution-title em, .ps-story-card__solution-title u, .ps-story-card__solution-title a, .ps-story-card__solution-title p, .ps-story-card__solution-title .txt_red, .ps-story-card__solution-title .txt_blue { color: #fff !important; background: transparent !important; background-color: transparent !important; } .ps-story-card__solution-title u { text-decoration-color: #ffd54f; text-underline-offset: 4px; } @media (max-width: 599px) { .ps-story-card__problem { padding: 24px 20px 18px; } .ps-story-card__solution { padding: 20px 20px 24px; } .ps-story-card__solution-title { font-size: 1.05rem !important; } } /* ── パンくず ── */ .ps-breadcrumb { max-width: 1100px; margin: 0 auto; padding: 16px 20px; font-size: 0.78rem; color: #D0DEE8; } .ps-breadcrumb a { color: #125B8C; text-decoration: none; } .ps-breadcrumb a:hover { color: #1772AE; text-decoration: underline; } .ps-breadcrumb__sep { margin: 0 8px; color: #D0DEE8; } /* ── ボディ（2カラム） ── */ .ps-single-body { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; display: flex; gap: 44px; align-items: flex-start; } .ps-single-main { flex: 1; min-width: 0; } /* ── 本文エリア ── */ .ps-single-content { background: #fff; border-radius: 14px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 40, 90, 0.06); border: 1px solid #EEF4F9; margin-bottom: 28px; line-height: 1.9; } .ps-single-content img { max-width: 100%; height: auto; border-radius: 8px; } .ps-single-content h2 { font-size: 1.25rem; font-weight: 700; color: #092F48; margin: 2em 0 0.8em; padding-bottom: 8px; border-bottom: 2px solid #EEF4F9; } .ps-single-content h3 { font-size: 1.05rem; font-weight: 700; color: #125B8C; margin: 1.5em 0 0.6em; } /* ── お問い合わせCTA ── */ .ps-single-inquiry { background: linear-gradient(135deg, #092F48, #125B8C); border-radius: 14px; padding: 32px; margin-bottom: 28px; } .ps-single-inquiry__inner { text-align: center; } .ps-single-inquiry__text { font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 20px; } .ps-single-inquiry__btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .ps-single-inquiry__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 50px; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .ps-single-inquiry__btn--mail { background: #fff; color: #092F48; } .ps-single-inquiry__btn--mail:hover { background: #EEF4F9; color: #092F48; transform: translateY(-2px); } .ps-single-inquiry__btn--tel { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); } .ps-single-inquiry__btn--tel:hover { border-color: #fff; color: #fff; } /* ── 前後ナビ ── */ .ps-single-nav { display: flex; gap: 16px; margin-bottom: 28px; } .ps-single-nav__link { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 40, 90, 0.06); border: 1px solid #EEF4F9; text-decoration: none; color: #092F48; transition: all 0.3s ease; } .ps-single-nav__link:hover { border-color: #1772AE; box-shadow: 0 4px 16px rgba(0, 40, 90, 0.1); color: #092F48; } .ps-single-nav__link--next { justify-content: flex-end; text-align: right; } .ps-single-nav__link small { display: block; font-size: 0.72rem; color: #D0DEE8; margin-bottom: 2px; } .ps-single-nav__link svg { flex-shrink: 0; color: #1772AE; } /* ── サイドバー ── */ .ps-single-sidebar { width: 280px; flex-shrink: 0; padding-top: 20px; } .ps-single-sidebar__sticky { position: sticky; top: 100px; } .ps-single-sidebar__heading { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: #092F48; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #EEF4F9; } .ps-single-sidebar__heading svg { color: #1772AE; } .ps-single-sidebar__list { list-style: none; padding: 0; margin: 0 0 24px; max-height: 400px; overflow-y: auto; } .ps-single-sidebar__list li { border-bottom: 1px solid #EEF4F9; } .ps-single-sidebar__list li a { display: block; padding: 10px 12px; font-size: 0.82rem; color: #092F48; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; line-height: 1.5; } .ps-single-sidebar__list li a:hover { background: #EEF4F9; color: #092F48; } .ps-single-sidebar__list li.is-current a { background: #EEF4F9; color: #092F48; font-weight: 700; border-left: 3px solid #1772AE; } /* サイドバーCTA */ .ps-single-sidebar__cta { background: linear-gradient(135deg, #092F48, #125B8C); border-radius: 12px; padding: 24px 20px; text-align: center; } .ps-single-sidebar__cta-title { font-size: 0.88rem; font-weight: 700; color: #fff; margin: 0 0 6px; } .ps-single-sidebar__cta-text { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); margin: 0 0 14px; } .ps-single-sidebar__cta-btn { display: inline-block; padding: 10px 28px; background: #fff; color: #092F48; font-size: 0.85rem; font-weight: 600; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; } .ps-single-sidebar__cta-btn:hover { background: #EEF4F9; color: #092F48; } /* ── SP レスポンシブ ── */ @media (max-width: 959px) { .ps-single-body { flex-direction: column; } .ps-single-sidebar { width: 100%; } .ps-single-sidebar__sticky { position: static; } .ps-single-sidebar__list { max-height: none; } .ps-single-hero::after { width: 260px; height: 150px; right: 1%; opacity: 0.09; } .ps-single-hero__title { font-size: 1.5rem; } } @media (max-width: 599px) { .ps-single-hero { padding: 40px 16px 56px; } .ps-single-hero__title { font-size: 1.3rem; } .ps-single-hero::after { display: none; } .ps-single-content { padding: 24px 16px; } .ps-single-nav { flex-direction: column; } .ps-single-inquiry__btns { flex-direction: column; } .ps-single-inquiry__btn { width: 100%; justify-content: center; } } /* ── 課題解決 ACFフィールド表示 ── */ /* 解決策ヘッダー */ .ps-proposal-header { margin-bottom: 28px; padding: 24px 28px; background: linear-gradient(135deg, #EEF4F9 0%, #EEF4F9 100%) !important; border-radius: 12px; border-left: 4px solid #1772AE; } .ps-proposal-header__title { font-size: 1.15rem !important; font-weight: 700 !important; color: #092F48 !important; background: transparent !important; line-height: 1.8; margin: 0 !important; border-bottom: none !important; padding: 0 !important; } /* 旧サイトのインラインクラス対応 */ .ps-proposal-header__title .txt_red { color: #d63031 !important; } .ps-proposal-header__title .txt_blue { color: #1772AE !important; } /* 解決策イメージ */ .ps-proposal-img { margin-bottom: 28px; text-align: center; } .ps-proposal-img img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 40, 90, 0.08); } /* 解決策詳細 */ .ps-proposal-detail { margin-bottom: 32px; line-height: 1.9; color: #092F48; } .ps-proposal-detail img { max-width: 100%; height: auto; border-radius: 8px; } /* 製品紹介セクション */ .ps-product { margin-top: 40px; margin-bottom: 32px; } .ps-product__heading { font-size: 1.1rem !important; font-weight: 800 !important; color: #125B8C !important; margin: 0 0 20px !important; padding: 0 0 14px !important; background: transparent !important; background-image: none !important; border: none !important; border-bottom: 3px solid #125B8C !important; border-radius: 0 !important; text-align: left; position: relative; letter-spacing: 0.03em; } .ps-product__heading::before, .ps-product__heading::after { content: none !important; display: none !important; } .ps-product__card { display: flex; align-items: stretch; gap: 0; background: #fff; border: 2px solid #EEF4F9; border-radius: 16px; padding: 0; box-shadow: 0 4px 20px rgba(0, 40, 90, 0.07); overflow: hidden; } .ps-product__photo { flex-shrink: 0; width: 300px; background: #EEF4F9; display: flex; align-items: center; justify-content: center; padding: 20px; } .ps-product__photo img { width: 100%; height: auto; border-radius: 10px; transition: transform 0.3s ease; object-fit: cover; } .ps-product__photo a:hover img { transform: scale(1.03); } .ps-product__info { flex: 1; padding: 32px 32px; display: flex; flex-direction: column; justify-content: center; } .ps-product__name { font-size: 1.2rem; font-weight: 800; color: #092F48; margin: 0 0 20px; line-height: 1.6; } .ps-product__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #125B8C, #1772AE); color: #fff; font-size: 0.9rem; font-weight: 700; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(21, 101, 192, 0.2); } .ps-product__btn:hover { background: linear-gradient(135deg, #00406B, #125B8C); box-shadow: 0 4px 16px rgba(21, 101, 192, 0.35); color: #fff; transform: translateY(-1px); } /* 追加コンテンツ */ .ps-additional-content { margin-top: 32px; padding-top: 32px; border-top: 2px solid #EEF4F9; } /* ── 旧サイトのインラインクラス互換 ── */ .ps-single-content .txt_red { color: #d63031 !important; } .ps-single-content .txt_blue { color: #1772AE !important; } .ps-single-content .txt_bold { font-weight: 700 !important; } .ps-single-content h2 { font-size: 1.2rem !important; font-weight: 700 !important; color: #092F48 !important; background: transparent !important; margin: 2em 0 0.8em !important; padding: 0 0 8px !important; border-bottom: 2px solid #EEF4F9 !important; } .ps-single-content h3 { font-size: 1.05rem !important; font-weight: 700 !important; color: #125B8C !important; background: transparent !important; margin: 1.5em 0 0.6em !important; padding: 0 !important; border-bottom: none !important; } /* SP */ @media (max-width: 599px) { .ps-proposal-header { padding: 18px 16px; } .ps-proposal-header__title { font-size: 1rem; } .ps-product__card { flex-direction: column; padding: 0; gap: 0; } .ps-product__photo { width: 100%; padding: 20px; } .ps-product__photo img { max-width: 280px; margin: 0 auto; display: block; } .ps-product__info { padding: 20px 24px 28px; } .ps-product__btn { width: 100%; justify-content: center; } } /* ========================================================================== 魂込めたモノづくり (monodzukuri) ※元サイト準拠レイアウト ========================================================================== */ /* SWELLデフォルト非表示 */ .page-template-page-monodzukuri .l-topTitleArea, .page-template-page-monodzukuri .l-topTitleArea+.c-breadcrumb, .page-template-page-monodzukuri .p-breadcrumb, .page-template-page-monodzukuri .c-breadcrumb { display: none !important; } .mono-page .l-topTitleArea, .mono-page .p-breadcrumb { display: none !important; } /* ── ヒーロー ── */ .mono-hero { background: linear-gradient(135deg, #125B8C 0%, #1772AE 40%, #1B88D0 100%); padding: 56px 20px 72px; text-align: center; position: relative; overflow: hidden; } .mono-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 85% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); pointer-events: none; } .mono-hero__inner { position: relative; z-index: 4; } .mono-hero__label { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 20px; padding: 5px 20px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.08); } .mono-hero__title { font-size: 1.8rem; font-weight: 800; color: #fff !important; background: transparent !important; margin: 16px 0 0; letter-spacing: 0.08em; text-shadow: 0 2px 8px rgba(0, 40, 100, 0.25); } .mono-hero__deco { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; z-index: 3; } /* ── イントロ（左テキスト＋右画像） ── */ /* 背景画像のゆっくりズーム */ @keyframes monoIntroBgZoom { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } /* テキストのフェードイン上昇 */ @keyframes monoFadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .mono-intro { position: relative; padding: 90px 0; overflow: hidden; } /* 背景画像を疑似要素で配置（ズームアニメーション用） */ .mono-intro::before { content: ""; position: absolute; inset: -10px; background: inherit; background-size: cover; background-position: center; animation: monoIntroBgZoom 20s ease-in-out infinite alternate; z-index: 0; } .mono-intro__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 25, 55, 0.88) 0%, rgba(10, 25, 55, 0.75) 35%, rgba(10, 25, 55, 0.4) 65%, rgba(10, 25, 55, 0.15) 100%); z-index: 1; } .mono-intro__inner { max-width: 1000px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 2; } .mono-intro__text { max-width: 560px; font-size: 1.05rem; line-height: 2.3; color: #fff !important; animation: monoFadeUp 1s ease-out 0.3s both; } .mono-intro__text p { color: #fff !important; margin-bottom: 0.6em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.15); } .mono-intro__text p:last-child { margin-bottom: 0; } .mono-intro__text strong { color: #ffd54f !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } @media (max-width: 768px) { .mono-intro { padding: 60px 0; } .mono-intro__overlay { background: linear-gradient(to bottom, rgba(10, 25, 55, 0.85) 0%, rgba(10, 25, 55, 0.65) 100%); } .mono-intro__inner { padding: 0 20px; } .mono-intro__text { max-width: 100%; font-size: 0.92rem; line-height: 2; } } /* ── 6つの特徴 見出し ── */ .mono-features { padding: 56px 0 60px; background: #fff; } .mono-features__header { max-width: 1000px; margin: 0 auto 40px; padding: 0 20px; text-align: center; } .mono-features__heading { font-size: 1.6rem !important; font-weight: 800 !important; color: #092F48 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; border: none !important; line-height: 1.6; letter-spacing: 0.06em; } .mono-features__heading::before, .mono-features__heading::after { content: none !important; display: none !important; } .mono-features__heading span { font-family: "Montserrat", sans-serif; font-size: 2.8rem; font-weight: 900; color: #125B8C; margin: 0 4px; } /* ── 2列グリッド ── */ .mono-features__grid { max-width: 1000px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } /* ── カード ── */ .mono-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #EEF4F9; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0, 40, 90, 0.05); } .mono-card:hover { box-shadow: 0 8px 32px rgba(21, 101, 192, 0.12); transform: translateY(-3px); color: inherit; } /* カードヘッダー（番号＋タイトル） */ .mono-card__header { display: flex; align-items: center; gap: 16px; padding: 20px 20px 14px; } .mono-card__number-wrap { flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .mono-card__koda { font-size: 0.6rem; font-weight: 700; color: #125B8C; line-height: 1.3; letter-spacing: 0.04em; } .mono-card__num { font-family: "Montserrat", sans-serif; font-size: 2.4rem; font-weight: 900; color: #125B8C; line-height: 1; letter-spacing: -0.02em; } .mono-card__titles { flex: 1; min-width: 0; } .mono-card__subtitle { font-size: 0.8rem; color: #092F48; margin: 0 0 2px; line-height: 1.5; } .mono-card__title { font-size: 1.1rem !important; font-weight: 800 !important; color: #c0392b !important; background: transparent !important; margin: 0 !important; padding: 0 !important; border: none !important; line-height: 1.5; } .mono-card__title::before, .mono-card__title::after { content: none !important; display: none !important; } .mono-card__title .txt_red { color: #c0392b !important; } .mono-card__title strong { color: inherit !important; font-weight: 900; } /* カード写真 */ .mono-card__photo { width: 100%; overflow: hidden; } .mono-card__photo img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 0.4s ease; } .mono-card:hover .mono-card__photo img { transform: scale(1.04); } /* カードテキスト */ .mono-card__body { padding: 16px 20px 22px; } .mono-card__text { font-size: 0.85rem; color: #092F48; margin: 0; line-height: 1.8; text-align: center; } /* ── パンくず（ページ下部） ── */ .mono-breadcrumb { max-width: 1000px; margin: 0 auto; padding: 24px 20px; font-size: 0.78rem; color: #D0DEE8; border-top: 1px solid #EEF4F9; } .mono-breadcrumb a { color: #125B8C; text-decoration: none; } .mono-breadcrumb a:hover { color: #1772AE; text-decoration: underline; } .mono-breadcrumb__sep { margin: 0 8px; color: #D0DEE8; } /* ── レスポンシブ ── */ @media (max-width: 768px) { .mono-hero { padding: 40px 16px 56px; } .mono-hero__title { font-size: 1.4rem; } .mono-features__heading { font-size: 1.3rem !important; } .mono-features__heading span { font-size: 2.2rem; } .mono-features__grid { grid-template-columns: 1fr; gap: 20px; } .mono-card__photo img { height: 200px; } .mono-card__title { font-size: 1rem !important; } } @media (max-width: 480px) { .mono-card__header { padding: 16px 16px 10px; gap: 12px; } .mono-card__num { font-size: 2rem; } .mono-card__body { padding: 12px 16px 18px; } .mono-card__photo img { height: 180px; } } /* ======================================== メガメニュー レスポンシブ対応 ======================================== */ .mega-grid { display: grid; gap: 24px 32px; max-width: 1200px; margin: 0 auto; padding: 24px 20px; } .mega-grid--3col { grid-template-columns: repeat(3, 1fr); } .mega-grid--4col { grid-template-columns: repeat(4, 1fr); } /* カテゴリタイトル（青背景ラベル） */ .mega-cat-label { display: inline-block; background: #00406B; color: #fff !important; font-size: 0.85em; font-weight: 700; padding: 4px 14px; border-radius: 3px; margin-bottom: 8px; letter-spacing: 0.02em; } .mega-cat-label a { color: #fff !important; text-decoration: none; } .mega-cat-label a:hover { opacity: 0.85; } /* リンクリスト */ .mega-links { list-style: none; margin: 0; padding: 0; } .mega-links li { margin: 0; padding: 0; } .mega-links a { display: block; padding: 5px 0; color: #092F48; font-size: 0.82em; text-decoration: none; line-height: 1.5; transition: color 0.2s; } .mega-links a:hover { color: #1B88D0; } /* メガメニュー見出し */ .mega-heading { font-size: 1.1em; font-weight: 700; color: #092F48; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #092F48; } /* セクション区切り */ .mega-section+.mega-section { margin-top: 20px; } /* ===== megamenu-4 課題解決 専用レイアウト ===== */ .mega-grid--mega4 { display: block !important; grid-template-columns: none !important; } .mega4-header { margin-bottom: 16px; } .mega4-header .mega-heading { margin: 0; padding-bottom: 8px; border-bottom: 2px solid #092F48; } .mega4-header .mega-heading a { color: #092F48; text-decoration: none; } .mega4-header .mega-heading a:hover { color: #1B88D0; } .megamenu-4 .mega4-articles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 24px; } /* 折り返し禁止 */ .mega-links--nowrap a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 959px) { .megamenu-4 .mega4-articles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 599px) { .megamenu-4 .mega4-articles { grid-template-columns: 1fr 1fr; gap: 12px 16px; } } /* レスポンシブ */ @media (max-width: 959px) { .mega-grid--3col, .mega-grid--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .mega-grid--3col, .mega-grid--4col { grid-template-columns: 1fr; gap: 16px; } .mega-grid { padding: 16px 12px; } } /* ======================================== モノづくりサブページ共通スタイル（ACF版） ======================================== */ /* ── ヒーローセクション ── */ .msub-hero { background: linear-gradient(135deg, #092F48 0%, #125B8C 50%, #1772AE 100%); padding: 64px 20px 80px; text-align: center; position: relative; overflow: hidden; } .msub-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%); pointer-events: none; z-index: 1; } /* ACFヒーロー背景画像あり */ .msub-hero.has-hero-image { background: none; padding: 80px 20px 100px; } .msub-hero.has-hero-image::after { content: ""; position: absolute; inset: 0; background: var(--msub-hero-bg) center / cover no-repeat; z-index: 0; } .msub-hero.has-hero-image::before { background: linear-gradient(135deg, rgba(9, 47, 72, 0.85) 0%, rgba(18, 91, 140, 0.7) 40%, rgba(23, 114, 174, 0.55) 100%); z-index: 1; } .msub-hero__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } /* ラベル */ .msub-hero__label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 20px; padding: 5px 22px; margin: 0 auto 20px; background: rgba(255, 255, 255, 0.08); } /* メイン見出し */ .msub-hero__title { font-size: 1.5rem !important; font-weight: 800 !important; color: #fff !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 24px !important; line-height: 1.7; letter-spacing: 0.06em; text-shadow: 0 2px 12px rgba(0, 30, 80, 0.3); } .msub-hero__title::before, .msub-hero__title::after { content: none !important; display: none !important; } .msub-hero__title em { font-style: normal; display: block; font-size: 2rem; color: #fff !important; text-shadow: 0 2px 16px rgba(0, 30, 80, 0.4); } /* リード文 */ .msub-hero__lead { font-size: 0.95rem; line-height: 2.2; color: rgba(255, 255, 255, 0.9) !important; margin: 0; text-shadow: 0 1px 8px rgba(0, 20, 60, 0.3); } /* ── コンテンツセクション全体 ── */ .msub-sections { max-width: 1000px; margin: 0 auto; padding: 0 20px; } /* ── 各セクション ── */ .msub-sec { padding: 64px 0; border-bottom: 1px solid #EEF4F9; position: relative; overflow: hidden; } .msub-sec:last-child { border-bottom: none; } /* セクション番号デコレーション */ .msub-sec__num { display: none; } /* ── レイアウト：テキスト＋画像 ── */ .msub-sec__inner { position: relative; z-index: 1; } .msub-sec--layout-img-right .msub-sec__inner, .msub-sec--layout-img-left .msub-sec__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } /* 画像を左に配置（テキスト右） */ .msub-sec--layout-img-left .msub-sec__inner { direction: rtl; } .msub-sec--layout-img-left .msub-sec__inner>* { direction: ltr; } /* テキストのみ（センター） */ .msub-sec--layout-center .msub-sec__inner { max-width: 700px; margin: 0 auto; text-align: center; } /* ── 見出し ── */ .msub-sec__heading { font-size: 1.45rem !important; font-weight: 800 !important; color: #092F48 !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 20px !important; line-height: 1.8; letter-spacing: 0.04em; } .msub-sec__heading::before, .msub-sec__heading::after { content: none !important; display: none !important; } .msub-sec__heading em { font-style: normal; color: #1B88D0 !important; font-weight: 800; } /* ── 本文テキスト ── */ .msub-sec__body p { font-size: 0.95rem; line-height: 2.1; color: #092F48; margin: 0; } /* ── 画像 ── */ .msub-sec__photo { overflow: hidden; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 40, 90, 0.08); } .msub-sec__photo img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .msub-sec:hover .msub-sec__photo img { transform: scale(1.03); } /* ── 背景ロールモード ── */ .msub-sec--layout-bg { position: relative; overflow: hidden; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 80px 20px; border-bottom: none; } .msub-sec--layout-bg::before { content: ""; position: absolute; inset: -10px; background: var(--msub-sec-bg) center / cover no-repeat; z-index: 0; transition: transform 8s ease; } .msub-sec--layout-bg:hover::before { transform: scale(1.03); } .msub-sec__bg-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(9, 47, 72, 0.75) 0%, rgba(18, 91, 140, 0.5) 50%, rgba(9, 47, 72, 0.3) 100%); z-index: 1; } .msub-sec--layout-bg .msub-sec__inner { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; text-align: center; } .msub-sec--layout-bg .msub-sec__heading { color: #fff !important; text-shadow: 0 2px 16px rgba(0, 20, 60, 0.4); font-size: 1.6rem !important; } .msub-sec--layout-bg .msub-sec__heading em { color: #fff !important; text-shadow: 0 2px 16px rgba(0, 20, 60, 0.5); font-size: 1.8rem; display: block; margin-top: 4px; } .msub-sec--layout-bg .msub-sec__body p { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(0, 20, 60, 0.3); text-align: center; max-width: 700px; margin: 0 auto; } /* 番号非表示 */ .msub-sec__num--light { display: none; } /* 背景モードのスクロールアニメーション */ .msub-sec--layout-bg.is-visible .msub-sec__text { animation: msubFadeInUp 0.8s ease-out both; } /* ── スクロールアニメーション ── */ @keyframes msubFadeInUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes msubFadeInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes msubFadeInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } .msub-sec.is-visible .msub-sec__text { animation: msubFadeInLeft 0.7s ease-out both; } .msub-sec.is-visible .msub-sec__photo { animation: msubFadeInRight 0.7s ease-out 0.15s both; } .msub-sec--layout-img-left.is-visible .msub-sec__text { animation-name: msubFadeInRight; } .msub-sec--layout-img-left.is-visible .msub-sec__photo { animation-name: msubFadeInLeft; } .msub-sec--layout-center.is-visible .msub-sec__text { animation: msubFadeInUp 0.7s ease-out both; } /* ── 下部ナビゲーション ── */ .msub-nav { background: #EEF4F9; padding: 60px 20px; } .msub-nav__inner { max-width: 1000px; margin: 0 auto; text-align: center; } .msub-nav__heading { font-size: 1.5rem !important; font-weight: 800 !important; color: #092F48 !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 4px !important; letter-spacing: 0.06em; } .msub-nav__heading::before, .msub-nav__heading::after { content: none !important; display: none !important; } .msub-nav__sub { font-size: 0.85rem; color: #125B8C; margin: 0 0 32px; font-weight: 500; } .msub-nav__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } .msub-nav__card { display: flex; flex-direction: column; align-items: center; background: #fff; border: 2px solid transparent; border-radius: 10px; padding: 24px 16px 20px; text-decoration: none; color: inherit; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 40, 90, 0.05); } .msub-nav__card:hover { border-color: #1B88D0; box-shadow: 0 6px 24px rgba(21, 101, 192, 0.12); transform: translateY(-3px); color: inherit; } .msub-nav__card.is-current { border-color: #1B88D0; background: linear-gradient(135deg, #1772AE 0%, #1B88D0 100%); color: #fff; pointer-events: none; } .msub-nav__num { font-family: "Montserrat", sans-serif; font-size: 1.8rem; font-weight: 900; color: #125B8C; line-height: 1; margin-bottom: 8px; } .msub-nav__card.is-current .msub-nav__num { color: rgba(255, 255, 255, 0.7); } .msub-nav__label { font-size: 1rem; font-weight: 700; color: #092F48; margin-bottom: 6px; } .msub-nav__card.is-current .msub-nav__label { color: #fff; } .msub-nav__desc { font-size: 0.75rem; color: #125B8C; line-height: 1.5; } .msub-nav__card.is-current .msub-nav__desc { color: rgba(255, 255, 255, 0.8); } .msub-nav__back { margin-top: 8px; } .msub-nav__back-link { display: inline-block; font-size: 0.88rem; font-weight: 600; color: #1772AE; text-decoration: none; padding: 10px 28px; border: 2px solid #1772AE; border-radius: 30px; transition: all 0.3s ease; } .msub-nav__back-link:hover { background: #1772AE; color: #fff; } /* ── パンくず ── */ .msub-breadcrumb { border-top: 1px solid #EEF4F9; background: #fff; } .msub-breadcrumb__inner { max-width: 1000px; margin: 0 auto; padding: 20px; font-size: 0.78rem; color: #092F48; } .msub-breadcrumb a { color: #125B8C; text-decoration: none; } .msub-breadcrumb a:hover { color: #1772AE; text-decoration: underline; } .msub-breadcrumb__sep { margin: 0 8px; color: #D0DEE8; } /* ── レスポンシブ ── */ @media (max-width: 768px) { .msub-hero { padding: 48px 16px 60px; } .msub-hero__title { font-size: 1.3rem !important; } .msub-hero__title em { font-size: 1.5rem; } .msub-hero__lead { font-size: 0.85rem; } .msub-sec { padding: 48px 0; } .msub-sec--layout-img-right .msub-sec__inner, .msub-sec--layout-img-left .msub-sec__inner { grid-template-columns: 1fr; gap: 24px; } .msub-sec--layout-img-left .msub-sec__inner { direction: ltr; } .msub-sec__heading { font-size: 1.2rem !important; } .msub-sec__num { display: none; } .msub-sec--layout-bg { padding: 56px 16px; } .msub-sec--layout-bg .msub-sec__heading { font-size: 1.3rem !important; } .msub-sec--layout-bg .msub-sec__heading em { font-size: 1.4rem; } .msub-nav__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .msub-hero__title { font-size: 1.1rem !important; } .msub-hero__title em { font-size: 1.3rem; } .msub-sec__heading { font-size: 1.05rem !important; } .msub-nav__grid { grid-template-columns: 1fr; } .msub-nav__card { padding: 18px 14px 16px; } } /* ============================================================ SAQRA® ページ (.sakura-) ============================================================ */ /* --- SWELL デフォルト非表示 --- */ .sakura-page .l-topTitleArea, .sakura-page .p-breadcrumb, .sakura-page .c-breadcrumb, body:has(.sakura-page) .l-topTitleArea, body:has(.sakura-page) .p-breadcrumb, [class*="breadcrumb"]:not(.sakura-breadcrumb) { display: none !important; } .sakura-page .l-mainContent .post_content, .sakura-page .l-mainContent .l-mainContent__inner { max-width: 100% !important; padding: 0 !important; } .sakura-page .l-mainContent { max-width: 100% !important; padding: 0 !important; } /* --- ヒーロー --- */ .sakura-hero { background: linear-gradient(135deg, var(--clr-primary, #092F48) 0%, var(--clr-accent, #1772AE) 100%); color: #fff; text-align: center; padding: 80px 20px 60px; position: relative; overflow: hidden; } .sakura-hero.has-bg { min-height: 400px; display: flex; align-items: center; justify-content: center; } .sakura-hero.has-bg::before { content: ""; position: absolute; inset: -60px 0 0 0; background: var(--sakura-hero-bg) center / cover no-repeat; z-index: 0; transform: translateY(var(--sakura-parallax, 0)); will-change: transform; } .sakura-hero.has-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(9, 47, 72, 0.8) 0%, rgba(23, 114, 174, 0.5) 100%); z-index: 1; } .sakura-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .sakura-hero__title { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 16px; } .sakura-hero__title sup { font-size: 0.5em; } .sakura-hero__subtitle { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; } .sakura-hero__catchcopy { font-size: 1.6rem; font-weight: 700; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } /* --- 共通コンテンツ幅 --- */ .sakura-content { max-width: 1000px; margin: 0 auto; padding: 0 20px 60px; } /* --- セクション共通 --- */ .sakura-section { margin-top: 60px; } .sakura-section__heading { font-size: 1.5rem; font-weight: 700; color: var(--clr-primary, #092F48); text-align: center; padding-bottom: 16px; margin-bottom: 32px; border-bottom: 3px solid var(--clr-accent, #1772AE); position: relative; } /* --- SAQRA®とは（2カラム） --- */ .sakura-about__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .sakura-about__logo { max-width: 300px; width: 100%; display: block; margin: 0 auto 20px; } .sakura-about__text h4 { font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px; color: var(--clr-primary, #092F48); } .sakura-about__text p { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); } .sakura-about__right img { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } /* --- 新機能（2カラム逆） --- */ .sakura-new__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .sakura-new__left img { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } /* --- CTAボタン --- */ .sakura-cta { text-align: center; margin-top: 40px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .sakura-cta--bottom { margin-top: 50px; margin-bottom: 20px; } .sakura-btn { display: inline-block; padding: 16px 40px; border-radius: 6px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: all 0.3s ease; letter-spacing: 0.05em; } .sakura-btn--primary { background: var(--clr-accent, #1772AE); color: #fff; } .sakura-btn--primary:hover { background: var(--clr-primary, #092F48); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(9, 47, 72, 0.3); } .sakura-btn--secondary { background: var(--clr-primary, #092F48); color: #fff; } .sakura-btn--secondary:hover { background: var(--clr-accent, #1772AE); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(9, 47, 72, 0.3); } .sakura-btn--large { padding: 20px 60px; font-size: 1.1rem; } /* --- 使い方セクション --- */ .sakura-howto__body { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); } .sakura-howto__body img { max-width: 100%; height: auto; margin: 16px 0; } /* --- ユーザーの声 --- */ .sakura-voices__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sakura-voice-card { border: 1px solid var(--clr-border, #d5dce3); border-radius: 4px; overflow: hidden; background: #fff; transition: box-shadow 0.3s ease; } .sakura-voice-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } /* ヘッダー: 会社名 + 青い下線 */ .sakura-voice-card__header { background: #fff; padding: 18px 20px 14px; border-bottom: 3px solid var(--clr-accent, #1772AE); } .sakura-voice-card__header h4 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--clr-primary, #092F48); letter-spacing: 0.03em; } /* ボディ: 写真左 + テキスト右 */ .sakura-voice-card__body { display: flex; gap: 18px; padding: 22px 20px 24px; align-items: flex-start; } /* 丸写真 */ .sakura-voice-card__photo { flex-shrink: 0; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--clr-bg-light, #eef4f9); } .sakura-voice-card__photo img { width: 100%; height: 100%; object-fit: cover; } /* テキスト */ .sakura-voice-card__text { font-size: 0.88rem; line-height: 1.8; color: var(--clr-text, #333); flex: 1; } /* --- お試し版申込 --- */ .sakura-trial__body { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); text-align: center; max-width: 700px; margin: 0 auto; } .sakura-trial__body h4 { font-size: 1.1rem; color: var(--clr-primary, #092F48); margin: 24px 0 12px; } .sakura-trial__flow-img { max-width: 100%; height: auto; margin: 24px auto; border-radius: 8px; display: block; } .sakura-trial__note { margin-top: 24px; } .sakura-trial__caution { font-size: 0.85rem; color: var(--clr-text-light, #6b7b8d); } /* --- パンくず --- */ .sakura-breadcrumb { background: var(--clr-bg-light, #eef4f9); padding: 12px 20px; } .sakura-breadcrumb__inner { max-width: 1000px; margin: 0 auto; font-size: 0.85rem; color: var(--clr-text-light, #6b7b8d); } .sakura-breadcrumb__inner a { color: var(--clr-accent, #1772AE); text-decoration: none; } .sakura-breadcrumb__inner a:hover { text-decoration: underline; } .sakura-breadcrumb__sep { margin: 0 8px; } /* --- レスポンシブ --- */ @media (max-width: 768px) { .sakura-hero__title { font-size: 2rem; } .sakura-hero__catchcopy { font-size: 1.3rem; } .sakura-about__row, .sakura-new__row { grid-template-columns: 1fr; } .sakura-voices__grid { grid-template-columns: 1fr; } .sakura-btn { padding: 14px 32px; } .sakura-btn--large { padding: 16px 40px; } } @media (max-width: 480px) { .sakura-hero { padding: 60px 16px 40px; } .sakura-hero__title { font-size: 1.6rem; } .sakura-hero__subtitle { font-size: 1rem; } .sakura-hero__catchcopy { font-size: 1.1rem; } .sakura-section__heading { font-size: 1.2rem; } .sakura-voice-card__body { flex-direction: column; align-items: center; text-align: center; } .sakura-voice-card__photo { width: 80px; height: 80px; } .sakura-cta { flex-direction: column; align-items: center; } .sakura-btn { width: 100%; max-width: 300px; } } /* ============================================================ SAQRA® スクロールアニメーション ============================================================ */ /* 初期状態：透明 + 下にずらす */ .sakura-anim { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* 表示時 */ .sakura-anim.is-visible { opacity: 1; transform: translateY(0); } /* ヒーローのフェードインは別（ページ読み込み直後） */ .sakura-hero { animation: sakuraHeroIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes sakuraHeroIn { from { opacity: 0; } to { opacity: 1; } } .sakura-hero__title { animation: sakuraSlideUp 0.9s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .sakura-hero__subtitle { animation: sakuraSlideUp 0.9s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .sakura-hero__catchcopy { animation: sakuraSlideUp 0.9s 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes sakuraSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* aboutセクション: 左右からスライドイン */ .sakura-about.is-visible .sakura-about__left { animation: sakuraSlideFromLeft 0.8s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .sakura-about.is-visible .sakura-about__right { animation: sakuraSlideFromRight 0.8s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .sakura-about__left, .sakura-about__right { opacity: 0; } @keyframes sakuraSlideFromLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes sakuraSlideFromRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* 新機能: 左右から */ .sakura-new.is-visible .sakura-new__left { animation: sakuraSlideFromLeft 0.8s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .sakura-new.is-visible .sakura-new__right { animation: sakuraSlideFromRight 0.8s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .sakura-new__left, .sakura-new__right { opacity: 0; } /* ボタンのホバーパルス */ .sakura-btn { position: relative; overflow: hidden; } .sakura-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } .sakura-btn:hover::after { transform: translateX(100%); } /* セクション見出しのアニメーション */ .sakura-anim.is-visible .sakura-section__heading { animation: sakuraHeadingLine 0.6s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes sakuraHeadingLine { from { opacity: 0; border-bottom-color: transparent; letter-spacing: 0.15em; } to { opacity: 1; border-bottom-color: var(--clr-accent, #1772AE); letter-spacing: 0.03em; } } /* prefers-reduced-motion 対応 */ @media (prefers-reduced-motion: reduce) { .sakura-anim, .sakura-hero, .sakura-hero__title, .sakura-hero__subtitle, .sakura-hero__catchcopy { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } .sakura-about__left, .sakura-about__right, .sakura-new__left, .sakura-new__right { opacity: 1 !important; animation: none !important; } } /* ============================================================ サクセスカレッジ カード (.sakura-college-card) SAQRAページ内 & アーカイブ共通 ============================================================ */ /* --- カードグリッド（SAQRAページ内） --- */ .sakura-college-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 32px; max-width: 800px; margin-left: auto; margin-right: auto; } /* --- カード本体 --- */ .sakura-college-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .sakura-college-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); color: inherit; } /* --- サムネイル --- */ .sakura-college-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--clr-bg-light, #eef4f9); } .sakura-college-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sakura-college-card:hover .sakura-college-card__img { transform: scale(1.05); } /* --- タクソノミーラベル --- */ .sakura-college-card__term { position: absolute; top: 0; left: 0; background: rgba(9, 47, 72, 0.85); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 5px 14px; z-index: 2; letter-spacing: 0.03em; } /* --- カード本文 --- */ .sakura-college-card__body { padding: 16px 18px 18px; } .sakura-college-card__title { font-size: 0.95rem; font-weight: 700; line-height: 1.5; color: var(--clr-primary, #092F48); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sakura-college-card__excerpt { font-size: 0.82rem; line-height: 1.6; color: var(--clr-text-light, #6b7b8d); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sakura-college-card__date { font-size: 0.78rem; color: var(--clr-text-light, #6b7b8d); } /* ============================================================   アーカイブ共通   ============================================================ */ /* --- SWELL デフォルト非表示 --- */ .archive-common .l-topTitleArea, .archive-common .p-breadcrumb, .archive-common .c-breadcrumb { display: none !important; } /* --- ヒーロー --- */ .archive-hero { position: relative; background: linear-gradient(135deg, var(--clr-primary, #092F48) 0%, var(--clr-accent, #1772AE) 100%); color: #fff; text-align: center; padding: 60px 20px 48px; overflow: hidden; } /* 背景画像付きヒーロー */ .archive-hero.has-bg { min-height: 220px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 20px 60px; } /* ダークオーバーレイ */ .archive-hero__overlay { position: absolute; inset: 0; background: rgba(9, 47, 72, 0.65); z-index: 1; } .archive-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } /* 親ターム表示 */ .archive-hero__parent { font-size: 0.85rem; font-weight: 500; opacity: 0.8; margin: 0 0 6px; letter-spacing: 0.04em; } .archive-hero__title { font-size: 2rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0; } .archive-hero__lead { font-size: 1rem; opacity: 0.85; } /* --- ヒーロー下の説明文エリア --- */ .archive-desc { background: #f7f9fb; border-bottom: 1px solid #e2e8f0; } .archive-desc__inner { max-width: 1200px; margin: 0 auto; padding: 20px 20px; } .archive-desc__crumbs { font-size: 0.78rem; color: #7a8c9e; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .archive-desc__crumbs-label { font-weight: 600; } .archive-desc__crumbs-sep { font-size: 0.6rem; color: #aab8c8; } .archive-desc__text { font-size: 0.95rem; line-height: 1.8; color: #444; margin: 0; } /* --- コンテンツ幅 --- */ .archive-content { max-width: 1000px; margin: 0 auto; padding: 40px 20px 60px; } /* --- 2カラムレイアウト --- */ .archive-layout { max-width: 1200px; margin: 0 auto; padding: 40px 20px 60px; display: flex; gap: 40px; align-items: flex-start; } .archive-layout__main { flex: 1; min-width: 0; } .archive-layout__side { flex: 0 0 280px; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; } /* --- サイドフィルター --- */ .side-filter { margin-bottom: 28px; } .side-filter__title { font-size: 0.9rem; font-weight: 800; color: #fff; margin: 0 0 14px; padding: 10px 14px; background: linear-gradient(135deg, #1772AE 0%, #0d5a8c 100%) !important; border-radius: 6px; border: none !important; letter-spacing: 0.04em; } .side-filter__title::before, .side-filter__title::after { display: none !important; content: none !important; } .side-filter__tags { display: flex; flex-direction: column; gap: 4px; } .side-filter__tag { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 6px; font-size: 0.88rem; font-weight: 600; text-decoration: none !important; background: #f5f8fb; color: #333 !important; border-left: 3px solid transparent; transition: all 0.2s ease; line-height: 1.4; } .side-filter__tag:hover { background: #e4eef6; border-left-color: #1B88D0; color: #092F48 !important; transform: translateX(2px); } .side-filter__tag.is-active { background: linear-gradient(135deg, #1B88D0 0%, #1772AE 100%); border-left-color: #0d5a8c; color: #fff !important; font-weight: 700; box-shadow: 0 2px 8px rgba(23, 114, 174, 0.25); } .side-filter__tag.is-active .side-filter__count { background: rgba(255,255,255,0.2); color: #fff; } .side-filter__count { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: #8aa5b8; background: #e8eff5; padding: 2px 8px; border-radius: 10px; min-width: 28px; text-align: center; } /* サイドバー スクロールバー */ .archive-layout__side::-webkit-scrollbar { width: 4px; } .archive-layout__side::-webkit-scrollbar-thumb { background: #c8d6e0; border-radius: 2px; } /* --- 2カラム時のグリッドは2列 --- */ .archive-layout__main .archive-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .archive-layout { flex-direction: column; gap: 24px; } .archive-layout__side { flex: auto; position: static; max-height: none; overflow-y: visible; } .archive-layout__main .archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .archive-layout__main .archive-grid { grid-template-columns: 1fr; } } /* --- パンくず用レイアウト（padding上書き） --- */ .archive-layout--crumbs { padding-top: 0; padding-bottom: 32px; } /* --- タクソノミーフィルター --- */ .archive-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; justify-content: center; } .archive-filter__tag { display: inline-block; padding: 8px 20px; border-radius: 30px; font-size: 0.88rem; font-weight: 600; text-decoration: none; background: var(--clr-bg-light, #eef4f9); color: var(--clr-text, #333); transition: all 0.3s ease; border: 2px solid transparent; } .archive-filter__tag:hover { background: var(--clr-accent, #1772AE); color: #fff; } .archive-filter__tag.is-active { background: var(--clr-accent, #1772AE); color: #fff; border-color: var(--clr-accent, #1772AE); } /* --- カテゴリーバナーナビ --- */ .tax-banner-section { margin-bottom: 32px; } .tax-banner-section__title { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: #6b8fa8; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid #e0e8ee; background: none !important; border-top: none !important; border-left: none !important; border-right: none !important; } .tax-banner-section__title::before, .tax-banner-section__title::after { display: none !important; content: none !important; } .tax-banner-section__icon { font-size: 1rem; } .tax-banner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tax-banner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f5f8fb; border: 1px solid #e0e8ee; border-radius: 6px; text-decoration: none !important; color: #333 !important; font-size: 0.82rem; font-weight: 600; transition: all 0.2s ease; line-height: 1.3; } .tax-banner:hover { background: #e4eef6; border-color: #1B88D0; color: #092F48 !important; } .tax-banner.is-active { background: #1B88D0; border-color: #1B88D0; color: #fff !important; } .tax-banner.is-active .tax-banner__count { background: rgba(255,255,255,0.25); color: #fff; } .tax-banner__name { flex: 1; min-width: 0; } .tax-banner__count { flex-shrink: 0; font-size: 0.72rem; font-weight: 500; color: #8aa5b8; background: #e8eff5; padding: 2px 8px; border-radius: 10px; margin-left: 8px; } @media (max-width: 768px) { .tax-banner-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .tax-banner { padding: 10px 12px; font-size: 0.78rem; } } /* --- アーカイブグリッド --- */ .archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* --- ページネーション --- */ .archive-pagination { margin-top: 48px; text-align: center; } .archive-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 6px; } .archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 6px; font-size: 0.9rem; text-decoration: none; color: var(--clr-text, #333); background: var(--clr-bg-light, #eef4f9); transition: all 0.3s ease; } .archive-pagination .page-numbers:hover { background: var(--clr-accent, #1772AE); color: #fff; } .archive-pagination .page-numbers.current { background: var(--clr-accent, #1772AE); color: #fff; font-weight: 700; } /* --- 空メッセージ --- */ .archive-empty { text-align: center; padding: 60px 20px; color: var(--clr-text-light, #6b7b8d); } /* --- レスポンシブ --- */ @media (max-width: 768px) { .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .archive-grid { gap: 20px; } .archive-hero__title { font-size: 1.6rem; } } @media (max-width: 480px) { .archive-grid, .archive-grid { grid-template-columns: 1fr !important; gap: 16px; } .archive-hero { padding: 48px 16px 36px; } .archive-hero__title { font-size: 1.3rem; } .archive-filter__tag { padding: 6px 14px; font-size: 0.8rem; } } /* --- カードグリッド --- */ .archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; /* max-width: 800px; */ margin-left: auto; margin-right: auto; } /* --- カード本体 --- */ .archive-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .archive-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); color: inherit; } /* --- サムネイル --- */ .archive-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--clr-bg-light, #eef4f9); } .archive-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .archive-card:hover .archive-card__img { transform: scale(1.05); } /* --- タクソノミーラベル --- */ .archive-card__term { position: absolute; top: 0; left: 0; background: rgba(9, 47, 72, 0.85); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 5px 14px; z-index: 2; letter-spacing: 0.03em; } /* --- カード本文 --- */ .archive-card__body { padding: 16px 18px 18px; } .archive-card__title { font-size: 0.95rem; font-weight: 700; line-height: 1.5; color: var(--clr-primary, #092F48); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .archive-card__excerpt { font-size: 0.82rem; line-height: 1.6; color: var(--clr-text-light, #6b7b8d); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .archive-card__date { font-size: 0.78rem; color: var(--clr-text-light, #6b7b8d); } /* ============================================================   アーカイブ共通 end   ============================================================ */ /* ============================================================ サクセスカレッジ アーカイブ (.college-) ============================================================ */ /* --- SWELL デフォルト非表示 --- */ .college-archive .l-topTitleArea, .college-archive .p-breadcrumb, .college-archive .c-breadcrumb { display: none !important; } /* --- ヒーロー --- */ .college-hero { background: linear-gradient(135deg, var(--clr-primary, #092F48) 0%, var(--clr-accent, #1772AE) 100%); color: #fff; text-align: center; padding: 60px 20px 48px; } .college-hero__inner { max-width: 800px; margin: 0 auto; } .college-hero__title { font-size: 2rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 12px; } .college-hero__lead { font-size: 1rem; opacity: 0.85; } /* --- コンテンツ幅 --- */ .college-archive__content { max-width: 1000px; margin: 0 auto; padding: 40px 20px 60px; } /* --- タクソノミーフィルター --- */ .college-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; justify-content: center; } .college-filter__tag { display: inline-block; padding: 8px 20px; border-radius: 30px; font-size: 0.88rem; font-weight: 600; text-decoration: none; background: var(--clr-bg-light, #eef4f9); color: var(--clr-text, #333); transition: all 0.3s ease; border: 2px solid transparent; } .college-filter__tag:hover { background: var(--clr-accent, #1772AE); color: #fff; } .college-filter__tag.is-active { background: var(--clr-accent, #1772AE); color: #fff; border-color: var(--clr-accent, #1772AE); } /* --- アーカイブグリッド --- */ .college-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* --- ページネーション --- */ .college-pagination { margin-top: 48px; text-align: center; } .college-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 6px; } .college-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 6px; font-size: 0.9rem; text-decoration: none; color: var(--clr-text, #333); background: var(--clr-bg-light, #eef4f9); transition: all 0.3s ease; } .college-pagination .page-numbers:hover { background: var(--clr-accent, #1772AE); color: #fff; } .college-pagination .page-numbers.current { background: var(--clr-accent, #1772AE); color: #fff; font-weight: 700; } /* --- 空メッセージ --- */ .college-empty { text-align: center; padding: 60px 20px; color: var(--clr-text-light, #6b7b8d); } /* --- レスポンシブ --- */ @media (max-width: 768px) { .college-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .sakura-college-grid { gap: 20px; } .college-hero__title { font-size: 1.6rem; } } @media (max-width: 480px) { .college-grid, .sakura-college-grid { grid-template-columns: 1fr; gap: 16px; } .college-hero { padding: 48px 16px 36px; } .college-hero__title { font-size: 1.3rem; } .college-filter__tag { padding: 6px 14px; font-size: 0.8rem; } } /* ============================================================ サクセスカレッジ アーカイブ (.college-) end ============================================================ */ /* ============================================================ WinActor® ページ (.wa-) ============================================================ */ /* --- SWELL デフォルト非表示 --- */ body:has(.wa-page) .l-topTitleArea, body:has(.wa-page) .p-breadcrumb, .wa-page .l-topTitleArea, .wa-page .p-breadcrumb, .wa-page .c-breadcrumb { display: none !important; } .wa-page .l-mainContent .post_content, .wa-page .l-mainContent .l-mainContent__inner, .wa-page .l-mainContent { max-width: 100% !important; padding: 0 !important; } /* --- ヒーロー --- */ .wa-hero { background: linear-gradient(135deg, var(--clr-primary, #092F48) 0%, var(--clr-accent, #1772AE) 100%); color: #fff; text-align: center; padding: 80px 20px 60px; position: relative; overflow: hidden; animation: waHeroIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes waHeroIn { from { opacity: 0; } to { opacity: 1; } } .wa-hero.has-bg { min-height: 400px; display: flex; align-items: center; justify-content: center; } .wa-hero.has-bg::before { content: ""; position: absolute; inset: -60px 0 0 0; background: var(--wa-hero-bg) center / cover no-repeat; z-index: 0; transform: translateY(var(--wa-parallax, 0)); will-change: transform; } .wa-hero.has-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(9, 47, 72, 0.8) 0%, rgba(23, 114, 174, 0.5) 100%); z-index: 1; } .wa-hero__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .wa-hero__title { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 16px; animation: waSlideUp 0.9s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .wa-hero__title sup { font-size: 0.5em; } .wa-hero__subtitle { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; animation: waSlideUp 0.9s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .wa-hero__catchcopy { font-size: 1.6rem; font-weight: 700; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); animation: waSlideUp 0.9s 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes waSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* --- コンテンツ幅 --- */ .wa-content { max-width: 1000px; margin: 0 auto; padding: 0 20px 60px; } /* --- セクション共通 --- */ .wa-section { margin-top: 60px; } .wa-section__heading { font-size: 1.5rem; font-weight: 700; color: var(--clr-primary, #092F48); text-align: center; padding-bottom: 16px; margin-bottom: 32px; border-bottom: 3px solid var(--clr-accent, #1772AE); } /* --- WinActor®とは（2カラム） --- */ .wa-about__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .wa-about__text h4, .wa-about__text strong { color: var(--clr-primary, #092F48); } .wa-about__text p { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); margin-bottom: 12px; } .wa-about__img img { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } /* --- できること --- */ .wa-features__row { display: block; } .wa-features__row.has-img { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .wa-features__img img { width: 100%; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); position: sticky; top: 100px; } .wa-features__list { display: flex; flex-direction: column; gap: 20px; } .wa-feature-item { display: flex; gap: 18px; align-items: center; padding: 20px 24px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--clr-border, #d5dce3); transition: background 0.3s ease; } .wa-feature-item:last-child { border-bottom: none; } .wa-feature-item:hover { background: var(--clr-bg-light, #eef4f9); } .wa-feature-item__num { font-size: 2.2rem; font-weight: 700; color: var(--clr-primary, #092F48); line-height: 1; flex-shrink: 0; min-width: 70px; text-align: center; display: flex; flex-direction: column; align-items: center; border: 2px solid var(--clr-border, #d5dce3); border-radius: 50%; width: 70px; height: 70px; justify-content: center; padding-top: 6px; } .wa-feature-item__point { display: block; font-size: 0.65rem; font-weight: 400; color: var(--clr-text-light, #6b7b8d); letter-spacing: 0.1em; margin-bottom: -2px; } .wa-feature-item__title { font-size: 1rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 0 0 4px; } .wa-feature-item__desc { font-size: 0.88rem; line-height: 1.7; color: var(--clr-text, #333); margin: 0; } /* --- CTAボタン --- */ .wa-cta { text-align: center; margin-top: 40px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .wa-cta--bottom { margin-top: 50px; margin-bottom: 20px; } .wa-btn { display: inline-block; padding: 16px 40px; border-radius: 6px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: all 0.3s ease; letter-spacing: 0.05em; position: relative; overflow: hidden; } .wa-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } .wa-btn:hover::after { transform: translateX(100%); } .wa-btn--primary { background: var(--clr-accent, #1772AE); color: #fff; } .wa-btn--primary:hover { background: var(--clr-primary, #092F48); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(9, 47, 72, 0.3); } .wa-btn--secondary { background: var(--clr-primary, #092F48); color: #fff; } .wa-btn--secondary:hover { background: var(--clr-accent, #1772AE); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(9, 47, 72, 0.3); } .wa-btn--large { padding: 20px 60px; font-size: 1.1rem; } /* --- シナリオ事例 カード --- */ .wa-scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; justify-items: center; } /* 5枚の場合: 下段2枚を中央寄せ */ .wa-scenario-grid .wa-scenario-card:nth-child(4) { grid-column: 1 / 2; } .wa-scenario-grid .wa-scenario-card:nth-child(5) { grid-column: 2 / 3; } /* 4枚の場合: 下段2枚を中央寄せ（gridの自動配置でOK） */ .wa-scenario-card { background: #fff; border: 1px solid var(--clr-border, #d5dce3); border-top: 3px solid var(--clr-accent, #1772AE); border-radius: 4px; padding: 28px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .wa-scenario-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .wa-scenario-card__icon { color: var(--clr-accent, #1772AE); margin-bottom: 12px; text-align: center; } .wa-scenario-card__title { font-size: 1.05rem; font-weight: 700; color: var(--clr-primary, #092F48); text-align: center; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--clr-border, #d5dce3); } .wa-scenario-card__content { font-size: 0.85rem; line-height: 1.7; color: var(--clr-text, #333); } .wa-scenario-card__content h4, .wa-scenario-card__content h5, .wa-scenario-card__content strong { font-size: 0.9rem; color: var(--clr-primary, #092F48); margin: 14px 0 6px; } .wa-scenario-card__content ul { padding-left: 1.2em; margin: 4px 0 8px; } .wa-scenario-card__content li { margin-bottom: 4px; } .wa-scenario-card__content p { margin: 0 0 6px; } @media (max-width: 768px) { .wa-scenario-grid { grid-template-columns: 1fr; gap: 16px; } } /* --- シナリオ事例 / 導入事例 --- */ .wa-scenario__desc, .wa-cases__desc { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); text-align: center; max-width: 700px; margin: 0 auto 24px; } .wa-scenario__img img, .wa-cases__img img { width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } /* --- 導入事例カード --- */ .wa-cases__list { display: flex; flex-direction: column; gap: 40px; } .wa-case-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid var(--clr-border, #d5dce3); } .wa-case-card__header { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: var(--clr-bg-light, #eef4f9); border-bottom: 2px solid var(--clr-accent, #1772AE); } .wa-case-card__num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--clr-accent, #1772AE); color: #fff; font-size: 1rem; font-weight: 700; flex-shrink: 0; } .wa-case-card__title { font-size: 1.1rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 0; } .wa-case-card__desc { font-size: 0.92rem; line-height: 1.7; color: var(--clr-text, #333); padding: 16px 24px 0; margin: 0; text-align: center; } .wa-case-card__img { padding: 20px 24px 24px; } .wa-case-card__img img { width: 100%; height: auto; border-radius: 6px; } /* --- お試し版申込 --- */ .wa-trial__body { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); text-align: center; max-width: 700px; margin: 0 auto; } .wa-trial__body h4 { font-size: 1.1rem; color: var(--clr-primary, #092F48); margin: 24px 0 12px; } .wa-trial__flow-img { max-width: 100%; height: auto; margin: 24px auto; border-radius: 8px; display: block; } /* --- パンくず --- */ .wa-breadcrumb { background: var(--clr-bg-light, #eef4f9); padding: 12px 20px; } .wa-breadcrumb__inner { max-width: 1000px; margin: 0 auto; font-size: 0.85rem; color: var(--clr-text-light, #6b7b8d); } .wa-breadcrumb__inner a { color: var(--clr-accent, #1772AE); text-decoration: none; } .wa-breadcrumb__inner a:hover { text-decoration: underline; } .wa-breadcrumb__sep { margin: 0 8px; } /* --- アニメーション --- */ .wa-anim { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .wa-anim.is-visible { opacity: 1; transform: translateY(0); } .wa-anim[data-anim="fade-left"] { transform: translateX(-50px) translateY(0); } .wa-anim[data-anim="fade-right"] { transform: translateX(50px) translateY(0); } .wa-anim[data-anim="fade-left"].is-visible, .wa-anim[data-anim="fade-right"].is-visible { transform: translateX(0) translateY(0); } .wa-anim.is-visible .wa-section__heading { animation: waHeadingLine 0.6s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes waHeadingLine { from { opacity: 0; border-bottom-color: transparent; letter-spacing: 0.15em; } to { opacity: 1; border-bottom-color: var(--clr-accent, #1772AE); letter-spacing: 0.03em; } } /* --- レスポンシブ --- */ @media (max-width: 768px) { .wa-hero__title { font-size: 2rem; } .wa-hero__catchcopy { font-size: 1.3rem; } .wa-about__row { grid-template-columns: 1fr; } .wa-features__row.has-img { grid-template-columns: 1fr; } .wa-features__img img { position: static; max-width: 400px; margin: 0 auto 24px; display: block; } .wa-btn { padding: 14px 32px; } } @media (max-width: 480px) { .wa-hero { padding: 60px 16px 40px; } .wa-hero__title { font-size: 1.6rem; } .wa-hero__subtitle { font-size: 1rem; } .wa-hero__catchcopy { font-size: 1.1rem; } .wa-section__heading { font-size: 1.2rem; } .wa-feature-item { flex-direction: column; gap: 10px; padding: 18px; } .wa-feature-item__num { font-size: 1.5rem; } .wa-cta { flex-direction: column; align-items: center; } .wa-btn { width: 100%; max-width: 300px; } } @media (prefers-reduced-motion: reduce) { .wa-anim, .wa-hero, .wa-hero__title, .wa-hero__subtitle, .wa-hero__catchcopy { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================ SAQRA® サブページ (.sakura-sub-) ============================================================ */ /* --- SWELL デフォルト非表示 --- */ body:has(.sakura-sub-page) .l-topTitleArea, body:has(.sakura-sub-page) .p-breadcrumb, .sakura-sub-page .l-topTitleArea, .sakura-sub-page .p-breadcrumb { display: none !important; } .sakura-sub-page .l-mainContent .post_content, .sakura-sub-page .l-mainContent .l-mainContent__inner, .sakura-sub-page .l-mainContent { max-width: 100% !important; padding: 0 !important; } /* --- ヒーロー --- */ .sakura-sub-hero { background: linear-gradient(135deg, var(--clr-primary, #092F48) 0%, var(--clr-accent, #1772AE) 100%); color: #fff; text-align: center; padding: 48px 20px 36px; } .sakura-sub-hero__inner { max-width: 800px; margin: 0 auto; } .sakura-sub-hero__label { font-size: 0.9rem; opacity: 0.7; letter-spacing: 0.12em; margin-bottom: 4px; } .sakura-sub-hero__label sup { font-size: 0.6em; } .sakura-sub-hero__title { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.06em; } /* --- タブナビ --- */ .sakura-sub-nav { background: #fff; border-bottom: 2px solid var(--clr-border, #d5dce3); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .sakura-sub-nav__inner { max-width: 800px; margin: 0 auto; display: flex; justify-content: center; } .sakura-sub-nav__tab { display: flex; align-items: center; gap: 4px; padding: 16px 24px; font-size: 0.9rem; font-weight: 600; color: var(--clr-text, #333); text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.3s ease; white-space: nowrap; } .sakura-sub-nav__tab:hover { color: var(--clr-accent, #1772AE); border-bottom-color: var(--clr-accent, #1772AE); } .sakura-sub-nav__tab.is-current { color: var(--clr-accent, #1772AE); border-bottom-color: var(--clr-accent, #1772AE); font-weight: 700; } .sakura-sub-nav__ext { font-size: 0.7em; opacity: 0.5; } /* --- コンテンツ --- */ .sakura-sub-content { max-width: 1000px; margin: 0 auto; padding: 40px 20px 60px; } .sakura-sub-content__inner { max-width: 800px; margin: 0 auto; } /* エディタ本文の整形 */ .sakura-sub-content__inner h3 { font-size: 1.4rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 40px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--clr-accent, #1772AE); } .sakura-sub-content__inner h4 { font-size: 1.15rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 32px 0 12px; } .sakura-sub-content__inner p { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); margin-bottom: 16px; } .sakura-sub-content__inner img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; display: block; } .sakura-sub-content__inner iframe { max-width: 100%; margin: 24px auto; display: block; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .sakura-sub-content__inner hr { border: none; border-top: 1px solid var(--clr-border, #d5dce3); margin: 32px 0; } .sakura-sub-content__inner strong { color: var(--clr-primary, #092F48); } .sakura-sub-content__inner a { color: var(--clr-accent, #1772AE); text-decoration: underline; text-underline-offset: 3px; } .sakura-sub-content__inner a:hover { color: var(--clr-primary, #092F48); } .sakura-sub-content__inner a:has(img) { text-decoration: none; } .sakura-sub-content__inner a img { transition: opacity 0.3s ease; } .sakura-sub-content__inner a:hover img { opacity: 0.85; } /* --- レスポンシブ --- */ @media (max-width: 768px) { .sakura-sub-hero__title { font-size: 1.4rem; } .sakura-sub-nav__tab { padding: 12px 14px; font-size: 0.8rem; } } @media (max-width: 480px) { .sakura-sub-hero { padding: 36px 16px 28px; } .sakura-sub-hero__title { font-size: 1.2rem; } .sakura-sub-nav__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; } .sakura-sub-nav__tab { padding: 12px 12px; font-size: 0.75rem; flex-shrink: 0; } } /* ============================================================ ユーザーの声 / 導入企業事例 / 満足度調査 (.user-voice-) エディタ本文に貼り付けるHTML用CSS ============================================================ */ .user-voices { max-width: 800px; margin: 0 auto; } .user-voice { margin-bottom: 48px; } .user-voice-h2 { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--clr-primary, #092F48) !important; text-align: center !important; padding-bottom: 16px !important; margin: 0 0 32px !important; border-bottom: 3px solid var(--clr-accent, #1772AE) !important; background: none !important; } .user-voice-box { display: flex; flex-direction: column; gap: 24px; } .user-voice-item { border: 1px solid var(--clr-border, #d5dce3); border-radius: 4px; overflow: hidden; background: #fff; } .user-voice-container { display: flex; gap: 0; } /* 偶数番目のカード: 左右反転（顔が右側） */ .user-voice-item:nth-child(even) .user-voice-container { flex-direction: row-reverse; } .user-voice-container-left { flex-shrink: 0; width: 180px; display: flex; flex-direction: column; align-items: center; background: var(--clr-bg-light, #eef4f9); padding: 0 0 20px; } .user-voice-h3 { width: 100%; background: linear-gradient(135deg, var(--clr-primary, #092F48), var(--clr-accent, #1772AE)); padding: 12px 8px; text-align: center; margin-bottom: 16px; } .user-voice-h3 h3 { color: #fff !important; font-size: 0.95rem !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; } .user-voice-h3-mobil-inner { display: none; } .user-voice-img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .user-voice-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; margin: 0 !important; } .user-voice-container-right { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; } .user-voice-text { font-size: 0.92rem; line-height: 1.8; color: var(--clr-text, #333); } .user-voice-text p { margin: 0; } .user-questionnaire-title { text-align: center; margin-bottom: 32px; } .user-questionnaire-cath { font-size: 1.6rem !important; font-weight: 700 !important; color: var(--clr-accent, #1772AE) !important; margin: 0 0 12px !important; background: none !important; border: none !important; } .user-questionnaire-title h4 { font-size: 0.95rem !important; font-weight: 400 !important; color: var(--clr-text, #333) !important; line-height: 1.8 !important; background: none !important; } .user-questionnaire { margin-bottom: 48px; } .user-questionnaire-items { display: flex; flex-direction: column; gap: 32px; } .user-questionnaire-item { background: var(--clr-bg-light, #eef4f9); border-radius: 10px; padding: 32px; } .user-questionnaire-inner { display: flex; flex-direction: column; gap: 20px; align-items: center; } .user-questionnaire-graph { width: 100%; max-width: 600px; margin: 0 auto; } .user-questionnaire-graph img { width: 100%; height: auto; border-radius: 8px; margin: 0 !important; } .user-questionnaire-list { width: 100%; max-width: 600px; } .user-questionnaire-list-items { list-style: none !important; padding: 0 !important; margin: 0 !important; } .user-questionnaire-list-items li { font-size: 0.9rem; line-height: 1.7; color: var(--clr-text, #333); padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .user-questionnaire-list-items li:first-child { font-weight: 700; color: var(--clr-primary, #092F48); font-size: 0.95rem; border-bottom: 2px solid var(--clr-accent, #1772AE); padding-bottom: 8px; margin-bottom: 4px; } .user-questionnaire-list-items li:last-child { border-bottom: none; } .user-questionnaire-text { text-align: center; margin-top: 24px; } .user-questionnaire-text p { font-size: 1.1rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 4px 0; } .user-voice-btn { margin-top: 48px; } .user-voice-btn-background { background: linear-gradient(135deg, var(--clr-primary, #092F48), var(--clr-accent, #1772AE)); border-radius: 10px; padding: 40px 24px; text-align: center; } .user-voice-btn-background h4 { color: #fff !important; font-size: 1.1rem !important; line-height: 1.7 !important; margin: 0 0 20px !important; background: none !important; } .user-voice-btn-background .nukigatanew-btn2 a { display: inline-block; background: #fff; color: var(--clr-primary, #092F48) !important; font-size: 1.1rem !important; font-weight: 700; padding: 16px 40px !important; border-radius: 6px; text-decoration: none; transition: all 0.3s ease; } .user-voice-btn-background .nukigatanew-btn2 a:hover { background: var(--clr-bg-light, #eef4f9); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .user-voice-container, .user-voice-item:nth-child(even) .user-voice-container { flex-direction: column; } .user-voice-container-left { width: 100%; flex-direction: row; padding: 0; gap: 16px; align-items: center; } .user-voice-h3 { margin-bottom: 0; flex: 1; } .user-voice-h3-inner { display: none; } .user-voice-h3-mobil-inner { display: block; } .user-voice-h3-mobil-inner h3 { font-size: 1rem !important; } .user-voice-img { width: 70px; height: 70px; margin: 8px 12px 8px 0; flex-shrink: 0; } .user-voice-container-right { padding: 16px 20px; } .user-questionnaire-graph { max-width: 400px; } } @media (max-width: 480px) { .user-voice-h2 { font-size: 1.2rem !important; } .user-questionnaire-cath { font-size: 1.3rem !important; } .user-voice-btn-background { padding: 28px 16px; } .user-voice-btn-background .nukigatanew-btn2 a { font-size: 0.95rem !important; padding: 14px 24px !important; } } /* ============================================================ WinActor® サブページ (.wa-sub-) ============================================================ */ body:has(.wa-sub-page) .l-topTitleArea, body:has(.wa-sub-page) .p-breadcrumb, .wa-sub-page .l-topTitleArea, .wa-sub-page .p-breadcrumb { display: none !important; } .wa-sub-page .l-mainContent .post_content, .wa-sub-page .l-mainContent .l-mainContent__inner, .wa-sub-page .l-mainContent { max-width: 100% !important; padding: 0 !important; } .wa-sub-hero { background: linear-gradient(135deg, var(--clr-primary, #092F48) 0%, var(--clr-accent, #1772AE) 100%); color: #fff; text-align: center; padding: 48px 20px 36px; } .wa-sub-hero__inner { max-width: 800px; margin: 0 auto; } .wa-sub-hero__label { font-size: 0.9rem; opacity: 0.7; letter-spacing: 0.12em; margin-bottom: 4px; } .wa-sub-hero__label sup { font-size: 0.6em; } .wa-sub-hero__title { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.06em; } .wa-sub-nav { background: #fff; border-bottom: 2px solid var(--clr-border, #d5dce3); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .wa-sub-nav__inner { max-width: 800px; margin: 0 auto; display: flex; justify-content: center; } .wa-sub-nav__tab { display: flex; align-items: center; gap: 4px; padding: 16px 24px; font-size: 0.9rem; font-weight: 600; color: var(--clr-text, #333); text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.3s ease; white-space: nowrap; } .wa-sub-nav__tab:hover { color: var(--clr-accent, #1772AE); border-bottom-color: var(--clr-accent, #1772AE); } .wa-sub-nav__tab.is-current { color: var(--clr-accent, #1772AE); border-bottom-color: var(--clr-accent, #1772AE); font-weight: 700; } .wa-sub-nav__ext { font-size: 0.7em; opacity: 0.5; } .wa-sub-content { max-width: 1000px; margin: 0 auto; padding: 40px 20px 60px; } .wa-sub-content__inner { max-width: 800px; margin: 0 auto; } .wa-sub-content__inner h3 { font-size: 1.4rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 40px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--clr-accent, #1772AE); } .wa-sub-content__inner h4 { font-size: 1.15rem; font-weight: 700; color: var(--clr-primary, #092F48); margin: 32px 0 12px; } .wa-sub-content__inner p { font-size: 0.95rem; line-height: 1.8; color: var(--clr-text, #333); margin-bottom: 16px; } .wa-sub-content__inner img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; display: block; } .wa-sub-content__inner iframe { max-width: 100%; margin: 24px auto; display: block; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .wa-sub-content__inner hr { border: none; border-top: 1px solid var(--clr-border, #d5dce3); margin: 32px 0; } .wa-sub-content__inner strong { color: var(--clr-primary, #092F48); } .wa-sub-content__inner a { color: var(--clr-accent, #1772AE); text-decoration: underline; text-underline-offset: 3px; } .wa-sub-content__inner a:hover { color: var(--clr-primary, #092F48); } .wa-sub-content__inner a:has(img) { text-decoration: none; } .wa-sub-content__inner a img { transition: opacity 0.3s ease; } .wa-sub-content__inner a:hover img { opacity: 0.85; } @media (max-width: 768px) { .wa-sub-hero__title { font-size: 1.4rem; } .wa-sub-nav__tab { padding: 12px 14px; font-size: 0.8rem; } } @media (max-width: 480px) { .wa-sub-hero { padding: 36px 16px 28px; } .wa-sub-hero__title { font-size: 1.2rem; } .wa-sub-nav__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; } .wa-sub-nav__tab { padding: 12px 12px; font-size: 0.75rem; flex-shrink: 0; } } /* ============================================================ WinActor® サブページ本文用 (.winactor-wiw / .winactor-text-area-) ============================================================ */ .winactor-wiw { max-width: 800px; margin: 0 auto; } .wiw-top-box { display: flex; gap: 32px; align-items: stretch; } .winactor-text-area-items { display: flex; flex-direction: column; gap: 24px; } .winactor-text-area-item { display: flex !important; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--clr-border, #d5dce3); } .winactor-text-area-item:last-child { border-bottom: none; } .winactor-text-area-item figure { flex-shrink: 0; width: 60px; height: 60px; margin: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--clr-border, #d5dce3); border-radius: 50%; padding: 8px; background: #fff; } .winactor-text-area-item figure img { max-width: 40px !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; } .winactor-text-area-item h6 { font-size: 1rem !important; font-weight: 700 !important; color: var(--clr-primary, #092F48) !important; margin: 0 !important; line-height: 1.6 !important; } .winactor-text-area-item p { display: none; } @media (max-width: 480px) { .winactor-text-area-item { gap: 12px; padding: 12px 16px; } .winactor-text-area-item figure { width: 50px; height: 50px; padding: 6px; } .winactor-text-area-item h6 { font-size: 0.9rem !important; } } /* --- シナリオ事例カード（本文貼り付け用） --- */ .scenario-box { display: block !important; } .scenario-box .winactor-text-area-items { width: 100%; } .scenario-box .winactor-text-area-items>h4 { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--clr-primary, #092F48) !important; margin: 36px 0 0 !important; padding: 12px 0 10px !important; border-bottom: 2px solid var(--clr-accent, #1772AE) !important; background: none !important; } .scenario-box .winactor-text-area-items>h4:first-child { margin-top: 0 !important; } .scenario-box .winactor-text-area-item { display: grid !important; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; padding: 20px 0 24px; border-bottom: 1px solid var(--clr-border, #d5dce3); } .scenario-box .winactor-text-area-item:last-child { border-bottom: none; } .scenario-box .winactor-text-area-item figure { width: 100% !important; height: auto !important; border: none !important; border-radius: 8px !important; padding: 0 !important; background: var(--clr-bg-light, #eef4f9) !important; overflow: hidden; } .scenario-box .winactor-text-area-item figure img { max-width: 100% !important; width: 100% !important; height: auto !important; border-radius: 8px !important; margin: 0 !important; } .scenario-box .winactor-text-area-item p { display: block; margin: 0 0 8px; } .scenario-box .winactor-text-area-item strong { color: var(--clr-primary, #092F48); font-size: 0.95rem; display: block; margin: 12px 0 4px; } .scenario-box .winactor-text-area-item strong:first-child { margin-top: 0; } .scenario-box .winactor-text-area-item a { color: var(--clr-accent, #1772AE); text-decoration: underline; } @media (max-width: 768px) { .scenario-box .winactor-text-area-item { grid-template-columns: 1fr; gap: 16px; } .scenario-box .winactor-text-area-item figure { max-width: 200px; margin: 0 auto; } } /* ===== [①修正 2026-06-11] グローバルメニューを上部右寄せ ===== */ .l-header .l-header__inner .l-header__gnav, .l-header .l-header__inner .l-header__gnav .c-gnav { justify-content: flex-end !important; } /* ===== [⑩修正 2026-06-11] CTAボタンに「＞」 ===== */ a.news-ticker__more::after, .problems-card__btn::after, a.nk-btn::after, a.pd-btn::after, a.ps-product__btn::after, a.wp-card__btn::after, a.wp-cta__btn::after, a.ps-cta__btn::after, a.recruit-cta__btn--primary::after, a.recruit-cta__btn--secondary::after, a.recruit-sidebar__card-btn::after, a.ps-single-sidebar__cta-btn::after, a.thankyou-card__btn--home::after, a.about-contact__btn--form::after { content: "＞"; margin-left: .4em; font-size: .8em; font-weight: 700; display: inline-block; line-height: 1; } /* ===== [⑨修正 2026-06-11] 大創について ブランディング メインコピー ===== */ .about-maincopy{padding:84px 24px;background:linear-gradient(180deg,#f7fafc 0%,#ffffff 100%);text-align:center;} .about-maincopy__inner{max-width:900px;margin:0 auto;} .about-maincopy__tagline-jp{font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--color_main,#1772AE);margin:0;} .about-maincopy__tagline-en{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9aa7b3;margin:6px 0 0;} .about-maincopy__catch{font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.3;color:#0e2a43;margin:26px 0 10px;} .about-maincopy__sub{font-size:clamp(16px,2.4vw,21px);font-weight:600;color:var(--color_main,#1772AE);margin:0 0 36px;} .about-maincopy__body{font-size:16px;line-height:2.15;color:#3a4a57;} .about-maincopy__closing{margin:30px 0 0;font-size:clamp(17px,2.6vw,23px);font-weight:700;letter-spacing:.04em;color:#0e2a43;} @media(max-width:768px){.about-maincopy{padding:56px 20px;}.about-maincopy__body{font-size:15px;line-height:1.95;}} /* ===== [⑦修正 2026-06-12] キーワード即時表示エリア ===== */ .nk-content{margin-top:26px;background:#fff;border:1px solid #cdd9e4;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(14,42,67,.06);} .nk-content__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#0E3A5C;color:#fff;padding:12px 20px;} .nk-content__title{font-weight:700;font-size:15px;} .nk-content__actions{display:flex;align-items:center;gap:18px;} .nk-content__open{color:#fff !important;font-size:13px;font-weight:600;text-decoration:none;} .nk-content__close{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 2px;} .nk-content__body{padding:28px 30px;max-height:820px;overflow:auto;} .nk-content__body img{max-width:100%;height:auto;} .nk-content__loading{color:#7d8e9c;} /* ===== [⑧修正 2026-06-12] 技術支援TOP（DSCセミナー構成） ===== */ .ts-section{margin:54px 0;} .ts-section__heading{font-size:25px;font-weight:700;color:#0e2a43;border-left:6px solid #1772AE;padding-left:14px;margin:0 0 8px;} .ts-section__desc{color:#3a4a57;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;} .ts-about-link{font-weight:600;font-size:14px;} .ts-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;} @media(max-width:768px){.ts-cols{grid-template-columns:1fr;}} .ts-list{background:#fff;border:1px solid #e2e9f0;border-radius:10px;padding:6px 22px 10px;} .ts-list__head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;color:#125B8C;font-size:17px;padding:12px 0;border-bottom:2px solid #125B8C;} .ts-list__more{font-size:13px;font-weight:600;white-space:nowrap;} .ts-list__items{list-style:none;margin:0;padding:0;} .ts-list__items li{border-bottom:1px dashed #dbe4ec;} .ts-list__items li:last-child{border-bottom:none;} .ts-list__items a{display:flex;gap:14px;align-items:baseline;padding:13px 2px;text-decoration:none;color:#22313d;} .ts-list__items a:hover span{color:#1772AE;text-decoration:underline;} .ts-list__items time{font-size:12.5px;color:#7d8e9c;white-space:nowrap;} .ts-list__empty{color:#7d8e9c;padding:13px 2px;} .ts-college__head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;} .ts-college__head .ts-section__heading{margin:0;} /* ===== [⑦修正 2026-06-12] 360°リングイラスト（暫定版） ===== */ .sv-circles .sv-ring{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;} .sv-ring__spin{transform-origin:50% 50%;animation:svRingSpin 36s linear infinite;} @keyframes svRingSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){.sv-ring__spin{animation:none;}} /* ===== [トップ動画 2026-06-12] 動画ヒーロー ===== */ .p-mainVisual.-video-hero{position:relative;overflow:hidden;background:#0b2740;} .-video-hero .video-hero__media{display:block;width:100%;height:auto;} .-video-hero .video-hero__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:rgba(6,28,45,.16);padding:24px;} .video-hero__title{color:#fff;font-size:clamp(26px,4.6vw,56px);font-weight:700;line-height:1.45;letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.45);margin:0;} .video-hero__divider{width:min(620px,62%);height:1px;background:rgba(255,255,255,.85);margin:clamp(14px,2.6vw,30px) 0;} .video-hero__sub{color:#fff;font-size:clamp(12px,1.55vw,18px);font-weight:500;line-height:2.05;letter-spacing:.04em;text-shadow:0 1px 12px rgba(0,0,0,.5);margin:0;} @media (max-width:768px){ .-video-hero .video-hero__overlay{padding:16px;} .video-hero__sub{line-height:1.8;} } /* [トップ動画 2026-06-12] テーマ見出しスタイルへの特異性対策 */ .p-mainVisual.-video-hero .video-hero__title{color:#fff !important;font-size:clamp(26px,4.6vw,56px) !important;font-weight:700 !important;line-height:1.45 !important;letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.45);margin:0 !important;} .p-mainVisual.-video-hero .video-hero__sub{color:#fff !important;font-size:clamp(12px,1.55vw,18px) !important;font-weight:500;line-height:2.05;text-shadow:0 1px 12px rgba(0,0,0,.5);margin:0;} /* ===== [アイコン 2026-06-16] メガメニュー カテゴリーアイコン ===== */ .mega-links--icon li a{display:flex;align-items:center;gap:8px;line-height:1.3;} .mega-ic{width:22px;height:22px;flex:0 0 22px;object-fit:contain;} .mega-ic--none{display:inline-block;width:22px;height:22px;flex:0 0 22px;} .mega-ic-label{flex:1;} /* ===== [615修正 2026-07-02] TOP動画の高さを抑制 ===== */ .-video-hero .video-hero__media{max-height:min(72vh,680px);object-fit:cover;} /* ===== [615海外 2026-07-02] EN製品ページ カタログDLバナー ===== */ .nk-catalog{text-align:center;margin:40px auto 8px;} .nk-catalog__img{max-width:720px;width:100%;height:auto;} /* ===== [商品一覧カード改善 2026-07-02] 製品系タクソノミー一覧 ===== アイキャッチが「写真＋寸法図」の横長合成のため、左端（写真部分）のみ表示。 あわせてカードを3列化してコンパクトに（張様ご要望）。 */ .tax-products .archive-card__img, .tax-machine-section .archive-card__img, .tax-material .archive-card__img, .tax-problem .archive-card__img { object-position: left center; } @media (min-width: 1100px) { .tax-products .archive-layout__main .archive-grid, .tax-machine-section .archive-layout__main .archive-grid, .tax-material .archive-layout__main .archive-grid, .tax-problem .archive-layout__main .archive-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } /* ===== [615海外 2026-07-02] ENトップ イメージスライド（2枚クロスフェード） ===== */ .-en-hero{position:relative;overflow:hidden;} .-en-hero .en-hero__slide{position:absolute;inset:0;opacity:0;animation:enHeroFade 14s infinite;} .-en-hero .en-hero__slide--1{position:relative;animation-delay:0s;} .-en-hero .en-hero__slide--2{animation-delay:7s;} .-en-hero .en-hero__slide img{display:block;width:100%;height:auto;max-height:min(72vh,680px);object-fit:cover;} .-en-hero .en-hero__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:rgba(6,28,45,.22);padding:24px;} .-en-hero .en-hero__title{color:#fff !important;font-size:clamp(24px,4vw,48px);font-weight:700;line-height:1.4;letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.5);margin:0 !important;border:none;background:none;padding:0;} .-en-hero .en-hero__title::before,.-en-hero .en-hero__title::after{display:none !important;content:none !important;} .-en-hero .en-hero__sub{color:#fff;font-size:clamp(13px,1.6vw,19px);font-weight:500;letter-spacing:.05em;text-shadow:0 1px 12px rgba(0,0,0,.5);margin:14px 0 0;} @keyframes enHeroFade{0%{opacity:0}7%{opacity:1}50%{opacity:1}57%{opacity:0}100%{opacity:0}} @media (prefers-reduced-motion: reduce){ .-en-hero .en-hero__slide{animation:none;} .-en-hero .en-hero__slide--1{opacity:1;} } /* ====================================================== [0706日本サイト確認 2026-07-06] 一括修正 ====================================================== */ /* --- 事業別カラーパレット（先方提供参考画像「サービスの全体像」準拠） --- */ :root { --daiso-c-die: #232E52; /* 抜型ソリューション */ --daiso-c-mat: #3E4C80; /* 資材・機材ソリューション */ --daiso-c-tech: #5F6DA6; /* 技術支援ソリューション */ --daiso-c-dx: #94A0C9; /* DX支援ソリューション */ } /* --- #1 ヘッダー: キャッチコピーをロゴの上に（2行目は head_bar.php で削除済） --- */ @media (min-width: 960px) { .l-header { padding-top: 34px !important; } /* SWELL親の .l-header__bar{position:relative} を解除し、絶対配置の基準を .l-header にする */ .l-header > .l-header__bar { position: static !important; } .l-header .l-header__bar .header-bar__catch { position: absolute; top: 9px; left: 40px; } } /* --- #2 TOP 360°抜型ソリューション: 丸背景を事業別色に --- */ .sv-orbit--tl, .sv-orbit--tl:hover { background: var(--daiso-c-die); } .sv-orbit--tr, .sv-orbit--tr:hover { background: var(--daiso-c-mat); } .sv-orbit--bl, .sv-orbit--bl:hover { background: var(--daiso-c-dx); } .sv-orbit--br, .sv-orbit--br:hover { background: var(--daiso-c-tech); } .sv-orbit:hover { filter: brightness(1.12); } /* --- #3 TOP 大創ができること --- */ /* パッケージ製作の流れ: 「抜型製作」の強調色を解除（全ステップ同色） */ .ab-flow__step--hl { background: #D0DEE8; color: #092F48; } /* ソリューションカード: 事業別色 */ .ab-svc--dx .ab-svc__title { background: var(--daiso-c-dx); } .ab-svc--mat .ab-svc__title { background: var(--daiso-c-mat); } .ab-svc--accent { border-color: var(--daiso-c-die); box-shadow: 0 2px 12px rgba(35, 46, 82, 0.18); } .ab-svc--accent .ab-svc__title { background: var(--daiso-c-die); } /* バー2本: リンク化(aタグ)＋事業別色 */ a.ab-wide-bar, a.ab-full-bar { display: block; text-decoration: none; } .ab-wide-bar { background: var(--daiso-c-mat); } .ab-full-bar { background: var(--daiso-c-tech); } /* --- #7 抜型製作ページ: お問い合わせCTA帯に総合窓口を追加 --- */ .nk-cta-band__tel { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; line-height: 1.4; } .nk-cta-band__tel-num { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; } .nk-cta-band__tel-num a { color: inherit; } .nk-cta-band__tel-label, .nk-cta-band__tel-note { font-size: 0.8rem; opacity: 0.92; } /* --- #11 SAQRAページ: DX支援 3カラムボタン --- */ .sakura-dx-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 28px auto 8px; padding: 0 20px; } .sakura-dx-nav__btn { display: flex; align-items: center; justify-content: center; padding: 16px 12px; background: var(--daiso-c-dx); color: #fff; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; border-radius: 6px; text-decoration: none; text-align: center; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .sakura-dx-nav__btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 6px 18px rgba(0, 82, 117, 0.2); } .sakura-dx-nav__btn.is-current { background: var(--daiso-c-die); } @media (max-width: 599px) { .sakura-dx-nav { grid-template-columns: 1fr; } } /* --- #4/#5 抜型製作ページ: 静的タブ(素材別/業種別)のリンク無し項目 --- */ span.nk-tag { opacity: 0.65; cursor: default; } /* --- #9 抜型ページ: モーダルの詳細ページリンク --- */ .nk-modal__link { display: inline-block; margin-top: 16px; } /* ====================================================== [スタッフ確認反映 2026-07-06] 追加修正 ====================================================== */ /* nukigata CTA帯: メールアイコン＋見出しを横並びに（最下部配置版） */ .nk-cta-band__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; } .nk-cta-band__head .nk-cta-band__icon { margin: 0; font-size: 1.6rem; line-height: 1; } .nk-cta-band__head .nk-cta-band__text { margin: 0; } .nk-cta-band--bottom { margin-top: 56px; } .nk-cta-band--bottom .nk-cta-band__tel { margin: 0 0 18px; } /* ====================================================== [0706追記対応 2026-07-06] 日本語赤文字追記＋海外シート対応 ====================================================== */ /* --- TOP: 「打抜き加工 ソリューション検索」見出し。SPのみ全角スペース位置で改行 --- */ .search-header__title .ss-br { display: none; } /* --- nukigata/product モーダル: ヘッダーより前面に（重なり順調整） --- */ .nk-modal { z-index: 100000 !important; } /* --- モバイル: ヘッダー/追従ヘッダーを不透過の白に（ロゴが浮いて見える対策） --- */ @media (max-width: 959px) { .l-header, .l-fixHeader, .l-fixHeader::before { background: #fff !important; opacity: 1; } } /* --- フッター: 白ロゴ(logo_b.png)のサイズ --- */ .footer-logo img { display: block; } /* --- EN products: Contact us バナー --- */ .nk-contact-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 18px 20px; border-radius: 6px; background: linear-gradient(135deg, #1a4b7a, #2a6cb0); color: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .nk-contact-banner:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 82, 117, 0.25); } .nk-contact-banner__icon { font-size: 1.4rem; line-height: 1; } .nk-contact-banner__text { font-size: 1.1rem; font-weight: 900; letter-spacing: .04em; } .nk-contact-banner__sub { font-size: .82rem; opacity: .9; } /* --- EN sakura: ヒーロータイトル中央寄せ --- */ .sakura-hero--center .sakura-hero__inner { text-align: center; align-items: center; justify-content: center; } /* --- TOP: ソリューション検索見出しのSP表示（2行・中央・はみ出し防止） --- */ @media (max-width: 599px) { .solution-search .search-header__title { display: block !important; max-width: 100%; text-align: center; font-size: 1.3rem !important; letter-spacing: 0.06em; line-height: 1.5; } .solution-search .search-header__title .search-header__icon { vertical-align: -3px; margin-right: 4px; } .search-header__title .ss-br { display: inline; } } /* ===== [0707] ENトップ・EN Die-cutting（張様2026-07-07メール指示） ===== */ .en-top-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px} .en-top-sec__title{font-size:28px;color:#00406B;margin:0;letter-spacing:.02em} .en-top-sec__more{font-size:14px;color:#193783;white-space:nowrap} .en-top-sol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 40px} .en-top-sol li{border-bottom:1px solid #d7e2ec;padding:10px 4px;margin:0} .en-top-sol a{color:#193783;text-decoration:none;font-size:15px} .en-top-sol a:hover{text-decoration:underline} .en-top-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .en-top-card{display:block;background:#fff;border:1px solid #e3e9f0;border-radius:8px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:box-shadow .2s} .en-top-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12)} .en-top-card__thumb img{width:100%;height:190px;object-fit:cover;display:block} .en-top-card__title{padding:14px 16px;font-size:15px;font-weight:600;margin:0;color:#333} .en-top-spec__dl{margin:0 0 20px} .en-top-spec__dl img,.en-top-spec__l img,.en-top-spec__s img{width:100%;height:auto;display:block;border-radius:6px} .en-top-spec__l{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px} .en-top-spec__s{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .nk-en-diecuttings{padding:48px 0 72px} @media (max-width:959px){ .en-top-sol{grid-template-columns:1fr} .en-top-cards{grid-template-columns:1fr} .en-top-spec__l{grid-template-columns:1fr} .en-top-spec__s{grid-template-columns:repeat(2,1fr)} } /* [0707] ENトップ見出し: SWELL .post_content h2装飾の打ち消し */ .post_content .en-top-sec__title{background:none !important;color:#00406B !important;padding:0 !important;border:none !important} .post_content .en-top-sec__title::before{content:none !important} /* [0708] SAQRA(Die design)ヒーロータイトルを白文字に（SWELLのh1装飾を打ち消し）。張様2026-07-08メール #9 */ .sakura-hero__title{color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important;border:none !important;padding:0 !important;} .sakura-hero__title::before,.sakura-hero__title::after{display:none !important;content:none !important;} .post_content .sakura-hero__title{color:#fff !important;background:none !important;} /* [0709] Global Networkページ 地域見出し(Asia/Europe等): SWELL h3装飾バーと文字の重なり修正（左パディング確保） */ .nw-dist h3{ padding-left: 0.85em !important; } /* [0709] About各ページのヒーロータイトル「About DAISO」を白文字に（SWELLのh1装飾/-webkit-text-fill-colorを打ち消し）。張様指示。親/Activities/Concept/History/Global Network 全about共通 */ .about-hero__title-en{color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important;border:none !important;} .about-hero__title-en::before,.about-hero__title-en::after{display:none !important;content:none !important;} /* [0709] About下部「Contact Us」見出しを白文字に（ヒーロー同様SWELLのh2装飾/-webkit-text-fill-colorを打ち消し）。張様指示 */ .about-contact__title{color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important;border:none !important;} .about-contact__title::before,.about-contact__title::after{display:none !important;content:none !important;} /* [0709] ENフッター: 抜型製作列(JA限定)が無いため実質3列。空の4列目で横幅が不均等になるのを解消し3列を均等化（張様指示）。デスクトップのみ、SPは既存レスポンシブ優先 */ @media (min-width: 960px) { html[lang="en"] .footer-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* [0709] フッター最下部（ポリシーメニュー行＋コピーライト）を上のサイトマップ列と左右幅を揃えて中央寄せ。SWELL既定の内側padding(48px)で右に寄って見えるのを解消（張様指示）。デスクトップのみ、SPは既存レスポンシブ優先 */ @media (min-width: 960px) { .l-footer__foot .l-container { padding-left: 0; padding-right: 0; } /* [0709] ポリシー行: 各リンクを縦線間のセル中央に。等分割セル＋各セル内でテキスト中央（張様指示） */ .l-footer__foot .l-footer__nav { width: 100%; max-width: 100%; margin: 0 auto; justify-content: center; align-items: stretch; gap: 0; flex-wrap: nowrap; } .l-footer__foot .l-footer__nav > li { flex: 1 1 auto; min-width: 0; } .l-footer__foot .l-footer__nav > li > a { display: block; width: 100%; text-align: center; } } /* [0709] フッター最下部に下方向のゆとりを追加（コピーライト周りの余白拡大）張様指示 */ .l-footer__foot { padding-bottom: 56px; } .l-footer__foot .l-footer__nav { margin-bottom: 22px; } .l-footer__foot .copyright { margin-top: 18px; } /* [0709] EN SAQRAヒーロー: メインタイトルもサブタイトルと同じく中央寄せ（張様指示） */ .sakura-hero--center .sakura-hero__title { text-align: center !important; } /* [0709] problem-solution詳細ページ: サイト共通 .single h1-h6{color:var(--color_main)!important} で ヒーロータイトル＆本文h2見出しが濃紺になり、暗い背景（ヒーロー／SWELLのh2ネイビー帯）に埋もれて読めない。 → 白文字化（張様指示・Die-cutting本文可読性）。specificityで .single h1/h2 を上回るよう調整 */ .ps-single-hero .ps-single-hero__title { color: #fff !important; -webkit-text-fill-color: #fff !important; text-align: center !important; } /* [0709] problem-solution本文h2: マージン・パディングで余裕を持たせ、グラデ＋左アクセント＋角丸＋影で見出しデザインを強化（張様指示） */ [class*="ps-story-card"] h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, #2b3a52 0%, #405681 100%) !important; padding: 0.7em 1.15em !important; margin: 2.4em 0 1.4em !important; border-left: 6px solid #1fa0e0; border-radius: 8px; box-shadow: 0 4px 14px rgba(48, 64, 89, 0.22); line-height: 1.45; } /* [0709] 記事本文h2見出し内のリンク文字を白に（h2は青グラデ帯で白文字指定だが、a要素がリンク色(青)のままで背景に埋もれるため）張様指示 */ /* 本文h2見出しは濃紺/青帯の上に載る想定。.single h1-h6{color:navy!important;padding:0!important}で 見出し・見出し内リンクが濃紺で埋もれ、かつ余白が無く窮屈になるため、白文字＋余白（padding/margin）を付与。張様指示。 ※ wp-block-heading の見出しは子テーマ側の詳細度の高いルールで既に余白があるため、そちらが優先される（本ルールは非block見出し等を救済） */ .post_content h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; padding: 0.55em 1em !important; margin: 2em 0 1.2em !important; border-radius: 6px; line-height: 1.5; } .post_content h2 a { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* [0709] /about/ 事業所・グループ会社カードの住所テキストを中央寄せに（見出し・画像・ボタンは中央、住所段落のみ左寄せだったため統一）張様指示。about-content限定で他ページ非影響 */ .about-content .swell-block-column.swl-has-mb--s > p { text-align: center !important; } /* [0709] recruitサイドバーCTA: 説明文1行目「ご不明点…ございましたら、」が幅に6px足りず「ら、」が孤立折返し。左右余白を詰めて
どおり2行に収める（張様指示） */ .recruit-sidebar__card { padding-left: 14px !important; padding-right: 14px !important; } /* [0709] recruitサイドバーナビ: 「採用情報（パート・アルバイト）」が2行折返しになるため1行に収める（nowrap＋左右余白と文字サイズを微調整）張様指示 */ .recruit-sidebar__item a { white-space: nowrap; font-size: 13px; padding-left: 14px !important; padding-right: 14px !important; } /* [2026-07-10] レガシー本文(wp-block-heading無し)h3の見出し崩れ修正 plain

（例:

●仕事と業務の紹介

）は子テーマの青枠h3 スタイル(.post_content>h3.wp-block-heading)の対象外で、SWELL既定の::before装飾バーが 本文文字と重なって崩れていた。同じ青枠スタイルを:not(.wp-block-heading)にも適用し ::before/::afterを無効化。※商品はh3がbox_item>tbl_area内でpost_content直下でない ため .post_content>h3 直下セレクタには非該当（影響なし）。 */ .l-topTitleArea~.l-content .post_content>h3:not(.wp-block-heading) { font-size: 1.15rem !important; font-weight: 700 !important; color: #1772AE !important; margin-top: 50px !important; margin-bottom: 20px !important; padding: 14px 24px !important; background: linear-gradient(135deg, #EEF4F9 0%, #EEF4F9 100%) !important; border: none !important; border-left: 4px solid #1B88D0 !important; border-radius: 0 8px 8px 0 !important; line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 176, 240, 0.08); } .l-topTitleArea~.l-content .post_content>h3:not(.wp-block-heading)::before, .l-topTitleArea~.l-content .post_content>h3:not(.wp-block-heading)::after { display: none !important; content: none !important; } /* [2026-07-10] /recruit/ 求める人物像セクション: 本文段落を中央寄せ（h2見出しは既に中央）。 */ .recruit-content .recruit_box p { text-align: center; } /* [2026-07-10] /recruit/「求める人物像」見出しが白で不可視の修正。 広域ルール .post_content h2{color:#fff;-webkit-text-fill-color:#fff !important} が .recruit-content h2(濃紺・同特異度)に後勝ちしていた。box内h2を高特異度(0,2,1)で濃紺再指定。 広域の白ルールは他ページ(die-cutting等の暗背景見出し)で必要なため残す。 */ .recruit-content .recruit_box h2, .recruit-content .recruit_box h2 span { color: #00406B !important; -webkit-text-fill-color: #00406B !important; } /* [2026-07-10] トップのセクション見出し(ソリューション検索/大創ができること)が白で不可視の修正。 広域 .post_content h2{color:#fff;-webkit-text-fill-color:#fff !important} が各見出しのcolor(紺)指定に対し -webkit-text-fill-colorだけ勝って白化。fillも他見出しと同じ紺#00406Bに高特異度で揃える。 */ .post_content .solution-search h2.search-header__title, .solution-search .search-header__title, .post_content .ab-section h2.ab-header__title, .ab-section .ab-header__title { color: #00406B !important; -webkit-text-fill-color: #00406B !important; } /* [2026-07-16] PICK UP / 360°抜型ソリューション の見出しが白で不可視の修正（張様指摘）。 広域 .post_content h2{-webkit-text-fill-color:#fff !important} が color(紺)指定に勝って白化していた。 0710の solution-search/ab-section と同じ現象・同じ対処（fillも紺#00406Bへ高特異度で統一）。 ★復元：このブロックを削除。 */ .post_content .pickup-section h2.sec-header__title, .pickup-section .sec-header__title, .post_content .insta-section h2.sec-header__title, .insta-section .sec-header__title, .post_content .sv-section h2.sv-section__title, .sv-section .sv-section__title { color: #00406B !important; -webkit-text-fill-color: #00406B !important; } /* [2026-07-16] サクセスカレッジ(college)個別記事でアイキャッチが2回表示される問題の修正（張様指摘）。 ページ上部のタイトル背景(.l-topTitleArea__img)と本文直前のアイキャッチ(.p-articleThumb)に 同じ画像が出ていたため、本文直前側を非表示にする。上部の背景画像は残す。 ※ニュース(post)は元々1回のみ表示のため影響しない（college限定セレクタ）。 ★復元：このブロックを削除。 */ .college-template-default .p-articleThumb, body.single-college .p-articleThumb { display: none !important; } /* [2026-07-16] トップ動画ヒーローの上下の黒帯を非表示（張様指摘）。 真因＝動画素材(1920x1080)に上下115pxずつの黒帯が焼き込まれている（実映像は1920x850＝約2.26:1）。 CSS側の隙間は0でobject-fit:coverも効いているため、素材side の letterbox が見えていた。 対処＝コンテナのアスペクト比を実映像(1920/850)に合わせ、動画を拡大して黒帯を枠外へ追い出す。 scale = 1080/850 ≒ 1.2706 （上下の黒帯がちょうど枠外になる倍率）。 ★復元：このブロックを削除。 */ .p-mainVisual.-video-hero { aspect-ratio: 1920 / 850; max-height: min(72vh, 680px); } .-video-hero .video-hero__media { width: 100%; height: 100%; max-height: none; object-fit: cover; transform: scale(1.2706); }