/*index.html*/
/* 最上部のボーダー */
.top-border {
  width: 100%;
  height: 5px;
  background-color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* ヘッダー全体 */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #f5f5f5;
  height: 70px;
  margin-top: 5px; /* ボーダー分の余白を確保 */
}

/* ロゴ */
.logo img {
  height: 100%;
  max-height: 100%;
}

/* メニュー */
nav {
  width: 100%;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-around;
}

nav ul li {
  margin: 0;
  flex: 1;
  text-align: center;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #aaa;
  height: 70px;
  line-height: 70px;
  font-size: 16px;
}

nav ul li.current a {
  color: #00B0F0;
  font-weight: bold;
  border-top: 5px solid #00B0F0;
}

nav ul li a:hover {
  color: #0089BB;
  background-color: #FBFBDD;
}

nav ul li:hover {
  border-top: 5px solid #F8E750;
}

/*スライダー*/
.slider {
  width: 100%; /* 横幅いっぱい */
  height: 92vh; /* 画面全体の高さに合わせる */
  overflow: hidden; /* スクロールバーを隠す */
  position: relative;
}

.slider img {
  width: 100%; /* 横幅いっぱい */
  height: 92%; /* 高さをスライダーの高さに合わせる */
  object-fit: cover; /* アスペクト比を崩さず全体を表示 */
  display: block;
}


.slide img:nth-of-type(1) {animation-delay: 0s;}
.slide img:nth-of-type(2) {animation-delay: 5s;}

@keyframes slide-anime {
  0% {left: 100%;}
  4% {left: 3%;}
  46% {left: 3%;}
  50% {left: -100%;}
  100% {left: -100%;}
}

/*index-mailn*/
/* 「K-1アマチュア公認ジム」のスタイル */
.center-text {
  text-align: center;
  font-size: 32px; 
  font-weight: bold;
  margin: 20px 0; 
  line-height: 1.5;
}
/* h1タグを中央揃え */
h1 {
  text-align: center;
  font-size: 24px;
  margin: 10px 0; 
}
/* トレーナー*/
.flex {
  display: flex; /* 横並びにする */
  gap: 20px; /* 要素間の間隔を20pxに調整 */
}

.flex .image {
  width: 50%;
  margin-left:150px; 
}

.flex .right {
  width: 50%; /* 幅を50%に調整 */
  margin: 0; /* マージンを削除 */
}

.flex .title {
  font-weight: bold;
  font-size: 18px;
  margin:0;
}
.flex .text {
  margin: 10px 0 100 -100px;
  padding: 0;
}

.banner{
  margin: 50px 0 50px 0;
}

.video {
  text-align: center; /* テキストと動画を中央配置 */
  margin-top: 40px; /* 上に余白を追加 */
}

.video video {
  width: 60%; /* 動画の幅を縮小 */
  max-width: 600px; /* 最大サイズを指定 */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 余計な余白を防ぐ */
  margin: 0 auto; /* 中央に配置 */
}

/*フッター*/
.nav2 {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-around;
}

.nav2 li {
  display: inline-block;
  margin: 0;
  flex: 1;
  text-align: center;
  }
 
#footer01 {
  position: relative;
  background: #222;
}
 
#footer01 .logo {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #111;
}
 
#footer01 .logo a {
  display: inline-block;
}
 
#footer01 .logo img {
  width: 300px;
}
 
#footer01 .nav2 a {
  display: block;
  padding: 0 10px;
  color: #ccc;
}
  #footer01 .nav2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;
  }
  #footer01 .nav2 a:hover {
    color: #ca353b;
  }
  /* プライバシーポリシーのリンク色 */
#footer01 a {
  color: #ccc; /* デフォルトの文字色 */
  text-decoration: none; /* 下線を非表示 */
}

#footer01 a:hover {
  color: #ca353b; /* ホバー時の色 */
}

@media screen and (max-width: 768px) {
  body {
      font-size: 14px;
  }

  .container {
      width: 100%;
      padding: 10px;
  }

  .menu {
      display: block; /* ナビメニューを縦並びに */
      text-align: center;
  }
}