@charset "UTF-8";
/* 変数 */
body {
  --s-val: 10px;
  --color-text: #707070;
  --color-txttitle: #758D93;
  --color-txtlink: #758D93;
  --color-white: #fff;
  --color-lpbg: #FAFAFA;
}
@media screen and (max-width: 749px) {
  body {
    --s-val: 1.34vw;
  }
}

/* =======================
 共通
====================================== */
.lp .image {
  width: 100%;
  display: block;
}
.lp .image.text-image {
  display: inline;
}
.lp a:hover {
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.lp a:visited {
  /* サイトに既定で入っているので解除 */
  color: var(--color-txtlink);
}
.lp .bg-white {
  background-color: var(--color-white);
}

.lp {
  max-width: calc(var(--s-val) * 75);
  color: var(--color-text);
  margin-inline: auto;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Arial", "Meiryo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--s-val) * 2.4);
  -webkit-padding-after: calc(var(--s-val) * 14.4);
          padding-block-end: calc(var(--s-val) * 14.4);
  position: relative;
}
.lp::after {
  content: "";
  background-color: var(--color-lpbg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

@media screen and (max-width: 749px) {
  .lp {
    max-width: none;
  }
}
.lp .item {
  -webkit-margin-before: calc(var(--s-val) * 20.4);
          margin-block-start: calc(var(--s-val) * 20.4);
}

.lp .slide {
  /* slide全共通 ========= */
}
.lp .slide .slick-dots {
  /* dots3つベース ========= */
  bottom: calc(var(--s-val) * 1.5);
  left: calc(var(--s-val) * 2.2);
  width: calc(var(--s-val) * 8);
}
.lp .slide .slick-dotted.slick-slider {
  margin-bottom: 0;
}
.lp .slide .slick-dots li {
  margin: calc(var(--s-val) * 0.2);
}
.lp .slide .slick-dots li button:before {
  font-size: calc(var(--s-val) * 1.3);
  opacity: 1;
  color: #fff;
}
.lp .slide .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #E7E3F5;
}
.lp .slide.slide--2dots {
  /* dots2つ ========= */
}
.lp .slide.slide--2dots .slick-dots {
  bottom: calc(var(--s-val) * 1.2);
  left: calc(var(--s-val) * 2.2);
  width: calc(var(--s-val) * 5);
}
@media screen and (max-width: 749px) {
  .lp .slide .slick-dots {
    bottom: calc(var(--s-val) * 2.1);
    left: calc(var(--s-val) * 2.1);
  }
  .lp .slide .slick-dots li {
    width: calc(var(--s-val) * 2.2);
    height: calc(var(--s-val) * 2.2);
  }
  .lp .slide.slide--2dots {
    /* dots2つ ========= */
  }
  .lp .slide.slide--2dots .slick-dots {
    bottom: calc(var(--s-val) * 1.8);
    left: calc(var(--s-val) * 1);
    width: calc(var(--s-val) * 6);
  }
}
.lp .item {
  /* itemテキスト共通(ベースは左寄せ) ========= */
}
.lp .item .text {
  -webkit-margin-before: calc(var(--s-val) * 7);
          margin-block-start: calc(var(--s-val) * 7);
  margin-inline: calc(var(--s-val) * 4.2);
}
.lp .item .text__title {
  font-size: calc(var(--s-val) * 3.4);
  line-height: calc(var(--s-val) * 5.5);
  color: var(--color-txttitle);
}
.lp .item .text__body {
  line-height: calc(var(--s-val) * 5);
  -webkit-margin-before: calc(var(--s-val) * 2.1);
          margin-block-start: calc(var(--s-val) * 2.1);
}
.lp .item .text .btn--product {
  font-size: calc(var(--s-val) * 2.6);
  -webkit-margin-before: calc(var(--s-val) * 3.4);
          margin-block-start: calc(var(--s-val) * 3.4);
}
.lp .item .text .btn--product__link__inner {
  display: inline-block;
  position: relative;
}
.lp .item .text .btn--product__link__inner::after {
  content: "";
  width: 100%;
  height: calc(var(--s-val) * 0.1);
  background-color: var(--color-txtlink);
  position: absolute;
  bottom: 0;
  left: 0;
}
.lp .item .text_center {
  /* text_center ========= */
  margin-inline: calc(var(--s-val) * 8);
  text-align: center;
}
.lp .item .text_center .text {
  margin-inline: 0;
}
.lp .item .text_center .btn--category {
  margin: calc(var(--s-val) * 3.9) auto 0;
}
.lp .item .text_right {
  /* text_right ========= */
  text-align: right;
}
.lp .btn {
  /* ボタン全共通 ========= */
}
.lp .btn__link {
  text-decoration: none;
  color: var(--color-txtlink);
}
.lp .btn--category {
  /* see itemsボタン(ベースは左寄せ) ========= */
  margin: calc(var(--s-val) * 3) calc(var(--s-val) * 4.2) 0;
}
.lp .btn--category .image {
  width: calc(var(--s-val) * 12);
}
.lp .btn--category.btn--category_right {
  /* ボタン右寄せ ========= */
  margin: calc(var(--s-val) * 8.8) calc(var(--s-val) * 3.9) 0 0;
  text-align: right;
}
@media screen and (max-width: 428px) {
  .lp .btn--category .image {
    width: calc(var(--s-val) * 13);
  }
}

/* =======================
各ブロック 
====================================== */
.lp .item01 {
  /* item01 ========= */
}
.lp .item01 .item-image__all-wrap {
  position: relative;
}
.lp .item01 .item-image__all-wrap .image_wrap--item-image01 {
  width: calc(var(--s-val) * 63.2);
  position: absolute;
  top: calc(var(--s-val) * 14.6);
  right: 0;
}
.lp .item01 .item-image__all-wrap .slide {
  position: absolute;
  bottom: 0;
  left: calc(var(--s-val) * 4);
}
.lp .item01 .item-image__all-wrap .js_slide {
  width: calc(var(--s-val) * 43);
  border: calc(var(--s-val) * 1) solid var(--color-white);
}
.lp .item01 .slick-dots li.slick-active button:before {
  color: #F9F0F5;
}
.lp .item02 {
  /* item02 ========= */
  -webkit-margin-before: calc(var(--s-val) * 23.7);
          margin-block-start: calc(var(--s-val) * 23.7);
}
.lp .item02 .item-image__all-wrap {
  position: relative;
}
.lp .item02 .item-image__all-wrap .image_wrap--item-image01 {
  position: absolute;
  top: calc(var(--s-val) * 6.9);
  left: 0;
}
.lp .item02 .item-image__all-wrap .image_wrap--item-flex {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lp .item02 .item-image__all-wrap .image_wrap--item-flex .image {
  width: calc(var(--s-val) * 35.2);
}
.lp .item03 {
  /* item03 ========= */
}
.lp .item03 .item-image__all-wrap {
  position: relative;
}
.lp .item03 .item-image__all-wrap .slide {
  position: absolute;
  top: 0;
  left: calc(var(--s-val) * 4);
  border: calc(var(--s-val) * 1) solid var(--color-white);
  border-top-right-radius: calc(var(--s-val) * 3);
  overflow: hidden;
}
.lp .item03 .item-image__all-wrap .js_slide {
  width: calc(var(--s-val) * 56.2);
}
.lp .item03 .item-image__all-wrap .text__title {
  position: absolute;
  bottom: 0;
  left: calc(var(--s-val) * 4.2);
}
.lp .item03 .text {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.lp .item04 {
  /* item04 ========= */
}
.lp .item04 .item-image__all-wrap {
  position: relative;
}
.lp .item04 .item-image__all-wrap .image_wrap--item-image01 {
  width: calc(var(--s-val) * 46.1);
  position: absolute;
  top: 0;
  left: calc(var(--s-val) * 4);
}
.lp .item04 .item-image__all-wrap .slide {
  position: absolute;
  bottom: 0;
  right: calc(var(--s-val) * 4);
}
.lp .item04 .item-image__all-wrap .js_slide {
  width: calc(var(--s-val) * 43);
  border: calc(var(--s-val) * 1) solid var(--color-white);
}
.lp .item04 .slick-dots li.slick-active button:before {
  color: #EFDBCF;
}
.lp .item05 {
  /* item05 ========= */
}
.lp .item05 .item-image__all-wrap {
  position: relative;
}
.lp .item05 .item-image__all-wrap .image_wrap--text_bg {
  position: absolute;
  top: 0;
  left: 0;
}
.lp .item05 .item-image__all-wrap .slide_wrap {
  -webkit-padding-before: calc(var(--s-val) * 15.2);
          padding-block-start: calc(var(--s-val) * 15.2);
}
.lp .item05 .item-image__all-wrap .slide__image_wrap {
  margin-inline: calc(var(--s-val) * 1.5);
}
.lp .item05 .text {
  -webkit-margin-before: calc(var(--s-val) * 5);
          margin-block-start: calc(var(--s-val) * 5);
}

/* =======================
アニメーション
====================================== */
.lp .fade-in-trigger {
  /* fadein ========= */
  opacity: 0;
}
.lp .fade-in {
  -webkit-animation-name: anime-fade-in;
          animation-name: anime-fade-in;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@-webkit-keyframes anime-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes anime-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}