@charset "UTF-8";

/* ===========================================================
# Variables
=========================================================== */
:root {
  --blue: #091d8d;
  --beige: #f8f2e1;
  --black: #000;
  --white: #fff;
  --primary-color: var(--blue);
  --secondary-color: var(--beige);
  --background-color: var(--secondary-color);
  --content-width: 1100px;
}

/* ===========================================================
# HTML
=========================================================== */
html {
  font-size: 62.5%;
  line-height: 1.5;
}

/* ===========================================================
# Utility
=========================================================== */
.pcOnly {
  display: block;
}
/* Line Break */
.lb {
  display: inline-block;
}

/* ===========================================================
# Font
=========================================================== */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"),
       local('NotoSansCJKjp-Regular'),
       local('NotoSansJP-Regular'),
       url('/common/fonts/NotoSansJP-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local('NotoSansCJKjp-Bold'),
       local('NotoSansJP-Bold'),
       url('/common/fonts/NotoSansJP-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron-Regular'),
       url('/common/fonts/Orbitron-Regular.woff2') format('woff2');
}

/* ===========================================================
# Crea Cat GP
=========================================================== */
#creacat_gp {
  background-color: var(--background-color);
  background-image: url('/common/crea/images/creacat_gp2025/bg.webp');
  background-size: 70%;
  background-position: top center;
  background-repeat: repeat;
}

/* ===========================================================
# Wrapper
=========================================================== */
#creacat_gp {
  #wrapper {
    padding-top: 0;
    background: transparent;
  }

  .wrapper__inner {
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    font-size: 1.6rem;
    color: var(--black);
  }
}

/* ===========================================================
# Main Visual
=========================================================== */
.mv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.mv__image {
  width: 100%;
  max-width: 1640px;
  padding-inline: 20px;
  position: relative;
  z-index: 1;
}

.mv__desc {
  margin-top: -88px;
  color: var(--primary-color);
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  -webkit-text-stroke: 2px var(--white);
  text-stroke: 2px var(--white);
  paint-order: stroke;
  position: relative;
  z-index: 2;
}

/* ===========================================================
# Heading
=========================================================== */
.heading__level2 {
  width: fit-content;
  margin-inline: auto;
  padding-block: 15px;
  text-align: center;
  line-height: 1.4;
  position: relative;

  /* 棒 */
  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--black);
    position: absolute;
  }

  &::before {
    top: 0;
  }

  &::after {
    top: 5px;
  }

  p {
    font-size: 26px;
    font-size: 2.6rem;
    font-weight: 700;
  }

  h2 {
    color: var(--primary-color);
    font-size: 44px;
    font-size: 4.4rem;
    font-weight: 900;
  }
}
.heading__level2__inner {
  /* 棒 */
  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--black);
    position: absolute;
  }

  &::before {
    bottom: 0;
  }

  &::after {
    bottom: 5px;
  }
}

.heading__level3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block: 20px;
  text-align: center;
  font-weight: 700;

  &.-mb-sm {
    margin-bottom: 10px;
  }

  > p {
    font-size: 24px;
    font-size: 2.4rem;
  }

  > h3 {
    color: var(--primary-color);
    font-size: 24px;
    font-size: 2.4rem;

    > img {
      width: var(--pc-width);
    }
  }
}

/* ===========================================================
# Content
=========================================================== */
.content {
  width: var(--content-width);
  margin-top: 58px;
  margin-inline: auto;
  padding-block: 62px;
  border-radius: 24px;
  background: var(--white);
  position: relative;

  & > section > *:first-child {
    margin-top: 0;
  }
}

/* ===========================================================
# Footprint（足跡）
=========================================================== */
.footprints {
  position: absolute;
}

.footprints__item {
  --duration: .3s;
  --delay: .2s;
  --timing: cubic-bezier(0.61, 1, 0.88, 1);

  width: 46px;
  height: 43px;
  position: absolute;
  transition-property: opacity, translate;
  transition-duration: var(--duration);
  transition-timing-function: var(--timing);

  /* 初期非表示 */
  opacity: 0;
  translate: 0 -10%;

  .passedScroll > .footprints & {
    opacity: 1 !important;
    translate: 0 !important;
  }
}

/* content */
.content {
  > .footprints {
    top: 17px;
    right: 20px;

    .-index1 {
      top: 0;
      right: 0;
      rotate: 178deg;
      translate: 10% -15%;
      transition-delay: 0s;
    }
    .-index2 {
      top: 52px;
      right: 34px;
      rotate: -160deg;
      translate: 5% -15%;
      transition-delay: calc(var(--duration) * 1 + var(--delay));
    }
    .-index3 {
      top: 61px;
      right: 108px;
      rotate: 158deg;
      translate: 15% -15%;
      transition-delay: calc(var(--duration) * 2 + var(--delay));
    }
  }
}

/* past */
.past {
  > .footprints {
    top: -65px;
    right: 150px;

    .-index1 {
      top: 0;
      left: 0;
      rotate: 108deg;
      translate: -5% -15%;
      transition-delay: 0s;
    }
    .-index2 {
      top: 29px;
      left: 60px;
      rotate: 81deg;
      translate: -10% -15%;
      transition-delay: calc(var(--duration) + var(--delay));
    }
  }
}

/* award */
.award {
  > .footprints {
    top: 5px;
    left: 14px;

    .-index1 {
      top: 17px;
      left: 0;
      translate: -10% 10%;
      transition-delay: 0s;
    }
    .-index2 {
      top: 44px;
      left: 72px;
      rotate: -9deg;
      translate: -10% 10%;
      transition-delay: calc(var(--duration) * 1 + var(--delay));
    }
    .-index3 {
      top: 0;
      left: 139px;
      rotate: 50deg;
      translate: -10% -2%;
      transition-delay: calc(var(--duration) * 2 + var(--delay));
    }
    .-index4 {
      top: 54px;
      left: 195px;
      rotate: 59deg;
      translate: -10% -2%;
      transition-delay: calc(var(--duration) * 3 + var(--delay));
    }
    .-index5 {
      top: 78px;
      left: 272px;
      rotate: 44deg;
      translate: -10% -2%;
      transition-delay: calc(var(--duration) * 4 + var(--delay));
    }
    .-index6 {
      top: 81px;
      left: 748px;
      rotate: 2deg;
      translate: -10% 10%;
      transition-delay: calc(var(--duration) * 5 + var(--delay));
    }
    .-index7 {
      top: 90px;
      left: 820px;
      rotate: -7deg;
      translate: -10% 10%;
      transition-delay: calc(var(--duration) * 6 + var(--delay));
    }
    .-index8 {
      top: 40px;
      left: 883px;
      rotate: -5deg;
      translate: -10% 10%;
      transition-delay: calc(var(--duration) * 7 + var(--delay));
    }
    .-index9 {
      top: 55px;
      left: 960px;
      rotate: 6deg;
      translate: -10% 10%;
      transition-delay: calc(var(--duration) * 8 + var(--delay));
    }
    .-index10 {
      top: 5px;
      left: 1008px;
      rotate: 11deg;
      translate: -10% 10%;
      transition-delay: calc(var(--duration) * 9 + var(--delay));
    }
  }
}

/* pickup */
.pickup {
  > .footprints {
    top: 20px;
    left: 18px;

    .-index1 {
      top: 0;
      left: 0;
      rotate: 81deg;
      translate: -10% -10%;
      transition-delay: 0s;
    }
    .-index2 {
      top: 54px;
      left: 34px;
      rotate: 81deg;
      translate: -10% -10%;
      transition-delay: calc(var(--duration) * 1 + var(--delay));
    }
    .-index3 {
      top: 63px;
      left: 110px;
      rotate: 22deg;
      translate: -10% -5%;
      transition-delay: calc(var(--duration) * 2 + var(--delay));
    }
  }
}

/* ===========================================================
# FadeIn Cat
=========================================================== */
.fadein-cat {
  --duration: .5s;
  --timing: cubic-bezier(0.61, 1, 0.88, 1);

  position: absolute;
  transition-property: opacity, translate;
  transition-duration: var(--duration);
  transition-timing-function: var(--timing);

  /* 表示非表示 */
  opacity: 0;

  > img {
    width: var(--pc-width);
  }

  /* content */
  .content & {
    left: -23px;
    bottom: -29px;
    translate: -5% 0;
  }

  /* pickup */
  .pickup & {
    right: 0;
    bottom: 0;
    translate: 5% 0;
  }

  /* スクロール後 */
  &.passedScroll {
    opacity: 1 !important;
    translate: 0 !important;
  }
}


/* ===========================================================
# Media
=========================================================== */
.media {
  display: flex;
  column-gap: 30px;
  width: 100%;
  padding-inline: 90px;
}

.media__image {
  flex-shrink: 0;
  width: 332px;
}

.media__heading {
  width: 470px;
}

.media__text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 40px;
  font-size: 18px;
  font-size: 1.8rem;
}

/* ===========================================================
# Past
=========================================================== */
.past {
  width: 100%;
  margin-top: 40px;
  position: relative;
}

/* ===========================================================
# Carousel
=========================================================== */
.carousel {
  height: 386px;
  overflow: hidden;
}

.carousel__inner.-adjust {
  --adjust-margin: 64px;

  width: calc(100% + var(--adjust-margin));
  margin-left: calc(var(--adjust-margin) * -1);
}

.carousel__list {
  align-items: center;
}

.carousel__item {
  width: 198px;
  height: 292px;
  transition: width .5s ease, height .5s ease;
  overflow: hidden;

  &.swiper-slide-active {
    width: 262px;
    height: 386px;
  }
}

.carousel__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 181px;
}

/* ===========================================================
# Schedule
=========================================================== */
.schedule {
  width: 100%;
  margin-top: 40px;
}

.schedule__text {
  margin-top: 10px;
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
}

.schedule__text__sm {
  margin-top: 10px;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
}

.countdown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: 12px;
  margin-top: 20px !important;
}

.countdown__text {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 700;
}

.countdown__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;

  > p {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    column-gap: 6px;
  }

  :is(.days, .hours, .minutes, .seconds) {
    display: flex;
    align-items: center;
    column-gap: 4px;
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;
    font-size: 3.4rem;
    color: var(--primary-color);
  }

  .digit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 60px;
    background: var(--background-color);
    border-radius: 11.35px;
  }

  .words {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 700;
  }
}

/* ===========================================================
# Award
=========================================================== */
.award {
  --col: 4;
  --column-gap: 16px;

  width: 100%;
  margin-top: 34px;
  padding-inline: 32px;
  position: relative;
}

.award__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px var(--column-gap);
  margin-top: 34px;
}

.award__link {
  width: calc((100% / var(--col)) - var(--column-gap));
  text-align: center;
}

.award__image > img {
  -webkit-mask-size: 100%;
  mask-size: 100%;
}

.award__heading {
  margin-top: 10px;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 700;
  font-style: normal;
  color: var(--primary-color);
  line-height: 1.3;
}

.award__text {
  margin-top: 4px;
  font-size: 16px;
  font-size: 1.6rem;
}

.award__coming-soon {
  margin-top: 60px;
  opacity: 0.43;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

/* ===========================================================
# Pick Up
=========================================================== */
.pickup {
  --col: 2;
  --column-gap: 24px;

  width: var(--content-width);
  margin-top: 60px;
  margin-inline: auto;
  padding: 0 88px 80px;
  border-radius: 24px;
  background: var(--white);
}

.pickup__heading {
  display: grid;
  place-content: center;
  width: 146px;
  height: 80px;
  margin-inline: auto;
  margin-bottom: 30px;
  background: var(--secondary-color);
  position: relative;

  > h2 {
    font-weight: 700;
    font-style: normal;
    font-size: 22px;
    font-size: 2.2rem;
  }

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: calc(tan(60deg) * 20px / 2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: var(--white);
    position: absolute;
    bottom: 0;
  }
}

.pickup__tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin-top: 24px;
  margin-inline: auto;
}

.pickup__tags__item {
  padding: 5px 9px;
  border: 1px solid var(--black);
  border-radius: 100px;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3';
}

.pickup__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px var(--column-gap);
  margin-top: 24px;
}

.pickup__item {
  width: calc((100% / var(--col) - var(--column-gap)));
}

.pickup__item__image {
  border: 1px solid var(--black);
}

.pickup__item__heading {
  margin-top: 14px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  text-align: center;
}

.pickup__item__text {
  margin-top: 15px;
}

.pickup__link {
  display: flex;
  justify-content: center;

  .pickup__list + & {
    margin-top: 50px;
  }

  .pickup__list & {
    margin-top: 16px;
  }

  > a {
    display: grid;
    place-content: center;
    width: 300px;
    height: 47px;
    background: var(--primary-color);
    border: 1px solid var(--white);
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    box-shadow: 3px 3px 6px 0px #00000066;
    transition: background 0.3s ease;
    position: relative;

    &:focus-visible {
      background: var(--black);
    }

    @media (any-hover: hover) {
      &:hover {
        background: var(--black);
        opacity: 1; /* 既存 css の上書き */
      }
    }
  }

  /* 矢印アイコン */
  > a::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin-block: auto;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    rotate: 45deg;
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
  }
}

/* ===========================================================
# Credit
=========================================================== */
.credit {
  margin-top: 40px;
  text-align: center;

  > small {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: .4em;
    font-size: 10px;
    font-size: 1.0rem;
  }

  span {
    display: inline-block;
  }
}

/* ===========================================================
# Footer
=========================================================== */
#creacat_gp #footer {
  margin-top: 40px;
  font-family: 'Lato', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Gothic', Meiryo, メイリオ, sans-serif;
}