/* MyPage User Common Styles */
/* Disable menuFixed completely - 右ナビをスクロールさせない */

/* 2カラムレイアウト - flexboxに変更（全ページで統一） */
.page_2col,
.modern-search-theme .page_2col {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    align-items: flex-start !important;
    width: 100% !important;
    /* tableレイアウトを完全に無効化 */
    table-layout: auto !important;
}
/* ブログページは全幅に拡張 */
.modern-blog-theme .page_2col {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
    /* tableレイアウトを完全に無効化 */
    table-layout: auto !important;
}

/* 左カラム（サイドバー）- 幅を確実に固定、高さはコンテンツに合わせる */
.page_2col #side,
.modern-search-theme .page_2col #side,
.page_2col > #side,
.modern-search-theme .page_2col > #side,
#side,
.modern-search-theme #side {
    position: relative !important;
    top: auto !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    /* table-cellを完全に無効化 */
    display: block !important;
    vertical-align: top;
    /* 高さをコンテンツに合わせる（自動調整） */
    height: auto !important;
    max-height: none !important;
    align-self: flex-start !important;
    /* 内部要素も高さを自動に */
    overflow: visible !important;
}
/* ブログページの右カラム（サイドバー）- 幅を小さく */
.modern-blog-theme .page_2col #side,
.modern-blog-theme #side {
    position: relative !important;
    top: auto !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* table-cellを完全に無効化 */
    display: block !important;
    vertical-align: top;
    /* 高さをコンテンツに合わせる（自動調整） */
    height: auto !important;
    max-height: none !important;
    align-self: flex-start !important;
    /* 内部要素も高さを自動に */
    overflow: visible !important;
}

.modern-blog-theme .page_2col #main {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* #sideの内部要素も高さを自動に */
#side > div,
#side > div > div,
#side .menu_fixed {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}

/* 右カラム（メインコンテンツ）- 残りのスペースを使用 */
.page_2col #main,
.modern-search-theme .page_2col #main,
.modern-blog-theme .page_2col #main,
.page_2col > #main,
.modern-search-theme .page_2col > #main,
#main,
.modern-search-theme #main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 0;
    width: auto !important;
    /* table-cellを完全に無効化 */
    display: block !important;
    vertical-align: top;
    /* 高さを自動調整 */
    height: auto !important;
}

@media screen and (max-width: 767px) {
    .page_2col #main,
    .modern-search-theme .page_2col #main,
    .modern-blog-theme .page_2col #main,
    .page_2col > #main,
    .modern-search-theme .page_2col > #main,
    #main,
    .modern-search-theme #main {
        width: 100% !important;
    }
}

/* メニュー固定を無効化 */
#side .menu_fixed,
#side .menu_fixed.active,
.modern-search-theme #side .menu_fixed,
.modern-search-theme #side .menu_fixed.active,
.modern-blog-theme #side .menu_fixed,
.modern-blog-theme #side .menu_fixed.active {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    z-index: auto !important;
    overflow: visible !important;
    max-height: none !important;
    min-height: auto !important;
    height: auto !important;
}

/* サイドナビの高さも自動に */
#side .modern-side-nav {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}

/* モダンなサイドナビデザイン - 右カラムのスタイル（全ページで統一） */
.modern-side-nav,
#side .modern-side-nav,
.page_2col .modern-side-nav,
.modern-search-theme .modern-side-nav {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid #e0e0e0 !important;
    height: auto !important;
    position: relative !important;
    transition: box-shadow 0.3s ease;
}

.modern-side-nav:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}

.modern-side-head,
#side .modern-side-head,
.page_2col .modern-side-head,
.modern-search-theme .modern-side-head {
    background: #555 !important;
    color: #fff !important;
    padding: 22px 20px !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
}

.modern-side-nav .side_nav_head::before,
.modern-side-nav .side_nav_head::after {
    display: none !important;
}

.modern-side-links,
#side .modern-side-links,
.page_2col .modern-side-links,
.modern-search-theme .modern-side-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow: visible !important;
    max-height: none !important;
}

.modern-side-links li {
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.2s ease;
}

.modern-side-links li:last-child {
    border-bottom: none !important;
}

.modern-side-links li a,
#side .modern-side-links li a,
.page_2col .modern-side-links li a,
.modern-search-theme .modern-side-links li a {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 15px !important;
    position: relative !important;
    font-weight: 500 !important;
}

.modern-side-links li a:before {
    display: none !important;
}

.modern-side-links li a i {
    width: 22px !important;
    margin-right: 14px !important;
    color: #666 !important;
    font-size: 17px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.modern-side-links li a:hover {
    background: #f8f9fa !important;
    padding-left: 24px !important;
    color: #333 !important;
}

.modern-side-links li a:hover i {
    color: #333 !important;
    transform: scale(1.1) !important;
}

.modern-side-links li a.here {
    background: #f0f0f0 !important;
    color: #333 !important;
    font-weight: 600 !important;
    border-left: 4px solid #999 !important;
}

.modern-side-links li a.here i {
    color: #333 !important;
}

.modern-badge {
    margin-top: -10px;
    display: inline-block !important;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.0em;
    font-weight: 700 !important;
    padding: 5px !important;
    border-radius: 12px !important;
    margin-left: auto !important;
    width: 20px;
    height: 20px;
    text-align: center !important;
    box-shadow: none;
    animation: pulse 2s infinite !important;
    right: 1em;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* JavaScriptのインラインスタイルを強制的に上書き */
#side .menu_fixed[style],
#side .menu_fixed.active[style],
#side[style],
.modern-search-theme #side .menu_fixed[style],
.modern-search-theme #side .menu_fixed.active[style],
.modern-search-theme #side[style] {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    padding-top: 0 !important;
}

/* スクロールイベントによる変更を防ぐ */
#side[style*="padding-top"],
#side[style*="fixed"] {
    padding-top: 0 !important;
    position: relative !important;
}

#side .menu_fixed[style*="fixed"],
#side .menu_fixed.active[style*="fixed"] {
    position: relative !important;
    top: auto !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    .page_2col,
    .modern-search-theme .page_2col {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* スマホ時はサイドバーを完全に非表示 */
    #side,
    .modern-search-theme #side,
    .page_2col #side,
    .modern-search-theme .page_2col #side {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #main,
    .modern-search-theme #main {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .modern-side-nav {
        border-radius: 8px !important;
    }
    
    .modern-side-head {
        padding: 18px 15px !important;
        font-size: 16px !important;
    }
    
    .modern-search-theme .modern-side-links {
        padding: 0 0 !important;
    }
    .modern-side-links li a {
        padding: 14px 18px !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   マイページ用開閉メニュー（スマホ用）
   common/module/user_menu_mobile.tpl 専用のスタイル。

   260807 追加。テンプレート側（2025-12-12 追加）は当初から
   .mypage-mobile-menu-toggle / -btn / -content を出力していたが、
   **対応するCSSがプロジェクト内のどこにも存在しなかった**
   （実測: grep -rl "mypage-mobile-menu" の結果が .tpl と
   その templates_c コンパイル済みキャッシュのみ＝定義0件）。
   そのため PC でも素の <ul> のまま常時・全開で本文の先頭に描画され、
   右カラムのサイドバーと二重に見えていた。

   役割分担：
     PC（768px〜） … #side のサイドバーを見せ、この開閉メニューは隠す
     SP（〜767px） … このファイル 331行目で #side を display:none に
                     しているので、代わりにこの開閉メニューを見せる
   ============================================================ */
.mypage-mobile-menu-toggle {
    display: none;
}

@media screen and (max-width: 767px) {

    .mypage-mobile-menu-toggle {
        display: block !important;
        margin: 0 0 20px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }

    /* 見出しボタンはサイドバーの .modern-side-head と同じ見た目に揃える
       （背景 #555・白文字・16px・太字・padding 18px 15px） */
    .mypage-mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 15px !important;
        border: none !important;
        border-radius: 0 !important;
        background: #555 !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.5px !important;
        text-align: left !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .mypage-mobile-menu-btn i {
        flex: 0 0 auto !important;
        margin-left: 10px !important;
        font-size: 14px !important;
        transition: transform 0.3s ease !important;
    }

    /* .tpl 内の JS がボタンと中身の**両方**に .active を付け外しする。
       片方だけを見るセレクタにすると開閉が噛み合わなくなる。 */
    .mypage-mobile-menu-btn.active i {
        transform: rotate(180deg) !important;
    }

    .mypage-mobile-menu-content {
        display: none !important;
        border-top: 1px solid #e0e0e0 !important;
    }

    .mypage-mobile-menu-content.active {
        display: block !important;
    }
}


/*rireki.html*/
.modern-search-theme .table_form td.sex_wrapper label {
    display: inline-block;
}
.modern-search-theme .table_form td.sex_wrapper label input[type="radio"] {
    width: 13px;
    height: 13px;
}

.modern-search-theme .table_form td.birthday-wrapper .input_select {
    padding: 10px 20px 10px 15px !important;
    background-position: right 5px center;
}
@media screen and (max-width: 767px) {
    
    .modern-search-theme .table_form td.birthday-wrapper {
        flex-wrap: wrap !important;
    }
    .modern-search-theme .table_form td.birthday-wrapper .input_select {
        padding: 8px 20px 8px 8px !important;
    }
    
    .modern-search-theme .table_form td.address_wrapper .sp_w25 {
        width: 25% !important;
    }
    
    
}