@charset "UTF-8";



/* bootstrap.css上書き・追加
-------------------------------------------------------------------------------- */

.navbar {
  margin-bottom: 0px;
  margin-top: -58px;
}
@media (min-width: 768px) {
  .navbar {
    margin-bottom: 0px;
    margin-top: 0px;
    border-radius: 0px;
  }
}

@media (min-width: 768px) {
  #ff21NavArea .container-fluid {
    padding-left: 0px;
  }
  #ff21NavArea .container-fluid .navbar-collapse {
    padding-right: 0px;
    padding-left: 0px;
  }
}

.navbar-toggle {
  margin-right: 0px;
}

.navbar-collapse {
  border-top: 0px;
}

.nav-justified {
  display: table;
  margin-left: 0px;
}
@media (min-width: 768px) {
  .nav-justified {
    width: calc(100% + 15px);/*右にできる余白を埋めるため15pxのばす*/
    max-width: 940px;/*992px以上は幅を固定する*/
  }
}
@media (min-width: 992px) {
  .nav-justified {
    width: 940px;
  }
}
@media (min-width: 1200px) {
  .nav-justified {
    width: 940px;/*992px以上は幅を固定する*/
  }
}
.nav-justified > li {
  float: none;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
  }
}
@media screen and (max-width: 767px){
  body.ff21Sub header h1{
    margin-bottom: 0;
  }
}
/* ナビ６項目（６分割）の場合は以下に変更
@media (min-width: 768px) {
  .nav-justified > li:nth-child(1) {
    width: 16.666%;
  }
  .nav-justified > li:nth-child(2) {
    width: 16.666%;
  }
  .nav-justified > li:nth-child(3) {
    width: 16.666%;
  }
  .nav-justified > li:nth-child(4) {
    width: 16.666%;
  }
  .nav-justified > li:nth-child(5) {
    width: 16.666%;
  }
  .nav-justified > li:nth-child(6) {
    width: 16.666%;
  }
}
*/

/* ナビ５項目（５分割）の場合*/
@media (min-width: 768px) {
  .nav-justified > li:nth-child(1) {
    width: 20%;
  }
  .nav-justified > li:nth-child(2) {
    width: 20%;
  }
  .nav-justified > li:nth-child(3) {
    width: 20%;
  }
  .nav-justified > li:nth-child(4) {
    width: 20%;
  }
  .nav-justified > li:nth-child(5) {
    width: 20%;
  }
}


/* ナビ４項目（４分割）の場合は以下に変更
@media (min-width: 768px) {
  .nav-justified > li:nth-child(1) {
    width: 25%;
  }
  .nav-justified > li:nth-child(2) {
    width: 25%;
  }
  .nav-justified > li:nth-child(3) {
    width: 25%;
  }
  .nav-justified > li:nth-child(4) {
    width: 25%;
  }
}
*/



/* bootstrap.css上書き・追加 2
-------------------------------------------------------------------------------- */

.navbar-toggle {
  border-radius: 0px;
}
.navbar-toggle .icon-bar {
  border-radius: 0px;
}

.navbar-default {
  background-color: transparent;
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
  border-left-style: none;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: #e6e6e6;
  }
}

.navbar-default .navbar-nav > li > a {
  color: #333333;
  background-color: #e6e6e6;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
  /*background-color: #b9a929;*//*2021*/
  /*background-color: #00bb00;*//*2022*/
  background-color: #00aaaa;/*2023*/
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #333333;
  background-color: #e6e6e6;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: #e6e6e6;
  background-color: #e6e6e6;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  /*border-color: #b9a929;*//*2021*/
  /*background-color: #b9a929;*//*2021*/
  /*border-color: #00bb00;*//*2022*/
  /*background-color: #00bb00;*//*2022*/
  border-color: #00aaaa;/*2023*/
  background-color: #00aaaa;/*2023*/
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #333333;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}



/* 2021追加（これはbootstrap.css上書きではないが上の .active と同じ指定）
-------------------------------------------------------------------------------- */

.navbar-default .navbar-nav > .junbichu > a,
.navbar-default .navbar-nav > .junbichu > a:hover,
.navbar-default .navbar-nav > .junbichu > a:focus {
  color: #333333;
  background-color: #e6e6e6;
}



/* ナビ
-------------------------------------------------------------------------------- */

#ff21NavArea {
  border-style: none;
  background-color: #e6e6e6;
}
#ff21NavArea nav ul li:first-child {
  margin-top: 15px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  #ff21NavArea nav ul li:first-child {
    margin-top: 0px;
  }
}
#ff21NavArea nav ul li:last-child {
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  #ff21NavArea nav ul li:last-child {
    margin-bottom: 0px;
  }
}
#ff21NavArea nav ul li {
  font-size: 16px;
  font-weight: bold;
}
@media (min-width: 768px) {
  #ff21NavArea nav ul li {
    font-size: 14px;
  }
}

/*#ff21NavArea nav ul li span.ff21NoteXS {
  font-size: 1em;
  font-weight: normal;
}*/
@media (min-width: 768px) {
  #ff21NavArea nav ul li span.ff21NoteXS {
    display: none;
  }
}

/*futsalfiesta_sub.cssを上書き*/
/*@media (min-width: 768px) {
  #ff21BackToHome {
    display: none;
  }
}*/



/* ヘッダロゴ用追加　futsalfiesta_sub.cssから「サブページ共通 header」を上書き
-------------------------------------------------------------------------------- */

/*スマホサイズでハンバーガーメニューとリンクが重ならないように右マージン追加
  ただし container の余白15px分を考慮して*/

body.ff21Sub header {
    background-color: #215942;
    padding: 30px 20px 10px;
  }
  @media screen and (max-width: 767px){
    body.ff21Sub header{
      padding: 20px 20px 10px;
    }
  }
/*あらためて上を打ち消し*/
@media (min-width: 768px) {

}

/*スマホサイズで h1 のリンクが有効になるように以下で上書き*/
@media (max-width: 767px) {
  body.ff21Sub header{
    margin: 0;
    margin-bottom: 50px;
  }
  h1 a {
    display: block;
    width: 60%;
    margin-inline: auto;
    position: relative;
    z-index: 1001;/*bootstrap.cssの.dropdown-menuの1000より上で.modalの1050より下*/
  }
  h1 a img {
    width: 100%;
  }
}

/*さらに 768以上で position:relative; を打ち消す*/
@media (min-width: 768px) {
  /*body.ff21Sub header h1 {
    margin: 0px auto 20px;
    width: 300px;
  }*/
  body.ff21Sub header h1 a {
    /*outline: none;*/
    position: static;/*打ち消しのため追加*/
  }
  body.ff21Sub header h1 img {
    /*margin: 0px auto;*/
    width: 300px;/*上のmax-width:767px時のwidth:100%を打ち消し*/
  }
}