/* * Corporate v2 — A-4「Data」× 放射ファネル * 正本: source/DESIGN_SYSTEM.md（v2） * * 【重要】このファイルは :root を定義しない。 * トークンは .brand-v2 スコープに閉じる。理由は DESIGN_SYSTEM.md §14-1: * style.css の :root（--primary / --brand-teal 等）は media 記事 1,000 本超が * 参照しており、値を動かすと全記事の配色が変わるため。 * check:media-isolation がこの規約を機械的に守っている。 * * 適用はを付けたコーポレート層ページのみ。 */ .brand-v2 { --ink: #17263F; --v2-muted: #5E6B82; --faint: #8A93A0; --line: #E4E8EF; --black: #000000; --black-hover: #202124; --teal: #16BFA5; --teal-d: #0FA893; --blue: #2F9FD8; --spark: #178DAA; --v2-bg: #FFFFFF; --bg-sub: #F7F9FB; /* サービス俯瞰図の帯 3 色（DESIGN_SYSTEM.md §9）。図版とその凡例（カードの role / 価格リンク）専用で、本文リンク・UI・面塗りには使わない。UI のアクセントは --teal / --blue が正。 */ --svc-blue: #2783DE; --svc-teal: #1F9C99; --svc-green: #3E9A6B; /* イージングはこの 4 本以外書かない（DESIGN_SYSTEM.md §6） */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-swift: cubic-bezier(.55, 0, .1, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --mono: "SF Mono", Menlo, Consolas, monospace; --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--v2-bg); color: var(--ink); } /* ============================================================ 1. タイポグラフィ ============================================================ */ .brand-v2 .v2-display { font-size: clamp(29px, 4.3vw, 44px); font-weight: 800; line-height: 1.42; margin: 0 0 20px; color: var(--ink); } .brand-v2 .v2-h2 { font-size: 26px; font-weight: 800; line-height: 1.4; margin: 0 0 8px; color: var(--ink); text-align: left; } .brand-v2 .v2-h3 { font-size: 16px; font-weight: 800; line-height: 1.5; margin: 0; color: var(--ink); } .brand-v2 .v2-lead { font-size: 15px; line-height: 1.9; color: var(--v2-muted); margin: 0 0 32px; max-width: 44em; } .brand-v2 .v2-body { font-size: 14px; line-height: 1.8; color: var(--v2-muted); margin: 0; } .brand-v2 .v2-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--v2-muted); margin: 0 0 14px; } .brand-v2 .v2-note { font-size: 10.5px; line-height: 1.7; color: var(--faint); margin: 12px 0 0; } /* 数字は必ず等幅（DESIGN_SYSTEM.md §2 Data） */ .brand-v2 .v2-data { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } /* ============================================================ 2. ✦ / ✧（四芒星） ============================================================ */ .brand-v2 .v2-spark { font-style: normal; line-height: 1; color: var(--spark); display: inline-block; } .brand-v2 .v2-spark--blue { color: var(--blue); } .brand-v2 .v2-spark--teal { color: var(--teal); } /* * flanking: 1 ページ 1 組・ヒーロー見出しのみ（§3）。 * shrink-to-fit にしないと、ブロック幅いっぱい（= 画面右端）まで * trail の ✧ が飛んで見出しと視覚的に切れる。max-width で折返しは保つ。 */ .brand-v2 .v2-flank { position: relative; display: table; max-width: 100%; } .brand-v2 .v2-flank__lead { position: absolute; top: -24px; left: -3px; font-size: 15px; } .brand-v2 .v2-flank__trail { position: absolute; right: -14px; bottom: -14px; font-size: 12px; } /* 狭い画面では見出しが折り返して trail が本文先頭行に重なるため出さない */ @media (max-width: 720px) { .brand-v2 .v2-flank__trail { display: none; } } /* ============================================================ 3. 黒 ✦ CTA（B-4） ============================================================ */ .brand-v2 .v2-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--black); color: #fff; border: 0; border-radius: 12px; padding: 14px 26px; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s var(--ease-out); } .brand-v2 .v2-btn:hover { background: var(--black-hover); } .brand-v2 .v2-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .brand-v2 .v2-btn__spark { font-style: normal; color: var(--teal); font-size: 1.35em; /* 星を大きくしてもボタンの高さを変えないよう、行ボックスは 13px 相当に抑える */ line-height: .72; transition: transform .35s var(--ease-pop); } .brand-v2 .v2-btn:hover .v2-btn__spark { transform: rotate(90deg) scale(1.15); } .brand-v2 .v2-btn--sm { padding: 12.5px 18px; font-size: 12.5px; } /* secondary = ghost（白地・1px 枠） */ .brand-v2 .v2-btn--ghost { background: #fff; color: var(--ink); border: 1px solid #DCE2EB; transition: background .15s var(--ease-out), border-color .15s var(--ease-out); } .brand-v2 .v2-btn--ghost:hover { background: #FAFBFC; border-color: #B9C4D2; } .brand-v2 .v2-btn--ghost .v2-btn__spark { color: var(--teal-d); } /* テキストリンク */ .brand-v2 .v2-link { font-size: 14px; font-weight: 700; color: var(--teal-d); text-decoration: none; white-space: nowrap; } .brand-v2 .v2-link__arrow { display: inline-block; transition: transform .15s var(--ease-swift); } .brand-v2 .v2-link:hover .v2-link__arrow { transform: translateX(4px); } /* ------------------------------------------------------------ 共通ヘッダーの主 CTA（黒 ✦）は shared-header.mjs の既定スタイルが持つ。以前はここで .brand-v2 スコープの !important 上書きをしていたが、class を付けたページにしか当たらず遷移でヘッダーの見た目が変わったため、既定へ引き上げた。ここにヘッダー規則を書き戻さないこと。 ------------------------------------------------------------ */ /* ============================================================ 4. データ行（A-4 の主役） ============================================================ */ .brand-v2 .v2-rows { border-top: 1px solid var(--line); } .brand-v2 .v2-row { display: grid; grid-template-columns: auto 11em 1fr auto; gap: 8px 18px; align-items: baseline; padding: 22px 10px; border-bottom: 1px solid var(--line); transition: background .15s var(--ease-out); } /* hover で浮かせない（§11 NG #5）。背景と ✦ の回転だけで表現する */ .brand-v2 .v2-row:hover { background: #FAFBFC; } .brand-v2 .v2-row__marker { font-size: 12px; color: var(--teal); font-style: normal; line-height: 1.6; transition: transform .35s var(--ease-pop); } .brand-v2 .v2-row:hover .v2-row__marker { transform: rotate(90deg); } @media (max-width: 720px) { .brand-v2 .v2-row { grid-template-columns: auto 1fr; } .brand-v2 .v2-row__desc, .brand-v2 .v2-row__link { grid-column: 2; } } /* ------------------------------------------------------------ サービス俯瞰図（ねじれリボン・§9）外三角と内三角を重心まわりに逆向きへ回して（外 +3.5° / 内 -3.0°・内は 0.63 倍）、その間を 3 分割した四角形が各辺の帯になる。回転差があるため帯が片端 69px / 片端 36px に先細り、紙帯がねじれて見える。押し出しはしていない。帯のグラデは §1 の「グラデーション許可箇所 ①図版内の帯」に該当する。図（SVG）とカード（HTML）は 1040x610 の同じ座標系を共有する。SVG は viewBox で伸縮し、カードは stage を container とした cqw（--u = 1cqw = 1040px の 1%）で一緒に縮むので、どの幅でも図とカードの位置関係が崩れない。カード部を HTML にしているのはテキスト折返しのため（§9）。 ------------------------------------------------------------ */ .brand-v2 .v2-svc { margin-top: 44px; } .brand-v2 .v2-svc-stage { position: relative; max-width: 1040px; margin: 0 auto; container-type: inline-size; } .brand-v2 .v2-svc-svg { display: block; width: 100%; height: auto; } /* 図中テキストは実テキストのまま（AEO・§7）。色は各 text の fill で個別指定 */ .brand-v2 .v2-svc-elabel { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-anchor: middle; dominant-baseline: central; } .brand-v2 .v2-svc-kicker { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .2em; fill: var(--v2-muted); text-anchor: middle; } .brand-v2 .v2-svc-ctr { font-size: 24px; font-weight: 800; letter-spacing: -.02em; fill: var(--ink); text-anchor: middle; } /* 帯を 1 周する光。reduce では消す（§6・WCAG 2.2.2） */ @media (prefers-reduced-motion: reduce) { .brand-v2 .v2-svc-flow { display: none; } } /* 事業カード。枠は 1px --line のみ、4 辺とも縁色なし（§11 NG#1） */ .brand-v2 .v2-svc-card { --u: 1cqw; position: absolute; width: calc(32.7 * var(--u)); display: flex; flex-direction: column; padding: calc(1.923 * var(--u)) calc(1.923 * var(--u)) calc(1.731 * var(--u)); background: #fff; border: 1px solid var(--line); border-radius: calc(1.346 * var(--u)); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px rgba(20, 30, 40, .07); text-decoration: none; color: inherit; z-index: 2; transition: border-color .15s var(--ease-out), background .15s var(--ease-out); } .brand-v2 .v2-svc-card:hover { border-color: #B9C4D2; background: #FAFBFC; } .brand-v2 .v2-svc-card--top, .brand-v2 .v2-svc-card--l { --svc-accent: var(--svc-blue); } .brand-v2 .v2-svc-card--r { --svc-accent: var(--svc-green); } .brand-v2 .v2-svc-card--top { left: 33.654%; top: .328%; } .brand-v2 .v2-svc-card--l { left: .577%; top: 48.852%; } .brand-v2 .v2-svc-card--r { right: .577%; top: 48.852%; } .brand-v2 .v2-svc-row { display: flex; align-items: center; gap: calc(1.058 * var(--u)); margin-bottom: calc(1.154 * var(--u)); } /* アイコンチップは白地＋1px 枠＋黒ストローク（淡色面は禁止・§11 NG#4） */ .brand-v2 .v2-svc-ic { flex: none; width: calc(3.462 * var(--u)); height: calc(3.462 * var(--u)); border-radius: calc(.962 * var(--u)); background: #fff; border: 1px solid var(--line); color: #000; display: grid; place-items: center; } .brand-v2 .v2-svc-ic svg { display: block; width: calc(1.731 * var(--u)); height: calc(1.731 * var(--u)); } .brand-v2 .v2-svc-role { display: block; font-family: var(--mono); font-size: calc(.962 * var(--u)); font-weight: 700; letter-spacing: .14em; color: var(--svc-accent); } .brand-v2 .v2-svc-card h3 { margin: calc(.288 * var(--u)) 0 0; font-size: calc(1.731 * var(--u)); font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .brand-v2 .v2-svc-desc { display: block; margin: 0 0 calc(1.346 * var(--u)); font-size: calc(1.298 * var(--u)); line-height: 1.5; color: var(--v2-muted); } .brand-v2 .v2-svc-foot { margin-top: auto; padding-top: calc(1.25 * var(--u)); border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(.962 * var(--u)); } .brand-v2 .v2-svc-price { font-family: var(--mono); font-size: calc(1.346 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--ink); } .brand-v2 .v2-svc-price small { display: block; margin-top: calc(.288 * var(--u)); font-family: var(--sans); font-size: calc(1.058 * var(--u)); font-weight: 600; font-variant-numeric: normal; color: var(--v2-muted); } .brand-v2 .v2-svc-go { font-size: calc(1.25 * var(--u)); font-weight: 700; white-space: nowrap; color: var(--svc-accent); } .brand-v2 .v2-svc-note { display: none; } /* 900px 以下は図を出さず縦積み（§9）。図が持っていた中央コピーは note で残す。 container 外になるので --u を 1040px 基準の実寸（1% = 10.4px）に固定する。 */ @media (max-width: 900px) { .brand-v2 .v2-svc-stage { max-width: 440px; } .brand-v2 .v2-svc-svg { display: none; } .brand-v2 .v2-svc-note { display: block; margin: 0 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } .brand-v2 .v2-svc-card { --u: 10.4px; position: static; width: auto; } .brand-v2 .v2-svc-card + .v2-svc-card { margin-top: 14px; } } /* ------------------------------------------------------------ ピックアップ・ギャラリー（§10）均等 3 列・フィーチャー枠なし。囲いカードはこことアーカイブ一覧のみ。 ------------------------------------------------------------ */ .brand-v2 .v2-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; } .brand-v2 .v2-gcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: border-color .15s var(--ease-out), background .15s var(--ease-out); } .brand-v2 .v2-gcard:hover { border-color: #B9C4D2; background: #FAFBFC; } .brand-v2 .v2-gthumb { aspect-ratio: 16 / 9; background: #F0F2F5; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: #C6CFDA; font-size: 17px; overflow: hidden; } .brand-v2 .v2-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * カード全体をにしている都合で中身は。display を指定しないと * インライン扱いのままになり padding が上下に効かず、左右も行頭・行末にしか * 乗らない（＝文字が枠に接触する）。block を明示する。 */ .brand-v2 .v2-gbody { display: block; padding: 16px 18px 18px; } .brand-v2 .v2-gmeta { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .brand-v2 .v2-gdate { font-family: var(--mono); font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .brand-v2 .v2-gcard h3 { margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.6; color: var(--ink); } .brand-v2 .v2-gfoot { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; } @media (max-width: 900px) { .brand-v2 .v2-gal { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .brand-v2 .v2-gal { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ CONTACT（中央寄せ・スクロール連動ワイプ） ------------------------------------------------------------ */ .brand-v2 .v2-contact { text-align: center; padding: 84px 0 92px; } .brand-v2 .v2-contact .v2-h2 { font-size: clamp(22px, 3vw, 30px); text-align: center; } .brand-v2 .v2-wipe { font-size: 14px; color: var(--ink); font-weight: 600; max-width: 36em; margin: 10px auto 30px; line-height: 1.9; } /* * 読み進めに合わせて文字色が確定していくワイプ。 * CSS scroll-driven のみ（JS リスナー禁止・§11 NG #10）。 * 非対応環境と reduce では通常の濃色テキストのまま出る（fail-open）。 */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .brand-v2 .v2-wipe { background: linear-gradient(90deg, #17263F 50%, #B9C2CE 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: v2WipeIn linear both; animation-duration: auto; animation-timeline: view(); animation-range: entry 40% cover 60%; } } } @keyframes v2WipeIn { from { background-position: 100% 0; } to { background-position: 0% 0; } } .brand-v2 .v2-contact-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ------------------------------------------------------------ フッター（v2・淡色面）フッターは全プロパティ共通になったため、見た目は shared-footer.mjs の