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

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

.megamenu ol {
	margin-bottom: 0;
	display:flex;
	justify-content: center;
	align-items: center;
}

.megamenu ol li{
	/*display:flex;
	justify-content: center;
	align-items: center;*/
}


/*メガメニュー
----------------------------------------------------*/
.megamenu ol li div/*js読み込み前に一瞬メガメニュー映るのを防ぐ*/,
.accessible-megamenu .accessible-megamenu-panel {
    position: absolute;
	background:#B94121;
    display: block;
    cursor: default;
	
    visibility: hidden;
    top: 179px;
    overflow: hidden;
    opacity: 0;
}

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

/*.nav_search .accessible-megamenu-panel{
	top:55px;
	right:260px;
	width:420px;
	background:none;
}
.nav_search .accessible-megamenu-panel.open{
	top:55px;
	right:280px;
	width:435px;
	background:#FFF;
}

.fixnavi .nav_search .accessible-megamenu-panel,
.fixnavi .nav_search .accessible-megamenu-panel.open{
	top:45px;
}*/

/*@media screen and (max-width:1170px){
.nav_search .accessible-megamenu-panel.open{
	right:16.5em;
}
}*/

/*.nav_search .accessible-megamenu-panel #google_top{
	width:380px;
	padding:8px;
	border:0;
	border-bottom:1px solid #707070;
}

.nav_search .accessible-megamenu-panel #btn_search{
	width:28px;
	height:18px;
	padding-left:10px;
	vertical-align:middle;
}*/

.megamenu div.cf{
	padding:30px 40px;
}

.megamenu div ul,
.megamenu div ul li{
	margin:0;
	height: auto;
	text-align: center;
	display:block;
}

.megamenu div ul li{
	margin: 0 20px;
	display: inline-block;
}

.megamenu div ul li a{
	padding: 10px 0;
	border-bottom: 1px dotted #FFF;
	background: none;
	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: 35px;
}

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

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

.accessible-megamenu-toggle[aria-expanded=true] > span:nth-last-child(1)
{
  transform: rotate(45deg) translate(-7px, -13px);
}

/*
 * But, hide the middle one.
 */
.accessible-megamenu-toggle[aria-expanded=true] > span:nth-last-child(3)
{
  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(2)
{
  transform: rotate(-45deg) translate(-7px, 13px);
}
/*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:0;
	width:100%;
	height:100vh;
	padding:0 6vw;
	background:#B94121;
	overflow-y: scroll; 
}

.megamenu ol{
	padding:0;
	clear:both;
	display:block;
}

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

.megamenu ol li{
	height:auto;
	padding:0;
	border-bottom:1px solid #FFF;
	display:block;
}

/*.megamenu ol li a{
	width:100%;
	padding:3% 0!important;
	font-size:3.6vw;
	display:block;
}

.megamenu ol li:hover{
    background: rgba(255,255,255,0.95);
}*/

.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 .box_4col,
.megamenu .box_3col,
.megamenu .box_2col{
	display: block;
}

.megamenu div{
	padding: 2vw;
	background: #FFF;
}

.megamenu div.cf{
	padding:0;
}

.megamenu div ul li{
	border-bottom: 0!important;
}

.megamenu div ul li a{
	padding: 2%!important;
}

.megamenu div h2{
	display: none;
}

.megamenu div ul{
	float: none;
	width: 100%;
	margin-bottom: 6vw;
	display: block!important;
}

.megamenu div ul li,
.megamenu div ul li:last-child{
	width: 100%;
}

.megamenu div ul li a{
	background: none;
	font-size: 4.0vw;
    font-weight: normal;
}

	
/*ハンバーガー
----------------------------------------------------*/
.accessible-megamenu-toggle {
	position:fixed;
	top:6vw;
	right:3%;
	height:60px;
	display: block;
	z-index: 9;
}

  .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: #324C9C;
	display:block;
}

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