@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900|Noto+Serif+JP:200,300,400,500,600,700,900);

.LinkEffect1 {
  transition-property: all;
  transition: .3s linear
}

.hEffect a:hover img {
  opacity: 0.6 !important;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
  transition-property: all;
  transition: .3s linear;
  background: transparent;
  display: inline-block;
  zoom: 1
}

.facebookURL a:hover {
  color: #3B5998
}

.TwitterURL a:hover {
  color: #3F729B
}

.instagramURL a:hover {
  color: #773FAF
}

.GoogleURL a:hover {
  color: #dd4b39
}

.YoutubeURL a:hover {
  color: #e52d27
}

.VimeoURL a:hover {
  color: #1ab7ea
}

.SoundCloudURL a:hover {
  color: #FF8800
}

.PinterestURL a:hover {
  color: #cc2127
}

.facebook a {
  background: #3B5998
}

.Twitter a {
  background: #00ACEE
}

.Instagram a {
  background: #773FAF
}

.Google a {
  background: #dd4b39
}

.Youtube a {
  background: #cd201f
}

.Pocket a {
  background: #E74242
}

.SoundCloud a {
  background: #FF8800
}

.Pocket a {
  background: #E74242
}

.Pinterest a {
  background: #cc2127
}

.Vimeo a {
  background: #1ab7ea
}

* {
  margin: 0;
  padding: 0
}

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0
}

.pc{
  display: block;
}
.sp{
  display: none;
}

body {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 400;
  color: #FFF
}

img {
  border: none;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic
}

p {
  width: 100%;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: left
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent !important;
  transition-property: all;
  transition: .3s linear
}

a:hover {
  text-decoration: none
}

strong {
  font-weight: normal
}

#Container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  position: relative
}

#MainContents {
  padding-top: 80px
}

@media only screen and (max-width: 640px) {
  #MainContents {
    padding-top: 60px
  }
}

#FixedHeader {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  Top: 0;
  left: 0;
  position: fixed;
  z-index: 500;
  display: flex;
  -webkit-display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  background: #000;
  transition-property: all;
  transition: .3s linear
}

#FixedHeader h1 {
  width: 274px;
  transition-property: all;
  transition: .3s linear
}

.en #FixedHeader h1 {
  width: 182px;
}

#FixedHeader h1 img {
  transition-property: all;
  transition: .3s linear;
  width: 100%
}

#FixedHeader #ComNav {
  display: flex;
  flex-direction: column;
  -webkit-display: flex;
  justify-content: end;
  -webkit-justify-content: end;
  -webkit-align-items: center;
  align-items: center;
  transition-property: all;
  transition: .3s linear;
  font-size: 2rem;
}

#FixedHeader .switchFlex {
  display: flex;
  max-width: 14.4rem;
  width: 100%;
  margin: 0 0 0.9rem auto;
  border: solid 1px #fff;
  border-radius: 1.8rem;
  transition: 0.3s;
}
#FixedHeader .switchFlex li{
  width: 50%;
}
#FixedHeader .switchFlex li a{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 0 0.4rem;
  font-size: 1.8rem;
}
#FixedHeader .switchFlex li a:hover{
  color: #000;
  background: #fff;
}
#FixedHeader .switchFlex li a.current{
  color: #000;
  background: #fff;
  pointer-events: none;
}
#FixedHeader .switchFlex li:first-child a{
  border-radius: 1.8rem 0 0 1.8rem;
}
#FixedHeader .switchFlex li:last-child a{
  border-radius: 0 1.8rem 1.8rem 0;
}
#FixedHeader.Scrolled .switchFlex{
  max-width: 10.4rem;
  transition: 0.3s;
}
#FixedHeader.Scrolled .switchFlex li a{
  font-size: 1.4rem;
  padding: 5px 0 3px;
}
#FixedHeader.Scrolled #ComNav{
  font-size: 1.5rem;
}
@media only screen and (max-width: 640px) {
  #FixedHeader #ComNav,
  #FixedHeader.Scrolled #ComNav {
    font-size: 2vw;
    text-align: right;
  }
}

#FixedHeader #ComNav img {
  width: 75px;
  transition-property: all;
  transition: .3s linear
}

#FixedHeader.Scrolled {
  height: 65px
}

#FixedHeader.Scrolled h1 {
  width: 274px
}

.en #FixedHeader.Scrolled h1 {
  width: 182px;
}

#FixedHeader.Scrolled #ComNav img {
  width: 55px
}

@media only screen and (max-width: 1080px) {
  #FixedHeader {
    height: 80px
  }

  #FixedHeader h1 {
    width: 280px
  }

  #FixedHeader #ComNav img {
    width: 55px
  }
}

@media only screen and (max-width: 960px) {
  #FixedHeader #ComNav img {
    display: block;
    margin-right: 0px
  }
}

@media only screen and (max-width: 640px) {
  #FixedHeader {
    padding-left: 10px;
    height: 60px
  }

  #FixedHeader h1 {
    width: 220px
  }

  #FixedHeader.Scrolled {
    padding-left: 10px;
    height: 60px
  }

  #FixedHeader.Scrolled h1 {
    width: 220px
  }
}

@media only screen and (max-width: 414px) {
  #FixedHeader h1 {
    width: 50vw
  }

  #FixedHeader.Scrolled h1 {
    width: 50vw
  }

  .en #FixedHeader.Scrolled h1 {
    width: 44vw
  }
  #FixedHeader .switchFlex {
    max-width: 100%;
    width: 24vw;
    margin: 0 0 0.9rem auto;
  }
  #FixedHeader .switchFlex li a,
  #FixedHeader.Scrolled .switchFlex li a{
    padding: 0.8vw 0;
    font-size: 3.2vw;
    text-align: center;
  }
  #FixedHeader .switchFlex li a:hover{
    color: #000;
    background: #fff;
  }
  #FixedHeader .switchFlex li a.current{
    color: #000;
    background: #fff;
    pointer-events: none;
  }
  #FixedHeader .switchFlex li:first-child a{
    border-radius: 1.8rem 0 0 1.8rem;
  }
  #FixedHeader .switchFlex li:last-child a{
    border-radius: 0 1.8rem 1.8rem 0;
  }
}

#Banner {
  width: 100%;
  margin: 0 auto;
  /*background: url(img/BannerBG.jpg) 50% 50% no-repeat;*/
  background-color: #fcef00;
  background: linear-gradient(90deg, #fff 0%, #fff 50%, #fcef00 50%, #fcef00 100%);
  background-size: cover;
  transition-property: all;
  transition: .3s linear
}

#Banner img {
  width: 100%;
  max-width: 1260px;
  transition-property: all;
  transition: .3s linear
}

@media only screen and (max-width: 1260px) {
  #Banner {
    background-image: none
  }
}

#Info {
  width: 100%;
  padding: 100px 40px;
  background: url(img/InfoBG.png) 0 0;
  transition-property: all;
  transition: .3s linear
}

#Info .TextBox {
  margin: 0 auto;
  border: 2px solid #AA0B15;
  padding: 40px 60px;
  display: inline-block;
  transition-property: all;
  transition: .3s linear
}

#Info p {
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #AA0B15;
  margin-bottom: 0;
  text-align: center;
  transition-property: all;
  transition: .3s linear
}

#EventEntries {
  width: 98%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 90px 0.7rem 130px 0;
  position: relative
}

#EventEntries:before {
  content: '';
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background: url(./img/common_bg_03.gif)
}

#EventEntries #Masonary {
  width: 100% !important;
  margin: 0 auto 45px
}

#EventEntries #Btn {
  display: block;
  position: relative;
  z-index: 10;
  width: 380px;
  margin: 0 auto
}

#EventEntries #Btn a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  font-size: 14px;
  font-size: 1.4rem;
  color: #FFF;
  padding: 20px 0px;
  background: #000000
}

#EventEntries #Btn a:hover {
  background: #555
}

#EventEntries #Btn img {
  width: 16px;
  margin-left: 20px
}

@media only screen and (max-width: 640px) {
  #EventEntries {
    width: 94%;
    padding: 60px 0 80px
  }

  #EventEntries #Btn {
    width: 300px
  }

  #EventEntries #Btn a {
    font-size: 12px;
    font-size: 1.2rem
  }

  #EventEntries #Btn img {
    width: 16px;
    margin-left: 10px
  }
}

@media only screen and (max-width: 414px) {
  #EventEntries #Btn {
    width: 87.5vw
  }

  #EventEntries #Btn a {
    font-size: 3.4375vw
  }

  #EventEntries #Btn img {
    width: 4.6875vw;
    margin-left: 2.5vw
  }
}

article {
  width: 30.5%;
  margin: 0 0.6%;
  margin-bottom: 60px;
  position: relative;
  Color: #000
}

article .DateArea {
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  z-index: 15;
  top: 0.3rem;
  position: relative
}

article .DateArea h3 {
  height: 100px;
  margin-right: 30px
}

article .DateArea h3 img {
  height: 100%
}

.en article .Place{
  padding: 2.2rem 2rem 2rem 18rem;
}

article .Place {
  background: #000000;
  padding: 2.2rem 2rem 2rem;
  font-size: 2.4rem;
  font-size: 2rem;
  font-weight: 700;
  color: #80D0BF;
  position: relative;
  text-align: right;
  z-index: 10;
  top: -4rem;
}
.en article .Place .img01{
  width: 5.6rem;
  height: 11.5rem;
  position: absolute;
  top: -3.1rem;
  right: 35%;
}
.en article .Place .img02{
  width: 8rem;
  height: 7.9rem;
  position: absolute;
  top: -1.2rem;
  right: 40%;
}
.en article .Place .img04{
  width: 14.3rem;
  height: 11.3rem;
  position: absolute;
  top: -4.9rem;
  right: 40%;
}
.en article .Place .img07,
.en article .Place .img09,
.en article .Place .img10,
.en article .Place .img12{
  display: none;
}

article .Place .img01{
  width: 5.6rem;
  height: 11.5rem;
  position: absolute;
  top: -3.1rem;
  right: 12.9rem;
}

article .Place .img02{
  width: 10rem;
  height: 9.4rem;
  position: absolute;
  top: -1.9rem;
  right: 13.9rem;
}
article .Place .img03{
  width: 6.9rem;
  height: 10.7rem;
  position: absolute;
  top: -1.6rem;
  right: 15.5rem;
}
article .Place .img04{
  width: 14.3rem;
  height: 11.3rem;
  position: absolute;
  top: -4.9rem;
  right: 10.2rem;
}
article .Place .img05{
  width: 7rem;
  height: 12.4rem;
  position: absolute;
  top: -3.7rem;
  right: 14.2rem;
}
article .Place .img06{
  width: 5.1rem;
  height: 11.9rem;
  position: absolute;
  top: -2.7rem;
  right: 16.2rem;
}
article .Place .img07{
  width: 15.1rem;
  height: 11.1rem;
  position: absolute;
  top: -3.4rem;
  right: 12.2rem;
}
article .Place .img08{
  width: 11.3rem;
  height: 10.7rem;
  position: absolute;
  top: -2.1rem;
  right: 10.2rem;
}
article .Place .img09{
  width: 9.1rem;
  height: 11.1rem;
  position: absolute;
  top: -2.7rem;
  right: 12.2rem;
}
article .Place .img10{
  width: 6.4rem;
  height: 11.7rem;
  position: absolute;
  top: -2.7rem;
  right: 12.2rem;
}
article .Place .img12{
  width: 11.7rem;
  height: 10.9rem;
  position: absolute;
  top: -1.7rem;
  right: 10.2rem;
}

article .Place span {
  font-size: 14px;
  font-size: 1.4rem
}

article .Place.yellow{
  color: #FEF780;
}
article .Place.orange{
  color: #F7C180;
}

article .InfoArea {
  width: 100%;
  margin: -50px auto 0;
  padding: 55px 40px 70px;
  position: relative;
  background-image: url(../img/BG-Wall@2x.png);
  background-repeat: repeat;
  background-size: cover;
  position: relative;
}

article .InfoArea.none {
  padding: 55px 0 70px;
}
article .InfoArea.none .EventLink a{
  width: 80%;
}
article .InfoArea:before,
article .InfoArea:after {
  content: '';
  left: 0;
  position: absolute;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 161, 128, 0.2);
}

article .InfoArea.yellow:before,
article .InfoArea.yellow:after {
  background: rgba(252, 239, 0, 0.2);
}
article .InfoArea.orange:before,
article .InfoArea.orange:after {
  background: rgba(240, 131, 0, 0.2);
}

article .InfoArea:before {
  top: 0;
  z-index: -1;
}

article .InfoArea:after {
  bottom: 0
}

article h2,
article .EventTxt,
article .Ticket,
article .EventLink a {
  z-index: 10;
  position: relative
}

.en article h2 {
  margin: 0 auto 4rem
}

article h2 {
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 40px
}
article h2 span{
  font-size: 2.4rem;
}

article h2 span.medium{
  font-size: 2.8rem;
}

article h2 em{
  font-style: normal;
  font-size: 2rem;
  margin: 0 0.8rem 0 0;
}

article h2 .SubTitle {
  display: block;
  padding-top: 5px;
  font-size: 24px;
  font-size: 2.4rem
}

.en article .EventTxt {
  text-align: start;
}

article .EventTxt {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.8;
  margin: 0 auto 40px;
  padding: 0;
  text-align: justify;
  text-justify: inter-ideograph
}

article .InfoArea.none .EventTxt{
  padding: 0 40px;
}

article .EventTxt.margin {
  margin: 0 auto 20px;
}

article .Sub {
  padding-top: 5px;
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400
}

.en article .Price {
  font-size: 2rem;
  word-spacing: 0.1rem;
  text-align: start;
  text-align-last: start;
}

article .Price {
  padding-top: 5px;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500
}

article .Price.small {
  font-size: 1.9rem;
}

article .Price span {
  font-size: 16px;
  font-size: 1.6rem;
  padding-left: 1rem
}

article .Ticket {
  max-width: 28.8rem;
  width: 100%;
  padding: 8px 6px;
  margin: 0 auto 40px;
  background: #019d78;
  color: #FFF;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2;
}

article .EventLink a {
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 72px;
  background: #C4223B url(../img/linkArrow.svg) no-repeat right 3.5rem center;
  font-size: 16px;
  font-size: 1.6rem;
  color: #FFF
}

article .EventLink a:hover {
  background: #A20000 url(../img/linkArrow.svg) no-repeat right 3.5rem center;
}

article figure {
  width: 100%;
  margin: 0 auto 5.3rem;
  position: relative;
  z-index: 1;
}
article figure.narrow {
  width: 50%;
}
article figure.medium {
  width: 86%;
}
article figure.narrow .copy{
  padding: 0;
}
article figure img {
  width: 100%
}
article figure .copy {
  display: block;
  text-align: left;
  padding: 0 30px;
  margin: 20px 0 0;
  font-size: 1.8rem;
}

@media only screen and (max-width: 1600px) {
  article .DateArea h3 {
    height: 6.8rem;
    margin-right: 10px
  }

  article .InfoArea.none h2{
    padding: 0 3.5rem;
  }

  article .Place .img07 {
    width: 6vw;
    height: 5vw;
    top: 0.4rem;
    right: 12.5rem;
  }

  article .Place {
    font-size: 2.4rem;
  }

  article .Place span {
    font-size: 12px;
    font-size: 1.2rem
  }

  article .InfoArea {
    margin: -8.8rem auto 0;
    padding: 10rem 4rem 6rem;
  }
  article .InfoArea.none {
    margin: -8.8rem auto 0;
    padding: 10rem 0 6rem;
  }
  article .EventLink a {
    background: #C4223B url(../img/linkArrow.svg) no-repeat right 1.6vw center;
    background-size: 1.5vw auto;
    font-size: 1.5rem;
    font-size: 1.5rem;
    height: 6rem;
  }
}

@media only screen and (max-width: 1450px) {
  article .InfoArea.none h2 em{
    font-size: 1.5rem;
  }
  article .InfoArea.none h2{
    font-size: 2.5rem;
  }
  article .InfoArea.none h2 span{
    font-size: 1.7rem;
  }
  article .InfoArea.none h2 span.medium{
    font-size: 2rem;
  }
}

@media only screen and (max-width: 1080px) {
  article {
    width: 48%;
    margin: 0 1% 30px
  }
  article .InfoArea.none h2{
    padding: 0 3vw;
  }
  article h2{
    font-size: 2.8rem;
    margin: 0 auto 30px;
  }
  article .DateArea h3 {
    height: 70px;
    margin-right: 10px
  }

  article .DateArea .Place {
    padding: 8px 15px 8px;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: 600
  }

  article .DateArea .Place span {
    font-size: 10px;
    font-size: 1rem;
    font-weight: 400
  }

  article .InfoArea {
    padding: 100px 20px 60px
  }

  article h2 .SubTitle {
    font-size: 20px;
    font-size: 2rem
  }

  article .EventTxt {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 0 20px;
    line-height: 1.5
  }

  article .Price {
    font-size: 20px;
    font-size: 2rem
  }

  article .Price.small {
    font-size: 1.4rem;
  }

  article .Price span {
    font-size: 14px;
    font-size: 1.4rem
  }

  article .Ticket {
    padding: 5px;
    margin: 0 auto 50px
  }

  article .EventLink a {
    background: #C4223B url(../img/linkArrow.svg) no-repeat right 2.5vw center;
    background-size: 2.5vw auto;
    font-size: 15px;
    font-size: 1.5rem;
    height: 60px
  }
}

@media only screen and (max-width: 640px) {
  article {
    width: 100%;
    margin: 0 0 30px
  }

  article .DateArea h3 {
    height: 70px;
    margin-right: 15px
  }

  article .DateArea .Place {
    padding: 8px 15px 8px;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 600
  }

  article .DateArea .Place span {
    font-size: 10px;
    font-size: 1rem;
    font-weight: 400
  }

  article .InfoArea {
    padding: 80px 20px 60px;
    margin-top: -35px
  }

  article h2 {
    font-size: 26px;
    font-size: 2.6rem;
    margin: 0 auto 30px
  }

  article h2 .SubTitle {
    font-size: 16px;
    font-size: 1.6rem
  }

  article .EventTxt {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 0 20px;
    line-height: 1.5
  }

  article .Price {
    font-size: 16px;
    font-size: 1.6rem
  }

  article .Price span {
    font-size: 12px;
    font-size: 1.2rem
  }

  article .Ticket {
    font-size: 12px;
    font-size: 1.2rem;
    width: 182px;
    padding: 5px;
    margin: 0 auto 50px
  }

  article .EventLink a {
    font-size: 14px;
    font-size: 1.4rem;
    height: 40px
  }
}

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

  .en article .Place .img01,
  .en article .Place .img02,
  .en article .Place .img03,
  .en article .Place .img04,
  .en article .Place .img05,
  .en article .Place .img06,
  .en article .Place .img07,
  .en article .Place .img08,
  .en article .Place .img09,
  .en article .Place .img10,
  .en article .Place .img11,
  .en article .Place .img12,
  .en article .Place .img13{
    display: none;
  }

  .en article .Price{
    font-size: 3.48vw;
  }
  .en article .Place{
    padding: 5.2vw 5vw 5.2vw 37.6vw;
    line-height: 1.3;
  }
  article {
    width: 100%;
    margin: 0 0 15vw;
  }

  article figure{
    margin: 0 auto 9vw;
  }

  article .DateArea h3 {
    height: 19.32367vw;
    margin-right: 3.623188vw
  }

  article .DateArea .Place {
    padding: 1.932367vw 3.623188vw;
    font-size: 3.140096vw
  }

  article .DateArea .Place span {
    font-size: 2.6570vw
  }

  article .InfoArea {
    padding: 28.32367vw 4.830917vw 14.49275vw;
    margin-top: -36.661835vw;
  }

  article h2 {
    font-size: 6.280193vw;
    margin: 0 auto 6.246377vw;
  }

  article h2 span{
    font-size: 4vw;
  }

  article h2 .SubTitle {
    font-size: 3.8647342vw
  }

  article .EventTxt {
    font-size: 3.3816425vw;
    padding: 0 4.830917vw;
    margin: 0 0 8vw;
  }

  article .Place{
    top: -21.5vw;
    font-size: 4.8vw;
    padding: 5.2vw 5vw 5.2vw;
  }

  article .Place .img01{
    width: 12vw;
    height: 21vw;
    top: -3.5vw;
    right: 26vw;
  }

  article .Place .img02 {
    width: 20vw;
    height: 18vw;
    top: -2vw;
    right: 27vw;
  }

  article .Place .img03 {
    width: 12vw;
    height: 21vw;
    top: -2vw;
    right: 34vw;
  }

  article .Place .img04 {
    width: 31vw;
    height: 22.7vw;
    top: -7vw;
    right: 20vw;
  }

  article .Place .img05 {
    width: 13vw;
    height: 23vw;
    top: -4vw;
    right: 32vw;
  }

  article .Place .img06 {
    width: 10vw;
    height: 21vw;
    top: -4vw;
    right: 33vw;
  }

  article .Place .img07 {
    width: 27vw;
    height: 20vw;
    top: -3vw;
    right: 26vw;
  }

  article .Place .img08 {
    width: 22vw;
    height: 20vw;
    top: -4vw;
    right: 25vw;
  }

  article .Place .img09 {
    width: 15vw;
    height: 19vw;
    top: -2vw;
    right: 26vw;
  }

  article .Place .img10 {
    width: 11vw;
    height: 22vw;
    position: absolute;
    top: -4vw;
    right: 28.7vw;
  }

  article .Place .img11 {
    width: 6.4rem;
    height: 11.7rem;
    position: absolute;
    top: -2.7rem;
    right: 12.2rem;
  }

  article .Place .img12 {
    width: 20vw;
    height: 18vw;
    top: -2vw;
    right: 25vw;
  }

  article figure.medium {
    width: 66%;
  }

  article h2 em {
    font-size: 4.5vw;
    margin: 0 1vw 0 0;
  }

  article .InfoArea.none {
    padding: 28.32367vw 0 14.49275vw;
    margin-top: -36.661835vw;
  }

  article h2 span.medium {
    font-size: 5.7vw;
  }

  article .EventTxt{
    margin: 0 auto 8vw;
  }

  article .EventTxt.margin{
    margin: 0 auto 5vw;
  }

  article .sub{
    font-size: 3vw;
    padding: 0 4.830917vw;
    margin-bottom: 8vw;
  }

  article .DateArea{
    top: -7vw;
  }

  article .Price {
    font-size: 3.8647342vw;
    padding-top: 4vw;
  }

  article .Price span {
    font-size: 2.89855vw
  }

  article .Ticket {
    font-size: 2.89855vw;
    width: 47vw;
    padding: 1.207729vw;
    margin: 0 auto 10vw;
  }

  article .Ticket.wide{
    width: 74vw;
  }

  article .EventLink a {
    font-size: 3.3816425vw;
    height: 14.49275vw;
    background: #C4223B url(../img/linkArrow.svg) no-repeat right 5.5vw center;
    background-size: 5.5vw auto;
  }
}
@media only screen and (max-width: 768px) {
  .js-scrollable {
    overflow-x: scroll;
  }
  #TimeTable figure img{
    width: 1200px !important;
  }
}
.LargeHall {
  background-color: #EBF8FF
}

.SmallHall {
  background-color: #FFFBEC
}

.MusicHall {
  background-color: #FFD4EF
}

.Plaza {
  background-color: #FCF8BF
}

.Galeria {
  background-color: #D9D9D9
}

.LargeStairway {
  background-color: #D9D9D9
}


.TopBlue:before {
  background: url(./img/TopBlue.png) 0 0 no-repeat
}

.TopPurple:before {
  background: url(./img/TopPurple.png) 0 0 no-repeat
}

.TopGreenWhite:before {
  background: url(./img/TopGreenWhite.png) 0 0 no-repeat
}

.TopBrownGrey:before {
  background: url(./img/TopBrownGrey.png) 0 0 no-repeat
}

TopPurplewithLady:before {
  background: url(./img/TopPurplewithLady.png) 0 0 no-repeat
}

.TopRedwithSun:before {
  background: url(./img/TopRedwithSun.png) 0 0 no-repeat
}

.BottomYellow:after {
  background: url(./img/BottomYellow.png) 0 100% no-repeat
}

.BottomWhite:after {
  background: url(./img/BottomWhite.png) 0 100% no-repeat
}

.BottomGrey:after {
  background: url(./img/BottomGrey.png) 0 100% no-repeat
}

.BottomGreyWhiteRed:after {
  background: url(./img/BottomGreyWhiteRed.png) 0 100% no-repeat
}

.BottomYellowBig:after {
  background: url(./img/BottomYellowBig.png) 0 100% no-repeat
}

#TimeTable {
  background: #FFEA00;
  padding: 140px 20px 120px
}

#TimeTable h2 {
  max-width: 690px;
  margin: 0 auto 60px;
  padding: 30px 0;
  display: inline-block;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #000;
  position: relative;
  transition-property: all;
  transition: .3s linear
}

#TimeTable h2 .Sub {
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  padding-bottom: 15px
}

#TimeTable h2:before,
#TimeTable h2:after {
  content: '';
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #000
}

#TimeTable h2:before {
  top: 0
}

#TimeTable h2:after {
  bottom: 0
}

#TimeTable figure {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 35px;
  transition-property: all;
  transition: .3s linear;
  position: relative
}

#TimeTable figure img {
  width: 100%
}

#TimeTable figure .Zoom {
  bottom: 1%;
  right: 1%;
  position: absolute;
  width: 40px;
  background: #FFF;
  border-radius: 5px;
  display: none
}

#TimeTable .TimeTableFooter {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  transition-property: all;
  transition: .3s linear;
  text-align: right;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 400;
  color: #000
}

@media only screen and (max-width: 1080px) {
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  #TimeTable {
    padding: 100px 60px 80px
  }
}

@media only screen and (max-width: 760px) {
  #TimeTable h2 {
    line-height: 1.4
  }

  #TimeTable h2 .TB {
    display: block
  }
}

@media only screen and (max-width: 640px) {
  #TimeTable {
    padding: 80px 20px 60px
  }

  #TimeTable h2 {
    font-size: 20px;
    font-size: 2rem;
    margin-bottom: 50px
  }

  #TimeTable h2 .Sub {
    font-size: 12px;
    font-size: 1.2rem;
    padding-bottom: 8px
  }

  #TimeTable figure .Zoom {
    display: block
  }

  #TimeTable .TimeTableFooter {
    font-size: 13px;
    font-size: 1.3rem
  }
}

@media only screen and (max-width: 414px) {
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }

  #TimeTable {
    padding: 14.4927vw 4.83091vw
  }

  #TimeTable h2 {
    font-size: 4.83091vw;
    margin-bottom: 12.07729vw
  }

  #TimeTable h2 .Sub {
    font-size: 2.89855vw
  }

  #TimeTable figure {
    margin-bottom: 4.83091vw
  }

  #TimeTable .TimeTableFooter {
    font-size: 2.89855vw
  }
}

#Caution {
  padding: 120px 20px 140px;
  background: #C03D36;
  width: 100%;
  margin: 0 auto;
  transition-property: all;
  transition: .3s linear
}

#Caution .TextBox {
  margin: 0 auto;
  max-width: 1100px
}

#Caution h2 {
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 700;
  margin: 0 auto 45px;
  transition-property: all;
  transition: .3s linear;
  line-height: 1.4
}

#Caution p {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.9;
  color: #FFF;
  margin-bottom: 0;
  transition-property: all;
  transition: .3s linear
}

#Caution a {
  color: #FFF
}

#Caution a:hover {
  text-decoration: underline
}

@media only screen and (max-width: 1080px) {
  #Caution h2 {
    font-size: 24px;
    font-size: 2.4rem;
    margin: 0 auto 40px
  }

  #Caution span {
    display: block
  }

  #Caution p {
    font-size: 18px;
    font-size: 1.8rem
  }
}

@media only screen and (max-width: 640px) {
  #Caution {
    padding: 60px 20px
  }

  #Caution h2 {
    font-size: 20px;
    font-size: 2rem;
    margin: 0 auto 30px
  }

  #Caution p {
    font-size: 14px;
    font-size: 1.4rem
  }
}

@media only screen and (max-width: 414px) {
  #Caution {
    padding: 14.4927vw 4.83091vw
  }

  #Caution h2 {
    font-size: 4.83091vw;
    margin: 0 auto 7.24637vw
  }

  #Caution p {
    font-size: 3.381642vw
  }
}

#Footer-SNS {
  padding: 50px 20px;
  width: 100%;
  margin: 0 auto;
  transition-property: all;
  transition: .3s linear;
  background: #393939
}

#Footer-SNS h2 {
  font-size: 22px;
  font-size: 2.2rem;
  color: #FFF;
  margin: 0 auto 25px;
  transition-property: all;
  transition: .3s linear
}

#Footer-SNS ul {
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  -webkit-justify-content: center
}

#Footer-SNS ul li {
  margin: 0 15px;
  transition-property: all;
  transition: .3s linear
}

#Footer-SNS a {
  color: #393939;
  background: #FFF;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center
}

#Footer-SNS a:hover {
  color: #FFF;
  background: #C03D36
}

#Footer-SNS i {
  font-size: 28px;
  font-size: 2.8rem;
  padding-top: 4px;
  transition-property: all;
  transition: .3s linear
}

@media only screen and (max-width: 640px) {
  #Footer-SNS {
    padding: 40px 20px
  }

  #Footer-SNS h2 {
    font-size: 18px;
    font-size: 1.8rem;
    color: #FFF;
    margin: 0 auto 15px
  }

  #Footer-SNS ul li {
    margin: 0 8px
  }

  #Footer-SNS a {
    width: 40px;
    height: 40px
  }

  #Footer-SNS i {
    font-size: 20px;
    font-size: 2rem;
    padding-top: 5px
  }
}

@media only screen and (max-width: 414px) {
  #Footer-SNS {
    padding: 40px 20px
  }

  #Footer-SNS h2 {
    font-size: 5.3125vw;
    margin: 0 auto 3.62318vw
  }

  #Footer-SNS ul li {
    margin: 0 1.93236vw
  }

  #Footer-SNS a {
    width: 9.66183vw;
    height: 9.66183vw
  }

  #Footer-SNS i {
    font-size: 4.83091vw;
    padding-top: 1.207729vw
  }
}

#Footer {
  padding: 60px 20px 5px;
  width: 100%;
  margin: 0 auto;
  transition-property: all;
  transition: .3s linear;
  background: #292929
}

#Footer a {
  color: #FFF
}

#Footer a:hover {
  color: #C03D36
}

#Footer .Inner {
  width: 100%;
  margin: 0 auto 40px;
  display: flex;
  -webkit-display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  align-items: center
}

#Footer h2 {
  width: 140px
}

#Footer h2 img {
  width: 100%
}

#Footer ul.fNav {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -webkit-display: flex;
  order: 2;
}

#Footer ul.fNav li{
  width: 76px;
  margin: 0 32px 0 0;
}

#Footer ul.fNav li:last-child{
  width: 120px;
  margin: 0 0 0;
}

#Footer ul.fNav li a {
  display: block;
}

#Footer ul.fNav li a:hover{
  opacity: 0.6;
}

#Footer ul.fNav li a img{
  width: 100%;
}

#Footer .InfoBox {
  width: 90%;
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  text-align: left
}

#Footer .TextBox {
  padding-left: 20px
}

#Footer h3 {
  font-size: 20px;
  font-size: 2rem;
  color: #FFF;
  margin-bottom: 8px
}

#Footer .Address,
#Footer .Tel {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5
}

#Footer .Address span,
#Footer .Tel span {
  font-size: 12px;
  font-size: 1.2rem;
  padding-left: 5px
}

#Footer .Address {
  margin-bottom: 3px
}

#Footer .Copyrights {
  font-size: 12px;
  font-size: 1.2rem;
  color: #B5B5B5
}

#Footer .Copyrights a {
  color: #B5B5B5
}

@media only screen and (max-width: 1200px) {
  #Footer .TextBox {
    padding-left: 10px
  }

  #Footer h2 {
    width: 120px
  }

  #Footer h3 {
    font-size: 16px;
    font-size: 1.6rem
  }

  #Footer .Address,
  #Footer .Tel {
    font-size: 14px;
    font-size: 1.4rem
  }

  #Footer ul.fNav {
    font-size: 12px;
    font-size: 1.2rem
  }
}

@media only screen and (max-width: 760px) {
  #Footer {
    padding: 50px 20px 5px
  }

  #Footer .Inner {
    width: 100%;
    margin: 0 auto 40px;
    display: block
  }

  #Footer ul.fNav {
    width: 100%;
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    margin: 0 auto 50px
  }

  #Footer .InfoBox {
    width: 100%;
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    margin: 0 auto 20px
  }

  #Footer .TextBox {
    padding-left: 10px
  }

  #Footer h2 {
    width: 100px
  }

  #Footer h3 {
    font-size: 14px;
    font-size: 1.4rem
  }

  #Footer .Address,
  #Footer .Tel {
    font-size: 12px;
    font-size: 1.2rem
  }

  #Footer .Address span,
  #Footer .Tel span {
    font-size: 10px;
    font-size: 1rem
  }
}

@media only screen and (max-width: 500px) {
  #Footer {
    padding: 10vw 4vw 1vw
  }

  #Footer .Inner {
    margin: 0 auto 8vw
  }

  #Footer .TextBox {
    padding-left: 2vw
  }

  #Footer h3 {
    font-size: 4vw
  }

  #Footer .Address,
  #Footer .Tel {
    font-size: 2.4vw
  }

  #Footer .Address span,
  #Footer .Tel span {
    font-size: 2vw
  }

  #Footer .Copyrights {
    font-size: 2vw
  }
}

@media only screen and (max-width: 460px) {
  #Footer .InfoBox {
    display: block;
    margin: 0 auto;
    text-align: center
  }

  #Footer h2 {
    margin: 0 auto 8.695vw
  }

  #Footer h3 {
    margin: 0 auto 4.34782vw
  }
}

#PageTop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #C13F38;
  opacity: 0.9;
  display: none;
  z-index: 20;
}

#PageTop a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: #FFF;
  font-size: 28px;
  font-size: 2.8rem;
  width: 50px;
  height: 50px
}

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

  article .Place .img04 {
    width: 14.3rem;
    height: 11.3rem;
    position: absolute;
    top: -4.5rem;
    right: 10.2rem;
  }

  #Info .TextBox {
    padding: 30px 30px;
    width: 96%
  }

  #Info p {
    font-size: 22px;
    font-size: 2.2rem;
    margin-bottom: 10px
  }

  #Info p:last-child {
    margin-bottom: 0px
  }

  #Info .TB {
    display: block
  }
}

@media only screen and (max-width: 640px) {
  #Info {
    padding: 60px 20px
  }

  #Info .TextBox {
    padding: 30px 20px
  }

  #Info .SP {
    display: block
  }

  #Info p {
    font-size: 20px;
    font-size: 2rem
  }
}

@media only screen and (max-width: 414px) {
  #Info {
    padding: 14.4927vw 4.83091vw
  }

  #Info .TextBox {
    padding: 7.2463vw 4.83091vw
  }

  #Info p {
    font-size: 4.2vw;
  }
  #Footer ul.fNav {
    margin: 0 auto 6vw;
  }
  #Footer ul.fNav li {
    width: 18%;
    margin: 0 5vw 0 0;
  }
  #Footer ul.fNav li:last-child {
    width: 25%;
    margin: 0 0 0;
  }
  #Footer h3 {
    font-size: 4vw;
    line-height: 6vw;
  }
}


@media only screen and (max-width: 797px) {
  #PageTop {
    width: 40px;
    height: 40px
  }

  #PageTop a {
    width: 40px;
    height: 40px;
    font-size: 22px;
    font-size: 2.2rem
  }
}

@media screen and (max-width: 1322px) and (min-width: 768px){
	html {
		font-size: 0.666666vw;
	}
}

/*# sourceMappingURL=Style.css.map */