@charset "utf-8";


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

body{
	background-color: #333;
}

/* --------------- メイン --------------- */
#Contents{
	background-color: #FFFFFF;
	box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
}
header{background-color: #000000;}
header h1{color: #FFF; font-size:1.5em;text-align: center;}
header h1 img{width: 100%;}

#BeforeEntry,#EndEntry{
	background-color: #f29600;
	color: #FFFFFF;
}
#Complete .ThanksMsg{
	padding: 1em;
	background-color: #f29600;
	color: #FFFFFF;
}
.info_group.main{
	display: block;
	margin: 1em auto;
	padding: 1em;
	width: 10em;
	text-align: center;
	border-radius: 0.25em;
	border: solid 1px #999;
	background-color: #EEE;
	color; #333;
}
p.term{
	padding: 10px;
	font-size: larger;
	line-height: 1.3em;
	text-align: center;
	color: #FFFFFF;
	background-color: #000000;
}

/* --------------- form --------------- */
form p{
	background-color: #000000;
	color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
.itemList th{
	width: 280px;
	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;}


form table.itemList.agreeList th
,form table.itemList.agreeList td{
	width: calc(100% - 1em);
	padding: 0.5em;
	display: block;
}
form table.itemList.agreeList th{text-align: left;}
form table.itemList.agreeList td{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;
}


input[type="text"].otherText{
	margin-left: 0.5em;
	width: 10em;
}


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

@media screen and (max-width:768px){
	header ul{grid-template-columns: 1fr;}
	
	#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;
	}

}