@charset "utf-8";

/*
** Description: 性闘士☆準矢 オフィシャルサイト
** Page - CSS
** Created: 2026
** ==================================================
*/

/* ==============================
   Details 公演詳細
============================== */

.details .showCard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-md);
  align-items: flex-start;
}

.details .detailsText {
  display: grid;
  gap: var(--space-md);
}

.details .detailsText .detailsInfo dl {
  display: grid;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--space-base);
  margin-bottom: var(--space-base);
}

.details .detailsText .detailsInfo dt {
  font-weight: 400;
  color: var(--color-sub);
}

.details .detailsText .detailsInfo dd {
  font-weight: 700;
  font-size: var(--fs-md);
}

.details .detailsText .detailsPlayguide p a {
  display: block;
  text-align: center;
  color: rgb(0 170 255);
  border: 2px solid rgb(0 170 255);
  background-color: rgb(0 170 255 / 0.3);
  padding-block: var(--space-base);
  border-radius: var(--space-lg);
}

/* showflyer */
.details .flyer {
  display: grid;
  gap: var(--space-xs);
}

/* showPlace Place */
.details .detailsText .detailsInfo .showPlace .place {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--fs-md);
}

/* showPlace Address */
.details .detailsText .detailsInfo .showPlace .address {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--color-sub);
}

.details .detailsText .detailsInfo .showPlace .googleMap {
  font-size: var(--fs-xs);
  text-align: right;
}

.details .detailsText .detailsInfo .showPlace .googleMap a {
  color: var(--color-accent);
}

.details .detailsText .detailsInfo .showPlace .address .googleMap a i {
  color: var(--color-accent);
}

/* showAct */
.details .detailsText .detailsInfo .showAct dd {
  font-size: var(--fs-base);
}

.details .detailsText .detailsInfo .showAct dd ul li {
  display: inline;
}

.details .detailsText .detailsInfo .showAct dd ul li+li::before {
  content: " / ";
}

/* showTicket */
.details .detailsText .detailsInfo .showTicket dd {
  font-size: var(--fs-base);
}

.details .detailsText .detailsInfo .showTicket dd li {
  display: grid;
  grid-template-columns: 3.5em auto 5fr;
}

.details .detailsText .detailsInfo .showTicket dd li .drink::before {
  content: "（";
}

.details .detailsText .detailsInfo .showTicket dd li .drink::after {
  content: "）";
}

/* detailsReserve */
.details .detailsText .detailsReserve form {
  background-color: rgb(196 0 26 / 0.08);
  padding: var(--space-base);
  border-radius: 4px;
}


/* ==============================
   Goods 物販・グッズ一覧
============================== */

#goodsSec .goods {
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

#goodsSec .goods .showCard {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: var(--space-xs);
}

#goodsSec .goods .showCard .goodsTitle {
  font-weight: 700;
}

#goodsSec .goods .showCard .price {
  text-align: right;
}


/* sold */

#goodsSec .goods .sold .photo {
  position: relative;
  filter: brightness(60%);
}

#goodsSec .goods .sold .photo::before {
  display: inline-block;
  content: "SoldOut";
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: var(--fs-lg);
  background-color: rgb(196 0 26 / 0.4);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-base);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#goodsSec .goods .sold .photo:hover {
  filter: brightness(100%);
}

#goodsSec .goods .sold .photo:hover::before {
  opacity: 0.2;
}