@charset "utf-8";

/*========= ハンバーガーメニューのCSS ===============*/
.main{
  overflow-x: hidden;
}

body{
font-family: "Zen Kaku Gothic New", sans-serif;
}


/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
  top: 0;
  width:100%;
    height: 100vh;
}



/*でかい丸の拡大*/
.circle-bg{
    position: fixed;
    z-index:150;
    /*丸の形*/
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #6A9DE3;
    /*丸のスタート位置と形状*/
    transform: scale(0);/*scaleをはじめは0に*/
    right:100px;
    top:40px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
  transform: scale(5);/*クラスが付与されたらscaleを拡大*/
}



/*ちっさい４つの丸の出現*/
.circle1.circleactive,
.circle2.circleactive,
.circle3.circleactive,
.circle4.circleactive{
  transform: scale(3);/*クラスが付与されたらscaleを拡大*/
  animation-name:gnaviAnime;
  animation-duration:1s;
  animation-delay:.1s;/*0.2 秒遅らせて出現*/
  animation-fill-mode:forwards;
  opacity:0;
}


/*ちっさい４つの丸のデザイン*/
.circle1{
  position:absolute;
  background: #F24646;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  z-index: 99;
  transform: scale(0);
  transition: all .6s;
  right:220px;
  top:20px;
}

.circle2{
  position:absolute;
  background: #F24646;
  border-radius: 50%;
  width: 50px;
  height: 20px;
  z-index: 99;
  transform: scale(0);
  transition: all .6s;
  right:80px;
  top:60px;
}

.circle3{
  position:absolute;
  background: #F24646;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  z-index: 99;
  transform: scale(0);
  transition: all .6s;
  right:200px;
  top:140px;
}

.circle4{
  position:absolute;
  background:  #F24646;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  z-index: 99;
  transform: scale(0);
  transition: all .6s;
  right:96px;
  top:153px;
}



/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}


/*ナビゲーション*/
#g-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: relative;
    z-index: 999;
    left:50%;
    top:10%;
    transform: translate(-50%,-50%);
    width: 96%;
}


/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのデザイン*/
#g-nav li{
 
  list-style: none;
}

#g-nav li a{
  color: #ffffff;
  text-decoration: none;
  padding:10px;
  display: inline;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}



/*========= ボタンのデザイン ===============*/
.openbtn1{
  border: 1.5px, solid;
  border-color: #313131;
  border-radius: 25%; 
  position:fixed;
  top:10px;
  right: 10px;
  z-index: 9999;/*ボタンを最前面に*/
  cursor: pointer;
  width: 44.68px;
  height:44.68px;
  padding:0;
  background-color: #F24646;
}
  
/*ハンバーガー3本線のデザイン*/  
.openbtn1 span{
  
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 8px;
    height: 3px;
    border-radius: 2px;
    border-color:#dfdfdf;
    background-color: #114232;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:12px; 
  width:28.87px;
}

.openbtn1 span:nth-of-type(2) {
  top:21.5px;
  width:28.87px;
}

.openbtn1 span:nth-of-type(3) {
  top:31.5px;
  width:28.87px;
}

.openbtn1.active{
  border: 1.5px, solid;
  background-color: #6A9DE3;
  border-radius: 25%; 
  position:fixed;
  top:10px;
  right: 10px;
  z-index: 9999;/*ボタンを最前面に*/
  cursor: pointer;
  width: 44.68px;
  height:44.68px;
  padding:0;
  mix-blend-mode: normal;
}

.openbtn1.active span{
  display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 8px;
    height: 3px;
    border-radius: 2px;
    border-color:#F7F6BB;
    background-color: #F7F6BB;
}


/*ナビゲーションのレイアウト*/
.contents{
  position:absolute;
  margin-top:40px;
  right:10px;
  width:600px;
}

.top{
  position:absolute;
  right:200px;
  margin-bottom:20px;
}

.time-table{
  position:absolute;
  right:40px;
  margin-top:40px;
}

.teams{
  position:absolute;
  right:180px;
  margin-top:120px;
}

.map{
  position:absolute;
  right:80px;
  margin-top:140px;
}