@charset "UTF-8";

/**********************
Base
**********************/
#page-wrapper {
  --primary-bg-color: #D1EFFF;
  --secondary-bg-color: #F8F88C;
  --primary-color: #002896;
  --secondary-color: #0B7DB6;
  --color-red: #BF0000;
  --color-yellow: #FFEE98;
  --color-ivory: #E2D4C3;
  --color-bright-yellow: #FFE16C;
  --color-grayish-blue: #BECDF5;
  --color-violet: #323889;
}

#mainContent {
  .section-roll.-narrow {
    max-width: 820px;
  }
}

/**********************
Component
**********************/
.btn.-red {
  background-color: var(--color-red);
  border-radius: 3em;
  color: white;
  font-weight: bold;
  margin-inline: auto;
  padding: .6em !important;

  @media screen and (min-width: 768px) {
    max-width: 480px;
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    max-width: 343px;
    font-size: 18px;
  }
}

@media (hover:hover) {
  .btn.-red:hover {
    opacity: 0.8;
  }
}

.title.-primary {
  position: relative;

  @media screen and (max-width: 767px) {
    padding-bottom: 26px !important;
  }
}

.title.-primary {
  margin-bottom: 8px !important;

  @media screen and (min-width: 768px) {
    margin-bottom: 24px !important;
  }

  img {
    height: 24px;

    @media screen and (min-width: 768px) {
      height: 36px;
    }
  }
}

.title.-primary::after {
  aspect-ratio: 336/20;
  background: url(/campaign/img/campaign00197/deco-wavy-line.png) center no-repeat;
  background-color: transparent !important;
  background-size: contain;
  height: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;

  @media screen and (min-width: 768px) {
    width: 252px !important;
  }

  @media screen and (max-width: 767px) {
    width: 168px !important;
  }
}

/**********************
Project
**********************/
#mainVisual {
  background-color: var(--primary-bg-color);

  .title {
    margin: auto !important;
    margin-inline: auto;
    max-width: 524px;
  }
}

#termPanel {
  .section-roll {
    @media screen and (max-width: 767px) {
      padding: 24px 16px;
    }
  }

  .term-container {
    display: block;
    text-align: center;
  }

  .term-campaign {
    display: flex;
    justify-content: center;

    @media screen and (min-width: 768px) {
      font-size: 24px;
    }

    @media screen and (max-width: 767px) {
      font-size: 20px;
    }

    dt,
    dd {
      font-weight: bold;
    }

    dt::after {
      content: "\003A";
    }
  }

  .term-text-under {
    p {
      color: #4D4D4D !important;
      font-weight: normal !important;
      margin: 0 !important;
      text-align: center;

      @media screen and (max-width: 767px) {
        font-size: 12px !important;
      }
    }
  }

  .btn-container {
    margin-top: 24px;

    p {
      margin-top: 16px;

      @media screen and (max-width: 767px) {
        font-size: 12px !important;
      }

      .text-link {
        display: inline;
      }
    }
  }
}

#pointFlowPanel {
  .section-roll {
    @media screen and (max-width: 767px) {
      padding: 32px 16px;
    }
  }

  .card-box {
    .card {
      border-radius: 8px;
      color: #333;
      font-weight: normal;
      height: auto;

      @media screen and (min-width: 768px) {
        margin-top: 24px;
      }

      @media screen and (max-width: 767px) {
        margin-top: 16px;
        padding: 16px 24px;
      }

      .title {
        img {
          margin-inline: auto;

          @media screen and (min-width: 768px) {
            height: 42px;
          }

          @media screen and (max-width: 767px) {
            height: 27px;
          }
        }
      }

      .text {
        margin-bottom: 0;

        @media screen and (min-width: 768px) {
          margin-top: 24px;
        }

        @media screen and (max-width: 767px) {
          font-size: 16px;
          margin-top: 16px;
        }

        img {
          @media screen and (min-width: 768px) {
            max-width: 360px;
          }

          @media screen and (max-width: 767px) {
            max-width: 294px;
          }
        }
      }

      .image {
        @media screen and (min-width: 768px) {
          margin-top: 24px;
        }

        @media screen and (max-width: 767px) {
          margin-top: 16px;
        }

        img {
          @media screen and (min-width: 768px) {
            max-width: 360px;
          }

          @media screen and (max-width: 767px) {
            max-width: 294px;
          }
        }
      }

      .btn {
        @media screen and (min-width: 768px) {
          max-width: 360px;
        }

        @media screen and (max-width: 767px) {
          max-width: 253px;
        }
      }
    }

    .one-btn-pattern {
      .btn-container {
        @media screen and (min-width: 768px) {
          margin-top: 24px;
        }

        @media screen and (max-width: 767px) {
          margin-top: 16px;
        }
      }
    }
  }

  .card-box:nth-of-type(1) {
    .card {
      margin-top: 0;
    }
  }
}

#aboutPanel {
  .section-roll {
    padding: 24px 16px;
  }

  .card-box {

    @media screen and (min-width: 768px) {
      margin-top: 20px;
    }

    @media screen and (max-width: 767px) {
      margin-top: 16px;
    }

    .card {
      align-items: center;
      background-color: white;
      color: var(--secondary-color);
      display: flex;

      @media screen and (min-width: 768px) {
        padding: 16px 32px;
      }

      @media screen and (max-width: 767px) {
        padding: 16px;
      }

      .thumb {
        flex-shrink: 0;

        @media screen and (min-width: 768px) {
          width: 100px;
        }

        @media screen and (max-width: 767px) {
          width: 80px;
        }

        img {
          max-width: 100%;
        }
      }

      .text {
        font-weight: bold;

        @media screen and (min-width: 768px) {
          font-size: 18px;
          padding-left: 24px;
        }

        @media screen and (max-width: 767px) {
          font-size: 14px;
          padding-left: 12px;
        }
      }
    }
  }

  .card-box:nth-of-type(5),
  .card-box:nth-of-type(6) {
    @media screen and (min-width: 768px) {
      margin-top: 32px;
    }

    @media screen and (max-width: 767px) {
      margin-top: 24px;
    }

    img {
      margin-inline: auto;

      @media screen and (min-width: 768px) {
        max-width: 480px;
      }

      @media screen and (max-width: 767px) {
        max-width: 343px;
      }
    }
  }
}

/**********************
Utility
**********************/
.bg-primary {
  background-color: var(--primary-bg-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-bg-color) !important;
}

.d-inline-block {
  display: inline-block !important;
}

.font-normal {
  font-weight: normal !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-bold {
  font-weight: bold !important;
}

.text-left {
  text-align: left !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-red {
  color: var(--color-red) !important;
}


@media screen and (min-width: 768px) {
  .fs-md-16 {
    font-size: 16px !important;
  }

  .fs-md-18 {
    font-size: 18px !important;
  }

  .fs-md-20 {
    font-size: 20px !important;
  }

  .mt-md-16 {
    margin-top: 16px !important;
  }

  .mt-md-20 {
    margin-top: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .d-sm-none {
    display: none !important;
  }

  .fs-sm-14 {
    font-size: 14px !important;
  }

  .fs-sm-16 {
    font-size: 16px !important;
  }

  .mt-sm-8 {
    margin-top: 8px !important;
  }

  .mt-sm-10 {
    margin-top: 10px !important;
  }

  .mt-sm-16 {
    margin-top: 16px !important;
  }

  .text-sm-left {
    text-align: left !important;
  }
}