body {
  line-height: 1;

  /* font-family: 'Helvetica Neue','Helvetica','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴシック','Hiragino Sans',sans-serif; */
  font-family: 'Arial', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', 'メイリオ', Meiryo, sans-serif;
}

.is-white {
  background: #ccc;  
}

.is-black {
  background: rgb(0,0,0);
  
  /* background-color: #000; */
  color: #fff;
}

.is-purple {
  background: rgb(83, 28, 80);
  
  /* background-color: #000; */
  color: #fff;
}

.is-white .container {
  background: #000;
  background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(138, 138, 138) 100%);
}

.is-black .container {
  background: #000;
  background: radial-gradient(circle, rgb(73, 73, 73) 0%, rgb(0,0,0) 100%);
}

.is-purple .container {
  background: #a660a3;
  background: radial-gradient(circle, rgb(166, 96, 163) 0%, rgb(83, 28, 80) 100%);
}

.container {

  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.logo {
  width: 350px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .logo {
    width: calc(300vw / 3.75);
  }
}

.content {
  margin-top: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .content {
    margin-top: calc(30vw / 3.75);
  }
}

.is-en .content {
  margin-top: 30px;
}

.content .catch {
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 1px;
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .content .catch {
    font-size: calc(20vw / 3.75);
    margin-top: calc(20vw / 3.75);
  }
}


.content .text {
  margin-top: 7px;
  font-size: 16px;
  line-height: calc(40/22);
  letter-spacing: 1px;
}

@media screen and (max-width: 768px) {
  .content .text {
    line-height: calc(45/22);
    margin-top: calc(7vw / 3.75);
    font-size: calc(14vw / 3.75);
  }
}

.content .info {
  font-weight: bold;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .content .info {
    flex-direction: column;
    gap: 0;
  }
}

.is-en .content .info {
  flex-direction: column;
}

.content .venue {
  font-size: 16px;
  background-color: #000;
  color: #e0e0e0;
  padding: 5px;
}

@media screen and (max-width: 768px) {
  .content .venue {
    font-size: calc(18vw / 3.75);
    padding: calc(5vw / 3.75);
  }
}

@media screen and (max-width: 768px) {
  .is-en .content .venue {
    font-size: calc(16vw / 3.75);
  }
}

.content .date {
  font-size: 16px;
  line-height: calc(30/22);
}

@media screen and (max-width: 768px) {
  .content .date {
    line-height: calc(45/22);
    font-size: calc(20vw / 3.75);
  }
}

.content .date .is-large {
  font-size: 30px;
}

@media screen and (max-width: 768px) {
  .content .date .is-large {
    font-size: calc(30vw / 3.75);
  }
}



.is-black .container,
.is-purple .container {
  color: #eee;
}

.is-bold {
  font-weight: bold;
}

.show-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .show-sp {
    display: block;
  }
}

.c-floatbnr img {
  width: 100%;
  max-width: 100%;
}


.c-floatbnr {
    position:fixed;
    right:0;
    bottom:0;
    z-index:5;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
@media screen and (max-width: 768px) {
    .c-floatbnr {
        width:53.3333333333vw;
        bottom:0
    }
}
@media screen and (min-width: 769px) {
    .c-floatbnr {
        width:230px;
        bottom:0
    }
}
.c-floatbnr.-inactive .item {
    display:none
}
.c-floatbnr.-inactive .btn:before,.c-floatbnr.-inactive .btn:after {
    width:50%
}
.c-floatbnr.-inactive .btn:before {
    right:7%;
    left:auto
}
.c-floatbnr.-inactive .btn:after {
    left:7%
}
.c-floatbnr .item {
    line-height:0
}
.c-floatbnr .btn {
    overflow:hidden;
    display:block;
    border:1px solid #000;
    background-color:#fff;
    margin:0 0 0 auto;
    position:relative
}
@media screen and (max-width: 768px) {
    .c-floatbnr .btn {
        width:5.3333333333vw;
        height:5.3333333333vw
    }
}
@media screen and (min-width: 769px) {
    .c-floatbnr .btn {
        width:20px;
        height:20px
    }
}
.c-floatbnr .btn:before,.c-floatbnr .btn:after {
    position:absolute;
    content:"";
    display:block;
    width:100%;
    height:1px;
    background-color:#000;
    top:50%;
    left:0
}
.c-floatbnr .btn:before {
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.c-floatbnr .btn:after {
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}