/* MENUとトグルの調整　s.s 20260806〜　*/


a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/*  -------top-logo 背景色指定　茶色の帯 ------- */
.shadow-image{
 /* logo背景色指定　茶色の帯 */
}
.top-logo{
  background-color: rgb(177, 116, 0);/* logo背景色指定　茶色の帯 */
  display: flex;
  justify-content: center; /* 左右の中央 */
  align-items: center;  /* 上下の中央 */
  /* height: 1000vh; */ /*  ブラウザの高さいっぱい */
  z-index: 80000;
}

.top-logo img{
	width: 600px;  /* logoの固定サイズ */
	margin: 20px 0 -25px 0 ;
  z-index: 81000;
}
/* -------ここまで　　top-logo ----------- */




/* ヘッダー全体のレイアウト */
.header {
  background-color: rgb(177, 116, 0);/* 茶色の帯 */
  box-shadow: 0 4px 5px #555;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  width: 70%; /* 画面の横幅いっぱいに強制する */
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  height: 70px;
}

/* ロゴ */
.logo a {
  font-size: 24px;
  font-weight: bold;
}


/* ナビゲーション（PC用）メニューをセンターに変更 */

.nav{
  /* -----navメニューをセンターに移動中-----　*/
  margin: auto;
  padding-top: 15px;
  transition: right 0.5s ease; /* 右からの位置を0.5秒かけて変化 */    
  }



/* ナビゲーション（PC用） */
.nav-list {
  display: flex;
  gap: 1px; /* メニュー文字ブロック間隔 */
 
}

.nav-item a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 5px;
  transition: color 0.3s ease;
　display: inline-block;
  color: #fff;	/* メニュー文字カラー */
}

/* ロールオーバー（ホバー時の下線アニメーション） */
.nav-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #F8C866;
  transition: width 0.3s ease;

}

.nav-item a:hover {
  color: #F8C866;	/* メニュー文字カラー */
}

.nav-item a:hover::after {
  width: 100%;
}

/* トグルボタン（デフォルトは非表示） */
.menu-btn {
  display: none;
}



/* レスポンシブ設定（タブレット・スマホ用 768px→700pxに変更） */
@media screen and (max-width: 700px) {

/* -------top-logo -------- */
.top-logo img{
  width: 80%;  /* logoのサイズ変更　*/
  margin: 20px 20px 0 0;
  z-index: 8000;
}

/* メニューの茶色の高さを縮小 */	
 .header-inner{ height: 20px;	} 

  /* ボタンのスタイルリセットと配置 */
  .menu-btn {
    display: block;
    background: none;
    border:groove;
    outline: none;
    width: 45px;
    height: 45px;
	color: #fff;
    cursor: pointer;
	/*----トグルXのボタン位置 右下によせる　s.s----*/
    position: absolute ;right:10px; top:20px;
    z-index: 10;
    padding: 0;
	  
  }
.menu-btn :hover {
 color:#000 ;
 transition: width 0.3s ease;
}
	
.menu-btn :active {
 color: #fff; /* クリック中の色（赤） */
}	
	

 /* 三本線の下にMENU文字を追加 */
  span.hamburger-text{line-height: 5em; font-size: 1em; margin: 1px 0;} 
	
	
  /* ハンバーガーの三本線 */
  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    position: absolute;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }

  .menu-btn span {
    top: 50%;
    transform: translateY(-50%);
  }
  .menu-btn span::before {
    content: "";
    top: -8px;
  }
  .menu-btn span::after {
    content: "";
    bottom: -8px;
  }

  /* ボタンがアクティブ（開いた状態）のとき、バツ印に変化 */
  .menu-btn.is-open span {
    background-color: transparent;
  }
  .menu-btn.is-open span::before {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-btn.is-open span::after {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ナビゲーションの初期状態（非表示） */
  .nav {
   /*  display: none;*/
  position: fixed;
  top: 70px;/* トグルメニューの位置極め（高さ指定） */
  right: -100%; /* 横幅分だけ右に隠す */
  width: 300px;
  height: 100%;
  transition: right 0.5s ease; /* 右からの位置を0.5秒かけて変化 */  
	  
  }

  /* メニューが開いた状態のスタイル (.navの位置からゆっくり表示させる)*/
  .nav.is-open {
 right: 0; 
	  
/*  display: block;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: #fff;
    padding-top: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: width 0.3s ease;
	  */
  }

/* 携帯時メニュー */
	
  .nav-list {
    flex-direction: column;
    align-items:center;
    gap: 200px;/* menu帯の高さ　gap: 200px; */
	display: block;
	margin-top:10px;/* menuブロックの配置調節（上部を下げる） */
  }

.nav-list a{
    display: block;
    /*background-color:#AAD5F6 ;*/
    transition: all 0.3s ease;
	align-items: center;
	text-align: left;/* menu文字の位置・cente・left */
	margin-left:1.5em;/* menu文字の先頭位置調節必要 */
  }
	
.nav-list a:hover {
    background-color: #1F66A8;/* menuホーバー時の色 */
    color: #fff;
	padding: 15px 0 15px 2em;
	transition: color 0.3s ease;
	
  }
.nav-list a:hover::before {
  content: "▶"; /* つけたい三角の記号 */
  color: #fff;   /* 三角の色 */
  font-size: 1em; /* 三角の大きさ調整 */
  transition: color 2.0s ease;
}
	
.nav-item a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 5px;
  transition: color 0.3s ease;
　display: inline-block;
  background-color: #2CCCD4;
  padding: 15px 0 15px 3em;/* menuの帯幅マージン調整 s.s */

}
		
.nav-item a::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0px;/* アンダーライン 2px */
  background-color: #fff;
  transition: color 0.3s ease;
  
}

	
	
	
}