@charset "UTF-8";


/* 1. メインコンテンツ全体の配置 */
.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    box-sizing: border-box;
    
    flex: 1; 
    
     /* 背景画像 */
    background-image: url("/c5/img/login_background.png"); 
    background-size: cover;                  /* 画像を広げる */
    background-position: center; 
}

/* 2. 白いカードの箱 (login-card) */
.login-card {
    background: #ffffff;
    border-radius: 16px; /* 丸みのある角 */
    box-shadow: 0 8px 24px rgba(255, 182, 193, 0.2); /* ピンク影 */
    width: 100%;
    max-width: 480px; /* カードの最大横幅 */
    padding: 24px 40px;
    box-sizing: border-box;
    text-align: center;
}

.login-card h1 {
    font-size: 24px;
    color: #333333;
    margin: 0 0 12px 0;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.login-instruction {
    font-size: 14px;
    color: #888888;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* 3. 各入力項目の並び (form-group) */
.form-group {
    text-align: left;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #4a4a4a;
    margin-bottom: 8px;
}

/* テキストボックス・パスワードボックスの共通デザイン */
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #fafafa;
}

/* 入力欄にカーソルが当たった時（フォーカス） */
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    border-color: #ff5a79; 
    outline: none;
    background-color: #ffffff;
}

.form-help {
    font-size: 12px;
    color: #999999;
    margin: 6px 0 0 0;
}

/* 4. パスワード入力欄と鍵アイコンを綺麗に配置するレイアウト */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

/* 鍵アイコンの位置固定 */
.password-icon {
    position: absolute;
    left: 1px;
    top:50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

/* アイコンと文字が重ならないよう、パスワードの入力欄だけ左余白を広くする */
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    padding-left: 38px; 
}

/* 5. あなたは？（ママ/パパ選択の横並びボタン） */
.user-type-options {
    display: flex;
    gap: 12px;
}

.user-type-btn {
    flex: 1;
    display: flex;
    align-items: center;		/* 中身を真ん中に寄せる */
    justify-content: center;   /* 左右の中央に揃える */    
    justify-content: center;
    gap: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding:  8px 10px;
    font-size: 14px;
    cursor: pointer;
    background: #ffffff;
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
    user-select: none;
    box-sizing: border-box;
}

/* ラジオボタンのポインタを指マークにする */
.user-type-btn input[type="radio"] {
    cursor: pointer;
    margin: 0;
}

/* ママ・パパのイラスト画像サイズ */
.user-type-image {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

/* ラジオボタンにチェックが入ったら、ボタンの枠と背景をピンクにする */
.user-type-btn:has(input[type="radio"]:checked) {
    border-color: #ff5a79;
    background-color: #fff5f7;
    font-weight: bold;
}

/* 6. パスワード表示切り替えエリア */
.show-password-wrapper {
    margin-top: 10px;
    margin-bottom: 0 !important; 
    display: flex;
    align-items: center;
    gap: 6px;
}

.show-password-wrapper input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.show-password-label {
    font-size: 13px;
    color: #666666;
    cursor: pointer;
    user-select: none;
}

/* 7. ログイン / 登録 ボタン */
.form-actions {
    margin-top: 16px;
}

.login-btn {
    width: 100%;
    margin-top: -50px !important;
    background-color: #ff5a79; 
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    letter-spacing: 0.1em;
}

.login-btn:hover {
    background-color: #e04865; 
}

.login-btn:active {
    transform: scale(0.98); /* クリックした瞬間に少し沈むアニメーション */
}

/* 8. 下部の画面切り替えリンク */
.signup-link {
    margin-top: 28px;
    font-size: 14px;
    color: #666666;
}

.signup-link a {
    color: #ff5a79;
    text-decoration: none;
    font-weight: bold;
    margin-left: 4px;
}

.signup-link a:hover {
    text-decoration: underline;
}

/* 9. メッセージボックス */
/* エラーメッセージ（赤色） */
.login-error-msg {
    background-color: #ffeef0;
    border: 1px solid #ffccd3;
    color: #d93838;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 24px;
    text-align: left;
    line-height: 1.4;
}

/* 会員登録完了メッセージ（緑色） */
.touroku-success-msg {
    background-color: #e6f9f0;
    border: 1px solid #b3f0d2;
    color: #1da362;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.4;
}

/*  ヘッダーの全体の高さを細くする */
header {
    height: 80px; 
    padding: 15px 50px 15px 20px; 
    background: #ffffff;      
    border-bottom: 1px solid #f8dce4;
}

/*  ロゴ画像を小さくする */
.logo-image {
    height: 90px; 
}

/* ママ・パパの文字サイズも調整 */
.user-area {
    font-size: 20px; 
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.footer {
    margin-top: auto; 
    padding: 15px 0;  
    text-align: center;
    background: #ffffff; 
    border-top: 1px solid #f8dce4;
}

.footer-title {
    font-size: 16px; 
    font-weight: bold;
    letter-spacing: 1px;
    color: #ff6f9d;
}




/* ==========================
   モバイル対応
========================== */
@media (max-width:767px){

    /* 全体 */
    .wrapper{
        padding:15px;
        background-position:center;
    }

    /* ログインカード */
    .login-card{
        max-width:none;
        width:75%;

        padding:30px;
        border-radius:12px;
    }

    .login-card h1{
        font-size:20px;
    }

    .login-instruction{
        font-size:12px;
        margin-bottom:12px;
    }

    /* 入力欄 */
    .form-group{
        margin-bottom:15px;
    }

    .form-group label{
        font-size:13px;
    }

    .form-group input[type="text"],
    .form-group input[type="password"]{
        padding:10px 12px;
        font-size:14px;
    }

    /* 鍵アイコン */
    .password-icon{
        width:35px;
        height:35px;
    }

    .password-input-wrapper input[type="password"],
    .password-input-wrapper input[type="text"]{
        padding-left:34px;
    }

    /* ママ・パパ選択 */
    .user-type-options{
        gap:8px;
    }

    .user-type-btn{
        padding:8px;
        font-size:12px;
    }

    .user-type-image{
        width:20px;
        height:20px;
    }

    /* パスワード表示 */
    .show-password-label{
        font-size:12px;
    }

    /* ボタン */
    .login-btn{
        margin-top:0 !important;
        padding:12px;
        font-size:15px;
    }

    /* メッセージ */
    .login-error-msg,
    .touroku-success-msg{
        font-size:12px;
        padding:10px 12px;
        margin-bottom:15px;
    }

    /* ヘッダー */
    header{
        height:60px;
        padding:10px 15px;
    }

    .logo-image{
        height:55px;
    }

    /* フッター */
    .footer{
        padding:12px 0;
    }

    .footer-title{
        font-size:14px;
    }

    .copyright{
        font-size:10px;
    }
}