/* 自己ホスト IGS の定義（caption-title のみで使う） */
@font-face {
  font-family: "IGS";
  src: url("https://apollonmusic.com/audiokitchen/fonts/IGS.woff") format("woff");
  font-weight: 400 700; /* 単一ファイルしかない場合、複数のウェイトに対して同ファイルを使う設定にできます */
  font-style: normal;
  font-display: swap;
}

nav {
    font-family: "IGS", "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.c-title{
    font-family: "IGS", "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

p.js-photo_mouseover {
    opacity: 100% !important;
    color: white;
    font-family: "IGS", "Montserrat", "Helvetica Neue", Arial, sans-serif;
    text-align: left !important;
    background: rgba(0, 0, 0, .0) !important;
    vertical-align: bottom !important;
    font-size: 20px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
}

.caption-cta {
  font-family: "IGS", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;       /* 必要なら 400 に変更 */
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: 24px;
}

.caption-title {
  font-family: "IGS", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;       /* 必要なら 400 に変更 */
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* スライダー親を確実に基準にする */
.hero-slider {
  position: relative;   /* 矢印／ドットの絶対配置参照用 */
  height: 90vh;         /* 必要な高さを確保（既存値に合わせて） */
  min-height: 520px;
}

/* Slick の内部ラッパー全体をスライダー高さに揃える */
.hero-slider .slick-list,
.hero-slider .slick-track,
.hero-slider .slick-slide {
  height: 100%;
}

/* 各スライド要素が高さ100%でレイアウトに寄与するように */
.hero-slider .slide {
  position: relative;   /* 内部の絶対配置要素（img, caption）の基準 */
  height: 100%;
  display: block;       /* slick が inline-block 等にする場合があるので明示 */
  overflow: hidden;
}

/* 画像をスライド全体に被せる安全な方法（object-fit対応） */
.hero-slider .slide img {
  position: absolute;
  inset: 0;             /* top:0;right:0;bottom:0;left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 画像をアスペクト保ったままカバー */
  display: block;
  z-index: 1;
}

/* キャプション等は画像の上に出す */
.hero-slider .caption {
  position: relative;
  z-index: 3;
}

/* 矢印・ドットが画像の上に来るように */
.hero-slider .slick-prev,
.hero-slider .slick-next,
.hero-slider .slick-dots {
  z-index: 5;
}

/* リセット */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; font-family: 'Montserrat', Arial, sans-serif; background: #fff; color: #111; }

/* ヒーロー */
.hero { width: 100%; overflow: hidden; }
.hero-slider { position: relative; height: 90vh; min-height: 420px; }

/* スライド内イメージ */
.hero-slider .slide {
  position: relative;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: #000;
}
.hero-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* キャプション（画像上のテキスト） */
.caption {
  position: relative;
  z-index: 3;
  max-width: 500px;
  margin-top: 100px;
  margin-left: 8%;
  color: #fff;
  text-shadow: 0 6px 14px rgba(0,0,0,0.6);
}
.caption-title {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.caption-body {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  margin-bottom: 1rem;
  opacity: 0.95;
}
.caption-cta {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
}

/* overlay to improve contrast */
.hero-slider .slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Slick デフォルト矢印を上書き */
.slick-prev, .slick-next {
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: none;
  border: none;
}
.slick-prev { left: 18px; }
.slick-next { right: 18px; }
.slick-prev:before, .slick-next:before { content: ""; } /* remove default arrows */

/* Custom arrow icons */
.slick-prev svg, .slick-next svg { width: 18px; height: 18px; fill: #fff; }

/* 数字ドット（カスタムページング） */
.slick-dots {
  position: absolute;
  bottom: 18px;
  left: 55%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex !important;
  gap: 10px;
  list-style: none;
}
.slick-dots li {
  margin: 0;
}
.slick-dots button {
  background: rgba(255,255,255,0.35);
  color: #fff;
  border: none;
  width: auto;
  padding: 6px 10px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
}
.slick-dots .slick-active button {
  background: #fff;
  color: #000;
}

.slick-dots li button:before {
    opacity: .25;
    color: #f5f5f5;
}

/* Click-related fixes only — ghost header parts REMOVED */

/* 親ヘッダ領域を視覚はそのままにクリックを透過（ゴーストヘッダは触らない） */
#a-header,
.a-header,
#bk25384 ,
#bk25519 ,
#bk25716 {
  pointer-events: none;
}

/* ナビ内部の実際に操作する要素だけクリック可能に戻す */
header nav,
header nav a,
.c-menu,
.c-menu a,
.menu-parts,
.menu-parts a,
.c-unlink,
.c-unlink a,
#spNavigationTrigger,
#spNavigationTrigger * {
  pointer-events: auto;
}

/* ヘッダの擬似要素がクリックを奪う場合の保険 */
#a-header::before, #a-header::after,
.c-menu::before, .c-menu::after {
  pointer-events: none;
}

/* スライダーとその内部は必ずポインターイベントを受け取る */
.hero-slider,
.hero-slider * {
  pointer-events: auto !important;
}

/* CTA（Find out more）を常に前面にしてクリック可能に */
.caption-cta {
  position: relative;
  z-index: 12000;
  pointer-events: auto;
}

/* キャプションはCTAの背後に出る程度に */
.caption {
  position: relative;
  z-index: 11999;
}

/* ロゴ画像のリンクをクリック可能にする */
#bk25391 .c-img a,
#bk25393 .c-img a,
.a-header .c-img a,
.c-img a {
  pointer-events: auto;
  cursor: pointer;
}

.slick-initialized .slick-slide {
    margin: 0px !important;
}

button.slick-arrow {
    display: none;
}

/* レスポンシブ */
@media (max-width: 640px) {
  .hero-slider { height: 56vh; min-height: 600px; }
  .caption { margin-left: 5%; max-width: 90%; }
  .slick-prev, .slick-next { width: 40px; height: 40px; }
}

.slick-prev, .slick-next {
    top: 87%;
}