@charset "utf-8";
@import url(https://use.fontawesome.com/releases/v6.2.0/css/all.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

html {
	scroll-behavior: auto;
}

/* CSS Document */
/*
	初期化
----------------------------------------------------------------------------------------------------*/
html,body,div,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }

html {font-size: 62.5%;}
body {
font-family: Roboto, 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Helvetica, Arial, sans-serif;
	font-size: 1.4rem;
font-weight: 400;
background: #F6F8F6;
letter-spacing: 0.02em;
color: #333333;
/* グローバル値 */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: unset;
}

table,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;vertical-align:top;border-collapse:separate;}

ul{list-style:none;}

caption{text-align:left;padding-bottom:5px;}

p,dl,dt,dd{padding:0;margin:0;}
ul li,ol li{list-style:none;}

:root ol, :root ul {
	margin: 0;
	padding: 0;
}
:root blockquote {
	margin: 0;
}

/* a,a:link,a:active,a:hover,a:visited{    color: #00afb9;} */

/*div,p,dt,dd,li,td,th,h1,h2,h3,h4,h5{word-wrap: break-word;word-break: break-all;white-space:normal !important;}*/

em{font-style:normal;}

img{vertical-align:top;}

hr{padding:0;margin:0;border:none;}

/* html 5 */
header,footer,nav,article,section,aside,time,figure{display:block;}
[hidden],command,datalist,menu[type=context],rp,source{display: none;}

/*
	テキスト
----------------------------------------------------------------------------------------------------*/



/* weight */
.fwB{font-weight: 700;}
.em{font-weight: 600;}


/* margin */
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}

.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}

/* padding */

.pad10{padding: 10px;}
.pad20{padding: 20px;}
.pad30{padding: 30px;}
.pad40{padding: 40px;}
.pad50{padding: 50px;}
.pad60{padding: 60px;}


.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}


.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}


.fs36{font-size: 36px!important;}
.fs44{font-size: 44px!important;}
.fs60{font-size: 60px!important;}

/* color */
.alrtClr{color:#d21 !important;}
.alrtClr02{color:#07b !important;}

/*
	インライン要素配置
----------------------------------------------------------------------------------------------------*/
.taL { text-align:left !important; }
.taR { text-align:right !important; }
.taC { text-align:center !important; }

.vaT { vertical-align:top !important; }
.vaM { vertical-align:middle !important; }
.vaB { vertical-align:bottom !important; }

/* Clearfix
----------------------------------------------------------------------------------------------------*/
.clearfix:after {
				content:" ";
				display:block;
				clear:both;
}


.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}


:root {
	--blue: #0099D9;
	--orange: #F08300;	
	--glay: #595757;	
	--green: #00A73C;	
	--pink: #EB6EA5;
	--red: #D24434
}
.content-wrapper{display: flex;}
.row {display: flex;flex-direction: row; }
#header {
	position: fixed;
	z-index: 10;
	min-width: auto;
}
.page{
	padding-top: 52px;
}

/* header */
.header .header-outline {background: #fff;}
.header .header-outline,.header .header-in{height: 52px;padding: 0 20px;} 
.header .header-gnav{	box-shadow: none;}
.header .header-gnav{font-size: 1.2rem;}
.header ul.gnav>li a{color: #333;}
.header .logo,
.header .logo img{width: 220px;}

.header ul.gnav>li.inquiry a {
				border: none;
				background-color: #17AFEC;
				color: #fff;
}

.header ul.gnav>li a:hover,
.header ul.gnav>li.inquiry a:hover {
	background-color: #e2eff5;
	color: #17AFEC;
}




/* page */
.page {
	min-height: auto;
	margin-bottom: 0;
}
.page .inner{
	margin: 0 auto;
	background: none;
	max-width: 1040px;
	max-width: 1032px;
}
.page .mv,
.page .mv .bg{
	height: calc(500vw / 12.4);
}

.page .mv .bg .rotate {
	top: calc(-110vw / 12.4);
	right: calc(-120vw / 12.4);
}

.mvbg p {
				width: calc(38vw / 12.4);
				height: calc(38vw / 12.4);
				width: calc(35vw / 12.4);
				height: calc(35vw / 12.4);
}

.page .mv .copy{
	text-align: center;
	padding-left: calc(100vw / 12.4);
}
.page .mv .copy h2{
	/* padding-left:0;
	text-align: left;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1.44;
	margin-bottom: 16px; */
	padding-left:0;
	margin-bottom: 16px;
	font-weight: 600;
	font-size: 28px;
	line-height: 100%;
	letter-spacing: 0.02em;

}
.page .mv .copy h2::before{display: none;}

.page .mv .copy h3{
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0.02em;
}

.page .mv .copy p{padding-left:0;text-align: left;
font-size: 1.4rem;
line-height: 1.6;
}

#main {
	padding: 105px 0 150px;
	overflow: hidden;
}
#main h2{
font-weight: 900;
font-size: 7.2rem;
line-height: 108%;
letter-spacing: 0.03em;
color: #4C4C4C;
margin-bottom: 30px;
}
#main h2 span{
	font-size: 6.0rem;
	line-height: 1.0;
}

#main h3{
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0px;
background: #D24434;
border-radius: 4px;
font-weight: 700;
font-size: 1.6rem;
line-height: 1;
color: #FFFFFF;
margin-bottom: 10px;
}



#main h4{
font-weight: 700;
font-size: 3rem;
line-height: 140%;
color: #D24434;
margin-bottom: 10px;
}

#main P{
font-weight: 400;
font-size: 1.6rem;
line-height: 1.8;
letter-spacing: 0.02em;
margin-bottom: 20px;
}
#main P.space{
	letter-spacing: 0.09em;
}
#main P span{
	font-weight: 700;
	color: #D24434;}

#main .row{
		justify-content: space-between;
		align-items: flex-end;
	}
	#main .row .left{
		width: 100%;
		max-width: 380px;
	}
	#main .row .fig{
		width: 100%;
		max-width: 560px;
		padding-bottom: 20px;
	}


#function{
		padding: 0 0 70px 0;
		background-color: var(--orange);
		/* height: calc(520vw / 12.4); */
		height: auto;
		
	}
#function	{
	background-image: url(../images/function-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: left bottom;
}
#function	.functionBar{
	display: flex;
}

#function	.functionBar >div{
	width: 100%;
	height: 16px;
	content: '';
}
#function	.functionBar div:nth-child(1){background-color: var(--blue);}
#function	.functionBar div:nth-child(2){background-color: var(--orange);}
#function	.functionBar div:nth-child(3){background-color: var(--glay);}
#function	.functionBar div:nth-child(4){background-color: var(--green);}
#function	.functionBar div:nth-child(5){background-color: var(--pink);}
#function	.functionBar div:nth-child(6){background-color: var(--red);}

#function	.inner{
	padding-top: 90px;
	position: relative;
	z-index: 1;
}

#function .row{
	justify-content: space-between;
	display: flex;
	align-items: stretch;
}
#function .row .box.btns{
	width: 100%;
	max-width: 380px;
}
#function .row .box.exp{
	width: 100%;
	max-width: 560px;
}
#function .row .box.exp figure{
	margin: 0;
}
	
	
.tabs{
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* align-items: flex-start; */
	/* padding: 0px; */
}
.tabs li{
	transition: all 0.4s ease-out;
	display: flex;
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 40px;
	text-decoration: none;
	color: #F08300;
	font-size: 16px;
	font-size: 1.6rem;
	cursor: pointer;
	padding: 12px 20px;
	position: relative;
	/* width: 100%; */
	/* box-sizing: border-box; */
	/* position: relative; */
}
.tabs li.active{
	background: #F08300;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.4s ease-out;
}

.tabs li:after {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	top: 10px;
	right: 14px;
	background-image: url(../images/arrow_orange.svg);
}
.tabs li.active:after {
		background-image: url(../images/arrow_orange_on.svg);
	}

.box.exp{
	background: #FFFFFF;
	border-radius: 10px;}

.box.exp .contents {padding: 0;}
.box.exp .contents li{	
	transition: all 0.4s ease-out;
padding: 48px;
}
.box.exp .contents li{display:none;}
.box.exp .contents .active {display:block;}

.box.exp .contents h3{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0px 0px 4px;
	gap: 10px;
	border-bottom: 1px solid #CCCCCC;
}


.box.exp .contents p{
	padding: 12px;
	background: #F8F8F8;
}

.tabs li{
	position: relative;
	padding-left: 40px;
}

.tabs li:before {
	position: absolute;
	content: '';
	background: #F08300;
	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;
	width: 20px;
	height: 20px;
	top: 10px;
	left: 14px;}
.tabs li.active:before {	background: #fff;}

.tabs li.meisi::before{-webkit-mask-image:url("../../common/images/icon/icon_ks_meisi.svg");mask-image: url("../../common/images/icon/icon_ks_meisi.svg");}
.tabs li.custom::before{-webkit-mask-image:url("../../common/images/icon/icon_ks_custom.svg");mask-image: url("../../common/images/icon/icon_ks_custom.svg");}
.tabs li.nayose::before{-webkit-mask-image:url("../../common/images/icon/icon_nayose.svg");mask-image: url("../../common/images/icon/icon_nayose.svg");}
.tabs li.chat::before{-webkit-mask-image:url("../../common/images/icon/icon_ks_chat.svg");mask-image: url("../../common/images/icon/icon_ks_chat.svg");}
.tabs li.file::before{-webkit-mask-image:url("../../common/images/icon/icon_ks_file.svg");mask-image: url("../../common/images/icon/icon_ks_file.svg");}




#function .mv {
	height: calc(580vw / 12.4);
				overflow: hidden;
				background: none;
				position: absolute;
}
#function .mv .bg {
				display: flex;
				flex-direction: column;
				align-content: flex-start;
				flex-wrap: wrap;
}
#function .mv .bg .rotate {
				transform: rotate(-135deg);
				bottom: calc(-140vw / 12.4);
				left: calc(-110vw / 12.4);
				top: auto;
				right: auto;
				position: relative;
				opacity: 0.4;
}

#function h2{
font-weight: 900;
font-size: 6.0rem;
line-height: 110%;
letter-spacing: 0.03em;
color: #fff;
margin-bottom: 12px;
}
#function h3{
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 40px;
}

#function .box.btns p{
font-weight: 400;
font-size: 1.6rem;
line-height: 160%;
letter-spacing: 0.02em;
color: #fff;
margin-bottom: 40px;
}

#function .box.exp h3,
#function .box.exp p{
	color: #4C4C4C;
	margin-bottom: 10px;
}
#function .box.exp h3{font-weight: 400;}
#function .box.exp p{
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
	letter-spacing: 0.02em;
}

#function .box.exp figure img{
	width: 100%;
}
#case {
	background-image: url(../images/case-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: right top ;
	padding: 120px 40px 100px;
}
#case h2,
#case h3,
#case p{
	text-align: center;
}
#case h2{
font-weight: 900;
font-size: 6.0rem;
line-height: 110%;
letter-spacing: 0.03em;
margin-bottom: 12px;
}
#case h3{
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 0.1em;
margin-bottom: 40px;
color: #AAAAAA;
}

#case .row{
	max-width:880px;
	margin: 0 auto;
	padding: 60px 0px;
	gap: 24px;
	flex-wrap: wrap;
	align-content: stretch;
}
#case .row div{
	background: #fff;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	gap: 10px;
	max-width: 277.33px;
}
#case .row div .inner{padding: 28px;box-shadow: none;}
#case .row figure{
	margin: 0;
	background: #f8f8f8;
	padding: 36px 0;
	display: grid;
	justify-content: center;
}
#case .row img{
	width: 100%;
	width: 48px;
}

#case .row h3{
font-weight: 700;
font-size: 2.0rem;
line-height: 100%;
letter-spacing: 0.02em;
padding: 20px 0;
margin-bottom: 0;
color: #333;
}
#case .row p{
	text-align: left;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 160%;
	letter-spacing: 0.02em;
}


#merit {
	background: #fff;
	background-image: url(../images/merit-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: left bottom ;
	padding: 120px 40px;
}

#merit .row{
	justify-content: space-between;
	display: flex;
	align-items: stretch;
	flex-direction: row;
}
#merit .row .box.btns{
	width: 100%;
	max-width: 380px;
	font-size: 1.6rem;
	line-height: 1.6;
}
#merit .row .box.exp{
	width: 100%;
	max-width: 560px;
}
#merit .row .box.exp figure{
	margin: 0;
}

#merit h2{
font-weight: 900;
font-size: 6.0rem;
line-height: 110%;
letter-spacing: 0.03em;
margin-bottom: 12px;
}
#merit h3{
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 0.1em;
margin-bottom: 40px;
color: #AAAAAA;
}


#merit .row .box.exp .row{
	max-width: 560px;
	margin: 0 auto;
	/* padding: 60px 0px; */
	gap: 12px;
	flex-wrap: wrap;
	align-content: stretch;
}
#merit .row .box.exp .row div{min-height: 23em;}
#merit .row .box.exp .row div:nth-child(1){background: var(--blue);}
#merit .row .box.exp .row div:nth-child(2){background: var(--orange);}
#merit .row .box.exp .row div:nth-child(3){background: var(--glay);}
#merit .row .box.exp .row div:nth-child(4){background: var(--green);}
#merit .row .box.exp .row div:nth-child(5){background: var(--pink);}
#merit .row .box.exp .row div:nth-child(6){background: var(--red);}

#merit .row .box.exp .row div.inner{
	padding: 24px;
	background: none;
	color: #fff;
}

#merit .row .box.exp div {
max-width: 178px;
text-align: center;
border-radius: 5px;
}

#merit .row .box.exp div figure{
padding: 24px 0 10px;
border-top: 2px solid #fff;
}

#merit .row .box.exp div h3{
font-size: 1.8rem;	
color: #fff;
margin-bottom: 12px;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.02em;


}
#merit .row .box.exp div p{
text-align: left;	
font-size: 1.4rem;
font-weight: 400;
line-height: 140%;
letter-spacing: 0.02em;
}

#plan {
	background-image: url(../images/case-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: right top ;
	padding: 120px 0 40px;
}

#plan h2,
#plan h3,
#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 h2.mini{
	font-size: 3.2rem;
	font-weight: 700;
}
#plan h3{
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 0.1em;
margin-bottom: 60px;
color: #AAAAAA;
}
#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;
}


#support {
	background: #fff;
	background-image: url(../images/merit-bg.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: left bottom ;
	padding: 120px 40px 140px;
}

#support .row{
	justify-content: space-between;
	display: flex;
	align-items: stretch;
}
#support .row .box.btns{
	width: 100%;
	max-width: 380px;
}
#support .row .box.exp{
	width: 100%;
	max-width: 560px;
}

#support h2{
font-weight: 900;
font-size: 6.0rem;
line-height: 110%;
letter-spacing: 0.03em;
margin-bottom: 12px;
}
#support h3{
font-weight: 700;
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 0.1em;
margin-bottom: 40px;
color: #AAAAAA;
}

#support .row .box.exp .row div{
	background: #fff;
	gap: 8px;
	border-radius: 5px;
	background: #F8F8F8;
	max-width: 274px;
}
#support .row .box.exp .row div .inner{
	padding: 48px 24px;
}

#support .row .box.exp .row div .inner h3{
	box-sizing: border-box;
	padding: 0px 0px 24px;
	gap: 10px;
	border-bottom: 1px solid #CCCCCC;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	text-align: center;
	letter-spacing: 0.02em;
	
	color: #333333;

}


#support .row .box.exp .row div .inner p,
#support .row .box.exp .row div .inner ul li{
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	letter-spacing: 0.02em;
	color: #333333;
}
#support .row .box.exp .row div .inner ul {
	margin-left: 1em;
}
#support .row .box.exp .row div .inner ul li{
	padding-bottom: 5px;
}
#support .row .box.exp .row div .inner ul li:before{
	content: '●';
	margin-left: -1em;
}
#contact{
	padding: 120px 0;
	
	
	background: #5B5E66;
	
}


#contact .row{
	justify-content: space-between;
	display: flex;
	align-items: stretch;
}
#contact .row .box.btns{
	width: 100%;
	max-width: 380px;
	color: #fff;
	text-align: left;
}
#contact .row .box.exp{
	width: 100%;
	max-width: 560px;
}
#contact .row .box.btns .bg_gray{
	background-color: color(display-p3 0.282 0.29 0.314);
	padding: 16px;
	line-height: 1.2;
	border-radius: 4px;
}
#contact .row .box.btns .bg_gray p{margin-bottom: 0;}

#contact h2{
font-weight: 900;
font-size: 6.0rem;
line-height: 1.0;
letter-spacing: 0.03em;
color: #fff;
margin-bottom: 40px;
}
#contact h3{
font-size: 1.8rem;
color: #fff;
margin-bottom: 1rem;
}
#contact p{
	font-size: 1.6rem;
	line-height: 1.6;
	margin-bottom: 20px;
	color: #fff;
	text-align: left;
}
#contact .btns .row{
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
#contact .btns .row.tel{
	margin-bottom: 30px;
}
#contact .tel span{
	font-weight: 400;
	font-size: 28px;
	line-height: 100%;
	letter-spacing: 0.05em;
	display: block;
}
#contact .btns ul{
	background: #ededed;
	color: #222;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 30px;
	margin-bottom: 30px;
	border-radius: 9px;
}

#contact .btns ul li{
				/* display: flex;
				align-items: flex-start;
				gap: 8px; */
				padding-left: 22px;
				font-size: 1.4rem;
				line-height: 1.4;
				position: relative;
}


#contact .btns ul li:before {
	position: absolute;
	content: '';
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	background: var(--orange);
	background: var(--red);
	background: var(--green);
	background: var(--blue);
	background-image: url(../images/check.svg);
	background-repeat: no-repeat ;
	background-size: cover;
}

#contact .btns .fig{
	display: flex;
	justify-content: center;
}
#contact .btns .fig img{
	width: 100%;
	width: 80%;
	margin-bottom: 30px;
}





#contact .row .box.exp input:not([type="checkbox"]),
#contact .row .box.exp textarea,
#contact .row .box.exp select {
	width: 98%;
				padding: .6rem;
				margin: 0;
				border: none;
				font-size: 14px;
				font-size: 1.4rem;
				border: 1px solid #C4C7C5;
				border-radius: 3px;
				
}

#contact .row .box.exp input:not([type="checkbox"]){
	width: 95%;
}
#contact .row .box.exp .half input:not([type="checkbox"]){
	width: 90%;
}

#contact .row .box.exp textarea{
width: 95%;
}

.plivacyArea iframe {
	width: 	98%;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin: 0 0 10px;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}


#contact .row .box.exp .inner{
	padding: 48px;
}
#contact .row .box.exp .row{
	margin-bottom: 30px;
}
#contact .row .box.exp .row div{
	width: 100%;
}
#contact .row .box.exp,
#contact .row .box.exp h3 {
color: #2E3130;
}
#contact .row .box.exp h3 {
	font-size: 14px;
	line-height: 100%;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
}
#contact .row .box.exp h3 span{
	padding: 4px 8px;
	margin-left: 0.6rem;
	border: 1px solid #B62226;
	border-radius: 20px;
	font-size: 10px;
	line-height: 100%;
	color: #B62226;
}


#contact .row .box.exp input[type=checkbox] {
				position: relative;
				cursor: pointer;
				width: 16px;
				height: 16px;
				margin-top: 	0rem;
				border-radius: 2px;
				background-color: #fff;
				border: 1px solid #8E918F;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				vertical-align: middle;
				transition: .3s;
				margin-bottom: 0.2rem;
				box-sizing: border-box;
}
#contact .row .box.exp ul{
	margin-top: 8px;
}
#contact .row .box.exp li{
	margin-bottom: 8px;
}

#contact .row .box.exp input[type=checkbox]:checked {
				background: #27c374;
				border: 1px solid #27c374;
}

#contact .row .box.exp input[type=checkbox]:checked::before {
				position: absolute;
				padding: 2px;
				color: white;
				font-family: "Font Awesome 5 Free";
				font-weight: 700;
				font-size: 10px;
				content: '\f00c';
}

#contact .row .box.exp .nodis{
	display: none;	
}
#plan .row .crm .btn,
#contact .row .box.exp .btn {
	display: flex;
}
#plan .row .crm .btn a.Btn_inBox,
#contact .row .box.exp .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,
#contact .row .box.exp .btn a.Btn_inBox:hover{
	background: #fff;
	border-color: #0379D5;
	color: 	#0379D5;
}


#contact .row .box.exp .btn a.Btn_inBox.disable {
				background: #d2d2d2;
				border: 1px solid #D2D2D2;
				pointer-events: none;
}

.g-recaptcha, 
#contact p#warning {
	display: grid;
	justify-content: center;
	font-size: 1.4rem;
	color: #B62226;
}

.errorValName{
	color: #B62226;
	line-height: 1.6;
	font-weight: 700;
}

.page .mv .copy img {
				width: calc(180vw / 12.4);
				margin-bottom: calc(25vw / 12.4);
}

p.copyright{
	font-size: 1.2rem;
}



.bBt,
div.bBtn {
				width: auto;
				display: flex;
				justify-content: center;
				margin-top: 1rem;
}
.
a.btn-c {}


.pc-footer .ft_menu .footer_in {
max-width: 1200px;
}

.pc-footer{min-width: 1080px;}

@media (min-width: 980px) {
				.page .mv .copy img {
								width: calc(180vw / 9.8);
								margin-bottom: calc(25vw / 9.8);
				}
}
@media (min-width: 1080px){
	.page .mv .copy {
		top: calc(140vw / 12.4);
		left: calc(115vw / 12.4);
	}
	.page .mv .copy img {
		width: calc(180vw / 12.4);
		margin-bottom: calc(25vw / 12.4);
	}
}

@media (min-width: 1280px){
	
}

@media (max-width: 1240px){

}

@media (max-width: 1080px){
	
	/* #main .row .left {
					max-width: 45%;
	}
	#main .row .fig {
	max-width: 50%;
} */
	/* #main h2{
		font-size: calc(88vw / 10.8);
	}
	#main h2 span {
		font-size: calc(72vw / 10.8);
	}
	.page .inner {
		padding: 0 calc(10vw / 3.75);
	} */
	.page {
		min-width: 1080px;
	}
	
	.page .mv .bg .rotate {
		top: -120px;
		right: -120px;
	}
	.page .mv .copy {
		top: 120px;
		left: 100px;
		padding-left: 90px;
	}
	.page .mv .copy img {
		width: 160px;
		margin-bottom: 22px;
	}
	
	.page .mv, .page .mv .bg {
		height: 440px;
	}
	.mvbg p {
					width: 32px;
					height: 32px;
	}
}


@media (max-width: 768px){

	.page {width: 100vw;min-width: auto;padding-top: 0;}
	.page .inner {}
	.page .mv, .page .mv .bg {
			height: calc(400vw / 7.68);
			height: 100vh;;
			height: 90vh;
			/* height: calc(667vw / 3.75); */
	}
	.page .mv .bg .rotate {
					top: calc(-160vw / 7.68);
					right: calc(-130vw / 7.68);
	}
	.mvbg p {
		width: calc(55vw / 7.68);
		height: calc(55vw / 7.68);
	}
	.page .mv .copy {
		padding-left: 0;
			top: auto;
			left: auto;
			top: calc(480vh / 6.67);
			top: calc(780vw / 6.67);
			/* bottom: calc(60vw / 3.75); */
			width: 80%;
			width: 100%;
	}
	
	
	.page .mv .copy h2{font-size: calc(35vw / 7.68);text-align: center;}
	/* .page .mv .copy h3{font-size: calc(22vw / 7.68);} */
	
	.page .mv .copy img {
					width: calc(240vw / 7.68);
					margin-bottom: calc(25vw / 7.68);
	}
	
	#main {
		padding: calc(60vw / 7.68) 0;
		padding: calc(120vw / 7.68) 0;
		width: 100vw;}
	#main .row{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	#main h2 {
		font-size: calc(56vw / 7.68);
		margin-bottom: calc(20vw / 7.68);
		text-align: center;

	}
	#main h2 span {
		font-size: calc(50vw / 7.68);
	}
	#main h3 {
		font-size: calc(30vw / 7.68);
		margin-bottom: calc(10vw / 7.68);
		padding: 8px 0px;
		border-radius: calc(4vw / 7.68);
	}

	#main h4 {
		font-size: calc(56vw / 7.68);
		margin-bottom: calc(30vw / 7.68);
	}
	#main .row .left {
		max-width: none;
		width: auto;
		padding: 0 calc(34vw / 3.75);
	}
	#main .row .fig {
		max-width: none;
		padding-bottom: calc(20vw / 7.68);
	text-align: center;
	}
	#main .row .fig img{
		width: 85vw;
margin: 0 auto;
	}
	

	

	#case,
	#merit,
	#plan,
	#support,
	#contact {
					padding: 60px 10px 30px;
	}
	
	.page #function h2,
	.page #case h2,
	.page #merit h2,
	.page #plan h2,
	.page #support h2,
	.page #contact h2{
		font-size: calc(80vw / 7.68);
	}
	
	#function .row {
		flex-direction: column;
		margin: 0 calc(34vw / 3.75);
		width: auto;
	}
	#function .row .box{
	}
	
	#function .row .box.btns,
	#function .row .box.exp{	max-width: none;}
	#function .row .box.btns{margin-bottom: 20px;}
	#function h2,#function h3{text-align: center;}
	#function .tabs li:after{background-image: url(../images/arrow_orange_down.svg);}
	#function .tabs li.active:after{background-image: url(../images/arrow_orange_down_on.svg);}
	#function .box.exp .contents li{padding: 20px;}
	#function .box.btns p {font-size: 1.4rem;}
	
	#case .row{padding-bottom: 20px;}
	#case .row div {max-width: none;}
	#case p{
		text-align: center;
		font-size: font-size: 1.4rem;;
	}
	
	#case .row div .inner{
		padding: 20px;
	}
	#case .row div .inner.grid{
			display: grid;
			gap: 10px;
			/* column-gap: 5px;
			row-gap: 5px; */
			
			width: auto;
			height: auto;
			/* grid-template-columns: 120px 1fr; */
			grid-template-columns: 1fr 3fr;
			
			align-content: center;
			align-items: center;
	}
	#case .row div .inner.grid h3{
		font-size: calc(40vw / 7.68);
		padding: 0;
		text-align: left;
	}
	#case .row div .inner.grid p{
		grid-column: 1 / 3;	
	}
	
	#case .row figure{
		padding: calc(30vw / 7.68) 0;
	}
	#case .row img{
		width: calc(70vw / 7.68);
	}
	
	
	
	
	
	#merit {
		background-image: url(../images/case-bg.png);
		background-position: right top;
	}
	
	
	#merit .row{flex-direction: column;}
	#merit .row .box.btns{	max-width: none;margin-bottom: 20px;}
	#merit h2,#merit h3,#merit p{text-align: center;}
	#merit .row .box.exp div{max-width: none;}
	#merit .row .box.exp .row div{
		min-height: 14.3em;
	}
	
	#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;
	}
	
	#support .row{flex-direction: column;}
	#support .row .box.btns,
	#support .row .box.exp .row div{	max-width: none;margin-bottom: 20px;}
	#support h2,#support h3{text-align: center;}
	#support .box.exp{background: none;}
	
	
	#contact {padding-bottom: 30px;}
	#contact .row{flex-direction: column;}
	#contact .row .box.btns{order: 2;}
	#contact .row .box.exp{order: 1;}
	

	
	#contact .row .box.btns,
	#contact .row .box.exp{	max-width: none;}
	#contact .row .box.exp .inner{padding: 20px;}
	#contact .row .box.exp p{font-size: 1.4rem;}
	#contact h2,#contact h3{text-align: center;}
	.page #contact .inner{padding: 0 6vw;padding: 0;}
	
	#contact .row .box.exp input:not([type="checkbox"]),
	#contact .row .box.exp textarea,
	#contact .row .box.exp select,
	#contact .row .box.exp label {
					font-size: 16px;
					font-size: 1.6rem;
	}
	#contact .row .box.exp .row div{margin-bottom: 0.5rem;}
	#contact .row .box.exp ul {
					margin-top: 12px;
	}
	#contact .row .box.exp label {line-height: 1.6}
	#contact .row .box.exp input[type=checkbox] {
		width: 24px;
		height: 24px;
	}
	#contact .row .box.exp input[type=checkbox]:checked::before{font-size: 18px;}
	#contact .row .box.exp textarea{width: 95%;}
	#contact .row .box.exp input:not([type="checkbox"]){width: 95%;}
	#contact .row .box.exp .half input:not([type="checkbox"]) {width: 95%;}
	#contact .plivacyArea iframe {width: 98%;}

	.pc-footer .ft_menu{
		padding: 10px 0;
	}
	.pc-footer .ft_menu .copyright {
					margin-top: 0;
	}
	.pc-footer{min-width: auto;}

}





:root {
	--duration: 20s;
	--durationNum: -20s;
}

#function .mvbg p {animation-duration: var(--duration);}

#function .col01{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.03846153846153846); }
#function .col01slow{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.03846153846153846); }
#function .col01fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.03846153846153846); }
#function .col02{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.076923076923077); }
#function .col02fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.076923076923077); }
#function .col02slow{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.076923076923077); }
#function .col03{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.115384615384615); }
#function .col03slow{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.115384615384615); }
#function .col03fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.115384615384615); }
#function .col04{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.153846153846154); }
#function .col04fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.153846153846154); }
#function .col05{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.192307692307692); }
#function .col05fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.192307692307692); }
#function .col06{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.230769230769231); }
#function .col06fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.230769230769231); }
#function .col07{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.269230769230769); }
#function .col07fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.269230769230769); }
#function .col08{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.307692307692308); }
#function .col08fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.307692307692308); }
#function .col09{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.346153846153846); }
#function .col09fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.346153846153846); }
#function .col10{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.384615384615385); }
#function .col10fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.384615384615385); }
#function .col11{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.423076923076923); }
#function .col11fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.423076923076923); }
#function .col12{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.461538461538462); }
#function .col13{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.5); }
#function .col13fast{animation: 	color_orange infinite;animation-delay: calc(var(--durationNum) * 0.5); }

@keyframes color_orange {
0% {	background-color: #fff4e8	;}
50% {	background-color: #f08300	;} 
100% {	background-color: #fff4e8	;}
}