@charset "utf-8";

body {
	font-family:"Open Sans","Helvetica Neue",Helvetica,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color: #282828;
	font-size: 16px;
	line-height: 1.7;
	text-align: left;
	background-color: #fff;
	/*
	overflow: hidden;
	height: 100vh; スクロール禁止 */
}
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
img{
	width: 100%;
	vertical-align: top;
	border-style:none;
}
li{list-style: none;}


/* ======================================================
	common
====================================================== */
.wrap{
	width: 100%;
	overflow: hidden;
}

/* ======================================================
	ロード画面
====================================================== */
#load{
	width:100%;
	height:100%;
	background-color: #fff;
	position:fixed;
	top:0;
	left: 0;
	z-index:100;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* ======================================================
	ファーストビュー
====================================================== */
#fvArea{
	position: relative;
	overflow: hidden;
	width: 100%;
	z-index: 2;
}
#fvInner_1{position: relative;}
#fvInner_2{position: relative; opacity: 1;}

#fvGrey{z-index: 35;}
#fvCopy{z-index: 34;}
#fvMovie{z-index: 33;}
#fvInner_1{z-index: 32;}
#fvText_1{z-index: 31;}
#fvText_2, #fvText_3{z-index: 31;}
#fvText_4{z-index: 31;}
#fvText_5{z-index: 31;}
#fvMen{z-index: 30;}
#fvInner_2{z-index: 29;}

#fvArea div:not(div#fvMen){position: absolute;}

/* グレースケール */
#fvGrey{
	width: 100%;
	height: 100vh;

	position: absolute;		
}

/* 世界初 */
#fvCopy{
	top: 65vw;
	height: 30vw;
	overflow: hidden;
}
#fvCopyP{
	padding-top: 300px;
}

/* 全画面動画 */
#fvMovie video{width: 100%;}

/* テキスト1（尿酸値・脂肪を） */
#fvText_1{
	opacity: 0;
	top: 53vw;
}

/* テキスト2,3（Wで下げる） */
#fvText_2, #fvText_3{
	opacity: 0;
	top: 71vw;
}

/* テキスト4（注釈） */
#fvText_4{
	opacity: 0;
	bottom:0;
}

/* SCROLL DOWN */
#fvText_5{
	width:20px;
	left:59%;
	bottom:0%;
	opacity: 0;
	bottom:0;
}

#fvText_5 a {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 50px;
  z-index: 2;
  padding: 10px 10px 80px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}


#fvText_5 a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #fff;
  overflow:hidden;
}

#fvText_5 a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 70px;
  background: rgba(255, 255, 255, .4);
}

#fvText_5 a::after {
  height: 30px;
  animation: sdl 1.5s ease infinite;
}
@keyframes sdl {
  0% {
    transform: translateY(-40px);
  }
  50%, 100% {
    transform: translateY(30px);
  }
}


/* ===== 下の黒地 ===== */
#fvWall{
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,1);
	z-index: 29;
}

/* ======================================================
	FV下 商品
====================================================== */
#product{
	position: fixed;
	z-index: 1;
	top: 0;
}
#product section{
	position: relative;
}
#product div{
	position: absolute;
}
/* パッケージ */
#product_1{
	width: 49%;
	top: -80%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 5
	/*filter: drop-shadow(7px 8px 7px rgba(70,66,69,0.7));*/
}
/* 世界初 */
#product_2{
	width: 32%;
	top: 33%;
	left: 2%;
	opacity: 0;
}

/* ======================================================
	継続率（円グラフ）
====================================================== */
.circle {
	position: relative;
	width: 60vw;
	height: 60vw;
	background: #222;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	z-index: 2;
	top:5px;
	left:5px;
}

.circle::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -30vw;
	width: 60vw;
	height: 60vw;
	background: #fff;
	transform-origin: right 30vw;
	z-index: 3;
	animation: rotate-circle-left 1s ease-out forwards;
}

.circle::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 30vw;
	width: 60vw;
	height: 60vw;
	background: #fff;
	transform-origin: left 30vw;
	z-index: 4;
	animation: rotate-circle-right 1s linear forwards;
}

.circle .circle-inner {
	position: absolute;
	top: 7.5vw;
	left: 7.5vw;
	width: 45vw;
	height: 45vw;
	background: #fff;
	border-radius: 50%;
	z-index: 5;
}
#circle_outer {
	position: relative;
	top: 16vw;
	left: 19vw;
	width: 60vw;
	height: 60vw;
	background: #fff;
	border-radius: 50%;
	z-index: 1;
}
.circle-font {
	position: absolute;
	top: 20vw;
	left: 20vw;
	z-index: 7;
	font-size:6em;
	text-shadow:2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;;
}
.circle-font span {
	font-size:0.5em;
}

/* ===== 円グラフ２ ===== */
.circle2 {
	position: relative;
	width: 60vw;
	height: 60vw;
	background: #f3d67a;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	z-index: 2;
}
.circle2::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -30vw;
	width: 60vw;
	height: 60vw;
	background: #898989;
	transform-origin: right 30vw;
	z-index: 3;
	animation: rotate-circle-left2 1s 0.5s ease-out forwards;
}
.circle2::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 30vw;
	width: 60vw;
	height: 60vw;
	background: #898989;
	transform-origin: left 30vw;
	z-index: 4;
	animation: rotate-circle-right2 1s 0.5s linear forwards;
}
.circle2 .circle-inner2 {
	position: absolute;
	top: 7.5vw;
	left: 7.5vw;
	width: 45vw;
	height: 45vw;
	background: #898989;
	border-radius: 50%;
	z-index: 5;
}
#circle_outer2 {
	position: relative;
	/*left: 19vw;*/
	left: 20vw;
	/*width: 60vw;*/
	width: 58vw;
	/*height: 60vw;*/
	height: 58vw;
	background: #898989;
	border-radius: 50%;
	z-index: 1;
}
.circle-font2 {
	position: absolute;
	/*top: 6.2vw;*/
	top: 7vw;
	/*left: 6.2vw;*/
	left: 6.8vw;
	width:100%;
	z-index: 7;
	font-size:6em;
	text-shadow:2px 2px 0 #898989,-2px 2px 0 #898989,2px -2px 0 #898989,-2px -2px 0 #898989;;
}
.circle-font2 img {
	width:80%!important;
}

/* ======================================================
	体内合成
====================================================== */
#realInner{
	position: relative;
}
#realInner p{
	position: absolute;
}
#realCopy_1{
	top: -20%;
	opacity: 0;
}
#realCopy_2{
	bottom: 19%;
	opacity: 0;
}

/* ======================================================
	そこで
====================================================== */
#choice section{
	position: relative;
}
#choiceP{
	position: absolute;
	right: -40%;
	top: 8%;
	width: 32%;
	filter: drop-shadow(2px 3px 5px rgba(70,66,69,0.5));
}

/* ======================================================
	３つの理由
====================================================== */
#reason section{position: relative;}
#reason section p{position: absolute;}

#reason_gif1 p{
	top: 6%;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 86%;
}
#reason_gif2 p{
	top: 3%;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 84%;
}

/* ======================================================
	ビフォーアフター
====================================================== */
#ba{
	background: url(../images/wbuster7_05.jpg)repeat;
}
.baInner{
	width: 200vw;
	display: flex;
	margin-left: 0vw;
}

/* ======================================================
	QandA
====================================================== */
#faq input{display: none;}
#faq .question{text-align: center;}
#faq label{position: relative; display: block;}
#faq label img{cursor: pointer;}

#faq .answer{
	height: 0;
	overflow: hidden;
	padding: 3% 0 0 0;
	transition: 0.3s;
}
#faq input:checked + .question > .answer { 
	height: auto; 
	padding: 3% 0 5% 0;
}

/* 矢印 */
#faq label p{
	position: absolute;
	width: 6%;
	right: 7%;
	top: 31%;
	line-height: 1;
	transition: 0.3s;
	transform:rotate(180deg);
}
#faq input:checked + .question > label > p{
	transform:rotate(0deg);
	transform-origin:50% 50%;
}

/* ======================================================
	おまとめ買い
====================================================== */
#set{position: relative;}
#set div{
	position: absolute;
	bottom: 8%;
	width: 90%;
	left: 0;
	right: 0;
	margin: 0 auto;
}

/* ======================================================
	スライド
====================================================== */
#slide_1{
	background: url(../images/wbuster2_03.jpg)no-repeat top center;
	background-size: cover;
}
.slider_2{
	background: url(../images/wbuster2_06.jpg)no-repeat top center;
	background-size: cover;
}
.slider_2 div p{
	margin: 4%;
}

/* ===== 矢印 ===== */
.slider .slick-slide{
	margin: 5px;
}
/* スライド１ */
.prevArrow, .nextArrow{
	position: absolute;
	width: 34px;
	top: 54%;
	z-index: 99;
	cursor: pointer;
}
.prevArrow{ left: 1%;}
.nextArrow{ right: 1%}

/* スライド2 */
.prevArrow2, .nextArrow2{
	position: absolute;
	width: 15px;
	top: 52%;
	z-index: 99;
	cursor: pointer;
}
.prevArrow2{ left: 5%;}
.nextArrow2{ right: 5%}

/* ======================================================
	オファーエリア
====================================================== */
/* ==== オファーエリア１ ===== */
.btn{
	width: 90%;
	display: block;
	margin: 0 auto 15px auto;
}
#offer_1{
	background:url(../images/wbuster1_03.jpg)no-repeat top center;
	background-size: 100%;
	padding-top: 17%;
}
.underLine{line-height: 0;}

/* ===== オファーエリア２ =====*/
#offer_2{
	position: relative;
}
#offer_2 p{
	position: absolute;
	bottom: 5%;
}

/* ===== オファーエリア３ =====*/
.offerInfoBtn{
	position: relative;
}
.offerInfoBtn p{
	position: absolute;
	bottom: 0;
}

/* ======================================================
	全額返金保証
====================================================== */
.reBtnOpen{display: block;}
.reBtnClose{display: none;}
.reToggleOpen{display: none;}

.infoBtnOpen{display: block;}
.infoBtnClose{display: none;}
.infoToggleOpen{display: none;}

.reBtnOpen, .reBtnClose, .infoBtnOpen, .infoBtnClose{
	cursor: pointer;
}

/* ======================================================
	animation
====================================================== */
/* ===== FV ===== */

/* 世界初 */
.appearAni{
	animation-name: appear;
	animation-delay: 0s;
	animation-duration: 0.001s;
	animation-fill-mode: both;
	animation-timing-function: ease;

}
@keyframes appear{
	from{
		padding-top: 300px;
	}
	to{
		padding-top: 0;
	}
}

/* ビールエリア非表示 */
.beerFadeOutAni{
	animation-name: beerFadeOut;
	animation-delay: 0s;
	animation-duration: 0s;
	animation-fill-mode: both;
}
@keyframes beerFadeOut{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}

/* テキスト群 */
.popoutAni{
	animation-name: popout;
	animation-duration: 0.25s;
	animation-fill-mode: both;
}
@keyframes popout{
	from{
		opacity: 0;
		transform: scale(1.5);
	}
	1%{
		opacity: 1;
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}
.popout2Ani{
	animation-name: popout2;
	animation-duration: 0.25s;
	animation-fill-mode: both;
}
@keyframes popout2{
	from{
		opacity: 0;
		transform: scale(1.8);
	}
	1%{
		opacity: 1;
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}

#fvText_1{animation-delay: 1s;}
#fvText_2{animation-delay: 1.5s;}
#fvText_3{animation-delay: 2s;}

/* 注釈 */
.fadeInAni{
	animation-name: fadeIn;
	animation-delay: 3s;
	animation-duration: 1s;
	animation-fill-mode: both;
}

.fadeInAni-scroll{
	animation-name: fadeIn;
	animation-delay: 2.5s;
	animation-duration: 1s;
	animation-fill-mode: both;
}
@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/* ===== プロダクト ===== */
.slideInAni{
	animation-name: slideIn;
	animation-delay: 0;
	animation-duration: 1s;
	animation-fill-mode: both;
}
@keyframes slideIn{
	from{
		top: -80%;
	}
	to{
		top:31%;
	}
}

.markAppearAni{
	animation-name: markAppear;
	animation-delay: 1s;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}
@keyframes markAppear{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/* ===== 円グラフ ===== */
@keyframes rotate-circle-right {
	0%   {
		transform: rotate(0deg);
		background: #fff;
	}
	50%  {
		transform: rotate(180deg);
		background: #fff;
	}
	50.001% {
		transform: rotate(360deg);
		background: #222;
	}
	100% {
		transform: rotate(360deg);
		background: #222;
	}
}

@keyframes rotate-circle-left {
	0%   { transform: rotate(0deg); }
	50%  { transform: rotate(0deg); }
	100% { transform: rotate(170deg); }
}

/* ===== 円グラフ２ ===== */
@keyframes rotate-circle-right2 {
	0%   {
		transform: rotate(0deg);
		background: #898989;
	}
	50%  {
		transform: rotate(180deg);
		background: #898989;
	}
	50.001% {
		transform: rotate(360deg);
		background: #f3d67a;
	}
	100% {
		transform: rotate(360deg);
		background: #f3d67a;
	}
}

@keyframes rotate-circle-left2 {
	0%   { transform: rotate(0deg); }
	50%  { transform: rotate(0deg); }
	100% { transform: rotate(80deg); }
}


/* ===== 体内合成 ===== */
.realCopySlideAni{
	animation-name: realCopySlide;
	animation-duration: 1s;
	animation-fill-mode: both;
}
@keyframes realCopySlide{
	from{
		top: -20%;
		opacity: 0;
	}
	to{
		top:3%;
		opacity: 1;
	}
}
.realCopyPopAni{
	animation-name: realCopyPop;
	animation-delay: 1s;
	animation-duration: 0.3s;
	animation-fill-mode: both;	
}
@keyframes realCopyPop{
	from{
		opacity: 0;
		transform: scale(0.5);
	}
	1%{
		opacity: 1;
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}

/* ===== そこで ===== */
.choiceAni{
	animation-name: choiceSlide;
	animation-duration: 1s;
	animation-fill-mode: both;
}
@keyframes choiceSlide{
	from{
		right: -40%;
	}
	to{
		right: 3%;
	}
}

/* ===== ビフォアアフター ===== */
#ba_1, #ba_2, #ba_3{
	animation-name: baAni;
	animation-duration: 5.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
#ba_2{animation-delay: 3s;}
#ba_3{animation-delay: 6s;}

@keyframes baAni{
	from{
		margin-left: 0vw;
	}
	50%{
		margin-left: 0vw;
	}
	55%{
		margin-left: -100vw;
	}
	to{
		margin-left: -100vw;
	}
}

/* ===== ボタン ===== */
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
}

/* ======================================================
======================================================
	PC
======================================================
====================================================== */
@media only screen and (min-width: 750px) {
	/* PC用 */
	.wrap, #loading{
		width: 650px;
		margin: 0 auto;
	}
	a:hover img{
		opacity: 0.7;
		transition: 0.3s;
	}
	.reBtnOpen:hover, .reBtnClose:hover, .infoBtnOpen:hover, .infoBtnClose:hover{
		/*opacity: 0.7;*/
		/*transition: 0.3s;	*/
	}
	html, body{
        overflow-y: scroll;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
	}
	html::-webkit-scrollbar, 
	body::-webkit-scrollbar{
		display:none; /* Chrome, Safari 対応 */
	}

	/* ===== FV ===== */
	#fvText_1{top: 45vh;}
	#fvText_2, #fvText_3{top:61vh;}
	#fvCopy{top: 40vh; height: 183px;}

	@keyframes appear{
		from{
			padding-top: 200px;
		}
		to{
			padding-top: 0;
		}
	}

	/* ===== ビフォーアフター ===== */
	.baInner{
		width: 1300px;
	}
	@keyframes baAni{
		from{
			margin-left: 0;
		}
		50%{
			margin-left: 0;
		}
		55%{
			margin-left: -650px;
		}
		to{
			margin-left: -650px;
		}
	}

	/* ===== 継続率（円グラフ） ===== */
	.circle {
		position: relative;
		width: 350px;
		height: 350px;
		background: #222;
		border-radius: 50%;
		text-align: center;
		overflow: hidden;
		z-index: 2;
		top:5px;
		left:5px;
	}
	.circle::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: -175px;
		width: 350px;
		height: 350px;
		background: #fff;
		transform-origin: right 175px;
		z-index: 3;
		animation: rotate-circle-left 1s ease-out forwards;
	}
	.circle::after {
		content: "";
		display: block;
		position: absolute;
		top: 0px;
		left: 175px;
		width: 350px;
		height: 350px;
		background: #fff;
		transform-origin: left 175px;
		z-index: 4;
		animation: rotate-circle-right 1s linear forwards;
	}
	.circle .circle-inner {
		position: absolute;
		top: 35px;
		left: 35px;
		width: 280px;
		height: 280px;
		background: #fff;
		border-radius: 50%;
		z-index: 5;
	}
	#circle_outer {
		position: relative;
		top: 130px;
		left: 140px;
		width: 360px;
		height: 360px;
		background: #fff;
		border-radius: 50%;
		z-index: 1;
	}
	.circle-font {
		position: absolute;
		top: 92px;
		left: 95px;
		z-index: 7;
		font-size:6em;
		text-shadow:2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;;
	}
	.circle-font>img{
		width:100%!important;
	}



	/* ===== 継続率（円グラフ） ===== */
	.circle2 {
		position: relative;
		width: 350px;
		height: 350px;
		background: #f3d67a;
		border-radius: 50%;
		text-align: center;
		overflow: hidden;
		z-index: 2;
	}
	.circle2::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: -175px;
		width: 350px;
		height: 350px;
		background: #898989;
		transform-origin: right 175px;
		z-index: 3;
		animation: rotate-circle-left2 1s ease-out forwards;
	}
	.circle2::after {
		content: "";
		display: block;
		position: absolute;
		top: 0px;
		left: 175px;
		width: 350px;
		height: 350px;
		background: #898989;
		transform-origin: left 175px;
		z-index: 4;
		animation: rotate-circle-right2 1s linear forwards;
	}
	.circle2 .circle-inner2 {
		position: absolute;
		top: 35px;
		left: 35px;
		width: 280px;
		height: 280px;
		background: #898989;
		border-radius: 50%;
		z-index: 5;
	}
	#circle_outer2 {
		position: relative;
/*
		top: 130px;
*/
		left: 140px;
		width: 350px;
		height: 350px;
		background: #898989;
		border-radius: 50%;
		z-index: 1;
	}
	.circle-font2 {
		position: absolute;
		top: 36px;
		left: 36px;
		width: 80%;
		z-index: 7;
		font-size:6em;
		text-shadow:2px 2px 0 #898989,-2px 2px 0 #898989,2px -2px 0 #898989,-2px -2px 0 #898989;;
	}
	.circle-font2>img{
		width:100%!important;
	}

}


/* ======================================================
	カート
====================================================== */
div#ukokkei-landing-page-container img{
	width: auto;
}

/* ======================================================
======================================================
	フッター
======================================================
====================================================== */
.footer {
  	background: #fff;
   	text-align: center;
   	font-size:13px;
   	padding-top:15px;
}

.footer p.copy {
	font-size:12px;
	padding:5px 0;
}
    @media all and (min-width:376px) and (max-width:414px) {
      .qanda .toggle dt .qanda__icon {
        top: 14%;
      }

      .qanda2 .toggle dt .qanda__icon {
        top: 9%;
      }

      .qanda2 .toggle dt .qanda__icon2 {
        top: 18%;
      }
    }

    @media all and (min-width:321px) and (max-width:375px) {
      .qanda .toggle dt .qanda__icon {
        top: 5%;
      }

      .qanda2 .toggle dt .qanda__icon {
        top: 8%;
      }

      .qanda2 .toggle dt .qanda__icon2 {
        top: 20%;
      }
    }

    @media all and (min-width:0px) and (max-width:320px) {
      .qanda .toggle dt .qanda__icon {
        top: -5%;
      }

      .qanda2 .toggle dt .qanda__icon {
        top: -5%;
      }

      .qanda2 .toggle dt .qanda__icon2 {
        top: 10%;
      }
    }