@charset "utf-8";




#gHeader{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	transform: translateY(0);
	transition: all 0.4s ease;
	will-change: transform;
}

#subHeader{
	width: 100%;
	position: fixed;
	top: 93px;
	left: 0;
	height: 93px;
	right: 0;
	background: #b5263f;
	z-index: 50;
	transform: translateY(0);
	transition: all 0.4s ease;
	will-change: transform;
}


/* =========================
   下スクロール時（min）
   ========================= */

#gHeader.min{
transform: translateY(-93px);}

#subHeader.min{transform: translateY(-93px);}


/* =========================
   サブヘッダーがないページ用
   body に noSubHeader を付与
   ========================= */

body.noSubHeader #gHeader.min{transform: translateY(0);}


/* =========================
   スマホ
   ========================= */

@media screen and (max-width:750px){
	#gHeader{transition: transform 0.6s ease;}
	#subHeader{top: 180px;height: 93px;transition: transform 0.6s ease;}
	#gHeader.min{transform: translateY(-180px);}
	#subHeader.min{transform: translateY(-180px);}
	#subHeader ul li a:hover{ border-radius: 0 !important;}
	body.noSubHeader #gHeader.min{transform: translateY(0);}
}



















@media(min-width:751px){
#subHeader.min{ height: 93px;}
#subHeader.min ul li a{margin-top: 5px; height: 45px;}
#subHeader ul li a:after {
    height: 30px;
    top: 8px;
    left: -3.5px;
}
}



#gHeader >.inner{ display: flex; width: auto;max-width: 1400px; margin: 0 auto; height: 93px; min-width: 1000px;}
#gHeader h1{ width: 260px; padding-top: 15px;padding-left: 30px;}
#gHeader nav{ width: calc(100% - 500px);}
#gHeader #ticketBtn{ width: 240px;padding-top: 14px; padding-right: 30px;}

#gHeader nav ul{
    max-width: 450px;
    margin: 10px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2px;
    row-gap: 2px;
}

#gHeader nav ul li{ text-align: center; font-size: 11px; line-height: 1.2em;}

#gHeader nav ul li a{ display: block;background: #fff; padding-top: 45px;height: 83px;box-sizing: border-box;border-radius: 10px 10px 0 0;}

#gHeader nav ul li.nav01 >.inner >a{ background: #fff url(/asset/images/navi/navi01.png) no-repeat center top 11px; background-size: 39px auto;}
#gHeader nav ul li.nav02 >.inner >a{ background: #fff url(/asset/images/navi/navi02.png) no-repeat center top 11px; background-size: 39px auto;}
#gHeader nav ul li.nav03 >.inner >a{ background: #fff url(/asset/images/navi/navi03.png) no-repeat center top 11px; background-size: 39px auto;}
#gHeader nav ul li.nav04 >.inner >a{ background: #fff url(/asset/images/navi/navi04.png) no-repeat center top 11px; background-size: 39px auto;}
#gHeader nav ul li.nav05 >.inner >a{ background: #fff url(/asset/images/navi/navi05.png) no-repeat center top 11px; background-size: 39px auto;}

#gHeader nav ul li.nav01 >.inner >a:hover{ background: #b5263f url(/asset/images/navi/navi01_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav02 >.inner >a:hover{ background: #b5263f url(/asset/images/navi/navi02_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav03 >.inner >a:hover{ background: #b5263f url(/asset/images/navi/navi03_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav04 >.inner >a:hover{ background: #b5263f url(/asset/images/navi/navi04_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav05 >.inner >a:hover{ background: #b5263f url(/asset/images/navi/navi05_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}

#gHeader nav ul li.nav01.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi01_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav02.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi02_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav03.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi03_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav04.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi04_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav05.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi05_on.png) no-repeat center top 11px; background-size: 39px auto; color: #fff; opacity: 1;}

#gHeader h1:hover{opacity: 0.8;}
#gHeader #ticketBtn a:hover{opacity: 0.8;}


@media(max-width:750px){

#gHeader{height: 180px;}
#gHeader h1{ width: 290px; padding-top: 0;padding-left: 0; position: absolute; top: 5px; left: 15px;}
#gHeader >.inner{ display: block;}
#gHeader nav{ width: 100%; position: absolute; top: 90px; border-top: 1px solid #ddd;}
#gHeader nav ul{
    max-width:none;
    margin: 5px 10px 0;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2px;
    row-gap: 2px;
}
#gHeader nav ul li{  font-size: 15px; }
#gHeader #ticketBtn{ width: 240px; position: absolute; right: 10px; top: 10px;}
#gHeader #ticketBtn{ width: 240px;padding-top:0; padding-right: 0;}

#gHeader nav ul li a{ display: block;background: #fff; padding-top: 40px;height: 83px;box-sizing: border-box;border-radius: 10px 10px 0 0;}

#gHeader nav ul li.nav01 >.inner >a{ background: #fff url(/asset/images/navi/navi01.png) no-repeat center top 8px; background-size: 35px auto;}
#gHeader nav ul li.nav02 >.inner >a{ background: #fff url(/asset/images/navi/navi02.png) no-repeat center top 8px; background-size: 35px auto;}
#gHeader nav ul li.nav03 >.inner >a{ background: #fff url(/asset/images/navi/navi03.png) no-repeat center top 8px; background-size: 35px auto;}
#gHeader nav ul li.nav04 >.inner >a{ background: #fff url(/asset/images/navi/navi04.png) no-repeat center top 8px; background-size: 35px auto;}
#gHeader nav ul li.nav05 >.inner >a{ background: #fff url(/asset/images/navi/navi05.png) no-repeat center top 8px; background-size: 35px auto;}

#gHeader nav ul li.nav01.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi01_on.png) no-repeat center top 8px; background-size: 35px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav02.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi02_on.png) no-repeat center top 8px; background-size: 35px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav03.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi03_on.png) no-repeat center top 8px; background-size: 35px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav04.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi04_on.png) no-repeat center top 8px; background-size: 35px auto; color: #fff; opacity: 1;}
#gHeader nav ul li.nav05.now >.inner >a{ background: #b5263f url(/asset/images/navi/navi05_on.png) no-repeat center top 8px; background-size: 35px auto; color: #fff; opacity: 1;}


}



/*サブヘッダー*/




#subHeader >.inner{width: 1000px; margin: 0 auto;} 

@media(max-width:750px){

#subHeader >.inner{width: auto; margin: 0 auto;} 
}


#subHeader  ul 
{    width: auto;
    margin: 0 auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 6px;
    row-gap: 0;
}

#subHeader  ul.grid2{ grid-template-columns: repeat(2, 1fr);width: 600px;}
#subHeader  ul.grid3{ grid-template-columns: repeat(3, 1fr);width: 700px;}
#subHeader  ul.grid4{ grid-template-columns: repeat(4, 1fr);width: 800px;}
#subHeader  ul.grid5{ grid-template-columns: repeat(5, 1fr);width: 1000px;}
@media(max-width:750px){
#subHeader  ul.grid2{ grid-template-columns: repeat(2, 1fr);width: auto;}
#subHeader  ul.grid3{ grid-template-columns: repeat(3, 1fr);width: auto;}
#subHeader  ul.grid4{ grid-template-columns: repeat(4, 1fr);width: auto;}
#subHeader  ul.grid5{ grid-template-columns: repeat(5, 1fr);width: auto;}
}

#subHeader  ul li{ width: auto; display: block; position: relative; }
#subHeader  ul li a >.inner{ display: table;margin: 0 auto;width: auto;max-width:200px;  height: 100%;}
#subHeader  ul li .navIcon{ text-align: center; display: table-cell; vertical-align: middle; width: 44px;padding: 0 10px;}
#subHeader  ul li .navIcon img {width: 34px;}
#subHeader  ul li p{ color: #fff; font-size: 11px; text-align: left; padding: 0 15px 0 0; font-weight: bold; display: table-cell;vertical-align: middle; line-height: 1.3em;}

#subHeader  ul li a{display: block; margin-top: 17px; padding: 0 0 0 0; box-sizing: border-box;height: 60px;  position: relative;}
#subHeader  ul li a:hover{opacity: 1;}
#subHeader  ul li a:hover{ background: #d43953; border-radius: 10px;}

#subHeader  ul li a:after{
	content:"";
   display:block;
   width:1px;
   height:50px;
   background-color:#c9354e;
   position:absolute;
   top:5px;
   left:-3.5px;
}
#subHeader  ul li:first-child a:after{display: none;}


@media(max-width:750px){
	
#subHeader{ position: fixed; top: 178px;}
#subHeader >.inner{width: auto; margin: 0 auto;}
#subHeader  ul li{position: relative;}
#subHeader  ul li p{ font-size: 15px; line-height: 1.2em}

#subHeader  ul li a{display: block; margin-top: 0; padding: 0 0 0 0; box-sizing: border-box;height: 93px;  box-sizing: border-box; padding-top: 0; top: 0;}


#subHeader  ul li a >.inner{ display: block;margin: 0 auto;width: auto;max-width:none;  height: 100%; position: relative;}
#subHeader  ul li .navIcon{ text-align: center; display:block; width: 50px;padding: 0; position: absolute; top: 9px; left: 0; right: 0; margin: auto;}
#subHeader  ul li .navIcon img {width: 50px;}
#subHeader  ul li p{ color: #fff; font-size: 15px; text-align: center; padding: 0 0 0 0;top:38px; height: 55px;  position: relative; font-weight: bold; display: flex; align-items: center;justify-content: center;}



}


@media(min-width:751px){
#subHeader.min{ height: 55px;}
#subHeader.min ul li a{margin-top: 5px; height: 45px;}
#subHeader ul li a:after {
    height: 30px;
    top: 8px;
    left: -3.5px;
}
}