// navi_styl.css

// 共通スタイル

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px			// 1100px ★ ? 追加
  gap: 4px;				// 10px ☆
  justify-content: center;} 		// 中央寄せ

.nav-list li a {
  text-decoration: none;
  display: inline-block;
  padding: 2px 4px;			// 6px 12px ☆
  border-radius: 6px;
  transition: all 0.3s ease;}		// 0.3s

// 日本語ラベル

.nav-list .ja {
  font-size: 10px;			// 16px ☆
  font-family: 'HG丸ｺﾞｼｯｸM-PRO', sans-serif;
  font-weight: bold;
  color: blue;				// green 
  display: block;}

// 英語ラベル

.nav-list .en {font-size: 12px;color: #555; display: block;}

// hover effect

.nav-list li a:hover {
  background-color: blue; 		// #0078D4 濃い青 ☆ 薄いグリーン ☆
  box-shadow: 0 2px 5px rgba(0, 128, 0, 0.3);
  transform: scale(1.8);}		// (1.03) ▲ 拡大率 ☆

// ホバー時の文字色変化（任意）

.nav-list li a:hover .ja {color: red;} 	// 006400 ☆ red 
.nav-list li a:hover .en {color: #333;}

// スマホ対応：横幅が600px以下のときは縦並びに

/* ===============================

@media screen and (max-width: 600px) {
  .nav-list {flex-direction: column;align-items: center;}
  .nav-list li a {width: 90%;text-align: center;}}

.nav-list li a {
  text-decoration: none;
  display: inline-block;
  padding: 2px 4px;			// 6px 12px ☆
  border-radius: 6px;
  transition: all 0.3s ease;		// 0.3s ▲④
  min-width: 120px; 			// 120px ☆ ボタンの最小幅を確保
  text-align: center;
  box-sizing: border-box;}

.nav-list li a:hover {
  background-color: #ed1c24;		// #e0f7e9 ☆
  box-shadow: 0 4px 8px rgba(0, 128, 0, 0.3);
  transform: scale(1.1);          	// (1.1) ▲②
  transform-origin: center center; 	// 拡大基準を中央に
  z-index: 1;                      	// 手前に表示して他の要素を押し出さない
  position: relative;}            	// z-index有効化

  background-color: red;  		// #0078D4 ☆ 濃い青など、はっきりした色
  border: 2px solid green;   	 	// 2px #005A9E ☆ 太めの濃い枠線
  border-radius: 8px;           	// 角を少し丸く

================================== */

  // 親要素の制限を排除する場合

//  height: auto !important;
//  overflow: visible !important;
//  transform: none !important;}

body {
  font-family: Arial, sans-serif;
  background-color: red;}		// #f5f5f5

 h1 {color: navy;}
 .en {display: none;}

span.ja {
  font-size: 16px;			// 20px ▲③
  font-family:"AR丸ゴシック体M";
  font-weight:bolder;
  text-decoration: none;
  color: green;}			// green ▲①

span.en {
  font-size: 12px;
  font-family: "Arial", "Helvetica", sans-serif;
  text-transform: uppercase;}

//a:hover .ja,				// ☆
//a:hover .en {
//  color: red;				// ☆#007acc ▲
//  text-decoration: underline;}

span.ja {			
  font-size: 16px;			// 16px
  font-family: "AR丸ゴシック体M", "Meiryo", sans-serif;			
  font-weight: bolder;			
  text-decoration: none;}			
span.en {			
  font-size: 20px;			// 20px
  font-family: "Arial", "Helvetica", sans-serif;
  text-transform: uppercase;}