@charset 'utf-8';
/* =========================================== TOP PAGE ONLY ============================================= */
.drawer-menu-item:hover {
  color: #fff;
  text-decoration: none;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  background-color: #ddd;
}
@media (max-width: 63.9em /* 1023 pxまで */ ) {
  .drawer--navbarTopGutter {
    padding-top: 0;
  }
  .drawer-navbar .drawer-navbar-header {
    background-color: transparent;
  }
}
@media (min-width: 64em /* 1024 px */ ) {
  /*html {
          background-image: linear-gradient(to bottom, #f8f5f7 0%, #f8f5f7 95%, #ffffff 100%);
    }*/
  .drawer-navbar .drawer-navbar-header {
    background-color: transparent;
    border: none;
  }
  .drawer-navbar .drawer-nav {
    padding-top: 0;
    height: 0;
    position: absolute;
    right: 0;
    left: auto;
  }
  .drawer--navbarTopGutter {
    padding-top: 0;
    /*max-width: 1600px;*/
    margin: auto;
  }
  .drawer-navbar {
    /*height: 0;*/
    border-bottom: none;
    background-color: transparent;
  }
  .drawer-menu-item {
    color: #fff;
    letter-spacing: .2rem;
    font-size: 90%;
  }
  .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    background-color: #fff;
  }
}
@media (min-width: 75em) {
  .drawer-container {
    /*max-width: 94%;*/
    max-width: 1600px;
    margin: 0 auto;
  }
}
.drawer-navbar-header {
  /*height: 0 !important;*/
}
/* ============================================= 横幅100% + 16:9比率保持の動画CSS ============================================= */
.video-wrapper {
  /*background-color: rgba(0, 0, 0, 0.15);*/
}
.video-header {
  position: relative;
  width: 100%;
  background-color: #000;
    transition: opacity 0.5s ease;
} /* 16:9の比率を保持するコンテナ */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9比率 (9/16 * 100% = 56.25%) */
  background-color: #000;
  overflow: hidden;
    transition: opacity 0.5s ease;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を保ちつつ画面を埋める */
  z-index: 0;
  transition: opacity 0.5s ease;
}
/* オーバーレイ */
.video-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}
/* コンテンツ配置 */
.header-content {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
}
.header-company-icon {
  position: absolute;
  bottom: 8%;
  right: 0;
  transform: translateX(-50%);
  z-index: 2;
}
.scrolldown1 {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
} /* 1600px以上で横の黒帯表示 */
@media (min-width: 1600px) {
  /*body {
    background-color: #000;
  }*/
  .video-header {
    max-width: 1600px;
    margin: 0 auto;
  }
} /* スマートフォン対応 */
@media (max-width: 768px) {
  .drawer-menu-item:hover {
    color: #313133;
  }
  #brand-logos {
    filter: brightness(80%);
  }
  .header-content {
    padding: 0 15px;
    max-width: 90%;
  }
  .video-container::after {
    background-color: rgba(0, 0, 0, 0.15);
  }
  .header-content {
    left: 50%;
  }
  .header-company-icon {
    right: -5%;
  }
  .catch_main {
    font-size: 1.8em;
    line-height: 1.2;
  }
  .catch_sub {
    font-size: 0.9em;
    margin-top: 10px;
  }
  .header-company-icon {
    bottom: 12%;
  }
  .scrolldown1 {
    bottom: 5%;
  }
  .video-container video {
    object-fit: unset;
  }
} /* タブレット対応 */
@media (min-width: 769px) and (max-width: 1199px) {
  .header-content {
    max-width: 600px;
  }
  .catch_main {
    font-size: 2.2em;
  }
  .catch_sub {
    font-size: 1.1em;
  }
} /* PC対応 */ @media (min-width: 1200px) {
  .header-content {
    max-width: 700px;
  }
  .catch_main {
    font-size: 2.5em;
  }
  .catch_sub {
    font-size: 1.2em;
  }
}
@media (max-width: 768px) {
  .video-container {
    padding-bottom: 177.78%; /* 9:16 = 16/9 * 100% */
  }
}