@charset "utf-8";

/********************************/
/* ヘッダーナビゲーション */
/********************************/
#header-navi > .bg {

	position: relative;
	z-index: 3;

}

/* ロゴ */
#header-navi .logo {

	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

}

/* メニュー(全体) */
#header-navi .menu .menu-item {

	position: relative;

}
#header-navi .menu .menu-item > a {

	position: relative;
	z-index: 2;
	box-sizing: border-box;

}

/* メニュー(親) */
#header-navi .menu > .menu-item > a {

	display: inline-block;
	padding: 19px 21px;

}
/* エフェクト */
#header-navi .menu > .menu-item {

	/* トランジション設定 */
	transition: background-color 0.4s ease-in 0s;
	-webkit-transition: background-color 0.4s ease-in 0s;
	-moz-transition: background-color 0.4s ease-in 0s;
	-ms-transition: background-color 0.4s ease-in 0s;

}
#header-navi .menu > .menu-item:after {

	content : '';
	display : block;
	position: absolute;
	z-index : 1;
	left    : 0;
	bottom  : 0;
	width   : 100%;
	height  : 0%;
	
	transition: all 0.2s ease-out 0s;
	-webkit-transition: all 0.2s ease-out 0s;
	-moz-transition: all 0.2s ease-out 0s;
	-ms-transition: all 0.2s ease-out 0s;

}

/* メニュー(子) */
#header-navi .sub-menu {

	box-sizing: border-box;
	min-width: 100%;

}
#header-navi .sub-menu > .menu-item {

	white-space: nowrap;

}
#header-navi .sub-menu > .menu-item > a {

	display: block;
	min-width: 100%;

}
/* エフェクト */
#header-navi .sub-menu > .menu-item > a {

	/* トランジション設定 */
	transition: background-color 0.4s ease-in 0s;
	-webkit-transition: background-color 0.4s ease-in 0s;
	-moz-transition: background-color 0.4s ease-in 0s;
	-ms-transition: background-color 0.4s ease-in 0s;

}

/********************************/
/* ヘッダーナビゲーション(モバイル) */
/********************************/
#header-navi-mb .menu .menu-item > a {

	display: block;

}

/********************************/
/* フッターナビゲーション */
/********************************/
#footer-navi .menu .menu-item {

	display: inline;

}

/********************************/
/* フォント・背景・余白 */
/********************************/
/* ヘッダーナビゲーション */
#header-navi > .bg { border-bottom:solid 1px #ccc; background-color:#87BC1F; color:#fff; }

#header-navi .menu {

	/* 左に寄せる */
	/* margin: 0 auto 0 0; */
	
	/* 右に寄せる */
	margin: 0 0 0 auto;

}
#header-navi .menu .menu-item { font-size:1.4rem; }
#header-navi .menu .menu-item > a { text-decoration:none; }
/* メニュー(親) */
#header-navi .menu > .menu-item > a, #header-navi .menu > .menu-item > a:visited { color:#333; }
#header-navi .menu > .menu-item > a:hover { color:#2676ff!important; }
#header-navi .menu > .menu-item > a { padding:19px 21px; }
#header-navi .menu > .menu-item:hover { background-color:#eee; }
#header-navi .menu > .menu-item:hover:after { background-color:#eee; height:100%!important; }
/* メニュー(子) */
#header-navi .sub-menu > .menu-item { background-color:#71B21F; }
#header-navi .sub-menu > .menu-item > a,#header-navi .sub-menu > .menu-item > a:visited { color:#fff; }
#header-navi .sub-menu > .menu-item > a { padding:16px 24px; }
#header-navi .sub-menu > .menu-item > a:hover { background-color:#008A3B; }

/* ヘッダーナビゲーション(モバイル) */
#header-navi-mb nav li { font-size:1.8rem; }
#header-navi-mb .bg-color { background-color:rgba(255,255,255,0.9); }
#header-navi-mb.open .bg-color { background-color:rgba(255,255,255,1.0); }
#header-navi-mb .palette { border-bottom:solid 2px rgba(153,153,153,0.2); }
#header-navi-mb.open .palette { border-bottom:solid 2px rgba(153,153,153,1.0); }
#header-navi-mb .menu { background-color:#f1ffd5; }
#header-navi-mb .sub-menu { background-color:#abc180 }
#header-navi-mb .menu .menu-item > a { padding-top:1.6rem; padding-bottom:1.6rem; }
#header-navi-mb .menu > .menu-item { border-bottom:solid 2px #999; }
#header-navi-mb .menu > .menu-item > a, #header-navi-mb .menu > .menu-item > a:visited { color:#333; }
#header-navi-mb .sub-menu > .menu-item { border-top:solid 2px #fff; }
#header-navi-mb .sub-menu > .menu-item > a, #header-navi-mb .sub-menu > .menu-item > a:visited { color:#fff; }

/* フッターナビゲーション */
#footer-navi > .bg { background-color:#d1002a; }
#footer-navi .menu { text-align:center; padding-top:10px; padding-bottom:10px; }
#footer-navi .menu .menu-item + .menu-item { margin-left:1.0rem; }
#footer-navi .menu .menu-item { font-size:1.4rem; }
#footer-navi .menu .menu-item > a { color:#fff; }