/*@charset "UTF-8";*/
/*IE用設定*/
@media all and (-ms-high-contrast:none) {
	#gp2019 {
		font-family: "メイリオ", Meiryo, sans-serif;
	}
}

/*Firefox用設定*/
@-moz-document url-prefix() {
	#about {
		background-color: #e8abbf;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*共通項目*/
.fs-s{
	font-size: 0.8em;
}

.fs-ss{
	font-size: 0.5em;
}

.fs-l {
	font-size: 1.4em;
}

.orange {
	color: #eea800;
}

.blue{
	color: #54a1d9;
}

/*デバイス別表示*/
.pc {
	display: none;
}

.pc-inline {
	display: none;
}

/*装飾１*/
.deco-lt{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 80px;
	height: 80px;
	background-image: url(../img/deco-01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	transform:rotateY(180deg);
}
.deco-rt{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 80px;
	height: 80px;
	background-image: url(../img/deco-01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.deco-lb{
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 80px;
	height: 80px;
	background-image: url(../img/deco-01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	transform:rotateX(180deg) rotateY(180deg);
}
.deco-rb{
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 80px;
	height: 80px;
	background-image: url(../img/deco-01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	transform:rotateX(180deg);
}

#gp2019 {
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	line-height: 1.6;
	word-break: break-all;
}

#gp2019 h1{
	position: relative;
	margin: 80px 10px;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	color: #291b1b;
}

#gp2019 h1:before{
	display: block;
	content: "";
	position: absolute;
	top: -50px;
	width:100%;
	height: 50px;
	background-image: url(../img/deco-04.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
}

#gp2019 h1:after{
	display: block;
	content: "";
	position: absolute;
	bottom: -50px;
	width:100%;
	height: 50px;
	background-image: url(../img/deco-04.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
	transform: rotateX(-180deg);
}

#title{
	background: linear-gradient(to right,#d6e5ec,#b5d4e4);
}

.title-cover{
	background-image: url(../img/bg-cntComent.png);
	background-size: 50px auto;
}

.title-wrap{
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
}

/*透明*/
.img-title-base{
	width: 100%;
	max-width: 960px;
}

/*アー写*/
.img-title-pic{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 20%;
	width: 95%;
	height: auto;
	margin: auto;
}

/*ロゴ*/
.img-title-logo{
	position: absolute;
	top: 20px;
	right: 2%;
	width: 70%;
}

/*日付*/
.img-title-date{
	position: absolute;
	bottom: 38%;
	right: 2%;
	width: 35%;
}

/*ミニプロフ*/
.img-title-prof{
	position: absolute;
	bottom: 10px;
	left: 5%;
	width: 50%;
}

.img-title-pic,.img-title-logo,.img-title-date,.img-title-prof{
	animation-name: title-fade;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease;
}

.img-title-pic{
	animation-delay: 1s;
}

.img-title-logo{
	animation-delay: 2s;
}

.img-title-date{
	animation-delay: 2.5s;
}

.img-title-prof{
	animation-delay: 2.5s;
}

@keyframes title-fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*キャプション*/
#caption{
	padding: 7vh 0;
	background-color: #291b1b;
	background-image: url(../img/bg-cntComent.png);
	background-size: 50px auto;
}

#caption p{
	margin: 0 10%;
	line-height: 2;
	color: #fff;
}

/*について*/
#about{
	position: relative;
	padding: 7vh 0;
	background-color: #f2cd7c;
}

.about-wrap{
	position: relative;
	z-index: 5;
	width: 90%;
	max-width: 960px;
	margin: 50px auto;
}

.about-wrap p{
	margin: 0 auto 30px;
	line-height: 2;
	color: #291b1b;
}

/*公演概要*/
#info{
	padding: 7vh 0;
	background-color: #f2f2ee;
	background-image: url(../img/deco-03.png),url(../img/deco-03.png),url(../img/deco-03.png),url(../img/deco-03.png);
	background-repeat: no-repeat;
	background-position:  
		right -25% top 15%,
		left -25% top  0%,
		right -25% bottom 0%,
		left -25% bottom 15%;
	background-size: 50% auto;
}

#info table{
	width: 90%;
	max-width: 960px;
	margin: 0 auto 30px;
	line-height: 2;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,0.1));
}

#info tr{
}

#info th{
	display: block;
	padding: 10px;
	background-color: #291b1b;
	text-align: center;
	color: #f2cd7c;
	word-break: keep-all;
}

#info td{
	display: block;
	padding: 30px;
	background-color: #fff;
	vertical-align:middle;
	color: #291b1b;
}

.ctvlogo{
	width: 30%;
	max-width: 174px;
	margin: 10px 0;
	vertical-align: middle;
}

.info-tips{
	width: 90%;
	max-width: 960px;
	margin: 50px auto;
	line-height: 2;
}

.info-tips p{
	margin: 0 auto 15px;
}

/*出演*/
#cast{
	position: relative;
	padding: 7vh 0;
	background-color: #db7843;
}

.cast-title{
	max-width: 940px;
	margin: 0 auto;
	padding: 20px 10px;
	background-color: rgba(255,255,255,0.3);
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
}

.cast-pic{
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	background-color: #000;
}

.cast-pic img{
	width: 100%;
}

.cast-names{
	position: absolute;
	bottom: 0;
	width: 100%;
	table-layout: fixed;
}

.cast-names td{
	padding: 10px 20px;
	background-color: rgba(0,0,0,0.9);
	color: #f2cd7c;
}

.cast-prof{
	margin: 60px auto;
}

.cast-prof p{
	position: relative;
	z-index: 5;
	width: 90%;
	max-width: 960px;
	margin: 0 auto 30px;
	line-height: 2;
}

/*演奏プログラム*/
#song{
	padding: 7vh 0;
	background-color: #f2f2ee;
}

.caution{
	margin: 60px auto;
	text-align: center;
}

#song ul{
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
}

#song li{
	position: relative;
	z-index: 5;
	margin: 0 auto 10vh;
	text-align: center;
}

#song li:after{
	display: block;
	content: "";
	position: absolute;
	bottom: -5vh;
	z-index: -1;
	width: 100%;
	height: 5vh;
	background-image: url(../img/deco-02.png);
	background-repeat: repeat-x;
	background-position: center center;
	background-size: auto 100%;
}

/*ページトップボタン*/
#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 50;
}

#page-top img {
	width: 60px;
	height: 60px;
	background-color: #54a1d9;
	border: solid 2px #525242;
	box-sizing: border-box;
	border-radius: 50%;
	filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));
}
/*SNSシェア*/
#share{
	background-color: #291b1b;
}

.sns-archive{
	max-width: 960px!important;
	margin: 0 auto!important;
	box-shadow: none!important;
	background-color: transparent!important;
}

.snstitle{
	color: #f2cd7c!important;
}

/*iPhone twitter飛び出し不具合解消*/
@media only screen and (max-width: 780px) {
	.twplug-wrap {
		overflow: hidden;
	}

	.twplug-wrap iframe {
		/* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
		width: calc(100vw - 20px)!important;
	}
}

/*pc*/
@media screen and (min-width: 960px) {
	#gp2019{
		font-size: 18px;
	}

	.sp {
		display: none;
	}

	.sp-inline {
		display: none;
	}

	.pc {
		display: block;
	}

	.pc-inline {
		display: inline;
	}
	
	#gp2019 h1{
	font-size: 1.8em;
	}
	
	/*装飾１*/
	.deco-lt{
		top: 30px;
		left: 30px;
		width: 100px;
		height: 100px;
	}
	.deco-rt{
		top: 30px;
		right: 30px;
		width: 100px;
		height: 100px;
	}
	.deco-lb{
		bottom: 30px;
		left: 30px;
		width: 100px;
		height: 100px;
	}
	.deco-rb{
		bottom: 30px;
		right: 30px;
		width: 100px;
		height: 100px;
	}

	/*アー写*/
	.img-title-pic{
		bottom: 0;
		left: 20px;
		right: 0;
		width: auto;
		height: 100%;
		margin: 0;
	}

	/*ロゴ*/
	.img-title-logo{
		top: 20px;
		right: 30px;
		max-width: 500px;
	}

	/*日付*/
	.img-title-date{
		bottom: 20px;
		right: 30px;
		max-width: 480px;
	}

	/*ミニプロフ*/
	.img-title-prof{
		bottom: 20px;
		left: 50px;
		max-width: 350px;
	}

	/*キャプション*/
	#caption p{
		text-align: center;
	}
	
	/*公演概要*/
	#info table{
		border-collapse: separate;
		border-spacing: 0 50px;
	}

	#info th{
		display: table-cell;
		padding: 30px;
	}

	#info td{
		display: table-cell;
		padding: 30px;
	}
	
	/*演奏プログラム*/
	#song li{
		font-size: 1.4em;
	}

	/*footer*/
	footer {
		margin-bottom: -3em;
		padding: 15px 0;
		background-color: #291b1b;
		text-align: center;
	}

	footer a, footer p {
		font-size: 0.8em;
		font-weight: bold;
		color: #d8d6de;
	}

	/*	ページトップボタン*/
	#page-top{
		bottom: 20px;
		right: 20px;
	}

	#page-top img {
		width: 80px;
		height: 80px;
	}
}