@charset "UTF-8";



/* -------------------------------

リセット

--------------------------------*/

*{ box-sizing: border-box; margin: 0; padding: 0; }
header, footer, nav, menu, article, aside, section, details, figcaption, figure{ display: block; }
ul, ol	{ list-style: none; }
table	{ border-collapse: collapse; }
img	{ vertical-align: bottom; }
a img	{ border: none; }
strong	{ font-weight: normal; }
i	{ font-style: normal; }
a { text-decoration: none; }



/* -------------------------------

基本設定: ページ全体

--------------------------------*/

body	{
	margin: 0;
	font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 16px;
}
@media screen and (max-width: 480px) { 
	body { font-size: 14px; }
}



/* -------------------------------

セクション: 準備中表示

--------------------------------*/

section.commingsoon { margin-top: 180px; }
section.commingsoon .container 	{ margin: 0 auto; padding: 0px 0; max-width: 1000px; text-align: center;}

section.commingsoon h1     { color: #0f3299; font-size: 50px; font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; }
section.commingsoon p.ttl  { color: #0f3299; font-size: 16px; line-height: 2.0; }

section.commingsoon i  { padding : 30px 0; display: block; font-size: 80px; color: #dcdcdc; }

section.commingsoon h2 { padding-bottom: 30px; font-size: 32px; color: #333333; }
section.commingsoon p  { line-height: 2.0; font-size: 16px; color: #000; }

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

section.commingsoon { margin-top: 90px; }
section.commingsoon h1     { font-size: 50px; }
section.commingsoon p.ttl  { font-size: 14px; line-height: 2.0; }

section.commingsoon .container 	{ }
section.commingsoon i  { padding : 20px 0; font-size: 70px;  }

section.commingsoon h2 { padding-bottom: 20px; font-size: 26px; }
section.commingsoon p  { font-size: 14px; }

}



/* -------------------------------

セクション: ヘッダー

--------------------------------*/
header            { background-color: #0f3299; }
header .container { margin: 0 auto; padding: 30px; width: 100%; max-width: 1000px; }
header h1         { font-size: 40px;  font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; color: #fff; }
header p          { font-size: 16px; color: #fff; }

@media screen and (max-width: 480px) {
	header h1 { font-size: 32px; }
}



/* -------------------------------

セクション: フッター

--------------------------------*/
footer            { background-color: #f5f5f5; }
footer .container { margin: 0 auto; padding: 30px 0 30px 10px; width: 100%; max-width: 1000px; text-align: center; font-size: 14px; }




/* -------------------------------

セクション: フットインフォ

--------------------------------*/
section.footinfo            { background-color: #f5f5f5; }
section.footinfo .container { margin: 0 auto; padding: 30px 10px 10px 10px; width: 100%; max-width: 1000px; font-size: 14px; }
section.footinfo ul {}
section.footinfo li { padding: 5px 0; }
section.footinfo a { color: #000; }
section.footinfo a:hover { text-decoration: underline; }
section.footinfo i { margin-right: 5px; }


/* -------------------------------

セクション: キービジュアル

--------------------------------*/
section.keyimg { background-color: #7cd7e6; /* background-color: #eee; /*background-color: #fff0f5; /*background-color: #ffc0cb;*/ }
section.keyimg .container { margin: 0 auto; width: 100%; max-width: 1000px; /*max-height: 1000px; overflow: hidden; */ }
section.keyimg img { width: 100%; }

/* 背景表示 */
section.keyimg .container { /*background-image: url(../img/bjf_img.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; /*height: 800px;*/ }

@media screen and (max-width: 1000px) {
	/* 画像縦横比率に合わせて高さ調節 */
	section.keyimg .container { /*background-position: top; background-size: contain; height: calc(100vw * 0.7066 );*/ }
}



/* -------------------------------

セクション: イベント情報

--------------------------------*/
section.eventinfo { }
section.eventinfo .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }
section.eventinfo h2 { padding: 20px 0; font-size: 26px; color: #0f3299; }
section.eventinfo h2 i { margin-right: 10px; }

section.eventinfo dl { display: flex; flex-wrap: wrap; }
section.eventinfo dt { padding: 15px; flex: 0 0 25%; background-color: #f5f5f5; color: #000; border-left: 5px solid #0f3299; }
section.eventinfo dd { padding: 15px; flex: 0 0 75%; background-color: #fff; }

section.eventinfo dd a { color: #0000ff; text-decoration: underline; }
section.eventinfo dd i { margin-right: 10px; }
section.eventinfo dd span.plice { font-size: 20px; font-weight: bold; }
section.eventinfo dd span.att { color: #dc143c; }
section.eventinfo dd span.large { font-size: 20px; font-weight: bold; }

section.eventinfo dt.attpdf { background-color: #fff0f5; color: #000; border-left: 5px solid #dc143c; }
section.eventinfo dd.attpdf a{ color: #dc143c; }

@media screen and (max-width: 480px) {
	section.eventinfo dl { display: block; }
}



/* -------------------------------

セクション: 予約へ進むボタン

--------------------------------*/
section.startrsv            { }
section.startrsv .container { margin: 0 auto; padding: 60px 10px; width: 100%; max-width: 1000px; }
section.startrsv .torsv {
	/*padding: 30px 0;*/ background-color: #0f3299; color: #fff; text-align: center; font-size: 16px;
	border: 0px solid #333; border-radius: 15px;
}
section.startrsv .torsv a { color: #fff; display: block; font-size: 18px; padding: 30px 0; }
section.startrsv .torsv:hover { opacity: 0.8; }

section.startrsv .torsv i { margin-left: 10px;}
section.startrsv .torsv p{ padding: 30px 0; }

section.startrsv .torsv.off { border: 3px solid #333; background-color: #fff; color: #333; }
section.startrsv .torsv.off:hover { opacity: 1.0;}



/* -------------------------------

セクション: コンテンツ共通

--------------------------------*/
section.common { }
section.common .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }
section.common h2 { padding: 20px 0; font-size: 26px; color: #0f3299; }
section.common h2 i { margin-right: 10px; }

section.common dl { display: flex; flex-wrap: wrap; display: block; }
section.common dt { padding: 15px; flex: 0 0 25%; background-color: #f5f5f5; color: #000; border-left: 5px solid #0f3299; }
section.common dd { padding: 15px; flex: 0 0 75%; padding-bottom: 30px; }

/* ボーダー */
section.common dl { border-top: 0px solid #333; }
section.common dt { border-bottom: 0px solid #333; }
section.common dd { border-bottom: 0px solid #333; }

section.common dd p { padding-bottom: 20px; }
section.common dd a { color: #0000ff; text-decoration: underline; }
section.common dd i { margin-right: 10px; }

section.common dd ul { }
section.common dd li { margin-bottom: 15px; }
section.common dd li.nomargin { margin-bottom: 0px;}

section.common div.wrap p { margin-bottom: 20px; }
section.common div.wrap a { color: #0000ff; }
section.common div.wrap a:hover { text-decoration: underline; }


/* 閉じる */
section.common div.closebtn   { padding: 30px 0; text-align: center;  }
section.common div.closebtn a { color: #0000ff; }
section.common div.closebtn a:hover { text-decoration: underline; }


@media screen and (max-width: 480px) {
	section.common dl { display: block; }
	section.common dl { border-top: none; }
	section.common dt { border-bottom: none; }
	section.common dd { border-bottom: none; }
}

/* フォントサイズ14pxに */
/*
section.kiyaku { font-size: 14px; line-height: 1.5; }
section.law    { font-size: 14px; line-height: 1.5; }
section.privacypolicy    { font-size: 14px; line-height: 1.5; }
*/



/* -------------------------------

セクション: エラーページ

--------------------------------*/

section.common.error { }
section.error h2 { color: #dc143c; }
section.common.error { }
section.common.error p.closebtn { margin-top: 60px; text-align: center; }
section.common.error a { margin: 0 5px; color: #0f3299; }
section.common.error a:hover { text-decoration: underline; }



/* -------------------------------

セクション: 戻りボタン

--------------------------------*/

section.rtnbtn { }
section.rtnbtn .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }
section.rtnbtn button { margin: 0 auto; border-radius: 15px; }
section.rtnbtn p { text-align: center;  }
section.rtnbtn p.att { color: #dc143c; }


/* -------------------------------

セクション: ここまでの選択内容

--------------------------------*/

section.selected { font-family: 'Noto Sans JP', sans-serif; }
section.selected .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }

section.selected h2 {
	margin-bottom: 20px;  padding: 20px 0; font-size: 26px; color: #0f3299;
	border-bottom: 2px solid #0f3299;
}
section.selected p.att { margin: 20px 0; color: #dc143c; }

section.selected dl { margin: 20px 0 0; display: flex; flex-wrap: wrap; /*display: block;*/ }
section.selected dt { padding: 10px; flex: 0 0 25%; background-color: #f5f5f5; color: #000; border-left: 5px solid #0f3299; }
section.selected dd { padding: 10px; flex: 0 0 75%; }

section.selected h4.red { margin-top: 30px; font-size: 22px; color: #dc143c; }
section.selected dd span.num { font-size: 16px; font-weight: bold; }
section.selected dd span.tax { font-size: 14px; font-weight: normal; }


/* 最終確認 */
section.selected h3.saisyuu { border: 2px solid #dc143c; margin: 30px 0; padding: 20px; color: #dc143c; }
section.selected h3.saisyuu i { margin-right: 10px; }




/* -------------------------------

セクション: 選択中ステップ

--------------------------------*/

section.thisstep { }
section.thisstep .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }

section.thisstep h2 {
	margin-bottom: 20px; padding: 20px 0; font-size: 26px; color: #0f3299;
	border-bottom: 2px solid #0f3299;
}

section.thisstep h3 { padding: 0px 0 20px; font-size: 18px; color: #000; }
section.thisstep h3 span.must {
	display: inline-block; background-color: #dc143c; color: #fff;
	margin-top: 5px; padding: 5px 20px; font-weight: normal; font-size: 14px; border-radius: 10px;
}

section.thisstep p.seat_err { color: #dc143c; padding: 20px; border: 1px solid #dc143c; background-color: #fff0f5; }

section.thisstep dl { margin: 20px 0; display: flex; flex-wrap: wrap; display: block; }
section.thisstep dt { padding: 10px; flex: 0 0 25%; background-color: #f5f5f5; color: #000; border-left: 5px solid #0f3299; }
section.thisstep dt span.num { font-size: 18px; font-weight: bold; }

section.thisstep dd { padding: 10px; flex: 0 0 75%; }

section.thisstep p.att { color: #dc143c; }

/* 中央 */
section.thisstep button { margin-left: auto; margin-right: auto; border-radius: 15px; }
section.thisstep p.mada { padding: 20px 0; text-align : center; }

/* フォーム */
section.thisstep form dl { display: flex; flex-wrap: wrap; }
@media screen and (max-width: 480px) {
	section.thisstep form dl { display: block; }
}
section.thisstep form p.important { color: #dc143c; }
section.thisstep form p.normal    { color: #000; padding: 20px 0 ;}

section.thisstep form input[type="checkbox"] { margin-right: 10px; }


/* -------------------------------

セクション: 座席表

--------------------------------*/

section.thisstep h4 { margin-top: 30px; text-align: center; }
section.thisstep p.scrollinfo { text-align: center; }

div.seat_tbl { width: 100%; overflow-x: scroll; margin: 30px 0; }
div.seat_tbl table { width: 980px; }
div.seat_tbl tr { }
div.seat_tbl td { width: 50px; height: 30px; text-align: center; border: 2px solid #FFFFFF; padding: 2px 0; font-size: 14px; }

div.seat_tbl td input[type="checkbox"] { display: inline; margin: 0; padding: 0; }
div.seat_tbl td label { margin: 0; padding: 0; }

div.seat_tbl td.mada  { background-color : #99FFFF; }
div.seat_tbl td.rsved { background-color : #FFCC00; }
div.seat_tbl td.none  { color : #FFFFFF; width: 0px; }
div.seat_tbl td.gray  { color : #CCCCCC; background-color: #CCCCCC; }

div.seat_tbl td.white { color : #FFFFFF; background-color: #FFFFFF; }
div.seat_tbl td.bold  {	color : #000000; background-color: #ffffff; font-weight: bold; }

/* 車椅子席 -------------------------  */
div.seat_tbl td.spsheet{ background-color: #7CFC00; }

/* 車椅子同伴者席 -------------------------  */
div.seat_tbl td.wsheet{ background-color: #f5deb3; }

/* 15列1～11席 -------------------------  ★2024/11/19★ */
div.seat_tbl td.sheet15 { background-color: #ffccff; }

/* 座席表幅　調整 */
@media screen and (max-width: 1000px) {
	div.seat_tbl table { width: 1200px;  }
	div.seat_tbl td    { padding: 5px 0; }
}



/* -------------------------------

セクション: キャンセル規定

--------------------------------*/
div.cancel { margin: 30px 0; border: 2px solid #dc143c; }
div.cancel h3 { padding: 10px; background-color:#dc143c; color: #FFF; font-size: 16px; }
div.cancel p  { padding: 10px; }



/* -------------------------------

セクション: お客様情報確認

--------------------------------*/

section.kakunin { }
section.kakunin .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }

section.kakunin h2 {
	padding: 20px 0; font-size: 26px; color: #0f3299;
	border-bottom: 2px solid #0f3299;
}
section.kakunin h3 { padding: 0px 0 20px; font-size: 18px; color: #000; }
section.kakunin p.seat_err { color: #dc143c; padding: 20px; border: 1px solid #dc143c; background-color: #fff0f5; }

section.kakunin dl { margin: 20px 0; display: flex; flex-wrap: wrap; /*display: block;*/ }
section.kakunin dt { padding: 10px; flex: 0 0 25%; background-color: #f5f5f5; color: #000; border-left: 5px solid #0f3299; }
section.kakunin dd { padding: 10px; flex: 0 0 75%; }

@media screen and (max-width: 480px) {
	section.kakunin dl { display: block; }
}


/* -------------------------------

セクション: 予約完了ボタン

--------------------------------*/

section.finbtn { }
section.finbtn .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; text-align: center; }

section.finbtn h3 { padding: 20px 0; }
section.finbtn p.att { color: #dc143c; }
section.finbtn button { padding: 30px 0; border-radius: 15px; }

@media screen and (max-width: 480px) {
	section.finbtn .container { text-align: left; }
	section.finbtn h3 { text-align: left; }
	section.finbtn p.att { text-align: left; }
}




/* -------------------------------

セクション: フォームスタイル

--------------------------------*/



button[type="submit"] {
	display: block; width: 100%; padding: 30px 0; max-width: 600px; margin: 20px auto 20px 0; 
	background-color: #0f3299; color: #fff; border: none; border-radius: 0; background-image: none;
	cursor: pointer; -webkit-appearance: none; font-size: inherit; 
}
button[type="submit"]:hover { opacity: 0.8; }
button[type="submit"] i { margin-left: 10px; }


/* 戻りボタン */
button[type="submit"].bk_btn { max-width: 600px; margin-bottom: 10px; color: #000; background-color: #dcdcdc; }
button[type="submit"].bk_btn i { margin-left: 0; margin-right: 10px; }


/* 登録ボタン */
button[type="submit"].regist { width: 100%; max-width: 100%; color: #fff; background-color: #dc143c; }


/* セレクト */
select {
	width: 100%; padding: 10px; font-size: 16px;
	color: #000; background-color: #fff;
	outline: none; border: solid 1px #696969; -webkit-appearance: none;
}

/* テキスト */
input[type="radio"]    { margin-right: 10px; }
/*input[type="checkbox"] { margin-right: 10px; }*/
input[type="text"]     { width: 100%; padding: 10px; font-size: 16px; outline: none; border: solid 1px #696969;}
input[type="tel"]      { width: 100%; padding: 10px; font-size: 16px; outline: none; border: solid 1px #696969;}
input[type="email"]      { width: 100%; padding: 10px; font-size: 16px; outline: none; border: solid 1px #696969;}

/* フォーカス */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus { background-color: #ffffe0; outline: none; border: solid 1px #696969; }




/* -------------------------------

セクション: 予約完了画面

--------------------------------*/

section.rsvfin { }
section.rsvfin .container { margin: 0 auto; padding: 30px 10px; width: 100%; max-width: 1000px; }

section.rsvfin h2 { padding: 20px 0; font-size: 26px; color: #0f3299; }
section.rsvfin h2 i { margin-right: 10px; }
section.rsvfin p.info { margin-bottom: 30px; }

section.rsvfin dl { display: flex; flex-wrap: wrap; /*display: block;*/ }
section.rsvfin dt { padding: 15px; flex: 0 0 25%; background-color: #f5f5f5; color: #000; border-left: 5px solid #0f3299; }
section.rsvfin dd { padding: 15px; flex: 0 0 75%; }

section.rsvfin a.btntotop {
	display: block; max-width: 600px; margin: 60px auto 30px; padding: 20px;
	color: #fff; background-color: #0f3299; border-radius: 10px;
	text-align: center;
}
section.rsvfin a.btntotop:hover{ opacity: 0.8; }

@media screen and (max-width: 480px) {
	section.rsvfin dl { display: block; }
}