/*
 * top-visual の動画エリア用の追加スタイル。
 * assets/styles 配下の SCSS ビルドとは独立した手書き CSS。
 * pages/index/style.css の .top-visual__contents / __hdg / __btn を上書きする。
 */

.top-visual__contents {
  top: auto;
  right: 0;
  bottom: -20px;
  left: 0;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  width: auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .top-visual__contents {
    top: 0;
    bottom: 6%;
    padding: 0 5%;
  }
}

.top-visual__hdg {
  width: 34%;
  max-width: 170px;
}

@media (min-width: 768px) {
  .top-visual__hdg {
    width: 33%;
    max-width: 420px;
  }
}

.top-visual__btn {
  margin: 8px 0 0;
}

@media (min-width: 768px) {
  .top-visual__btn {
    margin: -17px -35px 0px 0px;
  }
}

.top-visual__btn .btn {
  display: block;
  width: 148px;
  height: auto;
  background: none;
  border-radius: 0;
  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

@media (hover: hover) and (pointer: fine) {
  .top-visual__btn .btn:hover {
    opacity: 0.7;
  }
}

@media (min-width: 768px) {
  .top-visual__btn .btn {
    width: 17%;
    min-width: 180px;
    max-width: 230px;
  }
}

.top-visual__btn .btn > img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP: ロゴ・ボタンを動画下端から sec-mv(木目)へはみ出させる */
@media (max-width: 767px) {
  .top-visual__contents {
    bottom: -21vw;
    align-items: flex-start;
    padding: 0;
  }

  .top-visual__hdg {
    width: 45vw;
    max-width: none;
    margin-left: 32vw;
  }

  .top-visual__btn {
    margin: -4vw 0 0 59vw;
  }

  .top-visual__btn .btn {
    width: 33vw;
  }

  .sec-mv {
    padding-top: calc(21vw + 40px);
  }
}