/* 
- 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
?????????????????????????????????????????????????? */

body {
}


/* ??????????????????????????????????????????????????
megamenu.js STYLE STARTS HERE
?????????????????????????????????????????????????? */


/* ??????????????????????????????????????????????????
Screen style's
?????????????????????????????????????????????????? */
.menu{
    font-family: 'M PLUS Rounded 1c',ŸàƒSƒVƒbƒN‘Ì, 'Yu Gothic', YuGothic,"Hiragino Kaku Gothic ProN","Meiryo", sans-serif;
}
.menu-container {
    width: 1300px;
    margin: 0 auto;
    background: #fff;
	border-radius: 15px;
/*    box-shadow: 0px 0px 2px 0px #8bad5c;*/
	box-shadow: 0px 0px 2px 0px #666;
/*    border: solid 4px #8bad5c;*/
}

.menu-mobile {
    display: none;
}

.menu-mobile:after {
    content: "";
    position: relative;
    background: url(../img/menu_btn.png);
	background-size: contain;
	background-repeat:no-repeat;
    width: 10vw;
    height: 11vw;
    display: block;
	filter: drop-shadow(0px 0px 2px #666);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    padding: 0;
    margin: 0;
	float:left;
	width: 16.6%;
    text-align: center;
    border-right: dotted 1px #abc48a;
}
.menu > ul > li:last-child{
	border:0;
    width: 17%;
    border-radius: 0 10px 10px 0;
}
.fixed_menu .menu > ul > li:last-child{
    border-radius: 0;
}
.menu > ul > li > a {
	height: 75px;
    padding-top: 25px;
    text-decoration: none;
    display: block;
	font-weight: bold;
	font-size: 1.1em;
	color:#546A35;
    background: url(../img/main_menu_open_g.png);
    background-repeat: no-repeat;
    background-size: 5%;
    background-position: 90% 50%;
}
.menu > ul > li > a.no_open {
    background:url(../img/melon_chan.png);
    background-size: 18%;
    background-repeat: no-repeat;
	background-position: 12% 34%;
}

.menu > ul > li a.two_line {
	padding-top: 11px;
}
.main_menu_yamada1{
	font-size: 1em;
    display: block;
    margin-top: 5px;
}
.main_menu_yamada2{
	font-size: 0.7em;
    display: block;
}
.main_menu_machi1{
	font-size: 1em;
    display: block;
}
.main_menu_machi1{
	font-size: 1em;
    display: block;
}
.main_menu_sub{
    font-size: 0.9em;
    float: left;
    width: fit-content !important;
    margin-right: 3%;
    margin-left: 2%;
    margin-top: -4%;
    color: #777 !important;
}
.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    position: absolute;
    z-index: 99;
    top: 75px;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 100%;
    left: 0;
    padding: 1.5% 2%;
    padding-left: 5%;
	background: #fff;
	font-weight: bold;
    font-size: 1em;
    border: solid 3px #84A754;
	box-shadow: 0px 1px 1px 1px #aaa;
	border-radius: 10px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 29%;
    text-align: left;
    margin-right: 4%;
}
#menu_dantai > li {
    width: 46%;
    text-align: left;
    margin-right: 4%;
}

.menu_image{
    height: 320px;
}
.menu_image_yamada{
    height: 200px;
}
.menu_image_center{
    height: 170px;
}
.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 0.7em 0;
    color: #84A754;
}
.menu > ul > li > ul.normal-sub > li a:hover{
	text-decoration:underline;
}
.menu > ul > li > ul.normal-sub > li a img{
	display: inline;
    height: 1em;
    margin-right: 2%;
}

.menu-dropdown-icon{
	transition     : background-color 0.1s ease-in-out 0s,box-shadow 0.1s ease-in-out 0s;
}
.menu-dropdown-icon > a{
	transition     : color 0.1s ease-in-out 0s;
}
.menu-dropdown-icon:hover{
    border-right: 0;
    background: #84A754;
}
.menu-dropdown-icon:hover > a{
	color:#fff;
}
.menu > ul > li > ul.normal-sub > li.main_menu_ttl{
	width: 32%;
    float: none;
    background: #84A754;
    padding: 0.4% 0;
    border-radius: 100px;
    color: #fff;
    margin-bottom: 1%;
    margin-left: -3%;
    text-align: center;
    display: none;
}
/*fixed menu*/
.fixed_ttl{
	z-index:10;
	opacity: 1;
}
.fixed_ttl .head_ttl{
    background: rgba(255,255,255,0.95);
}
.fixed_ttl .head_ttl_box{
	height:auto;
	padding: 0.5% 0;
}
.fixed_ttl .head_ttl_box a {
    background: none;
	width: 19%;
    padding: 0 2%;
}
.fixed_ttl .head_menu{
    z-index: 12;
    background: none;
    top: -40px;
}

.fixed_menu div.menu-container{
	background: none;
    box-shadow: none;
	border:0;
    margin-top: 0;
}
.fixed_menu .menu{
	width:70%;
	float: right;
}
.fixed_menu .menu > ul{
	position:static;
}

.fixed_menu .normal-sub{
	margin: 0 10%;
    width: 60% !important;
	right:0;
	left:auto !important;
}

.fixed_menu .menu > ul > li {
	border:0;
}
.fixed_menu .menu > ul > li > a {
    height: 80px;
}
.fixed_menu .menu > ul > li > ul {
    top: 80px;
}
nav.fixed_menu{
	position: fixed !important;
	top: 10px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100%;
    z-index: 11;
}
/************/




/* ??????????????????????????????????????????????????
Mobile style's
?????????????????????????????????????????????????? */

@media only screen and (max-width: 960px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
/*        display: block;
*/    }
    .menu > ul {

    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
/*        float: none;
        width: 100%;
        margin-top: 20px;*/
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
}