/* ===================================================================
   最終結果ページ (final.php / en/final.php) だけで読むスタイル
   本体は parts/final_results.php。Figma を書き出した画像を縦に並べ、
   リンク・ボタンを上に重ねる
   =================================================================== */

/* KV。最終ページは「今すぐ投票する」ボタンが無いので、デザインどおり高さを 778 -> 659 にする
   (Figma: 最終ページ Mask group 4224:50 / 375x659)。
   中の絵・ロゴ・火の粉は 778 を分母にした % で置いてあるので、枠の高さは変えずに
   下の 119px (ボタンがあった部分) を切り取り、そのぶん後ろの要素を上に詰める */
.is_final .p_top {
  /* 119 / 778 */
  clip-path: inset(0 0 15.29563% 0);
  /* PC: 1016.5px x 119 / 778 */
  margin-bottom: -155.48072px;
}
@media screen and (max-width: 575px) {
  .is_final .p_top {
    /* SP: 119 / 375 */
    margin-bottom: -31.73333vw;
  }
}
/* 権利表記は切り取ったあとの下端に合わせる (元の下からの位置 0.90939% + 切り取り 15.29563%) */
.is_final .p_top_credit {
  bottom: 16.20502%;
}

.section-final,
.section-final_archive {
  background: #000;
}

/* ===== FINAL VOTING RESULTS (見出し・リード・アーカイブへのリンク。Figma: 最終ページ 4226:2037 〜) =====
   デザイン (幅375) の px を cqw にする (1px = 100 / 375 cqw)。余白は自分の幅基準なので % で書く */
.fn_head {
  container-type: inline-size;
  /* 左右に余白を付けると cqw の基準 (中身の幅) が狭くなるので、左右の余白はカードに付ける */
  padding: 11.2% 0;
  color: #f00;
  text-align: center;
}
.fn_head_title {
  font-family: "Anton", sans-serif;
  font-size: 18.4cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.0013em;
}
/* 最終投票結果 (1文字ずつ赤い枠で囲む) */
.fn_head_sub {
  display: flex;
  justify-content: center;
  gap: 1.06667cqw;
  margin-top: 3.2cqw;
}
.fn_head_sub span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.13333cqw;
  height: 10.13333cqw;
  border: 1px solid #f00;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 8.53333cqw;
  font-weight: 900;
  line-height: 1;
}
.fn_head_lead {
  margin-top: 6.66667cqw;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 5.33333cqw;
  font-weight: 900;
  line-height: 1.4;
}
/* 英語は「最終投票結果」が無いので、見出しとリードの間を詰める */
.is_en .fn_head_lead {
  margin-top: 5.33333cqw;
}
/* アーカイブへのリンク (白いカード / 角丸8)。左にサムネイル、右に文字と「>」 */
.fn_head_archive {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.86667cqw;
  margin: 8.26667cqw 4.26667cqw 0;
  padding: 2.13333cqw;
  border-radius: 2.13333cqw;
  background: #fff;
  color: #000;
  text-align: left;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
}
a.fn_head_archive:hover {
  opacity: 0.8;
}
.fn_head_archive img {
  display: block;
  flex: none;
  width: 38.66667cqw;
  height: auto;
  border-radius: 1.06667cqw;
}
.fn_head_archive span {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4cqw;
  font-weight: 900;
  line-height: 1.4;
}
.fn_head_archive::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5.33333cqw;
  width: 2.13333cqw;
  height: 2.13333cqw;
  border-top: 0.8cqw solid #000;
  border-right: 0.8cqw solid #000;
  transform: translateY(-50%) rotate(45deg);
}

/* 書き出した画像1枚ぶん。リンク・ボタンはこの中に % で置く */
.fn_slice {
  position: relative;
}
.fn_slice > img {
  display: block;
  width: 100%;
  height: auto;
}

.fn_ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ===== 1〜8位のカード (5〜8位は .fn_rank_small。得票数は無い) =====
   台座 (img) の上に、怪獣 (.fn_kaiju) -> 手前の文字 (.fn_over) -> 順位マーク・名前・得票数 の順に重ねる。
   動きの順番 (クラスは js/script.js が付ける)
     .is_shown   … 画面に入った。順位マークが出て、得票数の数え上げが始まる。
                   数え上げの間、怪獣は端から少し顔を出しては引っ込むを繰り返す
     .is_counted … 数え上げが止まった。怪獣が最後まで入ってきて、肩書き+怪獣名が出る */
.fn_rank {
  /* 得票数の文字の大きさを、カードの幅 (Figma 375) に合わせて縮めるため */
  container-type: inline-size;
}
/* .js--anime は画面に入ったことを知るため (is_shown) だけに使う。
   カード全体を透明にすると下の黒地が見えるので、台座 (赤地・枠・文字) は最初から出しておく */
.fn_rank.js--anime {
  opacity: 1;
}

/* 怪獣。Figma のマスクの四角に合わせて置き、はみ出しを切る。
   隠しておく位置 (--fn-hide) と顔を出す位置 (--fn-peek) は怪獣ごとに HTML で渡す */
.fn_kaiju {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.fn_kaiju img {
  display: block;
  width: 100%;
  height: 100%;
  /* 入ってくるまでは暗いシルエットにしておく (少し形が見える程度) */
  filter: brightness(0.2);
}
.fn_kaiju.is_from_right img {
  transform: translateX(var(--fn-hide));
}
.fn_kaiju.is_from_bottom img {
  transform: translateY(var(--fn-hide));
}
/* 数え上げの間は、顔を出しては引っ込む */
.fn_rank.is_shown .fn_kaiju.is_from_right img {
  animation: fn_peek_x 0.4s ease-in-out infinite;
}
.fn_rank.is_shown .fn_kaiju.is_from_bottom img {
  animation: fn_peek_y 0.4s ease-in-out infinite;
}
@keyframes fn_peek_x {
  0%, 100% {
    transform: translateX(var(--fn-hide));
  }
  50% {
    transform: translateX(var(--fn-peek));
  }
}
@keyframes fn_peek_y {
  0%, 100% {
    transform: translateY(var(--fn-hide));
  }
  50% {
    transform: translateY(var(--fn-peek));
  }
}
/* 数え上げが止まったら最後まで入り、シルエットから元の色に戻る (JS がその時の位置から動かす) */
.fn_rank.is_counted .fn_kaiju.is_from_right img,
.fn_rank.is_counted .fn_kaiju.is_from_bottom img {
  animation: none;
  transform: none;
  filter: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s linear;
}

/* 怪獣より手前の文字・矢印 (台座から文字だけを切り抜いたもの)。最初から怪獣の上に出しておく */
.fn_over {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* 順位マーク・肩書き+怪獣名。順位マークは画面に入ったら大きい状態から、
   名前は怪獣が入ってきたあとに下から出てくる */
.fn_badge,
.fn_name {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
.fn_badge {
  transform: scale(1.6);
  transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fn_name {
  transform: translateY(40%);
  transition: opacity 0.3s linear 0.25s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.fn_rank.is_shown .fn_badge,
.fn_rank.is_counted .fn_name {
  opacity: 1;
  transform: none;
}

/* 1位の金の帯の文字 (映像化&グッズ化決定!! / ゼノルフとゴジラが激突!)。
   怪獣が入ったあと (.is_counted) に、大きい状態からなめらかに縮んで止まる。
   2行は1つのまとまり (.fn_band) ごと縮めて、行の間隔も一緒に縮むようにする。
   縮み始めから見えているよう、透明から出るのは短くする */
.fn_band {
  position: absolute;
  z-index: 3;
  display: block;
  opacity: 0;
  transform: scale(1.8);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.12s ease-out 0.3s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.fn_rank.is_counted .fn_band {
  opacity: 1;
  transform: none;
}
.fn_band_title,
.fn_band_sub,
.fn_band_note {
  position: absolute;
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #000;
  text-align: center;
  white-space: nowrap;
}
/* 見出し (Figma 30px / 行の高さ 39)。下線は文字の幅ではなく見出しの四角いっぱい (太さ 3.5) */
.fn_band_title {
  top: 0;
  left: 0;
  width: 100%;
  font-size: 8cqw;
  font-weight: 900;
  line-height: 1.3;
}
/* 英語は 30px だと四角に入らないので、行の高さ (39) はそのままで文字だけ小さくする */
.is_en .fn_band_title {
  font-size: 6.93333cqw;
  line-height: 1.5;
}
.fn_band_title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 94.74%;
  width: 100%;
  height: 0.93333cqw;
  background: #000;
}
/* 説明 3行 (Figma 16px / 行の高さ 20.8)。まとまりの上端から 53 下 */
.fn_band_sub {
  top: 45.68966%;
  left: 3.57143%;
  width: 92.85714%;
  font-size: 4.26667cqw;
  font-weight: 900;
  line-height: 1.3;
}
/* 注意書き (Figma 12px / 行の高さ 16.8)。縮める動きには入れず、帯の文字のあとに出す */
.fn_band_note {
  z-index: 3;
  font-size: 3.2cqw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.006em;
  white-space: normal;
  opacity: 0;
  transition: opacity 0.4s ease-out 0.7s;
}
.fn_rank.is_counted .fn_band_note {
  opacity: 1;
}

/* 帯の輝き。文字が出たあと (.is_counted から 0.8 秒後) に、光の筋が左から右へ横切る */
.fn_shine {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.fn_shine::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 35%;
  height: 140%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.25) 35%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0.25) 65%,
      rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%) skewX(-20deg);
}
.fn_rank.is_counted .fn_shine::before {
  animation: fn_shine 0.8s cubic-bezier(0.45, 0, 0.55, 1) 0.8s both;
}
@keyframes fn_shine {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }
  100% {
    transform: translateX(320%) skewX(-20deg);
  }
}

/* 光が通り過ぎたあと、右上で星がキラッと光る */
.fn_sparkle {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%) center / 8% 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%) center / 100% 8% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 240, 180, 0.9));
}
.fn_rank.is_counted .fn_sparkle {
  animation: fn_sparkle 0.6s ease-out 1.45s both;
}
@keyframes fn_sparkle {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) rotate(90deg);
  }
}

/* ===== 5〜8位 (画像を使わずに組む。Figma: 最終ページ 4234:2996 〜) =====
   1行の大きさはデザイン (幅375) の比率 (aspect-ratio) で決め、中の位置は %、文字の大きさは cqw (1px = 100 / 375 cqw) */
@font-face {
  font-family: "Godzilla font";
  /* 怪獣名に使う文字だけを切り出したもの (font/godzilla-kaiju.woff2) */
  src: url("../font/godzilla-kaiju.woff2") format("woff2");
  font-display: swap;
}
.fn_rank_small,
.fn_votes {
  background: #f50202 url("../img/final/rank_small_bg.webp") 0 0 / 128px;
}
/* 上の順位から続く左右の縦線 (Figma 16〜359) */
.fn_rank_small::before,
.fn_votes::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.26667%;
  width: 91.46667%;
  box-sizing: border-box;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  pointer-events: none;
}
/* 枠。左端の黒い順位の欄と、怪獣の欄の区切り線もここで描く。怪獣よりも手前に置く */
.fn_small_card {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 1px solid #000;
  pointer-events: none;
}
.fn_small_card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 31 / 309 */
  width: 10.03236%;
  background: #000;
}
.fn_small_card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* (211 - 33) / 309 */
  left: 57.6052%;
  border-left: 1px solid #000;
}
/* 怪獣の欄の地 (暗い赤の模様) */
.fn_rank_small .fn_kaiju {
  background: #b30505 url("../img/final/rank_small_cell.webp") center / cover;
}
/* 順位の数字 (黒い欄の真ん中) */
.fn_small_num {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f00;
  font-family: "Anton", sans-serif;
  font-size: 5.33333cqw;
  line-height: 1;
}
/* 肩書き+怪獣名。行 (高さ93) の上下真ん中に置く (英語は肩書きが2行になるものがある) */
.fn_small_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
  white-space: nowrap;
  transform: translateY(20%);
}
.fn_small_type,
.fn_small_kaiju {
  display: block;
  line-height: 1;
}
.fn_small_type {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4.26667cqw;
  font-weight: 900;
}
.fn_small_kaiju {
  /* 肩書き (16) との間 7px。英語は 3px */
  margin-top: 1.86667cqw;
  font-family: "Godzilla font", "Zen Kaku Gothic New", sans-serif;
  font-size: 6.4cqw;
  font-weight: 400;
}
.is_en .fn_small_kaiju {
  margin-top: 0.8cqw;
}
/* 右下の矢印 (赤い四角に黒の「>」)。1〜8位で共通。怪獣・手前の文字より前に置く */
.fn_arrow {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border: 1px solid #000;
  background: #f00;
  pointer-events: none;
}
.fn_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  border-top: 0.8cqw solid #000;
  border-right: 0.8cqw solid #000;
  transform: translate(-65%, -50%) rotate(45deg);
}
/* 5〜8位は文字が小さいので、順位は大きくせずにふわっと出す */
.fn_rank_small .fn_badge {
  transform: none;
}
/* 5〜8位の怪獣は、シルエット・顔出しなしで、右からすっと入ってくる。名前も一緒に出す。
   5位 (.js--anime) が画面に入ったら、6〜8位も --fn-delay ずつ遅らせて続けて出す (雪崩式) */
.fn_rank_small .fn_kaiju img {
  filter: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--fn-delay);
}
.fn_rank_small .fn_badge {
  transition: opacity 0.3s linear var(--fn-delay);
}
.fn_rank_small .fn_name {
  transition: opacity 0.3s linear calc(var(--fn-delay) + 0.25s), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fn-delay) + 0.25s);
}
.fn_rank_small.is_shown .fn_kaiju.is_from_right img,
.fn_rank_small.is_shown ~ .fn_rank_small .fn_kaiju.is_from_right img {
  animation: none;
  transform: none;
}
.fn_rank_small.is_shown .fn_name,
.fn_rank_small.is_shown ~ .fn_rank_small .fn_badge,
.fn_rank_small.is_shown ~ .fn_rank_small .fn_name {
  opacity: 1;
  transform: none;
}

/* 得票数。右端を POINTS の手前に固定し (right で置く)、数え上げ中に幅が変わっても左に伸びる */
.fn_points {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  font-family: "Anton", sans-serif;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  /* 数え上げが始まるまでは出さない */
  opacity: 0;
  transition: opacity 0.3s linear;
}
.fn_rank.is_shown .fn_points {
  opacity: 1;
}
.fn_points span {
  background: linear-gradient(to bottom, var(--fn-num-top), var(--fn-num-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 順位ごとの色 (Figma の書き出しから拾った色) */
.fn_rank1 {
  --fn-num-top: #ecc35a;
  --fn-num-bottom: #c9922f;
}
.fn_rank2 {
  --fn-num-top: #c9c9c9;
  --fn-num-bottom: #9c9c9c;
}
.fn_rank3 {
  --fn-num-top: #dccaa8;
  --fn-num-bottom: #c0a17c;
}
.fn_rank4 {
  --fn-num-top: #66a552;
  --fn-num-bottom: #548c43;
}

/* 画像の上に重ねるリンク・ボタン (見た目は画像のまま) */
.fn_hot {
  position: absolute;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.fn_hot:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.fn_hot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 画面には出さず、読み上げ・検索用に置くテキスト */
.fn_sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== VOTES (画像ではなく HTML の表。Figma: 最終ページ 4256:4252 〜) =====
   デザイン (幅375) の px を cqw にする (1px = 100 / 375 cqw) */
.fn_votes {
  position: relative;
  container-type: inline-size;
  /* 自分の幅を基準に cqw は使えないので % (幅に対する割合) で書く */
  padding: 4% 0;
}
/* 灰色の板 (Figma 16〜359 / 線1px) */
.fn_votes_panel {
  position: relative;
  box-sizing: border-box;
  width: 91.46667%;
  margin-left: 4.26667%;
  border: 1px solid #000;
  background: #d1d1d1 url("../img/final/votes_bg.webp") 0 0 / 128px;
  color: #000;
}
.fn_votes_title {
  padding: 6.93333cqw 0 6.13333cqw;
}
.fn_votes_title h2,
.fn_votes_title p {
  color: #000;
}
.fn_votes_title h2 {
  margin-bottom: 2.13333cqw;
  font-size: 17.06667cqw;
}
.fn_votes_title p {
  font-size: 4.26667cqw;
  line-height: 5.6cqw;
}
/* .js--anime は数え上げを始める合図 (is_shown) だけに使う。表は最初から出しておく */
.fn_votes_table.js--anime {
  opacity: 1;
}
.fn_votes_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.fn_votes_table tbody {
  border-top: 1px solid #000;
}
.fn_votes_table tbody:last-child {
  border-bottom: 1px solid #000;
}
/* 左の見出し (PHASE 01 / 02 / 投票総数)。右側との間に縦線 */
.fn_votes_table th {
  /* 89 / 375 */
  width: 23.73333cqw;
  padding: 0;
  border-right: 1px solid #000;
  font-family: "Anton", sans-serif;
  font-size: 4.26667cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  vertical-align: middle;
}
.fn_votes_total th {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4cqw;
  font-weight: 900;
  letter-spacing: 0;
}
.is_en .fn_votes_total th {
  font-family: "Anton", sans-serif;
  font-size: 4.26667cqw;
  letter-spacing: 0.02em;
}
.fn_votes_table td {
  height: 8.53333cqw;
  padding: 0 1.86667cqw;
  font-size: 4.26667cqw;
  line-height: 1;
  vertical-align: middle;
}
/* 1行おきに明るくする (各フェーズの1行目から) */
.fn_votes_table tbody:not(.fn_votes_total) tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.45);
}
.fn_votes_name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  white-space: nowrap;
}
.fn_votes_crown {
  display: inline-block;
  width: 4.8cqw;
  height: auto;
  vertical-align: -0.1em;
}
/* 得票数。POINTS は小さくして右に揃える */
.fn_votes_points {
  font-family: "Anton", sans-serif;
  text-align: right;
  white-space: nowrap;
}
.fn_votes_unit {
  margin-left: 0.25em;
  font-size: 0.75em;
}
.fn_votes_total td {
  height: 19.73333cqw;
  font-size: 10.66667cqw;
  letter-spacing: 0.002em;
}
.fn_votes_total .fn_votes_unit {
  margin-left: 0.18em;
  font-size: 0.6em;
}
/* たくさんのご投票ありがとうございました！ (黒い帯に白い文字を2行) */
.fn_votes_thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.33333cqw;
  padding: 6.93333cqw 0;
}
.fn_votes_thanks span {
  display: block;
  padding: 0.26667cqw 1.33333cqw;
  background: #000;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 5.33333cqw;
  font-weight: 900;
  line-height: 7.46667cqw;
  /* 投票総数の数え上げが止まったら (.fn_votes_table.is_counted)、左から流れるように出す。2行目は少し遅らせる */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fn_votes_thanks span + span {
  transition-delay: 0.2s;
}
.fn_votes_table.is_counted + .fn_votes_thanks span {
  clip-path: inset(0);
}

/* ===== NOTE (お知らせ。Figma: 最終ページ 4292:70 〜) =====
   水色の地 (内側を暗く) + 真ん中の白いにじみ + 上下の黒い斜めの縞。
   デザイン (幅375 / 高さ320) の px を cqw にする (1px = 100 / 375 cqw) */
/* cqw はこの .fn_note の幅を基準にするので、余白・地・縞は中の .fn_note_inner に付ける */
.fn_note {
  container-type: inline-size;
}
.fn_note_inner {
  position: relative;
  overflow: hidden;
  padding: 16.26667cqw 4.53333cqw 16cqw;
  background: radial-gradient(circle at 50% 50.15625%, #fff 0, rgba(255, 255, 255, 0.85) 18cqw, rgba(255, 255, 255, 0) 42cqw), #b2f8f9;
  box-shadow: inset 0 0 13.33333cqw rgba(0, 55, 55, 0.85);
  color: #000;
  text-align: center;
}
/* 上下の縞 (Figma: 幅14.7 x 高さ12.8 の平行四辺形を 15.7 おきに並べたもの。上は y4、下は y303) */
.fn_note_inner::before,
.fn_note_inner::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3.41333cqw;
  /* 縞の傾き: 高さ 12.8 で横に 6.7 ずれる (縦から約27.6度) */
  background: repeating-linear-gradient(117.6deg, #000 0 1.89cqw, transparent 1.89cqw 3.71cqw);
}
.fn_note_inner::before {
  top: 1.06667cqw;
}
.fn_note_inner::after {
  bottom: 1.06667cqw;
}
.fn_note_title h2,
.fn_note_title p {
  color: #000;
}
.fn_note_title h2 {
  margin-bottom: 2.13333cqw;
  font-size: 17.06667cqw;
}
.fn_note_title p {
  font-size: 4.26667cqw;
  line-height: 5.6cqw;
}
.fn_note_text {
  margin-top: 5.86667cqw;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4cqw;
  font-weight: 700;
  line-height: 1.4;
}

/* ===== ARCHIVE (画像ではなく HTML の文字。Figma: 最終ページ 4256:4143 〜) =====
   デザイン (幅375) の px を、列の幅に合わせて cqw にする (1px = 100 / 375 cqw) */
.section-final_archive {
  container-type: inline-size;
}
.fn_archive {
  padding: 10.66667cqw 4.26667cqw 9.86667cqw;
}
.section-final_archive .section-title h2,
.section-final_archive .section-title p,
.fn_archive_lead,
.fn_archive_title {
  color: #f00;
}
.section-final_archive .section-title h2 {
  margin-bottom: 2.13333cqw;
  font-size: 17.06667cqw;
}
.section-final_archive .section-title p {
  font-size: 4.26667cqw;
  line-height: 1.3125;
}
.fn_archive_lead {
  margin-top: 5.86667cqw;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4.26667cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.03em;
  text-align: center;
}
.fn_archive_item {
  margin-top: 8cqw;
}
.fn_archive_item + .fn_archive_item {
  margin-top: 6.4cqw;
}
/* 見出しの左に赤い縦線 (幅4) */
.fn_archive_title {
  position: relative;
  margin: 0 0 4.26667cqw;
  padding-left: 3.2cqw;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1;
}
.fn_archive_title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.06667cqw;
  height: 100%;
  background: #f00;
}
.fn_archive_thumb {
  display: block;
  overflow: hidden;
  border-radius: 2.13333cqw;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
}
a.fn_archive_thumb:hover {
  opacity: 0.8;
}
.fn_archive_thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== 最終結果発表のお知らせ (parts/modal_final.php) =====
   枠は第2フェーズ開始モーダルと同じ (css/style.css の .l_phase_end / .l_phase2_start_visual)。
   「最終結果を見る」ボタンを画像 (311x597) の (32, 479) に 247x80 で重ねる。四隅の落としは画像側で透過済み */
.l_final_modal_btn {
  position: absolute;
  top: 80.23451%;
  left: 10.28939%;
  width: 79.42122%;
  height: 13.40034%;
  display: block;
  transition: filter 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.l_final_modal_btn img {
  display: block;
  width: 100%;
  height: 100%;
}
.l_final_modal_btn:hover {
  filter: brightness(1.08);
}