/* ドメイン・サーバラボ
   基調色はテーマ側の body.site-dslab が持つトークンに追従する。
   ★面（背景・罫線）と文字で色を分けている。
     --ds-accent  面。指定色そのもの（--lab-bg）
     --ds-ink     文字。白地で読める濃い版（--lab-ink）
   **面まで濃くしないこと。**帯やチップが指定色でなくなる。
   単体で読み込まれた場合のためにここでも既定値を持たせる。 */
.dslab {
  --ds-accent: var(--lab-bg, #C25400);
  --ds-ink: var(--lab-ink, #C25400);
  --ds-band: var(--lab-band, rgba(255,204,0,.20));
  --ds-line: #e6ebef;
  font-size: 15px;
  line-height: 1.7;
}

.dslab-pr {
  margin: 0 0 16px;
  padding: 6px 10px;
  border: 1px solid var(--ds-line);
  border-radius: 4px;
  background: #fafafa;
  font-size: .82em;
  color: #555;
}

.dslab-hero {
  padding: 22px 24px;
  margin-bottom: 20px;
  border: 1px solid #f0d8c4;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff6ef, #fff);
}
/* 見出しは h1（ページの主題）。h2 のままの箇所も同じ見た目にする */
.dslab-hero h1,
.dslab-hero h2 {
  margin: 0 0 6px;
  font-size: 1.5em;
  line-height: 1.4;
  color: var(--ds-ink);
}
.dslab-hero p { margin: 0; color: #555; }

.dslab-form { display: grid; gap: 14px; }
.dslab-search-step {
  position: relative;
  margin: 0;
  padding: 18px 20px;
  border: 2px solid var(--ds-line);
  border-radius: 9px;
  background: #fff;
  transition: border-color .2s, background-color .2s, opacity .2s;
}
.dslab-search-step.is-active {
  border-color: var(--ds-accent);
  background: linear-gradient(135deg, var(--lab-band, rgba(255,204,0,.20)), #fff 62%);
}
.dslab-search-step.is-complete { border-color: var(--lab-bg, #C25400); }
.dslab-step-heading,
.dslab-tlds legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  color: #292929;
}
.dslab-step-number {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  place-items: center;
  background: #d8dde0;
  color: #fff;
  font-size: .9em;
  font-weight: 800;
}
.dslab-search-step.is-active .dslab-step-number,
.dslab-search-step.is-complete .dslab-step-number {
  background: var(--ds-accent);
  color: var(--lab-on-bg, #fff);   /* 明るい基調色の上では白が消える */
}
.dslab-step-heading strong,
.dslab-tlds legend strong { display: block; font-size: 1.03em; }
.dslab-step-heading > div > span,
.dslab-tlds legend small {
  display: block;
  margin-top: 1px;
  color: #6d7478;
  font-size: .82em;
  font-weight: 400;
}
.dslab-step-help { margin: 8px 0 0 42px; color: #777; font-size: .82em; }
.dslab-input { display: flex; gap: 8px; margin-left: 42px; }
.dslab-input input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--ds-line);
  border-radius: 6px;
  font-size: 1.05em;
}
.dslab-input input[type="text"]:focus {
  outline: none;
  border-color: var(--ds-accent);
}
.dslab-submit {
  /* ★テーマのリセットが button に text-align:left を当てているため、
     指定しないと文字が左に寄る（style.css 冒頭の一括リセット）。 */
  text-align: center;
  min-width: 150px;
  padding: 13px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--ds-accent);
  /* 面が明るい基調色なので、白文字だと消える */
  color: var(--lab-on-bg, #fff);
  font-size: 1.05em;
  font-weight: 700;
  cursor: pointer;
}
.dslab-submit:not(:disabled):hover { filter: brightness(1.08); }
.dslab-submit:disabled { background: #c9ced1; color: #f4f5f5; cursor: not-allowed; }

.dslab-tlds {
  min-width: 0;
}
.dslab-tlds legend { float: left; width: 100%; }
.dslab-tlds legend + * { clear: both; }
.dslab-tlds:disabled { opacity: .55; background: #f5f6f6; }
.dslab-tlds:disabled label { cursor: not-allowed; }
.dslab-tld-options { margin-left: 42px; }
.dslab-tlds label {
  display: inline-block;
  margin: 3px 14px 3px 0;
  white-space: nowrap;
  cursor: pointer;
}
.dslab-tlds input { margin-right: 4px; }
.dslab-search-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dslab-search-action .dslab-step-heading { margin-bottom: 0; }

@media (max-width: 700px) {
  .dslab-search-step { padding: 16px; }
  .dslab-input,.dslab-tld-options,.dslab-step-help { margin-left: 0; }
  .dslab-search-action { display: block; }
  .dslab-search-action .dslab-step-heading { margin-bottom: 14px; }
  .dslab-submit { width: 100%; }
}

.dslab-note { min-height: 1.4em; margin: 8px 0 0; color: #c00; font-size: .9em; }

.dslab-results { margin-top: 24px; }
.dslab-scroll { overflow-x: auto; }

.dslab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
}
.dslab-table th,
.dslab-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-line);
  text-align: left;
  vertical-align: middle;
}
.dslab-table thead th {
  background: var(--ds-band);
  color: #333;
  font-size: .85em;
  white-space: nowrap;
}

.dslab-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .85em;
  font-weight: 700;
  white-space: nowrap;
}
.dslab-badge.ok      { background: #e6f5ec; color: #17794a; }
.dslab-badge.ng      { background: #f1f3f5; color: #868e96; }
.dslab-badge.unknown { background: #fff4e0; color: #9a5b00; }
.dslab-badge.wait    { background: #f1f3f5; color: #868e96; }

.dslab-sub { display: block; font-size: .82em; color: #777; }
/* .dslab-sub は表のセル内（キャンペーン表記など）でも使うため、
   段落として置いた <p class="dslab-sub"> だけに余白を付ける */
p.dslab-sub { margin: 6px 0 18px; line-height: 1.8; }
p.dslab-sub:last-child { margin-bottom: 0; }
.dslab-reason { display: block; margin-top: 10px; font-size: .8em; color: #9a5b00; }

.dslab-more {
  padding: 6px 16px;
  border: 1px solid var(--ds-accent);
  border-radius: 4px;
  background: #fff;
  color: var(--ds-ink);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dslab-more:hover { background: var(--ds-band); }

.dslab-price {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  background: #fcfcfc;
}
.dslab-price h3 { margin: 0 0 10px; color: var(--ds-ink); }
/* 比較表を出し直すたびに見出し→説明文→表が続くので、その間隔を確保する */
.dslab-price #dslab-price-body > h3 { margin-top: 26px; }
.dslab-price .dslab-scroll { margin-top: 18px; }

.dslab-go {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--ds-accent);
  color: var(--lab-on-bg, #fff) !important;
  font-size: .9em;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.dslab-ad {
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .28);
  font-size: .75em;
}

.dslab-disclaimer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
  font-size: .82em;
  color: #777;
}
.dslab-disclaimer p { margin: 0 0 6px; }

@media (max-width: 600px) {
  .dslab-input { flex-wrap: wrap; }
  .dslab-submit { width: 100%; }
  .dslab-table th,
  .dslab-table td { padding: 8px 6px; font-size: .92em; }
}

.dslab-guide { margin-top: 28px; }
.dslab-guide h3 { margin: 0 0 10px; color: var(--ds-ink); }
.dslab-guide dl { margin: 0; }
.dslab-guide dt {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--ds-accent);
  font-weight: 700;
}
.dslab-guide dd {
  margin: 4px 0 0 15px;
  color: #555;
  font-size: .95em;
}

/* 比較表は項目が多く、サイドバーのある2カラムだと潰れて「1,287」「円」が
   改行で分断される。最低幅を持たせて .dslab-scroll 側で横スクロールさせる。 */
.dslab-price .dslab-table { min-width: 620px; }
.dslab-price .dslab-table th,
.dslab-price .dslab-table td { white-space: nowrap; }
.dslab-price .dslab-table td:nth-child(2) { white-space: normal; min-width: 11em; }
.dslab-price .dslab-table td:nth-child(2) .dslab-sub,
.dslab-price .dslab-table td:nth-child(2) .dslab-reason { white-space: normal; }
.dslab-scroll { -webkit-overflow-scrolling: touch; }

/* レンタルサーバー検索 */
.dslab-server-features label { width: calc(50% - 18px); vertical-align: top; }
.dslab-server-types label { width: calc(50% - 18px); vertical-align: top; }
.dslab-server-actions { display: flex; align-items: center; gap: 16px; }
.dslab-server .dslab-search-action .dslab-server-actions { margin-left: auto; }
.dslab-reset { color: #555; font-weight: 700; }
.dslab-server-results { margin-top: 24px; }
.dslab-server-results > .dslab-sub { margin-bottom: 18px; }
.dslab-server-table { min-width: 0 !important; width: 100%; table-layout: fixed; }
.dslab-server-table th:nth-child(1) { width: 18%; }
.dslab-server-table th:nth-child(2) { width: 10%; }
.dslab-server-table th:nth-child(4) { width: 17%; }
.dslab-server-table td { white-space: normal !important; overflow-wrap: anywhere; }
.dslab-server-table td:nth-child(2) { white-space: nowrap !important; min-width: 0; }
.dslab-server-table td:nth-child(3) { min-width: 0; white-space: normal; }
.dslab-server-check { text-align: center; }
.dslab-server-check .dslab-go { display: inline-block; white-space: nowrap; }
.dslab-server-date { display: block; margin-top: 7px; font-size: .8em; white-space: nowrap; }
.dslab-server-date a { color: #666; text-decoration: underline; }
.dslab-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: .83em; }
.dslab-feature-list li { margin: 0; color: #6b7280; }
.dslab-feature-list li span { display: inline-block; width: 1.5em; font-weight: 700; }
.dslab-feature-list .is-yes { color: #17794a; }
.dslab-feature-list .is-no { color: #999; }
.dslab-feature-list .is-conditional,
.dslab-feature-list .is-suspended { color: #9a5b00; }
@media (max-width: 600px) {
  .dslab-server-features label { width: 100%; }
  .dslab-server-types label { width: 100%; }
  .dslab-server-actions { align-items: stretch; flex-direction: column; }
  .dslab-server .dslab-search-action .dslab-server-actions { margin-left: 0; }
}

/* TLD別の最安料金表（サーバ側で描く。構造化データと画面を一致させるためのもの） */
.dslab-tld-price{margin:28px 0}
.dslab-tld-price h3{margin:0 0 6px}
.dslab-tld-price .dslab-table th[scope="row"] em{display:block;font-style:normal;font-size:11px;opacity:.65;font-weight:400}
.dslab-tld-price .dslab-table td{text-align:right;font-variant-numeric:tabular-nums}
.dslab-tld-price .dslab-table td:last-child{text-align:left}

/* 取得済みドメインの「登録情報」リンク。
   面は基調色、文字はその上で読める濃い色（--lab-on-bg）。 */
.dslab-whois {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--ds-accent);
  color: var(--lab-on-bg, #fff);
  font-size: .88em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.dslab-whois:hover { filter: brightness(1.06); }
.dslab-whois-src { font-size: .82em; font-weight: 400; opacity: .8; }

/* Whois代行の条件文。表のセル内で折り返して読ませる */
.dslab-table .dslab-whois-note {
  display: block;
  max-width: 260px;
  margin-top: 3px;
  white-space: normal;
  line-height: 1.5;
}