@charset "UTF-8";

.mock-b-1-lp-full{
  --brand:        #58AA35;
  --brand-dark:   #4A9130;

  --c-showcase:   #5470C6;
  --c-ac:         #91CC75;
  --c-kitchen:    #FAC858;
  --c-light:      #EE6666;

  --bg:           #F5F5F5;
  --surface:      #FFFFFF;
  --line:         #E9E9E9;
  --line-soft:    #F0F0F0;

  --text:         #333333;
  --text-sub:     #8A8A8A;
  --text-faint:   #B4B4B4;

  --radius:       8px;
}

.mock-b-1-lp-full *{ box-sizing: border-box; }

.mock-b-1-lp-full{
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.mock-b-1-lp-full h1,
.mock-b-1-lp-full h2,
.mock-b-1-lp-full p{ margin: 0; }
.mock-b-1-lp-full button{ font: inherit; color: inherit; }

.mock-b-1-lp-full .app{
  display: flex;
  height: 100%;
  min-width: 1032px;
  max-width: 1032px;
  margin: 0 auto;
}

.mock-b-1-lp-full .ico{
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mock-b-1-lp-full .ico-r{ transform: rotate(180deg); }

.mock-b-1-lp-full .icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #6B6B6C;
  cursor: pointer;
}
.mock-b-1-lp-full .icon-btn:hover{ background: #F2F2F2; }
.mock-b-1-lp-full .icon-btn--sm{ width: 24px; height: 24px; color: #A8A8A8; }
.mock-b-1-lp-full .icon-btn--sm .ico{ width: 14px; height: 14px; }

.mock-b-1-lp-full .divider-v{
  width: 1px;
  height: 16px;
  background: var(--line);
  flex: none;
}

.mock-b-1-lp-full .main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}

.mock-b-1-lp-full .topbar{
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
}
.mock-b-1-lp-full .topbar-title h1{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.mock-b-1-lp-full .topbar-title p{
  font-size: 10px;
  color: var(--text-sub);
  margin-top: 1px;
}
.mock-b-1-lp-full .topbar-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}
.mock-b-1-lp-full .avatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #EDEDED;
  background: #FBFBFB;
  color: var(--c-showcase);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mock-b-1-lp-full .tabbar{
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.mock-b-1-lp-full .period-tabs{
  display: flex;
  align-items: center;
  gap: 10px;
}
.mock-b-1-lp-full .period-tabs button{
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: #4A4A4A;
  cursor: pointer;
}
.mock-b-1-lp-full .period-tabs button:hover{ background: #F2F2F2; }
.mock-b-1-lp-full .period-tabs button.is-active{
  background: var(--brand);
  color: #FFF;
}
.mock-b-1-lp-full .range-group{
  display: flex;
  align-items: center;
  gap: 6px;
}
.mock-b-1-lp-full .step-btn{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #7A7A7A;
  cursor: pointer;
  padding: 0;
}
.mock-b-1-lp-full .step-btn .ico{ width: 13px; height: 13px; transform: rotate(180deg); }
.mock-b-1-lp-full .step-btn .ico-r{ transform: rotate(0deg); }
.mock-b-1-lp-full .range-input{
  display: flex;
  align-items: center;
  gap: 22px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #E4E4E4;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3C3C3C;
  white-space: nowrap;
}
.mock-b-1-lp-full .range-input .ico{ width: 14px; height: 14px; color: #A0A0A0; }

.mock-b-1-lp-full .content{
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  padding: 0 16px 18px;
}

.mock-b-1-lp-full .tzbar{
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mock-b-1-lp-full .tz{
  font-size: 10px;
  color: var(--text-sub);
}
.mock-b-1-lp-full .tz-actions{ display: flex; gap: 2px; }

.mock-b-1-lp-full .kpi-row{
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.mock-b-1-lp-full .kpi{
  width: 224px;
  height: 86px;
  flex: none;
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #FFF;
  background: linear-gradient(168deg, #4B8032 0%, #55A035 58%, #63B93C 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mock-b-1-lp-full .kpi-value{
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.mock-b-1-lp-full .kpi-unit{
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  opacity: .92;
}
.mock-b-1-lp-full .kpi-label{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
}
.mock-b-1-lp-full .kpi-ico{
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.mock-b-1-lp-full .kpi-ico .ico{
  width: 11px;
  height: 11px;
  fill: var(--brand-dark);
  stroke-width: 1;
}

.mock-b-1-lp-full .card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.mock-b-1-lp-full .card-head h2{
  font-size: 13px;
  font-weight: 700;
}
.mock-b-1-lp-full .card-head p{
  font-size: 10.5px;
  color: var(--text-sub);
  margin-top: 2px;
}

.mock-b-1-lp-full .series-name{
  margin: 10px 0 0;
  font-size: 10.5px;
  color: var(--text-sub);
}
.mock-b-1-lp-full .card-head--row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mock-b-1-lp-full .seg-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-b-1-lp-full .seg{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  background: #FFF;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
}
.mock-b-1-lp-full .seg .ico{ width: 13px; height: 13px; }
.mock-b-1-lp-full .seg--fill.is-on{
  border-color: var(--brand);
  background: var(--brand);
  color: #FFF;
}
.mock-b-1-lp-full .seg--ghost{
  border-color: transparent;
  background: none;
  color: #5C5C5C;
}

.mock-b-1-lp-full .legend{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 10px 0 2px;
}
.mock-b-1-lp-full .legend--bottom{ margin: 4px 0 0; }
.mock-b-1-lp-full .lg{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #5C5C5C;
  white-space: nowrap;
}
.mock-b-1-lp-full .lg-bar{
  width: 18px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.mock-b-1-lp-full .lg-line{
  width: 20px;
  height: 10px;
  flex: none;
  position: relative;
}
.mock-b-1-lp-full .lg-line::before{
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(to right,
    #8FC3FF 0 6px, transparent 6px 10px);
}

.mock-b-1-lp-full .chart{
  display: block;
  width: 100%;
  margin-top: 6px;
}
.mock-b-1-lp-full .chart .grid line{
  stroke: #EFEFEF;
  stroke-width: 1;
}
.mock-b-1-lp-full .chart .grid .axis{ stroke: #DCDCDC; }

.mock-b-1-lp-full .chart .ln{
  fill: none;
  stroke: #8FC3FF;
  stroke-width: 2.4;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.mock-b-1-lp-full .chart .ax-y.ax-y--right{ text-anchor: start; }

.mock-b-1-lp-full .chart text{
  font-family: inherit;
  fill: #8A8A8A;
  font-size: 12px;
}
.mock-b-1-lp-full .chart .ax-y{ text-anchor: end; }
.mock-b-1-lp-full .chart .ax-x{ text-anchor: middle; }
.chart .ax-unit,
.mock-b-1-lp-full .chart .ax-unit-x{
  fill: #9A9A9A;
  font-size: 11.8px;
  text-anchor: middle;
}

.mock-b-1-lp-full .dist-body{
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 14px;
}
.mock-b-1-lp-full .donut-wrap{
  flex: none;
  display: flex;
  justify-content: center;
}

.mock-b-1-lp-full .donut{ display: block; }

.mock-b-1-lp-full .rank-list{
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mock-b-1-lp-full .rank-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mock-b-1-lp-full .rank-item:last-child{ border-bottom: 0; padding-bottom: 4px; }
.mock-b-1-lp-full .rank-item:first-child{ padding-top: 2px; }
.mock-b-1-lp-full .rank-name{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.mock-b-1-lp-full .chip{
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex: none;
}
.mock-b-1-lp-full .rank-value{
  font-size: 14px;
  color: var(--text-sub);
  white-space: nowrap;
  flex: none;
}

.mock-b-1-lp-full .content::-webkit-scrollbar{ width: 8px; }
.mock-b-1-lp-full .content::-webkit-scrollbar-thumb{
  background: #DCDCDC;
  border-radius: 4px;
}
.mock-b-1-lp-full .content::-webkit-scrollbar-track{ background: transparent; }