/*
emを使用しフルリキットになるように設計してあります。
emは自身・親要素のfont-sizeに依存するため計算に注意。remはhtmlに依存するので使用しない。
例えば
  font-size: 16px;
  margin: 0 0 20px;
を指定したい場合
p {
  font-size: 1.6em;
  marign: 0 0 1.25em;
}
marginは自身の1.6emをベースにするため、20/16=1.25emとなる。
 */
:root {
  --main-color: #171E59;
  --base-color: #EFF5FB;
  --accent-color: #302CFF;
  --accent-color2: #1DEED5;
}
main {
  font-family: "Noto Sans", sans-serif;
  font-size: .6944444444vw;
  overflow: hidden;
}

main h1,
main h2,
main h3 {
  margin: 0;
  padding: 0;
  background: none;
}

/*
* 共通
*/
/* ボタン */
.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color2);
  color: var(--main-color);
  padding: 1.1em 3.6em;
  font-size: 2.5em;
  font-weight: 700;
  border-radius: 3.6em;
}

/* 共通タイトル */
.lp-headline {
  font-size: 4.6em;
  text-align: center;
}
/* リード文 */
.lp-lead {
  font-size: 2.1em;
  line-height: 1.5;
  text-align: center;
}
/* モジュール */
.lp-m-contact {
  margin: 0 9em;
  text-align: center;
  position: relative;
}

.lp-m-contact:last-child {
  margin-top: 6em;
  margin-bottom: 6em;
}

.lp-m-contact::before,
.lp-m-contact::after {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}

.lp-m-contact::before {
  width: 45.8em;
  height: 40.7em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 458.34 406.52" fill="%231deed5" fill-rule="evenodd"><path d="m423.31,53.07c42.9,54.1,45.21,135.1,13.45,196.41-27.08,52.29-98.87,45.96-152.07,71.23-60.15,28.57-107.78,102.79-171.14,82.28C44.97,380.78,13.91,300.86,3.15,229.57-7.33,160.2,7.67,85.81,58.35,37.3,105.38-7.73,175.6-.64,240.65,2.17c66.44,2.87,141.34-1.2,182.65,50.91Z"/></svg>');
  top: -14.8em;
  left: -18em;
}

.lp-m-contact::after {
  width: 54.8em;
  height: 48.6em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 548.49 485.54" fill="%23302cff" fill-rule="evenodd"><path d="m534.47,175.42c31.24,80.67,8.06,177.32-47.33,237.4-47.25,51.25-126.33,15.76-194.48,24.88-77.06,10.31-154.49,79.45-219.54,30.5C2.7,415.2-6.94,308.62,3.59,220.16,13.85,134.08,54.48,52,127.17,14.42c67.47-34.88,144.55.89,217.15,29.59,74.14,29.31,160.06,53.71,190.14,131.41Z"/></svg>');
  right: -17.6em;
  bottom: -16.0em;
}

.lp-m-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../images/bg_contact.svg) no-repeat 1em 15.3em, url(../images/bg_contact.svg) no-repeat right .5em bottom 3.4em;
  background-size: 21.5em auto, 21.5em auto;
  background-color: var(--main-color);
  color: #fff;
  padding: 6.0em 0 8.6em;
  border-radius: 3.3em;
}

.lp-m-contact__headline {
  font-size: 3.7em;
  line-height: 1.5;
  margin: 0 0 .648648em;
}

.lp-m-contact__lead {
  font-size: 2.0em;
  margin: 0 0 1.35em;
}

/* hero */
.lp-hero {
  background: url(../images/bg_hero.png) no-repeat center top;
  background-size: cover;
  padding: 7em 0 8.4em;
}

.lp-hero__inner {
  background: #fff;
  margin: 0 9em;
  padding: 10em 9.4em 8.4em 10em;
  border-radius: 3.3em;
  display: flex;
  justify-content: space-between;
}

.lp-hero__headline {
  font-size: 1em;
  margin: 0 0 4.6em;
  width: 100%;
}

.lp-hero__text {
  width: 56.7em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lp-hero__lead {
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 1.7619047619em;
}
.lp-hero__image {
  width: 47.1em;
  margin: 1.7em 0 0;
}

.lp-hero__image img {
  width: 100%;
}

/* 課題 */
.lp-problem {
  padding: 8.7em 0 16em;
}

.lp-problem__headline {
  font-size: 3.2em;
  text-align: center;
  margin: 0 0 2.875em;
}

.lp-problem__headline strong {
  font-size: 1.25em;
  color: var(--accent-color);
}

.lp-problem__list {
  display: flex;
  justify-content: center;
  gap: 5.6em;
}

.lp-problem__list li {
  text-align: center;
}

.lp-problem__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.3em;
  margin: 0 0 4.3em;
}

.lp-problem__icon._problem01 img {
  width: 11.7em;
}

.lp-problem__icon._problem02 img {
  width: 11em;
}

.lp-problem__icon._problem03 img {
  width: 10.4em;
}

.lp-problem__icon._problem04 img {
  width: 12.4em;
}

.lp-problem__text {
  font-size: 2.0em;
  line-height: 1.4;
}

/* 支援 */

.lp-support {
  margin: 0 0 7.3em;
  overflow: hidden;
}

.lp-support__inner {
  margin: 0 9em;
  padding: 10em 8em 16.7em;
  background: var(--base-color);
  border-radius: 5.5em;
}

.lp-support__headline {
  font-size: 3.6em;
  font-weight: 500;
  text-align: center;
  margin: 0 0 .80555555em;
}

.lp-support__headline strong {
  font-size: 1.527777em;
  color: var(--accent-color);
}

.lp-support__list {
  margin: 10em 0 0;
}

.lp-support__list li {
  display: flex;
  align-items: flex-start;
  gap: 10em;
  counter-increment: number;
  margin: 0 0 13em;
}

.lp-support__list li:last-child {
  margin: 0;
}

.lp-support__list li:nth-child(even) {
  flex-direction: row-reverse;
}

.lp-support__list li:nth-child(even) .lp-support__image {
  margin: 0 -20em 0 0;
}

.lp-support__image {
  width: 72em;
  border-radius: 3em;
  overflow: hidden;
  margin: 0 0 0 -20em;
}

.lp-support__image img {
  width: 100%;
}

.lp-support__text {
  width: 50em;
}

.lp-support__text::before {
  display: block;
  content: counter(number,decimal-leading-zero);
  font-size: 10em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: .7;
  opacity: 0.1;
  color: var(--main-color);
  margin: 0 0 .24em;
}

.lp-support__title {
  font-size: 2.9em;
  line-height: 1.6;
  margin: 0 0 .27586206896em;
}

.lp-support__tag {
  font-size: 2.1em;
  line-height: 2;
  margin: 0 0 .7619047619em;
}

.lp-support__desc {
  font-size: 1.6em;
  line-height: 1.6;
}

/* 支援内容 */
.lp-support-detail {
  padding: 8.4em 9em;
  margin: 8.0em 0 0 ;
  background: var(--base-color);
}

.lp-support-detail__head {
  max-width: 96em;
  margin: 0 auto;
}

.lp-support-detail__headline {
  font-size: 4.3em;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6976744186em;
}

.lp-support-detail__headline span {
  font-size: .55813953488em;
  line-height: 1.4;
  padding: 7px 20px;
  background: var(--accent-color);
  border-radius: 2.4em;
  color: #fff;
}

.lp-support-detail__check-list {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin: 3.7em 0 0;
}

.lp-support-detail__check-list li {
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 1.333333em 0 1.33333em 2.14285714285em;
  background: #fff;
  border-radius: .28571428571em;
  position: relative;
}

.lp-support-detail__check-list li::before {
  content: "";
  display: block;
  width: 1.4em;
  height: 1.1em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.3 22.59"><path fill="%23302cff" d="m10.29,22.15L.44,12.3c-.59-.59-.59-1.55,0-2.14l2.14-2.14c.59-.59,1.55-.59,2.14,0l6.63,6.63L25.57.44c.59-.59,1.55-.59,2.14,0l2.14,2.14c.59.59.59,1.55,0,2.14L12.43,22.15c-.59.59-1.55.59-2.14,0Z"/></svg>') no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.9em;
  margin: auto;
}

.lp-support-detail__excluded {
  display: flex;
  justify-content: center;
  gap: 2.5em;
  padding: 3.5em 0 0;
  margin: 4.2em 0 0;
  border-top: 1px solid rgba(48, 44, 255, .15);
}

.lp-support-detail__excluded dt {
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.4;
}

.lp-support-detail__excluded dd {
  font-size: 1.5em;
  line-height: 1.3;
}

.lp-support-detail__body {
  background: #fff;
  border-radius: 5em;
  padding: 9.3em 0 11em;
  margin: 7.5em 0 0;
}

.lp-support-detail__item {
  max-width: 96em;
  margin: 0 auto 8em;
}

.lp-support-detail__item:last-child {
  margin-bottom: 0;
}

.lp-support-detail__item dt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4em;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 1.44em;
}

.lp-support-detail__item._support01 dt img {
  width: 3.64em;
}

.lp-support-detail__item._support02 dt img {
  width: 4.96em;
  transform: translateX(.48em);
}

.lp-support-detail__item._support03 dt img {
  width: 8.52em;
}

.lp-support-detail__item dd p {
  font-size: 1.5em;
  text-align: center;
}

.lp-support-detail__sprt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1.6em;
}

.lp-support-detail__sprt-list li {
  font-size: 1.9em;
  font-weight: 600;
  width: 24.8421052631em;
  text-align: center;
  padding: 1.26315789473em 0;
  background: #EFF5FB;
  color: #111C80;
  border-radius: .84210526315em;
}

.lp-support-detail__sprt-list li small {
  display: block;
  font-size: .73684210526em;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  margin: .21428571428em 0 0;
}

/* ノウハウ */
.lp-knowhow {
  background: var(--base-color);
}

.lp-knowhow__head {
  margin: 0 0 7.2em;
  padding: 11.4em 0 0;
  position: relative;
}

.lp-knowhow__head::before {
  content: "";
  display: block;
  width: 100%;
  height: 42.9em;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.lp-knowhow__head > * {
  position: relative;
}

.lp-knowhow__head h2 {
  margin: 0 0 .41304347826em;
}

.lp-knohow__slider {
  display: flex;
  justify-content: flex-end;
}

.lp-knohow__slide-set {
  display: flex;
  height: 33.3em;
  padding: 0 0 0 4em;
  gap: 4em;
  animation: slider 50s linear infinite;
}

.lp-knohow__slider img {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  border-radius: 1em;
  backface-visibility: hidden;
}

@keyframes slider {
  0% {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(100%, 0, 0);
  }
}

/* お客様事例 */
.lp-case {
  background: var(--base-color);
  padding: 14.2em 0 0;
  text-align: center;
}

.lp-case__box {
  max-width: 96em;
  margin: 5.3em auto;
  background: #fff;
  padding: 4.5em;
  border-radius: 2.6em;
  text-align: center;
}

.lp-case__box p {
  font-size: 2.3em;
  line-height: 2.1;
  color: var(--main-color);
}

.lp-case__lead {
  font-size: 2.2em;
  line-height: 1.7;
}

/* 料金 */
.lp-price {
  padding: 14.6em 0 17.1em;
  background: var(--base-color);
  position: relative;
  z-index: -1;
}

.lp-price h2 {
  margin: 0 0 1.15217391304em;
}

@media screen and (min-width: 769px) {
  .for-sp {
    display: none;
  }
  .lp-btn {
    transition: background-color .3s;
  }
  .lp-btn:hover {
    background-color: #98fff3;
  }
}
@media screen and (max-width: 768px) {
  main {
    font-size: 2.666666666vw;
  }

  .lp-column {
    margin: 0 1.5em;
  }

  .for-pc {
    display: none;
  }

  .lp-headline {
    font-size: 2.4em;
  }

  .lp-btn {
    font-size: 2.4em;
    padding: 1.2em 1.5em;
  }

  .lp-lead {
    font-size: 1.7em;
  }

  .lp-m-contact {
    margin: 0 1.5em;
  }

  .lp-m-contact::before {
    width: 23em;
    height: 20.5em;
    top: -10em;
    left: -10em;
  }

  .lp-m-contact::after {
    width: 22.5em;
    height: 24.5em;
    right: -17.6em;
    bottom: -10.0em;
  }

  .lp-m-contact__inner {
    padding: 3.0em 1.5em 3.6em;
    background-position: 1em 1em, right.5em bottom 2.5em;
    background-size: 12.3em auto, 12.3em auto;
  }

  .lp-m-contact__headline {
    font-size: 2.4em;
  }

  .lp-m-contact__lead {
    font-size: 1.5em;
  }

  .lp-hero {
    padding: 2.8em 0 9.0em;
  }

  .lp-hero__inner {
    flex-direction: column;
    margin: 0;
    padding: 4.8em 2.5em 8.0em;
    position: relative;
  }

  .lp-hero__text {
    width: 100%;
  }

  .lp-hero__headline {
    margin: 0 0 1.333333em;
  }

  .lp-hero__lead {
    font-size: 1.7em;
    margin: 0 0 .82352941176em;
  }

  .lp-hero__image {
    width: 29.6em;
  }

  .lp-hero .lp-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.29166666em;
    margin: 0 .416666666em;
  }

  .lp-problem {
    padding: 6.5em 0;
  }

  .lp-problem__headline {
    font-size: 2.4em;
    margin: 0 0 1.875em;
  }

  .lp-problem__list {
    flex-direction: column;
  }

  .lp-problem__icon {
    height: auto;
    margin: 0 0 2.9em;
  }

  .lp-problem__icon._problem01 img {
    width: 10.3em;
  }

  .lp-problem__icon._problem02 img {
    width: 9.8em;
  }

  .lp-problem__icon._problem03 img {
    width: 9.2em;
  }

  .lp-problem__icon._problem04 img {
    width: 11em;
  }

  .lp-support {
    margin: 0 0 5em;
  }

  .lp-support__inner {
    margin: 0;
    padding: 4.5em 1.6em;
  }

  .lp-support__headline {
    font-size: 2.6em;
  }

  .lp-support__headline strong {
    display: block;
  }

  .lp-support__list {
    margin: 5em 0 0;
  }

  .lp-support__list li {
    flex-direction: column;
    gap: 3.7em;
    margin: 0 0 5em;
  }

  .lp-support__list li:nth-child(even) {
    flex-direction: column;
  }

  .lp-support__list li:nth-child(even) .lp-support__image {
    margin: 0;
  }

  .lp-support__image {
    width: 100%;
    margin: 0;
  }

  .lp-support__text {
    width: 100%;
  }

  .lp-support__text::before {
    font-size: 7.4em;
  }

  .lp-support__title {
    font-size: 2.1em;
  }

  .lp-support__tag {
    font-size: 1.6em;
  }

  .lp-support__desc {
    font-size: 1.2em;
  }

  .lp-support-detail {
    padding: 4.5em 0;
    margin: 5em 0 0;
  }

  .lp-support-detail__headline {
    font-size: 2.4em;
  }

  .lp-support-detail__check-list li {
    font-size: 1.6em;
    padding: 1em 1.5em 1em 2.5em;
  }

  .lp-support-detail__check-list li::before {
    width: 1em;
    height: .8125em;
    left: 1em;
  }

  .lp-support-detail__excluded {
    align-items: center;
    gap: 1.5em;
  }

  .lp-support-detail__excluded dt {
    flex-shrink: 0;
    font-size: 1.4em;
  }

  .lp-support-detail__excluded dd {
    font-size: 1.2em;
  }

  .lp-support-detail__body {
    padding: 4.5em 1.5em;
    margin: 4.5em -1.5em 0;
  }

  .lp-support-detail__item {
    margin: 0 0 4.5em;
  }

  .lp-support-detail__item dt {
    font-size: 2.0em;
    gap: 1em;
    margin: 0 0 1em;
  }

  .lp-support-detail__item._support01 dt img {
    width: 3.75em;
  }

  .lp-support-detail__item._support02 dt img {
    width: 4.65em;
  }

  .lp-support-detail__item._support03 dt img {
    width: 8em;
  }

  .lp-support-detail__sprt-list li {
    font-size: 1.6em;
    padding: 1em;
  }

  .lp-support-detail__sprt-list li small {
    margin-top: .25em;
  }

  .lp-support-detail__item dd p {
    font-size: 1.4em;
  }

  .lp-knowhow__head {
    padding: 4.5em 1.5em 0;
    margin: 0 0 4.5em;
  }

  .lp-knowhow__head::before {
    height: 35em;
  }

  .lp-knowhow__head h2 {
    margin: 0 0 1em;
  }

  .lp-knohow__slide-set {
    padding: 0 0 0 2em;
    gap: 2em;
    height: 15em;
  }

  .lp-case {
    padding: 6em 0 0;
  }

  .lp-case__box {
    margin: 4.5em 0;
    padding: 2em 1.5em;
  }

  .lp-case__box p {
    font-size: 1.6em;
  }

  .lp-case__lead {
    font-size: 1.6em;
  }

  .lp-price {
    padding: 6em 0 ;
  }
}

[data-fadeIn] {
  opacity: 0;
  transform: translate3d(0,100px,0);
  transition: opacity .4s ease , transform .4s ease;
}

[data-fadeIn].is-in {
  opacity: 1;
  transform: translateZ(0);
}

[data-fadeIn="delay"] {
  transition-delay: .4s;
}

@media screen and (max-width: 768px) {
  [data-fadeIn="delay"] {
    transition-delay: 0s;
  }
}