/* Service2 change & visit-flow block
   - Block A: 円形グラデーション要素
   - Block B: ご来店時の流れ（service-consulting-block のスタイルを流用）
   Breakpoint: PC 768px+ / SP 767px- */

.service2-change-block__inner--first {
    margin-bottom: var(--space-xl);
}

/* 円形グラデ群ラッパー: Block A 内でこの部分だけ padding を小さく */
.service2-change-block__circle-wrap {
    padding-inline: var(--content-inner-padding-inline);
    padding-block: 0;
    padding-top: var(--space-md);
}

.service2-change-block__circle-list {
    display: grid;
    gap: clamp(var(--space-xs), 2vw, var(--space-lg));
    margin-top: 0;
    justify-items: center;
    justify-content: center;
}

/* PC: 列幅を minmax で縮むようにし、はみ出し防止 */
.service2-change-block__circle-list--3 {
    grid-template-columns: repeat(3, minmax(0, 240px));
}

.service2-change-block__circle-list--4 {
    grid-template-columns: repeat(4, minmax(0, 240px));
}

/* 正円保持: width 100% + aspect-ratio。円形は border-radius に calc(infinity*1px)。セル幅いっぱいではみ出し防止 */
.service2-change-block__circle-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: calc(infinity * 1px);
    background: var(--gradient-hero-radial);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* 方式B: フォールバック（vw clamp）。コンテナクエリ未対応で効く */
.service2-change-block__circle-label {
    display: inline-block;
    color: var(--color-text-white);
    font-weight: 700;
    font-size: clamp(var(--fs-xs), 2.8vw, var(--fs-2xl));
    line-height: var(--lh-normal);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* 方式A: コンテナクエリ対応時は円幅に連動（主軸） */
@supports (container-type: inline-size) {
    .service2-change-block__circle-item {
        container-type: inline-size;
    }

    .service2-change-block__circle-label {
        font-size: clamp(var(--fs-xs), 10cqw, var(--fs-2xl));
    }
}

@media (max-width: 767px) {
    .service2-change-block__inner--first {
        margin-bottom: var(--space-lg);
        padding: 0 0 var(--space-3xl) 0;
        display: flow-root; /* 子の margin-top の相殺を防ぎ上マージンを確実に表示 */
    }

    /* Block A: 見出し・サブ見出しで元のpadding幅をmarginで再現 */
    .service2-change-block__inner--first .card-on-gradient__body {
        margin-inline: clamp(var(--space-sm), 10vw, var(--space-4xl));
        margin-top: var(--space-3xl);
    }

    /* 円形エリアは緩めのmarginで表示幅を広く */
    .service2-change-block__inner--first .service2-change-block__circle-wrap {
        margin-inline: var(--space-xs);
        padding-inline: 0;
    }

    .service2-change-block__circle-wrap {
        padding-top: var(--space-sm);
    }

    /* SP: 列幅を minmax で縮むようにし、はみ出し防止 */
    .service2-change-block__circle-list--3 {
        grid-template-columns: repeat(3, minmax(0, 100px));
    }

    .service2-change-block__circle-list--4 {
        grid-template-columns: repeat(2, minmax(0, 160px));
    }

    .service2-change-block__circle-item {
        padding: var(--space-sm);
    }
}