@charset "utf-8";
/* @import url("color.css"); */
:root {
	--blue: #0099D9;
	--orange: #F08300;	
	--glay: #595757;	
	--green: #00A73C;	
	--pink: #EB6EA5;
	--red: #D24434
}
html, body {
	font-family: Roboto, 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Helvetica, Arial, sans-serif;
	font-weight: 400;
	background: #F6F8F6;}
body {
	font-size: 1.4rem;
}	
.content-wrapper{display: flex;}
.row {display: flex;flex-direction: row; }
#header{min-width: 980px;}
#header{min-width: 1080px;}

.content-wrapper.no-side{
	/* max-width: 1240px; */
	margin: 0 auto;}
	
	.viewSP{display: none!important;}
	.viewPC{display: block!important;}

/* ---- サービスメニュー ----*/
.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;
}
.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(232px - 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;
	}

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.chat::before,
a.chat::before{-webkit-mask-image:url("../images/icon/icon_ks_chat.svg");mask-image: url("../images/icon/icon_ks_chat.svg");}
.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");}
.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");}
.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");}
.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");}
.copy h2.sort::before,
a.sort::before{-webkit-mask-image:url("../images/icon/icon_nayose.svg");mask-image: url("../images/icon/icon_nayose.svg");}
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");}
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.close .submenuBox ul li{
transition: none;
min-width: 192px;
}

.menu-box.close li.dropBtn.active{
	position: relative;
}
.menu-box.close li.dropBtn .submenuBox{
	position: absolute;
	top: 0;
	left: calc(72px - 32px);
	padding: 6px 10px;
	visibility: hidden;
}
.menu-box.close li.dropBtn.active .submenuBox{
	visibility:  visible;
	z-index: 9999;
	transition: all 0.4s ease-out;
	box-shadow: 0 0 2px 1px rgba(51, 51, 51, 0.15);
	background: #fff;
	border-radius: 6px;
}
.close .menu-content ul.menu li.dropBtn.active .submenuBox li a{
	width: auto;
	padding-left: 0;
	display: flex;
justify-content: center;
align-items: center;
}
.close .menu-content ul.menu li.dropBtn.active .submenuBox li a span{display: block} */

/*----  コンタクトメニュー  ----*/
.menu-box ul.contact {justify-content: space-between;}
.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-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);
}
	
/*----  コンテンツ  ----*/
.page{
	width: 100%;
	margin-bottom: 60px;
	/* min-height: 100vh; */
}

@media (max-width: 1080px){
	.page{min-width: calc(1080px - 232px);}
	.page.open{min-width: calc(1080px - 72px);}
	.pc-footer .footer_in {min-width: 1080px;}
	
	.page{margin-bottom: 20px;}
	.pc-footer .ft_menu .copyright {
					margin-top: 0;
	}
	
	.pc-footer .ft_menu {padding: 12px 0;}

.page .mv{
	position: relative;
	width: 100%;
}
.page .mv.top{
	height: auto;
}
.page .mv.fig{
	height: auto;
}
.page .mv img.bg{
	width: 100%;
	box-shadow: 0px 2px 4px 0px rgb(51 51 51 / 10%);
}


/* .page h2,
.page h3,
.page h4,
.page h5,
.page p,
.page figure{text-align: center;} */



/* ページコピー */
.page .mv .copy{
	position: absolute;
	top: 98px;
	left: 70px;
	top: calc(106px / 12.4 * 9.8 );
	left: calc(75px / 12.4 * 9.8 );
	line-height: 1;
}
.page .mv .copy img{
	width: 35px;
	margin-bottom: 16px;
	width: calc(35px / 12.4 * 9.8 );
	margin-bottom: calc(18px / 12.4 * 9.8 );
}
.page .mv .copy h2,
.page .mv .copy h3{font-weight: 400;}
.page .mv .copy h2{
	font-size: 1.9rem;
	padding-left: 24px;
	margin-bottom: 18px;
	font-size: calc(24px / 12.4 * 9.8 );
	padding-left: calc(30px / 12.4 * 9.8 );
	margin-bottom: calc(24px / 12.4 * 9.8 );
}
.page .mv .copy h3{ 
	line-height: 1.4;
font-size: 14px;
	margin-bottom: 14px;
	font-size: calc(20px / 12.4 * 9.8 );
		margin-bottom: calc(20px / 12.4 * 9.8 );
}
.page .mv .copy p{
	line-height: 1.5;
	font-size: 11px;
	font-size: calc(15px / 12.4 * 9.8 );
}
/* 1240 = 232 + 1008 */
@media (min-width: 980px){
	.page .mv .copy{
		top: calc(106vw / 10.08* 0.75);
		left: calc(75vw / 10.08* 0.75);
	}
	.page .mv .copy img{
		width: calc(35vw / 10.08 * 0.75);
		margin-bottom: calc(18vw / 10.08 * 0.75);
	}
	.page .mv .copy h2{
		font-size: calc(24vw / 12.4);
		padding-left: calc(30vw / 12.4);
		margin-bottom: calc(22vw / 12.4);
		font-size: calc(24vw / 10.08 * 0.75);
		padding-left: calc(30vw / 10.08	* 0.75);
		margin-bottom: calc(24vw / 10.08	* 0.75);
		/* font-size: calc(18vw / 10.08);
		padding-left: calc(26vw / 10.08);
		margin-bottom: calc(18vw / 10.08); */
	}
	.page .mv .copy h3{ 
		font-size: calc(20vw / 10.08 * 0.75);
		margin-bottom: calc(20vw / 10.08 * 0.75);
	}
	.page .mv .copy p{
		font-size: calc(15vw / 10.08 * 0.75);
	}
}

/* page */
.page .inner{
	/* background: #fff; */
	margin: 24px;
}
.page .inner{
	margin-left: auto;
	margin-right: auto;
	max-width: calc(1015vw / 12.8);
	/* max-width: calc(1032vw / 12.8 * 960 / 1032); */
}
.page.open .inner{
	max-width: calc(1080vw / 12.4);
	max-width: calc(960vw / 12.4);
	max-width: calc(1032vw / 12.8);
}
.page .inner .contents{
	padding: 48px;
}
.contents.function h2{
	text-align: left;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	color: #333333;
	letter-spacing: 0.02em;
	padding: 0px 0px 0px 20px;
	margin-bottom: 32px;
	border-left: 3px solid #17AFEC;
}

/* タブ */
.tab {
	display: flex;
	flex-direction: row;
	text-align: center;
	background-color: #fff !important;
	margin: 0 !important;
	gap: 12px;
}
.tab__item {flex: 1;}
.tab__link {
	position: relative;
	text-decoration: none;
	color: #444;
	font-size: 14px;
	font-size: 1.4rem;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 8px 0px;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	border-radius: 4px;
	border-color: #F6F8F7;
	border-radius: 4px 4px 0px 0px;
}
.tab__link img{
	margin-right: 0.5rem;
	width: 20px;height: 20px;
}
.tab__link:hover {	background: #F6F8F7;}
.tab__link.on{
	background: #F6F8F7;
} 
.tab__link.on:before {
	width: 50%;
}
.tab__link.on:after {
	width: 50%;
}
.tab-body {
	position: relative;
	height: fit-content;
	padding: 24px;
	background: #F6F8F7;
}
.tab-body__item {
	position: absolute;
	position: relative;
	width: 100%;
	width: auto;
	opacity: 0;
	height: 0;
	border-radius: 5px;
	transition: all 0.1s ease-out;
	display: none;
}
.tab-body__item.on {
	display: block;
	opacity: 1;
	height: auto;
	background: #FFFFFF;
}
.tab-body__item .grid-box{		padding: 0 48px 48px;}
.tab-body__item h3{padding-top: 48px;margin: 0 48px;}

/* 機能一覧 */
.func-block .grid-box{
	display: grid;
	gap: 72px;
	margin-bottom: calc(72px - 48px);
}
.tab-body h3 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	font-weight: 700;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #06A8E9;
}
.tab-body h3:before,
.tab-body h3:after {
		position: absolute;
		content: '';
		border-top: solid 1px #06A8E9;
		width: 36%;
}
.tab-body h3:before {left: 0;}
.tab-body h3:after {right: 0;}
.grid-box .box{
	display: grid;
	gap: 24px;
	width: 100%;
	height: auto;
	grid-template-areas:
			"txt fig";
	grid-template-rows: 1fr;
	grid-template-columns: 	1fr 240px;
}
.grid-box .box .txt{
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.7;
	letter-spacing: 0.02em;
}
.grid-box .box .txt h4{
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.0;
	letter-spacing: 0.02em;
	margin-bottom: 2.0rem;
}
.grid-box .box .txt h4 img{
	width: 20px;
	height: 20px;
	margin-right: 0.5rem;
}
.grid-box .box .fig{}
.grid-box .box .fig img{
	width: 100%;
	border: 1px solid #eee;
	border-radius: 6px
}
.page {
	background-image: url(../../lp/images/case-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: right top ;
}

#plan,
#case,
#column,
#faq,
#support {padding: 60px 0 40px;}

.page #plan h2,
.page #case h2,
.page #column h2,
.page #faq h2,
.page #support h2{
font-weight: 800;
font-size: 6.0rem;
line-height: 110%;
letter-spacing: 0.03em;
margin-bottom: 12px;
text-align: center;
}
.page #plan h2.mini,
.page #case h2.mini,
.page #column h2.mini,
.page #faq h2.mini,
.page #support h2.mini{
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
}
.page #plan h3,
.page #case h3,
.page #column h3,
.page #faq h3,
.page #support h3{
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 0.1em;
margin-bottom: 60px;
color: #AAAAAA;
text-align: center;
}

/* 料金プラン */
#plan {
	/* background-image: url(../../lp/images/case-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: right top ; 
	padding: 120px 0 40px;*/
}
#plan h4,
#plan h5,
#plan p,
#plan figure{text-align: center;}
#plan h2{
font-weight: 900;
font-size: 6.0rem;
line-height: 110%;
letter-spacing: 0.03em;
margin-bottom: 12px;
}

#plan h4{
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
}
#plan .row{
	max-width:624px;
	max-width:632px;
	margin: 0 auto;
	padding: 0 0 90px 0;
	gap: 24px;
	flex-wrap: wrap;
	align-content: stretch;
}
#plan .row div{
	background: #fff;
	gap: 10px;
	max-width: 296px;
	max-width: 300px;
	border-radius: 10px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
	box-shadow: inset -0px -0px 4px rgba(0,0,0,.15);
}
#plan .row div.full{
	max-width: none;
	width: 100%
}
#plan .row div.full .inner{
	max-width: none;
}
#plan .row .chat.full{
	margin-top: 30px;
	background: #f8f8f8;
	/* border: 2px solid #ececec; */
	border: none;
	margin-bottom: 30px;
}
#plan .row .chat.full .inner{
/* background: #f8f8f8; */
padding-top: 10px;
padding: 10px 20px 20px;
}
#plan .row .chat.full h2{
	font-size: 16px;
	line-height: 1.6;
/* color: var(--orange); */
	padding: 10px 0 10px;
}
#plan .row .chat.full h3{color: #4C4C4C;}
#plan .row .chat.full h4 {
				border-bottom: 2px solid #ccc;
}
#plan .row div .inner{
	padding: 40px 32px;
	box-shadow: none;
}
#plan .row figure{margin: 0;}
#plan .row img{width: 32px;}
#plan .row h3{
font-weight: 700;
font-size: 3.6rem;
line-height: 100%;
letter-spacing: 0.02em;
padding: 20px 0;
margin-bottom: 0;
color: #333;
}
#plan .row h4{
font-weight: 700;
font-size: 14px;
line-height: 16px;
padding: 0 0 20px 0;
}
#plan .row h5{
font-size: 18px;
line-height: 26px;
padding: 20px 0;
letter-spacing: 0;
}
#plan .row p{
	text-align: left;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 160%;
	letter-spacing: 0.02em;
}
#plan .row div.chat{
border: 2px solid #FFFFFF;
}
#plan .row div.crm{
border: 2px solid var(--orange);;
}
#plan .row div.chat,
#plan .row div.chat h3{
color: #4C4C4C;
}
#plan .row div.chat h4{
border-bottom: 2px solid #ccc;
}
#plan .row div.crm,
#plan .row div.crm h3{
	color: var(--orange);
}
#plan .row div.crm h4{
border-bottom: 2px solid var(--orange);
}
/* #plan .row .crm.full h5,
#plan .row .crm.full p{
	color: #4C4C4C;
} */
#plan .row div .chat.full .col{
	display: flex;
	width: 100%;
	max-width: none;
	gap: 16px;
	border: none;
	box-shadow:none;
}
#plan .row div .chat.full .col div{max-width: none;}
#plan .row div .chat.full .col .left{width: 25%}
#plan .row div .chat.full .col .right{width: 75%}
#plan .row div .chat.full div{
	background: none;
	box-shadow:none;
}
#plan .row div .chat.full .col .left h3{
	padding: 10px 0;
}
#plan .row div .chat.full .col .left h4{
	border: none;
	padding: 0;
}
#plan .row div .chat.full .col .right h5{
	font-size: 16px;
	line-height: 1.6;
	padding: 0;
	text-align: left;
	margin-bottom: 10px;
}
#plan .row div .option,
#plan .row .option h5,
#plan .row .option p{
color: #4C4C4C;
}
#plan .row .option h3{
font-weight: 700;
font-size: 2.4rem;
line-height: 100%;
letter-spacing: 0.02em;
padding: 20px 0;
margin-bottom: 0;
color: #4C4C4C;
}
#plan .row .option h4{
font-weight: 700;
font-size: 14px;
line-height: 16px;
padding: 20px 0;
border-bottom: 2px solid #ccc;
color: #4C4C4C;
}
#plan .row .crm .btn{
	display: flex;
}
#plan .row .crm .btn a.Btn_inBox{
	box-shadow:none;
	box-sizing: border-box;
	display: inline-flex;
	padding: 9px 80px;
	margin: 0 auto;
	background: #0379D5;
	border: 1px solid #0379D5;
	color: #fff;
	font-size: 1.8rem;
	text-decoration: none;
	border-radius: 40px;	
}
#plan .row .crm .btn a.Btn_inBox:hover{
	background: #fff;
	border-color: #0379D5;
	color: 	#0379D5;
}

/* 導入事例 */
#case{}

/* コラム */
#column{}

/* よくある質問 */
#faq{}

/* ユーザーサポート */
#support{}

/* お問い合わせ */
#contact{}




@media (min-width: 1280px){
.header .header-in{max-width: none;}
}

@media (max-width: 1240px){
	.page .inner{
		/* margin-left: 20px;
		margin-right: 20px; */
	}
	.page.open .inner{
		margin-left: auto;
		margin-right: auto;
		max-width: 960px;
	}
}

@media (max-width: 1080px){
	.page.open .inner{
		margin-left: 20px;
		margin-right: 20px;
	}
	
	
}

.footer_common {padding: 30px 0;}
.footer_common ul.contact{
	display: flex;
	gap: 12px;
	justify-content: center;
}
.pc-footer{z-index: 10000;}
/* layout-gnav-add */
.pc-footer{
	min-width: 980px;
	min-width: 1080px;
	/* margin-top: 60px; */
}
.breadcrumb{
	background: none;
	width: auto;
}
.breadcrumb ul{
	padding: 12px 24px 0;
	max-width: 1240px;
	max-width: 960px;
	max-width: calc(960vw / 12.4);
}
body.contact .header-in{
	height: 36px;
}
body.contact .gnav,
body.contact .pc-footer .footer_in #page-top,
body.contact .pc-footer .footer_in .footer-box,
body.contact .pc-footer .ft_menu .footer_in .flex{
	display: none;
}
body.contact .pc-footer .ft_menu .flex{
	/* justify-content: center; */
	justify-content: flex-end;
}

@media (max-width: 768px){
	#header{display: none;}
	.header {}
	.viewSP{display: block!important;}
	.viewPC{display: none!important;}

	/* メニューボックス */
	#menuBox{z-index: 10002;}
	.menu-box	{}
	.contents-header{height: 40px;}
	/* .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;
	}
	.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);
	}
	.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: 0;
		left: auto;
		bottom: auto;
		text-align: center;
		vertical-align: middle;
		zoom: 1;
	}
	.menu-trigger span{
		position: absolute;
		width: 25px;
		height: 2px;
		background: #019bd9;
		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;
		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;}
	.menu-trigger.open span::before{
		transform: rotate(-45deg);
		top: 0;
	}
	.menu-trigger.open span::after{
		transform: rotate(45deg);
		top: 0;
	}
	.page{min-width: auto} 
	.page .inner .contents{
		padding: 10px;
	}
	.page .mv .copy {
		top: calc(38vw / 7.68);;
		left: calc(70vw / 7.68);
	}
	.copy h2::before {
		width: 20px;
		height: 20px;
	}
	.pc-footer{min-width: auto;}
	.breadcrumb ul {padding: .8rem .5rem;}
	.pc-footer .footer_in {min-width: auto;}
	
	/* 料金プラン*/
	#case,
	#merit,
	#plan,
	#support,
	#contact {padding: 60px 10px 30px;}
	#function h2,
	#case h2,
	#merit h2,
	#plan h2,
	#support h2,
	#contact h2{font-size: calc(80vw / 7.68);}
	#plan .row{padding-bottom: 30px;}
	#plan .row div{max-width: none;margin: 0 auto;
		/* width: 95%; */
	}
	#plan .row div .inner {padding: 30px 20px;}
	#plan .row div.crm {margin-bottom: 30px;}
	#plan .row div .chat.full .col{
		display: flex;
		flex-direction: column;
	}
	#plan .row div .chat.full .col .left,
	#plan .row div .chat.full .col .right {width: 100%;}
	#plan .row div .chat.full .col .left h4 {
		border-bottom: 2px solid #ccc;
		padding: 20px 0;
	}
}