/* --------------------------------------------------------------------------
HEADER
   -------------------------------------------------------------------------- */

/* PC時のロゴ余白 */
@media screen and (min-width: 600px) {
  .header .__banner .__wrap a.__logo{
    padding:2rem 0;
  }
}

/* SP時のヘッダーボタン色 */
@media screen and (max-width: 599px) {
  .header .__banner .__wrap .__toggle-open label span:before{
    color:#fff;
  }
  .header .__banner .__wrap .__view-cart a:before{
    color:#fff;
  }
}


/* --------------------------------------------------------------------------
TOP
   -------------------------------------------------------------------------- */

/* 新着商品一覧の画像枠を固定比率に統一（画像は全体表示） */
.p-product-block .__photo {
  aspect-ratio: 1 / 1;           /* ← 枠の比率を指定（1:1＝正方形） */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;               /* 余白部分の背景色。サイト背景に合わせて変更可 */
  border: 1px solid #eee;         /* 画像間の輪郭を軽く出す（任意） */
  border-radius: 6px;             /* 角丸にしたい場合（任意） */
  overflow: hidden;
}

.p-product-block .__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* 全体表示：切らずに縮小して収める */
  object-position: center;        /* 画像を中央寄せ */
  display: block;
  background: #fff;               /* 一応背景色を明示しておく */
}

/* --------------------------------------------------
   新トップスライダー（.hero-slider 以下だけに効く）
-------------------------------------------------- */

.hero-slider {
  position: relative;
  overflow: hidden;
}

/* スライド横並びレーン */
.hero-slider__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.5s ease;
}

/* 1画面ぶんの幅 */
.hero-slider__item {
  flex: 0 0 100%;
}

/* 画像は横いっぱい */
.hero-slider__item a,
.hero-slider__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ドット */
.hero-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 1rem 0;
}

.hero-slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
}

.hero-slider__dots button.is-active {
  background: #333;
}



/* ブランドバナー */

/* 769px以上：2列 */
.top_banner_ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.top_banner_ul li img {
  width: 100%;
  height: auto;
  display: block;
}

/* 768px以下：2列 */
@media (max-width: 768px) {
  .top_banner_ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* TOPICS */

/* 共通：横並びのグリッド化 */
#top_topics .top_topics_ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;              /* すき間調整はお好みで */
}

/* スマホ：2列 */
@media screen and (max-width: 768px) {
  #top_topics .top_topics_ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC：4列 */
@media screen and (min-width: 769px) {
  #top_topics .top_topics_ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 画像を横幅100％にする */
#top_topics .top_topics_ul li img {
  width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------------------------------------
サイト全体
   -------------------------------------------------------------------------- */

.header {
  background-color: #e50012;
  position: relative;  /* ← これを追加！ */
}


/* aタグをホバー時に少し透過 */
a:hover {
  opacity: 0.8;   /* 80%の濃さ → 少し薄く見える */
  transition: opacity 0.2s ease;
}

@media screen and (min-width: 768px) {

  /* 検索ボックスの位置決め（ヘッダー内に固定） */
  .header .__content-top {
    position: absolute;
    top: 36px;   /* ロゴとのバランスで調整OK */
    left: 0;
    right: 0;
    z-index: 200; /* ← ロゴより前面に出す */
  }

  /* 1280px コンテナの右端に寄せる */
  .header-search {
    position: absolute;
    right: calc((100vw - 1280px) / 2);
    z-index: 210; /* 念のためさらに前面 */
  }

  /* 検索フォームのデザイン（大きめ＋白） */
  .header-search form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 5px 5px 5px 12px;
    border: 1px solid rgba(255,255,255,0.5);
    gap: 8px;
  }

  .header-search input {
    background: #fff;
    border-radius: 30px;
    border: none;
    padding: 10px 14px;
    width: 260px;
    font-size: 16px;
  }

  .header-search button {
    padding: 10px 20px;
    border-radius: 30px;
    background: #e50012;
    color: #fff;
    font-weight: bold;
    border: none;
    cursor: pointer;
  }

  .header-search button:hover {
    opacity: .85;
  }
}

/* SPでは非表示 */
@media screen and (max-width: 767px) {
  .header-search {
    display: none;
  }
}

.header-search input:focus {
  outline: none !important;
  border-color: #ddd !important; /* 通常と同じ色に固定 */
  box-shadow: none !important;   /* ブラウザによる青い発光枠も消す */
}