/* トップの金額枠「WEB限定最大割引価格」（2026/04の焼き込み画像 mv_pc.png 1447×1126 / mv_sp.png 749×1549 をHTML化）
   位置・大きさは元画像の画素で書き、--u（元画像1画素ぶん）を掛けて画像と同じ比率で縮める */
.top_price_ptn_1{
    display: block;
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    container-type: inline-size;
    color: #434443;
    text-decoration: none;
}
.top_price_ptn_1 *{
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1;
    letter-spacing: 0;
}
.top_price_ptn_1 .box{
    --u: calc(100cqw / 1447);
    position: relative;
    aspect-ratio: 1447 / 1126;
    background: #f4f4f4;
}
.top_price_ptn_1 .box > *{
    position: absolute;
    white-space: nowrap;
}
.top_price_ptn_1 .bar{
    left: calc(var(--u) * 12);
    top: calc(var(--u) * 71);
    width: calc(var(--u) * 1420);
    height: calc(var(--u) * 71);
    padding-left: calc(var(--u) * 43);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #006cc3;
    border-radius: calc(var(--u) * 4);
    color: #fff;
    font-size: calc(var(--u) * 43.5);
    font-weight: 500;
}
.top_price_ptn_1 .bar span{
    font-family: "Inter Tight", "Noto Sans JP", sans-serif;
    font-weight: 600;
    margin-right: .25em;
}
.top_price_ptn_1 .komikomi,
.top_price_ptn_1 .tokuten{
    color: #006cc3;
    font-weight: 900;
    --s: calc(var(--u) * 3.5);
    --o: calc(var(--u) * 5);
    text-shadow:
        var(--s) 0 0 #fff, calc(var(--s) * -1) 0 0 #fff, 0 var(--s) 0 #fff, 0 calc(var(--s) * -1) 0 #fff,
        calc(var(--s) * .7) calc(var(--s) * .7) 0 #fff, calc(var(--s) * -.7) calc(var(--s) * .7) 0 #fff,
        calc(var(--s) * .7) calc(var(--s) * -.7) 0 #fff, calc(var(--s) * -.7) calc(var(--s) * -.7) 0 #fff,
        var(--o) 0 calc(var(--u) * 1.5) rgba(0, 108, 195, .3), calc(var(--o) * -1) 0 calc(var(--u) * 1.5) rgba(0, 108, 195, .3),
        0 var(--o) calc(var(--u) * 1.5) rgba(0, 108, 195, .3), 0 calc(var(--o) * -1) calc(var(--u) * 1.5) rgba(0, 108, 195, .3);
}
.top_price_ptn_1 .komikomi{
    left: 0;
    width: 100%;
    text-align: center;
    top: calc(var(--u) * 188);
    font-size: calc(var(--u) * 45);
    letter-spacing: calc(var(--u) * -4.5);
}
.top_price_ptn_1 .kihon{
    left: calc(var(--u) * 78);
    top: calc(var(--u) * 304.5);
    font-size: calc(var(--u) * 95);
    font-weight: 700;
    letter-spacing: calc(var(--u) * 1);
}
.top_price_ptn_1 .ichiritsu{
    left: calc(var(--u) * 76);
    top: calc(var(--u) * 448);
    font-size: calc(var(--u) * 26.8);
    font-weight: 500;
}
.top_price_ptn_1 .num{
    overflow: visible;
}
.top_price_ptn_1 .num text{
    font-family: "Roboto Condensed", sans-serif;
    font-style: italic;
    font-weight: 900;
    text-anchor: end;
    paint-order: stroke;
    stroke: #b81c26;
    stroke-width: 1.2;
}
.top_price_ptn_1 .num_web{
    left: calc(var(--u) * 760);
    top: calc(var(--u) * 290);
    width: calc(var(--u) * 530);
    height: calc(var(--u) * 240);
}
.top_price_ptn_1 .unit{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
}
.top_price_ptn_1 .unit small{
    font-size: .43em;
    font-weight: 700;
    margin-bottom: .08em;
}
.top_price_ptn_1 .unit_web{
    left: calc(var(--u) * 1291);
    top: calc(var(--u) * 346);
    font-size: calc(var(--u) * 81);
}
.top_price_ptn_1 .case{
    z-index: 1;
    left: calc(var(--u) * 79);
    top: calc(var(--u) * 541);
    display: flex;
    align-items: center;
    font-size: calc(var(--u) * 26);
    font-weight: 500;
}
.top_price_ptn_1 .case i{
    display: block;
    width: calc(var(--u) * 31);
    height: calc(var(--u) * 32);
    margin-right: calc(var(--u) * 13);
    background: #f5e100;
}
.top_price_ptn_1 .car{
    left: calc(var(--u) * 78);
    top: calc(var(--u) * 617);
    width: calc(var(--u) * 557);
    height: auto;
}
.top_price_ptn_1 .legal_label{
    left: calc(var(--u) * 686);
    top: calc(var(--u) * 640);
    font-size: calc(var(--u) * 47.5);
    font-weight: 700;
    display: flex;
    align-items: flex-end;
}
.top_price_ptn_1 .legal_label small{
    font-size: .5em;
    font-weight: 700;
    margin-left: .25em;
    margin-bottom: .1em;
}
.top_price_ptn_1 .legal_value{
    right: calc(var(--u) * 81);
    top: calc(var(--u) * 617.6);
    font-family: "Inter Tight", "Noto Sans JP", sans-serif;
    font-size: calc(var(--u) * 73.7);
    font-weight: 400;
    display: flex;
    align-items: baseline;
}
.top_price_ptn_1 .legal_value small{
    font-family: "Noto Sans JP", sans-serif;
    font-size: .47em;
    font-weight: 700;
    margin-left: .35em;
}
.top_price_ptn_1 .line{
    left: calc(var(--u) * 664);
    top: calc(var(--u) * 702);
    width: calc(var(--u) * 712);
    height: calc(var(--u) * 2);
    background: linear-gradient(#c3cbce 50%, #d7dfe0 50%);
}
.top_price_ptn_1 .legal_note{
    left: calc(var(--u) * 688);
    top: calc(var(--u) * 714);
    font-size: calc(var(--u) * 25.1);
    font-weight: 500;
}
.top_price_ptn_1 .total_label{
    letter-spacing: calc(var(--u) * 4);
    left: calc(var(--u) * 692);
    top: calc(var(--u) * 830);
    font-size: calc(var(--u) * 64);
    font-weight: 700;
}
.top_price_ptn_1 .num_total{
    left: calc(var(--u) * 850);
    top: calc(var(--u) * 770);
    width: calc(var(--u) * 450);
    height: calc(var(--u) * 180);
}
.top_price_ptn_1 .unit_total{
    left: calc(var(--u) * 1304);
    top: calc(var(--u) * 803);
    font-size: calc(var(--u) * 62.8);
}
.top_price_ptn_1 .btn{
    left: calc(var(--u) * 816);
    top: calc(var(--u) * 954);
    width: calc(var(--u) * 552);
    height: calc(var(--u) * 97);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #006cc3;
    border-radius: calc(var(--u) * 5);
    color: #ffe600;
    font-size: calc(var(--u) * 40);
    font-weight: 700;
    letter-spacing: calc(var(--u) * 1);
}
.top_price_ptn_1 .btn svg{
    width: .78em;
    height: .62em;
    margin-left: .35em;
}
main .price .price_html{
    background: #f4f4f4;
    padding: 40px 0;
}
@media (max-width: 600px){
    main .price .price_html{
        padding: 40px 0 0;
    }
}
.top_price_ptn_1 .tokuten{
    left: calc(var(--u) * 108);
    top: calc(var(--u) * 999);
    font-size: calc(var(--u) * 47);
    letter-spacing: calc(var(--u) * -5.2);
}

/* スマホ（元画像 749×1549） */
@media (max-width: 600px){
    .top_price_ptn_1{
        width: 90%;
    }
    .top_price_ptn_1 .box{
        --u: calc(100cqw / 749);
        aspect-ratio: 749 / 1549;
    }
    .top_price_ptn_1 .bar{ left: calc(var(--u) * 39); top: calc(var(--u) * 86); width: calc(var(--u) * 670); height: calc(var(--u) * 66); padding-left: calc(var(--u) * 22); font-size: calc(var(--u) * 40); }
    .top_price_ptn_1 .komikomi{ top: calc(var(--u) * 203); font-size: calc(var(--u) * 34); letter-spacing: calc(var(--u) * -3.35); }
    .top_price_ptn_1 .kihon{ left: calc(var(--u) * 84); top: calc(var(--u) * 287.4); font-size: calc(var(--u) * 71.7); letter-spacing: calc(var(--u) * -0.25); }
    .top_price_ptn_1 .ichiritsu{ left: calc(var(--u) * 85); top: calc(var(--u) * 394); font-size: calc(var(--u) * 20); }
    .top_price_ptn_1 .num_web{ left: calc(var(--u) * 56); top: calc(var(--u) * 436); width: calc(var(--u) * 410); height: calc(var(--u) * 185); }
    .top_price_ptn_1 .unit_web{ left: calc(var(--u) * 470); top: calc(var(--u) * 470); font-size: calc(var(--u) * 60); }
    .top_price_ptn_1 .case{ left: calc(var(--u) * 89); top: calc(var(--u) * 640); font-size: calc(var(--u) * 24); }
    .top_price_ptn_1 .case i{ width: calc(var(--u) * 29); height: calc(var(--u) * 29); margin-right: calc(var(--u) * 11); }
    .top_price_ptn_1 .car{ left: calc(var(--u) * 251.1); top: calc(var(--u) * 642.5); width: calc(var(--u) * 450.5); }
    .top_price_ptn_1 .legal_label{ left: calc(var(--u) * 62); top: calc(var(--u) * 962); font-size: calc(var(--u) * 46); }
    .top_price_ptn_1 .legal_value{ right: calc(var(--u) * 60); top: calc(var(--u) * 943.4); font-size: calc(var(--u) * 66.8); }
    .top_price_ptn_1 .line{ left: calc(var(--u) * 40); top: calc(var(--u) * 1020); width: calc(var(--u) * 670); background: #b5c3cb; }
    .top_price_ptn_1 .legal_note{ left: calc(var(--u) * 64); top: calc(var(--u) * 1032); font-size: calc(var(--u) * 23); }
    .top_price_ptn_1 .total_label{ left: calc(var(--u) * 66); top: calc(var(--u) * 1122); font-size: calc(var(--u) * 59.9); letter-spacing: 0; }
    .top_price_ptn_1 .num_total{ left: calc(var(--u) * 247); top: calc(var(--u) * 1078); width: calc(var(--u) * 390); height: calc(var(--u) * 155); }
    .top_price_ptn_1 .unit_total{ left: calc(var(--u) * 633); top: calc(var(--u) * 1106); font-size: calc(var(--u) * 52); }
    .top_price_ptn_1 .tokuten{ left: calc(var(--u) * -8); width: 100%; text-align: center; top: calc(var(--u) * 1240); font-size: calc(var(--u) * 50); letter-spacing: calc(var(--u) * -7.7); }
    .top_price_ptn_1 .btn{ left: calc(var(--u) * 81); top: calc(var(--u) * 1348); width: calc(var(--u) * 590); height: calc(var(--u) * 104); font-size: calc(var(--u) * 39.8); }
}
