@charset "UTF-8";

@layer utility {
  /* =====================
    u-hover
  ===================== */
  .u-hover {
    transition: opacity 250ms ease 0s;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* =====================
    u-inner
  ===================== */
  .u-inner {
    position: relative;
    inline-size: 1440px;
    margin-inline: auto;
    z-index: 3;
    @media (width <= 768px) {
      inline-size: 100%;
    }
  }

  /* =====================
    u-anchor
  ===================== */
  .u-btn {
    inline-size: 324px;
    padding: 2px;
    background: #0f77ff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(1, 34, 65, 0.2);
    border-radius: 6px;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      inline-size: calc((100 / 390) * 324 * 1vw);
      padding: calc((100 / 390) * 2 * 1vw);
      background: #0f77ff;
      box-shadow: 0 calc ((100 / 390) * 2 * 1vw) calc((100 / 390) * 2 * 1vw) rgba(0, 0, 0, 0.1), 0 calc ((100 / 390) * 8 * 1vw) calc((100 / 390) * 10 * 1vw) rgba(1, 34, 65, 0.2);
      border-radius: calc((100 / 390) * 6 * 1vw);
    }

    .u-anchor {
      position: relative;
      display: block flow;
      padding-block: 18px;
      padding-inline: 28px;
      background: linear-gradient(180deg, #0d76ff 4.52%, #0551c5 94.44%);
      border: 1px solid #007cc6;
      box-shadow: inset 0px 0px 10px #338bff;
      border-radius: 4px;
      transition: all 250ms ease 0s;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 18 * 1vw);
        padding-inline: calc((100 / 390) * 28 * 1vw);
        box-shadow: inset 0 calc((100 / 390) * 0 * 1vw) calc((100 / 390) * 10 * 1vw) #338bff;
        border-radius: calc((100 / 390) * 4 * 1vw);
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/icon_arrow.svg');
        inline-size: 16px;
        aspect-ratio: 1/1;
      }

      @media (width <= 768px) {
        &::after {
          right: calc((100 / 390) * 15 * 1vw);
          inline-size: calc((100 / 390) * 16 * 1vw);
        }
      }

      .btn-txt {
        font-weight: 700;
        color: #fff;
      }
    }
    @media (any-hover: hover) {
      &:hover {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), #0f77ff;
        transition: all 250ms ease 0s;
        .u-anchor {
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(180deg, #0d76ff 4.52%, #0551c5 94.44%);
          transition: all 250ms ease 0s;
        }
      }
    }

    &[data-color='red'] {
      inline-size: 484px;
      background: #f30000;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 358 * 1vw);
      }

      .u-anchor {
        padding-block: 16px;
        background: linear-gradient(180deg, #f30000 4.52%, #c60000 94.44%);
        border: 1px solid #ef3f3f;
        box-shadow: inset 0px 0px 10px #870000;
        font-size: 24px;

        @media (width <= 768px) {
          padding-block: calc((100 / 390) * 18 * 1vw);
          box-shadow: inset 0 calc((100 / 390) * 0 * 1vw) calc((100 / 390) * 10 * 1vw) #870000;
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        &::after {
          inline-size: 20px;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 20 * 1vw);
          }
        }
      }

      @media (any-hover: hover) {
        &:hover {
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), #f30000;
          transition: all 250ms ease 0s;
          .u-anchor {
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(180deg, #f30000 4.52%, #c60000 94.44%);
            transition: all 250ms ease 0s;
          }
        }
      }
    }
  }

  /* =====================
  黄色背景文字
===================== */
  .u-txt-bg {
    display: inline-block;
    font-size: 56px;
    font-weight: bold;
    line-height: 1;
    border-radius: 16px;
    background-color: #eecb58;

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 32 * 1vw);
      border-radius: calc((100 / 390) * 10 * 1vw);
    }
  }

  /* =====================
    括弧文字
  ===================== */
  .u-parentheses {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;

    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      inline-size: 24px;
      block-size: 85%;
      border: 4px solid currentColor;
    }

    &:before {
      left: -40px;
      border-right: none;
    }

    &:after {
      right: -40px;
      border-left: none;
    }
    @media (width <= 768px) {
      &:before,
      &:after {
        top: 52%;
        inline-size: calc((100 / 390) * 24 * 1vw);
        border: calc((100 / 390) * 4 * 1vw) solid currentColor;
        block-size: 96%;
      }
      &:before {
        left: calc((100 / 390) * -20 * 1vw);
        border-right: none;
      }

      &:after {
        right: calc((100 / 390) * -20 * 1vw);
        border-left: none;
      }
    }
  }

  /* =====================
    u-blue-shadow
  ===================== */
  .u-blue-shadow {
    box-shadow: 8px 8px 16px 0 rgba(0, 146, 232, 0.1);

    @media (width <= 768px) {
      box-shadow: calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 16 * 1vw) 0 rgba(0, 146, 232, 0.1);
    }
  }

  /* =====================
    40px
  ===================== */
  .u-fs-40 {
    font-size: 40px;
    font-weight: bold;
    &[data-color='white'] {
      color: #fff;
    }

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
    }
  }
  /* =====================
    32px
  ===================== */
  .u-fs-32 {
    font-size: 32px;
    font-weight: bold;
    &[data-color='white'] {
      color: #fff;
    }

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
    }
  }
  /* =====================
    24px
  ===================== */
  .u-fs-24 {
    font-size: 24px;
    font-weight: bold;
    &[data-color='white'] {
      color: #fff;
    }

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
    }
  }

  /* =====================
    u-fc-g
  ===================== */
  .u-fc-g {
    color: var(--secondary);
  }
  /* =====================
    u-fc-r
  ===================== */
  .u-fc-r {
    color: #f30000;
  }
  /* =====================
    ふきだし
  ===================== */
  .u-fukidashi {
    position: relative;
    background-color: #fff;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -48px;
      inline-size: 68px;
      aspect-ratio: 68 / 40;
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      mask-image: var(--fukidashi);
      background-color: #fff;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 40 * 1vw);
        aspect-ratio: 40 / 68;
        mask-image: var(--fukidashi-tate);
        top: unset;
        bottom: calc((100 / 390) * -48 * 1vw);
        right: unset;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    &[data-position='left'] {
      &::before {
        left: -48px;
        right: unset;
        transform: translateY(-50%) scale(-1, 1);
      }
      @media (width <= 768px) {
        &::before {
          mask-image: var(--fukidashi-tate);
          left: 50%;
          transform: translate(-50%, 0) scale(1, 1);
        }
      }
    }
    &[data-color='gold'] {
      background-color: var(--secondary);
      &::before {
        background-color: var(--secondary);
      }
    }
  }
  /* =====================
    セクションタイトル
  ===================== */
  .u-section-title {
    position: relative;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding-block-end: 9px;
    background-color: #004dc3;

    @media (width <= 768px) {
      border-top: calc((100 / 390) * 2 * 1vw) solid #fff;
      border-bottom: calc((100 / 390) * 2 * 1vw) solid #fff;
      padding-block-start: calc((100 / 390) * 8 * 1vw);
      padding-block-end: calc((100 / 390) * 16 * 1vw);
    }

    &::before {
      content: attr(data-text);
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--title);
      font-size: 120px;
      line-height: 1;
      color: rgba(255, 255, 255, 0.2);
      white-space: nowrap;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        font-size: calc((100 / 390) * 64 * 1vw);
        white-space: wrap;
      }
    }
    .u-inner {
      &::after {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/piece/piece_01.png');
        inline-size: 121px;
        block-size: 266px;
        position: absolute;
        top: 35%;
        left: 42px;
        transform: translateY(-50%);
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 65 * 1vw);
          block-size: calc((100 / 390) * 143 * 1vw);
          left: 50%;
          top: calc((100 / 390) * -130 * 1vw);
          transform: translate(-50%, 0);
        }
      }
    }
    .fs-56 {
      position: relative;
      inline-size: fit-content;
      margin-inline: auto;
      font-size: 56px;
      font-weight: bold;
      color: var(--secondary);

      @media (width <= 768px) {
        inline-size: 100%;
        font-size: calc((100 / 390) * 32 * 1vw);
        line-height: 1.6;
      }

      .fs-72 {
        font-size: 72px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 40 * 1vw);
        }
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inline-size: 60px;
        block-size: 69px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/icon_hand.svg');
      }

      @media (width <= 768px) {
        &::before,
        &::after {
          inline-size: calc((100 / 390) * 60 * 1vw);
          block-size: calc((100 / 390) * 69 * 1vw);
          top: unset;
          bottom: calc((100 / 390) * -22 * 1vw);
          transform: translateY(0);
        }
      }

      &::before {
        left: -102px;
      }

      @media (width <= 768px) {
        &::before {
          left: calc((100 / 390) * 10 * 1vw);
        }
      }

      &::after {
        right: -102px;
        transform: translateY(-50%) scale(-1, 1);
      }

      @media (width <= 768px) {
        &::after {
          right: calc((100 / 390) * 10 * 1vw);
          transform: translateY(0) scale(-1, 1);
        }
      }
    }

    &[data-position='right'] {
      .u-inner {
        &::after {
          left: unset;
          right: 42px;
        }

        @media (width <= 768px) {
          &::after {
            left: unset;
            right: 50%;
            transform: translate(50%, 0);
          }
          .fs-56 {
            &::before,
            &::after {
              bottom: 46%;
              transform: translateY(50%);
            }
            &::after {
              transform: translateY(50%) scale(-1, 1);
            }
          }
        }
      }

      @media (width <= 768px) {
        .u-inner {
          &::after {
            left: unset;
            right: 50%;
            transform: translate(50%, 0);
          }
        }
      }
    }
  }
}