/* 共通ファイル */

   /* 共通 */
   /*@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');*/

   body {
       /*font-family: 'Kosugi Maru', sans-serif !important;*/
       /*background: #f3f3f3 !important;*/
       font-size: 14px !important;
       font-family: 游ゴシック, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif !important;
   }

   /* flex boxの間隔------------------------------------ */
   .gap-1 {
       gap: 10px;
   }

   .gap-2 {
       gap: 20px;
   }

   .gap-3 {
       gap: 30px;
   }
   .gap-4 {
       gap: 40px;
   }
   .gap-5 {
       gap: 50px;
   }
   /* 角丸------------------------------------ */
   .radius-10 {
       border-radius: 10px !important;
   }
   .radius-top-10 {
       border-top-left-radius: 10px !important;
       border-top-right-radius: 10px !important;
   }
   .radius-bottom-10 {
       border-bottom-left-radius: 10px !important;
       border-bottom-right-radius: 10px !important;
   }
    /* シャドー------------------------------------ */
    .box-shadow {
        box-shadow: 4px 4px 4px 4px rgb(0 0 0 / 20%);
    }
    /* 基本設定------------------------------------ */
   a {
       color: #212529 !important;
       text-decoration: none;
       cursor: pointer;
   }

   img {
       max-width: 100%;
       width: 100%;
   }

   a:hover {
       /* color: #2a80b9 !important; */
       /* opacity: 50%; */
   }
   /* grid---------------------------------------------- */
    .grid-area {
        display: grid !important;
        grid-template-columns: repeat(4, 24%);
        grid-gap: 30px;
        width: 100%;
    }

   /* bootstrap ボタン------------------------------------------- */
    /* .btn-primary {
        
        background: #2d50ae !important;
        padding: 10px 20px !important;
        border-radius: 30px !important;
        font-size: .875rem;
        color: #fff;
        display: inline-block;
        font-weight: 400 !important;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        border-style: none !important;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    } */
    .btn-warning {
        background: #f5b759 !important;
        border-color: #f5b759 !important;
        color: #fff !important;
    }
    /* ボタン------------------------------------------- */
    /* 水色のボタン */
    .register_btn01{
		/* border:3px solid rgb(42, 128, 185) !important;
		color:rgb(42, 128, 185) !important; */
        border: 3px solid #212529c7 !important;
        color: #212529c7 !important;
		padding:5px 25px;
		font-size:14px;
		border-radius:30px;
		background:#fff;
	}
	.register_btn01:hover{
		background:#212529c7 !important;
		/* background:rgb(42, 128, 185) !important; */
		color:#fff !important;
	}
    /* グレーのボタン */
    .gray_btn01{
		border:3px solid #808080 !important;
		color: #808080 !important;
		padding:5px 25px;
		font-size:16px;
		border-radius:30px;
		background:#fff;
	}
	.gray_btn01:hover{
		background: #808080 !important;
		color:#fff !important;
	}
    /* 緑のボタン */
    .green-btn{
		border:3px solid #2fb6cc !important;
		color: #2fb6cc !important;
		padding:5px 25px;
		font-size:16px;
		border-radius:30px;
		background:#fff;
	}
	.green-btn:hover{
		background: #2fb6cc !important;
		color:#fff !important;
	}
    /* 黒のボタン */
    .block-btn{
		border:3px solid #000 !important;
		color: #000 !important;
		padding:5px 25px;
		font-size:16px;
		border-radius:30px;
		background:#fff;
	}
	.block-btn:hover{
		background: #000 !important;
		color:#fff !important;
	}
    /* 赤のボタン */
    .red-btn{
		border:3px solid #eb5e54 !important;
		color: #eb5e54 !important;
		padding:5px 25px;
		font-size:16px;
		border-radius:30px;
		background:#fff;
	}
	.red-btn:hover{
		background: #eb5e54 !important;
		color:#fff !important;
	}
    .border_blue_btn{
        border:3px solid #2d50ae !important;
        color: #2d50ae !important;
        padding:5px 25px;
        font-size:16px;
        border-radius:30px;
        background:#fff;
    }
    .border_blue_btn:hover{
        background: #2d50ae !important;
        color:#fff !important;
    }
  
    .border_gray_btn{
        border:3px solid #808080 !important;
        color: #808080 !important;
        padding:5px 25px;
        font-size:16px;
        border-radius:30px;
        background:#fff;
    }
    .border_gray_btn:hover{
        background: #808080 !important;
        color:#fff !important;
    }


    .blue-btn {
        background: #2d50ae !important;
        color: #fff;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        padding: 5px 25px;
        font-size: 16px;
        border-radius: 30px;
        transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
        background-color: transparent;
        border: 1px solid transparent;
    }
    .blue-btn:hover {
        opacity: 50%;
    }
    .white-btn{
        width: 100%;
        border-radius: 10px;
        border: 1px solid #dee2e6 !important;
        color: #5c5c5c !important;
        background: #fff !important;
        font-weight: 700;
        /* font-size: 13px; */
        font-size: 1em;
        color: #fff;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .search-btn{
        background: #2d50ae !important;
        border-radius: 0px !important;
        color: #fff !important;
    }
    .gray-btn{
        background: #212529c7  !important;
        color: #fff;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        padding: 5px 25px;
        font-size: 16px;
        border-radius: 30px;
        transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
        background-color: transparent;
        border: 1px solid transparent;
    }
    .btn-size {
        max-width: 150px;
        width: 100%;
    }

    .delete_btn {
        background: #ff6347 !important;
        border-color: #ff6347 !important;
    }

    .print_btn {
        background: #f5b759 !important;
        border-color: #f5b759 !important;
        color: #fff !important;
    }
    .outlined-button {
        width: 100%;
        max-width: 424px;
        height: 64px;
        background: #fff;
        background-repeat: no-repeat;
        background-position: right 6% center;
        border: solid 1px #2d50ae;
        border-radius: 32px;
        -webkit-transition: .25s;
        transition: .25s;
        font: bold 10px/1.4 'Roboto', 'Noto Sans JP', 'Verdana', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
        color: #2d50ae;
        letter-spacing: .1em;
        font-size: 1rem;
    }

    .outlined-button:hover {
        /* background-color: rgba(255, 145, 65, .1); */
        border-color: #2d50ae;
        -webkit-transform: translateY(-2px);
        opacity: 50%;
        transform: translateY(-2px);
    }
    .filled-button {
        width: 100%;
        max-width: 424px;
        height: 64px;
        margin: 32px 0;
        font: bold 18px/1.4 'Roboto', 'Noto Sans JP', 'Verdana', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
        color: #fff;
        letter-spacing: .1em;
        background-color: #2d50ae;
        background-repeat: no-repeat;
        background-position: right 6% center;
        border: solid 1px #2d50ae;
        border-radius: 32px;
        -webkit-transition: .25s;
        transition: .25s;
    }

    .filled-button:hover {
        background-color: #2d50ae;
        border-color: #2d50ae;
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        opacity: 50%;
    }

    /* ボタン */
    .row_close_btn{
        cursor: pointer;
        background: rgb(42 128 185);
        color: #fff;
        padding: 5px;
        border-radius: 30px;
        font-size: 14px;
        width:150px;
        display: inline-block;
        text-align: center;
    }
    /* modal */
    .modal .gray-btn{
        padding:10px 20px;
    }
    .modal .blue-btn{
        padding:10px 20px;
    }


    /* input ------------------------------------------- */
    .og-formcontrol {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 6px 8px;
        font: bold 16px/1.7 'Roboto', 'Noto Sans JP', 'Verdana', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
        color: #333;
        letter-spacing: .05em;
        background: #fff;
        border: solid 2px #e1e1e1;
    }

    .og-form-label {
        display: block;
        font: bold 14px/1.8 'Roboto', 'Noto Sans JP', 'Verdana', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
        color: #7d7d7d;
    }

    .og-select-form {
        width: 90px !important;
        padding: 8px 5px !important;
        border-radius: 30px !important;
        text-align: center;
        background: #dddee6;
        font-weight: bold;
        border-style: none;
        font-size: 15px;
    }

    .og-text-form {
        width: 250px !important;
        padding: 8px 5px !important;
        border-radius: 30px !important;
        background: #fff;
        font-weight: bold;
        border-style: none;
    }
    .og-label-form{
        font-weight: 700;
        font-size: 18px;
    }
    /* width------------------------------------------- */
    .w-5 {
        width: 5%;
    }
    .w-6{
        width: 6%;
    }
    .w-7{
        width: 7%;
    }
    .w-8 {
        width: 8%;
    }

    .w-10 {
        width: 10% !important;
    }

    .w-15 {
        width: 15%;
    }

    .w-20 {
        width: 20%;
    }

    .w-30 {
        width: 30%;
    }

    .w-35 {
        width: 35%;
    }

    .w-33 {
        width: 33%;
    }

    .w-40 {
        width: 40% !important;
    }

    .w-45 {
        width: 45% !important;
    }

    .w-55 {
        width: 55% !important;
    }

    .w-60 {
        width: 60% !important;
    }

    .w-65 {
        width: 65%;
    }

    .w-70 {
        width: 70% !important;
    }

    .w-75 {
        width: 75%;
    }

    .w-80 {
        width: 80%;
    }
    .w-90 {
        width: 90% !important;
    }

    /* width */

    .w-8-33 {
        width: 8.33333%;
    }

    .w-33-33 {
        width: 33.33333%;
    }

    .w-16-67 {
        width: 16.66667%;
    }

    .w-66-66 {
        width: 66.66667%;
    }

/* スクロールバー */
.table-scroll {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 600px;
}

/*スクロールバー全体  */
.table-scroll::-webkit-scrollbar {
    width: 10px;
    /* 垂直方向のスクロールバーの幅 */
    height: 10px;
    /* 水平方向のスクロールバーの幅 */
}

/* つまみの部分 */
.table-scroll::-webkit-scrollbar-thumb {
    background-color: #4ebac6;
    border-radius: 5px;
    box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.2);
}

/*背景 */
.table-scroll::-webkit-scrollbar-track {
    background-color: rgb(220, 220, 220);
    border-radius: 5px;
}
/* 通知 */
.alert-count {
    background: red;
    width: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
}
/* 通知 */
.alert-count-zero {
    background: #fff;
    width: 20px;
    border-radius: 50%;
    color: rgba(0, 0, 0);
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
}
.list-group {
    height: 500px;
    overflow-x: auto;
}


@media screen and (max-width: 900px) {
    .pc-show {
        display: none;
    }
    .sp-show {
        display: block;
    }
    .sp-block{
        display: block !important;
    }
    /* button */
    .register_btn01,.blue-btn,.red-btn,.guide_btn2,.gray-btn,.gray_btn01{
        padding: 5px 15px !important;
        font-size:15px !important;
    }
    .sp-flex{
        display: flex;
        align-items: center;
        gap:20px;
    }
    h4{
        font-size: 15px !important;
    }
}