/* コンポーネントCSS読み込み */
/* layout */
@import url("../../layout/_header.css");
@import url("../../layout/_footer.css");

/* pages */

/* ページ固有CSS */
#main {
  background-color: var(--white);
}

.gradation-bg {
  background: var(--gradation-color-vertical);
}

/* time */
#time .time {
  background: var(--gradation-color-horizontal);
  padding: 16px 0;
}

#time .time .time-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

#time .time .time-inner img {
  width: 570px;
  height: auto;
}

/* @mixin mobile() */
@media screen and (max-width: 769px) {
  #time .time .time-inner img {
    width: 250px;
    height: auto;
  }
}

/* about */
#about .about {
  background-color: #0f0402;
}

#about .about .about-inner {
  padding-block: 32px;
  text-align: center;
  color: #853669;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

#about .about .about-inner span {
  color: #903b72;
  font-weight: 600;
}

#about .about .about-title {
  font-size: var(--font-size-2xl);
  margin-block-end: 32px;
}

#about .about .about-description > *:not(:last-child) {
  margin-block-end: 24px;
}

#about .about .about-character {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block-start: 32px;
}

#about .about .about-fireball {
  width: 48px;
}

/* @mixin mobile() */
@media screen and (max-width: 769px) {
  #about .about .about-fireball {
    display: none;
  }
}

#about .about .about-fireball-1 {
  position: absolute;
  top: 10%;
  left: -65px;
}

#about .about .about-fireball-2 {
  position: absolute;
  top: 40%;
  left: -70px;
}

#about .about .about-fireball-3 {
  position: absolute;
  top: 20%;
  right: -80px;
}

#about .about .about-fireball-4 {
  position: absolute;
  top: 50%;
  right: -60px;
}

/* venue */
#venue .venue {
  padding-block: 32px;
}

#venue .venue .venue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
}

/* @mixin mobile() */
@media screen and (max-width: 769px) {
  #venue .venue .venue-list {
    flex-direction: column;
    gap: 32px;
  }
}

/* event */
#event .event {
  padding-block: 32px;
}

#event .event .event-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

#event .event .event-card {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 auto;
  max-width: 480px;
}

#event .event .event-card-img {
  width: 100%;
}

#event .event .event-card-img img {
  width: 100%;
  height: auto;
}

#event .event .event-card-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

#event .event .event-card-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#event .event .event-card-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

#event .event .event-card-tag {
  font-size: var(--font-size-sm);
  padding: 4px 8px;
  border-radius: 9999px;
  border: 1px solid #853669;
  color: #853669;
}

#event .event .event-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

#event .event .event-card-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

#event .event .event-card-description .event-card-description-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-align: center;
  color: #853669;
  width: 100%;
}

#event .event .event-card-description .event-card-subsection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#event
  .event
  .event-card-description
  .event-card-subsection
  .event-card-subtitle {
  font-size: var(--font-size-lg);
}

/* goods */
#goods .goods {
  padding-block: 32px;
}

#goods .goods .goods-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

#goods .goods .goods-card {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* @mixin mobile() */
@media screen and (max-width: 769px) {
  #goods .goods .goods-card {
    flex-direction: column;
  }
}

#goods .goods .goods-card .goods-card-img img {
  max-width: 265px;
}

#goods .goods .goods-card .goods-card-info .goods-card-info-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  border: 1px solid #0f0402;
  border-radius: 9999px;
  text-align: center;
  margin-block-end: 8px;
  padding-block: 4px;
  padding-inline: 8px;
}

#goods .goods .goods-card .goods-card-info .goods-card-info-detail {
  padding-inline: 8px;
}

#goods
  .goods
  .goods-card
  .goods-card-info
  .goods-card-info-detail:not(:last-child) {
  margin-block-end: 16px;
}

#goods .goods .goods-character {
  margin-block-start: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#goods .goods .goods-character img {
  max-width: 160px;
}