/* ==========================================================================
   指定HTML専用ベース & 共通レイアウト (コンテナクエリ版)
   ========================================================================== */

/* FV 全体ラッパー */

.fv-main-text-wrap-wrapper .fv-main-text-wrap {
  position: relative;
  background: #fff;
  border: 4px solid #e60012;
  border-radius: 25px;
  box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.75);
  height: 25cqw;
  width: 95cqw;
  overflow: hidden;
}

.fv-main-text-wrap-wrapper .fv-main-text-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 80%;
  width: 30%;
  height: 100%;
  background-image: url(/wp-content/themes/lp202302/assets/img/gold/gold_fv_circle.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- 金額表示テキストエリア共通 --- */
.fv-noun-text-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.fv-noun-text-area .text-layer-wrapper {
  position: relative;
  display: inline-block;
}

.fv-noun-text-area .text-layer {
  font-weight: 900;
  line-height: 1;
  white-space: nowrap !important;
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: -0.05em;
  padding: 0.2em;
}

.fv-noun-text-area.pos-price .text-layer {
  font-family: "Noto Sans JP";
}

/* ベースの価格エリア位置とサイズ */
.fv-noun-text-area.pos-price {
  font-size: 17cqw;
  letter-spacing: 0.7cqw;
  left: 48%;
  top: 37.7%;
  transform: translate(-50%, -50%);
}

/* highest-gold-area 内での価格エリア位置調整 */
.highest-gold-area .fv-noun-text-area.pos-price {
  left: 42%;
  top: 38.5%;
}

/* 背面レイヤー（共通フチ設定） */
.fv-noun-text-area .layer-stroke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: var(--otakaraya-red);
  -webkit-text-stroke: 1.2cqw var(--otakaraya-red);
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
}

/* 前面レイヤー（共通塗り設定） */
.fv-noun-text-area .layer-fill {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff 24%, #ffff00 99.27%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* シンプル赤文字用（フチ・グラデーション解除） */
.fv-noun-text-area.is-simple-red .text-layer,
.fv-noun-text-area.is-simple-red .layer-stroke,
.fv-noun-text-area.is-simple-red .layer-fill {
  color: var(--otakaraya-red) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

/* --- ラベル・テキストエリア --- */
.today-price-label {
  position: absolute;
  font-size: 3.75cqw;
  color: var(--color-black);
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.ingot-label {
  position: absolute;
  font-size: 2.1cqw;
  color: var(--color-black);
  font-weight: bold;
  text-align: center;
  left: 49.6%;
  top: 90%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.price-unit-block {
  position: absolute;
  font-size: 7cqw;
  font-weight: 900;
  color: var(--otakaraya-red);
  transform: translate(-50%, -50%);
}

/* highest-gold-area 内での単位位置調整 */
.highest-gold-area .price-unit-block {
  left: 76%;
  top: 56%;
}

/* --- 前日比エリア --- */
.diff-price::after {
  content: "円";
  position: absolute;
  font-size: 4cqw;
  font-weight: 900;
  left: 95.5%;
  top: 47.4%;
  z-index: 100;
  color: var(--otakaraya-red);
}

.diff-price.minus::after {
  color: #000;
}

.diff-price p {
  font-size: 4cqw;
  color: var(--otakaraya-red);
  font-weight: 900;
  text-align: center;
  position: absolute;
  left: 92.5%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: 15%;
  z-index: 100;
}

.diff-price .diff-rate-minus {
  font-size: 3.6cqw;
  color: #000;
  font-weight: 900;
  text-align: center;
  left: 89%;
  top: 61%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 100;
}

.diff-price .diff-rate-plus {
  font-size: 4cqw;
  color: var(--otakaraya-red);
  position: absolute;
  font-weight: 900;
  text-align: center;
  left: 89%;
  top: 63%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 100;
}

/* --- 注釈（※1, ※2...） --- */
.num-annotation {
  position: absolute;
  font-size: 2.5cqw;
  font-weight: bold;
  line-height: 0;
  color: #000;
  z-index: 10;
  letter-spacing: 0;
}

/* highest-gold-area 内での価格注釈位置調整 */
.highest-gold-area .num-annotation.price {
  left: 72.6%;
  top: 30%;
}

.num-annotation.diff {
  top: 81%;
  right: 2%;
}

/* --- 注釈リスト（下部） --- */
.annotation-list {
  padding: 2.5cqw 2.5cqw 0;
  font-size: 3cqw;
}

.annotation-item {
  padding-left: 2em;
  text-indent: -2em;
  margin-bottom: 0.5em;
}

p.annotation-item:last-child {
  padding-left: 1.25em;
  text-indent: -1.25em;
}

.fv-main-text-wrap .price-comma {
  font-size: 60%;
  margin: 9% 0% 0% 0%;
}