@charset "utf-8";



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

	titlearea

=========================================================== */
div#titlearea{
	width:900px;
	margin:10px auto 0 auto;
	padding:85px 50px 90px 50px;
	position: relative;
}
div#titlearea h2{
	color:#fff;
	font-size:42px;
	font-weight:bold;
	line-height:1.5;
	position: relative;
	z-index: 5;
}
div#titlearea h2 span{
	display: block;
	margin:0.5em 0 0 0;
	font-size:16px;
	font-weight:normal;
	position: relative;
	z-index: 5;
}
article#about div#titlearea{
	background:url("../images/bg04.jpg") no-repeat 50% 50% / cover;
}
article#service div#titlearea{
	background:url("../images/bg05.jpg") no-repeat 50% 50% / cover;
}
article#usecase div#titlearea{
	background:url("../images/bg06.jpg") no-repeat 50% 50% / cover;
}
article#howtouse div#titlearea{
	background:url("../images/bg07.jpg") no-repeat 50% 50% / cover;
}
article#ailab div#titlearea{
	background:url("../images/bg08.jpg") no-repeat 50% 50% / cover;
}
article#dxlab div#titlearea{
	background:url("../images/bg_dxlab.jpg") no-repeat 50% 50% / cover;
}
article div#titlearea:before{
	content: "";
	background:rgba(0,0,0,0.6);
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 1;
}




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

	article

=========================================================== */
article{
	margin:0 0 100px 0;
}


/* パンくずリスト
------------------------------------------------------------ */
main > article > nav{
	width:1000px;
	margin:70px auto 0 auto;
}
main > article > nav > ul{
	display: flex;
	margin:0;
	padding:0;
	font-size:12px;
	list-style: none;
}
main > article > nav > ul li{
	color:#999;
}
main > article > nav > ul li:before{
	content: "＞";
	padding:0 1em;
}
main > article > nav > ul li:first-child:before{
	content:normal;
}
main > article > nav > ul li a{
	color:#999;
	transition: 0.3s all;
}
main > article > nav > ul li a:hover{
	color:#000;
	text-decoration: none;
}


/* アンカーリンク上エリア
------------------------------------------------------------ */
main > article > div#titlearea + div{
	width:900px;
	margin:0 auto;
	padding:30px 50px;
	line-height:1.5;
	border-bottom:2px #ccc solid;
	background:#fafafa;
}
main > article > div#titlearea + div p{
	margin:1em 0;
}


/* アンカーリンク
------------------------------------------------------------ */
main > article > nav:nth-of-type(2){
	width:1000px;
	margin:0 auto;
	padding:1.5em 50px;
	color:#333;
	background:#e3e3e3;
	border-bottom-width:0;
	overflow: hidden;
	box-sizing: border-box;
}
main > article > nav:nth-of-type(2) > ul{
	margin:0;
	font-size:16px;
	list-style: none;
	counter-reset: number;
}
main > article > nav:nth-of-type(2) li{
	margin:0 3em 0 0;
}
main > article > nav:nth-of-type(2) li:first-child:before,
main > article > nav:nth-of-type(2) li:before{
	content:normal;
}
main > article > nav:nth-of-type(2) li:after{
	content:normal;
}
main > article > nav:nth-of-type(2) li a{
	color:#5482b7;
	transition: 0.3s all;
}
main > article > nav:nth-of-type(2) li a:before{
	content:"\f103";
	padding:0 0.5em 0 0;
	font-weight:900;
	transition: 0.3s all;
}
main > article > nav:nth-of-type(2) li a:hover,
main > article > nav:nth-of-type(2) li a:hover:before{
	color:#34a86d;
}


/* 戻るボタン
------------------------------------------------------------ */
article > div.btnback{
	width:1000px;
	margin:0 auto;
	padding:1em;
	background:#fafafa;
	box-sizing: border-box;
}
article > div.btnback a{
	display: inline-block;
	margin:1em 3em;
	padding:0.5em 1em 0.5em 0.75em;
	color:#000;
	font-size:12px;
	border-radius: 5px;
	background:#ccc;
	transition:0.3s all;
}
article > div.btnback a:before{
	content: "\f100";
	padding-right:0.5em;
	font-weight: 900;
}
article > div.btnback a:hover{
	text-decoration: none;
	opacity: 0.7;
}



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

	section

=========================================================== */
article section > div{
	width:900px;
	margin:0 auto;
	padding:60px 50px;
	border-bottom:2px #ccc solid;
	background:#fafafa;
}
article section > div h3{
	margin:0 0 1.5em 0;
	font-size:28px;
	font-weight:bold;
	line-height: 1.5;
}
article section > div h4{
	margin:0.75em 0;
	padding:0.25em;
	font-size:22px;
	font-weight:bold;
	line-height: 1.5;
	border-bottom:3px #0185cf solid;
}
article section > div h5{
	margin:0.75em 0;
	padding:0.5em 0.25em;
	font-size:18px;
	font-weight:bold;
	line-height: 1.5;
	background:#ddd;
}
article section > div h6{
	margin:0.75em 0;
	padding:0 0.25em 0.5em 0.25em;
	font-size:16px;
	font-weight:bold;
	line-height: 1.5;
	border-bottom:1px #999 solid;
}
article section > div > div h3:first-child,
article section > div > div h4:first-child,
article section > div > div h5:first-child,
article section > div > div h6:first-child,
article section > div > div > div + h3,
article section > div > div > div + h4,
article section > div > div > div + h5,
article section > div > div > div + h6{
	margin-top:0;
}
article section > div > div h4:first-child,
article section > div > div > div + h4{
	padding-top:0;
}

/* h3 numbering */
article#numbering_h3{
	counter-reset: number;
}
article#numbering_h3 section > div h3{
	display: flex;
}
article#numbering_h3 section > div h3:before{
	min-width:1.75em;
	counter-increment: number;
	content: counter(number)"．";
}

/* text */
section > div p{
	margin:0 0 1em 0;
	line-height:1.75;
	letter-spacing: 0.05em;
}
section > div sup{
	padding:0 0.25em;
	font-size:0.75em;
	vertical-align: top;
}
section > div sup.red{
	color:red;
}

/* link */
article section > div p a{
	text-decoration: underline;
	transition: 0.3s all;
}
article section > div p a.mark:before{
	display: inline-block;
	content: "\f0da";
	padding:0 0.25em;
	font-weight: 900;
	text-decoration: none;
}
article section > div p a:hover{
	text-decoration: none;
}
article section > div p a[target]:before{
	display: inline-block;
	content: "\f2d2";
	padding:0 0.25em;
	font-weight: normal;
}
article section > div p a[href*=".pdf"]:before{
	content: normal;
}
article section > div p a[href*=".pdf"]:after{
	display: inline-block;
	content: "\f1c1";
	padding:0 0.25em;
	color:#e30b0b;
}

/* btn_block_center */
div.btn_block_center{
	padding-top:0;
	text-align: center;
	clear: both;
}
div.btn_block_center a{
	display: inline-block;
	margin:30px auto;
	padding:0.75em 1.5em;
	color:#fff;
	text-align: center;
	line-height:1.5;
	border-radius: 5px;
	background:rgba(1,133,207,1);
	box-sizing: border-box;
	transition: 0.3s all;
}
div.btn_block_center a:before{
	content: "\f101";
	padding-right:10px;
	font-weight:900;
}
div.btn_block_center a:hover{
	text-decoration: none;
	background:rgba(52,168,109,1);
}

/* table */
section > div table{
	border-collapse:collapse;
}
section > div table th,
section > div table td{
	padding:1em;
	border:1px #999 solid;
	line-height:1.75;
	letter-spacing: 0.05em;
	border-width:1px 0;
}
section > div table th{
	font-weight:bold;
	vertical-align: middle;
	background:#edead9;
}
section > div table td{
}

/* list */
section > div ul li,
section > div ol li{
	margin:0 0 1em 0;
	line-height:1.75;
	letter-spacing: 0.05em;
}
section > div li a{
	text-decoration:underline;
	transition: 0.3s all;
}
section > div li a:hover{
	text-decoration:none;
}
section > div li > p{
	margin:2em 0;
}
section > div ul li ul,
section > div ul li ol,
section > div ol li ul,
section > div ol li ol{
	margin:1em 0 0 0;
}
section > div ul,
section > div ol{
	margin:0 0 0 1.5em;
	padding:0 0 0 1.5em;
}

/* (ol) numbering */
section > div ol.brackets_numbering_ol{
	margin:0;
	padding:0;
	list-style: none;
	counter-reset: number;
}
section > div ol.brackets_numbering_ol li{
	display: flex;
	width:100%;
}
section > div ol.brackets_numbering_ol li:before{
	display: block;
	min-width:3em;
	float:left;
	counter-increment: number;
	content: "（" counter(number) "）";
}

/* (ol) numbering btn*/
section > div ol.brackets_numbering_ol_btn{
	margin:0;
	padding:0;
	list-style: none;
	counter-reset: number;
}
section > div ol.brackets_numbering_ol_btn li{
	display: flex;
	flex-wrap: wrap;
}
section > div ol.brackets_numbering_ol_btn li:before{
	min-width:6%;
	float:left;
	counter-increment: number;
	content: "（" counter(number) "）";
}
section > div ol.brackets_numbering_ol_btn li span{
	display: block;
	max-width:94%;
}
section > div ol.brackets_numbering_ol_btn li div.btn_block_center{
	width:100%;
}
section > div ol.brackets_numbering_ol_btn li div.btn_block_center a{
	display: block;
	width:300px;
	margin:20px auto 30px auto;
	color:#fff;
	text-align: center;
	border-radius: 5px;
	background:rgba(110,99,58,1);
	box-sizing: border-box;
	transition: 0.3s all;
}
section > div ol.brackets_numbering_ol_btn li div.btn_block_center a:before{
	content: "\f101";
	padding-right:10px;
	font-weight:900;
}
section > div ol.brackets_numbering_ol_btn li div.btn_block_center a:hover{
	text-decoration: none;
	background:rgba(110,99,58,0.8);
}

/* 独自リスト */
section > div ol.list_flex{
	list-style: none;
}
section > div ol.list_flex > li{
	display: flex;
}
section > div ol.list_flex > li span{
	max-width:70px;
}

section > div > ol > li.list_flex_inner_ul{
	flex-wrap: wrap;
}
section > div > ol > li.list_flex_inner_ul span{
	min-width:4%;
	max-width:4%;
}
section > div > ol > li.list_flex_inner_ul span + span{
	min-width:96%;
}
section > div > ol > li.list_flex_inner_ul ul{
	width:100%;
	list-style: disc;
	margin-left:1.75em;
	padding-left:1.5em;
}

/* dl */
section > div dl{
	margin:0 0 0 1.5em;
	line-height:1.75;
	letter-spacing: 0.05em;
}
section > div dl dt{
	margin:0 0 1em 0;
	font-weight:bold;
}
section > div dl dd{
	margin:0 0 1em 1.5em;
}

.block_center{
	margin-right:auto !important;
	margin-left:auto !important;
}
p.caption{
	color:#555;
	font-size:0.875em;
}

/* boxarea */
div.boxarea{
	margin:2em 0;
	padding:2em 2em 1em 2em;
	border:1px #666 solid;
	background:#eee;
}
div.boxarea h4,
div.boxarea h5,
div.boxarea h6{
	margin-top:0;
}

/* img zoom */
div.img_zoom{
	position: relative;
}
div.img_zoom a:after{
	content: "\f00e";
	padding:3px;
	color:#005cca;
	font-size:24px;
	font-weight: 900;
	border:5px #005cca solid;
	border-radius:5px;
	position: absolute;
	right:20px;
	bottom:40px;
}



/* rayout
------------------------------------------------------------ */
article section > div > div{
	padding-bottom:50px;
}
div.center{
	margin:auto;
}

/* float */
div.onethirdimg_float_left,
div.onethirdimg_float_right,
div.half_float_left,
div.half_float_right{
	overflow: hidden;
}
div.onethirdimg_float_left > div:first-child{
	width:30%;
	padding:0 3% 0 0;
	background:#fafafa;
	float:left;
}
div.onethirdimg_float_right > div:first-child{
	width:30%;
	padding:0 0 0 3%;
	background:#fafafa;
	float:right;
}
div.half_float_left > div:first-child{
	width:47.5%;
	margin:0 5% 0 0;
	float:left;
}
div.half_float_right > div:first-child{
	width:47.5%;
	margin:0 0 0 5%;
	float:right;
}

/* flex */
div.half,
div.onethird,
div.quote,
div.left3right1,
div.left1right3{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
div.half > div{
	width:48%;
}
div.onethird > div{
	width:30%;
}
div.quote:before{
	content:"";
	display: block;
	width:23%;
	order:1;
}
div.quote:after{
	content:"";
	display: block;
	width:23%;
}
div.quote > div{
	width:23%;
	margin-bottom:1.5em;
}
div.left3right1 > div,
div.left1right3 > div{
	width:70%;
	margin:0 0 40px 0;
}
div.left3right1 > div + div,
div.left1right3 > div + div{
	width:26%;
	margin-right:0;
}
img{width:100%;}



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

	調整用

=========================================================== */
b{font-weight:bold;}
strong{font-weight:900;}
.text_center{text-align: center;}
.text_right{text-align: right;}
.text_red{color:red;}
p.text_end{
	width:900px;
	margin:0 auto;
	padding:80px 50px;
	text-align: right;
	letter-spacing: 0.75em;
	background:#fafafa;
}


.w05{width:5% !important;}
.w10{width:10% !important;}
.w15{width:15% !important;}
.w20{width:20% !important;}
.w25{width:25% !important;}
.w30{width:30% !important;}
.w35{width:35% !important;}
.w40{width:40% !important;}
.w45{width:45% !important;}
.w50{width:50% !important;}
.w55{width:55% !important;}
.w60{width:60% !important;}
.w65{width:65% !important;}
.w70{width:70% !important;}
.w75{width:75% !important;}
.w80{width:80% !important;}
.w85{width:85% !important;}
.w90{width:90% !important;}
.w95{width:95% !important;}
.w100{width:100% !important;}

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




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

	extra

=========================================================== */
div.onethird > i,
div.quote > i{
	color:#999;
	font-size:30px;
}
div.onethird > i{
	margin-top:70px;
}
div.quote > i{
	margin-top:122px;
}


/* s03 ベンダーリンク
------------------------------------------------------------ */
section#s03{
}
section#s03.cardstyle > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
section#s03.cardstyle > div > div{
	width:48%;
	margin-bottom:4%;
	padding:2% 2% 6% 2%;
	background:#fff;
	box-sizing: border-box;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
section#s03.cardstyle > div > div h4{
	margin:0 0 1.5em 0;
	padding:0;
	font-size:1.25em;
	text-align: center;
	border-bottom:none;
}
section#s03.cardstyle > div > div h4 a{
	display: block;
	padding-bottom:1em;
	color:#333;
	border-bottom:1px #bbb solid;
	position: relative;
}
section#s03.cardstyle > div > div h4 a:after{
	content: "\f054";
	position: absolute;
	top:calc(50% - 1em);
	right:0;
}
section#s03.cardstyle > div > div h4 a:hover{
	color:#999;
	text-decoration: none;
}
section#s03.cardstyle > div > div h4 a img{
	display: block;
	margin-bottom:1em;
	transition:0.3s all;
}
section#s03.cardstyle > div > div h4 a:hover img{
	text-decoration: none;
	opacity: 0.5;
}
section#s03.cardstyle > div > div ul{
	margin:-0.5em 2em 0 0.5em;
	padding:0;
	list-style: none;
}
section#s03.cardstyle > div > div ul li{
	margin:1em 0 0 0;
	line-height:1.4;
}
section#s03.cardstyle > div > div ul li a{
	display: flex;
	text-decoration: none;
}
section#s03.cardstyle > div > div ul li a:before{
	content: "\f0da";
	padding:0 0.75em 0 0.25em;
	font-weight:bold;
}
section#s03.cardstyle > div > div ul li a[target]:before{
	content: "\f2d2";
	padding:0 0.35em 0 0;
	font-weight:normal;
}
section#s03.cardstyle > div > div div.bnrarea{
	margin-top:1.5em;
	border-top:1px #bbb solid;
}
section#s03.cardstyle > div > div h4 + div.bnrarea{
	border-top:none;
}
section#s03.cardstyle > div > div div.bnrarea a{
	display: block;
	width:60%;
	margin:2em auto 0 auto;
	transition:0.3s all;
}
section#s03.cardstyle > div > div div.bnrarea a:hover{
	text-decoration: none;
}
section#s03.cardstyle > div > div div.bnrarea a img{
	transition:0.3s all;
}
section#s03.cardstyle > div > div div.bnrarea a:hover img{
	opacity: 0.7;
}
@media screen and (max-width: 824px){
	section#s03.cardstyle > div > div{
		width:auto;
		margin-bottom:3em;
		padding:2em 1em 3em 1em;
	}
	section#s03.cardstyle > div > div h4{
		font-size:1em;
	}
}



/* ------------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width: 824px){
/* ------------------------------------------------------------------------------------------------------------------------ */
article{
	margin-bottom:5vw;
}
div#titlearea{
	width:90vw;
	margin:11vw 0 0 0;
	padding:10vw 5vw;
}
div#titlearea h2{
	color:#fff;
	font-size:7vw;
	font-weight:bold;
}
div#titlearea h2 span{
	display: block;
	margin:0.5em 0 0 0;
	font-size:4vw;
	font-weight:normal;
}


main > article > nav{
	display: none;
}
main > nav + article div#titlearea{
	margin-top:11vw;
}


article section > div{
	width:90vw;
	margin:0 auto;
	padding:10vw 5vw;
	border-bottom:2px #ccc solid;
	background:#fafafa;
}
article p.text_end{
	width:90vw;
	padding:10vw 5vw 20vw 10vw;
}

article section > div h3{
	font-size:6vw;
}
article section > div h4{
	font-size:5vw;
}
article section > div h5,
article section > div h6,
article section > div p,
article section > div table,
section > div ul,
section > div ol,
section > div dl{
	font-size:4vw;
}


/* アンカーリンク
------------------------------------------------------------ */
main > article > nav:nth-of-type(2){
	display: block;
	width:100vw;
	margin:0 auto;
	padding:1em 2em 0 2em;
}
main > article > nav:nth-of-type(2) > ul{
	display: block;
}
main > article > nav:nth-of-type(2) li{
	margin:0 0 1em 0;
}


/* ex ancholink
------------------------------------------------------------ */
main > article > div#titlearea + div{
	width:auto;
	padding:10vw 5vw;
}


article section > div table{
	width:auto;
	margin:0 0 10vw 0;
	border-bottom:1px #999 solid;
}
article section > div table th{
	display: block;
	width:100% !important;
	text-align: left;
	border-width:1px 0 0 0;
	box-sizing: border-box;
}
article section > div table td{
	display: block;
	width:auto;
	border-width:0;
}

section > div ul,
section > div ol{
	margin:0 0 0 0.5em;
	padding:0;
}
section > div ul li,
section > div ol li{
	margin:0 0 1em 1em;
}
section > div ol.list_flex li{
	margin-left:0;
}
section > div > ol > li.list_flex_inner_ul span{
	min-width:2em;
	max-width:2em;
}
section > div > ol > li.list_flex_inner_ul span + span{
	min-width:19em;
}
section > div dl{
	margin:0;
}

div.boxarea{
	margin:2em 0;
	padding:1em 1em 0 1em;
}


section > div ol.brackets_numbering_ol li:before{
	margin-left:-1.5em;
}
div.btn_block_center a,
section > div ol.brackets_numbering_ol_btn li div.btn_block_center a{
	width:100% !important;
	font-size:4.5vw;
}
section > div ol.brackets_numbering_ol_btn li span{
	max-width:85%;
}



.w05,.w10,.w15,.w20,.w25,.w30,.w35,.w40,.w45,.w50,.w55,.w60,.w65,.w70,.w75,.w80,.w85,.w90,.w95,.w100{width:100% !important;}
div.center{
	width:100% !important;
	margin-right:0;
	margin-left:0;
}
div.center img{
	width:100% !important;
}

/* float */
div.onethirdimg_float_left > div:first-child,
div.onethirdimg_float_right > div:first-child,
div.half_float_left > div:first-child,
div.half_float_right > div:first-child{
	width:auto;
	margin:0;
	padding:0;
	float:none;
}

/* flex */
div.half,
div.onethird,
div.left3right1,
div.left1right3{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
div.half > div,
div.onethird > div,
div.quote > div,
div.left3right1 > div,
div.left1right3 > div,
div.left3right1 > div + div,
div.left1right3 > div + div{
	width:auto;
	margin:0 0 2.75vw 0;
}
div.quote{
	flex-wrap: wrap;
}
div.quote > div{
	width:48%;
}
div.onethird > i,
div.quote > i{
	display: none;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
}
/* ------------------------------------------------------------------------------------------------------------------------ */






@media (orientation:landscape){
}