/* DEFAULT
-------------------------------------------------- */
.cf:after { display: block; content: url('images/clear.gif'); clear: both; height: 0; overflow: hidden; }

body {
  position: relative;
  margin: 0; padding: 0;
  background: #FFFFFF;
  color: #000066;
  font: normal 14px/1.6em "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;
  letter-spacing: 1px;
}
div { word-wrap: break-word; }
p {
  margin: 0 0 5px 0;
  font: normal 14px/1.6em "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;
}
img ,div { margin: 0; padding: 0; border: none; }
ul { margin: 0; padding: 0; list-style: inside; }
ol { margin: 0; padding: 0; list-style: outside decimal; }
form { margin: 0; }
table, table td, table th {
  font: normal 14px/1.6em "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;
  letter-spacing: 1px;
}
.clear-01 {
  clear: both;
}

/* LINK
-------------------------------------------------- */
a:link { color: #000066; text-decoration: underline; }
a:visited { color: #000066; text-decoration: underline; }
a:hover { color: #CC0000; text-decoration: underline; }
*:focus {
  outline: none;
}
.side-link-01 {
  position: fixed; bottom: 10px; right: -60px;
  overflow: hidden;
  width: 60px; height: 60px;
  background: #CC0000 url('images/top_01.png') no-repeat 5px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  text-indent: 105%; white-space: nowrap;
  cursor: pointer;
}
a.close-btn {
  display: block;
  width: 200px; margin: 50px auto; padding: 12px 0 10px;
  background: #01A0E1;
  text-align: center; color: #FFFFFF; text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
}
a.close-btn:hover {
  background: #EA5400;
}

/* LAYOUT
-------------------------------------------------- */
h1 {
  width: 100%; margin: 0 auto 30px; padding: 15px 0 10px;
  text-align: center;
  border-top: solid 10px #DC0119;
  border-bottom: solid 10px #DC0119;
}
h1 img {
  display: block;
  margin: 0 auto;
}
h2 {
  margin: 0 0 30px 0; padding: 0 0 12px 0;
  color: #01A0E1; font-size: 32px; letter-spacing: 5px; line-height: 1.2; font-weight: normal;
  border-bottom: solid 2px #01A0E1;
}
.container-01 {
  width: 100%;
  background: #FFFFFF;
}
.container-01 > div:after { display: block; content: url('images/clear.gif'); clear: both; height: 0; overflow: hidden; }
.container-01 > div {
  position: relative;
  margin: 0px auto; padding: 0 0 0 0;
}
.content-01:after { display: block; content: url('images/clear.gif'); clear: both; height: 0; overflow: hidden; }
.content-01 {
  width: 100%; padding: 20px 0 80px 0;
}
.foot-03 {
  width: 100%; padding: 10px 0;
  background: #EA5400;
  text-align: center; color: #FFFFFF; font-size: 0.9em; line-height: 1.3em;
  border-top: solid 1px #FFFFFF;
  border-bottom: solid 1px #FFFFFF;
}

/* BOX
-------------------------------------------------- */
.box-01 {
  padding: 10px;
  background: #5AC1EB;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px 1px;
}
.box-03 {
  padding: 10px;
  background: #FFFFFF;
  border-radius: 7px;
}

/* BUTTON
-------------------------------------------------- */
#mail-btn-02:after { display: block; content: url('images/clear.gif'); clear: both; height: 0; }
#mail-btn-01 {
  width: 100%; margin: 20px 0 0 0; padding: 20px 0 0 0;
  border-top: solid 1px #01A0E1;
}
#mail-btn-01 .btn-01 {
  display: block; overflow: hidden;
  width: 170px; height: 35px; margin: 0 0 0 auto; padding: 35px 0 0 0;
  background: url('images/mail_btn_01.gif') no-repeat left top;
  border: none;
  cursor: pointer;
}
#mail-btn-01 .btn-01:hover {
  background-position: 0 -40px;
}

#mail-btn-02:after { display: block; content: url('images/clear.gif'); clear: both; height: 0; }
#mail-btn-02 {
  width: 100%; margin: 20px 0 0 0;
}
#mail-btn-02 .btn-01 {
  overflow: hidden;
  width: 170px; height: 35px; margin: 0; padding: 35px 0 0 0;
  background: url('images/mail_btn_01.gif') no-repeat -180px -80px;
  border: none;
  cursor: pointer;
}
#mail-btn-02 .btn-01:hover {
  background-position: -180px -120px;
}
#mail-btn-02 .btn-02 {
  overflow: hidden;
  width: 170px; height: 35px; margin: 0; padding: 35px 0 0 0;
  background: url('images/mail_btn_01.gif') no-repeat left -80px;
  text-indent: 100%; white-space: nowrap;
  border: none;
  cursor: pointer;
}
#mail-btn-02 .btn-02:hover {
  background-position: 0 -120px;
}

/* FORM
-------------------------------------------------- */
#form_01 {
  margin: 0 auto 0; padding: 20px 20px;
  background: #FFFFFF;
  border-radius: 7px;
}
#form_01 #mailformpro {
  position: relative;
  margin: 0; padding: 0;
}
#form_01 #mailform {
  margin: 0; padding: 0;
}
.mailform {
  width: 100%; margin: 0 0;
  border-collapse: collapse;
  list-style: none;
}
.mailform > li:after { display: block; content: url('images/clear.gif'); clear: both; height: 0; }
.mailform > li {
  position: relative;
  width: 100%; margin: 0 0 10px 0; padding: 0;
  font-size: 1em; line-height: 1em; letter-spacing: 1px;
}

/* FORM TITLE
-------------------------------------------------- */
.mailform .check-01, .mailform .check-02 {
  width: 96%; margin: 0 0 10px 0; padding: 8px 2%;
  background: #01A0E1 url('images/icon_01.png') no-repeat right 50%;
  text-align: left; color: #FFFFFF; font-size: 0.8em; line-height: 1em;
  border-radius: 7px;
}
.mailform .check-02 {
  background: #01A0E1;
}
.mailform .check-01 div, .mailform .check-02 div {
  font-weight: bold;  font-size: 1em; line-height: 1.3em;
}

/* INPUT
-------------------------------------------------- */
#form_01 input, #form_01 select, #form_01 textarea {
  position: relative;
  color: #333333; font: normal 1em/1.6em "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;
  background: none;
  border: none;
  outline: none;
}
#form_01 input {
  margin: 0 0 0; padding: 5px 2% 5px;
  border-bottom: dotted 1px #01A0E1;
}
#form_01 textarea {
  margin: 0 0 0; padding: 10px 2% 10px;
  border: dotted 1px #01A0E1;
}
#form_01 .drop-01 {
  width: 180px; margin: 0 0 0; padding: 5px 10px 5px;
  font-size: 1em; line-height: 1em; letter-spacing: 1px;
  background: none;
  border-bottom: dotted 1px #01A0E1;
  cursor: pointer;
}
#form_01 select {
  margin: 0 0 0; padding: 0 0 0 5px;
  border-bottom: dotted 1px #01A0E1;
}
#form_01 option {
  margin: 0 0 0; padding: 0 0;
}
#form_01 optgroup {
  margin: 0 0 0; padding: 0 0;
  font-size: 1em; line-height: 1em; letter-spacing: 1px;
  font-style: normal;
}

/* INPUT LAYOUT
-------------------------------------------------- */
#form_01 .in-01 {
  position: relative;
  margin: 0 10px 0 0;
}
#form_01 .in-01 div:first-child {
  margin: 0 0 0 0; padding: 17px 0 15px;
}
#form_01 .in-01 input {
  width: 96%;
}
#form_01 .in-01 .cap-01 {
  position: absolute; left: 5px; top: 5px;
  color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
}
#form_01 .in-01 .cap-02 {
  position: absolute; right: 5px; top: 5px;
  color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
}
#form_01 .in-02 {
  position: relative;
  margin: 0 10px 0 0; padding: 0 0 0 0;
}
#form_01 .in-02 div:first-child {
  margin: 0 0 0 0; padding: 17px 0 15px;
}
#form_01 .in-02 input {
  width: 96%;
}
#form_01 .in-02 .cap-01 {
  position: absolute; left: 0; top: 5px;
  color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
}
#form_01 .in-02 .cap-02 {
  position: absolute; right: 5px; top: 5px;
  color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
}
#form_01 .in-03 {
  position: relative;
  margin: 0 0 0 0;
}
#form_01 .in-03 div:first-child {
  margin: 0 0 0 0; padding: 0 0 15px;
}
#form_01 .in-03 textarea {
  width: 96%;
}
#form_01 .in-04 {
  position: relative;
  width: 100%;
}
#form_01 .in-05 {
  position: relative;
  margin: 0 10px 0 0;
}
#form_01 .in-05 div:first-child {
  margin: 0 0 0 0; padding: 17px 0 15px;
}
#form_01 .in-05 input {
  width: 96%;
}
#form_01 .in-05 .cap-01 {
  position: absolute; left: 5px; top: 5px;
  color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
}
#form_01 .in-05 .cap-02 {
  position: absolute; right: 5px; top: 5px;
  color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
}
#form_01 div.err {
  color: #CC0000; line-height: 1em; letter-spacing: 0;
}

/* PRIVACY CHECK
-------------------------------------------------- */
#form_01 .check-03 {
  position: relative;
  margin: 0 0 10px; padding: 10px 0 20px 0;
}
#form_01 .in-04 div.err {
  margin-top: 10px;
  color: #CC0000; line-height: 1em; letter-spacing: 0;
}

/* FORM CHECK
-------------------------------------------------- */
#form_01 .in-06 {
  width: 100%; padding: 10px 0 10px 0;
  font-size: 0.9em; line-height: 1.6em;
  border-bottom: dotted 1px #01A0E1;
}
#box-captcha {
  position: relative;
  width: 100%; padding: 0 0 0 0;
  font-size: 0.9em; line-height: 1.6em;
}
#captcha_image {
  vertical-align: top;
}
#box-captcha input {
  display: block;
  width: 200px; margin-top: 20px;
  border: dotted 1px #01A0E1;
}
#box-captcha div.err {
  margin-top: 10px;
  color: #CC0000; line-height: 1em; letter-spacing: 0;
}

#error_message {
  margin: 0 0 20px 0; padding: 7px 0 5px;
  background: #CF0014;
  text-align: center; color: #FFFFFF; font-weight: bold;
  border-radius: 10px;
}

#error_message_02 {
  margin: 0 0 20px 0; padding: 7px 0 5px;
  background: #24AE3C;
  text-align: center; color: #FFFFFF; font-weight: bold;
  border-radius: 10px;
}

@media all and (min-width: 769px) {

  /* LAYOUT
  -------------------------------------------------- */
  .container-01 {
    min-width: 1000px;
  }
  .container-01 > div {
    width: 1000px;
  }

  #mail-btn-01 {
    width: 670px; margin-left: 260px;
  }
  #mail-btn-02 {
    width: 670px; margin: 20px 0 0 260px;
  }
  #mail-btn-02 .btn-01 {
    float: left;
  }
  #mail-btn-02 .btn-02 {
    float: right;
  }
  .mailform .check-01, .mailform .check-02 {
    float: left;
    width: 220px; margin: 0 20px 0 0; padding: 8px 10px;
  }

  #form_01 .in-01 {
    float: left;
  }
  #form_01 .in-01 div {
    width: 330px;
  }
  #form_01 .in-01 input {
    width: 96%;
  }
  #form_01 .in-02 {
    float: left;
    margin: 0 10px 0 0; padding: 0 0 0 260px;
  }
  #form_01 .in-02 div {
    width: 670px;
  }
  #form_01 .in-02 input {
    width: 96%;
  }
  #form_01 .in-02 .cap-01 {
    position: absolute; left: 265px; top: 5px;
    color: #5AC1EB; font-size: 0.8em; line-height: 1em; letter-spacing: 1px;
  }
  #form_01 .in-03 {
    float: left;
  }
  #form_01 .in-03 div {
    width: 670px;
  }
  #form_01 .in-03 textarea {
    width: 96%;
  }
  #form_01 .in-04 {
    float: left;
    width: 670px;
  }
  #form_01 .in-04 div {
    width: 670px;
  }
  #form_01 .in-04 input {
    
  }
  #form_01 .in-05 {
    float: left;
  }
  #form_01 .in-05 div {
    width: 670px;
  }
  #form_01 .in-05 input {
    width: 96%;
  }
  #form_01 .in-06 {
    width: 670px; margin-left: 260px; padding: 12px 0 10px 0;
  }
  #form_01 .check-03 {
    width: 670px;
  }

  #box-captcha {
    float: left;
    width: 670px;
  }
  #box-captcha input {
    width: 200px;
  }

}