/*
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:rgba(255, 255, 255, 1.0);
    display: block;
    cursor: default;

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

.accessible-megamenu .accessible-megamenu-panel.open {
    visibility: visible;
	top:160px;
	left:0;
	width:100%;
    opacity: 1;
    z-index: 1001;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.megamenu div h2{
	width:100%;
	height: 130px;
	background: url("../img/bg_megamenu.jpg") no-repeat center / cover;
	line-height: 130px;
}

.megamenu div h2 span{
	margin: 0 auto;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	display: block;
}

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

.megamenu div.open h2 span{
	width: 1200px;
}

.megamenu div.open ul{
	width: 1200px;
}

.megamenu div ul.menu01{
	grid-template-rows: repeat(4, auto);
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.megamenu div ul.menu02{
	grid-template-rows: repeat(2, auto);
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.megamenu div ul.menu03{
	grid-template-rows: repeat(2, auto);
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

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

.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;
}

@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: #1983DD;
  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: #1983DD;
  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: fixed;
	top:-600px;
	right:0;
	width: 60px;
	height:calc(100vh - 110px);
	padding:0;
	display: block;
	overflow:scroll;
}

.scroll-lock .megamenu{
	position: fixed;
	top:65px;
	width:100%;
	height:calc(100vh - 65px);
	padding:0 5vw;
	background:rgba(255, 255, 255, .95);
	overflow-y: scroll; 
}

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


/*メガメニュー
----------------------------------------------------*/
.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 ul{
	padding: 6vw 0 0 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:1vw;
	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;
	display:block;
}

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