:root {
	--blue: #0099D9;
	--orange: #F08300;	
	--glay: #595757;	
	--green: #00A73C;	
	--pink: #EB6EA5;
	--red: #D24434;
	/* --minWidth: 1240px; */
	/* --minPage: 1008px; */
	/* --minOpenPage: 1168px; */
	--minMenu:	232px;
	--minWidth: 1080px;
	--minPage: 848px;
	--minOpenPage: 1008px;
	
	
	--minMenu:	232px;
	--minWidth: 1148px;
	--minPage: 916px;
	--minOpenPage: 1076px;
	
}

.nowrap{white-space: nowrap;}

.wrapper,
#header,
.header,
.pc-footer {min-width: 	var(--minWidth);}
#header{background: #17AFEC;}
.row {display: flex;flex-direction: row; }
.gap{gap: 30px;}
.content-wrapper{display: flex;}
.content-wrapper.no-side{max-width: var(--minWidth);margin: 0 auto;}
.pc-footer{z-index: 10000;}
.pc-footer{min-width: 1080px;}
.breadcrumb{background: none;width: auto;}
.breadcrumb ul{padding: 12px 24px 0;max-width: calc(1080vw / 12.4);}
.breadcrumb li{color: #252525;}
.breadcrumb li a{color: #019bd9;}

.viewPC{display: inline-block;}
.viewSP{display: none;}
/*----  コンテンツ  ----*/
/* page */
.page{
	width: calc(100vw - 232px);
	min-width: 	var(--minPage);
	margin-bottom: 60px;
	overflow: hidden;}
.page.open{
	width: calc(100vw - 72px);
	min-width: 	var(--minOpenPage);}
.page .inner_block{
	background: #fff;
	margin: 12px 24px 24px;}
.page .inner_block .contents{
	padding: 48px;}
.page.open .inner{
	min-width:  var(--minOpenPageInner);}

/* ---- サービスメニュー ----*/
.scrl{
	overflow-y: scroll;
	overflow-y: auto;
	width: 202px;
	padding-right: 12px;
}
.menu-box ul.menu {
	width: 192px;
	margin-bottom: 90px;
}
.close .scrl {
	width: 40px;
	/* height: calc(100vh - 94px); */
}
.menu-box.close  ul.menu {
	width: 32px;
	margin-bottom: 30px;
	margin-bottom: 24px;
}
.scrl::-webkit-scrollbar {
		background: #E2E4E5;
		width: 8px;
		height: 8px;
}
.scrl::-webkit-scrollbar-thumb {
		background-color: #F0F0F0;
		border: 1px solid #E2E4E5;
}
.scrl::-webkit-scrollbar-thumb:hover {
		background-color: #fff;
}
.menu-box{
	position: relative;
	/* min-width: 192px; */
	padding: 30px 20px;
	box-shadow: 4px 0px 4px -4px rgba(51, 51, 51, 0.15);
	background: #fff;
	/* z-index: 9999; */
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	flex-basis: min-content;
	align-items: flex-start;
	/* height: 100vh; */
}
.menu-box.fixed{
	min-width: 192px;
	width: 192px;
	background: #fff;
}
.menu-box.close{min-width: 32px;
	transition: all 0.4s ease-out;
	/* height: auto; */
}
.menu-box.fixed .menu-content {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	padding: 30px 20px 0;
	/* height: 100vh; */
}
.menu-box.fixed .menu-btn{
	position: fixed;
	z-index: 9999;
	top: 30px;
	left: calc( var(--minMenu) - 8px);
}
.menu-box.fixed.close .menu-btn{
	left: calc(72px - 8px);
}
.menu-content {
	position: relative;
	/* display: block; */
	display: flex;
	flex-basis: min-content;
	/* width: 232px; */
	width: 192px;
	height: 100%;
	height: auto;
	height: fit-content;
	background: #fff;
	overflow: hidden;}	
.menu-content .inner{}
.menu-content .logo{margin-bottom: 32px;}
.menu-content ul li{white-space: nowrap;}
.menu-content ul.menu li a{
	width: 100%;
	width: auto;
	height: 32px;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1;
	display: flex;
align-items: center;
}
.menu-content ul.menu li a img{
	margin: 0 5px;
}
.menu-content ul.contact{display: flex;	width: 192px;}
.close .menu-content ul.contact{display: block;width: 32px;}
.close .menu-content ul.contact li{margin-bottom: 10px;}
/* .close .menu-content{position: absolute ;background: #fff;} */
.close .menu-content .inner{}
.close .menu-content .logo{margin-bottom: 0;}
.close .menu-content .logo img{width: 32px;}
.close .menu-content{display: block;}
.close .menu-content ul.menu li a{
	width: 32px;
	height: 32px;
	padding-left: 0;
	display: flex;
	justify-content: center;
	align-items: center;}
.menu-content .logo img.open{display: block;}
.menu-content .logo img.close{display: none}
.close .menu-content .logo img.open{display: none}
.close .menu-content .logo img.close{display: block;width: 22px;margin-left: 5px; margin-bottom: 30px;}
.close .menu-content ul.menu li a span{display: none}
.close .menu-content{overflow: visible ;}

/* メニュー */
.menu-box ul.menu{margin-bottom: 24px;margin-bottom: 18px;}
.menu-box ul.menu li{transition: all 0.4s ease-out;}
.menu-box ul.menu li.active a{background: #F0F0F0;}
.menu-box ul.menu li.dropBtn.active a{background: #F0F0F0;background: none;}
.menu-box ul.menu li.active .submenu li a{	background: none;}
.menu-box ul.menu li.active .submenu li.active a{background: #F0F0F0;}
.menu-box ul.menu li.dropBtn.active a:hover,
.menu-box ul.menu li.active .submenu li a:hover{	background: #F0F0F0;}
.menu-box ul.menu li a:hover,
.menu-box ul.contact li a:hover{background: #F0F0F0;}
.menu-box ul.menu li,
.menu-box ul.menu li.active .submenu li{margin-bottom: 2px;}
.menu-box ul.menu li:nth-last-child(1),
.menu-box ul.menu li.active .submenu li:nth-last-child(1){margin-bottom: 0; }

.menu-box ul.menu li a{
	border-radius: 6px;
	line-height: 1;
	color: #41495A;
	font-weight: 400;
	position: relative;
	padding-left: 32px;
	text-decoration: none;}
/* .copy h2{	position: relative;}
.copy h2::before, */
.menu-box ul.menu li a::before{
	position: absolute;
	content: '';
	background: #41495A;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;}
	.copy h2::before{
		width: calc(24vw / 10.08 * 0.75);
		height: calc(24vw / 10.08 * 0.75);
		top: 0;
		left: 0;
	}
	.menu-box ul.menu li a::before{
		width: 16px;
		height: 16px;
		top: 8px;
		left: 8px;
	}

.item li.etc::before{-webkit-mask-image:url("../images/icon/icon_leader.svg");mask-image: url("../images/icon/icon_leader.svg");}


.item li.sfa::before{-webkit-mask-image:url("../images/icon/icon_ks_sfa.svg");mask-image: url("../images/icon/icon_ks_sfa.svg");}
.item li.chatbot::before{-webkit-mask-image:url("../images/icon/icon_chatbot.svg");mask-image: url("../images/icon/icon_chatbot.svg");}
.item li.sales::before{-webkit-mask-image:url("../images/icon/icon_ks_sales.svg");mask-image: url("../images/icon/icon_ks_sales.svg");}
.item li.report::before{-webkit-mask-image:url("../images/icon/icon_ks_report.svg");mask-image: url("../images/icon/icon_ks_report.svg");}
.item li.analize::before{-webkit-mask-image:url("../images/icon/icon_ks_ana.svg");mask-image: url("../images/icon/icon_ks_ana.svg");}
.item li.compana::before{-webkit-mask-image:url("../images/icon/icon_ks_compana.svg");mask-image: url("../images/icon/icon_ks_compana.svg");}
.item li.proposal::before{-webkit-mask-image:url("../images/icon/icon_ks_proposal.svg");mask-image: url("../images/icon/icon_ks_proposal.svg");}
.item li.org::before{-webkit-mask-image:url("../images/icon/icon_ks_org.svg");mask-image: url("../images/icon/icon_ks_org.svg");}
.item li.secure::before{-webkit-mask-image:url("../images/icon/icon_ks_secure.svg");mask-image: url("../images/icon/icon_ks_secure.svg");}
.item li.audit::before{-webkit-mask-image:url("../images/icon/icon_ks_audit.svg");mask-image: url("../images/icon/icon_ks_audit.svg");}


a.home::before{-webkit-mask-image:url("../images/icon/icon_ks_home.svg");mask-image: url("../images/icon/icon_ks_home.svg");}
a.function::before{-webkit-mask-image:url("../images/icon/icon_function.svg");mask-image: url("../images/icon/icon_function.svg");}
.copy h2.crm::before,
a.crm::before{-webkit-mask-image:url("../images/icon/icon_ks_crm.svg");mask-image: url("../images/icon/icon_ks_crm.svg");}
.item li.chat::before,
.copy h2.chat::before,
a.chat::before{-webkit-mask-image:url("../images/icon/icon_ks_chat.svg");mask-image: url("../images/icon/icon_ks_chat.svg");}
.item li.file::before,
.copy h2.file::before,
a.file::before{-webkit-mask-image:url("../images/icon/icon_ks_file.svg");mask-image: url("../images/icon/icon_ks_file.svg");}
.item li.card::before,
.copy h2.card::before,
a.card::before{-webkit-mask-image:url("../images/icon/icon_ks_meisi.svg");mask-image: url("../images/icon/icon_ks_meisi.svg");}
.item li.company::before,
.copy h2.company::before,
a.company::before{-webkit-mask-image:url("../images/icon/icon_ks_custom.svg");mask-image: url("../images/icon/icon_ks_custom.svg");}
.item li.person::before,
.copy h2.person::before,
a.person::before{-webkit-mask-image:url("../images/icon/icon_ks_cus.svg");mask-image: url("../images/icon/icon_ks_cus.svg");}
.item li.sort::before,
.copy h2.sort::before,
a.sort::before{-webkit-mask-image:url("../images/icon/icon_nayose.svg");mask-image: url("../images/icon/icon_nayose.svg");}
.copy h2.setting::before,
a.setting::before{-webkit-mask-image:url("../images/icon/icon_setting.svg");mask-image: url("../images/icon/icon_setting.svg");}

.item li.ai::before,
.copy h2.ai::before,
a.ai::before{-webkit-mask-image:url("../images/icon/icon_agent.svg");mask-image: url("../images/icon/icon_agent.svg");}
.item li.price::before,
.copy h2.price::before,
a.price::before{-webkit-mask-image:url("../images/icon/icon_price.svg");mask-image: url("../images/icon/icon_price.svg");}
a.case::before{-webkit-mask-image:url("../images/icon/icon_case.svg");mask-image: url("../images/icon/icon_case.svg");}
a.column::before{-webkit-mask-image:url("../images/icon/icon_column.svg");mask-image: url("../images/icon/icon_column.svg");}
a.faq::before{-webkit-mask-image:url("../images/icon/icon_faq.svg");mask-image: url("../images/icon/icon_faq.svg");}
.item li.support::before,
.copy h2.support::before,
a.support::before{-webkit-mask-image:url("../images/icon/icon_support.svg");mask-image: url("../images/icon/icon_support.svg");}
a.contact::before{-webkit-mask-image:url("../images/icon/icon_contact.svg");mask-image: url("../images/icon/icon_contact.svg");}

.submenu li.active a.chat::before{-webkit-mask-image:url("../images/icon/icon_ks_chat_ch.svg");mask-image: url("../images/icon/icon_ks_chat_ch.svg");}
.submenu li.active a.file::before{-webkit-mask-image:url("../images/icon/icon_ks_file_ch.svg");mask-image: url("../images/icon/icon_ks_file_ch.svg");}
.submenu li.active a.card::before{-webkit-mask-image:url("../images/icon/icon_ks_meisi_ch.svg");mask-image: url("../images/icon/icon_ks_meisi_ch.svg");}
.submenu li.active a.company::before{-webkit-mask-image:url("../images/icon/icon_ks_custom_ch.svg");mask-image: url("../images/icon/icon_ks_custom_ch.svg");}
.submenu li.active a.person::before{-webkit-mask-image:url("../images/icon/icon_ks_cus_ch.svg");mask-image: url("../images/icon/icon_ks_cus_ch.svg");}
.submenu li.active a.sort::before{-webkit-mask-image:url("../images/icon/icon_nayose_ch.svg");mask-image: url("../images/icon/icon_nayose_ch.svg");}

/*----  サブメニュー  ----*/
/* .menu-box ul.submenu li a::before{display: none;} */
.menu-box .submenuBox {
	border-radius: 0	0 6px 6px;
	border-radius: 6px;
	background: #F8F8F8;
}

.menu-box ul.submenu {
	/* display: none; */
}
.menu-box li.dropBtn {
	position: relative;
	cursor: pointer;
}
.menu-box li.dropBtn a:after {
	position: absolute;
	content: '';
	width: 12px;
	height: 12px;
	top: 10px;
	right: 10px;
	background: #41495A;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-image: url(../images/icon_menu_arrow.svg);
	mask-image: url(../images/icon_menu_arrow.svg);
}
.close .menu-content li.dropBtn a:after {
	width: 8px;
	height: 8px;
	top: 24px;
	right: 12px;
	-webkit-mask-image: url(../images/icon_menu_arrow-sp.svg);
	mask-image: url(../images/icon_menu_arrow-sp.svg);
}
.menu-box .submenuBox a:after{display: none;}
.menu-box li.dropBtn.active{	
	/* background: #F0F0F0; */
}
.menu-box li.dropBtn.active a:after {
	-ms-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);}
}
.menu-box .submenuBox{
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.menu-box .submenuBox ul li{
	height: 0;
	transition: all 0.4s ease-out;
	line-height: 0;
	opacity: 0;
	margin: 0;
	padding: 0;
}
.menu-box li.dropBtn.active .submenuBox ul li{
	height: 100%;
	line-height: 1;
	opacity: 1;
	padding: 0;
}

.menu-box li.dropBtn .submenuBox ul li .title{
	height: 28px;
	cursor: auto ;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 10px 0 0;
}

.menu-box li.dropBtn .submenuBox ul li .title:after{
				/* position: absolute;
top: calc(50% - 0px);
right: 10px; */
/* height: 0px; */
width: 100%;
content: '';
border-bottom: solid 1px #ccc;
}

.menu-box li.dropBtn .submenuBox ul li .title h3{
	padding: 0 10px;
	font-weight: bold;
	font-size: 1.1rem;
	line-height: 0;
	/* width: 100%;
	background: #F8F8F8;
	display: block; */
}

.menu-box.close  li.dropBtn .submenuBox ul li .title{
	display: none;
}

/*----  コンタクトメニュー  ----*/
.menu-box ul.contact {
	justify-content: space-between;
	justify-content: center;
}
.menu-box ul.contact li a{display: block;}
.menu-content ul.contact li a img.open{display: block}
.menu-content ul.contact li a img.close{display: none}
.close .menu-content ul.contact 	li a img.open{display: none}
.close .menu-content ul.contact 	li a img.close{display: block}

.menu-box ul.contact li a.doc{
	position: relative;
}
.menu-box ul.contact li a.doc:hover::after{
	position: absolute;
	content: '';
	background-repeat: no-repeat;
	width: 192px;
	height: 72px;
	top: 0;
	left: 0;
	background-image: url(../images/btn_contact_long_on.svg);
}
.menu-box.close ul.contact li a.doc:hover::after{
width: 0;
height:0;
top: 0;
left: 0;
background-image: none ;
}



/*----  メニュー表示切替ボタン  ----*/
.menu-btn{
	position: absolute;
	padding: 0;
	width: 8px;
	height: 32px;
	height: 22px;
	right: 0;
	top: 30px;
	border-radius: 2px 0px 0px 2px;
	background: #E2E4E5;
	box-shadow: inset 2px 2px 2px -2px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}
.menu-btn::after{
	position: absolute;
	content: '';
	width: 4px;
	height: 4px;
	top: 14px;
	top: 9px;
	right: 2px;
	background: #41495A;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-image:url("../images/polygon.svg");
	mask-image: url("../images/polygon.svg");
	-ms-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.close .menu-btn::after{
	-ms-transform: rotate(0);
	-webkit-transform: rotate(0);
	transform: rotate(0);
}

@media (max-width: var(--minWidth);){
	.page{
		min-width: calc(var(--minWidth); -  var(--minMenu));
	}
}

@media (max-width: 768px){

	#header{display: none;}
	/* メニューボックス */
	#menuBox{z-index: 10002;}
	.menu-box	{}
	.contents-header{
		height: 40px;
		height: 0;
	}
	/* .menu-box.fixed .menu-content, */
	.menu-box .menu-content{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		height: 20px;
		padding: 0;
		width: 100%!important;
		overflow: hidden;
	}
	
	.wrapper,
	#header,
	.header,
	.pc-footer {min-width: auto;}
	
	.viewPC{display: none;}
	.viewSP{display: block;}
	
	.menu-box .menu-content .inner{
		padding: 0 10px;
		width: 100%;
	}
	.menu-box .menu-content,
	.menu-box.fixed .menu-content{
		padding: 10px 0;
		box-shadow: 4px 0px 4px 2px rgba(51, 51, 51, 0.15);
		
		box-shadow: none;
		background: none;

		
	}
	.menu-box.fixed .menu-content{
		/* background: rgb(255 255 255 / 80%)	; */
			min-height: 40px;
	}
	.menu-box .menu-content.open{
		background: #fff;
		overflow: scroll;
	}
	.menu-content .logo{
		opacity: 0;
		margin: 6px 0 12px 46px;
	}
	
	.menu-content .logo{
		margin: 36px;
	}
	.menu-content .logo img{
		margin: 0 auto;
		width: 160px;
	}
	
	
	.menu-content.open .logo{opacity: 1;}
	
	.menu-box{overflow: hidden;padding: 0}
	.menu-box.close{min-width: 0;}
	.menu-box.fixed{min-width: auto}
	
	.menu-content{
		width: 100%;
		transition: all 0.4s;}
	.menu-content.open{
		height: 100%;}
	
	.scrl{
		/* margin-top: 10px; */
		margin: 10px 0;
		padding: 0;
		height: calc(100vh - 50px) !important;
		overflow: auto}
	.menu-box ul.menu{
		margin-bottom: 20px;
	}
	.menu-box ul.menu,
	.close .scrl,
	.scrl,
	.menu-box.close ul.menu,
	.close .menu-content ul.menu li a {width: 100%;}
	.close .menu-content .logo img {width: auto;}
	.close .menu-content ul.menu li a {
		justify-content: flex-start ;
		padding-left: 32px;
		width: auto;}
	.menu-content ul.menu li a,
	.close .menu-content ul.menu li a{
		height: 3em;
	}
	.menu-content ul.menu li a::before {
		width: 18px;
		height: 18px;
		top: 10px;
		left: 8px;
	}
	.close .menu-content li.dropBtn a:after{
		width: 12px;
		height: 12px;
		top: 10px;
		right: 10px;
	}
	
	.menu-content ul.contact,
	.close .menu-content ul.contact {
		width: 100%;
		display: flex; 
		justify-content: space-evenly;
	}
	
	.menu-content ul.menu li a span,
	.close .menu-content ul.menu li a span{
		display: inline-block;
	font-size: 1.6rem;}
	.menu-content .logo{margin-bottom: 0;}
	
	.menu-content .logo img.open,
	.close .menu-content .logo img.open {display: block;}
	.close .menu-content .logo img.close {display: none;}
	.close .menu-content ul.contact li a img.open{display: block;}
	.close .menu-content ul.contact li a img.close{display: none;}
		
		/* ハンバーガー */
		.menu-trigger {
			display: block;
			position: fixed;
			z-index: 100001;
			width: 40px;
			height: 40px;
			cursor: pointer;
			margin: auto 1rem auto auto;
			top: 0;
			right: auto;
			left: 0;
			bottom: auto;
			text-align: center;
			vertical-align: middle;
			zoom: 1;
			
			margin: 12px auto auto 12px;
			margin: 6px auto auto 12px;
		}
		
		.menu-trigger span{
			position: absolute;
			width: 25px;
			height: 2px;
			background: #019bd9;
			background: #5B5E66;
			cursor: pointer;
			
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			-webkit-transition: linear 0.4s;
			transition: linear 0.4s;
		
		}
		
		.menu-trigger span::after,
		.menu-trigger span::before{
			position: absolute;
			width: 25px;
			height: 2px;
			background: #019bd9;
			background: #5B5E66;
			cursor: pointer;
			transition: linear 0.4s;
		}
		.menu-trigger span::before {
						content: '';
						top: -400%;
						left: 0;
		}
		.menu-trigger span::after {
						content: '';
						top: 400%;
						left: 0;
		}
		.menu-trigger.open{
	
		}
		.menu-trigger.open span{
			background: none;
		}
		.menu-trigger.open span::after,
		.menu-trigger.open span::before{
			background: #019bd9;
			background: #5B5E66;}
		
		.menu-trigger.open span::before{
			transform: rotate(-45deg);
			top: 0;
		}
		.menu-trigger.open span::after{
			transform: rotate(45deg);
			top: 0;
		}
		
		.page{
			min-width: auto;
			width: 100%;
			
		} 
		.page .inner .contents{
			padding: 10px;
		}
		
		.page .mv, .page .mv .bg {
						height: 90vh;
		}
		
		.pc-footer{min-width: auto;}
		.breadcrumb ul {padding: .8rem .5rem;}
		
		.wrapper, #header, .header, .pc-footer {
			min-width: auto;
		}
		

		
		
}