@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
#fastpass { padding-bottom: 60px; }

#fastpass.client #kv { background-image: url(../images/kv-client.jpg); }

#fastpass #kv { height: 280px; background: url(../images/kv.jpg) center center/cover no-repeat; position: relative; margin-bottom: 50px; }

#fastpass #kv figure { position: absolute; bottom: 20px; }

#fastpass #kv figure:nth-child(1) { left: 30px; }

#fastpass #kv figure:nth-child(2) { right: 30px; }

#fastpass #kv h2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 30px; color: #fff; font-weight: bold; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; text-align: center; line-height: 1.5em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; text-shadow: 0 0 8px black; }

#fastpass #kv h2 br.sp { display: none; }

@media screen and (max-width: 768px) { #fastpass #kv { height: 80vw; margin-bottom: 10vw; }
  #fastpass #kv figure { width: 30vw; }
  #fastpass #kv figure:nth-child(1) { left: 0vw; bottom: initial; top: 0vw; }
  #fastpass #kv figure:nth-child(2) { right: 0vw; bottom: 0vw; }
  #fastpass #kv h2 { font-size: 6vw; }
  #fastpass #kv h2 br.sp { display: block; } }

#fastpass #lead { text-align: center; }

#fastpass #lead img { margin-bottom: 20px; }

#fastpass #lead h3 { margin: 0; font-size: 30px; color: #e21100; margin-bottom: 0.5em; }

#fastpass #lead h3 br { display: none; }

#fastpass #lead p { font-size: 20px; text-align: center; font-weight: bold; }

@media screen and (max-width: 768px) { #fastpass #lead img { width: 20vw; margin-bottom: 5vw; }
  #fastpass #lead h3 { font-size: 5vw; line-height: 1.6em; }
  #fastpass #lead h3 br { display: block; }
  #fastpass #lead p { font-size: 4vw; padding: 0 1em; } }

#fastpass #feature { background: #f5f5f5; padding: 30px; border-radius: 30px; margin-bottom: 60px; }

#fastpass #feature h3 { font-size: 30px; text-align: center; margin-bottom: 1.5em; }

#fastpass #feature h3 strong { font-size: 60px; color: #e21100; }

#fastpass #feature h3:after { content: ""; width: 3em; height: 2px; background: #e21100; display: block; margin: auto; margin-top: 0.5em; }

#fastpass #feature ul { list-style: none; display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 90%; margin: auto; }

#fastpass #feature ul li { width: 33%; text-align: center; }

#fastpass #feature ul li img { width: 80%; margin-bottom: 20px; }

#fastpass #feature ul li h4 { font-size: 20px; font-weight: bold; }

#fastpass #feature ul li p { font-size: 16px; text-align: center; padding: 0 0.5em; }

@media screen and (max-width: 768px) { #fastpass #feature { border-radius: 5vw; padding: 3vw; }
  #fastpass #feature h3 { font-size: 5vw; }
  #fastpass #feature h3 strong { font-size: 9vw; }
  #fastpass #feature ul { width: 100%; display: block; }
  #fastpass #feature ul li { width: 100%; display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  #fastpass #feature ul li img { width: 22vw; padding-right: 3vw; }
  #fastpass #feature ul li article { width: 75vw; }
  #fastpass #feature ul li article h4 { font-size: 4vw; text-align: left; }
  #fastpass #feature ul li article p { font-size: 3.5vw; text-align: left; } }

#fastpass #movie h3 { text-align: center; text-align: center; font-size: 26px; }

#fastpass #movie .movie { width: 80%; margin: auto; margin-bottom: 60px; text-align: center; }

#fastpass #movie .movie iframe { position: static !important; border: solid 1px #ccc; }

@media screen and (max-width: 768px) { #fastpass #movie h3 { font-size: 5vw; }
  #fastpass #movie .movie { width: 100%; }
  #fastpass #movie .movie iframe { height: 56.5vw; border: 0; } }

#fastpass #register { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#fastpass #register a { font-size: 26px; background: #e21100; color: #fff; border-radius: 0.3em; display: block; margin: auto; min-width: 15em; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.7em 2em 0.7em 1.5em; font-weight: bold; position: relative; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }

#fastpass #register a:after { content: "\e5cc"; font-family: "Material Icons"; font-size: 1.5em; position: absolute; right: 0.1em; top: calc(50% - 0.7em); }

#fastpass #register a:hover { opacity: 0.7; }

@media screen and (max-width: 768px) { #fastpass #register a { font-size: 5vw; width: 90%; } }
