/** * PlusWeb3 無料キャリア相談 LP — 承認デザイン（plus-web3-lp.html）再現版。 * * 全セレクタを #pw3lp 配下にスコープし、テーマ／他ページへの漏れを防ぐ。 * グローバルなリセット（* { margin:0 }）は使わず、#pw3lp 内の要素にのみ * 限定する。Porters 埋め込みフォーム（.pw3-porters-embed 配下）は * リセット対象から除外し、フォーム本来のレイアウトを尊重する。 * * keyframes 名は pw3- プレフィックスで衝突を回避する。 */ #pw3lp { --ink: #1f2937; --grad: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6); --soft: #52525B; --mut: #8A8A92; --line: #E7E7E4; --line2: #D8D8D5; --paper: #FAFAFA; background: var(--paper); color: var(--ink); font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.7; } #pw3lp, #pw3lp * { box-sizing: border-box; } /* テキスト・リスト要素のみブラウザ既定マージンを除去（Porters 埋め込みは除外）。 */ #pw3lp :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote):not(.pw3-porters-embed *) { margin: 0; padding: 0; } #pw3lp a { text-decoration: none; color: inherit; } #pw3lp button, #pw3lp a { cursor: pointer; } #pw3lp button { font-family: inherit; } #pw3lp .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #pw3lp .wrap { max-width: 1120px; margin: 0 auto; padding: 0 30px; } /* ===== hero ===== */ #pw3lp .pw3-hero { padding: 54px 0 70px; } #pw3lp .herogrid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 46px; align-items: start; } #pw3lp .fcol .card { max-width: 486px; } #pw3lp .ey { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-bottom: 24px; } #pw3lp 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); } #pw3lp h1 .u { position: relative; display: inline-block; } #pw3lp h1 .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .13em; border-radius: 1px; background: var(--grad); } #pw3lp .lead { font-size: 15.5px; color: var(--soft); margin-top: 24px; max-width: 42ch; font-weight: 500; line-height: 1.9; } #pw3lp .meta { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 22px; max-width: 560px; } #pw3lp .meta .stat { display: flex; flex-direction: column; } #pw3lp .meta .n { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -.01em; color: var(--ink); } #pw3lp .meta .l { font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 700; color: var(--soft); margin-top: 6px; line-height: 1.2; } #pw3lp .meta .l .en { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); margin-top: 3px; white-space: nowrap; } /* Interview スライダー（PC のみ。crossfade 自動送り。pw3lp.js が制御） */ #pw3lp .ivslide { margin-top: 40px; max-width: 460px; } #pw3lp .ivslide__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } #pw3lp .ivslide__ey { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); } #pw3lp .ivslide__view { display: grid; } #pw3lp .ivslide__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; } #pw3lp .ivslide__item.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } #pw3lp .ivslide__card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 22px 22px 20px; box-shadow: 0 6px 22px rgba(31, 41, 55, .05); } #pw3lp .ivslide__cat { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #6d5ce6; background: linear-gradient(135deg, rgba(96, 165, 250, .14), rgba(167, 139, 250, .14), rgba(244, 114, 182, .14)); border-radius: 999px; padding: 4px 11px; margin-bottom: 13px; } #pw3lp .ivslide__quote { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 15.5px; line-height: 1.72; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #pw3lp .ivslide__who { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); } #pw3lp .ivslide__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--line); display: flex; align-items: center; justify-content: center; } #pw3lp .ivslide__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } #pw3lp .ivslide__avatar .ini { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; color: var(--soft); } #pw3lp .ivslide__id { display: flex; flex-direction: column; min-width: 0; } #pw3lp .ivslide__name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; } #pw3lp .ivslide__role { font-size: 11px; color: var(--mut); line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #pw3lp .ivslide__dots { display: flex; gap: 7px; margin-top: 15px; } #pw3lp .ivslide__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); transition: width .2s, background .2s, border-radius .2s; } #pw3lp .ivslide__dots span.is-active { width: 20px; border-radius: 4px; background: var(--ink); } /* ===== form card ===== */ #pw3lp .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); } #pw3lp .card::before { content: ""; display: block; height: 3px; background: var(--grad); } #pw3lp .pad { padding: 24px 24px 26px; } #pw3lp #pw3-stage { min-height: 392px; } #pw3lp .fkick { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-bottom: 11px; } #pw3lp .fh { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 19px; line-height: 1.45; } #pw3lp .fsub { font-size: 12.5px; color: var(--mut); margin-top: 7px; line-height: 1.7; } #pw3lp .paths { margin-top: 19px; display: flex; flex-direction: column; gap: 11px; } #pw3lp .path { display: block; width: 100%; text-align: left; border-radius: 3px; padding: 16px; transition: .15s; border: 1.5px solid var(--line2); background: #fff; box-shadow: 0 1px 2px rgba(20, 28, 55, .04), 0 7px 16px -11px rgba(20, 28, 55, .18); } #pw3lp .path .pt { display: flex; align-items: center; gap: 9px; } #pw3lp .path .ttl { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--ink); } #pw3lp .path .ds { font-size: 11.5px; color: var(--mut); margin-top: 6px; line-height: 1.6; } #pw3lp .path .ar { margin-left: auto; color: var(--ink); font-size: 17px; transition: transform .15s; } #pw3lp .path:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 9px 22px -9px rgba(20, 28, 55, .24); } #pw3lp .path:hover .ar { transform: translateX(3px); } #pw3lp .path.pri { border-color: var(--ink); box-shadow: 0 2px 4px rgba(31, 41, 55, .06), 0 12px 26px -11px rgba(31, 41, 55, .30); } #pw3lp .path.pri .ar { animation: pw3-nudge 1.7s ease-in-out infinite; } @keyframes pw3-nudge { 0%, 55%, 100% { transform: translateX(0); } 78% { transform: translateX(5px); } } #pw3lp .fkickrow { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } #pw3lp .fkickrow .fkick { margin-bottom: 0; } #pw3lp .fbadge { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .05em; font-weight: 700; color: #7C6BB5; background: #F4F2FB; border-radius: 2px; padding: 2px 8px; } #pw3lp .tagp { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .04em; font-weight: 700; color: #7C6BB5; background: #F4F2FB; border-radius: 2px; padding: 2px 8px; } #pw3lp .reassure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--mut); margin-top: 16px; } #pw3lp .reassure svg { flex: none; } #pw3lp .pbar { height: 4px; background: #ECECEA; border-radius: 2px; overflow: hidden; margin-bottom: 14px; } #pw3lp .pbar i { display: block; height: 100%; background: var(--grad); transition: width .3s ease; } #pw3lp .bar { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } #pw3lp .back { font-size: 12px; color: var(--mut); border: none; background: none; padding: 0; display: inline-flex; align-items: center; gap: 5px; } #pw3lp .back:hover { color: var(--ink); } #pw3lp .prog { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--mut); } #pw3lp .prog b { color: var(--ink); } #pw3lp .ltag { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .06em; padding: 3px 8px; border-radius: 2px; background: var(--ink); color: #fff; } #pw3lp .q { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.5; margin-bottom: 4px; color: var(--ink); } #pw3lp .qs { font-size: 12px; color: var(--mut); margin-bottom: 14px; } #pw3lp .chips { display: flex; flex-wrap: wrap; gap: 8px; } #pw3lp .chip { border: 1.5px solid var(--line2); background: #fff; border-radius: 2px; padding: 12px 13px; font-size: 13.5px; font-weight: 700; color: var(--ink); transition: .13s; flex: 1 1 calc(50% - 8px); min-width: 122px; text-align: center; } #pw3lp .chip:hover { border-color: var(--ink); } #pw3lp .chip.sel { border-color: var(--ink); background: var(--ink); color: #fff; } #pw3lp .chips.rg .chip { flex: 1 1 calc(33.333% - 8px); min-width: 88px; padding: 12px 6px; font-size: 13px; } #pw3lp .next { width: 100%; margin-top: 14px; border: none; border-radius: 2px; padding: 13px; font-weight: 700; font-size: 14.5px; color: #fff; background: var(--ink); transition: .15s; } #pw3lp .next:disabled { background: #CACACE; cursor: default; } #pw3lp .next:not(:disabled):hover { background: #111827; } #pw3lp .pw3-fade { animation: pw3-fd .2s ease; } @keyframes pw3-fd { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ===== Porters エントリーフォーム（template 21078）= ブランドスキン ＋ 3ステップ ===== Porters は「入力欄のみ」生成しラベルを出さないため、data-alias でラベルを CSS 注入する。 生成されるDOMは .po-webparts-container > .po-joblist > .po-jobsearch-wrap > .po-canentryform。 */ /* 進捗タブ（minimap） */ #pw3lp .minimap { display: flex; gap: 6px; margin: 18px 0 4px; } #pw3lp .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; } #pw3lp .minimap > div:not(:last-child)::after { content: "›"; position: absolute; right: -4px; top: 6px; color: #C9C2B0; } #pw3lp .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; } #pw3lp .minimap b { font-size: 10.5px; font-weight: 700; color: var(--mut); } #pw3lp .minimap > div.acc-active { border-bottom-color: var(--ink); } #pw3lp .minimap > div.acc-active .n { background: var(--ink); color: #fff; } #pw3lp .minimap > div.acc-active b { color: var(--ink); } #pw3lp .minimap > div.acc-done .n { background: var(--ink); color: #fff; } #pw3lp .minimap > div.acc-done b { color: var(--soft); } #pw3lp .form-area { margin-top: 14px; min-height: 300px; } #pw3lp .pw3-porters-embed { width: 100%; } /* Porters 生成DOMの土台 */ #pw3lp .po-webparts-container { width: 100%; color: var(--ink); } #pw3lp .po-webparts-container .po-header { display: none; } #pw3lp .po-webparts-container .po-joblist, #pw3lp .po-webparts-container .po-jobsearch-wrap { width: 100%; } #pw3lp .po-canentryform table, #pw3lp .po-canentryform tbody { display: block; width: 100%; } #pw3lp .po-canentryform table { border-collapse: collapse; border: 0; } #pw3lp .po-canentryform tr, #pw3lp .po-canentryform td { display: block; width: 100%; border: 0; padding: 0; } #pw3lp .po-canentryform tr.po-single { margin: 0 0 16px; } #pw3lp .po-canentryform td.po-normal { position: relative; display: block; padding-top: 2px; } #pw3lp .po-canentryform .po-row-item-container { display: block; } #pw3lp .po-canentryform .po-remark { display: none; } /* Porters 既定の必須マーカーは非表示（必須/任意バッジは出さない方針）。 */ #pw3lp .po-canentryform .po-required-elem { display: none; } /* ラベル注入（data-alias 単位）。checkbox は flex なので order:-1 で先頭行に、text/mail/phone は block。 */ #pw3lp .po-canentryform .po-input[data-alias] { position: relative; } #pw3lp .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; } #pw3lp .po-canentryform .po-input[data-alias="Resume.U_C4DF66DBAA2CAD515D32251944136A"]::before { content: "ご相談の進め方"; } #pw3lp .po-canentryform .po-input[data-alias="Resume.U_7EF601AE7A31F52313DECADEB09902"]::before { content: "ご興味の領域（複数選択可）"; } #pw3lp .po-canentryform .po-input[data-alias="Resume.U_4E1B898666CC1CD5EE269B1105ADE5"]::before { content: "ご職種（複数選択可）"; } #pw3lp .po-canentryform .po-input[data-alias="Resume.U_6C2608520DADD57FCE76629A736363"]::before { content: "ご年齢"; } #pw3lp .po-canentryform .po-input[data-alias="Person.P_Name"]::before { content: "お名前"; } #pw3lp .po-canentryform .po-input[data-alias="Person.P_Mail"]::before { content: "メールアドレス"; } #pw3lp .po-canentryform .po-input[data-alias="Person.P_Mobile"]::before { content: "電話番号（任意）"; } #pw3lp .po-canentryform .po-input[data-alias="Resume.U_BE99B8F25370E6C5378A25529B3B18"]::before { content: "ご年収（現在 / 直近）"; } #pw3lp .po-canentryform .po-input[data-alias="Resume.U_4C0F67A07E1590D086EC4126FB0666"]::before { content: "ご相談内容・ご質問など"; } /* 電話の安心注記（pw3lp.js が注入） */ #pw3lp .po-canentryform .po-contact-note { display: block; font-size: 11px; line-height: 1.55; color: var(--soft); background: #F4F2FB; border-radius: 4px; padding: 8px 10px; margin: 0 0 9px; } #pw3lp .po-canentryform .po-contact-note b { color: var(--ink); font-weight: 700; } /* text / mail / phone 入力 */ #pw3lp .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; } #pw3lp .po-canentryform .po-input > input[type=text]::placeholder { color: #B6B6BC; } #pw3lp .po-canentryform .po-input > input:focus { outline: none; border-color: var(--ink); } /* textarea（相談事項など自由記述） */ #pw3lp .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; } #pw3lp .po-canentryform .po-input textarea::placeholder { color: #B6B6BC; } #pw3lp .po-canentryform .po-input textarea:focus { outline: none; border-color: var(--ink); } /* select（年収などがプルダウン描画された場合の保険。チェックボックス描画なら未適用） */ #pw3lp .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); } #pw3lp .po-canentryform .po-input select:focus { outline: none; border-color: var(--ink); } /* checkbox → ピル（選択タイル） */ #pw3lp .po-canentryform .po-checkbox { display: flex; flex-wrap: wrap; gap: 8px; } #pw3lp .po-canentryform .po-checkbox br { display: none; } #pw3lp .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.3; color: var(--ink); cursor: pointer; transition: .13s; } #pw3lp .po-canentryform .po-checkbox > div:hover { border-color: var(--ink); } #pw3lp .po-canentryform .po-checkbox > div:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; } #pw3lp .po-canentryform .po-checkbox > div input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; } #pw3lp .po-canentryform .po-checkbox > div span { position: relative; pointer-events: none; } /* 送信ボタン（Porters 生成） */ #pw3lp .po-webparts-container .po-buttons { margin-top: 18px; } #pw3lp .po-webparts-container .po-button-send-outer, #pw3lp .po-webparts-container .po-button-send-inner { width: 100%; display: block; } #pw3lp .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; } #pw3lp .po-webparts-container .po-button-send:hover { background: #111827; } /* 送信完了（porterscloud のサンクス iframe へ差し替え） */ #pw3lp .po-webparts-container iframe { border: 0; width: 100%; display: block; min-height: 60px; background: #fff; border-radius: 2px; } /* 完了時は Porters の素フォーム／既定サンクス（iframe）を隠し、自前メッセージのみ表示。 */ #pw3lp .form-area.is-complete .agree-note, #pw3lp .form-area.is-complete .po-buttons, #pw3lp .form-area.is-complete .po-webparts-container, #pw3lp .form-area.is-complete .acc-nav { display: none; } #pw3lp .lp-complete-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 24px 0; text-align: center; animation: pw3-fd .35s ease; } #pw3lp .lp-complete-head .ck { width: 52px; height: 52px; border-radius: 50%; background: #F4F2FB; color: var(--ink); font-size: 26px; display: flex; align-items: center; justify-content: center; } #pw3lp .lp-complete-head .tt { font-size: 18px; font-weight: 800; color: var(--ink); } #pw3lp .lp-complete-head .ms { font-size: 13.5px; line-height: 1.8; color: var(--soft); max-width: 360px; } #pw3lp .agree-note { font-size: 11px; text-align: center; margin: 14px 0 0; color: var(--mut); } #pw3lp .agree-note a { color: var(--ink); text-decoration: underline; } /* ステップ・ナビ（pw3lp.js が挿入） */ #pw3lp .acc-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; } #pw3lp .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; } #pw3lp .acc-back:hover { border-color: var(--ink); } #pw3lp .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; } #pw3lp .acc-next:hover { background: #111827; } /* ステップ表示制御：非アクティブ段は非表示（値はDOMに残り、送信時に全項目が送られる） */ #pw3lp .form-area[data-acc="1"] tr.po-single[data-step="2"], #pw3lp .form-area[data-acc="1"] tr.po-single[data-step="3"], #pw3lp .form-area[data-acc="2"] tr.po-single[data-step="1"], #pw3lp .form-area[data-acc="2"] tr.po-single[data-step="3"], #pw3lp .form-area[data-acc="3"] tr.po-single[data-step="1"], #pw3lp .form-area[data-acc="3"] tr.po-single[data-step="2"] { display: none !important; } #pw3lp .form-area[data-acc="1"] .acc-back { display: none; } #pw3lp .form-area[data-acc="3"] .acc-nav { display: none; } #pw3lp .form-area[data-acc="1"] .po-buttons, #pw3lp .form-area[data-acc="2"] .po-buttons { display: none; } /* 必須未入力のフラッシュ */ #pw3lp td.acc-bad { outline: 2px solid #C0392B; outline-offset: 3px; border-radius: 2px; animation: pw3-shake .42s; } @keyframes pw3-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ===== sections ===== */ #pw3lp .sec { padding: 80px 0; border-top: 1px solid var(--line); } #pw3lp .eyebrow { display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-bottom: 15px; } #pw3lp .eyebrow .sq { width: 10px; height: 10px; background: var(--grad); display: inline-block; } #pw3lp .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; } #pw3lp .sec-lead { font-size: 15px; color: var(--soft); margin-top: 14px; max-width: 58ch; line-height: 1.9; } #pw3lp .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; } #pw3lp .step { border: 1px solid var(--line); border-radius: 4px; padding: 22px 20px; background: #fff; } #pw3lp .step .sn { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; color: #B6B6BC; } #pw3lp .step .st { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 15.5px; margin: 11px 0 8px; color: var(--ink); } #pw3lp .step .sd { font-size: 12.5px; color: var(--mut); line-height: 1.75; } #pw3lp .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; } #pw3lp .pillar { border: 1px solid var(--line); border-radius: 4px; padding: 28px 24px; background: #fff; } #pw3lp .pillar .pn { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; color: #C4C4CA; letter-spacing: .1em; } #pw3lp .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); } #pw3lp .pillar p { font-size: 13px; color: var(--soft); line-height: 1.95; } #pw3lp .bignums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; } #pw3lp .bignum .bn { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(30px, 3.8vw, 44px); color: var(--ink); line-height: 1; } #pw3lp .bignum .bl { font-size: 12.5px; color: var(--mut); margin-top: 11px; } #pw3lp .bsup { font-size: 10.5px; color: #7C6BB5; font-weight: 500; margin-top: 6px; letter-spacing: .01em; } #pw3lp .fory { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 32px; margin-top: 34px; } #pw3lp .fy { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.7; font-weight: 500; } #pw3lp .fy svg { flex: none; margin-top: 4px; } #pw3lp .pw3-faq { margin-top: 30px; border-top: 1px solid var(--line); } #pw3lp .pw3-faq details { border-bottom: 1px solid var(--line); } #pw3lp .pw3-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; } #pw3lp .pw3-faq summary::-webkit-details-marker { display: none; } #pw3lp .pw3-faq .ic { flex: none; width: 16px; height: 16px; position: relative; } #pw3lp .pw3-faq .ic::before, #pw3lp .pw3-faq .ic::after { content: ""; position: absolute; background: var(--soft); } #pw3lp .pw3-faq .ic::before { top: 7px; left: 1px; right: 1px; height: 2px; } #pw3lp .pw3-faq .ic::after { left: 7px; top: 1px; bottom: 1px; width: 2px; transition: transform .2s; } #pw3lp .pw3-faq details[open] .ic::after { transform: scaleY(0); } #pw3lp .pw3-faq .ans { padding: 0 2px 20px; font-size: 13.5px; color: var(--soft); line-height: 1.95; max-width: 62ch; } #pw3lp .cta-band { border-top: 1px solid var(--line); padding: 84px 0; text-align: center; } #pw3lp .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); } #pw3lp .cta-band h2 .u { position: relative; display: inline-block; } #pw3lp .cta-band h2 .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .13em; border-radius: 1px; background: var(--grad); } #pw3lp .cta-band p { font-size: 14.5px; color: var(--soft); margin-top: 16px; } #pw3lp .pw3-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; } #pw3lp .pw3-btn:hover { background: #111827; } #pw3lp .pw3-btn .ar { transition: transform .15s; } #pw3lp .pw3-btn:hover .ar { transform: translateX(3px); } /* ===== ロゴスライダー（提携企業・2行・逆方向） ===== */ #pw3lp .logobar { padding: 30px 0 36px; border-top: 1px solid var(--line); overflow: hidden; } #pw3lp .logobar-h { text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin-bottom: 22px; } #pw3lp .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } #pw3lp .marquee + .marquee { margin-top: 16px; } #pw3lp .mtrack { display: flex; align-items: center; gap: 32px; width: max-content; animation: pw3-marqL 40s linear infinite; } #pw3lp .mtrack.rev { animation: pw3-marqR 40s linear infinite; } #pw3lp .marquee:hover .mtrack { animation-play-state: paused; } #pw3lp .mlogo { flex: none; width: 128px; height: 42px; border: 1px solid var(--line); border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 2px 8px; overflow: hidden; } #pw3lp .mlogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } @keyframes pw3-marqL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pw3-marqR { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ===== responsive ===== */ @media (max-width: 860px) { #pw3lp .herogrid { grid-template-columns: 1fr; gap: 30px; } #pw3lp .fcol .card { max-width: none; } #pw3lp .ivslide { display: none; } /* スライダーは PC（2カラム時）のみ */ #pw3lp .steps { grid-template-columns: 1fr 1fr; } #pw3lp .pillars { grid-template-columns: 1fr; } #pw3lp .bignums { grid-template-columns: 1fr 1fr; gap: 30px 20px; } #pw3lp .fory { grid-template-columns: 1fr; } } @media (max-width: 620px) { #pw3lp .sec { padding: 54px 0; } #pw3lp .steps { grid-template-columns: 1fr; } #pw3lp .cta-band { padding: 60px 0; } #pw3lp .wrap { padding: 0 18px; } #pw3lp h1 { font-size: 30px; line-height: 1.24; } #pw3lp .pad { padding: 20px 18px 22px; } #pw3lp .meta { gap: 14px 22px; margin-top: 28px; padding-top: 18px; } #pw3lp .meta .l .en { display: none; } #pw3lp .meta .n { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { #pw3lp .pw3-fade { animation: none; } #pw3lp .pbar i { transition: none; } #pw3lp .mtrack { animation: none; } #pw3lp .path.pri .ar { animation: none; } }