@charset "utf-8";

/*========= ハンバーガーメニューのCSS ===============*/

/*========= ※注意※ 文字や線の太さを変更する部分にはコメントを残しています ===============*/



/*========= ボタンのデザイン ===============*/
.openbtn1{
  border: 1.5px, solid;
  border-color: #eeeaea;
  background-color: #010729;
  position:fixed;
  top:10px;
  right: 10px;
  z-index: 9999;
  cursor: pointer;
  width: 44.68px;
  height:44.68px;
  padding:0;
}
  

/*メニューボタン2本線のデザイン*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 8px;
    height: 3px;     /*線の太さ*/  
    border-radius: 2px;     /*線の丸み*/  
    border-color:#dfdfdf;     /*線の輪郭の色*/  
    background-color: #ffffff;     /*線の色*/ 
    width: 45%;
  }



  /*1本目の線の位置*/ 
.openbtn1 span:nth-of-type(1) {
  top:13px; 
  width:28.87px;
}


  /*2本目の線の位置*/ 
.openbtn1 span:nth-of-type(2) {
  top:28px;
  width:28.87px;
}



 /*クリックされた後のメニューボタンのデザイン*/ 
.openbtn1.active{
  background-color: #4C1EAD;
  border-style:none;
  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:#ffffff;   /*線の輪郭の色*/ 
    background-color: #ffffff;     /*線の色*/ 
    
}


/*1本目の線*/ 
.openbtn1.active span:nth-of-type(1){
  transform: translateY(7.5px) rotate(45deg);   /*45度回転*/
}


/*2本目の線*/
.openbtn1.active span:nth-of-type(2){
  transform: translateY(-7.5px) rotate(-45deg);   /*45度回転*/
}


/*クリックされた後に現れるナビゲーションのレイアウト*/
.contents{
  position: absolute;
  left:0;
  top:5%;
  width: 100%;     /*横幅*/
  height:100vh;
  font-size:20px;   /*フォントサイズ*/
  background-image: url(/img/雷.png);
  background-repeat: no-repeat;
  /*background-size: cover;*/
  background-position: center center;
}


.contents a{
  color:#ffffff;   /*aタグ内のテキストを白色にする*/
  text-decoration: none;   /*aタグテキストの下線を消す*/
}




/*クリックすると展開するリストのデザイン*/

/*チェックボックスを利用して変形を実現していますが、チェックボックス自体は見えないようにしています*/
.acd-check{
  display: none;
}



/*三角形が横についてるテキストボタンのデザイン*/
.acd-label{
  text-align:center;   /*原点を中心にする*/
  color: #fff;       /*テキストの色*/
  display: block;
  margin-bottom: 1px;  /*リストの行間隔*/
  padding: 10px;       /*リストの余白*/


}


/*       ※ここより下はイジらないでください!※        */



#triangle1{
  content: '';
  position:relative;
  display:inline-block;
  padding-right:5px;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
  transition: .5s;

}

#triangle2{
  content: '';
  position:relative;
  display:inline-block;
  padding-right:5px;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
  transition: .5s;
}

#triangle3{
  content: '';
  position:relative;
  display:inline-block;
  padding-right:5px;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
  transition: .5s;
}


.triactive{
  transform: rotate(90deg);/*三角形回転*/
}



.acd-content1{
  display: none;
  text-align:center;
  color:#ffffff;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .25s;
  visibility: hidden;
}
.acd-content2{
  display: none;
  text-align:center;
  color:#ffffff;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .25s;
  visibility: hidden;
}
.acd-content3{
  display: none;
  text-align:center;
  color:#ffffff;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .25s;
  visibility: hidden;
}

.acd1active{
  display: block;
  height: 150px;
  opacity: 1;
  padding: 0px;
  visibility: visible;
}
.acd1active p{
  padding-top: 15px;
}
.acd2active{
  display: block;
  height: 150px;
  opacity: 1;
  padding: 0px;
  visibility: visible;
}

.acd3active{
  display: block;
  height: 150px;
  opacity: 1;
  padding: 0px;
  visibility: visible;
}

/*========= 1 ===============*/
.main{
  overflow-x: hidden;

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


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

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

/*========= 1 ===============*/