/* --- ベースレイアウト --- */
.gold-top-fv .fv-noun-text-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 各エリアごとの位置とサイズは個別に指定 */
}

/* 2層レイヤーのラッパー */
.gold-top-fv .fv-noun-text-area .text-layer-wrapper {
  position: relative;
  display: inline-block;
}

/* 共通テキストスタイル（フォント、太さ、重なり） */
.gold-top-fv .fv-noun-text-area .text-layer {
  font-family: "roboto";
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  gap: -0.05em; /* 文字間詰め */
  padding: 0.2em; /* バウンディングボックス切れ防止 */
}

.gold-top-fv .fv-noun-text-area .char-span {
  display: block;
}

/* 「・」のカーニング調整 */
.gold-top-fv .fv-noun-text-area .char-dot {
  margin-left: -0.1em;
  margin-right: -0.1em;
}

/* --- レイヤー1: 背面（フチ） --- */
.gold-top-fv .fv-noun-text-area .layer-stroke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  color: var(--color-red); /* 変数がなければ直書き */
  -webkit-text-stroke: 1.2vw var(--color-red); /* フチの太さを調整 */
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
}

.gold-top-fv .fv-noun-text-area .layer-stroke .char-dot {
  -webkit-text-stroke: 1.2vw var(--color-red);
}

/* --- レイヤー2: 前面（グラデーション塗り） --- */
.gold-top-fv .fv-noun-text-area .layer-fill {
  position: relative;
  z-index: 2;
  background: linear-gradient(
    91.65deg,
    #ffff00 2.33%,
    #f0f0cd 48.93%,
    #ffff00 99.27%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* --- ★個別設定: 位置とサイズ★ --- */

/* 1. 金・貴金属（メイン） */
.gold-top-fv .fv-noun-text-area.pos-main {
  top: 5%;
  left: 5%;
}
.gold-top-fv .fv-noun-text-area.pos-main .text-layer {
  font-size: 10vw;
}

/* 2. 高価買取（サブ） */
.gold-top-fv .fv-noun-text-area.pos-sub {
  top: 14.4%;
  left: 4%;
}
.gold-top-fv .fv-noun-text-area.pos-sub .text-layer {
  font-size: 20vw;
  width: 100%;
  justify-content: center;
  gap: 0.1em;
}
.gold-top-fv .fv-noun-text-area.pos-sub .layer-stroke {
  -webkit-text-stroke: 1vw var(--color-red);
}

/* 3. 全国（新規追加） */
.gold-top-fv .fv-noun-text-area.pos-zenkoku {
  top: 56.2%;
  left: 18%;
}
.gold-top-fv .fv-noun-text-area.pos-zenkoku .text-layer {
  font-size: 6vw; /* 店舗数より小さく */
}
/* 全国：フチを白に上書き */
.gold-top-fv .fv-noun-text-area.pos-zenkoku .layer-stroke {
  color: var(--color-white);
  -webkit-text-stroke: 0.6vw var(--color-white);
  filter: none;
}
/* 全国：中身を赤(#D00000)に上書き */
.gold-top-fv .fv-noun-text-area.pos-zenkoku .layer-fill {
  background: none; /* グラデーション解除 */
  -webkit-background-clip: border-box; /* クリップ解除 */
  background-clip: border-box;
  color: var(--color-red);
}

/* 4. 店舗数（ラベル） */
.gold-top-fv .fv-noun-text-area.pos-label {
  top: 56%;
  left: 12%;
}
.gold-top-fv .fv-noun-text-area.pos-label .text-layer {
  font-size: 4vw;
}
.gold-top-fv .fv-noun-text-area.pos-label .layer-stroke {
  -webkit-text-stroke: 0.8vw var(--color-red);
}

/* 5. 店舗以上展開中（新規追加） */
.gold-top-fv .fv-noun-text-area.pos-tenpo-ijou {
  top: 74%;
  left: 13.2%;
}
.gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .text-layer {
  font-size: 3.5vw; /* 店舗数より少し大きく強調 */
  color: var(--color-white);
}
.gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .layer-stroke {
  -webkit-text-stroke: 1vw var(--color-red);
  filter: none;
}

/* --- 数字まわり --- */
.gold-top-fv .common-style-wrap .dyn-number-store {
  position: absolute;
  top: 58.8%;
  left: 8%;
  font-weight: bold;
  color: var(--color-white, var(--color-white));
  letter-spacing: -1.1vw;
  z-index: 2;
  font-size: 15vw;
  font-family: "Roboto";
}

/* 数字のフチ */
.gold-top-fv .common-style-wrap .dyn-number-store::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 1vw var(--color-red);
}

/* --- 数字まわり --- */
.gold-top-fv .common-style-wrap .dyn-number-voice {
  position: absolute;
  top: 63%;
  left: 64%;
  font-weight: bold;
  color: var(--color-white, var(--color-white));
  letter-spacing: -1.1vw;
  z-index: 2;
  font-size: 15vw;
}

/* 数字のフチ */
.gold-top-fv .common-style-wrap .dyn-number-voice::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 1vw var(--color-red);
}

/* ベースのラッパー設定（必要に応じて維持） */
.gold-top-fv .common-style-wrap .gold-fv-wrap {
  position: relative !important;
  display: block;
}
.gold-top-fv .common-style-wrap .gold-fv-wrap img {
  width: 100%;
}

/* --- 全行共通スタイル（太字・フォント・白フチ） --- */
.gold-top-fv .fv-text-tv-cm p {
  margin: 0;
}

/* --- 1行目：地上波テレビ（黒） --- */
.gold-top-fv .tv-line-black {
  color: var(--color-black);
  font-weight: 700;
  font-size: 4vw;
  letter-spacing: 0.05em;
  position: absolute;
  top: 81%;
  left: 17%;
  z-index: 2; /* 重なり順調整 */
}

/* --- 2行目：CM（赤・特大） --- */
.gold-top-fv .tv-line-red-big {
  color: var(--color-red);
  font-weight: 900;
  font-size: 12vw;
  line-height: 0.9;
  letter-spacing: 0.02em;
  position: absolute;
  top: 86%;
  left: 8%;
  z-index: 1;
  font-family: "Roboto";
}

/* --- 3行目：放送中！（赤・中） --- */
.gold-top-fv .tv-line-red-small {
  color: var(--color-red);
  font-weight: 900;
  font-size: 5vw;
  top: 88.5%;
  left: 28%;

  letter-spacing: 0vw;
  position: absolute;
}
.gold-top-fv .visit-line-black {
  color: var(--color-black);
  font-weight: 700;
  font-size: 3vw;
  letter-spacing: 0.05em;
  position: absolute;
  top: 79%;
  left: 60.5%;
  z-index: 2;
}
.gold-top-fv .visit-line-red-big {
  color: var(--color-red);
  font-weight: 900;
  font-size: 5vw;
  top: 81.6%;
  left: 68%;
  letter-spacing: 0vw;
  position: absolute;
}
.gold-top-fv .cash-line-red-small {
  color: var(--color-black);
  font-weight: 700;
  font-size: 3vw;
  letter-spacing: 0.05em;
  position: absolute;
  top: 89.4%;
  left: 69%;
  z-index: 2; /* 重なり順調整 */
}
.gold-top-fv .cash-line-black {
  color: var(--color-red);
  font-weight: 900;
  font-size: 5vw;
  top: 91.9%;
  left: 66%;
  letter-spacing: 0vw;
  position: absolute;
}

.gold-top-fv .annotation-list {
  padding: 2.5cqw 2.5cqw 0;
  font-size: 3vw;
}

.gold-top-fv .annotation-item {
  padding-left: 2em; /* 「※1:」の分だけ左に余白を作る */
  text-indent: -2em; /* 1行目だけその余白分戻す */
  margin-bottom: 0.5em; /* 各項目の下の余白 */
}

@media (min-width: 768px) {
  .gold-top-fv .annotation-list {
    padding: 0.5cqw 2.5cqw 0;
    width: 65%;
    margin: auto;
  }

  .gold-top-fv .annotation-item {
    padding-left: 2em; /* 「※1:」の分だけ左に余白を作る */
    text-indent: -2em; /* 1行目だけその余白分戻す */
    margin-bottom: 0.5em; /* 各項目の下の余白 */
    font-size: max(16px);
  }
}

/* =========================================
   最高値更新モード (mode-highest) 用スタイル
   ========================================= */

/* --- 1. 既存タイトルの移動と縮小 --- */

/* 金・貴金属 */
.gold-top-fv .mode-highest .fv-noun-text-area.pos-main {
  position: absolute;
  top: 2%;
  left: 2%; /* 左端へ */
  right: auto; /* 右指定を解除 */

  transform-origin: top left; /* 左上を基準に縮小 */
  transform: scale(0.6); /* 60%サイズ */
  z-index: 20;
}

/* 高価買取 */
.gold-top-fv .mode-highest .fv-noun-text-area.pos-sub {
  position: absolute;
  top: 7%; /* pos-mainの下に配置 */
  left: 2%; /* 左端へ */
  right: auto; /* 右指定を解除 */
  width: auto; /* 幅なりにする */

  transform-origin: top left; /* 左上を基準に縮小 */
  transform: scale(0.6); /* 60%サイズ */
  z-index: 20;

  justify-content: flex-start; /* 左揃え */
}

/* --- 注釈（※）の共通スタイル --- */
.gold-top-fv .num-annotation {
  position: absolute;
  font-size: 2.5vw;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  z-index: 10;
  -webkit-text-stroke: 0;
  text-shadow: none;
  letter-spacing: 0;
}
.gold-top-fv .num-annotation.store {
  top: 12%;
  right: 4%;
}
.gold-top-fv .num-annotation.voice {
  top: 28%;
  right: -22%;
}

.gold-top-fv .balloon-label {
  position: absolute;
  top: 21.8%;
  left: 9%;
  font-size: 3.8vw;
  color: var(--color-red);
  font-weight: bold;
}

.gold-top-fv .burst-text-line-history {
  position: absolute;
  top: 27.6%;
  left: 14%;
  font-weight: bold;
  color: var(--color-white, var(--color-white));
  letter-spacing: 0.3vw;
  z-index: 2;
  font-size: 4vw;
}

.gold-top-fv .burst-text-line-history::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 0.8vw var(--color-red);
}
.gold-top-fv .burst-text-line-update {
  position: absolute;
  top: 31.8%;
  left: 10%;
  font-weight: bold;
  color: var(--color-white, var(--color-white));
  letter-spacing: 0.3vw;
  z-index: 2;
  font-size: 4vw;
}

.gold-top-fv .burst-text-line-update::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 0.8vw var(--color-red);
}

.gold-top-fv .ingot-label {
  position: absolute;
  top: 24%;
  left: 40%;
  font-size: 2.5vw;
  color: var(--color-white);
  font-weight: bold;
}
.gold-top-fv .price-val {
  position: absolute;
  top: 22%;
  left: 40%;
  font-size: 2.8vw;
  color: var(--color-white);
  font-weight: bold;
}

.gold-top-fv .mode-highest .highest-gold-area .fv-noun-text-area.pos-sub {
  position: absolute;
  top: 24%;
  left: 37%;
  right: auto;
  width: auto;
  transform-origin: top left;
  transform: scale(0.6);
  z-index: 20;
  justify-content: flex-start;
}

.gold-top-fv
  .mode-highest
  .highest-gold-area
  .fv-noun-text-area.pos-sub
  .text-layer {
  font-size: 25vw;
}

.gold-top-fv .price-unit-block {
  color: var(--color-white);
  position: absolute;
  top: 30%;
  left: 88%;
  font-size: 5.2vw;
  font-weight: bolder;
}
.gold-top-fv .num-annotation.price {
  top: 29%;
  left: 89%;
  font-size: 2vw;
}

/* --------------------------------------------------
       注釈番号（PC/SP）出し分け用CSS
    -------------------------------------------------- */
.note-sp {
  display: none;
}
.note-pc {
  display: inline;
}

@media (max-width: 767px) {
  .note-sp {
    display: inline;
  }
  .note-pc {
    display: none;
  }
  /* SP版で価格注釈行自体を消すためのクラス */
  .annotation-hidden-sp {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  /* ベースのコンテナを相対配置の基準にする */
  .gold-top-fv .gold-fv-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .gold-top-fv .cta-flex-img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  .gold-top-fv .fv-noun-text-area .layer-stroke {
    -webkit-text-stroke: 0.8vw var(--color-red);
  }
  /* メインキャッチ「金・貴金属」 */
  .gold-top-fv .fv-noun-text-area.pos-main {
    position: absolute;
    top: 3%;
    left: 0%;
    text-align: center;
    z-index: 10;
  }

  .gold-top-fv .fv-noun-text-area.pos-main .text-layer {
    font-size: 5.2vw;
  }

  /* サブキャッチ「高価買取」 */
  .gold-top-fv .fv-noun-text-area.pos-sub {
    position: absolute;
    top: 0%;
    left: 26%;
    text-align: center;
    z-index: 10;
  }
  .gold-top-fv .fv-noun-text-area.pos-sub .text-layer {
    font-size: 10vw;
  }
  .gold-top-fv .balloon-label {
    top: 9.4%;
    left: 78.2%;
    font-size: 2.4vw;
  }
  .gold-top-fv .ingot-label {
    top: 25%;
    left: 74.3%;
    font-size: 1vw;
  }

  .gold-top-fv .price-display .fv-noun-text-area.pos-sub {
    position: absolute;
    top: 26%;
    left: 73%;
    text-align: center;
    z-index: 10;
  }
  .gold-top-fv .price-display .fv-noun-text-area.pos-sub .text-layer {
    font-size: 6.2vw;
  }
  .gold-top-fv .price-unit-block {
    top: 33.7%;
    left: 94.2%;
    font-size: 3.2vw;
  }
  .gold-top-fv .tv-line-black {
    top: 63.6%;
    left: 10.5%;
    font-size: 2vw;
  }
  .gold-top-fv .tv-line-red-big {
    top: 69%;
    left: 2.6%;

    font-size: 5.5vw;
  }
  .gold-top-fv .tv-line-red {
    top: 68.2%;
    left: 14%;
    font-size: 4vw;
  }
  .gold-top-fv .tv-line-red-small {
    font-size: 3.4vw;
    top: 69%;
    left: 11%;
  }
  .gold-top-fv .visit-line-black {
    font-size: 1vw;
    top: 85%;
    left: 3.7%;
    letter-spacing: -0.05em;
  }
  .gold-top-fv .visit-line-red-big {
    font-size: 2.5vw;
    top: 86.5%;
    left: 3.9%;
  }
  .gold-top-fv .cash-line-red-small {
    top: 85%;
    left: 20%;
    font-size: 1vw;
  }
  .gold-top-fv .cash-line-black {
    font-size: 2.5vw;
    top: 86.6%;
    left: 16.6%;
  }
  .gold-top-fv .common-style-wrap .dyn-number-voice {
    font-size: 5vw;
    top: 81%;
    left: 81.7%;
    letter-spacing: -0.4vw;
  }
  .gold-top-fv .common-style-wrap .dyn-number-store {
    font-size: 6vw;
    top: 50%;
    left: 80%;
    letter-spacing: -0.7vw;
  }
  .gold-top-fv .fv-noun-text-area.pos-zenkoku .text-layer {
    display: flex;
    flex-direction: column;
    font-size: 2vw;
    line-height: 2.5vw;
  }
  .gold-top-fv .fv-noun-text-area.pos-zenkoku {
    top: 55%;

    left: 77%;
  }
  .gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .text-layer {
    font-size: 1vw;
  }
  .gold-top-fv .fv-noun-text-area.pos-tenpo-ijou {
    top: 69.6%;
    left: 84.6%;
  }
  .gold-top-fv .num-annotation.store {
    top: 86%;
    right: -8%;
    font-size: 0.5vw;
  }
  .gold-top-fv .num-annotation.price {
    top: 35%;
    left: 96.3%;
    font-size: 0.5vw;
  }
  .gold-top-fv .num-annotation.voice {
    top: 29%;
    right: -20%;
    font-size: 0.5vw;
  }

  .gold-top-fv .mode-highest .fv-noun-text-area.pos-sub {
    position: absolute;
    top: 0%;
    left: 23%;
    text-align: center;
    z-index: 10;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-sub .text-layer {
    font-size: 18vw;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-main {
    top: 3%;
    left: 0%;
  }
  .gold-top-fv .mode-highest .balloon-label {
    top: 6.6%;
    left: 78.2%;
    font-size: 2.4vw;
  }
  .gold-top-fv .mode-highest .ingot-label {
    top: 43%;
    left: 73.8%;
    font-size: 1vw;
  }
  .gold-top-fv
    .mode-highest
    .highest-gold-area
    .fv-noun-text-area.pos-sub
    .text-layer {
    font-size: 11vw;
  }
  .gold-top-fv .mode-highest .highest-gold-area .fv-noun-text-area.pos-sub {
    top: 43%;
    left: 72%;
  }
  .gold-top-fv .mode-highest .price-unit-block {
    top: 50.7%;
  }
  .gold-top-fv .mode-highest .num-annotation.price {
    top: 52%;
  }
  .gold-top-fv .mode-highest .burst-text-line-history {
    top: 15.5%;
    left: 79%;
  }
  .gold-top-fv .mode-highest .burst-text-line-update {
    top: 27.7%;
    left: 74%;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-zenkoku {
    top: 78%;
    left: 68%;
  }
  .gold-top-fv .common-style-wrap.mode-highest .dyn-number-store {
    font-size: 5.3vw;
    top: 73.1%;
    left: 69.9%;
    letter-spacing: -0.5vw;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-zenkoku .text-layer {
    font-size: 1.8vw;
    line-height: 2.3vw;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-zenkoku {
    top: 77.9%;
    left: 67.6%;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-tenpo-ijou {
    top: 90.9%;
    left: 74.2%;
  }
  .gold-top-fv .common-style-wrap.mode-highest .dyn-number-voice {
    top: 81%;
    left: 88%;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-tenpo-ijou .text-layer {
    font-size: 0.9vw;
  }
  .gold-top-fv .mode-highest .num-annotation.store {
    top: 85%;
    right: 3%;
    font-size: 0.5vw;
  }
  .gold-top-fv .common-style-wrap.mode-highest .dyn-number-store {
    font-size: 5.6vw;
    top: 73%;
    left: 70.2%;
    letter-spacing: -0.5vw;
  }
  .gold-top-fv .common-style-wrap.mode-highest .dyn-number-voice {
    top: 81%;
    left: 88.1%;
  }
  .gold-top-fv .mode-highest .fv-noun-text-area.pos-main .text-layer {
    font-size: 8vw;
  }
}