@charset "UTF-8";
/* ==========================================================================
   ミニPC界隈 — メーカー

   メーカーはタグとして扱う。ここで整えるのは3か所だけ。
     1. メーカーページの見出し直下に出す基本情報
     2. メーカー一覧ページのリスト
     3. サイドバーのメーカーウィジェット

   ロゴ画像とスペック表は廃止した。
   型番ごとの諸元はメーカー公式が一次情報で、こちらに転記すると
   更新されないまま古い値が残るため。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 国旗
   -------------------------------------------------------------------------- */
/*
  絵文字の国旗。フォントによって字面の大きさが揃わないので、
  行の高さに影響させないよう line-height を固定する。
*/
.mpk-maker__flag {
  margin-right: 0.4em;
  font-size: 1.15em;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* --------------------------------------------------------------------------
   1. メーカーページの基本情報
   -------------------------------------------------------------------------- */
.mpk-maker-profile {
  margin: 0 0 var(--mpk-space-lg);
  padding: var(--mpk-space-md) var(--mpk-space-lg);
  background-color: var(--mpk-surface-muted);
  border-radius: var(--mpk-radius-md);
}

.mpk-maker-profile__list {
  margin: 0;
  padding: 0;
}

/*
  ラベルと値を1行に並べる。ラベル幅を固定すると値の頭が揃う。
  狭いときは縦積みにする（8em を確保すると値が入らなくなるため）。
*/
.mpk-maker-profile__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--mpk-space-md);
  padding: 7px 0;
  border-bottom: 1px solid var(--mpk-border);
}

.mpk-maker-profile__row:last-child {
  border-bottom: 0;
}

.mpk-maker-profile__row dt {
  flex: 0 0 8em;
  margin: 0;
  font-size: var(--mpk-fs-xs);
  font-weight: 700;
  color: var(--mpk-text-muted);
}

.mpk-maker-profile__row dd {
  flex: 1 1 12em;
  min-width: 0;
  margin: 0;
  font-size: var(--mpk-fs-sm);
  color: var(--mpk-text);
  overflow-wrap: anywhere;
}

.mpk-maker-profile__row dd a {
  color: var(--mpk-primary);
  text-decoration: none;
}

.mpk-maker-profile__row dd a:hover {
  text-decoration: underline;
}

/* どこで確認した情報かを必ず残す。ここが無い値は記事に使わない */
.mpk-maker-profile__source {
  margin: var(--mpk-space-sm) 0 0;
  font-size: var(--mpk-fs-2xs);
  line-height: var(--mpk-lh-normal);
  color: var(--mpk-text-muted);
  overflow-wrap: anywhere;
}

.mpk-maker-profile__source a {
  color: inherit;
}

@media screen and (max-width: 480px) {
  .mpk-maker-profile {
    padding: var(--mpk-space-sm) var(--mpk-space-md);
  }

  .mpk-maker-profile__row {
    display: block;
  }

  .mpk-maker-profile__row dt {
    margin-bottom: 1px;
  }
}

/* --------------------------------------------------------------------------
   2. メーカー一覧ページ
   -------------------------------------------------------------------------- */
.mpk-maker-index {
  margin: 0 0 var(--mpk-space-xl);
  padding: 0;
  list-style: none;
  border: 1px solid var(--mpk-border);
  border-radius: var(--mpk-radius-md);
  overflow: hidden;
}

.mpk-maker-index__item + .mpk-maker-index__item {
  border-top: 1px solid var(--mpk-border);
}

.mpk-maker-index__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--mpk-space-md);
  min-height: 44px; /* 指で押せる高さを確保する */
  padding: var(--mpk-space-sm) var(--mpk-space-md);
  color: var(--mpk-text);
  text-decoration: none;
  transition: background-color var(--mpk-transition);
}

.mpk-maker-index__link:hover {
  background-color: var(--mpk-primary-tint);
}

.mpk-maker-index__name {
  flex: 0 0 auto;
  font-size: var(--mpk-fs-md);
  font-weight: 700;
}

.mpk-maker-index__meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mpk-fs-xs);
  color: var(--mpk-text-muted);
}

.mpk-maker-index__count {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--mpk-fs-2xs);
  color: var(--mpk-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. サイドバーのメーカーウィジェット
   -------------------------------------------------------------------------- */
.mpk-maker-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpk-maker-list li {
  border-bottom: 1px solid var(--mpk-border);
}

.mpk-maker-list li:last-child {
  border-bottom: 0;
}

.mpk-maker-list a {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: var(--mpk-fs-sm);
  color: var(--mpk-text);
  text-decoration: none;
  transition: color var(--mpk-transition);
}

.mpk-maker-list a:hover {
  color: var(--mpk-primary);
}

.mpk-maker-list__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mpk-maker-list__more {
  margin: var(--mpk-space-sm) 0 0;
  font-size: var(--mpk-fs-2xs);
  text-align: right;
}

.mpk-maker-list__more a {
  color: var(--mpk-primary);
  text-decoration: none;
}

.mpk-maker-list__more a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. メーカーページの見出し
   -------------------------------------------------------------------------- */
/*
  Cocoon はタクソノミーの見出しにタグのアイコンを付ける。
  メーカーページの見出しはメーカー名だけにしたいので、アイコンを隠す。
*/
.mpk-maker-archive .archive-title .fa {
  display: none;
}