@charset "UTF-8";

/* =========================================
   Button Component
   ========================================= */
/* --- 基本スタイル --- */
.btn {
  position: relative; 
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  border: none;
  border-radius: 9999px; 
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  line-height: 1; 
  transition: all 0.3s ease;
  box-sizing: border-box;
  padding: 0 24px;

  --btn-height: 45px;
  --btn-font-size: 16px;
  --btn-bg: #ccc;
  --btn-color: #fff;
  --btn-border: transparent;
  
  height: var(--btn-height);
  font-size: var(--btn-font-size);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
}
.btn:hover {
  opacity: 0.9;
}

.btn__icon--far-right {
  position: absolute;
  right: 24px; 
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25em;
}
.btn__icon--far-left {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25em;
}

/* =========================================
   Size Modifiers 
   ========================================= */
.btn--lang-ja {
  --btn-font-size: 15px;/* 英字とサイズ感を合わせるため日本語は1px小さく指定 */
}

/* =========================================
   Color Modifiers
   ========================================= */
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-color: #fff;
  --btn-border: var(--color-accent);
}
.btn--primary:hover{
  --btn-bg: #007FFE;
}
.btn--secondary {
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: #37393D;
}
.btn--tertiary {
  --btn-bg: #37393D;
  --btn-color: #fff;
  --btn-border: #37393D;
}
.btn--outline-gray {
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: #aaa;
}
.btn--outline-darkgray {
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: #37393D;
}
.btn--outline-heavy {
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: #777;
  border: 2px solid var(--btn-border);
}
.btn--danger {
  --btn-bg: #d32f2f;
  --btn-color: #fff;
  --btn-border: #d32f2f;
}
.btn--delete {
  --btn-bg: transparent;
  border: 1px solid #943844;
}
.btn--outline-gray:hover,
.btn--outline-darkgray:hover,
.btn--outline-heavy:hover,
.btn--delete:hover{
  --btn-bg: #333;
}
.btn:disabled{
  --btn-bg: #37393D;
  --btn-color: #5E5E5E;
  border: none;
}
.btn:disabled .svg-icon{
  filter: brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(5439%) hue-rotate(330deg) brightness(79%) contrast(86%);
}

/* addボタン（+追加ボタン）クライアント管理_設定値モーダル内 */
.btn-add {
  height: 44px;
  background: #3d3f41;
  border-radius: 5px;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
/* --- btn-data （データ種別ボタン zip, pdf, xlsx） 
　使用table：archive-table/res-table --- */
.btn-data {
  display: inline-flex;
  align-items: center;
  padding: 10px 8px 10px 32px;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  position: relative;
  min-width: 68px;
  transition: all 0.3s ease;
}
.btn-data::before {
  content: "";
  position: absolute;
  top:50%;
  left: 13px;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
.btn-data--zip { 
  background-color: #0B4379;
  padding-left: 36px
}
.btn-data--zip::before {
  background-image: url('../../images/icon_file_zip_blue.svg');
  width: 18px;
  height: 14px;
}
.btn-data--zip:hover { background: #0655A4; }

.btn-data--pdf { background-color: #D42246; }
.btn-data--pdf::before { 
  background-image: url('../../images/icon_file_pdf.svg');
  width: 16px;
  height: 16px;
}
.btn-data--pdf:hover { background: #DF3054; }

.btn-data--xlsx { background-color: #0F6A57; }
.btn-data--xlsx::before { 
  background-image: url('../../images/icon_file_xlsx.svg');
  width: 14px;
  height: 17px;
}
.btn-data--xlsx:hover { background: #11886F; }

.btn-data--zip-orange { 
  background-color: #D68205;
  padding-left: 36px
}
.btn-data--zip-orange::before { 
  background-image: url('../../images/icon_file_zip.svg');
  width: 18px;
  height: 14px;
}
.btn-data--zip-orange:hover { background: #E89822; }

/* --- icon-action （複製・編集・削除ボタン） 
　使用table：client-table --- */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.icon-action::before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  transition: background-image 0.2s ease;
}
.icon-action--copy {
  background-color: #0F6A57;
  border: 1px solid #0F6A57;
}
.icon-action--copy::before { 
  background-image: url('../../images/icon_copy.svg');
  width: 15px;
  height: 18px;
}
.icon-action--copy:hover {
  background-color: #15856E;
  border-color: #15856E;
}

.icon-action--edit {
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.icon-action--edit::before { 
  background-image: url('../../images/icon_pencil.svg');
  width: 16px;
  height: 16px;
}
.icon-action--edit:hover {
  background-color: #007FFE;
  border-color: #007FFE;
}
.icon-action--delete {
  background-color: transparent;
  border: 1px solid #943844;
}
.icon-action--delete::before { 
  background-image: url('../../images/icon_delete.svg');
  width: 16px;
  height: 18px;
}
.icon-action--delete:hover {
  background-color: #CF3B40;
  border-color: #CF3B40;
}
.icon-action--delete:hover::before {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(11%) hue-rotate(240deg) brightness(103%) contrast(105%);
}

/* --- btn-abort （実行を中断する）一括アップロード タスク実行中の箇所 --- */
.btn-abort {
  flex-shrink: 0;
  background: #fff;
  color: #007bff;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline
}
/* 一括アップロード 実行を中断の箇所 */
.btn-abort:disabled{
  background: transparent;
  color: var(--color-text-tertiary);
}

/* --- btn-result（結果リスト） 一括アップロード 読み込み後の箇所など--- */
.btn-result {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #20603E;
  background: transparent;
  color: #fff;
  font-size: 13px;
  padding: 8px 8px;
  border-radius: 4px;
}
.btn-result::before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../../images/icon_list_info.svg');
  width: 15px;
  height: 15px;
}
.btn-result:disabled{
  background: #37393D;
  color: var(--color-text-tertiary);
  border: none;
}
.btn-result:disabled::before {
  content: "";
  filter: brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(5439%) hue-rotate(330deg) brightness(79%) contrast(86%);
}
@media screen and (max-width: 767px) {
  .btn-result {
    order: 3;
    width: 100%;
    max-width: 160px;
    justify-content: center;
    margin-left: 0;
    margin-top: 4px;
    padding: 10px;
  }
}
/* =========================================
   Layout Utilities 
   ========================================= */
.button-list-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px; 
}
.btn-group-row {
  display: flex; 
  gap: 12px;
}
.btn-group-row > .btn {
  width: auto; 
  flex-grow: 1; 
}
.btn--width-auto {
  width: auto;
  max-width: none;
  flex-shrink: 0;
}
.btn-linkgroup-row{
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* =========================================
   Layout Component (.bottom-btn-area)
   ========================================= */
.bottom-btn-area {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.bottom-btn-area .btn {
  width: 320px;
  max-width: 100%;
}
.bottom-btn-area__left {
  grid-column: 1;
  justify-self: start;
}
.bottom-btn-area__center {
  grid-column: 2;
  justify-self: center;
}
.bottom-btn-area__right {
  grid-column: 3;
  justify-self: end
}
/*ボタン内テキスト調整用*/
.btn__text--adjust-y{
  position: relative;
  top: 1px;
}

@media (max-width: 767px) {
  .bottom-btn-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .bottom-btn-area .btn {
    width: 100%;
  }
}