@charset "utf-8";

/* --- 変数定義 (Modern Design System) --- */
:root {
    --primary-color: #138056; /* ボタン・タイトルのメイン色 */
    --error-color: #bf0000;
    --bg-color: #f4f7f6;
    --card-bg: #ffffff;
    --border-color: #bbbbbb;
}

/* --- リセット & 基本設定 --- */
html, body, div, span, h1, h2, h3, p, a, ul, li, form, label, footer, header, section {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; box-sizing: border-box;
}
ol, ul { list-style: none; }
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
    background-color: var(--bg-color);
    color: #333;
    line-height: 1.5;
}

/* --- レイアウト --- */
#wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 22px 10px 50px;
}

/* ---------------------------------------------------------
   ヘッダー・フッター
--------------------------------------------------------- */
/* ヘッダーは共通化デザインを維持 */
#header { padding: 5px 0; border-bottom: 1px solid #eee; background: #fff; }
#header .inner { padding: 0 15px; width: 95%; max-width: 1000px; margin: 0 auto; }
#header h1 img, #header .header_logo img { max-height: 35px; width: auto; }
.header_flex { display: flex; justify-content: space-between; align-items: center; }

/* フッターは元のシンプルな定義 */
#footer { padding: 20px 0; text-align: center; font-size: 12px; }

/* --- コンテンツ共通パーツ --- */
h2.user_ttl, h2.user_ttl span, .user_ttl, .user_ttl span { 
    font-size: 1rem !important; 
}
h2.user_ttl {
    margin: 0;
    padding: 10px 15px;
    font-weight: bold;
    color: #fff;
    background: #009999;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

/* フォームを包む白いボックス */
.login, .regist-inner-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 25px;
    margin-bottom: 20px;
}

/* --- フォーム要素 --- */
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}
.required {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-left: 5px;
}
.help-text {
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
}

/* 入力フィールドの統一 */
input[type="text"], 
input[type="password"], 
input[type="email"], 
select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    height: auto !important; 
}

/* チェックボックス・ラジオボタン */
input[type="checkbox"], 
input[type="radio"] {
    width: auto !important;
    height: auto !important;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;
}
.checkbox-label, .radio-group label {
    display: inline-block;
    font-weight: normal;
    margin-right: 15px;
    cursor: pointer;
}

/* ログイン・登録用チェックボックスエリア */
.checkbox-wrap {
    margin: 20px 0 25px 0;
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: left;
}
.checkbox-wrap .checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    color: #334155;
    margin-right: 0;
}
.checkbox-wrap .checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px;
    cursor: pointer;
}
.checkbox-wrap .checkbox-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 5px;
    margin-left: 28px;
}

/* --- ボタン --- */
.btn-submit {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 15px !important;
    width: 100% !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: 0.3s;
    display: block;
    font-family: inherit !important;
}
.btn-submit:hover { opacity: 0.9; }

.btn-danger {
    background: #555;
    color: white;
    padding: 12px;
    border-radius: 6px;
    text-decoration: none;
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95rem;
    font-family: inherit;
}

/* ボタンを押した時の「沈み込み」効果 */
.btn-submit:active, .btn-danger:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* --- エラー表示 --- */
.error-summary {
    background-color: #fff5f5;
    border: 1px solid var(--error-color);
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
    color: var(--error-color);
    font-weight: bold;
}

.error-message {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;     
}

/* =======================================================
   パスワード表示/非表示 切替機能用スタイル
======================================================= */
.password-wrapper {
    position: relative;
    display: block;
    width: 100%;
}
.password-wrapper input {
    width: 100%;
    padding-right: 40px !important; 
    box-sizing: border-box;
}
.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 2; 
    user-select: none; 
}
.toggle-password:hover {
    opacity: 1; 
}

/* =======================================================
   フォーム用 必須・任意バッジ
======================================================= */
.badge-req {
    background-color: #e53e3e; 
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
}

.badge-opt {
    background-color: #a0aec0; 
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
}

/* =======================================================
   フォーム枠の幅最適化と中央配置
======================================================= */
.login, .regist-inner-container {
    max-width: 500px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.user_ttl {
    max-width: 100% !important; 
    border-radius: 10px 10px 0 0 !important; 
    border-bottom: 0 !important; 
}

/* =======================================================
   画面ごとのデザインの振り分け
======================================================= */
.page-small .login, 
.page-small .user_ttl,
.page-small .regist-inner-container {
    max-width: 500px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-quiz-manage .login,
.page-quiz-manage .user_ttl,
.page-quiz-manage .regist-inner-container,
.page-quiz-manage .list-container {
    max-width: 700px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 成績表：教科別カラー設定 --- */
.cat-japanese { background-color: #ffeef0 !important; }
.cat-math     { background-color: #eef5ff !important; }
.cat-science  { background-color: #eeffee !important; }
.cat-social   { background-color: #fff7ee !important; }
.cat-english  { background-color: #f5eeff !important; }
.cat-music    { background-color: #ffffec !important; }
.cat-pe       { background-color: #f0ffff !important; }
.cat-art      { background-color: #e6ffff !important; }
.cat-homeec   { background-color: #fffaf5 !important; }
.cat-moral    { background-color: #fff0f5 !important; }
.cat-play     { background-color: #fff9f9 !important; }
.cat-others { background-color: #f9f9f9 !important; }

.cell-subj {
    text-align: left !important;
    padding-left: 15px !important;
    font-weight: bold;
    display: flex !important;
    align-items: center;
}

.subj-icon {
    width: 1.2em; 
    height: 1.2em;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 3px;
    object-fit: contain;
}

.row-all { 
    background-color: #eef6f3 !important; 
    font-weight: bold;
    border-top: 2px solid var(--primary-color);
}

.score-table th:hover {
    background-color: #e2ede8 !important;
    color: var(--primary-color);
}

/* =======================================================
   画像アップロードエリア用スタイル
======================================================= */
.image-upload-area {
    border: 2px dashed #f6d365; 
    background: #fffcf2;       
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 15px;
}
.image-upload-area:hover, .image-upload-area.dragover {
    border-color: #ffb300;     
    background: #fff8e1;
}
.upload-prompt p { color: #666; margin: 0; font-weight: bold; }
.upload-prompt span { display: block; font-size: 0.8rem; color: #999; margin-top: 5px; }
#image-preview { max-width: 100%; max-height: 250px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

/* --- エラー時のハイライト用スタイル --- */
.input-error {
    border: 2px solid var(--error-color) !important;
    background-color: #fff0f0 !important;
    transition: all 0.3s ease;
}
.input-error:focus {
    box-shadow: 0 0 0 3px rgba(191, 0, 0, 0.2) !important;
}
.inline-error-msg { 
    color: #ef4444; 
    font-size: 0.85rem; 
    margin-top: 5px; 
    font-weight: bold; 
}

/* =======================================================
   統合：ユーザー管理機能用スタイル (旧: style_user_manage.css)
======================================================= */
.list-wrapper { max-width: 800px; margin: 0 auto; }
.list-container { background: #fff; border: 1px solid var(--border-color); border-radius: 0 0 10px 10px; padding: 30px 20px; box-sizing: border-box; width: 100%; }

/* --- メニュー画面 (user_menu.php) --- */
.page-user-menu .user_ttl { background: #059669 !important; } /* タイトルをエメラルドグリーンに */

.user-menu-container { display: flex; flex-wrap: wrap; gap: 20px; background: #fff; border: 1px solid var(--border-color); padding: 30px 20px; border-radius: 0 0 10px 10px; box-sizing: border-box; width: 100%; }
.user-menu-card { 
    flex: 1 1 calc(50% - 20px); min-width: 300px; 
    border: 2px solid #6ee7b7; padding: 20px; display: flex; align-items: flex-start; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; color: inherit; 
    background: #ecfdf5; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-radius: 8px; box-sizing: border-box; 
}
.user-menu-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); border-color: #10b981; }
.user-menu-icon { font-size: 2.5rem; margin-right: 15px; flex-shrink: 0; }
.user-menu-text-content { flex-grow: 1; }
.user-menu-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 8px; display: block; color: #064e3b; }
.user-menu-desc { font-size: 0.9rem; color: #065f46; line-height: 1.6; margin-bottom: 12px; }
.user-menu-detail-link { font-size: 0.85rem; color: #059669; text-decoration: none; font-weight: bold; }

/* --- フォーム・エラー共通 --- */
.success-msg { background: #e6f7ea; color: #138056; padding: 10px; border-radius: 6px; font-weight: bold; text-align: center; margin-bottom: 20px; border: 1px solid #138056; }
.error-msg { background: #fff5f5; color: red; padding: 10px; border-radius: 6px; font-weight: bold; text-align: center; margin-bottom: 20px; border: 1px solid red; }
.readonly-box { background: #f0f4f8; padding: 12px; border-radius: 6px; color: #555; font-size: 0.95rem; border: 1px solid #ddd; word-break: break-all; }
.radio-group-flex { display: flex; gap: 20px; margin-top: 5px; padding: 10px; border-radius: 4px; } 
.flex-btns { display: flex; gap: 15px; margin-top: 30px; }
.complete-box { text-align: center; padding: 40px 20px; }
.complete-box h3 { color: #138056; margin-bottom: 20px; font-size: 1.5rem; }
.complete-box p { margin-bottom: 30px; line-height: 1.6; color: #555; }

/* --- 下部ボタン群 --- */
.bottom-action-container { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-top: 30px; padding-top: 25px; border-top: 1px dashed #cbd5e1; width: 100%; }
.btn-back-menu { background: #94a3b8; color: #fff; padding: 12px 30px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: 0.2s; display: inline-block; box-sizing: border-box; }
.btn-back-menu:hover { background: #64748b; transform: translateY(-2px); }
.btn-back-sub { background: #e2e8f0; color: #475569; padding: 10px 30px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: 0.2s; display: inline-block; box-sizing: border-box; }
.btn-back-sub:hover { background: #cbd5e1; transform: translateY(-2px); }

/* ログアウト専用ボタン */
.btn-logout-sub { background: #fff; color: #ef4444; border: 2px solid #fca5a5; padding: 10px 25px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: 0.2s; display: inline-block; box-sizing: border-box; }
.btn-logout-sub:hover { background: #fef2f2; border-color: #ef4444; transform: translateY(-2px); }

/* --- ご利用状況 (user_status.php) --- */
.section-title { font-weight: bold; margin-bottom: 15px; color: #138056; border-left: 4px solid #138056; padding-left: 10px; font-size: 1.1rem; }
.status-card { background: #f0fdf4; border: 2px solid #bbf7d0; border-radius: 8px; padding: 20px; margin-bottom: 30px; display: flex; justify-content: space-around; text-align: center; box-sizing: border-box; }
.status-item span { display: block; font-size: 0.85rem; color: #138056; font-weight: bold; margin-bottom: 5px; }
.status-item strong { font-size: 1.5rem; color: #047857; }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-bottom: 10px; }
.history-table th { background: #f0fdf4; color: #138056; padding: 12px 10px; text-align: left; border-bottom: 2px solid #bbf7d0; white-space: nowrap; }
.history-table td { padding: 15px 10px; border-bottom: 1px solid #e2e8f0; color: #334155; vertical-align: middle; }
.history-table tbody tr:hover { background: #fafafa; }
.rank-badge { display: inline-block; color: #fff; padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 0.85rem; text-align: center; min-width: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.rank-S { background: #e91e63; } .rank-A { background: #f59e0b; } .rank-B { background: #3b82f6; } .rank-C { background: #22c55e; } .rank-other { background: #94a3b8; }

/* =======================================================
   統合：設定画面 (user_settings.php) 用スタイル
========================================================= */
.page-settings .user_ttl { background: #059669 !important; }
.settings-wrapper { padding-top: 10px; }
.setting-section { background: #fff; border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 25px; overflow: hidden; }
.section-header { background: #ecfdf5; padding: 12px 20px; font-weight: bold; color: #064e3b; font-size: 1.05rem; border-bottom: 1px solid #d1d5db; }
.setting-item { padding: 20px; border-bottom: 1px dashed #e2e8f0; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.setting-item:last-child { border-bottom: none; }
.item-info { flex: 1; }
.item-title { font-weight: bold; color: #1e293b; font-size: 1rem; margin-bottom: 6px; }
.item-desc { font-size: 0.85rem; color: #64748b; line-height: 1.6; }
.note-text { color: #d81b60; font-weight: bold; font-size: 0.8rem; display: block; margin-top: 5px; }

/* トグルスイッチ */
.toggle-switch { position: relative; display: inline-block; width: 54px; height: 30px; flex-shrink: 0; margin-top: 2px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 30px; }
.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(24px); }

/* カスタムセレクト */
.custom-select { padding: 10px; border-radius: 4px; border: 1px solid #ccc; background-color: #fff; color: #333; font-size: 1rem; width: 120px; max-width: 100%; box-sizing: border-box; cursor: pointer; }

/* =======================================================
   レスポンシブ（スマホ・タブレット用）
========================================================= */
@media (max-width: 767px) {
    .menu-icon { font-size: 1.65rem !important; margin-right: 8px !important; }
    #header h1 img { width: 150px; }
    #wrapper { padding: 10px; }
    .login, .regist-inner-container { padding: 15px; }

    /* ユーザー管理機能用のスマホ調整 */
    .user-menu-card { flex: 1 1 100%; min-width: 0; }
    .user-menu-container { padding: 25px 15px; }
    .user-menu-icon { font-size: 1.65rem !important; margin-right: 8px !important; }
    .bottom-action-container { flex-direction: column; align-items: stretch; }
    .btn-back-menu, .btn-back-sub, .btn-logout-sub { width: 100%; text-align: center; box-sizing: border-box; }
    .flex-btns { flex-direction: column; }
    .status-card { flex-direction: column; gap: 15px; }
    .history-table th, .history-table td { padding: 10px 5px; font-size: 0.85rem; }

    /* 設定画面用のスマホ調整 */
    .setting-item { flex-direction: column; align-items: stretch; gap: 10px; }
    .toggle-switch { align-self: flex-start; }
}

/* =========================================================
   ナビゲーションボタン群（完全版：リンク線を消しボタン化する）
========================================================= */
/* 上下の余白を5ミリ程度（約15px）に調整 */
.user_header_top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-top: -3px !important;
    margin-bottom: 10px !important;
}

.nav_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* 💡 絶対にボタンの形にするための強制設定（下線を消す） */
.user-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 130px !important;
    padding: 0 5px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-decoration: none !important; /* 絶対に下線を消す */
    border-radius: 6px !important;
    color: #333 !important;           /* 文字を黒系に */
    border: 1px solid #bbb !important;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* ホバー時（少し暗くする・下線を出さない） */
.user-nav-btn:hover {
    filter: brightness(0.95);
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* 各ボタンの固有の背景色（style.cssから移植） */
.user-nav-btn.btn-status-info { background-color: #fffaf5 !important; border-color: #ffdabc !important; }
.user-nav-btn.btn-mgr { background-color: #eef5ff !important; border-color: #ccdfff !important; }
.user-nav-btn.btn-menu { background-color: #eeffee !important; border-color: #ccffcc !important; }
.user-nav-btn.btn-logout { background-color: #f9f9f9 !important; border-color: #e0e0e0 !important; }

/* 💡 押下状態（アクティブ）のモックアップデザイン再現 */
.user-nav-btn.active {
    background-color: #fff !important;
    border: 2px solid #3366ff !important; /* 青枠 */
    color: #333 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.15) !important;
    transform: translateY(2px) !important; /* 沈み込み */
    pointer-events: none !important;
}

/* スマホ対応（2列に並べる） */
@media screen and (max-width: 767px) {
    .nav_group {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    .user-nav-btn {
        width: calc(50% - 4px) !important;
    }
}