@charset "utf-8";

/* =====================================================
   余白調整
===================================================== */

.mt10 {
  margin-top: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb-pc40-sp30 {
  margin-bottom: 40px !important;
}

.mb-pc60-sp40 {
  margin-bottom: 60px !important;
}

.mb-pc80-sp60 {
  margin-bottom: 80px !important;
}


@media screen and (max-width: 750px) {
  /* 余白 */
  .mb-pc40-sp30 {
    margin-bottom: 30px !important;
  }

  .mb-pc60-sp40 {
    margin-bottom: 40px !important;
  }
	
.mb-pc80-sp60 {
  margin-bottom: 60px !important;
}	
}
/* =========================
   UVケア商品エリア専用ホバー
========================= */

.uvcare-products a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* 外部CSSの透過対策 */
.uvcare-products a,
.uvcare-products a * {
  opacity: 1 !important;
  filter: none !important;
}

/* 画像 */
.uvcare-products a img {
  display: block;
}

/* =========================
   ① ふんわり白レイヤー（共通ベース）
========================= */
.uvcare-products a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

/* =========================
   ② キラッと光る帯（←さりげなく調整）
========================= */
.uvcare-products a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 30%; /* ←細くする */
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%, /* ←弱くする */
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-12deg); /* ←やや緩やかに */
  z-index: 2;
  pointer-events: none;
}

/* =========================
   PC：ホバー時
========================= */

/* ふんわりは継続（少し弱め） */
.uvcare-products a:hover::before {
  opacity: 0.15;
}

/* キラッは一瞬だけ（ゆっくり＆1回） */
.uvcare-products a:hover::after {
  animation: shine 1.1s ease 1;
}


/* =========================
   SP：タップ時のみ反応
========================= */
@media (hover: none) {

  /* 押した瞬間だけ白く */
  .uvcare-products a:active::before {
    opacity: 0.25;
    transition: none;
  }

}

/* =========================
   キラッアニメーション
========================= */
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

/* =========================
   INDEXエリア余白調整（最終版）
========================= */

/* 上下の余白はここで統一 */
.index-section .block-special-section-inner {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* リストとボタンの間 */
.index-section .index-box {
  margin: 0 0 20px 0;
  padding: 0;
}

/* ボタン（共通） */
.index-section a[href="#allitem"] {
  display: block;
  margin: 20px auto 0; /* 上だけ余白＋中央寄せ */
}

/* 画像は余計な隙間防止 */
.index-section a[href="#allitem"] img {
  display: block;
}