/*headerボックスのスタイル設定*/
header {
	/*背景色を設定*/
	background-color: aliceblue;
}
/*header内のh1ボックスのスタイル設定*/
header h1 {
	/*内余白の上を5px、左右を15px、下を0pxに設定*/
	padding: 5px 15px 0px;
	/*外余白を0pxに設定*/
	margin: 0px;
	/*文字色を設定*/
	color: darkgrey;
}
/*navボックスのスタイル設定*/
header nav {
	/*内余白の上を5px、左右を15px、下を15pxに設定*/
	padding: 5px 15px 15px;
	/*外余白を0pxに設定*/
	margin: 0px;
}
header nav ul {
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
header nav li {
	list-style: none;
	background-color: turquoise;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	margin: 2px;
	flex: 1 0 140px;
}
header nav li a {
	color: white;
	text-decoration-line: none;
}
/*mainボックスのスタイル設定*/
main {
	/*背景色を設定*/
	background-color: gainsboro;
	/*内余白を15pxに設定*/
	padding: 15px;
}
/*main内のh2ボックスのスタイル設定*/
main h2 {
	/*外余白を0pxに設定*/
	margin: 0px;
	/*背景色を設定*/
	background: white;
	/*内余白を5pxに設定*/
	padding: 5px;
	/*フォントサイズを16ポイントに設定*/
	font-size: 16pt;
	/*文字色を設定*/
	color: darkgray;
	/*アンダーラインのような装飾としてボックス下境界線を設定*/
	border-bottom: solid 2px darkgray;
}
/*main内のsectionボックスのスタイル設定*/
main section {
	/*背景色を設定*/
	background: white;
	/*内余白を15pxに設定*/
	padding: 15px;
	/*外余白を上下が10px、左右が0pxに設定*/
	margin: 10px 0px;
}
/*main内のsection内のh3ボックスのスタイル設定*/
main section h3 {
	/*外余白を上下が10px、左右が0pxに設定*/
	margin: 10px 0px;
	/*左内余白を5pxに設定*/
	padding-left: 5px;
	/*装飾としてボックスの左と下の境界線を設定*/
	border-left: solid 5px black;
	border-bottom: solid 2px black;
}
table {
	border-collapse: collapse;
}
td, th {
	border: 1px solid black;
}
/*detailクラスのdl、dt、dlをボーダー基準に設定*/
.detail, dt, dd {
	box-sizing: border-box;
}
/*dtailクラスボックスのスタイル設定*/
.detail {
	/*幅を100%に設定*/
	width: 100%;
	/*境界線を設定*/
	border: 1px solid black;
	/*フレックスボックスレイアウトに設定*/
	display: flex;
	/*フレックスボックスを横方向に設定*/
	flex-direction: row;
	/*フレックスボックスの折り返しを設定*/
	flex-wrap: wrap;
}
/*dtailクラス内のdtとddボックスのスタイル設定*/
.detail dt, dd {
	/*外余白を0pxに設定*/
	margin: 0px;
	/*内余白の上下を5px、左右を15pxに設定*/
	padding: 5px 10px;
	/*境界線を設定*/
	border: 1px solid black;
}
/*dtailクラス内のdtボックスのスタイル設定*/
.detail dt {
	/*太字に設定*/
	font-weight: bold;
	/*背景色を設定*/
	background: gainsboro;
	/*フレックスアイテムを幅30%で設定*/
	flex: 1 0 30%;
}
/*dtailクラス内のddボックスのスタイル設定*/
.detail dd {
	/*フレックスアイテムを幅70%で設定*/
	flex: 1 0 70%;
}
/*submitPボックス内をセンタリングに設定*/
.submitP {
	text-align: center;
}
/*idがbreadcrumbボックス(パンくずリストボックス)のスタイル設定*/
#breadcrumb {
	/*背景色を設定*/
	background:lavender;
}
/*パンくずリスト内のulボックスのスタイル設定*/
#breadcrumb ul {
	/*外余白を0pxに設定*/
	margin: 0px;
	/*内余白の上下を5px、左右を15pxに設定*/
	padding: 5px 15px;
}
/*パンくずリスト内のliボックスのスタイル設定*/
#breadcrumb li {
	/*インラインとして表示するように設定*/
	display: inline;
	/*リストのスタイルを無効に設定*/
	list-style: none;
	/*太字に設定*/
	font-weight: bold;
}
/*パンくずリスト内のliボックスの後に「>」を表示するように設定*/
#breadcrumb li::after{
	content: ">";
	padding: 0 3px;
	color: darkgrey;
}
/*一番最後のliボックスの後には「>」を表示しないように設定*/
#breadcrumb li:last-child::after{
	content: "";
}
/*liボックス内のリンクのスタイル設定*/
#breadcrumb li a {
	/*文字装飾を無効に設定*/
	text-decoration: none;
	/*文字色を設定*/
	color: darkgrey;
}
/*liボックス内のリンクにマウスが重なった時のスタイル設定*/
#breadcrumb li a:hover {
	/*文字色を設定*/
	color: coral;
}
