/*==================================

製品・ソリューション > 製品カテゴリトップページ

===================================*/

/*変数設定*/

:root {

	--main-color: #112b78;

	--sub-color: #1d68cc;

	--sub-color02: #2C50B8;

	--bg-main: #e7eaf1;

	--bg-color02: #eef0f6;

	--bg-color03: #f0f3fa;

	/*その他*/

	--light-purple: #93a3d3;

}



/*webフォント読み込み*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Zen+Maru+Gothic&display=swap" rel="stylesheet');





/*******************************************************************/

/* PC・SP共通パーツ */

/*******************************************************************/



/*******************************************************************/

/* PC */

/*******************************************************************/

@media print, screen and (min-width: 769px) {

	/*<start>==========================================================*/

	.pc-none {

		display: none !important;

	}

	.sp-none {

		/* display: block !important; */

	}

	#sfooter {

		margin-top: 0 !important;

	}





	/* 見出しスタイル*/

	#main h2{

		margin-bottom: 40px;

		padding-bottom: 30px;

		text-align: center;

		position: relative;

	}

	#main h2:after{

		content: "";

		margin: auto;

		width: 60px;

		height: 1px;

		display: inline-block;

		background: var(--sub-color02);

		position: absolute;

		left: 0;

		right: 0;

		bottom: 0;

	}

	#main h2 > span{

		margin-bottom: 8px;

		color: var(--sub-color02);

		font-size: 16px;

		font-weight: 600;

		display: inline-block;

	}

	#main h2 > p{

		color: #2e3036;

		font-size: 30px;

		font-weight: 600;

		letter-spacing: 0.08em;

	}

	#main h2 > p > span{

		color: var(--sub-color02);

	}

	#main h3 {

		margin: 40px 0 25px;

		text-align: center;

		position: relative;

		font-size: 20px;

	}



	/* 汎用ボタンスタイル*/

	a.btn_nomal{

		margin: 0 auto;

		padding: 17px 76px 17px 30px;

		color: #fff;

		text-decoration: none;

		font-size: 18px;

		display: block;

		width: fit-content;

		background: linear-gradient(-10deg, #325bc1 0%, #325bc1 50%, var(--sub-color02) 50%, var(--sub-color02) 100%);

		border-radius: 10px;

		box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);

		position: relative;

	}

	a.btn_nomal span{

		font-weight: 600;

	}

	a.btn_nomal:hover{

		opacity: 0.8;

	}

	a.btn_nomal:after{

		content: "";

		margin: auto;

		width: 32px;

		height: 32px;

		display: block;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	a.btn_entry:after{

		width: 32px;

		height: 32px;

		background: url(/system/products/common/images/icon_entry.svg) no-repeat;

		background-position: center center;

		background-size: contain;

		bottom: -3px;

		right: 22px;

	}

	a.btn_mail{

		padding: 17px 120px 17px 80px;

	}

	a.btn_mail:after{

		width: 35px;

		height: 25px;

		background: url(/system/products/common/images/icon_mail.svg) no-repeat;

		background-position: center center;

		background-size: contain;

		right: 70px;

	}



	/* 汎用白ボタン*/

	a.moreBtn{

		margin: 60px auto 0;

		padding: 14px 60px;

		color: var(--main-color);

		font-size: 17px;

		font-weight: 600;

		text-align: center;

		text-decoration: none;

		line-height: 1.2;

		width: fit-content;

		min-width: 364px;

		background: #fff;

		display: flex;

		align-items: flex-start;

		justify-content: center;

		border: 1px solid #8794bb;

		border-radius: 6px;

		box-sizing: border-box;

	}

	a.moreBtn > span{

		margin-left: 32px;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 20px;

	}

	a.moreBtn > span:after{

		content: "";

		margin-top: -3px;

		width: 10px;

		height: 10px;

		display: block;

		border: 2px solid #93a3d3;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

	}

	a.moreBtn:hover{

		background: #f1f1f1;

	}



	a.moreBtn.reverse > span{

		margin-left: 0;

		margin-right: 32px;

		flex-direction: row-reverse;

	}

	a.moreBtn.reverse > span:after{

		transform: rotate(-135deg);

	}





	/*=================================================================*/

	/*	生産管理・原価管理 */

	/*=================================================================*/

	#main{

		margin: 0 0 100px 0;

		width: 100%;

		box-sizing: border-box;

	}



	/* タイトル部分

	-----------------------------------*/

	#mv {

		/* background: url("/system/products/common/images/bg_mainvisual_csks.png") no-repeat; */

		background: #DDD;

		background-position: top center;

		background-size: cover;

		height: 570px;

		position: relative;

		z-index: 0;

	}

	#mv .inner{

		margin: 0 auto;

		display: flex;

		align-items: center;

		width: 100%;

		max-width: 1160px;

		height: 100%;

	}

	#mv .bgImgWrap {

		position: absolute;

		left: 0;

		top: 0;

		width: 100%;

		height: 100%;

		z-index: -1;

	}

	#mv .bgImgWrap img {

		width: 100%;

		height: 100%;

		-o-object-fit: cover;

		object-fit: cover;

		overflow: hidden;

	}



	#mv dl.title{

		margin: 40px;

		padding: 70px 80px;

		text-align: center;

		background: rgba(255, 255, 255, 0.87);

	}

	#mv dl.title dt{

		padding-bottom: 28px;

		position: relative;

	}

	#mv dl.title dt:after{

		content: "";

		margin: auto;

		width: 60px;

		height: 1px;

		display: block;

		background: var(--main-color);

		position: absolute;

		bottom: 0;

		left: 0;

		right: 0;

	}

	#mv dl.title dt p{

		color: var(--main-color);

		font-size: 34px;

		font-weight: 600;

	}

	#mv dl.title dt > span.sub_english{

		margin-top: 10px;

		color: var(--sub-color);

		font-family: "Montserrat", sans-serif;

		font-size: 16px;

		font-weight: 400;

		letter-spacing: 0.08em;

		display: inline-block;

	}



	#mv dl.title dd{

		margin-top: 40px;

	}

	#mv dl.title dd > p{

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		line-height: 1.6;

	}

	#mv dl.title dd .btn_nomal{

		margin-top: 40px;

	}





	/* ページ内リンク

	-----------------------------------*/

	.innerLink{

		padding: 0 40px;

		background: var(--bg-main);

		width: 100%;

		box-sizing: border-box;

	}

	.innerLink ul{

		min-height: 80px;

		display: flex;

		align-items: stretch;

		justify-content: center;

		flex-wrap: wrap;

	}

	.innerLink ul li{

		min-width: 158px;

		height: 80px;

		position: relative;

	}

	.innerLink ul li:before{

		content: "";

		margin: auto;

		width: 1px;

		height: 30px;

		display: block;	

		background: #fff;

		position: absolute;

		left: 0;

		top: 0;

		bottom: 0;

		z-index: 1;

	}

	.innerLink ul li:last-child:after{

		content: "";

		margin: auto;

		width: 1px;

		height: 30px;

		display: block;	

		background: #fff;

		position: absolute;

		right: 0;

		top: 0;

		bottom: 0;

	}

	.innerLink ul li a{

		padding: 10px;

		color: #000;

		font-size: 16px;

		text-decoration: none;

		background: var(--bg-main);

		width: 100%;

		height: 100%;

		box-sizing: border-box;

		display: flex;

		align-items: center;

		justify-content: center;

		position: relative;

		transition: .2s;

	}

	.innerLink ul li a:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

		border: 2px solid #93a3d3;

		border-width: 0 2px 2px 0;

		transform: rotate(45deg);

		position: absolute;

		left: 0;

		right: 0;

		bottom: 14px;

		transition: .2s;

	}

	.innerLink ul li a:hover{

		background: #dde4f7;

		transition: .2s;

	}

	.innerLink ul li a:hover:after{

		bottom: 8px;

		transition: .2s;

	}





	/* 特長

	-----------------------------------*/

	section.feature{

		margin: 0 auto;

		padding: 80px 40px 80px;

		width: 100%;

		max-width: 1200px;

		box-sizing: border-box;

	}

	.feature_list{

		display: flex;

		flex-wrap: wrap;

		gap: 40px;

	}

	.feature_list > dl{

		padding: 20px 36px 30px;

		background: var(--bg-main);

		box-sizing: border-box;

		width: calc( (100% - 40px) / 2 );

		position: relative;

		counter-increment: item; /* 各dlでカウント */

	}

	.feature_list > dl:before{

		content: counter(item, decimal-leading-zero); /* ゼロ埋め2桁 */

		margin: auto;

		color: var(--sub-color02);

		font-family: "Montserrat", sans-serif;

		font-size: 42px;

		font-weight: 400;

		width: fit-content;

		position: absolute;

		left: 0;

		right: 0;

		top: -0.6em;

	}

	.feature_list > dl >dt{

		display: flex;

		align-items: center;

		gap: 20px;

	}

	.feature_list > dl >dt span{

		background: #fff;

		width: 102px;

		height: 102px;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 12px;

		box-shadow: 0 0.6px 1.28px rgba(0, 0, 0, 0.2);

	}

	.feature_list > dl > dt p{

		color: var(--main-color);

		font-size: 20px;

		font-weight: 600;

		line-height: 1.4;

		flex: 1;

	}

	.feature_list > dl > dd{

		margin-top: 20px;

		font-size: 16px;

		line-height: 1.6;

	}

/*幅調整用*/

/* 	@media screen and (min-width: 1300px) {

		section.feature{

			max-width: 1400px;

		}

		.feature_list > dl{

			width: calc( (100% - 80px) / 3 );

		}

} */

/*3カラム用*/

.feature_list.column_3{

	gap: 30px;

}

.feature_list.column_3 > dl{

	padding: 24px 20px 20px;

	width: calc( (100% - 60px) / 3 );

}

.feature_list.column_3 > dl >dt p{

	font-size: 18px;

}

@media screen and (max-width: 1000px) {

	.feature_list.column_3 > dl{

		width: calc( (100% - 30px) / 2 );

	}

}





	/* 相談申込み

	-----------------------------------*/

	.entry_box{

		background: var(--bg-main);

		width: 100%;

	}

	.entry_box .inner{

		margin: 0 auto;

		padding: 40px 40px 50px;

		text-align: center;

		width: 100%;

		max-width: 1200px;

	}

	.entry_box p.call {

		margin: 0 auto 12px;

		padding: 0 40px;

		color: var(--main-color);

		font-size: 16px;

		width: fit-content;

		position: relative;

	}

	.entry_box p.call:before,

	.entry_box p.call:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 22px;

		display: block;

		border: 1px solid #bbc3d8;

		border-width: 0 1px 0 1px;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	.entry_box p.call:before{

		transform: skewX(30deg);

		transform-origin: top left; 

		left: 0;

	}

	.entry_box p.call:after{

		transform: skewX(-30deg);

		transform-origin: top right; 

		right: 0;

	}





	/* ラインナップ

	-----------------------------------*/

	section.products{

		margin: 0 auto;

		padding: 80px 20px 60px;

		width: 100%;

		max-width: 1320px;

		box-sizing: border-box;

	}



	ul.lineup{

		display: flex;

		flex-wrap: wrap;

		align-items: stretch;

		justify-content: center;

		gap: 20px;

	}

	ul.lineup > dl{

		width: calc((100% - (20px * 3)) / 4);

		max-width: 304px;

		display: flex;

		flex-direction: column;

		border: 2px solid var(--bg-main);

		box-sizing: border-box;

	}

	/*幅調整用*/

	@media screen and (max-width: 1280px) {

		ul.lineup > dl{

			width: calc( (100% - 40px) / 3 );

		}

	}

	ul.lineup > dl > dt{

		padding: 10px;

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

		text-align: center;

		background: var(--bg-main);

	}

	ul.lineup > dl > dd{

		padding: 0 20px 20px;

		display: flex;

		flex-direction: column;

		flex: 1;

	}

	ul.lineup > dl > dd .logo a,

	ul.lineup > dl > dd .logo span {

		padding: 15px;

		height: 50px;

		display: flex;

		align-items: center;

		justify-content: center;

		text-decoration: none

	}

	ul.lineup > dl > dd .logo a p,

	ul.lineup > dl > dd .logo span p {

		padding: 8px;

		font-size: 18px;

		font-weight: 600;

		line-height: 1.4;

		text-align: center;

		color: #000;

	}

	ul.lineup > dl > dd .logo a:hover{

		opacity: 0.8;

	}

	ul.lineup > dl > dd .logo a img{

		width: 100%;

		height: 100%;

		object-fit: contain;

	}

	

	ul.lineup > dl > dd > p{

		margin-bottom: auto;

		font-size: 16px;

	}

	ul.lineup > dl > dd a.detail{

		margin-top: 20px;

		padding: 6px 60px;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		text-decoration: none;

		width: 100%;

		display: inline-block;

		text-align: center;

		background: #fff;

		border: 2px solid var(--bg-main);

		box-sizing: border-box;

		position: relative;

	}

	ul.lineup > dl > dd a.detail:hover{

		background: var(--bg-main);

	}

	ul.lineup > dl > dd a.detail:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid var(--sub-color);

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 50px;

		top: 0;

		bottom: 0;

	}



	/*幅半分用スタイル*/

	section.products .cat_list{

		display: flex;

		flex-wrap: wrap;

		justify-content: center;

		gap: 20px;

	}

	section.products .cat_list .w_half{

		width: calc( (100% - 20px) / 2 );

	}

	section.products .cat_list .w_half ul.lineup > dl{

		width: calc((100% - (20px * 1)) / 2);

	}

	/*幅調整用*/

	@media screen and (max-width: 1280px) {

		section.products .cat_list .w_half ul.lineup > dl{

			width: 100%;

			max-width: 400px;

		}

	}



	ul.lineup > dl > dd .btns{

		margin-top: 16px;

		display: flex;

		align-items: center;

		gap: 6px;

	}

	ul.lineup > dl > dd .btns > a{

		padding: 6px 10px 4px;

		color: #fff;

		font-size: 13px;

		line-height: 1.2;

		text-align: center;

		text-decoration: none;

		display: flex;

		flex: 1;

		align-content: center;

		justify-content: center;

		background: var(--sub-color);

		border-radius: 4px;

	}

	ul.lineup > dl > dd .btns > a:hover{

		opacity: 0.8;

	}

	ul.lineup > dl > dd .btns > a span{

		margin-left: 8px;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 10px;

	}

	ul.lineup > dl > dd .btns > a.dl span:after{

		content: "";

		width: 11px;

		height: 11px;

		display: block;

		background: url(/system/products/common/images/icon_dl.svg);

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center center;

	}

	ul.lineup > dl > dd .btns > a.contact span:after{

		content: "";

		width: 11px;

		height: 11px;

		display: block;

		background: url(/system/products/common/images/icon_contact.svg);

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center center;

	}





	/* 導入事例

	-----------------------------------*/

	section.jirei{

		width: 100%;

		background: #f7f7f7;

		box-sizing: border-box;

	}

	section.jirei .inner{

		margin: 0 auto;

		padding: 90px 20px 60px;

		width: 100%;

		max-width: 1320px;

		box-sizing: border-box;

	}



	ul.caseList{

		display: flex;

		flex-wrap: wrap;

		gap: 20px;

	}

	ul.caseList > a{

		background: #fff;

		text-decoration: none;

		width: calc((100% - (20px * 3)) / 4);

		max-width: 304px;

		display: flex;

		flex-direction: column;

	}

	ul.caseList > a:visited,

	ul.caseList > a:hover{

		color: var(--sub-color02) !important;

	}

	/*幅調整用*/

	@media screen and (max-width: 1000px) {

		ul.caseList > a{

			width: calc( (100% - 40px) / 3 );

		}

	}

	ul.caseList > a:hover{

		opacity: 0.8;

		background: #d5dbf1;

	}



	ul.caseList > a > .visual img{

		width: 100%;

		aspect-ratio: 7 / 5;

		object-fit: cover;

	}



	ul.caseList > a > dl{

		padding: 24px 24px 18px;

	}

	ul.caseList > a > dl > dt{

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

	}

	ul.caseList > a > dl > dd{

		margin-top: 15px;

		color: #000;

		font-size: 15px;

	}

	ul.caseList > a > dl > .tag{

		margin-top: 16px;

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	ul.caseList > a > dl > .tag span{

		padding: 6px;

		color: var(--main-color);

		font-size: 13px;

		line-height: 1.1;

		background: var(--bg-main);

		border-radius: 5px;

		display: inline-block;

	}



	ul.caseList > a > .detail{

		margin: auto 24px 24px;

	}

	ul.caseList > a > .detail > p{

		padding: 5px;

		font-size: 15px;

		font-weight: 600;

		background: #fff;

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		border: 1px solid var(--sub-color02);

		box-sizing: border-box;

	}

	ul.caseList > a > .detail > p span{

		margin-left: 8px;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 10px;

	}

	ul.caseList > a > .detail > p span:after{

		content: "";

		margin-top: -3px;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid var(--sub-color02);

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

	}





	/* 選び方

	-----------------------------------*/

	section.choice{

		margin: 0 auto;

		padding: 80px 40px 60px;

		width: 100%;

		max-width: 1200px;

		box-sizing: border-box;

	}



	/*製品説明リスト*/

	.explanation_list{

		display: flex;

		flex-direction: column;

		gap: 40px;

	}

	.explanation_list .product .title{

		background: var(--bg-color02);

		display: flex;

		align-items: stretch;

	}

	.explanation_list .product .title .txtBox{

		padding: 40px 40px 40px 80px;

		display: flex;

		flex-direction: column;

		justify-content: center;

		box-sizing: border-box;

		flex: 1;

		position: relative;

	}

	.explanation_list .product .title .txtBox:before{

		content: "";

		width: 40px;

		height: 40px;

		display: block;

		background: var(--sub-color02);

		clip-path: polygon(0 0, 100% 0, 0 100%);

		position: absolute;

		left: 0;

		top: 0

	}

	.explanation_list .product .title .txtBox > h3{

		margin-bottom: 14px;

		color: var(--main-color);

		font-size: 24px;

		font-weight: 600;

	}

	.explanation_list .product .title .txtBox > p{

		font-size: 18px;

	}



	.explanation_list .product .title .imgBox{

		width: 50%;

	}

	.explanation_list .product .title .imgBox img{

		width: 100%;

		height: 100%;

		object-fit: cover;

	}



	.explanation_list .product .detail{

		padding: 40px 80px 60px;

		background: var(--bg-main);

		box-sizing: border-box;

	}

	.explanation_list .product .detail dl.introduction{

		margin-bottom: 70px;

	}

	.explanation_list .product .detail dl.introduction dt{

		margin-bottom: 16px;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

	}

	.explanation_list .product .detail dl.introduction dd{

		font-size: 16px;

	}



	.explanation_list .product .detail dl.check_list{

		padding-left: 20px;

		border-left: 1px solid var(--main-color);

	}

	.explanation_list .product .detail > dl.check_list:not(:first-child){

		margin-top: 50px;

	}

	.explanation_list .product .detail dl.check_list dt{

		margin-bottom: 10px;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		display: flex;

		align-items: center;

		gap: 12px;

	}

	.explanation_list .product .detail dl.check_list dt > span{

		width: 18px;

		height: 18px;

		display: block;

		background: var(--main-color);

		border-radius: 4px;

		position: relative;

		flex: none;

	}

	.explanation_list .product .detail dl.check_list dt > span:before{

		content: "";

		width: 6px;

		height: 20px;

		border: 3px solid #fff;

		border-width: 0 3px 3px 0;

		transform: rotate(45deg);

		position: absolute;

		left: 9px;

		bottom: 4px;

	}

	.explanation_list .product .detail dl.check_list dd ul li{

		padding-left: 2.0em;

		font-size: 16px;

		line-height: 1.6;

		counter-increment: item;

		position: relative;

	}

	.explanation_list .product .detail dl.check_list dd ul li:nth-child(n+2){

		margin-top: 10px;

	}

	.explanation_list .product .detail dl.check_list dd ul li:before{

		content: counter(item) ".";

		margin: auto;

		color: var(--sub-color02);

		font-family: "Montserrat", sans-serif;

		font-style: italic;

		font-size: 18px;

		font-weight: 400;

		width: fit-content;

		position: absolute;

		left: 0.26em;

		top: -0.14em;

	}

	.explanation_list .product .detail dl.check_list dd ul li span{

		font-weight: 600;

		text-decoration: underline;

		text-decoration-thickness: 0.75em;

		text-decoration-color: #e0eda1;

		text-underline-offset: -0.36em;

		text-decoration-skip-ink: none;

	}



	/*おススメの製品*/

	.explanation_list .product .detail .recommend{

		margin-top: 50px;

		padding: 30px 46px;

		background: #fff;

		box-sizing: border-box;

	}

	.explanation_list .product .detail .recommend > p{

		margin-bottom: 14px;

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

	}

	.explanation_list .product .detail .recommend ul.list{

		border-top: 1px solid #d5dcf1;

	}

	.explanation_list .product .detail .recommend ul.list > a{

		padding: 14px 46px 14px 10px;

		font-size: 15px;

		text-decoration: none;

		background: #fff;

		border-bottom: 1px solid #d5dcf1;

		box-sizing: border-box;

		display: flex;

		gap: 24px;

		position: relative;

	}

	.explanation_list .product .detail .recommend ul.list > a:after{

		content: "";

		margin: auto;

		width: 9px;

		height: 9px;

		border: 1.5px solid #93a3d3;

		border-width: 1.5px 1.5px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 14px;

	}

	.explanation_list .product .detail .recommend ul.list > a:hover{

		background: #f1f1f1;

	}

	.explanation_list .product .detail .recommend ul.list > a .img{

		width: 30%;

		max-width: 200px;

	}

	.explanation_list .product .detail .recommend ul.list > a .img img{

		width: 100%;

		height: auto;

	}



	.explanation_list .product .detail .recommend ul.list > a > p{

		color: #000;

		flex: 1;

	}

	.explanation_list .product .detail .recommend ul.list > a > p span{

		color: var(--main-color);

	}



	a.detailBtn{

		margin: 30px auto 0;

		padding: 16px 58px 16px 28px;

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

		text-decoration: none;

		width: fit-content;

		display: block;

		border: 1px solid #8794bb;

		border-radius: 6px;

		background: #fff;

		position: relative;

	}

	a.detailBtn:before{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		display: block;

		border: 2px solid #93a3d3;

		border-width: 2px 0 0 2px;

		transform: rotate(45deg);

		position: absolute;

		right: 26px;

		top: 0;

		bottom: -6px;

	}

	a.detailBtn:hover{

		background: #f1f1f1;

	}



	/*まとめ*/

	section.choice .conclusion{

		margin-top: 40px;

		padding-top: 60px;

		border-top: 1px solid var(--sub-color02);

		position: relative;

	}

	section.choice .conclusion:before{

		content: "";

		margin: auto;

		width: 80px;

		height: 22px;

		display: block;

		background: #fff;

		clip-path: polygon(0 0, 50% 100%, 100% 0);

		pointer-events: none;

		position: absolute;

		top: -2px;

		left: 0;

		right: 0;

		z-index: 2;

	}

	section.choice .conclusion:after{

		content: "";

		margin: auto;

		width: 80px;

		height: 22px;

		display: block;

		background: var(--sub-color02);

		clip-path: polygon(0 0, 50% 100%, 100% 0);

		pointer-events: none;

		position: absolute;

		top: -1px;

		left: 0;

		right: 0;

		z-index: 1;

	}



	section.choice .conclusion > p{

		margin: 0 auto;

		padding: 0 100px;

		color: var(--main-color);

		font-size: 22px;

		text-align: center;

		width: fit-content;

		position: relative;

	}

	section.choice .conclusion > p:before{

		content: "";

		margin: auto;

		width: 62px;

		height: 57px;

		display: block;

		background: url(/system/products/common/images/icon_point.svg);

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center center;

		position: absolute;

		left: 10px;

		top: 0;

		bottom: 0;

	}

	section.choice .conclusion > p .bold01{

		font-weight: 600;

	}

	section.choice .conclusion > p .bold02{

		color: var(--sub-color02);

		font-weight: 600;

	}





	/*お客様の声スタイル*/

	.people_voices{

		margin: 40px 0 60px;

	}

	.people_voices h4{

		margin-bottom: 20px;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		text-align: center;

	}

	.people_voices ul.voice_list{

		margin: 0 auto;

		max-width: 960px;

		display: flex;

		flex-wrap: wrap;

		gap: 20px 40px;

	}

	.people_voices ul.voice_list li{

		width: calc((100% - 50px) / 2);

		display: flex;

		align-items: center;

		gap: 30px;

	}

	.people_voices ul.voice_list li .illust{

		margin: 10px 0;

		width: 86px;

		height: 86px;

		display: flex;

		align-items: self-end;

		justify-content: center;

		background: #fff;

		border-radius: 100%;

		border: 1px solid #dee8ff;

		box-sizing: border-box;

		position: relative;

	}

	.people_voices ul.voice_list li .illust > img{

		margin: auto;

		width: 120%;

		aspect-ratio: 1 / 1;

		object-fit: contain;

		position: absolute;

		bottom: -6px;

	}

	.people_voices ul.voice_list li .text{

		padding: 14px;

		color: #000;

		font-family: "Zen Maru Gothic", sans-serif;

		font-size: 16px;

		font-weight: 500;

		line-height: 1.4em;

		border-radius: 20px;

		background: #fff;

		flex: 1;

		box-shadow: 4px 4px 0 #d6dff5;

		position: relative;

		z-index: 0;

	}

	.people_voices ul.voice_list li:nth-child(4n-2) .text{

		box-shadow: 4px 4px 0 #ffe0e0;

	}

	.people_voices ul.voice_list li:nth-child(4n-1) .text{

		box-shadow: 4px 4px 0 #f7ebc7;

	}

	.people_voices ul.voice_list li:nth-child(4n) .text{

		box-shadow: 4px 4px 0 #d2edd3;

	}



	.people_voices ul.voice_list li .text:after{

		content: "";

		margin: auto;

		width: 18px;

		height: 20px;

		display: block;

		clip-path: polygon(0 50%, 100% 0, 100% 100%);

		background-color: #fff;

		position: absolute;

		left: -16px;

		top: 0;

		bottom: 0;

		z-index: -1;

	}







	/*  お役立ちセミナー

	---------------------------------------------------------------*/

	section.seminar{

		margin: 0 auto;

		padding: 80px 20px 0;

		width: 100%;

		max-width: 1240px;

		box-sizing: border-box;

	}



	/*お役立ちセミナー・スライダー*/

	.seminarList {

		/* margin-bottom: 40px; */

		position: relative;

	}

	.seminarList li {

		margin: 0 12px !important;

	}

	.seminarList.noSlide {

		display: flex;

		flex-wrap: wrap;

		justify-content: center;

	}

	/* .seminarList.noSlide::after {

		content: "";

		width: 30%;

	} */

	.seminarList.noSlide li {

		width: 30%;

		margin: 0 1.666% 4%;

	}

	#main .seminarList a {

		display: block;

		background-color: #F2F2F8;

		position: relative;

		color: #2E3036;

		text-decoration: none;

		height: 100%;

	}

	#main .seminarList a:hover {

		opacity: 0.7;

		text-decoration: none;

	}

	.seminarList a .img{}

	.seminarList a .img img{

		width: auto;

		max-width: 100%;

		height: auto;

	}

	.seminarList a .txt {

		position: relative;

	}

	.seminarList a .txt dl {

		padding: 15px 15px 82px;

		box-sizing: border-box;

		font-size: 16px;

	}

	.seminarList a .txt dl dt {

		margin: 0 0 10px;

		font-size: 16px;

		font-weight: bold;

		line-height: 1.3;

	}

	.seminarList a .location {

		font-size: 14px;

		position: absolute;

		left: 16px;

		bottom: 50px;

		background: url(/system/common2/images/icon_place.svg) no-repeat left center;

		background-size: 12px auto;

		padding: 0 0 0 17px;

	}

	.seminarList a span.arrow {

		position: absolute;

		display: block;

		left: 0;

		bottom: 0;

		font-size: 14px;

		padding: 8px 0 10px;

		border-top: solid 1px #e7e7f3;

		width: 100%;

		text-align: center;

	}

	.seminarList a span.arrow span {

		background: url(/system/common2/images/com_ic005.svg) no-repeat right center;

		padding: 0 20px 0 0;

		display: inline-block;

		color: #24597F;

	}

	.seminarList .slick-arrow {

		z-index: 1;

	}

	.seminarList .slick-prev,

	.seminarList .slick-next {

		position: absolute;

		top: 50%;

		background-color: #FFF;

		border: none;

		width: 52px;

		height: 52px;

		border-radius: 100%;

		box-shadow: 0px 0px 6px rgb(0 0 0 / 20%);

		text-indent: -9999px;

		cursor: pointer;

		margin-top: -26px;

		border: solid 1px #6561ab;

	}

	.seminarList .slick-prev.slick-disabled,

	.seminarList .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.seminarList .slick-prev {

		left: -50px;

	}

	.seminarList .slick-next {

		right: -50px;

	}

	.seminarList .slick-prev::before,

	.seminarList .slick-next::before {

		content: "";

		position: absolute;

		width: 14px;

		height: 14px;

		border-top: solid 1px;

		border-right: solid 1px;

		top: 50%;

		margin: -7px 0 0 -10px;

		left: 50%;

		color: #24597f;

		display: block;

		transform: rotate(45deg);

	}

	.seminarList .slick-prev::before {

		transform: rotate(-135deg);

		margin: -7px 0 0 -5px;

	}

	.seminarList .slick-list {

		overflow: unset;

	}

	.seminarList .slick-slide:not(.slick-active) {

		-webkit-filter: opacity(40%);

		-moz-filter: opacity(40%);

		-o-filter: opacity(40%);

		-ms-filter: opacity(40%);

		filter: opacity(40%);

	}





	/*  お役立ち情報

	---------------------------------------------------------------*/

	section.post{

		margin: 0 auto;

		padding: 80px 20px 100px;

		width: 100%;

		max-width: 1240px;

		box-sizing: border-box;

	}



	/*お役立ち情報・スライダー*/

	.postList {

		margin-bottom: 40px;

		position: relative;

	}

	.postList li {

		margin: 0 12px !important;

	}

	.postList.noSlide {

		display: flex;

		flex-wrap: wrap;

		justify-content: center;

	}

	/* .postList.noSlide::after {

		content: "";

		width: 30%;

	} */

	.postList.noSlide li {

		width: 30%;

		margin: 0 1.666% 4%;

	}

	#main .postList a {

		display: block;

		background: #fff;

		position: relative;

		color: #000;

		text-decoration: none;

	}

	#main .postList a:hover {

		opacity: 0.7;

		text-decoration: none;

	}

	.postList a .img{

		position: relative;

	}

	.postList a .img img{

		width: auto;

		max-width: 100%;

		height: auto;

	}

	.postList a .img > span.cat{

		color: #fff;

		font-size: 14px;

		font-weight: 600;

		width: fit-content;

		min-width: 46px;

		min-height: 30px;

		background: var(--main-color);

		display: flex;

		align-items: center;

		justify-content: center;

		position: absolute;

		right: 0;

		top: 0;

		padding: 0 8px;

		box-sizing: border-box;

	}

	.postList a .txt {

		padding: 20px 0;

	}

	.postList a .txt dl dt {

		font-size: 16px;

		font-weight: bold;

	}

	.postList a .txt dl dd.tag{

		margin-top: 24px;

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	.postList a .txt dl dd.tag > span{

		padding: 6px 10px;

		color: var(--main-color);

		font-size: 12px;

		background: var(--bg-main);

		border-radius: 100px;

	}

	

	.postList .slick-arrow {

		z-index: 1;

	}

	.postList .slick-prev,

	.postList .slick-next {

		position: absolute;

		top: 50%;

		background-color: #FFF;

		border: none;

		width: 52px;

		height: 52px;

		border-radius: 100%;

		box-shadow: 0px 0px 6px rgb(0 0 0 / 20%);

		text-indent: -9999px;

		cursor: pointer;

		margin-top: -26px;

		border: solid 1px #6561ab;

	}

	.postList .slick-prev.slick-disabled,

	.postList .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.postList .slick-prev {

		left: -50px;

	}

	.postList .slick-next {

		right: -50px;

	}

	.postList .slick-prev::before,

	.postList .slick-next::before {

		content: "";

		position: absolute;

		width: 14px;

		height: 14px;

		border-top: solid 1px;

		border-right: solid 1px;

		top: 50%;

		margin: -7px 0 0 -10px;

		left: 50%;

		color: #24597f;

		display: block;

		transform: rotate(45deg);

	}

	.postList .slick-prev::before {

		transform: rotate(-135deg);

		margin: -7px 0 0 -5px;

	}

	.postList .slick-list {

		overflow: unset;

	}

	.postList .slick-slide:not(.slick-active) {

		-webkit-filter: opacity(40%);

		-moz-filter: opacity(40%);

		-o-filter: opacity(40%);

		-ms-filter: opacity(40%);

		filter: opacity(40%);

	}





	/* 関連カテゴリ

	---------------------------------------------------------------*/

	section.related_categories{

		margin: 0 auto;

		padding: 0px 20px 0;

		width: 100%;

		max-width: 1320px;

		box-sizing: border-box;

	}



	ul.category_list{

		display: flex;

		justify-content: center;

		align-items: center;

		flex-wrap: wrap;

		gap: 16px;

	}

	ul.category_list a{

		padding: 20px 40px 20px 30px;

		color: var(--main-color);

		font-size: 20px;

		font-weight: 600;

		text-decoration: none;

		min-width: 206px;

		min-height: 90px;

		display: flex;

		align-items: center;

		justify-content: center;

		border: 4px solid #e7e9f1;

		box-sizing: border-box;

		position: relative;

	}

	ul.category_list a:after{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		border: 2px solid #93a3d3;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 18px;

	}

	ul.category_list a:hover{

		background: #f1f1f1;

	}





	/* まずはお気軽にご相談ください

	---------------------------------------------------------------*/

	.inner3 {

		margin: 0 auto;

		max-width: 1040px;

	}

	#sec7 {

		padding: 60px 0;

		background: transparent url(/system/common2/images/top/sec7_bg.jpg) no-repeat center center;

		background-size: cover;

	}

	#sec7 h2.midashi {

		color: #fff;

		font-size: 30px;

		font-weight: bold;

		line-height: 1.1;

		text-align: center;

	}

	#sec7 .midashiEn{

		margin-top: 35px;

		text-align: center;

	}

	#sec7 .lead {

		margin-top: 50px;

		color: #fff;

		font-size: 18px;

		font-weight: bold;

		line-height: 1.6;

		text-align: center;

	}

	#sec7 .rows {

		display: -webkit-flex;

		display: flex;

		-webkit-justify-content: space-between;

		justify-content: space-between;

		margin-top: 40px;

	}

	#sec7 .rows .col {

		-webkit-flex: 0 0 31%;

		flex: 0 0 31%;

	}

	#sec7 .rows .col a {

		display: -webkit-flex;

		display: flex;

		-webkit-justify-content: center;

		justify-content: center;

		-webkit-align-items: center;

		align-items: center;

		height: 80px;

		background-color: #fff;

		border-radius: 5px;

		font-weight: bold;

		font-size: 128%;

		color: #24597F;

	}

	#sec7 .rows .col:nth-child(1) a:after {

		content: url(/system/common2/images/top/icon_contact1.png);

		display: block;

		margin-left: 15px;

		line-height: 1;

	}

	#sec7 .rows .col:nth-child(2) a:after {

		content: url(/system/common2/images/top/icon_contact2.png);

		display: block;

		margin-left: 15px;

		line-height: 1;

	}

	#sec7 .rows .col:nth-child(3) a:after {

		content: url(/system/common2/images/top/icon_contact3.png);

		display: block;

		margin-left: 15px;

		line-height: 1;

	}

	#sec7 .rows .col a{

		text-decoration: none;

	}

	#sec7 .rows .col a:hover {

		opacity: .8;

		text-decoration: none;

	}

	#sec7 .rows .col .text {

		margin-top: 10px;

		color: #fff;

		font-size: 14px;

		line-height: 1.6;

		text-align: center;

	}

	@media screen and (max-width: 767px) {

		#sec7 .lead {

			margin-top: 20px;

			font-size: 105%;

		}

		#sec7 .rows {

			-webkit-flex-wrap: wrap;

			flex-wrap: wrap;

			margin-top: 15px;

		}

		#sec7 .rows .col {

			-webkit-flex: 0 0 100%;

			flex: 0 0 100%;

			margin-top: 20px;

		}

		#sec7 .rows .col a {

			height: 60px;

		}

		#sec7 .rows .col .text {

			margin-top: 15px;

		}

	}





	/* ページ下部フローティングボタン(floatBtn)

	------------------------------------------------------------*/

	#floatBtn {

		padding: 16px;

		background-color: rgb(17 43 120 / 86%);

		width: 100%;

		display: flex;

		justify-content: center;

		box-sizing: border-box;

		position: fixed;

		left: 0;

		bottom: 0;

		z-index: 50;

	}

	#floatBtn a{

		margin: 0 8px;

		color: var(--sub-color02);

		font-size: 16px;

		font-weight: bold;

		text-decoration: none;

		width: 28%;

		max-width: 300px;

		height: auto;

		min-height: 64px;

		display: flex;

		justify-content: center;

		align-items: center;

		gap: 15px;

		background-color: #fff;

		border-radius: 5px;

		box-sizing: border-box;

		transition: 0.28s;

	}

	#floatBtn a:hover{

		opacity: 0.8;

		transition: 0.28s;

	}



	/*class「col」を含む場合*/

	#floatBtn > .col{

		width: 28%;

		max-width: 300px;

		margin: 0 8px;

	}

	#floatBtn > .col a{

		margin: 0;

		width: 100%;

		box-sizing: border-box;

	}



	#floatBtn a:after{

		content: "";

		margin-top: -4px;

		width: 20px;

		height: 20px;

		background-repeat: no-repeat;

		background-position: center center;

		background-size: contain;

		display: block;

	}

	#floatBtn a.btnContact:after,

	#floatBtn .col:nth-child(1) a:after {

		background-image: url(/system/common2/images/top/icon_check_contact.svg);

	}

	#floatBtn a.btnCatalog:after,

	#floatBtn .col:nth-child(2) a:after {

		background-image: url(/system/common2/images/top/icon_dowmload_contact.svg);

	}

	#floatBtn a.btnMail:after,

	#floatBtn .col:nth-child(3) a:after {

		background-image: url(/system/common2/images/top/icon_mail_contact.svg);

	}



	#floatBtn .col a:hover {

		text-decoration: none;

	}





	/* お問い合わせメニューブロック

	---------------------------------------*/

	section.contactMenuArea{

		padding: 100px 0;

		background: url(/system/common2/images/top/visual_contactMenuArea_bg.jpg) no-repeat center center;

		background-size: cover;

	}

	section.contactMenuArea .inner{

		margin: 0 auto;

		padding: 0 40px;

		width: 100%;

		max-width: 1120px;

		box-sizing: border-box;

	}

	section.contactMenuArea .txt{

		margin-bottom: 50px;

	}

	section.contactMenuArea .txt h2{

		margin: 0 auto 26px;

		color: #fff;

		font-size: 34px;

		font-weight: 600;

		text-align: center;

		width: fit-content;

	}

	section.contactMenuArea .txt p{

		margin: 0 auto;

		color: #fff;

		font-size: 18px;

		width: fit-content;

	}



	section.contactMenuArea ul.btns{

		display: flex;

		justify-content: center;

		flex-wrap: wrap;

		gap: 40px;

	}

	section.contactMenuArea ul.btns li{

		flex: 1;

		min-width: 240px;

		max-width: 320px;

	}

	section.contactMenuArea ul.btns li a{

		padding: 28px 20px;

		color: var(--sub-color02);

		font-size: 18px;

		font-weight: 600;

		text-decoration: none;

		line-height: 1.2;

		background: #fff;

		border-radius: 6px;

		box-sizing: border-box;

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 18px;

		transition: 0.28s;

	}

	section.contactMenuArea ul.btns li a:hover{

		opacity: 0.8;

	}

	section.contactMenuArea ul.btns li a:after{

		content: "";

		margin-top: -4px;

		width: 22px;

		height: 22px;

		background-repeat: no-repeat;

		background-position: center center;

		background-size: contain;

		display: block;

	}

	section.contactMenuArea ul.btns li a.btnContact:after{

		background-image: url(/system/common2/images/top/icon_check_contact.svg);

	}

	section.contactMenuArea ul.btns li a.btnCatalog:after{

		background-image: url(/system/common2/images/top/icon_dowmload_contact.svg);

	}

	section.contactMenuArea ul.btns li a.btnMail:after{

		background-image: url(/system/common2/images/top/icon_mail_contact.svg);

	}



	section.contactMenuArea ul.btns li p{

		margin-top: 12px;

		color: #fff;

		font-size: 16px;

		text-align: center;

	}

	/*<end>============================================================*/

}



/*******************************************************************/

/* SP */

/*******************************************************************/

@media screen and (max-width: 768px) {

	/*<start>==========================================================*/

	.pc-none {

		/* display: block !important; */

	}

	.sp-none {

		display: none !important;

	}



	header{

		top: 0

	}



	/* 見出しスタイル*/

	#main h2{

		margin-bottom: 2.0em;

		padding-bottom: 1.2em;

		text-align: center;

		position: relative;

	}

	#main h2:after{

		content: "";

		margin: auto;

		width: 60px;

		height: 1px;

		display: inline-block;

		background: var(--sub-color02);

		position: absolute;

		left: 0;

		right: 0;

		bottom: 0;

	}

	#main h2 > span{

		margin-bottom: 0.4em;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		display: inline-block;

	}

	#main h2 > p{

		color: #2e3036;

		font-size: 24px;

		font-weight: 600;

		letter-spacing: 0.08em;

	}

	#main h2 > p > span{

		color: var(--sub-color02);

	}

	#main h3 {

		margin: 30px 0 20px;

		text-align: center;

		position: relative;

		font-size: 18px;

	}



	/* 汎用ボタンスタイル*/

	a.btn_nomal{

		margin: 0 auto;

		padding: 0.8em 3em 0.8em 2.0em;

		color: #fff;

		text-decoration: none;

		font-size: 15px;

		display: block;

		width: fit-content;

		background: linear-gradient(-10deg, #325bc1 0%, #325bc1 50%, var(--sub-color02) 50%, var(--sub-color02) 100%);

		border-radius: 10px;

		box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);

		position: relative;

	}

	a.btn_nomal span{

		font-weight: 600;

	}

	a.btn_nomal:active{

		opacity: 0.8;

	}

	a.btn_nomal:after{

		content: "";

		margin: auto;

		width: 1.6em;

		height: 1.6em;

		display: block;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	a.btn_entry:after{

		width: 1.6em;

		height: 1.6em;

		background: url(/system/products/common/images/icon_entry.svg) no-repeat;

		background-position: center center;

		background-size: contain;

		bottom: -3px;

		right: 10px;

	}

	a.btn_mail:after{

		width: 1.6em;

		height: 1.4em;

		background: url(/system/products/common/images/icon_mail.svg) no-repeat;

		background-position: center center;

		background-size: contain;

		bottom: -3px;

		right: 10px;

	}





	/* 汎用白ボタン*/

	a.moreBtn{

		margin: 10% auto 0;

		padding: 1.0em 1.0em;

		color: var(--main-color);

		font-size: 14px;

		font-weight: 600;

		text-align: center;

		text-decoration: none;

		line-height: 1.2;

		width: fit-content;

		background: #fff;

		display: flex;

		align-items: flex-start;

		justify-content: center;

		border: 1px solid #8794bb;

		border-radius: 6px;

		box-sizing: border-box;

	}

	a.moreBtn > span{

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 20px;

	}

	a.moreBtn > span:after{

		content: "";

		margin-top: -3px;

		width: 10px;

		height: 10px;

		display: block;

		border: 2px solid #93a3d3;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

	}

	a.moreBtn:hover{

		background: #f1f1f1;

	}



	a.moreBtn.reverse > span{

		margin-left: 0;

		margin-right: 2.0em;

		flex-direction: row-reverse;

	}

	a.moreBtn.reverse > span:after{

		transform: rotate(-135deg);

	}





	/*=================================================================*/

	/*	生産管理・原価管理 */

	/*=================================================================*/

	#main{

		margin: 0 0 100px 0;

		width: 100%;

		box-sizing: border-box;

		overflow: hidden;

	}



	/* タイトル部分

	-----------------------------------*/

	#mv {

		padding: 8% 4%;

		/* background: url("/system/products/common/images/bg_mainvisual_csks.png") no-repeat;

		background-position: center center;

		background-size: cover; */

		position: relative;

		z-index: 0;

	}

	#mv .bgImgWrap {

		position: absolute;

		left: 0;

		top: 0;

		width: 100%;

		height: 100%;

		z-index: -1;

	}

	#mv .bgImgWrap img {

		width: 100%;

		height: 100%;

		-o-object-fit: cover;

		object-fit: cover;

		overflow: hidden;

	}



	#mv dl.title{

		padding: 6% 6%;

		text-align: center;

		background: rgba(255, 255, 255, 0.87);

	}

	#mv dl.title dt{

		padding-bottom: 20px;

		position: relative;

	}

	#mv dl.title dt:after{

		content: "";

		margin: auto;

		width: 60px;

		max-width: 40%;

		height: 1px;

		display: block;

		background: var(--main-color);

		position: absolute;

		bottom: 0;

		left: 0;

		right: 0;

	}

	#mv dl.title dt p{

		color: var(--main-color);

		font-size: 24px;

		font-weight: 600;

	}

	#mv dl.title dt > span.sub_english{

		margin-top: 4px;

		color: var(--sub-color);

		font-family: "Montserrat", sans-serif;

		font-size: 14px;

		font-weight: 400;

		letter-spacing: 0.08em;

		display: inline-block;

	}



	#mv dl.title dd{

		margin-top: 20px;

	}

	#mv dl.title dd > p{

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

		line-height: 1.6;

	}

	#mv dl.title dd .btn_nomal{

		margin-top: 6%;

	}





	/* ページ内リンク

	-----------------------------------*/

	.innerLink{

		padding: 6% 2%;

	}

	.innerLink ul{

		margin: 0 auto;

		display: flex;

		flex-wrap: wrap;

		align-items: stretch;

		width: fit-content;

		flex-wrap: wrap;

		gap: 6px;

		width: 100%;

	}

	.innerLink ul li{

		width: calc( (100% - 6px) / 2 );

	}

	.innerLink ul li a{

		padding: 12px 18px 12px 8px;

		color: #000;

		font-size: 14px;

		line-height: 1.2;

		text-decoration: none;

		background: var(--bg-main);

		position: relative;

		width: 100%;

		height: 100%;

		display: inline-flex;

		align-items: center;

		box-sizing: border-box;

	}

	.innerLink ul li a:after{

		content: "";

		margin: auto;

		position: absolute;

		width: 5px;

		height: 5px;

		display: block;

		border: 2px solid #6561ab;

		border-width: 0 2px 2px 0;

		transform: rotate(45deg);

		top: -4px;

		bottom: 0;

		right: 7px;

	}

	.innerLink ul li a:active{

		color: #6561ab;

		text-decoration: none;

	}





	/* 特長

	-----------------------------------*/

	section.feature{

		padding: 8% 4% 8%;

		width: 100%;

		box-sizing: border-box;

	}

	.feature_list{

		display: flex;

		flex-direction: column;

		gap: 40px;

	}

	.feature_list > dl{

		padding: 4% 4%;

		background: var(--bg-main);

		box-sizing: border-box;

		width: 100%;

		position: relative;

		counter-increment: item; /* 各dlでカウント */

	}

	.feature_list > dl:before{

		content: counter(item, decimal-leading-zero); /* ゼロ埋め2桁 */

		margin: auto;

		color: var(--sub-color02);

		font-family: "Montserrat", sans-serif;

		font-size: 36px;

		font-weight: 400;

		width: fit-content;

		position: absolute;

		left: 0;

		right: 0;

		top: -0.6em;

	}

	.feature_list > dl >dt{

		display: flex;

		align-items: center;

		gap: 20px;

	}

	.feature_list > dl >dt span{

		background: #fff;

		width: 80px;

		aspect-ratio: 1;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 8px;

		box-shadow: 0 0.6px 1.28px rgba(0, 0, 0, 0.2);

	}

	.feature_list > dl >dt span > img{

		width: 66%;

		height: auto;

	}

	.feature_list > dl >dt p{

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		line-height: 1.4;

		flex: 1;

	}

	.feature_list > dl >dd{

		margin-top: 14px;

		font-size: 14px;

		line-height: 1.6;

	}





	/* 相談申込み

	-----------------------------------*/

	.entry_box{

		padding: 8% 4%;

		background: var(--bg-main);

		width: 100%;

		box-sizing: border-box;

	}

	.entry_box p.call {

		margin: 0 auto 12px;

		padding: 0 30px;

		color: var(--main-color);

		font-size: 14px;

		line-height: 1.2;

		width: fit-content;

		position: relative;

	}

	.entry_box p.call:before,

	.entry_box p.call:after{

		content: "";

		margin: auto;

		width: 6px;

		height: 18px;

		display: block;

		border: 1px solid #bbc3d8;

		border-width: 0 1px 0 1px;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	.entry_box p.call:before{

		transform: skewX(30deg);

		transform-origin: top left; 

		left: 0;

	}

	.entry_box p.call:after{

		transform: skewX(-30deg);

		transform-origin: top right; 

		right: 0;

	}





	/* ラインナップ

	-----------------------------------*/

	section.products{

		padding: 8% 4% 8%;

		width: 100%;

		box-sizing: border-box;

	}



	section.products .cat_list{

		display: flex;

		flex-direction: column;

		gap: 20px;

	}



	ul.lineup{

		display: flex;

		flex-wrap: wrap;

		align-items: stretch;

		justify-content: center;

		gap: 20px;

	}

	ul.lineup > dl{

		width: 100%;

		display: flex;

		flex-direction: column;

		border: 2px solid var(--bg-main);

		box-sizing: border-box;

	}

	ul.lineup > dl > dt{

		padding: 10px;

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

		text-align: center;

		background: var(--bg-main);

	}

	ul.lineup > dl > dd{

		padding: 0 4% 4%;

		display: flex;

		flex-direction: column;

		flex: 1;

	}

	ul.lineup > dl > dd .logo a,

	ul.lineup > dl > dd .logo span {

		padding: 10px 15px;

		width: 100%;

		aspect-ratio: 3 / 1;

		display: flex;

		align-items: center;

		justify-content: center;

		box-sizing: border-box;

		text-decoration: none

	}

	ul.lineup > dl > dd .logo a p,

	ul.lineup > dl > dd .logo span p {

		padding: 8px;

		font-size: 18px;

		font-weight: 600;

		line-height: 1.4;

		text-align: center;

		color: #000;

	}

	ul.lineup > dl > dd .logo a:hover{

		opacity: 0.8;

	}

	ul.lineup > dl > dd .logo a img{

		width: 100%;

		height: 100%;

		object-fit: contain;

	}

	

	ul.lineup > dl > dd > p{

		margin-bottom: auto;

		font-size: 14px;

	}

	ul.lineup > dl > dd a.detail{

		margin-top: 20px;

		padding: 6px 40px;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		text-decoration: none;

		width: 100%;

		display: inline-block;

		text-align: center;

		background: #fff;

		border: 2px solid var(--bg-main);

		box-sizing: border-box;

		position: relative;

	}

	ul.lineup > dl > dd a.detail:hover{

		background: var(--bg-main);

	}

	ul.lineup > dl > dd a.detail:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid var(--sub-color);

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 24px;

		top: 0;

		bottom: 0;

	}



	ul.lineup > dl > dd .btns{

		margin-top: 16px;

		display: flex;

		align-items: center;

		flex-wrap: wrap;

		gap: 10px 6px;

	}

	ul.lineup > dl > dd .btns > a{

		padding: 8px 10px;

		color: #fff;

		font-size: 13px;

		font-weight: 600;

		line-height: 1.2;

		text-align: center;

		text-decoration: none;

		display: flex;

		width: calc( (100% - 6px) / 2 );

		min-width: 100px;

		flex: 1;

		align-content: center;

		justify-content: center;

		background: var(--sub-color);

		border-radius: 6px;

	}

	ul.lineup > dl > dd .btns > a:active{

		opacity: 0.8;

	}

	ul.lineup > dl > dd .btns > a span{

		margin-left: 8px;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 10px;

	}

	ul.lineup > dl > dd .btns > a.dl span:after{

		content: "";

		width: 11px;

		height: 11px;

		display: block;

		background: url(/system/products/common/images/icon_dl.svg);

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center center;

	}

	ul.lineup > dl > dd .btns > a.contact span:after{

		content: "";

		width: 11px;

		height: 11px;

		display: block;

		background: url(/system/products/common/images/icon_contact.svg);

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center center;

	}





	/* 導入事例

	-----------------------------------*/

	section.jirei{

		padding: 8% 4% 8%;

		width: 100%;

		background: #f7f7f7;

		box-sizing: border-box;

	}



	ul.caseList{

		display: flex;

		flex-direction: column;

		gap: 20px;

	}

	ul.caseList > a{

		background: #fff;

		text-decoration: none;

		width: 100%;

		display: flex;

		flex-direction: column;

	}

	ul.caseList > a:visited,

	ul.caseList > a:active{

		color: var(--sub-color02) !important;

	}

	ul.caseList > a:active{

		opacity: 0.8;

		background: #d5dbf1;

	}



	ul.caseList > a > .visual img{

		width: 100%;

		aspect-ratio: 7 / 5;

		object-fit: cover;

	}



	ul.caseList > a > dl{

		padding: 4% 4%;

	}

	ul.caseList > a > dl > dt{

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

	}

	ul.caseList > a > dl > dd{

		margin-top: 14px;

		color: #000;

		font-size: 14px;

	}

	ul.caseList > a > dl > .tag{

		margin-top: 14px;

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	ul.caseList > a > dl > .tag span{

		padding: 6px;

		color: var(--main-color);

		font-size: 13px;

		line-height: 1.1;

		background: var(--bg-main);

		border-radius: 5px;

		display: inline-block;

	}



	ul.caseList > a > .detail{

		margin: auto 24px 24px;

	}

	ul.caseList > a > .detail > p{

		padding: 5px;

		font-size: 14px;

		font-weight: 600;

		background: #fff;

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		border: 1px solid var(--sub-color02);

		box-sizing: border-box;

	}

	ul.caseList > a > .detail > p span{

		margin-left: 8px;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 10px;

	}

	ul.caseList > a > .detail > p span:after{

		content: "";

		margin-top: -3px;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid var(--sub-color02);

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

	}





	/* 選び方

	-----------------------------------*/

	section.choice{

		padding: 8% 4% 8%;

		width: 100%;

		box-sizing: border-box;

	}



	/*製品説明リスト*/

	.explanation_list{

		display: flex;

		flex-direction: column;

		gap: 40px;

	}

	.explanation_list .product .title{

		display: flex;

		flex-direction: column;

		position: relative;

	}

	.explanation_list .product .title .txtBox{

		padding: 6% 6% calc(6% + 80px);

		display: flex;

		flex-direction: column;

		justify-content: center;

		background: var(--bg-color02);

		box-sizing: border-box;

		flex: 1;

		position: relative;

	}

	.explanation_list .product .title .txtBox:before{

		content: "";

		width: 30px;

		height: 30px;

		display: block;

		background: var(--sub-color02);

		clip-path: polygon(0 0, 100% 0, 0 100%);

		position: absolute;

		left: 0;

		top: 0

	}

	.explanation_list .product .title .txtBox > h3{

		margin-bottom: 8px;

		color: var(--main-color);

		font-size: 20px;

		font-weight: 600;

	}

	.explanation_list .product .title .txtBox > p{

		font-size: 15px;

	}



	.explanation_list .product .title .imgBox{

		margin: 0 auto;

		width: 86%;

		border: 2px solid #fff;

		box-sizing: border-box;

		position: absolute;

		z-index: 2;

		top: calc(100% - 80px);

		left: 0;

		right: 0;

	}

	.explanation_list .product .title .imgBox img{

		width: 100%;

		aspect-ratio: 5 / 3;

		object-fit: cover;

	}



	.explanation_list .product .detail{

		padding: calc( (48vw * (3 / 5)) + 6% ) 6% 6%;

		background: var(--bg-main);

		box-sizing: border-box;

	}

	.explanation_list .product .detail dl.introduction{

		margin-bottom: 40px;

	}

	.explanation_list .product .detail dl.introduction dt{

		margin-bottom: 0.6em;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

	}

	.explanation_list .product .detail dl.introduction dd{

		font-size: 14px;

	}



	.explanation_list .product .detail dl.check_list{

	}

	.explanation_list .product .detail > dl.check_list:not(:first-child){

		margin-top: 40px;

	}

	.explanation_list .product .detail dl.check_list dt{

		margin-bottom: 20px;

		padding-bottom: 10px;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		border-bottom: 1px solid var(--main-color);

		display: flex;

		align-items: baseline;

		gap: 10px;

	}

	.explanation_list .product .detail dl.check_list dt > span{

		width: 18px;

		height: 18px;

		display: block;

		background: var(--main-color);

		border-radius: 4px;

		position: relative;

		flex: none;

	}

	.explanation_list .product .detail dl.check_list dt > span:before{

		content: "";

		width: 6px;

		height: 20px;

		border: 3px solid #fff;

		border-width: 0 3px 3px 0;

		transform: rotate(45deg);

		position: absolute;

		left: 9px;

		bottom: 4px;

	}

	.explanation_list .product .detail dl.check_list dd ul li{

		padding-left: 1.6em;

		font-size: 15px;

		line-height: 1.6;

		counter-increment: item;

		position: relative;

	}

	.explanation_list .product .detail dl.check_list dd ul li:nth-child(n+2){

		margin-top: 10px;

	}

	.explanation_list .product .detail dl.check_list dd ul li:before{

		content: counter(item) ".";

		margin: auto;

		color: var(--sub-color02);

		font-family: "Montserrat", sans-serif;

		font-style: italic;

		font-size: 18px;

		font-weight: 400;

		width: fit-content;

		position: absolute;

		left: 0.1em;

		top: -0.2em;

	}

	.explanation_list .product .detail dl.check_list dd ul li span{

		font-weight: 600;

		text-decoration: underline;

		text-decoration-thickness: 0.75em;

		text-decoration-color: #e0eda1;

		text-underline-offset: -0.36em;

		text-decoration-skip-ink: none;

	}



	/*おススメの製品*/

	.explanation_list .product .detail .recommend{

		margin-top: 40px;

		padding: 4% 6%;

		background: #fff;

		box-sizing: border-box;

	}

	.explanation_list .product .detail .recommend > p{

		margin-bottom: 14px;

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

	}

	.explanation_list .product .detail .recommend ul.list{

		border-top: 1px solid #d5dcf1;

	}

	.explanation_list .product .detail .recommend ul.list > a{

		padding: 5% 6% 5% 0%;

		font-size: 14px;

		text-decoration: none;

		background: #fff;

		border-bottom: 1px solid #d5dcf1;

		box-sizing: border-box;

		display: flex;

		flex-direction: column;

		position: relative;

		gap: 14px;

	}

	.explanation_list .product .detail .recommend ul.list > a:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		border: 1.5px solid #93a3d3;

		border-width: 1.5px 1.5px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 6px;

	}

	.explanation_list .product .detail .recommend ul.list > a:active{

		background: #f1f1f1;

	}

	.explanation_list .product .detail .recommend ul.list > a .img{

		padding: 10px 0;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	.explanation_list .product .detail .recommend ul.list > a .img img{

		max-width: 90%;

		height: auto;

		max-height: 100px;

	}



	.explanation_list .product .detail .recommend ul.list > a > p{

		color: #000;

		flex: 1;

	}

	.explanation_list .product .detail .recommend ul.list > a > p span{

		color: var(--main-color);

	}



	a.detailBtn{

		margin: 30px auto 0;

		padding: 1.0em 2.8em 1.0em 1.4em;

		color: var(--main-color);

		font-size: 14px;

		font-weight: 600;

		text-decoration: none;

		width: fit-content;

		display: block;

		border: 1px solid #8794bb;

		border-radius: 6px;

		background: #fff;

		position: relative;

	}

	a.detailBtn:before{

		content: "";

		margin: auto;

		width: 10px;

		height: 10px;

		display: block;

		border: 2px solid #93a3d3;

		border-width: 2px 0 0 2px;

		transform: rotate(45deg);

		position: absolute;

		right: 14px;

		top: 0;

		bottom: -6px;

	}

	a.detailBtn:hover{

		background: #f1f1f1;

	}



	/*まとめ*/

	section.choice .conclusion{

		margin-top: 30px;

		padding-top: 50px;

		border-top: 1px solid var(--sub-color02);

		position: relative;

	}

	section.choice .conclusion:before{

		content: "";

		margin: auto;

		width: 80px;

		height: 22px;

		display: block;

		background: #fff;

		clip-path: polygon(0 0, 50% 100%, 100% 0);

		pointer-events: none;

		position: absolute;

		top: -2px;

		left: 0;

		right: 0;

		z-index: 2;

	}

	section.choice .conclusion:after{

		content: "";

		margin: auto;

		width: 80px;

		height: 22px;

		display: block;

		background: var(--sub-color02);

		clip-path: polygon(0 0, 50% 100%, 100% 0);

		pointer-events: none;

		position: absolute;

		top: -1px;

		left: 0;

		right: 0;

		z-index: 1;

	}



	section.choice .conclusion > p{

		margin: 0 auto;

		color: var(--main-color);

		font-size: 18px;

		text-align: center;

		width: fit-content;

	}

	section.choice .conclusion > p:before{

		content: "";

		margin: 0 auto 20px;

		width: 62px;

		height: 57px;

		display: block;

		background: url(/system/products/common/images/icon_point.svg);

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center center;

	}

	section.choice .conclusion > p .bold01{

		font-weight: 600;

	}

	section.choice .conclusion > p .bold02{

		color: var(--sub-color02);

		font-weight: 600;

	}





	/*お客様の声スタイル*/

	.people_voices{

		margin: 40px 0 60px;

	}

	.people_voices h4{

		margin-bottom: 20px;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		line-height: 1.4em;

		text-align: center;

	}

	.people_voices ul.voice_list{

		display: flex;

		flex-direction: column;

		gap: 6vw;

	}

	.people_voices ul.voice_list li{

		width: 100%;

		display: flex;

		align-items: center;

		gap: 4vw;

	}

	.people_voices ul.voice_list li .illust{

		width: 20%;

		max-width: 100px;

		aspect-ratio: 1;

		display: flex;

		align-items: self-end;

		justify-content: center;

		background: #fff;

		border-radius: 100%;

		border: 1px solid #dee8ff;

		box-sizing: border-box;

		position: relative;

	}

	.people_voices ul.voice_list li .illust > img{

		margin: auto;

		width: 120%;

		aspect-ratio: 1 / 1;

		object-fit: contain;

		position: absolute;

		bottom: -6px;

	}

	.people_voices ul.voice_list li .text{

		padding: min(3vw, 12px);

		color: #333;

		font-family: "Zen Maru Gothic", sans-serif;

		font-size: 14px;

		font-weight: 500;

		line-height: 1.4em;

		border-radius: min(3vw, 10px);

		background: #fff;

		width: fit-content;

		max-width: 100%;

		flex: 1;

		box-shadow: 3px 3px 0 #d6dff5;

		box-sizing: border-box;

		position: relative;

		z-index: 2;

	}

	.people_voices ul.voice_list li:nth-child(4n-2) .text{

		box-shadow: 3px 3px 0 #ffe0e0;

	}

	.people_voices ul.voice_list li:nth-child(4n-1) .text{

		box-shadow: 3px 3px 0 #f7ebc7;

	}

	.people_voices ul.voice_list li:nth-child(4n) .text{

		box-shadow: 3px 3px 0 #d2edd3;

	}



	.people_voices ul.voice_list li .text:after{

		content: "";

		margin: auto;

		width: 12px;

		height: 20px;

		display: block;

		clip-path: polygon(0 50%, 100% 0, 100% 100%);

		background-color: #fff;

		position: absolute;

		top: 0;

		bottom: 0;

		left: -12px;

		z-index: 1;

	}



	.people_voices ul.voice_list li:nth-child(2n){

		flex-direction: row-reverse;

	}

	.people_voices ul.voice_list li:nth-child(2n) .text:after{

		clip-path: polygon(0 0, 100% 50%, 0 100%);

		top: 0;

		bottom: 0;

		left: unset;

		right: -12px;

	}





	/*  お役立ちセミナー

	---------------------------------------------------------------*/

	section.seminar{

		padding: 8% 4% 4%;

		width: 100%;

		box-sizing: border-box;

	}



	/*お役立ちセミナー・スライダー*/

	.seminarList {

		margin: 0;

		position: relative;

	}

	.seminarList li {

		margin: 0 10px !important;

	}

	.seminarList.noSlide {

		max-width: 420px;

		margin: 0 auto;

	}

	.seminarList.noSlide li {

		margin: 0 10px 20px;

	}

	#main .seminarList a {

		display: block;

		background-color: #F2F2F8;

		position: relative;

		color: #2E3036;

		text-decoration: none;

	}

	#main .seminarList a:active {

		opacity: 0.7;

		text-decoration: none;

	}

	.seminarList a .img img{

		width: auto;

		max-width: 100%;

		height: auto;

	}

	.seminarList a .txt {

		position: relative;

	}

	.seminarList a .txt dl {

		padding: 15px 15px 80px;

		box-sizing: border-box;

		font-size: 14px;

	}

	.seminarList a .txt dl dt {

		margin: 0 0 10px;

		font-size: 16px;

		font-weight: bold;

		line-height: 1.3;

	}

	.seminarList a .location {

		font-size: 14px;

		position: absolute;

		left: 15px;

		bottom: 52px;

		background: url(/system/common2/images/icon_place.svg) no-repeat left center;

		background-size: 12px auto;

		padding: 0 15px 0 17px;

	}

	.seminarList a span.arrow {

		position: absolute;

		display: block;

		left: 0;

		bottom: 0;

		font-size: 14px;

		padding: 8px 0 10px;

		border-top: solid 1px #e7e7f3;

		width: 100%;

		text-align: center;

	}

	.seminarList a span.arrow span {

		background: url(/system/common2/images/com_ic005.svg) no-repeat right center;

		padding: 0 20px 0 0;

		display: inline-block;

		color: #24597F;

	}

	.seminarList .slick-arrow {

		z-index: 1;

	}

	.seminarList .slick-list {

		overflow: unset;

	}

	.seminarList .slick-prev,

	.seminarList .slick-next {

		position: absolute;

		top: 50%;

		background-color: #FFF;

		border: none;

		width: 40px;

		height: 40px;

		border-radius: 100%;

		box-shadow: 0px 0px 6px rgb(0 0 0 / 20%);

		text-indent: -9999px;

		cursor: pointer;

		margin-top: -20px;

		border: solid 1px #6561ab;

	}

	.seminarList .slick-prev.slick-disabled,

	.seminarList .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.seminarList .slick-prev {

		left: 0;

	}

	.seminarList .slick-next {

		right: 0;

	}

	.seminarList .slick-prev::before,

	.seminarList .slick-next::before {

		content: "";

		position: absolute;

		width: 10px;

		height: 10px;

		border-top: solid 1px;

		border-right: solid 1px;

		top: 50%;

		margin: -4px 0 0 -8px;

		left: 50%;

		color: #24597f;

		display: block;

		transform: rotate(45deg);

	}

	.seminarList .slick-prev::before {

		transform: rotate(-135deg);

		margin: -6px 0 0 -3px;

	}

	.seminarList .slick-list {

		overflow: unset;

	}

	.seminarList .slick-slide:not(.slick-center) {

		-webkit-filter: opacity(40%);

		-moz-filter: opacity(40%);

		-o-filter: opacity(40%);

		-ms-filter: opacity(40%);

		filter: opacity(40%);

	}





	/*  お役立ち情報

	---------------------------------------------------------------*/

	section.post{

		padding: 8% 4% 8%;

		width: 100%;

		box-sizing: border-box;

	}



	/*お役立ち情報・スライダー*/

	.postList {

		margin-bottom: 20px;

		position: relative;

	}

	.postList li {

		margin: 0 10px !important;

	}

	.postList.noSlide {

		max-width: 420px;

		margin: 0 auto;

	}

	.postList.noSlide li {

		margin: 0 10px 20px;

	}

	#main .postList a {

		display: block;

		background-color: #fff;

		position: relative;

		color: #000;

		text-decoration: none;

	}

	#main .postList a:active {

		opacity: 0.7;

		text-decoration: none;

	}

	.postList a .img img{

		width: auto;

		max-width: 100%;

		height: auto;

	}

	.postList a .img > span.cat{

		color: #fff;

		font-size: 14px;

		font-weight: 600;

		width: fit-content;

		min-width: 46px;

		min-height: 30px;

		background: var(--main-color);

		display: flex;

		align-items: center;

		justify-content: center;

		position: absolute;

		right: 0;

		top: 0;

		padding: 0 8px;

		box-sizing: border-box;

	}

	.postList a .txt {

		padding: 20px 0;

	}

	.postList a .txt dl dt {

		font-size: 16px;

		font-weight: bold;

	}

	.postList a .txt dl dd.tag{

		margin-top: 24px;

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	.postList a .txt dl dd.tag > span{

		padding: 6px 10px;

		color: var(--main-color);

		font-size: 12px;

		background: var(--bg-main);

		border-radius: 100px;

	}



	.postList .slick-arrow {

		z-index: 1;

	}

	.postList .slick-list {

		overflow: unset;

	}

	.postList .slick-prev,

	.postList .slick-next {

		position: absolute;

		top: 50%;

		background-color: #FFF;

		border: none;

		width: 40px;

		height: 40px;

		border-radius: 100%;

		box-shadow: 0px 0px 6px rgb(0 0 0 / 20%);

		text-indent: -9999px;

		cursor: pointer;

		margin-top: -20px;

		border: solid 1px #6561ab;

	}

	.postList .slick-prev.slick-disabled,

	.postList .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.postList .slick-prev {

		left: 0;

	}

	.postList .slick-next {

		right: 0;

	}

	.postList .slick-prev::before,

	.postList .slick-next::before {

		content: "";

		position: absolute;

		width: 10px;

		height: 10px;

		border-top: solid 1px;

		border-right: solid 1px;

		top: 50%;

		margin: -4px 0 0 -8px;

		left: 50%;

		color: #24597f;

		display: block;

		transform: rotate(45deg);

	}

	.postList .slick-prev::before {

		transform: rotate(-135deg);

		margin: -6px 0 0 -3px;

	}

	.postList .slick-list {

		overflow: unset;

	}

	.postList .slick-slide:not(.slick-center) {

		-webkit-filter: opacity(40%);

		-moz-filter: opacity(40%);

		-o-filter: opacity(40%);

		-ms-filter: opacity(40%);

		filter: opacity(40%);

	}





	/* 関連カテゴリ

	---------------------------------------------------------------*/

	section.related_categories{

		padding: 8% 4% 8%;

		width: 100%;

		box-sizing: border-box;

	}



	ul.category_list{

		display: flex;

		flex-wrap: wrap;

		gap: 12px;

	}

	ul.category_list li{

		width: calc( (100% - 12px) / 2 );

	}

	ul.category_list a{

		padding: 0.6em 1.6em 0.6em 0.6em;

		color: var(--main-color);

		font-size: 16px;

		font-weight: 600;

		text-decoration: none;

		display: flex;

		align-items: center;

		justify-content: center;

		border: 4px solid #e7e9f1;

		box-sizing: border-box;

		position: relative;

		height: 100%;

	}

	ul.category_list a:after{

		content: "";

		margin: auto;

		width: 10px;

		height: 10px;

		border: 2px solid #93a3d3;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 18px;

	}

	ul.category_list a:hover{

		background: #f1f1f1;

	}





	/* まずはお気軽にご相談ください

	---------------------------------------------------------------*/

	.inner3{

		padding: 0 10px;

		width: 100%;

		box-sizing: border-box;

	}

	#sec7 {

		padding: 30px 0;

		overflow: hidden;

		background: transparent url(/system/common2/images/top/sec7_bg.jpg) no-repeat center center;

		background-size: cover;

	}

	#sec7 h2.midashi {

		color: #fff;

		font-size: 20.5px;

		font-weight: bold;

		line-height: 1.1;

		text-align: center;

	}

	#sec7 .midashiEn{

		margin-top: 25px;

		text-align: center;

	}

	.sec .midashiEn img{

		max-width: 260px;

	}

	#sec7 .lead {

		margin-top: 20px;

		text-align: center;

		line-height: 1.6;

		font-weight: bold;

		font-size: 13.8px;

		color: #fff;

	}

	#sec7 .rows {

		display: -webkit-flex;

		display: flex;

		-webkit-justify-content: space-between;

		justify-content: space-between;

		margin-top: 15px;

		-webkit-flex-wrap: wrap;

		flex-wrap: wrap;

	}

	#sec7 .rows .col {

		-webkit-flex: 0 0 100%;

		flex: 0 0 100%;

		margin-top: 20px;

	}

	#sec7 .rows .col a {

		display: -webkit-flex;

		display: flex;

		-webkit-justify-content: center;

		justify-content: center;

		-webkit-align-items: center;

		align-items: center;

		height: 60px;

		background-color: #fff;

		border-radius: 5px;

		font-weight: bold;

		font-size: 16.7px;

		text-decoration: none;

		color: #24597F;

	}

	#sec7 .rows .col:nth-child(1) a:after {

		content: url(/system/common2/images/top/icon_contact1.png);

		display: block;

		margin-left: 15px;

		line-height: 1;

	}

	#sec7 .rows .col:nth-child(2) a:after {

		content: url(/system/common2/images/top/icon_contact2.png);

		display: block;

		margin-left: 15px;

		line-height: 1;

	}

	#sec7 .rows .col:nth-child(3) a:after {

		content: url(/system/common2/images/top/icon_contact3.png);

		display: block;

		margin-left: 15px;

		line-height: 1;

	}

	#sec7 .rows .col a:hover {

		opacity: .8;

		text-decoration: none;

	}

	#sec7 .rows .col .text {

		margin-top: 15px;

		text-align: center;

		line-height: 1.6;

		color: #fff;

		font-size: 13px;

	}























	#footer {

		background-color: #F1F2F2;

		font-size: 14px;

		width: 100%;

		margin: unset;

		padding: unset;

		text-align: left;

		line-height: unset;

		color: unset;

	}

	#footer #pageTop {

		right: 0;

		bottom: 0;

	}

	#footer #pageTop {

		position: static;

	}

	#footer #pageTop:hover {

		opacity: 0.8;

	}

	#footer .socialLink {

		padding: 15px 10px;

	}

	#footer .footerCol4 {

		overflow: hidden;

		margin: 0;

		border-top: 1px solid #E4E5E5;

	}

	#footer .footerCol4 .col {

		-webkit-box-sizing: border-box;

		-moz-box-sizing: border-box;

		-o-box-sizing: border-box;

		-ms-box-sizing: border-box;

		box-sizing: border-box;

		padding: 30px 30px 20px 30px;

	}

	#footer .footerCol4 .col .firstHierarchy {

		line-height: 1.2;

		font-size: 114%;

		color: #000;

	}

	#footer .footerCol4 .col .secondHierarchy {

		margin: 15px 0 0;

	}

	#footer .footerCol4 .col .secondHierarchy li:before {

		content: "・";

	}

	#footer .footerCol4 .col .secondHierarchy a {

		line-height: 1.2;

		color: #35383B;

		text-decoration: none;

	}

	#footer .footerBottom {

		clear: both;

		padding: 0 0 20px;

		border-top: none;

		overflow: hidden;

	}

	#footer .footerBottom .copyRight {

		margin-top: 5px;

		text-align: center;

		color: #999999;

		font-size: 10px;

		font-size: 1.0rem;

	}

	footer {

		clear: both;

	}

	footer #footerInner {

		overflow: hidden;

		background: #000000;

		display: table;

		width: 100%;

	}

	footer #footerInner #pageTop {

		display: table-cell;

		width: 45px;

		height: 45px;

		background: url(/common2/images/footer_ic002.png) no-repeat 0 0;

		background-size: contain;

		text-indent: -9999px;

	}

	footer #footerInner #pageTop a {

		display: block;

		height: 45px;

	}

	footer #footerInner #footerUtility {

		display: table-cell;

		vertical-align: middle;

	}

	footer #footerInner #footerUtility #copyRight {

		padding-left: 10px;

		font-size: 7px;

		font-size: 0.7rem;

		color: #999999;

	}





	/* ページ下部フローティングボタン(floatBtn)

	------------------------------------------------------------*/

	#floatBtn {

		padding: 16px;

		width: 100%;

		background-color: rgb(17 43 120 / 86%);

		box-sizing: border-box;

		display: flex;

		justify-content: center;

		gap: 5px;

		position: fixed;

		left: 0;

		bottom: 0;

		z-index: 50;

	}

	#floatBtn a{

		padding: 6px 6px;

		color: var(--sub-color02);

		font-size: min(3.2vw, 14px);

		font-weight: bold;

		line-height: 1.1;

		text-decoration: none;

		width: 32%;

		height: auto;

		display: flex;

		justify-content: space-between;

		align-items: center;

		gap: 4px;

		background-color: #fff;

		border-radius: 5px;

		box-sizing: border-box;

		transition: 0.28s;

		flex: 1;

	}

	#floatBtn a:active{

		opacity: 0.8;

		transition: 0.28s;

	}



	/*class「col」を含む場合*/

	#floatBtn > .col{

		width: calc(100% / 3);

	}

	#floatBtn > .col a{

		margin: 0;

		width: 100%;

		height: 100%;

		box-sizing: border-box;

	}



	#floatBtn a:after{

		content: "";

		margin-top: -4px;

		width: 15px;

		height: 15px;

		background-repeat: no-repeat;

		background-position: center center;

		background-size: contain;

		display: block;

		flex: unset;

	}

	#floatBtn a.btnContact:after,

	#floatBtn .col:nth-child(1) a:after {

		background-image: url(/system/common2/images/top/icon_check_contact.svg);

	}

	#floatBtn a.btnCatalog:after,

	#floatBtn .col:nth-child(2) a:after {

		background-image: url(/system/common2/images/top/icon_dowmload_contact.svg);

	}

	#floatBtn a.btnMail:after,

	#floatBtn .col:nth-child(3) a:after {

		background-image: url(/system/common2/images/top/icon_mail_contact.svg);

	}



	#floatBtn .col a:hover {

		text-decoration: none;

	}





	/* お問い合わせメニューブロック

	---------------------------------------*/

	section.contactMenuArea{

		padding: 80px 18px;

		width: 100%;

		box-sizing: border-box;

		background: url(/system/common2/images/top/visual_contactMenuArea_bg.jpg) no-repeat center center;

		background-size: cover;

	}

	section.contactMenuArea .txt{

		margin-bottom: 44px;

	}

	section.contactMenuArea .txt h2{

		margin: 0 auto 14px;

		padding: 0;

		color: #fff;

		font-size: 20px;

		font-weight: 600;

		text-align: center;

		width: fit-content;

	}

	section.contactMenuArea .txt p{

		margin: 0 auto;

		color: #fff;

		font-size: 16px;

		text-align: center;

		width: fit-content;

	}



	section.contactMenuArea ul.btns{

		display: flex;

		justify-content: center;

		flex-wrap: wrap;

		gap: 30px;

	}

	section.contactMenuArea ul.btns li{

		width: 100%;

	}

	section.contactMenuArea ul.btns li a{

		padding: 20px 20px;

		color: var(--sub-color02);

		font-size: 18px;

		font-weight: 600;

		text-decoration: none;

		line-height: 1.2;

		background: #fff;

		border-radius: 6px;

		box-sizing: border-box;

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 18px;

		transition: 0.28s;

	}

	section.contactMenuArea ul.btns li a:hover{

		opacity: 0.8;

	}

	section.contactMenuArea ul.btns li a:after{

		content: "";

		margin-top: -4px;

		width: 22px;

		height: 22px;

		background-repeat: no-repeat;

		background-position: center center;

		background-size: contain;

		display: block;

	}

	section.contactMenuArea ul.btns li a.btnContact:after{

		background-image: url(/system/common2/images/top/icon_check_contact.svg);

	}

	section.contactMenuArea ul.btns li a.btnCatalog:after{

		background-image: url(/system/common2/images/top/icon_dowmload_contact.svg);

	}

	section.contactMenuArea ul.btns li a.btnMail:after{

		background-image: url(/system/common2/images/top/icon_mail_contact.svg);

	}



	section.contactMenuArea ul.btns li p{

		margin-top: 14px;

		color: #fff;

		font-size: 15px;

		text-align: center;

	}



}