<section class="s-2">
    <div class="container">
      <header id="header">
        <h1 class="h-title2">
          <a class="logo" href="index.html">
            <img src="#" alt="ロゴ画像">
          </a>
        </h1>
        <div class="button2">
        <a href="#" class="h-btn-text2">
          ご予約はこちら
        </a>
      </div>
      </header>
    </div>
  </section>

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
}

#header {
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
/* ヘッダーロゴ */
.h-title2 {
  width: 200px;
    /* 画像入れたら削除でOK */
    height: 50px;
    background-color: rgb(158, 155, 155);
}

.h-title2 img {
  width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
/* ヘッダー申し込みボタン */
/* .button2 {
  background: rgb(153, 0, 0);
  border-radius: 40px;
} */
.h-btn-text2 {
  display: block;
  color:rgb(0, 0, 0);
  padding: 20px 40px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.button2 {
  position: relative;
  border-radius: 40px;
  border: 1px solid rgb(153, 0, 0);
  text-transform: uppercase;
  background: transparent;
  color: rgb(255, 255, 255);
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.button2:hover {
  background: rgb(250, 94, 69);
  box-shadow: 0 0 30px 5px rgba(153, 0, 0, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.button2:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

.button2::before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 50px 30px rgb(255, 255, 255);
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

.contact-btn:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}