@charset "UTF-8";
/* レイアウトＣＳＳ (181205) */



/* ■ お知らせ ----------------------------------------------------- */
#information h2 {
	margin-bottom: 15px;
	color: #F7DD67;
	text-shadow: 1px 1px 2px #000;
}

#information p {
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

/* ■ 新着情報 ----------------------------------------------------- */
#news dt {
	padding: 0.5rem 0 0;
	border-top: 1px dotted #246194;
	color: #246194;
}

	#news dt:first-child {
		border-top: none;
	}

#news dd {
	padding: 0.3rem 1rem;
}



/* ■ ログイン ----------------------------------------------------- */
#login {
	box-sizing: border-box;
	border: 2px solid #8AB9E2;
	border-radius: 5px; /* CSS3草案 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px; /* Firefox用 */
	background-color: #FFF;
	text-align: center;
}
#login dl {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
	gap: 0.5rem;
}
#login dt {
	width: 6rem;
  align-self: stretch;
	display: flex;
	place-items: center;
  justify-content: flex-end;
}
#login dd {
	width: calc(100% - 8rem );
	flex-grow: 1;
  display: flex;
  align-items: center;
}

#login dd.check,
#login dd.checklock {
	width: 100%;
	flex-basis: 100%;
  justify-content: center;
}


#login input[type="text"],
#login input[type="password"] {
	margin: 0;
	line-height: 1.5rem;
	border: 1px solid #8AB9E2;
}
#login dt {
	font-weight: bold;
	color: #246194;
}
#login input[type="checkbox"] {
	margin-right: 0.5rem;
}

#login a {
	font-size: 0.9em;
	color: #195998;
}


/* ■ ログイン先 --------------------------------------------------- */
#info {
	text-indent: 0.5rem;
}

	#info span {
		background: #7DC035;
		border: 4px solid #337A2D;
		border-radius: 5px; /* CSS3草案 */
		-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
		-moz-border-radius: 5px; /* Firefox用 */
		display: block;
		text-shadow: 1px 1px 2px #222;
		font-weight: bold;
		color: #FFF;
	}

	#info b {
		color: #337A2D;
	}



/* ■ エラーメッセージ --------------------------------------------- */
.errorLogin {
	text-indent: 0.5rem;
	margin-top: 5px;
	display: inline-block;
	text-align: left;
	color: #d00;
	line-height: 2rem;
}



/* ---------------------------------------------------------------------------------------- ▼ スマホ用 */
@media screen and (max-width:779px) {

	/* ▼ お知らせ ----------------------------------------------------- */
	#information {
		margin-bottom: 0.5rem;
		padding: 0.5rem 2%;
		background-color: rgba(1,43,128,0.6);
	}



	/* ▼ 新着情報 ----------------------------------------------------- */
	#news h2 {
		padding-top: 0.3rem;
		text-indent: 0.5rem;
		background-color: #579CD3;
		color: #FFF;
	}

	/* ▼ ログイン ----------------------------------------------------- */
	#login {
		margin: 0 auto;
		width: 96vw;
		padding: 0 1vw 0.5rem;
	}
	#login dd.checklock p {
		font-size: 3.4vw;
	}

	#login input[type="text"],
	#login input[type="password"] {
		width: calc(100% - 0.5rem);
	}
	#login input[type="submit"],
	#login input[type="button"] {
		width: 7rem;
		box-sizing: border-box;
	}
}
/* ▲ ------------------------------------------------------- ▲ スマホ用 END */


/* ---------------------------------------------------------------------------------------- ▽ ＰＣ用 */
@media screen and (min-width:780px) {
	body {
		background: #fff url(img/home-bg03.png) no-repeat 50% 100px;
	}

		body.spring {
			background-image: url(img/home-bg00.jpg);
		}

		body.summer {
			background-image: url(img/home-bg01.jpg);
		}

		body.autumn {
			background-image: url(img/home-bg02.jpg);
		}

		body.winter {
			background-image: url(img/home-bg03.jpg);
		}

	#contents {
		width: 100%;
		max-width: 1200px;
	}

	#mainContents {
		margin-left: 3%;
		width: 94%;
		display: table;
	}

	#news {
		display: table-cell;
	}
  #login {
		display: table-cell;
	}




	/* ▽ お知らせ ----------------------------------------------------- */
	#information {
		margin: 3%;
		width: 90%;
		padding: 1rem 2%;
		background-color: rgba(87,87,87,0.6);
	}

	/* ▽ 新着情報 ----------------------------------------------------- */
	#news {
		position: relative;
		padding-left: 1rem;
	}

		#news h2 {
			position: absolute;
			z-index: 1;
			top: -1rem;
			left: 0.5rem;
			background-color: #579CD3;
			width: 5rem;
			height: 5rem;
			line-height: 5rem;
			text-indent: 0;
			font-size: 1rem;
			padding: 0.5rem;
			text-align: center;
			color: #FFF;
		}

		#news dl {
			position: absolute;
			top: 0;
			right: 1rem;
			left: 0;
			background: #FFF;
			padding: 1rem 1rem 1rem 7rem;
			max-height: 280px;
			overflow: auto;
		}

		#news dd {
			padding: 0;
			font-size: 16px;
		}

	/* ▽ ログイン ----------------------------------------------------- */
	#login {
		width: 400px;
		padding: 1rem 0.5rem;
	}
	#login dd.checklock p {
		padding: 0.5rem 0;
		font-size: 14px;
	}
	#login input[type="text"],
	#login input[type="password"] {
		width: calc(100% - 1rem);
	}
	input[type="submit"] {
		padding: 0.3rem 1rem;
		width: 7rem;
		margin: 1rem 0.5rem;
	}


	/* ▽ ログイン先 --------------------------------------------------- */
	#info {
		position: absolute;
		margin-top: -50px;
		width: 400px;
	}

		#info span {
			padding-top: 0.5rem;
			height: 40px;
			line-height: 40px;
			font-size: 21px;
		}
		#info b {
			line-height: 18px;
			font-size: 40px;
		}
}
/* △ ------------------------------------------------------- △ ＰＣ用 END */





/*
▼ コンテンツ
============================================================================= */
#contents {
}



/* ▽ エラーページ ------------------------------------------------- */
#errorPage {
	margin: 100px auto 0px;
	width: 60%;
	border-radius: 10px; /* CSS3草案 */
	-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
	-moz-border-radius: 10px; /* Firefox用 */
	padding: 20px;
	background: #FFF;
	border: 5px solid #D00;
}

	#errorPage h2 {
		margin-bottom: 10px;
		color: #d00;
	}






/* ■ スマホ用 ============================================================== */
@media screen and (max-width:480px) {

	/* □ エラーページ ---------------------------------------------------------- */
	#errorPage {
		margin: 0 auto 10vh;
		width: 80%;
	}
}