@charset "UTF-8";

/*===================================================================

  topheader

===================================================================*/
.topheader {
  background: url(../../images/topheader_bg.jpg) 50% 0 no-repeat;
}
.topheader .inner {
  position: relative;
  width: 980px;
  height: 557px;
  margin: 0 auto;
  /*background: url(../images/logo_mark.png) 0 10px no-repeat;*/
}
.topheader .inner h1 {
  background: url(../images/logo_txt.png) 0 20px no-repeat;
  width: 633px;
  height: 251px;
  text-indent: -9999px;
  margin: 0 0 0 155px;
  display: none;
}
.topheader .inner .attention {
  position: absolute;
  top: 0;
  right: -70px;
  width: 144px;
  height: 166px;
  background: url(../../images/topheader_attention_.png) 0 0 / 50% no-repeat;
  text-indent: -9999px;
  display: none;
}
.topheader .inner .date {
  position: absolute;
  width: 352px;
  height: 216px;
  top: 349px;
  right: 17px;
  background: url(../../images/topheader_date.png) 0 0 no-repeat;
  text-indent: -9999px;
  z-index: 5;
  display: none;
}
.topheader nav .nav01 {
  width: calc((116 / 1440)* 100vw);
}
.topheader nav .nav01 a {
  background: url(../../images/navtop01.png) 0 0 no-repeat;
}
.topheader nav .nav01 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}
.topheader nav .nav02 {
  width: calc((161 / 1440)* 100vw);
}
.topheader nav .nav02 a {
  background: url(../../images/navtop02.png) 0 0 no-repeat;
}
.topheader nav .nav02 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}
.topheader nav .nav03 {
  width: calc((116 / 1440)* 100vw);
}
.topheader nav .nav03 a {
  background: url(../../images/navtop03.png) 0 0 no-repeat;
}
.topheader nav .nav03 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}
.topheader nav .nav04 {
  width: calc((107 / 1440)* 100vw);
}
.topheader nav .nav04 a {
  background: url(../../images/navtop04.png) 0 0 no-repeat;
}
.topheader nav .nav04 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}
.topheader nav .nav05 {
  width: calc((151 / 1440)* 100vw);
}
.topheader nav .nav05 a {
  background: url(../../images/navtop05.png) 0 0 no-repeat;
}
.topheader nav .nav05 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}
.topheader nav .nav06 {
  width: calc((149 / 1440)* 100vw);
}
.topheader nav .nav06 a {
  background: url(../../images/navtop06.png) 0 0 no-repeat;
}
.topheader nav .nav06 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}
.topheader nav .nav07 {
  width: calc((172 / 1440)* 100vw);
}
.topheader nav .nav07 a {
  background: url(../../images/navtop07.png) 0 0 no-repeat;
}
.topheader nav .nav07 a:hover {
  background-position: 0 calc((-54 / 1440)* 100vw);
}

.topheader nav a {
  background-size: 100% auto !important;
  -moz-background-size: 100% auto !important;
  -webkit-background-size: 100% auto !important;
}


/* SNS */
.topheader .snsIcon li{
	position: absolute;
	width: 68px;
	height: 68px;
	z-index: 10;
}
.topheader .snsIcon li a,
.topheader .snsIcon li a img{
	display: block;
	width: 100%;
	height: 100%;
}

.topheader .snsIcon .twitter{
  top: 33px;
  right: 43px;
}
.topheader .snsIcon .fb{
  top: 68px;
  right: 110px;
}
.topheader .snsIcon .ig{
  top: 53px;
  right: -30px;
}
.topheader .snsIcon .snsTxt{
	width: 138px;
	height: 82px;
  top: 112px;
  right: -20px;
}

.topheader .venue,
.second .venue {
  position: absolute;
  right: 0;
  bottom: 10px;
}

.topheader .venue li,
.second .venue li {
  width: 110px;
  display: inline-block;
}

.topheader .venue li img,
.second .venue li img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .topheader {
    background: url(../../images/sp_topheader_bg.jpg) 50% 0 no-repeat;
    background-size: calc((980 / 750)* 100vw) auto;
    -moz-background-size: calc((980 / 750)* 100vw) auto;
    -webkit-background-size: calc((980 / 750)* 100vw) auto;
    background-position: 50% 0;
  }
  .topheader .inner {
    width: 100%;
    height: calc((736 / 750)* 100vw);
    background-size: calc((130 / 750)* 100vw) auto;
    -moz-background-size: calc((130 / 750)* 100vw) auto;
    -webkit-background-size: calc((130 / 750)* 100vw) auto;
    background-position: center calc((10 / 750)* 100vw);
  }
  .topheader .inner h1 {
    width: calc((640 / 750)* 100vw);
    height: calc((300 / 750)* 100vw);
    margin: 0 0 0 calc((20 / 750)* 100vw);
    background-position: 0 calc((70 / 750)* 100vw);
  }
  .topheader .inner .attention {
    right: calc((60 / 750)* 100vw);
    width: calc((240 / 750)* 100vw);
    display: none;
  }
  .topheader .inner .date {
    width: calc((440 / 750)* 100vw);
    height: calc((244 / 750)* 100vw);
    top: calc((240 / 750)* 100vw);
    right: 0;
    background-position: calc((20 / 750)* 100vw) 0;
  }

	.topheader .snsIcon li{
    position: absolute;
    z-index: 10;
		width: calc((88 / 750)* 100vw);
		height: calc((88 / 750)* 100vw);
	}
  .topheader .snsIcon li a,
  .topheader .snsIcon li a img{
  	display: block;
  	width: 100%;
  	height: 100%;
  }
  .topheader .snsIcon .twitter{
    left: calc((38 / 750)* 100vw);
    bottom: calc((28 / 750)* 100vw);
    top: unset;
	}
  .topheader .snsIcon .fb{
    left: calc((88 / 750)* 100vw);
    bottom: calc((110 / 750)* 100vw);
    top: unset;
  }
	.topheader .snsIcon .ig{
    left: calc((136 / 750)* 100vw);
    bottom: calc((28 / 750)* 100vw);
    top: unset;
	}
  .topheader .snsIcon .snsTxt{
    display: none;
	}
  .topheader .snsIcon .snsTxt img{
    display: block;
    width: 100%;
    height: auto;
	}
  .topheader .venue li img,
  .second .venue li img {
    display: block;
    width: 100%;
    height: auto;
  }
}
