@charset "UTF-8";
.menu-container {
/*    width: 80%;*/
    margin: 0 auto;
/*    background: #e9e9e9;*/
    background: #fff;
}

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

.menu-mobile:after {
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
}

.menu-dropdown-icon:before {
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
/*    width: 100%;*/
    width: 960px;
    border-left:1px solid #ffffff;
    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;
    margin: 0;
    width:16.5%;
/*    height:80px;*/
    text-align:center;
    border-right:1px solid #333;
    display:inline-block;
}
.menu > ul > li:first-child {
    border-left:1px solid #333;
}

/* グローバルメニューの高さをそろえる */
.menu > ul > li div {
    padding:7px 0;
}
.menu > ul > li:first-child div {
    padding:1px 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding-top:6px;
    padding-bottom:8px;
    color: #333;
    font-size:160%;
    font-weight:bold;
    display:block;
}

.menu > ul > li a.atnituite{
    padding-top:6px;
    padding-bottom:8px;
    display: block;
    color: #333;
    font-size:130%;
    font-weight:bold;
}

.menu > ul > li a span {
    display:block;
    color: #900;
    font-size:75%;
    font-weight:normal;
}

.menu > ul > li:hover {
    background: #900;
/*    border-right:1px solid #fff;
    border-left:1px solid #fff;*/
}

.menu > ul > li:hover a {
    padding-top:8px;
    padding-bottom:6px;
    color:#fff;
}
.menu > ul > li a:hover span {
    color:#FFCC66;
}
/* メガドロップダウン */
.menu > ul > li > ul {
    display: none;
    width: 100%;
/*  background: #f0f0f0;*/
    background: #555;
    padding: 20px;
    position: absolute;
    z-index: 1000;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    text-align:left;
}

.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: 0;
    list-style: none;
    width:100%;
    background: none;
    float: left;
    font-size:110%;

    /*padding-bottom: 0;
    width: 24%;
    padding-right:1%;*/
/*    border:1px solid yellow;*/
}

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

.menu > ul > li > ul > li a:hover {
    color:#ffa3a3;
    text-decoration: underline;
}

/* リンクなしの場合 */
.menu > ul > li > ul > li p {
    margin: 6px 0;
    padding: 4px 0 6px 0;
    width: 100%;
    color: #eee;
    display: block;
    border-bottom: 1px solid #ccc;
    font-size: 160%;
    font-weight: bold;
}


.menu > ul > li > ul > li > ul {
    display: block;
    width:100%;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
/*    border:1px solid blue;*/
    width:100%;

    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;

}

.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;
    margin-bottom:20px;
}

.menu > ul > li > ul > li > ul > li {
    /*width: 100%;
    padding: 10px 0;*/
    float: left;
    font-size:85%;
    width: 30%;
    margin:0 0 2px 2%;
    padding: 0 0 0 10px;
    background: url('../img/t1.png') left 11px no-repeat;
    position: relative;
/*    border:1px solid green;*/
}

/*
.menu > ul > li > ul > li > ul > li:nth-child(3n) {
    border:1px solid red;
}
*/

/*  メガドロップダウン内の小メニュー  */
.menu > ul > li > ul > li > ul > li a {
    border: 0;
    padding: 0;
}

.menu > ul > li > ul > li > ul > li a:hover {
    border: 0;
    color:#ffa3a3;
    text-decoration: underline;
}

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


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
@media only screen and (max-width: 959px) {
    .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;
    }
}
*/