@charset "UTF-8";
/**
 * Design Tokens — TCD120 BLAZE 実値ベース + DX 文脈調整
 *
 * 値の出どころ:
 *   - TCD120 BLAZE（blaze_tcd120/style.css および variables.css）から抽出
 *   - 一部、デジタルブックPDF の DX ブランド方針に合わせて微調整
 *
 * すべての CSS はこのファイルの CSS 変数に依存する。
 *
 * @package dgb-child
 */

:root {

	/* === Color ===
	 * TCD120 BLAZE は accent color をテーマオプションで上書きする設計。
	 * 本サイトでは固定値として「ダークナビ + ブライト水色」の DX 二色を採用。
	 */
	--dgb-color-primary:        #002040; /* TCD120 BLAZE が overlay に使う dark navy。DX 文脈にも合致 */
	--dgb-color-primary-dark:   #001530;
	--dgb-color-primary-soft:   #1F4470;

	--dgb-color-accent:         #0aa3ff; /* TCD120 BLAZE のデフォルト accent (line 7013) */
	--dgb-color-accent-dark:    #0086cb;
	--dgb-color-accent-soft:    #5cc4ff;

	--dgb-color-bg:             #ffffff;
	--dgb-color-bg-soft:        #f8f8f8; /* TCD120 で使用中の最も薄い soft bg */
	--dgb-color-bg-section:     #f6f6f6; /* TCD120 のセクション bg（variables.css:19） */
	--dgb-color-bg-card:        #f7f7f7; /* TCD120 のカード/タブ bg */

	--dgb-color-text:           #000000; /* TCD120 root font color (variables.css:9) */
	--dgb-color-text-soft:      #333333;
	--dgb-color-muted:          #999999; /* TCD120 muted text 多用 */

	--dgb-color-border:         #dddddd; /* TCD120 標準ボーダー */
	--dgb-color-border-soft:    #f5f5f5; /* TCD120 薄いボーダー/bg 兼用 */

	--dgb-color-link:           var(--dgb-color-accent-dark); /* リンクは accent 暗め */
	--dgb-color-success:        #16a34a;
	--dgb-color-warning:        #d97706;
	--dgb-color-error:          #dc2626;

	/* === Typography ===
	 * TCD120 はシステムフォントスタックでパフォーマンス重視。本サイトもこれを踏襲。
	 */
	--dgb-font-base:            Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--dgb-font-heading:         Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--dgb-font-serif:           "Times New Roman", times, "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	--dgb-font-mono:            "SFMono-Regular", "Consolas", "Menlo", monospace;

	/* TCD120: headline 32/22, single-headline 28, body 16, header-logo 34/28, front-catch 38/20 */
	--dgb-fs-h1:                clamp(1.75rem, 3.5vw, 2.375rem); /* 28-38px (front catch 同等) */
	--dgb-fs-h2:                clamp(1.375rem, 2.8vw, 2rem);    /* 22-32px (TCD120 headline) */
	--dgb-fs-h3:                1.75rem;                          /* 28px (single-headline) */
	--dgb-fs-h4:                1.25rem;                          /* 20px */
	--dgb-fs-body:              1rem;                             /* 16px (single-content) */
	--dgb-fs-small:             0.875rem;
	--dgb-fs-xs:                0.75rem;

	--dgb-fw-regular:           400;
	--dgb-fw-medium:            500;
	--dgb-fw-bold:              600; /* TCD120 headline-font-weight (variables.css:32) */

	/* 編集メディアとして可読性を優先。TCD120 標準の 2.4 はやや広すぎ */
	--dgb-line-tight:           1.4;
	--dgb-line-base:            1.8;
	--dgb-line-loose:           2.2;

	/* === Spacing === */
	--dgb-space-2xs:            0.125rem;
	--dgb-space-xs:             0.25rem;
	--dgb-space-sm:             0.5rem;
	--dgb-space-md:             1rem;
	--dgb-space-lg:             1.5rem;
	--dgb-space-xl:             2.5rem;
	--dgb-space-2xl:            4rem;
	--dgb-space-3xl:            6rem;

	--dgb-section-pad-y:        clamp(2.5rem, 5vw, 6.25rem); /* TCD120: padding-block 0 150px をベース */
	--dgb-container-pad-x:      20px;                          /* TCD120: calc(100% - 40px) ベース */
	--dgb-row-gap-main:         70px;                          /* TCD120: l-main row-gap */

	/* === Radius ===
	 * TCD120 は pill / 50% を多用、中間値は 3px/5px のみ。本サイトでは編集メディア寄りに 8-12px を活用。
	 */
	--dgb-radius-sm:            3px;   /* TCD120 微小角 */
	--dgb-radius-md:            8px;
	--dgb-radius-lg:            12px;
	--dgb-radius-xl:            20px;
	--dgb-radius-card:          12px;
	--dgb-radius-pill:          9999px;

	/* === Shadow ===
	 * TCD120 で実際に使用されている値をそのまま採用。
	 */
	--dgb-shadow-card:          0 0 20px rgba(0, 0, 0, 0.15);          /* TCD120 line 4576/6074 */
	--dgb-shadow-card-hover:    0 4px 10px -2px rgba(0, 0, 0, 0.15);   /* TCD120 line 6622 */
	--dgb-shadow-soft:          0 0 10px rgba(0, 0, 0, 0.1);           /* TCD120 line 6451/6463 */
	--dgb-shadow-header:        0 5px 20px 0 rgba(0, 0, 0, 0.1);       /* TCD120 header bar shadow */
	--dgb-shadow-deep:          0 12px 40px rgba(0, 0, 0, 0.14);
	--dgb-shadow-glow-accent:   0 0 0 4px rgba(10, 163, 255, 0.2);

	/* === Layout === */
	--dgb-max-content:          1150px; /* TCD120: --tcd-base-container-size (variables.css:12) */
	--dgb-max-content-wide:     1200px; /* TCD120 inline-size の上限 (variables.css:22) */
	--dgb-max-narrow:           720px;
	--dgb-max-hero:             1440px;
	--dgb-max-news:             920px;  /* TCD120 ニュース・成功事例の幅 */

	--dgb-z-header:             1000000; /* TCD120 l-header (layout.css:10) */
	--dgb-z-modal:              1100000;
	--dgb-z-tooltip:             999990;

	/* === Motion === */
	--dgb-ease:                 cubic-bezier(0.4, 0, 0.2, 1);
	--dgb-ease-out:             cubic-bezier(0, 0, 0.2, 1);
	--dgb-ease-in:              cubic-bezier(0.4, 0, 1, 1);
	--dgb-dur-fast:             120ms;
	--dgb-dur-base:             240ms;
	--dgb-dur-slow:             480ms;
}

/* TCD120 と同様に SP では見出しを縮小 */
@media (max-width: 767px) {
	:root {
		--dgb-line-base:        1.7;
		--dgb-section-pad-y:    2.5rem;
		--dgb-row-gap-main:     40px;
	}
}