@charset "UTF-8";

/*-------------------------------------------
top
-------------------------------------------*/
#video{
	margin-bottom: 30px;
}
#bg-video{
	width: 100%;
	height: 530px;
	object-fit: cover;
}
#mainvisual {
  padding-bottom: 33%;
  overflow: hidden;
  position: relative;
  background-color: #b0b0b0;
}
#mainvisual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;';
}
#main-content {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
#main-content .mcl {
  width: 67%;
  float: left;
}
#main-content .mcr {
  width: 33%;
  float: left;
}
#main-content .ws-btn {
  background-color: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 2rem;
  text-transform: uppercase;
  text-align: center;
}
#main-content .bg-gray {
  background-color: #e6e6e6;
  padding: 60px;
}
#main-content .bg-gray .wpb_wrapper {
  max-width: 550px;
}
#main-content .bg-gray h2 {
  font-size: 2.5rem;
  font-family: gilroy,sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 30px;
}
#main-content .bg-pink {
  position: relative;
}
#main-content .bg-pink img {
  height: 605px;
  vertical-align: bottom;
}
#main-content .bg-pink h2 {
  color: #fff;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 4.75rem;
  margin-bottom: 10px;
  position: absolute;
  top: 70px;
  left: 60px;
}
#main-content .bg-pink p {
  color: #fff;
  position: absolute;
  top: 420px;
  left: 60px;
}
#main-content .bg-yellow {
  background-color: rgba(254,219,0,0.6) !important;
  padding: 60px;
}
#main-content .bg-yellow p {
  margin-bottom: 18px;
}
#main-content .bg-yellow .wpb_wrapper {
  width: 188px;
  max-width: 550px;
  margin: 25px 0 40px 45px;
}
#main-content .bg-yellow h2 {
  color: #fff;
  font-size: 5rem;
  line-height: 4.75rem;
}
#main-content .bg-black {
  background-color: #000;
  color: #fff;
  padding: 60px;
}
#main-content .bg-black .wpb_wrapper {
  max-width: 550px;
  width: 212px;
  margin: 75px 0 65px 30px;
}
#main-content .bg-black h2 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 10px;
}
#main-content .bg-black p {
  color: #fff;
}


/*-------------------------------------------
responsive
-------------------------------------------*/
@media screen and (max-width: 960px) {
  #bg-video{
	height: 450px;
}
#mainvisual {
    padding-bottom: 120%;
  }
  #main-content .mcl,
  #main-content .mcr {
    width: 100%;
  }
  #main-content .bg-gray .wpb_wrapper,
  #main-content .bg-yellow .wpb_wrapper,
  #main-content .bg-black .wpb_wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #main-content .bg-gray,
  #main-content .bg-yellow,
  #main-content .bg-black {
    padding: 40px;
  }
  #main-content .bg-pink h2 {
    font-size: 3.5rem;
    line-height: 3.75rem;
  }
  #main-content .bg-pink h2 {
    top: 10%;
    left: 10%;
  }
  #main-content .bg-pink p {
    top: 70%;
    left: 10%;
    line-height: 2rem;
  }
  #main-content .bg-pink img {
    object-fit: cover;
    width: 100%;
    height: 400px;
  }
  #main-content .bg-yellow h2 {
    font-size: 3.75rem;
    line-height: 4rem;
    margin-bottom: 10px;
  }
}