@charset "UTF-8";

/* ===================================================================
CSS information
file name	:	spl_tf_style_v1_tf5.css
style info :	ターミナリアファースト SP Style
=================================================================== */
html body main img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

main {
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.fv{
	background: #000;
}

.fv_movie{
	position: relative;

	.movie_item {
		width: 100%;
		max-width: 750px;
		display: block;
		position: absolute;
		top: 0px;
	}
}

.shikenkekka {
	position: relative;
	z-index: 4;
	.kekka_btn {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap:min(calc(10/750 * 100vw), 10px);
		position: absolute;
		top: min(calc(290/750 * 100vw), 290px);

		li {
			width: min(calc(200/750 * 100vw), 200px);
			cursor: pointer;
		}
	}
}


/* タレント */
.cm{
	position: relative;

	.cm_notes{
		position: absolute;
		color: #FFF;
		font-size: 0.6em;
		top: 1%;
		right: 1%;
	}

	video {
		width: 100%;
		vertical-align: bottom;
	}		
}


/* cv */
.cv {
	background: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/cv/cv_bg.jpg") repeat-y;
	padding-bottom: 5%;

	.inner_cv {
		width: calc(680 / 750 * 100vw);
		max-width: 680px;
		margin: auto;
		background-color: #fff;
		padding-top: 13px;
		margin-bottom: 50px;
		box-shadow: 8px 0 16px rgb(23 23 23 / 20%);

	}	

	.off {
		position: relative;

		.off_btn {
			width: calc(168 / 750 * 100vw);
			max-width: 168px;
			position: absolute;
			top: -114px;
			right: -36px;
		}

		.yd_note{
			font-size: 10px;
			position: relative;
			left: 4%;
			bottom: 8px;
		}
	}

	.tokuten{
		position: relative;

		.cou_btn {
			position: absolute;
			top: 23.5%;
			right: 5.5%;
			width: 24%;
			height: 15%;
			background-image: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/cv/cv_cou_btn.png");
			background-size: cover;

			button {
			background: none;
			border: none;
			/* 追加: 親要素いっぱいにボタン判定を広げる */
			width: 100%;
			height: 100%;
			cursor: pointer;
			display: block;
			}

			&:active {
				opacity: 0.7;
				cursor: pointer;
			}

			&.active {
				top: 23.5%;
				right: 9%;
				width: 21%;
				height: 10.5%;
				background-image: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/cv/cv_cou_btn_on.png");
				background-size: contain;
				background-repeat: no-repeat;
			}

			img {
				opacity: 0;
			}
		}

		.copy-input-field{
			position: absolute;
			top: 0;
			left: 0;
			/* ボタンとほぼ同じサイズにして「選択範囲」を確保する */
			width: 100%;
			height: 100%;
			z-index: -1;      /* ボタンの背面へ */
			opacity: 0.01;    /* 0だと無視されるので0.01 */
			border: none;
			background: transparent;
			color: transparent;
			pointer-events: none; /* クリックの邪魔をしない */
		}
		.copy-input-field::selection {
			background: transparent;
		}
		/* iPhone (Safari) 向け */
		.copy-input-field::-moz-selection {
			background: transparent;
		}
	}


	.btn {
		position: relative;

		.img-btn {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 630px;
			height: auto;
			box-shadow: 0 0 15px 5px rgba(23, 23, 23, 0.2);
			animation: move_btn 1.9s ease infinite normal;
		}
	}

	.FAQ{
		/* タブ */
		.FAQMenu {
			display: flex;
			margin: 3% 5% 1% 5%;

			&:nth-of-type(2) {
				margin-top: 40px;
			}

			li {
				flex-grow: 1;
				cursor: pointer;

				&:first-child {
					border-left: none;
				}
			}

			.teiki-btn,
			.product-btn {
				width: 95%;
				padding-bottom: 15%;
				background-size: 100%;
				background-repeat: no-repeat;
			}

			/* teiki */
			.teiki-btn {
				margin-right: 2%;
				background-image: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/teiki/teiki_btn.png");

				&.active {
					background-image: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/teiki/teiki_btn_on.png");
				}
			}

			/* product */
			.product-btn {
				background-image: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/product/product_btn.png");

				&.active {
					background-image: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/product/product_btn_on.png");
				}
			}
		}

		.FAQContent {
			display: none;

			&.active {
				display: block;
			}

			/* 横スクロール */
			.horizontal-list {
				overflow-x: auto;
				white-space: nowrap;
				-webkit-overflow-scrolling: touch;

				.slide_item {
					display: inline-block;
					width: 80%;
					height: auto;
				}
			}
		}
	}
}

@keyframes move_btn {
	0% {left: 0%;}
	50% {left: 0%;}
	85% {left: 0%;}
	90% {left: 2%;}
	95% {left: 0%;}
	100% {left: 0%;}
}

.cv2 {
	.inner_cv {
		padding-top: 70px;
	}
}

.cv_slider_cont {
	width: calc(680 / 750 * 100vw);
	max-width: 680px;
}

.cv_slider_box {
	width: calc(680 / 750 * 100vw);
	max-width: 680px;
	margin: auto;
	display: none;

	&.slick-initialized {
		display: block;
	}

	/* slider_cta */
	.slick-dots {
		background-color: #fff;
		bottom: -36px;
		padding-top: 12px;

		li {
			width: 16px;
			margin: 0 calc(10 / 750 * 100vw);

			button {
				width: 16px;

				&::before {
					content: '⚫︎';
					font-size: 16px;
					line-height: 1;
					top: 5px;
					left: 5px;
				}
			}
		}
	}

	.slick-arrow {
		position: absolute;
		display: block;
		width: 57px;
		height: 57px;
		top: 238px;
		z-index: 6;
	}

	.prev-arrow {
		left: -26px;
	}

	.next-arrow {
		right: -30px;
	}
}


@media only screen and (max-width: 768px) {
	.cv {
		.inner_cv {
			padding-top: 0;
			margin-bottom: calc(100 / 750 * 100vw);

			.btn {
				.img-btn {
					/* width: calc(630 / 750 * 100vw); */
					width: calc(570 / 750 * 100vw);
				}
			}
		}

		.off {
			.off_btn {
				top: calc(-114 / 750 * 100vw);
				right: calc(-36 / 750 * 100vw);
			}
		}
	}

	.cv_slider_box {
		&.slick-dotted.slick-slider {
			margin-bottom: 20px;
		}

		.slick-dots {
			bottom: -26px;
			padding-top: 1px;

			li {
				button {
					&::before {
						font-size: calc(16 / 750 * 100vw);
						top: calc(5 / 750 * 100vw);
						left: calc(5 / 750 * 100vw);
					}
				}
			}
		}

		.slick-arrow {
			width: calc(57 / 750 * 100vw);
			height: calc(57 / 750 * 100vw);
			top: calc(238 / 750 * 100vw);
		}

		.prev-arrow {
			left: calc(-26 / 750 * 100vw);
		}

		.next-arrow {
			right: calc(-30 / 750 * 100vw);
		}
	}
}


.interview{
	.interview_txt {
		position: relative;
	}

	.interview_notes {
		position: absolute;
		font-size: 0.7em;
	}

	.notes-01{
		top: 34%;
		right: 3%;

	}
	.notes-02{
		bottom: 7%;
		right: 1%;
	}
}

.media{
	position: relative;
	.tv_movie {
		position: absolute;
		top: 33%;
		width: 100%;
		text-align: center;

		video {
			width: 89%;
		}
	}
}

.insta{
	margin-top: 3%;

	.insta_notes{
		text-align: right;
		font-size: 0.6em;
		margin:1% 1% 5% 0;
	}
}

/* support */
.support {
	video {
		display: block;
		margin: 2% auto;
		width: 100%;
	}
}

.user {
	li {
		position: relative;

		p {
			position: absolute;
			top: 2vw;
			right: 1vw;
			font-size: .7em;
		}

		&.ttl {
			p {
				top: 48vw;
			}
		}
	}
}

/* qa */
.qa {
	h2 {
		margin-top: -40px;
		position: relative;
		z-index: -1;
	}

	ul {
		position: relative;
		z-index: 999;
		width: 690px;
		margin: -125px auto 0;

		li {
			padding-left: 10px;
			padding-top: 30px;
			background: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/qa/qa_border.png")
				no-repeat bottom;
			background-size: 100%;

			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				background: none;
			}

			h3 {
				position: relative;
				cursor: pointer;

				&::after {
					content: '';
					position: absolute;
					top: calc(10 / 750 * 100vw);
					right: calc(-10 / 750 * 100vw);
					width: calc(34 / 750 * 100vw);
					height: calc(34 / 750 * 100vw);
					max-width: 34px;
					max-height: 34px;
					background: url("//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/qa/qa_btn_arrow.png")
						no-repeat;
					background-size: contain;
					transition: .5s ease-in;
				}

				&.open::after {
					transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					transition: .5s ease-out;
				}
			}

			.answer_area {
				display: none;
				position: relative;
				line-height: 1.6;
				color: #231815;
				padding-bottom: 20px;

				.comment {
					display: inline-block;
					vertical-align: super;
					font-size: 0.8rem;
				}
			}

			.answer {
				margin-left: 30px;
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	.qa {
		ul {
			width: calc(690 / 750 * 100vw);
			max-width: 690px;
			margin: calc(-125 / 750 * 100vw) auto 0;

			li {
				padding-left: calc(10 / 750 * 100vw);
				padding-top: calc(30 / 750 * 100vw);

				.answer {
					margin-left: calc(20 / 750 * 100vw);
				}

				.answer_area {
					font-size: calc(30 / 750 * 100vw);

					.comment {
						font-size: calc(16 / 750 * 100vw);
					}
				}
			}
		}
	}
}

.kenko {
	.kouka {
		position: absolute;
		top: 26vw;
		left: 4%;
		width: 90%;
	}

	.gaiyou {
		display: none;
		position: relative;
	}
}

/* PC閲覧時の崩れ調整 */
@media only screen and (min-width: 751px) {
	.kenko {
		.kouka {
			top: 200px;
		}
	}
}

.terminalia{
	.anime{
		width: 65%;
		top: 15%;
		left: 18%;
	}
}

.function {
	position: relative;
	width: 100%;
	background: url(//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/graph/graph_bg.jpg) no-repeat;
	background-position: top 0;
	padding-bottom: calc(0 / 750 * 100vw);
	margin-top: calc(0 / 750 * 100vw);
	z-index: 2;

	.slider_cv{
		background: none;
	}
}

.slider_cv {
	position: relative;
	width: 100%;
	background: url(//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/graph/graph_bg.jpg) no-repeat;
	background-position: top center;
	background-size: 100% 100%;
	/* margin-top: -15%; */
	padding-bottom: 10%;
	z-index: 2;

	.slider_graph_ttl{
		position: relative;
		&::before {
			content: '';
			background: url(//images.vitabrid.co.jp/sp/imgs/lp/tf5/v1/graph/graph_ttl_icon.png) center top / contain no-repeat;
			width: calc(148/750 * 100vw);
			height: calc(154/750 * 100vw);
			max-width: 148px;
			max-height: 154px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 4.5%;
			margin: auto;
			animation: finger 2.6s ease-in-out infinite;
		}
	}

	@keyframes finger {
		0%, 100% {
			transform: translateX(0%);
		}
		50% {
			transform: translateX(20%);
		}
	}

	.slider_graph_ttl_02{
		&::before {
			width: calc(71/750 * 100vw);
			height: calc(74/750 * 100vw);
			max-width: 71px;
			max-height: 74px;
			top: 6%;
			left: 8%;
		}
	}

	.slider_box {
		display: block;

		&.slick-initialized {
			display: block;
		}
	}

	.slider_cont{
		padding: 0 0.1%;

		.slider_inner{
			width: 100%;
			border: 2px solid #000;
			background: #FFF;
			margin-top:  min(calc(10/750 * 100vw), 10px);


			img{
				width: 100%;
			}


			.graph_ttl{
				width: 100%;
				width: 100%;
				transform: translateY( max(calc(-11/750 * 100vw), -11px));
			}

			.graph_item{
				width: 80%;
				display: block;
				margin:  5% auto;
				&.item-large{
					width: 85%;
					padding-top: 6%;
					padding-bottom: 2%;
				}
			}

			.graph_txt{
				width: 90%;
				color: #000;
				border-top: 1px solid #000;
				margin: 0 auto;
				padding: 3% 0;
				font-size: min(2vw,12px);
				line-height: 1.4;
				letter-spacing: 0;
			}

		}
	}

	.graph_slide_arrow {
		cursor: pointer;
		width: min(calc(20/750 * 100vw), 20px);
		position: absolute;
		bottom: min(calc(35/750 * 100vw), 38px);
	}

	.graph_slide_arrow_prev {
		left: min(calc(120/750 * 100vw), 120px);
	}
	.graph_slide_arrow_next {	
		right: min(calc(110/750 * 100vw), 110px);
	}

	.graph_notes{
		width: 90%;
		margin: 0.5% auto 0;
		text-align: right;
		font-size: min(2vw,12px);
	}	

	.slick-dotted.slick-slider{
		margin-bottom: 3%;
	}

	.slick-arrow {
		position: absolute;
		display: block;
		width: calc(63 / 750 * 100vw);
		max-width: 63px;
		height: calc(63 / 750 * 100vw);
		max-height: 63px;
		top: calc(50% - (32 / 750 * 100vw));
		z-index: 6;

		&.prev-arrow {
			left: 3%;
		}

		&.next-arrow {
			right: 3%;
		}
	}

	.slick-dots {
		bottom: max(calc(-80 / 750 * 100vw), -80px);

		li {
			width: calc(30/750 * 100vw);
			height: calc(30/750 * 100vw);
			margin: 0 calc(10/750 * 100vw);

			button {
				width: calc(30/750 * 100vw);
				height: calc(30/750 * 100vw);
				padding: calc(5/750 * 100vw);

				&::before {
				content: '●';
				font-size: calc(20/750 * 100vw);
				line-height: 1;
				top: calc(5/750 * 100vw);
				left: calc(5/750 * 100vw);
				}
			}
		}
	}
}

/* PC閲覧時の崩れ調整 */
@media only screen and (min-width: 751px) {
	.slider_cv {
		.slick-arrow {
			top: calc(50% - 32px);
		}

		.slick-dots {
			bottom: -100px;

			li {
				width: 30px;
				height: 30px;
				margin: 0 10px;

				button {
					width: 30px;
					height: 30px;
					padding: 5px;

					&::before {
						content: '●';
						font-size: 20px;
						line-height: 1;
						top: 5px;
						left: 5px;
					}
				}
			}
		}
	}
}


/*----------------------------common*/

.kanyo dl {
	align-items: stretch;
}

.tf_tel {
	font-size: .8em;
	line-height: 1.5em;
	margin-top: 4%;
	display: block;
}

.gatt .tbl {
	background: var(--WhitE);
}

.ispec {
	.brB {
		margin-left: .4vw;
		padding: .5vw 1vw;
		font-family: var(--Fip), var(--Fyg);
		font-size: .5em;
		border: 1px solid #999;
	}

	p {
		margin-top: 3%;
		padding-left: 1em;
		width: 95%;
		font-size: .85em;
		text-indent: -1em;
	}
}

.compo {
	dl {
		width: 100%;
		padding: 0;
		align-items: center;

		&:last-of-type {
			border-right: none;
		}
	}

	dt,
	dd {
		&:last-of-type {
			border-bottom: none;
		}
	}

	dt {
		width: 25%;
		padding: 2vw;
		border-right: 1px solid #ccc;
	}

	dd {
		width: 25%;
		padding: 2vw 4vw;
		text-align: right;
		border-right: 1px dashed #ccc;

		&:first-of-type,
		&:nth-of-type(2),
		&:nth-of-type(3) {
			border-bottom: 1px solid #ccc;
			text-align: center;
			font-weight: bold;
			background: #ddd;
		}

		&:nth-of-type(3n) {
			border-right: none;
		}
	}
}