@charset "UTF-8";
/* Body */
body {
	background-color: #FFFFFF;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin: 0;
}
/* Container */

/* Header */
header {
	clear: both;
	width: 100%;
	display: inline-block;
	height: auto;
	text-align: center;
	background-color: #5D5E5D;
	padding-bottom: 10px;
}

/* Hamberger */
.navbar {
	display: flex; /* フレックスボックスを使用 */
	justify-content: space-between; /* アイテムをスペースで均等に分割 */
	align-items: center;
	background-color: #5D5E5D;
	color: white; 
	font-weight: bold;
	font-size: 1.0em;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
	margin-bottom:0px;
	height: auto;
	background-image: url(../toppage-images/navback2.jpg);
	}

.logo {
	text-align: center;
 }
.logo img {
	width:100%;
	height: auto;
 }
.nav-list {
  list-style: none; 
  display: flex; /* 水平表示 */
  margin: 0; /* 外部余白なし */
	text-align: center;
	}

.nav-list li {
  padding: 0 15px; /* 各アイテムの内部余白 */
}

.nav-list a {
  text-decoration: none; /* アンダーラインなし */
  color: white; /* リンク色 */
}
.nav-list a:hover{
  text-decoration: none; /* アンダーラインなし */
  color: #A3A3A3; /* リンク色 */
}
.nav-list a:visited{
  text-decoration: none; /* アンダーラインなし */
  color: white; /* リンク色 */
}


/* モバイルメニュー用スタイル */
.menu-toggle {
  margin-right: 20px;
  margin-left: 5px;
 margin-top: -20px;
  display: none; /* デフォルトでは非表示 */
  flex-direction: column; /* 垂直方向のスタック */
  cursor: pointer; /* カーソルをポインタに設定 */
}
.menu-toggle .bar {
  height: 3px; /* 棒の高さ */
  width: 25px; /* 棒の幅 */
  margin: 3px 0; /* 棒の間隔 */
  background-color: white; /* 棒の色 */
  transition: 0.3s; /* アニメーションの速さ */
}

/* メディアクエリでモバイル対応 */
@media (max-width: 1096px) {
	
  .nav-list {
	position: absolute; /* 絶対位置 */
    top: -100%; /* 初期位置は上外 */
    left: 0; /* 上部からの距離 */
    flex-direction: column; /* 垂直方向のスタック */
    background-color: #5D5E5D; /* 背景色 */
    width: 150px; /* 幅 */
    height: 70%; /* 高さ */
    justify-content: flex-start; /* 開始点から配置 */
    padding-top: 20px;
	  padding-left: 0px;/* 上部の内部余白 */
    transition: 0.3s; /* 位置変更のアニメーション時間 */
     opacity: 0.9;
  }
		
    .nav-list li {
    padding: 15px; /* リストアイテムの余白 */
  }

  .menu-toggle {
    display: flex; /* モバイルでは表示 */
  }

  .nav-active {
   top: 0; /* アクティブ時は上端に */
  }
	
  .toggle .bar:nth-child(1),
  .toggle .bar:nth-child(3) {
    transform: translateX(-5px); /* X記号のための変形 */
  }

  .toggle .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-6px, 7px);
  }

  .toggle .bar:nth-child(2) {
    opacity: 0; /* 中央の棒を透明に */
  }

  .toggle .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -7px);
  }
}