body {
  margin: 0;
}

.hs-top {
  margin: 0 0 3rem;
  background: url(../img-soccer/img-header.jpg) no-repeat center center;
  background-size: cover;
  /*width:100%;*/
  max-width: 100%;
  height: 500px;
  border-top: 10px solid #F00;
}
@media (max-width: 1024px) {
  .hs-top {
    height: 300px;
  }
}
@media (max-width: 678px) {
  .hs-top {
    height: 200px;
  }
}
.hs-top h1 {
  padding-top: 1rem;
  text-align: center;
  font-size: 5rem;
  line-height: 7rem;
}
@media (max-width: 1024px) {
  .hs-top h1 {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media (max-width: 678px) {
  .hs-top h1 {
    font-size: 1.8rem;
    line-height: 2rem;
  }
}
.hs-top h1 a {
  text-decoration: none;
  color: #FFF;
}
.hs-top h1 span {
  font-size: 2rem;
  line-height: 2rem;
}
@media (max-width: 1024px) {
  .hs-top h1 span {
    font-size: 1rem;
    line-height: 1rem;
  }
}

.hs-page {
  margin: 0;
  padding: 0.5rem;
  text-align: left;
  background-color: #F00;
}
@media (max-width: 678px) {
  .hs-page {
    margin: 0 0 1rem;
  }
}
.hs-page h1 {
  font-size: 2rem;
  line-height: 2rem;
}
.hs-page h1 a {
  color: #FFF;
  text-decoration: none;
}
.hs-page h1 span {
  font-size: 1rem;
}

.ms-top {
  width: 100%;
  padding: 0 1rem;
  text-align: center;
}
.ms-top h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 678px) {
  .ms-top h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
.ms-top p {
  line-height: 2rem;
  margin-bottom: 2rem;
}

.ms-page {
  width: 100%;
  padding: 0 1rem;
}
.ms-page h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  border-bottom: 3px double #F00;
  text-align: center;
}

.f-box {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  list-style: none;
  margin-bottom: 2rem;
}
@media (max-width: 678px) {
  .f-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.f-box li {
  min-width: 320px;
  margin: 1rem;
}
@media (max-width: 1024px) {
  .f-box li {
    min-width: 30%;
  }
}
@media (max-width: 678px) {
  .f-box li {
    width: 100%;
  }
}
.f-box li a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  background-color: #00a1e9;
  border: 1px solid #CCC;
  padding: 2rem 1rem;
  color: #FFF;
}
.f-box li a:hover {
  background-color: rgba(0, 161, 233, 0.5);
}

.f-area {
  background-color: #F00;
  color: #FFF;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 0.8rem;
}
.f-area a {
  /*text-decoration: none;
  position: relative;*/
  color: #FFF;
  /*&::after {
      position: absolute;
      right:0;
      content:'';
      width:100%;
      height: 1px;
      bottom:3px;
      background: #FFF;
      transition: 0.5s;
      @media (max-width: 678px)  {
          bottom:0;
      }
  }
  &:hover::after {
      width:0;
  }*/
}
.f-area a:hover {
  text-decoration: none;
}

.h-menu {
  list-style: none;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 100%;
}
@media (max-width: 678px) {
  .h-menu {
    justify-content: center;
    flex-wrap: wrap;
    /*margin-left: -30px;*/
  }
}
.h-menu li {
  margin: 0.5rem 0.5rem 0;
}
@media (max-width: 678px) {
  .h-menu li {
    white-space: pre;
  }
}
.h-menu li a {
  color: #FFF;
  font-size: 0.8rem;
  /*text-decoration: none;*/
  position: relative;
  /*&::after {
      position: absolute;
      right:0;
      content:'';
      width:100%;
      height: 1px;
      bottom:3px;
      background: #FFF;
      transition: 0.5s;
      @media (max-width: 678px)  {
          bottom:0;
      }
  }
  &:hover::after {
      width:0;
  }*/
}
.h-menu li a:hover {
  text-decoration: none;
}

.d-box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  /*margin-bottom: 2rem;*/
}
@media (max-width: 1024px) {
  .d-box {
    flex-direction: column;
    justify-content: center;
  }
}
.d-box article {
  max-width: 800px;
  margin: 0 auto 2rem;
  border: 1px solid #CCC;
}
@media (max-width: 678px) {
  .d-box article {
    max-width: 100%;
    margin: 0 0 2rem;
  }
}
.d-box article h3 {
  background-color: #00a1e9;
  color: #FFF;
  text-align: center;
  font-size: 1.5rem;
}
.d-box article table {
  margin: 1rem;
  font-size: 1rem;
  border-collapse: collapse;
  width: calc(100% - 2rem);
}
.d-box article table tr th {
  text-align: left;
  border-bottom: 1px solid #CCC;
  padding: 5px;
  width: 30%;
}
.d-box article table tr td {
  text-align: left;
  border-bottom: 1px solid #CCC;
  padding: 5px;
  width: 70%;
}

.kiji {
  margin: 0 auto;
  text-align: left;
  width: 80%;
}
@media (max-width: 678px) {
  .kiji {
    margin: 0 auto;
    text-align: left;
    width: 100%;
  }
}
.kiji h3 {
  font-size: 1.5rem;
  margin: 2rem 0 0.5rem;
}
.kiji h4 {
  font-size: 1.2rem;
  margin: 1rem 0 0.5rem;
  padding-left: 5px;
  border-left: 10px solid #00a1e9;
}
.kiji p {
  line-height: 2rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.kiji ul {
  margin-left: 2rem;
}
.kiji ul li {
  line-height: 2rem;
}
@media (max-width: 678px) {
  .kiji ul li {
    line-height: 1rem;
  }
}
.kiji hr {
  border: 1px solid #CCC;
  margin: 1rem 0;
}
.kiji figure {
  margin-bottom: 2rem;
}

.kiji-list {
  list-style: none;
  margin-bottom: 2rem;
  text-align: center;
}
.kiji-list li {
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  font-size: 1.8rem;
}
@media (max-width: 678px) {
  .kiji-list li {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 0;
    margin-bottom: 1rem;
  }
}
.kiji-list li span {
  font-size: 1rem;
}
.kiji-list li a {
  color: #000;
  /*text-decoration: none;
  position: relative;*/
  font-weight: bold;
  margin-bottom: 1rem;
  /*&::after {
      position: absolute;
      right:0;
      content:'';
      width:100%;
      height: 1px;
      bottom:10px;
      background: #000;
      transition: 0.5s;
      @media (max-width: 678px)  {
          bottom:0;
      }
  }
  &:hover::after {
      width:0;
  }*/
}
.kiji-list li a:hover {
  color: rgba(0, 0, 0, 0.5);
}

.comment {
  background-color: rgba(0, 161, 233, 0.5);
  padding: 2rem;
  margin: 2rem;
  text-align: center;
}
@media (max-width: 678px) {
  .comment {
    padding: 1rem;
    margin: 0 0 1rem 0;
  }
}

.page_top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /*color:#fff;
  font-size:20px;
  text-decoration:none;
  background:#2EA2CC;
  border: 3px solid #ffffff;
  text-align: center;
  line-height: 50px;*/
}

.pan {
  margin: 0 0 3rem;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  list-style: none;
}
@media (max-width: 678px) {
  .pan {
    display: none;
  }
}
.pan li {
  font-size: 0.8rem;
}
.pan li::after {
  content: ">";
}
.pan li:last-child::after {
  content: none;
}

.term {
  margin-bottom: 1rem;
}
.term p {
  font-size: 1rem;
  text-align: center;
}

.codetext a {
  color: #00F !important;
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 0 !important;
}
.codetext a:hover {
  color: rgba(0, 0, 255, 0.5) !important;
}/*# sourceMappingURL=soccer.css.map */