/* data page: fv section (scoped to .page-data) */
.page-data .data-fv {
  background: #fff;
}

.page-data .data-fv__frame {
  --dw: 1360;
  --px: calc(100cqw / var(--dw));
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1360 / 1373;
  background: #fff;
  color: #414141;
  font-family: var(--data-mincho);
}

.page-data .data-fv .abs {
  position: absolute;
  margin: 0;
}

.page-data .data-fv img.abs {
  display: block;
  max-width: none;
  height: auto;
}

.page-data .data-fv .fv-blend-screen {
  mix-blend-mode: screen;
}

.page-data .data-fv .fv-blend-multiply {
  mix-blend-mode: multiply;
}

.page-data .data-fv .fv-ruler {
  opacity: 0.3;
  transform: scaleY(-1);
}

.page-data .data-fv .fv-yellow {
  background-image: linear-gradient(203.97deg, rgba(255, 255, 255, 0.075) 24.657%, rgba(255, 240, 156, 0.175) 43.318%, rgba(255, 241, 115, 0.176) 63.366%, rgba(255, 221, 26, 0.25) 102.29%);
}

/* テキスト共通: top は行の中心。left は左端、.fv-c は中心 */
.page-data .data-fv .fv-t {
  transform: translateY(-50%);
  white-space: nowrap;
  font-weight: 800;
}

.page-data .data-fv .fv-t.fv-c {
  transform: translate(-50%, -50%);
  text-align: center;
}

.page-data .data-fv .fv-semi {
  font-weight: 600;
}

.page-data .data-fv .fv-xbold {
  font-weight: 800;
}

.page-data .data-fv .fv-white {
  color: #fff;
  text-shadow: calc(3 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px)) rgba(0, 0, 0, 0.25);
}

.page-data .data-fv .fv-white.fv-tsh {
  text-shadow: calc(9 * var(--px)) calc(2 * var(--px)) calc(5 * var(--px)) rgba(0, 0, 0, 0.25);
}

.page-data .data-fv .fv-dark {
  color: #414141;
}

/* 赤グラデ文字（Figma: 下 #f2aba5 → 中 #f04d3e → 上 #e32e1e） */
.page-data .data-fv .fv-red {
  color: transparent;
  filter: drop-shadow(calc(4 * var(--px)) calc(7 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.25));
}

.page-data .data-fv .fv-red > span {
  background-image: linear-gradient(to top, #f2aba5 20.139%, #f04d3e 33.198%, #e32e1e 71.389%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-data .data-fv .fv-down {
  font-family: "Source Serif 4", serif;
  font-weight: 700;
  background-image: linear-gradient(to top, #f2aba5 20.139%, #f04d3e 33.198%, #e32e1e 71.389%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 金グラデ文字 */
.page-data .data-fv .fv-gold {
  font-weight: 700;
  filter: drop-shadow(calc(9 * var(--px)) calc(2 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.25)) drop-shadow(calc(3 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px)) #fff);
}

.page-data .data-fv .fv-gold > span {
  background-image: linear-gradient(0.47deg, #cba100 19.761%, #fcefb4 48.826%, #cba100 75.096%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* リング: 白い下地の円 + 赤グラデのリング（SVG） */
.page-data .data-fv .fv-ringbase {
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.2) 100%);
}

.page-data .data-fv .fv-ring {
  overflow: visible;
}

/* 注釈 */
.page-data .data-fv .fv-note {
  font-size: calc(20 * var(--px));
  letter-spacing: calc(2 * var(--px));
  line-height: 1.11;
}

.page-data .data-fv .fv-note--2 {
  white-space: pre-wrap;
}

/* SP: DOWN の矢印は Figma デモグラsp_261020 5074:7790 の位置（PC 座標に直した値）。PC の値は style 属性 */
@media (max-width: 767px) {
  .page-data .data-fv .fv-arrow-1 { top: calc(451.4 * var(--px)) !important; height: calc(88.6 * var(--px)) !important; }
  .page-data .data-fv .fv-arrow-2 { top: calc(433.9 * var(--px)) !important; height: calc(88.6 * var(--px)) !important; }
  .page-data .data-fv .fv-arrow-3 { top: calc(417.4 * var(--px)) !important; height: calc(84.9 * var(--px)) !important; }
}