@CHARSET "UTF-8";

/* 横幅をモバイルに対応【共通】 */
.loginContent ,
.topContent ,
.callContent ,
.messageContent {
	max-width: 640px;
	background-color: #e5f3fb;
	margin: 0 auto;
}

.header {
	background-color: #4b0082;
	padding: 1em;
	text-align: left;
	color: #fff;
	margin-bottom: 1em;
}
.header a {
	cursor: pointer;
}

/* ログイン */

.loginContent .header {
	display: none;
}

.loginContent {
	text-align: center;
	padding-top: 3em;
}

.loginContent p {
	font-size:300%;
	margin: 30px 0;
}
.loginContent dt ,
.loginContent dd {
	margin: 10px 0;
}
.loginContent input {
	height: 100px;
	font-size: 150%;
	width: calc(80% - 1em);
	padding: 0 0.5em;
	border-radius: 20px;
}
.loginContent #login-button {
	height: 100px;
	margin: 30px 0;
	width: 80%;
	border-radius: 20px;
}

/* メニュー【点呼選択】 */

.topContent .work {
	margin-bottom: 0.5em;
}
.topContent .work button ,
.topContent .manage button {
	width: 100%;
	border: none;
	border-radius: 20px;
	padding: 0.5em 0;
	background-color: #e6e6fa;
	color: #000080;
	font-size:300%;
	margin-bottom: 10px;
}
.topContent .work button:hover {
	background-color: #b0c4de;
	color: #191970;
}
.topContent .info {
	width: calc(100% - 40px);
	border: none;
	border-radius: 20px;
	padding: 15px 20px;
	margin-top: 1em;
	background-color: #e0ffff;
	color: #4b0082;
	font-size:100%;
}
.topContent .info p.title {
	margin: 10px;
	padding: 10px 0;
	font-size:100%;
	border: none;
	border-radius: 10px;
	background-color: #4b0082;
	color: #e0ffff;
	text-align: center;
}
.topContent .manage {
	margin-top: 0.5em;
}
.topContent .manage button {
	background-color: #7fffd4 ;
	color: #000;
}
.topContent .manage button:hover {
	background-color: #98fb98;
	color: #191970;
}

/* TOPへ戻るボタン【共通】 */

.buttons .toTop {
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 10px;
	margin: 0 0 0.5em 1em ;
	padding: 0.5em 0;
	background-color: #000080;
	color: #fff;
}

/* 点呼実施画面【共通】 */

.callContent {
	text-align: center;
}
.callContent .titleCall{
	font-size: 180%;
}

.callContent .checkPoint {
	border: 2px solid #000080;
	margin: 1em;
	padding: 0 0 0.5em;
}
.callContent .checkPoint .question {
	font-size: 100%;
	margin: 0;
	padding: 1em 0.5em;
	background-color: #000080;
	color: #fff;
}
.callContent .checkPoint .answer {
	font-size: 100%;
	margin: 1em 0.5em 0.5em;
	width: calc(100% - 1em);
	display: flex;
	justify-content: center;
}
.callContent .checkPoint .answer input {
	width: 90%;
	padding: 1em 0.5em;
	border-radius: 10px;
	text-align: center;
}

.callContent .checkPoint .answer input[type=radio] {
	width: 100px;
	height: auto;
}
.callContent .checkPoint .answer label.btnYesNo {
	margin: 1em ;
}
		
.functions {
	width: 100%;
	text-align: center;
}

.functions button {

	width: calc(100% - 40px);
	border: none;
	border-radius: 20px;
	padding: 0.5em 0;
	background-color: #000080;
	color: #e6e6fa;
	font-size:300%;
	margin-bottom: 10px;
	
}

.messageDetail {
	display: none;
	padding: 10px;
	background-color: #f0f0f0;
	margin-top: 5px;
	border: 1px solid #ddd;
}

.selectYearMonth {
	border-radius: 10px;
	background-color: #f0f0f0;
	padding: 1em;
	margin: 20px 0;
}

/* ここから */
@media screen and (min-width: 640px) {
	/* 640px以上に適用されるCSS（PC用） */

	.loginContent ,
	.topContent ,
	.callContent ,
	.messageContent {
		max-width: 1024px;
	}

	.loginContent input {
		font-size:150%;
		height: 80px;
		width: calc(300px - 1em);
	}
	.loginContent #login-button {
		height: 80px;
		margin: 50px 0;
		width: 300px;
		cursor: pointer;
	}
	
	.topContent .work button ,
	.topContent .manage button {
		width: 160px;
		height: 200px;
		margin: 2px 5px;
		font-size: 100%;
	}
			
	.functions button {
		width: 250px;
		padding: 0.5em;
		margin: 2px auto;
		font-size: 100%;
		background-color: #000080;
		color: #e6e6fa;
		font-size:200%;
	}

	.messageContent table input ,
	.messageContent table textarea {
		width: calc(100% - 1em);
		padding : 0.5em;
	}
	.messageContent table textarea {
		height: 10em;
	}



}