@charset "utf-8"; /* ============================================================================ /demographics/ 属性推定（年齢・性別）ページ デザイン差し替えの方針 -------------------------------------------------------------------------- 1. 色・余白・角丸・フォントは、すべて下の :root のカスタムプロパティに 集約しています。トーンだけ変えたい場合は :root の書き換えで完結します。 2. セクションごとに 1 ブロックずつ区切っています。 ブロック名は dg-<セクション名>__<要素> の BEM 風で、HTML 側の構造と 1 対 1 で対応しています。HTML を触らずに CSS だけ差し替えられます。 3. 詳細度は極力 1 段（クラス 1 つ）に抑えています。上書きが容易です。 4. HTML 側にインラインスタイルはありません。 ========================================================================= */ /* ============================================================================ 1. デザイントークン ========================================================================= */ :root { /* --- 配色 ------------------------------------------------------------ */ --dg-color-text: #313844; /* 本文 */ --dg-color-text-muted: #64748b; /* 補足・キャプション */ --dg-color-text-invert: #ffffff; --dg-color-bg: #ffffff; /* ページ地 */ --dg-color-bg-alt: #f2f6f9; /* 1 段沈めた面 */ --dg-color-border: #f2f6f9; --dg-color-accent: #eb3155; /* 主アクセント（文字・罫・番号） */ --dg-color-accent-dark: #c81f42; --dg-color-accent-soft: rgba(235, 49, 85, .1); --dg-color-secondary: #1b3a73; /* 動作環境カラムなどの第 2 アクセント */ /* --- タイポグラフィ --------------------------------------------------- */ --dg-font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --dg-font-en: "Poppins", sans-serif; /* ailia LLM の英語版 style_en.css に合わせて Inter → Poppins */ --dg-fs-hero: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); --dg-fs-section: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); --dg-fs-card: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); --dg-fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem); --dg-fs-small: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem); --dg-lh-body: 1.9; --dg-lh-tight: 1.45; /* --- レイアウト -------------------------------------------------------- */ --dg-container: 1440px; --dg-gutter: 24px; --dg-section-pad-y: clamp(56px, 7vw, 112px); --dg-gap: 24px; --dg-gap-lg: 48px; /* --- 装飾 -------------------------------------------------------------- */ --dg-radius: 10px; --dg-radius-sm: 6px; --dg-radius-pill: 999px; --dg-shadow: 0 1px 2px rgba(16, 23, 34, .04), 0 8px 24px rgba(16, 23, 34, .06); --dg-shadow-hover: 0 2px 4px rgba(16, 23, 34, .06), 0 14px 32px rgba(16, 23, 34, .10); --dg-transition: .2s ease; /* --- ヘッダーまわり ------------------------------------------------------ 共通ヘッダー(/common/header.shtml)の .navArea は position:fixed・ z-index:70 で、高さは PC 60px / 1023px 以下 48px。 本文はその分だけ下げ、セクションナビはさらにその下に貼り付ける。 ---------------------------------------------------------------------- */ --dg-header-h: 60px; --dg-nav-h: 56px; } @media (max-width: 1023px) { :root { --dg-header-h: 48px; } } /* ノートPC以上（1024px〜）: 1440px 未満は左右余白が --dg-gutter（24px）で固定されたままなのに対し、 1440px を超えた瞬間に (100vw - 1440px)/2 の余白が付き始め、大画面ほど 際限なく広がる。そのため、ノートPC幅と大画面とで余白の見え方に大きな 段差ができてしまう（ユースケース画像のはみ出し量も同様に段差が出る）。 ここで --dg-gutter 自体を底上げし、1440px 到達後もそのまま加算され 続けるようにする（上限を切ると 1440px 直後に余白が一度縮んでしまう ため、max-width は設定しない）。 */ @media (min-width: 1024px) { :root { --dg-gutter: 56px; } } /* ノートPC幅では、ヒーローは画像のマスク処理で左側に自然な余白があるため 現状のままで気にならないが、それ以降のセクション（デモ〜フッター直前）は コンテンツがコンテナいっぱいに詰まっており、相対的に余白が窮屈に見える。 ヒーローには手を付けず、後続セクションだけ --dg-gutter をもう一段広げる。 */ @media (min-width: 1024px) { .dg-demo, .dg-usecase, .dg-feature, .dg-bench, .dg-spec, .dg-cta { --dg-gutter: 88px; } } /* ============================================================================ 2. ベース ========================================================================= */ /* セクションナビのアンカーリンク（#usecase 等）をクリックした時に、 瞬間ジャンプではなく滑らかにスクロールさせる。スクロールの実体は 要素（ドキュメントのスクロールボックス）に対して指定する必要が あるため、.dg（）ではなくここに置く。 */ html { scroll-behavior: smooth; } .dg { margin: 0; padding-top: var(--dg-header-h); /* 固定ヘッダーの高さ分 */ color: var(--dg-color-text); background: var(--dg-color-bg); font-family: var(--dg-font-base); font-size: var(--dg-fs-body); line-height: var(--dg-lh-body); -webkit-font-smoothing: antialiased; } /* 英語版: ailia LLM の style_en.css（.body, .body * { font-family: Poppins }）に 合わせ、ページ全体のフォントを Poppins に切り替える。 で判定。 */ .dg:lang(en), .dg:lang(en) * { font-family: var(--dg-font-en); } /* 共通ヘッダーの補正。 /css/header.css はリンクの下線をリセットしておらず、各ページ側で打ち消す作りに なっています（/mp/ なども自前の CSS で同じことをしています）。入れないと ロゴの「アイリア」に下線が出ます。共通フッターは footer.css 側で解決済み。 */ .navArea a { text-decoration: none; } /* 要素セレクタのベーススタイルは、このページ自身の領域だけに当てます。 .dg は に付いているため、`.dg a` のように書くと共通ヘッダー・ 共通フッターのリンクにまで効いてしまいます（ロゴに下線が出るなど）。 */ :is(.dg-sectionnav, .dg-main) *, :is(.dg-sectionnav, .dg-main) *::before, :is(.dg-sectionnav, .dg-main) *::after { box-sizing: border-box; } /* さらに要素セレクタを :where() で包み、詳細度を 0 にしています。 こうしないと `p`(0-1-1) が `.dg-hero__lead`(0-1-0) のような コンポーネント側の指定に競り勝ってしまい、margin や色の上書きが効きません。 デザイン差し替え時も、クラス 1 つ書けば必ず上書きできる状態を保つための約束です。 */ :is(.dg-sectionnav, .dg-main) :where(h1, h2, h3) { margin: 0; line-height: var(--dg-lh-tight); font-weight: 700; } :is(.dg-sectionnav, .dg-main) :where(p) { margin: 0 0 1.2em; } :is(.dg-sectionnav, .dg-main) :where(ul, ol, dl) { margin: 0; padding: 0; } :is(.dg-sectionnav, .dg-main) :where(li) { list-style: none; } :is(.dg-sectionnav, .dg-main) :where(a) { color: var(--dg-color-accent); text-decoration: underline; text-underline-offset: .18em; } :is(.dg-sectionnav, .dg-main) :where(a:hover) { color: var(--dg-color-accent-dark); } :is(.dg-sectionnav, .dg-main) em { font-style: normal; color: var(--dg-color-accent); } /* 全セクションの共通コンテナ */ .dg-container { width: 100%; max-width: var(--dg-container); margin-inline: auto; padding-inline: var(--dg-gutter); } /* セクション見出しの共通パーツ */ .dg-sectionHead { max-width: 58em; margin-bottom: var(--dg-gap-lg); } .dg-sectionLabel { margin: 0 0 .6em; font-family: var(--dg-font-en); font-size: var(--dg-fs-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dg-color-accent); } .dg-sectionTitle { font-size: var(--dg-fs-section); } .dg-sectionLead { margin-top: 1.2em; margin-bottom: 0; color: var(--dg-color-text-muted); } /* アンカー着地位置を、固定ヘッダー + セクションナビの下に */ .dg-main [id] { scroll-margin-top: calc(var(--dg-header-h) + var(--dg-nav-h) + 16px); } /* ============================================================================ 3. ボタン ========================================================================= */ .dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.8em; border: 2px solid transparent; border-radius: var(--dg-radius-pill); font-size: var(--dg-fs-body); font-weight: 700; line-height: 1.4; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dg-transition), color var(--dg-transition), border-color var(--dg-transition), box-shadow var(--dg-transition); } .dg-btn:hover, .dg-btn:focus-visible { text-decoration: none; } .dg-btn--lg { padding: 1.05em 2.4em; } /* ライブデモ導線。このページで最も強い導線なので専用色 */ .dg-btn--demo { background: var(--dg-color-accent); border-color: var(--dg-color-accent); color: var(--dg-color-text-invert); } .dg-btn--demo:hover { background: var(--dg-color-bg); border-color: var(--dg-color-accent); color: var(--dg-color-accent); } .dg-btn--ghost { background: transparent; border-color: var(--dg-color-accent); color: var(--dg-color-accent); } .dg-btn--ghost:hover { background: var(--dg-color-accent); border-color: var(--dg-color-accent); color: var(--dg-color-text-invert); } /* ============================================================================ 4. セクションナビ（sticky・JS 不使用） ========================================================================= */ .dg-sectionnav { position: sticky; top: var(--dg-header-h); z-index: 20; /* 共通ヘッダー(70)より下。メガメニューが上に被る */ background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--dg-color-border); transition: top .3s ease; } /* 共通ヘッダーがスクロールで上に隠れたら、セクションナビもその分だけ 上に詰めて画面上端に貼り付く（クラスの付け外しは /js/header-autohide.js が #header に対して行う）。 */ #header.header--hidden ~ .dg-sectionnav { top: 0; } .dg-sectionnav__inner { display: flex; align-items: center; gap: var(--dg-gap); min-height: var(--dg-nav-h); } .dg-sectionnav__label { font-weight: 700; white-space: nowrap; /* 「属性推定」ラベルを #top へのリンクにしても、見た目は今まで通りの ただのラベルのまま（他のナビリンクのようなピンク下線にはしない）。 */ color: inherit; text-decoration: none; } .dg-sectionnav__label:hover { color: var(--dg-color-accent); } /* デスクトップ / iPad: HTML 側で
にしてあるため、 ネイティブに常に展開された状態。
自体を flex:1 1 auto にして 残りスペースを吸収させ、CTA を右端に押し出す。
に display:contents を使わないのは、Safari など一部ブラウザで
の display:contents が信頼できず、ボックスが縮んで CTA がメニューにくっついてしまうため。 */ .dg-sectionnav__menu { display: block; flex: 1 1 auto; min-width: 0; } .dg-sectionnav__toggle { display: none; } .dg-sectionnav__list { display: flex; gap: 1.5em; overflow-x: auto; scrollbar-width: none; } .dg-sectionnav__list::-webkit-scrollbar { display: none; } .dg-sectionnav__list a { display: block; padding: .4em 0; color: var(--dg-color-text-muted); font-size: var(--dg-fs-small); text-decoration: none; white-space: nowrap; } .dg-sectionnav__list a:hover { color: var(--dg-color-accent); } .dg-sectionnav__cta { flex: 0 0 auto; padding: .55em 1.2em; font-size: var(--dg-fs-small); } /* タブレット（iPad 含む）: ラベルを畳んで、メニューと CTA の間に 余裕を持たせる。ハンバーガー化はしない（768px 以上は横並びのまま）。 */ @media (max-width: 767px) { .dg-sectionnav__label { display: none; } } /* モバイル（スマートフォン）:
を通常のブロックに戻し、 ハンバーガーとして開閉させる。「ブラウザで試す」CTA は常時表示のまま。 HTML には open 属性が既定で入っているため、JS が効かない場合は 常時展開表示にフォールバックする（機能は壊れない）。 599px までに絞っているのは、iPad mini（縦持ちで幅 744px）まで 含めた iPad 全機種で、これまで通りの横並びメニューを保つため。 */ @media (max-width: 599px) { .dg-sectionnav__inner { justify-content: space-between; } .dg-sectionnav__menu { display: block; flex: 0 0 auto; } .dg-sectionnav__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: calc(-1 * (44px - 18px) / 2); list-style: none; cursor: pointer; color: var(--dg-color-text); -webkit-tap-highlight-color: transparent; } .dg-sectionnav__toggle::marker { content: ""; } .dg-sectionnav__toggle::-webkit-details-marker { display: none; } .dg-sectionnav__toggle:focus-visible { outline: 2px solid var(--dg-color-accent); outline-offset: 2px; } .dg-sectionnav__toggle-bars, .dg-sectionnav__toggle-bars::before, .dg-sectionnav__toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; } .dg-sectionnav__toggle-bars { position: relative; } .dg-sectionnav__toggle-bars::before, .dg-sectionnav__toggle-bars::after { content: ""; position: absolute; left: 0; transition: transform var(--dg-transition), top var(--dg-transition), opacity var(--dg-transition); } .dg-sectionnav__toggle-bars::before { top: -6px; } .dg-sectionnav__toggle-bars::after { top: 6px; } .dg-sectionnav__menu[open] .dg-sectionnav__toggle-bars { background: transparent; } .dg-sectionnav__menu[open] .dg-sectionnav__toggle-bars::before { top: 0; transform: rotate(45deg); } .dg-sectionnav__menu[open] .dg-sectionnav__toggle-bars::after { top: 0; transform: rotate(-45deg); } .dg-sectionnav__list { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--dg-color-bg); border-bottom: 1px solid var(--dg-color-border); padding: 0 var(--dg-gutter) .5em; overflow: visible; } .dg-sectionnav__menu[open] .dg-sectionnav__list { display: flex; } .dg-sectionnav__list a { padding: .9em 0; border-top: 1px solid var(--dg-color-border); } } /* ============================================================================ 5. HERO ========================================================================= */ .dg-hero { position: relative; padding-block: var(--dg-section-pad-y); background: linear-gradient(180deg, var(--dg-color-bg-alt) 0%, var(--dg-color-bg) 100%); overflow: hidden; } .dg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 60%); animation: dg-hero-bg-fade 2.8s ease forwards; } @keyframes dg-hero-bg-fade { from { opacity: 0; } to { opacity: .7; } } .dg-hero__inner { position: relative; } .dg-hero__eyebrow { margin: 0 0 1.2em; font-family: var(--dg-font-en); font-size: var(--dg-fs-small); font-weight: 600; letter-spacing: .1em; color: var(--dg-color-accent); } .dg-hero__title { font-size: var(--dg-fs-hero); font-weight: 900; letter-spacing: -.01em; } .dg-hero__lead { max-width: 44em; margin-top: 1.6em; color: var(--dg-color-text-muted); } .dg-hero__points { display: flex; flex-wrap: wrap; gap: .6em 1em; margin-bottom: 2.4em; } .dg-hero__points li { padding: .5em 1.1em; background: var(--dg-color-bg); border: 1px solid var(--dg-color-accent); border-radius: var(--dg-radius-sm); font-size: var(--dg-fs-small); line-height: 1.5; } .dg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--dg-gap); } /* モバイル: 4 つのタグ（.dg-hero__points）はボタンのように大きく見えるため、 スマートフォン幅ではひとまわり小さくする（角丸は PC と共通で --dg-radius-sm）。 */ @media (max-width: 599px) { .dg-hero__points li { padding: .35em .75em; font-size: .75rem; } } /* ============================================================================ 6. ライブデモ ========================================================================= */ .dg-demo { padding-block: var(--dg-section-pad-y); background: var(--dg-color-bg-alt); } .dg-demo__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(64px, 12vw, 200px); align-items: start; } .dg-demo__text { color: var(--dg-color-text-muted); } .dg-demo__text strong { color: var(--dg-color-text); } .dg-demo__figure { display: flex; justify-content: flex-end; } .dg-demo__placeholder { max-width: 640px; width: 100%; min-height: 500px; padding: var(--dg-gap) var(--dg-gap); border-radius: var(--dg-radius); background: var(--dg-color-accent); text-align: center; } .dg-demo__placeholderText { display: block; margin-bottom: .6em; font-family: var(--dg-font-en); font-size: 2rem; font-weight: 800; letter-spacing: .2em; color: var(--dg-color-text-invert); } .dg-demo__shot { position: relative; margin-bottom: .5em; height: 199px; border-radius: var(--dg-radius-sm); overflow: hidden; } .dg-demo__shot img { width: 100%; height: 100%; object-fit: cover; } .dg-demo__shot::after { content: ""; position: absolute; inset: 0; background: rgba(36, 48, 98, .25); mix-blend-mode: plus-lighter; } .dg-demo__credit { margin-bottom: .8em; font-size: .75rem; line-height: 1.5; text-align: right; color: var(--dg-color-text-invert); opacity: .75; } .dg-demo__specs { text-align: left; } .dg-demo__specs li { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-top: 1px solid rgba(255, 255, 255, .3); font-size: var(--dg-fs-small); line-height: 1.6; } .dg-demo__specs span { color: var(--dg-color-text-invert); white-space: nowrap; } .dg-demo__specs b { color: var(--dg-color-text-invert); text-align: right; } @media (max-width: 899px) { .dg-demo__inner { grid-template-columns: 1fr; } } /* ============================================================================ 7. ユースケース ========================================================================= */ .dg-usecase { padding-block: var(--dg-section-pad-y); } .dg-usecase__list { display: flex; flex-direction: column; gap: var(--dg-gap-lg); } .dg-usecase__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--dg-gap-lg); align-items: stretch; padding-top: var(--dg-gap-lg); } .dg-usecase__item:first-child { padding-top: 0; } .dg-usecase__content { order: 1; } .dg-usecase__figure { order: 2; } .dg-usecase__item:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .dg-usecase__item:nth-child(2) .dg-usecase__content { order: 2; } .dg-usecase__item:nth-child(2) .dg-usecase__figure { order: 1; } .dg-usecase__item:nth-child(2) .dg-usecase__content { text-align: right; } .dg-usecase__item:nth-child(2) .dg-usecase__why { text-align: right; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets { width: fit-content; margin-left: auto; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets li { padding-left: 0; padding-right: 1.5em; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets li::before { left: auto; right: .1em; } .dg-usecase__figure { display: grid; align-items: center; } .dg-usecase__figure img { display: block; width: calc(100% + max(0px, (100vw - var(--dg-container)) / 2) + var(--dg-gutter)); height: var(--dg-usecase-img-h, 100%); min-height: 320px; border-radius: var(--dg-radius); object-fit: cover; object-position: center; } .dg-usecase__item:nth-child(2) .dg-usecase__figure img { margin-left: calc(-1 * (max(0px, (100vw - var(--dg-container)) / 2) + var(--dg-gutter))); } /* ノートPC〜デスクトップ幅では、画像の高さ（テキスト列に合わせた行の高さ）に対して 幅がイラストの本来の比率（約 1.2:1）まで届かず、object-fit: cover が中央基準で 左右を大きく切り落としてしまう（1920px 前後でようやく比率が一致し、切り落としが 消える）。中央基準だと、01 は奥の壁の角、02 は着席した乗客が丸ごと切れて 見えなくなる。実際に切れているのは、01 は左側、02 は右側がほぼ余白なので、 object-position を余白側に寄せ、絵の要素がある側を優先的に残す。 03 はどちらの端も余白のため、中央基準のままで問題ない。 */ #usecase-signage .dg-usecase__figure img { object-position: right center; } #usecase-transit .dg-usecase__figure img { object-position: left center; } /* それでも 1024px 付近の狭い場合、01・02 のように余白側に寄せるだけでは 人物の胴体あたりで切れてしまう恐れが残る。行の高さいっぱいに引き伸ばさず 少し小さめに表示する（＝引き＝ズームアウト）ことで、cover が使う拡大率 そのものを下げ、実際に切り取られる幅を減らす。余った分は上下に均等な 余白として残るだけなので、余白の多いこのイラストの絵柄とも馴染む。 1024px（最も狭い）で人物を切らずに収まる比率まで縮小し、1920px （切り落とし自体が発生しなくなる幅）に向けて滑らかに 100% へ戻す。 */ @media (min-width: 1024px) and (max-width: 1919px) { :root { --dg-usecase-img-h: clamp(286px, calc(42.4vw - 148px), 100%); } /* 既存の min-height: 320px がこの縮小指定を上書きしてしまうため、 このレンジでは無効化する（下限は上の clamp() 側で管理する）。 */ .dg-usecase__figure img { min-height: 0; } } .dg-usecase__num { font-family: var(--dg-font-base); font-size: clamp(3rem, 1.5rem + 5vw, 6rem); font-weight: 900; line-height: 1; margin-bottom: -.15em; color: rgba(235, 49, 85, .2); } .dg-usecase__title { font-size: var(--dg-fs-section); } .dg-usecase__catch { margin: .8em 0 1.4em; font-size: var(--dg-fs-card); font-weight: 700; color: var(--dg-color-accent); } .dg-usecase__text { color: var(--dg-color-text-muted); } .dg-usecase__bullets { display: flex; flex-direction: column; gap: .5em; margin-bottom: 1.8em; } .dg-usecase__bullets li { position: relative; padding-left: 1.5em; font-size: var(--dg-fs-small); line-height: 1.8; } .dg-usecase__bullets li::before { content: ""; position: absolute; top: .72em; left: .1em; width: 8px; height: 8px; border-radius: 2px; background: var(--dg-color-accent); } .dg-usecase__why { margin: 0; padding: 1.4em 1.6em; border-radius: var(--dg-radius); background: rgba(242, 246, 249, .5); font-size: var(--dg-fs-small); line-height: 1.9; color: var(--dg-color-text-muted); } .dg-usecase__why b { display: block; margin-bottom: .4em; color: var(--dg-color-text); } /* iPad（縦・横）: 2 カラムだと窮屈なため、1 カラムに畳んで 常に「テキスト→画像」の順にする。767px 未満の演出調整とは 分離し、レイアウト構造だけをここで先に決める。 */ @media (max-width: 1023px) { .dg-usecase__item, .dg-usecase__item:nth-child(2) { grid-template-columns: 1fr; gap: var(--dg-gap-lg); } .dg-usecase__item .dg-usecase__content, .dg-usecase__item .dg-usecase__figure, .dg-usecase__item:nth-child(2) .dg-usecase__content, .dg-usecase__item:nth-child(2) .dg-usecase__figure { order: initial; } .dg-usecase__item:nth-child(2) .dg-usecase__content, .dg-usecase__item:nth-child(2) .dg-usecase__why { text-align: left; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets { width: auto; margin-left: 0; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets li { padding-left: 1.5em; padding-right: 0; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets li::before { left: .1em; right: auto; } .dg-usecase__figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 0; margin-left: 0; margin-right: 0; } } @media (max-width: 767px) { .dg-usecase__item, .dg-usecase__item:nth-child(2) { grid-template-columns: 1fr; gap: 2em; } .dg-usecase__item .dg-usecase__content, .dg-usecase__item .dg-usecase__figure, .dg-usecase__item:nth-child(2) .dg-usecase__content, .dg-usecase__item:nth-child(2) .dg-usecase__figure { order: initial; } .dg-usecase__item:nth-child(2) .dg-usecase__content, .dg-usecase__item:nth-child(2) .dg-usecase__why { text-align: left; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets { width: auto; margin-left: 0; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets li { padding-left: 1.5em; padding-right: 0; } .dg-usecase__item:nth-child(2) .dg-usecase__bullets li::before { left: .1em; right: auto; } .dg-usecase__num { font-size: 3rem; margin-bottom: -.1em; } .dg-usecase__why { width: 100%; } .dg-usecase__item .dg-usecase__num.dg-reveal, .dg-usecase__item .dg-usecase__title.dg-reveal, .dg-usecase__item .dg-usecase__catch.dg-reveal, .dg-usecase__item .dg-usecase__text.dg-reveal, .dg-usecase__item .dg-usecase__bullets.dg-reveal, .dg-usecase__item .dg-usecase__why.dg-reveal, .dg-usecase__item .dg-usecase__figure.dg-reveal { transform: translateY(16px); } .dg-usecase__item .dg-reveal.is-visible { transform: translateY(0); } .dg-usecase__figure img { width: calc(100% + 2 * var(--dg-gutter)); margin-left: calc(-1 * var(--dg-gutter)); margin-right: calc(-1 * var(--dg-gutter)); border-radius: 0; height: auto; aspect-ratio: 4 / 3; min-height: 0; } } /* ============================================================================ 8. 特徴 ========================================================================= */ .dg-feature { padding-block: var(--dg-section-pad-y); background: var(--dg-color-bg-alt); } .dg-feature__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dg-gap); } @media (max-width: 1023px) { .dg-feature__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .dg-feature__grid { grid-template-columns: 1fr; } } .dg-feature__card { padding: clamp(24px, 3vw, 40px); background: var(--dg-color-bg); border: 3px solid var(--dg-color-accent); border-radius: var(--dg-radius); box-shadow: 0 1px 4px rgba(235, 49, 85, .15); } .dg-feature__card.dg-reveal { transition: opacity .85s ease, transform .95s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--dg-transition); } .dg-feature__card.dg-reveal:hover { transition: transform .45s cubic-bezier(.34, 1.2, .4, 1), box-shadow .45s ease-out; transition-delay: 0s !important; transform: translateY(-10px); box-shadow: 0 10px 20px rgba(235, 49, 85, .2); } .dg-feature__card:nth-child(3n+2) { border-color: var(--dg-color-text); box-shadow: 0 1px 4px rgba(16, 23, 34, .15); } .dg-feature__card.dg-reveal:nth-child(3n+2):hover { box-shadow: 0 10px 20px rgba(16, 23, 34, .2); } .dg-feature__card:nth-child(3n+3) { border-color: var(--dg-color-secondary); box-shadow: 0 1px 4px rgba(27, 58, 115, .15); } .dg-feature__card.dg-reveal:nth-child(3n+3):hover { box-shadow: 0 10px 20px rgba(27, 58, 115, .2); } /* 情報量の多いカードを 1 枚だけ全幅にしたいとき用 */ .dg-feature__card--wide { grid-column: 1 / -1; } .dg-feature__icon { display: block; width: 80px; height: 80px; margin: 0 auto 20px; border: 0; object-fit: contain; transform: translateZ(0); will-change: transform; } .dg-feature__title { margin-bottom: .9em; font-size: var(--dg-fs-card); } .dg-feature__text { margin-bottom: 1em; color: var(--dg-color-text-muted); font-size: var(--dg-fs-small); line-height: 1.95; } .dg-feature__text:last-child { margin-bottom: 0; } .dg-feature__text strong { color: var(--dg-color-text); } /* ============================================================================ 9. ベンチマーク ========================================================================= */ .dg-bench { padding-block: var(--dg-section-pad-y); } .dg-bench__tableWrap { overflow-x: auto; margin-bottom: var(--dg-gap-lg); -webkit-overflow-scrolling: touch; } .dg-bench__table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--dg-fs-small); line-height: 1.6; } .dg-bench__table caption { margin-bottom: 1em; text-align: left; color: var(--dg-color-text-muted); } .dg-bench__table th, .dg-bench__table td { padding: .95em 1em; text-align: right; vertical-align: middle; } /* 区切り線は tbody 境界（= モデルの切れ目）に引く。 セルごとに border-bottom を引くと、rowspan のセルだけ線が途切れて崩れて見える。 */ .dg-bench__table thead th { border-bottom: 2px solid var(--dg-color-bg); background: var(--dg-color-accent); color: var(--dg-color-text-invert); font-weight: 700; white-space: nowrap; } .dg-bench__table thead th:first-child { border-top-left-radius: var(--dg-radius); } .dg-bench__table thead th:last-child { border-top-right-radius: var(--dg-radius); } .dg-bench__table tbody + tbody { border-top: 1px solid var(--dg-color-border); } /* グループ内（マスクなし / マスクあり）の細い区切り */ .dg-bench__table tbody tr + tr td { border-top: 1px solid var(--dg-color-border); } /* 左寄せにするのはモデル名と条件の 2 列だけ。 2 行目には が無く nth-child が 1 つずれるため、位置ではなくクラスで指定する。 */ .dg-bench__table thead th:first-child, .dg-bench__table tbody th { text-align: left; } .dg-bench__table tbody th { font-weight: 700; } .dg-bench__table .dg-bench__cond { text-align: left; white-space: nowrap; } .dg-bench__table .is-ours { background: var(--dg-color-accent-soft); } .dg-bench__table .is-best { font-weight: 700; color: var(--dg-color-accent); } .dg-bench__disclaimer { margin: 0; padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 32px); background: var(--dg-color-bg-alt); border-radius: var(--dg-radius); font-size: var(--dg-fs-small); line-height: 1.9; color: var(--dg-color-text-muted); } /* ============================================================================ 10. 仕様 ========================================================================= */ .dg-spec { padding-block: var(--dg-section-pad-y); background: var(--dg-color-bg-alt); } .dg-spec__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dg-gap); } @media (max-width: 899px) { .dg-spec__cols { grid-template-columns: 1fr; } } .dg-spec__col { padding: clamp(24px, 3vw, 36px); background: var(--dg-color-bg); border: 3px solid var(--dg-color-accent); border-radius: var(--dg-radius); } .dg-spec__col.dg-reveal { transition: opacity .85s ease, transform .95s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--dg-transition); } .dg-spec__col.dg-reveal:hover { transition: transform .45s cubic-bezier(.34, 1.2, .4, 1), box-shadow .45s ease-out; transition-delay: 0s !important; transform: translateY(-10px); box-shadow: 0 10px 20px rgba(16, 23, 34, .16); } .dg-spec__col:nth-child(2) { border-color: var(--dg-color-text); } .dg-spec__col:nth-child(3) { border-color: var(--dg-color-secondary); } .dg-spec__colTitle { margin-bottom: 1.2em; padding-bottom: .7em; border-bottom: 2px solid currentColor; color: var(--dg-color-accent); font-size: var(--dg-fs-card); } .dg-spec__col:nth-child(2) .dg-spec__colTitle { color: var(--dg-color-text); } .dg-spec__col:nth-child(3) .dg-spec__colTitle { color: var(--dg-color-secondary); } /* 処理パイプライン（連番リスト） */ .dg-spec__flow { counter-reset: dgflow; } .dg-spec__flow li { counter-increment: dgflow; position: relative; padding: 0 0 1.4em 2.6em; font-size: var(--dg-fs-small); line-height: 1.7; } .dg-spec__flow li::before { content: counter(dgflow); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--dg-color-accent); color: var(--dg-color-text-invert); font-family: var(--dg-font-en); font-size: .8em; font-weight: 700; } /* 手順をつなぐ縦線 */ .dg-spec__flow li:not(:last-child)::after { content: ""; position: absolute; top: 2.1em; left: .92em; bottom: .2em; width: 1px; background: var(--dg-color-accent-soft); } .dg-spec__flow b { display: block; } .dg-spec__flow span { color: var(--dg-color-text-muted); } /* 定義リスト */ .dg-spec__list { display: grid; grid-template-columns: minmax(6em, auto) minmax(0, 1fr); font-size: var(--dg-fs-small); line-height: 1.7; } .dg-spec__list dt, .dg-spec__list dd { margin: 0; padding: .75em 0; border-top: 1px solid rgba(49, 56, 68, .1); } .dg-spec__col:nth-child(3) .dg-spec__list dt, .dg-spec__col:nth-child(3) .dg-spec__list dd { border-top-color: rgba(27, 58, 115, .1); } .dg-spec__list dt { padding-right: 1em; font-weight: 700; } .dg-spec__list dd { color: var(--dg-color-text-muted); } .dg-spec__list dt:first-of-type, .dg-spec__list dt:first-of-type + dd { border-top: 0; } .dg-spec__note { margin: 1.4em 0 0; font-size: var(--dg-fs-small); line-height: 1.85; color: var(--dg-color-text-muted); } /* ============================================================================ 11. CTA ========================================================================= */ .dg-cta { padding-block: var(--dg-section-pad-y); background: var(--dg-color-bg); } .dg-cta__inner { max-width: 58em; text-align: center; } .dg-cta__title { font-size: var(--dg-fs-section); } .dg-cta__text { margin-top: 1.4em; margin-bottom: 2.4em; color: var(--dg-color-text-muted); } .dg-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dg-gap); } /* ============================================================================ 13. スクロール演出（軽いバウンス） ========================================================================= */ .dg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s ease, transform .95s cubic-bezier(.34, 1.56, .64, 1); } .dg-reveal.is-visible { opacity: 1; transform: translateY(0); } .dg-feature__grid .dg-feature__card:nth-child(1) { transition-delay: 0s; } .dg-feature__grid .dg-feature__card:nth-child(2) { transition-delay: .1s; } .dg-feature__grid .dg-feature__card:nth-child(3) { transition-delay: .2s; } .dg-feature__grid .dg-feature__card:nth-child(4) { transition-delay: .1s; } .dg-feature__grid .dg-feature__card:nth-child(5) { transition-delay: .2s; } .dg-feature__grid .dg-feature__card:nth-child(6) { transition-delay: .3s; } .dg-spec__cols .dg-spec__col:nth-child(1) { transition-delay: 0s; } .dg-spec__cols .dg-spec__col:nth-child(2) { transition-delay: .1s; } .dg-spec__cols .dg-spec__col:nth-child(3) { transition-delay: .2s; } @media (prefers-reduced-motion: reduce) { .dg * { transition: none !important; } html, .dg { scroll-behavior: auto; } .dg-reveal { opacity: 1; transform: none; } .dg-hero__bg { animation: none; opacity: .7; } }