@charset "utf-8";

:root {
  --main-color: #fef9ed;
}

body {
  background-color: var(--main-color);
  font-family: 'Noto Sans JP', sans-serif;
}

/* ----- common parts ----- */
.ticketBtn {
  background-color: #010101;
  box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.2);
  color: #fafafa;
  opacity: 0.9;
}
@media (hover: hover) {
  .ticketBtn {
    transition: padding-right 0.3s, width 0.3s;
  }
  .ticketBtn:hover {
    width: 230px;
    padding-right: 50px;
  }
}

.nomalBtn._event {
  background-color: #010101;
  border-color: #010101;
  color: #fafafa;
}
.nomalBtn._ticket {
  background-color: #d3a21f;
  border-color: #d3a21f;
  color: #fff;
}
@media (hover: hover) {
  .nomalBtn::before {
    background-color: #fafafa;
  }
  .nomalBtn._event:hover span {
    color: #010101;
  }
  .nomalBtn._ticket:hover span {
    color: #d3a21f;
  }
}

.scrollUpBtn {
  box-shadow: 2px 2px 0 0 #203d5f;
  background-color: #e6a722;
}
.scrollUpBtn::after {
  border-color: #203d5f;
}

/* sec common */
.sec-ttl {
  position: relative;
  padding-bottom: 12px;
  font-size: 2.6rem;
  color: #203d60;
}
.sec-ttl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: auto;
  background: center/contain no-repeat;
}
.sec-ttlE {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  color: #d3a21f;
}

@media screen and (768px <= width) {
  .sec-ttl {
    padding-bottom: 18px;
    font-size: 4rem;
  }
}

/* ----- header ----- */
.hamburgerBtn {
  background-color: rgba(0, 0, 0, 0.8);
}

.header-menu {
  background-color: var(--main-color);
}
.header-nav {
  min-height: 70%;
  border: none;
}
.header-nav ul li a h2 {
  position: relative;
  padding-bottom: 5px;
  font-weight: 900;
  font-size: 1.8rem;
  color: #203d60;
}
.header-nav ul li a h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: auto;
  background: center/contain no-repeat;
}
.header-nav ul li._present a h2::after {
  width: calc(208px / 2);
  aspect-ratio: 208 / 22;
  background-image: url(img/nav_ttl-present.webp);
}
.header-nav ul li._event a h2::after {
  width: calc(170px / 2);
  aspect-ratio: 170 / 22;
  background-image: url(img/nav_ttl-event.webp);
}
.header-nav ul li._schedule a h2::after {
  width: calc(319px / 2);
  aspect-ratio: 319 / 22;
  background-image: url(img/nav_ttl-schedule.webp);
}
.header-nav ul li._goods a h2::after {
  width: calc(140px / 2);
  aspect-ratio: 140 / 22;
  background-image: url(img/nav_ttl-goods.webp);
}
.header-nav ul li._gourmet a h2::after {
  width: calc(356px / 2);
  aspect-ratio: 356 / 22;
  background-image: url(img/nav_ttl-gourmet.webp);
}
.header-nav ul li._guest a h2::after {
  width: calc(135px / 2);
  aspect-ratio: 135 / 22;
  background-image: url(img/nav_ttl-guest.webp);
}
.header-nav ul li._news a h2::after {
  width: calc(175px / 2);
  aspect-ratio: 175 / 22;
  background-image: url(img/nav_ttl-news.webp);
}
.header-nav ul li a p {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #d3a21f;
}

.header-menu .series {
  min-height: 30%;
  background-color: #1a1a1a;
}
.header-menu .series h2 {
  color: #fff;
}

@media (hover: hover) {
  .series ul li::before,
  .series ul li::after {
    background-color: #fef9ed;
  }
  .series ul li a::before,
  .series ul li a::after {
    background-color: #fef9ed;
  }
}

@media screen and (768px <= width) {
  .header-nav ul li a h2 {
    padding-bottom: 10px;
    font-size: 3.6rem;
  }
  .header-nav ul li._present a h2::after {
    width: 208px;
  }
  .header-nav ul li._event a h2::after {
    width: 170px;
  }
  .header-nav ul li._schedule a h2::after {
    width: 319px;
  }
  .header-nav ul li._goods a h2::after {
    width: 140px;
  }
  .header-nav ul li._gourmet a h2::after {
    width: 356px;
  }
  .header-nav ul li._guest a h2::after {
    width: 135px;
  }
  .header-nav ul li._news a h2::after {
    width: 175px;
  }
  .header-nav ul li a p {
    font-size: 2.4rem;
  }
}

/* ----- mv ----- */
.mv-opening {
  color: #010101;
}
.mv-openingTtl {
  color: #d3a21f;
}

/* ----- present ----- */
.present {
  padding-top: 0;
  color: #010101;
}
.present .sec-ttl::after {
  width: calc(276px / 2);
  aspect-ratio: 276 / 24;
  background-image: url(img/present_ttl.webp);
}
.presentCard-targetBorder {
  background-color: #010101;
}
.presentCard-target p {
  color: #fff;
}
.presentCard-target p span {
  font-family: 'Roboto', sans-serif;
  color: #d3a21f;
}

@media screen and (768px <= width) {
  .present .sec-ttl::after {
    left: 50%;
    translate: -50% 0;
    width: 276px;
  }
}

/* event */
.event {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0,
    rgba(255, 255, 255, 1) 35px,
    rgba(229, 230, 230, 1) 35px,
    rgba(229, 230, 230, 1) 37px
  );
  color: #010101;
}
.event .sec-ttl::after {
  width: calc(229px / 2);
  aspect-ratio: 229 / 24;
  background-image: url(img/event_ttl.webp);
}
.eventCard + .eventCard {
  border-color: #c1c6c8;
}
.eventCard-date span:first-child {
  background-color: #d3a21f;
  color: #fff;
}
.eventCard-date span:last-child {
  background-color: #f1f1f1;
}
.eventCard-text {
  -webkit-line-clamp: 4;
}
.eventCard .detailBtn {
  color: #888;
}

@media screen and (768px <= width) {
  .event {
    background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 70px,
      rgba(229, 230, 230, 1) 70px,
      rgba(229, 230, 230, 1) 74px
    );
  }
  .event .sec-ttl::after {
    left: 50%;
    translate: -50% 0;
    width: 229px;
  }
}

/* schedule */
.schedule {
  background: top/contain repeat url(img/schedule_bg.webp);
}
.schedule .sec-ttl::after {
  width: calc(442px / 2);
  aspect-ratio: 442 / 24;
  background-image: url(img/schedule_ttl.webp);
}

.scheduleCard:has(.scheduleCard-soldOut) {
  position: relative;
  padding-bottom: calc(20px + 50px);
}
.scheduleCard-soldOut {
  position: absolute;
  left: 1em;
  bottom: 20px;
  width: calc(100% - 2em);
  padding-inline-start: 1em;
  text-indent: -1em;
  line-height: 1.25;
  font-size: 1.2rem;
}
.scheduleCard-soldOut::before {
  content: '※';
  color: #ff0000;
}

@media screen and (768px <= width) {
  .schedule .sec-ttl::after {
    left: 50%;
    translate: -50% 0;
    width: 380px;
  }

  .scheduleCard:has(.scheduleCard-soldOut) {
    padding-bottom: calc(20px + 30px);
  }
  .scheduleCard-soldOut {
    left: 40px;
    width: calc(100% - 40px * 2);
    font-size: 1.4rem;
  }
}

/* goods */
.goods .sec-ttl::after {
  width: calc(185px / 2);
  aspect-ratio: 185 / 24;
  background-image: url(img/goods_ttl.webp);
}
.goods .moreBtn {
  top: 30px;
  color: #888;
}
.goods-bnr {
  margin-inline: auto;
  display: block;
  max-width: 800px;
  transition: opacity 0.1s;
}
@media (hover: hover) {
  .goods-bnr:hover {
    opacity: 0.8;
  }
}
@media (hover: hover) {
  .goodsCard {
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .goodsCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    transform: skewX(-25deg);
  }

  .goodsCard:hover::before {
    animation: shine 0.7s;
  }

  @keyframes shine {
    100% {
      left: 125%;
    }
  }
}

@media screen and (768px <= width) {
  .goodsCard {
    width: 260px;
  }
  .goods .sec-ttl::after {
    width: 150px;
  }
}

/* gourmet */
.gourmet .sec-ttl::after {
  width: calc(491px / 2);
  aspect-ratio: 491 / 24;
  background-image: url(img/gourmet_ttl.webp);
}
.gourmet .moreBtn {
  top: 36px;
  color: #888;
}

@media screen and (768px <= width) {
  .gourmet .sec-ttl::after {
    width: 380px;
  }
}

/* guest */
.guest {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0,
    rgba(255, 255, 255, 1) 35px,
    rgba(229, 230, 230, 1) 35px,
    rgba(229, 230, 230, 1) 37px
  );
}
.guest .sec-ttl::after {
  width: calc(171px / 2);
  aspect-ratio: 171 / 24;
  background-image: url(img/guest_ttl.webp);
}
.guestCard img {
  aspect-ratio: 16 / 9;
}
/* .guestCard img._sizeA {
  margin: auto;
  width: 60%;
  aspect-ratio: 2 / 3;
} */
.guestCard-date span:first-child {
  background-color: #d3a21f;
}
.guestCard-date span:last-child {
  background-color: #f1f1f1;
}
.guestCard .detailBtn {
  color: #888;
}

@media screen and (768px <= width) {
  .guest .sec-ttl::after {
    left: 50%;
    translate: -50% 0;
    width: 171px;
  }
}

/* news */
.news .sec-ttl::after {
  width: calc(235px / 2);
  aspect-ratio: 235 / 24;
  background-image: url(img/news_ttl.webp);
}
.newsCard-ttl {
  color: #010101;
}
@media (hover: hover) {
  .newsCard-ttl:after {
    background-color: #d3a21f;
  }
}
@media screen and (min-width: 768px) {
  .news {
    background-color: var(--main-color);
  }
  .news .sec-ttl::after {
    width: 180px;
  }
  .news-list {
    background-color: #fff;
  }
  .news-list:last-of-type {
    border-radius: 10px;
  }
}

/* sponsor */
.sponsor {
  background-color: #fff;
}
.sponsor h2 {
  margin-bottom: 0;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 900;
  font-size: 3.4rem;
  color: #010101;
}
.sponsor-list._m li {
  max-width: 300px;
}
.sponsor-list._s li {
  max-width: 200px;
}

@media screen and (768px <= width) {
  .sponsor h2 {
    font-size: 6rem;
  }
}

/* series _foot */
.series._foot {
  background-color: #1a1a1a;
  color: #fff;
}

/* footer */
.footer {
  background-color: #010101;
}