@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");
#partnersArea,
.tickerwrap,
#utilityArea,
.skyscraperWrap {
  display: none; }

html {
  font-size: 62.5%;
  overflow-y: auto; }

body {
  background: #FFF; }

.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;
  min-width: 980px; }
  .kvArea > article,
  .content > article {
    text-align: center;
    padding-bottom: 1px; }

/* ==========================================================================
   COMMON
========================================================================== */
.CLM__half, .CLM__three, .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__three img, .CLM__four img {
    width: 100%; }
  .CLM__half .wide100, .CLM__three .wide100, .CLM__four .wide100 {
    width: 100% !important; }

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

.CLM__three > li,
.CLM__three > article {
  width: 32%;
  margin-right: 2%; }
  .CLM__three > li:nth-child(3n),
  .CLM__three > article:nth-child(3n) {
    margin-right: 0; }

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

.nowrapCLM {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: -ms- space-between;
  justify-content: -ms- space-between;
  justify-content: -webkit- space-between;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-align: -ms- top;
  align-items: -ms- top;
  align-items: -webkit- top;
  -webkit-box-align: top;
  align-items: top; }
  .nowrapCLM > li,
  .nowrapCLM > article {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 3%; }
    .nowrapCLM > li:last-child,
    .nowrapCLM > article:last-child {
      margin-right: 0; }
    .nowrapCLM > li img,
    .nowrapCLM > article img {
      width: 100%; }
    .nowrapCLM > li a,
    .nowrapCLM > article a {
      display: block; }

.text__honbun {
  font-size: 15px;
  font-size: 1.5rem;
  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: 13px;
  font-size: 1.3rem;
  line-height: 1.65;
  margin-bottom: 1em;
  text-align: left; }

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

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

.headingArea {
  background: #000;
  text-align: center;
  padding: 40px 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: 800px;
    margin: 20px auto 0; }
    .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: 16px;
      font-size: 1.6rem;
      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: 40px;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.5; }
  .heading__main span {
    display: block;
    font-size: 15px;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6); }
  .heading__main i {
    font-style: normal;
    font-weight: 900;
    color: #c8c866; }

.heading__sub {
  color: #333;
  font-size: 40px;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.5; }
  .heading__sub span {
    display: block;
    font-size: 15px;
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.6); }

.btn__border a {
  margin: auto;
  display: block;
  width: 60%;
  border: 1px solid #FFF;
  height: 60px;
  line-height: 58px;
  text-align: center;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 600;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
  color: #000;
  -webkit-transition: .5s all;
  -o-transition: .5s all;
  transition: .5s all; }
  .btn__border a:hover {
    text-decoration: none;
    background: white; }

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

/*--- kvArea ---*/
.kvArea {
  position: relative;
  min-width: 980px; }
  .kvArea__title {
    position: absolute;
    left: 10%;
    top: 50px;
    font-size: 60px;
    font-size: 6rem;
    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: 100%;
        height: 20px;
        background: white;
        position: absolute;
        left: 0;
        bottom: 5px;
        z-index: -1; }
  .kvArea__text {
    position: absolute;
    left: 10%;
    top: 350px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.2em;
    padding: 2em;
    z-index: 2;
    opacity: 0; }
  .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: 880px;
  margin: 0 auto 100px;
  position: relative;
  top: -50px; }
  .gnav__list li a {
    display: block;
    height: 200px;
    padding: 20px;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 600;
    position: relative;
    -webkit-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all; }
    .gnav__list li a::after {
      font-family: 'ionicons';
      content: '\f103';
      font-size: 5rem;
      position: absolute;
      bottom: -3rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
    .gnav__list li a img {
      width: auto;
      display: block;
      margin: 10px auto;
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
    .gnav__list li a:hover {
      -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
      transform: scale(1.02); }
      .gnav__list li a:hover::after {
        -webkit-transform: translateX(-50%) translateY(10px);
        -ms-transform: translateX(-50%) translateY(10px);
        transform: translateX(-50%) translateY(10px); }
  .gnav__list__player a {
    background: #081b62; }
    .gnav__list__player a::after {
      color: #081b62; }
  .gnav__list__jleague a {
    background: #e60012; }
    .gnav__list__jleague a::after {
      color: #e60012; }
  .gnav__list__look a {
    background: #909058; }
    .gnav__list__look a::after {
      color: #909058; }

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

/*--- memberlist ---*/
.memberlist {
  margin-top: 20px; }
  .memberlist li {
    font-size: 16px;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left; }
    .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: 250px;
      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: 55px;
        line-height: 55px;
        font-size: 18px;
        padding-left: 20px;
        font-family: "Oswald", "Noto Sans JP", "メイリオ", sans-serif; }
      .memberlist li .data .detail {
        height: 100px;
        background: #f0f0f0;
        padding: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative; }
        .memberlist li .data .detail .team {
          font-size: 16px;
          line-height: 1.3;
          padding-bottom: 10px; }
        .memberlist li .data .detail .profile {
          font-family: "Oswald", "Noto Sans JP", "メイリオ", sans-serif; }
        .memberlist li .data .detail::after {
          position: absolute;
          bottom: 0;
          right: 0;
          height: 100px; }
      .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: 100% auto; }
  .jleagueArea .headingArea {
    background: #e60012; }
    .jleagueArea .headingArea::after {
      color: #e60012; }
  .jleagueArea .inner__white {
    margin-bottom: 40px;
    width: 700px; }
  .jleagueArea .bnrArea {
    display: inline-block;
    margin: 0 auto 80px; }
    .jleagueArea .bnrArea img {
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
    .jleagueArea .bnrArea a:hover img {
      -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
      transform: scale(1.02);
      opacity: 1;
      -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); }

/*--- lookArea ---*/
.lookArea {
  background: url(/img/special/post-olympic/BG_look.jpg) no-repeat bottom center;
  background-size: 100% auto; }
  .lookArea .headingArea {
    background: #909058; }
    .lookArea .headingArea i {
      color: #c10000; }
    .lookArea .headingArea::after {
      color: #909058; }
  .lookArea .btn__border {
    margin-top: 20px; }
    .lookArea .btn__border a {
      border-color: #000; }
      .lookArea .btn__border a:hover {
        background: rgba(0, 0, 0, 0.3); }

/*--- matchTable ---*/
.leftRedTit, .leagAccTit h5 {
  text-align: left; }

.matchTable tbody td.stadium {
  width: 130px; }
  .matchTable tbody td.stadium br {
    display: none; }
  .matchTable tbody td.stadium a {
    padding-left: 1em; }

.matchTable tbody td.match {
  width: 400px; }
  .matchTable tbody td.match .gameTable {
    width: 380px; }

.matchTable tbody td.ticket {
  width: 170px; }

.matchTable tbody td {
  font-size: 1.4rem !important; }

.leagAccTit ul {
  display: none; }

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

.memberpopup__player {
  position: relative;
  margin-bottom: 80px; }
  .memberpopup__player__imgL {
    height: 500px;
    overflow: hidden; }
    .memberpopup__player__imgL img {
      width: 100%; }
  .memberpopup__player__name {
    font-size: 30px;
    font-size: 3rem;
    font-weight: 700;
    color: #081b62;
    background: #FFF;
    height: 60px;
    line-height: 60px;
    white-space: nowrap;
    padding: 0 1em;
    position: absolute;
    right: 0;
    top: 330px;
    z-index: 1; }
  .memberpopup__player__data {
    position: absolute;
    right: 0;
    top: 370px;
    width: 70%;
    background: #081b62;
    padding: 3%;
    font-size: 15px;
    font-size: 1.5rem;
    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: 24px;
    font-size: 2.4rem;
    text-align: center;
    line-height: 1;
    margin-bottom: .5em; }

.memberpopup__matchlist dt {
  font-weight: 700;
  font-size: 22px;
  font-size: 2.2rem;
  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: 16px;
    font-size: 1.6rem;
    padding: .75em;
    line-height: 1; }
    .memberpopup__matchlist dd table th a, .memberpopup__matchlist dd table td a {
      background: #e60012;
      display: block;
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 30px;
      border-radius: 3px;
      text-align: center;
      color: #FFF;
      font-weight: 700;
      letter-spacing: -.05em;
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all; }
      .memberpopup__matchlist dd table th a:hover, .memberpopup__matchlist dd table td a:hover {
        text-decoration: none;
        opacity: .5; }

.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: 150px;
    margin: 20px auto 0;
    font-size: 15px;
    font-size: 1.5rem;
    color: #333;
    -webkit-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all; }
    .popup-modal-dismiss a:hover {
      text-decoration: none;
      background: #ccc; }

.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; }

/*--- ETC ---*/
.spDISP {
  display: none !important; }

.snsBtn {
  margin-top: 50px; }