@charset "utf-8";

/*

  トップページ用

*/

/* ----------------------------------------------------------
    基本
------------------------------------------------------------- */

.top-cotents {
	width: 100%;
	height: 700px;
	background: url(../../img/top/im_visual_pc.webp?170428) #FFF top center no-repeat;
}
.main-cotents {
    width: 100%;
    max-width: auto;
    background: url(../../img/top/bg_release.png) repeat-x center top;
    margin: -15px auto 0px;
    padding: 0;
}

.section_ttl {
	text-align: center;
}
.section_ttl img {
	display: inline;
}

.pc_w {
	margin: 0 auto;
}

.img_pc { display: block !important; }
.img_sp { display: none !important; }

/* ----------------------------------------------------------
    イントロ / #intro
------------------------------------------------------------- */
#intro {
	margin: 0 auto;
	position: relative;
}

#intro h1 {
	text-align: center;
	position: relative;
	top: 320px;
	margin: 0 auto;
	z-index: 10;
}
#intro img {
	margin: 0 auto;
}
#intro .copy_01 {
	position: absolute;
	top: 10px;
	left: 0;
}
#intro .copy_02 {
	position: absolute;
	top: 320px;
	right: 33px;
}
#intro .release_date {
	position: absolute;
	top: 487px;
	right: 7px;
}

.release_btn img.release_btn_img_1{
	margin-top: -157px;
}
.release_btn img.release_btn_img_2{
	margin: 0px auto;
}

.release_btn a.release_bn_01 {
	width: auto;
}
.release_btn a.release_bn_02 {
	width: auto;
}

/* ----------------------------------------------------------
    LINE / .line
------------------------------------------------------------- */

.line {
	padding: 30px 0;
	margin: 0 auto;
	/*margin: 30px auto 20px;
	width: 100%;*/
	/* max-width: 640px;*/
	background: url(../../img/top/bg_line.png) center top;
}

.line img {
	margin: 0 auto;
}

/*.comic {
	margin: 30px auto 20px;
	width: 100%;
	max-width: 640px;
}
.comic img {
	margin: 0 auto;
	width: 100%;
}*/

/* ----------------------------------------------------------
    PV / .movie
------------------------------------------------------------- */

.movie {
	width: 100%;
	background: url(../../img/top/bg_pc_w.png);
	/*margin: 0 10px;*/
}
.movie_contents {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding-bottom: 30px;
}

.top_movie a {
	display: inline-block;
}
.top_movie img {
	width: 100%;
	max-width: 640px;
}

/* ----------------------------------------------------------
    Story / .contents_1a
------------------------------------------------------------- */

.contents_1a {
	background: url(../../img/top/bg_contents_1a_big.png) center center no-repeat;
	padding: 0 0 10px 0;
	background-size: cover;
	margin-top: -1px;
}
.story_pre_info{
	
	margin: 0 auto;
}

.story_pre{
	width: 100%;
	max-width: 790px;
	margin: 0 auto;
}
.story_pre img {
	width: 100%;
	margin: 0 auto 0;
}


/* ----------------------------------------------------------
    Story / .contents_1
------------------------------------------------------------- */

.contents_1 {
	background: url(../../img/top/bg_contents_1b_big.png) center center no-repeat;
	padding: 0 0 50px;
	background-size: cover;
	margin-top: -1px;
}

.contents_1_img {
	width: 100%;
	max-width: 910px;
	margin: 0 auto;
}

/* ----------------------------------------------------------
    Charactor / .contents_2
------------------------------------------------------------- */
.contents_2 {
	background: url(../../img/top/bg_contents_2_big.png) top center no-repeat;
	padding: 0 0 30px;
	background-size: cover;
	margin-top: -1px;
}

.contents_2 .section_ttl:after {
	padding: 0;
}
.swiper-container {
	width: 100%;
	max-width: 1170px;
}
.unit {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
.unit_img {
	width: 100%;
	max-width: 860px;
	margin: 0 auto 0 30px;
}

.unit_img img {
	width: 100%;
	padding-bottom: 30px;
}
.unit_textarea {
	position: relative;
	width: 100%;
	max-width: 540px;
	background: url(../../img/top/bg_contents_2_frame.png) 0 0 no-repeat;
	background-size: 100% 100%;
	padding-bottom: 2%;
	margin: -25% 30px 0 auto;
	z-index: 3;
}
.unit_label {
	width: 92%;
	max-width: 640px;
	padding: 2% 0 1%;
	border-bottom: 1px solid #4b3520;
	margin: 0 auto;
}
.unit_label img {
	width: 100%;
}
.unit_caption {
	width: 90%;
	max-width: 640px;
	height: 170px;
	margin: 1% 5%;
	color: #4b3520;
}

.contents_2_img {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.contents_2_img img {
	width: 100%;
}

/* ----------------------------------------------------------
    ニュース / #news
------------------------------------------------------------- */
.contents_3 {
	background: url(../../img/top/bg_pc_w.png) repeat center top;
	padding: 0 0 20px;
}

.contents_3_body {
	height: 380px;
	margin: auto;
	overflow-y: scroll;
	max-width: 640px;
}
.contents_3_btn {
	max-width: 520px;
	margin: 0 auto 30px;
	text-align: center;
}

/* ----------------------------------------------------------
    ツイッター / #twitter
------------------------------------------------------------- */
.contents_4 {
	background: url(../../img/top/bg_contents_4.png) center center no-repeat;
	background-size: cover;
	padding: 0 0 30px;
}

#twitter {
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 0 10px;
}

#twitter .section_body {
	height: 438px;
	max-width: 640px;
	margin: 0 auto 1em;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 0 0 2px #ccc, 0 0 0 4px #000;
	padding: 0;
}
#twitter iframe {
}
#twitter-widget-0 {
}
#twitter iframe {
	max-width: 640px !important;
	width: 100% !important;
	height: 438px;
}

.contents_4 .line{
	background: none;
}

.sns_btn{
	padding: 30px 0 0;
	margin: 0 auto;
	/*margin: 30px auto 20px;
	width: 100%;*/
	/* max-width: 640px;*/
}
	
.sns_btn img {
	margin: 0 auto 50px;
}
	


/* ----------------------------------------------------------
    / #about
------------------------------------------------------------- */

.contents_5 {
	background: #352e2b;/*#4f4f4f;*/
	/*background: url(../../img/common/bg_contents_darkgray.png) 0 0 repeat-x;*/
	padding: 0 0 70px;
	position: relative;
	z-index: 1;
}
.contents_5 .pc_w {
	margin-top: -1px;
}

.contents_5 .section_ttl {
	margin-bottom: 20px;
}
.contents_5_body {
	clear: both;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 0;
}
.contents_5_body .swiper-container {
	width: 100%;
}
.contents_5_body .swiper-wrapper {
	margin-bottom: 40px;
}
.pr_img {
	margin: 0 auto;
	max-height: 650px;
	max-width: 394px;
}

.contents_5 p{
	color:#A6A6A6;
}

@media screen and (max-width:640px){

	.pc_w {
		max-width: 640px;
	}

	.img_pc { display: none !important; }
    .img_sp { display: block !important; }

	.main-cotents {
		background-size: 80%;
	}

	#intro {
		width: 100%;
	}
	#intro img {
		width: 85%;
		margin: 0 auto;
	}
	#intro h1 {
		width: auto;
		height: auto;
		position: static;
		padding: 42% 0 3% 0;
	}


	.release_btn img.release_btn_img_1{
		margin-top: -5px;
	}
	.release_btn img.release_btn_img_2{
		margin: 0px auto;
	}
	.release_btn a.release_bn_01 {
		width: 40%;
	}
	.release_btn a.release_bn_02 {
		width: 40%;
	}

	.top_movie{
		margin: 0 3%;
	}

	.contents_1a{
		background: url(../../img/top/bg_contents_1a.png) center center no-repeat;
		padding: 0 0 20px;
		background-size: cover;
	}

	.contents_1 {
		background: url(../../img/top/bg_contents_1b.png) center center no-repeat;
		padding: 0 0 20px;
		background-size: cover;
	}

	.story_pre_info{
		width: 95%;	
	}
	.story_pre img {
		width: 90%;
		margin: 0 auto 0;
	}
	.contents_1_storyimg{
		width: 90%;
		margin: 0 auto 0;

	}


	.contents_2 {
		background: url(../../img/top/bg_contents_2.png) top center no-repeat;
		padding: 0 0 15px;
		background-size: cover;
	}
	.contents_4 {
		padding: 0 0 20px;
	}
	.line {
		padding: 10px 0;
		margin: 0 auto;
		width: 100%;
		max-width: 640px;
	}

	.line img {
		margin: 0 auto;
		width: 100%;
	}
	.unit {
		width: 100%;
		max-width: 640px;
	}
	.unit_img {
		width: 100%;
		max-width: 640px;
		margin: 0 auto;
		padding: 0;
	}

	.unit_img img {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.unit_textarea {
		position: relative;
		width: 96%;
		background: url(../../img/top/bg_contents_2_frame.png) 0 0 no-repeat;
		background-size: 100% 100%;
		padding-bottom: 2%;
		margin: 0 auto 0;
		z-index: 3;
	}
	.unit_label {
		width: 92%;
		max-width: 640px;
		padding: 2% 0 1%;
		border-bottom: 1px solid #4e0303;
		margin: 0 auto;
	}
	.unit_label img {
		width: 100%;
	}
	.unit_caption {
		width: 90%;
		max-width: 640px;
		height: auto;
		min-height: 140px;
		margin: 3% 5% 0;
		color: #4e0303;
		font-size: 93%;
		text-align: left;
	}

	.pr_img {
		width: 75%;
		margin: 0 auto;
	}
	.top-cotents {
		height: auto;
		background: url(../../img/top/im_visual_sp.webp?170428) #FFF top center no-repeat;
		background-size: 100%;
	}
	.news .section_body {
		height: 320px;
	}
	#twitter .section_body {
	}
	#twitter-widget-0 {
	}
	#twitter iframe {
		max-width: 500px !important;
		width: 100% !important;
		height: 438px;
	}

	.sns_btn{
		padding: 30px 0 0;
		margin: 0 auto;
		width: 100%;
		max-width: 640px;
	}
	
	.sns_btn img {
		margin: 0 auto 10px;
		width: 100%;
		padding:0;
	}
	
}