html {
  max-width: 1400px;
  margin: 0 auto;
  background-color: #D5C2DB; /* Fills the page */

  -webkit-overflow-scrolling: touch;
}

body {
  font-family : "ヒラギノ角ゴ ProN" , sans-serif;
}

img{
width:100%;
margin: 0px;
padding: 0px; 
vertical-align: bottom;
image-rendering: -webkit-optimize-contrast;
image-rendering: auto;
}

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0px;
}

a:hover{opacity:0.8;}
.info{width:80%;margin:0 auto 5vw;}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

a{
text-decoration: none; 
color:black;

}

h1{
 margin: 0;
 padding: 0; 

}


h2{

}

h3{

}

h4{

}

h5{
}

h6{

}

.areamain{
      max-width:1400px;
      overflow:hidden;
      position:relative;
      margin:0 auto;
}

.balloon {
    animation: sway 3s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(0px);
    }

    /* 途中の位置 */
    50% {
        transform: translateY(7px);
    }
}

.balloondelay {
    animation: sway 4s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(9px);
    }
    /* 途中の位置 */
    50% {
        transform: translateY(0px);
    }
}


@media screen and (max-width: 750px) {
	
#top {
	width: 100%;
	}
	
.mainparts {
	width:40%;
    top:3%;
    left: 24%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.mainparts2 {
	width:40%;
    top:33%;
    left: 24%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.mainparts3 {
	width:15%;
    top:43.5%;
    left: 13.5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.mainparts4 {
	width:15%;
    top:8%;
    left: 86%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.parts1{
    width:10%;
    top:15%;
    left: 87%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts2{
    width:12%;
    top:16%;
    left: 38%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts3{
    width:12%;
    top:0%;
    left: 5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts4{
    width:16%;
    top:0%;
    left: 80%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts5{
    width:16%;
    top:2%;
    left: 10%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts6{
    width:16%;
    top:36%;
    left: 80%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts7{
    width:16%;
    top:1%;
    left: 8%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts8{
    width:70%;
	top: 65%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts12{
    width:75%;
	top: 15%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts13{
    width:75%;
	bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts14{
    width:25%;
	top: 1%;
    left: 10%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features1 {
    width:72%;
	top: 13%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features2 {
    width:72%;
	top: 34%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features3 {
    width:72%;
    bottom:25%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features4 {
    width:72%;
    bottom:4%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.career1 {
    width:90%;
	top: 20.5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.career2 {
    width:90%;
	top: 36.5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.career3 {
    width:90%;
	top: 52.5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.other1 {
    width:61%;
	top: 15%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.other2 {
    width:61%;
	top: 40%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.sns1 {
    width:20%;
    top:72%;
    left: 20%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.sns2 {
    width:20%;
    top:72%;
    left: 40%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.sns3 {
    width:20%;
    top:72%;
    left: 60%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.sns4 {
    width:20%;
    top:72%;
    left: 80%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
/***追従するトップへ戻るボタン***/
#page-top {
	width: 15vw;
    position: fixed;
    right: 3vw;
    bottom: 10vw;
    z-index: 9999;

}	
	
}




@media screen and (min-width: 750px){

.mainparts {
	width:15%;
    top:3%;
    left: 16%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.mainparts2 {
	width:21%;
    top:37%;
    left: 24.7%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.mainparts3 {
	width:6%;
    top:37%;
    left: 15%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.mainparts4 {
	width:6%;
    top:0%;
    left: 85%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	}
	
.parts1{
    width:5%;
    top:20%;
    left: 87%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
.parts2{
    width:7%;
    top:23%;
    left: 57%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts3{
    width:10%;
    top:18%;
    left: 7%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts3b{
    width:10%;
    top:66%;
    left:78%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts5{
    width:10%;
    top:6%;
    left: 10%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts6{
    width:10%;
    top:22%;
    left: 80%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts7{
    width:10%;
    top:2%;
    left: 12%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts7b{
    width:8%;
    top:12%;
    left: 80%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts8{
    width:35%;
	top: 65%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts9{
    width:7%;
    top:1%;
    left: 15%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts10{
    width:7%;
    top:3%;
    left: 75%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts11{
    width:10%;
    top:3%;
    left: 75%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.parts12{
    width:32%;
	top: 20%;
    left: 30%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts13{
    width:32%;
	top: 20%;
    left: 70%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.parts14{
    width:15%;
	top: 3%;
    left: 15%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features1 {
    width:32%;
	top: 20%;
    left: 31%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features2 {
    width:32%;
	top: 24%;
	left: 69%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features3 {
    width:32%;
    bottom:8%;
    left: 31%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.features4 {
    width:32%;
    bottom:4%;
    left: 69%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.career1 {
    width:20%;
	top: 29%;
    left: 25.2%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.career2 {
    width:20%;
	top: 29%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.career3 {
    width:20%;
	top: 29%;
    left: 74.8%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.other1 {
    width:26%;
	top: 23%;
    left: 35%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.other2 {
    width:26%;
	top: 23%;
    left: 65%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.sns1 {
    width:9%;
    top:64%;
    left: 29.5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.sns2 {
    width:9%;
    top:64%;
    left: 43%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.sns3 {
    width:9%;
    top:64%;
    left: 56.7%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
.sns4 {
    width:9%;
    top:64%;
    left: 71%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
	z-index: 100;
}
	
/***追従するトップへ戻るボタン***/
#page-top {
	width: 10vw;
	max-width: 80px;
    position: fixed;
    right: 3vw;
    bottom: 5vw;
    z-index: 9999;

}	

}