@charset "utf-8";
/*==================================================
　5-2-2 2本線が×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
  /*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
  position: fixed;
  z-index: 1000;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: #fff;
}

/*ボタン内側*/

.openbtn span {
  display: inline-block;
  transition: all 0.4s; /*アニメーションの設定*/
  position: absolute;
  left: 13px;
  height: 2px;
  background-color: #666;
}

.openbtn span:nth-of-type(1) {
  top: 22px;
  width: 50%;
}

.openbtn span:nth-of-type(2) {
  top: 29px;
  width: 30%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
  top: 20px;
  left: 16px;
  transform: translateY(6px) rotate(-45deg);
  width: 35%;
}

.openbtn.active span:nth-of-type(2) {
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(45deg);
  width: 35%;
}



/*=== 5-2-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
 /*描画位置※位置は適宜調整してください*/
position:absolute;
top:625px;
left:4%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
 /*描画位置*/
position: absolute;
left:-3px;
top:-95px;
 /*テキストの形状*/
color: #2F2725;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
 -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
 content: "";
 /*描画位置*/
 position: absolute;
 bottom:0;
 left:-4px;
 /*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#2F2725;
 /*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
   0%{bottom:45px;}
  100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
   0%{opacity:0}
  50%{opacity:1;}
 80%{opacity:0.9;}
100%{opacity:0;}
}

/* 線の描写 */
.scrolldown2:after{
content:"";
 /*描画位置*/
position: absolute;
bottom:0;
left:0;
 /*線の形状*/
width:1px;
height: 50px;
background:#2F2725;
}