@charset "UTF-8";

/* 共通 */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#MenuArea { background-color: #FEEED6; }

.gnav {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#99e379+0,7db9e8+100 */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 12px;
	position: absolute;
	z-index: 100;
	display: flex;
	height: 2rem;
	margin: 0 auto;
	width: 1000px;
}
.container { padding-top: 4rem; }

/* reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background: linear-gradient(30deg, floralwhite, cornsilk);	/* #FFEACF */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
}

/* 全てのリスト・リンク共通 */
.gnav > li	{ width: 25%; }			/* 親階層のみ幅を25%にする */
.gnav li	{
	list-style: none;
	position: relative;
	z-index: 99;
}
.gnav li a {
	background: #FFE7CC;			/* 第１階層のメニュー色 */
	border-right: 1px solid #918FFA;	/* メニューの区切り色 */
	color: black;				/* メニューの文字色 */
	display: block;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	text-decoration: none;
}

/* 子階層以降共通 */
.gnav li li				{
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity .8s;
}
.gnav li li a 				{ border-bottom: 1px solid #918FFA; text-align: left; padding-left: 10px; }
.gnav li:hover > ul > li		{ height: 2rem; opacity: 1; overflow: visible; }
.gnav li ul li ul			{ left: 100%; position: absolute; top: 0; }

.gnav > li:nth-child(8) ul li ul	{ left: -100%; }			/* 一番右のメニュー */
/* 親階層 */
.gnav > li:hover > a			{ background: #FFB159; }	/* 第１階層のメニュー選択色 */
.gnav > li li > a			{ background: #FFD3A0; }	/* 第２階層のメニュー色 */
.gnav > li li:hover > a			{ background: #FC8D47; }	/* 第２階層のメニュー選択色 */
.gnav li ul li ul li > a		{ background: #FFC27C; }	/* 第３階層のメニュー色 */
.gnav li ul li ul li:hover > a		{ background: #FA783C; }	/* 第３階層のメニュー選択色 */
.gnav li ul li ul li ul li > a		{ background: #FFB25B; }	/* 第４階層のメニュー色 */
.gnav li ul li ul li ul li:hover > a	{ background: #F96633; }	/* 第４階層のメニュー選択色 */

.gnav li ul				{ width: 130%; }		/* 第２階層のメニュー幅を拡大 */
.gnav li ul li ul			{ width: 120%; }		/* 第３階層のメニュー幅を縮小 */
.gnav li ul li ul li ul			{ width: 125%; }		/* 第４階層のメニュー幅を拡大 */

/* リストに「右矢印」を付ける */
.gnav > li > ul:before {		/* 子階層 */
	border: 5px solid transparent;
	border-top: 5px solid #000;
	content: "";
	right: 1rem;
	position: absolute;
	top: 1rem;
	transform: translateY(-20%);
}
.gnav li ul li ul:before {		/* 孫階層 */
	border: 5px solid transparent;
	border-left: 5px solid #000;
	content: "";
	left: -20px;
	position: absolute;
	top: 1em;
	transform: translateY(-10%);
}
.gnav li:nth-child(8) ul li ul:before {	/* 一番右のメニューの孫階層 */
	border: 5px solid transparent;
	border-right: 5px solid #000;
	left: auto;
	right: -20px;
}