@charset "UTF-8";

/******************************************************************************
 * ログインページ
 *******************************************************************************/
:root{
	--main-bg-color:			#1e50a2;
	--main-bg-stripe:			#192f60;
}

html {
	height:						100%;
}

input::-ms-clear {
    visibility:					hidden
}

/*********************************************************************
 * 本文
 *********************************************************************/
body {
	width:						100%;
	height:						100%;
	min-height:					100vh;
	display:					-webkit-box;
    display:					-ms-flexbox;
    display:					-webkit-flex;
    display:					flex;
	flex-direction:				column;
	background:					var( --main-bg-color );
 	background-image:			repeating-linear-gradient( -45deg, var( --main-bg-stripe ), var( --main-bg-stripe ) 40px, transparent 0, transparent 80px ),
 								repeating-linear-gradient( 45deg, var( --main-bg-stripe ), var( --main-bg-stripe ) 40px, transparent 0, transparent 80px );
	font-size:					12px;
	font-family:				"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	line-height:				1.6;
	color:						var( --main-font-color );
}
@media all and (-ms-high-contrast:none) {
	body {
		font-family:			"メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}
@media only screen and (max-width:	800px) {
	body{
		min-width:				0px;
	}
}

.contents {
	position:					relative;
	display:					-webkit-box;
    display:					-ms-flexbox;
    display:					-webkit-flex;
    display:					flex; 
    -webkit-box-pack:			justify;
    -ms-flex-pack:				justify;
    -webkit-justify-content:	space-between;
    justify-content:			space-between;
	flex-grow:					1;
	text-align:					center !important;
}

.container{
	vertical-align:				middle !important;
}

.base-wrap {
	display:					-webkit-box;
    display:					-ms-flexbox;
    display:					-webkit-flex;
    display:					flex;
 	-webkit-box-align:			center;
    -ms-flex-align:				center;
    -webkit-align-items:		center;
    align-items:				center;
    -webkit-box-pack:			center;
    -ms-flex-pack:				center;
    -webkit-justify-content:	center;
    justify-content:			center;
	background:					url( '../../images/bg.png' ) 50% 50% no-repeat;
	background-size:			cover;
}

/*********************************************************************
 * ログインフォーム
 *********************************************************************/
.inner-login {
	width:						600px;
	background:					rgba( 255, 255, 255, 0.6 );
	border-radius:				10px;
	padding:					50px;
	margin:						0 auto;
}
.inner-login img {
	width:						300px;
/*	height:						69px; */
}

.login input[type="text"],
.login input[type="password"] {
	width:						100%;
	border:						solid 1px #fff;
	border-radius:				3px;
	background:					rgba( 255, 255, 255, 0.5 );
	padding:					15px;
}

/*********************************************************************
 * ログインボタン
 *********************************************************************/
.btn-login {
	position:					relative;
	display:					inline-block;
    background:					#88cb7f;
    border:						solid 3px #316745;
	border-radius:				10px;
}

.btn-login::before {
	position:					absolute;
	top:						50%;
	left:						15px;
	transform:					translateY( -50% );
	content:					'';
	display:					block;
	width:						16px;
	height:						20px;
	background:					url( '../../images/icon-login-close.png' );
	background-size:			contain;
	transition:					.6s;
}
.btn-login:hover::before {
	position:					absolute;
	top:						50%;
	left:						15px;
	transform:					translateY(-50%);
	content:					'';
	display:					block;
	width:						16px;
	height:						20px;
	background:					url( '../../images/icon-login-open.png' );
	background-size:			contain;
}
.btn-login input[type="submit"] {
	color:						#316745;
	font-weight:				bold;
	padding:					10px 50px;
	cursor:						pointer;
}

/*********************************************************************
 * Google認証ボタン
 * CSSやHTMLの自動作成は、以下のURLから行った
 * https://developers.google.com/identity/branding-guidelines?hl=ja
 *********************************************************************/
.gsi-material-button {
	-moz-user-select:			none;
	-webkit-user-select:		none;
	-ms-user-select:			none;
	-webkit-appearance:			none;
	background-color:			WHITE;
	background-image:			none;
	border:						1px solid #747775;
	-webkit-border-radius:		4px;
	border-radius:				4px;
	-webkit-box-sizing:			border-box;
	box-sizing:					border-box;
	color:						#1f1f1f;
	cursor:						pointer;
	font-family:				'Roboto', arial, sans-serif;
	font-size:					 14px;
	height:						 40px;
	letter-spacing:				 0.25px;
	outline:					none;
	overflow:					hidden;
	padding:					0 12px;
	position:					relative;
	text-align:					center;
	-webkit-transition:			background-color .218s, border-color .218s, box-shadow .218s;
	transition:					background-color .218s, border-color .218s, box-shadow .218s;
	vertical-align:				middle;
	white-space:				nowrap;
	width:						auto;
	max-width:					400px;
	min-width:					min-content;
}

.gsi-material-button .gsi-material-button-icon {
	height:						20px;
	margin-right:				12px;
	min-width:					20px;
	width:						20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
	-webkit-align-items:		center;
	align-items:				center;
	display:					flex;
	-webkit-flex-direction:		row;
	flex-direction:				row;
	-webkit-flex-wrap:			nowrap;
	flex-wrap:					nowrap;
	height:						100%;
	justify-content:			space-between;
	position:					relative;
	width:						100%;
}

.gsi-material-button .gsi-material-button-contents {
	-webkit-flex-grow:			1;
	flex-grow:					1;
	font-family:				'Roboto', arial, sans-serif;
	font-weight:				500;
	overflow:					hidden;
	text-overflow:				ellipsis;
	vertical-align:				top;
}

.gsi-material-button .gsi-material-button-state {
	-webkit-transition:			opacity .218s;
	transition:					opacity .218s;
	bottom:						0;
	left:						0;
	opacity:					0;
	position:					absolute;
	right:						0;
	top:						0;
}

.gsi-material-button:disabled {
	cursor:						default;
	background-color:			#ffffff61;
	border-color:				#1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
	opacity:					38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
	opacity:					38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
	background-color:			#303030;
	opacity:					12%;
}

.gsi-material-button:not(:disabled):hover {
	-webkit-box-shadow:			0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
	box-shadow:					0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
	background-color:			#303030;
	opacity:					8%;
}