<section class="fv">
		<div class="fv_bg position-relative">
			<div class="pc"><div class="vsc-controller" data-vscid="7xxuxwoqm"></div>
				<video class="" src="https://mk8-robo.com/wp-content/uploads/2020/10/Olaola_Movie.mp4" autoplay="" loop="" muted="" data-vscid="7xxuxwoqm">
					<img src="https://mk8-robo.com/wp-content/uploads/2020/10/olaola_fv1_bg-min.png" alt="" width="100%">
				</video>
			</div>
			<div class="sp">
				<img src="https://mk8-robo.com/wp-content/uploads/2020/10/olaola_sp_bg_fv-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/10/olaola_sp_bg_fv-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/10/olaola_sp_bg_fv@2x-min.png 2x" alt="">
			</div>
			<div class="position-absolute fv_content text-center wrapper _880">
				<img src="https://mk8-robo.com/wp-content/uploads/2020/10/olaola_logo_big_wh.svg" alt="営業支援ロボット オラオラ" width="580">
				<div class="pc"><a href="https://mk8-robo.com/olaola_overview/" class="cta_button bg_00a397" target="_blank" rel="noopener noreferrer">資料請求はこちら</a></div>
			</div>
				<div class="sp position-absolute"><a href="https://mk8-robo.com/olaola_overview/" class="cta_button bg_00a397" target="_blank" rel="noopener noreferrer">資料請求はこちら</a></div>
		</div>
  	</section>
		.fv {border-bottom: solid #292c2e 8px;}
		.fv_bg {/*min-height: 850px;*/display: flex;justify-content: center;align-items: center;overflow: hidden;max-height: 900px;}
		.fv video {filter: brightness(0.75) grayscale(0.5); max-width: 100%;}
		img[src$="olaola_fv1_bg-min.png"] {width: unset;max-width: unset;}
		.fv_content {top: 0;left: 0;right: 0;padding: 10em 0 0; z-index: 1;}
		.fv_content a.cta_button {margin-top: 1.88em;}

		@media screen and (min-width: 681px){
			.fv_content.wrapper img {max-width: 60%;}
			.fv_bg::after {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/09/fv_deco.png);background-repeat: repeat;content: "";display: block;height: 100%;mix-blend-mode: multiply;position: absolute;top: 0;z-index: 0;width: 100%;}
		}
		@media screen and (max-width: 1280px) and (min-width: 681px){
			.fv_content {padding: 4em 0 0;}
			.fv_content.wrapper img {max-width: 50%;}
		}
		@media screen and (max-width: 1024px) and (min-width: 681px){
			.fv_content a.cta_button {margin-top: 1.5em;}
			.link_history {margin-left: 40px;margin-right: 40px;margin-top: -5.5em;}
		}
		@media screen and (max-width: 680px){
		.fv_bg {min-height: unset;}
		.fv_content {padding: 8.5em 0 0;}
		.fv img[alt="営業支援ロボット オラオラ"] {/*width: 90%;*/}
		.fv_bg .sp.position-absolute {bottom: 13em;}
		}
	.bg_00a397 {background-color: #00a397;}
	.bg_f18d1e {background-color: #f18d1e;}
	.bg_22af73 {background-color: #22af73;}
	.bg_866239 {background-color: #866239;}
	.bg_29a5dc {background-color: #29a5dc;}
	.bg_f5aa3b {background-color: #f5aa3b;}

	img[alt="オラオラ"] {width: 4em;margin: 0 0.1em 0;vertical-align: top;}
	a.anchor {display: block;position: relative;top: 84px;visibility: hidden;}
	a.cta_button {display: block;border-radius: 3em;font-size: 2.0em;margin-left: auto;margin-right: auto;width: 14.7em;color: #fff;font-weight: bold;padding: 0.45em 0;text-align: center;position: relative;border: solid 3px;}
	a.cta_button::after {content: "→";font-weight: bold;position: absolute;right: 0.6em;}
	a.cta_button.bg_00a397 {border-color: #00a397;}
	a.cta_button.bg_f18d1e {border-color: #f18d1e;}
	a.cta_button.bg_22af73 {border-color: #22af73;}
	.link_history a {position: relative;}
	.link_history a::before,.link_history a::after {
	position: absolute;
	background-repeat: no-repeat;
	content: "";
	width: 1em;
	display: block;
	right: 0.1em;
	z-index: 2;
	height: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
	background-size: auto;
	background-position: center;
	background-size: 16px 10px ;
	}
	.link_history a::after {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/olaola_pagejunp_arrow-min.png);}
	@media screen and (min-width: 681px){
		a.cta_button:hover{background-color: #fff;}
		a.cta_button,a.cta_button::after,.link_history a,.link_history a::after {transition: 0.8s;}
		a.cta_button:hover::after {transform: translateX(0.4em);}
		a.cta_button.bg_00a397:hover,a.cta_button.bg_00a397:hover::after{color: #00a397;}
		a.cta_button.bg_f18d1e:hover,a.cta_button.bg_f18d1e:hover::after {color: #f18d1e;}
		a.cta_button.bg_22af73:hover,a.cta_button.bg_22af73:hover::after {color: #22af73;}
		.link_history a:hover {background-color: transparent;}
		.link_history a.bg_866239:hover {color: #866239;}
		.link_history a.bg_29a5dc:hover {color: #29a5dc;}
		.link_history a.bg_f5aa3b:hover {color: #f5aa3b;}
		.link_history a.bg_00a397:hover {color: #00a397;}

		.link_history a:hover::after {opacity: 0;}

		.link_history a.bg_866239::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_866239-min.png);}
		.link_history a.bg_29a5dc::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_29a5dc-min.png);}
		.link_history a.bg_f5aa3b::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_f5aa3b-min.png);}
		.link_history a.bg_00a397::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_00a397-min.png);}
	}
		@media only screen and (-webkit-min-device-pixel-ratio: 2) {
			.link_history a::after {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/olaola_pagejunp_arrow@2x-min.png);}
			.link_history a.bg_866239::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_866239@2x-min.png);}
			.link_history a.bg_29a5dc::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_29a5dc@2x-min.png);}
			.link_history a.bg_f5aa3b::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_f5aa3b@2x-min.png);}
			.link_history a.bg_00a397::before {background-image: url(https://mk8-robo.com/wp-content/uploads/2020/10/arr_00a397@2x-min.png);}
	}
		@media screen and (max-width: 680px){
			.wrapper {padding-left: 30px;padding-right: 30px;}
			a.cta_button {max-width: 100%;}
			.section._1 h1, .section._2 h1 {font-size: 3.3em;margin-top: 0.3em;}
			.section._1 .body_text,.section._2 .body_text,.section._3 .body_text {margin-top: 0em;font-size: 2em;line-height: 1.65;margin-bottom: 0;}
			.section._1 .body_text {margin-bottom: 13em;}
		}

External CSS

  1. https://mk8-robo.com/wp-content/themes/mk8-robo/assets/css/style_add-decoration.css
  2. https://codepen.io/mayukoakiyama/pen/abmQpLz

External JavaScript

This Pen doesn't use any external JavaScript resources.