/* =========================================
    右下に固定される星型キャンペーンバッジ
   ========================================= */

.slider-wrapper {
  position: relative;
}

/* 右下固定ポジション */
.star-campaign {
  position: absolute;
  bottom: 6%;
  right: 4%;
  transform: translate(0, 0);
  z-index: 15;
  pointer-events: auto;
}

/* 星型バッジ本体 */
.star-inner {
  background: radial-gradient(circle at 50% 50%, #fff8c2 0%, #ffd740 40%, #ffca28 70%, #ffb300 100%);
  color: #4a2d00;
  padding: 20px 26px;
  border-radius: 50%;
  min-width: 170px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  border: 4px solid #fff;
  box-shadow: 0 0 20px rgba(255,215,0,0.9), 0 0 40px rgba(255,200,0,0.6);

  /* 浮遊アニメーション */
  animation: floatStar 2.5s ease-in-out infinite,
             blinkStar 2s ease-in-out infinite;
}

/* 星型っぽく見せるための擬似要素でスパイクをつける */
.star-inner::before {
  content: "★";
  position: absolute;
  top: -48px;
  font-size: 60px;
  color: #ffeb3b;
  text-shadow: 0 0 8px #ffea00, 0 0 14px #ffb300;
  animation: spinStar 3.8s linear infinite;
}

/* テキストスタイル */
.star-line1 {
  font-size: 2.0rem;
  font-weight: 800;
  color: #b71c1c;
  margin-bottom: 4px;
  text-shadow: 0 0 3px #fff;
}

.star-line2 {
  font-size: 1.45rem;
  font-weight: 900;
  color: #e65100;
  margin-bottom: 4px;
  letter-spacing: .05em;
}

.star-line2 span {
  color: #d50000;
  font-size: 1.6rem;
}

.star-line3 {
  font-size: 1rem;
  font-weight: 700;
  color: #6d3900;
}

/* ====== アニメーション ====== */
@keyframes floatStar {
  0%,100% { transform: translate(0,0); }
  50%    { transform: translate(0,-8px); }
}

@keyframes blinkStar {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.65; }
}

@keyframes spinStar {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== スマホ調整 ===== */
@media (max-width: 768px){
  .star-campaign{
    bottom: 4%;
    right: 3%;
  }
  .star-inner{
    padding: 14px 18px;
    min-width: 140px;
    min-height: 140px;
    border-width: 3px;
  }
  .star-inner::before{
    top: -22px;
    font-size: 32px;
  }
  .star-line1{ font-size: 0.85rem; }
  .star-line2{ font-size: 1.2rem; }
  .star-line2 span{ font-size: 1.35rem; }
  .star-line3{ font-size: 0.85rem; }
}

@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}
}

/* =========================
   バナー（送料・ポイントなど）
   ========================= */

/* コンテナ：常に2列グリッド＋左右マージンあり */
.banner-container{
  margin: 20px 50px;                      /* 上下20px / 左右16px → カテゴリー帯と合わせるイメージ */
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));  /* 常に2列 */
  gap: 16px;
}

/* 各バナーカード */
.ship-banner{
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7f2dc, #e0c36f);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255,255,255,0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}

/* ホバー時に少し浮かせる（PC中心） */
.ship-banner:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.23);
  background: linear-gradient(135deg, #fff8e1, #e3c874);
}

/* 左の丸アイコン */
.ship-icon{
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #111;
  color: #f1da36;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 3px 6px rgba(0,0,0,0.28);
}

/* 均一 / 230 だけ少し大きく見せる */
.ship-banner:nth-child(1) .ship-icon,
.ship-banner:nth-child(2) .ship-icon{
  font-size: 18px;
}

/* テキストブロック */
.ship-message{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.4;
}

/* 赤文字（メインメッセージ）
   - clamp() で画面幅に応じてフォントサイズを自動調整
   - white-space: nowrap で折り返し禁止
*/
.highlight{
  font-weight: 800;
  font-size: clamp(0.95rem, 1vw + 0.8rem, 1.2rem); /* スマホで少し小さく、PCで少し大きく */
  color: #c62828;
  white-space: nowrap;
}

/* サブ説明文 */
.main-text{
  font-weight: 500;
  font-size: 0.8rem;
  color: #333;
}

/* =========================
   スマホ調整
   ========================= */
/* スマホ〜タブレット幅くらいまではこっちを使う */
@media (max-width: 768px){
  .banner-container{
    margin: 16px 12px;                             /* スマホでは少しだけ狭める */
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
  }

  .ship-banner{
    padding: 10px 12px;
  }

  .ship-icon{
    width: 46px;
    height: 46px;
    margin-right: 10px;
    font-size: 14px;
  }

  .highlight{
    font-size: clamp(0.9rem, 1vw + 0.7rem, 1.0rem);
  }

  .main-text{
    font-size: 0.75rem;
  }
}

/* ブランドロゴ */
.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)} }
/* === ブランドロゴ：PC 8列 / SP 4列 固定 === */
.brand-logos{
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;                  /* 余白はお好みで */
  justify-content: stretch;  /* 中央寄せを無効化 */
  align-items: center;
}

/* 子要素の旧スタイルをリセットしてグリッドに従わせる */
.brand-logos a{
  min-width: 0 !important;   /* ← これが肝。縮める許可 */
  width: 100% !important;    /* セルいっぱい */
  max-width: none !important;
}

.brand-logos img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* スマホは4列 */
@media (max-width: 767px){
  .brand-logos{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ========== トップ：スライド/ニュース/情報 ========== */
.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}
}
/* ほんの少しだけ拡大するズーム（可調整） */
.c-top-firstView .zoomable{
  will-change: transform, opacity;
  transform-origin: center center;
  transition: transform 0.05s linear, opacity 0.05s linear;
}
@media (prefers-reduced-motion: reduce){
  .c-top-firstView .zoomable{ transition: none; }
}

/* ========== 売れ筋タブ（見た目＋順位） ========== */
.seller-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.20rem 0 1rem;justify-content:left;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:left;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}
#recommend-tabs h4 {
  margin: 5px 0 !important;
}

/* ========== ブランドタブ（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}
/* PC 8列 / SP 4列を確実に維持するための決め打ち */
.brand-tabs {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)); /* 8分割 */

}

/* ←ココが肝：グリッド内で縮む許可を出す */
.brand-tabs button{
  min-width: 0;              /* 重要：これがないと落ちる */
  width: 100%;
  overflow: hidden;          /* はみ出し対策 */
  text-overflow: ellipsis;   /* 省略表記 */
  white-space: nowrap;       /* 1行運用（2行にしたいなら消す） */
  padding: .55rem .7rem;     /* ちょいタイトにして余裕作る（任意） */
  font-size: .9rem;          /* 文字が詰む場合の保険（任意） */
}


/* スマホは4列 */
@media (max-width: 767px){
  .brand-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* スマホ時は4列 */
@media (max-width: 767px) {
  .brand-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ========== %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;
}

/* ship-banner-link 共通 */
.ship-banner-link {
  text-decoration: none;
  color: inherit;
  display: block;
}


/* ============================
   マイアカウント系ボタンの整形
   ============================ */

.account-buttons {
  display: flex;
  justify-content: flex-end;    /* 右寄せ */
  gap: 12px;                     /* ボタン間の余白 */
  margin: 10px 50px 20px 0;      /* 上右下左：右にスペース確保（調整可） */
  flex-wrap: wrap;               /* スマホで折り返し可 */
}

/* 共通ボタン */
.acc-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  white-space: nowrap;
}

/* メインボタン「マイアカウント」 */
.main-btn {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
}

/* サブボタン（ログイン／ログアウト／会員登録） */
.sub-btn {
  background: #fff;
  color: #2c3e50;
  border: 1px solid #2c3e50;
}

/* ホバー効果 */
.acc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* スマホ調整 */
@media (max-width: 600px) {
  .account-buttons {
    justify-content: center; /* スマホは中央寄せの方が綺麗 */
    margin-right: 10px;
    margin-left: 10px;
    gap: 8px;
  }
  .acc-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}
/* 「ブランド」見出し直下の brand-tabs だけ余白を 5px に強制 */
.brand-container {
  margin-top: -35px !important;
}