@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@import url('reset.css');
@import url('common.css');

/* Form
======================================== */

.form {
  background: url('../images/form_bg.png');
  color: var(--color-text);
  min-height: 100dvh;
  width: 100%;
  padding-block: 60px;
  position: relative;

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

.form__curtain {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;

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

.form__curtain-image {
  width: 768px;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

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

  @media screen and (min-width: 1024px) {
    height: 309px;
  }
}

.form__sparkles {
  max-width: 1440px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.form__sparkle {
  width: 153px;
  height: auto;
  opacity: 0.15;
  position: absolute;
  top: 30px;

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

.form__sparkle--left {
  left: 0;
}

.form__sparkle--right {
  right: 0;
  transform: rotateY(180deg);
}

.form__card {
  background: #fff;
  border-radius: 30px;
  border: 8px solid var(--color-form-card-border);
  text-align: center;
  padding: 52px 16px 40px;
  position: relative;

  @media screen and (min-width: 768px) {
    max-width: 740px;
    border-radius: 20px;
    border-width: 6px;
    padding: 72px 16px;
    margin-inline: auto;
  }
}

.form__congrats {
  max-width: 207px;
  position: absolute;
  top: -6px;
  left: -15px;

  @media screen and (min-width: 768px) {
    max-width: 331px;
    top: -3px;
    left: 40px;
  }
}

.form__lead {
  color: var(--color-blue);
  font-weight: 600;
  margin-bottom: 24px;

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

.form__lead-main {
  font-size: 14px;
  margin-bottom: 4px;

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

.form__lead-sub {
  font-size: 20px;

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

.form__text {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 24px;

  @media screen and (min-width: 768px) {
    font-size: 16px;
    margin-bottom: 44px;
  }

  & > :not(:last-child) {
    margin-bottom: 1em;
  }
}

.form__error {
  color: var(--color-error);
}

.form__input {
  display: block;
  max-width: 440px;
  width: 100%;
  padding: 16px 8px;
  border: 1px solid var(--color-input-border);
  background: var(--color-input-background);
  border-radius: 8px;
  margin-bottom: 24px;
  margin-inline: auto;

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

  &::placeholder {
    color: #a4a8c0;
  }
}

.form__submit {
  max-width: 160px;
  width: 100%;

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

/* Campaign
======================================== */

.campaign {
  color: var(--color-text);
}

.campaign__headline {
  background: var(--color-blue-light);
  text-align: center;
  font-weight: 600;
  color: var(--color-main);
  font-size: 15px;
  padding-block: 6px;

  @media screen and (min-width: 768px) {
    font-size: 16px;
    padding-block: 8px;
  }
}

.campaign__wave {
  height: 136px;
  background-image: linear-gradient(170deg, var(--color-beige-light) 0%, var(--color-beige-light) 50%, #fff 50%, #fff 100%);
  padding-top: 40px;
  margin-bottom: -32px;

  @media screen and (min-width: 768px) {
    background-image: linear-gradient(176deg, var(--color-beige-light) 0%, var(--color-beige-light) 50%, #fff 50%, #fff 100%);
    padding-top: 23px;
    margin-bottom: -24px;
  }
}

.campaign__wave--reverse {
  background-image: linear-gradient(170deg, #fff 0%, #fff 50%, var(--color-beige-light) 50%, var(--color-beige-light) 100%);

  @media screen and (min-width: 768px) {
    background-image: linear-gradient(176deg, #fff 0%, #fff 50%, var(--color-beige-light) 50%, var(--color-beige-light) 100%);
  }
}

/* Campaign MV
======================================== */

.campaign-mv {
  background-image: url('../images/mv_bg_sp.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  @media screen and (min-width: 768px) {
    height: 480px;
    background-image: url('../images/mv_bg_pc.png');
  }
}

.campaign-mv__title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 32px 8px 0 8px;

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

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

/* Campaign Message
======================================== */

.campaign-message {
  background-image: url('../images/message_bg_sp.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 23dvw;
  padding-bottom: 40px;

  @media screen and (min-width: 768px) {
    background-image: url('../images/message_bg_pc.png');
    background-size: 1440px 95px;
    padding-top: 120px;
    padding-bottom: 72px;
  }

  @media screen and (min-width: 1440px) {
    background-size: 100% 95px;
  }
}

.campaign-message__card {
  max-width: 840px;
  border-radius: 30px;
  background: #fff;
  text-align: center;
  font-size: 15px;
  line-height: 2.2;
  padding: 60px 16px 40px 16px;
  margin-inline: auto;
  position: relative;

  @media screen and (min-width: 768px) {
    font-size: 16px;
    line-height: 1.875;
    padding-bottom: 68px;
  }

  & > :not(:last-child) {
    margin-bottom: 24px;
  }
}

.campaign-message__title {
  line-height: 1;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);

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

.campaign-message__em {
  font-size: 24px;
}

.campaign-message__note {
  font-size: 12px;
}

/* Campaign Coupons
======================================== */

.campaign-coupons__title-en {
  display: block;
  max-width: 100%;
  width: 120px;
  margin-inline: auto;
  margin-bottom: 16px;

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

.campaign-coupons__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--color-main);
  font-size: 24px;
  letter-spacing: 0.08em;
  margin-bottom: 20px;

  @media screen and (min-width: 768px) {
    gap: 10px;
    font-size: 28px;
    margin-bottom: 40px;
  }
}

.campaign-coupons__title-line {
  max-width: 100%;
  width: 266px;
  line-height: 0;

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

.campaign-coupons__steps {
  @media screen and (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
  }

  & > :not(:last-child) {
    position: relative;

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

    &:after {
      content: '';
      display: block;
      width: 6px;
      height: 16px;
      background: #a4aad0;
      position: absolute;

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

      @media screen and (min-width: 768px) {
        width: 20px;
        height: 6px;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
      }
    }
  }
}

.campaign-coupons__step {
  border-radius: 16px;
  background-color: #fff;
  padding: 20px;

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

.campaign-coupons__step-header {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  gap: 8px;

  @media screen and (min-width: 768px) {
    grid-template-columns: 60px auto;
    gap: 10px;
  }
}

.campaign-coupons__step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #a4aad0;
  background-color: var(--color-main);
  text-align: center;
  color: #fff;
  line-height: 1;

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

.campaign-coupons__step-label {
  font-size: 10px;

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

.campaign-coupons__step-count {
  font-size: 19px;

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

.campaign-coupons__step-text {
  color: var(--color-main);
  font-size: 18px;

  span {
    font-size: 13px;
    position: relative;
    top: -5px;
    left: -5px;
  }
}

.campaign-coupons__notes {
  margin-top: 12px;
  margin-bottom: 20px;
}

.campaign-coupons__note {
  font-size: 12px;
  position: relative;
  padding-left: 1.3em;
}

.campaign-coupons__note-marker {
  position: absolute;
  top: 0;
  left: 0;
}

/* Campaign Locations
======================================== */

.campaign-locations {
  @media screen and (min-width: 768px) {
    padding-bottom: 100px;
  }
}

.campaign-locations__title {
  margin-bottom: 24px;

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

.campaign-locations__map {
  max-width: 700px;
  margin-bottom: 20px;
  margin-inline: auto;

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

.campaign-locations__nav {
  border-radius: 15px;
  background: var(--color-beige-light);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 40px;

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

  .btn--primary {
    display: block;
    text-align: center;
    padding: 12px 24px 12px 12px;
  }
}

.campaign-locations__hotels {
  max-width: 100%;
  width: 375px;
  margin-inline: auto;

  @media screen and (min-width: 768px) {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 20px;
  }

  & > :not(:last-child) {
    @media screen and (max-width: 767px) {
      margin-bottom: 40px;
    }
  }
}

.campaign-locations__hotel {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0;
  border-radius: 15px;
  overflow: hidden;
}

.campaign-locations__name {
  background-color: var(--color-main);
  text-align: center;
  color: #fff;
  font-size: 20px;
  padding: 8px;

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

.campaign-locations__point-title {
  width: 280px;
  border-radius: 15px;
  border: 1px solid var(--color-main);
  background: var(--color-marker);
  text-align: center;
  color: var(--color-main);
  font-size: 14px;
  font-weight: 700;
  padding: 4px;
  margin-inline: auto;
  position: relative;
  z-index: 2;

  @media screen and (min-width: 768px) {
    max-width: 260px;
    width: 100%;
    font-size: 13px;
  }
}

.campaign-locations__point-text {
  border-radius: 10px;
  background: #fff;
  color: var(--color-main);
  font-size: 14px;
  padding: 25px 16px 16px 16px;
  margin-top: -15px;

  @media screen and (min-width: 768px) {
    height: calc(100% - 16px);
    font-size: 15px;
    padding-bottom: 20px;
  }
}

.campaign-locations__access {
  font-size: 12px;
  padding-block: 12px;

  a {
    text-decoration: underline;
    color: var(--color-main);

    img {
      width: 10px;
      position: relative;
      top: -5px;
    }
  }
}

.campaign-locations__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  .btn {
    display: block;
    text-align: center;
    padding: 12px 24px 12px 12px;

    @media screen and (min-width: 768px) {
      background-position: right 12px center, 0 0;
      font-size: 13px;
    }
  }
}

/* Campaign Questions
======================================== */

.campaign-questions {
  background: var(--color-beige-light);
  padding-bottom: 40px;

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

.campaign-questions__list {
  margin-top: 28px;

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

  & > :not(:last-child) {
    margin-bottom: 20px;

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

.campaign-questions__item {
  border-radius: 20px;
  background: #fff;

  &.is-open {
    .campaign-questions__button {
      background-image: url('../images/icon_minus.png');
      background-repeat: no-repeat;
      background-position: right 20px top 32px;
      background-size: 15px 3px;

      @media screen and (min-width: 768px) {
        background-position: right 20px top 42px;
        background-size: 20px 4px;
      }
    }

    .campaign-questions__answer {
      max-height: 500px;
      padding-bottom: 20px;

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

.campaign-questions__button {
  width: 100%;
  display: grid;
  grid-template-columns: 32px auto;
  align-items: start;
  background-image: url('../images/icon_plus.png');
  background-repeat: no-repeat;
  background-position: right 20px top 25px;
  background-size: 15px 15px;
  font-size: 16px;
  font-weight: 600;
  padding: 20px 40px 20px 20px;

  @media screen and (min-width: 768px) {
    background-position: right 20px top 35px;
    background-size: 20px 20px;
    font-size: 18px;
    padding: 30px 48px 30px 30px;
  }
}

.campaign-questions__icon-q,
.campaign-questions__icon-a {
  width: 20px;
  position: relative;
  top: -3px;
}

.campaign-questions__answer {
  max-height: 0;
  padding-inline: 20px;
  overflow: hidden;
}

.campaign-questions__answer-body {
  display: grid;
  grid-template-columns: 32px auto;
  font-size: 13px;

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

.campaign-questions__answer-link {
  margin-top: 16px;

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

/* Campaign Footer
======================================== */

.campaign-footer {
  background: var(--color-text);
  color: #fff;
  text-align: center;
  padding-block: 8px;

  small {
    font-size: 12px;
  }
}