/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*vegas.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css");



/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/

}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family:"Noto Sans JP", serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	line-height: 2;		行間
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
	text-decoration: none;
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}



/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 1920px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
}



/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	/*padding: 3vw;*/	/*コンテンツ内の余白*/
}

/*コンテンツ内のulとol*/
#contents ul,#contents ol {
	margin-left: 2rem;
}



/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding:0 1rem;	/*上下、左右へのヘッダー内の余白*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	background: #fff;				/*背景色*/
/*	position: fixed;
	width: 100%;
	z-index: 9999;
	filter: drop-shadow(0 0.3px 10px #9c9c9c);*/
}

.header-top{
	display: flex;
	justify-content: space-between;
	height: 60px;
	position: relative;
}

header img{
	vertical-align: baseline;
}



/*ロゴスペース*/
.header-left{
	margin-left: 20px;
}
#logo  {
	display: block;
	max-width: 180px;
	margin: 0;
}

.header-left p{
	font-size: 1.2rem;
	font-weight: bold;
	color: 	#5896c4;
	margin: 0;
}

	

	@media screen and (min-width:900px){
		header{
			position: fixed;
			width: 100%;
			z-index: 9999;
		}
}

@media screen and (max-width:1280px){
	header{
		padding: 0;
	}

	
	.header-left p {
		font-size: 16px;
	}
	
	.large a{
		margin-left: 20px!important;
	}
	
	.header-tel{
		font-size: 21px;
	}

	header img{
		max-width: 150px;
	}
	
	#header-right ul li{
		max-width: 100px;
	}

}


	@media screen and (max-width:900px) {
		#logo {
	max-width: 160px;	/*ロゴ画像サイズ*/
		}
/*		header{
			 position: initial;
			z-index: 0;
		}*/
		
	.header-top{
		height: 90px;
	}
	}

	/*画面幅600px以下の追加指定*/
	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	/*ヘッダーブロック*/
	header {
		flex-direction: column;	/*子要素を縦並びにする*/
		align-items: stretch;	/*デフォルトに戻す*/
		padding-right: 90px;	/*右側へのpaddingだけ上書き*/
	}	
	.header-left p{
		font-size: 12px;	
	}
		.header-left{
			margin: 0;
			
		}
		.header-left img{
			width: 65%;
		}
		
		.header-top{
			height: 60px;
		}
	}/*追加指定ここまで*/


/*ヘッダー右側のブロック*/
#header-right{
	display: flex;
	flex-direction: row-reverse;
}


/*友の会・チケット購入*/

#header-right ul{
	display: flex;
	list-style: none;
	margin-left: 1rem;
}

#header-right ul li{
	width: 150px;
	padding-right: 1px;
}

#header-right ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #00258e;
	height: 50px;
	font-weight: 500;
}
/*電話番号*/
.header-tel{
	font-size: 24px;
	font-weight: 600;
	color: #666;
	user-select: none;
}

.header-tel::before{
	font-family: "Font Awesome 6 Free";	/*Font Awesome Free版を使う指定*/
	content: "\f095";
}

/*多言語対応ボタン*/
.language-btn {
	border: 1px solid #00258e;
	color: #00258e;
	background: #fff;
	padding: 0 10px;
	height: 40px;
	margin: 5px 0 0 20px;
	
}



/*スクロールに合わせて出現*/
header.js_hide {
    transform: translateY(-100%);    
	transition: 0.5s;
}


.btn-green a{
	background: #6abaa4!important;
}


.large{
	display: flex;
	align-items: center;
}

.large a{
	margin-left: 20px;
}


@media screen and (max-width:900px) {
	#header-right {
		display: none;
	}
	
	.header-tel{
		padding-top: 20px;
	}
	
	.sh-logo{
		margin-top: 0;
	}

	
	.sh-logo img{
		max-width: 300px;
	}
	
	.header-tel::before{
		display: none;
	}
	

	
	.header-tel a::before{
		font-family: "Font Awesome 6 Free";	/*Font Awesome Free版を使う指定*/
		content: "\f095";
		padding-right: 10px;
	}

}



/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::after {
	font-family: "Font Awesome 6 Free";	/*Font Awesome Free版を使う指定*/
	content: "\f078";	/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;
	margin-left: 0.3em;	/*アイコンとテキストとの間に空けるスペース*/
	font-size: 14px;
	margin-bottom: 0.2em;
}



/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	padding: 0.5rem 0;	/*上下、左右へのメニュー内の余白*/ 
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;	/*横並びにする*/
	/*justify-content: space-between;*/
	border: none;
}
.large-screen #menubar ul {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	justify-content: flex-end;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
	/*flex: 1;*/			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
	text-align: center;	/*テキストをセンタリング*/
	padding-right: 30px;
    position: relative;
}
.large-screen #menubar li a {
	background: #fff;	/*背景色*/
	font-weight: 500;
	font-size: 1.2rem;
	padding-bottom: 2px;
	color: #666;

}
.large-screen #menubar ul li a:hover{
	color: #00258e;
	trasition: 0.5s;
}

.large-screen #menubar .nav-menu::after {
  background: #00258e;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.large-screen #menubar .nav-menu:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
 


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
	min-width: 220px;
	border: none;
	padding: 0;
}

.large-screen #menubar ul ul li a{
	font-size: 15px;
	text-align: left;
	padding-left: 0.5rem;
}

.large-screen #menubar ul ul li a:hover{
	background: #00258e;
	color: #fff;
	
}

/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;
	background: rgba(255,255,255,1);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
	font-size: 16px;
}

/*メニュー１個あたりの設定*/
.small-screen nav > ul > li {
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	padding: 0 2rem;		/*メニュー内の余白。上下、左右へ。*/
}

/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
	color: #333;
	
}

.small-screen .nav-menu{
	border-bottom: 2px solid #00258e;
	padding-left: 0;
	font-weight: bold;
	font-size: 18px;
}



.small-screen .sub-menu li a{
	font-weight: 400;
	font-size: 16px;
}

/*900px以下でのみ表示させるブロック*/
#menubar .sh {
	padding: 1rem 2rem 2rem;	/*上、左右、下へのブロック内の余白*/
}

.sh-logo p{
	margin: 0;
	color: #5896c4;
	font-size: 24px;
}



.sh-menu ul li a{
	color: #fff!important;
	background: #00258e;
	display: block;
	width: 50%;
	margin: 10px 0;
	font-size: 16px;
	text-align: center;
}

.sh-menu .sh-sns{
	display: flex;
	width: 30%;
	justify-content: space-around;
}

.sh-sns img{
	margin-right: 20px;
}

.sh-menu .language-btn{
	width: 30%;
	margin:10px 0;
	border: 2px solid #00258e;
	text-align: center;
	color: #00258e!important;
	padding: 0;
	padding-bottom: 3px;
	height: auto;
}

.small-screen a.ddmenu::after{
	font-size: 18px;
	color: #00258e;
}



/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 8px;			/*右からの配置場所指定*/
	top: 8px;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: rgba(0,37,142,1);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #00258e;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}



/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 12px;}
footer {
	font-size: 1rem;		/*文字サイズ。
	background: #eee;		/*背景色*/
	text-align: center;		/*内容をセンタリング*/
	background: #00258e;
	color: #fff;
}

.footer-box{
	padding-top: 20px;
}

/*リンクテキスト*/
.footer-box a {color:fff;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}

footer .logo-jp{
	font-size: 1.2rem;
	font-weight: bold;
}

footer ul {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

footer ul li{
	list-style: none;

}

footer ul li:last-of-type{
	border-right: none;
}

footer ul li a{
	color: #fff;
	font-size: 12px;
	position: relative;
	border-right: 1px solid #fff;
	padding: 0 10px;
}


.footer-banner img{
	width: 12%;
	margin-right: 20px;
}

.footer-banner img:last-of-type{
	padding: 0;
}

.banner-box{
	background: #DBD2D2;
	padding: 30px;

}

.banner-box img{
	width: 16%;
	margin-right: 20px;
}

footer .copyright{
	font-size: 10px;
}
@media screen and (max-width:600px) {
	footer ul {
		width: 100%;
		justify-content: center;
		margin: 0 auto;
	}


footer ul li a{
	font-size: 8px;
	border-right: none;

	}
	
	.footer-banner img{
	width: 30%;
	margin-right: 20px;
	}

	.banner-box img{
		width: 40%;
		margin-right: 20px;
	}
	
	footer .copyright{
		font-size: 8px;
	}

	}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,138,98,0.8);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/

/*スライドショー
---------------------------------------------------------------------------*/
.slide-parts * {margin: 0;padding: 0;}

/*スライドショー全体を囲むブロック*/
.slide7-parts {
	width: 100%;position: relative;
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
	line-height: 1.5;		/*行間を少し狭く*/
}

/*スライド１枚あたり*/
.slide7-parts .slide-parts {
	position: relative;
}

/*３枚の画像の共通設定*/
.slide7-parts .slide-parts {
	position: absolute;right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
}

/*１枚目画像（変更不要）*/
.slide7-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.slide7-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}

.slide7-parts .slide-parts video{
	    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}


/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.slide7-parts .slide-parts .text-parts {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 1rem;
	z-index: 10;
}

/*テキストブロックを左に配置させたい場合*/
.slide7-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}


/*テキストブロックをインラインにする為のブロック*/
.slide7-parts .slide-parts .text-parts .text-bg {
	display: inline-block;
	padding: 1rem 2rem;	/*上下に1文字分、左右に2文字分の余白をとる*/
	color: #fff;					/*文字色*/
	font-family: "Hina Mincho", serif;
	font-weight: lighter;
}

.text-bg h2:last-of-type{
	padding-left: 5vw;
	
}

	/*画面幅600px以下の追加指定*/
@media screen and (max-width:600px){
	.slide7-parts {
	margin-bottom: 30px;	/*ボックスの下に空けるスペース*/
	
}
}

	/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {

	/*p（説明テキスト部分）*/
	.slide7-parts .slide-parts .text-parts p {
		display: none;	/*画面が狭くなるので、説明文だけ非表示にする。*/
	}

	}/*追加指定ここまで*/


/*h2（大きな文字）*/
.slide7-parts .slide-parts .text-parts h2 {
	font-size: 5.5vw;	/*文字サイズ。１文字あたり画面幅の約4%。*/
	text-shadow: 1px 1px 3px #333;
	
}



/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.slide7-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.slide7-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide7-parts .slide-indicators {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: -40px;	/*ボタンの配置場所。0以上の数値にすれば画像の上に重なります。*/
	left: 0px;
}
/*１個あたり*/
.slide7-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.slide7-parts .indicator.active {
    background: #000;	/*アクティブ時のボタン色*/
}

	/*画面幅600px以下の追加指定*/
@media screen and (max-width:600px){
	.slide7-parts .indicator {
    width: 9px;
    height: 9px;
}
	
	.slide7-parts .slide-indicators {
	bottom: -25px;	/*ボタンの配置場所。0以上の数値にすれば画像の上に重なります。*/
}
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	/*margin: 2rem 3rem;*/	/*ブロックの外側（上下、左右）に空けるスペース*/
}

/*コンテンツ部分
---------------------------------------------------------------------------*/
/*背景色*/
.top-content{
	margin-top: 2rem;
	padding: 0 5rem 2rem 5rem;
}




/*top見出し*/
.top-title {
	font-size: 3rem;
	text-align: center;
	position: relative;
	color: #666;
	font-family: "Noto Serif JP", serif;
	font-weight: 400;
	color: #333;
}

.top-title::before {
	content: attr(data-en);
	display: block;
	color: #6abaa4;
	font-size: 18px;
}
.top-title::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 9px;
	height: 9px;
	background-color: #6abaa4;
	border-radius: 9px;
}


@media screen and (max-width:600px){
	.top-title{
		font-size: 28px;
		margin: 8px;
	}
	
	.top-title::before{
		font-size: 15px;
	}
	
	.top-title::after{
		width: 7px;
		height: 7px;
		border-radius: 7px;
		bottom: 0;
	}
}


/*ボタン*/
.top-button{
	display: block;
	color: #fff;
	font-size: 16px;
	background: #00258e;
	padding: 0.8rem 9rem;
	margin: 20px auto;
	border: none;
	font-family: "Noto Sans JP", serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

.top-button:hover{
	transition: 0.5s;
	filter: brightness(1.2);
}

.top-button a{
	color: #fff;
}

.top-button a:hover{
	letter-spacing: 0.2rem;
	transition: 0.5s;
}

@media screen and (max-width:600px){
	.top-button{
		padding:0.5rem 5rem;
	}
}





/*公演情報
---------------------------------------------------------------------------*/
.top-event{
	padding: 0 4rem 2rem 4rem;
	background: url("../images/SS_001.jpg") top center no-repeat;
	background-color:rgba(255,255,255,0.2);
	background-blend-mode:lighten;
	

}

.top-event .top-title{
	margin-top: 0;
}
.top-event .top-title span{
	color: #fff;
}

/*スライドショー全体を囲むブロック*/
.slide-thumbnail2-parts {
	overflow-x: hidden;
	padding-bottom: 50px;	/*下に空けるスペース。インジケーター分の確保です。*/
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
}

.img-parts{
	align-items: center;
}

/*リンクテキスト*/
.slide-thumbnail2-parts a {
	text-decoration: none;
	color: inherit;
	display: inline;
}

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.slide-thumbnail2-parts .img-parts > div {
	flex: 0 0 31.3%;			/*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
	max-width: 31.3%;			/*上記と同じ内容だが念の為追加*/
	margin: 0 1%;			/*上下、左右へのマージン*/
	padding: 0.5rem 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

.slide-box{
	position: relative;
}

.slide-box h4{
	font-size: 15px;
	margin: 0;
	margin-top: 0.5rem;
	line-height: 1.3rem;
	height: 4rem;
}

.slide-box p{
	margin: 0;
	font-size: 15px;
	height: 50px;
	margin-bottom: 30px;
}

.slide-btn{
	position: absolute;
	bottom: 10px;
	font-family: "Noto Sans JP", serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	padding: 0;
}



	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	
	/*2列配置に変更する*/
	.slide-thumbnail2-parts .img-parts > div {
		flex: 0 0 80%;
		max-width: 80%;
		margin: 0 10%;
	}
		
	.img-parts h4{
		line-height: 1.3rem;
		height: 4rem;
	}
		
		.top-event .top-button{
			margin: 10px auto;
		}
		
		.slide-thumbnail2-parts{
			padding-bottom: 40px;
		}
		



	}/*追加指定ここまで*/


/*画像たちを囲むブロック*/
.slide-thumbnail2-parts .img-parts {
	display: flex;
}

/*画像*/
.event-slide-img{
	display: flex;
	justify-content: center;
	aspect-ratio: 5/6;
	width: 80%;
	height: 100%;
	margin: 0 auto;

}

.event-slide-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.slide-thumbnail2-parts .img-parts img {
	object-fit: cover;

}

/*段落タグ(p)*/
.slide-thumbnail2-parts p {
	font-size: 16px;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間をデフォルトより狭く*/
	
}

/*イベントカルーセル内ボタン*/

.slide-btn{
	font-size: 18px;
	border: none;
	border-radius: 2px;
	color: #C4993B;
	font-weight: bold;
	background: #fff;
}

.slide-btn:hover{
	transition: 0.5s;
	filter: brightness(120%);
}

/*イベントカテゴリ*/
.classic,.stage,.geinou,.dance,.you-you-hall{
	background-color: #30A9DE;
	color: #fff;
	padding: 0 1rem;
	font-family:"Zen Kaku Gothic New", serif;
	margin-top: 0.5rem;
	font-size: 16px;
	font-weight: 400;
}

.stage{
	background-color: #F0A502;
}

.geinou{
	background-color: #16AA47;
}

.dance{
	background-color: #E53A50;
}

.you-you-hall{
	background-color: #00258e;
}
.event-tag{
	display: inline-block;
	font-size: 16px;
	color: #C4993B;
	font-weight: bold;
	border-left: solid 5px #C4993B;
	padding-left: 5px;
	line-height: 1.3!important;
	height: 3rem;
}

@media screen and (max-width:1320px){
	.event-tag{
		font-size: 14px;
	}
	
	.slide-btn{
		font-size: 14px;
	}
	
	.slide-thumbnail2-parts p {
	font-size: 14px;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間をデフォルトより狭く*/
	
}
}

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

	.slide-thumbnail2-parts .img-parts img {
	width: 100%;
	height: auto;
}
	
	.slide-thumbnail2-parts p {
	font-size: 14px;

}
	
	.event-tag{
		font-size: 16px;
	}
	

}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide-thumbnail2-parts .slide-indicators-parts {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;	/*下からのボタンの配置場所*/
	left: 0px;
}

/*１個あたり*/
.slide-thumbnail2-parts .indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #D3C6C6;	/*未アクティブ時のボタン色*/
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}

.slide-thumbnail2-parts .indicator.active {
	background: #00258e;	/*アクティブ時のボタン色*/
}

/*お知らせ
---------------------------------------------------------------------------*/
.top-news{
	background: #f5f2f0;
	padding: 0px 30px 30px 30px;
}

.top-news, .top-news .top-title {
	margin-top: 0;
}

/*-------------タブメニューー---------------------*/
.tab-btn {
        display: flex;
        flex-wrap: wrap;
    }

    .tab-btn .btn {
        flex-basis: 30%;
        text-align: center;
    }
    .tab-btn .btn a {
        display: block;
        position: relative;
        font-size: 1.1rem;
        padding: 0.5rem;
        text-decoration: none;
        line-height: 1.2;
        color: #181716;
        background-color: #e8e2df;
        cursor: pointer;
		border-radius: 10px 10px 0 0;
    }

    .tab-btn .btn a.is-active {
        background-color: #00258e;
		color: #fff;
    }


    .tab-contents-item {
        display: none;
        width: 100%;
        height: 200px;
        justify-content: center;
    }
    .tab-contents-item.is-active {
        display: flex;
        background-color: #fff;

    }
    .tab-contents-item>p {
        margin: auto;
        height: 40px;
        opacity: 0;
    }
    .tab-contents-item.is-active>p {
      animation:  fadeinAnime 2s forwards;
    }

    @keyframes fadeinAnime{
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
    }

@media screen and (max-width:600px) {
		.tab-btn {
			
		}
	
	    .tab-btn .btn a {
        font-size: 1rem;
		white-space: nowrap;
    }
}

/*-------------お知らせ詳細設定---------------*/
.news-box{
	width: 80%;
	margin: 0 auto;
}

#newsWrap #newsList {
	width: 70%;
	background: #fff;
}

#newsList li a{
	text-decoration: none;
	color: #333;
}

.catName{
	border: none;
	background: #f7803b;
	
}
@media screen and (max-width:900px) {
		.news-box{
	width: 100%;
	}
}

/*カレンダー
---------------------------------------------------------------------------*/
.top-info{
	background: #f5f2f0;

}
.top-info .top-title{
	padding-top: 2rem;
}

.top-calendar{
	width: 80%;
	margin: 0 auto;
	height: 900px;
}

.top-calendar .calendar{
	width: 100%;
/*	max-width: 400px;*/
	height: 850px;
	box-sizing: border-box;
	background: #fff;
	font-family: "Barlow", 
}

.top-calendar iframe{
		height: 850px;
	}

@media screen and (max-width:430px) {
	.top-calendar iframe{
		height: 350px;
	}
}


/*施設紹介
---------------------------------------------------------------------------*/

.top-product{
	position: relative;
}

/*parts_list_normal2
------------------------------------*/
/*１枚目の写真*/
.parts_list_normal2.image1-parts {
	background: url("../images/SS_004.jpg") no-repeat center center / cover;
}


/*ボックス１個あたり*/
.parts_list_normal2 {
	padding: 5vw;	/*ボックス内の余白。画面幅100%＝100vwです。*/
	position: relative;
	overflow-x: hidden;
	margin-bottom: 1vw;	/*下に空けるスペース。ボックス同士の隙間です。*/
}

/*マウスオン用のアニメーション*/
.parts_list_normal2::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.4);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.parts_list_normal2:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*テキストブロック*/
.parts_list_normal2 .text-parts {
	position: relative;z-index: 1;
	width: 80%;		/*幅*/
	height: 100%;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
		


	/*テキストブロック*/
	.parts_list_normal2 .text-parts {
		width: 70%;		/*幅*/
	}
		
		.parts_list_normal2 .image1-parts{
			height: 200px;
		}

	}/*追加指定ここまで*/


/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.parts_list_normal2 .text-parts.reverse-parts {
	margin-left: auto;
}

/*parts_list_normal2内のh3見出し*/
.parts_list_normal2 h3 {
	margin: 0;padding: 0;
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 2.5rem;		/*文字サイズを200%*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 1.2;		/*行間を狭くする*/
	font-family: "Noto Serif JP", serif;
	user-select: none;
}

/*parts_list_normal2内のh3見出し内の１文字目の大きな文字*/
.parts_list_normal2 h3 .large-parts {
	font-size: clamp(41px,7vw,96px);
	min-height: 0vw;
	font-family: "Noto Serif JP", serif;
}

.parts_list_normal2 h3 p{
	font-size: 2.5rem;
	padding-left: 15vw;
	margin-top: 0;
}

.parts_list_normal2 p{
	font-size: 1.1rem;

}

@media screen and (min-width:1700px){
	.parts_list_normal2 .text-parts {
		width: 60%;		/*幅*/
	}
}

@media screen and (max-width:1280px){	
	.parts_list_normal2 h3 p{
		padding: 0;
	}
}


@media screen and (max-width:600px){
	
	.top-content{
		padding: 0.5rem 1rem;
	}
	
	.parts_list_normal2 h3,.parts_list_normal2 h3 p{
		font-size: 1.6rem;
	}

}

/*見出しの右上にある英語の小さな文字*/
.parts_list_normal2 h3 span:not(.large-parts) {
	font-size: 1rem;	/*文字サイズを標準に戻す*/
	opacity: 0.5;		/*透明度50%*/
	position: absolute;
	right: 0px;	/*右からの配置場所*/
	top: 0px;	/*上からの配置場所*/
	font-family: "Noto Serif JP", serif;
}



/*ボタン
---------------------------------------------------------------------------*/
.parts_list_normal2 .btn-parts a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;		/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.parts_list_normal2 .btn-parts a:hover {
	letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}
.parts_list_normal2:hover .btn-parts a {
	background: rgba(106,186,164,0.9);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}



/*コンテンツページ共通設定
---------------------------------------------------------------------------*/
.contents-page{
	background: #fff;

}


.contents-container{
	background: #fff;
	width: 90%;
	max-width: 1200px;
	margin: 50px auto;
	padding: 2rem;
}

/*見出しH2*/
.contents-title-box{
	padding-bottom: 1rem;
	background: #f5f2f0;
	padding-top:116px;
}
.contents-title {
	font-size: 40px;
	text-align: center;
	position: relative;
	margin:0;
	background: #f5f2f0;
	padding-bottom: 1rem;
	font-family: "Noto Serif JP", serif;
}

.contents-title::before {
	content: attr(data-en);
	display: block;
	color: #6abaa4;
	font-size: 18px;
}
.contents-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 7px;
	height: 7px;
	background-color: #6abaa4;
	border-radius: 7px;
}

@media screen and (max-width:900px){
		.contents-title-box{
	padding-top:15px;
}
}

@media screen and (max-width:600px){
	.contents-container{
	width: 90%;
}
	.contents-title{
		font-size: 2rem;
	}
	
	.contents-title::before{
		font-size: 15px;
	}
}



/*見出しH３*/
.contents-page h3 {
	position: relative;
	font-size: 32px;
	border-bottom: solid 3px #9c9c9c; 
	font-family: "Noto Serif JP", serif;
	margin: 36px 0;
}

.contents-page h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #00258e;
  bottom: -3px;
  width: 20%;
}



/*見出しH4*/
.contents-page h4{
	margin: 1rem 0;
	position: relative;
	padding: 0 1rem;
	vertical-align: middle;
	text-decoration: none;
	font-size: 1.3rem;
	background: #f5f2f0;
	display: block;
	width: 100%;
	margin: 32px 0;
}


.contents-page h4::before{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	left: 4px;
	box-sizing: border-box;
	width: 6px;
	height: 6px;
	border: 6px solid transparent;
	border-left: 6px solid #00258e;
}

/*見出しｈ５*/
.contents-page h5{
	font-size: 18px;
	position: relative;
	display: block;
	width: 100%;
	text-decoration: none;
	margin: 1rem 0;
	border-bottom: 1px dotted #C4994B;
	padding-left: 0.6rem; 
}




/*アクセスページ個別設定
---------------------------------------------------------------------------*/


.page-menu ul{
	display: flex;
	margin: 30px 0;
	justify-content: center;
}

.page-menu li{
	background-color: #FFFFFF;
	margin-left: 2rem;
	width: 25%;
	list-style: none;
	border: 2px solid #00258e;
}

.page-menu li:first-of-type{
	margin: 0;
}

.page-menu li a{
		display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #00258e;
	font-weight: 600;
	font-size: 18px;
}

 
.page-menu li a:hover {
  background: #00258e;
  color: #fff;
}

.page-menu li img{
	width: 10%;
	margin-right: 0.5rem;
}

.page-menu i{
	margin-right: 0.5rem;
}


.access-container dt{
	font-size:18px;
	font-weight: 600;
	margin-top: 1rem;
}

.access-train dt:first-of-type{
	margin-top: 0;

}



@media screen and (max-width:1280px){
	.page-menu ul{
		flex-wrap: wrap;
	}
	
	.page-menu ul li{
		margin: 0 0 1rem 0;
		width: 40%;
	}
	
	.page-menu ul li:first-of-type{
		margin: 0 0 1rem 0;
	}
	
	.page-menu ul li:nth-child(even){
		margin-left: 1rem;
	}
	
	#access-map iframe{
		padding-bottom: 56.25%;
	}
}

@media screen and (max-width:600px){
	
	.access-container p, dd{
		font-size: 14px;
		
	}
	
	.page-menu a p{
		font-size: 16px;
	}
	
	.page-menu ul{
		flex-direction: column;
		align-items: center;
	}
	
	.page-menu ul li{
		width: 80%;
		font-size: 20px;
		
	}
	
	.page-menu ul li:nth-child(even){
		margin-left: 0;
	}
	
	.page-menu ul li img{
		width: 20%;
	}
	
	.page-menu li a{
		justify-content: flex-start;
		padding-left: 2rem;
	}
	
	
}

/*イベントページ個別設定
---------------------------------------------------------------------------*/
/*イベントカレンダー
-------------------------------------------------------------*/
.event-calendar{
	height: 900px;
}

.event-calendar .calendar{
	width: 80%;
	margin: 60px auto;
	border: 1px #777 solid;
	padding: 2rem 0;
}

.event-calendar .calendar td{
	text-align: center;
	height: 3.5rem;
}

.event-calendar iframe{
		height: 850px;
	}

@media screen and (max-width:430px) {
	.event-calendar-frame{
		height: 400px;
	}
	
	.event-calendar iframe{
		height: 350px;
	}
}




/*イベント一覧リスト
-------------------------------------------------------------*/
/*list-partsブロック全体を囲むブロック*/
.list-grid1-parts,.list-grid2-parts {
	display: grid;
	justify-items: center;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts,.list-grid2-parts .list-parts {
    display: grid;
	width: 80%;
	margin-bottom: 2rem;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-parts .list-parts *,
.list-grid2-parts .list-parts * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1-parts .list-parts p,
.list-grid2-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

.list-grid1-parts .list-parts h5{
	font-size: 1rem;
	border:none;
}

.list-grid1-parts .list-parts figure{
	max-width: 80%;
	display: flex;
	justify-content: center;
	aspect-ratio: 5/7;
	margin: 0 auto;

}


.list-grid1-parts .list-parts figure img {
	object-fit: cover;

}

.list-grid1-parts .list-parts .text-parts span{
	padding: 0 1rem;
}



/*list-grid1-parts
------------------------------------------------------------*/

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:1000px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	border: 1px solid #CCCCCC;
}

/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}


/*ボタン
---------------------------------------------------------------------------*/
.list-grid1-parts .event-btn{
	display: flex;
	justify-content: space-around;
}

.list-grid1-parts .event-btn-parts,.ticket-btn-parts{
	width: 45%;

}

.list-grid1-parts .event-btn-parts a {
	display: block;
	text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: #E7E0DC;		/*背景色*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
	border-radius: 20px;
	border: 2px solid #E7E0DC;
	color: #777;
}

.list-grid1-parts .ticket-btn-parts a {
	display: block;
	text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: #00258e;		/*背景色*/
	border: 1px solid #00258e;	/*枠線の幅、線種、色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
	color: #fff;
	border-radius: 20px;
}

/*イベント記事ページ個別設定
---------------------------------------------------------------------------*/
.news-tag{
	display: flex;
}

.event-newsbox{
	max-width: 1000px;
	width: 80%;
	margin: 30px auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	
}

.event-newsbox figure{
	margin-bottom: 4rem;
}

.event-newsbox table{
	display: flex;
	flex-flow: column;
	align-items: center;
}


.event-newsbox caption{
  font-size: 1.4rem;
  position: relative;
  display: inline-block;
  padding: 20px 45px;
}
.event-newsbox caption:before, .event-newsbox caption:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: #00258e;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.event-newsbox caption:before {
  left:0;
}
.event-newsbox caption:after {
  right: 0;
}

.event-newsbox tr{
	margin-top: 2rem;

}

.event-newsbox th{
	vertical-align: top;
	text-align: left;
	padding: 1rem;
	border: 1px solid #C9C9C9;
	background: #f5f2f0;
}

.event-newsbox td{
	padding-left: 1.5rem;
	padding: 1rem;
	border: 1px solid #C9C9C9;
}

.event-news-container span{
	display: inline-block;
	text-align: center;
	line-height: 1.9;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 1rem;		/*上下、左右へのブロック内の余白*/
	width: 8rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: #ffefca;		/*背景色*/
	color:#777;				/*文字色*/
}

@media (max-width: 600px) {
	
	.contents-page h3 {
	position: relative;
	padding-bottom: 0.7rem;
	font-size: 24px;
		line-height: 2rem;
}
	
  .event-newsbox th, .event-newsbox td {
    display: inline-block;
    width: 100%;
    float: left;
  }


}


/*チケットページ個別設定
---------------------------------------------------------------------------*/
.ticket-table{
	margin: 1rem auto;
	width: 80%;
}
.ticket-table th{
	padding: 0.5rem 1rem;
	background: #f5f2f0;
	border:1px solid #9c9c9c;
	text-align: center;
	font-size: 1rem;
}

.ticket-table td{
	border: 1px solid #9c9c9c;
	padding: 1rem;
	max-width: 550px;
	text-align: left;
	font-size: 1rem;
}

.ticket-banner img{
	display: block;
	margin: 0 auto;
}

@media (max-width: 600px){
		.ticket-table-area {
			width: 90%;
			margin: 0 auto;
			overflow-x: scroll;
		}

		.ticket-table {
			width: 100%;
			min-width: 900px;
			margin: 5em auto 2em;
		}
}


/*友の会個別設定　テーブル共通設定
---------------------------------------------------------------------------*/
.main-table{
	margin: 2rem 0;
}

.main-table th{
	background: #f5f2f0;
	border: 1px solid #9c9c9c;
}
.main-table td{
	width: 70%;
	padding: 1rem;
	border: 1px solid #9c9c9c;
}

.main-table dt{
	font-weight: 800;
}

@media (max-width: 600px){
	  .main-table th, .main-table td {
    display: inline-block;
    width: 100%;
    float: left;
  }
	
}



/*施設案内　個別設定
---------------------------------------------------------------------------*/


/*ボタン*/
.facilities-box button{
	display: block;
	color: #fff;
	font-size: 1rem;
	background: #00258e;
	padding: 0.3rem 4rem;
	margin: 20px auto;
	border: none;
	font-family: "Noto Sans JP", serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

.facilities-box button:hover{
	filter: brightness(1.2);
	transition: 0.5s;
}

.facilities-box a{
	color: #fff;
}



@media screen and (max-width:600px){
	.facilities-box{
		padding:0.5rem 5rem;
		justify-content: center;
	}
	
}

/*施設リスト*/

/*共通*/

.facilities-box{
	display: block;
	display: flex;
	flex-wrap: wrap;
	padding: 24px 24px 0 24px;
}

.facilities-item{
	width: 50%;
	box-sizing: border-box;
	padding: 1.5rem;
}

.facilities-item figure img{
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.facilities-box figcaption{
	font-size: 1.5rem;
	text-align: center;
	color:#333;
	font-weight: 400;
}

.facilities-box figcaption a{
	color: #333;
}

.facilities-item figcaption{
  padding-bottom: 3px;
  position: relative;
}
.facilities-item figcaption::before {
  background:  #00258e;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
	margin-bottom: 5px;
}
.facilities-item figcaption:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}



/*施設概要*/
.facility-box{
	display: flex;
}

.facility-item{
	width: 50%;
}

.facility-box table th{
	text-align: left;
	padding-right: 2rem;
	font-size: 18px;
	line-height: 2.5rem;
	
}


/*会議室*/

.conference-item{
	width: 33.3%;
	padding:0 1.5rem 1.5rem 1.5rem;
	
}

.conference-item figure img{
	width: 100%;
	height: 200px;
	object-fit: cover;
}
.conference-item figcaption{
	font-size: 1.4rem;
}

.conference-item p{
	font-size: 0.9rem;
	line-height: 1.2rem;
}

/*その他施設*/
.others-item{
	width: 25%;
}

.others-item figure img{
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.others-item p{
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.others-item figcaption{
	font-size: 1.2rem;
}

.fa-link{
	color: #333!important;
	font-weight: bold;
	padding-right: 2rem;
}

.fa-link:hover{
	color: #00258e!important;
	transition: 0.5s;

}

.fa-link::before{
	display: none;
}

.facilities-box dt{
	font-weight: bold;
}

.facilities-box-item{
	padding-bottom: 20px;
}


@media screen and (max-width:1279px){
	.others-item{
		width: 33.3%;
		padding:0 1.5rem 1.5rem 1.5rem;
	}
	
	.facilities-box figcaption a{
		font-size: 15px;
	}
	
	.facilities-box figure img{
	width: 100%;
	height: 150px;
	object-fit: cover;
}
	

}

/*共通レスポンシブ*/
@media screen and (max-width:600px){
	.facilities-container{
		width: 100%;
		padding: 0;
	}
	
	.facilities-item{
	width: 50%;
	box-sizing: border-box;
	padding: 1rem;
}
	
	.facilities-item figure img{
	width: 100%;
	height: auto;
	object-fit: cover;
}
	.facilities-item figcaption{
		font-size: 1rem;
	}
	
	.facilities-item  p{
		font-size: 1rem;
		line-height: 1.2rem;
	}
	
	.facility-box{
		flex-direction: column;
		align-items: center;
	}
	
	.facilities-item{
		width: 90%;
	}
	
	.facility-box table th{
	font-size: 14px;
	line-height: 1.5rem;
	padding-right: 1rem;
}

}



/*施設個別ページ
---------------------------------------------------------------------------*/

/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
	margin-top: 2rem;
}


/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;				/*flexを使う指定*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	margin-bottom: 2rem;		/*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;		/*サムネイルの幅*/
	margin: 2px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

.hall-large-container{
	padding-top: 0;
}
.facilities-content-list tr th{
	padding: 0.5rem;
    background: #f5f2f0;
    border: 1px solid #9c9c9c;
    text-align: center;
    font-size: 1rem;

}
.facilities-content-list tr td{
	width: 80%;
	border: 1px solid #9c9c9c;
    padding: 1rem;;
    text-align: left;
    font-size: 1rem;
}

@media screen and (max-width:600px){
	.thumbnail-parts img {
	width: 50px;		/*サムネイルの幅*/
	margin: 2px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
}


/*開閉ブロック
---------------------------------------------------------------------------*/
/*質問*/
.faq-parts dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin: 1rem 0;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq-parts dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
    content: "\2b";		/*アイコンのコード*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
	color: #c16c26;			/*アイコンの色*/
	
}

/*回答*/
.faq-parts dd {
	padding: 5px 1rem 30px 3rem;		/*ボックス内の余白**/
}

/*openclose-partsを適用した要素のカーソル*/
.openclose-parts {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}



/*ホール料金表テーブル
---------------------------------------------------------------------------*/
.price-table{
	margin: 1rem auto;
	width: 80%;
}

.price-table caption{
	text-align: left;
}
.price-table th, .gakuya-table th{
	padding: 0.5rem;
	background: #f5f2f0;
	border:1px solid #9c9c9c;
	text-align: center;
	font-size: 1rem;
}

.price-table td , .gakuya-table td{
	border: 1px solid #9c9c9c;
	padding: 0.5rem;
	max-width: 550px;
	text-align: left;
	font-size: 1rem;
	text-align: center;
}

.price-table-area ol li{
	line-height: 2.5rem;
	width: 80%;
	margin: 0 auto;
}

.gakuya-table{
	width:50%;
}

.gakuya-box{
	display: flex;
	justify-content: space-around;
}

.gakuya-box img{
	width: 30%;
}
@media screen and (max-width:600px){
		.price-table-area table {
			width: auto;
			margin: 0 auto;
			overflow-x: scroll;
			margin-top: 30px;
		}


		.ticket-table {
			width: auto;
		}
	.price-table-area ol li{
	line-height: 2.5rem;
	width: 90%;
}
	.faq-parts dd{
		padding: 0;
	}
	.gakuya-box{
		flex-direction: column;
	}
	
	.gakuya-box img{
		width: 100%;
	}
	


}



/*会議室
---------------------------------------------------------------------------*/
.conference-container table{
	width: 70%;
	margin: 0 auto;
	border: #9c9c9c 1px solid;
}

.conference-container th{
	background: #f5f2f0;
	border: #9c9c9c 1px solid;
}

.conference-container td{
	border: 1px #9c9c9c solid;
	text-align: center;
}
.conference-box{
	display: flex;
}
.conference-box table{
	width: 50%;
}

.price-table-area p{
	text-align: center;
}

@media screen and (max-width:600px){
	.conference-box{
		flex-direction: column;
	}
	.conference-box table{
		width: 100%;
		margin-top: 1rem;
	}
	
	.conference-container table{
		width: 90%;
	}
}


/*スタジオ
---------------------------------------------------------------------------*/
.studio-table td{
	width: 70%;
}

@media (max-width: 600px){
		.scroll-area {
			width: 90%;
			margin: 0 auto;
			overflow-x: scroll;
		}

		.scroll-table {
			width: 100%;
			min-width: 500px;
			margin: 5em auto 2em;
		}
}


/*利用案内
---------------------------------------------------------------------------*/

.flow_design08 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

.flow08 {
  padding-left: 0;
}

.flow08 > li {
  list-style-type: none;
  border-radius: 15px;
  background: #f5f2f0;
  position: relative;
  padding: 20px;
}

.flow08 > li:not(:last-child) {
  margin-bottom: 20px;
}

.flow08 > li dl {
  display: flex;
  align-items: center;
  gap: 20px;
}

.flow08 > li dl dt {
  font-size: 1.3em;
  font-weight: 700;
  width: 20%;
  min-width: 7em;
}

.flow08 > li .icon08 {
  color: #00258e;
  margin-right: 0.5em;
}

.flow08 > li dl dd {
  margin: 0;
  width: calc(80% - 20px);
}

.flow08 li{
	position: relative;
}

.flow08 li::before{
  content: "";
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  color: #00258e;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  bottom: -10px;
  left: 70px;
}

.flow08 li:last-of-type::before{
	display: none;
}

.important{
	color: red;
	font-size: 18px;
	font-weight: bold;
}

.rent-table{
	margin-top: 2rem;
}

.rent-table th{
	background-color:#f5f2f0;
	border: 1px solid #9c9c9c;
	padding: 0 1rem;
}

.rent-table td{
	border: 1px solid #9c9c9c;
	padding: 1rem;
}

.rules-title{
	position: relative;
	font-size: 26px;
	font-weight: bold;
	margin: 30px 0;
}

.rules-title::before{
	content: attr(data-number);
	display: inline-block;
	margin-right: 20px;
	color: #6abaa4;
	font-size: 30px;
	border-bottom: 1px solid #6abaa4;
}

.rent-container dd{
	padding-left: 20px;
}

.rent-container ol{
	padding-left: 30px;
}

.rent-container h5{
	border-bottom: none;
	margin: 0;
	padding: 0;
}

@media screen and (max-width:600px){
	.flow08 > li dl{
		flex-direction: column;
		gap: 0;
	}
	
	.flow08 > li dl dd{
		width: 100%;
	}
	
	.flow08 > li dl dt{
		width: 100%;
		text-align: center;
	}
	
	.flow08 li::before{
		left: 50%;
	}
	
	.rent-table th, .rent-table td{
		display: inline-block;
		width: 100%;
		float: left;
	}
	
	.rules-title{
	position: relative;
	font-size: 22px;
	font-weight: bold;
		margin: 10px 0;
}
	.rent-container h5{
		font-size: 16px;
	}
	
	.rent-container dd{
	padding-left: 0;
}

.rent-container ol{
	padding-left: 10px;
}
}

/*申請書ダウンロード
---------------------------------------------------------------------------*/
.download-box{
	display: flex;
	flex-direction: column;
}

.download-btn{
	border-bottom: 2px dotted #9c9c9c;
	color: #333;
	padding: 0.2rem 2rem 0.2rem 1rem;
	margin-bottom: 15px;
	max-width: 40%;
	
}

.download-btn::before{
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
    content: "\f15b";		/*アイコンのコード*/
	color: #9c9c9c;
	font-weight: 700;
	padding-right: 0.5rem;
}

.download-btn:hover{
	color: #00258e;
	transition: 0.5s;
}

@media screen and (max-width:600px){
	.download-btn{
		max-width: 80%;
	}
}


/*各種サービス
---------------------------------------------------------------------------*/
.service-box{
	display: flex;
	justify-content: space-between;
}

.service-box ul{
	padding-left: 2rem;
}


@media screen and (max-width:600px){
	.service-box {
		flex-direction: column;
	}
}



/*各種サービス
---------------------------------------------------------------------------*/
.faq-container .faq-parts dt::before {
	display: none;
}

.faq-container .faq-parts dt span, .faq-container .faq-parts dd span{
	font-size: 1.5rem;
	font-family: "Zen Kaku Gothic New", serif;
	color: #c16c26;
	
}

.faq-container .faq-parts dd{
	display: flex;
	align-items: flex-start;
}

.faq-container .faq-parts dd p{
	padding-top: 0.5rem;
}

.faq-container a{
	color: #00258e;
}

.faq-container a:hover{
	border-bottom: 1px solid #00258e;
}


@media screen and (max-width:600px){
	.faq-container .faq-parts dd{
		padding-left: 1rem;
	}
}


/*備品料金
---------------------------------------------------------------------------*/
.option-container table{
	margin: 0 auto;
}

.option-container table th{
	background: #f5f2f0;
	border: 1px solid #9c9c9c;
	padding: 0.2rem 1rem;
}

.option-container table td{
	border: 1px solid #9c9c9c;
	padding: 0.2rem 1rem;
}

@media screen and (max-width:600px){
	.option-container h3{
		font-size: 20px;
	}
	
	.option-table-area{
		width: 90%;
			margin: 0 auto;
			overflow-x: scroll;
	}
	
	.option-container table{
		width: 100%;
		min-width: 900px;
		margin: 5em auto 2em;
	}
}


/*問い合わせページ
---------------------------------------------------------------------------*/
.contact-container a{
	display: block;
	width: 100%;
	font-size: 24px;
	color: #00258e;
	background: #fff;
	padding: 10px 30px;
	border: 1px solid #00258e;
	margin: 0 auto;
	text-align: center;
	margin-top: 36px;
}

.contact-container i{
	padding-left: 0.5rem;
}

.contact-container a:hover{
	color: #fff;
	background: #00258e;
	transition: 0.5s;
}

.contact-item{
	margin-bottom: 24px;
}



@media screen and (max-width:600px){
			.faq-container a{
			width: 300px;
			font-size: 16px;
		}

		.faq-container i{
			padding-left: 0.5rem;
		}
	
		.contact-container a{
			font-size: 20px;
		}
	}


/*プライバシーポリシー他*/
.privacy-container h4,.accessibility-container h4,.sitemap-container h4{
	margin: 2rem 0; 
}

.accessibility-container ul{
	padding-left: 3rem;
}

/*サイトマップ*/
.site-map{
	display: flex;
}

.site-map a{
	color: #333;
}

.site-map a:hover{
	color: #00258E;
	transition: 0.5s;
}
.sitemap-menu  li{
	list-style: none;
	font-size: 18px;
	padding: 5px 0;
	list-style: circle;
}

.sitemap-sub{
	maegin-left: 1rem;
}

.sitemap-sub  li{
	font-size: 16px;
	margin-left: 3rem;
	
}

.site-map{
	display: flex;
	justify-content: space-around;
}

@media screen and (max-width:600px){
	.site-map{
	flex-direction: column;
}
	.sitemap-menu{
		padding-left: 2.5rem;
	}
	.site-map li{
		font-size: 16px;
	}

}

/*英語ページ*/

.e-contents{
	padding: 0;
}
.e-contents p, .e-contents dd{
	font-size: 18px;
}

.e-contents dt{
	font-size: 20px;
	font-weight: bold;
}

.e-contents h3{
	font-size: 36px;
}

.e-contents .contents-container {
	margin: 24px auto;
	padding-bottom: 0;
}

.e-contents table{
	font-size: 18px;
	border: 1px #9c9c9c solid;
	width: 80%;
	margin: 0 auto;
	margin-top: 3rem;
}

.e-contents th {
	border: 1px solid #9c9c9c;
	padding: 1rem;
	background: #f5f2f0;
}

.e-contents td{
	border: 1px solid #9c9c9c;
	padding: 1rem;
}

.e-contact{
	text-align: center;
	margin: 0 auto;
}

.e-contact p{
	margin: 0;
}

.e-contents .e-title {
	font-size: 28px;
	font-weight: bold;
	line-height: 28px;
	padding-bottom: 1rem;
}

.e-contents .e-tel{
	font-size: 28px;
	font-weight: bold;
}

.e-contents .e-mail{
	font-size: 28px;
}

.e-container header{
	height: 70px;
}


.en-header .header-left{
	display: flex;
}

.en-header .header-left p{
	display: flex;
	align-items: flex-end;
	padding-bottom: 5px;
	line-height: 1.5rem;

}

.e-contents .top-title{
	margin-bottom: 36px;
}

.e-contents .contents-container:last-of-type{
	padding-bottom: 32px;
}



@media screen and (max-width:1280px){
	.en-header .header-left p{
		align-items: flex-start;
	}
}



@media screen and (max-width:600px){
		.e-contents p, .e-contents dd,.e-contents table {
		font-size: 16px;
	}

		.e-container .sh-sns{
		display: flex;
	}
	
	.e-contents h3{
		line-height: 3rem;
	}

		.e-container .header-left img{
				width: 100%;
			}

		.e-contents .e-tel, .e-contents .e-mail,.e-contents .e-title{
		font-size: 24px;
	}
		.en-table-area {
			width: 100%;
			margin: 0 auto;
			overflow-x: scroll;
		}

		.en-table-area table {
			width: 100%;
			min-width: 900px;
			margin: 5em auto 2em;
		}
	
		.en-table-area table{
			margin-top: 20px;
		}

		.en-header .header-left img{
			width: 100%;
		}
	
		.en-header .language-btn{
			margin-top: 20px;
			width: 60%;
		}
	
		.en-header .sh-sns{
			margin-top: 20px;
			display: flex;
			width: 60%;
		}
		.e-contents .contents-container {
		margin: 10px auto;
		padding-bottom: 0;
		}
	
	.en-header .header-left p{
		line-height: 12px;
		padding-top: 1rem;
		font-size: 0.8rem;
	}
		
}


/*ｃｓｓアニメーション*/

.scroll-space{
  box-sizing: border-box;
  padding-top: 300px;
  height: 1600px;
  color: #fff;
  overflow: hidden;
}

.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}

  .fadein-up{
      transform: translate(0,-30px);
  }
.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }