:root {
  --p: 1366 * 100;
  --s: 430 * 100;
  --hel: 'Helvetica', sans-serif !important;
  --content-width: min(calc(1146vw / var(--p)), 1146px);
  --content-inner-width: min(calc(1054vw / var(--p)), 1054px);
}
@media screen and (max-width: 768px) {
  :root {
    --content-width: 100vw;
    --content-inner-width: 100vw;
    --sp-width: calc(334vw / var(--s));

  }
}

body {
  font-family: Arial, Helvetica, "Noto Sans JP", sans-serif !important;
  font-weight: 400;
}


.lp-wrapper {
  padding: 125px 0 0;
}
.lp-container {
}


.-sp-br {
  display: none;
}
.-sp {
  display: none;
}

p {
  letter-spacing: var(--ls-pc);  
}

@media screen and (max-width: 768px) {
  p {
    letter-spacing: var(--ls-sp);  
  }
  .-pc {
    display: none;
  }
  .-sp {
    display: block;
  }
  .-sp-br {
    display: inline;
  }
  .-pc-br {
    display: none;
  }
}

.hero {
  width: 100%;
  display: flex;
  gap: min(calc(48vw / var(--p)), 48px);

  .hero-img {
    width: min(calc(842vw / var(--p)), 842px);
  }

  .hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: min(calc(43vw / var(--p)), 43px);
    gap: min(calc(16vw / var(--p)), 16px);

    h1 {
      font-size: min(calc(25vw / var(--p)), 25px);
      letter-spacing: 0.05em;
      line-height: min(calc(30vw / var(--p)), 30px);
      font-weight: 400;
    }
    p {
      font-size: min(calc(15vw / var(--p)), 15px);
      letter-spacing: 0.05em;
      line-height: min(calc(30vw / var(--p)), 30px);
      font-weight: 400;
    }
  }
}
@media screen and (max-width: 768px) {
  .hero {
    flex-direction: column;
    gap: calc(70vw / var(--s));

    .hero-img {
      width: 100vw;
    }

    .hero-text {
      width: calc(266vw / var(--s));
      font-size: calc(11vw / var(--s));
      font-weight: normal;
      line-height: calc(20vw / var(--s));
      flex: 0;
      margin-inline: auto;
      gap: calc(10vw / var(--s));

      h1 {
        font-size: calc(20vw / var(--s));
        line-height: calc(30vw / var(--s));
      }
      p {
        font-size: calc(11vw / var(--s));
        line-height: calc(20vw / var(--s));
        white-space: nowrap;
      }
    }

  }
}

.content1 {
  padding: min(calc(136vw / var(--p)), 136px) 0 0;
}
.content1-content {
  width: var(--content-width);
  margin-inline: auto;
}
.content1-head {
  display: flex;
}
.content1-image-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: min(calc(22vw / var(--p)), 22px);
  width: min(calc(261vw / var(--p)), 261px);
}
.content1-image-right {
  width: min(calc(397vw / var(--p)), 397px);
}
.content1-info {
  display: flex;
  flex-direction: column;
  gap: min(calc(40.1vw / var(--p)), 40.1px);
  justify-content: flex-end;
  padding: 0 min(calc(56.3vw / var(--p)), 56.3px) 0 min(calc(54vw / var(--p)), 54px);

  .-title {
    width: min(calc(115.53vw / var(--p)), 115.53px);
    svg {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .-subtitle {
    width: min(calc(377.65vw / var(--p)), 377.65px);
    svg {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}

.content1-body {
  position: relative;
  margin-top: min(calc(121.9vw / var(--p)), 121.9px);
  width: var(--content-inner-width);
  margin-inline: auto;
  border-bottom: 1px solid black;
  padding-bottom: min(calc(97.8vw / var(--p)), 97.8px);

  picture {
    margin-left: min(calc(70vw / var(--p)), 70px);
    width: min(calc(928vw / var(--p)), 928px);
    display: block;

    img {
      display: block;
    }
  }

  .-item {
    position: absolute;
    bottom: min(calc(97.8vw / var(--p)), 97.8px);
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .content1 {
    padding-top: calc(70vw / var(--s));
  }
  .content1-content {
  }
  .content1-head {
    flex-direction: column-reverse;
    gap: calc(33vw / var(--s));
    width: var(--sp-width);
    margin: auto;
  }
  .content1-info {
    width: 100%;
    padding: 0;
    gap: calc(16.2vw / var(--s));

    .-title {
      width: calc(60.07vw / var(--s));
    }
    .-subtitle {
      width: calc(203.35vw / var(--s));
    }
  }
  .content1-image-right {
    width: 100%;
  }
  .content1-image-left {
    width: 100%;
    flex-direction: row;
    gap: calc(12vw / var(--s));
  }

  .content1-body {
    margin-top: calc(70vw / var(--s));
    padding-bottom: 0;
    width: 100%;
    border-bottom: 0;

    picture {
      width: calc(382vw / var(--s));
      margin: 0;
    }

    .-item {
      position: static;
      margin-top: calc(82vw / var(--s));
    }
    &:after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: black;
      width: var(--sp-width);
      margin-inline: auto;
      margin-top: calc(70vw / var(--s));
    }
  }
}


.-item {
  .-name {
    text-align: right;
    font-size: min(calc(18vw / var(--p)), 18px);
    letter-spacing: 0.05em;
    line-height: min(calc(20vw / var(--p)), 20px);
  }
  .-price {
    text-align: right;
    margin-top: min(calc(11.8vw / var(--p)), 11.8px);
    font-size: min(calc(14vw / var(--p)), 14px);
    /* line-height: min(calc(27vw / var(--p)), 27px); */

    font-weight: 500;

    span {
      font-size: min(calc(8vw / var(--p)), 8px);
      /* line-height: min(calc(28vw / var(--p)), 28px); */
      font-weight: bold;
    }
  }

  .-buy {
    margin-top: min(calc(15.3vw / var(--p)), 15.3px);

    a {
      transition: .5s opacity;

      &:hover {
        opacity: 0.6;
      }
    }

    img {
      display: block;
      width: min(calc(41vw / var(--p)), 41px);
      margin-left: auto;
      margin-right: 0;
    }
  }
}
@media screen and (max-width: 768px) {
  .-item {
    display: flex;
    gap: calc(12vw / var(--s));
    justify-content: space-between;
    width: var(--sp-width);
    margin: auto;

    .-item-info {
    }
    .-name {
      font-size: calc(13vw / var(--s));
      line-height: calc(20vw / var(--s));
      text-align: left;

      br {
        display: none;
      }
    }
    .-price {
      text-align: left;
      margin-top: calc(11.8vw / var(--s));
      font-size: calc(12vw / var(--s));
      line-height: calc(12vw / var(--s));
      margin: 0;

      span {
        font-size: calc(8vw / var(--s));
        line-height: calc(12vw / var(--s));
      }
    }

    .-buy {
      margin-top: calc(10.3vw / var(--s));

      img {
        width: calc(41vw / var(--s));
      }
    }
  }
}

.content2 {
  padding: min(calc(100vw / var(--p)), 100px) 0 0;
}
.content2-content {
  width: var(--content-inner-width);
  margin-inline: auto;
  position: relative;
  padding-bottom: min(calc(88.3vw / var(--p)), 88.3px);
  border-bottom: 1px solid black;

  picture {
    display: block;

    img {
      width: min(calc(1021vw / var(--p)), 1021px);
    }
  }

  .-items {
    position: absolute;
    bottom: min(calc(88.3vw / var(--p)), 88.3px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: min(calc(45.6vw / var(--p)), 45.6px);
  }
}
@media screen and (max-width: 768px) {
  .content2 {
    padding-top: calc(70vw / var(--s));
  }
  .content2-content {
    width: 100%;
    padding-bottom: 0;
    border-bottom: 0;

    picture {
      width: var(--sp-width);
      margin: auto;

      img {
        width: 100%;
      }
    }

    .-items {
      position: static;
      margin-top: calc(37.2vw / var(--s));
      width: var(--sp-width);
      margin-inline: auto;
      gap: calc(30vw / var(--s));

      border-bottom: 1px solid black;
      padding-bottom: calc(70vw / var(--s));
    }
  }
}

.content3 {
  padding-top: min(calc(91.8vw / var(--p)), 91.8px);
}
.content3-content {
  width: var(--content-inner-width);
  margin-inline: auto;
  padding-bottom: min(calc(92vw / var(--p)), 92px);
  border-bottom: 1px solid black;
}
.content3-title {
  width: min(calc(711.65vw / var(--p)), 711.65px);

  svg {
    display: block;
    width: 100%;
    height: auto;
  }
}
.content3-text {
  margin-top: min(calc(50.1vw / var(--p)), 50.1px);
  font-size: min(calc(18vw / var(--p)), 18px);
  font-weight: 400;
}
.content3-image {
  margin-top: min(calc(91.7vw / var(--p)), 91.7px);
  display: flex;
  justify-content: center;
  gap: min(calc(11vw / var(--p)), 11px);

  picture {
    display: block;
    width: min(calc(381vw / var(--p)), 381px);
  }

  picture:nth-child(2) {
    margin-top: min(calc(50vw / var(--p)), 50px);
  }
}
.content3-item {
  margin-top: min(calc(88.8vw / var(--p)), 88.8px);
}
@media screen and (max-width: 768px) {
  .content3 {
    padding-top: calc(70vw / var(--s));
  }
  .content3-content {
    width: var(--sp-width);
    margin-inline: auto;
    padding-bottom: calc(70vw / var(--s));
    border-bottom: 1px solid black;
  }
  .content3-title {
    width: 100%;
  }
  .content3-text {
    width: var(--sp-width);
    margin: calc(16.2vw / var(--s)) auto 0;
    font-size: calc(13vw / var(--s));
    line-height: calc(20vw / var(--s));
    font-weight: normal;
  }
  .content3-image {
    margin-top: calc(37vw / var(--s));
    gap: calc(23vw / var(--s));
    flex-direction: column;

    picture {
      width: calc(287.87vw / var(--s));
    }

    picture:nth-child(2) {
      margin-top: 0;
      margin-left: auto;
      margin-right: 0;
    }
  }
  .content3-item {
    margin-top: calc(70vw / var(--s));
  }
}

.content4 {
  margin-top: min(calc(93.8vw / var(--p)), 93.8px);
  margin-inline: auto;
  width: var(--content-inner-width);
}
.content4-title {
  width: min(calc(783.5vw / var(--p)), 783.5px);
  margin-bottom: min(calc(28.9vw / var(--p)), 28.9px);
  margin-inline: auto;
  svg {
    display: block;
    width: min(calc(355.55vw / var(--p)), 355.55px);
    height: auto;
  }
}
.content4-body {
  width: min(calc(783.5vw / var(--p)), 783.5px);
  margin-inline: auto;
}
.content4-list {

}
.content4-item {
  background-color: #C4C8C9;
  display: flex;

  img {
    width: min(calc(196vw / var(--p)), 196px);
    aspect-ratio: 1 / 1;
  }

  .-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: min(calc(17.6vw / var(--p)), 17.6px);
    padding: 0 min(calc(53vw / var(--p)), 53px) 0 min(calc(45vw / var(--p)), 45px);
  }

  .-title {
    width: min(calc(40.43vw / var(--p)), 40.43px);
  }

  p {
    font-size: min(calc(13vw / var(--p)), 13px);
    font-weight: 400;
  }
}
.content4-item:last-of-type {
  background-color: #E2E7E8;
  flex-direction: row-reverse;

  .-body {
    padding: 0 min(calc(40vw / var(--p)), 40px) 0 min(calc(47vw / var(--p)), 47px);

  }

  .-title {
    width: min(calc(96.68vw / var(--p)), 96.68px);
  }
}
@media screen and (max-width: 768px) {
  .content4 {
    width: var(--sp-width);
    margin: auto;
    margin-top: calc(70vw / var(--s));
  }
  .content4-title {
    width: calc(207.4vw / var(--s));
    margin-inline: auto;
    margin-bottom: calc(52.3vw / var(--s));

    svg {
      width: 100%;
    }
  }
  .content4-body {
    width: 100%;
  }
  .content4-list {
    display: flex;
    flex-direction: column;
    gap: calc(15.5vw / var(--s));
    width: calc(279.49vw / var(--s));
    margin: auto;
  }
  .content4-item {
    flex-direction: column;
    align-items: center;
    text-align: center;

    img {
      width: 100%;
      aspect-ratio: auto;
    }

    .-body {
      padding: calc(21.9vw / var(--s)) calc(23.5vw / var(--s)) calc(29.5vw / var(--s)) calc(25vw / var(--s));
      gap: calc(10.8vw / var(--s));
    }

    .-title {
      width: calc(26.28vw / var(--s));
    }

    p {
      font-size: calc(10vw / var(--s));
      line-height: calc(19vw / var(--s));
      font-weight: normal;
      text-align: left;

      br {
        display: none;
      }
    }
  }
  .content4-item:last-of-type {
    flex-direction: column;
    .-body {
      padding: calc(27.2vw / var(--s)) calc(23.5vw / var(--s)) calc(30.5vw / var(--s)) calc(25vw / var(--s));
    }

    .-title {
      width: calc(62.84vw / var(--s));
    }
  }
}
.lp-footer {
  margin-top: min(calc(174.7vw / var(--p)), 174.7px);

  .btns {
    display: flex;
    flex-direction: column;
    gap: 17.6px;
    width: 248px;
    margin-inline: auto;

    a {
      display: block;
      width: 100%;

      transition: .5s opacity;

      img, svg {
        width: 100%;
        vertical-align: top;
      }

      &:hover {
        opacity: 0.5;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .lp-footer {
    margin-top: calc(121.4vw / var(--s));

    .btns {
      width: calc(248vw / var(--s));
      gap: calc(17vw / var(--s));
    }
  }
}

.animate {
    opacity: 0;
    transform: translateY(20px);
    transition-duration: .7s;
    transition-property: opacity, transform;
    &.show {
      opacity: 1;
      transform: translateY(0);
    }

}
.hero {
  .hero-text {
    transition-delay: .2s;
  }
}
.content1-image-left {
  transition-delay: .4s;
}
.content1-info {
  .-subtitle {
    transition-delay: .2s;
  }
}
.content3-image {
  picture:last-child {
    transition-delay: .2s;
  }
}
.content4-item:last-child {
  transition-delay: .2s;
}