/*IE11は游ゴシック体、游明朝体が使用できない*/
@media all and (-ms-high-contrast:none){
	*{
		font-size: 100%;
		font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	}
	.minchou{
		font-family: "黎ミン L","Reimin Light", "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	}
}

/*==================================================
main
==================================================*/
main{
	display:block;
	width:100%;
	min-height:100vh;
	background-color:#eeeeee;
	box-sizing:border-box;
	padding:0;
	overflow: hidden;
}

header + main{
	min-height:calc(100vh - 60px);
}


@media screen and (max-width:550px){
header + main{
	min-height:calc(100vh - 45px);
}
}

/*==================================================
login
==================================================*/
div.login{
	width:calc(100% - 40px);
	max-width:600px;
	margin: 60px auto 45px auto;
	padding:20px;
	box-sizing:border-box;
	background-color:#fff;
}
	
	div.login h2{
		font-size:1.5em;
		font-weight:bold;
		text-align:center;
		letter-spacing:0.2em;
	}
	
		div.login h2 span{
			color:#b00303 ;
			font-size:1.75em;
			display:block;
			font-weight:500;
			text-align:center;
			margin:10px 0 0 0;
			letter-spacing:0.05em;
		}
			
	div.login ul{
		width:calc(100% - 20px);
		margin:40px auto 0 auto;
		overflow:hidden;
		padding:20px;
	}
	
		div.login ul li{
			height:50px;
			line-height:50px;
			margin:30px 0 0 0;
			border-bottom:1px #b00303  solid;
			box-sizing:border-box;
		}
		
			div.login ul li:first-child{
				margin:10px 0 0 0;
			}
		
			div.login ul li input {
				height:auto;
				line-height:1em;
				font-size:1.25em;
				border:none;
				display:inline-block;
				width:100%;
				padding:5px;
				box-sizing:border-box;
			}
	
			
			/*IE11はfocusアクションがない*/
			@media all and (-ms-high-contrast:none){
				div.login ul li input:focus{
					border-color:#404040;
				}
			}
			
		div.login p{
			font-weight:bold;
			text-align:center;
			margin:20px auto 0 auto;
		}
		
		div.login p.red{
			color:#e53935;
		}


@media screen and (max-width:500px){
	div.login h2{
		font-size:1.25em;
	}
	
		div.login h2 span{
			font-size:1.4em;
		}
		
}

/*==================================================
div.submit_box
==================================================*/
div.submit_box{
	width:100%;
	text-align:center;
	letter-spacing:-0.4em;
	margin:20px auto;
}

	
/*==================================================
a.button
==================================================*/
a.button{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	margin:10px auto;
	font-size:1.5em;
	font-weight:500;
	color:#ffffff;
	letter-spacing:0.1em;
	text-indent: 0.1em;
	text-decoration:none;
	box-sizing:border-box;
	vertical-align: bottom;
	text-align: center;
	border: none;
	background-color:#808080;
}

a.button:hover{
	opacity:0.5;
}
	
	a.button.red{
		background-color:#b00303;
	}
	a.button.green{
		background-color:#42b538;
	}
	a.button.gray{
		background-color:#7f8c8d;
	}
	a.button.blue{
		background-color:#2bcbba;
	}
	a.button.sky{
		background-color:#0abde3;
	}
	a.button.yellow{
		background-color:#f7b731;
	}
	
	a.button.circle{
		border-radius:30px;
	}

	a.button.lock{
		background-image:url('../img/lock.svg');
		background-size:40px auto;
		background-repeat:no-repeat;
		background-position:calc(50% - 80px) center;
		text-indent:20px;
	}
	
	a.button.glaph{
		background-image:url('../img/glaph.svg');
		background-size:40px auto;
		background-repeat:no-repeat;
		background-position:calc(50% - 100px) center;
		text-indent:20px;
	}
	
	a.button.unlock{
		background-image:url('../img/unlock.svg');
		background-size:40px auto;
		background-repeat:no-repeat;
		background-position:calc(50% - 90px) center;
		text-indent:20px;
	}


/*==================================================
header
==================================================*/
header{
	background-color:#fff;
	height:60px;
	line-height:60px;
	overflow:hidden;
}

	header h1{
		width:calc(100% - 15px);
		margin:0 0 0 15px;
		max-width:330px;
		letter-spacing:0.1em;
		float:left;
		font-size:1.5em;
		font-weight:500;
		box-sizing:border-box;
	}
	
		header h1 a{
			text-decoration:none;
		}

	header p{
		float:right;
		background-image:url('../img/user.png');
		background-position:left center;
		background-repeat:no-repeat;
		background-size:31px 31px;
		padding:0 50px 0 45px;
		text-align:right;
		box-sizing:border-box;
	}

@media screen and (max-width:570px){
header{
	height:45px;
	line-height:45px;
}

	header h1{
		font-size:1.2em;
		max-width:250px;
		letter-spacing:0.05em;
		margin:0 0 0 10px;
	}
	
	header p{
		background-size:25px 25px;
		padding:0 15px 0 35px;
		font-size:0.85em;
	}
}

@media screen and (max-width:440px){
	header h1{
		font-size:0.85em;
		max-width:180px;
	}
}
@media screen and (max-width:365px){
	header p{
		display:none;
	}
}


/*==================================================
content
==================================================*/
div#content{
	max-width:1000px;
	margin:0 auto;
	padding:40px 20px 0 20px;
	box-sizing:border-box;
}

@media screen and (max-width:700px){
div#content{
	padding:20px 20px 0 20px;
}
}

/*==================================================
input
==================================================*/
.input input[type=text],
.input input[type=tel],
.input input[type=number],
.input select,
.input textarea{
	box-sizing:border-box;
	width:100%;
	padding:0 3px;
	margin:10px 0;
}

.input select{
	padding:0px 5px 5px 5px;
}
@-moz-document url-prefix() {
	.input select{
		padding:0px 5px;
	}
}

.input textarea{
	min-height:6em;
}

.input input[type=text].yen,
.input input[type=tel].yen,
.input input[type=number].yen{
	text-align:right;
}

div.comp{
	background-color:#fff;
	border:1px #ccc solid;
	box-sizing:border-box;
	margin:20px auto !important;
	padding:20px;
}

/*==================================================
ラジオボタン、チェックボックス
==================================================*/
.input input[type=radio],
.input input[type=checkbox] {
	display: inline-block;
	margin-right: 6px;
}
.input input[type=radio] + label,
.input input[type=checkbox] + label {
	position: relative;
	display: inline-block;
	margin:0 10px 10px 0;
	line-height: 30px;
	cursor: pointer;
	border:1px #ccc solid;
}
 
@media (min-width: 1px) {
	.input input[type=radio],
	.input input[type=checkbox] {
		display: none;
		margin: 0;
	}
	.input input[type=radio] + label,
	.input input[type=checkbox] + label {
		padding: 5px 20px 5px 34px;
	}
	.input input[type=radio] + label::before,
	.input input[type=checkbox] + label::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		background: #FFF;
	}
	.input input[type=radio] + label::before {
		border: 2px solid #ccc;
		border-radius: 30px;
	}
	.input input[type=checkbox] + label::before {
		border: 2px solid #ccc;
	}
	.input input[type=radio]:checked + label::after,
	.input input[type=checkbox]:checked + label::after {
		content: "";
		position: absolute;
		top: 50%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}
	.input input[type=radio]:checked + label::after {
		left: 15px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		background: #4b4b4b;
		border-radius: 8px;
	}
	.input input[type=checkbox]:checked + label::after {
		left: 13px;
		width: 16px;
		height: 8px;
		margin-top: -8px;
		border-left: 3px solid #4b4b4b;
		border-bottom: 3px solid #4b4b4b;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	.input input[type=checkbox] + label.ikkatsu{
		margin-right:0;
		width:0;
	}
	
	.input input[type=checkbox] + label.group_name{
		padding:0 24px 0 0;
		margin:0;
	}
	
	.input input[type=checkbox] + label.group_name::before {
		content:'';
		left:auto;
		right: 0;
		
	}
	
	.input input[type=checkbox] + label.group_name::after {
		content: '';
		position: absolute;
		top: 6px;
		right: 0;
		display: block;
		width: 18px;
		height: 18px;
		background-image:url('../img/group_open.png');
		background-position:center;
		background-size:cover;
	}
	
	.input input[type=checkbox]:checked + label.group_name::after {
		content: '';
		position: absolute;
		top: 6px;
		left:auto;
		right: 0;
		display: block;
		width: 18px;
		height: 18px;
		border:none;
		background-image:url('../img/group_close.png');
		background-position:center;
		background-size:cover;
		margin-top: 0;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}