/*
 * Cosboo Header
 * PC：左上の白いロゴタブ＋中央右の浮いた白い丸形メニュー＋右端のお問い合わせ
 * スマホ（1100px 以下）：ロゴタブ＋右上の丸いメニューボタン。押すと右からオレンジのメニューが出る
 * 色はテーマのキーカラー（--tcd-key1-color）。無ければオレンジ。
 */

/*
 * テーマのヘッダーと、テーマのスマホ用メニュー（#drawer_menu）を隠す。
 * テーマのメニューは開くボタンがヘッダーごと隠れて使えないうえ、閉じている間は画面の右外に置かれていて、
 * Android の Chrome がそれもページ幅に数えるとページ全体が縮小される。
 */
#header,
#drawer_menu {
  display: none !important;
}

.cb-header {
  --cb-accent: rgb(var(--tcd-key1-color, 255, 90, 0));
  --cb-accent-dark: color-mix(in srgb, var(--cb-accent) 88%, #000);
  --cb-text: #1f1f1f;
  --cb-top: 0px;
  /* PC のヘッダーの高さ。ロゴタブ・お問い合わせの高さと本文の上の余白はこれに合わせる */
  --cb-height: 112px;

  position: fixed;
  top: var(--cb-top);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: var(--cb-height);
  pointer-events: none; /* ヘッダーの隙間から下の本文を押せるように */
  font-family: inherit;
}
.cb-header > * {
  pointer-events: auto;
}
/* ログイン中は管理バーの下に出す */
.admin-bar .cb-header {
  --cb-top: 32px;
}

/*
 * 本文の上の余白：ヘッダーの高さちょうど（以前はヘッダーより 28px 多く空けていて、背景の柄が帯のように見えていた）。
 * TOP（body.home）だけは余白を 0 にして、大きな画像を画面のいちばん上から始め、ロゴタブとメニューをその上に重ねる。
 */
body {
  --cb-pad: 112px;
}
body.home {
  --cb-pad: 0px;
}
body {
  padding-top: var(--cb-pad) !important;
}

/*
 * TOP 以外：ヘッダーの帯は透明なので、本文の上の余白（ヘッダーの裏）に背景の柄が透けて見える。
 * 余白を白で埋め、ページのタイトル帯（#archive_header_title）が出ているページは帯の色をヘッダーの裏まで伸ばす。
 */
body:not(.home)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cb-pad);
  background: #fff;
}
#archive_header_title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--cb-pad);
  background: inherit;
}

/*
 * パンくず：タイトル帯と同じ色の帯に白文字で出す（白いパンくずの帯をなくし、タイトル帯とひと続きに見せる）
 * タイトル帯がないページ（記事など）は、cosboo-header.js が body に .cb-crumb-top を付け、
 * パンくずの色をヘッダーの裏まで伸ばす。
 * テーマの responsive.css がこの CSS より後に読み込まれるので、セレクタに body を足して強くしている。
 */
body #bread_crumb {
  background: rgba(var(--tcd-key2-color, 255, 172, 127), 1);
  color: #fff;
}
body #bread_crumb::after {
  display: none; /* テーマの下の影 */
}
body #bread_crumb ul {
  padding-top: 0;
  padding-bottom: 16px;
  line-height: 30px;
}
body #bread_crumb li {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}
body #bread_crumb li::after {
  content: "/";
  position: static;
  display: inline;
  height: auto;
  margin: 0 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: inherit;
  color: rgba(255, 255, 255, .7);
}
body #bread_crumb li a {
  height: auto;
  line-height: 1.6;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  opacity: .92;
  transition: opacity .2s, border-color .2s;
}
body #bread_crumb li a:hover {
  color: #fff;
  opacity: 1;
  border-color: #fff;
}
body #bread_crumb li.home a {
  border-bottom: 0;
}
body #bread_crumb li.home a span {
  position: absolute; /* 「ホーム」の文字は見えないまま幅も取らない（読み上げには残す） */
}
body #bread_crumb li.home a::before {
  color: #fff;
}
body #bread_crumb li.last,
body #bread_crumb li.last > span {
  color: #fff;
}
body #bread_crumb li.last > span {
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .25);
}
/* タイトル帯がないページ：上下に余白を取り、色をヘッダーの裏まで伸ばす */
.cb-crumb-top #bread_crumb ul {
  padding-top: 14px;
  padding-bottom: 14px;
}
.cb-crumb-top #bread_crumb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--cb-pad);
  background: inherit;
}

/* 左上：白いロゴタブ（右下だけ大きな角丸） */
.cb-header__logo {
  display: flex;
  align-items: center;
  height: var(--cb-height);
  margin: 0;
  padding: 0 52px 0 60px;
  background: #fff;
  border-radius: 0 0 52px 0;
  box-shadow: 0 4px 12px rgba(31, 31, 31, .08);
}
.cb-header__logo a {
  display: block;
  text-decoration: none;
}
.cb-header__logo img {
  display: block;
  width: 230px;
  height: auto;
}
.cb-header__site-name {
  color: var(--cb-accent);
  font-size: 28px;
  font-weight: 700;
}

/* 右側：浮いた白い丸形メニュー＋右端のお問い合わせ */
.cb-header__nav {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.cb-header__group {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
  margin-top: 18px;
  padding: 0 14px 0 44px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.cb-header__menu {
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-header__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-header__menu li::before {
  content: none;
}
.cb-header__menu a {
  position: relative;
  color: var(--cb-text);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.cb-header__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--cb-accent);
  transform: scaleX(0);
  transition: transform .2s;
}
.cb-header__menu a:hover::after,
.cb-header__menu a:focus-visible::after,
.cb-header__menu a[aria-current="page"]::after {
  transform: scaleX(1);
}
.cb-header__menu a[aria-current="page"] {
  color: var(--cb-accent);
}
.cb-header__cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--cb-accent);
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none !important;
  transition: opacity .2s;
}
.cb-header__cta:hover {
  opacity: .85;
}
.cb-header__sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1f1f1f;
  color: #fff !important;
}
.cb-header__sns svg {
  width: 20px;
  height: 20px;
}
.cb-header__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 190px;
  height: var(--cb-height);
  background: var(--cb-accent-dark);
  color: #fff !important;
  border-radius: 0 0 0 26px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none !important;
  transition: opacity .2s;
}
.cb-header__contact:hover {
  opacity: .9;
}
.cb-header__contact svg {
  width: 22px;
  height: 22px;
}
.cb-header a:focus-visible,
.cb-header button:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 3px;
}
.cb-header__sp-btn,
.cb-overlay {
  display: none;
}

/* 幅 1101〜1299px（小さめのノートPC）：大きいままだと横に収まらないので、ひと回り小さくする */
@media (min-width: 1101px) and (max-width: 1299px) {
  .cb-header {
    --cb-height: 90px;
  }
  body {
    --cb-pad: 90px;
  }
  body.home {
    --cb-pad: 0px;
  }
  .cb-header__logo {
    padding: 0 36px 0 40px;
    border-radius: 0 0 40px 0;
  }
  .cb-header__logo img {
    width: 180px;
  }
  .cb-header__nav {
    gap: 16px;
  }
  .cb-header__group {
    gap: 20px;
    height: 62px;
    margin-top: 14px;
    padding: 0 12px 0 32px;
  }
  .cb-header__menu {
    gap: 26px;
  }
  .cb-header__menu a,
  .cb-header__cta,
  .cb-header__contact {
    font-size: 15px;
  }
  .cb-header__cta {
    height: 44px;
    padding: 0 26px;
  }
  .cb-header__sns {
    width: 38px;
    height: 38px;
  }
  .cb-header__contact {
    width: 150px;
    border-radius: 0 0 0 20px;
  }
}

/* ===== スマホ・タブレット ===== */
@media (max-width: 1100px) {
  .cb-header {
    height: 64px;
  }
  .cb-header__logo {
    position: relative;
    z-index: 3;
    height: 64px;
    padding: 0 24px 0 16px;
    border-radius: 0 0 28px 0;
  }
  .cb-header__logo img {
    width: 130px;
  }
  /* ロゴタブ（高さ 64px）の下に本文が潜らないよう、タブの高さぶん空ける（TOP は 0） */
  body {
    --cb-pad: 64px;
  }
  body.home {
    --cb-pad: 0px;
  }

  /* 右上の丸いメニューボタン（開くと白地に×） */
  .cb-header__sp-btn {
    position: fixed;
    top: calc(var(--cb-top) + 10px);
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cb-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: background .2s;
  }
  .cb-header__sp-btn span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s, opacity .2s;
  }
  .cb-header.is-open .cb-header__sp-btn {
    background: #fff;
  }
  .cb-header.is-open .cb-header__sp-btn span {
    background: var(--cb-accent);
  }
  .cb-header.is-open .cb-header__sp-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .cb-header.is-open .cb-header__sp-btn span:nth-child(2) {
    opacity: 0;
  }
  .cb-header.is-open .cb-header__sp-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 右から出るメニュー（幅 300px・全高）。閉じている間は visibility: hidden でキーボードでも届かない */
  .cb-header__nav {
    position: fixed;
    top: var(--cb-top);
    right: 0;
    bottom: 0;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(300px, 82vw);
    padding: 110px 30px 40px;
    box-sizing: border-box;
    background: var(--cb-accent);
    overflow-y: auto;
    /*
     * 閉じている間も画面の内側に置き、右端から切り抜いて隠す。
     * transform で画面の右外へ出すと、Android の Chrome はそれもページ幅に数えてページ全体を縮小し、
     * PC 用のレイアウトで表示してしまう（Xiaomi 13 で発生）。
     */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    /* 閉じるときは引っ込み終わってから隠す。開くときはすぐ見えるようにする（すぐリンクへフォーカスを移せるように） */
    transition: clip-path .3s ease, visibility 0s linear .3s;
  }
  .cb-header.is-open .cb-header__nav {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path .3s ease, visibility 0s;
  }
  .cb-header__group {
    display: contents;
  }
  .cb-header__menu {
    order: 1;
    flex-direction: column;
    gap: 34px;
    padding-left: 6px;
  }
  .cb-header__menu a,
  .cb-header__menu a[aria-current="page"] {
    color: #fff;
    font-size: 18px;
  }
  .cb-header__menu a::after {
    background: #fff;
  }
  /* 参加要項はメニューの並びに入れて、ほかの項目と同じ見た目にする */
  .cb-header__cta {
    order: 2;
    align-self: flex-start;
    height: auto;
    margin-top: 34px;
    padding: 0 0 0 6px;
    background: none;
    border-radius: 0;
    font-size: 18px;
  }
  /* お問い合わせは目立つ丸ボタン（淡い黄色に濃いオレンジの文字） */
  .cb-header__contact {
    order: 3;
    flex-direction: row;
    gap: 8px;
    width: auto;
    height: 68px;
    margin-top: 44px;
    border-radius: 999px;
    background: #fff1a6;
    color: var(--cb-accent-dark) !important;
    box-shadow: none;
    font-size: 18px;
  }
  .cb-header__sns {
    order: 4;
    align-self: flex-start;
    width: 54px;
    height: 54px;
    margin-top: 40px;
  }
  .cb-header__sns svg {
    width: 22px;
    height: 22px;
  }
  .cb-header a:focus-visible {
    outline-color: #fff;
  }

  /* 本文を暗くする幕（押すと閉じる） */
  .cb-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: block;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s linear .3s;
  }
  .cb-header.is-open + .cb-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, visibility 0s;
  }
}
/*
 * ログイン中（管理バーあり）
 * このテーマは WordPress の「管理バーの分だけページを下げる」指定を外しているので、
 * 管理バーの高さ（PC 32px／782px 以下 46px）をヘッダーの位置と本文の上の余白の両方に足す。
 */
body.admin-bar {
  --cb-pad: calc(112px + 32px);
}
body.home.admin-bar {
  --cb-pad: 32px;
}
@media (min-width: 1101px) and (max-width: 1299px) {
  body.admin-bar {
    --cb-pad: calc(90px + 32px);
  }
  body.home.admin-bar {
    --cb-pad: 32px;
  }
}
@media (max-width: 1100px) {
  body.admin-bar {
    --cb-pad: calc(64px + 32px);
  }
  body.home.admin-bar {
    --cb-pad: 32px;
  }
}
@media (max-width: 782px) {
  .admin-bar .cb-header {
    --cb-top: 46px;
  }
  body.admin-bar {
    --cb-pad: calc(64px + 46px);
  }
  body.home.admin-bar {
    --cb-pad: 46px;
  }
}
/*
 * 幅 600px 以下では管理バーが固定されず、スクロールすると上へ流れて消える。
 * ヘッダーの位置は JS（cosboo-header.js）がスクロールに合わせて 46px → 0px に動かす（管理バーの下に隠れないように）。
 */

@media (prefers-reduced-motion: reduce) {
  .cb-header *,
  .cb-overlay {
    transition: none !important;
  }
}