@charset "UTF-8";

/* --------------------------------------------------------------------------
Placeholder
---------------------------------------------------------------------------- */
::-webkit-input-placeholder { color:#9B9D99; font-size:80%; font-family: mp; text-align:center; }
::-ms-input-placeholder { color:#9B9D99; font-size:80%; font-family: mp; text-align:center; }
::-moz-placeholder { color:#9B9D99; font-size:80%; font-family: mp; text-align:center; }

/* --------------------------------------------------------------------------
Login
---------------------------------------------------------------------------- */
div.login_box { width:90%; max-width: 400px; margin:0 auto 0 auto; padding:0; overflow: hidden; }
div.log_obj_top { width:100%; margin:40vh 0 0 0; padding:0; overflow: hidden; }
div.log_obj_bottom { width:100%; margin:0 0 0 0; padding:0; overflow: hidden; position: relative; }
input.log_name { width:90%; margin:0 auto 0 auto; padding:15px; font-size: 120%; color:#777062; border-radius: 8px 8px 0 0; border-style: solid; border-width: 0 0 2px 0; border-color: #968B7C; background: #F1EEE0; text-align: left; }
input.log_pass { width:90%; margin:0 auto 0 auto; padding:15px; font-size: 120%; color:#777062; border-radius: 0 0 8px 8px; border-style: solid; border-width: 0 0 0 0; border-color: #968B7C; background: #F1EEE0; text-align: left; }

input.log_btn { width:200px; margin:80px auto 0 auto; padding:15px 0 15px 0; color:#fff; border:none; border-radius: 4px; }
p.log_under_str { width:100%; margin:0; padding:0; font-size:110%; text-align: center; color:#F1EEE0; position: absolute; bottom:5vh; left:0; font-family: utsukushi; }

p.delform { width:90%; max-width: 400px; margin:10px auto 0 auto; padding:10px; text-align: center; font-size:90%; color:#F1EEE0; cursor: pointer; }
p.delform:hover { width:90%; max-width: 400px; margin:10px auto 0 auto; padding:10px; text-align: center; font-size:90%; color:#605545; cursor: pointer; }

#tpass{ position:absolute; top:22%; right: 8%; width: 25px; height: 25px; cursor: pointer; }
.eye { background-image: url(./img/eye.png); background-size: 100% 100%; opacity: 0.3; }
.no-eye { background-image: url(./img/ceye.png); background-size: 100% 100%; opacity: 0.3; }

p.er { width:90%; max-width: 500px; margin:10px auto 0 auto; padding:10px; background: #BE44D8; color:#fff; text-align: center; font-size:100%; }
p.rock { width:90%; max-width: 500px; margin:10px auto 0 auto; padding:10px; background: #7A6DCA; color:#fff; text-align: center; font-size:100%; }







/* ------------------------------------------------------
300 - 350 (iphone 4)
-------------------------------------------------------- */
@media screen and (min-width: 300px ) and (max-width:350px) {
		div.log_obj_top { margin:35vh 0 0 0; }
		input.log_name { padding:10px; font-size: 100%; }
		input.log_pass { padding:10px; font-size: 100%; }
	/* ------------------------------------------------------
	300 - 350 (iphone 5)
	-------------------------------------------------------- */
	@media screen and (max-width : 350px) and (max-height : 568px) {
		div.log_obj_top { width:100%; margin:36vh 0 0 0; padding:0; overflow: hidden; }
		input.log_btn { width:150px; margin:40px auto 0 auto; padding:13px 0 13px 0; color:#fff; }
	}
}


/* ------------------------------------------------------
350 - 400 ( android)(iphone6-375)
-------------------------------------------------------- */
@media screen and (min-width: 351px ) and (max-width:400px) {
		div.log_obj_top { width:100%; margin:36vh 0 0 0; padding:0; overflow: hidden; }
		input.log_btn { width:150px; margin:40px auto 0 auto; padding:13px 0 13px 0; color:#fff; }
		div.log_obj_top { margin:35vh 0 0 0; }
		input.log_name { padding:10px; font-size: 100%; }
		input.log_pass { padding:10px; font-size: 100%; }

}


/* ------------------------------------------------------
400 - 450(iphone6plus 414)
-------------------------------------------------------- */
@media screen and (min-width: 401px) and (max-width:450px) {
		div.log_obj_top { width:100%; margin:36vh 0 0 0; padding:0; overflow: hidden; }
		input.log_btn { width:150px; margin:50px auto 0 auto; padding:13px 0 13px 0; color:#fff; }

}


/* ------------------------------------------------------
450 - 500(iphone4 横)
-------------------------------------------------------- */
@media screen and (min-width: 451px) and (max-width:500px) {
	.fire_logo { top: calc(35% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	div.log_obj_top { width:100%; margin:48vh 0 0 0; padding:0; overflow: hidden; }
	/* ------------------------------------------------------
	450 - 500(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 500px) and (min-height : 480px) {

	}
}


/* ------------------------------------------------------
500 - 550 ( xperia z ultra)
-------------------------------------------------------- */
@media screen and (min-width: 501px) and (max-width:550px){
	.fire_logo { top: calc(35% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	div.log_obj_top { width:100%; margin:48vh 0 0 0; padding:0; overflow: hidden; }
	/* ------------------------------------------------------
	500 - 550(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 550px) and (min-height : 350px) {
	}
}


/* ------------------------------------------------------
550 - 600(iphone5 横)
-------------------------------------------------------- */
@media screen and (min-width: 551px) and (max-width:600px){
	.fire_logo { top: calc(35% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	div.log_obj_top { width:100%; margin:48vh 0 0 0; padding:0; overflow: hidden; }
	/* ------------------------------------------------------
	550 - 600(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 600px) and (min-height : 350px) {
	}
}


/* ------------------------------------------------------
600 - 650(android 横)
-------------------------------------------------------- */
@media screen and (min-width: 601px) and (max-width:650px){
	.fire_logo { top: calc(35% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	div.log_obj_top { width:100%; margin:48vh 0 0 0; padding:0; overflow: hidden; }
	p.log_under_str { width:100%; margin:40px auto 30px auto !important; padding:0; font-size:110%; text-align: center; color:#F1EEE0; position:initial; }
	/* ------------------------------------------------------
	600 - 650(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 650px) and (min-height:420px){
		p.log_under_str { width:100%; margin:0; padding:0; font-size:110%; text-align: center; color:#F1EEE0; position: absolute; bottom:5vh; left:0; font-family: utsukushi; }
	}
}


/* ------------------------------------------------------
650 - 700(iphone6横=667)
-------------------------------------------------------- */
@media screen and (min-width: 651px) and (max-width:700px){
	.fire_logo { top: calc(35% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	div.log_obj_top { width:100%; margin:48vh 0 0 0; padding:0; overflow: hidden; }
	p.log_under_str { width:100%; margin:80px auto 30px auto !important; padding:0; font-size:110%; text-align: center; color:#F1EEE0; position:initial; }
	/* ------------------------------------------------------
	650 - 700(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 700px) and (min-height:450px){
	}
}


/* ------------------------------------------------------
700 - 750(iphone6plus横=736)
-------------------------------------------------------- */
@media screen and (min-width: 701px) and (max-width:750px){
	.fire_logo { top: calc(35% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
	div.log_obj_top { width:100%; margin:48vh 0 0 0; padding:0; overflow: hidden; }
	p.log_under_str { width:100%; margin:80px auto 30px auto !important; padding:0; font-size:110%; text-align: center; color:#F1EEE0; position:initial; }
	/* ------------------------------------------------------
	700 - 750(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 750px) and (min-height:450px){
	}
}


/* ------------------------------------------------------
750 - 800( ipad )
-------------------------------------------------------- */
@media screen and (min-width: 751px) and (max-width:800px){
}


/* ------------------------------------------------------
800 - 850
-------------------------------------------------------- */
@media screen and (min-width: 801px) and (max-width:850px) {
}


/* ------------------------------------------------------
850 - 900
-------------------------------------------------------- */
@media screen and (min-width: 851px) and (max-width:900px) {
}


/* ------------------------------------------------------
900 - 1000 (xperia z ultra 横)
-------------------------------------------------------- */
@media screen and (min-width: 901px) and (max-width:1000px) {

	/* ------------------------------------------------------
	900 - 1000(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 1000px) and (min-height : 600px) {
	}
}


/* ------------------------------------------------------
1000 - 1100(ipad 横)
-------------------------------------------------------- */
@media screen and (min-width: 1001px) and (max-width:1100px){
	/* ------------------------------------------------------
	1000 - 1100( height 700まで)
	-------------------------------------------------------- */
	@media screen and (max-width : 1100px) and (max-height : 700px) {
	}
}