/*
Copyright © 2013 Adobe Systems Incorporated.
Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.megamenu {
  /*position: relative;*/
}

.accessible-megamenu {
    /*position: relative;*/
    color: #000;
    display:block;
    z-index: 2;
}

.megamenu ol {
	width: 100%;
	padding:10px 0;
	display:table;
	table-layout:fixed;
	text-align: center;
}

.megamenu ol li{
	margin:0;
	border-left:1px solid #707070;
	line-height:1.4;
	display:table-cell;
	vertical-align: middle;
}

.megamenu ol li a{
	padding:10px 20px 11px 20px;
	font-size:15px;
	font-weight:700;
	color:#000;
	text-align:center;
	display:block;
}

.megamenu ol li a.sub{
	background:url(../img/icon_link_nav.png) no-repeat center bottom / 10px;
}


@media (max-width: 1400px) {
.megamenu ol li a{
	padding:10px 0 11px 0;
}
}

.megamenu ol li a.open{
	border-bottom:3px solid #47A9DE;
}


/*メガメニュー
----------------------------------------------------*/
.accessible-megamenu .accessible-megamenu-panel {
    position: absolute;
	width:100%;
    background: rgba(255,255,255,0.95);
    display: block;
    left: -1px;
    cursor: default;

    visibility: hidden;
    top: -9999em;
	/*left:-163px;
    width:calc(100% + 163px);*/
	width:100%;
    max-height: 600px;
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
       -moz-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
        -ms-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
         -o-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
            transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
}

.accessible-megamenu .accessible-megamenu-panel.open {
    visibility: visible;
    /*top: 6.5rem;*/
	/*left:-163px;
    width:calc(100% + 163px);*/
	left:0;
	width:100%;
    max-height: 600px;
	margin-top:2.5px;
    opacity: 1;
    z-index: 1001;
    -webkit-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
       -moz-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
        -ms-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
         -o-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
            transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
}

.megamenu div{
	padding:40px 0;
	text-align:center;
}

.megamenu div ul{
	width:auto;
	padding:0 3%;
	display:inline-block;
	vertical-align:top;
}

.megamenu div ul li{
	border:0;
	display:block;
}

.megamenu div ul li a{
	margin:10px 0;
	padding-left:18px;
	border:0;
	background:url(../img/icon_link.png) no-repeat left 16px / 6px auto;
	text-align:left;
	color:#000;
	display:block;
}



/*ハンバーガー
----------------------------------------------------*/
.accessible-megamenu:not(.js-accessible-megamenu) .accessible-megamenu-panel > h2 {
    display: none;
}

.accessible-megamenu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  position: absolute;
  z-index: 1;
  top: 3px;
  right: 3%;
  width: 6vw;
  height: 4vw;
}

.accessible-megamenu-toggle > span:not(.sr-only) {
  display: block;
  width: 6vw;
  height: 2px;
  margin-bottom: 5px;
  position: relative;

  background: #000;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              margin 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

.accessible-megamenu-toggle > span {
  margin-top: 5px;
}

.accessible-megamenu-toggle > span:nth-last-child(1) {
  transform-origin: 0% 100%;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.accessible-megamenu-toggle[aria-expanded=true] > span
{
  margin-top: 0;
  opacity: 1;
  transform: rotate(45deg) translate(5px, -1px);
  background: #000;
  border-radius: 0;
}

/*
 * But, hide the middle one.
 */
.accessible-megamenu-toggle[aria-expanded=true] > span:nth-last-child(2)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * the last one should go the other direction.
 */
.accessible-megamenu-toggle[aria-expanded=true] > span:nth-last-child(1)
{
  transform: rotate(-45deg) translate(0px, 6px);
}



@media (max-width: 768px) {
	
	
	
.accessible-megamenu {
	height:0;
}

.megamenu ol {
	height:0;
	padding:0;
	display:block;
}

.megamenu ol li{
	height:auto;
	margin:0;
	padding:3vw 0;
    background: rgba(255,255,255,0.95);
	border-bottom:1px solid #707070;
	display:block;
}

.megamenu ol li a{
	padding:0 3%;
	border-left:0;
	display:block;
}


/*メガメニュー
----------------------------------------------------*/
.accessible-megamenu .accessible-megamenu-panel {
    position: absolute;
	width:100%;
    background: rgba(255,255,255,0.0);
    display: block;
    left:0;
    cursor: default;

    visibility: hidden;
    top: -9999em;
	left:0;
    width:100%;
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
       -moz-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
        -ms-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
         -o-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
            transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
}

.accessible-megamenu .accessible-megamenu-panel.open {
    visibility: visible;
    top: 61px;
	left:0;
    width:100%;
    max-height: 600px;
    opacity: 1;
    z-index: 1001;
    -webkit-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
       -moz-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
        -ms-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
         -o-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
            transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
}

.megamenu ol li ul{
	text-align:center!important;
}

.megamenu ol li ul li{
	height:auto;
	margin:0;
	padding:3vw 0;
    background:none;
	border-bottom:0;
	text-align:center!important;
	display:block;
}	
	
.megamenu ol li ul li a{
	padding:0;
	text-align:center;
}
	
.megamenu ol li a.open{
	padding-bottom:3vw;
}

.megamenu ol li a.sub{
	background:url(../img/icon_link_nav.png) no-repeat right 5% center / 10px;
}

.megamenu div{
	padding:0;
	text-align:left;
}

.megamenu div ul{
	padding:0;
	display:block;
}

.megamenu div ul li a{
	padding-left:4vw;
	border:0;
	background:none;
}
	
	
/*ハンバーガー
----------------------------------------------------*/
.accessible-megamenu-toggle {
	position:fixed;
	top:1.6vw;
	right:3%;
	display: block;
	z-index: 3;
}

  .accessible-megamenu-toggle ~ .accessible-megamenu > .accessible-megamenu-top-nav-item {
    height: 0;
    overflow: hidden;
    visibility: collapse;
	opacity:0;
  }

  .accessible-megamenu-toggle[aria-expanded=true] ~ .accessible-megamenu > .accessible-megamenu-top-nav-item {
    height: auto;
    overflow: visible;
    visibility: visible;
	opacity:1;
  }

  .accessible-megamenu > .accessible-megamenu-top-nav-item {
    border-right: 0;
    float: none;
    width: 100%;
    height: auto;
  }

  .accessible-megamenu > .accessible-megamenu-top-nav-item a[aria-expanded] {
    box-shadow: none;
  }

  .accessible-megamenu .accessible-megamenu-panel,
  .accessible-megamenu .accessible-megamenu-panel.open {
    position: relative;
    top: 0;
    border: 0;
    box-shadow: none;
    padding-bottom: 0;
  }

  .accessible-megamenu .accessible-megamenu-panel.open {
    padding-bottom: 0.769em;
    /*max-height: 350px;*/
    overflow: auto;
  }


}