@charset "UTF-8";
/* =============================================================
   jQuery UI ダイアログ(検索条件の保存 など)
   ※ tailwind.css の preflight と管理画面CSS(mase_fuc_get_css)より後に読み込むこと。
     読み込みは partial/_head_tailwind.html.twig。
   ============================================================= */
/* --- jQuery UI ダイアログ(検索条件の保存 など)の見た目 ---
   mase.css のダイアログ用CSSは @layer mase の中にあり、レイヤ無しで読み込む
   tailwind.css の preflight(button/input のリセット)に負ける。そのため素の白い箱に
   「Close」の生文字が出る状態になっていた。→ @layer の外(このstyle)で再宣言して
   優先させる。色はワークパレットの Teal に合わせる。
   backend(管理画面)のダイアログは mase 既定のままにしたいので、
   `._z._backend` を含まないドキュメント(=公開ページ)に限定する。 */
body:not(:has(._z._backend)) .ui-widget-overlay {
    background-color: rgba(15, 23, 42, .5);
    opacity: 1;
}
body:not(:has(._z._backend)) .ui-dialog {
    container: _container/inline-size;
    /* 幅は mase.css 側の @layer 内 !important が最終的に勝つ(!important は
       レイヤ内が優先されるため)。値を合わせておき、上書きの意図がない事を示す。 */
    width: clamp(300px, 75dvw, 600px);
    max-height: 80dvh;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .18);
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    translate: -50% -50%;
    overflow-y: auto;
}
/* jQuery UI が付ける ui-* クラスの素の見た目(灰色の枠・角丸・text-indent)を消す */
body:not(:has(._z._backend)) .ui-dialog [class*="ui-"] {
    width: auto;
    height: auto;
    min-height: auto !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    color: #334155;
    background: none;
    border: none;
    border-radius: 0;
    text-indent: 0;
    padding: 0;
    margin: 0;
    position: static;
}
body:not(:has(._z._backend)) .ui-dialog [class*="ui-"]::before,
body:not(:has(._z._backend)) .ui-dialog [class*="ui-"]::after { display: inline-block; }
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-content { padding: 1.75rem 1.5rem 1.25rem; }
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-titlebar {
    height: 2.5rem;
    background-color: transparent;
    border: none;
}
/* タイトル(mase は h2._none で出力。既定では display:none) */
body:not(:has(._z._backend)) .ui-dialog h2._none {
    display: block !important;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    padding: 0 0 .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}
/* 閉じるボタン: 中の「Close」テキストと ui-icon スプライトを消して ✕ に差し替える */
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-titlebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 100%;
    color: #64748b;
    text-indent: 0;
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-titlebar-close:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-titlebar-close::after {
    content: "\00d7"; /* ✕(FontAwesome非依存) */
    font-size: 1.5rem;
    line-height: 1;
}
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-titlebar span { display: none; }
/* 本文の入力テーブル(条件名 / 通知する) */
body:not(:has(._z._backend)) .ui-dialog table.u.row { width: 100%; }
body:not(:has(._z._backend)) .ui-dialog table.u.row tr { margin: 0; }
body:not(:has(._z._backend)) .ui-dialog table.u.row :where(th, td) {
    padding: .5rem .25rem !important;
    text-align: left;
    vertical-align: middle;
}
body:not(:has(._z._backend)) .ui-dialog table.u.row th {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    opacity: 1 !important;
    white-space: nowrap;
}
body:not(:has(._z._backend)) .ui-dialog table.u.row :where(input[type="text"], input[type="number"], textarea) {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}
body:not(:has(._z._backend)) .ui-dialog table.u.row :where(input[type="text"], input[type="number"], textarea):focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
}
body:not(:has(._z._backend)) .ui-dialog table.u.row input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #0d9488;
}
/* フッター(キャンセル / 登録)。mase の .u-btn は --color-main(ピンク)なので Teal に上書き */
body:not(:has(._z._backend)) .ui-dialog .u-formFooter {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}
/* 単一ボタンのダイアログフッター(イベント参加など)は中央寄せにする。
   .u-formFooter への付与でこの1行だけ既定の右寄せを上書きする。 */
body:not(:has(._z._backend)) .ui-dialog .u-formFooter.wp-formFooter-center {
    justify-content: center;
}
body:not(:has(._z._backend)) .ui-dialog .u-formFooter button.u-btn,
body:not(:has(._z._backend)) .ui-dialog .ui-dialog-content button.u-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: .5rem 1.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background-color: #fff;
    color: #334155;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
body:not(:has(._z._backend)) .ui-dialog button.u-btn:hover { background-color: #f1f5f9; }
body:not(:has(._z._backend)) .ui-dialog button.u-btn.mainPrimary {
    border-color: #0d9488;
    background-color: #0d9488;
    color: #fff;
}
body:not(:has(._z._backend)) .ui-dialog button.u-btn.mainPrimary:hover {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
/* エラーダイアログ(この条件は保存できません 等)の本文 */
body:not(:has(._z._backend)) .ui-dialog .u-notice {
    margin: 0;
    color: #b91c1c;
    font-size: .95rem;
}
body:not(:has(._z._backend)) .ui-dialog .t-note {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem;
    margin: 0;
}