@charset "utf-8";

:root {
  --font-color: #fafafa;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

/* ----- common parts ----- */
.hamburgerBtn {
  background-color: #fff;
  border: 2px dashed #4a3b2c;
}
.hamburgerBtn span {
  left: 13px;
  background-color: #4a3b2c;
}
.hamburgerBtn span:nth-of-type(1) {
  top: 15px;
}
.hamburgerBtn span:nth-of-type(2) {
  top: 23px;
}
.hamburgerBtn span:nth-of-type(3) {
  top: 31px;
}

@media (hover: hover) {
  .nomalBtn::before {
    background-color: var(--font-color);
  }
  .nomalBtn._event:hover span {
    color: #d98950;
  }
  .nomalBtn._ticket:hover span {
    color: #009fe8;
  }
  .nomalBtn._newWindow:hover::after {
    z-index: 3;
  }
  .nomalBtn._event._newWindow:hover::after {
    background-image: url(../common/img/icon_new_window-orange.svg);
  }
  .nomalBtn._ticket._newWindow:hover::after {
    background-image: url(../common/img/icon_new_window-sky.svg);
  }
}
.nomalBtn._event {
  background-color: #d98950;
  border-color: #4a3b2c;
  border-style: dashed;
  color: var(--font-color);
}
.nomalBtn._ticket {
  background-color: #009fe8;
  border-color: #4a3b2c;
  border-style: dashed;
  color: var(--font-color);
}

.detailBtn {
  color: #f4e5c8;
}

.moreBtn {
  color: #f4e5c8;
}
.moreBtn::after {
  border-color: #f4e5c8;
}

.moreAcBtn {
  border-color: #d98950;
  color: #d98950;
}

.ticketBtn {
  background-color: #009fe8;
  box-shadow: 0 0 0 2px #009fe8;
  border: 2px dashed var(--font-color);
  border-right: none;
  color: var(--font-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 0px 2px #f4e5c8;
  border: 2px dashed #010101;
  border-radius: 10px;
  background-color: #f4e5c8;
}
.scrollUpBtn::after {
  border-color: var(--font-white-color);
}

/* sec common */
.sec-ttl {
  margin-bottom: 15px;
}
.sec-ttlE {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 600;
  color: #f4e5c8;
}

@media screen and (768px <= width) {
  .sec-ttlWrapper .sec-ttl {
    margin-bottom: 0;
  }
}

/* ----- header ----- */
.header-menu {
  background-color: #e8c182;
}
.header-nav {
  border-color: #f4e5c8;
}
.header-nav ul li a h2 {
  margin-bottom: 10px;
}
.header-nav ul li a p {
  font-weight: 600;
  font-size: 1.4rem;
  color: #f4e5c8;
}
.header-present {
  width: calc(415px / 2);
  aspect-ratio: 415 / 64;
}
.header-event {
  width: calc(414px / 2);
  aspect-ratio: 414 / 57;
}
.header-schedule {
  width: calc(415px / 2);
  aspect-ratio: 415 / 64;
}
.header-goods {
  width: calc(414px / 2);
  aspect-ratio: 414 / 60;
}
.header-gourmet {
  width: calc(414px / 2);
  aspect-ratio: 414 / 58;
}
.header-guest {
  width: calc(414px / 2);
  aspect-ratio: 414 / 58;
}
.header-news {
  width: calc(414px / 2);
  aspect-ratio: 414 / 57;
}

.series h2 img {
  width: calc(276px / 2);
  aspect-ratio: 276 / 47;
}
.series h2::after {
  border-color: #995d28;
}
@media (hover: hover) {
  .series ul li::before,
  .series ul li::after {
    background-color: #f4e5c8;
  }
  .series ul li a::before,
  .series ul li a::after {
    background-color: #f4e5c8;
  }
}

@media screen and (768px <= width) {
  .header-nav ul li a p {
    font-size: 1.8rem;
  }
  .header-present {
    width: 415px;
  }
  .header-event {
    width: 414px;
  }
  .header-schedule {
    width: 415px;
  }
  .header-goods {
    width: 414px;
  }
  .header-gourmet {
    width: 414px;
  }
  .header-guest {
    width: 414px;
  }
  .header-news {
    width: 414px;
  }

  .series h2 img {
    width: 276px;
  }
}

/* present */
.present {
  background-color: #7d644b;
  color: var(--font-color);
}
.present .sec-ttl img {
  width: calc(362px / 2);
  aspect-ratio: 362 / 79;
}
.presentCard-targetBorder {
  width: 70px;
  height: 70px;
  background: center/contain no-repeat url(img/present-target_bg.webp);
}
.presentCard-target {
  background-color: transparent;
}
.presentCard-target p {
  color: #fff;
}
.presentCard-target p span {
  color: #f4e5c8;
}

@media screen and (768px <= width) {
  .present .sec-ttl img {
    width: 362px;
  }
}

/* event */
.event {
  background-color: #e8c182;
  color: var(--font-color);
}
.event .sec-ttl img {
  width: calc(311px / 2);
  aspect-ratio: 311 / 77;
}
.eventCard + .eventCard {
  border-color: #f4e5c8;
}
.eventCard-date {
  background-color: #995d28;
}
.eventCard-date span:first-child {
  background-color: #fff;
  color: #995d28;
}
.eventCard h3 {
  color: #995d28;
}

@media screen and (768px <= width) {
  .event .sec-ttl img {
    width: 311px;
  }
}

/* schedule */
.schedule {
  background: top/cover no-repeat url(img/schedule-bg.webp);
}
.schedule .sec-ttl img {
  width: calc(553px / 2);
  aspect-ratio: 553 / 83;
}
.scheduleCard-when {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

@media screen and (768px <= width) {
  .schedule {
    background-image: url(img/schedule-bg-l.webp);
  }
  .schedule .sec-ttl img {
    width: 553px;
  }
}

/* goods */
.goods {
  background-color: #4a3b2c;
}
.goods .sec-ttl img {
  width: calc(255px / 2);
  aspect-ratio: 255 / 78;
}
.goods .moreBtn {
  top: 8px;
}
@media (hover: hover) {
  .goodsCard {
    position: relative;
  }
  .goodsCard::before,
  .goodsCard::after {
    position: absolute;
    display: block;
    height: auto;
  }
  .goodsCard::before {
    top: 5px;
    left: 5px;
    width: 33px;
    aspect-ratio: 66 / 48;
    background: center/contain no-repeat url(img/chokokuro.webp);
  }
  .goodsCard::after {
    bottom: 5px;
    right: 5px;
    width: 31px;
    aspect-ratio: 62 / 48;
    background: center/contain no-repeat url(img/shokupan.webp);
  }
  .goodsCard:hover::before,
  .goodsCard:hover::after {
    content: "";
  }
}

@media screen and (768px <= width) {
  .goods .sec-ttl img {
    width: 255px;
  }

  .goods .moreBtn {
    top: 33px;
  }
}

/* gourmet */
.gourmet {
  background-color: #4a3b2c;
}
.gourmet .sec-ttl img {
  width: calc(417px / 2);
  aspect-ratio: 417 / 72;
}
.gourmet .moreBtn {
  top: 8px;
}

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

  .gourmet .moreBtn {
    top: 30px;
  }
}

/* guest */
.guest {
  background-color: #e8c182;
  color: var(--font-color);
}
.guest .sec-ttl img {
  width: calc(256px / 2);
  aspect-ratio: 256 / 78;
}

.guestCard img._sizeA {
  margin: auto;
  width: 60%;
}
.guestCard-date {
  background-color: #995d28;
}
.guestCard-date span:first-child {
  background-color: #fff;
  color: #995d28;
}
.guestCard h3 {
  color: #995d28;
}

@media screen and (768px <= width) {
  .guest .sec-ttl img {
    width: 256px;
  }
}

/* news */
.news .sec-ttl img {
  width: calc(310px / 2);
  aspect-ratio: 310 / 73;
}
.news .sec-ttlE {
  color: #999;
}
.news-list:first-of-type:before {
  top: -115px;
  right: calc(-5.333333333333334vw - 15px);
  width: 240px;
  aspect-ratio: 474 / 270;
  background-image: url(img/logo.webp);
  opacity: 0.06;
}
@media (hover: hover) {
  .newsCard-ttl:after {
    background-color: #e8c182;
  }
}
@media screen and (min-width: 768px) {
  .news {
    background-color: #f1f1f1;
  }
  .news .sec-ttl img {
    width: 310px;
  }

  .news-list {
    background-color: #fff;
  }
  .news-list:first-of-type:before {
    top: 0;
    right: 0;
  }
}

/* sponsor */
.sponsor {
  background-color: #f9f0e8;
}
.sponsor h2 {
  width: calc(603px / 2);
}

@media screen and (min-width: 768px) {
  .sponsor h2 {
    width: 603px;
  }
}

/* series _foot */
.series._foot {
  background-color: #d98950;
}
.series._foot h2 img {
  width: calc(263px / 2);
  aspect-ratio: 263 / 45;
}
.series._foot h2::after {
  border-color: var(--font-color);
}

@media screen and (min-width: 768px) {
  .series._foot h2 img {
    width: 263px;
  }
}

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

/* eftan */
.mv:has(> .eftan),
.sec:has(> .eftan) {
  position: relative;
}
.eftan {
  position: absolute;
  display: block;
}
.eftan._01 {
  z-index: 1;
  top: -15px;
  right: 20px;
  width: calc(194px / 2);
  aspect-ratio: 194 / 208;
}
.eftan._01 img {
  animation: pyon step-start 2.5s infinite;
}
@keyframes pyon {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0);
  }
}
.eftan._02 {
  bottom: -7px;
  right: 0;
  width: calc(260px / 2);
  aspect-ratio: 260 / 135;
}
.eftan._03 {
  top: -30px;
  right: 0;
  width: calc(104px / 2);
  aspect-ratio: 104 / 326;
  overflow: hidden;
}
.eftan._03 img {
  transform: translateX(100%);
  animation: hyoko 7s infinite;
}
@keyframes hyoko {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(20%);
  }
  13% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(0);
  }
  48% {
    transform: translateX(20%);
  }
  80% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}