@charset "UTF-8";

/* reset common
------------------------------------------------------------------------------*/
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,
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
  scroll-behavior: smooth;
}

body {
  font-family: "游ゴシック", "YuGothic-Medium", "YuGo-Medium", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "モトヤLシーダ3等幅", MotoyaLCedar, "メイリオ", Meiryo, sans-serif;
  letter-spacing: normal;
  color: #727171;
  font-size: 32px;
  line-height: 1.625;
}

img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

ol,
ul {
  list-style: none;
}

a,
div,
span {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

sup,
sub {
  font-size: 0.5em;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

#wrapper {
  margin: 0 auto;
  max-width: 750px;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  position: relative;
}

#wrapper.is-fixed {
  position: fixed;
}

.btn_box {
  position: relative;
}

.purchase {
  position: absolute;
  bottom: min(23vw, 175px);
  left: min(10.4vw, 78px);
  width: min(80.26666666666667vw, 602px);
}

.course_text {
  position: absolute;
  bottom: min(11.066666666666666vw, 83px);
  left: min(23.333333333333332vw, 175px);
  width: min(53.333333333333336vw, 400px);
}

.link_btn {
  position: absolute;
  bottom: min(3.5999999999999996vw, 27px);
  left: min(32.800000000000004vw, 246px);
  width: min(34.266666666666666vw, 257px);
}

.cashless_box {
  position: relative;
}

.rpay_logo {
  position: absolute;
  top: 25%;
  left: 15%;
  width: 25%;
  height: 7%;
}

.rpay_logo a {
  display: block;
}

.cashless_box img {
  display: block;
  width: 100%;
  height: auto;
}

.course_text {
  position: absolute;
  bottom: min(11.066666666666666vw, 83px);
  left: min(23.333333333333332vw, 175px);
  width: min(53.333333333333336vw, 400px);
}

.link_btn {
  position: absolute;
  bottom: min(3.5999999999999996vw, 27px);
  left: min(32.800000000000004vw, 246px);
  width: min(34.266666666666666vw, 257px);
}

.cashless_box {
  position: relative;
}

.rpay_logo a {
  display: block;
}

.present_box-inner {
  position: relative;
}

/*.present_box-btn {
  position: absolute;
  top: min(43.46666666666666vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(80.26666666666667vw, 602px);
  margin-top: 350px;
}

@media screen and (max-width:768px) {
  .present_box-btn {
    width: min(80.26666666666667vw, 602px);
    margin-top: 46.67vw;
  }
}*/
.present_box-btn {
  position: absolute;
  top: min(43.46666666666666vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(80.26666666666667vw, 602px);
  margin-top: 790px;
}

@media screen and (max-width:768px) {
  .present_box-btn {
    width: min(80.26666666666667vw, 602px);
    margin-top: 104vw;
  }
}


/*アコーディオン*/
summary {
  list-style: none;
  position: relative;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: min(2vw, 15px);
  left: min(21.73333333333333vw, 163px);
  transform: translateY(-50%);
  transition: transform 0.5s;
  width: min(56.39999999999999vw, 423px);
  height: min(3.5999999999999996vw, 27px);
  background-image: url(../img/accordion_open.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

summary.accordion_box-btn.lpart_inner::after {
  margin-top: min(3vw, 30px) !important;
}

details[open] summary.accordion_box-btn.lpart_inner::after {
  margin-top: min(4vw, 30px) !important;
  padding-bottom: min(2.666666666666667vw, 20px) !important;
}

details[open] summary::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: min(2vw, 15px);
  left: min(21.73333333333333vw, 163px);
  transform: translateY(-50%);
  transition: transform 0.5s;
  width: min(56.53333333333334vw, 424px);
  height: min(3.5999999999999996vw, 27px);
  background-image: url(../img/accordion_close.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.accordion_box-text img {
  padding: min(8.666666666666668vw, 65px) min(13.066666666666665vw, 98px) 0;
}

details[open] .accordion_box-text {
  animation: fadein 0.5s ease;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

details {
  width: 100%;
}

/*アコーディオンend*/

/*Bpart*/
.bpart_01 {
  opacity: 0;
  width: 100%;
}

.bpart_01.k_ca {
  margin-top: min(5.2vw, 39px);
}

/*フェードダウン*/
.bpart_01.k_ca.fadedown {
  animation: fadedown 2s forwards;
  opacity: 1;
}

@keyframes fadedown {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}

.bpart_02-inner {
  margin-top: min(1.4666666666666666vw, 11px);
}

.bpart_03-movie {
  margin: 0 auto;
  width: min(80.80000000000001vw, 606px);
}

.bpart_04 {
  margin-top: min(12.933333333333334vw, 97px);
  width: min(100vw, 750px);
}

.bpart_04-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100vw, 750px);
}

.bpart_04_01 {
  display: block;
  position: relative;
  /* width: min(100vw,568px);
  height: min(21.6vw,143px); */
  overflow: hidden
}

@media screen and (max-width:768px) {
  .bpart_04 {
    margin-top: min(12.933333333333334vw);
    width: min(100vw);
  }

  .bpart_04_01 {
    /* width: min(75.73vw);
    height: min(19.067vw); */
  }
}

.bpart_04_01::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: min(5vw, 40px);
  height: 100%;
  background-color: #fff;
  animation: shiny 3s ease-in-out infinite;
}

@keyframes shiny {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }

  80% {
    transform: scale(0) rotate(0deg);
    opacity: 0.5;
  }

  81% {
    transform: scale(4) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(0deg);
    opacity: 0;
  }
}

.bpart_04_02 {
  width: min(26.666666666666668vw, 200px);
}

.bpart_04_03 {
  display: flex;
  flex-direction: column;
  width: min(100vw, 750px);
}

.bpart_05 {
  margin-top: min(9.733333333333333vw, 73px);
}

.bpart_06 {
  margin: min(7.733333333333333vw, 58px) auto 0;
  width: min(46.266666666666666vw, 347px);
  opacity: 0;
}

.bpart_06.k_ca.fadein-top {
  animation: fadein-top 3s ease-out forwards;
}

@keyframes fadein-top {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*Cpart*/
#Cpart,
#Dpart.trial_set {
  margin-top: min(6.666666666666667vw, 50px);
}

/*Epart*/
#Epart {
  margin-top: min(11.866666666666667vw, 89px);
}

.epart_01 {
  margin: 0 auto;
  width: min(92vw, 690px);
  opacity: 0;
}

.epart_01.k_ca.popup {
  animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
  opacity: 1;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(1);
  }

  80%,
  100% {
    opacity: 1;
  }
}

.epart_voice-inner li {
  opacity: 0;
}

.epart_voice-inner li.k_ca:nth-of-type(1) {
  margin-top: min(6.4vw, 48px);
}

.epart_voice-inner li.k_ca.fade-left {
  transition: 2s;
  transform: translateX(0);
  opacity: 1;
}

.epart_voice-inner li.k_ca.fade-left:nth-of-type(2) {
  transition-delay: 0.5s;
}

.epart_voice-inner li.k_ca.fade-left:nth-of-type(3) {
  transition-delay: 1s;
}

.epart_voice-inner li.k_ca.fade-left:nth-of-type(4) {
  transition-delay: 1.5s;
}

.epart_text {
  margin-top: min(1.3333333333333335vw, 10px);
  padding-right: min(5.6000000000000005vw, 42px);
  font-size: min(2.8000000000000003vw, 21px);
  text-align: right;
}

/*Fpart*/
#Fpart {
  margin-top: min(0.5333333333333333vw, 4px);
}

.fpart_box-inner {
  position: relative;
}

.fpart_02 {
  position: absolute;
  top: min(51.33333333333333vw, 385px);
  left: min(23.333333333333332vw, 175px);
  width: min(56.00000000000001vw, 420px);
}

.fpart_03 {
  position: absolute;
  top: min(76.26666666666667vw, 572px);
  left: min(3.3333333333333335vw, 25px);
  width: min(48.4vw, 363px);
}

.fpart_04 {
  position: absolute;
  top: min(103.46666666666667vw, 776px);
  left: min(5.2vw, 39px);
  width: min(41.333333333333336vw, 310px);
}

.fpart_05 {
  position: absolute;
  top: min(132.93333333333334vw, 997px);
  left: min(21.066666666666666vw, 158px);
  width: min(52.400000000000006vw, 393px);
}

#Gpart {
  margin-top: min(16.400000000000002vw, 123px);
  position: relative;
}

.gpart_02 {
  position: absolute;
  top: -7.4%;
  left: 8.7%;
  width: min(81.33333333333333vw, 610px);
}

.gpart_02,
.hpart_02 {
  opacity: 0;
}

.gpart_02.k_ca.fadeup_title,
.hpart_02.k_ca.fadeup_title {
  animation: fadeup_title 2s;
  opacity: 1;
}

@keyframes fadeup_title {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.gpart_point-inner li {
  opacity: 0;
}

.gpart_point-inner li.k_ca.fadeup_merchandise {
  opacity: 1;
}

.gpart_point-inner li.gpart_03.k_ca.fadeup_merchandise {
  animation: fadeup_merchandise 1s ease-in-out forwards;
}

.gpart_point-inner li.gpart_04.k_ca.fadeup_merchandise {
  animation: fadeup_merchandise 1.5s ease-in-out forwards;
}

.gpart_point-inner li.gpart_05.k_ca.fadeup_merchandise {
  animation: fadeup_merchandise 2s ease-in-out forwards;
}

@keyframes fadeup_merchandise {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.gpart_03 {
  position: absolute;
  bottom: min(38.93333333333333vw, 292px);
  left: min(7.866666666666666vw, 59px);
  width: min(24.266666666666666vw, 182px);
  padding: min(14.666666666666666vw, 110px) 0 0;
}

.gpart_04 {
  position: absolute;
  bottom: min(39.2vw, 294px);
  left: min(42.53333333333333vw, 319px);
  width: min(14.933333333333335vw, 112px);
}

.gpart_05 {
  position: absolute;
  bottom: min(38.4vw, 288px);
  right: min(9.333333333333334vw, 79px);
  width: min(20.266666666666666vw, 152px);
}

#Hpart {
  margin-top: min(20.933333333333334vw, 157px);
}

.hpart_box-inner {
  position: relative;
}

.hpart_02 {
  position: absolute;
  top: -8.2%;
  left: 8.6%;
  width: min(81.33333333333333vw, 610px);
}

.hpart_03 {
  position: absolute;
  top: min(13.333333333333334vw, 100px);
  left: min(10.933333333333334vw, 82px);
  width: min(79.33333333333333vw, 595px);
}

.hpart_04 {
  position: absolute;
  bottom: min(8.799999999999999vw, 66px);
  left: min(11.200000000000001vw, 84px);
  width: min(80.4vw, 603px);
}

#Ipart {
  margin-top: min(6.666666666666667vw, 50px);
}

#Jpart {
  position: relative;
  margin-top: min(6.533333333333332vw, 49px);
}

.jpart_02 {
  position: absolute;
  top: min(2.4vw, 18px);
  left: 0;
  width: min(44.53333333333334vw, 334px);
}

.jpart_03 {
  position: absolute;
  top: min(3.733333333333334vw, 28px);
  left: min(40.266666666666666vw, 302px);
  width: min(32.266666666666666vw, 242px);
}

.jpart_04 {
  position: absolute;
  top: min(39.2vw, 294px);
  left: min(6.133333333333333vw, 46px);
  width: min(27.6vw, 207px);
}

.jpart_05 {
  position: absolute;
  top: min(112.00000000000001vw, 840px);
  left: min(4.533333333333333vw, 34px);
  width: min(31.333333333333336vw, 235px);
}

.jpart_06 {
  position: absolute;
  top: min(44vw, 330px);
  right: min(7.333333333333333vw, 55px);
  width: min(53.06666666666666vw, 398px);
}

.jpart_07 {
  position: absolute;
  top: min(86vw, 645px);
  right: min(6.133333333333333vw, 46px);
  width: min(54vw, 405px);
}

.jpart_08 {
  position: absolute;
  top: min(138vw, 1035px);
  right: 0;
  width: min(54.13333333333333vw, 406px);
}

.jpart_09 {
  position: absolute;
  top: min(139.46666666666667vw, 1046px);
  left: min(20.133333333333333vw, 151px);
  width: min(32.53333333333333vw, 244px);
}

.jpart_10 {
  position: absolute;
  top: min(178.66666666666666vw, 1340px);
  left: min(5.866666666666666vw, 44px);
  width: min(55.60000000000001vw, 417px);
}

.jpart_11 {
  position: absolute;
  top: min(216.4vw, 1623px);
  left: min(6.933333333333333vw, 52px);
  width: min(54vw, 405px);
}

.jpart_11_text {
  position: absolute;
  top: min(253.73333333333332vw, 1903px);
  left: min(7.63vw, 57px);
  width: min(49.6vw, 372px);
}

.jpart_12 {
  position: absolute;
  top: min(174.26666666666665vw, 1307px);
  right: min(7.866666666666666vw, 59px);
  width: min(21.066666666666666vw, 158px);
}

.jpart_13 {
  position: absolute;
  bottom: min(111.06666666666666vw, 833px);
  left: 0;
  width: min(49.46666666666666vw, 371px);
}

.jpart_14 {
  position: absolute;
  bottom: min(110.00000000000001vw, 825px);
  left: min(45.06666666666666vw, 338px);
  width: min(33.2vw, 249px);
}

.jpart_15 {
  position: absolute;
  bottom: min(45.6vw, 342px);
  left: min(9.333333333333334vw, 70px);
  width: min(22.53333333333333vw, 169px);
}

.jpart_16 {
  position: absolute;
  bottom: min(65.46666666666667vw, 491px);
  right: min(6vw, 45px);
  width: min(54vw, 405px);
}

.jpart_17 {
  position: absolute;
  bottom: min(23.333333333333332vw, 175px);
  right: min(6.4vw, 48px);
  width: min(53.86666666666666vw, 404px);
}

#Lpart {
  margin-top: min(6.666666666666667vw, 50px);
}

.lpart_present_box-inner {
  position: relative;
}

/*.lpart_present_box-btn {
  position: absolute;
  top: min(37.06666666666666vw, 278px);
  left: min(9.733333333333333vw, 73px);
  width: min(80.26666666666667vw, 602px);
}*/
.lpart_present_box-btn {
  position: absolute;
  top: min(145.6vw, 1092px);
  left: min(9.733333333333333vw, 73px);
  width: min(80.26666666666667vw, 602px);
}

.lpart_text_box img {
  padding: min(13.333333333333334vw, 100px) min(14.799999999999999vw, 111px) 0;
}

footer {
  padding: min(4vw, 30px);
  background: #727171;
  color: #fff !important;
}

footer a {
  color: #fff !important;
  text-decoration: none;
}

.footer__nav {
  display: flex;
  justify-content: center;
}

.footer__nav li {
  font-size: min(2.666666666666667vw, 20px);
  padding-right: 0.875rem;
}

footer .footer__nav li:not(:last-of-type)::after {
  content: "|";
  margin: 0 0.6em;
  color: #fff;
}

footer .amazon_trademark {
  margin-top: min(2.666666666666667vw, 20px);
  padding-top: min(2.666666666666667vw, 20px);
  border-top: 1px solid #fff;
  text-align: center;
  font-size: min(2.133333333333333vw, 16px);
}

footer .copyright {
  margin-top: min(2.666666666666667vw, 20px);
  text-align: center;
  font-size: min(2.666666666666667vw, 22px);
  font-family: Verdana, “Droid Sans”;
}

/*アニメーション*/
/*ひかるボタン*/
.shiny-btn01 {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.shiny-btn01::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: min(4vw, 30px);
  height: 100%;
  background-color: #fff;
  animation: shiny-btn01 3s ease-in-out infinite;
}

@keyframes shiny-btn01 {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/*こんな「肌悩み」ございませんか？*/
.fpart_voice-inner li {
  opacity: 0;
  transform: translateX(30px);
}

.fpart_voice-inner li.k_ca.voice {
  transition: 0.6s;
  transform: translateX(0);
  opacity: 1;
}

.fpart_voice-inner li.fpart_02.k_ca.voice {
  animation: voice 0.5s ease 0.5s 1 forwards;
}

.fpart_voice-inner li.fpart_03.k_ca.voice {
  animation: voice 0.5s ease 1s 1 forwards;
}

.fpart_voice-inner li.fpart_04.k_ca.voice {
  animation: voice 0.5s ease 1.5s 1 forwards;
}

.fpart_voice-inner li.fpart_05.k_ca.voice {
  animation: voice 0.5s ease 2s 1 forwards;
}

@keyframes voice {
  100% {
    opacity: 1;
  }
}

/* 左から右 */
.jpart_04,
.jpart_15 {
  opacity: 0;
}

.jpart_04.k_ca.faderight,
.jpart_15.k_ca.faderight {
  animation: faderight 4s;
  opacity: 1;
}

@keyframes faderight {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 右から左 */
.jpart_12 {
  opacity: 0;
}

.jpart_12.k_ca.fadeleft {
  animation: fadeleft 4s;
  opacity: 1;
}

@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(8px);
  }
}

/* form
------------------------------------------------------------------------------*/
.form_box {
  margin-top: 50px;
  color: #231815;
}

.form_inner {
  font-size: 26px;
  margin-top: 10px;
}

.orderAlready {
  padding: 0 2px !important;
}

.btn--small {
  display: block;
  width: calc(100% - 4px);
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid #5c5a5a;
  color: #231815;
  position: relative;
  padding: 0;
  background: url(../img/bg-link-arrow-next.png) right 10px center no-repeat;
  background-size: 5px 9px;
  text-decoration: none;
  line-height: 2.3;
}

.btn--small span {
  text-align: center;
  vertical-align: middle;
  line-height: 1.8em;
}

.btn--small span:before,
.btn--small span:after {
  content: "";
  background: none;
}

.inputRequire {
  color: #ef857d;
  margin: 10px 0;
}

.link--nextToggle {
  color: #231815;
  padding: 0 12px 0 0;
  width: 100%;
  border: none;
  text-decoration: none !important;
  box-sizing: border-box;
}

.link--nextToggle:before {
  background: #231815;
  left: auto;
  right: -7px;
  width: 13px;
}

.link--nextToggle:after {
  background: #231815;
  left: auto;
  right: -1px;
  height: 13px;
}

.formUnit:last-child {
  padding: 0 3px;
}

.step__p--type:before {
  background: url(../img/form_icon.png) no-repeat;
  background-position: 4px center;
  background-size: 42px 42px;
  content: "";
  width: 46px;
  height: 46px;
}

.step__p--type span {
  margin-top: 10px;
}

@media screen and (max-width:768px) {
  .step__p--type:before {
    background-position: center;
    background-size: 100% 100%;
    width: 6.13vw;
    height: 6.13vw;
  }

  .step__p--type span {
    margin-top: 10px;
  }
}

/* btn
------------------------------------------------------------------------------*/
.btn--small.is-disabled {
  border-color: #bbb;
}

.btn--small.is-disabled span {
  opacity: 0.4;
}

.orderBottomNav .js-termsbtnNext {
  display: block;
}

.orderBottomNav .js-termsbtnNext .link--next::after {
  content: none;
  display: none;
}

.orderBottomNav .is-disabled .js-termsbtnNext {
  opacity: 0.4;
}

/* #btn animattion
------------------------------------------------------------------------------*/
@keyframes pulse {
  0% {
    margin-left: 0;
  }

  5% {
    margin-left: 8px;
  }

  10% {
    margin-left: 0;
  }

  100% {
    margin-left: 0;
  }
}

.push {
  animation: pulse 3.3s ease 0s infinite normal;
}

/* #fixed_cv */
#fixed_cv {
  display: none;
  position: fixed;
  bottom: 0;
  height: auto;
  z-index: 999;
}

#fixed_cv.isActive {
  display: block;
  transition: all 0.2s ease-in;
}