@font-face {
  font-family: "TsunagiGothic";
  src: url("fonts/tsunagi-gothic.woff2") format("woff2"), url("fonts/tsunagi-gothic.woff") format("woff");
  font-display: swap;
}
/*========================================================================
   index layout
========================================================================*/
#mainVisual {
  background: url(../movie/top.jpg) no-repeat center center/cover;
  aspect-ratio: 16/9;
}

#greeting.wave_pink {
  padding-bottom: 0.4%;
}
#greeting {
  background: url(../img/bg_pink.jpg);
}
#greeting .txtArea {
  margin-top: 3.5em;
}
#greeting .imgArea {
  width: 100%;
  position: relative;
  z-index: 1;
}
#greeting .imgArea .img01 {
  width: 80%;
  margin-left: auto;
}
#greeting .imgArea .img02 {
  width: 64%;
}
@media screen and (min-width: 1152px) {
  #greeting.wave_pink {
    padding-bottom: 2.4%;
  }
  #greeting .imgArea {
    margin-right: -7.5%;
    margin-left: -1.5%;
  }
}

@media screen and (min-width: 480px) {
  #point01 .img01 {
    width: 85%;
  }
  #point01 .img02 {
    width: 55%;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  #point01 .row {
    justify-content: space-between;
  }
  #point01 .img01 {
    width: 85%;
    order: 3;
  }
  #point01 .img02 {
    width: auto;
    margin-left: 0;
    margin-right: -8%;
    align-self: flex-end;
  }
}
@media screen and (min-width: 1344px) {
  #point01 .txtArea {
    width: 415px;
    margin-block: 4em;
    order: 2;
  }
  #point01 .img01 {
    width: auto;
    margin-left: -19%;
    order: 1;
  }
  #point01 .img02 {
    margin-left: 0;
    margin-right: -9%;
    order: 3;
  }
}

@media screen and (min-width: 480px) {
  #point02 .img01 {
    width: 55%;
    margin-left: auto;
    margin-top: -10%;
  }
  #point02 .img02 {
    width: 85%;
  }
}
@media screen and (min-width: 768px) {
  #point02 .row {
    justify-content: space-between;
  }
  #point02 .img01 {
    width: auto;
    margin-left: 0;
    margin-right: -9%;
    margin-top: 0;
    align-self: center;
  }
  #point02 .img02 {
    width: 85%;
    margin-left: auto;
    margin-top: -9%;
  }
}
@media screen and (min-width: 1152px) {
  #point02 .txtArea {
    width: 380px;
    margin-block: 2em;
  }
  #point02 .img01 {
    margin-right: -13%;
    align-self: flex-start;
  }
  #point02 .img02 {
    margin-top: 10%;
    margin-left: 0;
    margin-right: -8%;
    align-self: flex-end;
  }
}