@charset "shift_jis";

@media screen and (min-width:1176px){
#btn-menu { display:none;}
#sp-menu { display:none;}
.modal-open { display:none;}
.modal-container { display:none;}
}


@media screen and (max-width:1176px){
/*モーダルを開くボタン*/
.modal-open {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 88px;
  height: 80px;
  padding: 0 20px;
  color: #fff;
  background:#0033CC;
  z-index: 1;
  transition: all .2s ease-in;
}
 
.modal-open span {
  display: block;
  width: 100%;
  height: 5px;
  background: #fff;
}

.modal-open span:nth-of-type(1) {margin: 5px 0 0;}
.modal-open span:nth-of-type(2) {margin: 8px 0 0;}
.modal-open span:nth-of-type(3) {margin: 8px 0 5px;}


/* メニュー */
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
  position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
  z-index: 2;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 10%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
position: relative;

	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	width: 90%;
}

/*モーダル内のコンテンツの指定*/

#sp-menu-position {
  top: 0;
  left: 0;
  /*transform: translate(-50%,-50%);*/
  text-align:center;
  width:100%;
  margin:auto;

}
 
ul.sp-menu-list {
display:block;
  list-style: none;
  width:100%;
  padding:20px 0;

}

.sp-menu-list li {
	display:block;
  width : calc(100% - 40px) ;
  margin:auto;
  background-color:#0033CC;
  color:#FFFFFF;
  text-align:center;
}
 
.sp-menu-list li a {
display:block;
margin:15px;
  padding:15px;
  width:100%;
  padding:15px;
  font-size: 200%;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;

}


/*モーダルを閉じるボタンの指定*/
.modal-close{
display: block;
padding:15px;
background: #0099FF;
text-align:center;
color:#FFFFFF;
width:30%;
  font-size: 150%;
  margin:auto;
}


}