@charset "UTF-8";
/* =================================
reset
================================= */
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, sub, sup, 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;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
}
/* =================================
beetox
================================= */
/*beetox common*/
body {
	position: relative;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
body:before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url("assets/00_bg_pc.webp") center/cover no-repeat;
	z-index: -1;
}
.mainn {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	overflow: hidden;
}
.mainn img {
	width: 100%;
	height: auto;
	display: block;
}
.mainn a {
	display: block;
}
.mainn .relative_wrap {
	position: relative;
}
.mainn .abs {
	position: absolute;
	width: 10%;
}
/*アコーディオン共通*/
.mainn .accordion__container .title {
	cursor: pointer;
}
.mainn .accordion__container .box {
	display: none;
}
/*アニメーション共通*/
.mainn .roll_anime {
	clip-path: inset(0 100% 0 0);
	transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
}
.mainn .roll_anime.fadeIn {
	clip-path: inset(0);
}
.mainn .fadeInCenter, .mainn .fadeInSlow {
	opacity: 0;
}
.mainn .fadeInUp {
	opacity: 0;
	transform: translateY(30%);
}
.mainn .fadeInDown {
	opacity: 0;
	transform: translateY(-30%);
}
.mainn .fadeInLeft {
	opacity: 0;
	transform: translateX(-10%);
}
.mainn .fadeInRight {
	opacity: 0;
	transform: translateX(10%);
}
.mainn .InLeft {
	transform: translateX(-10%);
}
.mainn .InRight {
	transform: translateX(10%);
}
.mainn .fadeIn {
	animation-name: fadeIn;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
.mainn .fadeInSlow.fadeIn {
	animation-duration: 4s;
}
@keyframes fadeIn {
	100% {
		opacity: 1;
		transform: translate(0);
	}
}
/*カート*/
.mainn .b_btn {
	position: absolute;
	left: 0;
	right: 4%;
	bottom: 2.8%;
	width: 87%;
	margin: auto;
	animation: deco-anime 1s infinite alternate;
}
.mainn .b_btn:hover {
	opacity: .5;
	transition: all .2s ease-in;
	text-decoration: none;
}
@keyframes deco-anime {
	0% {
		transform: scale(0.95, 0.95);
	}
	100% {
		transform: scale(1.15, 1.15);
	}
}

/*FV*/
.mainn .fv_area .txt {
	top: 8.8%;
	width: 70.5%;
	left: 2%;
	animation: infinite;
	animation-name: bounce;
	animation-duration: 2.7s;
	animation-timing-function: linear;
	transform-origin: center bottom;
}
@keyframes bounce {
	0% {
		transform: scale(1, 1) translate(0%, 0%);
		transform: rotate(-10deg);
	}
	3% {
		transform: scale(0.6, 0.8) translate(0%, 2%);
	}
	21% {
		transform: scale(0.6, 0.8) translate(0%, 2%);
	}
	23% {
		transform: scale(1.5, 1.5) translate(0%, -5%);
		transform: rotate(0deg);
	}
	24% {
		transform: scale(1.2, 1) translate(0%, -5%);
	}
	30% {
		transform: scale(1, 1) translate(0%, 0%);
	}
}
.mainn .fv_area .arw {
	top: 36%;
	right: 5%;
	width: 42.5%;
	animation: zoomIn 1.2s ease-in-out infinite normal;
}
@keyframes zoomIn {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
.mainn .fv_area .anime {
	top: 60.3%;
	left: 16%;
	width: 24.7%;
}
.mainn .fv_area .video {
	width: 68%;
	right: 0;
	bottom: 0;
	z-index: -1;
}

/*実績*/
.mainn .sales_area .txt {
	top: 25%;
	left: 0;
	right: 0;
	margin: auto;
	width: 95.5%;
}

/*突破*/
.mainn .makuake_area .txt {
	top: 19%;
	left: 0;
	right: 0;
	margin: auto;
	width: 93.5%;
}

/*返金*/
.mainn .refund_area .bt {
	width: 59.8%;
	margin: -12.5% auto 0;
	cursor: pointer;
}
.mainn .refund_area .bt:hover {
	opacity: .5;
	transition: all .2s ease-in;
	text-decoration: none;
}
.mainn .refund_area .title:before, .mainn .refund_area .title:after {
	content: '';
	position: absolute;
	top: 0;
	right: 5.5%;
	bottom: 0;
	margin: auto;
	width: min(2.5vw, 12px);
	height: min(0.3vw, 1.5px);
	background: #fff;
	transition: all .2s ease-in;
}
.mainn .refund_area .title:before {
	transform: rotate(0deg);
}
.mainn .refund_area .title:after {
	transform: rotate(90deg);
}
.mainn .refund_area .title.close:before {
	transform: rotate(45deg);
}
.mainn .refund_area .title.close:after {
	transform: rotate(-45deg);
}
.mainn .refund_area .box {
	margin-top: 2%;
}

/*トラブル１*/
.mainn .trable01_area .shiwa1, .mainn .trable01_area .shiwa2, .mainn .trable01_area .shiwa3 {
	width: 32.6%;
}
.mainn .trable01_area .shiwa1, .mainn .trable01_area .shiwa3 {
	top: 37.7%;
}
.mainn .trable01_area .shiwa1 {
	left: 4.5%;
	animation-delay: 0.4s;
}
.mainn .trable01_area .shiwa2 {
	top: 29%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .trable01_area .shiwa3 {
	right: 4.5%;
	animation-delay: 0.8s;
}
.mainn .trable01_area .genin {
	width: 93.4%;
	left: 0;
	right: 0;
	bottom: 1.7%;
	margin: auto;
}

/*トラブル２*/
.mainn .trable02_area .txt {
	position: absolute;
	top: 10.5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 79.4%;
}

/*トラブル３*/
.mainn .before-after {
	width: 88vw;
	max-width: 570px;
	position: absolute;
	top: 35.5%;
	left: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
}
.mainn .before-after01, .mainn .before-after02 {
	height: 64.5vw;
	max-height: 422px;
	overflow: hidden;
	top: 0;
	box-sizing: border-box;
}
.mainn .before-after01__item, .mainn .before-after02__item {
	width: 88vw;
	max-width: 570px;
}
.mainn .before-after01 {
	width: 100%;
}
.mainn .before-after02 {
	width: 0;
	position: absolute;
	right: 0;
	animation: 6s img-change 0s ease-in-out infinite;
	border-left: solid 3px #fff;
}
@keyframes img-change {
	0% {
		width: 0;
	}
	10% {
		width: 0;
	}
	40% {
		width: 100%;
	}
	60% {
		width: 100%;
	}
	90% {
		width: 0;
	}
	100% {
		width: 0;
	}
}
.mainn .before-after02::before {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 10;
}
.mainn .before-after02__item {
	position: absolute;
	right: 0;
}

/*解決*/
.mainn .solution_area .drop {
	width: 68.3%;
	top: 14.3%;
	left: 0;
	animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa {
	0% {
		transform: translateY(-3.5%);
	}
	100% {
		transform: translateY(3.5%);
	}
}
.mainn .solution_area .woman {
	width: 71.7%;
	top: 18.2%;
	right: 0;
}
.mainn .solution_area .mainn_img {
	width: 49.7%;
	left: 3.8%;
	bottom: 10.1%;
}
.mainn .solution_area .hxa {
	width: 72.2%;
	bottom: 10.1%;
	right: 0;
}
.mainn .solution_area .shine {
	width: 34.4%;
}
.mainn .solution_area .shine01 {
	right: 45.6%;
	bottom: 31.3%;
	animation: solution_shine 0.6s ease 0s infinite alternate;
}
.mainn .solution_area .shine02 {
	right: -7.5%;
	bottom: 31.2%;
	animation: solution_shine 0.8s ease 0s infinite alternate;
}
.mainn .solution_area .shine03 {
	right: 9.5%;
	bottom: 3.5%;
	animation: solution_shine 1s ease 0s infinite alternate;
}
@keyframes solution_shine {
	from {
		transform: scale(0.5, 0.5);
	}
	to {
		transform: scale(2, 2);
	}
}

/*ポイント１*/
.mainn .point01_area .title {
	width: 77.7%;
	top: 12.5%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .point01_area .roll_anime {
	width: 70%;
	top: 28%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .point01_area .anime {
	width: 35%;
	left: 11.4%;
	bottom: 4.6%;
	margin: auto;
}

/*ポイント２*/
.mainn .point02_area .title {
	width: 83%;
	top: 13.8%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .point02_area .graph {
	width: 56.6%;
	left: 5.5%;
	right: 0;
	bottom: 26.7%;
	margin: auto;
}

/*ポイント３*/
.mainn .point03_area .title {
	width: 57%;
	top: 20%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .point03_area .video {
	width: 83%;
  left: 0;
  right: 0;
  bottom: 6.5%;
	margin: auto;
}

/*ポイント４_１*/
.mainn .point04_1_area .title {
	width: 84%;
  top: 14%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .point04_1_area .video {
	width: 82%;
	left: 0;
	right: 0;
	bottom: 26.5%;
	margin: auto;
}

/*ポイント４_２*/
.mainn .point04_2_area .seibun01 {
	width: 55.4%;
	top: -8.3%;
	left: .5%;
	animation: fuwafuwa01 1.14s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa01 {
	0% {
		transform: translateY(-3.5%);
	}
	100% {
		transform: translateY(3.5%);
	}
}
.mainn .point04_2_area .seibun02 {
	width: 55.2%;
	top: -0.7%;
	right: .5%;
	animation: fuwafuwa02 1.15s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa02 {
	0% {
		transform: translateY(3.5%);
	}
	100% {
		transform: translateY(-3.5%);
	}
}
.mainn .point04_2_area .seibun03 {
	width: 46.9%;
	top: 14%;
	animation: fuwafuwa03 1.18s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa03 {
	0% {
		transform: translateY(3.5%);
	}
	100% {
		transform: translateY(-3.5%);
	}
}
.mainn .point04_2_area .seibun04 {
	width: 47%;
	top: 12.7%;
	right: 0;
	animation: fuwafuwa04 1.25s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa04 {
	0% {
		transform: translateY(-3.5%);
	}
	100% {
		transform: translateY(3.5%);
	}
}
.mainn .point04_2_area .seibun05 {
	width: 38.6%;
	top: 28.2%;
	left: 1%;
	animation: fuwafuwa05 1.2s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa05 {
	0% {
		transform: translateY(-4%);
	}
	100% {
		transform: translateY(4%);
	}
}
.mainn .point04_2_area .seibun06 {
	width: 37.8%;
	top: 28.3%;
	right: 0;
	animation: fuwafuwa06 1.22s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa06 {
	0% {
		transform: translateY(4%);
	}
	100% {
		transform: translateY(-4%);
	}
}
.mainn .point04_2_area .seibun07 {
	width: 36.8%;
	top: 32%;
	left: 5%;
	right: 0;
	margin: auto;
	animation: fuwafuwa07 1.1s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa07 {
	0% {
		transform: translateY(5%);
	}
	100% {
		transform: translateY(-5%);
	}
}
.mainn .point04_2_area .gyu {
	width: 48%;
	left: 2%;
	bottom: 9.3%;
}
.mainn .point04_2_area .gyu.fadeIn {
	animation-name: gyu_bounce;
	animation-duration: .6s;
	animation-timing-function: linear;
	transform-origin: center bottom;
}
@keyframes gyu_bounce {
	0% {
		transform: scale(1, 1) translate(0%, 2%);
		transform: rotate(-10deg);
	}
	5% {
		transform: scale(0.6, 0.8) translate(0%, 2%);
	}
	60% {
		transform: scale(0.6, 0.8) translate(0%, 2%);
	}
	65% {
		transform: scale(1.5, 1.5) translate(0%, -5%);
		transform: rotate(0deg);
	}
	70% {
		transform: scale(1.2, 1) translate(0%, -5%);
	}
	100% {
		transform: scale(1, 1) translate(0%, 0%);
	}
}


/*ポイント５*/
.mainn .point05_area .kouka {
	width: 34%;
}
.mainn .point05_area .kouka01 {
	top: 19.5%;
	left: 13%;
	animation-delay: 1s;
}
.mainn .point05_area .kouka02 {
	top: 17%;
	right: 17%;
	animation-delay: 1.25s;
}
.mainn .point05_area .kouka03 {
	top: 35.5%;
	left: 0.5%;
	animation-delay: 0.75s;
}
.mainn .point05_area .kouka04 {
	top: 31.3%;
	right: -4.4%;
}
.mainn .point05_area .kouka05 {
	top: 52%;
	left: 2%;
	animation-delay: 0.5s;
}
.mainn .point05_area .kouka06 {
	top: 48%;
	right: 2%;
	animation-delay: 0.25s;
}
.mainn .point05_area .woman {
	width: 95.5%;
	top: 28%;
	right: 0;
	margin: auto;
}
.mainn .point05_area .txt01 {
	width: 37.6%;
	left: 0;
	right: 0;
	bottom: 23%;
	margin: auto;
}
.mainn .point05_area .txt02 {
	width: 76.1%;
	left: 0;
	right: 0;
	bottom: 9%;
	margin: auto;
	transition-delay: .7s;
}

/*ボイス*/
.mainn .voice_area .abs {
	width: 100%;
	left: 0;
	right: 0;
	margin: auto;
}
.mainn .voice_area .photo {
	width: 115%;
	margin: 0;
}
.mainn .voice_area .photo01 {
	top: 12.3%;
	left: auto;
}
.mainn .voice_area .photo02 {
	top: 38.8%;
	right: auto;
}
.mainn .voice_area .photo03 {
	top: 68.8%;
	left: auto;
}
.mainn .voice_area .title01 {
	top: 17.9%;
}
.mainn .voice_area .title02 {
	top: 45.7%;
}
.mainn .voice_area .title03 {
	top: 74.5%;
}
.mainn .voice_area .txt01 {
	top: 23.8%;
}
.mainn .voice_area .txt02 {
	top: 50.1%;
}
.mainn .voice_area .txt03 {
	top: 80.5%;
}


/*クロージング*/
.mainn .closing_area .shine {
	top: 19.4%;
	width: 30.4%;
	left: 3%;
	animation: closing_shine 0.8s ease 0s infinite alternate;
}
@keyframes closing_shine {
	from {
		transform: scale(0.5, 0.5);
	}
	to {
		transform: scale(4, 4);
	}
}


/*FAQ*/
.mainn .faq_area {
	margin: 0 auto;
	padding: 0 0 10%;
	background: #e5ebeb;
	text-align: left;
	position: relative;
}
.mainn .faq_area div {
	position: relative;
	margin: -21% auto 0;
	padding: 3% 0;
	background: #fff;
	width: 90%;
}
.mainn .faq_area dl {
	margin: 0 auto;
}
.mainn .faq_area dl:last-of-type {
	border: 0;
	margin-bottom: 0;
}
.mainn .faq_area dt {
	position: relative;
	width: 85%;
	margin: 0 auto;
	padding: 5.5% 7% 5.5% 0;
	box-sizing: border-box;
	line-height: 1.5;
	font-weight: bold;
	font-size: min(20px, 3.8vw);
	display: flex;
	align-items: center;
	color: #d72f82;
	word-break: break-all;
}
.mainn .faq_area dt:before, .mainn .faq_area dt:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: min(5vw, 25px);
	height: min(0.8vw, 4px);
	background: #d72f82;
	transition: all .2s ease-in;
	border-radius: 10px;
}
.mainn .faq_area dt:before {
	transform: rotate(0deg);
}
.mainn .faq_area dt:after {
	transform: rotate(90deg);
}
.mainn .faq_area dt.close:before {
	transform: rotate(45deg);
}
.mainn .faq_area dt.close:after {
	transform: rotate(-45deg);
}
.mainn .faq_area dd {
	background: #fff;
	padding: 5.5% 0 0;
	margin: 0 auto;
	width: 85%;
	border-top: .08em solid #d72f82;
	font-size: min(20px, 3.8vw);
	line-height: 1.9;
	letter-spacing: -0.04em;
	word-break: break-all;
}
.mainn .faq_area .ico {
	display: inline-block;
	width: 10%;
	margin-right: 6%;
}

/*全成分*/
.mainn .seibun_area dt {
	padding: 1em 3em;
	display: block;
	color: #fff;
	text-align: center;
	background: #d42b7e;
	font-size: min(3.3vw, 11px);
}
.mainn .seibun_area dd {
	padding: 3% 5%;
	background: #fff;
	text-align: left;
	font-size: min(3.3vw, 11px);
	line-height: 1.5;
	word-break: break-all;
}