/* =========================================
  breadcrumb.php 用
  - FV（アイキャッチ）+ 下部カーブ（円形切り抜き）
  - パンくず + 星（同一行）
  Breakpoints：SP 〜750px / PC 1201px〜
========================================= */

.bread-hero {
  position: relative;
  background: #fff;
}

/* ---------- FV（画像） ---------- */
.bread-hero__media {
  position: relative;
  height: 360px;
  /* Tablet想定（基準） */
  overflow: hidden;
}

.bread-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* うっすら暗幕（文字の視認性UP） */
.bread-hero__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  z-index: 2;
}

/* FV中央タイトル（白＋縁取り） */
.bread-hero__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 0 16px;
  text-align: center;
  width: min(92vw, 980px);
}

.bread-hero__title span {
  display: inline-block;
  color: #fff;
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: .02em;

  /* カンプの“白文字＋黒フチ”寄せ */
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    2px 0 0 rgba(0, 0, 0, 0.55),
    -2px 0 0 rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 -2px 0 rgba(0, 0, 0, 0.55),
    1px 1px 0 rgba(0, 0, 0, 0.45),
    -1px 1px 0 rgba(0, 0, 0, 0.45),
    1px -1px 0 rgba(0, 0, 0, 0.45),
    -1px -1px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- 下部カーブ（TOPの .top-hero__curve と同等） ---------- */
.bread-hero__curve {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -150px;
  /* Tablet想定：見えるカーブ量 */
  width: 200%;
  height: 220px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}

/* ---------- パンくずバー ---------- */
.bread-hero__bar {
  position: relative;
  background: #fff;
  padding-top: 0px;
  /* カーブが被る分の逃げ（Tablet基準） */
  padding-bottom: 0px;
}

.bread-hero__bar-inner {
  width: min(1000px, 92%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ---------- パンくず ---------- */
.bread-crumb {
  flex: 1;
  min-width: 0;
}

.bread-crumb__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #6d6d6d;
  font-size: 14px;
  line-height: 1.6;
}

.bread-crumb__item {
  display: inline-flex;
  align-items: center;
}

.bread-crumb__sep {
  color: #9a9a9a;
  line-height: 1;
  margin: 0 2px;
}

.bread-crumb__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #7f7f7f;
  text-decoration: none;
}

.bread-crumb__home svg {
  display: block;
}

.bread-crumb__list a {
  color: #6d6d6d;
  text-decoration: none;
}

.bread-crumb__list a:hover {
  text-decoration: underline;
}

/* ---------- 星（パンくずと同じ高さ） ---------- */
.bread-hero__star {
  width: 86px;
  /* カンプ右側の存在感 */
  height: auto;
  display: block;
  flex: 0 0 auto;
  opacity: .95;
}

/* ---------- SP（〜750px） ---------- */
@media (max-width:750px) {
  .bread-hero__media {
    height: 280px;
  }

  .bread-hero__curve {
    width: 220%;
    height: 200px;
    bottom: -150px;
  }

  .bread-hero__bar {
    padding-top: 0px;
    padding-bottom: 22px;
  }

  .bread-hero__bar-inner {
    width: min(1000px, 92%);
    gap: 10px;
  }

  .bread-crumb__list {
    font-size: 13px;
  }

  .bread-hero__star {
    width: 72px;
  }
}

/* ---------- PC（1201px〜） ---------- */
@media (min-width:1201px) {
  .bread-hero__media {
    height: 500px;
  }

  .bread-hero__curve {
    width: 110%;
    height: 220px;
    bottom: -125px;
  }

  .bread-hero__bar {
    padding-top: 0px;
    padding-bottom: 34px;
  }

  .bread-hero__bar-inner {
    width: min(1100px, 92%);
  }

  .bread-hero__star {
    width: 150px;
  }
}

/* うっすらマスク（白20%） */
.bread-hero__shade {
  background: rgba(255, 255, 255, 0.20);
  /* ← 白20% */
}

/* =========================================
  single-news用：FV（画像・タイトル）なしのパンくずレイアウト
========================================= */
.bread-hero--simple .bread-hero__bar {
  padding-top: 18px;
  /* FVが無いので大きな余白を消す */
  padding-bottom: 18px;
}

/* SP */
@media (max-width:750px) {
  .bread-hero--simple .bread-hero__bar {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* PC */
@media (min-width:1201px) {
  .bread-hero--simple .bread-hero__bar {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}