@charset "UTF-8";

/* =========================================================
   Forgot / Password Reset / Complete 共通スタイル
   保存先: html/user_data/assets/css/forgot_common.css
   ─────────────────────────────────────────────────────────
   ・class 命名は .suite-forgot を共通ルートに使う
   ・reset.twig / index.twig / complete.twig どこからでも読み込める
========================================================= */

.suite-forgot {
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 24px 96px;
    color: var(--suite-text, #1c1815);
    background: var(--suite-bg, #ffffff);
    font-family:
        "Yu Gothic Medium",
        "游ゴシック Medium",
        YuGothic,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}

/* -------------------- パンくず -------------------- */
.suite-forgot .ec-topicpath {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    background: transparent;
}

.suite-forgot .ec-topicpath__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--suite-text-faint, #8b8176);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.suite-forgot .ec-topicpath__item a {
    color: var(--suite-text-sub, #5d5348);
    text-decoration: none;
    transition: color .2s ease;
}

.suite-forgot .ec-topicpath__item a:hover {
    color: var(--suite-accent, #7a5a34);
    text-decoration: none;
}

.suite-forgot .ec-topicpath__item--current {
    color: var(--suite-text, #1c1815);
    font-weight: 600;
}

.suite-forgot .ec-topicpath__divider {
    color: var(--suite-line-strong, #cdbfa9);
}

/* -------------------- ヘッダー -------------------- */
.suite-forgot__header {
    margin: 0 0 48px;
    text-align: center;
}

.suite-forgot__badge {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 14px;
    border: 1px solid rgba(122, 90, 52, .35);
    border-radius: 999px;
    color: var(--suite-accent, #7a5a34);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    background: #fffaf2;
}

.suite-forgot__title {
    margin: 0;
    color: var(--suite-text, #1c1815);
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        "YuMincho",
        serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.06em;
}

.suite-forgot__title::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, var(--suite-accent, #7a5a34), transparent);
}

.suite-forgot__subtitle {
    margin: 20px auto 0;
    max-width: 640px;
    color: var(--suite-text-sub, #5d5348);
    font-size: 14px;
    line-height: 2;
}

/* -------------------- ステップインジケータ -------------------- */
.suite-forgot__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    margin: 28px 0 56px;
    padding: 0;
    list-style: none;
    color: var(--suite-text-faint, #8b8176);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.suite-forgot__stepItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.suite-forgot__stepNum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--suite-line, #e7dfd2);
    color: var(--suite-text-faint, #8b8176);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 12px;
    font-weight: 600;
}

.suite-forgot__stepItem--active {
    color: var(--suite-text, #1c1815);
    font-weight: 700;
}

.suite-forgot__stepItem--active .suite-forgot__stepNum {
    background: var(--suite-accent-deep, #4f3820);
    border-color: var(--suite-accent-deep, #4f3820);
    color: #fff;
}

.suite-forgot__stepDivider {
    color: var(--suite-line-strong, #cdbfa9);
    font-size: 12px;
    letter-spacing: 0.1em;
}

/* -------------------- エラー -------------------- */
.suite-forgot__errors {
    margin: 0 0 32px;
    padding: 20px 22px;
    border: 1px solid #e8c9bf;
    border-radius: var(--suite-radius-md, 10px);
    background: #fdf6f3;
}

.suite-forgot__errors-title {
    margin: 0 0 8px;
    color: #a14a3a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.suite-forgot__errors-body {
    color: #a14a3a;
    font-size: 13px;
    line-height: 1.9;
}

.suite-forgot__errors-body ul {
    margin: 0;
    padding-left: 1.2em;
}

.suite-forgot__errors-line {
    margin: 0;
}

/* -------------------- フォーム全体 -------------------- */
.suite-forgot__form {
    display: grid;
    gap: 28px;
}

/* -------------------- セクション -------------------- */
.suite-forgot__section {
    overflow: hidden;
    border: 1px solid var(--suite-line, #e7dfd2);
    border-radius: var(--suite-radius-lg, 12px);
    background: #fff;
    box-shadow: var(--suite-shadow-xs, 0 4px 14px rgba(60, 40, 20, 0.04));
}

.suite-forgot__sectionHead {
    padding: 22px 26px 18px;
    background: linear-gradient(180deg, #fffdf9 0%, #fff 100%);
    border-bottom: 1px solid var(--suite-line, #e7dfd2);
}

.suite-forgot__sectionTitle {
    margin: 0;
    color: var(--suite-text, #1c1815);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

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

.suite-forgot__sectionBody {
    padding: 26px;
    display: grid;
    gap: 22px;
}

/* -------------------- 各フィールド -------------------- */
.suite-forgot__field {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px 24px;
    align-items: start;
}

.suite-forgot__label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    color: var(--suite-text, #1c1815);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.suite-forgot__labelText {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

.suite-forgot__required {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--suite-accent-deep, #4f3820);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
}

.suite-forgot__input {
    position: relative;
}

.suite-forgot__input input[type="text"],
.suite-forgot__input input[type="email"],
.suite-forgot__input input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--suite-line-strong, #cdbfa9);
    border-radius: 8px;
    background: #fff;
    color: var(--suite-text, #1c1815);
    font-size: 15px;
    line-height: 1.6;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    box-shadow: none;
    outline: none;
}

.suite-forgot__input input::placeholder {
    color: var(--suite-text-faint, #b1a89b);
    font-size: 13px;
}

.suite-forgot__input input[type="text"]:focus,
.suite-forgot__input input[type="email"]:focus,
.suite-forgot__input input[type="password"]:focus {
    border-color: var(--suite-accent-deep, #4f3820);
    background: #fffdf9;
    box-shadow: 0 0 0 3px rgba(122, 90, 52, 0.12);
}

.suite-forgot__input.is-error input,
.suite-forgot__input.is-error input:focus {
    border-color: #c75a4a;
    background: #fdf6f3;
    box-shadow: 0 0 0 3px rgba(199, 90, 74, 0.12);
}

.suite-forgot__input .ec-errorMessage,
.suite-forgot__input .ec-errorMessage--review,
.suite-forgot__input ul {
    margin: 8px 0 0;
    padding-left: 1.2em;
    color: #c75a4a;
    font-size: 12px;
    line-height: 1.8;
}

/* -------------------- ヒント -------------------- */
.suite-forgot__hints {
    margin: 6px 0 0;
    padding: 16px 20px;
    list-style: disc;
    list-style-position: inside;
    border: 1px dashed var(--suite-line, #e7dfd2);
    border-radius: 8px;
    background: var(--suite-bg-sub, #fbf8f4);
    color: var(--suite-text-sub, #5d5348);
    font-size: 12px;
    line-height: 1.9;
}

.suite-forgot__hints li + li {
    margin-top: 2px;
}

/* -------------------- アクション -------------------- */
.suite-forgot__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}

.suite-forgot__submit,
.suite-forgot__back {
    width: 100%;
    min-height: 54px;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.suite-forgot__submit.is-loading {
    opacity: .7;
    cursor: progress;
}

/* -------------------- 注意書き -------------------- */
.suite-forgot__note {
    margin: 8px 0 0;
    color: var(--suite-text-faint, #8b8176);
    font-size: 12px;
    line-height: 2;
    text-align: center;
}

/* -------------------- ヘルプリンク -------------------- */
.suite-forgot__help {
    margin-top: 32px;
    padding: 24px 26px;
    border: 1px solid var(--suite-line, #e7dfd2);
    border-radius: var(--suite-radius-md, 10px);
    background: var(--suite-bg-sub, #fbf8f4);
}

.suite-forgot__help-title {
    margin: 0 0 10px;
    color: var(--suite-text, #1c1815);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.suite-forgot__help-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.suite-forgot__help-list li {
    color: var(--suite-text-sub, #5d5348);
    font-size: 13px;
    line-height: 1.9;
}

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

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

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width: 767px) {
    .suite-forgot {
        padding: 40px 16px 72px;
    }

    .suite-forgot__header {
        margin-bottom: 36px;
    }

    .suite-forgot__steps {
        margin: 20px 0 40px;
    }

    .suite-forgot__sectionHead {
        padding: 18px 18px 14px;
    }

    .suite-forgot__sectionBody {
        padding: 20px 18px;
        gap: 18px;
    }

    .suite-forgot__field {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .suite-forgot__label {
        padding-top: 0;
    }

    .suite-forgot__actions {
        grid-template-columns: 1fr;
    }

    .suite-forgot__help {
        padding: 20px 18px;
    }
}

@media (max-width: 480px) {
    .suite-forgot__title {
        font-size: 24px;
    }

    .suite-forgot__subtitle {
        font-size: 13px;
    }
}


/* =========================================================
   完了系（complete / reset_complete などで共通利用）
========================================================= */

/* ヒーロー */
.suite-forgot__hero {
    position: relative;
    margin: 0 0 32px;
    padding: 56px 32px 48px;
    border: 1px solid var(--suite-line, #e7dfd2);
    border-radius: var(--suite-radius-lg, 12px);
    background:
        radial-gradient(120% 80% at 50% 0%, #fffaf2 0%, #ffffff 60%) ,
        #ffffff;
    box-shadow: var(--suite-shadow-sm, 0 10px 30px rgba(60, 40, 20, 0.06));
    text-align: center;
    overflow: hidden;
}

.suite-forgot__hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--suite-accent, #7a5a34), transparent);
}

/* 完了マーク（チェック・メール・ロックなど） */
.suite-forgot__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--suite-accent-deep, #4f3820) 0%, var(--suite-accent, #7a5a34) 100%);
    color: #fff;
    box-shadow: 0 18px 36px rgba(79, 56, 32, 0.18);
}

.suite-forgot__mark svg {
    width: 38px;
    height: 38px;
}

.suite-forgot__hero-title {
    margin: 0;
    color: var(--suite-text, #1c1815);
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        "YuMincho",
        serif;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
}

.suite-forgot__hero-lead {
    margin: 18px auto 0;
    max-width: 640px;
    color: var(--suite-text-sub, #5d5348);
    font-size: 14px;
    line-height: 2;
}

.suite-forgot__hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 0;
    padding: 10px 18px;
    border: 1px solid rgba(122, 90, 52, 0.22);
    border-radius: 999px;
    background: #fffaf2;
    color: var(--suite-accent-deep, #4f3820);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.suite-forgot__hero-meta strong {
    font-weight: 700;
    word-break: break-all;
}

/* インフォカード（NEXT / SUPPORT） */
.suite-forgot__infoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 32px 0;
}

.suite-forgot__infoCard {
    padding: 24px 24px;
    border: 1px solid var(--suite-line, #e7dfd2);
    border-radius: var(--suite-radius-md, 10px);
    background: #fff;
    box-shadow: var(--suite-shadow-xs, 0 4px 14px rgba(60, 40, 20, 0.04));
}

.suite-forgot__infoLabel {
    display: inline-block;
    margin: 0 0 10px;
    color: var(--suite-accent, #7a5a34);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.suite-forgot__infoTitle {
    margin: 0 0 10px;
    color: var(--suite-text, #1c1815);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

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

.suite-forgot__infoList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.suite-forgot__infoList li {
    color: var(--suite-text-sub, #5d5348);
    font-size: 13px;
    line-height: 1.95;
}

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

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

/* CTA */
.suite-forgot__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}

.suite-forgot__cta .suite-btn {
    width: 100%;
    min-height: 54px;
    font-size: 14px;
    letter-spacing: 0.1em;
}

/* レスポンシブ補正 */
@media (max-width: 767px) {
    .suite-forgot__hero {
        padding: 44px 20px 36px;
    }

    .suite-forgot__mark {
        width: 76px;
        height: 76px;
    }

    .suite-forgot__mark svg {
        width: 34px;
        height: 34px;
    }

    .suite-forgot__hero-lead {
        font-size: 13px;
        line-height: 1.95;
    }

    .suite-forgot__hero-meta {
        padding: 8px 14px;
        font-size: 12px;
    }

    .suite-forgot__infoGrid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 24px 0;
    }

    .suite-forgot__infoCard {
        padding: 20px;
    }

    .suite-forgot__cta {
        grid-template-columns: 1fr;
    }
}