/* ===== HERO SLIDER ===== */
  .hero-slider-wrap {
    position: relative;
    overflow: hidden;
  }

  /* slick初期化前にガタつかないよう最初の1枚だけ表示 */
  .hero-slider .hero-slide:not(:first-child) { display: none; }
  .hero-slider.slick-initialized .hero-slide { display: block !important; }

  /* slick-list・slick-trackもheightを継承させて揃える */
  .hero-slider .slick-list { overflow: hidden; height: 100% !important; }
  .hero-slider .slick-track { height: 100% !important; }
  .hero-slider .slick-dots li button:before { font-family: 'slick'; }

  .hero-slide {
    /* ★ 背景画像・オーバーレイ濃度はstyle属性で各スライド個別に指定 ★
       --slide-bg: url(...)
       --ov-l: 左端の不透明度 (default 0.62)
       --ov-m: 中央の不透明度 (default 0.42)
       --ov-r: 右端の不透明度 (default 0.10)
    ★ */
    background:
      linear-gradient(
        to right,
        rgba(30,10,30,var(--ov-l,0.62)) 0%,
        rgba(30,10,30,var(--ov-m,0.42)) 45%,
        rgba(30,10,30,var(--ov-r,0.10)) 100%
      ),
      var(--slide-bg) center center / cover no-repeat;
    background-size: auto, cover;
    height: 560px;
    display: flex !important;
    align-items: center;
    padding: 0;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  @media (max-width: 1024px) {
    .hero-slide { height: 500px; }
  }

  @media (max-width: 768px) {
    .hero-slide { height: 88vw; max-height: 560px; min-height: 420px; }
  }

  /* slickのdots上書き */
  .hero-slider .slick-dots {
    bottom: 20px;
  }
  .hero-slider .slick-dots li button:before {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
  }
  .hero-slider .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1;
  }

  @keyframes fadeUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .hero-slide::before {
    content: 'TOBITA';
    position: absolute;
    right: -8px; bottom: -16px;
    font-size: clamp(68px, 18vw, 160px);
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: rgba(255,255,255,0.18);
    opacity: 1;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 1;
  }

  /* .hero-woman は背景画像統合のため廃止 */
  .hero-woman { display: none; }

  .hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 48px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
  }

  .hero-badge {
    display: inline-block;
    font-size: 13px;
    color: rgba(255,255,255,0.95);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 13px;
    background: rgba(240,62,122,0.62);
    padding: 8px 28px 8px 16px;
    backdrop-filter: blur(4px);
    transform: skewX(-12deg);
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  }
  .hero-badge span {
    display: inline-block;
    transform: skewX(12deg);
  }

  .hero-slide h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(42px, 5.5vw, 58px);
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 21px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  }

  .hero-slide h1 span { color: #ffb3cf; text-shadow: 0 1px 8px rgba(0,0,0,0.25); }

  .hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.92);
    line-height: 1.9;
    margin-bottom: 34px;
    max-width: 420px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  }

  .hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 34px;
  }

  .tag {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 500;
    backdrop-filter: blur(4px);
  }

  /* hero内専用 btn-primary → common.cssの定義を継承しつつヒーロー用余白を追加 */
  .hero-inner .btn-primary {
    margin-top: 8px;
  }