/*****************************************************************************
CSS only for Homegame 2025-26 pappiness day ver
*****************************************************************************/

/* Match
-----------------------------------------*/
.Match {
  padding-bottom: 130px;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_match.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #024899;
  color: var(--color-primary03);
}
@media screen and (max-width: 767px) {
  .Match {
    padding-bottom: 68px;
  }
}
.Match::after {
  display: none;
}
.Match__inner {
  padding-bottom: 400px;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_scroll.webp);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 330px;
  animation: bgLoop 50s linear infinite;
}
@media screen and (max-width: 767px) {
  .Match__inner {
    padding-bottom: 215px;
    background-size: auto 190px;
    animation-duration: 75s;
  }
}

.GameInfo__tag,
.GameInfo__list dt {
  background-color: var(--color-primary03);
  color: #024899;
}
.GameInfo__date span:nth-child(2) {
  background-color: #024899;
  color: var(--color-primary03);
}

/* ----- animation ----- */
@keyframes bgLoop {
  from { background-position: 0 bottom; }
  to   { background-position: -2263px bottom; }
}
@media screen and (max-width: 767px) {
  @keyframes bgLoop {
    from { background-position: 0 bottom;  }
    to   { background-position: -1303px bottom; }
  }
}

/* Section
-----------------------------------------*/
.News {
  margin-top: -40px;
  background-color: var(--color-primary03);
}
@media screen and (max-width: 1200px) {
  .News {
    margin-top: -20px;
  }
}

.Pickup {
  background-color: #0073c1;
  background-image:
    linear-gradient(-90deg, #0f7bc5 1px, transparent 1px),
    linear-gradient(#0f7bc5 1px, transparent 1px);
  background-size: 49px 49px;
}
@media screen and (max-width: 767px) {
  .Pickup {
    background-size: 35px 35px;
  }
}

.Access {
  background-color: #0073c1;
}

/* Title
-----------------------------------------*/
.SubTitle--pickup {
  display: flex;
  align-items: center;
  justify-content: center;
}
.SubTitle--pickup::before,
.SubTitle--pickup::after {
  content: '';
  display: inline-block;
  width: 1.35416em;
  height: 1em;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_title_01.svg);
  background-repeat: no-repeat;
  background-size: .6875em;
}
.SubTitle--pickup::before {
  background-position: left center;
}
.SubTitle--pickup::after {
  background-position: right center;
}

.SecTitle--mdp > .SecTitle__sub {
  display: inline-block;
  position: relative;
  padding-inline: 6.16666em;
}
.SecTitle--mdp > .SecTitle__sub::after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: .94444em;
  left: 0;
  width: 4.72222em;
  height: 4.16666em;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_title_02.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.SecTitle--event > .SecTitle__main {
  display: inline-block;
  position: relative;
  padding-inline: .7625em;
}
.SecTitle--event > .SecTitle__main::before,
.SecTitle--event > .SecTitle__main::after {
  content: '';
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
.SecTitle--event > .SecTitle__main::before {
  bottom: .25em;
  left: .1125em;
  width: .225em;
  height: .4875em;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_title_03.svg);
  background-position: left center;
}
.SecTitle--event > .SecTitle__main::after {
  top: .3375em;
  right: 0;
  width: .4em;
  height: .7375em;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_title_04.svg);
  background-position: right center;
}

/* BgMascot
-----------------------------------------*/
.BgMascot {
  position: relative;
}
.BgMascot::after {
  content: '';
  display: inline-block;
  position: absolute;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* ----- News ----- */
@media screen and (max-width: 1366px) {
  .BgMascot--01 {
    padding-bottom: clamp(130px, 17.56954vw, 240px);
  }
}
.BgMascot--01::after {
  right: calc((100% - 976px) / 2 * .19703);
  bottom: 12px;
  width: calc((100% - 976px) / 2 * .72457);
  max-width: 342px;
  aspect-ratio: 342 / 400;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_pappiness_01.png);
}
@media screen and (max-width: 1366px) {
  .BgMascot--01::after {
    right: 15px;
    width: clamp(86px, 13.17715vw, 180px);
  }
}

/* ----- Timetable ----- */
@media screen and (max-width: 1366px) {
  .BgMascot--02 {
    padding-bottom: clamp(58px, 4.39238vw, 60px);
  }
}
.BgMascot--02::after {
  bottom: -8px;
  left: calc((100% - 976px) / 2 * .17796);
  width: calc((100% - 976px) / 2 * .7394);
  max-width: 349px;
  aspect-ratio: 349 / 361;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_pappiness_02.png);
}
@media screen and (max-width: 1366px) {
  .BgMascot--02::after {
    bottom: -48px;
    left: 10px;
    width: clamp(88px, 13.46998vw, 184px);
  }
}

/* ----- Information ----- */
@media screen and (max-width: 1366px) {
  .BgMascot--03 {
    padding-bottom: clamp(46px, 7.46705vw, 102px);
  }
}
.BgMascot--03::after {
  right: calc((100% - 976px) / 2 * .31144);
  bottom: -93px;
  width: calc((100% - 976px) / 2 * .58898);
  max-width: 278px;
  aspect-ratio: 278 / 380;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_pappiness_03.png);
}
@media screen and (max-width: 1366px) {
  .BgMascot--03::after {
    right: 15px;
    bottom: -60px;
    width: clamp(70px, 10.68814vw, 146px);
  }
}

/* ----- Access ----- */
.BgMascot--04::after {
  right: calc((100% - 976px) / 2 * .32838);
  bottom: -53px;
  width: calc((100% - 976px) / 2 * .61864);
  max-width: 292px;
  aspect-ratio: 292 / 386;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_pappiness_04.png);
}
@media screen and (max-width: 1366px) {
  .BgMascot--04::after {
    right: 15px;
    bottom: -23px;
    width: clamp(73px, 11.27379vw, 154px);
  }
}

/* ----- Faq ----- */
.BgMascot--05::after {
  bottom: -222px;
  left: calc((100% - 976px) / 2 * .16313);
  width: calc((100% - 976px) / 2 * .61228);
  max-width: 289px;
  aspect-ratio: 289 / 339;
  background-image: url(/homegame/2025-26/assets/img/theme_pappinessday/bg_pappiness_05.png);
}
@media screen and (max-width: 767px) {
  .BgMascot--05::after {
    bottom: -112px;
  }
}
@media screen and (max-width: 1366px) {
  .BgMascot--05::after {
    left: 15px;
    width: clamp(73px, 11.12737vw, 152px);
  }
}