.header .band {
  background-color: #009ae1; }

@media (min-width: 768px) {
  .container {
    width: 1030px;
    max-width: 1030px; }

  main, footer, .header {
    position: relative; } }
@media (max-width: 767.98px) {
  main {
    position: relative; }

  .container {
    width: 100%; }

  .anchor_link {
    padding-bottom: 140px;
    margin-top: -140px; } }
.kira_back {
  position: relative; }
  .kira_back::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    mix-blend-mode: overlay;
    z-index: 0; }

@media (min-width: 768px) {
  .kira_back::before {
    background: url("../images/deco/back.svg") repeat center/40px; } }
@media (max-width: 767.98px) {
  .kira_back::before {
    background: url("../images/deco/back.svg") repeat center/40px; } }
.nami_top {
  -webkit-mask: var(--mask);
  mask: var(--mask); }

@media (min-width: 768px) {
  .nami_top {
    margin-top: -20px;
    --mask:
    radial-gradient(25.82px at 50% 35.7px,#000 99%,#0000 101%) calc(50% - 28px) 0/56px 100%,
    radial-gradient(25.82px at 50% -21.7px,#0000 99%,#000 101%) 50% 14px/56px 100% repeat-x; } }
@media (max-width: 767.98px) {
  .nami_top {
    margin-top: -30px;
    --mask:
    radial-gradient(31.36px at 50% 43.35px,#000 99%,#0000 101%) calc(50% - 34px) 0/68px 100%,
    radial-gradient(31.36px at 50% -26.35px,#0000 99%,#000 101%) 50% 17px/68px 100% repeat-x; } }
.beach_main_wrap {
  background: url("../images/main/back.png") repeat left top;
  background-size: 43px 30px;
  position: relative; }

.beach_main {
  position: relative;
  z-index: 5; }
  .beach_main > h1 {
    display: flex;
    flex-direction: column; }
    .beach_main > h1 > img {
      opacity: 0;
      transition: transform .6s ease-in, opacity .9s ease-in;
      transform: translateY(10px); }
      .beach_main > h1 > img.inview {
        opacity: 1;
        transform: translateY(0); }
    .beach_main > h1 > div > span {
      display: flex;
      justify-content: center; }
      .beach_main > h1 > div > span:nth-child(1) img {
        opacity: 0; }
        .beach_main > h1 > div > span:nth-child(1) img:nth-child(1) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 0.2s; }
        .beach_main > h1 > div > span:nth-child(1) img:nth-child(2) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 0.4s; }
        .beach_main > h1 > div > span:nth-child(1) img:nth-child(3) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 0.6s; }
        .beach_main > h1 > div > span:nth-child(1) img:nth-child(4) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 0.8s; }
      .beach_main > h1 > div > span:nth-child(2) img {
        opacity: 0; }
        .beach_main > h1 > div > span:nth-child(2) img:nth-child(1) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 1s; }
        .beach_main > h1 > div > span:nth-child(2) img:nth-child(2) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 1.2s; }
        .beach_main > h1 > div > span:nth-child(2) img:nth-child(3) {
          animation: beach_main_title_anim 1.6s ease forwards;
          animation-delay: 1.4s; }
@keyframes beach_main_title_anim {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8); }
  50% {
    opacity: .5;
    transform: translateY(10px) scale(1); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
  .beach_main > figure > img {
    z-index: 2;
    position: relative;
    animation: penta_surf 1.8s ease-in-out forwards;
    animation-delay: .8s;
    transform: translate3d(-60vw, -310px, 0px) rotate(-10deg);
    opacity: 0; }
    @media (min-width: 768px) {
      @keyframes penta_surf {
        0% {
          transform: translate3d(-60vw, -310px, 0px) rotate(-10deg);
          opacity: 0; }
        70% {
          transform: translate3d(5vw, -60px, 0px) rotate(-4deg);
          opacity: 1; }
        100% {
          transform: translate3d(0vw, 0px, 0px) rotate(0deg);
          opacity: 1; } } }
    @media (max-width: 767.98px) {
      @keyframes penta_surf {
        0% {
          transform: translate3d(-60vw, -310px, 0px) rotate(-10deg);
          opacity: 0; }
        70% {
          transform: translate3d(10vw, -60px, 0px) rotate(-4deg);
          opacity: 1; }
        100% {
          transform: translate3d(0vw, 0px, 0px) rotate(4deg);
          opacity: 1; } } }
  .beach_main > figure > figcaption {
    position: absolute;
    background: url(../images/main/bar.svg) no-repeat left center/auto 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; }
  .beach_main .deco_top {
    position: absolute; }
    .beach_main .deco_top > span {
      position: absolute; }
  .beach_main .deco01 > span {
    position: absolute; }
  .beach_main .deco01 > span:nth-child(1) {
    animation: beach_main_items_anim 3s ease-in-out infinite;
    animation-delay: 0.3s; }
  .beach_main .deco01 > span:nth-child(2) {
    animation: beach_main_items_anim 3s ease-in-out infinite;
    animation-delay: 0.6s; }
  .beach_main .deco01 > span:nth-child(3) {
    animation: beach_main_items_anim 3s ease-in-out infinite;
    animation-delay: 0.9s; }
@keyframes beach_main_items_anim {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10px); } }
  .beach_main .deco02 > span {
    position: absolute; }

@media (min-width: 768px) {
  .beach_main {
    height: 420px; }
    .beach_main > h1 {
      position: absolute;
      width: 395px;
      top: 110px;
      right: calc(50% + 60px); }
      .beach_main > h1 > img {
        width: 80%;
        margin: 0 auto 20px; }
      .beach_main > h1 > div > span:nth-child(1) {
        gap: 0 9px; }
        .beach_main > h1 > div > span:nth-child(1) > img:nth-child(1) {
          width: 27%; }
        .beach_main > h1 > div > span:nth-child(1) > img:nth-child(2) {
          width: 20%; }
        .beach_main > h1 > div > span:nth-child(1) > img:nth-child(3) {
          width: 27%; }
        .beach_main > h1 > div > span:nth-child(1) > img:nth-child(4) {
          width: 20%; }
      .beach_main > h1 > div > span:nth-child(2) {
        padding-left: 20px; }
        .beach_main > h1 > div > span:nth-child(2) > img:nth-child(1) {
          width: 25%; }
        .beach_main > h1 > div > span:nth-child(2) > img:nth-child(2) {
          width: 19%;
          padding-top: 15px;
          margin: 0 12px 0 -10px; }
        .beach_main > h1 > div > span:nth-child(2) > img:nth-child(3) {
          width: 27%; }
    .beach_main > figure {
      position: absolute;
      width: 295px;
      top: 140px;
      left: calc(50% + 40px); }
      .beach_main > figure > figcaption {
        width: 222px;
        height: 55px;
        font-size: 15px;
        right: -80px;
        bottom: 70px;
        padding-left: 50px; }
    .beach_main .deco_top {
      width: 635px;
      top: -40px;
      right: 0; }
      .beach_main .deco_top > span.hitode01 {
        width: 50px;
        top: 55px;
        left: 340px; }
      .beach_main .deco_top > span.hitode02 {
        width: 30px;
        top: 80px;
        left: 290px; }
    .beach_main .deco01 > span {
      width: 130px; }
      .beach_main .deco01 > span:nth-child(1) {
        top: 310px;
        right: calc(50% - 50px); }
      .beach_main .deco01 > span:nth-child(2) {
        top: 140px;
        left: calc(50% + 330px); }
      .beach_main .deco01 > span:nth-child(3) {
        top: 30px;
        right: calc(50% - 80px); }
    .beach_main .deco02 > span:nth-child(1) {
      width: 30px;
      top: 130px;
      right: calc(50% + 620px); }
    .beach_main .deco02 > span:nth-child(2) {
      width: 25px;
      top: 300px;
      right: calc(50% + 420px);
      transform: scaleX(-1) rotate(15deg); }
    .beach_main .deco02 > span:nth-child(3) {
      width: 30px;
      top: 315px;
      left: calc(50% + 390px); }
    .beach_main .deco02 > span:nth-child(4) {
      width: 20px;
      top: 250px;
      left: calc(50% + 620px);
      transform: scale(1, -1); } }
@media (max-width: 767.98px) {
  .beach_main > h1 {
    width: 70%;
    margin: 0 auto;
    padding-top: 14%; }
    .beach_main > h1 > img {
      width: 80%;
      margin: 0 auto 20px; }
    .beach_main > h1 > div > span:nth-child(1) {
      gap: 0 9px; }
      .beach_main > h1 > div > span:nth-child(1) > img:nth-child(1) {
        width: 27%; }
      .beach_main > h1 > div > span:nth-child(1) > img:nth-child(2) {
        width: 20%; }
      .beach_main > h1 > div > span:nth-child(1) > img:nth-child(3) {
        width: 27%; }
      .beach_main > h1 > div > span:nth-child(1) > img:nth-child(4) {
        width: 20%; }
    .beach_main > h1 > div > span:nth-child(2) {
      padding-left: 10px; }
      .beach_main > h1 > div > span:nth-child(2) > img:nth-child(1) {
        width: 24%; }
      .beach_main > h1 > div > span:nth-child(2) > img:nth-child(2) {
        width: 18%;
        padding-top: 12px;
        margin: 0 10px 0 -5px; }
      .beach_main > h1 > div > span:nth-child(2) > img:nth-child(3) {
        width: 26%; }
  .beach_main > figure {
    width: 55%;
    margin: -10px auto 0; }
    .beach_main > figure > img {
      transform: rotate(4deg); }
    .beach_main > figure > figcaption {
      z-index: 2;
      width: 40%;
      height: 44px;
      font-size: 13px;
      left: -10px;
      bottom: 11%;
      justify-content: flex-start;
      padding-left: 31px;
      background-position: right; }
  .beach_main .deco_top {
    width: 70%;
    top: 0;
    right: 0;
    z-index: -1; }
  .beach_main .deco01 > span {
    width: 20%; }
    .beach_main .deco01 > span:nth-child(1) {
      top: 47%;
      left: 7%;
      transform: rotate(-5deg); }
    .beach_main .deco01 > span:nth-child(2) {
      bottom: 5%;
      right: 9%;
      transform: rotate(-35deg); }
    .beach_main .deco01 > span:nth-child(3) {
      top: 38%;
      right: 2.5%;
      transform: rotate(45deg); }
  .beach_main .deco02 > span:nth-child(1) {
    width: 6%;
    bottom: 27%;
    right: 8%; }
  .beach_main .deco02 > span:nth-child(2) {
    width: 5%;
    top: 30%;
    left: 8%;
    transform: scaleX(-1) rotate(15deg); } }
.beach_lead {
  position: relative;
  z-index: 2; }
  .beach_lead .beach_lead_inner {
    text-align: center; }
    .beach_lead .beach_lead_inner h2 > .spnone {
      display: flex;
      justify-content: center; }
      .beach_lead .beach_lead_inner h2 > .spnone img {
        opacity: 0; }
    .beach_lead .beach_lead_inner h2 > .pcnone > div {
      display: flex;
      justify-content: center;
      margin-bottom: 10px; }
      .beach_lead .beach_lead_inner h2 > .pcnone > div:nth-child(1) > img {
        opacity: 0; }
      .beach_lead .beach_lead_inner h2 > .pcnone > div:nth-child(2) > img {
        opacity: 0; }
    .beach_lead .beach_lead_inner h2 img {
      display: inline-block;
      height: 23.38px;
      width: auto; }
@keyframes beach_lead_anim {
  0% {
    opacity: 0;
    transform: translateY(-10px); }
  50% {
    opacity: .5;
    transform: translateY(5px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(1) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.61s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(2) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.72s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(3) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.83s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(4) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.94s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(5) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.05s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(6) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.16s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(7) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.27s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(8) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.38s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(9) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.49s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(10) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.6s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(11) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.71s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(12) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.82s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(13) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.93s; }
    .beach_lead .beach_lead_inner h2.inview > .spnone img:nth-child(14) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 2.04s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(1) > img:nth-child(1) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.61s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(1) > img:nth-child(2) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.72s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(1) > img:nth-child(3) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.83s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(1) > img:nth-child(4) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 0.94s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(1) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.05s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(2) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.16s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(3) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.27s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(4) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.38s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(5) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.49s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(6) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.6s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(7) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.71s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(8) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.82s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(9) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 1.93s; }
    .beach_lead .beach_lead_inner h2.inview > .pcnone > div:nth-child(2) > img:nth-child(10) {
      animation: beach_lead_anim 1.6s ease forwards;
      animation-delay: 2.04s; }
    .beach_lead .beach_lead_inner p {
      line-height: 1.6em; }
  .beach_lead > .deco > span {
    position: absolute; }
    .beach_lead > .deco > span:nth-child(1) > img {
      animation: beach_deco01 2.5s steps(1) infinite;
      transform-origin: center 80%; }
@keyframes beach_deco01 {
  0% {
    transform: rotate(-10deg); }
  10% {
    transform: rotate(0deg); }
  20% {
    transform: rotate(10deg); }
  30% {
    transform: rotate(0deg); } }
    .beach_lead > .deco > span:nth-child(2) > img {
      animation: beach_deco01 2.5s steps(1) infinite;
      transform-origin: center 80%; }
@keyframes beach_deco02 {
  30% {
    transform: rotate(-10deg); }
  40% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(0deg); } }
    .beach_lead > .deco > span:nth-child(3) > img {
      animation: beach_deco02 2.5s steps(1) infinite;
      transform-origin: center 80%; }
    .beach_lead > .deco > span:nth-child(4) > img {
      animation: beach_deco02 2.5s steps(1) infinite;
      transform-origin: center 80%; }
    .beach_lead > .deco > span:nth-child(5) > img {
      animation: beach_deco01 2.5s steps(1) infinite;
      transform-origin: center 80%; }

@media (min-width: 768px) {
  .beach_lead {
    background: url("../images/main/lead_back_pc.avif") no-repeat center/100%;
    aspect-ratio: 1440/488; }
    .beach_lead .beach_lead_inner {
      padding-top: 13%; }
      .beach_lead .beach_lead_inner h2 {
        width: 375px;
        margin: 0 auto; }
      .beach_lead .beach_lead_inner .kai_line {
        width: 125px;
        margin: 20px auto; }
      .beach_lead .beach_lead_inner p {
        font-size: 15px; }
    .beach_lead > .deco > span:nth-child(1) {
      width: 35px;
      top: 22%;
      left: calc( 50% - 24% ); }
    .beach_lead > .deco > span:nth-child(2) {
      width: 30px;
      top: 33%;
      left: calc( 50% - 22% ); }
    .beach_lead > .deco > span:nth-child(3) {
      width: 70px;
      top: 50%;
      left: calc( 50% - 40% ); }
    .beach_lead > .deco > span:nth-child(4) {
      width: 50px;
      top: 50%;
      right: calc( 50% - 45% );
      transform: rotate(-35deg); }
    .beach_lead > .deco > span:nth-child(5) {
      width: 70px;
      bottom: 20%;
      right: calc( 50% - 24% );
      transform: rotate(-35deg); } }
@media (max-width: 767.98px) {
  .beach_lead {
    background: url("../images/main/lead_back_sp.avif") no-repeat center/100%;
    aspect-ratio: 750/730;
    margin-top: -55px; }
    .beach_lead .beach_lead_inner {
      padding-top: 22%; }
      .beach_lead .beach_lead_inner h2 {
        width: 85%;
        margin: 0 auto; }
      .beach_lead .beach_lead_inner .kai_line {
        width: 40%;
        margin: 15px auto 10px; }
      .beach_lead .beach_lead_inner p {
        font-size: 15px; }
    .beach_lead > .deco > span:nth-child(1) {
      width: 8%;
      top: 8%;
      left: 5%; }
    .beach_lead > .deco > span:nth-child(2) {
      width: 6%;
      top: 15%;
      left: 14%; }
    .beach_lead > .deco > span:nth-child(3) {
      width: 14%;
      bottom: 9%;
      right: 4%;
      transform: rotate(-25deg); } }
.awa_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }
  .awa_container > .left, .awa_container > .right {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center; }
  @media (min-width: 768px) {
    .awa_container > .left {
      width: 208px;
      right: calc(50% + 350px);
      justify-content: center; }
    .awa_container > .right {
      width: 208px;
      left: calc(50% + 350px);
      transform: scale(-1, 1);
      justify-content: center; } }
  @media (max-width: 767.9px) {
    .awa_container > .left {
      width: 30vw;
      left: 10px;
      justify-content: flex-start; }
    .awa_container > .right {
      width: 30vw;
      right: 10px;
      transform: scale(-1, 1);
      justify-content: flex-start; } }

.awa00 {
  width: 74px;
  height: 227px;
  position: relative; }
  .awa00 > span {
    position: absolute;
    border: 2px solid white;
    border-radius: 50%; }
    .awa00 > span:nth-child(1), .awa00 > span:nth-child(2), .awa00 > span:nth-child(5) {
      background-color: white; }
    .awa00 > span:nth-child(1) {
      left: 27px;
      top: 0;
      width: 10px;
      height: 10px; }
    .awa00 > span:nth-child(2) {
      right: 0px;
      top: 39px;
      width: 13px;
      height: 13px; }
    .awa00 > span:nth-child(3) {
      right: 5px;
      top: 85px;
      width: 21px;
      height: 21px; }
    .awa00 > span:nth-child(4) {
      left: 2px;
      top: 143px;
      width: 27px;
      height: 27px; }
    .awa00 > span:nth-child(5) {
      left: 0px;
      top: 190px;
      width: 13px;
      height: 13px; }
    .awa00 > span:nth-child(6) {
      left: 20px;
      bottom: 0px;
      width: 12px;
      height: 12px; }
  .awa00.sky > span {
    border-color: #dcf0ff; }
    .awa00.sky > span:nth-child(1), .awa00.sky > span:nth-child(2), .awa00.sky > span:nth-child(5) {
      background-color: #dcf0ff; }
  .awa00.blue > span {
    border-color: #5cb9e4; }
    .awa00.blue > span:nth-child(1), .awa00.blue > span:nth-child(2), .awa00.blue > span:nth-child(5) {
      background-color: #5cb9e4; }

.awa01 {
  position: absolute;
  width: 24px;
  height: 64px; }
  .awa01 > span {
    position: absolute;
    border: 2px solid white;
    border-radius: 50%; }
    .awa01 > span:nth-child(1) {
      right: 0;
      top: 0;
      background-color: white;
      width: 9px;
      height: 9px; }
    .awa01 > span:nth-child(2) {
      left: 0;
      top: 19px;
      background-color: white;
      width: 9px;
      height: 9px; }
    .awa01 > span:nth-child(3) {
      left: 1px;
      bottom: 0;
      width: 21px;
      height: 21px; }

.awa02 {
  position: absolute;
  width: 64px;
  height: 82px; }
  .awa02 > span {
    position: absolute;
    border: 2px solid white;
    border-radius: 50%; }
    .awa02 > span:nth-child(1) {
      right: 12px;
      top: 0;
      width: 16px;
      height: 16px; }
    .awa02 > span:nth-child(2) {
      right: 0;
      top: 25px;
      background-color: white;
      width: 9px;
      height: 9px; }
    .awa02 > span:nth-child(3) {
      left: 0px;
      bottom: 0;
      width: 42px;
      height: 42px; }

.awa03 {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: white; }

@keyframes yuraawa {
  0% {
    opacity: 0;
    transform: translateY(10px) translateX(0px); }
  20% {
    opacity: 1;
    transform: translateY(5px) translateX(-3px); }
  40% {
    opacity: 1;
    transform: translateY(0px) translateX(0px); }
  60% {
    opacity: 1;
    transform: translateY(-5px) translateX(3px); }
  80% {
    opacity: 0;
    transform: translateY(-10px) translateX(0px); }
  100% {
    opacity: 0;
    transform: translateY(10px) translateX(0px); } }
.awa00 > span, .awa01 > span, .awa02 > span {
  animation: yuraawa 3s linear both infinite; }
  .awa00 > span:nth-last-child(2), .awa01 > span:nth-last-child(2), .awa02 > span:nth-last-child(2) {
    animation-delay: .3s; }
  .awa00 > span:nth-last-child(3), .awa01 > span:nth-last-child(3), .awa02 > span:nth-last-child(3) {
    animation-delay: .6s; }
  .awa00 > span:nth-last-child(4), .awa01 > span:nth-last-child(4), .awa02 > span:nth-last-child(4) {
    animation-delay: .9s; }
  .awa00 > span:nth-last-child(5), .awa01 > span:nth-last-child(5), .awa02 > span:nth-last-child(5) {
    animation-delay: 1.2s; }
  .awa00 > span:nth-last-child(6), .awa01 > span:nth-last-child(6), .awa02 > span:nth-last-child(6) {
    animation-delay: 1.5s; }

.awa03 {
  animation: yuraawa 3s linear both infinite;
  animation-delay: .1s; }

.beach_onayami {
  background-color: #009ae1;
  position: relative;
  z-index: 1; }
  .beach_onayami > .container {
    position: relative; }
  .beach_onayami .onayami_btn {
    position: relative;
    /* background-color: rgba(255,255,255,0.6); */
    background-color: #99d7f3; }
    .beach_onayami .onayami_btn > div {
      display: flex;
      flex-wrap: wrap; }
    .beach_onayami .onayami_btn img[src*="penguin-penta-hands.png"] {
      position: absolute;
      top: -25px;
      left: calc(50% - 80px);
      width: 160px; }
    .beach_onayami .onayami_btn a {
      background-color: #fff;
      filter: drop-shadow(0px 5px 5px rgba(100, 100, 100, 0.4));
      border-radius: 100px;
      display: flex;
      align-items: center;
      flex-direction: row;
      color: #004ea2 !important;
      line-height: 1.5em;
      position: relative; }
@keyframes onayamiNoBlink {
  0% {
    opacity: 1; }
  2% {
    opacity: 0; }
  4% {
    opacity: 1; }
  6% {
    opacity: 0; }
  8% {
    opacity: 1; } }
@media (min-width: 768px) {
  .beach_onayami {
    margin-top: -200px;
    padding: 220px 0 180px; }
    .beach_onayami .onayami_btn {
      width: 710px;
      margin: 0 auto;
      padding: 30px 20px;
      border-radius: 20px; }
      .beach_onayami .onayami_btn > div {
        justify-content: space-between;
        gap: 10px; }
      .beach_onayami .onayami_btn a {
        width: 330px; }
        .beach_onayami .onayami_btn a::before {
          width: 20px;
          height: 20px;
          right: 15px; }
        .beach_onayami .onayami_btn a > span:nth-child(1) {
          width: 40px;
          margin-right: 10px; }
        .beach_onayami .onayami_btn a > span:nth-child(2) {
          font-size: 15px; }
        .beach_onayami .onayami_btn a > span:nth-child(3) {
          margin-left: auto;
          height: 100%; }
          .beach_onayami .onayami_btn a > span:nth-child(3) > img {
            height: 100%;
            width: auto; }
    .beach_onayami .onayami_penguin {
      width: 330px;
      margin: 0 auto -22px;
      aspect-ratio: 330/245;
      position: relative; }
      .beach_onayami .onayami_penguin img[src*="penguin-baloon.png"] {
        width: 100%;
        transition: transform .6s .6s ease-in, opacity .6s .6s;
        transform: translateY(15px);
        opacity: 0; }
      .beach_onayami .onayami_penguin img[src*="penguin-penta-face.png"] {
        position: absolute;
        bottom: 0;
        width: 48.4848484848%;
        left: 50%;
        transition: transform .4s ease-in, opacity .6s;
        transform: translate(-50%, 30px); }
      .beach_onayami .onayami_penguin.inview img[src*="penguin-baloon.png"] {
        transform: translateY(0);
        opacity: 1; }
      .beach_onayami .onayami_penguin.inview img[src*="penguin-penta-face.png"] {
        transform: translate(-50%, 0);
        opacity: 1; } }
@media (max-width: 767.98px) {
  .beach_onayami {
    margin-top: -150px;
    padding: 180px 0 100px; }
    .beach_onayami .onayami_btn {
      padding: 30px 10px 25px;
      border-radius: 15px; }
      .beach_onayami .onayami_btn > div {
        flex-direction: column;
        gap: 10px; }
      .beach_onayami .onayami_btn img[src*="penguin-penta-hands.png"] {
        position: absolute;
        top: -25px;
        left: calc(50% - percentage(80/330));
        width: 48.4848484848%; }
      .beach_onayami .onayami_btn a {
        width: 100%; }
        .beach_onayami .onayami_btn a::before {
          width: 20px;
          height: 20px;
          right: 15px; }
        .beach_onayami .onayami_btn a > span:nth-child(1) {
          width: 13%;
          margin-right: 10px; }
        .beach_onayami .onayami_btn a > span:nth-child(2) {
          font-size: 15px; }
        .beach_onayami .onayami_btn a > span:nth-child(3) {
          margin-left: auto;
          height: 100%; }
          .beach_onayami .onayami_btn a > span:nth-child(3) > img {
            height: 100%;
            width: auto; }
    .beach_onayami .onayami_penguin {
      padding: 0 10px;
      margin-bottom: -25px;
      position: relative;
      aspect-ratio: 330/233;
      position: relative; }
      .beach_onayami .onayami_penguin img[src*="penguin-baloon.png"] {
        width: 100%;
        transition: transform .6s .6s ease-in, opacity .6s .6s;
        transform: translateY(15px);
        opacity: 0; }
      .beach_onayami .onayami_penguin img[src*="penguin-penta-face.png"] {
        position: absolute;
        bottom: 0;
        width: 48.4848484848%;
        left: 50%;
        transition: transform .4s ease-in, opacity .6s;
        transform: translate(-50%, 30px); }
      .beach_onayami .onayami_penguin.inview img[src*="penguin-baloon.png"] {
        transform: translateY(0);
        opacity: 1; }
      .beach_onayami .onayami_penguin.inview img[src*="penguin-penta-face.png"] {
        transform: translate(-50%, 0);
        opacity: 1; } }
.beach_item {
  background: url("../images/item/back.png") repeat left top;
  background-size: 43px 30px;
  position: relative;
  z-index: 1; }
  .beach_item .beach_item_inner > .item_lead {
    text-align: center; }
    .beach_item .beach_item_inner > .item_lead > span {
      position: relative; }
      .beach_item .beach_item_inner > .item_lead > span::before {
        content: '';
        background-color: #ffffbc;
        width: 100%;
        height: 50%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        z-index: -1; }
  .beach_item .beach_item_inner > .item_img {
    display: flex;
    flex-direction: column;
    align-items: center; }
    .beach_item .beach_item_inner > .item_img > .shadow_fig {
      filter: drop-shadow(0px 5px 5px rgba(100, 100, 100, 0.4)); }
    .beach_item .beach_item_inner > .item_img figcaption {
      background-color: #ffa939;
      color: #fff;
      clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-weight: bold; }
      .beach_item .beach_item_inner > .item_img figcaption::before {
        content: '';
        width: 100%;
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 4px;
        left: 0; }
      .beach_item .beach_item_inner > .item_img figcaption::after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: #fff;
        position: absolute;
        bottom: 4px;
        left: 0; }
      .beach_item .beach_item_inner > .item_img figcaption > small {
        font-weight: bold; }
  .beach_item .beach_item_inner > .item_price {
    display: flex;
    flex-direction: column;
    align-items: center; }
    .beach_item .beach_item_inner > .item_price > .gentei {
      display: flex;
      gap: 5px; }
      .beach_item .beach_item_inner > .item_price > .gentei > span {
        background-color: #fff;
        border-radius: 50px;
        padding: 2px 10px;
        line-height: 1em; }
  .beach_item .beach_item_inner > .item_desc {
    color: #666666;
    font-weight: normal;
    line-height: 1.7em;
    letter-spacing: 0.05em; }
    .beach_item .beach_item_inner > .item_desc > span {
      color: #f76e86; }

.beach_item_wrap {
  position: relative;
  display: none; }
  .beach_item_wrap > .deco > span {
    position: absolute;
    z-index: 2; }
  @media (min-width: 768px) {
    .beach_item_wrap > .deco img[src*="penguin02.avif"],
    .beach_item_wrap > .deco img[src*="penguin04.avif"] {
      transition: transform .5s .3s ease-in;
      transform: rotate(-25deg); }
      .beach_item_wrap > .deco img[src*="penguin02.avif"].inview,
      .beach_item_wrap > .deco img[src*="penguin04.avif"].inview {
        transform: rotate(0); } }
  @media (max-width: 767.98px) {
    .beach_item_wrap > .deco img[src*="penguin02.avif"],
    .beach_item_wrap > .deco img[src*="penguin04.avif"] {
      transition: transform .5s .6s ease-in;
      transform: translateX(100%); }
      .beach_item_wrap > .deco img[src*="penguin02.avif"].inview,
      .beach_item_wrap > .deco img[src*="penguin04.avif"].inview {
        transform: translateX(0); } }

@media (min-width: 768px) {
  .beach_item {
    padding: 100px 0 180px; }
    .beach_item .beach_item_inner {
      width: 630px;
      margin: 0 auto; }
      .beach_item .beach_item_inner > .item_line {
        width: 130px;
        margin: 0 auto; }
      .beach_item .beach_item_inner > .item_lead {
        font-size: 23px;
        margin: 15px 0 30px; }
        .beach_item .beach_item_inner > .item_lead > span {
          padding: 0 10px; }
          .beach_item .beach_item_inner > .item_lead > span.pc_pr0 {
            padding-right: 0; }
          .beach_item .beach_item_inner > .item_lead > span.pc_pl0 {
            padding-left: 0; }
          .beach_item .beach_item_inner > .item_lead > span > small {
            font-size: 10px;
            vertical-align: top; }
      .beach_item .beach_item_inner > .item_img > img {
        width: 340px; }
      .beach_item .beach_item_inner > .item_img figcaption {
        width: 350px;
        height: 65px;
        font-size: 19px;
        margin-top: -40px; }
        .beach_item .beach_item_inner > .item_img figcaption.pawdar {
          font-size: 18px; }
        .beach_item .beach_item_inner > .item_img figcaption span {
          font-size: 12px; }
      .beach_item .beach_item_inner > .item_price {
        margin: 20px 0; }
        .beach_item .beach_item_inner > .item_price > .gentei {
          font-size: 13px; }
        .beach_item .beach_item_inner > .item_price > p {
          font-size: 25px; }
          .beach_item .beach_item_inner > .item_price > p > span {
            font-size: 12px; }
        .beach_item .beach_item_inner > .item_price > small {
          font-size: 13px;
          margin-top: 5px;
          text-align: center; }
      .beach_item .beach_item_inner > .item_desc {
        font-size: 15px; }
        .beach_item .beach_item_inner > .item_desc > small {
          font-size: 12px; }
      .beach_item .beach_item_inner > .fl_btn_a01 {
        margin: 30px auto 0; }

  .beach_item_wrap > .deco > span:nth-child(1) {
    width: 160px;
    top: 430px;
    right: calc( 50% - 330px ); }
  .beach_item_wrap > .deco > span:nth-child(2) {
    width: 216px;
    bottom: -40px;
    left: 0;
    right: 0;
    margin: 0 auto; }
  .beach_item_wrap > .deco > span:nth-child(3) {
    width: 155px;
    top: 500px;
    right: calc(50% + 580px);
    transform: scale(-1, 1); }
  .beach_item_wrap > .deco > span:nth-child(4) {
    width: 23px;
    top: 800px;
    right: calc(50% + 650px);
    transform: scale(1, -1); }
  .beach_item_wrap > .deco > span:nth-child(5) {
    width: 155px;
    top: 500px;
    left: calc(50% + 580px); }
  .beach_item_wrap > .deco > span:nth-child(6) {
    width: 23px;
    top: 340px;
    left: calc(50% + 650px);
    transform: scale(1, -1); }
  .beach_item_wrap.item02 > .deco > span:nth-child(1), .beach_item_wrap.item04 > .deco > span:nth-child(1), .beach_item_wrap.item06 > .deco > span:nth-child(1) {
    top: 260px;
    left: calc( 50% - 330px );
    transform: scale(-1, 1); }
  .beach_item_wrap.item05 > .deco > span:nth-child(1) {
    top: 210px; } }
@media (max-width: 767.98px) {
  .beach_item {
    padding: 60px 0 120px; }
    .beach_item .beach_item_inner > .item_line {
      width: 40%;
      margin: 0 auto 10px; }
    .beach_item .beach_item_inner > .item_lead {
      font-size: 23px;
      margin: 15px 0 30px; }
      .beach_item .beach_item_inner > .item_lead > span {
        padding: 0 5px; }
        .beach_item .beach_item_inner > .item_lead > span > small {
          font-size: 10px;
          vertical-align: top; }
    .beach_item .beach_item_inner > .item_img > img {
      margin: 0 10px; }
    .beach_item .beach_item_inner > .item_img figcaption {
      width: 350px;
      height: 60px;
      font-size: 19px;
      margin-top: -40px; }
      .beach_item .beach_item_inner > .item_img figcaption.pawdar {
        font-size: 18px; }
      .beach_item .beach_item_inner > .item_img figcaption span {
        font-size: 11px; }
    .beach_item .beach_item_inner > .item_price {
      margin: 20px 0 15px; }
      .beach_item .beach_item_inner > .item_price > .gentei {
        font-size: 13px; }
      .beach_item .beach_item_inner > .item_price > p {
        font-size: 25px; }
        .beach_item .beach_item_inner > .item_price > p > span {
          font-size: 13px; }
      .beach_item .beach_item_inner > .item_price > small {
        font-size: 13px;
        text-align: center;
        margin-top: 5px; }
    .beach_item .beach_item_inner > .item_desc {
      font-size: 15px; }
      .beach_item .beach_item_inner > .item_desc > small {
        font-size: 12px; }
    .beach_item .beach_item_inner > .fl_btn_a01 {
      margin: 30px auto 0; }

  .beach_item_wrap {
    scroll-margin-top: 80px; }
    .beach_item_wrap > .deco > span:nth-child(1) {
      width: 37%;
      top: 22%;
      right: -10%; }
    .beach_item_wrap > .deco > span:nth-child(2) {
      width: 30%;
      bottom: -10px;
      left: 0;
      right: 0;
      margin: 0 auto; }
    .beach_item_wrap.item02 > .deco > span:nth-child(1), .beach_item_wrap.item04 > .deco > span:nth-child(1), .beach_item_wrap.item06 > .deco > span:nth-child(1) {
      top: 22%;
      left: -10%;
      transform: scale(-1, 1); }
    .beach_item_wrap.item03 > .deco > span:nth-child(1) {
      top: 34%; }
    .beach_item_wrap.item05 > .deco > span:nth-child(1) {
      transform: rotate(10deg); } }
.beach_kaiteki_wrap {
  position: relative; }
  .beach_kaiteki_wrap > .penguin_top {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 5; }

.beach_kaiteki {
  background-color: #fbf7e3;
  position: relative;
  z-index: 1; }
  .beach_kaiteki .beach_kaiteki_inner > h3 {
    position: relative;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em; }
    .beach_kaiteki .beach_kaiteki_inner > h3 > span {
      position: relative; }
  .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex {
    display: flex; }
    .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div {
      background-color: #fff;
      text-align: center;
      overflow: hidden; }
      .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_nami {
        background: url("../images/kaiteki/back.svg") no-repeat bottom/cover;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center; }
      .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_link {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #004ea2;
        color: #004ea2;
        border-radius: 100px; }
      .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_img {
        display: block; }
  .beach_kaiteki .deco01 > span {
    position: absolute; }
    .beach_kaiteki .deco01 > span:nth-child(1) > img {
      animation: beach_deco01 2.5s steps(1) infinite;
      transform-origin: center 80%; }
    .beach_kaiteki .deco01 > span:nth-child(2) > img {
      animation: beach_deco02 2.5s steps(1) infinite;
      transform-origin: center 80%; }
    .beach_kaiteki .deco01 > span:nth-child(3) > img {
      animation: beach_deco02 2.5s steps(1) infinite;
      transform-origin: center 80%; }
    .beach_kaiteki .deco01 > span:nth-child(4) > img {
      animation: beach_deco01 2.5s steps(1) infinite;
      transform-origin: center 80%; }
  .beach_kaiteki .deco02 > span {
    position: absolute; }

@media (min-width: 768px) {
  .beach_kaiteki_wrap > .penguin_top {
    width: 216px;
    top: -120px; }

  .beach_kaiteki {
    padding: 100px 0; }
    .beach_kaiteki::before {
      content: '';
      width: 100%;
      aspect-ratio: 1440/277;
      background: url("../images/kaiteki/beach_back.avif") no-repeat top/100%;
      position: absolute;
      top: -25%;
      left: 0;
      transform: scale(-1.1);
      z-index: -1; }
    .beach_kaiteki::after {
      content: '';
      width: 100%;
      aspect-ratio: 1440/277;
      background: url("../images/kaiteki/beach_back.avif") no-repeat top/100%;
      position: absolute;
      bottom: -27%;
      left: 0;
      z-index: -1; }
    .beach_kaiteki .beach_kaiteki_inner > h3 {
      width: 550px;
      margin: 0 auto; }
    .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex {
      width: 540px;
      margin: 30px auto 0;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px 0; }
      .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div {
        width: 167px;
        border-radius: 20px;
        padding-bottom: 15px; }
        .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_nami {
          height: 60px;
          font-size: 14px; }
        .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_img {
          padding: 10px 20px; }
        .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_link {
          height: 25px;
          font-size: 13px;
          margin: 0 12px; }
    .beach_kaiteki .deco01 > span:nth-child(1) {
      width: 46px;
      top: 60px;
      right: calc(50% + 330px); }
    .beach_kaiteki .deco01 > span:nth-child(2) {
      width: 46px;
      top: 50px;
      left: calc(50% + 300px);
      transform: rotate(15deg); }
    .beach_kaiteki .deco01 > span:nth-child(3) {
      width: 60px;
      bottom: 70px;
      right: calc(50% + 300px);
      transform: rotate(-30deg); }
    .beach_kaiteki .deco01 > span:nth-child(4) {
      width: 20px;
      bottom: 160px;
      left: calc(50% + 300px); }
    .beach_kaiteki .deco02 > span:nth-child(1) {
      width: 20px;
      top: 190px;
      right: calc(50% + 580px);
      transform: rotate(60deg); }
    .beach_kaiteki .deco02 > span:nth-child(2) {
      width: 66px;
      top: 360px;
      right: calc(50% + 610px); }
    .beach_kaiteki .deco02 > span:nth-child(3) {
      width: 34px;
      top: 580px;
      right: calc(50% + 580px);
      transform: rotate(15deg); }
    .beach_kaiteki .deco02 > span:nth-child(4) {
      width: 66px;
      top: 190px;
      left: calc(50% + 580px); }
    .beach_kaiteki .deco02 > span:nth-child(5) {
      width: 60px;
      top: 380px;
      left: calc(50% + 610px);
      transform: rotate(-30deg); }
    .beach_kaiteki .deco02 > span:nth-child(6) {
      width: 46px;
      top: 580px;
      left: calc(50% + 580px);
      transform: scale(-1, 1); } }
@media (max-width: 767.98px) {
  .beach_kaiteki_wrap > .penguin_top {
    width: 30%;
    top: -50px; }

  .beach_kaiteki {
    padding: 100px 0; }
    .beach_kaiteki::before {
      content: '';
      width: 100%;
      aspect-ratio: 750/263;
      background: url("../images/kaiteki/beach_back_sp.avif") no-repeat top/100%;
      position: absolute;
      top: -80px;
      left: 0;
      transform: scale(-1.1); }
    .beach_kaiteki::after {
      content: '';
      width: 100%;
      aspect-ratio: 750/263;
      background: url("../images/kaiteki/beach_back_sp.avif") no-repeat top/100%;
      position: absolute;
      bottom: -80px;
      left: 0; }
    .beach_kaiteki .beach_kaiteki_inner > h3 {
      margin: 0 auto;
      font-size: 23px;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center; }
    .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex {
      margin: 30px auto 0;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 15px 0; }
      .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div {
        width: calc( 50% - 7px );
        border-radius: 20px;
        padding-bottom: 15px; }
        .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_nami {
          height: 60px;
          font-size: 14px; }
        .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_img {
          padding: 10px 20px; }
        .beach_kaiteki .beach_kaiteki_inner > .kaiteki_flex > div > .kaiteki_link {
          height: 25px;
          font-size: 13px;
          margin: 0 12px; }
    .beach_kaiteki .deco01 > span:nth-child(1) {
      width: 10%;
      top: 4%;
      left: 6%; }
    .beach_kaiteki .deco01 > span:nth-child(2) {
      width: 10%;
      top: 5%;
      right: 5%;
      transform: rotate(15deg); }
    .beach_kaiteki .deco01 > span:nth-child(3) {
      width: 12%;
      bottom: 4%;
      left: 4%;
      transform: rotate(-30deg); }
    .beach_kaiteki .deco01 > span:nth-child(4) {
      width: 5%;
      bottom: 6%;
      left: 19%;
      transform: rotate(45deg); } }
@media (min-width: 768px) {
  .warukeru_wrap {
    position: relative; }
    .warukeru_wrap > .warukeru_btn {
      width: 140px;
      position: absolute;
      top: -60px;
      left: calc(50% + 370px);
      z-index: 1;
      animation: warukeru_slideInOut 6s ease-in-out infinite; }

  @keyframes warukeru_slideInOut {
    0% {
      transform: translateY(0);
      z-index: 1; }
    10% {
      transform: translateY(-60px);
      z-index: 1; }
    11% {
      transform: translateY(-60px);
      z-index: 1; }
    20% {
      transform: translateY(-40px);
      z-index: 1; }
    30% {
      transform: translateY(-60px);
      z-index: 1; }
    31% {
      transform: translateY(-60px);
      z-index: 1; }
    40% {
      transform: translateY(0);
      z-index: 1; } } }
@media (max-width: 767.98px) {
  .warukeru_wrap {
    position: relative; }
    .warukeru_wrap > .warukeru_btn {
      width: 30%;
      position: absolute;
      top: -50px;
      right: 10px;
      z-index: 1;
      animation: warukeru_slideInOut 6s ease-in-out infinite; }

  @keyframes warukeru_slideInOut {
    0% {
      transform: translateY(0);
      z-index: 1; }
    10% {
      transform: translateY(-60px);
      z-index: 1; }
    11% {
      transform: translateY(-60px);
      z-index: 1; }
    20% {
      transform: translateY(-40px);
      z-index: 1; }
    30% {
      transform: translateY(-60px);
      z-index: 1; }
    31% {
      transform: translateY(-60px);
      z-index: 1; }
    40% {
      transform: translateY(0);
      z-index: 1; } } }
.beach_clip {
  position: relative;
  z-index: 1;
  background-color: #fff; }
  .beach_clip .clip_flex > div:nth-child(2) > a {
    overflow: hidden;
    position: relative;
    display: block; }
    .beach_clip .clip_flex > div:nth-child(2) > a::before {
      position: absolute;
      content: '';
      display: inline-block;
      top: -180px;
      left: 0;
      width: 30px;
      height: 100%;
      background-color: #fbfbfb;
      animation: btn_animation 3s ease-in-out infinite; }

@keyframes btn_animation {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0; } }
@media (min-width: 768px) {
  .beach_clip {
    padding: 70px 0; }
    .beach_clip .clip_flex {
      width: 750px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .beach_clip .clip_flex > div:nth-child(1) {
        width: 380px; }
      .beach_clip .clip_flex > div:nth-child(2) {
        width: 350px; } }
@media (max-width: 767.98px) {
  .beach_clip {
    padding: 60px 0; }
    .beach_clip .clip_flex > div:nth-child(1) {
      width: 85%;
      margin: 0 auto -20px;
      z-index: 1;
      position: relative; } }
.etc_container {
  background-color: #8675df;
  z-index: 1;
  position: relative; }
  .etc_container > .container > .etc_div {
    display: flex;
    align-items: center; }
    .etc_container > .container > .etc_div > .mokumoku > img {
      animation: mokumoku_anim 60s ease-in-out infinite; }
      .etc_container > .container > .etc_div > .mokumoku > img:nth-child(2) {
        position: absolute;
        top: 0;
        left: 0;
        animation-direction: reverse; }
@keyframes mokumoku_anim {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg); }
  10% {
    transform: translate(-80px, 0) scale(1.1) rotate(-10deg); }
  20% {
    transform: translate(60px, 0) scale(0.9) rotate(14deg); }
  30% {
    transform: translate(-70px, 0) scale(1.2) rotate(-16deg); }
  40% {
    transform: translate(40px, 0) scale(0.85) rotate(6deg); }
  50% {
    transform: translate(0px, 0px) scale(1) rotate(0deg); }
  60% {
    transform: translate(-50px, 0) scale(1.15) rotate(-8deg); }
  70% {
    transform: translate(80px, 0) scale(0.95) rotate(12deg); }
  80% {
    transform: translate(-60px, 0) scale(1.05) rotate(-4deg); }
  90% {
    transform: translate(40px, 0) scale(0.9) rotate(10deg); }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg); } }
  .etc_container::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(100% - .5px);
    width: 100%;
    height: 20px;
    background: url(../images/etc/back.png) repeat left bottom;
    background-size: 43px 30px; }
  @media (min-width: 768px) {
    .etc_container {
      padding: 60px 0 40px; }
      .etc_container > .container > .etc_div {
        justify-content: center;
        justify-content: center; }
        .etc_container > .container > .etc_div > p {
          width: 270px;
          margin: 0 50px 0 0; }
        .etc_container > .container > .etc_div > a {
          width: 436px; }
        .etc_container > .container > .etc_div > .mokumoku {
          position: absolute;
          width: 600px;
          bottom: -290px;
          left: calc(50% - 140px);
          z-index: -1; } }
  @media (max-width: 767.98px) {
    .etc_container {
      padding: 50px 0 40px; }
      .etc_container > .container > .etc_div {
        flex-direction: column; }
        .etc_container > .container > .etc_div > p {
          width: 250px;
          margin: 0 auto 15px; }
        .etc_container > .container > .etc_div > a {
          width: 300px; }
        .etc_container > .container > .etc_div > .mokumoku {
          position: absolute;
          width: 150%;
          top: 20%;
          z-index: -1; } }

.inview-fade-up {
  transition: opacity 1s, transform 1s;
  opacity: 0;
  transform: translateY(20px); }
  .inview-fade-up.inview-once {
    opacity: 1;
    transform: translateY(0); }