@charset "UTF-8";

/* Centered texts in each section
	* --------------------------------------- */
/*　ナビ　*/


header {
	z-index: 200;
	width: 100%;
	background: rgba(0,0,0,0.1);
	margin: 0;
	padding:0;
	position: fixed;
}

.inner{
	max-width: 100%;
	margin: 0 auto ;
	}
	
#navigation ul {
	display: -webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;
	-webkit-flex-direction:row;/*--- safari（PC）用 ---*/
    flex-direction:row;
    -webkit-flex-wrap:nowrap;/*--- safari（PC）用 ---*/
    flex-wrap:nowrap;
	justify-content: center;
	}
	
#navigation li {
	list-style: none;
	margin-right: 1%;
	text-align: center;
	font-family: 'Josefin Slab', serif;
	font-weight: 700;
	
	}
	
#navigation li:last-child {
	margin-right: 0;
	}
	
#navigation li a {
	color: #fff;
	text-decoration: none;
	font-size: 1.3rem;
	text-shadow: 0px 1px 1px #666, 0px 1px 1px #666;
	display: block;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	padding: 0.1rem 0.2rem 0.1rem;
	background: rgba(0,91,172,0);
	border-radius: 6px;
	}
	
#navigation li a:hover {
	background: rgba(161,216,230,0.5);
	border-radius: 8px;
	text-shadow: 0 0 0, 0 0 0;
	}
		

#list li.first h2 {
	color: #ff3232;
	}
	
#list li.second h2,
#navigation li.second i {
	color: #1f6cf2;
	}
	
#list li.third h2,
#list li.third i {
	color: #ff9000;
	}

	
/*本体*/
html {
	
	background-color:rgba(214,243,249,1.00)
	}

body {
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	text-decoration:none;
	word-wrap : break-word;
    overflow-wrap : break-word;
     font-size:1em;
	 padding:0;
	 margin:0;
	 background-color:rgba(214,243,249,1.00)
}
	
h1.category{
	font-size:4em;
	font-family: 'Josefin Slab', serif;
	font-weight: 400;
	}
	
@media (max-width: 599px) {
.area {
	height:100%;
	width:100%;
	padding-left:5%;
	padding-right:5%;
	}
}
/* Tab以上に適用 */
@media (min-width: 600px) and (max-width: 999px) {
.area {
	height:100%;
	width:100%;
	margin:0 auto;
	padding-left:2rem;
	padding-right:2rem;
	}
}


/* pcだけに適用 */
@media (min-width: 1000px) {
.area {
	height:100%;
	width:1000px;
	margin:0 auto;
	padding-left:0;
	padding-right:0;
	}
}
	
.blanc {
	display:none;
	}
	
/* Phoneだけ適用 */
@media (max-width: 599px) {	
.p-blanc {
	display:none;
	}
}
/* Tab pc に適用 */
@media (min-width: 600px) {	
.tabpc-blanc {
	display:none;
	} 
}

/* pcだけに適用 */
@media (min-width: 1000px) {	
.pc-blanc {
	display:none;
	} 
}


/* 扉ページ　*/		
#home{
	height:100vh;
	width:100%;
	background-image:url(img/background-photo.jpg);
	background-size: cover;
	}
.title_logo {
	width:100%;
	height:auto;
	margin:0 auto;
	position:relative;
	top:45%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	}
@media (min-width: 600px) and (max-width: 768px){
	.title_logo {
	width:90%;
	top:45%;
	max-width:538px;
	}
}
@media (min-width: 769px) {
	.title_logo {
	width:70%;
	top:50%;
	}
}
.title_logo img{
	width:100%;
	height:auto;
}

.top-social-botton {
	font-size:2rem;
	position: absolute;
    bottom: 0;
	margin-right:auto;
	margin-left:auto;
	}




/* イントロダクション　*/	
#introduction{
	max-width:100%;
	height:auto;
	background:url(img/dot-y.png) repeat ;
	background-color:#ffe199;
	position:relative;
	padding-top:1rem;
	padding-bottom:3rem;
	color:#ad3737;
	
	

	}

.intro-imgbox {
	width:50%;
	height:50vh;
	background-image:url(img/kaku_ka.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	margin:0 auto;
	}
.intro-imgbox img{
	width:100%;
	height:auto;
	}




/* tab以上共通 */

@media (min-width: 600px){

#introduction .area {
	display: -webkit-flex; /* Safari */
	display: flex;
    -webkit-justify-content:space-between; /* Safari */
  　justify-content: space-between;
  -webkit-align-items: center; /* chrome */
  -webkit-box-align: center; /* safari */
  align-items: center;
    }
	
.intro-textbox {
	width:70%;
	height:100vh;
	min-height:55rem;
	}
		
.intro-text {
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.intro-imgbox {
	height:100vh;
	width:30%;
	margin:0;
	}


}


@media (min-width: 769px){
	.intro-textbox {
	min-height:37rem;
	}
}





/* ストーリー　*/	
#story {
	max-width:100%;
	height:auto;
	background:url(img/story-bg.gif) repeat;
	background-color:#d3609d;
	padding-top:1rem;
	padding-bottom:3rem;
	color:rgba(255,255,255,1.00);
	text-align:justify;
	}

#story .area {
	display: -webkit-flex; /* Safari */
	display: flex;
    -webkit-justify-content:space-between; /* Safari */
  　justify-content: space-between;
    }
	
.story-imgbox {
	width:35%;
	height:50vh;
	background-image:url(img/kaku_kb.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	}
	

	
.story-textbox{
	width:65%;
	text-shadow:rgba(248,85,136,1.0) 1px 1px 2px;
	}
	



@media (min-width: 600px){
#story .area {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content:space-between; /* Safari */
  　justify-content: space-between;
  -webkit-align-items: flex-end;; /* chrome */
  -webkit-box-align: end;; /* safari */
  align-items: flex-end;
	}
.story-textbox {
	width:75%;
	height:100vh;
	min-height:50rem;
	}
.story-text {
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}

.story-imgbox {
		height:100vh;
		width:20%;
		}


}	

@media (min-width: 769px){
	
	
	.story-textbox {
	min-height:35rem;
	}
	
	
}










	
/* スタッフ　*/	
#staff {
	min-height:100vh;
	height:auto;
	background:url(img/staff-bg.jpg) repeat;
	background-color:rgba(0,82,70,1.0);
	padding-top:1rem;
	padding-bottom:3rem;
	color:#ffffff;
	text-align:center;
	}
	
	
.staff-text p {
	line-height:3rem;
	
text-shadow:rgba(0,0,0,0.5) 1px 1px 2px;
}

/* TAB以上適用 */
@media (min-width: 769px){
	
#staff {
	padding-top:0;	
	padding-bottom:0;
}

#staff .area {
display: -webkit-flex; /* Safari */
	display: flex;
}
.staff-textbox {
	width:100%;
	height:100vh;
	min-height:45rem;
	}
.staff-text {
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}

.ogawabefire {
	padding-right:1rem;
	}

}





/* 原作者紹介　*/

#writers {
 	min-height:100vh;
	height:auto;
	background:url(img/writer-bg.jpg) repeat;
	background-color:#42210b;
	padding-top:1rem;
	padding-bottom:3rem;
	color:#ffffff;
	text-align:center;
	}

.writer-honbun p {
	text-align:justify;
	text-shadow:rgba(0,0,0,0.5) 1px 1px 2px;
	}

.center {
	text-align:center;
}

.boultext-komidashi {
	margin-top:0.5rem;
	color:rgba(245,220,81,1.00);
	}
.boultext {
	text-align:justify;
	font-size:0.75rem;
	
	}


/* TAB適用 */
@media (min-width: 600px){

}

/* TAB以上適用 */
@media (min-width: 769px){
	
#writers {
	padding-top:0;	
	padding-bottom:0;
}

#writers .area {
display: -webkit-flex; /* Safari */
	display: flex;
}
.writer-textbox {
	width:100%;
	height:100vh;
	min-height:48rem;
	}
.writer-text {
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}
.writer-katagaki {
	margin-bottom:2rem;
	}


}



/* 演出家挨拶　*/
#directors_comment {
	max-width:100%;
	height:auto;
	background:url(img/director-bg.jpg) repeat;
	background-color:#000000;
	padding-top:1rem;
	padding-bottom:0rem;
	color:#ffffff;
	}
.uyama-katagaki {
	text-align:center;
	margin-bottom:2rem;
	}
.uyama-katagaki h1 {
	line-height:4rem;
}
.uyama-honbun h3 {
	text-align:center;
	}
.uyama-honbun {
	text-align:justify;
	}
.uyama-imgbox {
	width:100%;
	height:65vh;
	background-image:url(img/staff_uyama.png);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:contain;
	}


	
/* TAB以上適用 */
@media (min-width: 600px){
	
#directors_comment {
	padding-top:0;	
	padding-bottom:0;
}
#directors_comment .area {
	display: -webkit-flex; /* Safari */
	display: flex;
  -webkit-align-items: flex-end;; /* chrome */
  -webkit-box-align: flex-end;; /* safari */
  align-items: flex-end;
	}
.uyama-textbox {
	width:65%;
	height:100vh;
	min-height:45rem;
	}
.uyama-text {
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}
	
.uyama-imgbox{
	height:100vh;
	width:35%;
	}


}

/* castとびら　*/

#cast{
	min-height:100vh;
	max-width:100%;
	background:url(img/cast-bg.gif) repeat;
	background-color:#9e005e;
	padding-top:1rem;
	padding-bottom:3rem;
	color:#ffffff;
	text-align:center;
	}


#cast h1 {
	position:relative;
	top:45vh;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}
	

	
/*　キャストページ　*/	
@media (max-width: 599px){
h1.mp-zero {
	margin:0;
	padding:1rem 0 0 0;
	line-height:3.5rem;
	}

.mp-zero {
	margin:0;
	padding:0;
	line-height:1.5rem;
	margin-bottom:1rem;
	}
}
@media (min-width: 769px){
.mp-zero {
	padding-bottom:1rem;
}
h1.mp-zero {
	padding-bottom:0;
}
}


/*　左テキスト 右画像　*/
#chikako_kaku, #nagiko_tono, #mao_ushiroda {
	width:100%;
	height:42rem;
	min-height:100vh;
	padding-top:1rem;
	color:#ffffff;
	position:relative;
	}
.kaku-textbox, .nagiko-textbox, .mao-textbox  {
	text-align:center;
	}
.kaku-text, .nagiko-text, .mao-text  {
text-shadow:rgba(0,0,0,0.5) 1px 1px 2px;
}
.kaku-imgbox, .nagiko-imgbox, .mao-imgbox  {
	position:absolute;
	bottom:0;
	width:90%;
	height:55%;
	max-height:auto;
	margin:0 auto;
}
.kaku-img, .nagiko-img, .mao-img {
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:contain;
}

/* TAB以上適用 */
@media (min-width: 769px){
#chikako_kaku, #nagiko_tono, #mao_ushiroda {
	padding-top:0;
}
	
#chikako_kaku .area, #nagiko_tono .area, #mao_ushiroda .area {
	position:relative;
	display: -webkit-flex; /* Safari */
	display: flex;
  -w-webkit-justify-content:space-between; /* Safari */
  　justify-content: space-between;
  -webkit-align-items: flex-end;; /* chrome */
  -webkit-box-align: end;; /* safari */
  align-items: flex-end;
}

.kaku-textbox, .nagiko-textbox, .mao-textbox  {
	width:auto;
	height:100vh;
	min-height:30rem;
	text-align:center;
	}

.kaku-text, .nagiko-text, .mao-text {
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}
.kaku-imgbox, .nagiko-imgbox, .mao-imgbox  {
	bottom:0;
	right:0;
	width:auto;
	height:55%;
	max-height:auto;
	margin:0 0 0 auto;
}
}

/*　右テキスト 左画像　*/
#junichi_inoue, #remi_hirota, #toshiyuki_nagashima {
	width:100%;
	height:42rem;
	min-height:100vh;
	padding-top:1rem;
	color:#ffffff;
	position:relative;
	
	}
.inoue-imgbox, .remi-imgbox, .nagashima-imgbox  {
	position:absolute;
	bottom:0;
	width:90%;
	height:55%;
	max-height:auto;
	margin:0 auto;
	z-index:0;
}
.inoue-img, .remi-img, .nagashima-img {
	max-width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:contain;
}
.inoue-textbox, .remi-textbox, .nagashima-textbox  {
	text-align:center;
	z-index:10;
	}

.inoue-text, .remi-text, .nagashima-text  {
text-shadow:rgba(0,0,0,0.5) 1px 1px 2px;
}



/* TAB以上適用 */
@media (min-width: 769px){
#junichi_inoue, #remi_hirota, #toshiyuki_nagashima {
	padding-top:0;
}
	
#junichi_inoue .area, #remi_hirota .area, #toshiyuki_nagashima .area {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content:space-between; /* Safari */
  　justify-content: space-between;
  -webkit-align-items: flex-end;; /* chrome */
  -webkit-box-align: end;; /* safari */
  align-items: flex-end;
}

.inoue-textbox, .remi-textbox, .nagashima-textbox  {
	width:auto;
	height:100vh;
	right:0;
	margin-left:auto;
	min-height:30rem;
	text-align:center;
	}

.inoue-text, .remi-text, .nagashima-text {
	position:relative;
	top:50%;
	right:0;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}
}



/*　賀来千香子　*/
#chikako_kaku {
	color:#ffffff;
	background:url(img/kaku-bg.gif) repeat;
    background-color:#ffc800;
}
.kaku-img {
	background-image:url(img/cas_kaku.png);
	}
@media (min-width: 769px){
.kaku-imgbox{
	height:100vh;
	width:53%;
}
}


/*　井上純一　*/
#junichi_inoue {
	color:#ffffff;
	background:url(img/inoue-bg.gif) repeat;
    background-color:#603813;
}
.inoue-img {
	background-image:url(img/cas_inoue.png);
	}
@media (min-width: 769px){
.inoue-imgbox{
	height:100vh;
	width:50%;
	max-width:550px;
}
}



/*　遠野なぎこ　*/
#nagiko_tono {
	color:#ffffff;
	background:url(img/nagiko-bg.gif) repeat;
    background-color:#b9639e;
}

.nagiko-img {
	background-image:url(img/cas_nagiko.png);
}
@media (min-width: 769px){
	.nagiko-imgbox {
	height:100vh;
	width:50%;
}
}

/*　広田礼美　*/
#remi_hirota {
	color:#ffffff;
	background:url(img/koi-bg.gif) repeat;
    background-color:#b3c341;
}

.remi-img {
	background-image:url(img/cas_koi.png);
}
@media (min-width: 769px){
.remi-imgbox {
	height:100vh;
	width:50%;
	max-width:550px;
}
}


/* 後田真欧　*/
#mao_ushiroda {
	color:#ffffff;
	background:url(img/yoshi-bg.gif) repeat;
    background-color:#7fbdb7;
}

.mao-img {
	background-image:url(img/cas_yoshi.png);
}

/*.mao-imgbox {
	width:80%;
}*/
@media (min-width: 769px){
.mao-imgbox {
	height:100vh;
	width:50%;
}
}


/*　永島敏行　*/
#toshiyuki_nagashima {
	background:url(img/nagashima-bg.gif) repeat;
	background-color:#251e1c;
	color:#ffffff;
	}
.nagashima-img {
	
	background-image:url(img/cas_nagashima.png);
}
@media (min-width: 769px){
.nagashima-imgbox {
	height:100vh;
	width:50%;
	max-width:600px;
}
}
	



/*　インフォメーション＆チケット　*/
#info-ticket {
	min-height:100vh;
	height:100%;
	padding-top:1rem;
	padding-bottom:2rem;
	color:#318da4;
	font-size:0.8rem;
	text-align:center;
	}

#info-ticket p {
	font-size:1rem;
}

.kaiki {
	font-weight:lighter;
	font-size:1.5rem;
	color:#318da4;
	margin:0;
	padding:0;
	}

.kaiki small {
	font-weight:bold;
	font-size:1.2rem;
	color:#318da4;
	margin:0;
	padding:0;
	}

.nitteihyo {
margin: 0 auto;	
}



/* 　phone用スケジュール、バリアフリーimgの調整 */
.schedule-box img{
	width:90%;
	height:auto;
}

.bfcoment-box img{
	width:90%;
	height:auto;
}

/* TAB以上適用 */
@media (min-width: 600px){	

.schedule-box img{
	width:50%;
	height:auto;
}

.bfcoment-box img{
	width:80%;
	height:auto;
}


}


.coronabox {
	margin: 0 auto;
	padding-top: 1rem;
	width: 90%;
	background-color:rgba(255,251,217,1.00)
	}

.coronabox h3 {
	padding: 0 1.5rem;
}
.coronaex {
	padding: 1em 1em 1em 2em;
	/*text-indent:-1em;*/
	text-align: left;
	
}


.coronabox li {
	margin-left: 1rem;
}

.syomei {
	text-align: right;
	margin-right: 1.5rem;
}



.shita-1em {
margin-bottom: -1em;	
}
	
tr:nth-child(even){
    background:#F2F2F2;
}
th{
    background:#222222;
    color:white;
}
th:nth-child(odd){
    background:#444444;
}
th,td{
    padding:5px;
    font-size:small;	
}
td{
 text-align: left;	
}


.koma {
	width:24%;
	font-size:1em;
	}

#info-ticket h3 {
	font-size:1.2rem;
	margin-top:2em;
	color:#318da4;
	}
.hoshitori {
	width:100%;
	
	display:-webkit-box;/* ios5,6 */
	display:flex;
	-webkit-justify-content: center; /* Safari */
	-webkit-box-pack:center; /* ios5,6 */
   justify-content: center;
   -webkit-flex-grow: 0; /* Safari */
  flex-grow:         0;
	}
.hoshitori h4 {
	color:#ffffff;
	background-color:#318da4;
	margin:5px 1px 0;
	padding:0 0 0 0.6em;
	}
.hoshitori h5 {
	background-color:#99dcdf;
	margin:2px 1px 5px;
	padding:0;
	white-space: nowrap;
	}

.social-line {
	border:solid 1px #318da4;
	margin-top:1rem;
	}
.social-botton {
	font-weight:bold;
	
	}
.social-botton i {
	font-size:1.3rem;
	margin-right:0.3rem;
}


	
/* TAB以上適用 */
@media (min-width: 600px){	
#info-ticket {
	font-size:1rem;
	padding-bottom:0;
}

#info-ticket .area {
}

.ticket-textbox{
	display:-webkit-box;/* ios5,6 */
	display: -webkit-flex; /* Safari */
	display:-ms-flexbox;/* ie10 */
	display: flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content: center;
	-webkit-box-align: center;/* Safari */
	-ms-flex-align: center;/* ie10 */
	align-items: center;
	height: 100vh;
	min-height:60rem;
}


.koma {
	width:24%;
	font-size:1.5vw;
	min-width:62px;
	}

}



.social-botton {
	font-size:1.3rem;
	font-weight:bold;
	
	}
.social-botton i {
	font-size:2rem;
	margin-right:0.3rem;
}
	
@media (min-width: 1000px){	
.ticket-textbox {
	min-height:38rem;
	
}
.koma {
	width:12%;
	font-size:1rem;
	min-width:62px;
	}
}

/*　トップボタン */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
	z-index:10;
}
#page-top a {
    background: rgba(161,216,230,0.5);
    text-decoration: none;
    color: #fff;
    width: 4.5rem;
    padding: 1rem 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background:rgba(161,216,230,0.8);
}