@charset "utf-8";
/* CSS Document */

/* すべて */
*{
	margin:0;
	padding:0;
	zoom:0;
	font-family: Helvetica, Verdana,"メイリオ",Meiryo, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Lucida Grande,"Lucida Sans Unicode",Arial,Verdana,sans-serif;
	color:#000000;
	}

/* 10px = 1rem を基準とする */
html{
	font-size:62.5%;
	}

/* 基本設定 */
html, body, .login{
	width:100%;
	height:100%;
	}

/* footer */
footer{
	width:100%;
	height:30px;
	overflow:hidden;
	}

/* コピーライト　右寄せ */
footer #Copyright{
	float:right;
	margin:8px 20px 8px 0;
	font-size:10px;
	}

/* errorMsg */
.errorMsg ,
.errorMsg div{
	color:#FF0004;
	font-weight:bold;
	font-size:12px;
	padding:5px 0 10px 0;
	}

/* input 高さ */
input[type=password]{
	height:20px;
	font-size:100%;
	}

.pagetop{
	display:none;
	}

/*---------------------------------------- common ---*/
/*--------------------------

	ログイン画面(共通)

--------------------------*/

/* body 背景色　基準位置 */
.login{
	width:100%;
	height:100%;
	background:#999999;
	position:relative;
	}

/* container　背景色　垂直中央 */
.containerWrap{
	background:#FFFFFF;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	}

/* container　水平中央 */
.container{
	height:100%;
	overflow:hidden;
	margin:0 auto;
	}

/* タイトル表示 */
.login h1{
	background:url(../img/title.png) no-repeat;
	color:#858585;
	float:left;
	}

/* 利用規約 */
.UserPolicyLabel{
	font-size:12px;
	font-size:1.2rem;
	float:right;
	text-decoration:underline;
	cursor:pointer;
	color:#858585;
	}

.UserPolicyLabel:hover,
.PasswordForget:hover{
	text-decoration:underline;
	}

/* ログインＩＤ‐ログインボタン */
.login form{
	width:100%;
	margin:0 0 10px 0;
	}

/* form内div　幅 */
.login form div{
	width:100%;
	}

/* input　改行しない */
.login form div div{
	display:inline;
	}

/* ログイン保持 ログインボタン　div */
.login form div:last-child{
	margin-top:0.5em;
	}

/* form内label */
.login form label{
	font-weight:normal;
	font-size:14px;
	font-size:1.4rem;
	color:#858585;
	white-space:normal;
	}

/* form内input */
.login form input[type=text],
.login form input[type=password]{
	border:solid 1px #000000;
	height:30px;
	text-align:left;
	padding-left:2px;
	background-color:rgba(255,255,255,0.46);
	}

.login form input[type=text]:focus,
.login form input[type=password]:focus{
	background-color:#FFF;
	}

/* ログインボタン */
.LoginButton{
	border:none;
	border-radius:3px;
	color:#FFFFFF;
	background-color:#AA5455;
	font-size:14px;
	cursor:pointer;
	}

.LoginButton:hover{
	background-color:#973839;
	}

/* パス忘れ */
.PasswordForget{
	font-size:14px;
	font-size:1.4rem;
	color:#858585;
	}

/* login画面のfooter */
.login footer{
	width:100%;
	position:absolute;
	bottom:0;
	}

/*----------------------------------------- PC ---*/
@media screen and (min-width:768px){

/* container */
.containerWrap{
	width:100%;
	height:342px;
	}

/* container　幅 */
.container{
	max-width:980px;
	}

/* rogomark　表示 幅固定 */
.login #LogoMark{
	width:280px;
	height:100%;
	background:url(../img/rogomark.png) no-repeat;
	background-position:center;
	float:left;
	}
	
/* content　右寄せ　可変 */
.content{
	width:100%;
	float:right;
	margin-left:-320px;
	padding-left:320px;
	margin-top:5px;
	box-sizing:border-box;
	}

/* タイトルと利用規約 */
.content>div:first-child{
	overflow:hidden;
	width:97%;
	margin-top:4.0em;
	}

/* タイトル表示 */
.login h1{
	width:270px;
	height:25px;
	margin-bottom:10px;
	background-size:270px 25px;
	}

/* エラーメッセージ */
.ErrorMsg{
	min-height:30px;
	margin:10px 0;
	}

/* form内div　幅 */
.login form div{
	width:97%;
	white-space:nowrap;
	}

.login form div:last-child{
	overflow:hidden;
	}

/* 「ログインＩＤ」「パスワード」 */
.Label{
	width:90px;
	display:inline-block;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	color:#666666;
	vertical-align:middle;
	}

/* input（ログインＩＤ・パスワード） */
.input{
	width:83%;
	display:inline;
	margin:0 0 10px 10px;
	}

/* ログイン保持 */
.LoginKeep{
	float:left;
	padding:3px 0 0 0;
	}

/* checkbox　□ */
input[type=checkbox].LoginKeep{
	margin:0 10px 0 115px;
	vertical-align:middle;
	width:20px;
	height:20px;
	}

.LoginKeep + label{
	float:left;
	display:block;
	width:30%;
	line-height:20px;
	}

.LoginKeep:hover,
.LoginKeep + label:hover{
	cursor:pointer;
	}

/* ログインボタン */
.LoginButton{
	padding:5px 25px;
	float:right;
	}
}
/*----------------------------------------- pad ---*/
@media screen and (min-width:768px) and (max-width:934px){
	.container{
	width:95%;
	}
	.content>div:first-child{
	width:90%;
	}
	.login form{
	width:87%;
	}
	.login form div:nth-of-type(4){
	width:112%;
	}
}
/*----------------------------------------- smart ---*/
@media screen and (max-width:767px){
.login{
	position:static;
	}

/* container */
.containerWrap{
	width:100%;
	height:auto;
	min-height:410px;
	padding:0.2em 0;
	margin:20px auto 0 auto;
	position:static;
	}

/* container　幅 */
.container{
	width:100%;
	height:auto;
	min-height:400px;
	background:url(../img/rogomark.jpg) no-repeat;
	background-position:center;
	background-size:contain;
	}

/* rogomark　表示 幅固定 */
.login #LogoMark{
	display:none;
	}
	
/* content */
.content{
	width:95%;
	margin:5px auto 0 auto;
	}

/* タイトルと利用規約 */
.content>div:first-child{
	overflow:hidden;
	width:100%;
	margin-top:2.0em;
	}

/* タイトル表示 */
.login h1{
	width:98%;
	min-height:9%;
	padding:4.5% 0;
	background:url(../img/title2.png) no-repeat;
	background-size:contain;
	}

/* 利用規約 */
.UserPolicyLabel{
	margin:10px 10px 0 0;
	}

.UserPolicyLabel,
.PasswordForget{
	text-decoration:underline;
	}

/* エラーメッセージ */
.ErrorMsg{
	margin:10px 0;
	}

/* 「ログインＩＤ」「パスワード」 */
.Label{
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	color:#666666;
	}

/* input（ログインＩＤ・パスワード） */
.input{
	width:98%;
	display:block;
	margin:0 auto 10px auto;
	}

/* ログイン保持 */
.LoginKeep{
	padding:3px 0 0 3px;
	margin:0 0 0 3px;
	color:#666666;
	font-weight:bold;
	}

/* checkbox　□ */
input[type=checkbox]{
	margin:0 8px 0 0;
	transform:scale(1.5);
    vertical-align: middle;
	margin-left:1.4%;
	}

input[type=checkbox].LoginKeep + label{
	color:#333;
	}

/* ログインボタン */
.LoginButton{
	width:100%;
	padding:10px 0;
	margin:20px 0;
	}

/* パス忘れ　中央 */
.content>div:last-child{
	width:100%;
	text-align:center;
	}

/* login画面のfooter */
.login footer{
	height:auto;
	background:#999999;
	position:static;
	}

footer small{
	margin:8px 3px;
	font-size:10px;
	height:auto;
	}

}

/*---------------------------------------- common ---*/
/*----------------------

	    modal

---------------------*/

/* modal 半透明の背景 */
#overlay{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.30);
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:1;
	}

/* modal 基本スタイル */
.modal{
	width:600px;
	padding:3px;
	font-size:14px;
	font-size:1.4rem;
	border:solid 1px #000000;
	border-radius:5px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:2;
	background:#FFFFFF;
	display:none;
	}

/* textarea */
textarea{
	width:98%;
	padding:2px;
	}

/*------------------------

	  modal header

------------------------*/

/* modal header　基本スタイル */
.modalHeader{
	padding:10px 10px 10px 15px;
	margin:0 0 10px 0;
	border-radius:3px;
	background:#0F2666;
	font-size:16px;
	font-size:1.6rem;
	letter-spacing:1px;
	overflow:hidden;
	}

.modalHeader h3{
	font-weight:normal;
	color:#FFFFFF;
	float:left;
	font-size:16px;
	font-size:1.6rem;
	}

/*------------------------

	  modal footer
	
------------------------*/

/* modal footer　基本スタイル */
.modalFooter{
	padding:20px 0 15px 0;
	margin-top:12px;
	border-radius:3px;
	border-top:dotted 2px #858585;
	overflow:hidden;
	text-align:center;
	}

/*------------------------

	  modal btn
	
------------------------*/

/* 無駄なスタイルを消す */
input[type=button],
input[type=reset],
button{
	-webkit-appearance:none;
	}

/* ボタンの基本スタイル */
.modalButton{
	width:100px;
	border:solid 1px #3F3F3F;
	padding:5px 10px;
	border-radius:4px;
	background:#DADADA;
	color:#4F4F4F;
	text-decoration:none;
	letter-spacing:2px;
	cursor:pointer;
	}

/* modal内　ボタン　ホバー時 */
.modalButton:hover{
	font-weight:bold;
	background:#858585;
	color:#FFFFFF;
	}

/* モーダル　右上 ×ボタン 基本スタイル */
.modalHeader .CloseButton{
	display:block;
	text-align:center;
	float:right;
	border:solid 1px #FFFFFF;
	border-radius:4px;
	color:#FFFFFF;
	background:#0F2666;
	text-decoration:none;
	letter-spacing:2px;
	cursor:pointer;
	min-width:20px;
	font-size:16px;
	font-size:1.6rem;
	padding:3px 4px 3px 6px;
	}

/* モーダル　右上 ×ボタンのホバー時 基本スタイル */
.modalHeader .CloseButton:hover{
	background-color: #080A41;
	color: #ffffff;
	}

/* modal footer内 ボタン　配置 */
.modalFooter .modalButton{
	margin:0 15px;
	}

/* UserPolicy modalContent textarea */
.UserPolicy .modalContent textarea{
	border:none;
	height:260px;
	background:#FFFFFF;
	color:#000000;
	}

.UserPolicy .modalContent{
	width:98%;
	}

/*-------------------------------------------- PC ---*/
@media screen and (min-width:768px){

/* modalErrorMsg */
.modalErrorMsg{
	color:#FF0004;
	font-weight:bold;
	margin:0 0 0 180px;
	font-size:14px;
	}

/*------------------------

	  modal content
	
------------------------*/

/* modal内　コンテンツ 幅 */
.modalContent{
	width:90%;
	margin:0 auto;
	}
}

/*----------------------------------------- smart ---*/
@media screen and (max-width:767px){

/* modalErrorMsg */
.modalErrorMsg{
	color:#FF0004;
	font-weight:bold;
	margin:0;
	font-size:14px;
	}

/*------------------------

	  モーダル共通
	
------------------------*/

/* modal 半透明の背景 */
#overlay{
	width:100%;
	height:120%;
	background:rgba(0,0,0,0.30);
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	}

/* modal 基本スタイル */
.modal{
	width:100%;
	padding:0;
	border:none;
	position:absolute;
	top:5%;
	left:0;
	}

/*------------------------

	  modal header

------------------------*/

/* modal header　基本スタイル */
.modalHeader{
	padding:5px 5px;
	background:#0F2666;
	margin-bottom:10px;
	overflow:hidden;
	border-radius:0;
	}

.modalHeader h3{
	min-width:220px;
	margin:5px 0 0 3px;
	font-size:21px;
	font-size:2.1rem;
	}

/*------------------------

	  modal content
	
------------------------*/

/* modal内　コンテンツ 幅 */
.modalContent{
	padding:0 5px 12px 5px;
	margin:0 auto;
	background:#FFFFFF;
	font-size:18px;
	font-size:1.8rem;
	min-height:100px;
	}

/* textarea */
textarea{
	width:99%;
	font-size:12px;
	border:solid 2px #858585;
	border-radius:3px;
	padding:0;
	}

.UserPolicy .modalContent textarea{
	height:300px;
	}

.UserPolicy .modalContent{
	width:96%;
	}

/*------------------------

	  modal footer
	
------------------------*/

/* modal footer　基本スタイル */
.modalFooter{
	padding:10px 0;
	background:#0F2666;
	margin-top:0;
	border:none;
	border-radius:0;
	}

/*------------------------

	  modal btn
	
------------------------*/

/* ボタンの基本スタイル */
.modalButton{
	width:90%;
	height:44px;
	font-size:18px;
	font-size:1.8rem;
	}

/* モーダル　右上 ×ボタン 基本スタイル */
.modalHeader .CloseButton{
	width:36px;
	height:36px;
	font-size:18px;
	padding:0 0 0 2px;
	}
}