@charset "UTF-8";
/*
Theme Name: Soccerlog
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');


:root {
  --main-color: #222;
  --bg-color: #F2F2F2;
  --thin-color: #eee;
}




/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


html, body {
  font-size: 15px;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  min-height: 100vh;
  color: var(--main-color);
  background-color: var(--bg-color);
}

@media (max-width: 992px) {
  html, body {
    font-size: 13px;
  }
}

img {
  max-width: 100%;
}

a {
  color: var(--vary-color);
}

a:hover {
  color: var(--main-color);
}


.en {
  font-family: 'Zen Maru Gothic', sans-serif;
}



/* BOOTSTRAP
-------------------------------------------------- */

.btn {
  background: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 1.25rem;
  margin: 1rem 0;
  padding: .5rem 2rem;
}


/* ICON
-------------------------------------------------- */

.fa-bug       { color: #E3B505; }
.fa-magnet    { color: #08A4BD; }
.fa-book      { color: #138A36; }
.fa-black-tie { color: #531253; }
.fa-ribbon    { color: #DB504A; }



/* HEADER
-------------------------------------------------- */

.header {
}

.navbar {
  background: #fff;
  border-bottom: solid 1px var(--main-color);
  padding: 0;
  height: 100px;
  display: flex;
  align-items: center!important;
}

.navbar a {
}

.navbar-brand {
  max-width: 160px;
  margin-left: 1.5rem;
}

@media (max-width: 992px) {
  .navbar {
    height: 65px;
  }
  .navbar-brand {
    max-width:  110px;
  }
  .description {
    display: none;
  }
}

.navbar-toggler-icon {
}

.bars {
  font-size: 2rem;
  margin: 0 1.5rem;
}

.bars i {
  color: var(--main-color);
}

.header p {
  text-align: right;
  font-size: .85em;
  padding: 0 1em;
}

.navbar-nav {
  background: #fff;
}

.navbar-nav .nav-link {
  padding: .75em 1.5em !important;
  color: var(--base-color) !important;
  font-weight: bold;
}

.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  background: var(--thin-color);
}

@media (min-width: 992px) {
  .navbar-nav .nav-link {
    border-top: solid 1px var(--main-color);
    border-left: solid 1px var(--main-color);
  }
  .navbar-nav .nav-link:focus,
  .navbar-nav .nav-link:hover {
    border-top: solid 1px var(--main-color);
    border-left: solid 1px var(--main-color);
  }
}

@media (max-width: 992px) {
  .navbar-nav {
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.2);
  }
}


@media (min-width: 992px) {
  .login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    text-decoration: none;
    width: 6em;
    background: var(--main-color);
    color: #fff !important;
  }
  .login i {
    font-size: 1.5em;
  }
}

@media (max-width: 992px) {
  .login {
    display: none;
  }
}


/* MAIN
-------------------------------------------------- */

main {
  margin-top: 140px;
  min-height: 800px;
  overflow: hidden;
  line-height: 1.75;
}

.main h1 {
  margin: 4rem auto;
  font-size: 2rem;
  text-align: center;
  border-bottom: solid 2px var(--main-color);
  padding-bottom: 1rem;
}

@media (max-width: 992px) {
  main {
    margin-top: 80px;
  }
  .main h1 {
    margin: 1rem auto;
    font-size: 1.5rem;
    text-align: left;
  }
}


.main h2 {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  margin: 2rem 0;
  line-height: 2.5rem;
}

@media (max-width: 992px) {
  .main h2 {
    font-size: 3rem;
  }
}

.main h2 small {
  font-size: 1.25rem;
  border-bottom: solid 3px var(--main-color);
}

.main h3 {
  font-size: 1.75rem;
  font-weight: bold;
  text-align: center;
  padding: 1.75rem;
  margin-bottom: 2rem;
  border: solid 1px var(--main-color);
}

.main h4 {
  font-size: 1.5rem;
  margin: 1em 0;
  border-left: solid 5px var(--main-color);
  padding-left: .75em;
  line-height: 1.75;
}

@media (max-width: 992px) {
  .main h4 {
    font-size: 1.2rem;
    margin: .5em 0;
  }
}


.main th {
  text-align: center;
}


/* FOOTER
-------------------------------------------------- */

.footer {
  padding: 3rem 0;
  background: var(--main-color);
  color: var(--thin-color);
  text-align: center;
  margin-top: 3rem;
}

.gototop {
  position: fixed;
  bottom: 50px;
  right: 50px;
}

.gototop a {
  text-decoration: none;
  display: block;
  text-align: center;
}

.gototop a:hover {
  text-decoration: none;
}

.gototop a i {
  color: #000;
  opacity: 80%;
  display: block;
}


/* MAIN
-------------------------------------------------- */





/* SINGLE
-------------------------------------------------- */

.single .container {
  max-width: 960px;
}




/* CONPETITION
-------------------------------------------------- */

.competition .container {
/*   max-width: 960px; */
}

.competition h1 {
  margin-bottom: .5rem;
}

.competition h3 {
  background: var(--main-color);
  background: url(images/slash.gif) repeat;
  border: none;
}

.competition h3 span {
  background: #fff;
}


/* SNS */

.sns {
  margin-bottom: 2rem;
}

.sns ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.sns ul li {
  display: inline-block;
}

.sns ul li a {
  padding: .25em .5em;
  font-size: 1.5rem;
}

.fa-twitter { color: #1d9bf0; }
.fa-facebook-square { color: #3b5998; }
.fa-line { color: #00be00; }


/* バナー */

.banner {
  margin: .5em 0;
}

.banner a,
.banner span {
  display: block;
  border: solid 1px #ccc;
}

.banner__text {
  text-decoration: none;
  text-align: center;
  background: #fff;
  color: var(--main-color);
  padding: .5rem 1rem;
  font-size: .85rem;
}

.banner a:hover {
  border: solid 1px var(--main-color);
}

/* タブ */

.nav-tabs {
  border-bottom: solid 1px var(--main-color);
}

.nav-link {
  color: var(--main-color);
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  margin-right: -1px;
  padding: 1rem 2rem;
}

.nav-link:focus,
.nav-link:hover {
  color: var(--main-color);
  border-color: transparent; 
  background: #fff;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: #fff;
  color: var(--main-color);
  border-radius: inherit;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border-top-color: var(--main-color);
  border-right-color: var(--main-color);
  border-bottom-color: #fff !important;
  border-left-color: var(--main-color);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: inherit;
}

.tab-content {
  background: #fff;
  min-height: 500px;
  border: solid 1px var(--main-color);
  border-top: none;
  padding: 1rem;
}

@media (max-width: 992px) {
  .nav-item {
    width: 50%;
  }
  .nav-link {
    width: 100%;
    padding: .5em;
  }
  .nav-tabs {
    padding-bottom: 10px;
  }
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: var(--main-color) !important;
  }
}

.googlemap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.googlemap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.accordion-item,
.accordion-item * {
  border-radius: 0 !important;
}

.accordion-item h4 {
  border: 0;
  padding: 0;
  margin: 1rem 0;
}

@media (max-width: 992px) {
  .accordion-item h4 {
    font-size: 1rem;
    margin: .25em 0;
  }
}


#team img {
  max-height: 300px;
}

.accordion-button:not(.collapsed) {
  color: inherit;
  background: var(--thin-color);
}

.accordion-button:focus {
  border-color: var(--base-color);
  box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}

.accordion-button .row {
  width: 90%;
}

#team .table-responsive th,
#team .table-responsive td {
  white-space: nowrap;
}

#team .table-bordered th.none {
  border-bottom-width: 2px;
}
#team .fixed01{
	position: sticky;
	left: 0;
}
#team .fixed01:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	border-width: 0 2px 0 1px;
}


#outline img {
  max-height: 300px;
}

@media (max-width: 992px) {
  #outline th,
  #outline td {
    display: block;
    text-align: center;
  }
  #outline td.text-left {
    text-align: left !important;
  }
}

#outline th {
  white-space: nowrap;
}

.competition-list a {
  margin-bottom: 1rem;
  display: block;
  background: #fff;
  padding: 1rem;
  border: solid 1px var(--main-color);
  text-decoration: none;
}

.competition-list a .live {
  border: solid 2px var(--main-color);
  padding: 0 1em;
  color: var(--main-color);
  font-size: .6em;
  margin-right: 1em;
  vertical-align: middle;
}

.competition-list a .badge {
  font-size: 1rem;
  vertical-align: bottom;
  margin-left: .5rem;
}

/* 試合結果 */

.score {
  font-size: 2em;
  line-height: 1;
    margin-top: -0.25em;
}

.result__team {
  font-size: 1.15em;
  font-weight: bold;
}

@media (max-width: 992px) {
  .score {
    font-size: 1.5em;
  }
  .result__team {
    font-size: 1em;
    font-weight: bold;
  }
}



/* 順位・戦績表 */

#league th,
#league td {
  font-size: .85em;
  text-align: center;
  white-space: nowrap;
}

#league .table-bordered th,
#league .table-bordered td.none {
  background: var(--thin-color);
}

#league .table-bordered th[scope=col] {
  border-bottom-width: 2px;
}

#league .table-bordered th.none {
  border-bottom-width: 2px;
}
#league .fixed01,
#league .fixed03{
	position: sticky;
	left: 0;
}
#league .fixed02{
	position: sticky;
	left: 41.5px;
}
#league .fixed01:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	border: solid #000;
	border-width: 0 2px 0 1px;
}
#league .fixed02{
	position: sticky;
	left: 41px;
}
#league .table-striped {
	border-collapse: separate;
	border-spacing: 0;
	background-color: #373b3e;
}
#league .table-striped>thead {
    vertical-align: bottom;
    border-width: 2px;
    border-color: white;
}

/* 試合結果詳細 */

.matchdetail {
  background: #fff;
  min-height: 500px;
  border: solid 1px var(--main-color);
  padding: 2rem;
}

.back-to-competition a {
  display: block;
  padding: 1rem 0;
  text-decoration: none;
  text-align: center;
}

.matchdetail .info {
  text-align: center;
  border-bottom: solid 1px var(--thin-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.matchdetail .score {
  font-size: 5rem;
}


/* HOME
-------------------------------------------------- */

/* slick slide */


.home-primary {
  position: relative;
  margin-bottom: 50px;
}

.home-primary:before {
  position: absolute;
  top: 150px;
  background: var(--main-color);
  width: 100%;
  height: 100%;
  content: '';
}

.slick-slide {
  margin: 60px 30px 10px;
}

@media (max-width: 992px) {
  .slick-slide {
    margin: 0 20px 10px;
  }
}

.slick-current + div {
  transform: scale(1.15);
  transform-origin: center bottom;
  transition: all .5s ease;
}

@media (max-width: 992px) {
  .slick-current + div {
    transform: none;
  }
}

.slick-dots li button:before {
  color: var(--thin-color);
  opacity: .5;
}

.slick-dots li.slick-active button:before {
  color: var(--thin-color);
  opacity: inherit;
}

.slide .card-body {
  height: 350px;
  display: table-cell;
  vertical-align: bottom;
  background-size: cover;
  background-position: center top !important;
}

.slick-prev, .slick-next {
  width: 40px;
  height: 40px;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before,
.slick-prev:before,
.slick-next:before {
  opacity: inherit;
}

.slick-prev:before,
.slick-next:before {
  font-size: 40px;
}

.slick-prev {
  left: -25px;
}

.slide .card {
  border: none;
  position: relative;
  display: table;
}

.slide .card p {
  margin-bottom: .5rem;
}

.slide .card a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px var(--main-color);
}

.slide .card-title {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.slide .card-title span.live {
  border: solid 2px #fff;
  padding: 0 1em;
  color: #fff;
  font-size: .6em;
}

.compsoon::before { content: '近日開催'; }
.complive::before { content: '開催中'; }
.compend::before { content: '開催終了'; }

.slide .card-title span {
/*   display: block; */
  padding: .1rem;
  line-height: 1.5;
/*   background: #222; */
  color: #fff;
}

.slide .date {
  margin-bottom: .25rem;
}

.slide .date span {
  display: inline;
  background: #fff;
  font-size: .75rem;
  padding: .2em .5em;
}

.slide .card .badge {
  color: var(--main-color);
  background: #fff;
  border-radius: 0;
}



/* news */

.news {
}

.news .container {
  background: #fff;
  position: relative;
  padding: 3rem 1.5rem;
}

.news ul {
  margin: 0;
  padding: 0;
}

.news li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: solid 1px var(--main-color);
}

.news a {
  display: block;
  padding: 1em 1em;
  margin-bottom: .25em;
  text-decoration: none;
  background: #fff;
}

.news-date {
  font-size: .85em;
  font-weight: bold;
  background: var(--main-color);
  color: #fff;
  padding: .25em 1em;
  justify-content: center;
}

.news-title {
  padding-left: .5em;
}

.news-date, .news-title {
  display: flex;
  align-items: center;
}

a.btn-news {
  background: var(--main-color);
  color: #fff;
  display: block;
  font-size: 1.25rem;
  margin: 2rem auto 0;
  max-width: 180px;
  padding: 0.5rem 2rem;
  text-align: center;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover,
a.btn-news:hover {
  color: #ccc;
}

/* sponsored */

.sponsored .container {
  padding: 1.5rem 0;
}

@media (max-width: 992px) {
  .sponsored .container {
    padding: 1.5rem 1.5rem;
  }
}

.sponsored a {
  display: block;
  height: auto;
  overflow: hidden;
  border: solid 1px #eee;
}

/* picks */

.picks {
  background: #fff;
  padding: 2rem 0;
}

.picks .container {
}

.picks .card .badge {
  background: var(--main-color);
  color: #fff;
  border-radius: 0;
}

.picks .card {
  border: solid 1px var(--main-color);
  border-radius: 0;
}

.picks .card a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.picks .card-title {
  line-height: 1.5;
}

.picks span.live {
  border: solid 1px var(--main-color);
  padding: 0.1em 0.6em;
  font-size: .75em;
  font-weight: 700;
}


.picks .date {
  margin-bottom: .25rem;
}

.picks .date span {
  font-size: .75rem;
}




/* search */

.search {
  text-align: center;
}

.search__grade {
  max-width: 800px;
  margin: 0 auto;
}

.search__grade input {
}


.search__grade input[type="checkbox"] {
  display    : none;            /* チェックボックスは非表示 */
}
 
 /* --- チェックボックス直後のlabel --- */
.search__grade input[type="checkbox"] + label{
  display    : inline-block;
  margin     : 5px;             /* labelの間隔  */
  opacity    : 1;             /* 透明度       */
  cursor     : pointer;         /* カーソル設定 */
  transition : .2s;             /* なめらか変化 */
  transform  : scale(0.7, 0.7); /* 少し小さく   */
}
 /* --- 選択されたチェックボックス直後のlabel --- */
.search__grade input[type="checkbox"]:checked + label {
  opacity    : 1;               /* 透明度       */
  transform  : scale(1, 1);     /* 原寸に戻す   */
}
 
 /* --- 選択されたチェックボックス直後のlabel --- */
.search__grade input[type="checkbox"] + label:hover {
  opacity    : 0.9;             /* 透明度       */
}

.search__grade a {
  text-align: center;
  display: block;
  background: #fff;
  border: solid 2px var(--main-color);
  border-radius: 50%;
    position: relative;
}

.search__grade a:before {
    content:"";
    display: block;
    padding-top: 100%; /* 高さを幅の75%に固定 */
}
.search__grade a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    max-width: 70%;
    max-height: 70%;
}

.search__grade p {
  font-size: .85em;
  margin-top: .25em;
  text-align: center;
}

.search__status {
  text-align: center;
  font-size: 1.25em;
  margin-top: 1em;
}


/* news一覧 */
.newslist > .container {
  margin: 140px auto 0;
}
.newslist h2 {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  margin: 2rem 0;
  line-height: 2.5rem;
}

@media (max-width: 992px) {
  .newslist h2 {
    font-size: 3rem;
  }
}

.newslist h2 small {
  font-size: 1.25rem;
  border-bottom: solid 3px var(--main-color);
}

/* pagenavi */
.wp-pagenavi {
  margin: 2rem 0;
}

.wp-pagenavi a {
  display: inline-block;
}

.wp-pagenavi a, .wp-pagenavi span {
  padding: 8px 15px !important;
}