/*!
 * EventCalendar v5.15.0
 * https://github.com/vkurko/calendar
 */
.ec {
  color-scheme: light;
  /* Main colors */
  --ec-color-400: oklch(70.8% 0 0);
  --ec-color-300: oklch(87% 0 0);
  --ec-color-200: oklch(92.2% 0 0);
  --ec-color-100: oklch(97% 0 0);
  --ec-color-50: oklch(98.5% 0 0);
  /* General props */
  --ec-bg-color: #fff;
  --ec-text-color: currentcolor;
  --ec-border-color: var(--ec-color-300);
  /* Buttons */
  --ec-button-bg-color: var(--ec-bg-color);
  --ec-button-border-color: var(--ec-border-color);
  --ec-button-text-color: var(--ec-text-color);
  --ec-button-active-bg-color: var(--ec-color-200);
  --ec-button-active-border-color: var(--ec-color-400);
  --ec-button-active-text-color: var(--ec-button-text-color);
  /* Days */
  --ec-today-bg-color: oklch(98.7% 0.026 102.212);
  --ec-highlight-color: oklch(98.4% 0.019 200.873);
  /* Events */
  --ec-event-bg-color: oklch(70.7% 0.165 254.624);
  --ec-event-text-color: #fff;
  --ec-bg-event-color: var(--ec-color-300);
  --ec-bg-event-opacity: 0.3;
  --ec-event-col-gap: .375rem;
  /* Now Indicator */
  --ec-now-indicator-color: oklch(63.7% 0.237 25.331);
  /* Popup */
  --ec-popup-bg-color: var(--ec-bg-color);
  .ec-dark & {
    color-scheme: dark;
    --ec-color-400: oklch(43.9% 0 0);
    --ec-color-300: oklch(37.1% 0 0);
    --ec-color-200: oklch(26.9% 0 0);
    --ec-color-100: oklch(20.5% 0 0);
    --ec-color-50: oklch(14.5% 0 0);
    --ec-bg-color: var(--ec-color-100);
    --ec-today-bg-color: oklch(28.6% 0.066 53.813);
    --ec-highlight-color: oklch(30.2% 0.056 229.695);
    --ec-bg-event-opacity: 0.5;
  }
}
@media (prefers-color-scheme: dark) {
  .ec {
    .ec-auto-dark & {
      color-scheme: dark;
      --ec-color-400: oklch(43.9% 0 0);
      --ec-color-300: oklch(37.1% 0 0);
      --ec-color-200: oklch(26.9% 0 0);
      --ec-color-100: oklch(20.5% 0 0);
      --ec-color-50: oklch(14.5% 0 0);
      --ec-bg-color: var(--ec-color-100);
      --ec-today-bg-color: oklch(28.6% 0.066 53.813);
      --ec-highlight-color: oklch(30.2% 0.056 229.695);
      --ec-bg-event-opacity: 0.5;
    }
  }
}

.ec-day {
  --ec-day-bg-color: var(--ec-bg-color);
  background-color: var(--ec-day-bg-color);
  border: 1px solid var(--ec-border-color);
  border-block-start: none;
  border-inline-start: none;
  &.ec-today {
    --ec-day-bg-color: var(--ec-today-bg-color);
  }
  &.ec-highlight {
    --ec-day-bg-color: var(--ec-highlight-color);
  }
  .ec-time-grid .ec-body & {
    background-image: linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px), linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
    background-size: 100% 100%, 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)), 2px 100%, 100% var(--ec-slot-height);
  }
  .ec-timeline:not(.ec-month-view, .ec-year-view) .ec-body & {
    --ec-last-line-color: transparent;
    --ec-direction: to left;
    [dir=rtl] & {
      --ec-direction: to right;
    }
    background-image: linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px), linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
    background-size: 100% 100%, calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%, 100% 2px, var(--ec-slot-width) 100%;
    border-inline: none;
    &.ec-no-ieb {
      --ec-last-line-color: var(--ec-day-bg-color);
    }
  }
  .ec-day-grid & {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-block-size: 5em;
  }
  .ec-day-grid .ec-uniform & {
    min-block-size: auto;
  }
  .ec-list & {
    border-inline: none;
    &:last-child {
      border: none;
    }
  }
  &.ec-no-ieb {
    border-inline-end: none;
  }
  &.ec-no-beb {
    border-block-end: none;
  }
}

.ec-day-head {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  .ec-day-grid.ec-month-view & {
    padding: 0.375rem;
  }
  .ec-day.ec-other-month & time {
    opacity: 0.3;
  }
  .ec-list & {
    background-color: var(--ec-day-bg-color);
    border-block-end: 1px solid var(--ec-border-color);
    flex-direction: unset;
    margin: 0 0 -1px;
    padding: 0.5em 1.5em;
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
  }
}

.ec-day-foot {
  padding: 0.18rem;
  font-size: 0.85em;
  a {
    cursor: pointer;
  }
}

.ec-disabled {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-color: var(--ec-bg-event-color);
    opacity: var(--ec-bg-event-opacity);
  }
}

/* Toolbar */
.ec-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 1em;
  > * {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
  }
}

.ec-title {
  margin: 0;
}

.ec-button {
  background-color: var(--ec-button-bg-color);
  border: 1px solid var(--ec-button-border-color);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  &:not(:disabled) {
    color: var(--ec-button-text-color);
    cursor: pointer;
  }
  &:not(:disabled):hover,
  &.ec-active {
    background-color: var(--ec-button-active-bg-color);
    border-color: var(--ec-button-active-border-color);
    color: var(--ec-button-active-text-color);
    z-index: 1; /* make all borders visible */
  }
}

.ec-button-group {
  display: inline-flex;
  vertical-align: top;
  .ec-button:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: -1px;
  }
  .ec-button:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
}

.ec-icon {
  display: inline-block;
  inline-size: 1em;
  &.ec-prev:after,
  &.ec-next:after {
    content: "";
    position: relative;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-block-start: 2px solid currentcolor;
    border-inline-end: 2px solid currentcolor;
    display: inline-block;
  }
  &.ec-prev:after {
    inset-inline-start: 3px;
    rotate: -135deg;
  }
  [dir=rtl] &.ec-prev:after {
    rotate: 135deg;
  }
  &.ec-next:after {
    inset-inline-start: -3px;
    rotate: 45deg;
  }
  [dir=rtl] &.ec-next:after {
    rotate: -45deg;
  }
}

.ec-sidebar {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background-color: var(--ec-bg-color);
  border-inline-end: 1px solid var(--ec-border-color);
  text-align: end;
  overflow: clip;
  .ec-header & {
    border-block-end: 1px solid var(--ec-border-color);
    padding-block: 0.375rem;
  }
  .ec-time-grid & {
    padding-inline: 0.75rem;
  }
  .ec-time-grid .ec-body & {
    --ec-direction: to left;
    [dir=rtl] & {
      --ec-direction: to right;
    }
    background-image: linear-gradient(var(--ec-direction), transparent 0.375rem, var(--ec-bg-color) 0.375rem), linear-gradient(to top, var(--ec-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px), linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)), 2px 100%, 100% var(--ec-slot-height);
  }
  .ec-timeline .ec-body & {
    grid-area: 1/1/-1/2;
    display: grid;
    grid-template-rows: subgrid;
  }
}

.ec-row-head {
  display: flex;
  border-block-end: 1px solid var(--ec-border-color);
  padding: 0.375em 0.75rem;
  > span {
    min-block-size: 1.5em;
  }
  &:last-child {
    border: none;
  }
}

.ec-expander {
  inline-size: 1.25em;
  margin-inline-end: 0.25em;
  margin-block-start: -1px;
  .ec-button {
    line-height: normal;
    padding: 0;
    aspect-ratio: 1;
    block-size: 1.25em;
  }
}

.ec-slot {
  white-space: nowrap;
  .ec-time-grid & {
    block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
    position: relative;
    inset-block-start: -0.5lh;
  }
  .ec-timeline & {
    grid-column: span var(--ec-slot-label-periodicity);
    font-size: 0.95em;
    padding: 0.18rem 0;
    overflow: clip;
    text-overflow: ellipsis;
  }
}

.ec-slots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--ec-slot-width);
  text-align: center;
  --ec-day-bg-color: var(--ec-bg-color);
  background-color: var(--ec-day-bg-color);
  border-block-end: 1px solid var(--ec-border-color);
  &.ec-today {
    --ec-day-bg-color: var(--ec-today-bg-color);
  }
  &.ec-highlight {
    --ec-day-bg-color: var(--ec-highlight-color);
  }
  --ec-last-line-color: transparent;
  --ec-direction: to left;
  [dir=rtl] & {
    --ec-direction: to right;
  }
  background-image: linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
  background-size: 100% 100%, calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%;
  &:last-child {
    --ec-last-line-color: var(--ec-day-bg-color);
  }
}

.ec-events {
  grid-area: 1/2/-1/-1;
  display: grid;
  grid-template: subgrid/subgrid;
  isolation: isolate;
  pointer-events: none;
  .ec-day-grid & {
    grid-column-start: 1;
  }
}

.ec-event {
  display: flex;
  position: relative;
  padding: 2px;
  color: var(--ec-event-text-color);
  box-sizing: border-box;
  box-shadow: 0 0 1px 0 var(--ec-border-color);
  background-color: var(--ec-event-bg-color);
  border-radius: 3px;
  font-size: 0.85em;
  line-height: 1.5;
  z-index: 1;
  pointer-events: all;
  inline-size: calc(100% - var(--ec-event-col-gap));
  .ec-time-grid & {
    grid-row: 1;
  }
  .ec-day-grid &,
  .ec-all-day &,
  .ec-timeline & {
    block-size: max-content;
    margin-block-end: var(--ec-event-col-gap);
    &.ec-start-clipped {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-start-end-radius: 3px;
      border-end-end-radius: 3px;
    }
    &.ec-end-clipped {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
      border-start-start-radius: 3px;
      border-end-start-radius: 3px;
    }
  }
  .ec-list & {
    flex-direction: row;
    padding: 0.5em 1.5em;
    color: inherit;
    background-color: var(--ec-day-bg-color);
    border-radius: 0;
  }
  &.ec-preview {
    z-index: 1000;
    user-select: none;
    opacity: 0.8;
  }
  &.ec-pointer {
    color: inherit;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    box-shadow: none;
  }
  &.ec-start-clipped {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  &.ec-end-clipped {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  &.ec-start-clipped.ec-end-clipped {
    border-radius: 0;
  }
}

.ec-bg-event {
  grid-row: 1;
  position: relative;
  background-color: var(--ec-bg-event-color);
  opacity: var(--ec-bg-event-opacity);
}

.ec-draggable {
  cursor: pointer;
  user-select: none;
}

.ec-ghost {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.ec-event-body {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  .ec-day-grid &,
  .ec-all-day &,
  .ec-timeline & {
    flex-direction: row;
  }
}

.ec-event-tag {
  inline-size: 4px;
  border-radius: 2px;
  margin-inline-end: 8px;
}

.ec-event-time {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 1px 0;
  flex-shrink: 0;
  max-block-size: 100%;
  .ec-day-grid &,
  .ec-timeline & {
    margin: 0 3px 0 0;
    max-inline-size: 100%;
    text-overflow: ellipsis;
  }
}

.ec-event-title {
  overflow: hidden;
  margin: 0;
  font-weight: inherit;
  .ec-time-grid & {
    position: sticky;
    inset-block-start: var(--ec-header-height);
  }
  .ec-day-grid &,
  .ec-all-day &,
  .ec-timeline & {
    min-block-size: 1.5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: sticky;
    inset-inline-start: calc(var(--ec-sidebar-width) + 0.18em);
  }
  .ec-list & {
    font-size: 1rem;
  }
}

.ec-resizer {
  position: absolute;
  user-select: none;
  .ec-time-grid .ec-body & {
    inset: auto 0 0 0;
    block-size: 50%;
    max-block-size: 8px;
    cursor: ns-resize;
    &.ec-start {
      inset: 0 0 auto 0;
    }
  }
  .ec-day-grid &,
  .ec-all-day &,
  .ec-timeline & {
    inset: 0 0 0 auto;
    inline-size: 50%;
    max-inline-size: 8px;
    cursor: ew-resize;
    &.ec-start {
      inset: 0 auto 0 0;
    }
  }
}

.ec-dragging, .ec-dragging * {
  cursor: pointer !important;
}

.ec-resizing-y, .ec-resizing-y * {
  cursor: ns-resize !important;
}

.ec-resizing-x, .ec-resizing-x * {
  cursor: ew-resize !important;
}

.ec-not-allowed, .ec-not-allowed * {
  cursor: not-allowed !important;
}

.ec-no-events {
  text-align: center;
  padding: 5em 0;
  background-color: var(--ec-bg-color);
}

.ec-now-indicator {
  grid-row: 2;
  position: relative;
  pointer-events: none;
  will-change: inset;
  .ec-time-grid & {
    inline-size: 100%;
    block-size: 0;
    border-block-start: var(--ec-now-indicator-color) solid 2px;
  }
  .ec-timeline & {
    inline-size: 0;
    border-inline-start: var(--ec-now-indicator-color) solid 2px;
    &:before {
      inset-block-start: calc(var(--ec-header-height) - 6.5px);
      z-index: 2;
    }
  }
  &:before {
    background: var(--ec-now-indicator-color);
    border-radius: 50%;
    content: "";
    display: block;
    block-size: 12px;
    inline-size: 12px;
    margin-block-start: -7px;
    margin-inline-start: -7px;
    position: sticky;
    inset-inline-start: calc(var(--ec-sidebar-width) - 6.5px);
    z-index: 1;
  }
}

.ec-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  block-size: max-content;
  inline-size: 125%;
  min-block-size: 8em;
  min-inline-size: 12em;
  padding: 0.375rem 0.75rem 0.75rem;
  background-color: var(--ec-popup-bg-color);
  border: 1px solid var(--ec-border-color);
  border-radius: 0.25rem;
  box-shadow: var(--ec-color-300) 0 10px 15px -3px, var(--ec-color-300) 0 4px 6px -4px;
  .ec-day-head {
    flex-direction: row;
    padding-inline: 0;
    a {
      cursor: pointer;
      font-size: 1.5em;
      line-height: 0.8;
    }
  }
  .ec-events {
    --ec-event-col-gap: 0;
    display: block;
    overflow-y: auto;
    pointer-events: auto;
  }
}

.ec-custom-scrollbars {
  .ec-main {
    &::-webkit-scrollbar {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      border: 4px solid transparent;
      box-shadow: none;
      background-color: var(--ec-border-color);
      background-clip: padding-box;
      border-radius: 8px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background-color: var(--ec-color-400);
    }
  }
}

.ec {
  display: flex;
  flex-direction: column;
}

.ec-main {
  display: grid;
  border: 1px solid var(--ec-border-color);
  overflow: auto;
  /*scrollbar-width: thin;*/
  .ec-time-grid & {
    grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
    grid-template-rows: repeat(2, max-content);
  }
  .ec-day-grid & {
    --ec-row-height: auto;
    grid-template-columns: repeat(var(--ec-grid-cols), minmax(0, 1fr));
    grid-template-rows: max-content repeat(var(--ec-grid-rows), var(--ec-row-height));
    &.ec-uniform {
      --ec-row-height: minmax(0, 1fr);
      overflow: hidden;
      flex-grow: 1;
    }
  }
  .ec-timeline & {
    grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
    grid-template-rows: max-content var(--ec-grid-rows);
    flex-grow: 1;
  }
}

.ec-header {
  grid-area: 1/1/2/-1;
  display: grid;
  grid-template-columns: subgrid;
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.ec-grid {
  grid-area: 1/1/-1/-1;
  display: grid;
  grid-template-columns: subgrid;
  .ec-body & {
    grid-template-rows: subgrid;
  }
  .ec-time-grid &,
  .ec-timeline & {
    grid-column-start: 2;
  }
}

.ec-all-day {
  grid-area: 2/1/auto/-1;
  display: grid;
  grid-template-columns: subgrid;
  min-block-size: var(--ec-slot-height);
}

.ec-col-group {
  grid-column: span var(--ec-col-group-span);
}

.ec-col-group,
.ec-col-head {
  text-align: center;
  padding: 0.375rem 0.18em;
  background-color: var(--ec-bg-color);
  border: 1px solid var(--ec-border-color);
  border-block-start: none;
  border-inline-start: none;
  overflow: clip;
  text-overflow: ellipsis;
  &.ec-today {
    background-color: var(--ec-today-bg-color);
  }
  &.ec-highlight {
    background-color: var(--ec-highlight-color);
  }
}

.ec-col-group:nth-last-child(1 of .ec-col-group),
.ec-col-head:nth-last-child(1 of .ec-col-head) {
  border-inline-end: none;
}

.ec-col-group > *,
.ec-timeline .ec-col-head > * {
  position: sticky;
  inset-inline-start: calc(var(--ec-sidebar-width) + 0.18em);
}

.ec-body {
  grid-area: 2/1/-1/-1;
  display: grid;
  grid-template: subgrid/subgrid;
}

.ec-hidden {
  visibility: hidden;
}

/*$vite$:1*/
.tal {
  text-align: left !important;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.fwb {
  font-weight: bold !important;
}

.fwn {
  font-weight: normal !important;
}

.mgy10px {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.mgt0 {
  margin-top: 0 !important;
}

.mgt5px {
  margin-top: 5px !important;
}

.mgt10px {
  margin-top: 10px !important;
}

.mgt20px {
  margin-top: 20px !important;
}

.mgb3px {
  margin-bottom: 3px !important;
}

.mgb5px {
  margin-bottom: 5px !important;
}

.mgb10px {
  margin-bottom: 10px !important;
}

.mgb20px {
  margin-bottom: 20px !important;
}

.mgb30px {
  margin-bottom: 30px !important;
}

.mgb40px {
  margin-bottom: 40px !important;
}

.mgb100px {
  margin-bottom: 100px !important;
}

.mgb2p {
  margin-bottom: 2%;
}

.mgr-5p {
  margin-right: 0.5%;
}

.mgr1p {
  margin-right: 1%;
}

.mgr1p {
  margin-right: 1%;
}

.mgr3px {
  margin-right: 3px !important;
}

.mgr5px {
  margin-right: 5px !important;
}

.mgr10px {
  margin-right: 10px !important;
}

.mgb1em {
  margin-bottom: 1em !important;
}

.mgb0 {
  margin-bottom: 0 !important;
}

.mgl2p {
  margin-left: 2% !important;
}

.mgl10px {
  margin-left: 10px !important;
}

.mgl20px {
  margin-left: 20px !important;
}

.pd0 {
  padding: 0 !important;
}

.pd8px {
  padding: 8px !important;
}

.pd10px {
  padding: 10px !important;
}

.pd15px {
  padding: 15px !important;
}

.pd20px {
  padding: 20px !important;
}

.pdy-5em {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

.pdy3px {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.pdy5px {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.pdx-5em {
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}

.pdx1em {
  padding-left: 1em !important;
  padding-right: 1em !important;
}

.pdx0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pdx10px {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.pdx20px {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.pdl0 {
  padding-left: 0 !important;
}

.pdl2px {
  padding-left: 2px !important;
}

.pdl15px {
  padding-left: 15px !important;
}

.pdt20p {
  padding-top: 20% !important;
}

.pdt30p {
  padding-top: 30% !important;
}

.pdb0 {
  padding-bottom: 0 !important;
}

.pdb1em {
  padding-bottom: 1em !important;
}

.pdb10px {
  padding-bottom: 10px !important;
}

.pdb20px {
  padding-bottom: 20px !important;
}

.bdrNon {
  border: none !important;
}

.border_bottom_none {
  border-bottom: none !important;
}

.dispNonImp {
  display: none !important;
}

.dispBlk {
  display: block !important;
}

.spBlock,
.spInlineBlock {
  display: none !important;
}

.mainColor {
  color: #6896cf !important;
}

.colorWhite {
  color: #fff !important;
}

.bgGrey {
  background-color: #ddd !important;
}

.bgWhite {
  background-color: #fff !important;
}

.pd0 {
  padding: 0 !important;
}

.op0 {
  opacity: 0 !important;
}

.wd0 {
  width: 0 !important;
}

.wd30p {
  width: 30% !important;
}

.wd45p {
  width: 45% !important;
}

.wd46p {
  width: 46% !important;
}

.wd50px {
  width: 50px !important;
}

.wd134px {
  width: 134px !important;
}

.wd200px {
  width: 200px !important;
}

.wd380px {
  width: 380px !important;
}

.wd1200px {
  width: 1200px !important;
}

.wd1400px {
  width: 1400px !important;
}

.wd1500px {
  width: 1500px !important;
}

.wd1600px {
  width: 1600px !important;
}

.wd2000px {
  width: 2000px !important;
}

.wd2500px {
  width: 2500px !important;
}

.wd2800px {
  width: 2800px !important;
}

.wd3500px {
  width: 3500px !important;
}

.wd4000px {
  width: 4000px !important;
}

.wd6000px {
  width: 6000px !important;
}

.wd8000px {
  width: 8000px !important;
}

.wd100p-505px {
  width: calc(100% - 505px);
}

.lt540px {
  left: 540px;
}

.minWdAuto {
  min-width: auto !important;
}

.fz10px {
  font-size: 10px !important;
}

.fz11px {
  font-size: 11px !important;
}

.fz12px {
  font-size: 12px !important;
}

.fz13px {
  font-size: 13px !important;
}

.fz18px {
  font-size: 18px !important;
}

.fz20px {
  font-size: 20px !important;
}

.fce28e86 {
  color: #e28e86 !important;
}

.fcfff6f6 {
  color: #fff6f6 !important;
}

.fc737373 {
  color: #737373 !important;
}

.fc000 {
  color: #000 !important;
}

.fcf853446 {
  color: #f85344 !important;
}

.fcf62f1d {
  color: #f62f1d !important;
}

.fwb {
  font-weight: bold !important;
}

.bdrbNon {
  border-bottom: none !important;
}

.bgf9fafb {
  background: #f9fafb;
}

.bgfbb0b0 {
  background: #fbb0b0 !important;
}

.bgffeaea {
  background: #ffeaea !important;
}

.whiteSpaceNowrap {
  white-space: nowrap !important;
}

.overflowVisible {
  overflow: visible !important;
}

p,
td {
  word-break: break-all;
}

@media screen and (max-width: 1199px) {
  .scroll {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 1199px) and (max-width: 767px) {
  .pcBlock {
    display: none;
  }
  .spFlexCancel {
    display: block;
  }
  .spMgt10px {
    margin-top: 10px !important;
  }
  .spMgt20px {
    margin-top: 20px !important;
  }
  .spMgb10px {
    margin-bottom: 10px !important;
  }
  .spDispNon {
    display: none !important;
  }
  .spWd20p {
    width: 20% !important;
  }
  .spWd30p {
    width: 30% !important;
  }
  .spWd45p {
    width: 45% !important;
  }
  .spWd100p {
    width: 100% !important;
  }
  .spWd650px {
    width: 650px !important;
  }
  .spWd900px {
    width: 900px !important;
  }
  .spWd1000px {
    width: 1000px !important;
  }
  .spHt250px {
    height: 250px;
  }
  .scrollSp {
    overflow-x: scroll;
  }
}
/* checkbox/radio まで appearance を消すと、個別スタイルを持たない画面で
   コントロール自体が見えなくなるため、テキスト系入力だけを対象にする。 */
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-height: 48em !important;
}

a.hoverTdu:hover {
  text-decoration: underline;
}

.wrap1200px {
  max-width: 100%;
  width: 1200px;
  margin: 0 auto;
}

.wrap1056px {
  max-width: 100%;
  width: 1056px;
  margin: 0 auto;
}

.wrap1024px {
  max-width: 100%;
  width: 1056px;
  margin: 0 auto;
}

.wrap-780px {
  max-width: 100%;
  width: 780px;
  margin: 0 auto;
}

.wrap-700px {
  max-width: 100%;
  width: 700px;
  margin: 0 auto;
}

.flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.flex.betweenCenter {
  justify-content: space-between;
  align-items: center;
}
.flex.betweenStart {
  justify-content: space-between;
  align-items: flex-start;
}
.flex.betweenStretch {
  justify-content: space-between;
  align-items: stretch;
}
.flex.betweenEnd {
  justify-content: space-between;
  align-items: flex-end;
}
.flex.betweenStretch {
  justify-content: space-between;
  align-items: stretch;
}
.flex.startStart {
  justify-content: flex-start;
  align-items: flex-start;
}
.flex.startCenter {
  justify-content: flex-start;
  align-items: center;
}
.flex.centerCenter {
  justify-content: center;
  align-items: center;
}
.flex.centerStart {
  justify-content: center;
  align-items: flex-start;
}
.flex.endCenter {
  justify-content: flex-end;
  align-items: center;
}
.flex.endEnd {
  justify-content: flex-end;
  align-items: flex-end;
}
.flex.nowrap {
  flex-wrap: nowrap;
}
.flex.wrap {
  flex-wrap: wrap;
}

.pc {
  display: block;
}

.pcIpt {
  display: block !important;
}

.pcFlex {
  display: flex;
}

.pcIbk {
  display: inline-block;
}

.pc-tab {
  display: block;
}

.tab-sp {
  display: none;
}

.tab-spIpt {
  display: none !important;
}

.sp {
  display: none;
}

.spIpt {
  display: none !important;
}

.spIbk {
  display: none;
}

.spIbkIpt {
  display: none !important;
}

img,
iframe {
  max-width: 100%;
  height: auto;
}

.img100pParent img {
  width: 100%;
}
.img100pParent iframe {
  width: 100%;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.tal {
  text-align: left;
}

.dispBlk {
  display: block;
}

.dispInl {
  display: inline;
}

.dispIbk {
  display: inline-block;
}

.dispIbkIpt {
  display: inline-block !important;
}

.dispTable {
  display: table;
  width: 100%;
}

.dispTableCell {
  display: table-cell;
}

.dispTableRow {
  display: table-row;
}

.dispNon {
  display: none;
}

.ofHdn {
  overflow: hidden;
}

.ptwNon {
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .pc {
    display: none;
  }
  .pcIpt {
    display: none !important;
  }
  .pcFlex {
    display: none;
  }
  .pcIbk {
    display: none;
  }
  .pc-tab {
    display: block;
  }
  .tab-sp {
    display: block;
  }
  .tab-spIpt {
    display: block !important;
  }
  .tab-spIbk {
    display: inline-block;
  }
  .sp {
    display: none;
  }
  .spIpt {
    display: none !important;
  }
  .spTac {
    text-align: center;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spFlexCancel {
    display: block;
    width: 100%;
  }
  .pc {
    display: none;
  }
  .pcIpt {
    display: none !important;
  }
  .pc-tab {
    display: none;
  }
  .sp {
    display: block;
  }
  .spIpt {
    display: block !important;
  }
  .spIbk {
    display: inline-block;
  }
  .spIbkIpt {
    display: inline-block !important;
  }
  .spDispIbk {
    display: inline-block;
  }
  .spDispBlk {
    display: block;
  }
  .spDispNon {
    display: none;
  }
  .spTal {
    text-align: left;
  }
}
.mgt5p {
  margin-top: 5%;
}

.mgt10p {
  margin-top: 10%;
}

.mgt20p {
  margin-top: 20%;
}

.mgt25p {
  margin-top: 25%;
}

.mgt28p {
  margin-top: 28%;
}

.mgt30p {
  margin-top: 30%;
}

.mgt5px {
  margin-top: 5px;
}

.mgt10px {
  margin-top: 10px;
}

.mgt15px {
  margin-top: 15px;
}

.mgt20px {
  margin-top: 20px;
}

.mgt30px {
  margin-top: 30px;
}

.mgt40px {
  margin-top: 40px;
}

.mgt50px {
  margin-top: 50px;
}

.mgt53px {
  margin-top: 53px;
}

.mgt60px {
  margin-top: 60px;
}

.mgt64px {
  margin-top: 64px;
}

.mgt70px {
  margin-top: 70px;
}

.mgt80px {
  margin-top: 80px;
}

.mgt90px {
  margin-top: 90px;
}

.mgt100px {
  margin-top: 100px;
}

.mgt-2px {
  margin-top: -2px;
}

.mgt-40px {
  margin-top: -40px;
}

.mgr3-5p {
  margin-right: 3.5%;
}
.mgr3-5p.mgr0 {
  margin-right: 0;
}

.mgr2p {
  margin-right: 2%;
}

.mgr5p {
  margin-right: 5%;
}

.mgr10p {
  margin-right: 10%;
}

.mgr20p {
  margin-right: 20%;
}

.mgr35p {
  margin-right: 35%;
}

.mgr5px {
  margin-right: 5px;
}

.mgr10px {
  margin-right: 10px;
}

.mgr20px {
  margin-right: 20px;
}

.mgr30px {
  margin-right: 30px;
}

.mgr40px {
  margin-right: 40px;
}

.mgr50px {
  margin-right: 50px;
}

.mgr60px {
  margin-right: 60px;
}

.mgr3nNonParent > *:nth-child(3n) {
  margin-right: 0;
}

.mgb0px {
  margin-bottom: 0px;
}

.mgb3px {
  margin-bottom: 3px;
}

.mgb5px {
  margin-bottom: 5px;
}

.mgb6px {
  margin-bottom: 6px;
}

.mgb10px {
  margin-bottom: 10px;
}

.mgb11px {
  margin-bottom: 11px;
}

.mgb15px {
  margin-bottom: 15px;
}

.mgb16px {
  margin-bottom: 16px;
}

.mgb19px {
  margin-bottom: 19px;
}

.mgb20px {
  margin-bottom: 20px;
}

.mgb23px {
  margin-bottom: 23px;
}

.mgb25px {
  margin-bottom: 25px;
}

.mgb26px {
  margin-bottom: 26px;
}

.mgb30px {
  margin-bottom: 30px;
}

.mgb31px {
  margin-bottom: 31px;
}

.mgb34px {
  margin-bottom: 34px;
}

.mgb35px {
  margin-bottom: 35px;
}

.mgb39px {
  margin-bottom: 39px;
}

.mgb40px {
  margin-bottom: 40px;
}

.mgb41px {
  margin-bottom: 41px;
}

.mgb42px {
  margin-bottom: 42px;
}

.mgb43px {
  margin-bottom: 43px;
}

.mgb45px {
  margin-bottom: 45px;
}

.mgb48px {
  margin-bottom: 48px;
}

.mgb50px {
  margin-bottom: 50px;
}

.mgb51px {
  margin-bottom: 51px;
}

.mgb53px {
  margin-bottom: 53px;
}

.mgb55px {
  margin-bottom: 55px;
}

.mgb60px {
  margin-bottom: 60px;
}

.mgb65px {
  margin-bottom: 65px;
}

.mgb66px {
  margin-bottom: 66px;
}

.mgb69px {
  margin-bottom: 69px;
}

.mgb70px {
  margin-bottom: 70px;
}

.mgb75px {
  margin-bottom: 75px;
}

.mgb80px {
  margin-bottom: 80px;
}

.mgb85px {
  margin-bottom: 85px;
}

.mgb90px {
  margin-bottom: 90px;
}

.mgb92px {
  margin-bottom: 92px;
}

.mgb95px {
  margin-bottom: 95px;
}

.mgb100px {
  margin-bottom: 100px;
}

.mgb200px {
  margin-bottom: 200px;
}

.mgb206px {
  margin-bottom: 206px;
}

.mgb232px {
  margin-bottom: 232px;
}

.mgb242px {
  margin-bottom: 242px;
}

.mgb273px {
  margin-bottom: 273px;
}

.mgb115px {
  margin-bottom: 115px;
}

.mgb-50px {
  margin-bottom: -50px;
}

.mgl5px {
  margin-left: 5px;
}

.mgl10px {
  margin-left: 10px;
}

.mgl20px {
  margin-left: 20px;
}

.mgl30px {
  margin-left: 30px;
}

.mgy1em {
  margin-top: 1em;
  margin-bottom: 1em;
}

.mgy5px {
  margin-top: 5px;
  margin-bottom: 5px;
}

.mgy10px {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mgy20px {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mgy30px {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mgx5px {
  margin-left: 5px;
  margin-right: 5px;
}

.mgx10px {
  margin-left: 10px;
  margin-right: 10px;
}

.mgx20px {
  margin-left: 20px;
  margin-right: 20px;
}

.mgx30px {
  margin-left: 30px;
  margin-right: 30px;
}

.mg0Auto {
  margin: 0 auto;
}

.mg30pxAuto0 {
  margin: 30px auto 0;
}

.mg60pxAuto0 {
  margin: 60px auto 0;
}

.mg0Auto10px {
  margin: 0 auto 10px;
}

.mg0Auto50px {
  margin: 0 auto 50px;
}

.mg0Auto80px {
  margin: 0 auto 80px;
}

@media screen and (max-width: 1024px) {
  .tab-spMgt0 {
    margin-top: 0;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spMgt10px {
    margin-top: 10px;
  }
  .spMgt20px {
    margin-top: 20px;
  }
  .spMgt40px {
    margin-top: 40px;
  }
  .spMgt50px {
    margin-top: 50px;
  }
  .spMgt60px {
    margin-top: 60px;
  }
  .spMgr0 {
    margin-right: 0;
  }
  .spMgb5px {
    margin-bottom: 5px;
  }
  .spMgb10px {
    margin-bottom: 10px;
  }
  .spMgb15px {
    margin-bottom: 15px;
  }
  .spMgb20px {
    margin-bottom: 20px;
  }
  .spMgb30px {
    margin-bottom: 30px;
  }
  .spMgb40px {
    margin-bottom: 40px;
  }
  .spMgb50px {
    margin-bottom: 50px;
  }
  .spMg0Auto {
    margin: 0 auto;
  }
}
.pdt0 {
  padding-top: 0px !important;
}

.pdt9pxIpt {
  padding-top: 9px !important;
}

.pdt10px {
  padding-top: 10px;
}

.pdt15pxIpt {
  padding-top: 15px !important;
}

.pdt20px {
  padding-top: 20px;
}

.pdt30px {
  padding-top: 30px;
}

.pdt35px {
  padding-top: 35px;
}

.pdt40px {
  padding-top: 40px;
}

.pdt48px {
  padding-top: 48px;
}

.pdt50px {
  padding-top: 50px;
}

.pdt60px {
  padding-top: 60px;
}

.pdt70px {
  padding-top: 70px;
}

.pdt78px {
  padding-top: 78px;
}

.pdt80px {
  padding-top: 80px;
}

.pdt100px {
  padding-top: 100px;
}

.pdt118px {
  padding-top: 118px;
}

.pdt129px {
  padding-top: 129px;
}

.pdt158px {
  padding-top: 158px;
}

.pdt163px {
  padding-top: 163px;
}

.pdt199px {
  padding-top: 199px;
}

.pdt200px {
  padding-top: 200px;
}

.pdt1em {
  padding-top: 1em;
}

.pdr20p {
  padding-right: 20%;
}

.pdr10px {
  padding-right: 10px;
}

.pdr20px {
  padding-right: 20px;
}

.pdr30px {
  padding-right: 30px;
}

.pdb5px {
  padding-bottom: 5px;
}

.pdb10px {
  padding-bottom: 10px;
}

.pdb20px {
  padding-bottom: 20px;
}

.pdb22px {
  padding-bottom: 22px;
}

.pdb25px {
  padding-bottom: 25px;
}

.pdb26px {
  padding-bottom: 26px;
}

.pdb30px {
  padding-bottom: 30px;
}

.pdb32px {
  padding-bottom: 32px;
}

.pdb40px {
  padding-bottom: 40px;
}

.pdb50px {
  padding-bottom: 50px;
}

.pdb60px {
  padding-bottom: 60px;
}

.pdb70px {
  padding-bottom: 70px;
}

.pdb80px {
  padding-bottom: 80px;
}

.pdb90px {
  padding-bottom: 90px;
}

.pdb100px {
  padding-bottom: 100px;
}

.pdb117px {
  padding-bottom: 117px;
}

.pdb123px {
  padding-bottom: 123px;
}

.pdb150px {
  padding-bottom: 150px;
}

.pdb198px {
  padding-bottom: 198px;
}

.pdl-2em {
  padding-left: 0.2em;
}

.pdl-5em {
  padding-left: 0.5em;
}

.pdl10px {
  padding-left: 10px;
}

.pdl20px {
  padding-left: 20px;
}

.pdl26px {
  padding-left: 26px;
}

.pdl30px {
  padding-left: 30px;
}

.pdl40px {
  padding-left: 40px;
}

.pd-4em {
  padding: 0.4em;
}

.pd-5em {
  padding: 0.5em;
}

.pd1em {
  padding: 1em;
}

.pd5px {
  padding: 5px;
}

.pd10px {
  padding: 10px;
}

.pd20px {
  padding: 20px;
}

.pd30px {
  padding: 30px;
}

.pd40px {
  padding: 40px;
}

.pd50px {
  padding: 50px;
}

.pdx-5em {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.pdx-8em {
  padding-right: 0.8em;
  padding-left: 0.8em;
}

.pdx1em {
  padding-right: 1em;
  padding-left: 1em;
}

.pdx10px {
  padding-right: 10px;
  padding-left: 10px;
}

.pdx15px {
  padding-right: 15px;
  padding-left: 15px;
}

.pdx20px {
  padding-right: 20px;
  padding-left: 20px;
}

.pdx30px {
  padding-right: 30px;
  padding-left: 30px;
}

.pdx40px {
  padding-right: 40px;
  padding-left: 40px;
}

.pdx50px {
  padding-right: 50px;
  padding-left: 50px;
}

.pdx100px {
  padding-right: 100px;
  padding-left: 100px;
}

.pdy4px {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pdy5px {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pdy9px {
  padding-top: 9px;
  padding-bottom: 9px;
}

.pdy10px {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pdy15px {
  padding-top: 15px;
  padding-bottom: 15px;
}

.pdy20px {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pdy30px {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pdy40px {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pdy50px {
  padding-top: 50px;
  padding-bottom: 50px;
}

.pdy80px {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pdy100px {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pdy-5em {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.pdy1em {
  padding-top: 1em;
  padding-bottom: 1em;
}

@media screen and (max-width: 1024px) {
  .tab-spPdy10px {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .tab-spPdx20px {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tab-spPdb50px {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spPdt0 {
    padding-top: 0;
  }
  .spPdt5px {
    padding-top: 5px;
  }
  .spPdt20px {
    padding-top: 20px;
  }
  .spPdt40px {
    padding-top: 40px;
  }
  .spPdt80px {
    padding-top: 80px;
  }
  .spPdt100px {
    padding-top: 100px;
  }
  .spPdl20px {
    padding-left: 20px;
  }
  .spPdr30p {
    padding-right: 30%;
  }
  .spPd0 {
    padding: 0 !important;
  }
  .spPd10px {
    padding: 10px;
  }
  .spPd20px {
    padding: 20px;
  }
  .spPd30px {
    padding: 30px;
  }
  .spPd40px {
    padding: 40px;
  }
  .spPdb0 {
    padding-bottom: 0;
  }
  .spPdb40px {
    padding-bottom: 40px;
  }
  .spPdb50px {
    padding-bottom: 50px;
  }
  .spPdb80px {
    padding-bottom: 80px;
  }
  .spPdb100px {
    padding-bottom: 100px;
  }
  .spPdb150px {
    padding-bottom: 150px;
  }
  .spPdx0 {
    padding-right: 0;
    padding-left: 0;
  }
  .spPdx10px {
    padding-right: 10px;
    padding-left: 10px;
  }
  .spPdx20px {
    padding-right: 20px;
    padding-left: 20px;
  }
  .spPdx30px {
    padding-right: 30px;
    padding-left: 30px;
  }
  .spPdx40px {
    padding-right: 40px;
    padding-left: 40px;
  }
  .spPdy10px {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .spPdy20px {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .spPdy40px {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .spPdy50px {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .spPdy80px120px {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
.fwb {
  font-weight: bold;
}

.fwn {
  font-weight: normal;
}

.fwl {
  font-weight: lighter;
}

.fsi {
  font-style: italic;
}

.fz2em {
  font-size: 2em;
}

.fz3em {
  font-size: 3em;
}

.fz9px {
  font-size: 9px;
}

.fz10px {
  font-size: 10px;
}

.fz11px {
  font-size: 11px;
}

.fz12px {
  font-size: 12px;
}

.fz13px {
  font-size: 13px;
}

.fz14px {
  font-size: 14px;
}

.fz15px {
  font-size: 15px;
}

.fz16px {
  font-size: 16px;
}

.fz17px {
  font-size: 17px;
}

.fz18px {
  font-size: 18px;
}

.fz19px {
  font-size: 19px;
}

.fz20px {
  font-size: 20px;
}

.fz21px {
  font-size: 21px;
}

.fz22px {
  font-size: 22px;
}

.fz23px {
  font-size: 23px;
}

.fz24px {
  font-size: 24px;
}

.fz25px {
  font-size: 25px;
}

.fz30px {
  font-size: 30px;
}

.fz36px {
  font-size: 36px;
}

.fz38px {
  font-size: 38px;
}

.fz50px {
  font-size: 50px;
}

.fz60px {
  font-size: 60px;
}

.fz15Parent * {
  font-size: 15px;
}

.lh0 {
  line-height: 0;
}

.lh-5 {
  line-height: 0.5;
}

.lh1-3em {
  line-height: 1.3em;
}

.lh1-5em {
  line-height: 1.5em;
}

.lh1-6em {
  line-height: 1.6em;
}

.lh1-7em {
  line-height: 1.7em;
}

.lh1-75em {
  line-height: 1.75em;
}

.lh1-8em {
  line-height: 1.8em;
}

.lh2em {
  line-height: 2em;
}

.lh25px {
  line-height: 25px;
}

.lh26px {
  line-height: 26px;
}

.lh30px {
  line-height: 30px;
}

.lh31px {
  line-height: 31px;
}

.lh32px {
  line-height: 32px;
}

.lh35px {
  line-height: 35px;
}

.lh36px {
  line-height: 36px;
}

.lh40px {
  line-height: 40px;
}

.lh45px {
  line-height: 45px;
}

.lh47px {
  line-height: 47px;
}

.lh50px {
  line-height: 50px;
}

.lh70px {
  line-height: 70px;
}

.lh55px {
  line-height: 55px;
}

.lh160px {
  line-height: 160px;
}

.ls-02em {
  letter-spacing: 0.02em;
}

.ls-05em {
  letter-spacing: 0.05em;
}

.ls-1em {
  letter-spacing: 0.1em;
}

.ls-2em {
  letter-spacing: 0.2em;
}

.ls1em {
  letter-spacing: 1em;
}

.ls3px {
  letter-spacing: 3px;
}

@media screen and (max-width: 767px) {
  .spLh50px {
    line-height: 50px;
  }
  .spLh1-5emParent * {
    line-height: 1.5em;
  }
}
.fc000 {
  color: #000 !important;
}

.fcfff {
  color: #fff;
}

.fcaaa {
  color: #aaa;
}

.fcf8f8f8 {
  color: #f8f8f8;
}

.fc3c3c3c {
  color: #3c3c3c;
}

.fc464646 {
  color: #464646;
}

.fc595757 {
  color: #595757;
}

.fc717071 {
  color: #717071;
}

.fc1e2129 {
  color: #1e2129;
}

.fc61666f {
  color: #61666f;
}

.fc4c4c4c {
  color: #4c4c4c;
}

.fcb2b2b1 {
  color: #b2b2b1;
}

.fc666 {
  color: #666;
}

.fc8e8e8e {
  color: #8e8e8e;
}

.fcb9b9b9 {
  color: #b9b9b9;
}

.fc858585 {
  color: #858585;
}

.fcf4c01e {
  color: #f4c01e;
}

.fc7df1bc {
  color: #7df1bc;
}

.fc00B5AD {
  color: #00b5ad;
}

.fc68CFC3 {
  color: #68cfc3;
}

.fc16b362 {
  color: #16b362;
}

.fcff6f6f {
  color: #ff6f6f;
}

.fcred {
  color: red;
}

.fcf01a1a {
  color: #f01a1a;
  text-decoration: underline;
}
.fcf01a1a:hover {
  color: #f01a1a;
  text-decoration: none;
}

.fc595757Parent * {
  color: #595757;
}

.hvFc000:hover {
  color: #000;
}

.hvFcfff:hover {
  color: #fff;
}

.hvFcfcd113:hover {
  color: #fcd113;
}

.hvFc626262:hover {
  color: #626262;
}

.tdu {
  text-decoration: underline;
}
.tdu:hover {
  text-decoration: none;
}

.tdul {
  text-decoration: underline;
}

.phsCaaa::-webkit-input-placeholder {
  color: #ccc;
}
.phsCaaa::-moz-placeholder {
  color: #ccc;
}
.phsCaaa:-ms-input-placeholder {
  color: #ccc;
}

@media screen and (max-width: 767px) {
  .spFz12px {
    font-size: 12px;
  }
  .spFz15px {
    font-size: 15px;
  }
  .spFz16px {
    font-size: 16px;
  }
  .spFz18px {
    font-size: 18px;
  }
  .spFz25px {
    font-size: 25px;
  }
  .spFz30px {
    font-size: 30px;
  }
}
.wd1p {
  width: 1%;
}

.wd2p {
  width: 2%;
}

.wd2-5p {
  width: 2.5%;
}

.wd3p {
  width: 3%;
}

.wd4p {
  width: 4%;
}

.wd5p {
  width: 5%;
}

.wd6p {
  width: 6%;
}

.wd7p {
  width: 7%;
}

.wd7-5p {
  width: 7.5%;
}

.wd8p {
  width: 8%;
}

.wd9p {
  width: 9%;
}

.wd10p {
  width: 10%;
}

.wd11p {
  width: 11%;
}

.wd12p {
  width: 12%;
}

.wd13p {
  width: 13%;
}

.wd14p {
  width: 14%;
}

.wd14-3p {
  width: 14.3%;
}

.wd15p {
  width: 15%;
}

.wd16p {
  width: 16%;
}

.wd17p {
  width: 17%;
}

.wd17-5p {
  width: 17.5%;
}

.wd18p {
  width: 18%;
}

.wd19p {
  width: 19%;
}

.wd20p {
  width: 20%;
}

.wd21p {
  width: 21%;
}

.wd22p {
  width: 22%;
}

.wd23p {
  width: 23%;
}

.wd24p {
  width: 24%;
}

.wd25p {
  width: 25%;
}

.wd26p {
  width: 26%;
}

.wd27p {
  width: 27%;
}

.wd28p {
  width: 28%;
}

.wd29p {
  width: 29%;
}

.wd30p {
  width: 30%;
}

.wd31p {
  width: 31%;
}

.wd32p {
  width: 32%;
}

.wd33p {
  width: 33%;
}

.wd34p {
  width: 34%;
}

.wd35p {
  width: 35%;
}

.wd36p {
  width: 36%;
}

.wd37p {
  width: 37%;
}

.wd38p {
  width: 38%;
}

.wd39p {
  width: 39%;
}

.wd40p {
  width: 40%;
}

.wd41p {
  width: 41%;
}

.wd42p {
  width: 42%;
}

.wd43p {
  width: 43%;
}

.wd44p {
  width: 44%;
}

.wd45p {
  width: 45%;
}

.wd46p {
  width: 46%;
}

.wd47p {
  width: 47%;
}

.wd48p {
  width: 48%;
}

.wd49pImp {
  width: 49% !important;
}

.wd49p {
  width: 49%;
}

.wd49-5p {
  width: 49.5%;
}

.wd50p {
  width: 50% !important;
}

.wd51p {
  width: 51%;
}

.wd52p {
  width: 52%;
}

.wd53p {
  width: 53%;
}

.wd54p {
  width: 54%;
}

.wd55p {
  width: 55%;
}

.wd56p {
  width: 56%;
}

.wd57p {
  width: 57%;
}

.wd58p {
  width: 58%;
}

.wd59p {
  width: 59%;
}

.wd60p {
  width: 60% !important;
}

.wd61p {
  width: 61%;
}

.wd62p {
  width: 62%;
}

.wd63p {
  width: 63%;
}

.wd64p {
  width: 64%;
}

.wd65p {
  width: 65%;
}

.wd66p {
  width: 66%;
}

.wd67p {
  width: 67%;
}

.wd68p {
  width: 68%;
}

.wd69p {
  width: 69%;
}

.wd70p {
  width: 70% !important;
}

.wd71p {
  width: 71%;
}

.wd72p {
  width: 72%;
}

.wd73p {
  width: 73%;
}

.wd74p {
  width: 74%;
}

.wd75p {
  width: 75%;
}

.wd76p {
  width: 76%;
}

.wd77p {
  width: 77%;
}

.wd78p {
  width: 78%;
}

.wd79p {
  width: 79%;
}

.wd80p {
  width: 80%;
}

.wd81p {
  width: 81%;
}

.wd82p {
  width: 82%;
}

.wd83p {
  width: 83%;
}

.wd84p {
  width: 84%;
}

.wd85p {
  width: 85%;
}

.wd85pIpt {
  width: 85% !important;
}

.wd86p {
  width: 86%;
}

.wd87p {
  width: 87%;
}

.wd88p {
  width: 88%;
}

.wd89p {
  width: 89%;
}

.wd90p {
  width: 90%;
}

.wd92p {
  width: 92%;
}

.wd92p {
  width: 92%;
}

.wd93p {
  width: 93%;
}

.wd94p {
  width: 94%;
}

.wd95p {
  width: 95%;
}

.wd96p {
  width: 96%;
}

.wd97p {
  width: 97%;
}

.wd98p {
  width: 98%;
}

.wd99p {
  width: 99%;
}

.wd100p {
  width: 100%;
}

.wd100pIpt {
  width: 100% !important;
}

.wd1px {
  width: 1px;
}

.wd2px {
  width: 2px;
}

.wd3px {
  width: 3px;
}

.wd4px {
  width: 4px;
}

.wd5px {
  width: 5px;
}

.wd6px {
  width: 6px;
}

.wd7px {
  width: 7px;
}

.wd7-5px {
  width: 7.5px;
}

.wd8px {
  width: 8px;
}

.wd9px {
  width: 9px;
}

.wd10px {
  width: 10px;
}

.wd11px {
  width: 11px;
}

.wd12px {
  width: 12px;
}

.wd14px {
  width: 14px;
}

.wd15px {
  width: 15px;
}

.wd16px {
  width: 16px;
}

.wd17px {
  width: 17px;
}

.wd18px {
  width: 18px;
}

.wd19px {
  width: 19px;
}

.wd20px {
  width: 20px;
}

.wd21px {
  width: 21px;
}

.wd22px {
  width: 22px;
}

.wd23px {
  width: 23px;
}

.wd24px {
  width: 24px;
}

.wd25px {
  width: 25px;
}

.wd26px {
  width: 26px;
}

.wd27px {
  width: 27px;
}

.wd28px {
  width: 28px;
}

.wd29px {
  width: 29px;
}

.wd30px {
  width: 30px;
}

.wd31px {
  width: 31px;
}

.wd32px {
  width: 32px;
}

.wd33px {
  width: 33px;
}

.wd34px {
  width: 34px;
}

.wd35px {
  width: 35px;
}

.wd36px {
  width: 36px;
}

.wd37px {
  width: 37px;
}

.wd38px {
  width: 38px;
}

.wd39px {
  width: 39px;
}

.wd40px {
  width: 40px;
}

.wd41px {
  width: 41px;
}

.wd42px {
  width: 42px;
}

.wd43px {
  width: 43px;
}

.wd44px {
  width: 44px;
}

.wd45px {
  width: 45px;
}

.wd46px {
  width: 46px;
}

.wd47px {
  width: 47px;
}

.wd48px {
  width: 48px;
}

.wd49px {
  width: 49px;
}

.wd50px {
  width: 50px;
}

.wd51px {
  width: 51px;
}

.wd52px {
  width: 52px;
}

.wd53px {
  width: 53px;
}

.wd54px {
  width: 54px;
}

.wd55px {
  width: 55px;
}

.wd56px {
  width: 56px;
}

.wd57px {
  width: 57px;
}

.wd58px {
  width: 58px;
}

.wd59px {
  width: 59px;
}

.wd60px {
  width: 60px;
}

.wd61px {
  width: 61px;
}

.wd62px {
  width: 62px;
}

.wd63px {
  width: 63px;
}

.wd64px {
  width: 64px;
}

.wd65px {
  width: 65px;
}

.wd66px {
  width: 66px;
}

.wd67px {
  width: 67px;
}

.wd68px {
  width: 68px;
}

.wd69px {
  width: 69px;
}

.wd70px {
  width: 70px;
}

.wd71px {
  width: 71px;
}

.wd72px {
  width: 72px;
}

.wd73px {
  width: 73px;
}

.wd74px {
  width: 74px;
}

.wd75px {
  width: 75px;
}

.wd76px {
  width: 76px;
}

.wd77px {
  width: 77px;
}

.wd78px {
  width: 78px;
}

.wd79px {
  width: 79px;
}

.wd80px {
  width: 80px;
}

.wd81px {
  width: 81px;
}

.wd82px {
  width: 82px;
}

.wd83px {
  width: 83px;
}

.wd84px {
  width: 84px;
}

.wd85px {
  width: 85px;
}

.wd86px {
  width: 86px;
}

.wd87px {
  width: 87px;
}

.wd88px {
  width: 88px;
}

.wd89px {
  width: 89px;
}

.wd90px {
  width: 90px;
}

.wd92px {
  width: 92px;
}

.wd92px {
  width: 92px;
}

.wd93px {
  width: 93px;
}

.wd94px {
  width: 94px;
}

.wd95px {
  width: 95px;
}

.wd96px {
  width: 96px;
}

.wd97px {
  width: 97px;
}

.wd98px {
  width: 98px;
}

.wd99px {
  width: 99px;
}

.wd100px {
  width: 100px;
}

.wd110px {
  width: 110px;
}

.wd120px {
  width: 120px;
}

.wd130px {
  width: 130px;
}

.wd140px {
  width: 140px;
}

.wd150px {
  width: 150px;
}

.wd160px {
  width: 160px;
}

.wd170px {
  width: 170px;
}

.wd175px {
  width: 175px;
}

.wd196px {
  width: 196px;
}

.wd200px {
  width: 200px;
}

.wd210px {
  width: 210px;
}

.wd216px {
  width: 216px;
}

.wd230px {
  width: 230px;
}

.wd260px {
  width: 260px;
}

.wd300px {
  width: 300px;
}

.wd350px {
  width: 350px;
}

.wd397px {
  width: 397px;
}

.wd399px {
  width: 397px;
}

.wd400px {
  width: 400px;
}

.wd431px {
  width: 431px;
}

.wd432px {
  width: 432px;
}

.wd500px {
  width: 500px;
}

.wd550px {
  width: 550px;
}

.wd600px {
  width: 600px;
}

.wd700px {
  width: 700px;
}

.wd800px {
  width: 800px;
}

.wd820px {
  width: 820px;
}

.wd830px {
  width: 830px;
}

.wd860px {
  width: 860px;
}

.wd944px {
  width: 944px;
}

.wd1024px {
  width: 1024px;
}

.wd1200px {
  width: 1200px;
}

.wd1400px {
  width: 1400px;
}

.wd1600px {
  width: 1600px;
}

.wd100p-240px {
  width: calc(100% - 240px);
}

.wd100p-260px {
  width: calc(100% - 260px);
}

.wdAuto {
  width: auto;
}

.wdAutoIpt {
  width: auto !important;
}

.maxWd100p {
  max-width: 100%;
}

.minWd800px {
  min-width: 800px;
}

.minWd2500px {
  min-width: 2500px;
  max-width: 100%;
}

.minWdAuto {
  min-width: auto;
}

@media screen and (max-width: 1024px) {
  .tab-spWd100p {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spWd10p {
    width: 10%;
  }
  .spWd20p {
    width: 20%;
  }
  .spWd30p {
    width: 30%;
  }
  .spWd31p {
    width: 31%;
  }
  .spWd32p {
    width: 32%;
  }
  .spWd33p {
    width: 33%;
  }
  .spWd40p {
    width: 40%;
  }
  .spWd45p {
    width: 45%;
  }
  .spWd50p {
    width: 50%;
  }
  .spWd60p {
    width: 60%;
  }
  .spWd70p {
    width: 70%;
  }
  .spWd80p {
    width: 80%;
  }
  .spWd90p {
    width: 90%;
  }
  .spWd100p {
    width: 100%;
  }
  .spWd100p.wd50p {
    width: 100% !important;
  }
  .spWd300p {
    width: 300%;
  }
  .spWd100px {
    width: 100px;
  }
  .spWd200px {
    width: 200px;
  }
  .spWd650px {
    width: 650px !important;
  }
  .spWd900px {
    width: 900px !important;
  }
  .spWd1000px {
    width: 1000px !important;
  }
  .spWd1200px {
    width: 1200px !important;
  }
  .spWd1400px {
    width: 1400px !important;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) and (max-width: 354px) {
  .s-spWd130px {
    width: 130px;
  }
}
.ht100p {
  height: 100%;
}

.ht25px {
  height: 25px;
}

.ht30px {
  height: 30px;
}

.ht31px {
  height: 31px;
}

.ht32px {
  height: 32px;
}

.ht35px {
  height: 35px;
}

.ht36px {
  height: 36px;
}

.ht38px {
  height: 38px;
}

.ht45px {
  height: 45px;
}

.ht48px {
  height: 48px;
}

.ht50px {
  height: 50px;
}

.ht55px {
  height: 55px;
}

.ht70px {
  height: 70px;
}

.ht78px {
  height: 78px;
}

.ht100px {
  height: 100px;
}

.ht119px {
  height: 119px;
}

.ht146px {
  height: 146px;
}

.ht160px {
  height: 160px;
}

.ht200px {
  height: 200px;
}

.ht494px {
  height: 494px;
}

.ht500px {
  height: 500px;
}

.ht800px {
  height: 800px;
}

.htAuto {
  height: auto;
}

.ht500pxParent * {
  height: 500px;
}

.minHt52px {
  min-height: 52px;
}

.minHt54px {
  min-height: 54px;
}

.minHt100px {
  min-height: 100px;
}

.minHt104px {
  min-height: 104px;
}

.minHt200px {
  min-height: 200px;
}

@media screen and (max-width: 767px) {
  .spHt50px {
    height: 50px;
  }
  .spHt300px {
    height: 300px;
  }
  .spHtAuto {
    height: auto;
  }
  .spMinHtAuto {
    min-height: auto;
  }
}
.bgcf8f8f8 {
  background-color: #f8f8f8;
}

.bgcebebeb {
  background-color: #ebebeb;
}

.bgc5f5f5 {
  background-color: #f5f5f5;
}

.bgcf8f8f8Ipt {
  background-color: #f8f8f8 !important;
}

.bgcf2f3f5Ipt {
  background-color: #f2f3f5 !important;
}

.bgce5eff7 {
  background-color: #e5eff7 !important;
}

.bgcececec {
  background-color: #ececec;
}

.bgcf2f2f2 {
  background-color: #f2f2f2;
}

.bgcf5f5f5 {
  background-color: #f5f5f5;
}

.bgcf9fafb {
  background-color: #f9fafb;
}

.bgcf2f3f5 {
  background-color: #f2f3f5;
}

.bgceeeeef {
  background-color: #eeeeef;
}

.bgcfff6f6 {
  background-color: #fff6f6;
}

.bgcefefef {
  background-color: #efefef;
}

.bgcd9d8d8 {
  background-color: #d9d8d8;
}

.bgceee {
  background-color: #eee;
}

.bgc000 {
  background-color: #000;
}

.bgcfff {
  background-color: #fff;
}

.bgc1a1a1a {
  background-color: #1a1a1a;
}

.bgcf7f7f7 {
  background-color: #f7f7f7;
}

.bgc7df1bc {
  background-color: #7df1bc;
}

.bgc85cf67c7 {
  background-color: rgba(133, 207, 103, 0.7803921569);
}

.bgc68CFC3 {
  background-color: #68cfc3;
}

.bgcfcd113 {
  background-color: #fcd113;
}

.bgcf4c01e {
  background-color: #f4c01e;
}

.hvBgcBlack:hover {
  background-color: #000;
}

.hvBgc333:hover {
  background-color: #333;
}

@media screen and (max-width: 767px) {
  .spBgcfff {
    background-color: #fff;
  }
}
.bd1px {
  border: 1px #000 solid;
}

.bd2px {
  border: 2px #000 solid;
}

.bd3px {
  border: 3px #000 solid;
}

.bdTp10px {
  border: transparent 10px solid;
}

.bdt1px {
  border-top: 1px #000 solid;
}

.bdt2px {
  border-top: 2px #000 solid;
}

.bdr1px {
  border-right: 1px #000 solid;
}

.bdl1px {
  border-left: 1px #000 solid;
}

.bdl7px {
  border-left: 7px #000 solid;
}

.bdb1px {
  border-bottom: 1px #000 solid;
}

.bdb1pxBdceee {
  border: none !important;
  border-bottom: 1px #eee solid !important;
  border-radius: 0 !important;
}

.bdb2px {
  border-bottom: 2px #000 solid;
}

.bdb3px {
  border-bottom: 3px #000 solid;
}

.bdb6px {
  border-bottom: 6px #000 solid;
}

.bdNon {
  border: none !important;
}

.hvBdb4px:hover {
  border-bottom: 4px #000 solid;
}

.jsHvBdb4px {
  border-bottom: 4px #000 solid;
}

.bdcccc {
  border-color: #ccc;
}

.bdc83cd65 {
  border-color: #83cd65;
}

.bdc2224261a {
  border-color: rgba(34, 36, 38, 0.1019607843);
}

.bdcfff {
  border-color: #fff;
}

.bdc3c3c3c {
  border-color: #3c3c3c;
}

.bdcb3b3b3 {
  border-color: #b3b3b3;
}

.bdcbab9b9 {
  border-color: #bab9b9;
}

.bdcd2d2d2 {
  border-color: #d2d2d2;
}

.bdcc9c9c9 {
  border-color: #c9c9c9;
}

.bdc9e9e9f {
  border-color: #9e9e9f;
}

.bdc68CFC3 {
  border-color: #68cfc3;
}

.bdc7df1bc {
  border-color: #7df1bc;
}

.bdc8cd3bd {
  border-color: #8cd3bd;
}

.bdc85cf67 {
  border-color: #85cf67;
}

.bdc85cf67c7 {
  border-color: rgba(133, 207, 103, 0.7803921569);
}

.bdc6772cf {
  border-color: #6772cf;
}

.bdcd38cca {
  border-color: #d38cca;
}

.bdccf6767 {
  border-color: #cf6767;
}

.bdccfc767 {
  border-color: #cfc767;
}

.bdcf4c01e {
  border-color: #f4c01e;
}

.bdsDashed {
  border-style: dashed;
}

.bdc333 {
  border-color: #333;
}

.br2px {
  border-radius: 2px;
}

.br3px {
  border-radius: 3px;
}

.br5px {
  border-radius: 5px;
}

.br10px {
  border-radius: 10px;
}

.br50p {
  border-radius: 50%;
}

@media screen and (max-width: 1024px) {
  .tab-spBdNon {
    border: none;
  }
  .tab-spBdNonIpt {
    border: none !important;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spBdNon {
    border: none;
  }
  .spBdrNon {
    border-right: none;
  }
  .spMdbNon {
    border-bottom: none;
  }
}
.ptr {
  position: relative;
}

.pta {
  position: absolute;
}

.ptf {
  position: fixed;
}

.pts {
  position: static;
}

.tp0lt0 {
  top: 0;
  left: 0;
}

.tp30p {
  top: 30%;
}

.tp40p {
  top: 40%;
}

.tp-10px {
  top: -10px;
}

.tp-20px {
  top: -20px;
}

.tp-23px {
  top: -23px;
}

.tp-30px {
  top: -30px;
}

.tp-39px {
  top: -39px;
}

.tp-41px {
  top: -41px;
}

.tp0 {
  top: 0;
}

.tp5px {
  top: 5px;
}

.tp10px {
  top: 10px;
}

.tp13px {
  top: 13px;
}

.tp17px {
  top: 17px;
}

.tp20px {
  top: 20px;
}

.tp21px {
  top: 21px;
}

.tp22px {
  top: 22px;
}

.tp23px {
  top: 23px;
}

.tp30px {
  top: 30px;
}

.tp35px {
  top: 35px;
}

.tp50px {
  top: 50px;
}

.tp55px {
  top: 55px;
}

.tp83px {
  top: 83px;
}

.tp86px {
  top: 86px;
}

.tp105px {
  top: 105px;
}

.tp110px {
  top: 110px;
}

.tp113px {
  top: 113px;
}

.rt0 {
  right: 0;
}

.rt-100px {
  right: -100px;
}

.rt-204px {
  right: -204px;
}

.rt5px {
  right: 5px;
}

.rt10px {
  right: 10px;
}

.rt20px {
  right: 20px;
}

.rt22px {
  right: 22px;
}

.rt30px {
  right: 30px;
}

.rt40px {
  right: 40px;
}

.rt100px {
  right: 100px;
}

.bm0 {
  bottom: 0;
}

.bm10px {
  bottom: 10px;
}

.bm20px {
  bottom: 20px;
}

.bm30px {
  bottom: 30px;
}

.bm40px {
  bottom: 40px;
}

.bm60px {
  bottom: 60px;
}

.bm75px {
  bottom: 75px;
}

.bm-25px {
  bottom: -25px;
}

.bm-30px {
  bottom: -30px;
}

.lt0 {
  left: 0;
}

.lt-30px {
  left: -30px;
}

.lt10px {
  left: 10px;
}

.lt20px {
  left: 20px;
}

.lt30px {
  left: 30px;
}

.lt40px {
  left: 40px;
}

.lt50px {
  left: 50px;
}

.lt61px {
  left: 61px;
}

.lt65px {
  left: 65px;
}

.zIndex0 {
  z-index: 0;
}

.zIndex1 {
  z-index: 1;
}

.zIndex2 {
  z-index: 2;
}

.zIndex3 {
  z-index: 3;
}

@media screen and (max-width: 1024px) {
  .tab-spLt0 {
    left: 0;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spPtf {
    position: fixed;
  }
  .spPts {
    position: static;
  }
  .spTp0lt0 {
    top: 0;
    left: 0;
  }
  .spTp-15px {
    top: -15px;
  }
  .spTp0 {
    top: 0;
  }
  .spTp50px {
    top: 50px;
  }
  .spTp60px {
    top: 60px;
  }
  .spBm80px {
    bottom: 80px;
  }
  .spTp15p {
    top: 15%;
  }
  .spLtNon {
    left: auto;
  }
  .spLt20px {
    left: 20px;
  }
  .spRt10px {
    right: 10px;
  }
  .spRt20px {
    right: 20px;
  }
}
.resizeNon {
  resize: none;
}

.bxShadowCancel {
  box-shadow: none;
}

.hvImgParent img {
  width: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hvImgParent:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.imgWd100pParent img {
  width: 100%;
}

.vam {
  vertical-align: middle;
}

.vat {
  vertical-align: top;
}

.vab {
  vertical-align: bottom;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity0 {
  opacity: 0;
}

.hvOpacity-8:hover {
  opacity: 0.8;
}

.ofxs {
  overflow-x: scroll;
}

.cspt {
  cursor: pointer !important;
}

.pointerEventsNon {
  pointer-events: none;
}

.floatRt {
  float: right;
}

.pageBreak {
  page-break-before: always;
}

.borderCollapse {
  border-collapse: collapse;
}

.borderSeparate {
  border-collapse: separate;
}

.scroll {
  overflow-x: scroll;
}

.scrollAuto {
  overflow-x: auto;
}

.scrollYAuto {
  overflow-y: auto;
}

.border-radius-0 {
  border-radius: 0 !important;
}

.div-table {
  display: table;
  width: 100%;
  border-right: 1px solid rgba(34, 36, 38, 0.1);
  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
}

.div-thead {
  background-color: rgb(249, 250, 251);
  display: table-header-group;
}

.div-tr {
  display: table-row;
}

.div-tbody {
  display: table-row-group;
}

.div-th,
.div-td {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em;
  border-left: 1px solid rgba(34, 36, 38, 0.1);
  border-top: 1px solid rgba(34, 36, 38, 0.1);
}

.div-td {
  position: relative;
}
.div-td input[type=number],
.div-td input[type=date] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .tab-spScroll {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  .spScroll {
    overflow-x: scroll;
  }
  .spOfxs {
    overflow-x: scroll;
  }
}
.border-collapse-collapse {
  border-collapse: collapse;
}

@media print {
  .printDispNon {
    display: none !important;
  }
  .printPd0 {
    padding: 0 !important;
  }
  .printBdNon {
    border: none !important;
  }
  @page {
    margin-top: 5px;
    margin-bottom: 0;
  }
}
/*
 * かつて Google Fonts Early Access の Noto Sans Japanese を @font-face で読み込んでいたが、
 * 同エンドポイント(//fonts.gstatic.com/ea/notosansjapanese/v6/...)は Google により提供終了(404)しており、
 * 読み込みが毎回失敗してコンソールに CORS / ERR_FAILED エラーを大量出力していたため削除した。
 * 'Noto Sans Japanese' 指定箇所は sans-serif（OS搭載の日本語フォント）へフォールバックして従来どおり表示される。
 * Web フォントを明示的に使いたい場合は、保守されている https://fonts.googleapis.com/css2 (Noto Sans JP) を
 * レイアウトの <link> で読み込む方式に切り替えること。
 */
body {
  background-color: #f9f9f9 !important;
  height: calc(100% - 75px) !important;
}
body.active .global_navi {
  left: 0;
}
body.active #menu-btn span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
body.active #menu-btn span:nth-of-type(2) {
  opacity: 0;
}
body.active #menu-btn span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
body.active .main_container {
  margin-left: 270px;
  width: calc(100% - 270px);
}
body.user .global_navi .menu .item .menu_item a:hover {
  color: #fff;
}
body.user .global_navi .menu .item .header.on,
body.user .global_navi .menu .item .menu_item a.active {
  border-color: #26baee;
  color: #fff;
}
body.customer .site_title a span {
  color: #fb0896;
}
body.customer .global_navi .menu .item a:hover {
  color: #fff;
}
body.customer .global_navi .menu .item a.active {
  border-color: #fb0896;
  color: #fff;
}
body.partner .site_title a span {
  color: #fbbd08;
}
body.partner .global_navi .menu .item a:hover {
  color: #fff;
}
body.partner .global_navi .menu .item a.active {
  border-color: #fbbd08;
  color: #fff;
}
body.partner_accounts .site_title a span {
  color: #7573ff;
}
body.partner_accounts.is_partner .site_title a span {
  color: #fbbd08;
}

@media screen and (max-width: 1080px) {
  body.active .main_container {
    position: fixed;
    width: 100%;
  }
}
.site_title {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  font-family: "Noto Sans Japanese", sans-serif;
  color: #fff;
  letter-spacing: 0.05em;
  height: 75px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.site_title a {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}
.site_title a:hover {
  color: #fff;
}
.site_title a span {
  color: #26baee;
}

.global_navi {
  width: 270px;
  position: fixed;
  top: 75px;
  left: -270px;
  height: 100%;
  transition: 0.3s;
  background-color: #3b3e44 !important;
  z-index: 2;
}
.global_navi .menu {
  height: calc(100% - 75px);
  background-color: #3b3e44;
  overflow-y: scroll;
}
.global_navi .menu::-webkit-scrollbar, .global_navi .menu::-webkit-scrollbar-track, .global_navi .menu::-webkit-scrollbar-thumb {
  display: none;
}
.global_navi .menu a {
  font-family: "Noto Sans Japanese", sans-serif;
  color: #fff;
  display: block;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.global_navi .menu .item a {
  border-bottom: 0.5px solid #4f4f4f;
  color: #ababab;
  font-size: 12px;
}
.global_navi .menu .item .header {
  padding: 13px 20px;
  position: relative;
}
.global_navi .menu .item .header i {
  font-size: 13px;
  color: #ababab;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  right: 10px;
  transition: transform 0.2s;
}
.global_navi .menu .item .header.open i {
  transform: rotateZ(90deg);
}
.global_navi .menu .item .menu_item {
  display: none;
  background: #464951;
}
.global_navi .menu .item .menu_item a {
  padding: 13px 30px 13px 45px;
  border-color: #5f5f5f;
}
.global_navi .menu .item .menu_item a.active {
  color: #fff;
}

#menu-btn {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
#menu-btn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  width: 45%;
}
#menu-btn span:nth-of-type(1) {
  top: 15px;
}
#menu-btn span:nth-of-type(2) {
  top: 23px;
}
#menu-btn span:nth-of-type(3) {
  top: 31px;
}

header {
  width: 100%;
  height: 75px;
  background-color: #2f323a;
  position: fixed;
  top: 0;
  right: 0;
  transition: 0.3s;
  z-index: 100;
}
header::after {
  position: absolute;
  top: 29px;
  left: 0;
  font-size: 20px;
  color: #fff;
  text-align: center;
  width: 100%;
  pointer-events: none;
}
header.development {
  background-color: #a7a7a7;
}
header.development::after {
  content: "開発環境";
  display: block;
}
header.staging {
  background-color: #fc7777;
}
header.staging::after {
  content: "STG環境";
  display: block;
}
header .info {
  position: absolute;
  top: 26px;
  right: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
header .user_name {
  margin-left: 20px;
  color: #fff;
}
header .user_name .menu {
  top: 130% !important;
}
header .user_name .menu a {
  color: #5e5e5e;
}

.main_container {
  height: 100%;
  width: 100%;
  transition: 0.3s;
  margin-top: 75px;
  position: fixed;
  overflow: scroll;
  padding-bottom: 60px;
}

.form_container {
  height: 100%;
  display: flex !important;
  align-items: center !important;
}

.noframe .form_container {
  height: calc(100% - 75px);
}

.main_content {
  padding: 20px;
  background-color: #f9f9f9;
}

@media screen and (max-width: 1080px) {
  .site_title {
    padding: 0 0 0 78px;
  }
  header #menu-btn {
    display: block;
  }
}
.noframe {
  margin-top: 75px;
}
.noframe .description {
  margin-top: 40px;
  line-height: 1.7;
}
.noframe .contract_text {
  margin: 0em;
  -webkit-appearance: none;
  tap-highlight-color: rgba(255, 255, 255, 0);
  padding: 2em;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  outline: none;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  -webkit-box-shadow: 0em 0em 0em 0em transparent inset;
  box-shadow: 0em 0em 0em 0em transparent inset;
  -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  transition: color 0.1s ease, border-color 0.1s ease;
  font-size: 1em;
  line-height: 1.2857;
  resize: none;
  overflow-y: scroll;
  max-height: 30em;
}
.noframe .contract_text .title {
  margin: 20px 0 40px;
  font-size: 20px;
  text-align: center;
}
.noframe .footer {
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #838383;
}
.noframe .footer a {
  color: #838383;
  text-decoration: underline;
  margin: 0 3px;
}
.noframe .footer a:hover {
  text-decoration: none;
}

.lb-loader,
.lightbox {
  text-align: center;
  line-height: 0;
  position: absolute;
  left: 0;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #000;
  filter: alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  width: 100%;
  z-index: 10000;
  font-weight: 400;
  outline: 0;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;
  border: 4px solid #fff;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  background-color: #fff;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  top: 43%;
  height: 25%;
  width: 100%;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: 0;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}

.lb-next,
.lb-prev {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  filter: alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  filter: alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: 700;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: top right no-repeat;
  text-align: right;
  outline: 0;
  filter: alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: alpha(Opacity=100);
  opacity: 1;
}

p,
a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.editableBillingBusinessNumber,
.editableAccountingShareFlag,
.editableSalesTaskStatus,
.editableDatetime,
.editableWithMultipleCheckbox,
.editableBoolean,
.editableTaskCompleted,
.editableContentPartnerIdWithSelect,
.editableSalesDepartmentWithSelect,
.acquisitionChannelWithSelect,
.editableTodoSchedule,
.editableContentUserIdWithSelect,
.editableWithMultipleSelect,
.editableWithSelect,
.editableTodoStatusWithSelect,
.editableDepositDate,
.editableUrl,
.editableDate,
.editableMonth,
.editableRequiredDate,
.editableText,
.editableWebMinutesId,
.editableRequiredText,
.editableEmail,
.editablePassword,
.editableTextarea,
.editableRequiredTextarea,
.editableYen,
.editableRequiredYen,
.editableNum,
.editableDecimal,
.editableTodoSubmissionDate,
.editableTodoBillingStatus,
.editableRequiredOrderPriceYen,
.editableTodoBillingStatusMemo {
  /* 編集可能セルのアフォーダンス。見た目は /design_parts の .inline-edit を正とする */
  cursor: pointer;
  text-decoration: underline dashed rgba(47, 107, 255, 0.55);
  text-underline-offset: 4px;
}
.editableBillingBusinessNumber:hover,
.editableAccountingShareFlag:hover,
.editableSalesTaskStatus:hover,
.editableDatetime:hover,
.editableWithMultipleCheckbox:hover,
.editableBoolean:hover,
.editableTaskCompleted:hover,
.editableContentPartnerIdWithSelect:hover,
.editableSalesDepartmentWithSelect:hover,
.acquisitionChannelWithSelect:hover,
.editableTodoSchedule:hover,
.editableContentUserIdWithSelect:hover,
.editableWithMultipleSelect:hover,
.editableWithSelect:hover,
.editableTodoStatusWithSelect:hover,
.editableDepositDate:hover,
.editableUrl:hover,
.editableDate:hover,
.editableMonth:hover,
.editableRequiredDate:hover,
.editableText:hover,
.editableWebMinutesId:hover,
.editableRequiredText:hover,
.editableEmail:hover,
.editablePassword:hover,
.editableTextarea:hover,
.editableRequiredTextarea:hover,
.editableYen:hover,
.editableRequiredYen:hover,
.editableNum:hover,
.editableDecimal:hover,
.editableTodoSubmissionDate:hover,
.editableTodoBillingStatus:hover,
.editableRequiredOrderPriceYen:hover,
.editableTodoBillingStatusMemo:hover {
  background-color: var(--color-primary-50);
  text-decoration-color: var(--color-primary);
}
.editableBillingBusinessNumber.bgcf8f8f8:hover,
.editableAccountingShareFlag.bgcf8f8f8:hover,
.editableSalesTaskStatus.bgcf8f8f8:hover,
.editableDatetime.bgcf8f8f8:hover,
.editableWithMultipleCheckbox.bgcf8f8f8:hover,
.editableBoolean.bgcf8f8f8:hover,
.editableTaskCompleted.bgcf8f8f8:hover,
.editableContentPartnerIdWithSelect.bgcf8f8f8:hover,
.editableSalesDepartmentWithSelect.bgcf8f8f8:hover,
.acquisitionChannelWithSelect.bgcf8f8f8:hover,
.editableTodoSchedule.bgcf8f8f8:hover,
.editableContentUserIdWithSelect.bgcf8f8f8:hover,
.editableWithMultipleSelect.bgcf8f8f8:hover,
.editableWithSelect.bgcf8f8f8:hover,
.editableTodoStatusWithSelect.bgcf8f8f8:hover,
.editableDepositDate.bgcf8f8f8:hover,
.editableUrl.bgcf8f8f8:hover,
.editableDate.bgcf8f8f8:hover,
.editableMonth.bgcf8f8f8:hover,
.editableRequiredDate.bgcf8f8f8:hover,
.editableText.bgcf8f8f8:hover,
.editableWebMinutesId.bgcf8f8f8:hover,
.editableRequiredText.bgcf8f8f8:hover,
.editableEmail.bgcf8f8f8:hover,
.editablePassword.bgcf8f8f8:hover,
.editableTextarea.bgcf8f8f8:hover,
.editableRequiredTextarea.bgcf8f8f8:hover,
.editableYen.bgcf8f8f8:hover,
.editableRequiredYen.bgcf8f8f8:hover,
.editableNum.bgcf8f8f8:hover,
.editableDecimal.bgcf8f8f8:hover,
.editableTodoSubmissionDate.bgcf8f8f8:hover,
.editableTodoBillingStatus.bgcf8f8f8:hover,
.editableRequiredOrderPriceYen.bgcf8f8f8:hover,
.editableTodoBillingStatusMemo.bgcf8f8f8:hover {
  background-color: #f8f8f8;
}
.editableBillingBusinessNumber.contentEditableTrue:hover,
.editableAccountingShareFlag.contentEditableTrue:hover,
.editableSalesTaskStatus.contentEditableTrue:hover,
.editableDatetime.contentEditableTrue:hover,
.editableWithMultipleCheckbox.contentEditableTrue:hover,
.editableBoolean.contentEditableTrue:hover,
.editableTaskCompleted.contentEditableTrue:hover,
.editableContentPartnerIdWithSelect.contentEditableTrue:hover,
.editableSalesDepartmentWithSelect.contentEditableTrue:hover,
.acquisitionChannelWithSelect.contentEditableTrue:hover,
.editableTodoSchedule.contentEditableTrue:hover,
.editableContentUserIdWithSelect.contentEditableTrue:hover,
.editableWithMultipleSelect.contentEditableTrue:hover,
.editableWithSelect.contentEditableTrue:hover,
.editableTodoStatusWithSelect.contentEditableTrue:hover,
.editableDepositDate.contentEditableTrue:hover,
.editableUrl.contentEditableTrue:hover,
.editableDate.contentEditableTrue:hover,
.editableMonth.contentEditableTrue:hover,
.editableRequiredDate.contentEditableTrue:hover,
.editableText.contentEditableTrue:hover,
.editableWebMinutesId.contentEditableTrue:hover,
.editableRequiredText.contentEditableTrue:hover,
.editableEmail.contentEditableTrue:hover,
.editablePassword.contentEditableTrue:hover,
.editableTextarea.contentEditableTrue:hover,
.editableRequiredTextarea.contentEditableTrue:hover,
.editableYen.contentEditableTrue:hover,
.editableRequiredYen.contentEditableTrue:hover,
.editableNum.contentEditableTrue:hover,
.editableDecimal.contentEditableTrue:hover,
.editableTodoSubmissionDate.contentEditableTrue:hover,
.editableTodoBillingStatus.contentEditableTrue:hover,
.editableRequiredOrderPriceYen.contentEditableTrue:hover,
.editableTodoBillingStatusMemo.contentEditableTrue:hover {
  background-color: #fff;
}
.editableBillingBusinessNumber textarea,
.editableAccountingShareFlag textarea,
.editableSalesTaskStatus textarea,
.editableDatetime textarea,
.editableWithMultipleCheckbox textarea,
.editableBoolean textarea,
.editableTaskCompleted textarea,
.editableContentPartnerIdWithSelect textarea,
.editableSalesDepartmentWithSelect textarea,
.acquisitionChannelWithSelect textarea,
.editableTodoSchedule textarea,
.editableContentUserIdWithSelect textarea,
.editableWithMultipleSelect textarea,
.editableWithSelect textarea,
.editableTodoStatusWithSelect textarea,
.editableDepositDate textarea,
.editableUrl textarea,
.editableDate textarea,
.editableMonth textarea,
.editableRequiredDate textarea,
.editableText textarea,
.editableWebMinutesId textarea,
.editableRequiredText textarea,
.editableEmail textarea,
.editablePassword textarea,
.editableTextarea textarea,
.editableRequiredTextarea textarea,
.editableYen textarea,
.editableRequiredYen textarea,
.editableNum textarea,
.editableDecimal textarea,
.editableTodoSubmissionDate textarea,
.editableTodoBillingStatus textarea,
.editableRequiredOrderPriceYen textarea,
.editableTodoBillingStatusMemo textarea {
  padding: 0.5em 0.7em;
  min-height: 100px;
}

.editableReadingStatusBoolean,
.toggleSalesTaskStatus,
.toggleBoolean {
  cursor: pointer;
}

.editableDepositDate,
.editableDate,
.editableMonth,
.editableBillingBusinessNumber,
.editableNum,
.editableYen,
.editableRequiredYen,
.editableWithSelect,
.editableTodoStatusWithSelect,
.editableWithMultipleSelect,
.editableRequiredText,
.editableRequiredTextarea,
.editableRequiredDate,
.editableWithMultipleSelect,
.contentEditableSelect {
  overflow: visible !important;
}
.editableDepositDate input,
.editableDate input,
.editableMonth input,
.editableBillingBusinessNumber input,
.editableNum input,
.editableYen input,
.editableRequiredYen input,
.editableWithSelect input,
.editableTodoStatusWithSelect input,
.editableWithMultipleSelect input,
.editableRequiredText input,
.editableRequiredTextarea input,
.editableRequiredDate input,
.editableWithMultipleSelect input,
.contentEditableSelect input {
  width: 100% !important;
  height: 100% !important;
}

.bdcRequire {
  border-color: #e28e86 !important;
}

.pagination {
  text-align: center;
}
.pagination span {
  border: 1px #4183c4 solid;
  height: 34px;
  line-height: 34px;
  display: inline-block;
  text-align: center;
  margin: 0 3px 6px;
}
.pagination span a {
  color: #4183c4;
  display: block;
  padding-right: 10px;
  padding-left: 10px;
}
.pagination .first,
.pagination .last,
.pagination .prev,
.pagination .next {
  border: none;
}
.pagination .first a,
.pagination .last a,
.pagination .prev a,
.pagination .next a {
  padding-right: 0px;
  padding-left: 0px;
}
.pagination .current {
  background: #4183c4;
  color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}
.pagination .gap {
  padding-right: 10px;
  padding-left: 10px;
}

body.partner .pagination span {
  border-color: #fbbd08;
}
body.partner .pagination span a {
  color: #fbbd08;
}
body.partner .pagination .current {
  background: #fbbd08;
  color: #fff;
}

.todo_set_value_btn,
.userAdminSet,
.userEmploymentStatusSet,
.userReceptionSet {
  cursor: pointer;
}

.flash_message,
.instantMessage,
.backgroundSettingMessage {
  cursor: pointer;
  position: fixed !important;
  width: 350px !important;
  top: 11px !important;
  right: 20px !important;
  z-index: 100002 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.flash_message {
  padding: 16px 56px 16px 18px !important;
}

.flash_message > .app-alert-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.instantMessage {
  z-index: 100003 !important;
}

.instantMessage,
.backgroundSettingMessage {
  display: none;
}

/* スマホ幅では固定幅350px+right:20pxだと左端が画面外へはみ出すため、
   左右に余白を取って画面内に収める */
@media screen and (max-width: 480px) {
  .flash_message,
  .instantMessage,
  .backgroundSettingMessage {
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
  }
}
.dialog_box,
.todoSetAnker,
.userAuthChangeParent {
  margin: auto;
  max-width: 100%;
  padding: 20px;
  padding-top: 30px;
  position: fixed;
  border-radius: 5px;
  background: #fff;
  border: 1px #ccc solid;
  z-index: 2;
}
.dialog_box input.button,
.todoSetAnker input.button,
.userAuthChangeParent input.button {
  width: 100px;
}
.dialog_box .closeBtn,
.todoSetAnker .closeBtn,
.userAuthChangeParent .closeBtn {
  position: absolute;
  top: 5px;
  right: 5px;
}

.todoSetAnker {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.userAuthChangeParent {
  right: 0;
  top: 20%;
  width: 100%;
  padding-right: 30px;
}

.dialog_box {
  width: 300px;
}

.antisocial_forces_check_status {
  background: #999999;
}

.businessProcesseStatus,
.antisocial_forces_check_status {
  display: inline-block;
  padding: 0.5px 5px;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
}
.businessProcesseStatus:hover,
.antisocial_forces_check_status:hover {
  color: #fff;
}
.businessProcesseStatus._0, .businessProcesseStatus.ng,
.antisocial_forces_check_status._0,
.antisocial_forces_check_status.ng {
  background: #db2828;
}
.businessProcesseStatus._2, .businessProcesseStatus.sent,
.antisocial_forces_check_status._2,
.antisocial_forces_check_status.sent {
  background: #393737;
}
.businessProcesseStatus._1, .businessProcesseStatus._3, .businessProcesseStatus._4, .businessProcesseStatus.ok,
.antisocial_forces_check_status._1,
.antisocial_forces_check_status._3,
.antisocial_forces_check_status._4,
.antisocial_forces_check_status.ok {
  background: #5ad0a2;
}
.businessProcesseStatus.tableBlock,
.antisocial_forces_check_status.tableBlock {
  margin-left: 0 !important;
  margin-right: 5px !important;
}
.businessProcesseStatus.noText,
.antisocial_forces_check_status.noText {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.status_label,
.todoStatus {
  display: inline-block;
  padding: 0.5px 5px;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
}
.status_label:hover,
.todoStatus:hover {
  color: #fff;
}
.status_label.in_progress, .status_label._0, .status_label._2, .status_label._3, .status_label._4,
.todoStatus.in_progress,
.todoStatus._0,
.todoStatus._2,
.todoStatus._3,
.todoStatus._4 {
  background: #db2828;
}
.status_label.completed, .status_label._1,
.todoStatus.completed,
.todoStatus._1 {
  background: #5ad0a2 !important;
}
.status_label.tableBlock,
.todoStatus.tableBlock {
  margin-left: 0 !important;
  margin-right: 5px !important;
}
.status_label.noText,
.todoStatus.noText {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.user_auth_tag {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  font-size: 12px;
  padding: 3px 5px;
  margin: 0 5px 5px 0;
  background: #eee;
  border-radius: 3px;
}

.update_user_auth_btn {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  font-size: 12px;
  padding: 3px 10px;
  font-weight: bold;
  margin: 0 5px 5px 0;
  background: #00b5ad;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}
.update_user_auth_btn:hover {
  color: #fff;
}

.partnerSetRoleBtn,
.partnerSetMemoBtn {
  font-size: 13px !important;
  padding: 8px 15px !important;
  letter-spacing: 0.2em;
}

.small_btn {
  font-size: 10px !important;
  padding: 6px 10px !important;
  margin-top: 5px !important;
  display: inline-block !important;
}

@media screen and (max-width: 1080px) {
  .todoSetAnker {
    width: 100%;
  }
  .modalOfLostReason {
    left: 0;
  }
  .userAuthChangeParent,
  .partnerSetRoleDialogBox {
    position: fixed;
    top: 50%;
    right: 0;
    margin: 0 20px;
    width: calc(100% - 40px);
  }
  .partnerSetRoleDialogBox,
  .partnerSetMemoDialogBox {
    width: auto;
    max-width: 300px;
  }
}
@media screen and (max-width: 1080px) and (max-width: 767px) {
  .pagination .first a,
  .pagination .last a,
  .pagination .prev a,
  .pagination .next a {
    padding-right: 10px;
    padding-left: 10px;
  }
}
iframe {
  max-width: 100%;
}

.box {
  border: 1px solid rgba(34, 36, 38, 0.15);
  background: #f6f6f6;
  border-radius: 0.28571429rem;
  padding: 1em;
  margin: 1em 0em;
}

.gridCancel {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.gridCancel.mgb1rem {
  margin-bottom: 1rem !important;
}

.pdfLayout {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}
.pdfLayout thead {
  display: table-header-group;
  height: 1.1cm;
}
.pdfLayout tr {
  page-break-inside: avoid;
}
.pdfLayout th,
.pdfLayout td {
  padding: 5px;
}
.pdfLayout th {
  background: #6896cf;
  color: #fff;
}
.pdfLayout td {
  border: 1px #aaa solid;
  vertical-align: top;
}
.pdfLayout td h5,
.pdfLayout td p {
  line-height: 1.5em;
  margin: 0;
}

.loaderParent {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}
.loaderParent .loaderContent {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 45%;
}

.fixedTable {
  table-layout: fixed;
}
.fixedTable th,
.fixedTable td {
  overflow: auto;
}
.fixedTable th.editableText, .fixedTable th.editablePassword, .fixedTable th.editableTextarea,
.fixedTable td.editableText,
.fixedTable td.editablePassword,
.fixedTable td.editableTextarea {
  overflow: initial;
}

.mainBgColor {
  background: #6896cf !important;
  transition: 0.3s;
}
.mainBgColor:hover {
  opacity: 0.8;
  transition: 0.3s;
}
.mainBgColor.hoverNone:hover {
  opacity: 1;
}

.mainBorderColor {
  border-color: #6896cf !important;
}

#dimmer {
  display: none;
}

#dimmer {
  background: #000;
  opacity: 0.8;
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
}

.btnGrayNoHover:hover {
  background: #e0e1e2 !important;
  color: rgba(0, 0, 0, 0.6) !important;
  cursor: inherit !important;
}

.innerThead th {
  cursor: auto;
  background: #f9fafb;
  text-align: inherit;
  color: rgba(0, 0, 0, 0.87);
  padding: 0.92857143em 0.78571429em;
  vertical-align: inherit;
  font-style: none;
  font-weight: bold;
  text-transform: none;
  border-top: 1px solid rgba(34, 36, 38, 0.1);
  border-left: none;
}

.bgcf8f8f8Ipt {
  background-color: #f8f8f8 !important;
}

.disabled {
  pointer-events: none;
}

.followAfterDeliveryBody {
  display: none;
}

.editableWithMultipleSelect,
.editableTodoStatusWithSelect,
.editableWithSelect {
  border-bottom: 1px #000 solid;
  min-height: 31px;
  padding: 0.5em 0;
  overflow: hidden;
}

div.contentEditable,
div.contentEditableSelect {
  border-bottom: 1px #000 solid;
}
div.contentEditable .selectedText,
div.contentEditableSelect .selectedText {
  padding: 0.5em !important;
}
div.contentEditable.contentEditableTrue,
div.contentEditableSelect.contentEditableTrue {
  border-bottom: none;
}
div.contentEditable.currency, div.contentEditable.date,
div.contentEditableSelect.currency,
div.contentEditableSelect.date {
  padding-right: 5px;
  text-align: right;
}
div.contentEditable .selectedText,
div.contentEditableSelect .selectedText {
  min-height: 31px;
  padding: 0.5em 0;
  overflow: hidden;
}
div.contentEditable.todoMemo,
div.contentEditableSelect.todoMemo {
  border-bottom: none;
}

.todo_memo_textarea textarea,
.todo_worker_memo_textarea textarea {
  min-height: 150px;
}

.reading_status_wrapper .editableReadingStatusBoolean {
  font-size: 30px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: -2px;
  margin-top: 14px;
  display: inline-block;
}
.reading_status_wrapper .editableRequiredDate,
.reading_status_wrapper .editableEmail,
.reading_status_wrapper .editableWithSelect,
.reading_status_wrapper .antisocial_forces_check_status_text,
.reading_status_wrapper .editableYen,
.reading_status_wrapper .editableNum,
.reading_status_wrapper .editableDate,
.reading_status_wrapper .editableText {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 10px !important;
  color: #000;
}

.reading_status_partial_parent {
  position: relative;
  z-index: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 20px;
}
.reading_status_partial_parent .contentEditable,
.reading_status_partial_parent .contentEditableSelect {
  pointer-events: none;
}
.reading_status_partial_parent:before {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: calc(100% + 2em);
  left: -1em;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
}

.contentEditableSelect i {
  float: right;
}

.reading_status_label {
  display: inline-block;
  padding: 1px 5px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  vertical-align: bottom;
  margin-right: 3px;
  background: #5e5e5e;
}
.reading_status_label.s {
  background: #c19e36;
}
.reading_status_label.a {
  background: #002b55;
}
.reading_status_label.b {
  background: #004080;
}
.reading_status_label.c {
  background: #0055aa;
}
.reading_status_label.d {
  background: #006ad5;
}
.reading_status_label.e {
  background: #4da0f4;
}
.reading_status_label.f {
  background: #9fb5cb;
}
.reading_status_label.g {
  background: #8d8d8d;
}

.project_show_table td:nth-child(1), .project_show_table td:nth-child(3),
.content_show_table td:nth-child(1),
.content_show_table td:nth-child(3) {
  width: 20%;
  background: #f9fafb;
}
.project_show_table td:nth-child(4),
.content_show_table td:nth-child(4) {
  width: 30%;
}
.project_show_table td .title,
.content_show_table td .title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.project_show_table td .app-help-inline,
.content_show_table td .app-help-inline {
  text-align: right;
}

.exclamation_parent .title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.exclamation_parent .app-help-inline {
  text-align: right;
}

.todo_parent {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
}
.todo_parent table {
  border: 1px solid #d0d0d0;
  border-collapse: collapse;
}
.todo_parent th,
.todo_parent td {
  border: 1px solid #d0d0d0;
}

.bpAnchorlink {
  padding-top: 120px;
  margin-top: -120px;
  pointer-events: none;
}

.todo_index_table th {
  background-color: #aaaaaa !important;
  color: #fff !important;
}
.todo_index_table th,
.todo_index_table td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.todo_detail_table th {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.todo_detail_table td .selectedText {
  min-height: 0px !important;
  padding: 0 !important;
}
.todo_detail_table .todo_detail_head.active th {
  cursor: pointer;
}
.todo_detail_table .todo_detail_body {
  display: table-row;
}
.todo_detail_table .todo_detail_body.hide {
  display: none !important;
}

.invoices_update_form .div-td input[type=number],
.invoices_update_form .div-td input[type=date] {
  border: none !important;
  height: 100% !important;
  background-color: #f5f5f5 !important;
  border-radius: 0 !important;
}
.invoices_update_form .div-td input[type=date] {
  padding: 5px !important;
}

@media screen and (max-width: 767px) {
  .bpAnchorlink {
    padding-top: 200px;
    margin-top: -200px;
  }
}
.needAttention {
  color: red !important;
}

.create_nth_form {
  display: inline-block;
}
.create_nth_form .create_nth_form_btn {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -5px;
  cursor: pointer;
  color: #2185d0;
}

.do_delete {
  cursor: pointer;
}

.upload_file_area {
  border: 2px dashed #009c95;
  border-radius: 5px;
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
  margin: 0 0 10px;
  color: #009c95;
  font-weight: bold;
  font-size: 15px;
}
.upload_file_area label {
  padding: 0 20px;
  display: block;
  text-align: center;
  width: 100%;
  line-height: 1.4;
}
.upload_file_area input {
  opacity: 0;
  display: block;
  position: absolute;
  cursor: pointer;
}
.upload_file_area input.upload_file_input {
  width: 100% !important;
  height: 100% !important;
}

.confirmation_contents_before_order_class textarea {
  min-height: 660px !important;
  max-height: auto !important;
  top: auto !important;
  bottom: 0 !important;
}

label.title {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
}
label.title .app-help-inline {
  margin-left: 2px;
}

.top_nav {
  position: sticky;
  top: 10px;
  z-index: 2;
}

.project_fixed_header {
  position: sticky;
  top: 10px;
  z-index: 4;
  background: #f9f9f9;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.project_fixed_header .top_nav {
  position: static;
  top: auto;
  z-index: auto;
  margin-top: 0.8em;
}

.project_fixed_header_summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.2em;
  background: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(34, 36, 38, 0.12);
}

.project_fixed_header_title {
  min-width: 0;
  font-size: 1.35em;
  font-weight: bold;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.project_fixed_header_status {
  flex: 0 0 auto;
  min-width: 6em;
  text-align: center;
}

.table_header_fixed {
  position: sticky;
  top: 0;
  z-index: 2;
}

.noframe .top_nav,
.action_schedule .top_nav {
  top: 0;
}

.left_nav {
  position: sticky;
  left: 0px;
  z-index: 1;
  background-color: white;
}

@media screen and (max-width: 767px) {
  .left_nav.spNoLock {
    position: static;
  }
  .project_fixed_header {
    top: 0;
  }
  .project_fixed_header_summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75em;
  }
  .project_fixed_header_title {
    font-size: 1.1em;
  }
}
.left_nav2 {
  position: sticky;
  left: 17.5rem;
  z-index: 1;
  background-color: white;
}

.users_profile_image_delete_btn {
  position: absolute;
  top: 0;
  right: 0;
}

.disable_cursor {
  cursor: auto;
  pointer-events: none;
}
.disable_cursor a {
  pointer-events: auto;
}
.disable_cursor:hover {
  background-color: unset !important;
}

.works_announcement_content {
  margin-bottom: 5px;
}
.works_announcement_content:last-child {
  margin-bottom: 0;
}

.under_line {
  border-bottom: 1px #000 solid;
  min-height: 31px;
  padding: 0.5em 0;
  overflow: hidden;
}

.accounting_documents_form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.accounting_documents_form .field {
  margin-right: 1% !important;
}
.accounting_documents_form .field.full {
  width: 100%;
}
.accounting_documents_form .field.quarter {
  width: 24%;
}
.accounting_documents_form .field.half {
  width: 49%;
}
.accounting_documents_form .field.three_quarters {
  width: 74%;
}

.total_area_parent {
  display: table;
  width: 100%;
  margin-top: 20px;
}
.total_area_parent.show .total_area {
  background-color: #fff;
}
.total_area_parent .bank_info {
  display: table-cell;
  width: 65%;
  vertical-align: top;
  padding: 0 10px;
}
.total_area_parent .total_row {
  display: table;
  width: 100%;
  margin-bottom: 10px;
}
.total_area_parent .total_row p {
  display: table-cell;
  width: 48%;
  text-align: right;
}
.total_area_parent .total_row p.label {
  text-align: left;
}
.total_area_parent .info_area {
  padding-right: 20px;
}
.total_area_parent .total_area {
  display: table-cell;
  width: 35%;
  vertical-align: top;
  background-color: #eee;
  border: 1px solid #bab9b9;
  padding: 20px;
}

@media screen and (max-width: 767px) {
  .total_area_parent {
    display: block;
    margin-bottom: 10px;
  }
  .total_area_parent .info_area {
    padding-right: 0;
  }
  .total_area_parent .total_area {
    display: block;
    width: 100%;
  }
}
.swd25p {
  width: 25% !important;
}

.todo_display {
  display: inline-block;
  vertical-align: top;
  min-width: 80%;
  max-width: 85%;
  min-height: 1.7em;
}

.todo_wd10p {
  padding-left: 10%;
  width: 10% !important;
  height: 100% !important;
}

.compact_file_input_label div {
  color: black;
  background-color: #ececec;
  border-color: gray;
  border-radius: 0.28571429rem;
  border-style: solid;
  border-width: 0.1px;
  width: 4em;
  margin: auto;
}
.compact_file_input_label div:hover {
  cursor: pointer;
  background-color: lightgray;
}
.compact_file_input_label p {
  font-size: 0.8em;
}

.indicater_parent {
  display: none;
  position: fixed;
  bottom: 0;
  right: 14px;
  width: 300px;
  z-index: 100000;
}
.indicater_parent .toggleBtn {
  position: absolute;
  top: 37px;
  right: 9px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}
.indicater_parent .indicater_label {
  display: none;
}
.indicater_parent .progress {
  position: relative;
}
.indicater_parent .progress i.close {
  display: none;
  position: absolute;
  cursor: pointer;
  right: -11px;
  top: -8px;
  font-size: 17px;
}
.indicater_parent .progress.error i.close {
  display: block;
}
.indicater_parent .progress.error .progress {
  display: none;
}
.indicater_parent .progress .label {
  font-size: 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lost_reason_content {
  display: none;
}

.mail_label {
  margin: 0em 0em 0.28571429rem 0em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.92857143em;
  font-weight: bold;
}

.video_view {
  height: calc(100% - 88px);
  background-color: #000;
  display: flex;
  align-items: center;
}
.video_view video {
  max-height: 100%;
}
.video_view .dl_btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.breadcrumb {
  padding: 15px 20px 0;
}
.breadcrumb a {
  conlor: #26baee !important;
}
.breadcrumb .active.section {
  font-weight: normal !important;
  color: #5e5e5e !important;
}

.video_show_iframe {
  width: 100%;
  height: 200px;
  border: none;
  box-shadow: none;
}

.partner_contract_histories_modal_btn {
  cursor: pointer;
}

.partner_contract_histories_modal {
  height: 100%;
}
.partner_contract_histories_modal .content {
  height: 100%;
}
.partner_contract_histories_modal .content .contract_text {
  height: 100%;
  margin: 0em;
  -webkit-appearance: none;
  tap-highlight-color: rgba(255, 255, 255, 0);
  padding: 2em;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  outline: none;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  -webkit-box-shadow: 0em 0em 0em 0em transparent inset;
  box-shadow: 0em 0em 0em 0em transparent inset;
  -webkit-transition: color 0.1s ease, border-color 0.1s ease;
  transition: color 0.1s ease, border-color 0.1s ease;
  font-size: 1em;
  line-height: 1.2857;
  resize: none;
  overflow-y: scroll;
}
.partner_contract_histories_modal .content .contract_text .title {
  margin: 20px 0 40px;
  font-size: 20px;
  text-align: center;
}

.accident_informations_card {
  margin-bottom: 20px !important;
}
.accident_informations_card .card {
  width: 48% !important;
}

@media screen and (max-width: 1000px) {
  .accident_informations_card .card {
    width: 100% !important;
  }
}
#sortable tr td:first-child {
  cursor: move;
}

.checkBoxStyle {
  height: 38px !important;
  margin-right: 20px !important;
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
}
.checkBoxStyle input {
  display: inline-block;
  margin-right: 5px;
  height: auto !important;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

@media print {
  body.active .main_container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.active .main_container header {
    display: none !important;
    width: 100% !important;
  }
  .main_container {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main_container .main_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.not-allowed {
  background-color: #eeeeee !important;
  cursor: not-allowed;
}

.negative.tooltip.button {
  background-color: #e2e2e2 !important;
  color: #b3b3b3 !important;
  opacity: 1 !important;
}
.negative.tooltip.button:hover {
  background-color: #e2e2e2 !important;
  color: #b3b3b3 !important;
  opacity: 1 !important;
}

.partnerColor {
  background-color: #5755d9 !important;
}

.yellow.partnerBtn {
  background-color: #fff !important;
  border: 1px solid #eaae00 !important;
}

.reading_status_progress_bar {
  overflow-x: auto;
  margin-bottom: 12px;
}
.reading_status_progress_bar .progressbar {
  min-width: 1200px;
}

.progressbar {
  position: relative;
  margin: 0 0 20px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 0;
}
.progressbar.four li {
  width: 25%;
}
.progressbar.eight li {
  width: 12.5%;
}
.progressbar li {
  position: relative;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
  width: 33.3%;
  color: #999999;
  font-weight: bold;
  font-size: 12px;
}
.progressbar li:before {
  display: block;
  width: 18px;
  height: 18px;
  margin: 7px auto 20px auto;
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: #b1b1b1;
}
.progressbar li:after {
  position: absolute;
  z-index: -1;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  content: "";
  background-color: #cfcfcf;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active, .progressbar li.complete {
  color: #3c504f;
}
.progressbar li.active:before, .progressbar li.complete:before {
  background-color: #00b5ad;
}
.progressbar li.active:after, .progressbar li.active:after, .progressbar li.complete:after, .progressbar li.complete:after {
  background-color: #00b5ad;
}

.reading_status_popup_btn {
  cursor: pointer;
  font-size: 14px;
}

.reading_status_popup_body {
  display: none;
  margin-top: 20px;
}
.reading_status_popup_body.active {
  display: block;
}

.reading_status_label_area {
  text-align: center;
}
.reading_status_label_area .title_label {
  font-size: 16px;
  color: #2c2c2c;
  margin-bottom: 20px;
}
.reading_status_label_area .title {
  font-size: 40px;
  color: #2c2c2c;
  margin-bottom: 10px;
}
.reading_status_label_area .sub_title {
  font-size: 14px;
  color: #5b5b5b;
  margin-bottom: 10px;
}

.project_sales_information {
  padding-top: 28px;
  width: 100%;
  min-width: 0;
}
.project_sales_information__main {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.project_sales_information__block {
  width: 100%;
  min-width: 0;
  margin-bottom: 42px;
}
.project_sales_information__form {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.project_sales_information__choice_row, .project_sales_information__memo_row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) minmax(140px, 180px) minmax(0, 1fr);
  border: 1px solid #6f6f6f;
  margin-bottom: 28px;
}
.project_sales_information__choice_label, .project_sales_information__memo_label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 12px;
  border-right: 1px solid #6f6f6f;
  background: rgba(255, 255, 255, 0.04);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
.project_sales_information__choice, .project_sales_information__current_reading, .project_sales_information__memo_value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 16px;
  border-right: 1px solid #6f6f6f;
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
.project_sales_information__choice:last-child, .project_sales_information__memo_value:last-child {
  border-right: 0;
}
.project_sales_information__current_reading {
  flex-wrap: wrap;
  gap: 12px;
}
.project_sales_information__choice .app-inline-select-indicator {
  position: absolute;
  top: 50%;
  right: 16px;
  float: none !important;
  margin: 0;
  transform: translateY(-50%);
}
.project_sales_information__choice.fixedDisplayEditableSelect > .app-inline-select-indicator {
  z-index: 101;
  pointer-events: none;
}
.project_sales_information__choice .fixedDisplayEditableSelectOverlay {
  background: transparent;
}
.project_sales_information__choice .fixedDisplayEditableSelectOverlay .app-inline-select {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.project_sales_information__choice .fixedDisplayEditableSelectOverlay .app-inline-select-indicator {
  display: none !important;
}
.project_sales_information__choice .fixedDisplayEditableSelectOverlay .app-inline-select {
  visibility: hidden;
}
.project_sales_information__choice .overlay, .project_sales_information__choice .app-inline-select {
  width: 100% !important;
  height: 100%;
}
.project_sales_information__choice .app-inline-select {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  text-align: center;
}
.project_sales_information__field_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px 36px;
  margin-bottom: 34px;
  width: 100%;
  min-width: 0;
}
.project_sales_information__field_grid--antisocial {
  grid-template-columns: minmax(280px, 1fr) max-content;
  align-items: end;
}
.project_sales_information__field_grid--sales-schedule {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.project_sales_information__field_grid--sales-proposal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project_sales_information__field_grid--order-top, .project_sales_information__field_grid--order-auto {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.project_sales_information__field_grid--order {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.project_sales_information__field {
  min-width: 0;
}
.project_sales_information__field_label {
  margin-bottom: 8px;
  color: #555;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.project_sales_information__required {
  margin-left: 2px;
  color: #db2828;
}
.project_sales_information__field_value {
  min-height: 48px;
  padding: 14px 12px 8px;
  border-bottom: 2px solid #6f6f6f;
  background: rgba(255, 255, 255, 0.02);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
.project_sales_information__field_value--readonly {
  font-weight: 400;
}
.project_sales_information__field_note {
  min-height: 48px;
  padding-top: 14px;
  color: #555;
  overflow-wrap: anywhere;
}
.project_sales_information__memo_row {
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
}
.project_sales_information__memo_value {
  min-height: 72px;
  white-space: pre-wrap;
}
.project_sales_information__meeting_area {
  width: 100%;
  max-width: none;
  padding-left: 0;
}
.project_sales_information__empty_meeting {
  display: inline-flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.04);
}
.project_sales_information__empty_meeting p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.project_sales_information__meeting_table {
  width: 100%;
  margin-bottom: 18px;
}
.project_sales_information__meeting_button {
  width: fit-content;
}
.project_sales_information__upload {
  width: 100%;
  max-width: 420px;
}
.project_sales_information__upload .upload_file_area {
  min-height: 100px;
  margin-bottom: 10px;
}
.project_sales_information__separator {
  display: block;
  margin: 30px 0 10px;
  border: 0;
  border-top: 2px dashed #c6c6c6;
}
.project_sales_information__warning {
  margin: 0 0 24px;
  color: #db2828;
  font-size: 13px;
}
.project_sales_information__invoice_schedule {
  margin-top: 28px;
  width: 100%;
  min-width: 0;
}
.project_sales_information__invoice_schedule .flex.betweenCenter {
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.project_sales_information__invoice_schedule table {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}
.project_sales_information__invoice_schedule th, .project_sales_information__invoice_schedule td {
  overflow: hidden;
  padding-right: 10px !important;
  padding-left: 10px !important;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center !important;
  vertical-align: middle;
}
.project_sales_information__invoice_schedule th:nth-child(1), .project_sales_information__invoice_schedule td:nth-child(1), .project_sales_information__invoice_schedule th:nth-child(2), .project_sales_information__invoice_schedule td:nth-child(2) {
  width: 17%;
}
.project_sales_information__invoice_schedule th:nth-child(3), .project_sales_information__invoice_schedule td:nth-child(3) {
  width: 15%;
}
.project_sales_information__invoice_schedule th:nth-child(4), .project_sales_information__invoice_schedule td:nth-child(4), .project_sales_information__invoice_schedule th:nth-child(5), .project_sales_information__invoice_schedule td:nth-child(5) {
  width: 16%;
}
.project_sales_information__invoice_schedule th:nth-child(6), .project_sales_information__invoice_schedule td:nth-child(6) {
  width: 19%;
  white-space: nowrap;
  overflow: visible;
}
.project_sales_information__invoice_schedule td:nth-child(6) form {
  margin-left: 6px;
}
@media screen and (max-width: 1180px) {
  .project_sales_information__choice_row {
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  }
  .project_sales_information__choice {
    border-right: 0;
  }
  .project_sales_information__choice_label:nth-of-type(3) {
    border-top: 1px solid #6f6f6f;
  }
  .project_sales_information__choice_label:nth-of-type(3), .project_sales_information__choice_label:nth-of-type(3) + .project_sales_information__choice {
    border-top: 1px solid #6f6f6f;
  }
  .project_sales_information__field_grid--sales-proposal {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
  .project_sales_information__field_grid--order-top, .project_sales_information__field_grid--order-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
  .project_sales_information__field_grid--order {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}
@media screen and (min-width: 1440px) {
  .project_sales_information__field_grid--sales-schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project_sales_information__field_grid--order-auto {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 960px) {
  .project_sales_information__field_grid--antisocial {
    grid-template-columns: 1fr;
  }
}

.document_row_parent .readOnly {
  position: relative;
}
.document_row_parent .readOnly::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #d3d3d3;
  background-color: #d3d3d3;
  opacity: 0.2;
}

.toggleCostEstimateItemDetail {
  cursor: pointer;
}
.toggleCostEstimateItemDetail.on i {
  transform: rotate(180deg);
}

.costEstimateItemDetailContent {
  display: none;
  background-color: #f8faff;
  font-size: 14px;
}

video#preview_video:focus {
  outline: none;
}

dialog#dialog:-internal-dialog-in-top-layer::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.ec-event {
  padding: 5px;
}

.ec-event-title {
  font-size: 12px !important;
}

.text_link {
  background: none;
  border: none;
  cursor: pointer;
  color: #4183c4;
}
.text_link.item {
  width: 100%;
}

.link_to_button {
  border: none;
  cursor: pointer;
}

.ec-event-body {
  display: block !important;
  overflow: hidden;
}

.client_phase_table td.active {
  background-color: #f28d8d !important;
}

.contact_info_parent {
  height: calc(100vh - 230px);
  overflow-y: scroll;
}

@media screen and (max-width: 767px) {
  .contact_info_parent {
    height: auto;
    overflow-y: visible;
  }
}
.toggleBoolean {
  cursor: pointer;
}
.toggleBoolean i {
  font-size: 15px !important;
}

.projectRightArrow {
  position: absolute;
  right: -36px;
  top: 50%;
  z-index: 1;
}
.projectRightArrow i {
  font-size: 28px !important;
  color: #b0b0b0;
}

.projectTiltedToTheLeftArrow {
  position: absolute;
  left: -35px;
  bottom: -29px;
  transform: rotate(135deg);
  z-index: 1;
}
.projectTiltedToTheLeftArrow i {
  font-size: 28px !important;
  color: #b0b0b0;
}

@media screen and (max-width: 767px) {
  .projectRightArrow,
  .projectTiltedToTheLeftArrow {
    display: none;
  }
}
.isCompetitorContract {
  display: none !important;
}
.isCompetitorContract.show {
  display: flex !important;
}

.checkbox.noRequiredAsterisk::after {
  display: none !important;
}

.noRecentIssueContractDetail,
.otherLostReasonDetail {
  display: none;
}

.created_by_ai {
  position: relative;
}
.created_by_ai::after {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(/ai.png) no-repeat center center;
  background-size: contain;
  border-radius: 50%;
  position: absolute;
  right: 13px;
  top: 34px;
  opacity: 0.7;
  pointer-events: none;
}

td.created_by_ai::after {
  top: 10px;
}

.ai-icon {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 20px;
  opacity: 0.7;
  border-radius: 50%;
  vertical-align: bottom;
  margin: 0 2px;
}
.ai-icon img {
  width: 100%;
  height: 100%;
}

.googleScheduleCheckBox {
  position: relative;
  top: 3px;
  right: -10px;
  margin-top: 5px;
}

@media screen and (max-width: 1200px) {
  .schedule_adjustment_users_list {
    column-count: 5 !important;
  }
}
@media screen and (max-width: 1200px) and (max-width: 1100px) {
  .schedule_adjustment_users_list {
    column-count: 4 !important;
  }
}
@media screen and (max-width: 1200px) and (max-width: 1100px) and (max-width: 767px) {
  .schedule_adjustment_users_list {
    column-count: 2 !important;
  }
}
.ptopSummaryBdtNon {
  border-top: none !important;
}

.controller_accounting_imports.action_index .accounting-imports .import-row {
  padding: 16px 0;
}
.controller_accounting_imports.action_index .accounting-imports .import-row + .import-row {
  border-top: 1px solid #d9dcdf;
}
.controller_accounting_imports.action_index .accounting-imports .import-label {
  font-size: 20px;
  font-weight: 700;
}
.controller_accounting_imports.action_index .accounting-imports .import-note {
  font-size: 13px;
  color: #6b6b6b;
}
.controller_accounting_imports.action_index .accounting-imports input[type=file].import-file {
  flex: 1 1 auto;
  min-width: 0;
}
.controller_accounting_imports.action_index .accounting-imports form.import-form {
  margin: 0;
}

.estimateSubmissionCheckButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.estimateSubmissionCheckButton:hover,
.estimateSubmissionCheckButton:focus-visible {
  background: rgba(0, 181, 173, 0.08);
  outline: none;
}

.estimateSubmissionCheckButton.updating {
  cursor: wait;
  opacity: 0.55;
}

.estimateSubmissionCheckButton__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 3px solid #777;
  border-radius: 4px;
  color: transparent;
  line-height: 1;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.estimateSubmissionCheckButton.checked .estimateSubmissionCheckButton__box {
  border-color: #00b5ad;
  color: #00b5ad;
  box-shadow: 0 0 0 2px rgba(0, 181, 173, 0.18);
}

.estimateSubmissionCheckButton__box span {
  margin: 0 !important;
  font-size: 22px;
}

.project_invoice_actual__table {
  table-layout: fixed;
}

.project_invoice_actual {
  font-size: 12px;
  line-height: 1.4;
}
.project_invoice_actual .div-th,
.project_invoice_actual .div-td {
  font-size: 12px;
  line-height: 1.35;
  padding-left: 0.35em;
  padding-right: 0.35em;
  overflow-wrap: normal;
  white-space: nowrap;
}
.project_invoice_actual .div-th,
.project_invoice_actual .div-th.whiteSpaceNowrap {
  white-space: nowrap !important;
}
.project_invoice_actual .div-td input,
.project_invoice_actual .div-td select {
  font-size: 11px;
}
.project_invoice_actual .div-tr > .div-td:nth-child(4) {
  white-space: normal;
}
.project_invoice_actual .project_invoice_actual__invoice_note {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.project_invoice_actual .div-tr > .div-th:nth-child(1),
.project_invoice_actual .div-tr > .div-td:nth-child(1),
.project_invoice_actual .div-tr > .div-th:nth-child(6),
.project_invoice_actual .div-tr > .div-td:nth-child(6) {
  width: 10%;
}
.project_invoice_actual .div-tr > .div-th:nth-child(2),
.project_invoice_actual .div-tr > .div-td:nth-child(2),
.project_invoice_actual .div-tr > .div-th:nth-child(5),
.project_invoice_actual .div-tr > .div-td:nth-child(5) {
  width: 11%;
}
.project_invoice_actual .div-tr > .div-th:nth-child(3),
.project_invoice_actual .div-tr > .div-td:nth-child(3) {
  width: 10%;
}
.project_invoice_actual .div-tr > .div-th:nth-child(4),
.project_invoice_actual .div-tr > .div-td:nth-child(4) {
  width: 28%;
  word-break: break-word;
}
.project_invoice_actual .div-tr > .div-th:nth-child(7),
.project_invoice_actual .div-tr > .div-td:nth-child(7) {
  width: 7%;
}
.project_invoice_actual .div-tr > .div-th:nth-child(8),
.project_invoice_actual .div-tr > .div-td:nth-child(8) {
  width: 8%;
}
.project_invoice_actual .div-tr > .div-th:nth-child(9),
.project_invoice_actual .div-tr > .div-td:nth-child(9) {
  width: 5%;
}
.project_invoice_actual .div-tr > .div-td:nth-child(9) {
  text-align: center;
}
.project_invoice_actual .div-tr > .div-td:nth-child(9) form {
  display: inline-flex;
  justify-content: center;
  margin-left: 0 !important;
}

:root {
  --app-frame-gutter: 0px;
  --app-topbar-height: 76px;
  --app-sidebar-width: 248px;
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: #dfe7f2;
  --app-border-strong: #c8d4e5;
  --app-text: #152238;
  --app-text-muted: #5c667a;
  --app-text-subtle: #7b8496;
  --app-sidebar-bg: #0b2343;
  --app-sidebar-bg-strong: #163b6d;
  --app-sidebar-subtle: rgba(255, 255, 255, 0.1);
  --app-sidebar-text: rgba(255, 255, 255, 0.82);
  --app-sidebar-muted: rgba(255, 255, 255, 0.62);
  --app-accent: #2f6bff;
  --app-accent-strong: #1f56d9;
  --app-accent-soft: #edf4ff;
  --app-accent-border: #b8ccff;
  --app-shadow-soft: 0 4px 12px rgba(22, 59, 109, 0.08);
  --app-font-sans: var(--font-sans);
}

/* 深掘りAIログ。共通のpanel / form-grid / data-table / detail-gridを組み合わせる。 */
.deep-dive-log-page {
  display: grid;
  gap: var(--space-5);
}

.deep-dive-log-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

.deep-dive-log-kpis article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.deep-dive-log-kpis span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.deep-dive-log-kpis strong {
  color: var(--color-navy);
  font-family: var(--font-number);
  font-size: var(--font-size-xl);
}

.deep-dive-log-question {
  min-width: 260px;
  max-width: 420px;
  white-space: normal;
}

.deep-dive-log-message {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Rails adaptation: long model IDs and JSON stay inside the standard detail/evidence components. */
.deep-dive-log-page .detail-grid__value {
  overflow-wrap: anywhere;
}

.deep-dive-log-json {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .deep-dive-log-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .deep-dive-log-kpis {
    grid-template-columns: 1fr;
  }
}
body.user {
  background: radial-gradient(circle at top right, rgba(220, 235, 255, 0.9), transparent 34rem), radial-gradient(circle at bottom left, rgba(237, 244, 255, 0.85), transparent 26rem), var(--app-bg) !important;
  color: var(--app-text);
  font-family: var(--app-font-sans);
}

body.partner {
  background: radial-gradient(circle at top right, rgba(220, 235, 255, 0.9), transparent 34rem), radial-gradient(circle at bottom left, rgba(237, 244, 255, 0.85), transparent 26rem), var(--app-bg) !important;
  color: var(--app-text);
  font-family: var(--app-font-sans);
}

.app-button,
button.app-button,
input.app-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 12px !important;
  appearance: none;
  background: #ffffff !important;
  color: #163b6d !important;
  box-shadow: var(--app-shadow-soft) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.app-button:hover {
  border-color: var(--app-accent) !important;
  background: var(--app-accent-soft) !important;
  color: var(--app-accent-strong) !important;
}

.app-button-primary,
button.app-button-primary,
input.app-button-primary {
  border-color: var(--app-accent) !important;
  background: var(--app-accent) !important;
  color: #ffffff !important;
}

.app-button-primary:hover {
  border-color: var(--app-accent-strong) !important;
  background: var(--app-accent-strong) !important;
  color: #ffffff !important;
}

.app-button-secondary {
  color: var(--app-text-muted) !important;
}

.app-button-compact,
button.app-button-compact,
input.app-button-compact {
  min-height: 30px;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.app-page {
  display: grid;
  gap: 20px;
}

.app-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.app-page-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-page-heading h1,
.app-page-title {
  margin: 0;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.3;
}

.app-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.app-section,
.app-panel {
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--app-shadow-soft);
}

.app-section {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.app-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-section-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-section-title {
  margin: 0;
  color: var(--app-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.app-section-description {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.app-section-actions,
.app-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.app-section-actions {
  justify-content: flex-end;
}

.app-panel {
  padding: 14px;
}

.business-process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.business-process-card {
  min-width: 0;
}

.app-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.app-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--app-shadow-soft);
}

.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  font-size: 14px;
}

.app-table th,
.app-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-border);
  text-align: left;
  vertical-align: middle;
}

.app-table th {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
}

.app-table tr:last-child > th,
.app-table tr:last-child > td {
  border-bottom: 0;
}

.app-table tbody tr:hover {
  background: #f8fbff;
}

.app-table a,
.app-text-link {
  color: var(--app-text);
  font-weight: 800;
  text-decoration: none;
}

.app-table a:hover,
.app-text-link:hover {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-table th.app-table-date,
.app-table td.app-table-date,
.app-table .app-table-date,
.app-table .app-table-nowrap {
  white-space: nowrap;
}

.app-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.app-badge,
.app-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--app-border);
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.app-badge {
  border-radius: 6px;
}

.app-badge.green,
.app-badge.status-green {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.app-badge.red,
.app-badge.status-red {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.app-badge.grey,
.app-badge.gray,
.app-badge.status-grey,
.app-badge.status-gray {
  border-color: #d4d4d8;
  background: #f4f4f5;
  color: #52525b;
}

.app-badge.blue,
.app-badge.status-blue {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.app-badge.olive,
.app-badge.status-olive {
  border-color: #d9f99d;
  background: #f7fee7;
  color: #4d7c0f;
}

.app-badge.orange,
.app-badge.status-orange {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.app-badge.teal,
.app-badge.status-teal {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

.app-badge.yellow,
.app-badge.status-yellow {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.app-badge.violet,
.app-badge.status-violet {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

.app-badge.black,
.app-badge.status-black {
  border-color: var(--app-text);
  background: var(--app-text);
  color: #ffffff;
}

.app-badge-compact {
  width: 24px;
  height: 24px;
  padding: 0;
  justify-content: center;
}

.app-help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.app-help-inline {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}

.app-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-disclosure-icon {
  display: inline-flex;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.app-check-mark,
.app-muted-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  font-weight: 900;
}

.app-check-mark {
  color: #047857;
}

.app-muted-mark {
  color: var(--app-text-muted);
}

.app-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--app-border-strong);
  border-radius: 5px;
  color: #047857;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.app-check-box.is-checked {
  border-color: #059669;
  background: #ecfdf5;
}

.app-pill {
  border-radius: 999px;
}

/* 点線の空状態は画面横断で同じコンパクトな密度に統一する */
.app-empty {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px dashed var(--app-border-strong);
  border-radius: 10px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.app-alert {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  background: var(--app-surface-muted);
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.6;
}

.app-alert-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.app-alert-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.app-alert-danger {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.app-alert-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.app-alert-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.app-alert-close::before,
.app-alert-close::after {
  position: absolute;
  top: 13px;
  left: 7px;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.app-alert-close::before {
  transform: rotate(45deg);
}

.app-alert-close::after {
  transform: rotate(-45deg);
}

.app-alert-close:hover {
  background: rgba(24, 24, 27, 0.08);
}

.instantMessage,
.backgroundSettingMessage {
  display: none;
}

.app-form-surface {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.app-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.app-form .fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
  margin: 0;
}

.app-form .one.fields {
  grid-template-columns: 1fr;
}

.app-form .two.fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-form .three.fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-form .four.fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-form-section {
  display: grid;
  gap: 12px;
}

.app-form-panel {
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

.app-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.app-form-grid-one {
  grid-template-columns: 1fr;
}

.app-form-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-form-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-form-field,
.app-form .field {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
}

.app-form-field-wide {
  grid-column: span 2;
}

.app-form-field-full {
  grid-column: 1/-1;
}

.app-form-field > label,
.app-form .field > label,
.app-form label.fwb,
.app-form-label,
.app-form-section-title {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.app-form-field.required > label::after,
.app-form .required > label::after,
.app-form label.required::after {
  margin-left: 4px;
  color: #dc2626;
  content: "*";
}

.app-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.app-form select,
.app-form textarea,
.app-form-field input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.app-form-field select,
.app-form-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

.app-form input:disabled {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
}

.app-form textarea,
.app-form-field textarea {
  min-height: 96px;
  padding: 10px 11px;
  line-height: 1.6;
  resize: vertical;
}

.app-form input:focus,
.app-form select:focus,
.app-form textarea:focus,
.app-form-field input:focus,
.app-form-field select:focus,
.app-form-field textarea:focus {
  outline: 2px solid rgba(24, 24, 27, 0.12);
  outline-offset: 1px;
}

.app-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.app-form-note {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.bulk-content-update-form [data-bulk-delivery-context][hidden] {
  display: none;
}

/* ログイン等の中央寄せフォーム。legacy の body{height:calc(100% - 75px)!important} が
   残ると min-height:100vh の中身がはみ出て不要な縦スクロールになるため body 側を打ち消す。
   padding を含めて 100vh に収めるため border-box にする。 */
body.form {
  height: auto !important;
  min-height: 100vh;
  margin: 0;
}

.app-centered-form {
  box-sizing: border-box;
  display: grid;
  min-height: 100vh;
  padding: 48px 20px;
  background: var(--app-bg);
}

.app-centered-form-card {
  width: min(480px, 100%);
  margin: 0 auto;
}

.app-centered-form-card--login-type-selection {
  width: min(560px, 100%);
}

.app-centered-form-title {
  margin: 0 0 18px;
  color: var(--app-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

/* noframe レイアウト(パートナー招待受諾/契約同意、エラー、動画表示、公開プレビュー)のモダン化。
   旧 .site_title の暗い文字ロゴヘッダーを、承認済み共通コンポーネント `.topbar`
   (parts.scss / design_parts、box-sizing: border-box・sticky 済み)へ置き換える。
   legacy frame.scss の header{position:fixed;background:#2f323a} と body 高さは
   `.topbar` の指定(class 詳細度)と下記の打ち消しで上書きされる。 */
body.noframe {
  height: auto !important;
  min-height: 100vh;
  margin: 0;
  background: var(--app-bg) !important;
  color: var(--app-text);
}

/* `.topbar` はサイドバー用ではないが、ブランド表示(.brand)を載せるため
   ページ固有の微調整のみ行う: サイドバー用の下マージンを消し、
   明るい背景で本文色のブランド名にする。 */
body.noframe .topbar .brand {
  margin-bottom: 0;
}

body.noframe .topbar .brand__name {
  color: var(--app-text);
}

/* `.topbar` は sticky で通常フローに高さを確保するため、本文は素直に下へ流れる。
   先頭要素がヘッダー裏に隠れないよう追加のオフセットは不要。 */
.noframe-main {
  padding: 24px 20px 48px;
}

/* パートナー登録/規約同意のコンテンツ幅。固定 860px だとモバイルで
   ビューポートをはみ出す(横スクロール・ボタン画面外)ため、レスポンシブにする。 */
.partner-accounts-new-page,
.partner-contract-check-page {
  width: min(860px, 100%);
  margin-inline: auto;
}

/* エラー画面(application/error)の .app-centered-form は本来 min-height:100vh の
   全画面センタリング用。noframe の topbar + .noframe-main パディング内に入ると
   高さが二重(≒100vh+余白)になり不要な縦スクロールが出るため、ここでは打ち消す。 */
.noframe-main .app-centered-form {
  min-height: 0;
  padding: 0;
}

/* パートナー規約同意画面(contract_check): 旧 .app-auth-page の縦中央寄せをやめ、
   パネル内に上から素直に積む。約款本文は器内でスクロールさせる。 */
.partner-contract-check-lead {
  margin: 0 0 20px;
  line-height: 1.7;
  color: var(--app-text);
}

.partner-contract-check-page .contract_text {
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
}

.partner-contract-check-page .app-form-actions {
  margin-top: 20px;
}

.partner-contract-check-footer {
  margin: 20px 0 0;
  color: var(--app-text-muted);
  font-size: 12px;
  text-align: center;
}

.partner-contract-check-footer a {
  margin: 0 3px;
  color: var(--app-text-muted);
  text-decoration: underline;
}

.app-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-checkbox,
.app-checkbox-stack {
  display: flex;
}

.app-checkbox {
  align-items: center;
  gap: 8px;
  color: var(--app-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  user-select: none;
}

.app-checkbox-pill {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  line-height: 1;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.app-checkbox-pill:hover {
  border-color: #a1a1aa;
  background: var(--app-surface-muted);
}

.app-checkbox-pill:has(input[type=checkbox]:checked) {
  border-color: var(--color-primary);
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.app-checkbox input[type=checkbox] {
  position: relative;
  display: inline-grid;
  place-content: center;
  flex: 0 0 16px;
  width: 16px;
  min-height: auto;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--app-border-strong);
  border-radius: 4px;
  appearance: none;
  background: #ffffff;
  cursor: pointer;
}

.app-checkbox input[type=checkbox]::after {
  width: 5px;
  height: 8px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  content: "";
  opacity: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.app-checkbox input[type=checkbox]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.app-checkbox input[type=checkbox]:checked::after {
  opacity: 1;
}

.app-checkbox input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(24, 24, 27, 0.16);
  outline-offset: 2px;
}

.app-radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-radio {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.app-radio:hover {
  border-color: #a1a1aa;
  background: var(--app-surface-muted);
}

.app-radio:has(input[type=radio]:checked) {
  border-color: var(--color-primary);
  background: var(--app-surface-muted);
}

.app-radio input[type=radio] {
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--app-border-strong);
  border-radius: 50%;
  appearance: none;
  background: #ffffff;
  cursor: pointer;
}

.app-radio input[type=radio]::after {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  opacity: 0;
}

.app-radio input[type=radio]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.app-radio input[type=radio]:checked::after {
  opacity: 1;
}

.app-checkbox-stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.app-date-range,
.app-number-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.app-date-range span,
.app-number-range span {
  color: var(--app-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.app-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.app-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.app-tab:hover,
.app-tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  text-decoration: none;
}

.app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.app-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.app-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.app-card-title {
  margin: 0;
  color: var(--app-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}

.app-card-meta {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.app-detail-grid,
.app-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.app-detail-item,
.app-info-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-detail-label,
.app-info-label {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.app-detail-value,
.app-info-value {
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.app-auth-page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 120px);
  padding: 32px 16px;
}

.app-auth-card {
  width: min(100%, 520px);
  padding: 24px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(24, 24, 27, 0.08);
}

.app-upload-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 18px;
  border: 1px dashed var(--app-border-strong);
  border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.app-upload-area:hover,
.app-upload-area:focus-within {
  border-color: #a1a1aa;
  background: #f6f6f7;
}

.app-upload-area .upload_file_input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.app-upload-area .upload_file_label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--app-border-strong);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.app-upload-area .upload_file_label::before {
  display: inline-block;
  width: 12px;
  height: 14px;
  margin-right: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  transform: translateY(-1px);
}

.app-upload-help {
  margin: 6px 0 0;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.app-upload-toggle::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  background: linear-gradient(currentColor, currentColor) center/10px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 10px no-repeat;
  content: "";
}

.app-upload-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.app-upload-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-upload-list-title {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.app-upload-count,
.app-upload-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.app-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.app-upload-item {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.app-upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.app-upload-preview img,
.app-upload-preview video {
  display: block;
  max-width: 100%;
  max-height: 116px;
  object-fit: contain;
}

.app-upload-preview video {
  width: 100%;
}

.app-upload-preview-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 116px;
}

.app-upload-file-preview {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.app-upload-file-preview:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-upload-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--app-border-strong);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 900;
}

.app-upload-item-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.app-upload-file-name {
  overflow-wrap: anywhere;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.app-upload-file-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.app-upload-item-actions {
  display: flex;
  justify-content: flex-end;
}

.app-upload-delete-form {
  margin: 0;
}

.app-upload-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--app-border-strong);
  border-radius: 7px;
  appearance: none;
  background: #ffffff;
  color: var(--app-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.app-upload-delete:hover {
  border-color: #a1a1aa;
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.app-disclosure {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.app-disclosure > .drop_down_trigger {
  justify-self: start;
}

.app-disclosure > .drop_down_target {
  margin-top: 0 !important;
}

.app-disclosure-list {
  display: grid;
  gap: 8px;
}

.app-disclosure-item {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.app-disclosure-summary {
  padding: 10px 12px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
}

.app-disclosure-content {
  padding: 12px;
  border-top: 1px solid var(--app-border);
}

.app-inline-menu {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.app-inline-menu > a,
.app-inline-menu > button {
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--app-border);
  appearance: none;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.app-inline-menu > a:last-child,
.app-inline-menu > button:last-child {
  border-right: 0;
}

.app-inline-menu > a:hover,
.app-inline-menu > button:hover {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.app-inline-select {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

.app-inline-select[multiple] {
  min-height: 92px;
  padding: 8px 9px;
}

.app-inline-select-indicator {
  float: right;
  color: var(--app-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.app-upload-panel,
.app-file-history-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.app-upload-panel-title {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.app-upload-status-header {
  padding: 9px 12px;
  border: 1px solid var(--app-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--app-text);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.app-upload-status-body {
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 0 0 8px 8px;
  background: #ffffff;
}

.app-upload-status-note {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.app-upload-progress {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 38px 10px 10px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.app-upload-progress-bar {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--app-surface-muted);
}

.app-upload-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--app-text);
  transition: width 0.18s ease;
}

.app-upload-progress-label {
  overflow-wrap: anywhere;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.app-upload-progress.is-error {
  border-color: #fca5a5;
  background: #fef2f2;
}

.app-upload-progress.is-error .app-upload-progress-fill {
  background: #dc2626;
}

.app-upload-progress-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
}

.app-upload-progress-close::before,
.app-upload-progress-close::after {
  position: absolute;
  top: 11px;
  left: 6px;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  content: "";
}

.app-upload-progress-close::before {
  transform: rotate(45deg);
}

.app-upload-progress-close::after {
  transform: rotate(-45deg);
}

.app-file-history {
  margin-top: 12px;
}

.app-file-history .drop_down_trigger {
  gap: 8px;
}

.app-file-history-panel {
  background: var(--app-surface-muted);
}

.app-file-history-row {
  padding: 10px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
}

@media screen and (max-width: 1180px) {
  .business-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .app-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-form .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-form-grid-one {
    grid-template-columns: 1fr;
  }
  .app-detail-grid,
  .app-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 700px) {
  .business-process-grid {
    grid-template-columns: 1fr;
  }
  .app-stats-grid {
    grid-template-columns: 1fr;
  }
  .app-page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .app-page-actions {
    justify-content: flex-start;
  }
  .app-section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .app-section-actions {
    justify-content: flex-start;
  }
  .app-form-grid,
  .app-form .fields,
  .app-form-grid-two,
  .app-form-grid-three {
    grid-template-columns: 1fr;
  }
  .app-form-field-wide {
    grid-column: auto;
  }
  .app-detail-grid,
  .app-info-grid {
    grid-template-columns: 1fr;
  }
}
body.user,
body.partner {
  /* typography は design_parts の body 定義に合わせる(値は parts.scss の token を参照) */
  background: var(--app-bg) !important;
  color: var(--app-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100vh !important;
  overflow: hidden;
}

body.user #dimmer,
body.partner #dimmer {
  display: none;
  z-index: 30;
  opacity: 0.36;
}

body.user .global_navi,
body.partner .global_navi {
  top: var(--app-frame-gutter);
  width: var(--app-sidebar-width);
  left: calc(-1 * var(--app-sidebar-width));
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--app-frame-gutter) * 2);
  /* モバイルのアドレスバー分を含む 100vh だとサイドバー下端が画面外に出て
     最下部メニューが見切れるため、dvh 対応ブラウザでは実表示領域に合わせる */
  height: calc(100dvh - var(--app-frame-gutter) * 2);
  /* design_parts の .sidebar 相当。container は frame 都合で .global_navi のまま */
  padding: var(--space-5);
  box-sizing: border-box;
  border-right: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--color-navy-900), var(--color-navy)) !important;
  color: var(--color-white);
  box-shadow: none;
  z-index: 40;
}

body.user.active .global_navi,
body.partner.active .global_navi {
  left: var(--app-frame-gutter);
}

body.user .global_navi .side-nav,
body.partner .global_navi .side-nav {
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

body.customer .global_navi .menu .item .app-nav-button-form {
  margin: 0;
}

body.customer .global_navi .menu .item .app-nav-button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 0.5px solid #4f4f4f !important;
  border-left: 0;
  background: transparent;
  color: #ababab;
  cursor: pointer;
  font: inherit;
  font-family: "Noto Sans Japanese", sans-serif;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-align: left;
  text-decoration: none !important;
}

body.customer .global_navi .menu .item .app-nav-button:hover {
  background: transparent;
  color: #ffffff;
}

body.user .main_container,
body.partner .main_container {
  position: fixed;
  top: var(--app-frame-gutter);
  right: var(--app-frame-gutter);
  bottom: var(--app-frame-gutter);
  left: var(--app-frame-gutter);
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  padding-bottom: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  z-index: 20;
  transition: left 0.3s, width 0.3s;
}

body.user.active .main_container,
body.partner.active .main_container {
  left: calc(var(--app-frame-gutter) + var(--app-sidebar-width));
  width: auto;
  margin-left: 0;
  border-left: 0;
  border-radius: 0;
}

body.user .app-topbar,
body.partner .app-topbar {
  /* 見た目は parts.scss の .topbar。frame 都合のサイズ固定のみ残す */
  flex: 0 0 auto;
}

body.user #menu-btn.sidebar-toggle,
body.partner #menu-btn.sidebar-toggle {
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  appearance: none;
  background: transparent;
  color: var(--app-text);
  cursor: pointer;
}

body.user #menu-btn.sidebar-toggle:hover,
body.partner #menu-btn.sidebar-toggle:hover {
  background: var(--app-accent-soft);
}

body.user #menu-btn.sidebar-toggle::before,
body.partner #menu-btn.sidebar-toggle::before {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--app-text);
  box-sizing: border-box;
  border-radius: 3px;
  content: "";
}

body.user #menu-btn.sidebar-toggle::after,
body.partner #menu-btn.sidebar-toggle::after {
  position: absolute;
  left: 14px;
  top: 9px;
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: var(--app-text);
  content: "";
}

body.user .app-topbar-separator,
body.partner .app-topbar-separator {
  width: 1px;
  height: 24px;
  margin: 0 18px;
  background: var(--app-border);
}

/* パンくずは2行構成。上段(.app-breadcrumb-parents)=親階層 / 下段(.app-breadcrumb-current)=現在地。
   横幅を食い合わないので、現在地は省略せず全文表示できる。 */
body.user .app-breadcrumbs,
body.partner .app-breadcrumbs {
  display: grid;
  align-content: center;
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  gap: 2px;
  color: var(--app-text-muted);
  font-weight: 800;
}

/* 上段: 親階層。改行させず、幅が足りない場合はここだけを3点リーダーで省略する */
body.user .app-breadcrumb-parents,
body.partner .app-breadcrumb-parents {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  font-size: var(--font-size-xs);
}

body.user .app-breadcrumb-link,
body.partner .app-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--app-text-muted);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.user .app-breadcrumb-link:hover,
body.partner .app-breadcrumb-link:hover {
  color: var(--app-text);
  text-decoration: underline;
}

/* 「プロジェクト名(ID)」形式のリンク階層: 省略するのは名前部分だけで、IDは常に表示する */
.app-breadcrumb-link .app-breadcrumb-name {
  min-width: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-breadcrumb-link .app-breadcrumb-suffix {
  flex: 0 0 auto;
  padding-left: 0.15em;
  color: var(--app-text-muted);
}

/* 下段: 現在地。本文と同じ大きさの太字で、折り返して全文を表示する */
body.user .app-breadcrumb-current,
body.partner .app-breadcrumb-current {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.35em;
  color: #0b2343;
  font-size: 1rem;
  line-height: 1.35;
}

.app-breadcrumb-current .app-breadcrumb-project-name {
  flex: 0 1 auto;
  min-width: 0;
}

.app-breadcrumb-project-name .inline-edit {
  min-width: 0;
}

.app-breadcrumb-project-name .inline-edit__value {
  overflow-wrap: anywhere;
}

.app-breadcrumb-project-name .inline-edit__suffix,
.app-breadcrumb-current .app-badge {
  flex: 0 0 auto;
}

body.user .app-breadcrumb-separator,
body.partner .app-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  color: var(--app-text-muted);
}

body.user .app-breadcrumb-separator::before,
body.partner .app-breadcrumb-separator::before {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

body.user .main_content,
body.partner .main_content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 32px;
  overflow: auto;
  background: transparent;
}

.dashboard-loading-screen {
  position: absolute;
  inset: var(--app-topbar-height) 0 0;
  z-index: 35;
  display: grid;
  align-items: safe center;
  justify-items: center;
  min-height: 0;
  padding: var(--space-6);
  box-sizing: border-box;
  overflow: auto;
}

.dashboard-loading-screen[hidden] {
  display: none;
}

@media screen and (max-width: 767px) {
  .dashboard-loading-screen {
    padding: var(--space-4);
  }
}
body.user #menu-btn span,
body.partner #menu-btn span {
  background: var(--app-text);
}

@media screen and (min-width: 768px) {
  body.user:not(.nav-closed) .global_navi,
  body.partner:not(.nav-closed) .global_navi {
    left: var(--app-frame-gutter);
  }
  body.user:not(.nav-closed) .main_container,
  body.partner:not(.nav-closed) .main_container {
    left: calc(var(--app-frame-gutter) + var(--app-sidebar-width));
    width: auto;
    margin-left: 0;
    border-left: 0;
    border-radius: 0;
  }
  body.user.nav-closed .global_navi,
  body.partner.nav-closed .global_navi {
    left: calc(-1 * var(--app-sidebar-width));
  }
  body.user.nav-closed .main_container,
  body.partner.nav-closed .main_container {
    left: var(--app-frame-gutter);
    border-left: 0;
    border-radius: 0;
  }
  body.user #dimmer,
  body.partner #dimmer,
  body.user.active #dimmer,
  body.partner.active #dimmer {
    display: none !important;
  }
}
@media screen and (max-width: 1080px) {
  body.user .main_content,
  body.partner .main_content {
    padding: 18px 14px;
  }
  body.user .app-topbar,
  body.partner .app-topbar {
    padding: 0 1rem;
  }
  body.user .app-topbar .user-menu__text,
  body.partner .app-topbar .user-menu__text {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  body.user.active #dimmer,
  body.partner.active #dimmer {
    display: block !important;
  }
  body.user.active .main_container,
  body.partner.active .main_container {
    left: var(--app-frame-gutter);
    border-left: 0;
    border-radius: 0;
  }
}
/* パートナー側お知らせは、社員側(.works-announcements-page)と同様に
   メインコンテンツ幅いっぱいに広げる(旧 max-width:1180px の制約を撤去)。 */
.announcement-page {
  width: 100%;
}

.announcement-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.announcement-heading {
  margin: 0;
  color: var(--app-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.announcement-subheading {
  margin: 6px 0 0;
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

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

.announcement-actions form {
  margin: 0;
}

.announcement-button,
input.announcement-button,
button.announcement-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--app-text) !important;
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.announcement-button:hover {
  border-color: #a1a1aa !important;
  background: #f4f4f5 !important;
  color: var(--app-text) !important;
}

.announcement-button-primary,
input.announcement-button-primary,
button.announcement-button-primary {
  border-color: var(--app-accent-strong) !important;
  background: var(--app-accent-strong) !important;
  color: #ffffff !important;
}

.announcement-button-primary:hover {
  border-color: #27272a !important;
  background: #27272a !important;
  color: #ffffff !important;
}

.announcement-search {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.announcement-search .fields {
  margin-bottom: 0 !important;
}

.announcement-search label {
  color: var(--app-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.announcement-search input[type=search],
.announcement-search input[type=text] {
  border-color: var(--app-border) !important;
  border-radius: 7px !important;
}

.announcement-checkbox-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}

.announcement-search .announcement-target-field > label {
  margin-bottom: 4px !important;
}

.announcement-search .announcement-target-field .announcement-checkbox-group {
  align-items: flex-start;
  min-height: 0;
  padding-top: 0;
}

.announcement-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.announcement-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  font-size: 13px;
}

.announcement-table th,
.announcement-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: top;
}

.announcement-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.announcement-table thead th:first-child {
  border-top-left-radius: 8px;
}

.announcement-table thead th:last-child {
  border-top-right-radius: 8px;
}

.announcement-table tbody tr:hover td {
  background: var(--app-surface-muted);
}

.announcement-table tbody tr:last-child td {
  border-bottom: 0;
}

.announcement-table a {
  color: var(--app-text);
  font-weight: 700;
  text-decoration: none;
}

.announcement-table a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announcement-table-id {
  width: 72px;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.announcement-table-date {
  width: 120px;
  white-space: nowrap;
}

.announcement-table-tags {
  width: 190px;
}

.announcement-table-targets {
  width: 140px;
}

.announcement-title-cell {
  min-width: 280px;
}

.announcement-tag,
.announcement-pill,
.announcement-important,
.announcement-unread {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0 4px 4px 0;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* 重要お知らせのバッジ(一覧)。固定バナー(.pinned-notice)と同系の amber。 */
.announcement-important {
  border: 1px solid #d97706;
  background: #d97706;
  color: #ffffff;
}

.announcement-tag {
  border: 1px solid var(--app-border);
  background: #ffffff;
  color: var(--app-text-muted);
}

.announcement-pill {
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.announcement-unread {
  border: 1px solid var(--app-text);
  background: var(--app-text);
  color: #ffffff;
}

.announcement-empty {
  padding: 32px 16px !important;
  color: var(--app-text-muted);
  text-align: center;
}

.announcement-detail-page {
  max-width: 960px;
}

.announcement-detail {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.announcement-detail-row {
  display: grid;
  grid-template-columns: 136px 1fr;
  border-bottom: 1px solid var(--app-border);
}

.announcement-detail-row:last-child {
  border-bottom: 0;
}

.announcement-detail-label,
.announcement-detail-value {
  padding: 14px 16px;
}

.announcement-detail-label {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.announcement-detail-value {
  color: var(--app-text);
  font-size: 14px;
  line-height: 1.75;
}

.announcement-detail-title {
  font-size: 16px;
  font-weight: 800;
}

.announcement-body {
  line-height: 1.85;
}

.announcement-body p {
  margin-top: 0;
}

.announcement-form-page {
  max-width: 980px;
}

.announcement-form-surface {
  padding: 20px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.announcement-textarea {
  min-height: 300px !important;
}

.announcement-form-actions {
  margin-top: 2px;
}

.announcement-images {
  margin-top: 16px;
}

.announcement-images h4 {
  margin: 0 0 10px;
  color: var(--app-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.announcement-images .bgcf8f8f8 {
  border: 1px solid var(--app-border);
  border-radius: 8px !important;
  background: #ffffff !important;
}

.announcement-images .text_link {
  color: var(--app-text);
}

.announcement-image-upload-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.announcement-image-upload-panel h4 {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 800;
}

@media screen and (max-width: 700px) {
  .announcement-page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .announcement-actions {
    justify-content: flex-start;
  }
  .announcement-detail-row {
    grid-template-columns: 1fr;
  }
  .announcement-detail-label {
    border-bottom: 1px solid var(--app-border);
  }
}
.dashboard-page,
.dashboard-data-page,
.top-page {
  max-width: 1440px;
  margin: 0 auto;
}

.dashboard-page,
.dashboard-data-page,
.manager-dashboard,
.manager-dashboard .panel {
  min-width: 0;
}

.dashboard-data-page {
  display: grid;
  gap: 18px;
}

.manager-dashboard {
  display: grid;
  gap: 18px;
  margin: 0 0 28px;
  color: var(--app-text);
}

.dashboard-import-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-download-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 7px 13px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--app-text);
  text-decoration: none;
}

.dashboard-download-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.dashboard-download-link__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-surface-soft);
  font-size: 18px;
  font-weight: 800;
}

.dashboard-download-link__content {
  display: grid;
  gap: 1px;
  line-height: 1.2;
}

.dashboard-download-link__content strong {
  font-size: 12px;
  font-weight: 800;
}

.dashboard-download-link__content small {
  color: var(--app-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.dashboard-download-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.dashboard-template-help {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

.dashboard-template-help .help-tip__popup {
  display: none;
  width: 360px;
  max-width: min(360px, 100vw - 48px);
}

.dashboard-template-help:hover .help-tip__popup,
.dashboard-template-help:focus .help-tip__popup {
  display: grid;
  gap: var(--space-1);
}

.dashboard-import-help {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

.dashboard-import-help .help-tip__popup {
  display: none;
  width: 300px;
  max-width: min(300px, 100vw - 48px);
  white-space: normal;
}

.dashboard-import-help:hover .help-tip__popup,
.dashboard-import-help:focus .help-tip__popup {
  display: grid;
  gap: var(--space-2);
}

.dashboard-import-help .help-tip__popup span,
.dashboard-import-help .help-tip__popup b {
  display: block;
}

.dashboard-mf-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.dashboard-mf-connection__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
}

.dashboard-mf-connection__summary strong {
  flex: 0 0 auto;
  font-size: 12px;
}

.dashboard-mf-connection__summary span {
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.dashboard-mf-connection__actions {
  flex: 0 0 auto;
  margin: 0;
  gap: var(--space-2);
}

.dashboard-mf-connection__actions .button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}

.dashboard-major-divider {
  height: 10px;
  margin: 14px 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
}

.dashboard-snapshot-management {
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border-soft));
  background: color-mix(in srgb, var(--color-primary-50) 38%, #ffffff);
}

.dashboard-snapshot-introduction {
  background: var(--color-primary-50) !important;
}

.dashboard-export-management {
  border: 1px solid var(--color-border-soft);
}

.dashboard-export-warning {
  margin-bottom: var(--space-4);
}

.dashboard-export-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.dashboard-export-form .form-field {
  min-width: 220px;
  margin: 0;
}

.dashboard-export-form .app-form-actions {
  margin: 0;
}

.table-scroll.dashboard-history-scroll {
  max-height: 142px;
  overflow: auto;
}

.dashboard-history-scroll .data-table th,
.dashboard-history-scroll .data-table td {
  height: 34px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.2;
}

.dashboard-history-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
}

.dashboard-data-page .help-tip__popup[data-dashboard-tooltip-positioned],
.dashboard-page .help-tip__popup[data-dashboard-tooltip-positioned],
.manager-dashboard .help-tip__popup[data-dashboard-tooltip-positioned] {
  position: fixed;
  right: auto;
  bottom: auto;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  transform: none;
}

.dashboard-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 3px;
  background: var(--dashboard-swatch-color);
  vertical-align: -2px;
}

.dashboard-current-snapshot {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.dashboard-current-snapshot > span {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.dashboard-current-snapshot > strong {
  color: var(--color-text);
  font-size: 16px;
}

.dashboard-snapshot-setting-form {
  display: grid;
  gap: var(--space-3);
}

.dashboard-snapshot-setting-form > label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-comparison-reference {
  margin: var(--space-1) 0 0;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-stale-update {
  color: var(--color-danger);
  font-weight: 700;
}

.manager-dashboard .panel > .app-form {
  padding: 20px 24px;
}

.executive-dashboard .summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manager-dashboard-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.manager-dashboard-visual-grid .panel,
.manager-dashboard > .panel {
  margin: 0;
}

.manager-dashboard-visual-grid .app-section,
.manager-dashboard > .panel > .app-section {
  box-sizing: border-box;
  margin: 0;
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-data-page .panel {
  overflow: hidden;
}

.dashboard-data-page .panel > .app-section,
.financial-report-page .tab-panel > .app-section {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-data-page .panel > .app-section + .app-section,
.financial-report-page .tab-panel > .app-section + .app-section {
  border-top: 1px solid var(--color-border-soft);
}

.financial-report-page .panel > .tabs {
  padding: 20px 24px 0;
}

.financial-report-page .tab-panel {
  background: transparent;
}

.dashboard-chart {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 310px;
  min-height: 310px;
  overflow: hidden;
}

.dashboard-chart canvas {
  width: 100% !important;
  max-width: 100%;
}

.dashboard-data-page .app-section > .dashboard-chart,
.financial-report-page .app-section > .dashboard-chart {
  width: auto;
}

.dashboard-section-navigation {
  margin: 0;
}

.dashboard-filter-panel,
.dashboard-report-panel {
  overflow: hidden;
}

.dashboard-filter-meta,
.dashboard-report-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.dashboard-filter-meta > div,
.dashboard-report-meta > div {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.dashboard-filter-meta strong,
.dashboard-report-meta strong {
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.dashboard-confirmed-label,
.dashboard-forecast-label,
.dashboard-median-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-filter-form,
.dashboard-report-controls {
  padding: var(--space-4) var(--space-5) !important;
}

.dashboard-filter-row,
.dashboard-report-controls__dimensions,
.dashboard-report-controls__comparison {
  display: flex;
  align-items: end;
  gap: var(--space-3);
  min-width: 0;
}

.dashboard-filter-row .form-field,
.dashboard-report-controls__dimensions .form-field,
.dashboard-filter-row select,
.dashboard-report-controls__dimensions select {
  max-width: 100%;
  min-width: 0;
}

.dashboard-filter-row .dashboard-segment,
.dashboard-report-controls__comparison .dashboard-segment {
  max-width: 100%;
  min-width: 0;
}

.dashboard-filter-row .form-field,
.dashboard-report-controls__dimensions .form-field {
  flex: 1 1 180px;
  max-width: 260px;
}

.dashboard-report-controls {
  display: grid;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.dashboard-report-controls__comparison {
  align-items: center;
  justify-content: space-between;
}

.dashboard-actual-only {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-actual-only input {
  width: 16px;
  height: 16px;
}

.dashboard-block-label {
  margin: 0 0 var(--space-2) var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.executive-dashboard .executive-scorecard-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: 0;
}

.executive-dashboard .executive-kpi-card-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: 0;
}

.executive-scorecard {
  min-width: 0;
  padding: var(--space-4);
}

.executive-scorecard .summary-card__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.executive-scorecard .summary-card__value {
  font-size: var(--font-size-xl);
}

.executive-scorecard .summary-card__trend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.executive-scorecard .summary-card__trend.is-positive {
  color: var(--color-info);
}

.executive-scorecard .summary-card__trend.is-warning {
  color: var(--color-danger);
}

.dashboard-sparkline {
  width: 100%;
  height: 24px;
  margin-top: var(--space-2);
}

.dashboard-sparkline polyline {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.dashboard-block {
  overflow: hidden;
}

.dashboard-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}

.dashboard-block__header .app-section-title,
.dashboard-block__header .app-section-description {
  margin: 0;
}

.dashboard-block__header .app-section-description {
  margin-top: var(--space-1);
}

.dashboard-block > .table-scroll,
.dashboard-block > .dashboard-chart,
.dashboard-block > .dashboard-kpi-chart-stack,
.dashboard-block > .empty-state {
  width: auto;
  min-width: 0;
  margin: var(--space-4) var(--space-5);
}

.dashboard-data-page .table-scroll,
.dashboard-data-page .cash-flow-watch-table-wrap,
.financial-report-page .table-scroll,
.financial-report-page .cash-flow-watch-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.dashboard-linked-row {
  cursor: pointer;
}

.dashboard-linked-row:hover,
.dashboard-linked-row:focus-visible {
  background: var(--color-primary-50);
  outline: none;
}

.dashboard-linked-row a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-chart--compact {
  height: 250px;
  min-height: 250px;
}

.dashboard-chart--mini {
  height: 190px;
  min-height: 190px;
}

.dashboard-kpi-chart-stack {
  display: grid;
  gap: var(--space-3);
}

.dashboard-snapshot-table {
  margin-top: 0 !important;
}

.dashboard-compact-empty {
  min-height: 120px;
}

.dashboard-report-panel > .app-section {
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-report-panel > .app-section + .app-section {
  border-top: 1px solid var(--color-border-soft);
}

.dashboard-table-scroll-note {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  color: var(--color-text-subtle);
  font-size: 11px;
}

.dashboard-comparison-scroll {
  max-width: 100%;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.dashboard-comparison-scroll.is-tall {
  max-height: min(620px, 100vh - 250px);
}

.dashboard-comparison-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.dashboard-comparison-table th,
.dashboard-comparison-table td {
  min-width: 74px;
  padding: var(--space-2);
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 11px;
}

.dashboard-comparison-table.is-compact th,
.dashboard-comparison-table.is-compact td {
  padding: 5px 7px;
  line-height: 1.2;
}

.dashboard-comparison-table.is-compact .dashboard-row-label__text {
  line-height: 1.25;
}

.dashboard-comparison-table.is-compact .dashboard-row-toggle,
.dashboard-comparison-table.is-compact .dashboard-row-toggle-spacer {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.dashboard-mapping-requirements {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-text-subtle);
  font-size: 12px;
}

.dashboard-mapping-requirements strong {
  flex: 0 0 auto;
  color: var(--color-primary);
}

.dashboard-mapping-form .form-field.is-not-applicable {
  opacity: 0.48;
}

.dashboard-comparison-table .dashboard-sticky-column {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  background: var(--color-surface);
  text-align: left;
}

.dashboard-row-label {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}

.dashboard-comparison-table tr.dashboard-zero-row-hidden {
  display: none;
}

.dashboard-zero-row-count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-excluded-common-note {
  flex: 0 0 100%;
  padding-left: 24px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 400;
}

.cash-flow-excluded-common-note {
  display: block;
  margin: 3px 0 0 22px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 400;
}

.dashboard-expense-duplicates__scroll {
  max-height: 360px;
}

.dashboard-expense-duplicates__table {
  min-width: 1160px;
}

.dashboard-expense-duplicates__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
}

.dashboard-row-label__text {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.dashboard-row-toggle,
.dashboard-row-toggle-spacer {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.dashboard-row-toggle {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.dashboard-row-toggle:hover,
.dashboard-row-toggle:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.dashboard-row-toggle span {
  display: block;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.dashboard-row-toggle[aria-expanded=true] span {
  transform: rotate(90deg);
}

.dashboard-breakdown-difference {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-subtle);
  font-size: 9px;
  font-style: normal;
  cursor: help;
}

.dashboard-comparison-table thead .dashboard-sticky-column {
  z-index: 3;
}

.dashboard-comparison-table.is-sticky-header thead th {
  position: sticky;
  background: var(--color-surface);
}

.dashboard-comparison-table.is-sticky-header thead tr:first-child th {
  top: 0;
  z-index: 4;
}

.dashboard-comparison-table.is-sticky-header thead tr:nth-child(2) th {
  top: 48px;
  z-index: 3;
}

.dashboard-comparison-table.is-sticky-header thead .dashboard-sticky-column {
  z-index: 5;
}

.dashboard-comparison-table .dashboard-month-group {
  border-right-color: var(--color-border);
  background: var(--color-surface);
  text-align: center;
}

.dashboard-comparison-table .dashboard-month-group span:first-child {
  display: block;
}

.dashboard-comparison-table .is-forecast {
  background: var(--color-surface-soft);
}

.dashboard-comparison-table .dashboard-level-1 .dashboard-sticky-column {
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-weight: 600;
}

.dashboard-comparison-table .dashboard-level-2 .dashboard-sticky-column {
  padding-left: 48px;
  color: var(--color-text-subtle);
  font-weight: 500;
}

.dashboard-comparison-table .dashboard-group-revenue .dashboard-sticky-column {
  border-left: 3px solid #2563eb;
}

.dashboard-comparison-table .dashboard-group-cost .dashboard-sticky-column {
  border-left: 3px solid #f59e0b;
}

.dashboard-comparison-table .dashboard-group-gross_profit .dashboard-sticky-column,
.dashboard-comparison-table .dashboard-group-gross_margin .dashboard-sticky-column {
  border-left: 3px solid #10b981;
}

.dashboard-comparison-table .dashboard-group-expense .dashboard-sticky-column {
  border-left: 3px solid #8b5cf6;
}

.dashboard-comparison-table .dashboard-group-expense_category .dashboard-sticky-column {
  border-left: 3px solid #a78bfa;
  background: #f5f3ff;
  color: #5b21b6;
  font-weight: 800;
}

.dashboard-expense-category-spacer {
  background: #faf9ff;
}

.dashboard-comparison-table .dashboard-group-income .dashboard-sticky-column {
  border-left: 3px solid #0f172a;
}

.dashboard-comparison-table .dashboard-group-acceptance .dashboard-sticky-column {
  border-left: 3px solid var(--color-info);
}

.dashboard-comparison-table .dashboard-group-acquisition .dashboard-sticky-column {
  border-left: 3px solid var(--color-primary);
}

.dashboard-comparison-table .dashboard-group-generated .dashboard-sticky-column {
  border-left: 3px solid var(--color-text-subtle);
}

.dashboard-comparison-table.is-actual-only {
  width: max-content;
  min-width: 968px;
  table-layout: fixed;
}

.dashboard-comparison-table.is-actual-only th:not(.dashboard-sticky-column),
.dashboard-comparison-table.is-actual-only td {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}

.dashboard-comparison-table tbody .dashboard-group-acceptance td {
  background: rgba(14, 165, 233, 0.045);
}

.dashboard-comparison-table tbody .dashboard-group-acquisition td {
  background: rgba(37, 99, 235, 0.055);
}

.dashboard-value-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.35);
  text-underline-offset: 2px;
}

.dashboard-value-link:hover,
.dashboard-value-link:focus-visible {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

/* ストック表 */
.stock-table__heading {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.stock-table__conditions-button svg {
  width: 18px;
  height: 18px;
}

.stock-table__period-error {
  margin-top: var(--space-2);
  color: var(--color-danger);
}

.stock-table-page .dashboard-filter-row .button {
  flex: 0 0 auto;
  align-self: flex-end;
}

.stock-table-scroll {
  max-width: 100%;
}

table.data-table.stock-table {
  min-width: 1320px;
}

.stock-table th,
.stock-table td {
  vertical-align: middle;
}

.stock-table td {
  height: auto;
  padding: var(--space-2) var(--space-3);
}

.stock-table__company {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

.stock-table__project {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
}

.stock-table__sticky-company,
.stock-table__sticky-project {
  position: sticky;
  z-index: 3;
  background: var(--color-surface);
}

.stock-table__sticky-company {
  left: 0;
}

.stock-table__sticky-project {
  left: 200px;
  box-shadow: 4px 0 6px -6px rgba(15, 23, 42, 0.45);
}

.stock-table thead .stock-table__sticky-company,
.stock-table thead .stock-table__sticky-project {
  z-index: 7;
}

.stock-table tbody tr:hover .stock-table__sticky-company,
.stock-table tbody tr:hover .stock-table__sticky-project {
  background: #f8fbff;
}

.stock-table__product {
  width: 160px;
  min-width: 160px;
}

.stock-table__metric {
  width: 64px;
  min-width: 64px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.stock-table__month,
.stock-table__amount {
  min-width: 112px;
  text-align: right !important;
  white-space: nowrap;
}

.stock-table__root-id {
  display: block;
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.stock-table__evidence {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--font-size-xs);
}

.stock-table__evidence > span {
  color: var(--color-text-subtle);
  font-weight: 700;
}

.stock-table__evidence-list,
.stock-table__conditions-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-5);
}

.stock-table__evidence-list a {
  color: var(--color-primary);
  text-decoration: none;
}

.stock-table__evidence-list a:hover,
.stock-table__evidence-list a:focus-visible {
  text-decoration: underline;
}

.stock-table tfoot th,
.stock-table tfoot td {
  background: var(--color-surface-soft);
  font-weight: 700;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stock-table-page .dashboard-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stock-table-page .dashboard-filter-row .form-field {
    max-width: none;
  }
}
@media (max-width: 767px) {
  .stock-table-page .dashboard-filter-row {
    align-items: stretch;
    flex-direction: column;
  }
  .stock-table-page .dashboard-filter-row .form-field {
    max-width: none;
  }
}
.dashboard-cohort-table .dashboard-month-group small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: 9px;
  font-weight: 700;
}

.dashboard-cohort-note {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-navy);
  font-size: var(--font-size-xs);
}

.dashboard-matrix-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;
}

.dashboard-cycle-table td[class*=heat-level-] {
  border-left: 2px solid #ffffff;
  font-weight: 700;
}

.dashboard-cycle-table .heat-level-1 {
  background: #eff6ff;
}

.dashboard-cycle-table .heat-level-2 {
  background: #dbeafe;
}

.dashboard-cycle-table .heat-level-3 {
  background: #bfdbfe;
  color: #1e3a8a;
}

.dashboard-cycle-table .heat-level-4 {
  background: #2563eb;
  color: #ffffff;
}

@media screen and (max-width: 1180px) {
  .manager-dashboard-visual-grid {
    grid-template-columns: 1fr;
  }
  .executive-dashboard .executive-scorecard-grid,
  .executive-dashboard .executive-kpi-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 820px) {
  .dashboard-import-header {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-download-link {
    align-self: flex-start;
  }
  .dashboard-mf-connection,
  .dashboard-mf-connection__summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-mf-connection__summary {
    gap: var(--space-1);
  }
  .dashboard-mf-connection__summary span {
    white-space: normal;
  }
  .dashboard-mf-connection__actions {
    flex-wrap: wrap;
  }
  .dashboard-filter-row,
  .dashboard-report-controls__dimensions {
    flex-wrap: wrap;
  }
  .dashboard-filter-row .form-field,
  .dashboard-report-controls__dimensions .form-field {
    max-width: none;
  }
  .executive-dashboard .executive-scorecard-grid,
  .executive-dashboard .executive-kpi-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-report-controls__comparison {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media screen and (max-width: 560px) {
  .executive-dashboard .summary-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-filter-meta,
  .dashboard-report-meta,
  .dashboard-block__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-filter-meta > div,
  .dashboard-report-meta > div {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
  .dashboard-filter-row,
  .dashboard-report-controls__dimensions {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-filter-row .form-field,
  .dashboard-report-controls__dimensions .form-field {
    flex-basis: auto;
  }
  .dashboard-filter-row .dashboard-segment,
  .dashboard-report-controls__comparison,
  .dashboard-report-controls__comparison .dashboard-segment {
    width: 100%;
  }
  .dashboard-comparison-table .dashboard-sticky-column {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    white-space: normal;
  }
  .dashboard-comparison-table .dashboard-level-1 .dashboard-sticky-column {
    padding-left: var(--space-3);
  }
  .dashboard-comparison-table .dashboard-level-2 .dashboard-sticky-column {
    padding-left: var(--space-4);
  }
  .dashboard-comparison-table.is-actual-only {
    min-width: 828px;
  }
  .dashboard-actual-only {
    min-height: 30px;
  }
  .executive-dashboard .executive-scorecard-grid,
  .executive-dashboard .executive-kpi-card-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-block > .table-scroll,
  .dashboard-block > .dashboard-chart,
  .dashboard-block > .dashboard-kpi-chart-stack,
  .dashboard-block > .empty-state {
    margin: var(--space-3);
  }
}
.users-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--app-text);
}

.users-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.users-page-heading {
  min-width: 0;
}

.users-page-heading h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.users-page-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.users-button,
button.users-button,
input.users-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--app-text) !important;
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.users-button:hover {
  border-color: #a1a1aa !important;
  background: #f4f4f5 !important;
  color: var(--app-text) !important;
}

.users-button-primary,
button.users-button-primary,
input.users-button-primary {
  border-color: var(--app-accent-strong) !important;
  background: var(--app-accent-strong) !important;
  color: #ffffff !important;
}

.users-button-primary:hover {
  border-color: #27272a !important;
  background: #27272a !important;
  color: #ffffff !important;
}

.users-button-secondary {
  color: var(--app-text-muted) !important;
}

.app-modal-open,
.app-modal-open {
  overflow: hidden;
}

.app-modal,
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* aria-hidden はモーダルの最終的な表示状態として扱う。
   クラス状態やテーブル内の重なり順が崩れても、閉じた背景を描画しない。 */
.app-modal[aria-hidden=true] {
  display: none !important;
}

.app-modal.is-open,
.app-modal.is-open {
  display: flex;
}

.app-modal-backdrop,
.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 27, 0.45);
}

.app-modal-dialog,
.app-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  width: min(720px, 100%);
  max-height: min(760px, 100vh - 48px);
  flex-direction: column;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(24, 24, 27, 0.18);
}

.app-modal-dialog-wide,
.app-modal-dialog-wide {
  width: min(1120px, 100%);
}

.app-modal-fullscreen .app-modal-dialog {
  width: min(1280px, 100%);
  max-height: min(860px, 100vh - 48px);
}

.app-modal-header,
.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--app-border);
}

.app-modal-header h2,
.app-modal-header h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.app-modal-close,
.app-modal-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  cursor: pointer;
}

.app-modal-close::before,
.app-modal-close::after,
.app-modal-close::before,
.app-modal-close::after {
  position: absolute;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.app-modal-close::before,
.app-modal-close::before {
  transform: rotate(45deg);
}

.app-modal-close::after,
.app-modal-close::after {
  transform: rotate(-45deg);
}

.app-modal-close:hover,
.app-modal-close:hover {
  background: var(--app-surface-muted);
}

.app-modal-body,
.app-modal-body {
  overflow-y: auto;
  padding: 18px;
}

.client-modal-help {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.app-modal .profile-image-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  margin: 0;
  border: 1px dashed var(--app-border-strong);
  border-radius: 10px;
  background: #fafafa;
  color: var(--app-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.app-modal .profile-image-upload:hover,
.app-modal .profile-image-upload:focus-within {
  border-color: #a1a1aa;
  background: var(--app-surface-muted);
}

.app-modal .profile-image-upload .upload_file_input {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}

.app-modal .profile-image-upload .upload_file_label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 132px;
  padding: 22px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}

.app-modal .profile-image-upload .upload_file_label::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 16px;
  font-weight: 800;
  content: "+";
}

.app-modal .profile-image-upload .upload_file_label::after {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 600;
  content: "JPG / PNG / GIF";
}

.users-search {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.users-search-form {
  margin: 0;
}

.users-search-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.users-search-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.users-search-field label {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.users-search-field.required label::after {
  margin-left: 4px;
  color: var(--app-text-muted);
  content: "*";
}

.users-search-field input,
.users-search-field select,
.users-search-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

.users-search-field input:focus,
.users-search-field select:focus,
.users-search-field textarea:focus {
  outline: 2px solid rgba(24, 24, 27, 0.12);
  outline-offset: 1px;
}

.users-search-field textarea {
  min-height: 180px;
  padding: 11px;
  line-height: 1.6;
  resize: vertical;
}

.app-multiselect-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-multiselect {
  position: relative;
  width: 100%;
}

.app-multiselect-control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 5px 34px 5px 8px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  appearance: none;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.app-multiselect-control:focus {
  outline: 2px solid rgba(24, 24, 27, 0.12);
  outline-offset: 1px;
}

.app-multiselect-values {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px;
}

.app-multiselect-placeholder {
  color: var(--app-text-muted);
}

.app-multiselect-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  padding: 0 26px 0 8px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface-muted);
  color: var(--app-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.app-multiselect-chip-remove {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: var(--app-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.app-multiselect-chip-remove::before,
.app-multiselect-chip-remove::after {
  position: absolute;
  top: 7px;
  left: 3px;
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.app-multiselect-chip-remove::before {
  transform: rotate(45deg);
}

.app-multiselect-chip-remove::after {
  transform: rotate(-45deg);
}

.app-multiselect-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--app-text-muted);
  transform: translateY(-65%) rotate(45deg);
}

.app-multiselect-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: none;
  overflow-y: auto;
  max-height: 240px;
  padding: 4px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 24, 27, 0.14);
}

.app-multiselect.is-open .app-multiselect-panel {
  display: grid;
  gap: 2px;
}

/* テーブルのスクロール領域内でも選択肢が見切れないよう、必要な箇所だけ
   viewport基準で配置する。位置と表示方向はapplication.jsで計算する。 */
.app-multiselect.app-multiselect--viewport-panel > .app-multiselect-panel {
  position: fixed;
  right: auto;
  z-index: 120;
}

.app-modal .app-multiselect-panel {
  position: static;
  margin-top: 6px;
  max-height: clamp(220px, 42vh, 360px);
  box-shadow: none;
}

.app-modal .app-multiselect.is-open .app-multiselect-panel {
  min-height: min(260px, 42vh);
}

.app-multiselect-option {
  position: relative;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px 8px 34px;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.app-multiselect-option:hover,
.app-multiselect-option.is-selected {
  background: var(--app-surface-muted);
}

.app-multiselect-option::before {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid var(--app-border-strong);
  border-radius: 4px;
  background: #ffffff;
  content: "";
  transform: translateY(-50%);
}

.app-multiselect-option.is-selected::before {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.app-multiselect-option.is-selected::after {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  content: "";
  transform: translateY(-58%) rotate(45deg);
}

.users-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.users-date-range span {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.users-search-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.users-invite-panel {
  max-width: 980px;
}

.users-invite-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.users-invite-actions {
  align-items: flex-end;
}

.users-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.users-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  font-size: 13px;
}

.users-table th,
.users-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

.users-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.users-page:not(.partners-page) .users-table thead th {
  text-align: center;
}

.users-table thead a {
  color: var(--app-text-muted);
  text-decoration: none;
}

.users-table thead a:hover {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.users-table tbody tr:hover td {
  background: #fbfbfb;
}

.users-table tbody tr:last-child td {
  border-bottom: 0;
}

.users-table-id {
  width: 72px;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.users-table-image {
  width: 120px;
}

.users-table-action {
  width: 76px;
  text-align: center !important;
}

.users-table-identity {
  min-width: 280px;
}

.users-profile-cell {
  width: 120px;
  text-align: center;
}

.users-profile-image {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  object-fit: cover;
}

/* プロフ画像未登録時のプレースホルダ。design_parts の .avatar(topbar)と同じ配色 */
.users-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-sky);
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.users-profile-action .create_profile_image_btn,
.users-text-button,
.users-table form.button_to {
  margin: 0;
}

.users-profile-action .create_profile_image_btn,
.users-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.users-profile-action .create_profile_image_btn:hover,
.users-text-button:hover {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.users-identity-cell {
  min-width: 280px;
  line-height: 1.45;
}

.users-identity-primary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.users-identity-primary .users-katakana-name,
.users-identity-primary .users-katakana-name .inline-edit,
.users-identity-primary .users-katakana-name .inline-edit__value {
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.users-identity-email-line {
  margin-top: 4px;
  word-break: break-all;
}

.users-identity-cell .editableRequiredText,
.users-identity-cell .editableEmail {
  cursor: pointer;
}

.users-role-cell {
  min-width: 240px;
}

.users-role-tags {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.users-role-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.users-role-edit,
.users-role-edit.update_user_auth_btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.users-role-edit:hover,
.users-role-edit.update_user_auth_btn:hover {
  background: #27272a;
  color: #ffffff;
}

.users-muted {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1;
}

.users-editable-cell {
  min-width: 150px;
  color: var(--app-text);
  font-weight: 600;
}

.users-editable-cell:hover {
  background: var(--app-surface-muted) !important;
}

.users-editable-cell .app-inline-select-indicator {
  color: var(--app-text-muted);
}

.users-reception-cell {
  width: 84px;
  text-align: center;
}

.users-icon-toggle,
.users-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  cursor: pointer;
}

.users-icon-toggle:hover,
.users-icon-button:hover {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.users-toggle-mark,
.users-trash-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.users-toggle-on::before {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 8px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.users-toggle-off::before,
.users-toggle-off::after {
  position: absolute;
  left: 7px;
  top: 1px;
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.users-toggle-off::before {
  transform: rotate(45deg);
}

.users-toggle-off::after {
  transform: rotate(-45deg);
}

.users-trash-icon::before {
  position: absolute;
  left: 4px;
  top: 6px;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top: 0;
  border-radius: 1px 1px 2px 2px;
  content: "";
}

.users-trash-icon::after {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 3px -2px 0 -0.5px currentColor;
  content: "";
}

.users-empty {
  margin-top: 16px;
  padding: 28px 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 13px;
  text-align: center;
}

.live-search-results {
  transition: opacity 0.16s ease;
}

.live-search-results.is-loading {
  opacity: 0.55;
}

.users-result-meta {
  margin: 0 0 8px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.partners-search-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partners-export-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.partners-export-actions form {
  margin: 0;
}

.partners-table {
  min-width: 1080px;
}

.partners-name-cell a {
  color: var(--app-text);
  font-weight: 800;
  text-decoration: none;
}

.partners-name-cell a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contract-document-panel {
  max-width: 960px;
}

.contract-document-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.contact-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--app-text);
}

.contact-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.contact-page-heading {
  min-width: 0;
}

.contact-page-heading h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.contact-page-actions,
.contact-form-actions,
.contact-danger-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-danger-actions {
  justify-content: flex-start;
  margin-top: 18px;
}

.contact-danger-actions form,
.contact-danger-actions .button_to {
  margin: 0;
}

.contact-button,
button.contact-button,
input.contact-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--app-text) !important;
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.contact-button:hover {
  border-color: #a1a1aa !important;
  background: #f4f4f5 !important;
  color: var(--app-text) !important;
}

.contact-button-secondary {
  color: var(--app-text-muted) !important;
}

.contact-button-compact {
  min-height: 30px;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.contact-button-add::before,
.contact-button-search::before,
.contact-button-download::before {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 7px;
  content: "";
}

.contact-button-add::before {
  width: 10px;
  height: 10px;
  background: linear-gradient(currentColor, currentColor) center/10px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 10px no-repeat;
}

.contact-button-search::before {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: 7px 7px 0 -5px currentColor;
  transform: translate(-1px, -1px);
}

.contact-button-download::before {
  width: 12px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(-1px);
}

.contact-search,
.contact-form-surface {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.contact-search-form,
.contact-form {
  margin: 0;
}

.contact-search-grid,
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.contact-search-field,
.contact-form-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.contact-search-field-wide {
  grid-column: span 2;
}

.contact-form-field-full {
  margin-top: 12px;
}

.contact-search-field label,
.contact-form-field label,
.contact-section-title {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.contact-form-field.required label::after {
  margin-left: 4px;
  color: var(--app-text-muted);
  content: "*";
}

.contact-search-field input,
.contact-search-field select,
.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

.contact-search-field input:focus,
.contact-search-field select:focus,
.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: 2px solid rgba(24, 24, 27, 0.12);
  outline-offset: 1px;
}

.contact-form-field textarea {
  min-height: 180px;
  padding: 11px;
  line-height: 1.6;
  resize: vertical;
}

.contact-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.contact-date-range span {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.contact-search-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.contact-result-meta {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.contact-table-wrap,
.contact-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.contact-table,
.contact-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  font-size: 13px;
}

.contact-table {
  min-width: 1120px;
}

.contact-detail-table {
  min-width: 900px;
}

.contact-table th,
.contact-table td,
.contact-detail-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

.contact-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.contact-table thead a {
  color: var(--app-text-muted);
  text-decoration: none;
}

.contact-table thead a:hover {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-table tbody tr:hover td {
  background: #fbfbfb;
}

.contact-table tbody tr:last-child td,
.contact-detail-table tr:last-child td {
  border-bottom: 0;
}

.contact-table-id {
  width: 72px;
  white-space: nowrap;
}

.contact-table-date {
  width: 150px;
  white-space: nowrap;
}

.contact-table-status {
  width: 120px;
}

.contact-table-action {
  width: 132px;
  text-align: right;
  white-space: nowrap;
}

.contact-table-id a,
.contact-person-company {
  color: var(--app-text);
  font-weight: 800;
  text-decoration: none;
}

.contact-table-id a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-person {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.contact-muted {
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.contact-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.contact-empty {
  padding: 28px 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 13px;
  text-align: center;
}

.contact-detail-section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.contact-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.contact-section-title {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  line-height: 1.3;
}

.contact-detail-label {
  width: 20%;
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.contact-detail-value {
  width: 30%;
  min-width: 180px;
  word-break: break-word;
}

.contact-editable-cell {
  color: var(--app-text);
  font-weight: 600;
}

.contact-editable-cell:hover {
  background: var(--app-surface-muted) !important;
}

.contact-form-section {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.contact-form-section:last-of-type {
  margin-bottom: 0;
}

.contact-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.contact-checkbox input {
  width: 14px;
  min-height: auto;
  height: 14px;
  margin: 0;
  padding: 0;
}

.contact-form-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.client-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--app-text);
}

.client-form-page {
  max-width: 1100px;
}

.client-detail-page {
  max-width: 1440px;
}

.client-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.client-page-heading {
  min-width: 0;
}

.client-page-heading h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.client-page-actions,
.client-form-actions,
.client-section-actions,
.client-tab-toolbar,
.client-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.client-page-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.client-form-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.client-section-actions,
.client-tab-toolbar {
  justify-content: flex-start;
  margin: 0 0 12px;
}

.client-button,
button.client-button,
input.client-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 7px !important;
  appearance: none;
  background: #ffffff !important;
  color: var(--app-text) !important;
  box-shadow: 0 1px 1px rgba(24, 24, 27, 0.04) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.client-button:hover {
  border-color: #a1a1aa !important;
  background: #f4f4f5 !important;
  color: var(--app-text) !important;
}

.client-button-secondary {
  color: var(--app-text-muted) !important;
}

.client-button-compact {
  min-height: 30px;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.client-button-add::before,
.client-button-search::before,
.client-button-download::before {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 7px;
  content: "";
}

.client-button-add::before {
  width: 10px;
  height: 10px;
  background: linear-gradient(currentColor, currentColor) center/10px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 10px no-repeat;
}

.client-button-search::before {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: 7px 7px 0 -5px currentColor;
  transform: translate(-1px, -1px);
}

.client-button-download::before {
  width: 12px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(-1px);
}

.client-inline-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.client-inline-trigger:hover {
  color: var(--app-text-muted);
}

.client-search,
.client-form-surface {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.client-tab-search {
  margin-bottom: 14px;
}

.client-search-form,
.client-form {
  margin: 0;
}

.client-search-grid,
.client-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.client-search-field,
.client-form-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.client-search-field-wide,
.client-form-field-wide {
  grid-column: span 2;
}

.client-form-field-full {
  grid-column: 1/-1;
}

.client-search-field label,
.client-form-field label,
.client-field-label,
.client-section-title {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.client-form-field.required label::after {
  margin-left: 4px;
  color: var(--app-text-muted);
  content: "*";
}

.client-search-field input,
.client-search-field select,
.client-search-field textarea,
.client-form-field input,
.client-form-field select,
.client-form-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

.client-search-field input:focus,
.client-search-field select:focus,
.client-search-field textarea:focus,
.client-form-field input:focus,
.client-form-field select:focus,
.client-form-field textarea:focus {
  outline: 2px solid rgba(24, 24, 27, 0.12);
  outline-offset: 1px;
}

.client-form-field textarea {
  min-height: 120px;
  padding: 11px;
  line-height: 1.6;
  resize: vertical;
}

.client-search-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.client-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.client-checkbox input {
  width: 14px;
  min-height: auto;
  height: 14px;
  margin: 0;
  padding: 0;
}

.client-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.client-results-toolbar form {
  margin: 0;
}

.client-result-meta {
  margin: 0 0 8px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.client-results-toolbar .client-result-meta {
  margin: 0;
  text-align: left;
}

.client-table-wrap,
.client-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.client-table,
.client-detail-table,
.client-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  font-size: 13px;
}

.client-table {
  min-width: 1040px;
}

/* 先方担当者タブのテーブルは従来どおり縮めて収める */
.client-person-table {
  min-width: 0;
}

/* 営業タスク/プロジェクトタブのテーブルは他の一覧と同様に min-width を保ち、
   収まらない場合は .table-scroll で横スクロールさせる(.data-table 既定の 1120px を継承) */
.client-project-summary-table {
  min-width: 900px;
}

.client-detail-table {
  min-width: 860px;
}

.client-ai-table {
  min-width: 0;
  table-layout: fixed;
}

.client-table th,
.client-table td,
.client-detail-table th,
.client-detail-table td,
.client-matrix-table th,
.client-matrix-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

.client-table thead th,
.client-matrix-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.client-table thead a,
.client-matrix-table thead a {
  color: var(--app-text-muted);
  text-decoration: none;
}

.client-table thead a:hover,
.client-matrix-table thead a:hover {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.client-table tbody tr:hover td {
  background: #fbfbfb;
}

.client-table tbody tr:last-child td,
.client-detail-table tbody tr:last-child th,
.client-detail-table tbody tr:last-child td,
.client-matrix-table tbody tr:last-child th,
.client-matrix-table tbody tr:last-child td {
  border-bottom: 0;
}

.client-detail-table th,
.client-matrix-table tbody th {
  width: 20%;
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.client-detail-table td {
  min-width: 180px;
  word-break: break-word;
}

.client-ai-table-wrap {
  overflow: visible;
}

.client-ai-table th.created_by_ai {
  position: relative;
  padding-right: 42px;
}

.client-ai-table th.created_by_ai::after {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.client-table-id {
  width: 72px;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.client-table-count,
.client-table-number {
  text-align: right;
  white-space: nowrap;
}

.client-name-cell a,
.client-table a,
.client-detail-table a,
.client-timeline a,
.client-task-card a {
  color: var(--app-text);
  font-weight: 800;
  text-decoration: none;
}

.client-name-cell a:hover,
.client-table a:hover,
.client-detail-table a:hover,
.client-timeline a:hover,
.client-task-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.client-table-subtext {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--app-border);
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.client-table-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--app-border);
}

.client-empty {
  padding: 28px 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 13px;
  text-align: center;
}

.client-muted {
  display: block;
  margin-top: 3px;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.client-pill,
.client-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 4px 4px 0;
  padding: 0 8px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.client-status {
  margin: 0;
  background: var(--app-surface-muted);
}

.client-status.ng {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-white);
}

.client-alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.6;
}

.client-alert-title {
  margin-bottom: 4px;
  color: var(--app-text);
  font-weight: 800;
}

.client-alert p {
  margin: 0;
}

.client-alert a {
  color: var(--app-text);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.client-alert-danger {
  border-left: 4px solid var(--color-danger);
}

.client-alert-success,
.client-alert-warning {
  border-left: 4px solid var(--app-border-strong);
}

.client-form-note {
  margin: 0 0 16px;
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.client-form-section,
.client-detail-section {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.client-form-section:last-of-type,
.client-detail-section:last-child {
  margin-bottom: 0;
}

.client-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.client-section-title {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  line-height: 1.3;
}

.client-tab-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.client-tab {
  min-height: 34px;
  flex: 1 0 auto;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  appearance: none;
  background: transparent;
  color: var(--app-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.client-tab:hover {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.client-tab-panel {
  display: none;
}

.client-tab-panel.active {
  display: block;
}

.client-embedded-message {
  margin-bottom: 12px;
}

.client-embedded-message:empty {
  display: none;
}

.client-home-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.7fr);
  gap: 16px;
  align-items: start;
}

.client-home-side,
.client-home-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.client-task-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.client-task-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.client-task-title {
  display: inline-block;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.client-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
  color: var(--app-text);
  font-size: 12px;
  line-height: 1.5;
}

.client-matrix-wrap {
  overflow-x: visible;
}

.client-matrix-table {
  min-width: 0;
  table-layout: fixed;
}

.client-matrix-table th,
.client-matrix-table td {
  padding: 10px 8px;
  text-align: center;
  word-break: break-word;
}

.client-matrix-table tbody th {
  text-align: left;
  white-space: normal;
}

.client-matrix-table thead th {
  white-space: normal;
}

.client-matrix-table .client-muted {
  white-space: normal;
  word-break: break-word;
}

.client-matrix-table td.active {
  background: var(--color-primary);
}

.client-matrix-table td.active::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  content: "";
}

.client-timeline {
  display: grid;
  gap: 14px;
}

.client-timeline-year,
.client-timeline-month {
  display: grid;
  gap: 10px;
}

.client-timeline-year h3,
.client-timeline-month h4 {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 800;
}

.client-timeline-month {
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.client-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 12px;
}

.client-timeline-item:last-child {
  padding-bottom: 0;
}

.client-timeline-item::before {
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 6px;
  width: 1px;
  background: var(--app-border);
  content: "";
}

.client-timeline-item:last-child::before {
  display: none;
}

.client-timeline-marker {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: #ffffff;
}

.client-timeline-content {
  min-width: 0;
}

.client-timeline-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.client-upload-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  border: 1px dashed var(--app-border-strong);
  border-radius: 10px;
  background: #fafafa;
}

.client-upload-area .upload_file_input {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}

.client-upload-area .upload_file_label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 132px;
  padding: 22px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}

.client-upload-area .upload_file_label::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--app-text-muted);
  font-size: 16px;
  font-weight: 800;
  content: "+";
}

.client-upload-area .upload_file_label::after {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 600;
  content: "CSV";
}

/* ============================================
   先方担当者・営業タスク・商談議事録: design_parts 適応
   (共通の見た目は parts.scss。ここは Rails/ページ都合の最小限の適応のみ)
   ============================================ */
.person-in-charges-page,
.sales-tasks-page,
.meetings-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--app-text);
}

.person-in-charges-form-page,
.meetings-form-page {
  max-width: 1100px;
}

/* live search 中の結果エリア */
/* 非活性の先方担当者行 */
.person-in-charges-table tr.is-disabled td,
.client-person-table tr.is-disabled td {
  color: var(--app-text-muted);
  background: #fbfbfb;
}

.person-in-charges-detail-disabled .detail-grid {
  opacity: 0.6;
}

/* detail-grid のラベル内に小さな操作(履歴・変更・開く)を並べる */
.detail-label-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 詳細タブ(JSは .person_in_charge_tab / .person-in-charges-tab-panel を参照) */
.person-in-charges-tab-panel {
  display: none;
}

/* 制作物: 仕入先選択ページの共有partial(partners群・未刷新)をpanel内に収める */
.contents-select-partner-body {
  padding: 20px 24px;
}

/* 制作物: 完了済みで押せない発注書作成ボタン */
/* pointer-events: none にするとtitle属性のツールチップ(作成不可の理由)が出ないため、
   ホバーは受け付けたまま not-allowed カーソルで押下不可を示す(実体はspanなのでクリックしても何も起きない) */
.order_create_disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 発注タブ 発注書IDセル: プレビューボタンをIDリンクの左端に揃える
   (.cell-stackはgridのためボタンが伸びたり中央に寄らないよう明示的にstart揃え) */
.content-detail-purchase-order-table .cell-stack > .button {
  justify-self: start;
  margin: 0;
}

/* 制作物詳細 > 発注タブの品目プレビューは、テーブルと操作ボタンの間に
   design_parts の標準余白を確保する。 */
.content-detail-purchase-order-preview-actions {
  margin-top: var(--space-4);
}

/* 公開制作物プレビュー: noframe 上でも tabs / panel / detail-grid を
   design_parts と同じ1つの器として構成する。 */
.content-preview-panel {
  overflow: hidden;
}

.content-preview-page .content-preview-tab-panel > .app-section {
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-preview-page .content-preview-tab-panel > .app-section + .app-section {
  border-top: 1px solid var(--color-border-soft);
}

.content-preview-page .detail-grid__value--stack > .parts-file-grid {
  width: 100%;
}

@media (max-width: 720px) {
  .content-preview-page .content-preview-tab-panel > .app-section {
    padding: var(--space-4);
  }
}
/* 制作物TOPタブのタイムラインはpanel内で余白を持たせる */
.content-detail-page .content-detail-tab-panel > .content-timeline-scroll {
  margin: 20px 24px 0;
  overflow-x: auto;
}

/* スマホ幅では時系列の点が重なって潰れるため、最小幅を確保して
   上位の .content-timeline-scroll で横スクロールさせる */
@media screen and (max-width: 767px) {
  .content_timeline {
    min-width: 600px;
  }
}
/* TOPタブの2カラムサマリ内・モーダル内のテーブルは data-table の
   既定min-width(全幅テーブル前提)を解除して器の幅に収める */
.content-detail-summary-grid .data-table,
.app-modal .data-table {
  min-width: 0;
}

/* detail-grid の値セル内のコピーボタンは折り返さない */
.detail-grid__value .copy_btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 共有用URLなど長い値は改行して器内に収める(コピーボタンは上の nowrap のまま) */
.content-share-url {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.content-file-url-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-grid__value.partner-email-cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.partner-email-address {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* パートナー側 制作物詳細 */
.partner-content-page {
  max-width: 1440px;
  margin: 0 auto;
}

.partner-content-page .partner-content-info-panel {
  margin-bottom: 4px;
}

/* タブ行の右端に置く「企業ページへ」リンク */
.person-in-charges-detail-page .detail-fixed-header .person-in-charges-client-link {
  align-self: center;
  margin-left: auto;
  margin-right: 10px;
}

/* 営業タスクのステータスバッジ(SetEditableSalesTaskStatus が生成) */
.sales-tasks-status-badge {
  color: var(--app-text-muted);
}

.sales-tasks-status-badge-complete {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

/* プロジェクト詳細(営業情報)の商談テーブル */
.project_sales_information__meeting_table {
  min-width: 860px;
}

.tag-admin-page {
  max-width: 1280px;
  margin: 0 auto;
  color: var(--app-text);
}

.tag-admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tag-admin-title {
  margin: 0;
  color: var(--app-text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
}

.tag-admin-panel {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.tag-admin-form {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: end;
  justify-content: start;
  gap: 12px;
}

.tag-admin-form-field {
  display: grid;
  gap: 6px;
}

.tag-admin-form-field label,
.tag-admin-section-title {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.tag-admin-form-field input,
.tag-admin-form-field select,
.tag-admin-form-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

.tag-admin-form-field textarea {
  min-height: 38px;
  padding: 9px 11px;
  line-height: 1.5;
  resize: vertical;
}

.tag-admin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.tag-admin-pill:hover {
  border-color: #a1a1aa;
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.tag-admin-pill-count {
  color: var(--app-text-muted);
  font-size: 12px;
}

.tag-admin-empty {
  margin: 12px 0 0;
  padding: 20px 14px;
  border: 1px dashed var(--app-border-strong);
  border-radius: 10px;
  color: var(--app-text-muted);
  font-size: 13px;
  text-align: center;
}

.tag-admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.tag-admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-text);
  font-size: 13px;
}

.tag-admin-table th,
.tag-admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

.tag-admin-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.tag-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.tag-admin-inline-form {
  display: grid;
  grid-template-columns: minmax(160px, 240px) auto;
  justify-content: start;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.appointment-strategy-form {
  grid-template-columns: minmax(180px, 280px) minmax(180px, 260px) minmax(180px, 280px) auto;
}

.tag-admin-detail-meta {
  margin: 0 0 12px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.tag-admin-danger {
  margin-top: 16px;
}

.tag-admin-danger form {
  margin: 0;
}

.tag-admin-danger .button_to {
  margin: 0;
}

.projects-page,
.contents-page,
.accounting-documents-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--app-text);
}

.projects-page .dashboard-drilldown-notice {
  margin-bottom: var(--space-4);
}

.partner-invoice-select-page {
  padding-bottom: 72px;
}

.partner-invoice-select-page .section-description {
  padding-inline: var(--space-6);
}

.partner-invoice-select-page .partner-invoice-select-notice {
  margin-top: var(--space-5);
}

.partner-invoice-select-page .partner_invoice_select_form {
  margin-top: var(--space-2);
}

.partner-invoice-selection-bar {
  position: fixed;
  right: 32px;
  bottom: var(--space-4);
  left: calc(var(--app-sidebar-width) + 32px);
  z-index: 30;
  width: auto;
  max-width: 1392px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

.delivery-report-items {
  display: inline-flex;
}

.delivery-report-items__popover {
  position: fixed;
  z-index: 60;
  width: min(420px, 100vw - 24px);
  max-height: min(360px, 100vh - 24px);
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.delivery-report-items__popover[hidden] {
  display: none;
}

.delivery-report-items__group + .delivery-report-items__group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.delivery-report-items__document-link {
  display: block;
  color: var(--color-navy);
  font-weight: 900;
}

.delivery-report-items__document-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.delivery-report-items__list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

/* 納品物は一覧の行高を増やさず件数で要約し、全件を固定ポップオーバーで確認する。 */
.delivery-materials {
  width: 100%;
  min-width: 0;
}

.delivery-material-summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 14px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  overflow: visible;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.delivery-material-summary:hover,
.delivery-material-summary[aria-expanded=true] {
  border-color: #8eb5ff;
  background: #fbfdff;
  box-shadow: 0 4px 14px rgba(35, 93, 190, 0.12);
}

.delivery-material-summary:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.delivery-material-summary__stack {
  position: relative;
  display: block;
  width: 64px;
  height: 44px;
}

.delivery-material-summary__tile {
  position: absolute;
  top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 40px;
  overflow: hidden;
  border: 2px solid var(--color-surface);
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(20, 44, 82, 0.14);
  font-size: 0.625rem;
  font-weight: 900;
}

.delivery-material-summary__tile:nth-child(1) {
  left: 0;
  z-index: 4;
}

.delivery-material-summary__tile:nth-child(2) {
  left: 12px;
  z-index: 3;
}

.delivery-material-summary__tile:nth-child(3) {
  left: 24px;
  z-index: 2;
}

.delivery-material-summary__tile:nth-child(4) {
  left: 36px;
  z-index: 1;
}

.delivery-material-summary__tile--pdf,
.delivery-material-item__thumb--pdf {
  background: #fff0f1;
  color: #e9404d;
}

.delivery-material-summary__tile--image,
.delivery-material-item__thumb--image {
  background: #173251;
  color: #fff;
}

.delivery-material-summary__tile--file,
.delivery-material-summary__single-icon,
.delivery-material-item__thumb--file {
  background: #edf4ff;
  color: var(--color-primary);
}

.delivery-material-summary__tile--count {
  background: var(--color-navy);
  color: #fff;
}

.delivery-material-summary__single-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 0.625rem;
  font-weight: 900;
}

.delivery-material-summary--single {
  grid-template-columns: 44px minmax(0, 1fr) 14px;
}

.delivery-material-summary__meta {
  min-width: 0;
}

.delivery-material-summary__meta strong,
.delivery-material-summary__meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-material-summary__meta strong {
  color: var(--color-navy);
  font-size: var(--font-size-sm);
}

.delivery-material-summary__meta small {
  margin-top: 4px;
  color: var(--color-text-subtle);
  font-size: 0.6875rem;
}

.delivery-material-summary__open {
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.delivery-material-popover {
  width: min(560px, 100vw - 24px);
  max-height: min(460px, 100vh - 24px);
}

.delivery-material-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.delivery-material-popover__header strong,
.delivery-material-popover__header span {
  display: block;
}

.delivery-material-popover__header strong {
  color: var(--color-navy);
  font-size: var(--font-size-md);
}

.delivery-material-popover__header span {
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.delivery-material-popover__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 1.15rem;
  cursor: pointer;
}

.delivery-material-popover__close:hover {
  background: var(--color-border-soft);
  color: var(--color-navy);
}

.delivery-material-popover__close:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.delivery-material-popover__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.delivery-material-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  padding: 8px;
  gap: 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.delivery-material-item:hover {
  border-color: #9abaff;
  background: #f8fbff;
}

.delivery-material-item:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.delivery-material-item__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 9px;
  font-size: 0.625rem;
  font-weight: 900;
}

.delivery-material-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delivery-material-item__thumb--video {
  background: #eef2ff;
  color: #4f46e5;
}

.delivery-material-item__meta {
  min-width: 0;
}

.delivery-material-item__meta strong,
.delivery-material-item__meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-material-item__meta strong {
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

.delivery-material-item__meta small {
  margin-top: 3px;
  color: var(--color-text-subtle);
  font-size: 0.625rem;
}

.delivery-material-item__action {
  color: var(--color-primary);
  font-size: 0.625rem;
  font-weight: 800;
  white-space: nowrap;
}

.delivery-material-popover__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.delivery-material-popover__url:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.delivery-material-empty {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

@media screen and (max-width: 720px) {
  .delivery-material-popover__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 納品報告一覧の差戻し理由はセル内で2行に留め、全文は既存の固定ポップオーバーで読む。 */
.delivery-remand-reason {
  display: block;
  width: 100%;
}

.delivery-remand-reason__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  gap: 8px;
  border: 1px solid #f0dba6;
  border-radius: var(--radius-sm);
  background: #fffbf1;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.delivery-remand-reason__trigger:hover,
.delivery-remand-reason__trigger[aria-expanded=true] {
  border-color: #e9bd58;
  background: #fff7df;
}

.delivery-remand-reason__trigger:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.delivery-remand-reason__preview {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-xs);
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.delivery-remand-reason__action {
  color: #b77500;
  font-size: 0.6875rem;
  font-weight: 900;
  white-space: nowrap;
}

.delivery-remand-reason__popover {
  width: min(440px, 100vw - 24px);
}

.delivery-remand-reason__title {
  display: block;
  color: var(--color-navy);
  font-size: var(--font-size-sm);
}

.delivery-remand-reason__body {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.delivery-remand-reason__empty {
  color: var(--color-text-subtle);
}

/* パートナー画面: 差戻し理由を絞り、品目へ十分な幅を戻す。 */
table.data-table.partner-delivery-reports-table {
  min-width: 1120px;
  table-layout: fixed;
}

.partner-delivery-reports-table th:nth-child(1) {
  width: 6%;
}

.partner-delivery-reports-table th:nth-child(2) {
  width: 27%;
}

.partner-delivery-reports-table th:nth-child(3) {
  width: 18%;
}

.partner-delivery-reports-table th:nth-child(4) {
  width: 16%;
}

.partner-delivery-reports-table th:nth-child(5) {
  width: 15%;
}

.partner-delivery-reports-table th:nth-child(6) {
  width: 18%;
}

.partner-delivery-reports-table th:nth-child(2),
.partner-delivery-reports-table td:nth-child(2),
.partner-delivery-reports-table th:nth-child(3),
.partner-delivery-reports-table td:nth-child(3) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* パートナー発注書詳細: 品目名を読みやすくし、長文の差戻し理由が幅を占有しすぎない比率にする。 */
table.data-table.partner-purchase-order-delivery-reports-table {
  min-width: 1180px;
  table-layout: fixed;
}

.partner-purchase-order-delivery-reports-table__item {
  width: 20%;
}

.partner-purchase-order-delivery-reports-table__status {
  width: 11%;
}

.partner-purchase-order-delivery-reports-table__reported-at {
  width: 14%;
}

.partner-purchase-order-delivery-reports-table__accepted-at {
  width: 14%;
}

.partner-purchase-order-delivery-reports-table__materials {
  width: 15%;
}

.partner-purchase-order-delivery-reports-table__remand-reason {
  width: 18%;
}

.partner-purchase-order-delivery-reports-table__actions {
  width: 8%;
}

.partner-purchase-order-delivery-reports-table th:first-child,
.partner-purchase-order-delivery-reports-table td:first-child,
.partner-purchase-order-delivery-reports-table th:nth-child(6),
.partner-purchase-order-delivery-reports-table td:nth-child(6) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* パートナー請求書詳細: 公開前の注意事項を独立したカードとして読みやすく積む。 */
.partner-invoice-alerts {
  display: grid;
  gap: var(--space-3);
  margin-bottom: 16px;
}

/* 社員画面: 理由列を追加しても発注書・品目と納品物の情報量を維持する。 */
table.data-table.in-house-partner-delivery-reports-table {
  min-width: 1280px;
  table-layout: fixed;
}

.in-house-partner-delivery-reports-table th:nth-child(1) {
  width: 12%;
}

.in-house-partner-delivery-reports-table th:nth-child(2) {
  width: 22%;
}

.in-house-partner-delivery-reports-table th:nth-child(3) {
  width: 10%;
}

.in-house-partner-delivery-reports-table th:nth-child(4) {
  width: 18%;
}

.in-house-partner-delivery-reports-table th:nth-child(5) {
  width: 16%;
}

.in-house-partner-delivery-reports-table th:nth-child(6) {
  width: 12%;
}

.in-house-partner-delivery-reports-table th:nth-child(7) {
  width: 10%;
}

.in-house-partner-delivery-reports-table th:nth-child(1),
.in-house-partner-delivery-reports-table td:nth-child(1),
.in-house-partner-delivery-reports-table th:nth-child(2),
.in-house-partner-delivery-reports-table td:nth-child(2) {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.user.nav-closed .partner-invoice-selection-bar,
body.partner.nav-closed .partner-invoice-selection-bar {
  left: 32px;
}

@media screen and (max-width: 1080px) {
  .partner-invoice-selection-bar {
    right: 14px;
    left: calc(var(--app-sidebar-width) + 14px);
  }
  body.user.nav-closed .partner-invoice-selection-bar,
  body.partner.nav-closed .partner-invoice-selection-bar {
    left: 14px;
  }
}
@media screen and (max-width: 767px) {
  .partner-invoice-select-page {
    padding-bottom: 136px;
  }
  .partner-invoice-select-page .section-description {
    padding-inline: var(--space-4);
  }
  .partner-invoice-selection-bar,
  body.user.nav-closed .partner-invoice-selection-bar,
  body.partner.nav-closed .partner-invoice-selection-bar {
    right: 14px;
    left: 14px;
  }
}
/* アップロードエリアと一覧テーブルを別カードに分けて余白を空ける
   (minmax(0,1fr)でテーブルのmin-contentがカード幅を押し広げないようにする) */
.offline-invoice-uploads-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.projects-page-header,
.accounting-documents-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.projects-page-heading,
.accounting-documents-page-heading {
  min-width: 0;
}

.projects-page-heading h1,
.accounting-documents-page-heading h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.projects-page-actions,
.projects-export-actions,
.projects-search-actions,
.contents-export-actions,
.accounting-documents-page-actions,
.accounting-documents-export-actions,
.accounting-documents-search-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.projects-export-actions,
.contents-export-actions,
.accounting-documents-export-actions {
  margin-bottom: 12px;
}

.projects-export-actions form,
.projects-export-actions .button_to,
.accounting-documents-export-actions form,
.accounting-documents-export-actions .button_to {
  margin: 0;
}

.projects-search,
.accounting-documents-search {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.projects-search-grid,
.accounting-documents-search-grid {
  align-items: end;
}

.projects-search-field-wide,
.accounting-documents-search-field-wide {
  align-self: start;
  grid-column: span 2;
}

.projects-search-actions,
.accounting-documents-search-actions {
  grid-column: span 2;
}

.app-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.app-date-range span {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.app-readonly-text {
  min-height: 38px;
  margin: 0;
  padding: 9px 0;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.projects-results-toolbar,
.accounting-documents-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.projects-result-meta,
.accounting-documents-result-meta {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
}

/* 一覧ごとの最低幅について:
   parts.scss の .data-table(min-width: 1120px)は app.scss より後に読まれるため、
   単一クラス指定(.projects-table 等)では上書きできず効かない。
   プロジェクト/制作物一覧は共通の1120pxで足りているので個別指定は持たない。 */
/* 会計書類系の一覧は列がパネル幅に収まるため、横スクロールを出さずに全列を見せる。
   見出しの折り返しを許可して内容幅の下限も下げる(.data-table th は既定でnowrap)。 */
table.accounting-documents-table {
  min-width: 0;
}

table.accounting-documents-table th {
  white-space: normal;
}

/* 画面が狭いときは各列が潰れて読めなくなるため、共通の最低幅に戻して横スクロールさせる */
@media screen and (max-width: 1024px) {
  table.accounting-documents-table {
    min-width: 1120px;
  }
}
/* パートナー発注書一覧はPJ一覧と同じ横スクロール方式にする:
   会計書類共通の詰め込み(min-width:0+見出し折り返し)を解除し、セルを折り返さない。
   表示列が少なければパネル幅に収まりスクロールは出ず、
   列を増やして収まらなくなったら .table-scroll の横スクロールが発生する */
table.data-table.partner-purchase-order-documents-table {
  min-width: 1120px;
}

table.partner-purchase-order-documents-table th,
table.partner-purchase-order-documents-table td {
  white-space: nowrap;
}

/* 幅を取りやすい列は上限だけ決めて、狭いときは縮められるようにする */
.partner-purchase-order-documents-table th:nth-child(2),
.partner-purchase-order-documents-table td:nth-child(2) {
  max-width: 320px;
  white-space: normal;
}

.partner-purchase-order-documents-table td:nth-child(2) a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 制作物(ID)列は書類タイトル列の半分の幅に抑え、長い制作物名は折り返す。
   他列に押されて読めない幅まで潰れないよう下限も固定する */
.partner-purchase-order-documents-table th:nth-child(3),
.partner-purchase-order-documents-table td:nth-child(3) {
  min-width: 160px;
  max-width: 160px;
  white-space: normal;
}

.partner-purchase-order-documents-table td:nth-child(3) a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 発注書一覧・見積書一覧もパートナー発注書一覧と同じ横スクロール方式にする:
   表示内容がパネル幅に収まる間はスクロールは出ず、収まらなくなったら横スクロールが発生する */
table.data-table.eligible-purchase-order-documents-table,
table.data-table.eligible-estimate-documents-table {
  min-width: 1120px;
}

table.eligible-purchase-order-documents-table th,
table.eligible-purchase-order-documents-table td,
table.eligible-estimate-documents-table th,
table.eligible-estimate-documents-table td {
  white-space: nowrap;
}

/* 書類タイトル列は上限だけ決めて折り返す */
.eligible-purchase-order-documents-table th:nth-child(4),
.eligible-purchase-order-documents-table td:nth-child(4),
.eligible-estimate-documents-table th:nth-child(4),
.eligible-estimate-documents-table td:nth-child(4) {
  max-width: 320px;
  white-space: normal;
}

.eligible-purchase-order-documents-table td:nth-child(4) a,
.eligible-estimate-documents-table td:nth-child(4) a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 請求書・納品書・検収書(共通一覧)とパートナー請求書一覧も同じ横スクロール方式にする */
table.data-table.simple-accounting-documents-table,
table.data-table.partner-invoice-documents-table {
  min-width: 1120px;
}

table.simple-accounting-documents-table th,
table.simple-accounting-documents-table td,
table.partner-invoice-documents-table th,
table.partner-invoice-documents-table td {
  white-space: nowrap;
}

/* 書類タイトル(書類No.)/請求書ID列は上限だけ決めて折り返す */
.simple-accounting-documents-table th:nth-child(2),
.simple-accounting-documents-table td:nth-child(2),
.partner-invoice-documents-table th:nth-child(2),
.partner-invoice-documents-table td:nth-child(2) {
  max-width: 320px;
  white-space: normal;
}

.simple-accounting-documents-table td:nth-child(2) a,
.partner-invoice-documents-table td:nth-child(2) a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 直販名/プロジェクト名列(見積書=5列目、発注書=6列目)も上限だけ決めて折り返す */
.eligible-estimate-documents-table th:nth-child(5),
.eligible-estimate-documents-table td:nth-child(5),
.eligible-purchase-order-documents-table th:nth-child(6),
.eligible-purchase-order-documents-table td:nth-child(6) {
  max-width: 360px;
  white-space: normal;
}

.eligible-estimate-documents-table td:nth-child(5) a,
.eligible-purchase-order-documents-table td:nth-child(6) a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 原価見積書一覧の見出しは全列1行に固定する(会計書類共通の折り返し指定より優先) */
table.cost-estimates-table th {
  white-space: nowrap;
}

.cost-estimates-table th:nth-child(3),
.cost-estimates-table td:nth-child(3) {
  max-width: 320px;
}

.cost-estimates-table th:nth-child(4),
.cost-estimates-table td:nth-child(4) {
  max-width: 360px;
}

.cost-estimates-table td:nth-child(3),
.cost-estimates-table td:nth-child(4) {
  white-space: normal;
}

/* 作成者は折り返さない */
.cost-estimates-table td:nth-child(7) {
  white-space: nowrap;
}

.cost-estimates-table td:nth-child(3) a,
.cost-estimates-table td:nth-child(4) a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.projects-cell-stack,
.accounting-documents-title-cell {
  display: grid;
  gap: 6px;
}

.projects-table:not(.projects-table--with-id) th:first-child,
.projects-table:not(.projects-table--with-id) td:first-child,
.projects-table--with-id th:nth-child(2),
.projects-table--with-id td:nth-child(2) {
  min-width: 340px;
  width: 340px;
}

.projects-table th[data-column=memo],
.projects-table td[data-column-key=memo] {
  min-width: 280px;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.contents-table th:first-child,
.contents-table td:first-child {
  min-width: 360px;
  width: 360px;
}

/* 一覧の表示列切り替え。チェックを外した列を見出し・本文ごと隠す。
   トグル行は結果コンテナ(#xxx-results)の外にあるため、
   ライブ検索で結果が差し替わっても選択は保たれる。 */
.column-toggle {
  row-gap: var(--space-2);
}

.column-toggle__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.column-toggle__actions {
  display: inline-flex;
  gap: var(--space-1);
}

.projects-column-toggle:has([data-column-toggle=project_id]:not(:checked)) ~ #projects-results th[data-column=project_id],
.projects-column-toggle:has([data-column-toggle=project_id]:not(:checked)) ~ #projects-results td[data-column-key=project_id] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=reading_status]:not(:checked)) ~ #projects-results th[data-column=reading_status],
.projects-column-toggle:has([data-column-toggle=reading_status]:not(:checked)) ~ #projects-results td[data-column-key=reading_status] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=scheduled_order_date]:not(:checked)) ~ #projects-results th[data-column=scheduled_order_date],
.projects-column-toggle:has([data-column-toggle=scheduled_order_date]:not(:checked)) ~ #projects-results td[data-column-key=scheduled_order_date] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=second_meeting_date]:not(:checked)) ~ #projects-results th[data-column=second_meeting_date],
.projects-column-toggle:has([data-column-toggle=second_meeting_date]:not(:checked)) ~ #projects-results td[data-column-key=second_meeting_date] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=suggested_price]:not(:checked)) ~ #projects-results th[data-column=suggested_price],
.projects-column-toggle:has([data-column-toggle=suggested_price]:not(:checked)) ~ #projects-results td[data-column-key=suggested_price] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=suggested_gross_profit]:not(:checked)) ~ #projects-results th[data-column=suggested_gross_profit],
.projects-column-toggle:has([data-column-toggle=suggested_gross_profit]:not(:checked)) ~ #projects-results td[data-column-key=suggested_gross_profit] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=acquisition_prospect]:not(:checked)) ~ #projects-results th[data-column=acquisition_prospect],
.projects-column-toggle:has([data-column-toggle=acquisition_prospect]:not(:checked)) ~ #projects-results td[data-column-key=acquisition_prospect] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=sales_priority]:not(:checked)) ~ #projects-results th[data-column=sales_priority],
.projects-column-toggle:has([data-column-toggle=sales_priority]:not(:checked)) ~ #projects-results td[data-column-key=sales_priority] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=memo]:not(:checked)) ~ #projects-results th[data-column=memo],
.projects-column-toggle:has([data-column-toggle=memo]:not(:checked)) ~ #projects-results td[data-column-key=memo] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=tag_id]:not(:checked)) ~ #projects-results th[data-column=tag_id],
.projects-column-toggle:has([data-column-toggle=tag_id]:not(:checked)) ~ #projects-results td[data-column-key=tag_id] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=elapsed_days]:not(:checked)) ~ #projects-results th[data-column=elapsed_days],
.projects-column-toggle:has([data-column-toggle=elapsed_days]:not(:checked)) ~ #projects-results td[data-column-key=elapsed_days] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=sales_user_id]:not(:checked)) ~ #projects-results th[data-column=sales_user_id],
.projects-column-toggle:has([data-column-toggle=sales_user_id]:not(:checked)) ~ #projects-results td[data-column-key=sales_user_id] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=purchase_order_conclusion_date]:not(:checked)) ~ #projects-results th[data-column=purchase_order_conclusion_date],
.projects-column-toggle:has([data-column-toggle=purchase_order_conclusion_date]:not(:checked)) ~ #projects-results td[data-column-key=purchase_order_conclusion_date] {
  display: none;
}

.projects-column-toggle:has([data-column-toggle=director_user_id]:not(:checked)) ~ #projects-results th[data-column=director_user_id],
.projects-column-toggle:has([data-column-toggle=director_user_id]:not(:checked)) ~ #projects-results td[data-column-key=director_user_id] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=format]:not(:checked)) ~ #contents-results th[data-column=format],
.contents-column-toggle:has([data-column-toggle=format]:not(:checked)) ~ #contents-results td[data-column-key=format] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=reading_status]:not(:checked)) ~ #contents-results th[data-column=reading_status],
.contents-column-toggle:has([data-column-toggle=reading_status]:not(:checked)) ~ #contents-results td[data-column-key=reading_status] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=order_price]:not(:checked)) ~ #contents-results th[data-column=order_price],
.contents-column-toggle:has([data-column-toggle=order_price]:not(:checked)) ~ #contents-results td[data-column-key=order_price] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=estimated_cost]:not(:checked)) ~ #contents-results th[data-column=estimated_cost],
.contents-column-toggle:has([data-column-toggle=estimated_cost]:not(:checked)) ~ #contents-results td[data-column-key=estimated_cost] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=current_cost]:not(:checked)) ~ #contents-results th[data-column=current_cost],
.contents-column-toggle:has([data-column-toggle=current_cost]:not(:checked)) ~ #contents-results td[data-column-key=current_cost] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=estimated_gross_profit_rate]:not(:checked)) ~ #contents-results th[data-column=estimated_gross_profit_rate],
.contents-column-toggle:has([data-column-toggle=estimated_gross_profit_rate]:not(:checked)) ~ #contents-results td[data-column-key=estimated_gross_profit_rate] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=gross_profit_rate]:not(:checked)) ~ #contents-results th[data-column=gross_profit_rate],
.contents-column-toggle:has([data-column-toggle=gross_profit_rate]:not(:checked)) ~ #contents-results td[data-column-key=gross_profit_rate] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=current_delivery_date]:not(:checked)) ~ #contents-results th[data-column=current_delivery_date],
.contents-column-toggle:has([data-column-toggle=current_delivery_date]:not(:checked)) ~ #contents-results td[data-column-key=current_delivery_date] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=director]:not(:checked)) ~ #contents-results th[data-column=director],
.contents-column-toggle:has([data-column-toggle=director]:not(:checked)) ~ #contents-results td[data-column-key=director] {
  display: none;
}

.contents-column-toggle:has([data-column-toggle=consultant]:not(:checked)) ~ #contents-results th[data-column=consultant],
.contents-column-toggle:has([data-column-toggle=consultant]:not(:checked)) ~ #contents-results td[data-column-key=consultant] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=content]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=content],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=content]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=content] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=partner]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=partner],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=partner]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=partner] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=user]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=user],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=user]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=user] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=total]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=total],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=total]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=total] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=in_company_status]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=in_company_status],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=in_company_status]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=in_company_status] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=partner_status]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=partner_status],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=partner_status]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=partner_status] {
  display: none;
}

.partner-purchase-order-documents-column-toggle:has([data-column-toggle=send_history]:not(:checked)) ~ #partner-purchase-order-documents-results th[data-column=send_history],
.partner-purchase-order-documents-column-toggle:has([data-column-toggle=send_history]:not(:checked)) ~ #partner-purchase-order-documents-results td[data-column-key=send_history] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=created_at]:not(:checked)) ~ #acceptance-inspections-results th[data-column=created_at],
.acceptance-inspections-column-toggle:has([data-column-toggle=created_at]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=created_at] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=project_id]:not(:checked)) ~ #acceptance-inspections-results th[data-column=project_id],
.acceptance-inspections-column-toggle:has([data-column-toggle=project_id]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=project_id] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=document]:not(:checked)) ~ #acceptance-inspections-results th[data-column=document],
.acceptance-inspections-column-toggle:has([data-column-toggle=document]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=document] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=inspected_date]:not(:checked)) ~ #acceptance-inspections-results th[data-column=inspected_date],
.acceptance-inspections-column-toggle:has([data-column-toggle=inspected_date]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=inspected_date] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=sales_amount]:not(:checked)) ~ #acceptance-inspections-results th[data-column=sales_amount],
.acceptance-inspections-column-toggle:has([data-column-toggle=sales_amount]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=sales_amount] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=outsourcing_cost]:not(:checked)) ~ #acceptance-inspections-results th[data-column=outsourcing_cost],
.acceptance-inspections-column-toggle:has([data-column-toggle=outsourcing_cost]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=outsourcing_cost] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=deposit_type]:not(:checked)) ~ #acceptance-inspections-results th[data-column=deposit_type],
.acceptance-inspections-column-toggle:has([data-column-toggle=deposit_type]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=deposit_type] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=deposit_type_error]:not(:checked)) ~ #acceptance-inspections-results th[data-column=deposit_type_error],
.acceptance-inspections-column-toggle:has([data-column-toggle=deposit_type_error]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=deposit_type_error] {
  display: none;
}

.acceptance-inspections-column-toggle:has([data-column-toggle=status]:not(:checked)) ~ #acceptance-inspections-results th[data-column=status],
.acceptance-inspections-column-toggle:has([data-column-toggle=status]:not(:checked)) ~ #acceptance-inspections-results td[data-column-key=status] {
  display: none;
}

/* 検収一覧の操作列は固定しない(他の列と同じく横スクロールに追従させる) */
.acceptance-inspections-table .cell-actions {
  position: static;
  width: auto;
  min-width: 0;
}

.invoices-column-toggle:has([data-column-toggle=issuing_date]:not(:checked)) ~ #invoices-results th[data-column=issuing_date],
.invoices-column-toggle:has([data-column-toggle=issuing_date]:not(:checked)) ~ #invoices-results td[data-column-key=issuing_date] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=planned_deposit_date]:not(:checked)) ~ #invoices-results th[data-column=planned_deposit_date],
.invoices-column-toggle:has([data-column-toggle=planned_deposit_date]:not(:checked)) ~ #invoices-results td[data-column-key=planned_deposit_date] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=billing_amount]:not(:checked)) ~ #invoices-results th[data-column=billing_amount],
.invoices-column-toggle:has([data-column-toggle=billing_amount]:not(:checked)) ~ #invoices-results td[data-column-key=billing_amount] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=deposited_amount]:not(:checked)) ~ #invoices-results th[data-column=deposited_amount],
.invoices-column-toggle:has([data-column-toggle=deposited_amount]:not(:checked)) ~ #invoices-results td[data-column-key=deposited_amount] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=accounting_share]:not(:checked)) ~ #invoices-results th[data-column=accounting_share],
.invoices-column-toggle:has([data-column-toggle=accounting_share]:not(:checked)) ~ #invoices-results td[data-column-key=accounting_share] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=deposit_date]:not(:checked)) ~ #invoices-results th[data-column=deposit_date],
.invoices-column-toggle:has([data-column-toggle=deposit_date]:not(:checked)) ~ #invoices-results td[data-column-key=deposit_date] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=deposit_type]:not(:checked)) ~ #invoices-results th[data-column=deposit_type],
.invoices-column-toggle:has([data-column-toggle=deposit_type]:not(:checked)) ~ #invoices-results td[data-column-key=deposit_type] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=deposit_type_error]:not(:checked)) ~ #invoices-results th[data-column=deposit_type_error],
.invoices-column-toggle:has([data-column-toggle=deposit_type_error]:not(:checked)) ~ #invoices-results td[data-column-key=deposit_type_error] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=memo]:not(:checked)) ~ #invoices-results th[data-column=memo],
.invoices-column-toggle:has([data-column-toggle=memo]:not(:checked)) ~ #invoices-results td[data-column-key=memo] {
  display: none;
}

.invoices-column-toggle:has([data-column-toggle=payee_memo]:not(:checked)) ~ #invoices-results th[data-column=payee_memo],
.invoices-column-toggle:has([data-column-toggle=payee_memo]:not(:checked)) ~ #invoices-results td[data-column-key=payee_memo] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=date]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=date],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=date]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=date] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=item]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=item],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=item]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=item] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=content]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=content],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=content]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=content] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=price]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=price],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=price]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=price] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=content_status]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=content_status],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=content_status]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=content_status] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=document_status]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=document_status],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=document_status]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=document_status] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=invoice_row]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=invoice_row],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=invoice_row]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=invoice_row] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=todo]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=todo],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=todo]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=todo] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=payment_date]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=payment_date],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=payment_date]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=payment_date] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=abnormal_invoice]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=abnormal_invoice],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=abnormal_invoice]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=abnormal_invoice] {
  display: none;
}

.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=abnormal_todo]:not(:checked)) ~ #partner-purchase-order-detail-list-results th[data-column=abnormal_todo],
.partner-purchase-order-detail-list-column-toggle:has([data-column-toggle=abnormal_todo]:not(:checked)) ~ #partner-purchase-order-detail-list-results td[data-column-key=abnormal_todo] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=level]:not(:checked)) ~ #accident-informations-results th[data-column=level],
.accident-informations-column-toggle:has([data-column-toggle=level]:not(:checked)) ~ #accident-informations-results td[data-column-key=level] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=accident_type]:not(:checked)) ~ #accident-informations-results th[data-column=accident_type],
.accident-informations-column-toggle:has([data-column-toggle=accident_type]:not(:checked)) ~ #accident-informations-results td[data-column-key=accident_type] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=user]:not(:checked)) ~ #accident-informations-results th[data-column=user],
.accident-informations-column-toggle:has([data-column-toggle=user]:not(:checked)) ~ #accident-informations-results td[data-column-key=user] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=partner]:not(:checked)) ~ #accident-informations-results th[data-column=partner],
.accident-informations-column-toggle:has([data-column-toggle=partner]:not(:checked)) ~ #accident-informations-results td[data-column-key=partner] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=origin]:not(:checked)) ~ #accident-informations-results th[data-column=origin],
.accident-informations-column-toggle:has([data-column-toggle=origin]:not(:checked)) ~ #accident-informations-results td[data-column-key=origin] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=report]:not(:checked)) ~ #accident-informations-results th[data-column=report],
.accident-informations-column-toggle:has([data-column-toggle=report]:not(:checked)) ~ #accident-informations-results td[data-column-key=report] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=details]:not(:checked)) ~ #accident-informations-results th[data-column=details],
.accident-informations-column-toggle:has([data-column-toggle=details]:not(:checked)) ~ #accident-informations-results td[data-column-key=details] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=correspondence]:not(:checked)) ~ #accident-informations-results th[data-column=correspondence],
.accident-informations-column-toggle:has([data-column-toggle=correspondence]:not(:checked)) ~ #accident-informations-results td[data-column-key=correspondence] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=cause]:not(:checked)) ~ #accident-informations-results th[data-column=cause],
.accident-informations-column-toggle:has([data-column-toggle=cause]:not(:checked)) ~ #accident-informations-results td[data-column-key=cause] {
  display: none;
}

.accident-informations-column-toggle:has([data-column-toggle=measures]:not(:checked)) ~ #accident-informations-results th[data-column=measures],
.accident-informations-column-toggle:has([data-column-toggle=measures]:not(:checked)) ~ #accident-informations-results td[data-column-key=measures] {
  display: none;
}

/* 事故情報一覧の長文列は上限を決めて折り返す(全文はtitleで確認できる) */
.accident-informations-table .accident-informations-long-text {
  max-width: 280px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.contacts-column-toggle:has([data-column-toggle=inflow_genre]:not(:checked)) ~ #contacts-results th[data-column=inflow_genre],
.contacts-column-toggle:has([data-column-toggle=inflow_genre]:not(:checked)) ~ #contacts-results td[data-column-key=inflow_genre] {
  display: none;
}

.contacts-column-toggle:has([data-column-toggle=conversion_method]:not(:checked)) ~ #contacts-results th[data-column=conversion_method],
.contacts-column-toggle:has([data-column-toggle=conversion_method]:not(:checked)) ~ #contacts-results td[data-column-key=conversion_method] {
  display: none;
}

.contacts-column-toggle:has([data-column-toggle=purpose]:not(:checked)) ~ #contacts-results th[data-column=purpose],
.contacts-column-toggle:has([data-column-toggle=purpose]:not(:checked)) ~ #contacts-results td[data-column-key=purpose] {
  display: none;
}

.contacts-column-toggle:has([data-column-toggle=budget]:not(:checked)) ~ #contacts-results th[data-column=budget],
.contacts-column-toggle:has([data-column-toggle=budget]:not(:checked)) ~ #contacts-results td[data-column-key=budget] {
  display: none;
}

/* 問い合わせ一覧の操作列は固定しない(他の列と同じく横スクロールに追従させる) */
.contact-list-table .cell-actions {
  position: static;
  width: auto;
  min-width: 0;
}

/* 先方担当者一覧の操作列は固定しない(他の列と同じく横スクロールに追従させる) */
.person-in-charges-table .cell-actions {
  position: static;
  width: auto;
  min-width: 0;
}

/* 制作物詳細のタスク/ファイルタブ、企業詳細の先方担当者タブの操作(削除)列は横方向に固定しない
   (PC幅でも他の列と同じく横スクロールに追従させる)。
   本文セルは完全に固定解除し、見出しは縦スクロール時の top sticky を残して右固定だけ外す。 */
.content-detail-task-table tbody .cell-actions,
.content-detail-file-table tbody .cell-actions,
.client-person-table tbody .cell-actions {
  position: static;
  width: auto;
  min-width: 0;
}

.content-detail-task-table thead .cell-actions,
.content-detail-file-table thead .cell-actions,
.client-person-table thead .cell-actions {
  right: auto;
  width: auto;
  min-width: 0;
}

/* 検収書が紐づいて変更できないステータス。理由はtitleで示すのでカーソルで気付けるようにする */
.status-locked {
  cursor: help;
}

/* 制作物詳細TOPの検収済み売上。数値そのものをホバー/フォーカスしたときに
   変更できない理由を表示し、「?」のヘルプカーソルだけに依存しない。 */
.locked-value-with-tooltip {
  position: relative;
  display: inline-flex;
  cursor: default;
}

.content_pl_table .pl_sales.status-locked {
  cursor: default;
}

.accounting-document-disabled-action__tooltip.locked-value-with-tooltip__popup {
  top: auto;
  right: auto;
  bottom: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: min(260px, 100vw - 32px);
  transform: translate(-50%, 4px);
}

.accounting-document-disabled-action__tooltip.locked-value-with-tooltip__popup::before {
  top: auto;
  right: auto;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.locked-value-with-tooltip:hover .locked-value-with-tooltip__popup,
.locked-value-with-tooltip:focus .locked-value-with-tooltip__popup {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.locked-value-with-tooltip:focus-visible {
  border-radius: var(--radius-xs);
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* プロジェクト詳細の制作物一覧の「複製」列は固定しない(他の列と同じく横スクロールに追従させる) */
.contents-project-list-table .cell-actions {
  position: static;
  width: auto;
  min-width: 0;
}

/* 一覧テーブルの本文は13px。列数が多くても収まりやすいパートナー発注品目一覧の
   見え方に全一覧ページを揃える(見出しは従来どおり12px) */
.data-table td {
  font-size: 13px;
}

/* 「企業名/プロジェクト名/制作物名」のように1セルへ複数の名称を積むセルでは、
   そのセルの主体(= そのページの主役となる要素)を一番大きく見せる。
   上下の並びは変えず、大きさ・太さ・色だけで主従を表す。
   主体は .cell-stack__main か素の strong、それ以外の行は補足サイズ(12px)。 */
.data-table .cell-stack {
  font-size: var(--font-size-xs);
}

.data-table .cell-stack > strong,
.data-table .cell-stack > .cell-stack__main {
  color: var(--color-navy-900);
  font-size: 13px;
  font-weight: 800;
}

/* 複数行を積むセルの行間・区切り線は parts.scss の
   「.data-table .cell-stack > * + *」(全一覧共通の区切り線 #dfe7f2)が担当する */
/* まとめたセルは省略せず折り返して全文を見せる(横スクロールを減らす目的の集約なので) */
.projects-table:not(.projects-table--with-id) td:first-child .cell-stack strong,
.projects-table:not(.projects-table--with-id) td:first-child .cell-stack span,
.projects-table--with-id td:nth-child(2) .cell-stack strong,
.projects-table--with-id td:nth-child(2) .cell-stack span,
.contents-table td:first-child .cell-stack strong,
.contents-table td:first-child .cell-stack span {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-table th.app-table-date,
.app-table td.app-table-date,
.app-table td.app-table-date .client-inline-trigger,
.users-table-date,
.contact-table-date,
.client-table-date,
.client-table-date .client-inline-trigger,
.person-in-charges-table-date,
.person-in-charges-table-date .client-inline-trigger,
.sales-tasks-table-date,
.meetings-table-date {
  white-space: nowrap !important;
}

.contents-cell-stack > * + *,
.accounting-documents-title-cell > * + * {
  padding-top: 6px;
  border-top: 1px solid var(--app-border);
}

.projects-cell-stack > * {
  min-width: 0;
}

.projects-cell-stack > * + * {
  position: relative;
  padding-top: 6px;
}

.projects-cell-stack > * + *::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--app-border);
}

.projects-number,
.contents-number,
.accounting-documents-number {
  text-align: right !important;
  white-space: nowrap;
}

.projects-table th,
.projects-table td,
.contents-table th,
.contents-table td,
.app-table.accounting-documents-table th,
.app-table.accounting-documents-table td {
  white-space: nowrap;
}

.projects-table:not(.projects-table--with-id) th:first-child,
.projects-table:not(.projects-table--with-id) td:first-child,
.projects-table--with-id th:nth-child(2),
.projects-table--with-id td:nth-child(2),
.contents-table th:first-child,
.contents-table td:first-child,
.app-table.accounting-documents-table th:nth-child(3),
.app-table.accounting-documents-table td:nth-child(3) {
  white-space: normal;
}

.projects-table th[data-column=memo],
.projects-table td[data-column-key=memo] {
  white-space: normal;
}

.projects-table .client-inline-trigger {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.projects-table .client-inline-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-detail-page,
.content-detail-page {
  display: grid;
  gap: 0;
  min-width: 0;
}

.content-detail-page .content-embedded-message:not(:empty) {
  margin-bottom: 16px;
}

.project-detail-tab-panel,
.content-detail-tab-panel {
  display: none;
  gap: 16px;
  min-width: 0;
}

.project-detail-tab-panel.active,
.content-detail-tab-panel.active {
  display: grid;
}

/* main_content(スクロールコンテナ)の上padding領域にはスクロール中の
   コンテンツが透けて見えるため、詳細ページでは上paddingを固定ヘッダー側へ移す */
body.user.controller_projects.action_show .main_content,
body.user.controller_clients.action_show .main_content,
body.user.controller_person_in_charges.action_show .main_content,
body.user.controller_contents.action_show .main_content,
body.partner.controller_contents.action_show .main_content {
  padding-top: 0;
}

/* 4カラム(項目/値 ×2)の詳細テーブルは colgroup で列幅を固定し、
   値の長さに応じて列幅が動かないようにする */
.project-detail-kv-table {
  table-layout: fixed;
}

.project-detail-kv-table col.project-detail-col-label {
  width: 220px;
}

/* detail-grid 内ではヨミ表示の旧レイアウト用の枠・余白を持たせない */
.detail-grid .project_sales_information__current_reading {
  min-height: 0;
  padding: 0;
  border-right: 0;
}

/* 編集可能セルでも行罫線は維持する(旧デザインの border_bottom_none を打ち消す) */
.project-detail-table .border_bottom_none {
  border-bottom: 1px solid var(--app-border) !important;
}

.project_fixed_header,
.detail-fixed-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 0;
  padding: 20px 0 0;
  background: rgba(245, 247, 251, 0.86);
  backdrop-filter: blur(16px);
}

/* 詳細ページのタブは design_parts の work-panel と同様に、
   直下のメインエリアと一体の器にする(タブ上部のみ角丸) */
.project_fixed_header .tabs,
.detail-fixed-header .tabs {
  border: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
}

/* タブ配下は1つの器(panel)として表示し、内部セクションは罫線で区切る
   (2026-07 ユーザー決定: セクションごとの角丸カード分割をやめる) */
.project-detail-page .project-detail-tab-panel.active,
.client-detail-page .client-tab-panel.active,
.person-in-charges-detail-page .person-in-charges-tab-panel.active,
.content-detail-page .content-detail-tab-panel.active,
.partner-content-page .partner-content-tab-panel.active {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-top: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.project-detail-page .project-detail-tab-panel .app-section,
.client-detail-page .client-tab-panel .app-section,
.client-detail-page .client-tab-panel > .client-detail-section,
.contact-detail-page .panel > .app-section,
.person-in-charges-detail-page .person-in-charges-tab-panel .app-section,
.sales-tasks-detail-page .panel > .app-section,
.meetings-detail-page .panel > .app-section,
.person-in-charges-form-page .panel > .app-section,
.meetings-form-page .panel > .app-section,
.client-form-page .panel > .app-section,
.works-announcements-form-page .panel > .app-section,
.accident-informations-form-page .panel > .app-section,
.users-invite-page .panel > .app-section,
.contacts-form-page .panel > .app-section,
.email-change-page .panel > .app-section,
.partner-accounts-page .panel > .app-section,
.partner-accounts-new-page .panel > .app-section,
.partner-contract-check-page .panel > .app-section,
.content-detail-page .content-detail-tab-panel .app-section,
.partner-content-page .partner-content-tab-panel .app-section,
.partner-content-page .panel > .app-section,
.accounting-document-detail-page .panel > .app-section,
.accounting-document-form-page .panel > .app-section,
.partner-top-page .panel > .app-section,
.dashboard-page .dashboard-personal-panel > .app-section,
.accounting-imports-page .panel > .app-section,
.works-announcements-detail-page .panel > .app-section,
.partners-detail-page .panel > .app-section,
.announcement-detail-page .panel > .app-section,
.accident-informations-form-page .panel > .app-section {
  box-sizing: border-box;
  margin: 0;
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-detail-page .project-detail-tab-panel > * + *:not(.app-alert),
.client-detail-page .client-tab-panel > * + *:not(.app-alert),
.contact-detail-page .panel > .app-section + .app-section,
.person-in-charges-detail-page .person-in-charges-tab-panel > * + *:not(.app-alert),
.sales-tasks-detail-page .panel > .app-section + .app-section,
.meetings-detail-page .panel > .app-section + .app-section,
.partner-accounts-page .panel > .app-section + .app-section,
.content-detail-page .content-detail-tab-panel > * + *:not(.app-alert),
.partner-content-page .partner-content-tab-panel > * + *:not(.app-alert),
.partner-top-page .panel > .app-section + .app-section,
.dashboard-page .dashboard-personal-panel > .app-section + .app-section,
.partner-content-page .panel > .app-section + .app-section,
.accounting-imports-page .panel > .app-section + .app-section,
.works-announcements-detail-page .panel > .app-section + .app-section,
.partners-detail-page .panel > .app-section + .app-section,
.announcement-detail-page .panel > .app-section + .app-section,
.accounting-document-detail-page .panel > .app-section + .app-section {
  border-top: 1px solid var(--color-border-soft);
}

.project-detail-page .project-detail-tab-panel > .app-alert,
.client-detail-page .client-tab-panel > .app-alert,
.person-in-charges-detail-page .person-in-charges-tab-panel > .app-alert,
.sales-tasks-detail-page .panel > .app-alert,
.meetings-detail-page .panel > .app-alert,
.content-detail-page .content-detail-tab-panel > .app-alert {
  margin: 20px 24px;
}

.project-detail-page .project-detail-tab-panel > .project-detail-actions {
  padding: 20px 24px;
}

/* ページ直下の grid gap がタブとメインエリアを離すため 0 にする。
   タブ上に置く警告類は margin で間隔を確保する */
.project-detail-page {
  gap: 0;
}

.project-detail-page > .app-alert {
  margin-bottom: 16px;
}

.project-detail-page > .project-antisocial-alert {
  margin-top: 16px;
  margin-bottom: 0;
}

.project-detail-page > .project-antisocial-alert + .project_fixed_header {
  padding-top: 12px;
}

/* メールアドレス変更フォームでは現在値を簡潔に示し、入力と送信操作を近接させる */
.email-change-current__value {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.email-change-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-width: 0;
}

@media (max-width: 720px) {
  .email-change-input-row {
    grid-template-columns: 1fr;
  }
}
/* タブ内検索フォームのアクション行 */
.client-tab-search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 取引企業詳細: 埋め込み警告(事故情報)はタブの上に置く */
.client-detail-page {
  display: grid;
  gap: 0;
}

.client-detail-page .client-embedded-message:not(:empty) {
  margin-bottom: 16px;
}

/* AI入力バッジを detail-grid のラベルでも表示する */
.detail-grid__label.created_by_ai {
  padding-right: 36px;
}

.detail-grid__label.created_by_ai::after {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.project-detail-section,
.content-detail-page .app-section {
  min-width: 0;
}

.project-detail-inline-form,
.project-detail-inline-form .button_to,
.project-detail-section .button_to,
.content-detail-page .button_to {
  margin: 0;
}

.project-detail-table {
  min-width: 860px;
}

.project-detail-table th {
  white-space: nowrap;
}

.project-detail-table td {
  word-break: break-word;
}

/* 選択中の発注書に紐づく書類のハイライト。グレーだと削除済み・不要の印象を
   与えるため、トンマナの青系でプラスの印象にする(左端に選択中のアクセント) */
.project-detail-table .is-selected td,
.project-detail-table tr.is-selected > td,
.project-accounting-table tr.is-selected > td {
  background: var(--color-primary-50);
}

.project-detail-table tr.is-selected > td:first-child,
.project-accounting-table tr.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.project-detail-number {
  text-align: right !important;
  white-space: nowrap;
}

.project-detail-cell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.project-detail-label-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.projectInflowModalTrigger,
.client-inline-trigger {
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.projectInflowModalTrigger:hover,
.client-inline-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project_sales_information {
  display: grid;
  gap: 16px;
  padding-top: 0;
}

.project_sales_information__main,
.project_sales_information__block {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
}

.project_sales_information__form {
  display: grid;
  gap: 14px;
}

.project_sales_information__choice_row,
.project_sales_information__memo_row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(120px, 160px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.project_sales_information__choice_label,
.project_sales_information__memo_label {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border-right: 1px solid var(--app-border);
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.project_sales_information__choice,
.project_sales_information__current_reading,
.project_sales_information__memo_value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 46px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.project_sales_information__choice:last-child,
.project_sales_information__memo_value:last-child {
  border-right: 0;
}

.project_sales_information__field_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.project_sales_information__field {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 6px;
}

.project_sales_information__field_label,
.project_sales_information__memo_label {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.project_sales_information__required {
  margin-left: 3px;
  color: #dc2626;
}

.project_sales_information__field_value,
.project_sales_information__field_note {
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.project_sales_information__field_value--readonly,
.project_sales_information__field_note {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
}

.project_sales_information__separator {
  width: 100%;
  border: 0;
  border-top: 1px dashed var(--app-border-strong);
}

.project_sales_information__warning {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

/* 先頭に全幅の証憑行があるため、項目数だけを基準にした detail-grid の
   最終値全幅化を解除し、Sヨミ時商材タグを本来の右側の値セルへ収める。 */
.detail-grid.project-sales-order-summary-grid > .detail-grid__value:nth-child(4n+2):last-child {
  grid-column: auto;
}

.project-detail-subsection {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.project-lost-order-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.project-lost-order-alert {
  margin-bottom: 16px;
}

/* 失注申請モーダルは外側のパネルを共通の器として使い、主要情報を
   入れ子のカードにしない。見出しと内容を1階層上へそろえる。 */
.project-lost-order-section,
.project-lost-order-flat-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.project-lost-order-flat-section + .project-lost-order-flat-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

.project-accounting-section,
.project-invoice-actual-section,
.project-acceptance-inspection-section {
  gap: 14px;
}

.project-accounting-table {
  min-width: 980px;
}

.project-accounting-table-compact {
  min-width: 720px;
}

.project-accounting-table th:first-child,
.project-accounting-table td:first-child {
  width: 34%;
  min-width: 280px;
}

/* PJ詳細の制作物一覧タブはtdをすべて左揃えで表示する(金額セルの右揃えも上書き) */
.contents-project-list-table td,
.contents-project-list-table td.client-table-number {
  text-align: left;
}

/* 現場から「見づらい」の報告があったため、罫線付き・見出し中央揃えで表示する(会計書類タブの全書類に適用) */
.project-accounting-table--bordered {
  border-collapse: collapse;
}

.project-accounting-table--bordered th,
.project-accounting-table--bordered td {
  border: 1px solid var(--color-border-soft);
}

/* parts.scss の .data-table th (text-align: left) より後に読まれるため詳細度で上書きする */
.data-table.project-accounting-table--bordered th {
  text-align: center;
}

.project-accounting-table--bordered td.cell-center {
  text-align: center;
}

/* 制作物詳細TOPタブの4セクション(収支/発注サマリ/タスク/納品物)のテーブルは
   会計書類タブと同じborder付きで表示する */
.content-detail-summary-grid .data-table {
  border-collapse: collapse;
}

.content-detail-summary-grid .data-table th,
.content-detail-summary-grid .data-table td {
  border: 1px solid var(--color-border-soft);
}

/* 原価見積書の品目テーブル(原価見積書詳細・見積書作成/編集/複製で共通)と
   プロジェクト詳細の制作物一覧タブのテーブルもborder付き・見出し中央揃えにする */
.accounting-document-cost-table,
.data-table.contents-project-list-table {
  border-collapse: collapse;
}

.accounting-document-cost-table th,
.accounting-document-cost-table td,
.data-table.contents-project-list-table th,
.data-table.contents-project-list-table td {
  border: 1px solid var(--color-border-soft);
}

.accounting-document-cost-table thead th,
.data-table.contents-project-list-table thead th {
  text-align: center;
}

/* 入金予定一覧: メモ列が潰れて「未設定」が1文字ずつ折り返されないよう最低幅を確保する */
.invoices-table th.invoices-memo-column {
  min-width: 10em;
}

.project-invoice-actual-table,
.project-acceptance-inspection-table,
.project-change-order-history-table {
  min-width: 1120px;
}

/* 検収実績は縦方向には伸ばしつつ、狭い画面で右端の操作へ到達できるよう
   横スクロールだけを維持する。選択肢はviewport固定表示のため見切れない。 */
.table-scroll.project-acceptance-inspection-table-scroll {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.project-invoice-actual-table select,
.project-invoice-actual-table input[type=date],
.project-acceptance-inspection-table select,
.project-acceptance-inspection-table input[type=date],
.project-acceptance-inspection-table input[type=file] {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
}

/* 10列とも内容が短いのでパネル幅に収め、横スクロールを出さない。
   (parts.scss の .data-table(1120px)が後勝ちするため table を付けて詳細度を上げる) */
.data-table.contents-project-list-table {
  min-width: 0;
}

/* 画面が狭いときは列が潰れて読めなくなるため、共通の最低幅に戻して横スクロールさせる */
@media screen and (max-width: 1024px) {
  .data-table.contents-project-list-table {
    min-width: 1120px;
  }
}
/* 制作物名の列だけ広く取る。
   見出しと本文に共通で付与した cell-title を基準にする。
   固定幅にすると他の列を押し出すので、下限だけ決めて余りを受け取る形にする。 */
.contents-project-list-table thead tr:last-child th.cell-title,
.contents-project-list-table tbody td.cell-title {
  min-width: 180px;
  width: auto;
}

/* 10列をパネル幅へ収めるため、この表だけ左右の余白を詰める */
.data-table.contents-project-list-table th,
.data-table.contents-project-list-table td {
  padding-right: var(--space-2);
  padding-left: var(--space-2);
}

/* 見出しと合計行は折り返しを許可する(nowrapのままだと列の最小幅が下がらない) */
.data-table.contents-project-list-table th {
  white-space: normal;
}

.content-detail-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.content-detail-summary-grid-wide {
  align-items: start;
}

/* 左右で高さを揃える(stretch)と、低い方のセクション(grid)の余り高さが
   ヘッダー行にも配分されて見出しの上端がズレるため、行は上詰めにする */
.content-detail-summary-grid > .app-section {
  align-content: start;
}

/* アクションボタンの有無でヘッダー高さが変わっても見出しの縦位置が揃うようにする */
.content-detail-summary-grid .app-section-header {
  min-height: 40px;
}

.content-detail-task-table,
.content-detail-file-table,
.content-detail-purchase-order-table {
  min-width: 1024px;
}

.content-detail-purchase-order-preview-table {
  min-width: 860px;
}

/* 事故情報: design の panel をカードとして敷き詰める */
.accident-informations-page {
  max-width: 1440px;
  margin: 0 auto;
}

.accident-informations-card-grid {
  display: grid;
  gap: 12px;
  padding: 0 20px 20px;
}

.accident-information-card {
  display: grid;
  gap: 12px;
  padding: 20px 24px;
}

.accident-information-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.accident-information-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.accounting-document-form {
  display: grid;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  color: var(--app-text);
}

.accounting-document-form-title {
  max-width: 1440px;
  margin: 0 auto 18px;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.accounting-document-form .fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.accounting-document-form .field {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
  margin: 0;
}

.accounting-document-form .field.full {
  grid-column: 1/-1;
}

.accounting-document-form .field > label,
.accounting-document-form .field > .label,
.accounting-document-form label {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.accounting-document-form .field.required > label::after {
  content: " *";
  color: #dc2626;
}

.accounting-document-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.accounting-document-form select,
.accounting-document-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.accounting-document-form textarea {
  resize: vertical;
}

.accounting-document-form input:focus,
.accounting-document-form select:focus,
.accounting-document-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.accounting-document-form input:disabled,
.accounting-document-form input[readonly],
.accounting-document-form textarea:disabled,
.accounting-document-form textarea[readonly] {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
}

/* 直販名/プロジェクト名の表示エリア。summary-item自体が枠を持つため外枠・余白は付けない */
.accounting-document-form-summary {
  display: grid;
  gap: 12px;
}

.accounting-document-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.accounting-document-form-note {
  margin: 0 0 10px;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.accounting-document-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.accounting-document-checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
}

.accounting-document-checkbox label {
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
}

.accounting-document-inline-action {
  justify-self: start;
}

.accounting-document-detail-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.accounting-document-detail-header {
  align-items: flex-start;
  min-width: 0;
}

.accounting-document-action-bar form,
.accounting-document-action-bar .button_to {
  margin: 0;
}

.accounting-document-tab-panel {
  display: none;
  gap: 16px;
  min-width: 0;
}

.accounting-document-tab-panel.active {
  display: grid;
}

/* 会計書類詳細のタブは直下のコンテンツと一体の器にする(projects詳細と同じ見せ方)。
   ページのgrid gapがタブとコンテンツを離すため0にし、タブ以外の直下要素はmarginで間隔を確保する */
.accounting-document-detail-page {
  gap: 0;
}

.accounting-document-detail-page > .panel:not(:last-child),
.accounting-document-detail-page > .app-alert {
  margin-bottom: 16px;
}

.accounting-document-detail-page > .tabs.accounting-document-tabs {
  border: 1px solid var(--color-border-soft);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.accounting-document-tab-panel.active > .panel:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* 見積書の粗利サマリー: 項目行と数値行を交互に並べる横並びテーブル。
   一覧テーブルではないので最低幅とヘッダー固定は無効化し、中央揃えで見せる。
   parts.scss の .data-table 系より後に読まれないため、table 付きで詳細度を上げて上書きする */
table.estimate-gross-profit-table {
  min-width: 0;
}

table.estimate-gross-profit-table th,
table.estimate-gross-profit-table td {
  text-align: center;
}

/* 項目セルは detail-grid の項目列と同じ薄いグレー */
table.estimate-gross-profit-table th {
  position: static;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  background: var(--color-surface-soft);
}

/* tbody 内の項目行のため thead 用の上罫線が付かない。先頭行に外周の上罫線を引く */
table.estimate-gross-profit-table tbody tr:first-child th {
  border-top: 1px solid var(--color-border-soft);
}

table.estimate-gross-profit-table tbody tr:hover {
  background: inherit;
}

.accounting-document-summary,
.accounting-document-section,
.accounting-document-related-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #ffffff;
}

.accounting-document-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.accounting-document-section-title {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.accounting-document-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.accounting-document-summary-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

.accounting-document-summary-item-wide {
  grid-column: span 2;
}

.accounting-document-summary-label {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.accounting-document-summary-item p {
  min-width: 0;
  margin: 0;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.accounting-document-workflow {
  display: grid;
  gap: 10px;
}

.accounting-document-history {
  display: grid;
  gap: 10px;
}

.accounting-document-history-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.accounting-document-history-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.accounting-document-history-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}

.accounting-document-history-meta div {
  display: grid;
  gap: 3px;
}

.accounting-document-history-meta dt {
  color: var(--app-text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.accounting-document-history-meta dd {
  margin: 0;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.accounting-document-history-comment dd {
  font-weight: 600;
}

.accounting-document-status-badge.is-submit,
.accounting-document-status-badge.is-bm_approve {
  border-color: #d6d3d1;
  background: #fafaf9;
  color: #44403c;
}

.accounting-document-status-badge.is-remand,
.accounting-document-status-badge.is-rejected {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.accounting-document-status-badge.is-created,
.accounting-document-status-badge.is-draft,
.accounting-document-status-badge.is-created_by_user,
.accounting-document-status-badge.is-remand_to_user {
  border-color: var(--app-border);
  background: #ffffff;
  color: var(--app-text-muted);
}

.accounting-document-status-badge.is-partner_checking,
.accounting-document-status-badge.is-sent_cancel_request {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.accounting-document-status-badge.is-partner_check_ng {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.accounting-document-metrics-table {
  min-width: 720px;
}

.accounting-document-metrics-table th,
.accounting-document-metrics-table td {
  text-align: center;
  white-space: nowrap;
}

.accounting-document-note {
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-muted);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

.accounting-document-cost-table {
  min-width: 900px;
}

.accounting-document-wide-table {
  min-width: 1280px;
}

.accounting-document-nested-table {
  min-width: 760px;
}

.accounting-document-profit-table {
  min-width: 720px;
}

.accounting-document-cost-table th,
.accounting-document-cost-table td,
.accounting-document-wide-table th,
.accounting-document-wide-table td,
.accounting-document-nested-table th,
.accounting-document-nested-table td,
.accounting-document-profit-table th,
.accounting-document-profit-table td {
  white-space: nowrap;
}

.accounting-document-cost-table th:first-child,
.accounting-document-cost-table td:first-child,
.accounting-document-cost-table th:nth-child(2),
.accounting-document-cost-table td:nth-child(2) {
  white-space: normal;
}

.accounting-document-wide-table td:last-child {
  white-space: normal;
}

.accounting-document-date {
  white-space: nowrap;
}

.accounting-document-number {
  text-align: right !important;
  white-space: nowrap;
}

.accounting-document-sub-row {
  padding-left: 28px !important;
  color: var(--app-text-muted) !important;
  font-weight: 700 !important;
}

.accounting-document-table-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.accounting-document-toggle-marker {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.accounting-document-total-row th,
.accounting-document-total-row td {
  background: var(--app-surface-muted);
  font-weight: 800;
}

.accounting-document-disabled-action {
  gap: 6px;
  cursor: not-allowed;
  opacity: 0.55;
}

.accounting-document-disabled-action-wrap {
  position: relative;
  display: inline-flex;
}

.accounting-document-disabled-action__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 900;
  line-height: 1;
}

.accounting-document-disabled-action__tooltip {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 80;
  width: min(320px, 100vw - 32px);
  padding: 10px 12px;
  border: 1px solid #cbd8eb;
  border-radius: var(--radius-sm);
  background: var(--color-navy-900);
  box-shadow: 0 12px 30px rgba(15, 42, 78, 0.22);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.6;
  opacity: 0;
  overflow-wrap: anywhere;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  visibility: hidden;
  white-space: normal;
}

.accounting-document-disabled-action__tooltip::before {
  position: absolute;
  top: -5px;
  right: 24px;
  width: 9px;
  height: 9px;
  background: var(--color-navy-900);
  content: "";
  transform: rotate(45deg);
}

.accounting-document-disabled-action-wrap:hover .accounting-document-disabled-action__tooltip,
.accounting-document-disabled-action-wrap:focus-within .accounting-document-disabled-action__tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.accounting-document-disabled-action:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
  opacity: 0.72;
}

.accounting-document-warning-text {
  color: #b45309;
  font-weight: 700;
}

.accounting-document-copy-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.accounting-document-embedded-file iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #ffffff;
}

.accounting-document-embedded-file img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.accounting-document-paper {
  box-sizing: border-box;
  max-width: 920px;
  margin: 0 auto 24px;
  border-color: var(--app-border) !important;
  border-style: solid !important;
  border-radius: 10px;
  background: #ffffff;
  color: var(--app-text);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.accounting-document-paper-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.accounting-document-line-items-wrap {
  overflow-x: auto;
}

.accounting-document-line-items {
  min-width: 760px;
}

.accounting-document-line-items th {
  background: var(--app-surface-muted) !important;
  color: var(--app-text-muted);
  font-weight: 800 !important;
}

.accounting-document-line-items th,
.accounting-document-line-items td {
  border-color: var(--app-border) !important;
}

.partner-invoice-line-items--with-related-id {
  min-width: 900px;
  table-layout: fixed;
}

.partner-invoice-line-items--with-related-id th {
  line-height: 1.45;
  white-space: normal;
}

.partner-invoice-related-id__items {
  display: grid;
  gap: var(--space-2);
  white-space: nowrap;
}

.partner-invoice-related-id__item {
  display: grid;
  gap: 2px;
}

.partner-invoice-related-id__item small {
  color: var(--app-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.partner-invoice-related-id__item strong {
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.partner-invoice-related-id__item--link strong {
  color: var(--app-accent);
}

.partner-invoice-related-id__item--link:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.partner-invoice-line-items__col--item,
.partner-invoice-line-items__col--memo {
  width: 17%;
}

.partner-invoice-line-items__col--related-id {
  width: 16%;
}

.partner-invoice-line-items__col--quantity {
  width: 8%;
}

.partner-invoice-line-items__col--unit-price {
  width: 11%;
}

.partner-invoice-line-items__col--tax {
  width: 7%;
}

.partner-invoice-line-items__col--amount {
  width: 13%;
}

.accounting-document-paper .total_area {
  color: var(--app-text);
}

@media screen and (max-width: 1180px) {
  .users-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .users-search-field-wide,
  .users-search-actions {
    grid-column: span 2;
  }
  .users-search-actions {
    justify-content: flex-start;
  }
  .partners-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-search-grid,
  .contact-form-grid,
  .client-search-grid,
  .client-form-grid,
  .person-in-charges-search-grid,
  .sales-tasks-search-grid,
  .meetings-search-grid,
  .projects-search-grid,
  .contents-search-grid,
  .accounting-documents-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .projects-search-field-wide,
  .projects-search-actions,
  .contents-search-field-wide,
  .contents-search-actions,
  .accounting-documents-search-field-wide,
  .accounting-documents-search-actions {
    grid-column: span 2;
  }
  .client-task-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .client-home-grid {
    grid-template-columns: 1fr;
  }
  .person-in-charges-home-grid {
    grid-template-columns: 1fr;
  }
  .client-person-table,
  .client-task-table,
  .client-project-table {
    min-width: 1180px;
  }
  .accounting-document-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .accounting-document-form .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 1020px) {
  .appointment-strategy-form {
    grid-template-columns: minmax(180px, 280px) minmax(180px, 260px);
  }
}
@media screen and (max-width: 700px) {
  .users-page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .users-page-actions {
    justify-content: flex-start;
  }
  .users-search-grid {
    grid-template-columns: 1fr;
  }
  .users-search-field-wide,
  .users-search-actions {
    grid-column: auto;
  }
  .users-search-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .users-date-range {
    grid-template-columns: 1fr;
  }
  .app-modal,
  .app-modal {
    padding: 12px;
  }
  .users-invite-grid {
    grid-template-columns: 1fr;
  }
  .app-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .tag-admin-header {
    align-items: stretch;
    flex-direction: column;
  }
  .tag-admin-form,
  .tag-admin-inline-form,
  .appointment-strategy-form {
    grid-template-columns: 1fr;
  }
  .contact-page-header,
  .contact-results-toolbar,
  .client-page-header,
  .client-results-toolbar,
  .client-section-header,
  .person-in-charges-page-header,
  .sales-tasks-page-header,
  .meetings-page-header,
  .projects-page-header,
  .contents-page-header,
  .accounting-documents-page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .contact-page-actions,
  .contact-search-actions,
  .contact-form-actions,
  .client-page-actions,
  .client-search-actions,
  .client-form-actions,
  .client-section-actions,
  .client-tab-toolbar,
  .client-inline-actions,
  .person-in-charges-page-actions,
  .person-in-charges-export-actions,
  .person-in-charges-search-actions,
  .person-in-charges-tab-toolbar,
  .sales-tasks-page-actions,
  .sales-tasks-export-actions,
  .sales-tasks-search-actions,
  .meetings-page-actions,
  .meetings-export-actions,
  .meetings-search-actions,
  .projects-page-actions,
  .projects-export-actions,
  .projects-search-actions,
  .contents-page-actions,
  .contents-export-actions,
  .contents-search-actions,
  .accounting-documents-page-actions,
  .accounting-documents-export-actions,
  .accounting-documents-search-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .contact-search-grid,
  .contact-form-grid,
  .contact-date-range,
  .client-search-grid,
  .client-form-grid,
  .person-in-charges-search-grid,
  .person-in-charges-date-range,
  .sales-tasks-search-grid,
  .sales-tasks-date-range,
  .meetings-search-grid,
  .projects-search-grid,
  .contents-search-grid,
  .accounting-documents-search-grid,
  .app-date-range {
    grid-template-columns: 1fr;
  }
  .contact-search-field-wide,
  .client-search-field-wide,
  .client-form-field-wide,
  .client-form-field-full,
  .person-in-charges-search-field-wide,
  .meetings-search-field-wide,
  .projects-search-field-wide,
  .projects-search-actions,
  .contents-search-field-wide,
  .contents-search-actions,
  .accounting-documents-search-field-wide,
  .accounting-documents-search-actions {
    grid-column: auto;
  }
  .client-task-cards {
    grid-template-columns: 1fr;
  }
  .partners-export-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .accounting-document-section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .project-detail-tab,
  .content-detail-tab {
    flex: 1 1 calc(50% - 4px);
  }
  .project_sales_information__choice_row,
  .project_sales_information__memo_row,
  .project_sales_information__field_grid,
  .project-lost-order-grid,
  .content-detail-summary-grid,
  .accident-information-meta-grid {
    grid-template-columns: 1fr;
  }
  .project_sales_information__choice_label,
  .project_sales_information__memo_label,
  .project_sales_information__choice,
  .project_sales_information__current_reading,
  .project_sales_information__memo_value {
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }
  .project_sales_information__choice:last-child,
  .project_sales_information__memo_value:last-child {
    border-bottom: 0;
  }
  .accounting-document-summary-grid {
    grid-template-columns: 1fr;
  }
  .accounting-document-form .fields {
    grid-template-columns: 1fr;
  }
  .accounting-document-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .accounting-document-form-actions .app-button {
    width: 100%;
  }
  .accounting-document-summary-item-wide {
    grid-column: auto;
  }
  .accounting-document-action-bar form,
  .accounting-document-action-bar .button_to,
  .accounting-document-action-bar .app-button {
    width: 100%;
  }
  .accounting-document-paper-scroll {
    margin-inline: 0;
  }
  .accounting-document-paper {
    width: 760px;
    max-width: none;
    padding: 14px !important;
  }
  .accounting-document-paper .accounting-document-line-items-wrap {
    overflow-x: visible;
  }
}
[data-accounting-line-drag-handle] {
  cursor: grab;
}

[data-accounting-line-row].is-dragging {
  opacity: 0.55;
}

.delete_row_btn[data-accounting-lines-remove] {
  border: 0;
  background: transparent;
  color: inherit;
}

@media print {
  body.user,
  body.partner {
    height: auto !important;
    overflow: visible !important;
  }
  body.user #dimmer,
  body.partner #dimmer {
    display: none !important;
  }
  body.user .main_container,
  body.partner .main_container,
  body.user.active .main_container,
  body.partner.active .main_container,
  body.user.nav-closed .main_container,
  body.partner.nav-closed .main_container {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: none !important;
  }
  body.user .main_content,
  body.partner .main_content {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .accounting-document-detail-page {
    display: block;
    max-width: none;
  }
  .accounting-document-paper {
    max-width: none;
    margin: 0;
    width: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
  }
  .accounting-document-paper-scroll {
    overflow: visible;
    padding-bottom: 0;
  }
  .accounting-document-line-items-wrap {
    overflow: visible;
  }
}
/* Project list: reuse the data-table sticky action-column layering for identity columns.
   Keep the title narrower on small screens so editable columns remain reachable. */
.projects-page .projects-table--with-id {
  --projects-id-width: 88px;
  --projects-title-width: clamp(140px, 32vw, 340px);
}

.projects-page .projects-table--with-id :is(th[data-column=project_id], td[data-column-key=project_id]) {
  position: sticky;
  left: 0;
  z-index: 4;
  width: var(--projects-id-width);
  min-width: var(--projects-id-width);
  max-width: var(--projects-id-width);
  background: var(--color-surface);
}

.projects-page .projects-table--with-id .cell-title {
  position: sticky;
  left: var(--projects-id-width);
  z-index: 4;
  width: var(--projects-title-width);
  min-width: var(--projects-title-width);
  max-width: var(--projects-title-width);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.projects-page .projects-table--with-id thead :is(th[data-column=project_id], .cell-title) {
  z-index: 7;
}

.projects-column-toggle:has([data-column-toggle=project_id]:not(:checked)) ~ #projects-results .projects-table--with-id .cell-title {
  left: 0;
}

/* =========================================================
   MOVILAB CLOUD 共通UIパーツ
   出典: /design_parts (app/assets/stylesheets/design_parts.css)
   承認済みデザインギャラリーの定義を production 共有CSSとして移植したもの。
   値を変更する場合は design_parts 側と同じ変更を入れること。
   Rails 都合の適合(ransack / kaminari / 検索グリッド)は末尾の
   「Rails adaptations」セクションに隔離している。
========================================================= */
/* ------------------------------
   Design Token
------------------------------ */
:root {
  /* Brand */
  --color-navy: #163b6d;
  --color-navy-900: #0b2343;
  --color-navy-800: #102f5a;
  --color-primary: #2f6bff;
  --color-primary-700: #1f56d9;
  --color-primary-50: #edf4ff;
  --color-sky: #dcebff;
  /* Semantic */
  --color-success: #16a34a;
  --color-success-bg: #eaf8ef;
  --color-warning: #f59e0b;
  --color-warning-bg: #fff6df;
  --color-danger: #ef4444;
  --color-danger-bg: #fff1f2;
  --color-info: #2563eb;
  --color-info-bg: #edf4ff;
  --color-purple: #6d5df6;
  --color-purple-bg: #f1efff;
  /* Neutral */
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fafc;
  --color-border: #dfe7f2;
  --color-border-soft: #edf2f7;
  --color-text: #152238;
  --color-text-muted: #5c667a;
  --color-text-subtle: #7b8496;
  --color-white: #ffffff;
  /* Typography */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-number: "Inter", "SF Pro Text", system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height-tight: 1.3;
  --line-height-normal: 1.65;
  /* Spacing: 8px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;
  /* Shadow */
  --shadow-sm: 0 4px 12px rgba(22, 59, 109, 0.08);
  --shadow-md: 0 16px 40px rgba(22, 59, 109, 0.14);
  --shadow-modal: 0 28px 80px rgba(15, 23, 42, 0.24);
  /* Layout */
  --table-row-height: 64px;
  /* Motion */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  /* Focus */
  --focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.24);
}

.sr-only,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Deep dive AI panel: /design_parts の承認済みパーツを製品画面へ移植。 */
.deep-dive-ai-root,
.deep-dive-ai-root * {
  box-sizing: border-box;
}

.deep-dive-ai-launcher {
  position: fixed;
  z-index: 1090;
  right: var(--space-6);
  bottom: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4) 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  font-weight: 800;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.deep-dive-ai-launcher:hover {
  background: var(--color-navy-800);
  transform: translateY(-2px);
}

.deep-dive-ai-launcher__mark,
.deep-dive-ai-panel__mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-purple));
  color: var(--color-white);
  font-size: var(--font-size-lg);
}

.deep-dive-ai-panel {
  position: fixed;
  z-index: 1100;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 60px);
  display: flex;
  width: 430px;
  max-width: calc(100vw - var(--space-8));
  height: min(720px, 100vh - 120px);
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

.deep-dive-ai-panel[hidden],
.deep-dive-ai-panel__view[hidden] {
  display: none;
}

.deep-dive-ai-panel__header {
  /* Keep the panel header independent of frame.scss's global fixed header. */
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  transition: none;
}

.deep-dive-ai-panel__header::after {
  content: none;
}

.deep-dive-ai-panel__header > .icon-button {
  flex-shrink: 0;
}

.deep-dive-ai-panel__identity {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

.deep-dive-ai-panel__identity > div {
  display: grid;
  min-width: 0;
  line-height: var(--line-height-tight);
}

.deep-dive-ai-panel__identity strong {
  color: var(--color-navy);
  font-size: var(--font-size-md);
}

.deep-dive-ai-panel__identity > div > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
  white-space: normal;
}

.deep-dive-ai-panel__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.deep-dive-ai-panel__tabs button {
  position: relative;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 800;
}

.deep-dive-ai-panel__tabs button[aria-selected=true] {
  color: var(--color-primary-700);
}

.deep-dive-ai-panel__tabs button[aria-selected=true]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  content: "";
}

.deep-dive-ai-panel__view {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
}

.deep-dive-ai-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.deep-dive-ai-panel__scroll {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-height: 0;
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.deep-dive-ai-context {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-context__label {
  color: var(--color-text-subtle);
  font-weight: 800;
}

.deep-dive-ai-context strong {
  color: var(--color-navy);
}

.deep-dive-ai-context span:last-child {
  color: var(--color-text-muted);
}

.deep-dive-ai-user-message {
  max-width: 86%;
  justify-self: end;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--color-primary-50);
  color: var(--color-navy);
  line-height: var(--line-height-normal);
}

.deep-dive-ai-answer-block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.deep-dive-ai-answer-block--conclusion {
  padding: var(--space-4);
  border: 1px solid var(--color-sky);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
}

.deep-dive-ai-answer-block h3,
.deep-dive-ai-suggestions h3 {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
}

.deep-dive-ai-answer-block p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Approved answer components copied from design_parts.css. */
.deep-dive-ai-hypotheses {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deep-dive-ai-hypotheses li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  color: var(--color-text-muted);
}

.deep-dive-ai-hypotheses li > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-text-subtle);
  font-weight: 900;
}

.deep-dive-ai-hypotheses li.is-adopted > span {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.deep-dive-ai-hypotheses li > div {
  display: grid;
}

.deep-dive-ai-hypotheses strong {
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-hypotheses small {
  color: var(--color-text-muted);
}

.deep-dive-ai-links {
  display: grid;
  gap: var(--space-2);
}

.deep-dive-ai-links a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.deep-dive-ai-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deep-dive-ai-evidence {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.deep-dive-ai-evidence summary {
  padding: var(--space-3);
  color: var(--color-navy);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.deep-dive-ai-evidence dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-evidence dl > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--space-2);
}

.deep-dive-ai-evidence dt {
  color: var(--color-text-subtle);
}

.deep-dive-ai-evidence dd {
  margin: 0;
  color: var(--color-text);
}

/* Question suggestions use the approved design_parts component unchanged. */
.deep-dive-ai-suggestions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.deep-dive-ai-suggestions button {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-align: left;
}

.deep-dive-ai-suggestions button:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.deep-dive-ai-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  min-height: 240px;
  align-content: center;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  text-align: center;
}

.deep-dive-ai-state p {
  max-width: 32ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-state__icon,
.deep-dive-ai-spinner {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: var(--font-size-lg);
  font-weight: 900;
}

.deep-dive-ai-state--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.deep-dive-ai-state--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.deep-dive-ai-spinner {
  border: 3px solid var(--color-sky);
  border-top-color: var(--color-primary);
  background: transparent;
  animation: deep-dive-spin 900ms linear infinite;
}

@keyframes deep-dive-spin {
  to {
    transform: rotate(360deg);
  }
}
.deep-dive-ai-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.deep-dive-ai-intake-notice {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-intake-notice span {
  color: var(--color-text-muted);
}

.deep-dive-ai-composer textarea:disabled,
.deep-dive-ai-composer > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.deep-dive-ai-composer textarea {
  width: 100%;
  min-height: 40px;
  max-height: 112px;
  resize: vertical;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.deep-dive-ai-composer textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: var(--focus-ring);
}

.deep-dive-ai-composer > button {
  display: grid;
  place-items: center;
  align-self: start;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: 900;
}

.deep-dive-ai-composer small {
  grid-column: 1/-1;
  color: var(--color-text-subtle);
  font-size: 10px;
}

.deep-dive-ai-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
}

.deep-dive-ai-history-heading div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.deep-dive-ai-history-heading div span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-history-list {
  display: grid;
  align-content: start;
  min-height: 0;
  flex: 1;
  padding: var(--space-2) var(--space-4);
  overflow-y: auto;
}

.deep-dive-ai-history-list > button {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 88px var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  background: transparent;
  color: var(--color-text);
  text-align: left;
}

.deep-dive-ai-history-list > button:hover {
  background: var(--color-surface-soft);
}

.deep-dive-ai-history-list > button > span:not(.status) {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.deep-dive-ai-history-list .status {
  position: absolute;
  top: var(--space-4);
  right: 0;
}

.deep-dive-ai-history-more {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

.deep-dive-ai-history-note {
  margin: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* On short desktop viewports, use the space otherwise reserved for the launcher. */
@media (min-width: 641px) and (max-height: 600px) {
  .deep-dive-ai-panel {
    bottom: var(--space-3);
    height: calc(100dvh - var(--space-6));
  }
}
@media (max-width: 640px) {
  .deep-dive-ai-launcher {
    right: var(--space-3);
    bottom: var(--space-3);
    width: 48px;
    padding: 0;
    justify-content: center;
  }
  .deep-dive-ai-launcher__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .deep-dive-ai-panel {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  .deep-dive-ai-panel__header,
  .deep-dive-ai-panel__scroll,
  .deep-dive-ai-composer {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .deep-dive-ai-spinner {
    animation: none;
  }
}
/* Sales dashboard */
.sales-dashboard-page .dashboard-report-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: var(--space-5);
}

.sales-dashboard-tabs {
  width: 100%;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sales-dashboard-tabs .tab {
  border-radius: 0;
  white-space: nowrap;
}

.sales-dashboard-content-inset {
  margin-inline: var(--space-6);
}

.sales-dashboard-page .dashboard-report-panel > .sales-dashboard-qualification-migration-note,
.sales-dashboard-page .dashboard-report-panel > .sales-dashboard-target-missing-notice,
.sales-dashboard-page .dashboard-report-panel > .sales-dashboard-verdict {
  margin-inline: var(--space-6);
}

.sales-dashboard-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.sales-dashboard-controls .field {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.sales-dashboard-controls label,
.sales-dashboard-controls legend {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.sales-dashboard-controls select,
.sales-dashboard-controls input[type=month] {
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sales-dashboard-controls .dashboard-segment {
  margin-left: 0;
}

.sales-dashboard-target-import {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.sales-dashboard-target-import__instructions {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.65;
}

.sales-dashboard-target-import__actions,
.sales-dashboard-target-import__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sales-dashboard-target-import__meta,
.dashboard-sales-updated {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.sales-dashboard-target-import__status,
.sales-dashboard-target-missing-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sales-dashboard-target-import__months {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-target-import__months span {
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--color-surface-soft);
}

.sales-dashboard-company-notes {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-company-notes p,
.sales-dashboard-company-total-note {
  margin: 0;
}

.sales-dashboard-company-table {
  min-width: 900px;
}

.sales-dashboard-company-table th:first-child {
  min-width: 240px;
}

.sales-dashboard-company-table th:not(:first-child),
.sales-dashboard-company-table td:not(:first-child) {
  min-width: 132px;
}

.sales-dashboard-company-table thead th,
.sales-dashboard-company-table tfoot th,
.sales-dashboard-company-table tfoot td {
  background: var(--color-surface-soft);
}

.sales-dashboard-company-table thead small {
  display: block;
  margin-top: 2px;
  color: var(--color-warning);
  font-size: 10px;
}

.sales-dashboard-company-table tfoot > tr > * {
  border-top: 2px solid var(--color-navy);
  color: var(--color-navy);
  font-weight: 800;
}

.sales-dashboard-company-table a:not(.sales-dashboard-company-sort-link) {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sales-dashboard-company-sort-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  color: inherit;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sales-dashboard-company-table th:first-child .sales-dashboard-company-sort-link {
  justify-content: flex-start;
}

.sales-dashboard-verdict {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
}

.sales-dashboard-verdict.is-good {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.sales-dashboard-verdict.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.sales-dashboard-verdict.is-danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.sales-dashboard-verdict__heading,
.sales-dashboard-verdict__comparisons,
.sales-dashboard-inline-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sales-dashboard-verdict__heading strong {
  color: var(--color-navy);
  font-size: var(--font-size-lg);
}

.sales-dashboard-verdict__heading span,
.sales-dashboard-verdict__comparisons {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-verdict__metrics,
.sales-dashboard-card-grid,
.sales-dashboard-breakdowns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.sales-dashboard-verdict__metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sales-dashboard-verdict__metrics--pipeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sales-dashboard-card-grid--activity {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sales-dashboard-stat,
.sales-dashboard-kpi-card,
.sales-dashboard-breakdown {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sales-dashboard-stat span,
.sales-dashboard-kpi-card span,
.sales-dashboard-breakdown span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-stat b {
  color: var(--color-navy);
  font-family: var(--font-number);
  font-size: var(--font-size-xl);
}

.sales-dashboard-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.sales-dashboard-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.sales-dashboard-verdict.is-danger .sales-dashboard-progress i {
  background: var(--color-danger);
}

.sales-dashboard-verdict.is-warning .sales-dashboard-progress i {
  background: var(--color-warning);
}

.sales-dashboard-verdict.is-good .sales-dashboard-progress i {
  background: var(--color-success);
}

.sales-dashboard-method-note {
  display: grid;
  gap: var(--space-1);
}

.sales-dashboard-method-note small {
  color: var(--color-text-subtle);
}

.sales-dashboard-landing-charts {
  display: grid;
  gap: var(--space-6);
}

.sales-dashboard-landing-chart {
  display: grid;
  gap: var(--space-1);
}

.sales-dashboard-landing-chart__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.sales-dashboard-landing-chart__header > strong {
  color: var(--color-navy);
  flex: 0 0 auto;
}

.sales-dashboard-landing-chart__canvas {
  min-height: 88px;
  height: 88px;
}

.sales-dashboard-landing-chart__values {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-verdict-badge {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-weight: 900;
}

.sales-dashboard-verdict-badge.is-ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.sales-dashboard-verdict-badge.is-warn {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.sales-dashboard-verdict-badge.is-ng {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.sales-dashboard-kpi-card,
.sales-dashboard-breakdown {
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.sales-dashboard-kpi-card b,
.sales-dashboard-breakdown b {
  color: var(--color-navy);
  font-family: var(--font-number);
  font-size: var(--font-size-lg);
}

.sales-dashboard-kpi-card small {
  color: var(--color-text-subtle);
  font-size: 11px;
}

.sales-dashboard-two-columns {
  display: grid;
  grid-template-columns: minmax(0, 398px) minmax(0, 1fr);
  gap: var(--space-5);
}

.sales-dashboard-chart {
  min-height: 280px;
}

.sales-dashboard-empty {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
  text-align: center;
}

.sales-dashboard-empty strong {
  font-size: 32px;
}

.sales-dashboard-matrix td {
  vertical-align: middle;
}

.sales-dashboard-matrix td b,
.sales-dashboard-matrix td small {
  display: block;
}

.data-table.sales-dashboard-matrix {
  width: 100%;
  min-width: 560px;
  table-layout: fixed;
}

.sales-dashboard-matrix__actual > * {
  border-top: 2px solid var(--color-navy);
}

.sales-dashboard-summary-table thead tr:first-child th:not(:first-child) {
  text-align: center;
}

.sales-dashboard-summary-table .sales-dashboard-comparison-group,
.sales-dashboard-summary-table .sales-dashboard-comparison-column {
  border-left: 1px solid var(--color-border);
}

.sales-dashboard-summary-table td.sales-dashboard-comparison-column {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.sales-dashboard-matrix td small {
  color: var(--color-text-subtle);
}

.sales-dashboard-matrix td.is-zero b,
.sales-dashboard-matrix td.is-zero small {
  color: var(--color-text-subtle);
}

.sales-dashboard-project-list {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.sales-dashboard-project-list summary {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4);
  color: var(--color-navy);
  font-weight: 800;
  cursor: pointer;
}

.sales-dashboard-project-list__body {
  display: grid;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border-soft);
}

.sales-dashboard-review-projects {
  display: grid;
  gap: var(--space-3);
}

.sales-dashboard-project-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-navy);
  text-decoration: none;
}

.sales-dashboard-project-row:hover {
  background: var(--color-primary-50);
  text-decoration: none;
}

.sales-dashboard-project-row small {
  color: var(--color-text-subtle);
}

.sales-dashboard-project-row > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sales-dashboard-project-badge {
  display: inline-flex;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: 10px;
  font-weight: 800;
}

.sales-dashboard-funnel {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.sales-dashboard-funnel__step {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
  text-align: center;
}

.sales-dashboard-funnel__step span,
.sales-dashboard-funnel__arrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-funnel__step b {
  color: var(--color-navy);
  font-size: var(--font-size-lg);
}

.sales-dashboard-funnel-note {
  margin-top: var(--space-3);
}

.sales-dashboard-product-kdi-scroll {
  max-height: calc(48px + var(--table-row-height) * 5);
  overflow: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.sales-dashboard-product-kdi-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
}

.data-table.sales-dashboard-product-kdi-table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
}

.sales-dashboard-page .sales-dashboard-activity-table {
  width: 396px;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.sales-dashboard-activity-table-wrap {
  width: 398px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.sales-dashboard-activity-table__person {
  width: 120px;
}

.sales-dashboard-activity-table__meeting,
.sales-dashboard-activity-table__acquired {
  width: 72px;
}

.sales-dashboard-activity-table__qualified {
  width: 132px;
}

.sales-dashboard-activity-table th,
.sales-dashboard-activity-table td {
  padding-right: var(--space-2);
  padding-left: var(--space-2);
}

.sales-dashboard-activity-table th {
  line-height: 1.3;
  white-space: normal;
}

.sales-dashboard-activity-table__unit {
  display: block;
  color: inherit;
  font-size: inherit;
}

.sales-dashboard-activity-table tbody th {
  overflow-wrap: break-word;
  white-space: normal;
}

.sales-dashboard-activity-table .sales-dashboard-qualified-breakdown small {
  display: inline;
  margin-top: 0;
  white-space: nowrap;
}

.sales-dashboard-activity-table .sales-dashboard-qualified-breakdown {
  white-space: nowrap;
}

.sales-dashboard-win-rate-target-note {
  margin-top: var(--space-2);
}

.sales-dashboard-product-kdi-table__business th {
  background: var(--color-surface-soft);
  color: var(--color-navy);
  font-weight: 800;
}

.sales-dashboard-product-kdi-table tbody tr:not(.sales-dashboard-product-kdi-table__business) > th {
  padding-left: var(--space-6);
}

.sales-dashboard-qualified-breakdown small,
.sales-dashboard-qualified-ratio {
  display: block;
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.sales-dashboard-term-help {
  margin-left: 2px;
  vertical-align: middle;
}

.sales-dashboard-quadrant {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(to right, transparent 34.7%, var(--color-border) 34.7%, var(--color-border) 35.3%, transparent 35.3%), linear-gradient(to bottom, transparent 64.7%, var(--color-border) 64.7%, var(--color-border) 65.3%, transparent 65.3%), var(--color-surface-soft);
}

.sales-dashboard-quadrant__axis {
  position: absolute;
  color: var(--color-text-subtle);
  font-size: 10px;
}

.sales-dashboard-quadrant__axis--horizontal {
  right: var(--space-3);
  bottom: var(--space-2);
}

.sales-dashboard-quadrant__axis--vertical {
  top: var(--space-3);
  left: var(--space-2);
  writing-mode: vertical-rl;
}

.sales-dashboard-quadrant__point {
  position: absolute;
  display: inline-flex;
  min-width: 34px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border: 2px solid var(--color-white);
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 800;
  transform: translate(-50%, calc(50% + var(--sales-point-offset, 0px)));
  white-space: nowrap;
}

.sales-dashboard-wide-table,
.sales-dashboard-monthly-table {
  min-width: 1060px;
}

.sales-dashboard-sticky-column {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  background: var(--color-surface);
}

.sales-dashboard-monthly-table td b,
.sales-dashboard-cell-comparison {
  display: block;
}

.sales-dashboard-cell-comparison {
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 500;
}

.sales-dashboard-monthly-table tbody tr > th {
  border-left: 4px solid transparent;
  text-align: left;
}

.sales-dashboard-monthly-table tbody tr.sales-dashboard-monthly-row--kgi > th {
  border-left: 4px solid var(--color-success);
}

.sales-dashboard-monthly-table tbody tr.sales-dashboard-monthly-row--kpi > th {
  border-left: 4px solid var(--color-primary);
}

.sales-dashboard-monthly-table tbody tr.sales-dashboard-monthly-row--kdi > th {
  border-left: 4px solid var(--color-warning);
}

.sales-dashboard-monthly-table tbody tr.sales-dashboard-monthly-row--watch > th {
  border-left: 4px solid var(--color-text-subtle);
}

.sales-dashboard-submetric {
  display: inline-block;
  padding-left: var(--space-4);
}

.sales-dashboard-monthly-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sales-dashboard-monthly-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.sales-dashboard-monthly-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-text-subtle);
}

.sales-dashboard-monthly-legend .is-kgi i {
  background: var(--color-success);
}

.sales-dashboard-monthly-legend .is-kpi i {
  background: var(--color-primary);
}

.sales-dashboard-monthly-legend .is-kdi i {
  background: var(--color-warning);
}

.sales-dashboard-monthly-legend .is-provisional i,
.sales-dashboard-monthly-cell--provisional {
  background-color: var(--color-surface-soft);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(148, 163, 184, 0.12) 5px, rgba(148, 163, 184, 0.12) 10px);
}

.sales-dashboard-rate-denominator {
  margin-left: 2px;
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .sales-dashboard-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-dashboard-verdict__metrics,
  .sales-dashboard-card-grid,
  .sales-dashboard-breakdowns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-dashboard-landing-chart__header {
    display: grid;
    gap: var(--space-2);
  }
  .sales-dashboard-landing-chart__values {
    justify-content: flex-start;
  }
  .sales-dashboard-activity-table th,
  .sales-dashboard-activity-table td {
    padding-right: 2px;
    padding-left: 2px;
    font-size: 10px;
  }
}
@media (max-width: 640px) {
  .sales-dashboard-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .sales-dashboard-controls .field,
  .sales-dashboard-controls select,
  .sales-dashboard-controls input[type=month],
  .sales-dashboard-controls .app-button {
    width: 100%;
  }
  .sales-dashboard-controls .dashboard-segment {
    width: auto;
    margin-left: 0;
  }
  .sales-dashboard-verdict__metrics,
  .sales-dashboard-card-grid,
  .sales-dashboard-breakdowns {
    grid-template-columns: 1fr;
  }
  .sales-dashboard-project-row {
    display: grid;
  }
  .sales-dashboard-funnel {
    grid-template-columns: 1fr;
  }
  .sales-dashboard-funnel__arrow::before {
    content: "↓ ";
  }
  .sales-dashboard-two-columns {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .sales-dashboard-activity-table-wrap {
    width: 100%;
  }
  .sales-dashboard-page .sales-dashboard-activity-table {
    width: 396px;
    max-width: none;
    min-width: 396px;
  }
  .sales-dashboard-activity-table__person {
    width: 120px;
  }
  .sales-dashboard-activity-table__meeting,
  .sales-dashboard-activity-table__acquired {
    width: 72px;
  }
  .sales-dashboard-activity-table__qualified {
    width: 132px;
  }
  .sales-dashboard-activity-table th,
  .sales-dashboard-activity-table td {
    padding-right: 2px;
    padding-left: 2px;
    font-size: 10px;
  }
  .sales-dashboard-monthly-table .sales-dashboard-sticky-column {
    width: 120px;
    max-width: 120px;
    min-width: 120px;
    white-space: normal;
  }
  .sales-dashboard-monthly-table .sales-dashboard-submetric {
    padding-left: var(--space-2);
  }
}
/* ------------------------------
   Base
   design_parts は *, *::before, *::after { box-sizing: border-box } 前提。
   legacy ページへの影響を避けるため、移植部品とその配下に限定して適用する。
------------------------------ */
.topbar,
.panel,
.brand,
.side-nav,
.toolbar,
.form-grid,
.tabs,
.table-scroll,
.table-footer,
.bulk-bar,
.tag-cloud,
.user-menu,
.button,
.text-action,
.icon-button,
.parts-upload,
.parts-file-card,
.parts-alert,
.pinned-notices,
.pinned-notice,
.detail-grid,
.inline-edit,
.inline-edit-popover,
.date-range-popover,
.content-file-preview,
.modal,
.pinned-notices *,
.topbar *,
.panel *,
.brand *,
.side-nav *,
.toolbar *,
.form-grid *,
.tabs *,
.table-scroll *,
.table-footer *,
.bulk-bar *,
.tag-cloud *,
.user-menu *,
.button *,
.text-action *,
.icon-button *,
.parts-upload *,
.parts-file-card *,
.parts-alert *,
.detail-grid *,
.inline-edit *,
.inline-edit-popover *,
.date-range-popover *,
.content-file-preview *,
.modal * {
  box-sizing: border-box;
}

/* 重要お知らせの固定バナー(design_parts の .pinned-notice を移植)。
   未読の重要お知らせをページ上部にスタック表示する。値は design_parts.css と一致。 */
.pinned-notices {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pinned-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid #d97706;
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
  box-shadow: var(--shadow-sm);
}

.pinned-notice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: #d97706;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 900;
  line-height: 1;
}

.pinned-notice__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.pinned-notice__title {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
  line-height: 1.5;
}

.pinned-notice__desc {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-notice__action {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: #d97706;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.pinned-notice__action:hover {
  background: #b45309;
  color: #fff;
}

.pinned-notices__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: var(--radius-pill);
  color: #b45309;
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-decoration: none;
}

.pinned-notices__more:hover {
  background: var(--color-warning-bg);
  color: #92400e;
}

@media (max-width: 640px) {
  .pinned-notice {
    flex-wrap: wrap;
  }
  .pinned-notice__action {
    align-self: stretch;
    justify-content: center;
    width: 100%;
  }
}
/* design_parts の disabled 表現を production 全体にも適用する。
   背景色だけでは通常入力との差が小さいため、操作不可であることを明示する。 */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ------------------------------
   Brand / Side Navigation
------------------------------ */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.brand__logo {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  object-fit: contain;
}

.brand__name {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.brand__caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-xs);
}

.side-nav {
  display: grid;
  gap: var(--space-1);
}

.side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

button.side-nav__item {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.side-nav__item:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--color-white);
}

.side-nav__item.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
}

.side-nav__icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.86);
}

.side-nav__icon svg {
  width: 15px;
  height: 15px;
}

.side-nav__group {
  display: grid;
  gap: var(--space-1);
}

.side-nav__toggle {
  justify-content: flex-start;
}

.side-nav__chevron {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  transition: transform var(--transition-normal);
}

.side-nav__group.is-open .side-nav__chevron {
  transform: rotate(180deg);
}

.side-nav__submenu {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-2) 36px;
  padding-left: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.side-nav__submenu[hidden] {
  display: none;
}

.side-nav__subitem {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--font-size-xs);
  font-weight: 800;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.side-nav__subitem--compact {
  font-size: 0.6875rem;
  white-space: nowrap;
}

.side-nav__subitem:hover,
.side-nav__subitem.is-current {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

/* ------------------------------
   Topbar / User Menu
------------------------------ */
.topbar {
  position: sticky;
  /* 詳細ページの sticky ヘッダー(.detail-fixed-header / .project_fixed_header, z-index: 20)より前面に置き、
     ユーザーメニューのポップオーバーが半透明ヘッダーの下に潜り込まないようにする */
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid rgba(223, 231, 242, 0.9);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-menu-wrap {
  position: relative;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.user-menu:hover,
.user-menu.is-open {
  border-color: var(--color-primary);
}

.user-menu.is-open {
  box-shadow: var(--focus-ring);
}

.user-menu__text {
  display: grid;
  line-height: 1.25;
  text-align: left;
}

.user-menu__text strong {
  font-size: var(--font-size-xs);
}

.user-menu__text span {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
}

.user-menu__chevron {
  color: var(--color-text-subtle);
  font-size: 0.72rem;
}

.user-menu__popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  text-align: left;
}

.user-menu__popover[hidden] {
  display: none;
}

.user-menu__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.user-menu__option:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.user-menu__option--danger {
  color: var(--color-danger);
}

.user-menu__option--danger:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.user-menu__popover .user-menu-form {
  display: contents;
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-sky);
  color: var(--color-navy);
  font-weight: 900;
}

/* ------------------------------
   Tabs
------------------------------ */
.tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-4) var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  scrollbar-width: thin;
}

.tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 900;
}

.tab:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

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

.tab.is-active::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  bottom: -1px;
  left: var(--space-4);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* ------------------------------
   Headings
------------------------------ */
.page-title,
.section-title,
.modal__title,
.tab-panel__title {
  margin: 0;
  color: var(--color-navy-900);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
}

.page-title {
  font-size: var(--font-size-xl);
}

.section-title,
.modal__title {
  font-size: var(--font-size-lg);
}

.section-description,
.tab-panel__description {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

/* ------------------------------
   Panel / Button
------------------------------ */
.panel {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 2択の選択操作: 親パネルの余分な間隔をなくし、選択肢側の余白へ統一する */
.panel.choice-panel {
  container: choice-panel/inline-size;
  gap: 0;
}

.panel__actions.choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-6);
}

.choice-actions .button {
  width: 100%;
  min-width: 0;
}

@container choice-panel (max-width: 520px) {
  .panel__actions.choice-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.button {
  padding: 0 var(--space-4);
  white-space: nowrap;
}

.text-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-action:hover,
.text-action:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.button:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

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

.button--primary:hover {
  background: var(--color-primary-700);
  color: var(--color-white);
}

.button--secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
}

.button--secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-navy);
}

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

.button--ghost:hover {
  background: var(--color-primary-50);
}

.button--danger {
  background: var(--color-danger);
  color: var(--color-white);
}

.button--danger:hover {
  background: #dc2626;
}

.button--compact {
  min-height: 30px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
}

.button--on-dark {
  color: var(--color-white);
}

.button--on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
}

.icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
}

.icon-button--compact {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.icon-button--compact svg {
  width: 18px;
  height: 18px;
}

.icon-button.is-copied {
  border-color: var(--color-success);
  color: var(--color-success);
}

.icon-button__success-mark {
  display: none;
}

.icon-button.is-copied .icon-button__default-mark {
  display: none;
}

.icon-button.is-copied .icon-button__success-mark {
  display: inline;
}

.tab-panel__meta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 900;
  white-space: nowrap;
}

/* ------------------------------
   Toolbar / Form Controls
------------------------------ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
}

.toolbar__spacer {
  flex: 1 1 auto;
}

.search-field {
  position: relative;
  flex: 1 1 320px;
}

.search-field::before {
  content: "⌕";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  color: var(--color-text-subtle);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-field input,
.select-field select,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.search-field input,
.select-field select {
  min-height: 40px;
}

.search-field input {
  padding: 0 var(--space-4) 0 2.5rem;
}

.select-field select {
  padding: 0 2.25rem 0 var(--space-3);
}

.select-field--small {
  width: 148px;
}

.search-field input:hover,
.select-field select:hover,
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #c6d4e8;
}

.search-field input:focus,
.select-field select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form-field {
  display: grid;
  /* 同じ行に背の高いフィールド(補足文つき・アップロード欄など)があると、
     既定の stretch ではラベルと入力欄が引き伸ばされて間隔が空き、
     select が textarea のように縦長になる。常に上詰めにする。 */
  align-content: start;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.form-field--full {
  grid-column: 1/-1;
}

.form-field input,
.form-field select {
  min-height: 42px;
  padding: 0 var(--space-3);
}

/* ブラウザ既定の矢印は common.scss の appearance: none で消えるため、
   セレクトだと分かるように矢印を背景で描く(テキスト入力と区別できるようにする) */
.select-field select:not([multiple]),
.form-field select:not([multiple]) {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b8496' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 10px 6px;
}

/* form-field内のチェックボックス/ラジオにはテキスト入力用の全幅・高さ・枠線スタイルを適用しない
   (仕入先作成モーダルの「このまま発注書を作成する」等、ラベル内チェックボックスの崩れ防止。
   border/backgroundを上書きするとブラウザのネイティブ描画が消えチェック状態が見えなくなるためリセットする) */
.form-field input[type=checkbox],
.form-field input[type=radio] {
  appearance: auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin-right: var(--space-2);
  border: none;
  border-radius: 0;
  background: none;
  vertical-align: middle;
  accent-color: var(--color-primary);
}

/* design_parts「ヘルプアイコン」: ラベル等の補足説明をホバー/フォーカスでポップアップ表示する */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-text-muted);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.help-tip__popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: #0b2343;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(11, 35, 67, 0.25);
}

.help-tip:hover .help-tip__popup,
.help-tip:focus .help-tip__popup {
  display: block;
}

/* design_parts「日付範囲ピッカー」: 期間入力フィールドとカレンダーポップオーバー */
.date-range-form-field {
  position: relative;
}

.date-range-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.date-range-field:hover {
  border-color: #c6d4e8;
}

.date-range-field.is-open,
.date-range-field:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  outline: none;
}

.date-range-field__label.is-placeholder {
  color: var(--color-text-subtle);
}

.date-range-field__icon {
  color: var(--color-text-subtle);
}

.date-range-popover {
  /* モーダル内でoverflowに切られないよう、body直下にfixedで配置する(座標はJSで設定) */
  position: fixed;
  z-index: 1200;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 18px 40px rgba(11, 35, 67, 0.18);
}

.date-range-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: var(--space-3);
  padding: 3px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.date-range-mode-switch__button {
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.date-range-mode-switch__button:hover {
  color: var(--color-primary);
}

.date-range-mode-switch__button.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.date-range-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.date-range-popover__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 10px;
  cursor: pointer;
}

.date-range-popover__nav:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.date-range-popover__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.date-range-popover__months {
  display: flex;
  gap: var(--space-4);
}

.date-range-cal__title {
  margin: 0 0 var(--space-1);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 900;
  color: var(--color-text-muted);
}

.date-range-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}

.date-range-cal__dow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 900;
}

.date-range-cal__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
}

.date-range-cal__day:hover {
  background: var(--color-primary-50);
}

.date-range-cal__day.is-today {
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.date-range-cal__day.is-in-range {
  border-radius: 0;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.date-range-cal__day.is-selected {
  background: var(--color-primary);
  color: #fff;
}

.date-range-popover__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (max-width: 760px) {
  .date-range-popover__months {
    flex-direction: column;
  }
}
/* フィールドの高さが揃わなくても、隣のフィールドの入力欄が縦に伸びないよう中身は上詰めにする */
.task_assignee_fields .form-field {
  align-content: start;
}

/* design_parts「検索付きセレクト」: 1つの入力欄で検索とリアルタイム絞り込み選択を行うcombobox */
.search-select {
  position: relative;
}

.search-select .search-select__input {
  padding-right: 2rem;
}

.search-select__icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

.search-select__popover {
  /* モーダル内でoverflowに切られないよう、body直下にfixedで配置する(座標・幅はJSで設定) */
  position: fixed;
  z-index: 1200;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 18px 40px rgba(11, 35, 67, 0.18);
}

.search-select__option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.search-select__option:hover,
.search-select__option.is-active {
  background: var(--color-primary-50);
}

.search-select__option.is-selected {
  color: var(--color-primary-700);
  font-weight: 900;
}

.search-select__empty {
  margin: 0;
  padding: 10px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
}

/* ラベル内チェックボックスだけのフィールドは、隣の入力欄の行に揃えて縦中央に配置する */
.form-field--checkbox {
  align-self: end;
}

.form-field--checkbox label {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  cursor: pointer;
}

.form-field textarea {
  min-height: 104px;
  padding: var(--space-3);
  resize: vertical;
}

.form-error {
  color: var(--color-danger);
}

/* ------------------------------
   Feedback
   /design_parts の「通知・空状態」から移植
------------------------------ */
.parts-alert {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-lg);
}

.parts-alert strong {
  color: var(--color-navy);
}

.parts-alert span {
  color: var(--color-text-muted);
  font-weight: 800;
}

.parts-alert--success {
  border-color: rgba(20, 184, 166, 0.3);
  background: rgba(20, 184, 166, 0.1);
}

.parts-alert--warning {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.12);
}

.parts-alert--danger {
  border-color: rgba(239, 68, 68, 0.28);
  background: var(--color-danger-bg);
}

/* design_parts「フォームの縦リズム」: 行間(--space-3)>ラベルと自入力欄の間隔(--space-2)。
   複数の行(form-grid/form-field)を積むラッパーに使う */
.form-stack {
  display: grid;
  gap: var(--space-3);
}

.form-note {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}

/* parts.scssはcommon.scssより後に読まれるため、dispNonとの併用時は非表示を優先する */
.form-stack.dispNon {
  display: none;
}

.form-field.is-error input,
.form-field.is-error select,
.form-field.is-error textarea {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* ------------------------------
   Bulk Action Bar (design_parts「8. Bulk Action Bar」)
   選択件数と一括操作をまとめる帯。is-visible が付いたときだけ表示する。
------------------------------ */
.bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-4) var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.bulk-bar.is-visible {
  display: flex;
}

.bulk-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ------------------------------
   Tag Cloud (design_parts「タグクラウド」)
   タグ一覧ページ向け。利用件数にかかわらず同じ大きさで表示する。
------------------------------ */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.tag-cloud__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.28em 0.85em;
  border: 1px solid rgba(47, 107, 255, 0.18);
  border-radius: 999px;
  background: var(--color-primary-50);
  color: var(--color-navy);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.tag-cloud__tag:hover,
.tag-cloud__tag:focus-visible {
  border-color: var(--color-primary);
  background: #dcebff;
}

.tag-cloud__count {
  color: var(--color-text-muted);
  font-size: 0.72em;
  font-weight: 600;
}

/* ------------------------------
   Data Table
------------------------------ */
.table-scroll {
  max-height: calc(100vh - 380px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.table-scroll:focus-visible {
  box-shadow: inset var(--focus-ring);
}

.data-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}

/* すべてのdata-tableにborderを付ける(プロジェクト詳細の制作物一覧タブ等の既存border実装と同じ見た目)。
   border-collapse: separate のまま右側+外周のborderで格子を表現し、二重線を避ける */
.data-table th,
.data-table td {
  border-right: 1px solid var(--color-border-soft);
}

.data-table th:first-child,
.data-table td:first-child {
  border-left: 1px solid var(--color-border-soft);
}

.data-table thead th {
  border-top: 1px solid var(--color-border-soft);
  /* client-table / users-table など旧互換クラスのヘッダー背景より後勝ちさせ、
     一覧テーブルのヘッダーをdesign_partsの白背景へ統一する。 */
  background: var(--color-surface);
}

.data-table th {
  position: sticky;
  z-index: 5;
  top: 0;
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  height: var(--table-row-height);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
}

.data-table tbody tr {
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.data-table tbody tr:hover {
  background: #f8fbff;
}

.data-table tbody tr.is-selected {
  background: var(--color-primary-50);
}

.data-table tbody tr:focus-visible {
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.cell-check {
  width: 52px;
  min-width: 52px;
  text-align: center;
}

.cell-actions {
  position: sticky;
  right: 0;
  z-index: 4;
  width: 168px;
  min-width: 168px;
  background: inherit;
  text-align: right;
}

.data-table thead .cell-actions {
  z-index: 7;
  background: var(--color-surface);
}

.data-table input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.sort-button:hover {
  color: var(--color-primary);
}

.sort-icon {
  color: var(--color-text-subtle);
  font-family: var(--font-number);
  font-size: 0.7rem;
}

.cell-stack,
.title-cell,
.assignee-cell,
.media-cell {
  min-width: 0;
}

.title-cell,
.assignee-cell,
.media-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cell-stack {
  display: grid;
  gap: 0.125rem;
}

/* 上下段の区切りを薄いborderで示す(請求予定/入金予定の 企業名/プロジェクト名 列) */
/* 一覧セル内で企業名/プロジェクト名/制作物名などを複数行に積む場合の区切り線。
   全一覧ページで共通に表示する(色は区切り線専用の #dfe7f2 固定) */
.data-table .cell-stack > * + *,
.cell-stack--divided > * + * {
  padding-top: 0.25rem;
  border-top: 1px solid #dfe7f2;
  margin-top: 0.25rem;
}

.cell-stack strong {
  overflow: hidden;
  color: var(--color-navy-900);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-stack span,
.cell-note {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 900;
  white-space: nowrap;
}

.status--planning,
.status--draft,
.status--negotiating {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status--active,
.status--shooting,
.status--approved,
.status--paid,
.status--done {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status--editing,
.status--sent,
.status--in-progress,
.status--important {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.status--review,
.status--pending,
.status--blocked {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status--rejected,
.status--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status--hold,
.status--sleep,
.status--todo {
  background: #f1f5f9;
  color: #64748b;
}

/* 一覧セルで使う3段階の優先度。高=赤、中=緑、低=青で表と入力値を対応させる。 */
.priority-level[data-value=高] {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-weight: 800;
}

.priority-level[data-value=中] {
  background: var(--color-success-bg);
  color: var(--color-success);
  font-weight: 800;
}

.priority-level[data-value=低] {
  background: var(--color-info-bg);
  color: var(--color-info);
  font-weight: 800;
}

/* ------------------------------
   Summary card(メトリクスカード)— design_parts.css より移植
------------------------------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.summary-card {
  display: grid;
  align-content: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.summary-card__label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.summary-card__value {
  margin: 0;
  color: var(--color-navy-900);
  font-family: var(--font-number);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.summary-card__value span {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  letter-spacing: 0;
}

.summary-card__trend {
  margin: var(--space-3) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.summary-card__trend.is-positive {
  color: var(--color-success);
}

.summary-card__trend.is-warning {
  color: var(--color-warning);
}

/* ------------------------------
   Stepper(申請ステップ)— design_parts.css より移植
   完了 = is-done(✓)、現在 = is-current(塗り)、未到達 = 装飾なし。
   Rails 適応: 既存view(会計書類の申請段階)は到達済みステップを累積で
   .is-active にするため、最後の .is-active を現在、それ以前を完了として描画する
------------------------------- */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stepper;
}

.stepper__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 0;
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  counter-increment: stepper;
}

.stepper__step::before {
  content: counter(stepper);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
}

.stepper__step.is-done,
.stepper__step.is-active {
  border-color: rgba(47, 107, 255, 0.28);
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.stepper__step.is-done::before,
.stepper__step.is-active::before {
  content: "✓";
  border-color: transparent;
  background: var(--color-primary);
  color: #ffffff;
}

.stepper__step.is-current,
.stepper__step.is-active:not(:has(~ .stepper__step.is-active)) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.stepper__step.is-current::before,
.stepper__step.is-active:not(:has(~ .stepper__step.is-active))::before {
  content: counter(stepper);
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #ffffff;
}

.row-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.row-action:hover {
  border-color: var(--color-border);
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.row-action--danger:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.empty-row td {
  height: 260px;
  text-align: center;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-size: 1.5rem;
}

.loading-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-weight: 800;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: parts-spin 700ms linear infinite;
}

.dashboard-loading-surface {
  background: radial-gradient(circle at 50% 44%, rgba(220, 235, 255, 0.68), transparent 46%), var(--color-bg);
}

.dashboard-loading-preview {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: var(--space-10);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
}

.dashboard-loading-screen__card {
  width: min(100%, 680px);
  padding: calc(var(--space-10) + var(--space-4)) var(--space-10);
  box-shadow: var(--shadow-md);
}

.dashboard-loading-screen__card .dashboard-loading-screen__state {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.dashboard-loading-screen__indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  color: var(--color-primary);
}

.dashboard-loading-screen__indicator .loading-spinner {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-width: var(--space-2);
  border-color: var(--color-border);
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  animation-duration: 1100ms;
}

.dashboard-loading-screen__document-icon {
  width: var(--space-10);
  height: var(--space-10);
}

.dashboard-loading-screen__copy {
  display: grid;
  min-width: 0;
  max-width: 520px;
  gap: var(--space-2);
  justify-items: center;
}

.dashboard-loading-screen__card .dashboard-loading-screen__title {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.dashboard-loading-screen__copy .section-description {
  max-width: 440px;
  margin: 0;
  line-height: var(--line-height-normal);
}

.dashboard-loading-screen__progress {
  display: grid;
  grid-template-columns: minmax(0, 360px) auto;
  align-items: center;
  justify-content: center;
  width: min(100%, 430px);
  gap: var(--space-3);
  color: var(--color-primary-700);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.dashboard-loading-screen__progress-track {
  position: relative;
  display: block;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
}

.dashboard-loading-screen__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary-700), var(--color-primary));
  transition: width 300ms linear;
}

.dashboard-loading-screen__progress-bar--overdue {
  animation: dashboard-loading-overdue-pulse 2400ms ease-in-out infinite;
}

.dashboard-loading-screen__progress-bar--complete {
  transition-duration: 150ms;
}

@keyframes dashboard-loading-overdue-pulse {
  50% {
    opacity: 0.75;
  }
}
@media screen and (max-width: 767px) {
  .dashboard-loading-preview {
    min-height: 440px;
    padding: var(--space-4);
  }
  .dashboard-loading-screen__card {
    padding: var(--space-10) var(--space-4);
  }
  .dashboard-loading-screen__indicator {
    width: 72px;
    height: 72px;
  }
  .dashboard-loading-screen__indicator .loading-spinner {
    border-width: var(--space-1);
  }
  .dashboard-loading-screen__document-icon {
    width: var(--space-8);
    height: var(--space-8);
  }
  .dashboard-loading-screen__card .dashboard-loading-screen__title {
    font-size: var(--font-size-lg);
  }
  .dashboard-loading-screen__progress {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .dashboard-loading-screen__progress-label {
    justify-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-loading-screen__indicator .loading-spinner {
    animation: none;
  }
  .dashboard-loading-screen__progress-bar {
    transition: none;
    animation: none;
  }
}
/* ------------------------------
   File Upload
------------------------------ */
.parts-upload {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px dashed rgba(32, 100, 183, 0.42);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 0%, rgba(32, 100, 183, 0.16), transparent 46%), var(--color-surface-soft);
  color: var(--color-navy);
  text-align: center;
  cursor: pointer;
}

.parts-upload:hover {
  border-color: var(--color-primary);
  background: radial-gradient(circle at 50% 0%, rgba(32, 100, 183, 0.22), transparent 52%), #f4f8ff;
}

/* design_parts のファイルアップロード無効状態を移植。 */
.parts-upload:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.parts-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.parts-upload__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-size: 1.6rem;
  font-weight: 900;
}

.parts-upload small {
  color: var(--color-text-muted);
  font-weight: 800;
}

.parts-file-grid {
  display: grid;
  gap: var(--space-3);
}

.parts-file-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.parts-file-card__icon {
  display: grid;
  place-items: center;
  align-items: center;
  justify-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: 0.72rem;
  font-weight: 1000;
  line-height: 1;
}

.parts-file-card__icon--movie {
  background: #eef2ff;
  color: #4f46e5;
}

.parts-file-card div strong,
.parts-file-card div span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-inline-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* ------------------------------
   Inline Edit (インライン編集)
------------------------------ */
.inline-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: underline dashed rgba(47, 107, 255, 0.55);
  text-underline-offset: 4px;
  transition: background var(--transition-fast), color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.inline-edit:hover {
  background: var(--color-primary-50);
  text-decoration-color: var(--color-primary);
}

.inline-edit__value {
  min-width: 1em;
  outline: none;
}

.inline-edit__chevron {
  color: var(--color-text-subtle);
  font-size: 0.72rem;
  text-decoration: none;
}

.inline-edit--number {
  font-family: var(--font-number);
}

.inline-edit.is-editing {
  padding: 0 var(--space-2);
  background: var(--color-surface);
  box-shadow: var(--focus-ring);
  cursor: text;
  text-decoration: none;
}

.inline-edit.is-editing .inline-edit__chevron {
  display: none;
}

/* 値の後ろに付ける編集対象外の固定表示(例: パンくずのプロジェクト名末尾のID)。編集中は非表示 */
.inline-edit__suffix {
  color: var(--color-text-subtle);
  text-decoration: none;
}

.inline-edit.is-editing .inline-edit__suffix {
  display: none;
}

.inline-edit.is-invalid {
  background: var(--color-danger-bg);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.24);
}

.inline-edit.is-open {
  background: var(--color-primary-50);
  text-decoration: none;
}

.inline-edit__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.inline-edit__chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.inline-edit__placeholder {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.inline-edit.is-empty:hover .inline-edit__placeholder {
  color: var(--color-primary);
}

.inline-edit-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 210px;
  max-height: 280px;
  overflow: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  cursor: default;
  text-align: left;
}

.inline-edit-popover__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.inline-edit-popover__option:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.inline-edit-popover__option.is-selected {
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-weight: 900;
}

.inline-edit-popover__option.is-selected::after {
  content: "✓";
  margin-left: auto;
}

.inline-edit-popover__option input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.inline-edit-popover__group {
  padding: var(--space-2) var(--space-3) 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.inline-edit-popover__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}

.inline-edit-popover--date {
  min-width: 240px;
}

.inline-edit-popover--date input[type=date] {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.inline-edit-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 800;
  cursor: pointer;
}

.inline-edit-check:hover {
  background: var(--color-primary-50);
}

.inline-edit-check__box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: transparent;
  font-size: 12px;
  line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.inline-edit-check.is-on {
  color: var(--color-text);
}

.inline-edit-check.is-on .inline-edit-check__box {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

/* ------------------------------
   Detail Grid (詳細情報のコンパクト表示)
   値ごとの枠線をやめ、項目/値のKVグリッドで密度を上げる
------------------------------ */
.detail-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 180px minmax(0, 1fr);
  border-top: 1px solid var(--color-border-soft);
}

.detail-grid__label {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.detail-grid__value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  font-weight: 700;
}

.detail-grid__value--full {
  grid-column: 2/-1;
}

/* 複数段落(simple_format の <p>)を含む全幅セルだけ、段落を縦に積む。
   基底の .detail-grid__value は display:flex のため、指定しないと段落が横に
   並んで段組みのように崩れる。URL+コピーボタン(span/button の兄弟)を含む
   全幅セルには <p> が無いため影響せず、横並びが維持される。 */
.detail-grid__value--full:has(> p) {
  flex-wrap: wrap;
  align-items: flex-start;
}

.detail-grid__value--full > p {
  flex: 0 0 100%;
}

/* 項目が奇数個で終わると右半分にセルが無く、その行だけ罫線が途切れる。
   最終行の左半分にある値を全幅に伸ばして罫線をつなぐ。 */
.detail-grid > .detail-grid__value:nth-child(4n+2):last-child {
  grid-column: 2/-1;
}

@media (max-width: 980px) {
  .detail-grid {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  .detail-grid__value--full {
    grid-column: 2/-1;
  }
  .detail-grid__blank {
    display: none;
  }
}
/* ------------------------------
   Modal
------------------------------ */
.modal-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
}

/* design_parts の [hidden] { display: none !important } の移植。
   hidden属性で開閉するdesignモーダルは .modal の display 指定がUAスタイルの
   [hidden] を上書きしてしまい、閉じても表示が残るためここで明示する
   (グローバルな [hidden] ルールは旧UIへの影響が読めないためモーダルに限定) */
.modal[hidden],
.modal-backdrop[hidden] {
  display: none !important;
}

.modal {
  position: fixed;
  z-index: 90;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, 100vw - 32px);
  max-height: min(760px, 100vh - 32px);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  transform: translate(-50%, -50%);
}

.modal--form {
  width: min(760px, 100vw - 32px);
}

.modal--confirm {
  width: min(520px, 100vw - 32px);
}

.modal__header,
.modal__footer {
  padding: var(--space-5);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.modal__body {
  overflow: auto;
  padding: var(--space-5);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface-soft);
}

/* ------------------------------
   File Preview (アップロード済みファイルのプレビュー)
------------------------------ */
.parts-file-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  cursor: zoom-in;
}

.parts-file-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parts-file-card__thumb--video::after {
  content: "▶";
  position: absolute;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: rgba(11, 35, 67, 0.72);
  color: var(--color-white);
  font-size: 0.55rem;
}

.parts-file-card__thumb:hover {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.modal--preview {
  width: min(960px, 100vw - 32px);
}

.file-preview__stage {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-navy-900);
}

.file-preview__stage img,
.file-preview__stage video {
  max-width: 100%;
  max-height: min(560px, 62vh);
  border-radius: var(--radius-sm);
}

.file-preview__unsupported {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

/* 公開ファイルプレビュー: メディアの下に保存操作を置き、右寄せする。 */
.content-file-preview {
  display: grid;
  gap: var(--space-4);
}

.content-file-preview__actions {
  display: flex;
  justify-content: flex-end;
}

.button.content-file-preview__download {
  box-sizing: border-box;
  width: min(320px, 100%);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-md);
  text-decoration: none;
}

.button.content-file-preview__download:hover {
  text-decoration: none;
}

.content-file-preview__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  background: #000000;
  text-align: center;
}

.content-file-preview__video {
  display: block;
  width: auto;
  max-width: 100%;
  height: 72vh;
}

.content-file-preview__image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
}

.content-file-preview__document {
  width: 100%;
  height: 72vh;
  border: 0;
  background: var(--color-surface);
}

.content-file-preview__unsupported {
  margin: 0;
  padding: var(--space-8);
  color: var(--color-white);
}

@media (max-width: 720px) {
  .button.content-file-preview__download {
    width: 100%;
    max-width: none;
  }
}
.parts-file-card__icon--button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 1000;
  line-height: 1;
}

.parts-file-card__icon--button:hover {
  box-shadow: var(--focus-ring);
}

/* 動画サムネイルは production ではポスター画像がないため紺背景にする */
.parts-file-card__thumb--video {
  background: var(--color-navy-900);
}

/* ------------------------------
   Table Footer / Pagination
------------------------------ */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.table-summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__button {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-number);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.pagination__button:hover {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

.pagination__button.is-current {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.pagination__button:disabled {
  opacity: 0.4;
}

/* ------------------------------
   Responsive (design_parts の該当箇所のみ移植)
------------------------------ */
@media (max-width: 980px) {
  .table-scroll {
    max-height: none;
    min-height: 0;
  }
}
@media (max-width: 720px) {
  .panel__header,
  .table-footer,
  .bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .toolbar__spacer {
    display: none;
  }
  .button,
  .select-field,
  .select-field--small,
  .search-field {
    width: 100%;
  }
  .data-table {
    min-width: 980px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* ------------------------------
   Motion
------------------------------ */
@keyframes parts-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =========================================================
   Rails adaptations
   design_parts はモック(ボタン+クライアントJS)なので、
   Rails の ransack / kaminari / 検索フォーム運用に合わせる
   最小限の適合をここに置く。見た目の値は上の移植定義を参照する。
========================================================= */
/* 検索フォーム: desktop 4列 / tablet 2列 / mobile 1列(トンマナ文書の規定) */
.form-grid--search {
  flex: 1 1 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.form-field--wide {
  grid-column: span 2;
}

/* 期間指定(from/to)を1フィールド内に横並びにする。フィールド幅からはみ出さない */
.form-field__range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.form-field__range span {
  flex: 0 0 auto;
}

.form-field__range input {
  flex: 1 1 0;
  min-width: 0;
}

/* ライブ検索結果の件数ツールバーとテーブルは連続した領域として表示する。
   旧ページ固有の margin / 角丸付き table wrapper が残っていても、検索結果内では無効化する。 */
.live-search-results > .toolbar:has(+ .table-scroll),
.live-search-results > .contact-results-toolbar:has(+ .table-scroll) {
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 0;
}

.live-search-results .table-scroll {
  margin-top: 0;
  padding-top: 0;
  border: 0;
  border-radius: 0;
}

.live-search-results .data-table {
  border-radius: 0;
}

/* 旧client-tableの表レベル指定を、共通data-tableの本文・hover・最終罫線へ揃える。 */
.data-table.client-table {
  color: inherit;
  font-size: inherit;
}

.data-table.client-table tbody tr:hover td {
  background: #f8fbff;
}

.data-table.client-table tbody tr:last-child td {
  border-bottom: 1px solid var(--color-border-soft);
}

/* 同じ行の複数行チェック群に引っ張られず、短いフィールドは行の上端へ置く。 */
.contents-search-form .contents-search-field--top {
  align-self: start;
}

/* チェックボックス群のフィールドは下端揃え(align-items: end)にすると
   隣より行数が少ない場合にラベル上へ余白が出るため上端揃えにする */
/* チェックボックス群は入力欄より背が高く、同じ行に並ぶ入力欄が下端揃え(align-items: end)で
   押し下げられて上に不自然な余白ができるため、1行を占有させる */
.form-grid--search .form-field:has(.app-checkbox-list) {
  grid-column: 1/-1;
  align-self: start;
}

/* 登録フォームの送信ボタンを最後の入力の隣の列に置くセル
   (タグ管理ページ等。入力欄と下端を揃え、ボタンは自然幅のまま) */
.form-grid .form-field--submit {
  align-content: end;
  justify-items: start;
}

@media (max-width: 1180px) {
  .form-grid--search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .form-grid--search {
    grid-template-columns: 1fr;
  }
  .form-field--wide {
    grid-column: auto;
  }
  .form-field__range {
    flex-wrap: wrap;
  }
  /* 縦積み時に件数ピルを全幅に伸ばさない */
  .toolbar .tab-panel__meta {
    align-self: flex-start;
  }
}
/* 日付・日時セルは折り返さない(トンマナ文書: 日付列は折り返さない) */
.cell-date {
  white-space: nowrap;
}

/* 短い区分値の列は折り返さない */
.cell-nowrap {
  white-space: nowrap;
}

.client-table-number {
  text-align: right;
}

/* 名称・タイトル列の最小幅(トンマナ文書: 名称列は読みやすい最小幅を決める) */
.cell-title {
  min-width: 240px;
}

/* 既存グローバルCSSのリンク下線を打ち消す
   (design_parts は a { text-decoration: none } を基本にしている) */
.panel a,
.panel a:hover {
  text-decoration: none;
}

/* テーブル内のレコードリンク */
.data-table td a:not(.row-action) {
  color: var(--color-primary);
  font-weight: 800;
}

.data-table td a:not(.row-action):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* モーダルを起動するボタンをレコードリンクと同じ見た目にする
   (プロジェクト選択ページの主導線。黒文字だと隣の担当者リンクを誤クリックしやすい) */
.data-table td button.client-inline-trigger--link {
  color: var(--color-primary);
  font-weight: 800;
}

.data-table td button.client-inline-trigger--link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 並べ替え実行中の列は方向矢印(↑/↓)を強調する(design_parts の見え方に合わせる) */
.data-table th a.sort_link.asc .sort-icon,
.data-table th a.sort_link.desc .sort-icon {
  color: var(--color-text);
  font-size: 0.8rem;
}

/* ransack の sort_link に .sort-button の見た目を適用する */
.data-table th a.sort_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  color: inherit;
  font-weight: 900;
  text-decoration: none;
}

.data-table th a.sort_link:hover {
  color: var(--color-primary);
}

/* tbody の sticky 操作列は行背景が透明なため surface を明示する
   (thead .cell-actions と同じ扱い) */
.data-table tbody .cell-actions {
  background: var(--color-surface);
}

.data-table tbody tr:hover .cell-actions {
  background: #f8fbff;
}

/* ページ内タイトル見出しは置かない決定(タイトルは topbar のパンくずが担う)のため、
   panel__header がアクションのみの場合は右寄せにする */
.panel__header > .panel__actions:only-child {
  margin-left: auto;
}

/* ブランドを link_to(a要素)で描画するための適合。
   design_parts では div + p 構成のため block 表示と装飾打ち消しを補う */
a.brand,
a.brand:hover {
  color: inherit;
  text-decoration: none;
}

.brand__name,
.brand__caption {
  display: block;
}

/* ブランド表示のみユーザー指定によりシステムフォントを維持する(2026-07 決定) */
.brand__name,
.brand__caption {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* design_parts は a { text-decoration: none } を基本にしているため、
   ナビ内リンクの下線を打ち消す */
.side-nav a,
.side-nav a:hover {
  text-decoration: none;
}

/* タブをリンク(サーバー側レンダリングのタブ切替)で実装する場合も
   design_parts のタブ(button)と同じ見た目にする */
.tabs a.tab,
.tabs a.tab:hover {
  text-decoration: none;
}

/* ナビのラベルを span で包む(テスト・省略表示のため) */
.side-nav__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* button_to(logout)の form ラッパー */
.side-nav form {
  display: grid;
  margin: 0;
}

/* Rails の topbar 左側(サイドバートグル + パンくず)をまとめる */
.topbar__main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* 長いユーザー名は折り返さず省略する */
.topbar .user-menu__text strong {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 既存タブJS(project_tab 等)は .active を切り替えるため、
   .is-active と同じ見た目を .active にも与える */
.tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
}

.tab.active::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  bottom: -1px;
  left: var(--space-4);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* 旧 .upload_file_area(unique.scss)の寸法・レイアウト指定を打ち消す。
   .upload_file_area は JS フックとして維持し、見た目は .parts-upload を正とする */
.parts-upload.upload_file_area {
  display: grid;
  height: auto;
  margin: 0;
  font-size: inherit;
}

.parts-upload.upload_file_area input.upload_file_input {
  width: 100% !important;
  height: 100% !important;
}

/* file card のファイル名は Rails ではリンクになるため、
   design_parts の strong と同じ見た目を与える */
.parts-file-card div a {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--color-navy-900);
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parts-file-card div a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.parts-file-card div span {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.parts-file-card form {
  margin: 0;
}

/* インライン編集を claim した既存 editable セル(td)側の装飾は
   span.inline-edit に移すため打ち消す */
[data-app-inline-edit=true] {
  cursor: pointer;
  text-decoration: none;
}

[data-app-inline-edit=true]:hover {
  background-color: transparent;
}

/* production ではテーブルの overflow クリップを避けるため
   ポップオーバーは JS で position: fixed 配置する(座標はインライン指定) */
.inline-edit-popover.is-fixed {
  position: fixed;
  top: auto;
  left: auto;
}

/* detail-grid の Rails 適合(必須マーク・読み取り専用・注記・縦積みセル) */
.detail-grid__required {
  margin-left: 2px;
  color: var(--color-danger);
}

.detail-grid__value--readonly {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

.detail-grid__note {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.detail-grid__value--stack {
  /* 4カラムグリッドで半分だけ埋まると右半分に罫線が入らず途切れるため、全幅にする。 */
  grid-column: 2/-1;
  display: grid;
  align-items: start;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* 全幅値のラベルは、直前の項目数にかかわらず必ず新しい行から始める。 */
.detail-grid__label:has(+ .detail-grid__value--full),
.detail-grid__label:has(+ .detail-grid__value--stack) {
  grid-column: 1;
}

/* 縦に長くなりうる値(--full / --stack)の行では、ラベルを行中央ではなく
   セル上端に揃える(長文メモでラベルが画面外に落ちるのを防ぐ) */
.detail-grid__label:has(+ .detail-grid__value--full),
.detail-grid__label:has(+ .detail-grid__value--stack) {
  align-items: flex-start;
  padding-top: calc(var(--space-2) + 6px);
}

/* kaminari の出力(nav.pagination > span > a)へ
   .pagination / .pagination__button の見た目を適用する */
.table-footer .pagination {
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.table-footer .pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-number);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.table-footer .pagination span a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--space-2);
  color: inherit;
  text-decoration: none;
}

.table-footer .pagination span:hover {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

.table-footer .pagination .current {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary);
}

/* Executive dashboard components (source: /design_parts) */
.dashboard-segment {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dashboard-segment legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dashboard-segment__option {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.dashboard-segment__option:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.dashboard-segment__option.is-active:hover,
.dashboard-segment__option:has(input:checked):hover {
  color: var(--color-white);
}

.dashboard-segment__option:first-of-type {
  border-left: 0;
}

.dashboard-segment__option.is-active,
.dashboard-segment__option:has(input:checked) {
  background: var(--color-primary);
  color: var(--color-white);
}

.dashboard-segment__option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

.dashboard-segment__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dashboard-chart-metric-switch {
  margin-left: 0;
  overflow-x: auto;
}

.dashboard-ai-summary {
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(47, 107, 255, 0.18);
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
}

.dashboard-ai-summary__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-navy);
}

.dashboard-ai-summary__heading h2 {
  margin: 0;
  font-size: var(--font-size-sm);
}

.dashboard-ai-summary__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  color: var(--color-navy-900);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  list-style: none;
}

.dashboard-ai-summary__list li {
  display: flex;
  gap: var(--space-2);
}

.dashboard-ai-summary__list a {
  color: var(--color-primary-700);
  font-weight: 800;
  text-decoration: none;
}

.dashboard-ai-summary__dot.is-danger,
.dashboard-ai-summary__dot.is-warning {
  color: var(--color-danger);
}

.dashboard-ai-summary__dot.is-good {
  color: var(--color-info);
}

.dashboard-ai-summary__dot.is-neutral {
  color: var(--color-text-subtle);
}

.dashboard-variance {
  color: var(--color-text-subtle);
  font-weight: 800;
}

.dashboard-variance.is-danger,
.dashboard-variance.is-warning {
  color: var(--color-danger);
}

.dashboard-variance.is-good {
  color: var(--color-info);
}

.dashboard-heatmap-legend,
.dashboard-table-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
  font-size: 11px;
}

.dashboard-heatmap-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.dashboard-heatmap-metric-switch {
  margin-left: 0;
}

.dashboard-heatmap-legend i,
.dashboard-table-legend i {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-surface-soft);
}

.dashboard-heatmap-legend i.is-danger,
.dashboard-table-legend i.is-danger {
  background: var(--color-danger);
}

.dashboard-heatmap-legend i.is-warning {
  background: var(--color-warning-bg);
}

.dashboard-heatmap-legend i.is-good,
.dashboard-table-legend i.is-good {
  background: var(--color-info);
}

.dashboard-heatmap-legend i.is-neutral {
  background: var(--color-surface-soft);
}

.dashboard-table-legend i.is-forecast {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
}

.dashboard-table-legend {
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.dashboard-table-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.dashboard-heatmap-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 3px;
  font-size: var(--font-size-xs);
}

.dashboard-heatmap-table th {
  padding: var(--space-1);
  color: var(--color-text-subtle);
  text-align: center;
}

.dashboard-heatmap-table tbody th {
  color: var(--color-text);
  text-align: left;
}

.dashboard-heatmap-table tbody th.is-level-1 {
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-weight: 600;
}

.dashboard-stateful-row-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: 2px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.dashboard-stateful-row-toggle:hover,
.dashboard-stateful-row-toggle:focus-visible {
  color: var(--color-primary);
  outline: none;
}

.dashboard-stateful-row-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary-100);
}

.dashboard-stateful-row-toggle__icon {
  flex: 0 0 20px;
  width: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
}

.dashboard-heatmap-cell {
  display: grid;
  min-height: 30px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-family: var(--font-number);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-heatmap-cell.is-danger {
  background: var(--color-danger);
  color: var(--color-white);
}

.dashboard-heatmap-cell.is-warning {
  background: var(--color-warning-bg);
  color: var(--color-text);
}

.dashboard-heatmap-cell.is-good {
  background: var(--color-info);
  color: var(--color-white);
}

.dashboard-heatmap-cell.is-missing {
  border: 1px solid var(--color-border-soft);
  background: transparent;
  color: var(--color-text-subtle);
  font-weight: 600;
}

@media screen and (max-width: 820px) {
  .dashboard-segment {
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }
  .dashboard-heatmap-actions {
    align-items: flex-end;
    flex-direction: column;
  }
}
@media screen and (max-width: 560px) {
  .dashboard-heatmap-legend {
    flex-wrap: wrap;
  }
}
/* CF trend components (source: /design_parts) */
.cash-flow-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: 12px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.cash-flow-anchor > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.cash-flow-anchor strong {
  color: var(--color-text);
}

.cash-flow-scorecards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.cash-flow-scorecard {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: #fff;
}

.cash-flow-scorecard > span,
.cash-flow-scorecard > small {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-flow-scorecard > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.3;
}

.cash-flow-scorecard.is-danger {
  border-color: #fecaca;
  background: #fff7f7;
}

.cash-flow-scorecard.is-danger > strong {
  color: #dc2626;
}

.cash-flow-chart-header {
  align-items: center;
}

.cash-flow-main-chart {
  height: 340px;
}

.cash-flow-dependency {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.cash-flow-dependency__months {
  display: grid;
  grid-template-columns: repeat(var(--cash-flow-month-count, 12), minmax(52px, 1fr));
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.cash-flow-dependency__months > span {
  display: grid;
  justify-items: center;
  padding: 5px 2px;
  border-radius: 4px;
  background: #eff6ff;
}

.cash-flow-table-scroll {
  max-height: 620px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.cash-flow-table {
  min-width: 2650px;
  border-spacing: 0;
  font-size: 11px;
}

.cash-flow-table th,
.cash-flow-table td {
  height: 32px;
  padding: 5px 7px;
  white-space: nowrap;
}

.cash-flow-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
  text-align: center;
}

.cash-flow-table thead tr:nth-child(2) th {
  top: 32px;
}

.cash-flow-table__category,
.cash-flow-table__item {
  position: sticky !important;
  z-index: 3;
  background: #fff;
  text-align: left !important;
}

.cash-flow-table__category {
  left: 0;
  width: 118px;
  min-width: 118px;
}

.cash-flow-table__item {
  left: 118px;
  width: 150px;
  min-width: 150px;
  border-right: 1px solid var(--color-border);
  box-shadow: 2px 0 2px rgba(15, 23, 42, 0.05);
}

.cash-flow-table thead .cash-flow-table__category,
.cash-flow-table thead .cash-flow-table__item {
  z-index: 6;
}

.cash-flow-confidence {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 9px;
}

.cash-flow-row--sales > th {
  background: #fbf1e0;
}

.cash-flow-row--cost > th {
  background: #e6f1fb;
}

.cash-flow-row--non-operating > th {
  background: #fdf6e3;
}

.cash-flow-row--summary > th,
.cash-flow-row--summary > td {
  background: var(--color-surface-soft);
  font-weight: 700;
}

.cash-flow-row--balance > th,
.cash-flow-row--balance > td {
  background: #334155;
  color: #fff;
  font-weight: 700;
}

.cash-flow-row--detail .cash-flow-table__item {
  padding-left: 18px;
  color: var(--color-text-subtle);
}

.cash-flow-row--level-2 .cash-flow-table__item {
  padding-left: 36px;
  font-size: 11px;
}

.cash-flow-row--level-3 .cash-flow-table__item {
  padding-left: 54px;
  font-size: 11px;
}

.cash-flow-table thead th.is-confirmed-context,
.cash-flow-table tbody tr:not(.cash-flow-row--summary):not(.cash-flow-row--balance) td.is-confirmed-context {
  background: var(--color-surface-soft);
}

.cash-flow-table th.is-forecast-boundary,
.cash-flow-table td.is-forecast-boundary {
  border-left: 2px solid var(--color-border);
}

.cash-flow-table .is-negative {
  color: #dc2626;
}

.cash-flow-changes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.cash-flow-change-panel {
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.cash-flow-change-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 10px;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.cash-flow-change-panel__header strong {
  color: var(--color-text);
  font-size: 13px;
}

.cash-flow-change-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.cash-flow-change-counts > div {
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
}

.cash-flow-change-table {
  font-size: 10px;
}

.cash-flow-change-table th,
.cash-flow-change-table td {
  padding: 5px 6px;
}

.cash-flow-empty {
  margin: 12px 0 0;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.cash-flow-month-form select {
  min-width: 120px;
}

.cash-flow-waterfall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  gap: var(--space-4);
}

.cash-flow-waterfall-chart {
  height: 320px;
}

.cash-flow-waterfall-detail {
  min-width: 0;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.cash-flow-detail-chip {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
}

table.data-table.cash-flow-detail-table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
  font-size: 10px;
}

.cash-flow-detail-table th:nth-child(1) {
  width: 88px;
}

.cash-flow-detail-table th:nth-child(3) {
  width: 120px;
}

.cash-flow-detail-table th:nth-child(4) {
  width: 116px;
}

.cash-flow-detail-table th:nth-child(5) {
  width: 96px;
}

.cash-flow-detail-table th:nth-child(2),
.cash-flow-detail-table td:nth-child(2) {
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 1440px) {
  .cash-flow-waterfall-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  .cash-flow-scorecards,
  .cash-flow-changes,
  .cash-flow-waterfall-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cash-flow-waterfall-layout {
    grid-template-columns: 1fr;
  }
}
/* CF dashboard separation and payment-cycle master */
.dashboard-family-navigation {
  margin-bottom: 0;
  padding: 10px 16px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #fff;
}

.dashboard-family-navigation .tab {
  font-weight: 700;
}

.dashboard-section-navigation {
  margin-top: 0;
  padding: 0 16px 10px;
  border-top: 1px solid var(--color-border-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: #fff;
}

.cash-flow-table {
  min-width: 2650px;
}

.cash-flow-table__item {
  left: 0;
  width: 230px;
  min-width: 230px;
}

.cash-flow-row.is-collapsed-child {
  display: none;
}

.cash-flow-table thead tr:nth-child(2) th {
  border-bottom: 3px solid var(--color-border);
  background: var(--color-surface-soft);
}

.cash-flow-table__subheader {
  display: block;
  margin-top: 4px;
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 700;
}

.cash-flow-product-count {
  margin-left: 8px;
  color: var(--color-text-subtle);
  font-size: 9px;
  font-weight: 500;
}

.cash-flow-zero-products-toggle {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.cash-flow-row.is-zero-product-hidden {
  display: none;
}

.data-table.cash-flow-table td .cash-flow-cell-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.data-table.cash-flow-table td .cash-flow-cell-link:hover,
.data-table.cash-flow-table td .cash-flow-cell-link:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-weight: inherit;
  text-decoration: underline;
}

.cash-flow-watch-table tr.is-highlighted {
  background: #fff7d6;
  box-shadow: inset 4px 0 0 #f59e0b;
}

.app-section-title:has(.cash-flow-term-help) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cash-flow-term-help {
  color: #fff;
  font-size: 10px;
}

.cash-flow-term-help .help-tip__popup {
  width: 420px;
  max-width: min(420px, 82vw);
  white-space: normal;
}

.cash-flow-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cash-flow-watch-card.dashboard-value-link {
  color: inherit;
  text-decoration: none;
}

.cash-flow-watch-card.dashboard-value-link:hover,
.cash-flow-watch-card.dashboard-value-link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.12);
}

.cash-flow-clip-details {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: var(--space-3);
}

.cash-flow-clip-details > summary {
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.cash-flow-clip-details > [hidden] {
  display: none !important;
}

.cash-flow-table-note {
  margin: 8px 0 0;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.cash-flow-change-panels,
.cash-flow-watch-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cash-flow-change-panel {
  display: grid;
  gap: 7px;
}

.cash-flow-change-panel > span,
.cash-flow-change-panel > p {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.cash-flow-watch-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.cash-flow-watch-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: #fff;
}

.cash-flow-watch-card span,
.cash-flow-watch-card small {
  color: var(--color-text-subtle);
  font-size: 10px;
}

.cash-flow-watch-card strong {
  font-size: 15px;
}

.cash-flow-watch-card__value-link {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.cash-flow-watch-card__value-link:hover strong,
.cash-flow-watch-card__value-link:focus-visible strong {
  color: var(--color-primary);
}

.cash-flow-watch-card > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cash-flow-watch-card .help-tip {
  color: #fff;
  font-size: 10px;
}

.cash-flow-watch-card .help-tip__popup {
  width: 320px;
  max-width: min(320px, 80vw);
}

.cash-flow-watch-card.is-danger,
.cash-flow-watch-table tr.is-alert {
  background: #fff7f7;
  color: #b91c1c;
}

.cash-flow-watch-table-wrap {
  max-width: 100%;
  max-height: 360px;
  overflow: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.cash-flow-watch-table,
.cash-flow-change-detail-table,
.payment-cycle-table {
  min-width: 980px;
  font-size: 11px;
}

.cash-flow-watch-table th,
.cash-flow-watch-table td,
.cash-flow-change-detail-table th,
.cash-flow-change-detail-table td,
.payment-cycle-table th,
.payment-cycle-table td {
  padding: 7px 8px;
}

.payment-cycle-form {
  display: flex;
  align-items: end;
  gap: 7px;
}

.payment-cycle-form label {
  display: grid;
  gap: 3px;
  color: var(--color-text-subtle);
  font-size: 10px;
}

.payment-cycle-form input {
  width: 66px;
  padding: 6px;
}

.payment-cycle-measurement {
  display: grid;
  gap: 3px;
}

.payment-cycle-rules {
  display: grid;
  gap: var(--space-3);
}

.payment-cycle-rule-card {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.payment-cycle-rule-card h3,
.payment-cycle-rule-card p {
  margin: 0;
}

.payment-cycle-rule-card p {
  margin-top: 6px;
  color: var(--color-text-subtle);
  font-size: 11px;
}

@media (max-width: 1100px) {
  .cash-flow-watch-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .cash-flow-anchor,
  .cash-flow-anchor > div {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
  .cash-flow-scorecards,
  .cash-flow-change-panels,
  .cash-flow-watch-cards {
    grid-template-columns: 1fr;
  }
  .cash-flow-main-chart {
    height: 280px;
  }
  .cash-flow-scorecard > strong {
    font-size: 18px;
  }
  .cash-flow-table__item {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    white-space: normal;
  }
  .cash-flow-table__item .cash-flow-row-toggle {
    max-width: 100%;
    align-items: flex-start;
    white-space: normal;
    text-align: left;
  }
  .cash-flow-row--detail .cash-flow-table__item,
  .cash-flow-row--level-2 .cash-flow-table__item,
  .cash-flow-row--level-3 .cash-flow-table__item {
    padding-left: var(--space-2);
  }
  .cash-flow-product-count,
  .cash-flow-zero-products-toggle {
    display: block;
    margin-left: 0;
  }
}
.sales-dashboard-page .sales-dashboard-six-metrics tr.is-zero > * {
  color: var(--color-text-muted);
}

.sales-dashboard-page .sales-dashboard-comparison-actual {
  display: block;
  color: var(--color-text-muted);
}

/*# sourceMappingURL=application.css.map */