/*#######################################################*/
/*entry_form.css                                         */
/*「ウィンドウ」のような形の汎用枠                          */
/*#######################################################*/

/*********************************************************/
/*entry_formの枠組み全体div*/
/*********************************************************/
.entry_form
{
    /*横幅;*/
    width: 90%;
    max-width: 600px; /*700px;*/
    /*境界の外側でサイズを指定する*/
    box-sizing: border-box;
    /*余白*/
    margin: 20px auto 40px auto;
    padding: 0 0 10px 0;
    /*枠線*/
    background-color: #F0FAFF;
    border-radius: 6px;
}
/*=======================================================*/
/*entry_form h1タグ*/
.entry_form h1
{
    /*余白*/
    padding: 5px 0px 5px 30px;
    margin : 10px 0 10px 0;
    /*フォント*/
    font-weight: bold;
    font-size: 1.2rem;
    /*背景色と枠線*/
    background-color: #D5E5FF;
    border-radius: 6px 6px 0 0 ;
}
/*=======================================================*/
/*entry_formのtable*/
.entry_form table
{
    /*枠線は1本*/
    border-collapse: collapse;
    /*中央寄せ*/
    margin: 20px auto 10px auto;
}
/*=======================================================*/
/*entry_formのtable th*/
.entry_form table th
{
    /*枠線*/
    border: 1px solid #B3B3B3;
    /*文字は折り返さない*/
    white-space: nowrap;
    /*寸法*/
    margin: 0;
    padding: 10px 20px;
    /*左寄せ*/
    text-align: left;
    font-size:16px;
}
/*=======================================================*/
/*entry_formのtable th内の小さい文字（電話番号の「半角，ハイフンなし」など）*/
.entry_form table th span.small
{
    /*フォント*/
    font-size: 15px;
    font-weight: bold;
}
/*=======================================================*/
/*entry_formのtable td*/
.entry_form table td
{
    /*枠線*/
    border: 1px solid #B3B3B3;
    /*文字は折り返さない*/
    white-space: nowrap;
    /*余白*/
    padding: 10px 20px;
    margin: 0;
}
/*=======================================================*/
/*entry_formのtable 「ログインしたままにする」のtd*/
.entry_form table tr.auto_login td
{
    /*枠線*/
    border: none;
    /*余白*/
    padding: 10px 0;
    margin: 0;
}
/*=======================================================*/
/*entry_formのtable 「ログインしたままにする」のcheckbox用のlabel*/
.entry_form table tr.auto_login label
{
    /*余白*/
    margin: 10px 0px 10px 10px;
    /*ユーザ選択無効*/
    user-select: none;
}
/*=======================================================*/
/*entry_formのtable エラー表示用のtr*/
.entry_form table tr.error td
{
    /*枠線*/
    border: none;
    /*文字色*/
    color: #D40000;
    /*余白*/
    margin: 0;
    padding: 0px;
}
/*=======================================================*/
/*entry_form内のinput*/
.entry_form input
{
    /*フォント*/
    font-size: 100%;
    /*余白*/
    padding: 5px;
}
/*=======================================================*/
/*entry_form内のpタグ*/
.entry_form p
{
    /*余白*/
    margin: 20px 0 20px 10px;
    padding: 0 10px;
}
/*=======================================================*/
/*entry_form 注意書き用のpタグ*/
.entry_form p.message
{
    /*文字色*/
    color: blue;
}
/*=======================================================*/
/*entry_form エラー用のpタグ*/
.entry_form p.error
{
    /*文字色*/
    color: #D40000;
    /*余白*/
    margin: 0;
    padding: 0
}
/*=======================================================*/
/*entry_form内のaタグ*/
.entry_form a
{
    /*文字色*/
    color: black;
    /*リンクの下線を消す*/
    text-decoration: none;
}
/*=======================================================*/
/*entry_form内のbutton*/
.entry_form button
{
    /*通常のフォント・サイズにして選択無効にする*/
    font-size: 100%;
    user-select: none;
    /*文字色*/
    color: black;
    font-weight: normal;
    /*余白*/
    display: block;
    margin: 20px auto 10px auto;
    /*ボタンのサイズ*/
    padding: 5px 10px;
    /*色と枠線*/
    background: linear-gradient(#F6F6F6 70%, #CCCCCC);
    border: 1px solid #B3B3B3;
    border-radius: 5px;
}
/*=======================================================*/
/*entry_form内のbutton マウス・ホバー時*/
.entry_form button:hover
{
    /*背景色*/
    background: linear-gradient(to bottom, #D5FFFF 5%, #A6D0D8);
    /*枠線*/
    border: 1px solid #55DDFF;
}
/*=======================================================*/
/*entry_form内の「戻る」と「確認」ボタンを囲み中央寄せするためのdiv*/
/*（mail_edit.php，mail_entry.phpで使用）*/
.entry_form .back_entry_button
{
    /*余白*/
    margin: 0 auto;
    padding: 0;
    /*子要素をflexboxレイアウトで表示し中央寄せ*/
    display: flex;
    justify-content: center;;
}
/*=======================================================*/
/*entry_form .back_entry_button内のbutton*/
.entry_form .back_entry_button button
{
    /*フォント*/
    font-weight: normal;
    /*余白*/
    margin: 10px 20px;
}
/*=======================================================*/
/*メールアドレス用のinput*/
.entry_form input[type="email"]
{
    /*横幅*/
    max-width: 350px;
    /*境界の外側で寸法を指定する*/
    box-sizing: border-box;
    /*余白*/
    margin: 0;
    padding: 5px;
}
/*=======================================================*/
/*パスワード用のinput*/
.entry_form input[type="password"]
{
    /*横幅*/
    max-width: 350px;
    /*境界の外側で寸法を指定する*/
    box-sizing: border-box;
    /*余白*/
    margin: 0;
    padding: 5px;
}
/*=======================================================*/
/*画面の横幅が768px未満の場合*/
@media screen and (max-width: 767px)
{
    /*===================================================*/
    /*モバイル用 entry_form h1タグ*/
    .entry_form h1
    {
        /*フォント*/
        font-size: 1rem;
        /*余白*/
        padding: 5px 0px 5px 10px;
        margin : 10px 0 0 0;
    }
    /*===================================================*/
    /*モバイル用 entry_form pタグ*/
    .entry_form p
    {
        /*フォント*/
        font-size: 14px;
        /*余白*/
        margin: 10px 0 10px 10px;
    }
    /*===================================================*/
    /*モバイル用 entry_form ulタグ*/
    .entry_form ul
    {
        /*フォント*/
        font-size: 14px;
    }
    /*===================================================*/
    /*モバイル用 entry_formのtable*/
    .entry_form table
    {
        /*枠線*/
        border: none;
        /*余白*/
        margin: 10px auto 10px auto;
    }
    /*===================================================*/
    /*モバイル用 entry_formのtable th*/
    .entry_form table th
    {
        /*フォント*/
        font-size: 14px;
        /*余白*/
        padding: 0px 20px 0 0;
        /*枠線*/
        border: none;
    }
    /*===================================================*/
    /*モバイル用 entry_formのtable td*/
    .entry_form table td
    {
        /*フォント*/
        font-size: 16px;
        /*余白*/
        margin: 0;
        padding: 0 0 5px 0;
        /*枠線*/
        border: none;
    }
    /*===================================================*/
    /*モバイル用 entry_formのtable th内の小さい文字（電話番号の「半角，ハイフンなし」など）*/
    .entry_form table th span.small
    {
        /*フォント*/
        font-size: 12px;
        font-weight: bold;
    }
    /*===================================================*/
    /*モバイル用 entry_formのtable 「ログインしたままにする」のtd*/
    .entry_form table tr.auto_login td
    {
        /*余白*/
        padding: 0px 0;
        margin: 0;
    }
    /*===================================================*/
    /*モバイル用 entry_form 注意書き用のpタグ*/
    .entry_form p.message
    {
        /*フォント*/
        font-size: 14px;
    }
    /*===================================================*/
    /*モバイル用 entry_form エラー用のpタグ*/
    .entry_form p.error
    {
        /*フォント*/
        font-size: 16px;
    }
    /*===================================================*/
    /*モバイル用 entry_form内のbutton*/
    .entry_form button
    {
        /*通常のフォント・サイズにして選択無効にする*/
        font-size: 14px;
        /*ボタンのサイズ*/
        padding: 5px 10px;
    }
    /*===================================================*/
    /*モバイル用 メールアドレス用のinput*/
    .entry_form input[type="email"]
    {
        /*横幅*/
        width: 95%;
        max-width: 300px;
        /*境界の外側で寸法を指定する*/
        box-sizing: border-box;
    }
    /*===================================================*/
    /*モバイル用 パスワード用のinput*/
    .entry_form input[type="password"]
    {
        /*横幅*/
        width: 95%;
        max-width: 300px;
        /*境界の外側で寸法を指定する*/
        box-sizing: border-box;
    }
}



/*###########################################################################*/
/*クレジットカード変更ページ（card_edit.php）用のentry_form内のtable*/
/*（table以外の要素はentry_formのスタイルがそのまま適用される）*/
/*###########################################################################*/



/*********************************************************/
/*クレジットカード変更ページ table*/
/*（2つのテーブルの幅を揃えるためにtableとthの幅を指定している）*/
/*********************************************************/
.entry_form table.card
{
    /*寸法*/
    width: 500px;
    /*枠線*/
    border-collapse: collapse;
    /*余白*/
    margin: 10px auto;
    padding: 0;
}
/*=======================================================*/
/*クレジットカード変更ページ table th*/
.entry_form table.card th
{
    /*横幅*/
    width: 180px;
    /*枠線*/
    border: 1px solid #B3B3B3;
    /*余白*/
    margin: 0;
    padding: 5px 10px;
}
/*=======================================================*/
/*クレジットカード変更ページ table td*/
.entry_form table.card td
{
    /*枠線*/
    border: 1px solid #B3B3B3;    
    /*余白*/
    margin: 0;
    padding: 5px 20px;
}
/*=======================================================*/
/*クレジットカード変更ページ table エラー用のp*/
.entry_form table.card td.error
{
    /*フォント*/
    color: #D40000;
    /*枠線*/
    border: none;
    /*余白*/
    margin: 0;
    padding: 0;
}
/*=======================================================*/
/*クレジットカード変更ページ table input*/
.entry_form table.card input
{
    /*横幅*/
    width: 100%;
}
/*=======================================================*/
/*画面の横幅が768px未満の場合*/
@media screen and (max-width:767px)
{
    /*===================================================*/
    /*モバイル用のカード変更ページ table*/
    .entry_form table.card
    {
        /*横幅の指定を解除*/
        width: auto;
        /*枠線*/
        border-collapse: collapse;
        /*余白*/
        margin: 10px auto;
        padding: 0;
    }
    /*===================================================*/
    /*モバイル用のカード変更ページ table th*/
    .entry_form table.card th
    {
        /*横幅の指定を解除*/
        width: auto;
        /*枠線*/
        border: none;
        /*余白*/
        margin: 0;
        padding: 0;
    }
    /*===================================================*/
    /*モバイル用のカード変更ページ table td*/
    .entry_form table.card td
    {
        /*枠線*/
        border: none;
        /*余白*/
        margin: 0;
        padding: 0 0 5px 0;
    }
}



/*###########################################################################*/
/*エラー用のentry_form*/
/*###########################################################################*/



/*********************************************************/
/*エラー用のentry_form_error 枠組み全体のdiv*/
/*（全体的に赤色）*/
/*********************************************************/
.entry_form_error
{
    /*横幅;*/
    width: 90%;
    max-width: 600px;
    /*余白*/
    margin: 20px auto 40px auto;
    padding: 0 0 10px 0;
    /*枠線*/
    background-color: #FFF0F0;
    border-radius: 6px;
}
/*=======================================================*/
/*エラー用のentry_form_error h1タグ*/
.entry_form_error h1
{
    /*余白*/
    padding: 5px 0px 5px 30px;
    margin : 10px 0 20px 0;
    /*フォント*/
    font-weight: bold;
    font-size: 1.2rem;
    color: #D40000;
    /*背景色と枠線*/
    background-color: #FFD5D5;
    border-radius: 6px 6px 0 0 ;
}
/*=======================================================*/
/*エラー用のentry_form_error pタグ*/
.entry_form_error p
{
    /*余白*/
    margin: 5px 0 20px 10px;
    padding: 0 10px;
}
/*=======================================================*/
/*エラー用のentry_form_error aタグ*/
.entry_form_error a
{
    /*文字色*/
    color: black;
    /*リンクの下線を消す*/
    text-decoration: none;
}
/*=======================================================*/
/*エラー用のentry_form_error button*/
.entry_form_error button
{
    /*フォント*/
    font-size: 100%;
    color: black;
    /*ユーザ選択無効*/
    user-select: none;
    /*余白*/
    display: block;
    margin: 10px auto 10px auto;
    /*ボタンのサイズ*/
    padding: 5px 20px;
    /*背景色*/
    background: linear-gradient(#F6F6F6 70%, #CCCCCC);
    /*枠線*/
    border: 1px solid #B3B3B3;
    border-radius: 5px;
}
/*=======================================================*/
/*エラー用のentry_form_error button マウス・ホバー時*/
.entry_form_error button:hover
{
    /*背景色*/
    background: linear-gradient(to bottom, #D5FFFF 5%, #A6D0D8);
    /*枠線*/
    border: 1px solid #55DDFF;
}
/*=======================================================*/
/*画面の横幅が768px未満の場合*/
@media screen and (max-width: 767px)
{
    /*===================================================*/
    /*entry_form_error h1タグ*/
    .entry_form_error h1
    {
        /*余白*/
        padding: 5px 0px 5px 20px;
        margin : 10px 0 0 0;
        /*フォント*/
        font-size: 1rem;
    }
    /*===================================================*/
    /*モバイル用 entry_form pタグ*/
    .entry_form_error p
    {
        /*フォント*/
        font-size: 14px;
        /*余白*/
        margin: 10px 0 10px 10px;
    }
    /*===================================================*/
    /*モバイル用 entry_form ulタグ*/
    .entry_form_error ul
    {
        /*フォント*/
        font-size: 14px;
    }
    /*===================================================*/
    /*entry_form_errorのtable th*/
    .entry_form_error table th
    {
        /*フォント*/
        font-size: 14px;
    }
}