@charset "utf-8";

#pageslide {
  /* These styles MUST be included. Do not change. */
  display: none;
  -webkit-overflow-scrolling : touch;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  /* Specify the width of your pageslide here */
  width: 250px;
  /* These styles are optional, and describe how the pageslide will look */
  color: #FFF;

  padding-top: 0px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  overflow-y: scroll;

  background: #333;
  border: 4px solid #fff;
  -webkit-box-shadow: 0px 0px 4px #aaa;
  -moz-box-shadow: 0px 0px 4px #aaa;
  box-shadow: 0px 0px 4px #aaa;
  margin-bottom: 10px;
}

/* 右寄せメニュについての記述*/

/* Header
================================================== */

.mobile-header-top{
  position: fixed;
  right: 0px;
  top: 0px;
  width: 60px;

  /* bodyよりもボタンが優先表示されるように*/
  z-index: 5000;
}

@media screen and (min-width: 801px) {
  .mobile-header-top{
    display: none;
  }
}


.mobile-header-top a{
  text-decoration: none;
}

.menu_open_button{
  margin-top: 5px;

  background-repeat: no-repeat;
  background-position: 14px 8px;
  background-image: url(/theme/sn-default/images/menu_icon.png);
  background-color: #000;
  padding-top: 28px;
  text-align: center;
  width:  55px;
  height: 20px;
  color: #fff;
  font-size: 10px;
  text-decoration: none;
}
.menu_close_button{
  background-repeat: no-repeat;
  background-position: 14px 8px;
  background-image: url(/theme/sn-default/images/menu_icon.png);
  background-color: #000;
  padding-top: 28px;
  text-align: center;
  width:  55px;
  height: 20px;
  color: #fff;
  font-size: 10px;
  text-decoration: none;

  float: right;
}


/* Header Nav
================================================== */

.header-navi{
}
.header-navi .nav-header{
  background: #fff;
}
.header-navi .nav-header h2{
  float: left;
  padding: 15px 5px 5px 5px;
}
.header-navi .nav-header button{
  float: right;
  padding: 5px;
}
.header-navi .nav-header button img{
  width: 45px;
}

/*サイドバー
---------------------------------------------------------------*/

#modal { display: none; }

#modal h2{
}

#modal h2,

#modal ul{
  }

#modal ul li{
  height: 3em;
  border-bottom: 2px solid #fff;
  padding-left: 10px;
  text-align: left;
  }

#modal ul li a{
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 10px 10px 20px;
}

.close{
  text-align: right;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.close a{
}

.open{
  display:block;
  margin-top: 7px;
  margin-right: 7px;
  float: right;
}

.open img{
  vertical-align:middle;
}