#admin-anglers {
  padding-top: 120px;
  section.box-input {
    display: flex;
    background-color: var(--color-bg-main);
    width: 100%;
    padding: 20px 0;
    justify-content: flex-end;
    div.wrapper-search {
      display: flex;
      align-items: center;
      margin-right: 10px;
      position: relative;
      a {
        cursor: pointer;
      }
      a.icon-search {
        position: absolute;
        left: 10px;
      }
      img {
        width: 35px;
        height: 35px;
      }
      input {
        border: solid var(--color-theme) 2px;
        border-radius: 30px;
        width: 350px;
        height: 45px;
        padding-left: 45px;
      }
    }
  }
  section.box-angler {
    div.table {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      div.cell {
        display: flex;
        align-items: center;
        border-radius: 5px;
        background-color: var(--color-bg-feature);
        padding: 10px;
        img {
          border-radius: 5px;
          width: 100px;
          height: 100px;
          margin-right: 10px;
        }
      }
      a {
        cursor: pointer;
      }
    }
  }
  section.is-show {
    visibility: visible !important;
    opacity: 1 !important;
  }
  section.angler-form-modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    div.modal-bg {
      width: 100%;
      height: 100%;
      background-color: rgba(30, 30, 30, 0.9);
    }
    div.wrapper-angler-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px 30px;
      background-color: var(--color-bg-feature);
      border-radius: 10px;
      div.header {
        display: flex;
        justify-content: space-between;
        h2 {
          margin-bottom: 20px;
        }
        a {
          cursor: pointer;
        }
      }
      div.wrapper-form-photo {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        position: relative;
        img.angler {
          width: 300px;
          height: 300px;
          border-radius: 5px;
          object-fit: cover;
        }
        a.camera {
          background-color: #ffffff;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 10px;
          right: 10px;
          margin-left: -4%;
          cursor: pointer;
          img.camera {
            width: 40px;
            height: 40px;
          }
        }
        input.file {
          display: none;
        }
      }
      div.wrapper-form-input {
        padding: 10px 0px;
        label {
          display: block;
          font-weight: bold;
          margin-bottom: 10px;
        }
        input {
          border: solid var(--color-input) 2px;
          background-color: var(--color-bg-main);
          border-radius: 5px;
          padding-left: 10px;
          padding-right: 10px;
          height: 45px;
          width: 100%;
        }
      }
      div.footer {
        display: flex;
        justify-content: flex-end;
        padding-top: 20px;
        a {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 5px;
          background-color: var(--color-button);
          width: 100px;
          height: 45px;
          color: #ffffff;
          cursor: pointer;
          margin-left: 10px;
        }
        a:hover {
          background-color: var(--color-theme);
        }
      }
    }
  }
}
#admin-notifications {
  padding-top: 120px;
  div.wrapper-select {
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: var(--color-bg-main);
    width: 100%;
    padding: 20px 0;
    img {
      position: relative;
      left: 240px;
      height: 20px;
      margin-left: -20px;
      cursor: pointer;
    }
    label {
      font-weight: bold;
      margin-right: 10px;
    }
    select {
      border: solid var(--color-theme) 2px;
      border-radius: 5px;
      padding: 10px;
      width: 200px;
      height: 45px;
    }
    a.button {
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      background-color: var(--color-button);
      width: 150px;
      height: 45px;
      color: #ffffff;
      cursor: pointer;
    }
    a.button:hover {
      background-color: var(--color-theme);
    }
  }
  div.table {
    div.row {
      display: grid;
      align-items: center;
      grid-template-columns: 20% 60% 20%;
      padding: 10px 0px;
      div.cell {
        input {
          border: solid var(--color-input) 2px;
          border-radius: 5px;
          padding: 10px;
          height: 45px;
          width: 100%;
        }
        img {
          cursor: pointer;
        }
      }
      div.delete {
        text-align: right;
      }
    }
  }
}
#admin-podia {
  padding-top: 120px;
  section.box-input {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--color-bg-main);
    width: 100%;
    padding: 20px 0;
    label {
      font-weight: bold;
      margin-right: 10px;
    }
    div.wrapper-select {
      display: flex;
      align-items: center;
      margin-right: 10px;
      position: relative;
      img {
        position: absolute;
        left: 150px;
        height: 20px;
        cursor: pointer;
      }
      select {
        border: solid var(--color-theme) 2px;
        border-radius: 5px;
        padding: 10px;
        width: 180px;
        height: 45px;
      }
    }
    a.button-submit {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      background-color: var(--color-button);
      width: 150px;
      height: 45px;
      color: #ffffff;
      cursor: pointer;
    }
    a.button-submit:hover {
      background-color: var(--color-theme);
    }
  }
  section.box-podia {
    div.wrapper-result {
      display: flex;
      padding-bottom: 30px;
      div.wrapper-photo {
        position: relative;
        img {
          width: 300px;
          height: 300px;
          border-radius: 5px;
          object-fit: cover;
        }
        input {
          display: none;
        }
        a.camera {
          background-color: var(--color-bg-main);
          border-radius: 50%;
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 10px;
          right: 10px;
          cursor: pointer;
          img {
            width: 40px;
            height: 40px;
          }
        }
      }
      div.wrapper-description {
        padding-left: 20px;
        div.row {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 5px 0;
          h4 {
            font-weight: bold;
            width: 250px;
          }
          h4.name {
            font-size: 2rem;
          }
          input {
            border: solid var(--color-input) 2px;
            border-radius: 5px;
            padding: 10px;
            width: 500px;
            height: 45px;
          }
        }
        div.name {
          padding-bottom: 30px;
        }
      }
    }
  }
}
#admin-results {
  padding-top: 120px;
  section.box-input {
    display: flex;
    background-color: var(--color-bg-main);
    width: 100%;
    padding: 20px 0;
    justify-content: flex-end;
    div.wrapper-search {
      display: flex;
      align-items: center;
      margin-right: 10px;
      position: relative;
      a {
        cursor: pointer;
      }
      a.icon-search {
        position: absolute;
        left: 10px;
      }
      img {
        width: 35px;
        height: 35px;
      }
      img.icon-search {
        border-radius: 5px;
      }
      input {
        border: solid var(--color-theme) 2px;
        border-radius: 30px;
        width: 350px;
        height: 45px;
        padding-left: 45px;
      }
      ul {
        border: solid var(--color-line) 1px;
        border-radius: 5px;
        background-color: var(--color-bg-main);
        box-shadow: 0px 5px 15px 0px var(--color-shadow);
        position: absolute;
        left: 35px;
        top: 50px;
        list-style: none;
        width: 300px;
        li {
          cursor: pointer;
          padding: 5px;
        }
        li:hover,
        li:focus {
          background-color: var(--color-bg-active);
        }
      }
    }
    div.wrapper-select {
      display: flex;
      align-items: center;
      margin-right: 10px;
      label {
        font-weight: bold;
        padding-right: 10px;
      }
      div.select-box {
        display: flex;
        align-items: center;
        position: relative;
        img {
          position: absolute;
          left: 150px;
          height: 20px;
          cursor: pointer;
        }
        select {
          border: solid var(--color-theme) 2px;
          border-radius: 5px;
          padding: 10px;
          width: 180px;
          height: 45px;
          cursor: pointer;
        }
      }
    }
    button.button-submit {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      background-color: var(--color-button);
      width: 150px;
      height: 45px;
      color: #ffffff;
    }
    button.button-submit:hover {
      background-color: var(--color-theme);
    }
  }
  section.box-result {
    div.table {
      div.thead {
        font-weight: bold;
      }
      div.row {
        display: grid;
        grid-template-columns: 10% 20% 25% 25% 10% 10%;
        border-bottom: solid var(--color-line) 1px;
        align-items: center;
        padding: 10px 0px;
        input.text-input {
          border: solid var(--color-input) 2px;
          border-radius: 5px;
          padding-left: 10px;
          padding-right: 10px;
          height: 45px;
          width: 100%;
          text-align: right;
        }
        div.place {
          text-align: center;
        }
        div.fish {
          padding: 0px 5px;
        }
        div.weight {
          padding: 0px 5px;
        }
        div.point {
          text-align: right;
          padding-right: 20px;
        }
        div.delete {
          text-align: center;
        }
      }
    }
  }
  /* モーダル共通 */
  .modal-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.9);
  }
  .is-show {
    /* モーダル表示用クラス */
    visibility: visible !important;
    opacity: 1 !important;
  }
  .close-modal {
    cursor: pointer;
  }
  /* モーダル共通 */
  /* 選手検索モーダル */
  section.angler-search-modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    div.wrapper-angler-search {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      max-width: 500px;
      padding: 30px;
      background-color: var(--color-bg-feature);
      border-radius: 10px;
      div.header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
      }
      a {
        cursor: pointer;
      }
      div.table {
        div.thead {
          font-weight: bold;
        }
        div.row {
          display: grid;
          grid-template-columns: 70% 30%;
          border-bottom: solid var(--color-line) 1px;
          align-items: center;
          padding: 10px 0px;
          font-size: 1.25rem;
          a {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            background-color: var(--color-button);
            width: 100px;
            height: 45px;
            color: #ffffff;
          }
          a:hover {
            background-color: var(--color-theme);
          }
        }
      }
    }
  }
  /* 選手検索モーダル */
  /* 選手登録モーダル */
  section.angler-form-modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    div.wrapper-angler-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      max-width: 500px;
      padding: 20px 30px;
      background-color: var(--color-bg-feature);
      border-radius: 10px;
      div.header {
        h2 {
          margin-bottom: 20px;
        }
      }
      div.wrapper-form-input {
        margin-bottom: 20px;
        label {
          display: block;
          font-weight: bold;
          margin-bottom: 10px;
        }
        input {
          border: solid var(--color-input) 2px;
          background-color: var(--color-bg-main);
          border-radius: 5px;
          padding-left: 10px;
          padding-right: 10px;
          height: 45px;
          width: 100%;
        }
      }
      div.footer {
        display: flex;
        justify-content: flex-end;
        button.button-submit {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 5px;
          background-color: var(--color-button);
          width: 100px;
          height: 45px;
          color: #ffffff;
        }
        button.button-submit:hover {
          background-color: var(--color-theme);
        }
      }
    }
  }
  /* 選手登録モーダル */
}
#admin-schedule {
  padding-top: 120px;
  section.box-input {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--color-bg-main);
    padding: 20px 0;
    label {
      font-weight: bold;
      margin-right: 10px;
    }
    div.wrapper-select {
      display: flex;
      align-items: center;
      position: relative;
      img {
        position: absolute;
        left: 170px;
        height: 20px;
        cursor: pointer;
      }
      select {
        border: solid var(--color-theme) 2px;
        border-radius: 5px;
        padding: 10px;
        width: 200px;
        height: 45px;
      }
    }
    a.button {
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      background-color: var(--color-button);
      width: 150px;
      height: 45px;
      color: #ffffff;
      cursor: pointer;
    }
    a.button:hover {
      background-color: var(--color-theme);
    }
  }
  section.box-schedule {
    div.table {
      div.row {
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 10% 10%;
        border-bottom: solid var(--color-line) 1px;
        align-items: center;
        padding: 10px 0px;
        div.cell {
          display: flex;
          align-items: center;
          position: relative;
          img.arrow-down {
            position: absolute;
            left: 150px;
            height: 20px;
            cursor: pointer;
          }
        }
        input {
          border: solid var(--color-input) 2px;
          border-radius: 5px;
          padding-left: 10px;
          padding-right: 10px;
          height: 45px;
        }
        select {
          border: solid var(--color-input) 2px;
          border-radius: 5px;
          padding: 10px;
          width: 180px;
          height: 45px;
          cursor: pointer;
        }
        div.delete {
          justify-self: flex-end;
        }
      }
    }
  }
}
#admin-sign-in {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  .button-sign-in {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: var(--color-button);
    border: 0px;
    width: 150px;
    height: 45px;
    color: #ffffff;
  }
  .button-sign-in:hover {
    background-color: var(--color-theme);
  }
  input {
    border: solid var(--color-input) 2px;
    border-radius: 5px;
    padding: 10px;
    width: 300px;
    height: 45px;
  }
}
#anglers {
  padding-top: 150px;
  section.head {
    div.wrapper-search {
      display: flex;
      justify-content: flex-end;
      div {
        position: relative;
        display: flex;
        align-items: center;
        a {
          position: absolute;
          left: 10px;
          cursor: pointer;
        }
        img {
          border-radius: 5px;
          width: 35px;
          height: 35px;
        }
        input {
          border: solid var(--color-theme) 2px;
          border-radius: 30px;
          width: 350px;
          height: 45px;
          padding: 10px 10px 10px 45px;
        }
      }
    }
  }
  section.box-angler {
    div.table {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      div.cell {
        display: flex;
        align-items: center;
        border-radius: 5px;
        background-color: var(--color-bg-feature);
        padding: 10px;
        img {
          border-radius: 5px;
          width: 100px;
          height: 100px;
          object-fit: cover;
          margin-right: 10px;
        }
      }
    }
  }
}
@media (max-width: 500px) {
  #anglers {
    padding-top: 140px;
    section.head {
      h1 {
        margin-bottom: 10px;
      }
      div.wrapper-search {
        justify-content: center;
      }
    }
    section.box-angler {
      div.table {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        div.cell {
          display: block;
          width: 170px;
          text-align: center;
          img {
            margin-right: 0px;
            margin-bottom: 10px;
          }
          h2 {
            font-size: 1rem;
          }
        }
      }
    }
  }
}
#anglers-show {
  padding-top: 110px;
  section.box-angler {
    padding-top: 70px;
    padding-bottom: 30px;
    div.wrapper-angler {
      display: flex;
      input {
        display: none;
      }
      div.wrapper-photo {
        position: relative;
        img {
          width: 300px;
          border-radius: 5px;
          object-fit: cover;
          box-shadow: 0px 5px 15px 0px var(--color-shadow);
        }
        a {
          position: absolute;
          background-color: var(--color-bg-main);
          border-radius: 50%;
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          top: 10px;
          right: 10px;
          cursor: pointer;
          img {
            width: 40px;
            height: 40px;
            box-shadow: 0px 0px 0px;
          }
        }
      }
      div.wrapper-name {
        padding-top: 30px;
        padding-left: 30px;
        h1 {
          font-size: 3rem;
          margin-bottom: 20px;
        }
        img {
          height: 50px;
          width: 50px;
          margin-bottom: 20px;
        }
      }
    }
  }
  section.box-career {
    div.row {
      border-bottom: solid var(--color-line) 1px;
      display: flex;
      justify-content: space-between;
      padding: 20px;
    }
  }
}
@media (max-width: 500px) {
  #anglers-show {
    padding-top: 60px;
    section.box-angler {
      div.wrapper-angler {
        display: block;
        div.wrapper-photo {
          text-align: center;
          img {
            width: 100%;
          }
        }
        div.wrapper-name {
          padding-top: 10px;
          padding-left: 0px;
          h1 {
            font-size: 1.25rem;
            margin-bottom: 10px;
          }
          img {
            height: 25px;
            width: 25px;
            margin-bottom: 10px;
          }
        }
      }
    }
    section.box-career {
      div.row {
        h3 {
          font-size: 1rem;
        }
      }
    }
  }
}
:root {
  --color-theme: #062948;
  --color-bg-main: #ffffff;
  --color-bg-feature: #efefef;
  --color-bg-active: #d6d6d6;
  --color-bg-selected: #f9ba5e;
  --color-headline: #2976cf;
  --color-line: #d6d6d6;
  --color-alert: #ff99cc;
  --color-notice: #66ccff;
  --color-shadow: rgba(0, 0, 0, 0.35);
  --color-button: #2976cf;
  --color-input: #2976cf;
}
html {
  font-size: 100%;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
  background-color: var(--color-bg-main);
  color: var(--color-theme);
}
a {
  text-decoration: none;
  color: var(--color-theme);
}
img {
  max-width: 100%;
}
h2 {
  font-size: 1.25rem;
  color: var(--color-theme);
}
h3 {
  font-size: 1.25rem;
  color: var(--color-theme);
}
h4 {
  font-size: 1.25rem;
  color: var(--color-theme);
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background-color: var(--color-bg-main);
  z-index: 999;
  border-bottom: solid var(--color-theme) 2px;
}
footer {
  background: var(--color-theme);
  color: #ffffff;
  padding: 20px 5px 30px;
  text-align: center;
}
.wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 4%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
}
.wrapper-header {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 15px 4% 15px;
  font-family: "Noto Sans JP", sans-serif;
  align-items: flex-end;
}
.logo {
  width: 370px;
}
.main-nav {
  display: flex;
  list-style: none;
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.main-nav li {
  margin-left: 55px;
}
.main-nav a {
  font-weight: bold;
  color: var(--color-theme);
}
.main-nav a:hover {
  color: var(--color-button);
}
.foot-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.foot-nav li {
  margin-left: 55px;
}
.foot-nav a {
  color: var(--color-bg-main);
}
.foot-nav a:hover {
  color: var(--color-button);
}
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  font-size: 1.25rem;
  margin-bottom: 20px;
  align-items: center;
}
.pagination {
  margin-left: 55px;
}
.pagination li {
  margin-left: 30px;
}
.pagination a:hover {
  color: var(--color-button);
}
.current-page {
  border-radius: 50%;
  background-color: #000000;
  width: 30px;
  height: 30px;
  text-align: center;
  padding-top: 3px;
}
h2.subhead,
h3.subhead {
  font-size: 1.7rem;
  width: 300px;
  border-bottom: 3px solid var(--color-headline);
  line-height: 1.7;
  margin-bottom: 30px;
}
h1.head {
  font-size: 3rem;
}
section.head {
  height: 150px;
}
div.head {
  height: 150px;
}
div.box-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  opacity: 0.8;
  visibility: hidden;
}
.content-margin {
  margin-bottom: 50px;
}
.pagination {
  .page {
    margin: 0px 10px;
  }
  .prev {
    margin: 0px 10px;
  }
  .first {
    margin: 0px 10px;
  }
  .next {
    margin: 0px 10px;
  }
  .last {
    margin: 0px 10px;
  }
}
.loading {
  opacity: 0.8 !important;
  visibility: visible !important;
}
.flash-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert {
  background: var(--color-alert);
}
.notice {
  background: var(--color-notice);
}
.fadeout {
  animation: fadeOut 8s;
  animation-fill-mode: both;
}
.spinner {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-left-color: #000000;
  animation: spinner-rotation 1s linear infinite;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 500px) {
  header {
    height: 120px;
  }
  section.head {
    height: auto;
    padding-bottom: 20px;
  }
  div.head {
    height: auto;
    padding-bottom: 20px;
  }
  h1.head {
    font-size: 1.25rem;
  }
  h2.subhead,
  h3.subhead {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .wrapper {
    font-size: 1rem;
  }
  .wrapper-header {
    align-items: start;
  }
  .logo {
    width: 200px;
  }
  .main-nav {
    display: block;
    font-size: 1rem;
  }
  .main-nav li {
    margin-left: 0px;
    margin-bottom: 2px;
  }
  .foot-nav {
    display: block;
    font-size: 1rem;
  }
  .foot-nav li {
    margin-left: 0px;
    margin-bottom: 2px;
  }
  .content-margin {
    margin-bottom: 30px;
  }
  .pagination {
    font-size: 1rem;
  }
}
h3.subhead {
  margin-bottom: 50px;
}
#rankings {
  padding-top: 150px;
  section.box-ranking {
    div.table {
      div.row {
        display: grid;
        grid-template-columns: 10% 70% 20%;
        border-bottom: solid var(--color-line) 1px;
        align-items: center;
        padding: 10px 0px;
        div.place {
          text-align: center;
        }
        div.angler {
          display: flex;
          align-items: center;
          img {
            border-radius: 5px;
            width: 80px;
            height: 80px;
            margin-right: 50px;
            object-fit: cover;
            box-shadow: 0px 5px 15px 0px var(--color-shadow);
          }
          a {
            font-weight: bold;
          }
          a:hover {
            font-weight: lighter;
            text-decoration: underline;
          }
        }
        div.count {
          text-align: right;
          padding-right: 20px;
        }
      }
    }
  }
}
@media (max-width: 500px) {
  #rankings {
    padding-top: 140px;
    section.box-ranking {
      h3.subhead {
        margin-bottom: 20px;
      }
      div.table {
        div.row {
          grid-template-columns: 10% 60% 30%;
          div.angler {
            img {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
#regulation {
  padding-top: 150px;
}
#regulation ul li {
  list-style-type: square;
  margin-left: 20px;
  line-height: 1.7;
}
@media (max-width: 500px) {
  #regulation {
    padding-top: 140px;
  }
}
#results {
  padding-top: 150px;
  section.head {
    h1 {
      margin-bottom: 10px;
    }
    div.data {
      p {
        font-size: 1.5rem;
        line-height: 1.5;
      }
    }
  }
  section.box-podium {
    div.cell {
      padding-bottom: 20px;
    }
    div.description {
      display: flex;
      img {
        width: 400px;
        border-radius: 5px;
        object-fit: cover;
      }
      div.table {
        padding-left: 20px;
        width: 100%;
        div.row {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          padding-bottom: 20px;
          h3.name {
            font-size: 2rem;
            a {
              font-weight: bold;
            }
            a:hover {
              font-weight: lighter;
              text-decoration: underline;
            }
          }
        }
        div.name {
          padding-bottom: 80px;
        }
      }
    }
  }
  section.box-result {
    div.table {
      div.row {
        display: grid;
        grid-template-columns: 10% 60% 10% 10% 10%;
        border-top: solid var(--color-bg-active) 1px;
        padding: 10px 0px;
        a {
          font-weight: bold;
        }
        a:hover {
          text-decoration: underline;
          font-weight: lighter;
        }
        div.place {
          text-align: center;
        }
        div.fish {
          text-align: right;
        }
        div.weight {
          text-align: right;
        }
        div.point {
          text-align: right;
          padding-right: 20px;
        }
      }
      div.row:nth-child(odd) {
        background-color: var(--color-bg-feature);
      }
      div.row:nth-last-child(1) {
        border-bottom: solid var(--color-bg-active) 1px;
      }
    }
  }
}
@media (max-width: 500px) {
  #results {
    section.content-margin {
      margin: 0px;
    }
    section.head {
      div.data {
        p {
          font-size: 1rem;
        }
      }
    }
    section.box-podium {
      div.cell {
        div.description {
          display: block;
          img {
            height: 400px;
            border-radius: 5px;
            margin-bottom: 10px;
          }
          div.table {
            padding-left: 0px;
            div.row {
              h3 {
                font-size: 1rem;
              }
              padding-bottom: 10px;
            }
            div.name {
              padding-bottom: 20px;
            }
          }
        }
      }
    }
    section.box-result {
      div.table {
        div.row {
          grid-template-columns: 15% 25% 20% 20% 20%;
        }
      }
    }
  }
}
#standings {
  padding-top: 150px;
  .wrapper-select {
    display: flex;
    justify-content: flex-end;
    div {
      position: relative;
      display: flex;
      align-items: center;
    }
    a {
      cursor: pointer;
      position: absolute;
      left: 170px;
    }
    label {
      font-weight: bold;
      margin-right: 10px;
    }
    select {
      border: solid var(--color-theme) 2px;
      border-radius: 5px;
      padding: 10px;
      width: 150px;
      cursor: pointer;
    }
    img {
      height: 20px;
    }
  }
  section.box-result {
    div.table {
      div.row {
        display: grid;
        grid-template-columns: 10% 70% 20%;
        border-bottom: solid var(--color-line) 1px;
        align-items: center;
        padding: 20px 0px;
        div.place {
          text-align: center;
        }
        div.point {
          text-align: right;
          padding-right: 20px;
        }
      }
      div.thead {
        font-weight: bold;
      }
      div.tbody {
        div.angler {
          display: flex;
          align-items: center;
          img.arrow {
            width: 15px;
            height: 15px;
            cursor: pointer;
            margin-left: 10px;
          }
          button {
            font-weight: bold;
            color: var(--color-theme);
          }
          button:hover {
            font-weight: lighter;
            text-decoration: underline;
          }
        }
      }
      div.box-result {
        display: none;
        opacity: 0;
        grid-template-columns: 30% 70%;
        background-color: var(--color-bg-feature);
        font-size: 1rem;
        div.wrapper-angler {
          padding: 20px 0px;
          text-align: center;
          img {
            border-radius: 5px;
            width: 200px;
            height: 200px;
            object-fit: cover;
            margin-bottom: 10px;
          }
          div.wrapper-button {
            display: flex;
            justify-content: center;
            a {
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 5px;
              background-color: var(--color-button);
              width: 150px;
              height: 45px;
              color: #ffffff;
              cursor: pointer;
            }
            a:hover {
              background-color: var(--color-theme);
            }
          }
        }
        div.wrapper-result {
          padding: 0px 20px 0px 0px;
          div.row {
            display: grid;
            grid-template-columns: 20% 20% 20% 20% 20%;
            border-bottom: solid var(--color-line) 1px;
            align-items: center;
            padding: 20px 0px;
            div.center {
              text-align: center;
            }
            div.right {
              text-align: right;
            }
          }
        }
      }
      .selected {
        background-color: var(--color-bg-selected) !important;
      }
      .is-show {
        display: grid !important;
        opacity: 1 !important;
      }
      .is-rotate {
        transform: rotate(180deg);
      }
    }
  }
}
@media (max-width: 500px) {
  #standings {
    padding-top: 140px;
    section.head {
      h1 {
        margin-bottom: 10px;
      }
      div.wrapper-select {
        a {
          left: 165px;
        }
      }
    }
    section.box-result {
      div.table {
        div.row {
          grid-template-columns: 10% 60% 30%;
        }
        div.box-result {
          grid-template-columns: 100% 0%;
          font-size: 0.9rem;
          div.wrapper-angler {
            display: none;
          }
          div.wrapper-result {
            padding: 0px 10px;
            div.row {
              padding: 10px 0px;
            }
          }
        }
      }
    }
  }
}
#top {
  div.key_visual {
    background-image: url(/../images/pages/top/key_visual.png);
    background-size: cover;
    background-position: center top;
    min-height: 100vh;
    font-family: "IM Fell English SC", serif;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h1 {
      text-align: center;
      font-size: 6.5rem;
      font-weight: normal;
    }
    p {
      text-align: center;
      font-size: 3rem;
    }
  }
  article.box-about-nissoucup {
    p {
      line-height: 1.5;
    }
  }
  article.box-news {
    ul li {
      list-style-type: square;
      margin-left: 20px;
      line-height: 1.5;
    }
  }
  article.box-schedule {
    div.table {
      div.thead {
        font-weight: bold;
      }
      div.row {
        display: grid;
        grid-template-columns: 35% 65%;
        border-bottom: solid var(--color-line) 1px;
        padding: 10px 0px 10px 10px;
        div.data {
          display: grid;
          grid-template-columns: 30% 25% 25% 20%;
        }
      }
    }
  }
  article.box-result {
    padding-bottom: 30px;
    div.table {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      section.cell {
        border-radius: 5px;
        box-shadow: 0px 5px 15px 0px var(--color-shadow);
        background-color: var(--color-bg-main);
        h3 {
          padding: 10px;
          font-size: 1.5rem;
        }
        p {
          padding: 0px 5px 10px 10px;
        }
        img {
          width: 100%;
          height: 300px;
          object-fit: cover;
        }
      }
    }
  }
}
@media (max-width: 500px) {
  #top {
    div.key_visual {
      h1 {
        font-size: 3rem;
      }
      p {
        font-size: 2rem;
      }
    }
    article.box-result {
      div.table {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        section.cell {
          h3 {
            font-size: 1rem;
          }
          img {
            height: 180px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
#tournaments {
  padding-top: 150px;
  section.box-result {
    padding-bottom: 20px;
    div.table {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      section.cell {
        border-radius: 5px;
        box-shadow: 0px 5px 15px 0px var(--color-shadow);
        background-color: var(--color-bg-main);
        h3 {
          padding: 10px;
          font-size: 1.5rem;
        }
        p {
          padding: 0px 5px 10px 10px;
        }
        img {
          width: 100%;
          height: 300px;
          object-fit: cover;
        }
      }
    }
  }
}
@media (max-width: 500px) {
  #tournaments {
    padding-top: 140px;
    section.box-result {
      div.table {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        section.cell {
          h3 {
            font-size: 1rem;
          }
          img {
            height: 180px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */