/* 総合TOP専用 共通フォントサイズクラス（2026-07-29 細川さん・久保さんMTGで確定）
    .common-style-area の共通計算式は「借りない」。総合トップの新セクションのルート要素に
    .app-top-scale を付け、その中だけで完結する専用の計算式を使う。
    （2026-07-29 STGで、この共通計算式を間借りしたせいで無関係の既存パーツ(xxx-small-text等)まで
    文字が縮む事故が発生・渡辺さん指摘。原因は.common-style-areaがサイト全体の汎用クラスで、
   総合トップ専用ではなかったこと。以後.app-top-scaleを新設して完全に切り離した） */

/* 新しいセクション(6806/6808等)を作る時は、そのセクションのルート要素に
    .app-top-scale を1つ追加すればよい。container-type(cqwの基準)もこのクラス自身が持つため、
    フォントの仕組みとしては common-style-area は理屈上もう不要のはず。
    ただし common-style-area 自体が持つ他のレイアウト設定(max-width/margin等)への影響は
    2026-07-29時点で未検証のため、6805・6807では念のため common-style-area も併記したまま残している。
   外して問題ないか確認できたら、このコメントごと更新すること */

.app-top-body .app-top-scale {
    container-type: inline-size;
}

.app-top-body .app-top-scale * {
    --f-cq-calc: calc(100cqw * var(--f-base) / var(--w-ref));
    font-size: var(--f-cq-calc);
}

@media (min-width: 768px) {
    .app-top-body .app-top-scale {
        --w-ref: 1600;
    }
}

@media (max-width: 767px) {
    .app-top-body .app-top-scale {
        --w-ref: 750;
    }
}

/* 使い方：要素には下記4クラスのうち使いたいものを1つ追加するだけでよい
   （独自クラスと併記OK。例：<h2 class="purchase-brands-title l-bold-text">買取強化中のブランド</h2>） */

.app-top-body .app-top-scale .l-bold-text {
    --f-base: 50;
    font-weight: 900;
}

@media (max-width: 767px) {
    .app-top-body .app-top-scale .l-bold-text {
        --f-base: 50;
    }
}

.app-top-body .app-top-scale .m-bold-text {
    --f-base: 30;
    font-weight: 700;
}

@media (max-width: 767px) {
    .app-top-body .app-top-scale .m-bold-text {
        --f-base: 40;
    }
}

.app-top-body .app-top-scale .body-text {
    --f-base: 20;
    font-weight: 400;
}

@media (max-width: 767px) {
    .app-top-body .app-top-scale .body-text {
        --f-base: 26;
    }
}

.app-top-body .app-top-scale .body-bold-text {
    --f-base: 20;
    font-weight: 700;
}

@media (max-width: 767px) {
    .app-top-body .app-top-scale .body-bold-text {
        --f-base: 26;
    }
}

/* ボタン：6805で実装済みの数値をベースに、文字数に応じて幅が伸び縮みする作りに変更(2026-07-29)。
   今後6806/6808等で文字量が変わっても、このクラスをそのまま使い回せる想定 */

.app-top-body .app-top-scale .btn__wrap {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.app-top-body .app-top-scale .btn__wrap > a {
    /* サイト共通の.btn__red > a(width:20em)が幅を強制してくるため、明示的に上書き */
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 1.5cqw;
    white-space: nowrap;
    margin: 0;
    padding: 0 3.75cqw;
    height: 5.4375cqw;
    border-radius: 999px;
    box-shadow: 0.3125cqw 0.25cqw 0.25cqw 0 rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    --f-base: 30;
    font-weight: 700;
}

.app-top-body .app-top-scale .btn__wrap > a:hover {
    transform: translateY(0.125cqw);
    box-shadow: none;
}

/* SVG内の色は変数が使えないためハードコードのままにしています */
.app-top-body .app-top-scale .btn__wrap > a::after {
    /* サイト共通の.btn__wrap > *::after(_footer_btn.scss)がposition:absoluteで右端に固定してくるため、
       位置指定をリセットしてgapによる並びに戻す */
    position: static;
    margin-top: 0;
    content: "";
    flex-shrink: 0;
    width: 0.875cqw;
    height: 1.375cqw;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L12 11L2 20' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
}

@media (max-width: 767px) {
    .app-top-body .app-top-scale .btn__wrap > a {
        height: 10.4cqw;
        /* clampで上限を付けないと、SP内でも横幅が広い端(767px)でパディング・隙間が大きくなりすぎてはみ出るため */
        padding: 0 clamp(18px, 10cqw, 45px);
        gap: clamp(10px, 8cqw, 35px);
        --f-base: 26;
    }

    .app-top-body .app-top-scale .btn__wrap > a::after {
        width: 2.6667cqw;
        height: 3.7333cqw;
    }
}