/* ******************************** */
/* ナビ部 */
/* ******************************** */

/* ************************************************************** */
.container{
	/* padding-top: 1rem;*/  /* トップからのメニューの位置(相対位置)  */
	font-size: 17px;         /* メニューラベルの文字の大きさ          */
	width: 100%;             /* メニューの全体幅(100%)                */
  margin-left: auto;       /* 左右中央揃え */
  margin-right: auto;      /* 左右中央揃え */
}

/* ************************************************************** */
.gnav{
	display: flex;
	height: 4rem;      　　　/* 高さ（必須）? */
}

/* ************************************************************** */
.gnav > li {
	width: 25%; /* 親階層のみ幅を25%にする（メニューは５個）? */
}

/* ************************************************************** */
/*全てのリスト・リンク共通*/
/* ************************************************************** */
.gnav li {
	list-style: none;
	position: relative;
}

/* ************************************************************** */
.gnav li a {
	background: #001b34;
	border-right: 1px solid #eee;
	color: #fff;
	display: block;
	height: 4rem; /* 2023.03.24 update */
	line-height: 4rem; /* 2023.03.24 update */
	text-align: center;
	text-decoration: none;
	width: 100%;
}

/* ************************************************************** */
/* 子階層以降共通 */
/* ************************************************************** */
.gnav li li {
	height: 0;
	opacity: 0;              /* 透明度をアニメーション          */
	overflow: hidden;
	transition: opacity .5s; /* 0.5秒で透明度のみアニメーション */
}

/* ************************************************************** */
.gnav li li a {
	border-top: 1px solid #eee;
}

/* ************************************************************** */
/* liにマウスオーバーした直下のliのみが対象範囲     */
/* 子階層以降のliをマウスオーバーで順番に開いていく */
/* ************************************************************** */
.gnav li:hover > ul > li {
	height: 4rem; /* 2023.03.24 update */
	opacity: 1;   /* 必須 */
	overflow: visible;
	z-index: 10;  /* ドロップダウンメニューを優先 (2021.10.25 add) */
}

/* ************************************************************** */
/* 孫階層以降共通 */
/* ************************************************************** */
.gnav li ul li ul {
	top: 0;
	left: 100%;  /* 孫階層のli以降は下ではなく横に追加 */
	position: absolute;
	width: 100%; /* 必須 */
}

/* ************************************************************** */
/* 一番右のメニュー */
/* ************************************************************** */
.gnav > li:nth-child(5) ul li ul {
	left: -100%; /* 子、孫、ひ孫は逆に折り返す */
}

/* ************************************************************** */
/* マウスオーバーした際の背景色の変化を階層ごとにつける */
/* ************************************************************** */
.gnav > li:hover > a { /* 親階層 */
	background: #00305c;
}

/* ************************************************************** */
.gnav > li li > a {    /* 子階層 */
	background: #00305c;
}

/* ************************************************************** */
.gnav > li li:hover > a {
	background: #004789;
}

/* ************************************************************** */
.gnav li ul li ul li > a { /* 孫階層 */
	background: #004789;
}

/* ************************************************************** */
.gnav li ul li ul li:hover > a {
	background: #0065c1;
}

/* ************************************************************** */
.gnav li ul li ul li ul li > a { /* ひ孫階層 */
	background: #0065c1;
}

/* ************************************************************** */
.gnav li ul li ul li ul li:hover > a {
	background: #1e7dd4;
}

/* ************************************************************** */
/* 子階層の側から１つ上の階層のところへ「▶」を付ける */
/* ************************************************************** */

/* ************************************************************** */
/* 子階層 */
/* ************************************************************** */
.gnav > li > ul:before{
	border: 5px solid transparent;
	border-top: 5px solid #fff;
	content: "";
	right: 1rem;
	position: absolute;
	top: 1rem;
	transform: translateY(-40%);
}

/* ************************************************************** */
/* 孫階層 */
/* ************************************************************** */
.gnav li ul li ul:before {
	border: 5px solid transparent;
	border-left: 5px solid #fff;
	content: "";
	left: -20px;
	position: absolute;
	top: 1em;
	transform: translateY(-50%);
}

/* ************************************************************** */
/* 一番右のメニューの孫階層 */
/* ************************************************************** */
.gnav li:nth-child(5) ul li ul:before {
	border: 5px solid transparent;
	border-right: 5px solid #fff; /* 逆向き */
	left: auto;     /* 逆向き */
	right: -20px;   /* 逆向き */
}