@charset "UTF-8";
/* CSS Document */

/* パーツの基本設定 */
body {
    -webkit-text-size-adjust: 100%;
    margin: 0;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Arial, Helvetica,"sans-serif";
    background-color:  #FFDC00;
}

/* 基本 （pageと書かれているものは全体の設定）*/
.page *{
    
}

.page-head img{
    width: 200px;
    vertical-align:bottom;
}

/* グリッド */
.page{
    display : grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* ヘッダー */
.page-head{
    grid-column: 1;
    grid-row: 1;
	position: fixed;
	z-index:100;
	width: 100%;
	top:0;
    padding: 4px 0;
    background-color: #fff;
    text-align:center;
}
.page-head a img{
	margin-top: 4px;
}

/* メインコンテンツ */
.page-main{
    grid-column: 1;
    grid-row: 2;
	padding-top: 46px;
}

/*ナビゲーション */
.page-nav{
    grid-column: 1;
    grid-row: 2;
    z-index: 110;
    background-color: rgba(240,240,240,0.95);
    display: none;
}

.open .page-nav{
    display: block;
	position: fixed;
	width:100%;
	height:100%;
}


.page-nav ul {
    margin: 0;
    padding-top: 20px;
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
    list-style : none;
}

.page-nav a {
    display: block;
    margin: 30px;
    border-bottom: solid 1px #aaa;
    color: #666;
    font-size : 20px;
    text-decoration: none;
}

/* ナビゲーションメニュー内の開閉ボタン */
.page-btn,
.page-btn-close {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
	position: fixed;
    padding: 12px;
    border: none;
    background-color: transparent;
    color: #666;
    font-size: 28px;
    cursor: pointer;
	z-index: 200;
}

.page-btn-close{
    display: none;
}

.open .page-btn {
    display: none;
}

.open .page-btn-close{
    display: block;
}

/* フッター */
.page-foot {
    grid-column: 1;
    grid-row: 3;

    padding: 20px 0;
    background-color: #fff;
    color: #666;
    text-align: center;
    font-size: 11px;
}
.page-foot a{
    text-decoration: none;
}
.page-foot p{
	margin-left: 30px;
	margin-right: 30px;
}

/* ##### 画面の横幅 1786ピクセル以上でのヘッダーのナビゲーションメニュー表示 ##### */
@media (min-width: 1786px){
    .page-head{
		position: fixed;
        text-align: left;
    }
	.page-head a img{
		margin-top: 0px;
		margin-left: 30px;
    	width: 250px;
    	vertical-align:bottom;
}
    .page-nav{
        grid-column: 1;
        grid-row: 1;
        margin-left:260px;
        margin-top:14px;
        background-color: rgba(240,240,240,0.0);
        display: inline;
}
    .page-nav ul {
        margin: 0;
        padding : 0;
        list-style : none;
		position: fixed;
    }
    .page-nav ul li{
       display: inline; 
    }    

    .page-nav a {
        display: inline;
        color: #666;
        border-bottom:none;
        font-size : 16px;
        font-weight: bold;
        text-decoration: none;
    }
    .page-nav a:hover{
        color: #AB4B8A;
    }
    .page-btn,
    .page-btn-close{
        display: none;
    }
	.page-main{
		padding-top: 30px;
	}
    
}


/* 基本 */
.post * {
    margin: 0;
}

.post img {
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* グリッド 768ピクセル以上 */
.post {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-tenmplate-rows: repeat(16, 1fr);
    grid-column-gap: 30px;
    padding:0 30px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",Arial, Helvetica, "sans-serif";
    font-size: 16px;
}

/* billboard イメージ  */
.post-billboard-img01{
	grid-column: 1/-1;
	grid-row: 1;
	z-index: 0;
    margin-left: -30px;
    margin-right: -30px;
}
.post-billboard-img01　img {
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    object-fit: cover;
}
.s-size {
    display:none;
}
.billboard-h1{
	display: none;
}


/* ナビゲーションボタン */
.post-nav{
	grid-column: 1/-1;
	grid-row: auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-tenmplate-rows: repeat(6, 1fr);
	grid-column-gap: 30px;
}

.post-nav-btn01{
	grid-column: 1/4;
	grid-row: 1;
	margin-top: 30px;
	
}
.post-nav-btn02{
	grid-column: 4/-1;
	grid-row: 1;
	margin-top: 30px;
}
.post-nav-btn03{
	grid-column: 1/4;
	grid-row: 2;
	margin-top: 30px;
}
.post-nav-btn04{
	grid-column: 4/-1;
	grid-row: 2;
	margin-top: 30px;
}

/* 動画コンテンツ */
.post-movie{
	grid-column: 1/-1;
	grid-row: 4;
}


/* コンテンツ */
.post-contents{
	grid-column: 1/-1;
	grid-row: 5;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-tenmplate-rows: repeat(6, 1fr);
	grid-column-gap: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: #fff;
	
}

h2.contents-header{
	grid-column: 1/-1;
	grid-row: auto;
	background-color: #EC6826;
	padding: 10px;
	color: #fff;
}
h2.contents-header-gala{
	grid-column: 1/-1;
	grid-row: auto;
	background-color: #FF739F;
	padding: 10px;
	color: #fff;
}
h2.contents-header-organ{
	grid-column: 1/-1;
	grid-row: auto;
	background-color: #00B5EE;
	padding: 10px;
	color: #fff;
}
h2.contents-header-gallery{
	grid-column: 1/-1;
	grid-row: auto;
	background-color: #49B23E;
	padding: 10px;
	color: #fff;
}
h2.contents-header-mini{
	grid-column: 1/-1;
	grid-row: auto;
	background-color: #FF8C2C;
	padding: 10px;
	color: #fff;
}

/* gala.html organ.html gallery.html mini.html h2以下のコンテンツ */
.post-main-contens{
	grid-column: 1/-1;
	grid-row: auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-tenmplate-rows: repeat(6, 1fr);
	grid-column-gap: 30px;
	padding: 20px;
}
.contents-header3{
	grid-column: 1/-1;
	grid-row :auto;
	margin-bottom: 20px;
}

.contents-header4{
	grid-column: 1/-1;
	grid-row: auto;
	margin-top: 20px;

}

.contents-header5{
	grid-column: 1/-1;
	grid-row: auto;
	font-size: 1em;
	margin-bottom: 20px;
	border-bottom: solid 1px #000;
	margin-top: 30px;
}
.contents-header5-program{
	grid-column: 1/-1;
	grid-row: auto;
	font-size: 1em;
	border-bottom: solid 1px #000;
	margin-top: 30px;
}
.contents-header5-reratedevent{
	grid-column: 1/-1;
	grid-row: auto;
	font-size: 1em;
	color: #FF6699;
	border-bottom: solid 1px #FF6699;
	margin-top: 30px;
}
.contents-header5-workshop{
	grid-column: 1/-1;
	grid-row: auto;
	font-size: 1em;
	color: #49B23E;
	border-bottom: solid 1px #49B23E;
	margin-top: 30px;
}

.contents-header6{
	grid-column: 1/-1;
	grid-row: auto;
	font-size: 1em;
	margin-top: 20px;
	margin-bottom: 20px;
}

.cast{
	grid-column: 1/-1;
	grid-row: auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-tenmplate-rows: repeat(6, 1fr);
}

p{
	grid-column: 1/-1;
	grid-row: auto;
	margin: 20px;
}
p.seat{
	margin-top: 20px;
	font-weight: bold;
}

table.pricelist{
	grid-column: 1/-1;
	grid-row: auto;
	width: 100%;	
	margin-top: 20px;
	margin-bottom: 20px;
}
.pricelist td{
	background-color: #EBEBEB;
	border: none;
	padding: 10px;
}
.kind{
	font-weight: bold;
}
.price{
	text-align: end;
}

table.ticket-reservation{
	grid-column: 1/-1;
	grid-row: auto;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}
.ticket-reservation th{
	width: 15%;
	background-color:#ccc;
	border: none;
	padding: 10px;
	text-align: start;
}
.ticket-reservation td{
	background-color: #EBEBEB;
	padding: 10px;
}


.cast01{
	grid-column: 1/3;
	grid-row: 14;
}
.cast02{
	grid-column: 3/5;
	grid-row: 14;
}
.cast03{
	grid-column: 5/-1;
	grid-row: 14;
}
.cast04{
	grid-column: 1/3;
	grid-row: 16;
}
.cast05{
	grid-column: 3/5;
	grid-row: 16;
}
.cast06{
	grid-column: 5/-1;
	grid-row: 16;
}
.cast07{
	grid-column: 1/-1;
	grid-row: 18;
	margin-top: 20px;
}

.p-cast01{
	grid-column: 1/3;
	grid-row: 15;
	text-align:center;
}
.p-cast02{
	grid-column: 3/5;
	grid-row: 15;
	text-align:center;
}
.p-cast03{
	grid-column: 5/-1;
	grid-row: 15;
	text-align:center;
}
.p-cast04{
	grid-column: 1/3;
	grid-row: 17;
	text-align:center;
}
.p-cast05{
	grid-column: 3/5;
	grid-row: 17;
	text-align:center;
}
.p-cast06{
	grid-column: 5/-1;
	grid-row: 17;
	text-align:center;
}
.p-cast07{
	grid-column: 1/-1;
	grid-row: 19;
}

table.playlist{
	grid-column: 1/-1;
	grid-row: auto;
	width: 100%;	
	margin-top: 20px;
	margin-bottom: 20px;
}
.playlist td{
	background-color: #EBEBEB;
	border: none;
	padding: 10px;
}

.uptostage{
	grid-column: 1/-1;
	grid-row: auto;
}


.signlng{
	grid-column: 1/-1;
	grid-row: auto;
	margin: 30px;
	background-color: #E6E6E6;
	border-radius: 8px;
	padding: 20px;
}

.multilng{
	grid-column: 1/-1;
	grid-row: auto;
	margin: 30px;
	background-color: #E6E6E6;
	border-radius: 8px;
	padding: 20px;
}
.baby{
	grid-column: 1/-1;
	grid-row: auto;
	margin: 30px;
	background-color: #E6E6E6;
	border-radius: 8px;
	padding: 20px;
}


.signling-icon{
	width: 20%;
	margin-bottom: 20px;
}

.multiling-icon{
	width: 20%;
	margin-bottom: 20px;
}

.baby-icon{
	width: 20%;
	margin-bottom: 20px;
}

h3{
	padding-left: 20px;
}
h3.contents-header3{
	margin-left: -20px;
}

ul.sign{
	list-style-type : none;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Topページのサイン */
ul.sign li{
	display: inline;
}

li.free{
	margin-left: -20px;
	margin-right: 20px;
	padding: 6px;
	background-color: #22AC38;
	color: #fff;
	border-radius: 4px;
}

li.recep{
	margin-left: -10px;
	margin-right: 20px;
	padding: 6px;
	background-color: #00A0E9;
	color: #fff;
	border-radius: 4px;
}

li.notfree{
	margin-left: -20px;
	margin-right: 20px;
	padding: 6px;
	background-color: #E62E8B;
	color: #fff;
	border-radius: 4px;
}

li.advanceapp{
	margin-left: -10px;
	margin-right: 20px;
	padding: 6px;
	background-color: #FF3827;
	color: #fff;
	border-radius: 4px;	
}

.signlng p{
	padding-left: 20px;
}
.multilng p{
	padding-left: 20px;
}
.baby p{
	padding-left: 20px;
}

/* ガラコンサート　オルガン　ギャラリー ミニミニコンサート サイン　*/
ul.contents-sign{
	grid-column: 1/-1;
	grid-row: auto;
	list-style-type: none;
	margin-top: 20px;
	margin-bottom: 20px;
}
ul.contents-sign li{
	display: inline;
}
li.age4plus{
	margin-left: -10px;
	margin-right: 20px;
	padding: 6px;
	background-color: #0072D3;
	color: #fff;
	border-radius: 4px;
}
li.age0plus{
	margin-left: -10px;
	margin-right: 20px;
	padding: 6px;
	background-color: #FF7383;
	color: #fff;
	border-radius: 4px;
}
li.noreservation{
	margin-left: -10px;
	margin-right: 20px;
	padding: 6px;
	background-color: #007D62;
	color: #fff;
	border-radius: 4px;
}
li.ticketrequired{
	margin-left: -10px;
	margin-right: 20px;
	padding: 6px;
	background-color: #7974B5;
	color: #fff;
	border-radius: 4px;	
}
.services-icon{
	grid-column: 1/-1;
	grid-row: auto;
}
.sign-signling-icon img{
	width: 15%;
	margin-left: 20px;
}
.sign-multiling-icon img{
	width: 15%;
	margin-left: 20px;
}


.organ-photo{
	grid-column: 1/-1;
	grid-row: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* ##### 画面の横幅1602ピクセル以上 1602ピクセル以上にpostの領域を拡大しない　##### */
@media (min-width: 1602px){
    .post{
        width: 1602px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: boder-box;
        margin: auto;
        font-size: 20px;
    }
}

/* ##### 画面の横幅1000-1601ピクセル ##### フォントサイズの調整　*/
@media (min-width: 1000px) and (max-width: 1601px){
    .post{
        font-size : calc(14px + 4 * (100vw - 1000px) / 834);
    }

}

/* ##### 画面の横幅768-999ピクセル フォントサイズの調整と応募フォームボタンのグリッド表示位置・サイズ調整 ##### */
@media (min-width: 768px) and (max-width: 999px){
    .post{
        font-size : calc(12px + 4 * (100vw - 768px) / 232);
    }	
}


/* ##### 画面の横幅767ピクセル以下 ##### スマートフォン用の各種設定 */
@media (max-width: 767px){
	/* スマートフォン用 グリッド設定とパッディングの設定 */
    .post {
        grid-template-columns: none;
        grid-template-rows: none;
        grid-row-gap: 20px;
        padding: 20px;
        font-size : 14.4px;
    }
    
    .post > *,
    .post::after {
        grid-column: auto;
        grid-row: auto;
    }
	
	.post-nav{
		grid-template-columns: none;
        grid-template-rows: none;
	}
	
	.post-nav > *,
	.post-nav::after {
		grid-column: auto;
        grid-row: auto;
	}
	
	.post-contents{
		grid-template-columns: none;
        grid-template-rows: none;			
	}
	
	.post-contents > *,
	.post-contents::after {
		grid-column: auto;
        grid-row: auto;		
	}
	.post-main-contens{
	grid-column: 1/-1;
	grid-row: auto;
	display: grid;
	grid-template-columns: none;
	grid-tenmplate-rows: none;
	grid-column-gap: 30px;
	padding: 20px;
}
	
	
	/* スマートフォン用 ビルボード（ヒーロー）画像のグリッド表示位置とマージンなどの設定 */
	.post-billboard-img01{
		grid-column:1/-1;
		grid-row: 1/1;
		z-index: 0;
		margin-top: -20px;
		margin-bottom: 20px;
		margin-left: -20px;
        margin-right: -20px;
	}
	.l-size {
    display:none;
	}
	.s-size{
        display:block;
		
    }
	
	/* スマートフォン用 ビルボード（ヒーロー）画像がはみ出さないようにするための設定 */
	.post-billboard-img01 img{
		-moz-box-sizing: border-box;
    	box-sizing: border-box;
		width: 100%;

	}
	
	
	/*　コンテンツ */
.contents-header5-program{
	grid-column: 1/-1;
	grid-row: auto;

}

.cast{
	grid-column: 1/-1;
	grid-row: auto;
	display: grid;
	grid-template-columns: none;
	grid-tenmplate-rows: none;
}	
.cast01{
	grid-column: auto;
	grid-row: auto;
}
.cast02{
	grid-column: auto;
	grid-row: auto;
}
.cast03{
	grid-column: auto;
	grid-row: auto;
}
.cast04{
	grid-column: auto;
	grid-row: auto;
}
.cast05{
	grid-column: auto;
	grid-row: auto;
}
.cast06{
	grid-column: auto;
	grid-row: auto;
}
.cast07{
	grid-column: auto;
	grid-row: auto;
	margin-top: 20px;
}

.p-cast01{
	grid-column: auto;
	grid-row: auto;
	text-align:center;
}
.p-cast02{
	grid-column: auto;
	grid-row: auto;
	text-align:center;
}
.p-cast03{
	grid-column: auto;
	grid-row: auto;
	text-align:center;
}
.p-cast04{
	grid-column: auto;
	grid-row: auto;
	text-align:center;
}
.p-cast05{
	grid-column: auto;
	grid-row: auto;
	text-align:center;
}
.p-cast06{
	grid-column: auto;
	grid-row: auto;
	text-align:center;
}
.p-cast07{
	grid-column: auto;
	grid-row: auto;
}
	
	/* 手話通訳 他言語スタッフ 託児サービス 画像 */
	.signling-icon{
		width: 40%;
		margin-bottom: 20px;
	}

	.multiling-icon{
		width: 40%;
		margin-bottom: 20px;
	}

	.baby-icon{
		width: 40%;
		margin-bottom: 20px;
	}
	
	/*　サイン（無料　事前申込 当日受付など　*/
	ul.sign li{
	display: inline-block;
}
	
	
	li.free{
	margin-left: -20px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 6px;
	background-color: #22AC38;
	color: #fff;
	border-radius: 4px;
	font-size: 0.7em;
}

li.recep{
	margin-left: -20px;
	margin-right: 20px;
	padding: 6px;
	background-color: #00A0E9;
	color: #fff;
	border-radius: 4px;
	font-size: 0.7em;
}

li.notfree{
	margin-left: -20px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 6px;
	background-color: #E62E8B;
	color: #fff;
	border-radius: 4px;
	font-size: 0.7em;
}

li.advanceapp{
	margin-left: -20px;
	margin-right: 20px;
	padding: 6px;
	background-color: #FF3827;
	color: #fff;
	border-radius: 4px;
	font-size: 0.7em;
}
	
	ul.contents-sign li{
		display: inline-block;
	}
	li.age4plus{
		margin-left: -20px;
		margin-right: 20px;
		padding: 6px;
		background-color: #0072D3;
		color: #fff;
		border-radius: 4px;
		font-size: 0.7em;		
	}
		li.age0plus{
		margin-left: -20px;
		margin-right: 20px;
		padding: 6px;
		background-color: #FF7383;
		color: #fff;
		border-radius: 4px;
		font-size: 0.7em;		
	}
	li.noreservation{
		margin-left: -20px;
		margin-right: 20px;
		padding: 6px;
		background-color: #007D62;
		color: #fff;
		border-radius: 4px;
		font-size: 0.7em;		
	}
	li.ticketrequired{
		margin-left: -20px;
		margin-right: 20px;
		padding: 6px;
		background-color: #7974B5;
		color: #fff;
		border-radius: 4px;
		font-size: 0.7em;		
	}
	
	.sign-signling-icon img{
		width: 40%;
		margin-left: 20px;
	}
	.sign-multiling-icon img{
		width: 40%;
		margin-left: 20px;
	}
	
	.pricelist td.kind{
		font-size: 0.9em;
	}

	.ticket-reservation th, 
	.ticket-reservation td{
		display: block;
		text-align: start;
		width: auto;
		font-size: 0.9em;
	}
	.ticket-reservation td{
		padding: 10px;
	}

	   .end td:end-child{
        width: 100%;
    }
	
	.playlist td{
		display: block;
		text-align: start;
		font-size: 0.9em;
	}
}