@charset "UTF-8";
/* ==========================================================================
   「各種クレジットカード対応」カード
   旧 pc-creditcard-list.png のテキスト化（ブランドロゴのみ画像）
   パーツ:  __title（見出し） / __brands（ロゴ列） / __brand（各ブランド）
   直下の「WEB割引実施中！」バナーを指す吹き出しのしっぽは ::after で描画
   ========================================================================== */

.cardlist {
    position: relative;
    max-width: 401px;
    /* 下の余白はしっぽ（約14px）＋バナーとの間隔。
       次要素の margin-top(16px) と相殺されるので、それより大きい値にする */
    margin: 0 auto 24px;
    padding: 16px 12px 26px;
    border: 2px solid #000;
    border-radius: 7px;
    background: #fff;
    text-align: center;
}

/* 吹き出しのしっぽ：45度回転させた正方形の右下2辺だけに枠線を引く。
   白の塗りがカード下辺の枠線を覆うので、継ぎ目なく三角形になる */
.cardlist::after {
    content: "";
    position: absolute;
    left: 50%;
    /* 正方形の中心がカード下辺の枠線上に来る位置 */
    bottom: -12px;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background: #fff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 575.98px) {
    .cardlist {
        margin-bottom: 20px;
    }

    .cardlist::after {
        bottom: -10px;
        width: 16px;
        height: 16px;
    }
}

.cardlist__title {
    margin: 0 0 16px;
    color: #000;
    font-size: clamp(12px, 3.6vw, 14px);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
}

/* ロゴは em 指定なので、この font-size を変えると列全体が等倍で伸縮する */
.cardlist__brands {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6em 1.43em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(11px, 3.4vw, 14px);
}

.cardlist__brand {
    display: flex;
    align-items: center;
}

.cardlist__brand img {
    display: block;
    width: 100%;
    height: auto;
}

/* 元画像での実寸（px）を 14px 基準の em に換算 */
.cardlist__brand--visa {
    width: 4.64em;
}

.cardlist__brand--mastercard {
    width: 3.29em;
}

.cardlist__brand--jcb {
    width: 3.29em;
}

.cardlist__brand--amex {
    width: 2.57em;
}

.cardlist__brand--diners {
    width: 3.71em;
}