@charset "UTF-8";

/*------reset-------*/
*{
box-sizing:border-box;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
vertical-align:top;
}
body{
color:#333333;
line-height:1.5;
}
body,h1,h2,h3,h4,p,ul,li,dl,dt,dd{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
strong{
font-weight:bold;
}
em{
font-style:normal;
}
img{
border:0;
line-height:0;
vertical-align:top;
}
a,
a:link{
color:#333333;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:none;
outline:none;
}
a:active{
text-decoration:none;
outline:none;
}
::-webkit-input-placeholder{/* WebKit, Blink, Edge */
color:#ccc;
}
:-ms-input-placeholder{/* Internet Explorer 10-11 */
color:#ccc;
}
::placeholder{/* Others */
color:#ccc
}


body{
color:#000000;
font-family:メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:18px;
line-height:1.8;
text-align:center;
}




/*------layout-------*/
#container{
width:100%;
max-width:1000px;
min-height:800px;
margin:0 auto;
padding:2em 0 5em;
background:#97d6fa;
text-align:center;
}
@media only screen and (max-width:1000px) {
#container{
max-width:100vw;
min-height:100vh;
}
}

.inner{
width:64%;
margin:0 auto;
text-align:left;
}
@media only screen and (max-width:767px) {
.inner{
width:90%;
}
}

h1{
width:100%;
}
@media only screen and (min-width:1001px) {
h1{
}
}

img{
max-width:100%;
}

/* ----- top ----- */
#start{
width:860px;
height:640px;
margin:0 auto;
position:relative;
background:url(../img/img_first.png) no-repeat;
}
@media only screen and (max-width:1000px) {
#start{
width:86vw;
height:64vw;
background-size:100%;
}
}
#start p{
width:100%;
text-align:center;
position:absolute;
bottom:40px;
}
@media only screen and (max-width:1000px) {
#start p{
bottom:4vw;
}
}
#start p a{
display:inline-block;
margin:0 auto;
}
@media only screen and (max-width:1000px) {
#start p a{
width:20vw;
}
}
#start p a:hover{
opacity:0.8;
}

#txt {
font-size:25px
}
#txt p{
font-size:25px
}

/* ----- race ----- */
#race img{
margin-top:3vw;
border:5px #000000 solid;
}
@media only screen and (max-width:1000px) {
#race img{
width:61.4vw;
}
}
@media only screen and (max-width:650px) {
#race img{
width:90vw;
}
}


/* ----- form ----- */
h1.congratulations img{
margin-top:20px;
}
@media only screen and (max-width:1000px) {
h1.congratulations img{
width:30vw;
}
}
#catch{
margin-bottom:30px;
font-size:15px;
}
@media only screen and (max-width:767px) {
#catch{
margin-bottom:6vw;
}
}
#catch p:first-child{
padding-top:2vw;
}
#catch strong{
font-size:20px;
font-weight:bold;
}
#catch .james{
height:36px;
vertical-align:middle;
margin:-5px 0;
}
#catch p{
display:table-cell;
}
#catch p.img{
text-align:right;
}
@media only screen and (max-width:1000px) {
#catch p.img{
width:16vw;
}
}
@media only screen and (max-width:1000px) {
#catch p .br{
display:none;
}
}
#form .catch{
font-size:15px;
}
#form strong{
font-weight:bold;
}
#form .cap{
margin-top:1em;
font-size:12px;
}
#form table{
width:100%;
margin-top:3em;
font-size:13px;
}
#form th,
#form td{
padding:10px;
vertical-align:middle;
line-height:1.3;
}
#form th{
width:17vw;
padding:10px 15px;
background:#ffffff;
vertical-align:middle;
font-weight:bold;
}
@media only screen and (min-width:1001px) {
#form th{
width:170px;
}
}
@media only screen and (max-width:640px) {
#form th{
padding:10px 5px;
}
}
#form td{
background:#f3f3f3;
vertical-align:top;
}
#form td input{
width:100%;
margin:0;
padding:5px;
display:block;
border:none;
border-radius:0;
box-shadow:none;
background:transparent;
}
#form td textarea{
width:100%;
height:5em;
margin:5px 0 0;
padding:5px;
display:block;
border:none;
background:transparent;
}
#form .btn{
width:20vw;
margin:4vw auto;
}
@media only screen and (min-width:1001px) {
#form .btn{
width:200px;
margin:40px auto;
}
}
#form .btn input{
width:100%;
}


/* ----- thanks ----- */
#thanks .inner{
padding:40px 7% 100px;
}
@media only screen and (max-width:1000px) {
#thanks .inner{
padding:4vw 5% 10vw;
}
}
@media only screen and (max-width:767px) {
#thanks .inner{
padding:4vw 3% 10vw;
}
}
#thanks p{
text-align:center;
}
#thanks p + p{
margin-top:2em;
}