﻿.wrap .visualArea {position: relative; height:100%; min-height:100%; padding-top:4.75em; box-sizing:border-box;}
.wrap .textArea {position:relative; padding-top:7em; z-index:5}
.wrap .textArea p {margin-top:1em;}
.wrap .btnArea {position:relative; margin-top:2em;z-index:5}
.wrap .btnArea li {display:inline-block;}
.wrap .btnArea li a {display:inline-block; padding:0.6em 2.3em; border-radius:0.313em; color:#000000; border:0.063em solid #000000; font-size:1em; font-weight:600;}
.wrap .btnArea li a.btnColor {border-color:transparent; background-color:#ff9600}
.wrap .imgArea li img{position:absolute;}
.wrap .visualArea .sec01Area {position:relative; text-align:center; height:100%; min-height:100%;}
.wrap .visualArea .sec01Area .sec01 {position:relative; min-width:62.500em; height:100%;}
.wrap .visualArea .sec01Area .sec01 .mainBg {width:100%; background-color:#0e639c; background-image:linear-gradient(to top,#3456b4 20%, #2469ce 40%, #1d83c7 60%, #56a9ff 100%); min-height:100%; z-index:10;}
.wrap .visualArea .sec01Area .sec01 .mainBg:before {content:""; display:block; background:url(/images/bg/index_sec01_bg.png) repeat-y center; width:100%; height:100%; position:absolute; top:0; z-index:1}
.wrap .visualArea .sec01Area .sec01 .imgArea {position:absolute; width: 100%; top:360px;  z-index:10}
.wrap .visualArea .sec01Area .sec01 .imgArea ul {position: relative; width:1000px; margin:0 auto;}
.wrap .visualArea .sec01Area .sec01 .imgArea li img {object-fit:contain; object-position:center }

.wrap .visualArea .sec01Area .sec01 .imgArea li.img01 img {top:0px; left:47%; margin-left:-29.75em;}
.wrap .visualArea .sec01Area .sec01 .imgArea li.img02 img {top:245px; left:50%; margin-left:-9em;}
.wrap .visualArea .sec01Area .sec01 .imgArea li.img03 img {top:307px; left:50%; margin-left:-32.750em;}



.wrap .contentsArea {position: relative; height:auto; min-height:100%; padding-top:4.75em; box-sizing:border-box;}
.wrap .contentsArea .sec02Area {position:relative; text-align:center; margin-top:20em; height:79em; background-image:linear-gradient(to top,#f1f1f1 10%, #ffffff 100%);overflow:hidden;}
.wrap .contentsArea .sec02Area .btnArea li a {color:#0e639c; border-color:#0e639c; }
.wrap .contentsArea .sec02Area .btnArea li a.btnColor {background-color:#0e639c; color:#ffffff;}
.wrap .contentsArea .sec02Area .sec02 .imgArea li {position:absolute;}
.wrap .contentsArea .sec02Area .sec02 .imgArea li.imgEP {background:url(/images/bg/ep.png) no-repeat 100% center;left:70%; top:21em; z-index:5; width:126px; height:126px;}
.wrap .contentsArea .sec02Area .sec02 .imgArea li.imgGS {background:url(/images/bg/gs.png) no-repeat 100% center;left:70%; margin-left:8.5em; top:21em; z-index:5; width:126px; height:126px;}
.wrap .contentsArea .sec02Area .sec02 .imgArea li.img01 {background:url(/images/bg/index_sec02_img01.png) no-repeat 100% center; width:45.625em; height:31.875em; top:26em; left:50%; margin-left:-22.8125em; z-index:3}
.wrap .contentsArea .sec02Area .sec02 .imgArea li.img02 {background:url(/images/bg/index_sec02_img02.png) no-repeat 100% center; width:40.938em; height:32.688em; top:40em; left:50%; margin-left:-8em; z-index:2}
.wrap .contentsArea .sec02Area .sec02 .imgArea li.img03 {background:url(/images/bg/index_sec02_img03.png) no-repeat 100% center; width:40.313em; height:33.563em; top:50em; left:50%; margin-left:-31em; z-index:1}


.wrap .contentsArea .sec02Area .sec02 .imgArea li.img01,
.wrap .contentsArea .sec02Area .sec02 .imgArea li.img02,
.wrap .contentsArea .sec02Area .sec02 .imgArea li.img03,
.wrap .visualArea .sec01Area .sec01 .imgArea li.img02 {animation:floating 2s linear infinite;}
.wrap .visualArea .sec01Area .sec01 .imgArea li.img03 {animation:floating 2s linear infinite; animation-delay:0.3s;}

.wrap .contentsArea .sec03Area {position:relative; text-align:center; margin-top:5em}
.wrap .contentsArea .sec03Area .sec03 {max-width:62.500em; margin:0 auto;}
.wrap .contentsArea .sec03Area .clientList {margin-top:4.5em; margin-bottom:12em;}
.wrap .contentsArea .sec03Area .clientList img {object-fit:contain; object-position:center;}
.wrap .contentsArea .sec03Area .clientList > li {margin:0; padding:0; border-width:0.063em 0 0 0.063em; border-color:#dddddd; border-style:solid; }
.wrap .contentsArea .sec03Area .clientList > li:last-child {border-bottom-width:0.063em;}
.wrap .contentsArea .sec03Area .clientList > li ul {display:table; width:100%;}
.wrap .contentsArea .sec03Area .clientList > li ul li {display:inline-block; display:table-cell; width:22%; width:calc(100% / 5); box-sizing:border-box; border-right:0.063em solid #dddddd; height:7em; vertical-align:middle; }

.wrap .contentsArea .sec04Area {background-color: #0e639c;}
.wrap .contentsArea .sec04Area .sec04 {max-width:62.500em; margin:0 auto;}
.wrap .contentsArea .sec04Area .sec04 ul {padding:3em 0; text-align: center; display:table; width: 100%;}
.wrap .contentsArea .sec04Area .sec04 ul li {display:table-cell; color:#ffffff; font-weight:800}
.wrap .contentsArea .sec04Area .sec04 ul a {color:#ffffff; font-size:1em; font-weight:400}
.wrap .contentsArea .sec04Area .sec04 ul a:hover {text-decoration: underline;}
.wrap .contentsArea .sec04Area .sec04 ul li:last-child a {opacity:0.8}
.wrap .contentsArea .sec04Area .sec04 ul li:last-child a span {border:0.063em solid #ffffff; width:1em; height: 1em; display:inline-block; box-sizing:border-box; vertical-align:middle; line-height: 1em}



@media screen and (max-width: 1024px) {
	body .mobile {width: 100%; font-size:0.859em}
	body .wrap.mobile {min-width:auto}
    body .wrap.mobile h3 {font-size:3.7em;}
	body .wrap.mobile h4 {font-size:1.8em;}
	body .wrap.mobile h5 {font-size:1.5em;}
	body .wrap.mobile p {font-size:0.95em;}

    .wrap.mobile .textArea {padding:6em 2em 0;}
    .wrap.mobile .visualArea .sec01Area .sec01 {min-width:auto;}
    .wrap.mobile .visualArea .sec01Area .sec01 .textArea {padding-top:8em;}
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea {top:380px;}
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea ul {width:90%;}
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea li img {margin-left:0 !important;;}
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea li.img01 img {left:0; width:100%}
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea li.img02 img {left:0; top:200px; width:45%}
    .wrap.mobile .visualArea .sec01Area .sec01 .imgArea li.img03{display:none;}

	.wrap.mobile .contentsArea .sec02Area {margin-top:0em;}
    .wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li {background-size:contain !important;}
	
	.wrap.mobile .contentsArea .sec03Area {margin-top:0;}
	.wrap.mobile .contentsArea .sec03Area .clientList {padding-right:0.5em; padding-left:0.5em; margin-bottom:5em;}
	.wrap.mobile .contentsArea .sec03Area .clientList > li {height:5.5em}
	.wrap.mobile .contentsArea .sec03Area .clientList > li ul li {width:calc(100% / 5); height:6em; padding:0.2em;}
	.wrap.mobile .contentsArea .sec03Area .clientList li img {width:80%; height:90%;}


}

@media screen and (max-width: 768px) {
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea li.img02 img {left:0; top:130px; width:45%}
	.wrap.mobile .visualArea .sec01Area .sec01 .textArea p br {display:none}

	.wrap.mobile .contentsArea .sec02Area {margin-top:9em;}
	.wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li {margin-left:0 !important;}
	.wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li.imgEP {left:auto; right:0.5em; top:29em; width:80px; height:80px;}
	.wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li.imgGS {left:auto; right:calc(1em + 80px); margin-left:8.5em; top:29em; width:80px; height:80px;}
	.wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li.img01 {width:100%; left:0; top:32em;}
	.wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li.img02 {width:95%; right:0.5em; left:auto; top:43.5em;}
	.wrap.mobile .contentsArea .sec02Area .sec02 .imgArea li.img03 {width:80%; left:0.5em; top:52em;}	
	.wrap.mobile .sec02Area .sec02 .textArea p br {display:none}

	.wrap .contentsArea .sec04Area .sec04 ul {display: block; padding:1.5em 0 ;}
	.wrap .contentsArea .sec04Area .sec04 ul li {display:block; padding:0.5em 0; text-align:center !important;}
}

@media screen and (max-width: 414px) {
	.wrap.mobile .textArea {padding-top:8em;}
	body .wrap.mobile h3 {font-size:2.8em;}
	.wrap.mobile .contentsArea {padding-top:0;}
	.wrap.mobile .visualArea .sec01Area .sec01 .imgArea{top:400px;}

	.wrap.mobile .contentsArea .sec03Area .clientList > li {height:3.5em; overflow:hidden;}
	.wrap.mobile .contentsArea .sec03Area .clientList > li ul li {width:calc(100% / 4); height:4em; padding:0.5em 0.2em;}
	.wrap.mobile .contentsArea .sec03Area .clientList > li ul li:last-child {display:none}

	}





















