@charset "UTF-8";
/* ===================================================================
 CSS information
 file name  :  style.css
 style info :  ビタブリッドワン：LPスタイル
=================================================================== */

@charset 'utf-8';

html main {
	font-size: 62.5%;
}

:root {
	--BgClr01: #f7f2d2;
	--BgClr02: #c8e4ef;
	--Clr01: #ff989f;
	--Clr02: #ff757f;
	--Clr03: #bd000d;
	--Clr04: #70aac7;
	--Clr05: #007cdb;
	--Clr06: #cb151d;
	--Clr07: #79a8c3;
	--ClrWht: #fff;
	--ClrMkr: #000;
	--ClrSdw: rgb(0 0 0 / 30%);
}

/*------------------------------
  Swiper
------------------------------*/
.swiper-wrapper {
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	z-index: 1;
	width: 100%;
	height: 100%;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.swiper-wrapper {
	-webkit-transition-timing-function: linear!important;
	-o-transition-timing-function: linear!important;
	transition-timing-function: linear!important;
}

.swiper-container-free-mode {
	> .swiper-wrapper {
		-webkit-transition-timing-function: ease-out;
		-moz-transition-timing-function: ease-out;
		-ms-transition-timing-function: ease-out;
		-o-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
		margin: 0 auto;
	}
}

.swiper-slide {
	position: relative;
	-webkit-flex-shrink: 0;
	-ms-flex: 0 0 auto;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity .5s, transform .5s ease-in-out;
	width: 100%;
	height: 100%;
	margin: 0 auto;

	&.swiper-slide-active {
		opacity: 1;
	}
}

.slider {
	&.swiper {
		position: relative;
		overflow: hidden;
	}

	.swiper-wrapper {
		.swiper-slide {
			opacity: .5;

			&.swiper-slide-active {
				opacity: 1;
			}
		}
	}
}

[class*="-pagination"]:not([class^=swiper-pagination-]) {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 8%;
	transform: translate3d(0, 0, 0);
	z-index: 10;
	bottom: 2.5rem;
	left: 0;
	text-align: center;
	width: 100%;
	padding: 0 12rem;
}

.swiper-pagination-bullet {
	aspect-ratio: 1 / 1;
	cursor: pointer;
	width: 4%;
	height: auto;
	display: inline-block;
	border-radius: 50%;
	background-color: var(--MainClr01);
	opacity: .3;
	transition: .3s opacity;

	&.swiper-pagination-bullet-active {
		opacity: 1;
	}
}

[class*=-button-] {
	position: absolute;
	display: block;
	cursor: pointer;
	z-index: 1;
	opacity: 1;

	svg {
		width: 100%;

		> circle {
			fill: var(--MainClr01);
			stroke: var(--MainClr01);
			stroke-width: .1rem;
			transition: fill .3s;

			@media screen and (max-width: 500px) {
				stroke-width: .2rem;
			}
		}

		> polyline {
			fill: transparent;
			stroke: var(--ClrWht);
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: .15rem;
			transition: stroke .3s;

			@media screen and (max-width: 500px) {
				stroke-width: .3rem;
			}
		}
	}

	&:hover {
		svg {
			> circle {
				fill: var(--ClrWht);
			}

			> polyline {
				stroke: var(--MainClr01);
			}
		}
}
}


.lp_wrapper {
	background-image: linear-gradient( to right, var(--BgClr01) 0%, var(--BgClr01) 50%, var(--BgClr02) 50%, var(--BgClr02) 100% );
	width: 100%;

	.lp_cnt,
	.insert-area {
		background-color: var(--ClrWht);
		box-shadow: 0px 0px 1rem .4rem var(--ClrSdw);
		font-size: 1.8rem;
		width: 750px;
		max-width: 100%;
		margin: 0 auto;

		img {
			display: block;
			font-size: 0;
			backface-visibility: hidden;
			vertical-align: bottom;
			width: 100%;
		}
	}

	*,
	*::before,
	*::after {
			box-sizing: border-box;
	}

	.outpark {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 10rem;
		padding: 2rem 15rem;
	}
}

.fv {
	position: relative;
	overflow: hidden;

	.bg {
		position: relative;
		width: 100%;
	}

	.cnt {
		position: absolute;
		opacity: 0;
		left: 0;
		width: 100%;
	}

	.fv_txt {
		animation: fadein02 1s both ease-out 0s;
		top: 0;
	}

	.fv_face_01 {
		opacity: 1;
		bottom: min(calc(350/750 * 100vw), 350px);
	}

	.fv_plus {
		opacity: 1;
		transform-origin: center 47%;
		animation: scaleout01 .5s both linear 1.5s;
	}

	.fv_one_01 {
		opacity: 1;
		bottom: 0.5%;
	}
}

.aword_swiper {
  position: relative;
}
.aword-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.aword--slider,
.aword-pagination,
.aword-button-prev,
.aword-button-next {
  position: relative;
  z-index: 1;
}

	#cta01 .cta_04 .cnt {
		position: absolute;
		width: 85%;
		top: 6%;
		left: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	#cta02 .cta_04 .cnt, #cta03 .cta_04 .cnt {
		width: 85%;
		top: 8%;
		right: 0;
		left: 0;
		margin: 0 auto;
	}

.user {
	position: relative;
	z-index: 3;

	.c1_05 {
		position: relative;
		margin-top: max(calc(-129/750 * 100vw), -129px);
		z-index: -1;
	}
}

.cta_btn {
	&.fv_cta {
		width: 91%;
		max-width: 702px;
		position: absolute;
		bottom: min(calc(95 / 750 * 100vw), 95px);
		left: min(calc(24/750 * 100vw), 24px);
	}
}
.cta_cta {
	img {
		animation: beat 1.8s ease infinite;
	}
}

.pos-ra {
	position: relative;

	.bg {
		position: relative;
	}

	.cnt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		.c1_03 & {
			padding: 2rem 3.5rem 0;

			video {
				aspect-ratio: 622 / 369;
				width: 100%;
			}
		}

		.c1_06 & {
			padding: 0;

			.video_clip {
				padding: 25.5rem 1.7rem 0 26.8rem;

					.video_clip_inner {
						clip-path: circle(37% at 54% 53%);
						aspect-ratio: 1 / 1;
						width: 100%;

							video {
								aspect-ratio: 1 / 1;
								width: 100%;
							}

					}
				}
			}

			.cta_slider_04 & {
				padding: 14rem 7rem 0 8rem;
			}

			.c5_02 & {
				width: 80%;
				top: 30%;
				right: 0;
				margin: 0 auto;
			}

			.c5_05 & {
				width: 80%;
				top: 61%;
				right: 0;
				margin: 0 auto;
			}

			.c7_03 & {
				padding: 42rem 10rem 0;
			}

			.c7_04 & {
				width: 73%;
				top: 38.5%;
				right: 0;
				margin: 0 auto;

				video {
					aspect-ratio: 506 / 380;
					width: 100%;
				}
			}

			.c8_01 & {
				width: 77%;
				top: 49%;
				right: 0;
				margin: 0 auto;
			}

			.c8_02 & {
				top: 49%;
			}

			.c8_03 & {
				width: 90%;
				top: 37%;
				right: 0;
				margin: 0 auto;
			}
	}
}

.voice-face .note {
	font-size: .8rem;
	text-align: right;
	width: 95%;
	margin: 0 auto 8vw;
}


.cta_bg {
	background: url(//images.vitabrid.co.jp/sp/imgs/lp/face/v5/cta_bg_top.webp) no-repeat center top / 100% auto, url(//images.vitabrid.co.jp/sp/imgs/lp/face/v5/cta_bg_bottom.webp) no-repeat center bottom / 100% auto, var(--Clr01);
	padding-bottom: 6.2rem;

	.cta_inner {
		background-color: var(--ClrWht);
		border-radius: .8rem .8rem 0 0;
		width: calc( 670 / 750 * 100%);
		margin: auto;

		> p {
			padding: 1rem 0 5rem;

			img {
				transform: scale(1.12107);
			}
		}
	}

	.cta_inner_02 {
		background-color: transparent;
		width: calc( 669 / 750 * 100%);
		margin: auto;
	}

	.faq_anno {
		color: var(--ClrWht);
		font-size: .8em;
		font-weight: 700;
		padding: 3rem 1em;
	}
}

	#cta02 .cta_bg , #cta03 .cta_bg {
		padding-bottom: 3rem;
	}

.cta_swiper {
	--MainClr01: var(--Clr02);

	position: relative;
	width: 100%;
	padding: 0 0 6rem;

	.swiper-slide {
		border-radius: .8rem .8rem 0 0;
	}

	[class^=cta-button-] {
		top: calc(50% - 3rem);
		width: 8%;
	}

	[class^=cta-button-prev] {
		left: -4%;
		transform: translateY(-50%);
	}

	[class^=cta-button-next] {
		right: -4%;
		transform: translateY(-50%);
	}
}

.faq_swiper {
	--MainClr01: var(--Clr03);

	position: relative;
	width: 100%;
	padding: 9% 0 6rem;

	[class^=faq-button-] {
		top: calc(50% - 3rem);
		width: 10%;
	}

	[class^=faq-button-prev] {
		left: 1%;
		transform: translateY(-50%);
	}

	[class^=faq-button-next] {
		right: 1%;
		transform: translateY(-50%);
	}
}

.cvf_swiper {
	--MainClr01: var(--Clr03);

	position: relative;
	width: 100%;
	padding: 0 0 4rem;

	[class^=cvf-button-] {
		top: calc(50% - 3rem);
		width: 8%;
	}

	.cvf-button-prev {
		left: 2%;
		transform: translateY(-50%);
	}

	.cvf-button-next {
		right: 2%;
		transform: translateY(-50%);
	}
}
.aword_swiper {
	--MainClr01: var(--Clr03);

	position: relative;
	width: 100%;
	padding: .8em 0 1em;

	[class^=aword-button-] {
		top: calc(50% - 3rem);
		width: 8%;
	}

	.aword-button-prev {
		left: 1%;
		transform: translateY(-50%);
	}

	.aword-button-next {
		right: 1%;
		transform: translateY(-50%);
	}
}
.aword .cvf_swiper{ position: relative; }

.aword .aword-button-prev,
.aword .aword-button-next{
  position: absolute;
  top: 57%;
  transform: translateY(-50%);
  z-index: 5;
}
.aword .aword--slider .swiper-wrapper{
  margin: 0;
  padding: 0;
  list-style: none;
}
.aword .aword--slider img{
  display: block;
  width: 100%;
  height: auto;
}
.aword .aword-pagination {
  bottom: .4em;
}
.aword .swiper-slide img{
  width: 90%;
  max-width: 480px;
  margin: 0 auto;
  display: block;
}

.wrinkles_swiper {
	--MainClr01: var(--Clr04);

	position: relative;
	width: 100%;
	padding: 0 0 6rem;

	.slider {
		& .swiper-wrapper {
			.swiper-slide {
				opacity: 0;

				&.swiper-slide-active {
					opacity: 1;
				}
			}
		}
	}

	.wrinkles-pagination {
		bottom: 2.5rem;
		padding: 0 12rem;
	}

	[class^=wrinkles-button-] {
	top: calc(50% - 3rem);
	width: 8%;
	}

	.wrinkles-button-prev {
		left: 2%;
		transform: translateY(-50%);
	}

	.wrinkles-button-next {
		right: 2%;
		transform: translateY(-50%);
	}
}

.cvo_area {
	position: relative;

	.cvo_area_bg {
		position: relative;
	}

	.cvo_area_cnt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
}

.cvo_area_cnt div.cnt video {
	position: absolute;
	right: 5.5vw;
	width: 44.7%;
	padding-top: 7%;
} 

.cvo_swiper {
	--MainClr01: var(--Clr05);

	position: relative;
	width: 100%;
	padding: 0 0 6rem;

	.cvo-pagination {
		bottom: 6.5rem;
	}

	[class^=cvo-button-] {
		top: calc(50% - 3rem);
		width: 8%;
	}

	.cvo-button-prev {
		left: 2%;
		transform: translateY(-50%);
	}

	.cvo-button-next {
		right: 2%;
		transform: translateY(-50%);
	}
}

.qa_bg {
	background-size: 100% auto;
	background-position: center top;
	background-repeat: repeat-y;

	&.bg_face {
		background-image: url(//images.vitabrid.co.jp/sp/imgs/lp/face/v5/qa_face_bg.webp?250709);
		padding-bottom: 1.5rem;
	}

	&.bg_one {
		background-image: url(//images.vitabrid.co.jp/sp/imgs/lp/face/v5/qa_one_bg.webp?250709);
		padding-bottom: 4rem;
	}

		.qa_area {
			dt {
				&::before,
				&::after {
					color: var(--Clr07);
				}
			}
		}
	}

	.qa_area {
		padding: 0 3rem 5rem;

		dt {
			position: relative;
			cursor: pointer;
			border-radius: 1rem;

			img {
				border-radius: 1rem;
			}

			&::before {
				content: '+';
				display: block;
				line-height: 3.5rem;
				transform: translate(0, -50%) rotate(90deg);
				transition: transform .3s ease-out;
			}

			&::after {
				content: '-';
				display: none;
				line-height: 3rem;
			}

			&::before,
			&::after {
				position: absolute;
				color: var(--Clr06);
				background-color: var(--ClrWht);
				transition: .3s;
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				vertical-align: middle;
				font-size: 3rem;
				aspect-ratio: 1 / 1;
				width: 3rem;
				height: 3rem;
				top: 50%;
				right: 1rem;
				transform: translate(0, -50%);
				line-height: .9;
			}
		}

		&.open {

			dt {
				border-radius: 1rem 1rem 0 0;

				img {
					border-radius: 1rem 1rem 0 0;
				}

				&::before {
				}

				&::after {
					display: block;
				}
			}
		}

		dd {
			display: grid;
			grid-template-rows: 0fr;
			visibility: hidden;
			background-color: var(--ClrWht);
			border-radius: 0 0 1rem 1rem;
			box-shadow: .2rem .2rem 1rem .1rem var(--ClrSdw);
			transition: grid-template-rows .3s ease-out;
			overflow: hidden;
			padding: 0;

			img {
				overflow: hidden;
			}

			.open & {
				visibility: visible;
				grid-template-rows: 1fr;
				padding: 3rem 0 5rem;
			}
		}
	}
}

/*==================================================
  Animation
==================================================*/
/*------------------------------
  Fade In
------------------------------*/
@keyframes fadein01 {
	0% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
	}

@keyframes fadein02 {
	0% {
		transform: translate(0, -4rem) rotate(0deg);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes fadein03 {
	0% {
		transform: translate(4rem, 0) rotate(0deg);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes fadein04 {
	0%, 1% {
		transform: translate(0, 4rem) rotate(0deg);
		opacity: 0;
	}
	30%, 50%, 65%, 100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes fadein05 {
	0% {
		transform: translate(-4rem, 0) rotate(0deg);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
}

/*------------------------------
  Blur-Appear
------------------------------*/
@keyframes blurappear01 {
	0% {
		opacity: 0;
		filter: blur(18rem);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

/*------------------------------
  Scale Out
------------------------------*/
@keyframes scaleout01 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}

/*------------------------------
  Beat
------------------------------*/
@keyframes beat {
	0%, 50%, 70%, 100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	60%, 80% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
	}

	@media screen and (max-width:750px) {
		html main {
			font-size: 1.33333333vw;
		}

		.lp_wrapper {
			.lp_cnt,
			.insert-area {
				font-size: 3.6rem;
			}
		}

		.cta_bg {
			.faq_anno {
				font-size: .5em;
				padding: 2rem 0 4rem;
			}
		}
}

.cta3button {
	margin-bottom: 10%;
}

/* coupon */
.coupon input[type=radio]:checked + label, #ucouponbox input[type=radio]:checked + label{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-right: 0!important;
		font-size: 1.2em;
		border: none;
		width: 100%;
		margin-right: 0;
		box-shadow: none;
	}
	.coupon input[type="radio"]:checked + label{
		background: rgba(249,249,197,0.4);
		color: #000;
		width: 75%;
		margin: 0 auto!important;
	}
	.coupon input[type="radio"]:checked + label::before, #ucouponbox input[type="radio"]:checked + label::before{
		position: absolute;
		content: '';
		top: 29%;
		left: 12%;
		width: 5px;
		height: 8px;
		border-left: 4px solid #e30200;
		border-bottom: 4px solid #e30200;
		transform: rotate(-45deg);
		border-radius: 3px;
	}
	#ucouponbox input[type="radio"]:checked + label::before {
    top: 34%;
    left: 4%;
    width: 3px;
    height: 6px;
		border-left: 4px solid #fff;
		border-bottom: 4px solid #fff;
	}
	.coupon label span{
	opacity: 0;
	font-weight: bold;
}
	.coupon input[type=radio]:checked + label span{
	opacity: 1;
}

/* spec */
.ispec .brB {
  margin-right: 1vw;
  padding: .5vw 1.5vw;
  font-family: var(--Fip),var(--Fyg);
  font-size: .6em;
  border: 1px solid #999;
}