@charset "UTF-8";
/* -------------------mixin----------------------- */
:root {
  --c-txt:#000;
}

@media screen and (max-width: 999px) {
  .pc__only {
    display: none !important;
  }
}

@media screen and (min-width: 1000px) {
  .sp__only {
    display: none !important;
  }
}

/* ----px → vw---- */
/* ----px → vw  pc---- */
/* ----------------------------------------
		base
---------------------------------------- */
* {
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  color: #3E3E3E;
  letter-spacing: 0.1em;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  line-height: 2;
}
* img {
  width: 100%;
  height: auto;
}

#content__body {
  background-color: #F5F4F2;
}
#content__body img {
  width: 100%;
  height: auto;
}
#content__body .nav {
  position: fixed;
  width: 100%;
  padding: 1.5625vw;
  display: flex;
  justify-content: space-between;
  font-size: 0.859375vw;
  z-index: 100;
}
@media screen and (max-width: 999px) {
  #content__body .site__top {
    display: none;
  }
}
#content__body nav ul {
  display: flex;
  justify-content: space-between;
}
#content__body nav ul li:nth-child(n+2) {
  padding-left: 3.90625vw;
}
@media screen and (max-width: 999px) {
  #content__body nav ul {
    display: none;
  }
}

/* ----------------------------------------
	menu
---------------------------------------- */
/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
  position: fixed;
  top: 0;
  right: 0;
  width: 14.4vw;
  height: 14.4vw;
  cursor: pointer;
  background-color: #000;
  opacity: 0.8;
  z-index: 101;
  transition: all 0.3s ease-in-out;
}

.menu-btn-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 1px;
  width: 50%;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

.menu-btn-line::before,
.menu-btn-line::after {
  content: "";
  height: 1px;
  width: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  transition: inherit;
}

.menu-btn-line::before {
  top: -10px;
}

.menu-btn-line::after {
  top: 10px;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
  transition: all 0.5s;
  visibility: visible;
  opacity: 1;
}

.open .menu-btn {
  border-color: #fff;
}

.open .menu-btn-line {
  background-color: transparent;
}

.open .menu-btn-line::before,
.open .menu-btn-line::after {
  top: 0;
  background: #fff;
}

.open .menu-btn-line::before {
  transform: rotate(45deg);
}

.open .menu-btn-line::after {
  transform: rotate(-45deg);
}

/*開いたメニュー*/
.menu {
  position: fixed;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: all 0.5s;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
}
.menu .nav_wrap {
  margin: 5.333vw;
  width: 100%;
}

.menu ul {
  width: 77.33vw;
  justify-content: center;
  padding-top: 25.33vw;
}
.menu ul li {
  width: 20.8vw;
  text-align: center;
}
.menu ul li a {
  display: block;
  font-size: 1.4rem;
  color: #000;
  text-decoration: none;
  transition: all 0.2s;
}
.menu ul li a:hover {
  transform: translateY(-5px);
  transition: all 0.2s;
}

/* ----------------------------------------
		lp
---------------------------------------- */
.flex {
  display: flex;
}
@media screen and (max-width: 999px) {
  .flex {
    justify-content: center;
  }
}

#lp {
  padding-top: 7.8125vw;
  margin-bottom: 11.71875vw;
}
@media screen and (max-width: 999px) {
  #lp {
    padding-top: 0;
    margin-bottom: 26.6666666667vw;
  }
}

.lp__head {
  position: relative;
  margin-bottom: 7.8125vw;
  overflow: hidden;
}
@media screen and (max-width: 999px) {
  .lp__head {
    margin-bottom: 13.3333333333vw;
  }
}
@media screen and (max-width: 999px) {
  .lp__head__img {
    background-image: url("../img/lp/top/lp_head_1.jpg");
    background-size: 160%;
    background-position: right;
    width: 100%;
    height: 40vw;
  }
}
.lp__head__ttl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 7.8125vw;
}
@media screen and (max-width: 999px) {
  .lp__head__ttl {
    position: static;
    display: block;
    margin-top: 13.3333333333vw;
    text-align: center;
    transform: none;
  }
}
.lp__head h1 {
  font-size: 1.953125vw;
  margin-bottom: 1.5625vw;
  line-height: 1.3;
}
@media screen and (max-width: 999px) {
  .lp__head h1 {
    font-size: 6.6666666667vw;
    margin-bottom: 5.3333333333vw;
    line-height: 1.3;
  }
}
.lp__head h2 {
  font-size: 0.9375vw;
  margin-bottom: 4.6875vw;
  line-height: 2;
}
@media screen and (max-width: 999px) {
  .lp__head h2 {
    font-size: 3.2vw;
    margin-bottom: 8vw;
  }
}

@media screen and (max-width: 999px) {
  .lp__1 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_1.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__2 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_2.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__3 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_3.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__4 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_4.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__5 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_5.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__6 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_6.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__7 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_7.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__8 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_8.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__9 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_9.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__10 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_10.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__11 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_11.jpg");
  }
}

@media screen and (max-width: 999px) {
  .lp__12 .lp__head__img {
    background-image: url("../img/lp/top/lp_head_12.jpg");
  }
}

.modal {
  width: 8.59375vw;
  height: 8.59375vw;
  display: block;
  background-color: #E8E6E2;
  text-align: center;
  font-size: 0.859375vw;
  border-radius: 50%;
  padding-top: 3.125vw;
  line-height: 1.5;
  transition: all 0.2s ease;
}
@media screen and (max-width: 999px) {
  .modal {
    width: 24vw;
    height: 24vw;
    font-size: 2.6666666667vw;
    padding-top: 8vw;
  }
}
.modal:hover {
  opacity: 0.5;
}

.modal__1 {
  margin-right: 1.5625vw;
}
@media screen and (max-width: 999px) {
  .modal__1 {
    margin-right: 5.3333333333vw;
  }
}

.modal__1__img figure {
  width: 20%;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .modal__1__img figure {
    width: 80%;
  }
}
.modal__1__img .close {
  width: 20%;
  margin: 0 auto;
  font-size: 1.171875vw;
  cursor: pointer;
  text-align: center;
  background-color: #fff;
  padding: 3.90625vw 0;
}
@media screen and (max-width: 999px) {
  .modal__1__img .close {
    width: 80%;
    font-size: 4vw;
    padding: 13.3333333333vw 0;
  }
}

.modal__2__img figure {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .modal__2__img figure {
    width: 80%;
  }
}
.modal__2__img .close {
  width: 50%;
  margin: 0 auto;
  font-size: 1.171875vw;
  cursor: pointer;
  text-align: center;
  background-color: #fff;
  padding: 3.90625vw 0;
}
@media screen and (max-width: 999px) {
  .modal__2__img .close {
    width: 80%;
    font-size: 4vw;
    padding: 13.3333333333vw 0;
  }
}

.mfp-close-btn-in .mfp-close {
  position: fixed;
  width: 30px;
  height: 30px;
  margin: 50px;
  font-size: 0;
  background: url("../img/lp/circle.svg") 50% 50% no-repeat;
  background-size: 100%;
  opacity: 1;
  cursor: pointer;
}
@media screen and (max-width: 999px) {
  .mfp-close-btn-in .mfp-close {
    width: 8vw;
    height: 8vw;
    margin: 5.3333333333vw;
  }
}

.flex__lp__img {
  width: 75vw;
  margin: 0 auto 7.8125vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 999px) {
  .flex__lp__img {
    flex-wrap: nowrap;
    flex-direction: column;
    width: 80%;
    margin: 0 auto 13.3333333333vw;
  }
}
.flex__lp__img li {
  display: inline-block;
  width: 23.4375vw;
}
@media screen and (max-width: 999px) {
  .flex__lp__img li {
    width: 90%;
    margin: 0 auto 8vw;
  }
}
.flex__lp__img li img {
  box-shadow: 0px 0px 10px 2px rgba(93, 93, 93, 0.1);
}
.flex__lp__img li:nth-child(n+4) {
  margin-top: 1.953125vw;
}

.lp__textarea {
  position: relative;
  width: 75vw;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .lp__textarea {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
}

.concept, .point {
  margin-bottom: 6.25vw;
}
@media screen and (max-width: 999px) {
  .concept, .point {
    margin-bottom: 21.3333333333vw;
  }
}
.concept h3, .point h3 {
  position: relative;
  font-size: 1.5625vw;
  background: url("../img/lp/checkmark.svg") no-repeat left center;
  padding-left: 3.125vw;
  border-bottom: 2px solid var(--c-txt);
  display: inline-block;
  margin-bottom: 1.5625vw;
  line-height: 2.5;
}
@media screen and (max-width: 999px) {
  .concept h3, .point h3 {
    font-size: 5.3333333333vw;
    padding-left: 10.6666666667vw;
    border-bottom: 2px solid var(--c-txt);
    display: inline-block;
    margin-bottom: 5.3333333333vw;
    line-height: 2.5;
  }
}
.concept p, .point p {
  font-size: 1.09375vw;
}
@media screen and (max-width: 999px) {
  .concept p, .point p {
    font-size: 3.7333333333vw;
  }
}

.supplement {
  font-size: 0.9375vw;
  position: absolute;
  right: 0;
}
@media screen and (max-width: 999px) {
  .supplement {
    font-size: 3.2vw;
    position: static;
  }
}
.supplement p {
  white-space: nowrap;
  display: flex;
}
.supplement p span:last-child {
  margin-left: 3.90625vw;
}
@media screen and (max-width: 999px) {
  .supplement p span:last-child {
    margin-left: 13.3333333333vw;
  }
}
.supplement .supplement__last span:last-child {
  margin-left: 5vw;
}
@media screen and (max-width: 999px) {
  .supplement .supplement__last span:last-child {
    margin-left: 17.0666666667vw;
  }
}
.supplement .app__icon {
  display: flex;
  margin-top: 1.5625vw;
}
@media screen and (max-width: 999px) {
  .supplement .app__icon {
    margin-top: 5.3333333333vw;
  }
}
.supplement .app__icon li {
  color: #5CAAF7;
  background-color: #10253A;
  padding: 0.625vw 0.78125vw;
  border-radius: 0.390625vw;
}
@media screen and (max-width: 999px) {
  .supplement .app__icon li {
    padding: 2.1333333333vw 2.6666666667vw;
    border-radius: 1.3333333333vw;
  }
}
.supplement .app__icon li:nth-child(2) {
  color: #ED6DEE;
  background-color: #400835;
  margin-left: 0.78125vw;
}
@media screen and (max-width: 999px) {
  .supplement .app__icon li:nth-child(2) {
    margin-left: 2.6666666667vw;
  }
}
.supplement .app__icon li:nth-child(3) {
  color: #59A3EC;
  background-color: #fff;
  margin-left: 0.78125vw;
}
@media screen and (max-width: 999px) {
  .supplement .app__icon li:nth-child(3) {
    margin-left: 2.6666666667vw;
  }
}

.back a {
  font-size: 1.171875vw;
  text-align: center;
  width: 39.0625vw;
  padding: 3.125vw 0;
  margin: 23.4375vw auto 0;
  display: block;
  background-color: var(--c-txt);
  color: #fff;
  text-align: center;
  line-height: 1;
  transition: all 0.2s ease;
}
.back a:hover {
  opacity: 0.5;
}
@media screen and (max-width: 999px) {
  .back a {
    font-size: 4vw;
    width: 80%;
    padding: 10.6666666667vw 0;
    margin: 26.6666666667vw auto 0;
    background-color: var(--c-txt);
  }
}

footer {
  font-size: 10px;
  text-align: center;
  background-color: #000;
  padding: 3.90625vw 0;
  color: #fff;
}
@media screen and (max-width: 999px) {
  footer {
    font-size: 2.6666666667vw;
    padding: 13.3333333333vw 0;
  }
}

.lp__head_img {
  position: relative;
}

.lp__head_img:after {
  content: "";
  display: block;
  background-color: #F5F4F2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  -webkit-animation: turn-left 1s forwards;
          animation: turn-left 1s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0.09, 0.08, 0.9);
          animation-timing-function: cubic-bezier(0.6, 0.09, 0.08, 0.9);
}

@-webkit-keyframes turn-left {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@keyframes turn-left {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
/*# sourceMappingURL=style_lp.css.map */