/* ==========================================================================
   header
   ========================================================================== */
.lp-header {
  position: fixed;
  top: calc(100vw * 12 / 1440);
  left: 0;
  width: 100%;
  z-index: 100;
}

.lp-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: calc(100vw * 40 / 1440);
  padding-right: calc(100vw * 36 / 1440);
}

.lp-header__logo {
  width: calc(100vw * 141 / 1440);
  mix-blend-mode: multiply;
}

.lp-header__line {
  padding-block: calc(100vw * 8 / 1440);
  padding-inline: calc(100vw * 28 / 1440);
  border-radius: calc(100vw * 10 / 1440);
  display: flex;
  align-items: center;
  gap: calc(100vw * 10 / 1440);
  background: #06c755;
  box-shadow: calc(100vw * -4 / 1440) calc(100vw * 6 / 1440) 0px 0px #048738;
  transition: var(--transition);
}

.lp-header__line-text {
  font-family: var(--font-family-en2);
  font-size: calc(100vw * 30 / 1440);
  font-weight: 500;
  color: #fff;
  line-height: 1;
  letter-spacing: 0;
  padding-top: calc(100vw * 2 / 1440);
}

.lp-header__line-icon {
  width: calc(100vw * 40 / 1440);
}

@media (any-hover: hover) {
  .lp-header__line:hover {
    box-shadow: 0 0 0 0 #048738;
    transform: translate(calc(100vw * -4 / 1440), calc(100vw * 6 / 1440));
  }
}

@media screen and (max-width: 768px) {
  .lp-header__inner {
    padding-left: calc(100vw * 6 / 390);
    padding-right: calc(100vw * 6 / 390);
  }

  .lp-header__logo {
    width: calc(100vw * 76 / 390);
  }

  .lp-header__line {
    padding-block: calc(100vw * 4 / 390);
    padding-inline: calc(100vw * 10 / 390);
    border-radius: calc(100vw * 6 / 390);
    box-shadow: calc(100vw * -3 / 390) calc(100vw * 4 / 390) 0px 0px #048738;
  }

  .lp-header__line-text {
    font-size: calc(100vw * 16 / 390);
    padding-top: calc(100vw * 2 / 390);
  }

  .lp-header__line-icon {
    width: calc(100vw * 20 / 390);
  }

  @media (any-hover: hover) {
    .lp-header__line:hover {
      box-shadow: 0 0 0 0 #048738;
      transform: translate(calc(100vw * -3 / 390), calc(100vw * 4 / 390));
    }
  }
}

/* ==========================================================================
   hero
   ========================================================================== */
.lp-hero {
  height: calc(100vw * 918 / 1440);
  position: relative;
  background: url(../img/hero.webp) no-repeat center center / cover;
}

.lp-hero__inner {
  padding-inline: calc(100vw * 95 / 1440);
  padding-top: calc(100vw * 170 / 1440);
}

.lp-hero__catch {
  width: calc(100vw * 455 / 1440);
}

.lp-hero__ttl {
  width: calc(100vw * 636 / 1440);
  margin-top: calc(100vw * 16 / 1440);
}

.lp-hero__txtArea {
  font-weight: 700;
  font-size: calc(100vw * 22 / 1440);
  line-height: 1.5;
  letter-spacing: 8%;
  color: #fff;
  margin-top: calc(100vw * 45 / 1440);
}

.lp-hero__txt--strong {
  font-weight: 700;
  font-size: calc(100vw * 26 / 1440);
  background-image: radial-gradient(
    circle at center,
    #fff 22%,
    transparent 22%
  );
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1.085em 0.3em;
  padding-top: 0.25em;
}

.lp-hero__txt--accent {
  font-weight: 700;
  font-size: calc(100vw * 26 / 1440);
}

.lp-hero__btn-wrap {
  margin-top: calc(100vw * 48 / 1440);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.lp-hero__btn-lead {
  font-weight: 700;
  font-size: calc(100vw * 14 / 1440);
  line-height: 1.3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(100vw * 10 / 1440);
}

.lp-hero__btn-lead::before {
  content: "";
  width: 1px;
  height: calc(100vw * 16 / 1440);
  background: #fff;
  rotate: 155deg;
}

.lp-hero__btn-lead::after {
  content: "";
  width: 1px;
  height: calc(100vw * 16 / 1440);
  background: #fff;
  rotate: -155deg;
}

.lp-hero__btn {
  display: block;
  padding-left: calc(100vw * 100 / 1440);
  padding-right: calc(100vw * 43 / 1440);
  border-radius: 9999px;
  padding-block: calc(100vw * 14 / 1440);
  background: #06c755;
  box-shadow: calc(100vw * -1 / 1440) calc(100vw * 6 / 1440) 0px 0px #048738;
  transition: var(--transition);
  position: relative;
  margin-top: calc(100vw * 10 / 1440);
}

.lp-hero__btn-icon {
  position: absolute;
  left: calc(100vw * 43 / 1440);
  bottom: calc(100vw * -4 / 1440);
  width: calc(100vw * 50 / 1440);
}

.lp-hero__btn-text {
  font-weight: 700;
  font-size: calc(100vw * 24 / 1440);
  line-height: 1;
  color: #fff;
}

.lp-hero__btn-note {
  display: block;
  font-weight: 500;
  font-size: calc(100vw * 10 / 1440);
  line-height: 1.3;
  text-align: center;
  color: #fff;
  margin-top: calc(100vw * 10 / 1440);
}

@media (any-hover: hover) {
  .lp-hero__btn:hover {
    box-shadow: 0 0 0 0 #048738;
    transform: translate(calc(100vw * -1 / 1440), calc(100vw * 6 / 1440));
  }
}

@media screen and (max-width: 768px) {
  .lp-hero {
    height: calc(100vw * 597 / 390);
    background: url(../img/hero-sp.webp) no-repeat center center / cover;
  }

  .lp-hero__inner {
    padding-inline: calc(100vw * 16 / 390);
    padding-top: calc(100vw * 135 / 390);
  }

  .lp-hero__catch {
    width: calc(100vw * 350 / 390);
    margin-inline: auto;
  }

  .lp-hero__ttl {
    width: calc(100vw * 355 / 390);
    margin-inline: auto;
    margin-top: calc(100vw * 12 / 390);
  }

  .lp-hero__txtArea {
    font-size: calc(100vw * 16 / 390);
    margin-top: calc(100vw * 24 / 390);
    text-align: center;
    line-height: 1.4;
  }

  .lp-hero__txt--strong {
    font-size: calc(100vw * 18 / 390);
  }

  .lp-hero__txt--accent {
    font-size: calc(100vw * 18 / 390);
  }

  .lp-hero__btn-wrap {
    margin-top: calc(100vw * 18 / 390);
    margin-inline: auto;
  }

  .lp-hero__btn-lead {
    font-size: calc(100vw * 11 / 390);
    gap: calc(100vw * 10 / 390);
  }

  .lp-hero__btn-lead::before {
    height: calc(100vw * 16 / 390);
  }

  .lp-hero__btn-lead::after {
    height: calc(100vw * 16 / 390);
  }

  .lp-hero__btn {
    padding-left: calc(100vw * 113 / 390);
    padding-right: calc(100vw * 95 / 390);
    padding-block: calc(100vw * 8 / 390);
    margin-top: calc(100vw * 6 / 390);
    width: 100%;
    max-width: calc(100vw * 349 / 390);
    box-shadow: calc(100vw * -1 / 390) calc(100vw * 4 / 390) 0px 0px #048738;
  }

  .lp-hero__btn-icon {
    left: calc(100vw * 38 / 390);
    bottom: calc(100vw * -3 / 390);
    width: calc(100vw * 39 / 390);
  }

  .lp-hero__btn-text {
    font-size: calc(100vw * 18 / 390);
  }

  .lp-hero__btn-note {
    font-size: calc(100vw * 10 / 390);
    margin-top: calc(100vw * 8 / 390);
  }

  @media (any-hover: hover) {
    .lp-hero__btn:hover {
      box-shadow: 0 0 0 0 #048738;
      transform: translate(calc(100vw * -1 / 390), calc(100vw * 4 / 390));
    }
  }
}

/* ==========================================================================
   trouble
   ========================================================================== */
.lp-trouble {
  padding-top: calc(100vw * 120 / 1440);
  padding-bottom: calc(100vw * 60 / 1440);
  background: linear-gradient(180deg, #ffd000 0%, #ffe15f 100%);
}

.lp-trouble__inner {
  padding-inline: calc(100vw * 95 / 1440);
}

.lp-trouble__content {
  background: #ed5f00;
  border-radius: calc(100vw * 12 / 1440);
  padding-inline: calc(100vw * 92 / 1440);
  padding-top: calc(100vw * 80 / 1440);
  padding-bottom: calc(100vw * 100 / 1440);
  position: relative;
  z-index: 1;
}

.lp-trouble__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(100vw * 32 / 1440);
  margin-top: calc(100vw * 64 / 1440);
}

.lp-trouble__item {
  border: 3px solid #222222;
  background: #fff;
  border-radius: calc(100vw * 12 / 1440);
  padding-block: calc(100vw * 48 / 1440);
  position: relative;
  z-index: 1;
}

.lp-trouble__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100vw * 22 / 1440);
  width: calc(100vw * 110 / 1440);
  z-index: -1;
}

.lp-trouble__text {
  font-weight: 600;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.4;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp-trouble {
    padding-top: calc(100vw * 60 / 390);
    padding-bottom: calc(100vw * 40 / 390);
  }

  .lp-trouble__content {
    padding-inline: calc(100vw * 10 / 390);
    padding-top: calc(100vw * 60 / 390);
    padding-bottom: calc(100vw * 60 / 390);
  }

  .lp-trouble__list {
    grid-template-columns: 1fr;
    gap: calc(100vw * 4 / 390);
    margin-top: calc(100vw * 40 / 390);
  }

  .lp-trouble__item {
    border: 2px solid #222222;
    border-radius: calc(100vw * 4 / 390);
    padding-block: calc(100vw * 20 / 390);
  }

  .lp-trouble__icon {
    left: calc(100vw * 18 / 390);
    width: calc(100vw * 64 / 390);
  }

  .lp-trouble__text {
    font-size: calc(100vw * 12 / 390);
    line-height: 1.2;
  }
}

/* ==========================================================================
   solution
   ========================================================================== */
.lp-solution {
  padding-block: calc(100vw * 60 / 1440);
  position: relative;
  z-index: 2;
  background: url(../img/solution-bg.webp) no-repeat top center / 100%
    calc(100vw * 644 / 1440);
}

.lp-solution::after {
  content: "";
  position: absolute;
  top: 100%;
  bottom: 0;
  width: 100%;
  height: calc(100vw * 151 / 1440);
  background: url(../img/solution-arrow.webp) no-repeat center center / cover;
}

.lp-solution .lp-section__ttl-sub {
  color: #eabf00;
}

.lp-solution .lp-section__ttl-main {
  color: #222222;
}

.lp-solution__compare {
  --card-gap: calc(100vw * 22 / 1440);
  margin-top: calc(100vw * 80 / 1440);
  display: flex;
  gap: var(--card-gap);
}

.lp-solution__card {
  width: calc(50% - calc(var(--card-gap) / 2));
  border-radius: calc(100vw * 14 / 1440);
  position: relative;
  z-index: 1;
  display: flex;
}

.lp-solution__card-inner {
  position: relative;
  z-index: 1;
  flex: 1;
}

.lp-solution__card--a {
  border: 5px solid #222222;
  background: #fff;
  padding-inline: calc(100vw * 32 / 1440);
  padding-top: calc(100vw * 96 / 1440);
  padding-bottom: calc(100vw * 70 / 1440);
}

.lp-solution__card--a .lp-solution__card-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * 290 / 1440);
  height: calc(100vw * 290 / 1440);
  background: url(../img/cross-icon.webp) no-repeat center center / contain;
  z-index: -1;
}

.lp-solution__label {
  font-family: var(--font-family-en1);
  font-weight: 400;
  font-size: calc(100vw * 28 / 1440);
  line-height: 1.3;
  color: #9f9f9f;
}

.lp-solution__title {
  font-weight: 600;
  font-size: calc(100vw * 24 / 1440);
  line-height: 1.4;
}

.lp-solution__badge {
  position: absolute;
  top: calc(100vw * 20 / 1440);
  left: 0;
  font-weight: 600;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  padding-inline: calc(100vw * 29 / 1440);
  padding-block: calc(100vw * 8 / 1440);
  background: #222222;
  color: #fff;
}

.lp-solution__list {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 20 / 1440);
  margin-top: calc(100vw * 28 / 1440);
}

.lp-solution__item {
  --icon-size: calc(100vw * 30 / 1440);
  font-weight: 500;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.4;
  padding-left: calc(var(--icon-size) + calc(100vw * 16 / 1440));
  position: relative;
}

.lp-solution__item--ok::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url(../img/ok-icon.webp) no-repeat center center / contain;
}

.lp-solution__item--ng::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url(../img/ng-icon.webp) no-repeat center center / contain;
}

.lp-solution__item-text--accent {
  font-weight: 700;
  color: #e60011;
}

.lp-solution__item-text--strong {
  font-weight: 700;
}

.lp-solution__note {
  font-weight: 500;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.4;
  text-align: center;
  margin-top: calc(100vw * 56 / 1440);
  color: #545454;
  background: #d6d6d6;
  border-radius: calc(100vw * 8 / 1440);
  padding: calc(100vw * 12 / 1440);
}

.lp-solution__card--b {
  border: 3px solid #222222;
  background: #ed5f00;
}

.lp-solution__card--b .lp-solution__card-inner {
  margin: calc(100vw * 5 / 1440);
  background: #fff4c3;
  border-radius: calc(100vw * 9 / 1440);
  border: 3px solid #222222;
  padding-inline: calc(100vw * 26 / 1440);
  padding-top: calc(100vw * 90 / 1440);
  padding-bottom: calc(100vw * 64 / 1440);
}

.lp-solution__card--b .lp-solution__card-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * 317 / 1440);
  height: calc(100vw * 317 / 1440);
  background: url(../img/double-circle.webp) no-repeat center center / contain;
  z-index: -1;
}

.lp-solution__card--b .lp-solution__label {
  color: #ed5f00;
}

.lp-solution__button {
  display: block;
  margin-top: calc(100vw * 50 / 1440);
  font-weight: 700;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.4;
  color: #fff;
  background: #ed5f00;
  border-radius: calc(100vw * 8 / 1440);
  padding: calc(100vw * 12 / 1440);
  box-shadow: calc(100vw * -4 / 1440) calc(100vw * 7 / 1440) 0px 0px #9c3f00;
  border: 3px solid #000000;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw * 78 / 1440);
  padding-left: calc(100vw * 48 / 1440);
  transition: var(--transition);
}

.lp-solution__button::after {
  content: "";
  display: block;
  width: calc(100vw * 12 / 1440);
  height: calc(100vw * 14 / 1440);
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: #fff;
}

@media (any-hover: hover) {
  .lp-solution__button:hover {
    box-shadow: 0 0 0 0 #9c3f00;
    transform: translate(calc(100vw * -4 / 1440), calc(100vw * 7 / 1440));
  }
}

@media screen and (max-width: 768px) {
  .lp-solution {
    padding-block: calc(100vw * 30 / 390);
    background: url(../img/solution-bg-sp.webp) no-repeat top center / 100%
      calc(100vw * 216 / 390);
  }

  .lp-solution::after {
    height: calc(100vw * 53 / 390);
    background: url(../img/solution-arrow-sp.webp) no-repeat center center /
      cover;
  }

  .lp-solution__compare {
    margin-top: calc(100vw * 40 / 390);
    flex-direction: column-reverse;
    gap: calc(100vw * 10 / 390);
  }

  .lp-solution__card {
    width: 100%;
    border-radius: calc(100vw * 6 / 390);
  }

  .lp-solution__card--a {
    padding-inline: calc(100vw * 22 / 390);
    padding-top: calc(100vw * 64 / 390);
    padding-bottom: calc(100vw * 48 / 390);
    border: 3px solid #222222;
  }

  .lp-solution__card--a .lp-solution__card-inner::after {
    width: calc(100vw * 200 / 390);
    height: calc(100vw * 200 / 390);
  }

  .lp-solution__label {
    font-size: calc(100vw * 20 / 390);
  }

  .lp-solution__title {
    font-size: calc(100vw * 16 / 390);
  }

  .lp-solution__badge {
    top: calc(100vw * 24 / 390);
    font-size: calc(100vw * 12 / 390);
    padding-inline: calc(100vw * 20 / 390);
    padding-block: calc(100vw * 6 / 390);
  }

  .lp-solution__list {
    gap: calc(100vw * 6 / 390);
    margin-top: calc(100vw * 12 / 390);
  }

  .lp-solution__item {
    --icon-size: calc(100vw * 16 / 390);
    font-size: calc(100vw * 12 / 390);
    padding-left: calc(var(--icon-size) + calc(100vw * 7 / 390));
  }

  .lp-solution__note {
    font-size: calc(100vw * 12 / 390);
    margin-top: calc(100vw * 20 / 390);
    border-radius: calc(100vw * 4 / 390);
    padding: calc(100vw * 10 / 390);
  }

  .lp-solution__card--b {
    border: 2px solid #222222;
    background: #ed5f00;
  }

  .lp-solution__card--b .lp-solution__card-inner {
    margin: calc(100vw * 3 / 390);
    border-radius: calc(100vw * 4 / 390);
    border: 2px solid #222222;
    padding-inline: calc(100vw * 18 / 390);
    padding-top: calc(100vw * 64 / 390);
    padding-bottom: calc(100vw * 40 / 390);
  }

  .lp-solution__card--b .lp-solution__card-inner::after {
    width: calc(100vw * 203 / 390);
    height: calc(100vw * 203 / 390);
  }

  .lp-solution__card--b .lp-solution__label {
    color: #ed5f00;
  }

  .lp-solution__button {
    margin-top: calc(100vw * 20 / 390);
    font-size: calc(100vw * 12 / 390);
    border-radius: calc(100vw * 4 / 390);
    padding: calc(100vw * 8 / 390);
    box-shadow: calc(100vw * -2 / 390) calc(100vw * 3 / 390) 0px 0px #9c3f00;
    border: 2px solid #000000;
    padding-left: 0;
    position: relative;
  }

  .lp-solution__button::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(100vw * 14 / 390);
    width: calc(100vw * 10 / 390);
    height: calc(100vw * 12 / 390);
  }

  @media (any-hover: hover) {
    .lp-solution__button:hover {
      box-shadow: 0 0 0 0 #9c3f00;
      transform: translate(calc(100vw * -2 / 390), calc(100vw * 3 / 390));
    }
  }
}

/* ==========================================================================
   first-step
   ========================================================================== */
.lp-first-step {
  padding-top: calc(100vw * 207 / 1440);
  padding-bottom: calc(100vw * 240 / 1440);
  background: url(../img/first-step-bg.webp) no-repeat center center / cover;
  position: relative;
  z-index: 1;
  margin-top: calc(100vw * 2 / 1440);
}

.lp-first-step .lp-section__lead {
  color: #fff4c3;
}

.lp-first-step__box {
  border: 4px solid #000000;
  background: #fff4c3;
  border-radius: calc(100vw * 12 / 1440);
  padding-block: calc(100vw * 80 / 1440);
  padding-inline: calc(100vw * 110 / 1440);
  position: relative;
  margin-top: calc(100vw * 80 / 1440);
}

.lp-first-step__box-title {
  font-weight: 600;
  font-size: calc(100vw * 36 / 1440);
  line-height: 1.4;
  text-align: center;
}

.lp-first-step__box-title--accent {
  color: #06c755;
}

.lp-first-step__content {
  display: flex;
  gap: calc(100vw * 50 / 1440);
  margin-top: calc(100vw * 60 / 1440);
}

.lp-first-step__image {
  aspect-ratio: 382 / 452;
  width: 40%;
  border-radius: calc(100vw * 12 / 1440);
  overflow: hidden;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.lp-first-step__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.lp-first-step__body {
  flex: 1;
  margin-top: calc(100vw * 44 / 1440);
}

.lp-first-step__text {
  font-weight: 500;
  font-size: calc(100vw * 18 / 1440);
  line-height: 1.5;
}

.lp-first-step__text:not(:first-child) {
  margin-top: calc(100vw * 10 / 1440);
}

.lp-first-step_text--highlight {
  font-weight: 700;
  color: #ed5f00;
  background: linear-gradient(transparent 70%, #ffd000 70%);
}

.lp-first-step_text--accent {
  font-weight: 700;
  color: #ed5f00;
}

.lp-first-step__note {
  font-weight: 700;
  font-size: calc(100vw * 16 / 1440);
  line-height: 1.5;
  padding-block: calc(100vw * 16 / 1440);
  padding-inline: calc(100vw * 30 / 1440) calc(100vw * 5 / 1440);
  background: #ffffff;
  border-radius: calc(100vw * 6 / 1440);
  margin-top: calc(100vw * 32 / 1440);
}

.lp-first-step__btn-wrap {
  margin-top: calc(100vw * 60 / 1440);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

.lp-first-step__btn-lead {
  font-weight: 700;
  font-size: calc(100vw * 18 / 1440);
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(100vw * 16 / 1440);
}

.lp-first-step__btn-lead::before {
  content: "";
  width: 2px;
  height: calc(100vw * 20 / 1440);
  background: currentColor;
  rotate: 155deg;
}

.lp-first-step__btn-lead::after {
  content: "";
  width: 2px;
  height: calc(100vw * 20 / 1440);
  background: currentColor;
  rotate: -155deg;
}

.lp-first-step__btn {
  display: block;
  padding-left: calc(100vw * 142 / 1440);
  padding-right: calc(100vw * 60 / 1440);
  border-radius: 9999px;
  padding-block: calc(100vw * 14 / 1440);
  background: #06c755;
  box-shadow: calc(100vw * -1 / 1440) calc(100vw * 6 / 1440) 0px 0px #048738;
  transition: var(--transition);
  position: relative;
  margin-top: calc(100vw * 14 / 1440);
}

.lp-first-step__btn-icon {
  position: absolute;
  left: calc(100vw * 60 / 1440);
  bottom: calc(100vw * -4 / 1440);
  width: calc(100vw * 50 / 1440);
}

.lp-first-step__btn-text {
  font-weight: 700;
  font-size: calc(100vw * 24 / 1440);
  line-height: 1;
  color: #fff;
}

.lp-first-step__btn-note {
  display: block;
  font-weight: 500;
  font-size: calc(100vw * 12 / 1440);
  line-height: 1.3;
  text-align: center;
  margin-top: calc(100vw * 12 / 1440);
}

@media (any-hover: hover) {
  .lp-first-step__btn:hover {
    box-shadow: 0 0 0 0 #048738;
    transform: translate(calc(100vw * -1 / 1440), calc(100vw * 6 / 1440));
  }
}

@media screen and (max-width: 768px) {
  .lp-first-step {
    padding-top: calc(100vw * 70 / 390);
    padding-bottom: calc(100vw * 100 / 390);
    background: url(../img/first-step-bg-sp.webp) no-repeat center center /
      cover;
    margin-top: calc(100vw * 2 / 390);
  }

  .lp-first-step .lp-section__lead {
    color: #fff4c3;
  }

  .lp-first-step__box {
    border: 2px solid #000000;
    border-radius: calc(100vw * 6 / 390);
    padding-block: calc(100vw * 40 / 390);
    padding-inline: calc(100vw * 24 / 390);
    margin-top: calc(100vw * 40 / 390);
  }

  .lp-first-step__box-title {
    font-size: calc(100vw * 12 / 390);
  }

  .lp-first-step__content {
    gap: calc(100vw * 8 / 390);
    margin-top: calc(100vw * 20 / 390);
  }

  .lp-first-step__image {
    aspect-ratio: 130 / 126;
    width: 43%;
    border-radius: calc(100vw * 3 / 390);
  }

  .lp-first-step__body {
    margin-top: calc(100vw * 4 / 390);
  }

  .lp-first-step__text {
    font-size: calc(100vw * 10 / 390);
  }

  .lp-first-step__text:not(:first-child) {
    margin-top: calc(100vw * 8 / 390);
    letter-spacing: -0.02em;
  }

  .lp-first-step__note {
    font-size: calc(100vw * 10 / 390);
    padding-block: calc(100vw * 10 / 390);
    padding-inline: calc(100vw * 14 / 390);
    border-radius: calc(100vw * 6 / 390);
    margin-top: calc(100vw * 10 / 390);
    letter-spacing: -0.04em;
  }

  .lp-first-step__btn-wrap {
    margin-top: calc(100vw * 30 / 390);
  }

  .lp-first-step__btn-lead {
    font-size: calc(100vw * 12 / 390);
    gap: calc(100vw * 10 / 390);
  }

  .lp-first-step__btn-lead::before {
    width: 2px;
    height: calc(100vw * 16 / 390);
  }

  .lp-first-step__btn-lead::after {
    width: 2px;
    height: calc(100vw * 16 / 390);
  }

  .lp-first-step__btn {
    padding-left: calc(100vw * 72 / 390);
    padding-right: calc(100vw * 48 / 390);
    padding-block: calc(100vw * 6 / 390);
    box-shadow: calc(100vw * -1 / 390) calc(100vw * 3 / 390) 0px 0px #048738;
    margin-top: calc(100vw * 6 / 390);
  }

  .lp-first-step__btn-icon {
    left: calc(100vw * 32 / 390);
    bottom: calc(100vw * -3 / 390);
    width: calc(100vw * 32 / 390);
  }

  .lp-first-step__btn-text {
    font-size: calc(100vw * 16 / 390);
  }

  .lp-first-step__btn-note {
    font-size: calc(100vw * 10 / 390);
    margin-top: calc(100vw * 6 / 390);
  }

  @media (any-hover: hover) {
    .lp-first-step__btn:hover {
      box-shadow: 0 0 0 0 #048738;
      transform: translate(calc(100vw * -1 / 390), calc(100vw * 3 / 390));
    }
  }
}

/* ==========================================================================
   genre
   ========================================================================== */
.lp-genre {
  padding-top: calc(100vw * 200 / 1440);
  padding-bottom: calc(100vw * 300 / 1440);
  background: url(../img/genre-bg.webp) no-repeat center center / cover;
  margin-top: calc(100vw * -145 / 1440);
  position: relative;
  z-index: 1;
}

.lp-genre .lp-section__ttl-sub {
  color: #ffe15e;
}

.lp-genre .lp-section__ttl-main {
  color: #ed5f00;
}

.lp-genre__box {
  background: #fff4c3;
  border-radius: calc(100vw * 12 / 1440);
  padding: calc(100vw * 40 / 1440);
  margin-top: calc(100vw * 80 / 1440);
  border: 5px solid #000000;
}

.lp-genre__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(100vw * 20 / 1440) calc(100vw * 28 / 1440);
}

.lp-genre__item {
  background: #fff;
  border-radius: calc(100vw * 8 / 1440);
  border: 4px solid #222222;
  padding-top: calc(100vw * 40 / 1440);
  padding-inline: calc(100vw * 20 / 1440);
  padding-bottom: calc(100vw * 24 / 1440);
  display: flex;
  flex-direction: column;
}

.lp-genre__item-image {
  aspect-ratio: 305 / 230;
  background: #e8e8e8;
  display: grid;
  place-content: center;
  border: 2px solid #000000;
  margin-inline: calc(100vw * 4 / 1440);
}

.lp-genre__item-image img {
  width: auto;
  height: calc(100vw * 200 / 1440);
  margin-inline: auto;
}

.lp-genre__item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lp-genre__item-cat {
  font-weight: 600;
  font-size: calc(100vw * 12 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  display: flex;
  align-items: center;
  gap: calc(100vw * 7 / 1440);
  margin-top: calc(100vw * 14 / 1440);
}

.lp-genre__item-cat::before {
  content: "";
  display: block;
  width: calc(100vw * 18 / 1440);
  height: calc(100vw * 18 / 1440);
  background: url(../img/fire-icon.webp) no-repeat center center / contain;
}

.lp-genre__item-ttl {
  font-weight: 700;
  font-size: calc(100vw * 18 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  margin-top: calc(100vw * 4 / 1440);
  flex: 1;
}

.lp-genre__item-price {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-top: calc(100vw * 30 / 1440);
}

.lp-genre__item-price-label {
  font-weight: 600;
  font-size: calc(100vw * 12 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
}

.lp-genre__item-price-value {
  font-family: var(--font-family-jp2);
  font-weight: 400;
  font-size: calc(100vw * 24 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  color: #ed5f00;
  display: flex;
  align-items: flex-end;
}

.lp-genre__item-price-value-wave {
  font-family: var(--font-family-en3);
  font-size: calc(100vw * 21 / 1440);
}

.lp-genre__item-price-unit {
  font-size: calc(100vw * 18 / 1440);
}

.lp-genre__notice {
  padding: calc(100vw * 40 / 1440);
  background: #ffffff;
  border-radius: calc(100vw * 12 / 1440);
  border: 5px solid #000000;
  margin-top: calc(100vw * 20 / 1440);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon list";
  gap: 0 calc(100vw * 40 / 1440);
}

.lp-genre__notice-icon {
  grid-area: icon;
  width: calc(100vw * 107 / 1440);
}

.lp-genre__notice-title {
  grid-area: title;
  font-weight: 700;
  font-size: calc(100vw * 24 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  color: #e60011;
}

.lp-genre__notice-list {
  grid-area: list;
  margin-top: calc(100vw * 6 / 1440);
}

.lp-genre__notice-list li {
  font-weight: 700;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.5;
  display: flex;
}

.lp-genre__notice-list li::before {
  content: "・";
  display: block;
}

@media screen and (max-width: 768px) {
  .lp-genre {
    padding-top: calc(100vw * 95 / 390);
    padding-bottom: calc(100vw * 144 / 390);
    margin-top: calc(100vw * -80 / 390);
    background: url(../img/genre-bg-sp.webp) no-repeat top center / cover;
  }

  .lp-genre__box {
    background: #fff4c3;
    border-radius: calc(100vw * 4 / 390);
    padding: calc(100vw * 20 / 390) calc(100vw * 12 / 390);
    margin-top: calc(100vw * 36 / 390);
    border: 3px solid #000000;
  }

  .lp-genre__list {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(100vw * 10 / 390);
  }

  .lp-genre__item {
    border-radius: calc(100vw * 4 / 390);
    border: 2px solid #222222;
    padding-top: calc(100vw * 20 / 390);
    padding-inline: calc(100vw * 8 / 390);
    padding-bottom: calc(100vw * 12 / 390);
  }

  .lp-genre__item-image {
    aspect-ratio: 145 / 119;
    border: 1px solid #000000;
    margin-inline: 0;
  }

  .lp-genre__item-image img {
    height: calc(100vw * 96 / 390);
  }

  .lp-genre__item-cat {
    font-size: calc(100vw * 10 / 390);
    gap: calc(100vw * 3 / 390);
    margin-top: calc(100vw * 10 / 390);
  }

  .lp-genre__item-cat::before {
    width: calc(100vw * 12 / 390);
    height: calc(100vw * 12 / 390);
  }

  .lp-genre__item-ttl {
    font-size: calc(100vw * 12 / 390);
    margin-top: 0;
  }

  .lp-genre__item-price {
    margin-top: calc(100vw * 30 / 390);
  }

  .lp-genre__item-price-label {
    font-size: calc(100vw * 10 / 390);
  }

  .lp-genre__item-price-value {
    font-size: calc(100vw * 16 / 390);
  }

  .lp-genre__item-price-value-wave {
    font-size: calc(100vw * 16 / 390);
  }

  .lp-genre__item-price-unit {
    font-size: calc(100vw * 10 / 390);
  }

  .lp-genre__notice {
    padding: calc(100vw * 10 / 390);
    border-radius: calc(100vw * 4 / 390);
    border: 3px solid #000000;
    margin-top: calc(100vw * 20 / 390);
    gap: calc(100vw * 4 / 390) calc(100vw * 12 / 390);
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "icon title"
      "list list";
  }

  .lp-genre__notice-icon {
    width: calc(100vw * 35 / 390);
  }

  .lp-genre__notice-title {
    font-size: calc(100vw * 12 / 390);
    place-content: center;
  }

  .lp-genre__notice-list {
    margin-top: 0;
  }

  .lp-genre__notice-list li {
    font-size: calc(100vw * 10 / 390);
  }
}

/* ==========================================================================
   merit
   ========================================================================== */
.lp-merit {
  padding-top: calc(100vw * 40 / 1440);
  padding-bottom: calc(100vw * 140 / 1440);
  position: relative;
  z-index: 0;
}

.lp-merit::before {
  content: "";
  position: absolute;
  top: calc(100vw * -160 / 1440);
  left: 0;
  width: calc(100vw * 948 / 1440);
  height: calc(100vw * 1008 / 1440);
  background: url(../img/dotted-bg1.webp) no-repeat center center / cover;
  z-index: -1;
}

.lp-merit::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100vw * 1030 / 1440);
  height: calc(100vw * 1126 / 1440);
  background: url(../img/dotted-bg2.webp) no-repeat center center / cover;
  z-index: -1;
}

.lp-merit .lp-section__ttl-sub {
  color: #ffe15e;
}

.lp-merit .lp-section__ttl-main {
  color: #ed5f00;
}

.lp-merit__list {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 48 / 1440);
  margin-top: calc(100vw * 150 / 1440);
}

.lp-merit__item {
  position: relative;
  -webkit-filter: drop-shadow(
    0px calc(100vw * 5 / 1440) calc(100vw * 6 / 1440) #a28400b2
  );
  filter: drop-shadow(
    0px calc(100vw * 5 / 1440) calc(100vw * 6 / 1440) #a28400b2
  );
}

.lp-merit__label {
  position: absolute;
  left: calc(100vw * 16 / 1440);
  top: calc(100vw * -16 / 1440);
  background: #222222;
  color: #fff;
  display: flex;
  gap: calc(100vw * 12 / 1440);
  padding-block: calc(100vw * 10 / 1440);
  padding-inline: calc(100vw * 32 / 1440);
  font-weight: 600;
  font-size: calc(100vw * 20 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  -webkit-clip-path: polygon(0 3%, 100% 0, 97% 100%, 3% 100%);
  clip-path: polygon(0 3%, 100% 0, 97% 100%, 3% 100%);
  z-index: 1;
}

.lp-merit__label::before {
  content: "";
  display: block;
  width: calc(100vw * 30 / 1440);
  height: calc(100vw * 30 / 1440);
  background: url(../img/ok-icon.webp) no-repeat center center / contain;
}

.lp-merit__desc {
  font-weight: 500;
  font-size: calc(100vw * 18 / 1440);
  line-height: 1.3;
  letter-spacing: 6%;
  padding-inline: calc(100vw * 45 / 1440);
  padding-top: calc(100vw * 48 / 1440);
  padding-bottom: calc(100vw * 40 / 1440);
  background: #fff;
  -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  position: relative;
}

.lp-merit__desc::before {
  content: "";
  position: absolute;
  inset: calc(100vw * 7 / 1440);
  background: #fff;
  -webkit-clip-path: polygon(0 0, 99.9% 0, 97% 99.9%, 0 100%);
  clip-path: polygon(0 0, 99.9% 0, 97% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

.lp-merit__desc::after {
  content: "";
  position: absolute;
  inset: calc(100vw * 3 / 1440);
  background: #222222;
  -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  pointer-events: none;
  z-index: -1;
}

.lp-merit__desc-inner {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .lp-merit {
    padding-top: calc(100vw * 35 / 390);
    padding-bottom: calc(100vw * 50 / 390);
  }

  .lp-merit::before {
    top: calc(100vw * -160 / 390);
    width: calc(100vw * 390 / 390);
    height: calc(100vw * 605 / 390);
  }

  .lp-merit::after {
    width: calc(100vw * 390 / 390);
    height: calc(100vw * 605 / 390);
  }

  .lp-merit__list {
    gap: calc(100vw * 45 / 390);
    margin-top: calc(100vw * 60 / 390);
  }

  .lp-merit__label {
    left: calc(100vw * 6 / 390);
    top: calc(100vw * -16 / 390);
    gap: calc(100vw * 5 / 390);
    padding-block: calc(100vw * 8 / 390);
    padding-inline: calc(100vw * 16 / 390);
    font-size: calc(100vw * 10 / 390);
    -webkit-clip-path: polygon(0 3%, 100% 0, 97% 100%, 3% 100%);
    clip-path: polygon(0 3%, 100% 0, 97% 100%, 3% 100%);
  }

  .lp-merit__label::before {
    width: calc(100vw * 12 / 390);
    height: calc(100vw * 12 / 390);
  }

  .lp-merit__desc {
    font-size: calc(100vw * 12 / 390);
    padding-inline: calc(100vw * 30 / 390);
    padding-top: calc(100vw * 22 / 390);
    padding-bottom: calc(100vw * 15 / 390);
    -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  }

  .lp-merit__desc::before {
    inset: calc(100vw * 5 / 390);
    -webkit-clip-path: polygon(0 0, 99.9% 0, 97% 99.9%, 0 100%);
    clip-path: polygon(0 0, 99.9% 0, 97% 100%, 0 100%);
  }

  .lp-merit__desc::after {
    inset: calc(100vw * 2 / 390);
    -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  }
}

/* ==========================================================================
   storage
   ========================================================================== */
.lp-storage {
  --rotate: -6deg;
  padding-top: calc(100vw * 90 / 1440);
  padding-bottom: calc(100vw * 70 / 1440);
  overflow-x: clip;
  position: relative;
  z-index: 1;
}

.lp-storage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ed5f00;
  transform: skewX(var(--rotate)) rotate(var(--rotate));
  z-index: -1;
  border-top: calc(100vw * 7 / 1440) solid #222222;
  border-bottom: calc(100vw * 7 / 1440) solid #222222;
}

.lp-storage .lp-section__ttl {
  text-align: left;
  rotate: var(--rotate);
}

.lp-storage__lead {
  font-weight: 600;
  font-size: calc(100vw * 10 / 1440);
  line-height: 1.5;
  margin-top: calc(100vw * 10 / 1440);
  color: #fff;
  rotate: var(--rotate);
}

.lp-storage__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(100vw * 40 / 1440);
  margin-top: calc(100vw * 190 / 1440);
}

.lp-storage__item {
  padding: calc(100vw * 45 / 1440);
  position: relative;
  z-index: 1;
}

.lp-storage__item:nth-child(2) {
  transform: translateY(calc(100vw * -76 / 1440));
}

.lp-storage__item:nth-child(3) {
  transform: translateY(calc(100vw * -80 / 1440));
}

.lp-storage__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border: calc(100vw * 4 / 1440) solid #222222;
  z-index: -1;
  transform: skewX(var(--rotate)) rotate(var(--rotate));
}

.lp-storage__label {
  position: absolute;
  top: calc(100vw * -12 / 1440);
  left: calc(100vw * 18 / 1440);
  font-weight: 600;
  font-size: calc(100vw * 24 / 1440);
  line-height: 1.5;
  text-align: center;
  color: #ffd000;
  z-index: 1;
  rotate: var(--rotate);
  padding-inline: calc(100vw * 24 / 1440);
  padding-block: calc(100vw * 4 / 1440);
  min-width: calc(100vw * 210 / 1440);
}

.lp-storage__label::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #222222;
  transform: skewX(var(--rotate));
  z-index: -1;
}

.lp-storage__icon {
  width: calc(100vw * 147 / 1440);
  margin-inline: auto;
  rotate: var(--rotate);
}

.lp-storage__text {
  font-weight: 500;
  font-size: calc(100vw * 18 / 1440);
  line-height: 1.3;
  rotate: var(--rotate);
  text-align: center;
  margin-top: calc(100vw * 24 / 1440);
}

@media screen and (max-width: 768px) {
  .lp-storage {
    --rotate: -6deg;
    padding-top: calc(100vw * 65 / 390);
    padding-bottom: calc(100vw * 70 / 390);
  }

  .lp-storage::before {
    border-top: calc(100vw * 4 / 390) solid #222222;
    border-bottom: calc(100vw * 4 / 390) solid #222222;
  }

  .lp-storage .lp-section__ttl {
    text-align: center;
    rotate: 0deg;
  }

  .lp-storage__lead {
    font-size: calc(100vw * 10 / 390);
    margin-top: calc(100vw * 20 / 390);
    rotate: 0deg;
    text-align: center;
  }

  .lp-storage__list {
    grid-template-columns: 1fr;
    gap: calc(100vw * 24 / 390);
    margin-top: calc(100vw * 54 / 390);
    width: 84%;
    margin-inline: auto;
  }

  .lp-storage__item {
    padding: calc(100vw * 30 / 390) calc(100vw * 30 / 390)
      calc(100vw * 36 / 390);
  }

  .lp-storage__item:nth-child(2),
  .lp-storage__item:nth-child(3) {
    transform: none;
  }

  .lp-storage__item::before {
    border: calc(100vw * 3 / 390) solid #222222;
  }

  .lp-storage__label {
    position: static;
    font-size: calc(100vw * 18 / 390);
    rotate: 0deg;
    padding-inline: 0;
    padding-block: 0;
    min-width: initial;
    color: #ed5f00;
    margin-top: calc(100vw * 12 / 390);
  }

  .lp-storage__label::before {
    display: none;
  }

  .lp-storage__icon {
    width: calc(100vw * 84 / 390);
    rotate: 0deg;
  }

  .lp-storage__text {
    font-size: calc(100vw * 14 / 390);
    rotate: 0deg;
    margin-top: 0;
  }
}

/* ==========================================================================
   flow
   ========================================================================== */
.lp-flow {
  padding-top: calc(100vw * 180 / 1440);
  padding-bottom: calc(100vw * 120 / 1440);
  margin-top: calc(100vw * -100 / 1440);
  background: url(../img/flow-bg.webp) no-repeat center center / cover;
}

.lp-flow .lp-section__ttl-sub {
  color: #ffe15e;
}

.lp-flow .lp-section__ttl-main {
  color: #ed5f00;
}

.lp-flow__list {
  max-width: calc(100vw * 811 / 1440);
  margin-inline: auto;
  margin-top: calc(100vw * 80 / 1440);
}

@media screen and (max-width: 768px) {
  .lp-flow {
    padding-top: calc(100vw * 90 / 390);
    padding-bottom: calc(100vw * 60 / 390);
    margin-top: calc(100vw * -50 / 390);
    background: url(../img/flow-bg-sp.webp) no-repeat center center / cover;
  }

  .lp-flow__list {
    max-width: calc(100vw * 350 / 390);
    margin-top: calc(100vw * 26 / 390);
  }
}

/* ==========================================================================
   faq
   ========================================================================== */
.lp-faq {
  --q-icon-size: calc(100vw * 80 / 1440);
  padding-top: calc(100vw * 120 / 1440);
  padding-bottom: calc(100vw * 80 / 1440);
}

.lp-faq .lp-section__ttl-sub {
  color: #ffe15e;
}

.lp-faq .lp-section__ttl-main {
  color: #ed5f00;
}

.lp-faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 20 / 1440);
  margin-top: calc(100vw * 80 / 1440);
}

.lp-accordion {
  padding: calc(100vw * 20 / 1440);
  border-radius: calc(100vw * 8 / 1440);
  border: calc(100vw * 4 / 1440) solid #000000;
}

.lp-accordion__trigger {
  display: flex;
  align-items: center;
  gap: calc(100vw * 12 / 1440);
}

.lp-accordion__trigger-q {
  width: var(--q-icon-size);
}

.lp-accordion__title {
  flex: 1;
  font-weight: 600;
  font-size: calc(100vw * 22 / 1440);
  line-height: 1.5;
  padding-left: calc(100vw * 10 / 1440);
  align-self: stretch;
  place-content: center;
  position: relative;
}

.lp-accordion__trigger-icon {
  width: calc(100vw * 40 / 1440);
  height: calc(100vw * 24 / 1440);
  background: #222222;
  -webkit-clip-path: polygon(50% 100%, 100% 0, 0 0);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  margin-left: calc(100vw * 24 / 1440);
  margin-right: calc(100vw * 12 / 1440);
  transition: var(--transition);
}

.lp-accordion__inner {
  font-weight: 600;
  font-size: calc(100vw * 22 / 1440);
  line-height: 1.5;
  padding-top: calc(100vw * 32 / 1440);
  padding-bottom: calc(100vw * 10 / 1440);
  margin-left: calc(100vw * 100 / 1440);
  margin-right: calc(100vw * 90 / 1440);
  position: relative;
}

.lp-accordion__inner::before {
  content: "";
  position: absolute;
  top: calc(100vw * 14 / 1440);
  left: 0;
  width: 100%;
  border-bottom: calc(100vw * 2 / 1440) dashed #494949;
}

.lp-accordion[data-open="true"] .lp-accordion__trigger-icon {
  transform: scaleY(-1);
}

@media screen and (max-width: 768px) {
  .lp-faq {
    --q-icon-size: calc(100vw * 25 / 390);
    padding-top: calc(100vw * 56 / 390);
    padding-bottom: calc(100vw * 40 / 390);
  }

  .lp-faq__list {
    gap: calc(100vw * 4 / 390);
    margin-top: calc(100vw * 40 / 390);
  }

  .lp-accordion {
    padding: calc(100vw * 10 / 390);
    border-radius: calc(100vw * 4 / 390);
    border: calc(100vw * 2 / 390) solid #000000;
  }

  .lp-accordion__trigger {
    gap: calc(100vw * 8 / 390);
  }

  .lp-accordion__trigger-q {
    border-radius: calc(100vw * 4 / 390);
  }

  .lp-accordion__title {
    font-size: calc(100vw * 12 / 390);
    padding-left: 0;
  }

  .lp-accordion__trigger-icon {
    width: calc(100vw * 14 / 390);
    height: calc(100vw * 10 / 390);
    margin-left: 0;
    margin-right: 0;
  }

  .lp-accordion__inner {
    font-size: calc(100vw * 12 / 390);
    padding-top: calc(100vw * 9 / 390);
    padding-bottom: 0;
    margin-left: calc(100vw * 32 / 390);
    margin-right: calc(100vw * 32 / 390);
  }

  .lp-accordion__inner::before {
    top: calc(100vw * 3 / 390);
    border-bottom: calc(100vw * 1 / 390) dashed #494949;
  }
}

/* ==========================================================================
   company
   ========================================================================== */
.lp-company {
  padding-bottom: calc(100vw * 80 / 1440);
}

.lp-company__box {
  background: #fff4c3;
  border-radius: calc(100vw * 12 / 1440);
  border: calc(100vw * 4 / 1440) solid #000000;
  padding-block: calc(100vw * 80 / 1440);
  padding-inline: calc(100vw * 125 / 1440);
  position: relative;
  z-index: 1;
}

.lp-company__box::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100vw * 313 / 1440);
  height: calc(100vw * 280 / 1440);
  background: url(../img/company-logo.webp) no-repeat center center / cover;
  z-index: -1;
}

.lp-company__box .lp-section__circle {
  background: #7a4e11;
}

.lp-company__title {
  font-weight: 600;
  font-size: calc(100vw * 32 / 1440);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #fff;
  background: #7a4e11;
  padding: calc(100vw * 12 / 1440);
  border-radius: calc(100vw * 6 / 1440);
  text-align: center;
}

.lp-company__lead {
  font-weight: 600;
  font-size: calc(100vw * 32 / 1440);
  line-height: 1.3;
  text-align: center;
  margin-top: calc(100vw * 60 / 1440);
}

.lp-company__lead--highlight {
  color: #ed5f00;
}

.lp-company__lead--sm {
  font-size: calc(100vw * 28 / 1440);
  margin-inline: calc(100vw * 6 / 1440);
}

.lp-company__info {
  font-weight: 600;
  font-size: calc(100vw * 22 / 1440);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 22 / 1440);
  margin-top: calc(100vw * 60 / 1440);
}

.lp-company__row {
  display: flex;
  justify-content: center;
  padding-bottom: calc(100vw * 22 / 1440);
  border-bottom: calc(100vw * 2 / 1440) dashed #d8ca8a;
}

.lp-company__data {
  display: flex;
}

.lp-company__data::before {
  content: "：";
}

@media screen and (max-width: 768px) {
  .lp-company {
    padding-bottom: calc(100vw * 60 / 390);
  }

  .lp-company__box {
    border-radius: calc(100vw * 6 / 390);
    border: calc(100vw * 2 / 390) solid #000000;
    padding-block: calc(100vw * 60 / 390);
    padding-inline: calc(100vw * 10 / 390);
  }

  .lp-company__box::after {
    width: calc(100vw * 137 / 390);
    height: calc(100vw * 122 / 390);
  }

  .lp-company__title {
    font-size: calc(100vw * 20 / 390);
    padding: calc(100vw * 8 / 390);
    border-radius: calc(100vw * 6 / 390);
  }

  .lp-company__lead {
    font-size: calc(100vw * 22 / 390);
    margin-top: calc(100vw * 20 / 390);
  }

  .lp-company__lead--sm {
    font-size: calc(100vw * 16 / 390);
    margin-inline: calc(100vw * 2 / 390);
  }

  .lp-company__info {
    font-size: calc(100vw * 12 / 390);
    gap: calc(100vw * 12 / 390);
    margin-top: calc(100vw * 20 / 390);
  }

  .lp-company__row {
    justify-content: flex-start;
    gap: calc(100vw * 6 / 390);
    padding-bottom: calc(100vw * 12 / 390);
    border-bottom: calc(100vw * 2 / 390) dashed #d8ca8a;
    padding-left: calc(100vw * 30 / 390);
  }

  .lp-company__label {
    text-align: center;
    place-content: center;
    min-width: calc(100vw * 103 / 390);
  }

  .lp-company__data {
    display: block;
  }

  .lp-company__data::before {
    display: none;
  }
}