@charset "utf-8";


/* --------------- 全体 --------------- */

body{
	background-color: #00a2e5;
}

/* --------------- メイン --------------- */
#Contents{
	background-color: #FFFFFF;
	box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
}
h1 img{
	width: 100%;
	display: block;
}
#BeforeEntry,#EndEntry{
	background-color: #000000;
	color: #FFFFFF;
}
#Complete .ThanksMsg{
	padding: 1em;
	background-color: #000000;
	color: #FFFFFF;
}

/* --------------- form --------------- */
form p{
	background-color: #16467c;
	color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
.itemList th{
	width: 250px;
	background-color: #E0E0E0;
}
.itemList td{background-color: #EEEEEE;}


.hopeItem td label{display: inline-block;}
.hopeItem input{width: 8em; text-align: center;}
.hopeItem select{width: 5em; text-align: center;}


.note{
	display: block;
	font-size: 0.8em;
}

#Complete{
	margin: 15px 0;
	text-align: center;
}
#NoticeArea{
	text-align: center;
	padding: 10px;
	background-color: #004E4B;
	color: #FFFFFF;
}









/* --------------- スマホ対応 --------------- */

@media screen and (max-width:768px){
	#Contents{
		width: 100%;
	}
	form p{
		padding: 5px 0.5em;
	}
	form table.itemList th
	,form table.itemList td{
		width: 100%;
		padding: 0.5em 0;
		display: block;
	}
	form table.itemList th{
		text-align: left;
		text-indent: 0.5em;
	}
	form table.itemList td label{
		text-indent: 0.5em;
	}
	.note{
		text-indent: 0.5em;
	}
	
	form table.itemList tr.dateItem label{
		width: 30%;
	}
	form table.itemList tr.halfItem label{
		display: block;
		width: 90%;
	}
	form table.itemList tr.shopItem label select{
		width: 15em;
	}
	
	
	#Complete
	,#NoticeArea
	,#Copyright{
		text-align: left;
	}
	
	.rule{
		margin: 0.5em;
		width: auto;
		height: 10em;
	}
	#ButtonArea input{
		margin: 15px;
	}

}