@charset "UTF-8";
/* data:2026-05-21 */
/* ==========================================================
 html & body & other
============================================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Noto+Serif+JP:wght@500;700;900&display=swap");
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #333;
  background: #fff;
}
div#onetrust-consent-sdk:after {
  display: none;
}
.l-main {
  margin-bottom: 0;
}
#close2606 {
  --lp-color-1: #253a71;
  --lp-color-2: #007ac0;
  --lp-color-3: #ace5fc;
  --lp-color-4: #17288a;
  --lp-color-white: #fff;
  --lp-color-glay: #ccc;
  --lp-color-line: #06c755;
  --lp-color-post: #ffa631;
  --lp-color-gradation: linear-gradient(90deg, #0068ae, #007ac5 50%, #004a9e);
  --f-family: "Noto Sans JP", sans-serif;
  --f-family-serif: "Noto Serif JP", serif;
  --fs-38: 38px;
  --fs-36: 36px;
  --fs-34: 34px;
  --fs-32: 32px;
  --fs-30: 30px;
  --fs-28: 28px;
  --fs-24: 24px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;
  --fs-12: 12px;
}
#close2606 {
  position: relative;
  font-family: var(--f-family);

  & h2.ribbon {
    max-width: 680px;
    min-height: 50px;
    font-family: var(--f-family-serif);
    color: #fff;
    font-size: var(--fs-34);
    text-align: center;
    letter-spacing: 0.2rem;
    margin-block: 0;
    margin-inline: auto;
    background: url(../images/ribbon.svg) center center no-repeat;
    background-size: 100% auto;
    @media screen and (max-width: 767px) {
      max-width: initial;
      min-height: initial;
      font-size: var(--fs-20);
      background: url(../images/ribbon_sp.svg) center center no-repeat;
      background-size: 100% auto;
    }
  }
  & h3 {
    color: var(--lp-color-4);
    font-size: var(--fs-30);
    text-align: center;
  }
  & p {
    font-size: var(--fs-16);
    font-weight: 600;
    line-height: 1.8;
  }
  & ul,
  & ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  & ul li,
  & ol li {
    list-style: none;
    font-weight: 600;
  }
  & ul.notes li {
    font-size: var(--fs-14);
    text-indent: -1rem;
    padding-left: 1rem;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-12);
      text-indent: -0.8rem;
      padding-left: 0.8rem;
    }
  }
  & .inner-cont {
    max-width: 960px;
    width: 90vw;
    margin: 0 auto;
  }
  & img {
    display: block;
    width: 100%;
    height: auto;
  }
  & a,
  & a img {
    font-family: var(--f-family);
    color: var(--lp-color-1);
    text-decoration: none;
    transition: all 1s;
  }
  & a:hover,
  & a:hover img {
    opacity: 0.7;
  }
  & div:after,
  & dl:after,
  & ul:after,
  & ol:after {
    content: none;
    visibility: visible;
  }
  & .fl {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  & .fade_off {
    opacity: 0;
    transition: all 1s;
  }
  & .fade_on {
    opacity: 1;
  }
  & .sp {
    display: none;
    @media screen and (max-width: 767px) {
      display: block;
    }
  }
  /* pagetop_fixed */
  & .pagetop_fixed {
    position: fixed;
    display: none;
    right: 3%;
    bottom: 0;
    z-index: 20;
    width: 50px;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;

    &.is-visible {
      opacity: 1;
    }
    &.is-fixed {
      position: absolute;
      bottom: 200px;
      @media screen and (max-width: 767px) {
        bottom: 35vw;
      }
    }

    & img {
      width: 100%;
    }
  }
}
/*--Animation--*/
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ==========================================================
* brand-logo
============================================================*/
#close2606 .brand-logo h1 {
  max-width: 180px;
  padding: 5px 0 5px;
  margin: 0 auto;
  opacity: 0;
  animation: fadein ease-out 3s forwards 0s;
  @media screen and (max-width: 767px) {
    max-width: initial;
    width: 26.2vw;
    padding: 5px 0;
  }
}
/* ==========================================================
* kv
============================================================*/
#close2606 .kv {
  container-type: inline-size;
  container-name: kv;
  width: 100%;
  background: linear-gradient(50deg, #e9cc4e 0%, #eed86a 25%, #faf1b2 40%, #eed454 55%, #f8ed9d 70%, #e7c644 85%, #dec045 100%);

  & .inner-cont {
    max-width: 969px;
    width: 95vw;
    padding-block: 30px 20px;
    @media screen and (max-width: 767px) {
      width: 100%;
      padding-block: 5.882vw 6.952vw;
    }

    & .kv-title {
      max-width: 964px;
      margin-inline: auto;
      opacity: 0;
      animation: fadein ease-out 3s forwards 0s;
      @media screen and (max-width: 767px) {
        width: 94.667vw;
      }
    }

    & .kv-product {
      margin-top: -25px;
      margin-inline: auto;
      opacity: 0;
      animation: fadein ease-out 3s forwards 0.5s;
      @media screen and (max-width: 767px) {
        width: 93.867vw;
        margin-top: 0;
      }
    }

    & p {
      width: 427px;
      margin-block: 13px 0;
      margin-inline: auto;
      opacity: 0;
      animation: fadein ease-out 3s forwards 1s;
      @media screen and (max-width: 767px) {
        width: 89.2vw;
      }
    }
  }

  & .terms {
    position: relative;
    padding-block: 7px;
    background-image: var(--lp-color-gradation);
    @media screen and (max-width: 767px) {
      padding-bottom: 3.5vw;
    }

    & img {
      width: 828px;
      margin-inline: auto;
      animation: fadein ease-out 3s forwards 0s;
      opacity: 0;
      @media screen and (max-width: 767px) {
        width: 89.305vw;
        margin-top: -3.5vw;
      }
    }
  }
}
/* ==========================================================
* nav
============================================================*/
#close2606 nav.anker {
  container-type: inline-size;
  container-name: nav;
  padding: 20px 0 20px;
  margin-top: 10px;
  background: var(--lp-color-3);
  animation: fadein ease-out 3s forwards 0s;
  opacity: 0;
  @media screen and (max-width: 767px) {
    padding: 4vw 0;
  }

  & ul {
    display: flex;
    max-width: 865px;
    width: 95vw;
    margin: 0 auto;
    @media screen and (max-width: 767px) {
      width: 100%;
    }
    & li {
      max-width: 173px;
      width: 20%;
      border-right: var(--lp-color-2) 1px solid;
      &:last-child {
        border-right: none;
      }
      & a {
        letter-spacing: 0.2rem;
        position: relative;
        display: block;
        color: var(--lp-color-2);
        font-size: var(--fs-20);
        font-weight: bold;
        padding: 0 35px;
        @media screen and (max-width: 767px) {
          font-size: var(--fs-12);
          padding: 0 2vw;
        }
        &:hover {
          color: var(--lp-color-1);
          opacity: 1;
          & span::after,
          & span::before {
            width: 2px;
            height: 8px;
            background-color: var(--lp-color-1);
          }
        }
        & span {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 15px;
          margin: auto 0;
          display: inline-block;
          width: 16.7px;
          height: 11.6px;
          @media screen and (max-width: 767px) {
            top: initial;
            bottom: -1.8vw;
            right: 0px;
            left: 0px;
            width: 10.7px;
            height: 7.5px;
            margin: 0px auto;
          }
          &::before,
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            /* left: calc(50% - 1.5px); */
            width: 2px;
            height: 8px;
            border-radius: 9999px;
            background-color: var(--lp-color-2);
            transform-origin: 50% calc(100% - 0.5px);
          }
          &::before {
            transform: rotate(45deg);
          }
          &::after {
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
}

/* ==========================================================
* item
========================================================== */
#close2606 .item {
  container-type: inline-size;
  container-name: item;
  padding: 45px 0 0;

  & .item-container {
    padding: 52px 18px 16px;
    margin: 20px auto 5px;
    background-color: var(--lp-color-3);
    box-shadow: 1px 1px 4px 1px rgba(163, 163, 163, 0.4);
    @media screen and (max-width: 767px) {
      padding: 5.749vw 5.214vw 5.348vw;
    }
  }
  & h3 {
    max-width: 774px;
    margin: 0 auto 34px;
    @media screen and (max-width: 767px) {
      max-width: initial;
      width: 83.467vw;
    }
  }
  & .item-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    @media screen and (max-width: 767px) {
      width: 78.933vw;
      display: flex;
      flex-direction: column;
      gap: 4.412vw 0;
    }
  }
  & .notes {
    text-align: right;
  }
}
/* ==========================================================
* product
========================================================== */
#close2606 .product {
  container-type: inline-size;
  container-name: product;
  padding: 55px 0 0;

  & h3 {
    position: relative;
    font-size: var(--fs-24);
    text-align: center;
    margin-bottom: 30px;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-16);
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 1px;
      margin: auto;
      border-bottom: var(--lp-color-4) 3px dotted;
    }
    & span {
      position: relative;
      display: inline-block;
      padding: 0 10px;
      background: var(--lp-color-white);
      z-index: 1;
    }
  }
  & .product-mini {
    margin: 40px auto 70px;

    & img {
      max-width: 941px;
      margin-inline: auto;
      @media screen and (max-width: 767px) {
        width: 89.6vw;
      }
    }
  }
  & .product-Jelly {
    margin-bottom: 63px;

    & img {
      max-width: 931px;
      margin-inline: auto;
      @media screen and (max-width: 767px) {
        width: 86.8vw;
      }
    }
  }
  & .product-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 42px;
    @media screen and (max-width: 767px) {
      display: block;
    }

    & .product-meiprotein {
      & img {
        max-width: 388px;
        margin-inline: auto;
        @media screen and (max-width: 767px) {
          width: 53.867vw;
          margin-inline: 0;
        }
      }
    }

    & .product-aquasupport {
      & img {
        max-width: 418px;
        margin-inline: auto;
        @media screen and (max-width: 767px) {
          width: 54.667vw;
          margin-inline: 0;
        }
      }
    }
  }
  & ul.notes {
    display: flex;
    gap: 0 1rem;
    color: var(--lp-color-4);
    margin-top: 32px;
    @media screen and (max-width: 767px) {
      display: block;
    }
  }
  & .map_btn {
    max-width: 475px;
    margin: 45px auto 0;
    @media screen and (max-width: 767px) {
      margin: 7vw auto 0;
    }
  }
}
/* ==========================================================
* period
========================================================== */
#close2606 .period {
  padding: 109px 0 0;
  @media screen and (max-width: 767px) {
    padding: 10vw 0 0;
  }

  & .period-total {
    max-width: 807px;
    margin: 43px auto 0;
    @media screen and (max-width: 767px) {
      margin: 5vw auto 0;
    }
  }
  & .period-separator {
    max-width: 788px;
    margin: 30px auto 28px;
    @media screen and (max-width: 767px) {
      margin: 5vw auto 3vw;
    }
  }
  & ul.notes {
    text-align: center;
  }
  & .period-receipt {
    margin-top: 28px;
    padding-top: 33px;
    border-top: var(--lp-color-1) 3px dotted;
    @media screen and (max-width: 767px) {
      margin-top: 5vw;
      padding-top: 5vw;
    }

    & .period-receipt-validity {
      max-width: 725px;
      margin: 0 auto 20px;
    }

    & ul.notes {
      max-width: 725px;
      text-align: left;
      margin: 0 auto;
    }
  }
}
/* ==========================================================
* apply
========================================================== */
#close2606 .apply {
  padding: 90px 0 0;
  @media screen and (max-width: 767px) {
    padding: 10vw 0 0;
  }

  & .apply-txt {
    font-size: var(--fs-20);
    text-align: center;
    margin-top: 47px;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-14);
      margin-top: 5vw;
    }
  }

  & h3 {
    font-family: var(--f-family-serif);
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 33px;
    border-bottom: var(--lp-color-4) 2px solid;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-16);
    }
  }
}
/*-- apply-line --*/
#close2606 .apply-line {
  padding-bottom: 20px;
  margin-top: 30px;
  &::after {
    content: "";
    display: block;
    max-width: 557px;
    width: 74.267vw;
    height: 1px;
    margin: 0 auto;
    border-top: var(--lp-color-1) 3px dotted;
  }

  & ul.step-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 60px;
    margin: 65px auto 35px;

    @media screen and (max-width: 767px) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 22.933vw 0;
      margin: 12vw auto;
    }

    & li {
      width: 280px;
      padding: 26px 26px;
      background: #fff;
      border-radius: 9px;
      box-shadow: 0px 2px 4px 1px rgba(51, 51, 51, 0.35);
      @media screen and (max-width: 767px) {
        width: 85.6vw;
      }

      & img {
        display: block;
        max-width: 150px;
        margin-left: 50px;
        margin-bottom: 20px;
        @media screen and (max-width: 767px) {
          max-width: 245px;
          width: 32.667vw;
          margin-inline: auto 16vw;
        }
      }

      & p {
        padding-top: 17px;
        border-top: var(--lp-color-4) 2px solid;
        @media screen and (max-width: 767px) {
          font-size: var(--fs-14);
        }
      }

      & p span {
        color: var(--lp-color-4);
      }
    }

    & .step2 {
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 28px;
        height: 45px;
        margin: auto 0;
        background: url("../images/apply_step_tryangle.svg") center center no-repeat;
        @media screen and (max-width: 767px) {
          top: initial;
          bottom: initial;
          left: 0;
          right: 0;
          width: 40px;
          height: 80px;
          margin: 0 auto;
          background-size: contain;
          transform: rotate(90deg);
        }
      }

      &::before {
        left: -42px;
        @media screen and (max-width: 767px) {
          left: 0;
          top: -17vw;
        }
        @media screen and (max-width: 480px) {
          top: -22vw;
        }
      }

      &::after {
        right: -46px;
        @media screen and (max-width: 767px) {
          right: 0;
          bottom: -17vw;
        }
        @media screen and (max-width: 480px) {
          bottom: -22vw;
        }
      }
    }
  }

  & .btn_line {
    max-width: 500px;
    width: 66.667vw;
    margin: 0 auto 52px;

    & a {
      display: block;
      max-width: 500px;
      width: 66.667vw;
      color: var(--lp-color-white);
      font-size: var(--fs-36);
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.1rem;
      padding: 20px 0;
      background: var(--lp-color-line);
      /* background: var(--lp-color-glay); //close color*/
      border-radius: 12px;
      box-shadow: 0px 2px 4px 1px rgba(51, 51, 51, 0.35);
      /* pointer-events: none; //close color*/
      @media screen and (max-width: 767px) {
        font-size: var(--fs-18);
      }
    }
  }
}
/*-- apply_postcard --*/
#close2606 .apply-postcard {
  & .fl {
    align-items: flex-start;
    @media screen and (max-width: 767px) {
      display: block;
    }

    & p {
      width: 67%;
      @media screen and (max-width: 767px) {
        width: 100%;
        font-size: var(--fs-14);
      }
    }
    & img {
      max-width: 300px;
      width: 22.571vw;
      @media screen and (max-width: 767px) {
        max-width: initial;
        width: 66.667vw;
        margin-inline: auto;
      }
    }
  }
  & .apply-address {
    position: relative;
    padding: 30px 20px 20px;
    margin: 50px auto 35px;
    border: var(--lp-color-4) 2px solid;
    @media screen and (max-width: 767px) {
      padding: 3vw 5vw 3vw;
      margin: 5vw auto 3vw;
    }

    & h4 {
      position: absolute;
      top: -20px;
      display: inline-block;
      color: #fff;
      font-size: var(--fs-20);
      letter-spacing: 0.2rem;
      padding: 5px 30px 6px;
      margin: 0;
      background-image: var(--lp-color-gradation);
      border-radius: 4px;
      @media screen and (max-width: 767px) {
        top: -5vw;
        font-size: var(--fs-12);
      }
    }
    & p {
      font-size: var(--fs-20);
      margin: 0;
      @media screen and (max-width: 767px) {
        font-size: var(--fs-12);
      }
    }
  }

  & .btn_post {
    max-width: 640px;
    width: 85.333vw;
    margin: 47px auto 0;
    @media screen and (max-width: 767px) {
      margin: 5vw auto 0;
    }

    & a {
      display: block;
      max-width: 640px;
      width: 85.333vw;
      color: #fff;
      font-size: var(--fs-32);
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.1rem;
      padding: 20px 30px 20px 0;
      background: var(--lp-color-post) url(../images/icon_dl.svg) center right 40px no-repeat;
      /* background: var(--lp-color-glay) url(../images/icon_dl.svg) center left 40px no-repeat;  //close color*/
      background-size: 40px auto;
      border-radius: 12px;
      box-shadow: 0px 2px 4px 1px rgba(51, 51, 51, 0.35);
      /* pointer-events: none; //close color*/
      @media screen and (max-width: 767px) {
        font-size: var(--fs-18);
      }
    }
  }
}
/* ==========================================================
* guidelines
========================================================== */
#close2606 .guidelines {
  container-type: inline-size;
  container-name: guidelines;
  padding: 94px 0 95px;

  & .guidelines-cont {
    margin-inline: auto;
    border: var(--lp-color-1) 2px solid;
    border-radius: 8px;
    overflow-y: hidden;
    @media screen and (max-width: 767px) {
      width: 89.333vw;
    }
  }
  & .guidelines-cont-inner {
    height: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar-track {
      background-color: #e4e4e4;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #7c7c7c;
    }
  }
  & h3 {
    color: var(--lp-color-1);
    font-size: var(--fs-16);
    text-align: left;
    margin-top: 32px;
    margin-bottom: 5px;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-14);
    }

    &:first-child {
      margin-top: 0;
    }
  }
  & p {
    font-size: var(--fs-14);
    margin-bottom: 20px;
    line-height: 1.8;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-12);
    }
  }
  & .mb {
    margin-bottom: 0;
  }
  & .mb20 {
    margin-bottom: 20px;
  }
  & ul.notes {
    margin-top: 10px;
  }
  & ul li {
    font-size: var(--fs-14);
    text-indent: -1rem;
    padding-left: 1rem;
    line-height: 1.8;
    @media screen and (max-width: 767px) {
      font-size: var(--fs-12);
    }
  }
  & ol {
    margin: 0;
    padding: 0;

    & li {
      font-size: var(--fs-14);
      text-indent: -1.2rem;
      padding-left: 1.2rem;
      line-height: 1.8;
      @media screen and (max-width: 767px) {
        font-size: var(--fs-12);
      }
    }
  }
  & ol.ol_number li {
    margin-bottom: 20px;
  }
  & div.notes {
    margin-left: 1rem;

    & ul {
      margin-left: 1rem;
    }
  }
  & a {
    text-decoration: underline;
  }
}
@media screen and (max-width: 767px) {
  #close2606 .guidelines {
    padding: 10vw 0 20vw;
  }
  #close2606 .guidelines .inner_cont {
    width: 89.333vw;
  }
}
@container guidelines (min-width: 768px) {
  .guidelines-cont {
    height: 720px;
    padding: 25px 2cqh 30px 30px;
    margin-top: 40px;
  }
  .guidelines-cont-inner {
    padding-right: 30px;
  }
  .guidelines-cont-inner::-webkit-scrollbar {
    width: 16px;
  }
  .guidelines-cont-inner::-webkit-scrollbar-track {
    border-radius: 100px;
  }
  .guidelines-cont-inner::-webkit-scrollbar-thumb {
    border-radius: 100px;
  }
  p {
    margin-bottom: 20px;
  }
}
@container guidelines (max-width: 767px) {
  .guidelines-cont {
    height: 117vw;
    padding: 2.5vw 1vw 2vw 3vw;
    margin-top: 8vw;
  }
  .guidelines-cont-inner {
    padding-right: 2vw;
  }
  .guidelines-cont-inner::-webkit-scrollbar {
    width: 2vw;
  }
  .guidelines-cont-inner::-webkit-scrollbar-track {
    border-radius: 5vw;
  }
  .guidelines-cont-inner::-webkit-scrollbar-thumb {
    border-radius: 5vw;
  }
  .guidelines ul {
    margin-bottom: 10vw;
  }
  .guidelines ul li {
    margin-bottom: 2vw;
  }
  .guidelines p {
    margin-bottom: 5vw;
  }
}

/* ==========================================================
* link
========================================================== */
#close2606 .link {
  padding-block: 30px;
  background: var(--lp-color-4);
  @media screen and (max-width: 767px) {
    padding: 5vw 0 5vw;
  }

  & .link-bnr {
    margin-inline: auto;
    width: 328px;
    @media screen and (max-width: 767px) {
      width: 78.667vw;
    }
    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 140px;
      background: var(--lp-color-white);
      border-radius: 10px;
      @media screen and (max-width: 767px) {
        height: 25.6vw;
      }
    }

    & img {
      max-width: 213px;
      margin-inline: auto;
      @media screen and (max-width: 767px) {
        max-width: initial;
        width: 40.4vw;
        height: auto;
      }
    }
  }
}

/* ==========================================================
* close
========================================================== */
body.no_scroll {
  overflow: hidden;
}
#close2606 .close {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: hsla(0, 0%, 20%, 0.7);
  z-index: 9000;
  display: none;

  & p {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-top: 350px;
    @media screen and (max-width: 767px) {
      font-size: 23px;
      font-weight: bold;
      margin-top: 50vw;
    }
  }
}