@charset "utf-8";

/*common css*/
@import "../../common/css/base.css";

/* == style == */
.article-box {
  background-color: #fff;
}
.article-title-box_i {
  background-color: #090909;
}
.article-title {
  border-left: 4px #fff solid;
  font-weight: 700;
}
.article-title > span {
  display: block;
}
.article-title > .ttl-header > .category {
  display: inline-block;
  background-color: #0d3d95;
  text-align: center;
}
.article-title > .ttl-header > .ttl-header-en {
  display: inline-block;
  font-weight: 400;
  vertical-align: text-bottom;
}
.article-title-box .date-jp {
  text-align: right;
}

.article-body {
  color: #333;
}
.article-body .result-summary {
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.riders-comment {
  background-color: #090909;
}
.riders-comment:before {
  color: #ababab;
  font-family: 'Oswald','sans-serif';
  content: "Interview";
}
.riders-comment:after {
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;
}
.riders-comment p {
  color: #fff;
}

.linkpanel {
  background-color: #f5f5f5;
}
.linkpanel .linkpanel-title {
}
.linkpanel .linkpanel-title > .year {
  display: block;
  color: #d0d0d0;
  text-align: center;
}
.linkpanel .linkpanel-title > .category {
  display: block;
  color: #121212;
  text-align: center;
}
.linkpanel > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.linkpanel > ul > li {
  position: relative;
  display: block;
  text-align: center;
  color: #9a9a9a;
}
.linkpanel > ul > li.current {
  color: #333;
}
.linkpanel > ul > li:first-child:before,
.linkpanel > ul > li:last-child:before {
  display: block;
  position: absolute;
  background-image: url(../../common/images/icon-arrow01.png);
  background-size: cover;
  content: "";
  /* opacity: 0.5; */
}
.linkpanel > ul > li:first-child:before {
  transform: rotate(180deg);
}
.linkpanel > ul > li:last-child:before {
}
.linkpanel > ul > li.blank:before {
  display: none;
}

.linkpanel > ul > li span.round,
.linkpanel > ul > li span.place {
  display: block;
}
.linkpanel > ul > li span.round {
}
.linkpanel > ul > li a {
  
}
.linkpanel > ul > li a span.round,
.linkpanel > ul > li a span.place {
  transition: color 0.2s ease-out;
}
.linkpanel > ul > li a span.round { color: #9a9a9a; }
.linkpanel > ul > li a span.place { color: #aaa; }
.linkpanel > ul > li.current span.round,
.linkpanel > ul > li.current span.place {
  margin: 0 auto;
}
.linkpanel > ul > li span.place {
  box-sizing: border-box;
  color: #aaa;
}
.linkpanel > ul > li.current span.place {
  border-bottom: 1px #090909 dotted;
  color: #5f5f5f;
}

.link_to_results {
  position: relative;
  display: block;
  background-color: #090909;
  text-align: center;
}
.link_to_results:before {
  position: absolute;
  display: block;
  background-image: url(../../common/images/icon-arrow02.png);
  background-size: cover;
  content: "";
}
.link_to_results > span {
}








@media screen and (max-width: 750px) {
  .topbox {
    padding-top: 0;
    padding-bottom: 0;
  }
  .article-title-box {
    position: relative;
    z-index: 1000;
    padding-top: 134.27%;
  }
  .article-title-box_i {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 8.53% 4% 8%;
    background-color: rgba(9,9,9,0.8);
  }
  .article-title {
    padding-bottom: 6px;
    padding-left: 2.67%;
    line-height: 1.6;
    font-size: 1.25rem;
  }
  .article-title > .ttl-header {
    line-height: 1.2;
  }
  .article-title > .ttl-header > .category {
    width: 12.8%;
    line-height: 1.6;
    font-size: 0.625rem;
    vertical-align: text-bottom;
  }
  .article-title > .ttl-header > .ttl-header-en {
    margin-left: 5px;
    line-height: 1;
    font-size: 1rem;
  }
  .article-title > .round {
    margin-top: 2.5%;
  }
  .article-title-box .date-jp {
    margin-top: 5%;
    padding-right: 2%;
    font-size: 0.75rem;
  }


  .article-body {
    padding: 8.53% 4% 14.67%;
  }
  .article-body > .sns {
    width: 80px;
    height: 40px;
    margin: 0 0 24px auto;
  }
  .article-body > .sns > .btn-sns {
    flex-basis: 40px;
    margin: 0;
  }
  .article-body > .sns > .btn-sns a {
    height: 40px;
    background-size: 120px 80px;
  }
  .article-body > .sns > .btn-sns.btn-sns-tw a {
    background-color: #1da1f2;
    background-position: 0px 0px;
  }
  .article-body > .sns > .btn-sns.btn-sns-fb a {
    background-color: #3b5998;
    background-position: -39px 0px;
  }
  .article-body .result-summary {
    padding: 4.35% 4.35% 7.25%;
    font-size: 0.875rem;
  }
  .report-body p {
    margin-top: 9%;
    line-height: 1.7;
    font-size: 0.875rem;
  }
  .report-body p a[rel="lightbox"] {
    display: block;
    width: 100%;
    margin-bottom: 4.35%;
    padding-top: 66.7%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
  .report-body p a[rel="lightbox"] > img {
    display: none;
  }
  .riders-comment {
    position: relative;
    margin-top: 9%;
    padding: 6% 6.96% 71.88%;
  }
  .riders-comment:before {
    line-height: 1;
    font-size: 2.25rem;
  }
  .report-body .riders-comment p {
    margin-top: 5%;
  }
  .report-body .riders-comment p a[rel="lightbox"] {
    position: absolute;
    bottom: 0;
    left: 7%;
    width: 86%;
    margin-bottom: 6.96%;
    padding-top: 57.39%;
  }
  
  .linkpanel {
    padding: 1.6% 4% 3.2%;
  }
  .linkpanel .linkpanel-title {
  }
  .linkpanel .linkpanel-title > .year {
    line-height: 1.04;
    font-size: 4.5rem;
  }
  .linkpanel .linkpanel-title > .category {
    margin-top: -14.33%;
    margin-bottom: 7.17%;
    line-height: 1;
    font-size: 2rem;
  }
  .linkpanel > ul {
  }
  .linkpanel > ul > li {
    flex-basis: 30%;
    padding-top: 4%;
  }
  .linkpanel > ul > li.current {
    flex-basis: 31%;
    padding-top: 0;
  }
  .linkpanel > ul > li:first-child:before,
  .linkpanel > ul > li:last-child:before {
    top: 45%;
    width: 12%;
    padding-top: 12.75%;
  }
  .linkpanel > ul > li:first-child:before {
    right:7.7%;
  }
  .linkpanel > ul > li:last-child:before {
    left:7.7%;
  }
  .linkpanel > ul > li.blank:before {
  }
  .linkpanel > ul > li span {
    font-size: 1rem;
  }
  .linkpanel > ul > li.current span {
    font-size: 1.5rem;
  }
  .linkpanel > ul > li span.round {
    line-height: 1.25;
  }
  .linkpanel > ul > li:first-child span.round,
  .linkpanel > ul > li:first-child span.place { padding-right: 20.4%; }
  .linkpanel > ul > li:last-child span.round,
  .linkpanel > ul > li:last-child span.place { padding-left: 20.4%; }
  .linkpanel > ul > li span > span {
    font-size: 1.33rem;
  }
  .linkpanel > ul > li.current span > span {
    font-size: 2rem;
  }
  .linkpanel > ul > li span.place {
    line-height: 2.25;
    font-size: 0.67rem;
  }
  .linkpanel > ul > li.current span.place {
    font-size: 1rem;
  }

  .link_to_results {
    margin-top: 6.13%;
  }
  .link_to_results:before {
    top: 37.5%;
    right: 21.6%;
    width: 2.93%;
    height: 26.04%;
  }
  .link_to_results > span {
    line-height: 2.667;
    font-size: 1.125rem;
  }




}

@media screen and (min-width:751px) {
  .article-title-box_i {
    padding: 32px 6.76% 12px;
  }
  .article-title {
    padding-bottom: 6px;
    padding-left: 16px;
    line-height: 32px;
    font-size: 22px;
  }
  .article-title > .ttl-header {}
  .article-title > .ttl-header > .category {
    width: 72px;
    line-height: 24px;
    font-size: 12px;
  }
  .article-title > .ttl-header > .ttl-header-en {
    margin-left: 4px;
    font-size: 18px;
    line-height: 24px;
  }
  .article-title > .round {
    margin-top: 8px;
  }

  
  .article-body {
    padding: 24px 6.76% 12px;
  }
  .article-body > .sns {
    width: 64px;
    height: 32px;
    margin: 0 0 24px auto;
  }
  .article-body > .sns > .btn-sns {
    flex-basis: 32px;
    margin: 0;
  }
  .article-body > .sns > .btn-sns a {
    height: 32px;
  }
  .article-body > .sns > .btn-sns.btn-sns-tw a {
    background-color: #090909;
    background-position: 2px 2px;
  }
  .article-body > .sns > .btn-sns.btn-sns-fb a {
    background-color: #3b5998;
    background-position: -28px 2px;
  }
  .article-body .result-summary {
    height: 56px;
    padding: 10px 16px 0;
  }
  .report-body p {
    margin-top: 40px;
  }
  .report-body p img[align="left"] {
    margin-right: 24px;
  }
  .report-body p img {
    margin-bottom: 12px;
  }
  .riders-comment {
    margin-top: 74px;
    padding: 0 24px 24px;
  }
  .riders-comment:before {
    line-height: 70px;
    font-size: 36px;
  }
  .riders-comment p {
    margin-top: 0;
  }
  .riders-comment p img {
    margin-bottom: 0;
  }
  
  
  .linkpanel {
    margin: 56px 6.76% 0;
    padding: 5% 5% 3.75%;
  }
  .linkpanel .linkpanel-title {
    height: 110px;
  }
  .linkpanel .linkpanel-title > .year {
    line-height: 78px;
    font-size: 72px;
  }
  .linkpanel .linkpanel-title > .category {
    margin-top: -52px;
    line-height: 1;
    font-size: 32px;
  }
  .linkpanel > ul {
  }
  .linkpanel > ul > li {
    flex-basis: 34%;
  }
  .linkpanel > ul > li.current {
    flex-basis: 31%;
  }
  .linkpanel > ul > li:first-child:before,
  .linkpanel > ul > li:last-child:before {
    top: 30px;
    width: 16px;
    height: 17px;
  }
  .linkpanel > ul > li:first-child:before {
    right:7.7%;
  }
  .linkpanel > ul > li:last-child:before {
    left:7.7%;
  }
  .linkpanel > ul > li.blank:before {
  }
  .linkpanel > ul > li span {
    font-size: 24px;
  }
  .linkpanel > ul > li span.round {
    line-height: 40px;
  }
  .linkpanel > ul > li a:hover span.round { color: #333; }
  .linkpanel > ul > li a:hover span.place { color: #5f5f5f; }

  .linkpanel > ul > li.current span {
    max-width: 122px;
  }
  .linkpanel > ul > li:first-child span.round,
  .linkpanel > ul > li:first-child span.place { padding-right: 20.4%; }
  .linkpanel > ul > li:last-child span.round,
  .linkpanel > ul > li:last-child span.place { padding-left: 20.4%; }
  .linkpanel > ul > li span > span {
    font-size: 32px;
  }
  .linkpanel > ul > li span.place {
    height: 36px;
    font-size: 16px;
  }
  .linkpanel > ul > li.current span.place {
  }
  
  .link_to_results {
    margin: 24px 6.76% 0;
  }
  .link_to_results:hover {
    color: #fff100;
  }
  .link_to_results:before {
    top: 18px;
    right: 86px;
    width: 12.235px;
    height: 13px;
  }
  .link_to_results:hover:before {
    background-image: url(../../common/images/icon-arrow03.png);
  }
  .link_to_results > span {
    line-height: 48px;
    font-size: 18px;
  }
  



  .contents > footer {
    margin-top: 0;
  }
}
@media screen and (min-width:751px) and (max-width:1040px) {
  .article-title-box {
    position: relative;
    z-index: 1000;
    margin-top: -175px;
  }
}