@charset "utf-8";
/* CSS Document */
body{
	max-width: 1280px;
	margin:0 auto;
	background: #eee;
}
#wrapper{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0 auto;
	background: #fff;
}
header {
	position: relative;
	margin: 0 auto;
	max-width: 1280px;
}

header h1 {
	padding: 12px;
	display: block;
	width: 120px;
	position: fixed;
	z-index:2;
	
}
header h1 img {
	width: 100%;
	height: auto;
	position: absolute;
	z-index:3;
}

/*----------------togleMenu-----------------*/
#nav-drawer {
	position: fixed;
	top: 10px;
	right: 10px;
	max-width: 1280px;
	z-index: 9000;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 35px;
	height: 35px;
	vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span {
	position: absolute;
	height: 35px;/*線の太さ*/
	width: 35px;/*長さ*/
	background: #555 url("../images/menu.png");
	display: block;
	content: '';
	z-index: 9999;
	cursor: pointer;
	top: 20px;
	right: 20px;
}



/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9998;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 240px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(105%);
  transform: translateX(105%);/*左に隠しておく*/
  padding: 10% 5%;
}
#nav-content .navTitle{
	text-align: center;
	font-size: 200%;
	border-bottom: solid 3px;
	border-image: linear-gradient(to right, #ed1c24, #ffdee0, #ed1c24 );
	border-image-slice: 1;
	width: 50%;
	margin: 0px auto 25%;
}
#nav-content li:before{
    content: '';
    width: 100%;
    height: 1px;
    background-color: #ccc;
	display: block;
	pdsition: absolute;
}
#nav-content li{
	margin: 15% auto;
	position: relative;
}
#nav-content li a{
	color: #555;
	top: -0.55em;
	position: relative;
	height: 20px;
	display: block;
	transition: all 0.3s ease 0s;
	cursor: pointer;
	font-size: 120%;
}
#nav-content li a:hover{
	color: #f9626d;
}

#nav-content li .menu-ja{
	right: 0;
	position: absolute;
}
.menu-ja,
.menu-en{
	background-color:#fff;
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（左へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


/*--------------fadeIn-----------------*/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


.css-fade2{
  animation-name:fade-in2;
  animation-duration:1s; 
  animation-timing-function: ease-out; 
  animation-delay:0s; 
  animation-iteration-count:1;
  animation-direction:normal; 
  animation-fill-mode: forwards; 
}
@keyframes fade-in2 {
  0% {opacity: 0; transform: translate3d(0,-20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

/*----------------footer-----------------*/

footer{
	height: 100vh;
	background-color: #f9626d;
	display:flex;
	justify-content: center;
	align-items: flex-end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	flex-wrap: wrap;
}
footer ul li{
	display: inline;
	font-size: 121%;
}
footer ul li a:hover{
	color: #ccc;
}
footer ul li+li::before{
	content: " | ";
}
footer p{
	font-size:75%;
	width: 100%;
	text-align: center;
	padding-bottom:1%;
}
@media screen and (max-width: 960px) {
footer{
	display:flex;
	justify-content: center;
	align-items: flex-end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	flex-wrap: wrap;
}
footer ul li{
	display: block;
	font-size: 121%;
	text-align:center;
	width: 100%;
	padding: 10%;
}
footer ul li+li::before{
	content: "";
}

}