span,h2 ,h3{
  color:#007CE6;
  font-family: 'Roboto Condensed','sans-serif';
}
h1,p{
  font-family: 'Noto Sans JP', sans-serif;
}
.pc-hidden{
  display: none;
}
body{
  width:100%;
}
.header{
  width: 240px;
  position:fixed;
}
a img {
  transition: .3s opacity;
}
a:hover img {
  opacity: .8;
}

#sp-header{
  position:fixed;
  top:0;
  width: 220px;
  height: 110px;
}
#sp-header img:first-child{
  position: absolute;
  top: 41px;
  left: 49px;
}
#sp-header img:nth-child(2){
  position: absolute;
  top: 69px;
  left: 50px;
}
#sp-header img:nth-child(3){
  position: absolute;
  top: 69px;
  left: 119px;
}
#sp-header img:nth-child(4){
  display: none;
}

#sp-nav{
  position: fixed;
  top: 110px;
  width:220px;
  text-align: center;
  padding: 0 20px;
}
#sp-nav .top-link{
  display: inline-block;
}
#sp-nav .top-link a{
  display: block;
  padding: 10px 0;
  transition: .3s background-color;
  width: 85px;
}
#sp-nav .top-link a:hover{
  background:rgba(0,124,230,0.1);
  text-decoration: none;
}
#sp-nav .top-link span{
  display: block;
  font-size: 12px;
}
#sp-nav .nav-item{
  padding: 0;
  margin-bottom:0;
}
#sp-nav .nav-item li{
  list-style: none;
  display:inline-block;;
  width: 85px;
  margin-bottom: 10px;
}
#sp-nav .nav-item li a{
  display:inline-block;
  width:100%;
  height:100%;
  text-decoration: none;
  color:white;
  transition: .3s background-color;
  padding: 10px 0;
}
#sp-nav .nav-item li a:hover{
  background:rgba(0,124,230,0.1);
}
#sp-nav .nav-item li a:hover img{
  opacity: 1;
}
#sp-nav .nav-item li span{
  display: block;
  font-size: 12px;
  margin-top:10px;
}
#sp-nav .link{
  padding: 0;
}
#sp-nav .link li{
  list-style: none;
  margin-bottom: 10px;
}
#sp-nav .link li a{
  font-size:12px;
  font-weight: 700;
}
#sp-nav .link li.sp-hidden{
  width: 180px;
  margin-bottom: 20px;
}
#sp-nav .link li.sp-hidden a{
  color:white;
  display: block;
  height: 48px;
  background:#007CE6;
  line-height: 48px;
  transition: .3s opacity;
}
#sp-nav .link li.sp-hidden a:hover{
  opacity: .8;
  text-decoration: none;
}
#sp-nav .sns{
  list-style: none;
  padding:0;
}
#sp-nav .sns li{
  display: inline-block;
  color:#007CE6;
  font-weight: 700;
  float: left;
  margin-right: 7px;
}
#sp-nav .sns li:first-child{
  margin-left: 16px;
  margin-right:10px;
  line-height: 26px;
}
#sp-nav .sns li p{
  font-size: 16px;
  font-family: 'Roboto Condensed','sans-serif';
  margin-right: 15px;
}
#sp-nav .sns a{
  transition: .3s opacity;
}
#sp-nav .sns a:hover{
  opacity: .8;
}
#sp-nav p{
  font-size:10px;
  clear:both;
  color:#007CE6;
}
#sp-nav p.sp-hidden{
  font-size:10px;
}

.contents{
  position:absolute;
  width: calc(100% - 240px);
  left: 240px;
}
.contents .background >img{
  width: 100%;
}
.scroll{
  position:relative;
  top: -70px;
  width: 140px;
  height:140px;
  margin: 0 auto;
  background: white;
  border-radius:50%;
}
.scroll span{
  font-size:10px;
  display:block;
  position:relative;
  top: 35px;
  text-align:center;
}
@keyframes scroll {
  0% {
    opacity: 0;
    transform: translateY(-1em);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(1em);
  }
}
.scroll img{
  animation: scroll 2s infinite;
  position:relative;
  top: 30px;
  left: 70px;
}

.modal-wrapper{
  margin: 0 auto;
  width: 980px;
  position:relative;
  top:-90px;
}
.modal-wrapper .modal{
  display:none;
  margin-bottom:150px;
}
.modal-wrapper .modal.hide{
  display:block;
}
.modal_toggle{
  display: none;
}
.tab{
  position:relative;
  /*height: 135px;*/
}
.banner{
  margin-bottom: 24px;
  width:100%;
  /*height:180px;*/
  /*position:relative;*/
  /*top: -60px;*/
}
.banner p{
  margin-top:10px;
}
.banner + .banner {
  margin-top: 10px;
}
.banner img{
  width:100%;
  /*top:200px;*/
}
/*#tennis-modal .modal{
  position:relative;
  top:200px;
  margin-bottom:350px;
}
#badminton-modal .modal{
  position:relative;
  top:200px;
  margin-bottom:350px;
}*/
.tab .item{
  display:inline-block;
  position:absolute;
  top:38px;
}
.tab h2{
  display: inline-block;
  position:relative;;
  font-size: 90px;
  left:100px;
}
.tab h3{
  display: inline-block;
  position: relative;
  left:100px;
  font-size:30px;
  top:-20px;
  font-family: 'Noto Sans JP', sans-serif;
}
.tab h3 span{
  margin-left:30px;
  margin-right:30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:400;
}
.tab img.sp-hidden{
  display:block;
  width: 100%;
}
.tab-list{
  box-shadow: 0 3px 8px rgba(0,0,0,.16);
  display: flex;
  padding:0;
  /*width: 100%;*/
  cursor: pointer;
}
.tab-list li{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position:relative;
  list-style:none;
  margin:0;
  flex-basis: auto;
  /*width:240px;*/
  height:80px;
  justify-content: center;
  text-align:left;
  border: solid #007CE6;
  border-width:1px 0px 1px 1px;
  transition: .3s background-color;
  padding-left: 100px;
}
.tab-list li:hover,
.tab-list li.selected{
  background:#007CE6;
}
.tab-list li:hover h2,
.tab-list li.selected h2{
  color:white;
}
.tab-list li:hover h3,
.tab-list li.selected h3{
  color:white;
}
.tab-list li:last-child{
  border: solid 1px #007CE6;;
}
.tab-list li img{
  width:60px;
  height:60px;
  position:absolute;
  top:10px;
  left:20px;
}
.tab-list li h2{
  font-size:24px;
  color:#007CE6;
  line-height: 1;
  margin-bottom: 5px;
  position: static;
  transition: .3s color;
}
.tab-list li h3{
  font-size:12px;
  color:white;
  font-weight:400;
  color:#007CE6;
  line-height: 1.2;
  margin-bottom: 0;
  position: static;
  transition: .3s color;
}
/*#general-modal .tab-list li h2{
  position:relative;
  top:15px;
  left:0;
  font-size:24px;
  display:block;
}
#general-modal .tab-list li h3{
  position:relative;
  top:5px;
  left:0;
  display:block;
  font-size:12px;
  font-weight:400;
}*/
.modal{
  margin-top: 48px;
  /*margin-top:120px;*/
}
.modal .item{
  display:inline-block;
  width:460px;
  vertical-align: top;
  margin-bottom:30px;
}
.modal .item:nth-child(even){
  margin-right:50px;
}
.modal .item a{
  display: block;
  text-decoration: none;
}
.modal .item h2{
  font-size:14px;
  color:#12D8D0;
  margin-top:15px;
}
.modal .item h3{
  margin-bottom:15px;
  font-size:18px;
  font-family: 'Noto Sans JP', sans-serif;
}
.modal .item img{
  width:100%;
}
.modal .item p{
  font-size: 14px;
  color:black;
}
.modal .item p img{
  width: 14px;
  margin-left: 15px;
}
.modal .more{
  width: 327px;
  height: 64px;
  border: 4px solid #007CE6;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom:60px;
  border-radius: 32px;
}
.modal .more a{
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 56px;
  border-radius: 32px;
  text-align: center;
  color: #007CE6;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:bold;
  margin: 0;
  text-decoration: none;
  transition: .3s color, .3s background-color;
}
.modal .more a:hover{
  color:white;
  background:#007CE6;
}
#general-modal h1{
  width: 100%;
  height:64px;
  text-align: center;
  background: #007CE6;
  color:white;
  line-height:64px;
  margin-bottom:50px;
}
#general-modal .modal{
  margin-bottom:0;
}

.pagetop{
  width:72px;
  position:fixed;
  bottom:0;
  right:0;
  transition: .3s opacity;
}
.pagetop:hover{
  opacity: .8;
}