@charset "UTF-8";

.main {
  position: relative;
  .picture {
    display: block flow;
    flex-shrink: 0;
  }
  .opening {
    /* =====================
    MV
  ===================== */
    .mv {
      position: relative;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/mv_bg.png');
      min-block-size: 510px;
      padding-block-start: 16px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        inline-size: 100%;
        block-size: 170px;
        background-image: url('../img/mv_vector.png');
        background-repeat: no-repeat;
        background-size: 100% 170px;
        background-position: center bottom;
        pointer-events: none;
      }

      @media (width <= 768px) {
        background-image: url('../img/mv_bg_2x.png');
        min-block-size: calc((100 / 390) * 553 * 1vw);
        padding-block-start: calc((100 / 390) * 16 * 1vw);

        &::before {
          background-image: url('../img/mv_vector_2x.png');
          block-size: calc((100 / 390) * 196 * 1vw);
          background-size: 100% calc((100 / 390) * 196 * 1vw);
        }
      }

      .logo {
        .picture {
          display: block flow;

          @media (width <= 768px) {
            & img {
              inline-size: calc((100 / 390) * 159 * 1vw);
            }
          }
        }
      }
      .description {
        margin-block-start: 16px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
      .catch {
        margin-block-start: 10px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 31 * 1vw);

          & img {
            inline-size: calc((100 / 390) * 354 * 1vw);
          }
        }
      }
      .u-parentheses {
        margin-block-start: 8px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 22 * 1vw);
          margin-block-start: calc((100 / 390) * 29 * 1vw);
        }
      }
    }
    /* =====================
    グラフ
  ===================== */
    .graph {
      position: relative;
      padding-block-start: 30px;
      padding-block-end: 42px;

      &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        inline-size: 100%;
        min-block-size: 960px;
        background-image: url('../img/graph_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
      }

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 39 * 1vw);
        padding-block-end: calc((100 / 390) * 36 * 1vw);

        &:before {
          background-image: url('../img/graph_bg_2x.png');
          min-block-size: calc((100 / 390) * 1532 * 1vw);
        }
        .u-inner {
          padding-inline: calc((100 / 390) * 16 * 1vw);
        }
      }
      .graph-list {
        display: block grid;
        grid-template-columns: max-content max-content;
        column-gap: 72px;
        row-gap: 38px;
        justify-content: center;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          column-gap: 0;
          row-gap: calc((100 / 390) * 80 * 1vw);
        }

        & li[data-id='1'] {
          grid-column: 1 / 2;
          grid-row: 1 / 3;

          @media (width <= 768px) {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            inline-size: calc((100 / 390) * 248 * 1vw);
            margin-inline: auto;
            & img {
              inline-size: calc((100 / 390) * 248 * 1vw);
            }
          }
        }
        & li[data-id='2'] {
          grid-column: 2 / 3;
          grid-row: 1 / 2;
          .picture {
            margin-block-start: 18px;
          }

          @media (width <= 768px) {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            .picture {
              margin-block-start: calc((100 / 390) * 18 * 1vw);
              & img {
                inline-size: calc((100 / 390) * 358 * 1vw);
              }
            }
          }
        }
        & li[data-id='3'] {
          grid-column: 2 / 3;
          grid-row: 2 / 3;
          .picture {
            margin-block-start: 8px;
          }

          @media (width <= 768px) {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
            .picture {
              margin-block-start: calc((100 / 390) * 8 * 1vw);
              & img {
                inline-size: calc((100 / 390) * 358 * 1vw);
              }
            }
          }
        }

        .title {
          font-size: 17px;
          font-weight: bold;
          line-height: 1.2;
          text-align: left;
        }
      }
    }

    /* =====================
  三種の神器
  ===================== */
    .qa {
      position: relative;
      padding-block-start: 4px;
      padding-block-end: 104px;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 4 * 1vw);
        padding-block-end: calc((100 / 390) * 386 * 1vw);
      }
      .u-inner {
        position: relative;
        .question {
          display: block flex;
          gap: 50px;
          align-items: center;
          justify-content: center;
          margin-inline-start: 40px;

          @media (width <= 768px) {
            flex-direction: column-reverse;
            margin-inline-start: 0;
            gap: 0;

            & p {
              .picture {
                & img {
                  inline-size: calc((100 / 390) * 326 * 1vw);
                }
              }
            }
          }
          .piece {
            & img {
              aspect-ratio: 121/266;
              inline-size: auto;
              block-size: 207px;
            }

            @media (width <= 768px) {
              & img {
                aspect-ratio: 174/207;
                inline-size: auto;
                block-size: calc((100 / 390) * 207 * 1vw);
              }
            }
          }
        }
        .answer {
          .u-fs-32 {
            margin-block-start: 26px;

            @media (width <= 768px) {
              line-height: 1.4;
              margin-block-start: calc((100 / 390) * 78 * 1vw);
            }
          }
          .jingi {
            margin-block-start: 24px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 18 * 1vw);
              & img {
                inline-size: calc((100 / 390) * 354 * 1vw);
              }
            }
          }

          .jingi-list {
            display: grid;
            grid-template-columns: repeat(3, max-content);
            justify-content: center;
            margin-block-start: 40px;
            margin-inline-start: 17px;

            @media (width <= 768px) {
              grid-template-columns: 1fr;
              margin-block-start: calc((100 / 390) * 75 * 1vw);
              margin-inline-start: 0;
              row-gap: calc((100 / 390) * 29 * 1vw);

              & img {
                inline-size: calc((100 / 390) * 326 * 1vw);
              }
              & li[data-id='3'] {
                & img {
                  inline-size: calc((100 / 390) * 347.5 * 1vw);
                }
              }
            }
          }
          .band-list {
            display: grid;
            grid-template-columns: repeat(3, max-content);
            gap: 32px;
            justify-content: center;
            margin-block-start: 29px;

            @media (width <= 768px) {
              grid-template-columns: 1fr;
              gap: calc((100 / 390) * 24 * 1vw);
              margin-block-start: calc((100 / 390) * 69 * 1vw);

              & img {
                inline-size: calc((100 / 390) * 326 * 1vw);
              }
            }
          }
        }

        &:after {
          content: '';
          display: block flow;
          position: absolute;
          bottom: -83px;
          right: 20px;
          inline-size: 203px;
          block-size: 203px;
          background-image: url('../img/piece/piece_09.png');
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 203 * 1vw);
            block-size: calc((100 / 390) * 203 * 1vw);
            bottom: calc((100 / 390) * -307 * 1vw);
            right: 50%;
            transform: translateX(50%);
          }
        }
      }
    }
  }
  /* =====================
    問題提起
  ===================== */
  .rise {
    position: relative;
    background-color: var(--secondary);
    /* ==== 突起 ==== */
    .issue {
      position: relative;
      padding-block-start: 120px;
      padding-block-end: 112px;
      background-color: #004dc3;
      border-radius: 80px 80px 0 0;
      border-bottom: solid 1px #fff;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 37 * 1vw);
        padding-block-end: calc((100 / 390) * 326 * 1vw);
        border-radius: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 40 * 1vw) 0 0;
        .u-inner {
          z-index: 3;
        }
      }

      &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        inline-size: 100%;
        block-size: 585px;
        background-image: url('../img/opening_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &:before {
          background-image: url('../img/opening_bg_2x.png');
          block-size: calc((100 / 390) * 325 * 1vw);
        }
      }

      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        inline-size: 92px;
        block-size: 1291px;
        background-image: url('../img/logo_tate.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &:after {
          background-image: url('../img/logo_tate_2x.png');
          inline-size: calc((100 / 390) * 92 * 1vw);
          block-size: calc((100 / 390) * 1290 * 1vw);
        }
      }
      @media (width <= 768px) {
        .catch {
          & img {
            inline-size: calc((100 / 390) * 279 * 1vw);
          }
        }
      }
      .crack_wrap {
        display: block flex;
        gap: 56px;
        align-items: center;
        justify-content: center;
        margin-block-start: 80px;
        padding-inline-end: 102px;

        @media (width <= 768px) {
          flex-direction: column-reverse;
          gap: calc((100 / 390) * 56 * 1vw);
          margin-block-start: calc((100 / 390) * 38 * 1vw);
          padding-inline-end: 0;
        }
        & > .picture {
          @media (width <= 768px) {
            & img {
              inline-size: calc((100 / 390) * 164 * 1vw);
            }
          }
        }

        .crack_unit {
          inline-size: 637.1px;
          padding-inline: 24px;
          padding-block: 24px;
          border-radius: 24px;
          background-color: #fff;
          display: block flex;
          gap: 10px;
          align-items: center;
          justify-content: center;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 358 * 1vw);
            padding-inline: calc((100 / 390) * 24 * 1vw);
            padding-block: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 24 * 1vw);
            border-radius: calc((100 / 390) * 16 * 1vw);
            flex-direction: column;
            gap: calc((100 / 390) * 7 * 1vw);
            .picture {
              & img {
                inline-size: calc((100 / 390) * 213 * 1vw);
              }
            }
          }

          .description {
            text-align: left;
            font-size: 18px;
            line-height: 2;

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

      .solution {
        inline-size: 960px;
        padding: 27px 40px;
        border-radius: 24px;
        background-color: #eecb58;
        margin-inline: auto;
        margin-block-start: 80px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 358 * 1vw);
          padding: calc((100 / 390) * 27 * 1vw) calc((100 / 390) * 16 * 1vw);
          border-radius: calc((100 / 390) * 24 * 1vw);
          margin-block-start: calc((100 / 390) * 39 * 1vw);
        }
      }
      .hand {
        margin-block-start: 83px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 45 * 1vw);
          width: calc((100 / 390) * 60 * 1vw);
          height: calc((100 / 390) * 69 * 1vw);
        }
      }
      .dakara {
        margin-block-start: 60px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 57 * 1vw);
          & img {
            inline-size: calc((100 / 390) * 240 * 1vw);
          }
        }
      }
      .because {
        margin-block-start: 31px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 24 * 1vw);
        }
        .u-fs-24 {
          position: relative;
          inline-size: 551px;
          padding: 27px 24px;
          border-radius: 24px;
          background-color: #fff;
          text-align: left;
          margin-inline: 420px auto;

          @media (width <= 768px) {
            text-align: center;
            font-size: calc((100 / 390) * 22 * 1vw);
            inline-size: calc((100 / 390) * 358 * 1vw);
            padding: calc((100 / 390) * 28 * 1vw) calc((100 / 390) * 24 * 1vw);
            border-radius: calc((100 / 390) * 24 * 1vw);
            margin-inline: auto;
          }

          &:after {
            content: '';
            display: block flow;
            position: absolute;
            top: -32px;
            right: -230px;
            inline-size: 173px;
            block-size: 206px;
            background-image: url('../img/piece/piece_03.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            pointer-events: none;
          }

          @media (width <= 768px) {
            &:after {
              background-image: url('../img/piece/piece_03_2x.png');
              top: unset;
              bottom: calc((100 / 390) * -260 * 1vw);
              right: unset;
              left: 50%;
              transform: translateX(-50%);
              inline-size: calc((100 / 390) * 173 * 1vw);
              block-size: calc((100 / 390) * 206 * 1vw);
            }
          }
        }
      }
    }

    /* ==== 三種の神器 ==== */
    .treasure {
      position: relative;
      padding-block-start: 160px;
      padding-block-end: 98px;
      background-color: #004dc3;
      border-top: solid 8px var(--secondary);

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 103 * 1vw);
        padding-block-end: calc((100 / 390) * 149 * 1vw);
        border-top: solid calc((100 / 390) * 8 * 1vw) var(--secondary);
      }

      .catch {
        position: relative;

        &::before {
          content: '';
          display: block flow;
          position: absolute;
          top: -107px;
          left: 50%;
          transform: translateX(-50%);
          inline-size: 49px;
          block-size: 56px;
          background-image: url('../img/icon_double-arrow.svg');
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::before {
            top: calc((100 / 390) * -58 * 1vw);
            inline-size: calc((100 / 390) * 26 * 1vw);
            block-size: auto;
            aspect-ratio: 49/56;
          }
        }

        .u-fs-40 {
          .u-txt-bg {
            color: #000;
            padding-inline: 16px;
            padding-block: 9px;
            vertical-align: middle;
            margin-block-end: 14px;
            margin-inline-end: 16px;
          }

          @media (width <= 768px) {
            .u-txt-bg {
              padding-inline: calc((100 / 390) * 8 * 1vw);
              padding-block: calc((100 / 390) * 11 * 1vw);
              margin-block-end: calc((100 / 390) * 10 * 1vw);
              margin-inline-end: calc((100 / 390) * 16 * 1vw);

              &:nth-of-type(1) {
                margin-inline-end: 0;
                margin-block-end: calc((100 / 390) * 25 * 1vw);
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    「クーリングダッシュ」とは
  ===================== */
  .cooling {
    position: relative;
    background-color: #004dc3;
    padding-block-end: 161px;

    @media (width <= 768px) {
      padding-block-end: calc((100 / 390) * 136 * 1vw);
    }

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      inline-size: 100%;
      block-size: 2880px;
      background-image: url('../img/cooling/cooling_bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center bottom;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        background-image: url('../img/cooling/cooling_bg_2x.png');
        block-size: calc((100 / 390) * 1600 * 1vw);
      }
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        inline-size: calc((100 / 390) * 92 * 1vw);
        block-size: calc((100 / 390) * 1291 * 1vw);
        background-image: url('../img/logo_tate_2x.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: none;
      }
    }

    .main-img {
      margin-block-start: 80px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 40 * 1vw);

        & img {
          inline-size: calc((100 / 390) * 308 * 1vw);
        }
      }
    }
    .u-parentheses {
      margin-block-start: 71px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 35 * 1vw);
        font-size: calc((100 / 390) * 22 * 1vw);
        margin-inline: calc((100 / 390) * 53 * 1vw);
      }
    }
    .cooling-system {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
      margin-block-start: 72px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 78 * 1vw);
        flex-direction: column;
        gap: calc((100 / 390) * 56 * 1vw);

        .picture {
          & img {
            inline-size: calc((100 / 390) * 138 * 1vw);
          }
        }
      }
      .u-fukidashi {
        font-size: 18px;
        inline-size: 724px;
        padding: 28px 42px;
        border-radius: 24px;
        background-color: #fff;
        line-height: 2;
        text-align: left;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          inline-size: calc((100 / 390) * 358 * 1vw);
          padding: calc((100 / 390) * 30 * 1vw) calc((100 / 390) * 24 * 1vw);
          border-radius: calc((100 / 390) * 24 * 1vw);
        }
      }
    }
    .temp {
      margin-block-start: 116px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 77 * 1vw);
      }
      & ul {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 240px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 38 * 1vw);
        }
        & li {
          position: relative;
          display: block grid;
          row-gap: 24px;

          @media (width <= 768px) {
            row-gap: calc((100 / 390) * 22 * 1vw);
          }

          & h4.u-fs-24 {
            text-align: left;
          }
          .picture {
            @media (width <= 768px) {
              & img {
                inline-size: calc((100 / 390) * 360 * 1vw);
              }
            }
          }
          .description {
            font-weight: 400;
            line-height: 1.6;
            text-align: left;
            .u-fc-g {
              font-weight: bold;
            }

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

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/piece/piece_temp.png');
          inline-size: 154px;
          block-size: 338px;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::before {
            background-image: url('../img/piece/piece_temp_2x.png');
            inline-size: calc((100 / 390) * 154 * 1vw);
            block-size: calc((100 / 390) * 338 * 1vw);
            top: unset;
            bottom: calc((100 / 390) * -550 * 1vw);
          }
        }
      }
      .bomb {
        margin-block-start: 13px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 396 * 1vw);
          & img {
            inline-size: 100%;
          }
        }
      }
    }
    .control {
      margin-inline: 160px;
      padding-inline: 58px;
      padding-block: 58px;
      background-color: #fff;
      box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      margin-block-start: 80px;

      @media (width <= 768px) {
        margin-inline: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        padding-block: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 262 * 1vw);
        margin-block-start: calc((100 / 390) * 80 * 1vw);
        box-shadow: 0 calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw) 0 rgba(0, 0, 0, 0.2),
          0 calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 4 * 1vw) 0 rgba(0, 0, 0, 0.25);
      }
      .wrap {
        position: relative;
        display: block flex;
        justify-content: space-between;

        @media (width <= 768px) {
          flex-direction: column;

          &[data-id='1'] {
            gap: calc((100 / 390) * 304 * 1vw);
          }
        }

        .unit {
          text-align: left;

          .u-fs-24 {
            margin-block-start: 10px;

            @media (width <= 768px) {
              text-align: center;
              font-size: calc((100 / 390) * 16 * 1vw);
              margin-block-start: calc((100 / 390) * 10 * 1vw);
            }
          }
          .description {
            font-size: 18px;
            line-height: 2;
            border-radius: 8px;

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

          .picture {
            @media (width <= 768px) {
              & img {
                inline-size: calc((100 / 390) * 328 * 1vw);
              }
            }
          }
          &[data-id='1'] {
            .description {
              inline-size: 317px;
              padding: 8px 20px;
              margin-block-start: 13px;

              @media (width <= 768px) {
                inline-size: calc((100 / 390) * 328 * 1vw);
                padding-block: calc((100 / 390) * 8 * 1vw);
                padding-inline: calc((100 / 390) * 20 * 1vw) calc((100 / 390) * 24 * 1vw);
                margin-block-start: calc((100 / 390) * 7 * 1vw);
              }
            }
          }
          &[data-id='2'] {
            .u-fs-24 {
              margin-inline-start: 48px;

              @media (width <= 768px) {
                margin-inline-start: calc((100 / 390) * 48 * 1vw);
              }
            }
            .description {
              line-height: 1.8;
              inline-size: 439px;
              padding: 20px;
              margin-inline: auto 0;
              margin-block-start: 12px;

              @media (width <= 768px) {
                line-height: 1.8;
                inline-size: calc((100 / 390) * 328 * 1vw);
                padding: calc((100 / 390) * 20 * 1vw);
                margin-inline: auto 0;
                margin-block-start: 0;
              }
            }

            @media (width <= 768px) {
              display: block grid;
              .picture {
                grid-row: 2/3;
                margin-block-start: calc((100 / 390) * 18 * 1vw);
              }
              .description {
                grid-row: 1/2;

                &::before {
                  bottom: unset;
                  top: calc((100 / 390) * -48 * 1vw);
                  left: 50%;
                  transform: translate(-50%, 0) scale(-1, -1);
                }
              }
              .u-fs-24 {
                grid-row: 3/4;
                margin-inline-start: 0;
              }
            }
          }
        }
        &:after {
          content: '';
          position: absolute;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/piece/piece_04.png');
          inline-size: 182px;
          block-size: 217px;
          pointer-events: none;
          bottom: -16px;
          left: 354px;
        }

        @media (width <= 768px) {
          &::after {
            background-image: url('../img/piece/piece_04_2x.png');
            inline-size: calc((100 / 390) * 138 * 1vw);
            block-size: calc((100 / 390) * 165 * 1vw);
            pointer-events: none;
            bottom: calc((100 / 390) * 509 * 1vw);
            left: 50%;
            transform: translateX(-50%);
          }
        }
        &[data-id='2'] {
          margin-block-start: 46px;
          padding-inline-end: 16px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 68 * 1vw);
            padding-inline-end: 0;
            gap: calc((100 / 390) * 39 * 1vw);
          }

          &::after {
            background-image: url('../img/piece/piece_06.png');
            inline-size: 174px;
            block-size: 207px;
            left: unset;
            right: 69px;
            bottom: -125px;
          }

          @media (width <= 768px) {
            &::after {
              background-image: url('../img/piece/piece_06_2x.png');
              inline-size: calc((100 / 390) * 174 * 1vw);
              block-size: calc((100 / 390) * 207 * 1vw);
              left: 50%;
              right: unset;
              transform: translateX(-50%);
              bottom: calc((100 / 390) * -371 * 1vw);
            }
          }
        }
      }
      & > .description {
        inline-size: 678px;
        font-size: 18px;
        text-align: left;
        border-radius: 8px;
        padding: 15px 20px;
        margin-block-start: 19px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 328 * 1vw);
          font-size: calc((100 / 390) * 16 * 1vw);
          padding: calc((100 / 390) * 15 * 1vw) calc((100 / 390) * 20 * 1vw);
          margin-block-start: calc((100 / 390) * 38 * 1vw);
        }

        &::before {
          inline-size: 140px;
          block-size: 20.5px;
          mask-image: var(--long);
          right: -120px;
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 390) * 40 * 1vw);
            block-size: calc((100 / 390) * 68 * 1vw);
            mask-image: var(--fukidashi-tate);
            top: unset;
            bottom: calc((100 / 390) * -56 * 1vw);
            right: unset;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
    .flow {
      position: relative;
      margin-inline: 160px;
      padding-inline: 80px;
      padding-block: 78px 556px;
      background-color: #fff;
      box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      margin-block-start: 80px;

      @media (width <= 768px) {
        margin-inline: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        padding-block: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 233 * 1vw);
        margin-block-start: calc((100 / 390) * 80 * 1vw);
        box-shadow: 0 calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw) 0 rgba(0, 0, 0, 0.2),
          0 calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 4 * 1vw) 0 rgba(0, 0, 0, 0.25);
      }
      & > .picture {
        @media (width <= 768px) {
          & img {
            inline-size: calc((100 / 390) * 328 * 1vw);
          }
        }
      }
      & h3.u-fs-32 {
        padding-block: 7px;
        background-color: #eecb58;
        margin-block-start: 80px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 22 * 1vw);
          padding-block: calc((100 / 390) * 12 * 1vw);
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 4 * 1vw) 0;
        }
      }
      .wrap {
        display: block flex;
        justify-content: space-between;
        padding-inline: 38px;
        margin-block-start: 24px;

        @media (width <= 768px) {
          flex-direction: column;
          padding-inline: 0;
          margin-block-start: calc((100 / 390) * 24 * 1vw);
          gap: calc((100 / 390) * 37 * 1vw);
        }

        .unit[data-id='1'] {
          & h4.title {
            font-size: 20px;
            font-weight: bold;
            padding-block: 11px;
            border: solid 2px #b7b7b7;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
              padding-block: calc((100 / 390) * 11 * 1vw);
              border: solid calc((100 / 390) * 2 * 1vw) #b7b7b7;
            }
          }
          .arrow-list {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/blue_arrow_bg.svg');
            inline-size: 332px;
            block-size: 267px;
            color: #fff;
            padding-inline: 70px;
            padding-block: 27px;
            margin-inline: auto;
            margin-block-start: 24px;

            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 332 * 1vw);
              block-size: calc((100 / 390) * 267 * 1vw);
              padding-inline: calc((100 / 390) * 70 * 1vw);
              padding-block: calc((100 / 390) * 27 * 1vw);
              margin-inline: auto;
              margin-block-start: calc((100 / 390) * 24 * 1vw);
            }
            & ol {
              text-align: left;
            }
            .u-fs-24 {
              display: block flow;
              margin-block-start: 18px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 18 * 1vw);
              }
            }
          }
          & ul {
            @media (width <= 768px) {
              inline-size: fit-content;
              margin-inline: auto;
            }
            &.u-fs-24 {
              text-align: left;
              margin-block-start: 34px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 20 * 1vw);
                margin-block-start: calc((100 / 390) * 39 * 1vw);
              }
            }
          }
        }
        .unit[data-id='2'] {
          text-align: left;
          padding-inline: 32px;
          padding-block: 32px;
          border: solid 2px #b7b7b7;

          @media (width <= 768px) {
            padding-inline: calc((100 / 390) * 21 * 1vw);
            padding-block: calc((100 / 390) * 31 * 1vw);
            border: solid calc((100 / 390) * 2 * 1vw) #b7b7b7;
          }

          .history {
            .tr {
              & dt {
                font-weight: bold;
              }
              & dd {
                margin-block-start: 8px;

                @media (width <= 768px) {
                  margin-block-start: calc((100 / 390) * 8 * 1vw);
                }
              }
              & + .tr {
                margin-block-start: 32px;

                @media (width <= 768px) {
                  margin-block-start: calc((100 / 390) * 32 * 1vw);
                }
              }
            }
          }
          .description {
            font-weight: bold;
            margin-block-start: 32px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 32 * 1vw);
            }
          }
        }
      }
      .flow-result {
        padding-block: 16px;
        border-radius: 16px;
        background-color: #edebe1;
        margin-block-start: 80px;

        @media (width <= 768px) {
          padding-block: calc((100 / 390) * 19 * 1vw);
          border-radius: calc((100 / 390) * 16 * 1vw);
          margin-block-start: calc((100 / 390) * 81 * 1vw);
          font-size: calc((100 / 390) * 22 * 1vw);
        }
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        inline-size: 1120px;
        block-size: 498px;
        background-image: url('../img/cooling/cooling_08.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::after {
          background-image: url('../img/cooling/cooling_08_2x.png');
          inline-size: calc((100 / 390) * 358 * 1vw);
          block-size: calc((100 / 390) * 159 * 1vw);
        }
      }
    }
  }

  /* =====================
    「ガイナ」とは
  ===================== */
  .gaina {
    position: relative;
    background-color: #004dc3;
    padding-block-end: 80px;

    @media (width <= 768px) {
      padding-block-end: calc((100 / 390) * 159 * 1vw);
    }

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      inline-size: 100%;
      block-size: 1920px;
      background-image: url('../img/gaina/gaina_bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center bottom;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        background-image: url('../img/gaina/gaina_bg_2x.png');
        block-size: calc((100 / 390) * 1066 * 1vw);
      }
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      inline-size: 92px;
      block-size: 1291px;
      background-image: url('../img/logo_tate.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        background-image: url('../img/logo_tate_2x.png');
        inline-size: calc((100 / 390) * 92 * 1vw);
        block-size: calc((100 / 390) * 1291 * 1vw);
      }
    }

    .main-img {
      margin-block-start: 80px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 41 * 1vw);

        & img {
          inline-size: calc((100 / 390) * 190 * 1vw);
        }
      }
    }
    .u-parentheses {
      margin-block-start: 71px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 36 * 1vw);
        font-size: calc((100 / 390) * 22 * 1vw);
        padding-inline: calc((100 / 390) * 22 * 1vw);
      }
    }

    .gaina_wrap {
      position: relative;
      display: block flex;
      justify-content: center;
      align-items: center;
      gap: 56px;
      margin-block-start: 70px;

      @media (width <= 768px) {
        flex-direction: column-reverse;
        align-items: start;
        margin-block-start: calc((100 / 390) * 76 * 1vw);
        margin-inline: calc((100 / 390) * 16 * 1vw);
        gap: calc((100 / 390) * 45 * 1vw);

        & > .picture {
          margin-inline-start: calc((100 / 390) * 24 * 1vw);
          & img {
            inline-size: calc((100 / 390) * 138 * 1vw);
          }
        }
      }

      .wrap {
        inline-size: 722px;
        background-color: #fff;
        border-radius: 24px;

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

          &::before {
            left: calc((100 / 390) * 75 * 1vw);
            transform: translateX(0);
          }
        }

        .title {
          font-size: 26px;
          font-weight: bold;
          line-height: 2;
          color: #fff;
          background-color: #f30000;
          border-radius: 24px 24px 0 0;
          padding-block: 8px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 26 * 1vw);
            border-radius: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 24 * 1vw) 0 0;
            padding-block: calc((100 / 390) * 24 * 1vw);
          }
        }
        .unit {
          display: block flex;
          text-align: left;
          padding-inline: 58px;
          padding-block: 40px 30px;
          gap: 40px;

          @media (width <= 768px) {
            flex-direction: column;
            gap: calc((100 / 390) * 32 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 40 * 1vw);
          }

          .content {
            .u-txt-bg {
              font-size: 32px;
              padding-inline: 16px;
              padding-block: 11px;
              border-radius: 8px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 32 * 1vw);
                padding-inline: calc((100 / 390) * 16 * 1vw);
                padding-block: calc((100 / 390) * 11 * 1vw);
                border-radius: calc((100 / 390) * 8 * 1vw);
              }
            }
            .description {
              font-size: 18px;
              line-height: 2;
              margin-block-start: 11px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 16 * 1vw);
                margin-block-start: calc((100 / 390) * 11 * 1vw);
              }
            }
          }
          @media (width <= 768px) {
            .picture {
              text-align: center;
              & img {
                inline-size: calc((100 / 390) * 205 * 1vw);
              }
            }
          }
        }
      }
    }

    .img_wrap {
      position: relative;
      margin-block-start: 56px;
      inline-size: 629px;
      padding-inline: 40px;
      padding-block: 40px 32px;
      border-radius: 24px;
      background-color: #eecb58;
      margin-inline: 531px auto;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 358 * 1vw);
        padding-inline: calc((100 / 390) * 40 * 1vw);
        padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 32 * 1vw);
        margin-inline: auto;
        margin-block-start: calc((100 / 390) * 50 * 1vw);
        border-radius: calc((100 / 390) * 24 * 1vw);
      }

      &::before {
        content: '';
        position: absolute;
        top: -95px;
        right: 46px;
        inline-size: 66px;
        block-size: 116px;
        background-image: url('../img/tri_up.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::before {
          background-image: url('../img/tri_up_2x.png');
          inline-size: calc((100 / 390) * 58 * 1vw);
          block-size: calc((100 / 390) * 312 * 1vw);
          top: calc((100 / 390) * -300 * 1vw);
          right: calc((100 / 390) * 47 * 1vw);
        }
      }
      & ul {
        display: block flex;
        gap: 24px;
        text-align: left;

        @media (width <= 768px) {
          flex-direction: column;
          align-items: center;
          gap: calc((100 / 390) * 32 * 1vw);

          & img {
            inline-size: calc((100 / 390) * 266 * 1vw);
          }
        }
        & li[data-id='2'] {
          margin-block-start: 74px;

          @media (width <= 768px) {
            margin-block-start: 0;

            & img {
              inline-size: calc((100 / 390) * 259 * 1vw);
            }
          }
        }
        .title {
          margin-block-start: 15px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 15 * 1vw);
          }
        }
      }
    }
    .temp {
      margin-block-start: 80px;

      @media (width <= 768px) {
        text-align: right;
        margin-block-start: calc((100 / 390) * 80 * 1vw);
        & img {
          inline-size: calc((100 / 390) * 374 * 1vw);
        }
      }
    }
    .graph_wrap {
      position: relative;
      padding-inline: 240px;
      margin-block-start: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: calc((100 / 390) * 77 * 1vw);
      }
      .graph-list {
        display: block flex;
        justify-content: space-between;
        gap: 88px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 80 * 1vw);
        }

        & > li {
          text-align: left;
          & h4.title {
            font-size: 17px;
            font-weight: bold;
            color: #fff;

            @media (width <= 768px) {
              text-align: center;
              font-size: calc((100 / 390) * 24 * 1vw);
            }
          }
          .picture {
            margin-block-start: 24px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 24 * 1vw);
              & img {
                inline-size: calc((100 / 390) * 358 * 1vw);
              }
            }
          }
          & h5.title {
            margin-block-start: 24px;
            color: #fff;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 24 * 1vw);
            }
          }
          .list_wrap {
            display: block flex;
            gap: 40px;
            color: #fff;
            margin-block-start: 16px;

            @media (width <= 768px) {
              justify-content: space-between;
              font-size: calc((100 / 390) * 14 * 1vw);
              gap: calc((100 / 390) * 20 * 1vw);
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
            .tamp-list {
              & li {
                text-align: right;
              }
            }
          }

          &[data-id='2'] {
            & h4.title {
              @media (width <= 768px) {
                text-align: left;
                font-size: calc((100 / 390) * 17 * 1vw);
              }
            }
            & dl {
              margin-block-start: 24px;
              display: block flex;
              color: #fff;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 24 * 1vw);
              }
              & dt {
                flex-shrink: 0;
              }
            }
            & h5.title {
              text-align: right;
            }
          }
        }
      }
    }
    .result {
      margin-block-start: 80px;
      display: block flex;
      align-items: center;
      justify-content: center;
      gap: 58px;
      text-align: left;

      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 390) * 58 * 1vw);
        margin-block-start: calc((100 / 390) * 80 * 1vw);
      }

      .u-fukidashi {
        inline-size: 730px;
        padding-inline: 42px;
        padding-block: 26px;
        border-radius: 24px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 358 * 1vw);
          padding-inline: calc((100 / 390) * 20 * 1vw);
          padding-block: calc((100 / 390) * 28 * 1vw);
          border-radius: calc((100 / 390) * 24 * 1vw);
          font-size: calc((100 / 390) * 22 * 1vw);
        }
      }
      .picture {
        & img {
          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 174 * 1vw);
          }
        }
      }
    }
    .guidance {
      position: relative;
      text-shadow: 0 16px 32px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.25);
      font-size: 50px;
      font-weight: 900;
      color: #fff000;
      margin-block-start: 50px;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 26 * 1vw);
        text-shadow: 0 calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw) rgba(0, 0, 0, 0.2), 0 calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 4 * 1vw) rgba(0, 0, 0, 0.25);
        margin-block-start: calc((100 / 390) * 27 * 1vw);
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -126px;
        left: 50%;
        transform: translateX(-50%);
        inline-size: 74px;
        block-size: 69px;
        background-image: url('../img/icon_single-arrow.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::after {
          bottom: calc((100 / 390) * -96 * 1vw);
          inline-size: calc((100 / 390) * 74 * 1vw);
          block-size: calc((100 / 390) * 69 * 1vw);
        }
      }
    }
    .u-btn {
      margin-inline: auto;
      margin-block-start: 206px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 136 * 1vw);
      }
    }
  }

  /* =====================
    「デラクール」とは
  ===================== */
  .deracool {
    position: relative;
    background-color: #004dc3;
    padding-block-end: 158px;

    @media (width <= 768px) {
      padding-block-end: calc((100 / 390) * 80 * 1vw);

      .u-section-title {
        &::before {
          top: 59%;
        }
        .fs-56 {
          &::before,
          &::after {
            bottom: calc((100 / 390) * 44 * 1vw);
          }
        }
      }
    }

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      inline-size: 100%;
      block-size: 1080px;
      background-image: url('../img/deracool/deracool_bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center bottom;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        background-image: url('../img/deracool/deracool_bg_2x.png');
        block-size: calc((100 / 390) * 600 * 1vw);
      }
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      inline-size: 92px;
      block-size: 1291px;
      background-image: url('../img/logo_tate.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        background-image: url('../img/logo_tate_2x.png');
        inline-size: calc((100 / 390) * 92 * 1vw);
        block-size: calc((100 / 390) * 1291 * 1vw);
      }
    }
    .u-inner {
      .main-img {
        margin-block-start: 80px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);

          img {
            width: calc((100 / 390) * 316 * 1vw);
          }
        }
      }
      .u-parentheses {
        margin-block-start: 71px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 22 * 1vw);
          margin-block-start: calc((100 / 390) * 34 * 1vw);
          padding-inline: calc((100 / 390) * 10 * 1vw);
        }
      }
      & > p.u-fs-24 {
        margin-block-start: 69px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
          margin-block-start: calc((100 / 390) * 80 * 1vw);
        }
      }
      .heat {
        margin-inline: 240px;
        padding-inline: 40px;
        margin-block-start: 118px;

        @media (width <= 768px) {
          margin-inline: calc((100 / 390) * 16 * 1vw);
          padding-inline: 0;
          margin-block-start: calc((100 / 390) * 77 * 1vw);
        }
        & section {
          .description {
            text-align: left;
            color: #fff;
            margin-block-start: 20px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
              padding-inline: calc((100 / 390) * 15 * 1vw);
              margin-block-start: calc((100 / 390) * 37 * 1vw);
            }
          }
          & > .picture {
            @media (width <= 768px) {
              & img {
                inline-size: calc((100 / 390) * 324 * 1vw);
              }
            }
          }
          .heat-list {
            font-size: 18px;
            color: #fff;
            margin-block-start: 24px;
            padding-inline: 40px;
            text-align: left;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 16 * 1vw);
              margin-block-start: calc((100 / 390) * 40 * 1vw);
              padding-inline: calc((100 / 390) * 15 * 1vw);
            }
            & > li {
              position: relative;
              display: block flex;
              gap: 8px;

              &::before {
                content: '・';
                display: block;
                flex-shrink: 0;
              }
            }
          }
          & h3.u-fs-24 {
            margin-block-start: 22px;
            background-color: #fff;
            padding-block: 20px;
            border-radius: 16px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 41 * 1vw);
              padding-block: calc((100 / 390) * 20 * 1vw);
              padding-inline: calc((100 / 390) * 12 * 1vw);
              border-radius: calc((100 / 390) * 16 * 1vw);
            }
          }

          &[data-id='2'] {
            margin-block-start: 80px;
            padding-block-start: 71px;
            border-top: 4px dotted #fff;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 36 * 1vw);
              padding-block-start: calc((100 / 390) * 34 * 1vw);
              border-top: calc((100 / 390) * 4 * 1vw) dotted #fff;
            }
          }
        }
      }
      .shield {
        margin-inline: 160px;
        margin-block-start: 118px;
        background-color: #fff;
        box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        border: solid 2px #cae5ff;

        @media (width <= 768px) {
          margin-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-start: calc((100 / 390) * 38 * 1vw);
          box-shadow: 0 calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw) 0 rgba(0, 0, 0, 0.2),
            0 calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 4 * 1vw) 0 rgba(0, 0, 0, 0.25);
          border: solid calc((100 / 390) * 2 * 1vw) #cae5ff;
        }
        & section {
          .shield-title {
            position: relative;
            padding-inline: 80px;
            display: block flex;
            justify-content: space-between;
            text-align: left;
            background-color: #cae5ff;

            @media (width <= 768px) {
              flex-direction: column;
              align-items: center;
              padding-inline: calc((100 / 390) * 15 * 1vw);
            }
            &::after {
              content: '';
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: -54px;
              inline-size: 1120px;
              block-size: 54px;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/deracool/title.png');
              pointer-events: none;
            }

            @media (width <= 768px) {
              &::after {
                background-image: url('../img/deracool/title_2x.png');
                inline-size: calc((100 / 390) * 358 * 1vw);
                block-size: calc((100 / 390) * 54 * 1vw);
                bottom: calc((100 / 390) * -54 * 1vw);
              }
            }
            .title {
              color: #004dc3;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 32 * 1vw);
              }
            }
          }
          &[data-id='1'] {
            .shield-title {
              & > .unit {
                & > p {
                  margin-block-start: 39px;

                  @media (width <= 768px) {
                    font-size: calc((100 / 390) * 20 * 1vw);
                    margin-block-start: calc((100 / 390) * 34 * 1vw);
                  }
                }
              }
              .picture {
                @media (width <= 768px) {
                  & img {
                    inline-size: calc((100 / 390) * 154 * 1vw);
                  }
                }
              }
            }
            .dera-list {
              margin-block-start: 136px;
              margin-inline: 80px;
              padding-block-end: 80px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 133 * 1vw);
                margin-inline: calc((100 / 390) * 13 * 1vw);
                padding-block-end: calc((100 / 390) * 80 * 1vw);
              }
              & > li {
                position: relative;
                display: block flex;
                gap: 134px;
                border-radius: 8px;
                border: solid 2px #0092e8;
                padding-inline: 80px;
                padding-block: 40px 29px;

                @media (width <= 768px) {
                  flex-direction: column;
                  gap: calc((100 / 390) * 22 * 1vw);
                  border-radius: calc((100 / 390) * 8 * 1vw);
                  border: solid calc((100 / 390) * 2 * 1vw) #0092e8;
                  padding-inline: calc((100 / 390) * 12 * 1vw);
                  padding-block: calc((100 / 390) * 38 * 1vw) calc((100 / 390) * 29 * 1vw);

                  & > .picture {
                    @media (width <= 768px) {
                      & img {
                        inline-size: calc((100 / 390) * 282 * 1vw);
                      }
                    }
                  }
                }
                .unit {
                  inline-size: 384px;
                  text-align: left;

                  @media (width <= 768px) {
                    inline-size: 100%;
                  }
                  .description {
                    line-height: 2;
                    margin-block-start: 14px;

                    @media (width <= 768px) {
                      margin-block-start: calc((100 / 390) * 14 * 1vw);
                    }
                  }
                  .picture {
                    @media (width <= 768px) {
                      & img {
                        inline-size: calc((100 / 390) * 300 * 1vw);
                      }
                    }
                  }
                }
                & + li {
                  margin-block-start: 24px;

                  @media (width <= 768px) {
                    margin-block-start: calc((100 / 390) * 24 * 1vw);
                  }
                }
                &[data-id='2'] {
                  & > .picture {
                    margin-block-start: 32px;

                    @media (width <= 768px) {
                      margin-block-start: 0;
                    }
                  }
                  .unit {
                    .description {
                      margin-block-start: 6px;

                      @media (width <= 768px) {
                        margin-block-start: calc((100 / 390) * 6 * 1vw);
                      }
                    }
                  }
                }
              }
            }
          }
          &[data-id='2'] {
            .shield-title {
              & > .unit {
                .title {
                  margin-block-start: 36px;

                  @media (width <= 768px) {
                    margin-block-start: calc((100 / 390) * 23 * 1vw);
                  }
                }
                & > p {
                  margin-block-start: 15px;

                  @media (width <= 768px) {
                    font-size: calc((100 / 390) * 20 * 1vw);
                    margin-block-start: calc((100 / 390) * 16 * 1vw);
                  }
                }
              }
              @media (width <= 768px) {
                gap: calc((100 / 390) * 8 * 1vw);

                .picture {
                  & img {
                    inline-size: calc((100 / 390) * 174 * 1vw);
                  }
                }
              }
            }
            .temp {
              margin-block-start: 94px;
              margin-inline: 80px;
              padding-block-end: 80px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 94 * 1vw);
                margin-inline: calc((100 / 390) * 13 * 1vw);
                padding-block-end: calc((100 / 390) * 52 * 1vw);
              }
              .temp_wrap {
                display: block grid;
                grid-template-columns: repeat(2, max-content);
                justify-content: space-between;
                align-items: end;

                @media (width <= 768px) {
                  grid-template-columns: 1fr;
                  align-items: center;
                  row-gap: calc((100 / 390) * 38 * 1vw);
                }

                .temp_unit {
                  position: relative;
                  & h4.title {
                    font-weight: bold;
                    margin-block-start: 8px;

                    @media (width <= 768px) {
                      margin-block-start: calc((100 / 390) * 8 * 1vw);
                    }
                  }
                  .picture {
                    @media (width <= 768px) {
                      & img {
                        inline-size: calc((100 / 390) * 328 * 1vw);
                      }
                    }
                  }
                  .picture[data-id='2'] {
                    margin-block-start: 24px;

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

                  .description {
                    @media (width <= 768px) {
                      margin-block-start: calc((100 / 390) * 16 * 1vw);
                    }
                  }

                  &[data-id='1'] {
                    padding-inline-end: 46px;
                    border-right: 4px dotted #cae5ff;

                    @media (width <= 768px) {
                      padding-inline-end: 0;
                      border-right: none;
                      border-bottom: calc((100 / 390) * 4 * 1vw) dotted #cae5ff;
                      padding-block-end: calc((100 / 390) * 38 * 1vw);
                    }

                    & h4.title {
                      text-align: left;
                    }
                    & p > img {
                      @media (width <= 768px) {
                        inline-size: calc((100 / 390) * 213 * 1vw);
                        margin-block-start: calc((100 / 390) * 21 * 1vw);
                      }
                    }
                  }
                  &[data-id='2'] {
                    & p > img {
                      @media (width <= 768px) {
                        inline-size: calc((100 / 390) * 272 * 1vw);
                        margin-block-start: calc((100 / 390) * 21 * 1vw);
                      }
                    }
                  }
                }
              }
              & > .description {
                margin-block-start: 16px;

                @media (width <= 768px) {
                  margin-block-start: calc((100 / 390) * 16 * 1vw);
                }
              }
              & > .unit {
                display: block grid;
                grid-template-columns: repeat(2, max-content);
                justify-content: center;
                gap: 240px;
                margin-block-start: 27px;

                @media (width <= 768px) {
                  grid-template-columns: 1fr;
                  gap: 0;
                  margin-block-start: calc((100 / 390) * 27 * 1vw);
                }
              }
            }
          }
          &[data-id='3'] {
            .shield-title {
              @media (width <= 768px) {
                gap: calc((100 / 390) * 10 * 1vw);
              }
              & > .unit {
                .title {
                  margin-block-start: 56px;

                  @media (width <= 768px) {
                    font-size: calc((100 / 390) * 28 * 1vw);
                    margin-block-start: calc((100 / 390) * 22 * 1vw);
                    text-align: center;
                  }
                }
              }
              .picture {
                @media (width <= 768px) {
                  & img {
                    inline-size: calc((100 / 390) * 142 * 1vw);
                  }
                }
              }
            }
            & p {
              .picture {
                margin-block-start: 58px;
                margin-inline-start: 15px;

                @media (width <= 768px) {
                  margin-block-start: calc((100 / 390) * 54 * 1vw);
                  margin-inline-start: 0;

                  & > img {
                    inline-size: calc((100 / 390) * 358 * 1vw);
                  }
                }
              }
            }
          }
        }
      }
      .result {
        margin-block-start: 80px;
        display: block flex;
        align-items: center;
        justify-content: center;
        gap: 58px;
        text-align: left;

        @media (width <= 768px) {
          flex-direction: column;
          margin-block-start: calc((100 / 390) * 40 * 1vw);
          gap: calc((100 / 390) * 60 * 1vw);
        }
        .u-fukidashi {
          inline-size: 730px;
          padding-inline: 42px;
          padding-block: 26px;
          border-radius: 24px;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 358 * 1vw);
            padding-inline: calc((100 / 390) * 20 * 1vw);
            padding-block: calc((100 / 390) * 28 * 1vw);
            border-radius: calc((100 / 390) * 24 * 1vw);
            font-size: calc((100 / 390) * 22 * 1vw);
          }
        }
        .picture {
          @media (width <= 768px) {
            & img {
              inline-size: calc((100 / 390) * 203 * 1vw);
            }
          }
        }
      }
      .guidance {
        position: relative;
        text-shadow: 0 16px 32px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.25);
        font-size: 50px;
        font-weight: 900;
        color: #fff000;
        margin-block-start: 50px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 26 * 1vw);
          text-shadow: 0 calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw) rgba(0, 0, 0, 0.2), 0 calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 4 * 1vw) rgba(0, 0, 0, 0.25);
          margin-block-start: calc((100 / 390) * 25 * 1vw);
        }

        &::after {
          content: '';
          position: absolute;
          bottom: -126px;
          left: 50%;
          transform: translateX(-50%);
          inline-size: 74px;
          block-size: 69px;
          background-image: url('../img/icon_single-arrow.svg');
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          pointer-events: none;
        }
        @media (width <= 768px) {
          &::after {
            bottom: calc((100 / 390) * -96 * 1vw);
            inline-size: calc((100 / 390) * 74 * 1vw);
            block-size: calc((100 / 390) * 69 * 1vw);
          }
        }
      }
      .u-btn {
        margin-inline: auto;
        margin-block-start: 206px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 136 * 1vw);
        }
      }
    }
  }

  /* =====================
    closing
  ===================== */
  .closing {
    border-top: 8px solid var(--secondary);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/closing_bg.png');
    padding-block: 24px 144px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 28 * 1vw);
      background-image: url('../img/closing_bg_2x.png');
    }
    .piece {
      margin-block-start: 40px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 29 * 1vw);

        & img {
          inline-size: calc((100 / 390) * 216 * 1vw);
        }
      }
    }
    .description {
      color: #fff;
      margin-block-start: 22px;
      text-shadow: 0 0 8px #013078;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 26 * 1vw);
        text-shadow: 0 0 calc((100 / 390) * 8 * 1vw) #013078;
      }
    }
  }
}

/* =====================
  footer
===================== */
.footer {
  background-color: var(--secondary);
  .footer-inner {
    background-color: #fff;
    border-radius: 40px 40px 0 0;
    padding-block: 40px;

    @media (width <= 768px) {
      border-radius: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 40 * 1vw) 0 0;
      padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 40 * 1vw);
    }
    .u-inner {
      padding-inline: 80px;
      display: block grid;
      grid-template-columns: max-content 1fr max-content;
      align-items: end;
      gap: 24px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 20 * 1vw);
        grid-template-columns: 1fr;
        gap: calc((100 / 390) * 24 * 1vw);
      }

      .address {
        text-align: left;
        .company {
          font-size: 18px;
          font-weight: bold;
          line-height: 1.6;
          letter-spacing: 0.54px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
            letter-spacing: calc((100 / 390) * 0.54 * 1vw);
          }
        }
        .unit {
          line-height: 1.6;
          letter-spacing: 0.48px;

          @media (width <= 768px) {
            letter-spacing: calc((100 / 390) * 0.48 * 1vw);
            text-align: center;
          }

          &[data-id='1'] {
            margin-block-start: 8px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 8 * 1vw);
            }
          }
          &[data-id='2'] {
            & a {
              display: inline-block;
              margin-inline-end: 32px;

              @media (width <= 768px) {
                margin-inline-end: calc((100 / 390) * 32 * 1vw);
              }
            }
          }
        }
      }
      .foot {
        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 17 * 1vw);
        }
        .anchor {
          position: relative;
          display: block flex;
          align-items: center;
          justify-content: flex-end;
          gap: 24px;
          color: #105aad;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 16 * 1vw);
            margin-inline-end: calc((100 / 390) * 8 * 1vw);
          }
          &::after {
            content: '';
            display: block flow;
            inline-size: 18px;
            block-size: 18px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/icon_link.svg');
          }

          @media (width <= 768px) {
            &::after {
              inline-size: calc((100 / 390) * 18 * 1vw);
              block-size: calc((100 / 390) * 18 * 1vw);
            }
          }
        }
        .copyright {
          display: block flow;
          font-size: 16px;
          margin-block-start: 27px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
            margin-block-start: calc((100 / 390) * 27 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
      to-top
    ===================== */
.to-top {
  position: absolute;
  right: 48px;
  bottom: 133px;
  z-index: 19;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../img/to-top.png');
  inline-size: 236px;
  block-size: 263px;
  transition: all 250ms ease 0s;

  @media (width <= 768px) {
    background-image: url('../img/to-top_2x.png');
    width: 284px;
    height: 316px;
    inline-size: calc((100 / 390) * 142 * 1vw);
    block-size: calc((100 / 390) * 158 * 1vw);
    right: calc((100 / 390) * 20 * 1vw);
    bottom: calc((100 / 390) * -90 * 1vw);
  }
}

/* ==== animation ==== */
.mv {
  .js-parallax {
    opacity: 0;
    &.on {
      animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
  }
}

.js-parallax {
  opacity: 0;
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
  &.on {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}