@charset "UTF-8";


/* -------------------------------------------------------------------------- **
**  CONTENTS LAYOUT
** -------------------------------------------------------------------------- */

#body #content {
	text-align: left;
	}
	#body .content-inner {
		width: 940px;
		margin: 0;
		padding-bottom: 75px;
		}

	#main #maincol .h3_title {
		width: 670px;
		height: 0;
		margin: 0;
		margin-bottom: 20px;
		margin-left: -10px;
		margin-right: -10px;
		padding: 0;
		padding-top: 50px;
		background: transparent url(../images/contents/h3_title.png) left top no-repeat;
		text-align: center;
		line-height: 100px;
		overflow: hidden;
		}
	#main #maincol .h3_title.title1 { background-position: 0px 0px; }
	#main #maincol .h3_title.title2 { width: 660px; margin-bottom: 0px; margin-left: 0px; background-position: 0px -50px; }
	#main #maincol .h3_title.title3 { background-position: 0px -100px; }

	#main #maincol .h4_title {
		width: 100px;
		height: 0;
		margin: 0;
		margin-bottom: 15px;
		padding: 0;
		padding-top: 100px;
		background: transparent url(../images/contents/h4_title.png) left top no-repeat;
		text-align: center;
		line-height: 100px;
		overflow: hidden;
		}
	#main #maincol .h4_title.title1 { background-position: 0px 0px; }
	#main #maincol .h4_title.title2 { background-position: 0px -100px; }
	#main #maincol .h4_title.title3 { background-position: 0px -200px; }
	#main #maincol .h4_title.title4 { background-position: 0px -300px; }

			#main #sidecol .pnav li a {
				background: transparent url(../images/contents/pnav.png) left top no-repeat;
				}
			#main #sidecol .pnav li.pnav1 a { background-position: 0px 0px; }
			#main #sidecol .pnav li.pnav2 a { background-position: 0px -70px; }
			#main #sidecol .pnav li.pnav3 a { background-position: 0px -140px; }
			
			#main #sidecol .pnav li.pnav1 a:hover { background-position: -300px 0px; }
			#main #sidecol .pnav li.pnav2 a:hover { background-position: -300px -70px; }
			#main #sidecol .pnav li.pnav3 a:hover { background-position: -300px -140px; }
			
			#main .content1 #sidecol .pnav li.pnav1 a { background-position: -300px 0px; cursor: default; }
			#main .content2 #sidecol .pnav li.pnav2 a { background-position: -300px -70px; cursor: default; }
			#main .content3 #sidecol .pnav li.pnav3 a { background-position: -300px -140px; cursor: default; }

	#main #maincol .text {
		width: 650px;
		height: 0;
		margin: 0;
		padding: 0;
		padding-top: 55px;
		background: transparent url(../images/contents/text.png) left top no-repeat;
		text-align: center;
		line-height: 100px;
		overflow: hidden;
		}
	#main #maincol .text.text1 { background-position: 0px 0px; }
	#main #maincol .text.text2 { padding-top: 95px; background-position: 0px -55px; }


.views-row ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 5px;
	padding-bottom: 20px;
	}
	.views-row ul li {
		float: left;
		margin-right: 10px;
		padding-bottom:20px;
		}
		.views-row ul li a { display: block; margin-bottom: 5px; }
		.views-row ul li a:hover {
			-webkit-opacity: 0.60;
			-moz-opacity: 0.60;
			-ms-opacity: 0.60;
			-o-opacity: 0.60;
			opacity: 0.60;
			filter: alpha(opacity=60);
			}
		.views-row ul li p {
			text-align: center;
			}


/* -------------------------------------------------------------------------- **
**  CONTENT RETINA
** -------------------------------------------------------------------------- */
@media only screen and (min-device-pixel-ratio:1.5),
	only screen and (-o-min-device-pixel-ratio:3/2),
	only screen and (-ms-min-device-pixel-ratio:1.5),
	only screen and (min--moz-device-pixel-ratio:1.5),
	only screen and (-webkit-min-device-pixel-ratio:1.5) {
		#main #sidecol .pnav li a { background-image: url(../images/contents/pnav_2x.png); background-size: 600px auto; }
		#main #maincol .h3_title { background-image: url(../images/contents/h3_title_2x.png); background-size: 670px auto; }
		#main #maincol .h4_title { background-image: url(../images/contents/h4_title_2x.png); background-size: 100px auto; }
		#main #maincol .text { background-image: url(../images/contents/text_2x.png); background-size: 650px auto; }
	}


/* -------------------------------------------------------------------------- **
**  PANEL
** -------------------------------------------------------------------------- */
#panel-wrap {
	position: relative;
	width: 960px;
	}
	#panel-wrap .panel-inner {
		}

#panel-wrap .panel-inner {
	position: relative;
	overflow: hidden;
	}
	#panel-wrap .panel-inner ul {
		list-style: none;
		margin: 0;
		padding: 0;
		}
		#panel-wrap .panel-inner ul li {
			position: relative;
			float: left;
			}

#panel-wrap .panel-nav {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin: 0;
	margin-top: -32px;
	z-index: 10;
	}
	#panel-wrap .panel-nav ul {
		position: absolute;
		list-style: none;
		width: 100%;
		padding: 0;
		}
	#panel-wrap .panel-nav ul li {
		position: absolute;
		}
		#panel-wrap .panel-nav ul li a {
			display: block;
			width: 65px;
			height: 0px;
			margin: 0;
			padding: 0;
			padding-top: 65px;
			background: transparent url(../images/contents/arrow.png) left top no-repeat;
			line-height: 70px;
			outline: none;
			overflow: hidden;
			}
		#panel-wrap .panel-nav ul li.panel-prev a { background-position: 0px 0px; }
		#panel-wrap .panel-nav ul li.panel-next a { background-position: 0px -65px; }
		#panel-wrap .panel-nav ul li.panel-prev a:hover { background-position: -65px 0px; }
		#panel-wrap .panel-nav ul li.panel-next a:hover { background-position: -65px -65px; }


#panel-wrap.about {
	width: 650px;
	height: 435px;
	background: transparent url(../images/contents/about/panel-wrap.png) left top no-repeat;
	}
	#panel-wrap.about .panel-inner {
		position: absolute;
		top: 16px;
		left: 32px;
		width: 585px;
		height: 400px;
		overflow: hidden;
		}

	#panel-wrap.about .panel-inner ul {
		position: absolute;
		width: 2350px;
		padding: 6px 0px 7px 0px;
		}
		#panel-wrap.about .panel-inner ul li {
			width: 578px;
			height: 0px;
			padding: 0;
			padding-top: 387px;
			padding-left: 7px;
			background-color: transparent;
			background-position: 8px 0px;
			background-repeat: no-repeat;
			line-height: 400px;
			overflow: hidden;
			}
		#panel-wrap.about .panel-inner ul li.panel1 { background-image: url(../images/contents/about/view1.jpg); }
		#panel-wrap.about .panel-inner ul li.panel2 { background-image: url(../images/contents/about/view2.jpg); }
		#panel-wrap.about .panel-inner ul li.panel3 { background-image: url(../images/contents/about/view3.jpg); }
		#panel-wrap.about .panel-inner ul li.panel4 { background-image: url(../images/contents/about/view4.jpg); }

#panel-wrap.about .panel-nav {
	left: 32px;
	width: 585px;
	}
	#panel-wrap.about .panel-nav ul li a { background-image: url(../images/contents/about/arrow.png); }
	#panel-wrap.about .panel-nav ul li.panel-prev { left: 15px; }
	#panel-wrap.about .panel-nav ul li.panel-next { right: 15px; }


#panel-wrap.story,
#panel-wrap.chara {
	width: 960px;
	height: 450px;
	}
#panel-wrap.story {
	background: transparent url(../images/contents/story/panel-wrap.png) left top no-repeat;
	}
#panel-wrap.chara {
	background: transparent url(../images/contents/character/panel-wrap.png) left top no-repeat;
	}
	#panel-wrap.story .panel-inner,
	#panel-wrap.chara .panel-inner {
		position: absolute;
		top: 54px;
		left: 118px;
		width: 780px;
		height: 336px;
		overflow: hidden;
		}

	#panel-wrap.story .panel-inner ul,
	#panel-wrap.chara .panel-inner ul {
		position: absolute;
		width: 11700px;
		padding: 0px;
		}
	#panel-wrap.chara .panel-inner ul {
		width: 16380px;
		}
		#panel-wrap.story .panel-inner ul li,
		#panel-wrap.chara .panel-inner ul li {
			width: 780px;
			height: 0px;
			padding: 0;
			padding-top: 336px;
			background-color: transparent;
			background-position: left top;
			background-repeat: no-repeat;
			line-height: 400px;
			overflow: hidden;
			}
		#panel-wrap.story .panel-inner ul li.panel1 { background-image: url(../images/contents/story/view1.jpg); }
		#panel-wrap.story .panel-inner ul li.panel2 { background-image: url(../images/contents/story/view2.jpg); }
		#panel-wrap.story .panel-inner ul li.panel3 { background-image: url(../images/contents/story/view3.jpg); }
		#panel-wrap.story .panel-inner ul li.panel4 { background-image: url(../images/contents/story/view4.jpg); }
		#panel-wrap.story .panel-inner ul li.panel5 { background-image: url(../images/contents/story/view5.jpg); }
		#panel-wrap.story .panel-inner ul li.panel6 { background-image: url(../images/contents/story/view6.jpg); }
		#panel-wrap.story .panel-inner ul li.panel7 { background-image: url(../images/contents/story/view7.jpg); }
		#panel-wrap.story .panel-inner ul li.panel8 { background-image: url(../images/contents/story/view8.jpg); }
		#panel-wrap.story .panel-inner ul li.panel9 { background-image: url(../images/contents/story/view9.jpg); }
		#panel-wrap.story .panel-inner ul li.panel10 { background-image: url(../images/contents/story/view10.jpg); }
		#panel-wrap.story .panel-inner ul li.panel11 { background-image: url(../images/contents/story/view11.jpg); }
		#panel-wrap.story .panel-inner ul li.panel12 { background-image: url(../images/contents/story/view12.jpg); }
		#panel-wrap.story .panel-inner ul li.panel13 { background-image: url(../images/contents/story/view13.jpg); }
		#panel-wrap.story .panel-inner ul li.panel14 { background-image: url(../images/contents/story/view14.jpg); }
		#panel-wrap.story .panel-inner ul li.panel15 { background-image: url(../images/contents/story/view15.jpg); }
		
		#panel-wrap.chara .panel-inner ul li.panel1 { background-image: url(../images/contents/character/view1.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel2 { background-image: url(../images/contents/character/view2.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel3 { background-image: url(../images/contents/character/view3.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel4 { background-image: url(../images/contents/character/view4.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel5 { background-image: url(../images/contents/character/view5.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel6 { background-image: url(../images/contents/character/view6.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel7 { background-image: url(../images/contents/character/view7.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel8 { background-image: url(../images/contents/character/view8.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel9 { background-image: url(../images/contents/character/view9.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel10 { background-image: url(../images/contents/character/view10.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel11 { background-image: url(../images/contents/character/view11.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel12 { background-image: url(../images/contents/character/view12.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel13 { background-image: url(../images/contents/character/view13.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel14 { background-image: url(../images/contents/character/view14.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel15 { background-image: url(../images/contents/character/view15.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel16 { background-image: url(../images/contents/character/view16.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel17 { background-image: url(../images/contents/character/view17.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel18 { background-image: url(../images/contents/character/view18.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel19 { background-image: url(../images/contents/character/view19.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel20 { background-image: url(../images/contents/character/view20.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel21 { background-image: url(../images/contents/character/view21.jpg); }


		#panel-wrap.story .panel-inner ul li a {
			position: absolute;
			display: block;
			top: 207px;
			left: 600px;
			width: 162px;
			height: 125px;
			margin: 0;
			padding: 0;
			color: #000;
			font-weight: bold;
			text-decoration: none;
			z-index: 10;
			}
		#panel-wrap.story .panel-inner ul li a:hover {
			-webkit-opacity: 0.60;
			-moz-opacity: 0.60;
			-ms-opacity: 0.60;
			-o-opacity: 0.60;
			opacity: 0.60;
			filter: alpha(opacity=60);
			}

		#panel-wrap.story .panel-inner ul li a img {
			position: absolute;
			top: 0;
			left: 0;
			}

#panel-wrap.story .panel-nav,
#panel-wrap.chara .panel-nav {
	left: 118px;
	width: 780px;
	}
	#panel-wrap.story .panel-nav ul li.panel-prev,
	#panel-wrap.chara .panel-nav ul li.panel-prev { left: 0px; }
	#panel-wrap.story .panel-nav ul li.panel-next,
	#panel-wrap.chara .panel-nav ul li.panel-next { right: 0px; }

/* -------------------------------------------------------------------------- **
**  PANEL RETINA
** -------------------------------------------------------------------------- */
@media only screen and (min-device-pixel-ratio:1.5),
	only screen and (-o-min-device-pixel-ratio:3/2),
	only screen and (-ms-min-device-pixel-ratio:1.5),
	only screen and (min--moz-device-pixel-ratio:1.5),
	only screen and (-webkit-min-device-pixel-ratio:1.5) {
		#panel-wrap .panel-nav ul li a { background-image: url(../images/contents/arrow_2x.png); background-size: 130px auto; }
		
		#panel-wrap.about .panel-nav ul li a { background-image: url(../images/contents/about/arrow_2x.png); }
		#panel-wrap.about { background-image: url(../images/contents/about/panel-wrap_2x.png); background-size: cover; }
		#panel-wrap.about .panel-inner ul li { background-size: 570px auto; }
		#panel-wrap.about .panel-inner ul li.panel1 { background-image: url(../images/contents/about/view1_2x.jpg); }
		#panel-wrap.about .panel-inner ul li.panel2 { background-image: url(../images/contents/about/view2_2x.jpg); }
		#panel-wrap.about .panel-inner ul li.panel3 { background-image: url(../images/contents/about/view3_2x.jpg); }
		#panel-wrap.about .panel-inner ul li.panel4 { background-image: url(../images/contents/about/view4_2x.jpg); }
		
		#panel-wrap.story { background-image: url(../images/contents/story/panel-wrap_2x.png); background-size: cover; }
		#panel-wrap.story .panel-inner ul li { background-size: 780px auto; }
		#panel-wrap.story .panel-inner ul li.panel1 { background-image: url(../images/contents/story/view1_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel2 { background-image: url(../images/contents/story/view2_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel3 { background-image: url(../images/contents/story/view3_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel4 { background-image: url(../images/contents/story/view4_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel5 { background-image: url(../images/contents/story/view5_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel6 { background-image: url(../images/contents/story/view6_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel7 { background-image: url(../images/contents/story/view7_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel8 { background-image: url(../images/contents/story/view8_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel9 { background-image: url(../images/contents/story/view9_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel10 { background-image: url(../images/contents/story/view10_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel11 { background-image: url(../images/contents/story/view11_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel12 { background-image: url(../images/contents/story/view12_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel13 { background-image: url(../images/contents/story/view13_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel14 { background-image: url(../images/contents/story/view14_2x.jpg); }
		#panel-wrap.story .panel-inner ul li.panel15 { background-image: url(../images/contents/story/view15_2x.jpg); }
		#panel-wrap.story .panel-inner ul li a { background-size: 162px auto; }
		
		#panel-wrap.chara { background-image: url(../images/contents/character/panel-wrap_2x.png); background-size: cover; }
		#panel-wrap.chara .panel-inner ul li { background-size: 780px auto; }
		#panel-wrap.chara .panel-inner ul li.panel1 { background-image: url(../images/contents/character/view1_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel2 { background-image: url(../images/contents/character/view2_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel3 { background-image: url(../images/contents/character/view3_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel4 { background-image: url(../images/contents/character/view4_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel5 { background-image: url(../images/contents/character/view5_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel6 { background-image: url(../images/contents/character/view6_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel7 { background-image: url(../images/contents/character/view7_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel8 { background-image: url(../images/contents/character/view8_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel9 { background-image: url(../images/contents/character/view9_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel10 { background-image: url(../images/contents/character/view10_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel11 { background-image: url(../images/contents/character/view11_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel12 { background-image: url(../images/contents/character/view12_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel13 { background-image: url(../images/contents/character/view13_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel14 { background-image: url(../images/contents/character/view14_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel15 { background-image: url(../images/contents/character/view15_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel16 { background-image: url(../images/contents/character/view16_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel17 { background-image: url(../images/contents/character/view17_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel18 { background-image: url(../images/contents/character/view18_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel19 { background-image: url(../images/contents/character/view19_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel20 { background-image: url(../images/contents/character/view20_2x.jpg); }
		#panel-wrap.chara .panel-inner ul li.panel21 { background-image: url(../images/contents/character/view21_2x.jpg); }
	}