/* ===== SAITOWORKS Header (cleaned) ===== */

/* 箇条書き丸の除去（安全網） */
.menu, .menu li{ list-style:none; margin:0; padding:0; }

/* 出し分け：デフォ=モバイル, PCで逆転 */
.swx-navwrap{ display:block; }                  /* <details> を見せる */
.swx-primary-nav--desktop{ display:none; }      /* PC用ナビは隠す */
@media (min-width: 960px){
  .swx-navwrap{ display:none; }                 /* モバイル用を隠す */
  .swx-primary-nav--desktop{ display:flex; }    /* PCで横並び */
}

/* --- Brand背景（#FFD400）。インク色は濃いめ（brand-ink） --- */
.swx-header{
  position: sticky; top: 0; z-index: 60;
  background: var(--brand, #FFD400);
  --hdr-ink: var(--brand-ink, #2b2b2b); /* ヘッダー内の基本文字色 */
  border-bottom: 1px solid color-mix(in oklab, var(--hdr-ink) 18%, transparent);
  backdrop-filter: blur(6px) saturate(130%);

  /* 入場アニメーション */
  animation: swxHeaderIn .45s ease-out both;
}
@keyframes swxHeaderIn{
  from{ opacity:0; transform: translateY(-8px); }
  to  { opacity:1; transform: translateY(0); }
}

.swx-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-block:10px;
}

/* ロゴ＋テキスト */
.site-branding__link{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.site-branding__logo{
  height: clamp(28px, 4vw, 44px); width:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.20)) drop-shadow(0 8px 20px rgba(0,0,0,.12));
}
.site-branding__name{
  font-weight:900; font-size:clamp(16px, 2.4vw, 22px); letter-spacing:.06em;
  text-transform:uppercase; line-height:1; color: var(--hdr-ink);
}

/* モバイル：<details> ナビ（縦並び） */
.swx-navwrap__summary{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem; border:1px solid color-mix(in oklab, var(--hdr-ink) 22%, transparent);
  border-radius:12px; background: color-mix(in oklab, var(--brand) 82%, white 18%);
  color: var(--hdr-ink); cursor:pointer; user-select:none;
}
.swx-navwrap[open] .swx-navwrap__summary{
  background: color-mix(in oklab, var(--brand) 70%, white 30%);
}

/* （統一）トップレベルはPC同等の太さに */
.swx-navwrap .menu{ display:grid; gap:6px; padding:.6rem 0 0; }
.swx-navwrap .menu > li > a{
  display:block; padding:.55rem .7rem; border-radius:10px; border:1px solid transparent;
  color: var(--hdr-ink);
  font-weight:800; letter-spacing:.01em;
}
.swx-navwrap .menu a:hover{
  background: color-mix(in oklab, var(--brand) 78%, white 22%);
  border-color: color-mix(in oklab, var(--hdr-ink) 16%, transparent);
  text-decoration:none;
}

/* ▼ 親（子あり）に三角を付与：タップで回転 */
.swx-navwrap .menu .menu-item-has-children > a{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.swx-navwrap .menu .menu-item-has-children > a::after{
  content:""; width:0; height:0; margin-left:.5rem;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--hdr-ink);
  transform-origin:50% 40%;
  transition: transform .18s ease;
}
.swx-navwrap .menu li.is-open > a::after{ transform: rotate(180deg); }

/* サブメニュー（モバイル）：デフォ非表示 → .is-open で表示 */
.swx-navwrap .sub-menu{
  display:none; position:static;
  margin:.25rem 0 0 .5rem; padding-left:.25rem;
  border:none; background:transparent; box-shadow:none;
}
.swx-navwrap .menu li.is-open > .sub-menu{
  display:block;
  animation: swxDrop .18s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: top;
}
.swx-navwrap .sub-menu a{ font-weight:600; }

/* デスクトップ：横並び＆クリック/ホバー/フォーカスで開閉 */
/* ================================
   PC: ドロップダウン（クリックのみで開閉）
   ================================ */
@media (min-width: 960px){
  .menu.menu--primary{ display:flex; align-items:center; gap:clamp(14px, 2vw, 28px); }
  .menu.menu--primary > li{ position:relative; }

  .menu.menu--primary > li > a{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.6rem .2rem; font-weight:800; color: var(--hdr-ink);
    border-bottom:2px solid transparent;
    cursor: pointer; /* クリック対象を明示 */
  }
  .menu.menu--primary > li > a:hover{
    color:#111; border-bottom-color: color-mix(in oklab, var(--hdr-ink) 30%, transparent);
    text-decoration:none; transform: translateY(-1px);
  }
  .menu.menu--primary > li.current-menu-item > a{
    border-bottom-color: color-mix(in oklab, var(--hdr-ink) 45%, transparent);
  }

  /* ▼ 親メニューの三角 */
  .menu .menu-item-has-children > a::after{
    content:""; width:0; height:0; margin-top:2px;
    border-left: 5px solid transparent;
    border-right:5px solid transparent;
    border-top: 6px solid var(--hdr-ink);
    transform-origin: 50% 40%;
    transition: transform .18s ease;
  }

  /* デフォ：閉じた状態 */
  .menu .sub-menu{
    position:absolute; left:0; top: calc(100% + 8px);
    min-width:200px; padding:8px; border-radius:12px;
    background:#fff; border:1px solid rgba(0,0,0,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.14);

    opacity:0; visibility:hidden; transform: translateY(6px) scale(.98);
    pointer-events:none;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  }

  /* クリックで .is-open が付いた時だけ開く */
  .menu.menu--primary > li.is-open > .sub-menu{
    opacity:1; visibility:visible; transform: translateY(0) scale(1);
    pointer-events:auto;
    transition: transform .18s ease, opacity .18s ease, visibility 0s;
  }

  /* ▲ 三角の回転も .is-open の時だけ */
  .menu.menu--primary > li.is-open > a::after{
    transform: rotate(180deg);
  }

  /* サブメニュー内のリンク */
  .menu .sub-menu a{
    display:block; padding:.55rem .7rem; border-radius:8px; color:#111;
  }
  .menu .sub-menu a:hover{ background: rgba(17,17,17,.06); }
}


/* 微アニメ（操作時の質感） */
.site-branding__logo,
.site-branding__name,
.menu a{
  transition: color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

/* ===== Mobile burger animation ===== */
.swx-navwrap__burger{
  position: relative;
  width: 28px; height: 18px; flex: 0 0 28px;
}
.swx-navwrap__burger i,
.swx-navwrap__burger::before,
.swx-navwrap__burger::after{
  content:""; position:absolute; left:0; right:0;
  height: 2px; border-radius: 2px;
  background: var(--hdr-ink);
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: 50% 50%;
}
/* 3本の初期位置（上・中・下） */
.swx-navwrap__burger::before{ top: 0; }
.swx-navwrap__burger i       { top: 8px; }
.swx-navwrap__burger::after { top: 16px; }

/* open時：×印に変形（上=／, 下=＼, 中央は消える） */
.swx-navwrap[open] .swx-navwrap__burger::before{
  transform: translateY(8px) rotate(45deg);
}
.swx-navwrap[open] .swx-navwrap__burger::after{
  transform: translateY(-8px) rotate(-45deg);
}
.swx-navwrap[open] .swx-navwrap__burger i{
  transform: scaleX(0); opacity: 0;
}

/* メニュー本体の出現アニメ（open時のみ） */
.swx-navwrap[open] .menu{
  animation: swxDrop .18s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: top;
}
@keyframes swxDrop{
  from{ opacity:0; transform: translateY(-6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}

/* まとめてちょい上質に：summaryのホバー/開時の質感 */
.swx-navwrap__summary{
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.swx-navwrap__summary:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.swx-navwrap[open] .swx-navwrap__summary{
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
/* JS有効時のみ：モバイルはアコーディオン表示 */
.swx-has-js .swx-navwrap .sub-menu { display: none; }
.swx-has-js .swx-navwrap .menu li.is-open > .sub-menu {
  display: block;
  animation: swxDrop .18s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: top;
}

/* 矢印も回転（モバイル） */
.swx-has-js .swx-navwrap .menu .menu-item-has-children > a::after{
  content:""; width:0; height:0; margin-left:.5rem;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--hdr-ink);
  transform-origin:50% 40%;
  transition: transform .18s ease;
}
.swx-has-js .swx-navwrap .menu li.is-open > a::after{ transform: rotate(180deg); }