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

* {
    box-sizing: border-box;
}


.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: 1200px;
    margin: 0 auto;
    background: #000;
	font-family:"Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

.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: 95%;
    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: #000000;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 0.8em 3em 0.5rem;
    display: block;
	color:#ffffff;
	font-size:0.8rem;
	line-height:0.9;
}

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

/*menu_active 1901*/
.menu > ul > li.active {
    background: #f0f0f0;
    color: #000;
}

.menu > ul > li.active > a {
    color: #000;
}

li.active > a.faa-parent.animated-hover > .faa-vertical {
    -webkit-animation: vertical-a 2s ease infinite;
    animation: vertical-a 2s ease infinite;
}

@keyframes vertical-a {
  0% {
    -webkit-transform: rotate(180deg) translate(0,-3px);
    -ms-transform: rotate(180deg) translate(0,-3px);
    transform: rotate(180deg) translate(0,-3px);
  }

  4% {
    -webkit-transform: rotate(180deg) translate(0,3px);
    -ms-transform: rotate(180deg) translate(0,3px);
    transform: rotate(180deg) translate(0,3px);
  }

  8% {
    -webkit-transform: rotate(180deg) translate(0,-3px);
    -ms-transform: rotate(180deg) translate(0,-3px);
    transform: rotate(180deg) translate(0,-3px);
  }

  12% {
    -webkit-transform: rotate(180deg) translate(0,3px);
    -ms-transform: rotate(180deg) translate(0,3px);
    transform: rotate(180deg) translate(0,3px);
  }

  16% {
    -webkit-transform: rotate(180deg) translate(0,-3px);
    -ms-transform: rotate(180deg) translate(0,-3px);
    transform: rotate(180deg) translate(0,-3px);
  }

  20% {
    -webkit-transform: rotate(180deg) translate(0,3px);
    -ms-transform: rotate(180deg) translate(0,3px);
    transform: rotate(180deg) translate(0,3px);
  }

  22%, 100% {
    -webkit-transform: rotate(180deg) translate(0,0);
    -ms-transform: rotate(180deg) translate(0,0);
    transform: rotate(180deg) translate(0,0);
  }
}
/**/

.menu > ul > li > ul {
    display: none;
    width: 100%;
	height: 100%;
	position:fixed;
    /*position: absolute;*/
    z-index: 2000;/*99*/
    left: 0;
    margin: 0;
	padding: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: 100%; /*25%*/ 
    background: none;
    float: left;
	background-color: rgba(240,240,240,0.9);
    padding: 20px;
}


.menu > ul > li > ul > li > a {
    color: #666666;
    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;
}

.g_nav18_l_f_h1{
	font-size:0.8rem;
	font-weight:bold;
}

.g_nav18_color{
	color:#666666 !important;
	padding:0 !important;
}

.g_nav18_hover a:hover{
	background:none !important;
}

.g_nav18_color > p {
    margin-bottom: 1rem;
}

.g_nav18_archive{
	background:#FFF;
	padding:1rem 2rem;
	width:40%;
	margin:0 auto;
	text-align:center;
	font-family: 'Noto Serif JP', sans-serif;
	font-size:1.2rem;
	border:#CCC 1px solid;
}


.g_nav18_guide{
	border-bottom:#000 1px solid;
	border-top:#000 1px solid;
	padding:3rem 0 2rem;
	text-align:center;
	margin:0 15px;
}

.g_nav18_guide a:hover{
	background:none !important;
}

.g_nav18_guide_text{
	font-family: 'Noto Serif JP', sans-serif;
	font-size:1.5rem;
	color:#000;
}



.g_nav18_guide_info{
	font-size:0.9rem;
	text-decoration:underline;
	font-weight:bold;
}

.g_nav18_b_t{
	font-size:0.8rem;
	font-weight:bold;
	border-bottom:#999 1px solid;
	padding-bottom:0.3rem;
}

.g_nav18_b_img{
	mix-blend-mode:multiply;
	padding:0 0.4rem 0rem;
}

.g_nav18_b_img a:hover{
	background:none !important;
}


/*item1812*/

ul.g_nav_item > li > a{
	color:#666666;
	font-size:0.9rem;
	padding:0rem 0rem 0.7rem 0.2rem !important;
}

ul.g_nav_item > li > a:hover{
	background:none;
}

.gnav_item_t{
	font-size:1.05rem;
	font-weight:bold;
}


/*なんでこのサイズなのかしら？？*/
@media screen and (min-width:976px) and ( max-width:1250px) {
.menu > ul {
    width: 945px;
	margin:0 auto;
	/*overflow:hidden;*/
}
.menu > ul > li > ul > li > ul > li {
    padding: 0px 0;
}

.menu > ul > li a {
    padding: 0.8em 2.2em 0.5rem;
}
}





/* ––––––––––––––––––––––––––––––––––––––––––––––––––
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;
    }
}*/