@charset "UTF-8";

/* ==========================================================================
   子テーマ共通CSS（child-original.css）
   - 企業情報ページ群（企業理念 / 企業概要 / ブランドコンセプト / 沿革）共通
   - 全スタイルは各ページのスコープクラス配下に記述
   - font-family は指定なし（テーマのフォントを継承）
   - font-size は em / rem の相対値のみ（テーマ基準に対する倍率）

   ページ別スコープ対応表:
     企業理念           → .philosophy-page  /  .ph-*
     企業概要           → .company-page     /  .cp-*
     ブランドコンセプト  → .company-page     /  .cp-*
     沿革               → .company-page     /  .cp-*
   ========================================================================== */


/* ==========================================================================
   SECTION 1 : 見出し共通（グローバル・スコープなし）
   - h2/h3/h4.h2-original / h3-original / h4-original は全ページ共通。
   - テーマの標準スタイルが子テンプレートに届かないため、ここで宣言。
   ========================================================================== */

/* --------------------------------------------------------------------------
   h2-original ― ページタイトル相当
   -------------------------------------------------------------------------- */
h2.h2-original {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
	font-size: clamp(48px, 4.44vw, 64px);
	line-height: 1;
	color: #535353;
}

h2.h2-original span {
	display: block;
	font-size: clamp(14px, 1.11vw, 16px);
	color: #e63822;
}

/* --------------------------------------------------------------------------
   h3-original ― セクション見出し
   -------------------------------------------------------------------------- */
h3.h3-original {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	font-size: clamp(28px, 2.5vw, 36px);
	color: #535353;
	margin: 0 0 40px 0;
}

h3.h3-original span {
	font-size: 10px;
	color: #e63822;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
	h3.h3-original {
		margin: 0 0 28px 0;
	}
}

/* --------------------------------------------------------------------------
   h4-original ― ブロック小見出し
   -------------------------------------------------------------------------- */
h4.h4-original {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-size: clamp(18px, 1.6vw, 22px);
	color: #535353;
	margin: 0 0 16px 0;
	line-height: 1.4;
}

h4.h4-original span {
	display: block;
	color: #e63822;
	margin-top: 0.4em;
	letter-spacing: 0.05em;
}


/* ==========================================================================
   SECTION 2 : 企業理念ページ（.philosophy-page）
   ========================================================================== */

/* --------------------------------------------------------------------------
   2-0) ルート変数・ベース
   -------------------------------------------------------------------------- */
.philosophy-page {
	--ph-color-main:       #E63822;
	--ph-color-sub:        #B71C1C;
	--ph-color-text:       #0a0a0a;
	--ph-color-gray:       #535353;
	--ph-color-light-gray: #d3d3d3;
	--ph-color-bg:         #ffffff;
	--ph-color-bg-soft:    #f5f5f5;
	--ph-color-num:        #bdbdbd;

	--ph-container:    770px;
	--ph-gap-section:  96px;
	--ph-gap-block:    48px;

	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	color: var(--ph-color-text);
	box-sizing: border-box;
	text-align: left;
}

body.single .philosophy-page,
body .philosophy-page {
	float: none !important;
	display: block !important;
}

.philosophy-page *,
.philosophy-page *::before,
.philosophy-page *::after {
	box-sizing: border-box;
}

.philosophy-page .ph-main {
	width: 100%;
	padding: 64px 0 120px;
	background: var(--ph-color-bg);
	overflow-x: clip;
}

.philosophy-page .ph-container {
	width: 100%;
	max-width: var(--ph-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.philosophy-page .ph-section + .ph-section {
	margin-top: var(--ph-gap-section);
}

/* --------------------------------------------------------------------------
   2-0b) スクロール出現アニメーション
   -------------------------------------------------------------------------- */
.philosophy-page .ph-section {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 800ms ease-out, transform 800ms ease-out;
	will-change: opacity, transform;
}

.philosophy-page .ph-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.no-js .philosophy-page .ph-section {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.philosophy-page .ph-section {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   2-1) ページヘッダー
   -------------------------------------------------------------------------- */
.philosophy-page .ph-header {
	text-align: left;
	margin-bottom: var(--ph-gap-section);
}
/* --------------------------------------------------------------------------
   2-2) 経営理念（MVV）― 2カラム・左右交互
   -------------------------------------------------------------------------- */
.philosophy-page .ph-mvv {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.philosophy-page .ph-mvv__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.philosophy-page .ph-mvv__item:nth-child(even) .ph-mvv__body   { order: 2; }
.philosophy-page .ph-mvv__item:nth-child(even) .ph-mvv__figure { order: 1; }

.philosophy-page .ph-mvv__body {
	min-width: 0;
}

.philosophy-page .ph-mvv__text {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.9;
	color: var(--ph-color-text);
}

.philosophy-page .ph-mvv__figure {
	text-align: center;
}

.philosophy-page .ph-mvv__image {
	width: 100%;
	max-width: 260px;
	height: auto;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   2-3) 流儀（STYLE）／11の指針（VALUES）― フルブリード背景
   -------------------------------------------------------------------------- */
.philosophy-page .ph-section--style,
.philosophy-page .ph-section--values {
	background: #f8f9fa;
	margin-left: calc((100% - 100vw) / 2);
	margin-right: calc((100% - 100vw) / 2);
	padding: 64px calc((100vw - 100%) / 2);
}

.philosophy-page .ph-style-intro,
.company-page .ph-style-intro {
	text-align: left;
	margin-bottom: var(--ph-gap-block);
}

.philosophy-page .ph-style-intro__catch,
.company-page .ph-style-intro__catch {
	margin: 0 0 0.4em;
    font-size: clamp(20px, 2.22vw, 32px);
	font-weight: 600;
	color: var(--cp-color-text, var(--ph-color-text));
	letter-spacing: 0.02em;
}

.philosophy-page .ph-style-intro__catch-jp,
.company-page .ph-style-intro__catch-jp {
	margin: 0 0 1.43em;
	color: var(--cp-color-main, var(--ph-color-main));
	font-size: 14px;
	font-weight: 600;
}

.philosophy-page .ph-style-intro__text,
.company-page .ph-style-intro__text {
	margin: 0;
	color: var(--cp-color-text, var(--ph-color-text));
	line-height: 1.6;
}
.company-page .ph-style-intro__text {
	margin: 0 auto 2.5em;
}

/* 本文中の強調テキスト */
.philosophy-page .cp-em,
.company-page .cp-em {
	font-style: normal;
	color: #e63822;
	font-weight: 600;
}

.philosophy-page .ph-style {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.philosophy-page .ph-style__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.philosophy-page .ph-style__item:nth-child(even) .ph-style__body   { order: 2; }
.philosophy-page .ph-style__item:nth-child(even) .ph-style__figure { order: 1; }

.philosophy-page .ph-style__text {
	margin: 0;
	color: var(--ph-color-text);
	font-size: 0.9em;
	line-height: 1.85;
}

.philosophy-page .ph-style__image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   2-4) 7つのRe（理）― 3カラムカード
   -------------------------------------------------------------------------- */
.philosophy-page .ph-re-intro {
	margin: 0 0 var(--ph-gap-block);
	color: var(--ph-color-text);
	font-size: 0.95em;
	line-height: 1.9;
}

.philosophy-page .ph-re {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.philosophy-page .ph-re__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px 16px 28px;
	border: 1px solid var(--ph-color-light-gray);
	background: var(--ph-color-bg);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 1;
	transition: transform 300ms ease, box-shadow 300ms ease;
	transform-origin: center center;
	will-change: transform;
}

.philosophy-page .ph-re__item:hover {
	transform: scale(1.05);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	z-index: 10;
}

.philosophy-page .ph-re__icon {
	width: 100%;
	max-width: 96px;
	height: auto;
	margin: 0 0 16px 0;
	display: block;
}

.philosophy-page .ph-re__item h4.h4-original {
	align-items: center;
	text-align: center;
	margin: 0 0 8px 0;
}

.philosophy-page .ph-re__text {
	margin: 0;
	color: var(--ph-color-text);
	font-size: 0.8em;
	line-height: 1.75;
	text-align: left;
}

/* --------------------------------------------------------------------------
   2-5) 11の指針 ― 2カラム
   -------------------------------------------------------------------------- */
.philosophy-page .ph-values-intro {
	margin: 0 0 var(--ph-gap-block);
	color: var(--ph-color-text);
	font-size: 0.95em;
	line-height: 1.9;
}

.philosophy-page .ph-values {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.philosophy-page .ph-values__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 24px 24px 96px;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	transition: background-color 300ms ease;
}

.philosophy-page .ph-values__item:hover {
	background: #fef2f0;
}

.philosophy-page .ph-values__num {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ph-color-light-gray);
	font-size: clamp(48px, 4.44vw, 64px);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
}

.philosophy-page .ph-values__body {
	min-width: 0;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.philosophy-page .ph-values__en {
	margin: 0 0 0.15em;
	color: var(--ph-color-main);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.philosophy-page .ph-values__jp {
	margin: 0;
	color: var(--ph-color-text);
	font-size: 0.85em;
	line-height: 1.5;
	text-align: center;
}

/* --------------------------------------------------------------------------
   2-7) レスポンシブ（企業理念）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.philosophy-page .ph-mvv__item,
	.philosophy-page .ph-style__item {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.philosophy-page .ph-mvv__item:nth-child(n) .ph-mvv__figure,
	.philosophy-page .ph-style__item:nth-child(n) .ph-style__figure {
		order: 1;
	}

	.philosophy-page .ph-mvv__item:nth-child(n) .ph-mvv__body,
	.philosophy-page .ph-style__item:nth-child(n) .ph-style__body {
		order: 2;
	}
}

@media (max-width: 767px) {
	.philosophy-page {
		--ph-gap-section: 72px;
		--ph-gap-block:   36px;
	}

	.philosophy-page .ph-main {
		padding: 48px 0 80px;
	}

	.philosophy-page .ph-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.philosophy-page .ph-section--style,
	.philosophy-page .ph-section--values {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.philosophy-page .ph-re {
		grid-template-columns: repeat(2, 1fr);
	}

	.philosophy-page .ph-values {
		grid-template-columns: 1fr;
	}

	.company-page .ph-style-intro__text {
	margin: 0 auto 20px;
}
}

@media (max-width: 480px) {
	.philosophy-page .ph-re {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   SECTION 3 : 企業概要・ブランドコンセプト・沿革（.company-page）
   ========================================================================== */

/* --------------------------------------------------------------------------
   3-0) ルート変数・ベース
   -------------------------------------------------------------------------- */
.company-page {
	--cp-color-main:       #E63822;
	--cp-color-sub:        #B71C1C;
	--cp-color-text:       #0a0a0a;
	--cp-color-gray:       #535353;
	--cp-color-light-gray: #d3d3d3;
	--cp-color-bg:         #ffffff;
	--cp-color-bg-soft:    #f8f9fa;
	--cp-color-bg-pale:    #fef2f0;
	--cp-color-num:        #bdbdbd;

	--cp-container:    770px;
	--cp-gap-section:  55px;
	--cp-gap-block:    48px;

	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	color: var(--cp-color-text);
	box-sizing: border-box;
	text-align: left;
}

body.single .company-page,
body .company-page {
	float: none !important;
	display: block !important;
}

.company-page *,
.company-page *::before,
.company-page *::after {
	box-sizing: border-box;
}

.company-page .cp-main {
	width: 100%;
	padding: 64px 0 120px;
	background: var(--cp-color-bg);
	overflow-x: clip;
}

.company-page .cp-container {
	width: 100%;
	max-width: var(--cp-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.company-page .cp-section + .cp-section {
	margin-top: var(--cp-gap-section);
}

/* --------------------------------------------------------------------------
   3-0b) スクロール出現アニメーション
   -------------------------------------------------------------------------- */
.company-page .cp-section {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 800ms ease-out, transform 800ms ease-out;
	will-change: opacity, transform;
}

.company-page .cp-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.no-js .company-page .cp-section {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.company-page .cp-section {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   3-1) ページヘッダー
   -------------------------------------------------------------------------- */
.company-page .cp-header {
	text-align: left;
	margin-bottom: var(--cp-gap-section);
}

.company-page .cp-header__lead {
	margin: 0;
	color: var(--cp-color-gray);
	font-size: 0.95em;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   3-2) フルブリード背景セクション
   -------------------------------------------------------------------------- */
.company-page .cp-section--bg {
	background: var(--cp-color-bg-soft);
	margin-left: calc((100% - 100vw) / 2);
	margin-right: calc((100% - 100vw) / 2);
	padding: 64px calc((100vw - 100%) / 2);
}

/* --------------------------------------------------------------------------
   3-3) 概要テーブル（企業概要）
   -------------------------------------------------------------------------- */
.company-page .cp-table {
	width: 100%;
	border-collapse: collapse;
}

.company-page .cp-table tr {
	border-bottom: 1px solid var(--cp-color-light-gray);
	transition: background-color 200ms ease;
}

.company-page .cp-table tr:first-child {
	border-top: 1px solid var(--cp-color-light-gray);
}

.company-page .cp-table th,
.company-page .cp-table td {
	padding: 20px 16px;
	line-height: 1.6;
	vertical-align: top;
	text-align: left;
}

.company-page .cp-table th {
	width: 180px;
	min-width: 140px;
	font-weight: 700;
	color: var(--cp-color-gray);
	white-space: nowrap;
}

.company-page .cp-table td {
	color: var(--cp-color-text);
}

.company-page .cp-table td a {
	color: var(--cp-color-main);
	text-decoration: none;
}

.company-page .cp-table td a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3-4) キーファクト（数値強調）
   -------------------------------------------------------------------------- */
.company-page .cp-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.company-page .cp-facts__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 16px;
	background: var(--cp-color-bg);
	border: 1px solid var(--cp-color-light-gray);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transition: transform 300ms ease, box-shadow 300ms ease;
	will-change: transform;
}

.company-page .cp-facts__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.company-page .cp-facts__num {
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 700;
	color: var(--cp-color-main);
	line-height: 1;
	letter-spacing: -0.02em;
}

.company-page .cp-facts__unit {
	font-size: 0.5em;
	font-weight: 400;
	letter-spacing: 0;
}

.company-page .cp-facts__label {
	margin-top: 8px;
	font-size: 0.8em;
	color: var(--cp-color-gray);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3-5) 事業内容カード
   -------------------------------------------------------------------------- */
.company-page .cp-services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.company-page .cp-services__item {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: var(--cp-color-bg);
	border-radius: 8px;
	border-left: 4px solid var(--cp-color-main);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transition: background-color 300ms ease, transform 300ms ease;
	will-change: transform;
}

.company-page .cp-services__item:hover {
	background: var(--cp-color-bg-pale);
	transform: translateX(4px);
}

.company-page .cp-services__title {
	margin: 0 0 8px;
	font-size: 1em;
	font-weight: 700;
	color: var(--cp-color-gray);
}

.company-page .cp-services__text {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.75;
	color: var(--cp-color-text);
}

/* --------------------------------------------------------------------------
   3-6) 役員情報
   -------------------------------------------------------------------------- */
.company-page .cp-officer {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 40px;
	align-items: start;
}

.company-page .cp-officer__figure {
	width: 100%;
}

.company-page .cp-officer__image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--cp-color-bg-soft);
}

.company-page .cp-officer__name {
	margin: 0 0 4px;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 700;
	color: var(--cp-color-gray);
	line-height: 1.3;
}

.company-page .cp-officer__role {
	margin: 0 0 20px;
	font-size: 0.8em;
	color: var(--cp-color-main);
	letter-spacing: 0.1em;
	font-weight: 700;
}

.company-page .cp-officer__text {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.9;
	color: var(--cp-color-text);
}

/* --------------------------------------------------------------------------
   3-7) グループ・関連会社リスト
   -------------------------------------------------------------------------- */
.company-page .cp-group {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.company-page .cp-group__item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 20px;
	background: var(--cp-color-bg);
	border-radius: 8px;
	border: 1px solid var(--cp-color-light-gray);
	font-size: 0.9em;
	transition: background-color 200ms ease;
}

.company-page .cp-group__item:hover {
	background: var(--cp-color-bg-pale);
}

.company-page .cp-group__name {
	font-weight: 700;
	color: var(--cp-color-gray);
	flex-shrink: 0;
}

.company-page .cp-group__desc {
	color: var(--cp-color-text);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   3-8) CTA（グローバル定義 - すべてのページで流用可能）
   -------------------------------------------------------------------------- */
.cp-cta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

/* 左揃えCTA（通常サイズ・コンテンツ内埋め込み用） */
.cp-cta--inline-left {
	justify-content: flex-start;
	margin-top: 40px;
}

/* テーブルtd内に埋め込むインラインCTA（company-pageスコープのみ） */
.company-page .cp-cta--inline {
	justify-content: flex-start;
	margin-top: 16px;
}

.company-page .cp-cta--inline .cp-cta__btn {
	min-width: 0;
	padding: 10px 24px;
	font-size: 0.85em;
}

.cp-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: 14px 28px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 40px;
	transition: opacity 300ms ease, transform 300ms ease;
	transform-origin: center center;
	will-change: transform;
}

.cp-cta__btn--outline {
	background: #535353;
	color: #fff;
	border: 1.5px solid #535353;
}

.cp-cta__btn--primary {
	background: #e63822;
	color: #fff;
	border: 1.5px solid #e63822;
}

.cp-cta__btn:hover {
	color: #fff;
	opacity: 0.7;
	transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   3-9) ブランドコンセプト固有
   -------------------------------------------------------------------------- */

/* 背景テキスト独立セクション */
.company-page .cp-section--bg-text-area {
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/* 横長・大きく薄いテキスト */
.company-page .cp-bg-text {
	display: block;
	font-size: clamp(24px, 6vw, 48px);
	font-weight: 600;
	color: #d3d3d3;
	white-space: nowrap;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: left;
}

/* 本文エリア（背景テキストより前面に） */
.company-page .cp-bc-origin {
	display: flex;
	flex-direction: column;
	gap: 40px;
		margin: 40px 0 0;
}

.company-page .cp-bc-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.company-page .cp-bc-body p {
	margin: 0;
	line-height: 1.6;
}

.company-page .cp-bc-body .cp-bc-body-inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
}

.company-page .cp-bc-body .cp-bc-body-inner img {
	width: 50%;
	height: auto;
	object-fit: contain;
	max-width: 600px;
}

/* 締めの一文 */
.company-page .cp-bc-closing {
	font-weight: 600;
	color: var(--cp-color-main);
	line-height: 1.6;
}

/* ロゴセクション */
.company-page .cp-bc-logo {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.company-page .cp-bc-logo__figure {
	margin: 0;
	text-align: center;
	background: #fff;
	border-radius: 8px;
	padding: 40px;
	border: 1px solid #d3d3d3;
}

.company-page .cp-bc-logo__image {
	max-width: 400px;
	width: 100%;
	height: auto;
	display: inline-block;
}

.company-page .cp-bc-logo__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.company-page .cp-bc-logo__body p {
	margin: 0;
	line-height: 1.9;
}

/* レスポンシブ */
@media (max-width: 767px) {
	.company-page .cp-bc-logo__figure {
		padding: 24px 20px;
	}
	.company-page .cp-bc-body .cp-bc-body-inner {
		flex-direction: column;
		gap: 16px;
	}
	.company-page .cp-bc-body .cp-bc-body-inner img {
		width: 100%;
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   3-10) 沿革固有（タイムライン）
   構造: [年カラム 96px] [線エリア 40px] [イベントカラム 1fr]
   - 年カラム : 西暦（大・#535353）＋ラベル（小・#e63822）縦2段
   - 線エリア : cp-timeline__line が縦線を担当
                cp-timeline__dot が丸ドットを担当（flexで上部に固定）
   - イベントカラム : cp-timeline__events + cp-timeline__event
   -------------------------------------------------------------------------- */

/* ── タイムライン外枠 ── */
.company-page .cp-timeline {
	display: flex;
	flex-direction: column;
	margin: 2.5em auto 0;
}

/* ── 年グループ：3列グリッド ── */
.company-page .cp-timeline__year-group {
	display: grid;
	grid-template-columns: auto 80px 1fr;
	grid-template-rows: auto;
	gap: 0;
	min-height: 0;
}

/* ── 年カラム（1列目）── */
.company-page .cp-timeline__year {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
	grid-column: 1;
	grid-row: 1;
}

/* 西暦（大・#535353）*/
.company-page .cp-timeline__year-num {
	display: block;
	font-size: clamp(24px, 2.78vw, 40px);
	font-weight: 600;
	color: var(--cp-color-light-gray);
	line-height: 1;
}

/* ラベル（小・#e63822 メインカラー）*/
.company-page .cp-timeline__year-label {
	display: block;
	font-size: clamp(10px, 0.97vw, 14px);
	font-weight: 600;
	color: #e63822;
	line-height: 1;
}

/* ── 線エリア（2列目）：縦線＋丸ドット ── */
/* ── 縦線エリア（2列目）── */
.company-page .cp-timeline__line {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	position: relative;
	overflow: hidden; /* ::after の伸びをクリップ */
}

/* ::before：グレーの背景線（静的・全高） */
.company-page .cp-timeline__line::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: var(--cp-color-light-gray);
	z-index: 0;
}
/* ::after：メインカラーの伸びていく線（is-active で上から下へ伸びる） */
.company-page .cp-timeline__line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 0; /* 初期状態：非表示 */
	background: #e63822;
	z-index: 1;
	transition: none;
}
.company-page .cp-timeline__year-group:first-child .cp-timeline__line {
	padding: 16px 0 0 ;
}
.company-page .cp-timeline__year-group:first-child .cp-timeline__line::before ,
.company-page .cp-timeline__year-group:first-child .cp-timeline__line::after {
	top: 32px;
}
.company-page .cp-timeline__year-group:first-child .cp-timeline__dot {
	margin-top: 0;
} 
/* 最後のグループ：丸ドット下端で背景線を止める */
.company-page .cp-timeline__year-group:last-child .cp-timeline__line::before {
	bottom: 0;
	height: 12px;
}
/* ── アニメーション定義 ── */

/* 縦線：height 0% → 100% に伸びる */
@keyframes cp-line-grow {
	0%   { height: 0; }
	100% { height: 100%; }
}

/* 丸ドット：scale 1 ↔ 1.5 のパルス */
@keyframes cp-dot-active {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.5); }
}

/* ── 丸ドット：デフォルト（非アクティブ）── */
.company-page .cp-timeline__dot {
	position: relative;
	z-index: 2;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cp-color-light-gray);
	box-shadow: 0 0 0 3px #f5f5f5, 0 0 0 4px #d3d3d3;
	flex-shrink: 0;
	margin-top: 16px;
	transition: background 300ms ease, box-shadow 300ms ease;
	will-change: transform, background;
}

/* ── is-active：線が伸び始め＋丸ドットがパルス ── */
.company-page .cp-timeline__year-group.is-active .cp-timeline__line::after {
	animation: cp-line-grow 4s ease forwards;
}

.company-page .cp-timeline__year-group.is-active .cp-timeline__dot {
	background: #e63822;
	box-shadow: 0 0 0 3px #fef2f0, 0 0 0 4px #e63822;
	animation: cp-dot-active 1.5s ease-in-out infinite;
}

/* ── is-done：線を伸び切った状態で固定＋丸ドットのパルス停止 ── */
.company-page .cp-timeline__year-group.is-done .cp-timeline__line::after {
	height: 100%;
	transition: none;
}
/* 最後のグループ：丸ドット下端で背景線を止める */
.company-page .cp-timeline__year-group.is-done:last-child .cp-timeline__line::after {
	bottom: 0;
	height: 12px;
}

.company-page .cp-timeline__year-group.is-done .cp-timeline__dot {
	background: #e63822;
	box-shadow: 0 0 0 3px #fef2f0, 0 0 0 4px #e63822;
	animation: none;
	transform: scale(1);
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
	.company-page .cp-timeline__year-group.is-active .cp-timeline__line::after,
	.company-page .cp-timeline__year-group.is-done .cp-timeline__line::after {
		animation: none;
		height: 100%;
	}
	.company-page .cp-timeline__year-group.is-active:last-child .cp-timeline__line::after {
		bottom: 0;
		height: 12px;
	}
	.company-page .cp-timeline__year-group.is-active .cp-timeline__dot,
	.company-page .cp-timeline__year-group.is-done .cp-timeline__dot {
		animation: none;
		background: #e63822;
	}
}

/* ── イベントカラム（3列目）── */
.company-page .cp-timeline__events {
	grid-column: 3;
	grid-row: 1;
	list-style: none;
	padding: 0 0 40px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.company-page .cp-timeline__event {
	display: block;
	padding: 20px;
	background: var(--cp-color-bg-soft);
	border-radius: 8px;
	line-height: 1.6;
	transition: background-color 200ms ease;
}

.company-page .cp-timeline__month {
	display: inline;
	font-weight: 700;
	color: #535353;
	margin-right: 8px;
}

/* --------------------------------------------------------------------------
   3-11) レスポンシブ（企業概要・ブランドコンセプト・沿革）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.company-page .cp-officer {
		grid-template-columns: 160px 1fr;
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.company-page {
		--cp-gap-block:   36px;
	}

	.company-page .cp-main {
		padding: 48px 0 80px;
	}

	.company-page .cp-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.company-page .cp-section--bg {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.company-page .cp-table th,
	.company-page .cp-table td {
		display: block;
		width: 100%;
		padding: 8px 0;
	}

	.company-page .cp-table th {
		padding-top: 16px;
		padding-bottom: 4px;
		border-bottom: none;
	}

	.company-page .cp-table td {
		padding-bottom: 16px;
	}

	.company-page .cp-facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.company-page .cp-services {
		grid-template-columns: 1fr;
	}

	.company-page .cp-brand-elements {
		grid-template-columns: 1fr;
	}

	.company-page .cp-officer {
		grid-template-columns: 1fr;
	}

	.company-page .cp-officer__figure {
		max-width: 160px;
	}

	.cp-cta__btn {
		width: 100%;
		min-width: 0;
	}

	/* タイムライン SP：年カラムを縮小 */
	.company-page .cp-timeline__year-group {
		grid-template-columns: auto 40px 1fr;
	}

	.company-page .cp-timeline__year {
		padding: 0 0 20px 0;
	}

	.company-page .cp-timeline__dot {
		width: 8px;
		height: 8px;
		margin-top: 8px;
	}
	.company-page .cp-timeline__year-group.is-done .cp-timeline__dot {
		box-shadow: 0 0 0 2px #fef2f0, 0 0 0 3px #e63822;
	}
	.company-page .cp-timeline__events {
		padding: 0 0 20px 0;
	}
	.company-page .cp-timeline__year-group:first-child .cp-timeline__line {
		padding: 8px 0 0;
	}
	.company-page .cp-timeline__year-group:first-child .cp-timeline__line::before,
	.company-page .cp-timeline__year-group:first-child .cp-timeline__line::after {
		top: 16px;
	}
}

@media (max-width: 480px) {
	.company-page .cp-facts {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   SECTION 5 : サービスページ共通（.service-page）
   ========================================================================== */

/* --------------------------------------------------------------------------
   5-0) ルート・ベース
   -------------------------------------------------------------------------- */
.service-page {
	--sv-color-main:       #E63822;
	--sv-color-sub:        #B71C1C;
	--sv-color-gray:       #535353;
	--sv-color-light-gray: #d3d3d3;
	--sv-color-bg:         #ffffff;
	--sv-color-bg-soft:    #f8f9fa;
	--sv-color-bg-pale:    #fef2f0;
	color: #0a0a0a;

	--sv-container:   1360px;
	--sv-gap-section: 96px;
	--sv-gap-block:   48px;

	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
}

body.single .service-page,
body .service-page {
	float: none !important;
	display: block !important;
}

.service-page *,
.service-page *::before,
.service-page *::after {
	box-sizing: border-box;
}

.service-page .sv-main {
	width: 100%;
	padding: 0 0 120px;
	background: var(--sv-color-bg);
	overflow-x: clip;
}

/* 通常テキストのline-height統一 */
.service-page p {
	line-height: 1.6;
}

.service-page .sv-container {
	width: 100%;
	max-width: var(--sv-container);
	margin: 0 auto;
	padding: 0 80px;
}

.service-page .sv-section + .sv-section {
	margin-top: var(--sv-gap-section);
}

/* --------------------------------------------------------------------------
   5-0b) スクロールアニメーション
   -------------------------------------------------------------------------- */
.service-page .sv-section {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 800ms ease-out, transform 800ms ease-out;
	will-change: opacity, transform;
}

.service-page .sv-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.no-js .service-page .sv-section {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.service-page .sv-section {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   5-0c) ヒーローバナー（h2の上・画面幅100%）
   -------------------------------------------------------------------------- */
.service-page .sv-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 300px;
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
}

.service-page .sv-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 画像なし時のフォールバック背景 */
.service-page .sv-hero--no-image {
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* テキストオーバーレイ（任意） */
.service-page .sv-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
	.service-page .sv-hero {
		height: 30vh;
		margin-bottom: 48px;
	}
}

/* --------------------------------------------------------------------------
   5-0d) サービスページ イントロ（sv-intro）
   - h2直下のキャッチコピー領域
   - sv-intro__catch : メインカラー・大きめ・太字
   - sv-intro__sub   : スタイル指定なし（通常テキスト継承）
   -------------------------------------------------------------------------- */
.service-page .sv-intro {
	margin-bottom: var(--sv-gap-section);
}

.service-page .sv-intro__catch {
	margin: 0 0 20px;
	font-size: clamp(28px, 2.5vw, 36px);
	font-weight: 600;
	color: #e63822;
	line-height: 1.4;
}

.service-page .sv-intro__sub {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.6;
	margin: 0;
}

/* sv-intro直下またはセクション内の通常リードテキスト */
.service-page .sv-intro__text {
	margin: 0;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5-1) ページヘッダー
   -------------------------------------------------------------------------- */
.service-page .sv-header {
	text-align: left;
	margin-bottom: var(--sv-gap-section);
}

.service-page .sv-header h2.h2-original {
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   5-2) フルブリード背景セクション
   -------------------------------------------------------------------------- */
.service-page .sv-section--bg {
	background: #f8f9fa;
	margin-left: calc((100% - 100vw) / 2);
	margin-right: calc((100% - 100vw) / 2);
	padding: 64px calc((100vw - 100%) / 2);
}

/* --------------------------------------------------------------------------
   5-3) 区切り線付きセクション見出し（サービス内の大項目）
   -------------------------------------------------------------------------- */
.service-page .sv-block-title {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 40px;
}

.service-page .sv-block-title__ja {
	font-size: clamp(28px, 2.5vw, 36px);
	color: #535353;
	line-height: 1.4;
}
.service-page .sv-block-title__ja_main {
	color: #e63822;
}

.service-page .sv-block-title__en {
	font-size: 10px;
	font-weight: 700;
	color: #e63822;
	letter-spacing: 0.15em;
}

/* sv-block-titleと組み合わせて使うサブタイトル */
.service-page .sv-block-subtitle {
	display: block;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	line-height: 1.4;
	color: #535353;
	width: 100%;
}
.service-page .sv-figure {
	margin: 40px auto 60px;
}

/* --------------------------------------------------------------------------
   5-4) 製品・サービスカード（画像＋説明）
   -------------------------------------------------------------------------- */
.service-page .sv-products {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.service-page .sv-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-start;
	gap: 40px;
}

/* 偶数番目は画像左・テキスト右 */
.service-page .sv-product:nth-child(even) .sv-product__body { order: 2; }
.service-page .sv-product:nth-child(even) .sv-product__figure { order: 1; }

.service-page .sv-product__body {
	min-width: 0;
}
/* 
.service-page .sv-product__tag {
	display: inline-block;
	margin: 0 0 20px;
	padding: 4px 12px;
	background: #fef2f0;
	border: 1px solid #e63822;
	border-radius: 40px;
	font-size: 11px;
	font-weight: 700;
	color: #e63822;
	letter-spacing: 0.08em;
} */
.service-page .sv-product__title {
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	color: #535353;
	line-height: 1.6;
	margin: 0 0 24px;
}

.service-page .sv-product__text {
	margin: 0 0 20px;
	line-height: 1.6;
}

.service-page .sv-product__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: #fef2f0;
	border: 1px solid #e63822;
	border-radius: 8px;
}

.service-page .sv-product__list li {
	position: relative;
	line-height: 1.6;
}

.service-page .sv-product__list li h5 {
	color: var(--sv-color-main);
	margin: 0 0 8px;
}

.service-page .sv-product__list li h5::before {
	font-family: 'Material Symbols Outlined';
	content: '\f049';
	font-size: 32px;
	line-height: 1.4;
	color: var(--sv-color-main);
	margin: 0 8px 0 0;
	vertical-align: middle;
	display: inline-block;
}

.service-page .sv-product__figure {
	min-width: 0;
}

.service-page .sv-product__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	background: #f8f9fa;
}

/* --------------------------------------------------------------------------
   5-5) 特徴・強みグリッド（numbered）
   -------------------------------------------------------------------------- */
.service-page .sv-strengths {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.service-page .sv-strength__item {
	position: relative;
	padding: 24px;
	background: #ffffff;
	border-radius: 8px;
	border-left: 4px solid #e63822;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
	overflow: hidden;
	transition: all 300ms ease-in-out;
}

.service-page .sv-strength__item:hover {
	z-index: 2;
	transform: scale(1.05);
}

.service-page .sv-strength__num {
	display: block;
	position: absolute;
	bottom: 16px;
	right: 20px;
	font-size: clamp(64px, 6vw, 80px);
	font-weight: 700;
	color: #fef2f0;
	letter-spacing: -0.02em;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* タイトル・テキストを数字より前面に */
.service-page .sv-strength__title {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	color: var(--sv-color-main);
	position: relative;
	z-index: 1;
}

.service-page .sv-strength__text {
	margin: 0;
	line-height: 1.6;
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   5-6) ツールカード（DX Toolsページ用）
   -------------------------------------------------------------------------- */
.service-page .sv-tools {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.service-page .sv-tool {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.service-page .sv-tool:nth-child(even) .sv-tool__body { order: 2; }
.service-page .sv-tool:nth-child(even) .sv-tool__figure { order: 1; }

.service-page .sv-tool__category {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	color: #e63822;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.service-page .sv-tool__title {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	color: #535353;
	line-height: 1.3;
}

.service-page .sv-tool__subtitle {
	margin: 0 0 20px;
	font-size: 0.85em;
	color: #e63822;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.service-page .sv-tool__text {
	margin: 0 0 16px;
	line-height: 1.9;
}

.service-page .sv-tool__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.service-page .sv-tool__list li {
	padding-left: 1.2em;
	position: relative;
	line-height: 1.6;
}

.service-page .sv-tool__list li::before {
	content: '–';
	position: absolute;
	left: 0;
	color: #e63822;
	font-weight: 700;
}

.service-page .sv-tool__figure {
	min-width: 0;
}

.service-page .sv-tool__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: contain;
	max-height: 320px;
	background: #f8f9fa;
	padding: 16px;
}

/* --------------------------------------------------------------------------
   5-7) 機能3点カード（Vision & Sensing の各製品機能）
   -------------------------------------------------------------------------- */
.service-page .sv-features {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 40px;
}

.service-page .sv-feature {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 40px;
	align-items: start;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	transition: all 300ms ease-in-out;
}
.service-page .sv-feature:hover {
	transform: scale(1.05);
}

.service-page .sv-main .sv-container .sv-section--emotion .sv-features .sv-feature {
	background: #fff;
	border: 1px solid #d3d3d3;
}

.service-page .sv-feature__figure {
	min-width: 0;
}

.service-page .sv-feature__image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
	aspect-ratio: 4/3;
	background: #d3d3d3;
}

.service-page .sv-feature__num {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: #e63822;
	letter-spacing: 0.1em;
}

.service-page .sv-feature__title {
	margin: 20px 0;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	color: #535353;
	line-height: 1.4;
}

.service-page .sv-feature__text {
	margin: 0 0 20px;
	line-height: 1.9;
}

.service-page .sv-feature__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.service-page .sv-feature__list li {
	position: relative;
	line-height: 1.6;
}
.service-page .sv-feature__list li h5 {
	color: var(--sv-color-main);
	margin: 0 0 8px;
}
.service-page .sv-feature__list li h5::before {
	font-family: 'Material Symbols Outlined';
	content: '\e726';
	font-size: 24px;
	line-height: 1.4;
	color: var(--sv-color-main);
	margin: 0 8px 0 0;
	vertical-align: middle;
	display: inline-block;
}
.service-page .sv-feature__list li::before {
	font-family: 'Material Symbols Outlined';
	content: '\f88b';
	font-size: 24px;
	line-height: 1.4;
	color: var(--sv-color-main);
	margin: 0 8px 0 0;
	vertical-align: middle;
	display: inline-block;
}
.service-page .sv-feature__list li:first-child::before {
	display: none;
}

/* --------------------------------------------------------------------------
   5-8) ケーススタディカード（Roboticsページ）
   -------------------------------------------------------------------------- */
.service-page .sv-cases {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.service-page .sv-case__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #d3d3d3;
	overflow: hidden;
	transition: box-shadow 200ms ease;
}

.service-page .sv-case__item:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.service-page .sv-case__figure {
	margin: 0;
	line-height: 0;
}

.service-page .sv-case__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: contain;
	padding: 8px;
}

.service-page .sv-case__body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex-grow: 1;
}

.service-page .sv-case__label {
	font-size: 10px;
	font-weight: 600;
	color: #e63822;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.service-page .sv-case__title {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	color: #535353;
	line-height: 1.4;
}

.service-page .sv-case__text {
	margin: 0;
	line-height: 1.6;
	flex-grow: 1;
}

/* --------------------------------------------------------------------------
   5-9) Coming Soon ページ
   -------------------------------------------------------------------------- */
.service-page .sv-coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 24px;
	gap: 24px;
}

.service-page .sv-coming-soon__en {
	font-size: clamp(48px, 6vw, 80px);
	font-weight: 700;
	color: #d3d3d3;
	letter-spacing: 0.05em;
	line-height: 1;
}

.service-page .sv-coming-soon__text {
	margin: 0;
	color: #535353;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   5-10) サービス間ナビゲーション（FA下層ページ共通）
   -------------------------------------------------------------------------- */
.service-page .sv-subnav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.service-page .sv-subnav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #d3d3d3;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
	will-change: transform;
}

.service-page .sv-subnav__item:hover {
	background: #fef2f0;
	border-color: #e63822;
	transform: translateY(-2px);
}

.service-page .sv-subnav__item--active {
	background: #fef2f0;
	border-color: #e63822;
	pointer-events: none;
}

.service-page .sv-subnav__label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.service-page .sv-subnav__en {
	font-size: 11px;
	font-weight: 700;
	color: #e63822;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.service-page .sv-subnav__ja {
	font-size: 0.95em;
	font-weight: 700;
	color: #535353;
}

.service-page .material-symbols-outlined {
	color: var(--sv-color-main);
	font-size: 1.5em;
}

.service-page .sv-subnav__item--active .material-symbols-outlined {
	color: var(--sv-color-light-gray);
}

/* --------------------------------------------------------------------------
   5-11) CTA
   -------------------------------------------------------------------------- */
.service-page .sv-cta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   5-12) マーキー（cp-marqueeと共通のため追加スタイルなし）
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5-13) レスポンシブ
   -------------------------------------------------------------------------- */
   @media (max-width: 1024px) {
	.service-page .sv-container {
		padding: 0 40px;
	}
}
@media (max-width: 900px) {
	.service-page .sv-product,
	.service-page .sv-tool {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.service-page .sv-product:nth-child(n) .sv-product__body,
	.service-page .sv-tool:nth-child(n) .sv-tool__body { order: 2; }
	.service-page .sv-product:nth-child(n) .sv-product__figure,
	.service-page .sv-tool:nth-child(n) .sv-tool__figure { order: 1; }

	.service-page .sv-feature {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.service-page {
		--sv-gap-section: 55px;
		--sv-gap-block:   36px;
	}

	.service-page .sv-main {
		padding: 48px 0 80px;
	}

	.service-page .sv-container {
		padding: 0 20px;
	}

	.service-page .sv-section--bg {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.service-page .sv-strengths,
	.service-page .sv-cases,
	.service-page .sv-subnav {
		grid-template-columns: 1fr;
	}
	.service-page .sv-product__list li h5 {
		margin: 0 0 4px;
	}
}

/* ==========================================================================
   SECTION 4 : テキストマーキー（無限横スクロール）
   - .cp-marquee をどのページでも流用可能なグローバル定義
   - テキストを2セット並べることでシームレスにループ
   ========================================================================== */

/* --------------------------------------------------------------------------
   アニメーション定義
   -------------------------------------------------------------------------- */
@keyframes cp-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   マーキーラッパー
   -------------------------------------------------------------------------- */
.cp-marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	/* フルブリード */
	margin-top: 120px;
	margin-left: calc((100% - 100vw) / 2);
	margin-right: calc((100% - 100vw) / 2);
	padding: 0;
	line-height: 1;
	user-select: none;
	-webkit-user-select: none;
}
@media (max-width: 767px) {
	.cp-marquee {
		margin-top: 80px;
	}
}

/* --------------------------------------------------------------------------
   スクロールトラック（テキストを2セット格納）
   -------------------------------------------------------------------------- */
.cp-marquee__track {
	display: inline-flex;
	animation: cp-marquee-scroll 200s linear infinite;
	will-change: transform;
}

/* ホバーで一時停止 */
.cp-marquee:hover .cp-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.cp-marquee__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   テキスト1セット分
   -------------------------------------------------------------------------- */
.cp-marquee__item {
	display: inline-block;
	font-size: 4.5rem;
	font-weight: 700;
	color: #d3d3d3;
	letter-spacing: 0.02em;
	padding-right: 1em;
	line-height: 1.1;
}