/* 
- 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; font-weight:700;}
.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;
    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: 1230px) {
.menu .sp-logo { display:none;}
body {padding-top:1px; }/*0だとヘッダーが戻らない*/	
.menu { z-index:50000; font-size:16px; width:100%; position:relative;}
.mb-title { display:none;}

/*.menu > ul { width:1300px; margin:0 auto; padding:4px 0;}*/
.g-list{ margin:0 auto;}
.menu > ul > li
{ float:left; font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", sans-serif; font-size:.9em; padding:0; text-align:center; position:relative;}
.menu > ul > li:nth-of-type(n+7) { display:none;}
.lang{ background-color:#036; font-size:.8em !important; padding:17px 25px 16px !important;}
.lang figure{ text-align:center;}

.menu > ul { float:right;}

/*カーソル乗せた色*/
.menu > ul > li > a{ color:#09C; letter-spacing:2px; padding:5em 2em 2em;}
.menu > ul > li > a:hover{ color:#096;}
.menu > ul > li:nth-of-type(1) > a{ background:url(../img/menu_ic1.png) no-repeat 50% 30%;}
.menu > ul > li:nth-of-type(2) > a{ background:url(../img/menu_ic2.png) no-repeat 50% 30%;}
.menu > ul > li:nth-of-type(3) > a{ background:url(../img/menu_ic3.png) no-repeat 50% 30%;}
.menu > ul > li:nth-of-type(4) > a{ background:url(../img/menu_ic4.png) no-repeat 50% 30%;}
.menu > ul > li:nth-of-type(5) > a{ background:url(../img/menu_ic5.png) no-repeat 50% 30%;}
.menu > ul > li:nth-of-type(6) > a{ background:url(../img/menu_ic6.png) no-repeat 50% 30%;}

/*/カーソル乗せた色*/

.menu > ul > li > ul { text-align:left; padding:10px 0 10px 10px; margin:0 auto; left:-50px;} 

/*.menu > ul > li:nth-of-type(1) > ul { right:-25%;} 
.menu > ul > li:nth-of-type(2) > ul { right:-5%;} 
.menu > ul > li:nth-of-type(3) > ul { right:-35%;}*/
.menu > ul > li:nth-of-type(5) > ul { right:-35%;}

.menu-container {width:980px; margin:0 auto}
.menu > ul > li > ul img { float:right;border-radius: 4px; width:220px;}
.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:32.3%; margin:4px 1% 4px 0; float:left;}*/
.g-list > li > ul > li:first-of-type, .g-list > li > ul > li:nth-of-type(4){ margin-left:0 !important;}
.menu > ul > li > ul > li a{ width:16em; color:#FFF; text-align:center; border:1px solid #FFF; display:block; font-weight:normal; padding:1em 0; font-size:.9em; border-radius:4px; margin-bottom:.4em; background-color:rgba(87,195,234,0.9);}
.menu > ul > li > ul > li a:hover{ background-color:rgba(24,149,197,1);}
/*.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:#093;}
.menu > ul > li:nth-of-type(2)  > ul > li a:hover{ color:#F60;}
.menu > ul > li:nth-of-type(3)  > ul > li a:hover{ color:#F69;}
.menu > ul > li:nth-of-type(4)  > ul > li a:hover{ color:#639;}
*/

.menu > ul > li:nth-of-type(3)  > ul > li:nth-of-type(5) a, .menu > ul > li:nth-of-type(3)  > ul > li:nth-of-type(7) a, .menu > ul > li:nth-of-type(3)  > ul > li:nth-of-type(8) a
{ padding:1.8em 0;}

/*多国語切替ボタン*/


/*.menu > ul > li:first-of-type > ul > li:first-of-type{ background:url(../img/menu1-a.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(2){ background:url(../img/menu1-b.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(3){ background:url(../img/menu1-c.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(4){ background:url(../img/menu1-d.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(5){ background:url(../img/menu1-e.jpg) no-repeat;}
.menu > ul > li:first-of-type > ul > li:nth-of-type(6){ background:url(../img/menu1-f.jpg) no-repeat;}

.menu > ul > li:nth-of-type(2) > ul > li:first-of-type{ background:url(../img/menu2-a.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(2){ background:url(../img/menu2-b.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(3){ background:url(../img/menu2-c.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(4){ background:url(../img/menu2-d.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(5){ background:url(../img/menu2-e.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(6){ background:url(../img/menu2-f.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(7){ background:url(../img/menu2-g.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(8){ background:url(../img/menu2-h.jpg) no-repeat;}
.menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(9){ background:url(../img/menu2-i.jpg) no-repeat;}


.menu > ul > li > ul > li a { padding:5px; margin:5px; color:#333;}
.menu > ul > li > ul > li a:hover { color:#008CEA; text-decoration:underline;}*/

.g_sub{ position:absolute; top:20px; right:0; display:table;}
.g_sub a{ display:table; color:#FFF; border-radius:50px; padding:10px 20px 10px 50px; float:left; margin-left:1em; font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", sans-serif; font-size:.9em;}
/*.g_sub a:first-of-type{ display:none;}*/
.g_sub a:nth-of-type(1){ background:url(../img/h_icon3.png) no-repeat 15px 50%, #009966;}
.g_sub a:nth-of-type(2){ background:url(../img/h_icon1.png) no-repeat 15px 50%, #009966;}
.g_sub a:nth-of-type(3){ background:url(../img/h_icon2.png) no-repeat 15px 50%, #009966;}

.fixed {
	width:100% !important;
	margin-right:0 !important;
	/*padding:0 2% !important;*/
	background: #FFF;
	height:100px;
	border-bottom:4px solid #09C;
	}

.fixed > div > nav > ul > li > a{ padding:4.2em 2em 1em;}

.fixed > div > nav > ul > li > ul > li a{ background-color:rgba(0,0,0,.8);}





/*.fixed ul li { padding-top:0;}

.fixed ul{ width:1200px; margin:0 auto; right:0; left:0; float:none; padding:0;}
.fixed ul li{ width:25%; padding:10px 0;}
.fixed ul li ul{ left:11%; right:0;}
.fixed ul li ul li a{ border:1px solid #F03; background-color:rgba(255,0,51,0.8); margin-bottom:0;}
.fixed ul li ul li a:hover{ color:#FC0;}

.fixed .lang{ display:none;}

.fixed ul li ul{ margin-top:0; position:absolute;}*/


}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 1229px) {

.menu .sp-logo { height:49px; float:left; padding:3px;}

.show-on-mobile-menu { height:100%;}
header > div > div > h1 {}

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

body {} /*固定メニュー分空ける*/

.menu { position:fixed; top:0; z-index:90000; width:100%; background: rgba(255,255,255,1);}

.menu div{ display:none;}

.lang{ position:absolute; right:90px; top:0; padding:30px 0 16px !important;}
.lang span a{ color:#036;}
.lang span:last-of-type{ border-left:4px solid #036; padding-top:0 !important;}

.mb-title { display:block; float:left; padding:1em;}
.mb-title img{ width:100%; vertical-align:bottom;}

	.menu h1{ display: inline-block; float:left; padding-top:7px;}
	

	.menu-container {width: 100%;}
    .menu-mobile { display: block}
	.menu-mobile a:after {content: "";display: table;}
	.menu-mobile div { padding-top:28px;height:55px;display: flex; top:0;display: -webkit-flex;justify-content: center;align-items: center; right:10px;}
	.menu-mobile div img { width:100%;}
    .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; position:relative;}
	
	.show-on-mobile{min-height:calc(100% - 90px);height:calc(100% - 90px); /*overflow:auto;*/}
	
	/*.menu > ul > li { line-height: 55px;}
	.menu > ul > li > a > span:before,
	.menu > ul > li > a > span:after {content: " ～ ";}*/
	
	.menu > ul li a{ color:#960;}
	
	/*スマホメニューの行*/
	.menu > ul > li {width: 96%; float: none; color:#036; font-size:1.2em; margin:0 auto 10px;}
	
	.menu > ul > li:nth-of-type(n+7) { display:block;}
	
	.menu > ul > li > a > span{ display:block; border:1px solid #960; text-align:center; padding:.5em 1%;}
	
    .menu > ul > li > ul {
		position: relative;
		-webkit-overflow-scrolling:touch;	
		width:100%;
		margin:0;
		left:0;
		padding-top:1em;
		}
	
    /*.menu > ul > li > ul.normal-sub {width: 95%; margin-left:5%}*/
    .menu > ul > li > ul > li { width:49%; float:left; border-bottom:1px dotted #FFF; margin-bottom:1em;}
	.menu > ul > li > ul > li:nth-of-type(even) { margin-left:2%;}
	.menu > ul > li > ul > li a	{ display:block; background-image:url(../img/icon-menu3.png); background-position:12px center; background-repeat:no-repeat; font-size:.9em; padding:0 0 1em; border-bottom: 1px dashed #960; text-align: center;
	}
	
    .menu .show-on-mobile {display: block;}
	
	.menu > ul > li:nth-of-type(3) > ul > li:nth-of-type(5) 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: 700px) {
	
	
	/*.mb-title { display:block; width:30%; padding:1em 0 .5em .5em;}
	.mb-title img{ width:100%;}*/
	
	.menu-mobile div { width:60px; padding-right:10px;}
	
	.lang{ right:50px;}
	
	}

@media only screen and (max-width: 480px) {
	.web_btn img { width: 35%;}

	.mb-title { width: 210px;}
}