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

システムトップページ

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

/*変数設定*/

:root {

	--main-color: #112b78;

	--sub-color: #1d68cc;

	--sub-color02: #2C50B8;

	--bg-main: #e7eaf1;

	--bg-color02: #eef0f6;

	--bg-color03: #f0f3fa;

	/*その他*/

	--light-purple: #93a3d3;

}



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

/*	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;

}



/* 共通パーツ

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

/* 見出しスタイル*/

/*h2*/

#main h2{

	margin: 0 auto 60px;

	text-align: center;

	width: fit-content;

}

#main h2 > p{

	margin-bottom: 14px;

	color: var(--main-color);

	font-size: 30px;

	line-height: 1.2;

}

#main h2 > span.en{

	padding: 5px 8px;

	color: var(--sub-color02);

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

	font-size: 15px;

	font-weight: 500;

	min-width: 292px;

	display: block;

	border: 1px solid #d5dcf1;

	border-width: 1px 0 1px 0;

	box-sizing: border-box;

}



/*h3*/

#main h3{

	margin-bottom: 40px;

	padding: 8px 0 6px 30px;

	font-size: 30px;

	font-weight: 600;

	line-height: 1.4;

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

	box-sizing: border-box;

}



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

.btnBoxCommon{

	padding: 30px 30px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 50px;

}

.btnBoxCommon a.btn{

	padding: 15px 54px;

	color: var(--sub-color02);

	font-size: 17px;

	font-weight: 600;

	line-height: 1;

	text-decoration: none;

	background: #fff;

	min-width: 364px;

	border-radius: 6px;

	border: 1px solid #abb9e3;

	box-sizing: border-box;

	display: flex;

	justify-content: center;

	align-items: center;

	transition: 0.2s;

}

.btnBoxCommon a.btn p{

	display: flex;

	align-items: center;

	gap: 15px;

}

.btnBoxCommon a.btn:hover{

	background: #eff3ff;

	transition: 0.2s;

}



/*アイコン表示切替*/

.btnBoxCommon a.btn.normal p:after{

	content: "";

	margin: auto;

	width: 13px;

	height: 13px;

	display: block;

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

	border-width: 2px 2px 0 0;

	transform: rotate(45deg);

	flex: none;

}



.btnBoxCommon a.btn.contact p:after{

	content: "";

	width: 14px;

	height: 14px;

	background-color: var(--sub-color02);

	mask: url(/system/common2/images/top/icon_contact.svg) no-repeat center / contain;

}



/*カタログ*/

.btnBoxCommon a.btn:has(img){

	padding-left: 140px;

	position: relative;

}

.btnBoxCommon a.btn:has(img) img{

	position: absolute;

	left: 14px;

	bottom: 0;

}



/*ホバー色反転ver*/

.btnBoxCommon a.btn.inversion{

	color: #fff;

	background: var(--sub-color02);

	border-color: var(--sub-color02);

}

.btnBoxCommon a.btn.inversion p:after {

	background-color: #fff;

}

.btnBoxCommon a.btn.inversion:hover{

	opacity: 0.8;

}





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

/*	システムトップページ(コンテンツ)  */

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

#main{

	margin: 0 auto;

	width: 100%;

	box-sizing: border-box;

}



	/* メインスライダー

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

	section.mainslider{

		background: #fff;

	}

	.mainslider .slideOuter{

		padding: 10px 0 60px;

		position: relative;

	}

	.mainslider .slideOuter ul.productSlider{

		margin: 0;

		min-height: 320px;

		justify-content: center;

		display: flex !important;

		visibility: hidden;

	}

	.mainslider .slideOuter ul.productSlider li{

		margin: 0 10px;

		width: 320px !important;

		height: 320px !important;

	}

	.mainslider .slideOuter ul.productSlider li a{

		transition: 0.2s;

	}

	.mainslider .slideOuter ul.productSlider li a:active{

		opacity: 0.8;

		transition: 0.2s;

	}

	.mainslider .slideOuter ul.productSlider li img{

		width: 100%;

		height: auto;

		border-radius: 8px;

	}



	/*スライダー内リンク個別調整用*/

	.mainslider .slideOuter ul.productSlider li.hasLink{

		position: relative;

	}

	.mainslider .slideOuter ul.productSlider li.hasLink a.entryLink{

		margin: auto;

		padding: 6px 30px;

		color: #fff;

		font-size: 13px;

		text-align: center;

		text-decoration: none;

		width: fit-content;

		min-width: 260px;

		display: block;

		background: #008000;

		border-radius: 100px;

		box-sizing: border-box;

		position: absolute;

		bottom: 20px;

		left: 0;

		right: 0;

	}

	.mainslider .slideOuter ul.productSlider li.hasLink a.entryLink:after{

		content: "";

		margin: auto;

		width: 5px;

		height: 5px;

		display: block;

		border: 2px solid #fff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 16px;

		top: 0;

		bottom: 0;

	}

	.mainslider .slideOuter ul.productSlider li.hasLink a.entryLink:hover{

		opacity: 0.8;

	}

	.mainslider .slideOuter ul.productSlider li.kizunaCore a.entryLink{

		background: #008000;

	}

	.mainslider .slideOuter ul.productSlider li.superCocktail a.entryLink{

		background: #ff0000;

	}



	/*コントローラー*/

	ul.productSlider + .btns{

		margin: auto;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 20px;

		position: absolute;

		left: 0;

		right: 0;

		bottom: 20px;

	}

	ul.productSlider + .btns > div:nth-child(1),

	ul.productSlider + .btns > div:nth-child(3){

		flex: 1;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots{

		position: unset;

		display: flex;

		justify-content: center;

		gap: 12px;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li{

		margin: 0;

		width: fit-content !important;

		height: fit-content !important;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li > button{

		padding: 0;

		width: 8px;

		height: 8px;

		display: block;

		background: var(--bg-color02);

		border-radius: 100%;

		border: none;

		cursor: pointer;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li.slick-active > button{

		background: var(--sub-color02);

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li > button:before{

		display: none;

	}



	/*スライダー操作系*/

	ul.productSlider + .btns .slickCcontrols{

		display: flex;

		align-items: center;

		gap: 16px;

	}

	ul.productSlider + .btns .slickCcontrols > button{

		width: 22px;

		height: 22px;

		display: block;

		border-radius: 100%;

		border: none;

		background: var(--bg-color02);

		cursor: pointer;

		position: relative;

		transition: 0.2s;

	}

	ul.productSlider + .btns .slickCcontrols > button:hover{

		background: #d0d9f1;

		transition: 0.2s;

	}



	ul.productSlider + .btns .slickCcontrols > button.prev:before,

	ul.productSlider + .btns .slickCcontrols > button.next:before{

		content: "";

		margin: auto;

		width: 9px;

		height: 8px;

		display: block;

		background: var(--main-color);

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

	ul.productSlider + .btns .slickCcontrols > button.prev:before{

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

	}

	ul.productSlider + .btns .slickCcontrols > button.next:before{

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

	}



	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_pause,

	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_play{

		margin: auto;

		width: 12px;

		height: 12px;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_pause svg,

	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_play svg{

		width: 100%;

		height: 100%;

		object-fit: contain;

	}



	ul.productSlider + .btns .slickCcontrols > button.pausePlay.play .icon_pause,

	ul.productSlider + .btns .slickCcontrols > button.pausePlay.pause .icon_play{

		display: none;

	}





	/* お問い合わせセクション

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

	section.entry_box{

		padding: 16px 16px;

		background: var(--sub-color02);

		width: 100%;

		box-sizing: border-box;

	}

	section.entry_box > .inner{

		margin: 0 auto;

		width: fit-content;

		display: flex;

		align-items: center;

		gap: 80px;

	}

	section.entry_box > .inner > p{

		color: #fff;

		font-size: 16px;

	}

	section.entry_box > .inner > a.btn{

		padding: 12px 24px;

		color: var(--sub-color02);

		font-size: 16px;

		font-weight: 600;

		text-decoration: none;

		background: #fff;

		border-radius: 5px;

		position: relative;

		transition: 0.2s;

	}

	section.entry_box > .inner > a.btn:hover{

		opacity: 0.8;

		transition: 0.2s;

	}

	section.entry_box > .inner > a.btn.entry{

		padding-right: 52px;

	}

	section.entry_box > .inner > a.btn.entry:before{

		content: url(/system/common2/images/top/icon_application.svg);

		margin: auto;

		width: 22px;

		height: 22px;

		object-fit: contain;

		position: absolute;

		top: 0;

		bottom: 0;

		right: 12px;

	}





	/* 製品・ソリューション

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

	.productsSolution{

		margin: 0 auto;

		padding: 80px 20px 80px;

		width: 100%;

		max-width: 1320px;

		box-sizing: border-box;

	}

	.productsSolution > .btnBoxCommon{

		padding: 60px 30px 30px;

		border-top: 1px solid #d5dcf1;

	}



	/*タブ切り替え*/

	.productsSolution .tabs{

		margin-bottom: 40px;

		border-bottom: 8px solid var(--sub-color02);

		display: flex;

		justify-content: center;

		gap: 16px;

	}

	.productsSolution .tabs > a{

		padding: 16px 40px;

		color: var(--main-color);

		font-size: 18px;

		line-height: 1.2;

		text-decoration: none;

		background: #fff;

		border: 1px solid #cfd5e4;

		border-width: 1px 1px 0 1px ;

		border-radius: 6px 6px 0 0;

		position: relative;

		transition: 0.2s;

	}

	.productsSolution .tabs > a > span{

		font-weight: 600;

	}

	.productsSolution .tabs > a[id^="sea_"]{

		padding-left: 54px;

	}

	.productsSolution .tabs > a[id^="sea_"] > svg{

		margin: auto;

		width: 20px;

		height: 20px;

		object-fit: contain;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 18px;

		fill: var(--sub-color02);

		transition: 0.2s;

	}



	.productsSolution .tabs > a.active,

	.productsSolution .tabs > a:hover{

		color: #fff;

		background: var(--sub-color02);

		border-color: var(--sub-color02);

		transition: 0.2s;

	}

	.productsSolution .tabs > a.active > svg,

	.productsSolution .tabs > a:hover > svg{

		fill: #fff;

		transition: 0.2s;

	}



	.productsSolution .tabBox > div{

		margin: 60px 0 60px;

		display: none;

		opacity: 0;

		visibility: hidden;

		transform: translateY(20px);

	}

	.productsSolution .tabBox > div.active{

		display: block;

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		transition: 0.5s;

	}





	/*主な製品・シリーズ*/

	.productsSolution ul.prod_lineup{

		padding: 45px 0 0;

		display: flex;

		flex-wrap: wrap;

		gap: 100px 24px;

	}

	.productsSolution ul.prod_lineup li{

		padding: 70px 20px 14px;

		background: var(--bg-color03);

		width: calc((100% - (24px * 2)) / 3);

		display: flex;

		flex-direction: column;

		box-sizing: border-box;

	}

	/*幅調整用*/

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

		.productsSolution ul.prod_lineup li{

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

		}

	}



	.productsSolution ul.prod_lineup li > a{

		margin-top: -115px;

		display: block;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > a:hover{

		opacity: 0.7;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li .logo{

		padding: 0 16px;

		width: 100%;

		height: 90px;

		background: #fff;

		display: flex;

		align-items: center;

		justify-content: center;

		box-sizing: border-box;

		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);

	}

	.productsSolution ul.prod_lineup li .logo img{

		width: auto;

		max-width: 100%;

		height: auto;

		max-height: 100%;

		object-fit: contain;

	}



	.productsSolution ul.prod_lineup li dl dt{

		margin: 22px auto 0;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		width: fit-content;

	}

	.productsSolution ul.prod_lineup li dl dd{

		margin: 10px 0 0;

		font-size: 16px;

	}



	.productsSolution ul.prod_lineup li > .btns{

		margin-top: auto;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail{

		margin-top: 24px;

		padding: 6px 10px;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		text-decoration: none;

		width: 100%;

		background: #fff;

		display: flex;

		justify-content: center;

		border: 1px solid var(--light-purple);

		border-radius: 2px;

		box-sizing: border-box;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail:hover{

		background: #d5e0f7;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail > span{

		padding: 0 18px;

		position: relative;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail > span:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid var(--light-purple);

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 2px;

		top: 0;

		bottom: 0;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex{

		margin-top: 14px;

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a{

		padding: 5px 24px;

		color: #fff;

		font-size: 13px;

		text-decoration: none;

		display: flex;

		align-items: center;

		justify-content: center;

		background: var(--sub-color02);

		border-radius: 6px;

		flex: 1;

		position: relative;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a:hover{

		background: #436be3;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a:after{

		content: "";

		margin: auto;

		width: 12px;

		height: 12px;

		background-size: contain;

		background-position: center center;

		background-repeat: no-repeat;

		position: absolute;

		right: 10px;

		top: 0;

		bottom: 0;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a.dl:after{

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

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a.contact:after{

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

	}





	/*カテゴリから探す*/

	.productsSolution .tabBox .searchCategory .catNameTab{

		display: flex;

		justify-content: center;

		flex-wrap: wrap;

		gap: 20px;

	}

	.productsSolution .tabBox .searchCategory .catNameTab a{

		color: #2e3036;

		padding: 14px 24px;

		font-size: 18px;

		text-decoration: none;

		background: #fff;

		min-width: 160px;

		display: flex;

		justify-content: center;

		border: 1px solid #abb9e3;

		box-sizing: border-box;

		border-radius: 100px;

		position: relative;

		transition: 0.2s;

	}

	.productsSolution .tabBox .searchCategory .catNameTab a:hover{

		background: #eff3ff;

		transition: 0.2s;

	}

	.productsSolution .tabBox .searchCategory .catNameTab a.active{

		color: #fff;

		font-weight: 600;

		background: var(--main-color);

		border-color: var(--main-color);

	}

	.productsSolution .tabBox .searchCategory .catNameTab a.active:after{

		content: "";

		margin: auto;

		width: 36px;

		height: 10px;

		display: block;

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

		background: var(--main-color);

		position: absolute;

		top: 100%;

		left: 0;

		right: 0;

	}



	.searchCategory .categoryBox > div{

		margin-top: 50px;

		display: none;

		opacity: 0;

		visibility: hidden;

		transform: translateY(20px);

	}

	.searchCategory .categoryBox > div.active{

		display: block;

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		transition: 0.5s;

	}



	.searchCategory .fieldTab{

		margin-bottom: 40px;

		padding: 15px 10px;

		background: #eaedf8;

		display: flex;

		align-items: center;

		justify-content: center;

		flex-wrap: wrap;

		gap: 10px;

	}

	.searchCategory .fieldTab a{

		color: #2e3036;

		font-size: 16px;

		line-height: 1.2;

		text-decoration: none;

		padding: 15px 36px 15px 24px;

		background: #fff;

		border-radius: 8px;

		position: relative;

		transition: 0.2s;

	}

	.searchCategory .fieldTab a:hover{

		background: #d5e0f7;

		transition: 0.2s;

	}

	.searchCategory .fieldTab a.active{

		font-weight: 600;

		color: #fff;

		background: var(--main-color);

	}

	.searchCategory .fieldTab a:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid #bfcaea;

		border-width: 0 1px 1px 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 10px;

	}

	.searchCategory .fieldTab a.active:after{

		border-color: #fff;

	}



	.searchCategory .fieldBox{

		margin-bottom: 20px;

		display: none;

		opacity: 0;

		visibility: hidden;

		transform: translateY(20px);

	}

	.searchCategory .fieldBox.active{

		display: block;

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		transition: 0.5s;

	}

	.searchCategory .fieldBox > div:nth-child(n+2){

		margin-top: 40px;

	}

	.searchCategory .fieldBox > div{

		display: none;

	}

	.searchCategory .fieldBox > div.disp{

		display: block;

	}

	/*製品ラインナップ*/

	.searchCategory .fieldBox .lineup{

		display: flex;

		flex-wrap: wrap;

		gap: 24px;

	}

	.searchCategory .fieldBox .lineup a{

		text-decoration: none;

		width: calc((100% - (25px * 2)) / 3);

		transition: 0.2s;

	}

	.searchCategory .fieldBox .lineup a:hover{

		opacity: 0.7;

		transition: 0.2s;

	}

	/*幅調整用*/

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

		.searchCategory .fieldBox .lineup a{

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

		}

	}



	.searchCategory .fieldBox .lineup a dl{

		display: flex;

		flex-direction: column;

		border: 3px solid var(--bg-color03);

		background: var(--bg-color03);

		box-sizing: border-box;

		width: 100%;

		height: 100%;

	}

	.searchCategory .fieldBox .lineup a dl dt{

		padding: 16px 20px;

		background: #fff;

		position: relative;

	}

	.searchCategory .fieldBox .lineup a dl dt:after{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		display: block;

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

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 14px;

	}

	.searchCategory .fieldBox .lineup a dl dt span,

	.searchCategory .fieldBox .lineup a dl dt p{

		color: var(--sub-color02);

		font-weight: 600;

		line-height: 1.2;

		display: inline-block;

	}

	.searchCategory .fieldBox .lineup a dl dt span{

		margin-bottom: 6px;

		font-size: 16px;

	}

	.searchCategory .fieldBox .lineup a dl dt p{

		font-size: 18px;

	}



	.searchCategory .fieldBox .lineup a dl dd{

		padding: 24px 20px;

		color: #000;

		font-size: 16px;

		flex: 1;

	}





	/*業種から探す*/

	.searchIndustry ul.industry_list{

		margin-top: 40px;

		display: flex;

		flex-wrap: wrap;

		gap: 24px;

	}

	.searchIndustry ul.industry_list > a{

		text-decoration: none;

		width: calc((100% - (24px * 2)) / 3);

		border: 4px solid #e7eaf1;

		background: #fff;

		box-sizing: border-box;

		display: flex;

		align-items: stretch;

		transition: 0.2s;

	}

	.searchIndustry ul.industry_list > a:hover{

		background: #dbe4ff;

		opacity: 0.8;

		transition: 0.2s;

	}

	.searchIndustry ul.industry_list > a > div{

		width: 50%;

	}

	.searchIndustry ul.industry_list > a .photo{

		aspect-ratio: 5 / 3;

	}

	.searchIndustry ul.industry_list > a .photo > img{

		width: 100%;

		height: 100%;

		object-fit: cover;

		overflow: hidden;

	}

	.searchIndustry ul.industry_list > a .name{

		padding: 20px 40px 20px 20px;

		box-sizing: border-box;

		display: flex;

		align-items: center;

		justify-content: center;

		position: relative;

	}

	.searchIndustry ul.industry_list > a .name:after{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		display: block;

		border: 2px solid var(--light-purple);

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 20px;

		top: 0;

		bottom: 0;

	}

	.searchIndustry ul.industry_list > a .name p{

		color: var(--main-color);

		font-size: 20px;

		font-weight: 600;

		line-height: 1.2;

		text-align: center;

	}

	.searchIndustry ul.industry_list > a .name p.small{

		font-size: 16px;

	}

	/*調整用*/

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

		.searchIndustry ul.industry_list > a .photo{

			aspect-ratio: 4 / 3;

		}

		.searchIndustry ul.industry_list > a .name p{

			font-size: 18px;

		}

	}

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

		.searchIndustry ul.industry_list > a{

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

		}

		.searchIndustry ul.industry_list > a .photo{

			aspect-ratio: 5 / 3;

		}

	}





	/* 導入事例

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

	section.caseStudy{

		padding: 80px 0 50px;

		background: var(--bg-color03);

	}

	section.caseStudy .inner{

		margin: 0 auto;

		padding: 0 20px;

		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;

		transition: 0.2s;

	}

	ul.caseList > a:visited{

		color: #000099;

	}

	ul.caseList > a:hover{

		text-decoration: none;

		background: #d5dcf1;

		opacity: 1;

		transition: 0.2s;

	}

	/*幅調整用*/

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

		ul.caseList > a{

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

		}

	}



	ul.caseList > a > .visual{

		transition: 0.2s;

	}

	ul.caseList > a:hover  > .visual{

		background: #000;

		transition: 0.2s;

	}

	ul.caseList > a > .visual img{

		width: 100%;

		aspect-ratio: 7 / 5;

		object-fit: cover;

		transition: 0.2s;

		height: 100%;

	}

	ul.caseList > a:hover > .visual img{

		opacity: 0.7;

		transition: 0.2s;

	}



	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-color03);

		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 #abb9e3;

		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.seminarEvent{

		margin: 0 auto;

		padding: 100px 20px 60px;

		width: 100%;

		max-width: 1288px;

		box-sizing: border-box;

	}

	/*セミナースライダー*/

	.seminarSlider {

		margin: 60px auto 30px;

		padding: 0 24px;

		position: relative;

		visibility: hidden;

	}

	.seminarSlider .slick-list {

		margin: 0 auto;

		max-width: 1144px;

	}

	.seminarSlider li {

		margin: 0 12px !important;

	}

	#main .seminarSlider a {

		color: #000;

		display: flex;

		flex-direction: column;

		background-color: #F2F2F8;

		text-decoration: none;

		transition: 0.2s;

	}

	#main .seminarSlider a:hover {

		text-decoration: none;

		background: #d6dcf2;

		opacity: 1;

		transition: 0.2s;

	}

	#main .seminarSlider a .img{

		transition: 0.2s;

	}

	#main .seminarSlider a:hover .img{

		background: #000;

		transition: 0.2s;

	}

	#main .seminarSlider a .img img{

		transition: 0.2s;

	}

	#main .seminarSlider a:hover .img img{

		opacity: 0.7;

		transition: 0.2s;

	}

	.seminarSlider a .txt {

		padding: 24px 24px;

		display: flex;

		flex-direction: column;

		flex: 1;

	}

	.seminarSlider a .txt dl {

		box-sizing: border-box;

		font-size: 16px;

		line-height: 1.3;

		flex: 1;

	}

	.seminarSlider a .txt dl dt {

		margin: 0 0 10px;

		font-weight: 600;

	}

	.seminarSlider a .location {

		font-size: 14px;

		margin: 16px 0 0 0;

		padding-left: 22px;

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

		background-size: 12px auto;

	}

	.seminarSlider a span.arrow {

		margin-top: 30px;

		padding: 10px;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		background: #fff;

		border: 1px solid #abb9e3;

		box-sizing: border-box;

	}

	.seminarSlider a span.arrow span{

		display: flex;

		align-items: center;

		gap: 10px;

	}

	.seminarSlider a span.arrow span:after{

		content: "";

		width: 12px;

		height: 12px;

		background-color: var(--sub-color02);

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

	}

	.seminarSlider .slick-arrow {

		z-index: 1;

	}

	.seminarSlider .slick-prev,

	.seminarSlider .slick-next {

		margin: auto;

		padding: 0;

		background-color: #FFF;

		width: 44px;

		height: 44px;

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

		border: none;

		cursor: pointer;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	.seminarSlider .slick-prev.slick-disabled,

	.seminarSlider .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.seminarSlider .slick-prev {

		left: 0px;

	}

	.seminarSlider .slick-next {

		right: 0px;

	}

	.seminarSlider .slick-prev::before,

	.seminarSlider .slick-next::before {

		content: "";

		margin: auto;

		width: 19px;

		height: 19px;

		border-top: solid 2px;

		border-right: solid 2px;

		border-color: var(--sub-color02);

		display: block;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

	}

	.seminarSlider .slick-prev::before {

		transform: rotate(-135deg);

		left: 12px;

	}

	.seminarSlider .slick-next::before {

		right: 12px;

	}

	.seminarSlider .slick-list {

		overflow: unset;

	}

	.seminarSlider .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.useful{

		padding: 80px 0 50px;

		background: var(--bg-color03);

	}

	section.useful .inner{

		margin: 0 auto;

		padding: 0 20px;

		width: 100%;

		max-width: 1288px;

		box-sizing: border-box;

	}

	/*お役立ち資料スライダー*/

	.usefulSlider {

		margin: 60px auto 30px;

		padding: 0 24px;

		position: relative;

		visibility: hidden;

	}

	.usefulSlider .slick-list {

		margin: 0 auto;

		max-width: 1144px;

	}

	.usefulSlider li {

		margin: 0 12px !important;

	}

	#main .usefulSlider a {

		color: #000;

		display: flex;

		flex-direction: column;

		background-color: #fff;

		text-decoration: none;

		transition: 0.2s;

	}

	#main .usefulSlider a:hover {

		text-decoration: none;

		background: #d6dcf2;

		opacity: 1;

		transition: 0.2s;

	}

	#main .usefulSlider a .img{

		transition: 0.2s;

	}

	#main .usefulSlider a:hover .img{

		background: #000;

		transition: 0.2s;

	}

	#main .usefulSlider a .img img{

		transition: 0.2s;

	}

	#main .usefulSlider a:hover .img img{

		opacity: 0.7;

		transition: 0.2s;

	}

	.usefulSlider a .txt {

		padding: 20px 18px;

		display: flex;

		flex-direction: column;

		flex: 1;

	}

	.usefulSlider a .txt dl {

		box-sizing: border-box;

		font-size: 16px;

		line-height: 1.3;

		flex: 1;

	}

	.usefulSlider a .txt dl dt {

		color: var(--main-color);

		margin: 0 0 10px;

		font-weight: 600;

	}

	.usefulSlider a .txt span.dl{

		margin-top: 26px;

		color: #fff;

		font-size: 14px;

		padding: 5px 26px;

		border-radius: 6px;

		background: var(--sub-color02);

		display: flex;

		align-items: center;

		justify-content: center;

		position: relative;

	}

	.usefulSlider a .txt span.dl:after{

		content: "";

		margin: auto;

		width: 12px;

		height: 12px;

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

		background-size: contain;

		background-position: center center;

		background-repeat: no-repeat;

		position: absolute;

		right: 10px;

		top: 0;

		bottom: 0;

	}



	.usefulSlider .slick-arrow {

		z-index: 1;

	}

	.usefulSlider .slick-prev,

	.usefulSlider .slick-next {

		margin: auto;

		padding: 0;

		background-color: #FFF;

		width: 44px;

		height: 44px;

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

		border: none;

		cursor: pointer;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	.usefulSlider .slick-prev.slick-disabled,

	.usefulSlider .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.usefulSlider .slick-prev {

		left: 0px;

	}

	.usefulSlider .slick-next {

		right: 0px;

	}

	.usefulSlider .slick-prev::before,

	.usefulSlider .slick-next::before {

		content: "";

		margin: auto;

		width: 19px;

		height: 19px;

		border-top: solid 2px;

		border-right: solid 2px;

		border-color: var(--sub-color02);

		display: block;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

	}

	.usefulSlider .slick-prev::before {

		transform: rotate(-135deg);

		left: 12px;

	}

	.usefulSlider .slick-next::before {

		right: 12px;

	}

	.usefulSlider .slick-list {

		overflow: unset;

	}

	.usefulSlider .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.topics{

		margin: 0 auto;

		padding: 100px 20px 60px;

		width: 100%;

		max-width: 1320px;

		box-sizing: border-box;

	}



	ul.topicList{

		margin-bottom: 30px;

		display: flex;

		flex-wrap: wrap;

		gap: 60px 20px;

	}

	ul.topicList > a{

		text-decoration: none;

		background: var(--bg-color03);

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

		display: flex;

		flex-direction: column;

		transition: 0.2s;

	}

	ul.topicList > a.noLink {

		pointer-events: none;

	}

	ul.topicList > a:hover{

		text-decoration: none;

		background: #d6dcf2;

		opacity: 1;

		transition: 0.2s;

	}

	ul.topicList > a .img{

		position: relative;

		transition: 0.2s;

	}

	ul.topicList > a:hover .img{

		background: #000;

		transition: 0.2s;

	}

	ul.topicList > a .img img{

		transition: 0.2s;

	}

	ul.topicList > a:hover .img img{

		opacity: 0.7;

		transition: 0.2s;

	}

	ul.topicList > a .img > span{

		padding: 8px 10px;

		color: #fff;

		font-size: 14px;

		line-height: 1;

		position: absolute;

		top: -6px;

		right: -6px;

		z-index: 1;

	}

	/*タグ配色*/

	ul.topicList > a .img > span.tagLightGreen{

		background: #8bc85c;

	}

	ul.topicList > a .img > span.tagGreen{

		background: #00a391;

	}

	ul.topicList > a .img > span.tagOrange{

		background: #ff943d;

	}

	ul.topicList > a .img > span.tagBlue{

		background: #0067ab;

	}



	ul.topicList > a .img > img{

		width: 100%;

		aspect-ratio: 3 / 2;

		object-fit: cover;

		height: 100%;

	}



	ul.topicList > a .txt{

		padding: 24px 18px 40px;

		font-size: 16px;

		color: #000;

	}

	ul.topicList > a .txt dl dt{

		margin-bottom: 8px;

		font-weight: 600;

	}





	/* バナー表示エリア

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

	section.bannerArea{

		padding: 60px 0;

		background: var(--bg-color03);

	}

	section.bannerArea .inner{

		margin: 0 auto;

		padding: 0 20px;

		width: 100%;

		max-width: 1000px;

		box-sizing: border-box;

	}

	section.bannerArea .inner ul.bannerList{

		display: flex;

		justify-content: center;

		align-items: center;

		gap: 36px;

	}

	section.bannerArea .inner ul.bannerList a{

		width: 40%;

		transition: 0.28s;

	}

	section.bannerArea .inner ul.bannerList a:hover{

		opacity: 0.8;

		transition: 0.28s;

	}

	section.bannerArea .inner ul.bannerList a img{

		max-width: 100%;

		height: auto;

		vertical-align: top;

	}





	/* 関連コンテンツ

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

	section.information{

		margin: 0 auto;

		padding: 100px 20px 80px;

		max-width: 1320px;

	}



	ul.categoryList{

		margin: 0 auto;

		width: fit-content;

		display: flex;

		gap: 20px;

	}

	ul.categoryList li a{

		padding: 10px 44px;

		color: var(--sub-color02);

		font-size: 20px;

		font-weight: 600;

		line-height: 1.3;

		text-decoration: none;

		min-width: 300px;

		min-height: 90px;

		background: #fff;

		border: 3px solid #eaedf8;

		display: flex;

		align-items: center;

		justify-content: center;

		box-sizing: border-box;

		position: relative;

		transition: 0.2s;

	}

	ul.categoryList li a:after{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		display: block;

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

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 18px;

	}

	ul.categoryList li a.outerLink:after{

		content: "";

		width: 16px;

		height: 16px;

		display: block;

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

		background-size: contain;

		background-position: center center;

		border: unset;

		transform: unset;

		position: absolute;

		top: 0;

		bottom: 0;

		right: 18px;

	}

	ul.categoryList li a:hover{

		background: var(--bg-color03);

		transition: 0.2s;

	}



	/* トップへ戻るボタン

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

	#pageTop {

		position: fixed;

		right: 20px;

		bottom: 20px;

		z-index: 100;

		width: 56px;

		height: 56px;

		background: url(/system/common2/images/footer_ic001.svg) no-repeat 0 0;

		text-indent: -9999px;

	}



	#pageTop:hover {

		opacity: 0.8;

	}



	#pageTop a {

		display: block !important;

		width: 56px;

		height: 56px;

	}





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

/*	フッター  */

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

	/* PC用フッター

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





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

}



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

/* SP */

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

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

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

	.pc-none {

		/* display: block !important; */

	}

	.sp-none {

		display: none !important;

	}



	header{

		top: 0

	}



/* 共通パーツ

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

/* 見出しスタイル*/

/*h2*/

#main h2{

	margin: 0 auto 40px;

	padding: 0 18px;

	text-align: center;

	width: fit-content;

}

#main h2 > p{

	margin-bottom: 16px;

	color: var(--main-color);

	font-size: 24px;

	line-height: 1.2;

}

#main h2 > span.en{

	padding: 5px 8px;

	color: var(--sub-color02);

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

	font-size: 13px;

	font-weight: 500;

	min-width: 292px;

	display: block;

	border: 1px solid #d5dcf1;

	border-width: 1px 0 1px 0;

	box-sizing: border-box;

}



/*h3*/

#main h3{

	margin-bottom: 30px;

	padding: 8px 24px 4px 24px;

	font-size: 24px;

	font-weight: 600;

	line-height: 1.4;

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

	box-sizing: border-box;

}



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

.btnBoxCommon{

	padding: 40px 4%;

	width: 100%;

	box-sizing: border-box;

	display: flex;

	flex-direction: column;

	gap: 30px;

}

.btnBoxCommon a.btn{

	margin: 0 auto;

	padding: 15px 15px;

	color: var(--sub-color02);

	font-size: 17px;

	font-weight: 600;

	line-height: 1;

	text-decoration: none;

	background: #fff;

	border-radius: 6px;

	border: 1px solid #abb9e3;

	box-sizing: border-box;

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: 0.2s;

}

.btnBoxCommon a.btn p{

	display: flex;

	align-items: center;

	gap: 15px;

	z-index: 1;

}

.btnBoxCommon a.btn:active{

	background: #eff3ff;

	transition: 0.2s;

}



/*アイコン表示切替*/

.btnBoxCommon a.btn.normal p:after{

	content: "";

	margin: auto;

	width: 13px;

	height: 13px;

	display: block;

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

	border-width: 2px 2px 0 0;

	transform: rotate(45deg);

	flex: none;

}



.btnBoxCommon a.btn.contact p:after{

	content: "";

	width: 14px;

	height: 14px;

	background-color: var(--sub-color02);

	mask: url(/system/common2/images/top/icon_contact.svg) no-repeat center / contain;

}



/*カタログ*/

.btnBoxCommon a.btn:has(img){

	position: relative;

}

.btnBoxCommon a.btn:has(img) img{

	position: absolute;

	left: 14px;

	bottom: 0;

	width: 30vw;

	max-width: 108px;

	z-index: 0;

}



/*ホバー色反転ver*/

.btnBoxCommon a.btn.inversion{

	color: #fff;

	background: var(--sub-color02);

	border-color: var(--sub-color02);

}

.btnBoxCommon a.btn.inversion p:after {

	background-color: #fff;

}

.btnBoxCommon a.btn.inversion:active{

	opacity: 0.8;

}





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

/*	システムトップページ(コンテンツ)  */

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

#main{

	margin: 0;

	width: 100%;

	box-sizing: border-box;

	overflow: hidden;

}

.pankuz{

	display: none;

}





	/* メインスライダー

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

	section.mainslider{

		background: #fff;

	}

	.mainslider .slideOuter{

		padding: 22px 0 60px;

		position: relative;

	}

	.mainslider .slideOuter ul.productSlider{

		margin: 0;

		min-height: 320px;

		justify-content: center;

		display: flex !important;

		visibility: hidden;

	}

	.mainslider .slideOuter ul.productSlider li{

		margin: 0 10px;

		width: calc(100vw - (18px * 2));

		aspect-ratio: 1 / 1 !important;

	}

	.mainslider .slideOuter ul.productSlider li a{

		transition: 0.2s;

	}

	.mainslider .slideOuter ul.productSlider li a:active{

		opacity: 0.8;

		transition: 0.2s;

	}

	.mainslider .slideOuter ul.productSlider li img{

		width: 100%;

		height: auto;

		border-radius: 3%;

	}



	/*スライダー内リンク個別調整用*/

	.mainslider .slideOuter ul.productSlider li.hasLink{

		position: relative;

	}

	.mainslider .slideOuter ul.productSlider li.hasLink a.entryLink{

		margin: auto;

		padding: 2vw 8vw;

		color: #fff;

		font-size: 3vw;

		text-align: center;

		text-decoration: none;

		width: 74vw;

		display: block;

		background: #008000;

		border-radius: 100px;

		box-sizing: border-box;

		position: absolute;

		bottom: 5.5vw;

		left: 0;

		right: 0;

	}

	.mainslider .slideOuter ul.productSlider li.hasLink a.entryLink:after{

		content: "";

		margin: auto;

		width: 0.5em;

		height: 0.5em;

		display: block;

		border: 2px solid #fff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 4vw;

		top: 0;

		bottom: 0;

	}

	.mainslider .slideOuter ul.productSlider li.hasLink a.entryLink:active{

		opacity: 0.8;

	}

	.mainslider .slideOuter ul.productSlider li.kizunaCore a.entryLink{

		background: #008000;

	}

	.mainslider .slideOuter ul.productSlider li.superCocktail a.entryLink{

		background: #ff0000;

	}



	/*コントローラー*/

	ul.productSlider + .btns{

		margin: auto;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 20px;

		position: absolute;

		left: 0;

		right: 0;

		bottom: 20px;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots{

		position: unset;

		display: flex;

		justify-content: center;

		gap: 12px;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li{

		margin: 0;

		width: fit-content !important;

		height: fit-content !important;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li > button{

		padding: 0;

		width: 8px;

		height: 8px;

		display: block;

		background: var(--bg-color02);

		border-radius: 100%;

		border: none;

		cursor: pointer;

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li.slick-active > button{

		background: var(--sub-color02);

	}

	ul.productSlider + .btns .pagenation ul.slick-dots > li > button:before{

		display: none;

	}



	/*スライダー操作系*/

	ul.productSlider + .btns .slickCcontrols{

		display: flex;

		align-items: center;

		gap: 16px;

	}

	ul.productSlider + .btns .slickCcontrols > button{

		width: 22px;

		height: 22px;

		display: block;

		border-radius: 100%;

		border: none;

		background: var(--bg-color02);

		cursor: pointer;

		position: relative;

		transition: 0.2s;

	}

	ul.productSlider + .btns .slickCcontrols > button:hover{

		background: #d0d9f1;

		transition: 0.2s;

	}



	ul.productSlider + .btns .slickCcontrols > button.prev:before,

	ul.productSlider + .btns .slickCcontrols > button.next:before{

		content: "";

		margin: auto;

		width: 9px;

		height: 8px;

		display: block;

		background: var(--main-color);

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

	ul.productSlider + .btns .slickCcontrols > button.prev:before{

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

	}

	ul.productSlider + .btns .slickCcontrols > button.next:before{

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

	}



	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_pause,

	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_play{

		margin: auto;

		width: 10px;

		height: 10px;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_pause svg,

	ul.productSlider + .btns .slickCcontrols > button.pausePlay .icon_play svg{

		width: 100%;

		height: 100%;

		object-fit: contain;

	}



	ul.productSlider + .btns .slickCcontrols > button.pausePlay.play .icon_pause,

	ul.productSlider + .btns .slickCcontrols > button.pausePlay.pause .icon_play{

		display: none;

	}





	/* お問い合わせセクション

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

	section.entry_box{

		padding: 5% 4%;

		background: var(--sub-color02);

		width: 100%;

		box-sizing: border-box;

	}

	section.entry_box > .inner{

		margin: 0 auto;

		width: fit-content;

	}

	section.entry_box > .inner > p{

		margin-bottom: 14px;

		color: #fff;

		font-size: 14px;

		line-height: 1.3;

		text-align: center;

	}

	section.entry_box > .inner > a.btn{

		margin: 0 auto;

		padding: 12px 24px;

		color: var(--sub-color02);

		font-size: 16px;

		font-weight: 600;

		text-decoration: none;

		background: #fff;

		border-radius: 5px;

		display: block;

		width: fit-content;

		position: relative;

		transition: 0.2s;

	}

	section.entry_box > .inner > a.btn:active{

		opacity: 0.8;

		transition: 0.2s;

	}

	section.entry_box > .inner > a.btn.entry{

		padding-right: 52px;

	}

	section.entry_box > .inner > a.btn.entry:before{

		content: url(/system/common2/images/top/icon_application.svg);

		margin: auto;

		width: 22px;

		height: 22px;

		object-fit: contain;

		position: absolute;

		top: 0;

		bottom: 0;

		right: 12px;

	}



	/* 製品・ソリューション

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

	.productsSolution{

		margin: 0 auto;

		padding: 50px 0 20px;

		width: 100%;

		box-sizing: border-box;

	}

	.productsSolution > .btnBoxCommon{

		border-top: 1px solid #d5dcf1;

	}



	/*タブ切り替え*/

	.productsSolution .tabs{

		margin-bottom: 20px;

		padding: 0 18px;

		border-bottom: 8px solid var(--sub-color02);

		box-sizing: border-box;

		display: flex;

		justify-content: center;

		gap: 6px;

	}

	.productsSolution .tabs > a{

		padding: 8px 8px;

		color: var(--main-color);

		font-size: 14px;

		line-height: 1.2;

		text-align: center;

		text-decoration: none;

		background: #fff;

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

		display: flex;

		flex-direction: column;

		align-items: center;

		justify-content: center;

		border: 1px solid #cfd5e4;

		border-width: 1px 1px 0 1px ;

		border-radius: 6px 6px 0 0;

		box-sizing: border-box;

		position: relative;

		transition: 0.2s;

	}

	.productsSolution .tabs > a > span{

		font-weight: 600;

	}

	.productsSolution .tabs > a[id^="sea_"]{

		padding: 8px 8px 8px 28px;

	}

	.productsSolution .tabs > a[id^="sea_"] > svg{

		margin: auto;

		width: 16px;

		height: 16px;

		object-fit: contain;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 8px;

		fill: var(--sub-color02);

		transition: 0.2s;

	}



	.productsSolution .tabs > a.active,

	.productsSolution .tabs > a:active{

		color: #fff;

		background: var(--sub-color02);

		border-color: var(--sub-color02);

		transition: 0.2s;

	}

	.productsSolution .tabs > a.active > svg,

	.productsSolution .tabs > a:active > svg{

		fill: #fff;

		transition: 0.2s;

	}



	.productsSolution .tabBox > div{

		margin-bottom: 40px;

		display: none;

		opacity: 0;

		visibility: hidden;

		transform: translateY(20px);

	}

	.productsSolution .tabBox > div.active{

		display: block;

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		transition: 0.5s;

	}





	/*主な製品・シリーズ*/

	.productsSolution ul.prod_lineup{

		margin: 0 18px;

		padding: 65px 0 0;

		display: flex;

		flex-direction: column;

		gap: 80px 24px;

	}

	.productsSolution ul.prod_lineup li{

		padding: 70px 18px 20px;

		background: var(--bg-color03);

		width: 100%;

		display: flex;

		flex-direction: column;

		box-sizing: border-box;

	}



	.productsSolution ul.prod_lineup li > a{

		margin: -115px 24px 0;

		display: block;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > a:hover{

		opacity: 0.7;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li .logo{

		padding: 0 16px;

		width: 100%;

		height: 90px;

		background: #fff;

		display: flex;

		align-items: center;

		justify-content: center;

		box-sizing: border-box;

		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);

	}

	.productsSolution ul.prod_lineup li .logo img{

		width: auto;

		max-width: 100%;

		height: auto;

		max-height: 100%;

		object-fit: contain;

	}



	.productsSolution ul.prod_lineup li dl dt{

		margin: 22px auto 0;

		color: var(--main-color);

		font-size: 18px;

		font-weight: 600;

		width: fit-content;

	}

	.productsSolution ul.prod_lineup li dl dd{

		margin: 10px 0 0;

		font-size: 16px;

	}



	.productsSolution ul.prod_lineup li > .btns{

		margin-top: auto;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail{

		margin-top: 24px;

		padding: 6px 10px;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		text-decoration: none;

		width: 100%;

		background: #fff;

		display: flex;

		justify-content: center;

		border: 1px solid var(--light-purple);

		border-radius: 2px;

		box-sizing: border-box;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail:hover{

		background: #d5e0f7;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail > span{

		padding: 0 18px;

		position: relative;

	}

	.productsSolution ul.prod_lineup li > .btns a.detail > span:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

		border: 1px solid var(--light-purple);

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 2px;

		top: 0;

		bottom: 0;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex{

		margin-top: 14px;

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a{

		padding: 5px 24px;

		color: #fff;

		font-size: 13px;

		text-decoration: none;

		display: flex;

		align-items: center;

		justify-content: center;

		background: var(--sub-color02);

		border-radius: 6px;

		flex: 1;

		position: relative;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a:hover{

		background: #436be3;

		transition: 0.2s;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a:after{

		content: "";

		margin: auto;

		width: 12px;

		height: 12px;

		background-size: contain;

		background-position: center center;

		background-repeat: no-repeat;

		position: absolute;

		right: 10px;

		top: 0;

		bottom: 0;

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a.dl:after{

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

	}

	.productsSolution ul.prod_lineup li > .btns > .flex > a.contact:after{

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

	}





	/*カテゴリから探す*/

	.productsSolution .tabBox .searchCategory .catNameTab{

		padding: 0 18px 24px;

		display: flex;

		flex-wrap: wrap;

		gap: 24px 6px;

	}

	.productsSolution .tabBox .searchCategory .catNameTab a{

		color: #2e3036;

		padding: 8px 4px;

		font-size: 15px;

		text-align: center;

		line-height: 1.3;

		text-decoration: none;

		background: #fff;

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

		display: flex;

		align-items: center;

		justify-content: center;

		border: 1px solid #abb9e3;

		box-sizing: border-box;

		border-radius: 6px;

		position: relative;

		transition: 0.2s;

	}

	.productsSolution .tabBox .searchCategory .catNameTab a:hover{

		background: #eff3ff;

		transition: 0.2s;

	}

	.productsSolution .tabBox .searchCategory .catNameTab a.active{

		color: #fff;

		font-weight: 600;

		background: var(--main-color);

		border-color: var(--main-color);

	}

	.productsSolution .tabBox .searchCategory .catNameTab a.active:after{

		content: "";

		margin: auto;

		width: 40px;

		height: 12px;

		display: block;

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

		background: var(--main-color);

		position: absolute;

		top: 100%;

		left: 0;

		right: 0;

	}



	.searchCategory .categoryBox > div{

		display: none;

		opacity: 0;

		visibility: hidden;

		transform: translateY(20px);

	}

	.searchCategory .categoryBox > div.active{

		display: block;

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		transition: 0.5s;

	}



	.searchCategory .fieldTab{

		margin-bottom: 24px;

		padding: 15px 18px;

		background: #eaedf8;

		display: flex;

		align-items: center;

		flex-wrap: wrap;

		gap: 8px 8px;

	}

	.searchCategory .fieldTab a{

		color: #2e3036;

		font-size: 14px;

		line-height: 1.2;

		text-decoration: none;

		padding: 8px 20px 8px 8px;

		background: #fff;

		border-radius: 8px;

		position: relative;

	}

	.searchCategory .fieldTab a.active{

		font-weight: 600;

		color: #fff;

		background: var(--main-color);

	}

	.searchCategory .fieldTab a:after{

		content: "";

		margin: auto;

		width: 6px;

		height: 6px;

		display: block;

		border: 1px solid #bfcaea;

		border-width: 0 1px 1px 0;

		transform: rotate(45deg);

		position: absolute;

		top: -6px;

		bottom: 0;

		right: 6px;

	}

	.searchCategory .fieldTab a.active:after{

		border-color: #fff;

	}



	.searchCategory .fieldBox{

		display: none;

		opacity: 0;

		visibility: hidden;

		transform: translateY(20px);

	}

	.searchCategory .fieldBox.active{

		display: block;

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		transition: 0.5s;

	}

	.searchCategory .fieldBox > div:nth-child(n+2){

		margin-top: 40px;

	}

	.searchCategory .fieldBox > div{

		padding: 0 18px;

		width: 100%;

		display: none;

		box-sizing: border-box;

	}

	.searchCategory .fieldBox > div.disp{

		display: block;

	}

	/*製品ラインナップ*/

	.searchCategory .fieldBox .lineup{

		display: flex;

		flex-direction: column;

		gap: 18px;

	}

	.searchCategory .fieldBox .lineup a{

		text-decoration: none;

		width: 100%;

		transition: 0.2s;

	}

	.searchCategory .fieldBox .lineup a:active{

		opacity: 0.7;

		transition: 0.2s;

	}



	.searchCategory .fieldBox .lineup a dl{

		display: flex;

		flex-direction: column;

		border: 3px solid var(--bg-color03);

		background: var(--bg-color03);

		box-sizing: border-box;

		width: 100%;

		height: 100%;

	}

	.searchCategory .fieldBox .lineup a dl dt{

		padding: 18px 18px;

		background: #fff;

		display: flex;

		flex-direction: column;

		position: relative;

	}

	.searchCategory .fieldBox .lineup a dl dt:after{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		display: block;

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

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 14px;

	}

	.searchCategory .fieldBox .lineup a dl dt span,

	.searchCategory .fieldBox .lineup a dl dt p{

		color: var(--sub-color02);

		font-weight: 600;

		line-height: 1.2;

		display: inline-block;

	}

	.searchCategory .fieldBox .lineup a dl dt span{

		margin-bottom: 6px;

		font-size: 16px;

	}

	.searchCategory .fieldBox .lineup a dl dt p{

		font-size: 18px;

	}



	.searchCategory .fieldBox .lineup a dl dd{

		padding: 20px 18px;

		color: #000;

		font-size: 16px;

		flex: 1;

	}





	/*業種から探す*/

	.searchIndustry ul.industry_list{

		margin-top: 10px;

		padding: 0 18px;

		width: 100%;

		box-sizing: border-box;

		display: flex;

		flex-direction: column;

		gap: 18px;

	}

	.searchIndustry ul.industry_list > a{

		text-decoration: none;

		width: 100%;

		border: 4px solid #e7eaf1;

		background: #fff;

		box-sizing: border-box;

		display: flex;

		align-items: stretch;

		transition: 0.2s;

	}

	.searchIndustry ul.industry_list > a:hover{

		background: #dbe4ff;

		opacity: 0.8;

		transition: 0.2s;

	}

	.searchIndustry ul.industry_list > a > div{

		width: 50%;

	}

	.searchIndustry ul.industry_list > a .photo{

		aspect-ratio: 2 / 1;

	}

	.searchIndustry ul.industry_list > a .photo > img{

		width: 100%;

		height: 100%;

		object-fit: cover;

		overflow: hidden;

	}

	.searchIndustry ul.industry_list > a .name{

		padding: 20px 40px 20px 20px;

		box-sizing: border-box;

		display: flex;

		align-items: center;

		justify-content: center;

		position: relative;

	}

	.searchIndustry ul.industry_list > a .name:after{

		content: "";

		margin: auto;

		width: 13px;

		height: 13px;

		display: block;

		border: 2px solid var(--light-purple);

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 20px;

		top: 0;

		bottom: 0;

	}

	.searchIndustry ul.industry_list > a .name p{

		color: var(--main-color);

		font-size: 20px;

		font-weight: 600;

		line-height: 1.2;

		text-align: center;

	}

	.searchIndustry ul.industry_list > a .name p.small{

		font-size: 16px;

	}





	/* 導入事例

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

	section.caseStudy{

		padding: 50px 0 20px;

		background: var(--bg-color03);

	}



	ul.caseList{

		padding: 0 18px;

		width: 100%;

		box-sizing: border-box;

		display: flex;

		flex-direction: column;

		gap: 20px;

	}

	ul.caseList > a{

		background: #fff;

		text-decoration: none;

		width: 100%;

		box-sizing: border-box;

		transition: 0.2s;

	}

	ul.caseList > a:visited{

		color: #000099;

	}

	ul.caseList > a:active{

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

	}

	ul.caseList > a:hover{

		text-decoration: none;

		background: #d5dcf1;

		opacity: 1;

		transition: 0.2s;

	}



	ul.caseList > a > .visual{

		transition: 0.2s;

	}

	ul.caseList > a:active  > .visual{

		background: #000;

		transition: 0.2s;

	}

	ul.caseList > a > .visual img{

		width: 100%;

		aspect-ratio: 7 / 5;

		object-fit: cover;

		transition: 0.2s;

	}

	ul.caseList > a:active > .visual img{

		opacity: 0.7;

		transition: 0.2s;

	}



	ul.caseList > a > dl{

		padding: 20px;

	}

	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-color03);

		border-radius: 5px;

		display: inline-block;

	}



	ul.caseList > a > .detail{

		margin: auto 20px 20px;

	}

	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 #abb9e3;

		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.seminarEvent{

		margin: 0 auto;

		padding: 50px 6px 20px;

		width: 100%;

		max-width: 1288px;

		box-sizing: border-box;

	}

	/*セミナースライダー*/

	.seminarSlider {

		padding: 0 10px;

		position: relative;

		visibility: hidden;

	}

	.seminarSlider li {

		margin: 0 12px !important;

	}

	#main .seminarSlider a {

		color: #000;

		display: flex;

		flex-direction: column;

		background-color: #F2F2F8;

		text-decoration: none;

		transition: 0.2s;

	}

	#main .seminarSlider a:active {

		text-decoration: none;

		background: #d6dcf2;

		opacity: 1;

		transition: 0.2s;

	}

	#main .seminarSlider a .img{

		transition: 0.2s;

	}

	#main .seminarSlider a:hover .img{

		background: #000;

		transition: 0.2s;

	}

	#main .seminarSlider a .img img{

		transition: 0.2s;

	}

	#main .seminarSlider a:hover .img img{

		opacity: 0.7;

		transition: 0.2s;

	}

	.seminarSlider a .txt {

		padding: 20px 20px;

		display: flex;

		flex-direction: column;

		flex: 1;

	}

	.seminarSlider a .txt dl {

		box-sizing: border-box;

		font-size: 16px;

		line-height: 1.3;

		flex: 1;

	}

	.seminarSlider a .txt dl dt {

		margin: 0 0 10px;

		font-weight: 600;

	}

	.seminarSlider a .location {

		font-size: 14px;

		margin: 16px 0 0 0;

		padding-left: 22px;

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

		background-size: 12px auto;

	}

	.seminarSlider a span.arrow {

		margin-top: 30px;

		padding: 10px;

		color: var(--sub-color02);

		font-size: 14px;

		font-weight: 600;

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		background: #fff;

		border: 1px solid #abb9e3;

		box-sizing: border-box;

	}

	.seminarSlider a span.arrow span{

		display: flex;

		align-items: center;

		gap: 10px;

	}

	.seminarSlider a span.arrow span:after{

		content: "";

		width: 12px;

		height: 12px;

		background-color: var(--sub-color02);

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

	}

	.seminarSlider .slick-arrow {

		z-index: 1;

	}

	.seminarSlider .slick-prev,

	.seminarSlider .slick-next {

		margin: auto;

		padding: 0;

		background-color: #FFF;

		width: 40px;

		height: 40px;

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

		border: none;

		cursor: pointer;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	.seminarSlider .slick-prev.slick-disabled,

	.seminarSlider .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.seminarSlider .slick-prev {

		left: 0px;

	}

	.seminarSlider .slick-next {

		right: 0px;

	}

	.seminarSlider .slick-prev::before,

	.seminarSlider .slick-next::before {

		content: "";

		margin: auto;

		width: 16px;

		height: 16px;

		border-top: solid 2px;

		border-right: solid 2px;

		border-color: var(--sub-color02);

		display: block;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

	}

	.seminarSlider .slick-prev::before {

		transform: rotate(-135deg);

		left: 12px;

	}

	.seminarSlider .slick-next::before {

		right: 12px;

	}

	.seminarSlider .slick-list {

		overflow: unset;

	}

	.seminarSlider .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.useful{

		padding: 50px 0 20px;

		background: var(--bg-color03);

	}

	/*お役立ち資料スライダー*/

	.usefulSlider {

		margin: 0 6px;

		padding: 0 10px;

		position: relative;

		visibility: hidden;

	}

	.usefulSlider li {

		margin: 0 12px !important;

	}

	#main .usefulSlider a {

		color: #000;

		display: flex;

		flex-direction: column;

		background-color: #fff;

		text-decoration: none;

		transition: 0.2s;

	}

	#main .usefulSlider a:active {

		text-decoration: none;

		background: #d6dcf2;

		opacity: 1;

		transition: 0.2s;

	}

	#main .usefulSlider a .img{

		transition: 0.2s;

	}

	#main .usefulSlider a:active .img{

		background: #000;

		transition: 0.2s;

	}

	#main .usefulSlider a .img img{

		transition: 0.2s;

	}

	#main .usefulSlider a:active .img img{

		opacity: 0.7;

		transition: 0.2s;

	}

	.usefulSlider a .txt {

		padding: 20px 18px;

		display: flex;

		flex-direction: column;

		flex: 1;

	}

	.usefulSlider a .txt dl {

		box-sizing: border-box;

		font-size: 16px;

		line-height: 1.3;

		flex: 1;

	}

	.usefulSlider a .txt dl dt {

		color: var(--main-color);

		margin: 0 0 10px;

		font-weight: 600;

	}

	.usefulSlider a .txt span.dl{

		margin-top: 26px;

		color: #fff;

		font-size: 14px;

		padding: 5px 26px;

		border-radius: 6px;

		background: var(--sub-color02);

		display: flex;

		align-items: center;

		justify-content: center;

		position: relative;

	}

	.usefulSlider a .txt span.dl:after{

		content: "";

		margin: auto;

		width: 12px;

		height: 12px;

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

		background-size: contain;

		background-position: center center;

		background-repeat: no-repeat;

		position: absolute;

		right: 10px;

		top: 0;

		bottom: 0;

	}



	.usefulSlider .slick-arrow {

		z-index: 1;

	}

	.usefulSlider .slick-prev,

	.usefulSlider .slick-next {

		margin: auto;

		padding: 0;

		background-color: #FFF;

		width: 40px;

		height: 40px;

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

		border: none;

		cursor: pointer;

		position: absolute;

		top: 0;

		bottom: 0;

	}

	.usefulSlider .slick-prev.slick-disabled,

	.usefulSlider .slick-next.slick-disabled {

		opacity: 0.4;

		cursor: auto;

	}

	.usefulSlider .slick-prev {

		left: 0px;

	}

	.usefulSlider .slick-next {

		right: 0px;

	}

	.usefulSlider .slick-prev::before,

	.usefulSlider .slick-next::before {

		content: "";

		margin: auto;

		width: 16px;

		height: 16px;

		border-top: solid 2px;

		border-right: solid 2px;

		border-color: var(--sub-color02);

		display: block;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

	}

	.usefulSlider .slick-prev::before {

		transform: rotate(-135deg);

		left: 12px;

	}

	.usefulSlider .slick-next::before {

		right: 12px;

	}

	.usefulSlider .slick-list {

		overflow: unset;

	}

	.usefulSlider .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.topics{

		margin: 0 auto;

		padding:50px 0 20px;

		width: 100%;

		max-width: 1320px;

		box-sizing: border-box;

	}



	ul.topicList{

		padding: 0 18px;

		width: 100%;

		box-sizing: border-box;

		display: flex;

		flex-direction: column;

		gap: 30px;

	}

	ul.topicList > a{

		text-decoration: none;

		background: var(--bg-color03);

		width: 100%;

		box-sizing: border-box;

		display: flex;

		align-items: stretch;

		transition: 0.2s;

	}

	ul.topicList > a:active{

		text-decoration: none;

		background: #d6dcf2;

		opacity: 1;

		transition: 0.2s;

	}

	ul.topicList > a .img{

		width: 50%;

		display: flex;

		position: relative;

		transition: 0.2s;

	}

	ul.topicList > a:hover .img{

		background: #000;

		transition: 0.2s;

	}

	ul.topicList > a .img img{

		transition: 0.2s;

	}

	ul.topicList > a:hover .img img{

		opacity: 0.7;

		transition: 0.2s;

	}

	ul.topicList > a .img > span{

		padding: 6px 8px;

		color: #fff;

		font-size: 11px;

		font-weight: 600;

		line-height: 1;

		white-space: nowrap;

		position: absolute;

		bottom: calc(100% - 12px);

		left: -6px;

		z-index: 1;

	}

	/*タグ配色*/

	ul.topicList > a .img > span.tagLightGreen{

		background: #8bc85c;

	}

	ul.topicList > a .img > span.tagGreen{

		background: #00a391;

	}

	ul.topicList > a .img > span.tagOrange{

		background: #ff943d;

	}

	ul.topicList > a .img > span.tagBlue{

		background: #0067ab;

	}



	ul.topicList > a .img > img{

		margin: auto;

		width: 100%;

		aspect-ratio: 3 / 2;

		object-fit: cover;

	}



	ul.topicList > a .txt{

		padding: 12px 12px;

		color: #000;

		line-height: 1.3;

		flex: 1;

	}

	ul.topicList > a .txt dl dt{

		margin-bottom: 4px;

		font-size: 11px;

		font-weight: 600;

	}

	ul.topicList > a .txt dl dd{

		font-size: 13px;

	}





	/* バナー表示エリア

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

	section.bannerArea{

		padding: 30px 18px;

		background: var(--bg-color03);

	}

	section.bannerArea .inner ul.bannerList{

		display: flex;

		flex-direction: column;

		gap: 20px;

	}

	section.bannerArea .inner ul.bannerList a{

		width: 100%;

	}

	section.bannerArea .inner ul.bannerList a img{

		width: 100%;

		height: auto;

	}





	/* 関連コンテンツ

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

	section.information{

		margin: 0 auto;

		padding: 50px 18px 50px;

	}



	ul.categoryList{

		margin: 0 auto;

		display: flex;

		flex-wrap: wrap;

		gap: 12px;

	}

	ul.categoryList li{

		width: 100%;

	}

	ul.categoryList li a{

		padding: 10px 26px 10px 10px;

		color: var(--sub-color02);

		font-size: 16px;

		font-weight: 600;

		line-height: 1.3;

		text-decoration: none;

		background: #fff;

		border: 3px solid #eaedf8;

		width: 100%;

		height: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		box-sizing: border-box;

		position: relative;

		transition: 0.2s;

	}

	ul.categoryList li a:after{

		content: "";

		margin: auto;

		width: 8px;

		height: 8px;

		display: block;

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

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 12px;

	}

	ul.categoryList li a.outerLink:after{

		content: "";

		width: 14px;

		height: 14px;

		display: block;

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

		background-size: contain;

		background-position: center center;

		border: unset;

		transform: unset;

		position: absolute;

		top: 0;

		bottom: 0;

		right: 12px;

	}

	ul.categoryList li a:active{

		background: var(--bg-color03);

		transition: 0.2s;

	}



}