@charset "euc-jp";

/*

  トップページ用

*/

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

.top-cotents {
    width: 100%;
    height: 830px;
    background: url(../../img/top/im_visual.png?170428) #FFF top center no-repeat;
}

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

.pc_w {
	margin: 0 auto;
}

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

#intro h1 {
	text-align: center;
    position: relative;
    top: 282px;
	width: 75%;
	margin: 0 auto;
    z-index: 10;
}
#intro img {
    width: 100%;
}
#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: -65px;
}


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

.line {
	margin: 30px auto 20px;
	width: 100%;
	max-width: 640px;
}

.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 {
    padding: 10px 0 0 0;
    margin: 0 10px;
}
.movie_contents {
	width: 100%;
	max-width: 640px;
    margin: 0 auto 20px;
    text-align: center;
    position: relative;
}
.movie .section_ttl {
}
.top_movie a {
    display: inline-block;
}
.top_movie img {
	width: 100%;
	max-width: 640px;
}

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

.contents_1 {
    background: url(../../img/top/bg_contents_1_big.png) center center no-repeat;
	padding: 0;
	background-size: cover;
	margin-top: -1px;
}
.contents_1::before {
    background: url(../../img/common/bg_contents_white2.png) 0 0 repeat-x;
	content: '';
	height: 70px;
	width: 100%;
	display: block;
}
.contents_1::after {
    background: url(../../img/common/bg_contents_white.png) 0 0 repeat-x;
	content: '';
	height: 70px;
	width: 100%;
	display: block;
}
.contents_1 .pc_w {
}
.contents_1_img {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.contents_1_img img {
	width: 100%;
}

/* ----------------------------------------------------------
    Charactor / .contents_2
------------------------------------------------------------- */
.contents_2 {
    background: url(../../img/top/bg_contents_2_big.png) top center no-repeat;
	padding: 0;
	background-size: cover;
	margin-top: -1px;
}
.contents_2::before {
    background: url(../../img/common/bg_contents_white2.png) 0 0 repeat-x;
	content: '';
	height: 70px;
	width: 100%;
	display: block;
}
.contents_2::after {
    background: url(../../img/common/bg_contents_white.png) 0 0 repeat-x;
	content: '';
	height: 70px;
	width: 100%;
	display: block;
}
.contents_2 .pc_w {
}
.contents_2 .section_ttl {
	margin-top: -50px;
}
.contents_2 .section_ttl:after {
	padding: 0;
}
.swiper-container {
	width: 100%;
	max-width: 960px;
}
.unit {
	width: 100%;
	max-width: 960px;
}
.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: -38% 30px 0 auto;
	z-index: 3;
}
.unit_label {
	width: 92%;
	max-width: 640px;
	padding: 2% 0 1%;
	border-bottom: 1px solid #0692ea;
	margin: 0 auto;
}
.unit_label img {
	width: 100%;
}
.unit_caption {
	width: 90%;
	max-width: 640px;
	height: 140px;
	margin: 1% 5%;
	color: #0196f4;
}

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

/* ----------------------------------------------------------
    ニュース / #news
------------------------------------------------------------- */
.contents_3 {
    background: url(../../img/common/bg_contents_white.png) 0 0 repeat-x;
	padding: 70px 0 70px;
	margin-top: -70px;
}

.contents_3 .pc_w {
	background: #FFF;
}

.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/common/bg_contents_green.png) 0 0 repeat-x;
	padding: 70px 0 0;
	margin-top: -70px;
}
.contents_4 .pc_w {
    background: #79d0cf;
	margin-top: -1px;
}

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

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

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

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

.contents_5 .section_ttl {
	margin-top: -20px;
}
.contents_5_body {
    clear: both;
    width: 100%;
	max-width: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 30px 0 70px;
}
.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;
}


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

.pc_w {
	max-width: 640px;
}
	

	
    #intro {
        width: 100%;
    }
    #intro img {
        width: 100%;
    }
    #intro h1 {
        width: auto;
        height: auto;
        position: static;
        padding: 49% 0 35% 0;
    }
    
	
.release_btn img.release_btn_img_1{
	margin-top: -30px;
}

	
.contents_1 {
    background: url(../../img/top/bg_contents_1.png) center center no-repeat;
	padding: 0;
}
	.contents_2 {
    background: url(../../img/top/bg_contents_2.png) top center no-repeat;
	padding: 0;
}
    
.line {
	margin: 10px auto 20px;
	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: 100%;
	max-width: 640px;
    background: url(../../img/top/bg_contents_2_frame.png) 0 0 no-repeat;
	background-size: 100% 100%;
	padding-bottom: 2%;
	margin: -35% auto 0;
	z-index: 3;
}
.unit_label {
	width: 92%;
	max-width: 640px;
	padding: 2% 0 1%;
	border-bottom: 1px solid #0692ea;
	margin: 0 auto;
}
.unit_label img {
	width: 100%;
}
.unit_caption {
	width: 90%;
	max-width: 640px;
	height: 140px;
	margin: 3% 5% 0;
	color: #0196f4;
	font-size: 93%;
}
	
.pr_img {
	width: 75%;
	margin: 0 auto;
}
    .top-cotents {
        height: auto;
        background: url(../../img/top/im_visual_sp.png?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;
}
}