@charset "UTF-8";
/* ===========================================
- Reset
- Common
- Header
- Navigation
- Footer
- Contents
=========================================== */

/* ===========================================
Reset
=========================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

/* ===========================================
Common
=========================================== */
html {
	font-size: 62.5%;
	width: 100%;
	height: 100%;
}
body {
	opacity: 1;
	width: 100%;
	height: 100%;
	min-width: 960px;
	color: #000;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	text-align: justify;
	text-justify: distribute-all-lines;
}
*, *:before, *:after {
	border: 0;
	outline: 0;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
img {
	vertical-align: middle;
	font-size: 0;
	line-height: 0;
}
a {
	text-decoration: none;
}
a:hover {
	color: #dac700;
}
/* -------- Animation -------- */
.wow {
	opacity: 0;
}

/* ===========================================
Header
=========================================== */
header {
	height: 786px;
	background: url(../img/header/bg.jpg) no-repeat center top;
	background-size: cover;
}
.header_inner {
	position: relative;
	width: 960px;
	height: 100%;
	margin: 0 auto;
}
#main_boy {
	position: absolute;
	top: 0;
	right: -15px;
	width: 531px;
	height: 468px;
	background: url(../img/header/main_boy.png) no-repeat 0 0;
}
#main_girl {
	position: absolute;
	bottom: 0;
	left: -120px;
	width: 718px;
	height: 404px;
	background: url(../img/header/main_girl.png) no-repeat 0 0;
}
#logo {
	position: absolute;
	top: 64px;
	left: 60px;
}
#copy {
	position: absolute;
	top: 10px;
	left: 84px;
}
#copy2 {
	position: absolute;
	top: 106px;
	right: 80px;
}
#release {
	position: absolute;
	top: 430px;
	left: 435px;
}
#trailer {
	position: absolute;
	top: 390px;
	right: 0;
	width: 306px;
	height: 237px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#trailer a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/header/trailer.png) no-repeat 0 0;
}
#trailer a:hover {
	background-position: 0 -248px;
}

#top-sopecial {
	position:absolute;
	top:320px;
	left:-40px;
}

#news {
	position: absolute;
	top: 592px;
	right: 0;
	width: 428px;
	height: 130px;
}
#news h2 {
	margin-bottom: -5px;
}
#news > div {
	width: 428px;
	height: 98px;
	padding: 15px;
	background: rgba(255,255,255,.8);
	box-shadow: 0 0 18px 0 rgba(0,4,58,.56), 0 0 18px 0 rgba(0,4,58,.56), 5px 5px 18px 0 rgba(0,4,58,.56);
}
#news dl {
	width: 398px;
	height: 68px;
}
#news dl dt {
	padding-top: 10px;
	border-top: 1px solid #000;
	line-height: 1.57;
}
#news dl dt:first-child {
	border: 0;
}
#news dl dt:before {
	display: inline-block;
	content: '▶︎';
	margin-right: .5em;
}
#news dl dd {
	margin-bottom: 10px;
	padding-left: 1.5em;
}
#news a {
	color: #000;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
}
#news a:hover {
	color: #dac700;
}
#sns_area {
	position: absolute;
	bottom: 15px;
	right: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	width: 350px;
	line-height: 20px;
	z-index: 9998;
}
#sns_area li {
	margin: 0 8px 0 0;
	overflow: visible;
}
#sns_area li.fb { width: 100px; }
#sns_area li.tw { width: 86px; }
#sns_area li.line { width: 82px; }

/* ===========================================
Navigation
=========================================== */
nav {
	position: relative;
	width: 100%;
	height: 72px;
	background: #00043a;
	z-index: 9999;
}
nav.fixed {
	position: fixed;
	top: 0;
}
nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 960px;
	height: 100%;
	margin: 0 auto;
	padding: 17px 0;
}
nav ul li a,
nav ul li a span {
	position: relative;
	display: block;
	height: 38px;
	background-image: url(../img/common/nav.png);
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
nav ul li a span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
}
.nav-top { width: 50px; }
.nav-intro { width: 150px; }
.nav-caststaff { width: 170px; }
.nav-chart { width: 70px; }
.nav-story { width: 94px; }
.nav-product { width: 150px; }
.nav-special { width: 100px; }

.nav-top a { background-position: 0 0; }
.nav-intro a { background-position: -80px 0; }
.nav-caststaff a { background-position: -264px 0; }
.nav-chart a { background-position: -464px 0; }
.nav-story a { background-position: -562px 0; }
.nav-product a { background-position: -685px 0; }
.nav-special a { background-position: -865px 0; }

.nav-top a span {background-position: 0 -38px; }
.nav-intro a span { background-position: -80px -38px; }
.nav-caststaff a span { background-position: -264px -38px; }
.nav-chart a span { background-position: -464px -38px; }
.nav-story a span { background-position: -562px -38px; }
.nav-product a span { background-position: -685px -38px; }
.nav-special a span { background-position: -865px -38px; }

/* ================================
Footer
================================ */
footer {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow:hidden;
	text-align: center;
	z-index: 200;
}
footer .logo_line {
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
}
footer .footer_inner {
	width: 960px;
	margin: 32px auto;
}
#bannerArea {
	width:936px;
	text-align:left;
	margin:30px auto 0px auto;
}
#bannerArea img {
	margin: 0 3px 3px 0;
	border:1px solid #eaacc9;
}
.bneffect{
	box-shadow: 0 2px 6px #eaacc9;
}

/* ===========================================
Contents
=========================================== */
#wrapper {
	position: relative;
	width: 100%;
	padding-top: 71px;
	background-image: url(../img/common/bg_body.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	overflow: hidden;
}
.contents {
	width: 960px;
	margin: -72px auto 0;
	padding: 97px 0 25px;
}
.contents h2 {
	margin-bottom: 20px;
	text-align: center;
}
.txt-ol {
	text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
}

/*　Contents > Introduction
------------------------------------------- */
#intro.contents {
	width: 100%;
	background: url(../img/intro/bg_grade.png) repeat-x center top;
}
#intro .intro-inner {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
#intro .intro-inner .txt-wrap {
	position: relative;
	margin-bottom: 40px;
	z-index: 10;
}
#intro .txt-wrap.floatR {
	float: right;
	padding-right: 32px;
}
#intro .txt-wrap.floatL {
	float: left;
	padding-left: 32px;
}
#intro h3 {
	margin-bottom: 20px;
	position: relative;
	text-align: center;
	z-index: 10;
}
#intro p {
	max-height:100%;
	margin-top: 15px;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
}
#intro div:after {
	content:" ";
	display:block;
	clear:both;
}
.intro-txt-1 p {
	width: 488px;
}
.intro-txt-2 p,
.intro-txt-3 p {
	width: 645px;
}
.intro-txt-4 p {
	width: 650px;
}
.intro-ph {
	position: absolute;
	z-index: 0;
}
.intro-ph01 {
	top: 140px;
	left: -43px;
}
.intro-ph02 {
	top: 514px;
	right: -42px;
}
.intro-ph03 {
	top: 904px;
	left: 0;
}
.intro-ph04 {
	top: 1240px;
	right: 0;
}

/*　Contents > cast & staff
------------------------------------------- */
#caststaff ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0 10px;
}
#caststaff ul.cont-4 {
	padding: 0 32px;
}
#caststaff ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 459px;
	margin-bottom: 15px;
	padding: 15px;
}
#caststaff ul.cont-4 li {
	display: block;
	width: 210px;
}
#caststaff ul li > img {
	width: 189px;
	margin-right: 20px;
}
#caststaff ul.cont-4 li > img {
	width: 180px;
	margin: 0;
}
#caststaff ul li {
	background: rgba(0,4,58,.7);
	box-shadow: 4px 4px 6px 0px rgba(8,5,6,.59);
}
#caststaff ul li.girl {
	background: rgba(148,30,87,.7);
}
#caststaff ul li > div {
	width: 219px;
}
#caststaff ul.cont-4 li > div {
	width: 100%;
}
#caststaff ul li .name {
	margin-bottom: 24px;
	padding: 15px 0 10px;
	border-bottom: 1px solid #00043a;
	text-align: center;
}
#caststaff ul li.girl .name {
	border-color: #941e57;
}
#caststaff ul li .cast-txt {
	max-height:100%;
	color: #fff;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
}
#caststaff ul.cont-4 li .cast-txt {
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.38;
}
#caststaff .staff {
	padding: 0 32px;
}
#caststaff .staff h2 {
	margin-top: 50px;
	text-align: left;
}
#caststaff .staff-txt {
	max-height:100%;
	margin-bottom: 15px;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: .025em;
}
#caststaff .credit {
	max-height:100%;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .025em;
}

/*　Contents > chart
------------------------------------------- */
#chart.contents img {
	display: block;
	margin: 0 auto;
}

/*　Contents > story
------------------------------------------- */
#story iframe {
	width: 960px;
	height: 397px;
	margin: 0;
	border: 0;
}
#story-in h3 {
	margin-bottom: 20px;
	padding: 0 32px 10px;
	border-bottom: 1px solid #00043a;
}
#story-in > .story-block,
#tab_list > li > div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0 32px;
}
#story-in > div p {
	width: 582px;
	max-height:100%;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.86;
}

#story-nav {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 822px;
	height: 32px;
	margin: 0 auto 25px;
}
#story-nav li {
	width: 128px;
}
#story-nav li a {
	position: relative;
	display: block;
	height: 32px;
	background-image: url(../img/story/story_btn.png);
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#story-nav li a:hover {
	cursor: pointer;
}
#tab_list {
	height: 280px;
	overflow: hidden;
}
#tab_list > li {
	margin-bottom: 20px;
}
#tab_nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#tab_nav li {
	width: 30px;
	height: 30px;
	margin: 0 5px;
	background: rgba(0,4,58,.2);
	text-align: center;
	line-height: 30px;
}
#tab_nav li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #00043A;
	-webkit-transition: background .3s ease;
	transition: background .3s ease;
}
#tab_nav li a:hover {
	background: rgba(118,11,63,.2);
}
.story-nav01 a { background-position: 0 0; }
.story-nav02 a { background-position: -139px 0; }
.story-nav03 a { background-position: -277px 0; }
.story-nav04 a { background-position: -415px 0; }
.story-nav05 a { background-position: -555px 0; }
.story-nav06 a { background-position: -693px 0; }

.story-nav01 a:hover, .story-nav01.active a {background-position: 0 -32px; }
.story-nav02 a:hover, .story-nav02.active a { background-position: -139px -32px; }
.story-nav03 a:hover, .story-nav03.active a { background-position: -277px -32px; }
.story-nav04 a:hover, .story-nav04.active a { background-position: -415px -32px; }
.story-nav05 a:hover, .story-nav05.active a { background-position: -555px -32px; }
.story-nav06 a:hover, .story-nav06.active a { background-position: -693px -32px; }

/* あらすじオープン前 */
#story-nav li.nolink { opacity: .4; }
#story-nav li.nolink a:hover, #story-nav li.nolink:hover { cursor: default; }
.story-nav02.nolink a:hover { background-position: -139px 0; }
.story-nav03.nolink a:hover { background-position: -277px 0; }
.story-nav04.nolink a:hover { background-position: -415px 0; }
.story-nav05.nolink a:hover { background-position: -555px 0; }
.story-nav06.nolink a:hover { background-position: -693px 0; }



/*　Contents > products
------------------------------------------- */
#products h3 {
	margin-bottom: 10px;
}
#products > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 40px;
}
#products .sell.cont-2 {
	padding: 0 170px;
}
#products .sell > li {
	width: 280px;
}
#products .sell > li img {
	margin-bottom: 15px;
}
#products .sell > li > p {
	width: 280px;
	max-height: 100%;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	text-align: center;
}
#products .special {
	margin-top: 20px;
}
#products .special li {
	display: inline-block;
	max-height: 100%;
	color: #760b3f;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.6;
}
#products .rentaloa > li > ul,
#products .onair > div {
	width: 460px;
	height: 190px;
	padding: 20px 20px;
	background: rgba(148,30,87,.7);
	box-shadow: 4px 4px 6px 0px rgba(8,5,6,.59);
}

#products .rentaloa > li > ul {
	padding: 20px 16px;
}

#products .onair > div {
	background: rgba(0,4,58,.7);
}
#products .onair > div ul {
	height: 150px;
}
#products .rentaloa li > ul > li {
	margin-bottom: 10px;
}
#products .rentaloa .onair a,
.white{
	display: block;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: .05em;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
}
#products .rentaloa .onair a:hover {
	color: #dac700;
	cursor: pointer;
}
#products .credit {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.6;
	letter-spacing: .025em;
}
#products .att {
	display: block;
	margin-top: 20px;
}
#products .att li {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.6;
	letter-spacing: .025em;
}

/*　Contents > specail
------------------------------------------- */

#movie-special {
	margin: 52px auto 24px;
	width:612px;
}

#special ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	display:  -webkit-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-justify-content: center;
	/*justify-content: space-between;
	-webkit-justify-content: space-between;*/
}

#special ul li{
	margin-bottom:32px;
}