@charset "UTF-8";

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
body.minihd{ background: #fff; }
body.minihd #main{ padding:30px 10px 0;}

.loginPage *{ box-sizing:border-box;}

.loginPage a,
.loginPage input { outline: none; }

.loginType li { background: #f2f6f5; overflow: hidden; border-radius: 3px; }
.loginType li > p { background: #04a7ba; padding: 8px 0; font-size: 15px; color: #fff; text-align: center; letter-spacing: 1px; }
.loginType li > div { padding: 20px 10px 30px; }

.loginType li div dl { width: 100%; }
.loginType li div dl dt img { display: inline-block; margin: 0 0 0 6px; }
.loginType li div dl dd { margin: 4px 0 0; }
.loginType li div dl dt:first-child + dd { margin: 4px 0 10px; }

.loginType li div dl dd input { width: 100%; padding: 0 10px; height: 34px; font-size: 14px; border: #ccc 1px solid; -webkit-appearance: none; }
.loginType li div dl dd span { margin: 10px 0 0; font-size: 12px; }

.loginType li .btn { background: #04a7ba; width: 173px; height: 40px; margin: 16px auto 0; }
.loginType li .btn:hover { background: #04a7ba !important; }

/*amazon*/
.loginType .amazon { background: #f5f5f5; margin: 20px 0 0; }
.loginType .amazon > p { background: #707070 !important; }

.loginType .amazon #AmazonPayButton { display: table; margin: 16px auto 0; }
.loginType .amazon #AmazonPayButton img { width: 174px !important; max-height: 46px !important; }

.loginType .amazon div .attentionBox { background: #ececec; padding: 14px 10px 14px 24px; margin: 20px 0 0; position: relative; }
.loginType .amazon div .attentionBox p{ font-size: 12px!important;}
.loginType .amazon div .attentionBox p a{ color: #838383;}

.startTxt { margin: 30px 0 0; }
.startTxt .btn { width: 180px; padding: 11px 0 10px 14px!important; margin: 10px auto 0; position: relative; font-size: 13px !important; line-height: 1; }
.startTxt .btn:before { content: ""; display: block; background: url(../img/common/icon_applyuser.png) no-repeat; background-size: cover; width: 12px; height: 15px; position: absolute; top: 9px; left: 13px; }

.pwStart { padding-top: 70px; margin-top: -25px; }
.pwStart h2 { background: #f5f5f5; padding: 10px; font-size: 14px; font-weight: bold; }

.pwStart > p { margin: 10px 0 0; }
.pwStart ul { margin: 20px 0 0; }
.pwStart ul li:first-child { padding: 0 0 20px; margin: 0 0 20px; border-bottom: #ccc 1px solid; }

.pwStart ul li h3 { margin: 0 0 12px; font-size: 15px; font-weight: bold; color: #1ea880; }
.pwStart ul li h3 span { display: block; width: 70px; height: 20px; margin: 0 0 6px; padding: 3px 0 0; font-size: 12px; line-height: 1; text-align: center; border: #1ea880 1px solid; border-radius: 10px; }

.pwStart ul li dl { background: #f5f5f5; padding: 4px 10px 14px; margin: 20px 0 0; overflow: hidden; }
.pwStart ul li dl dt,
.pwStart ul li dl dd { margin: 10px 0 0; font-size: 12px; }

.pwStart ul li dl dt { width: 28%; max-width: 112px; height: 34px; float: left; clear: both; line-height: 34px; }
.pwStart ul li dl dd { width: 72%; float: left; }
.pwStart ul li dl dd input { width: 100%; height: 34px; padding: 0 10px; font-size: 14px }

.pwStart ul li .btn { min-width: 150px; height: 34px; margin: 20px auto 0; font-size: 13px; line-height: 1; text-align: center; }

/*gmoLogin*/
.gmoLogin{ text-align: center;}
.gmoLogin > span{ display: block; margin:4px auto 0; font-size: 12px; color: #838383; }

/*gmoBtn*/
.gmoBtn { display: block; background: url("https://id.gmo.jp/gp/common/btn/login_17446.png") no-repeat left top, #fff; background-size: cover; width: 174px; height: 46px; margin: 10px auto 0; overflow: hidden; text-indent: 100%; white-space: nowrap; }


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
	body.minihd #main{ width: 960px; padding: 36px 0;}
	body.geoCamp #main{ width: auto; }

	.loginPage { padding: 0 20px 60px; }
	.loginType { display: table; min-width: 450px; margin: 0 auto; }

	.loginType li { width: 47%; float: left; }
	.loginType li:first-child { margin: 0 6% 0 0; }

	.loginType li > p { padding: 20px 0 18px; font-size: 17px; line-height: 1; }
	.loginType li > div { padding: 34px 50px; min-height: 433px; }

	/*only*/
	.loginType .only { width: 100%; margin: 0; }
	.loginType .only > div { min-height: auto; }

	.loginType li div dl dt { font-size: 14px; }
	.loginType li div dl dt:first-child + dd { margin: 4px 0 16px; }

	.loginType li div dl dd input { height: 36px; padding: 0 14px; }
	.loginType li div dl dd input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; }

	.loginType li .btn { margin: 30px auto 0; font-size: 16px; }

	.loginType .amazon { margin: 0; }
	.loginType .amazon div p { font-size: 14px; }

	.loginType .amazon #AmazonPayButton { margin: 22px auto 0; }
	.loginType .amazon div .attentionBox { padding: 12px 17px 10px 32px; }
	.loginType .amazon div .attentionBox:before { top: 12px; left: 17px; }

	.startTxt { display: table; margin: 46px auto 0; padding: 0 206px 0 0; position: relative; font-size: 14px; }
	.startTxt .btn { margin: 0; position: absolute; top: -4px; right: 0; }

	.pwStart { padding-top: 120px; margin-top: -64px; }
	.pwStart h2 { padding: 12px 15px 10px; font-size: 16px; }
	.pwStart > p { margin: 22px 0 0; }

	.pwStart ul { margin: 36px 0 0; overflow: hidden; }
	.pwStart ul li { width: 440px; float: right; }
	.pwStart ul li:first-child { padding: 0; margin: 0; float: left; position: relative; border-bottom: none; }
	.pwStart ul li:first-child:before { content: ""; display: block; background: #ccc; width: 1px; height: 100%; position: absolute; top: 0; right: -20px; }

	.pwStart ul li h3 { font-size: 16px; }

	.pwStart ul li dl { padding: 10px 20px 20px; margin: 26px 0 0; }
	.pwStart ul li dl dt,
	.pwStart ul li dl dd { margin: 10px 0 0; }

	.pwStart ul li dl dt { height: 36px; line-height: 36px; font-size: 14px; }
	.pwStart ul li dl dd input { height: 36px; padding: 0 14px; }
}


/*************************************************************************************************************************
* 960px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:961px){

	.loginPage { padding: 0 0 60px; }

	.pwStart ul li:first-child:before { right: -40px; }

	.loginType li .btn:hover { background: #10b9cd !important; }
	.loginType .amazon #AmazonPayButton:hover { opacity: 0.8; }

	/*gmoBtn*/
	.gmoBtn:hover { background: url("https://id.gmo.jp/gp/common/btn/login_17446-hover.png") no-repeat left top; background-size: cover; }
}