@charset "UTF-8";
/* --------------------------------------------------------------------------------------
   common
-------------------------------------------------------------------------------------- */
#right_column > article {
  width: 100%;
  padding: 10px 20px 40px; }
  #right_column > article h2 {
    position: relative;
    width: 100%;
    flex-basis: 100%;
    font-size: 20px;
    line-height: 1.5;
    padding: 3px 10px 3px 35px;
    margin-bottom: 1em;
    border-bottom: 2px solid #f8500a;
    box-shadow: 0 2px 0 #fff; }
    @media (max-width: 640px) {
      #right_column > article h2 {
        font-size: 16px; } }
    #right_column > article h2::before {
      content: url(/images/common/escudo.png);
      position: absolute;
      top: 7px;
      left: 4px; }
      @media (max-width: 640px) {
        #right_column > article h2::before {
          top: 4px; } }

.four {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid #666;
  border-left: 1px solid #666; }
  .four + .four {
    border-top: 0; }
  .four li {
    flex: 1 1 25%;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666; }
    .four li a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      color: #fff;
      line-height: 1.25;
      text-align: center;
      padding: 5px 0;
      text-decoration: none; }
      @media (max-width: 640px) {
        .four li a {
          line-height: 1.5; } }
      .four li a.vcf {
        background: #012; }
      .four li a.vcfm {
        background: #020; }
      .four li a.vcff {
        background: #201; }
      .four li a:hover {
        background: #f8500a; }
      .four li a.active {
        background: #fff;
        color: #000;
        cursor: auto; }

.column3_main {
  font-size: 14px; }
  @media (max-width: 1200px) {
    .column3_main {
      font-size: 12px; } }
  .column3_main h3 {
    font-size: 16px;
    padding: 3px 1em;
    margin-bottom: 0.85em; }
    @media (max-width: 640px) {
      .column3_main h3 {
        font-size: 14px;
        margin-bottom: 1em; } }
  .column3_main table th {
    border: 1px solid #fff;
    vertical-align: middle;
    padding: 0 0px; }
  .column3_main table td {
    border: 1px solid #fff;
    vertical-align: middle;
    padding: 0 7px 1px; }
  .column3_main table tfoot td {
    text-align: right;
    font-size: 12px; }
  .column3_main table .amis {
    background: #1a1a1a; }
  .column3_main table .copa {
    background: #123; }
  .column3_main table .uefa {
    background: #2a002a; }

/* --------------------------------------------------------------------------------------
   team
-------------------------------------------------------------------------------------- */
.team .flag {
  margin-left: 0; }

.formation {
  width: 100%;
  margin-top: 20px; }
  .formation td {
    border: 2px solid #fff !important;
    padding: 0 !important; }
  .formation ul {
    position: relative;
    width: 100%;
    height: 180px;
    background: #040; }
  .formation li {
    position: absolute;
    width: 20%;
    font-size: 12px;
    text-align: center; }
  .formation .gk {
    top: 45%;
    left: 1%;
    text-align: left; }
  .formation .lb {
    top: 5%;
    left: 15%; }
  .formation .lcb {
    top: 30%;
    left: 10%; }
  .formation .ccb {
    top: 45%;
    left: 20%; }
  .formation .rcb {
    top: 60%;
    left: 10%; }
  .formation .rb {
    top: 85%;
    left: 15%; }
  .formation .lh {
    top: 5%;
    right: 30%; }
  .formation .lch {
    top: 30%;
    left: 40%; }
  .formation .dh {
    top: 45%;
    left: 40%; }
  .formation .rch {
    top: 60%;
    left: 40%; }
  .formation .rh {
    top: 85%;
    right: 30%; }
  .formation .loh {
    top: 30%;
    right: 20%; }
  .formation .oh {
    top: 45%;
    right: 20%; }
  .formation .roh {
    top: 60%;
    right: 20%; }
  .formation .lw {
    top: 10%;
    right: 3%; }
  .formation .lfw {
    top: 30%;
    right: 1%; }
  .formation .cfw {
    top: 45%;
    right: 1%;
    text-align: right; }
  .formation .rfw {
    top: 60%;
    right: 1%; }
  .formation .rw {
    top: 80%;
    right: 3%; }

#goal, .frame_canteranos {
  margin-top: 20px; }

.frame_canteranos {
  width: 100%;
  table-layout: fixed;
  text-align: center; }
  .frame_canteranos td {
    padding: 0 !important; }
    .frame_canteranos td a.active {
      display: block;
      background: #fff;
      color: #000; }

#vcf thead th, #vcf thead td, #vcf tbody th {
  background: #003 url("/images/table/th_azul.png"); }
#vcf th, #vcf td {
  border-color: #88f; }

#vcfm thead th, #vcfm thead td, #vcfm tbody th {
  background: #030 url("/images/table/th_verde.png"); }
#vcfm th, #vcfm td {
  border-color: #282; }
#vcfm .copa {
  background: #002a2a; }

#vcff thead th, #vcff thead td, #vcff tbody th {
  background: #300 url("/images/table/th_rojo.png"); }
#vcff th, #vcff td {
  border-color: #814; }
#vcff .copa {
  background: #2a0000; }

#vcfa thead th, #vcfa thead td, #vcfa tbody th {
  background: #036 url("/images/table/th_celeste.png"); }
#vcfa th, #vcfa td {
  border-color: #5bf;
  white-space: nowrap; }

#president thead th, #president thead td, #president tbody th {
  background: #250 url("/images/table/th_olive.png"); }
#president th, #president td {
  border-color: #390; }

.chart {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px; }
  .chart .chartItem {
    flex-basis: 50%; }
    @media (max-width: 640px) {
      .chart .chartItem {
        flex-basis: 100%; } }
  .chart h3 {
    flex-basis: 100%;
    border-left: 5px solid #f8500a;
    margin: 0 0 8px;
    padding-left: 8px; }
  .chart .scroll {
    margin-top: 0;
    overflow-x: scroll; }
  .chart .svgOuter {
    width: 100%; }
    .chart .svgOuter#barChart {
      width: 800px; }
    .chart .svgOuter svg {
      width: 100%; }
    .chart .svgOuter .tick text {
      font-family: -apple-system, BlinkMacSystemFont, "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

/* --------------------------------------------------------------------------------------
   results
-------------------------------------------------------------------------------------- */
.results_table {
  display: block;
  margin: 20px auto; }
  .results_table caption, .results_table tbody, .results_table tr, .results_table td {
    display: block; }
  .results_table tbody {
    display: flex;
    flex-wrap: wrap; }
  .results_table tr {
    position: relative;
    flex-basis: 33.333%;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 7px 20px 7px 7px;
    margin-bottom: 3px; }
    @media (max-width: 640px) {
      .results_table tr {
        flex-basis: 100%; } }
    .results_table tr:hover {
      background: #055; }
      .results_table tr:hover .rival_name {
        color: #fc0; }
    .results_table tr.win {
      background: #330; }
      .results_table tr.win::after {
        content: "Win";
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #fff;
        color: #000;
        border-radius: 50%; }
    .results_table tr.draw {
      background: #310; }
      .results_table tr.draw::after {
        content: "Draw";
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-color: transparent transparent #999 transparent;
        border-width: 0 15px 30px 15px;
        border-style: solid;
        text-indent: -15px; }
  .results_table td {
    border: 0 !important; }
    .results_table td.homegame::after {
      content: "(Home)"; }
    .results_table td.awaygame::after {
      content: "(Away)"; }
    .results_table td a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

/* --------------------------------------------------------------------------------------
   stats
-------------------------------------------------------------------------------------- */
#stats tbody tr:nth-child(2n) {
  background: #222; }
#stats tbody th {
  text-align: left;
  padding: 0 7px;
  background: inherit; }
#stats td {
  text-align: center; }

/* --------------------------------------------------------------------------------------
   past season
-------------------------------------------------------------------------------------- */
.past_list {
  display: flex;
  flex-wrap: wrap; }
  .past_list .season {
    position: relative;
    flex-basis: 100%;
    text-shadow: 1px 1px 1px #000;
    padding: 2% 4%;
    margin-bottom: 20px; }
    .past_list .season > div {
      color: #fff000;
      font-size: 16px; }
    .past_list .season > p {
      font-size: 12px;
      margin-top: 5px; }
    .past_list .season ul {
      display: flex;
      justify-content: space-between;
      margin-top: 10px; }
      .past_list .season ul li {
        flex: 0 1 23%; }
        .past_list .season ul li a {
          display: block;
          background: rgba(0, 0, 0, 0.25);
          padding: 5px;
          text-align: center; }
          .past_list .season ul li a:hover {
            background: rgba(255, 255, 255, 0.25); }
    .past_list .season ol {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      gap: 10px;
      margin: 10px 10px 0; }
      @media (max-width: 640px) {
        .past_list .season ol {
          position: static; } }

#vcf .season {
  background: linear-gradient(to bottom, #1e3099 0%, #2958D8 50%, #1e3099 100%);
  border: 1px solid #4978f8; }
  #vcf .season a {
    border: 1px solid #4978f8; }

#vcfm .season {
  background: linear-gradient(to bottom, #005700 0%, #008a00 50%, #005700 100%);
  border: 1px solid #20a820; }
  #vcfm .season a {
    border: 1px solid #20a820; }

#vcff .season {
  background: linear-gradient(to bottom, #7d0220 0%, #bb1644 50%, #7d0220 100%);
  border: 1px solid #c146a1; }
  #vcff .season a {
    border: 1px solid #c146a1; }

.cantera_contianer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.cantera_column {
  flex-basis: 48.5%;
  margin-bottom: 20px; }
  @media (max-width: 640px) {
    .cantera_column {
      flex-basis: 100%; } }
  .cantera_column h3 {
    border-left: 5px solid #f8500a;
    margin: 0 0 8px;
    padding-left: 8px; }
  .cantera_column dl {
    padding: 7px 12px;
    border: 2px #5bf groove; }
  .cantera_column dt {
    display: inline-block;
    width: 28%;
    font-size: 13px;
    line-height: 1.75; }
    @media (max-width: 440px) {
      .cantera_column dt {
        display: block;
        width: 100%; } }
  .cantera_column dd {
    display: inline-block;
    width: 72%; }
    @media (max-width: 440px) {
      .cantera_column dd {
        display: block;
        width: 100%;
        margin-bottom: 1em; } }

/* --------------------------------------------------------------------------------------
   partner schools
-------------------------------------------------------------------------------------- */
.partner_schools h3 {
  background: linear-gradient(to bottom, #299a0b 0%, #086d27 100%);
  text-shadow: 1px 1px 2px #000; }
.partner_schools ul {
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  gap: 12px; }
  .partner_schools ul li {
    flex-basis: calc(25% - 9px); }
    @media (max-width: 640px) {
      .partner_schools ul li {
        flex-basis: calc(33.33% - 8px); } }
    .partner_schools ul li figcaption {
      border: 1px solid #fff;
      text-align: center;
      margin: 5px 0; }