@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 1090px) {
    header .in-head-flex { margin: 0 auto 20px; }
}
/*-- headline ------------------------------------------------------------*/

@media screen and (max-width: 599px) {
	section { margin-top: -60px; padding-top: 60px; }
	#headline { margin: 0 auto 40px; background:var(--base-color) url("../img/common/ttlBg.png") center right no-repeat; background-size: 70%; padding: 20px 20px 20px 40px; border-left: 8px solid var(--sub-color); }
	#headline h2 { font-size:1.5rem; font-weight: bold; color: #fff; } 
}
@media screen and (min-width: 600px) {
	section { margin-top: -80px; padding-top: 80px; }
	#headline { max-width: 1400px; margin: 0 auto 40px; background:var(--base-color) url("../img/common/ttlBg.png") center right no-repeat; padding: 20px 20px 20px 40px; border-left: 8px solid var(--sub-color); }
	#headline h2 { font-size:2.4rem; font-weight: bold; color: #fff; } 
}
@media screen and (min-width: 600px) and (max-width: 889px) {
	#headline h2 { font-size:1.8rem; } 
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#headline h2 { font-size:1.9rem; } 
}
@media screen and (min-width: 1090px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#headline h2 { font-size:2.0rem; } 
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#headline h2 { font-size:2.1rem; } 
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#headline h2 { font-size:2.2rem; } 
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	#headline h2 { font-size:2.3rem; } 
}

/*-- header ------------------------------------------------------------*/
@media screen and (max-width: 899px) {
	header .in-head-flex .hL h1 { color: #000; }
	header .in-head-flex .hR nav ul li a { position: relative; }
}
@media screen and (max-width: 599px) {
	.menu-trigger span { background-color: var(--base-color); }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.menu-trigger span { background-color: var(--base-color); }
}
/*-- breadcrumbs ------------------------------------------------------------*/
#breadcrumbs { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; padding: 0 4%; }
#breadcrumbs li { font-size: 0.8rem; margin-right: 5px; display: inline-block; }
#breadcrumbs li:after { content: ">"; margin-left: 10px; }
#breadcrumbs li:last-child { margin-right: 0px; }
#breadcrumbs li:last-child:after { display: none; }
@media screen and (max-width: 599px) {
	#breadcrumbs { margin-bottom: 0px; }
	#breadcrumbs li { font-size: 0.7rem; }
}

/*-- section ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	section .in { margin: 0 4% 5vh; }
	.flex-half {  }
	.in-flex-half { margin-bottom: 40px; }	
	.in-flex-half:last-child { margin-bottom: 0px; }
	.subTtl01 { font-size:1.1em; font-weight: bold; margin-bottom: 20px; color: var(--sub-color); } 
	.caption { margin-bottom: 10px; font-size: 1.1em; color: #000; font-weight: bold; }
	.box-shadow { box-shadow: 0px 0px 15px -5px #777777; border-radius: 10px; padding: 4%; }
}
@media screen and (min-width: 600px) {
	.flex-half { display: flex; justify-content: space-between; }
	.in-flex-half { width: 48%; }
	.subTtl01 { margin-bottom: 20px; font-size: 1.5em; color: var(--sub-color); font-weight: bold; }
	.subTtl02 { margin-bottom: 20px; font-size: 1.8em; color: var(--sub-color); font-weight: bold; }
	.caption { margin-bottom: 10px; font-size: 1.1em; color: #000; font-weight: bold; }
	.box-shadow { box-shadow: 0px 0px 15px -5px #777777; border-radius: 10px; padding: 2%; }
}
@media screen and (min-width: 600px) and (max-width: 1089px) {
    section .in { margin: 0 4% 5vh; }
}

@media screen and (min-width: 600px) and (max-width: 889px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}
@media screen and (min-width: 1490px) and (max-width: 1589px) {
	.in-flex-half-L { width: 52%;}
	.in-flex-half-R { width: 44%;}
}
@media screen and (min-width: 1590px) {
	.in-flex-half-L { width: 54%;}
	.in-flex-half-R { width: 42%;}
}
/*-- company ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.tbl01 { width: 100%; border-top: 1px solid #dedede; }
	.tbl01 th,.tbl01 td { padding: 10px; text-align: left; display: block; }
	.tbl01 th { text-align: center; border-bottom: 1px dotted #dedede; background: #dedede; }
	.tbl01 td { border-bottom: 1px solid #dedede; }
	
	.tbl01 td .in-flex-L { margin-bottom: 20px; }
	.tbl01 td .in-flex-L02 { margin-bottom: 20px; }
	.tbl01 td .in-flex-R02 ul { display: flex; justify-content: center; }
	.tbl01 td .in-flex-R02 ul li { width: 100px; margin:0 2%; }
}
@media screen and (min-width: 600px) {
	.tbl01 { width: 100%;  }
	.tbl01 th,.tbl01 td { padding: 20px; text-align: left; }
	.tbl01 th { width: 20%; text-align: left; border-bottom: 3px solid #dedede; }
	.tbl01 td { width: 80%; border-bottom: 1px solid #dedede; }
	
	.tbl01 td .in-flex { display: flex; justify-content: flex-start; align-items: center;  }
	.tbl01 td .in-flex-L { width: 40%; }
	.tbl01 td .in-flex-R { margin-left: 4%; width: 56%; }
	
	.tbl01 td .in-flex-L02 { width: fit-content; }
	.tbl01 td .in-flex-R02 { margin-left: 4%; width: auto; }
	.tbl01 td .in-flex-R02 ul { display: flex; justify-content: flex-start; }
	.tbl01 td .in-flex-R02 ul li { width: 100px; margin-right: 20px; }
	.tbl01 td .in-flex-R02 ul li:last-child { margin-right: 0px;}
}
@media screen and (min-width: 600px) and (max-width: 1290px) {
	.tbl01 td .in-flex-R02 ul li { width: 80px; margin-right: 10px; }
}
/*-- company ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.flowStep li { margin-bottom: 20px; padding-bottom: 20px ;border-bottom: 1px solid #dedede; position: relative; }
	.flowStep li:after { content: ""; position: absolute; bottom: -10px; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 10px 25px 0 25px; border-color: #dedede transparent transparent transparent; }
	.flowStep li p.numberStep { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 2.0rem; text-decoration: underline; text-align: center; line-height: 1.0; margin-bottom: 10px; }
	.flowStep li .flowTtl { margin-bottom: 20px; }
	.flowStep li .flowTtl h4 { font-size: 1.3rem; font-weight: bold; margin-bottom: 10px; text-align: center;}
	/*.flowStep li .img-radius { width: 80%; margin: 0 auto; }*/
	.flowStep li .flowTtl p { margin-bottom: 20px; }
	.flowStep li .flowImg { text-align: center; }
}
@media screen and (min-width: 600px) {
	.flowStep { max-width: 960px; margin: 0 auto; }
	.flowStep li { margin-bottom: 20px; padding-bottom: 20px ;border-bottom: 1px solid #dedede; display: flex; justify-content: flex-start; align-items: center; position: relative; }
	.flowStep li:after { content: ""; position: absolute; bottom: -10px; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 10px 25px 0 25px; border-color: #dedede transparent transparent transparent; }
	.flowStep li p.numberStep { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 3.0rem; margin-right: 2%; text-decoration: underline; width: 20%; text-align: center; }
	.flowStep li .flowTtl { width: 78%; }
	.flowStep li .flowTtl h4 { font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; }
	/*.flowStep li .img-radius { width: 24%; }*/
	.flowStep li .flowImg { margin-left: 4%; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.flowStep li .flowTtl h4 { font-size: 1.2rem; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.flowStep li .flowTtl h4 { font-size: 1.3rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.flowStep li .flowTtl h4 { font-size: 1.4rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
	.flowStep li .flowTtl h4 { font-size: 1.5rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
	.flowStep li .flowTtl h4 { font-size: 1.6rem; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
	.flowStep li .flowTtl h4 { font-size: 1.7rem; }
}

/*-- scwareテナント管理システム ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.subTtl02 { margin-bottom: 20px; font-weight: bold; }
	.box-list { background: #a6caec; padding: 20px; }
	.dot-list li { margin-bottom: 10px; padding-left: 1em; text-indent: -1.5em; /*font-size: 0.9em;*/ background: #e7f7fd; padding: 5px; padding-left: 2em; }
	.dot-list li:before { content: "●"; margin-right: 0.5em; }
	.dot-list li:last-child { margin-bottom: 0px; }
	
	.scTbl { width: 100%; }
	.scTbl th { width: 30%; padding: 10px 10px; font-size: 0.8em; vertical-align: middle; }
	.scTbl td { width: 70%; padding: 10px 10px; font-size: 0.8em; vertical-align: middle; }
	.scTbl td .dot-list { padding-left: 1.0em; }
	.scTbl td .dot-list li { margin-bottom: 5px; }
	
	.sc_dl { border-left: 5px solid var(--sub-color); padding-left: 1em; margin-bottom: 20px;}
	.sc_dl dt { font-weight: bold; }
}
@media screen and (min-width: 600px) {
	.subTtl02 { margin-bottom: 20px; font-weight: bold; }
	.box-list { background: #a6caec; padding: 20px; }
	.dot-list li { margin-bottom: 10px; padding-left: 1em; text-indent: -1.5em; /*font-size: 0.9em;*/ background: #e7f7fd; padding: 5px; padding-left: 2em; }
	.dot-list li:before { content: "●"; margin-right: 0.5em; }
	.dot-list li:last-child { margin-bottom: 0px; }
	
	.scTbl { width: 100%; }
	.scTbl th { width: 30%; padding: 10px 10px; font-size: 0.8em; vertical-align: middle; }
	.scTbl td { width: 70%; padding: 10px 10px; font-size: 0.8em; vertical-align: middle; }
	.scTbl td .dot-list { padding-left: 1.0em; }
	.scTbl td .dot-list li { margin-bottom: 5px; }
	
	.sc_dl { border-left: 5px solid var(--sub-color); padding-left: 1em; margin-bottom: 20px;}
	.sc_dl dt { font-weight: bold; }
}

.scTbl th.tena { background:#d9f2d0; }
.scTbl td.tena { background:#e7f7e1; }
.scTbl th.deve { background:#caeefb; }
.scTbl td.deve { background:#e7f7fd; }
.scTbl th.cust { background:#ffccff; }
.scTbl td.cust { background:#ffe5ff; }
.scTbl th.part { background:#99ffcb; }
.scTbl td.part { background:#ceffe5; }

.scTbl th.tena02 { background:#c6e9f7; }
.scTbl td.tena02 { background:#e1f6fd; }
.scTbl th.deve02 { background:#ccccfe; }
.scTbl td.deve02 { background:#e1e0ff; }

.scTbl td .dot-list li { background: none; padding: 0; padding-left: 1em;}

/*-- Introduction ------------------------------------------------------------*/
.introBox { box-shadow: 0px 0px 15px -5px #777777; border-radius: 10px; margin-bottom: 20px; padding: 2% 2%;  }
.introTtl { color: var(--base-color); font-size: 1.5em; margin-bottom: 20px; }
.introTtl span { font-size: 0.7em; margin-left: 0.5em; }

.introDlWrapper { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.introDl { display: flex; justify-content: flex-start; margin-bottom: 10px; margin-right: 4%; }
.introDl dt { font-size: 0.9em; }
.introDl dt:after { content: "："; }
.introDl dd { font-size: 0.9em; }

.introTagList { margin-bottom: 20px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.introTagList li { padding: 5px 20px; font-size: 0.9em; color: var(--base-color); border: 1px solid var(--base-color); margin-right: 0.5em; border-radius: 6px; margin-bottom: 10px; }

.introPoint li { margin-bottom: 10px; padding-left: 2em; text-indent: -1.5em; }
.introPoint li:last-child { margin-bottom: 0; }
.introPoint li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--base-color); margin-right: 0.5em; }

@media screen and (max-width: 767px) {
	.introBox { padding: 4%;  }
	.introBoxL { width: 80%; margin: 0 auto 20px;}
	.introTtl { color: var(--base-color); font-size: 1.2em; }
}
@media screen and (min-width: 768px) {
	.introBox { display: flex; justify-content: space-between; }
	.introBoxL { width: 30%; }
	.introBoxR { width: 66%; }
}


/*-- 導入事例 ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.resultTbl { width: 100%; }
	.resultTbl th { padding: 10px 20px ; text-align: center; width: 10%; border-bottom: 1px solid #dedede; }
	.resultTbl td {  border-bottom: 1px dotted #dedede; text-align: left; font-size: 10px; }
	.resultTbl td.re_text { padding: 10px; width: 30%; border-bottom: 1px dotted #dedede; font-size: 14px; text-align: left;}
	.resultTbl td span { padding: 2px 5px; display: block; text-align: center; }
	.resultTbl td span.asp { background:rgba(250,125,125,1.00); color: #fff; }
	.resultTbl td span.con { background:rgba(99,140,11,1.00); color: #fff; }
	.resultTbl td span.sys { background:rgba(0,115,189,1.00); color: #fff; }
}
@media print,screen and (min-width: 600px) {	
	.resultTbl { width: 100%; }
	.resultTbl th { padding: 10px 20px; text-align: center; width: 15%; border-bottom: 1px solid #dedede; }
	.resultTbl td {  border-bottom: 1px dotted #dedede; text-align: left; font-size: 12px; padding: 10px 20px; }
	.resultTbl td.re_text { padding: 10px; width: 80%; border-bottom: 1px dotted #dedede; font-size: 15px; text-align: left;}
	.resultTbl td span { padding: 2px 10px; text-align: center; display: block; }
	.resultTbl td span.asp { background:rgba(250,125,125,1.00); color: #fff; }
	.resultTbl td span.con { background:rgba(99,140,11,1.00); color: #fff; }
	.resultTbl td span.sys { background:rgba(0,115,189,1.00); color: #fff; }
	
	.flexImg { display: flex; justify-content: flex-start; max-width: 960px; margin: 0 0 40px; }
	.flexImg li { margin-right: 4%; }
	.flexImg li:last-child { margin-right: 0;}
	.flexImg li div img { margin-bottom: 10px; }
}
@media screen and (min-width: 600px)  and (max-width: 960px) {
	.resultTbl td.re_text { width: 60%; }
}
@media screen and (min-width: 961px)  and (max-width: 1023px) {
	.resultTbl td.re_text { width: 60%; }
}
@media print,screen and (min-width: 1024px)  and (max-width: 1259px) {
	.resultTbl td.re_text { width: 60%; }
}
@media screen and (min-width: 1260px) {
	.resultTbl td.re_text { width: 80%; }
}

/*-- blog ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.blog_list { margin-bottom:20px; }
	.blog_list li { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #DEDEDE; }
	.blog_list li dl { margin-bottom:5px; }
	.blog_list li dl dt { background:#333; padding:1px 5px; color:#fff; font-size:12px; float:left; }
	.blog_list li dl dd { background:var(--sub-color); padding:1px 5px; color:#fff; font-size:12px; float:left; }
	.blog_list li p { font-size:15px; margin-bottom:0px; }
}
@media print,screen and (min-width: 600px) {
	.blog_list { margin-bottom:20px; }
	.blog_list li { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #DEDEDE; }
	.blog_list li dl { margin-bottom:5px; }
	.blog_list li dl dt { background:#333; padding:1px 5px; color:#fff; font-size:12px; float:left; }
	.blog_list li dl dd { background:var(--sub-color); padding:1px 5px; color:#fff; font-size:12px; float:left; }
	.blog_list li p { font-size:16px; margin-bottom:0px; }
}

/*-- news ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.news_list { margin-bottom:20px; }
	.news_list li { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #DEDEDE; }
	.news_list li dl { margin-bottom:5px; }
	.news_list li dl dt { font-size:13px; color:var(--sub-color); }
	.news_list li dl dt:before { content:"\f0da"; font-family:"Font Awesome 5 Free"; font-weight: 900; color:var(--sub-color); margin-right:5px; }
	.news_list li p { font-size:15px; margin-bottom:0px; }
}
@media print,screen and (min-width: 600px) {
	.news_list { margin-bottom:20px; }
	.news_list li { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #DEDEDE; }
	.news_list li dl dt { font-size:14px; color:var(--sub-color); }
	.news_list li dl dt:before { content:"\f0da"; font-family:"Font Awesome 5 Free"; font-weight: 900; color:var(--sub-color); margin-right:5px; }
	.news_list li dl dd { font-size:16px; }
}

/*-- search ------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.search fieldset input[type="text"]{ -webkit-appearance: none; }
	.search fieldset input[type="submit"]{ -webkit-appearance: none; }
	.search fieldset input[type="image"]{ -webkit-appearance: none; }
	.search { padding: 4% 0% !important; float: right; }
	.search form { position: relative; }
	.search fieldset input[type=text] {
		height: 15px;
		line-height: 26px;
		height: 26px;
		font-size: 12px;
		padding: 5px;
		width: 150px;
		border: #DEDEDE 1px solid;
		border-radius: 0px !important; 
	}
	.srch {
		position: absolute;
		top: 2px;
		right: 0px;
		background: url(../img/common/grass.gif) 0px 0px no-repeat;
		background-size: 26px;
		width: 26px;
		height: 26px;
		cursor: pointer;
		font-size: 0px;
		border-radius: 0px !important;
	}
}
@media print,screen and (min-width: 768px) {
	.search { padding: 15px 0% !important; float: right; }
	.search form { position: relative; }
	.search fieldset input[type=text] {
		height: 15px;
		line-height: 28px;
		height: 28px;
		font-size: 12px;
		padding: 5px;
		width: 180px;
		border: #DEDEDE 1px solid;
	}
	.srch {
		position: absolute;
		top: 6px;
		right: 0px;
		background: url(../img/common/grass.gif) 0px 0px no-repeat;
		background-size: 28px;
		width: 28px;
		height: 28px;
		cursor: pointer;
		font-size: 0px;
	}
}


/*-- privacy ------------------------------------------------------------*/
.in-L-700 { max-width: 700px; margin: 0 0 40px;}
@media screen and (max-width: 767px) {
	.text_copy { font-size: 1.2em; font-weight: bold; color:#000; margin-bottom: 20px; }
	.privacyDl dt {
		margin-bottom:0.75em;
		padding-left:0.75em;
		color:var(--base-color);
		font-size:1.0em;
		font-weight:bold;
		border-left:4px solid var(--base-color);
	}
	.privacyDl dd {
		margin-bottom:2em;
		font-size:0.9em;
	}
	.tbl_text th { width: 25%; text-align: left; padding: 1%; }
	.tbl_text td { width: 75%; word-break : break-all; padding: 1%; }
}
@media print,screen and (min-width: 768px) {
	.text_copy { font-size: 1.2em; font-weight: bold; color:#000; margin-bottom: 20px; }
	.privacyDl dt {
		margin-bottom:0.75em;
		padding-left:0.75em;
		color:var(--base-color);
		font-size:1.1em;
		font-weight:bold;
		border-left:4px solid var(--base-color);
	}
	.privacyDl dd {
		margin-bottom:2em;
	}
	.tbl_text th { width: 10%; text-align: left; padding: 1% 2%;}
	.tbl_text td { width: 90%; padding: 0.5% 2%; }
}