/* 
- 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 {
    font-family: 'Source Sans Pro', sans-serif;
} */

* {
    box-sizing: border-box;
}

a {
/*    color: #333; */
    text-decoration: none;
}

.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%);
}


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


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container {
    width: 100%;
    margin: 0 auto;
/*    background: #000; */
		width:100vw;
		height:50px;
		text-align:center !important;
		margin-left: calc(((100vw - 100%) / 2) * -1) !important;
		margin-right: calc(((100vw - 100%) / 2) * -1) !important;
		display:block;
		align-items:center;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
		background:#fff;
}

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.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;
    z-index:99 !important;
}

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

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

.menu > ul > li {
/*    float: left; */
    background: none;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none !important;
    display: block;
}

.menu > ul > li:hover {
    background: #f0f0f0;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 30px 0 50px 0;
    position: absolute;
    z-index: 99 !important;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.menu > ul > li > ul.categorylist,
.menu > ul > li > ul.collelist,
.menu > ul > li > ul.supportlist {
    display: none;
	width:100vw !important;
    background: #000;
    padding-left:calc((100vw - 1000px) / 2) !important;
    padding-right:calc((100vw - 1000px) / 2) !important;
    padding-top: 30px !important;
    padding-bottom: 50px !important;
    position: absolute;
    z-index: 99 !important;
    top:49px;
    right: 0%;
    left: 0%;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    color:#fff !important;
}


.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content:"";
    display: flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:stretch !important;
    align-self:stretch !important;
}

.menu > ul > li > ul:after {
    clear: both;
}
.menu > ul > li > ul.categorylist {
	width:100%;
}
.menu > ul > li > ul.categorylist > a {
	color:#fff !important;
}
	.menu > ul > li > ul.categorylist > li {
		width:100%;
		display:flex;
		flex-wrap:nowrap !important;
		justify-content:space-between;
		align-items:stretch;
	}
	.menu > ul > li > ul.categorylist > li > .categorylist_wrap {
		width:60%;
		border-left: 1px solid #fff;
		box-sizing:border-box;
		margin:0;
		padding:2% 0% 2% 2%;
		text-align:left;
	}
	.menu > ul > li > ul.categorylist > li > .categorylist_wrap:nth-child(3) {
		min-width:25% !important;
	}
	.menu > ul > li > ul.categorylist > li > .categorylist_wrap:nth-child(1) {
		min-width:60% !important;
		border-left: 0px solid #fff;
	}
	.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul {
		width:100%;
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-items:flex-start;
		margin:0;
		padding:0;
	}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li {
			width:50%;
			font-size:14px;
			margin:0 !important;
			padding:3px !important;
			list-style:none;
			border:0;
		}
		.menu > ul > li > ul.categorylist  a  {
			text-decoration: none !important;
			color: #fff;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap:nth-child(1) > ul > li {
			width:50%;
			line-height: 2.2em;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li.category {
			width:100%;
			font-size:16px;
			font-weight:bold;
			margin:0 0 20px 0 !important;
			padding:0;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li > a {
			text-decoration:none;
			border-bottom:0;
			color:#fff;
			line-height:180%;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li > a:hover {
			background:#ccc;
			text-decoration:none;
			border-bottom:0;
		}

.menu > ul > li > ul.collelist > li .collelist_wrap,
.menu > ul > li > ul.supportlist > li .support_wrap {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
}
	.menu > ul > li > ul.collelist > li .collelist_wrap > a,
	.menu > ul > li > ul.supportlist > li .support_wrap > a {
	    width:31%;
	    color:#fff;
	    box-sizing:border-box;
	    padding:10px 20px;
	    margin:0 1%;
	    text-align:center;
	}
	.menu > ul > li > ul.collelist > li .collelist_wrap > a:hover,
	.menu > ul > li > ul.supportlist > li .support_wrap > a:hover {
	    color:#fff;
	    background:#ccc;
	}



@media only screen and (max-width: 1000px) {
.menu > ul > li > ul.categorylist {
    display: none;
    width:100vw !important;
	text-align:center !important;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left:calc((100vw - 100%) / 2);
    padding-right:calc((100vw - 100%) / 2);
}
.menu > ul > li > ul.collelist {
    display: none;
    width:100vw !important;
	text-align:center !important;
    margin: 0 auto;
    padding:0;
    box-sizing: border-box;
    padding-left:calc((100vw - 100%) / 2);
    padding-right:calc((100vw - 100%) / 2);
}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li {
			width:100%;
			font-size:12px;
			margin:0 !important;
			padding:0 !important;
			list-style:none;
			border:0;
			line-height: 3.0em;
		}
	.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li.category {
		font-size: 18px;
	}
}


@media only screen and (max-width: 767px) {

.menu > ul > li > ul.categorylist {
    display: none;
    width:100vw !important;
    height:calc(100vh - 120px ) !important;
	text-align:center !important;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left:calc((100vw - 100%) / 2);
    padding-right:calc((100vw - 100%) / 2);
    overflow-y:scroll !important;
    padding-top:10px !important;
    padding-bottom:20px !important;
}

.menu > ul > li > ul.collelist,
.menu > ul > li > ul.supportlist {
    display: none;
    width:100vw !important;
	text-align:center !important;
    margin: 0 auto;
    padding:0;
    box-sizing: border-box;
    padding-left:calc((100vw - 100%) / 2);
    padding-right:calc((100vw - 100%) / 2);
    background:#000;
    position: absolute;
    z-index: 99 !important;
    top:49px;
    left: 0% !important;
    right: 0% !important;
/*		transform: translate(-43.5%, 0%);
		-webkit-transform: translate(-43.5%, 0%);
		-ms-transform: translate(-43.5%, 0%); */
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    color:#fff !important;
}
.menu > ul > li > ul.collelist {
		transform: translate(-27.5%, 0%);
		-webkit-transform: translate(-27.5%, 0%);
		-ms-transform: translate(-27.5%, 0%);
}
.menu > ul > li > ul.supportlist {
		transform: translate(-57%, 0%);
		-webkit-transform: translate(-57%, 0%);
		-ms-transform: translate(-57%, 0%);
}

.menu > ul.header_menu > li {
	box-sizing:border-box;
    padding:0;
    margin:0;
    position:relative;
}
.menu > ul.header_menu > li > a {
	position:absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.menu > ul > li > a:hover {
    display: block;
    width:100%;
    background:#ccc;
}
	.menu > ul > li > ul.categorylist > li {
		width:100%;
		display:flex;
		flex-wrap:wrap !important;
		justify-content:space-between;
		align-items:stretch;
		margin:0 0 5px 0 !important;
	}
	.menu > ul > li > ul.categorylist > li > .categorylist_wrap {
		width:100%;
		border-left: 0px solid #fff;
		box-sizing:border-box;
		padding:1% 5%;
		text-align:left;
	}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li > a {
			width:100%;
			box-sizing:boder-box;
			padding:0.5em 1.0em;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li.category {
			width:100%;
			margin:0 0 5px 0 !important;
			padding:0;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap:nth-child(1) > ul > li {
			width:100%;
			line-height: 2.8em;
		}
.menu > ul > li > ul.collelist,
.menu > ul > li > ul.supportlist { width:100vw; max-height:80vh; }
.menu > ul > li > ul.collelist > li .collelist_wrap,
.menu > ul > li > ul.supportlist > li .support_wrap {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    overflow-y:auto;
}
.menu > ul > li > ul.collelist > li .collelist_wrap > a,
.menu > ul > li > ul.supportlist > li .support_wrap > a {
    width:48%;
	margin:0 1%;
	line-height:180%;
	box-sizing:border-box;
	padding:0.5em 1.0em !important;
	font-size:13px !important;
	text-align:left;
}
.menu > ul > li > ul.collelist > li .collelist_wrap > a > span,
.menu > ul > li > ul.supportlist > li .support_wrap > a > span {
	font-size:10px !important;
	padding-left:0em;
	transform:scale(0.7) !important;
	display:inline-block;
}
	.menu > ul > li > ul.searchlist > li {
		width:100%;
	}
}

.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: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
/*    padding: 1em 0; */
}
	/*ITEMアイコン付け足し*/
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap:nth-child(1) > ul > li span {
			display: flex;
			align-items: center;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap:nth-child(1) > ul > li span img {
			padding-right: 3%
}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li span {
					display: flex;
					align-items: center;
		}
		.menu > ul > li > ul.categorylist > li > .categorylist_wrap > ul > li span img {
			padding-right: 3%;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 467px) {
/*    .menu-container {
        width: 100%;
    }
     .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .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;
    } */
}