@charset "utf-8";

/* =================================
ローディング
================================= */
#page_loader_lp {
	width: 100vw;
	height: 100vh;
	transition: all 1.5s;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
#page_loader_lp.loaded {
	opacity: 0;
	visibility: hidden;
}
#page_loader_lp .box{
	width: 90%;
}
#page_loader_lp .loading_logo{
	width:80%;
	max-width:300px;
	display: block;
	margin: 0 auto 15px;
}
#page_loader_lp .loading_kurukuru{
	display: block;
	width:70px;
	margin: 0 auto 15px;
}
#page_loader_lp p{
	text-align: center;
	font-size:0.8em;
	margin: 0 auto;
}
#page_loader_lp strong{
	font-size:1.2em;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}
#page_loader_lp span{
	display: block;
}

/* =================================
メインコンテンツ共通
================================= */
.lp_mainn{
	width: min(100%, 600px);
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	background: #fff;
	position: relative;
	z-index: 0;
}
.lp_mainn:before{
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
}
.lp_mainn img, .lp_mainn video{
	width: 100%;
	height: auto;
}
.lp_mainn a{
	display: block;
}
.lp_mainn a:hover{
	opacity: .5;
	transition: all .2s ease-in;
}
.lp_mainn .cart_btn{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
}
.lp_mainn .footbtn{
	display: block;
	width: 100%;
	max-width: 600px;
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: min(2%, 12px);
	background: rgba(255, 255, 255, .3);
}
.lp_mainn .relative_wrap{
	position: relative;
	z-index: 0;
}

/* ===================================
サクラAセラム、ピンクグロウデイクリーム 共通
=================================== */
/*秘密*/
.sakura_series .dokuji_anime img{
	position: absolute;
	width: 34.5%;
}
.sakura_series .dokuji_anime .da_deco_01{
	left: 4%;
	bottom: 32.5%;
}
.sakura_series .dokuji_anime .da_deco_02{
	left: 0;
	right: 0;
	bottom: 28%;
	margin: auto;
}
.sakura_series .dokuji_anime .da_deco_03{
	right: 3%;
	bottom: 32.5%;
}
/*SNS スライダー*/
.sakura_series .sns_slider{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
.sakura_series .sns_slider.ss_top{
	top: 34%;
}
.sakura_series .sns_slider.ss_btm{
	top: 63%;
}
.sakura_series .sns_slider{
	opacity: 0;
}
.sakura_series .sns_slider.slick-initialized{
	opacity: 1;
}
.sakura_series .sns_slider img{
	margin: 0 -.5%;
}
.sakura_series .sns_slider .slick-track{
	display: flex;
	transition-timing-function: linear !important;
}
/*成分*/
.sakura_series .tokubetsu_deco_01{
	position: absolute;
	top: -2%;
	left: -1%;
	width: 53%;
}
.sakura_series .tokubetsu_deco_02{
	position: absolute;
	top: -2%;
	right: -1%;
	width: 53%;
}
.sakura_series .tokubetsu_deco_03{
	position: absolute;
	top: 38%;
	left: 0;
	right: 0;
	margin: auto;
	width: 11%;
}
.sakura_series .approach_anime img{
	position: absolute;
	width: 34.5%;
}
/*ストーリー*/
.sakura_series .story_deco{
	position: absolute;
	top: 40.5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 60%;
}
/*FAQ*/
.sakura_series .accordion__container{
	position: relative;
	z-index: 0;
}
.sakura_series .accordion__container .ac_inner{
	width: 100%;
	padding: 0 5% 10%;
	background: url("https://ken-bi.com/upload/vioteras_images/sakura_series/lp07_03.webp")no-repeat center top / cover;
}
.sakura_series .accordion__container dl{
	margin-bottom: 7%;
}
.sakura_series .accordion__container dl:last-of-type{
	margin-bottom: 0;
}
.sakura_series .accordion__container .title{
	cursor: pointer;
	position: relative;
	background: #94CCF5;
	background: linear-gradient(135deg,rgba(148, 204, 245, 1) 0%, rgba(168, 188, 225, 1) 25%, rgba(193, 167, 202, 1) 50%, rgba(217, 146, 176, 1) 75%, rgba(233, 133, 161, 1) 100%);
	border-top-left-radius: min(20px,2.5vw);
	border-top-right-radius: min(20px,2.5vw);
}
.sakura_series .accordion__container .title:before{
	content: "";
	width: 5.5%;
	height: 15%;
	position: absolute;
	top: 0;
	right: 5%;
	bottom: 0;
	margin: auto;
	background: url("https://ken-bi.com/upload/vioteras_images/sakura_series/lp07_03-elm01_01.webp")no-repeat center / 100%;
	transition: transform .3s ease;
	transform: rotate(180deg);
}
.sakura_series .accordion__container .title.close:before{
	transform: rotate(0deg);
}
.sakura_series .accordion__container .box{
	display: none;
	background-color: #fff;
	border-bottom-left-radius: min(20px,2.5vw);
	border-bottom-right-radius: min(20px,2.5vw);
}

/* ===================================
サクラAセラム
=================================== */
/*背景画僧*/
.sakura_p_serum:before{
	background-image: url("https://ken-bi.com/upload/vioteras_images/sakura_p_serum/lp_bg.jpg");
}
/*カートボタン*/
.sakura_p_serum .cb_3set{
	bottom: 4%;
}
.sakura_p_serum .cb_2set{
	bottom: 6%;
}
.sakura_p_serum .cart_btn_solo{
	position: absolute;
	top: 52%;
	right: 7.7%;
	width: 56%;
}
/*誕生*/
.sakura_p_serum .tanjou_video{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 13.3%;
	margin: auto;
	width: 87.3%;
}
.sakura_p_serum .tanjou_deco_01{
	position: absolute;
	top: 12%;
	left: 6%;
	width: 55%;
}
.sakura_p_serum .tanjou_deco_02{
	position: absolute;
	right: 3%;
	bottom: 12%;
	width: 45%;
}
/*ハリツヤ*/
.sakura_p_serum .haritsuya_deco_01{
	position: absolute;
	top: 19.5%;
	right: 4.5%;
	width: 7%;
}
.sakura_p_serum .haritsuya_deco_02{
	position: absolute;
	top: 19.5%;
	right: 13.5%;
	width: 37.5%;
}
/*悩み*/
.sakura_p_serum .tsukare_deco_01{
	position: absolute;
	top: -2%;
	left: 1.5%;
	width: 38.5%;
}
.sakura_p_serum .tsukare_deco_02{
	position: absolute;
	top: 26%;
	left: -5%;
	width: 38%;
}
.sakura_p_serum .tsukare_deco_03{
	position: absolute;
	top: 51%;
	left: 17%;
	width: 31%;
}
.sakura_p_serum .tsukare_deco_04{
	position: absolute;
	top: 1%;
	right: .5%;
	width: 36.5%;
}
.sakura_p_serum .tsukare_deco_05{
	position: absolute;
	top: 27.5%;
	right: -6%;
	width: 37%;
}
.sakura_p_serum .tsukare_deco_06{
	position: absolute;
	top: 50.5%;
	right: 17.5%;
	width: 31%;
}
.sakura_p_serum .genin_movie{
	position: absolute;
	top: 16.5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 89%;
}
.sakura_p_serum .fukemie_deco{
	position: absolute;
	top: 46%;
	left: -.3%;
	width: 69%;
}
/*成分*/
.sakura_p_serum .approach_anime .approach_deco_01{
	left: 4%;
	bottom: 50.5%;
}
.sakura_p_serum .approach_anime .approach_deco_02{
	left: 0;
	right: 0;
	bottom: 46%;
	margin: auto;
}
.sakura_p_serum .approach_anime .approach_deco_03{
	right: 3%;
	bottom: 50.5%;
}
.sakura_p_serum .approach_movie{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5%;
	margin: auto;
	width: 90%;
}
.sakura_p_serum .ito_deco_01{
	position: absolute;
	top: 2.8%;
	right: 9.5%;
	width: 34%;
}
.sakura_p_serum .ito_deco_02{
	position: absolute;
	top: 26.5%;
	right: 20.5%;
	width: 9%;
}
.sakura_p_serum .ito_deco_03{
	position: absolute;
	top: 34%;
	right: 7%;
	width: 39%;
}
.sakura_p_serum .seibun_movie{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5%;
	margin: auto;
	width: 90%;
}
.sakura_p_serum .collagen_deco_01{
	position: absolute;
	top: 27.5%;
	left: 23.5%;
	width: 36%;
}
.sakura_p_serum .collagen_deco_02{
	position: absolute;
	left: 26%;
	bottom: 22.7%;
	width: 26%;
}
.sakura_p_serum .collagen_deco_03{
	position: absolute;
	right: 16%;
	bottom: 22.7%;
	width: 26%;
}
.sakura_p_serum .douji_deco_01{
	position: absolute;
	top: 2.5%;
	right: -3%;
	width: 31.5%;
}
.sakura_p_serum .douji_deco_02{
	position: absolute;
	top: 14.5%;
	left: -1%;
	width: 29.5%;
}
/*使い方*/
.sakura_p_serum .free_deco{
	position: absolute;
	top: 21.5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 71%;
}

/* ===================================
ピンクグロウデイクリーム
=================================== */
/*背景画像*/
.pink_glow_day_cream:before{
	background-image: url("https://ken-bi.com/upload/vioteras_images/pink_glow_day_cream/lp_bg.jpg");
}
/*カートボタン*/
.pink_glow_day_cream .cb_3set{
	bottom: 5%;
}
.pink_glow_day_cream .cb_2set{
	bottom: 6%;
}
.pink_glow_day_cream .cart_btn_solo{
	position: absolute;
	top: 51%;
	right: 5.5%;
	width: 56%;
}
/*イントロ*/
.pink_glow_day_cream .intro_deco_01{
	position: absolute;
	left: 3%;
	right: 0;
	bottom: 2%;
	margin: auto;
}
.pink_glow_day_cream .intro_video{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18%;
	margin: auto;
	width: 82%;
}
.pink_glow_day_cream .intro_deco_02{
	position: absolute;
	right: 7%;
	bottom: 14%;
	width: 37%;
}
/*救世主*/
.pink_glow_day_cream .care_deco_01{
	position: absolute;
	left: .5%;
  bottom: 10%;
  width: 55%;
}
.pink_glow_day_cream .care_deco_02{
	position: absolute;
	right: 0;
  bottom: 10%;
  width: 55%;
}
/*権威*/
.pink_glow_day_cream .toujou_deco{
	position: absolute;
	top: 23%;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
}
/*悩み*/
.pink_glow_day_cream .nayami_anime img{
	position: absolute;
	width: auto;
	height: 6%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_01{
	top: 10%;
	left: 5.5%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_02{
	top: 17%;
	left: 5.5%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_03{
	top: 24%;
	left: 5.5%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_04{
	top: 44%;
	right: 6.5%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_05{
	top: 51%;
	right: 19.3%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_06{
	top: 76%;
	left: 5.5%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_07{
	top: 83%;
	left: 5.5%;
}
.pink_glow_day_cream .nayami_anime .nayami_deco_08{
	top: 90%;
	left: 5.5%;
}
.pink_glow_day_cream .otona_deco_01{
	position: absolute;
	top: 2%;
  right: 2.3%;
  width: 18.3%;
}
.pink_glow_day_cream .otona_deco_02{
	position: absolute;
	top: 18.5%;
  right: 24%;
  width: 17.8%;
}
/*成分*/
.pink_glow_day_cream .approach_anime .approach_deco_01{
	left: 4%;
	bottom: 0;
}
.pink_glow_day_cream .approach_anime .approach_deco_02{
	left: 0;
	right: 0;
	bottom: -10%;
	margin: auto;
}
.pink_glow_day_cream .approach_anime .approach_deco_03{
	right: 3%;
	bottom: 0;
}
.pink_glow_day_cream .approach_movie{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 13%;
	margin: auto;
	width: 90%;
}
.pink_glow_day_cream .utsukushiku_deco_01{
	position: absolute;
	top: 2%;
	right: -3%;
	width: 30.5%;
}
.pink_glow_day_cream .utsukushiku_deco_02{
	position: absolute;
	top: 6%;
	left: 3%;
	width: 17.2%;
}
/*使い方*/
.pink_glow_day_cream .free_deco{
	position: absolute;
	top: 18.5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 71%;
}

/* ===================================
サクラAセラム、ピンクグロウデイクリーム
アニメーション
=================================== */
/*共通*/
.sakura_series .shimmer_rect {
  animation: shimmer 2.4s linear infinite;
	transform-origin: 0 0;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.sakura_series .cart_btn,
.sakura_series .cart_btn_solo{
	animation: fluffy 2s ease-in-out infinite;
}
@keyframes fluffy {
  0% {transform: scale(1);}
  50% {transform: scale(1.06);}
  100% {transform: scale(1);}
}
.sakura_series .himitsu_svg{
	position: absolute;
	width: 92.5%;
	left: 2.5%;
  bottom: 2.1%;
	pointer-events: none;
}
.sakura_series .ss_btm{
  transform: scaleX(-1);
}
.sakura_series .ss_btm .slick-slide{
  transform: scaleX(-1);
}
.sakura_series .seibun_svg{
	position: absolute;
	width: 31.5%;
	right: 2.4%;
	top: 1.6%;
	pointer-events: none;
}
.sakura_series .fade_down {
  opacity: 0;
}
.sakura_series .fade_down.is-active {
  animation: fadeDown 1s ease-out forwards;
}
@keyframes fadeDown{
	0%{
		opacity: 0;
		transform: translateY(-10%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
/*サクラAセラム*/
.sakura_p_serum .tanjou_deco_01{
	transform-origin: bottom;
	opacity: 0;
}
.sakura_p_serum .tanjou_deco_01.is-active{
	animation: balloonOpen 1s ease-out forwards;
}
@keyframes balloonOpen {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.sakura_p_serum .keni_svg{
	position: absolute;
	width: 77.9%;
  left: 10.8%;
	top: 31%;
	pointer-events: none;
}
.sakura_p_serum .tsukare_scale{
	opacity: 0;
}
.sakura_p_serum .tsukare_deco_01.is-active,
.sakura_p_serum .tsukare_deco_04.is-active{
	animation: tsukareScale 0.7s ease-out 0s forwards;
}
.sakura_p_serum .tsukare_deco_02.is-active,
.sakura_p_serum .tsukare_deco_05.is-active{
	animation: tsukareScale 0.7s ease-out 0.25s forwards;
}
.sakura_p_serum .tsukare_deco_03.is-active,
.sakura_p_serum .tsukare_deco_06.is-active{
	animation: tsukareScale 0.7s ease-out 0.5s forwards;
}
@keyframes tsukareScale {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.sakura_p_serum .seibun_svg .shimmer_rect {
  animation: shimmer_v 2.4s linear infinite;
  transform-origin: 0 0;
}
@keyframes shimmer_v {
  from { transform: translate(-100%, -100%); }
  to   { transform: translate(100%, 100%); }
}
.sakura_p_serum .pdrn_svg{
	position: absolute;
	width: 93%;
	left: 2.3%;
	top: 31.8%;
	pointer-events: none;
}
.sakura_p_serum .collagen_deco_01{
	opacity: 0;
}
.sakura_p_serum .collagen_deco_01.is-active{
	animation: PonScale 0.5s ease-out 1s forwards;
}
@keyframes PonScale {
	0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.sakura_p_serum .collagen_deco_03 {
	transform-origin: bottom;
	opacity: 0;
}
.sakura_p_serum .collagen_deco_03.is-active{
	opacity: 1;
	animation: barGrow 1.2s ease-out forwards;
}
@keyframes barGrow {
	0%   { transform: scaleY(0) skewX(0deg); }
	40%  { transform: scaleY(1) skewX(0deg); }
	47%  { transform: scaleY(1) skewX(1.5deg); }
	54%  { transform: scaleY(1) skewX(-1.5deg); }
	61%  { transform: scaleY(1) skewX(1.2deg); }
	68%  { transform: scaleY(1) skewX(-1.2deg); }
	74%  { transform: scaleY(1) skewX(0.8deg); }
	80%  { transform: scaleY(1) skewX(-0.8deg); }
	86%  { transform: scaleY(1) skewX(0.4deg); }
	92%  { transform: scaleY(1) skewX(-0.4deg); }
	96%  { transform: scaleY(1) skewX(0.1deg); }
	100% { transform: scaleY(1) skewX(0deg); }
}
/*ピンクグロウデイクリーム*/
.pink_glow_day_cream .keni_svg{
	position: absolute;
	width: 77.9%;
	left: 10.8%;
	top: 35.7%;
	pointer-events: none;
}
.pink_glow_day_cream .nayami_anime {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pink_glow_day_cream .nayami_anime img {
	display: block;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}
.pink_glow_day_cream .nayami_anime.is-active img {
	animation-name: revealFromLeft;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.pink_glow_day_cream .nayami_anime.is-done img {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_01 { animation-delay: 0s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_02 { animation-delay: 0.12s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_03 { animation-delay: 0.24s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_04 { animation-delay: 0.54s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_05 { animation-delay: 0.66s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_06 { animation-delay: 0.96s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_07 { animation-delay: 1.08s; }
.pink_glow_day_cream .nayami_anime[data-direction="down"].is-active .nayami_deco_08 { animation-delay: 1.20s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_06 { animation-delay: 0s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_07 { animation-delay: 0.12s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_08 { animation-delay: 0.24s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_04 { animation-delay: 0.54s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_05 { animation-delay: 0.66s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_01 { animation-delay: 0.96s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_02 { animation-delay: 1.08s; }
.pink_glow_day_cream .nayami_anime[data-direction="up"].is-active .nayami_deco_03 { animation-delay: 1.20s; }
@keyframes revealFromLeft {
	from {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}
.pink_glow_day_cream .pdrn_svg{
	position: absolute;
	width: 93%;
	left: 2.3%;
	bottom: 3.5%;
	pointer-events: none;
}

/* ===================================
サクラカサネシートマスク
=================================== */
/*背景画像*/
.sakura_mask:before{
	background-image: url("https://ken-bi.com/upload/vioteras_images/sakura_mask/lp_bg.jpg")
}
/*FV*/
.sakura_mask .bubble_anime img{
	position: absolute;
	top: 83%; 
	width: 28%;
	animation: bubble_anime 2.5s ease-in-out infinite;
}
@keyframes bubble_anime {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
.sakura_mask .ba_deco_01 {
	left: 5%;
}
.sakura_mask .ba_deco_02 {
	left: 0;
	right: 0;
	margin: auto;
}
.sakura_mask .ba_deco_03 {
	right: 5%;
}
/* カート */
.sakura_mask .cart_btn{
	width: 85.5%;
	overflow: hidden;
}
.sakura_mask .cart_btn:before {
	content: '';
	position: absolute;
	top: -150%;
	left: 0;
	width: 5%;
	height: 100%;
	background-color: #fff;
	animation: cb_shine 2.5s ease-in-out infinite;
}
@keyframes cb_shine {
	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;
	}
}
.sakura_mask .cb_10set{
	top: 35%;
}
.sakura_mask .cb_5set{
	top: 57.5%;
}
.sakura_mask .cb_3set{
	top: 78.7%;
}
.sakura_mask .cart_btn_solo{
	position: absolute;
	top: 93%;
	left: 0;
	right: 0;
	margin: auto;
	width: 81%;
	animation: none;
}