#menu {
  background-color: #3366cc; /* 青に変更したい場合の例 #0066ccより変更*/
  text-align: center;
  padding: 0px 0; /* 上下を0pxに減らす */
  margin: 0;
}

/* ul を中央寄せに */
.menu-list {
  display: inline-block; /* 横並びかつ中央寄せ可能にする */
    background-color: #3366cc;
  padding: 0;
  margin: 0;
}


/* li 要素を横並びに */
.menu-list li {
  display: inline-block;
  margin: 0 10px;
}

/* リンクのスタイル */
.menu-list li a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  display: inline-block;
}


/* サブメニューの初期状態を非表示 */
.menu-list .submenu {
  display: none;
  position: absolute;
  background-color: #3366cc;
  margin-top: 0;
  padding: 0;
  list-style: none;
  z-index: 999;
}

.menu-list li.has-submenu {
  position: relative;
}

/* サブメニュー表示 */
.menu-list li.has-submenu.open .submenu {
  display: block;
}

.menu-list .submenu li a {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
}
.menu-list .submenu li a:hover {
  background-color: #004499;
}


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

.menu-list li {
  display: inline-block;
  position: relative;
}

.menu-list li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  background-color: #3366cc;
}

/* サブメニュー */
.menu-list li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #3366cc;
  min-width: 150px;
  z-index: 1000;
}

.menu-list li .submenu li a {
  padding: 8px 12px;
  white-space: nowrap;
}


.menu-toggle {
  display: none; /* スマホ表示時のみ表示されるように下で制御 */
  font-size: 28px;
  color: white;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background-color: transparent; /* 背景不要なら */
  border: none;
}

/* デフォルトは100%（スマホ向け） */
#headImage {
  width: 100%;
  aspect-ratio: 26 / 10; /* 高さ比を保つ */
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  line-height: 0;
  padding-top: 0;
}


/* ▼アイコン */
.submenu-toggle {
  font-size: 14px;
  margin-left: 6px;
  color: white;
  cursor: pointer;
}

/* 初期状態は非表示 */
.submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #3366cc;
  width: 100%;
}

.submenu li a {
  padding: 10px 15px;
  display: block;
  color: white;
  text-align: center;
}

/* サブメニュー展開中クラス */
.submenu.show {
  display: block;
}


html, body {
  width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

img, iframe, video {
  max-width: 100%;
  height: auto;
  display: block;
}

section, article, header, footer, .inner, .wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

/* 横幅を固定してる要素を緩和 */
[class*="col"], [class*="column"], .feature {
  flex: 1 1 100%;
  max-width: 100%;
}


/* ▼アイコン */
.submenu-toggle {
  font-size: 14px;
  margin-left: 6px;
  color: white;
  cursor: pointer;
}

/* 初期状態は非表示 */
.submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #3366cc;
  width: 100%;
}

.submenu li a {
  padding: 10px 15px;
  display: block;
  color: white;
  text-align: center;
}

/* サブメニュー展開中クラス */
.submenu.show {
  display: block;
}

/* デフォルトでは非表示 */
.sp-only {
  display: none;
}


/* PC用：hoverで表示 *//* PC用：hoverで表示 *//* PC用：hoverで表示 *//* PC用：hoverで表示 */
@media screen and (min-width: 769px) {
  .has-submenu:hover .submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
  }

  .submenu-toggle {
    display: none;
  }

  .has-submenu {
    position: relative;
  }

  .submenu li {
    text-align: left;
  }


  #headImage {
    width: 60% !important;
    margin: 0 auto !important;
  }

  #headImage ul {
    width: 100% !important;
  }

  #headImage li,
  #headImage img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }


.image-wrapper {
  padding: 0 5px;
  box-sizing: border-box;
}

  .has-submenu {
    position: relative;
  }

  .has-submenu:hover .submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto; 
    z-index: 999;
  }

  .submenu-toggle {
    display: none; /* PCでは非表示 */
  }

  .submenu li {
    text-align: left;
  }

  /* ▼アイコンをデフォルトで非表示（PC表示） */
  .icon {
    display: none;
  }

}


/* スマホ表示 *//* スマホ表示 *//* スマホ表示 *//* スマホ表示 *//* スマホ表示 */
@media screen and (max-width: 768px) {
  /* 基本的に横幅を画面に合わせる */
  body {
      /*  background-color: #ffdddd !important; 横幅が768pxより狭くなったときに背景がピンクになる設定をコメントアウト*/ 
  overflow-x: hidden;
    font-size: 16px;
    margin: 0;
    padding: 0;
  }

  #wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .container, .content, .main_column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
  }


  header, footer {
    text-align: center;
    padding: 10px 0;
  }

  nav ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  nav ul li {
    margin: 5px 0;
    text-align: center;
  }

  main_column, .content {
    width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    font-size: 14px;
  }


 /* セクションや記事全体にも制限をかける */
 section, article, header, footer, .inner {
   max-width: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
 }

  /* メニューが横並びなら縦に */
  .menu,
  .global-nav,
  .navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* スマホでのタイトル調整例 */
  h1, h2, h3 {
    font-size: 1.2em;
  }

  /* スクロール対策 */
  html, body {
    overflow-x: hidden;
  }


  #sub {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .sponsors {
    flex-direction: column;
    align-items: center;
  }

  .sponsor-logo {
    display: block;
    margin: 5px auto;  /* 上下に10px、中央寄せ */
    max-width: 90%;     /* 幅の調整（必要に応じて） */
  }


  .menu-list li {
    margin: 2px 0; /* ← 上下の余白も縮める */
  }

  .menu-toggle {
    display: block;
    position: fixed;
    top: 5px;
    right: 10px;
    z-index: 1000;
    font-size: 24px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #3366cc;
    color: white;
    border-radius: 4px;
    border: none;
    padding: 0;
  }

  /* header + menu の高さを足した分だけ下に押し下げる */
  #headImage {
    margin-top: 32px;  /* 実際の固定ヘッダーの高さに合わせて調整（例：60px + 40px） */
  }


  #footMenu li a {
    letter-spacing: -0.5px; /* 文字間を狭める（必要に応じて調整） この指定がうまく動作しない！！！*/
    padding: 0 4px;          /* 文字周囲の余白も必要なら調整 */
    font-size: 12px;         /* フォントサイズも必要に応じて */
  }

  /* Googleカレンダー用 */
  .calendar-wrapper {
    width: 100%;
    padding-top: 130%; /* 高さの比率 → 4:3比率の場合は75%（変更可） */
  }


  /* サブメニュー表示PCのみ hover で表示 */
  .menu-list li:hover .submenu {
    display: block;
  }


  .menu-list {
    align-items: flex-start; /* ← ここで左寄せに */
    position: fixed;
    top: 50px; /* ハンバーガーアイコンの下 */
    right: 0;
    width: 200px;
    background-color: #3366cc;
    display: none;
    flex-direction: column;
    z-index: 999;
  }

  /* メニュー項目を左揃えに */
  .menu-list li {
    width: 100%;
    text-align: left;
  }

  .menu-list.show {
    display: flex;
  }

  .submenu li a {
  padding: 4px 10px;   /* 上下4px、左右10px に */
  text-align: right;
  display: block;      /* ブロック化して全体がクリックできるように */
  line-height: 1.2;    /* 高さを詰める */
  font-size: 16px;     /* フォントサイズも調整可能（任意） */  }

  /* ▼アイコン */
  .submenu-toggle {
    margin-left: 6px;
    font-size: 14px;
    cursor: pointer;
  }

.has-submenu > a,
.menu-list > li > a {
  padding: 6px 12px;       /* 上下6px → 高さ調整 */
  line-height: 1.2;        /* 行間を詰める */
  font-size: 16px;         /* フォントサイズ調整（任意） */
  display: flex;           /* アイコンの右寄せのため維持 */
  justify-content: space-between;
  align-items: center;
}


  /* サブメニューを block にして上に被らないように */
  .submenu {
    position: static !important;
    display: none !important; /* 最初は非表示 */;
    background-color: #e0f0ff !important; /* 薄い水色：読みやすく、アクセントにもなる */ 
    width: 100%;
    text-align: right; /* ← 右寄せに */
  padding: 0 10px 0 0; /* 上下の余白を削除 */
  margin: 0; /* マージンリセット */
  }

  .submenu.show {
    display: block !important; /* .showがついたら表示 */;
  }


  /* ▼や▲を右寄せにする（任意） */
  .submenu-toggle {
    margin-left: 0.5em;
    cursor: pointer;
  }

  /* メニュー項目の左寄せ（オプション） */
  .menu-list > li {
    text-align: left;
  }

  .submenu li {
    text-align: right; /* サブメニューは右寄せに */
  }

  /* メニューアイコン表示 */
  .icon {
    display: inline;
    margin-left: 5px; /* アイコンとテキストの間隔調整（任意） */
    color: #fff;
  }


  /* スマホだけ改行 */

  .sp-only {
    display: block;
  }

  #contents {
    margin-left: 0 !important; /* スマホでは左右の余白なし */
    margin-right: 0 !important; /* スマホでは左右の余白なし */
   }

  div#main h2 {
     font-size:75% !important;/* 12px相当 */
  }

  .photo-pair {
    flex-direction: column;
  }

  .photo-pair img {
    width: 100% !important;
  }

}

/* ↑↑↑スマホ用メディアクエリここまで↑↑↑ *//* ↑↑↑スマホ用メディアクエリここまで↑↑↑ */



/* === スマホでは hover 無効化して active の水色を維持 === */
/* ==== スマホ用（hover無効化） ==== */
@media (hover: none) and (pointer: coarse) {
  #menu li.active > a,
  #menu li.active > a:hover {
    background-color: #00bfff !important;
    color: #fff !important;
  }

  #menu li a:hover {
    background-color: inherit !important;
    color: inherit !important;
  }

  #menu a,
  #menu a:visited,
  #menu a:focus,
  #menu a:active,
  #menu a:hover {
    color: #fff !important;
  }

}




/* ==== スマホで非activeのメニューをクリックすると文字色が変化するのを防止（hover無効化） ==== */
#menu li.active > a,
#menu li.active > a:hover {
  background-color: #00bfff !important;
  color: #fff !important;
}

#menu li a:hover {
  background-color: #003c99 !important;
  color: #fff !important;
}

#menu a,
#menu a:visited,
#menu a:focus,
#menu a:active,
#menu a:hover {
  color: #fff !important;
}