@charset "UTF-8";
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■
共通
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

body {
	margin: 0;
	padding: 0;
	color: #333;
}
ul, li, img, p {
	margin: 0;
	padding: 0;
	list-style:none;
}
a {
	text-decoration:none;
	color:black;
}
a:hover {
	text-decoration:none;
	color:black;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ヘッダーメニュー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#menu {
	background-color: #333;
	position: fixed;
	top: -55px;
	width:100%;
	height: 55px;
	transition: 0.8s;
	z-index:9998;
	display: flex;
	flex-wrap: wrap;
}
#menu2 {
	display:none;
}
#menu h2 {
	color: #FFF;
	padding: 0px;
	margin: 12px 0px 0 2%;
	width: 18%;
}
#menu ul {
	color: #FFF;
	display: flex;
	text-align: center;
	width: 65%;
	flex-wrap: wrap;
	margin: 26px 0 0 15%;
}
#menu ul li {
	font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
	font-size: 15px;
	text-align: center;
	line-height: 100%;
	width: 11.1111111%;
	letter-spacing: 0.1em;
}
#menu ul li a {
	color: #FFF;
	text-decoration: none;
	transition:0.3s;
}
#menu ul li a:hover {
	color: #C21F1F;
	text-decoration: none;
}
/*スクロール後のメニュー*/
#menu.scroll {
	position: fixed;
	top: 0px;
	background-color: #333;
}
/*1000以下のメニュー*/
@media only screen and (max-width: 1000px) {
#menu ul {
	width: 75%;
	margin: 26px 0 0 5%;
}
#menu ul li {
	font-size: 14px;
	letter-spacing: 0em;
}
}

/*641以下のメニュー*/
@media only screen and (max-width: 641px) {
#menu.scroll {
	display:none;
}
#menu ul {
	display:none;
}
#menu2 {
	display: block;
	position: fixed;
	top: -40px;
	z-index: 999999;
	width: 100%;
	transition: 0.6s;
}
#menu2.scroll {
	top: 0px;
	transition: 0.6s;
}
#menu2 #navi {
	margin-bottom : 1.5em;
	/*background-color: RGBA(0, 0, 0, 0.84);*/
	/*! border-top: 1px solid #827D7D; */
	width: 100%;   /* 幅を100％に */
	z-index: 100;  /* 必要に応じて */
	margin-top: 0;
	/*position: fixed;*/
	top: 0px;
	/*! height: 100vh; */
	z-index: 130;
}
#menu2 #navi ul {
	overflow : hidden;     /* 必要に応じて */
	margin: 0;
	padding: 0;
}
#menu2 #navi ul li {
	width : 100%;    /* 幅を100％に */
	font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
	font-size: 16px;
	height: 10vh;
}
#menu2 #navi ul li a {
	color : #FFF;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: dotted 1px #888;
	height: 100%;
	background: RGBA(0, 0, 0, 0.71);
}
#menu2 #navi ul li a:hover {
	color:#8FEDF1;
	background-color : #333;
	text-decoration:none;
}
#menu2 #navi ul {
	display: none;      /* スモールデバイスでは非表示に */
	height: 90vh;
}
#menu2 #navi a#pull {
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #FFF;
	z-index: 10;
	font-weight: 600;
	background: RGBA(0, 0, 0, 0.71);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}
#menu2 #navi a:hover#pull {
	color: #99DDF5;
}
/* :after 擬似要素で #pull に背景画像を指定 */
/*    #menu #navi a#pull:after {
	content:"";
	background: url(../images/navi-icon.png) no-repeat;
	width: 30px;
	height: 30px;
	display: inline-block;
	position: relative;
	left: 35%;
	top: 5px;
} */
/* :after 擬似要素でホバー時の背景画像を指定 */ 
    /* スマートフォンなどでは「ホバー」はないので不要かも */ 
/* #menu2 #navi a:hover#pull:after {
	content:"";
	background: url(../images/navi-icon-hover.png) no-repeat;
	width: 30px;
	height: 30px;
	display: inline-block;
	position: relative;
	left: 35%;
	top: 5px;
}*/
/*clearfix*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
}
/*■メニュー終わり*/