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

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

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

#mainContents .p10 > img { width: 10% !important; }

#mainContents .p20 > img { width: 20% !important; }

#mainContents .p30 > img { width: 30% !important; }

#mainContents .p40 > img { width: 40% !important; }

#mainContents .p50 > img { width: 50% !important; }

#mainContents .p60 > img { width: 60% !important; }

#mainContents .p70 > img { width: 70% !important; }

#mainContents .p80 > img { width: 80% !important; }

#mainContents .p90 > img { width: 90% !important; }

#mainContents .p100 > img { width: 100% !important; }



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

/* PC */

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

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

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



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

	/*	化学品業向けソリューション */

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

	/* 共通 */

	

	.normalButton{

		padding: 12px 46px 10px;

		color: #fff;

		font-size: 17px;

		font-weight: 600;

		display: inline-flex;

		align-items: center;

		justify-content: center;

		background: #cd4b95;

		border-radius: 100px;

		box-sizing: border-box;

		position: relative;

	}

	.normalButton:has(span){

		line-height: 1.2;

		display: flex;

		align-items: flex-start;

		flex-direction: column;

		gap: 2px;

	}

	.normalButton span{

		font-size: 14px;

	}

	.normalButton:hover{

		text-decoration: none;

		opacity: 0.8;

	}

	.normalButton:after{

		content: "";

		margin: auto;

		position: absolute;

		width: 10px;

		height: 10px;

		display: block;

		border: 2px solid #fff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		top: 0;

		bottom: 0;

		right: 25px;

	}



	.chemicalTop h2{

		margin-bottom: 86px;

		letter-spacing: 0.05em;

		display: flex;

		flex-direction: column;

		align-items: center;

		position: relative;

	}

	.chemicalTop h2:after{

		content: "";

		margin: auto;

		min-width: 220px;

		height: 2px;

		display: block;

		background: #6561ab;

		position: absolute;

		bottom: -22px;

	}

	.chemicalTop h2 > span{

		margin-bottom: 6px;

		color: #cd4b95;

		font-size: 22px;

		font-weight: 400;

		line-height: 1.2;

		letter-spacing: 0;

	}

	.chemicalTop h2 > p{

		font-size: 22px;

		font-weight: 800;

	}

	/*装飾無し*/

	.chemicalTop h2.no_deco{

		margin-bottom: 30px;

		font-size: 24px;

	}

	.chemicalTop h2.no_deco:after{

		display: none;

	}

	/*紫バージョン*/

	.chemicalTop h2.purple{

		color: #6561ab;

		font-size: 28px;

	}

	.chemicalTop h2.purple:after{

		width: 60px;

		min-width: 60px;

	}



	/* メインビジュアル */

	.chemicalTop .mainVisual{

		width: 100%;

		aspect-ratio: 20 / 11;

		max-height: 550px;

		background-color: #fff;

		background-image: url(/system/cocktail/common/images/chemical/bg_visual_right.png), url(/system/cocktail/common/images/chemical/bg_visual_left6.png);

		background-repeat: no-repeat, no-repeat;

		background-position: right center, left center;

		background-size: auto 100%, auto 100%;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	.chemicalTop .mainVisual .inner{

		margin: 0 auto;

		padding: 20px;

		max-width: 700px;

	}



	.chemicalTop .mainVisual .title p.sub{

		font-size: 16px;

		display: flex;

		align-items: center;

		flex-wrap: wrap;

		gap: 6px;

	}

	.chemicalTop .mainVisual .title p.sub > span{

		padding: 8px 6px 6px;

		color: #fff;

		line-height: 1;

		background: #6561ab;

	}

	.chemicalTop .mainVisual .title p.main{

		margin-top: 6px;

		font-size: 48px;

		font-weight: 600;

	}



	.chemicalTop .mainVisual h1.text{

		margin-top: 20px;

		font-size: 18px;

		font-weight: 400;

	}



	.chemicalTop .mainVisual .btnBox{

		margin-top: 40px;

		display: flex;

		justify-content: space-between;

		flex-wrap: wrap;

		gap: 22px;

		max-width: 664px;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton{

		min-width: 300px;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton.guide{

		padding-left: 112px;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton.guide:before{

		content: "";

		margin: auto;

		width: 94px;

		height: 76px;

		background-image: url(/system/cocktail/common/images/chemical/chemical_solution_guide.png);

		background-repeat: no-repeat;

		background-size: contain;

		position: absolute;

		top: -16px;

		bottom: 0px;

		left: 14px;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton.customer{

		width: 100%;

		box-sizing: border-box;

	}



	.chemicalTop .mainVisual .textLink{

		margin: 18px 40px 0;

		display: flex;

	}

	.chemicalTop .mainVisual .textLink > a{

		padding: 0 16px;

		color: #0066ff;

		font-weight: 600;

		position: relative;

	}

	.chemicalTop .mainVisual .textLink > a:after{

		content: "";

		margin: auto;

		width: 7px;

		height: 7px;

		display: block;

		border: 1px solid #0066ff;

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: -2px;

		bottom: 0;

		right: 2px;

	}





	/* ページ内リンク */

	.innerLink{

		padding: 50px 40px;

	}

	.innerLink ul{

		margin: 0 auto;

		display: flex;

		flex-wrap: wrap;

		align-items: center;

		width: fit-content;

		flex-wrap: wrap;

		gap: 10px;

	}

	.innerLink ul li a{

		padding: 6px 24px;

		font-size: 16px;

		font-weight: 600;

		line-height: 1;

		position: relative;

	}

	.innerLink ul li a:after{

		content: "";

		margin: auto;

		position: absolute;

		width: 6px;

		height: 6px;

		display: block;

		border: 2px solid #6561ab;

		border-width: 0 2px 2px 0;

		transform: rotate(45deg);

		top: -4px;

		bottom: 0;

		right: 2px;

	}

	.innerLink ul li a:hover{

		color: #6561ab;

		text-decoration: none;

	}





	/* 特徴 */

	.feature{

		margin: 0 auto;

		padding: 70px 40px 20px;

		width: 100%;

		max-width: 1280px;

		box-sizing: border-box;

	}

	.feature .textImageBox{

		margin: 0 auto;

		max-width: 1080px;

		display: flex;

		align-items: center;

		flex-direction: row-reverse;

		gap: 20px;

	}

	.feature .textImageBox .text{

		flex: 1;

	}

	.feature .textImageBox .text > p{

		line-height: 1.6em;

	}

	.feature .textImageBox .text dl{

		margin-top: 18px;

	}

	.feature .textImageBox .text dl dt{

		color: #6561ab;

		font-size: 20px;

		font-weight: 600;

	}

	.feature .textImageBox .text dl ul{

		margin-top: 28px;

	}

	.feature .textImageBox .text dl ul li{

		padding-left: 22px;

		position: relative;

	}

	.feature .textImageBox .text dl ul li:nth-child(n+2){

		margin-top: 12px;

	}

	.feature .textImageBox .text dl ul li:before{

		content: "";

		width: 10px;

		height: 10px;

		display: block;

		background: #6561ab;

		position: absolute;

		left: 0;

		top: calc(0.75em - 6px)

	}

	.feature .textImageBox .text dl ul li > span{

		font-weight: 600;

		text-decoration: underline; /* 下線 */

		text-decoration-thickness: 0.75em; /* 線の太さ */

		text-decoration-color: #f1ebb4; /* 線の色 */

		text-underline-offset: -0.36em; /* 線の位置。テキストに重なるようにやや上部にする */

		text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */

	}





	/*解決できる課題*/

	.assignment{

		margin: 0 auto;

		padding: 70px 40px 80px;

		width: 100%;

		max-width: 1280px;

		box-sizing: border-box;

	}

	.steps{

		padding-top: 60px;

		position: relative;

	}

	.steps:before{

		content: "";

		margin: auto;

		width: 100%;

		max-width: 1200px;

		height: 150px;

		background: #dad8f5;

		clip-path: polygon(

			0% 0%,

			calc(100% - 42px) 0%,

			100% 50%,

			calc(100% - 42px) 100%,

			0% 100%

		);

		position: absolute;

		top: 0;

		left: 0;

		right: 0;

	}

	.steps > ul{

		margin: 0 auto;

		max-width: 1115px;

		display: flex;

		flex-wrap: wrap;

		gap: 40px 25px;

	}

	.steps > ul dl{

		padding: 36px 14px 14px;

		background: #fff;

		border: 1px solid #c6c6c6;

		box-sizing: border-box;

		width: calc( (100% - 75px) / 4 );

		position: relative;

	}

	/*事例一覧の幅調整用*/

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

		.steps > ul dl{

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

		}

	}



	.steps > ul dl > dt.tag{

		padding: 10px 24px 10px 10px;

		color: #fff;

		font-size: 18px;

		font-weight: 600;

		line-height: 1.2;

		letter-spacing: 0.02em;

		background: #837fba;

		display: inline-block;

		width: fit-content;

		min-width: 152px;

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

		box-sizing: border-box;

		position: absolute;

		bottom: calc(100% - 22px);

		left: -6px;

	}

	.steps > ul dl > dt.tag.txtSmall{

		font-size: 16px;

	}

	.steps > ul dl > dd{

		margin-bottom: 20px;

	}

	.steps > ul dl > dd li{

		padding-left: 20px;

		line-height: 1.2;

		position: relative;

	}

	.steps > ul dl > dd li:nth-child(n+2){

		margin-top: 12px;

	}

	.steps > ul dl > dd li:before{

		content: "";

		width: 8px;

		height: 8px;

		display: block;

		background: #6561ab;

		border-radius: 100%;

		position: absolute;

		top: calc(0.6em - 5px);

		left: 3px;

	}





	/*資料ダウンロード 共通*/

	section.dlBox{

		margin: 0 auto;

		padding: 60px 40px;

		width: 100%;

		background-color: #f6f6f6;

		box-sizing: border-box;

		background-image: url(/system/cocktail/common/images/chemical/bg_dlbox.png);

		background-repeat: no-repeat;

		background-position: left center;

		background-size: auto 100%;

	}

	section.dlBox .btnBox{

		margin: 0 auto;

		max-width: 1200px;

		display: flex;

		align-items: center;

		justify-content: center;

		flex-wrap: wrap;

		gap: 60px 40px;

	}

	section.dlBox .btnBox a.normalButton{

		line-height: 1.2;

		min-height: 74px;

		min-width: 420px;

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

	}

	section.dlBox .btnBox a.normalButton:has(span){

		padding: 16px 46px 12px;

		flex-direction: column;

		align-items: flex-start;

	}

	section.dlBox .btnBox a.normalButton span{

		font-size: 14px;

	}

	section.dlBox .btnBox a.normalButton:has(span) > p{

		font-size: 20px;

	}



	section.dlBox .btnBox a.normalButton.solution,

	section.dlBox .btnBox a.normalButton.erp{

		padding-left: 160px;

	}

	section.dlBox .btnBox a.normalButton.solution:before{

		content: "";

		margin: auto;

		width: 131px;

		height: 106px;

		background-image: url(/system/cocktail/common/images/chemical/chemical_solution_guide.png);

		background-repeat: no-repeat;

		background-size: contain;

		position: absolute;

		top: -24px;

		bottom: 0px;

		left: 14px;

	}

	section.dlBox .btnBox a.normalButton.erp:before{

		content: "";

		margin: auto;

		width: 125px;

		height: 99px;

		background-image: url(/system/cocktail/common/images/food/foods_erp_jirei.png);

		background-repeat: no-repeat;

		background-size: contain;

		position: absolute;

		top: -24px;

		bottom: 0px;

		left: 14px;

	}

	section.dlBox .btnBox li:has(.btnVoice){

		position: relative;

	}

	section.dlBox .btnBox li span.btnVoice{

		margin: auto;

		font-size: 17px;

		font-weight: 600;

		width: fit-content;

		position: absolute;

		bottom: calc(100% + 8px);

		left: 0;

		right: 0;

	}

	section.dlBox .btnBox li span.btnVoice:before,

	section.dlBox .btnBox li span.btnVoice:after{

		content: "";

		width: 5px;

		height: 20px;

		display: block;

		background: #6561ab;

		clip-path: polygon(

			0% 0%, 100% 0, 50% 100%

		);

		position: absolute;

	}

	section.dlBox .btnBox li span.btnVoice:before{

		transform: rotate(-21deg);

		left: -12px;

		bottom: 2px;

	}

	section.dlBox .btnBox li span.btnVoice:after{

		transform: rotate(21deg);

		right: -12px;

		bottom: 2px;

	}





	/*導入事例*/

	.jirei{

		margin: 0 auto;

		padding: 60px 40px 60px;

		width: 100%;

		max-width: 1280px;

		box-sizing: border-box;

	}

	.jirei .listOuter{

		margin: 0 auto 80px;

		max-width: 1180px;

	}

	.jirei .listOuter .caseList{

		display: flex;

		flex-wrap: wrap;

		gap: 20px;

	}

	.jirei .listOuter .caseList > a{

		background: #f2f2f8;

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

		display: flex;

		flex-direction: column;

	}

	/*事例一覧の幅調整用*/

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

		.jirei .listOuter .caseList > a{

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

		}

	}

	.jirei .listOuter .caseList > a:hover{

		text-decoration: none;

		opacity: 0.8;

		background: #dbdbff;

	}



	.jirei .listOuter .caseList > a .visual{

		position: relative;

	}

	.jirei .listOuter .caseList > a .visual > img{

		width: 100%;

		aspect-ratio: 7 / 5;

		object-fit: cover;

	}

	.jirei .listOuter .caseList > a .visual > span{

		margin: auto;

		padding: 5px;

		color: #fff;

		font-size: 14px;

		font-weight: 600;

		line-height: 1;

		width: fit-content;

		min-width: 100px;

		display: inline-flex;

		align-items: center;

		justify-content: center;

		background: #cd4b95;

		position: absolute;

		left: 0;

		right: 0;

		bottom: calc( 0% - 10px);

	}



	.jirei .listOuter .caseList > a dl{

		padding: 30px 20px 14px;

		width: 100%;

		box-sizing: border-box;

	}

	.jirei .listOuter .caseList > a dl dt{

		font-size: 16px;

		font-weight: 600;

		text-align: center;

	}

	.jirei .listOuter .caseList > a dl dd{

		margin-top: 10px;

	}





	.jirei .listOuter .caseList > a .more{

		margin-top: auto;

		padding: 16px;

		border-top: 1px solid #e7e7f3;

		width: 100%;

		box-sizing: border-box;

	}

	.jirei .listOuter .caseList > a .more > p{

		margin: 0 auto;

		color: #676493;

		font-size: 12px;

		line-height: 1;

		width: fit-content;

		position: relative;

	}

	.jirei .listOuter .caseList > a .more > p:after{

		content: "";

		margin: auto;

		width: 6px;

		height: 6px;

		display: block;

		border: 1px solid #676493;

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: -12px;

	}



	.jirei .listOuter .catalog_dl{

		margin: 60px 0;

	}

	.jirei .listOuter .catalog_dl .btn_box{

		margin: 0 auto;

		width: fit-content;

	}

	.jirei .listOuter .catalog_dl a.btn_dl{

		margin: 0 auto;

		width: fit-content;

		display: block;

	}

	.jirei .listOuter .catalog_dl a.btn_dl:hover{

		opacity: 0.8;

	}

	.jirei .listOuter .catalog_dl a.more_text{

		margin: 20px auto 0;

		color: #0000ff;

		font-size: 15px;

		width: fit-content;

		display: block;

	}





	a.moreBtn{

		margin: 60px auto 0;

		color: #fff;

		padding: 18px 100px;

		font-size: 18px;

		font-weight: 600;

		text-align: center;

		line-height: 1.2;

		width: fit-content;

		display: flex;

		background: #6561ab;

		align-items: flex-start;

		justify-content: center;

		border-radius: 4px;

		box-sizing: border-box;

		position: relative;

	}

	a.moreBtn:after{

		content: "";

		margin: auto;

		width: 10px;

		height: 10px;

		border: 1px solid #fff;

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 80px;

	}

	a.moreBtn:hover{

		opacity: 0.8;

		text-decoration: none;

	}



	/*業種リスト*/

	.IndustryList{

		margin: 0 auto;

		max-width: 1180px;

	}

	.IndustryList dl dd{

		padding: 60px;

		background: url(/system/cocktail/common/images/chemical/bg_industry_list.png);

		border-radius: 8px;

		display: flex;

		justify-content: center;

		flex-wrap: wrap;

	}

	.IndustryList dl dd ul{

		padding: 22px 48px;

		border-left: 1px solid #9b98c9;

		display: flex;

		flex-direction: column;

		gap: 6px;

	}

	.IndustryList dl dd ul:first-child{

		border-left: none;

	}

	.IndustryList dl dd ul li{

		padding-left: 18px;

		position: relative;

	}

	.IndustryList dl dd ul li:before{

		content: "";

		width: 4px;

		height: 4px;

		display: block;

		background: #000;

		border-radius: 100%;

		position: absolute;

		left: 0;

		top: calc(0.75em - 2px);

	}





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

	.solution{

		padding-top: 80px;

	}

	.solution .intro{

		margin: 0 auto 50px;

		padding: 0 40px;

		max-width: 1280px;

		box-sizing: border-box;

	}

	.solution .intro > p{

		text-align: center;

	}



	/*製品マップ*/

	.solution .modalMap p.caution{

		margin: 0 auto 16px;

		padding: 0 40px;

		color: #6561ab;

		font-size: 14px;

		text-align: center;

		max-width: 1280px;

	}

	.solution .modalMap .mapOuter{

		background: linear-gradient( to bottom, #b1a7d1 0%, #cdc7e3 33%, #dad6eb 66%, #dedaed 100% );

		display: flex;

		width: 100%;

		height: 100%;

		align-items: center;

		justify-content: center;

		box-sizing: border-box;

	}

	.solution .modalMap .mapOuter .Box{

		margin: 0 auto;

		width: fit-content;

		position: relative;

	}

	.solution .modalMap .mapOuter .Box > img{

		user-select:none;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li{

		width: fit-content;

		position: absolute;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li:after{

		content: "";

		width: 8px;

		height: 14px;

		display: block;

		background: #6eb932;

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

		position: absolute;

		right: calc(100% - 8px);

		top: calc(100% - 3px);

		transform-origin: top center;

		transform: rotate(35deg);

		z-index: 0;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverse:after{

		right: unset;

		left: calc(100% - 8px);

		top: calc(100% - 3px);

		transform: rotate(-35deg);

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverseup:after{

		right: calc(100% - 8px);

		top: unset;

		bottom: calc(100% - 18px);

		transform: rotate(135deg);

	}



	.solution .modalMap .mapOuter .Box .namaList ul li a{

		padding: 5px 20px 5px 32px;

		color: #6eb932;

		font-size: 14px;

		font-weight: 600;

		line-height: 1.2;

		display: inline-flex;

		background: #fff;

		border: 3px solid #6eb932;

		border-radius: 6px;

		box-sizing: border-box;

		position: relative;

		z-index: 1;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li a:hover{

		text-decoration: none;

		cursor: pointer;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li a:before{

		content: "";

		margin: auto;

		width: 1.07em;

		aspect-ratio: 1 / 1;

		display: block;

		background: url(/system/cocktail/common/images/food/icon_zoom.png) no-repeat;

		background-size: contain;

		background-position: center center;

		position: absolute;

		left: 10px;

		top: 0;

		bottom: 0;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverse a{

		padding: 5px 32px 5px 20px;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverse a:before{

		left: unset;

		right: 10px;

	}



	/*ピン配色*/

	.solution .modalMap .mapOuter .Box .namaList ul.office li:after{ background: #ff2b0f }

	.solution .modalMap .mapOuter .Box .namaList ul.office li a{

		color: #ff2b0f;

		border-color: #ff2b0f;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.office li a:hover{ background: #ffe5e2; }



	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li:after{ background: #1656cf }

	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li a{

		color: #1656cf;

		border-color: #1656cf;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li a:hover{ background: #e7efff; }



	.solution .modalMap .mapOuter .Box .namaList ul.factory li:after{ background: #00682e }

	.solution .modalMap .mapOuter .Box .namaList ul.factory li a{

		color: #00682e;

		border-color: #00682e;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.factory li a:hover{ background: #dfffed; }



	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li:after{ background: #924100 }

	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li a{

		color: #924100;

		border-color: #924100;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li a:hover{ background: #ffebdb; }



	.solution .modalMap .mapOuter .Box .namaList ul.store li:after{ background: #f37800 }

	.solution .modalMap .mapOuter .Box .namaList ul.store li a{

		color: #f37800;

		border-color: #f37800;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.store li a:hover{ background: #ffefe0; }



	/*ピン配置*/

	.solution .modalMap .mapOuter .Box .namaList ul li.no_001{

		left: 36%;

		top: 5.5%

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_003{

		left: 21.8%;

		bottom: 48.6%

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_004{

		left: 40.4%;

		top: 13.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_005{

		left: 16%;

		top: 33.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_006{

		left: 41.4%;

		top: 24.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_007{

		left: 21.8%;

		top: 9.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_008{

		left: 25.0%;

		top: 24.6%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_009{

		right: 15.2%;

		top: 13.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_010{

		right: 14.8%;

		top: 4.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_011{

		left: 26.5%;

		bottom: 39.5%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_012{

		left: 24%;

		bottom: 32%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_016{

		left: 32%;

		bottom: 22%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_017{

		left: 48.4%;

		bottom: 15.0%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_018{

		left: 39.0%;

		bottom: 43.0%

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_020{

		right: 33.2%;

		top: 26.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_022{

		right: 17.2%;

		top: 26.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_023{

		right: 41.2%;

		top: 37.2%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_024{

		right: 28.6%;

		bottom: 25.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_025{

		right: 12.0%;

		bottom: 37.8%;

	}



	@keyframes waveMotion{

		0%, 100% {

			transform: translateY(0);

		}

		50% {

			transform: translateY(-6px);

		}

	}

	.solution .modalMap .mapOuter .Box .namaList ul.office li{

		animation: waveMotion 3s infinite ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.factory li{

		animation: waveMotion 3s infinite 0.3s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li{

		animation: waveMotion 3s infinite 0.6s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.store li{

		animation: waveMotion 3s infinite 0.9s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li{

		animation: waveMotion 3s infinite 1.2s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li:hover{

		animation-play-state: paused;

	}

	/*モーダルスタイル*/

	.solution .modalMap .modalOuter{

		padding: 40px 20px;

		width: 100%;

		height: 100%;

		background: rgba(51,51,51,30%);

		overflow: auto;

		transition: .3s;

		box-sizing: border-box;

		position: fixed;

		top: 0;

		left: 0;

		z-index: 10000;

		align-items: center;  

		justify-content: center;

		display: none;

	}

	.solution .modalMap .modalOuter .modal{

		padding: 26px;

		background: #f5f5f5;

		border-radius: 20px;

		box-shadow: 0px 8px 12px 0px rgb(50 50 50 / 50%);

		width: fit-content;

		min-width: 40%;

		max-width: calc(100% - 120px);

		position: relative;

		opacity: 0;

		transform: scale(0.8);

		transition: transform 0.3s ease, opacity 0.3s ease;

		display: none;

	}

	.solution .modalMap .modalOuter .modal.active{

		display: block;

	}

	.solution .modalMap .modalOuter .modal.disp{

		opacity: 1;

		transform: scale(1);

		transition: all 0.3s ease;

	}

	.solution .modalMap .modalOuter .modal .top{

		margin-bottom: 16px;

	}

	.solution .modalMap .modalOuter .modal .top .cat{

		padding: 7px 15px;

		color: #ff2b0f;

		font-size: 14px;

		font-weight: 600;

		line-height: 1;

		display: inline-block;

		background: #fff;

		border: 3px solid #ff2b0f;

		border-radius: 7px;

		box-sizing: border-box;

	}

	.solution .modalMap .modalOuter .modal .top .cat.office{

		color: #ff2b0f;

		border-color: #ff2b0f;

	}

	.solution .modalMap .modalOuter .modal .top .cat.neighborhood{

		color: #1656cf;

		border-color: #1656cf;

	}

	.solution .modalMap .modalOuter .modal .top .cat.factory{

		color: #00682e;

		border-color: #00682e;

	}

	.solution .modalMap .modalOuter .modal .top .cat.warehouse{

		color: #924100;

		border-color: #924100;

	}

	.solution .modalMap .modalOuter .modal .top .cat.store{

		color: #f37800;

		border-color: #f37800;

	}

	.solution .modalMap .modalOuter .modal .top .close{

		width: 36px;

		height: 36px;

		display: block;

		background: #fff;

		border: 1px solid #878787;

		border-radius: 100%;

		position: absolute;

		top: 14px;

		right: 14px;

	}

	.solution .modalMap .modalOuter .modal .top .close:before,

	.solution .modalMap .modalOuter .modal .top .close:after{

		content: "";

		margin: auto;

		width: 2px;

		height: 24px;

		display: block;

		background: #333333;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

	.solution .modalMap .modalOuter .modal .top .close:before{

		transform: rotate(-45deg);

	}

	.solution .modalMap .modalOuter .modal .top .close:after{

		transform: rotate(45deg);

	}



	.solution .modalMap .modalOuter .modal .top .close:hover{

		cursor: pointer;

		background: #dcdcdc;

	}



	.solution .modalMap .modalOuter .modal dl{

		padding-bottom: 30px;

	}

	.solution .modalMap .modalOuter .modal dl:nth-child(n+2){

		padding-top: 16px;

		border-top: 2px solid #e1e8de;

	}

	.solution .modalMap .modalOuter .modal dl dt{

		margin-bottom: 20px;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo{

		margin-bottom: 20px;

		padding: 14px;

		background: #fff;

		box-sizing: border-box;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	.solution .modalMap .modalOuter .modal dl dt div.logo>a {

		display: block;

		font-size: 20px;

		font-weight: 600;

	}

	.solution .modalMap .modalOuter .modal dl dt div.logo>a.innerLogo {

    width: 48%;

    margin: 0 4% 0 0;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo:hover,

	.solution .modalMap .modalOuter .modal dl dt .logo a:hover {

		text-decoration: none;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo > img{

		max-height: 100px;

		max-width: 90%;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo > p{

		font-size: 20px;

		font-weight: 600;

		line-height: 2.0;

	}

	.solution .modalMap .modalOuter .modal dl dt p.name{

		padding: 0 3px;

		font-size: 18px;

		font-weight: 600;

		box-sizing: border-box;

	}

	.solution .modalMap .modalOuter .modal dl dd > ul li{

		padding-left: 28px;

		position: relative;

	}

	.solution .modalMap .modalOuter .modal dl dd > ul li:nth-child(n+2){

		margin-top: 8px;

	}

	.solution .modalMap .modalOuter .modal dl dd > ul li:before{

		content: "";

		width: 8px;

		height: 8px;

		display: block;

		background: #6561ab;

		border-radius: 100%;

		position: absolute;

		left: 9px;

		top: calc(0.75em - 5px);

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox{

		margin-top: 24px;

		display: flex;

		align-items: center;

		flex-wrap: wrap;

		gap: 10px;

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox > a.btn{

		padding: 8px 24px;

		color: #fff;

		font-size: 14px;

		background: #6561ab;

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox > a.btn:hover{

		text-decoration: none;

		opacity: 0.8;

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox > a.detail{

		margin: 0 10px;

		color: #0000ff;

		font-size: 14px;

	}





	/*製品一覧*/

	.solution .lineup{

		margin: 70px auto 60px;

		padding: 0 40px;

		display: flex;

		flex-wrap: wrap;

		max-width: 1280px;

		gap: 20px;

	}

	.solution .lineup dl{

		padding: 10px;

		background: #f5f5f5;

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

		display: flex;

		flex-direction: column;

		gap: 6px;

		box-sizing: border-box;

	}

	.solution .lineup dl dt {

		text-align: center;

		min-height: 30px;

	}

	.solution .lineup dl dt span {

		margin: 2px auto 4px;

		padding: 0.24em 0.6em;

		font-size: 14px;

		font-weight: 600;

		color: #333;

		display: inline-block;

		width: fit-content;

		background: #fff;

		border: 2px solid #333;

		border-radius: 6px;

	}

	.solution .lineup dl dt.col3 {

     padding: 3px 0 0;

	}

	.solution .lineup dl dt.col3 span {

    font-size: 13px;

    margin: 0 2px;

    padding: 0.24em 0.3em;

	}

	.solution .lineup dl dt.col3 span:nth-child(2) {

    color: #00682e;

    border-color: #00682e;

	}

	.solution .lineup dl dt.col3 span:nth-child(3) {

    color: #924100;

    border-color: #924100;

	}

	.solution .lineup dl dt.col3 span {

    font-size: 13px;

    margin: 0 2px;

    padding: 0.24em 0.3em;

	}



	.solution .lineup dl dt.office span {

		color: #ff2b0f;

		border-color: #ff2b0f;

	}

	.solution .lineup dl dt.neighborhood span {

		color: #1656cf;

		border-color: #1656cf;

	}

	.solution .lineup dl dt.factory span {

		color: #00682e;

		border-color: #00682e;

	}

	.solution .lineup dl dt.warehouse span {

		color: #924100;

		border-color: #924100;

	}

		.solution .lineup dl dt.store span {

		color: #f37800;

		border-color: #f37800;

	}





	.solution .lineup dl dd .logo{

		width: 100%;

		aspect-ratio: 13 / 4;

		background: #fff;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	.solution .lineup dl dd .logo:hover {

		text-decoration: none;

	}

	.solution .lineup dl dd .logo > img{

		width: 90% !important;

	}

	.solution .lineup dl dd .logo > p{

		padding: 8px;

		font-size: 18px;

		font-weight: 600;

		line-height: 1.4;

		text-align: center;

	}

	.solution .lineup dl dd .logo > p.txtSmall{

		font-size: 16px;

	}

	.solution .lineup dl a.detail,

	.solution .lineup dl .dlContact a{

		color: #fff;

		font-size: 14px;

		line-height: 1.2;

		text-align: center;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	.solution .lineup dl a.detail:hover,

	.solution .lineup dl .dlContact a:hover{

		text-decoration: none;

		opacity: 0.8;

	}

	.solution .lineup dl a.detail{

		margin-top: auto;

		padding: 10px 28px;

		background: #737373;

		position: relative;

	}

	.solution .lineup dl a.detail:after{

		content: "";

		margin: auto;

		width: 10px;

		height: 10px;

		display: block;

		border: 2px solid #fff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 12px;

		top: 0;

		bottom: 0;

	}

	.solution .lineup dl .dlContact{

		display: flex;

		flex-wrap: wrap;

		gap: 6px;

	}

	.solution .lineup dl .dlContact a{

		padding: 10px;

		background: #6561ab;

		flex: 1;

	}

	/*製品一覧の幅調整用*/

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

		.solution .lineup dl{

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

		}

	}





	/*化学品業向けシステムの機能概要*/

	.overview{

		margin: 0 auto;

		padding: 80px 40px 80px;

		width: 100%;

		max-width: 1280px;

		box-sizing: border-box;

	}



	.overview .productOuter{

		margin-top: 60px;

		display: flex;

		flex-direction: column;

		gap: 80px;

	}

	/*製品紹介汎用スタイル*/

	dl.flexImageBox > dt{

		padding: 35px;

		color: #6561ab;

		font-size: 24px;

		font-weight: 600;

		text-align: right;

		background: linear-gradient(90deg, #fff, #e7e6f8);

		position: relative;

		z-index: -2;

	}

	dl.flexImageBox > dd{

		display: flex;

		align-items: flex-start;

		gap: 30px;

	}

	dl.flexImageBox > dd > .photo{

		margin: -40px 0 0 40px;

		position: relative;

	}

	dl.flexImageBox > dd > .photo:after{

		content: "";

		width: 100%;

		height: 100%;

		display: block;

		background: url(/system/cocktail/common/images/chemical/bg_purple_diagonal_line.png);

		position: absolute;

		right: -14px;

		bottom: -14px;

		z-index: -1;

	}

	dl.flexImageBox > dd > .text{

		margin-top: 48px;

		padding: 0 10px;

		flex: 1;

	}

	dl.flexImageBox > dd > .text > p{

		line-height: 1.6;

	}

	dl.flexImageBox > dd > .text > p:nth-child(n+2){

		margin-top: 28px;

	}

	dl.flexImageBox > dd > .text > p > a{

		color: #217aff

	}

	dl.flexImageBox > dd > .text .detail{

		margin-top: 20px;

		padding: 24px;

		background: #f8f8f8;

	}

	dl.flexImageBox > dd > .text .detail dt{

		color: #6561ab;

		font-weight: 600;

	}

	dl.flexImageBox > dd > .text .detail dd{

		margin-top: 10px;

	}

	dl.flexImageBox > dd > .text .detail dd li:nth-child(n+2){

		margin-top: 4px;

	}

	dl.flexImageBox > dd > .text .detail dd li a{

		color: #0066ff;

		font-size: 14px;

		font-weight: 600;

		text-decoration: underline;

	}

	dl.flexImageBox > dd > .text .detail dd li a:hover{

		text-decoration: none;

	}

	dl.flexImageBox > dd > .text .btnBox{

		margin-top: 40px;

		display: flex;

		flex-wrap: wrap;

		justify-content: flex-end;

		gap: 18px;

	}

	dl.flexImageBox > dd > .text .btnBox a.btn{

		padding: 8px 38px;

		color: #fff;

		font-size: 18px;

		line-height: 1.2;

		border-radius: 5px;

		background: #6561ab;

	}

	dl.flexImageBox > dd > .text .btnBox a.btn:hover{

		opacity: 0.8;

		text-decoration: none;

	}

	/*左右反転バージョン*/

	dl.flexImageBox.reverse > dt{

		text-align: left;

		background: linear-gradient(-90deg, #fff, #e7e6f8);

	}

	dl.flexImageBox.reverse > dd{

		flex-direction: row-reverse;

	}

	dl.flexImageBox.reverse > dd > .photo{

		margin: -40px 50px 0 0;

		max-width: 40%;

	}

	dl.flexImageBox.reverse > dd > .text .btnBox{

		justify-content: flex-start;

	}

	/*製品紹介汎用スタイル調整用*/

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

		.overview .productOuter{

			gap: 60px;

		}

		dl.flexImageBox > dt{

			text-align: left !important;

			background: linear-gradient(-90deg, #fff, #e7e6f8) !important;

		}

		dl.flexImageBox > dd{

			flex-direction: column !important;

		}

		dl.flexImageBox > dd > .photo{

			margin: -10px 20px 0 !important;

			width: calc(100% - 40px) !important;

		}

		dl.flexImageBox > dd > .photo img{

			width: 100%;

		}

		dl.flexImageBox > dd > .text{

			margin: 20px 20px 0 !important;

			padding: 0 !important;

		}

	}





	/*お役立ち記事・セミナー動画*/

	.useful{

		padding: 100px 0 120px;

		background: #f0f0f0;

	}

	.useful .inner{

		padding: 0 40px;

		width: 100%;

		max-width: 1280px;

		box-sizing: border-box;

	}

	/*記事リストスタイル*/

	.articleList{

		display: flex;

		flex-wrap: wrap;

		gap: 48px 20px;

	}

	.articleList > a{

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

		background: #fff;

		box-shadow: 0px 6px 9px 0px rgba(230, 230, 230, 0.5);

	}

	.articleList > a:hover{

		text-decoration: none;

		opacity: 0.8;

	}

	/*記事リストの幅調整用*/

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

		.articleList > a{

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

		}

	}



	a .thumbnail{

		position: relative;

	}

	a .thumbnail > img{

		width: 100%;

		aspect-ratio: 28 / 19;

		object-fit: cover;

	}

	a .thumbnail .tag{

		color: #fff;

		padding: 4px 12px;

		line-height: 1.2;

		display: inline-block;

		background: #ff7a21;

		position: absolute;

		top: 0;

		left: 0;

	}

	/*配色*/

	a .thumbnail .tag.cat_seminar{ background: #ff7a21; }

	a .thumbnail .tag.cat_useful{ background: #5a91cc; }

	a .thumbnail .tag.cat_event{ background: #d5c500; }

	a .thumbnail .tag.cat_column{ background: #5fb383; }



	a .title{

		padding: 22px 16px;

		font-weight: bold;

	}





	/*化学品ソリューションガイド*/

	.chemicalGuide{

		margin: 0 auto;

		padding: 60px 40px 60px;

		width: 100%;

		max-width: 860px;

		box-sizing: border-box;

	}

	.chemicalGuide h2{

		margin: 0 0 60px;

		color: #6561AB;

		font-size: 22px;

		text-align: center;

		display: block;

	}

	.chemicalGuide h2:after{

		display: none;

	}

	.chemicalGuide h2 strong{

		font-size: 24px;

	}

	.chemicalGuide .imgTxt{

		display: flex;

		gap: 70px;

	}

	.chemicalGuide .imgTxt .txt > p{

		font-size: 15px;

	}

	.chemicalGuide .imgTxt .txt > dl{

		margin-top: 30px;

		padding: 20px 20px 20px 74px;

		border: solid 3px #9B98C9;

		border-radius: 8px;

		box-sizing: border-box;

		position: relative;

	}

	.chemicalGuide .imgTxt .txt > dl:before{

		content: '';

		margin: auto;

		width: 84px;

		height: 76px;

		display: block;

		background: url(/system/cocktail/common/images/chemical/icon_fukidashi.svg) no-repeat 0 0;

		position: absolute;

		left: -28px;

		top: 0;

		bottom: 0;

	}

	.chemicalGuide .imgTxt .txt > dl dt{

		margin: 0 0 10px;

		color: #CD4B95;

		font-size: 16px;

		font-weight: bold;

	}

	.chemicalGuide .imgTxt .txt > dl dd{

		color: #6561AB;

		font-size: 14px;

		font-weight: bold;

	}

	.chemicalGuide .imgTxt .txt > dl dd ul li{

		margin: 0 0 5px;

		padding: 0 0 0 13px;

		position: relative;

	}

	.chemicalGuide .imgTxt .txt > dl dd ul li:after{

		content: "";

		width: 4px;

		height: 4px;

		display: block;

		border-radius: 100%;

		background-color: #6561AB;

		position: absolute;

		left: 0;

		top: 9px;

	}



	.chemicalGuide a.dlNow{

		color: #FFF;

		font-weight: bold;

		margin: 60px auto 0;

		padding: 14px 150px;

		width: fit-content;

		min-width: 460px;

		display: block;

		border-radius: 5px;

		background: #D1599D;

		box-sizing: border-box;

		text-align: center;

		position: relative;

	}

	.chemicalGuide a.dlNow:hover{

		opacity: 0.8;

		text-decoration: none;

	}

	.chemicalGuide a.dlNow:after{

		content: "";

		margin: auto;

		width: 20px;

		height: 20px;

		display: block;

		background: url(/system/cocktail/common/images/chemical/icon_dl.svg) no-repeat center center;

		position: absolute;

		right: 116px;

		top: 0;

		bottom: 0;

	}





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

}



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

/* SP */

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

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

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

	

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

	/*	化学品業向けソリューション */

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

	/* 共通 */

	body.noScroll{

		overflow: hidden;

	}



	#pagetop{

		right: 0;

		bottom: 0;

	}

	

	/*ボタンスタイル*/

	.normalButton{

		padding: 1.2em 3em;

		color: #fff;

		font-size: 14px;

		font-weight: 600;

		display: inline-flex;

		align-items: center;

		justify-content: center;

		background: #cd4b95;

		border-radius: 100px;

		box-sizing: border-box;

		position: relative;

		border: solid 2px #FFF;

	}

	.normalButton:has(span){

		line-height: 1.2;

		display: flex;

		align-items: flex-start;

		flex-direction: column;

		gap: 2px;

	}

	.normalButton span{

		font-size: 12px;

		font-weight: 400;

	}

	.normalButton:active{

		text-decoration: none;

		opacity: 0.8;

	}

	.normalButton:after{

		content: "";

		margin: auto;

		position: absolute;

		width: 0.6em;

		height: 0.6em;

		display: block;

		border: 2px solid #fff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		top: 0;

		bottom: 0;

		right: 1.4em;

	}



	/*見出し*/

	.chemicalTop h2{

		margin-bottom: 2.0em;

		padding: 0 0 1.0em;

		font-size: 18px;

		line-height: 1.4;

		text-align: center;

		letter-spacing: 0.1em;

		display: flex;

		flex-direction: column;

		align-items: center;

		position: relative;

	}

	.chemicalTop h2:after{

		content: "";

		margin: auto;

		width: 40%;

		min-width: 100px;

		height: 2px;

		display: block;

		background: #6561ab;

		position: absolute;

		bottom: 0px;

		left: 0;

		right: 0;

	}

	.chemicalTop h2 > span{

		margin-bottom: 0.3em;

		color: #cd4b95;

		font-size: 20px;

		font-weight: 400;

	}

	.chemicalTop h2 > p{

	}

	/*装飾無し*/

	.chemicalTop h2.no_deco{

		margin-bottom: 1.2em;

		padding-bottom: 0;

		font-size: 16px;

	}

	.chemicalTop h2.no_deco:after{

		display: none;

	}

	/*緑バージョン*/

	.chemicalTop h2.purple{

		color: #6561ab;

		font-size: 18px;

	}

	.chemicalTop h2.purple:after{

		width: 40%;

		min-width: 60px;

	}





	/* メインビジュアル */

	.chemicalTop .mainVisual{

		width: 100%;

		background-color: #fff;

		background-image: url(/system/cocktail/common/images/chemical/sp/bg_mainvisual.png);

		background-repeat: no-repeat;

		background-position: center center;

		background-size: cover;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	.chemicalTop .mainVisual .inner{

		padding: 16% 4%;

		width: 100%;

		height: 100%;

		box-sizing: border-box;

	}



	.chemicalTop .mainVisual .title p.sub{

		font-size: clamp(14px, 2.8vw, 1000px);

		display: flex;

		align-items: center;

		flex-wrap: wrap;

		gap: 5px;

	}

	

	.chemicalTop .mainVisual .title p.sub > span{

		padding: 6px;

		color: #fff;

		line-height: 1;

		background: #6561ab;

		border: 1px solid #fff;

	}

	.chemicalTop .mainVisual .title p.main{

		margin-top: 10px;

		font-size: clamp(24px, 6.0vw, 1000px);

		font-weight: 600;

		text-shadow: 0px 0px 10px #fff;

	}



	.chemicalTop .mainVisual h1.text{

		margin-top: 20px;

		font-size: clamp(15px, 3.9vw, 1000px);

		font-weight: 400;

		text-shadow: 0px 0px 6px #fff;

	}



	.chemicalTop .mainVisual .btnBox{

		margin-top: 30px;

		display: flex;

		flex-direction: column;

		align-items: center;

		gap: 16px;

	}

	.chemicalTop .mainVisual .btnBox a{

		border: 3px solid #fff;

		box-sizing: border-box;

	}

	.chemicalTop .mainVisual .btnBox a.consultation {

		min-width: 292px;

		padding: 1.3em 3.0em;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton.guide{

		padding-left: 100px;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton.guide:before{

		content: "";

		margin: auto;

		width: 80px;

		height: 65px;

		background-image: url(/system/cocktail/common/images/chemical/chemical_solution_guide.png);

		background-repeat: no-repeat;

		background-size: contain;

		position: absolute;

		top: -16px;

		bottom: 0px;

		left: 12px;

	}

	.chemicalTop .mainVisual .btnBox a.normalButton.customer{

		width: 100%;

		box-sizing: border-box;

	}



	.chemicalTop .mainVisual .textLink{

		margin: 30px auto 0;

		width: fit-content;

		display: flex;

	}

	.chemicalTop .mainVisual .textLink > a{

		padding: 0 12px;

		color: #0066ff;

		font-weight: 600;

		letter-spacing: 0.06em;

		text-decoration: underline;

		position: relative;

		text-shadow: 2px 2px 4px #fff, 2px -2px 4px #fff, -2px 2px 4px #fff, -2px -2px 4px #fff;

	}

	.chemicalTop .mainVisual .textLink > a:after{

		content: "";

		margin: auto;

		width: 0.5em;

		height: 0.5em;

		display: block;

		border: 2px solid #0066ff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: -2px;

		bottom: 0;

		right: 2px;

	}





	/* ページ内リンク */

	.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;

	}

	.innerLink ul li{

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

	}

	.innerLink ul li a{

		padding: 12px 18px 12px 8px;

		font-size: 14px;

		line-height: 1.2;

		background: #f9f9f9;

		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;

	}





	/* 特徴 */

	.feature{

		padding: 10% 4% 6%;

		width: 100%;

		box-sizing: border-box;

	}

	.feature .textImageBox{

		display: flex;

		flex-direction: column;

		gap: 20px;

	}

	.feature .textImageBox > img{

		margin: 0 auto;

		width: auto;

		max-width: fit-content;

	}

	.feature .textImageBox .text > p{

		font-size: 15px;

		line-height: 1.6em;

	}

	.feature .textImageBox .text dl{

		margin-top: 6%;

	}

	.feature .textImageBox .text dl dt{

		color: #6561ab;

		font-size: 18px;

		font-weight: 600;

	}

	.feature .textImageBox .text dl ul{

		margin-top: 6%;

	}

	.feature .textImageBox .text dl ul li{

		padding-left: 18px;

		font-size: 15px;

		position: relative;

	}

	.feature .textImageBox .text dl ul li:nth-child(n+2){

		margin-top: 8px;

	}

	.feature .textImageBox .text dl ul li:before{

		content: "";

		width: 0.6em;

		height: 0.6em;

		display: block;

		background: #6561ab;

		position: absolute;

		left: 0;

		top: calc(0.75em - 6px)

	}

	.feature .textImageBox .text dl ul li > span{

		font-weight: 600;

		text-decoration: underline; /* 下線 */

		text-decoration-thickness: 0.75em; /* 線の太さ */

		text-decoration-color: #f1ebb4; /* 線の色 */

		text-underline-offset: -0.36em; /* 線の位置。テキストに重なるようにやや上部にする */

		text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */

	}





	/*解決できる課題*/

	.assignment{

		padding: 10% 4%;

		width: 100%;

		box-sizing: border-box;

	}

	.steps{

		padding: 40px 0 60px;

		position: relative;

	}

	.steps:before{

		content: "";

		margin: auto;

		width: 140px;

		height: 100%;

		background: #dad8f5;

		clip-path: polygon(

			0% 0%,

			100% 0,

			100% calc(100% - 30px),

			50% 100%,

			0% calc(100% - 30px)

		);

		position: absolute;

		top: 0;

		right: 20px;

	}

	.steps > ul{

		margin: 0 auto;

		padding: 0 6px;

		width: 100%;

		display: flex;

		flex-direction: column;

		gap: 50px;

		box-sizing: border-box;

	}

	.steps > ul dl{

		padding: 24px 10px 10px;

		background: #fff;

		border: 1px solid #c6c6c6;

		width: 100%;

		box-sizing: border-box;

		position: relative;

	}



	.steps > ul dl > dt.tag{

		padding: 8px 30px 8px 8px;

		color: #fff;

		font-size: 16px;

		font-weight: 600;

		line-height: 1.2;

		background: #837fba;

		display: inline-block;

		width: fit-content;

		min-width: 100px;

		min-height: 1.6em;

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

		box-sizing: border-box;

		position: absolute;

		bottom: calc(100% - 14px);

		left: -6px;

	}

	.steps > ul dl > dt.tag.txtSmall{

		font-size: 15px;

	}

	.steps > ul dl > dd{

		padding: 0 10px;

	}

	.steps > ul dl > dd li{

		padding-left: 14px;

		font-size: 14px;

		line-height: 1.2;

		position: relative;

	}

	.steps > ul dl > dd li:nth-child(n+2){

		margin-top: 8px;

	}

	.steps > ul dl > dd li:before{

		content: "";

		width: 6px;

		height: 6px;

		display: block;

		background: #6561ab;

		border-radius: 100%;

		position: absolute;

		top: calc(0.6em - 4px);

		left: 0px;

	}





	/*資料ダウンロード 共通*/

	section.dlBox{

		padding: 6% 4%;

		width: 100%;

		background-color: #f6f6f6;

		box-sizing: border-box;

		background-image: url(/system/cocktail/common/images/chemical/bg_dlbox.png);

		background-repeat: no-repeat;

		background-position: left center;

		background-size: auto 100%;

	}

	section.dlBox .btnBox{

		display: flex;

		flex-direction: column;

		align-items: center;

		justify-content: center;

		flex-wrap: wrap;

		gap: 30px;

	}

	section.dlBox .btnBox a.normalButton{

		line-height: 1.2;

	}

	section.dlBox .btnBox a.normalButton:has(span){

		flex-direction: column;

		align-items: flex-start;

	}

	section.dlBox .btnBox a.normalButton span{

		font-size: 14px;

	}

	section.dlBox .btnBox a.normalButton:has(span) > p{

		font-size: 16px;

	}



	section.dlBox .btnBox a.normalButton.solution,

	section.dlBox .btnBox a.normalButton.erp{

		padding: 12px 46px 10px 108px;

		

	}

	section.dlBox .btnBox a.normalButton.solution:before{

		content: "";

		margin: auto;

		width: 80px;

		height: 65px;

		background-image: url(/system/cocktail/common/images/chemical/chemical_solution_guide.png);

		background-repeat: no-repeat;

		background-size: contain;

		position: absolute;

		top: -16px;

		bottom: 0px;

		left: 12px;

	}

	section.dlBox .btnBox a.normalButton.erp:before{

		content: "";

		margin: auto;

		width: 80px;

		height: 65px;

		background-image: url(/system/cocktail/common/images/food/foods_erp_jirei.png);

		background-repeat: no-repeat;

		background-size: contain;

		position: absolute;

		top: -10px;

		bottom: 0px;

		left: 12px;

	}

	section.dlBox .btnBox li:has(.btnVoice){

		position: relative;

		display: flex;

		flex-direction: column;

		align-items: center;

	}

	section.dlBox .btnBox li span.btnVoice{

		margin: auto auto 10px;

		padding: 0 16px;

		font-size: 15px;

		font-weight: 600;

		line-height: 1.2;

		width: fit-content;

		position: relative;

	}

	section.dlBox .btnBox li span.btnVoice:before,

	section.dlBox .btnBox li span.btnVoice:after{

		content: "";

		width: 5px;

		height: 20px;

		display: block;

		background: #6561ab;

		clip-path: polygon(

			0% 0%, 100% 0, 50% 100%

		);

		position: absolute;

	}

	section.dlBox .btnBox li span.btnVoice:before{

		transform: rotate(-21deg);

		left: 5px;

		bottom: -2px;

	}

	section.dlBox .btnBox li span.btnVoice:after{

		transform: rotate(21deg);

		right: 5px;

		bottom: -2px;

	}





	/*導入事例*/

	.jirei{

		padding: 10% 4% 10%;

		width: 100%;

		box-sizing: border-box;

	}

	.jirei .listOuter{

		margin-bottom: 12%;

	}

	.jirei .listOuter .caseList{

		display: flex;

		flex-direction: column;

		gap: 20px;

	}

	.jirei .listOuter .caseList > a{

		background: #f2f2f8;

		width: 100%	;

		display: flex;

		flex-direction: column;

		border: 1px solid #f3f3f3;

		box-sizing: border-box;

	}

	.jirei .listOuter .caseList > a:active{

		text-decoration: none;

		opacity: 0.8;

		background: #dbdbff;

	}



	.jirei .listOuter .caseList > a .visual{

		position: relative;

	}

	.jirei .listOuter .caseList > a .visual > img{

		width: 100%;

		aspect-ratio: 7 / 5;

		object-fit: cover;

	}

	.jirei .listOuter .caseList > a .visual > span{

		margin: auto;

		padding: 8px 12px;

		color: #fff;

		font-size: 15px;

		font-weight: 600;

		line-height: 1.2;

		text-align: center;

		width: fit-content;

		min-width: 100px;

		background: #cd4b95;

		position: absolute;

		left: 0;

		right: 0;

		bottom: -10px;

	}



	.jirei .listOuter .caseList > a dl{

		padding: 6% 4% 4%;

		width: 100%;

		box-sizing: border-box;

	}

	.jirei .listOuter .caseList > a dl dt{

		font-size: 16px;

		font-weight: 600;

		text-align: center;

	}

	.jirei .listOuter .caseList > a dl dd{

		margin-top: 2%;

		font-size: 14px;

	}



	.jirei .listOuter .caseList > a .more{

		margin-top: auto;

		padding: 14px;

		border-top: 1px solid #e7e7f3;

		width: 100%;

		box-sizing: border-box;

	}

	.jirei .listOuter .caseList > a .more > p{

		margin: 0 auto;

		color: #676493;

		font-size: 12px;

		line-height: 1;

		width: fit-content;

		position: relative;

	}

	.jirei .listOuter .caseList > a .more > p:after{

		content: "";

		margin: auto;

		width: 6px;

		height: 6px;

		display: block;

		border: 1px solid #676493;

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: -12px;

	}



	.jirei .listOuter .catalog_dl{

		margin: 40px 0;

	}

	.jirei .listOuter .catalog_dl .btn_box{

		margin: 0 auto;

		width: fit-content;

	}

	.jirei .listOuter .catalog_dl a.btn_dl{

		margin: 0 auto;

		width: fit-content;

		display: block;

	}

	.jirei .listOuter .catalog_dl a.btn_dl:hover{

		opacity: 0.8;

	}

	.jirei .listOuter .catalog_dl a.more_text{

		margin: 16px auto 0;

		color: #0000ff;

		font-size: 14px;

		width: fit-content;

		display: block;

	}







	a.moreBtn{

		margin: 30px auto 0;

		color: #fff;

		padding: 1.0em 1.6em;

		font-size: 15px;

		font-weight: 600;

		text-align: center;

		line-height: 1.2;

		display: flex;

		background: #6561ab;

		align-items: flex-start;

		justify-content: center;

		border-radius: 4px;

		box-sizing: border-box;

		position: relative;

	}

	a.moreBtn:after{

		content: "";

		margin: auto;

		width: 0.5em;

		height: 0.5em;

		border: 1px solid #fff;

		border-width: 1px 1px 0 0;

		transform: rotate(45deg);

		position: absolute;

		top: 0;

		bottom: 0;

		right: 16px;

	}

	a.moreBtn:hover{

		opacity: 0.8;

		text-decoration: none;

	}





	/*業種リスト*/

	.IndustryList{

		width: 100%;

		display: flex;

		flex-direction: column;

		gap: 20px;

	}

	.IndustryList dl dd{

		padding: 3% 4%;

		background: url(/system/cocktail/common/images/chemical/bg_industry_list.png);

		border-radius: 8px;

		display: flex;

		flex-direction: column;

		gap: 4px;

	}

	.IndustryList dl dd ul{

		display: flex;

		flex-direction: column;

		gap: 4px;

	}

	.IndustryList dl dd ul li{

		padding-left: 18px;

		position: relative;

	}

	.IndustryList dl dd ul li:before{

		content: "";

		width: 4px;

		height: 4px;

		display: block;

		background: #000;

		border-radius: 100%;

		position: absolute;

		left: 0;

		top: calc(0.75em - 2px);

	}





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

	section.solution .intro{

		margin: 8% 4% 10%;

	}

	section.solution .intro > p{

		font-size: 15px;

		text-align: center;

	}





	/*製品マップ*/

	.solution .modalMap p.caution{

		margin: 0 auto 10px;

		color: #6561ab;

		font-size: 14px;

		text-align: center;

	}

	.solution .modalMap .mapOuter{

		overflow-x: scroll;

	}

	.solution .modalMap .mapOuter .Box{

		width: 1200px;

		height: 600px;

		position: relative;

	}

	.solution .modalMap .mapOuter .Box img{

		width: auto !important;

		height: 600px !important;

		user-select:none;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li{

		width: fit-content;

		position: absolute;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li:after{

		content: "";

		width: 8px;

		height: 14px;

		display: block;

		background: #6eb932;

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

		position: absolute;

		right: calc(100% - 8px);

		top: calc(100% - 3px);

		transform-origin: top center;

		transform: rotate(35deg);

		z-index: 0;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverse:after{

		right: unset;

		left: calc(100% - 8px);

		top: calc(100% - 3px);

		transform: rotate(-35deg);

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverseup:after{

		right: calc(100% - 8px);

		top: unset;

		bottom: calc(100% - 18px);

		transform: rotate(135deg);

	}



	.solution .modalMap .mapOuter .Box .namaList ul li a{

		padding: 5px 20px 5px 32px;

		color: #6eb932;

		font-size: 14px;

		font-weight: 600;

		line-height: 1.2;

		display: inline-flex;

		background: #fff;

		border: 3px solid #6eb932;

		border-radius: 6px;

		box-sizing: border-box;

		position: relative;

		z-index: 1;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li a:hover{

		text-decoration: none;

		cursor: pointer;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li a:before{

		content: "";

		margin: auto;

		width: 1.07em;

		aspect-ratio: 1 / 1;

		display: block;

		background: url(/system/cocktail/common/images/food/icon_zoom.png) no-repeat;

		background-size: contain;

		background-position: center center;

		position: absolute;

		left: 10px;

		top: 0;

		bottom: 0;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverse a{

		padding: 5px 32px 5px 20px;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.reverse a:before{

		left: unset;

		right: 10px;

	}



	/*ピン配色*/

	.solution .modalMap .mapOuter .Box .namaList ul.office li:after{ background: #ff2b0f }

	.solution .modalMap .mapOuter .Box .namaList ul.office li a{

		color: #ff2b0f;

		border-color: #ff2b0f;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.office li a:hover{ background: #ffe5e2; }



	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li:after{ background: #1656cf }

	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li a{

		color: #1656cf;

		border-color: #1656cf;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li a:hover{ background: #e7efff; }



	.solution .modalMap .mapOuter .Box .namaList ul.factory li:after{ background: #00682e }

	.solution .modalMap .mapOuter .Box .namaList ul.factory li a{

		color: #00682e;

		border-color: #00682e;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.factory li a:hover{ background: #dfffed; }



	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li:after{ background: #924100 }

	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li a{

		color: #924100;

		border-color: #924100;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li a:hover{ background: #ffebdb; }



	.solution .modalMap .mapOuter .Box .namaList ul.store li:after{ background: #f37800 }

	.solution .modalMap .mapOuter .Box .namaList ul.store li a{

		color: #f37800;

		border-color: #f37800;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.store li a:hover{ background: #ffefe0; }



	/*ピン配置*/

	.solution .modalMap .mapOuter .Box .namaList ul li.no_001{

		left: 36%;

		top: 5.5%

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_003{

		left: 21.8%;

		bottom: 48.6%

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_004{

		left: 40.4%;

		top: 13.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_005{

		left: 16%;

		top: 33.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_006{

		left: 41.4%;

		top: 24.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_007{

		left: 21.8%;

		top: 9.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_008{

		left: 25.0%;

		top: 24.6%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_009{

		right: 15.2%;

		top: 13.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_010{

		right: 14.8%;

		top: 4.8%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_011{

		left: 26.5%;

		bottom: 39.5%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_012{

		left: 24%;

		bottom: 32%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_016{

		left: 32%;

		bottom: 22%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_017{

		left: 48.4%;

		bottom: 15.0%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_018{

		left: 39.0%;

		bottom: 43.0%

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_020{

		right: 33.2%;

		top: 26.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_022{

		right: 17.2%;

		top: 26.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_023{

		right: 41.2%;

		top: 37.2%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_024{

		right: 28.6%;

		bottom: 25.4%;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li.no_025{

		right: 12.0%;

		bottom: 37.8%;

	}



	@keyframes waveMotion{

		0%, 100% {

			transform: translateY(0);

		}

		50% {

			transform: translateY(-6px);

		}

	}

	.solution .modalMap .mapOuter .Box .namaList ul.office li{

		animation: waveMotion 3s infinite ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.factory li{

		animation: waveMotion 3s infinite 0.3s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.warehouse li{

		animation: waveMotion 3s infinite 0.6s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.store li{

		animation: waveMotion 3s infinite 0.9s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul.neighborhood li{

		animation: waveMotion 3s infinite 1.2s ease-in-out;

	}

	.solution .modalMap .mapOuter .Box .namaList ul li:hover{

		animation-play-state: paused;

	}

	/*モーダルスタイル*/

	.solution .modalMap .modalOuter{

		padding: 4%;

		width: 100%;

		height: 100%;

		background: rgba(51,51,51,30%);

		overflow: auto;

		transition: .3s;

		box-sizing: border-box;

		position: fixed;

		top: 0;

		left: 0;

		z-index: 10000;

		display: flex;

		justify-content: center;

		display: none;

	}

	.solution .modalMap .modalOuter .modal{

		padding: 4%;

		background: #f5f5f5;

		border-radius: 20px;

		box-shadow: 0px 8px 12px 0px rgb(50 50 50 / 50%);

		width: fit-content;

		min-width: 40%;

		max-width: 100%;

		height: fit-content;

		box-sizing: border-box;

		position: relative;

		opacity: 0;

		transform: scale(0.8);

		transition: transform 0.3s ease, opacity 0.3s ease;

		display: none;

	}

	.solution .modalMap .modalOuter .modal.active{

		display: block;

	}

	.solution .modalMap .modalOuter .modal.disp{

		opacity: 1;

		transform: scale(1);

		transition: all 0.3s ease;

	}

	.solution .modalMap .modalOuter .modal .top{

		margin-bottom: 12px;

	}

	.solution .modalMap .modalOuter .modal .top .cat{

		padding: 0.4em 0.8em;

		color: #ff2b0f;

		font-size: 13px;

		font-weight: 600;

		line-height: 1;

		display: inline-block;

		background: #fff;

		border: 3px solid #ff2b0f;

		border-radius: 7px;

		box-sizing: border-box;

	}

	.solution .modalMap .modalOuter .modal .top .cat.office{

		color: #ff2b0f;

		border-color: #ff2b0f;

	}

	.solution .modalMap .modalOuter .modal .top .cat.neighborhood{

		color: #1656cf;

		border-color: #1656cf;

	}

	.solution .modalMap .modalOuter .modal .top .cat.factory{

		color: #924100;

		border-color: #924100;

	}

	.solution .modalMap .modalOuter .modal .top .cat.warehouse{

		color: #00682e;

		border-color: #00682e;

	}

	.solution .modalMap .modalOuter .modal .top .cat.store{

		color: #f37800;

		border-color: #f37800;

	}

	.solution .modalMap .modalOuter .modal .top .close{

		width: 30px;

		height: 30px;

		display: block;

		background: #fff;

		border: 1px solid #878787;

		border-radius: 100%;

		position: absolute;

		top: 14px;

		right: 14px;

	}

	.solution .modalMap .modalOuter .modal .top .close:before,

	.solution .modalMap .modalOuter .modal .top .close:after{

		content: "";

		margin: auto;

		width: 2px;

		height: 22px;

		display: block;

		background: #333333;

		position: absolute;

		top: 0;

		bottom: 0;

		left: 0;

		right: 0;

	}

	.solution .modalMap .modalOuter .modal .top .close:before{

		transform: rotate(-45deg);

	}

	.solution .modalMap .modalOuter .modal .top .close:after{

		transform: rotate(45deg);

	}



	.solution .modalMap .modalOuter .modal .top .close:hover{

		cursor: pointer;

		background: #dcdcdc;

	}



	.solution .modalMap .modalOuter .modal dl{

		padding-bottom: 20px;

	}

	.solution .modalMap .modalOuter .modal dl:nth-child(n+2){

		padding-top: 16px;

		border-top: 2px solid #e1e8de;

	}

	.solution .modalMap .modalOuter .modal dl dt{

		margin-bottom: 15px;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo{

		margin-bottom: 20px;

		padding: 14px;

		display: flex;

		align-items: center;

		justify-content: center;

		background: #fff;

		box-sizing: border-box;

	}

		.solution .modalMap .modalOuter .modal dl dt div.logo{

		display: block;

	}

	.solution .modalMap .modalOuter .modal dl dt div.logo>a {

		display: block;

    text-align: center;

		font-weight: 600;

	}

	.solution .modalMap .modalOuter .modal dl dt div.logo>a.innerLogo {

    width: 80%;

    margin: 0 auto 3%;

		max-width: 300px;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo:hover,

	.solution .modalMap .modalOuter .modal dl dt .logo a:hover {

		text-decoration: none;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo > img{

		width: auto;

		max-height: 100px;

	}

	.solution .modalMap .modalOuter .modal dl dt .logo > p{

		font-size: 16px;

		font-weight: 600;

		line-height: 2.0;

	}

	.solution .modalMap .modalOuter .modal dl dt p.name{

		font-size: 16px;

		font-weight: 600;

		box-sizing: border-box;

	}

	.solution .modalMap .modalOuter .modal dl dd > ul li{

		padding-left: 20px;

		font-size: 14px;

		position: relative;

	}

	.solution .modalMap .modalOuter .modal dl dd > ul li:nth-child(n+2){

		margin-top: 6px;

	}

	.solution .modalMap .modalOuter .modal dl dd > ul li:before{

		content: "";

		width: 6px;

		height: 6px;

		display: block;

		background: #6561ab;

		border-radius: 100%;

		position: absolute;

		left: 6px;

		top: calc(0.75em - 4px);

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox{

		margin-top: 20px;

		display: flex;

		align-items: center;

		flex-wrap: wrap;

		gap: 10px;

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox > a.btn{

		padding: 0.6em 1.2em;

		color: #fff;

		font-size: 13px;

		background: #6561ab;

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox > a.btn:active{

		text-decoration: none;

		opacity: 0.8;

	}

	.solution .modalMap .modalOuter .modal dl dd > .btnBox > a.detail{

		margin: 0 10px;

		color: #0000ff;

		font-size: 14px;

	}





	/*製品一覧*/

	section.solution .lineup{

		margin: 10% auto 6%;

		padding: 0 4%;

		display: flex;

		flex-wrap: wrap;

		gap: 10px;

	}

	section.solution .lineup dl{

		padding: 10px;

		background: #f5f5f5;

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

		display: flex;

		flex-direction: column;

		gap: 8px;

		box-sizing: border-box;

	}

	section.solution .lineup dl dt {

		text-align: center;

		min-height: 30px;

		display: flex;

		justify-content: center;

	}

	section.solution .lineup dl dt span {

		padding: 0.2em 0.5em;

		font-size: 14px;

		font-weight: 600;

		color: #333;

		display: inline-block;

		width: fit-content;

		background: #fff;

		border: 2px solid #333;

		border-radius: 6px;

	}

	.solution .lineup dl dt.col3 {

		display: flex;

		flex-wrap: wrap;

		gap: 4px;

	}

	.solution .lineup dl dt.col3 span {

		font-size: 13px;

	}

	.solution .lineup dl dt.col3 span:nth-child(2) {

    color: #00682e;

    border-color: #00682e;

	}

	.solution .lineup dl dt.col3 span:nth-child(3) {

    color: #924100;

    border-color: #924100;

	}

	section.solution .lineup dl dt.office span {

		color: #ff2b0f;

		border-color: #ff2b0f;

	}

	section.solution .lineup dl dt.neighborhood span {

		color: #1656cf;

		border-color: #1656cf;

	}

	section.solution .lineup dl dt.factory span {

		color: #00682e;

		border-color: #00682e;

	}

	section.solution .lineup dl dt.warehouse span {

		color: #924100;

		border-color: #924100;

	}

	section.solution .lineup dl dt.store span {

		color: #f37800;

		border-color: #f37800;

	}





	section.solution .lineup dl dd .logo{

		width: 100%;

		aspect-ratio: 13 / 4;

		background: #fff;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	section.solution .lineup dl dd .logo:hover {

		text-decoration: none;

	}



	section.solution .lineup dl dd .logo > img{

		width: 96% !important;

		max-width: fit-content;

	}

	section.solution .lineup dl dd .logo > p{

		padding: 8px;

		font-size: 18px;

		font-weight: 600;

		line-height: 1.4;

		text-align: center;

	}

	section.solution .lineup dl dd .logo > p.txtSmall{

		font-size: 16px;

	}

	section.solution .lineup dl a.detail,

	section.solution .lineup dl .dlContact a{

		color: #fff;

		font-size: 14px;

		line-height: 1.2;

		text-align: center;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	section.solution .lineup dl a.detail:active,

	section.solution .lineup dl .dlContact a:active{

		text-decoration: none;

		opacity: 0.8;

	}

	section.solution .lineup dl a.detail{

		margin-top: auto;

		padding: 0.6em 1.2em;

		background: #737373;

		position: relative;

	}

	section.solution .lineup dl a.detail:after{

		content: "";

		margin: auto;

		width: 0.4em;

		height: 0.4em;

		display: block;

		border: 2px solid #fff;

		border-width: 2px 2px 0 0;

		transform: rotate(45deg);

		position: absolute;

		right: 8px;

		top: 0;

		bottom: 0;

	}

	section.solution .lineup dl .dlContact{

		display: flex;

		flex-wrap: wrap;

		gap: 8px;

	}

	section.solution .lineup dl .dlContact a{

		padding: 0.6em;

		background: #6561ab;

		flex: 1;

	}

	/*製品一覧の幅調整用*/

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

		section.solution .lineup dl{

			width: calc( 100% );

		}

	}





	/*化学品業向けシステムの機能概要*/

	.overview{

		padding: 10% 4%;

	}

	.overview .productOuter{

		display: flex;

		flex-direction: column;

		gap: 40px;

	}

	/*製品紹介汎用スタイル*/

	dl.flexImageBox > dt{

		padding: 1.2em;

		color: #6561ab;

		font-size: 18px;

		font-weight: 600;

		text-align: left;

		width: 100%;

		background: linear-gradient(-90deg, #fff, #e7e6f8);

		box-sizing: border-box;

		position: relative;

		z-index: -2;

	}

	dl.flexImageBox > dd{

		display: flex;

		flex-direction: column;

		gap: 40px;

	}

	dl.flexImageBox > dd > .photo{

		margin: -10px 20px 0 20px;

		position: relative;

	}

	dl.flexImageBox > dd > .photo:after{

		content: "";

		width: 100%;

		height: 100%;

		display: block;

		background: url(/system/cocktail/common/images/chemical/bg_purple_diagonal_line.png);

		position: absolute;

		right: -14px;

		bottom: -14px;

		z-index: -1;

	}

	dl.flexImageBox > dd > .text{

		padding: 0 10px;

		flex: 1;

	}

	dl.flexImageBox > dd > .text > p{

		font-size: 15px;

		line-height: 1.6;

	}

	dl.flexImageBox > dd > .text > p:nth-child(n+2){

		margin-top: 4%;

	}

	dl.flexImageBox > dd > .text > p > a{

		color: #217aff

	}

	dl.flexImageBox > dd > .text .detail{

		margin-top: 20px;

		padding: 4%;

		font-size: 15px;

		background: #f8f8f8;

	}

	dl.flexImageBox > dd > .text .detail dt{

		color: #6561ab;

		font-weight: 600;

	}

	dl.flexImageBox > dd > .text .detail dd{

		margin-top: 10px;

	}

	dl.flexImageBox > dd > .text .detail dd li:nth-child(n+2){

		margin-top: 4px;

	}

	dl.flexImageBox > dd > .text .detail dd li a{

		color: #0066ff;

		font-size: 14px;

		font-weight: 600;

		text-decoration: underline;

	}

	dl.flexImageBox > dd > .text .detail dd li a:active{

		text-decoration: none;

	}

	dl.flexImageBox > dd > .text .btnBox{

		margin-top: 40px;

		display: flex;

		justify-content: center;

		flex-wrap: wrap;

		gap: 12px;

	}

	dl.flexImageBox > dd > .text .btnBox a.btn{

		padding: 6px 20px;

		color: #fff;

		font-size: 14px;

		text-align: center;

		min-width: 120px;

		border-radius: 5px;

		background: #6561ab;

	}

	dl.flexImageBox > dd > .text .btnBox a.btn:active{

		opacity: 0.8;

		text-decoration: none;

	}





	/*お役立ち記事・セミナー動画*/

	.useful{

		padding: 10% 4%;

		width: 100%;

		background: #f0f0f0;

		box-sizing: border-box;

	}

	/*記事リストスタイル*/

	.articleList{

		display: flex;

		flex-wrap: wrap;

		gap: 20px 14px;

	}

	.articleList > a{

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

		background: #fff;

		box-shadow: 0px 6px 9px 0px rgba(230, 230, 230, 0.5);

	}

	.articleList > a:active{

		text-decoration: none;

		opacity: 0.8;

	}



	a .thumbnail{

		position: relative;

	}

	a .thumbnail > img{

		width: 100%;

		aspect-ratio: 28 / 19;

		object-fit: cover;

	}

	a .thumbnail .tag{

		color: #fff;

		padding: 0.4em 0.6em;

		font-size: 12px;

		line-height: 1.2;

		display: inline-block;

		background: #ff7a21;

		position: absolute;

		top: -6px;

		left: 0;

	}

	/*配色*/

	a .thumbnail .tag.cat_seminar{ background: #ff7a21; }

	a .thumbnail .tag.cat_useful{ background: #5a91cc; }

	a .thumbnail .tag.cat_event{ background: #d5c500; }

	a .thumbnail .tag.cat_column{ background: #5fb383; }



	a .title{

		padding: 6px;

		font-weight: bold;

		line-height: 1.4;

	}





	/*化学品ソリューションガイド*/

	.chemicalGuide{

		padding: 10% 4%;

		width: 100%;

		box-sizing: border-box;

	}

	.chemicalGuide h2{

		margin: 0 0 30px;

		color: #6561AB;

		font-size: 16px;

		text-align: center;

		display: block;

	}

	.chemicalGuide h2:after{

		display: none;

	}

	.chemicalGuide h2 strong{

		font-size: 18px;

	}

	.chemicalGuide .imgTxt{

		margin-bottom: 40px;

	}

	.chemicalGuide .imgTxt .img{

		margin: 0 auto 20px;

		max-width: 286px;

	}

	.chemicalGuide .imgTxt .txt > p{

		margin: 0 0 30px;

		font-size: 15px;

	}

	.chemicalGuide .imgTxt .txt > dl{

		padding: 15px 15px 15px 60px;

		border: solid 3px #9B98C9;

		border-radius: 8px;

		box-sizing: border-box;

		position: relative;

	}

	.chemicalGuide .imgTxt .txt > dl:before{

		content: '';

		margin: auto;

		width: 64px;

		height: 58px;

		display: block;

		background: url(/system/cocktail/common/images/chemical/icon_fukidashi.svg) no-repeat center center;

		background-size: contain;

		position: absolute;

		left: -13px;

		top: 0;

		bottom: 0;

	}

	.chemicalGuide .imgTxt .txt > dl dt{

		margin: 0 0 8px;

		color: #CD4B95;

		font-weight: bold;

	}

	.chemicalGuide .imgTxt .txt > dl dd{

		color: #6561AB;

		font-size: 13px;

		font-weight: bold;

	}

	.chemicalGuide .imgTxt .txt > dl dd ul li{

		padding: 0 0 0 13px;

		position: relative;

	}

	.chemicalGuide .imgTxt .txt > dl dd ul li:nth-child(n+2){

		margin-top: 5px;

	}

	.chemicalGuide .imgTxt .txt > dl dd ul li:after{

		content: "";

		width: 4px;

		height: 4px;

		display: block;

		background-color: #6561AB;

		border-radius: 100%;

		position: absolute;

		left: 0;

		top: 8px;

	}



	.chemicalGuide a.dlNow{

		padding: 13px 54px;

		margin: 0 auto;

		color: #FFF;

		text-align: center;

		font-weight: bold;

		width: fit-content;

		display: block;

		border-radius: 5px;

		background: #D1599D;

		box-sizing: border-box;

		position: relative;

	}

	.chemicalGuide a.dlNow:active{

		opacity: 0.8;

		text-decoration: none;

	}

	.chemicalGuide a.dlNow:after{

		content: "";

		margin: auto;

		width: 20px;

		height: 20px;

		display: block;

		background: url(/system/cocktail/common/images/chemical/icon_dl.svg) no-repeat center center;

		position: absolute;

		right: 18px;

		top: 0;

		bottom: 0;

	}





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

}



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



/* 印刷用 */



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



@media print {

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

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

}