@charset "UTF-8";

/* base */

:root {
  /* Font Family */
  --font-family: 'Noto Sans JP', "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", sans-serif;

  /* Font Size */
  --font-type-jp-title: "Noto Sans JP";
  --font-type-jp-body: "Noto Sans JP";
  --font-title: 32px;
  --font-xxxlarge: 28px;
  --font-xxlarge: 24px;
  --font-xlarge: 20px;
  --font-large: 16px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-xsmall: 11px;
  --font-xxsmall: 10px;

  /* Font Size */
  --font-report: 18px;

  /* blank Size */
  --blank-space-large: 24px;
  --blank-space-medium: 16px;
  --blank-space-small: 8px;
  --blank-space-xsmall: 4px;

  /* radius Size */
  --radius-large: 16px;
  --radius-medium: 12px;
  --radius-small: 8px;
  --radius-xsmall: 4px;

}

:root {
  /* SystemColor Primary */
  --color-primary-high: #095ABA;
  --color-primary: #1473E6;
  --color-primary-lower: #CBE1FB;
  --color-on-primary: #FFF;
  --color-error: #C9252D;

  /* SystemColor Text */
  --color-text-primary: #424242;
  --color-text-secondary: #7C8A9C;
  --color-text-secondary-modal: #434D5B;
  --color-text-white: #FFF;
  --color-text-gray: #758192;
  --color-text-key-point: #302FF6;

  /* SystemColor Background */
  --color-background-primary: #FFF;
  --color-background-secondary: #F8FAFC;
  --color-background-blue-light: #EBF3FD;
  --color-background-gray-light: #F0F3F6;
  --color-background-gray-middle: #E0E0E0;
  --color-background-gray: #BDBDBD;

  /* SystemColor table */
  --color-background-table-blue: #CFE5FF;
  --color-background-table-blue-purple: #D8E0F8;
  --color-background-table-red: #D35056;
  --color-background-table-red-thin: #E9A7AB;  
  --color-gray-boder-table: #98A4B4;  

  /* SystemColor table(四季) */
  --color-shiki-water: #80FFFF;
  --color-shiki-yellow-light: #FAFFAC;
  --color-shiki-yellow-primary: #FFFF80;
  --color-shiki-pink-light: #FFBFFF;
  --color-shiki-green: #80FF80;
  --color-shiki-orange: #FFC680;
  --color-shiki-red: #F00;

  /* SystemColor border */
  --color-gray-border: #CED6DE;

    /* SystemColor other */
  --color-gray-bar: #9EA5AD;
  --color-gray-lowest: #F5F5F5;
  --color-blue-hover: #0D5AB7;
  --color-status-success: #34A853;
  --color-red-thin: #F9E9EA;
  --scrollbar-hover: #7A8188;
  --snackbar-success: #EAF6ED;
  --color-gray-disable: #EEE;

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

body {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================
   Accessibility
   =========================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .field-input:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }

  .login-button:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

a {
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
  opacity: 0.7;
}

.hidden {
    display: none !important;
}

/* Layouts */

/* メインコンテナ */

.app-main-container {
  display: flex;
  padding: 24px;
  padding-top: 156px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: var(--color-background-secondary);
  min-height: calc(100vh - 24px);
  min-width: 1440px;
}

.app-main-area {
  display: flex;
  width: 1392px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  margin: 0 auto;
}

/* ===================================================================
   企業一覧
   =================================================================== */

/* テーブルコントロール */

.table-controls {
  display: flex;
  width: 100%;
  padding-left: 8px;
  align-items: center;
  gap: 16px;
}

.list-count-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.list-count-number {
  font-size: var(--font-xlarge);
}

.search-area {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

/* サポートカード */

.support-section {
  display: flex;
  width: 100%;
  max-width: 1392px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
}

.support-title {
  color: var(--color-text-primary);
  font-size: var(--font-xlarge);
  font-weight: 700;
}

.support-cards {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 40px;
}

.support-card {
  display: flex;
  width: 100%;
  height: 112px;
  max-width: 652px;
  padding: 0;
  gap: 18px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  width: 48%;
}

.support-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  opacity: 1.0;
}

.support-card-image {
  width: 225px;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
}

.support-card-content {
  display: flex;
  padding: 16px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.support-card-title {
  color: var(--color-primary);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  line-height: 100%;
}

.support-card-description {
  color: var(--color-text-primary);
  font-size: var(--font-small);
  font-weight: 400;
}

.search-link {
  display: flex;
  min-width: 80px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  transition: opacity 0.2s;
}

.help-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  border-radius: 999999px;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

/* Table Body */

.company-list-table tbody tr {
  height: 53px;
}

/* Table Data Cells */

.account-main-container {
  display: flex;
  width: 100%;
  max-width: 1392px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
}

/* ===================================================================
   マイページ
   =================================================================== */

.mypage-main-container {
  display: flex;
  width: 100%;
  max-width: 1392px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Card */

.mypage-card {
  display: flex;
  width: 100%;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
}

/* Card Header */

.mypage-card-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
}

.mypage-card-title {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* Card Content */

.mypage-card-content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* ===================================================================
   レポート：総合診断
   =================================================================== */

.comprehensive-area {
  width: 830px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comprehensive-score-section {
  display: flex;
  padding: 32px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 5px;
  background: var(--color-shiki-yellow-light);
}

/* Top Row: Badge and Score Cards */

.comprehensive-score-top-row {
  display: flex;
  width: 100%;
  max-width: 1000px;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.comprehensive-score-badge {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  position: relative;
}

.comprehensive-score-badge svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 130px;
}

.comprehensive-score-badge-text {
  position: absolute;
  left: 10px;
  top: 47px;
  width: 112px;
  height: 36px;
  color:var(--color-background-primary);
  text-align: center;
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  line-height: 100%;
}

.comprehensive-score-cards-wrapper {
  display: flex;
  width: 540px;
  align-items: center;
  gap: 126px;
  flex-shrink: 0;
}

.comprehensive-score-card {
  display: flex;
  width: 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-gray-boder-table);
  overflow: hidden;
}

.comprehensive-score-header {
  display: flex;
  height: 50px;
  min-width: 80px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-boder-table);
  color:var(--color-background-primary);
  text-align: center;
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  line-height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comprehensive-score-header.before{
  background: #1473E6;
}

.comprehensive-score-header.after{
  background: #F00;
}

.comprehensive-score-body {
  display: flex;
  height: 80px;
  align-items: flex-start;
  align-self: stretch;
}

.comprehensive-score-value {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
  align-self: stretch;
  justify-content: center;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
}

.comprehensive-score-value.after {
  color: #1473E6;
}

/* Bottom Row: Rank Label and Display */

.comprehensive-rank-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.comprehensive-rank-label {
  display: flex;
  width: 130px;
  height: 245px;
  padding: 4px 0;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  color: #113786;
  font-size: 20px;
  font-weight: 700;
}

.comprehensive-rank-display-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comprehensive-rank-item {
  display: flex;
  width: 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.comprehensive-rank-image-wrapper {
  display: flex;
  width: 204px;
  height: 204px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var( --color-background-primary);
}

.comprehensive-rank-image-wrapper.after {
  border: 4px solid #1473E6;
}

.comprehensive-rank-image {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.comprehensive-rank-name {
  width: 180px;
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-xxlarge);
  font-weight: 400;
  line-height: 100%;
}

.comprehensive-rank-name.after {
  color: #B42128;
  font-weight: 700;
}

.comprehensive-trend-section {
  display: flex;
  width: 107px;
  height: 179px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.comprehensive-trend-label {
  align-self: stretch;
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

.comprehensive-trend-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  background: var( --color-background-primary);
}

.kpf-point-item
.comprehensive-trend-image {
  width: 77px;
  height: 74.821px;
  aspect-ratio: 77.00/74.82;
  border-radius: 3px;
}

/* Table Header */

.comprehensive-table-header {
  display: flex;
    width: 100%;
    padding: 16px;
    justify-content: center;
    align-items: center;
    background: var(--color-primary-high);
    font-size: var(--font-xxlarge);
    font-weight: 700;
    color:var(--color-background-primary);
}

/* Legend Section */

.comprehensive-legend-section {
  display: flex;
  width: 1000px;
  height: 68px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
}

.comprehensive-legend-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

.comprehensive-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.comprehensive-legend-badge {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-xsmall);
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  width: 88px;
}

.comprehensive-legend-badge.action{
  background: var(--color-shiki-pink-light);
}

.comprehensive-legend-badge.gard{
  background: var(--color-shiki-yellow-primary);
}

.comprehensive-legend-text {
  width: 299px;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 400;
  line-height: 100%;
}

.comprehensive-legend-center {
  width: 146px;
  height: 68px;
  flex-shrink: 0;
  position: relative;
}

.comprehensive-total-badge {
  display: flex;
  width: 146px;
  height: 68px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color:var(--color-background-primary);
  text-align: center;
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
}

.comprehensive-legend-right {
  width: 406px;
  flex-shrink: 0;
}

.comprehensive-score-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
  border: 1px solid var(--color-gray-boder-table);
  overflow: hidden;
}

.comprehensive-score-table-header {
  display: flex;
  height: 30px;
  align-items: flex-start;
  align-self: stretch;
}

.comprehensive-score-table-cell {
  display: flex;
  height: 30px;
  min-width: 80px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  color:var(--color-background-primary);
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-primary);
}

.comprehensive-score-table-cell after {
  background: #F00;
}

.comprehensive-score-table-cell:last-child {
  border-left: 1px solid var(--color-gray-boder-table);
}

.comprehensive-score-table-header .comprehensive-score-table-cell:last-child {
  background: var(--color-shiki-red);
}

.comprehensive-score-table-body {
  display: flex;
  height: 38px;
  align-items: flex-start;
  align-self: stretch;
}

.comprehensive-score-table-body .comprehensive-score-table-cell {
  display: flex;
  height: 38px;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  line-height: 100%;
}

.diagnostic-head-message {
  width: 100%;
  align-items: flex-start;
}

.diagnostic-message-text {
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 130%;
}

/* ===================================================================
   レポート：攻める力」「守る力」の重要なポイント
   =================================================================== */

.keypoints-grid-container {
  width: 930px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Headers */

.keypoints-grid-headers {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  justify-content: center;
}

.keypoints-header-column {
  width: 445px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.keypoints-header-label {
  padding: 12px 16px;
  width: 150px;
  border-radius: var(--radius-large);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
}

.keypoints-header-offensive .keypoints-header-label {
  background: var(--color-shiki-pink-light);
}

.keypoints-header-defensive .keypoints-header-label {
  background: var(--color-shiki-yellow-primary);
}

/* Grid Rows */

.keypoints-grid-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

/* Individual Items */

.keypoints-item {
  width: 445px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.keypoints-item-number {
  width: 45px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-report);
  font-weight: 700;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.keypoints-item-number.bottom {
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.keypoints-item-offensive .keypoints-item-number {
  background: var(--color-shiki-pink-light);
}

.keypoints-item-defensive .keypoints-item-number {
  background: var(--color-shiki-yellow-primary);
}

.keypoints-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.keypoints-item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 40px;
  background: var(--color-shiki-yellow-light);
  border-left: 1px solid var(--color-gray-boder-table);  
  border-bottom: 1px solid var(--color-gray-boder-table);  
}

.keypoints-item-header.end {
    border-right: 1px solid var(--color-gray-boder-table);  
}

.keypoints-item-category {
  padding: 4px 8px;
  border-radius: var(--radius-xsmall);
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 120%;
}

.keypoints-item-name {
  color: var(--color-text-key-point);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
}

.keypoints-item-details {
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 94px;
  border-left: 1px solid var(--color-gray-boder-table);    
}

.keypoints-item-details.end {
    border-right: 1px solid var(--color-gray-boder-table);
}

.keypoints-item-details.bottom {
    border-bottom: 1px solid var(--color-gray-boder-table);
}

.keypoints-item-label {
  width: 95px;
  padding: 4px 8px;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 400;
  text-align: left;
}

.keypoints-item-value {
  width: 84px;
  padding: 4px 8px;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  text-align: right;
}

.keypoints-item-unit {
  font-size: var(--font-medium);
  font-weight: 700;
}

.keypoints-item-score {
  width: 119px;
  padding: 4px 8px;
  color: var(--color-text-primary);
  font-size: var(--font-title);
  font-weight: 700;
  text-align: right;
  line-height: 100%;
}

.keypoints-item-score-unit {
  font-size: var(--font-large);
  font-weight: 700;
}

/* Divider Section */

.keypoints-divider-section {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 4px auto;
  width: 890px;
  height: 40px;
}

.keypoints-divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-text-primary);
}

.keypoints-divider-text {
  color: var(--color-text-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* Status Boxes */

.keypoints-status-boxes {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0 auto;
  width: 890px;
}

.keypoints-status-box {
  padding: 32px 16px 16px;
  border-radius: 20px;
  border: 3px solid var(--color-gray-boder-table);
  position: relative;
}

.keypoints-status-header {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  position: absolute;
  top: -33px;
  left: 40px;
  padding: 0 16px;
  background: var( --color-background-primary);
  height: 65px;
}

.keypoints-status-badge {
  width: 160px;
  padding: 8px 16px;
  border-radius: var(--radius-large);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  white-space: nowrap;
}

.keypoints-badge-offensive {
  background: var(--color-shiki-pink-light);
}

.keypoints-badge-defensive {
  background: var(--color-shiki-yellow-primary);

}

.keypoints-badge-defensive-small {
  background: var(--color-shiki-yellow-primary);
  font-size: var(--font-report);
}

.keypoints-status-subtitle {
  color: var(--color-text-primary);
  font-size: var(--font-xxlarge);
  font-weight: 400;
}

.keypoints-status-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.keypoints-status-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 16px;
}

.keypoints-status-item-title {
  width: 232px;
  color: var(--color-text-key-point);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  flex-shrink: 0;
}

.keypoints-status-item-subtitle {
  width: 232px;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -16px;
}

.keypoints-status-item-text {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-xlarge);
  font-weight: 400;
  line-height: 100%;
}

.keypoints-status-divider {
  height: 1px;
  background: var(--color-gray-boder-table);
}

/* Page 2 Styles */

.keypoints-page2-container {
  width: 100%;
  max-width: 1000px;
  /* margin: 24px auto 0; */
}

.keypoints-page2-title {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  background: var(--color-primary-high);
  margin-bottom: 24px;
}

.keypoints-page2-title span {
  color:var(--color-background-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
}

.keypoints-page2-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 48px;
}

.keypoints-page2-left {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  padding-top: 56px;
}

.keypoints-page2-center {
  flex: 0 0 auto;
  width: 630px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.keypoints-page2-right {
  width: 300px;
  display: flex;
  gap: 24px;
  flex-shrink: 0;
  flex-basis: 100%;
  margin-left: 330px;
}

.keypoints-tooltip {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.20);
  position: relative;
}

.keypoints-tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.keypoints-tooltip-badge {
  padding: 4px 8px;
  border-radius: var(--radius-xsmall);
  font-size: var(--font-report);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
}

.keypoints-tooltip-text {
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 150%;  
}

.keypoints-tooltip-content {
  margin: 16px 0;
}

.keypoints-tooltip-items {
  color: var(--color-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
}

.keypoints-tooltip-value {
  font-size: var(--font-xxxlarge);
}

.keypoints-tooltip-divider {
  width: 100%;
  height: 1px;
  background: var(--color-text-primary);
  margin: 16px 0;
}

.keypoints-tooltip-total {
  text-align: right;
}

.keypoints-tooltip-total-value {
  color: var(--color-primary);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
}

/* Score Card */

.keypoints-scorecard {
  padding: 16px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.keypoints-scorecard-badge {
  padding: 12px 16px;
  border-radius: var(--radius-large);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  width: 100%;
}

.keypoints-scorecard-values {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.keypoints-scorecard-item {
  width: 105px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-boder-table);
}

.keypoints-scorecard-header {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
}

.keypoints-scorecard-header-current {
  background: var(--color-shiki-red);
}

.keypoints-scorecard-score {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var( --color-background-primary);
  color: var(--color-primary);
  font-size: 40px;
  font-weight: 700;
  border: 8px solid var(--color-primary);
}

.keypoints-scorecard-score-current {
  color: var(--color-shiki-red);
  border-color: var(--color-shiki-red);
}

.keypoints-scorecard-arrow {
  display: flex;
  padding: 8px 0;
  align-items: center;
}

/* Graph Placeholder */

.keypoints-graph-placeholder {
  width: 630px;
  height: 630px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var( --color-background-primary);
  position: relative;
}

.keypoints-tooltip:first-child::after {
  content: "";
  position: absolute;
  left: 140px;
  bottom: -8px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.25);
}

.keypoints-tooltip:last-child::after {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 116px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(135deg);
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.25);
}

/* ===================================================================
   レポート：債務超過解消年数
   =================================================================== */

.drp-explanation-container {
  display: flex;
  width: 100%;
  max-width: 807px;
  padding: 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Explanation Image */

.drp-explanation-image {
  width: 100%;
  height: auto;
  align-self: stretch;
  border-radius: var(--radius-small);
}

/* ===================================================================
   レポート：融資依頼書の作成検討
   =================================================================== */

.fr-section-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-bottom: 24px;
}

/* Section Header */

.fr-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
}

.fr-section-title {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
  background: var(--color-primary-high);
  color:var(--color-background-primary);
  
  font-size: var(--font-xxlarge);
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* Subsection */

.fr-subsection {
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.fr-subsection-title {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  flex: 1 0 0;
  color: var(--color-text-primary);
  
  font-size: var(--font-xxlarge);
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

.fr-subsection-body {
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

/* ===================================================================
   レポート：業績の定期チェック
   =================================================================== */

.pc-diagram-container {
  display: flex;
  width: 599px;
  padding: 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 auto;
}

.pc-diagram-image {
  width: 599px;
  height: 300px;
  aspect-ratio: 599/300;
  object-fit: contain;
}

/* ===================================================================
   レポート：表紙
   =================================================================== */

.cover-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1200px;
}

/* Recipient Section (Top) */

.cover-recipient-section {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
}

.cover-recipient-text {
  color: var(--color-text-primary);
  font-size: 36px;
  font-weight: 400;
  line-height: 100%;
}

/* Title Section (Center) */

.cover-title-section {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
}

.cover-main-title {
  color: var(--color-text-primary);
  text-align: center;  
  font-size: 64px;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

.manual-main-container {
  padding: 0;
  gap: 16px;
  border: none;
  background: transparent;
}

/* ===================================================================
   操作マニュアル一覧、学習コンテンツ一覧
   =================================================================== */

/* Manual Section */

.manual-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
}

.manual-section-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
}

.manual-section-title {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 130%;
  margin: 0;
}

.manual-section-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
}

/* Manual List Item */

.manual-list-item {
  display: flex;
  padding: 24px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: var( --color-background-primary);
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
}

.manual-list-item:hover {
  background: var(--color-gray-lowest);
  text-decoration: none;
  opacity: 1;
}

.manual-list-item-date {
  font-weight: 700;
  line-height: 130%;
  color: var(--color-text-gray);
}

.manual-list-icon {
  display: flex;
  width: 12px;
  height: 12px;
  align-items: center;
  flex-shrink: 0;
}

.manual-list-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.manual-list-title {
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 400;
  line-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.manual-list-arrow {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* More Button */

.manual-more-button-wrapper {
  display: flex;
  height: 48px;
  padding: 8px 0;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.manual-more-button {
  display: flex;
  min-width: 80px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  
  transition: all 0.2s;
  padding: 8px 16px;
  outline: none;
}

.manual-more-button:hover {
  background: rgba(20, 115, 230, 0.05);
}

.manual-more-button span {
  color: var(--color-primary);
  text-align: center;
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

.manual-more-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.manual-more-area {
  padding: 0;
}

/* Info Message */

.manual-info-message {
  display: flex;
  padding-left: 24px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  margin-top: 16px;
}

.manual-info-message span {
  color: var(--color-black-primary);
  font-size: var(--font-small);
  font-weight: 400;
  line-height: 100%;
}

/* Video Cards */

.manual-video-cards {
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;
}

.manual-video-card {
  display: flex;
  width: 429px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  border-radius: 12px;
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.2s;
}

.manual-video-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  opacity: 1;
  text-decoration: none;
}

.manual-video-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.manual-video-title {
  align-self: stretch;
  color: var(--color-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 130%;
  margin: 0;
}

.manual-video-description {
  align-self: stretch;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
}

/* ===================================================================
   よくある質問
   =================================================================== */

.faq-page {
  margin: 0;
  padding: 0;
  
  background: var(--color-background-secondary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Content Header */

.faq-content-header {
  width: 100%;
  height: 53px;
  padding: 24px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-border);
  background: var(--color-background-secondary);
  flex-shrink: 0;
}

.faq-content-header-inner {
  display: flex;
  padding: 0 16px;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.faq-back-button {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 999999px;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
}

.faq-back-button:hover {
  background: rgba(20, 115, 230, 0.1);
}

.faq-page-title {
  color: var(--color-text-primary);
  
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* Main Container */

.faq-main-container {
  display: flex;
  padding: 16px 24px 24px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1;
  background: var(--color-background-secondary);
}

/* Search Bar */

.faq-search-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}

.faq-search-input-wrapper {
  display: flex;
  width: 588px;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  position: relative;
}

.faq-search-input {
  flex: 1;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

.faq-search-input-wrapper:has(.faq-search-input:focus) {
  border-color: var(--color-primary);
}

.faq-search-input::placeholder {
  color: var(--color-background-gray);
}

.faq-search-button {
  display: flex;
  min-width: 80px;
  min-height: 38px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  color: var(--color-primary);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.faq-search-button:hover {
  background: var(--color-background-blue-light);
}

/* FAQ Sections */

.faq-sections {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 1392px;
}

/* FAQ Section */

.faq-section {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
}

.faq-section-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
}

.faq-section-title {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 130%;
  margin: 0;
}

.faq-section-content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* FAQ Item */

.faq-item {
  display: flex;
  padding: 16px 0 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var(--color-background-secondary);
}

.faq-item-header {
  display: flex;
  padding: 0 24px 16px 24px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  width: 100%;
}

.faq-item-header:hover {
  opacity: 0.8;
}

.faq-item-question {
  flex: 1;
  color: var(--color-text-primary);
  
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  text-align: left;
}

.faq-q-label {
  color: var(--color-primary);
}

.faq-item-icon {
  flex-shrink: 0;
}

.faq-item-answer {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  padding: 0 24px;
}

.faq-item-expanded .faq-item-answer {
  display: flex;
}

.faq-item-answer p {
  align-self: stretch;
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

.faq-item-image {
  height: 194px;
  align-self: stretch;
  background: var(--color-background-gray-light);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-xsmall);
}

/* Contact Section */

.faq-contact-section {
  display: flex;
  height: 250px;
  padding: 32px;
  flex-direction: column;
  align-items: center;
  gap: 0;
  align-self: stretch;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.faq-contact-header {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.faq-contact-title {
  flex: 1;
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

.faq-contact-content {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  flex-direction: column;
}

.faq-contact-content p {
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

.faq-contact-link {
  display: flex;
  min-width: 80px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-primary);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  padding: 8px 16px;
  transition: opacity 0.2s;
}

.faq-contact-link:hover {
  opacity: 0.7;
}

/* ===================================================================
   システムエラー
   =================================================================== */

.system-error-padding {
  padding-top: 348px;
}

.system-error-text {
  padding: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 130%;
}

.system-error-button {
  font-size: var(--font-large);
  padding: 16px;
}

/* ===================================================================
   メンテナンス
   =================================================================== */

.maintenance-title {
  text-align: center;
  color: var(--color-primary);
  font-size: var(--font-xxxlarge);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.maintenance-sub-area {
  padding: 24px;
}

.maintenance-subtitle {
  text-align: center;
  color: var(--color-text-primary);
  font-size: var(--font-xlarge);
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.maintenance-text {
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; 
}

/* ===================================================================
   アカウント管理
   =================================================================== */

.account-table-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  padding-right: 32px;
  padding-left: 8px;
}

.account-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.account-count-label {
  color: var(--color-text-primary);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.account-count-number {
  color: var(--color-text-primary);
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
}

.account-search-area {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.account-info-text {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 150%; 
}

.account-info-number {
  color: var(--color-primary-high);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 150%;
}

.account-info-end {
  color: var(--color-text-primary);
  font-size: var(--font-xxsmall);
  font-weight: 700;
  line-height: 150%;
}

.account-edit-link {
  color: var(--color-primary);
  text-align: center;
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-block;
  text-decoration: underline;
}

.account-edit-link.primary {
  color: var(--color-error);
}

.account-text-disabled {
  color: var(--color-background-gray);
  text-align: center;  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

/* Edit Button */

.account-edit-button {
  display: flex;
  width: 67px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;  
  transition: all 0.2s;
  outline: none;
  margin: 0 auto;
}

.account-edit-button:hover {
  background: var(--color-background-blue-light);
}

.account-edit-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.account-edit-button span {
  color: var(--color-primary);
  text-align: center;
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

/* ===================================================================
   レポート：はじめに
   =================================================================== */

.introduction-title-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  position: relative;
}

/* Introduction Title */

.introduction-title {
  color: var(--color-text-primary);
  text-align: center;
  
  font-size: 43px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* Introduction Body Section */

.introduction-body-section {
  display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
    color: var(--color-text-primary);    
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* ===================================================================
   レポート：留意事項
   =================================================================== */

.notices-title-section {
  display: flex;
  width: 100%;
  max-width: 1000px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

/* Notices Title */

.notices-title {
  color: var(--color-text-primary);  
  font-size: var(--font-title);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}

/* Notices Body Section */

.notices-body-section {
  display: flex;
  width: 100%;
  max-width: 1000px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

/* Notices Body Text */

.notices-body-text {
  flex: 1 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-xxlarge);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

.notices-body-text p {
  margin: 0 0 36px 0;
  line-height: 150%;
  white-space: pre;
}

/* Notices Footer Text */

.notices-footer-text {
  margin-top: 16px !important;
}

/* Components */

/* ===================================================================
   ヘッダー
   =================================================================== */

/* アプリケーションヘッダー */

.app-header {
  display: flex;
  width: 100%;
  height: 76px;
  padding: 0 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-border);
  background: var(--color-background-blue-light);
  min-width: 1440px;
  position: fixed;
  z-index: 1000;
}

.app-header-content {
  display: flex;
  padding: 8px 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}

.app-header-logo {
  display: flex;
  padding: 5px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.app-header-logo-text {
  color: var(--color-primary);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
}

.app-header-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 0px 24px;
}

.app-header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-header-link {
  display: flex;
  min-width: 80px;
  justify-content: center;
  gap: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  transition: opacity 0.2s;
}

.app-header-divider {
  display: flex;
  align-items: center;
}

.app-header-divider-line {
  width: 1px;
  height: 24px;
  background: var(--color-primary);
}

.action-button {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 28px;
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  transition: all 0.2s;
  white-space: nowrap;
}

.action-button:hover {
  background: var(--color-background-blue-light);
}

.action-button.primary {
  background: var(--color-primary);
  color:var(--color-background-primary);
}

.action-button.primary:hover {
  background: var(--color-primary-high);
}

/* ===================================================================
   ページング
   =================================================================== */

/* ページネーション */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  width: 100%;
}

.pagination-button {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-xsmall);
  border: none;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-button:hover:not(:disabled) {
  background: var(--color-background-blue-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-number {
  display: flex;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-medium);
  border: 1px solid transparent;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-number:hover {
  background: var(--color-background-blue-light);
  color: var(--color-primary);
}

.pagination-number.active {
  background: var(--color-background-blue-light);
  border-color: var(--color-background-blue-light);
  font-weight: 700;
}

.pagination-ellipsis {
  display: flex;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--color-text-gray);
  font-size: var(--font-medium);
  cursor: default;
}

/* ===================================================================
   フッター
   =================================================================== */

/* フッター */

.app-footer {
  display: flex;
  width: 100%;
  height: 23px;
  padding: 4px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--color-gray-border);
  background: var(--color-background-gray-light);
}

.app-footer-text {
  color: var(--color-text-gray);
  font-size: var(--font-xxsmall);
  font-weight: 400;
  line-height: 100%;
}

/* ===================================================================
   ステータスラベル
   =================================================================== */

/* Status Labels */

.status-label {
  display: inline-flex;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-xsmall);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
  text-align: center;
  white-space: nowrap;
}

.status-uncreated {
  background: var(--color-gray-lowest);
  color: var(--color-text-secondary-modal);
}

.status-creating {
  background: var(--color-primary-high);
  color:var(--color-text-white);
}

.status-error-label {
  background: var(--color-error);
  color: var(--color-text-white);  
}

.status-error {
  background: transparent;
  color: var(--color-error);
  text-decoration: underline;
}

.status-error:hover {
  opacity: 0.8;
}

/* Additional Status Labels */

.status-completed {
  background: var(--color-status-success);
  color:var(--color-background-primary);
}

.status-drafting {
  background: var(--color-primary-lower);
  color:var(--color-primary-high);
}

/* ===================================================================
   コンテンツヘッダー
   =================================================================== */

/* コンテンツヘッダー */

.content-header {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 24px 56px;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--color-gray-border);
  background: var(--color-background-secondary);
  min-width: 1440px;
  position: fixed;
  top: 76px;
  z-index: 999;
}

.content-header-title {
  color: var(--color-text-primary);
  font-size: var(--font-xlarge);
  font-weight: 700;
}

/* コンテンツヘッダー拡張 */

.content-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.content-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 999999px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.back-button:hover {
  opacity: 0.7;
}

.back-button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.menu-toggle-button {
  display: flex;
  width: 40px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.menu-toggle-button:hover {
  background: var(--color-background-blue-light);
}

/* ===================================================================
   企業詳細、簡易診断
   =================================================================== */

/* タブセクション */

.tab-section {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 5px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
  min-width: 1392px;
  margin: 0 auto;
}

/* ミニマルタブ */

.minimal-tabs {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
}

.minimal-tab {
  display: flex;
  width: 276px;
  min-width: 252px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  transition: all 0.2s;
}

.minimal-tab:hover {
  opacity: 0.7;
}

.minimal-tab.active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* タブコンテンツエリア */

.tab-content-area {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

/* 企業概要ボックス */

.company-overview-box {
  display: flex;
  width: 328px;
  padding: 0;
  align-items: flex-start;
  gap: 4px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
}

/* 2カラムテーブル */

.two-column-table {
  display: flex;
  min-height: 630px;
  padding: 0 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 1;
}

.two-column-row {
  display: flex;
  padding: 4px 0;
  align-items: center;
  gap: 0;
  flex: 1;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
}

.two-column-row.header-row {
  height: 64px;
  flex: 0 0 auto;
  height: 72.5px;
}

.two-column-row.last-row {
  border-bottom: none;
}

.two-column-th {
  display: flex;
  width: 100px;
  min-height: 21px;
  padding: 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

.two-column-row.header-row .two-column-th {
  width: 102px;
  color: var(--color-text-primary);
  font-size: var(--font-large);
}

.two-column-td {
  display: flex;
  padding: 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  white-space: normal;
  width: 100%;
}

.row-header {
  display: flex;
  width: 73px;
  min-height: 21px;
  padding: 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.two-column-row.header-row .row-header {
  width: 102px;
}

.header-label {
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
}

.header-label-secondary {
  color: var(--color-text-secondary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

.row-data {
  display: flex;
  padding: 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.data-text {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

.data-link {
  color: var(--color-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.2s;
}

.data-link:hover {
  opacity: 0.7;
}

.link-text {
  color: var(--color-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.2s;
}

.link-text:hover {
  opacity: 0.7;
}

.financial-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
}

.financial-content {
  display: flex;
  padding: 16px 24px 24px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.financial-title {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
}

.recreate-button {
  display: flex;
  min-width: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  transition: all 0.2s;
}

.recreate-button:hover {
  background: var(--color-background-blue-light);
}

/* ボックスタブ */

.box-tabs {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--radius-small);
  background: var(--color-background-gray-light);
}

.box-tab {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1;
  align-self: stretch;
  border-radius: var(--radius-small);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  transition: all 0.2s;
}

.box-tab:hover {
  background: rgba(255, 255, 255, 0.5);
}

.box-tab.active {
  background: var( --color-background-primary);
}

/* エラーコンテンツ */

.error-content {
  display: flex;
  padding: 36px 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1;
  align-self: stretch;
  border-radius: var(--radius-small);
  background: var( --color-background-primary);
  min-height: 550px;
}

.error-icon-wrapper {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}

.error-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 940px;
  text-align: center;
}

.error-title {
  color: var(--color-error);
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
}

.error-description {
  color: var(--color-error);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

.cdu-info-bar {
  display: flex;
  width: 100%;
  padding: 0 24px;
  align-items: center;
  gap: 24px;
}

.cdu-info-bar-fields {
  display: flex;
  padding: 8px 16px;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
}

.cdu-info-field {
  display: flex;
  padding: 0 8px 0 16px;
  align-items: flex-start;
  gap: 4px;
  border-left: 1px solid var(--color-gray-border);
}

.cdu-info-field:first-child {
  border-left: none;
  padding-left: 0;
}

.cdu-info-field.flex-grow {
  flex: 1 0 0;
}

.cdu-info-field.fixed-width-70 {
  width: 70px;
  flex-shrink: 0;
}

.cdu-info-field.fixed-width-163 {
  width: 163px;
  flex-shrink: 0;
}

.cdu-info-label {
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
  min-height: 17px;
  padding-right: 8px;
}

.cdu-info-value {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  min-height: 28px;
  display: flex;
  align-items: flex-end;
}

.confirm-modal-window {
  display: flex;
  width: 100%;
  max-width: 700px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-large);
  background: var( --color-background-primary);
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

/* 完了画面モーダルウィンドウ (700px) */

.complete-modal-window {
  display: flex;
  width: 100%;
  max-width: 700px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-large);
  background: var( --color-background-primary);
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

/* 完了画面閉じるボタン */

.complete-button-close {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  border: 1px solid var(--color-text-secondary-modal);
  background: var( --color-background-primary);
  cursor: pointer;
  color: var(--color-text-secondary-modal);
  font-size: var(--font-medium);
  font-weight: 700;
  transition: all 0.2s;
}

.complete-button-close:hover {
  background: var(--color-background-secondary);
}

/* ===========================
   企業情報削除確認画面モーダルウィンドウ
   =========================== */

/* 削除確認画面モーダルウィンドウ (700px) */

.delete-modal-window {
  display: flex;
  width: 100%;
  max-width: 700px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-large);
  background: var( --color-background-primary);
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

/* チェックボックスエリア */

.delete-checkbox-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  padding: 16px;
}

.delete-checkbox-label {
  display: flex;
  height: 37px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.delete-checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.delete-checkbox-custom {
  width: 19px;
  height: 19px;
  border-radius: var(--radius-xsmall);
  border: 2px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}

.delete-checkbox-input:checked + .delete-checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.delete-checkbox-input:checked + .delete-checkbox-custom::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid var(--color-background-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 1px;
}

.delete-checkbox-text {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

/* 削除ボタン（無効状態） */

.delete-button-disabled {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  border: 1px solid var(--color-gray-disable);
  background: var(--color-background-gray);
  cursor: not-allowed;
  color:var(--color-background-primary);
  font-size: var(--font-medium);
  font-weight: 700;  
  opacity: 0.6;
}

/* 削除ボタン（有効状態） */

.delete-button-enabled {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  border: none;
  background: var(--color-error);
  cursor: pointer;
  color:var(--color-background-primary);
  font-size: var(--font-medium);
  font-weight: 700;  
  transition: all 0.2s;
  opacity: 1;
}

.delete-button-enabled:hover {
  background: #A01F25;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(201, 37, 45, 0.2);
}

.delete-button-enabled:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(201, 37, 45, 0.2);
}

/* ===================================================================
   ツールチップ
   =================================================================== */

.tooltip {
  display: none;
  max-width: 440px;
  padding: var(--blank-space-large);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blank-space-xsmall);
  border-radius: var(--radius-medium);
  background: var(--color-background-primary);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.20);
  position: absolute;
  top: 24px;
  left: -130px;
  z-index: 1000;
  pointer-events: none;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip.tooltip-visible {
  display: flex;
  pointer-events: auto;
}

.tooltip-title {
  align-self: stretch;
  color: var(--color-text-primary);
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--font-medium);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  text-align: left;
  padding-bottom: 8px;
}

.tooltip-content {
 padding-top: 8px;
}

.tooltip-text {
  align-self: stretch;
  color: var(--color-text-primary);
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--font-small);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.tooltip-arrow {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
}

.tooptip-left {
  left: 0 !important;
  width: 360px;
}

/* Diagnostic Status Tooltip */

.diagnostic-status-tooltip {
  width: 440px;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 8px); /* 8px 下にずらす */

}

.diagnostic-status-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blank-space-medium);
  align-self: stretch;
}

.diagnostic-status-row {
  display: flex;
  align-items: flex-start;
  gap: var(--blank-space-large);
  align-self: stretch;
}

.diagnostic-label {
  border-radius: var(--radius-xsmall);
  width: 70px;
  padding: var(--blank-space-xsmall) var(--blank-space-xsmall);
  justify-content: center;
  align-items: center;
  gap: var(--blank-space-small);
  border-radius: var(--radius-xsmall);
  color: var(--color-text-secondary-modal);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--font-small);
  font-style: normal;
  font-weight: 700;
  flex-shrink: 0;
}

.diagnostic-label.gray-label {
  background: var(--color-gray-lowest);
  color: var(--color-text-secondary-modal);
}

.diagnostic-label.primary-light-label {
  background: var(--color-primary-lower);
  color: var(--color-primary-high);
}

.diagnostic-label.primary-label {
  background: var(--color-primary-high);
  color: var(--color-on-primary);
}

.diagnostic-label.success-label {
  background: var(--color-status-success);
  color: var(--color-text-white);
}

.diagnostic-label.error-info-label {
  background: var(--color-text-white);
  color: var(--color-error);
  text-decoration: underline;
  gap: var(--blank-space-xsmall);
}

.diagnostic-text {
  color: var(--color-text-primary);
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: var(--font-small);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-align: left;
  flex: 1;
}

/* Diagnostic Status Nested Header */

.diagnostic-status-header {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  position: relative;
  overflow: visible;
}

/* ===================================================================
   ポップアップ：企業詳細検索
   =================================================================== */

/* Search Popup Window */

.search-popup-window {
  display: flex;
  /* width: 100%;
  max-width: 686px; */
  min-width: 640px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-large);
  background: var( --color-background-primary);
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
}

/* Search Popup Description */

.search-popup-description {
  align-self: stretch;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

/* Search Popup Fields Container */

.search-popup-fields {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* Individual Field */

.search-popup-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Field Label */

.search-popup-label {
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
  min-height: 17px;
  display: flex;
  align-items: center;
}

/* Input Wrapper */

.search-popup-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: stretch;
}

/* Text Input */

.search-popup-input {
  display: flex;
  padding: 8px 12px;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  
  transition: all 0.2s;
  width: 430px;
}

.search-popup-input::placeholder {
  color: var(--color-background-gray);
}

.search-popup-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(20, 115, 230, 0.1);
}

.search-popup-input-small {
  width: 100px;
  flex: none;
}

/* Select Wrapper */

.search-popup-select-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  max-width: 190px;
}

/* Select Dropdown */

.search-popup-select {
  display: flex;
  height: 37px;
  padding: 8px 36px 8px 12px;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  
  cursor: pointer;
  appearance: none;
  transition: all 0.2s;
  width: 100%;
  outline: none;
}

.search-popup-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Select Arrow Icon */

.search-popup-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 20px;
  height: 20px;
}

/* Range Input Wrapper */

.search-popup-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 430px;
}

/* Range Text */

.search-popup-range-text {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

/* ===================================================================
   企業詳細
   =================================================================== */

.financial-info-box {
  display: flex;
  width: 100%;
  min-width: 1016px;
  max-width: 1016px;
  min-height: 630px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  overflow: hidden;
}

.basic-data-header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.basic-data-intro {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  flex: 1;
}

.basic-data-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.basic-data-button {
  display: flex;
  min-width: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);  
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.basic-data-button.secondary {
  background: var( --color-background-primary);
  color: var(--color-primary);
}

.basic-data-button.secondary:hover {
  background: var(--color-background-blue-light);
}

.basic-data-button.primary {
  background: var(--color-primary);
  color:var(--color-background-primary);
  border-color: var(--color-primary);
}

.basic-data-button.primary:hover {
  background: var(--color-primary-high);
  border-color:var(--color-primary-high);
}

.basic-data-button:disabled {
  color: var(--color-background-gray) !important;
  cursor: not-allowed;
  border: 1px solid var(--color-background-gray)
}

.basic-data-button:disabled:hover {
  background-color: inherit; /* ホバー色を消す */
  cursor: default;           /* ポインターを通常に戻す */
  opacity: 1;                /* 必要なら透明度も調整 */
}

.industry-section {
  width: 100%;
}

.industry-section-title {
  color: var(--color-text-secondary-modal);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 8px;
}

.industry-fields {
  display: flex;
  padding: 16px 24px;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
  background: var(--color-background-secondary);
}

.industry-fields-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1 0 0;
}

.industry-field-set {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
}

.industry-label-set {
  display: flex;
  min-height: 17px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.industry-label {
  color: var(--color-text-secondary);
  
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
}

.industry-input {
  display: flex;
  min-height: 37px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.industry-input-text {
  height: 21px;
  flex: 1 0 0;
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

.input-suffix {
  color: var(--color-text-primary);
  font-size: var(--font-report);
  padding-top:8px;
  font-weight: 700;
  line-height: 100%;
  white-space: nowrap;
}

/* ===================================================================
   スナックバー
   =================================================================== */

/* Snackbar Container - Fixed at top center */

.snackbar-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 1392px;
  width: calc(100% - 48px);
}

/* Snackbar Base */

.snackbar {
  display: flex;
  max-width: 1392px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  margin: 16px 24px;
  gap: 8px;
  border-radius: 12px;
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

/* Snackbar Show Animation */

.snackbar-show {
  opacity: 1;
  transform: translateY(0);
}

/* Snackbar Success (Green) */

.snackbar.success {
  border: 1px solid var(--color-status-success);
  background: var(--snackbar-success);
}

/* Snackbar Error (Red) */

.snackbar.error {
  border: 1px solid var(--color-error);
  background: var(--color-red-thin);
}

/* Snackbar Info (Blue) */

.snackbar-info {
  border: 1px solid var(--color-primary);
  background: var(--color-background-blue-light);
}

/* Snackbar Icon */

.snackbar-icon {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  flex-shrink: 0;
}

.snackbar-icon svg {
  width: 100%;
  height: 100%;
}

/* Snackbar Message */

.snackbar-message {
  flex: 1 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  
}

/* Error type text color (追記) */

.snackbar.error .snackbar-message {
  color: var(--color-error);
}

/* Snackbar Close Button (追記) */

.snackbar-close {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.8;
}

.snackbar-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.snackbar-close:active {
  transform: scale(0.95);
}

.snackbar-close svg {
  width: 100%;
  height: 100%;
}

/* ===================================================================
   簡易診断
   =================================================================== */

.fab-container {
  position: fixed;
  right: 288px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  z-index: 1000;
}

@media (max-width: 1650px) {
  .fab-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  z-index: 1000;
  } 
}

.fab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  
  outline: none;
}

.fab-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.2);
}

.fab-button:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.15);
}

.fab-button-primary {
  min-width: 53px;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-primary);
}

.fab-button-primary:hover {
  background: var(--color-blue-hover);
}

.fab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fab-label {
  flex: 1 0 0;
  color:var(--color-background-primary);
  text-align: center;
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  white-space: nowrap;
}

.fab-button-top {
  width: 52px;
  height: 52px;
  padding: 8px 16px;
  flex-direction: column;
  border-radius: 50px;
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
}

.fab-button-top:hover {
  background: var(--color-gray-lowest);
}

.fab-top-arrow {
  width: 17px;
  height: 9px;
  flex-shrink: 0;
}

.fab-top-label {
  color: var(--color-primary);
  text-align: center;
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

/* QA Content Container */

.qa-content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* QA Year Tabs */

.qa-year-tabs {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--radius-small);
  background: var(--color-background-gray-light);
}

.qa-year-tab {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--radius-small);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.qa-year-tab-active {
  background: var( --color-background-primary);
}

.qa-year-tab:hover:not(.qa-year-tab-disabled) {
  opacity: 0.8;
}

.qa-year-tab-disabled {
  background: var(--color-background-gray-middle);
  cursor: not-allowed;
}

.qa-year-tab-title {
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
}

.qa-year-tab-disabled .qa-year-tab-title {
  font-size: var(--font-medium);
}

.qa-label-red {
  background: var(--color-error);
  color: var(--color-text-white);  
}

/* QA Loading Area */

.qa-loading-area {
  display: flex;
  width: 100%;
  height: 460px;
  padding: 36px 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var(--color-background-blue-light);
}

.qa-loading-icon {
  flex-shrink: 0;
}

.qa-loading-title {
  color: var(--color-text-primary);
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
}

.qa-loading-subtitle {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  text-align: center;
}

/* QA Error State */

.qa-error-area {
  background: var( --color-background-primary);
  gap: 24px;
}

.qa-error-icon {
  flex-shrink: 0;
}

.qa-error-message {
  width: 940px;
  text-align: center;
}

.qa-error-title {
  color: var(--color-error);
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
}

.qa-error-subtitle {
  color: var(--color-error);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

/* Balance Sidebar Menu */

.report-sidebar-menu {
  width: 272px;
  max-height: 800px;
  overflow-y: auto;
  background: var( --color-background-primary);
  border: 1px solid var(--color-gray-border);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-bar) transparent;
}

.report-sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.report-sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

.report-sidebar-menu::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-bar);
  border-radius: 3px;
}

.report-sidebar-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover);
}

/* Menu Item */

.menu-item {
  display: flex;
  flex-direction: column;
  background: var( --color-background-primary);
}

.menu-item-header {
  display: flex;
  width: 100%;
  padding: 20px 16px;
  align-items: center;
  gap: 8px;
  background: var( --color-background-primary);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-item-header:hover {
  background: var(--color-gray-lowest);
}

.menu-item-icon {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.menu-item-title {
  flex: 1;
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item-arrow {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

/* Submenu */

.submenu {
  display: none;
  flex-direction: column;
  background: var( --color-background-primary);
}

.menu-item-open .submenu {
  display: flex;
}

.submenu-print {
  padding: 4px 8px;
  color:var(--color-primary-high);
  font-size: var(--font-xxsmall);
  font-weight: 700;
  line-height: 100%;
}

.submenu-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: var(--radius-xsmall);
  font-size: var(--font-xxsmall);
  font-weight: 700;
  line-height: 100%;
  white-space: nowrap;
}

.submenu-label.green {
  background: var(--color-status-success);
  color: var(--color-text-white);
}

.submenu-item {
  display: flex;
  width: 100%;
  min-height: 48px;
  padding: 16px;
  align-items: center;
  gap: 8px;
  background: var( --color-background-primary);
  cursor: pointer;
  transition: background 0.2s;
}

.submenu-item:hover {
  background: var(--color-gray-lowest);
}

.submenu-item.active {
  background: var(--color-primary-lower);
}

.checkbox-wrapper {
  position: relative;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.submenu-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 19px;
  height: 19px;
  margin: 0;
}

.checkbox-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-xsmall);
  border: 2px solid var(--color-gray-border);
  background: var( --color-background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.submenu-checkbox:checked + .checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-custom svg {
  opacity: 0;
  transition: opacity 0.2s;
}

.submenu-checkbox:checked + .checkbox-custom svg {
  opacity: 1;
}

.submenu-text {
  flex: 1;
  color: var(--color-text-primary); 
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.submenu-inner {
  display: flex;
  gap: var(--blank-space-xsmall);
  align-items: center;
}

/* Balance Main Wrapper */

.report-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

/* ===================================================================
  ポップアップ
   =================================================================== */

/* モーダルオーバーレイ（背景） */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 16px;
}

/* モーダルウィンドウ */

.modal-window {
  display: flex;
  width: 100%;
  max-width: 501px;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-large);
  background: var(--color-background-primary);
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
}

/* モーダルヘッダー */

.modal-header {
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-bottom: 1px solid var(--color-gray-border);
}

.modal-title {
  flex: 1;
  color:var(--color-primary-high);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 130%;
}

.modal-title.success {
  color:var(--color-primary-high);
}

.modal-title.error {
  color:var(--color-error);
}

/* モーダルコンテンツ */

.modal-content {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.modal-content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* セクション */

.modal-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.modal-section-title {
  color: var(--color-text-secondary-modal);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
}

.modal-message {
  color: var(--color-text-secondary-modal);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  white-space: pre-line;
}

/* モーダルフッター */

.modal-footer {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-top: 1px solid var(--color-gray-border);
}

.modal-footer.confirmation {
  justify-content: space-between;
}

/* モーダルアニメーション */

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-window {
  animation: modalFadeIn 0.2s ease-out;
}

/* Popup Container */

.popup-container {
  display: flex;
  min-width: 440px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-radius: var(--radius-large);
  background: var( --color-background-primary);
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.15);
}

.popup-text {
  align-self: stretch;
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  margin: 0;
}

.popup-description {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: stretch;
}

/* ポップアップボタン */

.popup-button-secondary {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  border: 1px solid var(--color-text-secondary-modal);
  background: var( --color-background-primary);
  cursor: pointer;
  color: var(--color-text-secondary-modal);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 130%;  
  transition: all 0.2s;
}

.popup-button-primary {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  background: var(--color-primary);
  border: none;
  cursor: pointer;
  color:var(--color-background-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 130%;
  transition: all 0.2s;
  min-width: 112px;
}

.popup-button-red {
  color: var(--color-error);
  border-color: var(--color-error);
}

.popup-button-secondary:hover {
  background: var(--color-gray-lowest);
}

.popup-button-primary:hover {
  background: var(--color-blue-hover);
}

.popup-container-extra-wide {
  min-width: 800px;
  width: 800px;
}

.popup-confirm-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  padding: 16px 24px;
  background: var(--color-background-secondary);
}

.popup-confirm-item {
  display: flex;
}

.popup-confirm-label {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 200%;
}

.popup-confirm-value {
  color: var(--color-text-primary);  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 200%;
}

/* Tall Content Area for Completion Popups */

.popup-content-tall {
  min-height: 100px;
}

.popup-email-fields {
  display: flex;
  padding: 4px 24px 8px 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Field Set */

.popup-field-set {
  display: flex;
  width: 704px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

/* Field Label Set */

.popup-field-label-set {
  display: flex;
  min-height: 17px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

/* Field Label */

.popup-field-label {
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
}

/* Input Field */

.popup-input-field {
  flex: 1 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.popup-input-field::placeholder {
  color: var(--color-background-gray);
}

/* Field Footer Area */

.popup-field-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

/* Field Description */

.popup-field-description {
  flex: 1 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-small);
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

.popup-password-fields {
  display: flex;
  padding: 4px 24px 8px 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Account Description */

.popup-password-description {
  color: var(--color-text-secondary-modal);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

/* Policy Set */

.popup-policy-set {
  display: flex;
  width: 399px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Policy List */

.popup-policy-list {
  display: flex;
  min-height: 37px;
  padding: 0;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--radius-small);
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
}

/* Policy Text */

.popup-policy-text {
  flex: 1 0 0;
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

/* Password Toggle Button */

.popup-password-toggle {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.popup-password-toggle:hover {
  opacity: 0.7;
}

.popup-password-toggle:active {
  opacity: 0.5;
}

.popup-password-toggle svg {
  width: 20px;
  height: 20px;
}

.popup-container-account {
  min-width: 688px;
  width: 688px;
}

/* Account Description */

.popup-account-description {
  color: var(--color-text-secondary-modal);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

/* Account Section */

.popup-account-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  position: relative;
}

/* Section Title */

.popup-account-section-title {
  color: var(--color-text-secondary-modal);
  
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* Section Header with Help Icon */

.popup-account-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Help Icon Button */

.popup-help-icon {
  display: flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.popup-help-icon:hover {
  opacity: 0.7;
}

.popup-help-icon svg {
  width: 16px;
  height: 16px;
}

/* Name Fields Container */

.popup-account-name-fields {
  display: flex;
  padding: 16px 24px;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
  background: var(--color-background-secondary);
}

/* Account Field Group */

.popup-account-field-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1 0 0;
}

/* Select Field Container */

.popup-account-select-field {
  padding: 16px 24px;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
  background: var(--color-background-secondary);
}

/* Select Wrapper */

.popup-account-select-wrapper {
  display: flex;
  flex: 1 0 0;
  position: relative;
  min-width: 300px;
}

/* Select Element */

.popup-account-select {
  display: flex;
  width: 100%;
  padding: 8px 12px;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  outline: none;
  transition: border-color 0.2s;
}

.popup-account-select:hover {
  border-color: var(--color-primary);
}

.popup-account-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(20, 115, 230, 0.1);
}

/* Select Arrow Icon */

.popup-account-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Confirmation Display Field */

.popup-confirm-display-field {
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  background: var(--color-background-secondary);
}

/* Confirmation Text */

.popup-confirm-text {
  color: var(--color-text-secondary-modal);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

/* Confirmation Footer with Three Buttons */

.popup-footer-confirm {
  justify-content: space-between;
}

/* Right Button Group */

.popup-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-reset-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
}

/* Reset Text */

.popup-reset-text {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

/* Reset Warning Text (Red) */

.popup-reset-warning {
  color: var(--color-error);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

/* Password Display Field */

.popup-password-display {
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  background: var(--color-background-secondary);
  justify-content: space-between;
}

/* Password Value Text */

.popup-password-value {
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
  user-select: all;
  cursor: text;
}

/* Copy Button */

.popup-copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.popup-copy-button:hover {
  opacity: 0.7;
}

.popup-copy-button:active {
  opacity: 0.5;
}

.popup-copy-button svg {
  width: 21px;
  height: 21px;
}

.popup-container-search {
  min-width: 640px;
  width: 672px;
}

/* Search Fields Container */

.popup-search-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* Search Row (for side-by-side layout) */

.popup-search-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

/* Search Field */

.popup-search-field {
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Half Width Field (for single field in a row) */

.popup-search-field-half {
  width: 300px;
}

.popup-assessment-recreate-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Main Paragraph (Bold) */

.popup-assessment-recreate-main {
  color: var(--color-text-primary);
  
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 150%;
  margin: 0;
  align-self: stretch;
}

/* Bullet List */

.popup-assessment-recreate-list {
  color: var(--color-text-primary);
  
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 150%;
  margin: 0;
  padding-left: 20px;
  align-self: stretch;
}

.popup-assessment-recreate-list li {
  margin-bottom: 4px;
}

.popup-assessment-recreate-list li:last-child {
  margin-bottom: 0;
}

/* Note Paragraph (Regular) */

.popup-assessment-recreate-note {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  align-self: stretch;
  margin-bottom: 8px;
}

.popup-checkbox-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

/* Checkbox Label */

.popup-checkbox-label {
  display: flex;
  height: 37px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

/* Hidden Checkbox Input */

.popup-checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Custom Checkbox Appearance */

.popup-checkbox-custom {
  width: 19px;
  height: 19px;
  border-radius: var(--radius-xsmall);
  border: 2px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}

/* Checked State */

.popup-checkbox-input:checked + .popup-checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Hide SVG when unchecked */

.popup-checkbox-custom svg {
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show SVG when checked */

.popup-checkbox-input:checked + .popup-checkbox-custom svg {
  opacity: 1;
}

/* Checkbox Text Label */

.popup-checkbox-text {
  color: var(--color-text-primary);
  
  font-size: var(--font-large);
  font-weight: 400;
  line-height: 100%;
}

.popup-company-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popup-company-intro-text {
  color: var(--color-text-secondary-modal);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

.popup-company-warning-text {
  color: var(--color-error);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* Company section */

.popup-company-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}

.popup-company-section-title {
  color: var(--color-text-secondary-modal);
  
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* File area */

.popup-company-file-area {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  gap: 4px;
  background: var(--color-background-secondary);
  border-radius: var(--radius-large);
  width: 100%;
}

.popup-company-file-label {
  color: var(--color-text-secondary);
  
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 4px;
}

.popup-company-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popup-company-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 21px;
}

.popup-company-file-item-registered .popup-company-file-name {
  font-weight: 700;
}

.popup-company-file-name {
  color: var(--color-text-secondary-modal);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-company-file-badge {
  display: inline-flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-xsmall);
  color: var(--color-error);
  
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
  flex-shrink: 0;
}

/* Info area */

.popup-company-info-area {
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 16px;
  background: var(--color-background-secondary);
  border-radius: 0;
  width: 100%;
}

.popup-company-info-item {
  color: var(--color-text-secondary-modal);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

/* Bottom warning */

.popup-company-bottom-warning {
  display: flex;
  padding-top: 0;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

.popup-company-file-upload-area {
  display: flex;
  padding: 16px;
  flex-direction: column;
  gap: 16px;
  background: var(--color-background-secondary);
  border-radius: var(--radius-large);
  width: 100%;
}

.popup-company-file-upload-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.popup-company-file-upload-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.popup-company-file-item-upload {
  display: flex;
  gap: 8px;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
}

.popup-company-file-name-upload {
  color: var(--color-text-secondary-modal);
  width: 570px;
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.popup-company-file-delete-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popup-company-file-delete-btn {
  display: flex;
  width: 40px;
  min-height: 28px;
  padding: 0 4px;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--color-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  text-decoration: underline;
  cursor: pointer;
  border-radius: 12px;
}

.popup-company-file-description {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.popup-company-file-description-text {
  color: var(--color-text-secondary);
  
  font-size: var(--font-small);
  font-weight: 400;
  line-height: 140%;
  margin: 0;
}

.popup-company-file-upload-btn-wrapper {
  display: flex;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
  gap: 24px;
  border-radius: var(--radius-large);
}

.popup-button-upload .popup-button-label {
  color: var(--color-primary);
  text-align: center;  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

/* Industry area */

.popup-company-industry-area {
  display: flex;
  padding: 16px;
  gap: 16px;
  background: var(--color-background-secondary);
  width: 100%;
}

.popup-company-select-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.popup-company-select-label {
  color: var(--color-text-secondary);
  
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
  min-height: 14px;
}

.popup-company-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.popup-company-select {
  display: flex;
  padding: 6px 12px;
  padding-right: 32px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 140%;
  appearance: none;
  cursor: pointer;
}

.popup-company-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.popup-company-select-icon {
  position: absolute;
  right: 12px;
  pointer-events: none;
}

/* Unit area */

.popup-company-unit-area {
  display: flex;
  padding: 16px;
  flex-direction: column;
  gap: 16px;
  background: var(--color-background-secondary);
  width: 100%;
}

.popup-company-radio-label {
  display: flex;
  height: 28px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.popup-company-radio-input {
  display: none;
}

.popup-company-radio-custom {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-boder-table);
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.popup-company-radio-input:checked + .popup-company-radio-custom {
  border-color: var(--color-primary);
}

.popup-company-radio-input:checked + .popup-company-radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
}

.popup-company-radio-text {
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
}

/* ===================================================================
   ドロップダウンメニュー
   =================================================================== */

.dropdown {
  position: absolute; 
  right: 48px;
  top:19px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blank-space-xsmall);
  border-top-left-radius: 0px;
  border-top-right-radius: 0p;
  border-bottom-right-radius: var(--radius-small);
  border-bottom-left-radius: var(--radius-small);
  background: var(--color-background-blue-light);
  z-index: 1000;
}

.menu { position: absolute;
    top: 50%;
    left: 0;
    border: 1px solid #1473E6;
    border-top: none;
    list-style: none;
    padding: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding-top: 20px;
 }

.menu li a { display: block;
    padding: 12px;
    text-decoration: none;
    color: #1473E6;
    text-align: center;
    background: #EBF3FD;
    font-size: 14px;
    font-weight: 700;
}

.menu-border-radius { 
  border-radius: 0 0 8px 8px;
}

.menu-li-flex {
  display: flex;
}

.menu-item-border-line {
  width: 8px;
  height: 1px;
  background: #EBF3FD;
}

.menu-item-border-line-center {
  height: 1px;
  width: 100%;
  background: #CED6DE;
}

.menu li a:hover { 
  background-color: var(--color-gray-lowest); 
  opacity: 1
}

.settings-menu-dropdown {
  position: absolute; 
  right: 48px;
  top:4px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: var(--color-background-blue-light);
  z-index: 999;
}

.settings-menu-header {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  background: #F8FAFC;
  border-bottom: 1px solid #E0E7ED;
}

.settings-menu-title {
  font-family: var(--font-type-jp-title);
  font-size: 12px;
  font-weight: 700;
  line-height: 130%;
  color: #424242;
}

.settings-menu-items {
  display: flex;
  flex-direction: column;
  background: #FFF;
}

.settings-menu-item {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  border-bottom: 1px solid #F0F3F6;
  transition: background-color 0.2s;
}

.settings-menu-item:last-child {
  border-bottom: none;
}

.settings-menu-item:hover {
  background: #F8FAFC;
  opacity: 1 
}

.settings-menu-icon {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.settings-menu-icon svg {
  width: 20px;
  height: 20px;
}

.settings-menu-item-label {
  font-family: var(--font-type-jp-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  color: #1473E6;
  font-weight:700;
}

/* ===========================
   ログイン関連画面
   =========================== */

.container {
  display: flex;
  min-height: 100vh;
}

/* ===========================
   メインセクション
   =========================== */

.main-section {
  min-width:  940px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-primary);
  padding: 24px;
}

/* ===========================
   フォーム
   =========================== */

.form-container {
  width: 100%;
  max-width: 490px;
}

.form-card {
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius-small);
  background-color: var(--color-background-primary);
  overflow: visible;
}

.form-content {
  padding: 24px;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===========================
   カード
   =========================== */

.card-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-border);
}

.card-title {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
}

.card-footer {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--color-gray-border);
}

/* ボタン右寄せ */

.card-footer-right {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--color-gray-border);
}

/* ===========================
   インプット
   =========================== */

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.label-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 17px;
}

.field-label {
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 150%;
}

.field-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-boder-table);
  border-radius: var(--radius-small);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  
  transition: all 0.2s;
}

.field-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(20, 115, 230, 0.1);
}

.field-input.basic-data {
 text-align: right;
 font-size: var(--font-large);
 padding: 4px 8px;
}

.field-input.unit {
 margin-right: 4px; 
}

/* ===========================
   エラー状態
   =========================== */

/* エラー状態の入力フィールド */

.field-input.error,
.field-input.is-error {
  border-color: var(--color-error);
  background-color: var(--color-red-thin);
}

.field-input.error:focus,
.field-input.is-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(201, 37, 45, 0.1);
}

/* エラーメッセージ */

.error-message {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 17px;
  margin-top: 4px;
  color: var(--color-error);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
  white-space: pre-line;
}

.password-wrapper {
  position: relative;
  width: 100%;
  display: flex; align-items: center;
}

.password-input {
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.password-toggle:hover {
  opacity: 0.7;
}

.forgot-password-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 17px;
  margin-top: 4px;
}

.forgot-password-link {
  flex: 1;
  color: var(--color-primary);
  font-size: var(--font-small);
  transition: all 0.2s;
}

/* エラー状態のパスワードラッパー */

.password-wrapper.error .password-input,
.password-wrapper.is-error .password-input {
  border-color: var(--color-error);
  background-color: var(--color-red-thin);
}

/* パスワードポリシー表示エリア */

.password-policy {
  display: flex;
  min-height: 37px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.password-policy-text {
  flex: 1;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 150%;
  white-space: pre-line;
}

/* パスワードポリシーラベル */

.policy-label {
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
  height: 17px;
  min-height: 17px;
}

.help-text {
  display: flex;
  min-height: 17px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: var(--color-text-secondary);
  font-size: var(--font-small);
  font-weight: 700;
}

/* 注意書きテキスト */

.note-text {
  display: flex;
  min-height: 17px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 150%;
  white-space: pre-line;
  margin-top: 4px;
}

/* ===========================
   ヘッダー（ログイン前）
   =========================== */

.header-section {
  display: none;
  position: relative;
  border-bottom: 1px solid var(--color-gray-border);
  /* Desktop: Show left panel */
  display: flex;
  min-width: 500px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(169deg, #095ABA 49.98%, #042954 100%);
}

.header-content {
  position: relative;
  z-index: 10;
  padding: 0 16px;
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.logo-text {
  color: var(--color-background-primary);
  font-size: var(--font-xxxlarge);
  font-weight: 700;
  line-height: 100%;
  text-align: center;
}

/* ===================================================================
   企業サマリー
   =================================================================== */

/* Corporate Info Bar */

.company-summary-corporate-info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 1392px;
  margin: 0 auto;
}

.company-summary-info-fields {
  display: flex;
  padding: 8px 16px;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  height: 54px;
  width: 100%;
}

.company-summary-info-field {
  padding: 0 0 0 16px;
  align-items: flex-start;
  gap: 4px;
  border-left: 1px solid var(--color-gray-border);
}

.company-summary-info-field:first-child {
  border-left: none;
  padding-left: 0;
}

.company-summary-info-field-long {
  flex: 1 0 0;
  width: 150px;
}

.company-summary-info-field-middle {
  flex: 1 0 0;
  width: 120px;
}

.company-summary-info-field-short {
  width: 70px;
}

.company-summary-info-field-staff {
  flex: 1 0 0;
  width: 180px;
}

.company-summary-info-label {
  color: var(--color-text-secondary);
  font-size: var(--font-xsmall);
  font-weight: 700;
  line-height: 100%;
  min-height: 17px;
}

.company-summary-info-value {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  align-items: flex-end;
  padding-left: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================================================================
   レポート共通化
   =================================================================== */

.report-main-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 1080px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  overflow: hidden;
  align-self: center;
}

.report-content-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
}

.report-content-title {
  color: var(--color-text-primary);
  
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

.report-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-header-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}

.report-print-check {
  display: flex;
  height: 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.report-checkbox-wrapper {
  position: relative;
  width: 19px;
  height: 19px;
}

.report-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 19px;
  height: 19px;
  margin: 0;
}

.report-checkbox-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-xsmall);
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.report-checkbox:not(:checked) + .report-checkbox-custom {
  background: var( --color-background-primary);
}

.report-checkbox:not(:checked) + .report-checkbox-custom svg {
  display: none;
}

.report-checkbox:disabled + .report-checkbox-custom {
  background: var(--color-background-gray-middle);
  border-color: var(--color-background-gray-middle);
  cursor: not-allowed;
}

.report-checkbox:disabled + .report-checkbox-custom svg {
  display: none;
}

.report-checkbox-label {
  color: var(--color-primary);
  text-align: center;
  
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
  cursor: pointer;
}

.report-checkbox-label-disabled {
  color: var(--color-background-gray);
  cursor: not-allowed;
}

.report-header-divider {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0 16px;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.report-header-divider-line {
  width: 1px;
  height: 24px;
  background: var(--color-text-secondary);
}

.report-button-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-action-button {
  display: flex;
  min-width: 80px;
  min-height: 32px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s;  
  outline: none;
}

.report-action-button span {
  color:var(--color-background-primary);
  text-align: center;
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.report-action-edit:hover:not(:disabled) {
  background: var(--color-primary-high);
  border-color:var(--color-primary-high);
}

.report-action-button:disabled {
  background: var( --color-background-primary);
  border-color: var(--color-gray-disable);
  cursor: not-allowed;
}

.report-action-button:disabled span {
  color: var(--color-background-gray);
}

.report-action-button:disabled svg path {
  fill: var(--color-background-gray);
}

.report-action-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Active Reset Button */

.report-action-reset-active {
  display: flex;
  min-width: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.report-action-reset-active span {
  color: var(--color-primary);
  text-align: center;
  
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.report-action-reset-active:hover {
  background: var(--color-background-blue-light);
}

.report-content-area {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0;
  background: var( --color-background-primary);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.report-area {
  align-items: center;  
  padding: 24px;
}

/* Print Area Container */

.report-print-area {
  display: flex;
  padding: 16px 16px;
  flex-direction: column;
  width: 1032px;
  /*max-height: 1459px; */
  align-items: center;
  gap: 24px;
  align-self: stretch;
  background: var( --color-background-primary);
}

/* Title Bar with Steps */

.report-title-bar {
  display: flex;
  width: 100%;
  max-width: 1000px;
  justify-content: space-between;
  align-items: center;
}

.report-main-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
}

.report-title-text {
  color: var(--color-text-primary);
  
  font-size: var(--font-title);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

.report-step-bar {
  display: flex;
  align-items: center;
}

.report-step {
  display: flex;
  height: 44px;
  align-items: center;
}

.report-step-content {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: var(--color-primary-high);
}

.report-step-content-gray {
  background: var(--color-gray-boder-table);
}

.report-step-label {
  color:var(--color-background-primary);
  text-align: center;
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

.report-step-arrow {
  align-self: stretch;
  flex-shrink: 0;
}

/* Description Area */

.report-description {
  display: flex;
  width: 100%;
  max-width: 1000px;
  align-items: flex-start;
  gap: 24px;
}

.report-description-text {
  flex: 1 0 0;
  color: var(--color-text-primary);
  font-size: var(--font-xxlarge);
  font-weight: 400;
  line-height: 130%;
  margin: 0;
}

.report-tables-container {
  display: flex;
  width: 100%;
  width: 1000px;
  align-items: flex-start;
  gap: 24px;
}

/* Active Reset Button */

.report-action-reset-active {
  display: flex;
  min-width: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.report-action-reset-active span {
  color: var(--color-primary);
  text-align: center;
  
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.report-action-reset-active:hover {
  background: var(--color-background-blue-light);
}

/* report-text Edit Area */

.report-text-edit-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  width: 1000px;
  
}

.report-text-edit-textarea {
  display: flex;
  height: 108px;
  padding: 2px 2px;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--radius-small);
  resize: none;
  border: 1px solid var(--color-gray-boder-table);
  background: var( --color-background-primary);
  overflow: hidden;
  color: var(--color-text-primary);  
  font-size: var(--font-xxlarge);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  outline: none;
}

.report-text-edit-textarea:focus {
  border-color: var(--color-primary);
}

.report-text-edit-textarea::placeholder {
  color: var(--color-background-gray);
}

.report-text-edit-char-counter {
  display: flex;
  min-height: 17px;
  align-items: center;
  align-self: stretch;
  color: var(--color-text-primary);
  text-align: right;  
  font-size: var(--font-small);
  font-weight: 400;
  line-height: 100%;
  justify-content: flex-end;
}

/* ===================================================================
   レポート文言共通
   =================================================================== */

.kpf-content-section {
  display: flex;
  width: 100%;
  max-width: 1000px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Section Header (Blue background) */

.kpf-section-header {
  display: flex;
  width: 100%;
  padding: 8px;
  justify-content: center;
  align-items: center;
  background: var(--color-primary-high);
}

.kpf-section-title {
  color: var(--color-background-primary);
  
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
  flex: 1;
  text-align: center;
}

/* Overview Section */

.kpf-overview {
  display: flex;
  width: 100%;
  padding: 16px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.kpf-overview-text {
  color: var(--color-text-primary);
  
  font-size: var(--font-xxlarge);
  font-weight: 400;
  line-height: 130%;
  margin: 0;
}

/* Points Wrapper */

.kpf-points-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

/* Point Group */

.kpf-point-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Point Title Wrapper */

.kpf-point-title-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.kpf-point-title {
  color: var(--color-text-primary);
  line-height: 130%;
  
  font-size: var(--font-xxlarge);
  font-weight: 700;
  margin: 0;
  flex: 1;
}

/* Point Body */

.kpf-point-body {
  display: flex;
  width: 100%;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.kpf-point-text {
  color: var(--color-text-primary);
  
  font-size: var(--font-xxlarge);
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  flex: 1;
}

/* Diagram Container */

.kpf-diagram-container {
  display: flex;
  width: 100%;
  max-width: 692px;
  padding: 0;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.kpf-diagram-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-small);
}

/* Footer Note */

.kpf-footer-note {
  display: flex;
  width: 100%;
  padding: 48px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.kpf-note-text {
  color: var(--color-text-primary);
  
  font-size: var(--font-xxlarge);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

/* Points Container with 32px gaps between items */

.kpf-points-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* Point Item - 16px vertical padding, 8px gap */

.kpf-point-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  width: 100%;
}

/* Point Content - 16px left padding */

.kpf-point-content {
  padding-left: 16px;
  padding-right: 16px;
}

/* Diagram Container */

.kpf-diagram-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 16px auto;
}

/* Diagram Placeholder */

.kpf-diagram-placeholder {
  display: flex;
  width: 850px;
  height: 220px;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--color-black-primary);
  background-color: var(--color-background-primary);
  padding: 10px;
  box-sizing: border-box;
}

.kpf-diagram-text {
  color: var(--color-black-primary);
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
}

/* Points Container with 48px gaps for profit expansion */

.kpf-points-profit {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Diagram Container for Profit Expansion (700×500) */

.kpf-diagram-container-profit {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 16px auto;
}

/*20260209 start */

/* Diagram Placeholder 650×450 */

.kpf-diagram-placeholder-profit {
  display: flex;
  width: 650px;
  height: 450px;
  align-items: end;
  background-color: var(--color-background-primary);
  box-sizing: border-box;
  
}

/* tables */

/* ===================================================================
   テーブル：企業一覧
   =================================================================== */

/* Table Container */

.company-list-table-container {
  width: 100%;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  overflow: hidden;
}

/* Table */

.company-list-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

/* Table Header */

.company-list-table thead {
  background: var(--color-background-gray-light);
}

.company-list-table thead tr {
  height: 60px;
}

/* Links */

.cl-link {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Empty Table Structure */

.company-list-table-empty thead tr {
  height: 60px;
}

/* Table Header Cells */

.cle-th {
  padding: 16px 8px;
  text-align: center;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  border: 0;
  background: var(--color-background-gray-light);
  vertical-align: middle;
  word-break: break-word;
  height: 60px;
}

.cle-th:first-child {
  padding-left: 16px;
}

.cle-th:last-child {
  padding-right: 16px; 
}

.cle-th-number {
  width: 130px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cle-th-name {
  width: 100%;
}

.cle-th-industry {
  width: 100px;
}

.cle-th-month {
  width: 90px;
}

.th-inner {
   display: inline-flex;
   align-items: center;
   gap: 4px; 
   min-width: 0;
  }

.cle-th-month img {
  flex-shrink: 0;
  height: 14px;
  width: auto;
}

.cle-th-score {
  width: 100px;
}

.cle-th-score img {
  flex-shrink: 0;
  height: 14px;
  width: auto;
}

.cle-th-year {
  width: 138px;
}

.cle-th-year img {
  flex-shrink: 0;
  height: 20px;
  width: auto;
}

.cle-th-diagnostic {
  width: 312px;
  padding: 0 0;
}

.cle-th-date {
  width: 140px;
}

.cle-th-assignee {
 width: 146px;
}

/* Diagnostic Header Styling */

.cle-diagnostic-header {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: stretch;
}

.cle-diagnostic-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-border);
  background: var(--color-background-gray-light);
  position: relative;
  height: 29px;
  flex-shrink: 0;
}

.cle-diagnostic-header-bottom {
  display: flex;
  align-items: stretch;
  background: var(--color-background-gray-light);
  position: relative;
  height: 30px;
  flex-shrink: 0;
}

.cle-diagnostic-subcell {
  flex: 1;
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  white-space: normal;
  height: 100%;
}

.cle-diagnostic-subcell-divider {
  width: 1px;
  height: 20px;
  background: var(--color-gray-border);
  align-self: center;
  flex-shrink: 0;
}

/* Empty State Cell */

.cle-empty-cell {
  padding: 187.5px 0;
  text-align: center;
  background: var( --color-background-primary);
  border: 0;
  border-top:  1px solid var(--color-gray-border);
  line-height: 150%;
  vertical-align: middle;
}

.cle-empty-message {
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 400;
  text-align: center;
}

.cle-td {
  padding: 16px 8px;
  font-size: var(--font-medium);
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: center;
  white-space: normal;
  border-top: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
}

.cle-td:first-child {
  padding-left: 16px;
}

.cle-td:last-child {
  padding-right: 16px;
}

/* Table Data Cells */

.cle-td.left {
  text-align: left; 
}

/* Error Row Background */

.cl-tr-error .cle-td {
  background: var(--color-red-thin);
}

/* ===================================================================
   テーブル：企業情報削除
   =================================================================== */

/* 削除確認テーブルコンテナ */

.delete-table-container {
  display: flex;
  padding: 0px 24px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: var(--radius-large);
}

/* 削除確認テーブル */

.delete-company-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.delete-company-table thead tr th:first-child {
  border-radius: 8px 0 0 0;
}

.delete-company-table thead tr th:last-child {
  border-radius: 0 8px 0 0;
}

.delete-company-table tbody tr td:first-child {
  border-radius: 0 0 0 8px;
}

.delete-company-table tbody tr td:last-child {
  border-radius: 0 0 8px 0;
}

/* テーブルヘッダー */

.delete-table-header {
  display: flex;
  width: 190px;
  height: 60px;
  min-width: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--color-gray-border);
  border-left: 1px solid var(--color-gray-border);
  background: var(--color-background-gray-light);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.delete-table-header-flex {
  flex: 1;
  width: auto;
  border-left: none;
}

.delete-table-header-industry {
  width: 210px;
  border-right: 1px solid var(--color-gray-border);
  border-left: none;
}

/* テーブルセル */

.delete-table-cell {
  display: flex;
  width: 190px;
  height: 53px;
  min-width: 80px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--color-gray-border);
  border-bottom: 1px solid var(--color-gray-border);
  border-left: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.delete-table-cell-left {
  justify-content: flex-start;
}

.delete-table-cell:nth-child(2) {
  flex: 1;
  width: auto;
  border-left: none;
}

.delete-table-cell:nth-child(3) {
  width: 210px;
  border-right: 1px solid var(--color-gray-border);
  border-left: none;
}

/* Div-based table row structure (追記) */

.delete-table-row {
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* Reset previous table-based styles and apply div-based flex layout (追記) */

.delete-company-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}

/* Header cells - first row (追記) */

.delete-table-row:first-child .delete-table-header {
  height: 60px;
  padding: 8px;
  justify-content: center;
  border-top: 1px solid var(--color-gray-border);
  background: var(--color-background-gray-light);
}

.delete-table-row:first-child .delete-table-header:first-child {
  width: 190px;
  min-width: 80px;
  border-left: 1px solid var(--color-gray-border);
  border-radius: 8px 0 0 0;
}

.delete-table-row:first-child .delete-table-header:last-child {
  width: 210px;
  border-right: 1px solid var(--color-gray-border);
  border-radius: 0 8px 0 0;
}

/* Data cells - second row (追記) */

.delete-table-row:last-child .delete-table-cell {
  height: 53px;
  padding: 16px;
  border-top: 1px solid var(--color-gray-border);
  border-bottom: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
}

.delete-table-row:last-child .delete-table-cell:first-child {
  width: 190px;
  min-width: 80px;
  border-left: 1px solid var(--color-gray-border);
  border-radius: 0 0 0 8px;
  justify-content: center;
}

.delete-table-row:last-child .delete-table-cell:last-child {
  width: 210px;
  border-right: 1px solid var(--color-gray-border);
  border-radius: 0 0 8px 0;
}

/* Flex column for middle cells (追記) */

.delete-table-header-flex,
.delete-table-cell-flex {
  flex: 1 0 0;
}

.delete-table-cell-flex {
  justify-content: flex-start;
}

/* ===================================================================
   テーブル：企業詳細
   =================================================================== */

.financial-table-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.table-unit-label {
  display: flex;
  min-width: 80px;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  color: var(--color-text-primary);
  text-align: right;
  font-size: var(--font-medium);
  font-weight: 400;
  margin-bottom: 4px;
}

.financial-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--color-gray-boder-table);
  table-layout: fixed;
}

.financial-th-none-small {
  width:40px;
  border: none;
}

.financial-th-none-middle {
  width:140px;
  border: none;
}

.financial-th-none-large {
  width:190px;
  border: none;
}

.financial-th-main {
  width: 230px;
  padding: 8px 16px;
  text-align: center;
  vertical-align: middle;
  background: var(--color-primary-high);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  border-right: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.financial-th-period {
  min-width: 80px;
  padding: 8px 16px;
  text-align: center;
  vertical-align: middle;
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  border-right: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.financial-td-label {
  width: 179.8px;
  min-width: 80px;
  padding: 8px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  background: var(--color-background-blue-light);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
}

.financial-td-label.bold {
  font-weight: 700;
}

.financial-td-group {
  width: 41px;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--color-gray-boder-table);
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  border-bottom: 1px solid var(--color-gray-boder-table);
  text-align: center;
}

.financial-td-sublabel {
  vertical-align: middle;
  border-left: 1px solid var(--color-gray-boder-table);
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  padding: 5.5px 16px;
  text-align: -webkit-left;
  font-size: var(--font-report);
  font-weight: 700;
  border-right:  1px solid var(--color-gray-boder-table);
}

.financial-td-sublabel.right-pa-none {
  padding-right: 0;
}

.financial-td-sublabel.bold {
  font-weight: 700;
  border-left: none;
}

.financial-td-value {
  min-width: 80px;
  text-align: right;
  vertical-align: middle;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 5.5px 16px;
  
  font-size: var(--font-report);
  font-weight: 700;
}

.financial-td-small {
  font-size: var(--font-medium);
}

.financial-td-value.last {
  border-right: 1px solid var(--color-gray-boder-table);
}

.financial-subtotal-row .financial-td-sublabel,
.financial-subtotal-row .financial-td-value {
  border-top: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.financial-total-row {
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.financial-total-row .financial-td-label {
  border-radius: 0 0 0 4px;
  padding-right: 0;
}

.financial-total-row .financial-td-value.last {
  border-radius: 0 0 4px 0;
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.basic-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--color-gray-boder-table);
}

.basic-data-th-main {
  background: var(--color-primary-high);
  color:var(--color-background-primary);
  padding: 16px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  /* border-radius: 4px 0 0 0; */
  border-right: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.basic-data-th-period {
  background: var(--color-primary);
  color:var(--color-background-primary);
  padding: 8px 16px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-right: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.basic-data-td-label {
  background: var(--color-background-blue-light);
  color: var(--color-text-primary);
  padding: 16px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-right:  1px solid var(--color-gray-boder-table);
}

.basic-data-td-value {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 8px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
}

.basic-data-td-value.last {
  border-right: 1px solid var(--color-gray-boder-table);
}

.basic-data-table tbody tr:last-child .basic-data-td-value {
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-radius: 0 0 0 4px;
}

.basic-data-td-small {
  font-size: var(--font-medium);
}

.basic-data-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.account-table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  overflow-x: auto;
}

/* ===================================================================
   テーブル：アカウント管理
   =================================================================== */

/* Table */

.account-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--color-gray-border);
  overflow: hidden;
}

.account-table thead {
  background: var(--color-background-gray-light);
}

.account-table tbody tr {
  background: var( --color-background-primary);
}

/* Table Header */

.account-th {
  display: flex;
  height: 60px;
  min-width: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border: 0 solid var(--color-gray-border);
  background: var(--color-background-gray-light);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 130%;
  text-align: center;
  white-space: normal;
}

.account-th:first-child {
  border-radius: 8px 0 0 0;
  width: 120px;
}

.account-th:nth-child(2) {
  width: 180px;
}

.account-th:nth-child(3) {
  width: 264px;
}

.account-th:nth-child(4) {
  width: 100px;
}

.account-th:nth-child(5) {
  width: 100px;
}

.account-th:nth-child(6) {
  width: 140px;
}

.account-th:nth-child(7) {
  width: 148px;
}

.account-th:nth-child(8) {
  width: 96px;
}

.account-th:nth-child(9) {
  width: 96px;
}

.account-th:nth-child(10) {
  width: 100px;
  border-radius: 0 8px 0 0;
}

.account-th-sort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.account-sort-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Table Header - Override display for proper table layout */

.account-table th {
  display: table-cell;
  vertical-align: middle;
}

.account-table td {
  display: table-cell;
  vertical-align: middle;
}

/* Table Row */

.account-tr {
  border-top: 1px solid var(--color-gray-border);
}

/* Table Data */

.account-td {
  min-width: 80px;
  padding: 16px;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 130%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}

.account-td:first-child {
  width: 120px;
}

.account-td:nth-child(2) {
  width: 180px;
}

.account-td:nth-child(3) {
  flex: 1;
  width: 264px;
}

.account-td:nth-child(4) {
  width: 100px;
}

.account-td:nth-child(5) {
  width: 100px;
}

.account-td:nth-child(6) {
  width: 140px;
}

.account-td:nth-child(7) {
  width: 148px;
}

.account-td:nth-child(8) {
  width: 96px;
  padding: 8px;
}

.account-td:nth-child(9) {
  width: 96px;
  padding: 8px;
}

.account-td:nth-child(10) {
  width: 100px;
  padding: 8px;
}

.account-td-center {
  text-align: center;
}

/* ===================================================================
   テーブル：マイページ
   =================================================================== */

.mypage-info-table {
  width: 100%;
  border-collapse: separate;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.mypage-info-row {
  display: flex;
  align-items: stretch;
}

.mypage-info-row:first-child .mypage-info-label {
  border-top-left-radius: 8px;
}

/*20260225 end */

.mypage-info-row:last-child .mypage-info-value {
  border-bottom: 1px solid var(--color-gray-border);
}

/* Override table display */

.mypage-info-table tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mypage-info-table tr {
  display: flex;
  width: 100%;
}

.mypage-info-table th,
.mypage-info-table td {
  display: flex;
}

/* Info Label (Left Column) */

.mypage-info-label {
  display: flex;
  width: 320px;
  min-width: 80px;
  height: 60px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border: 0 solid var(--color-gray-border);
  background: var(--color-background-gray-light);
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  text-align: center;
}

/* Info Value (Right Column) */

.mypage-info-value {
  display: flex;
  min-width: 80px;
  height: 60px;
  padding: 16px;
  align-items: center;
  gap: 4px;
  flex: 1;
  border-top: 1px solid var(--color-gray-border);
  border-right: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mypage-info-value-with-button {
  justify-content: space-between;
  padding-right: 16px;
}

.mypage-info-text {
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Change Button */

.mypage-change-button {
  display: flex;
  min-width: 80px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 28px;
  border: 1px solid var(--color-primary);
  background: var( --color-background-primary);
  cursor: pointer;
  
  transition: all 0.2s;
  outline: none;
  flex-shrink: 0;
}

.mypage-change-button:hover {
  background: var(--color-background-blue-light);
}

.mypage-change-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mypage-change-button span {
  color: var(--color-primary);
  text-align: center;
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
}

/* ===================================================================
   テーブル：操作履歴
   =================================================================== */

.history-table-set {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* History Controls */

.history-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
  align-self: stretch;
}

.history-count {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-count-label {
  color: var(--color-text-primary);
  
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 100%;
}

.history-count-number {
  color: var(--color-text-primary);
  
  font-size: var(--font-xlarge);
  font-weight: 700;
  line-height: 100%;
}

/* History Tabs */

.history-tabs {
  display: flex;
  align-items: center;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.history-tab {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  cursor: pointer;
  
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  outline: none;
  transition: all 0.2s;
}

.history-tab:first-child {
  border-radius: 8px 0 0 8px;
}

.history-tab:last-child {
  border-radius: 0 8px 8px 0;
}

.history-tab:hover:not(.history-tab.active) {
  background: var(--color-background-secondary);
}

.history-tab.active {
  border-color: var(--color-primary);
  background: var(--color-background-blue-light);
  color:var(--color-primary-high);
}

/* History Table Wrapper */

.history-table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  overflow-x: auto;
}

/* History Table */

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--color-gray-border);
  overflow: hidden;
}

.history-table thead {
  background: var(--color-background-gray-light);
}

.history-table tbody tr {
  background: var( --color-background-primary);
}

/* Table Header */

.history-th {
  height: 60px;
  min-width: 80px;
  padding: 16px;
  text-align: center;
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-gray-light);
  border: 0;
  vertical-align: middle;
}

.history-th:first-child {
  border-radius: 8px 0 0 0;
}

.history-th:last-child {
  border-radius: 0 8px 0 0;
}

.history-th-date {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.history-th-operation {
  flex: 1;
  min-width: 200px;
}

.history-th-target {
  flex: 1;
  min-width: 200px;
}

.history-sort-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Override for proper table display */

.history-table th {
  display: table-cell;
}

.history-table td {
  display: table-cell;
}

/* Table Row */

.history-tr {
  border-top: 1px solid var(--color-gray-border);
}

/* Table Data */

.history-td {
  min-width: 80px;
  padding: 16px;
  border-top: 1px solid var(--color-gray-border);
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
}

.history-td-date {
  width: 200px;
}

.history-td-center {
  text-align: center !important;
}

/* ===================================================================
   テーブル：借入金と預貯金のバランス
   =================================================================== */

.report-table-wrapper {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-table-unit {
  text-align: right;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-boder-table);
  overflow: hidden;
}

.report-table-header-main {
  background: var(--color-primary);
  color:var(--color-background-primary);
  padding: 16px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.report-table-header-sub {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  padding: 16px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  white-space: nowrap;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.report-table-header-sub:last-child {
  border-right: 1px solid var(--color-gray-boder-table);
}

.report-td-label {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 16px;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
}

.report-td-value {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 16px;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
}

.report-td-label-s {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 8px 16px;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
}

.report-td-value-s {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 8px 16px;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
}

.table-fixed {
  table-layout: fixed;
}

.report-td-value-rb {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  padding: 16px;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-right: 1px solid var(--color-gray-boder-table);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.report-td-total {
  background: var(--color-background-table-blue-purple);
  color: var(--color-text-primary);
  padding: 16px;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

/* ===================================================================
   テーブル：売上債権等と支払債務のバランス
   =================================================================== */

.receivables-table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  width: 1000px;
  align-items: flex-end;
  gap: 8px;
}

.receivables-table-unit {
  text-align: right;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 8px;
}

.receivables-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-xsmall);
  overflow: hidden;
}

/* Receivables Info Area */

.receivables-info-area {
  display: flex;
  width: 100%;
  max-width: 807px;
  padding: 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.receivables-info-image {
  width: 100%;
  height: auto;
  align-self: stretch;
  border-radius: var(--radius-small);
}

.diagnostic-table-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* ===================================================================
   テーブル：総合診断
   =================================================================== */

.comprehensive-analysis-table-container {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.comprehensive-analysis-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-boder-table);
}

.comprehensive-th-none-small {
 width: 30px;
}

.comprehensive-th-none-large {
 width: 280px;
}

.comprehensive-th-main {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  padding: 12px 8px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
  border-right: 1px solid var(--color-gray-boder-table);
}

.comprehensive-th-highlight {
  background: var(--color-shiki-yellow-light);
  color: var(--color-text-primary);
  width: 102.5px;
  border-right: 1px solid var(--color-gray-boder-table);
  color: var(--color-text-primary);
  padding: 12px 8px;
  text-align: center;
  font-size: var(--font-report);
  font-weight: 700;
}

.comprehensive-th-color {
  background: var(--color-background-table-blue);
}

.comprehensive-td-category {
  text-align: center;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  padding: 16px 4px;
  border-top: 1px solid var(--color-gray-boder-table);
}

.comprehensive-td-category.action {
  background: var(--color-shiki-pink-light);
  writing-mode: vertical-rl;
}

.comprehensive-td-category.gard {
  background: var(--color-shiki-yellow-primary);
  writing-mode: vertical-rl;
}

.comprehensive-td-label {
  text-align: left;
  color: var(--color-text-primary);
  padding: 6px 8px;
  font-size: var(--font-report);
  font-weight: 700;
  border-left: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.comprehensive-td-label.left-no-border {
  border-left: 1px none;
}

.comprehensive-td-label-blue {
  text-align: left;
  color: var(--color-primary);
  padding: 6px 8px;
  font-size: var(--font-report);
  font-weight: 700;
  border: 1px solid var(--color-gray-boder-table);
}

.comprehensive-td-description {
  text-align: left;
  color: var(--color-text-primary);
}

.comprehensive-td-description-blue {
  text-align: left;
  color: var(--color-primary);
}

.comprehensive-td-value {
  text-align: center;
  color: var(--color-text-primary);
  padding: 7px 8px;
  font-size: var(--font-report);
  font-weight: 700;
  border-top: 1px solid var(--color-gray-boder-table);
}

.comprehensive-td-value.highlight {
  background: var(--color-shiki-yellow-light);
  color: var(--color-primary);
  font-size: var(--font-xxlarge);
}

.comprehensive-td-value.right {
  border-left: 1px solid var(--color-gray-boder-table);
  text-align: right;
}

/* ===================================================================
   テーブル：経営体力10段階タイプ
   =================================================================== */

.fitness-type-table-container {
  width: 952px;
  margin: 24px;
}

.fitness-type-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-boder-table);
  border-radius: 4px 4px 0 0;
}

.fitness-type-th {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--color-gray-boder-table);
  line-height: 100%;
}

.fitness-type-table tbody tr {
  border: 1px solid var(--color-gray-boder-table);
}

.fitness-type-table tbody td {
  border: 1px solid var(--color-gray-boder-table);
  padding: 4px 8px;
}

.fitness-type-category {
  width: 178px;
  background: var( --color-background-primary);
  text-align: center;
  vertical-align: middle;
}

.fitness-type-label {
  display: inline-flex;
  padding: 8px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-xsmall);
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
}

.fitness-type-label.active {
  color: var(--color-shiki-yellow-primary);
}

.fitness-type-label-ice-blue {
   background: var(--color-shiki-water) !important;
}

.fitness-type-rank {
  width: 74px;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  text-align: center;
  line-height: 100%;
}

.fitness-type-score {
  width: 100px;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  text-align: center;
  line-height: 100%;
}

.fitness-type-score.active {
   background: var(--color-shiki-water) !important;
}

.fitness-type-description {
  width: 280px;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  line-height: 100%;
  padding: 4px 8px;
}

.fitness-type-description.active {
   background: var(--color-shiki-water) !important;
}

.fitness-type-type {
  color: var(--color-primary);
  font-weight: 700;
  line-height: 150%;
}

.fitness-type-detail {
  color: var(--color-text-primary);
  font-weight: 400;
  line-height: 130%;  
}

.fitness-type-image {
  width: 298px;
  background: var( --color-background-primary);
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.fitness-type-image img {
  display: block;
  margin: 0 auto;
}

.drp-table-container {
  display: flex;
  width: 100%;
  width: 700px;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ===================================================================
   テーブル：キャッシュフローの推移
   =================================================================== */

/* Special Rows */

.cft-row-beginning td {
  height: 40px;
}

.cft-row-free td {
  height: 40px;
}

.cft-row-change td {
  height: 40px;
}

.cft-row-ending td {
  height: 40px;
}

/* Table Headers */

.cft-th-empty {
  width: 50px;
  padding: 8px 4px;
  background: var(--color-primary);
}

.cft-th-label {
  width: 200px;
  padding: 8px 4px;
  background: var(--color-primary);
}

.cft-th-period {
  padding: 8px 16px;
  text-align: center;
  color: var(--color-background-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cft-th-current {
  background: var(--color-shiki-yellow-light);
  color: var(--color-primary);
  font-size: var(--font-xxlarge);
  border-right: 8px solid var(--color-primary);
  border-top: 8px solid var(--color-primary);
  border-left: 8px solid var(--color-primary);
}

/* Vertical Section Labels */

.cft-section-vertical {
  width: 50px;
  padding: 16px 4px;
  text-align: center;
  color: var(--color-text-primary);
  
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
  vertical-align: middle;
  border-top: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0;
}

.cft-section-operating {
  background: var(--color-shiki-water);
}

.cft-section-investment {
  background: var(--color-shiki-yellow-primary);
}

.cft-section-financial {
  background: var(--color-shiki-green);
}

/* Table Data Cells - Empty */

.cft-td-empty {
  width: 50px;
  border: 1px solid var(--color-gray-boder-table);
  background: var(--color-background-primary);
}

/* Table Data Cells - Labels */

.cft-td-label-main {
  width: 200px;
  padding: 8px 16px;
  color: var(--color-text-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-table-blue);
  border: 1px solid var(--color-gray-boder-table);
}

.cft-td-label-blue {
  width: 200px;
  padding: 8px;
  color: var(--color-text-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-table-blue);
  border: 1px solid var(--color-gray-boder-table);
}

.cft-td-label-operating {
  background: var(--color-shiki-water);
  text-align: center;
}

.cft-td-label-investment {
  background: var(--color-shiki-yellow-primary);
  text-align: center;
}

.cft-td-label-section {
  padding: 8px 16px;
  color: var(--color-text-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.cft-td-label-free {
  background: var(--color-shiki-pink-light);
}

.cft-td-label-financial {
  background: var(--color-shiki-green);
  text-align: center;
}

.cft-td-label-change {
  background: var(--color-shiki-orange);
}

.cft-td-label-ending {
  color: var(--color-primary);
  background: var(--color-background-table-blue);
}

/* Table Data Cells - Values */

.cft-td-value {
  padding: 8px 16px;
  text-align: right;
  color: var(--color-text-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cft-td-data {
  padding: 4px 8px;
  text-align: right;
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
}

/* Current Column (今回) Highlighting */

.cft-td-current {
  background: var(--color-shiki-yellow-light) !important;
  color: var(--color-primary);
  border-right: 8px solid var(--color-primary);
  border-left: 8px solid var(--color-primary);
}

.cft-td-current.end {
  border-bottom: 8px solid var(--color-primary);
}

.cft-td-ending {
  color: var(--color-primary);
  font-size: var(--font-xxlarge);
}

.cft-td-operating {
  background: var(--color-shiki-water) !important;
}

.cft-td-investment {
  background: var(--color-shiki-yellow-primary) !important;
}

.cft-td-free {
  background: var(--color-shiki-pink-light) !important;
}

.cft-td-financial {
  background: var(--color-shiki-green) !important;
}

.cft-td-change {
  background: var(--color-shiki-orange) !important;
}

/* ===================================================================
   テーブル：業績の定期チェック
   =================================================================== */

.pc-table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

/* Table Container */

.pc-table-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

/* Table */

.pc-table {
  width: 100%;
  border-collapse: collapse;
  
  border: 1px solid var(--color-gray-boder-table);
}

/* Main Header */

.pc-table-header-main {
  padding: 12px;
  text-align: center;
  background: var(--color-primary-high);
  color:var(--color-background-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
  border: none;
}

/* Secondary Header (金融機関) */

.pc-table-header-secondary {
  padding: 12px;
  text-align: center;
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-right: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

/* Tertiary Headers (頻度, 確認方法, 観点) */

.pc-table-header-tertiary {
  padding: 12px 16px;
  text-align: left;
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-right: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

/* Empty Header Cell */

.pc-table-header-left {
  padding: 16px;
  background: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

/* Section Headers (1.業績, 2.資金繰り, 3.実態確認) */

.pc-table-section-header {
  padding: 16px;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.pc-table tbody tr:last-child .pc-table-section-header {
  border-bottom: 1px solid var(--color-gray-boder-table);
}

/* Category Cells (月次売上, 四半期/通期売上, etc.) */

.pc-table-category {
  width: 167px;
  padding: 16px;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 130%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-right: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  height: 68px;
}

.pc-table-tall {
  height: 86px;
}

.pc-table tbody tr:last-child .pc-table-category {
  border: 1px solid var(--color-gray-boder-table);
}

/* Regular Data Cells */

.pc-table-cell {
  min-width: 80px;
  padding: 16px;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 130%;
  border-top: 1px solid var(--color-gray-boder-table);
}

.pc-table-cell:last-child {
  border-right: 1px solid var(--color-gray-boder-table);
}

.pc-table tbody tr:last-child .pc-table-cell {
  border-bottom: 1px solid var(--color-gray-boder-table);
}

/* ===================================================================
   テーブル：金融機関構成の見直し
   =================================================================== */

.fi-table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

/* Table Container */

.fi-table-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0;
}

.fi-table-title {
  padding: 8px;
  gap: 4px;
  flex: 1 0 0;
  align-self: stretch;
  background: var(--color-primary-high);
  color:var(--color-background-primary);
  
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
  text-align: center;
  height: 52px;
}

/* Table */

.fi-table {
  width: 100%;
  border-collapse: collapse;  
  border: 1px solid var(--color-gray-boder-table);
}

/* Table Headers */

.fi-th-no {
  width: 40px;
  text-align: center;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  height: 124px;
}

.fi-th-eval {
  width: 156px;
  padding: 16px;
  text-align: center;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  flex: 1 0 0;
}

.fi-th-bank {
  width: 104px;
  min-width: 80px;
  padding: 16px;
  text-align: center;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.fi-th-condition {
  width: 130px;
  min-width: 80px;
  padding: 8px;
  text-align: center;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.fi-th-remarks {
  width: 140px;
  min-width: 80px;
  padding: 16px;
  text-align: center;
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-right: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

/* Table Data Cells */

.fi-td-no {
  width: 40px;
  max-width: 40px;
  padding: 8px;
  text-align: center;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
}

.fi-td-eval {
  padding: 8px;
  text-align: center;
  background: var( --color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
  vertical-align: middle;
}

.fi-eval-icon {
  display: flex;
  padding: 32px 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.fi-eval-label {
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

.fi-td-bank {
  width: 104px;
  min-width: 80px;
  padding: 16px;
  text-align: center;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
}

.fi-td-check {
  width: 130px;
  height: 50px;
  padding: 0 8px;
  text-align: center;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: 26px;
  font-weight: 400;
  line-height: 100%;
  border-top: 1px solid var(--color-gray-boder-table);
  vertical-align: middle;
}

.fi-td-remarks {
  width: 151px;
  min-width: 80px;
  padding: 16px;
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  border: 1px solid var(--color-gray-boder-table);
  white-space: pre;
}

/* Bottom borders for last row */

.fi-table tbody tr:last-child .fi-td-no,
.fi-table tbody tr:last-child .fi-td-eval,
.fi-table tbody tr:last-child .fi-td-bank,
.fi-table tbody tr:last-child .fi-td-check,
.fi-table tbody tr:last-child .fi-td-remarks {
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.fi-legend-text {
  color: var(--color-text-primary);  
  font-size: var(--font-medium);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
  padding: 8px 16px;
}

/* ===================================================================
   テーブル：費用の適正化計画策定
   =================================================================== */

.cop-table-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto;
}

/* Table */

.cop-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-boder-table);
  overflow: hidden;
}

.cop-table-text-right {
  text-align: right;
}

/* Table Headers */

.cop-th-main {
  background-color:var(--color-primary-high);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.cop-bottom-none {
  border-bottom: none !important;
}

.cop-top-border {
  border-top: 1px solid var(--color-gray-boder-table);
}

.cop-th-label {
  background-color: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  width: 320px;
}

.cop-th-period {
  background-color: var(--color-primary);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  min-width: 136px;
}

.cop-th-avg,
.cop-th-plan {
  background-color: var(--color-background-table-red);
  color:var(--color-background-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  min-width: 136px;
}

/* Table Data Cells */

.cop-td-category {
  background-color: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  padding: 16px 8px;
  border-right: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  width: 320px;
}

.cop-td-subcategory {
  background-color: var(--color-background-table-blue);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  padding: 16px 8px;
  text-align: right;
  border-right: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  width: 160px;
}

.cop-td-data {
  background-color:var(--color-background-primary);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 12px 8px;
  text-align: right;
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.cop-td-avg-data,
.cop-td-plan-data {
  background-color: var(--color-red-thin);
  color: var(--color-text-primary);
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 12px 8px;
  text-align: right;
  border-bottom: 1px solid var(--color-gray-boder-table);
}

/* ===================================================================
   テーブル：キャッシュフロー
   =================================================================== */

.cashflow-initial-row {
  display: flex;
  align-items: center;
  gap: 54px;
  padding-left: 56px;
  justify-content: space-between;
  width: 100%;
}

.cashflow-initial-right {
  display: flex;
  width: 376px;
  align-self: stretch;
  justify-content: space-between;
  align-items: center;

}

.cashflow-initial-eria{
  width: 210x;
  display: flex;
}

.cashflow-initial-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-text-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
}

.cashflow-initial{
  width: 544px;
  display: flex;
  justify-content: flex-end; /* 子要素を右寄せ */
}

.cashflow-initial-inner {
   border: 1px solid var(--color-gray-boder-table);
}

.cashflow-initial-value {
  display: flex;
  width: 160px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-primary);
  text-align: right;
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 4px 8px;
  background: var(--color-shiki-yellow-light);
  border-radius: 0;
}

.cashflow-unit-label {
  flex: 1 0 0;
  color: var(--color-text-primary);
  text-align: center;
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
}

/* Cash Flow Table Container */

.cashflow-table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

/* Cash Flow Table */

.cashflow-table {
  width: 1000px;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-boder-table);
  overflow: hidden;
}

/* Table Header */

.cashflow-th-section {
  width: 50px;
  padding: 4px 8px;
  background: var(--color-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-th-label {
  width: 160px;
  padding: 4px 8px;
  background: var(--color-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-th-change {
  width: 50px;
  padding: 4px 8px;
  background: var(--color-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-th-main {
  padding: 12px;
  text-align: center;
  color: var(--color-background-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-th-description {
  width: 210px;
  padding: 4px 8px;
  background: var(--color-primary);
  border: 1px solid var(--color-gray-boder-table);
}

/* Section Cells (Vertical Labels) */

.cashflow-section-cell {
  width: 50px;
  padding: 16px 4px;
  text-align: center;
  color: var(--color-text-primary);
  font-size: var(--font-xxlarge);
  font-weight: 700;
  line-height: 100%;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-gray-boder-table);
}

.cashflow-section-operating {
  background: var(--color-shiki-water);
}

.cashflow-section-investment {
  background: var(--color-shiki-yellow-primary);
}

.cashflow-section-financial {
  background: var(--color-shiki-green);
}

/* Label Cells */

.cashflow-label-cell {
  width: 160px;
  padding: 6px 8px;
  color: var(--color-text-primary);  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-label-cell.total {
  border-left: none;
}

.cashflow-label-blue {
  background: var(--color-background-table-blue);
}

.cashflow-label-operating {
  background: var(--color-shiki-water);
}

.cashflow-label-investment {
  background: var(--color-shiki-yellow-primary);
}

.cashflow-label-free {
  background: var(--color-shiki-pink-light);
  padding: 6px 16px;
}

.cashflow-label-financial {
  background: var(--color-shiki-green);
}

.cashflow-label-final {
  background: var(--color-shiki-orange);
  padding: 6px 16px;
}

/* Change Cells */

.cashflow-change-cell {
  width: 50px;
  padding: 4px 8px;
  text-align: center;
  color: var(--color-text-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-change-operating {
  background: var(--color-shiki-water);
}

.cashflow-change-investment {
  background: var(--color-shiki-yellow-primary);
}

.cashflow-change-free {
  background: var(--color-shiki-pink-light);
}

.cashflow-change-financial {
  background: var(--color-shiki-green);
}

.cashflow-change-final {
  background: var(--color-shiki-orange);
}

/* Data Cells */

.cashflow-data-cell {
  padding: 4px 12px 4px 4px;
  text-align: right;
  color: var(--color-text-primary);  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
}

/* Data Cells */

.cashflow-data-cell-sub {
  padding: 4px 4px;
  text-align: right;
  color: var(--color-text-primary);  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-data-cell-sub-inner {
 display: inline-block;
 width: 150px;
 text-align: right;
  padding: 0px 2px; 
}

.cashflow-data-operating {
  background: var(--color-shiki-water);
}

.cashflow-data-investment {
  background: var(--color-shiki-yellow-primary);
}

.cashflow-data-free {
  background: var(--color-shiki-pink-light);
}

.cashflow-data-financial {
  background: var(--color-shiki-green);
}

.cashflow-data-final {
  background: var(--color-shiki-orange);
}

/* Description Cells */

.cashflow-desc-cell {
  width: 210px;
  padding: 4px 4px;
  color: var(--color-text-primary);
  font-size: var(--font-large);
  font-weight: 700;
  line-height: 150%;
  background: var(--color-background-primary);
  border: 1px solid var(--color-gray-boder-table);
  vertical-align: middle;
}

.cashflow-desc-cell.top {
  vertical-align: top;
}

.cashflow-desc-cell-empty {
  width: 210px;
  border: 1px solid var(--color-gray-boder-table);
}

.cashflow-desc-operating {
  background: var(--color-shiki-water);
  font-size: var(--font-medium);
}

.cashflow-desc-investment {
  background: var(--color-shiki-yellow-primary);
  font-size: var(--font-medium);
}

.cashflow-desc-free {
  background: var(--color-shiki-pink-light);
  font-size: var(--font-medium);
}

.cashflow-desc-financial {
  background: var(--color-shiki-green);
  font-size: var(--font-medium);
}

.cashflow-desc-final {
  background: var(--color-shiki-orange);
  font-size: var(--font-medium);
}

/* Note Text */

.cashflow-note {
  width: 1000px;
  margin-top: 4px;
}

.cashflow-note p {
  color: var(--color-text-primary);
  
  font-size: var(--font-medium);
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}

/* Final Current Assets Row */

.cashflow-final-assets-row {
  display: flex;
  width: 1000px;
  align-items: center;
  gap: 54px;
  margin-top: 8px;
}

.cashflow-final-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 0;
  color: var(--color-primary);
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
}

.cashflow-final-value {
  display: flex;
  width: 160px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  text-align: right;
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  padding: 4px 8px;
  border: 3px solid var(--color-primary);
  background: var(--color-shiki-yellow-light);
  border-radius: 0;
}

/* Total Rows */

.cashflow-total-row td {
  border-top: 1px solid var(--color-gray-boder-table);
}

.cashflow-transition-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 1000px;
}

/* Unit Label */

.cashflow-transition-unit {
  color: var(--color-text-primary);
  text-align: right;
  
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
}

/* Main Table */

.cashflow-transition-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-boder-table);
  overflow: hidden;
}

/* ===================================================================
   テーブル：決算の推移表
   =================================================================== */

.financial-table-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  max-width: 1000px;
  position: relative;
}

.financial-table-unit {
  color: var(--color-text-primary);
  text-align: right;
  font-size: var(--font-report);
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 4px;
}

/* Financial Table Wrapper */

.financial-table-wrapper {
  width: 100%;
  overflow: hidden;
  background: var( --color-background-primary);
}

.financial-table-header-none-small {
  background: var(--color-primary-high);
  width:30px;
}

.financial-table-header-none-middle {
  background: var(--color-primary-high);
  width: 140px;
}

.financial-table-header-main {
  background: var(--color-primary-high);
  color:var(--color-background-primary);
  min-width: 170px;
  width: 170px;
  height: 100px;
  font-size: var(--font-report);
}

.financial-table-header-period {
  background: var(--color-primary);
  color:var(--color-background-primary);
  height: 50px;
  border-left: 1px solid var(--color-gray-boder-table);
  font-size: var(--font-report);
}

.financial-table-header-current {
  background: var(--color-shiki-yellow-light);
  color: var(--color-primary);
  font-size: var(--font-xxlarge);
  border-left: 8px solid var(--color-primary) !important;
  border-right: 8px solid var(--color-primary) !important;
}

.blue-border-left {
  border-left: 8px solid var(--color-primary) !important;
}

.blue-border-right {
  border-right: 8px solid var(--color-primary) !important;
}

.blue-border-bottom {
  border-bottom: 8px solid var(--color-primary) !important;
}

.blue-border-top {
  border-top: 8px solid var(--color-primary) !important;
}

.financial-table-header-average {
  background: var(--color-primary);
  color:var(--color-background-primary);
  width: 118px;
  font-size: var(--font-report);
}

.financial-table-subheader {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  padding: 4px 0 4px 8px;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  font-size: var(--font-report);
}

.financial-table-subheader-current {
  background: var(--color-shiki-yellow-light) !important;
}

.financial-table-subheader-row {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}

.financial-table-subheader-row span {
  flex: 1;
  text-align: center;
}

/* Table Body Cells */

.financial-label {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  text-align: left;
  min-width: 170px;
  padding: 8px 6px;
  font-weight: 700;
  border-top: 1px solid var(--color-gray-boder-table);
  border-right: 1px solid var(--color-gray-boder-table);
  font-size: var(--font-report);
}

.financial-label-sub {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  text-align: left;
  padding-left: 8px;
  font-weight: 700;
  border-top: 1px solid var(--color-gray-boder-table);
  border-left: 1px solid var(--color-gray-boder-table);
  border-bottom: 1px solid var(--color-gray-boder-table);
  font-size: var(--font-report);
}

.financial-label-fixed {
  background: var(--color-background-table-blue);
  color: var(--color-text-primary);
  text-align: center;
  min-width: 30px;
  width: 30px;
  padding: 16px 4px;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}

.financial-label-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0;
  font-size: var(--font-report);
  line-height: 30px;
}

.financial-amount {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  text-align: right;
  white-space: pre-line;
  line-height: 110%;
  font-weight: 700;
  padding: 8px 16px 8px 8px;
  border-top: 1px solid var(--color-gray-boder-table);
  white-space: pre;
  font-size: var(--font-report);
}

.financial-amount-inner {
 display: inline-block;
 width: 100%; 
 text-align: right;
 padding: 0px 6px;
}

.financial-change {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  text-align: right;
  font-weight: 700;
  padding: 8px;
  border-top: 1px solid var(--color-gray-boder-table);
  font-size: var(--font-report);
}

.financial-amount-current {
  color: var(--color-primary);
  /* border-left: 2px solid var(--color-primary); */
}

.financial-change-current {
  color: var(--color-primary);
  /* border-left: 2px solid var(--color-primary); */
}

.financial-average {
  background: var( --color-background-primary);
  color: var(--color-text-primary);
  text-align: right;
}

/* Highlighted Rows */

.financial-row-highlight .financial-label,
.financial-row-highlight .financial-label-sub,
.financial-row-highlight .financial-amount,
.financial-row-highlight .financial-change,
.financial-row-highlight .financial-amount-current,
.financial-row-highlight .financial-change-current,
.financial-row-highlight .financial-average {
  background: var(--color-shiki-yellow-light);
}

/* Special Rows (e.g., ratios) */

.financial-row-special .financial-label,
.financial-row-special .financial-label-sub,
.financial-row-special .financial-amount,
.financial-row-special .financial-change,
.financial-row-special .financial-average {
  background: var(--color-background-table-blue-purple);
}

.financial-row-special .financial-amount-current,
.financial-row-special .financial-change-current {
  background: var(--color-background-table-blue-purple);
  /* border-left: 2px solid var(--color-primary); */
}

.financial-row-special-border {
  border-top: 3px solid var(--color-gray-boder-table);
}

.financial-label-sub.boder-top-none {
  border-top: none;
}

.financial-notes {
  display: flex;
  width: 100%;
  max-width: 1000px;
  margin-top: 16px;
  color: var(--color-text-primary);
  font-size: var(--font-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  margin: 0;
}

.sales-borrowings-td-red {
  background: var(--color-background-table-red-thin);
}