/* プロダクトページのひな形（2026-10 作り直し・1本目はアナリティクス）。 TOP の部品（top.css：.fv .sct .sh .kicker .btn .pill .cases .faq など）をそのまま使い、 ひな形だけの部品をここに書く。色と書体は top.css の変数（--navy --sky --ink --st-* …）を使う。 7ページで共通に使うので、プロダクトの名前に依存する指定は書かない。 文は少なく、図・アイコン・動きで見せる。動きは prefers-reduced-motion で止める。 */ /* ---------- 1. 冒頭 ---------- */ #Contents.uTop.uProd .up-fv { padding: 44px 24px 96px; } #Contents.uProd .up-hero { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; } #Contents.uProd .up-hero-t { min-width: 0; } #Contents.uProd .up-hero h1 { margin-top: 22px; display: grid; gap: 12px; } #Contents.uProd .up-name { font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; letter-spacing: .06em; color: var(--navy); } #Contents.uProd .up-catch { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.45; font-weight: 900; letter-spacing: .01em; color: var(--ink); text-wrap: balance; } #Contents.uProd .up-catch .gr { background: linear-gradient(100deg, var(--navy) 0%, var(--sky) 45%, var(--navy) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sweep 6s ease-in-out infinite; white-space: nowrap; } #Contents.uProd .up-br-sp { display: none; } #Contents.uProd .up-pain { margin-top: 24px; padding: 12px 18px; border-left: 3px solid var(--sky); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.72); font-size: 16px; font-weight: 700; line-height: 1.8; color: var(--ink); } #Contents.uProd .up-def { margin-top: 18px; font-size: 16px; line-height: 2; color: var(--ink2); text-wrap: pretty; } #Contents.uProd .up-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; } /* 画面の見本（9月の分析と、定例で決めたこと） */ #Contents.uProd .up-shot { margin: 0; min-width: 0; } #Contents.uProd .up-shot-in { display: grid; gap: 14px; padding: 22px 22px 18px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(244,248,255,.82)); border: 1px solid var(--glass-b); box-shadow: 0 0 0 1px rgba(16,44,120,.06), 0 50px 90px -50px rgba(16,44,120,.55); backdrop-filter: blur(14px); } #Contents.uProd .up-shot-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-shot-h .ic { height: 18px; width: auto; color: var(--sky); } #Contents.uProd .up-shot-h small { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 700; text-align: right; } #Contents.uProd .up-sum { padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(41,169,255,.12), rgba(16,44,120,.06)); border: 1px solid rgba(41,169,255,.28); font-size: 14px; line-height: 1.8; color: var(--ink); } #Contents.uProd .up-sum b { color: var(--navy); } #Contents.uProd .up-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #Contents.uProd .up-kpi > div { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line2); min-width: 0; } #Contents.uProd .up-kpi span { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.5; } #Contents.uProd .up-kpi b { font-size: 24px; font-weight: 900; color: var(--navy); line-height: 1.25; font-variant-numeric: tabular-nums; } #Contents.uProd .up-kpi b small { font-size: 12px; margin-left: 1px; } #Contents.uProd .up-kpi b.is-t { font-size: 14px; font-weight: 700; line-height: 1.5; } #Contents.uProd .up-kpi em { font-style: normal; font-size: 11px; font-weight: 700; color: #1372CE; } #Contents.uProd .up-dec-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-dec-h .ic { height: 16px; width: auto; color: var(--sky); } #Contents.uProd .up-dec { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-dec li { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); font-size: 13px; line-height: 1.6; color: var(--ink); } #Contents.uProd .up-dec li i { white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; color: #fff; background: var(--navy); border-radius: 999px; padding: 2px 6px; } #Contents.uProd .up-note { display: block; font-size: 11px; color: var(--faint); } /* 冒頭の見本の段階（資料を開いた→料金まで読んだ→予約した）。棒の長さは社数に比例 */ #Contents.uProd .up-fn { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-fn li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "b b"; align-items: baseline; gap: 4px 10px; } #Contents.uProd .up-fn span { grid-area: l; font-size: 12px; font-weight: 700; color: var(--ink2); } #Contents.uProd .up-fn b { grid-area: n; font-size: 20px; font-weight: 900; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-fn b small { font-size: 11px; margin-left: 1px; } #Contents.uProd .up-fn i { grid-area: b; display: block; width: max(var(--w), 10px); height: 10px; border-radius: 999px; background: var(--st-sign); transform-origin: left center; } #Contents.uProd .up-fn li:nth-child(2) i { background: var(--st-exist); } #Contents.uProd .up-fn li.is-goal span { color: var(--navy); } #Contents.uProd .up-fn li.is-goal i { background: linear-gradient(90deg, var(--sky), var(--navy)); box-shadow: 0 0 0 4px rgba(41,169,255,.18); } #Contents.uTop .go .up-fn i { animation: upGrowX .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .7s; } #Contents.uTop .go .up-fn li:nth-child(2) i { animation-delay: .95s; } #Contents.uTop .go .up-fn li:nth-child(3) i { animation-delay: 1.2s; } /* 冒頭の見本（Webセールス）：お客様のサイトの画面で、3つの場面を順に見せる（15秒でくり返す）。 1 料金のページでポップアップの質問に答える → 2 資料請求のフォームに入力する → 3 サンクスページで相談を予約する。 動きが無いとき（動きを減らす設定・印刷）は、場面1を出したまま止める */ #Contents.uProd .up-ws { position: relative; } #Contents.uProd .up-ws-win { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--glass-b); box-shadow: 0 0 0 1px rgba(16,44,120,.06), 0 50px 90px -50px rgba(16,44,120,.55); } #Contents.uProd .up-ws-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef2f8; border-bottom: 1px solid var(--line); } #Contents.uProd .up-ws-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #c9d3e3; } #Contents.uProd .up-ws-url { position: relative; margin-left: 10px; flex: 1; height: 22px; border-radius: 999px; background: #fff; overflow: hidden; } #Contents.uProd .up-ws-url em { position: absolute; inset: 0; padding: 3px 12px; font-style: normal; font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; } #Contents.uProd .up-ws-page { position: relative; height: 330px; background: linear-gradient(180deg, #fbfcff, #f2f6fd); } #Contents.uProd .up-ws-sc { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 14px; align-items: center; padding: 16px 16px 16px 18px; } #Contents.uProd .up-ws-sc.sc2, #Contents.uProd .up-ws-sc.sc3, #Contents.uProd .up-ws-url .sc2, #Contents.uProd .up-ws-url .sc3 { opacity: 0; visibility: hidden; } #Contents.uProd .up-ws-l { display: grid; align-content: start; gap: 10px; min-width: 0; align-self: start; padding-top: 4px; } #Contents.uProd .up-ws-src { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 10px; font-weight: 700; color: var(--ink2); } #Contents.uProd .up-ws-src .ic { height: 11px; width: auto; color: var(--sky); } #Contents.uProd .up-ws-t { font-size: 16px; font-weight: 900; line-height: 1.4; color: var(--ink); } #Contents.uProd .up-ws-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } #Contents.uProd .up-ws-plans li { display: grid; gap: 6px; padding: 9px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-ws-plans li.on { border-color: rgba(41,169,255,.55); } #Contents.uProd .up-ws-plans b { font-size: 11px; color: var(--ink); } #Contents.uProd .up-ws-plans i { display: block; height: 8px; width: 70%; border-radius: 4px; background: #dbe6f6; } #Contents.uProd .up-ws-pop { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid rgba(41,169,255,.45); box-shadow: 0 24px 50px -22px rgba(16,44,120,.55); } #Contents.uProd .up-ws-q { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--ink); } #Contents.uProd .up-ws-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } #Contents.uProd .up-ws-pop li { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 11.5px; color: var(--ink2); } #Contents.uProd .up-ws-pop li.on { border-color: var(--sky); background: #eef7ff; color: var(--ink); font-weight: 700; } #Contents.uProd .up-ws-ans { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); } #Contents.uProd .up-ws-ans p { font-size: 10.5px; color: var(--muted); } #Contents.uProd .up-ws-ans span, #Contents.uProd .up-ws-send { display: block; text-align: center; padding: 7px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--navy); } #Contents.uProd .up-ws-doc { display: grid; justify-items: start; gap: 8px; padding: 14px 12px; border-radius: 12px; background: linear-gradient(150deg, #0b2266, #1f5fd0); color: #fff; box-shadow: 0 18px 34px -20px rgba(16,44,120,.7); } #Contents.uProd .up-ws-doc .up-ict { background: #fff; } #Contents.uProd .up-ws-doc .up-ict .ic { color: var(--navy); } #Contents.uProd .up-ws-doc b { font-size: 13px; line-height: 1.5; } #Contents.uProd .up-ws-doc small { font-size: 10px; color: #c9dcff; } #Contents.uProd .up-ws-form { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 36px -24px rgba(16,44,120,.5); } #Contents.uProd .up-ws-fh { font-size: 12px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-ws-form dl { margin: 0; display: grid; gap: 6px; } #Contents.uProd .up-ws-form dl > div { display: grid; gap: 2px; } #Contents.uProd .up-ws-form dt { font-size: 10px; font-weight: 700; color: var(--muted); } #Contents.uProd .up-ws-form dd { margin: 0; min-height: 28px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: #fbfcff; font-size: 11.5px; color: var(--ink); } #Contents.uProd .up-ws-form .v { display: inline-block; max-width: 20em; overflow: hidden; white-space: nowrap; vertical-align: bottom; } #Contents.uProd .up-ws-ok { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: var(--ink); } #Contents.uProd .up-ws-ok span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: #16a34a; } #Contents.uProd .up-ws-okp { font-size: 11.5px; line-height: 1.7; color: var(--ink2); } #Contents.uProd .up-ws-slots li { text-align: center; font-variant-numeric: tabular-nums; } #Contents.uProd .up-ws-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #Contents.uProd .up-ws-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--muted); } #Contents.uProd .up-ws-steps li { --stc: #b8c4d8; } #Contents.uProd .up-ws-steps li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; background: var(--stc); } #Contents.uProd .up-ws-steps li.sc1 { --stc: var(--navy); color: var(--navy); background: #fff; border-color: rgba(41,169,255,.55); } #Contents.uProd .up-ws .up-note { display: block; margin-top: 8px; text-align: right; } /* 動き（15秒でくり返す。すべて同じ時刻に始まるので、場面・URL・段階・中の動きがそろう） */ #Contents.uTop .go .up-ws-sc.sc1, #Contents.uTop .go .up-ws-url .sc1 { animation: upWsS1 15s linear infinite; } #Contents.uTop .go .up-ws-sc.sc2, #Contents.uTop .go .up-ws-url .sc2 { animation: upWsS2 15s linear infinite; } #Contents.uTop .go .up-ws-sc.sc3, #Contents.uTop .go .up-ws-url .sc3 { animation: upWsS3 15s linear infinite; } #Contents.uTop .go .up-ws-steps li.sc1 { animation: upWsT1 15s linear infinite; } #Contents.uTop .go .up-ws-steps li.sc2 { animation: upWsT2 15s linear infinite; } #Contents.uTop .go .up-ws-steps li.sc3 { animation: upWsT3 15s linear infinite; } #Contents.uTop .go .up-ws-sc.sc1 .up-ws-pop { animation: upWsPopIn 15s ease infinite; } #Contents.uTop .go .up-ws-sc.sc1 .up-ws-pop li.on { animation: upWsPick 15s linear infinite; } #Contents.uTop .go .up-ws-ans { animation: upWsAns 15s ease infinite; } #Contents.uTop .go .up-ws-sc.sc1 .up-ws-ans span { animation: upWsPress1 15s ease infinite; } #Contents.uTop .go .up-ws-form .v1 { animation: upWsType1 15s steps(8) infinite; } #Contents.uTop .go .up-ws-form .v2 { animation: upWsType2 15s steps(7) infinite; } #Contents.uTop .go .up-ws-form .v3 { animation: upWsType3 15s steps(16) infinite; } #Contents.uTop .go .up-ws-form .up-ws-send { animation: upWsPress2 15s ease infinite; } #Contents.uTop .go .up-ws-pop.is-thx { animation: upWsThx 15s ease infinite; } #Contents.uTop .go .up-ws-slots li.on { animation: upWsSlot 15s linear infinite; } @keyframes upWsS1 { 0%, 30% { opacity: 1; visibility: visible; } 33%, 97% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @keyframes upWsS2 { 0%, 30% { opacity: 0; visibility: hidden; } 33%, 63% { opacity: 1; visibility: visible; } 66%, 100% { opacity: 0; visibility: hidden; } } @keyframes upWsS3 { 0%, 63% { opacity: 0; visibility: hidden; } 66%, 97% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes upWsT1 { 0%, 31% { --stc: var(--navy); color: var(--navy); background: #fff; border-color: rgba(41,169,255,.55); } 33%, 98% { --stc: #b8c4d8; color: var(--muted); background: rgba(255,255,255,.7); border-color: var(--line); } 100% { --stc: var(--navy); color: var(--navy); background: #fff; border-color: rgba(41,169,255,.55); } } @keyframes upWsT2 { 0%, 31% { --stc: #b8c4d8; color: var(--muted); background: rgba(255,255,255,.7); border-color: var(--line); } 33%, 64% { --stc: var(--navy); color: var(--navy); background: #fff; border-color: rgba(41,169,255,.55); } 66%, 100% { --stc: #b8c4d8; color: var(--muted); background: rgba(255,255,255,.7); border-color: var(--line); } } @keyframes upWsT3 { 0%, 64% { --stc: #b8c4d8; color: var(--muted); background: rgba(255,255,255,.7); border-color: var(--line); } 66%, 98% { --stc: var(--navy); color: var(--navy); background: #fff; border-color: rgba(41,169,255,.55); } 100% { --stc: #b8c4d8; color: var(--muted); background: rgba(255,255,255,.7); border-color: var(--line); } } @keyframes upWsPopIn { 0%, 2% { opacity: 0; transform: translateY(14px); } 6%, 100% { opacity: 1; transform: none; } } @keyframes upWsPick { 0%, 11% { border-color: var(--line); background: #fff; color: var(--ink2); font-weight: 400; } 13%, 100% { border-color: var(--sky); background: #eef7ff; color: var(--ink); font-weight: 700; } } @keyframes upWsAns { 0%, 15% { opacity: 0; } 19%, 100% { opacity: 1; } } @keyframes upWsPress1 { 0%, 25% { transform: none; box-shadow: none; } 27% { transform: scale(.94); box-shadow: 0 0 0 4px rgba(41,169,255,.35); } 30%, 100% { transform: none; box-shadow: 0 0 0 4px rgba(41,169,255,.35); } } @keyframes upWsType1 { 0%, 36% { max-width: 0; } 42%, 100% { max-width: 20em; } } @keyframes upWsType2 { 0%, 43% { max-width: 0; } 48%, 100% { max-width: 20em; } } @keyframes upWsType3 { 0%, 49% { max-width: 0; } 56%, 100% { max-width: 20em; } } @keyframes upWsPress2 { 0%, 58% { transform: none; box-shadow: none; } 60% { transform: scale(.95); box-shadow: 0 0 0 4px rgba(41,169,255,.35); } 62%, 100% { transform: none; box-shadow: 0 0 0 4px rgba(41,169,255,.35); } } @keyframes upWsThx { 0%, 68% { opacity: 0; transform: translateY(14px); } 72%, 100% { opacity: 1; transform: none; } } @keyframes upWsSlot { 0%, 80% { border-color: var(--line); background: #fff; color: var(--ink2); font-weight: 400; } 83%, 100% { border-color: var(--sky); background: #eef7ff; color: var(--ink); font-weight: 700; } } /* 冒頭の見本（フォームエージェント）：管理画面で、送る企業と文面を並べ、その下に送付の結果。 動き（.go が付いてから1回）：企業に順にチェックが入る → 差し込みが光る → 「送る」が押される → 結果が左から出る */ #Contents.uProd .up-fa { position: relative; } #Contents.uProd .up-fa-win { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--glass-b); box-shadow: 0 0 0 1px rgba(16,44,120,.06), 0 50px 90px -50px rgba(16,44,120,.55); } #Contents.uProd .up-fa-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(90deg, #0b2266, #17399a); color: #fff; } #Contents.uProd .up-fa-bar .up-ict { background: #fff; box-shadow: none; } #Contents.uProd .up-fa-bar .up-ict .ic { color: var(--navy); } #Contents.uProd .up-fa-bar b { font-size: 12.5px; } #Contents.uProd .up-fa-bar small { margin-left: auto; font-size: 11px; color: #c9dcff; } #Contents.uProd .up-fa-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 12px; padding: 14px; background: linear-gradient(180deg, #fbfcff, #f2f6fd); } #Contents.uProd .up-fa-h { display: grid; gap: 2px; font-size: 12px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-fa-h span { font-size: 10px; font-weight: 700; color: #1372CE; } #Contents.uProd .up-fa-list, #Contents.uProd .up-fa-msg { display: grid; align-content: start; gap: 8px; min-width: 0; } #Contents.uProd .up-fa-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } #Contents.uProd .up-fa-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-fa-list li > i { width: 16px; height: 16px; border-radius: 5px; background: var(--navy); position: relative; } #Contents.uProd .up-fa-list li > i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } #Contents.uProd .up-fa-list li > span { display: grid; min-width: 0; } #Contents.uProd .up-fa-list b { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-fa-list em { font-style: normal; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-fa-n { font-size: 11px; color: var(--muted); text-align: right; } #Contents.uProd .up-fa-n b { margin-left: 4px; font-size: 14px; color: var(--navy); } #Contents.uProd .up-fa-mail { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 11.5px; line-height: 1.7; color: var(--ink); } #Contents.uProd .up-fa-mail .to { font-size: 10px; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-fa-mail mark, #Contents.uProd .up-tpl mark { padding: 0 3px; border-radius: 4px; background: #dff0ff; color: var(--navy); font-weight: 700; } #Contents.uProd .up-fa-mail .url { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: #f3f7fe; font-size: 11px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-fa-send { justify-self: stretch; display: block; text-align: center; padding: 8px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--navy); } #Contents.uProd .up-fa-res { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } #Contents.uProd .up-fa-res li { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(16,44,120,.5); } #Contents.uProd .up-fa-res li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--sky); border-right: 2px solid var(--sky); transform: translateY(-50%) rotate(45deg); } #Contents.uProd .up-fa-res span { font-size: 10.5px; font-weight: 700; color: var(--muted); } #Contents.uProd .up-fa-res b { font-size: 22px; font-weight: 900; line-height: 1.2; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-fa-res b small { font-size: 11px; margin-left: 1px; } #Contents.uProd .up-fa-res li.is-goal { background: linear-gradient(150deg, #0b2266, #1f5fd0); border-color: transparent; } #Contents.uProd .up-fa-res li.is-goal span { color: #c9dcff; } #Contents.uProd .up-fa-res li.is-goal b { color: #fff; } #Contents.uProd .up-fa .up-note { display: block; margin-top: 8px; text-align: right; } #Contents.uTop .go .up-fa-list li > i { animation: upFaCheck .35s ease both; } #Contents.uTop .go .up-fa-list li:nth-child(1) > i { animation-delay: .9s; } #Contents.uTop .go .up-fa-list li:nth-child(2) > i { animation-delay: 1.15s; } #Contents.uTop .go .up-fa-list li:nth-child(3) > i { animation-delay: 1.4s; } #Contents.uTop .go .up-fa-list li:nth-child(4) > i { animation-delay: 1.65s; } #Contents.uTop .go .up-fa-mail mark { animation: upFaMark 1s ease both; animation-delay: 2s; } #Contents.uTop .go .up-fa-send { animation: upFaSend .6s ease both; animation-delay: 2.8s; } #Contents.uTop .go .up-fa-res li { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; } #Contents.uTop .go .up-fa-res li:nth-child(1) { animation-delay: 3.3s; } #Contents.uTop .go .up-fa-res li:nth-child(2) { animation-delay: 3.6s; } #Contents.uTop .go .up-fa-res li:nth-child(3) { animation-delay: 3.9s; } @keyframes upFaCheck { from { transform: scale(.4); background: #dbe3ef; } to { transform: none; background: var(--navy); } } @keyframes upFaMark { 0% { background: transparent; } 50% { background: #9fd8ff; } 100% { background: #dff0ff; } } @keyframes upFaSend { 0% { transform: none; box-shadow: none; } 40% { transform: scale(.95); } 100% { transform: none; box-shadow: 0 0 0 4px rgba(41,169,255,.35); } } /* 冒頭の見本（広告AIエージェント）：朝7時の診断。4つの媒体を確かめる → 今日見るべき3点が順に出る → 1件目を承認して反映（.go が付いてから1回） */ #Contents.uProd .up-aa { position: relative; } #Contents.uProd .up-aa-win { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--glass-b); box-shadow: 0 0 0 1px rgba(16,44,120,.06), 0 50px 90px -50px rgba(16,44,120,.55); } #Contents.uProd .up-aa-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(90deg, #0b2266, #17399a); color: #fff; } #Contents.uProd .up-aa-bar .up-ict { background: #fff; box-shadow: none; } #Contents.uProd .up-aa-bar .up-ict .ic { color: var(--navy); } #Contents.uProd .up-aa-bar b { font-size: 12.5px; } #Contents.uProd .up-aa-bar small { margin-left: auto; font-size: 11px; color: #c9dcff; font-variant-numeric: tabular-nums; } #Contents.uProd .up-aa-scan { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line2); background: #f6f9ff; } #Contents.uProd .up-aa-scan span { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; color: var(--ink2); } #Contents.uProd .up-aa-done { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: #16a34a; } #Contents.uProd .up-aa-h { padding: 12px 14px 0; font-size: 12.5px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-aa-list { list-style: none; margin: 0; padding: 8px 14px 14px; display: grid; gap: 7px; } #Contents.uProd .up-aa-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-aa-list .lv { align-self: start; margin-top: 1px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; } #Contents.uProd .up-aa-list .is-alert { border-color: #f6c9c9; } #Contents.uProd .up-aa-list .is-alert .lv { color: #fff; background: #d64545; } #Contents.uProd .up-aa-list .is-warn .lv { color: #8a5a00; background: #fdf0d2; } #Contents.uProd .up-aa-list .is-ok .lv { color: #1372CE; background: #eaf5ff; } #Contents.uProd .up-aa-list div { display: grid; gap: 2px; min-width: 0; } #Contents.uProd .up-aa-list b { font-size: 12px; line-height: 1.5; color: var(--ink); } #Contents.uProd .up-aa-list small { font-size: 10.5px; line-height: 1.55; color: var(--muted); } #Contents.uProd .up-aa-list .act { position: relative; display: grid; } #Contents.uProd .up-aa-list .act em { grid-area: 1 / 1; font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap; padding: 5px 10px; border-radius: 999px; text-align: center; color: var(--navy); border: 1px solid var(--navy); background: #fff; } #Contents.uProd .up-aa-list .is-alert .act .pre { color: #fff; background: var(--navy); } #Contents.uProd .up-aa-list .act .post { color: #fff; background: #16a34a; border-color: #16a34a; opacity: 0; } #Contents.uProd .up-aa .up-note { display: block; margin-top: 8px; text-align: right; } #Contents.uTop .go .up-aa-scan span { animation: upAaScan .5s ease both; } #Contents.uTop .go .up-aa-scan span:nth-child(1) { animation-delay: .8s; } #Contents.uTop .go .up-aa-scan span:nth-child(2) { animation-delay: 1s; } #Contents.uTop .go .up-aa-scan span:nth-child(3) { animation-delay: 1.2s; } #Contents.uTop .go .up-aa-scan span:nth-child(4) { animation-delay: 1.4s; } #Contents.uTop .go .up-aa-done { animation: upFadeIn .4s ease both; animation-delay: 1.8s; } #Contents.uTop .go .up-aa-list li { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; } #Contents.uTop .go .up-aa-list li:nth-child(1) { animation-delay: 2.1s; } #Contents.uTop .go .up-aa-list li:nth-child(2) { animation-delay: 2.4s; } #Contents.uTop .go .up-aa-list li:nth-child(3) { animation-delay: 2.7s; } #Contents.uTop .go .up-aa-list .is-alert .act .pre { animation: upAaPress .5s ease both; animation-delay: 3.6s; } #Contents.uTop .go .up-aa-list .is-alert .act .post { animation: upFadeIn .4s ease both; animation-delay: 4s; } @keyframes upAaScan { 0% { background: #fff; border-color: var(--line); color: var(--ink2); } 50% { background: #dff0ff; border-color: var(--sky); color: var(--navy); } 100% { background: #eef7ff; border-color: rgba(41,169,255,.5); color: var(--navy); } } @keyframes upAaPress { 0% { transform: none; } 50% { transform: scale(.92); } 100% { transform: none; opacity: 0; } } /* 広告AIエージェントのカードの見本 */ #Contents.uProd .up-chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-chk li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-chk span { text-align: center; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; } #Contents.uProd .up-chk b { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-chk em { font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap; } #Contents.uProd .up-chk .ng span { color: #fff; background: #d64545; } #Contents.uProd .up-chk .ng em { color: #c03030; } #Contents.uProd .up-chk .wa span { color: #8a5a00; background: #fdf0d2; } #Contents.uProd .up-chk .wa em { color: #8a5a00; } #Contents.uProd .up-chk .ok span { color: #1372CE; background: #eaf5ff; } #Contents.uProd .up-chk .ok em { color: #16a34a; } #Contents.uProd .up-prop { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-prop li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b s" "m s"; align-items: center; gap: 2px 10px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-prop b { grid-area: b; font-size: 12px; line-height: 1.5; color: var(--ink); } #Contents.uProd .up-prop small { grid-area: m; font-size: 10.5px; color: var(--muted); } #Contents.uProd .up-prop span { grid-area: s; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--muted); background: #f0f2f6; } #Contents.uProd .up-prop span.ok { color: #fff; background: #16a34a; } #Contents.uProd .up-kwx { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-kwx li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-kwx b { font-size: 12px; color: var(--ink); text-decoration: line-through; text-decoration-color: rgba(214,69,69,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-kwx span { font-size: 10px; font-weight: 700; color: #c03030; background: #fde8e8; border-radius: 999px; padding: 1px 8px; } #Contents.uProd .up-kwx em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; } #Contents.uProd .up-copy { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-copy li { display: grid; gap: 4px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); border-left: 3px solid var(--sky); } #Contents.uProd .up-copy span { justify-self: start; font-size: 10px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 1px 8px; } #Contents.uProd .up-copy b { font-size: 12px; line-height: 1.55; color: var(--ink); } #Contents.uProd .up-rep { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-rep .up-k4 div { background: #f6f9ff; } #Contents.uProd .up-rep-h { font-size: 11px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-rep ul { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 3px; } #Contents.uProd .up-rep li { position: relative; padding-left: 14px; font-size: 11.5px; color: var(--ink2); } #Contents.uProd .up-rep li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); } #Contents.uProd .up-share { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-share li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n b" "i i" "e e"; gap: 3px 8px; align-items: center; } #Contents.uProd .up-share span { grid-area: n; font-size: 12px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-share b { grid-area: b; font-size: 15px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-share i { grid-area: i; display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--sky), var(--navy)) 0 0 / var(--w) 100% no-repeat, #e6ecf6; } #Contents.uProd .up-share em { grid-area: e; font-style: normal; font-size: 10.5px; color: var(--muted); } /* 冒頭の見本（AIチャット）：質問 → 考えている印 → 3社と理由 → 次に聞くことの候補 → 「毎朝メールで受け取る」を押す → タスクに保存（.go が付いてから1回） */ #Contents.uProd .up-ac { position: relative; } #Contents.uProd .up-ac-win { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--glass-b); box-shadow: 0 0 0 1px rgba(16,44,120,.06), 0 50px 90px -50px rgba(16,44,120,.55); } #Contents.uProd .up-ac-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(90deg, #0b2266, #17399a); color: #fff; } #Contents.uProd .up-ac-bar .up-ict { background: #fff; box-shadow: none; } #Contents.uProd .up-ac-bar .up-ict .ic { color: var(--navy); } #Contents.uProd .up-ac-bar b { font-size: 12.5px; } #Contents.uProd .up-ac-bar small { margin-left: auto; font-size: 11px; color: #c9dcff; } #Contents.uProd .up-ac-body { display: grid; gap: 12px; padding: 14px; background: linear-gradient(180deg, #fbfcff, #f2f6fd); } #Contents.uProd .up-ac-q { justify-self: end; max-width: 88%; margin: 0; } #Contents.uProd .up-ac-q span { display: block; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.65; } #Contents.uProd .up-ac-a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; } #Contents.uProd .up-ac-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--sky), var(--navy)); } #Contents.uProd .up-ac-ans { display: grid; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-ac-dots { grid-area: 1 / 1; display: flex; align-items: center; gap: 4px; height: 20px; margin: 0; opacity: 0; } #Contents.uProd .up-ac-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); } #Contents.uProd .up-ac-t { grid-area: 1 / 1; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink); } #Contents.uProd .up-ac-t b { font-size: 14px; color: var(--navy); } #Contents.uProd .up-ac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-ac-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f6f9ff; border: 1px solid var(--line2); } #Contents.uProd .up-ac-list li > i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: var(--navy); } #Contents.uProd .up-ac-list span { display: grid; min-width: 0; } #Contents.uProd .up-ac-list b { font-size: 12px; color: var(--ink); } #Contents.uProd .up-ac-list em { font-style: normal; font-size: 10.5px; line-height: 1.5; color: var(--muted); } #Contents.uProd .up-ac-list small { font-size: 10px; font-weight: 700; white-space: nowrap; padding: 2px 9px; border-radius: 999px; color: #fff; background: #1372CE; } #Contents.uProd .up-ac-list small.md { color: #1372CE; background: #eaf5ff; } #Contents.uProd .up-ac-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } #Contents.uProd .up-ac-sug span { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid rgba(41,169,255,.5); } #Contents.uProd .up-ac-sug .is-pick { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 4px rgba(41,169,255,.25); } #Contents.uProd .up-ac-done { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; background: #ecfdf3; border: 1px solid #bbf7d0; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #166534; } #Contents.uProd .up-ac-done b { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; background: #16a34a; } #Contents.uProd .up-ac .up-note { display: block; margin-top: 8px; text-align: right; } #Contents.uTop .go .up-ac-q { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: .6s; } #Contents.uTop .go .up-ac-dots { animation: upAcThink 1.1s ease both; animation-delay: 1.3s; } #Contents.uTop .go .up-ac-dots i { animation: upAcDot .6s ease-in-out infinite alternate; } #Contents.uTop .go .up-ac-dots i:nth-child(2) { animation-delay: .2s; } #Contents.uTop .go .up-ac-dots i:nth-child(3) { animation-delay: .4s; } #Contents.uTop .go .up-ac-t { animation: upFadeIn .4s ease both; animation-delay: 2.4s; } #Contents.uTop .go .up-ac-list li { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; } #Contents.uTop .go .up-ac-list li:nth-child(1) { animation-delay: 2.6s; } #Contents.uTop .go .up-ac-list li:nth-child(2) { animation-delay: 2.85s; } #Contents.uTop .go .up-ac-list li:nth-child(3) { animation-delay: 3.1s; } #Contents.uTop .go .up-ac-sug { animation: upFadeIn .5s ease both; animation-delay: 3.5s; } #Contents.uTop .go .up-ac-sug .is-pick { animation: upAcPick .6s ease both; animation-delay: 4.3s; } #Contents.uTop .go .up-ac-done { animation: upPopIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: 4.9s; } @keyframes upAcThink { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes upAcDot { from { transform: translateY(0); opacity: .45; } to { transform: translateY(-4px); opacity: 1; } } @keyframes upAcPick { 0% { color: var(--navy); background: #fff; border-color: rgba(41,169,255,.5); box-shadow: none; transform: none; } 45% { transform: scale(.93); } 100% { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 4px rgba(41,169,255,.25); transform: none; } } /* AIチャットのカードの見本 */ #Contents.uProd .up-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-why li { display: grid; gap: 5px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-why li:first-child { border-color: rgba(41,169,255,.55); box-shadow: 0 0 0 3px rgba(41,169,255,.12); } #Contents.uProd .up-why b { font-size: 12px; color: var(--ink); } #Contents.uProd .up-why span { display: flex; flex-wrap: wrap; gap: 4px; } #Contents.uProd .up-why em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #1372CE; background: #eef6ff; border-radius: 999px; padding: 1px 8px; } #Contents.uProd .up-mail { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-mail-h { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-mail-h span { font-size: 10px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 1px 8px; } #Contents.uProd .up-mail-h b { font-size: 11.5px; color: var(--navy); } #Contents.uProd .up-mail-n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #Contents.uProd .up-mail-n div { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: #f6f9ff; } #Contents.uProd .up-mail-n span { font-size: 10.5px; font-weight: 700; color: var(--muted); } #Contents.uProd .up-mail-n b { font-size: 18px; font-weight: 900; line-height: 1.2; color: #16a34a; font-variant-numeric: tabular-nums; } #Contents.uProd .up-mail-n b small { font-size: 11px; margin-left: 1px; } #Contents.uProd .up-mail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } #Contents.uProd .up-mail li { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink); } #Contents.uProd .up-mail li em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; } #Contents.uProd .up-hbar { list-style: none; margin: 0; padding: 12px; display: grid; gap: 9px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-hbar li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 3.4em; align-items: center; gap: 8px; } #Contents.uProd .up-hbar span { font-size: 11.5px; font-weight: 700; color: var(--ink2); white-space: nowrap; } #Contents.uProd .up-hbar i { position: relative; display: block; height: 10px; border-radius: 999px; background: #e6ecf6; overflow: hidden; } #Contents.uProd .up-hbar i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--sky), var(--navy)); transform-origin: left center; } #Contents.uTop .in .up-hbar i::before { animation: upGrowX .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .45s; } #Contents.uProd .up-hbar b { font-size: 13px; font-weight: 900; text-align: right; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-hbar b small { font-size: 10px; margin-left: 1px; } #Contents.uProd .up-kw .up-chips { margin: 0; } #Contents.uProd .up-idea { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } #Contents.uProd .up-idea li { position: relative; padding: 7px 10px 7px 30px; border-radius: 10px; background: #f3f7fe; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--ink); } #Contents.uProd .up-idea li::before { content: "案"; position: absolute; left: 9px; top: 8px; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; color: #fff; background: var(--navy); } /* 冒頭の見本（MCP）：お使いのAIの画面。依頼 → ウルテクから3つを読み出す → 3社と理由 → 1社目への下書き（.go が付いてから1回） */ #Contents.uProd .up-mc { position: relative; } #Contents.uProd .up-mc-win { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--glass-b); box-shadow: 0 0 0 1px rgba(16,44,120,.06), 0 50px 90px -50px rgba(16,44,120,.55); } #Contents.uProd .up-mc-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f3f5f9; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-mc-dots { display: flex; gap: 5px; } #Contents.uProd .up-mc-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d4dae4; } #Contents.uProd .up-mc-bar b { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #Contents.uProd .up-mc-bar small { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 10.5px; font-weight: 700; color: #166534; background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 999px; padding: 2px 9px; } #Contents.uProd .up-mc-bar small i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; } #Contents.uProd .up-mc-body { display: grid; gap: 10px; padding: 14px; } #Contents.uProd .up-mc-q { justify-self: end; max-width: 88%; margin: 0; } #Contents.uProd .up-mc-q span { display: block; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: #eef1f6; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.65; } #Contents.uProd .up-mc-tool { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 4px; border-radius: 10px; background: #f6f9ff; border: 1px dashed #b8cbe6; } #Contents.uProd .up-mc-tool li { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-mc-tool b { flex: none; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; background: var(--sky); } #Contents.uProd .up-mc-ans { display: grid; gap: 8px; } #Contents.uProd .up-mc-t { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink); } #Contents.uProd .up-mc-t b { font-size: 14px; color: var(--navy); } #Contents.uProd .up-mc-list { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 5px; } #Contents.uProd .up-mc-list li { padding-left: 2px; font-size: 11.5px; line-height: 1.5; color: var(--ink2); } #Contents.uProd .up-mc-list li::marker { font-weight: 900; color: var(--navy); } #Contents.uProd .up-mc-list b { display: block; font-size: 12px; color: var(--ink); } #Contents.uProd .up-mc-list span { font-size: 10.5px; color: var(--muted); } #Contents.uProd .up-mc-draft { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--sky); font-size: 11.5px; line-height: 1.7; color: var(--ink); } #Contents.uProd .up-mc-draft p { margin: 0; } #Contents.uProd .up-mc-draft .h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-mc-draft .h span { font-size: 10px; color: #fff; background: var(--navy); border-radius: 999px; padding: 1px 8px; } #Contents.uProd .up-mc-draft mark, #Contents.uProd .up-fm mark { padding: 0 3px; border-radius: 4px; background: #dff0ff; color: var(--navy); font-weight: 700; } #Contents.uProd .up-mc .up-note { display: block; margin-top: 8px; text-align: right; } #Contents.uTop .go .up-mc-q { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: .6s; } #Contents.uTop .go .up-mc-tool { animation: upFadeIn .3s ease both; animation-delay: 1.1s; } #Contents.uTop .go .up-mc-tool li { animation: upFadeIn .4s ease both; } #Contents.uTop .go .up-mc-tool li:nth-child(1) { animation-delay: 1.3s; } #Contents.uTop .go .up-mc-tool li:nth-child(2) { animation-delay: 1.65s; } #Contents.uTop .go .up-mc-tool li:nth-child(3) { animation-delay: 2s; } #Contents.uTop .go .up-mc-t { animation: upFadeIn .4s ease both; animation-delay: 2.5s; } #Contents.uTop .go .up-mc-list li { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; } #Contents.uTop .go .up-mc-list li:nth-child(1) { animation-delay: 2.7s; } #Contents.uTop .go .up-mc-list li:nth-child(2) { animation-delay: 2.95s; } #Contents.uTop .go .up-mc-list li:nth-child(3) { animation-delay: 3.2s; } #Contents.uTop .go .up-mc-draft { animation: upPopIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: 3.7s; } #Contents.uTop .go .up-mc-draft mark { animation: upFaMark 1s ease both; animation-delay: 4.3s; } /* MCPのカードの見本 */ #Contents.uProd .up-fm { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); font-size: 12px; line-height: 1.75; color: var(--ink); } #Contents.uProd .up-fm p { margin: 0; } #Contents.uProd .up-fm-c { justify-self: end; display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--muted); } #Contents.uProd .up-fm-c span { font-weight: 700; margin-right: 4px; } #Contents.uProd .up-fm-c b { font-size: 15px; font-weight: 900; color: #16a34a; font-variant-numeric: tabular-nums; } #Contents.uProd .up-sim { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-sim-h { margin: 0; font-size: 11px; font-weight: 700; color: var(--navy); } #Contents.uProd .up-sim .up-chips { margin: 0; } #Contents.uProd .up-sim ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } #Contents.uProd .up-sim li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #f6f9ff; } #Contents.uProd .up-sim li b { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-sim li em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: #1372CE; border-radius: 999px; padding: 1px 9px; } #Contents.uProd .up-sim li em.md { color: #1372CE; background: #eaf5ff; } #Contents.uProd .up-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } #Contents.uProd .up-chain li { position: relative; display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-chain li:not(:last-child)::after { content: ""; position: absolute; left: 3.1em; bottom: -12px; width: 8px; height: 8px; border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: translateX(-50%) rotate(45deg); } #Contents.uProd .up-chain span { justify-self: start; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } #Contents.uProd .up-chain li:first-child span { background: linear-gradient(135deg, var(--sky), var(--navy)); } #Contents.uProd .up-chain b { font-size: 12px; line-height: 1.5; color: var(--ink); } #Contents.uTop .in .up-chain li { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; } #Contents.uTop .in .up-chain li:nth-child(1) { animation-delay: .4s; } #Contents.uTop .in .up-chain li:nth-child(2) { animation-delay: .75s; } #Contents.uTop .in .up-chain li:nth-child(3) { animation-delay: 1.1s; } /* 差し込みのある文面のテンプレート（フォームエージェントのカード） */ #Contents.uProd .up-tpl { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); font-size: 12px; line-height: 1.75; color: var(--ink); } #Contents.uProd .up-tpl-h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-tpl-h span { font-size: 10px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 1px 8px; } #Contents.uProd .up-tpl-h b { font-size: 11.5px; color: var(--navy); } #Contents.uProd .up-tpl .url { font-size: 11px; font-weight: 700; color: #1372CE; } /* ---------- 共通の部品 ---------- */ #Contents.uProd .up-ict { flex: none; width: 44px; height: 44px; border-radius: 14px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sky) 0%, #2f6fd6 55%, var(--navy) 100%); box-shadow: 0 14px 28px -16px rgba(16,44,120,.75), inset 0 1px 0 rgba(255,255,255,.3); } #Contents.uProd .up-ict .ic { height: 21px; width: 26px; color: #fff; } #Contents.uProd .up-ict.sm { width: 28px; height: 28px; border-radius: 9px; } #Contents.uProd .up-ict.sm .ic { height: 14px; width: 17px; } #Contents.uProd .up-fine { font-size: 12.5px; color: var(--muted); line-height: 1.8; } #Contents.uProd .up-c { margin-top: 18px; text-align: center; } #Contents.uProd .up-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #Contents.uProd .up-open { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } #Contents.uProd .up-open[target="_blank"]::after { content: " ↗"; color: var(--sky); } #Contents.uProd .up-open:hover { text-decoration: none; } @keyframes upSpin { to { transform: rotate(360deg); } } @keyframes upPing { 0%, 14% { transform: translate(var(--tx, -50%), var(--ty, 0)) scale(1.07); box-shadow: 0 0 0 6px rgba(41,169,255,.22), 0 24px 44px -30px rgba(16,44,120,.6); } 26%, 100% { transform: translate(var(--tx, -50%), var(--ty, 0)) scale(1); box-shadow: 0 24px 44px -30px rgba(16,44,120,.5); } } @keyframes upFlowL { to { background-position: -24px 0; } } @keyframes upFlowR { to { background-position: 24px 0; } } @keyframes upFlowD { to { background-position: 0 24px; } } @keyframes upPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } } @keyframes upSlide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes upGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes upFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes upGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ---------- 2. 毎月の使われ方 ---------- */ #Contents.uProd .up-use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } /* 回る図：4つの段階を、時計回りに点が回る */ #Contents.uProd .up-ring { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin: 0 auto; } #Contents.uProd .up-ring-c { position: absolute; inset: 15%; border-radius: 50%; border: 2px dashed #bcd6f3; } #Contents.uProd .up-orbit { position: absolute; inset: -2px; border-radius: 50%; animation: upSpin 12s linear infinite; } #Contents.uProd .up-orbit::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 5px rgba(41,169,255,.22), 0 0 18px rgba(41,169,255,.8); } #Contents.uProd .up-ring-m { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--navy); } #Contents.uProd .up-ring-m .ic { height: 30px; width: auto; color: var(--sky); } #Contents.uProd .up-ring ol { list-style: none; margin: 0; padding: 0; } #Contents.uProd .up-ring li { --tx: -50%; --ty: 0; position: absolute; width: 132px; display: grid; justify-items: center; gap: 8px; padding: 14px 10px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-align: center; transform: translate(var(--tx), var(--ty)); box-shadow: 0 24px 44px -30px rgba(16,44,120,.5); animation: upPing 12s ease-in-out infinite; } #Contents.uProd .up-ring li b { font-size: 14px; line-height: 1.45; color: var(--ink); } #Contents.uProd .up-ring li.n1 { left: 50%; top: 0; --tx: -50%; --ty: 0; animation-delay: 0s; } #Contents.uProd .up-ring li.n2 { left: 100%; top: 50%; --tx: -100%; --ty: -50%; animation-delay: 3s; } #Contents.uProd .up-ring li.n3 { left: 50%; top: 100%; --tx: -50%; --ty: -100%; animation-delay: 6s; } #Contents.uProd .up-ring li.n4 { left: 0; top: 50%; --tx: 0; --ty: -50%; animation-delay: 9s; } #Contents.uProd .up-ring li.is-main { background: linear-gradient(150deg, #0b2266, #17399a 60%, #1f5fd0); border-color: transparent; } #Contents.uProd .up-ring li.is-main b { color: #fff; } #Contents.uProd .up-ring li.is-main .up-ict { background: #fff; } #Contents.uProd .up-ring li.is-main .up-ict .ic { color: var(--navy); } /* 定例で決めること */ #Contents.uProd .up-out-h { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: .04em; } #Contents.uProd .up-out ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; } #Contents.uProd .up-out li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -42px rgba(16,44,120,.5); } #Contents.uProd .up-out li div { display: grid; gap: 4px; min-width: 0; } #Contents.uProd .up-out li b { font-size: 19px; line-height: 1.4; color: var(--ink); } #Contents.uProd .up-out li span { font-size: 14.5px; line-height: 1.7; color: var(--ink2); } #Contents.uProd .up-out li em { justify-self: start; font-style: normal; font-size: 12.5px; font-weight: 700; color: #1372CE; background: #eef6ff; border-radius: 999px; padding: 2px 12px; } /* 共有する相手：中心の「毎月の分析」から4方向へ線が流れる */ #Contents.uProd .up-hub { margin-top: 64px; } #Contents.uProd .up-hub-h { text-align: center; font-size: 19px; font-weight: 700; line-height: 1.6; color: var(--ink); } #Contents.uProd .up-hub-g { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px 64px; align-items: center; } #Contents.uProd .up-hub-n { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -42px rgba(16,44,120,.5); } #Contents.uProd .up-hub-n .up-ict { grid-row: 1 / 3; } #Contents.uProd .up-hub-n b { font-size: 16px; color: var(--ink); } #Contents.uProd .up-hub-n > span:last-child { font-size: 13.5px; line-height: 1.7; color: var(--ink2); } #Contents.uProd .up-hub-n.hl1 { grid-column: 1; grid-row: 1; } #Contents.uProd .up-hub-n.hl2 { grid-column: 1; grid-row: 2; } #Contents.uProd .up-hub-n.hr1 { grid-column: 3; grid-row: 1; } #Contents.uProd .up-hub-n.hr2 { grid-column: 3; grid-row: 2; } #Contents.uProd .up-hub-n::after { content: ""; position: absolute; top: 50%; width: 64px; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--sky) 0 8px, transparent 8px 12px); background-size: 24px 3px; } #Contents.uProd .up-hub-n.hl1::after, #Contents.uProd .up-hub-n.hl2::after { left: 100%; animation: upFlowL 1s linear infinite; } #Contents.uProd .up-hub-n.hr1::after, #Contents.uProd .up-hub-n.hr2::after { right: 100%; animation: upFlowR 1s linear infinite; } #Contents.uProd .up-hub-c { grid-column: 2; grid-row: 1 / 3; position: relative; width: 190px; height: 190px; display: grid; place-items: center; } #Contents.uProd .up-hub-c::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(41,169,255,.5); animation: upPulse 2.4s ease-out infinite; } #Contents.uProd .up-hub-c > span { position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 8px; color: #fff; background: radial-gradient(120px 90px at 70% 20%, rgba(41,169,255,.55), transparent 70%), linear-gradient(150deg, #0b2266, #17399a 60%, #1f5fd0); box-shadow: 0 30px 60px -30px rgba(16,44,120,.9); } #Contents.uProd .up-hub-c .ic { height: 34px; width: auto; color: #fff; } #Contents.uProd .up-hub-c b { font-size: 16px; line-height: 1.4; text-align: center; } /* ---------- 3. 導入前と導入後 ---------- */ #Contents.uProd .up-bas-h, #Contents.uProd .up-bas li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 44px minmax(0, 1fr); gap: 14px; align-items: center; } #Contents.uProd .up-bas-h { padding-bottom: 10px; } #Contents.uProd .up-bas-h span { justify-self: start; font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 3px 14px; border-radius: 999px; } #Contents.uProd .up-bas-h .b { color: var(--muted); background: #e7ebf2; } #Contents.uProd .up-bas-h .a { color: #fff; background: linear-gradient(135deg, var(--sky), var(--navy)); } #Contents.uProd .up-bas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } #Contents.uProd .up-bas-s { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); } #Contents.uProd .up-bas-b { padding: 14px 18px; border-radius: 16px; background: #edf0f5; font-size: 14.5px; line-height: 1.75; color: var(--ink2); } #Contents.uProd .up-bas-a { padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(41,169,255,.45); box-shadow: 0 20px 40px -32px rgba(16,44,120,.6); font-size: 15px; font-weight: 700; line-height: 1.75; color: var(--ink); } #Contents.uProd .up-bas-ar { position: relative; justify-self: center; width: 36px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #b9c6dc, var(--sky)); transform-origin: left center; } #Contents.uProd .up-bas-ar::after { content: ""; position: absolute; right: -2px; top: 50%; width: 10px; height: 10px; border-top: 3px solid var(--sky); border-right: 3px solid var(--sky); transform: translateY(-50%) rotate(45deg); } #Contents.uTop .in .up-bas .up-bas-ar { animation: upGrowX .5s ease-out both; animation-delay: calc(var(--d, 0s) + .35s); } #Contents.uTop .in .up-bas .up-bas-a { animation: upSlide .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0s) + .55s); } /* 時期ごとの変化：線が伸びる */ #Contents.uProd .up-steps { position: relative; margin-top: 56px; } #Contents.uProd .up-steps-line { position: absolute; top: 15px; left: calc(100% / 6); right: calc(100% / 6); height: 3px; border-radius: 2px; background: #dbe5f3; } #Contents.uProd .up-steps-line i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--navy)); transform-origin: left center; } #Contents.uTop .in .up-steps-line i { animation: upGrowX 1.4s cubic-bezier(.2,.7,.2,1) both; animation-delay: .3s; } #Contents.uProd .up-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #Contents.uProd .up-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; } #Contents.uProd .up-steps li b { align-self: start; font-size: 15px; font-weight: 900; color: #fff; padding: 4px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--sky), var(--navy)); box-shadow: 0 0 0 5px var(--wash); } #Contents.uProd .up-steps li span { max-width: 300px; font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); } /* ---------- 4. 5つの分析 ---------- */ #Contents.uProd .up-fs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #Contents.uProd .up-f { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px 22px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(16,44,120,.5); } #Contents.uProd .up-f.is-opt { background: var(--wash); border-style: dashed; } #Contents.uProd .up-f-l { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--navy); } #Contents.uProd .up-f-l i { font-style: normal; font-size: 12px; color: var(--sky); } #Contents.uProd .up-f h3 { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); min-height: 3.2em; text-align: center; } #Contents.uProd .up-f-ba { display: grid; gap: 8px; } #Contents.uProd .up-f-ba p { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.65; } #Contents.uProd .up-f-ba span { font-size: 11px; font-weight: 700; letter-spacing: .06em; } #Contents.uProd .up-f-ba .b { background: #f0f2f6; color: var(--muted); } #Contents.uProd .up-f-ba .a { position: relative; background: #eef7ff; border: 1px solid rgba(41,169,255,.45); color: var(--ink); font-weight: 700; } #Contents.uProd .up-f-ba .a span { color: #1372CE; } #Contents.uProd .up-f-ba .a::before { content: ""; position: absolute; left: 22px; top: -9px; border: 5px solid transparent; border-top: 6px solid #9cc9ee; } #Contents.uProd .up-f-foot { margin-top: auto; } #Contents.uProd .up-f > .up-f-l { align-self: center; justify-self: center; } #Contents.uProd .up-mock-b { display: grid; align-content: start; gap: 12px; min-width: 0; } /* カードは8段。横に並んだカード同士で、段の高さをそろえる（見出し・見本の一文・見本の本体・注記・これまで・これから・リンク） */ @supports (grid-template-rows: subgrid) { #Contents.uProd .up-fs { row-gap: 24px; } #Contents.uProd .up-f { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 12px; align-content: start; } #Contents.uProd .up-f h3 { min-height: 0; } #Contents.uProd .up-f .up-mock { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; align-content: stretch; } #Contents.uProd .up-f .up-mock-f { align-self: end; } #Contents.uProd .up-f-ba { display: contents; } #Contents.uProd .up-f-ba .b, #Contents.uProd .up-f-ba .a { align-content: start; } #Contents.uProd .up-f-foot { margin-top: 0; align-self: end; } } /* 見本の枠と、見本に共通の小さな部品 */ #Contents.uProd .up-mock { display: grid; align-content: start; gap: 12px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, #f6f9ff, #edf3ff); border: 1px solid var(--line2); } #Contents.uProd .up-mock-h { font-size: 13px; line-height: 1.7; color: var(--ink); } #Contents.uProd .up-mock-h b { color: var(--navy); font-size: 15px; } #Contents.uProd .up-mock-f { font-size: 12px; line-height: 1.6; color: var(--muted); } #Contents.uProd .up-sub { font-size: 11.5px; font-weight: 700; color: var(--muted); } #Contents.uProd .s1 { background: var(--st-sign); } #Contents.uProd .s2 { background: var(--st-exist); } #Contents.uProd .s3 { background: var(--st-lead); } #Contents.uProd .s4 { background: var(--st-deal); } #Contents.uProd .up-tabs { display: flex; flex-wrap: wrap; gap: 6px; } #Contents.uProd .up-tabs span { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; } #Contents.uProd .up-tabs span.on { background: var(--navy); border-color: var(--navy); color: #fff; } /* 01 アクセス履歴：段階ごとの社数を積み上げた月ごとの棒（画面に入ると伸びる） */ #Contents.uProd .up-col { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 10px 10px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-col > div { display: grid; justify-items: center; gap: 4px; min-width: 0; } #Contents.uProd .up-col > div > span { display: flex; flex-direction: column-reverse; width: 100%; max-width: 28px; height: 120px; transform-origin: bottom center; } #Contents.uTop .in .up-col > div > span { animation: upGrowY .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .4s; } #Contents.uProd .up-col i { display: block; flex: none; min-height: 2px; } #Contents.uProd .up-col i.s4 { border-radius: 4px 4px 0 0; } #Contents.uProd .up-col b { font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--navy); text-align: center; padding-bottom: 3px; font-variant-numeric: tabular-nums; } #Contents.uProd .up-col em { font-style: normal; font-size: 11px; line-height: 1.3; color: var(--muted); } #Contents.uProd .up-col > div.on em { color: var(--navy); font-weight: 700; } #Contents.uProd .up-leg4 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink2); } #Contents.uProd .up-leg4 li { display: inline-flex; align-items: center; gap: 5px; } #Contents.uProd .up-leg4 i { width: 9px; height: 9px; border-radius: 3px; } #Contents.uProd .up-leg4 b { color: var(--navy); font-variant-numeric: tabular-nums; } /* 02 広告効果：来訪した企業の業種のドーナツ */ #Contents.uProd .up-donut-w { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-donut { position: relative; width: 108px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--st-deal) 0 46.77%, var(--st-exist) 0 69.35%, var(--st-sign) 0 87.1%, #d7e0ee 0); } #Contents.uTop .in .up-donut { animation: upSpinIn 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: .4s; } @keyframes upSpinIn { from { transform: rotate(-90deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } } #Contents.uProd .up-donut span { position: absolute; inset: 17px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; } #Contents.uProd .up-donut b { font-size: 22px; font-weight: 900; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-donut b small { font-size: 11px; margin-left: 1px; } #Contents.uProd .up-donut em { font-style: normal; font-size: 10px; line-height: 1.4; color: var(--muted); } #Contents.uProd .up-dleg { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } #Contents.uProd .up-dleg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink2); } #Contents.uProd .up-dleg li:first-child { font-weight: 700; color: var(--ink); } #Contents.uProd .up-dleg i { width: 10px; height: 10px; border-radius: 3px; } #Contents.uProd .up-dleg b { color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .d1 { background: var(--st-deal); } #Contents.uProd .d2 { background: var(--st-exist); } #Contents.uProd .d3 { background: var(--st-sign); } #Contents.uProd .d4 { background: #d7e0ee; } #Contents.uProd .up-lead-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--navy); color: #fff; } #Contents.uProd .up-lead-n span { font-size: 12px; font-weight: 700; } #Contents.uProd .up-lead-n b { font-size: 20px; font-weight: 900; line-height: 1.2; } #Contents.uProd .up-lead-n b small { font-size: 11px; margin-left: 1px; } #Contents.uProd .up-lead-n em { font-style: normal; font-size: 11.5px; color: #c9dcff; } /* 03 競合分析：企業の一覧表（TOP の表の指定〈幅640px・行を隠す〉を外す） */ #Contents.uProd .up-tbl { width: 100%; min-width: 0; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 11.5px; background: #fff; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; } #Contents.uProd .up-tbl th { white-space: normal; padding: 7px 6px; font-size: 10px; font-weight: 700; line-height: 1.4; text-align: left; color: var(--muted); background: #f6f9ff; border: 0; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-tbl td { white-space: normal; padding: 8px 6px; line-height: 1.45; text-align: left; vertical-align: middle; color: var(--ink2); background: transparent; border: 0; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-tbl tr:last-child td { border-bottom: 0; } #Contents.uProd .up-tbl tbody tr { opacity: 1; transform: none; animation: none; } #Contents.uProd .up-tbl td b { display: block; font-size: 11.5px; color: var(--ink); } #Contents.uProd .up-tbl td small { display: block; font-size: 10.5px; color: var(--muted); } #Contents.uProd .up-tbl tr.is-gap td { background: #f8fafd; } #Contents.uProd .up-tbl .bd { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; background: var(--navy); color: #fff; } #Contents.uProd .up-tbl .bd.no { background: #eef4ff; color: #1372CE; } /* 04 CV分析：問い合わせの前と後の2本の棒と、増えた人数（画面に入ると伸びる） */ #Contents.uProd .up-pl { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); } #Contents.uProd .up-pl span { display: inline-flex; align-items: center; gap: 6px; } #Contents.uProd .up-pl i { width: 16px; height: 6px; border-radius: 999px; } #Contents.uProd .up-pl i.pre, #Contents.uProd .up-pp .pre i { background: #b4bfd6; } #Contents.uProd .up-pl i.post, #Contents.uProd .up-pp .post i { background: linear-gradient(90deg, var(--sky), var(--navy)); } #Contents.uProd .up-pp { display: grid; gap: 6px; } #Contents.uProd .up-pp > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n d" "r d"; align-items: center; gap: 4px 12px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-pp > div.is-hl { border-color: #bfe3ff; background: #f1f8ff; } #Contents.uProd .up-pp .n { grid-area: n; font-size: 12.5px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-pp .r { grid-area: r; display: grid; gap: 3px; } #Contents.uProd .up-pp .r > span { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 6px; } #Contents.uProd .up-pp .t { display: block; height: 6px; } #Contents.uProd .up-pp .t i { display: block; height: 100%; min-width: 2px; border-radius: 999px; transform-origin: left center; } #Contents.uTop .in .up-pp .post .t i { animation: upGrowX .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .5s; } #Contents.uProd .up-pp em { font-style: normal; font-size: 11px; color: var(--ink2); font-variant-numeric: tabular-nums; } #Contents.uProd .up-pp > div > b { grid-area: d; font-size: 20px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-pp > div > b small { font-size: 11px; margin-left: 1px; } /* 05 インサイト分析：業種のタブと、テーマ・キーワードの札 */ #Contents.uProd .up-kw { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-chips { display: flex; flex-wrap: wrap; gap: 6px; } #Contents.uProd .up-chips span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 5px 11px; border-radius: 12px; background: #eef4ff; font-size: 12.5px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-chips b { font-size: 11.5px; color: #1372CE; } #Contents.uProd .up-chips span.is-new { background: linear-gradient(135deg, #e3f4ff, #e4ecff); border: 1px solid rgba(41,169,255,.5); } #Contents.uTop .in .up-chips span.is-new { animation: pulse 1.6s ease-in-out 2; animation-delay: .8s; } #Contents.uProd .up-chips em { font-style: normal; font-size: 10.5px; color: #fff; background: #1372CE; border-radius: 999px; padding: 0 7px; } #Contents.uProd .up-chips.is-sm span { font-size: 11.5px; font-weight: 500; background: #f3f6fb; color: var(--ink2); } #Contents.uProd .up-chips.is-sm b { font-size: 11px; } /* 営業との共有：企業ごとの段階と、次に行うこと */ #Contents.uProd .up-sh { display: grid; gap: 6px; } #Contents.uProd .up-sh > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "x x"; align-items: center; gap: 4px 10px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-sh .n { grid-area: n; min-width: 0; } #Contents.uProd .up-sh .n b { display: block; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-sh .n small { display: block; font-size: 11px; color: var(--muted); } #Contents.uProd .up-sh .pill { grid-area: p; font-style: normal; } #Contents.uProd .up-sh .x { grid-area: x; font-size: 12px; color: var(--ink2); } #Contents.uProd .up-sh .x::before { content: "次に行うこと："; font-weight: 700; color: var(--navy); } /* 資料ルーム：ルームの見出し・資料の並び・共有用のURL */ #Contents.uProd .up-room { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-room-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); } #Contents.uProd .up-room-h i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--sky), var(--navy)); } #Contents.uProd .up-room ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #Contents.uProd .up-room li { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 10px; background: #f3f7fe; border: 1px solid var(--line2); text-align: center; } #Contents.uProd .up-room li b { font-size: 11.5px; color: var(--ink); line-height: 1.4; } #Contents.uProd .up-room li em { font-style: normal; font-size: 10px; color: var(--muted); } #Contents.uProd .up-room-u { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #f3f6fb; font-size: 11.5px; color: var(--muted); } #Contents.uProd .up-room-u b { font-size: 11px; color: #fff; background: var(--navy); border-radius: 999px; padding: 3px 12px; } /* 閲覧の分析：4つの数字と、日ごとの棒 */ #Contents.uProd .up-k4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #Contents.uProd .up-k4 div { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-k4 span { font-size: 10.5px; font-weight: 700; color: var(--muted); } #Contents.uProd .up-k4 b { font-size: 20px; font-weight: 900; line-height: 1.2; color: var(--navy); font-variant-numeric: tabular-nums; } #Contents.uProd .up-k4 b small { font-size: 11px; margin-left: 1px; } #Contents.uProd .up-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-spark i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--st-sign); transform-origin: bottom center; } #Contents.uProd .up-spark i.on { background: linear-gradient(180deg, var(--sky), var(--navy)); } #Contents.uTop .in .up-spark i { animation: upGrowY .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .4s; } /* ページごとの精読：ページごとの到達率の棒と、長く読んだページ */ #Contents.uProd .up-pages { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-pages li { display: grid; grid-template-columns: 18px 5.6em minmax(0, 1fr) 34px; grid-template-areas: "i n t b" ". . e e"; align-items: center; gap: 0 8px; font-size: 11.5px; color: var(--ink2); } #Contents.uProd .up-pages li i { grid-area: i; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; } #Contents.uProd .up-pages li > span:not(.t) { grid-area: n; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-pages .t { grid-area: t; display: block; height: 8px; border-radius: 999px; background: #e6ecf6; overflow: hidden; } #Contents.uProd .up-pages .t span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sky), var(--navy)); transform-origin: left center; } #Contents.uTop .in .up-pages .t span { animation: upGrowX .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .45s; } #Contents.uProd .up-pages li b { grid-area: b; font-size: 11px; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; } #Contents.uProd .up-pages li em { grid-area: e; justify-self: end; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 0 8px; margin-top: 3px; } #Contents.uProd .up-pages li.is-drop > span:not(.t) { color: #c2410c; font-weight: 700; } #Contents.uProd .up-pages li.is-drop .t span { background: linear-gradient(90deg, #fdba74, #ea580c); } #Contents.uProd .up-pages li.is-long > span:not(.t) { color: var(--navy); font-weight: 700; } /* 読んだ企業：企業ごとに、読んだ資料と調べているテーマ */ #Contents.uProd .up-rd { display: grid; gap: 6px; } #Contents.uProd .up-rd > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-rd .n { min-width: 0; } #Contents.uProd .up-rd .n b { display: block; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #Contents.uProd .up-rd .n small { display: block; font-size: 11px; color: var(--muted); } #Contents.uProd .up-rd em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #1372CE; background: #eef6ff; border: 1px solid rgba(41,169,255,.35); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } /* 資料の中のポップアップ：資料の画面に重なる案内と、表示の条件 */ #Contents.uProd .up-viewer { position: relative; padding: 10px 12px 64px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); overflow: hidden; } #Contents.uProd .up-viewer-h { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); } #Contents.uProd .up-viewer-h b { color: var(--navy); } #Contents.uProd .up-viewer-p { display: grid; gap: 6px; margin-top: 10px; } #Contents.uProd .up-viewer-p i { display: block; height: 8px; border-radius: 4px; background: #e8edf5; } #Contents.uProd .up-viewer-p i.s { width: 60%; } #Contents.uProd .up-pop { position: absolute; right: 10px; bottom: 10px; left: 26%; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(41,169,255,.5); box-shadow: 0 16px 30px -16px rgba(16,44,120,.6); } #Contents.uProd .up-pop b { font-size: 11.5px; line-height: 1.5; color: var(--ink); } #Contents.uProd .up-pop span { justify-self: start; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 3px 12px; } #Contents.uTop .in .up-pop { animation: upPopIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: .9s; } @keyframes upPopIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } #Contents.uProd .up-cond { display: flex; flex-wrap: wrap; gap: 6px; } #Contents.uProd .up-cond span { font-size: 11px; font-weight: 700; color: var(--ink2); background: #fff; border: 1px dashed #b8cbe6; border-radius: 999px; padding: 3px 10px; } #Contents.uProd .up-cond.is-tool span { border-style: solid; color: var(--navy); } /* 通知と連携：チャットに届く通知 */ #Contents.uProd .up-notif { display: grid; gap: 6px; } #Contents.uProd .up-notif p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line2); font-size: 12px; line-height: 1.55; color: var(--ink); } #Contents.uProd .up-notif p b { font-size: 12px; color: var(--navy); } #Contents.uProd .up-notif p small { margin-left: 6px; font-size: 10.5px; color: var(--muted); } #Contents.uTop .in .up-notif p { animation: upSlide .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: .6s; } #Contents.uTop .in .up-notif p + p { animation-delay: 1s; } /* サンクスページの案内：送信の完了と、次に進む先 */ #Contents.uProd .up-thx { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-thx-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); } #Contents.uProd .up-thx-h span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: #16a34a; } #Contents.uProd .up-thx ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-thx li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f3f7fe; border: 1px solid var(--line2); } #Contents.uProd .up-thx li b { font-size: 12px; color: var(--ink); } #Contents.uProd .up-thx li em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; } #Contents.uProd .up-thx li.is-main { background: #eef7ff; border-color: rgba(41,169,255,.55); box-shadow: 0 0 0 3px rgba(41,169,255,.12); } #Contents.uTop .in .up-thx li.is-main { animation: pulse 1.6s ease-in-out 2; animation-delay: .8s; } /* 診断・アンケート：選ぶだけの質問と、回答に合う案内 */ #Contents.uProd .up-q { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line2); } #Contents.uProd .up-q-h { font-size: 12.5px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-q ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #Contents.uProd .up-q li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; color: var(--ink2); } #Contents.uProd .up-q li i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #b8c6dd; } #Contents.uProd .up-q li.on { border-color: var(--sky); background: #eef7ff; color: var(--ink); font-weight: 700; } #Contents.uProd .up-q li.on i { border-color: var(--navy); background: radial-gradient(circle, var(--navy) 40%, #fff 45%); } #Contents.uProd .up-q-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 11.5px; } #Contents.uProd .up-q-r b { font-size: 11.5px; color: var(--navy); background: #fff; border-radius: 999px; padding: 2px 10px; white-space: nowrap; } #Contents.uTop .in .up-q-r { animation: upPopIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: .9s; } /* ノーコードの設定：表示の条件の一覧 */ #Contents.uProd .up-set { margin: 0; display: grid; border-radius: 12px; background: #fff; border: 1px solid var(--line2); overflow: hidden; } #Contents.uProd .up-set > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line2); } #Contents.uProd .up-set > div:last-child { border-bottom: 0; background: #f3f7fe; } #Contents.uProd .up-set dt { font-size: 11px; font-weight: 700; color: var(--muted); } #Contents.uProd .up-set dd { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink); } #Contents.uProd .up-set > div:last-child dd { color: var(--navy); } /* サイトに来ていない企業（濃い青の帯） */ #Contents.uProd .up-wide { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 30px 32px; border-radius: 24px; color: #fff; background: radial-gradient(420px 260px at 100% 0%, rgba(41,169,255,.42), transparent 70%), linear-gradient(150deg, #0b2266 0%, #17399a 55%, #1f5fd0 100%); box-shadow: 0 40px 80px -46px rgba(16,44,120,.9); } #Contents.uProd .up-wide-t { display: grid; gap: 10px; min-width: 0; } #Contents.uProd .up-wide .up-f-l { color: #9fd8ff; } #Contents.uProd .up-wide h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 900; line-height: 1.55; color: #fff; } #Contents.uProd .up-wide p { font-size: 15px; line-height: 1.9; color: #d6e6ff; } #Contents.uProd .up-wide-n { display: grid; gap: 12px; } #Contents.uProd .up-wide-n div { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); } #Contents.uProd .up-wide-n b { font-size: 32px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; } #Contents.uProd .up-wide-n b small { font-size: 15px; margin-left: 2px; } #Contents.uProd .up-wide-n span { font-size: 13px; color: #d6e6ff; line-height: 1.7; } /* 5つの分析のあとの申し込みの行 */ #Contents.uProd .up-mid { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 24px 28px; border-radius: 22px; background: var(--wash); border: 1px solid var(--line); } #Contents.uProd .up-mid p { flex: 1 1 320px; font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--ink); } #Contents.uProd .up-mid-b { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- 5. ウルテクチームの並走 ---------- */ #Contents.uProd .up-run { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); align-items: center; max-width: 1040px; margin: 0 auto; } #Contents.uProd .up-lane { padding: 24px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(16,44,120,.5); } #Contents.uProd .up-lane.is-us { background: linear-gradient(150deg, #0b2266, #17399a 60%, #1f5fd0); border-color: transparent; color: #fff; } #Contents.uProd .up-lane-h { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 900; color: var(--ink); } #Contents.uProd .up-lane.is-us .up-lane-h { color: #fff; } #Contents.uProd .up-lane.is-us .up-ict { background: #fff; } #Contents.uProd .up-lane.is-us .up-ict .ic { color: var(--navy); } #Contents.uProd .up-lane ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } #Contents.uProd .up-lane li { position: relative; padding-left: 28px; font-size: 15.5px; font-weight: 700; line-height: 1.6; color: var(--ink); } #Contents.uProd .up-lane li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--sky), var(--navy)); } #Contents.uProd .up-lane.is-us li { color: #fff; } #Contents.uProd .up-lane.is-us li::before { background: #fff; color: var(--navy); } #Contents.uProd .up-lane-c { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; } #Contents.uProd .up-lane-c::before { content: ""; position: absolute; top: 34px; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--sky) 0 8px, transparent 8px 12px); background-size: 24px 3px; animation: upFlowR 1s linear infinite; } #Contents.uProd .up-lane-c span { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid rgba(41,169,255,.5); box-shadow: 0 0 0 6px rgba(41,169,255,.12); } #Contents.uProd .up-lane-c .ic { height: 30px; width: auto; color: var(--navy); } #Contents.uProd .up-lane-c b { font-size: 14px; color: var(--navy); } #Contents.uTop .in .up-run .is-you { animation: upSlideL .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .2s; } #Contents.uTop .in .up-run .is-us { animation: upSlide .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .35s; } @keyframes upSlideL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } /* 画面でできること（アイコンの並び） */ #Contents.uProd .up-can { margin: 44px auto 0; max-width: 1040px; } #Contents.uProd .up-can-h { text-align: center; font-size: 16px; font-weight: 700; color: var(--muted); } #Contents.uProd .up-can ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } #Contents.uProd .up-can li { display: grid; justify-items: center; gap: 10px; padding: 18px 10px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.6; color: var(--ink); } /* ---------- 6. ウルテク全体とのつながり ---------- */ #Contents.uProd .up-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } #Contents.uProd .up-flow li { position: relative; display: grid; gap: 8px; align-content: start; justify-items: start; padding: 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(16,44,120,.5); min-width: 0; } #Contents.uProd .up-flow li:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 50%; width: 16px; height: 16px; border-top: 2px solid var(--sky); border-right: 2px solid var(--sky); transform: translateY(-50%) rotate(45deg); } #Contents.uProd .up-flow li b { font-size: 16px; line-height: 1.6; color: var(--ink); } #Contents.uProd .up-flow li b a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } #Contents.uProd .up-flow li b a:hover { text-decoration: none; } #Contents.uProd .up-flow li > span:last-child { font-size: 14px; line-height: 1.8; color: var(--ink2); } #Contents.uProd .up-flow li.me { background: linear-gradient(150deg, #0b2266, #17399a 60%, #1f5fd0); border-color: transparent; } #Contents.uProd .up-flow li.me b { color: #fff; } #Contents.uProd .up-flow li.me > span:last-child { color: #d6e6ff; } #Contents.uProd .up-flow li.me .up-ict { background: #fff; } #Contents.uProd .up-flow li.me .up-ict .ic { color: var(--navy); } /* ---------- 7. 事例 ---------- */ /* 事例は template-parts/product-cases.php。TOP と同じ .cases（3列）をそのまま使う */ /* ---------- 9. 申し込み ---------- */ #Contents.uProd .up-end { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px 44px; border-radius: 28px; color: #fff; background: radial-gradient(520px 300px at 100% 0%, rgba(41,169,255,.45), transparent 70%), linear-gradient(150deg, #0b2266 0%, #17399a 55%, #1f5fd0 100%); box-shadow: 0 40px 80px -46px rgba(16,44,120,.9); } #Contents.uProd .up-end h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; line-height: 1.5; color: #fff; text-wrap: balance; } #Contents.uProd .up-end p { margin-top: 12px; font-size: 15px; line-height: 1.9; color: #d6e6ff; } #Contents.uProd .up-end-b { display: grid; gap: 12px; justify-items: stretch; } #Contents.uProd .up-end-b .btn { justify-content: center; text-align: center; } #Contents.uProd .up-end-b .btn.sec { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } #Contents.uProd .up-end-b .up-open { justify-self: center; color: #fff; } #Contents.uProd .up-end-b .up-open::after { color: #9fd8ff; } /* ---------- 画面の幅 ---------- */ @media (max-width: 1100px) { #Contents.uProd .up-hero { grid-template-columns: minmax(0, 1fr); gap: 44px; } #Contents.uProd .up-shot { max-width: 640px; } #Contents.uProd .up-use { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; margin: 0 auto; } #Contents.uProd .up-hub-g { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); column-gap: 40px; } #Contents.uProd .up-hub-n::after { width: 40px; } #Contents.uProd .up-hub-c { width: 150px; height: 150px; } #Contents.uProd .up-hub-c > span { width: 132px; height: 132px; } #Contents.uProd .up-bas-h, #Contents.uProd .up-bas li { grid-template-columns: 150px minmax(0, 1fr) 36px minmax(0, 1fr); } #Contents.uProd .up-fs { grid-template-columns: repeat(2, minmax(0, 1fr)); } #Contents.uProd .up-f h3 { min-height: 0; } #Contents.uProd .up-can ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } #Contents.uProd .up-wide { grid-template-columns: minmax(0, 1fr); } #Contents.uProd .up-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } #Contents.uProd .up-flow li:nth-child(2)::after { display: none; } #Contents.uProd .up-end { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px) { #Contents.uProd .up-fs { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; } #Contents.uProd .up-hub-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 14px; max-width: 640px; margin-left: auto; margin-right: auto; } #Contents.uProd .up-hub-c { grid-column: 1 / -1; grid-row: 1; justify-self: center; } #Contents.uProd .up-hub-n.hl1, #Contents.uProd .up-hub-n.hl2, #Contents.uProd .up-hub-n.hr1, #Contents.uProd .up-hub-n.hr2 { grid-column: auto; grid-row: auto; } #Contents.uProd .up-hub-n::after { display: none; } #Contents.uProd .up-run { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; } #Contents.uProd .up-lane-c { padding: 20px 0; } #Contents.uProd .up-lane-c::before { top: 0; bottom: 0; left: 50%; right: auto; width: 3px; height: auto; margin-left: -1.5px; background: repeating-linear-gradient(180deg, var(--sky) 0 8px, transparent 8px 12px); background-size: 3px 24px; animation-name: upFlowD; } #Contents.uProd .up-lane-c span, #Contents.uProd .up-lane-c b { position: relative; } #Contents.uProd .up-lane-c b { background: var(--wash); padding: 0 8px; } } @media (max-width: 760px) { #Contents.uTop.uProd .up-fv { padding: 28px 16px 64px; } #Contents.uProd .up-br-sp { display: inline; } #Contents.uProd .sh h2 br.up-br-sp, #Contents.uProd .sh h2 br.up-br-keep { display: inline; } /* TOP は狭い幅で見出しの改行を消す。句の切れ目に置いた改行だけ残す */ #Contents.uProd .up-catch { font-size: 23px; } #Contents.uProd .up-pain { font-size: 15px; } #Contents.uProd .up-shot-in { padding: 18px 14px 14px; } #Contents.uProd .up-ws-page { height: 456px; } #Contents.uProd .up-fa-body { grid-template-columns: minmax(0, 1fr); } #Contents.uProd .up-fa-res { gap: 14px; } #Contents.uProd .up-fa-res li { padding: 8px; } #Contents.uProd .up-fa-res li:not(:last-child)::after { right: -11px; } #Contents.uProd .up-fa-res b { font-size: 18px; } #Contents.uProd .up-ws-sc { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 10px; padding: 14px 12px; } #Contents.uProd .up-ws-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } #Contents.uProd .up-ws-plans i { width: 100%; } #Contents.uProd .up-ws-steps li { flex-direction: column; text-align: center; font-size: 10.5px; padding: 8px 6px; } #Contents.uProd .up-shot-h { flex-wrap: wrap; } #Contents.uProd .up-shot-h small { margin-left: 0; width: 100%; text-align: left; } #Contents.uProd .up-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } #Contents.uProd .up-kpi > div:last-child { grid-column: 1 / -1; } #Contents.uProd .up-out li { padding: 16px; gap: 12px; } #Contents.uProd .up-out li b { font-size: 17px; } #Contents.uProd .up-hub { margin-top: 48px; } #Contents.uProd .up-hub-h { font-size: 17px; } #Contents.uProd .up-hub-g { grid-template-columns: minmax(0, 1fr); } #Contents.uProd .up-bas-h { display: none; } #Contents.uProd .up-bas { gap: 18px; } #Contents.uProd .up-bas li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); } #Contents.uProd .up-bas-b::before, #Contents.uProd .up-bas-a::before { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; margin-bottom: 2px; } #Contents.uProd .up-bas-b::before { content: "導入前" / ""; color: var(--muted); } #Contents.uProd .up-bas-a::before { content: "導入後" / ""; color: #1372CE; } #Contents.uProd .up-bas-ar { transform: rotate(90deg); margin: 8px 0; transform-origin: center; } #Contents.uTop .in .up-bas .up-bas-ar { animation: none; } #Contents.uProd .up-steps-line { display: none; } #Contents.uProd .up-steps ol { grid-template-columns: minmax(0, 1fr); gap: 18px; } #Contents.uProd .up-steps li { grid-template-columns: 112px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; } #Contents.uProd .up-steps li b { justify-self: stretch; text-align: center; padding: 4px 8px; } #Contents.uProd .up-f { padding: 22px 18px; } #Contents.uProd .up-mock { padding: 12px; } #Contents.uProd .up-donut-w { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } #Contents.uProd .up-donut { width: 96px; } #Contents.uProd .up-donut span { inset: 15px; } #Contents.uProd .up-lane { padding: 20px 18px; } #Contents.uProd .up-can ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } #Contents.uProd .up-mid { padding: 20px 18px; } #Contents.uProd .up-mid-b, #Contents.uProd .up-mid-b .btn { width: 100%; } #Contents.uProd .up-mid-b .btn { justify-content: center; } #Contents.uProd .up-wide { padding: 24px 20px; } #Contents.uProd .up-flow { grid-template-columns: minmax(0, 1fr); gap: 28px; } #Contents.uProd .up-flow li:not(:last-child)::after { display: block; right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%) rotate(135deg); } #Contents.uProd .up-end { padding: 28px 20px; } } /* 回る図は、狭い幅では2×2の並びにする（点の回転は止める） */ @media (max-width: 560px) { #Contents.uProd .up-aa-list li { grid-template-columns: auto minmax(0, 1fr); } #Contents.uProd .up-aa-list .act { grid-column: 2; justify-self: start; } #Contents.uProd .up-mc-bar b span { display: none; } #Contents.uProd .up-ring { aspect-ratio: auto; width: 100%; } #Contents.uProd .up-ring-c { display: none; } #Contents.uProd .up-ring-m { position: static; transform: none; grid-auto-flow: column; justify-content: center; align-items: center; margin-bottom: 12px; } #Contents.uProd .up-ring-m br { display: none; } #Contents.uProd .up-ring-m .ic { height: 22px; } #Contents.uProd .up-ring ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; } #Contents.uProd .up-ring li { position: relative; left: auto; top: auto; width: auto; transform: none; animation: none; } #Contents.uProd .up-ring li.n1, #Contents.uProd .up-ring li.n2, #Contents.uProd .up-ring li.n3, #Contents.uProd .up-ring li.n4 { left: auto; top: auto; transform: none; } #Contents.uProd .up-ring li.n1 { grid-column: 1; grid-row: 1; } #Contents.uProd .up-ring li.n2 { grid-column: 2; grid-row: 1; } #Contents.uProd .up-ring li.n3 { grid-column: 2; grid-row: 2; } #Contents.uProd .up-ring li.n4 { grid-column: 1; grid-row: 2; } #Contents.uProd .up-ring li::after { content: ""; position: absolute; width: 12px; height: 12px; border-top: 2px solid var(--sky); border-right: 2px solid var(--sky); } #Contents.uProd .up-ring li.n1::after { right: -21px; top: 50%; transform: translateY(-50%) rotate(45deg); } #Contents.uProd .up-ring li.n2::after { bottom: -19px; left: 50%; transform: translateX(-50%) rotate(135deg); } #Contents.uProd .up-ring li.n3::after { left: -21px; top: 50%; transform: translateY(-50%) rotate(-135deg); } #Contents.uProd .up-ring li.n4::after { top: -19px; left: 50%; transform: translateX(-50%) rotate(-45deg); } } @media (prefers-reduced-motion: reduce) { #Contents.uProd .up-ws * { animation: none !important; } #Contents.uProd .up-fa * { animation: none !important; } #Contents.uProd .up-aa * { animation: none !important; } #Contents.uProd .up-ac * { animation: none !important; } #Contents.uProd .up-mc * { animation: none !important; } #Contents.uTop .in .up-chain li { animation: none; } #Contents.uTop .in .up-hbar i::before { animation: none; } #Contents.uProd .up-catch .gr, #Contents.uProd .up-orbit, #Contents.uProd .up-ring li, #Contents.uProd .up-hub-n::after, #Contents.uProd .up-hub-c::before, #Contents.uProd .up-lane-c::before { animation: none; } #Contents.uTop .in .up-bas .up-bas-ar, #Contents.uTop .in .up-bas .up-bas-a, #Contents.uTop .in .up-steps-line i, #Contents.uTop .in .up-col > div > span, #Contents.uTop .in .up-donut, #Contents.uTop .in .up-pp .post .t i, #Contents.uTop .in .up-chips span.is-new, #Contents.uTop .go .up-fn i, #Contents.uTop .go .up-ws *, #Contents.uTop .in .up-thx li.is-main, #Contents.uTop .in .up-q-r, #Contents.uTop .in .up-run .is-you, #Contents.uTop .in .up-run .is-us, #Contents.uTop .in .up-spark i, #Contents.uTop .in .up-pages .t span, #Contents.uTop .in .up-pop, #Contents.uTop .in .up-notif p { animation: none; } }