@charset "utf-8";

:root {
  --first-font-color: #009cdb;
  --sub-font-color: #666;
  --font-white-color: #fafafa;
  --font-accent-color: #b7a55c;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

/* ----- common parts ----- */
@media (hover: hover) {
  .nomalBtn::before {
    background-color: #fafafa;
  }
  .nomalBtn._event:hover span {
    color: #010101;
  }
  .nomalBtn._ticket:hover span {
    color: var(--first-font-color);
  }
  .nomalBtn._newWindow:hover::after {
    z-index: 3;
  }
  .nomalBtn._event._newWindow:hover::after {
    background-image: url(../common/img/icon_new_window-black.svg);
  }
  .nomalBtn._ticket._newWindow:hover::after {
    background-image: url(../common/img/icon_new_window-sky.svg);
  }
}
.nomalBtn._event {
  background-color: #010101;
  border-color: #010101;
  color: var(--font-white-color);
}
.nomalBtn._ticket {
  background-color: var(--first-font-color);
  border-color: var(--first-font-color);
  color: var(--font-white-color);
}

.detailBtn {
  color: #ccc;
}

.moreBtn {
  color: var(--first-font-color);
}
.moreBtn::after {
  border-color: var(--first-font-color);
}

.moreAcBtn {
  border-color: var(--first-font-color);
  color: var(--first-font-color);
}

.ticketBtn {
  background-color: #010101;
  box-shadow: 0 0 5px 2px rgba(11, 213, 250, 0.8), 0 0 5px 2px rgba(173, 237, 248, 0.9);
  color: var(--font-white-color);
}
@media (hover: hover) {
  .ticketBtn {
    transition: padding-right 0.3s, width 0.3s;
  }
  .ticketBtn:hover {
    width: 220px;
    padding-right: 40px;
  }
}

.scrollUpBtn {
  box-shadow: 0 0 2px 1px #009cdb;
  background-color: #010101;
}
.scrollUpBtn::after {
  border-color: var(--font-white-color);
}

/* sec common */
.sec-ttl {
  margin-bottom: 20px;
}
.sec-ttl::first-letter {
  color: var(--first-font-color);
}
.sec-ttlE {
  font-family: "Roboto", sans-serif;
  color: var(--sub-font-color);
}

/* ----- header ----- */
.header-menu {
  background-color: #010101;
  color: var(--font-white-color);
}
.header-nav {
  border-color: #ccc;
}
.header-nav ul li a h2 {
  color: var(--font-white-color);
}
.header-nav ul li a h2::first-letter {
  color: var(--first-font-color);
}
.header-nav ul li a p {
  color: #ccc;
}

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

/* present */
.present {
  background-color: #f1f1f1;
  color: #010101;
}
.presentCard-targetBorder {
  background: linear-gradient(292deg, var(--sub-color) 0%, var(--accent-color) 100%);
}
.presentCard-target {
  background-color: #f4f4f4;
}
.presentCard-target p span {
  font-family: "Roboto", sans-serif;
  color: #009cdb;
}

/* event */
.event {
  background-color: #191919;
  color: var(--font-white-color);
}
.event .sec-ttlE {
  color: #ccc;
}
.eventCard-date {
  background-color: #010101;
}
.eventCard-date span:first-child {
  background-color: var(--sub-color);
}
.eventCard h3 {
  color: var(--first-font-color);
}

/* schedule */
.schedule {
  background: top/cover url(img/schedule_bg.webp);
}
.schedule .sec-ttl {
  color: var(--font-white-color);
}
.schedule .sec-ttl::first-letter {
  color: var(--font-accent-color);
}
.schedule .sec-ttlE {
  color: #fff;
}
@media screen and (768px <= width) {
  .schedule {
    background-image: url(img/schedule_bg_pc.webp);
  }
}

/* goods */
.goods {
  background-color: #f1f1f1;
  color: #010101;
}
.goods .moreBtn {
  top: 8px;
}
@media (hover: hover) {
  .goodsCard {
    position: relative;
    overflow: hidden;
  }
  .goodsCard::before,
  .goodsCard::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    transition: transform 0.2s;
  }
  .goodsCard::before {
    top: 0;
    left: 0;
    border-top: 10px solid var(--first-font-color);
    border-left: 10px solid var(--first-font-color);
    border-bottom: 10px solid transparent;
    border-right: 10px solid transparent;
    transform: translate(-100%, -100%);
  }
  .goodsCard::after {
    bottom: 0;
    right: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid var(--first-font-color);
    border-right: 10px solid var(--first-font-color);
    transform: translate(100%, 100%);
  }
  .goodsCard:hover:before,
  .goodsCard:hover::after {
    transform: translate(0, 0);
  }
}

/* gourmet */
.gourmet {
  background-color: #f1f1f1;
}

/* guest */
.guest {
  background-color: #010101;
  color: var(--font-white-color);
}
.guest .sec-ttlE {
  color: #ccc;
}
.guestCard._sizeA figure {
  margin-inline: auto;
  display: block;
  width: 80%;
  max-width: 500px;
}
.guestCard._sizeA figure img {
  aspect-ratio: 1 / 1;
}
.guestCard-date {
  background-color: #010101;
}
.guestCard-date span:first-child {
  background-color: var(--sub-color);
}
.guestCard h3 {
  color: var(--first-font-color);
}

@media screen and (768px <= width) {
  .guestCard._sizeA figure {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    justify-content: center;
  }
  .guestCard._sizeA figure img {
    width: auto;
    height: 100%;
  }
  .guestCard._sizeB figure {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
  }
}

/* news */
.news-list:first-of-type:before {
  top: -140px;
  right: calc(-5.333333333333334vw - 30px);
  width: 200px;
  aspect-ratio: 407 / 361;
  background-image: url(img/logo.svg);
  opacity: 0.04;
}
@media (hover: hover) {
  .newsCard-ttl:after {
    background-color: #009cdb;
  }
}
@media screen and (768px <= width) {
  .news {
    background-color: #f1f1f1;
  }
  .news-list {
    background-color: #fff;
  }
  .news-list:first-of-type:before {
    top: -20px;
    right: -20px;
    width: 200px;
  }
  .news .news-list {
    border-radius: 10px;
  }
}

/* sponsor */
.sponsor h2 {
  margin-bottom: 20px;
  width: 50%;
  max-width: 351px;
}

.sponsor-list._l li {
  max-width: 350px;
}

.sponsor-list._m {
  flex-wrap: nowrap;
}
.sponsor-list._m li {
  max-width: 240px;
}

.sponsor-list._s li {
  width: calc((100% - 15px * 2) / 3);
}

@media screen and (768px <= width) {
  .sponsor-list._m {
    gap: 0 16%;
  }
  .sponsor-list._s {
    margin-inline: auto;
    max-width: calc(150px * 4 + 60px * 3);
    gap: 0 60px;
  }
}

/* series _foot */
.series._foot {
  background-color: #1a1a1a;
  color: var(--font-white-color);
}

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