@charset "UTF-8";
@import url(/css/root.css);
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
#container #contents .scroll-hint-icon{
  top: 50%;
  transform: translateY(-50%);
}
@media all and (min-width: 769px) {
  #container #contents .results_page .flex_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    grid-gap: var(--s16_20);
    margin-bottom: var(--s16_32);
  }
  #container #contents .results_page .flex_area .main_area {
    width: calc(80% - var(--s16_20));
  }
  #container #contents .results_page .flex_area .main_area .year_tit {
    margin-bottom: var(--s16_20);
    padding: var(--s4_8) var(--s8_16);
    border-bottom: var(--sub_col02) 2px solid ;
    font-size: var(--s20_28);
  }
  #container #contents .results_page .flex_area .main_area .vod {
    font-size: var(--s14_16);
    margin-bottom: var(--s8_16);
    text-align: right;
  }
  #container #contents .results_page .flex_area .main_area .game_box {
    border: 1px solid #ccc;
  }
  #container #contents .results_page .flex_area .main_area .game_box:not(:last-of-type) {
    margin-bottom: var(--s16_32);
  }
  #container #contents .results_page .flex_area .main_area .game_box .game_tit {
    padding: var(--s4_8) var(--s8_16);
    text-align: center;
    font-size: var(--s16_18);
    font-weight: bold;
    background-color: var(--sub_col01);
    border-bottom: 1px solid #ccc;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area {
    padding: var(--s8_16);
    font-size: var(--s14_16);
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area:not(:last-of-type) {
    border-bottom: 1px #ccc dashed;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area:nth-of-type(even){
    background-color: rgba(231, 239, 252, .5);
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area {
    width: 100%;
    margin: 1rem auto 0;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table {
    white-space: nowrap;
    border-collapse: collapse;
    width: 100%;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr th {
    font-size: var(--s16_18);
    text-align: center;
    vertical-align: middle;
    padding: .25em .5em;
    border: 1px solid #333;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr td {
    font-size: var(--s14_16);
    text-align: center;
    vertical-align: middle;
    padding: .25em .5em;
    border: 1px solid #333;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr td.sun {
    font-size: var(--s16_18);
    background-color: #f6f6f6;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr.gray th ,#container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr.gray td{
    background-color: #f6f6f6;
  }


  #container #contents .results_page .flex_area .side_area {
    width: 20%;
  }
  #container #contents .results_page .flex_area .side_area li {
    width: 100%;
  }
  #container #contents .results_page .flex_area .side_area li.tit {
    padding: var(--s4_8) var(--s8_16);
    font-size: var(--s16_18);
    background-color: var(--sub_col02);
    text-align: center;
    color: #fff;
    border-bottom: 1px solid #fff;
  }
  #container #contents .results_page .flex_area .side_area li a {
    padding: var(--s4_8) var(--s8_16);
    display: block;
    width: 100%;
    transition: background-color .5s;
    border-bottom: 1px solid #ccc;
    font-size: var(--s14_18);
  }
  #container #contents .results_page .flex_area .side_area li a:hover ,#container #contents .results_page .flex_area .side_area li.active a {
    background-color: #ccc;
    color: #fff;
    border-color: #fff;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents .results_page .flex_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    grid-gap: var(--s16_20);
    margin-bottom: var(--s16_32);
  }
  #container #contents .results_page .flex_area .main_area {
    width: 100%;
  }
  #container #contents .results_page .flex_area .main_area .year_tit {
    margin-bottom: var(--s16_20);
    padding: var(--s4_8) var(--s8_16);
    border-bottom: var(--sub_col02) 2px solid ;
    font-size: var(--s20_28);
  }
  #container #contents .results_page .flex_area .main_area .vod {
    font-size: var(--s14_16);
    margin-bottom: var(--s8_16);
    text-align: right;
  }
  #container #contents .results_page .flex_area .main_area .game_box {
    border: 1px solid #ccc;
  }
  #container #contents .results_page .flex_area .main_area .game_box:not(:last-of-type) {
    margin-bottom: var(--s16_32);
  }
  #container #contents .results_page .flex_area .main_area .game_box .game_tit {
    padding: var(--s4_8) var(--s8_16);
    text-align: center;
    font-size: var(--s16_18);
    font-weight: bold;
    background-color: var(--sub_col01);
    border-bottom: 1px solid #ccc;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area {
    padding: var(--s8_16);
    font-size: var(--s14_16);
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area:not(:last-of-type) {
    border-bottom: 1px #ccc dashed;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area:nth-of-type(even){
    background-color: rgba(231, 239, 252, .5);
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area {
    width: 100%;
    margin: 1rem auto 0;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table {
    white-space: nowrap;
    border-collapse: collapse;
    width: 100%;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr th {
    font-size: var(--s16_18);
    text-align: center;
    vertical-align: middle;
    padding: .25em .5em;
    border: 1px solid #333;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr td {
    font-size: var(--s14_16);
    text-align: center;
    vertical-align: middle;
    padding: .25em .5em;
    border: 1px solid #333;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr td.sun {
    font-size: var(--s16_18);
    background-color: #f6f6f6;
  }
  #container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr.gray th ,#container #contents .results_page .flex_area .main_area .game_box .text_area .table_area table tr.gray td{
    background-color: #f6f6f6;
  }


  #container #contents .results_page .flex_area .side_area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  #container #contents .results_page .flex_area .side_area li {
    width: 50%;
  }
  #container #contents .results_page .flex_area .side_area li.tit {
    padding: var(--s4_8) var(--s8_16);
    font-size: var(--s16_18);
    background-color: var(--sub_col02);
    text-align: center;
    color: #fff;
    border-bottom: 1px solid #fff;
    width: 100%;
  }
  #container #contents .results_page .flex_area .side_area li a {
    padding: var(--s4_8) var(--s8_16);
    display: block;
    width: 100%;
    transition: background-color .5s;
    border-bottom: 1px solid #ccc;
    font-size: var(--s14_18);
    text-align: center;
  }
  #container #contents .results_page .flex_area .side_area li:nth-of-type(odd):not(.tit) a {
    border-left: 1px solid #ccc;
  }
  #container #contents .results_page .flex_area .side_area li a:hover ,#container #contents .results_page .flex_area .side_area li.active a {
    background-color: #ccc;
    color: #fff;
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .uniform_list .uni_box {
    width: 100%;
  }
}