@charset "utf-8";

/* ----- ウェブフォント ----- */
/*SNSアイコン*/
@font-face {font-family: 'sns';src:  url('../fonts/sns.eot?5c5p8n');src:  url('../fonts/sns.eot?5c5p8n#iefix') format('embedded-opentype'),url('../fonts/sns.ttf?5c5p8n') format('truetype'),url('../fonts/sns.woff?5c5p8n') format('woff'),url('../fonts/sns.svg?5c5p8n#sns') format('svg');font-weight: normal;font-style: normal;}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'sns' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.icon-tb:before {content: "\e900";}
.icon-tw:before {content: "\e901";}
.icon-gp:before {content: "\e902";}
.icon-fbc:before {content: "\e903";}
.icon-fb:before {content: "\e904";}
.icon-li:before {content: "\e905";}

/* ----- reset ----- */
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:6.25%;overflow-y:scroll;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}img{vertical-align:middle;}ol,ul{list-style:none;}

/* ----- clearfix ----- */
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{content:"";display:table;overflow:hidden;}.clearfix:after{clear:both;}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0); outline: 0;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/* ----- Colorbox set ----- */
#cboxOverlay { background: #FFF; }
#cboxContent { overflow:hidden; }
#cboxError { padding: 50px; border: 1px solid #ccc; }
#cboxLoadedContent { margin: 57px 0 0 0; overflow: hidden; }
#cboxTitle { position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: #949494; }
#cboxCurrent { display: none !important; }
#cboxSlideshow { position: absolute; right: 30px; bottom: 4px; color: #242e85; }
/*#cboxLoadingGraphic { background: url(../img/colorbox/loading.gif) no-repeat center; }*/
#cboxClose { position: absolute; right: 0; top: 0; border: none; background: url(../img/comment/dc_close.png) no-repeat; width: 53px; height: 53px; text-indent:-9999px; }
/*#cboxClose:hover { opacity: .7; }*/
.cboxIframe { width: 100%; height: 100%; display: block; border: 0; }

/* ----- common ----- */
body{
	font-family: Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size: 14em;
	line-height: 1.5;
	background: #FFF;
	color: #000;
	width: 100%;
	height: 100%;
	overflow: visible;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
a {
	color: #f18700;
	text-decoration:none;
}
a:hover {text-decoration:none;}

/*--  loading  --*/
#overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #FFF;
	z-index: 9999;
}
/*--  siteWrap  --*/
#siteWrap {
	position: relative;
	width: 100%;
	min-width: 1200px;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	overflow: hidden;
}

/* -----     共通     ----- */
.pc { display: block !important; }
.sp { display: none !important; }
.brpc { display: block; }
.brsp { display: none; }
.ftbd { font-weight: bold; }
.red { color: red; }
.trst2s { -webkit-transition: .2s ease-out; transition: .2s ease-out; }
.trst3s { -webkit-transition: .3s ease-out; transition: .3s ease-out; }
.trst4s { -webkit-transition: .4s ease-out; transition: .4s ease-out; }
.trst5s { -webkit-transition: .5s ease-out; transition: .5s ease-out; }
/*     
各種カラー
bscl：ベースカラー1     #
accl：アクセントカラー  #
     */
.bscl {  }
.accl {  }

#siteWrap>section {
	width: 100%;
	padding: 150px 0 60px;
}
.contentWrap {
	width: 1200px;
	height: 100%;
	margin: auto;
}
.lineBg {
	background: url(../img/bg/lineBg.png) repeat center;
}
.contentHd {
	text-align: center;
}
/* -----     トップコンテンツ     ----- */
.topWrap {
	position: relative;
	width: 100%;
	height: 900px;
	text-align: center;
}
.stage {
	width: 100%;
	height: 100%;
	background: #f18700;
}
.stage>div, .logo {
	position: absolute;
	width: 100%;
	height: 100%;
}
.stage>div.screen {
	position: absolute;
	width: 860px;
	height: 494px;
	top: 265px;
	left: 0;
	right: 0;
	margin: auto;
	background: #FFF;
	z-index: 0;
}
.light {
	background: url(../img/top/light.png) no-repeat center 0;
}
.deco1 {
	background: url(../img/top/deco1.png) repeat-x center 90px;
}
.deco2 {
	background: url(../img/top/deco2.png) repeat-x center 60px;
}
.curtainL {
	background: url(../img/top/curtainL.png) no-repeat left bottom;
}
.curtainR {
	background: url(../img/top/curtainR.png) no-repeat right bottom;
}
.stage>div.deco3 {
	position: fixed;
	height: 132px;
	background: url(../img/top/deco3.png) repeat-x center 0;
	z-index: 99;
}
.particle {
	background: url(../img/top/particle.png) no-repeat center 120px;
}
.logo {
	background: url(../img/top/logo.png) no-repeat center 370px;
}
.navigation {
	position: fixed;
	width: 1200px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 99;
}
.navigationList {
	padding: 30px 0;
	font-size: 0;
}
.navigationList li {
	display: inline-block;
	margin: 0 25px;
}
.navigationList li a {
	font-size: 20rem;
}




/* -----     ニュースコンテンツ     ----- */
.newsList {
	margin: 3em;
	padding: 1em 2em;
	height: 12em;
	border: 1px #f18700 solid;
	overflow: auto;
}
.newsList dt {
	font-size: 14rem;
	padding: 0 0 2px;
	border-bottom: 1px #000 dashed;
}
.newsList dd {
	font-size: 16rem;
	margin: 10px 0 20px;
}
.newsList dd a {
	display: block;
	text-decoration: underline;
}
.newsList dd a:hover {
	text-decoration: none;
}

/* -----     キャンペーンコンテンツ     ----- */
/*.campaign {
	margin: 3em auto;
	max-width: 100%;
	width: 500px;
	min-width: 220px;
}*/
.campaign {
	position: relative;
	margin: 2em;
	padding: 4em 2em;
	font-size: 18rem;
	color: #000;
	text-align: center;
	line-height: 2;
	letter-spacing: 1px;
	border: 1px #f18700 solid;
}
.contentSubHdCP img {
	margin: 0 auto 2em;
	text-align: center;
	border: 2px #f08700 solid;
}
.campaign section {
	margin: 2em auto 0;
}
.campaign > section > span, .campaignTk >a > span {
	font-weight: bold;
	color: #f18700;
}
.campaign > section > a {
	text-decoration: underline;
}
.campaignTitle {
	font-size:24rem;
	font-weight:bold;
	line-height:1.5;
	padding:0 0 40px;
}
.campaignList {
	text-align: left;
	padding: 0 70px;
}
.campaignListCenter {
	text-align: center;
}
.campaignList li,.campaignListCenter li {
	text-indent: -1em;
	margin-left: 1em;
}
.tkDetail {
	padding: 0 8em;
	text-align: left;
}
.tkDetailIB {
	display: inline-block;
}
.campaignTk {
	padding: 20px 0 40px;
	border-bottom: 1px #f18700 solid;
}
.campaignTk >a > span {
	font-size: 19rem;
}
.campaignEnd {
	font-weight: bold;
	color: red;
}
/* -----     京アニ映画yearとは     ----- */
.about {
	position: relative;
	margin: 2em;
	padding: 4em 2em;
	font-size: 18rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	line-height: 2;
	letter-spacing: 1px;
	border: 1px #FFF solid;
}
.aboutTxt1 {
	font-size: 22rem;
	margin: 0 0 1em;
	text-shadow: 0px 0px 3px #fa958e, 0px 0px 6px #c4473e;
}
.aboutTxt2 {
}
/* -----     監督コメント     ----- */
#siteWrap>#directorComment {
	padding: 0 0 60px;
}
.directorComment {
	-webkit-display: flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	-webkit-justify-content: space-around; justify-content: space-around;
	-webkit-align-items: stretch; align-items: stretch;
	margin: 2em;
}
.directorComment>article {
	width: 250px;
	padding: 20px;
	margin: 1em;
	border: 2px #FFF solid;
	text-align: center;
}
.dWorks {
	display: table-cell;
	width: 250px;
	height: 7em;
	color: #fff37d;
	vertical-align: middle;
}
.dWorks>p {
	line-height: 1.25;
	padding: .25em 0;
}
.dcLetter {
	display: block;
	width: 193px;
	height: 170px;
	margin: auto;
	background: url(../img/comment/dcLetter.png) no-repeat left top;
}
.dcLetter:hover {
	background-position: right top;
}
/* -----     公開中作品     ----- */
.movieList {
	-webkit-display: flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	-webkit-justify-content: center; justify-content: center;
	-webkit-align-items: stretch; align-items: stretch;
}
.movieList>article {
	width: 296px;
	margin: 40px;
}
.kvImg {
	padding: 15px;
	border: 1px #f18700 solid;
}
.lineBg .kvImg {
	border-color: #FFF;
}
.kvImg img {
	box-shadow: 0px 0px 10px 0px #f18700;
	-webkit-transition: .5s ease-out; transition: .5s ease-out;
}
.lineBg .kvImg img {
	box-shadow: 0px 0px 10px 0px #6f281e;
}
.kvImg a:hover img {
	opacity: .7;
}
.movieData, .movieData a {
	color: #000;
	text-align: center;
}
.lineBg .movieData, .lineBg .movieData a {
	color: #FFF;
}
.movieData a:hover {
	text-decoration: underline;
}
.mvRoadshow {
	margin: 1em;
	font-size: 14rem;
}
.mvTitle {
	margin: .5em;
	font-size: 18rem;
}
/* -----     公開予定作品     ----- */
/* -----     公開終了作品     ----- */
/* -----     SPECIAL     ----- */
#special {
	margin: 5px 0 0;
}
#special .contentWrap {
	background: url(../img/special/spBg.png) no-repeat top;
}
.contentSubHd {
	margin: 2em auto;
	font-size: 24rem;
	text-align: center;
	color: #FFF;
}
.contentSubHdLine {
	width: 150px;
	height: 5px;
	margin: 2em auto 0;
	background-color: #FFF;
	border-radius: 3px;
}
.characterdesignCommentWrap {
margin: 0 0 10em 0
}
.characterdesignCommentWrap>p {
	color: #FFF;
	text-align: center;
	font-size: 18rem;
	line-height: 1.8;
}
.specialComment {
	-webkit-display: flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	-webkit-justify-content: space-around; justify-content: space-around;
	-webkit-align-items: stretch; align-items: stretch;
	margin: 2em;
}
.specialComment>article {
	width: 340px;
	padding: 40px;
	margin: 1em;
	border: 1px #FFF solid;
	text-align: center;
}
.sWorks {
	display: table-cell;
	width: 340px;
	height: 6em;
	color: #fff37d;
	vertical-align: middle;
}
.sWorks>p {
	line-height: 1.25;
	padding: .25em 0;
}
.sImg {
	display: block;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
.sImg img {
	width: 100%;
	border: 15px solid;
	border-top-color: #74400c;
	border-bottom-color: #74400c;
	border-left-color: #8f511a;
	border-right-color: #8f511a;
	-webkit-transition: .5s ease-out;
	transition: .5s ease-out;

}
.sImg:hover img {
	opacity: .7;
}

/* -----     フッターコンテンツ     ----- */
.footerWrap {
	padding: 40px 0;
	text-align: center;
}
.copyright {
	margin: 20px 0;
}
/*SNS*/
.snsList>li {
	display: inline-block;
	margin: 20px 10px;
}
.snsList>li>a {
	display: block;
	font-size: 40rem;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.snsList>li>a:hover {
}
.icon-tw {
	color: #FFF;
	background: #1da1f2;
}
.icon-fb {
	color: #FFF;
	background: #3b579d;
}
.icon-li {
	color: #FFF;
	background: #00c300;
}
/*pagetop*/
.pagetop {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background-color: #f18700;
	border: 1px #FFF solid;
	border-radius: 50%;
}
.pagetop::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 6px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* -----     common set    ----- */
.m5  { margin: 5px; }
.m10 { margin: 10px; }
.m15 { margin: 15px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.m40 { margin: 40px; }
.m50 { margin: 50px; }
.m60 { margin: 60px; }

.mt5  { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }

.mr5  { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }

.mb5  { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }

.ml5  { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }

.mtb5  { margin: 5px 0; }
.mtb10 { margin: 10px 0; }
.mtb15 { margin: 15px 0; }
.mtb20 { margin: 20px 0; }
.mtb30 { margin: 30px 0; }
.mtb40 { margin: 40px 0; }
.mtb50 { margin: 50px 0; }
.mtb60 { margin: 60px 0; }

.mrl5  { margin: 0 5px; }
.mrl10 { margin: 0 10px; }
.mrl15 { margin: 0 15px; }
.mrl20 { margin: 0 20px; }
.mrl30 { margin: 0 30px; }
.mrl40 { margin: 0 40px; }
.mrl50 { margin: 0 50px; }
.mrl60 { margin: 0 60px; }

.p5  { padding: 5px; }
.p10 { padding: 10px; }
.p15 { padding: 15px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }
.p50 { padding: 50px; }
.p60 { padding: 60px; }

.pt5  { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }

.pr5  { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }

.pb5  { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }

.pl5  { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }

.ptb5  { padding: 5px 0; }
.ptb10 { padding: 10px 0; }
.ptb15 { padding: 15px 0; }
.ptb20 { padding: 20px 0; }
.ptb30 { padding: 30px 0; }
.ptb40 { padding: 40px 0; }
.ptb50 { padding: 50px 0; }
.ptb60 { padding: 60px 0; }

.prl5  { padding: 0 5px; }
.prl10 { padding: 0 10px; }
.prl15 { padding: 0 15px; }
.prl20 { padding: 0 20px; }
.prl30 { padding: 0 30px; }
.prl40 { padding: 0 40px; }
.prl50 { padding: 0 50px; }
.prl60 { padding: 0 60px; }


/* ---------- media screen ---------- */
@media screen and (max-width: 768px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
	img { width: 100%; height: auto; }
	.brpc { display: none; }
	.brsp { display: block; }
	
	#siteWrap {
		min-width: 100%;
	}
	#siteWrap>section {
		padding: 15% 0 7%;
	}
	.contentWrap {
		width: 90%;
	}
	.contentHd {
		max-width: 414px;
		margin: auto;
	}
/* -----     トップコンテンツ     ----- */
	.topWrap {
		height: 100%;
	}
	.navigation {
		position: relative;
		width: 100%;
	}
	.navigationList {
		padding: 0;
		font-size: 0;
	}
	.navigationList li {
		display: block;
		margin: 0;
		width: 100%;
		border-bottom: 1px #f08700 solid;
	}
	.navigationList li:first-child {
		border-top: 1px #f08700 solid;
	}
	.navigationList li a {
		display: block;
		width: 100%;
		padding: 1em;
		font-size: 16rem
	}
/* -----     ニュースコンテンツ     ----- */
	.newsList {
		margin: 3em 0;
	}
/* -----     キャンペーンコンテンツ     ----- */
	.contentSubHdCP {
		width: 100%;
		text-align: center;
	}
	.campaign {
		margin: 1em 0;
		padding: 2em 1em;
		font-size: 14rem;
		text-align: left;
		line-height: 1.5;
	}
	.campaignTitle {
		font-size:18rem;
		padding:0 0 20px;
	}

	.campaignList {
		padding: 0;
	}
	.campaignListCenter {
		text-align: left;
	}
	.tkDetail {
		padding: 1em 0;
	}
/* -----     京アニ映画yearとは     ----- */
	.about {
		margin: 2em 0;
		font-size: 14rem;
		line-height: 1.5;
	}
	.aboutTxt1 {
		font-size: 16rem;
	}
/* -----     監督コメント     ----- */
	.directorComment {
		margin: 0;
	}
	.directorComment>article {
		width: 45%;
		margin: 2%;
		padding: 4%;
	}
	.dcNameHd {
		max-width: 181px;
		margin: auto;
	}
	.dWorks {
		height: 10em;
	}
	.dcLetter {
		display: block;
		width: 100%;
		max-width: 160px;
		height: auto;
		margin: auto;
		background: url(../img/comment/dcLetter.png) no-repeat right top;
		background-size: 200%;
	}
	.dcLetter::before {
		display: block;
		content: "";
		padding-top: 90%;
	}
/* -----     公開中作品     ----- */
	.movieList>article {
		width: 40%;
		margin: 5%;
	}
	.kvImg {
		padding: 5%;
	}
	.mvTitle {
		font-size: 16rem;
	}
/* -----     公開予定作品     ----- */
/* -----     公開終了作品     ----- */
/* -----     SPECIAL     ----- */
	#special .contentWrap {
		background: transparent;
	}
	.contentSubHd {
		font-size: 18rem;
		text-align: center;
		
	}
	.sNameHd {
		max-width: 181px;
		margin: auto;
	}
	.characterdesignCommentWrap>p {
		text-align: left;
	}
	.specialComment>article {
		width: 250px;
		padding: 20px;
	}
	.sImg {
		width: 210px;
		height: 210px;
	}
	.contentSubHdLine {
		width: 80px;
		height: 4px;
	}
	.characterdesignCommentWrap>p {
		font-size: 15rem;
	}
/* -----     フッターコンテンツ     ----- */
	.copyright {
		max-width: 208px;
		margin: 20px auto;
		padding: 20px;
	}
	
	

}

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