@charset "UTF-8";
/* Start reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  font-size: 62.5%;
}

/* Body defaults */
body {
  line-height: 1;
}

/* Lists */
ol, ul {
  list-style: none;
}

/* Blockquotes & quotes */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

/* Tables */
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Reset form elements */
button,
input,
optgroup,
select,
textarea {
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

button.clickOnAddToCartContentAsset.cta-btn-image-505251691200 {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
    height: 202px;
    background: url('../img/cta01_btn.png') no-repeat center center / cover;
    border: none;
    cursor: pointer;
    text-indent: -9999px;
    padding: 0 !important;!i;!;
    margin: 0;
    border-radius: 0;
    box-shadow: unset;
    margin-top: 20px;
    transition: all 0.3s ease;
}
button.clickOnAddToCartContentAsset.cta-btn-image-505251691200:hover {
  background: url('../img/cta01_btn.png') no-repeat center center / cover;
  filter: brightness(1.2);
}
@media screen and (max-width: 767px) {
  button.clickOnAddToCartContentAsset.cta-btn-image-505251691200 {
    height: calc(202 / 750 * 100vw);
    margin-top: calc(20 / 750 * 100vw);
  }
}
.product-detail {
  width: 100%;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/* Links */
a {
  text-decoration: none;
  color: inherit;
}

/* Images */
img {
  max-width: 100%;
  display: block;
  height: auto;
}

/* Box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* End reset CSS */
.l-container {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP";
  font-feature-settings: "palt";
  color: #000;
  font-weight: 400;
  margin: auto;
}

img,
video {
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.cta::after {
  content: "";
  background: #ffecf1;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
}
.cta .cta-btn {
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
}
.cta .cta-btn:hover {
  filter: brightness(1.2);
}
.cta .cta-price_01 {
  position: relative;
  z-index: 1;
}
.cta .cta-main {
  background-color: #fff;
  position: relative;
}
.cta .cta-banner {
  position: relative;
  z-index: 1;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6%);
  }
  60% {
    transform: translateY(-3%);
  }
}
.cta_01 {
   background: #000;
}
.cta_01 .cta-price_01::after {
  content: "";
  background: url("../img/decor_02.png") no-repeat center center/cover;
  position: absolute;
  z-index: -1;
}
.cta_01 .cta-price_02 {
  position: relative;
  z-index: 1;
}
.cta_01 .cta-price_02::after {
  content: "";
  background: url("../img/decor_02.png") no-repeat center center/cover;
  position: absolute;
  z-index: -1;
}

.cta_02 .cta-price_01::after {
  content: "";
  background: url("../img/decor_01.png") no-repeat center center/cover;
  position: absolute;
  z-index: -1;
}
.cta_02 .cta-usage {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

.subscription {
  overflow: hidden;
  border: 2px solid #ccc;
}
.subscription.open .subscription-detail {
  grid-template-rows: 1fr;
}
.subscription.open .subscription-ttl::after {
  transform: rotate(180deg);
}
.subscription .subscription-detail {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: all 0.3s ease;
}
.subscription ul {
  line-height: 1.4285714286;
  border-top: 2px solid #ccc;
}
.subscription .detail-inner {
  min-height: 0;
}
.subscription .detail-inner > div {
  border-top: 2px solid #ccc;
  padding-bottom: 40px;
}
.subscription .detail-heading {
  background-color: #f5f5f5;
}
.subscription .subscription-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.subscription .subscription-ttl::after {
  content: "";
  display: inline-block;
  background: url("../img/arrow.png") no-repeat center center/cover;
  transition: all 0.3s ease;
}

.point .point-secret {
  position: relative;
}
.point .point-secret .secret-detail {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
}

.qa {
  position: relative;
  z-index: 1;
}
.qa::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  background: url("../img/qa_bg.png") no-repeat center top/cover;
}

footer .f-logo {
  display: block;
  margin: auto;
}
footer .f-menu {
  display: flex;
  justify-content: space-between;
}
footer .f-menu a {
  color: #999;
  line-height: 1.7857142857;
  transition: all 0.3s ease;
}
footer .f-menu a:hover {
  opacity: 0.7;
}

.banner {
  position: fixed;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.banner ul {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.banner a {
  display: block;
  transition: all 0.3s ease;
}
.banner a:hover {
  background: rgba(255, 255, 255, 0.2);
}

#fixedBtn {
  opacity: 0;
  visibility: hidden;
}

#fixedBtn.visible {
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 768px) {
  .l-container {
    max-width: 750px;
  }
  .cta {
    padding: 0 30px 55px;
  }
  .cta::after {
    top: 67px;
  }
  .cta .cta-btn {
    margin-top: 20px;
    width: 684px;
  }
  .cta .cta-price_01 {
    width: 636px;
  }
  .cta .cta-discount {
    width: 630px;
    margin-top: 14px;
  }
  .cta .cta-main {
    margin-top: -100px;
    padding-bottom: 40px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .cta .cta-banner {
    margin: 0 -30px;
  }
  .cta_01 .cta-banner {
    margin-bottom: 38px;
  }
  .cta_01 .cta-main {
    padding-top: 100px;
  }
  .cta_01 .cta-price_01::after {
    height: 385px;
    left: -27px;
    right: -27px;
    top: 133px;
  }
  .cta_01 .cta-price_02 {
    width: 646px;
    margin-top: 38px;
  }
  .cta_01 .cta-price_02::after {
    height: 385px;
    left: -22px;
    right: -22px;
    top: 167px;
  }
  .cta_02 .cta-price_01::after {
    height: 361px;
    left: -27px;
    right: -27px;
    top: 67px;
  }
  .cta_02 .cta-main {
    padding-top: 197px;
  }
  .cta_02 .cta-usage {
    top: -87px;
    width: 650px;
  }
  .subscription {
    font-size: 28px;
    border-radius: 8px;
    margin: 43px 28px 0;
  }
  .subscription li:not(:last-child) {
    margin-bottom: 30px;
  }
  .subscription .detail-heading {
    padding: 4px 20px 6px;
    margin-bottom: 10px;
  }
  .subscription .subscription-ttl {
    padding: 19px 30px;
  }
  .subscription .subscription-ttl::after {
    margin-left: 34px;
    background: url("../img/arrow.png") no-repeat center center/cover;
    width: 26px;
    height: 16px;
  }
  .subscription .subscription-ttl img {
    width: 315px;
  }
  .point {
    margin-top: 54px;
  }
  .point .point-intro {
    margin: -76px 0 -237px;
  }
  .point .point-w01 {
    width: 610px;
    margin: 72px 0 64px;
  }
  .point .point-w02 {
    width: 690px;
  }
  .point .point-w03 {
    width: 651px;
    margin-top: 55px;
  }
  .point .point-secret {
    margin-top: 40px;
  }
  .point .point-01 {
    margin-bottom: 10px;
  }
  .point .point-02 .point-w02 {
    margin-top: 30px;
    margin-bottom: 52px;
    gap: 40px;
  }
  .qa {
    margin-top: 20px;
    padding: 130px 30px 63px;
  }
  .qa::after {
    bottom: -64px;
  }
  .qa li:not(:last-child) {
    margin-bottom: 20px;
  }
  footer {
    padding: 72px 0;
  }
  footer .f-logo {
    width: 156px;
    margin-bottom: 20px;
  }
  footer .f-menu {
    gap: 20px;
    padding: 0 60px;
  }
  footer .f-menu a {
    font-size: 28px;
  }
  .banner {
    width: 750px;
  }
  .banner ul {
    gap: 20px;
  }
  .banner a {
    width: 300px;
    height: 100px;
  }
}
@media screen and (max-width: 767px) {
  .l-container {
    max-width: 100vw;
  }
  .cta {
    padding: 0 4vw 7.3333333333vw;
  }
  .cta::after {
    top: 8.9333333333vw;
  }
  .cta .cta-btn {
    margin-top: 2.6666666667vw;
    width: 91.2vw;
  }
  .cta .cta-price_01 {
    width: 84.8vw;
  }
  .cta .cta-discount {
    width: 84vw;
    margin-top: 1.8666666667vw;
  }
  .cta .cta-main {
    margin-top: -13.3333333333vw;
    padding-bottom: 5.3333333333vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
  }
  .cta .cta-banner {
    margin: 0 -4vw;
  }
  .cta_01 .cta-banner {
    margin-bottom: 5.0666666667vw;
  }
  .cta_01 .cta-main {
    padding-top: 13.3333333333vw;
  }
  .cta_01 .cta-price_01::after {
    height: 51.3333333333vw;
    left: -3.6vw;
    right: -3.6vw;
    top: 17.7333333333vw;
  }
  .cta_01 .cta-price_02 {
    width: 86.1333333333vw;
    margin-top: 5.0666666667vw;
  }
  .cta_01 .cta-price_02::after {
    height: 51.3333333333vw;
    left: -2.9333333333vw;
    right: -2.9333333333vw;
    top: 22.2666666667vw;
  }
  .cta_02 .cta-price_01::after {
    height: 48.1333333333vw;
    left: -3.6vw;
    right: -3.6vw;
    top: 8.9333333333vw;
  }
  .cta_02 .cta-main {
    padding-top: 26.2666666667vw;
  }
  .cta_02 .cta-usage {
    top: -11.6vw;
    width: 86.6666666667vw;
  }
  .subscription {
    font-size: 3.7333333333vw;
    border-radius: 1.0666666667vw;
    border-width: 0.2666666667vw;
    margin: calc(44 / 750 * 100vw) calc(28 / 750 * 100vw) 0;
  }
  .subscription ul {
    border-top-width: 0.2666666667vw;
    padding: 4.5333333333vw 4vw;
  }
  .subscription li:not(:last-child) {
    margin-bottom: 4vw;
  }
  .subscription .detail-heading {
    padding: 0.5333333333vw 2.6666666667vw 0.8vw;
    margin-bottom: 1.3333333333vw;
  }
  .subscription .subscription-ttl {
    padding: 2.5333333333vw 4vw;
  }
  .subscription .subscription-ttl::after {
    margin-left: 4.5333333333vw;
    background: url("../img/arrow.png") no-repeat center center/cover;
    width: 3.4666666667vw;
    height: 2.1333333333vw;
  }
  .subscription .subscription-ttl img {
    width: calc(315 / 750 * 100vw);
  }
  .subscription .detail-inner > div {
    border-top-width: 0.2666666667vw;
    padding-bottom: calc(40 / 750 * 100vw);
  }

  .point {
    margin-top: calc(54 / 750 * 100vw);
  }
  .point .point-intro {
    margin: -10.1333333333vw 0 -31.6vw;
  }
  .point .point-w01 {
    width: 81.3333333333vw;
    margin: 9.6vw 0 8.5333333333vw;
  }
  .point .point-w02 {
    width: 92vw;
  }
  .point .point-w03 {
    width: 86.8vw;
    margin-top: 7.3333333333vw;
  }
  .point .point-secret {
    margin-top: 5.3333333333vw;
  }
  .point .point-01 {
    margin-bottom: 1.3333333333vw;
  }
  .point .point-02 .point-w02 {
    margin-top: 4vw;
    margin-bottom: 6.9333333333vw;
    gap: 5.3333333333vw;
  }
  .qa {
    margin-top: 2.6666666667vw;
    padding: 17.3333333333vw 4vw 8.4vw;
  }
  .qa::after {
    bottom: -8.5333333333vw;
  }
  .qa li:not(:last-child) {
    margin-bottom: 2.6666666667vw;
  }
  footer {
    padding: 9.6vw 0;
  }
  footer .f-logo {
    width: 20.8vw;
    margin-bottom: 2.6666666667vw;
  }
  footer .f-menu {
    gap: 2.6666666667vw;
    padding: 0 8vw;
  }
  footer .f-menu a {
    font-size: 3.7333333333vw;
  }
  .banner {
    width: 100vw;
  }
  .banner ul {
    gap: 2.6666666667vw;
  }
  .banner a {
    width: 40vw;
    height: 13.3333333333vw;
  }
}