/* ============================================================ solid.ms design system Symfony 7.4 + Twig 移植前提 / 静的 CSS のみ 命名: BEM 風（block__element--modifier） ブレークポイント: 640 / 1024 / 1280px（モバイルファースト） ============================================================ */ /* --- 1. トークン ------------------------------------------- */ :root { /* color */ --color-ink: oklch(0.24 0.035 258); --color-navy: oklch(0.30 0.062 262); --color-navy-deep: oklch(0.21 0.048 262); --color-navy-mid: oklch(0.46 0.055 262); --color-paper: oklch(0.968 0.009 86); --color-surface: oklch(0.995 0.003 86); --color-surface-alt: oklch(0.945 0.010 86); --color-line: oklch(0.875 0.012 262); --color-line-strong: oklch(0.72 0.020 262); --color-muted: oklch(0.52 0.022 262); /* accent: ロゴのレッドに合わせる（面積を持たせず、番号・罫・CTAにのみ使用） */ --color-accent: oklch(0.55 0.155 20); --color-accent-deep: oklch(0.46 0.140 20); --color-accent-soft: oklch(0.950 0.028 22); --color-on-dark: oklch(0.97 0.006 86); --color-on-dark-mute: oklch(0.80 0.020 262); --color-cyan: oklch(0.82 0.085 200); /* type stacks（既定は日本語。:lang() で分岐） */ --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; --font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace; --font-num: "Source Sans 3", "Noto Sans JP", sans-serif; /* type scale */ --font-size-2xs: 0.75rem; --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.125rem; --font-size-4xl: 2.625rem; --font-size-display: clamp(2rem, 1.35rem + 3.2vw, 3.75rem); --leading-tight: 1.28; --leading-head: 1.45; --leading-body: 1.8; --tracking-wide: 0.08em; --tracking-head: 0.01em; /* measure（1行の文字数） */ --measure: 36ch; --measure-narrow: 28ch; /* space */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6.5rem; --space-12: 8rem; /* radius / border / shadow */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --border-hairline: 1px solid var(--color-line); --border-strong: 1px solid var(--color-line-strong); --shadow-sm: 0 1px 2px oklch(0.24 0.035 258 / 0.08); --shadow-md: 0 2px 10px oklch(0.24 0.035 258 / 0.09); /* layout */ --container: 1180px; --container-narrow: 820px; --gutter: var(--space-5); --header-h: 60px; } @media (min-width: 640px) { :root { --gutter: var(--space-6); } } @media (min-width: 1024px) { :root { --gutter: var(--space-7); --header-h: 76px; } } /* --- 2. 言語別フォントスタック / 行間 / 行長 ---------------- */ :lang(ja) { --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; --leading-body: 1.8; --leading-head: 1.45; --measure: 36ch; } :lang(en) { --font-sans: "Source Sans 3", "Inter", "Helvetica Neue", Arial, sans-serif; --font-head: "Source Sans 3", "Inter", "Helvetica Neue", Arial, sans-serif; --leading-body: 1.55; --leading-head: 1.2; --measure: 68ch; } :lang(zh-Hant) { --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-head: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --leading-body: 1.8; --leading-head: 1.4; --measure: 36ch; } /* 繁體中文に日本語フォントを流用しないこと（字形差: 骨・直・今 など） */ /* --- 3. リセット ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--leading-body); color: var(--color-ink); background: var(--color-paper); font-feature-settings: "palt" 1; text-wrap: pretty; } img, svg { display: block; max-width: 100%; } figure { margin: 0; } address { font-style: normal; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p, dl, dd, dt { margin: 0; } table { border-collapse: collapse; width: 100%; } a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { color: var(--color-accent-deep); text-decoration-color: var(--color-accent); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* --- 4. レイアウト ----------------------------------------- */ .l-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .l-container--narrow { max-width: var(--container-narrow); } [hidden] { display: none !important; } .l-section { padding-block: var(--space-8); } .l-section--tight { padding-block: var(--space-6); } .l-section--dark { background: var(--color-navy-deep); color: var(--color-on-dark); } .l-section--alt { background: var(--color-surface); } @media (min-width: 1024px) { .l-section { padding-block: var(--space-8); } .l-section--tight { padding-block: var(--space-6); } } /* --- 5. タイポグラフィ ------------------------------------- */ .t-display { font-family: var(--font-head); font-size: var(--font-size-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-head); font-weight: 700; } .t-h2 { font-family: var(--font-head); font-size: var(--font-size-2xl); line-height: var(--leading-head); font-weight: 700; } .t-h3 { font-family: var(--font-head); font-size: var(--font-size-xl); line-height: var(--leading-head); font-weight: 700; } .t-h4 { font-family: var(--font-head); font-size: var(--font-size-lg); line-height: var(--leading-head); font-weight: 700; } .t-body { font-size: var(--font-size-md); line-height: var(--leading-body); max-width: var(--measure); } .t-body--sm { font-size: var(--font-size-sm); } .t-lead { font-size: var(--font-size-lg); line-height: var(--leading-body); max-width: var(--measure); } .t-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: 0.02em; } .t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; } .t-muted { color: var(--color-muted); } .t-en { font-family: "Source Sans 3", sans-serif; } @media (min-width: 1024px) { .t-h2 { font-size: var(--font-size-3xl); } .t-h3 { font-size: var(--font-size-2xl); } } /* セクション見出し（ラベル + 見出し + 説明） */ .section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); } .section-head__label { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-deep); display: flex; align-items: center; gap: var(--space-3); } .section-head__label::before { content: ""; width: 24px; height: 1px; background: var(--color-accent); } .l-section--dark .section-head__label { color: oklch(0.80 0.09 24); } .l-section--dark .section-head__label::before { background: oklch(0.70 0.13 22); } /* TBD プレースホルダ（未確定情報。埋まっていないことを明示する） */ .tbd { font-family: var(--font-mono); font-size: 0.82em; color: var(--color-accent-deep); background: var(--color-accent-soft); border: 1px dashed oklch(0.72 0.09 40); border-radius: var(--radius-sm); padding: 0.1em 0.4em; white-space: nowrap; } /* 波括弧は CSS 側で付与する（Twig 移植時にテンプレート構文と衝突させないため）。 マークアップには「TBD: 項目名」のみを書き、表示は {{TBD: 項目名}} になる。 */ .tbd::before { content: "{{"; } .tbd::after { content: "}}"; } .l-section--dark .tbd, .proof__value .tbd { background: transparent; color: oklch(0.84 0.07 24); border-color: oklch(0.55 0.07 22); } /* --- 6. ボタン --------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-navy); color: var(--color-on-dark); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn:hover { background: var(--color-navy-deep); color: var(--color-on-dark); text-decoration: none; } .btn--accent { background: var(--color-accent); } .btn--accent:hover { background: var(--color-accent-deep); } .btn--outline { background: transparent; color: var(--color-navy); border-color: var(--color-line-strong); } .btn--outline:hover { background: var(--color-surface); border-color: var(--color-navy); color: var(--color-navy); } .btn--on-dark { background: var(--color-on-dark); color: var(--color-navy-deep); } .btn--on-dark:hover { background: oklch(0.90 0.01 86); color: var(--color-navy-deep); } .btn--ghost-dark { background: transparent; color: var(--color-on-dark); border-color: oklch(0.55 0.03 262); } .btn--ghost-dark:hover { background: oklch(0.27 0.05 262); color: var(--color-on-dark); } .btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); } .btn--block { width: 100%; } .btn__arrow { font-family: var(--font-mono); font-weight: 400; } .btn-row { display: flex; flex-direction: column; gap: var(--space-3); } @media (min-width: 640px) { .btn-row { flex-direction: row; flex-wrap: wrap; } } /* --- 7. カード --------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); gap: var(--space-3); } .card--link { text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .card--link { position: relative; } .card--link::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; } .card--link:hover { border-color: var(--color-navy-mid); box-shadow: var(--shadow-md); color: inherit; text-decoration: none; } .card--link:hover::after { transform: scaleX(1); } .card__index { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); color: var(--color-muted); } .card__title { font-family: var(--font-head); font-size: var(--font-size-xl); font-weight: 700; line-height: var(--leading-head); } .card__text { font-size: var(--font-size-sm); line-height: var(--leading-body); color: var(--color-ink); } .card__meta { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-muted); } .card__foot { margin-top: auto; padding-top: var(--space-4); border-top: var(--border-hairline); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-xs); font-weight: 700; } .card__domain { font-family: var(--font-mono); font-weight: 400; color: var(--color-muted); } @media (min-width: 1024px) { .card { padding: var(--space-6); } } /* 事業カード: 画像は常に上部に置く。 ★スマートフォンで左に116px幅の画像を置かないこと。★ ここに入るのは各サイトのスクリーンショットで、116px幅に潰すと 何が写っているか判別できず、縦に引き伸ばされて崩れて見える （2026-08-30 実機で確認）。全幅で 16:10 に収めるのが正しい。 */ .card--media { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-content: start; } .card__media { position: relative; align-self: start; } .card__media .ph { aspect-ratio: 16 / 10; height: auto; border: 0; border-bottom: var(--border-hairline); border-radius: 0; } .card__media .ph__note { display: block; } .card--media .card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); } /* カード見出しの行数差で以降の行がずれないよう、ラベルと見出しの高さを揃える */ .card--media .card__index { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 640px) { .card--media { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; } .card__media { align-self: start; } .card__media .ph { aspect-ratio: 16 / 10; height: auto; border-right: 0; border-bottom: var(--border-hairline); } .card__media .ph__note { display: block; } .card--media .card__title { min-height: calc(2em * var(--leading-head)); } /* 本文の行数差を吸収し、ラベル・見出し・メタ・フッターの位置を揃える */ .card--media .card__body { display: grid; grid-template-rows: auto auto 1fr auto auto; align-content: start; } .card--media .card__text { align-self: start; } } /* 事業カードの画像は各サービスサイトのトップページのスクリーンショット。 ブラウザの上部バーを添え、実写でなく画面であることを明示する */ .shot { display: flex; flex-direction: column; height: 100%; } .shot__bar { display: none; } .shot .ph { background-color: oklch(0.955 0.006 262); } @media (min-width: 640px) { .shot__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-alt); border-bottom: var(--border-hairline); } .shot__dots { display: flex; gap: 4px; } .shot__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-line-strong); } .shot__url { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: 0.02em; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } @media (min-width: 1280px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* --- 8. テーブル（定義表 / 条件表） ------------------------ */ .data-table { font-size: var(--font-size-sm); border-top: var(--border-strong); } .data-table__row { display: grid; grid-template-columns: 1fr; border-bottom: var(--border-hairline); } .data-table__th, .data-table__td { padding: var(--space-3) 0; text-align: left; } .data-table__th { font-weight: 700; color: var(--color-muted); font-size: var(--font-size-xs); } .data-table__td { padding-top: 0; padding-bottom: var(--space-4); } @media (min-width: 640px) { .data-table__row { grid-template-columns: 12rem 1fr; column-gap: var(--space-5); } .data-table__th, .data-table__td { padding: var(--space-4) 0; } .data-table__th { font-size: var(--font-size-sm); color: var(--color-ink); } } /* --- 9. 見出し + パンくず --------------------------------- */ .breadcrumb { padding-block: var(--space-3); border-bottom: var(--border-hairline); background: var(--color-surface); } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-muted); } .breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); } .breadcrumb__item:not(:last-child)::after { content: "/"; color: var(--color-line-strong); font-family: var(--font-mono); } .breadcrumb__link { color: var(--color-muted); } .breadcrumb__current { color: var(--color-ink); font-weight: 700; } /* --- 10. ヘッダー / 言語切替 ------------------------------- */ /* 上部ユーティリティバー: 紺地。ドメイン・連携サービス・技術情報を等幅で並べる */ .topbar { background: var(--color-navy-deep); color: var(--color-on-dark-mute); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 34px; font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: 0.06em; } .topbar__id { display: flex; align-items: center; gap: var(--space-2); color: var(--color-on-dark); } .topbar__dot { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.70 0.13 22); box-shadow: 0 0 0 3px oklch(0.70 0.13 22 / 0.22); } .topbar__links { display: none; } .topbar__link { color: var(--color-on-dark-mute); text-decoration: none; } .topbar__link:hover { color: var(--color-on-dark); } @media (min-width: 640px) { .topbar__links { display: flex; gap: var(--space-5); } } .site-header { position: sticky; top: 0; z-index: 50; background: oklch(0.17 0.020 258 / 0.92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid oklch(0.32 0.026 258); color: var(--color-on-dark); } /* 白抜きSVGロゴ。反転フィルタは不要 */ .site-header__brand-img { height: 40px; width: auto; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); } .site-header__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-ink); } .site-header__logo { font-family: var(--font-head); font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.02em; } .site-header__logo-en { font-family: "Source Sans 3", sans-serif; font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); } .site-header__nav { display: none; } .site-header__cta { display: none; } .site-header__logo-en { color: var(--color-on-dark-mute); } .lang-switch__summary { background: transparent; color: var(--color-on-dark); border-color: oklch(0.36 0.026 258); } .lang-switch__summary:hover { border-color: var(--color-cyan); } .lang-switch__summary::after { color: var(--color-on-dark-mute); } .site-header__toggle { color: var(--color-on-dark); border-color: oklch(0.36 0.026 258); } .nav-mobile { border-top: 1px solid oklch(0.32 0.026 258); background: oklch(0.19 0.022 258); } .nav-mobile[open] { background: oklch(0.19 0.022 258); } .nav-mobile__link { color: var(--color-on-dark); border-bottom: 1px solid oklch(0.30 0.026 258); } @media (min-width: 1024px) { .site-header__brand-img { height: 44px; } .site-header__nav { display: block; } .site-header__menu { display: flex; align-items: stretch; gap: var(--space-5); } .site-header__link { position: relative; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--color-on-dark); padding-block: var(--space-3); } .site-header__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; } .site-header__link:hover { color: var(--color-cyan); } .site-header__link:hover::after { transform: scaleX(1); } .site-header__index { font-size: 0.62rem; color: oklch(0.52 0.026 258); font-weight: 400; } .site-header__link:hover .site-header__index { color: var(--color-cyan); } .site-header__cta { display: inline-flex; } .site-header__toggle { display: none; } } /* 言語切替: 全ページのヘッダーに常設（JS不要の details 実装） */ .lang-switch { position: relative; } .lang-switch__summary { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.04em; border: var(--border-hairline); border-radius: var(--radius-md); cursor: pointer; list-style: none; color: var(--color-ink); background: var(--color-surface); } .lang-switch__summary::-webkit-details-marker { display: none; } .lang-switch__summary:hover { border-color: var(--color-navy-mid); } .lang-switch__summary::after { content: "▾"; color: var(--color-muted); } .lang-switch__list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 11rem; z-index: 60; background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-1); } .lang-switch__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); font-size: var(--font-size-sm); text-decoration: none; color: var(--color-ink); border-radius: var(--radius-sm); } .lang-switch__link:hover { background: var(--color-surface-alt); color: var(--color-ink); } .lang-switch__link[aria-current="true"] { font-weight: 700; } .lang-switch__code { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--color-muted); } /* モバイルメニュー（details / summary） */ .nav-mobile { border-top: var(--border-hairline); } .nav-mobile[open] { background: var(--color-surface); } .site-header__toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-xs); border: var(--border-hairline); border-radius: var(--radius-md); cursor: pointer; list-style: none; } .site-header__toggle::-webkit-details-marker { display: none; } .nav-mobile__list { display: flex; flex-direction: column; padding-block: var(--space-2); } .nav-mobile__link { display: block; min-height: 48px; padding: var(--space-3) 0; font-size: var(--font-size-md); font-weight: 700; text-decoration: none; color: var(--color-ink); border-bottom: var(--border-hairline); } /* ============ モバイル用ドロワー（右からスライドイン） ============ JS は使わず
の状態だけで制御する。 ★ドロワーは
の外に置くこと。★ .site-header には backdrop-filter が掛かっており、これが position: fixed の 基準（containing block）を作る。header の中に置くとドロワーがヘッダー内に 閉じ込められ、高さが潰れる（2026-08-30 に実際に発生）。 ★position は [open] 付きでも指定すること。★ 後段に .nav-mobile[open] の指定があり、特異度が高いので position を書き忘れると開いた瞬間に static へ戻る。 */ .site-header { position: relative; } /* トップバー(SOLID, INC. — TOKYO / JST)の高さ。トグルとドロワーの基準に使う。 */ :root { --topbar-h: 34px; } @media (min-width: 1024px) { :root { --topbar-h: 36px; } } /* ★スクロール時にヘッダーを上部へ固定する。★ トップバーはモバイルではリンクが非表示（装飾のみ）なので一緒には固定せず、 場所を節約するため流し去る。 */ .site-header { position: sticky; top: 0; z-index: 50; } /* ★モバイルでは backdrop-filter を外すこと。★ backdrop-filter は position: fixed の基準（containing block）を作るため、 これが効いているとドロワー（fixed）がヘッダー内に閉じ込められ高さが潰れる。 代わりに不透明な背景を敷く。すりガラス表現は 1024px 以上でのみ使う。 */ @media (max-width: 1023.98px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: oklch(0.17 0.02 258); } } .nav-mobile { position: static; background: transparent; border-top: 0; display: flex; align-items: center; } /* --- ハンバーガーアイコン --- */ .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 20px; height: 14px; } .burger > span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 1px; transition: transform .22s ease, opacity .18s ease; } .nav-mobile[open] .burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-mobile[open] .burger > span:nth-child(2) { opacity: 0; } .nav-mobile[open] .burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header__toggle { position: relative; z-index: 90; /* ドロワーより前面。閉じるボタンを兼ねる */ width: 44px; min-width: 44px; padding: 0; justify-content: center; gap: 0; color: var(--color-on-dark); border-color: oklch(0.36 0.026 258); background: transparent; } /* ラベルは読み上げ用に残し、視覚的には隠す */ .site-header__toggle-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- ドロワー本体 --- */ .nav-mobile__panel { position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px); z-index: 70; background: oklch(0.19 0.022 258); border-left: 1px solid oklch(0.32 0.026 258); box-shadow: -16px 0 40px oklch(0 0 0 / 0.34); padding-top: var(--header-h); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .26s ease; } .nav-mobile[open] .nav-mobile__panel { transform: translateX(0); } /* ★閉じている間は画面外へ出さず、幅ごと畳むこと。★ transform で右へ逃がしただけだと要素は依然その場所を占め、 ページの scrollWidth が広がって**サイト全体が横スクロール**する。 結果、閉じているのにコンテンツが左へずれ、右端がはみ出して見える （2026-08-30 に実機で確認）。visibility と併用して確実に畳む。 */ .nav-mobile:not([open]) .nav-mobile__panel { display: none; } /* 背後を暗くする覆い */ .nav-mobile[open]::before { content: ""; position: fixed; inset: 0; z-index: 65; background: oklch(0 0 0 / 0.5); } .nav-mobile__panel .l-container { padding-inline: var(--space-5); max-width: none; } .nav-mobile__panel .nav-mobile__link { color: var(--color-on-dark); border-bottom: 1px solid oklch(0.30 0.026 258); padding-inline: 0; } .nav-mobile__panel .nav-mobile__link:hover, .nav-mobile__panel .nav-mobile__link:focus-visible { color: var(--color-cyan); } .nav-mobile__panel .nav-mobile__list > li:last-child .nav-mobile__link { border-bottom: 0; } /* --- ドロワー内の言語切替 --- */ .nav-mobile__lang { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid oklch(0.30 0.026 258); } .nav-mobile__lang-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-on-dark-mute); margin-bottom: var(--space-3); } .nav-mobile__lang-list { display: flex; flex-direction: column; gap: var(--space-1); } .nav-mobile__lang-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-on-dark-mute); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-sm); } .nav-mobile__lang-link:hover, .nav-mobile__lang-link:focus-visible { color: var(--color-on-dark); border-color: oklch(0.36 0.026 258); } .nav-mobile__lang-link.is-current { color: var(--color-on-dark); font-weight: 700; border-color: oklch(0.36 0.026 258); background: oklch(0.23 0.024 258); } .nav-mobile__lang-code { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--color-on-dark-mute); } @media (prefers-reduced-motion: reduce) { .burger > span, .nav-mobile__panel { transition: none; } } @media (min-width: 1024px) { .nav-mobile { display: none; } } /* ヘッダー内のCTAは暗背景用 */ .btn--header { background: var(--color-accent); color: oklch(0.99 0 0); } .btn--header:hover { background: var(--color-accent-deep); color: oklch(0.99 0 0); } /* --- 10b. お知らせストリップ（ヘッダー直下・最新1件） ------ */ /* お知らせ: 事業セクションの直前。上の罫は引かず下罫のみで区切る */ .news-strip { background: transparent; border-bottom: 0; padding-top: var(--space-6); } .news-strip__inner { display: flex; flex-direction: column; gap: var(--space-2); padding-block: 0 var(--space-4); max-width: 56rem; border-top: 0; border-bottom: var(--border-strong); } .news-strip__label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-deep); } .news-strip__label::before { content: ""; width: 5px; height: 5px; background: var(--color-accent); } .news-strip__list { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; } .news-strip__item { display: flex; flex-direction: column; gap: var(--space-1); } .news-strip__date { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--color-muted); } .news-strip__link { font-size: var(--font-size-sm); color: var(--color-ink); text-decoration: none; } .news-strip__link:hover { color: var(--color-accent-deep); text-decoration: underline; } .news-strip__more { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; } @media (min-width: 1024px) { .news-strip__inner { flex-direction: row; align-items: center; gap: var(--space-6); } .news-strip__item { flex-direction: row; align-items: baseline; gap: var(--space-4); } } /* --- 10c. 取引先リスト ------------------------------------- */ .client-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: var(--border-hairline); } .client-list__item { font-size: var(--font-size-sm); padding-block: var(--space-3); border-bottom: var(--border-hairline); } @media (min-width: 640px) { .client-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-6); } } @media (min-width: 1024px) { .client-list { grid-template-columns: repeat(3, 1fr); } } /* --- 11. フッター ----------------------------------------- */.site-footer { background: var(--color-navy-deep); color: var(--color-on-dark); padding-block: var(--space-8) var(--space-6); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } .site-footer__title { font-family: var(--font-head); font-size: var(--font-size-md); font-weight: 700; margin-bottom: var(--space-4); } .site-footer__label { font-family: var(--font-mono); font-size: var(--font-size-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-on-dark-mute); margin-bottom: var(--space-4); } .site-footer__list { display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__link { font-size: var(--font-size-sm); color: var(--color-on-dark); text-decoration: none; } .site-footer__link:hover { color: oklch(0.84 0.09 24); text-decoration: underline; } .site-footer__tagline { font-family: "Source Sans 3", sans-serif; font-size: var(--font-size-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-on-dark-mute); margin-top: var(--space-2); } .site-footer__address { font-size: var(--font-size-sm); line-height: var(--leading-body); color: var(--color-on-dark-mute); } .site-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid oklch(0.35 0.04 262); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--color-on-dark-mute); } .site-footer a { color: var(--color-on-dark); } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); } .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* --- 12. 画像プレースホルダ -------------------------------- */ .ph { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; width: 100%; background-color: var(--color-surface-alt); background-image: repeating-linear-gradient(135deg, oklch(0.90 0.012 262) 0 1px, transparent 1px 9px); border: var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; } .ph--wide { aspect-ratio: 16 / 9; } .ph--map { aspect-ratio: 3 / 2; } .ph--portrait { aspect-ratio: 3 / 4; } /* 実際のスクリーンショットを敷く場合は斜線パターンを外す */ .ph--shot { background-image: none; padding: 0; } .ph__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .ph__note { font-family: var(--font-mono); font-size: var(--font-size-2xs); line-height: 1.4; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--color-muted); background: var(--color-surface); border-top: var(--border-hairline); border-right: var(--border-hairline); border-top-right-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } /* --- 13. ヒーロー ----------------------------------------- */ .hero { position: relative; overflow: hidden; background: oklch(0.17 0.020 258); color: var(--color-on-dark); padding-block: var(--space-8) var(--space-9); } /* 将来の動画差し替え用レイヤー。