@charset "UTF-8";

/* ==========================================================================
   Breadcrumb｜02（Rectangular Menu型）
   - container内（最大1150px）
   - Rect：180px固定 / 高さ46px / 1行ellipsis
   - 区切り：▼（20px）
   - current：TOPはRect固定、TOP以外は「残り幅で省略」
   ========================================================================== */

:root {
  --bc-accent: #d48120;

  --bc-rect-w: 180px;
  --bc-rect-h: 46px;

  --bc-gap: 20px; /* ▼含む間隔 */
  --bc-font: 14px;
  --bc-title-font: 16px;
}

/* ==========================================
   Breadcrumb Block Frame
   ========================================== */

.c-breadcrumbArea {
  position: relative;

  margin: 8px 0; /* 上下を縮める */
  padding: 18px 22px; /* 左右締める */

  margin-left: 30px;
  margin-right: 30px;

  background: #faf7f4; /* ごく薄い空気色 */

  border: 1px solid rgba(212, 129, 32, 0.25);
}

/* 内側ライン（さらに控えめ） */
.c-breadcrumbArea::before {
  content: "";
  position: absolute;
  inset: 6px; /* 内側余白も少し縮める */

  border: 1px solid rgba(212, 129, 32, 0.08); /* ほぼ気配 */
  pointer-events: none;
}

/* Heading（flex親でも必ず改行して上段に置く） */
.c-breadcrumb__heading {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  order: -1;

  font-family: "Caveat", cursive;
  font-weight: 400;

  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1;

  color: rgba(212, 129, 32, 0.55);

  margin: 0 0 10px 2px;

  /* 見えるシャドー（重くしない） */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 16px rgba(0, 0, 0, 0.3);
}

/* 1行構成 */
.c-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--bc-gap);
  white-space: nowrap;
  overflow: hidden;
}

/* Rect（リンク部分） */
.c-breadcrumb .c-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--bc-rect-w);
  height: var(--bc-rect-h);

  font-size: var(--bc-font);
  text-align: center;

  border: 1px solid var(--bc-accent);
  background: transparent;
  color: var(--bc-accent);
  text-decoration: none;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Breadcrumb内のリンクは下線を出さない（グローバルaの例外） */
.c-breadcrumb a {
  text-decoration: none;
}

/* hover：全面オレンジ＋文字白 */
.c-breadcrumb .c-breadcrumb__link:hover {
  background: var(--bc-accent);
  color: #ffffff;
  border-color: var(--bc-accent);
  text-decoration: none;
}

/* 区切り（▼） */
.c-breadcrumb__sep {
  width: 16px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
  text-align: center;
}

/* current 共通（省略の土台） */
.c-breadcrumb__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TOP：NAIL(current)もRect固定（伸びない） */
body.home .c-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--bc-rect-w);
  height: var(--bc-rect-h);

  font-size: var(--bc-font);
  text-align: center;

  border: 1px solid var(--bc-accent);
  background: transparent;
  color: var(--bc-accent);

  flex: 0 0 var(--bc-rect-w);
}

/* TOP以外：最後のcurrent（記事タイトルなど）は残り幅で省略 */
body:not(.home) .c-breadcrumb__current {
  font-size: 15px; /* 少し落ち着かせる */
  font-weight: 400; /* 600 → 400 */
  flex: 1 1 auto;
}

/* singleの2行目は廃止（1行構成へ） */
.c-breadcrumb__title {
  display: none;
}