@font-face {
	font-family: 'UDGothic-Bold';
	src:	url('../font/BIZ-UDGothic-Bold.eot') format('oldIE'),
			url('../font/BIZ-UDGothic-Bold.woff') format('woff'),
			url('../font/BIZ-UDGothic-Bold.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
	font-family: 'UDGothic-Bold';
	-webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #ffc;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html, body {
	height: 100%;
	width: 100vw;
}

table {
    border-collapse: collapse;    
}

table td {
    padding: 4px 2px;
    border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
}

/*
body::-webkit-scrollbar {
    display: none;
}

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}
*/

header {
    width: auto;
    height: 60px;
    margin-top: 0;
    padding-top: 0;
    font-weight: bold;
    text-align: center;
    background-color: #f00;
}

header p {
    padding: 12px 0;
    font-size: 16px;
    color:#fff;
}

footer {
	width: auto;
    height: 96px;
    margin-top: 0;
    padding-top: 0;
	background-color: #eee;
	border-top: solid 3px #f00;
    text-align: center;
}

footer p {
    padding: 0;
}

#contents {
    width: 92%;
    margin: 0px auto;
    text-align: center;
    background-color: #ffc;
}

h1, h2, h3 {
    color: #fff;
    background-color: #c03;
    line-height: 1.4em;
}

h1 {
    font-size: 169%;
}

h2 {
    margin: 24px 0;
    font-size: 144%;
}

h3 {
    margin: 24px 0;
    font-size: 120%;
}

#message {
    font-size: 132%;
}

textarea {
    width: 64%;
    resize: none;
}

.submit {
    margin: 40px auto;
    border:none;
    color:#fff;
    display: block;
    font-size: 144%;
    font-weight: bold;
    text-align:center;
    background:#f00;
    padding:16px 40px;
    border-radius: 12px;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
}

.label {
    display: inline-block;
    margin: 10px auto;
    width: 200px;
    height: 40px;
    padding: auto 5px;
    color: #c03;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    border: 2px solid #c03;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
}

.middle {
    vertical-align: middle;
}

.em {
    display: inline-block;
    background-color: #ee0;
    color: #e00;
    font-size: 14px;
    font-weight: bold;
}

.px10 {
    color: #003;
    font-size: 10px;
    font-weight: bold;
}

.notice {
    width: 100%;
    background-color: #ec0;
    color: #e00;
    position: fixed;
    top: 0;
    font-size: 14px;
    font-weight: bold;
    height: 60px;
}

.notice p.warn {
    text-align: center;
    line-height: 60px;
}

.notice a.close {
    width: 18px;
    height: 18px;
    float: right;
    background: url(../images/close.png) no-repeat top left;
    text-indent: -9999px;
    margin-right: 15px;
    margin-top: 20px;
}

.notice a.close:hover {
    background: url(../images/close-hover.png) no-repeat top left;		
}

.wrapper {
    min-height: 100vh;
    position: relative;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.table_4 {
    display: inline-block;
	width: 320px;
	margin-top: 4px;
	margin-bottom: 4px;
    font-size: 14px;
    font-weight: bold;
}

.form-bg {
    width: 320px;
    height: 252px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;
    margin: 80px auto 0;
    padding: 8px 0 0 8px; 
}

.form-bg form {
    width: 300px;
    height: 242px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow:1px 1px 3px 3px rgba(0,102,204,0.5);
    -webkit-box-shadow:1px 1px 3px 3px rgba(0,102,204,0.5);
    box-shadow:1px 1px 3px 3px rgba(0,102,204,0.5);
    background-color: #eee;
}

.form-bg form h2 {
    font-size: 16px;
    font-weight: bold;
    color: #003;
    background-color: #eee;
    line-height: 32px;
    margin: 24px auto;
}

input[type="text"], input[type="password"]{
    width: 200px;
    height: 33px;
    padding: 0 10px 0 10px;
    margin: 12px auto;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    border: 1px solid #00c;
}

input[type="text"]:focus, input[type="password"]:focus{
    border: 2px solid #00c;
}

button[type="submit"] {
    margin-top: 12px;
    padding: 8px 12px 8px 12px;
    font-weight: bold;
    color: #fff;
    background-color: #C03;
    border: 0px solid #fff;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

@media only screen and (max-width: 1600px) {
	#contents {
		height: calc(95% - 55px);
	}
}

@media only screen and (max-width: 1280px) {
	#contents {
		height: calc(94% - 54px);
	}
}

@media only screen and (max-width: 1024px) {
	#contents {
		height: calc(93% - 54px);
	}
}

@media only screen and (max-width: 960px) {
	#contents {
		height: calc(92% - 54px);
	}
}

@media only screen and (max-width: 768px) {
	#contents {
		height: calc(91% - 54px);
	}
}

@media only screen and (max-width: 640px) {
	#contents {
		height: calc(90% - 54px);
	}
}

@media only screen and (max-width: 480px) {
	#contents {
		height: calc(89% - 54px);
	}
}

@media only screen and (max-width: 320px) {
	#contents {
		height: calc(88% - 54px);
	}
}