@charset "utf-8";

.mainImg {
	width:100%;
	height:auto;
	margin: 0 auto 96px;
}
h2 {
	display: block;
	width:475px;
	margin: 0 auto 80px;
}
section .lead {
	margin-bottom: 94px;
}

.pc_img {
	display: block;
}
.sp_img {
	display: none;
}

.concepttxt {
	max-width: 1240px;
	width: 100%;
	text-align: center;
	margin: 0 auto 82px;
	padding: 0 20px;
}
.concepttxt span {
	font-size: 2.2rem;
}
.function {
	display: block;
	width:100%;
	/*background:url(../img/iot/point_bg.jpg) no-repeat center center;
	background-size: 480px auto;*/
	margin: 0 auto 80px;
	position: relative;
}
.function .sixpadImg {
	width:480px;
	height: 476px;
	position:absolute;
	margin: auto;
	top:-60px;
	bottom:0;
	left:0;
	right:0;
}
.function .sixpadImg ul li {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;

}
.function .sixpadImg img {
	width:100%;
	height:auto;
	position: absolute;
	top:initial;
	top:auto;
	left:initial;
	left:auto;
	z-index:0;
}
.function .topFunc {
	margin: 0 auto 283px;
}

.function .cont1, .function .cont2 {
	width:50%;
	float:left;
	box-sizing: border-box;
	position: relative;
}
.function .cont1 {
	padding: 0 250px 0 42px;
}
.function .cont2 {
	padding: 0 42px 0 250px;
}
.function .cont3 {
	padding: 0 42px 0 25px;
}

.function .cont3 {
	width:50%;
	float:right;
	box-sizing: border-box;
	position: relative;
}
.function img {
	width:130px;
	height:auto;
	position: absolute;
	top:-44px;
	left:150px;
	z-index:2;
}
.function .cont1 img {
	left:initial;
	left:auto;
	right:150px;
}
.function .cont3 img {
  left: -64px;
}

.function .txtWrap {
	width:100%;
	max-width: 460px;
	box-sizing: border-box;
	background:#EEE;
	padding: 0 0 44px;
	position: relative;
}
.function .cont1 .txtWrap {
	float:right;
}
.function .txtWrap .subttl {
	position: absolute;
	top:-14px;
	left:72px;
}
.function .cont1 .txtWrap .subttl {
	left:20px;
}
.function .subttl .func {
	font-size: 1.8rem;
	display: inline-block;
	padding: 0;
}
.function .subttl .num {
	font-size: 4.2rem;
	position: absolute;
	top:-27px;
	left:80px;
}
.function .txtWrap .mainttl {
	position: relative;
	padding: 30px 40px 0 0;
}
.function .cont1 .txtWrap .mainttl {
	padding: 30px 25px 0 20px;
}
.function .txtWrap h3 {
	display: block;
	font-size: 2.2rem;
	line-height:1.5;
	box-sizing: border-box;
	width:100%;
	padding: 0 0 6px 0;
	margin: 0 0 30px 72px;
	border-bottom: solid 1px #000;
}
.function .cont1 .txtWrap h3 {
	padding: 0 0 0 40px;
  margin: 0 0 30px -45px;
}
.function .txtWrap .functxt {
	padding: 0 20px 0 72px;
}
.function .cont1 .txtWrap .functxt {
	padding: 0 72px 0 20px;
}


#animation_container #canvas {
    max-width: 95%;
    max-height: 95%;
    left: 50%;
    transform: translateX(-50%);
}


@media screen and (max-width: 1500px) {
	.function .cont1 {
		padding: 0 12% 0 42px;
	}
	.function .cont2 {
		padding: 0 42px 0 12%;
	}
	.function img {
		left: 12%;
	}
	.function .cont1 img {
	    right: 12%;
	}
}
@media screen and (max-width: 1200px) {
	.function .txtWrap h3 {
		font-size: 1.8rem;
	}
	.function .cont1 {
		padding: 0 7% 0 42px;
	}
	.function .cont2 {
		padding: 0 42px 0 7%;
	}

	.function img {
	    left: 5%;
	    width: 100px;
	}
	.function .cont1 img {
	    right: 5%;
	    width: 100px;
	}
	.function .cont3 img {
	    left: -50px;
	}

	.function .cont3 .txtWrap .mainttl {
	    padding: 30px 20px 0 0;
	}
	.function .cont3 .txtWrap h3 {
		margin: 0 0 30px 52px;
	}
	.function .cont3 .txtWrap .subttl {
	    left: 52px;
	}
	.function .cont3 .txtWrap .functxt {
	    padding: 0 20px 0 52px;
	}
}
@media screen and (max-width: 880px) {
	.function .cont1 .txtWrap .mainttl {
	    padding: 30px 35px 0 20px;
	}
	.function .cont2 .txtWrap .mainttl {
	    position: relative;
	    padding: 30px 55px 0 0;
	}
	.function .cont3 .txtWrap .mainttl {
	    padding: 30px 25px 0 0;
	}
	.function .cont2 .txtWrap .subttl {
	    position: absolute;
	    top: -14px;
	    left: 82px;
	}
	.function .cont2 .txtWrap h3 {
		margin: 0 0 30px 82px;
	}
	.function .cont1 .txtWrap .functxt {
	    padding: 0 82px 0 20px;
	}
	.function .cont2 .txtWrap .functxt {
	    padding: 0 20px 0 82px;
	}

}
@media screen and (max-width: 800px) {
	.concepttxt {
		text-align: left;
	    margin: 0 auto;
	}
	.function {
    /*padding: 400px 0 80px;*/
    padding:0 0 70px;
    margin: 0 auto 0;
    /*background:url(../img/iot/point_bg.jpg) no-repeat center 70px;
    background-size: 320px auto;*/
	}
	.function .sixpadImg {
		width:100%;
		height:auto;
		box-sizing: border-box;
		position:static;
		margin: 10px auto;
		padding:0;
	}
	.function .sixpadImg img {
    width: 100%;
    height: auto;
    position: static;
	}
	.function .topFunc {
	    margin: 0 auto;
	}
	.function .cont1, .function .cont2 {
	    width: 100%;
	}
	.function .cont1 {
		padding: 0 7% 0 36px;
		margin: 0 auto 70px;
	}
	.function .cont2 {
		padding: 0 36px 0 7%;
		margin: 0 auto 70px;
	}
	.function .cont3 {
    width: 100%;
	}
	.function .cont3 .txtWrap h3 {
		padding: 0 0 0 40px;
	  margin: 0 0 30px -45px;
	}
	.function img {
    left: 20px;
    width: 130px;
	}
	.function .cont1 img, .function .cont3 img {
		left:initial;
		left:auto;
		right: 20px;
		width: 130px;
	}
	.function .txtWrap {
    max-width: initial;
    max-width: auto;
	}
	.function .cont1 .txtWrap {
	   float: right;
	}
	.function .cont1, .function .cont3 {
	    padding: 0 100px 0 42px;
	}
	.function .cont2 {
	    padding: 0 42px 0 100px;
	}
	.function .cont2 .txtWrap .subttl {
	    left: 72px;
	}
	.function .cont1 .txtWrap .subttl,
	.function .cont3 .txtWrap .subttl {
	    left: 20px;
	}
	.function .cont2 .txtWrap .mainttl {
	    padding: 30px 50px 0 0;
	}
	.function .cont1 .txtWrap .mainttl,
	.function .cont3 .txtWrap .mainttl {
	    padding: 30px 25px 0 20px;
	}
	.function .cont2 .txtWrap h3 {
	    margin: 0 0 30px 72px;
	}
	.function .cont1 .txtWrap .functxt,
	.function .cont3 .txtWrap .functxt {
	    padding: 0 72px 0 20px;
	}
	.function .cont2 .txtWrap .functxt {
	    padding: 0 20px 0 72px;
	}

}
@media screen and (max-width: 640px) {

	.pc_img {
		display: none;
	}
	.sp_img {
		display: block;
	}

	.function .cont2 .txtWrap .subttl {
	    left: 92px;
	}
	.function .cont2 .txtWrap h3 {
	    margin: 0 0 30px 70px;
	}

}
@media screen and (max-width: 460px) {
	h2 {
    display: block;
    width: 100%;
    margin: 0 auto 80px;
    padding: 0 20px 0 10px;
	}
	section .lead {
	   margin-bottom: 60px;
	}
	.mainImg {
	    margin: 0 auto 60px;
	}
	.function {
	    /*padding: 300px 0 0;
	    margin: -50px auto 50px;
	    background: url(../img/iot/point_bg.jpg) no-repeat center 50px;
  		background-size: 250px auto;*/
			overflow: hidden;
	}
	.function img {
	    left: 10px;
	    width: 80px;
	}
	.function .cont1 img, .function .cont3 img {
	    left: initial;
	    left: auto;
	    right: 10px;
	    width: 80px;
	}
	.function .cont1, .function .cont2, .function .cont3 {
    padding: 0 20px;
	}
	.function .txtWrap h3 {
    font-size: 1.6rem;
	}
	.function .cont2 .txtWrap h3 {
    margin: 0 0 60px 80px;
    padding: 0 46px 6px 10px;
	}
	.function .cont1 .txtWrap h3, .function .cont3 .txtWrap h3 {
    margin: 0 0 60px -55px;
    padding: 0 10px 10px 40px;
	}
	.function .txtWrap .subttl {
	    left: 80px;
	}
	.function .cont1 .txtWrap .functxt,
	.function .cont2 .txtWrap .functxt,
	.function .cont3 .txtWrap .functxt {
	    padding: 0 20px;
	}

}
@media screen and (max-width: 410px) {
	.function .cont2 .txtWrap h3 {
	    margin: 0 0 60px 80px;
	}
	.concepttxt span {
		font-size: 1.8rem;
		text-align: center;
		display: block;
	}
}
@media screen and (max-width: 330px) {
	.function .cont2 .txtWrap .subttl {
	    left: 82px;
	}
	.function .cont2 .txtWrap h3 {
	    margin: 0 0 60px 70px;
	    padding: 0 26px 6px 10px;
	}
	.function .txtWrap h3 {
	    font-size: 1.6rem;
	    padding: 0 46px 6px 0;
	    margin: 0 0 30px 80px;
	}
	.function .cont1 .txtWrap h3, .function .cont3 .txtWrap h3 {
	    margin: 0 0 40px -45px;
	    padding: 0 10px 26px 40px;
	}


}