/**
 * ログイン情報エリアのスタイル
 *  2025.07.16 created こちらにまとめて、共通使用する
 *  2025.07.17-18 update 
 *    閉じるボタン追加、エラーメッセージエリア追加、.salseの場合表示調整追加
 *  2025.07.24 update
 *  2025.08.21 update 
 **/


/* - ログイン＆ログイン情報エリア start ------- */
#h-login-area{
    width: 40%;
    float: right;
    text-align: right;
}
#inner-header #h-login-area{ /* 2025.08.21 add */
    width: 50%;
}
.salse #h-login-area { 
    top: 0;
    position: absolute;
    right: 0;
}
/* 2025.8.21 add start  */
#inner-header #h-login-area .edit-profile-link{
    display: none;/* この場合は非表示 */
}
#inner-header #h-login-area .login-info-area{
    padding-right: 1.5em;
    padding-left: 0.2em;
}
/* 2025.8.21 add end  */


/* -- ログイン前後 共通 -- */
#h-login-area .slidein-login-form
{
    padding: 0.5em 1em 0.3em;
    line-height: 1.5;
}


/* -- ログイン前 -- */
#h-login-area #login-btn-check {
    display: none;
}

/* ---「ログイン」テキスト */
#h-login-area .login-text{
    /* position: relative; */
    cursor: pointer;
}
#h-login-area .login-text::after{
    /* content:'▼'; */
    font-family: 'Material Icons';
    content: '\e5c5';
    font-size: 1.8em;
    position: relative;
    top: 8px;
    left: -3px;
    line-height: 1;
}

/* ---ログインFORMエリア：非表示 */
#h-login-area .slidein-login-form
{
    /* display: none; */
    width: 350px;
    /* height: 100%; */
    height: 100vh;/* 2025.07.18 add */
    position: absolute;
    top: 3em;
    right: -350px;/* メニューを画面外へ配置 */
    z-index: 80;
    background-color: #e8e8e8;
    text-align: left;
    transition: all 0.5s;/* アニメーション設定 */
}
/* --- ログインFORMエリア:表示 start ------ */
#h-login-area #login-btn-check:checked ~ .slidein-login-form
{
    right: 0;/* ログインForm 見える位置へ*/
}
#h-login-area #login-btn-check:checked ~ .login-text::after{
    /* content:'▲'; */
    font-family: 'Material Icons';
    content: '\e5c7';
}
/* --- ログインFORMエリア:表示 end  ------ */

/* 2025.07.17 del
--- ログインエラー遷移の場合、FORM上部にエラーMSG表示用のスペースを 2023.08.24 add
#h-login-area #login-btn-check:checked[value="1"] ~ .swpm-login-widget-form .swpm-login-form-inner
{
    margin-top: 1em;
} */

/* --- ログインFORM 各種入力欄の調整 start ---*/
#h-login-area .input-label{
    color: #888;
    font-size: 0.8em;
    font-weight: bold;
}
#h-login-area .remember-me .input-label{
    padding-left: 0.5em;
}
#h-login-area .slidein-login-form .input-text
{
    width: 100%;
    background-color:#fff;
}

#h-login-area .login-submit
{
    text-align: center;
    margin: 1em 0;
}

/* PW欄 2025.03.25 add start */
#h-login-area .password-input{
    position: relative;
}
#h-login-area .password-input .show-password-input {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.7em;
}
#h-login-area .password-input .show-password-input::before {
    font-weight: 400;
    font-style: normal;
    font-size: 1.2em;
    color: #2271b1;

    font-family: dashicons;
    content: "\f177"; /* 目アイコン(open) */
}
#h-login-area .password-input .show-password-input.display-password::before{
    content: "\f530"; /* 目アイコン(no) */
}
/* PW欄 2025.03.25 add end   */

/* 2025.07.24 add start 
 * WooCommerceのCSS設定を打ち消す(独自指定と重複するため)
*/
.woocommerce #h-login-area form .show-password-input{
    transform: unset;
    line-height: initial;
}
.woocommerce #h-login-area form .show-password-input::after{
    content:"";
}
/* 2025.07.24 add end   */

#h-login-area .swpm-forgot-pass-link,
#h-login-area .swpm-join-us-link {
    line-height: 1.3;
    font-size: 0.9em;
}
/* 2025.07.17 del
----- メッセージエリア 無理やり一番上に表示 2023.08.24 add 
#h-login-area .swpm-login-action-msg{
    position: absolute;
    top:0;
    margin: 0.5em 0;
}*/
/* ログインエラーMSG 2025.07.17 add */
#h-login-area .login-error-message{
    font-size:0.9em;
    color: #f33;
    padding: 1em 0;
}
#h-login-area .login-error-message::before{
    content:'＊';
}
/* 閉じるボタン 2025.07.17 add start */
#h-login-area .close-btn-area {
    text-align: right;
}
#h-login-area .close-btn-area .close-button {
    cursor: pointer;
    display: inline-block;
    margin: 10px;
    padding: 0.1em 0.5em 0.1em 1.5em;
    border: 1px #666 solid;
    border-radius: 5px;
    font-size: 0.9em;
    position: relative;
}
#h-login-area .close-btn-area .close-button::before {
    content: "×";
    font-size: 1.3em;
    color: #333;
    position: absolute;
    top: -2px;
    left: 0.3em;
  }
/* 閉じるボタン 2025.07.17 add end */

/* --- ログインFORM 各種入力欄の調整 start ---*/


/* -- ログイン後 -- */
/* ログイン情報の表示を調整(カスタム作成版) 2025.03.25 add start */
#h-login-area .login-info-area
{
    /* padding: 0.5em 1em 0.3em; 2025.08.21 */
    padding: 0.5em 1em 0.3em 0.1em;
    line-height: 1.5;
}
#h-login-area .login-info-area a{
    position: relative;
    font-weight: bold;
}
#h-login-area .login-info-area a::before
{
    font-family: 'Material Icons';
    content: '\e5df';
    font-size: 1.5em;
    position: absolute;
    top: -4px;
    left: -16px;
}
#h-login-area .login-info-area .logged-label
{   
    display: block;
    font-size: 0.7em;
    font-weight: bold;
    color: #888;
    margin-bottom: 0.5em;
    /* margin-bottom: 1em; 2025.08.21*/
    line-height: 1;
}

#h-login-area .login-info-area .logged-label .logged-value{
    font-size: 1.4em;
    font-weight: bold;
    color: #333;
    /* margin-left: 0.3em; */
    display: block;
}
#h-login-area .login-info-area .logged-logout-link
,#h-login-area .login-info-area .edit-profile-link
,#h-login-area .login-info-area .my-courses-link
{
    font-size: 0.8em;
    margin-left: 0.8em;
    line-height: 1.3;
}
/* ログイン情報の表示を調整(カスタム作成版) 2025.03.25 add end */

/* - ログイン＆ログイン情報エリア end ------- */

@media only screen and (min-width: 769px) {

    /* - ログイン＆ログイン情報エリア star ------- */
    /* 2025.8.21 add start  */
    #inner-header #h-login-area { 
        top: 0;
        position: absolute;
        right: 2%;
    }
    #inner-header #h-login-area .login-info-area{
        padding-right: 1em;
        padding-top: 0;
    }
    /*2025.8.21 add end */

    /* -- ログイン前後 共通 -- */
    #h-login-area .swpm-login-widget-form,
    #h-login-area .swpm-login-widget-logged {
        padding: 1em 1em 0.3em;
    }
    /* -- ログイン後 -- */
    #h-login-area .swpm-logged-username{
        display: block;
    }
    #h-login-area .swpm-logged-label{
        font-size: 0.7em;
        display: inline;
    }
    #h-login-area .swpm-logged-value {
        font-weight: bold;
        display: inline;
    }

    /* 2025.03.25 add */
    #h-login-area .login-info-area .logged-label
    {   
        /* display: block;
        font-size: 0.7em;
        font-weight: bold;
        color: #888;
        margin-bottom: 0.5em; */
        margin-bottom: 0.5em;
        line-height: 1.5;
    }
    #inner-header #h-login-area .login-info-area .logged-label{ /* 2025.08.21 add*/
        margin-bottom: 0;
    }
    #h-login-area .login-info-area .logged-label .logged-value{
        /* font-size: 1.4em;
        font-weight: bold;
        color: #333; */
        margin-left: 0.3em;
        display: inline-block;
    }


    /* - ログイン＆ログイン情報エリア end ------- */

}