@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: 70px 0 0; overflow: hidden; }
#cboxTitle { position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: #949494; }
#cboxCurrent { display: none; }
#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/colorbox/close.png) no-repeat; width: 60px; height: 60px; 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: #242e85;
	width: 100%;
	height: 100%;
	overflow: visible;
	word-break: break-all;
}
a {
	color: #242e85;
	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: 1360px;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	background: url(/img/top/bg.png) center fixed;
	overflow: hidden;
}
.contentWrap {
	width: 1360px;
	margin: auto;
}
/* -----     共通     ----- */
.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     #242e85
accl：アクセントカラー  #c90915
     */
.bscl { color: #242e85; }
.accl { color: #c90915; }
/*各コンテンツ見出し*/
.cttHd {
	position: relative;
	display: -webkit-flex; display: flex;
	color: #c90915;
	font-family: 'Sorts Mill Goudy';
	font-size: 30rem;
	line-height: 1;
}
.cttHd::before {
	content: "";
	position: absolute;
	left: 0;
	width: 24px;
	height: 27px;
	background: url(/img/icon/fclef.png) no-repeat left top;
	background-size: cover;
}
.cttHd>span {
	padding: 0 0 0 1em;
	letter-spacing: 2px;
}
.cttHdLines {
	width: 100%;
	height: 100%;
}
.lines {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0 0 0.15em;
	background-color: #c90915;
}
.lines::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	left: 100%;
	background-color: #c90915;
}
.lines.lr_1 { margin-left: 4px; }
.lines.lr_2 { margin-left: 3px; }
.lines.lr_3 { margin-left: 2px; }
.lines.lr_4 { margin-left: 1px; }
.lines.lr_5 {}

/* -----     ヘッダーコンテンツ     ----- */
.headerWrap {
	position: fixed;
	width: 290px;
	height: 100%;
	padding: 30px 30px 30px 20px;
	z-index: 99;
}
.navigationWrap {
	margin: 30px 0 50px;
	padding: 2px 0;
	border-top: 2px #c90915 solid;
	border-bottom: 2px #c90915 solid;
}
.navigationList {
	padding: 15px 0;
	border-top: 1px #c90915 solid;
	border-bottom: 1px #c90915 solid;
}
.navigationList>li {
	padding: 15px 0;
}
.navigationList>li>a {
	position: relative;
	display: block;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.navigationList>li>a:hover {
	color: #c90915;
}
.navigationList>li>a._blank::after {
	content: "";
	position: absolute;
	width: 1em;
	height: .7em;
	margin: .2em 0 0 1em;
	border: 1px #242e85 solid;
	-webkit-box-shadow: -3px 3px 0px -1px #FFF, -3px 3px 0px 0px #242e85; box-shadow: -3px 3px 0px -1px #FFF, -3px 3px 0px 0px #242e85;
	-webkit-transition: .5s ease-out; transition: .5s ease-out;
}
.navigationList>li>a._blank:hover::after {
	border: 1px #c90915 solid;
	-webkit-box-shadow: -3px 3px 0px -1px #FFF, -3px 3px 0px 0px #c90915; box-shadow: -3px 3px 0px -1px #FFF, -3px 3px 0px 0px #c90915;
}
.navigationList>li .en {
	font-family: 'Sorts Mill Goudy';
	font-weight: bold;
	font-size: 18rem;
}
.navigationList>li .jp {
	margin: 0 0 0 4px;
	font-size: 10rem;
	font-weight: bold;
}
.shareHd {
	font-family: 'Sorts Mill Goudy';
	font-size: 12rem;
	font-weight: bold;
}
.snsList>li {
	display: inline-block;
	margin: 10px 10px 20px 0;
}
.snsList>li>a {
	display: block;
	padding: 5px 7px 5px 7px;
	font-size: 25rem;
	border-radius: 100% 50% 100% 50%;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.snsList>li>a:hover {
	opacity: .7;
}
.icon-tw {
	color: #FFF;
	background: #1da1f2;
}
.icon-fbc {
	color: #FFF;
	background: #3b579d;
}
.icon-li {
	color: #FFF;
	background: #00c300;
}


/* -----     メインコンテンツ     ----- */
.mainWrap {
	width: 1070px;
	height: 100%;
	margin: 0 0 0 auto;
}
.cttItem {
	padding: 40px 0 110px;
}
.cttItem>div {
	padding: 50px 20px 50px 30px;
}
/* -----     キービジュアル、インフォメーションコンテンツ     ----- */
.mainContent {
	display: -webkit-flex; display: flex;
	padding: 0 0 30px;
}
.kvContent.pc {
	position: relative;
	width: 780px;
	height: 1000px;
	overflow: hidden;
}
.kvContent.pc>.kv {
	position: absolute;
	bottom: -130px;
	opacity: 0;
	-webkit-transition: 3s cubic-bezier(0.320, 0.385, 0.500, 1.000); transition: 3s cubic-bezier(0.320, 0.385, 0.500, 1.000);
}
.kvContent.pc.onload>.kv {
	bottom: 0px;
	opacity: 1;
}
.kvContent.pc>.roadshow {
	position: absolute;
	top: 30px;
	left: 15px;
	opacity: 0;
	-webkit-transition: 3s cubic-bezier(0.500, 0.000, 0.500, 1.000); transition: 3s cubic-bezier(0.500, 0.000, 0.500, 1.000);
}
.kvContent.pc.onload>.roadshow {
	opacity: 1;
}
.kvContent.pc>.catchcopy {
	position: absolute;
	top: 10px;
	right: 70px;
	opacity: 0;
	-webkit-transition: 3s cubic-bezier(0.500, 0.000, 0.500, 1.000) 1s; transition: 3s cubic-bezier(0.500, 0.000, 0.500, 1.000) 1s;
}
.kvContent.pc.onload>.catchcopy {
	top: 60px;
	opacity: 1;
}
.sideContent {
	width: 290px;
	padding: 0 20px 0 30px;
}
.sideContent>div {
	padding: 30px 0 0;
}
.subHd {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: space-between; justify-content: space-between;
	-webkit-align-items: center; align-items: center;
}
.subHd>span {
	font-family: 'Sorts Mill Goudy';
	font-size: 18rem;
	font-weight: bold;
}
.subHd>a {
	font-family: 'Sorts Mill Goudy';
	font-size: 12rem;
	font-weight: bold;
}
/*インフォメーション*/
.infoList {
	width: 100%;
	height: 210px;
	overflow: auto;
}
.infoList>dt {
	margin: 10px 0 5px;
	font-size: 11rem;
	color: #c90915;
}
.infoList>dd {
	margin: 5px 1em 20px 5px;
	font-size: 13rem;
}
.infoList>dd>a {
	display: block;
	margin: 0 0 10px;
}
.infoList>dd>a:hover {
	text-decoration: underline;
}
/*Twitter*/
.twitter {
	width: 100%;
	height: 210px;
	overflow: hidden;
}
.twitter > iframe {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
}
.trailer>a {
	position: relative;
	width: 240px;
	height: 135px;
}
.trailer>a::after {
	content: "";
	position: absolute;
	width: 78px;
	height: 66px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: url(/img/top/trailerPlay.png) no-repeat center;
	-webkit-transition: .3s ease; transition: .3s ease;
}
/*トピックス*/
.topicsList>li {
	margin: 0 0 10px;
}


/* -----     スペシャルコンテンツ     ----- */
.commentContent {
	padding: 0 0 110px;
}
.directorComment {
	display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	background-color: rgba(255,255,255,.6);
}
.curlyBrace {
	position: relative;
	width: 30px;
	height: 31em;
	color: #c90915;
}
.brace {
	position: relative;
	display: block;
	height: 50%;
}
.brace::before, .brace::after {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
}
.brace1::before {
	height: 60%;
	left: 15px;
	border-left: 5px solid;
	border-radius: 100% 0% 0% 30%;
}
.brace1::after {
	height: 50%;
	top: 50%;
	right: 10px;
	border-right: 5px solid;
	border-radius: 0% 30% 100% 0%;
}
.brace2::before {
	height: 50%;
	right: 10px;
	border-right: 5px solid;
	border-radius: 0% 100% 30% 0%;
}
.brace2::after {
	height: 60%;
	top: 40%;
	left: 15px;
	border-left: 5px solid;
	border-radius: 30% 0% 0% 100%;
}
.directorCt {
	width: 1040px;
	padding: 20px 20px 20px 30px;
}
.dirCtTxt {
	margin: 25px 0 0;
	font-size: 16rem;
	line-height: 2;
}


/* -----     イントロダクションコンテンツ     ----- */
.introHd>span { width: 14em; }
.intro {
	font-size: 16rem;
	line-height: 2;
}
.introTxt1, .introTxt2, .introTxt3 {
	margin: 0 0 2em;
}
.introTxt4 {
	display: inline;
	font-size: 28rem;
	background-color: #fffe90;
}


/* -----     ストーリーコンテンツ     ----- */
.storyHd>span { width: 5.5em; }
.story>p {
	font-size: 16rem;
	line-height: 1.8;
	margin: 0 0 1.5em;
}
.storyTxt1 {
	position: relative;
	margin: 0 0 1.5em;
}
.storyTxt1t {
	position: relative;
	z-index: 2;
}
.storyTxt1s {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
.storyTxt2 {
	position: relative;
	margin: 1.5em 0;
}
.storyTxt2t {
	position: relative;
	z-index: 2;
}
.storyTxt2s {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}


/* -----     キャストスタッフコンテンツ     ----- */
.caststaffHd>span { width: 12em; }
.caststaff>header {
	color: #c90915;
	font-size: 18rem;
}
.caststaff>div {
	display: -webkit-flex; display: flex;
	margin: 1em 0 2em;
}
.caststaff>div dt {
	float: left;
	padding: .2em .5em 0 0;
	font-size: 13rem;
}
.caststaff>div dd {
	padding: 0 0 1em;
	font-size: 16rem;
}
.cast>dl {
	width: 340px;
}
.staff>dl {
	width: 510px;
}
.staff span {
	display: block;
	font-size: 12rem;
	margin: 0 0 0 3em;
}


/* -----     チケットコンテンツ     ----- */
.ticketHd>span { width: 6.5em; }
.tkName {
	font-size: 20rem;
	font-weight: bold;
}
.tkImg, .tkSale, .tkDetails, .tkNotes {
	margin: 20px 0;
}
.tkSale {
	font-size: 20rem;
}
.tkDetails {
	font-size: 14rem;
	line-height: 1.8;
}
.tkDetails>dt {
	float: left;
}
.tkDetails>dd>a {
	margin: 0 0 0 1em;
	text-decoration: underline;
}
.tkDetails>dd>a:hover {
	text-decoration: none;
}
.tkNotes {
	font-size: 13rem;
	line-height: 1.8;
}
.tkNotes>li {
	text-indent: -1em;
	padding: 0 0 0 1em;
}


/* -----     ミュージックコンテンツ     ----- */
.musicHd>span { width: 5.5em; }
.musicName {
	font-size: 28rem;
	font-weight: bold;
}
.musicName span {
	font-size: 16rem;
	display: block;
}
.musicImg, .musicSale, .musicDetails, .musicTxt {
	margin: 20px 0;
}
.musicSale {
	font-size: 20rem;
}
.musicDetails {
	font-size: 14rem;
	line-height: 1.8;
}
.musicDetails>dt {
	float: left;
	padding: .2em .5em 0 0;
	font-size: 13rem;
}
.musicDetails> dd {
	padding: 0 0 0.2em;
	font-size: 16rem;
}
.musicTxt {
	font-size: 14rem;
	line-height: 1.8;
}

/* -----     フッターコンテンツ     ----- */
.footerWrap {
	width: 100%;
	padding: 60px 0;
}
.linkList, .copyright {
	display: block;
	text-align: center;
}
.linkList>li {
	display: inline-block;
	margin: 0 5px 30px;
}
.copyright>p {
	display: inline-block;
	margin: 0 15px;
	vertical-align: bottom;
}
.worksCopy {
	font-size: 12rem;
}


/* ---------- 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%;
	}
	.contentWrap {
		width: 100%;
	}
	.cttHd {
		display: table;
		width: 100%;
	}
	.cttHd>span {
		display: table-cell;
		vertical-align: top;
	}
	.cttHdLines {
		display: table-cell;
		width: auto;
		vertical-align: top;
	}
/* -----     ヘッダーコンテンツ     ----- */
	.headerWrap {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 100%;
		padding: 5em 10%;
		background-color: #FFF;
		overflow: auto;
		z-index: 99;
		-webkit-transition: .3s ease-out; transition: .3s ease-out;
	}
	.headerWrap.show {
		left: 0%;
	}
	.naviBtn {
		position: fixed;
		top: 10px;
		right: 10px;
		padding: 1.5em;
		background-color: rgba(36, 46, 133, .3);
		border: 1px #FFF solid;
		border-radius: 4em 3em 4em 3em;
		z-index: 999;
	}
	.naviBtn span {
		display: block;
		position: absolute;
		right: .75em;
		top: 1.5em;
		width: 1.5em;
		height: .2em;
		background-color: #FFF;
		-webkit-transition: .2s ease-out; transition: .2s ease-out;
	}
	.naviBtn span:before {
		content: "";
		position: absolute;
		top: -.5em;
		width: 1.5em;
		height: .2em;
		background-color: #FFF;
		-webkit-transition: .2s ease-out; transition: .2s ease-out;
	}
	.naviBtn span:after {
		content: "";
		position: absolute;
		top: .5em;
		width: 1.5em;
		height: .2em;
		background-color: #FFF;
		-webkit-transition: .2s ease-out; transition: .2s ease-out;
	}
	.naviBtn.show span {
		height: 0;
	}
	.naviBtn.show span:before {
		-webkit-transform: translateY(.5em) rotate(45deg);
		transform: translateY(.5em) rotate(45deg);
	}
	.naviBtn.show span:after {
		-webkit-transform: translateY(-.5em) rotate(-45deg);
		transform: translateY(-.5em) rotate(-45deg);
	}
	.rogo {
		max-width: 240px;
		margin: auto;
	}
	.navigationWrap {
		margin: 2em 0 3em;
	}
	.navigationList {
		padding: 1em 0;
	}
	.navigationList>li {
		padding: 0;
	}
	.navigationList>li>a {
		padding: 1em 0;
	}
	.shareWrap {
		text-align: center;
	}
	.shareHd {
		font-size: 16rem;
	}
	.snsList>li {
		margin: .5em;
	}
	.snsList>li>a {
		padding: .15em .3em .15em .3em;
		font-size: 40rem;
	}
	
/* -----     メインコンテンツ     ----- */
	.mainWrap {
		width: 100%;
		margin: auto;
	}
	.cttItem {
		width: 95%;
		margin: auto;
		padding: 5em 0;
	}
	.cttItem>div {
		width: 95%;
		margin: auto;
		padding: 3em 0 2em;
	}
/* -----     キービジュアル、インフォメーションコンテンツ     ----- */
	.mainContent {
		display: block;
	}
	.sideContent {
		width: 90%;
		margin: auto;
		padding: 0;
	}
	.sideContent>div {
		padding: 2em 0 0;
	}
	.subHd>span {
		font-size: 20rem;
	}
	.subHd>a {
		font-size: 16rem;
	}
	.infoList>dt {
		font-size: 14rem;
	}
	.infoList>dd {
		font-size: 16rem;
	}
	.trailer>a {
		width: 100%;
		height: 100%;
	}
	.curlyBrace {
		display: none;
	}
/* -----     スペシャルコンテンツ     ----- */
	.commentContent {
		padding: 2em 0 4em;
	}
	.directorCt {
		width: 90%;
		padding: 0;
		margin: auto;
	}
	.dirCtHd {
		max-width: 267px;
	}
	.dirCtTxt {
		margin: 1em 0 0;
		font-size: 16rem;
		line-height: 1.8;
	}
/* -----     イントロダクションコンテンツ     ----- */
	.itSp { display: none; }
	.introHd>span {
		width: 10.5em;
	}
	.introTxt4 {
		font-size: 22rem;
	}
/* -----     ストーリーコンテンツ     ----- */
	#story.cttItem {
		width: 100%;
	}
	#story .storyHd {
		width: 95%;
		margin: auto;
	}
	.storyHd>span {
		width: 5em;
	}
	#story.cttItem>div {
		width: 100%;
	}
	.storyTxt1, .storyTxt2 {
		margin: 0;
	}
	.storyTxt1t, .storyTxt2t {
		width: 90%;
		margin: auto;
	}
	.storyTxt1s {
		position: relative;
		margin: 1.5em 0;
	}
	.storyTxt2s {
		position: relative;
		margin: 0 0 1.5em;
	}
	.story>p {
		width: 90%;
		margin: 0 auto 1.5em;
	}
/* -----     キャストスタッフコンテンツ     ----- */
	.caststaffHd>span {
		width: 9.5em;
	}
	.caststaff>div {
		display: block;
	}
	.cast>dl, .staff>dl {
		width: 100%;
	}
/* -----     チケットコンテンツ     ----- */
	.ticketHd>span {
		width: 6em;
	}
	.tkImg, .tkSale, .tkDetails, .tkNotes {
		margin: 1em 0;
	}
/* -----     フッターコンテンツ     ----- */
	.footerWrap {
		width: 100%;
		padding: 5em 0 ;
	}
	.linkList, .copyright {
		display: block;
		text-align: center;
	}
	.linkList>li {
		margin: 0 5px 20px;
	}
	.linkList>li>a {
		display: block;
		max-width: 240px;
	}
	.copyright>p {
		margin: 10px 15px;
	}

}

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