@charset "UTF-8";
:root {
  --primary: #0D68FF;
  --bg: #f8fafc;
  --danger: #ef4444;
  --warning: #f97316;
  --dark: #1e293b; }

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  background: #fff;
  padding: 2em;
  border-radius: 1em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }

.desc_area {
  max-width: 1200px; }

.input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 2em; }

input[type="url"] {
  flex: 1;
  padding: 1em;
  border: 1px solid #e2e8f0;
  border-radius: 0.5em;
  font-size: 1rem;
  outline: none; }

.btn {
  padding: 0.75em 1.5em;
  border-radius: 0.5em;
  font-weight: bold;
  cursor: pointer;
  border: none;
  color: #fff;
  font-size: 0.85rem;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8em; }

.btn-primary {
  background: var(--primary); }

.btn-warning {
  background: var(--warning); }

.btn-danger {
  background: var(--danger); }

.btn-clear {
  background: #64748b; }

.btn-clear.confirming {
  background: var(--danger);
  animation: pulse 0.6s infinite; }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
.action-bar {
  background: #f1f5f9;
  padding: 1em 1.5em;
  border-radius: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em; }

.btn-group {
  display: flex;
  gap: 0.5em; }

.btn-csv {
  background: #64748b; }

.btn-sitemap {
  background: #FFF;
  border: 2px solid #0D68FF;
  box-sizing: border-box;
  color: #0D68FF; }
  .btn-sitemap:hover {
    background: #0D68FF;
    color: #FFF; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed; }

th, td {
  padding: 14px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left; }

/* URLが長くてもはみ出さないための設定 */
.dup-cell {
  text-align: center; }

.type-cell {
  color: #64748b;
  text-align: center; }

.url-cell {
  color: var(--primary);
  font-size: 0.8rem;
  overflow-wrap: anywhere; }

.status-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.75rem;
  background: #e2e8f0; }

.ok {
  background: #dcfce7;
  color: #166534; }

.error {
  background: #fee2e2;
  color: #991b1b; }

.duplicate-row {
  background-color: #fff7ed !important; }

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999; }

.toast-bnr {
  background: var(--dark);
  color: #fff;
  padding: 14px 24px;
  border-radius: 12px;
  margin-bottom: 10px;
  animation: slideIn 0.3s forwards;
  border-left: 5px solid var(--primary);
  font-size: 0.9rem;
  font-weight: bold; }

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0; }
  to {
    transform: translateX(0);
    opacity: 1; } }
@media screen and (max-width: 820px) {
  /* 820px以下 */
  .action-bar {
    padding: 1em; }

  .btn {
    padding: 0.5em 1em; } }
@media screen and (max-width: 480px) {
  /* 480px以下 */
  .input-group {
    display: grid; }

  .action-bar {
    flex-wrap: wrap;
    padding: 1em; }
    .action-bar .number {
      margin-bottom: 1em; }

  .btn-group {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    width: 100%; }

  .btn {
    padding: 0.75em 1em; }

  table tr {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 50% 25% 25%; }
  table th {
    display: none; }
  table td {
    box-sizing: border-box; }
    table td.text-cell, table td.url-cell {
      width: 100%;
      grid-column: span 3; }
      table td.text-cell::before, table td.url-cell::before {
        margin-right: 0.5em; }
    table td.text-cell::before {
      content: 'テキスト:'; }
    table td.url-cell {
      border-bottom: 2px solid #f1f5f9; }
      table td.url-cell::before {
        content: 'URL:'; } }