/* skin_moistrial_standard 全体のcssをリセットするのは禁止*/
/* #wrap reset */
#wrap*,#wrap*::before,#wrap*::after{-webkit-box-sizing:border-box;box-sizing:border-box;}#wrap ul[class],#wrap ol[class]{padding:0;}#wrap body,#wrap h1,#wrap h2,#wrap h3,#wrap h4,#wrap p,#wrap ul[class],#wrap ol[class],#wrap figure,#wrap blockquote,#wrap dl,#wrap dd{margin:0;}#wrap body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;}#wrap ul[class],#wrap ol[class]{list-style:none;}#wrap img{width:100%;height:auto;display:block;border-style:none;vertical-align:bottom;}#wrap input,#wrap button,#wrap textarea,#wrap select{font:inherit;}

/*  通常header非表示 */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}

.wrapper {
  padding-top: 0;
}

.wrapper #logo {
  display:none;
}

/* #wrap */
#wrap {
  width: 100%;
  max-width: 750px;
  margin: auto;
}

.offer_btn{
  position: absolute;
  bottom: 29%;
  left: 50%;
  width: min(calc(650/750*100vw),650px);
  -webkit-animation: pulse 2.3s ease 0s infinite normal;
  animation: pulse 2.3s ease 0s infinite normal;
}

.fv_offer .offer_btn {
  bottom: 24%;
}

.last-offer .offer_btn {
  bottom: 32%;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  5% {
    -webkit-transform: translateX(-51%);
            transform: translateX(-51%);
  }
  10% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  5% {
    -webkit-transform: translateX(-51%);
            transform: translateX(-51%);
  }
  10% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

#wrap .relative, #wrap .animation {
  position: relative;
}
#wrap .animation div[class*="_fadein"] {
  position: absolute;
}

/* nav */
#wrap a img{
  -webkit-transition:all 0.25s ease;
  transition:all 0.25s ease;
  opacity: 1;
}
#wrap a:hover img{
  opacity: 0.7;
}

#wrap .banner {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
}

#wrap .banner .banner-inner{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* cvボタン　光るアニメーション */
.c-button._shiny {
  overflow: hidden;
}

.c-button._shiny::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: max(calc(-100/750*100vw), -100px);
  left: 0;
  width: min(calc(30/750*100vw), 30px);
  height: 100%;
  background-color: #fff;
  transition: 400ms;
  animation: shinyshiny 2.5s ease-in-out infinite;
}

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

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

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

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

/* ここから */

.ceramide_fadein {
  top: 24%;
}

.set_fadein {
  top: 33%;
}

.point_fadein {
  top: 14%;
}

/* アコーディオンのスタイル */
.accordion {
  margin: 0;
}

.accordion-item {
  margin: 0;
}

.accordion-header {
  cursor: pointer;
}

.accordion-content {
  overflow: hidden;
}

.slider_wrap_1{
  position: relative;
  background: url(/lp/skin_mois/standard_001/img/point_slide_bg.png) no-repeat top center / 100% auto;
}

.slider_1 {
	padding-bottom: min(83px, calc(83 / 750 * 100vw));
}

#wrap .slider_1_inner img {
  width: min(613px, calc(623 / 750 * 100vw));
  margin: 0 auto;
}

#wrap .slide-arrow {
  position: absolute;
  width: min(54px, calc(54 / 750 * 100vw));
  cursor: pointer;
}

.prev-arrow_01 ,
.next-arrow_01{
  top: min(288px, calc(288 / 750 * 100vw));
}
.prev-arrow_01{
	left: min(22px, calc(22 / 750 * 100vw));
	z-index: 10;
}

.next-arrow_01{
	right: min(22px, calc(22 / 750 * 100vw));
	z-index: 10;
}

.line-animation {
  position: relative;
}

.line01 {
  position: absolute;
  width: 0;
  height: 3px;
  background-color: #333;
  top: 36%;
  left: 19%;
}
.line02 {
  position: absolute;
  width: 3px;
  height: 0;
  background-color: #333;
  top: 36%;
  left: 50%;
}

.line02::after {
  content: '';
  position: absolute;
  width: min(calc(10/750*100vw), 10px);
  height: min(calc(10/750*100vw), 10px);
  background-color: #333;
  border-radius: 50%;
  bottom: min(calc(-5/750*100vw), -5px);
  bottom: -13%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

.line01.animate {
  animation: lineStretch 2s ease forwards;
}

.line02.animate {
  animation: lineVertical 2s ease-in-out forwards;
}

.line02.animate::after {
  animation: circleAppear 2s ease-in-out forwards;
}


@keyframes lineStretch {
  0% {
    width: 0;
  }
  100% {
    width: min(calc(460/750*100vw), 460px);
  }
}

@keyframes lineVertical {
  0% {
    height: 0;
  }
  100% {
    height: min(calc(67/750*100vw), 67px);
  }
}

@keyframes circleAppear {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.ceramide_graph{
  background-color: #f3f3f3;
}

#wrap .ceramide_graph img{
  width: min(calc(690/750*100vw), 690px);
  margin: 0 auto;
}

#wrap .point_02{
  position: relative;
}

#wrap .zoomup{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  width: min(calc(611/750*100vw), 611px);
}

#wrap .zoomup.animate {
  animation: zoomUp 2s ease .2s forwards;
}


@keyframes zoomUp {
  0% {
    transform: translateX(-50%) scale(0.9);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}