/* ツリー投票ページ用フッター（電波学園祭2026 公式サイトのフッターと同じ見た目）
 * ・クラス名は .tf-〜 に統一してあり、投票ページ本体のCSSとは干渉しません。
 * ・色・フォントはこのファイルの .tf の中だけで定義しています。 */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Libre+Bodoni:wght@600&family=Noto+Serif+JP:wght@400;700&family=Playfair+Display:ital,wght@1,600&display=swap");

.tf {
  --color-bg: #080f2a;
  --color-gold: #efd591;
  --color-gold-cream: #eed89b;
  --font-serif: 'Cinzel', 'Noto Serif JP', serif;
  --font-jp: 'Noto Serif JP', serif;
  --font-cinzel: 'Cinzel', serif;
  --font-bodoni-pf: 'Libre Bodoni', 'Playfair Display', serif;
  --tf-scale: 1;
  color: var(--color-gold);
  font-family: var(--font-serif);
  line-height: normal;
  text-align: left;
}

/* サイト本体と同じリセット（詳細度0なので、下の指定が優先されます） */
:where(.tf, .tf *, .tf *::before, .tf *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tf {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--color-bg) !important;
  overflow: hidden !important;
  display: block !important;
}

.tf-yellow-area {
  position: relative;
  width: 100%;
  height: calc(599px * var(--tf-scale, 1));
  background-color: var(--color-gold-cream);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 !important;
}

.tf-stage {
  position: relative;
  width: 1440px;
  min-width: 1440px;
  height: 599px;
  transform-origin: center top;
  transform: scale(var(--tf-scale, 1));
}

.tf-left-col {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 100%;
  z-index: 5;
}

.tf-logo-wrapper {
  position: absolute;
  top: 3.72px;
  left: 2.11px;
  width: 514.81px;
  height: 207.56px;
  line-height: 0;
}

.tf-logo-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  display: block;
}

.tf-nav {
  position: absolute;
  top: calc(211px + (599px - 211px) / 2);
  transform: translateY(-50%);
  left: 125px;
  border-left: 2.5px solid var(--color-bg);
  padding-left: 26px;
}

.tf-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tf-nav-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: var(--color-bg);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tf-nav-link:hover {
  opacity: 0.7;
  transform: translateX(5px);
}

.tf-nav-en {
  font-family: var(--font-cinzel);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.15;
}

.tf-nav-ja {
  font-family: var(--font-jp);
  font-size: 13px;
  letter-spacing: 0.15em;
  opacity: 0.85;
  margin-top: 1px;
}

.tf-center-col {
  position: absolute;
  left: 510px;
  top: calc(211px + (599px - 211px) / 2);
  transform: translateY(-50%);
  z-index: 3;
}

.tf-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-bodoni-pf);
  font-weight: 700;
  font-size: 155px;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--color-bg);
}

.tf-countdown-row:nth-child(2) {
  transform: translateX(70px);
}

.tf-countdown-row:nth-child(3) {
  transform: translateX(140px);
}

.tf-countdown-sp {
  display: none;
}

.tf-clef-img {
  position: absolute;
  left: 1095.15px;
  top: 5.62px;
  width: 287.4px;
  height: 665.69px;
  transform: rotate(24.51deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: 2;
  background-color: var(--color-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width=%22275%22 height=%22637%22 viewBox=%220 0 275 637%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cg clip-path=%22url(%23clip0_90_54)%22%3E%0A%3Cpath d=%22M73.0564 381.492C67.6257 327.074 108.668 274.79 167.468 274.79C226.268 274.79 273.932 322.566 273.932 381.492C273.932 440.434 215.681 502.3 143.356 500.296C63.0073 500.296 2.39 438.374 0.745565 374.453C-1.27409 296.939 47.8829 241.696 117.249 196.27C135.794 184.112 245.279 82.8127 203.597 50.9242C177.45 30.9169 135.322 55.3235 141.346 117.75C147.39 180.16 188.448 490.351 192.569 538.55C196.634 586.046 170.294 625.698 124.279 633.175C87.1194 639.224 53.9736 624.126 33.8866 594.927C26.8519 582.851 22.838 569.753 24.8426 553.642C28.0751 527.72 45.9759 506.33 72.0569 506.33C98.1275 506.33 121.843 527.644 119.255 553.642C118.26 563.715 110.216 582.851 98.168 585.862C86.1143 588.874 77.0711 586.864 81.0953 594.927C85.1093 602.975 106.201 611.037 129.309 603.987C152.405 596.947 170.478 564.727 163.454 514.392C156.415 464.048 133.318 257.669 128.288 236.534C123.274 215.393 113.779 132.323 111.216 112.709C108.207 89.5592 109.932 4.31746 190.236 1.63159C261.738 -0.748954 279.674 101.029 212.374 167.469C167.691 211.578 98.1688 250.624 68.0334 305.984C37.9124 361.365 42.9258 439.891 93.1442 467.06C143.356 494.254 198.599 470.092 215.681 446.932C232.754 423.781 246.817 364.382 208.653 335.194C180.217 313.457 147.462 315.309 124.28 334.192C108.207 347.27 96.6005 366.285 97.1534 382.507C98.0212 408.114 116.9 414.031 113.226 418.746C106.851 426.903 76.0605 411.703 73.0564 381.492Z%22 fill=%22%23EFD591%22/%3E%0A%3C/g%3E%0A%3Cdefs%3E%0A%3CclipPath id=%22clip0_90_54%22%3E%0A%3Crect width=%22274.62%22 height=%22636.084%22 fill=%22white%22/%3E%0A%3C/clipPath%3E%0A%3C/defs%3E%0A%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width=%22275%22 height=%22637%22 viewBox=%220 0 275 637%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cg clip-path=%22url(%23clip0_90_54)%22%3E%0A%3Cpath d=%22M73.0564 381.492C67.6257 327.074 108.668 274.79 167.468 274.79C226.268 274.79 273.932 322.566 273.932 381.492C273.932 440.434 215.681 502.3 143.356 500.296C63.0073 500.296 2.39 438.374 0.745565 374.453C-1.27409 296.939 47.8829 241.696 117.249 196.27C135.794 184.112 245.279 82.8127 203.597 50.9242C177.45 30.9169 135.322 55.3235 141.346 117.75C147.39 180.16 188.448 490.351 192.569 538.55C196.634 586.046 170.294 625.698 124.279 633.175C87.1194 639.224 53.9736 624.126 33.8866 594.927C26.8519 582.851 22.838 569.753 24.8426 553.642C28.0751 527.72 45.9759 506.33 72.0569 506.33C98.1275 506.33 121.843 527.644 119.255 553.642C118.26 563.715 110.216 582.851 98.168 585.862C86.1143 588.874 77.0711 586.864 81.0953 594.927C85.1093 602.975 106.201 611.037 129.309 603.987C152.405 596.947 170.478 564.727 163.454 514.392C156.415 464.048 133.318 257.669 128.288 236.534C123.274 215.393 113.779 132.323 111.216 112.709C108.207 89.5592 109.932 4.31746 190.236 1.63159C261.738 -0.748954 279.674 101.029 212.374 167.469C167.691 211.578 98.1688 250.624 68.0334 305.984C37.9124 361.365 42.9258 439.891 93.1442 467.06C143.356 494.254 198.599 470.092 215.681 446.932C232.754 423.781 246.817 364.382 208.653 335.194C180.217 313.457 147.462 315.309 124.28 334.192C108.207 347.27 96.6005 366.285 97.1534 382.507C98.0212 408.114 116.9 414.031 113.226 418.746C106.851 426.903 76.0605 411.703 73.0564 381.492Z%22 fill=%22%23EFD591%22/%3E%0A%3C/g%3E%0A%3Cdefs%3E%0A%3CclipPath id=%22clip0_90_54%22%3E%0A%3Crect width=%22274.62%22 height=%22636.084%22 fill=%22white%22/%3E%0A%3C/clipPath%3E%0A%3C/defs%3E%0A%3C/svg%3E") center / contain no-repeat;
}

.tf-bottom-bar {
  width: 100%;
  background-color: var(--color-bg);
  padding: 8px 20px 8px 20px !important;
  text-align: center;
  margin: 0 !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  line-height: 1 !important;
}

.tf-copyright {
  font-family: var(--font-cinzel);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.35 !important;
  color: var(--color-gold);
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.85;
  display: block;
}

/* スマホ・タブレット（サイト本体と同じ切り替え条件） */
@media (max-width: 850px), (min-width: 851px) and (max-aspect-ratio: 6/5) {
  .tf-yellow-area {
    height: auto;
  }

  .tf-stage {
    width: 100%;
    min-width: 0;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .tf-left-col {
    position: relative;
    width: 100%;
    height: auto;
  }

  .tf-logo-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: clamp(240px, 62vw, 420px);
    height: auto;
    aspect-ratio: 514.81 / 207.56;
    margin-bottom: clamp(32px, 6vw, 50px);
  }

  .tf-nav {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    border-left: none;
    padding-left: clamp(32px, 6vw, 56px);
    margin-bottom: clamp(32px, 6vw, 50px);
  }

  .tf-nav-list {
    gap: clamp(14px, 2.4vw, 20px);
  }

  .tf-nav-en {
    font-size: clamp(18px, 3vw, 22px);
  }

  .tf-nav-ja {
    font-size: clamp(12px, 2vw, 14px);
  }

  .tf-center-col {
    display: none;
  }

  .tf-clef-img {
    right: -15px;
    top: 50px;
    left: auto;
    width: clamp(150px, 42vw, 280px);
    height: auto;
    aspect-ratio: 275 / 637;
    transform: rotate(14.38deg);
  }

  .tf-bottom-bar {
    flex-direction: column;
    padding: 40px 16px 30px !important;
    gap: 16px;
  }

  .tf-countdown-sp {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-family: var(--font-bodoni-pf);
    font-weight: 700;
    font-size: clamp(46px, 12vw, 80px);
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-gold);
  }

  .tf-copyright {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    opacity: 0.8;
  }
}