@charset "utf-8";

/* ベース */
:root{
--bg:#f8f9fb;
--card:#ffffff;
--accent:#3b82f6; /* 明るめのブルー */
--text:#222;
--muted:#6b7280;
--radius:12px;
--gap:10px;
}
    *{box-sizing:border-box}

    .nav-card{
      width:100%;
      max-width:720px;
      margin:0 auto;
      background:var(--card);
      border-radius:var(--radius);
      padding:16px;
      box-shadow:0 6px 18px rgba(20,20,40,0.06);
    }
    .nav-title{
      font-size:18px;
      font-weight:700;
      margin-bottom:8px;
    }
    nav .hint{color:var(--muted); font-size:13px; margin-bottom:12px}

    /* details/summary を使ったアコーディオン */
    .accordion details{
      border-radius:10px;
      background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
      margin-bottom:var(--gap);
      overflow:hidden;
      transition:box-shadow .18s ease;
      border:1px solid rgba(0,0,0,0.04);
    }
    .accordion details[open]{
      box-shadow:0 8px 24px rgba(16,24,40,0.06);
    }

    .accordion summary{
      list-style:none;
      cursor:pointer;
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      user-select:none;
background-color:#eef4ff;
      outline: none;
    }
    /* ブラウザ既定のマーカーを消す（Safari/Chrome対応） */
    .accordion summary::-webkit-details-marker{display:none}

    .summary-left{
      display:flex; align-items:center; gap:12px;
    }
    .summary-icon{
      width:36px; height:36px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent);
      flex:0 0 36px;
    }
    .summary-label{font-weight:600}
    .summary-sub{font-size:13px; color:var(--muted)}

    .icon{
      transition:transform .25s ease;
      transform-origin:center;
      width:18px; height:18px; display:inline-block;
    }
    /* 開いたときに矢印を回転 */
    details[open] .icon{transform:rotate(180deg)}

    /* 中身（スムーズな開閉） */
    .content{
      padding:0 16px; /* 開いていない時は上下paddingを0にして滑らかに */
      max-height:0;
      overflow:hidden;
      transition:max-height .28s ease, padding .28s ease;
    }
    details[open] .content{
      padding:12px 16px 18px;
      max-height:100%; /* 適宜調整 */
    }

    .content ul{padding-left:18px; margin:6px 0}
    .content a{color:var(--accent); text-decoration:none}
    .content a:hover{text-decoration:underline}

    /* キーボードフォーカス時の見た目 */
    summary:focus{box-shadow:0 0 0 4px rgba(37,99,235,0.12); border-radius:8px}

    /* スマホ微調整 */
    @media (max-width:480px){
      body{padding:18px}
      .nav-card{padding:12px}
      .summary-icon{width:32px;height:32px}
    }