/*========================================================================
   index layout
========================================================================*/
#contents::before {
  background-color: #4ad;
}

#greeting {
  background: url(../img/index/bg_greeting.jpg);
  background-size: cover;
  color: #fff;
}
#greeting .bgcircle {
  position: relative;
  padding: clamp(3rem, 1.364rem + 5.114vw, 7.5rem);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 3.5em;
}
#greeting .bgcircle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 3.5em;
}
#greeting .txt01::before {
  background-color: #dc5a1e;
}
@media screen and (min-width: 576px) {
  #greeting .txt01::before {
    -webkit-mask: url(../img/index/mat01.svg) center/cover;
            mask: url(../img/index/mat01.svg) center/cover;
    aspect-ratio: 9/6;
    width: auto;
    height: 115%;
  }
}
#greeting .txt01 h2 {
  max-width: 475px;
}
#greeting .txt01 p {
  max-width: 580px;
}
#greeting .txt02::before {
  background-color: #bc4;
}
#greeting .txt02 h2 {
  max-width: 349px;
}
@media screen and (min-width: 576px) {
  #greeting .txt02 {
    max-width: 480px;
    width: 80%;
    margin-inline: auto;
  }
  #greeting .txt02 p {
    display: table;
    margin-inline: auto;
  }
  #greeting .txt02::before {
    -webkit-mask: url(../img/index/mat02.svg) center/cover;
            mask: url(../img/index/mat02.svg) center/cover;
    aspect-ratio: 1/1;
    width: auto;
    height: 115%;
  }
}
#greeting .illust {
  min-width: 300px;
  width: 80%;
  margin-inline: auto;
  margin-block: -2em;
}
#greeting .deco_ill {
  position: relative;
  z-index: 1;
}
#greeting .ill01 {
  width: 33%;
  margin-block: -3em;
  margin-left: auto;
}
#greeting .ill02 {
  width: 27%;
  margin-block: -3.5em;
}
@media screen and (min-width: 992px) {
  #greeting .txtArea {
    font-size: 17px;
  }
  #greeting .txt01 {
    margin-left: -40px;
  }
  #greeting .txt01::before {
    height: 115%;
  }
  #greeting .txt01 .txtArea p:nth-child(2) {
    max-width: 510px;
  }
  #greeting .txt02 {
    max-width: 460px;
    position: absolute;
    right: -40px;
    bottom: 80px;
  }
  #greeting .txt02::before {
    height: 105%;
  }
  #greeting .illust {
    max-width: 753px;
    width: 63%;
    margin-left: 1em;
    margin-block: -5em;
  }
}
@media screen and (min-width: 1200px) {
  #greeting .txt01 {
    max-width: 900px;
    margin-left: 0px;
  }
  #greeting .txt02 {
    right: 0px;
  }
}

#point h3 {
  margin-right: auto;
  margin-left: 0;
  margin-bottom: -1em;
  z-index: 1;
}
#point .reverse h3 {
  margin-left: auto;
  margin-right: 0;
}
#point .txtArea {
  max-width: 800px;
}
#point h4 > * {
  display: inline-block;
  height: clamp(3rem, 1.316rem + 5.263vw, 5rem);
  margin-bottom: 0.2em;
}
@media screen and (min-width: 768px) {
  #point h4 > * {
    height: clamp(3.5rem, 2.345rem + 3.5vw, 4.2rem);
  }
}
#point h4 img {
  max-height: 100%;
  width: auto;
}
#point .deco_ill {
  position: relative;
}
@media screen and (min-width: 768px) {
  #point h3 {
    margin: -0.75em -1.5em 0;
  }
  #point .imgArea01 {
    margin-right: -4em;
    margin-left: 0;
  }
  #point .imgArea02 {
    margin: -9% 0 0 -2.6em;
  }
  #point .txtArea {
    margin-right: -1.3em;
    margin-left: 1.3em;
  }
  #point .reverse h3 {
    margin: -0.75em -1.5em 0;
  }
  #point .reverse .imgArea01 {
    margin-left: -4em;
    margin-right: 0;
  }
  #point .reverse .imgArea02 {
    margin: -9% -2.6em 0 0;
  }
  #point .reverse .txtArea {
    margin-left: -1.3em;
    margin-right: 1.3em;
  }
}
#point01 .ill_children {
  width: clamp(180px, 70%, 346px);
  margin-top: -70px;
  margin-bottom: -40px;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  #point01 .ill_children {
    position: relative;
    left: 20%;
  }
}

#point02 .ill_fishing {
  width: clamp(130px, 42%, 270px);
  margin-top: -80px;
  margin-bottom: -30px;
  margin-right: auto;
}
#point02 .ill_onsen {
  width: clamp(150px, 30%, 458px);
  margin-top: -90px;
  margin-bottom: -30px;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  #point02 h3 {
    margin-right: calc(-1.5em - 8%);
  }
  #point02 .imgArea02 {
    margin-top: calc(-9% - 30px);
  }
}

#point03 .ill_fish-children {
  width: clamp(200px, 60%, 328px);
  margin-top: -90px;
  margin-left: 30%;
}
@media screen and (min-width: 768px) {
  #point03 .ill_fish-children {
    margin-left: 40%;
  }
}