body {
    padding-top: 90px; /* ヘッダーの後ろに要素が隠れないようにするため */
}

header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 60px; /* 高さを50pxに指定 */
    color: #fff;
    background: #000; /* 背景色にグレーを指定 */
    padding: 20px 50px; /*ヘッダーに上下左右それぞれ余白を指定 */
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex; /* 中の要素を横並びにする */
    align-items: center; /* 中の要素を上下中央に並べる */
}

header .gnav .menu {
    display: flex; /* 中の要素を横並びにする */
}

header .gnav .menu li {
    list-style: none; /* リストの[・]を消す */
}

header .gnav .menu li + li {
    margin-left: 40px; /* メニューそれぞれに間隔をあけるため */
}

main {
    height: 100vw; /* スクロールの演出を見れるようにmainに高さを指定 */
}

.title {
  position: relative;
  color: #fff;
  font-size: 22pt;
  transition: letter-spacing 0.3s;
}

.title:hover{
  letter-spacing: 0.05em;
}

.text {
  position: relative;
  padding: 0 15px; /* 見た目調整用の余白 */
  color: #000;
  font-size: 15px;
  background-color: #fff;
}

.text::before {
  position: absolute;
  left: 0;
  width: 0;
  height: 150%;
  content: "";
  background-color: #fff;
  mix-blend-mode: difference; /* difference（差分） */
  transition: 0.3s;
}

.text:hover::before {
  width: 100%;
}

.slide-container {
    width: 100%;
    margin: 50px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 40s infinite linear 1s both;
}
.slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}