@charset "utf-8";

:root {
  --color: #5a3226;
  --color01: #cfdcec;
  --color02: #b25e56;
  --color03: #a32342;
  --color04: #002c5a;
  --color05: #874132;
  --color06: rgba(90, 50, 38, 0.8);
  --color07: #fae9e9;
  --color08: #e96081;
  --color09: rgba(135, 65, 50, 0.1);
  --fontCPB: "Cacts Pro Bold", "YourWebFont", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", "Noto Sans JP", sans-serif;
  --fontYG: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
  --content-width: 100vw;
  --cqw: 1vw;
}

.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;
}

/* trial_ch */
.trial_ch {
  color: var(--color);
  font-family: var(--fontYG);
  font-feature-settings: "palt";
  font-variant-ligatures: no-common-ligatures;
  line-height: 1;
  letter-spacing: 0.1em;
  margin: 0 calc(50% - 50vw);
  margin-bottom: 1px;
  position: relative;
}

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

.trial_ch a {
  text-decoration: none;
}

.trial_ch ul {
  padding-left: 0;
}

.trial_ch p {
  margin-top: 0;
  margin-bottom: 0;
}

.trial_ch img {
  height: auto;
  width: 100%;
}

body.lock {
  overflow: hidden;
}

.trial-body__wrap_ch {
  background-color: var(--color01);
  position: relative;
}

.trial-body__wrap_ch::before {
  background-color: var(--color02);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 6.354%;
}

.trial-body_ch {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;
  position: relative;
}

/* -----------------------------
  side-left
------------------------------*/
/* trial-logo__wrap_ch */
.trial-logo__wrap_ch {
  min-width: 0;
  position: relative;
  width: 34.895%;
}

.trial-logo_ch {
  margin-top: 13.432%;
  margin-left: 62.388%;
  max-width: 84px;
  position: absolute;
  top: 0;
  left: 0;
  width: 12.537%;
}

.trial-side-pics_ch {
  max-width: 330px;
  margin-top: 70.895%;
  margin-left: 10.746%;
  padding-bottom: 100px;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 475px;
  width: 49.253%;
}

/* -----------------------------
  main
------------------------------*/
/* trial-main_ch */
.trial-main_ch {
  background-color: #fff;
  max-width: 580px;
  min-width: 375px;
  width: 30.208%;
}

/* trial-about_ch */
.trial-about_ch {
  margin-top: 9.44%;
}

.trial-about_ch .trial-about__text_ch {
  font-size: clamp(14px, calc(var(--cqw) * 3.75), 28px);
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
}

.trial-about__img_ch {
  margin-top: 5.866%;
  margin-left: auto;
  margin-right: auto;
  width: 82.666%;
}

/* trial-detail_ch */
.trial-detail_ch {
  margin-top: 21.333%;
}

#trial-detail__01_ch.trial-detail_ch {
  margin-top: 9.6%;
}

.trial-detail__items_ch {
  position: relative;
}

p.trial-detail__copy_ch {
  font-size: clamp(14px, calc(var(--cqw) * 3.75), 28px);
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 4.8%;
}

.trial-detail__name_ch {
  color: var(--color05);
  font-size: clamp(19px, calc(var(--cqw) * 5.06), 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 5.33%;
  padding-top: 4.26%;
  text-align: center;
  position: relative;
}

.trial-detail__name_ch::before {
  border-top: 1px solid var(--color05);
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 36%;
}

.trial-detail__name_ch span {
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
}

.trial-detail__price_ch {
  color: var(--color05);
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}

.trial-detail__price__num_ch {
  font-family: var(--fontCPB);
  font-size: clamp(16px, calc(var(--cqw) * 4.26), 32px);
  font-weight: 700;
}

.trial-detail__price__tax_ch {
  font-family: var(--fontCPB);
}

.trial-detail__banner_ch {
  margin-top: 4%;
  margin-left: auto;
  margin-right: auto;
  width: 78.933%;
}

.trial-detail__btn_ch {
  margin-top: 5.333%;
}

.trial-detail__link_ch {
  background-color: var(--color06);
  color: #fff;
  display: block;
  font-size: clamp(15px, calc(var(--cqw) * 4), 30px);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5.333%;
  padding-bottom: 5.333%;
  position: relative;
  text-align: center;
  transition: opacity 0.3s;
  width: 73.066%;
}

.trial-detail__link_ch:hover {
  color: #fff;
  opacity: 0.7;
}

.trial-detail__link_ch::after {
  background-color: #fff;
  content: "";
  -webkit-mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.385 13.103"><path d="M6,11.382,9.334,5.865,6,.348,6.576,0l3.538,5.865L6.576,11.73Zm-6,0L3.334,5.865,0,.348.576,0,4.114,5.865.576,11.73Z" transform="translate(0.687 0.687)" fill="%23fff" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></svg>');
  mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.385 13.103"><path d="M6,11.382,9.334,5.865,6,.348,6.576,0l3.538,5.865L6.576,11.73Zm-6,0L3.334,5.865,0,.348.576,0,4.114,5.865.576,11.73Z" transform="translate(0.687 0.687)" fill="%23fff" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: absolute;
  top: 50%;
  right: 5.839%;
  transform: translateY(-50%);
  height: 1em;
  width: 1em;
}

/* trial-detail__01_ch */
#trial-detail__01_ch .trial-detail__name_ch::before {
  border-top: 1px solid var(--color03);
}

#trial-detail__01_ch .trial-detail__name_ch {
  color: var(--color03);
}

#trial-detail__01_ch .trial-detail__price_ch {
  color: var(--color03);
}

#trial-detail__01_ch .trial-detail__link_ch {
  background-color: var(--color03);
}

/* trial-detail__02_ch */
#trial-detail__02_ch .trial-detail__name_ch::before {
  border-top: 1px solid var(--color04);
}

#trial-detail__02_ch .trial-detail__name_ch {
  color: var(--color04);
}

#trial-detail__02_ch .trial-detail__price_ch {
  color: var(--color04);
}

#trial-detail__02_ch .trial-detail__link_ch {
  background-color: var(--color04);
}

/* trial-detail__03_ch */
#trial-detail__03_ch .trial-detail__name_ch {
  padding-top: 0;
}

#trial-detail__03_ch .trial-detail__name_ch::before {
  display: none;
}

/* trial-info_ch */
.trial-info_ch {
  border-top: 1px solid var(--color);
  border-bottom: 1px solid var(--color);
  margin-top: 13.333%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 13.333%;
  padding-top: 5.333%;
  padding-bottom: 5.333%;
  width: 78.933%;
}

.trial-info__item_ch:not(:first-child) {
  margin-top: 5.743%;
}

.trial-info__title_ch {
  color: var(--color);
  font-size: clamp(16px, calc(var(--cqw) * 4.26), 32px);
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.trial-info__title_ch::after {
  background-image: url(../images/line.svg);
  background-repeat: repeat-x;
  background-size: cover;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
}

dd.trial-info__text_ch {
  font-size: clamp(19px, calc(var(--cqw) * 5.06), 38px);
  font-weight: 700;
  text-align: center;
  line-height: 1.36;
  letter-spacing: 0.05em;
  margin-top: 2.027%;
}

.trial-info__note_ch {
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* trial-bonus_ch */
.trial-bonus_ch {
  background-color: var(--color07);
  padding-top: 5.866%;
}

.trial-bonus__title_ch {
  font-size: clamp(20px, calc(var(--cqw) * 5.33), 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.trial-bonus__title_ch::before,
.trial-bonus__title_ch::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
}

.trial-bonus__title_ch::before {
  border-left: 1px solid var(--color);
  left: 0;
}

.trial-bonus__title_ch::after {
  border-right: 1px solid var(--color);
  right: 0;
}

.trial-bonus__item_ch {
  background-color: #fff;
  margin-top: 5.333%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 7.466%;
  width: 89.333%;
}

.trial-bonus__num_ch {
  margin-left: auto;
  margin-right: auto;
  width: 16.716%;
}

.trial-bonus__item__title_ch {
  color: var(--color08);
  font-size: clamp(20px, calc(var(--cqw) * 5.33), 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  padding-top: 1.492%;
}

.trial-bonus__item__title_ch span {
  font-size: clamp(14px, calc(var(--cqw) * 3.7), 28px);
}

.trial-bonus__text_ch {
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  padding-top: 1.492%;
}

.trial-bonus__img_ch {
  margin-left: auto;
  margin-right: auto;
  width: 74.626%;
}

.trial-bonus__img_ch figcaption {
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.trial-bonus__img_ch img {
  display: block;
  margin-top: 5.6%;
  margin-left: auto;
  margin-right: auto;
  width: 84%;
}

.trial-bonus__btn_ch {
  margin-top: 4.179%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 80.597%;
}

a.trial-bonus__btn__link_ch {
  background-color: var(--color09);
  color: var(--color);
  display: block;
  font-size: clamp(14px, calc(var(--cqw) * 3.7), 28px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.42;
  padding-top: 5.333%;
  padding-bottom: 5.333%;
  position: relative;
  text-decoration: underline;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%;
}

.trial-bonus__btn__note_ch {
  color: var(--color08);
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 700;
  letter-spacing: 0.1em;
  position: absolute;
  transform: rotate(-8deg);
  transform-origin: right center;
  top: -26.833%;
  left: -7.407%;
  width: 7.15em;
}

#trial-bonus__item__02_ch a.trial-bonus__btn__link_ch {
  text-decoration: none;
  pointer-events: none;
}

/* trial-buyer_ch */
.trial-buyer_ch {
  background-color: var(--color07);
  padding-top: 7.2%;
  padding-bottom: 12.266%;
}

.trial-buyer__profile_ch {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  width: 89.333%;
}

.trial-buyer__img_ch {
  width: 22.089%;
}

.trial-buyer__name_ch {
  border-bottom: 1px solid var(--color);
  font-size: clamp(16px, calc(var(--cqw) * 4.26), 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 11.044%;
  padding-bottom: 4.179%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 71.044%;
}

p.trial-buyer__detail_ch {
  display: block;
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-top: 2.133%;
  margin-left: auto;
  margin-right: auto;
  width: 89.333%;
}

/* trial-precautions_ch */
.trial-precautions_ch {
  margin-top: 12.8%;
  margin-bottom: 12%;
}

.trial-precautions__title_ch {
  font-size: clamp(20px, calc(var(--cqw) * 5.33), 40px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.trial-precautions__subtitle_ch {
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  padding-top: 6.133%;
}

.trial-precautions__text_ch {
  display: block;
  font-size: clamp(13px, calc(var(--cqw) * 3.46), 26px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-left: auto;
  margin-right: auto;
  width: 89.333%;
}

/* -----------------------------
  side-rigth
------------------------------*/
/* trial-subtitle__wrap_ch */
.trial-subtitle__wrap_ch {
  position: relative;
  width: 34.895%;
}

.trial-subtitle_ch {
  max-width: 508px;
  margin-top: 19.402%;
  margin-left: 15.82%;
  width: 75.82%;
}

.trial-index_ch {
  max-width: 560px;
  margin-top: 22.686%;
  margin-left: auto;
  min-width: 200px;
  padding-left: 10px;
  padding-bottom: 100px;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 155px;
  width: 85.074%;
}

.trial-index__items_ch {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.trial-index__item_ch {
  margin-top: 4.107%;
  margin-left: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.trial-index__link_ch {
  display: block;
  color: var(--color);
  font-size: clamp(10px, 0.937vw, 18px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.05em;
  padding-right: 1.55em;
  position: relative;
}

.trial-index__link_ch:hover {
  color: var(--color02);
}

.trial-index__link_ch::before {
  background-color: var(--color);
  -webkit-mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.706 20.707"><path d="M0,13.353l.707-.707,6.646,6.646L14,12.646l.707.707L7.352,20.707Zm6.853,1.853V0h1V15.206Z" fill="%23fff"/></svg>');
  mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.706 20.707"><path d="M0,13.353l.707-.707,6.646,6.646L14,12.646l.707.707L7.352,20.707Zm6.853,1.853V0h1V15.206Z" fill="%23fff"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 1.11em;
  width: 0.77em;
}

.trial-index__link_ch:hover::before {
  background-color: var(--color02);
}

/* fade-in */
.fade-in_ch {
  opacity: 0;
  transform: translateY(100px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.fade-in_ch.active {
  opacity: 1;
  transform: translateY(0);
}

.sp {
  display: none;
}

/* ----------------------------------
  sp
---------------------------------- */

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

  .sp {
    display: block;
  }

  /* trial_ch */
  .trial_ch {
    overflow: hidden;
  }

  .trial-body__wrap_ch {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
  }

  .trial-body_ch {
    display: block;
    max-width: none;
  }

  /* trial-logo__wrap_ch */
  .trial-logo__wrap_ch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }

  .trial-logo_ch {
    max-width: none;
    position: relative;
    margin-top: 0;
    margin-left: 0;
    top: auto;
    left: auto;
    width: 100%;
  }

  /* trial-main_ch */
  .trial-main_ch {
    max-width: none;
    width: 100%;
  }

  .trial-about_ch .trial-about__text_ch {
    font-size: clamp(14px, 3.73vw, 28px);
  }

  p.trial-detail__copy_ch {
    font-size: clamp(14px, 3.73vw, 28px);
  }

  .trial-detail__name_ch {
    font-size: clamp(19px, 5.06vw, 38px);
  }

  .trial-detail__name_ch span {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-detail__price_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-detail__price__num_ch {
    font-size: clamp(16px, 4.26vw, 32px);
  }

  .trial-detail__link_ch {
    font-size: clamp(15px, 4vw, 30px);
  }

  .trial-info__title_ch {
    font-size: clamp(16px, 4.26vw, 32px);
  }

  dd.trial-info__text_ch {
    font-size: clamp(19px, 5.06vw, 38px);
  }

  .trial-info__note_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-bonus__title_ch {
    font-size: clamp(20px, 5.33vw, 40px);
  }

  .trial-bonus__item__title_ch {
    font-size: clamp(20px, 5.33vw, 40px);
  }

  .trial-bonus__item__title_ch span {
    font-size: clamp(14px, 3.73vw, 28px);
  }

  .trial-bonus__text_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-bonus__img_ch figcaption {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  a.trial-bonus__btn__link_ch {
    font-size: clamp(14px, 3.73vw, 28px);
  }

  .trial-bonus__btn__note_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-buyer__name_ch {
    font-size: clamp(16px, 4.26vw, 32px);
  }

  p.trial-buyer__detail_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-precautions__title_ch {
    font-size: clamp(20px, 5.33vw, 40px);
  }

  .trial-precautions__subtitle_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  .trial-precautions__text_ch {
    font-size: clamp(13px, 3.46vw, 26px);
  }

  /* trial-menu_ch */
  .trial-menu_ch {
    background-color: var(--color01);
    padding-top: 4%;
    padding-bottom: 4%;
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: opacity 0.5s ease;
    opacity: 0;
    width: 100%;
    z-index: -1;
  }

  .trial-menu_ch.is-fixed {
    pointer-events: auto;
    position: fixed;
    bottom: 0;
    opacity: 1;
    z-index: 9;
  }

  .trial-menu__list_ch {
    display: flex;
    justify-content: center;
  }

  .trial-menu__item_ch a {
    display: block;
    color: var(--color);
    font-size: clamp(14px, 3.73vw, 28px);
    font-weight: 500;
    letter-spacing: 0.1em;
    padding-right: 1em;
    position: relative;
  }

  .trial-menu__item_ch:not(:last-child) a {
    margin-right: 2em;
  }

  .trial-menu__item_ch:nth-child(1) a {
    color: var(--color03);
  }

  .trial-menu__item_ch:nth-child(2) a {
    color: var(--color04);
  }

  .trial-menu__item_ch a::before,
  .trial-menu__item_ch a::after {
    border-radius: 9999px;
    background-color: var(--color);
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 0.6em;
    transform: translateY(-50%);
    transform-origin: 50% 0.5px;
    width: 1px;
  }

  .trial-menu__item_ch a::before {
    transform: translateY(-50%) rotate(47.75deg);
  }

  .trial-menu__item_ch a::after {
    transform: translateY(-50%) rotate(-47.75deg);
  }

  .trial-menu__item_ch:nth-child(1) a::before,
  .trial-menu__item_ch:nth-child(1) a::after {
    background-color: var(--color03);
  }

  .trial-menu__item_ch:nth-child(2) a::before,
  .trial-menu__item_ch:nth-child(2) a::after {
    background-color: var(--color04);
  }
}