/* 画像サイズ統一・一括トリミング専用UI */
body.tool-image-crop-resize-page .crop-presets { margin: 0 0 20px; }
body.tool-image-crop-resize-page .crop-presets > p {
  margin: 0 0 9px; color: var(--gt-ink); font-size: 12px; font-weight: 750;
}
body.tool-image-crop-resize-page .crop-presets__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
body.tool-image-crop-resize-page .crop-presets__buttons button {
  min-height: 40px; padding: 8px 14px !important; border: 1px solid #d7c3b0 !important;
  border-radius: 3px !important; background: #fff !important; color: var(--gt-ink-soft) !important;
  font-size: 12px; font-weight: 750 !important;
}
body.tool-image-crop-resize-page .crop-presets__buttons button:hover,
body.tool-image-crop-resize-page .crop-presets__buttons button.is-active {
  border-color: #c5783d !important; background: #fff1e1 !important; color: #8e4219 !important;
}
body.tool-image-crop-resize-page .crop-dimension-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body.tool-image-crop-resize-page .crop-ratio-field { margin-bottom: 0; }
body.tool-image-crop-resize-page .crop-ratio-help { margin: 8px 0 0; color: var(--gt-muted); font-size: 12px; line-height: 1.7; }
body.tool-image-crop-resize-page .crop-ratio-help + .crop-dimension-grid { margin-top: 18px; }
body.tool-image-crop-resize-page .crop-dimension-grid .resize-field + .resize-field { margin-top: 0; }
body.tool-image-crop-resize-page .crop-dimension-grid .resize-field__control input { width: 100%; }
body.tool-image-crop-resize-page .crop-swap-button {
  margin-top: 15px; padding: 0 !important; border: 0 !important; background: transparent !important;
  color: #a7501d !important; font-size: 12px; font-weight: 750 !important; text-decoration: underline;
  text-underline-offset: 3px;
}
body.tool-image-crop-resize-page .crop-size-summary {
  margin: 17px 0 0; padding: 11px 13px; border-left: 3px solid #d97724;
  background: #fff; color: var(--gt-ink-soft); font-size: 12px; line-height: 1.7;
}
body.tool-image-crop-resize-page .crop-size-summary.is-error { border-left-color: #a52621; color: #a52621; font-weight: 700; }
body.tool-image-crop-resize-page .crop-method-note {
  display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 18px;
  margin-top: 16px; padding: 18px 20px; border: 1px solid #ead7c4; border-radius: 4px; background: #fff8f0;
}
body.tool-image-crop-resize-page .crop-method-note__visual {
  position: relative; display: block; width: 112px; height: 76px; overflow: hidden;
  border: 1px solid #d3b89e; background: linear-gradient(145deg,#dce8de 0 48%,#aac4ae 49% 100%);
}
body.tool-image-crop-resize-page .crop-method-note__visual::before,
body.tool-image-crop-resize-page .crop-method-note__visual::after {
  content: ""; position: absolute; inset: 0 18px; border: 2px solid #c25f1d; background: rgba(255,255,255,.16);
}
body.tool-image-crop-resize-page .crop-method-note__visual::after {
  inset: 0; border-width: 0 18px; border-color: rgba(64,45,32,.34); background: transparent;
}
body.tool-image-crop-resize-page .crop-method-note__visual span {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%);
}
body.tool-image-crop-resize-page .crop-method-note__visual span::before,
body.tool-image-crop-resize-page .crop-method-note__visual span::after {
  content: ""; position: absolute; background: #b44c17;
}
body.tool-image-crop-resize-page .crop-method-note__visual span::before { top: 7px; left: 0; width: 16px; height: 1px; }
body.tool-image-crop-resize-page .crop-method-note__visual span::after { top: 0; left: 7px; width: 1px; height: 16px; }
body.tool-image-crop-resize-page .crop-method-note strong { display: block; margin-bottom: 3px; color: var(--gt-ink); font-size: 14px; }
body.tool-image-crop-resize-page .crop-method-note p { margin: 0; color: var(--gt-ink-soft); font-size: 12px; line-height: 1.8; }
body.tool-image-crop-resize-page #crop-start-button { min-width: min(100%,300px); font-size: 14px; }
body.tool-image-crop-resize-page .crop-manual-example {
  display: grid; grid-template-columns: 1fr auto 1.35fr auto 1fr; align-items: stretch; gap: 12px;
}
body.tool-image-crop-resize-page .crop-manual-example > div {
  display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px 18px; border: 1px solid var(--gt-line); background: #fff; text-align: center;
}
body.tool-image-crop-resize-page .crop-manual-example__process { background: #fff8f0 !important; border-color: #e7b984 !important; }
body.tool-image-crop-resize-page .crop-manual-example__result { background: #f5e6d5 !important; }
body.tool-image-crop-resize-page .crop-manual-example span { color: var(--gt-muted); font-size: 11px; }
body.tool-image-crop-resize-page .crop-manual-example strong { margin-top: 8px; color: var(--gt-ink); font-size: 17px; }
body.tool-image-crop-resize-page .crop-manual-example small { margin-top: 8px; color: #a7501d; font-size: 11px; line-height: 1.6; }
body.tool-image-crop-resize-page .crop-manual-example__arrow { align-self: center; color: #c76020; font-size: 23px; }
body.tool-image-crop-resize-page .crop-manual-text { margin: 18px 0 0; color: var(--gt-ink-soft); font-size: 13px; line-height: 1.9; }

@media (max-width: 700px) {
  body.tool-image-crop-resize-page .pagehaader_l_title_main { white-space: normal !important; overflow-wrap: anywhere; }
  body.tool-image-crop-resize-page .crop-presets > p,
  body.tool-image-crop-resize-page .crop-presets__buttons button,
  body.tool-image-crop-resize-page .crop-swap-button,
  body.tool-image-crop-resize-page .crop-size-summary,
  body.tool-image-crop-resize-page .crop-manual-example span,
  body.tool-image-crop-resize-page .crop-manual-example small { font-size: 13px !important; }
  body.tool-image-crop-resize-page .crop-method-note strong,
  body.tool-image-crop-resize-page .crop-method-note p,
  body.tool-image-crop-resize-page .crop-ratio-help,
  body.tool-image-crop-resize-page .crop-manual-text { font-size: 16px !important; }
  body.tool-image-crop-resize-page .crop-dimension-grid { grid-template-columns: 1fr; gap: 18px; }
  body.tool-image-crop-resize-page .crop-method-note { grid-template-columns: 1fr; }
  body.tool-image-crop-resize-page .crop-manual-example { grid-template-columns: 1fr; }
  body.tool-image-crop-resize-page .crop-manual-example__arrow { transform: rotate(90deg); }
  body.tool-image-crop-resize-page .crop-manual-example > div { min-height: 124px; }
}

@media (max-width: 430px) {
  body.tool-image-crop-resize-page .crop-presets__buttons { display: grid; grid-template-columns: 1fr 1fr; }
  body.tool-image-crop-resize-page .crop-presets__buttons button { padding-inline: 8px !important; }
}