@charset "utf-8";

/* Default Style */
body {
	font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
	font-size: 1.6rem; /*全体のフォントサイズは16pxとする*/
	background-color: #fff;
	line-height: 1;
	color:#000;
}

/* Default Link Style */
a {
	text-decoration: none;
	color: inherit;
	transition: 0.5s;
}

a:hover {
	opacity: .8;
}

/* common */

#wrapper {
	position: relative;
	width: 100%;	/*全ての要素を包括する<div id"wrapper">の幅を画面幅に設定する*/
	z-index:5;
}

section {
	display: block;
}

/* header ---------------------------------------- */
/* ヘッダー */
header {
	width: 100%;
	height: 80px;
	padding: 0 5%;
	background-color: #ffffff;
}

.header-inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1000px;
	height: 80px;
	margin:0 auto;
	padding:0;
}

 .header-inner > h1 {
	width: 100%;
	max-width: 346px;
}

 .header-inner > h1 img {
	width: 100%;
	height: auto;
}

.header-inner ul.snsBtn {
	display: flex;
	flex-flow: row nowrap;
}

.header-inner ul.snsBtn li {
	width: 32px;
	height: 32px;
	margin-left: 12px;
}

/* ヘッダーナビ------------------------------------ */
#navigation {
	width: 100%;
	padding: 0;
	background-color: #000000;
}

#navigation nav ul {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}

#navigation nav ul > li {
	margin: 0;
	text-align: center;
}

#navigation nav ul > li#nav_ep1 {
}
#navigation nav ul > li#nav_ep2 {
	background: url("../images/nav_ep02_cs.png") center center no-repeat;
	background-size: cover;
}
#navigation nav ul > li#nav_ep3 {
	background: url("../images/nav_ep03_cs.png") center center no-repeat;
	background-size: cover;
}
#navigation nav ul > li#nav_fin {
	background: url("../images/nav_soon.png") center center no-repeat;
	background-size: cover;
}
#navigation nav ul > li#nav_xmas {
}

#navigation nav ul > li > a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* episode01 */
#navigation nav#ep01nav ul > li#nav_ep2 a {
	opacity: 0;
	pointer-events: none;
}
#navigation nav#ep01nav ul > li#nav_ep3 a {
	opacity: 0;
	pointer-events: none;
}
/* episode02 */
#navigation nav#ep02nav ul > li#nav_ep3 a {
	opacity: 0;
	pointer-events: none;
}
/* coming soon */
#navigation nav ul > li#nav_fin a {
	opacity: 0;
	pointer-events: none;
}

#navigation nav ul > li > a::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: transparent url("../images/nav_ep_active.png") center center no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	transform: scale(1.5,1.5);
	transition: .3s
}

#navigation nav ul > li > a:hover {
	opacity: 1;
}

#navigation nav ul > li > a:hover::before,
#navigation nav ul > li.active > a::before {
	transform: scale(1.0,1.0);
}

/* footer ----------------------------------------- */
footer {
	width: 100%;
	padding: 12px 0 0;
	border-top: 1px solid #000000;
	font-size: 1.2rem;
	color: #000000;
}

footer p {
	width: 100%;
	max-width: calc(1000px + 10%);
	margin: 0 auto;
	line-height: 1.2;
	padding: 0 5%;
}

footer .copy {
	width: 100%;
	margin: 26px 0 0;
	padding: 14px 0;
	background-color: #00574c;
	color: #ffffff;
}

/* ------------------------------------------------ */
.container {
font-family: 'Noto Serif JP', serif;
}

.contents {
	padding: 0 0 56px;
}

.contents main {
}

/* ================================================ */

@media (max-width: 640px) {
/* header ---------------------------------------- */
/* ヘッダー */
header {
	height: 70px;
}

.header-inner {
	height: 70px;
}
}

/* ================================================ */

@media (max-width: 420px) {
}