/**
 * DIV KSK Theme - Design System
 *
 * CSS カスタムプロパティ（デザイントークン）と基本コンポーネントスタイルを定義する。
 * ここで定義した変数を assets/css/style.css で使用すること。
 *
 * Figma照合: 2026-07-29
 *
 * Table of Contents:
 *   1.  Color
 *   2.  Typography
 *   3.  Spacing
 *   4.  Border Radius / Shadow / Transition
 *   5.  Breakpoint（参照用コメント）
 *   6.  Container
 *   7.  Grid
 *   8.  Component: Button
 *   9.  Component: Card
 *   10. Component: Section
 *
 * @package DIV_KSK_Theme
 */

/* ================================================
   1. COLOR
   ------------------------------------------------
   Figma確認値:
     #000000   テキスト（見出し・ナビ英語）
     #1c1c1c   本文・ニュース（near-black）
     #838383   セクションラベル・ナビ日本語サブ
     #ffffff   ダーク背景上テキスト・カードテキスト
     #f7f7f7   サブ背景（Aboutセクション）
     rgba(0,0,0,0.3) プロダクトカードオーバーレイ
================================================ */

:root {

	/* --- Primary（Figma: 黒ベース）--- */
	--color-primary:      #000000;
	--color-primary-dark: #1c1c1c; /* ホバー等の濃淡用 */

	/* --- Neutral スケール（ユーティリティ）--- */
	--color-neutral-0:   #ffffff;
	--color-neutral-50:  #f9fafb;
	--color-neutral-100: #f3f4f6;
	--color-neutral-200: #e5e7eb;
	--color-neutral-300: #d1d5db;
	--color-neutral-400: #9ca3af;
	--color-neutral-500: #6b7280;
	--color-neutral-600: #4b5563;
	--color-neutral-700: #374151;
	--color-neutral-800: #1f2937;
	--color-neutral-900: #111827;

	/* --- セマンティックカラー（UI用途・Figma未確認のため参考値）--- */
	--color-success: #16a34a;
	--color-warning: #d97706;
	--color-error:   #dc2626;
	--color-info:    #0284c7;

	/* --- テキストカラー --- */
	--color-text-primary:   #000000; /* 見出し・ナビ英語（Figma確認）*/
	--color-text-body:      #1c1c1c; /* 本文・ニュース項目（Figma確認）*/
	--color-text-secondary: #838383; /* セクションラベル・ナビ日本語（Figma確認）*/
	--color-text-inverse:   #ffffff; /* ダーク背景・カード上テキスト（Figma確認）*/
	--color-text-muted:     #a7a7a7;                  /* Figma確認: フッターコピーライト・区切り線 */

	/* --- アクセントカラー --- */
	--color-accent:         #f4812c;   /* Figma確認: Newsセクション見出し・フッターCTA橙 */

	/* --- フッターカラー --- */
	--footer-cta-bg:        var(--color-accent);

	/* --- 背景カラー --- */
	--color-bg-base:     #ffffff;    /* ページ・ヘッダー背景（Figma確認）*/
	--color-bg-subtle:   #f7f7f7;    /* Aboutセクション背景（Figma確認）*/
	--color-bg-emphasis: var(--color-neutral-100); /* 汎用強調背景（Figma未確認・参考）*/
	--color-bg-dark:     var(--color-neutral-900); /* ダーク背景（Figma未確認・参考）*/

	/* --- ボーダーカラー（Figma未確認・参考）--- */
	--color-border:        var(--color-neutral-200);
	--color-border-strong: var(--color-neutral-300);
}

/* ================================================
   2. TYPOGRAPHY
   ------------------------------------------------
   Figma確認フォント:
     Noto Sans JP  Regular(400) / Medium(500) / Bold(700) - 日本語・本文
     Barlow        Bold(700) - 英語ナビ・セクション大見出し

   Figma確認サイズ:
     10px  ナビ日本語サブテキスト
     12px  セクションラベル（ニュース・KSKについて等）
     14px  ニュース日付
     16px  本文・ボタン
     20px  ナビ英語ラベル
     22px  セクション日本語サブ見出し（燃焼実験で～等）
     24px  カードタイトル
     38px  Hero見出し
     60px  セクション英語大見出し（News・About us等）
================================================ */

:root {

	/* --- フォントファミリー --- */
	--font-family-base:    'Noto Sans JP', sans-serif; /* 本文・日本語全般（Figma確認）*/
	--font-family-heading: 'Barlow', sans-serif;       /* 英語ナビ・大見出し（Figma確認）*/
	--font-family-mono:    'SFMono-Regular', Consolas, monospace; /* Figma未確認・参考 */

	/* --- フォントサイズ --- */
	--font-size-2xs:          0.625rem;  /*  10px - ナビ日本語サブ（Figma確認）*/
	--font-size-xs:           0.75rem;   /*  12px - セクションラベル（Figma確認）*/
	--font-size-sm:           0.875rem;  /*  14px - ニュース日付（Figma確認）*/
	--font-size-base:         1rem;      /*  16px - 本文・ボタン（Figma確認）*/
	--font-size-lg:           1.25rem;   /*  20px - ナビ英語（Figma確認）*/
	--font-size-section-sub:  1.375rem;  /*  22px - セクション日本語サブ見出し（Figma確認）*/
	--font-size-xl:           1.5rem;    /*  24px - カードタイトル（Figma確認）*/
	--font-size-2xl:          2rem;      /*  32px - 汎用（Figma未確認・参考）*/
	--font-size-3xl:          2.375rem;  /*  38px - Hero見出し（Figma確認）*/
	--font-size-4xl:          3rem;      /*  48px - 汎用（Figma未確認・参考）*/
	--font-size-5xl:          3.75rem;   /*  60px - セクション英語大見出し（Figma確認）*/

	/* --- フォントウェイト --- */
	--font-weight-regular:  400; /* Figma確認: 本文・ラベル・ナビ日本語 */
	--font-weight-medium:   500; /* Figma確認: Hero見出し */
	--font-weight-semibold: 600; /* Figma未確認・参考 */
	--font-weight-bold:     700; /* Figma確認: ボタン・カード・ナビ英語 */

	/* --- 行間 --- */
	--line-height-tight:   1.2;  /* Figma未確認（normalに近い近似値）*/
	--line-height-snug:    1.4;  /* Figma未確認・参考 */
	--line-height-base:    1.6;  /* Figma確認: 本文・カード説明文 */
	--line-height-relaxed: 1.8;  /* Figma未確認・参考 */
	--line-height-loose:   2;    /* Figma未確認・参考 */

	/* --- 字間（Figma未確認・参考）--- */
	--letter-spacing-tight:  -0.02em;
	--letter-spacing-base:   0em;
	--letter-spacing-wide:   0.05em;
	--letter-spacing-wider:  0.1em;
}

/* ================================================
   3. SPACING
   ------------------------------------------------
   4px ベースのスケール。
   --space-25（100px）はFigmaのコンテンツ左右マージン確認値。
================================================ */

:root {

	--space-1:  0.25rem;   /*   4px */
	--space-2:  0.5rem;    /*   8px */
	--space-3:  0.75rem;   /*  12px */
	--space-4:  1rem;      /*  16px */
	--space-5:  1.25rem;   /*  20px */
	--space-6:  1.5rem;    /*  24px */
	--space-8:  2rem;      /*  32px */
	--space-10: 2.5rem;    /*  40px */
	--space-12: 3rem;      /*  48px */
	--space-16: 4rem;      /*  64px */
	--space-20: 5rem;      /*  80px */
	--space-24: 6rem;      /*  96px */
	--space-25: 6.25rem;   /* 100px - Figma確認: コンテンツ左右マージン */
	--space-32: 8rem;      /* 128px */
}

/* ================================================
   4. BORDER RADIUS / SHADOW / TRANSITION
   ------------------------------------------------
   Figmaで角丸の数値は未確認。参考値として定義。
================================================ */

:root {

	/* Border Radius（Figma未確認・参考）*/
	--radius-none: 0;
	--radius-sm:   0.25rem; /*  4px */
	--radius-md:   0.5rem;  /*  8px */
	--radius-lg:   0.75rem; /* 12px */
	--radius-xl:   1rem;    /* 16px */
	--radius-2xl:  1.5rem;  /* 24px */
	--radius-full: 9999px;

	/* Box Shadow（Figma未確認・参考）*/
	--shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-none: none;

	/* Transition（Figma未確認・参考）*/
	--transition-fast:    all 0.15s ease;
	--transition-base:    all 0.2s ease;
	--transition-slow:    all 0.3s ease;
	--transition-opacity: opacity 0.2s ease; /* opacity のみ。--transition-base は all を含むため代わりに使用 */
}

/* ================================================
   5. BREAKPOINT（参照用 — CSS変数は @media 内で使用不可）
   ------------------------------------------------
   Figmaデザインは PC 1440px のみ提供。
   以下のブレークポイントはモバイル実装時の参考値。
   Figmaモバイルデザインが提供された時点で再確認すること。

   sm:  640px   @media (min-width: 640px)
   md:  768px   @media (min-width: 768px)
   lg:  1024px  @media (min-width: 1024px)
   xl:  1280px  @media (min-width: 1280px)
   2xl: 1440px  @media (min-width: 1440px)  ← Figmaキャンバス幅
================================================ */

/* ================================================
   6. CONTAINER
   ------------------------------------------------
   Figmaキャンバス幅: 1440px（--container-2xl）
   コンテンツ左右マージン: 100px（--space-25）
================================================ */

:root {
	--container-sm:           640px;
	--container-md:           768px;
	--container-lg:           1024px;
	--container-xl:           1280px;
	--container-2xl:          1440px;
	--container-default:      var(--container-2xl);  /* Figma確認: 1440px */
	--container-padding:      var(--space-6);         /* モバイル用左右余白（24px）*/
	--container-padding-wide: var(--space-25);        /* PC用左右余白（100px・Figma確認）*/
}

.container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--sm   { max-width: var(--container-sm); }
.container--md   { max-width: var(--container-md); }
.container--lg   { max-width: var(--container-lg); }
.container--xl   { max-width: var(--container-xl); }
.container--2xl  { max-width: var(--container-2xl); }
.container--full { max-width: none; }

/* ================================================
   7. GRID
   ------------------------------------------------
   Figma Productsセクション: 360px × 4カラム = 1440px（gap:0）
   ここでは汎用12カラムグリッドを定義する。
================================================ */

:root {
	--grid-columns: 12;
	--grid-gap:     var(--space-6);  /* 24px */
	--grid-gap-sm:  var(--space-4);  /* 16px */
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gap);
}

.grid--gap-sm   { gap: var(--grid-gap-sm); }
.grid--gap-none { gap: 0; } /* Figmaプロダクトカード用 */

/* カラム指定 */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* タブレット: lg未満 */
@media (max-width: 1023px) {

	.col-3,
	.col-4 {
		grid-column: span 6;
	}
}

/* モバイル: md未満 */
@media (max-width: 767px) {

	.grid {
		gap: var(--grid-gap-sm);
	}

	.col-2,
	.col-3,
	.col-4,
	.col-6,
	.col-8 {
		grid-column: span 12;
	}
}

/* ================================================
   8. COMPONENT: BUTTON
   ------------------------------------------------
   Figma確認値:
     幅: 230px / 高さ: 50px（固定）
     テキスト: "お問合せはこちら" 16px, Noto Sans JP Bold, white
     背景: #000000（primary）
     角丸: Figma未確認（rounded-rectangleだが数値不明）
================================================ */

:root {

	/* ベース */
	--btn-padding-y:     var(--space-3);         /* 12px */
	--btn-padding-x:     var(--space-6);         /* 24px */
	--btn-font-size:     var(--font-size-base);  /* 16px（Figma確認）*/
	--btn-font-weight:   var(--font-weight-bold); /* Bold（Figma確認）*/
	--btn-line-height:   1.5;
	--btn-border-radius: var(--radius-md);       /* 8px（Figma未確認・参考）*/
	--btn-border-width:  2px;
	--btn-transition:    var(--transition-base);

	/* サイズ: sm */
	--btn-sm-padding-y: var(--space-2);
	--btn-sm-padding-x: var(--space-4);
	--btn-sm-font-size: var(--font-size-sm);

	/* サイズ: lg */
	--btn-lg-padding-y: var(--space-4);
	--btn-lg-padding-x: var(--space-8);
	--btn-lg-font-size: var(--font-size-lg);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-family: var(--font-family-base);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	line-height: var(--btn-line-height);
	border: var(--btn-border-width) solid transparent;
	border-radius: var(--btn-border-radius);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--btn-transition);
}

.btn:focus-visible {
	outline: 3px solid var(--color-neutral-300);
	outline-offset: 2px;
}

/* バリアント: Primary（Figma確認: 黒背景・白テキスト）*/
.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-primary);
}

.btn--primary:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

/* バリアント: Secondary（アウトライン）*/
.btn--secondary {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--secondary:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* バリアント: Ghost */
.btn--ghost {
	background-color: transparent;
	color: var(--color-text-primary);
	border-color: transparent;
}

.btn--ghost:hover {
	background-color: var(--color-bg-emphasis);
}

/* サイズ */
.btn--sm {
	padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
	font-size: var(--btn-sm-font-size);
}

.btn--lg {
	padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
	font-size: var(--btn-lg-font-size);
}

/* 幅 */
.btn--full { width: 100%; }

/* ================================================
   9. COMPONENT: CARD
   ------------------------------------------------
   Figma確認値（Productsカード）:
     カードタイトル: Noto Sans JP Bold / 24px / white
     カード説明文:   Noto Sans JP Bold / 12px / white / line-height 1.6
     オーバーレイ:   rgba(0,0,0,0.3)
     ※プロダクトカードは全面画像+darkオーバーレイ構造。
     ※枠線・シャドウはFigma未確認のため参考値。
================================================ */

:root {
	--card-padding:       var(--space-6);
	--card-bg:            var(--color-bg-base);
	--card-border-radius: var(--radius-lg);
	--card-border-color:  var(--color-border);
	--card-shadow:        var(--shadow-md);
	--card-hover-shadow:  var(--shadow-lg);
	--card-transition:    box-shadow 0.2s ease, transform 0.2s ease;
	--card-overlay:       rgba(0, 0, 0, 0.3); /* Figma確認: プロダクトカードオーバーレイ */
}

.card {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-border-radius);
	overflow: hidden;
}

/* シャドウあり（ボーダーなし）*/
.card--shadow {
	border-color: transparent;
	box-shadow: var(--card-shadow);
}

/* ホバーで浮き上がる */
.card--hover {
	transition: var(--card-transition);
}

.card--hover:hover {
	box-shadow: var(--card-hover-shadow);
	transform: translateY(-2px);
}

.card__thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

.card__body {
	padding: var(--card-padding);
}

.card__label {
	display: inline-block;
	font-size: var(--font-size-xs);         /* 12px */
	font-weight: var(--font-weight-regular);
	color: var(--color-text-primary);
	margin-bottom: var(--space-2);
}

.card__title {
	font-size: var(--font-size-xl);          /* 24px（Figma確認）*/
	font-weight: var(--font-weight-bold);    /* Bold（Figma確認）*/
	line-height: var(--line-height-snug);
	color: var(--color-text-primary);
	margin-bottom: var(--space-2);
}

.card__text {
	font-size: var(--font-size-xs);          /* 12px（Figma確認）*/
	color: var(--color-text-body);
	line-height: var(--line-height-base);    /* 1.6（Figma確認）*/
}

.card__footer {
	padding: var(--space-4) var(--card-padding);
	border-top: 1px solid var(--card-border-color);
}

/* ================================================
   10. COMPONENT: SECTION
   ------------------------------------------------
   Figma確認値:
     セクション英語大見出し: Barlow Bold / 60px / #000000 / leading: normal
     セクションラベル（眉書き）: Noto Sans JP Regular / 12px / #838383 / leading: normal
     セクション日本語サブ見出し: Noto Sans JP Bold / 22px / #000000 / leading: normal
     本文: Noto Sans JP Regular / 16px / #000000 or #1c1c1c / leading: 1.6
     テキスト配置: 左揃え（Figma確認）
     セクションパディング: 約80px（概算・詳細は実装時に調整）

   【見出しクラスの使用方針 (A-4)】
     .section__eyebrow — セクションラベル（12px/#838383）が標準仕様の場合に使用。
     .section__title   — 見出し色が var(--color-text-primary)（黒）の場合はそのまま使用。
                         アクセントカラーなど独自色が必要な場合はセクション固有BEMクラスで上書き。
     .section__sub     — 日本語サブ見出しが標準仕様の場合に使用。
     各セクションで上記クラスを基底とし、差分のみセクション固有スタイルで調整すること。
     Phase 6 News セクションは見出し色が --color-accent のため独自クラスで実装済み（参考例）。
================================================ */

:root {
	--section-padding-y:    var(--space-20); /*  80px（概算）*/
	--section-padding-y-sm: var(--space-12); /*  48px */
	--section-padding-y-lg: var(--space-32); /* 128px */
}

.section {
	padding-block: var(--section-padding-y);
}

.section--sm { padding-block: var(--section-padding-y-sm); }
.section--lg { padding-block: var(--section-padding-y-lg); }

/* 背景バリエーション */
.section--white  { background-color: var(--color-bg-base); }
.section--subtle { background-color: var(--color-bg-subtle); }
.section--dark   {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

/* セクションヘッダー（左揃え・Figma確認）*/
.section__header {
	text-align: left;
	margin-bottom: var(--space-12);
}

/* 眉書き: 日本語ラベル（Figma確認: 12px/Regular/#838383）*/
.section__eyebrow {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);          /* 12px（Figma確認）*/
	font-weight: var(--font-weight-regular); /* Regular（Figma確認）*/
	color: var(--color-text-secondary);      /* #838383（Figma確認）*/
	line-height: normal;
	margin-bottom: var(--space-1);
}

/* 英語大見出し（Figma確認: 60px/Barlow Bold/#000000）*/
.section__title {
	font-family: var(--font-family-heading);  /* Barlow（Figma確認）*/
	font-size: var(--font-size-5xl);          /* 60px（Figma確認）*/
	font-weight: var(--font-weight-bold);     /* Bold（Figma確認）*/
	line-height: normal;                      /* Figma確認: leading-[normal] */
	color: var(--color-text-primary);
	margin-bottom: var(--space-2);
}

.section--dark .section__title {
	color: var(--color-text-inverse);
}

/* 日本語サブ見出し（Figma確認: 22px/Noto Sans JP Bold/#000000）*/
.section__sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-sub); /* 22px（Figma確認）*/
	font-weight: var(--font-weight-bold);    /* Bold（Figma確認）*/
	line-height: normal;
	color: var(--color-text-primary);
	margin-bottom: var(--space-4);
}

.section--dark .section__sub {
	color: var(--color-text-inverse);
}

/* 本文リード（Figma確認: 16px/Regular/left）*/
.section__lead {
	font-size: var(--font-size-base);    /* 16px（Figma確認）*/
	font-weight: var(--font-weight-regular);
	color: var(--color-text-primary);    /* #000000（Figma確認）*/
	line-height: var(--line-height-base); /* 1.6（Figma確認）*/
}

.section--dark .section__lead {
	color: var(--color-neutral-300);
}

/* モバイル: md未満（Figmaモバイルデザイン未提供のため概算）*/
@media (max-width: 767px) {

	.section {
		padding-block: var(--section-padding-y-sm);
	}

	.section--lg {
		padding-block: var(--section-padding-y);
	}

	.section__title {
		font-size: var(--font-size-2xl); /* 32px（モバイル概算）*/
	}

	.section__sub {
		font-size: var(--font-size-lg); /* 20px（モバイル概算）*/
	}
}