@charset "utf-8";
/* ------------------------------------------------------------ common */
body { font-size: 14px; color: #fff; background: url(../images/fv.png) left top/cover no-repeat;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

body.fixed { overflow: hidden; }

a { color: #fff; text-decoration: none; }
.inner { width: 92%; margin: auto; box-sizing: border-box; }
p { line-height: 220%; }

#wrapper { max-width: 640px; width: 100%; margin: auto; }
#header { transition: 0.5s; position: relative; position: fixed; left: 0; right: 0; max-width: 640px; margin: auto; top: 0; width: 100%; z-index: 999; }
#header h1 {  text-align: center; padding: 20px 0; }
#header h1 img { max-width: 280px; width: 48%; height: auto; margin: auto; }

#header .white { display: block; }
#header .black { display: none; }

#header .sns { align-items: center; right: 2%; margin: auto; top: 0; bottom: 0; height: 100%; display: flex; position: absolute; }
#header .sns a { display: block; width: 7vw; height: 7vw; max-width: 35px; max-height: 35px; background-size: 100% auto !important; margin: 0 5px; }
#header .sns .fb { background: url(../images/icn_fb.png) no-repeat center center;  }
#header .sns .ig { background: url(../images/icn_ig.png) no-repeat center center;  }

#header.active { background: none !important; }
#header.active .menu_btn,
#header.fixed .menu_btn { background: none; }
#header.active .menu_btn span,
#header.fixed .menu_btn span { background: #000; }
#header.active .black,
#header.fixed .black { display: block; }
#header.active .white,
#header.fixed .white { display: none; }

#header.active .sns .fb,
#header.fixed .sns .fb { background: url(../images/icn_fb_bk.png) no-repeat center center; }
#header.active .sns .ig,
#header.fixed .sns .ig { background: url(../images/icn_ig_bk.png) no-repeat center center; }

#header.fixed { background: #ecebe7; }

/* ------------------------------------------------------------ menu btn */

#header .menu_btn { display: flex; width: 61px; height: 61px; align-items: center; position: absolute; cursor: pointer; flex-wrap: wrap;
	box-sizing: border-box;
	padding: 15px 12px 17px;
	left: 0;
	top: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	background: #000;
}

#header .menu_btn span { display: block; height: 2px; width: 100%; background: #fff; opacity: 1; left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#header .menu_btn span:nth-child(1) {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#header .menu_btn span:nth-child(2) {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#header .menu_btn span:nth-child(3) {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#header .menu_btn.open span:nth-child(1) {
	-webkit-transform: rotate(45deg) translate(2px, -6px);
	-moz-transform: rotate(45deg) translate(2px, -6px);
	-o-transform: rotate(45deg) translate(2px, -6px);
	transform:  rotate(45deg) translate(2px, -6px);
	
}

#header .menu_btn.open span:nth-child(2) { opacity: 0; }

#header .menu_btn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(2px, 6px);
  -moz-transform: rotate(-45deg) translate(2px, 6px);
  -o-transform: rotate(-45deg) translate(2px, 6px);
  transform: rotate(-45deg) translate(2px, 6px);
} 

/* ------------------------------------------------------------ nav */

.nav { display: none; z-index: 99; position: fixed; top: 0; left: 0; right: 0; margin: auto; max-width: 640px; width: 100%; background: #fff; height: 100%;
	padding: 70px 25px 0;
	box-sizing: border-box;
}

.nav li { padding: 10px 0; }
.nav li a { display: block; color: #000; font-size: 20px; }

#footer { text-align: center; border-top: 1px solid #fff; padding: 15px 3% 30px;  background: #75716c; }
#footer .back_top { text-align: right; }
#footer .back_top a { display: inline-block; }
#footer h6 { padding: 25px 0 30px; }
#footer h6 svg { width: 60%; max-width: 300px; height: auto; color : #fff; }
#footer p.sns a { display: inline-block; margin: 0 5px; }
#footer p.sns a img { width: 30px; height: auto; }