/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

/* --- 全体 --- */
body.body0 {
  font-family: 'Poppins', sans-serif;
  background-color: #0d0d0d;
  color: #fff;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #ff4f4f;
  transition: color 0.3s;
}

a:hover {
  color: #ffa8a8;
}


.clear{clear: both;}

/* --- ヘッダー --- */
.top0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a1a;
  padding: 20px 40px;
  font-size: 1.8rem;
  font-weight: 700;
  border-bottom: 1px solid #333;
  flex-wrap: nowrap; /* ← 常に1行にする */
}

/* --- 言語ボタン ---（旧タイプ）*/
.lang_button1,
.lang_button2,
.lang_button3,
.lang_button4 {
  font-size: 0.9rem;
  margin-left: 10px;
  padding: 6px 12px;
  border: 1px solid #666;
  border-radius: 5px;
  background-color: #222;
  color: #eee;
  transition: all 0.3s ease;
}

.lang_button1:hover,
.lang_button2:hover,
.lang_button3:hover,
.lang_button4:hover {
  background-color: #444;
  color: #fff;
}

/* --- 国旗ボタン --- */
.lang-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.lang-btn img {
  height: 28px;
  width: auto;
  border-radius: 4px;
  transition: transform 0.2s ease;
  box-shadow: 0 0 4px rgba(255,255,255,0.2);
}

.lang-btn:hover img {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
}

.link_button1, .link_button2, .link_button3 {
  display: inline-block;
  padding: 5px 20px;
  margin: 4px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  text-decoration: none;
  transition: 0.3s;
  text-align: center;
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 200px;
  box-sizing: border-box;
}

.link_button1 {
  background: linear-gradient(90deg, #00ffe1, #00bfff);
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 255, 225, 0.5);
}

.link_button2 {
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
}

.link_button3 {
  background: rgba(255, 255, 255, 0.05);
  color: #333;
}

.link_button2:hover {
  background: rgba(0, 255, 225, 0.2);
  color: #fff;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #00ffe1, #00bfff);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 16px;
  border-radius: 12px;
  text-decoration: none;
  display: none;
  z-index: 1000;
  box-shadow: 0 0 12px rgba(0, 255, 225, 0.5);
  transition: all 0.3s ease;
}

.back-to-top:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #00bfff, #00ffe1);
  box-shadow: 0 0 20px rgba(0, 255, 225, 0.7);
}


.main_text1{
  font-size: 1.2em;
  max-width: 1600px;
  margin: 0 auto;
  overflow-wrap: break-word;
  word-break: break-word;

}

.footer_text1{
  font-size: 1em;
  max-width: 1600px;
  margin: 0 auto;
  overflow-wrap: break-word;
  word-break: break-word;

}




/* タイトル */


.header0_1 {
  text-align: center;
  font-size: 2.2rem;
  margin: 50px 0 30px;
  font-weight: 700;
  color: #fff;
}



.header0_1 {
  text-align: center;
  font-size: 2.2rem;
  margin: 50px 0 30px;
  font-weight: 700;
  color: #fff;
}

.link1 {
  text-align: center;
  font-size: 2.2rem;
  margin: 50px 0 30px;
  font-weight: 700;
  color: #fff;
}

/* 全体ラッパー */
.text1_1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 0 20px;
}

/* リンクセクション */
/* 親コンテナごと中央寄せ(flexで中央揃え) */
.banner-row-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;           /* バナー同士の間隔 */
  margin: 36px 0 44px 0;
  flex-wrap: wrap;
}
/* 各バナー(カード)をもっと大きく */
.kuso_banner1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 16px;
  overflow: visible;
  box-shadow: none;
  margin: 0;
  width: 40vw;
  max-width: 40vw;
  height: 150px;
}

.kuso_banner1 a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #171d1f;
  transition: transform 0.18s cubic-bezier(.5,2,.5,.97), box-shadow .17s;
}
.kuso_banner1 a:hover {
  transform: scale(1.03) translateY(-3px);
  box-shadow: 0 12px 30px rgba(30,255,255,0.24);
}

.kuso_banner1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  filter: brightness(0.97) contrast(1.08);
  transition: filter 0.3s;
}
.kuso_banner1 a:hover img {
  filter: brightness(1.04) contrast(1.18) saturate(1.10) blur(0.2px);
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  box-sizing: border-box;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .text1_1 {
    flex-direction: column;
    align-items: center;
  }

  .float_dev1 {
    width: 100%;
    max-width: 90%;
  }

  .overlay-text {
    font-size: 1.2rem;
  }

  /* 国旗のみ縮小 */
  .lang-btn img {
    height: 20px;
  }

  /* ヘッダーのpaddingだけ調整（改行させない） */
  .top0 {
    padding: 12px 20px;
  }

  .lang-buttons {
    gap: 6px;
  }
}





 /* タイトル */


.header1{
	font-size: 2.2em;
    font-weight: bold;
	text-align:center;
}


  /* 要素カード */
  .project-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	  gap: 20px;
	  padding: 0 20px;
	  max-width: 1600px;     /* 最大幅を指定 */
	  margin: 0 auto;        /* 中央に配置 */
  }
  .project-card1 {
    background-color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease;
    cursor: pointer;
    border: 1px solid #333;
  }
  .project-card1:hover {
    transform: scale(1.02);
  }
  
   .project-card2 {
    background-color: #111d2b;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease;
    cursor: pointer;
    border: 3px solid #6a67fc;
  }
  .project-card2:hover {
    transform: scale(1.02);
  }
  
  
  .card-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }
  .card-content {
    color: #eee;
  }
  .card-status.blue { color: #57d1ff; font-size: 0.9rem; }
  .card-status.red { color: #ff6161; font-size: 0.9rem; }
  .card-title1 {
    font-size: 1.2em;
    font-weight: bold;
	margin: 0;
    text-align: center;
  }
  .card-title2 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 6px 0;
  }
  
 .card-title1a,
 .card-title1b,
 .card-title1c,
 .card-title1d,
 .card-title1e
 {
    font-size: 1.2em;
    font-weight: bold;
	margin: 0;
    text-align: center;
  }
  
 .card-title1a { color: #e36363;}
 .card-title1b { color: #fff67e;}
 .card-title1c { color: #82ff7b;}
 .card-title1d { color: #739dff;}
 .card-title1e { color: #c699ff;}
  
  
  
  
  .card-career{
    font-size: 1.2em;
	margin: 0;
    text-align: center;
  }
  
  .card-summary {
	padding:10px;
    font-size: 0.9em;
    color: #bbb;
  }
  
  .card-detail {
    font-size: 0.85em;
    display: none;
    color: #ccc;
	padding:10px;
  }
  .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-link {
  font-size: 1.1em;
  color: #57d1ff;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.card-link:hover {
  background-color: #2a2a2a;
}

.release-date {
  font-size: 0.8em;
  color: #999;
  display: block;
  margin-left: 10px;
}



.input_text1{
	font-size: 1.6em;
	padding:5px;
	margin:5px;
	width:92%;
	border-radius:5px;
	border:none;
}


/* テーブル */

/* 表全体 */
.bug-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fefefe;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  font-family: 'Segoe UI', sans-serif;
  color: #222;
}

/* ヘッダー */
.bug-table th {
  background-color: #494949;
  color: #ffeb54;
  padding: 0.5em;
  font-size: 1.5em;
  font-weight: bold;
}

/* 左端：状態 */
.bug-table_td1 {
  background-color: #b52e2e;  /* 少し落ち着いた赤 */
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
}

.bug-table_td2 {
  background-color: #2f3e50; /* 落ち着いた青 */
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
}

/* 中央：NGポイント（背景を淡いグレーに） */
.bug-table_td3,
.bug-table_td4,
.bug-table_td5,
.bug-table_td6 {
  background-color: #f6f6f6;
  color: #333333;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

/* 右端：区分（落ち着いた背景に統一） */
.bug-table_td7,
.bug-table_td8 {
  font-weight: bold;
  font-size: 1.2em;
  color: #333333;
}
.bug-table_td7{
  background-color: #e1e1e1;
}
.bug-table_td8{
  background-color: #c9c9c9;
}

/* 強調テキスト */
.red1    { color: #e74c3c; text-shadow: none;}
.orange1 { color: #f39c12; text-shadow: none;}
.green1  { color: #27ae60; text-shadow: none;}
.blue1   { color: #3498db; text-shadow: none;}
.purple1 { color: #9b6de1; text-shadow: none;}
.red2    { color: #e74c3c; }
.orange2 { color: #f39c12; }
.green2  { color: #27ae60; }
.blue2   { color: #3498db; }


/* 各セル */
.bug-table td {
  padding: 0.5em;
  text-align: center;
}

/* セクションタイトル */
.section-title1 {
  font-size: 2em;
  color: #00ffe0;
  border-bottom: 2px solid #00ffe0;
  margin-bottom: 1em;
  max-width: 1600px;
  margin: 0 auto;
  border-left: 6px solid #00ffc8;
  padding-left: 15px;
  overflow-wrap: break-word;
  word-break: break-word;
  text-shadow: 0 0 5px rgb(16 255 136 / 48%);
}

/* テーブル外ラッパー */
.bug-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  max-width: 1600px;
  margin: 50px auto;
}


@media (max-width: 768px) {
	.bug-table th {
	  font-size: 1.1em;
	}

	/* 左端：状態 */
	.bug-table_td1 {
	  font-size: 1.1em;
	}

	.bug-table_td2 {
	  font-size: 1.1em;
	}

	/* 中央：NGポイント（背景を淡いグレーに） */
	.bug-table_td3,
	.bug-table_td4,
	.bug-table_td5,
	.bug-table_td6 {
	  font-size: 1.0em;
	}


	.bug-table_td7,
	.bug-table_td8 {
	  font-size: 1.0em;
	}

}





/* 🔳🔳🔳🔳🔳🔳🔳🔳バグ事例 */

.bug-section {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Segoe UI', sans-serif;
}

.section-title2 {
  font-size: 2.2em;
  color: #00ffe0;
  border-bottom: 2px solid #00ffe0;
  margin-bottom: 1em;
  max-width: 1600px;
  margin: 0 auto;
  margin-top:50px;
  border-left: 6px solid #00ffc8;
  padding-left: 15px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.section-subtitle2,
.section-subtitle3,
.section-subtitle4,
.section-subtitle5,
.section-subtitle6,
.section-subtitle7,
.section-subtitle8,
.section-subtitle9,
.section-subtitle10
{
	color: #ffffff;
    font-size: 2.0em;
	margin: 0 auto;
    margin-bottom: 0.2em;
	max-width: 1600px;
}
.section-subtitle2 { /* あか系 */
    border-bottom: 2px solid #e74c3c;
}

.section-subtitle3 { /* だいだい系 */
    border-bottom: 2px solid #ff9b00;
}

.section-subtitle4 { /* き系 */
    border-bottom: 2px solid #fffa37;
}

.section-subtitle5 { /* きみどり系 */
    border-bottom: 2px solid #6aaf37;
}

.section-subtitle6 { /* みどり系 */
    border-bottom: 2px solid #00ffa3;
}

.section-subtitle7 { /* あお系 */
    border-bottom: 2px solid #3498db;
}

.section-subtitle8 { /* むらさき系 */
    border-bottom: 2px solid #7358ff;
}

.section-subtitle9 { /* むらさき系 */
    border-bottom: 2px solid #ca73ff;
}
.section-subtitle10 { /* ぴんく系 */
    border-bottom: 2px solid #ff4b73;
}




.section-subsubtitle2 {
    font-size: 1.6em;
    margin-bottom: 1em;
    color: #c7aeff;
}

.bug-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.bug-card-grid-field{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2枚/行 */
  gap:16px;
  align-content:start;   /* 上寄せ */
  justify-items:start;   /* 各カードの左寄せ */
  
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 2列 */
  gap: 20px;
}
.bug-card {
  background: #2a2a2a;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.event-card1 {
  background: #2a2a2a;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.event-card2 {
  background: #181f2f;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.event-card3 {
  background: #2a2a2a;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}


.bug-description {
  padding:0px;
  margin-bottom: 16px;
  font-size: 1.4em;
  color: #fff;
}

.bug-images {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}
.bug-image-block1,
.bug-image-block2
{
  flex: 1 1 45%;
  text-align: center;
}
.bug-image-block1 img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.bug-image-block2 img {
  width: 50%;
  border-radius: 8px;
  object-fit: cover;
}



.bug-label {
  font-weight: bold;
  margin-top: 8px;
  font-size: 1.1em;
  padding: 4px 8px;
  display: inline-block;
  border-radius: 6px;
}
.bug-label.ok {
  background-color: #4caf50;
  color: #fff;
  width:300px;
}
.bug-label.ng {
  background-color: #e53935;
  color: #fff;
  width:300px;
}

.bug-label.trigger {
  background-color: #4c6aaf;
  color: #fff;
  width:300px;
}

.bug-label.before {
  background-color: #30ad52;
  color: #fff;
  width:300px;
}
.bug-label.after {
  background-color: #d94d73;
  color: #fff;
  width:300px;
}







.bug-label.etc {
  background-color: #5086d9;
  color: #fff;
  width:300px;
}
.bug-caption {
  font-size: 1.2em;
  margin-top: 4px;
  color: #fff;
  padding:5px;
  padding-bottom:20px;
}






@media (max-width: 768px) {/*768*/
  .bug-images {
    flex-direction: column;
  }
  .bug-image-block {
    flex: 1 1 100%;
  }
  
  
	.bug-image-block2 img {
	  width: 100%;
	  border-radius: 8px;
	  object-fit: cover;
	}
	  
  .bug-card-grid-field{
    grid-template-columns: 1fr;
	}
}
  
  
  



:root{
  --ok:#22c55e;  /* 緑 */
  --ng:#ef4444;  /* 赤 */
  --card:#ffffff;
  --ink:#111827;
}

.bug-image-block1{ gap:10px; } /* 上下の詰め感を整える */

.bug-text1{
  display:block; align-items:center; justify-content:center;
   padding:14px 18px;
  color:var(--ink); background:#ffffff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.24);
  font-weight:800; font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing:.02em;
  position:relative; isolation:isolate; /* 擬似要素の重なり制御 */
  transition:transform .15s ease, box-shadow .15s ease;
  
  
  display:block;
  padding:14px 18px;
  color:var(--ink);
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.24);
  font-weight:800;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing:.02em;
  position:relative;
  isolation:isolate;
  transition:transform .15s ease, box-shadow .15s ease;
}

.bug-text1-box1,
.bug-text1-box2,
.bug-text1-box3,
.bug-text1-box4,
.bug-text1-box5,
.bug-text1-box6,
.bug-text1-box7,
.bug-text1-box8{
  width:70%;                 
  margin:0 auto;             
  padding:16px 20px;         
  border:4px solid #bbbbbb;  
  border-radius:10px;        
  background:#f1f1f1;        
  text-align:left;           
  font-weight:600;           
  line-height:1.6;           
}

.bug-text1-box2{
	font-size:3pt;
	padding:35px 20px;  
}

.bug-text1-box3{
  background:#fff28c;
  color:#fffdbb; 
}

.bug-text1-box4{
  width: 200px;              /* かなり細くして枠を小さくする */
  white-space: nowrap;       /* 自動改行しない */
  word-break: keep-all;      /* できるだけ途中で折り返さない */
  overflow: visible;         /* 枠からはみ出して見せる */
}

.bug-text1-box5{
  width: 70%;                /* 横幅はそのまま */
  height: 40px;              /* 高さをわざと小さく固定 */
  overflow: visible;         /* 枠からはみ出して見せる */
  margin-bottom:50px;
}




/* 枠の中で重ねるためのベース設定 */
.bug-text1-box1{
  position: relative;
  overflow: visible;
}

/* テキスト on テキスト 用の赤文字（上にかぶさる） */
.bug-overlap-text{
  position: absolute;
  left: 18px;
  top: 6px;
  color: #ff3b3b;
  font-size: 24px;
  font-weight: 800;
  pointer-events: none;
  z-index: 3;
}

/* テキスト on ボタン 用のボタンコンテナ（この枠内で重ねる） */
.bug-overlap-btn-container{
  position: relative;
  overflow: visible;
}

/* バグ用の重ならないボタン */
.bug-overlap-btn1{
  left: 50%;
  top: 50%;
  padding: 8px 20px;
  background: linear-gradient(180deg, #ffe9a3 0%, #ffcc54 100%);
  border: 2px solid #d3a034;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 4px 10px rgba(0,0,0,0.25);
  font-size: 17px;
  font-weight: 700;
  color: #604200;
  z-index: 4;
}

/* バグ用の重なりボタン（中央にドンと重ねる） */
.bug-overlap-btn2{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 20px;
  background: linear-gradient(180deg, #ffe9a3 0%, #ffcc54 100%);
  border: 2px solid #d3a034;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 4px 10px rgba(0,0,0,0.25);
  font-size: 17px;
  font-weight: 700;
  color: #604200;
  z-index: 4;
}

.bug-text-front{
  position: relative;
  z-index: 5;
}



/* 左端に細いアクセントバー（OK/NGで自動色分け） */
.bug-image-block1 .bug-text1::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:6px; border-radius:12px 0 0 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0)) ;
}
.bug-image-block1:has(.ok) .bug-text1::before{ background: var(--ok); }
.bug-image-block1:has(.ng) .bug-text1::before{ background: var(--ng); }

/* うっすらグロウで視線誘導 */
.bug-image-block1:has(.ok) .bug-text1{ box-shadow:0 4px 18px rgba(34,197,94,.25); }
.bug-image-block1:has(.ng) .bug-text1{ box-shadow:0 4px 18px rgba(239,68,68,.22); }

/* 小さなホバー効果（教材でも邪魔しない程度） */
.bug-text1:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(0,0,0,.28); }

/* スマホでの可読性担保 */
@media (max-width:768px){
  .bug-text1{ min-height:56px; padding:12px 14px; }
}

.bug-text1 mark{
  background: linear-gradient(90deg, rgba(239,68,68,.18), rgba(239,68,68,.28));
  padding:0 .15em; border-radius:.25em;
}









/* 🔳🔳🔳🔳🔳🔳🔳🔳キャリア */
/* 表全体 */
.task-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fefefe;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  font-family: 'Segoe UI', sans-serif;
  color: #222;
}

/* ヘッダー */
.task-table th {
  background-color: #494949;
  color: #ffeb54;
  padding: 0.5em;
  font-size: 1.5em;
  font-weight: bold;
}

/* 各セル */
.task-table td {
  padding: 0.5em;
}


/* 左端：状態 */

.task-table_td1,
.task-table_td2,
.task-table_td3,
.task-table_td4,
.task-table_td5{
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}


.task-table_td1 {
  background-color: #b52e2e;  /* 少し落ち着いた赤 */
}

.task-table_td2 {
  background-color: #c0892e;  /* 落ち着いたゴールド */
}

.task-table_td3 {
  background-color: #3c6e52;  /* 深みのあるグリーン */
}

.task-table_td4 {
  background-color: #2f3e50;  /* 落ち着いた青（そのまま） */
}

.task-table_td5 {
  background-color: #4c3953;  /*  */
}


/* 中央：NGポイント（背景を淡いグレーに） */
.task-table_td6 {
  background-color: #f6f6f6;
  color: #333333;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

/* 右端：区分（落ち着いた背景に統一） */
.task-table_td7,
.task-table_td8 {
  font-size: 1.2em;
  color: #333333;
  text-align: left;
  padding-left: 1em;  /* ← これで「左寄せ感」が強調されます */
  vertical-align: top; /* ← 内容が縦中央に寄ってしまっている場合は上寄せ */
}
.task-table_td7{
  background-color: #e1e1e1;
}
.task-table_td8{
  background-color: #c9c9c9;
}


.task-table_td97,
.task-table_td98 {
  width: 28px;
  font-size: 1.2em;
  color: #333333;
  text-align: center;
  padding-left: 1em;  /* ← これで「左寄せ感」が強調されます */
  vertical-align: top; /* ← 内容が縦中央に寄ってしまっている場合は上寄せ */
}
.task-table_td97{
  background-color: #e1e1e1;
}
.task-table_td98{
  background-color: #c9c9c9;
}


.task-check {
  transform: scale(1.2);
  cursor: pointer;
}

.styled-checkbox {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0px solid #fff;
  background-color: #9d9d9d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* チェックマーク */
.styled-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 8px;
  height: 16px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ホバー時のエフェクト */
.styled-checkbox:hover {
  box-shadow: 0 0 4px #00ffc8;
}



.task-table_td99{
  background-color: #0d0d0d;
  height:1px;
}


@media (max-width: 768px) {
	.task-table th {
	  font-size: 1.1em;
	}

.task-table_td1,
.task-table_td2,
.task-table_td3,
.task-table_td4,
.task-table_td5{
  font-size: 1.1em;
}

	/* 中央：NGポイント（背景を淡いグレーに） */
	.task-table_td6 {
	  font-size: 1.0em;
	}


	.task-table_td7,
	.task-table_td8 {
	  font-size: 1.0em;
	}

}





/* 🔳🔳🔳🔳🔳チェックリスト形式 テストケース*/
:root{
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --bg:#ffffff;
  --zebra:#f8fafc;
}

/* 全体 */
.check1_wrap{
  margin:auto;
  padding:24px;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
}

.check1_sub{
  color:var(--muted);
  font-size:14px;
  margin:0 0 16px;
}

/* テーブルラッパー */
.check1_table-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  background:#fff;
  color:#333;
  max-width:1600px;
  margin:0 auto;
}

/* テーブル本体 */
.check1_table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:980px;
}

/* 見出し（固定） */
.check1_table thead th{
  position:sticky;
  top:0;
  background:#f3f4f6;
  border-bottom:1px solid var(--line);
  z-index:1;
}

/* セル共通：上下中央 */
.check1_table th,
.check1_table td{
  padding:20px 12px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  vertical-align:middle;           /* ← 全セル上下中央 */
  font-size:14px;
}

/* 最右列の右線を消す */
.check1_table th:last-child,
.check1_table td:last-child{
  border-right:none;
}

/* ゼブラ */
.check1_table tbody tr:nth-child(odd){
  background:var(--zebra);
}

/* 文字折り返し制御 */
.check1_nowrap{ white-space:nowrap; }

/* ID列（数値桁揃え） */
.check1_id{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-align:center;               /* 横中央 */
}

/* 判定・優先度（横中央） */
.check1_judge,
.check1_prio{
  text-align:center;               /* 横中央 */
  font-weight:700;
}

/* 判定セルのスタイル */
.check1_judge{
  min-width:80px;
  text-align:center;
  font-weight:700;
}

/* 判定ごとの色分け */
.check1_judge.ok{
  color:#2563eb;   /* 青（Tailwindのblue-600に近い色） */
}

.check1_judge.ng{
  color:#dc2626;   /* 赤（Tailwindのred-600に近い色） */
}

/* ヘッダ側も列単位で横中央（ID=1, 判定=6, 優先度=8） */
.check1_table thead th:nth-child(1),
.check1_table thead th:nth-child(6),
.check1_table thead th:nth-child(8){
  text-align:center;
}

/* 優先度の色 */
.check1_prio-H{ color:#b91c1c; }   /* High */
.check1_prio-M{ color:#b45309; }   /* Medium */
.check1_prio-L{ color:#0369a1; }   /* Low */

/* 印刷用 */
@media print{
  .check1_wrap{ padding:0; }
  .check1_table-wrap{ border:none; overflow:visible; }
  .check1_table thead th{ position:static; }
  .check1_table tbody tr:nth-child(odd){ background:#fff; }
  .check1_table th,
  .check1_table td{ border:0; border-bottom:1px solid #ccc; }
}




/* 🔳🔳🔳🔳🔳🔳フロー図形式*/
/* テーブル全体：罫線を消してセル間に余白を作る */
.check1_flow1_table{
  border-collapse: separate !important;   /* ← collapseをやめる */
  border-spacing: 24px 16px;              /* ← セル間の空白（上下×左右） */
  width: 100%;
  table-layout: fixed;                    /* 矢印セルのセンタリングが安定 */
  background: transparent;
}
/* 既存のグローバル罫線を無効化 */
.check1_flow1_table th,
.check1_flow1_table td{
  border: none !important;
  background: transparent !important;
  padding: 0;                             /* 余白はノード側で付ける */
  vertical-align: middle;
  text-align: center;
}

/* ノード：角丸カード。影なし、目立つ枠だけ */
.check1_flow1{
  text-align: center;

}
.check1_flow1 div{
  border:2px solid #bfbfbf;
  padding:15px;
  text-align: center;
  border-radius: 12px;
  background-color:#ededed;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #333;
  font-weight:bold;
}



/* 矢印セル */
.check1_flow2 {
  display: flex;              /* 横並びにする */
  align-items: center;        /* 垂直方向の中央揃え */
  justify-content: center;    /* 水平方向の中央揃え */
  gap: 6px;                   /* 矢印とOKの間の余白 */
  font-size: 30px;
  font-weight: bold;
  color: #7a7a7a;             /* 矢印の色 */
}

/* 判定ラベル */
.check1_flow_judge {
  font-size: 15px;
  font-weight: bold;
}

.check1_flow_judge.ok {
  color: #2563eb;   /* 青 */
}
.check1_flow_judge.ng {
  color: #dc2626;   /* 赤 */
}
.check1_flow_judge.or {
  color: #fb6b24;   /* オレンジ */
}
.check1_flow_judge.w {
  color: #ffffff;   /* 白 */
}








/* 🔳🔳🔳🔳🔳🔳テストケース作成時の原則*/
.check-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  max-width: 1600px;
  margin: 0px auto;
}



.check-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fefefe;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  font-family: 'Segoe UI', sans-serif;
  color: #222;

  table-layout: fixed; 
}

/* ヘッダー */
.check-table th {
  background-color: #494949;
  color: #ffeb54;
  padding: 0.5em;
  padding-left: 1.0em;
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
}


/* 各セル */
.check-table td {
  padding: 20px;
  vertical-align: middle;
}


/* 左端：状態 */
.check-table_td1 {
  background-color: #FFFFFF;
  text-align: center;
  width: 10%;
  padding: 5px !important;
}

.check-img {
    width: 100%;
    height: 100%;
  border-radius: 12px;
}

.check-table_td2 {
  background-color: #b52e2e;  /* 少し落ち着いた赤 */
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  
  width: 10%;  /* 「NG」「OK」ラベル用 */
}

.check-table_td3 {
  background-color: #2f3e50; /* 落ち着いた青 */
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  
  width: 5%;  /* 「NG」「OK」ラベル用 */
}

.check-table_td4,
.check-table_td5,
.check-table_td6{
  background-color: #f6f6f6;
  color: #333333;
  font-weight: bold;
  font-size: 1.3em;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
  width: 35%;
}

.check-table_td6
{
  background-color: #ffffff;
  color: #836060;
  font-size: 1.2em;
  vertical-align: top !important;
  width: 50%;
}





/* 強調テキスト */
.red1    { color: #c72c1c; }
.orange1 { color: #ff7800; }
.green1  { color: #27ae60; }
.blue1   { color: #2d76cd; }
.red2    { color: #e74c3c; }
.orange2 { color: #f39c12; }
.green2  { color: #27ae60; }
.blue2   { color: #3498db; }
.purple2 { color: #9b6de1; }





/* 🔳🔳🔳🔳🔳🔳バグレポート


/* テーブルラッパー */
.report1_table-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  background:#fff;
  color:#333;
  max-width:1600px;
  margin:0 auto;
}

.report1_table {
	width:100%;
	border-collapse:collapse;
	font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
	}
.report1_table td {
	border:1px solid #e5e7eb;
	padding:15px 15px;
	vertical-align: middle; 
	}

.report1_td1,
.report1_td3 { 
  background:#f8fafc;
  font-weight:700;
  white-space:nowrap;
  text-align:center;
}
.report1_td2,
.report1_td4 {
	background:#fff;
	}
	
.report1_td2{
	text-align:center;
	}

.report1_table-wrap {
	border:1px solid #e5e7eb;
	border-radius:12px;
	overflow:auto;
	}

@media (max-width:768px){/*680*/
  .report1_table td { padding:6px 8px; }
  .report1_td1, .report1_td3 { width:auto; }
}