/* Google Fonts - Noto Sans JP の読み込み (functions.php で読み込むのが理想ですが、CSSで直接インポートも可能) */

/* =========================================================
   1. 全体的なフォームコンテナのスタイル
   ========================================================= */
#wpmem_reg,
#wpmem_login {
    max-width: 680px; /* フォームの最大幅を少し広めに */
    margin: 60px auto; /* 中央寄せと上下の余白 */
    padding: 55px 55px; /* 内側の余白を上下左右で調整 */
    background-color: #ffffff; /* 白い背景 */
    border-radius: 16px; /* 角をさらに丸くしてモダンに */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* より深みのある影 */
    font-family: 'Noto Sans JP', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* 日本語対応フォントを優先 */
    color: #333333; /* 標準的なテキスト色 */
    line-height: 1.6; /* 行間を調整して読みやすく */
}

/* フォームタイトル */
#wpmem_reg fieldset legend,
#wpmem_login fieldset legend { /* legend タグがタイトルになっているのでここをターゲット */
    text-align: center;
    color: #2c3e50; /* 濃い目の色で強調 */
    margin-bottom: 40px; /* 下にしっかり余白 */
    font-size: 2.4em; /* タイトルを大きく */
    font-weight: 700; /* 太めのフォントウェイト */
    letter-spacing: -0.03em; /* 文字間隔を詰める */
    position: relative;
    padding-bottom: 15px; /* 下線とのスペース */
    display: block; /* legendはデフォルトでdisplay: blockですが念のため */
    width: 100%; /* 中央寄せのために幅を100%に */
}
#wpmem_reg fieldset legend::after,
#wpmem_login fieldset legend::after {
    content: '';
    display: block;
    width: 60px; /* 下線の長さ */
    height: 4px; /* 下線の太さ */
    background-color: #3498db; /* ブランドカラーの下線 */
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* フォームの説明文（例: 大学のメールアドレス...） */
/* これはid="wpmem_reg"の外にあるpタグなので、セレクタを調整 */
.entry-content > p:first-of-type {
    text-align: center;
    margin-bottom: 30px;
    color: #555555;
    font-size: 0.95em;
    line-height: 1.5;
}


/* =========================================================
   2. 各入力フィールドグループのスタイル
   ========================================================= */
/* div_text, div_select, div_multicheckbox は入力フィールドを囲むdivなので、その前のlabelにマージンを適用 */
#wpmem_reg .div_text,
#wpmem_reg .div_select,
#wpmem_reg .div_multicheckbox,
#wpmem_login .div_text {
    margin-bottom: 28px; /* 各入力行の下マージンを少し広めに */
}

/* ラベルのスタイル */
#wpmem_reg label,
#wpmem_login label { /* 全てのラベルに適用 */
    display: block;
    margin-bottom: 10px; /* ラベルと入力フィールドの間隔を確保 */
    font-weight: 600; /* 太めに */
    color: #444444; /* やや濃い色で明確に */
    font-size: 0.98em;
    line-height: 1.4;
}

/* 必須マーク */
#wpmem_reg .req-text, /* 「*必須項目」の行 */
#wpmem_reg .req { /* 個々のアスタリスク */
    color: #e74c3c; /* 赤色で強調 */
    font-size: 0.8em; /* やや小さく */
    margin-left: 6px; /* ラベルとの間隔 */
    font-weight: 500;
}
#wpmem_reg .req-text {
    text-align: left;
    margin-bottom: 15px !important; /* HTMLの配置に合わせて調整 */
}


/* =========================================================
   3. 入力フィールド（テキスト、メール、パスワード、ドロップダウン）
   ========================================================= */
/* 新規登録とログインフォームの通常のテキスト入力欄 */
#wpmem_reg .div_text input[type="text"],
#wpmem_reg .div_text input[type="email"],
#wpmem_reg .div_text input[type="password"],
#wpmem_login .div_text input[type="text"],
#wpmem_login .div_text input[type="password"] {
    width: 100%;
    padding: 15px 18px; /* パディングをやや増やして入力しやすく */
    border: 1px solid #e0e0e0; /* 細くて明るいグレーのボーダー */
    border-radius: 10px; /* 角を丸く */
    font-size: 1.05em; /* フォントサイズを調整 */
    color: #333333;
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    background-color: #fcfcfc; /* わずかにオフホワイトの背景 */
}

/* フォーカス時のスタイル */
#wpmem_reg input[type="text"].textbox:focus,
#wpmem_reg input[type="email"].textbox:focus,
#wpmem_reg input[type="password"].textbox:focus,
#wpmem_reg select.dropdown:focus,
#wpmem_login input[type="text"].textbox:focus,
#wpmem_login input[type="password"].textbox:focus {
    border-color: #3498db; /* ブランドカラーの枠線 */
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2); /* やや広めの影 */
    outline: none; /* デフォルトのアウトラインを消す */
    background-color: #ffffff; /* フォーカス時は白背景 */
}

/* ドロップダウン（select）のスタイル */
#wpmem_reg select.dropdown {
    appearance: none; /* デフォルトのスタイルを無効化 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23666666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* カスタム矢印アイコン（SVG） */
    background-repeat: no-repeat;
    background-position: right 18px center; /* 矢印の位置調整 */
    background-size: 20px;
    cursor: pointer;
}

/* プレースホルダーテキストのスタイル */
#wpmem_reg input.textbox::placeholder {
    color: #aaaaaa;
    opacity: 1; /* Firefox対策 */
}

/* =========================================================
   4. チェックボックス（希望業種など）
   ========================================================= */
/* 「希望業種」の見出し - HTMLでは label タグになっているので、そこをターゲットに */
#wpmem_reg label[for="futurejob"] {
    font-size: 1.15em;
    color: #333333;
    margin-top: 35px; /* 上にスペース */
    margin-bottom: 20px; /* 下にスペース */
    font-weight: 600;
}

/* チェックボックスのリストコンテナ */
#wpmem_reg .div_multicheckbox {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 可変グリッドで均等配置、幅を少し調整 */
    gap: 10px 20px; /* グリッド間の隙間 */
    margin-top: 15px;
    margin-bottom: 30px;
}
#wpmem_reg .div_multicheckbox .div_multicheckbox_separator {
    display: none; /* 区切り線を非表示 */
}

/* 各チェックボックス項目とそのラベル */
/* inputとlabelがbrで区切られているが、inputの隣接セレクタで対応可能 */
#wpmem_reg input[type="checkbox"][name^="futurejob"] + label.multicheckbox {
    display: inline-flex; /* チェックボックスとテキストを横並び */
    align-items: center; /* 垂直方向中央揃え */
    cursor: pointer;
    font-weight: normal;
    font-size: 0.95em;
    color: #555555;
    padding: 8px 0; /* ラベル内のパディング */
    margin-bottom: 0; /* デフォルトのラベルマージンをリセット */
}
/* brタグで改行されているため、input自体には margin-bottom は付けない */
#wpmem_reg input[type="checkbox"][name^="futurejob"] {
    margin-bottom: 0;
}


/* カスタムチェックボックスのスタイル */
#wpmem_reg input[type="checkbox"] {
    appearance: none; /* デフォルトの外観を無効化 */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px; /* サイズ */
    height: 20px;
    border: 2px solid #cccccc; /* 未チェック時のボーダー */
    border-radius: 4px; /* 少し角を丸く */
    margin-right: 10px; /* ラベルテキストとの間隔 */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

/* チェック時のカスタムスタイル */
#wpmem_reg input[type="checkbox"]:checked {
    background-color: #3498db; /* ブランドカラー */
    border-color: #3498db; /* ブランドカラー */
}

/* チェックマークの描画 (偽要素を使用) */
#wpmem_reg input[type="checkbox"]:checked::before {
    content: '';
    display: block;
    width: 6px; /* チェックマークのサイズ */
    height: 12px;
    border: solid #ffffff; /* 白いチェックマーク */
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 2px; /* 位置調整 */
    left: 6px;
}

/* =========================================================
   5. 送信ボタンのスタイル
   ========================================================= */
#wpmem_reg .button_div input[type="submit"].buttons,
#wpmem_login .button_div input[type="submit"].buttons { /* より具体的なセレクタで既存スタイルを上書き */
    display: block;
    width: 100%;
    padding: 25px 25px; /* パディングを調整 */
    background-color: #3498db; /* ブランドカラー */
    color: #ffffff; /* 白いテキスト */
    border: none;
    border-radius: 10px; /* 角を丸く */
    font-size: 1.2em; /* フォントサイズを大きく */
    font-weight: 700; /* 太めに */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 40px; /* 上に十分なスペース */
    letter-spacing: 0.05em; /* 文字間隔を広げて強調 */
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3); /* 影を追加 */
}

#wpmem_reg .button_div input[type="submit"].buttons:hover,
#wpmem_login .button_div input[type="submit"].buttons:hover {
    background-color: #2980b9; /* ホバー時の色 */
    transform: translateY(-3px); /* 少し上に浮き上がる */
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4); /* ホバー時の影を強調 */
}

#wpmem_reg .button_div input[type="submit"].buttons:active,
#wpmem_login .button_div input[type="submit"].buttons:active {
    transform: translateY(0); /* クリック時に戻す */
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2); /* クリック時の影 */
}

/* =========================================================
   6. その他のテキストと情報（CAPTCHAなど）
   ========================================================= */
/* CAPTCHAの画像と入力フィールドを囲むpタグ */
#wpmem_reg p img[alt="CAPTCHA"],
#wpmem_login p img[alt="CAPTCHA"] {
    display: block; /* 画像をブロック要素にして中央寄せしやすく */
    margin: 50px auto 10px; /* 中央寄せと上下の余白 */
    max-width: 100%; /* レスポンシブ対応 */
    height: auto;
}

#wpmem_reg label[for="siteguard_captcha"],
#wpmem_login label[for^="siteguard_captcha"] {
    display: block;
    text-align: center;
    font-size: 0.7em;
    color: #666;
    margin-bottom: 0;
}

#wpmem_reg input[type="text"]#siteguard_captcha,
#wpmem_login input[type="text"]#siteguard_captcha { /* id属性で確実にターゲット */
    width: 150px; /* CAPTCHA入力フィールドの幅を固定 */
    border: 1px solid #e0e0e0 !important; /* !important を追加して確実に上書き */
    border-radius: 10px;
    padding: 18px 18px;
    display: block;
    margin: 0 auto 25px;
    text-align: center;
}

/* ログインフォーム下部のリンク（パスワードを忘れた場合、新規ユーザー登録） */
/* wpmem_login の直下にある div_text または div_link_row のようなクラスを仮定。
   もしクラスがなければ、より汎用的なセレクタや、直接のdivを使う必要があります。
   スクリーンショットから div_text の次にある div にリンクが入っているようです。 */
#wpmem_login .wpmem-login-form p { /* WPMemがリンクをpタグで囲む場合 */
    text-align: center;
    margin-top: 15px; /* 上の要素との間隔 */
    font-size: 0.9em;
}
#wpmem_login .wpmem-login-form p a, /* リンクのスタイル */
#wpmem_login .wpmem-text a { /* 汎用的なWPMemのテキストリンク用クラス */
    color: #3498db; /* ブランドカラーのリンク色 */
    text-decoration: none;
    transition: color 0.3s ease;
    margin: 0 8px; /* リンク間の横方向の間隔 */
}

#wpmem_login .wpmem-login-form p a:hover,
#wpmem_login .wpmem-text a:hover {
    text-decoration: underline;
    color: #2980b9;
}

/* 「ログイン状態を保持する」チェックボックスのスタイル */
/* 新規登録フォームのチェックボックスと同じスタイルが適用されるはずですが、
   もし調整が必要ならここに記述します。*/
#wpmem_login input[type="checkbox"] {
    /* スタイルが必要な場合のみ追加 */
}
#wpmem_login input[type="checkbox"] + label {
    /* スタイルが必要な場合のみ追加 */
}

/* =========================================================
   7. レスポンシブデザイン（モバイル対応）
   ========================================================= */
@media (max-width: 768px) {
    #wpmem_reg,
    #wpmem_login {
        margin: 30px auto; /* モバイルでは左右のマージンを狭める */
        padding: 10px 10px; /* 内側のパディングも調整 */
        border-radius: 10px;
    }

    #wpmem_reg fieldset legend,
    #wpmem_login fieldset legend {
        font-size: 2em; /* タイトルを少し小さく */
        margin-bottom: 25px;
        padding-bottom: 10px;
    }
    
    #wpmem_reg fieldset legend::after,
    #wpmem_login fieldset legend::after {
        height: 3px;
        width: 50px;
    }

    .entry-content > p:first-of-type {
        font-size: 0.9em;
        margin-bottom: 20px;
    }

    #wpmem_reg .div_text,
    #wpmem_reg .div_select,
    #wpmem_reg .div_multicheckbox,
    #wpmem_login .div_text {
        margin-bottom: 20px;
    }

    #wpmem_reg input[type="text"].textbox,
    #wpmem_reg input[type="email"].textbox,
    #wpmem_reg input[type="password"].textbox,
    #wpmem_reg select.dropdown,
    #wpmem_login input[type="text"].textbox,
    #wpmem_login input[type="password"].textbox {
        padding: 15px 15px; /* パディングを調整 */
        font-size: 1em;
    }

    #wpmem_reg label,
    #wpmem_login label {
        font-size: 0.9em;
    }

    #wpmem_reg label[for="futurejob"] {
        font-size: 1.1em;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    #wpmem_reg .div_multicheckbox {
        grid-template-columns: 1fr; /* 1列表示にする */
        gap: 8px;
    }
    #wpmem_reg input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
    #wpmem_reg input[type="checkbox"]:checked::before {
        width: 5px;
        height: 10px;
        top: 2px;
        left: 5px;
    }

    #wpmem_reg .button_div input[type="submit"].buttons,
    #wpmem_login .button_div input[type="submit"].buttons {
        font-size: 1.1em;
        padding: 20px 20px;
        margin-top: 30px;
    }

    #wpmem_reg input[type="text"]#siteguard_captcha,
    #wpmem_login input[type="text"][id^="siteguard_captcha"] {
        width: 180px; /* モバイルで少し小さく */
    }

    /* ログインフォームのリンク */
    #wpmem_login .wpmem-login-form p {
        margin-top: 10px;
        font-size: 0.8em;
    }
}