@charset "utf-8";
/*
 * bs-custom.css
 * Bootstrap 5 + TRPGオンセン既存デザイン 調和スタイル
 * 読み込み順: bootstrap.min.css → main-pc/sp.css → bs-custom.css
 */

/* ============================================================
   1. サイトカラーで Bootstrap のプライマリカラーを上書き
   ============================================================ */
:root {
    --bs-primary:          #FE7F00;
    --bs-primary-rgb:      254,127,0;
    --bs-link-color:       #3046D5;
    --bs-link-hover-color: #1a2fa0;
    --bs-border-radius:    4px;
    --bs-focus-ring-color: rgba(254,127,0,.25);
}

/* ============================================================
   2. Bootstrap フォームコンポーネントをサイトデザインに合わせる
   ============================================================ */
.form-control,
.form-select {
    border-color: #999;
    border-radius: 4px;
    font-family: "Lucida Grande","Hiragino Kaku Gothic ProN","Meiryo","sans-serif";
}
.form-control:focus,
.form-select:focus {
    border-color: #FE7F00;
    box-shadow: 0 0 0 0.2rem rgba(254,127,0,.25);
    outline: none;
}

/* ネイティブ input/select/textarea のフォーカスも統一 */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="username"]:focus,
select:focus,
textarea:focus {
    border-color: #FE7F00 !important;
    box-shadow: 0 0 0 0.2rem rgba(254,127,0,.25);
    outline: none;
}

/* ============================================================
   3. ボタンのモダン化
   ============================================================ */

/* Bootstrap .btn-primary をサイトオレンジに */
.btn-primary {
    --bs-btn-bg:            #FE7F00;
    --bs-btn-border-color:  #FE7F00;
    --bs-btn-hover-bg:      #d96d00;
    --bs-btn-hover-border-color: #d96d00;
    --bs-btn-active-bg:     #b85e00;
    --bs-btn-active-border-color: #b85e00;
    --bs-btn-color:         #fff;
    --bs-btn-hover-color:   #fff;
    --bs-btn-active-color:  #fff;
}

/* input[type="submit"] / input[type="button"] の統一モダンスタイル */
input[type="submit"],
input[type="button"] {
    cursor: pointer;
    background-color: #FE7F00;
    color: #fff;
    border: 1px solid #d96d00;
    border-radius: 4px;
    padding: .4em 1.4em;
    font-weight: bold;
    transition: background-color .15s ease-in-out, transform .1s;
    -webkit-appearance: none;
}
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #d96d00;
}
input[type="submit"]:active,
input[type="button"]:active {
    transform: scale(.97);
}

/* 「キャンセル」「戻る」などサブアクションのボタン */
input[type="button"].btn-sub,
.btn-sub {
    background-color: #f0f0f0;
    color: #333;
    border-color: #aaa;
}
input[type="button"].btn-sub:hover,
.btn-sub:hover {
    background-color: #e0e0e0;
}

/* リンク見せかけボタン（従来: style="color:#0000ee;background:0;border:0;"） */
.btn-as-link {
    color: #3046D5;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}
.btn-as-link:hover { color: #1a2fa0; }

/* ============================================================
   4. フォームレイアウト共通クラス
   ============================================================ */

/* input の横幅を Bootstrap grid 段階に揃える */
.input-w-sm  { width: 120px;  max-width: 100%; }
.input-w-md  { width: 210px;  max-width: 100%; }
.input-w-lg  { width: 320px;  max-width: 100%; }
.input-w-xl  { width: 430px;  max-width: 100%; }
.input-w-full{ width: 100%;   max-width: 100%; }

/* ============================================================
   5. SP 向けユーザービリティ改善
   ============================================================ */
@media screen and (max-width: 768px) {

    /* submit/button のタップ領域確保 */
    input[type="submit"],
    input[type="button"],
    button,
    .tap-target {
        min-height: 44px;
    }

    /* テーブルの横スクロール防止 */
    .sp-scroll-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* フォーム入力欄を全幅に（SPでの使いやすさ向上） */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="url"],
    input[type="search"],
    input[type="username"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* iOS でのズーム防止 */
    }

    /* submit ボタンを SP で全幅に */
    input[type="submit"] {
        width: 100%;
        padding: .6em 1em;
        font-size: 16px;
    }
}

/* ============================================================
   6. Bootstrap Reboot との競合調整（PC/SP共通）
   ============================================================ */

/* Bootstrap Reboot は h1-h6 のマージンを設定するが、
   既存 main-*.css の margin:0 で上書き済み → 追加対応不要 */

/* Bootstrap の a タグカラー上書き（既存 main-*.css の a{ text-decoration:none } が優先） */
a { color: #3046D5; }
a:hover { color: #1a2fa0; }

/* Bootstrap table に既存テーブルスタイルが使われる箇所は影響なし
   （main-*.css の .edit_player_table 等が上位にある） */

/* Bootstrap の .container が PCで 1260px を超えないよう */
.container, .container-fluid, .container-lg, .container-xl, .container-xxl {
    max-width: 1260px;
}

/* ============================================================
   7. プロフィール編集フォーム用ユーティリティ
   ============================================================ */

/* プレイ傾向行（border区切り付き） */
.pref-row {
    margin: .2em 0;
    border-bottom: 1px #aaa dotted;
}
.pref-row:last-child {
    border-bottom: none;
    margin-bottom: .2em;
}

/* 傾向ラベル（右揃え固定幅） */
.pref-label {
    display: inline-block;
    width: 8em;
    text-align: right;
}

/* アコーディオン開閉ボタン */
.acb_btn {
    padding: 3px;
    text-align: center;
    background-color: #a9c6c9;
    cursor: pointer;
}

/* 参加状態バッジ（参加決定・勧誘中・参加申請中など） */
.status-badge {
    display: inline-block;
    padding: 3px 6px;
    font-weight: bold;
    color: #fff;
    border-radius: 2px;
}

/* ============================================================
   8. カスタムボタンクラス（PC/SP統合 · Bootstrap変数対応版）
   main-pc.css / main-sp.css から移動。クラス名は変更なし。
   ============================================================ */

/* --- 共通プロパティ --- */
.m_b_buttom,
.m_o_buttom,
.m_g_buttom,
.m_w_buttom,
.mm_b_buttom {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    border-radius: var(--bs-border-radius-pill, 100vh);
    border: 1px solid #DDD;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
    -webkit-appearance: none;
}
.m_b_buttom,
.m_o_buttom,
.m_g_buttom,
.m_w_buttom {
    display: inline-block;
    padding: 10px 15px;
}
.mm_b_buttom {
    display: inline-block;
    padding: 5px 10px;
}

/* --- 色（PC基準） --- */
.m_b_buttom  { color: #FFF; background-color: #3060FF; }
.m_o_buttom  { color: #FFF; background-color: #ea0000; }
.m_g_buttom  { color: #FFF; background-color: #707070; }
.m_w_buttom  { color: #0038F5; background-color: #FFF; border-color: #3060FF; font-size: 16px; }
.mm_b_buttom { color: #FFF; background-color: #3060FF; }

/* --- disabled --- */
.m_b_buttom:disabled,
.m_o_buttom:disabled,
.m_g_buttom:disabled,
.mm_b_buttom:disabled { background-color: #505050; }

/* --- PC: hover（769px以上） --- */
@media screen and (min-width: 769px) {
    .m_b_buttom:hover  { color: #3060FF; background-color: #FFF; border-color: #3060FF; }
    .m_o_buttom:hover  { color: #ea0000; background-color: #FFF; border-color: #ea0000; }
    .m_g_buttom:hover  { color: #707070; background-color: #FFF; border-color: #707070; }
    .m_w_buttom:hover  { color: #FFF; background-color: #0038F5; }
    .mm_b_buttom:hover { color: #3060FF; background-color: #FFF; border-color: #3060FF; }
}

/* --- SP: block表示 + タッチフィードバック（768px以下） --- */
@media screen and (max-width: 768px) {
    .m_b_buttom,
    .m_o_buttom,
    .m_g_buttom,
    .m_w_buttom {
        display: block;
        width: 100%;
    }
    /* SPは若干濃いめのカラー（可読性確保） */
    .m_b_buttom  { background-color: #0037F0; }
    .m_o_buttom  { background-color: #B30000; }
    .m_g_buttom  { background-color: #505050; }
    .mm_b_buttom { background-color: #0037F0; }
    /* タップ時フィードバック */
    .m_b_buttom:active  { color: #0037F0; background-color: #FFF; border-color: #3060FF; }
    .m_o_buttom:active  { color: #B30000; background-color: #FFF; border-color: #B30000; }
    .m_g_buttom:active  { color: #505050; background-color: #FFF; border-color: #505050; }
    .m_w_buttom:active  { color: #FFF; background-color: #0038F5; }
    .mm_b_buttom:active { color: #0037F0; background-color: #FFF; border-color: #3060FF; }
}

/* ============================================================
   9. adjust_box（自動リサイズtextarea）に Bootstrap form-control 外観を適用
   HTML変更不要。adjustbox.js の動作はそのまま維持。
   ============================================================ */
textarea.adjust_box {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #999);
    border-radius: var(--bs-border-radius, 4px);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    resize: vertical;
    box-sizing: border-box;
}
textarea.adjust_box:focus {
    border-color: #FE7F00;
    box-shadow: 0 0 0 .25rem rgba(254,127,0,.25);
    outline: 0;
}

/* ① パスワードinputと伏字ボタンの折り返し防止
   white-space:nowrap はソフト折り返しのみ禁止。<br>タグは有効なので「パスワード：」の後の改行はそのまま残る */
.mb1r:has(#id_wrap_pri_pass),
td:has(#id_wrap_pri_pass) {
    white-space: nowrap;
}
/* .login_form span { font-size:0.7em } が id_wrap_pri_pass にも適用されるのを無効化 */
.login_form #id_wrap_pri_pass {
    font-size: 1em;
}

/* ② トップページ「できること」カード — Bootstrap box-sizing:border-box で縮んだサイズを復元
   元の設計が content-box 前提 (200px = コンテンツ幅) なので content-box に戻す */
.do_list .do {
    box-sizing: content-box;
}

/* フッターリンクの折り返し防止 */
.fcnt2 {
    display: flex;
    justify-content: center;
    width: auto;
    max-width: 100%;
}
.fcnt2>ul {
    float: none;
    width: auto;
    flex: 1;
    min-width: 0;
}
.fcnt2>ul>li>a,
.fcnt2>ul>li>span {
    white-space: nowrap;
}

/* リンク見せかけボタン（カラーなし版） */
.btn-text {
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.btn-text:hover { text-decoration: none; }