/* ============================================================ UniMind 共通スタイル（静的サイト） ------------------------------------------------------------ 前提：tokens.css を先に読み込むこと。 ★色・余白・角丸の値をこのファイルに直書きしないこと。 必ず tokens.css の CSS 変数を経由する（CLAUDE.md）。 出典：DESIGN.md v7 / docs/handoff/README_handoff.md ============================================================ */ *, *::before, *::after { box-sizing: border-box; } main { display: block; } /* ★ html に scroll-behavior: smooth を絶対に付けないこと。 anim.js の慣性スクロールは毎フレーム window.scrollTo() を呼ぶため、 1回ごとにCSSのスムーススクロールが起動し直して打ち消し合い、 ページがほとんどスクロールしなくなる（2026-07-20 実機で再現）。 アンカーリンクのイージングは anim.js の inertia() 内で処理済み。 */ /* ============================================================ ヘッダー（fixed・常時表示・MV内は透明／通過後に白96%＋blur） README: 高さ72px・ロゴ44px・ナビ4項目＋CTA・900px未満はハンバーガー ============================================================ */ .um-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--um-z-header); background: transparent; border-bottom: 1px solid transparent; /* ★初期状態ではtransitionを付けない。 付けたままだと、JSが初回に状態を補正する際に色変化が0.4sかけて アニメーションし「ページ遷移のたびにヘッダーが白く光る」現象になる。 transitionは js-ready（初回補正の完了後）に有効化する。 */ } html.js-ready .um-header { transition: background 0.4s ease, border-color 0.4s ease; } /* JavaScript無効時のフォールバック：ヘッダーを常時白にする。 透過のままだと帯を抜けた先で白ロゴ・白ナビが白背景に溶けて読めなくなるため。 （のインラインスクリプトが html に .js を付けるので、JS有効時はこの指定は当たらない） */ html:not(.js) .um-header { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: var(--um-border); } html:not(.js) .um-header .um-nav a { color: var(--um-text); } html:not(.js) .um-header .um-header__logo img { filter: none; } html:not(.js) .um-burger span { background: var(--um-heading); } /* MV を抜けたら白背景に切り替え（JS が .is-solid を付与） */ .um-header.is-solid { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: var(--um-border); } .um-header__inner { max-width: var(--um-content-max); margin: 0 auto; padding: 0 var(--um-section-x); height: var(--um-header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--um-sp-3); } .um-header__logo { display: flex; align-items: center; } .um-header__logo img { height: 44px; max-width: 40vw; width: auto; object-fit: contain; display: block; padding: 4px 0; filter: invert(1); /* ダーク背景上は白抜き（DESIGN.md §7） */ transition: filter 0.3s; } .um-header.is-solid .um-header__logo img, .um-header.is-menu-open .um-header__logo img { filter: none; } .um-nav { display: flex; align-items: center; gap: var(--um-sp-4); } .um-nav a { color: var(--um-white); font-size: 14px; font-weight: 500; transition: color 0.3s; } .um-header.is-solid .um-nav a { color: var(--um-text); } .um-nav a:hover { color: var(--um-primary); } .um-header__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--um-sp-1); background: var(--um-primary); color: var(--um-white); font-size: 14px; font-weight: 700; padding: 12px 24px; /* ヘッダーCTAのみ小さめ（README 共通シェル） */ border-radius: var(--um-r-ui); white-space: nowrap; transition: all var(--um-dur); } .um-header__cta:hover { background: var(--um-primary-hover); color: var(--um-white); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(11, 31, 63, 0.2); } /* ハンバーガー（44px・3本線→X） */ .um-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; flex: 0 0 auto; padding: 0; } .um-burger span { display: block; width: 22px; height: 2px; background: var(--um-white); transition: transform 0.3s, opacity 0.3s, background 0.3s; } .um-header.is-solid .um-burger span, .um-header.is-menu-open .um-burger span { background: var(--um-heading); } .um-header.is-menu-open .um-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .um-header.is-menu-open .um-burger span:nth-child(2) { opacity: 0; } .um-header.is-menu-open .um-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ドロワー */ .um-drawer { position: fixed; top: var(--um-header-h); left: 0; right: 0; z-index: var(--um-z-drawer); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--um-border); box-shadow: 0 8px 24px rgba(11, 31, 63, 0.08); display: flex; flex-direction: column; padding: var(--um-sp-1) var(--um-section-x) var(--um-sp-2); } .um-drawer[hidden] { display: none; } .um-drawer a { color: var(--um-text); font-size: 15px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--um-border); } .um-drawer a:last-child { border-bottom: none; } @media (max-width: 899px) { .um-nav { display: none; } .um-burger { display: flex; } /* ヘッダーCTAはSPでも表示する（ハンドオフ原本準拠。下部固定バーと併存） */ } /* ============================================================ メインビジュアル（100svh・3スライドヒーロー） レイヤー順＝背景画像 → canvas → 左スクリム → テキスト（DESIGN.md v7 §6） ============================================================ */ .um-mv { background: var(--um-grad-dark); color: var(--um-white); position: relative; overflow: hidden; min-height: 100vh; height: 100svh; display: flex; align-items: center; } .um-mv__bg { /* 舞台照明（v7で追加された最背面レイヤー） */ position: absolute; inset: 0; background: url(../img/mv_bg.webp) center / cover no-repeat; } .um-mv__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .um-mv__scrim { /* 左スクリム：テキストの可読性を担保 */ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14,14,16,0.8) 0%, rgba(14,14,16,0.4) 38%, rgba(14,14,16,0) 60%); } .um-mv__content { max-width: var(--um-content-max); margin: 0 auto; padding: 0 var(--um-section-x); width: 100%; position: relative; z-index: 2; } .um-mv__stage { position: relative; min-height: 460px; display: flex; align-items: center; } /* ローディング一体演出：粒子シーケンス完了（is-live）までUIを伏せる */ .um-mv .um-mv__content { opacity: 0; transition: opacity 0.8s ease-out; pointer-events: none; } .um-mv.is-live .um-mv__content { opacity: 1; pointer-events: auto; } .um-mv .um-mv__scrim, .um-mv .um-ind { opacity: 0; transition: opacity 0.8s; } .um-mv.is-live .um-mv__scrim, .um-mv.is-live .um-ind { opacity: 1; } /* --- スライド --------------------------------------------- */ .um-slide { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; z-index: 1; } .um-slide.is-active { pointer-events: auto; z-index: 2; } .um-slide > div { width: 100%; } /* 見出しの行マスクリビール。--n は行の並び順（JSではなくHTMLで指定） */ .um-slide h1, .um-slide .um-mv__catch { margin: 0 0 var(--um-sp-3); font-size: var(--um-h1); font-weight: 700; line-height: var(--um-lh-h1); } .um-line { display: block; overflow: hidden; } .um-line > span { display: inline-block; transform: translateY(110%); } .um-slide.is-active .um-line > span { transform: translateY(0); transition: transform 0.7s var(--um-ease-out) calc(0.5s + var(--n, 0) * 0.1s), opacity 0.4s ease calc(0.45s + var(--n, 0) * 0.1s); } .um-slide.is-prev .um-line > span { transform: translateY(-110%); transition: transform 0.4s ease-in calc(var(--n, 0) * 0.06s); } /* ラベル・本文・CTA列のフェード（--n でstagger） */ .um-fade { opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease; } .um-slide.is-active .um-fade { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease calc(0.6s + var(--n, 0) * 0.1s), transform 0.5s ease calc(0.6s + var(--n, 0) * 0.1s); } .um-mv__eyebrow { margin: 0 0 var(--um-sp-2); color: var(--um-white); font-size: var(--um-small); font-weight: 700; letter-spacing: var(--um-ls-label); } .um-mv__eyebrow--accent { color: var(--um-primary); margin-bottom: 12px; } .um-mv__eyebrow .um-num { color: var(--um-primary); letter-spacing: 0.04em; margin-right: var(--um-sp-2); } .um-mv__kicker { margin: 0 0 var(--um-sp-3); color: rgba(255,255,255,0.85); font-size: clamp(14px, 1.3vw, 15px); font-weight: 700; letter-spacing: 0.05em; } .um-mv__sub { margin: 0 0 var(--um-sp-6); font-size: clamp(15px, 1.4vw, 16px); line-height: var(--um-lh-body); color: rgba(255,255,255,0.78); max-width: 32em; } .um-mv__ctas { display: flex; flex-wrap: wrap; gap: var(--um-sp-2); align-items: center; } .um-btn--ghost { color: var(--um-white); font-size: 16px; font-weight: 500; padding: 16px 40px; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--um-r-ui); transition: all var(--um-dur); } .um-btn--ghost:hover { color: var(--um-white); border-color: var(--um-white); transform: translateY(-2px); } /* --- インジケーター（01/02/03＋進行バー）------------------ */ .um-ind { position: absolute; left: 0; right: 0; bottom: var(--um-sp-6); z-index: 3; } .um-ind__inner { max-width: var(--um-content-max); margin: 0 auto; padding: 0 var(--um-section-x); display: flex; gap: var(--um-sp-3); } .um-ind__btn { display: flex; flex-direction: column; gap: var(--um-sp-1); align-items: flex-start; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: var(--um-small); font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); transition: color 0.3s; } .um-ind__btn[aria-current="true"] { color: var(--um-white); } .um-ind__track { display: block; width: 48px; height: 2px; background: rgba(255,255,255,0.2); overflow: hidden; } .um-ind__bar { display: block; width: 100%; height: 100%; background: var(--um-primary); transform-origin: left; transform: scaleX(0); } .um-scroll-cue { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--um-sp-1); } .um-scroll-cue span:first-child { font-size: 10px; font-weight: 700; letter-spacing: var(--um-ls-label); color: rgba(255,255,255,0.6); } .um-scroll-cue__line { display: block; width: 1px; height: 48px; position: relative; overflow: hidden; } .um-scroll-cue__line i { position: absolute; inset: 0; background: rgba(255,255,255,0.6); animation: um-scrollline 2s ease-in-out infinite; } @keyframes um-scrollline { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* SPでは下部固定CTAバー（約72px）の背後にインジケーターが隠れるため上へ逃がす。 原本は bottom 48px のままだが、実機確認のうえ星さん指示で変更（2026-07-20・DESIGN.md v9）。 SCROLLキューも同バーに隠れるため非表示 */ @media (max-width: 899px) { .um-ind { bottom: 96px; } .um-scroll-cue { display: none; } } /* ============================================================ セクション背景装飾（配置指示書v1） 地色はCSS背景色が持ち、画像は半透明＋放射マスクで溶かす装飾レイヤー ============================================================ */ .um-deco { position: absolute; pointer-events: none; user-select: none; } .um-deco img { width: 100%; height: 100%; object-fit: cover; display: block; } .um-deco--service { right: 0; bottom: 0; width: 55vw; height: 72%; z-index: 0; opacity: 0.7; -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, black 50%, transparent 98%); mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, black 50%, transparent 98%); } .um-deco--issues { left: 0; top: 0; bottom: 0; width: 50vw; z-index: 0; opacity: 0.7; -webkit-mask-image: radial-gradient(ellipse 100% 120% at 0% 50%, black 50%, transparent 98%); mask-image: radial-gradient(ellipse 100% 120% at 0% 50%, black 50%, transparent 98%); } .um-deco--reason { right: 0; top: 0; bottom: 0; width: 50vw; z-index: -1; opacity: 0.7; -webkit-mask-image: radial-gradient(ellipse 100% 130% at 100% 50%, black 50%, transparent 98%); mask-image: radial-gradient(ellipse 100% 130% at 100% 50%, black 50%, transparent 98%); } .um-deco--flow { right: 0; bottom: 0; width: 60vw; height: 78%; z-index: -1; opacity: 0.65; -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, black 50%, transparent 98%); mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, black 50%, transparent 98%); } .um-deco--about { inset: 0; z-index: -2; opacity: 0.85; -webkit-mask-image: radial-gradient(ellipse 120% 120% at 70% 60%, black 55%, transparent 100%); mask-image: radial-gradient(ellipse 120% 120% at 70% 60%, black 55%, transparent 100%); } @media (max-width: 767px) { .um-deco { display: none; } } /* ============================================================ セクション共通パーツ ============================================================ */ /* position:relative（tokens.css）+ z-index:0 でスタッキングコンテキストを作る。 これにより z-index:-1 の .um-deco が「セクション背景の上・本文の下」に収まる。 ★背景色はここで指定しないこと。tokens.css の .um-section--off / --cta / --dark を 読み込み順（tokens.css → style.css）で上書きしてしまうため。地色はbodyの白が担う */ .um-section { z-index: var(--um-z-base); overflow: hidden; } .um-lead { margin: 0 0 var(--um-sp-6); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-muted); max-width: 40em; } .um-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--um-sp-5); } /* gap 40px（v8） */ .um-center { text-align: center; } .um-note { margin: 0 0 var(--um-sp-2); font-size: var(--um-body-sp); color: var(--um-muted); } /* --- カード（ホバー青反転・アイコン／バッジ連動）DESIGN.md §5 --- */ .um-card { display: flex; flex-direction: column; gap: var(--um-sp-2); color: var(--um-text); /* ホバー時に一括で切り替わる連動用の変数 */ --um-c-accent: var(--um-primary); --um-c-icon-t: translateY(0) rotate(0deg); --um-c-badge-bg: var(--um-primary); --um-c-badge-fg: var(--um-white); } .um-card--invert:hover { --um-c-accent: var(--um-white); --um-c-badge-bg: var(--um-white); --um-c-badge-fg: var(--um-primary); } .um-card__head { display: flex; align-items: flex-start; justify-content: space-between; } .um-card__icon { color: var(--um-c-accent); transform: var(--um-c-icon-t); transition: transform var(--um-dur), color var(--um-dur); } /* アイコンの動きはカードごとに変えてよい（控えめに）DESIGN.md §5 */ .um-card--invert:hover .um-card__icon { --um-c-icon-t: translateY(-4px) rotate(-8deg); } .um-card--rot-r.um-card--invert:hover .um-card__icon { --um-c-icon-t: translateY(-4px) rotate(8deg); } .um-card--rot-s.um-card--invert:hover .um-card__icon { --um-c-icon-t: translateY(-4px) rotate(-6deg); } .um-card--rot-rs.um-card--invert:hover .um-card__icon { --um-c-icon-t: translateY(-4px) rotate(6deg); } .um-card__badge { width: 40px; height: 40px; background: var(--um-c-badge-bg); color: var(--um-c-badge-fg); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--um-r-ui); display: flex; align-items: center; justify-content: center; font-size: var(--um-small); font-weight: 700; transition: all var(--um-dur); } .um-card h3 { margin: 0; color: inherit; font-size: var(--um-h3); font-weight: 700; line-height: var(--um-lh-heading); } .um-card--service h3 { font-size: var(--um-h3-lg); } .um-card p { margin: 0; font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: inherit; } /* ↑の `.um-card p`（詳細度0-1-1）に負けないよう、pの派生は必ず2クラスで書く */ .um-card .um-card__num { /* REASON の装飾数字 64px */ margin: 0; color: var(--um-c-accent); font-size: var(--um-num-deco); font-weight: 700; line-height: 0.75; letter-spacing: 0.04em; transition: color var(--um-dur); } .um-card .um-card__meta { font-size: var(--um-small); line-height: 1.6; opacity: 0.65; } .um-card__tag { align-self: flex-start; border: 1px solid var(--um-c-accent); color: var(--um-c-accent); font-size: 12px; font-weight: 500; padding: 4px 16px; border-radius: var(--um-r-pill); transition: all var(--um-dur); } .um-card--reason .um-card__head { margin-bottom: var(--um-sp-2); } .um-card--reason h3 { margin-bottom: var(--um-sp-2); } /* --- WORKS（準備中）--------------------------------------- */ .um-works__inner { display: flex; flex-direction: column; align-items: center; gap: var(--um-sp-3); text-align: center; } .um-works__inner .um-h2, .um-works__inner .um-label { margin: 0; } .um-badge-soon { display: inline-block; background: var(--um-bg-off); color: var(--um-primary); font-size: var(--um-small); font-weight: 700; padding: 8px 24px; border-radius: var(--um-r-pill); letter-spacing: 0.1em; } .um-works__inner p { margin: 0; font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: var(--um-muted); max-width: 36em; } /* ============================================================ FLOW（ピン留め演出／縦並びフォールバック） 768px未満・reduced-motion では必ず縦並び（DESIGN.md §6） ============================================================ */ .um-flow__list { display: flex; flex-direction: column; gap: var(--um-sp-2); } .um-flow-step { display: flex; gap: var(--um-sp-3); align-items: flex-start; background: var(--um-white); border: 1px solid var(--um-border); border-radius: var(--um-r-card); padding: clamp(24px, 3vw, 32px); } .um-flow-step__num { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--um-r-pill); background: var(--um-heading); color: var(--um-white); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; } .um-flow-step h3 { margin: 0 0 var(--um-sp-1); color: var(--um-heading); font-size: var(--um-h3); font-weight: 700; line-height: var(--um-lh-heading); } .um-flow-step p { margin: 0; font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: var(--um-muted); } /* ピン留め時のみ JS が .um-flow--pinned を付け、500vh＋stickyに切り替える。 ★overflow: visible は必須。.um-section の overflow: hidden が掛かったままだと このセクション自身が sticky の基準スクロールコンテナになってしまい、 ステージが一切貼り付かず「4画面ぶんの空白をスクロールするだけ」になる （ハンドオフ原本のピン留め版セクションにも overflow 指定は無い） */ .um-flow--pinned { height: 500vh; padding: 0; overflow: visible; } .um-flow--pinned .um-flow__list { display: none; } .um-flow__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 0 var(--um-section-x); } .um-flow__cols { display: flex; gap: var(--um-sp-8); align-items: stretch; } .um-flow__rail { flex: 0 0 280px; display: flex; flex-direction: column; justify-content: center; gap: var(--um-sp-1); } .um-flow__ind { display: flex; align-items: center; gap: var(--um-sp-2); padding: var(--um-sp-1) 0; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: var(--um-body-sp); color: var(--um-muted); font-weight: 400; transition: color var(--um-dur); } .um-flow__ind[aria-current="true"] { color: var(--um-primary); font-weight: 700; } .um-flow__ind-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--um-r-pill); display: flex; align-items: center; justify-content: center; font-size: var(--um-small); font-weight: 700; background: transparent; color: var(--um-muted); border: 1px solid var(--um-border); transition: all var(--um-dur); } .um-flow__ind[aria-current="true"] .um-flow__ind-num { background: var(--um-primary); color: var(--um-white); border-color: var(--um-primary); } .um-flow__panels { flex: 1; position: relative; min-height: 320px; } /* 退場＝上へ薄れる／登場＝下から20px（DESIGN.md §6 確定仕様） */ .um-flow__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; } .um-flow__panel.is-past { transform: translateY(-24px); } .um-flow__panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .um-flow__panel-card { background: var(--um-white); border: 1px solid var(--um-border); border-radius: var(--um-r-card); padding: clamp(24px, 3vw, 48px); box-shadow: var(--um-shadow-card); } .um-flow__panel-num { margin: 0 0 var(--um-sp-2); color: var(--um-primary); font-size: var(--um-num-deco); font-weight: 700; line-height: 0.75; letter-spacing: 0.04em; transform-origin: left bottom; transform: scale(0.8); opacity: 0; transition: transform 0.5s ease-out 0.1s, opacity 0.5s ease-out 0.1s; } .um-flow__panel.is-active .um-flow__panel-num { transform: scale(1); opacity: 1; } .um-flow__panel-card h3 { margin: 0 0 var(--um-sp-2); color: var(--um-heading); font-size: 24px; font-weight: 700; line-height: var(--um-lh-heading); } .um-flow__panel-card p { margin: 0; font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-flow__progress { position: absolute; left: var(--um-section-x); right: var(--um-section-x); bottom: var(--um-sp-4); max-width: var(--um-content-max); margin: 0 auto; height: 3px; background: var(--um-border); border-radius: var(--um-r-pill); overflow: hidden; } .um-flow__progress i { position: absolute; inset: 0; background: var(--um-primary); border-radius: var(--um-r-pill); transform-origin: left; transform: scaleX(0); } /* ============================================================ ABOUT ============================================================ */ .um-about__inner { display: flex; flex-wrap: wrap; gap: var(--um-sp-6); align-items: center; } .um-about__text { flex: 1 1 440px; min-width: 280px; } .um-about__text p { margin: 0 0 var(--um-sp-2); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-about__sign { margin: 0 0 var(--um-sp-3) !important; font-size: var(--um-small) !important; color: var(--um-muted); text-align: right; } .um-about__msg { font-size: var(--um-body-sp) !important; border-top: 1px solid var(--um-border); padding-top: var(--um-sp-3); margin-bottom: var(--um-sp-1) !important; } .um-about__media { flex: 1 1 360px; min-width: 240px; } /* 実素材が入るまでのプレースホルダー（DESIGN.md §7：未支給画像は明示する） */ .um-placeholder { border-radius: var(--um-r-img); border: 1px solid var(--um-border); background: repeating-linear-gradient(45deg, #FFFFFF, #FFFFFF 12px, #F0F0EE 12px, #F0F0EE 24px); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } .um-placeholder span { font-family: monospace; font-size: var(--um-small); color: var(--um-muted); background: var(--um-white); padding: 8px 16px; border-radius: var(--um-r-pill); border: 1px solid var(--um-border); } /* ============================================================ CONTACT CTA（青グラデ・フッター直前の必須セクション）DESIGN.md §5 ============================================================ */ .um-cta-section .um-label { color: rgba(255,255,255,0.85); } .um-cta-section .um-h2 { color: var(--um-white); } .um-cta-section__lead { margin: 0 auto var(--um-sp-6); font-size: var(--um-body); line-height: var(--um-lh-body); color: rgba(255,255,255,0.85); max-width: 36em; } .um-cta-section__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ============================================================ 下層ページ共通 ============================================================ */ /* ヘッダーは常時白（HTML側で class="um-header is-solid" を直書き）。 現在ページのナビリンクは青・700（原本準拠） */ .um-header .um-nav a.is-current { color: var(--um-primary); font-weight: 700; } /* v10：下層もトップ同様、タイトル帯を透過ヘッダーの下に潜り込ませる（padding-top 0）。 帯の上下padding clamp(140,18vw,240) が72pxヘッダーより十分大きく、文言は隠れない。 ハンドオフ原本は「下層＝常時白ヘッダー」だったが、トップとの一貫性を優先して統一 （2026-07-20 星さん判断委任 → DESIGN.md v10） */ .um-sub-main { padding-top: 0; } /* --- タイトル帯（ページタイトル + アンビエントリング）--- */ .um-page-header { background: var(--um-grad-dark); color: var(--um-white); padding: var(--um-section-y-hero) var(--um-section-x); position: relative; overflow: hidden; } .um-page-header__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .um-page-header__inner { max-width: var(--um-content-max); margin: 0 auto; position: relative; z-index: var(--um-z-content); } /* ★ヒーロー登場演出の準備が整うまで中身を伏せる（JS有効時のみ）。 伏せないと「素のテキストが一瞬見えてから、マスクされて再度アニメーションで出る」 という二度出しになる（2026-07-20 星さん指摘）。 原因は anim.js が動的importで、subpage.js の実行後にはじめて要求されること。 HTMLので先に付く html.js を使い、最初の描画より前に伏せる。 ・JS無効時（.js が付かない）＝そのまま表示。演出はないが読める ・reduced-motion では hero() が走らないため、伏せたままにしない ・anim.js が読めない場合に備え、subpage.js が保険で um-hero-ready を付ける */ html.js .um-page-header__inner { visibility: hidden; } html.js .um-page-header__inner.um-hero-ready { visibility: visible; } @media (prefers-reduced-motion: reduce) { html.js .um-page-header__inner { visibility: visible; } } /* .um-page-header__title はブログ（SWELL側が自前のH1を出すページ）で 帯タイトルを

として出す場合の同一見た目クラス（wp/swell_child/header.php 参照） */ .um-page-header h1, .um-page-header .um-page-header__title { margin: 0 0 var(--um-sp-3); font-size: var(--um-h1); font-weight: 700; line-height: var(--um-lh-h1); } .um-page-header__lead { margin: 0; font-size: var(--um-body); line-height: var(--um-lh-body); color: rgba(255,255,255,0.78); max-width: 38em; } /* --- サービス詳細：黒×白ツートンパネル（DESIGN.md §5 確定仕様）--- */ @keyframes um-rot { to { transform: rotate(360deg); } } @keyframes um-rot-rev { to { transform: rotate(-360deg); } } .um-svc { display: flex; flex-wrap: wrap; border-radius: var(--um-r-card); overflow: hidden; border: 1px solid var(--um-border); box-shadow: var(--um-shadow-card); } .um-svc--reverse { flex-wrap: wrap-reverse; } /* #web は白パネルが先（左） */ .um-svc__dark { flex: 1 1 360px; min-width: 280px; background: var(--um-grad-dark); color: var(--um-white); padding: var(--um-sp-6); display: flex; flex-direction: column; justify-content: flex-end; /* 左下の1ブロックに統合 */ position: relative; overflow: hidden; } .um-svc__ring { position: absolute; top: -35%; right: -35%; width: 120%; height: 120%; min-width: 400px; min-height: 400px; opacity: 0.08; pointer-events: none; /* 白8%・10%超禁止（DESIGN.md §7） */ animation: um-rot 120s linear infinite; } .um-svc__ring--rev { animation: um-rot-rev 90s linear infinite; } .um-svc__dark-inner { position: relative; z-index: 1; } .um-svc__num { margin: 0 0 var(--um-sp-1); color: var(--um-primary); font-size: 24px; font-weight: 700; line-height: 1; } .um-svc__label { margin: 0 0 var(--um-sp-3); color: var(--um-white); font-size: var(--um-label-size); font-weight: 700; letter-spacing: var(--um-ls-label); } .um-svc__big { margin: 0; font-size: clamp(48px, 7.5vw, 88px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; } .um-svc__body { flex: 1 1 480px; min-width: 280px; background: var(--um-white); padding: clamp(24px, 4vw, 48px); } .um-svc__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-sp-2); margin-bottom: var(--um-sp-3); } .um-svc__head svg { flex: 0 0 auto; color: var(--um-primary); } .um-svc__head h2 { margin: 0; color: var(--um-heading); font-size: var(--um-h2); font-weight: 700; line-height: var(--um-lh-heading); } .um-svc__catch { margin: 0 0 var(--um-sp-1); font-size: var(--um-body); font-weight: 700; line-height: var(--um-lh-body); color: var(--um-heading); } .um-svc__desc { margin: 0 0 var(--um-sp-3); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-svc__cta { margin-top: var(--um-sp-4); } .um-svc__alt { margin: var(--um-sp-2) 0 0; font-size: var(--um-small); line-height: 1.6; color: var(--um-muted); } .um-svc__alt a { font-weight: 500; } /* --- 提供内容リスト（青角丸ドット + 罫線）--- */ .um-list { display: flex; flex-direction: column; } .um-list__row { display: flex; gap: var(--um-sp-2); padding: var(--um-sp-2) 0; border-bottom: 1px solid var(--um-border); } .um-list__dot { flex: 0 0 8px; width: 8px; height: 8px; background: var(--um-primary); border-radius: 2px; align-self: center; } .um-list__row span:last-child { font-size: var(--um-body-sp); line-height: var(--um-lh-body); } /* --- 下層ページのセクション背景装飾（配置指示書v2）--- */ .um-deco--svc-r { right: 0; top: 0; width: 45vw; height: 70%; z-index: 0; opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, black 45%, transparent 96%); mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, black 45%, transparent 96%); } .um-deco--svc-l { left: 0; top: 0; width: 45vw; height: 70%; z-index: 0; opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, black 45%, transparent 96%); mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, black 45%, transparent 96%); } /* --- Flowページ：5ステップ縦展開（青円ノード + 縦コネクター）--- */ .um-fsteps { display: flex; flex-direction: column; } .um-fstep { display: flex; gap: var(--um-sp-3); align-items: stretch; padding-bottom: var(--um-sp-4); } .um-fstep:last-child { padding-bottom: 0; } .um-fstep__rail { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; } .um-fstep__node { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--um-r-pill); background: var(--um-primary); color: var(--um-white); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; } .um-fstep__line { flex: 1; width: 2px; background: var(--um-border); margin-top: var(--um-sp-1); } .um-fstep:last-child .um-fstep__line { display: none; } /* 最終ステップでコネクター終了 */ .um-fstep__card { flex: 1; min-width: 0; background: var(--um-white); border: 1px solid var(--um-border); border-radius: var(--um-r-card); padding: clamp(24px, 3vw, 48px); box-shadow: var(--um-shadow-card); } /* ステップ3「テスト環境でご確認」＝差別化ポイントの青ボーダー強調 */ .um-fstep__card--hl { border-color: var(--um-primary); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12); } .um-fstep__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-sp-2); margin-bottom: var(--um-sp-2); } .um-fstep__head h2 { margin: 0; color: var(--um-heading); font-size: var(--um-h3-lg); font-weight: 700; line-height: var(--um-lh-heading); } .um-fstep__desc { margin: 0 0 var(--um-sp-3); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-fstep__desc a { display: block; margin-top: var(--um-sp-1); font-size: var(--um-body-sp); font-weight: 500; } .um-fstep__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--um-sp-2); } .um-fstep__cell { background: var(--um-bg-off); border-radius: var(--um-r-img); padding: var(--um-sp-3); } .um-fstep__cell-label { margin: 0 0 var(--um-sp-1); color: var(--um-muted); font-size: var(--um-small); font-weight: 700; letter-spacing: 0.05em; } .um-fstep__cell-label--um { color: var(--um-primary); } .um-fstep__cell p:last-child { margin: 0; font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: var(--um-text); } /* --- Aboutページ --- */ /* 2カラム読み物ブロック（テキスト＋画像） */ .um-cols { display: flex; flex-wrap: wrap; gap: var(--um-sp-6); align-items: center; } .um-cols--reverse { flex-wrap: wrap-reverse; } .um-cols--top { align-items: flex-start; } .um-cols__text { flex: 1 1 440px; min-width: 280px; } .um-cols__text--wide { flex: 1 1 480px; } .um-cols__text p { margin: 0 0 var(--um-sp-2); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-cols__text p:last-child { margin-bottom: 0; } .um-cols__text h3 { margin: 0 0 var(--um-sp-3); color: var(--um-heading); font-size: var(--um-h3-lg); font-weight: 700; line-height: var(--um-lh-heading); } .um-cols__media { flex: 1 1 360px; min-width: 240px; } .um-sign { margin: 0 !important; font-size: var(--um-body-sp); font-weight: 700; color: var(--um-heading); text-align: right; } /* 本番画像（プレースホルダーと同じ枠に収める） ★aspect-ratio と border-radius をプレースホルダーと揃えること。 揃えないと、画像を入れた瞬間にレイアウトがずれる */ .um-figure { display: block; width: 100%; /* ★height:auto は必須。HTMLの height 属性（CLS対策で付けている）が プレゼンテーション指定として効き、これが無いと aspect-ratio が無視されて 画像が縦945pxのまま描画される（2026-07-20 実測で判明） */ height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--um-r-img); border: 1px solid var(--um-border); } /* 青カーテンリビール用のラッパー。 anim.js が inset:-1px の青いオーバーレイを差し込むため、 角丸で切り抜かないと「丸い画像に四角い青が被る」状態になる */ .um-figure-wrap { border-radius: var(--um-r-img); overflow: hidden; line-height: 0; } /* 代表ポートレート枠（実素材差し替え前提・カード角丸） */ .um-portrait { border-radius: var(--um-r-card); border: 1px solid var(--um-border); box-shadow: var(--um-shadow-card); background: repeating-linear-gradient(45deg, #FFFFFF, #FFFFFF 12px, #F0F0EE 12px, #F0F0EE 24px); aspect-ratio: 3 / 4; max-width: 400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .um-portrait span { font-family: monospace; font-size: var(--um-small); color: var(--um-muted); background: var(--um-white); padding: 8px 16px; border-radius: var(--um-r-pill); border: 1px solid var(--um-border); } /* 実写を入れた状態。 ★overflow:hidden は必須。anim.js の青カーテンは inset:-1px のオーバーレイ＋ 枠自体の scale(1.08) で動くため、これが無いと角丸の外に青がはみ出す */ .um-portrait--photo { display: block; background: none; overflow: hidden; line-height: 0; } .um-portrait--photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 会社概要テーブル（要件定義書§1の8項目のみ。項目追加禁止） */ .um-company { max-width: var(--um-prose-max); } .um-company__row { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: var(--um-sp-3) 0; border-bottom: 1px solid var(--um-border); } .um-company__label { flex: 0 0 160px; font-size: var(--um-small); font-weight: 700; color: var(--um-muted); letter-spacing: 0.05em; padding-top: 4px; } .um-company__value { flex: 1 1 320px; font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } /* Aboutページ専用の背景装飾（トップの .um-deco--about とは別定義＝原本のページスコープ準拠） */ .um-deco--about-page { inset: 0; z-index: -2; opacity: 0.45; -webkit-mask-image: radial-gradient(ellipse 90% 90% at 70% 55%, black 25%, transparent 85%); mask-image: radial-gradient(ellipse 90% 90% at 70% 55%, black 25%, transparent 85%); } .um-deco--message { left: 0; right: 0; bottom: 0; height: 50%; z-index: 0; opacity: 0.8; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 45%); mask-image: linear-gradient(to bottom, transparent 0%, black 45%); } /* --- FAQページ：アコーディオン（grid-rows 0fr↔1fr・一度に1問のみ）--- */ .um-faq-wrap { max-width: var(--um-prose-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--um-sp-8); position: relative; z-index: var(--um-z-content); } .um-faq-group { display: flex; flex-direction: column; gap: var(--um-sp-2); } .um-faq-group__head { margin-bottom: var(--um-sp-1); } .um-faq-group__head .um-label { margin-bottom: var(--um-sp-1); } .um-faq-group__head h3 { margin: 0; color: var(--um-heading); font-size: var(--um-h3-lg); font-weight: 700; line-height: var(--um-lh-heading); } .um-faq { background: var(--um-white); border: 1px solid var(--um-border); border-radius: var(--um-r-card); box-shadow: var(--um-shadow-card); transition: box-shadow var(--um-dur); } .um-faq:hover { box-shadow: 0 8px 24px rgba(11, 31, 63, 0.12); } .um-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--um-sp-3); background: none; border: none; cursor: pointer; text-align: left; padding: 24px 32px; font-family: inherit; } .um-faq__q-inner { display: flex; align-items: baseline; gap: var(--um-sp-2); } .um-faq__mark { color: var(--um-primary); font-size: 20px; font-weight: 700; flex: 0 0 auto; } .um-faq__mark--a { color: var(--um-muted); } .um-faq__q-text { color: var(--um-heading); font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; line-height: var(--um-lh-heading); } .um-faq__plus { flex: 0 0 auto; color: var(--um-primary); font-size: 24px; font-weight: 400; line-height: 1; transform: rotate(0deg); transition: transform var(--um-dur); } .um-faq[data-open="true"] .um-faq__plus { transform: rotate(45deg); } /* ＋を45度回して×に */ .um-faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .um-faq[data-open="true"] .um-faq__body { grid-template-rows: 1fr; } .um-faq__body > div { overflow: hidden; } .um-faq__a { display: flex; align-items: baseline; gap: var(--um-sp-2); padding: 0 32px 24px; } .um-faq__a p { margin: 0; font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: var(--um-text); } .um-faq__a a { display: block; margin-top: var(--um-sp-1); font-size: var(--um-body-sp); font-weight: 500; } /* 「解決しない場合」カード */ .um-faq-more { background: var(--um-white); border: 1px solid var(--um-border); border-radius: var(--um-r-card); box-shadow: var(--um-shadow-card); padding: clamp(24px, 3vw, 32px); text-align: center; } .um-faq-more p { margin: 0 0 var(--um-sp-3); font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: var(--um-text); } .um-deco--faq { left: 0; top: 0; bottom: 0; width: 45vw; z-index: 0; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 100% 120% at 0% 50%, black 45%, transparent 96%); mask-image: radial-gradient(ellipse 100% 120% at 0% 50%, black 45%, transparent 96%); } /* --- Contactページ：フォーム --- */ .um-form-wrap { max-width: var(--um-prose-max); margin: 0 auto; } /* フォーム上部の二択導線（チャット誘導・課題ドリブン導線仕様書§3） */ .um-chat-banner { background: var(--um-bg-off); border-radius: var(--um-r-card); padding: clamp(24px, 3vw, 32px); margin-bottom: var(--um-sp-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-sp-3); } .um-chat-banner p { margin: 0; font-size: var(--um-body-sp); line-height: var(--um-lh-body); color: var(--um-text); flex: 1 1 320px; } .um-chat-banner .um-btn { white-space: nowrap; font-size: var(--um-body-sp); padding: 16px 32px; } .um-form { display: flex; flex-direction: column; gap: var(--um-sp-4); } .um-form__label { display: flex; align-items: center; gap: var(--um-sp-1); margin-bottom: var(--um-sp-1); font-size: var(--um-body-sp); font-weight: 700; color: var(--um-heading); } .um-form__badge { background: var(--um-primary); color: var(--um-white); font-size: 12px; font-weight: 500; padding: 2px 16px; border-radius: var(--um-r-pill); } .um-form__badge--opt { background: var(--um-bg-off); color: var(--um-muted); } textarea.um-input { resize: vertical; min-height: 160px; } .um-form__agree { display: flex; align-items: center; gap: var(--um-sp-1); font-size: var(--um-body-sp); color: var(--um-text); cursor: pointer; } .um-form__agree input { width: 20px; height: 20px; accent-color: var(--um-primary); flex: 0 0 auto; } .um-form__agree a { font-weight: 500; } .um-form__submit { text-align: center; margin-top: var(--um-sp-2); } /* honeypot：画面にも読み上げにも出さないが、フォームとしては送信される。 display:none だと一部のボットに無視されるため、位置で画面外へ逃がす */ .um-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* サンクス画面（送信完了で切替） */ .um-thanks { background: var(--um-white); border: 1px solid var(--um-border); border-radius: var(--um-r-card); box-shadow: var(--um-shadow-card); padding: clamp(32px, 5vw, 64px); text-align: center; } .um-thanks h2 { margin: 0 0 var(--um-sp-3); color: var(--um-heading); font-size: var(--um-h3-lg); font-weight: 700; line-height: var(--um-lh-heading); } .um-thanks p { margin: 0 0 var(--um-sp-4); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } /* --- Privacy / Cookie：読み物ページ（装飾最小限・最大幅800px）--- */ .um-prose { max-width: var(--um-prose-max); margin: 0 auto; } .um-prose__intro { margin: 0 0 var(--um-sp-6); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-prose__index { background: var(--um-bg-off); border-radius: var(--um-r-img); padding: var(--um-sp-4); margin-bottom: var(--um-sp-8); } .um-prose__index .um-label { margin-bottom: var(--um-sp-3); } .um-prose__index ol { margin: 0; padding-left: var(--um-sp-3); display: flex; flex-direction: column; gap: var(--um-sp-1); font-size: var(--um-body-sp); line-height: var(--um-lh-body); } .um-prose__body { display: flex; flex-direction: column; gap: var(--um-sp-8); } .um-prose__body h2 { margin: 0 0 var(--um-sp-3); color: var(--um-heading); font-size: var(--um-h3-lg); font-weight: 700; line-height: var(--um-lh-heading); padding-bottom: var(--um-sp-2); border-bottom: 1px solid var(--um-border); } .um-prose__body p { margin: 0 0 var(--um-sp-2); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-prose__body p:last-child { margin-bottom: 0; } .um-prose__body ul, .um-prose__body ol { margin: 0; padding-left: var(--um-sp-3); display: flex; flex-direction: column; gap: var(--um-sp-1); font-size: var(--um-body); line-height: var(--um-lh-body); color: var(--um-text); } .um-prose__body a { font-weight: 500; } /* --- CONTACTセクションのチャット副導線（下層ページ用）--- */ .um-cta-section__alt { margin: var(--um-sp-3) 0 0; font-size: 14px; line-height: var(--um-lh-body); color: rgba(255,255,255,0.85); } .um-cta-section__alt a { color: var(--um-white); text-decoration: underline; font-weight: 500; } /* ============================================================ フッター ============================================================ */ .um-footer { background: var(--um-black); border-top: 1px solid rgba(255,255,255,0.1); /* 青セクションとの境界を明示 */ padding: var(--um-sp-6) var(--um-section-x); } .um-footer__inner { max-width: var(--um-content-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-sp-4); } .um-footer img { width: 140px; height: auto; filter: invert(1); } .um-footer nav { display: flex; flex-wrap: wrap; gap: var(--um-sp-3); } .um-footer nav a { color: rgba(255,255,255,0.7); font-size: var(--um-small); } .um-footer nav a:hover { color: var(--um-white); } .um-footer__copy { margin: 0; color: rgba(255,255,255,0.5); font-size: 12px; } /* ============================================================ SP下部固定CTAバー（右下はフェーズ2チャットボット用に空ける） ============================================================ */ .um-spbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--um-z-sp-cta); background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--um-border); padding: var(--um-sp-1) var(--um-sp-2); padding-bottom: calc(var(--um-sp-1) + env(safe-area-inset-bottom)); } .um-spbar a { display: block; text-align: center; background: var(--um-primary); color: var(--um-white); font-size: var(--um-body-sp); font-weight: 700; padding: 16px 24px; border-radius: var(--um-r-ui); } @media (min-width: 900px) { .um-spbar { display: none; } } /* 固定バーの逃げはハンドオフ原本と同じくフッター側で取る（footerPadBottom: 112px相当） */ @media (max-width: 899px) { .um-footer { padding-bottom: 112px; } } /* ============================================================ 詳細度ガード（必ずファイル末尾に置く） ------------------------------------------------------------ 本ファイルには「.コンテナ p { … }」の一括指定が多数ある（詳細度 0-1-1）。 これらは .um-label 等の単独クラス（0-1-0）に勝ってしまい、 「ABOUTラベルが黒くなる」「FLOWの装飾数字05が16pxになる」事故が 実際に起きた（2026-07-20 星さん指摘）。ここで 0-1-2 に引き上げて再宣言する。 ※文脈別の上書き（.um-works__inner .um-label 等の2クラス指定＝0-2-0）は このガードより強いので、意図した個別調整はそのまま生きる。 ★新しく「.コンテナ p」を書いたら、その中に置くコンポーネントが ここでガードされているか必ず確認すること。 ============================================================ */ main p.um-label { color: var(--um-primary); font-size: var(--um-label-size); font-weight: 700; letter-spacing: var(--um-ls-label); margin: 0 0 var(--um-sp-3); } main p.um-flow__panel-num { color: var(--um-primary); font-size: var(--um-num-deco); font-weight: 700; line-height: 0.75; letter-spacing: 0.04em; margin: 0 0 var(--um-sp-2); } main p.um-sign { font-size: var(--um-body-sp); font-weight: 700; color: var(--um-heading); text-align: right; }