#trackman{
}

#trackman article{
position: relative;
width: 100vw;
min-height: 650px;
}

#trackman article img{
width: 100%;
}

#trackman article .bg{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgb(236,117,63);
background: rgb(236,117,63);
background: linear-gradient(90deg, rgba(236,117,63,1) 0%, rgba(242,144,68,1) 50%, rgba(236,117,63,1) 100%);
}

#trackman article .bg img{
object-fit: contain;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%); 
}

#trackman .sp{
display: none;
}


@media (max-width: 768px) {
  #trackman .pc{
    display: none;
  }
  #trackman .sp{
    display: block;
  }
}


#headline{
padding-left: 50%;
box-sizing: border-box;
display: table;
}

#headline .inner{
width: 500px;
display: table-cell;
text-align: center;
vertical-align: middle;
padding-left: 100px;
}

#headline h1{
font-size: 4em;
color: #fff;
font-weight: bold;
line-height: 1;
margin-bottom: 50px;
}


#headline .body p{
color: #fff;
font-size: 1.1em;
text-align: left;
line-height: 1.5;
}

@media (max-width: 768px) {
  #headline{
    padding: 0;
    display: flex;
  }
  #headline .inner{
    width: 100%;
    padding: 20px;
    align-self: flex-end;
    display: block;
  }
  #trackman article .bg img{
    position: static;
    top: 0;
    left: 0;
    transform: translate(0,0);
    width: 100%;
  }
}


#intro{
padding-right: 50%;
box-sizing: border-box;
display: table;
}

#intro .inner{
display: table-cell;
text-align: center;
vertical-align: middle;
padding-left: 100px;
}


#intro h1{
font-size: 4em;
color: #fff;
font-weight: bold;
line-height: 1;
margin-bottom: 50px;
text-align: right;
width: 450px;
float: right;
}

#intro .body{
float: right;
width: 450px;
}

#intro .body p{
color: #fff;
font-size: 1.1em;
text-align: left;
line-height: 1.5;
}

@media (max-width: 768px) {
  #intro{
    padding: 0;
    display: flex;
    height: auto;
  }
  #intro h1{
    width: 100%;
    text-align: center;
  }
  #intro .inner{
    width: 100%;
    padding: 20px;
    align-self: flex-end;
    display: block;
  }
  
  #intro .body{
    width: auto;
  }
  
  #intro article .bg img{
    position: static;
    top: 0;
    left: 0;
    transform: translate(0,0);
    width: 100%;
  }
}

#data p{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}

#data p:nth-of-type(even){
flex-direction: row-reverse;
}

#data p .img{
width: 50%;
}

#data p span{
display: block;
width: 45%;
padding-right: 5%;
box-sizing: border-box;
font-size: 1.1em;
}

#data p:nth-of-type(even) span{
padding-left: 5%;
padding-right: 0;
}

@media (max-width: 768px) {
  #data p{
    display: block;
  }
  
  #data p .img,
  #data p span{
    width: 100%;
    padding: 20px;
    display: block;
    box-sizing: border-box;
  }
  #data p:nth-of-type(even) span{
    padding: 20px;
  }
}


#outro{
display: flex;
align-items: center;
justify-content: space-between;
}


#outro header{
width: 30%;
}

#outro .body{
width: 65%;
font-size: 1.4em;
font-weight: bold;
}

@media (max-width: 768px) {
  #outro{
    display: block;
  }
  #outro header,
  #outro .body{
    width: 100%;
  }
    
  #outro .body{
    padding: 20px;
  }
}