@charset "utf-8";

/*===============================================================================
  PC画面のレイアウト設定
===============================================================================*/
@media screen and (min-width: 835px) {
    /*===============================================================================
      全体的な定義
    ===============================================================================*/
    #content {
        margin-top: 80px;
    }

    #header {
        height: 70px;
    }

    /* ヘッダー ---------- */
    /* タイトル */
    .head-title {
        width: 60%;
        font-size: 2rem;
        align-self: center;
    }

    /* ユーザ名 */
    .user-name {
        width: 40%;
        align-self: end;
        /* text-align: right; */
    }

    .user-name div {
        margin-right: 50px;
        float: right;
    }

    /* MENU */
    .head-menu {
        width: 5%;
    }

    .drawer_open {
        height: 100%;
        width: 70%;
    }
    /* ヘッダー ---------- */

    /* MENU ---------- */
    /* アイコンがクリックされたらメニューを表示 */
    #drawer_input:checked ~ .nav_content {
        left: 70%; /* メニューを画面に入れる */
    }
    /* MENU ---------- */

    .w-top {
        width: 50%;
    }

    .w-per {
        width: 50%;
    }

    /*===========================================================
      ログイン
    ===========================================================*/
    .login {
        width: 50%;
    }

    /*===========================================================
      TOP
    ===========================================================*/
    .con-summary {
        display: flex;
    }

    table.con-tbl-total {
        display: block;
        align-self: end;
        border: solid 1px #acacac;
    }

    table.con-tbl-acct {
        margin-right: 1.2rem;
        border: solid 1px #acacac;
        /* min-width: 300px; */
        max-width: 500px;
    }

    /*===========================================================
      メールアドレス変更画面
    ===========================================================*/
    .now-mail-wrap {
        justify-content: space-between;
        display: flex;
        align-items: center;
    }

    /*===========================================================
      メッセージ画面
    ===========================================================*/
    .msg-wrap {
        width: 60%;
    }
}