@charset 'utf-8';

body {
  background-color: black;
  /* padding-top: 2rem; */
  color: #fff;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

a {
  color: #4082c0;
  word-break: break-all;
}
a > h3,
.list-group-item a.text-decoration-none {
  color: #fff;
}
a > h3:hover,
.list-group-item a.text-decoration-none:hover {
  color: #ccc;
}
.container {
  max-width: 960px;
  padding: 0 1rem;
}
.btn {
  border-radius: 0;
}
.moreBtnWrapper {
  min-width: 4rem !important;
}
header h1 {
  font-size: 1rem;
  letter-spacing: 0.1rem;
  text-align: center;
}
/* main section > p,
main section > ul,
section.live article {
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 2rem;
} */
main section {
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 5rem;
  padding: 1rem 0;
}
h1.pageTitle {
  font-size: 1.2rem;
  /* font-weight: 100; */
  border: 1px #fff solid;
  /* display: inline-block; */
  padding: 0.4rem 5rem;
  /* font-family: "Russo One", sans-serif; */
  text-align: center;
  margin-bottom: 4rem;
}
section h2.title {
  text-align: center;
  margin-bottom: 2.5rem;
  /* font-family: "Source Sans Pro", sans-serif; */
  font-family: "Russo One", sans-serif;
}
section h2.title > span,
section h2.title > .accordion-button span {
  font-size: 2.5rem;
  border-bottom: #fff 7px solid;
  padding: 0 1.3rem;
}
section h2.title > .accordion-button > div {
  width: 90%;
}
.nav-link:focus,
.nav-link:hover {
  background-color: #333;
}
/* NEWS記事 */
ul.list-group.list-group-flush,
ul.list-group.list-group-flush .list-group-item {
  color: white !important;
  background-color: black !important;
}
section.news .list-group-item p {
  margin-bottom: 0;
}
ul.list-group.list-group-flush .list-group-item {
  border-color: #444;
}
/* PLAYLIST */
section.playlist article {
  margin-bottom: 1.5rem;
}
section.playlist article > h3 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}
/* LIVE情報 */
section.live article {
  margin: 0 auto 3rem;
}
section.live article p {
  margin-bottom: 0;
}
section.live article h4 {
  /* 日付 */
  font-size: calc(1.2rem + 0.3vw);
  background-color: #666;
  padding: 6px 10px;
  margin-bottom: 0;
}
section.live article h3 {
  /* タイトル */
  font-size: calc(1.2rem + 0.6vw);
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
  padding: 0.4rem 0;
}
section.live article dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
section.live article dl dt {
  width: 3rem;
  font-weight: normal;
  margin-bottom: 0.2rem;
}
section.live.detail article dl dt {
  width: 5rem;
  margin-bottom: 0.8rem;
}
section.live article dl dd {
  width: calc(100% - 3rem);
  margin-bottom: 0.2rem;
}
section.live.detail article dl dd {
  width: calc(100% - 5rem);
  margin-bottom: 0.8rem;
}
@media (min-width: 576px) {
  section.live.detail article dl dt {
    width: 5rem;
  }
  section.live.detail article dl dd {
    width: calc(100% - 5rem);
  }
}
/* Pagenation */
.page-link {
  color: #333;
}
.pagination .page-item.active .page-link {
  background-color: #333;
  border-color: #444;
  box-shadow: 0 2px 5px hsl(0deg 0% 7% / 30%);
}
footer {
  height: 6rem;
  padding: auto;
}

@media (min-width: 576px) {
  header h1 {
    font-size: 1.8rem;
    letter-spacing: 0.5rem;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  header h1 {
    font-size: 1.4rem;
    letter-spacing: 0.3rem;
  }
}
/* Alert */
.alert-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* -------------------------------------------------- */
/* 個別ページ */
/* -------------------------------------------------- */
.tableTitle {
  font-size: 1rem;
}
table.equipmentTable thead th {
  background-color: #444;
}
.fromSummerNote h1 {
  font-size: 1.5rem;
  color: #ddd;
  font-weight: bold;
}
.fromSummerNote h2 {
  font-size: 1.3rem;
  color: #ccc;
  font-weight: bold;
}
.fromSummerNote h3 {
  font-size: 1.1rem;
  color: #ddd;
  font-weight: bold;
}
.fromSummerNote p {
  font-size: 1rem;
}
/* NEWS記事詳細 */
.news.detail h4 {
  font-size: 1rem;
  font-weight: normal;
  font-family: "Times New Roman", Times, serif;
}
.news.detail h3.title {
  font-size: 1.5rem;
  line-height: 1.5;
  border-top: 1px #999 solid;
  border-bottom: 1px #999 solid;
  margin-bottom: 2rem;
  padding: 0.5rem 0.2rem;
}
.news.detail .description {
  padding-bottom: 0.5rem;
  border-bottom: 1px #999 dotted;
  margin-bottom: 1rem;
}

/* -------------------------------------------------- */
/* accordion */
/* -------------------------------------------------- */
.accordion-item {
  background-color: inherit;
  color: inherit;
  border: none;
}
.accordion-button {
  color: #fff;
  background-color: inherit;
  text-align: center;
}
.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: inherit;
  box-shadow: none;
}
.accordion-button::after {
  font-family: "Bootstrap-icons";
  content: "\F282";
  color: #fff;
}
.accordion-button:not(.collapsed)::after {
  /* font-family: "Bootstrap-icons";
  content: "\F286";
  color: #fff; */
  background-image: none;
}

/* ---- carousel ---- */
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/* body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
} */

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 1rem;
  z-index: 10;

  background-color: rgb(4 4 4 / 45%);
  right: 5%;
  left: 5%;
  bottom: 3rem;
  padding: 0.5rem 1rem;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 16rem;
  overflow: hidden; /* add */
}

.carousel-item img {
  /*object-fit: cover;
  object-position: 50% 50%;*/
  position: absolute;
  min-width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}
/* rtl:end:ignore */

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -0.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */
.carousel-caption h1 {
  font-size: 1.2rem;
}
@media (min-width: 40em) {
  .carousel-caption h1 {
    font-size: 1.8rem;
  }
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    /* font-size: 1.25rem; */
    font-size: 1.5rem;
    line-height: 1.4;
  }
  .carousel-item {
    height: 26rem;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .carousel-caption h1 {
    /* font-size: 3.5rem; */
  }
  .featurette-heading {
    margin-top: 7rem;
  }
  .carousel-item {
    height: 40rem;
  }
}

/* ADDITIONAL
-------------------------------------------------- */
@media (min-width: 1200px) {
  .carousel-caption .h1,
  .carousel-caption h1 {
    font-size: 1.5rem;
  }
}

/* 出演者名のカード（POLC のアーティストにつながっている名前） */
.performer-link{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.performer-link:hover,.performer-link:focus-visible{color:#fff;text-decoration-style:solid}
#performer-card{position:fixed;z-index:1080;background:#111;color:#fff;border:1px solid #555;border-radius:8px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
#performer-card.pc-sheet{left:0;right:0;bottom:0;border-radius:12px 12px 0 0;max-height:80vh;overflow:auto}
#performer-card.pc-pop{max-height:70vh;overflow:auto}
.pc-head{display:flex;align-items:center;gap:10px;margin:0 24px 8px 0}
.pc-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.pc-name{font-weight:bold;font-size:1.1rem}
.pc-bio{font-size:.9rem;white-space:pre-line;margin-bottom:12px}
.pc-actions{display:flex;gap:8px;flex-wrap:wrap}
.pc-video{width:100%;aspect-ratio:16/9;border:0}
.pc-close{position:absolute;top:6px;right:10px;background:none;border:0;color:#fff;font-size:1.4rem;line-height:1}

/* 公演のタイル（フライヤーを並べる形） */
main section.live-grid{max-width:none}
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;margin-bottom:3rem}
@media (min-width:768px){.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px}}
@media (min-width:992px){.tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:block;color:#fff;text-decoration:none;line-height:1.5;word-break:normal;overflow-wrap:anywhere}
.tile:hover,.tile:focus-visible{color:#fff}
.tile-thumb{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#222}
.tile-bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(16px) brightness(.5)}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.tile:hover .tile-img,.tile:focus-visible .tile-img{transform:scale(1.04)}
.tile-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-weight:bold;border:1px solid #444}
.tile-date{display:block;margin-top:8px;font-size:.8rem;color:#aaa;letter-spacing:.05em}
.tile-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;font-weight:bold}
.tile:hover .tile-title{text-decoration:underline}

/* 細い画面の詳細ページ：見出しをスマホの形（会場名とトップへ）にそろえる */
.sp-mini-head{display:none}
@media (max-width:767.98px){
  body.sp-sub-page>header{display:none}
  .sp-mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #333;margin-bottom:16px}
  .sp-mini-name{color:#fff;font-weight:900;font-size:1.2rem;text-decoration:none}
  .sp-mini-top{color:#fff;font-size:.8rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 12px;text-decoration:none}
}