/* ==========================================
このファイルはメイン画面に適用するスタイルシート 
============================================= */

.header-background {
  background-color: transparent;
}
.bg-body {
  position: relative;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image: url(../image/background.png);
}
/* --- 項目名 --- */
.title-font {
  color: #109de2;
}
.title-font, .title-ja {
  text-align: center;
}
/* --- トップエリア --- */
.top-event-title {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}
.top-area {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.event-title-area {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}
.event-title-area>* {
  font-size: 10vh;
  font-weight: bold;
  line-height: 1.2;
}
.event-title-04 {
  text-align: right;
}
.overview-top {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  color: #ffffff;
}
/* --- 会場広告 --- */
.link-img {
  max-width: 80%;
  height: 100px;
  margin: 0 10%;
  text-align: center;
}
.link-img>img {
  width: auto;
  height: 100px;
}
/* --- お知らせ --- */
.news-area {
  padding: 10px;
  background-color: #ffffff;
}
.news-content-area {
  border: solid 1px #000000;
  border-radius: 5px;
  background-color: transparent;
}
/* --- トピックコンテンツ --- */
.topic-content-area {
  min-width: 300px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 10px;
  color: #000000;
  padding: 20px 10px;
}
.topic-content-area:hover {
  transition : all 0.5s ease 0s;
  background-color: #eaff72;
  color: #ff9e2f;
}
.neon-content {
  box-shadow: -3px 3px 16px 2px #767676;
}
.topic-logo-area>svg {
  width: 40%;
  height: auto;
}
.topic-content-english-text {
  font-weight: bold;
  font-size: 30px;
}
/* --- ツイッター --- */
.twitter-area {
  padding: 10px;
}
.twitter-area .container {
  max-width: 700px;
}
.place-pictures {
  overflow-x: auto;
}
.place-pictures > img {
  max-height: 40vh;
}
.btn-live-ticket,
.btn-video-ticket {
  padding: 10px;
  margin: 10px;
  text-align: center;
  border-radius: 5px;
}
.btn-live-ticket {
  background: linear-gradient(#FFC778, #F89174);
  color: #fb4407;
  font-weight: bold;
}
.btn-video-ticket {
  background-color: #eaff72;
  color: #16ad16;
}
.btn-live-ticket:hover {
  background-color: #ffb159;
  color: #fb4407;
}
.btn-video-ticket:hover {
  background-color: #f0ff9d;
  color: #16ad16;
}
.timeline-Body {
  height: 500px;
  overflow-y: auto;
}

#artist-view .card-header,
#timetable-view .card-header {
  color: #ffffff;
}
.act-view {
  width: 100%;
}
.act-view>img {
  width: 100%;
  min-width: 150px;
}
.act-name {
  color: #ffffff;
  font-size: 1.2em;
}

/* --- 概要 --- */
#about-view > * {
  color: #ffffff;
}
#about-view h2 {
  text-align: center;
  font-weight: bold;
  background-color: #dbdbdbac;
}
.top-message {
  padding: 20px 10px 50px 10px;
  text-align: center;
  font-size: large;
}
.zone-pic > img {
  width: 100%;
}
.zone-message > span {
  color: #16ad16;
  font-size: 2rem;
  font-weight: bold;
}
.nodoame-message > span {
  color: #fbcd07;
  font-size: 2.5rem;
  font-weight: bold;
}
@media (max-width: 992px) {
  .zone-message > span,
  .nodoame-message > span {
    font-size: large;
  }
}