@charset "UTF-8";

ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(9, 86px);
	justify-content: center;
}

.menu_list {
	position: relative;
	transition: all 0.3s;
}

.menu a {
	padding: 0.6em;
	text-decoration: none;
	text-align: center;
	color: #464646;
	background-color: snow;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 12px;
	overflow: hidden;
}

.submenu {
	display: none;/*デフォルトでは非表示の状態にしておく*/
	width: 86px;
	position: absolute;
	list-style: none;
}

.menu_list:hover .submenu {
	display: block;/*Gナビメニューにホバーしたら表示*/
}

.submenu_list {
	transition: all 0.2s;
	position: relative;
}

a.me_hme {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#dd991630 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #dd9916;
}

a.me_hme:hover {
	background-position: 83px 0;
}

a.me_inf {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#00afcc30 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #00afcc;
}

a.me_inf:hover {
	background-position: 83px 0;
}

a.sub_inf {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#00afcc30 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #00afcc;
}

a.sub_inf:hover {
	background-position: 83px 0;
}

a.me_prf {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#1aa8a030 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #1aa8a0;
}

a.me_prf:hover {
	background-position: 83px 0;
}

a.me_vit {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#981aa830 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #981aa8;
}

a.me_vit:hover {
	background-position: 83px 0;
}

a.me_hbb {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#42ba2330 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #42ba23;
}

a.me_hbb:hover {
	background-position: 83px 0;
}

a.sub_hbb {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#42ba2330 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease-out 0.2s;
	border-left: 3px solid #42ba23;
}

a.sub_hbb:hover {
	background-position: 83px 0;
}

a.me_diy {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#236eba20 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #236fba;
}

a.me_diy:hover {
	background-position: 83px 0;
}

a.sub_diy {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#236fba20 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease-out 0.2s;
	border-left: 3px solid #236fba;
}

a.sub_diy:hover {
	background-position: 83px 0;
}

a.me_gut {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#ff00ff30 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #ff00ff;
}

a.me_gut:hover {
	background-position: 83px 0;
}

a.sub_gut {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#ff00ff30 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease-out 0.2s;
	border-left: 3px solid #ff00ff;
}

a.sub_gut:hover {
	background-position: 83px 0;
}

a.me_lik {
	display: block;
	background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #0f87ff30 0%);
	border-left: 3px solid #0f87ff;
}

a.sub_lik {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#0f87ff30 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease-out 0.2s;
	border-left: 3px solid #0f87ff;
}

a.sub_lik:hover {
	background-position: 83px 0;
}

a.me_bar {
	display: block;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 50%,
		#ffcc0030 50%
	);
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.45s ease 0.2s;
	border-left: 3px solid #ffcc00;
}

a.me_bar:hover {
	background-position: 83px 0;
}