/* ==========================================
   5ステッププロセス：クリーンシェブロンデザイン
   参考：LPデザイン決定までの手順（3枚目）
   上段：淡色シェブロン（流れ）+ 下段：白背景（説明）
   ========================================== */

/* ========== セクション全体 ========== */
.steps--5 {
    background: var(--bg-light, #F6FAFF);
    padding: 80px 0;
}

.steps__head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 56px;
    padding: 0 20px;
}

.steps__head h2 {
    font-size: 36px;
    font-weight: 700;
    color: #07193B;
    margin: 0 0 16px;
    line-height: 1.3;
}

.steps__head p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ========== ステップコンテナ（5カラム） ========== */
.steps__grid--5 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* ========== 各ステップカード ========== */
.step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* 旧スタイルをリセット */
.card__step-marker,
.loop-marker {
    display: none;
}

/* ========== 上段：淡色シェブロン（矢印形の帯） ========== */
.card__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    padding: 16px 24px 16px 32px;
    margin: 0;
    overflow: visible;
    /* シェブロン形状 */
    clip-path: polygon(
        0 0,                      /* 左上 */
        calc(100% - 30px) 0,     /* 右上（矢印前） */
        100% 50%,                /* 右端の尖り */
        calc(100% - 30px) 100%,  /* 右下（矢印後） */
        0 100%                   /* 左下 */
    );
}

/* 2番目以降のステップ：左側に切り欠き */
.step-card:not(:first-child) .card__head {
    clip-path: polygon(
        30px 0,                  /* 左上（切り欠き後） */
        calc(100% - 30px) 0,
        100% 50%,
        calc(100% - 30px) 100%,
        30px 100%,               /* 左下（切り欠き後） */
        0 50%                    /* 左端の凹み */
    );
    margin-left: -30px;
}

/* 最後のステップ：右端も直線に */
.step-card:last-child .card__head {
    clip-path: polygon(
        30px 0,
        100% 0,
        100% 100%,
        30px 100%,
        0 50%
    );
}

/* ========== 淡色背景（低彩度・高明度） ========== */

/* STEP 01 - ライトブルー（淡く・グレイッシュ） */
.step-card[data-step="1"] .card__head {
    background: #C8D9E8;
}

/* STEP 02 - セージグリーン（淡く・グレイッシュ） */
.step-card[data-step="2"] .card__head {
    background: #B8D4C5;
}

/* STEP 03 - ペールイエロー（ベージュ寄り） */
.step-card[data-step="3"] .card__head {
    background: #E8DCC0;
}

/* STEP 04 - ライトグリーン（淡く・グレイッシュ） */
.step-card[data-step="4"] .card__head {
    background: #C5D8C9;
}

/* STEP 05 - グレイッシュパープル（淡く） */
.step-card[data-step="5"] .card__head {
    background: #D4C8DD;
}

/* ========== バッジ（Step番号） ========== */
.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

.badge__icon {
    display: none;
}

.badge__step {
    font-size: 11px;
    font-weight: 600;
    color: #5A6B7C;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========== タイトル（上段内） ========== */
.card__title {
    font-size: 15px;
    font-weight: 700;
    color: #2D3E50;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    /* 最大2行 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* ループアイコン非表示 */
.card__title .loop-badge {
    display: none;
}

/* ========== 下段：白背景の説明エリア ========== */
.card__sub {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: none;
    padding: 20px;
    /* 完全固定高さ */
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    /* 最大3行 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* STEP 05の強調スタイル（微調整） */
.card--accent .card__head {
    background: #D4C8DD;
}

.card--accent .card__sub {
    border-color: #D4C8DD;
}

/* ========== 下部メッセージ ========== */
.steps__note {
    text-align: center;
    margin-top: 48px;
    padding: 20px 32px;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF5D9 100%);
    border: 1px solid #FFE3A0;
    border-radius: 8px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
}

/* ========================================== 
   レスポンシブデザイン
   ========================================== */

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    .steps__grid--5 {
        flex-wrap: wrap;
        gap: 0 0;
    }

    .step-card {
        flex: 1 1 calc(50% - 0px);
        min-width: 250px;
    }

    .step-card:not(:first-child) .card__head {
        margin-left: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .card__head {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
        height: 90px;
        min-height: 90px;
        max-height: 90px;
    }

    .card__sub {
        height: 100px;
        min-height: 100px;
        max-height: 100px;
        padding: 16px;
        font-size: 12px;
    }

    .steps__head h2 {
        font-size: 30px;
    }
}

/* モバイル（768px以下） */
@media (max-width: 768px) {
    .steps--5 {
        padding: 60px 0;
    }

    .steps__grid--5 {
        flex-direction: column;
        gap: 16px;
        padding: 0 16px;
    }

    .step-card {
        flex: 1 1 100%;
    }

    .card__head {
        height: 80px;
        min-height: 80px;
        max-height: 80px;
        padding: 12px 20px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    }

    .badge__step {
        font-size: 10px;
    }

    .card__title {
        font-size: 14px;
    }

    .card__sub {
        height: 90px;
        min-height: 90px;
        max-height: 90px;
        padding: 16px;
        font-size: 12px;
        line-height: 1.6;
    }

    .steps__head {
        margin-bottom: 40px;
    }

    .steps__head h2 {
        font-size: 26px;
    }

    .steps__head p {
        font-size: 14px;
    }

    .steps__note {
        margin-top: 32px;
        padding: 16px 24px;
        font-size: 13px;
    }
}

/* 小型モバイル（480px以下） */
@media (max-width: 480px) {
    .steps__head h2 {
        font-size: 22px;
    }

    .card__head {
        height: 75px;
        min-height: 75px;
        max-height: 75px;
        padding: 10px 16px;
    }

    .card__title {
        font-size: 13px;
    }

    .card__sub {
        height: 85px;
        min-height: 85px;
        max-height: 85px;
        padding: 12px;
        font-size: 11px;
    }
}