@charset "utf-8";

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

/* == style == */
.toppanel-bg > ul >li {
  background-image: url(../images/img01_2023.jpg);
  background-position: left top;
}
.contents > .profile-box {
  background-color: rgba(9,9,9,0.9);
}

.contents .ttl-box {
  width: 92%;
  margin: 0 auto;
}

.profile-summary .name span {
  display: block;
  font-weight: 400;
}
.profile-summary .name .sl {
  display: none;
}

.link-sns {
  flex-basis: 32px;
  margin: 0;
}
.link-sns a {
  display: block;
  height: 32px;
  background-image: url(../../common/images/btn-sns.png?ud=180627);
  background-repeat: no-repeat;
  background-size: 96px 64px;
}
.link-sns.link-sns-tw a { background-color: #ffffff; background-position: 0 -32px; }
.link-sns.link-sns-fb a { background-color: #3b5998; background-position: -32px 0; }
.link-sns.link-sns-ig a { background-color: #d93175; background-position: -64px 0; }

.article-body {
  background-color: #f5f5f5;
}
.article-body .profile-history {
  background-color: rgb(191,2,16);
}
.profile-history-box > ul > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.profile-history-box > ul > li > div {
  box-sizing: border-box;
}
.profile-history-box > ul .year {
  position: relative;
  text-align: center;
}
.profile-history-box > ul .year:before,
.profile-history-box > ul .year:after {
  position: absolute;
  display: block;
  overflow: hidden;
  content: "";
}
.profile-history-box > ul .year:before {
  background-color: #fff;
}
.profile-history-box > ul .year:after {
  background-color: rgb(191,2,16);
}

.pankuzu {
  margin-top: 0;
}


@media screen and (max-width: 750px) {
  .topbox {
    padding-top: 64.4%;
    padding-bottom: 0;
  }
  .toppanel-bg > ul {
    padding-top: 64.4%;
  }
  .toppanel-bg > ul >li {
    padding-top: 64.4%;
  }

  .contents .ttl-box {
    padding-top: 7.07%;
  }
  .ttl-box > span {
    padding-left: 4%;
  }
  
  .article-box {
    position: relative;
  }
  
  .profile-summary {
    width: 84%;
    margin: 0 auto;
  }
  .profile-summary .name .ja {
    padding-top: 5%;
    font-size: 1.875rem;
  }
  .profile-summary .name .en {
    font-size: 1.125rem;
  }
  .profile-summary ul {
    margin-top: 7.6%;
    padding-bottom: 11.43%;
    line-height: 2;
    font-size: 0.75rem;
  }

  .profile-box .sns {
    position: absolute;
    top: 0;
    right: 7.73%;
    width: 96px;
    height: 32px;
    padding-top: 16%;
  }


  .article-body {
    padding-top: 7.33%;
  }
  .article-body .profile-history {
    padding: 0 4% 14%;
  }
  .profile-history > .ttl {
    margin-bottom: 3.91%;
    border-bottom: 2px #fff solid;
    line-height: 2;
    font-size: 2rem;
    font-weight: 400;
  }
  .profile-history-box > ul .year {
    flex-basis: 20.29%;
    padding-top: 0.5%;
    line-height: 1.2;
    font-size: 1.125rem;
  }
  .profile-history-box > ul .data {
    flex-basis: 79%;
    border-left: 1px #4f86ea solid;
    padding: 1% 0 7.54% 6.96%;
    font-size: 0.875rem;
  }
  .profile-history-box > ul .year:before {
    top: 0;
    right: -17.86%;
    width: 34.28%;
    padding-top: 34.28%;
    border-radius: 50%;
    background-color: #fff;
  }
  .profile-history-box > ul .year:after {
    top: 0;
    right: -6.43%;
    width: 11.43%;
    margin-top: 11.43%;
    padding-top: 11.43%;
    border-radius: 50%;
    background-color: rgb(191,2,16);
  }

  .profile-record {
    display: none;
  }


}

@media screen and (min-width:751px) {
  .contents > .profile-box {
    background-image: url(../images/img03.jpg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .contents .ttl-box {
    padding-top: 16px;
  }

  .profile-summary {
    width: 92%;
    margin: 0 auto;
  }
  .profile-summary .name {
    padding-left: 5%;
  }
  .profile-summary .name .ja {
    padding-top: 8px;
    line-height: 2;
    font-size: 30px;
  }
  .profile-summary .name .en {
    font-size: 18px;
  }
  .profile-summary ul {
    margin-top: -72px;
    padding-left: 35%;
    padding-bottom: 32px;
    line-height: 2;
    font-size: 12px;
  }

  .profile-box .sns {
    margin: -76px 0 0 5%;
    width: 96px;
    height: 76px;
  }

  .article-body {
    position: relative;
    padding-top: 72px;
  }
  .profile-history > .ttl {
    position: absolute;
    top: 32px;
    right: 50.5%;
    width: 41.47%;
    background-color: rgb(191,2,16);
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: 400;
  }
  .profile-history-box > ul {
    width: 92%;
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .profile-history-box > ul > li {
  }
  .profile-history-box > ul > li > div {
  }
  .profile-history-box > ul .year {
    flex-basis: 102px;
    line-height: 1.2;
    font-size: 18px;
  }
  .profile-history-box > ul .data {
    flex-basis: calc(100% - 102px);
    max-width: calc(100% - 102px);
    min-height: 56px;
    border-left: 2px #da6b6b solid; /* 4f86ea */
    padding: 3px 0 35px 28px;
  }
  .profile-history-box > ul .year:before,
  .profile-history-box > ul .year:after {
  }
  .profile-history-box > ul .year:before {
    top: 0;
    right: -13px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #fff;
  }
  .profile-history-box > ul .year:after {
    top: 8px;
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgb(191,2,16);
  }

  .profile-record {
    background-color: #fff;
  }
  .profile-record > .ttl {
    position: absolute;
    top: 32px;
    left: 50.5%;
    width: 41.47%;
    background-color: #fff;
    color: #000;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: 400;
  }

  .profile-record-box {
    display: none;
    padding-bottom: 64px;
  }
  .profile-record-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .profile-record .results .year.ttl {
    color: #333;
    line-height: 2;
    font-size: 16px;
  }
  .profile-record .results .year.ttl a {
    color: rgb(191,2,16);
  }
  .profile-record .results {
    min-width: 370px;
    padding: 16px 9.5px 0;
  }
  .profile-record .results table {
    width: 100%;
  }
  .profile-record .results th,
  .profile-record .results td {
    border: 1px #708090 solid;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #000;
    font-size: 9px;
  }
  .profile-record .results th {
    background-color: #ddd;
  }
  .profile-record .results .tit,
  .profile-record .results .place
  {
    padding-left: 4px;
  }
  .profile-record .results .qp,
  .profile-record .results .rac,
  .profile-record .results .rd,
  .profile-record .results .result_date,
  .profile-record .results .result
  {
    text-align: center;
  }
  .profile-record .results .rd {
    width: 9.46%;
  }
  .profile-record .results .result_date {
    width: 10.81%;
  }
  .profile-record .results .result {
    width: 13.51%;
  }
  .profile-record .results .r-win,
  .profile-record .results .r-podium {
    font-size: 12px;
    font-weight: 700;
  }
  .profile-record .results .r-win {
    color: #f00;
  }
  .profile-record .results .r-podium {
    color: rgb(191,2,16);
  }
  .profile-record .results a {
    color: rgb(191,2,16);
  }


  .click-act {
    cursor: pointer;
  }



  .contents > footer {
    margin-top: 0;
  }
}
@media screen and (min-width:769px){
  .click-act:hover {
    /* text-decoration: underline; */
  }
  .btn-tab-toggle.click-act span {
    display: inline-block;
  }
  .btn-tab-toggle.click-act span:after {
    display: block;
    position: relative;
    width: 0%;
    height: 1px;
    margin-top: -9px;
    content: "";
    transition: width 200ms 0s ease;
  }
  .btn-tab-toggle.click-act:hover span:after {
    width: 100%;
  }
  .profile-history .btn-tab-toggle.click-act:hover span:after {
    background-color: #fff;
  }
  .profile-record .btn-tab-toggle.click-act:hover span:after {
    background-color: #333;
  }
}

@media screen and (min-width:751px) and (max-width:768px) {
  .profile-record .results {
    flex-basis: calc(92% + 19px);
    max-width: 640px;
    padding-right: 8%;
    padding-left: 8%;
  }
}
@media screen and (min-width:769px) and (max-width:1040px) {
  .profile-record .results {
    flex-basis: 45%;
  }
}
@media screen and (min-width:1041px) and (max-width:1540px) {
  .profile-record .results {
    flex-basis: calc(92% + 19px);
    max-width: 640px;
    padding-right: 8%;
    padding-left: 8%;
  }
}
@media screen and (min-width:1541px) {
  .profile-record .results {
    flex-basis: 45%;
  }
}

@media screen and (max-width: 1040px) and (min-width: 751px) {
  .container > .topbox {
    height: calc(100vh - 300px);
  }
  .contents {
    position: relative;
    z-index: 1000;
  }
}

@media screen and (min-width:751px) and (max-width:1364px) {
  .contents > .profile-box {
    background-position: center top;
    background-size: 800px 447px;
  }
  .contents .ttl-box {
    width: 100%;
  }
  .profile-summary {
    width: 100%;
  }
}

@media screen and (min-width:751px) {
}