@charset "utf-8";
/* CSS Document */
.nav-container {
    font-family: "-apple-system, BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, "メイリオ", Meiryo, sans-serif;
}

.nav-container li {
    list-style: none;
}

.nav-container a {
    text-decoration: none;
    color: #000; /* リンクの色 */
}
/* Global Navigation Bar スタイル */
.nav-container{
	  border-bottom: 1px solid rgb(239, 239, 239);
}

.wrap-global-nav {
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
	font-size: 13px;
	font-weight: bold;
}

.gnb {
  margin-top: 15px;
  background-color: #ffffff;
}

.group-gnb {
  display: flex;
  padding: 10px 0;
}

/* メインナビゲーションリスト スタイル */
.list-nav {
  display: flex; /* 横並びにする */
  list-style-type: none; /* リストマーカーを非表示 */
  padding: 0;
  margin: 0 0;
}

.list-nav li {
  margin: 0 10px;
}

.list-nav a {
  position: relative; /* box-shadowを適用するために必要 */
  display: inline-block; /* リンクをインラインブロック要素として扱う */
  padding: 5px 10px; /* 元のパディング設定 */
  border-radius: 15px; /* 角を丸くする */
  background-color: transparent; /* 背景色を透明に設定 */
  transition: all 0.3s ease; /* スムーズな遷移効果 */
}

.list-nav a:hover {
  background-color: #feecec; /* ホバー時の背景色 */
  color: #000; /* テキスト色を変更する場合 */
  box-shadow: 0 0 0 3px #feecec inset; /* 内側に影を追加してマーカーのような効果を出す */
}

/* サブナビゲーションパネル スタイル */
.wrap-gnb-panel {
  display: block; /* displayをblockに変更 */
  opacity: 0; /* 初期状態では完全に透明 */
  visibility: hidden; /* 見えない状態からスタート */
  position: absolute; /* ナビゲーションコンテンツの位置調整 */
  width: 100%;
  top: 53px;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: 0.45s;
  transition: opacity 0.45s ease, visibility 0.45s; /* opacityとvisibilityの変化にトランジションを適用 */
  z-index: 101;
}

.list-nav li:hover .wrap-gnb-panel {
  opacity: 1; /* ホバー時に完全に不透明に */
  visibility: visible; /* 見えるように */
}

.gnb-panel {
  display: flex; /* Flexboxを有効化 */
  flex-wrap: wrap; /* 項目が多い場合は折り返し */
  padding: 10px;
}

.sub-list {
  display: flex; /* 同様にFlexboxを有効化 */
  flex-direction: column; /* 子要素を縦方向に並べる */
  justify-content: flex-start; /* 項目をコンテナの左端から配置 */
  align-items: center; /* 項目を中央揃え */
  flex-wrap: wrap; /* 必要に応じて折り返し */
}

.sub-title {
  margin-right: 20px; /* タイトル間の間隔調整 */
}

/* サブリスト スタイル */
.sub-list ul {
  list-style-type: none; /* リストマーカーを非表示 */
  padding: 0;
  margin: 0;
}

.sub-list li a {
  text-decoration: none; /* リンクの下線を消す */
  color: #666; /* リンクの色 */
  display: block; /* ブロックレベルで表示 */
  padding: 5px 0; /* パディングで間隔を開ける */
}

.sub-list li a:hover {
  background-color: #feecec; /* ホバー時の背景色 */
}