/*
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 {
  display: flex;
}

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


/*メガメニュー
----------------------------------------------------*/
.megamenu ol li div/*js読み込み前に一瞬メガメニュー映るのを防ぐ*/,
.accessible-megamenu .accessible-megamenu-panel {
    position: absolute;
	background:#1D3574;
    display: grid;
    cursor: default;

    visibility: hidden;
    top: 90px;
    overflow: hidden;
    opacity: 0;
}

.accessible-megamenu .accessible-megamenu-panel.open {
    visibility: visible;
	top:90px;
	left:0;
	width:100%;
	background: #1D3675 url("../img/bg_megamenu.jpg") no-repeat left center / 45% 100%;
    opacity: 1;
    z-index: 1001;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.megamenu div span{
    width: 1200px;
    min-height: 130px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20em 1fr;
    grid-gap: 0 40px;
}

.megamenu div h2{
	height: 100%;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.megamenu div ul{
	margin: 0 auto;
	padding: 30px 0;
	display: grid;
	grid-auto-flow: column;
}

.megamenu div ul.menu01{
	grid-template-columns: repeat(5, auto);
}

.megamenu div ul.menu02{
	grid-template-columns: repeat(3, auto);
}

.megamenu div ul.menu03{
	grid-template-columns: repeat(3, auto);
}

.megamenu div ul.menu04{
	grid-template-columns: repeat(2, auto);
}

.megamenu div ul li{
    margin: 0;
}

.megamenu div ul li a{
	padding: 5px 0;
	padding: 5px 0 5px 1.6em;
	background: url("../img/icon_link.png") no-repeat left 0.6em / 1em;
	transition: .3s;
	line-height: 1.4;
	text-align: left;
    display: inline-block!important;
}

@media (any-hover: hover) {
.megamenu div ul li a:hover{
	background: url("../img/icon_link.png") no-repeat left 0.3em 0.6em / 1em;
}
}


/*ハンバーガー
----------------------------------------------------*/
.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: 35px;
}

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

  background: #FFF;
  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(6px, -3px);
  background: #FFF;
  border-radius: 0;
}
/*5.-1*/

/*
 * 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(3)
{
  transform: rotate(-45deg) translate(-10px, 17px);
}
/*15.20*/

.accessible-megamenu-toggle em{
	display:none;
}



@media (max-width: 960px) {

header #headIn{
	float:none;
	padding: 0;
	width:100%;
}

/*.accessible-megamenu {
	height:0;
}*/

.megamenu{
	position:relative;
	top:-500px;
	padding:0;
	display: block;
	overflow:scroll;
}

.scroll-lock .megamenu{
	position: fixed;
	top:60px;
	width:100%;
	height:calc(100vh - 60px);
	padding:0;
	background:rgba(29, 54, 117, .85);
	overflow-y: scroll; 
}

.accessible-megamenu-toggle[aria-expanded=true] ~ .accessible-megamenu{
	/*height:calc(100vh - 24vw);
	background:rgba(255, 255, 255, .9);*/
}

.megamenu ol li a{
	position: relative;
}

.megamenu ol li a span{
	position: absolute;
	top:0.5em;
	right:0.5em;
	width: 6vw;
	height: 6vw;
	padding: 0;
	background:url(../img/icon_plus.png) no-repeat 97% center / 4vw;
}

.megamenu ol li a.open span{
	background:url(../img/icon_minus.png) no-repeat 97% center / 4vw;
}


/*メガメニュー
----------------------------------------------------*/
.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: 0;
	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 div h2{
	display: none;
}

.megamenu div span{
    width: 100%;
    grid-template-columns: 1fr;
    grid-gap: 0;
}

.accessible-megamenu .accessible-megamenu-panel.open {
	background: none;
}

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

.megamenu div.open ul{
	width: 100%;
}

.megamenu div ul li a{
	padding: 4vw 0 4vw 1.6em;
	background: url("../img/icon_link.png") no-repeat left 1.3em / 1em;
}

.megamenu div ul li:last-child a{
	padding: 4vw 0 1vw 1.6em;
}

	
/*ハンバーガー
----------------------------------------------------*/
.accessible-megamenu-toggle {
	position:fixed;
	top:0;
	right:3%;
	height:60px;
	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;
  }
  
  .accessible-megamenu-toggle em{
	position:relative;
	top:-2px;
	font-style:normal;
	font-size:13px;
	text-align:center;
	color: #FFF;
	display:block;
}

.accessible-megamenu-toggle[aria-expanded=true] > em{
	top:6px;
}