@charset "utf-8";

/* 共通コンテンツ */
/* -------------------------------------------------------- */

* {
	font-family: 'Noto Sans JP', sans-serif;
}

/* ログイントップ（キット・共通物品選択） */
/* -------------------------------------------------------- */

.header {
    width : 100%;
    background : repeat-x url("../img/bg_login_kitte_top.png");
    height : 66px;
    position : fixed;
    top : 0;
    left : 0;
    color : #ffffff;
    font-size : 1.4em;
    font-weight : bold;
    display : flex;
    justify-content : center; /* 子要素をflexboxにより中央に配置する */
    align-items : center;  /* 子要素をflexboxにより中央に配置する */
}

.header img {
    height : 50px;
    margin-right : 20px;
}

.footer {
    width : 100%;
    background : repeat-x url("../img/bg_login_kitte_btm.png");
    height : 36px;
    position : fixed;
    bottom : 0;
    left : 0;
    color : #ffffff;
    font-size : 0.7em;
    display: flex;
    justify-content : flex-end;
    align-items : center;
}

.copyright {
	font-size : 0.7em;
	color : #ffffff; 
}

.topWrapper {
	width : 50%;
	height : 100vh;
    display : flex;
    justify-content : center;
    align-items : center;
	margin: 0 auto;
}

.loginWrapper {
	width : 100%;
	height : 100vh;
    display : flex;
    justify-content : center;
    align-items : center;
	margin: 0 auto;
}

.topBox {
    width: 100%;
    height : 300px;
	display : flex;
	margin : 0 auto;
	justify-content : center;
	align-items : center;
}

.topBox img {
    width : 100%;
	/*-webkit-box-shadow : 0 0 5px 0 #666666;
	-moz-box-shadow : 0 0 5px 0 #666666;
	box-shadow : 0 0 5px 0 #666666;*/
    cursor : pointer;
    transition-duration : 0.3s;
}

.topBox img:hover {
    opacity : 0.6;
    transition-duration : 0.3s;
}

.topBox a.fm {
	margin-right : 30px;
}

.loginForm {
	width : 50%;
    display : flex;
    flex-direction : column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content : center; /* 子要素をflexboxにより中央に配置する */
    align-items : center; /* 子要素をflexboxにより中央に配置する */
}

.loginBox {
    width : 100%;
    min-width : 350px;
    height : 200px;
	background-color : #EEEBE2;
	border-radius : 5px;
	-webkit-box-shadow : 0 0 5px 0 #666666;
	-moz-box-shadow : 0 0 5px 0 #666666;
	box-shadow : 0 0 5px 0 #666666;
    display : flex;
    flex-direction : column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content : center; /* 子要素をflexboxにより中央に配置する */
    align-items : center; /* 子要素をflexboxにより中央に配置する */
}

.loginBox input[type="text"], .loginBox input[type="password"] {
	width : 80%;
	padding : 5px;
	outline : none;
}

.loginForm input[type="submit"] {
	display: block;
	width : 50%;
	margin : 25px auto 5px auto;
	padding : 5px;
	background-color : #999999;
	border-radius: 5px;
	border : 0.5px solid #666666;
	color : #ffffff;
	outline : none;
}

.loginContents {
    width : 95%;
    margin-bottom : 20px; 
    display : flex;
    justify-content : center; /* 子要素をflexboxにより中央に配置する */
    align-items : center; /* 子要素をflexboxにより中央に配置する */
}

.loginContents .title{
    width : 30%;
    text-align : center;
}

.loginContents .inputForm{
    width : 70%;
}

.loginForm input[type="submit"]:hover {
	-webkit-appearance : none;
	color : #333333;
	background-color : #e0e0e0;
	border : 0.5px solid #999999;
}

.loginForm p {
    width : 100%;
    text-align : center;
    margin-bottom : 20px;
}

.loginAlert {
	margin : 0 auto 20px auto;
	width : 90%;
	background-color: #ffe4e1;
	padding : 5px;
	border-radius : 5px;
	text-align : center;
	color : #ca0f00;
	border : 2px solid #ca0f00;
}

#novelty_btn {
	width: 220px;
	height: 75px;
	position : fixed;
	z-index: 1;
	top: 100px;
	right: -160px;
	background-color: #fff;
	border-radius: 5px;
	border: 5px solid #166742;
	/*writing-mode: vertical-rl;*/
	color: #166742;
	font-weight: bold !important;
	font-size: 1.1em;
	text-align: center;
	padding: 7px 10px 0 30px;
	box-sizing: border-box;
	background : url("../img/bg_nv_posukuma.png") no-repeat left bottom / 50px;
	transition: 0.5s;
}

#novelty_btn:hover {
	right: -10px;
	background-color: #166742;
	color: #fff;
	transition: 0.5s;
}