@charset "UTF-8";
/* style.css の先頭に追加 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
/* ========== COMMON ========== */

/*
  変換ルール：
  元ファイルは 1rem = 10px（html { font-size: 62.5%; }）で計算されていたため、
  同じピクセル数を保ったまま 1rem = 16px（ブラウザ標準 100%）基準に変換しています。
  換算係数：旧rem値 × (10 ÷ 16 = 0.625) = 新rem値

  → html { font-size: 62.5%; } は不要になるため削除しています。
  → 元々pxや%で指定されていた値は変更していません。
*/

.pp-modal__body {
    background: #F0F6FF;
}

span.title-eyebrow {
    font-family: Poppins, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 150%;
    font-size: 1.125rem; /* 元: 1.8rem (18px) */
    font-weight: 700;
    letter-spacing: 0.02rem; /* 元: 0.032rem (0.32px) */
    -webkit-text-fill-color: transparent;
    background: linear-gradient(107deg, rgb(0, 133, 205) 0%, rgb(8, 102, 208) 100%) text;
}

span.title-eyebrow::before {
    content: "・";
    -webkit-text-fill-color: transparent;
    background: linear-gradient(107deg, rgb(0, 133, 205) 0%, rgb(8, 102, 208) 100%) text;
}

h2.title-heading {
    color: #000F1B;
    font-size: 2.5rem; /* 元: 4rem (40px) */
    font-weight: 600;
    letter-spacing: 0.05rem; /* 元: 0.08rem (0.8px) */
    text-align: left;
    margin-top: 1rem; /* 元: 1.6rem (16px) */
    line-height: 150%;
}

.section-intro {
    margin-top: 3.5rem; /* 元: 5.6rem (56px) */
    color: var(--black, #000F1B);
    font-size: 1.125rem; /* 元: 1.8rem (18px) */
    font-weight: 300;
    line-height: 150%;
    letter-spacing: 0.02rem; /* 元: 0.032rem (0.32px) */
}

.badge--outline {
    border: 1.5px solid #098BDE;
    color: #0078c8;
    background: #fff;
    padding: 0.03125rem 0.5rem; /* 元: 0.05rem 0.8rem (0.5px 8px) */
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    font-weight: 400;
}

.product-grid {
    margin-top: 2.5rem; /* 元: 4rem (40px) */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem; /* 元: 2.4rem (24px) */
}

.product-card {
    padding: 1rem; /* 元: 1.6rem (16px) */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 元: 1.2rem (12px) */
    flex: 1 0 0;
    background: #FFF;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.06);
}

.product-card__name {
    font-family: Poppins, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: rgb(4, 88, 181);
    font-size: 1.25rem; /* 元: 2rem (20px) */
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.025rem; /* 元: 0.04rem (0.4px) */
}

.product-card__img-wrap {
    width: 100%;
    background: #f4f8fc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2px;
}

.product-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag--type {
    border-radius: 0.25rem; /* 元: 0.4rem (4px) */
    background: #098BDE;
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.015rem; /* 元: 0.024rem (0.24px) */
    background: var(--main_sub1, #098BDE);
    padding: 0.125rem 0.5rem; /* 元: 0.2rem 0.8rem (2px 8px) */
    justify-content: center;
}

.product-card__flow {
    font-size: 0.875rem; /* 元: 1.4rem (14px) */
    color: #000F1B;
    font-weight: 300;
    line-height: 150%;
    letter-spacing: 0.0175rem; /* 元: 0.028rem (0.28px) */
    min-height: 3rem; /* 元: 4.8rem (48px) */
}

a.product-card__link {
    color: #0078c8;
    font-weight: 600;
    display: block;
    text-align: right;
    font-size: 1rem; /* 元: 1.6rem (16px) */
    text-decoration: none;
}

a.product-card__link::after {
    position: relative;
    top: 0.3125rem; /* 元: 0.5rem (5px) */
    content: "";
    background: url("../images/arrow-right-blue.svg") no-repeat center;
    width: 1.5rem; /* 元: 2.4rem (24px) */
    height: 1.5rem; /* 元: 2.4rem (24px) */
    display: inline-block;
}

@media (max-width: 768px) {
    .product-card__flow, .product-card__link, .step-card-desc span {
        font-size: 1rem; /* 元: 1.6rem (16px) */
    }
    .section-intro {
        font-size: 1.125rem; /* 元: 1.8rem (18px) */
    }

    h2.title-heading {
    font-size: 28px;
}
    span.title-eyebrow {
        font-size: 14.4px;
}
    .product-card__name {
        font-size: 16px;
    }

    .product-card__flow,
    a.product-card__link {
        font-size: 12.8px;
    }

    a.product-card__link::after {
        width: 19.2px;
        height: 19.2px;
    }
}

@media (max-width: 560px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}