HTML, BODY { height:100%; margin:0 0 0 0; -moz-appearance:none; -webkit-text-size-adjust:none; }
BODY { font-family:'Roboto',Arial,Helvetica,sans-serif; font-size:100%; font-weight:300; color:#333333; background:#EEEEEE; }

#wrapper { position:relative; min-height:100%; padding-bottom:3em; box-sizing:border-box; }

#header {}
#main {}
#footer {}

#topArea,
#headArea,
#contentArea,
#footArea { position:relative; padding:0 30px; box-sizing:border-box; }

#topContainer,
#headContainer,
#contentContainer,
#footContainer { position:relative; width:1080px; max-width:100%; margin:0 auto; box-sizing:border-box; }

#topContainer:after,
#headContainer:after,
#contentContainer:after,
#footContainer:after { content:''; display:block; clear:both; }

#topArea { background:#FFFFFF; }

#headArea { background:#999999; }
#headContainer {}

#logo { position:relative; z-index:100; float:left; width:200px; padding:20px; margin-top:-30px; background:#FFFFFF; }
#logo IMG { display:block; width:100%; height:auto; }

#pageInfo { position:absolute; right:0; bottom:20px; text-align:right; color:rgba(255,255,255,0.75); font-size:3em; line-height:1; font-weight:normal; font-family:'Roboto Condensed',Arial,Helvetica,sans-serif; }

#contentContainer { padding:30px 0; }

#footArea { position:absolute; left:0; right:0; bottom:0; }

#naviFoot { text-align:center; }
#naviFoot UL { display:inline-block; margin:0 0 0 0; padding:1em 0; }
#naviFoot UL LI { display:inline-block; margin:0 0 0 0; padding:0 0.5em; font-size:0.75em; list-style-type:none; line-height:1; border-left:1px solid #CCCCCC; text-transform:uppercase; }
#naviFoot UL LI:first-child { border:0; }
#naviFoot UL LI A { display:block; color:#999999; }
#naviFoot UL LI A:hover { color:#666666; }


@media only screen and (max-width:599px) { 
#topArea,
#headArea,
#contentArea,
#footArea { padding:0 15px; }
}


/* Start */
.pageLogin { background:url(../pix/architect-254579_1920.jpg) no-repeat center center; background-size:cover; }
.pageLogin:before { content:''; position:absolute; display:block; left:0; top:0; right:0; bottom:0; background:hsl(188deg 85% 50% / 50%); background: linear-gradient(150deg,  rgba(19,236,212,0.66) 0%, rgba(19,207,236,0.66) 33%, rgba(19,207,236,0.66) 67%, rgba(19,236,212,0.66) 100%); }
.pageLogin #naviFoot UL LI A { color:#444444; }

#loginArea { padding:calc(50vh - 150px) 0; }
#loginContainer { margin:0 auto; width:400px; max-width:90%; border-radius:3px; box-shadow:0 10px 30px rgba(0,25,50,0.2); }
.loginHead { padding:15px 30px; background:rgba(255,255,255,0.8); font-weight:400; border-radius:3px 3px 0 0; color:hsl(188deg 25% 20%); }
.loginHead I { display:inline-block; font-size:1.25em; line-height:inherit; }
.loginHead SPAN { display:inline-block; margin-left:0.5em; font-size:1.25em; font-family:'Roboto Condensed',Arial,Helvetica,sans-serif; }
.loginHead #languageSwitch { margin:0 0 0 0; padding:0 0 0 0; }
.loginHead #languageSwitch UL LI.act:before { border-top-color:#999999; }
.loginContent { padding:30px; background:#FFFFFF; border-radius:0 0 3px 3px; }
.loginContent .formContent { margin-top:15px; }
.loginContent .formContent:after { content:''; display:block; clear:both; }
.loginContent .formField:first-child { margin-top:0; }
.loginContent LABEL { display:none; }
.loginContent #loginId { float:left; width:calc(100% - 100px); border-color:transparent; }
.loginContent INPUT#loginId { padding:1em; }
.loginContent INPUT.submit { float:right; width:90px; padding:1em 5px; border-radius:3px; color:#FFFFFF; background:hsl(188deg 25% 20%); border-color:transparent; cursor:pointer; }
.loginContent INPUT.submit:hover { background:hsl(188deg 25% 15%); }