@charset "utf-8";

:root {
  --color1: #e8e3f1;
  --color2: #6e65c3;
  --color3: #c65bc3;
  --color4: #fff;
  --color5: #b4ffe8;
  --fontR: "Gothic MB101 Regular";
  --fontM: "Gothic MB101 Medium";
  --fontDB: "Gothic MB101 DemiBold";
  --fontB: "Gothic MB101 Bold";
}

.fca_cat-hero {
  overflow: visible;
}

.sr_page-shopping-result__free {
  overflow: visible;
}

.catalog_san {
  margin-top: 0 !important;
}

.catalog_san .fca_page-shop-home__keyword {
  margin-top: 0;
}

/* recominner-mt */
.recominner-mt {
  background-color: var(--color1);
  color: var(--color2);
  font-family: var(--fontR);
  font-feature-settings: "palt";
  font-variant-ligatures: no-common-ligatures;
  line-height: 1;
  letter-spacing: 0.05em;
  margin: 0 calc(50% - 50vw);
  margin-bottom: 1px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  position: relative;
  width: 100vw;
}

.recominner-mt * {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.recominner-mt a {
  text-decoration: none;
}

.recominner-mt img {
  height: auto;
  width: 100%;
}

.recominner-inner_mt {
  display: flex;
  max-width: 1218px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* recominner-side_mt */
.recominner-side_mt {
  padding-top: 300px;
  max-width: 220px;
  min-width: 215px;
  width: 100%;
}

.recominner-index_mt {
  padding-bottom: 100px;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.recominner-index__title_mt {
  max-width: 111px;
  margin-left: auto;
  margin-right: auto;
}

.recominner-index__list_mt {
  background-color: var(--color4);
  border-radius: 0 0 25px 0;
  margin-top: 35px;
  padding-top: 8px;
  padding-left: 13.636%;
  padding-right: 13.636%;
  padding-bottom: 40px;
}

.recominner-index__item__text_mt {
  border-bottom: 1px solid var(--color2);
  font-family: var(--fontM);
  font-size: 14px;
  margin-top: 22px;
  padding-bottom: 12px;
}

.recominner-index__child_mt {
  border-bottom: 1px solid var(--color2);
  font-size: 13px;
  line-height: 1.64;
  padding-top: 4px;
  padding-bottom: 4px;
}

.recominner-index__link_mt {
  color: var(--color2);
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.recominner-index__link_mt::before,
.recominner-index__link_mt::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 9px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--color2);
  transform-origin: calc(100% - 1px) 50%;
}

.recominner-index__link_mt::before {
  transform: rotate(53.15deg);
}

.recominner-index__link_mt::after {
  transform: rotate(-53.15deg);
}

.recominner-index__link_mt:hover {
  color: var(--color2);
}
/* recominner-body_mt */
.recominner-body_mt {
  max-width: 585px;
  margin-left: 7.635%;
  margin-right: auto;
  position: relative;
}

/* recominner-header_mt */
.recominner-header_mt {
  padding-top: 70px;
}

.recominner-header__cap_mt {
  display: flex;
  margin-top: 45px;
  margin-left: auto;
  margin-right: auto;
  width: 77.607%;
}

.recominner-header__copy_mt {
  font-family: var(--fontDB);
  font-size: clamp(14px, 1.72vw, 21px);
  font-feature-settings: initial;
  margin-left: 0;
  margin-right: 65px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.recominner-header__text_mt {
  font-size: clamp(11px, 1.72vw, 16px);
  line-height: 1.8;
  text-align: justify;
}

/* recominner-data_mt */
.recominner-data_mt {
  margin-top: 52px;
  padding-top: 46px;
  padding-bottom: 70px;
  position: relative;
  z-index: 1;
}

.recominner-data_mt::before,
.recominner-data_mt::after {
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 80.342%;
}

.recominner-data_mt::before {
  background-color: var(--color2);
  height: 2px;
  z-index: -1;
}

.recominner-data_mt::after {
  background-color: var(--color4);
  border-radius: 0 0 238px 238px;
  height: 100%;
  z-index: -2;
}

.recominner-data__item_mt.data__item__01_mt {
  margin-left: 16.41%;
  width: 77.265%;
}

.recominner-data__item_mt.data__item__02_mt {
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  width: 65.812%;
}

.recominner-data__comment_mt {
  color: var(--color4);
  font-size: clamp(12px, 1.47vw, 18px);
  margin-top: 38px;
  margin-left: 16.41%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.recominner-data__comment__bg_mt {
  background-color: var(--color3);
  display: block;
  margin-top: 0.28em;
  padding-top: 0.28em;
  padding-left: 0.38em;
  padding-right: 0.38em;
  padding-bottom: 0.28em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.recominner-data__text_mt {
  font-size: clamp(11px, 1.72vw, 16px);
  line-height: 1.5;
  text-align: center;
  margin-top: 25px;
}

/* recominner-item_mt */
.recominner-item_mt {
  margin-top: 70px;
}

.recominner-item_mt:first-child {
  margin-top: 48px;
}

.recominner-item__title_mt {
  font-size: clamp(13px, 1.64vw, 20px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  position: relative;
  text-align: center;
  width: 81.709%;
}

.recominner-item__title_mt::before,
.recominner-item__title_mt::after {
  background-image: url(../images/title-deco.svg);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 33.473%;
}

.recominner-item__title_mt::before {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}

.recominner-item__title_mt::after {
  right: 0;
}

.recominner-item__img_mt {
  margin-top: 35px;
}

.recominner-item__comment_mt {
  align-items: center;
  display: flex;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 92.256%;
}

.recominner-item_mt:first-child .recominner-item__comment_mt {
  margin-top: 0;
}

.recominner-item_mt:nth-child(even) .recominner-item__comment_mt {
  flex-direction: row-reverse;
}

.recominner-item__comment__icon_mt {
  width: 25.378%;
}

.recominner-item__comment__icon_mt img {
  border-radius: 50%;
}

.recominner-item__comment__text_mt {
  color: var(--color3);
  font-size: clamp(12px, 1.47vw, 18px);
  line-height: 1.7;
}

.recominner-item__btn__link_mt {
  align-items: center;
  background-color: var(--color3);
  border-radius: 50px;
  color: var(--color4);
  display: flex;
  font-family: var(--fontB);
  font-size: clamp(14px, 1.8vw, 22px);
  justify-content: center;
  max-width: 430px;
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  height: 4.545em;
  position: relative;
  text-align: center;
  width: 100%;
}

.recominner-item__btn__link_mt:hover {
  color: var(--color4);
}

.recominner-item__btn__link_mt::before,
.recominner-item__btn__link_mt::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 1.45em;
  width: 13.2px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--color4);
  transform-origin: calc(100% - 1px) 50%;
}

.recominner-item__btn__link_mt::before {
  transform: rotate(49.4deg);
}

.recominner-item__btn__link_mt::after {
  transform: rotate(-49.4deg);
}

/* recominner-others_mt */
.recominner-others_mt {
  margin-top: 80px;
}

.recominner-others__title_mt {
  background-color: var(--color2);
  border-radius: 26px 26px 0 0;
  color: var(--color4);
  font-family: var(--fontM);
  font-size: clamp(21px, 2.62vw, 32px);
  margin-left: auto;
  margin-right: auto;
  max-width: 280px;
  padding-top: 1.19em;
  text-align: center;
}

.recominner-others__body_mt {
  background-color: var(--color2);
  padding-bottom: 104px;
}

.recominner-other__item_mt {
  padding-top: 70px;
}

.recominner-other__subtitle_mt {
  color: var(--color4);
  font-family: var(--fontM);
  font-size: clamp(19px, 2.38vw, 29px);
  letter-spacing: 0.08em;
  text-align: center;
}

.recominner-other__text_mt {
  color: var(--color4);
  font-size: clamp(12px, 1.47vw, 18px);
  margin-top: 24px;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.77;
}

.recominner-other__img_mt {
  margin-top: 56px;
}

.recominner-other__cap_mt {
  color: var(--color5);
  font-family: var(--fontM);
  font-size: clamp(14px, 1.8vw, 22px);
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.recominner-other__cap_mt::before,
.recominner-other__cap_mt::after {
  background-color: var(--color5);
  content: "";
  height: 1.23em;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 1px;
}

.recominner-other__cap_mt::before {
  left: -1.36em;
  transform: translateY(-50%) rotate(-19deg);
}

.recominner-other__cap_mt::after {
  right: -1.36em;
  transform: translateY(-50%) rotate(19deg);
}

.recominner-others_mt .recominner-item__btn__link_mt {
  background-color: var(--color4);
  color: var(--color2);
  margin-top: 20px;
}

.recominner-other__02_mt .recominner-item__btn__link_mt {
  margin-top: 52px;
}

.recominner-others_mt .recominner-item__btn__link_mt::before,
.recominner-others_mt .recominner-item__btn__link_mt::after {
  background-color: var(--color2);
}

/* recominner-check_mt */
.recominner-check_mt {
  padding-top: 76px;
  padding-bottom: 66px;
}

.recominner-check__img_mt {
  max-width: 351px;
  margin-left: auto;
  margin-right: auto;
}

.sp {
  display: none;
}

@media not all and (min-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .recominner-mt {
    padding-left: 0;
    padding-right: 0;
  }

  .recominner-inner_mt {
    display: block;
  }

  /* recominner-side_mt */
  .recominner-side_mt {
    display: none;
  }

  /* recominner-body_mt */
  .recominner-body_mt {
    max-width: none;
    margin-left: 0;
    width: 100%;
  }

  /* recominner-header_mt */
  .recominner-header_mt {
    padding-top: 43px;
  }

  .recominner-header__cap_mt {
    margin-top: 30px;
  }

  .recominner-header__copy_mt {
    font-size: 14px;
    margin-right: 44px;
  }

  .recominner-header__text_mt {
    font-size: 11px;
  }

  /* recominner-data_mt */
  .recominner-data_mt {
    margin-top: 33px;
    padding-top: 31px;
    padding-bottom: 46px;
  }

  .recominner-data__item_mt.data__item__02_mt {
    margin-top: 11px;
  }

  .recominner-data__comment_mt {
    font-size: 12px;
    margin-top: 24px;
  }

  .recominner-data__text_mt {
    font-size: 11px;
    margin-top: 19px;
  }

  /* recominner-item_mt */
  .recominner-item_mt {
    margin-top: 46px;
  }

  .recominner-item_mt:first-child {
    margin-top: 32px;
  }

  .recominner-item__title_mt {
    font-size: 13px;
  }

  .recominner-item__img_mt {
    margin-top: 15px;
  }

  .recominner-item__comment_mt {
    margin-top: 22px;
    justify-content: center;
  }

  .recominner-item__comment__icon_mt {
    width: 25.378%;
  }

  .recominner-item__comment__text_mt {
    font-size: 12px;
  }

  .recominner-item__btn__link_mt {
    font-size: 14px;
    max-width: 275px;
    margin-top: 14px;
  }

  .recominner-item__btn__link_mt::before,
  .recominner-item__btn__link_mt::after {
    width: 9.1px;
    height: 2px;
  }

  /* recominner-others_mt */
  .recominner-others_mt {
    margin-top: 52px;
  }

  .recominner-others__title_mt {
    font-size: 21px;
    max-width: 180px;
  }

  .recominner-others__body_mt {
    padding-bottom: 66px;
  }

  .recominner-other__item_mt {
    padding-top: 45px;
  }

  .recominner-other__subtitle_mt {
    font-size: 19px;
  }

  .recominner-other__text_mt {
    font-size: 12px;
    margin-top: 15px;
  }

  .recominner-other__img_mt {
    margin-top: 32px;
  }

  .recominner-other__cap_mt {
    font-size: 14px;
    margin-top: 23px;
  }

  .recominner-others_mt .recominner-item__btn__link_mt {
    margin-top: 14px;
  }

  .recominner-other__02_mt .recominner-item__btn__link_mt {
    margin-top: 34px;
  }

  /* recominner-check_mt */
  .recominner-check_mt {
    padding-top: 50px;
    padding-bottom: 42px;
  }

  .recominner-check__img_mt {
    max-width: 225px;
  }
}