/* ==========================================================================
   1. ベース & 共通レイアウト
   ========================================================================== */

/* FV 全体ラッパー */
.gold-top-fv .gold-fv-wrap {
    position: relative !important;
    display: block;
    width: 100%;
}

.gold-top-fv .gold-fv-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキストエリア共通（絶対配置・中央揃え） */
.gold-top-fv .fv-noun-text-area {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* 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-weight: 900;
    line-height: 1;
    white-space: nowrap; /* ★ここを nowrap に戻す */
    display: flex;
    /* flex-wrap: wrap; はここでは削除（または書かない） */
    justify-content: center;
    gap: -0.05em;
    padding: 0.2em;
}

.gold-top-fv .fv-noun-text-area.pos-main .text-layer {
    white-space: normal; /* ここだけ改行許可 */
    flex-wrap: wrap; /* ここだけ折り返し許可 */
    line-height: 1.2; /* 行間を少し開ける */
    align-items: center; /* 縦方向の中央揃え */
}

/* 3. メインテキスト内の <br> を改行として機能させる設定 */
.gold-top-fv .fv-noun-text-area.pos-main .text-layer br {
    flex-basis: 100%;
    height: 0;
    width: 100%;
    content: "";
}

/* 4. 念のため金額エリア(.pos-price)は強制的に改行禁止を指定（安全策） */
.gold-top-fv .fv-noun-text-area.pos-price .text-layer {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}
.gold-top-fv .fv-noun-text-area.pos-main.is-multiline .text-layer {
    font-size: 4vw;
}

.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;
}

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

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

.gold-top-fv .fv-noun-text-area .layer-stroke .char-dot {
    -webkit-text-stroke: 1.2vw var(--theme_color);
}
/* 白フチ用のドット対応 */
.gold-top-fv .fv-noun-text-area .layer-stroke.white .char-dot {
    -webkit-text-stroke: 1.2vw var(--color-white);
}

/* 前面レイヤー（共通塗り設定） */
.gold-top-fv .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;
}

/* 前面レイヤー：色バリエーション */
.gold-top-fv .fv-noun-text-area .layer-fill.white {
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
}

.gold-top-fv .fv-noun-text-area .layer-fill.red {
    background: var(--theme_color);
    -webkit-background-clip: text;
    background-clip: text;
}

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

/* ==========================================================================
   2. SP (Mobile) スタイル - 初期設定
   ========================================================================== */

/* --- キャッチコピー位置 --- */
.gold-top-fv .fv-noun-text-area.pos-main {
    left: 50%;
    top: 6%;
    transform: translate(-50%, -50%);
}
.gold-top-fv .fv-noun-text-area.pos-main .text-layer {
    font-size: 8vw;
}

.gold-top-fv .fv-noun-text-area.pos-sub {
    top: 8%;
    left: 4%;
}
.gold-top-fv .fv-noun-text-area.pos-sub .text-layer {
    font-size: 20vw;
    gap: 0.1em;
}
.gold-top-fv .fv-noun-text-area.pos-sub .layer-stroke {
    -webkit-text-stroke: 1.3vw var(--theme_color);
}

/* --- 全国店舗数エリア --- */
.gold-top-fv .fv-noun-text-area.pos-zenkoku {
    top: 75.3%;
    left: 17.2%;
}
.gold-top-fv .fv-noun-text-area.pos-zenkoku .text-layer {
    font-size: 4vw;
}
.gold-top-fv .fv-noun-text-area.pos-zenkoku .layer-stroke {
    color: var(--color-white);
    -webkit-text-stroke: 1.5vw var(--color-white);
    filter: none;
}
.gold-top-fv .fv-noun-text-area.pos-zenkoku .layer-fill {
    color: var(--color-black);
}

.gold-top-fv .common-style-wrap .dyn-number-store {
    position: absolute;
    top: 76.8%;
    left: 8%;
    z-index: 2;
    font-size: 11.6vw;
    font-family: "Noto Sans JP";
    font-weight: bold;
    color: var(--theme_color);
    letter-spacing: -1.2vw;
}
.gold-top-fv .common-style-wrap .dyn-number-store .num-item {
    position: relative;
    display: inline-block;
    z-index: 2;
}
.gold-top-fv .common-style-wrap .dyn-number-store .num-item::before {
    content: attr(data-char);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-text-stroke: 1.6vw var(--color-white);
    color: transparent;
}

/* 店舗・以上展開中 */
.gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical {
    top: 80%;
    left: 39.9%;
}
.gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical .text-layer {
    font-size: 4vw;
    flex-direction: column;
    line-height: 1.1;
}
.gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical .layer-stroke {
    color: var(--color-white);
    -webkit-text-stroke: 1.5vw var(--color-white);
    filter: none;
}
.gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical .layer-fill {
    color: var(--theme_color);
}

.gold-top-fv .fv-noun-text-area.pos-tenpo-ijou {
    top: 88%;
    left: 17.3%;
}
.gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .text-layer {
    font-size: 4vw;
    color: var(--theme_color);
}
.gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .layer-stroke {
    -webkit-text-stroke: 1.5vw var(--color-white);
    filter: none;
}

/* --- 口コミエリア --- */
.gold-top-fv .common-style-wrap .dyn-number-voice {
    position: absolute;
    top: 81%;
    left: 57%;
    z-index: 2;
    font-size: 9vw;
    font-weight: bold;
    color: var(--theme_color);
    letter-spacing: -1.1vw;
}
.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: 1.2vw var(--color-white);
}

/* --- 価格表示エリア --- */
.gold-top-fv .fv-noun-text-area.pos-price {
    font-size: 14vw;
    left: 48%;
    top: 37.7%;
    transform: translate(-50%, -50%);
}
.gold-top-fv .fv-noun-text-area.pos-price .text-layer {
    font-family: "Noto Sans JP";
}

.gold-top-fv .ingot-label {
    position: absolute;
    font-size: 2.1vw;
    color: var(--color-black);
    font-weight: bold;
    text-align: center;
    left: 49.6%;
    top: 31%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.gold-top-fv .price-unit-block {
    position: absolute;
    top: 37.3%;
    left: 77%;
    font-size: 5.2vw;
    font-weight: bolder;
    color: var(--theme_color);
    left: 76%;
    top: 40.2%;
    transform: translate(-50%, -50%);
}

/* --- 注釈（※1, ※2...） --- */
.gold-top-fv .num-annotation {
    position: absolute;
    font-size: 2.3vw;
    font-weight: bold;
    line-height: 0;
    color: #000;
    z-index: 10;
    letter-spacing: 0;
}
.gold-top-fv .num-annotation.price {
    top: 37.6%;
    left: 74.7%;
}

.gold-top-fv .num-annotation.voice {
    top: 28%;
    right: -22%;
}

/* 店舗注釈のみ2層袋文字 */
.gold-top-fv .num-annotation.store {
    top: 18%;
    left: 107%;
}
.gold-top-fv .num-annotation.store .layer-stroke {
    color: var(--color-white);
    -webkit-text-stroke: 0.8vw var(--color-white);
    filter: none;
}
.gold-top-fv .num-annotation.store .layer-fill {
    color: var(--color-black);
}

/* 注釈リスト（下部） */
.gold-top-fv .annotation-list {
    padding: 2.5cqw 2.5cqw 0;
    font-size: 3vw;
}
.gold-top-fv .annotation-item {
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: 0.5em;
}

/* --- TV CM エリア --- */
.gold-top-fv .fv-text-tv-cm p {
    margin: 0;
    position: absolute;
    z-index: 2;
}
.gold-top-fv .tv-line-black {
    top: 81%;
    left: 17%;
    font-size: 4vw;
    font-weight: 700;
    color: var(--color-black);
}
.gold-top-fv .tv-line-red-big {
    top: 86%;
    left: 8%;
    font-size: 12vw;
    font-weight: 900;
    line-height: 0.9;
    color: var(--theme_color);
    z-index: 1;
}
.gold-top-fv .tv-line-red-small {
    top: 88.5%;
    left: 28%;
    font-size: 5vw;
    font-weight: 900;
    color: var(--theme_color);
}

.gold-top-fv .visit-line-black {
    top: 94.6%;
    left: 45.5%;
    font-size: 2.8vw;
    font-weight: bold;
    color: var(--color-black);
}
.gold-top-fv .visit-line-red-big {
    top: 93.4%;
    left: 76.7%;
    font-size: 4.7vw;
    font-weight: 900;
    color: var(--theme_color);
}
.gold-top-fv .cash-line-red-small {
    top: 94.5%;
    left: 3.5%;
    font-size: 3vw;
    font-weight: bold;
    color: var(--color-black);
}
.gold-top-fv .cash-line-black {
    top: 93.5%;
    left: 19.2%;
    font-size: 4.5vw;
    font-weight: 900;
    color: var(--theme_color);
}

/* --- 装飾・その他 --- */
.gold-top-fv .fv-202504-extra-img {
    position: absolute;
    bottom: 27%;
    right: 58%;
    width: 35vw;
    z-index: 15;
    pointer-events: none;
}

/* 爆発エリア */
.gold-top-fv .highest-burst-area {
    position: absolute;
    top: 25%;
    left: 4%;
    width: 35vw;
    z-index: 15;
}
.gold-top-fv .highest-burst-area img {
    width: 100%;
}
.gold-top-fv .highest-burst-area .burst-text-wrap {
    position: absolute;
    top: 32%;
    left: -2%;
    /* transform: translate(-50%, -50%); */
    width: 100%;
    transform: rotateZ(353deg);
}
.gold-top-fv .highest-burst-area .text-layer {
    font-size: 3vw;
    line-height: 1.1;
    white-space: normal;
    display: block;
    text-align: center;
    padding: 0;
}

/* 最高値表示時の調整 (SP) */
.gold-top-fv .highest-gold-area.is_highest .fv-noun-text-area.pos-price {
    left: 36%;
    top: 37%;
    transform: translate(-50%, -50%);
}

.gold-top-fv .highest-gold-area.is_highest .price-unit-block {
    left: 63%;
    top: 39.4%;
}
.gold-top-fv .highest-gold-area.is_highest .num-annotation.price {
    left: 61.8%;
    top: 36.7%;
}
.gold-top-fv .highest-gold-area.is_highest .highest-burst-area {
    left: 65%;
    top: 32%;
}

/* ==========================================================================
   3. PC Overrides (768px以上)
   ========================================================================== */
@media screen and (min-width: 768px) {
    /* キャッチコピー */
    .gold-top-fv .fv-noun-text-area.pos-main {
        left: 50%;
        top: 12%;
        transform: translate(-50%, -50%);
    }
    .gold-top-fv .fv-noun-text-area.pos-main .text-layer {
        font-size: 4.5vw;
    }

    .gold-top-fv .fv-noun-text-area.pos-sub {
        top: 20%;
        left: 28%;
    }
    .gold-top-fv .fv-noun-text-area.pos-sub .text-layer {
        font-size: 9vw;
    }

    /* 共通フッチ太さ調整 - PC */
    .gold-top-fv .fv-noun-text-area .layer-stroke {
        -webkit-text-stroke: 0.8vw var(--theme_color);
    }

    /* 全国店舗数 */
    .gold-top-fv .fv-noun-text-area.pos-zenkoku {
        top: 68%;
        left: 9.5%;
    }
    .gold-top-fv .fv-noun-text-area.pos-zenkoku .text-layer {
        font-size: 2vw;
        line-height: 2.5vw;
    }
    .gold-top-fv .fv-noun-text-area.pos-zenkoku .layer-stroke {
        -webkit-text-stroke: 0.6vw var(--color-white);
    }

    .gold-top-fv .common-style-wrap .dyn-number-store {
        top: 71.4%;
        left: 6.3%;
        font-size: 5.3vw;
        letter-spacing: -0.6vw;
    }
    .gold-top-fv .common-style-wrap .dyn-number-store .num-item::before {
        -webkit-text-stroke: 0.7vw var(--color-white);
    }

    .gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical {
        top: 76%;
        left: 20.3%;
    }
    .gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical .text-layer {
        font-size: 2vw;
    }
    .gold-top-fv .fv-noun-text-area.pos-tenpo.is-vertical .layer-stroke {
        -webkit-text-stroke: 0.6vw var(--color-white);
    }

    .gold-top-fv .fv-noun-text-area.pos-tenpo-ijou {
        top: 90%;
        left: 9.5%;
    }
    .gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .text-layer {
        font-size: 2vw;
    }

    /* 口コミ */
    .gold-top-fv .common-style-wrap .dyn-number-voice {
        top: 82.8%;
        left: 73.1%;
        font-size: 2.7vw;
        letter-spacing: -0.2vw;
    }

    /* 価格エリア */
    .gold-top-fv .fv-noun-text-area.pos-price {
        font-size: 7vw;
        left: 48%;
        top: 68.5%;
    }
    .gold-top-fv .ingot-label {
        top: 58%;
        font-size: 1vw;
    }
    .gold-top-fv .price-unit-block {
        top: 73.5%;
        left: 62%;
        font-size: 2.5vw;
    }

    .gold-top-fv .fv-noun-text-area.pos-tenpo-ijou .layer-stroke {
        -webkit-text-stroke: 0.6vw var(--color-white);
    }

    /* 注釈 */
    .gold-top-fv .num-annotation.price {
        top: 69%;
        left: 61%;
        font-size: 1.3vw;
    }
    .gold-top-fv .num-annotation.store {
        top: 18.2%;
        right: -20.2%;
        left: auto;
        font-size: 1vw;
    }
    .gold-top-fv .num-annotation.store .layer-stroke {
        -webkit-text-stroke: 0.4vw var(--color-white);
    }
    .gold-top-fv .num-annotation.voice {
        top: 29%;
        right: -20%;
        font-size: 0.5vw;
    }

    .gold-top-fv .annotation-list {
        width: 65%;
        margin: auto;
        padding: 0.5cqw 2.5cqw 0;
    }
    .gold-top-fv .annotation-item {
        font-size: max(16px);
    }

    /* TV CM */
    .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-small {
        top: 69%;
        left: 11%;
        font-size: 3.4vw;
    }
    .gold-top-fv .visit-line-black {
        top: 89.8%;
        left: 47.5%;
        font-size: 1.2vw;
    }
    .gold-top-fv .visit-line-red-big {
        top: 88.5%;
        left: 61%;
        font-size: 1.8vw;
    }
    .gold-top-fv .cash-line-red-small {
        top: 89.6%;
        left: 30.3%;
        font-size: 1.3vw;
    }
    .gold-top-fv .cash-line-black {
        top: 88.5%;
        left: 37%;
        font-size: 1.8vw;
    }
    .gold-top-fv .common-style-wrap .dyn-number-voice::before {
        -webkit-text-stroke: 0.4vw var(--color-white);
    }
    /* その他 */
    .gold-top-fv .fv-202504-extra-img {
        top: 3%;
        left: 2%;
        width: 25vw;
        bottom: auto;
        right: auto;
    }

    /* 爆発エリア PC */
    .gold-top-fv .highest-burst-area {
        top: 50%;
        left: 20%;
        width: 14vw;
    }
    .gold-top-fv .highest-burst-area .text-layer {
        font-size: 1.4vw;
    }
    .gold-top-fv .fv-noun-text-area .layer-stroke.white {
        -webkit-text-stroke: 0.6vw var(--color-white);
    }

    /* 最高値表示時の調整 (PC) */
    .gold-top-fv .highest-gold-area.is_highest .fv-noun-text-area.pos-price {
        font-size: 7vw;
        left: 43%;
        top: 69%;
    }
    .gold-top-fv .highest-gold-area.is_highest .price-unit-block {
        left: 56.4%;
        top: 73.5%;
    }
    .gold-top-fv .highest-gold-area.is_highest .num-annotation.price {
        left: 55.5%;
        top: 69%;
    }
    .gold-top-fv .highest-gold-area.is_highest .highest-burst-area {
        left: 57.3%;
        top: 59%;
        width: 16vw;
    }
}
/* =========================================
   SP (～767px) 設定
   ========================================= */
.gold-top-fv .responsive-br {
    display: none !important;
}
.gold-top-fv .fv-noun-text-area.pos-main .text-layer {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: calc(84vw / var(--char-count));
    font-size: clamp(3.5vw, 84vw / var(--char-count), 10vw);
    justify-content: center;
    width: 100%;
}
.gold-top-fv .fv-noun-text-area.pos-main .text-layer .char-span {
    display: inline-block !important;
}

/* =========================================
   PC (768px～) 設定
   ========================================= */
@media screen and (min-width: 768px) {
    /* 改行タグがあれば強制改行（1行の場合はタグが無いので無視されます） */
    .gold-top-fv .responsive-br {
        display: block !important;
        width: 100%;
        height: 0;
        content: "";
        margin: 0;
    }

    .gold-top-fv .fv-noun-text-area.pos-main .text-layer {
        white-space: normal !important;
        flex-wrap: wrap !important;
        line-height: 1.1 !important;
        justify-content: center;
        text-align: center;

        /* 文字数に応じたサイズ計算 */
        font-size: calc(50vw / var(--char-count-pc));
        font-size: clamp(2.5vw, 50vw / var(--char-count-pc), 3.5vw);
    }
    .gold-top-fv .fv-noun-text-area.pos-main.is-single-line .text-layer {
        /* 基準値を 55vw → 80vw にアップ（1行ならもっと横幅を使ってOK） */
        font-size: calc(80vw / var(--char-count-pc));

        /* 最大サイズも 9vw → 11vw に緩和（短い単語のときより大きく） */
        font-size: clamp(4.5vw, 80vw / var(--char-count-pc), 5vw);
    }
}
.price-comma {
    font-size: 80%;
    margin-top: 3%;
}