@charset "utf-8";

body {
  background-color: #0455a6;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ----- common parts ----- */
@media (hover: hover) {
  .nomalBtn::before {
    background-color: #fafafa;
  }
  .nomalBtn._event:hover span {
    color: #009cdb;
  }
  .nomalBtn._ticket:hover span {
    color: #0455a6;
  }
}
.nomalBtn._event {
  background-color: #009cdb;
  border-color: #009cdb;
  color: #fff;
}
.nomalBtn._ticket {
  background-color: #0455a6;
  border-color: #0455a6;
  color: #fff;
}

.moreAcBtn {
  border-color: #009cdb;
  color: #009cdb;
}

.ticketBtn {
  background-color: #009cdb;
  border: 3px solid #fbd067;
  border-right: none;
  box-shadow: 0 3px 0 2px rgba(18, 82, 143, 0.6);
}
.ticketBtn img {
  width: 70px;
  aspect-ratio: 105 / 64;
}
@media (hover: hover) {
  .ticketBtn {
    transition: padding-right 0.3s, width 0.3s;
  }
  .ticketBtn:hover {
    width: 200px;
    padding-right: 20px;
  }
}

@media screen and (768px <= width) {
  .ticketBtn img {
    width: 90px;
  }
}

.scrollUpBtn {
  border: 2px solid #fbd067;
  background-color: #009cdb;
}
.scrollUpBtn::after {
  border-color: #fbd067;
}

/* sec common */
.sec-ttl {
  margin-bottom: 20px;
}

/* ----- header ----- */
.hamburgerBtn {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(183, 165, 92, 0.9);
  border-radius: 7px;
}
.hamburgerBtn > span {
  background-color: #b7a55c;
}

.header-nav {
  background: top/cover no-repeat url(img/nav_bg.webp);
  border: none;
}
.header-nav ._fireworks h2 {
  width: calc(268px / 2);
}
.header-nav ._fireworks img {
  aspect-ratio: 268 / 93;
}
.header-nav ._beer h2 {
  width: calc(400px / 2);
}
.header-nav ._beer img {
  aspect-ratio: 400 / 94;
}
.header-nav ._sweets h2 {
  width: calc(400px / 2);
}
.header-nav ._sweets img {
  aspect-ratio: 400 / 94;
}
.header-nav ._syaufes h2 {
  width: calc(273px / 2);
}
.header-nav ._syaufes img {
  aspect-ratio: 273 / 99;
}
.header-nav ._waterpark h2 {
  width: calc(320px / 2);
}
.header-nav ._waterpark img {
  aspect-ratio: 549 / 240;
}
.header-nav ._present h2 {
  width: calc(364px / 2);
}
.header-nav ._present img {
  aspect-ratio: 364 / 93;
}
.header-nav ._fair h2 {
  width: calc(205px / 2);
}
.header-nav ._fair img {
  aspect-ratio: 205 / 93;
}
.header-nav ._insect h2 {
  width: calc(240px / 2);
}
.header-nav ._insect img {
  aspect-ratio: 240 / 93;
}
.header-nav ._guest h2 {
  width: calc(225px / 2);
}
.header-nav ._guest img {
  aspect-ratio: 225 / 93;
}
.header-nav ._collabo h2 {
  width: calc(210px / 2);
}
.header-nav ._collabo img {
  aspect-ratio: 210 / 75;
}
.header-nav ._cheer h2 {
  width: calc(259px / 2);
}
.header-nav ._cheer img {
  aspect-ratio: 259 / 93;
}
.header-nav ._goods h2 {
  width: calc(225px / 2);
}
.header-nav ._goods img {
  aspect-ratio: 225 / 93;
}
.header-nav ._gourmet h2 {
  width: calc(261px / 2);
}
.header-nav ._gourmet img {
  aspect-ratio: 261 / 93;
}
.header-nav ._schedule h2 {
  width: calc(376px / 2);
}
.header-nav ._schedule img {
  aspect-ratio: 376 / 70;
}
.header-nav ._news h2 {
  width: calc(179px / 2);
}
.header-nav ._news img {
  aspect-ratio: 179 / 58;
}

.header-menu > .series {
  background: top/cover no-repeat url(img/gourmet_bg.webp);
}
.header-menu > .series h2 {
  color: #004d99;
}
@media (hover: hover) {
  .series ul li::before,
  .series ul li::after {
    background-color: #0455a6;
  }
  .series ul li a::before,
  .series ul li a::after {
    background-color: #0455a6;
  }
}

@media screen and (768px <= width) {
  .hamburgerBtn {
    border-width: 2px;
  }
  .hamburgerBtn > span {
    left: 13px;
  }

  .header-nav ._fireworks h2 {
    width: calc(268px / 1.5);
  }
  .header-nav ._beer h2 {
    width: calc(400px / 1.5);
  }
  .header-nav ._sweets h2 {
    width: calc(400px / 1.5);
  }
  .header-nav ._syaufes h2 {
    width: calc(273px / 1.5);
  }
  .header-nav ._waterpark h2 {
    width: calc(320px / 1.5);
  }
  .header-nav ._present h2 {
    width: calc(364px / 1.5);
  }
  .header-nav ._fair h2 {
    width: calc(205px / 1.5);
  }
  .header-nav ._insect h2 {
    width: calc(240px / 1.5);
  }
  .header-nav ._guest h2 {
    width: calc(225px / 1.5);
  }
  .header-nav ._collabo h2 {
    width: calc(210px / 1.5);
  }
  .header-nav ._cheer h2 {
    width: calc(259px / 1.5);
  }
  .header-nav ._goods h2 {
    width: calc(225px / 1.5);
  }
  .header-nav ._gourmet h2 {
    width: calc(261px / 1.5);
  }
  .header-nav ._schedule h2 {
    width: calc(376px / 1.5);
  }
  .header-nav ._news h2 {
    width: calc(179px / 1.5);
  }
}

/* ----- fireworks ----- */
#fireworks {
  position: relative;
  padding-top: 160px;
  background-color: #0455a6;
}
#fireworks .sec-inner {
  position: relative;
  z-index: 1;
}
#fireworks .sec-ttl {
  position: relative;
  width: calc(495px / 2);
}
#fireworks .sec-ttl:after {
  content: '';
  position: absolute;
  top: -30%;
  left: 100%;
  display: block;
  width: calc(176px / 2);
  height: auto;
  aspect-ratio: 176 / 470;
  background: center/contain no-repeat url(img/deco-itoh.webp);
}
#fireworks .sec-ttl img {
  aspect-ratio: 495 / 149;
}

#fireworks .eventCard {
  border-color: #b9912e;
}
#fireworks .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#fireworks .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#fireworks .eventCard-contents h3 {
  color: #fbd067;
}
#fireworks .eventCard-text {
  color: #fff;
}
#fireworks .detailBtn {
  color: #ffe692;
}

.deco {
  position: absolute;
}
.deco._fireworks1 {
  top: 2%;
  left: 4%;
  width: min(55.2vw, 414px);
  mix-blend-mode: screen;
}
.deco._fireworks1 img {
  aspect-ratio: 414 / 460;
}
.deco._fireworks2 {
  top: 8%;
  left: 76%;
  width: min(24vw, 177px);
  mix-blend-mode: screen;
}
.deco._fireworks2 img {
  aspect-ratio: 177 / 180;
}
.deco._fireworks3 {
  top: 17%;
  left: 61%;
  width: min(16vw, 120px);
  mix-blend-mode: screen;
}
.deco._fireworks3 img {
  aspect-ratio: 199 / 199;
}
.deco._fireworks4 {
  top: 64%;
  left: 71%;
  width: min(26.5vw, 200px);
  mix-blend-mode: screen;
}
.deco._fireworks4 img {
  aspect-ratio: 200 / 222;
}
.deco._star {
  top: 5%;
  left: 60%;
  width: min(19.2vw, 143px);
}
.deco._star img {
  aspect-ratio: 143 / 141;
}

@media screen and (768px <= width) {
  .deco._fireworks1 {
    left: 31%;
  }
  .deco._fireworks2 {
    left: 72%;
  }
  .deco._fireworks3 {
    top: 28%;
    left: 65%;
  }
}

/* ----- dance ----- */
#dance .sec-ttl {
  width: calc(621px / 2);
}
#dance .sec-ttl img {
  aspect-ratio: 621 / 135;
}
#dance .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#dance .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#dance .eventCard-contents h3 {
  color: #fbd067;
}
#dance .eventCard-text {
  color: #fff;
}
#dance .detailBtn {
  color: #ffe692;
}
@media screen and (768px <= width) {
  #dance {
    padding-top: 0;
  }
  #dance .sec-ttl {
    width: calc(621px / 1.8);
  }
}

/* ----- vender ----- */
#vender .sec-ttl {
  width: calc(1281px / 4);
}
#vender .sec-ttl img {
  aspect-ratio: 1281 / 240;
}
#vender .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#vender .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#vender .eventCard-contents h3 {
  color: #fbd067;
}
#vender .eventCard-text {
  color: #fff;
}
#vender .detailBtn {
  color: #ffe692;
}
@media screen and (768px <= width) {
  #vender {
    padding-top: 0;
  }
  #vender .sec-ttl {
    width: calc(1281px / 3.5);
  }
}

/* ----- beer ----- */
#beer {
  background-color: #0455a6;
}
#beer .sec-ttl {
  position: relative;
  width: calc(681px / 2);
}
#beer .sec-ttl:after {
  content: '';
  position: absolute;
  top: -35%;
  right: 0%;
  z-index: 0;
  display: block;
  width: calc(212px / 2);
  height: auto;
  aspect-ratio: 212 / 460;
  background: center/contain no-repeat url(img/deco-katoh.webp);
}
#beer .sec-ttl img {
  position: relative;
  z-index: 1;
  aspect-ratio: 681 / 150;
}

#beer .eventCard {
  position: relative;
  border-color: #b9912e;
}
#beer .eventCard::after {
  content: '';
  position: absolute;
  top: 48%;
  right: 0;
  display: block;
  width: calc(105px / 2);
  height: auto;
  aspect-ratio: 105 / 122;
  background: center/contain no-repeat url(img/deco-beer.webp);
}
#beer .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#beer .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#beer .eventCard-contents h3 {
  color: #fbd067;
}
#beer .eventCard-text {
  color: #fff;
}
#beer .detailBtn {
  color: #ffe692;
}

@media screen and (768px <= width) {
  #beer {
    padding-top: 0;
  }
  #beer .sec-ttl:after {
    right: -15%;
  }
  #beer .eventCard::after {
    top: 0%;
    right: 28%;
  }
}

/* ----- sweets ----- */
#sweets {
  background-color: #0455a6;
}
#sweets .sec-ttl {
  position: relative;
  width: calc(524px / 2);
}
#sweets .sec-ttl img {
  position: relative;
  z-index: 1;
  aspect-ratio: 524 / 150;
}
#sweets .eventCard {
  border-color: #b9912e;
}
#sweets .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#sweets .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#sweets .eventCard-contents h3 {
  color: #fbd067;
}
#sweets .eventCard-text {
  color: #fff;
}
#sweets .detailBtn {
  color: #ffe692;
}

@media screen and (768px <= width) {
  #sweets {
    padding-top: 0;
  }
  #sweets .sec-ttl:after {
    right: -15%;
  }
  #sweets .eventCard::after {
    top: 0%;
    right: 28%;
  }
}

/* ----- syaufes ----- */
#syaufes {
  background: top/cover no-repeat url(img/gourmet_bg.webp);
}
#syaufes .sec-ttl {
  position: relative;
  margin-bottom: 10px;
  width: calc(557px / 2);
}
#syaufes .sec-ttl:after {
  content: '';
  position: absolute;
  top: -27%;
  right: -22%;
  z-index: 0;
  display: block;
  width: calc(237px / 2);
  height: auto;
  aspect-ratio: 237 / 387;
  background: center/contain no-repeat url(img/deco-andrew.webp);
}
#syaufes .sec-ttl img {
  position: relative;
  z-index: 1;
  aspect-ratio: 505 / 177;
}

#syaufes .eventCard {
  border-color: #fff;
}
#syaufes .eventCard figure img._aspect2 {
  aspect-ratio: 1 / 1;
}
#syaufes .eventCard-date {
  background-color: #fff;
  color: #111;
}
#syaufes .eventCard-date > span:first-child {
  background-color: #009cdb;
  color: #fafafa;
}
#syaufes .eventCard-contents h3 {
  color: #004d99;
}
#syaufes .eventCard-text {
  color: #111;
}
#syaufes .detailBtn {
  color: #005a99;
}

.eventCard-youtube {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}
.eventCard-youtube iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
@media screen and (768px <= width) {
  .eventCard-youtube {
    margin-bottom: 0;
    width: 45%;
  }
}

/* ----- waterpark ----- */
#waterpark {
  position: relative;
  padding-top: 80px;
  background-color: #1fb3f0;
  overflow: hidden;
}
#waterpark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 1133;
  background: top/cover no-repeat url(img/waterpark_bg.webp);
}
#waterpark .sec-inner {
  position: relative;
  z-index: 1;
}
#waterpark .sec-ttl {
  position: relative;
  z-index: 1;
  width: calc(549px / 2);
}
#waterpark .sec-ttl img {
  position: relative;
  z-index: 1;
  aspect-ratio: 549 / 240;
}
#waterpark .sec-ttl:after {
  content: '';
  position: absolute;
  top: 30%;
  right: -30%;
  z-index: 0;
  display: block;
  width: calc(272px / 2);
  height: auto;
  aspect-ratio: 272 / 233;
  background: center/contain no-repeat url(img/deco-frep.webp);
}

#waterpark .eventCard {
  border-color: #fff;
}
#waterpark .eventCard figure img {
  aspect-ratio: 800 / 396;
}
#waterpark .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#waterpark .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#waterpark .eventCard-contents h3 {
  color: #ffe692;
}
#waterpark .eventCard-text {
  color: #ffffff;
}
#waterpark .detailBtn {
  color: #ffe692;
}

@media screen and (768px <= width) {
  #waterpark::before {
    opacity: 0.5;
  }
}

/* ----- present ----- */
.present {
  background-color: #0455a6;
  color: #fff;
}
.present .sec-ttl {
  position: relative;
  width: calc(607px / 2);
}
.present .sec-ttl img {
  position: relative;
  z-index: 1;
  aspect-ratio: 607 / 149;
}
.present .sec-ttl::after {
  content: '';
  position: absolute;
  top: -25%;
  right: -12%;
  z-index: 0;
  display: block;
  width: calc(156px / 2);
  height: auto;
  aspect-ratio: 156 / 408;
  background: center/contain no-repeat url(img/deco-itoh2.webp);
}
.presentCard-targetBorder {
  background: #0455a6;
}
._photobook .presentCard-targetBorder {
  top: 110px;
}
.presentCard-target {
  background-color: #fff;
}
.presentCard-target p span {
  font-family: 'Roboto', sans-serif;
  font-size: 1.4rem;
  color: #0455a6;
}
.presentCard-target ._all {
  translate: 0 3px;
}

/* ----- fair ----- */
#fair {
  position: relative;
  padding-top: 0;
}
#fair .sec-ttl {
  width: calc(359px / 2);
}
#fair .sec-ttl img {
  aspect-ratio: 359 / 149;
}

#fair .eventCard {
  border-color: #fff;
}
#fair .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#fair .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#fair .eventCard-contents h3 {
  color: #fbd067;
}
#fair .eventCard-text {
  color: #fff;
}
#fair .detailBtn {
  color: #ffe692;
}

/* ----- insect ----- */
#insect {
  padding-top: 0;
  background-color: #0455a6;
}
#insect .sec-ttl {
  width: calc(402px / 2);
}
#insect .sec-ttl img {
  aspect-ratio: 402 / 149;
}

#insect .eventCard {
  border-color: #fff;
}
#insect .eventCard figure img {
  aspect-ratio: 4 / 3;
}
#insect .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#insect .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#insect .eventCard-contents h3 {
  color: #fbd067;
}
#insect .eventCard-text {
  color: #fff;
}
#insect .detailBtn {
  color: #fbd067;
}

/* ----- guest ----- */
.guest_bg {
  background: top/cover no-repeat url(img/guest_bg.webp);
}

#guest {
  background-color: transparent;
}
#guest .sec-ttl {
  width: calc(376px / 2);
}
#guest .sec-ttl img {
  aspect-ratio: 376 / 147;
}

#guest .guestCard-date span:first-child {
  background-color: #009cdb;
  color: #fafafa;
}
#guest .guestCard-date span:last-child {
  background-color: #fff;
  color: #111;
}
#guest .guestCard h3 {
  color: #fde67a;
}
#guest .guestCard-text {
  color: #fff;
}
#guest .detailBtn {
  color: #fde67a;
}

@media screen and (768px <= width) {
  #guest .sec-ttl {
    margin-inline: auto;
  }
}

/* ----- collabo ----- */
#collabo {
  padding-top: 0;
  background-color: transparent;
}
#collabo .sec-ttl {
  width: calc(411px / 2);
}
#collabo .sec-ttl img {
  aspect-ratio: 411 / 147;
}

#collabo .guestCard-date span:first-child {
  background-color: #009cdb;
  color: #fafafa;
}
#collabo .guestCard-date span:last-child {
  background-color: #fff;
  color: #111;
}
#collabo .guestCard h3 {
  color: #fde67a;
}
#collabo .guestCard-text {
  color: #fff;
}
#collabo .detailBtn {
  color: #fde67a;
}

@media screen and (768px <= width) {
  #collabo .sec-ttl {
    margin-inline: auto;
  }
}

/* ----- cheer ----- */
#cheer {
  background-color: #0455a6;
}
#cheer .sec-ttl {
  width: calc(467px / 2);
}
#cheer .sec-ttl img {
  aspect-ratio: 467 / 149;
}

#cheer .eventCard {
  border-color: #b9912e;
}
#cheer .eventCard-date {
  background-color: #fff;
  color: #b9912e;
}
#cheer .eventCard-date > span:first-child {
  background-color: #b9912e;
  color: #fafafa;
}
#cheer .eventCard-contents h3 {
  color: #fbd067;
}
#cheer .eventCard-text {
  color: #fff;
}
#cheer .detailBtn {
  color: #ffe692;
}

/* ----- goods ----- */
.goods {
  background-color: #1fb3f0;
  color: #010101;
}
.goods .sec-ttl {
  width: calc(380px / 2);
}
.goods .sec-ttl img {
  aspect-ratio: 380 / 147;
}
.goods .moreBtn {
  top: 30px;
  color: #fff;
}
.goods .moreBtn::after {
  border-color: #fff;
}

/* @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: top/cover url(img/gourmet_bg.webp);
}
.gourmet .sec-ttl {
  width: calc(454px / 2);
}
.gourmet .sec-ttl img {
  aspect-ratio: 454 / 147;
}
.gourmet .moreBtn {
  top: 30px;
  color: #005a99;
}
.gourmet .moreBtn::after {
  border-color: #005a99;
}

.gourmetCard {
  aspect-ratio: 4 / 5;
}
.gourmetCard::after {
  content: none;
}

/* ----- schedule ----- */
.schedule {
  background: top/cover url(img/schedule_bg.webp);
}
.schedule .sec-ttl {
  width: calc(595px / 2);
}
.schedule .sec-ttl img {
  aspect-ratio: 595 / 104;
}

.scheduleCard._beer .scheduleCard-when::after {
  content: '';
  margin-inline-start: 5px;
  display: inline-block;
  width: 23px;
  height: auto;
  aspect-ratio: 100 / 141;
  background: center/contain no-repeat url(img/schedule_icon-beer.webp);
}
.scheduleCard._fav .scheduleCard-when::after {
  content: '';
  margin-inline-start: 5px;
  display: inline-block;
  width: 30px;
  height: auto;
  aspect-ratio: 100 / 100;
  background: center/contain no-repeat url(img/schedule_icon-fav.webp);
}
.scheduleCard._day .scheduleCard-when::after {
  content: '';
  margin-inline-start: 5px;
  display: inline-block;
  width: 30px;
  height: auto;
  aspect-ratio: 100 / 100;
  background: center/contain no-repeat url(img/schedule_icon-sun.webp);
}
.scheduleCard._present .scheduleCard-when::after {
  content: '';
  margin-inline-start: 5px;
  display: inline-block;
  width: 20px;
  height: auto;
  aspect-ratio: 100 / 131;
  background: center/contain no-repeat url(img/schedule_icon-present.webp);
}
.scheduleCard._fireworks .scheduleCard-when::after {
  content: '';
  margin-inline-start: 5px;
  display: inline-block;
  width: 30px;
  height: auto;
  aspect-ratio: 100 / 95;
  background: center/contain no-repeat url(img/schedule_icon-fireworks.webp);
}

/* ----- news ----- */
.news {
  background-color: #fafafa;
}
.news .sec-ttl {
  width: calc(315px / 2);
}
.news .sec-ttl img {
  aspect-ratio: 315 / 95;
}
@media (hover: hover) {
  .newsCard-ttl:after {
    background-color: #0455a6;
  }
}
@media screen and (min-width: 768px) {
  .news {
    background-color: #f1f1f1;
  }
  .news-list {
    background-color: #fff;
  }
}

/* ----- sponsor ----- */
.sponsor {
  background-color: #edf8ff;
}
.sponsor h2 {
  width: calc(455px / 2);
}
.sponsor h2 img {
  aspect-ratio: 455 / 88;
}

.sponsor-list._l li {
  width: calc((1080px - 15px * 3) / 4);
}
.sponsor-list._l li a {
  font-size: 1.4rem;
}

/* ----- series _foot ----- */
.series._foot {
  background: top/100% repeat-x url(img/gourmet_bg.webp);
}
.series._foot {
  color: #004d99;
}

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