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

.top-fv {
	position: relative;
}
/*スマホFV*/
.top-fv.sp-container {
	display: none;
}
.top-fv.sp-container .fv_logo {
	position: absolute;
	top: 24%;
	left:0; right:0;
	width: 30.93%;
	margin: auto;
}
.top-fv.sp-container .fv_text {
	position: absolute;
	top: 66.6%;
	left:0; right:0;
	width: 90%;
	margin: auto;
}
/*PC FV*/
.top-fv.pc-container {
}
.top-fv.pc-container .fv_logo {
	position: absolute;
	top: 23%;
	left:0; right:0;
	width: 12%;
	margin: auto;
}
.top-fv.pc-container .fv_text {
	position: absolute;
	top: 68.6%;
	left:0; right:0;
	width: 40%;
	margin: auto;
}

.tappuri_top_main {
	max-width:750px;
	margin-left: auto;
	margin-right: auto;
}
.top_first {
	position: relative;
	aspect-ratio:750/652;
	background: url(https://star-group.co.jp/assets/frontend/img/brand_top/tappuri-oil/top_first.jpg) center center no-repeat;
	background-size: cover;
}
.top_first .text1 {
	position: absolute;
	top:17.33%;
	right:7.6%;
	width: 17.33%;
}
.top_first .text2 {
	position: absolute;
	top:17.33%;
	left:7.6%;
	width: 17.33%;
}

.concept_pv {
	background: #000;
	padding:2.4em 0;
	margin-bottom: 4em;/*実装後削除可*/
}
.concept_pv .videoFlame {
	position:relative;
}
.concept_pv .videoFlame .playbtnArea {/* クリック領域をcontrolsの上部の範囲にする(下部コンポーネントと共通) */
	/*position:absolute;
	top:50%;
	transform: translate(-50%, -38%);
	left:50%;
	width:14%;*/
	position:absolute;
	top:1.5em;
	left:0;
	right:0;
	bottom:1.5em;
	margin:auto;
	z-index:2;
	cursor:pointer;
}
.active.videoFlame .playbtnArea {
	/*display:none;*/
}

@media only screen and (max-width:750px) {

	.tappuri_concept {
		font-size:2.8vw;
	}
	.pc-container {
		display: none;
	}
	.top-fv.sp-container {
		display: block;
	}
}