/*Author NaokiMatsukiyo*/

@media screen and (max-width: 1200px){

  .no-scroll{
    overflow: hidden;
    position: fixed;
  }
  h1{
    font-size: 32px;
  }
  h2{
    font-size: 28px;
  }
  h3{
    font-size: 24px;
  }
  .wrapper{
	margin: 52px 0 0 0;
  }

    /**ハンバーガーメニュー**/
	#masthead .touch-sensor{
		position:absolute;
		top: 0;
		right: 0;
		width:52px;
		height:52px;
		z-index: 10000;
	}

	/**ここから下（ハンバーガーメニューの終わりまでは2018年度前半のコピペです）**/
	.hamburger-wrap,
	.hamburger{
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}

	.hamburger-wrap{
		position: relative;
		width: 35px;
		height: 30.8px;
		margin: 10.5px 8px;
	}

	.hamburger{
		position: absolute;
		right: 0;
		width: 100%;
		height: 4px;
		background: #fff;;
		border-radius: 4px;
	}

	.hamburger.crown{
		top: 0;
    background: #0075be;
	}

	.hamburger.club{
		top: 13.4px;
    background: #1e9cd7;
	}

	.hamburger.heel{
		bottom: 0;
    background: #45c3d1;
	}

	/*ハンバーガーボタンを「✖」に変える*/
	.touch-sensor.open .crown{
		right: 0px;
		-webkit-transform: translateY(13.4px) rotate(-45deg);
		transform: translateY(13.4px) rotate(-45deg);
	}

	.touch-sensor.open .club{
		left: 50%;
		opacity: 0;
		-webkit-animation: active-menu-club .8s forwards;
		animation: active-menu-club .8s forwards;
	}

		@-webkit-keyframes active-menu-club {
		100% {
			height: 0;
		}
		}

		@keyframes active-menu-club {
		100% {
			height: 0;
		}
		}

	.touch-sensor.open .heel{
		-webkit-transform: translateY(-13.4px) rotate(45deg);
		transform: translateY(-13.4px) rotate(45deg);
	}
	/*ハンバーガーメニューここまで*/

	.no-scroll{
		overflow: hidden;
		position: fixed;
	}

	#masthead{
		position: fixed;
    top:0;
    left: 0;
		z-index: 9999;
    width: 100%;
		height: 52px;
		box-shadow: 0px 3px 3px -1px rgba(0,0,0,0.1);
	}
	#masthead #navigation{
    display: none;
		width: 100%;
    z-index: 800;
	}
  #masthead.mobile-active #navigation{
    display: block;
    position: fixed;
    padding-top: 52px;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #222;
    height: 100%;
  }
  #masthead .global-nav{
    display: block;
    width: 100%;
    height:100%;
    overflow: scroll;
  }
  #masthead.mobile-active .global-nav{

  }
  #masthead .global-nav .main-menu{
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
  }
  #masthead.mobile-active .global-nav .main-menu{

  }

	@keyframes slideIn {
		0%{
			right: -50%;
		}
		100% {
			right: 0%;
		}
	}
	@keyframes slideOut {
		0% {
			right: 0%;
		}
		100%{
			right: -60%;
		}
	}
	@keyframes fadein {
		0%{
			opacity:0;
		}
		100% {
			opacity:1;
		}
	}@keyframes fadeout {
		0%{
			height:100vh;
			opacity:1;
		}
		97%{
			height:100vh;
		}
		100% {
			height: 0;
			opacity:0;
		}
	}


	.down_switch{
		margin : 8px;
		padding: 7px;
		width : 31px;
		height : 31px;
		background: url('../images/header/plus-switch.svg');
		background-size: 17px 17px;
		background-repeat:no-repeat;
		background-position: center center;
    transition: .8s;
	}
	.down_switch.rotate{
		transform: rotate(225deg);
    transition: .81s;
	}
  .go_switch{
    margin : 8px;
    padding: 7px;
    width : 31px;
    height : 31px;
    background: url('../images/header/go-switch.svg');
    background-size: 17px 17px;
    background-repeat:no-repeat;
    background-position: center center;
  }
  #sub-header{
    position: fixed;
    top: 52px;
    width: 100%;
  }

  #wrapper{
    padding-top: 52px;
  }
  main{
    margin-top: 35px;
  }
  .home main{
    margin-top: 0;
  }
  article.child-page{
    width: 100%;
    margin: 0 5px;
    padding: 15px 15px;
  }
  article.stage-group-detail{
    padding-left: 0;
    padding-right: 0;
  }

  #navigation .global-nav > ul{
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 0;
    margin: 0;
  }
  #navigation .global-nav > ul > li{
    display: flex;
    flex-direction: column;
    margin: 5px 5px;
    padding: 0 6px 5px 6px;
    border-bottom: 0.75px solid rgba(255,255,255,0.6);
  }
  #navigation .global-nav > ul > li:nth-child(1){
    padding: 5px 6px 5px 6px;
    border-top: 0.75px solid rgba(255,255,255,0.6);
  }
  #navigation .global-nav > ul > li > .main-menu-item-inner{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  #navigation .global-nav > ul > li > a,
  #navigation .global-nav > ul > li > .main-menu-item-inner > a{
    color: #ffffff;
    font-size: 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  #navigation .global-nav > ul > li > a.no-child{
    justify-content: space-between;
  }
  #navigation .global-nav > ul > li > a.no-child > .menu-content{
    font-size: 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  #navigation .global-nav > ul > li > a:hover,
  #navigation .global-nav > ul > li > .main-menu-item-inner > a:hover{
    text-decoration: none;
    opacity: 0.7;
  }
  #navigation .global-nav > ul > li > a > span.text,
  #navigation .global-nav > ul > li > .main-menu-item-inner > a > span.text,
  #navigation .global-nav > ul > li > a > .menu-content > span.text{
    margin: 3px 3px 3px 10px;
    border-top: none;
    border-left: 2px solid;
    border-image: linear-gradient(to bottom, #3185eb 0%, #66f078 100%)1/0 0 0 2px;
    padding: 0 10px;
  }
  #navigation .global-nav > ul > li > a > span.image,
  #navigation .global-nav > ul > li > .main-menu-item-inner > a > span.image,
  #navigation .global-nav > ul > li > a > .menu-content > span.image{
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 40px;
  }
  #navigation .global-nav > ul > li > ul{
    list-style: none;
    width: 100%;
    padding-left: 70px;
  }
  #navigation .global-nav > ul > li > ul > li{
    padding: 3px;
    margin: 2px;
  }
  #navigation .global-nav > ul > li > ul > li> a{
    width: 100%;
    color: #fff;
    font-size: 18px;
  }
  #navigation .global-nav > ul > li > ul > li> a::before{
    content:"-";
    margin-right: 8px;
  }


}