@charset "utf-8";

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{height:100%}
body{}
body,input,select,textarea,button, thead th{color:#222; line-height:1.4; font-size:14px; font-weight:400; letter-spacing:-0.2px; font-family:sans-serif}/*Helvetica, Arial, sans-serif*/


a{text-decoration:none; color:#222; transition:all 0.3s ease}
a:hover{text-decoration:none}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
dl, ol, ul, menu, li{list-style:none}
i,em,address{font-style:normal;font-weight:normal}
input, select, button, textarea{vertical-align:middle;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input[type=”button”], input[type=”submit”], input[type="radio"], input[type="checkbox"], /*input[type="text"],*/ button{cursor:pointer;transition:all 0.2s ease}
hr{display:block; visibility:hidden}
strong{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
img{border:0;max-width:100%}
fieldset{border:none}
legend{display:none}
::placeholder{color:#ccc}


/*----------------------------------------------------
Member Check
----------------------------------------------------*/
#bg.img1{background:#F3EFE6 url(/images/bg01.png) no-repeat; background-size:270px; background-position:left bottom}
#bg.img2{background:#E6EDEE; position:relative}
#bg.img2::before{content:''; position:fixed; right:-90px; bottom:-15px; width:405px; height:286px; background:url(/images/bg02.png) no-repeat; background-size:405px; z-index:-1}
#bg.img2::after{content:''; position:fixed; left:0; bottom:0; width:100%; height:16px; background:#b5c0c1; z-index:-2}

.member-check{text-align:center; border-radius:10px; background:#FFF; padding:30px 20px; margin:15px}
.member-check .logo h1{display:inline-block; width:130px; height:40px; background:url(/images/logo.png) no-repeat 0 0; background-size:130px; text-indent:-9999px}
.member-check .logo p{font-size:16px; margin-top:20px}
.member-check h2{font-size:15px; margin:25px 0; color:#306096; font-weight:normal}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
	.member-check .logo h1{background-image:url(/images/logo@2x.png)}
}

.input-field label{display:block; width:100%; text-align:left; color:#333; font-size:12px; font-weight:600}
.input-field input[type=text]{width:100%; outline:none; border:none; font-size:15px; border-bottom:2px solid #ebebeb; min-height:42px; margin-bottom:20px; padding:0; font-weight:600}
.input-field input[type=text]:focus{border-bottom:2px solid #7C7C7C}

.btn{background:#306096; display:block; padding:0; width:100%; text-align:center;  transition:all 0.3s ease; cursor:pointer; border:none; border-radius:4px; height:50px; color:#FFF; font-size:15px; line-height:50px}
.btn:hover{background:#1C4A7D}

.membership{margin:10px 0 30px; color:#333; font-size:16px}
.membership em{font-weight:600}
.membership::before{content:''; display:inline-block; width:4px; height:10px; margin:0 8px 1px 0; border:solid #ff487f; border-width:0 3px 3px 0; transform:rotate(45deg)}

.copy{color:rgba(0,0,0,.2); font-size:11px; margin-top:20px; text-align:center}


@media (min-width:768px){
	body{display:flex; justify-content:center; align-items:center; flex-direction:column; height:100%; min-height:100%}

	#bg.img1{background-size:614px; background-position:left bottom}
	#bg.img2::before{right:-40px; bottom:-15px; width:635px; height:440px; background-size:635px}
	#bg.img2::after{height:24px}

	.member-check{padding:60px 110px; width:600px; min-height:630px; margin-bottom:30px}
	.member-check .logo h1{width:166px; height:49px; background-size:166px}
	.member-check .logo p{font-size:19px; margin-top:30px}
	.member-check h2{margin:50px 0 45px; font-size:16px}

	.input-field label{font-size:14px}
	.input-field input[type=text]{min-height:48px; margin-bottom:30px}
	.btn{height:54px; line-height:54px; font-size:16px}

	.membership{margin-bottom:50px; font-size:18px}
	.membership::before{width:5px; height:12px}

	.copy{margin-top:0}
}