html {
	height: 100%;
	width: 100%;
}
	
body {
	height: 100%;
	background-image: url("../image/bg11.jpg"); 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center center;
	background-attachment: fixed;
	font-size: 14pt;
	font-family: "Zen Maru Gothic", "Sawarabi Gothic", メイリオ, 游ゴシック;
	overflow: hidden;
	min-height: 100vh;
}

div.logo{
	text-align: center;
	margin-top: 15%;
}

img.logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	opacity: 0.2;
}

.fade {
  animation: fadeIn 7.0s ease 0s 1 forwards;
}
 
@keyframes fadeIn {
  0% {
	opacity: 0;
	transform: translateY(20px);
}
  100% {
	opacity: 1;
	transform: translateY(0px);
	}
}

/* ヘッダーメニュー表示 */
header {
	width: 100%;
	position: relative;
}

li{
	list-style-type: none;
}

ul.menu {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	position: relative;
	flex-direction: row-reverse;
	list-style-type: none;
	margin: 0; 
	padding: 0;
	letter-spacing: 2px;
	font-weight: bold;
}

ul.menu li {
	width: 180px;
	height: 38px;
	position: relative;
}

ul.menu a {
	display: block;
	margin: 2px; padding:10px; font-size:14px;
	background-color: rgba(255,255,255,0.2);
	color: black;
	text-align: center;
	text-decoration: none;
}

ul.menu a:hover {
	background-color:rgba(255,255,255,0.5);
	color:black;
	box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}

ul.menu li ul {
	margin: 0;
	position: relative;
	top: -2px;
	left: -40px;	
	display: none;
}

ul.menu li:hover ul {
	display: block;
}

ul.menu li:hover ul{
    animation: MoveIn 1.0s ease 0s 1 forwards;
}

.menu_list ul li:hover ul {
    animation: MoveIn 1.0s ease 0s 1 forwards;
}
 
@keyframes MoveIn {
  0% {
	opacity: 0;
	transform: translateY(-30px);
}
  100% {
	opacity: 1;
	transform: translateY(0);
	}
}

/* ヘッダーメニューここまで */

footer {
	width: 99%;
	display: inline-block;
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Serif;
	font-size: 14px;
	font-style: oblique;
}

li a {
	text-decoration: none;
	transition-duration: 0.5s;
}