/*mainimgarea*/
.mainimgarea {position:relative;width:100%;height:100vh;overflow:hidden;background:#000;z-index:5000;}
.mainimgarea .bgcover {position:absolute;top:0px;left:0px;width:100%;height:100%;background:#000 url(../img/top/mainimg.jpg) no-repeat center center;background-size:cover;transform:scale(1.1);}
.mainimgarea.on .bgcover {transform:scale(1.0);transition:10s;}
.mainimgarea .cover {position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7);}
.mainimgarea .mainlogo {position:absolute;top:20px;left:50px;width:auto;height:40px;}
.mainimgarea .mainlogo img {height:40px;}
.mainimgarea .mainmenu {position:absolute;top:20px;right:50px;width:auto;height:40px;}
.mainimgarea .mainmenu a {display:inline-block;color:#fff;font-size:14px;padding:13px 20px;}
.mainimgarea .mainmenu a:hover {text-decoration:none;border-bottom:solid #ccc 1px;}
.mainimgarea .mainimg {position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);text-align:center;}
.mainimgarea .mainimg img {width:32vw;opacity:0;}
.mainimgarea .mainimg img.on {opacity:1;transition:2s;}
.mainimgarea p {font-size:2rem;line-height:1.5em;font-weight:bold;color:#fff;opacity:0;}
.mainimgarea p.on {opacity:1;transition:2s;}
.mainimgarea .ctaarea {text-align:center;margin-top:25px;opacity:0;transform:translateY(20px);}
.mainimgarea .ctaarea.on {opacity:1;transform:translateY(0px);transition:2s;}
.mainimgarea .ctaarea img {width:50px;margin-top:35px;}
.mainimgarea .ctaarea.on img {opacity:1;transition:2s;}
.newsarea {padding-top:35px;opacity:0;transform:translateY(20px);}
.newsarea.on {opacity:1;transform:translateY(0px);transition:2s;}
.newsarea ul {width:600px;max-width:100%;margin:0px auto;text-align:left;}
.newsarea ul li {font-size:1.0rem;color:#fff;border-bottom:dotted #ccc 1px;padding:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.newsarea ul li.nb {border:none;}
.newsarea ul li span.date {display:inline-block;width:120px;}
.newsarea ul li a {color:#fff;text-decoration:none;}
.newsarea ul li a:hover {border-bottom:solid #fff 1px;}

/*SP*/
@media (max-width: 896px){
	.mainimgarea {z-index:1;}
	.mainimgarea .mainimg {width:100%;left:0px;transform:translateX(0px) translateY(-40%);}
	.mainimgarea .mainlogo {display:none;}
	.mainimgarea .mainmenu {display:none;}
	.mainimgarea .mainimg img {width:65vw;}
	.mainimgarea p {font-size:1.4rem;padding:0px 20px;}
	.mainimgarea .ctaarea {padding:0px 20px;}
	.mainimgarea .ctaarea a.btn {font-size:0.8rem;padding:20px 15px 20px 25px;background-position:left 10px center;background-size:9px auto;}
	.mainimgarea .ctaarea img {width:50px;}
	.newsarea {padding:35px 20px 0px 20px;}
}



.overview {background:#002;}
.overview h2 {font-size:5.0rem;color:#fff;margin-bottom:20px;}
.overview p {font-size:1.4rem;color:#fff;}
.overview p a {color:#ff5;}
/*SP*/
@media (max-width: 896px){
	.overview h2 {font-size:1.6rem;margin-bottom:20px;}
	.overview p {font-size:0.9rem;line-height:1.5em;}
}

.feature {background:#113;background:linear-gradient(#224, #002);}
.feature h2 {font-size:5.0rem;color:#fff;margin-bottom:20px;}
.feature p {font-size:1.4rem;color:#fff;}
.feature .inner {text-align:left;padding:30px 60px 30px 0px;}
.feature .inner h3 {color:#fff;font-size:2rem;margin-bottom:20px;}
.feature .inner p {text-align:left;}
.feature .inner.inner01 h3 {background:url(../img/top/point01.svg) no-repeat left center;background-size:2em auto;padding:1em 1em 1em 2.5em;}
.feature .inner.inner02 h3 {background:url(../img/top/point02.svg) no-repeat left center;background-size:2em auto;padding:1em 1em 1em 2.5em;}
.feature .inner.inner03 h3 {background:url(../img/top/point03.svg) no-repeat left center;background-size:2em auto;padding:1em 1em 1em 2.5em;}
/*SP*/
@media (max-width: 896px){
	.feature h2 {font-size:1.6rem;margin-bottom:20px;}
	.feature p {font-size:0.9rem;line-height:1.5em;}
	.feature .inner {padding:15px 15px 15px 15px;}
	.feature .inner h3 {font-size:1.4rem;margin-bottom:5px;}
}


.experience {background:#113;background:linear-gradient(#224, #002);}
.experience h2 {font-size:5.0rem;color:#fff;margin-bottom:20px;}
.experience p {font-size:1.4rem;color:#fff;margin-bottom:50px;}
.experience .inner {text-align:left;padding:0px 5px;}
.experience .inner .box {background:#fff;height:100%;padding-bottom:80px;position:relative;}
.experience .inner img {width:100%;margin-bottom:15px;}
.experience .inner h3 {color:#000;font-size:1.3rem;margin-bottom:10px;padding:0px 20px;}
.experience .inner p {color:#000;text-align:left;font-size:1rem;padding:0px 20px;}
.experience .inner a.btn {position:absolute;bottom:20px;left:20px;}
.experience .inner a.btn {width:calc(100% - 40px);}
/*SP*/
@media (max-width: 896px){
	.experience h2 {font-size:1.6rem;margin-bottom:20px;}
	.experience p {font-size:0.9rem;line-height:1.5em;}
	.experience .inner {padding:15px 15px 15px 15px;}
	.experience .inner h3 {font-size:1.4rem;margin-bottom:5px;}
}

.workflowarea {}
.workflowarea img {width:100%;}

.flowarea {padding:50px;background:#000 url(../img/top/bgflow.jpg) no-repeat left bottom;background-size:cover;background-attachment:fixed;position:relative;}
.flowarea h2 {font-size:2.4rem;color:#fff;text-align:center;margin-bottom:50px;}
.flowarea .flowwrap {width:800px;max-width:100%;background:#337;padding:7px;margin:0px auto;}
.flowarea .flow {width:100%;background:#fff;padding:20px 20px 20px 20px;text-align:left;margin:1px;}
.flowarea .flow.flow2,.flowarea .flow.flow3,.flowarea .flow.flow4,.flowarea .flow.flow5 {background:#fff url(../img/cmn/icon_gray.svg) no-repeat right 20px top 20px;background-size:40px auto;}
.flowarea .flow:hover {background-color:#ddd;cursor:pointer;}
.flowarea .flow.on:hover {background-color:#fff;}
.flowarea .flow h2 {display:inline-block;width:auto;font-size:1.4rem;color:#000;margin-bottom:0px;
	background:url(../img/top/flowmore.svg) no-repeat right center;background-size:20px auto;padding-right:35px;}
.flowarea .flow.flow1 h2, .flowarea .flow.flow6 h2 {color:#555;}
.flowarea .flow h2.on {background-image:url(../img/top/flowclose.svg);}
.flowarea .flow .detail {position:absolute;top:0px;right:0px;}
.flowarea .flow p.box {display:none;border-top:solid #ccc 1px; padding:15px;margin:20px 50px 0px 0px;}
.flowarea .flow .box {display:none;border-top:solid #ccc 1px; padding:15px;margin:20px 50px 0px 0px;}
.flowarea .flow div.box h3 {font-size:1rem;color:#000;margin-bottom:7px;}
.flowarea .flow div.box p {padding-right:30px;}

.flowarea .flow h2 .more {display:inline-block;border:solid #000 1px;font-size:20px;line-height:20px;width:32px;height:32px;padding:5px;}
/*PC*/
@media (min-width: 897px){
	.flowarea .collist {width:100%;margin:1px;}
	.flowarea .collist .inner01 .flow {width:calc(100% - 1px);margin:0px 1px 0px 0px;height:100%;max-width:100%;}
	.flowarea .collist .inner02 .flow {width:calc(100% - 1px);margin:0px 0px 0px 1px;height:100%;max-width:100%;}
}
.flowarea .collist .flow p {margin-right:20px;}
/*SP*/
@media (max-width: 896px){
	.flowarea {padding:15px;}
	.flowarea h2 {font-size:1.2rem;text-align:left;}
	.flowarea h2 span {display:inline-block;font-size:0.8rem;line-height:1em;padding:7px 15px;color:#000;border:solid #333 1px;margin-bottom:5px;}
	.flowarea .flow {padding:20px;}
	.flowarea .flow h2 {font-size:1.2rem;}
	.flowarea .flow.flow2,.flowarea .flow.flow3,.flowarea .flow.flow4,.flowarea .flow.flow5 {background-position:right 15px top 15px;background-size:35px auto;}
	.flowarea .flow p.box {margin:20px 0px 0px 0px;}
	.flowarea .flow .box {margin:20px 0px 0px 0px;}
	.flowarea .flow div.box p {padding-right:0px;}
	.flowarea .flow div.box .inner {padding-bottom:30px;}
	.flowarea .flow div.box .inner.inner2 {border-top:solid #ccc 1px;padding:15px 0px;margin:20px 0px 0px 0px;}

}

/*
.flowarea {background:#114;padding:50px;background:#000 url(../img/top/bgflow.jpg) no-repeat left bottom;background-size:cover;background-attachment:fixed; }
.flowarea h2 {font-size:1.6rem;}
.flowarea p {font-size:1.0rem;}
.flowarea .arrow {text-align:center;}
.flowarea .arrow img {width:100px;}
.flowarea .flow {width:1000px;max-width:100%;position:relative;margin:10px auto;background:#fff;border-radius:10px;padding:20px 20px 20px 150px;text-align:left;
background-repeat:no-repeat;background-position:left 40px top 2px;background-size:70px;
box-shadow:0px 0px 10px #000;}
.flowarea h2 {font-size:2.4rem;color:#fff;text-align:center;margin-bottom:50px;}
.flowarea .flow h2 {display:inline-block;width:auto;font-size:1.4rem;color:#000;margin-bottom:0px;
	background:url(../img/top/flowmore.svg) no-repeat right center;background-size:20px auto;padding-right:35px;cursor:pointer;}
.flowarea .flow h2.on {background-image:url(../img/top/flowclose.svg);}
.flowarea .flow p {display:none;border-top:solid #ccc 1px; padding:15px;margin:20px 50px 0px 0px;}
.flowarea .flow img.onpointcab {position:absolute;top:20px;right:20px;width:40px;}
.flowarea .flow h2 .more {display:inline-block;border:solid #000 1px;font-size:20px;line-height:20px;width:32px;height:32px;padding:5px;}
.flowarea .collist {width:1000px;max-width:100%;margin:10px auto;}
.flowarea .collist .inner01 .flow {width:calc(100% - 5px);margin:0px 5px 0px 0px;height:100%;}
.flowarea .collist .inner02 .flow {width:calc(100% - 5px);margin:0px 0px 0px 5px;height:100%;}
.flowarea .collist .flow p {margin-right:20px;}

.flowarea .flow1 {background-image:url(../img/top/flow01.svg);width:650px;max-width:50%;margin-bottom:50px;}
.flowarea .flow2 {background-image:url(../img/top/flow02.svg);}
.flowarea .flow3 {background-image:url(../img/top/flow03.svg);}
.flowarea .flow4 {background-image:url(../img/top/flow04.svg);}
.flowarea .flow5 {background-image:url(../img/top/flow05.svg);}
.flowarea .flow6 {background-image:url(../img/top/flow06.svg);width:650px;max-width:50%;margin-top:50px;}
*/
/*SP
@media (max-width: 896px){
	.flowarea {padding:15px;}
	.flowarea .flow {width:100%;padding:100px 20px 20px 20px;background-position:center top 20px;background-size:70px;box-shadow:0px 0px 10px #000;}
	.flowarea h3 {font-size:0.8rem;text-align:center;}
	.flowarea h2 {font-size:1.2rem;margin-bottom:7px;text-align:center;}
	.flowarea p {font-size:0.8rem;line-height:1.5em;}
}
*/

.productarea {background:#aaa;background:linear-gradient(#ccc, #333);}
.productarea .content {width:100%;max-width:100%;}
.productarea h2.catchtitle {text-align:center;background:#002;color:#fff;margin:0px 2px;font-size:1.4rem;font-weight:normal;padding:10px 0px;}
.productarea p {color:#fff;}
.productarea .collist {margin-bottom:20px;}
.productarea .inner {padding:1px 1px;}
.productarea .inner .box {background:#fff;height:100%;position:relative;}
.productarea .inner .textbox {padding:15px 30px 120px 30px;}
.productarea .inner h2 {color:#000;text-align:left;font-size:1.4rem;font-weight:normal;margin-bottom:15px;}
.productarea .inner h3 {font-size:1.4rem;font-weight:normal;margin-bottom:15px;}
.productarea .inner h4 {font-size:1.0rem;font-weight:bold;margin-bottom:8px;}
.productarea .inner p {color:#000;}
.productarea .inner img {width:100%;}
.productarea .inner .btnarea {position:absolute;bottom:30px;left:30px;}


.sampledata {background:#222;background:linear-gradient(#222, #000);}
.sampledata h2 {font-size:4.0rem;color:#fff;margin-bottom:0px;text-align:center;}
.sampledata h3 {font-size:1.8rem;color:#fff;margin-bottom:30px;text-align:center;}
.sampledata p {font-size:1.4rem;color:#fff;margin-bottom:50px;text-align:center;}
.sampledata .collist {width:1000px;max-width:100%;margin:0px auto;}
.sampledata .inner {padding:20px;}
.sampledata .inner .box {background:#eee;padding:20px 20px 100px 20px;height:100%;position:relative;}
.sampledata .inner img {width:100%;margin-bottom:7px;}
.sampledata .inner h3 {font-size:1.0rem;color:#000;margin-bottom:7px;text-align:left;}
.sampledata .inner p {font-size:0.8rem;color:#000;margin-bottom:0px;text-align:left;}
.sampledata .inner a.btn {position:absolute;bottom:20px;left:20px;}
/*SP*/
@media (max-width: 896px){
	.sampledata h2 {font-size:1.6rem;margin-bottom:10px;}
	.sampledata h3 {font-size:1.2rem;margin-bottom:20px;}
	.sampledata p {font-size:0.9rem;line-height:1.5em;}
	.sampledata .inner {padding:2px;}
	.sampledata .inner .box {padding:15px 15px 100px 15px;}
}


.linkarea {}
.linkarea .inner {padding:1px;position:relative;opacity:0;transform:translateY(100px);}
.linkarea .inner.on {opacity:1;transform:translateY(0px);transition:1s;}
.linkarea .inner .box {position:relative;}
.linkarea img {width:100%;position:relative;display:block;}
.linkarea h3 {position:absolute;bottom:0px;left:0px;width:100%;height:auto;background:rgba(0,0,0,0.8);color:#fff;font-weight:bold;text-align:center;padding:10px 0px;}
.linkarea .inner:hover img {filter:brightness(80%);}



/*PC-RES*/
@media (min-width: 897px){ @media (max-width: 1100px){
	.mainimgarea {height:150vh;}
	.mainimgarea .mainimg img {width:25vw;}
	.mainimgarea p {font-size:1.2rem;}
	.mainimgarea .ctaarea img {width:40px;margin-top:25px;}
	.newsarea ul {width:500px;}
	.newsarea ul li {font-size:0.8rem;}
}}