/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


#megamenu {
  display: none;
}

/* -----------------------------------------------
Screen style's
----------------------------------------------- */
@media screen and ( min-width : 768px ) {
/*//////////// ７６８ｐｘ以上からのデザイン ///////////////////////////////////////////////////////////////////////////*/

#megamenu {
  display: block;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  border-top: 1px #ccc solid;
  border-bottom: 2px #fe7aab solid;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
}
.menuWrap {
  max-width: 960px;
  margin: 0 auto;
}
.menu-container {
  width: 100%;
  background: #fff;
  text-align: left;
}
.menu > ul {
  margin: 0 auto;
  width: 100%;
  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;
}
.menuEng, .menuEng a {
  font-size: .6em;
  color: #999;
}
.menu > ul > li {
  float: left;
  width: 20%;
  background: #fff;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}
.menu > ul > li a {
  text-decoration: none;
  padding: 1.4em 0;
  display: block;
  border-left: 1px dotted #ddd;
  color: #fe7aab;
}
.menu > ul > li:last-child a {
  border-right: 1px dotted #ddd;
}
.menu > ul > li:hover {
  background: #feecf3;
}
.menu > ul > li > ul {
  display: none;
  width: 100%;
  background: #fff;
  border-top: 2px solid #fe7aab;
  padding: 20px;
  position: absolute;
  z-index: 97;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  box-shadow: 0px 4px 2px -2px rgba(0,0,0,0.2);
  border-radius: 0 0 12px 12px;
}
.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: 25%;
  background: none;
  float: left;
  text-align: left;
}
.menu > ul > li > ul > li a {
  color: #555;
  padding: .2em 0;
  width: 95%;
  display: block;
}
.menu > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 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: .5em 0 .5em 1em;
  margin: 0;
  position: relative;
}
.menu > ul > li > ul > li > ul > li::after {
  display: block;
  content: '';
  position: absolute;
  top: 1em;
  left: 0;
  width: 6px;
  height: 6px;
  border-right: 1px solid #fe7aab;
  border-bottom: 1px solid #fe7aab;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu > ul > li > ul > li > ul > li a {
  border: 0;
  font-size: .9em;
}
.menu > ul > li > ul > li > ul > li a:hover {
  color: #009cdd;
}
.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;
}
}