
/* 
- 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: 'Source Sans Pro', sans-serif;
}
* {
  box-sizing: border-box;
}
a {
  color: #333;
}
.description {
  width: 80%;
  margin: 50px auto;
}

nav#site-navigation{
	display: block !important;
}
/* ??????????????????????????????????????????????????
megamenu.js STYLE STARTS HERE
?????????????????????????????????????????????????? */
/* ??????????????????????????????????????????????????
Screen style's
?????????????????????????????????????????????????? */
.menu-container {
  width: 80%;
  margin: 0 auto;
  background: #2F9DBB;
}
.menu-mobile {
  display: none;
  padding: 20px;
}
.menu-mobile:after {
  font-size: 1.8rem;
  padding: 0;
  float: right;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
}
.menu-dropdown-icon:before {
  content: "+";
  font-family: "Ionicons";
  display: none;
  cursor: pointer;
  float: right;
  padding: 19px 24px;
  background: #2F9DBB;
  color: #fff;
}

.menu-dropdown-icon.on:before {
  content: "×";
padding: 19px 24px;
}

.megamenu > ul {
max-width: 980px;
padding: 0px;
margin: 0 auto;
border-bottom: none;
border-top: none;
text-align: left;
}
.megamenu > ul:before,
.megamenu > ul:after {
  content: "";
  display: table;
}
.megamenu > ul:after {
  clear: both;
}
.megamenu > ul > li {
	width:20%;
	height:auto;
	float:left;
	margin:0;
	box-sizing: border-box;
	text-align: center;
	background:#37adcd;
	border-right:1px solid #2F9DBB;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}
.megamenu > ul > li a {
	width:100%;
	height:auto;
	display: block;
	padding:12px 0;
	color:#fff !important;
	text-decoration: none;
	font-size:14px;
}

.megamenu > ul > li:hover {
  background: #257b92;
}

.megamenu > ul > li a.link-open{
	padding-right:36px;
	background:url(https://lib.kobe-u.ac.jp/media/common/icon-open-wh.png) no-repeat right 16px center;	
}

.megamenu > ul > li a.link-open:hover{
background:url(https://lib.kobe-u.ac.jp/media/common/icon-open-wh.png) no-repeat right 16px center #37adcd;
}

/*追加20161115*/
.megamenu > ul > li a.login-key{
	padding-right:36px;
	background:url(https://lib.kobe-u.ac.jp/media/common/icon-login-wh-14.png) no-repeat right 16px center;
	background-size:14px;
}

.megamenu > ul > li a.login-key:hover{
	background:url(https://lib.kobe-u.ac.jp/media/common/icon-login-wh-14.png) no-repeat right 16px center #37adcd;
	background-size:14px;
}
/*追加ここまで*/

.megamenu > ul > li > ul {
  display: none;
  width: 100%;
  background: rgba(37,123,146,0.9);
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px #333;
}
.megamenu > ul > li > ul:before,
.megamenu > ul > li > ul:after {
  content: "";
  display: table;
}
.megamenu > ul > li > ul:after {
  clear: both;
}
.megamenu > ul > li > ul > li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}

.megamenu > ul > li > ul > li.two {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 50%;
  background: none;
  float: left;
}

.megamenu > ul > li > ul > li.three {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 33.3333%;
  background: none;
  float: left;
}

.megamenu > ul > li > ul > li a {
  color: #fff;
  padding:4px 0;
  width: 90%;
  margin:0 5%;
  display: block;
  border-bottom: 1px dotted #fff;
}

.megamenu > ul > li > ul > li  a.disabled{
	border-bottom:2px solid #fff;
}

.megamenu > ul > li > ul > li  a.disabled.noline{
	border-bottom:2x solid #fff;
	font-size:14px;
	margin-top:0px;
}

.megamenu > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
  box-sizing: border-box;
}
.megamenu > ul > li > ul > li > ul:before,
.megamenu > ul > li > ul > li > ul:after {
  content: "";
  display: table;
}
.megamenu > ul > li > ul > li > ul:after {
  clear: both;
}
.megamenu > ul > li > ul > li > ul > li {
  float: left;
  width: 100%;
  padding: 4px 0;
  margin: 0;
  font-size: auto;
}
/*追加20161115*/
.megamenu > ul > li > ul > li > ul > li.help {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: right;
}
.megamenu > ul > li > ul > li > ul > li.help a {
	font-size: 12px;
	border-bottom: none;
	-webkit-transition: none;  
	-moz-transition: none;  
	-o-transition: none;  
	transition: none; 
}
.megamenu > ul > li > ul > li > ul > li.help a:hover{
	background: rgba(0,0,0,0);
	text-decoration: underline;
}
/*追加ここまで*/
.megamenu > ul > li > ul > li > ul > li a {
  letter-spacing: 1px;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}
.megamenu > ul > li > ul > li > ul > li a.disabled{
	border-bottom:none;
}

.megamenu > ul > li > ul > li > ul > li a:hover{
	background:#37adcd;
}

.megamenu > ul > li > ul > li > ul > li.list-large.disabled{
	color: #fff;
	font-size:14px;
	padding: 4px 0;
	margin:32px 5% 0 5% ;
	width: 90%;
	display: block;
	border-bottom: 2px solid #fff;
}

.megamenu > ul > li > ul > li > ul > li ul > li{
	padding:0;
}

.megamenu > ul > li > ul > li > ul > li ul > li a {
	padding:2px 0;
	font-size:12px;
    letter-spacing: 1px;
    border-bottom:none;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}

.megamenu > ul > li > ul > li > ul > li ul > li a:before{
	content: '-';
	border: 2px solid transparent;
	display: inline-block;
	width: 10px;
	height: 10px;
	font-size:12px;
	color:#fff;
	position: relative;
	left: -8px;
	top: 50%;
	margin-top: 0px;
}

.megamenu > ul > li > ul.normal-sub {
  width: 300px;
  left: auto;
  padding: 10px 20px;
}

.megamenu > ul > li > ul.normal-sub > li {
  width: 100%;
}
.megamenu > ul > li > ul.normal-sub > li a {
	width:96%;
	border-bottom: 1px dotted #fff;
	padding: 8px 16px;
	margin:0 2%;
	letter-spacing: 1px;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}

.megamenu > ul > li > ul.normal-sub > li:last-child a{
	border:none;
	padding:8px 0 0 0;
}

.megamenu > ul > li > ul.normal-sub > li a:hover{
	background:#37adcd;
}
/* ??????????????????????????????????????????????????
Mobile style's
?????????????????????????????????????????????????? */
@media only screen and (max-width: 959px) {
  .menu-container {
    width: 100%;
  }
  .menu-mobile {
    display: block;
  }
  
  .menu-mobile{
  	width: 44px;
	height: 44px;
	display: block;
	position: absolute;
	top: 25px;
	right: 54px;
	background: url(../media/common/icon-drawer-en@2x.png) no-repeat center;
	background-size:auto 32px;
	text-indent:-9999px;
	border-radius:3px;
  }
  
    .menu-mobile.close{
	background: url(../media/common/icon-drawer-close-en@2x.png) no-repeat center;
	background-size:auto 32px;
  }
  
  .megamenu{
	  -webkit-transition: 0.3s ease-in-out;  
-moz-transition: 0.3s ease-in-out;  
-o-transition: 0.3s ease-in-out;  
transition: 0.3s ease-in-out; 
  }
  
  .menu-dropdown-icon:before {
    display: block;
  }
  .megamenu > ul {
    display: none;
    -webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
  }
  .megamenu > ul > li {
    width: 100%;
    float: none;
    display: block;
    border-bottom:1px dotted #eee;
  }
  .megamenu > ul > li a {
    padding: 1.5em;
    width: 100%;
    display: block;
  }
  .megamenu > ul > li > ul {
    position: relative;
  }
  .megamenu > ul > li > ul.normal-sub {
    width: 100%;
  }
  .megamenu > ul > li > ul > li {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  .megamenu > ul > li > ul > li:first-child {
    margin: 0;
  }
  
  .megamenu > ul > li > ul > li > ul {
    position: relative;
  }
  .megamenu > ul > li > ul > li > ul > li {
    float: none;
  }
    .megamenu > ul > li > ul > li > ul > li a{
    border-bottom: 1px dotted #fff;
    }
  
.megamenu > ul > li > ul > li > ul > li:last-child {
    margin-bottom:32px;
  }

  .megamenu .show-on-mobile {
    display: block;
  }
  
.megamenu > ul > li > ul > li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  background: none;
  float: left;
}

.megamenu > ul > li > ul > li.two {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  background: none;
  float: left;
}

.megamenu > ul > li > ul > li.three {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  background: none;
  float: left;
}

.megamenu > ul > li > ul > li  a.disabled.noline{
	border-bottom:none;
	font-size:14px;
	margin-top:-72px !important;
}


}


