/* ========================================================= AFRO AUDIO カスタムCSS (user_data/assets/css/customize.css) - default_frame が の最後に読み込む = style.css を上書き可 - 共通トークン / ヘッダーの買取リンク・カテゴリバー / 一覧・トップ用カードとツールバー ========================================================= */ :root{ --afro-ink:#1a1a1a; --afro-sub:#777; --afro-line:#e7e7e7; --afro-soft:#f6f7f8; --afro-accent:#c0392b; } /* ---- ページ左右余白(スマホ/PCとも端に張り付かないように) ---- */ .afro-lp, .pd{padding-left:20px;padding-right:20px;} @media(max-width:767px){ .afro-home, .afro-lp, .pd{padding-left:14px;padding-right:14px;} } /* ---- ヘッダー検索: カテゴリ選択プルダウンを隠して「フル幅の検索窓」だけにする ---- */ .ec-headerNaviRole__search select, .ec-headerSearch__category{display:none !important;} /* カテゴリ選択を消した後、キーワード欄を潰さず横いっぱいに広げる */ .ec-headerNaviRole__left{flex:1 1 auto;min-width:0;display:flex;align-items:center;} /* 検索窓: 右側クラスタ(買取ボタン)直前まで最大化し、ウィンドウ幅に追従して伸縮 */ .ec-headerNaviRole__search{display:block;flex:1 1 auto;width:100%;max-width:none;min-width:0;margin-right:16px;} /* 右側クラスタは標準の固定幅をやめて中身サイズに(余白を検索窓へ回す)。標準CSSより優先させるため!important必須 */ .ec-headerNaviRole__right{flex:0 0 auto !important;width:auto !important;} /* ロゴと検索窓の間: 挨拶/ログインリンク */ .afro-greet{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;color:#666;margin:0 6px;} .afro-greet a{color:#222;text-decoration:none;font-weight:600;} .afro-greet a:hover{text-decoration:underline;} .afro-greet__name{color:var(--afro-accent) !important;} .afro-greet__sep{color:#bbb;} .ec-headerSearch{display:block;width:100%;} .ec-headerSearch .searchform{display:block !important;width:100% !important;} /* 角はゆるく四角寄り(少しだけ丸める)。標準のfloat:rightを解除して窓を左いっぱい(ロゴ側)まで伸ばす */ .ec-headerSearch__keyword{float:none !important;width:100% !important;min-width:0;margin:0;position:relative;border-radius:8px !important;} .ec-headerSearch__keyword .ec-input, .ec-headerSearch__keyword input[type="search"], .ec-headerSearch__keyword input[type="text"], .ec-headerNaviRole__search input[type="search"], .ec-headerNaviRole__search input[type="text"]{width:100% !important;box-sizing:border-box;border-radius:8px !important;} /* ---- ヘッダーロゴ(画像/ヘッダー最上段の左端=検索窓の左) ---- */ .ec-headerTitle{display:none !important;} /* 標準の中央ロゴ枠は隠す(ロゴはヘッダーバー内に置く) */ .ec-headerNaviRole{display:flex;align-items:center;gap:6px;} .afro-hlogo{flex:0 0 auto;display:inline-flex;align-items:center;margin-right:14px;} /* 右余白を左(20px)に合わせる(gap6+14=20) */ .afro-hlogo img{height:17px;width:auto;display:block;} @media(max-width:767px){ .afro-hlogo img{height:30px;} } /* ---- ヘッダー右側: 買取ボタン・アカウントアイコンを1行で整列 ---- */ .ec-headerNaviRole__right{display:flex;align-items:center;gap:16px;} /* 買取: アクセント枠ボタン化(主力導線として目立たせる) */ .afro-kaitori-link{display:inline-flex;align-items:center;border:1.5px solid var(--afro-accent);color:var(--afro-accent);padding:6px 14px;border-radius:6px;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;margin-right:0;text-decoration:none;} .afro-kaitori-link:hover{background:var(--afro-accent);color:#fff;text-decoration:none;} /* アカウント系(会員登録/お気に入り/ログイン)はアイコンのみ＋ホバーで名称ツールチップ → 1行に収める */ .ec-headerNaviRole__nav{flex:0 0 auto;} .ec-headerNav{display:flex !important;align-items:center;gap:18px;flex-wrap:nowrap;} .ec-headerNav__item{margin:0 !important;display:inline-flex !important;} .ec-headerNav__item a{position:relative;display:inline-flex;align-items:center;justify-content:center;} .ec-headerNav__itemIcon{font-size:20px;margin:0 !important;} .ec-headerNav__itemLink{position:absolute !important;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#1a1a1a !important;color:#fff !important;font-size:12px;line-height:1;padding:5px 9px;border-radius:4px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;z-index:80;font-weight:400;box-shadow:0 2px 8px rgba(0,0,0,.25);} .ec-headerNav__item a:hover .ec-headerNav__itemLink{opacity:1;visibility:visible;} /* ---- 未ログイン: 認証はテキストで右上に集約(ログイン → 新規会員登録) ---- */ .afro-auth{display:inline-flex;align-items:center;gap:12px;} .afro-auth__login{font-size:14px;font-weight:600;color:#333 !important;text-decoration:none;white-space:nowrap;} .afro-auth__login:hover{text-decoration:underline;} /* 新規会員登録は少しだけ目立たせる。ただし買取(赤ボタン)と競合しないようニュートラルな枠ボタン */ .afro-auth__register{display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:#333 !important;border:1.5px solid #ccc;border-radius:6px;padding:6px 14px;line-height:1;white-space:nowrap;text-decoration:none;} .afro-auth__register:hover{border-color:#333;background:var(--afro-soft);text-decoration:none;} /* ---- アカウント ドロップダウン(ログイン時): ログアウト誤クリック防止のため1階層下にまとめる ---- */ .afro-acct{position:relative;} .afro-acct__btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:4px 6px;color:inherit;line-height:1;border-radius:6px;} .afro-acct__btn:hover{background:var(--afro-soft);} .afro-acct__btn .ec-headerNav__itemIcon{font-size:20px;} .afro-acct__name{font-size:14px;font-weight:600;color:#333;white-space:nowrap;} .afro-acct__caret{font-size:9px;color:#888;transition:transform .2s;} .afro-acct.is-open .afro-acct__caret{transform:rotate(180deg);} .afro-acct__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:#fff;border:1px solid var(--afro-line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:6px;display:none;z-index:90;} .afro-acct.is-open .afro-acct__menu{display:block;} .afro-acct__item{display:flex !important;align-items:center;gap:10px;padding:10px 12px;font-size:14px;color:#333 !important;text-decoration:none;border-radius:6px;white-space:nowrap;justify-content:flex-start !important;} .afro-acct__item:hover{background:var(--afro-soft);color:var(--afro-ink);} .afro-acct__item i{color:#999;width:18px;text-align:center;font-size:15px;} .afro-acct__logout{border-top:1px solid var(--afro-line);margin-top:4px;padding-top:11px;color:var(--afro-accent) !important;} .afro-acct__logout:hover{background:#fdecea;color:var(--afro-accent);} .afro-acct__logout i{color:var(--afro-accent) !important;} /* ---- カテゴリバー(ヘッダー下) ---- */ .afro-catbar{border-top:1px solid var(--afro-line);background:#fff;} .afro-catbar__inner{max-width:1180px;margin:0 auto;padding:0 20px;position:relative;} .afro-catnav{display:flex;flex-wrap:wrap;gap:2px 4px;padding:5px 0;} .afro-catnav__item{padding:9px 12px;font-size:13px;color:#444;border-radius:6px;text-decoration:none;} .afro-catnav__item:hover{background:var(--afro-soft);color:var(--afro-ink);} .afro-catnav__item.is-strong{font-weight:700;color:var(--afro-ink);} .afro-catmenu{display:none;padding:8px 0;} .afro-catmenu__btn{display:flex;align-items:center;gap:7px;background:var(--afro-ink);color:#fff;border:0;border-radius:6px;padding:9px 15px;font-size:14px;font-weight:700;cursor:pointer;} .afro-car{font-size:11px;transition:transform .2s;} .afro-catmenu.is-open .afro-car{transform:rotate(180deg);} .afro-mm{position:absolute;top:calc(100% + 6px);left:20px;width:min(560px,calc(100% - 40px));background:#fff;border:1px solid var(--afro-line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.13);padding:14px;display:none;z-index:60;} .afro-catmenu.is-open .afro-mm{display:block;} .afro-mm__h{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--afro-sub);padding:0 8px 10px;margin:0;} .afro-mm__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 10px;} .afro-mm__item{display:block;padding:9px 10px;font-size:13.5px;border-radius:6px;color:#333;text-decoration:none;} .afro-mm__item:hover{background:var(--afro-soft);color:var(--afro-ink);} @media(max-width:900px){ .afro-catnav{display:none;} .afro-catmenu{display:block;} } /* スマホでは「自作カテゴリバーのプルダウン」を正(売約済の位置・販売済・買取も入る)とし、 EC4標準のハンバーガー(SPナビ)は隠してメニューを1系統に統一する。 検索はヘッダー上に出して使えるようにする。 */ /* 幅狭(タブレット/小型ノート)〜スマホ: カテゴリバーのハンバーガー化(900px)と基準を揃え、 ヘッダーを縦積み＋中央寄せにする。これより上の幅でアイコンが左寄りに崩れるのを防ぐ。 */ @media(max-width:900px){ .ec-headerRole__navSP{display:none !important;} /* EC4標準ハンバーガーを隠す */ .afro-catbar{display:block !important;} /* 自作バーは表示 */ /* ロゴは中央／その下にアイコン中央／さらに下に検索フル幅 */ .ec-headerNaviRole{flex-wrap:wrap;} .afro-hlogo{order:1;flex:1 1 100%;justify-content:center;margin-right:0;} .afro-greet{order:2;flex:1 1 100%;justify-content:center;margin:2px 0 0;} .ec-headerNaviRole__right{order:3;flex:1 1 100% !important;width:100% !important;display:flex !important;justify-content:center !important;align-items:center;gap:18px;margin:0 !important;} .ec-headerNaviRole__right > *{margin-left:0 !important;margin-right:0 !important;flex:0 0 auto;} .afro-kaitori-link{margin-right:0 !important;} .ec-headerNaviRole__left{order:4;flex:1 1 100%;width:100%;} .ec-headerNaviRole__search{display:block !important;width:100% !important;max-width:none !important;flex:1 1 100% !important;margin:6px 0 4px !important;} .ec-headerSearch, .ec-headerSearch .searchform, .ec-headerSearch__keyword{width:100% !important;} .ec-headerSearch__keyword .ec-input, .ec-headerSearch__keyword input[type="search"], .ec-headerSearch__keyword input[type="text"]{width:100% !important;height:46px !important;font-size:16px !important;padding-left:16px !important;} } /* ---- 一覧・トップ用 商品カード(afro-) ---- */ .afro-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;list-style:none;padding:0;margin:0;} .afro-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;} .afro-card__img{position:relative;aspect-ratio:1/1;background:var(--afro-soft);border:1px solid var(--afro-line);border-radius:8px;overflow:hidden;} .afro-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;} .afro-card:hover .afro-card__img img{transform:scale(1.04);} .afro-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;letter-spacing:.02em;} /* ランク別 色分け(一覧バッジ・詳細インライン共通)。状態が一目で分かるように */ .afro-rank.is-a{background:#2e7d32;} /* S/A ＝ 良 緑 */ .afro-rank.is-b{background:#1565c0;} /* B ＝ 青 */ .afro-rank.is-c{background:#e67e22;} /* C ＝ 橙 */ .afro-rank.is-d{background:#b9600f;} /* D ＝ 濃橙 */ .afro-rank.is-genjo{background:#6b7280;} /* 現状 ＝ グレー */ .afro-rank.is-junk{background:#9e9e9e;} /* ジャンク ＝ 明グレー */ .afro-rank.is-other{background:rgba(26,26,26,.82);} /* 新着(NEW)バッジ：カード画像の右上(ランクは左上なので被らない)。登録日ベースで自動表示 */ .afro-new{position:absolute;top:8px;right:8px;z-index:2;background:#c0392b;color:#fff;font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:3px;letter-spacing:.06em;} /* アクセス数（スタッフのみ表示）：カード画像の左下(左上=ランク・右上=NEWと被らない)。半透明黒に白数字だけ */ .afro-views{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;line-height:1;padding:3px 7px;border-radius:3px;font-variant-numeric:tabular-nums;} /* 詳細ページのタイトル先頭に置くインラインバッジ */ .afro-rank--inline{position:static;display:inline-block;vertical-align:middle;margin-right:10px;font-size:13px;padding:3px 10px;border-radius:4px;} .afro-card__body{padding:10px 2px 0;display:flex;flex-direction:column;flex:1;} .afro-card__name{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin:0 0 6px;font-size:13.5px;line-height:1.45;} .afro-items:not(.is-list) .afro-card__nametext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .afro-card__code{flex-shrink:0;font-size:11px;color:var(--afro-sub);white-space:nowrap;font-weight:400;} .afro-card__priceRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;} .afro-card__price{margin:0;font-size:17px;font-weight:800;} .afro-card__price span{font-size:10px;color:var(--afro-sub);font-weight:500;margin-left:4px;} .afro-card__stock{font-size:11px;font-weight:700;color:#1a7a3c;background:#eaf6ee;border:1px solid #cfe9d8;border-radius:4px;padding:2px 8px;white-space:nowrap;} .afro-card__stock--sold{color:#fff;background:var(--afro-accent);border-color:var(--afro-accent);} .afro-items.is-list .afro-ex-sold{color:var(--afro-accent);font-weight:700;} .afro-card__extra{display:none;} /* 一覧表示(リスト) */ .afro-items.is-list{display:flex;flex-direction:column;gap:0;} .afro-items.is-list .afro-card{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start;padding:16px 8px;border-bottom:1px solid var(--afro-line);} .afro-items.is-list .afro-card:hover{background:var(--afro-soft);} .afro-items.is-list .afro-card__img{width:100%;aspect-ratio:1/1;} .afro-items.is-list .afro-card__body{padding:0;} .afro-items.is-list .afro-card__name{display:block;font-size:15px;font-weight:700;margin:0 0 4px;} .afro-items.is-list .afro-card__code{display:inline;margin-left:8px;white-space:nowrap;} .afro-items.is-list .afro-card__priceRow{margin:0 0 6px;display:flex;align-items:center;justify-content:flex-start;gap:12px;} .afro-items.is-list .afro-card__price{font-size:19px;min-width:150px;text-align:right;} /* 固定幅＋右寄せで桁を揃える */ .afro-items.is-list .afro-card__stock{display:inline-flex;align-items:center;} /* 価格の横に在庫を同居 */ .afro-items.is-list .afro-card__extra{display:flex;flex-direction:column;gap:4px;} .afro-items.is-list .afro-ex{font-size:12px;color:var(--afro-sub);} .afro-items.is-list .afro-ex-stock{color:#1a7a3c;font-weight:700;} .afro-items.is-list .afro-ex-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#444;font-size:12.5px;line-height:1.55;max-width:820px;} @media(max-width:900px){ .afro-items.is-list .afro-card{grid-template-columns:90px 1fr;} .afro-items.is-list .afro-card__price{min-width:118px;font-size:17px;} /* スマホは枠を詰める */ } /* スマホは2列固定(アーカイブと同刻み・auto-fillは768px以上で2→3→4→5) */ @media(max-width:767px){ .afro-items{grid-template-columns:repeat(2,1fr);gap:16px 12px;} /* グリッド/一覧トグル: スマホはアイコンのみ(テキスト「グリッド」「一覧」を非表示) */ .afro-viewtoggle button{font-size:0 !important;padding:0 13px;} .afro-viewtoggle button::before{font-size:15px;line-height:1;} .afro-viewtoggle button[data-view="grid"]::before{content:"\25A6";} .afro-viewtoggle button[data-view="list"]::before{content:"\2630";} /* トップの「すべての商品を見る →」はスマホでは非表示 */ .afro-shead__right > a{display:none;} } /* ---- ツールバー(件数/並べ替え/表示切替) ---- */ .afro-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--afro-line);border-bottom:1px solid var(--afro-line);margin-bottom:24px;} .afro-toolbar__left{font-size:13px;color:var(--afro-sub);} .afro-toolbar__right{display:flex;align-items:center;gap:12px;} .afro-viewtoggle{height:38px;display:inline-flex;border:1px solid var(--afro-line);border-radius:7px;overflow:hidden;} .afro-viewtoggle button{height:100%;display:flex;align-items:center;gap:6px;background:#fff;border:0;padding:0 13px;font-size:12.5px;color:var(--afro-sub);cursor:pointer;} .afro-viewtoggle button.is-active{background:var(--afro-ink);color:#fff;font-weight:700;} .afro-viewtoggle button:not(:last-child){border-right:1px solid var(--afro-line);} /* ---- セクション見出し(トップ) ---- */ .afro-shead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 20px;} .afro-shead h2{margin:0;font-size:19px;letter-spacing:.05em;display:flex;align-items:center;gap:10px;} .afro-shead h2::before{content:"";width:4px;height:20px;background:var(--afro-accent);display:inline-block;border-radius:2px;} .afro-shead__right{display:flex;align-items:center;gap:14px;} .afro-shead__right a{font-size:13px;color:var(--afro-sub);text-decoration:none;} /* ---- メーカー別買取タイル(トップ) ---- */ .afro-kaitori-sec{background:var(--afro-soft);border-top:1px solid var(--afro-line);margin-top:40px;padding:36px 0;} .afro-kgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;} .afro-kbuy{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;background:#fff;border:1px solid var(--afro-line);border-radius:8px;text-decoration:none;color:inherit;transition:.15s;} .afro-kbuy:hover{border-color:var(--afro-accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.06);} .afro-kbuy b{font-size:13px;font-weight:700;text-align:center;line-height:1.3;} .afro-kbuy span{font-size:11px;color:var(--afro-accent);font-weight:700;} @media(max-width:900px){.afro-kgrid{grid-template-columns:repeat(3,1fr);}} /* ---- ご利用ガイド等の自由ページ ---- */ .afro-guide{max-width:860px;margin:0 auto;padding:8px 0 44px;line-height:1.8;color:#333;} .afro-guide__lead{font-size:15px;color:#555;margin:0 0 24px;} .afro-guide__toc{display:flex;flex-wrap:wrap;gap:8px 16px;background:var(--afro-soft);border:1px solid var(--afro-line);border-radius:10px;padding:14px 18px;margin:0 0 30px;} .afro-guide__toc a{font-size:13.5px;color:var(--afro-ink);text-decoration:none;font-weight:600;} .afro-guide__toc a:hover{color:var(--afro-accent);text-decoration:underline;} .afro-guide__sec{margin:0 0 36px;scroll-margin-top:90px;} .afro-guide__sec h2{font-size:19px;font-weight:700;border-left:4px solid var(--afro-accent);padding-left:12px;margin:0 0 14px;} .afro-guide__sec p{margin:0 0 12px;} .afro-guide__note{font-size:13px;color:#777;} .afro-guide__list{margin:0 0 12px;padding-left:1.4em;} .afro-guide__list li{margin:3px 0;} .afro-ranktable{width:100%;border-collapse:collapse;margin:0 0 8px;} .afro-ranktable td{border-bottom:1px solid var(--afro-line);padding:10px 8px;vertical-align:top;font-size:14px;} .afro-ranktable td:first-child{white-space:nowrap;width:1%;} .afro-guide details{border:1px solid var(--afro-line);border-radius:8px;margin:0 0 8px;padding:0 16px;} .afro-guide details[open]{background:#fafafa;} .afro-guide summary{cursor:pointer;font-weight:600;padding:13px 0;list-style:none;position:relative;padding-right:26px;} .afro-guide summary::-webkit-details-marker{display:none;} .afro-guide summary::after{content:"+";position:absolute;right:2px;top:11px;font-size:18px;color:#999;} .afro-guide details[open] summary::after{content:"\2212";} .afro-guide details p{margin:0 0 14px;font-size:14px;color:#555;}