@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');

html {
	font-family:'BIZ UDGothic', sans-serif;
	overflow-y:scroll;
	scroll-behavior:smooth;
}

body {
	min-height:100vh;
	margin:0;
}

input, textarea, option, button {
	box-sizing:border-box;
	color:inherit;
	font:inherit;
	max-width:100%;
}

textarea {resize:vertical;}

pre {
	font:inherit;
	margin:0;
	white-space:pre-wrap;
	max-width:100%;
}

/* ヘッダー */
header {
	display:flow-root;
	margin:0;
	padding:10px;
	position:relative;

	.logo {
		background:url('/images/logo.png') 0 center/auto 1.25em no-repeat;
		box-sizing:border-box;
		display:block;
		color:inherit;
		font-size:1.875rem;
		font-weight:normal;
		line-height:1;
		margin:0;
		padding:0.125em 0 0.125em 1.675em;
		text-decoration:none;
		width:max-content;

		a&:hover {opacity:0.7;}
	}

	.h_user {
		bottom:1em;
		color:red;
		font-size:1rem;
		margin:0;
		padding:0;
		position:absolute;
		right:130px;
	}

	.logout {
		border:1px solid #ccc;
		box-sizing:border-box;
		color:inherit;
		float:right;
		padding:5px 12px;
		text-align:center;
		text-decoration:none;
		width:max-content;
	}

	@media (width >= 700px) {
		.logo {float:left;}
		.h_user {line-height:2.25;}
	}

	@media (700px >= width) {
		.h_user {line-height:1;}
	}
}

/* ナビゲーション */
.navi_box {
	position:relative;

	.navi {
		background:linear-gradient(#008000, #228b22);
		box-sizing:border-box;
		color:#fff;
		display:block;
		font-size:0.875rem;
		font-weight:bold;
		line-height:1.5;
		margin:0;
		padding:5px;
		text-indent:0.25em;
		width:100%;
	}

	.page_name {
		font-size:1.25em;
		font-weight:normal;
		line-height:30px;
		text-align:center;
		width:fit-content;
		max-width:100%;

		@media (width >= 500px) {
			color:#fff;
			left:0;
			margin:auto;
			position:absolute;
			right:0;
			top:0;
		}

		@media (500px > width) {margin:70px auto 0;}
	}
}

/* フッター */
footer {
	position:sticky;
	text-align:center;
	top:100vh;

	& > p {
		font-size:0.937rem;
		margin:0.25em 0;
	}

	.copyright {font-size:0.875rem;}
}

/* メイン */
main {
	box-sizing:border-box;
	display:block;
	margin:1.25rem;
	padding:0;
	position:relative;
}

/* 戻るbtn */
.back_btn_form {
	display:block;
	text-align:right;
	width:100%;

	button {
		background-color:#eee8aa;
		border:none;
		box-sizing:border-box;
		height:2em;
		padding:0 10px;
		min-width:150px;

		&:enabled {cursor:pointer;}
	}

	@media (width >= 500px) {margin:0 auto 20px;}

	@media (500px > width) {margin:-100px auto 70px;}
}

/* 新規登録btn */
.new_btn_form {
	display:block flex;
	flex-wrap:wrap;
	gap:10px;
	left:0;
	margin:0 auto 20px;
	width:100%;
	max-width:900px;

	button {
		background-color:#eee;
		border:none;
		box-sizing:border-box;
		height:2em;
		padding:0 10px;
		min-width:150px;

		&:enabled {cursor:pointer;}
	}

	@media (width >= 600px) {
		pointer-events:none;
		position:absolute;
		right:0;
		top:0;

		& > * {pointer-events:auto;}
	}
}

/* 検索box */
.search_box {
	align-items:center;
	box-sizing:border-box;
	border:none;
	display:block flex;
	flex-wrap:wrap;
	gap:20px;
	margin:0 auto 40px;
	padding:0;
	width:max-content;
	max-width:100%;

	& > .item {
		box-sizing:border-box;
		display:inline flex;
		margin:0;
		padding:0;
		width:fit-content;
		max-width:100%;
	}

	& > .title {flex-shrink:0;}

	button {
		background-color:#eee;
		border:none;
		box-sizing:border-box;
		height:2em;
		padding:0 10px;
		min-width:150px;

		&:enabled {cursor:pointer;}
	}
}

/* 検索結果*/
.search_text {
	display:block;
	margin:auto;
	width:100%;
	max-width:950px;
}

.paging {
	align-items:center;
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin:0 auto 5px;
	max-width:950px;

	& > .text {
		display:block;
		margin:0;
		padding:0;
	}

	& > form {
		align-self:end;
		display:flex;
		margin:0;
		padding:0;
		max-width:100%;

		& > button {
			background-color:#eee;
			border:none;
			box-sizing:border-box;
			height:auto;
			margin:0 0 0 10px;
			padding:0 10px;
			width:90px;
			min-width:auto;
			max-width:calc(25% - 10px);

			&:enabled {cursor:pointer;}
		}
	}
}

.box_scroll_x {
	box-sizing:border-box;
	margin:auto;
	overflow-x:auto;
	padding:1px;
	width:min(952px, 100%);

	& > table {
		border-collapse:collapse;
		margin:0 auto 20px;
		width:max(950px, 100%);
		max-width:initial;

		& > tbody > tr:nth-child(even) {background-color:#eee;}

		th, td {
			box-sizing:border-box;
			padding:5px;
			font-weight:normal;
		}

		td {
			border:1px solid #ccc;
			line-height:1.5;

			button {
				background-color:transparent;
				border:none;
				margin:0;
				padding:0;
				text-decoration:underline;

				&:enabled {cursor:pointer;}
			}
		}

		th {
			background-color:#fdf5e6;
			font-size:0.9375rem;
		}

		a {color:inherit;}
	}
}

/* form */
.form_box {
	box-sizing:border-box;
	border:none;
	display:block flow-root;
	margin:0 auto 20px;
	padding:0;
	width:600px;
	max-width:100%;

	& > .item {
		box-sizing:border-box;
		margin:0;
		padding:10px;
		width:100%;
		max-width:100%;

		& > .title {
			display:inline flow-root;
			text-align:right;
		}

		& > .value {box-sizing:border-box;}

		@media (width >= 600px) {
			align-items:baseline;
			display:inline grid;
			grid-template-columns:5em 1em 1fr;

			& > .value {display:inline flow-root;}
		}

		@media (600px > width) {
			display:block;

			& > .value {
				display:block flow-root;
				padding:0.25em 0 0 2em;
			}
		}
	}
}

.btn_box {
	border:none;
	display:flex;
	padding:0;

	button {
		background-color:#eee;
		border:none;
		box-sizing:border-box;
		height:2em;
		padding:0 10px;
		min-width:150px;

		&.save {background-color:#add8e6;}

		&.edit {background-color:#add8e6;}

		&.del {background-color:#c0c0c0;}

		&:enabled {cursor:pointer;}
	}

	@media (width >= 600px) {
		flex-wrap:wrap;
		justify-content:space-around;
		margin:20px auto 0;
		max-width:900px;
		gap:30px 20px;
	}

	@media (600px > width) {
		flex-direction:column-reverse;
		gap:30px 0;
		text-align:center;
		margin:20px 0 0;
	}
}

/** メニュー */
.menu_list {
	display:flex;
	flex-wrap:wrap;
	gap:2em;
	margin:auto;
	padding:0;
	width:min(600px, 100%);

	& > li:has(button) {
		display:block;
		text-align:center;
		width:100%;
	}

	& > li:not(:has(button)) {
		display:inline-block;
		margin:0;
		width:fit-content;

		a {color:inherit;}
	}

	button {
		background:floralwhite;
		border-color:#e3e3e3;
		box-sizing:border-box;
		height:2.5em;
		text-align:left;
		width:18em;

		&:hover {opacity:0.7;}

		&:enabled {cursor:pointer;}
	}

	& > li:not(:has(button))::before, button::before {
		content:'▶';
		margin:0.5em;
	}
}

/**/
.error {
	color:red;
	margin:1em auto;
	width:100%;
	max-width:600px;
}