@charset "Shift_JIS";

.RunnerHeadSection{
margin-bottom: 30px;
}
.RunnerHeadSection h2{
background-image: none;
margin: 0 0 20px;
}
.RunnerHeadSection h2 span{
background: linear-gradient(19deg, #111923 63%, #6c7e90);
color: #FFFFFF;
}
.messageSection h3{
font-size: 115%;
background-color: #ffe600;
padding: 10px 15px;
border-radius: 3px;
margin: 0 1% 20px;
opacity: 0.75;
}
.messageSection h3 span{
display: block;
color: #0C0C0C;
}
.messageSection p.TextStyle1{
font-size: 100%;
padding-left: 20px;
margin-bottom: 30px;
line-height: 1.8em;
}
.profile{
display: flex;
flex-direction: row;
gap: 15px;
}
.profile .slide{
max-width: 200px;
}
.profile .slide .slideImage{
width: 200px;
height: 100%;
}
.JS #Contents .profile .slide .slideImage img,
.profile .slide .slideImage img{
height: 100%;
background-color: #FFFFFF;
}
.profileData{
display: flex;
flex-direction: row;
gap: 20px;
margin-bottom: 30px;
align-items: flex-start;
}
.personalBest{
display: flex;
flex-direction: column;
gap: 5px;
}
.titlePersonalBest{
padding: 2px 10px;
position: relative;
}
.titlePersonalBest::after{
display: block;
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 4px;
left: 0;
background-color: #111923;
}
.titlePersonalBest span{
display: block;
}
.metadata{
padding: 15px 10px;
border: 1px solid #D9D9D9;
border-radius: 6px;
}
.metadata p.TextStyle1{
margin-bottom: 0;
font-size: 100%;
}
.metadata p.TextStyle1,
.personalBest p.TextStyle1{
padding-right: 10px;
padding-left: 10px;
}

@media screen and (max-width: 900px) {
.profileData{
flex-direction: column;
}
}