@charset "UTF-8";
/* CSS Document */
.cts2colArea{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
}


/*
	部門ごとの課題解決（アンカーリンクKV）
-----------------------------------------------------------------------------------------------*/
.deptSolutionWrapper{
	margin-bottom: 100px;
	background: var(--gradation-primary-red);
}
.deptSolutionInner{
	min-height: 600px;
	position: relative;
}
/* 背景画像 */
.deptSolutionBg{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: contain;
	pointer-events: none;
}
/* 白楕円 */
.deptSolutionStage{
	width: 670px;
	height: 390px;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
}
/* 赤楕円タイトル */
.deptSolutionTitArea{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 140px;
	background: var(--gradation-primary-red);
	border-radius: 50%;
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
}
.deptSolutionTitArea .tit{
	font-size: 2.2rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	color: #fff;
	letter-spacing: 0.2rem;
}
.deptSolutionTitArea .tit span{
	font-size: 1.8rem;
}

/* 各部門（イラスト＋アンカーボタン）
============================== */
.deptSolutionArea{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: absolute;
}
/* イラスト */
.deptSolutionArea .illust{
	width: 130px;
}
/* ボタン */
.deptSolutionArea .btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	min-height: 36px;
	padding: 5px 25px 5px 10px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.0;
	color: #fff;
	background-color: var(--color-natural-grey-900);
	border-radius: 180px;
	position: relative;
	transition: all 0.4s;
}
.deptSolutionArea .btn::after{
	content: "";
	width: 26px;
	aspect-ratio: 1/1;
	background: url("../images/ico_arrow_bk.svg") #fff no-repeat center center / 8px auto;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%) rotate(90deg);
}
/* hover */
@media (any-hover: hover){
	.deptSolutionArea:hover{
		opacity: 1;
	}
	.deptSolutionArea:hover .btn{
		background-color: var(--color-primary-red-default);
	}
}

/* 各部門（イラスト＋アンカーボタン）配置
============================== */
/* 営業 */
.deptIssue01{
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
}
/* 設計 */
.deptIssue02{
	top: 14%;
	right: 28%;
}
/* 購買・調達 */
.deptIssue03{
	top: 50%;
	right: 17%;
	transform: translateY(-50%);
}
/* 生産管理 */
.deptIssue04{
	right: 28%;
	bottom: 14%;
}
/* 資材・物流 */
.deptIssue05{
	left: 50%;
	bottom: 6%;
	transform: translateX(-50%);
}
/* 経理 */
.deptIssue06{
	left: 28%;
	bottom: 14%;
}
/* サービス */
.deptIssue07{
	top: 50%;
	left: 17%;
	transform: translateY(-50%);
}
/* システム */
.deptIssue08{
	top: 14%;
	left: 28%;
}


/*
	課題解決イメージ 一覧
-----------------------------------------------------------------------------------------------*/
/* アンカーリンクボタン
============================== */
.pageInnovationList .cmnListAnkerLinkWrapper{
	width: 230px;
	position: sticky;
	top: 80px;
}

/* 課題一覧
============================== */
.listIssueWrapper{
	width: 840px;
}
/* リスト */
.listIssue{
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.listIssue > li{
	display: flex;
	flex-direction: column;
}
.listIssue > li .titArea{
	position: relative;
}
.listIssue > li .tit{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 10px;
	font-size: 2.0rem;
	font-weight: 500;
	color: #fff;
	background: var(--gradation-primary-red);
	border-radius: var(--border-radius-5) var(--border-radius-5) 0 0;
}
.listIssue > li .item{
	width: auto;
	height: 70px;
	position: absolute;
	bottom: 10px;
	pointer-events: none;
}
.listIssue > li:nth-of-type(odd) .item{
	left: 30px;
}
.listIssue > li:nth-of-type(even) .item{
	right: 30px;
}
.listIssue > li .box{
	padding: 30px;
	background-color: var(--color-natural-grey-50);
	border-radius: 0 0 var(--border-radius-5) var(--border-radius-5);
}


/*
	課題解決イメージ 詳細
-----------------------------------------------------------------------------------------------*/
/* サイドナビゲーション
　　※デザインはアンカーリンクと共通
　　※クリック時は別ページへ遷移
============================== */
.pageInnovationDetail .cmnListAnkerLinkWrapper{
	width: 230px;
	position: sticky;
	top: 80px;
}
/* ボタン */
.pageInnovationDetail .cmnListAnkerLink > li .btn::after{
	transform: translateY(-50%) rotate(0deg) scale(0.23);
}
/* hover */
@media (any-hover: hover){
	.pageInnovationDetail .cmnListAnkerLink > li a:hover .btn::after{
		background-image: url("../images/ico_arrow_wh.svg");
		transform: translateY(-50%) rotate(0deg) scale(1);
	}
}
/* 各課題ページ選択時 */
.issue_sales .cmnListAnkerLink a.btnissue_sales,
.issue_design .cmnListAnkerLink a.btnissue_design,
.issue_procurement .cmnListAnkerLink a.btnissue_procurement,
.issue_production .cmnListAnkerLink a.btnissue_production,
.issue_logistics .cmnListAnkerLink a.btnissue_logistics,
.issue_accounting .cmnListAnkerLink a.btnissue_accounting,
.issue_service .cmnListAnkerLink a.btnissue_service,
.issue_system .cmnListAnkerLink a.btnissue_system{
	color: var(--color-primary-red-default);
	background-color: var(--color-primary-red-background);
}
.issue_sales .cmnListAnkerLink a.btnissue_sales .txt,
.issue_design .cmnListAnkerLink a.btnissue_design .txt,
.issue_procurement .cmnListAnkerLink a.btnissue_procurement .txt,
.issue_production .cmnListAnkerLink a.btnissue_production .txt,
.issue_logistics .cmnListAnkerLink a.btnissue_logistics .txt,
.issue_accounting .cmnListAnkerLink a.btnissue_accounting .txt,
.issue_service .cmnListAnkerLink a.btnissue_service .txt,
.issue_system .cmnListAnkerLink a.btnissue_system .txt{
	padding-left: 10px;
}
.issue_sales .cmnListAnkerLink a.btnissue_sales .btn,
.issue_design .cmnListAnkerLink a.btnissue_design .btn,
.issue_procurement .cmnListAnkerLink a.btnissue_procurement .btn,
.issue_production .cmnListAnkerLink a.btnissue_production .btn,
.issue_logistics .cmnListAnkerLink a.btnissue_logistics .btn,
.issue_accounting .cmnListAnkerLink a.btnissue_accounting .btn,
.issue_service .cmnListAnkerLink a.btnissue_service .btn,
.issue_system .cmnListAnkerLink a.btnissue_system .btn{
	margin-right: 5px;
}
.issue_sales .cmnListAnkerLink a.btnissue_sales .btn::after,
.issue_design .cmnListAnkerLink a.btnissue_design .btn::after,
.issue_procurement .cmnListAnkerLink a.btnissue_procurement .btn::after,
.issue_production .cmnListAnkerLink a.btnissue_production .btn::after,
.issue_logistics .cmnListAnkerLink a.btnissue_logistics .btn::after,
.issue_accounting .cmnListAnkerLink a.btnissue_accounting .btn::after,
.issue_service .cmnListAnkerLink a.btnissue_service .btn::after,
.issue_system .cmnListAnkerLink a.btnissue_system .btn::after{
	background-image: url("../images/ico_arrow_wh.svg");
	transform: translateY(-50%) rotate(0deg) scale(1);
}

/* 記事詳細
============================== */
.pageInnovationDetail .articleDetailWrapper{
	width: 840px;
}


@media screen and (max-width:812px){
	.cts2colArea{
		flex-direction: column-reverse;
		gap: 30px;
	}
	.pageInnovationList .cts2colArea{
		flex-direction: column-reverse;
	}


	/*
		部門ごとの課題解決（アンカーリンクKV）
	-----------------------------------------------------------------------------------------------*/
	.deptSolutionWrapper{
		margin-bottom: 30px;
	}
	.deptSolutionInner{
		min-height: 450px;
	}
	/* 背景画像 */
	.deptSolutionBg{
		display: none;
	}
	/* 白楕円 */
	.deptSolutionStage{
		width: 300px;
		aspect-ratio: 1/1;
		height: auto;
	}
	/* 赤楕円タイトル */
	.deptSolutionTitArea{
		width: 120px;
		aspect-ratio: 1/1;
		height: auto;
	}
	.deptSolutionTitArea .tit{
		font-size: 1.6rem;
	}
	.deptSolutionTitArea .tit span{
		font-size: 1.4rem;
	}

	/* 各部門（イラスト＋アンカーボタン）
	============================== */
	.deptSolutionArea{
		gap: 5px;
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
	}
	/* イラスト */
	.deptSolutionArea .illust{
		width: 80px;
	}
	/* ボタン */
	.deptSolutionArea .btn{
		width: 90px;
		min-height: 20px;
		padding: 5px 16px 5px 10px;
		font-size: 1.1rem;
	}
	.deptSolutionArea .btn::after{
		width: 16px;
		right: 2px;
	}

	/* 各部門（イラスト＋アンカーボタン）配置
	============================== */
	/* 営業 */
	.deptIssue01{
		transform: translate(-50%, -210%);
	}
	/* 設計 */
	.deptIssue02{
		transform: translate(65%, -165%);
	}
	/* 購買・調達 */
	.deptIssue03{
		transform: translate(105%, -50%);
	}
	/* 生産管理 */
	.deptIssue04{
		transform: translate(65%, 65%);
	}
	/* 資材・物流 */
	.deptIssue05{
		transform: translate(-50%, 105%);
	}
	/* 経理 */
	.deptIssue06{
		transform: translate(-165%, 65%);
	}
	/* サービス */
	.deptIssue07{
		transform: translate(-205%, -50%);
	}
	/* システム */
	.deptIssue08{
		transform: translate(-165%, -165%);
	}
	

	/*
		課題解決イメージ 一覧
	-----------------------------------------------------------------------------------------------*/
	/* アンカーリンクボタン
	============================== */
	.pageInnovationList .cmnListAnkerLinkWrapper{
		width: 100%;
		position: static;
		top: 0;
	}
	.pageInnovationList .cmnListAnkerLinkWrapper .cmnListAnkerLink > li .btn::after{
		transform: translate(50%, -50%) rotate(-90deg) scale(1);
	}

	/* 課題一覧
	============================== */
	.listIssueWrapper{
		width: 100%;
	}
	/* リスト */
	.listIssue{
		gap: 25px;
	}
	.listIssue > li .tit{
		min-height: 35px;
		padding: 5px;
		font-size: 1.6rem;
	}
	.listIssue > li .item{
		height: 45px;
		bottom: 5px;
	}
	.listIssue > li:nth-of-type(odd) .item{
		left: 20px;
	}
	.listIssue > li:nth-of-type(even) .item{
		right: 20px;
	}
	.listIssue > li .box{
		padding: 20px;
	}


	/*
		課題解決イメージ 詳細
	-----------------------------------------------------------------------------------------------*/
	/* サイドナビゲーション
	　　※デザインはアンカーリンクと共通
	　　※クリック時は別ページへ遷移
	============================== */
	.pageInnovationDetail .cmnListAnkerLinkWrapper{
		width: 100%;
		position: static;
		top: 0;
	}
	/* ボタン */
	.pageInnovationDetail .cmnListAnkerLink > li .btn::after{
		transform: translate(50%, -50%) rotate(0deg) scale(1);
	}
	/* 各課題ページ選択時 */
	.issue_sales .cmnListAnkerLink a.btnissue_sales .btn::after,
	.issue_design .cmnListAnkerLink a.btnissue_design .btn::after,
	.issue_procurement .cmnListAnkerLink a.btnissue_procurement .btn::after,
	.issue_production .cmnListAnkerLink a.btnissue_production .btn::after,
	.issue_logistics .cmnListAnkerLink a.btnissue_logistics .btn::after,
	.issue_accounting .cmnListAnkerLink a.btnissue_accounting .btn::after,
	.issue_service .cmnListAnkerLink a.btnissue_service .btn::after,
	.issue_system .cmnListAnkerLink a.btnissue_system .btn::after{
		transform: translate(50%, -50%) rotate(0deg) scale(1);
	}

	/* 記事詳細
	============================== */
	.pageInnovationDetail .articleDetailWrapper{
		width: 100%;
	}
}