/* まるきん共通テーマ（既存CSSの後に読み込む）
   モチーフ: 買取店の値札。紺=帳場、黄=値札紙、赤=買取額 */
:root {
  --mk-ink: #14213d;
  --mk-ink-2: #3a4560;
  --mk-tag: #ffd23f;
  --mk-price: #d7263d;
  --mk-paper: #ffffff;
  --mk-ground: #f4f5f7;
  --mk-rule: #d9dde4;
  --mk-font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
  background: var(--mk-ground);
  color: var(--mk-ink);
  font: 14px/1.8 var(--mk-font);
  text-align: left;
}
* { font-family: var(--mk-font); }
body { font-feature-settings: "palt"; }
#container { background: none; }
a { color: var(--mk-ink); }
a:hover { color: var(--mk-price); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--mk-ink);
  outline-offset: 2px;
}

/* ---- ヘッダー ---- */
.mk-header { background: var(--mk-paper); border-bottom: 4px solid var(--mk-tag); }
.mk-header-top {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.mk-logo { flex: none; line-height: 0; }
.mk-logo img { height: 48px; width: auto; }
.mk-tagline { flex: 1; margin: 0; font-size: 13px; font-weight: 700; color: var(--mk-ink-2); line-height: 1.5; }
.mk-tagline a { color: inherit; }
.mk-user { flex: none; font-size: 12px; display: flex; gap: 14px; }
.mk-user a { color: var(--mk-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.mk-nav { background: var(--mk-ink); }
.mk-nav ul { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; list-style: none; }
.mk-nav a {
  display: block; padding: 10px 22px; color: #fff; font-weight: 700; font-size: 14px;
  border-bottom: 3px solid transparent;
}
.mk-nav a:hover { color: var(--mk-tag); border-bottom-color: var(--mk-tag); background: rgba(255,255,255,.06); }

/* ---- 見出し：値札 ---- */
h2.title {
  position: relative; display: block;
  margin: 28px 0 12px; padding: 6px 16px 6px 34px;
  background: var(--mk-tag); color: var(--mk-ink);
  font-size: 16px; font-weight: 900; line-height: 1.5;
  border: 0; border-radius: 0 4px 4px 0;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
h2.title::before {
  content: ""; position: absolute; left: 15px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--mk-paper); box-shadow: inset 0 0 0 1px rgba(20,33,61,.35);
}

/* ---- 本文パーツ ---- */
div#content { max-width: 1400px; margin-top: 24px; }
div#left_side, div#right_side { width: 210px; }
.intro-box {
  background: var(--mk-paper); border: 1px solid var(--mk-rule); border-left: 4px solid var(--mk-ink);
  border-radius: 0 4px 4px 0; color: var(--mk-ink-2);
}
.article_text #count span, #count span { color: var(--mk-price); font-weight: 900; font-variant-numeric: tabular-nums; }

.mk-category-card {
  background: var(--mk-paper) !important; border: 2px solid var(--mk-ink) !important; color: var(--mk-ink) !important;
  border-radius: 4px !important; box-shadow: 3px 3px 0 var(--mk-ink);
  transition: transform .12s, box-shadow .12s !important;
}
.mk-category-card:hover {
  background: var(--mk-tag) !important; color: var(--mk-ink) !important;
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mk-ink);
}

#top_search { background: var(--mk-paper); border: 1px solid var(--mk-rule); border-radius: 4px; }
#top_search #search { border: 2px solid var(--mk-ink); border-radius: 4px 0 0 4px; }
#top_search #searchBtn { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
#top_search #searchBtn:hover { background: var(--mk-price); border-color: var(--mk-price); }
#keywordTag span { background: var(--mk-ground); color: var(--mk-ink-2); border: 1px solid var(--mk-rule); }

.item-card { border: 1px solid var(--mk-rule); border-radius: 4px; box-shadow: none; background: var(--mk-paper); }
.item-card:hover { border-color: var(--mk-ink); box-shadow: 3px 3px 0 var(--mk-ink); }
.item-card .card-title { color: var(--mk-ink); }
.item-card .card-price, .price-display { color: var(--mk-price); font-variant-numeric: tabular-nums; font-family: var(--mk-font); font-weight: 900; }
.more-link a { color: var(--mk-ink); text-decoration: underline; text-underline-offset: 3px; }
.more-link a:hover { color: var(--mk-price); }

.breadcrumb, .breadcrumb a { color: var(--mk-ink-2); }

/* ---- 左メニュー ---- */
.marukin_menu a:hover, ul.menu li a:hover { background: var(--mk-tag); color: var(--mk-ink); }

/* ---- 表 ---- */
.ta1 th, .ta1 th.tamidashi { background: var(--mk-ink); color: #fff; }

/* ---- フッター（footer_view側のクラスを上書き） ---- */
.mk-footer { background: var(--mk-ink) !important; border-top: 4px solid var(--mk-tag) !important; }
.mk-footer-logo { color: var(--mk-tag) !important; }

@media (max-width: 768px) {
  .mk-header-top { flex-wrap: wrap; padding: 8px 12px; gap: 6px 12px; }
  .mk-logo img { height: 40px; }
  .mk-tagline { flex-basis: 100%; order: 3; font-size: 12px; }
  .mk-user { margin-left: auto; }
  .mk-nav ul { padding: 0 8px; }
  .mk-nav a { padding: 10px 12px; font-size: 13px; }
  h2.title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-category-card { transition: none !important; }
}

/* ---- 左メニュー/ランキングの文字詰め（全角英数・長い機種名の折り返し対策） ---- */
.marukin_menu, div.right_game_rank {
  letter-spacing: 0; font-variant-east-asian: proportional-width; font-feature-settings: "palt";
  overflow-wrap: anywhere; line-break: strict;
}
.marukin_menu { border-color: var(--mk-rule); }
.marukin_menu .mk_title { color: var(--mk-ink); border-bottom: 3px solid var(--mk-tag); }
.marukin_menu li a { display: block; padding: 2px 6px; line-height: 1.6; text-decoration: none; }
div.right_game_rank { border-color: var(--mk-rule); }
div.right_game_rank span { font-weight: 900; padding: 6px 0; background: var(--mk-tag); border-bottom: 0; }
div.right_game_rank ol { padding: .5em .8em .5em 2em; }
div.right_game_rank li { line-height: 1.5; padding: 3px 0; }

/* ---- 商品カード：買取額を主役に ---- */
.item-card { text-align: center; }
.item-card .card-title { color: var(--mk-ink); font-size: 12px; }
.item-card .card-date { color: var(--mk-ink-2); opacity: .7; }
.item-card .card-price {
  display: block; margin: 8px -10px -10px; padding: 6px 4px;
  background: var(--mk-ink); color: var(--mk-tag);
  font-size: 18px; font-weight: 900; line-height: 1.2;
  font-variant-numeric: tabular-nums; border-radius: 0 0 3px 3px;
}
a.item-card:hover .card-price { background: var(--mk-price); color: #fff; }
.item-card { display: flex; flex-direction: column; }
.item-card img { align-self: center; }
.item-card .card-price { margin-top: auto; }
.item-card .card-title { margin-bottom: 8px; }
.item-card .card-price.no-price {
  background: var(--mk-ground); color: var(--mk-ink-2); font-size: 12px; font-weight: 700;
  border-top: 1px solid var(--mk-rule);
}
a.item-card:hover .card-price.no-price { background: var(--mk-ground); color: var(--mk-ink-2); }

/* ---- 会社別 発売ソフト表 ---- */
.mk-count { margin: 0 0 8px; color: var(--mk-ink-2); }
.mk-count span { color: var(--mk-price); font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.mk-table-wrap { overflow-x: auto; background: var(--mk-paper); border: 1px solid var(--mk-rule); border-radius: 4px; }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table th { background: var(--mk-ink); color: #fff; text-align: left; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.mk-table td { padding: 9px 12px; border-top: 1px solid var(--mk-rule); line-height: 1.5; }
.mk-table tbody tr:nth-child(even) { background: var(--mk-ground); }
.mk-table tbody tr:hover { background: #fff6cc; }
.mk-table .c-media { width: 140px; white-space: nowrap; color: var(--mk-ink-2); }
.mk-table .c-date { width: 110px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-table td a { text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
.mk-table td a:hover { text-decoration: underline; }
/* 会社別リスト */
#center_main > ul { gap: 0 12px; }
#center_main > ul li a { text-decoration: none; font-weight: 700; }
@media (max-width: 768px) {
  .mk-table .c-media { width: 90px; white-space: normal; }
  .mk-table .c-date { width: 86px; }
  .mk-table th, .mk-table td { padding: 8px; }
}
.mk-table thead th, .mk-table th.c-media { background: var(--mk-ink); color: #fff; }
.breadcrumb { max-width: 1400px; margin: 0 auto; padding: 8px 20px 0; font-size: 12px; }
.mk-count span { font-size: 22px; }

/* ---- PC：サイドバーを軽くして本文幅を確保 ---- */
div#left_side, div#right_side { margin-left: 14px; margin-right: 14px; }
@media (min-width: 1024px) {
  div#left_side {
    position: sticky; top: 12px; align-self: flex-start;
    max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .marukin_menu { border-width: 1px; padding: 10px; }
}
div#right_side .right_game_rank { margin-top: 12px; }

/* ---- 検索：トップの主役 ---- */
#top_search { padding: 18px 20px 14px; border: 2px solid var(--mk-ink); box-shadow: 4px 4px 0 var(--mk-ink); }
#top_search form { display: flex; }
#top_search #search { flex: 1; min-width: 0; height: 48px; font-size: 16px; padding: 0 14px; box-sizing: border-box; }
#top_search #searchBtn { height: 48px; padding: 0 28px; font-size: 16px; font-weight: 900; cursor: pointer; border-radius: 0 4px 4px 0; }
#top_search #searchBtn:hover { background: var(--mk-price); }
@media (max-width: 768px) {
  #center_main { overflow-x: hidden; }
  #center_main iframe { max-width: 100%; }
}

/* ---- 商品一覧ページ（インラインstyleより強く） ---- */
#center_main h1.title { font-size: 20px !important; font-weight: 900; color: var(--mk-ink); background: none; clip-path: none; border: 0; border-bottom: 4px solid var(--mk-tag); padding: 4px 0 8px; margin: 6px 0 14px !important; }
#center_main h1.title::before { display: none; }
#center_main .section-title { background: var(--mk-paper); border: 1px solid var(--mk-rule); border-left: 6px solid var(--mk-tag); color: var(--mk-ink); }
#center_main .item-list-header strong { color: var(--mk-price); font-size: 18px; font-weight: 900; }
.item-list-wrap .item-card { flex-direction: row; text-align: left; align-items: flex-start; }
.item-list-wrap .item-card-img { align-self: center; }
.item-list-wrap .item-card-title { color: var(--mk-ink); }
.item-list-wrap .item-card-title a { color: var(--mk-ink); }
.item-list-wrap .item-card-price { display: inline-block; background: var(--mk-ink); color: var(--mk-tag); padding: 3px 12px; border-radius: 3px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.item-list-wrap a.item-card:hover .item-card-price { background: var(--mk-price); color: #fff; }
.item-list-wrap .item-card-price[style] { background: none; color: var(--mk-ink-2) !important; padding: 0; font-size: 12px !important; font-weight: 700 !important; }
.pagination a { border: 1px solid var(--mk-ink); color: var(--mk-ink); border-radius: 3px; background: var(--mk-paper); }
.pagination a:hover { background: var(--mk-tag); }
.pagination .current { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-tag); font-weight: 900; border-radius: 3px; }
.pagination .current.prev, .pagination .current.next { background: var(--mk-paper); color: #999; border-color: #bbb; }
.item-faq dt::before { color: var(--mk-ink); }
.item-faq dd::before { color: var(--mk-price); }

/* ---- 商品詳細 ---- */
.item-detail-title { color: var(--mk-ink); font-weight: 900; }
.item-meta-table th { background: var(--mk-ground); color: var(--mk-ink-2); }
.btn-kakaku, a.kakaku_irai { background: var(--mk-ink); border-bottom-color: #000; color: var(--mk-tag); font-weight: 700; }
.btn-kakaku:hover, a.kakaku_irai:hover { background: var(--mk-price); color: #fff; }
.price-table th { background: var(--mk-ink); color: #fff; }
#center_main .kaitori-box { background: var(--mk-tag); border: 2px solid var(--mk-ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--mk-ink); padding: 12px 18px 14px; }
#center_main .kaitori-box .label { color: var(--mk-ink); font-weight: 700; font-size: 13px; }
#center_main .kaitori-box .value { display: inline-block; margin: 4px 0; padding: 2px 14px; background: var(--mk-paper); color: var(--mk-price); font-size: 36px; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; border-radius: 3px; }
#center_main .kaitori-box .diff { color: var(--mk-ink-2); font-weight: 700; }
#center_main .used-sale-box { border: 1px solid var(--mk-rule); border-left: 6px solid var(--mk-ink); background: var(--mk-paper); }
#center_main .used-sale-box .value { color: var(--mk-ink); font-weight: 900; }
@media (max-width: 680px) { #center_main .kaitori-box .value { font-size: 28px; } }
.item-list-header { flex-wrap: wrap; gap: 6px 12px; }
.item-list-header > span { white-space: nowrap; }
@media (max-width: 680px) { #center_main > ul > li { width: 50% !important; box-sizing: border-box; } }