:root{

    /*bootstrap上書き------------------*/
    --bs-body-color: #30201D;
    --bs-body-font-size: 1.3rem;

    --bs-modal-color:#30201D;
    /*---------------------------------*/

    --main-body-bg-color:  #fcece9;

    --title-bg-color:  #ab4c3c;
    --title-color:  #f4f3f2;

    --nav-bg-color:  #e3e2e1;
    --nav-color:  #30323a;

    --nav-mask-bg-color: #f4f3f2;

    --error-icon-color: #e24c47;
    --error-message-color: #5f6570;

    --card-bg-color: #FDF4F2;
    --card-shadow-color: #999190;

    --placeholder-color: #bdc5d1;

    --btnLogin-main-color: #007bff;
    --btnLogin-hover-color:hwb(211 10% 0%);
    --btnLogin-active-color:hwb(211 20% 0%);
  
    --btnLogout-color: #e24c47;

    --btnCall-main-color: #f39237;
    --btnCall-hover-color:hwb(29 32% 5%);
    --btnCall-active-color:hwb(29 42% 5%);

    --btnDial-main-color: #3bc14a;
    --btnDial-hover-color:hwb(127 23% 34%);
    --btnDial-active-color:hwb(127 23% 44%);

    --btnWrite-main-color: #007bff;
    --btnWrite-hover-color: hwb(211 10% 0%);
    --btnWrite-active-color: hwb(211 20% 0%);

    --modalOkButton-main-color:#007bff;
    --modalOkButton-hover-color:hwb(211 10% 0%);
    --modalOkButton-active-color:hwb(211 20% 0%);
}

/*bootstrap上書き------------------*/
.form-control{
    font-size: var(--bs-body-font-size);
}
/*--------------------------------*/

body{
    background-color: var(--main-body-bg-color);
    font-family: "Helvetica Neue",
                    Arial,
                    "Hiragino Kaku Gothic ProN",
                    "Hiragino Sans",
                    Meiryo,
                    sans-serif;
    min-width: 320px;
    height: 100dvh;
}

::placeholder{
    color: var(--placeholder-color) !important;
}

.page-title{
    background-color: var(--title-bg-color);
    color: var(--title-color);
}

.card{
    box-shadow: 3px 3px 6px var(--card-shadow-color);
    border: none;
}

#login-error-icon, #newpass-error-icon{
    font-size: 0.9rem;
    color: var(--error-icon-color);
}

#login-error-message{
    font-size: 0.9rem;
    color: var(--error-message-color);
}

#newpass-error-message{
    font-size: 0.8rem;
    color: var(--error-message-color);
}

#login-remark{
    font-size: 0.9rem;
}

#btnLogin, #btnCall, #btnDial{
    border-radius: 100vh;
    width: 220px !important;
    height: 50px;
    font-size: calc(var(--bs-body-font-size) + 0.1rem);
}

#btnWrite{
    width: 90px;
    font-size: calc(var(--bs-body-font-size) - 0.1rem);
}

#btnLogin > i, #btnCall > i, #btnDial > i, #btnWrite > i{   
    font-size: calc(var(--bs-body-font-size) + 0.1rem);
}

#alertBtnOK, #confirmBtnOK, #confirmBtnCancel, #changePassBtnCancel, #changePassBtnOK{
    font-size: calc(var(--bs-body-font-size) - 0.2rem);
    width: 100px;
}

#dialogAlert, #dialogConfirm, #dialogChangePass{
    font-size: calc(var(--bs-body-font-size) - 0.2rem);
}

/*ボタン設定*/

/*ログインボタン------------------------------------------------------------*/
#btnLogin{
    background-color: var(--btnLogin-main-color);
    border-color: var(--btnLogin-main-color);
}

#btnLogin:hover{
    background-color: var(--btnLogin-hover-color);
    border-color: var(--btnLogin-hover-color);
}

#btnLogin:focus{
    box-shadow: var(--btnLogin-main-color);
}

#btnLogin:active{
    background-color: var(--btnLogin-active-color);
    border-color: var(--btnLogin-active-color);
}
/*----------------------------------------------------------------------*/


/*ログアウトボタン------------------------------------------------------------*/
#btnLogout{
    color: var(--btnLogout-color);
}
/*----------------------------------------------------------------------*/

/*Callボタン------------------------------------------------------------*/
#btnCall{
    background-color: var(--btnCall-main-color);
    border-color: var(--btnCall-main-color);
}

#btnCall:hover{
    background-color: var(--btnCall-hover-color);
    border-color: var(--btnCall-hover-color);
}

#btnCall:focus{
    box-shadow: var(--btnCall-main-color);
}

#btnCall:active{
    background-color: var(--btnCall-active-color);
    border-color: var(--btnCall-active-color);
}
/*----------------------------------------------------------------------*/

/*発信ボタン------------------------------------------------------------*/
#btnDial{
    background-color: var(--btnDial-main-color);
    border-color: var(--btnDial-main-color);
}

#btnDial:hover{
    background-color: var(--btnDial-hover-color);
    border-color: var(--btnDial-hover-color);
}

#btnDial:focus{
    box-shadow: var(--btnDial-main-color);
}

#btnDial:active{
    background-color: var(--btnDial-active-color);
    border-color: var(--btnDial-active-color);
}

/*----------------------------------------------------------------------*/

/*登録ボタン----------------------------------------------------------*/
#btnWrite{
    background-color: var(--btnWrite-main-color);
    border-color: var(--btnWrite-main-color);
}

#btnWrite:hover{
    background-color: var(--btnWrite-hover-color);
    border-color: var(--btnWrite-hover-color);
}

#btnWrite:focus{
    box-shadow: var(--btnWrite-main-color);
}

#btnWrite:active{
    background-color: var(--btnWrite-active-color);
    border-color: var(--btnWrite-active-color);
}
/*----------------------------------------------------------------------*/

/*モーダル内ボタン--------------------------------------------------------*/
#alertBtnOK, #confirmBtnOK{
    background-color: var(--modalOkButton-main-color);
    border-color: var(--modalOkButton-main-color);
}

#alertBtnOK:hover, #confirmBtnOK:hover{
    background-color: var(--modalOkButton-hover-color);
    border-color: var(--modalOkButton-hover-color);
}

#alertBtnOK:focus, #confirmBtnOK:focus{
    box-shadow: var(--modalOkButton-main-color);
}

#alertBtnOK:active, #confirmBtnOK:active{
     background-color: var(--modalOkButton-active-color);
    border-color: var(--modalOkButton-active-color);
}
/*-----------------------------------------------------------------------*/

/*ハンバーガーメニュー-----------------------------------------------------*/
.btn-trigger {
  position: relative;
  width: 35px;
  height: 28px;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--title-color);
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 12px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}
#btnNavClose span{
    background-color: var(--nav-color);
}
#btnNavClose span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}
#btnNavClose span:nth-of-type(2) {
  opacity: 0;
}
#btnNavClose span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}
#navMenu{
    display: block;
    position: fixed;
    top: 0;
    width: 250px;
    height: 100%;
    right: -250px;
    background-color: var(--nav-bg-color);
    color: var(--nav-color);   
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .4s;
    z-index: 3;
}
.open #navMenu{
    right: 0px;
    /* transition: all .4s; */
}
#nav-mask{
    display: none;   
}
.open #nav-mask{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nav-mask-bg-color);
    opacity: .5;
    z-index: 2;
    cursor: pointer;
    transition: all .4s; 
}
#navMenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#navMenu ul li{
    position: relative;
    margin: 0;
    border-bottom: 1px solid #333;
}
#navMenu #navClose{
    border-bottom: 1px solid #333;
}
#navMenu ul li a{
    color: #333;
    font-size: 1rem;
    align-items: center;
    padding: .5em;
    text-decoration: none;
    transition-duration: 0.2s;
}
/*----------------------------------------------------------------------*/

/*デフォルトのパスワード表示ボタンを非表示(Edge用)*/
input#pass[type="password"]::-ms-reveal {
  display: none;
}

/*CheetahGrid　特定のtype=numberセルでスピンを無効化-----------------------*/
/* Chrome, Safari, Edge, Opera 用 */
input.my-no-spin-number-input::-webkit-outer-spin-button,
input.my-no-spin-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox 用 */
input.my-no-spin-number-input[type="number"] {
  -moz-appearance: textfield;
}
/*----------------------------------------------------------------------*/

@media (max-width: 320px) {
    :root{
        --bs-body-font-size: 1rem;
    }
}

@media screen and (min-width: 481px) {
	/* 481px以上に適用されるCSS */
    main{
        display: flex;
        justify-content: center;
    }

    main > div{
        width: 400px !important;
    }
}