/* ----------
header
---------- */

	header {
		height: 50px;
		margin-bottom: 50px;
		background-color: #DAA520;
	}

	header div {
		display: flex;
		justify-content: space-between;
	}

	header h1 {
		padding-left: 20px;
		padding-top: 15px;
	}

	header menu {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;

		list-style-type: none;
	}

	header menu li {
		margin: 10px;
	}

	header menu a {
		display: block;
		padding: 5px;
	}


/* ----------
footer
---------- */

	footer {
		padding: 10px 0;
		background-color: black;
		color: aliceblue;
	}

	footer menu {
		display: flex;
		justify-content: end;
		margin: 0;
		margin-right: 30px;
		padding: 0;
		padding-top: 5px;

		list-style-type: none;
	}

	footer menu li {
		margin: 10px;
	}

	footer a {
		padding: 5px;
	}

	footer .cr {
		text-align: center;
	}


/* ----------
side
---------- */

	.side {
		width: 20%;
		padding: 10px;
		background-color: #F0E68C;
		border-radius: 5px;
	}

	.side h4 {
		margin-bottom: 15px;
	}

	.side p {
		margin: 5px;
	}

	
/* ----------
main
---------- */

	main {
		margin: 0 20px;
	}

	section {
		margin-bottom: 50px
	}

	.row {
		display: flex;
		justify-content: space-between;
	}

	.box {
		padding: 10px;
		background-color: #F5F5F5;
		border-radius: 5px;
	}
	
	h2 {
		margin-bottom: 50px;
		font-size: x-large;
	}

	.box .top_btn {
		margin-top: 10px;
		padding: 5px 10px;

		color: #EEEEEE;
		background-color: #B0C4DE;
		border: 1px solid #DDDDDD;
		border-radius: 3px;
	}

	.main {
		width: 75%;
	}

	.ttl {
		display: flex;
		margin-bottom: 10px;
	}

	.ttl .data {
		margin-right: 20px;
	}

	.post-categories {
		margin-bottom: 20px;
	}
	
/* ----------
contact
---------- */

	.contact input,
	.contact textarea {
		width: 100%;
		margin: 5px 0;
		padding: 3px;
		border: 1px solid #333333;
		border-radius: 3px;
	}

	.contact button {
		text-align: center;
		padding: 5px 10px;
		background-color: #AAAAAA;
		border-radius: 3px;
	}

	.contact p:has(button) {
		text-align: center;
		margin-top: 20px;
	}