@charset "UTF-8";
/* CSS Document */


/*ハンバーガーの枠*/
.overlayMenuBtn  {
    position: absolute;
    top: 20px;
    right: 15px;
    height: 21px;
    cursor: pointer;
    z-index: 100001;
}
/*ハンバーガーのスタイリング*/
.overlayMenuBtn span {
	position: relative;
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 3px;
	background-color: #212121;
	/*transition: .4s;*/
  }
/*ハンバーガーの間隔*/
.overlayMenuBtn span:nth-child(1) { top: 0; }
.overlayMenuBtn span:nth-child(2) { top: 6px; }
.overlayMenuBtn span:nth-child(3) { top: 12px; }


/*=====================================================
バッテンのアニメーション
======================================================*/
  /* 通常時 */
  .overlayMenuBtn span {
    transition: all 0.3s; /* アニメーションを滑らかに */
    position: relative;
  }

  /* openクラスがついた時（バッテンにする） */
  .overlayMenuBtn.open span:nth-child(1) {
    transform: rotate( -35deg );
    top: 8px;/*9 正の値で下がる*/
  }
  .overlayMenuBtn.open span:nth-child(2) {
    opacity: 0;
  }
  .overlayMenuBtn.open span:nth-child(3) {
    transform: rotate(35deg);
    top: 4px;/*6*/
  }
	
.overlayMenuBtn.open span{
	background-color: #FFF;
}

@media (min-width:450px){
	.overlayMenuBtn {
		display: none;
	}
}


/*=====================================================
オーバーレイ
======================================================*/

/*オーバーレイする面*/
.overlayMenu {
	display: none;
	position: fixed;
	top:0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	/*background-color: var(--main-color);*/
	background-color: rgba(0,102,164,0.95) ;
	color: #FFF;
	z-index: 100000;
}
/*オーバーレイのpadding*/
.olm-inner{
	padding: 80px 40px 40px;
}
.olm-inner ul li{
	font-size: 2rem;
	margin: 1.2em 0;
}