/* =========================================
   BACOMPANY RETRO TOP
========================================= */

.baca-top-page * {
  box-sizing: border-box;
}

.baca-top-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 8px 0 48px;
  background-color: #fffff5;
  background-image: url("https://img21.shop-pro.jp/PA01521/812/etc_base64/YmdfcGF0dGVybg.png?cmsp_timestamp=20260402132403");
  background-repeat: repeat;
  background-size: 150px auto;
  text-align: center;
  overflow: hidden;
  font-family: "MS PGothic", "Osaka", "Hiragino Kaku Gothic ProN", sans-serif;
}

.baca-top-page a {
  text-decoration: none;
}

.baca-top-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 18px;
}

.baca-logo {
  width: min(100%, 980px);
  margin: 8px auto 8px;
  display: block;
}

.baca-marquee-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 38px;
  margin: 4px auto 20px;
}

.baca-marquee-wrap-video {
  max-width: 1000px;
  height: 34px;
  margin-top: 2px;
  margin-bottom: 10px;
}

.baca-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  transform: translateY(-50%);
  will-change: transform;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 30px);
  text-shadow: 0 1px 0 #fff;
  animation: baca-marquee-left 18s linear infinite;
}

.baca-marquee-blue {
  color: #1f39ff;
}

.baca-marquee-pink {
  color: #ff34d4;
  animation-duration: 16s;
}

@keyframes baca-marquee-left {
  from { transform: translate(100%, -50%); }
  to   { transform: translate(-100%, -50%); }
}

.baca-main-visual {
  width: min(100%, 780px);
  display: block;
  margin: 0 auto 18px;
  border-radius: 6px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}

.baca-section-title {
  display: inline-block;
  margin: 10px auto 10px;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 900;
  color: #ff2200;
  -webkit-text-stroke: 3px #00dcff;
  text-shadow:
    0 2px 0 rgba(255,255,255,.75),
    0 3px 7px rgba(0,0,0,.08);
  letter-spacing: .02em;
  line-height: 1;
}

.baca-menu-wrap {
  width: min(100%, 1000px);
  margin: 8px auto 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.baca-menu-row {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 42px);
  flex-wrap: wrap;
}

.baca-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  position: relative;
  color: #ffea00 !important;
  text-shadow:
    -2px -2px 0 #00d8ff,
    2px -2px 0 #00d8ff,
    -2px 2px 0 #00d8ff,
    2px 2px 0 #00d8ff,
    0 0 7px rgba(255,255,255,.8);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.55),
    inset 0 -4px 0 rgba(0,0,0,.15),
    0 0 10px rgba(255,255,255,.75),
    0 3px 8px rgba(0,0,0,.15);
  transform: skewX(-6deg);
}

.baca-menu-btn span {
  transform: skewX(6deg);
  display: block;
}

.baca-menu-btn.blue {
  background: linear-gradient(to bottom, #1f5aff 0%, #1128ff 48%, #5d00ff 100%);
}

.baca-menu-btn.orange {
  background: linear-gradient(to bottom, #ff8b2c 0%, #ff5f00 52%, #ff8a3d 100%);
}

.baca-menu-btn.green {
  background: linear-gradient(to bottom, #57ff42 0%, #18d000 52%, #86ff57 100%);
}

.baca-menu-btn.pink {
  background: linear-gradient(to bottom, #ff71ff 0%, #ff2dd8 52%, #ff7be8 100%);
}

.baca-menu-btn.purple {
  background: linear-gradient(to bottom, #b44fff 0%, #7a00e6 52%, #c06aff 100%);
}

.baca-horse-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px auto 18px;
  flex-wrap: wrap;
}

.baca-horse-zone img {
  width: 78px;
  height: auto;
  display: block;
}

.baca-horse-copy {
  font-size: clamp(19px, 2vw, 30px);
  color: #ff5d2a;
  text-shadow: 1px 1px 0 #fff;
  font-weight: 700;
}

.baca-flower-line {
  width: min(100%, 1040px);
  height: 28px;
  margin: 50px auto 50px;
  background-image: url("https://img21.shop-pro.jp/PA01521/812/etc_base64/Zmxvd2Vy.png?cmsp_timestamp=20260402132403");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 28px;
}

.baca-heading {
  display: inline-block;
  margin: 4px auto 14px;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 #fff;
}

.baca-heading.blue-red {
  color: #ff2400;
  -webkit-text-stroke: 2px #00d7ff;
}

.baca-heading.green-pink {
  color: #20ff2f;
  -webkit-text-stroke: 2px #ff3fe4;
}

.baca-products-grid {
  width: min(100%, 980px);
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 38px;
  justify-items: center;
}

.baca-product {
  width: 100%;
  max-width: 280px;
  position: relative;
  padding-top: 2px;
}

.baca-product a,
.baca-product.no-link {
  display: block;
}

.baca-product-image {
  width: 100%;
  aspect-ratio: 1 / 0.78;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.18));
}

.baca-badge {
  position: absolute;
  top: -16px;
  left: -10px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  line-height: 1.05;
  font-size: 16px;
  color: #fff400;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 2;
  transform-origin: center;
}

.baca-badge.cool {
  background: #ff9600;
  animation: baca-coolPulse .48s cubic-bezier(.2,.7,.3,1) infinite;
}

@keyframes baca-coolPulse {
  0%   { transform: scale(.58) rotate(-14deg); }
  18%  { transform: scale(1.28) rotate(10deg); }
  36%  { transform: scale(.72) rotate(-8deg); }
  55%  { transform: scale(1.42) rotate(14deg); }
  74%  { transform: scale(.66) rotate(-12deg); }
  100% { transform: scale(1.2) rotate(8deg); }
}

.baca-badge.recommend {
  background: linear-gradient(45deg, #ff40c9, #ff9100, #4eff4b, #00d6ff, #9d42ff, #ff40c9);
  background-size: 400% 400%;
  animation: baca-rainbowSpin .9s linear infinite;
}

@keyframes baca-rainbowSpin {
  0%   { background-position: 0% 50%; transform: rotate(-10deg) scale(.9); filter: hue-rotate(0deg) saturate(1.1); }
  25%  { background-position: 100% 50%; transform: rotate(8deg) scale(1.08); filter: hue-rotate(90deg) saturate(1.35); }
  50%  { background-position: 0% 100%; transform: rotate(-12deg) scale(.95); filter: hue-rotate(180deg) saturate(1.6); }
  75%  { background-position: 100% 0%; transform: rotate(10deg) scale(1.1); filter: hue-rotate(270deg) saturate(1.35); }
  100% { background-position: 0% 50%; transform: rotate(-10deg) scale(.9); filter: hue-rotate(360deg) saturate(1.1); }
}

.baca-badge.trend {
  background: #51f046;
  color: #ff3a00;
  animation: baca-trendBonk .33s steps(2, end) infinite;
}

@keyframes baca-trendBonk {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  10%  { transform: translate(-8px,-9px) rotate(-18deg) scale(1.05); }
  20%  { transform: translate(10px,4px) rotate(14deg) scale(.92); }
  30%  { transform: translate(-12px,8px) rotate(-20deg) scale(1.08); }
  40%  { transform: translate(12px,-6px) rotate(18deg) scale(.9); }
  50%  { transform: translate(-6px,10px) rotate(-10deg) scale(1.14); }
  60%  { transform: translate(14px,-8px) rotate(22deg) scale(.88); }
  70%  { transform: translate(-14px,-3px) rotate(-16deg) scale(1.1); }
  80%  { transform: translate(8px,11px) rotate(12deg) scale(.94); }
  90%  { transform: translate(-5px,-10px) rotate(-9deg) scale(1.06); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

.baca-product-name {
  margin-top: 8px;
  font-size: clamp(15px, 1.25vw, 22px);
  color: #1436ff;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

.baca-videos {
  width: min(100%, 980px);
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 32px;
  justify-items: center;
}

.baca-video-card img {
  width: 100%;
  max-width: 310px;
  display: block;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.12));
}

.baca-video-title {
  margin-top: 8px;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 700;
  color: #173bff;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

.baca-mini-nav {
  margin: 14px 0 28px;
  font-size: 14px;
  font-weight: 700;
}

.baca-mini-nav a {
  margin: 0 4px;
  color: #163cff !important;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .baca-products-grid,
  .baca-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .baca-top-inner {
    padding: 0 10px;
  }

  .baca-products-grid,
  .baca-videos {
    grid-template-columns: 1fr;
  }

  .baca-menu-btn {
    min-width: 150px;
    height: 44px;
  }

  .baca-product-name,
  .baca-video-title {
    white-space: normal;
  }

  .baca-badge {
    width: 68px;
    height: 68px;
    font-size: 14px;
  }
}
/* =========================================
   企画中商品 カルーセル
========================================= */

.baca-kikaku-carousel-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
}

.baca-kikaku-carousel-track {
  display: flex;
  gap: 20px;
  animation: baca-kikaku-scroll 30s linear infinite;
  will-change: transform;
}

.baca-kikaku-carousel-wrap:hover .baca-kikaku-carousel-track {
  animation-play-state: paused;
}

@keyframes baca-kikaku-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.baca-kikaku-item {
  flex: 0 0 auto;
  display: block;
  width: 240px;
}

.baca-kikaku-item img {
  width: 240px;
  height: 187px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.18));
  transition: transform .2s, filter .2s;
}

.baca-kikaku-item:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));
}

/* =========================================
   企画中商品 詳細セクション
========================================= */

.baca-kikaku-detail {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: min(100%, 860px);
  margin: 0 auto 36px;
  padding: 20px 24px;
  background: rgba(255,255,255,.85);
  border-radius: 16px;
  border: 2px solid #ff3fe4;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  text-align: left;
}

.baca-kikaku-detail-img {
  width: 260px;
  flex: 0 0 260px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.18));
}

.baca-kikaku-detail-info {
  flex: 1;
  padding-top: 8px;
}

.baca-kikaku-detail-name {
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 900;
  color: #1436ff;
  margin-bottom: 14px;
  line-height: 1.2;
}

.baca-kikaku-detail-desc {
  font-size: clamp(15px, 1.4vw, 20px);
  color: #333;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .baca-kikaku-carousel-track {
    gap: 14px;
  }
  .baca-kikaku-item {
    width: 180px;
  }
  .baca-kikaku-item img {
    width: 180px;
    height: 140px;
  }
  .baca-kikaku-detail {
    flex-direction: column;
    gap: 18px;
  }
  .baca-kikaku-detail-img {
    width: 100%;
    flex: none;
  }
}

/* =========================================
商品購入ボタン
========================================= */
.baca-buy-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #ff0000;
  color: #ffffff !important;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 900;
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: .03em;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  transition: opacity .2s;
}

.baca-buy-btn:hover {
  opacity: 0.85;
}


/* 鋭意制作中オーバーレイ */
.baca-wip-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.baca-wip-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  color: #ff2400;
  -webkit-text-stroke: 2px #00d7ff;
  font-family: 'MS PGothic', 'Osaka', sans-serif;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* mini-nav非表示 */
.baca-mini-nav {
  display: none;
}