@charset "utf-8";
/* common */
/* 
<ul id="fade-in2" class="dropmenu"> のULの設定
width: 960px;は、なナビゲーション全体の横幅の設定となります。
ご自分のレイアウトにあった数値を設定しましょう。
*/
#fade-in2 .dropmenu{
  *zoom: 1;
  list-style-type: none;
}
/* 
beforeとafterを使って、プルダウン領域を
table表組として表示させます。
*/
.dropmenu:before, .dropmenu:after{
	display: table;
	overflow-y: hidden;
}
.dropmenu:after{
  clear: both;
}
/* 
メインメニューの設定となります。（プルダウンしない何時も表示されているメニュー）
width: 20%;は、メニューの個数によって値を変えましょう。
５個の場合は、全体の幅100％に対して５個で割りますので、一つのボタンが２０％となります。
ボタンのサイズをバラバラにする場合は、設定しません。width: auto;にしましょう。
*/
.dropmenu li{
  position: relative;
  float: left;
  width: 20%;
  margin: 0;
  padding: 50;
  text-align: center;
}
/* 
ボタンのメニューのテキストのデザインの設定となります。
ボタンの背景色、ボタンの文字色の設定です
*/
.dropmenu li a{
	display: block;
	margin-right: 11px;
	padding: 10px 10px;
	background-color: #ffffff;
	color: #333333;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
  color: #333333;
  font-family: 'Raleway', sans-serif;
}

.dropmenu li a:hover {
	color: #1a1a1a;
}

.dropmenu li a small {
  font-size: 14px;
}

.dropmenu li a img {
  width: 27px;
  padding-right: 5px;
}


/* 
プルダウンメニューの設定です。
*/
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin-left: 35px;
  padding: 0;
}
.dropmenu li ul li{
  width: 150%;
}
/* 
プルダウンメニューの背景色、文字色を設定します
*/
.dropmenu li ul li a{
	border-bottom: 1px solid #dcdcdc;
	background-color: rgba(255,255,255,0.7);
	text-align: left;
  font-size: 18px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.dropmenu li ul li a img {
  width: 75px;
  height: 81px;
  margin-right: 20px;
}

.dropmenu li ul li.brand a img {
  width: 250px;
  height: 81px;
  margin-right: 20px;
}


/* 
プルダウンメニューのロールオーバーの設定です。
*/
.dropmenu li:hover > a{
	background-color: ;
}
.dropmenu li a:hover{
  background: ;
  opacity: 0.9;
}



/*フェードインでおりてくる
アニメーションを使用して下してきます。
動きの部分の設定です。 top: 50%;の値で下す場所を決められます*/


#fade-in2 li ul{
  opacity: 0;
  top: 50%;
  visibility: hidden;
  transition: .5s;
}
#fade-in2 li:hover ul{
  top: 100%;
  visibility: visible;
  opacity: 1;
}