@charset "utf-8";

h1 {
margin: 0;
padding: 0;
line-height: 1em;
}
#wrapper {
font-size: 1.4rem;
}
.mainInner {
max-width: 900px;
margin: 0 auto 40px auto;
}
.grayBack {
padding: 50px;
border-radius: 10px;
background: #f2f2f2;
}
.pageTopBt {
position: fixed;
bottom: 50px;
right: 20px;
}
.pageTopBt a {
display: block;
padding: 10px;
color: #fff;
text-align: center;
border-radius: 10px;
line-height: 1.2em;
background: #000;
}


/* ==========================================================================
  公開側ログイン画面
========================================================================== */
#login header {
position: absolute;
top: 0;
bottom: 55%;
width: 100%;
text-align: center;
background: #00477f;
}
#login h1 {
position: absolute;
top: 30%;
left: 50%;
width: 248px;
margin: 0 0 0 -124px;
}
#login #wrapper {
position: absolute;
top: 45%;
bottom: 0;
width: 100%;
background: #f2f2f2;
}
#login #main {
padding: 60px 0;
background: #fff;
}
#login .mainInner {
padding: 30px;
}

.loginForm {
max-width: 900px;
margin: 0 auto;
padding: 0;
}
.loginForm ul {
margin: 0 auto 40px auto;
padding: 0;
}
.loginForm li {
display: flex;
justify-content: center;
margin: 0 auto;
padding: 0 0 20px 0;
}
.loginForm ul input {
width: 400px;
margin: 0 5px;
border: 1px solid #b4b2b3;
padding: 5px;
}
.loginForm .formInputItemName {
padding: 15px 10px 10px 0;
text-align: right;
line-height: 1em;
white-space: nowrap;
}
.loginForm .formInputItemName span {
font-size: 1.8rem;
}
.loginBt {
text-align: center;
}
.loginBt input {
cursor: pointer;
border: none;
padding: 10px 80px;
color: #fff;
line-height: 1em;
background: url(../images/ar_w_r.png) right 10px center no-repeat #00477f;
}
.loginBt input:hover {
opacity: 0.7;
}
.remindLink {
margin: 40px auto 0 auto;
text-align: center;
}
.remindLink a {
color: #fff;
}
.alertMessage {
margin: 0px auto 40px auto;
color: #fff;
padding: 10px;
text-align: center;
background: #e60011;
font-weight: bold;
border-radius: 8px;
}
.loginForm .alertMessage {
padding: 0px;
color: #fff000;
background: none;
}
.loginForm p {
margin: 0px auto 40px auto;
color: #fff;
text-align: center;
}
.loginForm.accessKeyInput li {
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 0 0 10px 0;
}
.loginForm.accessKeyInput .formInputItem {
display: flex;
justify-content: space-between;
width: 100%;
}
.loginForm.accessKeyInput ul input {
width: calc(25% - 10px);
margin: 0;
border: 1px solid #b4b2b3;
padding: 5px;
}
ul.topInformation {
margin: 0;
}
.topInformation li {
display: flex;
}
.informationDate {
margin: 0 20px 0 0;
}
#login footer {
width: 100%;
padding: 30px 0;
text-align: center;
background: #f2f2f2;
}

/* SP */
@media screen and (max-width: 900px){

	body#login {
	background: #f2f2f2;
	}
	#login header {
	position: static;
	width: 100%;
	padding: 40px;
	}
	#login h1 {
	position: static;
	width: 50%;
	margin: 0 auto;
	}
	#login #main {
	padding: 50px 10px;
	}
	#login #wrapper {
	position: static;
	}
	.loginForm.accessKeyInput li {
	display: block;
	}
	.loginForm .formInputItemName {
	text-align: center;
	}
	.topInformation li {
	display: block;
	margin: 0 0 20px 0;
	}
	#login .mainInner {
	padding: 20px;
	}

}

/* ==========================================================================
  公開側コンテンツ画面
========================================================================== */
#contents header {
width: 100%;
height: 220px;
text-align: center;
background: #00477f;
}
#contents h1 {
position: absolute;
top: 50px;
left: 50%;
width: 200px;
margin: 0 0 0 -100px;
}
#contents h2 {
margin: 0 0 30px 0;
text-align: center;
font-size: 2rem;
line-height: 1em;
}
body#contents {
background: #f2f2f2;
}
#contents #main {
padding: 50px 0;
background: #fff;
}
#contents footer {
width: 100%;
padding: 30px 0;
text-align: center;
font-size: 12.rem;
color: #7b7b7b;
}
.contentBt {
display: flex;
justify-content: center;
}
.contentBt input,
.contentBt a {
display: block;
margin: 0 10px;
padding: 15px 60px;
line-height: 1em;
text-decoration: none;
border: none;
color: #fff;
}
#system .contentBt input,
#system .contentBt a {
border-radius: 8px;
}
.contentBt .btBlue {
background-color: #00477f;
}
.contentBt .btGray {
background-color: #7f7f7f;
}
.contentBt .btOrange {
background: #de7e00;
}
.contentBt .arL {
background-image: url(../images/ar_w_l.png);
background-position: left 10px center;
background-repeat: no-repeat;
}
.contentBt .arR {
background-image: url(../images/ar_w_r.png);
background-position: right 10px center;
background-repeat: no-repeat;
}

.vPlayer {
width: 100%;
position: relative;
padding-bottom: 56.25%;
}

.vPlayer iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

/* SP */
@media screen and (max-width: 900px){

	#contents header {
	height: auto;
	padding: 40px;
	}
	#contents h1 {
	position: static;
	width: 50%;
	margin: 0 auto;
	}
	#contents #main {
	padding: 50px 10px;
	}
	#contents .mainInner.grayBack {
	padding: 20px;
	}
	#contents .mainInner {
	padding: 0px;
	}
	.contentBt {
	display: block;
	}
	.contentBt input,
	.contentBt a {
	width: 100%;
	margin: 0 0 20px 0;
	text-align: center;
	}
	#contents footer {
	padding: 30px 0 60px 0;
	font-size: 1.2rem;
	}

}

/* ==========================================================================
  ダウンロード画面
========================================================================== */
.contentsInformation {
text-align: center;
margin: 0 auto 40px auto;
}
.contentsInformation .contentsTitle,
.contentsInformation .codeTimes  {
margin: 0 auto 10px auto;
}
.contentsTitleList {
margin: 0 auto 40px auto;
}
.contentsTitleList li {
align-items: center;
margin: 0 auto 20px auto;
padding: 40px;
border-radius: 10px;
border: 1px solid #ccc;
}
.contentsTitleList p {
width: 100%;
margin: 0 auto 20px auto;
padding: 0;
}
.ContentTn {
margin: 0 20px 0 0;
}
.ContentTn img {
max-width: 100px;
}
.ContentDitel {
display: flex;
align-items: center;
}
.ContentName {
color: #00477f;
font-weight: bold;
font-size: 1.6rem;
}
.downloadBt {
text-align: center;
margin: 1em auto;
width: 100%;
}
.downloadBt a {
display: block;
padding: 10px 30px 10px 20px;
color: #fff;
line-height: 1em;
text-decoration: none;
border-radius: 8px;
background: url(../images/ar_w_r.png) right 8px center no-repeat #00477f;
}

/* SP */
@media screen and (max-width: 900px){

	.contentsTitleList li {
	padding: 20px;
	}
	.downloadBt {
	width: 100%;
	margin: 20px 0 0 0;
	text-align: center;
	}


}

/* ==========================================================================
  エラーメッセージ
========================================================================== */

.Art {
text-align: center;
font-weight: bold;
color: #f00;
font-size: 120%;
}