@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* * * * * * * * * * * * * * * * * *
 style.css
* * * * * * * * * * * * * * * * * */

/* common
--------------------------------- */
img.img_chara {
	position: absolute;
}

@media screen and (min-width: 769px) {
	#main section h2 img {
		width: auto;
		height: auto;
	}
}


/* header
--------------------------------- */
#header {
	background: url(../img/header/bg.jpg) center top no-repeat;
	border-bottom: 6px solid #05394F;
	height: 973px;
	position: relative;
}
#header #news {
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(../img/header/bg_news.png) center top no-repeat;
	width: 100%;
	padding: 45px 0;
}

#header #news h2 {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
	font-size: 50px;
	height: 50px;
	line-height: 50px;
	margin-bottom: 20px;
}
#header #news h2 a {
	padding-left: 20px;
}
#header #news h2 a img {
	vertical-align: middle;
}

ul.newsList {
	display: table;
	width: 100%;
}
ul.newsList li {
	display: table-row-group;
}
ul.newsList li > p {
	display: table-cell;
	line-height: 2;
}
ul.newsList li > p.date {
	width: 10px;
	white-space: nowrap;
}
ul.newsList li > p.date:after {
	content: "／";
	padding: 0 1.5em;
}


/* inner
--------------------------------- */
.inner {
	position: relative;
	width: 1024px;
	margin: 0 auto;
}

li {
	box-sizing: border-box;
}


/* movie
--------------------------------- */
section#movie {
	background: url(../img/movie/bg.jpg) center top no-repeat;
	height: 894px;
}

section#movie img.img_chara {
	left: -40px;
	top: 50px;
}

section#movie h2 {
	padding-top: 95px;
	text-align: right;
	margin-right: -20px;
	margin-bottom: 25px;
}

div.movie {
	width: 567px;
	float: right;
}

div.movie ul#playlist {
	margin-top: 20px;
}
div.movie ul#playlist li {
	width: 100px;
	float: left;
	margin-right: 15px;
	position: relative;
	z-index: 1;
}
div.movie ul#playlist li a {
	display: block;
}
div.movie ul#playlist li.active a {
	box-shadow: 4px 4px 0 #18B2E8 inset, -4px -4px 0 #18B2E8 inset;
}
div.movie ul#playlist li a img {
	z-index: -1;
	position: relative;
}

#playerbox {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#playerbox iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


/* intro
--------------------------------- */
section#intro {
	background: url(../img/intro/bg.jpg) center top no-repeat;
	height: 1753px;
}

section#intro h2 {
	margin-left: -20px;
	margin-bottom: 35px;
	position: relative;
	z-index: 999;
}

div.box {
	margin-bottom: 70px;
}
div.box > img:last-child {
	vertical-align: top;
}
div.box .boxIn {
	background: url(../img/bg_box_mid.png) center top repeat-y;
	padding: 0 55px;
	position: relative;
}

div.box h3 img {
	margin-top: -85px;
}
div.box .left h3 img {
	margin-left: -90px;
}
div.box .right {
	text-align: right;
	margin-right: -15px;
}

div.box p.txt {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 500;
	color: #FEF806;
	font-size: 17px;
}

.boxIn img.img_chara {
	z-index: 1;
}
#box1 .boxIn img.img_chara {
	right: -105px;
	top: -215px;
}
#box2 .boxIn img.img_chara {
	left: -200px;
	top: -120px;
}
#box3 .boxIn img.img_chara {
	right: -30px;
	top: -160px;
}

#screen {
	text-align: center;
	padding-top: 15px;
}
ul.screen {
	margin-top: 10px;
	position: relative;
	z-index: 999;
}
ul.screen li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding: 0 10px;
}
ul.screen li img {
	border: 6px solid #65C2EE;
	border-radius: 6px;
	box-shadow: 0 0 16px rgba(255,255,255,.8);
}


/* spec
--------------------------------- */
section#spec {
	background: url(../img/spec/bg.jpg) center top no-repeat;
	padding-bottom: 120px;
}

section#spec img.img_chara {
	left: -188px;
	top: -225px;
}

section#spec h2 {
	text-align: right;
	margin-right: -20px;
	margin-bottom: 40px;
}

.specBox {
	margin-bottom: 60px;
}

.specBox p.image {
	width: 552px;
}
.specBox .detail {
	width: 430px;
}
.specBox .detail ul {
	display: table;
	width: 100%;
	border-collapse: separate;
}
.specBox .detail ul li {
	display: table-row-group;
}
.specBox .detail ul li + li {
	border-top: 1px solid #00A6D6;
}
.specBox .detail ul li > p {
	display: table-cell;
	font-family: 'Noto Sans Japanese', sans-serif;
	padding: 5px 0;
	font-size: 110%;
	font-weight: 700;
	border-top: 1px solid #00A6D6;
}
.specBox .detail ul li > p.ttl {
	border-bottom: 3px solid #00A6D6;
}
	.specBox .detail ul li:first-child > p {
		border-top: 0;
	}
	.specBox .detail ul li:last-child > p.ttl {
		border-bottom: 0;
	}

.specBox .detail ul li > p.txt {
	padding-left: 30px;
}

.specBox .detail p.att {
	margin-top: 10px;
}

.buy {
	width: 780px;
	margin: 0 auto;
}
.buy dl {
	width: 372px;
	text-align: center;
}
.buy dl dt {
	margin-bottom: 20px;
}
.buy dl dd {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding: 0 4px;
}


/* footer
--------------------------------- */
#footer {
	background: url(../img/footer/bg.png) center -1px repeat;
	padding: 70px 0 55px;
}

#footer img.img_chara {
	top: -294px;
	right: -225px;
}

#footer .inner {
	width: 944px;
}

ul.logo {
	display: table;
	margin: 0 auto 30px auto;
	text-align: center;
}

ul.logo li {
	display: table-cell;
	vertical-align: middle;
	padding: 0 15px;
}

ul.bnr {
	margin: 0 -8px 30px -7px;
}
ul.bnr li {
	width: 25%;
	padding: 0 8px 15px 7px;
	float: left;
	position: relative;
}

ul.social {
	margin-bottom: 15px;
	position: absolute;
	right: 0;
	bottom: 0;
}
ul.social li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding: 0 0 0 10px;
}
li.fb,
li.fb * {
	vertical-align: top!important;
}
ul.social li.gPlus {
	width: 70px;
}