/*****************************************************

	header

*****************************************************/
#header {
	width: 100%;
	margin-bottom: 10px;

	& .inner {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 10px 0;

		& .left {
			display: flex;
			align-items: center;
			gap: 5px;

			& .logo {
				height: 40px;
			}

			& h1 {
				font-size: 30px;
				margin: 0;
			}
		}

		& .right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 20px;

			& h3 {
				font-size: 20px;
				margin: 0;
			}

			& .header-acts {
				display: flex;
				gap: 10px;

				& .header-btn {
					min-width: 150px;
					padding: 10px;
					font-size: 20px;
					color: #fff;
					border-radius: 5px;
					text-decoration: none;
					white-space: nowrap;

					display: inline-flex;
					align-items: center;
					justify-content: center;

					box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
					transition: 0.3s;

					&:hover {
						background: #fff;
					}
				}

				& .menu-btn {
					background: #F90;
					border: 1px solid #F90;

					&:hover {
						color: #F90;
					}
				}

				& .logout-btn {
					background: #F60;
					border: 1px solid #F60;

					&:hover {
						color: #F60;
					}
				}
			}
		}
	}
}

/*****************************************************

	loginページ

*****************************************************/
#login-title {
	h1, h2 {
		font-size: xx-large;
		font-weight: 500;
	}
	margin-top: 30px;
	text-align: center;
}

#login-logo {
	margin: 50px auto 0;
	width: 170px;
}
#login-wrap {
	width: 800px;
	margin: 40px auto;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	text-align: center;
	padding: 50px 0;
	& ul {
			width: 520px;
			margin: 0 auto 20px;
			& li {
					display: flex;
					justify-content: flex-end;
					align-items: baseline;
					font-size: 23px;
					font-family: "メイリオ", Meiryo, Osaka, ;
					color: #111;
					& .form {
							padding: 10px 10px;
							background: #fff;
							border: 1px solid #ccc;
							margin-bottom: 25px;
							margin-left: 5px;
							font-size: 22px;
							width: 300px;
						}
				}
		}
	& .login-btn {
		width: 250px;
		height: auto;
		padding: 12px 20px;
		color: #fff;
		background: #F60;
		border: none;
		outline: none;
		font-size: 22px;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
		&:hover {
			background: #F90;
			font-size: 22px;
		}
	}
}

/*****************************************************

	共通

*****************************************************/
.page-title {
	width: 900px;
	margin: 0 auto 10px;

	& h2 {
		border-left: 10px solid #F90;
		padding-left: 20px;
		font-size: 28px;
	}

	& h3 {
		margin-left: 0;
		padding-left: 30px;
		font-size: 22px;
	}
}

.block {
/*	width: 900px; */
	width: 90%;
	margin: 0 auto 10px;

	& .block-head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 10px;
		
		& h4 {
			margin: 0;
			font-size: 22px;
		}
		
		& .b-rgt {
			display: flex;
			gap: 10px;
		}
	}
	
	& .block-foot {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin: 10px auto;
	}

	& table {
		width: 100%;
		border-collapse: collapse;
		font-size: 18px;
		border: 1px solid #3c6690;

		& th,
		& td {
			text-align: center;
			padding: 2px;
			border: 1px solid #3c6690;
			&.lft {
				text-align: left;
			}
		}

		& th {
			color: #fff;
			background: #2EA7E0;
			align-content: center;
			& .sort_cursor {
				display: inline-block;
				margin-left: 10px;
			}
		}
		
		& td.pstContent {
			text-align: left;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; /* 任意の行数を指定 */
		}
		
		& td.evDel {
			white-space: nowrap;
			& span {
				color: red;
				text-decoration: underline;
				cursor: pointer;
			}
		}
		
		& td.attList {
			white-space: nowrap;
		}
		
		& td.evBranch {
			white-space: nowrap;
		}
	}
	
	& input,
	& textarea,
	& select {
		/*width: 100%;
		box-sizing: border-box;
		display: block;*/
		font-size: 16px;
	}
	
	& label {
		display: inline-flex;
		align-items: center;

		white-space: nowrap;
		margin: 0 14px 4px 0;
		gap: 6px;
		cursor: pointer;
		&.error {
			color: red;
			cursor: default;
		}
	}
	
	& dropbox {
		display: inline-block;
	}
}

.action-btn {
	/* ===== 共通 ===== */
	padding: 1px 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	white-space: nowrap;

	font-size: 16px;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;

	transition: 0.25s;

	/* ===== 基本色（デフォルト） ===== */
	background: #1F7FB3;
	border: 1px solid #1F7FB3;
	color: #fff;

	&:hover {
		background: #fff;
		color: #1F7FB3;
	}

	/* ===== 削除だけ例外 ===== */
	&.action-del,
	&.action-rst,
	&.action-edt {
		background: #2F4F6F;
		border-color: #2F4F6F;

		&:hover {
			background: #fff;
			color: #2F4F6F;
		}
	}
	
	/*&.action- {
		background: #2EA7E0;
		border-color: #2EA7E0;

		&:hover {
			background: #fff;
			color: #2EA7E0;
		}
	}*/
}

.qrybox {
	padding: 10px 12px;

	& fieldset {
		margin: 10px 0;
		padding: 8px 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		min-width: 0;

		& legend {
			padding: 0 6px;
			font-weight: bold;
		}
	}
}

.lyt-fix { 
	table-layout: fixed; 
}

.flx {
	display: flex;
	gap: 10px;
}

.gap-y {
	margin: 8px 0;
}

.csvonly {
	display: none;
}

.red {
	color: red;
}

/*****************************************************

	メニューページ

*****************************************************/

.menu-cont {
	width: 900px;
	margin: 0 auto;
	& ul {
			display: flex;
			flex-wrap: wrap;
			& li {
					width: 230px;
					text-align: center;
					text-wrap-mode: nowrap;
					font-size: 24px;
					margin: 10px;
					border: 2px solid #2EA7E0;
					box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px;
					color: #000;
					align-content: center;
					&:hover {
							background: #2EA7E0;
							box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px;
					}
					& a {
							padding: 20px 0;
							display: block;
							width: 100%;
							color: #000;
							&:hover {
									color: #FFF;
							}
							& .fmail {
								padding: 18px 0;
							}
						}
			}
	}
}
.menu-cat {
	& h3 {
		font-size: 25px;
		margin: 0 20px;
	}
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border: 1px solid #ccc;
	margin: 15px 0;
}

/*****************************************************

	会員検索ページ

*****************************************************/

select[name="qmc"] {
	width: 6rem;
	height: 2rem;
}

.thMbReg,
.thMbInvalid,
td.mbReg,
td.mbInvalid {
	width: 4rem;
}

.thMbAge,
td.mbAge {
	width: 6rem;
}

td.mbName {
	cursor: help;
	word-break: keep-all;
}

#wrapResult {
	min-width: 900px;
	max-width: 85%;
	width: fit-content;
}

/*****************************************************

	会員登録ページ

*****************************************************/


/*****************************************************

	催事検索ページ

*****************************************************/




/*******抽出内容▼*******/


/*****************************************************

	メール登録ページ

*****************************************************/
.block {
	& details {
			& label {
				margin-top: 5px;
				margin-left: 10px;
			}
	}
}

details[open] .spn-acc::after {
	content: "△";
}
summary {
	margin-bottom: 10px;
	list-style: none;
}
.spn-acc {
	padding: 5px 10px;
	margin-right: .5em;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;

	&::after {
		content: "▽";
		display: inline-block;
	}
}
#inpEvName,
#inpEvAbbr,
#inpEvMailSubject,
#inpSubject {
	width: 60%;
}
.qrow {
	margin: 5px 0;
}
.inp-qdesc {
	width: 40%;
}
.inp-qopt {
	width: 30%;
	margin-right: 1em;
}
.spn-q {
	padding-right: .5em;
}
.spn-opt {
	padding-left: 1em;
	padding-right: .5em;
}
.btn-delquery {
	color: red;
	font-weight: bold;
	cursor: pointer;
}


/* older style */
.List-boxt table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 18px;
}
.List-box table th:first-child {
	border-radius: 5px 0 0 0;
}
.List-box table th:last-child {
	border-radius: 0 5px 0 0;
	border-right: 1px solid #3c6690;
}
.List-box table th {
	text-align: center;
	color: white;
	background: #2EA7E0;
	border-left: 1px solid #3c6690;
	border-top: 1px solid #3c6690;
	border-bottom: 1px solid #3c6690;
	padding: 8px 5px;
}
.List-box table td {
	text-align: center;
	border-left: 1px solid #a8b7c5;
	border-bottom: 1px solid #a8b7c5;
	border-top: none;
	padding: 8px 5px;
}
.List-box table td:last-child {
	border-right: 1px solid #a8b7c5;
}
.List-box table tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
}
.List-box table tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
}

/* Hide Default Checkbox */
.list-cont input[type="checkbox"] {
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	color: #727272;
	width: 25px;
}
/* Create a Box */
.List-box input[type="checkbox"] + span::before {
	display: inline-block;
	content: '';
	width: 25px;
	height: 25px;
	border: 2px solid #ccc;
	border-radius: 5px;
    margin-right: .5rem;
	vertical-align: text-top;
	padding: 2px 2px;
	margin-bottom: 10px;
}
/* Checked Style */
.List-box input[type="checkbox"]:checked + span::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='%230bd' stroke-width='3' points='2,7.3 7.3,12.7 18,2 '/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0px 2px;
}
/* Focused Style */
.List-box input[type="checkbox"]:focus + span::before {
	border-color: #2EA7E0;
}

.regist-cont table td .id-box dt{
	width: 300px;
	float: left;
}

.id-box .id-btn{
	font-size: 18px;
}

.id-box input {
   /* input要素全部に対して装飾 */
   background-color: #2EA7E0;
   border: 1px solid #2EA7E0; /* 枠線 */
   border-radius: 0.3em;
   padding: 2 8px;      /* 角丸 */
   color: #fff;
   -webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.id-box input:hover {
   /* マウスが上に載ったとき */
   color: #2EA7E0;
   border: 1px solid #2EA7E0;
   border-radius: 0.3em;
   padding: 2 8px;      /* 角丸 */
   -webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	background-color: #fff;
}

.textarea{
	font-size: 18px;
}

#trQueryTarget > td {
	padding: 0;
}

#queryTargetCond {
	position: relative;
	top: 0;
	left: -136px;
	width: calc(100% + 136px);
	margin-bottom: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
}

#queryTargetCond th {
	width: 114.8px;
}

#queryTargetCond th,
#queryTargetCond td {
	border-top: none;
	border-right: none;
}

#queryTargetCond tr:last-child th,
#queryTargetCond tr:last-child td {
	border-bottom: none;
}


/*****************************************************

	管理者管理ページ

*****************************************************/


/*****************************************************

	出欠検索 ページ

*****************************************************/




/*******抽出内容▼*******/
.Ext-box3 {
	width: 900px;
	margin: 0 auto 100px;
}
.Ext-box3 table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 18px;
}
.Ext-box3 table th:first-child {
	border-radius: 5px 0 0 0;
}
.Ext-box3 table th:last-child {
	border-radius: 0 5px 0 0;
	border-right: 1px solid #3c6690;
}
.Ext-box3 table th {
	text-align: center;
	color: white;
	background: #2EA7E0;
	border-left: 1px solid #3c6690;
	border-top: 1px solid #3c6690;
	border-bottom: 1px solid #3c6690;
	padding: 10px 0;
}
.Ext-box3 table td {
	text-align: center;
	border-left: 1px solid #a8b7c5;
	border-bottom: 1px solid #a8b7c5;
	border-top: none;
	padding: 10px 0;
}
.Ext-box3 table td:last-child {
	border-right: 1px solid #a8b7c5;
}
.Ext-box3 table tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
}
.Ext-box3 table tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
}