/* 共通 --------------------------- */
/* フォントサイズ */
.fs180 {
  font-size: 18rem;
}

.fs80 {
  font-size: 8rem;
}

.fs75 {
  font-size: 7.5rem;
}

.fs70 {
  font-size: 8svw;

  @media(width >=890px) {
    font-size: 7rem;
  }
}

.fs60 {
  font-size: 6rem;
}

.fs58 {
  font-size: 5.8rem;
}

.fs52 {
  font-size: 5.2rem;
}

.fs50 {
  font-size: 5rem;
}

.fs48 {
  font-size: 4.8rem;
}

.fs47 {
  font-size: 4.7rem;
}

.fs45 {
  font-size: 4.5rem;
}

.fs42 {
  font-size: 4.2rem;
}

.fs41 {
  font-size: 4.1rem;
}

.fs40 {
  font-size: 4.0rem;
}

.fs36 {
  font-size: 3.6rem;

  @media(width<768px) {
    font-size: 5.5svw;
  }
}

.fs35 {
  font-size: 3.5rem;
}

.fs34 {
  font-size: 3.4rem;
}

.fs32 {
  font-size: 3.2rem;
}

.fs30 {
  font-size: 3rem;

  @media(width<768px) {
    font-size: 5svw;
  }
}

.fs28 {
  font-size: 2.8rem;
}

.fs26 {
  font-size: 2.6rem;

  @media(width<768px) {
    font-size: 4.8svw;
  }
}

.fs25 {
  font-size: 2.5rem;
}

.fs22 {
  font-size: 2.2rem;
}

.fs21 {
  font-size: 2.1rem;
}

.fs20 {
  font-size: 2rem;

  @media(width<768px) {
    font-size: 4.2svw;
  }
}

.fs14 {
  font-size: 1.4rem;
}

.fs13 {
  font-size: 1.3rem;
}

.fs12 {
  font-size: 1.2rem;
}

.fs11 {
  font-size: 1.1rem;
}

.vertical {
  writing-mode: vertical-rl;
}

/* コンテナ */
.container {
  margin-inline: auto;

  &.container_xl {
    max-width: var(--width-xl);
  }

  &.container_lg {
    max-width: var(--width-lg);
  }

  &.container_pc {
    max-width: var(--width-pc);
  }

  &.container_tb {
    max-width: var(--width-tb);
  }

  &.container_sm {
    max-width: var(--width-sm);
  }
}

ul {
  &:not(.none) {
    list-style: inherit;
    padding-inline-start: 1.6em;
  }

  li+li {
    margin-block-start: 0.5em;
  }
}

h2 {
  &:has(.arrow) {
    position: relative;
    --size: 0.15em;
    --width: 0.7em;

    &::before {
      content: '';
      width: calc(var(--width) + 0.05em);
      height: var(--width);
      background-color: #fff;
      clip-path: polygon(50% 100%, 100% 0, 0 0);
      position: absolute;
      bottom: calc(-0.7em);
      left: 50%;
      z-index: 1;
      transform: translateX(-50%);
    }
  }

  .arrow {
    padding-block-end: 0.2em;
    position: relative;

    &::before {
      content: '';
      width: 100%;
      height: var(--size);
      background-color: var(--yellow);
      border-radius: 50rem;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 0;
    }

    &::after {
      content: '';
      width: var(--width);
      height: var(--size);
      background-color: var(--yellow);
      border-radius: 50rem;
      position: absolute;
      bottom: -0.2em;
      left: calc(50% - (var(--width) - var(--size)));
      z-index: 1;
      transform: rotate(45deg);
    }
  }
}

/* footer --------------------------- */
#footer {
  .footer {
    color: #fff;
    background-color: var(--black);
    text-align: center;
    padding-block: 3em;
  }

  .copy {
    padding-block: 1em;
  }
}


#main {

  #mv {
    .picture {
      line-height: 0;
    }

    .duration {
      background-color: var(--green);
      padding-block: 3em 0;

      .container {
        width: 90%;

        .button {
          margin-block-end: -1em;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 1em 2em;
          position: relative;
          bottom: -1.5em;
          z-index: 1;

          @media(width >768px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
          }

          .btn {
            padding-block: 1em;
          }
        }
      }
    }
  }

  #about {
    padding-block: 6em 7em;
    background-image: url(../images/bg_about.webp);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: cover;
    --mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/5vmin 100%;
    -webkit-mask: var(--mask);
    mask: var(--mask);

    .container {
      width: 90%;

      .title {
        max-width: 900px;
        margin: 0 auto -2em;

        .ttl_about_01 {
          width: 60%;
          margin-block-end: -3%;
        }
      }

      .bg_white {
        line-height: 2;
        border-radius: 1em;
        padding: 3em 5%;

        .fs30 {
          /* @media(width<960px) {
            font-size: 4.6svw;
          } */

          span {
            display: inline-block;
          }
        }
      }
    }
  }

  #witch {
    padding-block: 5em 8em;

    .container {
      width: 95%;

      &:nth-of-type(1) {
        .fs30 {
          span {
            display: inline-block;
          }
        }
      }

      &:nth-of-type(2) {
        display: flex;
        flex-wrap: wrap;

        .method {
          width: 100%;
          padding-block-end: 2em;

          @media(width>=1080px) {
            width: 50%;
          }

          .title {
            color: #fff;
            text-align: center;
            font-weight: bold;
            padding: 0.5em;
          }

          ul {
            width: 90%;
            max-width: 550px;
            margin-inline: auto;

            li {
              background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2023%2021%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20x%3D%221.25%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20d%3D%22M22.1%203.97%207.95%2020.47%200%2014.11l2.5-3.12%204.93%203.95L19.06%201.36%2022.1%203.97z%22%20fill%3D%22%2315705E%22%2F%3E%3C%2Fsvg%3E');
              background-repeat: no-repeat;
              background-position: 0 0.3em;
              background-size: 1.1em;
              padding-inline-start: 1.5em;
            }
          }

          .btn {
            text-align: center;
            border-width: 0;
            border-radius: 0;
            padding-inline: 1em;
            margin-inline: 5%;
            display: block;

            span {
              background-repeat: no-repeat;
              background-position: 100% 50%;
              background-size: 1em;
              padding-inline-end: 1.5em;
            }
          }

          &.bg_pale_pink {
            .title {
              background-color: var(--pink);
            }

            .btn {
              span {
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2023%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M8.2%2016.8V1.8C8.2.8%209%200%2010%200s1.8.8%201.8%201.8v15l5.2-5.3c.7-.7%202-.7%202.7%200s.7%202%200%202.7l-8.3%208.4c-.7.7-2%20.7-2.7%200L.5%2014.2c-.7-.7-.7-2%200-2.7s2-.7%202.7%200l5%205.3z%22%20fill%3D%22%23CE3A74%22%2F%3E%3C%2Fsvg%3E');
              }
            }
          }

          &.bg_pale_aqua {
            .title {
              background-color: var(--aqua);
            }

            .btn {
              span {
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2023%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M8.2%2016.8V1.8C8.2.8%209%200%2010%200s1.8.8%201.8%201.8v15l5.2-5.3c.7-.7%202-.7%202.7%200s.7%202%200%202.7l-8.3%208.4c-.7.7-2%20.7-2.7%200L.5%2014.2c-.7-.7-.7-2%200-2.7s2-.7%202.7%200l5%205.3z%22%20fill%3D%22%2323B6EC%22%2F%3E%3C%2Fsvg%3E');
              }
            }
          }
        }
      }
    }
  }

  #category {
    padding-block: 0 6em;
    position: relative;
    z-index: 0;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: var(--green-pale);
      --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50%/4vmin 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    >.title {
      max-width: 90%;
      margin-inline: auto;
      position: relative;
      top: -3em;
    }

    .container {
      width: 90%;

      .category {
        border-radius: 1em;
        padding: 2em;
        display: flex;
        flex-wrap: wrap;
        gap: 2em 5%;

        @media(width>=960px) {
          flex-wrap: nowrap;
        }

        &+.category {
          margin-block-start: 2em;
        }

        .picture {
          width: 100%;
          line-height: 0;

          @media(width>=768px) {
            width: 40%;
          }

          @media(width>=1080px) {
            width: 25%;
          }

          h3 {
            margin-inline: -2.5em;
          }
        }

        .text {
          @media(width>=768px) {
            width: calc(100% - 40% - 5%);
          }

          @media(width>=1080px) {
            width: calc(100% - 25% - 5%);
          }

          .meta {
            border-top: var(--gray-light) solid 1px;
            padding-block-start: 1.5em;
            margin-block-start: 1.5em;
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
          }
        }
      }
    }
  }

  #howto {
    padding-block: 4em 6em;

    .container {
      width: 90%;

      .tabs {
        width: 100%;
        max-width: 770px;
        display: flex;
        text-align: center;
        column-gap: 1em;

        .tab {
          width: 50%;
          color: #fff;
          font-size: 4svw;
          font-weight: bold;
          border-top-left-radius: 0.25em;
          border-top-right-radius: 0.25em;
          padding: 0.35em 5% 0.5em;
          cursor: pointer;

          &:not(.active) {
            background-color: var(--gray);
          }

          @media(width>=768px) {
            font-size: 3rem;
          }

          &:nth-of-type(1) {

            &:hover,
            &.active {
              background-color: var(--pink);
            }
          }

          &:nth-of-type(2) {

            &:hover,
            &.active {
              background-color: var(--aqua);
            }
          }

          small {
            font-size: 2.2svw;
            font-weight: normal;
            display: block;

            @media(width>=960px) {
              font-size: 1.4rem;
            }
          }
        }
      }

      .contents {
        .content {
          padding: 3em 5% 3em;

          &:not(.active) {
            display: none;
          }

          .steps {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2em 4%;

            .step {
              width: 100%;
              display: flex;
              flex-wrap: nowrap;

              @media(width>=768px) {
                width: 47.5%;
              }

              @media(width>=1080px) {
                width: 30%;
              }

              .no {
                width: 4.5em;
                font-weight: bold;
                text-align: center;
                line-height: 1;
                padding-inline-end: 0.5em;

                .large {
                  font-size: 4.5rem;
                  display: block;
                }
              }

              .picture {
                width: calc(100% - 5.5em);
              }
            }
          }

          .meta {
            border-top: #fff solid 1px;
            padding-block-start: 2em;
            margin-block-start: 2em;
            display: flex;
            flex-wrap: wrap;
            justify-content: end;
            gap: 0.5em 1em;

            @media(width>=1400px) {
              justify-content: center;
            }

            >div {
              display: flex;
              flex-wrap: wrap;
              justify-content: end;
              gap: 0.5em;
            }

            .btn.aqua {
              padding-inline: 2em;
            }
          }
        }
      }
    }
  }

  #point {
    background-image: url(../images/bg_check.svg);
    background-size: 1.6em;
    padding-block: 4em 7em;

    .container {
      width: 90%;
      padding: 2em;

      .tabs {
        margin-block-end: 1em;

        .tab {
          background-color: #fff;
          margin-block-end: 0.5em;
          display: inline-block;
          cursor: pointer;

          &:hover,
          &.active {
            color: #fff;
            background-color: var(--color);
          }

          &:nth-of-type(1) {
            &::before {
              content: none;
            }
          }
        }
      }

      .contents {
        .content {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 1.5em 1.5em;

          @media (width >=768px) {
            grid-template-columns: repeat(2, 1fr);
          }

          &:not(.active) {
            display: none;
          }

          .bg_white {
            border-radius: 1em;
            padding: 1.5em;
            overflow: hidden;
            position: relative;
            z-index: 0;

            .badge {
              border-radius: 0;
              border-bottom-right-radius: 1em;
              padding: 0.5em 1.25em;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
            }

            .picture {
              line-height: 0;
            }

            ul {
              margin-block-start: 1em;

              li {
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2023%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.249%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23eee%22%2F%3E%3Cpath%20d%3D%22M22.1%203.707%207.954%2018.555%200%2012.83l2.498-2.81%204.935%203.552L19.064%201.365%2022.1%203.707Z%22%20fill%3D%22%2315705E%22%2F%3E%3C%2Fsvg%3E');
                background-repeat: no-repeat;
                background-position: 0 0.3em;
                background-size: 1.1em;
                padding-inline-start: 1.5em;
              }
            }
          }
        }
      }
    }
  }

  #prizes {
    padding-block-end: 6em;
    position: relative;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      background: var(--yellow-pale) url('../images/bg_prizes.svg');
      padding-block: 0 6em;
      --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50%/4vmin 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    &::after {
      content: '';
      width: 100%;
      height: 5em;
      background-color: var(--yellow-pale);
      position: absolute;
      bottom: -3em;
      left: 0;
      z-index: -2;
    }

    .container {
      width: 95%;

      >.title {
        width: 65%;
        margin-block-end: -2em;
        margin-inline-start: 2em;
        position: relative;
        top: -2em;
      }

      .bg_white {
        border-radius: 1em;
        padding: 3em 5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2em 5%;

        .prize {
          width: 100%;

          @media(width >=768px) {
            width: calc(100% / 2 - (5% / 2));
          }

          @media(width >=1400px) {
            width: calc(100% / 3 - (10% / 3));
          }
        }
      }

      .special {
        max-width: 800px;
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2em 5%;

        .title {
          width: 100%;
          text-shadow: 3px 3px 0 #fff;
          margin-block-end: -0.5em;
        }

        .prize {
          width: calc(100% / 2 - (5% / 2));

          @media(width >=960px) {
            width: calc(100% / 2 - (5% / 2));
          }
        }
      }
    }

    .bg_prizes_01,
    .bg_prizes_02 {
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      z-index: -1;

      img {
        position: absolute;
        top: 50%;
        z-index: -1;
        transform: translateY(-50%);
      }
    }

    .bg_prizes_01 {
      width: 30%;
      max-width: 400px;
      left: 2.5%;
    }

    .bg_prizes_02 {
      width: 20%;
      max-width: 300px;
      right: 2.5%;
    }
  }

  #exchange {
    padding-block: 5em;
    position: relative;
    z-index: 0;

    &::before {
      content: '';
      width: 110%;
      height: 50%;
      background-image: url(../images/bg_exchange.svg);
      background-repeat: no-repeat;
      background-position: 50% 100%;
      background-size: contain;
      position: absolute;
      bottom: 10em;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }

    .container {
      width: 95%;

      .fs30 {
        br {
          display: inherit;

          @media(width>=960px) {
            display: none;
          }
        }
      }

      #map {
        width: 100%;
        height: 600px;
        margin-block-end: 2em;

        @media(width<=768px) {
          height: auto;
          aspect-ratio: 1 / 1;
        }

        .leaflet-control-attribution {
          font-size: 10px !important;
          opacity: 0.5;

          span,
          a[href="https://leafletjs.com"] {
            display: none !important;
          }
        }

        .leaflet-popup-content {
          font-size: 13px;
          margin: 10px 15px 8px;
        }

        .btn_reset {
          height: 34px;
          background-color: #fff;
          font-size: 14px;
          border: 2px solid rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          cursor: pointer;
        }
      }

      .infobox_wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8em;

        >div:has(h3) {
          width: 100%;
        }

        >.reset {
          width: 100%;
          text-align: right;
          margin-block-start: -0.8em;
        }
      }

      .infobox {
        background-color: #fff;
        border-color: var(--color);
        border-style: solid;
        border-width: 2px;
        border-radius: 0.5em;
        padding: 0.8em;
        display: none;
        transition: all .4s;

        &.active {
          display: block;
        }

        &.show {
          width: 100%;

          .detail {
            display: flex;
          }
        }

        &:not(.show) {
          cursor: pointer;

          @media (width >=768px) {
            width: calc((100% / 3) - ((0.8em * 2) / 3));
          }

          @media (width >=1080px) {
            width: calc(25% - ((0.8em * 3) / 4));
          }

          &:hover {
            opacity: .6;
          }

          .title {
            small {
              display: block;
            }

            .text {
              @media (width < 768px) {
                display: none;
              }
            }
          }
        }

        .title {
          display: flex;
          column-gap: 0.2em;

          .no {
            width: 1.8em;
            height: 1.8em;
            color: #fff;
            background-color: var(--color);
            font-size: 0.9em;
            font-weight: bold;
            line-height: 1.8em;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            top: -0.1em;
          }

          .text {}

          small,
          b {
            display: inline-block;
          }
        }

        .detail {
          font-size: 85%;
          margin-block-start: 1em;
          flex-wrap: nowrap;
          align-items: start;
          gap: 1em;
          display: none;

          img {
            width: 100px;
            aspect-ratio: 1 / 1;
            object-fit: cover;
          }

          p {
            border-bottom: #eee solid 1px;
            padding-block-end: 0.5em;
            margin-block-end: 0.5em;
          }
        }
      }
    }
  }

  #schedule {
    background-image: url(../images/bg_check.svg);
    background-size: 1.6em;
    padding-block: 5em 6em;

    .container {
      width: 90%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5em 1em;

      @media(width>=960px) {
        grid-template-columns: repeat(4, 1fr);
      }

      .phase {
        &:not(:last-of-type) {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2022%2046%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M0%202v42c0%201.8%202.3%202.7%203.5%201.3L21.4%2023.9c.6-.7.6-1.8%200-2.6L3.5.7C2.3-.7%200%20.2%200%202z%22%20fill%3D%22%2315705E%22%2F%3E%3C%2Fsvg%3E');
          background-repeat: no-repeat;
          background-position: 100% 50%;
          background-size: 1.5em;
          padding-inline-end: 1.5em;

        }

        .bg_pale_gray {
          height: 100%;
          border-radius: 0.5em;
          padding: 1.5em 0.5em 1.5em;

          .icon {
            height: 6rem;
          }
        }
      }
    }
  }

  #ceremony {
    padding-block: 5em 6em;

    .container {
      width: 95%;

      .bg_white {
        padding: 2em;
        display: grid;
        justify-content: center;
      }
    }
  }

  #faq {
    padding-block-start: 5em;

    .container {
      width: 95%;

      .faq_inner {
        .faq {
          background-color: #fff;
          border-radius: 0.5em;

          +.faq {
            margin-block-start: 1em;
          }

          &:not(.active) {
            .a {
              display: none;
            }
          }

          &.active {
            .q {
              &::before {
                transform: scale(1, -1);
              }
            }

            .a {
              display: block;
            }
          }

          .q {
            padding: 0.8em 1em;
            position: relative;
            cursor: pointer;

            &::before {
              content: '';
              width: 100%;
              height: 100%;
              background-image: url(../images/icon_arrow_down.svg);
              background-repeat: no-repeat;
              background-position: calc(100% - 0.8em) 50%;
              background-size: 1em;
              position: absolute;
              top: 0;
              right: 0;
              z-index: 1;
              transition: all .4s;
            }
          }

          .a {
            padding: 0 1.25em 1em;
          }
        }
      }
    }
  }

  #rule {
    padding-block: 4em 6em;

    .container {
      width: 95%;
    }
  }
}

/* gotop --------------------------- */
.gotop {
  width: 15%;
  max-width: 80px;
  position: fixed;
  right: 5%;
  bottom: 5%;
  transform: rotate(-90deg);
  transition: opacity 0.3s ease;
}

/* アニメーション */
.effect {
  filter: blur(0.5em);
  opacity: 0;
  transition: all 2000ms ease;

  &.is_show {
    filter: blur(0);
    opacity: 1;
  }
}