/* 
- 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: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Arial, Meiryo, 'メイリオ', sans-serif; */
}

* {
    box-sizing: border-box;
}

a {
    color: #333;
}

.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: 1140px;
    margin: 0 auto;
    background: #fff;
*/
	padding:.5em 0 .5em 7em;	/*2024.04 changed		padding:.5em 0 .5em 9em;*/
	display:inline-flex;
	vertical-align:bottom;
}

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

.menu-mobile:after {
    content: "\f0c9";
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    font-size: 2.5rem;
    padding: 0;
    position: absolute;
    top: 13%;
	right:.3em;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    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 {
    float: left;
    background: #fff;
    padding: 0 1.6em 0 0;	/*2024.04changed  padding: 0 2.5em 0 0;*/
    margin: 0;
}

.menu > ul > li:last-child {
	padding-right:0;
}

.menu > ul > li a {
    text-decoration: none;
	font-size:120%;
	text-align:center;
}

.menu > ul > li a.ext {
    padding: 1.5em 0 0 1em;
	background-position:0 1.9em;
}

#top .menu > ul > li.home a,
#business .menu > ul > li.business a,
#company .menu > ul > li.company a,
#ir .menu > ul > li.ir a,
#esg .menu > ul > li.esg a,
#contact .menu > ul > li.contact a,
.menu > ul > li a:hover {
	color:#cc2c2f;
}

#top .menu > ul > li.home a span,
#business .menu > ul > li.business a span,
#company .menu > ul > li.company a span,
#ir .menu > ul > li.ir a span,
#esg .menu > ul > li.esg a span,
#contact .menu > ul > li.contact a span,
.menu > ul > li a:hover span {
	border-bottom:1px solid #cc2c2f;
}

.menu > ul > li.global a:hover span {
	border-bottom:none;
}

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

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #fff;
    padding: 1.5em 0 0;
    position: absolute;
    z-index: 99;
    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: 80%;
    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 a:hover {
	color:#df0623;
}

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

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Original style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu > ul > li > ul > li:first-child {
	background:#df0623;
	color:#fff;
	font-size:125%;
	padding:2em 1em 16em;
	width:15%;
	margin-right:2em;
}

.menu > ul > li > ul > li a.box {
	border:1px solid #ddd;
	padding:1em;
	margin:.5em 0;
	display:block;
	width:100%;
}

.menu > ul > li > ul > li a.arrow{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}
.menu > ul > li > ul > li a.arrow::before,
.menu > ul > li > ul > li a.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.menu > ul > li > ul > li a.box:before{
    left: 11em;
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 4px solid transparent;
    border-left: 4px solid #df0623;
}

.menu > ul > li > ul > li > ul > div a {
	border:0;
	font-size:110%;
}

.home .menu > ul > li a {
    padding: 1.5em 1em;
}

.home .menu > ul > li > ul {
    padding: 0;
}

.home .menu > ul > li > ul > li a {
    padding: .2em 0;
}

.home .menu > ul > li > ul > li a.box {
	padding:1em;
}



/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 1046px) and (max-width: 1150px) {
	.menu-container {
		padding:.5em 0 .5em 2.5em;
	}
}

@media screen and (min-width: 960px) and (max-width: 1045px) {
	.menu-container {
		padding:.5em 0 .5em 3em;
	}
	
	.menu > ul > li {
		padding: 0 2em 0 0;
	}
	
	.menu > ul > li a {
		font-size:100%;
	}
	
}

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
		padding-left:0;
    }
    .menu-mobile {
        display: block;
		position:absolute;
		top:.3em;
		right:.3em;		
    }
    .menu-dropdown-icon:before {
        display: block;
    }
	.menu {
		width:100%;
	}
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
		padding-right:0;
    }
    .menu > ul > li a,
	.home .menu > ul > li a {
        padding: 1em;
        width: 100%;
        display: block;
		text-align:left;
    }
	.menu > ul > li a.ext {
		padding: 1em 0 1em 2.5em;
		background-position:1em;
	}
	.menu > ul > li a img {
		display:none;
	}
	.menu > ul > li a img.icon {
		display:inline-block;
		padding-right:.5em;
	}
    .menu > ul > li > ul {
        position: relative;
		padding:0;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
		display:none;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
		margin:0;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
		padding:0;
    }
    .menu > ul > li > ul > li > ul > li .col {
		margin-bottom:0;
	}
	.menu > ul > li > ul > li > ul > li a,
	.home .menu > ul > li > ul > li > ul > li a {
		padding:1em 2em;
		width:100%;
	}
	
    .menu .show-on-mobile {
        display: block;
		overflow-y:scroll;
		max-height:100vh;	
    }
	.menu > ul > li > ul > li a.box,
	.home .menu > ul > li > ul > li a.box {
		border:none;
		padding:1em 2em;
		margin:0;
	}
	.menu > ul > li > ul > li a.box:before{
		display:none;
	}
}

@media only screen and (max-width: 768px) {
    .menu-mobile {
		top:.8em;
    }
}

@media only screen and (max-width: 480px) {
    .menu-mobile {
		top:.6em;
    }
}