@charset "utf-8";
.introduction-wrap {
  
}
.introduction-wrap > p{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 50px 0;
  text-align: center;
}
@media print, screen and (min-width:781px) {
  .introduction-wrap{
    width: 100%;
    position: relative;
  }
  .introduction-wrap:before{
    background: url("../img/bg_main.jpg") center center no-repeat;
    background-size: cover;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
@media screen and (max-width: 780px) {
  .introduction-wrap {
    overflow: hidden;
  }
  .introduction-wrap > p{
    display: none;
  }
}



.introduction-contents{
  position: relative;
}
.cloud1,
.cloud2,
.cloud3,
.cloud4,
.cloud5{
  position: absolute;
  z-index: 3;
}
.cloud1{
  width: 33.3955%;
  right: -6.343%;
  top: -.5%;
  animation:cloud 2.8s ease-in infinite alternate both;
}
.cloud2{
  width: 52.4253%;
  left: -24.06%;
  top: 4%;
  animation:cloud 3.5s ease-in infinite alternate both;
}
.cloud3{
  width: 33.3955%;
  right: -90px;
  top: 10.8%;
  animation:cloud 3s ease-in infinite alternate both;
}
.cloud4{
  width: 24.813%;
  right: -9.3283%;
  bottom: 10.5%;
  animation:cloud 3.6s ease-in infinite alternate both;
}
.cloud5{
  width: 30.003%;
  left: -14.5522%;
  bottom: 5.2%;
  animation:cloud 3.2s ease-in infinite alternate both;
}
@media print, screen and (min-width:781px) {
  .introduction-contents{
    background-color: #FFF;
    margin: 0 auto;
    width: 90%;
    max-width: 536px;
  }
}
@media screen and (max-width: 780px) {
  .cloud1{
    width: 45.7692%;
    right: -9.487%;
    top: .7%;
  }
  .cloud2{
    width: 53.4615%;
    left: -15.641%;
    top: auto;
    bottom: 91.8%;
  }
  .cloud3{
    width: 33.3955%;
    right: -90px;
    top: 13.8%;
  }
}




.introduction-catch{
  background: rgb(158,187,255);
  background: linear-gradient(0deg, rgba(158,187,255,1) 0%, rgba(75,88,255,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 106.34%;
  position: relative;
}
.introduction-catch > .catch{
  width: 43.65%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
  .introduction-catch{
    padding-bottom: 0;
    height: calc(100vh - 100px);
    position: relative;
  }
}



.introduction-sec1{
  background-color: #C6DEF5;
  position: relative;
  padding-bottom: 251.86%;
  overflow: hidden;
}
.introduction-sec1 .ttl{
  width: 31.34%;
  position: absolute;
  left: 50%;
  top: 8.8888%;
  transform: translateX(-50%);
}
.introduction-sec1 .sub{
  width: 5.597%;
  position: absolute;
  right: 5.597%;
  top: 2.9629%;
}
.introduction-sec1 > .txt{
  width: 62.87%;
  position: absolute;
  left: 50%;
  top: 16.148%;
  transform: translateX(-50%);
}
.introduction-sec1 .ilust-wrap{
  padding-bottom: 138.19%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 42.44444%;
}
.introduction-sec1 .ilust-wrap .ilust1{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec1 .ilust-wrap .ilust2{
  width: 13.05%;
  position: absolute;
  left: 1.4925%;
  top: 62.91%;
  z-index: 2;
}
.introduction-sec1 .ilust-wrap .ilust3{
  width: 100%;
  position: absolute;
  left: 0;
  top: 18.766%;
  z-index: 2;
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}



.introduction-sec2{
  background-color: #FFF;
  position: relative;
  padding-bottom: 247.7761%;
  overflow: hidden;
}
.introduction-sec2 .ttl{
  width: 40.29%;
  position: absolute;
  left: 50%;
  top: 9.111%;
  transform: translateX(-50%);
  z-index: 2;
}
.introduction-sec2 > .txt1{
  width: 69.77%;
  position: absolute;
  left: 50%;
  top: 17.9969%;
  transform: translateX(-50%);
  z-index: 2;
}
.introduction-sec2 > .txt2{
  width: 46.64%;
  position: absolute;
  left: 50%;
  top: 40.1355%;
  transform: translateX(-50%);
  z-index: 2;
}

.introduction-sec2 .ilust-wrap{
  padding-bottom: 178.041%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 22.74%;
  z-index: 1;
}
.introduction-sec2 .ilust-wrap .ilust1{
  width: 101.67%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec2 .ilust-wrap .ilust2{
  width: 101.67%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec2 .ilust-wrap .ilust3{
  width: 101.67%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec2 .ilust-wrap .ilust4{
  width: 61.9421%;
  position: absolute;
  left: 22.9477%;
  top: 59.709%;
  z-index: 2;
}
.introduction-sec2 .bg{
  background-color: #84EAEA;
  padding-bottom: 151.177%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0%;
  z-index: 0;
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}



.introduction-sec3{
  background-color: #FFF;
  position: relative;
  padding-bottom: 284.328%;
  overflow: hidden;
}
.introduction-sec3 .ttl{
  width: 64.738%;
  position: absolute;
  left: 50%;
  top: 7.5459%;
  transform: translateX(-50%);
  z-index: 2;
}
.introduction-sec3 > .txt1{
  width: 67.1641%;
  position: absolute;
  left: 50%;
  top: 19.291%;
  transform: translateX(-50%);
  z-index: 2;
}


.introduction-sec3 .ilust-wrap{
  padding-bottom: 201.457%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 31.1023%;
  z-index: 1;
}
.introduction-sec3 .ilust-wrap .ilust1{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec3 .ilust-wrap .ilust2{
  width: 100%;
  position: absolute;
  right: 0%;
  bottom: 0%;
  z-index: 2;
}
.introduction-sec3 .ilust-wrap .ilust3{
  width: 97.0149%;
  position: absolute;
  left: 4.1044%;
  top: 12.5948%;
  z-index: 2;
}
.introduction-sec3 .ilust-wrap .ilust4{
  width: 97.0149%;
  position: absolute;
  left: 4.1044%;
  top: 12.5948%;
  z-index: 2;
}
.introduction-sec3 .ilust-wrap .ilust5{
  width: 97.0149%;
  position: absolute;
  left: 4.1044%;
  top: 12.5948%;
  z-index: 2;
}
.introduction-sec3 .ilust-wrap .ilust6{
  width: 70.854%;
  position: absolute;
  left: 5.41%;
  top: 1.9447%;
  z-index: 2;
}
.introduction-sec3 .bg{
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(163,209,243,1) 100%);
  padding-bottom: 136.343%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0%;
  z-index: 0;
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}



.introduction-sec4{
  background: url("../img/img_sec4_1.png") center center no-repeat;
  background-size: cover;
  background-color: #98C9F0;
  position: relative;
  padding-bottom: 298.5074%;
}
.introduction-sec4 .ttl{
  width: 61%;
  position: absolute;
  left: 50%;
  top: 7.5%;
  transform: translateX(-50%);
}
.introduction-sec4 > .txt1{
  width: 62.873%;
  position: absolute;
  left: 50%;
  top: 16.25%;
  transform: translateX(-50%);
}
.introduction-sec4 > .txt1-2{
  width: 48.694%;
  position: absolute;
  left: 50%;
  top: 23.5%;
  transform: translateX(-50%);
}
.introduction-sec4 > .txt2{
  width: 52.238%;
  position: absolute;
  left: 50%;
  bottom: 22.75%;
  transform: translateX(-50%);
}
.introduction-sec4 > .txt3{
  width: 46.8283%;
  position: absolute;
  left: 50%;
  bottom: 7.375%;
  transform: translateX(-50%);
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}





.introduction-sec5{
  background-color: #C5E2F8;
  position: relative;
  padding-bottom: 223.88%;
}
.introduction-sec5 .ttl{
  width: 71.268%;
  position: absolute;
  left: 50%;
  top: 22.916%;
  transform: translateX(-50%);
  z-index: 2;
}
.introduction-sec5 > .txt1{
  width: 66.044%;
  position: absolute;
  left: 50%;
  top: 9.8333%;
  transform: translateX(-50%);
  z-index: 2;
}


.introduction-sec5 .ilust-wrap{
  padding-bottom: 139.925%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 29.41666%;
  z-index: 1;
}
.introduction-sec5 .ilust-wrap .ilust1{
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec5 .ilust-wrap .ilust2{
  width: 68.2835%;
  position: absolute;
  left: 15.6716%;
  bottom: 0%;
  z-index: 1;
}
.introduction-sec5 .ilust-wrap .ilust3{
  width: 68.2835%;
  position: absolute;
  left: 15.6716%;
  bottom: 0%;
  z-index: 1;
}
.introduction-sec5 .ilust-wrap .ilust4{
  width: 68.2835%;
  position: absolute;
  left: 15.6716%;
  bottom: 0%;
  z-index: 1;
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}



.introduction-sec6{
  background-color: #84EAEA;
  position: relative;
  padding-bottom: 261.194%;
}
.introduction-sec6 .ttl{
  width: 61.753%;
  position: absolute;
  left: 50%;
  top: 9.07142%;
  transform: translateX(-50%);
}
.introduction-sec6 > .txt1{
  width: 58.022%;
  position: absolute;
  left: 50%;
  top: 17%;
  transform: translateX(-50%);
}
.introduction-sec6 > .txt2{
  width: 64.179%;
  position: absolute;
  left: 50%;
  bottom: 22.785%;
  transform: translateX(-50%);
}
.introduction-sec6 > .txt3{
  width: 86%;
  position: absolute;
  left: 50%;
  bottom: 10.428%;
  transform: translateX(-50%);
}


.introduction-sec6 .ilust-wrap{
  padding-bottom: 147.7611%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 20.07142%;
  z-index: 1;
}
.introduction-sec6 .ilust-wrap .ilust1{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.introduction-sec6 .ilust-wrap .ilust2{
  width: 100%;
  position: absolute;
  left: 0%;
  bottom: 0%;
  z-index: 1;
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}



.introduction-sec7{
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(165,209,243,1) 100%);
  position: relative;
  padding-bottom: 270.522%;
}
.introduction-sec7 .txt1{
  width: 59.888%;
  position: absolute;
  left: 50%;
  top: 10.2068%;
  transform: translateX(-50%);
  z-index: 1;
}
.introduction-sec7 > .txt2{
  width: 54.1044%;
  position: absolute;
  left: 50%;
  bottom: 29.1034%;
  transform: translateX(-50%);
  z-index: 1;
}
.introduction-sec7 > .txt3{
  width: 54.6641%;
  position: absolute;
  left: 50%;
  bottom: 16.1379%;
  transform: translateX(-50%);
  z-index: 1;
}

@keyframes cloud{
  0% {
    transform:translate(2px,30px);
  }
  100% {
    transform:translate(-2px,0px);
  }
}
.introduction-sec7 .ilust-wrap{
  padding-bottom: 60.7855%;
  width: 78.5447%;
  position: absolute;
  left: 13.059%;
  top: 27.0344%;
  z-index: 0;
  animation:cloud 3s ease-in infinite alternate both;
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}




.bounceInDown-trigger,
.bounceInDown-trigger2{
  opacity: 0;
}
.bounceInDown-trigger.animate__bounceInDown,
.bounceInDown-trigger2.animate__bounceInDown{
  opacity: 1;
}
.anim-fade-scale{
	opacity: 0;
	transform: scale(1.5, 1.5);
	transition: ease-out .3s;
}
.anim-fade-scale.show{
	opacity: 1;
	transform: scale(1, 1);
}
.anim-fade-dup{
	opacity: 0;
	transform: translateY(20px);
	transition: ease-out .5s;
}
.anim-fade-dup.show{
	opacity: 1;
	transform: translateY(0);
}
@media print{
  .bounceInDown-trigger,
  .bounceInDown-trigger2{
    opacity: 1;
  }
  .anim-fade-scale{
    opacity: 1;
    transform: scale(1, 1);
  }
  .anim-fade-dup{
    opacity: 1;
    transform: translateY(0);
  }
}
@media print, screen and (min-width:781px) {
}
@media screen and (max-width: 780px) {
}