/*
 * read-kind.css — 「読み放題対象作品／アラカルト作品」の表示（トップの説明・作品詳細・ジャンル一覧）。
 * 部品は resources/views/comic/partials/read_kind_*.blade.php。ビルド不要の素のCSS。
 */
.read-kind-tag {
  display: inline-block;
  flex: none;
  padding: 2px 10px;
  border-radius: 4px;
  background: #1d4fb0;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}
.read-kind-tag--alacarte {
  background: #fff;
  color: #1d4fb0;
  box-shadow: inset 0 0 0 1.5px #1d4fb0;
}
.read-kind-tag--small {
  padding: 1px 6px;
  font-size: 11px;
}

/* 作品詳細のタイトル下 */
.read-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 6px 0 12px;
  font-size: 14px;
  line-height: 1.6;
}

/* トップの「作品は2種類」 */
.read-kind-howto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 12px 4px;
  padding: 14px 14px 12px;
  border: 1.5px solid #d6d9e0;
  border-radius: 8px;
  background: #fff;
  color: #222;
}
.read-kind-howto__lead {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
.read-kind-howto__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.read-kind-howto__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.read-kind-howto__text {
  min-width: 0;
  font-size: 15px;
  line-height: 1.55;
}
.read-kind-howto__note {
  margin: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.65;
}
.read-kind-howto__link {
  align-self: flex-end;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #1d4fb0 !important;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline !important;
}