@charset "UTF-8";
/* CSS Document */

/* ===========================================
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;
}

.mb-0 { margin-bottom:0 !important; }
.mb-8 { margin-bottom:8px !important; }

/* ===========================================
Common
=========================================== */
html {
	font-size: 62.5%;
	width: 100%;
}
body {
	opacity: 1;
	width: 100%;
	height: 100%;
	color: #333;
	font-size: 16px;
	line-height: 1.6;
	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: inter-ideograph;
	background: url(../img/common/bg_pk.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
	overflow:hidden;
}

/*フェードイン*/
body {
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


*, *: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;
	opacity:0.7;
	-webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a.external_link{
    padding-right: 14px;
    background: url("../img/common/externallink_icon.png") bottom right no-repeat;
}

section {
	width:960px;
	margin:0 auto;
	padding-top: 52px;
	position:relative;
	z-index:10;
}

h2 {
	text-align:center;
	margin-bottom:24px;
}

#bg0,#bg1,#bg2,#bg3,#bg4{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#bg0 { 
	background: url(../img/common/bg_pk.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
#bg1 { 
	background: url(../img/common/bg_bl.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
#bg2 { 
	background: url(../img/common/bg_bl.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
#bg3 { 
	background: url(../img/common/bg_ye.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
}

#bg4 { 
	background: url(../img/common/bg_ye.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
}


/* ===========================================
Header
=========================================== */

header {
	width:100%;
	background:url(../img/top/bg_top.jpg) 0 0 no-repeat;
	background-attachment:fixed;
	background-size:cover;
	position:relative;
	z-index:1;	
}

#header_inner{
	position: relative;
	width: 960px;
	height: 752px;
	margin: 0 auto;
}

#header_inner>p{
	position: absolute;
}

#header_main{
	z-index: 1;
	top: 0;
	left: 50%;
	width: 1388px;
	height: 751px;
	margin-left: -700px;
	background: url(../img/top/main.png) 0 0 no-repeat;
}

h1{
	position: absolute;
	bottom: 40px;
	left: -64px;
	z-index:2;	
}

#header_release{
	bottom: 160px;
	right: 0;
	z-index:2;
}
#header_trailer{
	top: 16px;
	left: 0;
	z-index:2;
}
#header_catch{
	top: 24px;
	right: 140px;
	z-index:2;
}
#header_cast{
	bottom: 320px;
	left: -48px;
	z-index:2;
}
#header_special{
	top: 200px;
	left: 100px;
	z-index:2;
}
#header_insta{
	bottom: 5px;
	right: 300px;
	z-index:2;
}

#header_cam{
    top: 192px;
    left: -64px;
    z-index:2;
}

/*-------- news --------------------*/
#news{
	position: absolute;
	z-index: 20;
	bottom: 0;
	right: -24px;
	width: 350px;
	height: 151px;
	padding: 50px 32px 16px 40px;
	font-size: 14px;
	color: #655153;
	background: url(../img/top/news_bg.png) 0 0 no-repeat;
}
#news ul{
	margin: 0;
	line-height: 20px;
}
#news .scrollbar{ height: 70px; }
#news .date{
	width: 68px;
	font-size: 12px;
	white-space: nowrap;
}
#news .topic{
	width: 272px;
	margin: 0 0 4px 0;
	padding: 0 12px 0 14px;
	text-indent: -14px;
}
#news ul .topic:before{
	content: '▶';
	font-size: 10px;
	margin: 0 4px 0 0;
}
#news .line{
	height: 1px;
	margin: 0 0 8px 0;
	padding: 5px 0 0 0;
	border-bottom: 1px solid #655153;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
}
#news a{
	color: #655153;
	text-decoration: none;
}
#news a:hover{
	color: #7d696b;
	text-decoration: none;
	opacity:0.7;
	-webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/* ----- SNS ----- */
#sns_area {
	position: absolute;
	bottom: 16px;
	left: 0;
	z-index:2;
	line-height:20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	width: 240px;
}

#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; }


#kirakira li {
	position:absolute;
	z-index:1;
}

#kirakira li:first-child {
	background:url(../img/top/kira01.png) 0 0 no-repeat;
	width:321px;
	height:156px;
	top:0;
	left:100px;
}

#kirakira li:nth-child(2) {
	background:url(../img/top/kira02.png) 0 0 no-repeat;
	width:311px;
	height:471px;
	top:8px;
	right:80px;
}

#kirakira li:nth-child(3) {
	background:url(../img/top/kira03.png) 0 0 no-repeat;
	width:335px;
	height:427px;
	bottom:0;
	left:100px;
}

#kirakira li:nth-child(4) {
	background:url(../img/top/kira04.png) 0 0 no-repeat;
	width:254px;
	height:277px;
	bottom:0;
	right:150px;
}

#kirakira li:first-child,
#kirakira li:nth-child(4) {
	animation-duration: 1s;
	animation-iteration-count: infinite;
    animation-name: fade-in;
	animation-timing-function: ease;
	animation-direction:alternate;
	
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
    -moz-animation-name: fade-in;
	-moz-animation-timing-function: ease;
	-moz-animation-direction:alternate;
	
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
    -webkit-animation-name: fade-in;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction:alternate;
}

#kirakira li:nth-child(2),
#kirakira li:nth-child(3) {
	animation-duration: 1s;
	animation-iteration-count: infinite;
    animation-name: fade-in2;
	animation-timing-function: ease;
	animation-direction:alternate;
	
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
    -moz-animation-name: fade-in2;
	-moz-animation-timing-function: ease;
	-moz-animation-direction:alternate;
	
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
    -webkit-animation-name: fade-in2;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction:alternate;
}

@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
}

      1% {
        display: block;
        opacity: 0;
}

      100% {
        display: block;
        opacity: 1;
}
}

@-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
}
}

@keyframes fade-in2 {
      0% {
        display: none;
        opacity: 1;
}

      1% {
        display: block;
        opacity: 1;
}

      100% {
        display: block;
        opacity: 0;
}
}

@-webkit-keyframes fade-in2 {
      0% {
        display: none;
        opacity: 1;
      }

      1% {
        display: block;
        opacity: 1;
      }

      100% {
        display: block;
        opacity: 0;
}
}

.s-anime
{ visibility: hidden; }

/* ===========================================
nav
=========================================== */

.fixed{
	position: fixed;
	z-index: 999;
	top: 0px;
	left: 0px;
}

nav {
	position:relative;
	z-index:2;
	width: 100%;
	height: 70px;
	background: #fff;
	background-image:url(../img/common/nav_dots.png);
	background-position:0 5px;
	background-repeat:repeat-x;
}

nav ul{
	width:960px;
	margin:0 auto;
	padding-top:20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-justify-content:space-between;
}

.non-act {
	opacity:0.2;
}
/* ===========================================
intro
=========================================== */

#intro {
	position:relative;
}

#intro dl {
	margin-bottom: 16px;
	position:relative;
	z-index:2;
}

#intro dl dt {
	margin:0 0 8px -20px;
}

#intro dl dd {
	width:560px;
}

.intro-r01 dt{
	margin-left:390px !important;
}

.intro-r02 dt{
	text-align:right;
}

.intro-r02 dd{
	margin-left:330px;
}

.intro-r01 dd {
	margin-left:408px;
	margin-bottom:32px;
}


h3 {
	margin:0 0 16px -16px;
}

#intro-ph li{
	position:absolute;
	visibility:hidden;
}

#intro-ph li:first-child {
	top:260px;
	right:-364px;
}

#intro-ph li:nth-child(2) {
	top:770px;
	left:0;
}

#intro-ph li:nth-child(3) {
	top:1140px;
	right:0;
}

#intro-ph li:nth-child(4) {
	top:1308px;
	left:-160px;
}

#intro-ph li:nth-child(5) {
	top:1760px;
	right:0;
}


.w635 {
	width:635px !important;
}

/* ===========================================
cast & chart
=========================================== */

.cast-list {
	-ms-flex-negative:0;
	flex-shrink:0;
	-ms-flex-preferred-size:auto;
	flex-basis:auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	line-height:1.5;
	color:#fff;
	font-weight:bold;
}
.cast-list dt {
	margin-left:-16px;
}

#cast01,#cast02,#cast03,#cast04,#cast05 {
	position:relative;
}

#cast01,#cast03,#cast05{
	text-shadow: 0 0 5px #204756,
				 0 0 5px #204756,
				 0 0 5px #204756,
				 0 0 8px #204756,
				 0 0 10px #204756;
}
#cast02,#cast04 {
	text-shadow: 0 0 5px #b04f7f,
				 0 0 5px #b04f7f,
				 0 0 5px #b04f7f,
				 0 0 8px #b04f7f,
				 0 0 10px #b04f7f;
}
#cast01 dl,
#cast02 dl {
	position:absolute;
	bottom:16px;
	left:50%;
	margin-left:-210px;
	width:420px;
}
#cast03 dl,
#cast04 dl,
#cast05 dl {
	font-size:14px;
	position:absolute;
	bottom:16px;
	left:50%;
	margin-left:-132px;
	width:264px;
}

#cast01 {
	background:url(../img/castchart/cast01_bg.jpg) 0 0 no-repeat;
	width:480px;
	height:603px;
}

#cast02 {
	background:url(../img/castchart/cast02_bg.jpg) 0 0 no-repeat;
	width:482px;
	height:603px;
}

#cast03 {
	background:url(../img/castchart/cast03_bg.jpg) 0 0 no-repeat;
	width:322px;
	height:518px;
	line-height:1.3;
}

#cast04 {
	background:url(../img/castchart/cast04_bg.jpg) 0 0 no-repeat;
	width:320px;
	height:518px;
}

#cast05 {
	background:url(../img/castchart/cast05_bg.jpg) 0 0 no-repeat;
	width:320px;
	height:518px;
}

#chart {
	margin:32px 0;
}

#staff {
	margin-left:40px;
	font-size:14px;
}

#staff dt {
	margin-bottom:16px;
}

/* ===========================================
story
=========================================== */

#story {
	width:960px;
	height:740px;
	position:relative;
    margin-bottom: 64px;
}

#story iframe{
    position:absolute;
    width:625px;
    height:740px;
    right:0;
}

.bg_none {
	background:none;
}

#epi-box{
    position: relative;
	width:605px;
	background: rgba(255,255,255,0.7);
	padding:24px;
    margin: 0 auto;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

#bg_ph{
    width: 276px;
    height: 183px;
    background-image: url(../img/story/story_ph2.png);
    background-repeat: no-repeat;
    position: absolute;
    right: -8px;
    bottom: -16px;
}

#epi_btn {
	margin:0 auto 24px;
	width:455px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-justify-content:space-between;
}

#epi_btn li{
	text-align:center;
	width:142px;
	height:30px;
	background-color:#4984c3;
	border:#fff 2px solid;
}

#epi_btn li.action{
    background-color:#007cff;
}

#epi-box dl dt{
	text-align:center;
	margin-bottom:16px;
}
#epi-box dl dd{
	width:555px;
	margin-bottom:16px;
}
#story-bg {
	position:absolute;
	left:-150px;
	bottom:24px;
	width:562px;
	height:381px;
}




/*     bottom Navi     */
#tab_nav {
	margin:16px auto 0;
	width:350px;
	height: 32px;
}
#tab_nav li {
	float: left;
	display: block;
	width: 30px;
	margin-right: 5px;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
}

#tab_nav a {
	display: block;
	width: 100%;
	height: 100%;
	font-weight: 900;
	line-height: 30px;
	background-color:none;
	border:1px solid #006699;
	color: #006699;
}
#tab_nav a:hover, #tab_nav a.selected {
	background-color:#006699;
	color: #fff;
}

/* ===========================================
DVD & OA
=========================================== */

#dvdoa {
	position:relative;
/*	height:1740px;*/
}

.set-flex {
	background:url(../img/dvdoa/dvdset_bg.jpg) 0 0 no-repeat;
	width:961px;
	height:406px;
	padding:24px 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-align-items:center;
	margin-bottom:24px;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.dvdset dt {
	margin-bottom:16px;	
}

.dvdset dd {
	text-align:center;
	font-size:14px;
	margin-bottom:16px;
}
.tokuten {
	background: rgba(255,212,210,0.6);
	padding:16px;
	color:#ff69b1;
	font-size:14px;
}

.tokuten dt {
	background:#fff;
	padding: 0 3px;
	width:80px;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px !important;
}

.tokuten dd {
	text-align:left;
	margin-bottom:0;
}

.tokuten dd:before{
	content: '●';
	font-size: 12px;
	margin: 0 4px 0 0;
}


/*-------- rental_area --------*/

#rentaloa-flex {
	position:relative;
	z-index:1;
	margin:40px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-justify-content:space-between;
}

#rentaloa-flex dl {
	background:url(../img/dvdoa/rentaloa_bg.jpg) 0 0 no-repeat;
	width:466px;
	height:200px;
	padding:16px;
	text-align:center;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

#rental_area dd {
	margin-top:16px;
}

/*-------- oa_area --------*/
#oa_area{
	color: #706e65;
	font-size:16px;
	font-weight: bold;
}
#oa_area .scrollbar{
	text-align:left;
	margin:16px 0 0 16px;
	height: 100px;
}
#oa_area li {
	margin-bottom:8px;
}

#oa_area li:before{
	content: '▶';
	font-size: 14px;
	margin: 0 4px 0 0;
}
#oa_area a{
	color: #706e65;
	text-decoration:none;
}
#oa_area a:hover{
	color: #ff3395;
	text-decoration:none;
}

#spec {
	position:relative;
	z-index:1;
	text-align:right;
	font-size:12px;
}

#spec li:nth-child(2){
	margin:16px 0;
}




/* ===========================================
special
=========================================== */

#special{
    width: 960px;
	position:relative;
	padding-bottom:600px;
}

#movie-special a{
	margin:0 auto 40px;
	text-align:center;
}

#special #movie-small{
	width:920px;
	position:relative;
	z-index:1;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
	/*-webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;*/
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#special #movie-small li:nth-of-type(odd){
    margin-right: 40px;
}




#special #movie-small li:nth-of-type(even){
    margin: 0 0 40px 0;
}


#special-bgph {
	position:absolute;
	background:url(../img/dvdoa/products_bg.png) 0 0 no-repeat;
	width:872px;
	height:708px;
/*	bottom:-140px;*/
    bottom: 0;
	left:-140px;
}

/* ===========================================
footer
=========================================== */

footer {
	width: 100%;
	margin: 0 auto 0;
	overflow:hidden;
	text-align: center;
	z-index: 100;
}

#nbclogo {
	position:relative;
	z-index:20;
	margin: 0 auto 8px;
}

#footer_inner{
	position: relative;
	width: 960px;
	padding: 16px 0 0 0;
	margin: 0 auto;
}