.clearfix::after {
    content: " ";
    display: block;
    clear: both;
}
@media print{
    .navbar{display:none;}
    .navbar-under{display:none;}
    div#printarea.table-scroll{
        overflow-x: visible; 
        overflow-y: visible; 
    }
    tr.syukkaFlag2{display:none;} 
  }
#th_reqEdit{
    display:none;
}
#reqEdit_button{
    display:none;
}



.table-scroll{
    overflow-y: scroll; 
    height: 80vh;
}
div.navbar-under{
    padding-top:74px;
}

.sticky_table thead th {
    background-color: rgb(0, 145, 202);
    color: rgb(247, 247, 247);
    border-bottom: 3px solid rgb(80, 80, 80);
     /* 縦スクロール時に固定する */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* tbody内のセルより手前に表示する */
    z-index: 1;
  }
tr.comment{
    height:10px; 
    background-color: rgb(233, 233, 233);
    font-size:small;
}

tr.syukkaFlag2{
    background-color: rgb(77, 77, 77);
   
}

.createTenpoList{
    width: 450px;
    margin: 0 auto;
}

.createTenpoListLabel{
    margin-right: 10px;
    text-align: right;
    width:100px;
    float: left;
}

.createTenpoListRadioLabel{
    /* text-align: right; */
    width:100px;
    float: left;
}

.higiriFlaglist{
    display: inline-block;
    width: 110px;
}
.courseList{
    display: inline-block;
    width: 200px;
}


#modal-content{
	width:50%;
	margin:1.5em auto 0;
	padding:10px 20px;
	border:2px solid #aaa;
	/* background:#fff; */
    background: rgba(78, 78, 78, 100);

    z-index:20;
    /* position:fixed; */
    /* display:none */
}

.modal-p{
	margin-top:1em;
}

.modal-p:first-child{
	margin-top:0;
}

.button-link{
	color:#00f;
	text-decoration:underline;
}
 
.button-link:hover{
	cursor:pointer;
	color:#f00;
}
#modal-overlay{
    /*追加分*/
    /* z-index:2000; */
	width:100%;
	height:120%;
	/* position:fixed; */
	top:0;
	left:0;
}

.postUketukebi{
    line-height: 1px;
}
.postCreatedate{
    color:rgb(154, 153, 153);
    font-size: small;
    margin: 0;
    padding: 0;
    line-height: 1px;
}



/* ---ここから店舗カラー------------------------ */
/* 初期番店のタグ色 ノーマル*/
td.shopTagColor.align-middle{
    font-size: xx-large;
    text-align:center;
}
span.shopTagColorSpan{
}
/* 2番店のタグ色 ノーマル*/
td.shopTagColor2.align-middle,#shopTagColor2,.tag-cell2{
    background-color: orange;
}
span.shopTagColorSpan2,#shopTagColor2{
    color: black;
}
/* 6番店のタグ色 下線*/
td.shopTagColor6.align-middle,#shopTagColor6,.tag-cell6{   
    background: linear-gradient(rgb(35, 252, 216) 70%,black 70%, black  85% ,rgb(35, 252, 216) 85%,rgb(35, 252, 216) 90%);  
}
span.shopTagColorSpan6,#shopTagColor6{
    color: black;
}
/* 7番店のタグ色 枠*/
td.shopTagColor7.align-middle,#shopTagColor7,.tag-cell7{
    background-color: orange;
}
span.shopTagColorSpan7,#shopTagColor7{
    color: orange;
    padding: 5px;
    background-color: black;
}
/* 8番店のタグ色 */
td.shopTagColor8.align-middle,#shopTagColor8,.tag-cell8{
    background-color:pink;
 }
span.shopTagColorSpan8,#shopTagColor8{
    color: black;
}
/* 10番店のタグ色 */
td.shopTagColor10.align-middle,#shopTagColor10,.tag-cell10{
    background-color:rgb(253, 238, 22);
 }
span.shopTagColorSpan10,#shopTagColor10{
    color: black;
}
/* 11番店のタグ色 */
td.shopTagColor11.align-middle,#shopTagColor11,.tag-cell11{
    background-color:rgb(253, 255, 255);
 }
span.shopTagColorSpan11,#shopTagColor11{
    color: black;
}
/* 12番店のタグ色 */
td.shopTagColor12.align-middle,#shopTagColor12,.tag-cell12{
    background-color:rgb(145, 80, 248);
 }
span.shopTagColorSpan12,#shopTagColor12{
    color: rgb(145, 80, 248);
    padding: 5px;
    background-color: black;
}
/* 13番店のタグ色 */
td.shopTagColor13.align-middle,#shopTagColor13,.tag-cell13{
    background-color:pink;
 }
span.shopTagColorSpan13,#shopTagColor13{
    color: pink;
    padding: 5px;
    background-color: black;
}
/* 14番店のタグ色 下線*/
td.shopTagColor14.align-middle,#shopTagColor14,.tag-cell14{
    background: linear-gradient(pink 70%, black 70%,black 85%,pink 85%,pink 90%);
   
}
span.shopTagColorSpan14,#shopTagColor14{
    color: black;
}
/* 18番店のタグ色 枠*/
td.shopTagColor18.align-middle,#shopTagColor18,.tag-cell18{
    background-color: rgb(253, 238, 22);
}
span.shopTagColorSpan18,#shopTagColor18{
    color: rgb(253, 238, 22);
    padding: 5px;
    background-color: black;
}
/* 19番店のタグ色 下線*/
td.shopTagColor19.align-middle,#shopTagColor19,.tag-cell19{
    background: linear-gradient(rgb(145, 80, 248) 70%, black 70%,black 85% ,rgb(145, 80, 248) 85%,rgb(145, 80, 248) 90%);
}
span.shopTagColorSpan19,#shopTagColor19{
    color: black;
}
/* 20番店のタグ色 枠*/
td.shopTagColor20.align-middle,#shopTagColor20,.tag-cell20{
    background-color: rgb(35, 252, 216);
}
span.shopTagColorSpan20,#shopTagColor20{
    color:rgb(35, 252, 216);
    padding: 5px;
    background-color: black;
}
/* 21番店のタグ色 枠*/
td.shopTagColor21.align-middle,,#shopTagColor21,.tag-cell21{
    background-color: rgb(255, 255, 255);
}
span.shopTagColorSpan21,#shopTagColor21{
    color:rgb(255, 252, 255);
    padding: 5px;
    background-color: black;
}
/* 22番店のタグ色 下線*/
td.shopTagColor22.align-middle,#shopTagColor22,.tag-cell22{
    background-color: rgb(169, 122, 244) ;
}
span.shopTagColorSpan22,#shopTagColor22{
    color: black;
}

/* 24番店のタグ色 ノーマル*/
td.shopTagColor24.align-middle,#shopTagColor24,.tag-cell24{
    background-color: rgb(35, 252, 216);
}
span.shopTagColorSpan24,#shopTagColor24{
    color: black;
}
/* --------店色ここまで------------- */

.ikkatu_syukka_div{
    margin:auto;
    text-align: center;
}
.ikkatu_syukka_div input[type=checkbox] {
    transform: scale(3.0);
  }


/* === ソートボタンを表示するエリア ============== */
.tsImgArea{
  line-height: 1;
}
/* === ソートボタン ============================== */
.tsImg{
  display    : inline-block;
  width      : 8px;
  height     : 6px;
  background : #eee;
  border     : 1px solid #777;
  margin     : 1px 3px;
  padding    : 3px;
  cursor     : pointer;
}
/* === ソートボタン（カーソルオーバー時）========= */
.tsImg:hover{
  background : #FFD700;
}
/* === ソートボタン内の三角の色（SVG）============ */
.tsImg path{
  fill       : #777;
}



/* ここからはtagシステム */
#tag-cell-henkyaku1{
    background-color: #000000;
    color:#777;
}
a,
a:visited,
a:hover,
a:active {
  color: inherit;
}


.search_tag_denpyo:nth-child(2n+1){
    padding:10px; 
    background-color: rgb(227, 252, 255);
}
.search_tag_denpyo:nth-child(2n){
    padding:10px; 
    background-color: rgb(175, 243, 250);
}
.search-tag-denpyo-meisai{
    display: block;
}


/*  timerシステム   */
/* コンテナの基本レイアウト */
/* 基本のコンテナ */
.container {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* 上に揃える */
    /* align-items: center; */
    gap: 30px;
    padding: 5px 30px;
}

/* 動画セクション */

video {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* 動画セクションのサイズ調整 */
.video-section video {
    justify-content: center;
    align-items: center;

    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
    position: relative; 
    width: 100%;
    max-width: 500px; 


}

/* タイマーセクション */
.timer-section {
    display: flex;
    margin-top: -10px; /* 必要に応じて調整 */
    flex-direction: column;
    align-items: center;
    /* gap: 20px; */
}

/* タイマー表示の文字サイズを調整 */
#timerDisplay {
    font-size: 2.5rem;
    color: #333;
    margin-top: 10px;
}

/* ボタンと入力フィールドのサイズを大きく設定 */
/* タイマーボタンのスタイル */
.timer-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.time-button {
    padding: 15px 25px;
    font-size: 1.2rem;
    border-radius: 6px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    cursor: pointer;
}

.time-button:hover {
    background-color: #003165;
}


.time-button:active {
    background-color: #003d80;
}
.action-button {
    padding: 15px 65px;        /* 余白を増やしてボタンを大きく */
    font-size: 1.4rem;         /* 文字サイズを少し大きく */
    border-radius: 8px;        /* ボタンの角丸を少し広げる */
    border: none;
    margin: 10px 12px;              /* ボタン間の余白も少し増やす */
    transition: background-color 0.3s;
}

.action-button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

.action-button:not(:disabled) {
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.action-button:not(:disabled):hover {
    background-color: #003671;
}



/* タイムトラック履歴のスタイル調整 */
/* タイムトラック履歴 */
#history {
    width: 100%;
    max-width: 350px;
    text-align: center;
    max-height: 300px; /* 最大高さを設定 */
    overflow-y: auto;  /* 高さを超えるとスクロール表示 */
}

#history h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    margin: 5px 0; /* 上下の余白を小さく */
    padding: 0;    /* 内側の余白をなくす */
    line-height: 1.2; /* 行の高さを調整 */
    background-color: #f0f0f0;
}

#historyList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* background-color: #e0e0e0; リスト全体の背景色を設定 */
    line-height: 1.2;
    border-bottom: 4px solid #4e98ff; /* タイトルの下に下線を追加 */
}

#historyList li {
    padding: 10px 15px;
    font-size: 1.2rem;
    /* border-bottom: 1px solid #ddd; */
    border-top: 2px solid #7eb2f9; /* リスト全体の上部に線を追加 */
    margin-top: 0px; /* タイトルとの間に少し余白を追加 */
}

/* 横幅が大きい画面（タブレット横向きやPC）での動画サイズ制限 */
@media (min-width: 1024px) and (orientation: landscape) {
    .video-section video {
       
        position: relative; /* 子要素（overlay）が絶対配置で動画エリアに配置される */
        display: inline-block;
        width: 100%;
        
        max-width: 100%;
        height: auto;
        border-radius: 1px;

    }
/* 小さな画面向けのレスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    #timerDisplay {
        font-size: 2rem;
    }

    button, input[type="number"] {
        font-size: 1rem;
        padding: 10px;
    }

    #history h3 {
        font-size: 1.2rem;
    }

    #historyList li {
        font-size: 1rem;
    }
}

/* グレーアウトとカウントダウンのオーバーレイ */
.overlay {
    position: absolute; /* 動画エリア全体を覆う */
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.overlay.visible {
    opacity: 1;
}

#video {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* タグサーチのinput type number のスピン矢印を非表示にする */
/* .no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
} */