@charset "UTF-8";
/*-----------------------

http://www.jleague.jp/css/special/post-olympic.scss
2021/08/02 ISM

------------------------*/
@import url("//fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("//code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css");
html {
  font-size: 62.5%;
  overflow-y: auto; }

body, #main {
  background: #FFF;
  margin: 0 !important;
  padding: 0 !important; }

.kvArea,
.content {
  font-family: "Noto Sans JP", "メイリオ", sans-serif;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  width: 100% !important; }
  .kvArea > article,
  .content > article {
    text-align: center;
    padding-bottom: 1px; }

/* ==========================================================================
   COMMON
========================================================================== */
.CLM__half, .CLM__four {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: -ms- left;
  justify-content: -ms- left;
  justify-content: -webkit- left;
  -webkit-box-pack: left;
  justify-content: left;
  -ms-flex-align: -ms- top;
  align-items: -ms- top;
  align-items: -webkit- top;
  -webkit-box-align: top;
  align-items: top; }
  .CLM__half img, .CLM__four img {
    width: 100%; }
  .CLM__half .wide100, .CLM__four .wide100 {
    width: 100% !important; }

.CLM__half > li,
.CLM__half > article,
.CLM__half > figure,
.CLM__four > li,
.CLM__four > article,
.CLM__four > figure {
  width: 48%;
  margin-right: 4%; }
  .CLM__half > li:nth-child(2n),
  .CLM__half > article:nth-child(2n),
  .CLM__half > figure:nth-child(2n),
  .CLM__four > li:nth-child(2n),
  .CLM__four > article:nth-child(2n),
  .CLM__four > figure:nth-child(2n) {
    margin-right: 0; }

.text__honbun {
  font-size: 3.5vw;
  line-height: 1.65;
  margin-bottom: 1em;
  text-align: left; }
  .text__honbun.right {
    text-align: right;
    padding-bottom: 4rem;
    border-bottom: 1px solid #cccccc; }

.text__size13px {
  font-size: 3vw;
  line-height: 1.65;
  margin-bottom: 1em;
  text-align: left; }

.inner {
  width: 90%;
  margin: 0 auto;
  padding: 40px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.inner__white {
  width: 90%;
  margin: 40px auto;
  padding: 5%;
  background: #FFF;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.headingArea {
  background: #000;
  text-align: center;
  padding: 5vw 0;
  position: relative; }
  .headingArea::after {
    font-family: 'ionicons';
    content: '\f103';
    font-size: 10rem;
    color: #000;
    position: absolute;
    bottom: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all; }
  .headingArea .subnav {
    width: 90%;
    margin: 10px auto 0;
    position: relative;
    z-index: 1; }
    .headingArea .subnav li a {
      display: block;
      height: 40px;
      line-height: 40px;
      border: 1px solid #FFF;
      background: rgba(0, 0, 0, 0.3);
      color: #FFF;
      font-size: 3vw;
      font-weight: 700;
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
      .headingArea .subnav li a:hover {
        background: black; }

.heading__main {
  color: #FFF;
  font-size: 6vw;
  font-weight: 900;
  line-height: 1.5;
  position: relative;
  z-index: 1; }
  .heading__main span {
    display: block;
    font-size: 3vw;
    color: rgba(255, 255, 255, 0.6); }
  .heading__main i {
    font-style: normal;
    font-weight: 900;
    color: #c8c866; }

.heading__sub {
  color: #333;
  font-size: 6vw;
  font-weight: 900;
  line-height: 1.5; }
  .heading__sub span {
    display: block;
    font-size: 3vw;
    color: rgba(0, 0, 0, 0.6); }

.btn__border a {
  margin: auto;
  display: block;
  width: 70%;
  border: 1px solid #FFF;
  height: 50px;
  line-height: 48px;
  text-align: center;
  font-size: 3.8vw;
  font-weight: 600;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
  color: #000; }

/* ==========================================================================
   CONTENT
========================================================================== */
/*--- header ---*/
.header {
  position: fixed;
  z-index: 11111111; }
  .header__left {
    position: absolute; }
    .header__left__jleaguejp {
      position: absolute;
      left: 10px;
      top: 10px; }
      .header__left__jleaguejp a {
        display: block; }
        .header__left__jleaguejp a img {
          width: 40px;
          height: 40px; }

/*--- kvArea ---*/
.kvArea {
  position: relative; }
  .kvArea__title {
    position: absolute;
    left: 5%;
    top: 25%;
    font-size: 8vw;
    line-height: 1.5;
    color: #000;
    z-index: 1; }
    .kvArea__title span {
      display: inline-block;
      font-family: "Noto Sans JP", "メイリオ", sans-serif;
      font-weight: 900;
      position: relative;
      text-shadow: 0 0 15px white;
      -webkit-transform: translateX(-100px);
      -ms-transform: translateX(-100px);
      transform: translateX(-100px);
      opacity: 0; }
      .kvArea__title span::after {
        content: "";
        width: calc(100% + 4px);
        height: 36px;
        background: white;
        position: absolute;
        left: 0;
        bottom: 4px;
        z-index: -1; }
  .kvArea__text {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 52%;
    background: rgba(255, 255, 255, 0.8);
    font-size: 3.8vw;
    line-height: 1.8em;
    padding: 1.5em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 2;
    opacity: 0; }
    .kvArea__text br {
      display: none; }
  .kvArea__image {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
    opacity: 0; }

.kvArea__image {
  -webkit-animation: animation_Opacity 1s ease-in-out 0s 1 forwards;
  animation: animation_Opacity 1s ease-in-out 0s 1 forwards; }

.kvArea__title span:nth-child(1) {
  -webkit-animation: animation_Opacity 1s ease-in-out 1s 1 forwards;
  animation: animation_Opacity 1s ease-in-out 1s 1 forwards; }

.kvArea__title span:nth-child(3) {
  -webkit-animation: animation_Opacity 1s ease-in-out 1.5s 1 forwards;
  animation: animation_Opacity 1s ease-in-out 1.5s 1 forwards; }

.kvArea__title span:nth-child(5) {
  -webkit-animation: animation_Opacity 1s ease-in-out 2s 1 forwards;
  animation: animation_Opacity 1s ease-in-out 2s 1 forwards; }

.kvArea__text {
  -webkit-animation: animation_Opacity 1s ease-in-out 2.5s 1 forwards;
  animation: animation_Opacity 1s ease-in-out 2.5s 1 forwards; }

@-webkit-keyframes animation_Opacity {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes animation_Opacity {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

/*--- gnav ---*/
.gnav {
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: -15vw; }
  .gnav__list li {
    margin-bottom: 10px; }
    .gnav__list li a {
      display: block;
      padding: 5% 0 5% 26%;
      text-align: center;
      color: #FFF;
      font-size: 4vw;
      line-height: 1.5;
      font-weight: 600;
      position: relative;
      text-align: left; }
      .gnav__list li a::after {
        font-family: 'ionicons';
        content: '\f109';
        font-size: 5vw;
        position: absolute;
        right: 1.5rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: .5s all;
        -o-transition: .5s all;
        transition: .5s all; }
      .gnav__list li a img {
        width: 20%;
        display: block;
        position: absolute;
        left: 3%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
  .gnav__list__player a {
    background: #081b62; }
  .gnav__list__jleague a {
    background: #e60012; }
  .gnav__list__look a {
    background: #909058; }

/*--- playerArea ---*/
.playerArea {
  background: url(/img/special/post-olympic/BG_player.jpg) no-repeat bottom center;
  background-size: 400% auto; }
  .playerArea .headingArea {
    background: #081b62; }
    .playerArea .headingArea::after {
      color: #081b62; }

/*--- memberlist ---*/
.memberlist {
  margin-top: 20px; }
  .memberlist li {
    font-size: 16px;
    margin-bottom: 20px;
    border: 1px solid #CCC;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #f0f0f0; }
    .memberlist li a {
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
      .memberlist li a img,
      .memberlist li a .data {
        -webkit-transition: .5s all;
        -o-transition: .5s all;
        transition: .5s all; }
      .memberlist li a:hover {
        text-decoration: none; }
        .memberlist li a:hover .data {
          opacity: .5; }
    .memberlist li figure {
      position: relative;
      height: 170px;
      overflow: hidden; }
      .memberlist li figure:after {
        content: "(c)JFA";
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 10px;
        color: #999; }
      .memberlist li figure img {
        width: 100%; }
    .memberlist li .data {
      font-size: 12px;
      color: #333; }
      .memberlist li .data span {
        display: block; }
      .memberlist li .data .name {
        background: #1b2e4e;
        color: #fff;
        height: 35px;
        line-height: 35px;
        font-size: 13px;
        padding-left: 10px;
        font-family: "Oswald", "Noto Sans JP", "メイリオ", sans-serif; }
      .memberlist li .data .detail {
        padding: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative; }
        .memberlist li .data .detail .team {
          font-size: 13px;
          padding-bottom: 5px; }
        .memberlist li .data .detail .profile {
          font-family: "Oswald", "Noto Sans JP", "メイリオ", sans-serif; }
        .memberlist li .data .detail::after {
          opacity: .5;
          position: absolute;
          right: 0;
          bottom: 0; }
      .memberlist li .data .urawa::after {
        content: url("/img/special/olympic/jclub/urawa.png"); }
      .memberlist li .data .cosaka::after {
        content: url("/img/special/olympic/jclub/cosaka.png"); }
      .memberlist li .data .kawasakif::after {
        content: url("/img/special/olympic/jclub/kawasakif.png"); }
      .memberlist li .data .kashima::after {
        content: url("/img/special/olympic/jclub/kashima.png"); }
      .memberlist li .data .gosaka::after {
        content: url("/img/special/olympic/jclub/gosaka.png"); }
      .memberlist li .data .kashiwa::after {
        content: url("/img/special/olympic/jclub/kashiwa.png"); }
      .memberlist li .data .yokohamafm::after {
        content: url("/img/special/olympic/jclub/yokohamafm.png"); }
      .memberlist li .data .kobe::after {
        content: url("/img/special/olympic/jclub/kobe.png"); }
      .memberlist li .data .tosu::after {
        content: url("/img/special/olympic/jclub/tosu.png"); }
      .memberlist li .data .fctokyo::after {
        content: url("/img/special/olympic/jclub/fctokyo.png"); }
      .memberlist li .data .hiroshima::after {
        content: url("/img/special/olympic/jclub/hiroshima.png"); }
      .memberlist li .data .shonan::after {
        content: url("/img/special/olympic/jclub/shonan.png"); }
      .memberlist li .data .nagoya::after {
        content: url("/img/special/olympic/jclub/nagoya.png"); }
    .memberlist li:nth-child(4n) {
      margin-right: 0; }

/*--- jleagueArea ---*/
.jleagueArea {
  background: url(/img/special/post-olympic/BG_jleague.jpg) no-repeat bottom center;
  background-size: 400% auto; }
  .jleagueArea .headingArea {
    background: #e60012; }
    .jleagueArea .headingArea::after {
      color: #e60012; }
  .jleagueArea .inner__white {
    margin: 40px auto 20px;
    width: 90%; }
  .jleagueArea .bnrArea {
    display: inline-block;
    margin: 0 auto 40px;
    width: 90%; }
    .jleagueArea .bnrArea img {
      width: 100%; }

/*--- lookArea ---*/
.lookArea {
  background: url(/img/special/post-olympic/BG_look.jpg) no-repeat bottom center;
  background-size: 300% auto; }
  .lookArea .headingArea {
    background: #909058; }
    .lookArea .headingArea i {
      color: #c10000; }
    .lookArea .headingArea::after {
      color: #909058; }
  .lookArea .inner__white {
    padding: 5% 2%; }
  .lookArea .btn__border {
    margin-top: 20px; }
    .lookArea .btn__border a {
      border-color: #000; }

/*--- matchTable ---*/
.leagAccTit {
  background-color: #f6f6f6;
  border-bottom: solid 1px #ccc; }

.gameTable td.clubName {
  font-size: 2.6vw; }

.gameTable td.point {
  display: none; }

.matchTable tbody td.match {
  width: 180px; }

.gameTable {
  width: 170px; }

.gameTable td.clubName span {
  margin-top: -10px; }

.gameTable td.status {
  width: 10%; }

.gameTable td.status li.icon span {
  width: 20px; }

.matchTable tbody td {
  font-size: 2vw; }

.matchTable tbody td.linkWrap {
  white-space: nowrap; }

.leagAccTit ul {
  display: none; }

/*--- popup ---*/
.mfp-content {
  background: #FFF;
  width: 90% !important;
  padding: 5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.memberpopup__player {
  position: relative; }
  .memberpopup__player__imgL img {
    width: 100%; }
  .memberpopup__player__name {
    font-size: 6vw;
    font-weight: 700;
    color: #081b62;
    background: #FFF;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    padding: 0 1em;
    position: relative;
    top: -30px;
    z-index: 1;
    display: inline-block; }
  .memberpopup__player__data {
    position: relative;
    top: -30px;
    background: #081b62;
    padding: 3%;
    font-size: 3.5vw;
    color: #FFF; }
    .memberpopup__player__data li {
      line-height: 1.4;
      padding: .3em;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
      .memberpopup__player__data li:last-child {
        border-bottom: none; }

.memberpopup__YT {
  margin: 20px 0; }
  .memberpopup__YT dt {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 5vw;
    text-align: center;
    line-height: 1;
    margin-bottom: .5em; }

.memberpopup__matchlist dt {
  font-weight: 700;
  font-size: 5vw;
  text-align: center;
  line-height: 1.4;
  margin-bottom: .5em; }

.memberpopup__matchlist dd table {
  border-collapse: collapse;
  width: 100%; }
  .memberpopup__matchlist dd table th, .memberpopup__matchlist dd table td {
    background: #f0f0f0;
    border: 1px solid #FFF;
    font-size: 3.2vw;
    line-height: 1.5;
    padding: .3em;
    vertical-align: middle; }
    .memberpopup__matchlist dd table th a, .memberpopup__matchlist dd table td a {
      background: #e60012;
      display: block;
      font-size: 3vw;
      line-height: 1.5;
      border-radius: 3px;
      text-align: center;
      color: #FFF;
      font-weight: 700;
      letter-spacing: -.05em;
      padding: .2em; }

.videoOneArea {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0;
  background: #000; }
  .videoOneArea iframe {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important; }

.popup-modal-dismiss {
  text-align: center; }
  .popup-modal-dismiss a {
    display: block;
    line-height: 40px;
    height: 40px;
    border: 1px solid #ccc;
    text-align: center;
    width: 60%;
    margin: 20px auto 0;
    font-size: 4vw;
    color: #333; }

.mfp-arrow:after {
  display: none; }

.mfp-arrow:before {
  opacity: 1 !important; }

.mfp-arrow {
  opacity: 1 !important;
  height: auto; }

.fade-here,
.fade-scale,
.fade-up,
.fade-from-left,
.fade-from-right {
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out; }

.spBottomBnr,
.adArea,
#partnersArea,
.specialArea {
  display: none; }

.bottomArea {
  padding-bottom: 5px;
  border-top: 1px solid #e2e2e2; }

.breadcrumbList-wrap {
  background: #f6f6f6 !important; }

.snsBtnWrap {
  height: 70px !important; }

.pcDISP {
  display: none !important; }