/*
  Skin Name: nyalha-base
  Skin URI: https://nyalha.com/
  Author: AoiWotoha
  Author URI: https://nyalha.com/
  Version: 1.0.2
  Priority: 10
*/


#header-container,
.header-container {
  background-color: rgba(13, 13, 13, 0.93) !important;
}

#header,
.header,
#navi,
.navi,
.nav-container {
  background-color: transparent !important;
}

/*フロントページ投稿日非表示*/
.post-33 .date-tags {
display: none;
}


/* Xアイコン用メニュー項目そのものの幅を固定 */
#navi .menu-x-icon {
  width: 60px;
  min-width: 60px;
}

/* ホバーで見える領域とクリック領域を一致させる */
#navi .menu-x-icon > a {
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  opacity: 1;
}

/* Xアイコン画像 */
#navi .menu-x-icon > a::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;

  background-image: url("http://www.nyalha.com/wp-content/uploads/2026/07/logo-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

#navi .navi-in > ul > .menu-x-icon > a {
  justify-content: center !important;
  text-align: center !important;
}

/*ハンバーガーメニュー*/

.header-toggle {
  --toggle-button-size: 56px;
  --toggle-icon-size: 42px;
  --toggle-line-height: 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--toggle-button-size);
  height: var(--toggle-button-size);

  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.header-toggle-icon {
  position: relative;
  display: inline-block;
  width: var(--toggle-icon-size);
  height: var(--toggle-icon-size);
}

.header-toggle-icon span {
  position: absolute;
  left: 50%;
  width: 100%;
  height: var(--toggle-line-height);
  background: #fff !important;
  border-radius: 999px;
  transform: translateX(-50%);
  transform-origin: center;
  transition:
    top 0.2s,
    width 0.2s,
    transform 0.2s,
    opacity 0.2s;
}

/* 初期状態：三本線 */
.header-toggle-icon span:nth-child(1) {
  top: 4px;
}

.header-toggle-icon span:nth-child(2) {
  top: calc(50% - var(--toggle-line-height) / 2);
}

.header-toggle-icon span:nth-child(3) {
  bottom: 4px;
}

/* 選択時：× */
.header-toggle.is-on .header-toggle-icon span:nth-child(1) {
  top: calc(50% - var(--toggle-line-height) / 2);
  width: 141%;
  transform: translateX(-50%) rotate(45deg);
}

.header-toggle.is-on .header-toggle-icon span:nth-child(2) {
  opacity: 0;
}

.header-toggle.is-on .header-toggle-icon span:nth-child(3) {
  top: calc(50% - var(--toggle-line-height) / 2);
  bottom: auto;
  width: 141%;
  transform: translateX(-50%) rotate(-45deg);
}

/* トグルメニュー全体 */
.header-toggle-menu-item {
  position: relative;
  overflow: visible;
}

/* 初期状態：トグルの中身は非表示 */
.header-toggle-panel {
  display: none !important;
  position: absolute;
  top: 72px;
  right: 0;
  z-index: 99999;

  min-width: 220px;
  background: #222;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* 開いた時だけ表示 */
.header-toggle-menu-item.is-open > .header-toggle-panel {
  display: block !important;
}

/* トグル内メニュー */
.header-toggle-links {
  display: block;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #222;
}

.header-toggle-links li {
  display: block;
  margin: 0;
  padding: 0;
}

.header-toggle-links a,
.header-toggle-empty {
  display: block;
  padding: 12px 18px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

.header-toggle-links a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Cocoon側の親要素で隠れないようにする */
#navi,
#navi-in,
.navi-in,
.navi-in > ul,
.navi-in > ul > li {
  overflow: visible;
}