/** * 無料キャリア相談 LP（/career/）— PlusWeb3 承認デザインの Quantum+ 移植版。 * * 兄弟サイト PlusWeb3 の `/consultation/`（assets/css/pw3lp.css）を土台に、 * 「硬め・スターク・余白」の設計思想はそのまま、配色だけを Quantum+ の * ブランド（Quantum Orange）へ差し替えたもの。 * * - 全セレクタを #qclp 配下にスコープし、テーマ／他ページへの漏れを防ぐ。 * - グローバルリセット（* { margin:0 }）は使わず、#qclp 内のテキスト要素に限定。 * - Porters 埋め込みフォーム（.qc-porters-embed 配下）はリセット対象から除外。 * - keyframes 名は qc- プレフィックスで衝突回避。 * * 配色の対応（PlusWeb3 → Quantum+）: * --grad : 90deg blue/purple/pink → Quantum Orange グラデ（= --portal-gradient-text） * --tint : 淡ラベンダー #F4F2FB → 淡ピーチ #FEF1E7 * --tint-ink: くすみ紫 #7C6BB5 → Primary Dark #A03D15 * --ink（本文・ボタン地）は両サイト共通の #1f2937 のまま据え置く。 * * @package Quantum_Plus */ #qclp { --ink: #1f2937; --accent: #D55C25; /* Quantum Orange（チェック等のソリッドアクセント） */ --grad: linear-gradient(90deg, #D55C25, #FFAB55); /* = --portal-gradient-text */ --soft: #52525B; --mut: #8A8A92; --line: #E7E7E4; --line2: #D8D8D5; --paper: #FAFAFA; --tint: #FEF1E7; /* 淡ピーチ（旧: 淡ラベンダー #F4F2FB） */ --tint-ink: #A03D15; /* Primary Dark（旧: くすみ紫 #7C6BB5） */ background: var(--paper); color: var(--ink); font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.7; } #qclp, #qclp * { box-sizing: border-box; } /* テキスト・リスト要素のみブラウザ既定マージンを除去（Porters 埋め込みは除外）。 */ #qclp :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote):not(.qc-porters-embed *) { margin: 0; padding: 0; } #qclp a { text-decoration: none; color: inherit; } #qclp button, #qclp a { cursor: pointer; } #qclp button { font-family: inherit; } #qclp .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #qclp .wrap { max-width: 1120px; margin: 0 auto; padding: 0 30px; } /* ===== hero ===== */ #qclp .qc-hero { padding: 54px 0 70px; } /* * 3子グリッド: .copy（左上）/ .fcol（右・2行ぶち抜き）/ .herojobs（左下）。 * フォームカードが縦に長いぶん左カラム下部に生まれる余白を、募集中求人の * 縦型リストで埋める。モバイル（860px以下）では単一カラムに戻し、 * DOM 順（コピー → フォーム → 求人）で積む。 */ /* * grid-template-rows の「auto 1fr」が要: * フォーム（.fcol）は2行ぶち抜きのため、フォームが伸びた（ステップ2等）ときの * 余剰高さは伸長可能なトラックに配分される。1行目を auto（=コピーの内容高）、 * 2行目を 1fr にすることで余剰は求人リストの「下」に逃げ、求人は常にコピー直下に固定される。 */ #qclp .herogrid { display: grid; grid-template-columns: 1.04fr 0.96fr; grid-template-rows: auto 1fr; gap: 36px 46px; align-items: start; } #qclp .fcol { grid-column: 2; grid-row: 1 / 3; } #qclp .herojobs { grid-column: 1; grid-row: 2; align-self: start; } #qclp .fcol .card { max-width: 486px; } #qclp h1 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: .01em; color: var(--ink); } #qclp h1 .u { position: relative; display: inline-block; } #qclp h1 .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .13em; border-radius: 1px; background: var(--grad); } /* リード文: 文節折り返し（auto-phrase）＋ text-wrap pretty ＋ .nb（改行禁止句）で不自然な折り返しを防ぐ。 */ #qclp .lead { font-size: 15.5px; color: var(--soft); margin-top: 24px; max-width: 42ch; font-weight: 500; line-height: 1.9; word-break: auto-phrase; text-wrap: pretty; } #qclp .lead + .lead { margin-top: 12px; } #qclp .nb { white-space: nowrap; } /* ===== form card ===== */ #qclp .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 20px 48px -30px rgba(20, 28, 55, .4); } #qclp .card::before { content: ""; display: block; height: 3px; background: var(--grad); } #qclp .pad { padding: 24px 24px 26px; } #qclp .fhrow { display: flex; align-items: center; gap: 9px; } #qclp .fh { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 19px; line-height: 1.45; } #qclp .fsub { font-size: 12.5px; color: var(--mut); margin-top: 7px; line-height: 1.7; } #qclp .fbadge { font-family: "Noto Sans JP", sans-serif; font-size: 10px; letter-spacing: .02em; font-weight: 700; color: var(--tint-ink); background: var(--tint); border-radius: 2px; padding: 3px 9px; white-space: nowrap; } #qclp .reassure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--mut); margin-top: 16px; } #qclp .reassure svg { flex: none; color: var(--accent); } /* ===== Porters エントリーフォーム（template 21195）= ブランドスキン ＋ 3ステップ ===== Porters は「入力欄のみ」生成しラベルを出さないため、data-alias でラベルを CSS 注入する。 生成されるDOMは .po-webparts-container > .po-joblist > .po-jobsearch-wrap > .po-canentryform。 */ /* 進捗タブ（minimap） */ #qclp .minimap { display: flex; gap: 6px; margin: 18px 0 4px; } #qclp .minimap > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 7px; border-bottom: 2px solid var(--line); cursor: pointer; transition: .15s; position: relative; } #qclp .minimap > div:not(:last-child)::after { content: "›"; position: absolute; right: -4px; top: 6px; color: #C9C2B0; } #qclp .minimap .n { width: 21px; height: 21px; border-radius: 50%; background: #ECECEA; color: var(--mut); font-size: 11px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; } #qclp .minimap b { font-size: 10.5px; font-weight: 700; color: var(--mut); } #qclp .minimap > div.acc-active { border-bottom-color: var(--ink); } #qclp .minimap > div.acc-active .n { background: var(--ink); color: #fff; } #qclp .minimap > div.acc-active b { color: var(--ink); } #qclp .minimap > div.acc-done .n { background: var(--ink); color: #fff; } #qclp .minimap > div.acc-done b { color: var(--soft); } #qclp .form-area { margin-top: 14px; min-height: 300px; } #qclp .qc-porters-embed { width: 100%; } /* Porters 生成DOMの土台 */ #qclp .po-webparts-container { width: 100%; color: var(--ink); } #qclp .po-webparts-container .po-header { display: none; } #qclp .po-webparts-container .po-joblist, #qclp .po-webparts-container .po-jobsearch-wrap { width: 100%; } #qclp .po-canentryform table, #qclp .po-canentryform tbody { display: block; width: 100%; } #qclp .po-canentryform table { border-collapse: collapse; border: 0; } #qclp .po-canentryform tr, #qclp .po-canentryform td { display: block; width: 100%; border: 0; padding: 0; } #qclp .po-canentryform tr.po-single { margin: 0 0 16px; } #qclp .po-canentryform td.po-normal { position: relative; display: block; padding-top: 2px; } #qclp .po-canentryform .po-row-item-container { display: block; } #qclp .po-canentryform .po-remark { display: none; } /* Porters 既定の必須マーカーは非表示（必須/任意バッジは出さない方針）。 */ #qclp .po-canentryform .po-required-elem { display: none; } /* ラベル注入（data-alias 単位）。checkbox は flex なので order:-1 で先頭行に、text/mail/phone は block。 */ #qclp .po-canentryform .po-input[data-alias] { position: relative; } #qclp .po-canentryform .po-input[data-alias]::before { display: block; order: -1; flex: 0 0 100%; width: 100%; font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 0 0 8px; } #qclp .po-canentryform .po-input[data-alias="Resume.U_C4DF66DBAA2CAD515D32251944136A"]::before { content: "ご相談の進め方"; } /* ↓ Quantum+ 用に差し替えた alias（旧 PlusWeb3: Resume.U_7EF601AE7A31F52313DECADEB09902） */ #qclp .po-canentryform .po-input[data-alias="Resume.U_42984EBB44B59C528944A3EA37AB6E"]::before { content: "ご興味の領域（複数選択可）"; } /* ↓ Quantum+ 用に差し替えた alias（旧 PlusWeb3: Resume.U_4E1B898666CC1CD5EE269B1105ADE5） */ #qclp .po-canentryform .po-input[data-alias="Resume.U_83CE0E4E3E249D8FC84909993DA033"]::before { content: "ご職種（複数選択可）"; } #qclp .po-canentryform .po-input[data-alias="Resume.U_6C2608520DADD57FCE76629A736363"]::before { content: "ご年齢"; } #qclp .po-canentryform .po-input[data-alias="Person.P_Name"]::before { content: "お名前"; } #qclp .po-canentryform .po-input[data-alias="Person.P_Mail"]::before { content: "メールアドレス"; } #qclp .po-canentryform .po-input[data-alias="Person.P_Mobile"]::before { content: "電話番号（任意）"; } #qclp .po-canentryform .po-input[data-alias="Resume.U_BE99B8F25370E6C5378A25529B3B18"]::before { content: "ご年収（現在 / 直近）"; } #qclp .po-canentryform .po-input[data-alias="Resume.U_4C0F67A07E1590D086EC4126FB0666"]::before { content: "ご相談内容・ご質問など"; } /* 電話の安心注記（career-lp.js が注入） */ #qclp .po-canentryform .po-contact-note { display: block; font-size: 11px; line-height: 1.55; color: var(--soft); background: var(--tint); border-radius: 4px; padding: 8px 10px; margin: 0 0 9px; } #qclp .po-canentryform .po-contact-note b { color: var(--ink); font-weight: 700; } /* text / mail / phone 入力 */ #qclp .po-canentryform .po-input > input[type=text] { width: 100%; background: #fff; border: 1.5px solid var(--line2); border-radius: 2px; padding: 11px; font-size: 15px; font-family: inherit; color: var(--ink); -webkit-appearance: none; appearance: none; } #qclp .po-canentryform .po-input > input[type=text]::placeholder { color: #B6B6BC; } #qclp .po-canentryform .po-input > input:focus { outline: none; border-color: var(--ink); } /* textarea（相談事項など自由記述） */ #qclp .po-canentryform .po-input textarea { width: 100%; min-height: 96px; background: #fff; border: 1.5px solid var(--line2); border-radius: 2px; padding: 11px; font-size: 15px; font-family: inherit; line-height: 1.6; color: var(--ink); resize: vertical; -webkit-appearance: none; appearance: none; } #qclp .po-canentryform .po-input textarea::placeholder { color: #B6B6BC; } #qclp .po-canentryform .po-input textarea:focus { outline: none; border-color: var(--ink); } /* select（年収などがプルダウン描画された場合の保険。チェックボックス描画なら未適用） */ #qclp .po-canentryform .po-input select { width: 100%; background: #fff; border: 1.5px solid var(--line2); border-radius: 2px; padding: 11px; font-size: 15px; font-family: inherit; color: var(--ink); } #qclp .po-canentryform .po-input select:focus { outline: none; border-color: var(--ink); } /* file（履歴書・職務経歴書アップロード。template 21195 で描画される場合の体裁）。 */ #qclp .po-canentryform .po-input input[type=file] { width: 100%; background: #fff; border: 1.5px dashed var(--line2); border-radius: 2px; padding: 11px; font-size: 13px; font-family: inherit; color: var(--soft); } #qclp .po-canentryform .po-input input[type=file]:focus { outline: none; border-color: var(--ink); } /* checkbox → ピル（選択タイル） */ #qclp .po-canentryform .po-checkbox { display: flex; flex-wrap: wrap; gap: 8px; } #qclp .po-canentryform .po-checkbox br { display: none; } #qclp .po-canentryform .po-checkbox > div { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; flex: 1 1 calc(50% - 4px); min-width: 120px; min-height: 44px; background: #fff; border: 1.5px solid var(--line2); border-radius: 2px; padding: 10px 8px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ink); cursor: pointer; transition: .13s; word-break: auto-phrase; } #qclp .po-canentryform .po-checkbox > div:hover { border-color: var(--ink); } #qclp .po-canentryform .po-checkbox > div:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; } #qclp .po-canentryform .po-checkbox > div input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; } #qclp .po-canentryform .po-checkbox > div span { position: relative; pointer-events: none; } /* 長い職種ラベルの「（補足）」を2行目へ落として読みやすくする（career-lp.js が分割注入）。 */ #qclp .po-canentryform .po-checkbox > div .po-sub { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--mut); } #qclp .po-canentryform .po-checkbox > div:has(input:checked) .po-sub { color: rgba(255, 255, 255, .72); } /* 送信ボタン（Porters 生成） */ #qclp .po-webparts-container .po-buttons { margin-top: 18px; } #qclp .po-webparts-container .po-button-send-outer, #qclp .po-webparts-container .po-button-send-inner { width: 100%; display: block; } #qclp .po-webparts-container .po-button-send { display: block; width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 2px; padding: 14px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; transition: .15s; } #qclp .po-webparts-container .po-button-send:hover { background: #111827; } /* 送信完了（porterscloud のサンクス iframe へ差し替え） */ #qclp .po-webparts-container iframe { border: 0; width: 100%; display: block; min-height: 60px; background: #fff; border-radius: 2px; } /* 完了時は Porters の素フォーム／既定サンクス（iframe）を隠し、自前メッセージのみ表示。 */ #qclp .form-area.is-complete .agree-note, #qclp .form-area.is-complete .po-buttons, #qclp .form-area.is-complete .po-webparts-container, #qclp .form-area.is-complete .acc-nav { display: none; } #qclp .lp-complete-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 24px 0; text-align: center; animation: qc-fd .35s ease; } #qclp .lp-complete-head .ck { width: 52px; height: 52px; border-radius: 50%; background: var(--tint); color: var(--ink); font-size: 26px; display: flex; align-items: center; justify-content: center; } #qclp .lp-complete-head .tt { font-size: 18px; font-weight: 800; color: var(--ink); } #qclp .lp-complete-head .ms { font-size: 13.5px; line-height: 1.8; color: var(--soft); max-width: 360px; } @keyframes qc-fd { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } #qclp .agree-note { font-size: 11px; text-align: center; margin: 14px 0 0; color: var(--mut); } #qclp .agree-note a { color: var(--ink); text-decoration: underline; } /* ステップ・ナビ（career-lp.js が挿入） */ #qclp .acc-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; } #qclp .acc-back { flex: 0 0 auto; background: #fff; border: 1.5px solid var(--line2); color: var(--ink); border-radius: 2px; padding: 12px 16px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; } #qclp .acc-back:hover { border-color: var(--ink); } #qclp .acc-next { flex: 1 1 auto; background: var(--ink); color: #fff; border: none; border-radius: 2px; padding: 13px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: .15s; } #qclp .acc-next:hover { background: #111827; } /* ステップ表示制御：非アクティブ段は非表示（値はDOMに残り、送信時に全項目が送られる） */ #qclp .form-area[data-acc="1"] tr.po-single[data-step="2"], #qclp .form-area[data-acc="1"] tr.po-single[data-step="3"], #qclp .form-area[data-acc="2"] tr.po-single[data-step="1"], #qclp .form-area[data-acc="2"] tr.po-single[data-step="3"], #qclp .form-area[data-acc="3"] tr.po-single[data-step="1"], #qclp .form-area[data-acc="3"] tr.po-single[data-step="2"] { display: none !important; } #qclp .form-area[data-acc="1"] .acc-back { display: none; } #qclp .form-area[data-acc="3"] .acc-nav { display: none; } #qclp .form-area[data-acc="1"] .po-buttons, #qclp .form-area[data-acc="2"] .po-buttons { display: none; } /* 必須未入力のフラッシュ */ #qclp td.acc-bad { outline: 2px solid #C0392B; outline-offset: 3px; border-radius: 2px; animation: qc-shake .42s; } @keyframes qc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ===== sections ===== */ #qclp .sec { padding: 80px 0; border-top: 1px solid var(--line); } #qclp .sec-h { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: clamp(23px, 3.1vw, 31px); line-height: 1.42; color: var(--ink); letter-spacing: .01em; } #qclp .sec-lead { font-size: 15px; color: var(--soft); margin-top: 14px; max-width: 58ch; line-height: 1.9; } /* ===== いま募集中の求人（ヒーロー左カラム・縦型リスト） ===== フォームカードと同じ「白地＋細ボーダー＋4px角」の器で対にし、 行は区切り線のみのミニマル構成。装飾はライブドット（募集中の鮮度）と ホバー時の矢印スライドに限定する。 */ #qclp .herojobs { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(20, 28, 55, .04); overflow: hidden; } #qclp .hj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 13px; border-bottom: 1px solid var(--line); } #qclp .hj-label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink); } #qclp .hj-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } #qclp .hj-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: qc-pulse 2.4s ease-out infinite; } @keyframes qc-pulse { 0% { transform: scale(.5); opacity: .65; } 70% { transform: scale(1.1); opacity: 0; } 100% { opacity: 0; } } #qclp .hj-all { flex: none; font-size: 12px; font-weight: 700; color: var(--tint-ink); transition: opacity .15s; } #qclp .hj-all:hover { opacity: .7; } #qclp .hj-list { list-style: none; } #qclp .hj-list li + li { border-top: 1px solid var(--line); } #qclp .hj-item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; transition: background .15s; } #qclp .hj-item:hover { background: var(--paper); } #qclp .hj-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } #qclp .hj-title { font-size: 13.5px; font-weight: 800; line-height: 1.5; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #qclp .hj-meta { font-size: 11.5px; color: var(--mut); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #qclp .hj-sal { flex: none; font-size: 12px; font-weight: 700; color: var(--ink); } #qclp .hj-ar { flex: none; font-size: 13px; font-weight: 700; color: var(--mut); transition: transform .15s, color .15s; } #qclp .hj-item:hover .hj-ar { transform: translateX(3px); color: var(--ink); } #qclp .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; } #qclp .step { border: 1px solid var(--line); border-radius: 4px; padding: 22px 20px; background: #fff; } #qclp .step .sn { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; color: #B6B6BC; } #qclp .step .st { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 15.5px; margin: 11px 0 8px; color: var(--ink); } #qclp .step .sd { font-size: 12.5px; color: var(--mut); line-height: 1.75; } #qclp .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; } #qclp .pillar { border: 1px solid var(--line); border-radius: 4px; padding: 28px 24px; background: #fff; } #qclp .pillar .pn { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; color: #C4C4CA; letter-spacing: .1em; } #qclp .pillar h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 17.5px; line-height: 1.5; margin: 14px 0 12px; color: var(--ink); } #qclp .pillar p { font-size: 13px; color: var(--soft); line-height: 1.95; } #qclp .fory { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 32px; margin-top: 34px; } #qclp .fy { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.7; font-weight: 500; } #qclp .fy svg { flex: none; margin-top: 4px; color: var(--accent); } #qclp .qc-faq { margin-top: 30px; border-top: 1px solid var(--line); } #qclp .qc-faq details { border-bottom: 1px solid var(--line); } #qclp .qc-faq summary { list-style: none; cursor: pointer; padding: 19px 2px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; } #qclp .qc-faq summary::-webkit-details-marker { display: none; } #qclp .qc-faq .ic { flex: none; width: 16px; height: 16px; position: relative; } #qclp .qc-faq .ic::before, #qclp .qc-faq .ic::after { content: ""; position: absolute; background: var(--soft); } #qclp .qc-faq .ic::before { top: 7px; left: 1px; right: 1px; height: 2px; } #qclp .qc-faq .ic::after { left: 7px; top: 1px; bottom: 1px; width: 2px; transition: transform .2s; } #qclp .qc-faq details[open] .ic::after { transform: scaleY(0); } #qclp .qc-faq .ans { padding: 0 2px 20px; font-size: 13.5px; color: var(--soft); line-height: 1.95; max-width: 62ch; } #qclp .cta-band { border-top: 1px solid var(--line); padding: 84px 0; text-align: center; } #qclp .cta-band h2 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: clamp(25px, 3.5vw, 37px); line-height: 1.42; color: var(--ink); } #qclp .cta-band h2 .u { position: relative; display: inline-block; } #qclp .cta-band h2 .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .13em; border-radius: 1px; background: var(--grad); } #qclp .cta-band p { font-size: 14.5px; color: var(--soft); margin-top: 16px; } #qclp .qc-btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 15px; padding: 15px 32px; border-radius: 2px; background: var(--ink); color: #fff; transition: .15s; margin-top: 26px; } #qclp .qc-btn:hover { background: #111827; } #qclp .qc-btn .ar { transition: transform .15s; } #qclp .qc-btn:hover .ar { transform: translateX(3px); } /* ===== responsive ===== */ @media (max-width: 860px) { #qclp .herogrid { grid-template-columns: 1fr; gap: 30px; } /* 単一カラムでは明示配置を解除し、DOM 順（コピー → フォーム → 求人）で積む。 */ #qclp .fcol, #qclp .herojobs { grid-column: auto; grid-row: auto; } #qclp .fcol .card { max-width: none; } #qclp .steps { grid-template-columns: 1fr 1fr; } #qclp .pillars { grid-template-columns: 1fr; } #qclp .fory { grid-template-columns: 1fr; } } @media (max-width: 620px) { #qclp .sec { padding: 48px 0; } #qclp .qc-hero { padding: 30px 0 44px; } #qclp .steps { grid-template-columns: 1fr; } #qclp .cta-band { padding: 56px 0; } #qclp .wrap { padding: 0 18px; } #qclp h1 { font-size: 23px; line-height: 1.4; } #qclp .lead { font-size: 14px; margin-top: 18px; line-height: 1.85; } #qclp .sec-h { font-size: 20px; } #qclp .sec-lead { font-size: 13.5px; } #qclp .fh { font-size: 17px; } #qclp .cta-band h2 { font-size: 20px; } #qclp .pad { padding: 20px 18px 22px; } } @media (prefers-reduced-motion: reduce) { #qclp .hj-dot::after { animation: none; } #qclp .hj-item, #qclp .hj-ar { transition: none; } }