/* ========================================
トップバナー：2カラムでもPC全幅・SP縦長レスポンシブ
======================================== */
/* バナーブロックを全幅に（サイドバー幅分も含めて左に伸ばす） */
.__block--banner {
  position: relative !important;
  /* mainの左端からサイドバー分（約267px）左に飛び出して全幅に */
  width: calc(100% + 267px + 20px) !important;
  margin-left: calc(-267px - 20px) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  aspect-ratio: 2 / 1 !important;
  z-index: 10 !important;
}
.__block--banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* サイドバーをバナーより後ろに */
.aside {
  z-index: 1 !important;
  position: relative !important;
}
/* スマホ（600px以下）：縦長画像に切り替え・全幅に */
@media (max-width: 600px) {
  .__block--banner {
    width: 100vw !important;
    margin-left: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    aspect-ratio: 3 / 4 !important;
  }
  .__block--banner img {
    content: url("https://files.bcart.jp/ais-care/uploads/mainasuten_top2.png") !important;
  }
}

/* ========================================
   商品画像を正方形に統一（どんなサイズの画像でもズレない）
   ======================================== */
.__photo {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.__photo img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ========================================
   LINE・送料無料バナーの上下余白（新着情報1行分 = 35px）
   ======================================== */
.ais-info-banners {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

/* ========================================
   新着情報：フォントサイズをベンチマーク(16px)に合わせる
   ======================================== */
.__block--news .__body li,
.__block--news .__body a,
.__block--news .__body p,
.__block--news .__body span {
  font-size: 16px !important;
  line-height: 28px !important;
}

/* ========================================
   LINE・送料無料バナー：スマホで縦並び＋左右余白
   ======================================== */
@media (max-width: 600px) {
  .ais-info-banners {
    flex-direction: column !important;
    padding: 0 5% !important;
  }
}

/* ========================================
   商品名：中央揃え・折り返し対応
   ======================================== */
.__product .__title,
.__block--new-item .__title,
.__block--ranking .__title,
.__block--history .__title {
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-all !important;
}






/* ========================================
   ヘッダー：+Cueスタイルに近づける
   ======================================== */

/* __wrapをflexレイアウトに変更 */
.header .__banner .__wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 8px 20px !important;
  height: 64px !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}
.header .__banner .__wrap .__logo {
  margin-right: auto !important;
  flex-shrink: 0 !important;
}
.header .__banner .__wrap .__logo img {
  height: 36px !important;
  width: auto !important;
  display: block !important;
}
.header .__banner .__wrap .__logo h1 { margin: 0 !important; line-height: 1 !important; }



/* カート：ショッピングカートのイラスト＋「カート」文字 */
.header .__banner .__view-cart { display: flex !important; }
.header .__banner .__view-cart > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-decoration: none !important;
  color: #333 !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}
.header .__banner .__view-cart > a::before {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.header .__banner .__view-cart > a::after {
  content: "カート" !important;
  font-size: 11px !important;
  color: #333 !important;
  line-height: 1 !important;
}
.header .__banner .__view-cart .__counter {
  display: none !important;
}

/* ログインボタン：アイコン＋テキスト */
.header .__banner .__login .__link.c-button {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #333 !important;
  font-size: 11px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px 8px !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
}
.header .__banner .__login .__link.c-button::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.header .__banner .__login .__link.c-button span { color: #333 !important; font-size: 11px !important; }

/* 新規会員登録：黒背景ボタン */
.header .__banner .__login .__regist > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #2d2d2d !important;
  background-color: #2d2d2d !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.header .__banner .__login .__regist > a span { color: #fff !important; }
.header .__banner .__login .__regist > a::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

/* スマホ：ログイン・カート・新規登録を全て表示 */
@media (max-width: 600px) {
  .header .__banner .__wrap {
    padding: 0 10px !important;
    height: 56px !important;
    gap: 4px !important;
  }
  /* スマホでもloginブロックを表示 */
  .header .__banner .__login {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .header .__banner .__login .__block { display: flex !important; align-items: center !important; gap: 4px !important; }
  .header .__banner .__login .__body { display: flex !important; align-items: center !important; gap: 4px !important; }
  .header .__banner .__login .__menu { display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
  /* 新規会員登録ボタンをコンパクトに */
  .header .__banner .__login .__regist > a {
    font-size: 10px !important;
    padding: 6px 8px !important;
    gap: 3px !important;
  }
  .header .__banner .__login .__regist > a::before {
    width: 13px !important;
    height: 13px !important;
  }
  /* ログインボタンをコンパクトに */
  .header .__banner .__login .__link.c-button {
    padding: 4px 4px !important;
  }
  .header .__banner .__login .__link.c-button::before {
    width: 20px !important;
    height: 20px !important;
  }
  .header .__banner .__login .__link.c-button span {
    font-size: 9px !important;
  }
  /* カートをコンパクトに */
  .header .__banner .__view-cart > a { padding: 4px 4px !important; }
  .header .__banner .__view-cart > a::before { width: 22px !important; height: 22px !important; }
  .header .__banner .__view-cart > a::after { font-size: 9px !important; }
}

/* ========================================
   PCナビバー（青枠）を非表示
   ======================================== */
@media (min-width: 601px) {
  .header .gnav-pc {
    display: none !important;
  }
}

/* ========================================
   スマホ：LINEバナー・送料無料バナーの左端を揃える
   ======================================== */
@media (max-width: 600px) {
  .ais-banner-line,
  .ais-banner-free {
    justify-content: flex-start !important;
    padding: 14px 5% !important;
  }
}
/* ========================================
サイドバー内のフリースペース1を非表示
（LINEバナー・送料無料バナーはメインに表示済み）
======================================== */
.aside .__block--side-free1 {
  display: none !important;
}

/* ========================================
フリースペースのカレンダーwrapを非表示
======================================== */
.ais-calendar-wrap {
  display: none !important;
}

/* ========================================
LINEバナーを一時非表示
======================================== */
.ais-banner-line {
  display: none !important;
}







/* ========================================
PC：ハンバーガーメニューを非表示
======================================== */
@media (min-width: 601px) {
  .__toggle-open {
    display: none !important;
  }
}

/* ========================================
PC：ヘッダーに検索バーを表示
======================================== */
@media (min-width: 601px) {
  .header .__banner .__search {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 16px !important;
  }
  .header .__banner .__search form {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #ccc !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
  }
  .header .__banner .__search input[type="text"] {
    border: none !important;
    background: transparent !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    width: 200px !important;
    outline: none !important;
  }
  .header .__banner .__search button {
    border: none !important;
    background: transparent !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    color: #555 !important;
    font-size: 14px !important;
  }
}

/* ========================================
PC：ヘッダー検索バーのスタイル
======================================== */
@media (min-width: 601px) {
  #ais-header-search-bar {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 12px !important;
  }
  #ais-header-search-bar form {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #ccc !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
    height: 32px !important;
  }
  #ais-header-search-bar input[type="text"] {
    border: none !important;
    background: transparent !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    width: 180px !important;
    outline: none !important;
    height: 100% !important;
    box-shadow: none !important;
  }
  #ais-header-search-bar button {
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    height: 100% !important;
    font-size: 14px !important;
    color: #555 !important;
  }
  #ais-header-search-bar button span { display: none !important; }
  #ais-header-search-bar button::before {
    content: "🔍" !important;
  }
}
@media (max-width: 600px) {
  #ais-header-search-bar { display: none !important; }
}