@charset "utf-8";
:root{
  --serif-font:'Noto Serif JP', serif;
	--icon-bootstrap:'bootstrap-icons';
  --main-color:#00bcb9;
  --key-color:#0c3821;
  --point-color:#897300;
  --font-color:#111;
  --normal: 400;
  --bold: 700;
}
html {
  scroll-behavior: smooth;
}
header{
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 1.5%;
  box-sizing: border-box;
  z-index: 1;
}
header nav{
  background-color: #FFF;
  border-radius: 9999px;
  margin-top: 20px;
}
header nav ul{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  align-items: center;
  padding: 0 1.5em;
}
header nav ul li a{
  font-size: 0.9em;
  color: var(--font-color);
  line-height: 3.0;
  transition: 0.2s;
}
header nav ul li a:hover{
  text-decoration: none;
  color: var(--main-color);
  transition: 0.2s;
}
#billboard{
  aspect-ratio: 1440 / 640;
  width: 100%; height: auto;
  background-image: url(../../img/well/billboard.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  text-align: left;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
#billboard #logo h1{
  position: absolute;
  top: 20px; left: 3%;
  width: 15%; height: auto;
}
#billboard-copy{
  margin-left: 3%;
}
#billboard-copy #main-copy{
  font-family: var(--serif-font);
  color: var(--key-color);
  font-size: clamp(32px, 3.4vw, 72px);
  line-height: 1.6;
  margin-bottom: 0.5em;
  text-shadow: 
     2px  0px 0px white,
    -2px  0px 0px white,
     0px  2px 0px white,
     0px -2px 0px white;
}
#billboard-copy #main-copy span{
  background-color:#FFF;
}
#billboard-copy #sub-copy{
  font-size: 1.25vw;
}
#topics{
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  text-align: left;
  padding: 1em 3%;
  box-sizing: border-box;
  margin-bottom: 6em;
}
#topics h2{
  font-size: 1em;
  font-weight: var(--normal);
  line-height: 1;
  text-transform: uppercase;
}
#topics h2::after{
  content: "";
  border-right: 1px solid var(--font-color);
  margin-left: 1em;
}
#topics p{
  line-height: 1;
}
#topics p a{
  text-decoration: none;
}
#topics p a time{
  color: var(--font-color);
  margin: 0 1em;
  font-size: 0.9em;
}
#topics p a:hover span{
  text-decoration: underline;
}

section p{
  margin-bottom: 1rem;
}

.button a {
    display: block;
    text-decoration: none;
    border: 1px solid #333;
    border-radius: 9999px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #333;
    padding: 0.5em 1.5em;
    overflow: hidden;
    position: relative;
    transition: 0.2s;
    text-align: center;
}
.button a::after{
    position: absolute;
    font-family: var(--icon-bootstrap);
    color: #333;
    font-size:0.8rem; line-height:1;
    font-weight: var(--bold);
    top: 50%; right: 18px;
    transform: translateY(-50%);
    z-index: 12;
    transition: 0.2s;
}
.button a:hover{
  background-color:#333 ;
  color: #FFF;
  transition: 0.2s;
}
.button a:hover::after{
  color: #FFF;
  transition: 0.2s;
}
.button a:not([class])::after{
  content:"\F285";
}
.button a.external-link::after{
  content:"\F1C5";
}

.about{
  width: 980px;
  margin: 0 auto 6em;
  text-align: left;
}
.about > section.flex{
  align-items: center;
  flex-direction: row-reverse;
}
.about h2{
  color: var(--key-color);
  font-size: 1.4em;
  margin-bottom: 1rem;
}
.about figure{
  width: 360px; height: auto;
  margin-left: 2rem;
}
.subject{
  width: 100%;
  background:
    url("../../img/well/subject_back01.png") no-repeat left bottom,
    url("../../img/well/subject_back02.png") no-repeat right top,
    #f5ffff;
  background-size: 20%, 20%;
  padding: 3em calc((100% - 1200px) / 2 ) 6em;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 6em;
}
.subject h2{
  color: var(--key-color);
  font-weight: var(--bold);
  font-size: 1.2em;
  margin-bottom: 3rem;
}
.subject h2::before{
  content: "－";
  margin-right: 0.5em;
}
ul.subject-list{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.subject-list li{
  width: 580px;
  display: flex;
  justify-content: space-between;
  background-color: #FFF;
}
ul.subject-list li:nth-child(3){
  width: 700px;
  margin: 0 auto;
  margin-top: 2em;
}
ul.subject-list li figure{
  flex: 1;
  height: 100%; width: auto;
}
ul.subject-list li .text-box{
  width: 68%;
  padding: 2em;
  box-sizing: border-box;
}
ul.subject-list li .text-box h3{
  color: #FFF;
  font-weight: var(--bold);
  text-align: center;
  width: 100%;
  margin-bottom: 1em;
}
ul.subject-list li:nth-child(1) .text-box h3{
  background-color: var(--main-color);
}
ul.subject-list li:nth-child(2) .text-box h3{
  background-color: var(--key-color);
}
ul.subject-list li:nth-child(3) .text-box h3{
  background-color: var(--point-color);
  line-height: 1.6;
}
ul.subject-list li .text-box h3 span{
  display: block;
  font-size: 0.8rem;
  line-height: 1;
  padding-bottom: 0.5em;
}
ul.subject-list li:nth-child(3) .text-box h3 + p{
  color: var(--point-color);
  font-size: 1.1em;
  line-height: 1.6;
}
ul.subject-list li .button a{
  width: 120px;
}
ul.subject-list li:nth-child(3) .button a{
  width: 200px;
  margin: 0 auto;
  color: #FFF;
  font-weight: var(--bold);
  background-color: var(--point-color);
  border: 2px solid var(--point-color);
}
ul.subject-list li:nth-child(3) .button a:hover{
  background-color: #FFF;
  color: var(--point-color);
}
ul.subject-list li:not(:nth-child(3)) .button a::after{
    content:"\F282";
}
ul.subject-list li:nth-child(3) .button a::after{
  color: #FFF;
}
ul.subject-list li:nth-child(3) .button a:hover::after{
  color: var(--point-color);
}
p.how-long{
  text-align: center;
  font-size: 0.85em;
  margin-bottom: 0.5em;
}
p.how-long::before{
  content:"＼" ;
  margin-right: 0.2em;
}
p.how-long::after{
  content:"／" ;
  margin-left: 0.2em;
}




.support{
  position: relative;
  text-align: left;
}
#sub-nav{
  position: sticky;
  top: 3em; left: calc((100% - 1200px) / 4 );
  width: 240px;
  background-color: rgba(255,255,255,0.9);
  background-image: url(../../img/well/logo02.svg);
  background-position: center 20px;
  background-repeat: no-repeat;
  background-size: 140px auto;
  padding: 80px 20px 20px;
  box-sizing: border-box;
//  border: 1px solid #CCC;
}
#sub-nav #sub-nav-title{
  font-size: 0.8em;
  text-align: center;
  margin-bottom: 1em;
}
#sub-nav nav ul li a{
  display: block;
  text-decoration: none;
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  border-radius: 9999px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #FFF;
  padding: 0.5em 1.5em;
  overflow: hidden;
  position: relative;
  transition: 0.2s;
  text-align: left;
}
#sub-nav nav ul li a::after{
    position: absolute;
    font-family: var(--icon-bootstrap);
    content:"\F285";
    color: #FFF;
    font-size:0.8rem; line-height:1;
    font-weight: var(--bold);
    top: 50%; right: 18px;
    transform: translateY(-50%);
    z-index: 12;
}
#sub-nav nav ul li:last-child a{
  margin-top: 1em;
  border: 1px solid var(--key-color);
  background-color: var(--key-color);
}
.support h2{
  font-size: 1.4em;
  line-height: 1;
  color: #FFF;
  font-weight: var(--bold);
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
}
#management{
  margin-top: -220px;
  scroll-margin-top: 3em;
  padding: 0 calc((100% - 1200px) / 2 ) 6em;
}
#management section{
  margin-left: 260px;
  margin-bottom: 3em;
}
#management section h2{
  background-color: var(--main-color);
}
#management section h3{
  font-size: 1.2em;
  font-weight: var(--bold);
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}
#management section h3::before{
  font-family: var(--icon-bootstrap);
  content:"\F287";
  font-size: 0.5em;
  color: var(--main-color);
  margin-right: 0.5em;
}
#management section .flex{
  flex-direction: row-reverse;
}
figure.academy-image{
  width: 340px;
  margin-left: 2em;
}
#management section .button{
  width: 200px;
}
#officer{
  scroll-margin-top: 3em;
  background: linear-gradient(to bottom, #004b29, #002e16);
}
#officer-inner{
  padding: 6em calc((100% - 1200px) / 2 );
}
#officer section{
  margin-left: 260px;
  margin-bottom: 3em;
}
#officer section h2{
  background-color: #002F1B;
}
#officer section h3{
  font-size: 1.2em;
  font-weight: var(--bold);
  color: #FFF;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}
#officer section h3::before{
  font-family: var(--icon-bootstrap);
  content:"\F63B";
  color: #FFF;
  margin-right: 0.5em;
}
.officer-box{
  background-color: rgba(255,255,255,0.9);
  padding: 2em;
}
figure.forum-image{
  width: 200px;
  margin-left: 30px;
}
figure.forum-image img{
  border: 1px solid #CCC;
}
figure.forum-image figcaption{
  font-size: 0.8em;
}
.officer-box .button a{
  width: 240px;
}
.officer-box h4{
  margin: 2em 0 0.5em;
}
.officer-box ul.flow-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.officer-box ul.flow-list li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
  padding: 0.5em;
  border-radius: 5px;
  width: calc((100% - 6em) / 7);
  box-sizing: border-box;
  text-align: center;
  font-size: 0.8em;
}
.officer-box ul.flow-list li:not(:last-child)::after{
  position: absolute;
  font-family: var(--icon-bootstrap);
  content:"\F285";
  color: #333;
  font-size:0.8rem; line-height:1;
  font-weight: var(--bold);
  top: 50%; right: -0.8rem;
  transform: translateY(-50%);
}
#worker-button{
  position: absolute;
  display: block;
  top:50vh; right: 1.5%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background-color: #FFF;
  border: 2px solid var(--point-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
  cursor: pointer;
}
#worker-button a{
  display: block;
  font-size: 1em;
  color: var(--font-color);
  text-decoration: none;
  pointer-events: none;
}
#worker-button a span{
  font-size: 0.6em;
}
#worker-button a strong{
  font-size: 1.1em;
}
#worker-button::after{
  position: absolute;
  font-family: var(--icon-bootstrap);
  content:"\F285";
  color: var(--font-color);
  font-size:1rem; line-height:1;
  font-weight: var(--bold);
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#worker-button:hover{
  background-color:var(--point-color);
  transition: 0.2s;
}
#worker-button:hover a{
  color: #FFF;
  transition: 0.2s;
}
#worker-button:hover::after{
  color: #FFF;
  transition: 0.2s;
}

/* モーダルオーバーレイ */
#worker-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  cursor: pointer;
}
#worker-modal-overlay.active { display: block; }

/* worker-box をモーダルとして表示 */
#worker-box {
  display: none !important;
  position: fixed !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 1200px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  background: #fff !important;
  padding: 3em !important;
  z-index: 9999 !important;
  border: 3px solid var(--point-color);
  text-align: center;
  padding: 3em;
  box-sizing: border-box;
}
#worker-box.active { display: block !important; }

/* 閉じるボタン */
#worker-box-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #555;
  background: none;
  border: none;
  line-height: 1;
  padding: 0;
  z-index: 10000;
}
#worker-box-close:hover { color: #000; }
#worker-box h2{
  font-size: 1.4em;
  font-weight: var(--bold);
  margin-bottom: 0.5em;
}
ul.worker-list{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1.5em;
}
ul.worker-list li{
  position: relative;
  width: calc((100% - 4em)/2);
  padding-bottom: 6em;
  text-align: left;
}
ul.worker-list li::before{
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  border-style: solid;
  border-width: 0 0 120px 220px;
  border-color: transparent transparent var(--main-color) transparent;
  opacity: 0.1;
}
ul.worker-list li:last-child:before{
  border-color: transparent transparent var(--key-color) transparent;
}
ul.worker-list li h3{
  color: #FFF;
  font-size: 1.1em;
  font-weight: var(--normal);
  line-height: 2.4;
  background-color: var(--main-color);
  margin-bottom: 0.5em;
  padding-left: 1em;
}
ul.worker-list li:last-child h3{
  background-color: var(--key-color);
}
ul.worker-list li h4{
  font-size: 1.2em;
  color: var(--main-color);
  margin-bottom: 0.5em;
}
ul.worker-list li:last-child h4{
  color: var(--key-color);
}
ul.worker-list li p{
  margin-bottom: 1em;
}
ul.worker-list li::after{
  position: absolute;
  content: "";
  bottom:0; right: 0;
  width: calc(385px * 0.4); height: calc(440px* 0.4);
  background-image: url(../../img/well/image05.png);
  background-repeat: no-repeat;
  background-size: contain;
}
ul.worker-list li:last-child::after{
  background-image: url(../../img/well/image06_2.png);
}

/* ============================================================
   診断ツール（well-tool）用スタイル
   ※ LP（well.css）のデザイントーンに合わせたスタイルです。
   ※ well.css の既存の診断ツール用CSSと差し替えてください。
   ※ :root の変数は well.css 冒頭で定義済みのものを使用します。
   ============================================================ */

/* ---- ヒーロー（タイトル）エリア：LPのbillboardトーン ---- */
#tool-hero{
  width: 100%;
  background:
    url("../../img/well/subject_back01.png") no-repeat left bottom,
    url("../../img/well/subject_back02.png") no-repeat right top,
    #f5ffff;
  background-size: 16%, 16%;
  text-align: center;
  padding: 90px 3% 40px;
  box-sizing: border-box;
}
#tool-hero h1{
//  font-family: var(--serif-font);
  color: var(--key-color);
  font-size: clamp(24px, 2.0vw, 36px);
  line-height: 1.6;
}
#tool-hero h1 span{
  display: block;
  font-size: 0.6em;
  font-weight: var(--normal);
  font-family: inherit;
}

/* ---- 全体レイアウト ---- */
.tool-wrap{
  width: 100%;
  max-width: 860px;
  margin: 2em auto 6em;
  text-align: left;
}

/* ---- プログレスバー ---- */
.prog-area{
  scroll-margin-top: 20vh;
//  background-color: #f6f6f6;
//  padding: 0.8em 1.5em 0.7em;
//  box-sizing: border-box;
}
.prog-meta{
  display: flex;
  justify-content: space-between;
//  font-size: 1.2em;
  color: var(--font-color);
  margin-bottom: 0.4em;
}
.prog-meta span#prog-label{
}
.prog-bar{
  height: 6px;
  background-color: #DDD;
  border-radius: 9999px;
  overflow: hidden;
}
.prog-fill{
  height: 100%;
  background-color: var(--main-color);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* ---- 画面切替 ---- */
.tool-body{
  padding: 1em 0 0;
}
.screen{ display: none; }
.screen.active{ display: block; }

/* ---- はじめに ---- */
.intro-box{
  margin-bottom: 2em;
}
.intro-box p{
  margin-bottom: 1rem;
}

/* ---- セクション枠（LPのsubject-list白箱トーン） ---- */
.tool-section{
  background-color: #FFF;
  border: 1px solid #E5E5E5;
  padding: 2em;
  box-sizing: border-box;
  margin-bottom: 2em;
}
.tool-section h2{
  color: var(--key-color);
  font-weight: var(--bold);
  font-size: 1.2em;
  margin-bottom: 1.5rem;
}
.tool-section h2::before{
  content: "－";
  margin-right: 0.5em;
}
.tool-section h3{
  font-size: 1.1em;
  font-weight: var(--bold);
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}
.tool-section h3::before{
  font-family: var(--icon-bootstrap);
  content: "\F287";
  font-size: 0.5em;
  color: var(--main-color);
  margin-right: 0.5em;
}

/* ---- フォーム ---- */
.form-row-inline{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  align-items: center;
}
.form-row{
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0;
}
.form-row label{
  font-size: 0.85em;
  font-weight: var(--bold);
  white-space: nowrap;
}
.form-row input,
.form-row select{
  padding: 0.6em 1em;
  border: 1px solid #CCC;
  border-radius: 5px;
  font-size: 1em;
  font-family: inherit;
  background-color: #FFF;
  box-sizing: border-box;
}
.form-row input{
  width: 120px;
}
.form-row select{
  width: auto;
}
.form-row input:focus,
.form-row select:focus{
  outline: none;
  border-color: var(--main-color);
}

/* ---- ボタン（LPの.buttonスタイルを診断用に拡張） ---- */
.tool-nav{
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 2em;
}
.button.tool-button a,
.button.tool-button-outline a,
.button.tool-button-print a{
  min-width: 200px;
  box-sizing: border-box;
}
.button.tool-button{
  margin-left: auto;
}
.button.tool-button a{
  color: #FFF;
  font-weight: var(--bold);
  background-color: var(--main-color);
  border: 2px solid var(--main-color);
  line-height: 2.4;
}
.button.tool-button a::after{
  color: #FFF;
}
.button.tool-button a:hover{
  background-color: #FFF;
  color: var(--main-color);
}
.button.tool-button a:hover::after{
  color: var(--main-color);
}
.button.tool-button-print a{
  color: #FFF;
  font-weight: var(--bold);
  background-color: var(--key-color);
  border: 2px solid var(--key-color);
}
.button.tool-button-print a::after{
  color: #FFF;
}
.button.tool-button-print a:hover{
  background-color: #FFF;
  color: var(--key-color);
}
.button.tool-button-print a:hover::after{
  color: var(--key-color);
}
.button.tool-button-outline a::after{
  content: "\F284"; /* 左向き矢印 */
  right: auto;
  left: 18px;
}
.button.tool-button-outline a{
  padding-left: 2.5em;
}
/* 無効状態 */
.button a.disabled{
  pointer-events: none;
  opacity: 0.4;
}

/* ---- 設問画面 ---- */
.q-card{
  background-color: #FFF;
  border: 1px solid #E5E5E5;
  padding: 2em;
  box-sizing: border-box;
}
.q-no{
  font-size: 0.85em;
  color: var(--point-color);
  font-weight: var(--bold);
  margin-bottom: 0.3em;
}
.q-note{
  font-size: 0.8em;
  color: #888;
  background-color: #f6f6f6;
  padding: 0.4em 1em;
  margin-bottom: 0.8em;
  display: inline-block;
}
.q-text{
  font-size: 1.05em;
  font-weight: var(--bold);
  line-height: 1.8;
  margin-bottom: 1.5em;
}
.choices{
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.choice-btn{
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 1.2em;
  border: 2px solid #CCC;
  border-radius: 9999px;
  background-color: #FFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95em;
  text-align: left;
  color: var(--font-color);
  transition: 0.2s;
}
.choice-btn:hover{
  border-color: var(--main-color);
  background-color: #f5ffff;
  transition: 0.2s;
}
.choice-btn.sel{
  border: 2px solid var(--main-color);
  background-color: #f5ffff;
  font-weight: var(--bold);
  color: var(--key-color);
}
.choice-btn .dot{
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #CCC;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  box-sizing: border-box;
}
.choice-btn.sel .dot{
  border-color: var(--main-color);
  background-color: var(--main-color);
}
.choice-btn.sel .dot::after{
  content: '';
  width: 5px; height: 5px;
  background-color: #FFF;
  border-radius: 50%;
}

/* ---- 結果画面 ---- */
.result-types{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}
.type-tag{
  display: inline-block;
  color: #FFF;
  font-weight: var(--bold);
  font-size: 1em;
  background-color: var(--main-color);
  border-radius: 9999px;
  padding: 0.4em 1.5em;
}
.type-tag.sub{
  background-color: var(--key-color);
}
.radar-box svg{
  display: block;
//  max-width: 480px;
  margin: 0 auto;
}
.comment-box{
  background-color: #FFF;
  border: 1px solid #E5E5E5;
  padding: 2em;
  box-sizing: border-box;
  margin-bottom: 2em;
}
.comment-box h3{
  color: var(--key-color);
  font-weight: var(--bold);
  font-size: 1.1em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--main-color);
}
.comment-section{
  margin-bottom: 1.2em;
}
.comment-section h4{
  font-size: 0.95em;
  font-weight: var(--bold);
  color: var(--point-color);
  margin-bottom: 0.4em;
}
.comment-section p,
.comment-section li{
  font-size: 0.95em;
  line-height: 1.9;
}
.comment-section ul{
  padding-left: 1.4em;
}
.comment-section ul li{
  list-style: disc;
}
.policy-box .policy-item{
  font-size: 0.95em;
  padding: 0.5em 0;
  border-bottom: 1px dashed #DDD;
  display: flex;
  align-items: flex-start;
}
.policy-box .policy-item:last-child{
  border-bottom: none;
}
.policy-box .policy-item::before{
  font-family: var(--icon-bootstrap);
  content: "\F285";
  font-size: 0.6em;
  margin-right: 0.6em;
  margin-top: 0.5em;
  flex-shrink: 0;
}

/* ---- 印刷対応 ---- */
@media print{
  header, .tool-nav, .button, .debug-box, footer{ display: none !important; }
  #tool-hero{ padding: 20px 3%; background: none; }
  .tool-wrap{ margin-bottom: 0; max-width: 90% !important; }
}

/* ---- デバッグパネル（テスト用・本番前に削除） ---- 
.debug-box{background:#fff8e1;border:1.5px dashed #f0a500;border-radius:10px;padding:16px 20px;margin-bottom:2em;}
.debug-box h3{font-size:12px;font-weight:700;color:#b37800;margin-bottom:10px;}
.debug-scores{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.debug-score-item{background:#fff;border:1px solid #f0d080;border-radius:6px;padding:6px 12px;text-align:center;}
.debug-score-item .d-label{font-size:10px;color:#888;margin-bottom:2px;}
.debug-score-item .d-val{font-size:16px;font-weight:700;color:var(--key-color);}
.debug-conditions{font-size:11px;line-height:2;}
.debug-conditions .hit{color:#1a7a4a;font-weight:700;}
.debug-conditions .miss{color:#aaa;} */