:root {
  --brand:#1268b3; --brand-dark:#0c4f8c; --accent:#ef731e;
  --bg:#f4f7fb; --card:#fff; --text:#243447; --muted:#6b7a8c;
  --line:#dce4ee; --success:#16844f; --danger:#c43b3b;
  --shadow:0 10px 30px rgba(36,52,71,.08); --radius:18px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;line-height:1.6}
button,input,textarea,select{font:inherit}
.page{width:min(1040px,calc(100% - 32px));margin:28px auto 64px}
.preflight-notice{display:flex;gap:16px;padding:20px 22px;margin-bottom:20px;border:1px solid #bcd7ed;border-left:5px solid var(--brand);border-radius:14px;background:#f5faff}
.preflight-notice h1{margin:0 0 8px;font-size:20px;color:var(--brand-dark)}
.preflight-notice ul{margin:0;padding-left:1.2em;color:#42566c}
.preflight-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--brand);font-weight:900}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
.step{border:1px solid var(--line);border-radius:12px;padding:12px 8px;background:#fff;color:var(--muted);font-weight:800;cursor:pointer}
.step span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-right:5px;background:#eaf3fb}
.step.active{border-color:var(--brand);color:var(--brand);box-shadow:0 6px 18px rgba(18,104,179,.12)}
.step:disabled{cursor:not-allowed;opacity:.55}
.step-panel{display:none}
.step-panel.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.step-heading{margin-bottom:18px}
.step-heading h2{margin:0;font-size:28px}
.step-heading p{margin:4px 0 0;color:var(--muted)}
.step-kicker{margin:0!important;color:var(--brand)!important;font-weight:900;font-size:13px;letter-spacing:.08em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-bottom:20px}
.group-card>h3{margin:0 0 18px;font-size:20px;color:var(--brand-dark)}
.product-type-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.product-type-card{position:relative}
.product-type-card input{position:absolute;opacity:0}
.product-type-card label{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:128px;padding:22px;border:2px solid var(--line);border-radius:18px;background:#fff;cursor:pointer;transition:.18s}
.product-type-card label:hover{border-color:#8bbce1;transform:translateY(-2px);box-shadow:var(--shadow)}
.product-type-card input:checked+label{border-color:var(--brand);background:#edf7ff;box-shadow:0 0 0 4px rgba(18,104,179,.1)}
.product-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:#eaf3fb;font-size:30px}
.product-title{display:block;font-size:20px;font-weight:900;color:var(--brand-dark)}
.product-description{display:block;color:var(--muted);font-size:13px}
.product-format{padding:5px 10px;border-radius:999px;background:#e8edf3;font-size:12px;font-weight:800}
.product-check,.choice-check{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--success);color:#fff;font-weight:900;opacity:0}
.product-type-card input:checked+label .product-check,.choice input:checked+label .choice-check{opacity:1}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.choice{position:relative}
.choice input{position:absolute;opacity:0}
.choice label{position:relative;display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:120px;padding:16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}
.choice input:checked+label{border-color:var(--brand);background:#f1f8fe;box-shadow:0 0 0 3px rgba(18,104,179,.08)}
.choice-title{font-weight:900}.choice-meta{color:var(--muted);font-size:13px}
.size-visual{grid-row:1/3;justify-self:center;display:block;border:2px solid #7f9bb2;border-radius:3px;background:linear-gradient(135deg,#fff,#e8eef4);box-shadow:0 3px 8px rgba(36,52,71,.12)}
.mode-hidden{display:none!important}
.subsection{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}.subsection.no-top{margin-top:0;padding-top:0;border-top:0}
.subsection h4{margin:0 0 12px}
.toggle-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative}.pill input{position:absolute;opacity:0}.pill label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:800}.pill input:checked+label{color:#fff;background:var(--brand);border-color:var(--brand)}
.upload-guide{margin-bottom:14px;padding:18px;border:1px solid #cbdceb;border-radius:14px;background:#f8fbfe}
.upload-guide-main{display:flex;gap:14px;align-items:center}.upload-guide-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--brand);color:#fff;font-size:26px;font-weight:900}.upload-guide-main strong{display:block;font-size:17px;color:var(--brand-dark)}.upload-guide-main p{margin:2px 0 0;color:var(--muted)}
.upload-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:#52677b;font-size:13px}
.format-notice{margin-top:12px;padding:14px 16px;border:1px solid #bcd7ed;border-radius:12px;background:#f1f8fe;color:#234d70;font-size:14px}.format-notice strong{display:block;margin-bottom:4px}
.filepond--panel-root{background:#f6faff;border:2px dashed #88b7db}.filepond--file{background:#36566f}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:800;font-size:14px}
.required{margin-left:7px;padding:1px 6px;border-radius:5px;background:#fff0f0;color:var(--danger);font-size:11px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],textarea,select{width:100%;min-height:48px;padding:11px 13px;border:1px solid #cfd9e5;border-radius:10px;background:#fff;color:var(--text);outline:none}
textarea{min-height:120px;resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,104,179,.1)}
.inline-field{display:flex;align-items:center;gap:10px}.inline-field input{max-width:160px}
.summary-box{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.summary-item{padding:16px;border-radius:13px;background:#f4f9fd;border:1px solid #d8eaf7}.summary-item span{display:block;color:var(--muted);font-size:13px}.summary-item strong{font-size:26px;color:var(--brand-dark)}
.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.check-list label{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:11px;cursor:pointer}
.conditional{display:none}.conditional.show{display:block}
.copy-address-check{display:flex;gap:12px;align-items:center;padding:15px 16px;border:1px solid #bcd7ed;border-radius:12px;background:#f5faff;cursor:pointer}.copy-address-check input{position:absolute;opacity:0}.copy-checkmark{width:30px;height:30px;display:grid;place-items:center;border:2px solid #9fb7ca;border-radius:8px;color:transparent;background:#fff;font-weight:900}.copy-address-check input:checked+.copy-checkmark{background:var(--brand);border-color:var(--brand);color:#fff}.copy-address-check small{display:block;color:var(--muted);font-weight:400}
.delivery-address{margin-top:18px}
.field-error{min-height:18px;color:var(--danger);font-size:13px;font-weight:700}.notice-error:empty{display:none}.notice-error{margin-top:12px;padding:10px 12px;border:1px solid #efb4b4;border-radius:10px;background:#fff5f5}
.is-invalid{border-color:var(--danger)!important;background:#fff8f8!important}
.error-summary{margin:0 0 20px;padding:16px 18px;border:1px solid #e3a2a2;border-left:5px solid var(--danger);border-radius:12px;background:#fff5f5}.error-summary strong{color:#8d2525}.error-summary p{margin:3px 0 0;color:#734242}
.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.btn{border:0;border-radius:12px;padding:13px 22px;font-weight:900;cursor:pointer}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--accent),#ef6f1a);box-shadow:0 7px 18px rgba(239,111,26,.22)}.btn-secondary{background:#e9eef3;color:var(--text)}
.confirm-card{padding:0;overflow:hidden}.confirm-section{padding:22px 26px;border-bottom:1px solid var(--line)}.confirm-section:last-child{border-bottom:0}.confirm-head{display:flex;justify-content:space-between;align-items:center}.confirm-head h3,.confirm-section h3{margin:0 0 12px}.confirm-section dl{display:grid;grid-template-columns:180px 1fr;gap:8px 18px;margin:0}.confirm-section dt{color:var(--muted)}.confirm-section dd{margin:0;font-weight:700;word-break:break-word}.text-button{border:0;background:none;color:var(--brand);font-weight:800;cursor:pointer}.confirm-notice{background:#fffaf4}
.complete-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:42px}.complete-icon{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--success);color:#fff;font-size:38px;font-weight:900}.complete-card h2{margin:0 0 24px}.complete-details{width:min(680px,100%);margin:0 auto;text-align:left}.complete-details>div{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:14px 0;border-top:1px solid var(--line)}.complete-details dt{color:var(--muted)}.complete-details dd{margin:0;font-weight:700}
@media(max-width:800px){.steps{grid-template-columns:1fr}.step:not(.active){display:none}.product-type-selector,.choice-grid,.field-grid,.summary-box,.check-list{grid-template-columns:1fr}.upload-rules{grid-template-columns:1fr}.step-actions{flex-direction:column-reverse}.step-actions .btn{width:100%}.confirm-section dl,.complete-details>div{grid-template-columns:1fr;gap:2px}.card{padding:20px}.page{width:min(100% - 20px,1040px)}}


/* ===== v2 refinements ===== */

/* ステータス: 角丸を抑えた四角形 */
.step {
  border-radius: 2px;
  min-height: 58px;
}
.step span {
  border-radius: 2px;
}

/* ボタンも四角形寄り */
.btn {
  border-radius: 5px;
}

/* 注意事項は STEP1 内、ステータス直下 */
.step-panel[data-step="1"] > .preflight-notice {
  margin-top: 0;
  margin-bottom: 22px;
}

/* 入力項目と表示専用項目を明確に区別 */
.display-field {
  min-height: 82px;
  padding: 12px 16px;
  border: 1px solid #d7dfe7;
  border-radius: 4px;
  background: #eef2f6;
}
.display-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.display-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.display-value strong {
  color: var(--brand-dark);
  font-size: 26px;
}
.summary-item {
  border-radius: 4px;
  background: #eef2f6;
  border-color: #d7dfe7;
}
.summary-box-single {
  grid-template-columns: minmax(260px, 1fr);
  max-width: 480px;
}

/* 袋詰め入力と計算結果を横並び */
.packing-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
  gap: 16px;
  align-items: end;
}
.condition-note {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* 入力部品も少し四角形寄り */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=date],
textarea,
select {
  border-radius: 5px;
}
.pill label,
.check-list label,
.copy-address-check,
.format-notice,
.upload-guide {
  border-radius: 6px;
}

/* 表示専用確認画面もフラット寄り */
.confirm-card,
.complete-card,
.card {
  border-radius: 8px;
}

@media (max-width:800px) {
  .packing-count-row {
    grid-template-columns: 1fr;
  }
}


/* ===== v3 refinements ===== */
.confirm-section dl#confirmCustomer {
  grid-template-columns: 180px 1fr;
}
.confirm-subtitle {
  grid-column: 1 / -1;
  margin: 14px 0 4px;
  padding: 8px 10px;
  border-left: 4px solid var(--brand);
  background: #f3f6f9;
  color: var(--brand-dark);
  font-weight: 900;
}
.confirm-subtitle:first-child { margin-top: 0; }

@media (max-width:800px) {
  .confirm-section dl#confirmCustomer { grid-template-columns: 1fr; }
  .confirm-subtitle { grid-column: 1; }
}


/* ===== maintenance v2 ===== */
.step-panel[data-step="1"] > .preflight-notice {
  display:flex;
  border:1px solid #bcd7ed;
  border-left:5px solid var(--brand);
  border-bottom:1px solid #bcd7ed;
  margin-bottom:22px;
}
#billing_postal_code,
#delivery_postal_code {
  ime-mode: disabled;
}


/* ===== maintenance v3 ===== */

/* 「ご入力前にご確認ください」を受付データ案内と同じシンプルな枠へ */
.step-panel[data-step="1"] > .preflight-notice {
  display: block;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid #bcd7ed;
  border-radius: 6px;
  background: #f1f8fe;
  color: #234d70;
}

.step-panel[data-step="1"] > .preflight-notice .preflight-icon {
  display: none;
}

.step-panel[data-step="1"] > .preflight-notice h1 {
  margin: 0 0 6px;
  color: #234d70;
  font-size: 14px;
  font-weight: 800;
}

.step-panel[data-step="1"] > .preflight-notice ul {
  margin: 0;
  padding-left: 1.25em;
  color: #234d70;
  font-size: 14px;
}

/* モバイルでもSTEP1～5を常時表示 */
@media (max-width:800px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .step,
  .step:not(.active) {
    display: flex;
  }

  .step {
    min-width: 0;
    min-height: 48px;
    padding: 6px 2px;
    border-radius: 2px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .step span {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 20px;
    font-size: 11px;
  }

  .step.active {
    box-shadow: inset 0 -3px 0 var(--brand);
  }
}

@media (max-width:480px) {
  .page {
    width: calc(100% - 12px);
  }

  .steps {
    gap: 2px;
  }

  .step {
    min-height: 46px;
    padding-inline: 1px;
    font-size: 8px;
  }

  .step span {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 10px;
  }
}


/* ===== FilePond thumbnail / phase2 history ===== */
.filepond--item { min-height: 72px; }
.filepond--file { min-height: 64px; }
.filepond--file-info { margin-left: 66px; }
.filepond--image-preview-wrapper,
.filepond--image-preview { border-radius: 4px; }
.filepond--file-poster img { object-fit: cover; }

.history-page { width:min(1100px,calc(100% - 32px)); margin:34px auto 64px; flex:1; }
.history-heading { margin-bottom:20px; }
.history-heading h1 { margin:4px 0 6px; color:var(--brand-dark); }
.history-table-wrap { overflow-x:auto; border:1px solid var(--line); background:#fff; }
.history-table { width:100%; border-collapse:collapse; min-width:760px; }
.history-table th,.history-table td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.history-table th { background:#f3f6f9; color:#486175; font-size:13px; }
.history-row { cursor:pointer; }
.history-row:hover,.history-row:focus { background:#f7fbfe; outline:none; }
.history-case { color:var(--brand); font-weight:900; text-decoration:none; }
.history-empty { padding:32px 20px; text-align:center; color:var(--muted); }
.status-badge { display:inline-flex; align-items:center; padding:5px 10px; border:1px solid #9db7ca; background:#eef5fa; color:#274e6d; font-weight:900; font-size:12px; }
.status-badge.status-received { background:#edf6ff; border-color:#91bce0; color:#175984; }
.status-badge.status-checking { background:#fff8e8; border-color:#e0bd68; color:#795a0d; }
.status-badge.status-quoted { background:#f2efff; border-color:#b8a8e5; color:#57418e; }
.status-badge.status-ordered { background:#edf9f1; border-color:#91c5a3; color:#20683a; }
.status-badge.status-cancelled { background:#f5f5f5; border-color:#b8b8b8; color:#555; }
.status-badge.status-completed { background:#eaf8f6; border-color:#82c5bb; color:#17695e; }
.case-status-panel { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.55fr) minmax(190px,.55fr); gap:0; margin:0 0 22px; border:2px solid var(--brand); background:#fff; }
.case-status-cell { padding:16px 18px; border-right:1px solid #c9d8e3; }
.case-status-cell:last-child { border-right:0; }
.case-status-label { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:800; }
.case-status-value { color:var(--brand-dark); font-size:20px; font-weight:900; }
.case-status-value.case-number { font-size:25px; letter-spacing:.03em; }
.history-detail .confirm-head { padding-right:0; }
.history-detail .confirm-head h3 { margin-right:auto; }
.history-files { margin:0; padding-left:22px; }
.history-files li { margin:7px 0; }
.history-file-meta { color:var(--muted); font-size:12px; }
.status-history-list { margin:0; padding:0; list-style:none; }
.status-history-list li { display:grid; grid-template-columns:150px 130px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.status-history-list li:last-child { border-bottom:0; }
.status-history-time { color:var(--muted); font-size:13px; }
@media(max-width:800px){
  .history-page{width:calc(100% - 20px);margin-top:24px}
  .case-status-panel{grid-template-columns:1fr}
  .case-status-cell{border-right:0;border-bottom:1px solid #c9d8e3}
  .case-status-cell:last-child{border-bottom:0}
  .status-history-list li{grid-template-columns:1fr;gap:4px}
}


/* ===== STEP1 FilePond bar thumbnail fix ===== */
.filepond--item .filepond--file {
  position: relative;
  min-height: 70px;
  padding-left: 78px;
}

.filepond--item .bizentry-file-thumb {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 3px;
  background: #fff;
  pointer-events: none;
  z-index: 5;
}

.filepond--item .filepond--file-info {
  margin-left: 0;
  min-width: 0;
}

.filepond--item .filepond--file-status {
  margin-left: 8px;
}

@media (max-width: 640px) {
  .filepond--item .filepond--file {
    min-height: 62px;
    padding-left: 68px;
  }

  .filepond--item .bizentry-file-thumb {
    left: 8px;
    width: 46px;
    height: 46px;
  }
}


/* ===== Approved UI refinement / 2026-08-21 ===== */
/* FilePond: 成功時も濃いブルー一色。標準プレビューは重複するので非表示。 */
.filepond--file,
.filepond--item[data-filepond-item-state] .filepond--file,
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--file,
.filepond--item[data-filepond-item-state="processing"] .filepond--file,
.filepond--item[data-filepond-item-state="idle"] .filepond--file {
  background: #0c5eaa !important;
  background-image: none !important;
}
.filepond--image-preview-wrapper,
.filepond--image-preview,
.filepond--image-preview-overlay,
.filepond--file-poster { display:none !important; opacity:0 !important; }
.filepond--item .bizentry-file-thumb { display:block !important; }

/* 履歴画面も通常画面と同じ最大幅に統一 */
.history-page {
  width: min(1040px, calc(100% - 32px));
  margin: 28px auto 64px;
}
.history-table-wrap,
.history-detail .confirm-card,
.history-detail > .card,
.case-status-panel { width:100%; max-width:100%; }
.history-table { min-width: 760px; }

/* 詳細上部: ラベルと値を同一行で明確に分離 */
.case-status-panel {
  grid-template-columns: 1fr 1fr 1fr;
  border:1px solid #a9c9e4;
  background:#f7fbff;
}
.case-status-cell {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:14px 16px;
}
.case-status-label {
  display:inline;
  flex:0 0 auto;
  margin:0;
  color:#425f78;
  font-size:13px;
}
.case-status-value,
.case-status-value.case-number {
  min-width:0;
  font-size:15px;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
.case-status-cell .status-badge { font-size:13px; }

@media(max-width:800px){
  .history-page{width:calc(100% - 20px);margin:24px auto 48px}
  .case-status-panel{grid-template-columns:1fr}
  .case-status-cell{border-right:0;border-bottom:1px solid #c9d8e3}
  .case-status-cell:last-child{border-bottom:0}
}


/* ===== history layout hotfix / 2026-08-21 v2 =====
   履歴画面も他画面と完全に同じコンテンツ幅を使用する。
   .page と併用するが、既存定義に負けないよう明示する。 */
body > main.page.history-page {
  display: block;
  flex: 0 0 auto;
  width: calc(100% - 32px) !important;
  max-width: 1040px !important;
  min-width: 0;
  margin: 28px auto 64px !important;
  padding-left: 0;
  padding-right: 0;
}
body > main.page.history-page > * {
  max-width: 100%;
}
.history-page .history-table-wrap,
.history-page .case-status-panel,
.history-page .confirm-card,
.history-page .group-card {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 800px) {
  body > main.page.history-page {
    width: calc(100% - 20px) !important;
    max-width: 1040px !important;
    margin: 24px auto 48px !important;
  }
}


/* ===== FilePond reorder thumbnail synchronization / v4 =====
   独自Object URLサムネイルを廃止し、FilePond標準Image Previewを
   各ファイル行の左側だけに表示する。
   これによりドラッグ並び替え時にファイル名と画像が同一アイテムとして移動する。
*/
.filepond--item .bizentry-file-thumb {
  display: none !important;
}

/* ファイル行は従来どおり濃いブルー一色 */
.filepond--file,
.filepond--item[data-filepond-item-state] .filepond--file,
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--file,
.filepond--item[data-filepond-item-state="processing"] .filepond--file,
.filepond--item[data-filepond-item-state="idle"] .filepond--file {
  position: relative;
  min-height: 70px;
  padding-left: 78px;
  background: #0c5eaa !important;
  background-image: none !important;
}

/* FilePond標準プレビューを中央背景ではなく左側の54pxサムネイルへ限定 */
.filepond--image-preview-wrapper {
  display: block !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  width: 54px !important;
  height: 54px !important;
  transform: translateY(-50%) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.65) !important;
}

.filepond--image-preview {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 54px !important;
  height: 54px !important;
  opacity: 1 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Image Preview Pluginが生成するcanvasをサムネイル領域内だけに収める */
.filepond--image-preview canvas {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  max-width: none !important;
  max-height: none !important;
}

/* 中央にうっすら出ていたオーバーレイ／ポスターは表示しない */
.filepond--image-preview-overlay,
.filepond--file-poster {
  display: none !important;
  opacity: 0 !important;
}

/* ファイル名はサムネイルの右側から開始 */
.filepond--item .filepond--file-info {
  margin-left: 0 !important;
  min-width: 0;
}

@media (max-width: 640px) {
  .filepond--file,
  .filepond--item[data-filepond-item-state] .filepond--file {
    min-height: 62px;
    padding-left: 68px;
  }

  .filepond--image-preview-wrapper,
  .filepond--image-preview {
    width: 46px !important;
    height: 46px !important;
  }

  .filepond--image-preview-wrapper {
    left: 8px !important;
  }
}