@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*********************************
 *
 * COMMON
 *
 *********************************/
body {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(1.375vw, 20px);
  font-weight: 500; }
  @media screen and (max-width: 767px) {
    body {
      max-width: 750px;
      font-size: min(3vw, 16px);
      -webkit-text-size-adjust: 100%; }
      body .pc {
        display: none !important; } }
  @media screen and (min-width: 768px) {
    body a {
      transition: 0.3s; }
      body a:hover {
        opacity: 0.8; }
    body .sp {
      display: none !important; } }
  body a {
    text-decoration: none; }
  body img {
    width: 100%;
    height: auto; }

/* font */
.red {
  color: #db0a5b; }

.yellow {
  color: #ffc600; }

.green {
  color: #a4ce4e; }

.purple {
  color: #5f259f; }

strong {
  font-weight: 900; }

.fs150 {
  font-size: 150%; }
  @media screen and (max-width: 767px) {
    .fs150 {
      font-size: 120%; } }

.ls0 {
  letter-spacing: 0; }

.txt_c {
  text-align: centert !important; }

.txt_l {
  text-align: left !important; }

p.l_1em {
  padding: 0 0 0 1em;
  text-indent: -1em;
  line-height: 1.7; }

ul.l_1em {
  line-height: 1.7; }
  ul.l_1em li {
    padding: 0 0 0 1em;
    text-indent: -1em; }

.g_line {
  padding-bottom: 0.2em;
  border-bottom: 1px solid #a4ce4e; }

.p_line {
  padding-bottom: 0.2em;
  border-bottom: 1px solid #5f259f; }

.mT05em {
  margin-top: 0.5em; }

.mT1em {
  margin-top: 1em; }

.mT2em {
  margin-top: 2em; }

/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeUpTrigger {
  opacity: 0; }

/*********************************
 *
 * MV
 *
 *********************************/
#mv .mv_img {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    #mv .mv_img {
      width: 100%; } }
#mv .h1_box {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 0 3rem 0;
  background: linear-gradient(to right, #000016 0%, #1e4b75 100%);
  color: #fff;
  text-align: center; }
  @media screen and (max-width: 767px) {
    #mv .h1_box {
      padding: 2rem 0 1.5rem 0; } }
  #mv .h1_box h1 {
    font-size: 220%;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em; }
    @media screen and (max-width: 767px) {
      #mv .h1_box h1 {
        font-size: 170%;
        line-height: 1.4; } }
    #mv .h1_box h1 span {
      display: block;
      margin-top: 0.25em;
      font-size: 230%;
      font-weight: 700; }
      @media screen and (max-width: 767px) {
        #mv .h1_box h1 span {
          font-size: 155%; } }
#mv .note_box {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.2rem 0 3.2rem 0;
  background: #000;
  color: #fff; }
  @media screen and (max-width: 767px) {
    #mv .note_box {
      padding: 1.2rem 0 2.2rem 0; } }
  #mv .note_box .note_inner {
    width: 90%;
    margin: 0 auto; }
    #mv .note_box .note_inner .img {
      width: 62%; }
      @media screen and (max-width: 767px) {
        #mv .note_box .note_inner .img {
          width: 74%;
          margin: 0 auto; } }
    #mv .note_box .note_inner .pr {
      background: #0090da;
      line-height: 1.3; }
      @media screen and (min-width: 768px) {
        #mv .note_box .note_inner .pr {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 12em;
          height: 12em;
          top: -12%;
          right: 3%;
          border-radius: 50%;
          font-size: 160%;
          text-align: center; } }
      @media screen and (max-width: 767px) {
        #mv .note_box .note_inner .pr {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80%;
          margin: 1rem auto 0 auto;
          padding: 0.9em 0;
          border-radius: 6em;
          text-align: center; } }
      #mv .note_box .note_inner .pr .yellow {
        font-size: 130%; }
      #mv .note_box .note_inner .pr strong {
        display: block;
        margin-top: 0.8rem;
        font-size: 130%;
        font-weight: 600; }
        @media screen and (max-width: 767px) {
          #mv .note_box .note_inner .pr strong {
            margin-top: 0.3rem;
            font-size: 150%; } }
    #mv .note_box .note_inner .note {
      margin-top: 1rem;
      font-size: 180%;
      font-weight: 800;
      line-height: 1.8;
      letter-spacing: 0.3em;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #mv .note_box .note_inner .note {
          margin-top: 1.5rem;
          font-size: 130%;
          letter-spacing: 0.15em;
          line-height: 2; } }
      #mv .note_box .note_inner .note .txt {
        display: block;
        margin-top: 1.2rem;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.6; }
        @media screen and (max-width: 767px) {
          #mv .note_box .note_inner .note .txt {
            margin-top: 0.8rem; } }

/*********************************
 *
 * date
 *
 *********************************/
#date {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 0 4.5rem 0;
  background: url("../images/date_bg.jpg") left top no-repeat;
  background-size: cover;
  color: #fff; }
  @media screen and (max-width: 767px) {
    #date {
      padding: 1.5rem 0 2rem 0; } }
  #date h2 {
    width: 80%;
    max-width: 1021px;
    margin: 0 auto;
    background: url("../images/date_h2.png") center center no-repeat;
    background-size: 100% auto;
    font-size: 190%;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #date h2 {
        width: 90%;
        font-size: 120%;
        letter-spacing: 0.1em; } }
  #date p {
    width: 84%;
    margin: 1.3rem auto 0 auto;
    font-size: 215%;
    font-weight: 600;
    line-height: 1.4; }
    @media screen and (max-width: 767px) {
      #date p {
        width: 90%;
        font-size: 145%;
        text-align: center; } }
    #date p .green {
      font-size: 120%; }

/*********************************
 *
 * MAIN
 *
 *********************************/
main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; }
  main p {
    padding-top: 1em; }
    @media screen and (max-width: 767px) {
      main p {
        padding-top: 1.5em; } }

/*********************************
 * howto
 *********************************/
#howto {
  position: relative;
  padding: 4rem 0 4.5rem 0;
  background: #f2f2f2; }
  @media screen and (max-width: 767px) {
    #howto {
      padding: 2.5rem 0 2.5rem 0; } }
  #howto h2 {
    width: 23.5%;
    max-width: 300px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      #howto h2 {
        width: 40%; } }
  #howto .img {
    position: absolute;
    width: 28.6%;
    max-width: 366px;
    top: -3rem;
    right: 3%; }
    @media screen and (max-width: 767px) {
      #howto .img {
        width: 20%;
        top: -0.7rem;
        right: 5%; } }
  #howto dl {
    margin: 0.8rem auto 0 auto;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #howto dl {
        margin-top: 0.5rem; } }
    #howto dl a {
      border-bottom: 1px solid #5f259f;
      color: #5f259f; }
      #howto dl a:hover {
        opacity: 1;
        border-bottom: 1px solid transparent; }
    #howto dl dt {
      font-size: 190%; }
      @media screen and (max-width: 767px) {
        #howto dl dt {
          font-size: 150%; } }
    #howto dl dd {
      padding-top: 0.5em;
      font-size: 130%; }
      @media screen and (max-width: 767px) {
        #howto dl dd {
          padding-top: 0.8em;
          font-size: 90%; } }
  #howto .img + dl {
    margin-top: 3rem; }
    @media screen and (max-width: 767px) {
      #howto .img + dl {
        margin-top: 1.5rem; } }
  #howto .arw {
    margin: 0.8rem auto 0 auto;
    width: 3.6%;
    max-width: 45px; }
    @media screen and (max-width: 767px) {
      #howto .arw {
        margin: 0.5rem auto 0 auto;
        width: 7%; } }

/*********************************
 * game
 *********************************/
#game {
  padding: 4.5rem 0; }
  @media screen and (max-width: 767px) {
    #game {
      padding: 2.5rem 0; } }
  #game h2 {
    width: 23.5%;
    max-width: 300px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      #game h2 {
        width: 40%; } }
  #game .lead {
    padding-top: 1.2em;
    font-size: 220%;
    font-weight: 700;
    line-height: 1.5;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #game .lead {
        padding-top: 1.4em;
        font-size: 150%; } }
    #game .lead .purple {
      font-size: 120%;
      letter-spacing: 0.1em; }
  #game .logo {
    width: 36.8%;
    max-width: 470px;
    margin: 2.8rem auto 0 auto; }
    @media screen and (max-width: 767px) {
      #game .logo {
        width: 55%;
        margin-top: 2rem; } }
  #game .logo2 {
    width: 29%;
    max-width: 370px;
    margin: 3rem auto 0 auto; }
  #game dl.league {
    width: 90%;
    max-width: 1154px;
    margin: 2.2rem auto 0 auto; }
    #game dl.league dt {
      padding: 0.8rem;
      font-size: 230%;
      font-weight: 600;
      color: #fff;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #game dl.league dt {
          padding: 0.5rem;
          font-size: 170%;
          line-height: 1.3; } }
    #game dl.league dd {
      display: flex;
      justify-content: space-between;
      padding: 3rem 3rem 4rem 3rem; }
      @media screen and (max-width: 767px) {
        #game dl.league dd {
          padding: 1.5rem 1.5rem 2rem 1.5rem; } }
    #game dl.league ul.team {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #game dl.league ul.team li {
        width: 47.5%;
        padding: 0.5rem; }
        @media screen and (max-width: 767px) {
          #game dl.league ul.team li {
            width: 100%; } }
        #game dl.league ul.team li a {
          display: flex;
          color: #000;
          font-size: 135%;
          align-items: center; }
        #game dl.league ul.team li img {
          width: 13%;
          margin-right: 0.5rem; }
  #game .league1 {
    border: 2px solid #0061a0; }
    #game .league1 dt {
      background: #0061a0; }
    #game .league1 ul.team li {
      border-bottom: 1px solid #0061a0; }
      #game .league1 ul.team li:nth-child(1) {
        border-top: 1px solid #0061a0; }
      @media screen and (min-width: 768px) {
        #game .league1 ul.team li:nth-child(2) {
          border-top: 1px solid #0061a0; } }
    @media screen and (max-width: 767px) {
      #game .league1 ul.team + ul.team {
        border: 0; } }
  #game .league2 {
    border: 2px solid #01aca0; }
    #game .league2 dt {
      background: #01aca0; }
    #game .league2 ul.team li {
      border-bottom: 1px solid #01aca0; }
      #game .league2 ul.team li:nth-child(1) {
        border-top: 1px solid #01aca0; }
      @media screen and (min-width: 768px) {
        #game .league2 ul.team li:nth-child(2) {
          border-top: 1px solid #01aca0; } }
    @media screen and (max-width: 767px) {
      #game .league2 ul.team + ul.team {
        border: 0; } }
  #game .league3 {
    border: 2px solid #db0a5b; }
    #game .league3 dt {
      background: #db0a5b; }
    #game .league3 dd {
      display: block !important;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #game .league3 dd {
          padding: 1rem 0.7rem 2rem 0.7rem !important;
          line-height: 1.6; } }
    #game .league3 .l_ttl {
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #db0a5b;
      color: #db0a5b;
      font-size: 160%;
      font-weight: 600; }
      @media screen and (max-width: 767px) {
        #game .league3 .l_ttl {
          padding-bottom: 0.3rem;
          font-size: 150%; } }
    #game .league3 .date {
      padding-top: 1.5rem;
      font-size: 120%;
      text-align: left; }
      #game .league3 .date span {
        font-size: 120%;
        font-weight: 600; }
      #game .league3 .date .pc,
      #game .league3 .date .sp {
        font-size: 100%;
        font-weight: 500; }
    #game .league3 .team_list {
      padding-top: 0.5em;
      font-size: 120%; }
      @media screen and (max-width: 767px) {
        #game .league3 .team_list {
          font-size: 90%; } }
      #game .league3 .team_list img {
        width: 2.6em;
        vertical-align: middle; }

/*********************************
 * kiyaku
 *********************************/
#kiyaku {
  padding: 4.5rem 0 6rem 0;
  background: #000; }
  @media screen and (max-width: 767px) {
    #kiyaku {
      padding: 2.5rem 0 4rem 0; } }
  #kiyaku .kiyaku_inner {
    position: relative;
    width: 90%;
    max-width: 1154px;
    margin: 0 auto;
    padding: 3.5rem 0 5.5rem 0;
    color: #fff;
    font-size: 120%;
    line-height: 1.8; }
    @media screen and (max-width: 767px) {
      #kiyaku .kiyaku_inner {
        padding: 2.5rem 0 4rem 0;
        font-size: 90%; } }
    #kiyaku .kiyaku_inner::before {
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: 1rem;
      top: 0;
      left: 0;
      background: url("../images/kiyaku_line.png") left top repeat-y;
      background-size: 100% auto; }
      @media screen and (max-width: 767px) {
        #kiyaku .kiyaku_inner::before {
          height: 0.5rem; } }
    #kiyaku .kiyaku_inner::after {
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: 1rem;
      bottom: 0;
      left: 0;
      background: url("../images/kiyaku_line.png") left top repeat-y;
      background-size: 100% auto; }
      @media screen and (max-width: 767px) {
        #kiyaku .kiyaku_inner::after {
          height: 0.5rem; } }
    #kiyaku .kiyaku_inner .btn {
      position: absolute;
      top: 4rem;
      right: 0;
      font-size: 130%;
      cursor: pointer; }
      @media screen and (max-width: 767px) {
        #kiyaku .kiyaku_inner .btn {
          top: 2.6rem;
          font-size: 110%; } }
      #kiyaku .kiyaku_inner .btn span {
        position: relative;
        padding-right: 1.3em;
        line-height: 1; }
      #kiyaku .kiyaku_inner .btn.open span::after {
        position: absolute;
        display: block;
        content: "+";
        width: 1em;
        height: 1em;
        top: 0.25em;
        right: 0; }
      #kiyaku .kiyaku_inner .btn.close {
        display: none; }
        #kiyaku .kiyaku_inner .btn.close span::after {
          position: absolute;
          display: block;
          content: "-";
          width: 1em;
          height: 1em;
          top: 0.25em;
          right: 0; }
    #kiyaku .kiyaku_inner .ac_box {
      display: none; }
    #kiyaku .kiyaku_inner .ttl {
      padding-top: 2em; }
    #kiyaku .kiyaku_inner .ttl + p,
    #kiyaku .kiyaku_inner .ttl + ul {
      padding-top: 0.3em; }
    #kiyaku .kiyaku_inner table {
      width: 100%; }
      #kiyaku .kiyaku_inner table th {
        width: 50%;
        padding: 0.2em 0.5em;
        border: 1px solid #808080; }
        @media screen and (max-width: 767px) {
          #kiyaku .kiyaku_inner table th {
            width: 60%; } }
      #kiyaku .kiyaku_inner table td {
        width: 50%;
        padding: 0.2em 0.5em;
        text-align: center;
        border: 1px solid #808080; }
        @media screen and (max-width: 767px) {
          #kiyaku .kiyaku_inner table td td {
            width: 40%; } }
      @media screen and (max-width: 767px) {
        #kiyaku .kiyaku_inner table.tbl50 th, #kiyaku .kiyaku_inner table.tbl50 td {
          width: 50%; } }
    #kiyaku .kiyaku_inner a {
      padding-bottom: 0.3rem;
      border-bottom: 1px solid #fff;
      color: #fff; }
      #kiyaku .kiyaku_inner a:hover {
        opacity: 1;
        border-bottom: 1px solid transparent; }
    #kiyaku .kiyaku_inner .line {
      width: 100%;
      height: 2px;
      background: #fff; }
  #kiyaku h2 {
    width: 23.5%;
    max-width: 300px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      #kiyaku h2 {
        width: 40%; } }
  #kiyaku .entry_btn {
    width: 50%;
    max-width: 640px;
    margin: 4.5rem auto 0 auto; }
    @media screen and (max-width: 767px) {
      #kiyaku .entry_btn {
        width: 75%;
        margin-top: 2.5rem; } }
    #kiyaku .entry_btn a {
      display: block;
      padding: 0.6em 0;
      background: #0090da url("../images/arw_yellow.png") right 1.8em center no-repeat;
      background-size: auto 43%;
      border-radius: 0.25rem;
      color: #fff;
      font-size: 240%;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #kiyaku .entry_btn a {
          font-size: 180%; } }
  #kiyaku .back {
    margin-top: 4rem;
    font-size: 180%;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #kiyaku .back {
        margin-top: 1rem;
        font-size: 150%; } }
    #kiyaku .back a {
      color: #fff; }

/*********************************
 * popup
 *********************************/
.popup_bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  z-index: 10; }

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1000px;
  height: 90%;
  background: #fff;
  z-index: 11;
  padding: 3rem; }
  @media screen and (max-width: 767px) {
    .popup {
      width: 100%;
      height: 100%;
      padding: 1rem; } }

.popup_inner {
  overflow-y: auto;
  height: 100%;
  padding: 1rem 1rem 2rem 0;
  border: 5px solid #0090da;
  border-radius: 0.8rem; }
  @media screen and (max-width: 767px) {
    .popup_inner {
      border: 3px solid #0090da; } }
  .popup_inner .name_box {
    display: flex;
    align-items: center;
    width: 96%;
    margin: 0 auto; }
    .popup_inner .name_box .logo {
      width: 13em; }
      @media screen and (max-width: 767px) {
        .popup_inner .name_box .logo {
          width: 8em; } }
    .popup_inner .name_box .name {
      font-size: 340%;
      font-weight: 700; }
      @media screen and (max-width: 767px) {
        .popup_inner .name_box .name {
          font-size: 210%; } }
  .popup_inner .none {
    padding: 2em 0;
    font-size: 150%;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .popup_inner .none {
        font-size: 140%; } }
  .popup_inner .num_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 15em;
    margin-right: 1em;
    padding: 1em 0 2em 0;
    background: url("../images/popup_bg.png") left top no-repeat;
    background-size: contain; }
    @media screen and (max-width: 767px) {
      .popup_inner .num_box {
        width: 12em;
        padding: 0.8em 0 2.5em 0; } }
    .popup_inner .num_box .num {
      width: 40%;
      padding: 0;
      color: #fff;
      font-size: 430%;
      font-weight: 700;
      text-align: right;
      line-height: 1; }
      @media screen and (max-width: 767px) {
        .popup_inner .num_box .num {
          font-size: 300%; } }
    .popup_inner .num_box .vs {
      width: 40%;
      padding: 0;
      color: #fff;
      font-size: 270%; }
      @media screen and (max-width: 767px) {
        .popup_inner .num_box .vs {
          font-size: 200%; } }
  @media screen and (max-width: 767px) {
    .popup_inner .txt_box {
      width: calc(100% - 12em); } }
  .popup_inner .game {
    display: flex;
    align-items: center;
    margin-top: 1rem; }
  .popup_inner .name_box + .game {
    margin: 0; }
  .popup_inner .m_team {
    font-size: 210%;
    font-weight: 800; }
    @media screen and (max-width: 767px) {
      .popup_inner .m_team {
        font-size: 150%; } }
  .popup_inner .date {
    display: flex;
    align-items: center;
    margin-top: -0.5rem;
    padding: 0;
    font-size: 290%;
    font-weight: 700; }
    @media screen and (max-width: 767px) {
      .popup_inner .date {
        margin-top: -0.2rem;
        font-size: 220%; } }
    .popup_inner .date .red {
      font-size: 130%; }
    .popup_inner .date .week {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.6em;
      height: 1.6em;
      margin: 0.4em 0 0 0.2em;
      background: #000;
      border-radius: 50%;
      color: #fff;
      font-size: 60%; }
  .popup_inner .place {
    padding: 0;
    font-size: 160%;
    font-weight: 600; }
    @media screen and (max-width: 767px) {
      .popup_inner .place {
        font-size: 130%; } }
  .popup_inner .entry_btn {
    width: 56%;
    margin: 4rem auto 0 auto; }
    @media screen and (max-width: 767px) {
      .popup_inner .entry_btn {
        width: 80%;
        margin-top: 2rem; } }
    .popup_inner .entry_btn a {
      display: block;
      padding: 0.7em 0;
      background: #0090da url("../images/arw_yellow.png") right 1.8em center no-repeat;
      background-size: auto 43%;
      border-radius: 0.25rem;
      color: #fff;
      font-size: 170%;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-align: center; }
      @media screen and (max-width: 767px) {
        .popup_inner .entry_btn a {
          font-size: 160%; } }
  .popup_inner .img {
    width: 75%;
    margin: 5rem auto 0 auto; }
    @media screen and (max-width: 767px) {
      .popup_inner .img {
        margin-top: 2.5rem; } }
  .popup_inner ul {
    width: 95%;
    margin: 3rem auto 0 auto; }

.popup_close {
  position: fixed;
  width: 90%;
  top: -1.4rem;
  right: -1.5rem;
  z-index: 12; }
  @media screen and (max-width: 767px) {
    .popup_close {
      top: 0.5em;
      right: 0.5em; } }
  .popup_close p {
    padding: 0;
    text-align: right; }
  .popup_close span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    background: #0090da;
    border-radius: 50%;
    color: #fff;
    font-size: 170%;
    font-weight: 700;
    line-height: 1;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      .popup_close span {
        font-size: 190%; } }