@charset "UTF-8";
/* jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する */
/* SP用CSS記述（599px以下） */
/****** #menuList ******/
#menuList {
  display: none;
}
#menuOverlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  position: fixed;
  z-index: 9997;
}
#switchBtnArea {
  position: relative;
  /*width: 100%;
	height: 60px;
	background: #3c3c3c;
	border-bottom: #aaa 1px solid;*/
}
#switchBtnArea #switchBtn {
  top: 0; /* ハンバーガーメニューの位置 上余白 */
  right: 0; /* ハンバーガーメニューの背景色 右余白 */
  width: 60px; /* ハンバーガーメニューの幅 */
  height: 60px; /* ハンバーガーメニューの高さ */
  display: block;
  background: #036eb8; /* ハンバーガーメニューの背景色 */
  position: absolute;
  /*position: fixed;*/ /* 固定 */
  /*border-radius: 5px;*/
  z-index: 9998;
}
#switchBtnArea #switchBtn span {
  right: 28%; /* ハンバーガーメニューの線の右余白 */
  width: 44%; /* ハンバーガーメニューの線の幅 中央 */
  height: 2px; /* ハンバーガーメニューの線の太さ */
  display: block;
  position: absolute;
  background-color: #fff; /* ハンバーガーメニューの線の色 */
  border-radius: 1px;
  transition: all 0.2s linear;
}
#switchBtnArea #switchBtn span:nth-of-type(1) {
  top: 16px;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
#switchBtnArea #switchBtn span:nth-of-type(2) {
  top: 24px;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#switchBtnArea #switchBtn span:nth-of-type(3) {
  top: 32px;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
#switchBtnArea #switchBtn span:nth-of-type(3) p {
  color: #fff;
  font-size: 9px;
  line-height: 24px;
}
#switchBtnArea #switchBtn.btnClose {
  background: transparent;
}
#switchBtnArea #switchBtn.btnClose span {
  height: 3px;
  background-color: #fff;
  border-radius: 1px;
  transition: all 0.2s linear;
}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
  top: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
  -webkit-transform: scale(0);
  transform: scale(0);
}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
  top: 30px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(3) p {
  display: none;
}
#rwdMenuWrap {
  top: 0;
  right: -300px; /* スライドメニューの幅 */
  width: 300px; /* スライドメニューの幅 */
  height: 100%;
  background: #fff; /* スライドメニュー下の背景色 */
  overflow: auto;
  position: fixed;
  z-index: 9999;
}
#rwdMenuWrap ul {
  width: 100%;
  padding: 50px 0; /* スライドメニューの上下の余白 */
}
#rwdMenuWrap ul li {
  width: 100%;
  /*border-bottom: #aaa 1px solid;*/
}
#rwdMenuWrap ul li a {
  display: block;
  position: relative;
  text-align: left;
  /*font-size: 0.9em;*/
  /*font-weight: bold;*/
  line-height: 1.3em;
  background: #FFF; /* スライドメニューの背景色 */
  padding: 15px 10px 15px 40px;
}
#rwdMenuWrap ul li a:before { /*スライドメニュー後の矢印 > */
  content: '';
  margin-top: -4px;
  top: 50%;
  left: 20px;
  width: 6px; /* スライドメニュー矢印 > の大きさ */
  height: 6px; /* スライドメニュー矢印 > の大きさ */
  /*font-size: 1.5em;*/
  /*font-weight: bold;*/
  /*line-height: 1.2em;*/
  display: block;
  position: absolute;
  border-top: 1px solid #333; /* スライドメニュー矢印 > の色 */
  border-right: 1px solid #333; /* スライドメニュー矢印 > の色 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#rwdMenuWrap ul li a {
  text-decoration: none;
}
#rwdMenuWrap ul li a:link, #rwdMenuWrap ul li a:visited, #rwdMenuWrap ul li a:active {
  color: #333; /* スライドメニューの色 */
}
#rwdMenuWrap ul li a:hover {
  color: #036eb8;
}
#rwdMenuWrap ul li a img {
  width: 15px;
  height: 15px;
  background-size: contain;
  vertical-align: sub;
  margin: 0 5px;
}
/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before, #menuList > ul:after {
  content: " ";
  display: table;
}
#menuList > ul:after {
  clear: both;
}
#menuList > ul {
  *zoom: 1;
}