@charset "UTF-8";
/*
ー Alert
ー breadcrumbs（パンくずリスト）
ー pagination
ー label-summary（クライアント名・クライアント名パーツ）
ー data-count（入力件数・アーカイブ件数）
ー tooltip(エラーパターン 02)
ー modal 警告ポップアップ（モーダル）
ー accordion（重複住所の調整・宛名ラベルの作成）
ー edit-grid（宛名ラベルの作成＜宛名ラベル編集 ）
ー page-top
*/
/* =========================================
   Alert
   ========================================= */

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: var(--alert-bg, #1EB163);
  border: 1px solid var(--alert-border,#4FD2A2);
  color: var(--alert-color, #E0E0E0);
}
.alert-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alert__content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}
.alert--task-running,
.alert--aborted {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.alert__action {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.alert-icon {
  flex-shrink: 0;
  width: 17px;
  height: auto;
  object-fit: contain;
}
.alert-text {
  position: relative;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding-left: 24px
}
/* --- アラートカラー --- */
/* 成功（緑） */
.alert--success{
  --alert-bg: #1eb163;
  --alert-border: #4fd2a2;
  --alert-color: #E0E0E0;
}
/* 実行中（青） */
.alert--task-running{
  --alert-bg: #007ffe;
  --alert-border: var(--color-accent);
  --alert-color: #fff;
}
/* エラー（赤） */
.alert--danger {
  --alert-bg: #c92f2f;
  --alert-border: #df6060;
  --alert-color: #ffbbc2;
}
/* 中断（赤枠） */
.alert--aborted{
  --alert-bg:transparent;
  --alert-border: #df6060;
  --alert-color: #fff;
}
/* --- アラートアイコン --- */
.alert--success .alert-text::before,
.alert--task-running .alert-text::before,
.alert--danger .alert-text::before,
.alert--aborted .alert-text::before{
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.alert--success .alert-text::before {
  background-image: url('../../images/icon_check.svg');
  width: 17px;
  height: 12px;
}
.alert--task-running .alert-text::before {
  background-image: url('../../images/icon_edit.svg');
  width: 20px;
  height: 22px;
}
.alert--danger .alert-text::before {
  background-image: url('../../images/icon_error.svg');
  width: 17px;
  height: 17px;
}
.alert--aborted .alert-text::before {
  background-image: url('../../images/icon_error.svg');
  width: 17px;
  height: 17px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(67%) saturate(1896%) hue-rotate(316deg) brightness(89%) contrast(95%);
}

/* =========================================
   breadcrumbs（パンくずリスト）
   ========================================= */
.breadcrumbs {
  margin-top: 28px;
}
.breadcrumbs-list {
  display: flex;
  list-style: none;
  padding: 0;
  font-size: 14px;
  color: var(--color-text-tertiary);
}
.breadcrumbs-item + .breadcrumbs-item::before {
  content: ">";
  margin: 0 12px;
}
.breadcrumbs-item a {
  color: inherit;
  text-decoration: none;
}
/* ==========================================
   pagination
   ========================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
}
.pagination__btn {
  background: transparent;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.pagination__btn.is-current,
.pagination__btn:hover{
  background-color: #333;
}
.pagination__arrow {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}

/* =========================================
   label-summary（クライアント名・クライアント名パーツ）
   ========================================= */
.label-summary { 
  display: flex;
  background: #242424;
  border: 1px solid #37393D;
  border-radius: 10px;
  overflow: hidden;
}
.label-summary__item { 
  flex: 1;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.label-summary__item:first-child { 
  border-right: 1px solid #37393D;
}
.label-summary__label {
  display: flex;
  align-items: center;
  gap:6px;
  border-right: 1px solid #37393D;
  color: var(--color-text-secondary);
  font-size: 15px;
  padding-right: 16px;
  white-space: nowrap;
}
.label-summary__value {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .label-summary { 
    flex-direction: column;
      align-items: stretch;
  }
  .label-summary__item { 
    flex-direction: column;
      align-items: stretch;
  }
  .label-summary__item:first-child { 
    border: none;
    border-bottom: 1px solid #37393D;
  }
  .label-summary__label {
    border: none;
  }
}

/* =========================================
   data-count（入力件数・アーカイブ件数）
   ========================================= */
.data-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
}
.data-count__label {
  font-size: 22px;
  font-weight: normal;
}
.data-count__value {
  color: var(--color-text-tertiary);
  font-size: 15px;
  font-weight: normal;
  margin-left: 1em
}


/* =========================================
   tooltip(エラーパターン 02)
   ========================================= */
.has-tooltip {
  position: relative;
  display: inline-block;
}
.tooltip-trigger {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tooltip-trigger::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  z-index: 1;
}
.error-tooltip {
  display: none;
  position: absolute;
  top: -15px;
  right: -25px;
  width: 320px;
  background-color: #262626;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.tooltip-trigger:hover + .error-tooltip,
.error-tooltip:hover {
  display: block;
}
.error-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 15px;
  background: transparent;
}
@media screen and (max-width: 767px) {
  .error-tooltip {
    transform: translateX(0);
  }
}
.error-tooltip__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px 10px;
  border-bottom: 1px solid var(--color-border-primary);
}
.error-tooltip__title {
  font-size: 14px;
  color: var(--color-text-primary);
}
.error-tooltip__close {
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.error-tooltip__body {
  padding: 16px 22px;
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.5;
}
/* =========================================
   modal 警告ポップアップ（モーダル）
   ========================================= */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3.5px); 
  -webkit-backdrop-filter: blur(3.5px); /* Safari対応 */
}
.modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  background-color: #26282A;
  border-radius: 12px;
  padding: 48px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.modal__content {
  text-align: center;
}
.modal__message {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}
.modal__message--left{
  text-align: left;
}
.modal__message.is-alert {
  color: #e35d6a;
}
.modal__sub-message {
  color: var(--color-text-primary);
  margin-bottom: 24px;
}
.modal__status-box {
  background-color: var(--color-bg-sub);
  color: var(--color-text-primary);
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 32px;
  display: inline-block;
  width: 80%;
}
.modal__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.modal__form-body {
  text-align: left
}
.modal__divider {
  border: none;
  border-top: 1px solid #3d3f41;
  margin: 15px 0;
}
.modal__form-item{}
.modal__select-container{
  appearance: none;
  margin-bottom: 10px;
}
/* 行レイアウト */
.modal__form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.modal__form-field {
  flex: 1;
  gap:8px
}
.modal__form-field.is-group {
  display: flex;
}
.modal__form-field.is-group .modal__input:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.modal__form-field.is-group .modal__input:last-child {
  border-radius: 0 6px 6px 0;
}
.modal__add-action {
  margin-top: 12px;
}
.modal__form-row .icon-action{
  width: 44px;
  height: 44px;
}

/* =========================================
   accordion（重複住所の調整・宛名ラベルの作成）
   ========================================= */
.accordion { 
  background: transparent;
  border: 1px solid #37393D;
  border-radius: 10px;
  overflow: hidden;
}
.accordion__header {
  width: 100%; 
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none; 
  border: none; 
  cursor: pointer;
  outline: none;
}
.accordion__title {
  display: flex;
  align-items: center;
  color: var(--color-text-primary);
  font-size: 22px;
  font-weight: normal;
  gap: 10px;
}
.accordion__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; 
  height: 38px;
  background-color: #121212;
  border-radius: 6px;
  flex-shrink: 0;
}
.accordion__icon-container img {
  display: block;
  object-fit: contain;
}
.accordion__arrow::after {
  content: ''; 
  display: block;
  width: 10px; 
  height: 10px;
  border-right: 3px solid #666;
  border-bottom: 3px solid #666;
  transform: rotate(45deg);
  transition: 0.3s;
}
.accordion__body {
  display: none;
  padding: 0 25px 25px;
}
.accordion.is-open > .accordion__body {
  display: block;
}
.accordion.is-open > .accordion__header .accordion__arrow::after {
  transform: rotate(-135deg);
}
.js-accordion-trigger * {
  pointer-events: none;
}


/* =========================================
   edit-grid（宛名ラベルの作成＜宛名ラベル編集）
   ========================================= */
.edit-grid { 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.edit-card-link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.edit-card { 
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 8px;
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 13px; 
  text-align: center;
}
.edit-card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 22px 22px;
  border-color: transparent transparent transparent transparent;
}
/* 各カラーバリエーション */
.edit-card--blue { background: #1F2836; color: #00A7FE; }
.edit-card--blue::after { border-color: transparent transparent #06689B transparent; }
.edit-card--red { background: #362023;  color: #FF7174; }
.edit-card--red::after { border-color: transparent transparent #943844 transparent; }
.edit-card--purple { background: #2B2436; color: #CD88EF; }
.edit-card--purple::after { border-color: transparent transparent #66397D transparent; }
.edit-card--emerald { background: #122729; color: #08B49D; }
.edit-card--emerald::after { border-color: transparent transparent #0F6A57 transparent; }
.edit-card--orange { background: #33261C; color: #E8A43F; }
.edit-card--orange::after { border-color: transparent transparent #80572B transparent; }
.edit-card--navy { background: #272930; color: #ABB9C6; }
.edit-card--navy::after { border-color: transparent transparent #5A6077 transparent; }

@media screen and (max-width: 767px) {
  .edit-grid { 
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =========================================
   page-top
   ========================================= */
.page-top {
  position: fixed;
  right: 24px;
  bottom: 44px;
  width: 84px;
  height: 84px;
  background-color: rgba(224,224,224,0.6);
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
.page-top:hover {
  background-color: #c0c0c0
}
.page-top__icon {
  position: relative;
  width: 24px;
  height: 16px;
  margin-bottom: 8px;
}
.page-top__icon::before,
.page-top__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 3px;
  background-color: #333333;
  border-radius: 2px;
}
.page-top__icon::before {
  left: 0;
  transform: rotate(-45deg);
}
.page-top__icon::after {
  right: 0;
  transform: rotate(45deg);
}
.page-top__text {
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.05em;
}