@charset "UTF-8";
/*
	Title	   : アニメ『賢者の孫』公式サイト
	URI            : http://kenja-no-mago.jp
	Designer       : GRAPHNETWORK
	Designer's URI : http://graphnetwork.com/
*/


/* -----------------------------------------------



toppage




--------------------------------------------------*/

#top {
	background-image: url("../img/top/bg_top.jpg");
}
#main {
	padding: 0;
}
h1.page_ttl {
	display: none;
}

#top-main_area {
	display: block;
	background-image: url("../img/top/bg_bnr_area.gif");
	padding-bottom: 0;
	margin-bottom: 20px;
}


@media screen and (min-width:960px) {
	#top-main_area {
		display: flex;
		background-image: url("../img/top/bg_bnr_area.gif");
		padding-bottom: 0;
		margin-bottom: 100px;
	}
	#main {
		padding-left: 200px;
	}

}

@media screen and (max-width: 1450px) and (min-width: 950px){
	#mainvisual {
	width: 100%;
	}
	#mainvisual img {
		max-width: 100%;
	}
}


#top-bnr_area {
	text-align: center;
	padding-top: 10px
}

@media screen and (min-width:960px) {
	#top-bnr_area.pc {
	width: 320px;
	height: 100%;
	display: block;
	padding: 25px;

	}


	#mainvisual {
	width: 70%;
	}

	#mainvisual img {
	width: 100%;
height: 100%;
	}

}


#top-bnr_area img {
	margin-bottom: 10px;
}

#top-movie_area {
	width: 330px;
	height: 200px;
	margin: 0 auto;
	box-shadow :5px 5px 15px 10px rgba(0,0,0,0.3), /* ふわっとした影 */
	18px 18px 0 -5px #9f812e/* ゴールド影 */;
	margin-bottom: 70px;
}



#top-bnr_area .swiper-slide img {
	width: 100%;
}


.swiper-pagination-bullets {
	top:110px;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
   background-image:url("../img/top/arrow_next.png");
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
   background-image:url("../img/top/arrow_prev.png");
}

.swiper-button-next, .swiper-button-prev {
position: absolute;
    top: 45%;
    width: 40px;
    height: 40px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 40px 40px;
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
}


@media screen and (min-width:960px) {
	#top-movie_area {
		width: 800px;
		height: 450px;
		box-shadow :5px 5px 15px 10px rgba(0,0,0,0.3), /* ふわっとした影 */
		18px 18px 0 -5px #9f812e/* ゴールド影 */;
		margin-bottom: 100px;
	}
}

#top_btmarea {
		margin-bottom: 40px;
}
@media screen and (min-width:960px) {
	#top_btmarea {
		display: flex;
		justify-content:center;
		margin-bottom: 140px;
	}
}

.update_ttl,.twitter_ttl {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #000;
	font-size: 30px;
	padding-bottom: 20px;
	text-align: center;
	width: 100%;
}
#update,#twitter {
   width: 90%;
   margin: 0 auto;
}
@media screen and (min-width:960px) {
	#update,#twitter {
	   width: 400px;
	   margin: 0;
	}
	.update_ttl,.twitter_ttl {
		font-weight: 700;
		font-size: 40px;
		padding-bottom: 20px;
	}
}

#update .inner,#twitter .inner {
	height: 400px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 30px;
	background-image: url("../img/top/frame1.png");
	background-repeat: no-repeat;
	background-position:right 0 top 0;
}
#twitter .inner {
	height: 500px;
}

@media screen and (min-width:960px) {
	#update .inner,#twitter .inner {
		height: 500px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-top: 20px;
		background-image: url("../img/top/frame1.png");
		background-repeat: no-repeat;
		background-position:right 0 top 0;
	}
}


#update {
	margin-bottom: 80px;
}
#update .inner {
	background-color: #c2a770;
	box-shadow: 5px 5px 15px 10px rgba(0,0,0,0.3), /* ふわっとした影 */
	18px 18px 0 -5px #9f812e/* ゴールド影 */,
	0 0 0 1px #fff, 0 0 0 3px #c2a770;
	padding: 15px;
}

#update dl {
	height: 285px;
	overflow: hidden;
}
#update dl dt {
	color: #846b26;
	font-size: 9px;
	line-height: 9px;
	padding-bottom: 5px;
}
#update dl dd {
	border-bottom: dotted 1px #9f812e;
	padding-bottom:10px;
	margin-bottom: 10px;
}
#update dl dd a {
	color: #140403;
}
#update dl dd a:hover {
	color: #140403;
	text-decoration: underline;
}

@media screen and (min-width:960px) {
	#update {
		margin-right: 70px;
	}
	#update .inner {
		padding: 20px;
		box-shadow: 5px 5px 15px 10px rgba(0,0,0,0.3), /* ふわっとした影 */
		25px 25px 0 -5px #9f812e/* ゴールド影 */,
		0 0 0 1px #fff, 0 0 0 3px #c2a770;
	}
	#update dl {
		height: 350px;
	}
	#update dl dt {
		font-size: 11px;
	line-height: 1.6em;
	}
	#update dl dd {
		border-bottom: dotted 1px #9f812e;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

}



#twitter .inner {
	background-color: #fff;
	box-shadow: 5px 5px 15px 10px rgba(0,0,0,0.3), /* ふわっとした影 */
	18px 18px 0 -5px #9f812e/* ゴールド影 */,0 0 0 1px #997c2c, 0 0 0 2px #fff, 0 0 0 3px #997c2c;
}
@media screen and (min-width:960px) {
	#twitter .inner {
		box-shadow: 5px 5px 15px 10px rgba(0,0,0,0.3), /* ふわっとした影 */
		25px 25px 0 -5px #9f812e/* ゴールド影 */,0 0 0 1px #997c2c, 0 0 0 2px #fff, 0 0 0 3px #997c2c;
	}
}





/* -----------------------------------------------



youtube用colorbox




--------------------------------------------------*/



body #cboxClose {
    background: url("../img/common/close2.png") no-repeat top center;
    bottom:auto;
    top:-50px;
    right:48%;

}

@media screen and (min-width:960px) {
body #cboxClose {
    background: url("../img/common/close2.png") no-repeat top center;
    bottom:auto;
    top:-50px;
    right: 48%;

}
}