@import "./common.css";

/*==================================================================*/
/* login css */
/*==================================================================*/
body{
	width: 100%;
	height: 100%;
}
header{
	background-color: #D4AF37;
	text-align: center;
	padding: 1em;
}
header img{
	width: 100%;
/*	max-width: 500px;*/
	max-width: 160px;
}
.outer{
	width: 100%;
	height: 100%;
	display: flex;
    align-items:center;
	flex-flow: column;
	align-items: flex-start;
}

.login{
	width:40rem;
	margin: auto;/*中央寄せかつ要素の表示*/
	text-align:center;
	padding: 1em 0;
        color: #3C3C3C;
}
.login::after{
	content: "";
	padding: 1em;
}

.login h1{
	margin:0 0 1em;
	line-height: 1.4;
	color: #D4AF37;
}

.login .inputbox,
.login .cp_ipselect{
	margin-bottom: 1.5em;
}
.login .btnorange {
	font-size: 2.4rem;
	padding: 1.3em;
	width: 100%;
}

#loginForm{
	border: solid 1px #ccc;
	border-radius:5px;
	padding: 2.5em;
	text-align: left;
}

#loginForm input[type="text"],
#loginForm input[type="password"]{
	padding:1em;
	box-sizing: border-box;
	width:100%;
	margin-top: .2em;
	}

.login .error {color:#7D4728;}

#loginForm > .device-type > label:nth-child(2) {
    margin-left: 1em;
}


/* ラジオ要素をセレクト要素風に */
/* -------------------------------------------------------------- */
.cp_ipselect {
	position: relative;
	display: block;
	overflow: hidden;
	border: solid 1px #3C3C3C;
}
.cp_ipselect > i.toggle {
	position: absolute;
	z-index: 4;
	top: 1.4em;
	right: 1.5em;
}
.cp_ipselect .cp_arrowup:before {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	pointer-events: none;
	border-right: 6px solid transparent;
	border-bottom: 8px solid #3C3C3C;
	border-left: 6px solid transparent;
}
.cp_ipselect .cp_arrowdown:before {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	pointer-events: none;
	border-top: 8px solid #3C3C3C;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}
.cp_ipselect .cp_title,
.cp_ipselect .cp_selectlabel {
	position: relative;
	display: block;
	height: 100%;
	padding: 1em 1em;
	cursor: pointer;
	background: #fff;
}
.cp_ipselect > input {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}
.cp_ipselect > input:checked ~ i.toggle.cp_arrowdown {
	display: none;
}
.cp_ipselect > input:checked ~ i.toggle.cp_arrowup {
	display: block;
}
.cp_ipselect > input:checked label.option .cp_title {
	display: none !important;
}
.cp_ipselect > input:not(:checked) {
	z-index: 4;
}
.cp_ipselect > input:not(:checked) ~ label > span.cp_title {
	display: none;
}
.cp_ipselect > input:not(:checked) ~ i.toggle.cp_arrowup {
	display: none;
}
.cp_ipselect > input:not(:checked) ~ i.toggle.cp_arrowdown {
	display: block;
}
.cp_ipselect > span.cp_selectlabel {
	position: relative;
	z-index: 0;
	border-bottom: 1px solid #F9EDD5;
}
.cp_ipselect label {
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 100%;
	transition: all 1s ease-out;
}
.cp_ipselect label span.cp_title {
	position: relative;
	z-index: 2;
}
.cp_ipselect label span.cp_title:hover {
	background: #F9EDD5;
}
.cp_ipselect label input {
	display: none;
}
.cp_ipselect label input:checked ~ span.cp_title {
	position: absolute;
	z-index: 3;
	top: 0;
	display: block;
	box-sizing: border-box;
	color: inherit;
	width: 100%;
	background: #fff;
	box-shadow: none;
}