/**
 * DIV KSK Theme - サイトスタイル
 *
 * design-system.css のトークンを使いレイアウト・固有スタイルを定義する。
 * ハードコードした値は書かず、必ず CSS 変数を参照すること。
 *
 * Table of Contents:
 *   1. Base / Reset
 *   2. Layout
 *   3. Header
 *   4. Hero
 *  4b. Hero Banner
 *   5. News Section
 *   6. About Section
 *   7. Products Section
 *   8. Verification Section
 *   9. Contact Section
 *  10. Company Section
 *  11. Footer
 *  12. Floating Banner
 *  13. News Single（詳細ページ）
 *  14. News Archive（一覧ページ）
 *  15. 404 Not Found
 *
 * @package DIV_KSK_Theme
 */

/* ================================================
   1. BASE / RESET
================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* スクリーンリーダー・スキップリンク共通ユーティリティ（WCAG 2.4.1 / 2.4.7）*/
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	background-color: var(--color-bg-base);
	border: 2px solid var(--color-primary);
	color: var(--color-text-primary);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	height: auto;
	left: var(--space-4);
	line-height: normal;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	top: var(--space-4);
	width: auto;
	z-index: 200;
}

/* ================================================
   2. LAYOUT
================================================ */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

/* ================================================
   3. HEADER
   ------------------------------------------------
   Figma確認値:
     高さ:         100px
     背景:         #ffffff（bg-white）
     左右パディング: 60px（ロゴが x=60 / ナビ右端が x=1380 = 1440-60）
     ナビ項目間隔:  40px（全区間で一定）
     EN文字:       Barlow Bold / 20px / #000000
     JP文字:       Noto Sans JP Regular / 10px / #838383
     EN↔JP 間隔:   2px
     CTAボタン:    なし（Hero セクション内の要素）
================================================ */

/* --- ヘッダー専用 CSS 変数 ---------------------- */
/* 複数箇所で参照する値を変数化し、変更時の修正漏れを防ぐ。*/
:root {
	--header-height:       6.25rem;   /* 100px — Figma確認 */
	--header-padding-x:    3.75rem;   /* 60px  — Figma確認（ロゴ・ナビ左右余白）*/
	--header-nav-gap:      2.5rem;    /* 40px  — Figma確認（ナビ項目間隔）*/
	--header-nav-link-gap: 0.125rem;  /* 2px   — Figma確認（EN↔JP テキスト間隔）*/
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-bg-base);
}

/* 管理バー表示時: sticky 基準を管理バー下端に補正 */
html.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ヘッダー内のフレックスコンテナ */
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding-inline: var(--header-padding-x);
	max-width: var(--container-default);
	margin-inline: auto;
}

/* --- ロゴ ------------------------------------------ */

.header__logo {
	flex-shrink: 0;
}

/* WordPress が the_custom_logo() で生成するクラス */
.custom-logo-link {
	display: block;
}

/* フォーカスリング共通（ヘッダー内インタラクティブ要素）*/
.custom-logo-link:focus-visible,
.header__logo-link:focus-visible,
.header__menu-link:focus-visible,
.header__hamburger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.custom-logo {
	width: 60px;  /* Figma確認 */
	height: 47px; /* Figma確認。height:auto だと 512×512 PNG が 60×60px で描画されるため明示 */
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ロゴ未設定時のフォールバック（画像リンク）*/
.header__logo-link {
	display: block;
}

/* フォールバックロゴ画像（カスタムロゴ未設定時）*/
.header__logo-default {
	width: 60px;
	height: 47px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* --- グローバルナビゲーション ---------------------- */

.header__nav {
	display: flex;
	align-items: center;
}

.header__menu {
	display: flex;
	align-items: center;
	gap: var(--header-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* メニュー項目リンク */
.header__menu-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--header-nav-link-gap);
	text-decoration: none;
	color: inherit;
}

.header__menu-link:hover .header__menu-en {
	opacity: 0.65;
}

/* 英語ラベル（Figma確認: Barlow Bold / 20px / #000000）*/
.header__menu-en {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);       /* 20px */
	font-weight: var(--font-weight-bold); /* 700 */
	color: var(--color-text-primary);     /* #000000 */
	line-height: normal;
	transition: var(--transition-opacity);
}

@media (prefers-reduced-motion: reduce) {
	.header__menu-en { transition: none; }
}

/* 日本語ラベル（Figma確認: Noto Sans JP Regular / 10px / #838383）
   ※ #838383 のコントラスト比は約3.8:1。
     WCAG AA（小テキスト4.5:1）を下回るが、Figmaデザイン指定値のため維持。
     実装後に再検討を推奨。*/
.header__menu-jp {
	font-family: var(--font-family-base);
	font-size: var(--font-size-2xs);         /* 10px */
	font-weight: var(--font-weight-regular); /* 400 */
	color: var(--color-text-secondary);      /* #838383 */
	line-height: normal;
}

/* カレントページ（アクティブ）*/
.current-menu-item .header__menu-en,
.current-menu-ancestor .header__menu-en,
.current-page-ancestor .header__menu-en {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- ハンバーガーボタン（モバイル用構造）----------- */
/* JS トグル動作（.is-open クラス付与）は別フェーズで実装。*/

.header__hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 1.5rem;    /* 24px */
	height: 1.125rem; /* 18px */
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.header__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-text-primary);
	border-radius: 1px;
}

/* ================================================
   RESPONSIVE: Header / Navigation (≤ 991px)
   2026-07-29 ユーザー提供スマホスクリーンショットを正として実装。
   フルスクリーンオーバーレイ方式（ユーザー確認済み）。
================================================ */

@media (max-width: 991px) {

	/* ヘッダー高さ: SP Figma確認値（PC: 100px → SP: 74px）*/
	:root {
		--header-height: 4.625rem;  /* 74px */
	}

	/* ヘッダー背景: 白（SP Figma確認: bg-white）*/
	.site-header {
		background-color: var(--color-bg-base);
	}

	/* ロゴ: SP Figma確認（白ヘッダー上・フィルターなし / 40×32px）*/
	.site-header .custom-logo,
	.site-header .header__logo-default {
		filter: none;
		width: 2.5rem;   /* 40px: SP Figma確認（PC: 60px）*/
		height: 2rem;    /* 32px: SP Figma確認（PC: 47px）*/
	}

	.header__inner {
		padding-inline-start: var(--space-5);  /* 20px: ロゴ左余白 */
		padding-inline-end: 1.875rem;          /* 30px: SP Figma確認（ハンバーガー右余白）*/
	}

	/* ハンバーガーを表示: SP Figma確認（22×14px）*/
	.header__hamburger {
		display: flex;
		width: 1.375rem;   /* 22px: SP Figma確認（PC: 24px）*/
		height: 0.875rem;  /* 14px: SP Figma確認（PC: 18px）*/
	}

	/* ハンバーガー線: 黒（SP Figma確認: 白ヘッダー上で黒線）*/
	.header__hamburger span {
		background-color: var(--color-text-primary);  /* #000000 */
	}

	/* モバイルナビ: フルスクリーンオーバーレイ（JS で .is-open 付与）*/
	.header__nav {
		display: none;
		position: fixed;
		inset: 0;
		background-color: #1c1c1c;
		overflow-y: auto;
		z-index: 200;
	}

	.header__nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header__menu {
		flex-direction: column;
		align-items: center;
		gap: 2.5rem;  /* 40px */
	}

	.header__menu-link {
		align-items: center;
		gap: var(--space-1);  /* 4px */
	}

	.header__menu-en {
		font-size: 1.5rem;                   /* 24px */
		color: var(--color-text-inverse);    /* #ffffff */
	}

	.header__menu-jp {
		font-size: var(--font-size-xs);      /* 12px */
		color: var(--color-text-muted);      /* #a7a7a7 */
	}

	/* オーバーレイ中: ハンバーガーを前面に固定・X に変形 */
	body.nav-is-open {
		overflow: hidden;
	}

	body.nav-is-open .header__hamburger {
		position: fixed;
		top: calc( (var(--header-height) - 1.125rem) / 2 );
		right: var(--space-5);  /* 20px */
		z-index: 201;
	}

	body.nav-is-open .header__hamburger span {
		background-color: var(--color-text-inverse);  /* #ffffff: 閉じるボタンは白（オーバーレイ背景 #1c1c1c 上）*/
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	body.nav-is-open .header__hamburger span:nth-child(1) {
		transform: rotate(45deg) translate(4.243px, 4.243px);  /* 6px÷√2: × 中心がボタン中央(y=7px)に一致 */
	}

	body.nav-is-open .header__hamburger span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	body.nav-is-open .header__hamburger span:nth-child(3) {
		transform: rotate(-45deg) translate(4.243px, -4.243px);  /* 6px÷√2: 上下対称 */
	}
}

/* ================================================
   4. HERO
   ------------------------------------------------
   Figma確認値（KSK_コーポレートPC フレーム）:
     全体高さ:         570px（ヘッダー100px含む）
     可視エリア高さ:   470px（570 − ヘッダー100px）
     コンテンツ左余白: 100px（--container-padding-wide と一致）
     見出しtop offset: 132px（Figma y=232 − ヘッダー100px）
     見出しフォント:   Noto Sans JP Medium 38px #000000 / line-height 1.3
     リードフォント:   Noto Sans JP Regular 16px #000000 / line-height 1.6
     CTAボタン:        230×50px / bg #000000 / テキスト Noto Bold 16px #ffffff
================================================ */

/* --- Hero専用 CSS 変数 ---------------------- */
/*
 * --hero-height / --hero-content-pt は --header-height に calc() で連動させる。
 * ヘッダー高さ（--header-height）を変更するだけで Hero の寸法も自動追従する。
 *   Figma全高 570px = 35.625rem
 *   Figma見出し y=232px = 14.5rem
 */
:root {
	--hero-total-height:     35.625rem;  /* 570px（ヘッダー含む全高: Figma確認）*/
	--hero-heading-y:        14.5rem;    /* 232px（Figma見出し y 座標）*/
	--hero-height:           calc( var(--hero-total-height) - var(--header-height) ); /* 470px */
	--hero-content-pt:       calc( var(--hero-heading-y)    - var(--header-height) ); /* 132px */
	--hero-heading-lead-gap: 0.875rem;   /* 14px（Figma確認: 見出し↓リード間隔）*/
	--hero-lead-cta-gap:     1.625rem;   /* 26px（Figma確認: リード↓CTA間隔）*/
	--hero-cta-width:        14.375rem;  /* 230px（Figma確認: CTAボタン幅）*/
	--hero-cta-height:        3.125rem;  /* 50px（Figma確認: CTAボタン高さ）*/
	--hero-cta-bg:           #ee7921;    /* Figma確認: CTAオレンジ（--color-primary は変更しない）*/
	--hero-cta-radius:       0.5rem;     /* 8px（Figma確認: CTAボタン角丸）*/
}

/* Heroセクション外枠 */
.hero {
	position: relative;
	height: var(--hero-height);
	overflow: hidden;
}

/* 背景画像レイヤー */
.hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * object-position: center — 新背景画像（1024×498px）は縦横比 2.06:1。
 * 1440px幅に引き伸ばすと699pxになるため、中央クロップで
 * 上下均等にトリムし工場全景を最適表示する。
 */
.hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* コンテンツレイヤー */
.hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--hero-content-pt);
	padding-inline: var(--container-padding-wide); /* 100px — --space-25 と共有 */
	max-width: var(--container-default);
	margin-inline: auto;
}

/* 見出し（Figma: Noto Sans JP Medium 38px #ffffff line-height 1.3）*/
.hero__heading {
	font-family: var(--font-family-base);
	font-size: var(--font-size-3xl);        /* 38px */
	font-weight: var(--font-weight-medium); /* 500 */
	color: var(--color-text-inverse);       /* #ffffff（旧: #000000 → 暗背景に合わせ白に変更）*/
	line-height: 1.3; /* Figma確認値。--line-height-snug(1.4)は非一致のため直値 */
	margin-bottom: var(--hero-heading-lead-gap);
}

/* リードテキスト（Figma: Noto Sans JP Regular 16px #ffffff line-height 1.6）*/
.hero__lead {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);        /* 16px */
	font-weight: var(--font-weight-regular); /* 400 */
	color: var(--color-text-inverse);        /* #ffffff（旧: #000000 → 暗背景に合わせ白に変更）*/
	line-height: var(--line-height-base);    /* 1.6 */
	margin-bottom: var(--hero-lead-cta-gap);
}

/* CTAボタン（Figma: 230×50px / bg #ee7921 / 角丸8px / テキスト Bold 14px #ffffff / 矢印右配置）*/
.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;          /* 旧: center → テキスト左/矢印右 */
	width: var(--hero-cta-width);            /* 230px */
	height: var(--hero-cta-height);          /* 50px */
	padding-inline: 1.5rem;                  /* 内側余白（矢印レイアウト用）*/
	background-color: var(--hero-cta-bg);    /* #ee7921（旧: #000000）*/
	border-radius: var(--hero-cta-radius);   /* 8px（旧: なし）*/
	color: var(--color-text-inverse);        /* #ffffff */
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);          /* 14px（旧: 16px）*/
	font-weight: var(--font-weight-bold);    /* 700 */
	line-height: var(--line-height-base);    /* 1.6 */
	text-decoration: none;
	transition: var(--transition-opacity);
}

.hero__cta:hover {
	opacity: 0.75;
}

.hero__cta:focus-visible {
	outline: 2px solid var(--color-text-inverse);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.hero__cta {
		transition: none;
	}
}

/* ================================================
   RESPONSIVE: Hero Section (≤ 991px)
================================================ */

@media (max-width: 991px) {

	.hero {
		height: 27.875rem;  /* 446px: SP Figma確認（hero bg 520px − header 74px）*/
	}

	.hero__content {
		padding-inline: var(--space-5);  /* 20px */
		padding-top: 8.6875rem;          /* 139px: Figma heading y=213 − header 74px */
	}

	.hero__heading {
		font-size: 1.75rem;  /* 28px: SP Figma確認 */
	}

	.hero__lead {
		font-size: var(--font-size-xs);  /* 12px: SP Figma確認 */
	}

	.hero__cta {
		width: 100%;
	}
}

/* ================================================
   4b. HERO BANNER
================================================ */

:root {
	--hero-banner-pt: 3.5rem;      /* 56px: ヒーロー下端→バナー上端 (Figma y=626-570) */
	--hero-banner-pb: 7.0625rem;   /* 113px: バナー下端→News上端 (Figma y=839-726) */
	--hero-banner-w:  37.5rem;     /* 600px: Figma確認 */
}

.hero-banner {
	padding-block-start: var(--hero-banner-pt);
	padding-block-end:   var(--hero-banner-pb);
	display: flex;
	justify-content: center;
}

.hero-banner__link {
	display: block;
	transition: var(--transition-opacity);
}

@media (prefers-reduced-motion: reduce) {
	.hero-banner__link { transition: none; }
}

.hero-banner__link:hover,
.hero-banner__link:focus-visible {
	opacity: 0.85;
}

.hero-banner__img {
	display: block;
	width: var(--hero-banner-w);
	height: auto;
	max-width: 100%;
}

@media (max-width: 991px) {
	.hero-banner {
		padding-block-start: 2.5rem;          /* 40px: SP Figma確認（hero下端520px→bnr開始560px）*/
		padding-block-end: 0;
		padding-inline: var(--space-5);       /* 20px */
	}
	.hero-banner__link {
		width: 100%;  /* フレックスアイテム幅を明示し img の 100% 基準を確定 */
	}
	.hero-banner__img {
		width: 100%;
	}
}

/* ================================================
   5. NEWS SECTION
================================================ */

/* --- CSS 変数 --- */
:root {
	--news-pt:            0rem;        /* バナーセクションが上余白を担うため 0 */
	--news-pb:            12.8125rem;  /* 205px: セクション終端〜About Us開始（隣接実装後に見直し）*/
	--news-heading-size:  var(--font-size-5xl);  /* 60px */
	--news-item-date-mb:  0.875rem;    /* 14px: 日付下端〜タイトル上端 */
	--news-item-pb:       2.0625rem;   /* 33px: タイトル下端〜区切り線 */
	--news-item-mb:       1.8125rem;   /* 29px: 区切り線〜次の日付上端 */
	--news-more-mt:       2.4375rem;   /* 39px: 最終区切り線〜ニュースを見るボタン */
	--news-more-circle:   3.125rem;    /* 50px: ニュースを見るボタン円径 */
}

/* --- セクション全体 --- */
.news {
	padding-block-start: var(--news-pt);
	padding-block-end: var(--news-pb);
	padding-inline: var(--container-padding-wide);
	max-width: var(--container-default);
	margin-inline: auto;
	scroll-margin-top: var(--header-height);  /* 固定ヘッダーに隠れないようスクロール余白を確保 */
}

/* --- 2カラムグリッド --- */
.news__inner {
	display: grid;
	grid-template-columns: 27.5rem 1fr;  /* 440px / 800px */
	align-items: start;
}

/* === 見出しカラム === */
.news__label {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);       /* 12px */
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);   /* #838383 */
	line-height: 1;
	margin-bottom: 0;
}

.news__heading {
	font-family: var(--font-family-heading);  /* Barlow */
	font-size: var(--news-heading-size);       /* 60px */
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);               /* #f4812c */
	line-height: 1.2;
	margin-top: 0.375rem;   /* 6px: ラベル下端〜見出し上端 */
	margin-bottom: 0;
}

/* === Newsリストカラム === */
.news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-block-start: 0.5rem;  /* 8px: カラム上端〜最初の日付 */
}

.news__item {
	padding-block-end: var(--news-item-pb);       /* 33px: タイトル下端〜区切り線 */
	border-bottom: 1px dashed var(--color-text-muted);  /* #a7a7a7 */
	margin-bottom: var(--news-item-mb);            /* 29px: 区切り線〜次の日付 */
}

.news__item:last-child {
	margin-bottom: 0;
}

.news__date {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);         /* 14px */
	font-weight: var(--font-weight-regular);
	color: var(--color-text-body);          /* #1c1c1c */
	line-height: 1;
	margin-bottom: var(--news-item-date-mb);  /* 14px: 日付下端〜タイトル上端 */
}

.news__title-link {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);    /* 16px */
	font-weight: var(--font-weight-bold);
	color: var(--color-text-body);       /* #1c1c1c */
	line-height: 1.5;
	text-decoration: none;
	transition: var(--transition-opacity);
}

@media (prefers-reduced-motion: reduce) {
	.news__title-link { transition: none; }
}

.news__title-link:hover,
.news__title-link:focus-visible {
	text-decoration: underline;
	opacity: 0.75;
}

/* --- ニュースを見るボタン --- */
.news__more {
	display: flex;
	align-items: center;
	gap: var(--space-5);  /* 20px: 円〜テキスト */
	margin-block-start: var(--news-more-mt);
	text-decoration: none;
	transition: var(--transition-opacity);
}

@media (prefers-reduced-motion: reduce) {
	.news__more { transition: none; }
}

.news__more:hover,
.news__more:focus-visible {
	opacity: 0.75;
}

.news__more-circle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--news-more-circle);
	height: var(--news-more-circle);
	border-radius: 50%;
	background-color: var(--color-bg-base);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	color: var(--color-text-primary);  /* arrow color via currentColor */
}

.news__more-text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);    /* 16px */
	font-weight: var(--font-weight-bold);
	color: var(--color-text-body);       /* #1c1c1c */
	line-height: 1;
}

/* --- 投稿なしメッセージ --- */
.news__empty {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
	padding-block-start: 0.5rem;
}

/* ================================================
   RESPONSIVE: News Section (≤ 991px)
================================================ */

@media (max-width: 991px) {

	.news {
		padding-block-start: 3.75rem;    /* 60px: SP Figma確認（bnr下端616px→eyebrow676px）*/
		padding-block-end: 2.5rem;       /* 40px */
		padding-inline: var(--space-5);  /* 20px */
	}

	.news__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;                     /* 24px */
	}

	.news__label {
		font-size: var(--font-size-2xs);     /* 10px: SP Figma確認（PC: 12px Regular グレー）*/
		font-weight: var(--font-weight-bold);
		color: var(--color-text-primary);    /* 黒: SP Figma確認 */
		text-align: center;
	}

	.news__heading {
		font-size: 2.5rem;    /* 40px: SP Figma確認（PC: 60px）*/
		text-align: center;
	}

	.news__date {
		font-size: var(--font-size-xs);  /* 12px: SP Figma確認（PC: 14px）*/
	}

	.news__title-link {
		font-size: var(--font-size-xs);  /* 12px: SP Figma確認 */
	}

	.news__item {
		padding-block-end: 1.125rem;  /* 18px */
		margin-bottom: 1rem;          /* 16px */
	}

	.news__more {
		margin-block-start: 1.25rem;  /* 20px */
	}

	.news__more-circle {
		width: 1.875rem;   /* 30px: SP Figma確認（PC: 50px）*/
		height: 1.875rem;
	}

	.news__more-text {
		font-size: var(--font-size-2xs);  /* 10px: SP Figma確認 */
	}
}

/* ================================================
   6. ABOUT SECTION
   ------------------------------------------------
   Figma確認値（ノード参照: 77:130）:
     セクション   1440×491px
     背景         上131px: #ffffff / 下360px: #f7f7f7
     レイアウト   2カラム 50% / 50%（テキスト / 画像）
     eyebrow      12px / Regular / #838383 / section top+31px
     heading      Barlow Bold / 60px / #ee7921 / section top+38px
     sub-bar      bg #000000 / 550×40px / section top+182px / text-start 35px
     sub-text     Noto Sans JP Bold / 20px / #ee7921
     body         16px / Regular / #000000 / line-height:1.6 / section top+229px
     image        720×398px / box-shadow: 0 0 24px rgba(0,0,0,0.12)
================================================ */

/* --- CSS 変数 --- */
:root {
	--about-white-height:    8.1875rem;  /* 131px: 白エリア高さ（Figma確認）*/
	--about-pt:              1.9375rem;  /* 31px: セクション上端→eyebrow上端（Figma確認）*/
	--about-pb:              6.625rem;   /* 106px: 本文下端→セクション下端（Figma確認）*/
	--about-heading-mt:      0.4375rem;  /* 7px: eyebrow上端→heading上端の差（Figma確認）*/
	--about-sub-bar-h:       2.5rem;     /* 40px: サブ見出しバー高さ（Figma確認）*/
	--about-sub-bar-w:       34.375rem;  /* 550px: サブ見出しバー幅（Figma確認）*/
	--about-sub-bar-ps:      2.1875rem;  /* 35px: バー内テキスト開始位置（Figma確認: text x=35）*/
	--about-heading-sub-gap: 4.5rem;     /* 72px: heading下端→サブバー上端（Figma確認）*/
	--about-sub-body-gap:    var(--space-2); /* 8px: サブバー下端→本文上端（Figma: 7px 近似）*/
	--about-image-h:         24.875rem;  /* 398px: 画像高さ（Figma確認）*/
	--about-heading-color:   #ee7921;    /* Figma確認: About us見出し色（Hero CTAと同色）*/
}

/* --- セクション --- */
.about {
	/* 2分割背景: 上 white 131px / 下 #f7f7f7 360px（Figma確認）*/
	background-image: linear-gradient(
		to bottom,
		var(--color-bg-base)   var(--about-white-height),
		var(--color-bg-subtle) var(--about-white-height)
	);
	/* 固定Headerに隠れないようスクロール余白を確保（--header-height: 100px）*/
	scroll-margin-top: var(--header-height);
	/* Figma: Aboutフレーム下端〜Productsフレーム上端 100px 白ギャップ */
	margin-bottom: 6.25rem;
}

/* --- 2カラムグリッド --- */
.about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;  /* 50% / 50%（Figma確認: 720px / 720px）*/
	max-width: var(--container-default);  /* 1440px */
	margin-inline: auto;
}

/* === テキストカラム === */
.about__content {
	padding-block-start: var(--about-pt);   /* 31px */
	padding-block-end: var(--about-pb);     /* 106px */
	padding-inline-start: var(--container-padding-wide);  /* 100px（Figma確認）*/
	padding-inline-end: var(--space-8);     /* 32px: 右余白（概算）*/
}

/* 眉書き（Figma確認: 12px / Regular / #838383）*/
.about__eyebrow {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);          /* 12px */
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);      /* #838383 */
	line-height: normal;
	margin-bottom: 0;
}

/* 英語大見出し（Figma確認: Barlow Bold / 60px / #ee7921）*/
.about__heading {
	font-family: var(--font-family-heading);  /* Barlow */
	font-size: var(--font-size-5xl);          /* 60px */
	font-weight: var(--font-weight-bold);     /* 700 */
	color: var(--about-heading-color);        /* #ee7921 */
	line-height: normal;
	/* eyebrow と heading が Figma上で7px 重なるパターン（News と同様）*/
	margin-top: var(--about-heading-mt);      /* 7px */
	margin-bottom: var(--about-heading-sub-gap);  /* 72px: heading下端→サブバー */
}

/* サブ見出しバー（Figma確認: bg #000000 / 550×40px）*/
.about__sub-bar {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--about-sub-bar-w);       /* 550px */
	height: var(--about-sub-bar-h);          /* 40px */
	background-color: var(--color-primary);  /* #000000 */
	padding-inline-start: var(--about-sub-bar-ps);  /* 35px */
	padding-inline-end: var(--space-4);      /* 16px */
	margin-bottom: var(--about-sub-body-gap); /* 8px */
}

/* サブ見出しテキスト（Figma確認: Noto Sans JP Bold / 20px / #ee7921）*/
.about__sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);          /* 20px */
	font-weight: var(--font-weight-bold);    /* 700 */
	color: var(--about-heading-color);       /* #ee7921 */
	line-height: normal;
	white-space: nowrap;
}

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

/* 段落間余白なし（Figma確認: mb-0）*/
.about__body p {
	margin: 0;
}

/* === 画像カラム === */
.about__media {
	overflow: hidden;
}

/* 画像（Figma確認: 720×398px / box-shadow: 0 0 24px rgba(0,0,0,0.12)）*/
.about__image {
	width: 100%;
	height: var(--about-image-h);  /* 398px */
	object-fit: cover;
	object-position: center;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
	display: block;
}

/* ================================================
   RESPONSIVE: About Section (≤ 991px)
   2026-07-29 ユーザー提供スマホスクリーンショットを正として実装。
================================================ */

@media (max-width: 991px) {

	.about {
		background-image: none;
		background-color: var(--color-bg-subtle);  /* #f7f7f7 */
		margin-bottom: 0;
		padding-block-end: 6.375rem;  /* 102px: SP Figma確認（About画像下端1655px→Products背景1757px）*/
	}

	.about__inner {
		grid-template-columns: 1fr;
	}

	.about__content {
		padding-block-start: var(--space-10);  /* 40px */
		padding-block-end: var(--space-10);    /* 40px */
		padding-inline: var(--space-5);        /* 20px */
	}

	.about__eyebrow {
		font-size: var(--font-size-2xs);     /* 10px: SP Figma確認（PC: 12px Regular グレー）*/
		font-weight: var(--font-weight-bold);
		color: var(--color-text-primary);    /* 黒: SP Figma確認 */
	}

	.about__heading {
		font-size: 2.5rem;       /* 40px: SP Figma確認（PC: 60px）*/
		margin-bottom: 1.25rem;  /* 20px: SP Figma確認（heading下端1230px→subbar1250px）*/
	}

	.about__sub-bar {
		width: 20rem;                          /* 320px: SP Figma確認（PC: 550px）*/
		max-width: 100%;
		height: auto;                          /* テキスト折り返し時のクリップ解消 */
		min-height: var(--about-sub-bar-h);   /* 40px 最小高さ */
		padding-inline-start: var(--space-4);  /* 16px */
		margin-bottom: 1.25rem;               /* 20px: SP Figma確認（subbar下端1290px→body1310px）*/
	}

	.about__sub {
		font-size: var(--font-size-xs);  /* 12px: SP Figma確認（PC: 20px）*/
		white-space: normal;
	}

	.about__body {
		font-size: 0.6875rem;                     /* 11px: SP Figma確認（PC: 16px）*/
		line-height: var(--line-height-relaxed);  /* 1.8: SP Figma確認 */
	}

	.about__media {
		padding-inline: var(--space-5);  /* 20px: SP Figma確認（node 337:437 left=20px, w=335px）*/
		border-radius: 0.625rem;  /* 10px: SP Figma確認 */
	}

	.about__image {
		width: 100%;
		height: 11.5625rem;       /* 185px: SP Figma確認（PC: 398px）*/
		object-fit: cover;
		border-radius: 0.625rem;  /* 10px: SP Figma確認 */
	}
}

/* ================================================
   7. PRODUCTS SECTION
   ------------------------------------------------
   Figma確認値（ノード参照: 77:129）:
     セクション   1440×800px / white + bg img opacity 20%
     eyebrow      12px Regular #838383 / section top+114px
     heading      Barlow Bold 60px #ee7921 / section top+121px
     sub          Noto Sans JP Bold 22px #000000 / section top+226px
     grid         4 × 360×300px、gap:0 / section top+302px
     card-title   Noto Sans JP Bold 24px white / center
     card-text    Noto Sans JP Bold 12px white / center / line-height 1.6
     overlay      rgba(0,0,0,0.3) / shadow: 0 0 24px rgba(0,0,0,0.06)
     more-circle  50×50px / section top+649px
     more-text    Bold 16px #1c1c1c / x=170px（circle right+20px）
================================================ */

:root {
	--products-pt:               7.125rem;  /* 114px: section top → eyebrow */
	--products-heading-mt:       0.4375rem; /* 7px: eyebrow-heading offset */
	--products-heading-sub-gap:  2.0625rem; /* 33px: heading bottom → sub */
	--products-sub-cards-gap:    3.125rem;  /* 50px: sub bottom → cards */
	--products-cards-more-gap:   2.9375rem; /* 47px: cards bottom → more circle */
	--products-pb:               6.3125rem; /* 101px: more circle bottom → section end */
	--products-card-h:           18.75rem;  /* 300px */
	--products-more-circle:      3.125rem;  /* 50px */
	--products-heading-color:    #ee7921;
	--products-card-overlay:     rgba(0, 0, 0, 0.3);
	--products-card-shadow:      0 0 24px rgba(0, 0, 0, 0.06);
	--products-bg-opacity:       0.2;
}

/* --- セクション --- */
.products {
	position: relative;
	background-color: var(--color-bg-base);
	overflow: hidden;
	scroll-margin-top: var(--header-height);
}

/* --- 背景画像（opacity 20%）--- */
.products__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.products__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: var(--products-bg-opacity);
	display: block;
}

/* --- ヘッダーエリア --- */
.products__header {
	position: relative;
	padding-block-start: var(--products-pt);
	padding-inline: var(--container-padding-wide);
	max-width: var(--container-default);
	margin-inline: auto;
	margin-block-end: var(--products-sub-cards-gap);
}

/* 眉書き（Figma: 12px Regular #838383）*/
.products__eyebrow {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
	line-height: normal;
}

/* 英語大見出し（Figma: Barlow Bold 60px #ee7921）*/
.products__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	color: var(--products-heading-color);
	line-height: normal;
	margin-top: var(--products-heading-mt);
	margin-bottom: var(--products-heading-sub-gap);
}

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

/* --- カードグリッド（4 × 360×300px、gap:0）--- */
.products__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- カード --- */
.products__card {
	position: relative;
	height: var(--products-card-h);
	overflow: hidden;
}

/* カード背景画像 */
.products__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ダークオーバーレイ（Figma: rgba(0,0,0,0.3) / shadow 0 0 24px rgba(0,0,0,0.06)）*/
.products__card-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--products-card-overlay);
	box-shadow: var(--products-card-shadow);
}

/* テキストエリア（中央配置）*/
.products__card-body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-6);
	text-align: center;
}

/* カードタイトル（Figma: Noto Sans JP Bold 24px white）*/
.products__card-title {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	line-height: normal;
	margin-bottom: var(--space-2);
}

/* カード説明文（Figma: Noto Sans JP Bold 12px white line-height 1.6）*/
.products__card-text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	line-height: var(--line-height-base);
	margin: 0;
}

/* --- 詳しく見るリンク --- */
.products__more-wrap {
	position: relative;
	padding-inline-start: var(--container-padding-wide);
	max-width: var(--container-default);
	margin-inline: auto;
	margin-block-start: var(--products-cards-more-gap);
	padding-block-end: var(--products-pb);
}

.products__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	text-decoration: none;
	transition: var(--transition-opacity);
}

@media (prefers-reduced-motion: reduce) {
	.products__more { transition: none; }
}

.products__more:hover,
.products__more:focus-visible {
	opacity: 0.75;
}

/* 丸ボタン（Figma: 50×50px / white / shadow）*/
.products__more-circle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--products-more-circle);
	height: var(--products-more-circle);
	border-radius: 50%;
	background-color: var(--color-bg-base);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	color: var(--color-text-primary);
}

/* ボタンテキスト（Figma: Bold 16px #1c1c1c）*/
.products__more-text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-body);
	line-height: 1;
}

/* ================================================
   RESPONSIVE: Products Section (≤ 991px)
   2026-07-29 ユーザー提供スマホスクリーンショットを正として実装。
================================================ */

@media (max-width: 991px) {

	.products__header {
		padding-block-start: 3.75rem;    /* 60px: SP Figma確認（Products背景1757px→eyebrow1817px）*/
		padding-inline: var(--space-5);  /* 20px */
		margin-block-end: 1.25rem;       /* 20px: SP Figma確認（sub下端1905px→第1カード1925px）*/
	}

	.products__eyebrow {
		font-size: var(--font-size-2xs);     /* 10px: SP Figma確認（PC: 12px Regular グレー）*/
		font-weight: var(--font-weight-bold);
		color: var(--color-text-primary);    /* 黒: SP Figma確認 */
	}

	.products__heading {
		font-size: 2.5rem;       /* 40px: SP Figma確認（PC: 60px）*/
		margin-bottom: 0.625rem; /* 10px: SP Figma確認（heading下端1881px→sub1891px）*/
	}

	.products__sub {
		font-size: var(--font-size-xs);  /* 12px: SP Figma確認（PC: 22px）*/
	}

	.products__grid {
		grid-template-columns: 1fr;       /* 1列: SP Figma確認（PC: 4列）*/
		padding-inline: var(--space-5);   /* 20px: SP Figma確認（overlay left=20px, w=335px）*/
	}

	.products__card {
		height: 11.25rem;  /* 180px: SP Figma確認（PC: 300px）*/
	}

	.products__card-title {
		font-size: var(--font-size-base);  /* 16px: SP Figma確認（PC: 24px）*/
	}

	.products__card-text {
		font-size: var(--font-size-2xs);  /* 10px: SP Figma確認（PC: 12px）*/
	}

	.products__more-wrap {
		padding-inline-start: var(--space-5);  /* 20px */
		padding-block-end: 2.5rem;             /* 40px */
	}

	.products__more-circle {
		width: 1.875rem;   /* 30px: SP Figma確認（PC: 50px）*/
		height: 1.875rem;
	}

	.products__more-text {
		font-size: var(--font-size-2xs);  /* 10px: SP Figma確認（PC: 16px）*/
	}
}

/* ================================================
   8. VERIFICATION SECTION
   ------------------------------------------------
   Figma確認値（ノード参照: 77:132）:
     セクション   x=100, y=3002, w=1240, h=940 / white背景
     eyebrow      12px Regular #838383 / section top=0px
     heading      Barlow Bold 60px #ee7921 / section top+7px
     sub-bar      260×40px / bg:#000000 / text Bold 20px #ee7921 / left-padding 20px
     body         16px Regular #000000 / line-height:1.6
     table card   1240×680px / bg:#f5f5f5 / border-radius:20px / shadow:0 4px 18px rgba(0,0,0,0.14)
     card title   "Before / After 比較" Barlow Bold 40px / #000000 / centered
     Before列     520×50px / bg:#9c9c9c "不熱処理前" Bold 20px white / border-radius:8px
     After列      520×50px / bg:#397bff "不熱処理後" Bold 20px white / border-radius:8px
     col gap      80px / row images: 280×129px / border-radius:8px
     label main   Noto Sans JP Bold 20px #000000
     label sub    Noto Sans JP Regular 16px #000000
================================================ */

:root {
	--verification-pt:               10rem;      /* 160px: Products下端〜eyebrow (Figma確認) */
	--verification-heading-mt:       0.4375rem;  /* 7px: eyebrow-heading offset (Figma確認) */
	--verification-sub-bar-mt:       2rem;       /* 32px: heading下端〜sub-bar上端 (Figma確認) */
	--verification-sub-bar-w:        16.25rem;   /* 260px (Figma確認) */
	--verification-sub-bar-h:        2.5rem;     /* 40px (Figma確認) */
	--verification-body-mt:          0.4375rem;  /* 7px: sub-bar下端〜body (Figma確認) */
	--verification-card-mt:          3.125rem;   /* 50px: body下端〜card上端 (Figma確認) */
	--verification-card-bg:          #f5f5f5;    /* (Figma確認) */
	--verification-card-br:          1.25rem;    /* 20px (Figma確認) */
	--verification-card-shadow:      0px 4px 18px 0px rgba(0, 0, 0, 0.14); /* (Figma確認) */
	--verification-card-pt:          3.3125rem;  /* 53px: card上端〜title (Figma確認) */
	--verification-card-px:          3.75rem;    /* 60px: card横padding (Figma確認) */
	--verification-card-pb:          4.4375rem;  /* 71px: grid下端〜card下端 (Figma確認) */
	--verification-card-title-size:  2.5rem;     /* 40px: Figma確認（汎用トークン未定義）*/
	--verification-title-mb:         2.375rem;   /* 38px: title〜比較グリッド (Figma確認) */
	--verification-heading-color:    #ee7921;
}

/* --- セクション --- */
.verification {
	scroll-margin-top: var(--header-height);
}

/* --- 内側コンテナ（Figma: x=100, w=1240 ≒ padding 100px）--- */
.verification__inner {
	padding-block-start: var(--verification-pt);
	padding-block-end: var(--verification-pt);   /* 10rem=160px: Contact開始までの下余白（Figma確認）*/
	padding-inline: var(--container-padding-wide);
	max-width: var(--container-default);
	margin-inline: auto;
}

/* 眉書き（Figma: 12px Regular #838383）*/
.verification__eyebrow {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
	line-height: normal;
}

/* 英語大見出し（Figma: Barlow Bold 60px #ee7921）*/
.verification__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	color: var(--verification-heading-color);
	line-height: normal;
	margin-top: var(--verification-heading-mt);
	margin-bottom: var(--verification-sub-bar-mt);
}

/* サブ見出しバー（Figma: 260×40px / bg #000000 / text left-padding 20px）*/
.verification__sub-bar {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--verification-sub-bar-w);
	height: var(--verification-sub-bar-h);
	background-color: var(--color-primary);
	padding-inline-start: var(--space-5);
	padding-inline-end: var(--space-4);
	margin-bottom: var(--verification-body-mt);
}

/* サブ見出しテキスト（Figma: Noto Sans JP Bold 20px #ee7921）*/
.verification__sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--verification-heading-color);
	line-height: normal;
	white-space: nowrap;
}

/* 本文（Figma: 16px Regular #000000 / line-height:1.6）*/
.verification__body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-primary);
	line-height: var(--line-height-base);
}

.verification__body p {
	margin: 0;
}

/* --- テーブルカード（Figma: 1240×680px / bg #f5f5f5 / border-radius 20px）--- */
.verification__card {
	margin-block-start: var(--verification-card-mt);
	background-color: var(--verification-card-bg);
	border-radius: var(--verification-card-br);
	box-shadow: var(--verification-card-shadow);
	padding-block-start: var(--verification-card-pt);
	padding-inline: var(--verification-card-px);
	padding-block-end: var(--verification-card-pb);
}

/* カードタイトル（Figma: Barlow Bold 40px #000000 centered）*/
.verification__card-title {
	font-family: var(--font-family-heading);
	font-size: var(--verification-card-title-size);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	line-height: normal;
	text-align: center;
	margin-bottom: var(--verification-title-mb);
}

/* 比較表画像ラッパー（PC: 上下左右40px白余白 / ユーザー指定）*/
.verification__img-scroll {
	background-color: #ffffff;
	padding: 2.5rem;  /* 40px */
}

/* 比較表画像（Figmaから書き出した 1120×468px PNG）*/
.verification__comparison-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ================================================
   RESPONSIVE: Verification Section (≤ 991px)
   比較表画像を 1120px 固定表示し、カードを横スクロール可能にして視認性を確保。
================================================ */

@media (max-width: 991px) {

	.verification__inner {
		padding-inline: var(--space-5);         /* 20px */
		padding-block-start: var(--space-16);   /* 64px */
		padding-block-end: 5.6875rem;           /* 91px: SP Figma確認（f5f5f5下端→Contact開始 3517-3426=91px）*/
	}

	.verification__eyebrow {
		font-size: var(--font-size-2xs);     /* 10px: SP Figma確認（PC: 12px Regular グレー）*/
		font-weight: var(--font-weight-bold);
		color: var(--color-text-primary);    /* 黒: SP Figma確認 */
	}

	.verification__heading {
		font-size: 2.5rem;       /* 40px: SP Figma確認（PC: 60px）*/
		margin-bottom: 1.25rem;  /* 20px: SP Figma確認（heading下端2907px→subbar2927px）*/
	}

	.verification__sub-bar {
		width: 10rem;              /* 160px: SP Figma確認（PC: 260px）*/
		max-width: 100%;
		height: var(--verification-sub-bar-h);  /* 40px */
		justify-content: center;   /* SP Figma確認：left-[calc(50%-66px)]→左右対称（14px each）*/
		padding-inline: 0;         /* PC の padding-inline-start 20px を上書き */
	}

	.verification__sub {
		font-size: var(--font-size-xs);  /* 12px: SP Figma確認（PC: 20px）*/
	}

	.verification__body {
		font-size: 0.6875rem;                     /* 11px: SP Figma確認（PC: 16px）*/
		line-height: var(--line-height-relaxed);  /* 1.8: SP Figma確認 */
	}

	.verification__card {
		margin-inline: calc(-1 * var(--space-5));  /* inner padding 突破→全幅（Figma: left-0 w-[375px]）*/
		padding-inline: var(--space-5);            /* 20px: 画像を画面左端から20pxに揃える */
		padding-block-start: var(--space-6);       /* 24px */
		padding-block-end: 2.5rem;                 /* 40px: SP Figma確認（画像下端3386→f5f5f5下端3426）*/
		border-radius: 0;                          /* 全幅カードに角丸不要 */
		box-shadow: none;                          /* SP: シャドウなし */
	}

	.verification__card-title {
		font-size: 1.375rem;             /* 22px: SP Figma確認（Barlow Bold）*/
		margin-bottom: var(--space-5);   /* 20px: SP Figma確認（PC値38px → タイトル〜画像間を修正）*/
	}

	/* 横スクロール + 上下20px白余白 */
	.verification__img-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #ffffff;
		padding: var(--space-5);  /* 20px 全方向: ユーザー指定 */
		border-radius: 0;
	}

	/* SP向け幅622px固定（高さ260px: +30px、1120:468比率維持）*/
	.verification__comparison-img {
		width: 622px;
		max-width: none;
	}
}

/* ================================================
   9. CONTACT SECTION
================================================ */

/* --- CSS 変数 --- */
:root {
	--contact-h:           27.5rem;     /* 440px */
	--contact-pt:           4.625rem;   /* 74px: eyebrow top from section top */
	--contact-heading-mt:  -0.75rem;   /* -12px: Figma絶対座標 81px→ eyebrow bottom(93px)との差分 */
	--contact-sub-fs:       1.375rem;   /* 22px: Figma確認（--font-size-2xl=32pxは誤） */
	--contact-sub-mt:       0.5rem;     /* 8px: Figma top 185px - heading bottom 177px（Barlow line-height実測96px）*/
	--contact-body-mt:      0.75rem;    /* 12px: Figma top 232px - sub bottom 220px */
	--contact-cta-mt:       1.9375rem;  /* 31px: Figma top 314px - body bottom 283px */
	--contact-cta-w:       14.375rem;   /* 230px */
	--contact-cta-h:        3.125rem;   /* 50px */
	--contact-cta-br:       0.5rem;     /* 8px */
	--contact-heading-color: #ee7921;
	--contact-cta-bg:       #ee7921;
	--contact-cta-fs:       0.875rem;   /* 14px */
	--contact-overlay:      rgba(0, 0, 0, 0.5);
}

/* セクション: 440px固定高 / 背景画像 + オーバーレイ */
.contact {
	position: relative;
	height: var(--contact-h);
	overflow: hidden;
	scroll-margin-top: var(--header-height);
}

/* 背景画像 */
.contact__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.contact__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 暗オーバーレイ rgba(0,0,0,0.5) */
.contact__overlay {
	position: absolute;
	inset: 0;
	background: var(--contact-overlay);
	z-index: 1;
}

/* コンテンツラッパー: 左右100px余白 / Figma x=100px に対応 */
.contact__inner {
	position: relative;
	z-index: 2;
	padding-inline: var(--container-padding-wide);
	padding-top: var(--contact-pt);
}

/* eyebrow: Noto Sans JP Regular 12px / white */
.contact__eyebrow {
	font-family: var(--font-noto-sans-jp);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-inverse);
	line-height: var(--line-height-normal);
	margin: 0;
}

/* heading: Barlow Bold 60px / #ee7921 */
.contact__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	color: var(--contact-heading-color);
	line-height: var(--line-height-normal);
	margin-top: var(--contact-heading-mt);
}

/* sub-heading: Noto Sans JP Bold 22px / white */
.contact__sub {
	font-family: var(--font-noto-sans-jp);
	font-size: var(--contact-sub-fs);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	line-height: var(--line-height-normal);
	margin-top: var(--contact-sub-mt);
}

/* body: Noto Sans JP Regular 16px / white / line-height 1.6 */
.contact__body {
	margin-top: var(--contact-body-mt);
}

.contact__body p {
	font-family: var(--font-noto-sans-jp);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-inverse);
	line-height: var(--line-height-base);
	margin: 0;
}

/* CTA ボタン: 230×50px / bg #ee7921 / border-radius 8px */
.contact__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: var(--contact-cta-w);
	height: var(--contact-cta-h);
	margin-top: var(--contact-cta-mt);
	background: var(--contact-cta-bg);
	border-radius: var(--contact-cta-br);
	text-decoration: none;
}

.contact__cta-text {
	font-family: var(--font-noto-sans-jp);
	font-size: var(--contact-cta-fs);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	line-height: var(--line-height-normal);
}

/* アロー SVG: Figma 9.99×12px を -90° 回転して → */
.contact__cta-arrow {
	display: block;
	flex-shrink: 0;
	transform: rotate(-90deg);
	width: 0.625rem;   /* 10px */
	height: 0.75rem;   /* 12px */
}

/* ================================================
   RESPONSIVE: Contact Section (≤ 991px)
   2026-07-29 ユーザー提供スマホスクリーンショットを正として実装。
================================================ */

@media (max-width: 991px) {

	.contact {
		height: auto;
		padding-bottom: var(--space-12);  /* 48px */
	}

	.contact__inner {
		padding-inline: var(--space-5);  /* 20px */
		padding-top: 3.3125rem;          /* 53px: SP Figma確認（BG開始3517px→eyebrow3570px）*/
	}

	.contact__heading {
		font-size: 2.5rem;          /* 40px: SP Figma確認（PC: 60px）*/
		line-height: normal;        /* --line-height-normal 未定義バグ修正 */
		margin-top: -0.3125rem;     /* -5px: SP Figma確認（PC: -12px過剰オーバーラップを修正）*/
	}

	.contact__sub {
		font-size: 1.125rem;                      /* 18px: SP Figma確認（PC: 22px）*/
		line-height: var(--line-height-relaxed);  /* 1.8: SP Figma確認 */
	}

	.contact__body p {
		font-size: 0.6875rem;                  /* 11px: SP Figma確認（PC: 16px）*/
		line-height: var(--line-height-base);  /* 1.6: SP Figma確認 */
	}

	.contact__cta {
		width: 100%;
	}
}

/* ================================================
  10. COMPANY SECTION
================================================ */

/* --- CSS 変数 --- */
:root {
	--company-pt:              10rem;     /* 160px: section top to eyebrow */
	--company-pb:               7.5rem;  /* 120px: last separator to footer */
	--company-heading-color:   #ee7921;
	--company-eyebrow-color:   #838383;
	--company-heading-mt:      -0.75rem; /* -12px: eyebrow重なり（Figma絶対座標） */
	--company-col-left:        27.5rem;  /* 440px: 見出し列幅 */
	--company-label-w:         11.25rem; /* 180px: ラベル列幅 */
	--company-row-pt:           2.0625rem; /* 33px: 行上余白（1行目除く） */
	--company-row-pb:           1.625rem;  /* 26px: 行下余白 */
	--company-row-border:      #e0e0e0;
	--company-text-color:      #1c1c1c;
}

/* セクション: 白背景・上下余白 */
.company {
	background: #ffffff;
	padding-block: var(--company-pt) var(--company-pb);
	scroll-margin-top: var(--header-height);
}

/* インナー: 2カラム flex レイアウト */
.company__inner {
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--container-padding-wide);
	display: flex;
	align-items: flex-start;
	gap: 0;
}

/* 左列: セクション見出し */
.company__header {
	flex: 0 0 var(--company-col-left);
}

.company__eyebrow {
	font-family: var(--font-noto-sans-jp);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--company-eyebrow-color);
	line-height: var(--line-height-normal);
	margin: 0;
}

.company__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	color: var(--company-heading-color);
	line-height: var(--line-height-normal);
	margin-top: var(--company-heading-mt);
}

/* 右列: 会社情報テーブル */
.company__table {
	flex: 1;
	margin: 0;
	padding: 0;
	padding-top: 2.625rem;  /* 42px: Figma first row top 202px - eyebrow top 160px */
}

/* テーブル行 */
.company__row {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding-block: var(--company-row-pt) var(--company-row-pb);
	border-bottom: 1px solid var(--company-row-border);
}

.company__row:first-child {
	padding-block-start: 0;
}

/* ラベル列: 180px */
.company__label {
	flex: 0 0 var(--company-label-w);
	font-family: var(--font-noto-sans-jp);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--company-text-color);
	line-height: var(--line-height-base);
	margin: 0;
}

/* 値列 */
.company__value {
	flex: 1;
	font-family: var(--font-noto-sans-jp);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--company-text-color);
	line-height: var(--line-height-base);
	margin: 0;
}

/* サブテキスト（Figma node 359:552: 10px Medium #8e8e8e）*/
.company__value-note {
	display: block;
	font-size: var(--font-size-2xs);  /* 10px */
	font-weight: var(--font-weight-medium);
	color: #8e8e8e;
	line-height: var(--line-height-base);
	margin-top: 0.25rem;
}

/* ================================================
   RESPONSIVE: Company Section (≤ 991px)
   2026-07-29 ユーザー提供スマホスクリーンショットを正として実装。
================================================ */

@media (max-width: 991px) {

	.company {
		padding-block: var(--space-16) var(--space-12);  /* 64px / 48px */
	}

	.company__inner {
		flex-direction: column;
		gap: var(--space-8);             /* 32px */
		padding-inline: var(--space-5);  /* 20px */
	}

	.company__header {
		flex: none;
		width: 100%;        /* flex:none時に自動でコンテンツ幅になるのを防ぐ */
		text-align: center;  /* SP Figma確認: 見出し中央揃え */
	}

	.company__eyebrow {
		font-size: var(--font-size-2xs);     /* 10px: SP Figma確認（PC: 12px Regular グレー）*/
		font-weight: var(--font-weight-bold);
		color: var(--color-text-primary);    /* 黒: SP Figma確認 */
		text-align: center;
	}

	.company__heading {
		font-size: 2.5rem;       /* 40px: SP Figma確認（PC: 60px）*/
		line-height: normal;     /* --line-height-normal 未定義バグ修正 */
		text-align: center;
		margin-top: -0.375rem;   /* -6px: SP Figma確認（PC: -12px過剰オーバーラップを修正）*/
	}

	.company__table {
		padding-top: 0;
		width: 100%;
	}

	.company__row {
		flex-direction: row;      /* 横並び: SP Figma確認（前回: 縦積み column）*/
		align-items: flex-start;
		gap: 0;
		padding-block: 0.75rem;  /* 12px */
	}

	.company__label {
		flex: 0 0 6.25rem;               /* 100px: SP Figma確認（label x=20, value x=120）*/
		font-size: var(--font-size-2xs);  /* 10px: SP Figma確認（PC: 16px）*/
		line-height: 1.6;
	}

	.company__value {
		flex: 1;
		font-size: var(--font-size-2xs);  /* 10px: SP Figma確認（PC: 16px）*/
		line-height: 1.6;
	}
}

/* ================================================
  11. FLOATING BANNER
================================================ */

.floating-banner {
	position: fixed;
	right: 2.5rem;    /* 40px */
	bottom: 3.75rem;  /* 60px */
	width: 18.75rem;  /* 300px */
	max-width: 100%;
	z-index: 200;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.nav-is-open .floating-banner {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.floating-banner__link {
	display: block;
}

.floating-banner__img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

@media (max-width: 991px) {
	.floating-banner {
		right: var(--space-5);  /* 20px */
		bottom: 1.875rem;       /* 30px */
		width: 12.5rem;         /* 200px */
	}
}

/* ================================================
  12. FOOTER
================================================ */

/* --- CSS 変数 --- */
:root {
	--footer-cta-width:      37.5rem;    /* 600px */
	--footer-cta-height:      6.25rem;   /* 100px */
	--footer-cta-lbox-w:      9.375rem;  /* 150px: 白ロゴボックス幅 */
	--footer-cta-lbox-h:      5rem;      /* 80px:  白ロゴボックス高さ */
	--footer-cta-icon-w:      4.6444rem; /* ~74.32px */
	--footer-cta-icon-h:      3.75rem;   /* 60px */
	--footer-cta-arrow-size:  1.875rem;  /* 30px: 円形矢印ボタン */
	--footer-cta-desc-size:   1.125rem;  /* 18px: 説明テキスト */
	--footer-bar-top:         5.5625rem; /* 89px:  CTAカード下〜ロゴ上 */
	--footer-bar-logo-mb:     1.875rem;  /* 30px:  ロゴ下〜区切り線上 */
	--footer-bar-pb:          2.75rem;   /* 44px:  コピーライト下余白 */
}

/* --- フッター全体 --- */
.site-footer {
	background-color: var(--color-bg-base);
}

/* === CTAバナー（画像） === */
.footer__cta-wrap {
	display: flex;
	justify-content: center;
}

.footer__cta-link {
	display: block;
	transition: var(--transition-opacity);
}

@media (prefers-reduced-motion: reduce) {
	.footer__cta-link { transition: none; }
}

.footer__cta-link:hover,
.footer__cta-link:focus-visible {
	opacity: 0.85;
}

.footer__cta-banner {
	display: block;
	width: var(--footer-cta-width);  /* 600px */
	height: auto;
	max-width: 100%;
}

/* === フッターバー === */
.footer__bar {
	padding-block-start: var(--footer-bar-top);
	padding-block-end: var(--footer-bar-pb);
	padding-inline: var(--container-padding-wide);
	max-width: var(--container-default);
	margin-inline: auto;
}

.footer__bar-logo {
	margin-bottom: var(--footer-bar-logo-mb);
}

/* custom-logo はヘッダーと共通で 60×47px に制御済 */
.footer__bar-logo .custom-logo-link,
.footer__bar-logo-link {
	display: inline-block;
}

.footer__bar-logo-img {
	width: 60px;   /* Figma確認: フッターロゴ幅（header .custom-logo と統一）*/
	height: 47px;  /* Figma確認 */
	object-fit: cover;
	object-position: center;
	display: block;
}

.footer__divider {
	border: none;
	border-top: 1px dashed var(--color-text-muted);  /* #a7a7a7 / Figma: stroke-dasharray */
	margin: 0 0 var(--space-4);  /* 16px 下: 区切り線〜コピーライト上端 */
}

.footer__copyright {
	text-align: right;
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);  /* 12px */
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
	line-height: 1;
}

/* === フッターナビ（メニュー設定時のみ表示） === */
.footer__nav {
	padding-inline: var(--container-padding-wide);
	padding-block: var(--space-4);
	max-width: var(--container-default);
	margin-inline: auto;
}

.footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__nav-list a {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.footer__nav-list a:hover,
.footer__nav-list a:focus-visible {
	text-decoration: underline;
}

/* ================================================
   RESPONSIVE: Footer (≤ 991px)
   2026-07-29 ユーザー提供スマホスクリーンショットを正として実装。
================================================ */

@media (max-width: 991px) {

	.footer__cta-wrap {
		padding-inline: var(--space-5);  /* 20px: 両端余白 */
	}

	.footer__cta-banner {
		width: 100%;  /* 全幅スケール */
	}

	.footer__bar {
		padding-inline: var(--space-5);  /* 20px */
	}

	.footer__bar-logo {
		text-align: center;  /* SP Figma確認（node 336:329 left=168px → センター）*/
	}

	.footer__divider {
		display: none;  /* SP: 点線廃止 */
	}

	.footer__copyright {
		font-size: var(--font-size-2xs);  /* 10px: SP Figma確認（PC: 12px）*/
		text-align: center;               /* SP Figma確認 */
	}
}

/* ================================================
   12. ANIMATIONS
   ------------------------------------------------
   Easing（STUDIO CSS 実測値）:
     easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1) — スクロールフェード
     easeStd:     cubic-bezier(0.4, 0.4, 0, 1)        — ホバー・ページ遷移
   JS: assets/js/animations.js（IntersectionObserver）
================================================ */

/* --- ページ読み込みフェード ---------------------- */
@keyframes ksk-page-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body {
	animation: ksk-page-in 600ms cubic-bezier(0.4, 0.4, 0, 1) backwards;
}

/* --- Hero ページ読み込みアニメーション ----------- */
@keyframes ksk-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero__heading {
	animation: ksk-fade-up 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms backwards;
}

.hero__lead {
	animation: ksk-fade-up 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 700ms backwards;
}

/* hero__cta は下記の transition 定義と同ブロックに統合 */
.hero__cta {
	animation: ksk-fade-up 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 900ms backwards;
}

/* --- スクロールフェードアップ -------------------- */
.anim-fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity   500ms cubic-bezier(0.39, 0.575, 0.565, 1) var(--anim-delay, 200ms),
		transform 500ms cubic-bezier(0.39, 0.575, 0.565, 1) var(--anim-delay, 200ms);
	will-change: opacity, transform;
}

.anim-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* --- ヘッダー スクロールシャドウ ----------------- */
.site-header {
	transition: box-shadow 300ms cubic-bezier(0.4, 0.4, 0, 1);
}

.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* --- Hero CTA ホバー（opacity + transform に強化）-- */
/* section 4 の opacity:0.75 のみ → 0.85 + translateY に更新 */
.hero__cta {
	transition:
		opacity   400ms cubic-bezier(0.4, 0.4, 0, 1),
		transform 400ms cubic-bezier(0.4, 0.4, 0, 1);
}

.hero__cta:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

/* --- Contact CTA ホバー（既存定義なしのため新規）-- */
.contact__cta {
	transition:
		opacity   400ms cubic-bezier(0.4, 0.4, 0, 1),
		transform 400ms cubic-bezier(0.4, 0.4, 0, 1);
}

.contact__cta:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

/* --- prefers-reduced-motion ---------------------- */
@media (prefers-reduced-motion: reduce) {

	body {
		animation: none;
	}

	.hero__heading,
	.hero__lead,
	.hero__cta {
		animation: none;
	}

	.anim-fade-up {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

	.site-header {
		transition: none;
	}

	.hero__cta,
	.contact__cta {
		transition: none;
	}
}

/* ================================================
   13. NEWS SINGLE（詳細ページ）
   Figma確認: 01_news_detail_PC (364:786), 01_news_detail_SP (364:997)
================================================ */

.news-single {
	padding-block-start: 5.625rem;  /* 90px: ヘッダー(100px)下端〜見出し上端 */
	padding-block-end: 6.25rem;     /* 100px */
	padding-inline: var( --container-padding-wide );
	max-width: var( --container-default );
	margin-inline: auto;
}

.news-single__inner {
	max-width: 50rem;  /* 800px */
	margin-inline: auto;
}

/* --- 見出しブロック（中央配置）--- */
.news-single__head {
	text-align: center;
	margin-block-end: 5rem;  /* 80px: 見出し下端〜日付上端 */
}

.news-single__label {
	font-family: var( --font-family-base );
	font-size: var( --font-size-xs );          /* 12px */
	font-weight: var( --font-weight-regular );
	color: var( --color-text-secondary );      /* #838383 */
	line-height: 1;
	margin-bottom: 0;
}

.news-single__heading {
	font-family: var( --font-family-heading );  /* Barlow */
	font-size: var( --font-size-5xl );          /* 60px */
	font-weight: var( --font-weight-bold );
	color: var( --color-accent );              /* #f4812c */
	line-height: 1.2;
	margin-top: 0.375rem;   /* 6px: ラベル下端〜見出し上端 */
	margin-bottom: 0;
}

/* --- 日付 --- */
.news-single__date {
	display: block;
	font-family: var( --font-family-base );
	font-size: var( --font-size-sm );          /* 14px */
	font-weight: var( --font-weight-regular );
	color: var( --color-text-body );           /* #1c1c1c */
	line-height: 1;
	margin-block-end: var( --news-item-date-mb );  /* 14px: 日付下端〜タイトル上端 */
}

/* --- 投稿タイトル --- */
.news-single__title {
	font-family: var( --font-family-base );
	font-size: 1.25rem;                        /* 20px */
	font-weight: var( --font-weight-bold );
	color: var( --color-text-body );
	line-height: var( --line-height-relaxed ); /* 1.8 */
	margin: 0 0 1rem;                          /* 16px: タイトル下端〜区切り線 */
}

/* --- 区切り線（タイトル直下）--- */
.news-single__divider {
	border: none;
	border-top: 1px dashed var( --color-text-muted );  /* #a7a7a7 */
	margin: 0 0 1.875rem;                              /* 30px: 区切り線〜本文 */
}

/* --- 本文 --- */
.news-single__body {
	font-family: var( --font-family-base );
	font-size: 1.125rem;                       /* 18px */
	font-weight: var( --font-weight-medium );  /* 500 */
	color: var( --color-text-body );
	line-height: var( --line-height-relaxed ); /* 1.8 */
	margin-block-end: 3rem;
}

.news-single__body p + p {
	margin-block-start: 1rem;
}

/* --- ナビゲーション（戻るボタン）--- */
.news-single__nav {
	padding-block-start: 0;
}

.news-single__back {
	display: inline-flex;
	align-items: center;
	gap: var( --space-5 );   /* 20px */
	text-decoration: none;
	transition: var( --transition-opacity );
}

@media ( prefers-reduced-motion: reduce ) {
	.news-single__back { transition: none; }
}

.news-single__back:hover,
.news-single__back:focus-visible {
	opacity: 0.75;
}

.news-single__back-circle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --news-more-circle );   /* 50px */
	height: var( --news-more-circle );
	border-radius: 50%;
	background-color: var( --color-bg-base );
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	color: var( --color-text-primary );
}

.news-single__back-text {
	font-family: var( --font-family-base );
	font-size: var( --font-size-base );   /* 16px */
	font-weight: var( --font-weight-bold );
	color: var( --color-text-body );      /* #1c1c1c */
	line-height: 1;
}

/* --- SP（991px以下）--- */
@media ( max-width: 991px ) {

	.news-single {
		padding-block-start: 3.75rem;    /* 60px */
		padding-block-end: 4rem;
		padding-inline: var( --space-5 );  /* 20px */
	}

	.news-single__head {
		margin-block-end: 2rem;   /* 32px */
	}

	.news-single__label {
		font-size: var( --font-size-2xs );     /* 10px */
		font-weight: var( --font-weight-bold );
		color: var( --color-text-primary );    /* #000000 */
	}

	.news-single__heading {
		font-size: 2.5rem;   /* 40px */
	}

	.news-single__date {
		font-size: var( --font-size-xs );  /* 12px */
	}

	.news-single__title {
		font-size: var( --font-size-base );   /* 16px */
	}

	.news-single__body {
		font-size: var( --font-size-xs );  /* 12px */
	}

	.news-single__back-circle {
		width: 1.875rem;   /* 30px */
		height: 1.875rem;
	}

	.news-single__back-text {
		font-size: var( --font-size-2xs );  /* 10px */
	}
}

/* ================================================
   14. NEWS ARCHIVE（一覧ページ）
   Figma確認: 01_news_top_PC (364:556), 01_news_top_SP (364:860)
================================================ */

.news-archive {
	padding-block-start: 5.625rem;   /* 90px: ヘッダー(100px)下端〜見出し上端 */
	padding-block-end: 6.25rem;      /* 100px */
	padding-inline: var( --container-padding-wide );
	max-width: var( --container-default );
	margin-inline: auto;
}

.news-archive__inner {
	max-width: 50rem;   /* 800px */
	margin-inline: auto;
}

/* --- 見出しブロック（中央配置）--- */
.news-archive__head {
	text-align: center;
	margin-block-end: 5rem;   /* 80px: 見出し下端〜最初の日付上端 */
}

.news-archive__label {
	font-family: var( --font-family-base );
	font-size: var( --font-size-xs );          /* 12px */
	font-weight: var( --font-weight-regular );
	color: var( --color-text-secondary );      /* #838383 */
	line-height: 1;
	margin-bottom: 0;
}

.news-archive__heading {
	font-family: var( --font-family-heading );  /* Barlow */
	font-size: var( --font-size-5xl );          /* 60px */
	font-weight: var( --font-weight-bold );
	color: var( --color-accent );              /* #f4812c */
	line-height: 1.2;
	margin-top: 0.375rem;   /* 6px: ラベル下端〜見出し上端 */
	margin-bottom: 0;
}

/* --- 投稿リスト --- */
.news-archive__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-archive__item {
	padding-block-end: var( --news-item-pb );       /* 33px */
	border-bottom: 1px dashed var( --color-text-muted );  /* #a7a7a7 */
	margin-bottom: var( --news-item-mb );            /* 29px */
}

.news-archive__item:last-child {
	margin-bottom: 0;
}

.news-archive__date {
	display: block;
	font-family: var( --font-family-base );
	font-size: var( --font-size-sm );           /* 14px */
	font-weight: var( --font-weight-regular );
	color: var( --color-text-body );            /* #1c1c1c */
	line-height: 1;
	margin-bottom: var( --news-item-date-mb );  /* 14px: 日付下端〜タイトル上端 */
}

.news-archive__title-link {
	display: block;
	font-family: var( --font-family-base );
	font-size: var( --font-size-base );   /* 16px */
	font-weight: var( --font-weight-bold );
	color: var( --color-text-body );      /* #1c1c1c */
	line-height: 1.5;
	text-decoration: none;
	transition: var( --transition-opacity );
}

@media ( prefers-reduced-motion: reduce ) {
	.news-archive__title-link { transition: none; }
}

.news-archive__title-link:hover,
.news-archive__title-link:focus-visible {
	text-decoration: underline;
	opacity: 0.75;
}

/* --- 投稿なしメッセージ --- */
.news-archive__empty {
	font-family: var( --font-family-base );
	font-size: var( --font-size-base );
	color: var( --color-text-secondary );
}

/* --- TOPに戻るボタン --- */
.news-archive__back-wrap {
	margin-block-start: var( --news-more-mt );  /* 39px: 区切り線〜ボタン */
}

.news-archive__back {
	display: inline-flex;
	align-items: center;
	gap: var( --space-5 );   /* 20px */
	text-decoration: none;
	transition: var( --transition-opacity );
}

@media ( prefers-reduced-motion: reduce ) {
	.news-archive__back { transition: none; }
}

.news-archive__back:hover,
.news-archive__back:focus-visible {
	opacity: 0.75;
}

.news-archive__back-circle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --news-more-circle );   /* 50px */
	height: var( --news-more-circle );
	border-radius: 50%;
	background-color: var( --color-bg-base );
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	color: var( --color-text-primary );
}

.news-archive__back-text {
	font-family: var( --font-family-base );
	font-size: var( --font-size-base );   /* 16px */
	font-weight: var( --font-weight-bold );
	color: var( --color-text-body );      /* #1c1c1c */
	line-height: 1;
}

/* --- SP（991px以下）--- */
@media ( max-width: 991px ) {

	.news-archive {
		padding-block-start: 3.75rem;    /* 60px */
		padding-block-end: 2.5rem;       /* 40px */
		padding-inline: var( --space-5 );  /* 20px */
	}

	.news-archive__head {
		margin-block-end: 2rem;   /* 32px */
	}

	.news-archive__label {
		font-size: var( --font-size-2xs );     /* 10px */
		font-weight: var( --font-weight-bold );
		color: var( --color-text-primary );    /* #000000 */
	}

	.news-archive__heading {
		font-size: 2.5rem;   /* 40px */
	}

	.news-archive__date {
		font-size: var( --font-size-xs );  /* 12px */
	}

	.news-archive__title-link {
		font-size: var( --font-size-xs );  /* 12px */
	}

	.news-archive__item {
		padding-block-end: 1.125rem;  /* 18px */
		margin-bottom: 1rem;          /* 16px */
	}

	.news-archive__back-wrap {
		margin-block-start: 1.25rem;  /* 20px */
	}

	.news-archive__back-circle {
		width: 1.875rem;   /* 30px */
		height: 1.875rem;
	}

	.news-archive__back-text {
		font-size: var( --font-size-2xs );  /* 10px */
	}
}

/* ================================================
  15. 404 NOT FOUND
================================================ */

div.error404 {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--header-height) - 18rem); /* フッターが浮かないよう最小高を確保 */
	justify-content: center;
	padding-block: var(--space-32); /* 128px 上下余白 */
	padding-inline: var(--container-padding-wide);
	text-align: center;
}

.error404__inner {
	max-width: 40rem;
	margin-inline: auto;
}

.error404__code {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);  /* 60px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-accent);
	margin: 0 0 var(--space-6);
}

.error404__heading {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);   /* 24px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-6);
}

.error404__body {
	font-size: var(--font-size-base);  /* 16px */
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-text-body);
	margin: 0 0 var(--space-12); /* 48px */
}

.error404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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);
	color: var(--color-text-inverse);
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: var(--btn-border-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--btn-transition);
}

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

@media (max-width: 991px) {
	div.error404 {
		padding-inline: var(--container-padding); /* 24px */
		padding-block: var(--space-20);           /* 80px */
		min-height: calc(100dvh - var(--header-height) - 22rem);
	}

	.error404__code {
		font-size: 2.5rem; /* 40px */
	}

	.error404__heading {
		font-size: var(--font-size-lg);  /* 20px */
	}

	.error404__body {
		font-size: var(--font-size-sm);  /* 14px */
	}
}