@charset "UTF-8";
/* ============================================================
   assets/css/nav.final.css（置き換え版）
   要件：
   - PC表示（1101px以上）：h1 は左、メニューは右端で右ぞろえ（折返し禁止）
   - モバイル表示（〜1100px）：既存の見え方・位置・挙動をそのまま維持
   - ☰／× の開閉は既存JSで制御（ファイル変更不要）
   ============================================================ */

:root{
  /* ドロップダウン見た目（従来のまま） */
  --nav-dd-max-w: min(220px, 84vw);
  --nav-dd-gap: 4px;
  --nav-dd-pad-x: 8px;
  --nav-dd-pad-y: 6px;
  --nav-dd-radius: 8px;
  --nav-dd-shadow: 0 4px 10px rgba(0,0,0,.15);
  --nav-dd-offset-y: 6px;

  --nav-link-font: 0.88rem;
  --nav-link-radius: 6px;
}

/* 共通ヘッダー */
header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(51,51,51,.80);
  color:#fff;
  display:flex; align-items:center; gap:1rem;
  padding:.8rem 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}

h1.logo{ margin:0; font-size: 1em; font-weight:700; line-height:1.30; }
h1.logo a{ color:#fff; text-decoration:none; }


/* =========================
   PC（1101px〜）：h1 左／リンク右端・右ぞろえ／折返し禁止
   ========================= */
@media (min-width:1101px){
  .menu-toggle{ display:none !important; }

  /* h1 を左に固定（右側はナビが占有） */
  h1.logo{ margin-inline-end:auto; }

  .nav-links{
    /* そのまま横並び（従来のPC表示ベース） */
    display:flex !important; position:static !important; background:transparent !important;
    list-style:none !important; margin:0; padding:0; gap:.7rem; align-items:center;

    /* 右端に寄せ、右ぞろえ、折返し禁止 */
    margin-inline-start:auto;
    justify-content:flex-end;
    flex-wrap:nowrap;
    white-space:nowrap;
    text-align:right;
  }

  .nav-links a{
    color:#fff; text-decoration:none;
    padding:.3rem .6rem; border-radius:var(--nav-link-radius);
    transition:background .18s ease;
    text-align:right; /* アンカー内テキストも右揃え */
  }
  .nav-links a:hover,
  .nav-links a:focus{
    background:rgba(255,255,255,.18);
    outline:none;
  }
}

/* =========================
   モバイル（〜1100px）：既存の表示・挙動をそのまま維持
   ========================= */
@media (max-width:1100px){
  .menu-toggle{
    display:block !important;
    position:absolute; right:1rem; top:.6rem;
    font-size:1.5rem; width:38px; height:38px; line-height:1;
    color:#fff; background:none; border:none; cursor:pointer; z-index:1001; border-radius:8px;
  }
  .menu-toggle:focus-visible{
    outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.4);
  }

  .nav-links{
    position:absolute !important;
    top: calc(100% + var(--nav-dd-offset-y));
    right: 16px; left: auto;
    width: var(--nav-dd-max-w);
    display:none !important;

    /* 右上のドロップダウン（全画面は覆わない・従来どおり） */
    background: rgba(0,0,0,.65);
    padding: var(--nav-dd-pad-y) var(--nav-dd-pad-x);
    flex-direction: column; gap: var(--nav-dd-gap);
    border-radius: var(--nav-dd-radius);
    box-shadow: var(--nav-dd-shadow);
    z-index:1002;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    list-style: none !important; margin: 0; padding: 0;
  }
  .nav-links.active{
    display:flex !important;
    animation: navDrop .14s ease both;
  }
  @keyframes navDrop{
    from{opacity:0; transform:translateY(-3px) scale(.985);}
    to  {opacity:1; transform:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .nav-links.active{ animation:none; }
  }

  /* 従来どおり三角形は使わない */
  .nav-links.active::before{
    display: none; content: none;
  }

  .nav-links a{
    display:block; color:#fff !important; text-decoration:none !important;
    font-size: var(--nav-link-font); line-height:1.3;
    padding:.5rem 1rem; border-radius: var(--nav-link-radius);
    min-height:32px; transition: background .12s ease;
    /* モバイルのテキスト配置は従来どおり（変更なし） */
  }
  .nav-links a:hover,
  .nav-links a:focus{
    background:rgba(255,255,255,.08); outline:none;
  }

  /* 従来どおり：開閉中もページ全体のスクロールは許可 */
  body.menu-open{ overflow:auto !important; }

  /* 固定ヘッダーの被りを避ける余白 */
  [id], section, main > *{ scroll-margin-top: 64px; }
}

/* 開いている間だけヘッダーの影を強く（従来どおり） */
header:has(.nav-links.active){
  box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.24);
}