@charset "UTF-8";

/* ========== 汎用 ========== */
.image-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 3px;text-align:center;word-break:break-word;white-space:normal;background:rgba(0,0,0,.01);border-radius:4px;font-size:13px;font-weight:700;color:rgba(0,0,0,.2);z-index:3;pointer-events:none;max-width:100%;box-sizing:border-box}

/* =========================
   検索窓（スマホ・PC両対応・常時黒・白文字）
   ========================= */

/* ▼スマホ（〜767px） */
@media (max-width: 767px){
  .hobis-search-box{
    padding: 0 14px;
    margin: 28px auto;
    max-width: 100%;
  }
  .hobis-search-form{
    display:flex; width:100%; align-items:stretch;
    border-radius:14px;
    background:#1f1f1f;
    box-shadow:0 6px 20px rgba(0,0,0,.4);
  }
  .hobis-search-input{
    flex:1 1 auto;
    height:56px; padding:0 14px 0 16px;
    font-size:16px; line-height:1;
    background:#1f1f1f;
    color:#fff; caret-color:#fff;
    border:1px solid #333; border-right:0;
    border-radius:14px 0 0 14px;
    outline:none; box-sizing:border-box;
    -webkit-appearance:none;
  }
  .hobis-search-input::placeholder{ color:rgba(255,255,255,.65); }
  .hobis-search-button{
    height:56px; min-width:56px; padding:0 16px;
    background:#2b2b2b; border:1px solid #2b2b2b;
    border-radius:0 14px 14px 0;
    display:flex; align-items:center; justify-content:center;
    transition:transform .04s ease, background .2s ease;
  }
  .hobis-search-button img{ width:22px; height:22px; filter:invert(1); opacity:.95; }
  .hobis-search-input:focus{
    border-color:#4c8df6;
    box-shadow:0 0 0 3px rgba(76,141,246,.25);
  }
  .hobis-search-button:active{ transform:translateY(1px); }
}

/* ▼PC（768px〜） */
@media (min-width: 768px){
  .hobis-search-box{
    display:block; max-width:720px;
    margin:32px auto; padding:0 16px;
  }
  .hobis-search-form{
    display:flex; align-items:stretch; width:100%;
    border-radius:14px;
    background:#1f1f1f;
    box-shadow:0 6px 20px rgba(0,0,0,.4);
  }
  .hobis-search-input{
    flex:1 1 auto;
    height:48px; padding:0 16px;
    font-size:16px; line-height:1;
    background:#1f1f1f;
    color:#fff; caret-color:#fff;
    border:1px solid #333; border-right:0;
    border-radius:14px 0 0 14px;
    outline:none; box-sizing:border-box;
    -webkit-appearance:none;
  }
  .hobis-search-input::placeholder{ color:rgba(255,255,255,.65); }
  .hobis-search-button{
    height:48px; min-width:56px; padding:0 16px;
    background:#2b2b2b; border:1px solid #2b2b2b;
    border-radius:0 14px 14px 0;
    display:flex; align-items:center; justify-content:center;
    transition:transform .04s ease, background .2s ease;
  }
  .hobis-search-button img{ width:20px; height:20px; filter:invert(1); opacity:.95; }
  .hobis-search-input:focus{
    border-color:#4c8df6;
    box-shadow:0 0 0 3px rgba(76,141,246,.25);
  }
  .hobis-search-button:active{ transform:translateY(1px); }
}

/* === オートフィル（黄背景・黒文字）対策：色だけ上書き。形は触らない === */
input.hobis-search-input:-webkit-autofill,
input.hobis-search-input:-webkit-autofill:hover,
input.hobis-search-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;          /* テキスト白 */
  caret-color:#fff;
  /* 背景まで黒に戻したい場合は下2行のコメントを外す（形は変わらない） */
  /* -webkit-box-shadow: inset 0 0 0 1000px #1f1f1f !important;
     box-shadow: inset 0 0 0 1000px #1f1f1f !important; */
  transition: background-color 9999s ease-in-out 0s;
}
/* ===== 検索窓の文字色を常時白に強制 ===== */
.hobis-search-input {
  color: #fff !important;                  /* 入力文字 白 */
  caret-color: #fff !important;            /* キャレット 白 */
  -webkit-text-fill-color: #fff !important;/* Safari/Chrome 内部描画を上書き */
}

/* フォーカス時・アクティブ時も白を維持 */
.hobis-search-input:focus,
.hobis-search-input:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

/* プレースホルダーは薄い白 */
.hobis-search-input::placeholder {
  color: rgba(255,255,255,.65) !important;
}

/* オートフィル（黄背景対策） */
input.hobis-search-input:-webkit-autofill,
input.hobis-search-input:-webkit-autofill:hover,
input.hobis-search-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  box-shadow: 0 0 0px 1000px #1f1f1f inset !important; /* 黒背景に戻す */
  transition: background-color 9999s ease-in-out 0s !important;
}
/* 入力欄のフォーカス時の青枠を消す */
.hobis-search-input:focus {
  outline: none !important;   /* デフォルトの青い枠を無効化 */
  box-shadow: none !important;/* 影のフォーカス装飾も消す */
}
.hobis-search-button:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* カテゴリーグリッド */
.c-breadcrumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 12px;font-weight:700}
.c-breadcrumb-grid a{font-size:clamp(16px,2.5vw,20px);color:gray;background:#f5f5f5;padding:12px;border-radius:4px;text-decoration:none;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;width:100%;height:60px;box-sizing:border-box}
@media (min-width:769px){
  .c-breadcrumb-grid{grid-template-columns:repeat(5,1fr);margin:30px auto;max-width:1200px}
}

/* バナー */
.banner-container{margin-top:10px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.point-banner,.ship-banner{display:flex;align-items:center;background:linear-gradient(135deg,#f3f3f3,#e0c36f);border-radius:12px;padding:16px 24px;font-family:'Noto Sans JP',sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.1);flex:1 1 300px;min-width:280px;max-width:500px;margin:0 5px}
.point-icon,.ship-icon{background:#111;color:#f1da36;font-weight:700;width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin-right:16px;font-family:'Montserrat',sans-serif;box-shadow:0 2px 5px rgba(0,0,0,.2);white-space:nowrap;border-radius:50%}
.point-icon{font-size:28px}
.ship-icon{font-size:16px;letter-spacing:.3px;line-height:1}
.point-text{font-size:1.1rem;color:#222;font-weight:500;white-space:nowrap}
.ship-message{display:flex;flex-direction:column;justify-content:center;font-size:1.1rem;color:#222;line-height:1.4}
@media (max-width:480px){ .ship-message{font-size:.95rem} .highlight{font-size:1.1rem} }
.main-text{font-weight:500}
.highlight{font-weight:800;font-size:1.25rem;color:#c62828}

/* ブランドロゴ */
.brand-logos{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px;gap:10px;padding:0}
.brand-logos a{width:calc(100%/4 - 10px);max-width:120px;display:flex;justify-content:center}
.brand-logos img{width:100%;height:auto;object-fit:contain;transition:transform .2s}
.brand-logos a:hover img{transform:scale(1.2)}
@media (min-width:768px){ .brand-logos a{width:calc(100%/6)} }

/* ========== トップ：スライド/ニュース/情報 ========== */
.c-top-firstView{--firstViewSlideHeight:100vh;width:100%;height:var(--firstViewSlideHeight);overflow:hidden}
.c-top-firstView.withNews{--firstViewSlideHeight:calc(100vh - 70px)}
.c-top-firstView a,.c-top-firstView img,.c-top-firstView picture{width:100%;height:var(--firstViewSlideHeight);display:block;outline:none}
.c-top-firstView img{object-fit:cover;object-position:center}
.c-top-firstView a:hover{opacity:1}
@media (max-width:1024px){
  .c-top-firstView{--firstViewSlideHeight:calc(100svh - 60px)}
  .c-top-firstView.withNews{--firstViewSlideHeight:calc(100svh - 160px)}
}
.c-top-news{--topNewsHeight:70px;width:100%;height:var(--topNewsHeight);position:relative;z-index:2}
.c-top-news::before{content:"";width:calc(100% - 120px);height:100%;left:0;top:0;position:absolute;background:var(--defaultColor);opacity:.05}
.c-top-news .l-content{height:var(--topNewsHeight);overflow:hidden;position:relative}
@media (min-width:1025px){ .c-top-news .l-content{padding-right:120px} }
.c-top-news a,.c-top-news span{font-size:16px;height:var(--topNewsHeight);line-height:var(--topNewsHeight);white-space:nowrap;width:100%;text-overflow:ellipsis;display:block;color:var(--defaultColor);overflow:hidden}
.c-top-news a:hover{text-decoration:underline}
.c-top-newsListNext,.c-top-newsListPrev{width:60px;height:var(--topNewsHeight);position:absolute;top:0;right:0;cursor:pointer;z-index:3}
.c-top-newsListPrev{right:60px}
.c-top-newsListNext::before,.c-top-newsListPrev::before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background:var(--defaultColor);opacity:.05}
.c-top-newsListNext::after,.c-top-newsListPrev::after{content:"";width:10px;height:10px;position:absolute;top:calc(50% - 5px)}
.c-top-newsListPrev::after{right:5px;border-top:1px solid var(--defaultColor);border-left:1px solid var(--defaultColor);transform:rotate(-45deg)}
.c-top-newsListNext::after{left:5px;border-top:1px solid var(--defaultColor);border-right:1px solid var(--defaultColor);transform:rotate(45deg)}
@media (max-width:1024px){
  .c-top-news{--topNewsHeight:100px;display:flex;align-items:center}
  .c-top-news::before{width:100%}
  .c-top-news a,.c-top-news span{font-size:14px;line-height:20px;height:60px;white-space:normal;width:100%;padding-right:0;margin-top:20px;display:-webkit-box;display:box;overflow:hidden;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;box-orient:vertical}
  .c-top-newsListNext,.c-top-newsListPrev{width:35px;height:35px}
  .c-top-newsListPrev{right:37px}
}

/* ========== 売れ筋タブ（見た目＋順位） ========== */
.seller-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.20rem 0 1rem;justify-content:center;position:relative;z-index:1!important;pointer-events:auto}
.seller-tabs button{padding:.55rem .9rem;border:1px solid #ddd;border-radius:999px;background:#f8f8f8;cursor:pointer;font-size:.95rem;line-height:1;transition:background .2s,box-shadow .2s,transform .02s;touch-action:manipulation}
.seller-tabs button:hover{background:#f1f1f1}
.seller-tabs button.is-active{background:#111;color:#fff;border-color:#111}
.seller-container{position:relative;min-height:120px}
.seller-page[hidden]{display:none}
.seller-container .c-items-image{position:relative}
.seller-container .seller-rank{position:absolute;left:-5px;top:-5px;padding:4px 6px;color:rgba(255,195,0,.3);font-size:30px;font-weight:700;pointer-events:none;z-index:3}
@media (max-width:767px){.seller-container .seller-rank{left:0;top:0;padding:4px 6px}}

/* ========== おすすめタブ（見た目） ========== */
.recommend-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.20rem 0 1rem;justify-content:center;position:relative;z-index:1!important;pointer-events:auto}
.recommend-tabs button{padding:.55rem .9rem;border:1px solid #ddd;border-radius:999px;background:#f8f8f8;cursor:pointer;font-size:.95rem;line-height:1;transition:background .2s,box-shadow .2s,transform .02s;touch-action:manipulation}
.recommend-tabs button:hover{background:#f1f1f1}
.recommend-tabs button.is-active{background:#111 !important;color:#fff !important;border-color:#111 !important}
.recommend-container{position:relative;min-height:120px}
.recommend-page[hidden]{display:none}

/* ========== ブランドタブ（F32〜F36） ========== */
.brand-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.20rem 0 1rem;justify-content:center;position:relative;z-index:1!important;pointer-events:auto}
.brand-tabs button{padding:.55rem .9rem;border:1px solid #ddd;border-radius:999px;background:#f8f8f8;cursor:pointer;font-size:.95rem;line-height:1;transition:background .2s,box-shadow .2s,transform .02s;touch-action:manipulation}
.brand-tabs button:hover{background:#f1f1f1}
.brand-tabs button.is-active{background:#111 !important;color:#fff !important;border-color:#111 !important}
.brand-container{position:relative;min-height:120px}
.brand-page[hidden]{display:none}
.brand-loading{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:#666;padding:12px 4px}
.brand-loading .spinner{width:16px;height:16px;border:2px solid #ccc;border-top-color:#666;border-radius:50%;animation:brandspin 1s linear infinite}
@keyframes brandspin{to{transform:rotate(360deg)}}
.brand-error{color:#c00;font-size:.95rem;padding:12px 4px}
.brand-container .c-items-image{position:relative}
.brand-container .c-items-image .c-favorite{position:absolute!important;bottom:3px;right:3px;width:36px}
.brand-container .c-items>a:has(img.new_mark_img1.ok-replaced) .c-items-name,
.brand-container .c-items-in:has(img.new_mark_img1.ok-replaced) .c-items-name{position:relative;top:-18px}

/* ========== %OFF表示 ========== */
.c-price-flag{font-size:.85rem;margin-top:.25rem;color:#c00;font-weight:600}
.c-price-flag.placeholder{visibility:hidden}
.c-price-flag.isOpen{color:#555;font-weight:400}

/* ========== OKアイコンのチラつき防止（トップ） ========== */
img.new_mark_img1:not(.ok-replaced){visibility:hidden}
img.new_mark_img1.ok-replaced{visibility:visible;width:100%;height:auto;vertical-align:middle}


/* ========== ブランド一覧 ========== */
/* スマホでだけ中央に出す */
@media (max-width: 767px){
  .brand-list-center{
    display:flex;
    justify-content:center;
    margin-top:25px;
    padding:8px 0;
  }
  .brand-list-btn{
    background:#333;
    color:#fff;
    border:0;
    padding:10px 18px;
    border-radius:6px;
    font-size:14px;
    line-height:1;
  }
}
/* PCでは非表示 */
@media (min-width: 768px){
  .brand-list-center{ display:none; }
}

/* 同じカード内にOKアイコンがある時だけ、商品名を上に */
.recommend-container .c-items > a:has(img.new_mark_img1.ok-replaced) .c-items-name,
.recommend-container .c-items-in:has(img.new_mark_img1.ok-replaced) .c-items-name,
.seller-container   .c-items > a:has(img.new_mark_img1.ok-replaced) .c-items-name,
.seller-container   .c-items-in:has(img.new_mark_img1.ok-replaced) .c-items-name,
.c-checked          .c-items > a:has(img.new_mark_img1.ok-replaced) .c-items-name,
.c-checked          .c-items-in:has(img.new_mark_img1.ok-replaced) .c-items-name {
  position: relative;
  top: -18px;
}