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

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

/*メニュー固定*/

.fixed{
	position: fixed !important;
	top: 0;
	left:0;
	z-index:200000;
	opacity:0;
	width:100%;
	-webkit-animation: fadein_head 1s linear 0s forwards;
    -moz-animation: fadein_head 1s linear 0s forwards;
    -o-animation: fadein_head 1s linear 0s forwards;
    -ms-animation: fadein_head 1s linear 0s forwards;
    animation: fadein_head 1s linear 0s forwards; 
	}
@-webkit-keyframes fadein_head { 0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@-moz-keyframes fadein_head {    0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@-o-keyframes fadein_head {  0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@-ms-keyframes fadein_head { 0% { opacity: 0;}45% { opacity: 1;-webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}
@keyframes fadein_head { 0% { opacity: 0;}45% { opacity: 1; -webkit-animation-timing-function: ease-in; }100% { opacity: 1;}}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {z-index:300000;}
.menu ul, .menu li { z-index:300000}
.menu-container {margin: 0 auto;}

/* スマホのメニューアイコン */
.menu-mobile { display: none; padding:0px}
.menu-mobile div { float:right; width:80px; padding:20px 0 0 10px}
.menu-mobile div img { width:100%; height:auto; vertical-align:middle;}

.menu > ul {
    /*margin: 0px auto;*/
    list-style: none;
    padding: 0;
	margin:0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
	}
.menu > ul:before,
.menu > ul:after,
.menu > ul > li > ul:before,
.menu > ul > li > ul:after { content: ""; display: table;clear: both;}
.menu > ul > li a { text-decoration: none;display: block;}

.menu > ul > li > ul {
    box-sizing: border-box;
    display: none;
    list-style: outside none none;
    position: absolute;
	}
.menu > ul > li > ul:after { clear: both;}
.menu > ul > li > ul img{ float:right;}
.menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; /*float:left;*/}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
PC style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media print, screen and (min-width: 1710px) {
h1{ height:49px; float:left; padding:3px; }
.menu .sp-logo { display:none;}	

	
body {padding-top:1px; }/*0だとヘッダーが戻らない*/	
.menu { width:100%; z-index:50000; font-size:16px; padding:0; height:50px; position:absolute; bottom:0;}
.mb-title { display:none;}

/*.menu > ul { width:1300px; margin:0 auto; padding:4px 0;}*/
.g-list{ display:table; margin:0 auto;}
.menu > ul > li { float:left; font-weight:bold; text-align:center; padding:.5em 0;}
.menu > ul > li > a{ color:#FFF;}
.menu > ul > li:hover { background-color:#039;}


.menu > ul > li > a > span { display:block; color:#99D6EB; font-size:0.7em; }
.menu > ul > li > ul { text-align:left; padding:10px 0 10px 10px; left:0; width:100%; background: rgba(0,51,153,0.9); position:absolute;} 

.menu-container {width:980px; margin:0 auto}
.menu > ul > li > ul img { float:right; border-radius: 4px; width:210px;}
.menu > ul > li > ul > div { font-size:1.2em; padding-top:15px;}
.menu > ul > li > ul > div:nth-of-type(1){ padding-top:0;}

/*メニュー背景*/
.menu > ul > li > ul > li{ width:45%; margin:8px 1% 8px 0; float:left;}

.menu > ul > li > ul > li a{ width:100%; color:#FFF; text-align:center; border:1px solid #FFF; display:block; font-weight:normal; padding:1em 0; font-size:17px; font-weight: 600; }
/*.menu > ul > li > ul > li a:hover { color: #FF0;}*/

.menu > ul > li > ul > li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
justify-content: center;
}/*テキスト位置*/

.menu > ul > li > ul > li a:hover{ background-color: rgba( 255, 255, 255, 1 );}
.menu > ul > li:first-of-type  > ul > li a:hover{ color:#0080FF; }
.menu > ul > li:nth-of-type(3)  > ul > li a:hover{ color:#F60;}
.menu > ul > li:nth-of-type(4)  > ul > li a:hover{ color:#004000;}
.menu > ul > li:nth-of-type(2)  > ul > li a:hover{ color:#660000;}
.menu > ul > li:nth-of-type(5)  > ul > li a:hover{ color:#663300;}
.menu > ul > li:nth-of-type(6)  > ul > li a:hover{ color:#FF66CC;}
.menu > ul > li:nth-of-type(7)  > ul > li a:hover{ color: #6C0;}
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width:1709px){
.bg-slider{max-width: 100%; !important;} 


h1{ height:49px; float:left; padding:8px 3px 0 8px; }

.menu .sp-logo { height:49px; float:left; width:80%;} 


.show-on-mobile-menu { height:100%; }

body,html {height: 100%; margin: 0; padding: 0;}
body {min-height: 100%; position: relative;}

body { padding-top:55px;} /*固定メニュー分空ける*/

.menu { position:fixed; top:0; z-index:90000; max-width:100%; background-color: rgba( 0, 102, 204, 0.9 );}

.mb-title { display:table; color:#FFF; font-weight:bold; font-size:1.2em; padding:0.7em 0 0 0.5em; float:left;}

	.menu-container {width: 100%;}
    .menu-mobile { display: block}
	.menu-mobile a:after {content: "";display: table;}
	.menu-mobile div { padding-top:0;height:55px;display: flex; top:0;display: -webkit-flex;justify-content: center;align-items: center;}
	.menu-mobile div img { width:auto;}
    .menu-dropdown-icon:before {display: block;}
	.menu > ul {display: none; clear:both;text-indent:2%; font-weight:bold; width:100%; height:calc(100% - 55px); text-align:left;}
	
	.show-on-mobile{min-height:calc(100% - 90px);height:calc(100% - 90px); overflow:auto}
	
	.menu > ul li { line-height: 55px; width:100%;}
	.menu > ul > li > a > span { display:none;}
	.menu > ul > li > a > span:before,
	.menu > ul > li > a > span:after {content: " ～ ";}
	
	.menu > ul li a{ color:#FFF;}
	.menu > ul > li {width: 100%; float: none;display: block; border-bottom:1px solid #FFF; color:#FFF; background-repeat:no-repeat; background-position:right top;}
	.menu > ul > li:hover,
	.menu > ul > li a:hover {background-color: #6CF;}
	
	.menu > ul > li:nth-of-type(1) {border-top:1px solid #FFF;}
	.menu > ul > li:nth-of-type(3),
	.menu > ul > li:nth-of-type(6) {background-image:none;}
	
	.menu > ul > li img { display:none;}

    .menu > ul > li > ul {
		position: relative;
		color:#FFF;
		-webkit-overflow-scrolling:touch;
		background-color: rgba( 255, 255, 255, 0.3 );
		
		width:100%;
		margin:0;
		left:0;
		
		}
	
    .menu > ul > li > ul.normal-sub {width: 95%; margin-left:5%}
    .menu > ul > li > ul > li {}
	.menu > ul > li > ul > li a	{text-indent:30px; color:#FFF; display:block; background-position:12px center; background-repeat:no-repeat;}
	
    .menu .show-on-mobile {display: block;}
	
	.menu > ul > li > ul > li span br{ display:none;}
		
	.menu > ul,
	.menu > ul > li,
	.menu > ul > li > ul,
	.menu > ul > li > ul::before,
	.menu > ul > li > ul::after
	{-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
}


@media only screen and (max-width: 767px) {
h1{  float:left; padding: 11px 10px 0px 10px; width:60%; height: auto;}

}