/* AFRO AUDIO 販売実績アーカイブ 共通CSS（detail_v11/customize.css 系デザイン流用） */
:root{--ink:#1a1a1a;--sub:#777;--line:#e7e7e7;--bg:#fff;--soft:#f6f7f8;--accent:#c0392b;}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);z-index:50;}
.hbar{display:flex;align-items:center;gap:16px;height:66px;}
/* 新ヘッダー（販売済アーカイブ共通・デプロイ済みindexから移植） */
.aa-hbar{gap:14px;}
.aa-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.aa-logo img{height:40px;width:auto;display:block;}
.aa-logo__txt{font-weight:800;font-size:20px;letter-spacing:.06em;color:#1a1a1a;}
.aa-badge{display:inline-flex;align-items:center;background:#1a1a1a;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 11px;border-radius:5px;white-space:nowrap;flex:0 0 auto;}
.aa-spacer{flex:1 1 auto;}
.aa-toshop{font-size:14px;font-weight:700;color:#1a1a1a;text-decoration:none;white-space:nowrap;flex:0 0 auto;}
.aa-toshop:hover{text-decoration:underline;}
.aa-kaitori{display:inline-flex;align-items:center;border:1.5px solid #c0392b;color:#c0392b;padding:6px 14px;border-radius:6px;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;text-decoration:none;flex:0 0 auto;}
.aa-kaitori:hover{background:#c0392b;color:#fff;text-decoration:none;}
/* 新ヘッダーの受け渡し検索（詳細・一覧 → ?q=でindexのリアルタイム検索へ渡す） */
/* 販売中(EC-CUBE)のヘッダー検索に合わせた見た目: 薄グレー角丸＋右端に虫めがねアイコン */
.aa-search{display:flex;align-items:center;background:#f5f5f5;border:1px solid #e3e3e3;border-radius:8px;overflow:hidden;flex:5 1 auto;min-width:150px;max-width:640px;height:40px;}
.aa-search input{flex:1;border:0;padding:0 14px;font-size:14px;outline:none;min-width:0;background:transparent;color:#1a1a1a;}
.aa-search input::placeholder{color:#999;}
.aa-search button{border:0;background:transparent;color:#777;padding:0 12px 0 4px;cursor:pointer;display:flex;align-items:center;}
.aa-search button svg{width:18px;height:18px;display:block;}
.aa-search button:hover{color:#1a1a1a;}
@media(max-width:767px){ .aa-hbar .aa-logo img{height:34px;} .aa-spacer{flex-basis:100%;height:0;} .aa-search{flex-basis:100%;} }
.logo{font-weight:800;font-size:22px;letter-spacing:.06em;} .logo small{display:block;font-size:10px;letter-spacing:.3em;color:var(--sub);font-weight:600;}
.archive-tag{font-size:11px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:2px 8px;letter-spacing:.08em;white-space:nowrap;}
.search{flex:1;display:flex;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;max-width:460px;}
.search input{flex:1;border:0;padding:10px 14px;font-size:14px;outline:none;min-width:0;} .search button{border:0;background:var(--ink);color:#fff;padding:0 18px;cursor:pointer;}
.navlink{font-size:14px;font-weight:700;white-space:nowrap;}
.navlink.kaitori{color:var(--accent);}
.crumb{font-size:12px;color:var(--sub);padding:16px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 詳細レイアウト */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding:8px 0 50px;}
.info__maker{display:inline-block;margin:0;font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.04em;}
.info__maker:hover{text-decoration:underline;}
.info__name{margin:6px 0 14px;font-size:21px;line-height:1.5;font-weight:700;}
.badges{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.badge{font-size:12px;padding:3px 11px;border-radius:4px;background:var(--ink);color:#fff;}
.badge.sold{background:var(--accent);}
/* バッジ並び順: ランクを左・販売済を右に（HTMLは触らず order で入れ替え） */
.badges .badge{order:0;} .badges .badge.sold{order:1;}
/* ランクバッジ色分け（動的 customize.css と同配色） */
.badge.is-a{background:#2e7d32;} .badge.is-b{background:#1565c0;} .badge.is-c{background:#e67e22;} .badge.is-d{background:#b9600f;}
.badge.is-genjo{background:#6b7280;} .badge.is-junk{background:#9e9e9e;} .badge.is-other{background:var(--ink);}
.price{font-size:26px;font-weight:800;margin:0;} .price small{font-size:12px;color:var(--sub);font-weight:500;margin-left:6px;}
.soldline{margin:8px 0 18px;font-size:14px;color:var(--sub);font-weight:700;}
.meta{font-size:12px;color:var(--sub);border-top:1px solid var(--line);margin-top:18px;padding-top:14px;}
.kaitori-box{margin-top:20px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:16px;}
.kaitori-box b{font-size:14px;} .kaitori-box p{margin:4px 0 10px;font-size:12px;color:var(--sub);}
.kaitori-box a{font-size:13px;font-weight:700;color:var(--accent);}
.live-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;border:1.5px solid var(--ink);border-radius:6px;padding:9px 18px;}
.live-link:hover{background:var(--ink);color:#fff;}

/* 説明（販売当時の情報） */
.spec{padding:34px 0;border-top:1px solid var(--line);}
.spec h2{font-size:18px;margin:0 0 16px;display:flex;align-items:center;gap:10px;}
.spec h2::before{content:"";width:4px;height:19px;background:var(--accent);border-radius:2px;}
.archive-desc{font-size:14px;max-width:860px;overflow-wrap:break-word;}
.archive-desc center{text-align:left;}
.archive-desc table{width:100%!important;max-width:760px;border-collapse:collapse!important;margin:8px 0;}
.archive-desc td,.archive-desc th{border:1px solid var(--line)!important;padding:9px 13px!important;font-size:14px;text-align:left;vertical-align:top;background:#fff!important;}
.archive-desc td[bgcolor],.archive-desc th[bgcolor]{background:var(--soft)!important;font-weight:700;white-space:nowrap;width:160px;}
.archive-desc font{color:inherit!important;}
.archive-desc img{display:block;margin:6px 0;height:auto;}
/* スペックをモダンな表に整形（afospec：項目:値のときのみ。動的 detail.twig と同デザイン） */
.afospec-wrap{font-size:14px;max-width:860px;}
.spec table.afospec{width:100%;max-width:780px;border-collapse:collapse;}
.spec table.afospec th,.spec table.afospec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top;}
.spec table.afospec th{width:150px;background:var(--soft);font-weight:700;white-space:nowrap;}
.spec .afonote{margin:14px 0 0;font-size:13px;color:#444;background:var(--soft);padding:14px;border-radius:8px;white-space:normal;}

/* ギャラリー（動的 afro_gallery.twig v1.4 と同期） */
.afro-gallery{max-width:100%;margin:0 0 16px;}
.afro-gallery__main{position:relative;width:100%;background:#fff;border:1px solid #e0e0e0;overflow:hidden;cursor:crosshair;}
.afro-gallery__main img{display:block;width:100%;height:auto;transition:transform .08s ease-out;will-change:transform;}
.afro-gallery__main.is-inner img{transition:none;}
/* メイン画像の虫眼鏡アイコン（Font Awesome非依存・インラインSVG） */
.afro-gallery__main::after{content:"";position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:4px;background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") center no-repeat;pointer-events:none;}
.afro-lens{position:absolute;border:1px solid #6aa;background:rgba(120,170,200,.25);pointer-events:none;display:none;z-index:5;}
.afro-zoomwin{position:fixed;border:1px solid #ccc;background:#fff no-repeat;box-shadow:0 4px 18px rgba(0,0,0,.25);display:none;z-index:99998;}
.afro-gallery__thumbs{display:flex;gap:6px;margin-top:8px;flex-wrap:nowrap;overflow:hidden;list-style:none;padding:0;}
.afro-gallery__thumbs li{flex:0 0 64px;width:64px;height:64px;border:1px solid #e0e0e0;overflow:hidden;cursor:pointer;opacity:.7;transition:opacity .15s;position:relative;}
.afro-gallery__thumbs li.is-active{opacity:1;border-color:#0a7;}
.afro-gallery__thumbs img{width:100%;height:100%;object-fit:cover;}
.afro-thumb-more img{filter:brightness(.45);}
.afro-thumb-more__txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
/* 旧連結画像（縦長ストリップ）用: 縦積み表示（静的のみ） */
.afro-stack img{display:block;width:100%;height:auto;border:1px solid #e0e0e0;margin:0 0 10px;}

/* ライトボックス */
.afro-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:99999;display:none;align-items:center;justify-content:center;}
.afro-lightbox__body{display:flex;flex-direction:column;align-items:center;gap:12px;max-height:96vh;}
.afro-lightbox.is-open{display:flex;}
.afro-lightbox__stage{max-width:92vw;max-height:82vh;overflow:hidden;cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none;}
.afro-lightbox__stage img{max-width:92vw;max-height:82vh;object-fit:contain;display:block;transition:transform .08s ease-out;transform-origin:center center;}
.afro-lightbox__stage.is-zoomed{cursor:default;} .afro-lightbox__stage.is-zoomed img{transition:none;}
.afro-lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:none;font-size:34px;width:54px;height:80px;cursor:pointer;user-select:none;z-index:2;}
.afro-lightbox__btn:hover{background:rgba(255,255,255,.3);} .afro-lightbox__prev{left:12px;} .afro-lightbox__next{right:12px;}
.afro-lightbox__close{position:absolute;top:14px;right:18px;background:none;border:none;color:#fff;font-size:40px;line-height:1;cursor:pointer;z-index:2;}
.afro-lightbox__count{position:absolute;top:16px;left:0;right:0;text-align:center;color:#fff;font-size:14px;}
.afro-lightbox__strip{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-height:12vh;overflow-y:auto;max-width:92vw;padding:2px;}
.afro-lightbox__strip img{width:44px;height:44px;object-fit:cover;border:2px solid transparent;cursor:pointer;opacity:.6;}
.afro-lightbox__strip img.is-active{opacity:1;border-color:#fff;}
@media(max-width:767px){
  .afro-gallery__thumbs li{flex-basis:54px;width:54px;height:54px;}
  /* ===== スマホ・ライトボックス(Amazon式) ===== */
  .afro-lightbox{background:#fff;}
  .afro-lightbox__btn{display:none;}
  .afro-lightbox__close{color:#111;font-size:32px;top:6px;right:12px;z-index:6;}
  .afro-lightbox__count{color:#111;top:12px;font-size:13px;z-index:6;}
  .afro-lightbox__body{flex-direction:column;gap:0;width:100vw;height:100dvh;max-height:100dvh;justify-content:flex-start;}
  .afro-lightbox__stage{flex:1 1 auto;width:100vw;max-width:100vw;max-height:none;display:flex;align-items:center;justify-content:center;}
  .afro-lightbox__stage img{max-width:100vw;width:auto;max-height:100%;object-fit:contain;}
  .afro-lightbox__strip{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start;gap:0;padding:0;margin:0;width:100vw;max-width:100vw;max-height:none;overflow-x:auto;overflow-y:hidden;background:#fff;-webkit-overflow-scrolling:touch;}
  .afro-lightbox__strip img{flex:0 0 64px;width:64px;height:64px;border-width:2px;border-color:transparent;opacity:.85;}
  .afro-lightbox__strip img.is-active{opacity:1;border-color:#111;}
}

/* === インデックス/検索ページ === */
.idx-h1{font-size:24px;margin:6px 0 8px;} .idx-h1 small{font-size:13px;color:var(--sub);font-weight:600;margin-left:12px;}
.idx-h2{font-size:17px;margin:34px 0 12px;display:flex;align-items:center;gap:10px;}
.idx-h2::before{content:"";width:4px;height:18px;background:var(--accent);border-radius:2px;}
.idx-h2--main{font-size:24px;} .idx-h2--main::before{height:24px;}  /* 最近の販売済商品=一覧タイトルと同格に */
.idx-lead{font-size:14px;color:#444;margin:0 0 18px;} .idx-lead a{color:var(--accent);font-weight:700;}
/* ヒーロー検索: ヘッダー検索(販売中スタイル)に合わせ 薄グレー＋虫めがね。サイズだけ大きめ */
.bigsearch{display:flex;align-items:center;background:#f5f5f5;border:1px solid #e3e3e3;border-radius:10px;overflow:hidden;max-width:640px;height:52px;margin:0 0 10px;}
.bigsearch input{flex:1;border:0;padding:0 18px;font-size:16px;outline:none;min-width:0;background:transparent;color:#1a1a1a;}
.bigsearch input::placeholder{color:#999;}
.bigsearch button{border:0;background:transparent;color:#777;padding:0 16px;cursor:pointer;display:flex;align-items:center;}
.bigsearch button svg{width:22px;height:22px;display:block;}
.bigsearch button:hover{color:#1a1a1a;}
.rmeta{font-size:13px;color:var(--sub);margin:6px 0 20px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.mk-chip,.yr-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:18px;padding:6px 14px;font-size:13px;background:#fff;}
.mk-chip:hover,.yr-chip:hover{border-color:var(--ink);}
.mk-chip span,.yr-chip span{font-size:11px;color:var(--sub);}
.mk-chip.more{font-weight:700;border-style:dashed;}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;margin:18px 0;}
.card__img{position:relative;aspect-ratio:1/1;background:var(--soft);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.card:hover .card__img img{transform:scale(1.04);}
.card .rank{position:absolute;top:8px;left:8px;background:rgba(26,26,26,.82);color:#fff;font-size:11px;padding:2px 8px;border-radius:3px;font-weight:700;}
.card .rank.is-a{background:#2e7d32;} .card .rank.is-b{background:#1565c0;} .card .rank.is-c{background:#e67e22;} .card .rank.is-d{background:#b9600f;} .card .rank.is-genjo{background:#6b7280;} .card .rank.is-junk{background:#9e9e9e;}
.card__body{padding:9px 2px 0;display:flex;flex-direction:column;}
.card__name{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin:0 0 6px;font-size:13px;line-height:1.45;}
.card__nametext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card__id{flex-shrink:0;font-size:11px;color:var(--sub);white-space:nowrap;font-weight:400;}
.card__priceRow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;}
.card__price{margin:0;font-size:15px;font-weight:800;} .card__price span{font-size:10px;color:var(--sub);font-weight:500;margin-left:4px;}
.card__year{margin:0;font-size:11px;color:var(--sub);white-space:nowrap;}
/* === グリッド/一覧 切替（動的 customize.js の .afro-items.is-list を静的カードに移植） === */
.aa-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0 18px;}
/* 年代別/メーカー別ページ: ツールバー左の「移動」チップ帯（多いので横スクロール、トグルは右に固定） */
.aa-tbnav{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:7px;}      /* 年代帯: 折り返して全表示(スクロールバー無し) */
.aa-tbnav.is-fit{flex-wrap:nowrap;overflow:hidden;}                            /* メーカー帯: 1行に収め溢れは隠す(JSが幅調整) */
.aa-tbnav .yr-chip{flex:0 0 auto;padding:5px 12px;font-size:12.5px;white-space:nowrap;}
.yr-chip.is-cur{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700;cursor:default;user-select:none;}
.yr-chip.yr-more{color:var(--sub);font-weight:600;}
/* 隠しメニュー: 進行中の年(yr-future)は既定で非表示。現在年チップのダブルクリックで .show-future が付き表示 */
.yr-future{display:none;}
.aa-tbnav.show-future .yr-future{display:inline-flex;}
.aa-viewtoggle{height:36px;display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
.aa-viewtoggle button{height:100%;display:flex;align-items:center;gap:6px;background:#fff;border:0;padding:0 13px;font-size:12.5px;color:var(--sub);cursor:pointer;font-family:inherit;}
.aa-viewtoggle button.is-active{background:var(--ink);color:#fff;font-weight:700;}
.aa-viewtoggle button:not(:last-child){border-right:1px solid var(--line);}
.sgrid.is-list{display:flex;flex-direction:column;gap:0;}
.sgrid.is-list .card{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start;padding:16px 8px;border-bottom:1px solid var(--line);}
.sgrid.is-list .card:hover{background:var(--soft);}
.sgrid.is-list .card:hover .card__img img{transform:none;}
.sgrid.is-list .card__img{width:100%;aspect-ratio:1/1;}
.sgrid.is-list .card__body{padding:0;}
.sgrid.is-list .card__name{display:block;font-size:15px;font-weight:700;line-height:1.5;margin:0 0 6px;}
.sgrid.is-list .card__nametext{display:inline;-webkit-line-clamp:none;overflow:visible;}
.sgrid.is-list .card__id{display:inline;margin-left:8px;font-size:12px;}
.sgrid.is-list .card__priceRow{justify-content:flex-start;gap:14px;}
.sgrid.is-list .card__price{font-size:19px;margin:0;min-width:150px;text-align:right;}  /* 固定幅＋右寄せで桁を揃える(販売中と同じ) */
.sgrid.is-list .card__year{font-size:13px;}
@media(max-width:767px){
  .aa-viewtoggle button{font-size:0;padding:0 13px;}
  .aa-viewtoggle button::before{font-size:15px;line-height:1;}
  .aa-viewtoggle button[data-view="grid"]::before{content:"\25A6";}
  .aa-viewtoggle button[data-view="list"]::before{content:"\2630";}
  .sgrid.is-list .card{grid-template-columns:90px 1fr;gap:12px;padding:12px 4px;}
  .sgrid.is-list .card__name{font-size:14px;}
  .sgrid.is-list .card__price{font-size:17px;min-width:118px;}
}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0;font-size:14px;}
.pager a,.pager b,.pager span{padding:7px 13px;border:1px solid var(--line);border-radius:6px;}
.pager b{background:var(--ink);color:#fff;border-color:var(--ink);} .pager a:hover{border-color:var(--ink);} .pager span{border:0;}
.mk-g{font-size:15px;margin:26px 0 8px;color:var(--sub);border-bottom:1px solid var(--line);padding-bottom:4px;}
.mk-list{list-style:none;padding:0;margin:0;columns:3;column-gap:30px;font-size:14px;}
.mk-list li{display:flex;justify-content:space-between;padding:5px 2px;break-inside:avoid;}
.mk-list li span{color:var(--sub);font-size:12px;}
.mk-sortbar{margin:8px 0 18px;} .mk-sortbar button{user-select:none;}
.mk-ranked{font-size:14.5px;} .mk-ranked li span{color:var(--ink);font-weight:700;font-size:12.5px;}
/* 隠しコマンド: 件数順ダブルクリックで横バー付きランキング(.is-bars)。普段 .mk-bar は非表示 */
.mk-bar{display:none;}
.mk-ranked.is-bars{columns:1;counter-reset:rk;}
.mk-ranked.is-bars li{display:block;padding:8px 2px;}
.mk-ranked.is-bars li>a::before{counter-increment:rk;content:counter(rk)". ";color:var(--sub);font-weight:700;font-size:12px;margin-right:3px;}
.mk-ranked.is-bars li>span{float:right;}
.mk-ranked.is-bars .mk-bar{display:block;clear:both;width:var(--w);height:6px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#2b6cb0,#4299e1);}
.mk-ranked.is-bars li:first-child .mk-bar{background:linear-gradient(90deg,#c8941b,#e6b84a);}
@media(max-width:767px){.mk-list{columns:1;}.sgrid{grid-template-columns:repeat(2,1fr);gap:16px 12px;}}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--sub);font-size:12px;margin-top:40px;}
footer a{text-decoration:underline;}
@media(max-width:900px){
  .detail{grid-template-columns:1fr;gap:24px;}
  .hbar{flex-wrap:wrap;height:auto;padding:12px 0;}
  .search,.aa-search{order:5;flex-basis:100%;max-width:none;}
}