/* -------------------------------------------------------------------------------------
 * 
 *  Reset, Base
 *  
--------------------------------------------------------------------------------------*/

	/*  html & body
	--------------------------------------------------------------------------------------*/	
		html {
			font-size                : 100%; /* 1 */
			-webkit-text-size-adjust : 100%; /* 2 */
			   -moz-text-size-adjust : 100%; /* 2 */
			    -ms-text-size-adjust : 100%; /* 2 */
			        text-size-adjust : 100%; /* 2 */
		}
	
		html,
		body {
			margin      : 0;
			padding     : 0;/* opera 8 */
			border      : 0;
			line-height : 1.8;
		}
		.e55- *, input, label {
			line-height : 1.8;
		}
		
		input {
			border      : 1px solid;
		}
		input::-moz-focus-inner, button::-moz-focus-inner {
			border      : 0;
		}
		
		/* body.e7- {
			font       : small; for IE in quirks mode
		} */


	/*  reset
	--------------------------------------------------------------------------------------*/
		/*	
		a:link    { color : #eee; }
		a:visited { color : #ecc; }
		a:active  { color : #ccf; }
		a:focus   { color : #999; }
		a:hover   { color : #ccc; } */
		
		/* remember to define focus styles! */
		:focus,
		a:focus,
		a:active,
		a:hover {
			outline: 0;
		}
	
		abbr[title] {
			border-bottom : 1px dotted;
		}
		
		/* b, */
		strong {
			font-weight : bold;
		}
		
		q {
			quotes : none;
		}
		q:before,
		q:after {
			content: '';
			content: none;
		}
		
		small, sub, sup {
			font-size: 75%;
		}
		
		sub,
		sup {
			line-height    : 0;
			position       : relative;
			vertical-align : baseline;
		}
		
		sup {
			top: -0.5em;
		}
		
		sub {
			bottom: -0.25em;
		}
		
		img {
			border                 : 0; /* 1 */
			-ms-interpolation-mode : bicubic; /* 2 */
		}
	
		.e9 svg /*:not(:root)*/ {
			overflow: hidden;
		}
		/**
		 * Bump up IE to get to 13px equivalent for these fixed-width elements
		 */
		pre, code, kbd, samp, tt {
			font-family: monospace, serif;
		}
		
		/* .e6- pre, */ .e6- code, .e6- kbd, .e6- samp, .e6- tt {
			font-family: 'courier new', monospace;
		}

		dfn, cite, code, var, samp, kbd, q {
			font-style : normal;
		}
		/*
		 * http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
		 */
		body, textarea, input {
			font-family : 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Hiragino Sans','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		}
		
		input {
			font-size : 1em;
		}
		
		body.e6-, .e6- textarea, .e6- input {
			font-family : 'ＭＳ Ｐゴシック',sans-serif; /* ie6-, MacIE5- */
		}
		
		/* textarea {
			width : 90%;
		} */
		
		/* http://e2designer.seesaa.net/article/152168876.html */
		/* http://perishablepress.com/press/2010/06/01/wrapping-content/ */
		pre {
			white-space : pre;           /* CSS 2.0 */
			white-space : -pre-wrap;     /* Opera 4-6 */
			white-space : -o-pre-wrap;   /* Opera 7 */
			white-space : -moz-pre-wrap; /* Mozilla */
			/* white-space : -hp-pre-wrap;  HP Printers */				
			white-space : pre-wrap;      /* CSS 2.1 */
			/* white-space : pre-line;      CSS 3.0 */
			word-wrap   : break-word;    /* IE 5+ */
		}
		
		/* remember to highlight inserts somehow! */
		ins { text-decoration: none;}
		del { text-decoration: line-through;}
	
		address { display : block; zoom : 1 }

/*  Typography
--------------------------------------------------------------------------------------*/
	h2 {
		margin            : 1em 0;
		padding           : 0;
		text-align        :	left;
		font-size         : 2em;
		letter-spacing    :	2px;
	}
	h2, h3, h4, h5, h6 {
		line-height       : 1.2;
	}
	h3 {
		font-size         : 1.5em;
		margin            : 2em 0 1em;
		letter-spacing    : 1px;
	}
	h4 {
		font-size         : 1.2em;
		letter-spacing    : 1px;
		border-bottom     : 1px dotted;
		padding           : 0 0 0.25em;
		margin            : 2em 0 1em;
	}
	h5 {
		font-size         : 1em;
		border-left       : 0.8em solid;
		padding           : 0 0 0 0.5em;
		margin            : 1.5em 0 1em;
	}
	h6 {
		font-size         : 1em;
		border-left       : 0.4em solid;
		padding           : 0 0 0 0.9em;
		margin            : 1.5em 0 1em;
	}
	
	ul, ol,
	ul ol, ul ul,
	ol ul, ol ol {
		padding-left : 2em;
		margin-left  : 0; /* old ie */
	}

	blockquote {
	    quotes            : none;
	    margin            : 1em 0;
	}

/*  justify ie5 ff1, opera10 以降,
--------------------------------------------------------------------------------------*/
	#contents p, blockquote {
		text-justify : inter-ideograph;
		line-break   : normal;
	}
	
	
	.e8- #contents p, .e9 #contents p,
	.e8- blockquote, .e9 blockquote {
		text-align   : justify;
	}
	
	/* ie10 & 11 */
	@media all and (-ms-high-contrast:none){
		#contents p, blockquote { text-align : justify; }
	}
	
	/* .contents-container, x:-moz-any-link {
		text-align : justify;
	} ff */
	
	/* ff2+ */
	body:empty #contents p, blockquote, x:-moz-any-link{
		text-align : justify;
	}

	@media not aural and (1) { /* Opera 10 以上 */
		#contents p, blockquote { text-align : justify; }
	}


/*  Table
--------------------------------------------------------------------------------------*/
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-style      : solid;
		border-color      : #666 #aaa;
		border-width      : 1px 0 0 1px;
		border-collapse   : collapse;
		empty-cells       : show;
		border-spacing    : 0;
	}

	.e55- table {
		color      : #111;
	}

	thead th {
		background : #333;
		color      : #fff;
	}
	th {
		background : #ccc;
	}

	th, td {
		padding           : 0.5em 0.3em;
		border-style      : solid;
		border-color      : #666 #aaa;
		border-width      : 0 1px 1px 0;
	}

	tr:hover {
		background        : #d6d6d6;
	}
	
	tbody tr:hover th {
		background        : #999;
	}


/*  ClearFix
--------------------------------------------------------------------------------------*/
	/* for modern brouser */
	.clearfix:after, .box:after {   
		content     : ".";   
		display     : block;   
		visibility  : hidden;   
		height      : 0.1px;   
		font-size   : 0.1em;   
		line-height : 0;   
		clear       : both;   
	} 
	/* IE7,MacIE5 */
	.clearfix, .box {
		display  : inline-block;
	}
	/* WinIE6 below, Exclude MacIE5 \*/
	.clearfix, .box {
		display  : block;
		overflow : hidden;
	}
	.e6- .clearfix, .e6- .box {
		height   : 1%;
		overflow : visible;
	}
	/**/


h1, h2, h3, h5, h6 {
	font-weight : normal;
}
a {
	background : rgba( 0, 0, 0, 0 );
	transition : 0.3s background ease-in, 0.3s color ease-in, 0.3s border-color ease-in;
}input, button {
	-webkit-border-radius : 6px;
	   -moz-border-radius : 6px;
	    -ms-border-radius : 6px;
	     -o-border-radius : 6px;
	        border-radius : 6px;
}
/*
 * DIV.pair
 *  LABEL
 *  DIV.
 */
form .pair {
	position      : relative;
	padding-left  : 4em;
	padding-right : 2em;
	margin-bottom : 0.5em;
}

	form .pair label {
		position      : absolute;
		left          : 0;
		top           : 0.4em;
		display       : block;
		width         : 3em;
		text-align    : right;
		font-weight   : bold;
	}





.textinput input,
.textinput_disabled input {
	padding : 0.2em 3%;
	width   : 94%;
	display : block;
}
* {
	zoom : 1;
}



button {
	position       : relative;
	display        : inline-block;
	
	padding        : 0.8em 1em;
	line-height    : 1;
	cursor         : pointer;
	text-align     : center;
	
	color          : #fff;
	border         : 1px solid;
	font-weight    : bold;
	letter-spacing : 2px;
}
/*
 * data-show="*" を使って .hide を隠すよ
 */
.hide {
	display : none !important;
}

/*
 * 
 */
.jammingBox {
	background : #100;
	color      : #fcc;
	width      : 100%;
	height     : 100%;
}

.jammingBox a         { color : #bbe }
.jammingBox a:visited { color : #eae }
.jammingBox a:hover   { color : #99f }
.jammingBox a:focus,
* .jammingBox a:active { color : #fff } /* :active と同じ値を :hover を挟んで設定 */


@media screen and (min-width: 96em) {

}
@media print, handheld, screen and (max-width: 950px) {/* Outline も併せて変更 */

}@media handheld, screen and (max-width: 479px) {
	
}
/*  Watch
--------------------------------------------------------------------------------------*/
@media handheld, screen and (max-width: 240px) {

}
body {
	background  : #fff;
	color       : #111;
}.marker {
	padding-left        : 1.5em;
	background-image    : url( '/img/common/icon/bullet_001.gif' );
	background-repeat   : no-repeat;
	background-position : 0 0.5em;
}
.warn {
	padding-left        : 1.5em;
	background-image    : url( '/img/common/icon/icon_warn.gif' );
	background-repeat   : no-repeat;
	background-position : 0 0.5em;
}

.info {
	padding             : 0.2em 0 0.2em 2em;
	background-image    : url( '/img/common/icon/info.png' );
	background-repeat   : no-repeat;
}

.system {
	padding             : 0.2em 0 0.2em 2em;
	background-image    : url( '/img/common/icon/system.png' );
	background-repeat   : no-repeat;
}

.lock {
	padding             : 0.2em 0 0.2em 2em;
	background-image    : url( '/img/common/icon/lock.png' );
	background-repeat   : no-repeat;
	background-position : 0 0;
}


/*  a
--------------------------------------------------------------------------------------*/
a { text-decoration : none; }
a:hover    { color : #02a; }
a:link     { color : #24c; }
a:visited  { color : #414; }

a:focus,
* a:active,
.button:focus, * .button:active,
.button_disabled:focus, * .button_disabled:focus {
    background      : #3079ed;
    color           : #fff;
    text-decoration : none;
}

a:hover {
	text-decoration : underline;
}


input {
	border-color : #C2C3C3;
}

input:focus, input:active,
.button:focus,
.button_disabled:focus {
	border-color : #3079ed;
}

input:hover {
	border-color : #24c;
}





/*  Print
--------------------------------------------------------------------------------------*/
@media print {

}
.inner {
	margin-left  : auto;
	margin-right : auto;
}

.columns {
	display      : table;
	table-layout : fixed;
}

.columnL, .columnR {
	display        : table-cell;
}


#header {
	max-width   : 900px;
}

#logos {
	width : 255px;
/*	float : left; */
}
#atrlogo {
	width          : 255px;
	height         : 75px;
/*	vertical-align : bottom; */
}
#emblem {
	text-align: center;
	vertical-align : middle;
}

h1 {
	margin : 0;
}

#pic {
	text-align: center;
	vertical-align : middle;
}

/* by tueda for login page images */
div.ug_headdings_container {
	overflow: hidden;
	width: 900px;
	display: table;
}
div.ug_headdings {
	display: table-cell;
	vertical-align : middle;
	text-align: center;
}
div.ug_atrlogo_area {
	width: 255px;
	display: table;
	vertical-align : middle;
	text-align: center;
}
div.ug_atrlogo_img_area {
	display: table-cell;
	vertical-align : middle;
	text-align: center;
}
div.ug_logo_area {
	width: 300px;
	display: table;
	vertical-align : middle;
	text-align: center;
}
div.ug_logo_img_area {
	display: none;
	vertical-align : middle;
	text-align: center;
}
div.ug_logo_area img {
	max-width: 100%;
}
div.ug_image_area {
	width: 600px;
	display: none;
}
div.ug_image_area img {
	max-width: 100%;
}

/* --- */

#login {
	background : #E8E8E8;
}
	#login .inner {
		max-width  : 45em;
	}
		#login form {
			width        : 100%;
			padding      : 2em 0 0;
		}
			#login .columnL {
				width          : 75%;
				vertical-align : middle;
			}
			#login .columnR {
				width          : 25%;
				vertical-align : middle;
			}
					#login input {
						ime-mode     : disabled;
					}

					#submit-button, #submit-button-2 {
						display      : block;
						width        : 100%;
						padding      : 1.5em 0;
						margin       : 0;
						color        : #fff;
						border-color : #9A847A;
						background   : #9A847A;
					}
					#submit-button:focus, * #submit-button:active {
						border-color : #3079ed;
						background   : #3079ed;
					}
					#submit-button:hover {
						color           : #ddd;
						border-color    : #6A544A;
						background      : #6A544A;
						text-decoration : none;
					}
					#submit-button.button_disabled {
						border-color    : #ddd;
						background      : #ccc;
						color           : #E8E8E8;
					}

		#login form p {
			color : #444;
		}

.jammingBox .inner {
	padding : 2em 0;
}

@media handheld, screen and (max-width: 479px) {
	#login form,　#login .columnL, #login .columnR {
		display : block;
		width   : 100%;
	}
	#login .inner {
		padding : 2em 1em 1em;
	}
	
		#login .pair {
			padding-right : 0;
		}
		#submit-button {
			margin       : 0.2em 0 2em;
		}
}

@media handheld, screen and (max-width: 320px) {
	#login .pair {
		padding-left  : 0;
	}
		#login label {
			position      : static;
			text-align    : left;
		}
		#login input {
			display       : block;
		}
		#submit-button {
			margin-top   : 1em;
		}
}

#info {
	width           : 100%;
	max-width       : 60em;
	margin          : 2em auto;
	border-collapse : separate;
	border-spacing  : 2em 0;
}
	#info .columnL, #info .columnR {
		width          : 50%;
		background     : #F6F6F6;
	}
		#info h2 {
			padding-top         : 0.5em;
			padding-bottom      : 0.5em;
			margin              : 0;
			background-color    : #E8E8E8;
			background-position : 0.5em 0.4em;
			font-size           : 1em;
			font-weight         : bold;
			color               : #5D7D33;
		}
		#info .inner {
			padding : 0 1em;
		}
			#info iframe {
				width  : 99%;
				margin : 1em 0;
			}

@media handheld, screen and (max-width: 950px) {/* Outline も併せて変更 */
	#info, #info .columnL, #info .columnR {
		display   : block;
		width     : auto;
	}
	#info {
		max-width : 30em;
		margin    : 2em auto;
	}
	#info .columnL, #info .columnR {
		max-width : 30em;
		margin    : 1em auto 0;
	}
}

#sso_parallel_area {
	width      : 100%;
	max-width  : 60em;
	/* margin     : 0 auto; */
	/* text-align : right; */
	padding-right: 4em;
}

#sso_parallel_area span {
	width: 100%;
	display: block;
	
}

@media handheld, screen and (max-width: 950px) {
	#sso_parallel_area {
		max-width: 30em;
		padding-right: 0;
	}
}