@charset "UTF-8";

/* =========================================================
   Forgot / Complete（メール送信完了画面）固有スタイル
   依存: forgot_common.css
   保存先: html/user_data/assets/css/forgot_complete.css
========================================================= */

/* 完了画面では「ご注文確認」と違ってフォームが無いので、
   ヒーローの下に少し余白を取って NEXT / SUPPORT を見せる */
.suite-forgot--complete .suite-forgot__header {
    margin-bottom: 24px;
}

/* メール送信先アドレスをやや強調 */
.suite-forgot__hero-meta--mail strong {
    color: var(--suite-accent-deep, #4f3820);
}

/* タイムラインっぽい次の手順表記 */
.suite-forgot__timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.suite-forgot__timeline li {
    position: relative;
    padding: 10px 12px 10px 36px;
    border-radius: 8px;
    background: var(--suite-bg-sub, #fbf8f4);
    color: var(--suite-text, #1c1815);
    font-size: 13px;
    line-height: 1.9;
    counter-increment: suite-forgot-step;
}

.suite-forgot__timeline {
    counter-reset: suite-forgot-step;
}

.suite-forgot__timeline li::before {
    content: counter(suite-forgot-step);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--suite-accent-deep, #4f3820);
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.suite-forgot__resend {
    margin: 0;
    padding: 0;
    color: var(--suite-text-sub, #5d5348);
    font-size: 13px;
    line-height: 1.9;
}

.suite-forgot__resend a {
    color: var(--suite-accent, #7a5a34);
    text-decoration: none;
    transition: color .2s ease;
}

.suite-forgot__resend a:hover {
    color: var(--suite-accent-deep, #4f3820);
    text-decoration: underline;
}