body {
margin: 0px;
height: 100%;
text-align: center;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "CenturyGothic-Bold";
    src: url('../font/CenturyGothic-Bold.eot');
    src: url('../font/CenturyGothic-Bold.eot') format('embedded-opentype'),
         url('../font/CenturyGothic-Bold.woff') format('woff'),
         url('../font/CenturyGothic-Bold.ttf') format('truetype'),
         url('../font/CenturyGothic-Bold.svg#CenturyGothic-Bold') format('svg');
}


#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 10%;
background-color: #002D62;
text-align: center;
z-index: 10;
}


#header img {
position: absolute;
top: 20%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
height: 60%;
width: auto;
cursor: pointer;
}


#banner01 {
position: absolute;
top: 10%;
left: 0px;
width: 100%;
height: 38%;
background-color: #fff;
text-align: center;
overflow: hidden;
z-index: 1;
}
@media screen and (orientation:portrait) {
#banner01 {
top: 9.5%;
height: 40%;
background-color: transparent;
}
}


#banner01 img {
width: auto;
height: 100%;
}
@media screen and (orientation:portrait) {
#banner01 img {
width: 100%;
height: auto;
}
}


iframe {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 130%;
}
@media screen and (orientation:portrait) {
iframe {
top: 37%;
left: 5%;
width: 90%;
height: 140%;
}
}


form {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 85%;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 3.8vh;
line-height: 4.2vh;
letter-spacing: -0.1vh;
color: #002D62; 
}
@media screen and (orientation:portrait) {
form {
font-size: 7vw;
line-height: 7.5vw;
}
}


form span {
font-size: 2vh;
line-height: 2.3vh;
}
@media screen and (orientation:portrait) {
form span {
font-size: 4.5vw;
line-height: 4.9vw;
}
}


#conditions {
font-size: 1.4vh;
line-height: 1.7vh;
letter-spacing: 0px;
}
@media screen and (orientation:portrait) {
#conditions {
font-size: 3.5vw;
line-height: 3.8vw;
}
}


hr {
width: 70%;
border-top: 2px;
border-color: #002E5F;
border-style: solid; 
}
@media screen and (orientation:portrait) {
hr {
width: 90%;
}
}


.desktop {
display: block;
}
@media screen and (orientation:portrait) {
.desktop {
display: none;
}
}


input {
width: 40%;
height: 48px;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2vh;
color: #fff; 
background-color: #4BBDCD;
border-radius: 50px; 
border-width: 0px;
padding-left: 2%;
margin-bottom: 0.5%;
}
@media screen and (orientation:portrait) {
input {
width: 80%;
height: 150px;
font-size: 5vw;
border-radius: 80px; 
border-width: 0px;
padding-left: 8%;
margin-bottom: 3%;
}
}


::-webkit-input-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
::placeholder {
color: #fff;
}


#birthday {
width: 12%;
margin-top: 1%;
}
@media screen and (orientation:portrait) {
#birthday {
width: 17%;
margin-top: 3%;
}
}


#address {
width: 18.5%;
}
@media screen and (orientation:portrait) {
#address {
width: 35%;
}
}


select {
width: 12%;
height: 53px;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2vh;
color: #fff; 
background-color: #4BBDCD;
border-radius: 50px; 
border-width: 0px;
padding-left: 2%;
margin-bottom: 1%;
-webkit-appearance:none;
cursor: pointer;
}
@media screen and (orientation:portrait) {
select {
width: 27%;
height: 175px;
font-size: 5vw;
border-radius: 80px; 
border-width: 0px;
padding-left: 8%;
margin-bottom: 3%;
}
}


#send {
width: 30%;
font-size: 2.2vh;
padding: 0px;
background-color: #002D62;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#send {
width: 85%;
height: 170px;
font-size: 6vw;
border-radius: 80px; 
border-width: 0px;
margin-bottom: 3%;
-webkit-appearance: none;
}
}