body {
  margin: 0;
  font-family: "メイリオ", "Segoe UI", sans-serif;
  background-color: #e0ffff;
}

/* === タイトル（元のデザインを維持） === */
.top-header {
  position: relative;           /* 重ねる基準にする */
  text-align: center;
  background: #007bff;
  color: white;
  padding: 4px 0;         /* ← 下に余白を作ってスライダーの高さを確保 */
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;             /* スライダーのはみ出し防止 */
}

/* === スライダーをヘッダーの後ろに敷く === */
.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;                /* スライダーの高さ（自由に変更OK） */
  z-index: 1;                   /* 背面へ */
  display: flex;
  overflow: hidden;
}

/* スライダーの中身（あなたの元のコード＋少し調整） */
.slider {
  animation: scroll-left 20s infinite linear .5s both;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide {
  width: calc(100vw / 3);
}

.slide img {
  width: 100%;
  height: 180px;                /* スライダーの高さと合わせる */
  object-fit: cover;
  display: block;
}



/* === タイトルをスライダーの上に重ねる === */
.site-title {
  position: relative;
  background-color: #001f4d;
  z-index: 2;                   /* スライダーより前面 */
  font-size: 32px;              /* 見やすいサイズに変更してOK */
  width: 45%;
  padding-top: 34px;
  padding-bottom: 34px;
  margin: 0 auto;
  margin-top: -5px;
  margin-bottom: -5px;
}

/* CSSアニメーション */ 
@keyframes scroll-left { 
  from { 
    transform: translateX(-100%); 
  } 
  to { 
    transform: translateX(0);
  }
}
.image-class {
  width: 180px;
  height: 180px;
  object-fit: cover;
  display: block
}
  
	/* === メニュー全体 === */
	.main-nav {
	  display: flex;
	  justify-content: center;
	  background: #001f4d;
	  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
	  position: relative;
	  z-index: 10;
	}


.menu {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
}

/* スマホ(768px)：縦並びへ変更 */
@media screen and (max-width: 768px) {
  .main-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .menu {
    flex-direction: column;   
    width: 100%;
  }

  .menu-item {
    width: 100%;              
    height: 60px;             
  }

  .menu-item > a {
    font-size: 18px;
  }

}

	/* === 各メニュー項目 === */
	.menu-item {
	  position: relative;
	  width: 130px;
	  height: 70px;
	  overflow: hidden;
	  z-index: 1;
	}

	.menu-item::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background-image: var(--bg);
	  background-size: cover;
	  background-position: center;
	  opacity: 0.6;
	  z-index: 0;
	  transform: scale(1.05);
	  transition: transform 1.2s ease, opacity 0.6s ease;
	}

	.menu-item > a {
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 100%;
	  text-decoration: none;
	  color: #222;
	  font-weight: bold;
	  font-size: 16px;
	  background-color: rgba(255, 255, 255, 0.50);
	  border-radius: 0;
	  z-index: 2;
	  transition: background-color 0.4s ease, transform 0.3s ease, color 0.3s ease;
	}

	/* ホバーで拡大＋光エフェクト */
	.menu-item:hover::before {
	  opacity: 0.9;
	  transform: scale(1.2);
	  filter: brightness(1.2);
	}

	.menu-item:hover > a {
	  background-color: rgba(255, 255, 255, 0.6);
	  color: #003366;
	}

		

	
	.all::before {
	  background-size: contain !important;
	  background-repeat: no-repeat;
	  background-position: center;
	}
	
	.site-title {
	  animation: fadeIn 1.2s ease-out forwards;
	}

	@keyframes fadeIn {
	  from { opacity: 0; transform: translateY(-8px); }
	  to   { opacity: 1; transform: translateY(0); }
	}

/* サブメニュー内のリンク */
.submenu li a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  transition: background 0.3s, transform 0.3s;
}

/* サブメニューの行ごとに区切り線 */
.submenu li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

/* ホバーしたら滑らかに背景が浮く */
.submenu li a:hover {
  background: rgba(240, 240, 240, 0.95);
  transform: translateY(-1px);
}

/* ホバーでドロップダウンを表示 */
.menu-item:hover .submenu,
.menu-item:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.catch {
  font-size: 14px;
  margin-top: -5px;
  color: #e8f6ff;
  letter-spacing: 1px;
  opacity: 0.9;
}
/* PCではハンバーガー非表示 */
.hamburger, .mobile-menu {
  display: none;
}

/* スマホサイズ(768px)で有効化 なぜか上の部分に入れたら壊れました */
@media screen and (max-width: 768px) {
  .character1 {
    display: block;
    width:  50%;
    height: auto;
    transform: translateX(120px) translateY(190px);
  }
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000; 
  }

.site-title {
  max-width: 400px;
  min-width: 275px;
}

  body {
    padding-top: 100px; /* ← 高さに合わせて調整 */
  }
  /* PCメニューは消す */
  .main-nav {
    display: none !important;
  }

  /* ハンバーガーメニュー表示 */
  .hamburger {
    display: block;
    position: fixed;
    top: 10px;
    left: 15px;
    width: 32px;
    height: 26px;
    cursor: pointer;
    z-index: 3000;
  }

  .hamburger span {
    display: block;
    height: 4px;
    margin-bottom: 5px;
    background: #003366;
    border-radius: 4px;
    transition: 0.4s;
  }

  /* メニュー本体 */
  .mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    left: -260px; /* ←最初隠す(ボタンで出現) */
    width: 260px;
    height: 100%;
    background: rgba(255,255,255,0.97);
    box-shadow: 3px 0 8px rgba(0,0,0,0.2);
    transition: left 0.4s ease;
    z-index: 2500;
    padding-top: 60px;
  }

  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-menu ul li a {
    display: block;
    padding: 15px 20px;
    font-size: 17px;
    text-decoration: none;
    color: #222;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s;
  }

  .mobile-menu ul li a:hover {
    background: #eef4ff;
  }

  /* OPEN状態のとき */
  .mobile-menu.open {
    left: 0;
  }

  /* ハンバーガー → × に変形 */
  .hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

#back-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 50%;
	background-color: #0078ff;
	color: white;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	z-index: 1000;
}

#back-top:hover {
	background-color: #005fcc;
	transform: scale(1.1);
}
#back-top::after {
	content: "上に戻る";
	position: absolute;
	bottom: 60px; /* ボタンの上に表示 */
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.5);
	color: #ADE8E6;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-top:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(-5px);
}

#back-top.show {
	opacity: 1;
	visibility: visible;
}