/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*メニュー固定*/

.fixed{
	position: fixed !important;
	top: 0;
	left:0;
	z-index:1000;
	opacity:0;
	width:100%;
	-webkit-animation: fadein_head 1s linear 0s forwards;
    -moz-animation: fadein_head 1s linear 0s forwards;
    -o-animation: fadein_head 1s linear 0s forwards;
    -ms-animation: fadein_head 1s linear 0s forwards;
    animation: fadein_head 1s linear 0s forwards; 
	}
@-webkit-keyframes fadein_head { 0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@-moz-keyframes fadein_head {    0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@-o-keyframes fadein_head {  0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@-ms-keyframes fadein_head { 0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@keyframes fadein_head { 0% { opacity: 0;}45% { opacity: 1; -webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {z-index:1000;}
.menu ul, .menu li { z-index:1000}

.menu-container {margin: 0 auto;}

/* スマホのメニューアイコン */
.menu-mobile { display: none; padding:0px}
.menu-mobile div { float:right; width:80px; padding:20px 0 0 10px}
.menu-mobile div img { width:100%; height:auto; vertical-align:middle;}

.menu > ul {
    margin: 0px auto;
    list-style: none;
    padding: 0;
    box-sizing: border-box;
	}
.menu > ul:before,
.menu > ul:after,
.menu > ul > li > ul:before,
.menu > ul > li > ul:after { content: ""; display: table;clear: both;}
.menu > ul > li a { text-decoration: none;display: block;}

.menu > ul > li > ul {
    box-sizing: border-box;
    display: none;
    list-style: outside none none;
    position: absolute;
	}
.menu > ul > li > ul:after { clear: both;}
.menu > ul > li > ul img{ float:right;}
.menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; /*float:left;*/}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
PC style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media print, screen and (min-width: 1230px) {
.menu .sp-logo { display:none;}
body {padding-top:1px; }/*0だとヘッダーが戻らない*/	
.menu { z-index:50000; font-size:16px; position:relative; display:table; float:right; margin-right:40px;}
.mb-title { display:none;}

/*.menu > ul { width:1300px; margin:0 auto; padding:4px 0;}
.g-list{ margin:0 auto; width:100%; position:absolute;}*/
.menu > ul > li{ float:left; font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", sans-serif; font-size:.9em; padding:22px 29px 20px 50px; text-align:center;}
.menu > ul > li:first-of-type{ background:url(http://waiwai-farm.co.jp/wpad/img/menuic_1.png) no-repeat left 60%;}
.menu > ul > li:nth-of-type(2){ background:url(http://waiwai-farm.co.jp/wpad/img/menuic_2.png) no-repeat left 60%;}
.menu > ul > li:nth-of-type(3){ background:url(http://waiwai-farm.co.jp/wpad/img/menuic_3.png) no-repeat left 60%;}
.menu > ul > li:nth-of-type(4){ background:url(http://waiwai-farm.co.jp/wpad/img/menuic_4.png) no-repeat left 60%;}
.menu > ul > li:nth-of-type(5){ background:url(http://waiwai-farm.co.jp/wpad/img/menuic_5.png) no-repeat left 60%;}
.menu > ul > li:last-of-type{ display:none;}

/*.menu > ul > li:nth-of-type(n+2) { margin-left:2.4em;}
.g-list li:first-of-type{ margin-left:504px;}
.lang{ background-color:#036; font-size:.8em !important; padding:17px 25px 16px !important;}
.lang figure{ text-align:center;}*/

.menu > ul > li > a{ color:#683D3D;}
.menu > ul > li:hover a{ opacity:0.7;}
.menu > ul > li:hover ul li a{ opacity:1.0;}


.menu > ul > li > ul { text-align:left; padding:10px; margin:20px auto 0; width:200px; background-color:#512404; border-radius:8px;} 
.menu > ul > li:last-of-type > ul { text-align:left; padding:10px 0 10px 10px; margin:16px auto 0; left:0; width:200px; background-color:#003;} 

.menu > ul > li:nth-of-type(2) > ul { left:230px;} 
.menu > ul > li:nth-of-type(3) > ul { left:380px;}

.menu-container {width:980px; margin:0 auto}
.menu > ul > li > ul img { float:right;border-radius: 4px; width:220px;}
.menu > ul > li > ul > div { font-size:1.2em; padding-top:15px;}
.menu > ul > li > ul > div:nth-of-type(1){ padding-top:0;}

/*メニュー背景*/
.menu > ul > li > ul > li{ width:100%; margin:4px 0 4px; float:none; border-bottom:1px dotted #FFF;}
.menu > ul > li > ul > li:hover{ border-bottom:none;}
.g-list > li > ul > li:first-of-type, .g-list > li > ul > li:nth-of-type(4){ margin-left:0 !important;}
.menu > ul > li > ul > li a{ width:100%; color:#FFF; text-align:center; display:block; font-weight:normal; padding:1em 0; font-size:.9em; border-radius:40px;}
/*.menu > ul > li > ul > li a:hover { color: #FF0;}*/

.menu > ul > li > ul > li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
justify-content: center;}/*テキスト位置*/

.menu > ul > li > ul > li a:hover{ background-color: rgba( 255, 255, 255, 1 );}
.menu > ul > li:first-of-type  > ul > li a:hover{ color:#093;}
.menu > ul > li:nth-of-type(2)  > ul > li a:hover{ color:#F60;}
.menu > ul > li:nth-of-type(3)  > ul > li a:hover{ color:#F69;}
.menu > ul > li:nth-of-type(4)  > ul > li a:hover{ color:#639;}
.menu > ul > li:last-of-type  > ul > li a:hover{ color:#099;}

.menu > ul > li:nth-of-type(3)  > ul > li:nth-of-type(5) a, .menu > ul > li:nth-of-type(3)  > ul > li:nth-of-type(7) a, .menu > ul > li:nth-of-type(3)  > ul > li:nth-of-type(8) a
{ padding:1.8em 0;}

/*多国語切替ボタン*/


/*.menu > ul > li:first-of-type > ul > li:first-of-type{ background:url(http://waiwai-farm.co.jp/wpad/img/menu1-a.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(2){ background:url(http://waiwai-farm.co.jp/wpad/img/menu1-b.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(3){ background:url(http://waiwai-farm.co.jp/wpad/img/menu1-c.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(4){ background:url(http://waiwai-farm.co.jp/wpad/img/menu1-d.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(5){ background:url(http://waiwai-farm.co.jp/wpad/img/menu1-e.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(6){ background:url(http://waiwai-farm.co.jp/wpad/img/menu1-f.jpg) no-repeat;}

.menu > ul > li:nth-of-type(2) > ul > li:first-of-type{ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-a.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(2){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-b.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(3){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-c.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(4){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-d.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(5){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-e.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(6){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-f.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(7){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-g.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(8){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-h.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(9){ background:url(http://waiwai-farm.co.jp/wpad/img/menu2-i.jpg) no-repeat;}


.menu > ul > li > ul > li a { padding:5px; margin:5px; color:#333;}
.menu > ul > li > ul > li a:hover { color:#008CEA; text-decoration:underline;}*/


.fixed {
	width:100% !important;
	margin-right:0 !important;
	padding:0 2% !important;
	background: url(http://waiwai-farm.co.jp/wpad/img/menu_haikei.png);
	height:64px !important;
	}

/*.fixed ul li { padding-top:0;}

.fixed ul{ width:1200px; margin:0 auto; right:0; left:0; padding-top:.5em;}
.fixed ul li{ width:20%; padding:10px 0;}
.fixed ul li:first-of-type{ margin-left:0 !important;}
.fixed .lang{ display:none;}

.fixed ul li ul{ margin-top:0; position:absolute;}*/




}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 1229px) {

.menu .sp-logo { height:49px; float:left; padding:3px;}

.menu > ul > li:last-of-type{ display:block;}

.show-on-mobile-menu { height:100%;}
header > div > div > h1 {}

body,html {height: 100%;margin: 0; padding: 0;}
body {min-height: 100%;position: relative;}

body { padding-top:55px;} /*固定メニュー分空ける*/

.menu { position:fixed; top:0; z-index:90000; width:100%; background-color:rgba(48,131,89,0.8);}

.mb-title { display:table; color:#FFF; font-weight:bold; font-size:1.2em; padding:0.7em 0 0 0.5em; float:left;}

	.menu h1{ display: inline-block; float:left; padding-top:7px;}
	

	.menu-container {width: 100%;}
    .menu-mobile { display: block}
	.menu-mobile a:after {content: "";display: table;}
	.menu-mobile div { padding-top:0;height:55px;display: flex; top:0;display: -webkit-flex;justify-content: center;align-items: center;}
	.menu-mobile div img { width:auto;}
    .menu-dropdown-icon:before {display: block;}
	.menu > ul {display: none; clear:both;text-indent:2%; font-weight:bold; width:100%; height:calc(100% - 55px); text-align:left; position:relative;}
	
	.show-on-mobile{min-height:calc(100% - 90px);height:calc(100% - 90px); overflow:auto}
	
	.menu > ul li { line-height: 55px;}
	.menu > ul > li > a > span { padding:0 5px; font-size:0.8em;}
	.menu > ul > li > a > span:before,
	.menu > ul > li > a > span:after {content: " ～ ";}
	
	.menu > ul li a{ color:#FFF;}
	.menu > ul > li {width: 100%; float: none;display: block; border-bottom:1px solid #FFF; color:#FFF;
	background-image:url(http://waiwai-farm.co.jp/wpad/img/icon-menu2.png); background-repeat:no-repeat; background-position:right top;}
	
	.menu > ul > li:nth-of-type(1) {border-top:1px solid #FFF;}
	.menu > ul > li:nth-of-type(6) { border:1px solid #FFF; display:table; width:94% !important; margin:10px 0 10px 10px;}
	.menu > ul > li:nth-of-type(6) figure{ float:left; padding:.5em .5em 0;}
	
    .menu > ul > li > ul {
		position: relative;
		color:#FFF;
		-webkit-overflow-scrolling:touch;
		background-color: rgba( 255, 255, 255, 0.3 );
		
		width:100%;
		margin:0;
		left:0;
		
		}
	
    .menu > ul > li > ul.normal-sub {width: 95%; margin-left:5%}
    .menu > ul > li > ul > li {}
	.menu > ul > li > ul > li a	{text-indent:30px; color:#FFF; display:block;
	background-image:url(http://waiwai-farm.co.jp/wpad/img/icon-menu3.png); background-position:12px center; background-repeat:no-repeat;}
	
    .menu .show-on-mobile {display: block;}
	
	.menu > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) span br{ display:none;}
		
	.menu > ul,
	.menu > ul > li,
	.menu > ul > li > ul,
	.menu > ul > li > ul::before,
	.menu > ul > li > ul::after
	{-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
}