@charset "utf-8";

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 24px;
}
input[type="text"] {
  width: 560px;
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 8px 12px;
  font-size: 14px;
}
pre {
  background: #f6f6f6;
  padding: .5rem;
  overflow: auto;
}
ol {
  line-height: 1.6;
}
.badge {
  display: inline-block;
  padding: .2rem .5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 8px;
  font-size: 12px;
}
/* 支給ここまで */


/*初期化 ここから*/
.search-form input[type="text"],
.search-form button {
  border: 1px solid #ccc;
  background: #FFFFFF;
}

/*初期化 ここまで*/
.search-form input[type="text"] {
  max-width: 500px;
  width: 100%;
}

.search-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* ←フォーム全体を中央揃え */
  width: 100%;
  margin-bottom: 50px;
}
.form-title {
  width: 100%;
  max-width: 500px; /* ← inputとbuttonの最大幅に合わせる */
  text-align: left;
  margin-bottom: 0.5em;
  font-size: 1.3em;
}
.form-title span.mgl-10 {
  margin-left: 0.5em;
  padding-left: 0;
}
.form-controls {
  display: flex;
  gap: 8px;
  max-width: 500px;
  width: 100%;
}

.search-form input[type="text"] {
  max-width: 400px;
  height: 42px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.search-form input[type="text"],
.search-form button {
  max-width: 400px;
  width: 100%;
  margin-bottom: 0.5em;
}

.search-form button {
  max-width: 70px;
  width: 100%;
  height: 42px;
  text-align: center;
  line-height: 42px;
  font-size: 16px;
  background: linear-gradient(to right, rgba(123,170,223,1) 0%,rgba(186,230,231,1) 100%);
  border-radius: 9999px;
  padding: 0;
  border: 0;
  color: #FFF;
}

.search-form button:hover {
  background: linear-gradient(to right, rgba(186,230,231,1) 0%,(123,170,223,1) 100%);
}

.search-form+pre+ol {
  margin-bottom: 50px;
}


/* 検索結果のリスト */
.results-list {
  counter-reset: item;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  font-size: 12px;
}
.results-list .issue-id {
  background: #09A0C7;
  color: #FFFFFF;
  padding: 0.5em 1em;
}
.results-list li {
  display: table;
  width: 100%;
  margin-bottom: 16px;
  table-layout: auto;
}

.results-list .row {
  display: table-row;
}

.results-list .number {
  display: table-cell;
  counter-increment: item;
  width: 2em;
  font-weight: bold;
  text-align: right;
  padding-right: 8px;
}

.results-list .number::before {
  content: counter(item) ".";
}

.results-list .content {
  display: table-cell;
  vertical-align: top;
  background: #E6FBFF;
  border: 1px solid #09A0C7;
  box-sizing: border-box;
}

.results-list .issue-row {
  display: flex;
  justify-content: space-between;
}

.results-list .issue-row .stage {
  text-align: right;
  font-weight: normal;
  padding: 0.5em 1em;
}

.results-list dl {
  display: table;
  width: auto;
  border-collapse: separate;
  border-spacing: 0 2px;
  padding: 1em;
}

.results-list dl .row {
  display: table-row;
}

.results-list dt,
.results-list dd {
  display: table-cell;
  padding: 2px 8px;
  vertical-align: top;
  color: #000;
}

.results-list dt {
  white-space: nowrap;
  text-align: right;
}

.results-list dd {
  font-size: 14px;
  font-weight: bold;
  padding-left: 0;
}

.noresults {
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 50px;
}

/* ---------- スマホ完全折り返しモード ---------- */
@media (max-width: 768px) {
  .results-list li {
    display: block; /* li を縦並び */
  }

  .results-list .row {
    display: block;
  }

  .results-list .number {
    display: inline-block;
    width: auto;
    margin-right: 8px;
  }

  .results-list .content {
    display: block;
  }

  .results-list .issue-row .stage {
    text-align: left;
    margin-top: 2px;
  }

  .results-list dl {
    display: block;
    max-width: 100%;
  }

  .results-list dl .row {
    display: block; /* dt/dd を縦並びに */
    margin-bottom: 4px;
  }

  .results-list dt,
  .results-list dd {
    display: block;
    width: 100%;
    white-space: normal; /* 折り返し可能 */
    padding: 0;
  }

  .results-list dt {
    margin-bottom: 2px;
    text-align: left;
  }

  .results-list dd {
    margin-left: 0;
    padding-left: 0;
  }
}