/* ==========================================================================
   ヘッダー（3.6.0）：虫めがね｜中央にメディア名｜ハンバーガー。下線なし。
   トップの1ページ目はKVが名乗るので隠しておき、KVを過ぎたら上から出す。
   ========================================================================== */
.ot-bar {
  --bar-h: 64px;
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60;
  height: var(--bar-h); background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}
.ot-bar.is-scrolled { box-shadow: 0 6px 18px rgba(27, 27, 27, .06); }
.ot-bar--reveal { position: fixed; left: 0; right: 0; transform: translateY(calc(-100% - 4px)); }
.ot-bar--reveal.is-shown { transform: none; }
.ot-bar__inner {
  height: 100%; max-width: var(--ot-max, 1200px); margin: 0 auto; padding: 0 var(--ot-gutter, 24px);
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
}
.ot-bar__logo { justify-self: center; font-size: 22px !important; gap: .45em !important; }
.ot-bar__logo > span { letter-spacing: .15em; }

.ot-bar__search, .ot-bar__menu { position: static; }
.ot-bar__menu { justify-self: end; }
.ot-bar__btn {
  list-style: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  border-radius: 50%; color: var(--ot-ink, #1b1b1b); transition: background-color .2s;
}
.ot-bar__btn::-webkit-details-marker { display: none; }
.ot-bar__btn::marker { content: ""; }
.ot-bar__btn:hover { background: #eef6fd; }
.ot-bar__ico-close { display: none; }
.ot-bar__search[open] .ot-bar__ico-open { display: none; }
.ot-bar__search[open] .ot-bar__ico-close { display: block; }

.ot-burger { position: relative; width: 22px; height: 16px; display: block; }
.ot-burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .2s, top .25s; }
.ot-burger i:nth-child(1) { top: 0; }
.ot-burger i:nth-child(2) { top: 7px; }
.ot-burger i:nth-child(3) { top: 14px; }
.ot-bar__menu[open] .ot-burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.ot-bar__menu[open] .ot-burger i:nth-child(2) { opacity: 0; }
.ot-bar__menu[open] .ot-burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* 開いた中身。ヘッダーの真下に出す */
.ot-bar__sheet {
  position: absolute; top: 100%; z-index: 61; background: #fff; border: 2px solid var(--ot-ink, #1b1b1b);
  box-shadow: 6px 6px 0 var(--ot-ink, #1b1b1b); padding: 22px 24px 24px;
  animation: ot-sheet .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes ot-sheet { from { opacity: 0; transform: translateY(-6px); } }
.ot-bar__sheet--search { left: var(--ot-gutter, 24px); width: min(460px, calc(100vw - 2 * var(--ot-gutter, 24px))); }
.ot-bar__sheet--menu { right: var(--ot-gutter, 24px); width: min(340px, calc(100vw - 2 * var(--ot-gutter, 24px))); max-height: calc(100vh - 100px); overflow: auto; }
.ot-bar__sheet-title { margin: 0 0 12px; font-weight: 800; font-size: .95rem; }
.ot-bar__quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ot-bar__quick a {
  display: inline-block; padding: .4em .9em; font-size: .78rem; font-weight: 700; text-decoration: none; color: var(--ot-ink, #1b1b1b);
  border: 1.5px solid var(--ot-ink, #1b1b1b); border-radius: 999px;
}
.ot-bar__quick a:hover { background: #dff0fc; }
.ot-bar__nav { margin: 0 0 18px; padding: 0; list-style: none; }
.ot-bar__nav li + li { border-top: 1.5px dashed rgba(27, 27, 27, .25); }
.ot-bar__nav a { display: block; padding: 12px 2px; color: var(--ot-ink, #1b1b1b); text-decoration: none; font-weight: 800; font-size: 1rem; }
.ot-bar__nav a span { display: block; font: 700 .64rem/1.4 "Poppins OnTrails", sans-serif; letter-spacing: .18em; color: #2f9be6; }
.ot-bar__nav a:hover { color: #2f9be6; }
.ot-social--menu { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 600px) {
  .ot-bar { --bar-h: 56px; }
  .ot-bar__inner { grid-template-columns: 44px 1fr 44px; }
  .ot-bar__logo { font-size: 17px !important; }
  .ot-bar__logo > span { letter-spacing: .08em; }
  .ot-bar__sheet { left: 12px !important; right: 12px !important; width: auto !important; }
}