/* 料金ページ「お得な割引・特典」カード（元画像 851×575 をHTML化）。位置・大きさは元画像の画素×--u */
:is(#price_page, #relife_top_waribiki) .tokuten_card{
    container-type: inline-size;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .in{
    --u: calc(100cqw / 851);
    position: relative;
    aspect-ratio: 851 / 575;
    box-sizing: border-box;
    border: calc(var(--u) * 9) solid #ff7246;
    border-radius: calc(var(--u) * 10);
    background: #fffbe9;
    overflow: hidden;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .in *{
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1;
    letter-spacing: 0;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .in > *,
:is(#price_page, #relife_top_waribiki) .tokuten_card .ribbon > *{
    position: absolute;
}
/* 位置は枠の外側（元画像の左上）から数えるので、枠の太さぶん戻す */
:is(#price_page, #relife_top_waribiki) .tokuten_card .ribbon{
    left: calc(var(--u) * -9);
    top: calc(var(--u) * (134 - 9));
    width: calc(var(--u) * 851);
    height: calc(var(--u) * 143);
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .tail{
    top: calc(var(--u) * 61);
    width: calc(var(--u) * 140);
    height: calc(var(--u) * 83);
    background: #ff1c38;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .tail.l{
    left: calc(var(--u) * 40);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 23.6% 50%);
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .tail.r{
    left: calc(var(--u) * 671);
    clip-path: polygon(0 0, 100% 0, 76.4% 50%, 100% 100%, 0 100%);
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .band{
    left: calc(var(--u) * 113);
    top: 0;
    width: calc(var(--u) * 626);
    height: calc(var(--u) * 121);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff1c38;
    box-shadow: calc(var(--u) * -6) calc(var(--u) * 6) 0 #fff, calc(var(--u) * 6) calc(var(--u) * 6) 0 #fff;
    color: #fff;
    font-size: calc(var(--u) * 56);
    font-weight: 900;
    white-space: nowrap;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .body{
    left: calc(var(--u) * -9);
    width: calc(var(--u) * 851);
    text-align: center;
    color: #000;
    font-size: calc(var(--u) * 39.7);
    line-height: calc(var(--u) * 64);
    font-weight: 400;
    white-space: nowrap;
    margin-top: calc(var(--u) * -9);
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .line{
    left: calc(var(--u) * -9);
    width: calc(var(--u) * 851);
    text-align: center;
    color: #000;
    font-weight: 400;
    white-space: nowrap;
}
/* Web限定割引 */
:is(#price_page, #relife_top_waribiki) .tokuten_card .wtitle{
    left: calc(var(--u) * -9);
    top: calc(var(--u) * (54 - 9));
    width: calc(var(--u) * 851);
    height: calc(var(--u) * 140);
    overflow: visible;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .wtitle text{
    font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 97px;
    fill: #ffca1d;
    stroke: #006bc1;
    stroke-width: 16;
    stroke-linejoin: round;
    paint-order: stroke;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .marker{
    left: calc(var(--u) * (92 - 9));
    top: calc(var(--u) * (348 - 9));
    width: calc(var(--u) * 668);
    height: calc(var(--u) * 44);
    background: #ffca1d;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .amount{
    left: calc(var(--u) * -9);
    top: calc(var(--u) * -9);
    width: calc(var(--u) * 851);
    height: calc(var(--u) * 575);
    overflow: visible;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .amount text{
    font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
    font-weight: 900;
    fill: #ff1c38;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .note{
    left: calc(var(--u) * -9);
    top: calc(var(--u) * (426 - 9));
    width: calc(var(--u) * 851);
    text-align: center;
    color: #000;
    font-size: calc(var(--u) * 28.5);
    letter-spacing: calc(var(--u) * 3.1);
}

/* 「割引・特典はこちらから」ボタン（元画像 1396×352） */
#price_banner .price_banner_btn{
    display: block;
    container-type: inline-size;
    text-decoration: none;
}
#price_banner .price_banner_btn .in{
    --u: calc(100cqw / 1396);
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: baseline;
    aspect-ratio: 1396 / 352;
}
#price_banner .price_banner_btn .in::before{
    content: '';
    position: absolute;
    left: calc(var(--u) * 24);
    top: calc(var(--u) * 24);
    width: calc(var(--u) * 1324);
    height: calc(var(--u) * 280);
    background: #006bc1;
    border-radius: calc(var(--u) * 18);
    box-shadow: calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 22) rgba(0, 0, 0, .55);
}
#price_banner .price_banner_btn .icon{
    position: absolute;
    left: calc(var(--u) * 140);
    top: calc(var(--u) * 84);
    width: calc(var(--u) * 124);
    height: auto;
}
#price_banner .price_banner_btn .label{
    position: absolute;
    left: calc(var(--u) * 318);
    top: calc(var(--u) * 128);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(var(--u) * 80);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

/* トップ「最大割引」カード（元 top/waribiki.png 851×589）。Web限定割引のカードの題を青い四角にし、下を46px下げた形 */
:is(#price_page, #relife_top_waribiki) .tokuten_card.saidai .in{
    /* カードは575の高さで、元画像は下に14pxの透明な余白 */
    margin-bottom: calc(var(--u) * 14);
}
:is(#price_page, #relife_top_waribiki) .tokuten_card .sq{
    top: calc(var(--u) * (61 - 9));
    width: calc(var(--u) * 138);
    height: calc(var(--u) * 138);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #006bc1;
    color: #fff;
    font-size: calc(var(--u) * 84);
    font-weight: 900;
}
:is(#price_page, #relife_top_waribiki) .tokuten_card.saidai .marker{
    top: calc(var(--u) * (394 - 9));
}
:is(#price_page, #relife_top_waribiki) .tokuten_card.saidai .amount{
    height: calc(var(--u) * 589);
}
:is(#price_page, #relife_top_waribiki) .tokuten_card.saidai .note{
    top: calc(var(--u) * (472 - 9));
}

/* 題の後ろの小さい字（相模原「オイル交換半額(3 回分 )」） */
:is(#price_page, #relife_top_waribiki) .tokuten_card .band small{
    font-size: .63em;
    margin-left: .1em;
}

/* 特典の本文の赤い太字の行（太宰府「※『新宮店』限定特典」） */
:is(#price_page, #relife_top_waribiki) .tokuten_card .line.red{
    color: #f00;
    font-weight: 700;
}