@charset "UTF-8";


/* ===============================================
  * Foundation *
=============================================== */

/*
 * Utility
 */

.u-hidden-mobile {
  @media (max-width: 767px) {
    display: none !important;
  }
}

.u-hidden-desktop {
  @media (min-width: 768px) {
    display: none !important;
  }
}


/*
 * Layout
 */

.global-contents__inner {
  width: 100%;
  padding-bottom: 0;
}

.p-lp__wrapper {
  @media (min-width: 768px) {
    --zindex-floating: 10;
    --zindex-bg: 1;
    --drop-shadow: drop-shadow(0 0 50px rgba(0, 0, 0, .2));

    position: relative;

    display: grid;
    grid-template-areas: "lp-heading lp-content lp-navigation";
    /* grid-template-columns: calc(553 / 1400 * 100%) calc(550 / 1400 * 100%) 1fr; */
    grid-template-columns: 1fr 1fr calc(300 / 1400 * 100%);

    background: linear-gradient(115deg, rgba(209,235,245,1) 13%, rgba(240,217,240,1) 95%);

    &::after {
      content: "";

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--zindex-bg);

      width: 100%;
      height: 100dvh;
      background: linear-gradient(135deg, rgba(209,235,245,1) 0%, rgba(240,217,240,1) 100%);;
    }

    & > * {
      position: relative;
      z-index: var(--zindex-floating);
    }

    .p-lp__stick-content--heading {
      grid-area: lp-heading;
    }

    .p-lp__inner {
      grid-area: lp-content;
    }

    .p-lp__stick-content--navigation {
      grid-area: lp-navigation;
    }
  }
}

.p-lp__inner {
  --padding-horizontal-general: 1.5rem;
  --font-family-lp:  "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  display: grid;

  width: 100%;
  margin-inline: auto;
  background-color: var(--color-white);

  font-family: var(--font-family-lp);

  @media (min-width: 768px) {
    filter: var(--drop-shadow);
  }
}


/*
 * Buttons
 */

.p-lp__button--order {
  display: block;

  max-width: 25rem;
  margin: 4rem auto ;
}

[class*="p-lp__button--download"] {
  display: block;

  max-width: 25rem;
  margin-top: 2rem;
  margin-inline: auto;
}


/*
 * Texts
 */

.p-lp__text--description {
  display: block;
  margin-block: 2rem;
  padding-inline: var(--padding-horizontal-general);

  color: #333;
  font-size: 1.3rem;
  letter-spacing: normal;
  line-height: calc(21.6 / 13);
}




/* ===============================================
  * Specific *
=============================================== */

[class*="p-lp__stick-content"] {
  @media (min-width: 768px) {
    position: sticky;
    top: 0;

    height: 100dvh;
  }
}


.p-lp__stick-content--heading {
  display: grid;
  align-content: flex-end;
  justify-items: center;

  width: 100%;

  [data-image-detail="logo"] {
    width: calc(289 / 553 * 100%);

    margin-bottom: 5.23rem;
  }

  [data-image-detail="heading-sub"] {
    width: calc(284.87 / 553 * 100%);
    margin-bottom: .3rem;
  }

  [data-image-detail="heading-main"] {
    width: calc(402.14 / 553 * 100%);

    margin-bottom: 2.63rem;
  }

  [data-image-detail="character"] {
    width: calc(320 / 553 * 100%);
    /* height: calc(380 / 750 * 100dvh); */

    /* img {
      width: auto;
      height: 100%;
    } */
  }
}

.p-lp__stick-content--navigation {
  @media (max-width: 767px) {
    position: fixed;
    bottom: 1rem;
    right: 1rem;

    display: flex;
    gap: 1rem;

    [class*="p-lp__button--navigation-"] {
      translate: 0 0;

      transition: translate 500ms ease;
    }

    & > * {
      &:nth-child(1) {
        transition-delay: 100ms;
      }

      &:nth-child(2) {
        transition-delay: 0ms;
      }
    }

    &[data-visible-state="inactive"] {
      [class*="p-lp__button--navigation-"] {
        translate: 0 200%;
      }
    }
  }

  @media (min-width: 768px) {
    display: grid;
    align-content: flex-end;
    row-gap: calc(15 / 750 * 100dvh);

    padding-inline: calc(40 / 300 * 100%);
    padding-bottom: calc(27 / 750 * 100dvh);
  }

  & > * {
    max-width: 8rem;
    aspect-ratio: 1;

    @media (hover: none) {
      &:active {
        scale: 1.2;
      }
    }

    @media (hover: hover) {
      transition: scale 400ms ease;

      &:hover {
        scale: 1.2;

        transition: scale 200ms ease;
      }
    }
  }
}


#Section5 {
  --row-gap-sec5: 4rem;

  margin-bottom: var(--row-gap-sec5);
  padding-bottom: var(--row-gap-sec5);
  border-bottom: solid 1px #DDD;

  .p-lp__image-wrapper {
    &[data-image-number="2"] {
      width: calc(365 / 375 * 100%);
      margin-inline: auto;
    }

    &[data-image-number="3"],
    &[data-image-number="4"],
    &[data-image-number="5"],
    &[data-image-number="6"] {
      margin-top: var(--row-gap-sec5);
    }
  }
}


#Section6 {
  display: grid;
  row-gap: 3rem;

  .p-lp__text--section-title {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    justify-content: center;
    column-gap: 1.5rem;

    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1;

    &::before,
    &::after {
      content: "";

      width: 1.8rem;
      aspect-ratio: 18.13 / 23.03;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.131%22%20height%3D%2223.029%22%20viewBox%3D%220%200%2018.131%2023.029%22%3E%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_3%22%20data-name%3D%22%E5%90%88%E4%BD%93%203%22%20d%3D%22M-96.155%2C23.049l-10.483-10.768a.544.544%2C0%2C0%2C1%2C.083-.806l2.57-2.009a.544.544%2C0%2C0%2C1%2C.8.115l7.913%2C12.777a.576.576%2C0%2C0%2C1-.515.852A.508.508%2C0%2C0%2C1-96.155%2C23.049Zm6.41-.707-9.8-19.9c-.205-.417-.113-.887.2-1.012L-96.322.212c.31-.125.7.149.843.591L-88.7%2C21.921c.175.546-.094.9-.425.9A.73.73%2C0%2C0%2C1-89.745%2C22.342Z%22%20transform%3D%22translate(106.781%20-0.181)%22%20fill%3D%22%23eb2188%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-size: contain;
    }

    &::after {
      scale: -1 1;
    }
  }

  .p-lp__application-wrapper {
    padding: 4rem;
    background-color: #FFF4F9;

    & > *:last-child {
      margin-bottom: 0;
    }
  }

  .p-lp__application-inner {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .p-lp__text--application-title {
    display: grid;
    justify-items: center;
    row-gap: 2rem;

    margin-bottom: 2rem;

    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1;

    &::after {
      content: "";

      width: 4rem;
      aspect-ratio: 40 / 3;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%223%22%20viewBox%3D%220%200%2040%203%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_2%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%202%22%20transform%3D%22translate(-168%20-3855.259)%22%3E%20%3Cpath%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_48%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2048%22%20d%3D%22M1.5%2C0H20a0%2C0%2C0%2C0%2C1%2C0%2C0V3a0%2C0%2C0%2C0%2C1%2C0%2C0H1.5A1.5%2C1.5%2C0%2C0%2C1%2C0%2C1.5v0A1.5%2C1.5%2C0%2C0%2C1%2C1.5%2C0Z%22%20transform%3D%22translate(168%203855.259)%22%20fill%3D%22%23eb2188%22%2F%3E%20%3Cpath%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_49%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2049%22%20d%3D%22M0%2C0H18.5A1.5%2C1.5%2C0%2C0%2C1%2C20%2C1.5v0A1.5%2C1.5%2C0%2C0%2C1%2C18.5%2C3H0A0%2C0%2C0%2C0%2C1%2C0%2C3V0A0%2C0%2C0%2C0%2C1%2C0%2C0Z%22%20transform%3D%22translate(188%203855.259)%22%20fill%3D%22%23099ee0%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .p-lp__application-content-container {
    display: grid;
    row-gap: 4.4rem;
  }

  .p-lp__application-content-wrapper {
    & > * {
      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .p-lp__text--application-description {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.5;
    text-align: center;
  }

  .p-lp__text--application-annotation {
    display: block;
    margin-block: 1.5rem;

    color: #333;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 1.8;
  }
}




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

.p-lp__footer {
  display: block !important;
  padding: 4rem 1.5rem;
  background-color: #333;

  color: var(--color-white);

  .p-lp__footer-inner {
    display: grid;
    row-gap: 4rem;
    justify-items: center;
  }

  .p-lp__footer-link-list {
    display: grid;
    row-gap: 1.4rem;
  }

  .p-lp__footer-text--link {
    display: block;

    color: inherit;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: .08em;
    line-height: calc(22 / 12);
    text-decoration: none;
    text-align: center;
  }

  .p-lp__footer-text--copyright {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 1.7;
  }
}




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

/* .p-lp__input-wrapper {
  padding-inline: var(--padding-horizontal-general);
} */

.p-lp__input-wrapper {
  padding: 0 0 3rem;
}

@media (min-width: 768px) {
  .p-lp__input-wrapper {
    padding: 0 2rem 3rem;
  }
}

@media (max-width: 767px) {
  .p-lp__input-wrapper .c-form__product--select {
    width: var(--inner-width);
    display: block;
    margin: 3rem auto 1rem;
  }
}

.p-lp__input-wrapper .form__section--content {
  padding: 3rem 2rem;
}

.p-lp__input-wrapper .c-button__conversion {
  background-color: #EB2188;
  border: 1px solid #EB2188;
}