@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

/* ========================================================
   カリントウ専用：システム適応・自然な専門店リメイク版
======================================================== */
.kr-wrap { font-family: 'Noto Sans JP', sans-serif; background-color: #f4f7f9; color: #222; line-height: 1.5; font-size: 14px; }
.kr-wrap * { box-sizing: border-box; }
.kr-wrap a { text-decoration: none; color: #222; transition: 0.2s; }
.kr-wrap a:hover { color: #ff6600; }
.kr-wrap img { max-width: 100%; height: auto; vertical-align: bottom; }
.kr-wrap ul, .kr-wrap li { list-style: none; margin: 0; padding: 0; }

.kr-hide-pc { display: none !important; }
.kr-hide-sp { display: block !important; }
@media screen and (max-width: 1023px) {
  .kr-hide-pc { display: block !important; }
  .kr-hide-sp { display: none !important; }
}

/* --- 1. トップバー --- */
.kr-topbar { background: #e0e0e0; border-bottom: 1px solid #ccc; padding: 6px 15px; font-size: 11px; }
.kr-topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.kr-topbar-msg { color: #cc0000; font-weight: bold; }
.kr-topbar-nav { display: flex; gap: 15px; align-items: center; font-weight: bold; }
.kr-topbar-nav a:hover { color: #004494; }

.kr-x-icon { font-family: sans-serif; font-weight: bold; font-style: italic; background: #000; color: #fff !important; padding: 1px 5px; border-radius: 3px; font-size: 11px; margin-right: 3px; letter-spacing: -1px; }

/* --- 2. ヘッダー上段（ロゴと買取バナー） --- */
.kr-header-mid { background: #fff; padding: 15px; border-bottom: 1px solid #ddd; }
.kr-header-mid-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.kr-logo { width: 260px; flex-shrink: 0; }
.kr-banner { flex: 1; display: flex; justify-content: flex-end; }
.kr-banner a { display: block; width: 100%; max-width: 600px; }
.kr-banner img { width: 100%; border-radius: 4px; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.kr-banner a:hover img { border-color: #ff6600; transform: translateY(-2px); }

/* --- 3. ヘッダー下段（メニュー、検索、カート） --- */
.kr-header-bot { background: #004494; padding: 10px 15px; border-bottom: 3px solid #002255; }
.kr-header-bot-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 42px; }

.kr-menu { position: relative; height: 100%; }
.kr-menu-btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 0 15px; height: 100%; border-radius: 4px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: bold; font-size: 13px; }
.kr-menu-btn:hover { background: rgba(255,255,255,0.1); }
.kr-menu-list { position: absolute; top: 100%; left: 0; background: #fff; width: 220px; border: 2px solid #004494; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: none; z-index: 1000; margin-top: 5px; }
.kr-menu:hover .kr-menu-list { display: block; }
.kr-menu-list a { display: block; padding: 12px 15px; border-bottom: 1px dashed #eee; font-size: 13px; font-weight: bold; }
.kr-menu-list a:hover { background: #f0f4f8; color: #004494; padding-left: 20px; }

/* ★検索窓（カテゴリ絞り込みセレクトボックスの表示調整） */
.kr-search { flex: 1; height: 100%; }
.kr-search form { display: flex; align-items: center; height: 100%; background: #fff; border-radius: 4px; overflow: hidden; border: 2px solid #ccc; }
.kr-search form br { display: none !important; }
.kr-search select { border: none; background: #f8f8f8; padding: 0 10px; font-size: 12px; font-weight: bold; color: #555; outline: none; height: 100%; border-right: 1px solid #ddd; cursor: pointer; max-width: 150px; }
.kr-search input[type="text"] { flex: 1; border: none; padding: 0 15px; font-size: 14px; outline: none; background: #fff; height: 100%; min-width: 100px; }
.kr-search input[type="submit"], .kr-search button { background: #eee; color: #333; border: none; padding: 0 20px; font-size: 14px; cursor: pointer; border-left: 1px solid #ccc; font-weight: bold; height: 100%; transition: 0.2s; }
.kr-search input[type="submit"]:hover, .kr-search button:hover { background: #ddd; color: #004494; }

.kr-cart { height: 100%; flex-shrink: 0; }
.kr-cart a { display: flex; align-items: center; justify-content: center; gap: 8px; background: #003377; color: #fff; padding: 0 20px; height: 100%; border-radius: 4px; font-weight: bold; font-size: 14px; border: 1px solid #002255; transition: 0.2s; }
.kr-cart a:hover { background: #002255; }
.kr-cart .badge { background: #cc0000; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 11px; }

/* --- 4. トップページ専用 --- */
.kr-top-wrap { max-width: 1200px; margin: 20px auto; padding: 0 15px; }
.kr-genre-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.kr-genre-grid a { display: block; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.kr-genre-grid img { width: 100%; display: block; opacity: 0.95; transition: 0.2s; }
.kr-genre-grid a:hover { border-color: #004494; }
.kr-genre-grid a:hover img { opacity: 1; transform: scale(1.03); }

.kr-news { margin-top: 30px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.kr-news-title { background: #f8f8f8; color: #333; padding: 10px 15px; font-weight: bold; font-size: 14px; border-bottom: 1px solid #ddd; }
.kr-news-list { padding: 10px 15px; max-height: 150px; overflow-y: auto; }
.kr-news-list li { padding: 6px 0; border-bottom: 1px dashed #eee; font-size: 13px; display: flex; align-items: center; }
.kr-news-list li:last-child { border-bottom: none; }
.kr-news-date { color: #888; margin-right: 15px; flex-shrink: 0; font-size: 12px; }

/* --- 5. 下層ページ用レイアウト --- */
.kr-layout { max-width: 1200px; margin: 20px auto; display: flex; gap: 25px; padding: 0 15px; align-items: flex-start; }
.kr-sidebar { width: 260px; flex-shrink: 0; }
.kr-main { flex: 1; min-width: 0; background: #fff; padding: 20px; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }

.kr-cat-title { background: #003377; color: #fff; padding: 12px; font-weight: bold; font-size: 14px; text-align: center; border-radius: 4px 4px 0 0; }
.kr-cat-wrap { background: #fff; border: 1px solid #ddd; border-top: none; padding: 10px; border-radius: 0 0 4px 4px; margin-bottom: 20px; }
.kr-cat-item { border: 1px solid #eee; margin-bottom: 8px; background: #fafafa; }
.kr-cat-head { display: flex; border-bottom: 1px solid #eee; }
.kr-cat-head a { flex: 1; padding: 10px 5px 10px 8px; font-size: 10.5px; font-weight: bold; color: #222; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; }
.kr-cat-head a:hover { background: #f0f4f8; color: #004494; }
.kr-cat-btn { width: 40px; display: flex; justify-content: center; align-items: center; border-left: 1px solid #eee; cursor: pointer; color: #888; font-size: 16px; flex-shrink: 0; }
.kr-cat-btn:hover { background: #eee; color: #004494; }
.kr-cat-img img { width: 100%; display: block; border-bottom: 1px solid #eee; }

.kr-cat-sub { display: none; padding: 5px 0; background: #fff; }
.kr-cat-sub.is-open { display: block; }
.kr-cat-sub a { display: block; padding: 8px 10px 8px 25px; font-size: 12px; border-bottom: 1px dashed #eee; position: relative; }
.kr-cat-sub a::before { content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 10px; color: #ccc; }
.kr-cat-sub a:hover { background: #f9f9f9; color: #004494; }

/* ★「最近チェックした商品」の修正 */
.k-history { max-width: 1200px; margin: 40px auto 0; padding: 0 15px; }
.k-sec-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; border-bottom: 2px solid #004494; padding-bottom: 5px; }
.history-list { 
  display: flex; /* 横並びにする */
  flex-wrap: wrap; /* はみ出たら折り返す */
  gap: 15px; 
}
.history-item { 
  width: calc(20% - 12px); /* 5等分 */
  background: #fff; 
  border: 1px solid #ddd; 
  border-radius: 4px; 
  padding: 10px; 
  box-sizing: border-box; 
  text-align: center;
}
.history-img { margin-bottom: 10px; }
.history-img img { width: 100%; height: auto; object-fit: contain; aspect-ratio: 3/4; }
.history-name a { font-size: 11px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

@media screen and (max-width: 768px) {
  .kr-header-mid-inner { flex-direction: column; gap: 10px; padding: 10px; }
  .kr-logo { width: 220px; margin: 0 auto; }
  .kr-banner { width: 100%; }
  .kr-header-bot-inner { height: auto; flex-wrap: wrap; padding: 10px; }
  .kr-search { width: 100%; height: 40px; }
  .kr-search select { max-width: 100px; padding: 0 5px; font-size: 11px; } /* スマホ用セレクトボックス調整 */
  .kr-cart { width: 100%; height: 40px; }
  .kr-genre-grid { grid-template-columns: repeat(2, 1fr); }
  .kr-layout { flex-direction: column; }
  .kr-sidebar { width: 100%; }
  .history-item { width: calc(50% - 8px); } /* スマホは2等分 */
}

/* --- 6. フッター前カテゴリー --- */
.kr-foot-cat { background: #fff; border-top: 4px solid #004494; padding: 30px 15px; margin-top: 40px; }
.kr-foot-cat-inner { max-width: 1200px; margin: 0 auto; }
.kr-foot-cat h3 { font-size: 16px; margin-bottom: 15px; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.kr-foot-cat-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kr-foot-cat-list a { display: block; padding: 8px 10px; background: #f8f8f8; border: 1px solid #eee; font-size: 13px; position: relative; padding-left: 20px; font-weight: bold; }
.kr-foot-cat-list a::before { content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 8px; color: #aaa; }
.kr-foot-cat-list a:hover { background: #004494; color: #fff; border-color: #004494; }
.kr-foot-cat-list a:hover::before { color: #fff; }
@media screen and (max-width: 768px) { .kr-foot-cat-list { grid-template-columns: repeat(2, 1fr); } }

/* --- 7. フッター --- */
.kr-footer { background: #fff; color: #333; padding: 40px 15px 20px; border-top: 4px solid #004494; }
.kr-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.kr-footer-col { flex: 1; min-width: 180px; }
.kr-footer-logo { max-width: 220px; margin-bottom: 15px; }
.kr-footer-logo img { width: 100%; height: auto; display: block; }
.kr-footer-info { font-size: 12px; line-height: 1.8; color: #555; font-weight: bold; }
.kr-footer-col h4 { color: #004494; font-size: 14px; border-bottom: 2px solid #eee; padding-bottom: 8px; margin-bottom: 15px; font-weight: 900; }
.kr-footer-col a { color: #555; font-size: 12px; font-weight: bold; display: block; margin-bottom: 10px; transition: 0.2s; }
.kr-footer-col a:hover { color: #ff6600; text-decoration: underline; }
.kr-footer-contact-txt { font-size: 11px; margin-bottom: 10px; color: #555; font-weight: bold; }
.kr-contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #0056b3; color: #fff !important; padding: 10px 15px; border-radius: 4px; font-weight: bold; font-size: 12px; transition: 0.2s; width: 100%; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.kr-contact-btn:hover { background: #004494; transform: translateY(-1px); text-decoration: none !important; }
.kr-footer-email { font-size: 12px; font-weight: bold; color: #333; background: #f8f8f8; padding: 10px; border-radius: 4px; border: 1px solid #eee; display: flex; align-items: center; gap: 8px; }
.kr-footer-email i { color: #004494; font-size: 14px; }
.kr-copy { text-align: center; font-size: 11px; color: #777; background: #f4f7f9; padding: 15px; margin-top: 30px; border-top: 1px solid #ddd; }

/* 共通カートボタン */
form[action*="cart"] input[type="submit"], form[action*="cart"] button, .btn-add-cart {
  display: block !important; width: 100% !important; height: 45px !important;
  background: #004494 !important; color: #fff !important; font-size: 14px !important; font-weight: bold !important;
  border: 1px solid var(--dark-blue) !important; border-radius: 4px !important; cursor: pointer !important;
  margin-top: 10px !important; transition: 0.2s !important;
}
form[action*="cart"] input[type="submit"]:hover, form[action*="cart"] button:hover { background: #ff6600 !important; }
</style>