a{
    text-decoration: none;
}
.tooltip {
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
  text-align: left;
  border-radius: 4px;
  padding: 6px;
  position: absolute;
  z-index: 10;
  font-size: 14px;
  top: 470px;
  left: 450px;
  white-space: normal;
  word-break: break-word;
  max-width: 400px; 
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.tooltip.visible {
  visibility: visible;
  opacity: 1;
}

.slider-wrapper {
  position: relative;
  display: flex;
  width: 200px;
  margin: -20px 0 0px 150px;
  gap: 20px; 
}

/* マウスオーバーで表示 */
.slider-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}


#confSlider {
  width: 100%;
}
#iouSlider {
  width: 100%;
}
#batchSlider {
  width: 100%;
}
#imgszSlider {
  width: 100%;
}
.scroll-wrapper {
  width: 30%;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-end;
  box-sizing: border-box;
  max-width: 100%;
  scrollbar-width: auto;
}
.scroll-wrapper::-webkit-scrollbar {
  height: 12px; /* ← スクロールバーの高さを明示 */
  background-color: #f0f0f0;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
}

.scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
.slider-images {
  min-width: max-content;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  display: flex;
  justify-content: flex-end;
}
.slider-images img {
  flex: 0 0 auto;
  width: 100px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.slider-labels {
  position: absolute;
  top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  pointer-events: none;
}

.slider-labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.modeExplain{
  display:block;
  width:70%;
}
.settingcontainer{
  display:flex;
}

    
        #resultImageContainer {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }
        #resultImageContainer.zoomed {
            overflow: scroll; /* スクロール可能にする */
        }
        #resultImage {
            display: block;
            margin: auto;
            max-width: 100%;
            height:auto;
            transition: transform 0.3s ease;
        }
        #resultImage.zoomed {
            transform: scale(2); /* 2倍ズーム */
            cursor: grab; /* スクロール可能時のカーソル変更 */
        }
        #results-container {
            display: flex;
            align-items: flex-start;
            width: 100%;
        }
        #image-container {
            margin-right: 20px;
        }
        #results-table {
            border-collapse: collapse;
            width: 65%;
        }
        #results-table th, #results-table td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
            font-size:14pt;
        }
        #progressBar {
        display: none;
        width: 50%;
        height: 10px;
        background-color: #e0f7fa;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        margin-top: 50px;
    }

    #progressFill {
        height: 100%;
        width: 0%;
        background-image: linear-gradient(45deg, rgba(0, 0, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(0, 191, 255, 0.6) 50%, rgba(0, 191, 255, 0.6) 75%, transparent 75%, transparent);
        background-size: 20px 20px;
        animation: stripe 1s linear infinite, fade 2s infinite;
    }

    /* ストライプが流れるアニメーション */
    @keyframes stripe {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 40px 0;
        }
    }

        /* 点滅のアニメーション */
    @keyframes blink {
        0%, 50% {
            opacity: 1;
        }
        100% {
            opacity: 0.5;
        }
    }

    /* フェードイン・フェードアウトアニメーション */
    @keyframes fade {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }
.head_cover{
	color:#ffffff;
	background:-webkit-linear-gradient(left, rgba(0,0,118,20), rgba(0,0,255,60));
	background:-moz-linear-gradient(left, rgba(0,0,118,20), rgba(0,0,255,60));
	background:linear-gradient(to right, rgba(0,0,118,20), rgba(0,0,255,60));
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height: 10vh;  /* ビューポート高さで固定 */
	padding: 1vh 1vw;  /* ヘッダー内の余白を固定 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	height:60px;
	padding-bottom:10px;
	padding-top:5px;
	vertical-align:middle;
	
}
.headerall{
	position:-webkit-sticky;
	position:sticky;
	top:0;
    height: 10vh;
    z-index: 1000;
    margin-bottom:50px; 
}
.head_cover_under{
	color:#ffffff;
	background:-webkit-linear-gradient(left, rgba(255,102,0,60), rgba(118,47,0,20));
	background:-moz-linear-gradient(left, rgba(255,102,0,60), rgba(118,47,0,20));
	background:linear-gradient(to right, rgba(255,102,0,60), rgba(118,47,0,20));
	padding:5px 0 5px 0;
}
.bottom_cover_orange{
	color:#ffffff;
	background:-webkit-linear-gradient(left, rgba(255,102,0,60), rgba(118,47,0,20));
	background:-moz-linear-gradient(left, rgba(255,102,0,60), rgba(118,47,0,20));
	background:linear-gradient(to right, rgba(255,102,0,60), rgba(118,47,0,20));
	padding:5px 0 5px 0;
	margin-top:50px;
}
.bottom_cover_blue{
	color:#ffffff;
	background:-webkit-linear-gradient(left, rgba(0,0,118,20), rgba(0,0,255,60));
	background:-moz-linear-gradient(left, rgba(0,0,118,20), rgba(0,0,255,60));
	background:linear-gradient(to right, rgba(0,0,118,20), rgba(0,0,255,60));
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	height:25px;
	padding-bottom:10px;
	padding-top:5px;
	vertical-align:middle;
  margin-top:50px;
}

.button_solid003 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    margin-top: 10px;
    max-width: 130px;
    padding: 5px 15px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 100;
    background: #14BC00;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 50px;
    border: 1px solid;
    overflow: hidden;
}
.button_solid003 a:visited {
  color: #000;
}
.button_solid003 a:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 100) 81%, rgba(255, 255, 255, 0) 100%);
    animation: shine 3s infinite; /* inifiniteによりずっと続ける */
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}


/* ============================
   Industrial AI Theme (A案)
   ============================ */

/* 1) ベース */
:root{
  --bg: #0B1220;
  --panel: #111827;
  --card: #0F172A;
  --line: rgba(255,255,255,0.10);

  --text: #E5E7EB;
  --muted: #9CA3AF;

  --accent: #22D3EE;   /* シアン */
  --accent2: #0EA5E9;  /* ブルー */
  --danger: #F87171;
}

html, body{
  background: radial-gradient(1200px 700px at 10% 0%, rgba(34,211,238,0.08), transparent 60%),
              radial-gradient(900px 600px at 100% 20%, rgba(14,165,233,0.08), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: "Inter","Noto Sans JP",system-ui,sans-serif !important;
  margin:0;
}

/* 2) ヘッダー：業務感→プロダクトバー */
.headerall{
  margin-bottom: 18px !important;  /* 50px→スリムに */
}
.head_cover{
  background: rgba(15,23,42,0.78) !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 52px !important;
  padding: 10px 14px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.head_cover > div{
  font-size: 18px !important;      /* 2vw を固定化 */
  letter-spacing: 0.6px;
  font-weight: 700;
}
.head_cover span{ color: var(--text) !important; }
.head_cover img{ filter: drop-shadow(0 0 8px rgba(34,211,238,0.25)); }

/* 3) 上部のモード選択：チップ風 */
input[type="radio"]{
  accent-color: var(--accent);
}
#singleClassWrapper select{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
}

/* 4) 設定エリア：カード化（フォーム感を消す） */
.settingcontainer{
  display: grid !important;
  grid-template-columns: 360px 1fr; /* 左：操作、右：補足 */
  gap: 18px;
  align-items: start;
}
.modeExplain{
  width: auto !important;
  background: rgba(15,23,42,0.65);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 14px 16px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.35);
}

/* 5) ファイル入力・ボタン */
input[type="file"]{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
}
button, .btn{
  border: 1px solid rgba(34,211,238,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 650;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
button:hover, .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,0.55);
  box-shadow: 0 10px 26px rgba(34,211,238,0.15);
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #031018 !important;
  border: none !important;
  box-shadow: 0 14px 34px rgba(34,211,238,0.20);
}

/* 6) スライダー：計測器UI */
label{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .2px;
}
#confValue, #iouValue, #batchValue, #imgszValue{
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  margin-left: 6px;
}
.slider-wrapper{
  width: 100% !important;
  margin: 10px 0 16px 0 !important;
  gap: 12px !important;
}
input[type="range"]{
  width: 100% !important;
  accent-color: var(--accent);
}
.slider-labels{
  top: 26px !important;
  color: rgba(229,231,235,0.55);
  font-size: 10px;
}

/* 7) ツールチップ：ダーク＋発光 */
.tooltip{
  background: rgba(15,23,42,0.92) !important;
  color: var(--text) !important;
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
}

/* 8) 結果画像：主役カード */
#image-container{
  margin-top: 14px;
}
#resultImageContainer{
  background: rgba(15,23,42,0.60);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.45);
}
#resultImage{
  border-radius: 14px;
}

/* 9) テーブル：Excel感を消す（ダッシュボード化） */
#results-table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}
#results-table th{
  color: rgba(229,231,235,0.7);
  font-size: 12px !important;
  border: none !important;
  padding: 8px 10px !important;
}
#results-table td{
  background: rgba(15,23,42,0.55);
  border: 1px solid var(--line) !important;
  color: var(--text);
  font-size: 14px !important;
  padding: 10px 10px !important;
}
#results-table tr td:first-child{ border-radius: 12px 0 0 12px; }
#results-table tr td:last-child{ border-radius: 0 12px 12px 0; }

/* 10) 進捗バー：シアン発光 */
#progressBar{
  background: rgba(34,211,238,0.10) !important;
  border: 1px solid rgba(34,211,238,0.20);
}
#progressFill{
  background-image: linear-gradient(45deg,
    rgba(34,211,238,0.65) 25%, transparent 25%, transparent 50%,
    rgba(14,165,233,0.65) 50%, rgba(14,165,233,0.65) 75%,
    transparent 75%, transparent) !important;
}

/* 11) 注意文・警告 */
#warning-area{ color: var(--danger) !important; }

#previewPlaceholder{
  color: rgba(229,231,235,0.5);
  font-size: 14px;
  letter-spacing: .3px;
}

/* サンプル画像エリア */
.samples-wrap{
  position: relative;
  width: 100%;
  padding-bottom: 28px; /* 注意文のぶんだけ余白を確保 */
}

/* 右下注意文 */
.sample-note{
  position: absolute;
  right: 8px;
  bottom: 4px;

  font-size: 11px;
  color: rgba(229,231,235,0.55);
  text-align: right;
  line-height: 1.4;

  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.sample-note:hover{
  color: rgba(229,231,235,0.85);
  border-color: rgba(34,211,238,0.35);
}
/* =========================
   サンプル画像帯：下に離して横スクロール確実化
   ========================= */

/* 画像プレビューの下にスペースを確保（重なり防止） */
#image-container{
  margin-bottom: 16px; /* ここを増やすとさらに下がります */
}

/* サンプル帯は必ず横幅100%で、横スクロール */
.scroll-wrapper.samples-wrap{
  width: 100% !important;         /* ← 30%を殺す */
  overflow-x: auto !important;
  overflow-y: hidden !important;

  margin-top: 16px;               /* ← 画像から“下に離す” */
  padding: 10px 10px 30px 10px;   /* 下に注意文ぶんの余白 */
  
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}

/* 画像を横一列固定（折り返し禁止） */
.scroll-wrapper.samples-wrap .slider-images{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  white-space: nowrap;
  min-width: max-content;         /* 中身の幅を保持してスクロール発生 */
}

/* サンプル画像のサイズを少しだけ整える */
.scroll-wrapper.samples-wrap .slider-images img{
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* 注意文は帯の右下（既存のあなたの指定を維持） */
.scroll-wrapper.samples-wrap .sample-note{
  right: 10px;
  bottom: 8px;
}

/* slim topbar */
.topbar-slim{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.topbar-left .brand-title{
  font-weight:800;
  letter-spacing:.4px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.pill .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#999;
  display:inline-block;
}

/* states */
.pill-online{ border-color: rgba(34,211,238,0.35); }
.pill-online .dot{ background: rgb(34,211,238); }

.pill-busy{ border-color: rgba(245,158,11,0.35); }
.pill-busy .dot{ background: rgb(245,158,11); }

.pill-offline{ border-color: rgba(239,68,68,0.35); }
.pill-offline .dot{ background: rgb(239,68,68); }

.pill-user{
  border-color: rgba(255,255,255,0.12);
}
.user-icon{
  opacity:.75;
}
button:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}