@charset "UTF-8";
/* =============================================================
   マイページ系（左メニュー＋本文の2カラム）の共通レイアウト

   対象は「左メニュー(_embed_myMenu)を出すページ群」＝
     ._mypage      … /mypage 配下
     ._casemanage  … /stc/casemanage 配下（申込一覧・お気に入り・案件一覧・案件登録 など）
     ._eventmanage … /event/eventmanage 配下（参加イベント・投稿コメント）
   以前は ._z._mypage 限定のインライン<style>だったため、_casemanage / _eventmanage は
   MASE既定グリッドのままで、サイドバー幅・本文左端・見出しサイズがページごとに
   バラつき、遷移するたびに本文が左右にずれていた（2026-07-28 修正依頼）。

   ※ tailwind.css の preflight と管理画面CSS(mase_fuc_get_css)より後に読み込むこと。
     読み込みは partial/_head_tailwind.html.twig。
   ============================================================= */

/* --- 外枠の幅を統一 ---
   MASE の zClass サイズ指定（s / m / x）は、左右のガター列 ._c ._i の幅を広げて
   本文側を狭める仕組み（mase.css: ._z.s :where(._c,._i){width:calc((100dvw - 800px)/2)} など）。
   マイページ系はページごとに s / m が混在しており、これが「本文の左端が
   300 / 384 / 484 とばらつく」直接の原因だった。この系統では常にサイズ指定なし
   （＝1200px 幅）と同じガター幅に揃える。 */
/* 1200px 以下ではガターなし（サイズ指定なしの既定と同じ挙動） */
@media (min-width: 801px) and (max-width: 1200px) {
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage):is(.s, .m, .x) :where(._c, ._i) {
        width: 0;
    }
}
/* 1201px 以上は既定（本文1200px）と同じガター幅にする */
@media (min-width: 1201px) {
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage):is(.s, .m, .x) :where(._c, ._i) {
        width: calc((100dvw - 1200px) / 2);
    }
}

/* --- 共通の2カラム化（MASEグリッドの列割当不整合を上書き） ---
   ページによっては _efg の中を <main class="_subgrid entire"> で包むため
   （案件登録など）、_e を直接持つ方の要素を flex コンテナにする。
   _efg 決め打ちにすると main が唯一の flex item になり本文が潰れる。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._efg:has(> ._e),
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._efg > main:has(> ._e) {
    display: flex !important;
    gap: 1.5rem;
    align-items: flex-start;
}
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e {
    flex: 0 0 260px;
    width: 260px !important;
    max-width: 260px;
}
/* 本文は常に残り幅いっぱい。zClass の s / m などによる ._f の幅制限は
   ページ間で本文左端がずれる原因になるので無効化する。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._f {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}
/* ._g は当該ページ群では常に空。flex の3列目として隙間を作らないよう畳む。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._g { display: none; }

/* --- 本文の見出しを統一 ---
   一覧系は mase.css の h2.u（16px）、フォーム系は .tw-form-title（24px）と
   バラバラだったので、どちらも同じ見た目・同じ位置に揃える。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._f :where(h2.u, .tw-form-title, h2.tw-form-title) {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 700;
    color: #0f172a;
}
/* 本文先頭の余白もページ間で揃える（mt-4 / md:mt-6 などの個別指定を吸収） */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._f > main,
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._f > article {
    margin-top: 0;
    padding-top: 0;
}

/* --- フォーム系カード(.tw-form-shell)を左寄せに ---
   mx-auto で中央寄せされると、一覧系ページと見出しの左端が揃わず
   遷移時に横方向へ飛んで見える。最大幅は可読性のため残しつつ左寄せする。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) .tw-form-shell {
    margin-left: 0;
    margin-right: 0;
    max-width: 860px;
}

/* --- モバイル（縦積み） ---
   align-items(交差軸=横)を stretch に戻す。flex-start のままだと ._f が
   width:auto のままコンテンツ幅まで縮み、本文が潰れる。 */
@media (max-width: 900px) {
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._efg:has(> ._e),
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._efg > main:has(> ._e) {
        flex-direction: column;
        align-items: stretch;
    }
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e {
        flex-basis: auto;
        width: 100% !important;
        max-width: none;
    }
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._f { width: 100% !important; }
    ._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) .tw-form-shell { max-width: none; }
}

/* --- サイドメニューのカード化（従来 ._mypage 限定だったものを共通化） --- */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu {
    display: grid;
    gap: .25rem;
    margin-top: 1rem;
}
/* ★display は flex にすること(block にしない)
   mase.css の `.u-sideMenu :where(a, label)` は
     display: grid; grid-template-columns: 2em 1fr 1.5em; gap: .5em
   でアイコン(::before)用の列と余白を確保している。ここで display:block に
   していたためその列組みごと消え、アイコンと文字が密着していた
   (「マイページ」と2階層目のメニューで報告)。1階層目の見出しは
   下の .u-openCloser が別途 flex を当てているので影響が出ていなかった。

   ★`a` だけでなく `label` も対象にすること
     メニュー項目は基本 <a> だが、リンク先を決められない現在地の項目は
     <label class="current"> で出力される(例: ブログ記事一覧は対象ブログの
     idが要るため、その画面を開いている時だけラベルとして出る)。
     `a` だけを対象にしていたため、その項目だけ余白も緑のカレント表示も
     当たっていなかった。アコーディオンの見出し(.u-openCloser)は
     別ルールで面倒を見るのでここでは除外する。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu > :where(a, label:not(.u-openCloser)),
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openClose > :where(a, label) {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .5rem .75rem;
    color: #334155;
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
}

/* アイコン(::before)は幅を揃えて文字の頭を縦に揃える。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu > :where(a, label:not(.u-openCloser))::before,
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openClose > :where(a, label)::before {
    flex: 0 0 1.25em;
    text-align: center;
}
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu > :where(a, label:not(.u-openCloser)):hover,
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openClose > :where(a, label):hover {
    background: #f0fdfa;
    color: #0f766e;
}
/* 現在地(サブ項目含む全て): 緑ピル + 右辺は角なしで▶と連結 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu :where(a, label).current {
    position: relative;
    background: #0d9488;
    color: #fff;
    font-weight: 700;
    border-radius: 8px 0 0 8px;
}
/* mase.css既定の::afterを上書きし、背景と連結した緑の右向き▶に */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu :where(a, label).current::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border-top: 17px solid transparent !important;
    border-bottom: 17px solid transparent !important;
    border-left: 11px solid #0d9488 !important;
    border-right: 0 !important;
}
/* 見出し(アカウント/案件管理/ブログ管理…)も「マイページ」や2階層目と
   アイコン〜文字の間隔を揃える。
   ★justify-content: space-between にしない
     この行は [アイコン(::before)] [文字(span)] [開閉の矢印(::after)] の3つが
     flex item になるため、space-between だと文字が中央へ飛ばされ、
     アイコンと文字が離れて他の項目と間隔が揃わなかった。
     左詰め + gap にして、矢印だけ margin-left:auto で右端へ送る。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openCloser {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
}

/* アイコンの幅は2階層目と同じにして、文字の頭を縦に揃える */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openCloser::before {
    flex: 0 0 1.25em;
    text-align: center;
}

/* 開閉の矢印は右端へ */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openCloser::after {
    margin-left: auto;
}
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) ._e .e-myMenu .u-openCloser:hover { background: #f8fafc; }

/* =============================================================================
   1対1メッセージ（マイページ > アカウント > メッセージ一覧 / メッセージ詳細）
   ---------------------------------------------------------------------------
   一覧/詳細のロールを付与して画面を復帰させた際(T022 追加依頼)に、SP幅で
   崩れていた2点を補正する。PC幅の見た目は変えない。
   ============================================================================= */

/* (0) 一覧テーブルの見出し行(thead)の sticky を解除。
   mase側は `table.u.col thead { position: sticky; top: var(--stickyPageTop) }` で
   スクロール追従させているが、WorkPaletteのサイトヘッダは追従しない一方で
   --stickyPageTop にはヘッダ高さが入るため、スクロールすると見出しが
   --stickyPageTop 分だけ下にずれて1行目のセルに重なる（2026-07-28 指摘）。
   カード(rounded-xl)内に収める体裁なので追従自体をやめる。

   ★当初 ._mypage._mailList だけに当てていたが、同じ症状がブログ管理の
     ブログ一覧・ブログ記事一覧でも出ていた(見出し行が本文行に食い込む)。
     table.u.col を使う一覧はこの系統のページすべてで同じ体裁なので、
     ページ個別ではなく左メニューを持つページ群まとめて解除する。 */
._z:is(._mypage, ._casemanage, ._eventmanage, ._blogmanage) table.u.col thead {
    position: static;
    top: auto;
}

/* (1) 送信ボタンの sticky を解除。
   mase側は `._mypage._message .u-btns { position: sticky; bottom: 0 }` で
   画面下部固定にしているが、スレッドが短いと main の中で上方向に引き上げられ、
   見出し(h2)に被る。DOM順どおり本文の下に置く。 */
._mypage._message main .u-btns {
    position: static;
    padding-inline: 0;
}

/* (2) 狭い幅では吹き出しが潰れる補正。
   `.message:not(.mySelf)` は user/content/meta の3カラムで、meta の日時が
   white-space:nowrap のため SP では content が 130px 程度まで圧縮される。
   meta を下段に落として吹き出しに横幅を渡す。
   ※ .e-messages は申込詳細のやり取り(_embed_messages)でも使う共通部品。 */
@media screen and (max-width: 640px) {
    .e-messages .message:not(.mySelf) {
        grid-template:
            "date date" min-content
            "user content" auto
            ".    meta" auto / min-content 1fr;
    }

    .e-messages .message.mySelf {
        grid-template:
            "date date" min-content
            "content content" auto
            "meta meta" auto / 1fr;
    }

    .e-messages .message .content {
        max-width: 100%;
    }

    .e-messages .message .meta {
        align-self: start;
        padding-top: .25em;
    }

    .e-messages .message .meta :where(time, span) {
        display: inline-block;
        margin-right: .5em;
    }
}