/*========================================================================
   index layout
========================================================================*/
#index #mainVisual {
  background: url(../movie/top.jpg) no-repeat center/cover;
  max-height: unset;
}

#greeting {
  padding-bottom: 0;
}
#greeting .bg_wave::after {
  z-index: 1;
}
#greeting .txtArea.bgwhite {
  background-color: rgba(255, 255, 255, 0.6);
}
#greeting .ill img {
  max-width: 100%;
  max-height: 100%;
}
#greeting .greeting01 .ill_sea {
  max-width: 365px;
  width: 80%;
  margin-left: auto;
  margin-bottom: -30px;
}
#greeting .greeting01 .ill_fish01 {
  width: 99px;
  float: right;
  margin-left: 0.5em;
  margin-top: 0.5em;
}
@media screen and (min-width: 992px) {
  #greeting .greeting01 .ill_fish01 {
    margin: 1em 0 0 1em;
  }
}
#greeting .greeting02 .ill_fishing {
  max-width: 133px;
  height: 8.5em;
  float: right;
  margin-left: 0.5em;
  margin-top: 0.5em;
}
@media screen and (min-width: 480px) {
  #greeting .greeting02 .ill_fishing {
    margin-top: -2em;
  }
}
@media screen and (min-width: 992px) {
  #greeting .greeting02 .ill_fishing {
    margin-top: 2em;
  }
}
#greeting .greeting03 {
  padding-bottom: 0.6em;
}
#greeting .greeting03 .ill {
  margin-right: 1.3em;
  margin-top: 0.5em;
  margin-bottom: 0.7em;
  max-width: 267px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (min-width: 480px) {
  #greeting .greeting03 .ill {
    float: left;
    width: 45%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (min-width: 992px) {
  #greeting .greeting03 .ill {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: absolute;
    left: 0;
    bottom: -150px;
  }
}
#greeting .greeting03 .ill_skewers {
  width: 110px;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  position: relative;
  top: -15px;
}
#greeting .greeting03 .ill_frying-pan {
  width: 157px;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  margin-left: auto;
}
@media screen and (min-width: 992px) {
  #greeting .container {
    width: 100%;
  }
  #greeting .greeting01 .imgArea {
    max-width: 750px;
    margin-right: -17%;
    margin-top: 100px;
  }
  #greeting .greeting02 {
    margin-bottom: 1.8em;
  }
  #greeting .greeting02 .imgArea {
    max-width: 540px;
  }
}
@media screen and (min-width: 992px) and (min-width: 1200px) {
  #greeting .greeting02 .imgArea {
    margin-top: -100px;
  }
}
@media screen and (min-width: 992px) {
  #greeting .greeting03 .txtArea {
    margin-bottom: 150px;
  }
  #greeting .greeting03 .imgArea {
    max-width: 660px;
  }
}

#point {
  background-color: #fff;
  color: #222;
}
#point .txtArea h3 {
  line-height: 1.4;
}
#point .txtArea h3 .sub {
  font-size: 0.66em;
}
#point .txtArea h3 .eng {
  color: #6bc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
#point .txtArea h3 .eng img {
  width: 101px;
  margin-left: 0.2em;
}
@media screen and (min-width: 480px) {
  #point .ill {
    margin-bottom: -60px;
  }
}
#point #point01 .ill {
  max-width: 230px;
  width: 30%;
  margin-left: auto;
  margin-top: -1.5em;
}
@media screen and (min-width: 992px) {
  #point #point01 .ill {
    width: 40%;
  }
}
#point #point02 .ill {
  max-width: 285px;
  width: 35%;
  margin-left: auto;
  margin-top: -2em;
}
@media screen and (min-width: 992px) {
  #point #point02 .ill {
    width: 45%;
    left: -2em;
    right: unset;
  }
}
#point #point03 .ill {
  max-width: 156px;
  width: 20%;
  margin-left: auto;
  margin-top: -2.5em;
}
@media screen and (min-width: 992px) {
  #point #point03 .ill {
    width: 30%;
  }
}
@media screen and (min-width: 992px) {
  #point .txtArea {
    margin-inline: 0;
    position: relative;
  }
  #point .txtArea .ill {
    position: absolute;
    right: 0;
    bottom: clamp(3.125em, 1.629em + 4.213vw, 5em);
  }
  #point .imgArea {
    margin-right: -16%;
    margin-left: 1em;
  }
  #point .reverse .imgArea {
    margin-left: -16%;
    margin-right: 1em;
  }
}