/*
  $Id: common-contents.css,v1.0 $
*/
/*===========================================================================
-----------------------------------------------------------------------------
  共通 メインビジュアル 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background #main-visual {
  background: url(./images/background-main.jpg) no-repeat 50% 50%;
  background-size: cover;
  padding-top: 145px;
  margin-bottom: 80px;
}
#background #main-visual section {
  max-width: 1240px;
  width: 90vw;
}
#background #main-visual p.entry {
  width: 17.742%;
  position: absolute;
  left: 41.1%;
  top: 15.2%;
}
#background #main-visual figure {
  display: block;
  position: relative;
  margin: -6% auto -35px;
}
#background #main-visual figure:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(./images/main03-pc.svg) no-repeat 50% 100%;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1270px) {
  #background #main-visual {
    padding-top: 125px;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1190px) {
  #background #main-visual {
    padding-top: 110px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #main-visual {
    background-position: 40% 100%;
    background: auto 120%;
    padding-top: calc(62px + 12vw);
    margin-bottom: calc(46.2vw + 60px);
  }
  #background #main-visual section {
    width: 94vw;
  }
  #background #main-visual p.entry {
    width: 50%;
    left: 22%;
    top: 70%;
    z-index: 20;
  }
  #background #main-visual figure {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  #background #main-visual figure:before {
    width: 100%;
    padding-top: 80.55%;
    height: auto;
    background-image: url(./images/main03-sp.svg);
    position: relative;
    left: auto;
    bottom: auto;
    order: 20;
    margin-bottom: -46.2vw;
  }
}

/*===========================================================================
-----------------------------------------------------------------------------
  共通 空記事 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .empty-contents {
  display: block;
  padding: 1em 2em;
  margin: 0 auto 60px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  text-align: center;
  color: var(--osn-color);
  font-size: 18px;
  font-weight: 700;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 900px) {
  #background .empty-contents {
    text-align: left;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .empty-contents {
    font-size: 16px;
    margin-bottom: 40px;
  }
}


/*------------------------------------
  トップページ設定 設定　ここから
-------------------------------------*/
#background .news-list-area.top-news-area .empty-contents ,
#background .sports-list-area.top-sports-area .empty-contents {
  margin-bottom: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 900px) {
  #background .news-list-area.top-news-area .empty-contents ,
  #background .sports-list-area.top-sports-area .empty-contents {
    margin-bottom: 60px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .news-list-area.top-news-area .empty-contents ,
  #background .sports-list-area.top-sports-area .empty-contents {
    font-size: 16px;
    margin-bottom: 40px;
  }
}
/*===========================================================================
-----------------------------------------------------------------------------
  共通 ニュースリスト設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .news-list-area ul.news-list > li {
  border-bottom: 1px solid #ccc;
  padding: 16px 0;
}
#background .news-list-area ul.news-list > li a {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  padding: 0 30px 0 90px;
}
#background .news-list-area ul.news-list > li a:hover {
  filter: Alpha(opacity=100);
  opacity: 1;
}
#background .news-list-area ul.news-list > li a:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--osn-color);
  border-right: 2px solid var(--osn-color);
  transform: rotate(45deg);
  position: absolute;
  right: 0;
  top: calc(50% - 6px);
}
#background .news-list-area ul.news-list > li figure {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: calc(50% - 35px);
}
#background .news-list-area ul.news-list > li figure > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#background .news-list-area ul.news-list > li .days {
  display: block;
  color: var(--osn-color);
  font-size: 16px;
  font-weight: 700;
  lighting-color: 1.2em;
}
#background .news-list-area ul.news-list > li .title {
  display: block;
  line-height: 1.5em;
  transition: all 0.5s ease;
}
#background .news-list-area ul.news-list > li a:hover .title {
  color: var(--osn-color);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .news-list-area ul.news-list > li:first-child {
    padding-top: 0;
  }
  #background .news-list-area ul.news-list > li a:before {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
  }
  #background .news-list-area ul.news-list > li .days {
    font-size: 14px;
  }
}
/*------------------------------------
  トップページ設定 設定　ここから
-------------------------------------*/
#background .news-list-area.top-news-area {
  margin-bottom: 120px;
}
#background .news-list-area.top-news-area .more {
  position: absolute;
  right: 0;
  top: -1em;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 900px) {
  #background .news-list-area.top-news-area .more {
    position: static;
    text-align: center;
    margin: 60px auto 0;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .news-list-area.top-news-area {
    margin-bottom: 80px;
  }
  #background .news-list-area.top-news-area .more {
    margin-top: 40px;
  }
}


/*===========================================================================
-----------------------------------------------------------------------------
  共通 指導者リスト設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .leaders-list-area ul.leaders-list {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
#background .leaders-list-area ul.leaders-list > li {
  width: calc(50% - 20px);
  margin: 0 40px 40px 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
#background .leaders-list-area ul.leaders-list > li:nth-of-type(2n) {
  margin-right: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .leaders-list-area ul.leaders-list {
    display: block;
  }
  #background .leaders-list-area ul.leaders-list > li {
    width: 100%;
    margin: 0 0 20px;
  }
}
/*-----------------------------------*/
#background .leaders-list-area ul.leaders-list a {
  min-height: 144px;
  display: flex;
  padding: 24px;
  margin: auto 0;
}
#background .leaders-list-area ul.leaders-list a:hover {
  filter: Alpha(opacity=100);
  opacity: 1;
}
#background .leaders-list-area ul.leaders-list figure {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto 24px auto 0;
}
#background .leaders-list-area ul.leaders-list figure > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .leaders-list-area ul.leaders-list a {
    min-height: 70px;
    padding: 16px;
  }
  #background .leaders-list-area ul.leaders-list figure {
    width: 70px;
    height: 70px;
  }
  #background .leaders-list-area ul.leaders-list figure > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
/*-----------------------------------*/
#background .leaders-list-area ul.leaders-list .leaders-set {
  display: block;
  width: calc(100% - 120px);
  margin: auto 0;
}
#background .leaders-list-area ul.leaders-list .leaders-set strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 5px;
  transition: all 0.5s ease;
}
#background .leaders-list-area ul.leaders-list .leaders-set em {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4em;
  margin: 0 10px 5px 0;
  transition: all 0.5s ease;
}
#background .leaders-list-area ul.leaders-list .leaders-set small {
  display: inline-block;
  padding: 0.2em 0.5em;
  background: var(--osn-color);
  border: 1px solid var(--osn-color);
  border-radius: 1em;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4em;
  margin: 0 5px 5px 0;
  transition: all 0.5s ease;
}
#background .leaders-list-area ul.leaders-list .leaders-set > ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#background .leaders-list-area ul.leaders-list .leaders-set > ul > li {
  display: block;
  white-space: nowrap;
  width: auto;
  margin: 0.4em 0.4em 0 0;
  padding: 0.2em 0.5em 0.3em;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1em;
  transition: all 0.5s ease;
}
#background .leaders-list-area ul.leaders-list a:hover .leaders-set strong ,
#background .leaders-list-area ul.leaders-list a:hover .leaders-set em {
  color: var(--osn-color);
}
#background .leaders-list-area ul.leaders-list a:hover .leaders-set small {
  background: #fff;
  color: var(--osn-color);
}
#background .leaders-list-area ul.leaders-list a:hover .leaders-set > ul > li {
  border-color: var(--osn-color);
  background-color: var(--osn-color);
  color: #fff;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .leaders-list-area ul.leaders-list .leaders-set {
    width: calc(100% - 94px);
  }
  #background .leaders-list-area ul.leaders-list .leaders-set strong {
    font-size: 16px;
  }
  #background .leaders-list-area ul.leaders-list .leaders-set em {
    font-size: 14px;
  }
  #background .leaders-list-area ul.leaders-list .leaders-set > ul > li {
    font-size: 12px;
  }
}
/*------------------------------------
  トップページ設定 設定　ここから
-------------------------------------*/
#background .club-list-area.leaders-list-area.top-pickup-area {
  padding: 90px 0 0.1px;
}
#background .club-list-area.leaders-list-area.top-pickup-area section {
  margin-bottom: 60px;
  border-bottom: 1px solid #ccc;
}
#background .club-list-area.leaders-list-area.top-pickup-area section:last-child {
  border-bottom: none;
}
#background .club-list-area.leaders-list-area.top-pickup-area .more {
  position: absolute;
  right: 0;
  top: -1em;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 900px) {
  #background .club-list-area.leaders-list-area.top-pickup-area .more {
    position: static;
    text-align: center;
    margin: 0 auto 60px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .club-list-area.leaders-list-area.top-pickup-area {
    padding: 60px 0 40px;
  }
  #background .club-list-area.leaders-list-area.top-pickup-area section ,
  #background .club-list-area.leaders-list-area.top-pickup-area .more {
    margin-bottom: 40px;
  }
}
/*===========================================================================
-----------------------------------------------------------------------------
  共通 クラブ・サークルリスト設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .club-list-area ul.club-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#background .club-list-area ul.club-list > li {
  width: calc(33.33% - 40px);
  margin: 0 30px 60px;
}
#background .club-list-area ul.club-list > li:nth-of-type(3n) {
  margin-right: 0;
}
#background .club-list-area ul.club-list > li:nth-of-type(3n+1) {
  margin-left: 0;
}
#background .club-list-area ul.club-list a {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 12px 96px 12px 12px;
  overflow: hidden;
}
#background .club-list-area ul.club-list a:hover {
  filter: Alpha(opacity=100);
  opacity: 1;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  #background .club-list-area ul.club-list > li {
    width: calc(33.33% - 24px);
    margin: 0 18px 60px;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 980px) {
  #background .club-list-area ul.club-list > li {
    width: calc(33.33% - 20px);
    margin: 0 15px 60px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .club-list-area ul.club-list {
    display: block;
  }
  #background .club-list-area ul.club-list > li {
    width: 100%;
    margin: 0 0 40px;
  }
  #background .club-list-area ul.club-list a {
    border-radius: 12px 70px 12px 12px;
  }
}
/*-----------------------------------*/
#background .club-list-area ul.club-list figure {
  display: block;
  width: 100%;
  padding-top: 64.86%;
  position: relative;
}
#background .club-list-area ul.club-list figure > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#background .club-list-area ul.club-list figure figcaption {
  display: block;
  min-width: 80%;
  padding: 0.5em 1.5em 0.5em 1em;
  clip-path: polygon(0% 100%, 0% 0%, calc(100% - 12px) 0%, 100% 100%);
  border-radius: 0 28px 0 0 / 0 50px 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4em;
  color: #fff;
}
#background .club-list-area ul.club-list figure figcaption .ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4em;
  max-height: 3.2em;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .club-list-area ul.club-list figure figcaption {
    font-size: 13px;
  }
}
/*-----------------------------------*/
#background .club-list-area ul.club-list strong {
  display: block;
  width: 100%;
  padding: 20px 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4em;
  position: relative;
  transition: all 0.5s ease;
}
#background .club-list-area ul.club-list strong:before {
  content: "";
  display: none;
}
#background .top-pickup-area.club-list-area ul.club-list strong {
  padding: 10px 20px 10px 94px;
}
#background .top-pickup-area.club-list-area ul.club-list strong:before {
  content: "団体名";
  display: block;
  padding: 0.3em 0.5em;
  border: 1px solid #000;
  border-radius: 4px;
  position: absolute;
  left: 16px;
  top: 11px;
  font-size: 14px;
  line-height: 1em;
  transition: all 0.5s ease;
}
#background .club-list-area ul.club-list.report-list strong {
  padding: 10px 20px;
}
#background .club-list-area ul.club-list.report-list strong:before {
  display: none;
}
#background .club-list-area ul.club-list a:hover strong {
  color: var(--osn-color);
}
#background .club-list-area ul.club-list a:hover strong:before {
  border-color: var(--osn-color);
  background-color: var(--osn-color);
  color: #fff;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .club-list-area ul.club-list strong {
    font-size: 16px;
  }
  #background .club-list-area ul.club-list strong:before {
    left: 16px;
    top: calc(50% - 0.9em);
    font-size: 12px;
  }
  #background .top-pickup-area..club-list-area ul.club-list strong {
    padding-left: 86px;
    font-size: 16px;
  }
  #background .top-pickup-area..club-list-area ul.club-list strong:before {
    left: 16px;
    top: calc(50% - 0.9em);
    font-size: 12px;
  }
}

/*------------------------------------
  追加市区町村 設定　ここから
-------------------------------------*/
#background .club-list-area ul.club-list .city-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 13px 0;
  font-size: 0.75em;
  line-height: 1em;
}
#background .club-list-area ul.club-list .city-list > li.city-item {
  display: block;
  margin: 5px 3px 0 2px;
  padding: 0.2em 0.5em;
  border: 1px solid #000;
  border-radius: 4px;
  line-height: 1em;
  font-weight: 700;
  transition: all 0.5s ease;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}
/*------------------------------------
  カラバリ設定　ここから
-------------------------------------*/
#background .club-list-area ul.club-list .city-list > li.city-item.city-okayama-kitaku ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-okayama-nakaku ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-okayama-higashiku ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-okayama-minamiku ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-tamano {
  color: #0d98ff;
  border-color: #0d98ff;
}
#background .club-list-area ul.club-list .city-list > li.city-item.city-akaiwa ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-kibichuo ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-setouchi ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-bizen ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-wake {
  color: #31b541;
  border-color: #31b541;
}
#background .club-list-area ul.club-list .city-list > li.city-item.city-kurashiki ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-soja ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-hayashima {
  color: #ea508f;
  border-color: #ea508f;
}
#background .club-list-area ul.club-list .city-list > li.city-item.city-asakuchi ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-ibara ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-kasaoka ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-satosho ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-yakage {
  color: #5f3f9e;
  border-color: #5f3f9e;
}
#background .club-list-area ul.club-list .city-list > li.city-item.city-takahashi ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-niimi {
  color: #0b3e89;
  border-color: #0b3e89;
}
#background .club-list-area ul.club-list .city-list > li.city-item.city-kagamino ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-kumenan ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-shoo ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-shinjo ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-tsuyama ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-nagi ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-nishiawakura ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-maniwa ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-misaki ,
#background .club-list-area ul.club-list .city-list > li.city-item.city-mimasaka {
  color: #ed8026;
  border-color: #ed8026;
}
#background .club-list-area ul.club-list .city-list > li.city-item.city-others {
  color: #666;
  border-color: #666;
}

#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-okayama-kitaku ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-okayama-nakaku ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-okayama-higashiku ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-okayama-minamiku ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-tamano {
  color: #fff;
  background-color: #0d98ff;
}
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-akaiwa ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-kibichuo ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-setouchi ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-bizen ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-wake {
  color: #fff;
  background-color: #31b541;
}
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-kurashiki ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-soja ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-hayashima {
  color: #fff;
  background-color: #ea508f;
}
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-asakuchi ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-ibara ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-kasaoka ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-satosho ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-yakage {
  color: #fff;
  background-color: #5f3f9e;
}
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-takahashi ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-niimi {
  color: #fff;
  background-color: #0b3e89;
}
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-kagamino ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-kumenan ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-shoo ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-shinjo ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-tsuyama ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-nagi ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-nishiawakura ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-maniwa ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-misaki ,
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-mimasaka {
  color: #fff;
  background-color: #ed8026;
}
#background .club-list-area ul.club-list a:hover .city-list > li.city-item.city-others {
  color: #fff;
  background-color: #666;
}


/*===========================================================================
-----------------------------------------------------------------------------
  共通 イベント設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
/*------------------------------------
  カレンダー 設定　ここから
-------------------------------------*/
#background .sports-list-area #calendar {
  margin-bottom: 90px;
}
#background .sports-list-area #calendar .fc-header-toolbar {
  margin-bottom: 30px;
}
#background .sports-list-area #calendar .fc-header-toolbar h2 {
  font-size: 24px;
  font-weight: 900;
}
#background .sports-list-area #calendar .fc-view-harness {
  background: #fff;
}
#background .sports-list-area #calendar th.fc-col-header-cell {
  font-weight: 700;
}
#background .sports-list-area #calendar td.fc-day-sun {
  background: #fff3f3;
}
#background .sports-list-area #calendar td.fc-day-sat {
  background: #f5fbff;
}
#background .sports-list-area #calendar td.fc-day-today.fc-day-sun ,
#background .sports-list-area #calendar td.fc-day-today.fc-day-sat {
  background: rgba(255,220,40,0.15);
}
#background .sports-list-area #calendar .sports_color {
  border: none !important;
  padding: 0.2em 1em;
  background: var(--osn-color);
  color: #fff;
}/*
#background .sports-list-area #calendar button.fc-today-button {
  border-color: var(--osn-color)!important;
  background-color: var(--osn-color)!important;
  color: #fff;
}*/
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .sports-list-area #calendar {
    margin-bottom: 60px;
  }
  #background .sports-list-area #calendar .fc-header-toolbar {
    margin-bottom: 20px;
  }
  #background .sports-list-area #calendar .fc-header-toolbar h2 {
    font-size: 18px;
  }
}
/*===========================================================================

  スマホ用 カレンダー 設定　ここから

===========================================================================*/
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #calendar .fc-list-empty {
    display: block;
    padding: 1em 2em;
    margin: 0;
  }
  #background #calendar .fc-list-empty > .fc-list-empty-cushion {
    color: var(--osn-color);
    font-weight: 700;
  }
  /*------------------------------------
    縦リスト カレンダー 設定　ここから
  -------------------------------------*/
  #background #calendar .fc-list-day-cushion {
    background-color: #fff;
    padding: 0.4em 1em;
  }
  #background #calendar .fc-list-event-time ,
  #background #calendar .fc-list-event-graphic {
    display: none;
  }
  #background #calendar .fc-event.sports_color ,
  #background #calendar .fc-event.sports_color .fc-list-event-title {
    background-color: var(--osn-color);
  }
  #background #calendar .fc-event.sports_color .fc-list-event-title a {
    color: #fff;
    font-weight: 700;
  }
  #background #calendar tr.fc-day-today .fc-list-day-cushion ,
  #background #calendar tr.fc-day-today.fc-day-sun .fc-list-day-cushion ,
  #background #calendar tr.fc-day-today.fc-day-sat .fc-list-day-cushion {
    background: rgba(255,220,40,0.15);
  }
  #background #calendar tr.fc-day-sun .fc-list-day-cushion {
    background: #fff3f3;
  }
  #background #calendar tr.fc-day-sun .fc-list-day-cushion a {
    color: #ed7eaa;
  }
  #background #calendar tr.fc-day-sat .fc-list-day-cushion {
    background: #f5fbff;
  }
  #background #calendar tr.fc-day-sat .fc-list-day-cushion a {
    color: var(--osn-color);
  }

}

/*=========================================================================*/
/*------------------------------------
  イベントリスト 設定　ここから
-------------------------------------*/
#background .sports-list-area ul.sports-list {
  display: flex;
  flex-wrap: wrap;
}
#background .sports-list-area ul.sports-list > li {
  width: calc(33.33% - 40px);
  margin: 0 30px 60px;
}
#background .sports-list-area ul.sports-list > li:nth-of-type(3n) {
  margin-right: 0;
}
#background .sports-list-area ul.sports-list > li:nth-of-type(3n+1) {
  margin-left: 0;
}
#background .sports-list-area ul.sports-list a {
  display: block;
  height: 100%;
  background: url(./images/background-blue.jpg) no-repeat 0 0;
  background-size: cover;
  border-radius: 12px 96px 12px 12px;
  overflow: hidden;
}
#background .sports-list-area ul.sports-list strong {
  display: block;
  width: 100%;
  padding: 10px 20px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4em;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  #background .sports-list-area ul.sports-list > li {
    width: calc(33.33% - 24px);
    margin: 0 18px 60px;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 980px) {
  #background .sports-list-area ul.sports-list > li {
    width: calc(33.33% - 20px);
    margin: 0 15px 60px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .sports-list-area ul.sports-list {
    display: block;
  }
  #background .sports-list-area ul.sports-list > li {
    width: 100%;
    margin: 0 0 40px;
  }
  #background .sports-list-area ul.sports-list a {
    border-radius: 12px 70px 12px 12px;
  }
}
/*-----------------------------------*/
#background .sports-list-area ul.sports-list figure {
  display: block;
  width: 100%;
  padding-top: 64.86%;
  position: relative;
}
#background .sports-list-area ul.sports-list figure > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#background .sports-list-area ul.sports-list figure > strong {
  display: block;
  width: 7em;
  height: 7em;
  padding: 5.2em 0 0;/*
  background: #e22;
  color: #fff;*/
  background: #f7d21b;
  color: #212121;
  font-size: 14px;
  line-height: 1em;
  text-align: center;
  position: absolute;
  left: -3.5em;
  top: -3.5em;
  z-index: 10;
  transform: rotate(-45deg);
}
#background .sports-list-area ul.sports-list figure figcaption {
  display: block;
  min-width: 80%;
  padding: 0.6em 1.5em 0.6em 1em;
  clip-path: polygon(0% 100%, 0% 0%, calc(100% - 12px) 0%, 100% 100%);
  border-radius: 0 28px 0 0 / 0 50px 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--osn-color);
  z-index: 15;
}
#background .sports-list-area ul.sports-list figure figcaption > em {
  display: inline-block;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .sports-list-area ul.sports-list figure figcaption {
    font-size: 14px;
  }
}

/*------------------------------------
  トップページ 設定　ここから
-------------------------------------*/
#background .sports-list-area.top-sports-area {
  padding: 80px 0 60px;
  margin-bottom: 70px;
}
#background .sports-list-area.top-sports-area .more {
  position: absolute;
  right: 0;
  top: -1em;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 900px) {
  #background .sports-list-area.top-sports-area .more {
    position: static;
    text-align: center;
    margin: 0 auto 60px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .sports-list-area.top-sports-area {
    padding: 60px 0 40px;
    margin-bottom: 40px;
  }
  #background .sports-list-area.top-sports-area .more {
    margin-bottom: 40px;
  }
}

/*===========================================================================
-----------------------------------------------------------------------------
  PRバナー 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .banner-area {
  margin-bottom: 90px;
}
#background .banner-area h3 {
  padding-left: 1em;
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1em;
  line-height: 1em;
}
#background .banner-area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#background .banner-area ul li {
  width: calc(33.33% - 40px);
  margin: 0 30px 30px 30px;
}
#background .banner-area ul li:nth-of-type(3n) {
  margin-right: 0;
}
#background .banner-area ul li:nth-of-type(3n+1) {
  margin-left: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .banner-area {
    margin-bottom: 60px;
  }
  #background .banner-area h3 {
    margin-bottom: 20px;
    font-size: 20px;
  }
  #background .banner-area ul {
    display: flex;
    flex-wrap: wrap;
  }
  #background .banner-area ul li {
    width: calc(50% - 7px);
    margin: 0 auto 14px;
  }
  #background .banner-area ul li:nth-of-type(3n) ,
  #background .banner-area ul li:nth-of-type(3n+1) {
    margin: 0 auto 14px;
  }
  #background .banner-area ul li:nth-of-type(2n) {
    margin-right: 0 !important;
  }
  #background .banner-area ul li:nth-of-type(2n+1) {
    margin-left: 0 !important;
  }
}

/*===========================================================================
-----------------------------------------------------------------------------
  詳細ページ メイン 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
/*------------------------------------
  メインビジュアル 設定　ここから
-------------------------------------*/
#background #detail-main {
 padding: 40px 0 20px;
 margin-bottom: 80px;
}
#background #detail-main.blog-title-area {
 margin-bottom: 0;
}
#background #detail-main h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
#background #detail-main .title-link h2 {
  margin-bottom: 20px;
}
#background #detail-main h2 > figure {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}
#background #detail-main h2 > figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#background #detail-main h2 strong {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2em;
}
#background #detail-main h3 {
  display: block;
  color: #f7d21b;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4em;
  margin-bottom: 20px;
}
#background #detail-main p {
  display: block;
  color: #fff;
  margin-bottom: 60px;
}
#background #detail-main p.days {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
#background #detail-main a.title-link {
  display: block;
  padding-right: 40px;
  position: relative;
}
#background #detail-main a.title-link:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  transform: rotate(45deg);
  top: calc(50% - 9px);
  right: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #detail-main {
   padding: 30px 0 15px;
   margin-bottom: 60px;
  }
  #background #detail-main h2 {
    margin-bottom: 20px;
  }
  #background #detail-main .title-link h2 {
    margin-bottom: 10px;
  }
  #background #detail-main h2 > figure {
    width: 46px;
    height: 46px;
    margin-right: 16px;
  }
  #background #detail-main h2 strong {
    font-size: 22px;
  }
  #background #detail-main h3 {
    font-size: 18px;
  }
  #background #detail-main p {
    margin-bottom: 30px;
  }
  #background #detail-main a.title-link {
    padding-right: 20px;
  }
  #background #detail-main a.title-link:before {
    width: 12px;
    height: 12px;
    border-top-width: 2px;
    border-right-width: 2px;
    top: calc(50% - 6px);
  }
}
/*------------------------------------
  メインスライダー 設定　ここから
-------------------------------------*/
#background #detail-main .slider-area {
  max-width: 660px;
  margin: 0 auto 60px;
}
#background #detail-main .slider-area > .main-slider {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
}
#background #detail-main .slider-area > .main-slider li.slick-slide > img {
  border-radius: 12px;
}
#background #detail-main .slider-area > .thumb-slider {
  width: calc(100% + 10px);
  margin: 0 -5px;
}
#background #detail-main .slider-area > .thumb-slider li {
  width: calc(100% / 6);
  padding: 0 5px;
  filter: Alpha(opacity=100);
  opacity: 1;
  transition: all 0.5s ease;
}
#background #detail-main .slider-area > .thumb-slider li.slick-current ,
#background #detail-main .slider-area > .thumb-slider li:hover {
  filter: Alpha(opacity=50);
  opacity: 0.5;
}
#background #detail-main .slider-area > .thumb-slider li img {
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #detail-main .slider-area {
    width: 96%;
    margin-bottom: 40px;
  }
  #background #detail-main .slider-area > .main-slider {
    border-radius: 12px;
    margin-bottom: 15px;
  }
  #background #detail-main .slider-area > .thumb-slider {
    width: calc(100% + 6px);
    margin: 0 -3px;
  }
  #background #detail-main .slider-area > .thumb-slider li {
    width: 25%;
    padding: 0 3px;
  }
}
/*------------------------------------
  スライダーコントロール 設定　ここから
-------------------------------------*/
#background #detail-main .slider-area > .thumb-slider .slick-arrow {
  display: block;
  width: 32px;
  height: 32px;
  background: #fff;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  text-indent: -10em;
  position: absolute;
  right: -50px;
  top: calc(50% - 16px);
}
#background #detail-main .slider-area > .thumb-slider .slick-arrow.slick-prev {
  right: calc(100% + 18px);
  transform: rotate(180deg);
}
#background #detail-main .slider-area > .thumb-slider .slick-arrow:before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 4px solid var(--osn-color);
  border-right: 4px solid var(--osn-color);
  transform: rotate(45deg);
  position: absolute;
  right: calc(50% - 5px);
  top: calc(50% - 6px);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #detail-main .slider-area > .thumb-slider .slick-arrow {
    background: transparent;
    right: -25px;
  }
  #background #detail-main .slider-area > .thumb-slider .slick-arrow.slick-prev {
    right: calc(100% - 7px);
  }
  #background #detail-main .slider-area > .thumb-slider .slick-arrow:before {
    border-top-color: #fff;
    border-right-color: #fff;
  }
}
/*===========================================================================

  詳細ページ データ 設定　ここから

===========================================================================*/
#background #detail-date-area ,
#background #detail-date-area > section ,
#background #detail-date-area table.date-table ,
#background #detail-date-area p {
  margin-bottom: 40px;
}
#background #detail-date-area table.date-table {
  width: 100%;
}
#background #detail-date-area > section {
  padding-bottom: 0.1px;
}
#background #detail-date-area p.attention {
  text-align: center;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
  @media screen and (max-width: 740px) {
  #background #detail-date-area ,
  #background #detail-date-area table.date-table ,
  #background #detail-date-area p {
    margin-bottom: 20px;
  }
  #background #detail-date-area > section {
    margin-bottom: 40px;
  }
  #background #detail-date-area p.attention {
    text-align: center;
  }
  #background #detail-date-area p.more a ,
  #background #detail-date-area .more button {
    width: 100%;
  }
  #background #detail-date-area h3.content-title {
    margin-bottom: 20px;
  }
}
/*------------------------------------
  テーブル設定　ここから
-------------------------------------*/
#background table.date-table > tbody > tr > th ,
#background table.date-table > tbody > tr > td {
  padding: 20px 40px;
  border-bottom: 1px solid #ccc;
}
#background table.date-table > tbody > tr > th {
  width: 240px;
  font-weight: 700;
  color: var(--osn-color);
  border-bottom-color: var(--osn-color);
}
#background table.date-table a {
  color: var(--osn-color);
  text-decoration: underline;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1120px) {
  #background table.date-table > tbody > tr > th ,
  #background table.date-table > tbody > tr > td {
    padding: 20px;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1000px) {
  #background table.date-table > tbody > tr > th {
    display: block;
    width: 100%;
    padding: 20px 40px 10px;
    border-bottom: none;
  }
  #background table.date-table > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 0 40px 20px;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 820px) {
  #background table.date-table > tbody > tr > th {
    padding: 20px 10px 10px;
  }
  #background table.date-table > tbody > tr > td {
    padding: 0 10px 20px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background table.date-table > tbody > tr > th {
    padding: 20px 10px 0;
  }
}
/*------------------------------------
  オプション スケジュール 設定　ここから
-------------------------------------*/
#background .wkly-schd-wrapper {
  display: block;
  border: 1px solid #1691fa;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
#background table.wkly-schd {
  width: 100%;
}
#background table.wkly-schd th {
  background: var(--osn-color);
  color: #fff;
}
#background table.wkly-schd th ,
#background table.wkly-schd td {
  padding: 10px 20px;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
  line-height: 1em;
}
#background table.wkly-schd thead th {
  border-top: none;
}
#background table.wkly-schd tr > th:first-child {
  border-left: none;
}
#background table.wkly-schd tr > th:last-child ,
#background table.wkly-schd tr > td:last-child {
  border-right: none;
}
#background table.wkly-schd tbody tr:last-child > th ,
#background table.wkly-schd tbody tr:last-child > td {
  border-bottom: none;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .wkly-schd-wrapper {
    display: block;
    margin-top: 5px;
    width: calc(86vw - 20px);
    overflow-x: scroll;
  }
}
/*------------------------------------
  オプション マップ 設定　ここから
-------------------------------------*/
#background table.date-table .map-box {
  display: block;
  min-height: 280px;
  padding-top: 36.84%;
  position: relative;
}
#background table.date-table .map-box iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background table.date-table .map-box {
    margin-top: 5px;
    padding-top: calc(86vw - 20px);
  }
}
/*------------------------------------
  活動報告 設定　ここから
-------------------------------------*/
#background #detail-date-area .news-list-area h3.content-title small {
  font-size: 24px;
}
#background #detail-date-area .news-list-area .news-list {
  margin-bottom: 40px;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}

/*------------------------------------
  DL リンク 設定　ここから
-------------------------------------*/
#background #detail-date-area .date-list-set {
  margin-bottom: 40px;
}
#background #detail-date-area table.date-table + .date-list-set {
  margin-top: 80px;
}
#background #detail-date-area .date-list-set h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  margin-bottom: 20px;
  padding-left: 0.8em;
}
#background #detail-date-area .date-list-set h4:before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: var(--osn-color);
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
}
#background #detail-date-area .date-list-set ul.more {
  margin-bottom: 40px;
  padding-bottom: 0.1px;
  display: block;
  text-align: left;
}
#background #detail-date-area .date-list-set ul.more li {
  margin-bottom: 15px;
}
#background #detail-date-area .date-list-set ul.more a {
  text-align: left;
  padding-right: 55px;
  font-size: 16px;
}
#background #detail-date-area .date-list-set ul.more.dl-list a:before ,
#background #detail-date-area .date-list-set ul.more.dl-list a:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(./images/icon-dl.svg) no-repeat 50% 50%;
  background-size: contain;
  transform: rotate(0deg);
  border: none;
  position: absolute;
  right: 15px;
  top: calc(50% - 15px);
  transition: all 0.5s ease;
}
#background #detail-date-area .date-list-set ul.more.dl-list a:after {
  background-image: url(./images/icon-dl-b.svg);
}
#background #detail-date-area .date-list-set ul.more.dl-list a:before ,
#background #detail-date-area .date-list-set ul.more.dl-list a:hover:after {
  filter: Alpha(opacity=100);
  opacity: 1;
}
#background #detail-date-area .date-list-set ul.more.dl-list a:hover:before ,
#background #detail-date-area .date-list-set ul.more.dl-list a:after {
  filter: Alpha(opacity=0);
  opacity: 0;
}


/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #detail-date-area .date-list-set {
    margin-bottom: 30px;
  }
  #background #detail-date-area table.date-table + .date-list-set {
    margin-top: 60px;
  }
  #background #detail-date-area .date-list-set h4 {
    font-size: 16px;
    padding-left: 1em;
  }
  #background #detail-date-area .date-list-set ul.more {
    margin-bottom: 20px;
  }
  #background #detail-date-area .date-list-set ul.more li {
    margin-bottom: 10px;
  }
  #background #detail-date-area .date-list-set ul.more a {
    padding-right: 50px;
    width: auto;
    max-width: 100%;
    line-height: 1.4em;
  }
  #background #detail-date-area .date-list-set ul.more.dl-list a:before ,
  #background #detail-date-area .date-list-set ul.more.dl-list a:after {
    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
  }
}

/*------------------------------------
  お問い合わせボタン 設定　ここから
-------------------------------------*/
#background table.date-table .gmt-line .contact-button {
  display: inline-block;
  margin: auto auto auto 2em;
  padding: 1em 2em;
  background: var(--osn-color);
  border: 1px solid var(--osn-color);
  color: #fff;
  font-weight: 700;
  line-height: 1em;
  border-radius: 1.5em;
  text-decoration: none;
}
#background table.date-table .gmt-line .contact-button:hover {
  background-color: #fff;
  color: var(--osn-color);
  filter: Alpha(opacity=100);
  opacity: 1;
}
/** スマートフォン用分岐 **/
@media screen and (min-width: 741px) {
  #background table.date-table .gmt-line a.contact-phone {
    text-decoration: none;
    color: #000;
  }
  #background table.date-table .gmt-line a.contact-button.contact-phone {
    display: none;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background table.date-table .gmt-line {
    text-align: center;
  }
  #background table.date-table .gmt-line a {
    display: block;
    text-align: left;
    width: 100%;
  }
  #background table.date-table .gmt-line a + .contact-button {
    display: inline-block;
    width: auto;
    margin: 0.5em auto auto auto;
    text-align: center;
  }
}
/*===========================================================================

  イベント・ボランティア 終了設定　ここから

===========================================================================*/
#background #view-calendar-end {
  display: block;/*
  background: #e22;
  color: #fff;*/
  background: #f7d21b;
  color: #212121;
  padding: 0.6em 2em;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4em;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #view-calendar-end {
    padding: 0.6em;
    font-size: 16px;
  }
}
/*===========================================================================
-----------------------------------------------------------------------------
  活動報告・新着情報 詳細ページ 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background #blog-area {
  padding: 80px 0;
}
#background #blog-area > .blog-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1110px;
  width: 78vw;
  margin: 0 auto;
}
#background #blog-area > .blog-wrapper .blog-main {
  width: calc(100% - 350px);
  margin: 0 auto 40px 0;
  background: #fff;
  border-radius: 12px;
}
#background #blog-area > .blog-wrapper .news-list-area {
  width: 320px;
  margin: 0 0 40px auto;
  background: #fff;
  border-radius: 12px;
}
#background #blog-area > .blog-wrapper .more a:hover {
  background-color: #fff;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  #background #blog-area > .blog-wrapper .blog-main ,
  #background #blog-area > .blog-wrapper .news-list-area {
    width: 100%;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #blog-area {
    padding-bottom: 40px;
  }
  #background #blog-area > .blog-wrapper {
    width: 86vw;
  }
}
/*------------------------------------
  メイン見出し 設定　ここから
-------------------------------------*/
#background #blog-area .blog-main h3.content-title {
  margin-bottom: 20px;
}
#background #blog-area .blog-main h3.content-title small {
  display: block;
  border-radius: 12px 12px 0 0;
  background: url(./images/background-blue.jpg) repeat 0 0;
  background-size: 100vw auto;
  padding: 25px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4em;
  color: #fff;
}
#background #blog-area .blog-main p.days {
  display: block;
  padding: 0 30px 40px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4em;
  color: var(--osn-color);
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #blog-area .blog-main h3.content-title strong {
    position: absolute;
    left: 0;
    top: -60px;
  }
  #background #blog-area .blog-main h3.content-title small {
    padding: 16px 20px;
    font-size: 18px;
  }
  #background #blog-area .blog-main p.days {
    display: block;
    padding: 0 20px 20px;
  }
}
/*------------------------------------
  メイン中身 設定　ここから
-------------------------------------*/
#background #blog-area .blog-main .blog-main-set {
  display: block;
  padding: 0 80px;
  margin-bottom: 80px;
}
#background #blog-area .blog-main .blog-main-set h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4em;
  margin-bottom: 1em;
  padding-left: 0.8em;
}
#background #blog-area .blog-main .blog-main-set h4:before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: var(--osn-color);
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
}
#background #blog-area .blog-main .blog-main-set figure {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 25px;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #blog-area .blog-main .blog-main-set {
    padding: 0 30px;
    margin-bottom: 40px;
  }
  #background #blog-area .blog-main .blog-main-set h4 {
    font-size: 18px;
  }
  #background #blog-area .blog-main .blog-main-set figure {
    margin-bottom: 20px;
  }
}
/*------------------------------------
  メイン中身ナビ 設定　ここから
-------------------------------------*/
#background #blog-area .blog-main .blog-navi {
  display: flex;
  border-top: 1px solid #ccc;
  padding: 25px;
}
#background #blog-area .blog-main .blog-navi li {
  margin: auto auto;
}
#background #blog-area .blog-main .blog-navi li.prev {
  margin-left: 0;
}
#background #blog-area .blog-main .blog-navi li.next {
  margin-right: 0;
  order: 100;
}
#background #blog-area .blog-main .blog-navi li.more {
  margin: auto 20px;
}
#background #blog-area .blog-main .blog-navi li.more a {
  line-height: 1.2em;
}
#background #blog-area .blog-main .blog-navi li.prev a {
  display: block;
  padding-left: 16px;
}
#background #blog-area .blog-main .blog-navi li.prev a:before ,
#background #blog-area .blog-main .blog-navi li.next a:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
  transform: rotate(45deg);
  left: 0;
  top: calc(50% - 3px);
}
#background #blog-area .blog-main .blog-navi li.next a {
  display: block;
  padding-right: 16px;
}
#background #blog-area .blog-main .blog-navi li.next a:before {
  transform: rotate(-135deg);
  left: auto;
  right: 0;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #blog-area .blog-main .blog-navi {
    flex-wrap: wrap;
    padding: 20px;
  }
  #background #blog-area .blog-main .blog-navi li.more {
    width: 100%;
    order: 100;
    margin: 10px 0 0;
  }
  #background #blog-area .blog-main .blog-navi li.more a {
    width: 100%;
  }
  #background #blog-area .blog-main .blog-navi li.next {
    order: 1;
  }
}
/*------------------------------------
  袖リスト 設定　ここから
-------------------------------------*/
#background #blog-area .news-list-area {
  padding-bottom: 30px;
}
#background #blog-area .news-list-area h3.side-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1em;
  border-bottom: 4px solid #ccc;
  padding: 30px 25px;
}
#background #blog-area .news-list-area .news-list {
  padding: 0 16px 25px;
}
#background #blog-area .news-list-area ul.news-list > li a {
  padding-right: 0;
}
#background #blog-area .news-list-area ul.news-list > li a:before {
  display: none;
}
#background #blog-area .news-list-area ul.news-list > li .days ,
#background #blog-area .news-list-area ul.news-list > li .title {
  font-size: 14px;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #blog-area .news-list-area h3.side-title {
    margin-bottom: 16px;
  }
}


/*===========================================================================
-----------------------------------------------------------------------------
  共通 検索フォーム 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background #search-field {
  padding-bottom: 80px;
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field {
    padding-bottom: 60px;
  }
}
/*------------------------------------
  見出し設定　ここから
-------------------------------------*/
#background #search-field > section.search-title {
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
#background #search-field > section.search-title > h2 {
  width: 78vw;
  max-width: 1080px;
  margin: 0 auto 40px;
}
#background #search-field > section.search-title > h2  strong {
  display: block;
  margin-bottom: 20px;
  font-size: 80px;
  font-weight: 900;
  line-height: 1em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--osn-color), -2px -2px 0 var(--osn-color),
  -2px 2px 0 var(--osn-color),  2px -2px 0 var(--osn-color),
  2px 0 0 var(--osn-color), -2px  0 0 var(--osn-color),
  0 2px 0 var(--osn-color),  0 -2px 0 var(--osn-color);
}
#background #search-field > section.search-title > h2 small {
  display: block;
  font-size: 24px;
  font-weight: 700;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1400px) {
  #background #search-field > section.search-title > h2  strong {
    font-size: 5.7vw;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1000px) {
  #background #search-field > section.search-title > h2  strong {
    text-shadow: 1px 1px 0 var(--osn-color), -1px -1px 0 var(--osn-color),
    -1px 1px 0 var(--osn-color),  1px -1px 0 var(--osn-color),
    1px 0 0 var(--osn-color), -1px  0 0 var(--osn-color),
    0 1px 0 var(--osn-color),  0 -1px 0 var(--osn-color);
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field > section.search-title > h2 {
    margin: 10px auto 20px;
  }
  #background #search-field > section.search-title > h2  strong {
    margin-bottom: 5px;
    font-size: 24px;
  }
  #background #search-field > section.search-title > h2 small {
    font-size: 18px;
  }
}
/*------------------------------------
  フリーワード 設定　ここから
-------------------------------------*/
#background #search-field .text-field {
  display: block;
  margin: 30px auto 50px;
  border: 1px solid #000;
  border-radius: 25px;
  position: relative;
}
#background #search-field .text-field > input {
  display: block;
  width: calc(100% - 50px);
  background: transparent;
  padding: 0.8em 20px;
  line-height: 1em;
}
#background #search-field .text-field > button {
  display: block;
  width: 40px;
  height: 40px;
  border: none;
  overflow: hidden;
  text-indent: -10em;
  background: url(./images/search-button-b.svg) no-repeat 50% 50%;
  background-size: 24px 24px;
  position: absolute;
  right: 10px;
  top: calc(50% - 20px);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field .text-field {
    margin: 30px auto 30px;
  }
}
/*------------------------------------
  基本検索セット 設定　ここから
-------------------------------------*/
#background #search-field .query-area {
  margin-bottom: 40px;
}
#background #search-field .query-area > h3 {
  display: block;
  padding: 0 0 0 40px;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1em;
  position: relative;
}
#background #search-field .query-area > h3:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(./images/search-h3.svg) no-repeat 50% 50%;
  background-size: contain;
  position: absolute;
  left: 0;
  top: calc(50% - 12px);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field .query-area {
    display: none;
    margin-bottom: 20px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (min-width: 741px) {
  #background #search-field .query-area {
    display: block !important;
  }
}
/*-----------------------------------*/
#background #search-field .query-area > .query-box {
  display: block;
  padding: 30px 0 20px;
  border-bottom: 1px solid #ccc;
}
#background #search-field .query-area > .query-box h4 {
  display: block;
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 20px;
}
#background #search-field .query-area > .query-box h4 > small {
  display: inline-block;
  margin-left: 1em;
  font-weight: 400;
  font-size: 0.9em;
}
#background #search-field .query-area > .query-box ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#background #search-field .query-area > .query-box ul li {/*
  margin: 0 20px 10px 0;
  min-width: calc(20% - 20px);*/
  margin: 0 40px 10px 0;
  line-height: 1.2em;
}
#background #search-field .query-area > .query-box ul li:last-child {
  margin-right: 0;
}
#background #search-field .query-area > .query-box ul li label {
  cursor: pointer;
}
#background #search-field .query-area > .query-box ul li label > input {
  margin-right: 0.5em;
}
#background #search-field .query-area > .query-box ul#area25_checkbox {
  display: block;
}
#background #search-field .query-area > .query-box ul#area25_checkbox > li {
  border-bottom: 1px dotted #ccc;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-weight: 700;
}
#background #search-field .query-area > .query-box ul#area25_checkbox > li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#background #search-field .query-area > .query-box ul#area25_checkbox ul.city25_checkbox {
  margin: 10px 0 0;
}
#background #search-field .query-area > .query-box ul#area25_checkbox ul.city25_checkbox li {
  margin-bottom: 10px;
}
/** カラバリ **/
#background #search-field .query-area > .query-box ul#area25_checkbox .area25_bizen-nishi-chiku_checkbox {
  color: #0d98ff; }
#background #search-field .query-area > .query-box ul#area25_checkbox .area25_bizen-higashi-chiku_checkbox {
  color: #31b541; }
#background #search-field .query-area > .query-box ul#area25_checkbox .area25_binan-higashi-chiku_checkbox {
  color: #ea508f; }
#background #search-field .query-area > .query-box ul#area25_checkbox .area25_binan-nishi-chiku_checkbox {
  color: #5f3f9e; }
#background #search-field .query-area > .query-box ul#area25_checkbox .area25_bihoku-chiku_checkbox {
  color: #0b3e89; }
#background #search-field .query-area > .query-box ul#area25_checkbox .area25_mimasaka-chiku_checkbox {
  color: #ed8026; }
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field .query-area > .query-box {
    padding: 20px 0 10px;
  }
  #background #search-field .query-area > .query-box h4 {
    margin-bottom: 15px;
  }
  #background #search-field .query-area > .query-box h4 > small {
    display: block;
    margin: 0.4em 0 0;
  }
  #background #search-field .query-area > .query-box ul li {
    margin-right: 20px;
  }
  #background #search-field .query-area > .query-box ul#area25_checkbox ul.city25_checkbox li {
    margin-bottom: 10px;
  }
}
/*-----------------------------------*/
#background #search-field .query-area > .query-box .genre {
  display: inline-block;
  width: 100%;
  max-width: 500px;
  margin-bottom: 10px;
  position: relative;
}
#background #search-field .query-area > .query-box .genre:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(./images/search-button02.svg) no-repeat 50% 50%;
  background-size: contain;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: calc(50% - 15px);
  z-index: -10;
}
#background #search-field .query-area > .query-box .genre > select {
  display: block;
  width: 100%;
  border-radius: 25px;
  padding: 0.8em 40px 0.8em 20px;
  border: 1px solid #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  line-height: 1em;
  cursor: pointer;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}
/*------------------------------------
  ボタン関係 設定　ここから
-------------------------------------*/
#background #search-field .field-view {
  display: none;
  margin-bottom: 20px;
}
#background #search-field .field-view a {
  display: inline-block;
  padding-left: 40px;
}
#background #search-field .field-view a:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(./images/search-button02.svg) no-repeat 50% 50%;
  background-size: contain;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: calc(50% - 15px);
}
#background #search-field .field-view em.close {
  display: none;
}
#background #search-field .query-area.open + .field-view a:before {
  transform: rotate(180deg);
}
#background #search-field .query-area.open + .field-view em.close {
  display: inline;
}
#background #search-field .query-area.open + .field-view em.open {
  display: none;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field .field-view {
    display: block;
  }
}
/*-----------------------------------*/
#background #search-field .more button {
  padding-right: 60px;
}
#background #search-field .more button:after ,
#background #search-field .more button:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border: none;
  transform: rotate(0deg);
  background: url(./images/search-button-w.svg) no-repeat 50% 50%;
  background-size: contain;
  position: absolute;
  right: 20px;
  top: calc(50% - 12px);
}
#background #search-field .more button:before {
  background-image: url(./images/search-button-b.svg);
  z-index: 10;
  filter: Alpha(opacity=0);
  opacity: 0;
}
#background #search-field .more button:hover:before {
  filter: Alpha(opacity=100);
  opacity: 1;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field .more button {
    width: 100%;
  }
}

/*------------------------------------
  競技リスト 設定　ここから
-------------------------------------*/
#background #search-field .query-area div.view-list-set {
  display: none;
  margin-bottom: 20px;
}
#background #search-field .query-area h5.parent_term {
  display: block;
  background: url(./images/background-blue.jpg) no-repeat 0 0;
  background-size: cover;
  padding: 0.2em 60px 0.2em 1em;
  margin-bottom: 20px;
  color: #fff;
  font-weight: 700;
  filter: Alpha(opacity=100);
  opacity: 1;
  cursor: pointer;
  transition: all 0.5s ease;
}
#background #search-field .query-area h5.parent_term:hover {
  filter: Alpha(opacity=50);
  opacity: 0.5;
}
#background #search-field .query-area h5.parent_term:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  transform: rotate(45deg);
  right: 20px;
  top: calc(50% - 6px);
  transition: all 0.5s ease;
}
#background #search-field .query-area h5.parent_term.open:before {
  transform: rotate(225deg);
  top: calc(50% - 2px);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}

/*------------------------------------
  地域クラブ用マップ 設定　ここから
-------------------------------------*/
#background #search-field .svg-map-area {
  max-width: 680px;
  margin: 0 auto;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {/*
  #background #search-field .query-area > .query-box.map-query-box {
    display: none;
  }*/
  #background #search-field .svg-map-area {
    max-width: 740px;
  }
}

/*===========================================================================

  共通 検索結果・一覧ページ設定　ここから

===========================================================================*/
#background .search-list-area {
  padding: 60px 0 120px;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .search-list-area {
    padding: 40px 0 60px;
  }
}
/*------------------------------------
  ソートパーツ 設定　ここから
-------------------------------------*/
#background .sort-list {
  display: flex;
  margin-bottom: 30px;
}
#background .sort-list > li {
  margin: auto 10px auto 0;
  font-size: 14px;
  line-height: 1em;
}
#background .sort-list > li a {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #000;
  border-radius: 18px;
  background: #fff;
}
#background .sort-list > li a.active {
  border-color: var(--osn-color);
  background-color: var(--osn-color);
  color: #fff;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .sort-list > li a {
    padding: 0.8em 1em;
    font-size: 12px;
    line-height: 1em;
    border-radius: 1.3em;
  }
}

/*===========================================================================
-----------------------------------------------------------------------------
  施設一覧ページ 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .place-list-area #map {
  display: block;
  width: 100%;
  padding-top: 52%;
  background: #ccc;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 80px;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .place-list-area #map {
    padding-top: 0;
    width: 90vw;
    height: 100vw;
    margin: 0 -2vw 40px;
  }
}

/*------------------------------------
  吹き出し設定　ここから
-------------------------------------*/
#background #map .gm-style-iw-t .gm-style-iw.gm-style-iw-c {
  padding: 12px 36px 12px 24px!important;
}
#background #map .gm-style-iw-chr > .gm-style-iw-ch {
  display: none;
}
#background #map .gm-style-iw-d {
  padding: 0 !important;
  margin: 0 !important;
  overflow: auto !important;
}
/* --------- 閉じるボタン --------- */
#background #map .gm-style-iw-chr {
  position: static;
  display: block;
  line-height: 0;
}
#background #map .gm-style-iw-chr > button {
  position: absolute !important;
  width: 36px !important;
  height: 36px !important;
  top: 0 !important;
  right: 0 !important;
}
#background #map .gm-style-iw-chr > button > span {
  margin: 6px !important;
}
/* --------- 吹き出し中身 --------- */
#background #map .placemap-item {
  margin: 0;
  padding: 0;
}
#background #map .placemap-item h4 {
  font-weight: 700;
}
#background #map .placemap-item h4 a {
  color: var(--osn-color);
  text-decoration: underline;
}

/*------------------------------------
  テーブル設定　ここから
-------------------------------------*/
#background .place-list-area .place-table-wrapper {
  width: 100%;
  margin-bottom: 80px;
  overflow-x: scroll;
}
#background .place-list-area .place-list-table {
  width: 100%;
  background: #fff;
}
#background .place-list-area .place-list-table a {
  color: var(--osn-color);
  text-decoration: underline;
}
#background .place-list-area .place-list-table th ,
#background .place-list-area .place-list-table td {
  padding: 20px;
  line-height: 1.4em;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}
#background .place-list-area .place-list-table tr th:first-child {
  border-left: none;
}
#background .place-list-area .place-list-table th {
  font-weight: 700;
}
#background .place-list-area .place-list-table thead th {
  background: var(--osn-color);
  text-align: center;
  color: #fff;
}
#background .place-list-area .place-list-table .nobr {
  white-space: nowrap;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1000px) {
  #background .place-list-area .place-list-table tbody th {
    min-width: 30vw;
  }
  #background .place-list-area .place-list-table td {
    white-space: nowrap;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .place-list-area .place-table-wrapper {
    margin-bottom: 40px;
  }
  #background .place-list-area .place-list-table {
    width: auto;
  }
  #background .place-list-area .place-list-table th ,
  #background .place-list-area .place-list-table td {
    padding: 16px;
  }
  #background .place-list-area .place-list-table tbody th {
    min-width: 50vw;
  }
}
/*===========================================================================
-----------------------------------------------------------------------------
  ログインページ 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
/*------------------------------------
  見出し 設定　ここから
-------------------------------------*/
#background #search-field.other-title {
  padding-bottom: 0;
}
#background #search-field.other-title > section.search-title {
  border-bottom: none;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}
/*------------------------------------
  ログインレイアウト 設定　ここから
-------------------------------------*/
#background .login-area {
  padding: 80px 0;
}
#background .login-area > section {
  display: flex;
}
#background .login-area .login-set {
  width: calc(50% - 15px);
  margin: 0 auto 40px;
  padding-bottom: 10px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
#background .login-area .login-set.login-set1 {
  margin-left: 0;
}
#background .login-area .login-set.login-set2 {
  margin-right: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 920px) {
  #background .login-area > section {
    display: block;
  }
  #background .login-area .login-set {
    width: 100%;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .login-area {
    padding: 40px 0;
  }
  #background .login-area .login-set {
    padding-bottom: 20px;
  }
}
/*------------------------------------
  ログイン箱中身 設定　ここから
-------------------------------------*/
#background .login-area .login-set h3 {
  display: block;
  padding: 25px;
  margin-bottom: 40px;
  background: url(./images/background-blue.jpg) repeat 50% -80px;
  background-size: 100vw auto;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  color: #fff;
  text-align: center;
}
#background .login-area .login-set p {
  padding: 0 10% 50px;
}
#background .login-area .login-set p.more > em {
  display: block;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 700;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .login-area .login-set h3 {
    padding: 16px;
    font-size: 16px;
  }
  #background .login-area .login-set p {
    padding: 0 20px 30px;
  }
  #background .login-area .login-set p.more > em {
    display: block;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700;
  }
}
/*------------------------------------
  カラバリ設定　ここから
-------------------------------------*/
#background .login-area .login-set.login-set2 h3 {
  background-image: url(./images/background-pink.jpg);
}
#background .login-area .login-set .more a:hover {
  background: #fff;
}
#background .login-area .login-set.login-set2 .more a {
  background-color: #ed7eaa;
  border-color: #ed7eaa;
}
#background .login-area .login-set.login-set2 .more a:hover {
  background-color: #fff;
  color: #ed7eaa;
}
#background .login-area .login-set.login-set2 .more a:hover:before {
  border-top-color: #ed7eaa;
  border-right-color: #ed7eaa;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}
/*===========================================================================
-----------------------------------------------------------------------------
  共通 お問い合わせ 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .form-area {
  padding: 80px 0;
}
#background .form-area span.req {
  color: #f00;
}
#background .form-area p.title {
  margin-bottom: 60px;
}
#background .form-area p.title > strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--osn-color);
}
#background .form-area p.form-text {
  border-radius: 25px;
  border: 1px solid #000;
  background: #fff;
  text-align: center;
  padding: 20px;
  margin-bottom: 40px;
}
#background .form-area p.privacy-text {
  margin-top: 40px;
  font-weight: 700;
  text-align: center;
}
#background .form-area a {
  color: var(--osn-color);
  text-decoration: underline;
}
#background .form-area .more a {
  color: #fff;
  text-decoration: none;
}
#background .form-area .more a:hover {
  color: var(--osn-color);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .form-area {
    padding: 40px 0;
  }
  #background .form-area p.title {
    margin-bottom: 30px;
  }
  #background .form-area p.title > strong {
    font-size: 18px;
  }
  #background .form-area p.form-text {
    letter-spacing: 0;
    margin-bottom: 40px;
  }
  #background .form-area p.privacy-text {
    margin-top: 30px;
    text-align: left;
  }
}
/*------------------------------------
  レイアウト 設定　ここから
-------------------------------------*/
#background .form-area h4 {
  font-weight: 700;
  margin-bottom: 10px;
}
#background .form-area p {
  width: 100%;
  margin-bottom: 40px;
}
#background .form-area p:has(+ p) ,
#background .form-area p:has(+ ul) {
  margin-bottom: 10px;
}
#background .form-area ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
#background .form-area ul:has(+ p) ,
#background .form-area ul:has(+ ul) {
  margin-bottom: 0;
}
#background .form-area ul > li {
  margin: 0 20px 10px 0;
}
#background .form-area .wkly-schd-wrapper {
  margin-bottom: 40px;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .form-area h4 {
    margin-bottom: 5px;
  }
  #background .form-area p {
    margin-bottom: 20px;
  }
  #background .form-area p:has(+ p) ,
  #background .form-area p:has(+ ul) {
    margin-bottom: 5px;
  }
  #background .form-area ul {
    margin-bottom: 10px;
  }
  #background .form-area ul:has(+ p) ,
  #background .form-area ul:has(+ ul) {
    margin-bottom: 0;
  }
  #background .form-area .wkly-schd-wrapper {
    margin-bottom: 20px;
  }
}
/*-----------------------------------*/
#background .form-area .line-flow {
  display: flex;
  flex-wrap: wrap;
}
#background .form-area .line-flow > em {
  margin: auto 1em;
}
#background .form-area .line-flow > em:first-child {
  margin-left: 0;
}
#background .form-area .line-flow.address-box > em:first-child {
  width: 8em;
}
#background .form-area ul.line1 li {
  width: 100%;
}
#background .form-area ul.line2 li {
  width: calc(50% - 20px);
}
#background .form-area ul.line5 li {
  width: calc(20% - 20px);
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  #background .form-area ul.line5 li {
    width: calc(33.33% - 20px);
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .form-area .line-flow > em {
    margin: auto 0.5em;
  }
  #background .form-area .line-flow > em:first-child {
    margin-left: 0;
  }
  #background .form-area .line-flow.address-box > em:first-child {
    width: 100%;
    margin: 0 0 5px;
  }
  #background .form-area ul.line2 li ,
  #background .form-area ul.line5 li {
    width: auto;
  }
}

/*------------------------------------
  インプット 設定　ここから
-------------------------------------*/
#background .form-area textarea ,
#background .form-area input[type=text] ,
#background .form-area input[type=email] {
  width: 100%;
  padding: 0.5em 1em;
  border-radius: 25px;
  border: 1px solid #000;
  background: #fff;
}
#background .form-area input[type=text].zip {
  width: 6em !important;
}
#background .form-area input[type=text].middle {
  width: 10em;
}
#background .form-area .address-box input[type=text] {
  width: calc(100% - 8em - 20px);
}
#background .form-area input[type=radio] ,
#background .form-area input[type=checkbox] {
  margin-right: 0.5em;
}
#background .form-area textarea {
  height: 8em;
}
#background .form-area select {
  min-width: 6em;
  padding: 0.5em 1em;
  border-radius: 25px;
  border: 1px solid #000;
  background: #fff;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .form-area .address-box input[type=text] {
    width: 100%;
  }
  #background .form-area select {
    min-width: initial;
    min-width: auto;
  }
}
/*------------------------------------
  自動生成周り 設定　ここから
-------------------------------------*/
/*#background .form-area .confirm_area ,
#background .form-area input.hidden ,*/
#background .form-area div.view-list-set {
  display: none;
}
#background .form-area input.hidden {
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  font-size: 0em;
  filter: Alpha(opacity=0);
  opacity: 0;
}/*
#background .form-area div.view-list-set:nth-of-type(1) {
  display: block;
}*/
#background .form-area h4.parent_term {
  display: block;
  background: url(./images/background-blue.jpg) no-repeat 0 0;
  background-size: cover;
  padding: 0.2em 60px 0.2em 1em;
  color: #fff;
  filter: Alpha(opacity=100);
  opacity: 1;
  cursor: pointer;
  transition: all 0.5s ease;
}
#background .form-area h4.parent_term:hover {
  filter: Alpha(opacity=50);
  opacity: 0.5;
}
#background .form-area h4.parent_term:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  transform: rotate(45deg);
  right: 20px;
  top: calc(50% - 6px);
  transition: all 0.5s ease;
}
#background .form-area h4.parent_term.open:before {
  transform: rotate(225deg);
  top: calc(50% - 2px);
}

#background .form-area .wpcf7-response-output {
  display: block;
  padding: 0.5em 1em;
  font-size: 18px;
  font-weight: 700;
}
#background .form-area .wpcf7-change ,
#background .form-area .wpcf7-change > ul:last-child {
  margin-bottom: 0 !important;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}
/*------------------------------------
  確認画面用 設定　ここから
-------------------------------------*/
#background .form-area #wpcf7cpcnf table {
  width: 100%;
  margin-bottom: 60px;
}
#background .form-area #wpcf7cpcnf table tr ,
#background .form-area #wpcf7cpcnf table tr th ,
#background .form-area #wpcf7cpcnf table tr td {
  display: block;
  margin: 0;
  padding: 0;
}
#background .form-area #wpcf7cpcnf table tr th p ,
#background .form-area #wpcf7cpcnf table tr td p {
  margin: 0;
}
#background .form-area #wpcf7cpcnf table th p {
  padding-top: 40px;
  font-size: 18px;
  font-weight: 700;
}
#background .form-area #wpcf7cpcnf table th p:empty {
    display: none;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .form-area #wpcf7cpcnf table {
    margin-bottom: 40px;
  }
  #background .form-area #wpcf7cpcnf table th p {
    padding-top: 20px;
    font-size: 16px;
  }
}
/*------------------------------------
  確認画面用 ボタン設定　ここから
-------------------------------------*/
#background .form-area #wpcf7cpcnf .wpcf7cp-btns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 120px;
}

#background .form-area .wpcf7cp-btns button {
  display: inline-block;
  box-sizing: border-box;
  min-width: 200px;
  padding: 20px 40px;
  margin: 0 10px 10px;
  background: var(--osn-color);
  text-align: center;
  border: 1px solid var(--osn-color);
  border-radius: 45px;
  color: #fff;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0.2em;
  position: relative;
  z-index: 10;
}
#background .form-area .wpcf7cp-btns button.wpcf7cp-cfm-edit-btn {
  background: #fff;
  border-color:  #fff;
  color: var(--osn-color);
}
#background .form-area .wpcf7cp-btns button:hover ,
#background .form-area .wpcf7cp-btns button.wpcf7cp-cfm-edit-btn:hover {
  filter: Alpha(opacity=100);
  opacity: 1;
  background-color: #e8e8e8;
  color: var(--osn-color);
}
#background .form-area .wpcf7cp-btns button:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: calc(50% - 6px);
}
#background .form-area .wpcf7cp-btns button:hover:before {
  border-top-color: var(--osn-color);
  border-right-color: var(--osn-color);
}
#background .form-area .wpcf7cp-btns button.wpcf7cp-cfm-edit-btn:before {
  transform: rotate(225deg);
  right: auto;
  left: 20px;
  top: calc(50% - 6px);
  border-top-color: var(--osn-color);
  border-right-color: var(--osn-color);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .form-area .wpcf7cp-btns button {
    max-width: 100%;
    min-width: 180px;
    padding: 20px 40px;
    border-radius: 30px;
  }
  #background .form-area .wpcf7cp-btns button:before {
    width: 10px;
    height: 10px;
    right: 20px;
    top: calc(50% - 5px);
  }
}
/*===========================================================================
-----------------------------------------------------------------------------
  共通 その他コンテンツ 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .other-contents-area {
  padding: 80px 0;
}
#background .other-contents-area.background-white {
  border-top: 1px solid #ccc;
}
#background .other-contents-area div.mini-contents {
  width: 80%;
  margin: auto;
}
#background .other-contents-area a {
  color: var(--osn-color);
  text-decoration: underline;
  font-weight: 700;
}
#background .other-contents-area .more a {
  color: #fff;
  text-decoration: none;
}
#background .other-contents-area .more a:hover {
  color: var(--osn-color);
}
#background .other-contents-area p {
  margin-bottom: 40px;
}
#background .other-contents-area ul ,
#background .other-contents-area ol {
  padding-bottom: 0.1px;
  margin-bottom: 20px;
}
#background .other-contents-area ul li {
  margin: 0 0 20px 1.5em;
  list-style: disc;
}
#background .other-contents-area ol li {
  margin: 0 0 20px 1.5em;
  list-style: decimal;
}
#background .other-contents-area li > ul ,
#background .other-contents-area li > ol {
  margin-bottom: 0;
}
#background .other-contents-area li > ul li ,
#background .other-contents-area li > ol li {
  list-style: circle;
  margin-top: 10px;
  margin-bottom: 0;
}
#background .other-contents-area li > ol {
  counter-reset: inner-list 0;
}
#background .other-contents-area li > ol li {
  list-style: none;
  counter-increment : inner-list 1;
}
#background .other-contents-area li > ol li:before {
  position: absolute;
  right: calc(100% + 0.3em);
  content: "(" counter(inner-list) ")";
}
#background .other-contents-area .lead-text {
  font-size: 18px;
  font-weight: 700;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .other-contents-area {
    padding: 40px 0;
  }
  #background .other-contents-area div.mini-contents {
    width: 100%;
  }
  #background .other-contents-area p {
    margin-bottom: 20px;
  }
  #background .other-contents-area ul ,
  #background .other-contents-area ol ,
  #background .other-contents-area ul li ,
  #background .other-contents-area ol li {
    margin-bottom: 10px;
  }
  #background .other-contents-area .lead-text {
    font-size: 16px;
  }
}
/*------------------------------------
  リンク集 設定　ここから
-------------------------------------*/
#background .other-contents-area ul.other-link-list {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto 20px;
}
#background .other-contents-area ul.other-link-list li {
  width: calc(50% - 20px);
  margin: 0 auto 20px 0;
  padding-left: 1.5em;
  list-style: none;
}
#background .other-contents-area ul.other-link-list li:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--osn-color);
  border-right: 2px solid var(--osn-color);
  transform: rotate(45deg);
  position: absolute;
  left: 0;
  top: calc(1em - 3px);
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1000px) {
  #background .other-contents-area ul.other-link-list {
    width: 100%;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .other-contents-area ul.other-link-list {
    display: block;
  }
  #background .other-contents-area ul.other-link-list li {
    width: 100%;
  }
}
/*------------------------------------
  サイトマップ 設定　ここから
-------------------------------------*/
#background .other-contents-area .sitemap-list {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
#background .other-contents-area .sitemap-list ul {
  width: calc(50% - 20px);
  margin: 0 auto 20px 0;
}
#background .other-contents-area .sitemap-list ul li {
  margin: 0 0 20px;
  padding-left: 1.5em;
  list-style: none;
}
#background .other-contents-area .sitemap-list ul li:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--osn-color);
  border-right: 2px solid var(--osn-color);
  transform: rotate(45deg);
  position: absolute;
  left: 0;
  top: calc(1em - 3px);
}
#background .other-contents-area .sitemap-list ul.one-column {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#background .other-contents-area .sitemap-list ul.one-column li {
  width: calc(50% - 20px);
  margin: 0 auto 20px 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1000px) {
  #background .other-contents-area .sitemap-list {
    width: 100%;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .other-contents-area .sitemap-list {
    display: block;
  }
  #background .other-contents-area .sitemap-list ul ,
  #background .other-contents-area .sitemap-list ul.one-column li {
    width: 100%;
  }
}

/*===========================================================================
-----------------------------------------------------------------------------
  スポーツナビとは設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background #search-field.about-main {
  padding: 0;
  z-index: 10;
  overflow: visible;
}
#background #search-field.about-main section {
  border: none;
  margin: 0 auto 0 auto;
  text-align: center;
  width: 78vw;
  max-width: 1080px;
}
#background #search-field.about-main > section.search-title > h2 {
  margin: 0 auto;
}
#background #search-field.about-main figure {
  position: relative;
  margin: -45px auto -2em;
  z-index: 10;
}
#background #search-field.about-main figure {
  position: relative;
  margin: -45px auto -2em;
  z-index: 10;
}
#background #search-field.about-main figure:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(./images/main03-pc.svg) no-repeat 50% 100%;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1100px) {
  #background #search-field.about-main figure {
    margin: 0 auto -2em;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background #search-field.about-main section {
    width: 86vw;
  }
  #background #search-field.about-main figure {
    margin: 0;
  }
  #background #search-field.about-main figure:after {
    width: 100%;
    padding-top: 80.55%;
    height: auto;
    background-image: url(./images/main03-sp.svg);
    position: relative;
    left: auto;
    bottom: auto;
    order: 20;
    margin-bottom: -46.2vw;
  }
}
/*------------------------------------
  中身 設定　ここから
-------------------------------------*/
#background .about-area {
  z-index: 0;
  padding: 90px 0 60px;
}
#background .about-area h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--osn-color);
  margin-bottom: 40px;
}
#background .about-area p.lead-text {
  margin-bottom: 80px;
}
#background .about-area .login-area {
  display: flex;
  padding: 0;
  margin-bottom: 50px;
}
#background .about-area .login-area p.more a {
  width: 280px;
  max-width: 80%;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1330px) {
  #background .about-area .login-area .login-set h3 {
    font-size: 1.5vw;
    padding-left: 5%;
    padding-right: 5%;
    letter-spacing: 0;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1220px) {
  #background .about-area .login-area .login-set p {
    font-size: 1.475vw;
  }
  #background .about-area .login-area p.more {
    padding-left: 5%;
    padding-right: 5%;
  }
  #background .about-area .login-area p.more a {
    width: auto;
    min-width: auto;
    min-width: initial;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 920px) {
  #background .about-area .login-area {
    display: block;
    margin-bottom: 0;
  }
  #background .about-area .login-area .login-set {
    padding-bottom: 20px;
  }
  #background .about-area .login-area .login-set h3 {
    font-size: 20px;
  }
  #background .about-area .login-area .login-set p {
    font-size: 16px;
  }
  #background .about-area .login-area p.more {
    padding: 0 10% 20px;
    text-align: center;
  }
  #background .about-area .login-area p.more a {
    display: block;
    width: 80%;
    margin: auto;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-area {
    padding-top: calc(40px + 46.2vw);
    padding-bottom: 40px;
  }
  #background .about-area h2 {
    font-size: 20px;
    letter-spacing: 0;
    margin-bottom: 20px;
  }
  #background .about-area p.lead-text {
    margin-bottom: 40px;
  }
  #background .about-area .login-area .login-set {
    padding-bottom: 20px;
  }
  #background .about-area .login-area .login-set h3 {
    font-size: 18px;
    margin-bottom: 30px;
  }
  #background .about-area .login-area p.more a {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}
/*-----------------------------------*/
#background .about-area .login-area.login-area3 .login-set {
  width: calc(33.33% - 20px);
}
#background .about-area .login-area.login-area3 .login-set11 {
  margin-left: 0;
}
#background .about-area .login-area.login-area3 .login-set13 {
  margin-right: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 920px) {
  #background .about-area .login-area .login-set ,
  #background .about-area .login-area.login-area3 .login-set {
    width: 100%;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}
/*-----------------------------------*/
#background .login-area .login-set.login-set11 h3 {
  background-image: url(./images/background-yellow.jpg);
  color: #333;
}
#background .login-area .login-set.login-set11 .more a {
  background-color: #f7d21b;
  border-color: #f7d21b;
  color: #333;
}
#background .login-area .login-set.login-set11 .more a:before {
  border-color: #333;
}
#background .login-area .login-set.login-set11 .more a:hover {
  background-color: #fff;
  border-color: #333;/*
  border-color: #ff8b00;
  color: #ff8b00;*/
}
#background .login-area .login-set.login-set12 h3 {
  background-image: url(./images/background-indigo.jpg);
}
#background .login-area .login-set.login-set12 .more a {
  background-color: #133f80;
  border-color: #133f80;
}
#background .login-area .login-set.login-set12 .more a:hover {
  background-color: #fff;
  color: #133f80;
}
#background .login-area .login-set.login-set12 .more a:hover:before {
  border-color: #133f80;
}
#background .login-area .login-set.login-set13 h3 {
  background-image: url(./images/background-green.jpg);
}
#background .login-area .login-set.login-set13 .more a {
  background-color: #51b55f;
  border-color: #51b55f;
}
#background .login-area .login-set.login-set13 .more a:hover {
  background-color: #fff;
  color: #51b55f;
}
#background .login-area .login-set.login-set13 .more a:hover:before {
  border-color: #51b55f;
}
/*-----------------------------------*/
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}

/*===========================================================================

  スポーツボランティアとは 設定　ここから

===========================================================================*/
#background .about-contents-area {
  padding: 40px 0 80px;
}
#background .about-contents-area section {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}
#background .about-contents-area .about-inner {
  padding: 0 80px;
}
#background .about-contents-area h3 {
  background: url(./images/background-blue.jpg) no-repeat 0% 50%;
  background-size: 100vw;
  padding: 0.8em 1.4em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4em;
  color: #fff;
  margin-bottom: 40px;
}
#background .about-contents-area p {
  margin-bottom: 40px;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area {
    padding: 30px 0;
  }
  #background .about-contents-area section {
    margin-bottom: 30px;
  }
  #background .about-contents-area .about-inner {
    padding: 0 7vw;
  }
  #background .about-contents-area h3 {
    font-size: 20px;
    margin-bottom: 30px;
  }
  #background .about-contents-area p {
    margin-bottom: 30px;
  }
}
/*------------------------------------
  テーブル 設定　ここから
-------------------------------------*/
#background .about-contents-area table {
  width: 100%;
  margin-bottom: 20px;
}
#background .about-contents-area table th {
  min-width: 240px;
  padding: 0.5em 1.5em;
  background: var(--osn-color);
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid #9ed2ff;
  border-bottom: 1px solid #9ed2ff;
}
#background .about-contents-area table td {
  padding: 0.5em 1.5em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 920px) {
  #background .about-contents-area table {
    border-bottom: 1px solid #ccc;
  }
  #background .about-contents-area table th {
    display: block;
    width: 100%;
    border: none;
    text-align: left;
  }
  #background .about-contents-area table td {
    display: block;
    width: 100%;
    padding: 1em 1.5em;
    border: none;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area table {
    margin-bottom: 10px;
  }
  #background .about-contents-area table th {
    padding: 0.5em 1em;
  }
  #background .about-contents-area table td {
    padding: 1em 0.5em;
  }
}

/*------------------------------------
  ボランティア 設定　ここから
-------------------------------------*/
#background .about-contents-area .volunteer-inner h4 {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4em;
  padding-left: 1em;
  position: relative;
}
#background .about-contents-area .volunteer-inner h4:before {
  content: "";
  display: block;
  width: 4px;
  height: calc(100% - 0.3em);
  background: var(--osn-color);
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0.2em;
}
#background .about-contents-area .volunteer-inner em.attention {
  font-size: 14px;
}
#background .about-contents-area .volunteer-inner a {
  color: var(--osn-color);
  text-decoration: underline;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .volunteer-inner h4 {
    margin-bottom: 20px;
    font-size: 18px;
  }
  #background .about-contents-area .volunteer-inner em.attention {
    display: block;
    line-height: 1.6em;
    margin-top: 0.2em;
  }
}
/*------------------------------------
  ボランティアセット 設定　ここから
-------------------------------------*/
#background .about-contents-area .volunteer-inner {
  counter-reset: about-no 0;
}
#background .about-contents-area .volunteer-set {
  counter-increment : about-no 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 60px;
}
#background .about-contents-area .volunteer-set > p:last-child {
  margin-bottom: 0;
}
#background .about-contents-area .volunteer-set h5 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4em;
  padding-left: 50px;
  margin-bottom: 30px;
  position: relative;
}
#background .about-contents-area .volunteer-set h5:before {
  content: counter(about-no);
  display: block;
  width: 40px;
  height: 40px;
  color: #f7d21b;
  background: var(--osn-color);
  border-radius: 50%;
  text-align: center;
  letter-spacing: 0;
  line-height: 40px;
  position: absolute;
  left: 0;
  top: calc(0.7em - 20px);
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .volunteer-set {
    margin-bottom: 30px;
  }
  #background .about-contents-area .volunteer-set h5 {
    font-size: 18px;
    padding-left: 32px;
    margin-bottom: 20px;
  }
  #background .about-contents-area .volunteer-set h5:before {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    top: -0.1em;
    left: -0.2em;
  }
}

/*-----------------------------------*/
#background .about-contents-area .volunteer-set figure {
  width: calc(44% - 40px);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto 40px 0;
}
#background .about-contents-area .volunteer-set dl {
  width: 56%;
  margin: 0 0 auto auto;
}
#background .about-contents-area .volunteer-set dl dt {
  line-height: 1em;
  font-weight: 700;
  margin-bottom: 0.5em;
  color: var(--osn-color);
}
#background .about-contents-area .volunteer-set dl dd {
  line-height: 1.6em;
  margin-bottom: 40px;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1100px) {
  #background .about-contents-area .volunteer-set figure {
    width: 100%;
    max-width: 550px;
    margin: 0 auto 40px auto;
  }
  #background .about-contents-area .volunteer-set dl {
    width: 100%;
    margin: 0;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .volunteer-set figure {
    margin: 0 auto 20px;
  }
  #background .about-contents-area .volunteer-set dl dd {
    line-height: 2em;
    margin-bottom: 20px;
  }
}

/*===========================================================================

  指導者情報をさがす 設定　ここから

===========================================================================*/
/*------------------------------------
  指導者情報をさがす とは？設定　ここから
-------------------------------------*/
#background .about-contents-area .leader-inner p {
  margin-bottom: 20px;
}
#background .about-contents-area .leader-inner figure {
  width: 104%;
  margin: 0 -2% 60px;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .leader-inner figure {
    margin-bottom: 40px;
  }
}
/*------------------------------------
  指導者情報をさがす 設定　ここから
-------------------------------------*/
#background .about-contents-area .leader-inner2 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
#background .about-contents-area .leader-set {
  width: 50%;
  padding-left: 80px;
}
#background .about-contents-area .leader-set:first-child {
  padding-left: 0;
  padding-right: 80px;
  border-right: 1px solid #ccc;
}
#background .about-contents-area .leader-set figure {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1140px) {
  #background .about-contents-area .about-inner.leader-inner2 {
    padding-left: 40px;
    padding-right: 40px;
  }
  #background .about-contents-area .leader-set {
    padding-left: 40px;
  }
  #background .about-contents-area .leader-set:first-child {
    padding-left: 0;
    padding-right: 40px;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 970px) {
  #background .about-contents-area .about-inner.leader-inner2 {
    display: block;
    margin-bottom: 0;
  }
  #background .about-contents-area .leader-set ,
  #background .about-contents-area .leader-set:first-child {
    width: 100%;
    padding: 0;
    border: none;
    margin-bottom: 40px;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .about-inner.leader-inner2 {
    padding: 0 7vw;
  }
}
/*------------------------------------
  さがすセット 設定　ここから
-------------------------------------*/
#background .about-contents-area .leader-set {
  counter-reset: leader-no 0;
}
#background .about-contents-area .leader-set h4 {
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4em;
  text-align: center;
  color: var(--osn-color);
}
#background .about-contents-area .leader-set h4 small {
  display: block;
  font-size: 16px;
  text-align: center;
}
#background .about-contents-area .leader-set figure {
  position: relative;
  counter-increment : leader-no 1;
  margin-bottom: 40px;
}
#background .about-contents-area .leader-set figure:last-child {
  margin-bottom: 0;
}
#background .about-contents-area .leader-set figure:before {
  content: counter(leader-no);
  display: block;
  width: 40px;
  height: 40px;
  color: #f7d21b;
  background: var(--osn-color);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 40px;
  position: absolute;
  left: -10px;
  top: -10px;
}
#background .about-contents-area .leader-set figure > img {
  border-radius: 8px;
}
#background .about-contents-area .leader-set figure figcaption {
  display: block;
  margin-top: 1em;
  line-height: 1.6em;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .leader-set h4 {
    margin-bottom: 20px;
    font-size: 18px;
  }
  #background .about-contents-area .leader-set h4 small {
    font-size: 14px;
  }
  #background .about-contents-area .leader-set figure:before {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    left: -6px;
    top: -6px;
  }
}

/*------------------------------------
  さがすフッター設定　ここから
-------------------------------------*/
#background .about-contents-area .leader-footer {
  margin-bottom: 80px;
}
#background .about-contents-area .leader-footer p.message {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--osn-color);
}
#background .about-contents-area .leader-footer p.more a:hover {
  background-color: #fff;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1070px) {
  #background .about-contents-area .leader-footer p.message {
    text-align: left;
  }
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .about-contents-area .leader-footer {
    margin-bottom: 40px;
  }
  #background .about-contents-area .leader-footer p.message {
    font-size: 16px;
  }
  #background .about-contents-area .leader-footer p.more a {
    width: 100%;
    max-width: 340px;
  }
}

/*===========================================================================
-----------------------------------------------------------------------------
  トップページ追加探す@250715 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background .top-search-area {
  padding: 90px 0 60px;
}
#background .top-search-area ul.top-search {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
#background .top-search-area ul.top-search li {
  display: block;
  width: calc(50% - 30px);
  margin: 0 0 30px;
}
#background .top-search-area ul.top-search li a {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 30px 1em;
  border-radius: 12px;
  color: #fff;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  #background .top-search-area {
    padding: 60px 0 40px;
  }
  #background .top-search-area ul.top-search {
    margin-bottom: 40px;
  }
  #background .top-search-area ul.top-search li {
    width: calc(50% - 8px);
    margin: 0 0 20px;
    letter-spacing: 0;
  }
  #background .top-search-area ul.top-search li a {
    font-size: 16px;
    padding: 18px 0.5em;
  }
}
/*------------------------------------
  カラバリ設定　ここから
-------------------------------------*/
#background .top-search-area ul.top-search-leader li a {
  background-image: url(./images/background-blue.jpg);
}
#background .top-search-area ul.top-search-leader li:nth-of-type(2n) a {
  background-image: url(./images/background-pink.jpg);
}
#background .top-search-area ul.top-search-club li a {
  background-image: url(./images/background-yellow.jpg);
  color: #2a2a2a;
}
#background .top-search-area ul.top-search-club li:nth-of-type(2n) a {
  background-image: url(./images/background-green.jpg);
  color: #fff;
}

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}



/*===========================================================================

  設定　ここから

===========================================================================*/

/*------------------------------------
  設定　ここから
-------------------------------------*/

/*-----------------------------------*/

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}