body {
    background: #363636;
    color: #fff;
}


table {
    position: inherit;
    /*height: 860px;*/
    border: 1px solid;
    /* font-family: 'Bebas Neue', sans-serif;*/
    color: #fff;
    font-size: 1rem;
    text-align: center;
    margin: auto;
    vertical-align: middle;
}

#l_table {
    font-size: 0.5rem;
    width: 120px;
}

#R_table {
    width: 120px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: 50px;
}

/* Ver 3.2 の下に改行して HELP（メール） */
#version_help_block {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#version_help_block .version-label {
    display: block;
    width: 100%;
    line-height: 1.3;
}

.help-mail-btn {
    display: block;
    margin: 0 auto;
    width: 90px;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg, rgb(14, 140, 188) 0%, rgb(5, 95, 132) 45%, rgb(4, 72, 102) 100%);
    border-radius: 10px;
    border: 2px solid rgb(30, 160, 210);
    border-bottom-color: rgb(3, 50, 72);
    border-right-color: rgb(4, 60, 85);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 0 rgb(2, 45, 65),
        0 6px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.help-mail-btn:hover {
    filter: brightness(1.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 4px 0 rgb(2, 45, 65),
        0 8px 18px rgba(0, 0, 0, 0.5);
}

.help-mail-btn:active {
    transform: translateY(3px);
    filter: brightness(0.95);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 1px 0 rgb(2, 40, 58),
        0 2px 8px rgba(0, 0, 0, 0.4);
    color: #ffecec;
}

td,
tr {
    border: solid 1px rgb(0, 0, 0);
}

table th {
    text-align: center;
    border: solid 2px rgb(82, 82, 82);
}

table .table_sticky tr:nth-child(odd) {
    background: #4d4d4d;
}

table .table_sticky tr:nth-child(even) {
    background: #363636;
}

/*　スクロールバーの実装 */
.table_sticky {
    height: 820px;
    /*  820 */
    /*ipad 9.7=560px 12.9=950px*/
    width: 980px;/*ipad 9.7=750px 12.9=1086px;*/
    display: block;
    text-align: center;
    overflow-y: auto;
    border: 0px solid;
    border-collapse: collapse;
}
.mtime {
    text-align: left;
    margin:10px;
    position: relative;
    top: -8px;
}
.icn {

    position: relative;
    top: -45px;
    left: 25px;
}

/*ファイル入力用*/
/*
label  {
    padding: 3px 40px;
    color: #ffffff;

    cursor: pointer;
    font-family: 'Secular One', sans-serif;
    border-radius: 10px;
    height: 20px;
}
*/

.finput,.fdel  {
    width: 300px;
    padding: 3px 10px;
    margin : 5px ;
    color: #ffffff;
    
    cursor: pointer;
    font-family: 'Noto Sans JP','Roboto', sans-serif;
    border-radius: 10px;
    height: 10px;
}

button {
    font-size: 15px;
    font-family: 'Noto Sans JP','Roboto', sans-serif;
    background-color: transparent;
    border: none;
    outline: none;
    appearance: none;
    color: #ffffff;
}
.finput {
    background: #e85427;
}
.fdel {
    background: #3c70ff;
}
#title {
    font-family: 'Roboto', sans-serif;
    font-variation-settings: "wght" 700;
    font-size: 1.8rem;
    color: #ffffff;
    background: #000000;
    border-radius: 10px;
    height: 20px;
}



.info_bp1,
.info_bp2 {
    width: 160px;
    height: 0px;
    border: 0px solid;
    /*font-family:  'Roboto';*/
    font-family: 'Noto Sans JP','Roboto', sans-serif;
    color: #000000;
    font-size: 0.8rem;
    text-align: center;
    margin: auto;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 0px 0px;
  
}

.info_bp1 {
    background: #fff9cc;
}
.info_bp1_ti {
    background: #fcee7e;
}
.info_bp2 {
    background: #ffead1;
}
.info_bp2_ti {
    background: #ffc988;
}

input[type="file"] {
    display: none;
}

.posnum {
    font-size: 4rem;
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    font-family: 'Bebas Neue', sans-serif;
    font-variation-settings: "wght" 700;
    /*border: solid 5px rgb(42, 247, 35);*/
}

/*BP1予約ボタン*/
.bp1_b {
    position: relative;
    top: -70px;/*-70*/
    background-image: url(./images/bp1_bg.png);
    background-repeat: no-repeat;
    background-position: -5px -5px;
    background-size: 100px 100px;
}

.bp1_b:active {
    color: #fc0a0a;

}

/*BP2予約ボタン*/
.bp2_b {
    position: relative;
    top: -60px;
    background-image: url(./images/bp2_bg.png);
    background-repeat: no-repeat;
    background-position: -5px -5px;
    background-size: 100px 100px;
}

.bp2_b:active {
    color: #fc0a0a;
}

/*BP2予約ボタン*/
.csl_b {
    position: relative;
    top: -50px;
    left: 0px;
    background-image: url(./images/r_side_bg_cls.png);
    background-repeat: no-repeat;
    background-position: -6px -6px;
    border: solid 5px rgb(218, 31, 6);
}

.csl_b:active {
    color: #fc0a0a;
}
/*変更ボタン*/
.edt_b {
    position: relative;
    top: -40px;
    background-image: url(./images/r_side_bg_edt.png);
    background-repeat: no-repeat;
    background-position: -6px -6px;
    border: solid 5px rgb(42, 247, 35);
}

.edt_b:active {
    color: #fc0a0a;

}

/*新規ボタン*/
.add_b {
    position: relative;
    top: -30px;
    background-image: url(./images/r_side_bg_add.png);
    background-repeat: no-repeat;
    background-position: -6px -6px;
    border: solid 5px rgb(0, 174, 255);
}

.add_b:active {
    color: #fc0a0a;

}



/*削除ボタン*/
.del_b {
    position: relative;
    top: -20px;
    background-image: url(./images/r_side_bg_del.png);
    background-repeat: no-repeat;
    background-position: -6px -6px;
    border: solid 5px rgb(255, 255, 255);
}

.del_b:active {
    color: #fc0a0a;

}

/*計画図ボタン*/
.pdf_b {
    top: -10px;
    position: relative;
    background-image: url(./images/r_side_bg_pdf.png);
    background-repeat: no-repeat;
    background-position: -6px -6px;
    border: solid 5px rgb(14, 58, 255);
    
}

.pdf_b:active {
    color: #fc0a0a;

}

/*帳票ボタン*/
.exl_b {
    position: relative;
    top: 0px;
    border: solid 1px rgb(253, 253, 253);
}

.exl_b:active {
    color: #fc0a0a;
}

/*戻るボタン*/
.bak_b {
    position: relative;
    top: 10px;
    border: solid 1px rgb(255, 255, 255);

}

.bak_b:active {
    color: #fc0a0a;
}

/* 記録ボタン */
.rcd_b {
    position: relative;
    top: -10px;
    border: solid 1px rgb(255, 255, 255);

}

.rcd_b:active {
    color: #fc0a0a;
}
.bp1_b,
.bp2_b,
.csl_b,
.add_b,
.edt_b,
.del_b,
.pdf_b {
    height: 90px;
    width: 90px;
    line-height: 1.4;
    padding: 0px 4px;
    /*font-family: 'Roboto', 'Secular One', sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: rgba(29, 29, 28, 0.993);
    border-radius: 10px;
}


.exl_b,
.bak_b,
.rcd_b {
    height: 40px;
    width: 90px;
    line-height: 1.4;
    padding: 0px 4px;
    /*font-family: 'Roboto', 'Secular One', sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: rgba(29, 29, 28, 0.993);
    border-radius: 10px;
}
.rst_b {
    color: #f20a0a;
    font-size: 1.0rem;
    position: relative;
    top: 20px;
    border: solid 1px rgb(255, 255, 255);

}

.btn {
    display: flex;
    flex-wrap: wrap;
}

.btn label {

    background: #75be9c;
    height: 70px;
    width: 88px;
    line-height: 1.0;
    padding: 5px 0px;/*5px 4px;*/
    font-family: 'Roboto', 'Secular One', sans-serif;
    font-size: 15.5px;/*18px*/
    text-align: center;
    color: #fff;

    text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
    border: solid 0px rgb(255, 255, 255);
    border-radius: 10px;
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.btn input:checked+label {

    border: solid 3px rgb(255, 255, 255);
}

.btn input {
    display: none;
}
/*　変更メニューの位置*/
.edit {
    border: 0px solid;
    position: absolute;
    top: 35%;
    left: 60%;
    z-index: 3;
    visibility: hidden;
    /*visibility: visible;*/
}

/* 変更ボタン類の装飾　*/ 
.A,.B,.C,.D,.M,.H,.P,.ans,.calk{
    width: 80px;
    height: 80px;
    font-family: 'Roboto', sans-serif;
    font-variation-settings: "wght" 700;
    font-size: 1.4rem;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.A{
    background-color: #162419;
}

.A:hover{
    background-color: #56ba68;
}
.B{
    background-color: #31271F;
}

.B:hover {
    background-color: #d7833a;
}
.C {
    background-color: #01485B;
}

.C:hover {
    background-color: #04D3FC;
}
.D {
    background-color: #0b3b1e;
}
.D:hover {
    background-color: #14c558;
}
.H {
    background-color: #000064;
}
.H:hover {
    background-color: #3399FF;
}
.M {
    background-color: #4C103B;/* 4C103B */
}
.M:hover {
    background-color: #FF33CC;
}
.P {
    background-color: #2E005C;
}
.P:hover {
    background-color: #9966FF;
}
.calk{
    background-color: #d8d8d8;
    color: #000000;
    font-family: 'Noto Sans JP', sans-serif;
}
.ans{
    border: solid 4px rgb(255, 0, 0);
    background-color: #ffffff;
    color: #ff0000;
}
.blk{
    background-color: #151515;
}
.font_red {
    color: #F44336;     /* 文字色指定 */
    animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime{
    0% { color: #8b0000 }
  100% { color: #ff0000 }
 }

 /* タブ全体を囲むコンテナの設定 */
.tab-switch {
    display: flex; /* タブを横並びに配置 */
    flex-wrap: wrap; /* 幅を超えたら折り返し */
    max-width: 900px; /* コンテナの最大幅を指定 */
    margin: auto; /* コンテナを中央に配置 */
    justify-content: center; /* タブを中央に寄せる */
    font-size: 16px;
    

}

.tab-switch:after {
  content: ''; /* 空の擬似要素を作成 */
  width: 100%; /* 幅をコンテナ全体に設定 */
  height: 1px; /* 線の高さを1pxに設定 */
  background-color: #757F96; /* 線の色 */
  display: block; /* ブロック要素として表示 */
  order: -1; /* 擬似要素を上部に配置 */
  margin-top: -5px; /* タブボタンから-5pxの余白を設定 */
}

/* 各タブボタンの設定 */
.tab-switch > label {
    flex: 1 1 auto; /* タブボタンが均等に幅をとるが、幅を超えると折り返す */
    order: -1; /* タブボタンを上部に配置 */
    position: relative; /* 子要素の絶対位置指定の基準 */
    padding: .7em 1em; /* 上下に0.7em、左右に1emの内側余白 */
    background-color: #7c7c7c; /* タブボタンの背景色 */
    color: #000000; /* 文字色をグレーに設定 */
    text-align: center; /* 文字を中央揃え */
    cursor: pointer; /* カーソルをポインターに変更 */
    transition:.3s all;/*変化を滑らかに*/
    border: solid 2px rgb(108, 108, 108);
}

/* タブボタンのホバーおよび選択状態のスタイル */
/*.tab-switch > label:hover,*/
.tab-switch label:has(:checked) {
    background-color: #fa5c00; /* ホバー/選択時の背景色 */
    color: #fff; /* ホバー/選択時の文字色 */
}

/* ラジオボタン自体は非表示 */
.tab-switch input {
    display: none; /* ラジオボタンを見えなくする */
}

/* タブコンテンツのスタイル */
.tab-switch > div {
    display: none; /* 初期状態ではコンテンツを非表示に */
    width: 100%; /* コンテンツの幅を全体に設定 */
    padding: 1.5em 1em; /* 上下に1.5em、左右に1emの内側余白 */
  border:1px solid #757F96;
}

/* 選択されたタブのコンテンツを表示 */
.tab-switch label:has(:checked) + div {
    display: block; /* 選択されたタブのコンテンツを表示 */
}
.blink {
    
	-webkit-animation:blink 0.2s ease-in-out infinite alternate;
    -moz-animation:blink 0.2s ease-in-out infinite alternate;
    
    animation:blink 0.2s ease-in-out infinite alternate;
  }
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}