/*

menu.css
ver2018.04.05

04.05 Anywhere mpos,eft-pos追加による.w300スタイル追加
06.05 横幅調整

*/

/* === grobalmenu === */

.menu {
    position: relative;
    width: 100%;
    height: 60px;
    max-width: 1000px;
    margin: 0 auto;
	padding-top: 0px;
}

.menu a:hover {
	text-decoration: none;}
	
.menu a span:hover {
	text-decoration: none;}

.menu a { color: #333;}

.menu > li {
    float: left;
    height: 60px;
    line-height: 60px;
}

.menu > li a {
    display: block;
    /*color: #fff;*/
}

.menu > li a:hover {
    /*color: #999;*/
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
}

.menu > li:hover {
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {
background: #444;
font-size: 13px;

}

.menu__third-level li {
background: #333;
font-size: 13px;
}

.menu__second-level li a {
	color: #fff;
}

.menu__third-level li a {
	color: #fff;
}

.menu__fourth-level li a {
	color: #fff;
}

.menu__second-level li a:hover {
    background: rgba(255,255,255,0.2);
	color: #fff;
}

.menu__third-level li a:hover {
    background: #666;
	color: #fff;
	text-decoration: underline;
}

.menu__fourth-level li a:hover {
    background: #999;
	color: #fff;
}

.init-bottom {
	text-align: center;
	padding-top: 10px;
	cursor: default; }
	

/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}




/*-以下ダブル-*/


.menu > li.menu__multi {
    position: relative;
width: 140px;
height: 76px;
}

li.menu__multi:hover { background: #eee;}

.menu > li.menu__multi a {}

li.menu__multi ul.menu__second-level {
    position: absolute;
    top: 76px;
    width: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__multi:hover ul.menu__second-level {
    top: 76px;
    visibility: visible;
    opacity: 1;
}

li.menu__multi ul.menu__second-level li {
    position: relative;
}

li.menu__multi ul.menu__second-level li:hover {
    /*background: #111;*/
}

.menu > li.menu__multi  > ul.menu__second-level a {
padding-left: 15px;}

li.menu__multi ul.menu__second-level li ul.menu__third-level {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__multi ul.menu__second-level li:hover ul.menu__third-level {
    visibility: visible;
    opacity: 1;
}

li.menu__multi ul.menu__second-level li ul.menu__third-level li {
    position: relative;
}

li.menu__multi ul.menu__second-level li ul.menu__third-level li:hover {}

li.menu__multi ul.menu__second-level li ul.menu__third-level li:nth-child(1){
	 border-top: none;}

li.menu__multi ul.menu__second-level li ul.menu__third-level li ul.menu__fourth-level {
    position: absolute;
    top: -1px;
    left: 100%;
    width: 100%;
    background: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__multi ul.menu__second-level li ul.menu__third-level li:hover ul.menu__fourth-level {
    visibility: visible;
    opacity: 1;
}

.init-right:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.init-right {
	cursor: default;}


/* シングル */
li.single-unit {
	width: 85px;
	height: 76px;
	text-align: center;}
	
li.single-unit:hover {
	background: #eee;}
	
li.single-unit a { padding-top: 10px;}	
	
/* 文字数多いメニュー */
ul.w170 { width: 170px!important;}	
ul.w190 { width: 190px!important;}
ul.w200 { width: 200px!important;}
@media tv { ul.w200 { width: 240px!important;}}
ul.w210 { width: 210px!important;}
@media tv { ul.w210 { width: 250px!important;}}
ul.w220 { width: 220px!important;}
@media tv { ul.w220 { width: 260px!important;}}	
	

/* 2階層メニューのリンク */
.menu-line a:hover {
	text-decoration: underline;
}

/* 非表示メニュー */
.prepar { display: none;}


/* 2行メニュー */
.line-2 {
	line-height: 1.4;
	height: 60px;
	padding-top: 11px;
	letter-spacing: 1px;}