@charset "UTF-8";
/* ==========================================================================
   「雨の日でも即日対応可能！」
   旧 pc-no-extra-cost.png の位置に置いているテキストバナー（クラス名は旧名のまま）
   パーツ:  __icon（傘） / __lead（前半） / __badge（マーカー付きの「即日対応」） / __tail（後半）
   上の「最安値に挑戦中！」バナーと同じ青・黄の配色に合わせた白地のカプセル
   ========================================================================== */

.nocost {
    display: flex;
    align-items: center;
    gap: .55em;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto .6rem;
    padding: .45em 1.3em .45em .8em;
    border: 2px solid #1565c0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 0 #c9d8f5;
    color: #1e293b;
    font-size: clamp(14px, 3.6vw, 21px);
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.nocost__icon {
    flex: none;
    width: 1.5em;
    height: 1.5em;
}

/* 狭い画面では語句の途中ではなく「〜は」の後ろで折り返す */
.nocost__lead,
.nocost__badge,
.nocost__tail {
    display: inline-block;
    white-space: nowrap;
}

.nocost__badge {
    margin: 0 .15em;
    padding: 0 .1em;
    color: #eb6100;
    font-size: 1.25em;
    /* 下半分だけ黄色のマーカーを引く */
    background: linear-gradient(transparent 58%, #ffe46b 58%);
}

@media (max-width: 575.98px) {
    .nocost {
        padding: .4em 1em .4em .6em;
        border-radius: 14px;
    }
}