@charset "UTF-8";
/* ==========================================
   マイページ下層共通スタイル
   ファイル: web/css/pages/mypage.css
   対象: frontend/mypage/ 配下の全ページ
   レイアウト: MASEグリッド標準（_e=サイドバー左, _f=コンテンツ右）
   ========================================== */

/* ==========================================
   サイドバー: _embed_myMenu モダン化
   HTML構造は変更せず、CSSのみで視覚を変更
   ========================================== */
.e-myMenu.u-sideMenu {
    background: var(--c-white);
    padding: 0;
    margin: 1em 0;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    font-family: var(--f-sans);
    width: auto;
    min-width: 220px;
    flex-shrink: 0;
}

/* A076-A080: _sideMenu（セクションミニナビ）を非表示
   メインの e-myMenu でカレントハイライトするため不要 */
._sideMenu.u-sideMenu {
    display: none;
}

/* A076-A080: mase.css の order:-3 による current 項目の最上段移動を防ぐ
   e-myMenu は固定順序で表示し、カレントはハイライトのみ */
.e-myMenu.u-sideMenu .current {
    order: 0;
}

/* A042: マイページ設定変更のスタイル崩れ修正
   _e カラムに min-width を設定してメニューが潰れないよう確保
   A076-A080: マイメニューを含む全ページに適用範囲を拡張 */
._mypage ._e,
._sale ._e,
._purchase ._e,
._area ._e,
._shipping ._e,
._blog._blogmanage ._e,
._stp._productmanage ._e,
._earnings ._e,
._config ._e {
    min-width: 220px;
}

/* トップレベルリンク（マイページ） */
.e-myMenu.u-sideMenu > a {
    display: block;
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.e-myMenu.u-sideMenu > a:hover {
    background: #fafafa;
    color: var(--c-main);
}
.e-myMenu.u-sideMenu > a:hover::before {
    color: #ffffff;
}
.e-myMenu.u-sideMenu > a.current {
    background: #fffbf5;
    color: var(--c-main);
    font-weight: var(--fw-bold);
    border-left: 3px solid var(--c-main);
}

/* アコーディオン: opener summary */
.e-myMenu.u-sideMenu > details.u-accordion > .u-openCloser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openCloser:hover {
    background: #fafafa;
}
/* details ネイティブマーカー非表示 */
.e-myMenu.u-sideMenu summary.u-openCloser {
    list-style: none;
}
.e-myMenu.u-sideMenu summary.u-openCloser::-webkit-details-marker {
    display: none;
}
/* a要素アイコン・テキスト間スペース (mase.css の ::before は margin を持たないため) */
.e-myMenu.u-sideMenu a::before {
    margin-right: 0.5rem;
}
/* summary アイコン: mase.css の :where(a, label)::before が summary に効かないため代替 */
.e-myMenu.u-sideMenu summary.u-openCloser::before {
    font-family: "FontAwesome solid";
    content: "\f578"; /* デフォルトアイコン */
    color: var(--color-main);
    width: 1.5em;
    text-align: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.e-myMenu.u-sideMenu summary.u-openCloser > span {
    flex: 1;
}
/* クラス別アイコン (mase.css label.* → summary.* に対応) */
.e-myMenu summary.u-openCloser.account::before      { content: "\f3e0"; }
.e-myMenu summary.u-openCloser.stc::before          { content: "\f0b1"; }
.e-myMenu summary.u-openCloser.str::before          { content: "\f274"; }
.e-myMenu summary.u-openCloser.stp::before          { content: "\f291"; }
.e-myMenu summary.u-openCloser.config::before       { content: "\f013"; }
.e-myMenu summary.u-openCloser.blog::before         { content: "\f31c"; }
.e-myMenu summary.u-openCloser.community::before    { content: "\f0c0"; }
.e-myMenu summary.u-openCloser.event::before        { content: "\f784"; }
.e-myMenu summary.u-openCloser.knowledge::before    { content: "\e4e3"; }
.e-myMenu summary.u-openCloser.earnings::before     { content: "\f53c"; }
.e-myMenu summary.u-openCloser.sale::before         { content: "\f46c"; }
.e-myMenu summary.u-openCloser.add::before          { content: "\f055"; }
.e-myMenu summary.u-openCloser.favoriteList::before { content: "\f004"; }
.e-myMenu summary.u-openCloser.appliedEntryList::before { content: "\f573"; }
/* アコーディオン矢印 */
.e-myMenu.u-sideMenu > details.u-accordion > .u-openCloser::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--c-text-secondary);
    transition: transform 0.3s;
}
.e-myMenu.u-sideMenu > details.u-accordion[open] > .u-openCloser::after {
    transform: rotate(180deg);
}

/* アコーディオン: 開閉コンテンツ */
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose {
    position: static;  /* mase.css の relative を上書き */
    animation: none;   /* mase.css の open animation を上書き */
    background: #fafafa;
    /* display/opacity は mase.css の display:none に委ねる（閉じた状態） */
}
.e-myMenu.u-sideMenu > details.u-accordion[open] > .u-openClose {
    display: block;
    opacity: 1;
    animation: e-sidenav-open 0.3s ease;
}
@keyframes e-sidenav-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* アコーディオン内のリンク */
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose a {
    display: block;
    padding: 0.6rem 1.2rem 0.6rem 2rem;
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
    cursor: pointer;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose a:hover {
    background: #f5f5f5;
    color: var(--c-main);
    padding-left: 2.3rem;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose a:hover::before {
    color: #ffffff;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose a.current {
    background: #fffbf5;
    color: var(--c-main);
    font-weight: var(--fw-bold);
    border-left: 3px solid var(--c-main);
}

/* ネストされたアコーディオン */
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose .u-openCloser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.2rem 0.6rem 2rem;
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    color: var(--c-text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    position: relative;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose .u-openCloser::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--c-text-muted);
    transition: transform 0.3s;
}
.e-myMenu.u-sideMenu > details > .u-openClose details.u-accordion[open] > .u-openCloser::after {
    transform: rotate(180deg);
}
.e-myMenu.u-sideMenu > details > .u-openClose details.u-accordion > .u-openClose {
    position: static;
    animation: none;
}
.e-myMenu.u-sideMenu > details > .u-openClose details.u-accordion[open] > .u-openClose {
    display: block;
    opacity: 1;
    animation: e-sidenav-open 0.3s ease;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose .u-openClose a {
    padding-left: 3rem;
}
.e-myMenu.u-sideMenu > details.u-accordion > .u-openClose .u-openClose a:hover {
    padding-left: 3.3rem;
}

/* ==========================================
   サイドバー: _embed_user カード
   ========================================== */
/* A076-A080: マイメニューを含む全ページでユーザーカードスタイルを適用 */
._mypage ._e .e-user,
._knowledgemanage ._e .e-user,
._sale ._e .e-user,
._purchase ._e .e-user,
._area ._e .e-user,
._shipping ._e .e-user,
._blog._blogmanage ._e .e-user,
._stp._productmanage ._e .e-user,
._earnings ._e .e-user,
._config ._e .e-user {
    background: var(--c-white);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    text-align: center;
}

/* ==========================================
   マイページ設定変更: コンテンツ幅の修正
   _config ページに m クラスが付与されているため
   max-width が 1000px に縮小される問題を修正。
   通常のマイページと同じ 1200px 幅に統一する。
   ========================================== */
@media (min-width: 1201px) {
    ._z._mypage._config :where(._c, ._i) {
        width: calc((100dvw - 1200px) / 2);
    }
}

/* ==========================================
   解約ページ: 解約手順ガイド (.e-cancelGuide)
   ._mypage._config._withdraw
   ========================================== */
._mypage._config._withdraw .e-cancelGuide {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-card);
}

._mypage._config._withdraw .e-cancelGuide__lead {
    line-height: 1.8;
    font-size: 0.95rem;
    color: var(--c-text);
}

/* 申請入力内容ブロック */
._mypage._config._withdraw .e-cancelGuide__block {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-left: 3px solid var(--c-main);
    border-radius: 0 6px 6px 0;
    padding: 1.25rem 1.5rem;
}

._mypage._config._withdraw .e-cancelGuide__blockTitle {
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

._mypage._config._withdraw .e-cancelGuide__blockTitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0c9";
    font-size: 0.85em;
    color: var(--c-main);
}

._mypage._config._withdraw .e-cancelGuide__list {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    counter-reset: cancel-step;
}

._mypage._config._withdraw .e-cancelGuide__list li {
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--c-text);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    counter-increment: cancel-step;
}

._mypage._config._withdraw .e-cancelGuide__list li::before {
    content: counter(cancel-step);
    background: #888;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.2em;
}

/* 返却/買取 オプションカード */
._mypage._config._withdraw .e-cancelGuide__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

._mypage._config._withdraw .e-cancelGuide__option {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--shadow-card);
}

._mypage._config._withdraw .e-cancelGuide__optionTitle {
    font-size: 0.9rem;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

._mypage._config._withdraw .e-cancelGuide__option--return .e-cancelGuide__optionTitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f4d3";
    color: var(--c-main);
    font-size: 0.95em;
}

._mypage._config._withdraw .e-cancelGuide__option--purchase .e-cancelGuide__optionTitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d6";
    color: var(--c-accent);
    font-size: 0.95em;
}

._mypage._config._withdraw .e-cancelGuide__option p {
    font-size: 0.875rem;
    color: var(--c-text-secondary);
    line-height: 1.7;
}

._mypage._config._withdraw .e-cancelGuide__option .u-notice {
    font-size: 0.8rem;
    line-height: 1.6;
    padding: 0;
}

@media (max-width: 840px) {
    ._mypage._config._withdraw .e-cancelGuide__options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    ._mypage._config._withdraw .e-cancelGuide {
        padding: 1.25rem 1.2rem;
    }
}

/* 解約申請CTAエリア */
._mypage._config._withdraw .e-cancelCta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    text-align: center;
    margin-top: 0.5rem;
}

._mypage._config._withdraw .e-cancelCta__desc {
    font-size: 0.9rem;
    color: var(--c-text-secondary);
    line-height: 1.7;
}

._mypage._config._withdraw .e-cancelCta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 4px;
    min-width: 220px;
}

._mypage._config._withdraw .e-cancelCta__btn::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f35d";
    font-size: 0.85em;
}

._mypage._config._withdraw .e-cancelCta__note {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: -0.25rem;
}

._knowledgemanage._add .e-disasterExample {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid #cfe1ef;
    border-radius: 6px;
    background: #f4f9fd;
}

._knowledgemanage._add .e-disasterExample__title {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    font-weight: var(--fw-bold);
    color: var(--c-main);
}

._knowledgemanage._add .e-disasterExample__body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--c-text-secondary);
}

._knowledgemanage .e-disasterCompletion {
    margin: 1rem 0 1.25rem;
    padding: 1.25rem;
    border: 1px solid #e4e8ec;
    border-radius: 8px;
    background: #fafbfd;
    display: grid;
    gap: 0.85rem;
}

._knowledgemanage .e-disasterCompletion__lead {
    margin: 0;
    line-height: 1.9;
    color: var(--c-text);
}

._knowledgemanage .e-disasterCompletion__body {
    margin: 0;
    line-height: 1.85;
    color: var(--c-text);
}

._knowledgemanage .e-disasterCompletion__note {
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 6px;
    background: #f5f7fa;
    line-height: 1.8;
    font-size: 0.9rem;
    color: var(--c-text-secondary);
}

@media (max-width: 600px) {
    ._knowledgemanage._add .e-disasterExample {
        padding: 0.9rem;
    }

    ._knowledgemanage .e-disasterCompletion {
        padding: 1rem;
    }
}