﻿@charset "utf-8";
/* jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する */

/* ------------------------------
   #menuList
------------------------------ */
#menuList {
	/*width: 100%;*/
	/*height: 45px;*/
	/*border-top: #aaa 1px solid;*/
	/*border-bottom: #aaa 1px solid;*/
	/*position: relative;*/
	/*z-index: 10;*/
	/*background: #ebebeb;*/
}

#menuList ul {
	/*margin: 0 auto;*/
	/*width: 800px;*/
	/*height: 45px;*/
	/*text-align: left;*/
}

#menuList ul li {
	/*width: 160px;*/
	/*height: 45px;*/
	/*float: left;*/
	/*border-left: #aaa 1px solid;*/
	/*box-sizing: border-box;*/
}

#menuList ul li:last-child {
	/*border-right: #aaa 1px solid;*/
}

#menuList ul li a {
	/*height: 45px;*/
	/*font-weight: bold;*/
	/*line-height: 45px;*/
	/*display: block;*/
	/*text-align: center;*/
	transition: all 0.2s linear;
}

#menuList ul li a + a{
    padding-left: 0;
}

#menuList ul li:hover > a {
	/*background: #fff;*/
}

#contents {
	/*margin: 0 auto;*/
	/*padding: 40px 0;*/
	/*width: 800px;*/
	/*text-align: left;*/
}

#contents p {
	/*padding-bottom: 2em;*/
	/*font-size: 1em;*/
	/*line-height: 2em;*/
}

/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media print, screen and (max-width: 800px) {
	#menuList ul {
		/*width: 100%;*/
	}

	#menuList ul li {
		/*width: 20%;*/
	}
}

/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media print, screen and (max-width: 768px) {
	#menuList {
		display: none;
	}

	#rwdMenuWrap {
		width: 100%;
		/*border-bottom: #aaa 1px solid;*/
		background-color:#FFF; /* 背景カラー */
	}

	#rwdMenuWrap #switchBtnArea {
		width: 100%;
		/*height: 60px;*/
		/*background: #3c3c3c;*/
		position: relative;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn {
		/*top: 10px;*/
		top: 35px;
		right: 10px;
		width: 40px;
		height: 40px;
		display: block;
		/*background: #a7a7a7;*/
		position: absolute;
		/*border-radius: 5px;*/
	}

	#rwdMenuWrap #switchBtnArea #switchBtn span {
		left: 20%;
		width: 60%;
		height: 4px;
		display: block;
		position: absolute;
		/*background-color: #fff;*/
		background-color: #000; /* ラインカラー */
		/*border-radius: 5px;*/
		transition: all 0.2s linear;
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
		top: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
		top: 18px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
		bottom: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
		top: 18px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
		bottom: 18px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#rwdMenuWrap ul {
		width: 100%;
		display: none;
		border-bottom:3px double #000;/* 追加 */
		margin-bottom:30px;/* 追加 */
		overflow:hidden;/* 追加 */
	}
	#rwdMenuWrap ul li {
		width: 100%;
		/*border-bottom: #aaa 1px solid;*/
		border-bottom: #000 1px solid;
	}
	#rwdMenuWrap ul li:first-child {/* 追加 */
		padding-top:70px;
	}
	#rwdMenuWrap ul li a {
		/*padding: 15px 20px;*/
		padding: 5px 30px;
		text-align: left;
		display: block;
		/*background: #ebebeb;*/
		position: relative;
		font-weight:bold;
	}

	#rwdMenuWrap ul li a:after {
		content: '';
		margin-top: -4px;
		top: 50%;
		/*right: 15px;*/
		right: 30px;
		width: 8px;
		height: 8px;
		/*color: #888;*/
		color: #000;
		font-size: 1em;
		font-weight: bold;
		line-height: 1.2em;
		display: block;
		position: absolute;
		/*border-top: 2px solid #b0b0b0;*/
		/*border-right: 2px solid #b0b0b0;*/
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#contents {
		/*width: 100%;*/
	}

	#contents p {
		/*padding: 0 20px 2em 20px;*/
	}
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
	content: " ";
	display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}

#rwdMenuWrap span.sp{
    display:inline-block;
}


@media print, screen and (min-width:768px) {
    #rwdMenuWrap span.sp{
        display:inline-block;
    }
}


@media print, screen and (min-width:1025px) {
    #rwdMenuWrap span.sp{
        display:none;
    }
}

#menuList i{
    font-size: 1.35em;
}
