<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;}
}
This Pen doesn't use any external JavaScript resources.