@charset "utf-8";

div.top {
  position: relative;
}
div.top video {
  width: 100%;
}
div.top h1 {
  position: absolute;
  font-size: 3em;
  top: 55%;
  font-weight: lighter;
  line-height: 160%;
  right: 12%;
  color: #30bbd1;
  z-index: 1;
  text-shadow: 1px 1px 3px #000000;
}
div.top h1 span {
  font-size: 2.2em;
}
section.company ul {
  display: flex;
  flex-wrap: wrap;
}
section.company ul li {
  width: 30%;
  border: 2px solid #eaeaea;
  border-radius: 10px;
  overflow: hidden;
  margin: 2% 1%;
}
section.company ul h3 {
  text-align: center;
}
.img_wrap {
  height: 21vw;
  position: relative;
}
.img_wrap img {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a.sp_menu {
  width: 30px;
  height: 30px;
  display: block;
  position: relative;
  float: right;
  top: 14px;
  left: 19px;
}
a.sp_menu span {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 4px;
  background: #595757;
  transition: .3s;
}

a.sp_menu span:before,
a.sp_menu span:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #595757;
  transition: .3S;
}
a.sp_menu span:before {
  margin-top: -11px;
}
a.sp_menu span:after {
  margin-top: 7px;
}
a.sp_menu .close{
  background: transparent;
}
a.sp_menu .close:before,
a.sp_menu .close:after{
  margin-top: 0;
}
a.sp_menu .close:before{
  transform:rotate(-45deg);
}
a.sp_menu .close:after{
  transform:rotate(-135deg);
}