@charset "UTF-8";
/* 変数 */
.lp {
  --s-val: 10px;
  --color-text: #707070;
  --color-txtlink: #707070;
  --color-white: #fff;
  --color-green: #879075;
  --color-beige: #DBC5B5;
}
@media screen and (max-width: 768px) {
  .lp {
    --s-val: 1.35vw;
  }
}

/* =======================
 共通
====================================== */
.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 {
  max-width: calc(var(--s-val) * 75);
  color: var(--color-text);
  margin-inline: auto;
  font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "MS Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--s-val) * 2.8);
  position: relative;
}
.lp::after {
  content: "";
  background-color: #F8F8F8;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.lp .text-en {
  font-family: "Plantagenet Cherokee", "Gadugi", "Noto Sans Cherokee", serif;
}
.lp .main-block {
  padding-block: calc(var(--s-val) * 16.7) calc(var(--s-val) * 21.7);
  --pdinline-main: calc(var(--s-val) * 4);
  padding-inline: var(--pdinline-main);
}

@media screen and (max-width: 768px) {
  .lp {
    max-width: none;
  }
}
.lp .section__title {
  /* section__title共通 ========= */
  text-align: center;
  font-size: calc(var(--s-val) * 7);
  padding-block: calc(var(--s-val) * 1);
  position: relative;
}
.lp .section__title::before {
  content: "";
  background: url(/user_data_sp/pi/img/20240605_skirt/title_triangle.png) no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 4.3);
  height: 100%;
  aspect-ratio: 43/44;
  position: absolute;
  top: 0;
  left: 0;
}
.lp .section__title::after {
  content: "";
  background: url(/user_data_sp/pi/img/20240605_skirt/title_triangle.png) no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 4.3);
  height: 100%;
  aspect-ratio: 43/44;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  right: 0;
}
.lp .style-area {
  /* style-area共通 ========= */
  -webkit-margin-before: calc(var(--s-val) * 17);
          margin-block-start: calc(var(--s-val) * 17);
}
.lp .style-area--white {
  /* style-area--whiteのみ */
  -webkit-margin-before: calc(var(--s-val) * 19.6);
          margin-block-start: calc(var(--s-val) * 19.6);
}
.lp .container {
  /* container共通(ベースは左寄せ) ========= */
  -webkit-margin-before: calc(var(--s-val) * 10);
          margin-block-start: calc(var(--s-val) * 10);
  position: relative;
}
.lp .container::after {
  content: "";
  background: url(/user_data_sp/pi/img/20240605_skirt/black-style01_bg01.png) no-repeat;
  background-size: contain;
  background-position-x: right;
  width: 100%;
  height: 100%;
  position: absolute;
  top: calc(var(--s-val) * 62);
  right: calc(var(--pdinline-main) * -1);
  z-index: -1;
}
.lp .container .item {
  width: calc(var(--s-val) * 50.3);
}
.lp .container .item .heading {
  line-height: calc(var(--s-val) * 5.3);
}
.lp .container .item__image {
  position: relative;
}
.lp .container .item__image .image--circle {
  width: calc(var(--s-val) * 26.1);
  position: absolute;
  bottom: 0;
  right: calc(var(--s-val) * -16.7);
  z-index: 1;
}
.lp .container--right {
  /* 右寄せの場合 ========= */
}
.lp .container--right::after {
  content: "";
  background: url(/user_data_sp/pi/img/20240605_skirt/black-style02_bg01.png) no-repeat;
  background-size: contain;
  background-position-x: left;
  width: 100%;
  height: 100%;
  position: absolute;
  top: calc(var(--s-val) * 60);
  right: auto;
  left: calc(var(--pdinline-main) * -1);
  z-index: -1;
}
.lp .container--right .item {
  margin-inline: auto 0;
}
.lp .container--right .item__image {
  position: relative;
}
.lp .container--right .item__image .image--circle {
  right: auto;
  left: calc(var(--s-val) * -16.7);
}
.lp .btn {
  /* ボタン共通 ========= */
  font-size: calc(var(--s-val) * 4);
  line-height: calc(var(--s-val) * 5.3);
  text-align: center;
}
.lp .btn__link {
  text-decoration: none;
  color: var(--color-txtlink);
  padding-block: calc(var(--s-val) * 0.6) calc(var(--s-val) * 0.5);
}
.lp .btn__link__text {
  display: inline-block;
}
.lp .btn.btn--border {
  width: calc(var(--s-val) * 49);
}
.lp .btn.btn--border .btn__link {
  display: block;
  width: 100%;
  border: calc(var(--s-val) * 0.1) solid var(--color-text);
}
.lp .btn.btn--bg-green {
  width: 100%;
  -webkit-margin-before: calc(var(--s-val) * 7.3);
          margin-block-start: calc(var(--s-val) * 7.3);
}
.lp .btn.btn--bg-green .btn__link {
  display: block;
  background-color: var(--color-green);
  color: var(--color-white);
}
.lp .btn.btn--bg-green .btn__link:visited {
  /* サイトに既定で入っているので解除 */
  color: var(--color-white);
}
.lp .btn.btn--bg-beige {
  width: 100%;
  -webkit-margin-before: calc(var(--s-val) * 7.3);
          margin-block-start: calc(var(--s-val) * 7.3);
}
.lp .btn.btn--bg-beige .btn__link {
  display: block;
  background-color: var(--color-beige);
  color: var(--color-white);
}
.lp .btn.btn--bg-beige .btn__link:visited {
  /* サイトに既定で入っているので解除 */
  color: var(--color-white);
}

/* =======================
 Introduction
====================================== */
.lp .Introduction .image-wrap--flower {
  width: calc(var(--s-val) * 8);
  margin-inline: auto;
}
.lp .Introduction .section__title {
  font-size: calc(var(--s-val) * 3.8);
  -webkit-margin-before: calc(var(--s-val) * 1.5);
          margin-block-start: calc(var(--s-val) * 1.5);
}
.lp .Introduction .text {
  text-align: center;
}
.lp .Introduction .text__body {
  -webkit-margin-before: calc(var(--s-val) * 7.9);
          margin-block-start: calc(var(--s-val) * 7.9);
}
.lp .Introduction .text__body .text__paragraph:not(:nth-of-type(1)) {
  -webkit-margin-before: calc(var(--s-val) * 5.1);
          margin-block-start: calc(var(--s-val) * 5.1);
}
.lp .Introduction .theme-item__wrap {
  --pdblock-abs: calc(var(--s-val) * 2.6);
  -webkit-padding-before: var(--pdblock-abs);
          padding-block-start: var(--pdblock-abs); /* theme-item__heading分 */
  -webkit-margin-before: calc(var(--s-val) * 13.5);
          margin-block-start: calc(var(--s-val) * 13.5);
}
.lp .Introduction .theme-item {
  text-align: center;
  background-color: var(--color-white);
  border-radius: calc(var(--s-val) * 1.9);
  padding: calc(var(--s-val) * 12) calc(var(--s-val) * 4) calc(var(--s-val) * 9.2);
  position: relative;
}
.lp .Introduction .theme-item__heading {
  font-size: calc(var(--s-val) * 3);
  font-weight: bold;
  color: var(--color-white);
  background-color: var(--color-green);
  padding: calc(var(--s-val) * 1.2) calc(var(--s-val) * 1.8) calc(var(--s-val) * 1);
  max-width: calc(var(--s-val) * 35.6);
  width: 100%;
  border-radius: calc(var(--s-val) * 10);
  position: absolute;
  top: calc(var(--pdblock-abs) * -1);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.lp .Introduction .theme-item__product-name {
  font-size: calc(var(--s-val) * 4.9);
}
.lp .Introduction .theme-item .image-wrap {
  -webkit-margin-before: calc(var(--s-val) * 2.2);
          margin-block-start: calc(var(--s-val) * 2.2);
}
.lp .Introduction .theme-item .btn {
  margin-inline: auto;
  -webkit-margin-before: calc(var(--s-val) * 6.6);
          margin-block-start: calc(var(--s-val) * 6.6);
}

/* =======================
各style
====================================== */
.lp {
  /* =======================
  black-style03
  ====================================== */
  /* =======================
  black-style04
  ====================================== */
  /* =======================
  white-style01
  ====================================== */
  /* =======================
  white-style02
  ====================================== */
  /* =======================
  white-style03
  ====================================== */
  /* =======================
  white-style04
  ====================================== */
}
.lp .container--black-style03::after {
  background: url(/user_data_sp/pi/img/20240605_skirt/black-style03_bg01.png) no-repeat;
  background-size: contain;
  background-position-x: right;
}
.lp .container--black-style04::after {
  display: none;
}
.lp .container--white-style01::after {
  background: url(/user_data_sp/pi/img/20240605_skirt/white-style01_bg01.png) no-repeat;
  background-size: contain;
  background-position-x: left;
}
.lp .container--white-style02::after {
  background: url(/user_data_sp/pi/img/20240605_skirt/white-style02_bg01.png) no-repeat;
  background-size: contain;
  background-position-x: right;
}
.lp .container--white-style03::after {
  background: url(/user_data_sp/pi/img/20240605_skirt/white-style03_bg01.png) no-repeat;
  background-size: contain;
  background-position-x: left;
}
.lp .container--white-style04::after {
  display: none;
}

/* =======================
アニメーション
====================================== */
.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;
  }
}
.lp .fade-up-trigger {
  /* fade-up ========= */
  opacity: 0;
}
.lp .fade-up {
  -webkit-animation-name: anime-fade-up;
          animation-name: anime-fade-up;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@-webkit-keyframes anime-fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes anime-fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}