/* ============================================================
 * MIKI METAL WORKS — Hero Slider (Cinematic Full-bleed)
 * v1.0 / 2026.08
 *
 * すべてのセレクタに .miki-slider スコープを付けています。
 * 既存の子テーマCSSと衝突しません。
 * ============================================================ */

/* ---------- カラーとフォントのトークン ---------- */
.miki-slider{
  --miki-brand:#1013ba;
  --miki-brand-deep:#0a0d7a;
  --miki-gold:#c9a86a;
  --miki-gold-warm:#e8c98a;
  --miki-ink:#05060f;
  --miki-fg:#f0ede4;
  --miki-fg-muted:#d5d6e5;
  --miki-fg-sub:#a8a8c0;
  --miki-line:rgba(255,255,255,.28);

  /* フォント。子テーマで @font-face 済みならこれで上書き可 */
  --miki-serif: "Shippori Mincho","Noto Serif JP", serif;
  --miki-serif-en: "Cormorant Garamond","Times New Roman", serif;
  --miki-sans: "Inter","Noto Sans JP","Helvetica Neue",Arial,sans-serif;

  /* 高さ。デスクトップ:vh、モバイル:ピクセル */
  --miki-h: 720px;
}

/* Google Fontsを子テーマで別読み込みしない場合は
   functions.php で追加してください。README参照 */

/* ---------- 外枠 ---------- */
.miki-slider{
  position:relative;
  width:100%;
  height:var(--miki-h);
  min-height:560px;
  max-height:900px;
  overflow:hidden;
  background:var(--miki-ink);
  color:var(--miki-fg);
  font-family:var(--miki-sans);
  -webkit-font-smoothing:antialiased;
  isolation:isolate;
}
.miki-slider *,
.miki-slider *::before,
.miki-slider *::after{ box-sizing:border-box; }

/* ---------- スライド ---------- */
.miki-slider__slides{
  position:absolute;inset:0;
}
.miki-slider__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.6s ease-in-out;
  z-index:1;
}
.miki-slider__slide.is-active{ opacity:1; z-index:2; }

/* 全面写真 */
.miki-slider__img{
  position:absolute;inset:0;
  overflow:hidden;
  background:#000;
}
.miki-slider__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* オーバーレイ（暗み） */
.miki-slider__img::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 800px 700px at 25% 65%,
      rgba(5,6,15,.7) 0%,
      rgba(5,6,15,.2) 60%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(5,6,15,.3) 0%,
      rgba(5,6,15,0) 30%,
      rgba(5,6,15,0) 55%,
      rgba(10,12,74,.55) 82%,
      var(--miki-brand) 100%);
  pointer-events:none;
}

/* ---------- トップバー（ロゴ + ナビ） ---------- */
.miki-slider__topbar{
  position:absolute; top:0; left:0; right:0;
  padding:32px clamp(24px, 6vw, 90px) 0;
  z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.miki-slider__brand{
  display:flex; align-items:center; gap:16px;
  color:var(--miki-fg);
}
.miki-slider__brand::before{
  content:"";
  width:2px; height:26px;
  background:var(--miki-gold);
  flex-shrink:0;
}
.miki-slider__brand-name{
  font-family:var(--miki-serif-en);
  font-weight:600; font-size:clamp(15px, 1.6vw, 20px);
  letter-spacing:.2em;
  white-space:nowrap;
}
.miki-slider__brand-loc{
  font-family:var(--miki-sans);
  font-weight:300; font-size:10px;
  color:var(--miki-fg-sub);
  letter-spacing:.3em;
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.2);
  text-transform:uppercase;
  white-space:nowrap;
}
.miki-slider__nav{
  display:flex; gap:clamp(20px, 2.8vw, 36px);
  align-items:center;
}
.miki-slider__nav a{
  color:var(--miki-fg);
  text-decoration:none;
  font-family:var(--miki-sans);
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400;
  transition:color .3s;
  white-space:nowrap;
}
.miki-slider__nav a:hover{ color:var(--miki-gold); }
.miki-slider__nav-cta{
  color:#fff !important;
  background:transparent;
  padding:10px 22px;
  border:1px solid rgba(255,255,255,.35);
  letter-spacing:.2em !important;
  font-weight:500 !important;
  transition:all .3s;
}
.miki-slider__nav-cta:hover{
  background:var(--miki-gold);
  color:var(--miki-ink) !important;
  border-color:var(--miki-gold);
}

/* ---------- オーバーレイ本体（左下） ---------- */
.miki-slider__overlay{
  position:absolute;
  bottom:170px;
  left:clamp(24px, 6vw, 90px);
  right:clamp(24px, 6vw, 90px);
  max-width:760px;
  z-index:5;
  color:var(--miki-fg);
}
.miki-slider__num{
  display:flex; align-items:center; gap:14px;
  font-family:var(--miki-serif-en);
  font-style:italic; font-weight:400;
  font-size:13px;
  color:var(--miki-gold);
  letter-spacing:.2em;
}
.miki-slider__num::before{
  content:"";
  width:44px; height:1px;
  background:var(--miki-gold);
}
.miki-slider__num b{ font-weight:500; }

/* 小見出し。2026-09-04 に英語→日本語へ変更した。
   Cormorant Garamond は日本語グリフを持たないため、書体の指定も
   あわせて変えている。指定を戻すと環境依存のフォールバックになる。
   font-style も normal にすること（日本語のitalicは合成斜体になる）。 */
.miki-slider__ensub{
  font-family:"Noto Sans JP", sans-serif;
  font-style:normal; font-weight:500;
  font-size:28px;
  color:var(--miki-gold);
  letter-spacing:.15em;
  margin-top:20px;
  line-height:1.5;
}
.miki-slider__title{
  font-family:var(--miki-serif);
  font-weight:400;
  font-size:clamp(30px, 5vw, 62px);
  line-height:1.5;
  letter-spacing:.05em;
  color:var(--miki-fg);
  margin-top:22px;
  text-shadow:0 4px 40px rgba(5,6,15,.5);
  word-break:keep-all;
  overflow-wrap:normal;
}
.miki-slider__title .accent{ color:var(--miki-gold); }
/* .miki-slider__lead（小さい説明文）は 2026-09-04 に削除。
   戻すときは view-slider.php のマークアップと合わせて git 履歴から。 */

/* ---------- 大きなインデックス数字（右下） ---------- */
.miki-slider__big-index{
  position:absolute;
  bottom:150px;
  right:clamp(24px, 6vw, 120px);
  font-family:var(--miki-serif-en);
  font-style:italic; font-weight:300;
  font-size:clamp(90px, 14vw, 180px);
  line-height:.9;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,168,106,.4);
  letter-spacing:-.02em;
  z-index:4;
  pointer-events:none;
  text-align:right;
}
.miki-slider__big-index small{
  display:block;
  font-size:clamp(12px, 1.4vw, 22px);
  color:var(--miki-gold);
  -webkit-text-stroke:0;
  font-style:normal;
  font-family:var(--miki-sans);
  font-weight:400;
  letter-spacing:.3em;
  text-align:right;
  margin-top:14px;
}

/* ---------- HUD（下部：SCROLL + ドット） ---------- */
.miki-slider__hud{
  position:absolute;
  bottom:34px;
  left:0; right:0;
  padding:0 clamp(24px, 6vw, 90px);
  display:flex; align-items:center;
  z-index:10;
  font-family:var(--miki-sans);
  font-size:10px; letter-spacing:.25em;
  color:var(--miki-fg);
}
.miki-slider__scroll{
  color:var(--miki-fg-muted);
  font-family:var(--miki-serif-en);
  font-style:italic;
  font-size:13px;
  display:flex; align-items:center; gap:14px;
  letter-spacing:.15em;
}
.miki-slider__scroll::after{
  content:"";
  width:24px; height:1px;
  background:var(--miki-fg-muted);
  animation:miki-scr 2s ease-in-out infinite;
}
@keyframes miki-scr{
  0%,100%{ transform:translateY(0); opacity:.4; }
  50%{ transform:translateY(4px); opacity:1; }
}
.miki-slider__dots{
  display:flex; margin-left:auto;
  gap:0;
}
/* SCROLL DOWNを撤去した場合、ドットは右端でOK。中央寄せにしたい場合は
   .miki-slider__hud { justify-content: center; } .miki-slider__dots { margin: 0; } */
.miki-slider__dot{
  width:64px; height:1px;
  background:var(--miki-line);
  margin-left:16px;
  position:relative;
  cursor:pointer;
  border:0; padding:0;
  transition:background .3s;
}
.miki-slider__dot.is-active{ background:var(--miki-gold); }
.miki-slider__dot:hover{ background:rgba(201,168,106,.55); }
.miki-slider__dot span{
  position:absolute;
  top:-24px; left:0;
  font-size:10px;
  color:var(--miki-fg-sub);
  letter-spacing:.15em;
  font-family:var(--miki-serif-en);
  font-style:italic;
  transition:color .3s;
  white-space:nowrap;
}
.miki-slider__dot.is-active span{ color:var(--miki-gold); }

/* ---------- 登場アニメーション ---------- */
.miki-slider__slide.is-active .miki-anim{
  animation:miki-fade-up 1.2s .3s cubic-bezier(.2,.7,.2,1) both;
}
.miki-slider__slide.is-active .miki-anim.d2{ animation-delay:.55s; }
.miki-slider__slide.is-active .miki-anim.d3{ animation-delay:.8s; }
.miki-slider__slide.is-active .miki-anim.d4{ animation-delay:1.05s; }
.miki-slider__slide.is-active .miki-anim.d5{ animation-delay:1.3s; }
@keyframes miki-fade-up{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- レスポンシブ：タブレット ---------- */
@media (max-width: 1024px){
  .miki-slider{
    --miki-h: 640px;
  }
  .miki-slider__overlay{
    bottom:140px;
    max-width:none;
  }
  .miki-slider__big-index{
    bottom:130px;
    font-size:clamp(80px, 16vw, 140px);
    opacity:.85;
  }
}

/* ---------- レスポンシブ：スマホ ---------- */
@media (max-width: 720px){
  .miki-slider{
    --miki-h: 92vh;
    min-height:520px;
  }
  .miki-slider__topbar{
    padding:20px 24px 0;
  }
  .miki-slider__brand-loc{
    display:none;
  }
  /* ナビはスマホでは全体非表示（ハンバーガーは既存テーマに任せる想定） */
  .miki-slider__nav{
    display:none;
  }
  .miki-slider__overlay{
    bottom:120px;
    left:24px; right:24px;
    max-width:none;
  }
  .miki-slider__title{
    font-size:clamp(26px, 7.5vw, 40px);
    line-height:1.55;
    text-shadow:0 2px 24px rgba(5,6,15,.7);
  }
  .miki-slider__ensub{
    font-size:20px;
  }
  .miki-slider__big-index{
    bottom:auto;
    top:82px;
    right:20px;
    font-size:80px;
  }
  .miki-slider__big-index small{
    font-size:11px;
    letter-spacing:.25em;
  }
  .miki-slider__hud{
    bottom:24px;
    padding:0 24px;
  }
  .miki-slider__scroll{ display:none; }
  .miki-slider__dots{
    margin:0 auto;
  }
  .miki-slider__dot{
    width:36px;
    margin:0 8px;
  }
  .miki-slider__dot span{ display:none; }

  /* ★ 2026-10-03（Ken の指示「トップのヒーローの高さを他のページと同じくらいに」）:
     92vh（最低 520px）→ 360px。下層ページのヒーローは SP で約 320〜350px。
     文字のかたまりは下端から 120 → 64px、大きな「01」は上へ寄せて文字と重ならないようにする。 */
  .miki-slider{
    --miki-h: 360px;
    min-height:0;
  }
  .miki-slider__overlay{bottom:64px}
  .miki-slider__big-index{top:20px;font-size:64px}

  /* オーバーレイの暗みをスマホで少し強めに */
  .miki-slider__img::after{
    background:
      radial-gradient(ellipse at 30% 70%,
        rgba(5,6,15,.55) 0%,
        rgba(5,6,15,.2) 55%,
        transparent 100%),
      linear-gradient(180deg,
        rgba(5,6,15,.35) 0%,
        rgba(5,6,15,0) 35%,
        rgba(10,12,74,.55) 78%,
        var(--miki-brand) 100%);
  }
}

/* ---------- reduced-motion：モーションを控える ---------- */
@media (prefers-reduced-motion: reduce){
  .miki-slider__slide,
  .miki-slider__slide.is-active .miki-anim,
  .miki-slider__scroll::after{
    animation:none !important;
    transition:opacity .3s ease !important;
  }
}

/* ---------- アクセシビリティ：フォーカス可視化 ---------- */
.miki-slider__dot:focus-visible,
.miki-slider__nav a:focus-visible{
  outline:2px solid var(--miki-gold);
  outline-offset:4px;
}

/* ---------- Print ---------- */
@media print{
  .miki-slider{ height:auto; page-break-inside:avoid; }
  .miki-slider__slide{ position:relative; opacity:1; }
  .miki-slider__hud,
  .miki-slider__nav{ display:none; }
}