@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;
	float:left;
	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.logo:hover {opacity:0.7;}

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

@media (max-width : 800px) {

	.h_user {
		line-height:1;
	}

}

/* ログアウト */
.logout {
	border:1px solid #ccc;
	box-sizing:border-box;
	color:inherit;
	float:right;
	margin-left:300px;
	padding:5px;
	text-align:center;
	text-decoration:none;
	width:104px;
}

/* ナビゲーション */
.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 (max-width: 500px) {

	.page_name {
		margin:70px auto 0;
	}

}

@media not all and (max-width: 500px) {

	.page_name {
		color:#fff;
		left:0;
		margin:auto;
		position:absolute;
		right:0;
		top:0;
	}

}

/* フッター */
footer {
	font-size:0.937rem;
	position:sticky;
	text-align:center;
	top:100vh;
}

footer > p {margin:0.25em 0;}

/* 著作権表示 */
.copyright {font-size:0.875rem;}

/* ボタン */
[data-btn-type] {
	background-color:#eee;
	border:none;
	box-sizing:border-box;
	height:2em;
	padding:0 10px;
	min-width:150px;
}

[data-btn-type]:enabled {
	cursor:pointer;
}

[data-btn-type="login"] {
	display:block;
	margin:auto;
}

[data-btn-type="save"] {
	background-color:#add8e6;
}

[data-btn-type="edit"] {
	background-color:#add8e6;
}

[data-btn-type="del"] {
	background-color:#c0c0c0;
}

[data-table-btn] {
	background-color:transparent;
	border:none;
	margin:0;
	padding:0;
	text-decoration:underline;;
}

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

/* 戻るbtn */
.back_btn_form {
	display:block;
	margin:0 auto 20px;
	text-align:right;
	width:100%;
}

@media (max-width: 500px) {

	.back_btn_form {
		margin:-100px auto 70px;
	}

}

[data-btn-type="back"] {
	background-color:#eee8aa;
}

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

.new_btn_2 {
	margin-left:10px;
}

@media (min-width: 600px) {

	.new_btn_form {
		pointer-events:none;
		position:absolute;
		right:0;
		top:0;
	}

	.new_btn_form > * {
		pointer-events:auto;
	}

}

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

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

.search_box_title {
	flex-shrink:0;
}

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

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

.list_search {
	border-collapse:collapse;
	display:table;
	margin:0 auto 20px;
	width:100%;
	max-width:950px;
}

.box_scroll_x > .list_search {
	width:max(950px, 100%);
	max-width:initial;
}

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

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

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

.list_search a {color:inherit;}

.list_body_stripe tr:nth-child(even) {background-color:#eee;}

.list_search tr[data-sale-flg="false"] {background-color:#ffc;}

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

.paging_text {
	display:block;
	margin:0;
	padding:0;
}

.paging_form {
	align-self:end;
	display:flex;
	margin:0;
	padding:0;
	max-width:100%;
}

.paging_form > button {
	height:auto;
	margin:0 0 0 10px;
	width:90px;
	min-width:auto;
	max-width:calc(25% - 10px);
}

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

.form_item {
	box-sizing:border-box;
	margin:0;
	padding:10px;
	width:100%;
	max-width:100%;
}

.form_title {
	display:inline-block;
	display:inline flow-root;
	text-align:right;
}

.form_value {
	box-sizing:border-box;
}

@media not all and (max-width: 600px) {

	.form_item {
		align-items:baseline;
		display:inline-grid;
		display:inline grid;
		grid-template-columns:5em 1em 1fr;
	}

	.form_value {
		display:inline-block;
		display:inline flow-root;
	}

}

@media (max-width: 600px) {

	.form_item {
		display:block;
	}

	.form_value {
		display:block;
		display:block flow-root;
		padding:0.25em 0 0 2em;
	}

}

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

@media (max-width: 600px) {

	.btn_box {
		flex-direction:column-reverse;
		gap:30px 0;
		text-align:center;
		margin:20px 0 0;
	}

}

@media not all and (max-width: 600px) {

	.btn_box {
		flex-wrap:wrap;
		justify-content:space-around;
		margin:20px auto 0;
		max-width:900px;
		gap:30px 20px;
	}

}

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

.menu_list_item_block {
	display:block;
	width:100%;
}

.menu_list_item_inline {
	display:inline-block;
	margin:0;
	width:fit-content;
}

.menu_list_item_inline::before, .menu_btn::before {
	content:'▶';
	margin:0.5em;
}

.menu_text {
	display:block;
	font-size:0.875em;
	line-height:1.5;
	margin:1em auto 0;
}

.menu_btn {
	background:floralwhite;
	border-color:#e3e3e3;
	box-sizing:border-box;
	height:2.5em;
	text-align:center;
	width:18em;
}

.menu_btn:hover {opacity:0.7;}

/**/
.home_log_box {
	display:block;
	margin:0 auto 20px;
	padding:0;
	width:900px;
	max-width:100%;
}

.home_log_btn_f {
	display:block;
	margin:0 0 10px;
	padding:0;
	text-align:right;
}

.home_log {
	border-collapse:collapse;
	width:100%;
}

.home_log th, .home_log td {
	padding:2px;
	text-align:center;
}

.home_log th {background-color:#fdf5e6;}

.home_log td {
	border:1px solid #ccc;
}

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