@charset "utf-8";

/* common_layout
----------------------- */
body {
	background : #fff;
	color : #222;
	margin: 0px;
	padding: 0px;
}



img a{
	border:none;
}

a img {
	border:none;
}


a:hover img.op_hover {
	opacity:.8;
	filter:alpha(opacity=80);
	-ms-transition:.3s;
	transition:.3s;
	-moz-opacity:.8;
}









/* ===============================================
#snslink
=============================================== */
#snslink {
	margin-top: 10px;
	float: right;

}

#snslink li {
	float: left;
	margin-right: 10px;
}





/* Top Page
----------------------- */

/* ===============================================
#top #nav
=============================================== */
#top #nav {
	z-index: 999;
	background: #810b61;
	width: 100%;
	position: fixed;
	overflow-x: hidden;
	min-width: 1020px;
}
#top #nav #nav_innar {
	width: 100%;
	max-width: 1024px;
	min-width: 760px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 18px;
}


#top #nav h2 {
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: -120px;
}

#top #nav ul li {
	float: left;
}


#top #nav ul li a:hover img {
	background: #FFF;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#top #nav ul li a {
	outline: none;
}
.btn_scroll {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}


/* ===============================================
#movie
=============================================== */
#top #movie {
	overflow: hidden;
	padding-top: 21px;
	background-color: #fff;
}

#top #movie .wrapper {
	padding-top: 140px;
}

/* ===============================================
#work
=============================================== */
#top #work {
	height: 100px;
	padding-top: 20px;
}

/* ===============================================
#pickup
=============================================== */
#top #pickup {
	padding-top: 20px;
	width: 730px;
}

#top #pickup ul li.bnr_left {
	float: left;
	padding-left: 10px;
}

#top #pickup ul li.bnr_right {
	float: right;
	padding-right: 10px;
}

/* ===============================================
#sec_splash
=============================================== */
#sec_splash {
	position: absolute;
	z-index: 9999;
	margin: 0 15px;
	width: 730px;
	background: #810B61;
}
/* ===============================================
#concept
=============================================== */
#epilogue {
	margin-right: auto;
	margin-left: auto;
	max-width: 1060px;
	width: 80%;
	padding-bottom: 8%;
}
#epilogue ul li  {
	float: right;
}
#epilogue .txt01 {
	width: 7%;
	margin-left: 5%;
	margin-top: 115px;
}
#epilogue .txt02 {
	width: 11%;
	margin-left: 5%;
	margin-top: 160px;
}
#epilogue .txt03 {
	width: 15%;
	margin-left: 4%;
	margin-top: 130px;
}
#epilogue .txt04 {
	width: 7%;
	margin-left: 5%;
	margin-top: 170px;
}
#epilogue .txt05 {
	width: 11%;
	margin-left: 4%;
	margin-top: 225px;
}
#epilogue .txt06 {
	width: 11%;
	margin-left: 4%;
	margin-top: 170px;
}
#epilogue .txt07 {
	width: 11%;
	margin-top: 215px;
}

/* ===============================================
#menu
=============================================== */
#menu_bnt {
	width: 75%;
	max-width: 980px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 8%;
}
#menu_bnt ul li {
	float: right;
	width: 12.5%;
	margin-left: 8%;
}
#menu_bnt ul li img {
	-webkit-transition: 0.30s ease-in-out;
	-moz-transition: 0.30s ease-in-out;
	transition: 0.30s ease-in-out;
	
}
#menu_bnt ul li img:hover {
	opacity:0.8;
}
#menu_bnt ul .bnt01 {
	padding-top: 12%;
}
#menu_bnt ul .bnt02 {
	padding-top: 9%;
}
#menu_bnt ul .bnt03 {
	padding-top: 12%;
}
#menu_bnt ul .bnt04 {
	padding-top: 7%;
}
#menu_bnt ul .bnt05 {
	padding-top: 12%;
	margin-left: 0px;
}


@media screen and (max-height: 768px){
#menu_bnt ul .bnt01 {
	padding-top: 8%;
}
#menu_bnt ul .bnt02 {
	padding-top: 5%;
}
#menu_bnt ul .bnt03 {
	padding-top: 8%;
}
#menu_bnt ul .bnt04 {
	padding-top: 3%;
}
#menu_bnt ul .bnt05 {
	padding-top: 8%;
	margin-left: 0px;
}
}

/* ===============================================
#novels
=============================================== */
#novels {
	width: 71%;
	max-width: 983px;
	min-width: 740px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3%;
	margin-bottom: 5%;
	-webkit-transition: 0.30s ease-in-out;
	-moz-transition: 0.30s ease-in-out;
	transition: 0.30s ease-in-out;
}
@media screen and (min-height: 780px){
#novels {
	width: 70%;
	max-width: 983px;
	min-width: 740px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 4%;
	margin-bottom: 5%;
		-webkit-transition: 0.30s ease-in-out;
		-moz-transition: 0.30s ease-in-out;
		transition: 0.30s ease-in-out;
}
}
#novels .img {
	text-align: center;
	margin-bottom: 0%;
}
#novels ul .next {
	float: left;
	position: relative;
	padding-top: 4px;
	-webkit-transition: 0.30s ease-in-out;
	-moz-transition: 0.30s ease-in-out;
	transition: 0.30s ease-in-out;
}
#novels ul .next:hover {
	opacity:0.8;
}
#novels ul .back {
	float: right;
	position: relative;
	padding-top: 4px;
	-webkit-transition: 0.30s ease-in-out;
	-moz-transition: 0.30s ease-in-out;
	transition: 0.30s ease-in-out;
}
#novels ul .back:hover {
	opacity:0.8;
}
#novels ul .num {
	width: 10%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#novels .note  {
	position: relative;
	margin-bottom: 0%;
}
#novels .note .place {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 35%;
}
#novels .note .place2 {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 61%;
}
#novels .note .bt01 {
	position: absolute;
	width: 12.5%;
	left: 20%;
	top: 0%;
}
#novels .note .bt02 {
	position: absolute;
	width: 12.5%;
	left: 0%;
	top: 0%;
}
#novels .note .bt03 {
	position: absolute;
	width: 12.5%;
	top: 0%;
	right: 0%;
}
#novels .note .bt04 {
	position: absolute;
	width: 12.5%;
	top: 0%;
	right: 20%;
}
#novels .note .bt05 {
	position: absolute;
	width: 12.5%;
	top: 0%;
	right: 40%;
}
#novels .note .bt06 {
	position: absolute;
	width: 12.5%;
	top: 0%;
	right: 60%;
}
#novels .note .bt01,#novels .note .bt02,#novels .note .bt03,#novels .note .bt04,#novels .note .bt05,#novels .note .bt06 {
	-webkit-transition: 0.30s ease-in-out;
	-moz-transition: 0.30s ease-in-out;
	transition: 0.30s ease-in-out;
}
#novels .note .bt01:hover,#novels .note .bt02:hover,#novels .note .bt03:hover,#novels .note .bt04:hover,#novels .note .bt05:hover,#novels .note .bt06:hover {
	opacity:0.85;
}
#novels .shiori {
}




/* ===============================================
#prologue
=============================================== */
/* SLIDER */
#prolo_contents .slider {
	float: left;
	height: 100vh !important;
	width: 50%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#prolo_contents .slider {
    background-position: center top\9;
    background-repeat: repeat-x\9;
}

*+html #prolo_contents .slider {
    background-position: center top;
    background-repeat: repeat-x;
}
body > #prolo_contents .slider {
    height: auto;
}

#prolo_contents .txt_area {
	float: left;
	width: 50%;
	max-width:660px;
	height:100hv;
	position:relative;
}
#prolo_contents .txt_area .txt01 {
	position: absolute;
	right: 18%;
	width: 8%;
	top: 60px;
}
#prolo_contents .txt_area .txt02 {
	position: absolute;
	right: 38%;
	width: 12%;
	top: 115px;
}
#prolo_contents .txt_area .txt03 {
	position: absolute;
	width: 12%;
	top: 175px;
	left: 26%;
}
#prolo_contents .txt_area .copy {
	position: absolute;
	left: -8%;
	width: 14%;
	top: 55px;
}
#prolo_contents .txt_area .bnt {
	position: absolute;
	left: -5%;
	width: 11%;
	top: 460px;
}