/* 画像ファイル名変更・一括リネーム専用UI */
body.tool-image-rename-page .rename-workspace { overflow: hidden; }
body.tool-image-rename-page .rename-step { scroll-margin-top: 24px; }
body.tool-image-rename-page .rename-step[hidden] { display: none !important; }
body.tool-image-rename-page .rename-step__heading {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
body.tool-image-rename-page .rename-step__heading--split { justify-content: space-between; gap: 20px; }
body.tool-image-rename-page .rename-step__heading-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.tool-image-rename-page .rename-step__number {
  display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center;
  border: 1px solid #edc79f; border-radius: 50%; background: #fff8f0; color: #a7501d;
  font: 800 13px/1 Arial, sans-serif; letter-spacing: .04em;
}
body.tool-image-rename-page .rename-step__eyebrow {
  margin: 0 0 3px; color: #a7501d; font: 800 13px/1.35 Arial, sans-serif; letter-spacing: .12em;
}
body.tool-image-rename-page .rename-step__heading h3 { margin: 0; font-size: clamp(18px,2vw,24px); line-height: 1.4; }

body.tool-image-rename-page .rename-drop-zone {
  display: flex; min-height: 278px; padding: 30px 20px; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed #dda263; border-radius: 5px; background: #fff8f0; text-align: center; cursor: pointer;
  transition: border-color .16s, background-color .16s, transform .16s;
}
body.tool-image-rename-page .rename-drop-zone:hover,
body.tool-image-rename-page .rename-drop-zone:focus-visible,
body.tool-image-rename-page .rename-drop-zone.is-dragover { border-color: #bd5a1d; background: #ffead3; }
body.tool-image-rename-page .rename-drop-zone.is-dragover { transform: scale(.995); }
body.tool-image-rename-page .rename-drop-zone__icon {
  display: grid; width: 66px; height: 66px; margin-bottom: 14px; place-items: center;
  border-radius: 50%; background: #fff; color: #c36020; box-shadow: 0 8px 22px rgba(111,57,22,.08);
}
body.tool-image-rename-page .rename-drop-zone__icon svg {
  width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.tool-image-rename-page .rename-drop-zone__title { margin: 0 0 4px; color: var(--gt-ink); font-size: 16px; font-weight: 800; }
body.tool-image-rename-page .rename-drop-zone__help { margin: 0 0 18px; color: var(--gt-muted); font-size: 13px; }

body.tool-image-rename-page .rename-secondary-button,
body.tool-image-rename-page .rename-text-button {
  min-height: 42px; padding: 9px 16px !important; border: 1px solid #d7c3b0 !important; border-radius: 3px !important;
  background: #fff !important; color: var(--gt-ink) !important; font-size: 13px; font-weight: 750;
}
body.tool-image-rename-page .rename-secondary-button:hover,
body.tool-image-rename-page .rename-text-button:hover { background: #fff1e1 !important; border-color: #c5783d !important; }
body.tool-image-rename-page .rename-status { min-height: 1.7em; margin: 12px 0 0; color: var(--gt-muted); font-size: 13px; text-align: center; }
body.tool-image-rename-page .rename-status.is-error { color: #a52621; font-weight: 700; }
body.tool-image-rename-page .rename-status.is-success { color: #436c2b; font-weight: 700; }

body.tool-image-rename-page .rename-guide {
  display: flex; margin: 0 0 18px; padding: 14px 16px; flex-direction: column; gap: 3px;
  border-left: 4px solid #d97724; background: #fff7ed; color: var(--gt-ink-soft); font-size: 13px; line-height: 1.75;
}
body.tool-image-rename-page .rename-guide strong { color: var(--gt-ink); font-size: 14px; }
body.tool-image-rename-page .rename-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
body.tool-image-rename-page .rename-presets button {
  min-height: 48px; padding: 9px 12px; border: 1px solid #dbcfc4; border-radius: 3px; background: #fff;
  color: var(--gt-ink-soft); font: 750 13px/1.45 inherit; cursor: pointer; transition: .16s;
}
body.tool-image-rename-page .rename-presets button:hover { border-color: #cb8b55; background: #fff8f0; }
body.tool-image-rename-page .rename-presets button[aria-pressed="true"] { border-color: var(--gt-ink); background: var(--gt-ink); color: #fff; }

body.tool-image-rename-page .rename-template-card { padding: 22px; border: 1px solid var(--gt-line); border-radius: 4px; background: #fffaf5; }
body.tool-image-rename-page .rename-field { display: grid; min-width: 0; gap: 7px; align-content: start; align-self: start; }
body.tool-image-rename-page .rename-field__label { color: var(--gt-ink); font-size: 13px; font-weight: 750; }
body.tool-image-rename-page .rename-field input[type="text"],
body.tool-image-rename-page .rename-field input[type="number"],
body.tool-image-rename-page .rename-field select,
body.tool-image-rename-page .rename-list-tools select {
  width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid #cfc6be; border-radius: 3px;
  background: #fff; color: var(--gt-ink); font-size: 16px; line-height: 1.4;
}
body.tool-image-rename-page .rename-field input:focus,
body.tool-image-rename-page .rename-field select:focus,
body.tool-image-rename-page .rename-list-tools select:focus { border-color: #b95d22; outline: 3px solid rgba(217,119,36,.16); outline-offset: 1px; }
body.tool-image-rename-page .rename-field small { color: var(--gt-muted); font-size: 13px; line-height: 1.55; }
body.tool-image-rename-page #rename-template { font-family: Consolas,Monaco,monospace; font-weight: 700; }
body.tool-image-rename-page .rename-token-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; color: var(--gt-muted); font-size: 13px; }
body.tool-image-rename-page .rename-token-list button {
  padding: 5px 8px; border: 1px solid #dbc2a8; border-radius: 999px; background: #fff; color: #914719;
  font: 700 13px/1.25 Consolas,Monaco,monospace; cursor: pointer;
}
body.tool-image-rename-page .rename-token-list button:hover { border-color: #b95d22; background: #ffedda; }
body.tool-image-rename-page .rename-template-example {
  display: flex; margin: 15px 0 0; padding: 11px 13px; align-items: center; gap: 10px; border-radius: 3px; background: #2b2826; color: #fff;
}
body.tool-image-rename-page .rename-template-example span { flex: 0 0 auto; color: #f7b775; font-size: 13px; font-weight: 800; }
body.tool-image-rename-page .rename-template-example code { min-width: 0; color: #fff; font-size: 13px; overflow-wrap: anywhere; }
body.tool-image-rename-page .rename-template-example.is-error { background: #802b27; }

body.tool-image-rename-page .rename-template-help { margin-top: 13px; border-top: 1px solid #e2d6ca; }
body.tool-image-rename-page .rename-template-help summary,
body.tool-image-rename-page .rename-advanced summary {
  position: relative; padding: 15px 36px 10px 0; color: #8f4618; font-size: 13px; font-weight: 750; cursor: pointer; list-style: none;
}
body.tool-image-rename-page .rename-template-help summary::-webkit-details-marker,
body.tool-image-rename-page .rename-advanced summary::-webkit-details-marker { display: none; }
body.tool-image-rename-page .rename-template-help summary::after,
body.tool-image-rename-page .rename-advanced summary::after { content: "+"; position: absolute; top: 50%; right: 8px; transform: translateY(-38%); font-size: 23px; font-weight: 300; }
body.tool-image-rename-page .rename-template-help[open] summary::after,
body.tool-image-rename-page .rename-advanced[open] summary::after { content: "−"; }
body.tool-image-rename-page .rename-template-help__body { padding: 7px 0 1px; }
body.tool-image-rename-page .rename-template-help dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 16px; margin: 0; }
body.tool-image-rename-page .rename-template-help dl > div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: baseline; }
body.tool-image-rename-page .rename-template-help dt { color: #8f4618; font: 700 13px/1.5 Consolas,Monaco,monospace; }
body.tool-image-rename-page .rename-template-help dd { margin: 0; color: var(--gt-ink-soft); font-size: 13px; line-height: 1.65; }
body.tool-image-rename-page .rename-template-help__body > p { margin: 11px 0 0; color: var(--gt-muted); font-size: 13px; }
body.tool-image-rename-page .rename-template-help code,
body.tool-image-rename-page .rename-advanced code { color: #8f4618; font-size: 13px; }

body.tool-image-rename-page .rename-basic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
body.tool-image-rename-page .rename-advanced { margin-top: 14px; border: 1px solid var(--gt-line); border-radius: 4px; background: #fff; }
body.tool-image-rename-page .rename-advanced > summary { padding: 17px 50px 17px 18px; color: var(--gt-ink); }
body.tool-image-rename-page .rename-advanced > summary::after { right: 20px; }
body.tool-image-rename-page .rename-advanced__body { padding: 0 18px 19px; border-top: 1px solid #eee5dc; }
body.tool-image-rename-page .rename-advanced .rename-basic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.tool-image-rename-page .rename-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
body.tool-image-rename-page .rename-checks label { display: inline-flex; align-items: center; gap: 8px; color: var(--gt-ink-soft); font-size: 13px; cursor: pointer; }
body.tool-image-rename-page .rename-checks input { width: 18px; height: 18px; accent-color: #d97724; }
body.tool-image-rename-page .rename-advanced__note { margin: 13px 0 0; color: var(--gt-muted); font-size: 13px; line-height: 1.75; }

body.tool-image-rename-page .rename-list-tools { display: flex; margin: -4px 0 15px; align-items: center; justify-content: flex-end; gap: 10px; }
body.tool-image-rename-page .rename-list-tools label { color: var(--gt-muted); font-size: 13px; font-weight: 700; }
body.tool-image-rename-page .rename-list-tools select { width: min(100%,230px); min-height: 42px; font-size: 13px; }
body.tool-image-rename-page .rename-preview-status { margin: 0 0 12px; padding: 10px 13px; background: #fff5e9; color: #854419; font-size: 13px; line-height: 1.65; }
body.tool-image-rename-page .rename-preview-status.is-error { background: #fbe9e7; color: #8c241a; font-weight: 700; }
body.tool-image-rename-page .rename-file-list { display: grid; gap: 9px; }
body.tool-image-rename-page .rename-file-row {
  display: grid; grid-template-columns: 72px minmax(0,1fr) auto; min-width: 0; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--gt-line); border-radius: 4px; background: #fffaf5;
}
body.tool-image-rename-page .rename-thumb { position: relative; display: grid; width: 72px; height: 58px; place-items: center; overflow: hidden; border: 1px solid #e4d8cc; border-radius: 3px; background: #fff; color: #a7501d; }
body.tool-image-rename-page .rename-thumb img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
body.tool-image-rename-page .rename-thumb span { position: absolute; font: 800 13px/1 Arial,sans-serif; letter-spacing: .04em; }
body.tool-image-rename-page .rename-thumb.is-unavailable img { display: none; }
body.tool-image-rename-page .rename-file-row__body { display: grid; grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr); min-width: 0; gap: 7px; align-items: center; }
body.tool-image-rename-page .rename-file-row__name-block { min-width: 0; }
body.tool-image-rename-page .rename-file-row__label { display: block; margin-bottom: 3px; color: var(--gt-muted); font-size: 13px; font-weight: 700; }
body.tool-image-rename-page .rename-file-row__name { margin: 0; color: var(--gt-ink); font-size: 13px; font-weight: 750; line-height: 1.55; overflow-wrap: anywhere; }
body.tool-image-rename-page .rename-file-row__name--new { color: #984718; }
body.tool-image-rename-page .rename-file-row__arrow { color: #c17842; font-size: 18px; text-align: center; }
body.tool-image-rename-page .rename-file-row__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 3px 0 0; color: var(--gt-muted); font-size: 13px; }
body.tool-image-rename-page .rename-file-row__meta strong { color: #a7501d; }
body.tool-image-rename-page .rename-badge { display: inline-block; padding: 2px 7px; border-radius: 99px; background: #f2dfca; color: #884117; font-size: 13px; font-weight: 750; }
body.tool-image-rename-page .rename-file-row__actions { display: grid; grid-template-columns: repeat(2,34px); gap: 5px; justify-content: end; }
body.tool-image-rename-page .rename-row-button {
  display: grid; width: 34px; height: 34px; padding: 0 !important; place-items: center; border: 1px solid #decfc1 !important; border-radius: 50% !important;
  background: #fff !important; color: #6c625a !important; font-size: 16px; line-height: 1; cursor: pointer;
}
body.tool-image-rename-page .rename-row-button:hover { border-color: #c57668 !important; background: #f9e2dc !important; color: #8c241a !important; }
body.tool-image-rename-page .rename-row-button:disabled { cursor: not-allowed; opacity: .32; }
body.tool-image-rename-page .rename-row-download { grid-column: 1 / -1; display: inline-flex; min-height: 34px; padding: 6px 9px; align-items: center; justify-content: center; border: 1px solid #d97724; border-radius: 3px; background: #fff; color: #a7501d; font-size: 13px; font-weight: 750; line-height: 1.35; text-decoration: none; white-space: nowrap; }
body.tool-image-rename-page .rename-row-download:hover { background: #d97724; color: #fff; }

body.tool-image-rename-page .rename-download-panel {
  display: flex; margin-top: 18px; padding: 18px; align-items: center; justify-content: space-between; gap: 18px; border-radius: 4px; background: #2b2826; color: #fff;
}
body.tool-image-rename-page .rename-download-panel strong { display: block; margin-bottom: 3px; font-size: 14px; }
body.tool-image-rename-page .rename-download-panel span { display: block; color: #d9d0ca; font-size: 13px; line-height: 1.65; }
body.tool-image-rename-page .rename-primary-button {
  flex: 0 0 auto; min-height: 48px; padding: 10px 20px !important; border: 1px solid #e6822f !important; border-radius: 3px !important;
  background: #d97724 !important; color: #fff !important; font-size: 14px; font-weight: 800; cursor: pointer;
}
body.tool-image-rename-page .rename-primary-button:hover { background: #b95d22 !important; border-color: #b95d22 !important; }
body.tool-image-rename-page .rename-primary-button:disabled { cursor: wait; opacity: .62; }

body.tool-image-rename-page button:focus-visible,
body.tool-image-rename-page a:focus-visible,
body.tool-image-rename-page summary:focus-visible { outline: 3px solid #d97724; outline-offset: 3px; }

body.tool-image-rename-page .rename-seo-content { margin-top: clamp(46px,7vw,86px); }
body.tool-image-rename-page .rename-content-section { padding: clamp(34px,5vw,62px) 0; border-top: 1px solid var(--gt-line); }
body.tool-image-rename-page .rename-content-kicker { margin: 0 0 8px; color: #a7501d; font: 800 13px/1.4 Arial,sans-serif; letter-spacing: .14em; }
body.tool-image-rename-page .rename-content-section > h2 { margin: 0 0 26px; color: var(--gt-ink); font-size: clamp(23px,3.2vw,38px); line-height: 1.45; letter-spacing: -.035em; }
body.tool-image-rename-page .rename-howto-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: rename-step; }
body.tool-image-rename-page .rename-howto-list li { position: relative; min-width: 0; padding: 25px 22px 24px; border: 1px solid var(--gt-line); background: #fff; counter-increment: rename-step; }
body.tool-image-rename-page .rename-howto-list li::before { content: "0" counter(rename-step); display: block; margin-bottom: 23px; color: #d97724; font: 800 13px/1 Arial,sans-serif; letter-spacing: .1em; }
body.tool-image-rename-page .rename-howto-list strong { display: block; margin-bottom: 9px; color: var(--gt-ink); font-size: 17px; }
body.tool-image-rename-page .rename-howto-list span { display: block; color: var(--gt-ink-soft); font-size: 13px; line-height: 1.9; }
body.tool-image-rename-page .rename-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
body.tool-image-rename-page .rename-example-grid article { padding: 24px 22px; border-radius: 4px; background: #f5e6d5; }
body.tool-image-rename-page .rename-example-grid article > span { color: #a7501d; font: 800 13px/1.4 Arial,sans-serif; letter-spacing: .12em; }
body.tool-image-rename-page .rename-example-grid h3 { margin: 10px 0 8px; color: var(--gt-ink); font-size: 17px; }
body.tool-image-rename-page .rename-example-grid h3 code { color: #7f3c17; font-size: 15px; overflow-wrap: anywhere; }
body.tool-image-rename-page .rename-example-grid p { margin: 0; color: var(--gt-ink-soft); font-size: 13px; line-height: 1.9; }
body.tool-image-rename-page .rename-faq-list { border-top: 1px solid var(--gt-line); }
body.tool-image-rename-page .rename-faq-list details { border-bottom: 1px solid var(--gt-line); }
body.tool-image-rename-page .rename-faq-list summary { position: relative; padding: 20px 48px 20px 4px; color: var(--gt-ink); font-size: 14px; font-weight: 780; line-height: 1.65; cursor: pointer; list-style: none; }
body.tool-image-rename-page .rename-faq-list summary::-webkit-details-marker { display: none; }
body.tool-image-rename-page .rename-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 9px; transform: translateY(-50%); color: #b5551d; font: 300 25px/1 Arial,sans-serif; }
body.tool-image-rename-page .rename-faq-list details[open] summary::after { content: "−"; }
body.tool-image-rename-page .rename-faq-list details p { margin: -2px 0 0; padding: 0 48px 22px 4px; color: var(--gt-ink-soft); font-size: 13px; line-height: 1.9; }

@media (max-width: 900px) {
  body.tool-image-rename-page .rename-basic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.tool-image-rename-page .rename-advanced .rename-basic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.tool-image-rename-page .rename-file-row { grid-template-columns: 64px minmax(0,1fr); }
  body.tool-image-rename-page .rename-thumb { width: 64px; height: 54px; align-self: start; }
  body.tool-image-rename-page .rename-file-row__actions { grid-column: 2; grid-template-columns: repeat(4,34px) auto; justify-content: start; }
  body.tool-image-rename-page .rename-row-download { grid-column: auto; }
}

@media (max-width: 700px) {
  body.tool-image-rename-page .pagehaader_l_title_main { white-space: normal !important; overflow-wrap: anywhere; }
  body.tool-image-rename-page .rename-drop-zone { min-height: 230px; }
  body.tool-image-rename-page .rename-step__eyebrow,
  body.tool-image-rename-page .rename-drop-zone__help,
  body.tool-image-rename-page .rename-secondary-button,
  body.tool-image-rename-page .rename-text-button,
  body.tool-image-rename-page .rename-status,
  body.tool-image-rename-page .rename-guide,
  body.tool-image-rename-page .rename-presets button,
  body.tool-image-rename-page .rename-field__label,
  body.tool-image-rename-page .rename-field small,
  body.tool-image-rename-page .rename-token-list,
  body.tool-image-rename-page .rename-token-list button,
  body.tool-image-rename-page .rename-template-example span,
  body.tool-image-rename-page .rename-template-example code,
  body.tool-image-rename-page .rename-template-help summary,
  body.tool-image-rename-page .rename-template-help dt,
  body.tool-image-rename-page .rename-template-help dd,
  body.tool-image-rename-page .rename-template-help__body > p,
  body.tool-image-rename-page .rename-advanced summary,
  body.tool-image-rename-page .rename-checks label,
  body.tool-image-rename-page .rename-advanced__note,
  body.tool-image-rename-page .rename-list-tools label,
  body.tool-image-rename-page .rename-list-tools select,
  body.tool-image-rename-page .rename-preview-status,
  body.tool-image-rename-page .rename-file-row__label,
  body.tool-image-rename-page .rename-file-row__name,
  body.tool-image-rename-page .rename-file-row__meta,
  body.tool-image-rename-page .rename-badge,
  body.tool-image-rename-page .rename-row-download,
  body.tool-image-rename-page .rename-download-panel span,
  body.tool-image-rename-page .rename-content-kicker,
  body.tool-image-rename-page .rename-howto-list span,
  body.tool-image-rename-page .rename-example-grid article > span,
  body.tool-image-rename-page .rename-example-grid p,
  body.tool-image-rename-page .rename-faq-list details p { font-size: 13px; }
  body.tool-image-rename-page .rename-presets { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.tool-image-rename-page .rename-template-card { padding: 18px 15px; }
  body.tool-image-rename-page .rename-template-help dl { grid-template-columns: 1fr; }
  body.tool-image-rename-page .rename-basic-grid,
  body.tool-image-rename-page .rename-advanced .rename-basic-grid { grid-template-columns: 1fr; }
  body.tool-image-rename-page .rename-field input[type="text"],
  body.tool-image-rename-page .rename-field input[type="number"],
  body.tool-image-rename-page .rename-field select { font-size: 16px; }
  body.tool-image-rename-page .rename-step__heading--split { align-items: flex-start; flex-direction: column; }
  body.tool-image-rename-page .rename-list-tools { align-items: stretch; flex-direction: column; }
  body.tool-image-rename-page .rename-list-tools select { width: 100%; min-height: 48px; font-size: 16px; }
  body.tool-image-rename-page .rename-file-row__body { grid-template-columns: 1fr; gap: 4px; }
  body.tool-image-rename-page .rename-file-row__arrow { transform: rotate(90deg); text-align: left; }
  body.tool-image-rename-page .rename-file-row__meta { grid-column: 1; }
  body.tool-image-rename-page .rename-download-panel { align-items: stretch; flex-direction: column; }
  body.tool-image-rename-page .rename-primary-button { width: 100%; font-size: 16px; }
  body.tool-image-rename-page .rename-howto-list,
  body.tool-image-rename-page .rename-example-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  body.tool-image-rename-page .rename-file-row { grid-template-columns: 52px minmax(0,1fr); gap: 9px; }
  body.tool-image-rename-page .rename-thumb { width: 52px; height: 48px; }
  body.tool-image-rename-page .rename-file-row__actions { grid-column: 1 / -1; }
  body.tool-image-rename-page .rename-template-example { align-items: flex-start; flex-direction: column; gap: 4px; }
}