@charset "utf-8";

html * {
	box-sizing: border-box;

}
body {
	margin: 0;
/*	background: url(../images/bg.png);*/
	font-family: sans-serif;
	font-size: 16px;
	background-color:#d4d4f9;
}
.banner img {
	border: 1px solid #c7c7c7;
	/* アニメーションの設定 */
	animation-name: change_color;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-delay:5s;
	width: 100%;
}
.banner01 img {
	border: 1px solid #c7c7c7;
	/* アニメーションの設定 */
	animation-name: change_color;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-iteration-count: infinite;
	width: 20%;
}

@keyframes change_color {
  0% {
   filter: hue-rotate(0deg);
  }
  50% {
   filter: hue-rotate(180deg);
  }
  100% {
   filter: hue-rotate(360deg);
  }
}
a.fo{
	background: #d4d4f9;
}
a.fo:hover,
a.fo:focus{
	background: #990;
}
/* ヘッダーとナビゲーションの部分を固定配置 */
.header-nav-wrapper {
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	background: #000000;
}
/* スクロールする部分は固定した要素よりも下に配置 */
.main-wrapper {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 135px;
	width: 100%;
}
header {
	background: #000000;
}
.header-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 20px 10px 20px;
}
.header-logo {
	margin: 0;
	width: 200px;
	height: 44px;
	background: url(../images/logo.png) no-repeat;
	background-size: 200px 44px;
	text-indent: -9999px;
}
/* ナビゲーション */
nav {
	background: #000000;
}
.nav-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px 0 20px;
}
.globalnav {
	display: flex;
	flex-flow: row;
	margin: 0;
	padding: 0;
	list-style: none;
}
.globalnav li {
	flex: 0 0 12%;	
}
.globalnav li a {
	display: block;
	padding: 10px 0;
	border-bottom: 8px solid #ffffff;
	text-decoration: none;
	text-align: center;
	line-height: 100%;
	color: #ffffff;
}
.globalnav li a:hover,
.globalnav li a.current {
	border-bottom: 8px solid #7bae34;
	color: #7bae34;
}
/* フッター */
footer { }
.footer-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 0 0 10px 10px;
	background: #000000;	
}
.copyright {
	margin: 0;
	font-size: 0.8rem;
	color: #ffffff;
}
/* メインコンテンツレイアウト部分 */
main { }
.main-container {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0 40px 0;
	background: #d4d4f9;
}
.keyvisual {
	font-size: 0;
}
.keyvisual img {
	width: 100%;
}
.ko{
	align: right;
}
.outer ul {
	overflow: hidden;
	padding: 60px 20px; 
	margin: 2em 0;
	list-style: none;
}
.title{
	font-size: 60px;
}
.outer li {
	float: left;
	box-sizing: border-box;
	width: 10%;
	padding : 8px;
	font-size: 0;
}
.outer li img {
	width: 100%;
	height: auto;
	outline: 4px solid #dedede;
	transition: all 0.5s cubic-bezier(.48,.01,.45,1.9);
}
.outer li a:hover img {
	box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.4);
	transform: scale(1.2) rotate(8deg);
	z-index: 100;
}
.outer2 ul {
	overflow: hidden;
	padding: 30px 0;
	margin: 0;
	list-style: none;
	font-size: 20px;
	
}
.outer2 li {
	float: left;
	box-sizing: border-box;
	width: 10%;
	padding :8px;
	perspective: 500px;
}
.outer2 li img {
	perspective: 500px;
	width: 100%;
	height: auto;
	transition: all 0.2s linear;
	opacity: 0.5;
}
.outer2 li:hover img {
	transform: rotateY(180deg);
	opacity: 1.5;
	z-index: 100;
}
.moji {
	font-size: 40px;
}