@charset "UTF-8";
/*****************************************/
/* 画面別設定                            */
/*   width,height,padding,margin,floatは */
/*   各画面で設定すること                */
/*****************************************/

:root {
	--main-bg-color: #F2F0E9;
	--main-bg-color-dark: #DDDCC7;
	--main-bg-color-error: rgba(247, 126, 126, 0.7);

	--main-bg-color-editable: #FFFBDB;
	--main-bg-color-view: #EEEDEC;
	--main-bg-color-disabled: #EEE;

	--main-text-color: #141414;
	--sub-text-color: #534d49;
	--dark-text-color: #38446D;
	--dark-red-text-color: #3c231e;

	--color-red: #EC2121;

	--color-yellow: #FFF5A6;
	--color-yellow-light: #FFF8C3;

	--color-lemon-lighter: #ffecbf;
	--color-lemon-light: #ffe3a1;
	--color-lemon: #FFCF5e;
	--color-lemon-hover: #FFB13D;
	--color-lemon-active: #FFA41D;

	--color-orange-light: #FCE0D5;
	--color-orange: #F69E7B;
	--color-orange-dark: #F48558;
	--color-orange-darker: #F26E39;

	--color-bg: #4f9c8f;

	--color-white: #FFF;
	--color-dull-white: #FAFAFA;
	--color-dull-black-10: #FAF9F9;
	--color-dull-black-20: #EEEDEC;
	--color-dull-black-30: #E2E0DF;
	--color-dull-black-40: #D5D2D0;
	--color-dull-black-50: #C7C3C0;
	--color-dull-black-60: #B7B2AF;
	--color-dull-black-70: #A59F9A;
	--color-dull-black-80: #908882;
	--color-dull-black-90: #746164;
	--color-dull-black-100: #473d37;
	--color-dull-black-110: #312A26;
	--color-dull-black-120: #292320;

	--color-error-lighter: #f2d0d0;
	--color-error-light: #f0aaaa;
	--color-error: #F05454;
	--color-error-dark: #A01914;
	--color-error-darker: #CE1212;

	--color-normal: #566AA5;
	--color-normal-hover: #4D5F95;
	--color-normal-active: #3E4C79;

	--color-move-light: #90B6C7;
	--color-move: #548CA8;
	--color-move-hover: #487890;
	--color-move-active: #3E677C;

	--color-dark: #566AA5;

	--font-Yugothic: "游ゴシック", "Yu Gothic", "YuGothic", "游ゴシック体" , arial, helvetica, clean, sans-serif;
}

/*
*
*
index
*
*
*/

html {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	background-color: var(--main-bg-color);

	font-family: arial, helvetica, clean, sans-serif;
	font-size: 100%;
}
body {
	width: 100%;
}
* html body {
	overflow: hidden;
}
*, *:before, *:after {
	box-sizing: border-box;
}


/* clearfix */
.cf {zoom: 1;}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {clear: both;}





/*
 * ヘッダー部分・フッター部分
 */
.headerBeforeLogin {
	text-align: center;

	height: 80px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}
.headerBeforeLogin .logo {
	height: 100%;
	width: auto;
}

/* フッター */
.footer {
	position:fixed;
	bottom: 0;
	z-index: 2;

	width: 100%;
	height: 1em;
	padding: 0;

	background-color: var(--color-dull-black-120);
}
.footer p {
	color: var(--color-white);

	font-family: var(--font-Yugothic);
	font-size: 11px;
	text-align: center;
}



/*
 * コンテンツ部分
 */

.contents {
	width: 100%;
	padding-bottom: 2em;
}

/* 「ログイン」タイトル */
.title {
	padding: 5px;

	color: var(--color-dull-black-100);

	font-family: var(--font-Yugothic);
	font-weight: bold;
	font-size: 2em;
	text-align: center;
}
/* 汎用文章 */
.exp {
	color: var(--main-text-color);

	font-family: arial;
	font-size: 1.05em;
}
/* エラー文章 */
.errorExp {
	color: var(--color-error);

	font-family: arial;
	font-size: 1.05em;
}
/* ボックス外枠 */
.commonBox {
	width: 90%;

	margin: 0 auto;
	margin-top: 10px;
	padding: 20px 10px;

	border-radius: 10px;
	border :3px solid var(--color-dull-black-100);
	background-color: var(--color-dull-black-10);
}


/* input要素・共通↓*/
input[type="text"],input[type="password"],input[type="email"] {
	padding: 7px;

	border: 1px solid var(--color-dull-black-100);
	border-radius: 3px;

	font-family: arial;
	font-size: 1em;	/* ■入力欄文字サイズ■ */
	text-align: left;
}
/* 入力可能なinput要素 */
input.editable {
	background-color: var(--main-bg-color-editable);
}
/* 入力チェックエラーのある要素・背景色赤 */
input.error {
	background-color: var(--main-bg-color-error);
}
textarea.error {
	background-color: var(--main-bg-color-error);
}






/* <dl>をtableのように表示するスタイル <dt><dd>縦並び */
.tbl_layout {
	width: 100%;
	margin: 0 auto;
}
.tbl_layout dt {
	font-size: 1em;
	text-align: center;
	clear: both;
}
/* <dl>をtableのように表示するスタイル <dt><dd>横並び */
.tbl_layout_divide dt {
	float: left;
	padding: 5px 0;
}
.tbl_layout dd {
	padding: 0;
	text-align: center;
}
.tbl_layout dd input[type="text"],input[type="password"],input[type="email"]{
	width: 100%;
	text-align: left;
}





/* ログイン画面 ラベル */
dt.labelLogin {
	color: var(--color-dull-black-100);
	font-size: 1.05em;
	font-weight: bold;
}





/* margin-bottom */
.mbS {margin-bottom: 15px;}
.mbM {margin-bottom: 20px;}
.mbL {margin-bottom: 30px;}





/* ↓ボタン↓*/
input[type="button"] {
	position: relative;
}
input[type="button"]:hover {
	cursor: pointer;
}
/* 標準 */
input[type="button"].button {
	padding: 10px;

	border-radius: 5px;
	border: 1px solid #000;
	background-color: transparent;
	color: #000;

	font-family: arial;
	font-size: 1.1em;
	text-decoration: none;
}





/* 決定・検索ボタン */
input[type="button"].normalBtn {
	border: 1px solid var(--color-normal);
	background-color: var(--color-normal);
	color: #FFFFFF;
}
input[type="button"].normalBtn:hover {
	border: 1px solid var(--color-normal-hover);
	background-color: var(--color-normal-hover);
	color: #FFFFFF;
}
input[type="button"].normalBtn:active {
	top: 1px;

	border: 1px solid var(--color-normal-active);
	background-color: var(--color-normal-active);
	color: #FFFFFF;
}





/* キャンセルボタン */
input[type="button"].cancelBtn {
	border: 1px solid var(--color-error);
	background-color: var(--color-white);
	color: var(--color-error);
	transition: 0.1s;
}
input[type="button"].cancelBtn:hover {
	border: 1px solid var(--color-error);
	background-color: var(--color-error);
	color: #FFF;
}
input[type="button"].cancelBtn:active {
	top: 1px;

	border: 1px solid var(--color-error);
	background-color: var(--color-error);
	color: #FFF;
}




/*メールを送るボタン-背景画像*/
input[type="button"].sendMailBtn {
	background-image: url("../img/mail.png");

	background-size: 26px 15px;
	background-position: 65% 45%;

	background-repeat: no-repeat;

	padding-left: 5px;
}
	@media only screen and (min-width: 521px) {
		input[type="button"].sendMailBtn {
			background-position: 59% 45%;
		}
	}
	@media only screen and (min-width: 958px) {
		input[type="button"].sendMailBtn {
			background-position: 57% 45%;
		}
	}
	@media only screen and (min-width: 1080px) {
		input[type="button"].sendMailBtn {
			background-position: 56% 45%;
		}
	}





/* ボタン デフォルトサイズ */
input[type="button"].BtnDefault {
	padding: 7px 5px;
	width :130px;

}





/* パスワード説明文 */
div.passPolicy {
	margin: 0px auto 20px auto;
	padding: 5px;

	border: 1px solid var(--color-error);
	border-radius: 5px;
	background-color: var(--color-white);

	color: var(--dark-text-color);

	font-family: var(--font-Yugothic);
	font-weight: bold;
}
.passPolicy p {
	font-size: 0.95em;
}
.passPolicy span.passPolicy {
	letter-spacing: 4px;
}


/*必須項目マーク*/
.requiredMark:after {
	content: '\FF0A';
	color: var(--color-error);
	margin-left: 1px;
	font-weight: normal;
}

/* 強調文章 */
.warmExp {
	font-family: var(--font-Yugothic);
	font-weight: bold;

	font-size: 1em;
}

.font12px {font-size: 12px;}
.font14px {font-size: 14px;}
.span_normal {color: var(--color-normal);}
.span_error {color: var(--color-error);}
.span_orange {color: var(--color-orange-darker);}
.span_YuGothick {
	font-family: var(--font-Yugothic);
}
.br_sp { display: block;}
.br_tb { display: block;}

/* PC向けおよびタブレット向けのレイアウトの指定：521px～960px */
@media only screen and (min-width: 521px) {

	div .commonBox {
		width: 90%;
		max-width: 600px;	/* これ以上は横幅が大きくならない */
	}
	div .commonBox.ipError {
		max-width: 800px;
	}
	.br_sp {display: none;}
}

/* PC向けレイアウトの指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {

	div .commonBox {
		width: 90%;
		max-width: 800px;	/* これ以上は横幅が大きくならない */

		padding: 20px;
	}

	/* margin-bottom */
	.mbS {margin-bottom: 10px;}
	.mbM {margin-bottom: 15px;}
	.mbL {margin-bottom: 30px;}

	.br_tb {display: none;}
}