@charset "UTF-8";


:root{
	--bg:#f3f5f7;
	--panel:#ffffff;
	--line:#e6ebef;
	--text:#222222;
	--muted:#66717c;
	--brand:#0b74b8;
	--brand2:#00a0d6;
	--danger:#d62828;
	--shadow:0 10px 24px rgba(16,24,40,.08);
	--radius:10px;
	--sidebar:#eef2f5;
	--chip:#d9dee3;
	--orange:#f59e0b;
	--blue:#2563eb;
	--slotGray:#8b8f94;
	--slotGrayDark:#6e7378;
	--slotCream:#f6e7c7;
	--slotSky:#dbeafe;
}

*{
	box-sizing:border-box;
}

body{
	margin:0;
	color:var(--text);
}

/* Layout */
.app{
	display:grid;
	grid-template-columns: 260px 1fr;
	min-height:100vh;
}

/* Sidebar */
aside{
	background:var(--sidebar);
	border-right:1px solid var(--line);
	padding:25px 14px;
	width: 280px;
	
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.logo{
	display:flex;
	gap:10px;
	align-items:flex-start;
	padding:14px 6px 14px;
	border-bottom:1px solid var(--line);
	margin-bottom:14px;
	background-color: #ef2221;
	background-color: #0F2E3A;
}
.logoMark{
	width:44px;height:44px;border-radius:8px;
	background:linear-gradient(135deg,var(--brand),var(--brand2));
	box-shadow:0 6px 14px rgba(11,116,184,.22);
	flex:0 0 auto;
}
.logoText{
	line-height:1.2;
}
.logoText .kicker{
	color:var(--muted);
}
.kicker img{
	width: 100%;
}
.logoText .title{
	margin-top:4px;
	color: white;
}
.menuGroupTitle{
	color:var(--muted);
	margin:14px 8px 8px;
}
nav div{
	margin: 16px 0;
}
nav a{
	font-size: 14px;
	display:block;
	align-items:center;
	justify-content:space-between;
	border-radius:10px;
	text-decoration: underline;
}
nav a:hover{ background:#e7edf2; }
nav a::before{
	content: "・";
}
nav span{
	display: block;
	font-size: 14px;
}
.badge{
	padding:2px 8px;
	color:var(--danger);
	font-weight:700;
}
.subtleLink{
	display:block;
	position: absolute;
	bottom: 16px;
	margin:16px 10px 0;
	color:var(--muted);
	text-decoration:none;
}
.subtleLink:hover{
	color:#2d3640;
	text-decoration:underline;
}

/* Main */
main{
	box-shadow: 0 0 4px #aaaaaa;
	height: 2000px;
}
.wrap{
	max-width:1280px;
	padding: 25px 40px;
	background:var(--bg);
}

.card{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:18px 18px;
	margin-bottom:18px;
}
.cardHeader{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:14px;
	margin-bottom:10px;
}
h2{
	margin:0;
	letter-spacing:.02em;
}
.chev{
	width:36px;height:36px;border-radius:10px;
	border:1px solid var(--line);
	background:#fafbfd;
	display:grid;place-items:center;
	cursor:pointer;
	user-select:none;
}
.chev:hover{ background:#f3f6f9; }

/* Notice list */
.noticeList{
	margin:0;
	padding:0;
	list-style:none;
	display:grid;
	gap:10px;
}
.noticeItem{
	display:grid;
	grid-template-columns: 92px 1fr;
	gap:12px;
	align-items:center;
	font-size:14px;
}
.date{
	color:var(--muted);
	font-variant-numeric: tabular-nums;
}
.dots{
	display:flex;
	gap:4px;
	flex-wrap:wrap;
	align-items:center;
}
.dot{
	width:10px;
	height:10px;
	border-radius:999px;
	border:1px solid #c9d1d9;
	background:#fff;
}
.dot.on{
	background:#111827;
	border-color:#111827;
}
.noticeItem a{
	color:var(--brand);
	text-decoration:none;
	font-weight:600;
}
.noticeItem a:hover{ text-decoration:underline; }

/* Matching section */
.desc{
	color:var(--muted);
	line-height:1.6;
	margin:0 0 14px;
}
.accept{
	margin-top: 25px;
	font-size: 24px;
	font-weight: 600;
}
.boards{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:16px;
	margin-top:48px;
}

.boardTitle{
	text-align:center;
	font-size: 20px;
	font-weight:800;
	line-height: 110%;
	padding: 10px;
}
.boardTitle.orange{ color:var(--orange); background-color:var(--slotCream); }
.boardTitle.blue{ color:var(--blue); background-color:var(--slotSky); }

/* Timetable */
.timetable{
	border-radius:5px;
	overflow:hidden;
	background:#fff;
}
.timetable.themeCream{
	border:2px solid var(--slotCream);
}
.timetable.themeSky{
	border:2px solid var(--slotSky);
}
.ttHead{
	display:grid;
	grid-template-columns: 70px 1fr 1fr;
	border-bottom:1px solid var(--line);
	background:#fafbfd;
	color:var(--muted);
	font-weight:700;
}
.ttHead div{
	padding:10px 10px;
}
.ttHead .colLabel{
	text-align:center;
	color:#374151;
}

.ttRow{
	display:grid;
	grid-template-columns: 70px 1fr 1fr;
	border-bottom:2px solid white;
	min-height:42px;
}
.ttRow:last-child{ border-bottom:none; }

.time{
	padding:10px;
	font-variant-numeric: tabular-nums;
	color:var(--muted);
	background:#fbfcfd;
	border-right:1px solid var(--line);
	border-right:2px solid white;
}
.slot{
	padding:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	letter-spacing:.02em;
	user-select:none;
	border-right:2px solid white;
}

/* Left board colors (cream background with gray reserved) */
.themeCream .slot.free{ background:var(--slotCream); color:#5b4b2e; }
.themeCream .slot.reserved{ background:var(--slotGray); color:#fff; }
.themeCream .slot.reserved.dark{ background:var(--slotGrayDark); }

/* Right board colors (sky background with gray reserved) */
.themeSky .slot.free{ background:var(--slotSky); color:#173b6c; }
.themeSky .slot.reserved{ background:var(--slotGray); color:#fff; }
.themeSky .slot.reserved.dark{ background:var(--slotGrayDark); }

/* Responsive */
@media (max-width: 980px){
	.app{ grid-template-columns: 1fr; }
	aside{ position:sticky; top:0; z-index:10; }
	.boards{ grid-template-columns: 1fr; }
}

/* Collapsible body */
.cardBody[hidden]{ display:none; }



.case_list{
	margin-top: 48px;
}
.case_list ul {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.case_list li {
	display: table-row;
}

.case_list li > div {
	display: table-cell;
	padding: 10px;
	border: 1px solid #ccc;
	vertical-align: middle;
}

/* 1行目をヘッダー風に */
.case_list li:first-child > div {
	background: #666666;
	font-weight: bold;
	text-align: center;
	color: white;
}

/* ボタンを中央寄せ */
.case_list li > div:last-child {
	text-align: center;
}


/* 2行目以降の偶数行 */
.case_list li:nth-child(n+2):nth-child(even) > div {
	background-color: #ffffff;
}

/* 2行目以降の奇数行 */
.case_list li:nth-child(n+2):nth-child(odd) > div {
	background-color: #f5f5f5;
}


.booth{
	font-size: 24px;
	font-weight: 600;
	text-decoration: underline;
}

.popup_body{
	padding: 20px;
}
.preferred_day{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.preferred_day select{
	margin-left: 1.5em;
	padding: 4px;
}


.textbox{
	height: 32px;
	width: 400px;
}
.popup_logo{
	width: 240px;
}
.popup_submit{
	text-align: center;
}
.popup_submit button{
	font-size: 18px;
	width: 180px;
	padding: 4px;
	
}
.popup_send{
	text-align: center;
	padding: 78px;
}
.popup_send h2{
	margin-bottom: 60px;
}



.login_body{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.login_body h2{
	text-align: center;
	margin: 32px;
	margin-top: 56px;
	font-size: 32px;
}
.login_gray{
	background-color: #acacac;
	display: flex;
	border-radius: 3px;
}
.login_gray img{
	height: 32px;
	padding: 3px;
}
.login_gray input{
	width: 375px;
}
.login_notice{
	font-size: 14px;
}
.login_button{
	width: 407px;
	border-radius: 3px;
	font-size: 20px;
	color: white;
	background-color: #2288ee;
	padding: 6px;
	margin-top: 32px;
	text-align: center;
	transition: 0.2s;
}

.login_button:hover{
	transform: scale(103%);
}

.span_notice{
	display: inline-block;
	font-size: 14px;
	color: red;
	margin-left: 2em;
}

.confirm{
	text-align: center;
	font-size: 30px;
}

.send_message{
	margin: 10px auto;
	margin-bottom: 30px;
}


/* 背景 */
.overlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	justify-content:center;
	align-items:center;
}

/* モーダル */
.modal{
	position:relative;
	background:#fff;
	padding:46px;
	border-radius:10px;
	width:80%;
	max-width:780px;
}
.modal h2{
	margin-bottom: 32px;
}

/* ×ボタン */
.close{
	position:absolute;
	top:10px;
	right:15px;
	font-size:28px;
	cursor:pointer;
}





/*****************************************************************************************/
/*****************************************************************************************/
/* ########### hoverが効かないスマホ等用 ########### */
/*****************************************************************************************/
/*****************************************************************************************/
@media (any-hover: none) or (max-width: 767px) {

	main{
		width: 98%;
	}
	header h1.content_title{
		height: 54px;
	}
	table *{
		box-sizing: border-box;
	}
	table.frmBlock th, table.frmBlock td{
		font-size: 14px;
		font-weight: 400;
		width: 48%;
	}
	

	table.frmBlock th{

		span{
			font-size: 10px;
			font-weight: 400;
			padding: 0 4px;
			margin-left: 6px;
		}
	}
	table.frmBlock td{
		padding-left: 8px;
	}
	
	.btnBox input[type="submit"]{
		margin-bottom: 16px;
	}
	table.frmBlock input[type="text"]{
		width: 80%;
	}
	
	#trigger{
		font-size: 11px;
	}
}