@charset "utf-8";

#main-banner {
 background: -moz-linear-gradient(65deg, #009911, #00ff43);
 background: -webkit-linear-gradient(65deg, #009911, #00ff43);
 background: linear-gradient(25deg, #009911, #00ff43);
}

div.download-contents {
 width: 100%;
}

div.download-contents div.contents-inner {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display : flex;
}

div.download-contents div.contents-inner > div {
 width: 50%;
}

div.download-infos {
 /*height: 100%;*/
 position: relative;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
div.download-infos > div.download-info {
 height: 50%;
 position: relative;
 padding: 20px;
}
div.download-infos > div.download-info > div {
 position: absolute;
 -ms-transform: translate(0, -50%);
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 top: 50%;
 font-weight: bold;
 font-size: 1.2em;
}

div.download-form {
 padding: 20px;
 position: relative;
}
div.download-form > div.error-message {
 font-size: 1em;
 line-height: 1.5em;
}
div.download-form > div.error-message > p {
 font-weight: bold;
 color: #cc3d00;
}

div.input-title:before {
 content: "";
 display: block;
 width: 100%;
 height: 2em;
}

input[name="mail_address"] {
 width: 80%;
}

#tos .input-title > p {
 font-weight: normal;
}
#tos:before {
 content: "";
 display: block;
 width: 100%;
 height: 2em;
}

div.download-btn {
 padding-top: 10px;
}
div.download-btn > a {
 display: inline-block;
 color: #ffffff;
 font-weight: bold;
 background-color: #c4a300;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 15px;
 padding-right: 15px;
 border-radius: 6px;
 opacity: 0.8;
 white-space: nowrap;
 width: 60%;
 text-align: center;
 font-size: 1.2em;
}
div.download-btn > a:hover {
 opacity: 1;
 text-decoration: none;
}

/* mobile media */
@media screen and (max-width: 768px) {
 div.download-contents div.contents-inner {
  display: block;
 }
 div.download-contents div.contents-inner > div {
  width: 100%;
 }
 div.download-infos > div.download-info {
  height: auto;
  padding: 15px 5px;
 }
 div.download-infos > div.download-info > div {
  position: relative;
  top: 0;
  transform: translate(0, 0);
 }
 div.download-form {
  padding: 20px 5px;
 }
 div.download-btn {
  text-align: center;
 }
}