@charset "utf-8";
/* CSS Document */

/* -----------------------------------------
  base（font-familyなどの変更。fontは1.6rem＝16px）
----------------------------------------- */

ol, ul {
  list-style: none;
}

#wrapper h1,
#wrapper h2,
#wrapper div,
#wrapper p {
  margin: 0;
  padding: 0;
  outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	max-height: 99999px;
}

/* 解析タグの隙間対策 */
body > img {
  display: none;
}

/* 画像の隙間対策 */
#wrapper img {
  display: block;
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
}

#wrapper {
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}


/* -----------------------------------------
  link（テキストリンク関連）
----------------------------------------- */
#wrapper a {
  display: inline-block;
  transition: all 0.3s ease 0s;
}
#wrapper a:hover {
  filter: brightness(1.1);
}


/* -----------------------------------------
  button（ボタン関連）
----------------------------------------- */
#wrapper .fv_btn {
  position: absolute;
  left: 50.8%;
  bottom: 3.9%;
  width: 97%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#wrapper .cv_btn {
  position: absolute;
  left: 8%;
  bottom: 31%;
  width: 98%;
animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn3 {
  position: absolute;
  left: 8%;
  bottom: 18%;
  width: 98%;
	animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn3.sold {
	animation: none;
	width: 85%;
    bottom: 18.5% !important;
}
#wrapper .cv_btn.cv_btn_ad {
  bottom: 29%;
}
#wrapper .cv_btn3.cv_btn3_ad {
  bottom: 16%;
}
#wrapper .cv_btn.cv_btn_8cp {
  bottom: 31.5%;
}
#wrapper .cv_btn3.cv_btn3_8cp {
  bottom: 19%;
}
#wrapper .cv_btn.cv_btn_knmsm {
	bottom: 12.5%;
}
#wrapper .cv_btn2 {
  position: absolute;
  left: 8%;
  bottom: 56%;
  width: 98%;
	animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn4 {
  position: absolute;
  left: 8%;
  bottom: 13%;
  width: 98%;
	animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn4.sold {
	animation: none;
	width: 85%;
}

@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

@media screen and (max-width: 640px) {
#wrapper .cv_btn {
  position: absolute;
  left: 6%;
  bottom: 30%;
  width: 88%;
	animation: spin 1s ease-in-out infinite;
	}
#wrapper .cv_btn.sold {
	bottom: 31%;
}
#wrapper .cv_btn3.sold {
	animation: none;
	width: 88%;
}
#wrapper .cv_btn2 {
  position: absolute;
  left: 7.5%;
  bottom: 54%;
  width: 86%;
	animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn4.sold {
	bottom: 13%;
}
#wrapper .cv_btn3 {
  position: absolute;
  left: 6%;
  bottom: 17%;
  width: 88%;
	animation: spin 1s ease-in-out infinite;
	}
#wrapper .cv_btn4 {
  position: absolute;
  left: 7.5%;
  bottom: 11%;
  width: 86%;
	animation: spin 1s ease-in-out infinite;
	}
#wrapper .cv_btn.cv_btn_ad {
  bottom: 28.5%;
}
#wrapper .cv_btn3.cv_btn3_ad {
  bottom: 15%;
}
#wrapper .cv_btn.cv_btn_8cp {
  bottom: 31%;
}
#wrapper .cv_btn3.cv_btn3_8cp {
  bottom: 18%;
}
#wrapper .cv_btn.cv_btn_knmsm {
	bottom: 12%;
}
}
#wrapper .video {
  position: absolute;
  vertical-align: bottom;
  left: 49.8%;
  bottom: 9.2%;
  width: 85.4%;
  height: 48.2%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#wrapper .v-box{
	position: relative;
	width: 100%;
}
#wrapper .video_2 {
  position: absolute;
  vertical-align: bottom;
  left: 49.8%;
  bottom: 30.2%;
  width: 81.4%;
  height: auto;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#wrapper .video_3 {
  position: absolute;
  vertical-align: bottom;
  left: 50%;
  bottom: 6.5%;
  width: 85.5%;
  height: 56%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#wrapper video, #wrapper {
  width: 100%;
  height: auto;
}
#wrapper .g_box{
  position: absolute;
  vertical-align: bottom;
  left: 49.8%;
  bottom: 11%;
  width: 85.4%;
  height: 48.2%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#wrapper .gyu{
  position: absolute;
  vertical-align: bottom;
  right: 16%;
  top:6%;
  width: 22%;
  animation: fade3 0.4s ease-in-out infinite;
}
/* -----------------------------------------
  utility（clearfix・mb10など）
----------------------------------------- */
/* clearfix */
#wrapper .clearfix {
  width: 100%;
}
#wrapper .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* 位置 */
#wrapper .txtC {
  text-align: center !important;
}
/* positionでのレイアウトの外枠に使用 */
#wrapper .p-box {
  position: relative;
}
#wrapper .tanpin{
	position: relative;
}

/*なちょすFV*/
#wrapper .fv_nht{
	position: relative;
}
#wrapper .fv_btn_nht{
  position: absolute;
  left: 50.8%;
  bottom: 2%;
  width: 97%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

/*FVボタン変更*/
#wrapper .fv_btn_1_b {
  position: absolute;
  left: 7.5%;
  bottom: 6%;
  width: 97%;
  animation: spin 1s ease-in-out infinite;
}
#wrapper .fv_btn_1_sp {
  position: absolute;
  left: 6%;
  bottom: 6%;
  width: 88%;
  animation: spin 1s ease-in-out infinite;
}
#wrapper .fv_btn_2_b {
  position: absolute;
  left: 50.8%;
  bottom: 4%;
  width: 97%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
/*初回500円3回縛り*/
#wrapper .fv_btn_500 {
  position: absolute;
  left: 2.5%;
  bottom: 17%;
  width: 97%;
  animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn_500 {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 98%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
/*--------------------------
FV違いABテスト_20220217
---------------------------*/
/*ここからFV変更*/
#wrapper .glass_2{
	position: absolute;
	left: 36%;
	top:15%;
	width: 36%;
}
#wrapper .berry_2{
	position: absolute;
	left: 0%;
	top:42%;
	width: 50%;
}
#wrapper .fv_btn_1 {
  position: absolute;
  left: 2%;
  bottom: 15%;
  width: 98%;
  animation: spin 1s ease-in-out infinite;
}
#wrapper .fv_btn_2 {
  position: absolute;
  left: 2%;
  bottom: 2%;
  width: 98%;
}
/*ここまでFV変更*/

/*おためし7日分500円*/
#wrapper .fv_btn_3p {
  position: absolute;
  left: 2%;
  bottom: 2%;
  width: 98%;
  animation: spin 1s ease-in-out infinite;
}
#wrapper .cv_btn_3p {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 98%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

/*成分表アコーディオン*/

.seibunbox{
  max-width: 750px;
	margin: 5% auto 5%!important;
	text-align: center;
}
.seibunbox_sp{
  max-width: 750px;
	margin: 5% auto 5%!important;
	text-align: center;
}
.seibunbox img{
  display: block;
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
}
.seibunbox_sp img{
  display: block;
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
}
.acbox{
	text-align: center;
	width: 90%;
	margin: 0 auto 0.5%!important;
	font-size: 14px;
}
.seibunbox_sp .acbox{
	text-align: center;
	width: 100%;
	margin: 0 auto 1%!important;
	font-size: 14px;
}
.acbox img{
	width: 100%;
}
.acd-check{
    display: none;
}
.acbox input[type=checkbox] + label::before {
	display: none!important;
}
.acbox input[type=checkbox] + label{
	padding: 0!important;
}
.acbox input[type=checkbox]:checked + label::after{
	display: none!important;
}
.acbox .acd-label{
    color: #fff;
    display: block;
	margin: 0 auto;
    padding: 0;
}
.acbox .acd-content{
	margin: 0 auto;
	width: 100%;
    height: 0;
    opacity: 0;
    padding: 0;
    transition: .5s;
    visibility: hidden;
}
.acbox .acd-check:checked + .acd-label + .acd-content{
	margin: 0 auto;
	display: block;
	width: 100%;
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
	background-color: #FFE8F0;
}