@charset "utf-8";

/*TOP画像----------------------------------------------------*/
div#mainImgBox{
  	max-width: 100%;
	padding: 0px 0px;
	margin-bottom: 10px;
}

/*index以外----------------------------------------------------------------------*/
.topImgBox2{
	position: relative;
	background: #fff;
}
.topImgBox2 p{
	position: absolute;
	color: #fff;
	font-weight: bold;
	font-size: 2em;
	font-family :Quicksand, sans-serif;		/*Google Font*/
	top: 40%;
	left: 20%;
}
.topImgBox2 img{
	width: 100%;
	height: 300px;
	object-fit: cover;
}


/*mainContents----------------------------------------------------------------------*/


div#mainContents{
	width: 90%;
	padding: 45px 30px 5px;
	margin: 0 auto;
	background: #fff;
}

div#eventBox{
	display: inline-block;
	text-align: center;
	vertical-align: top;   /* 上端を揃える */
	margin: 0 auto 20px;
	background: #fff;
}
div#eventBox2{
	display: inline-block;
	max-width: 900px;
	margin: 0 auto 20px;
	background: #fff;
}
div#eventBox3{
	max-width: 900px;
	margin: 0 auto 20px;
	background: #fff;
}

div#eventBox4{
	display: inline-block;
	max-width: 400px;
	margin: 0 auto 20px;
	display: flex;
	background: #fff;
}

/*topicBox（イベントトップ↓）----------------------------------------------------------------------*/
/* 横に４つ並べる */
div.topicBox{		/*画像+テキスト*/
	width: 25%;
	float: left;
	margin: 0 auto 80px;
	background: #fff;
}
div.topicBox p{		/*画像*/
	width: 90%;
	margin: 0 5% 15px;
}
div.topicBox span{
	display: block;
	margin: 0 10% 0;
	text-align: left;	/*テキスト*/
	font-size: 16px;
	color: #000;
}
div.topicBox h2{
	display: block;
	margin: 0 10% 0;
	text-align: left;	/*太字*/
	font-size: 16px;
	color: #000;
	font-weight: bold;
}
div.topicBox h5{
	display: block;
	margin: 0 10% 0;
	text-align: left;	/*日付用*/
	font-size: 12px;
	color: #666;
}

.topicBox a{
    text-decoration: none;
}

.topicBox a:hover {/*マウスをのせたとき*/
	color: #000;
    text-decoration: underline;
}
/*topicBox（イベントトップ↑）----------------------------------------------------------------------*/

/*topicBox（イベントレポート↓）----------------------------------------------------------------------*/
/* topicBox2 */
/* 横に２つ並べる */
div.topicBox2{		/*画像+テキスト*/
	width: 50%;
	float: left;
	margin: 20px auto 30px;
	background: #fff;
}
div.topicBox2 p{		/*画像*/
	width: 90%;
	margin: 0 5% 0;
}

/* topicBox3 */
/* 画像orテキスト100％ */
div.topicBox3{		/*画像+テキスト*/
	width: 100%;
	background: #fff;
}
div.topicBox3 p{		/*画像*/
	display: inline-block;
	width: 90%;
	text-align: left;	/*テキスト*/
	margin: 10px 5% 5px;
}
div.topicBox3 span{
	display: block;
	margin: 20px 5% 20px;
	text-align: left;	/*テキスト*/
	font-size: 16px;
	color: #000;
}

/* topicBox4 */
/* ←次 TOP 前→ */
div.topicBox4{		/*画像+テキスト*/
	width: 100%;
	background: #fff;
}
div.topicBox4 p{		/*画像*/
	text-align: center;	/*テキスト*/
}
div.topicBox4 span{
	display: block;
	margin: 0 10% 0;
	text-align: center;	/*テキスト*/
	font-size: 16px;
	color: #000;
}

/* topicBox5 */
/* テキスト70％画像30％ */
div.topicBox5{		/*画像+テキスト*/
	width: 100%;
	background: #fff;
}
div.topicBox5 p{		/*画像*/
	width: 30%;
	margin-top: 20px;
	float: right;
}
div.topicBox5 span{
	display: block;
	width: 60%;
	margin: 20px 5% 20px 5%;
	color: #000;	/*テキスト*/
	text-align: left;
}

/* topicBox6 */
/* テキスト70％画像30％ */
div.topicBox6{		/*画像+テキスト*/
	width: 100%;
	background: #fff;
}
div.topicBox6 p{		/*画像*/
}
div.topicBox6 span{
	display: block;
	width: 90%;
	margin: 0 5% 0 5%;
	color: #000;	/*テキスト*/
	text-align: left;
}

/* イベントレポート用 */
/* topicBox7 */
/* 横に２つ並べる */
div.topicBox7a{		/*画像+テキスト*/
	width: 50%;
	float: left;
	margin: 20px auto 30px;
	background: #fff;
}
div.topicBox7a p{		/*画像*/
	width: 98%;
	margin: 0 auto 0;
}
div.topicBox7a h3{		/*小文字*/
	width: 98%;
	margin: 0 auto 0;
	color: #000;	/*テキスト*/
	font-size: 12px;
}
/* topicBox7 */
/* 横に３つ並べる */
div.topicBox7b{		/*画像+テキスト*/
	width: 33%;
	float: left;
	margin: 20px auto 30px;
	background: #fff;
}
div.topicBox7b p{		/*画像*/
	width: 98%;
	margin: 0 auto 0;
}
/* topicBox7 */
/* 横に３つ並べる */
div.topicBox7c{		/*画像+テキスト*/
	width: 26%;
	float: left;
	margin: 20px auto 30px;
	background: #fff;
}
div.topicBox7c p{		/*画像*/
	width: 98%;
	margin: 0 auto 0;
}
/* topicBox7 */
/* 横に３つ並べる */
div.topicBox7d{		/*画像+テキスト*/
	width: 48%;
	float: left;
	margin: 20px auto 30px;
	background: #fff;
}
div.topicBox7d p{		/*画像*/
	width: 98%;
	margin: 0 auto 0;
}

/* topicBox8 */
/* テキスト50％画像50％ */
div.topicBox8{		/*画像+テキスト*/
	width: 100%;
	float: left;
	margin: 20px 0 30px;
	background: #fff;
}
div.topicBox8 p{		/*画像*/
	width: 45%;
	margin: 0 auto;
	float: right;
}
div.topicBox8 span{
	display: block;
	width: 45%;
	margin: 0 auto;
	color: #000;	/*テキスト*/
	float: left;
	text-align: left;
}

/* ListBox */
div.ListBox{
	width: 400px;
	margin: 20px auto;
	background: #fff;
}

/* 予約画面用 */
/* resBox1 */
/* 横に２つ並べる */
div.resBox1{		/*画像+テキスト*/
	width: 50%;
	float: left;
	margin: 20px auto 30px;
	background: #fff;
}
div.resBox1 p{		/*画像*/
	width: 98%;
	margin: 0 auto 0;
}

/*----------------------------------------------------------------------topicBox*/
.clear_box {
	clear:  both;               /* 回り込みを解除する */
}

/*-------------------------------------*/
/* 見出し装飾 */
/*-------------------------------------*/

.chapter2{
	text-align: center;
	padding-bottom: 4px;
	font-size: 16px;
	font-weight: bold;
	background: #fff;
}

.chapter3{
	text-align: center;
	padding-bottom: 4px;
	border-bottom: 3px solid #333;
	font-size: 18px;
	font-weight: bold;
	background: #fff;
}

.chapter4{
	text-align: center;
	padding-bottom: 4px;
	border-bottom: 3px solid #090;
	color: #090;
	font-weight: bold;
}
.chapter5{
	text-align: center;
	padding-bottom: 10px;
	font-size: 14px;
	background: #fff;
}
.chapter6{
	text-align: center;
	padding-bottom: 4px;
	border-bottom: 3px solid #333;
	font-size: 14px;
	font-weight: bold;
	margin: 100px 10px 50px 10px;
	background: #fff;
}


/*-------------------------------------*/
/* テーブルフォーマット */
/*-------------------------------------*/

table{
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
}
table th,
table td{
	padding: 10px 10px;
}
table th{
}

table.tableDec th{
	background: #090;
	color: #fff;
	font-weight: bold;
}
table.tableDec td{
	width: 250px;
	background: #fff;
	border-bottom: 1px solid #999;
}

table.tableDec2 th{
	background: #090;
	color: #fff;
	font-weight: bold;
}
table.tableDec2 td{
	width: 250px;
	background: #fff;
	border-top: 1px solid #999;
}

table.tableDec3 th{
	background: #090;
	color: #fff;
	font-weight: bold;
}
table.tableDec3 td{
	width: 250px;
	background: #fff;
	border: 1px solid #999;
}


a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #f00;
}


/*-------------------------------------*/
/* メールフォーム */
/*-------------------------------------*/

#formWrap {
	width:700px;
	margin: 50px auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
div.formA h3 {
	text-align: center;
	padding-bottom: 4px;
	border-bottom: 3px solid #090;
	margin-bottom: 10px;
	color: #090;
	font-weight: bold;
}
div.formA h2 {
	text-align: center;
	padding-bottom: 4px;
	margin-bottom: 10px;
	color: #000;
	font-size:12px;
}
div.formA h1 {
	text-align: left;
	color: #666;
	font-size:12px;
}
div.formA p {
	text-align: center;
	padding-bottom: 4px;
	margin-bottom: 10px;
	color: #000;
}
.formA form label{
  cursor:pointer;
}

table.formTable{
	width:100%;
	margin:0 auto 30px 0;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
table.formTable td{
	text-align:left;
}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

div#mainImgBox{
	max-width: 100%;
	padding: 30px 0px;
	margin-bottom: 0px;
}
.topImgBox2 p{
	font-size: 20px;
}
.topImgBox2 img{
	height: 150px;
}

div#mainContents{
	padding: 0 5px 5px;
}

/*topicBox（イベントトップ↓）----------------------------------------------------------------------*/
div.topicBox{
	width: 100%;
	margin: 0 auto 20px;
	border: 1px solid #666;
}
div.topicBox p{		/*画像*/
	margin: 10px 5% 15px;
}
/*topicBox（イベントトップ↑）----------------------------------------------------------------------*/

/*topicBox（イベントレポート↓）----------------------------------------------------------------------*/
div.topicBox5 span{
	width: 90%;
}

/*topicBox（予約画面↓）*/
div.resBox1{		/*画像+テキスト*/
	width: 100%;
	margin: 0 auto 20px;
}

/*-------------------------------------*/
/* メールフォーム */
/*-------------------------------------*/
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}