/* uminohoshi components — header, drawer, footer */
  /* ─────────── Header ─────────── */
  .site-header{
    position:sticky; top:0; z-index:90; background:rgba(255,255,255,.92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--c-border-soft);
  }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block: 14px; }
  .brand{ display:flex; align-items:center; gap:12px; color:var(--c-text); text-decoration:none; }
  .brand-mark{
    width:48px; height:48px; border-radius:50%;
    overflow:hidden; flex-shrink:0;
    background:#fff;
  }
  .brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
  .brand-name{ line-height:1.35; }
  .brand-name .sub{ font-size: 15px; letter-spacing:.22em; color:var(--c-blue-600); display:block; }
  /* スマホ（ハンバーガー表示時）は英語サブタイトルを非表示 */
  @media(max-width:1199px){ .brand-name .sub{ display:none; } }
  .brand-name .main{ font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--c-text); display:block; }
  .brand-name .main .sub-line{ display:block; }
  .footer-brand .brand-name .sub{ margin-bottom: 5px; }

  .nav-main{ display:none; align-items:center; gap:2px; }
  @media(min-width:1200px){ .nav-main{ display:flex; } }
  .nav-item{ position:relative; }
  .nav-link{
    display:flex; align-items:center; gap:6px; padding: 12px 12px; border-radius:10px;
    font-size: 15px; font-weight:600; color:var(--c-text); text-decoration:none;
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .nav-link:hover, .nav-item.has-sub:hover > .nav-link{
    background: var(--c-blue-50); color: var(--c-blue-600);
  }
  .nav-link .chev{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); opacity:.55; }
  .sub-menu{
    position:absolute; top: calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(6px);
    min-width: 240px;
    background:#fff; border:1px solid var(--c-border-soft); border-radius:14px;
    box-shadow: var(--shadow-md);
    padding: 10px;
    opacity:0; pointer-events:none; transition: opacity .15s, transform .15s;
  }
  /* 6px の隙間をブリッジして hover が途切れないようにする */
  .sub-menu::before{
    content:""; position:absolute; top:-10px; left:0; right:0; height:10px;
  }
  .nav-item:hover > .sub-menu, .nav-item:focus-within > .sub-menu{
    opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0);
  }
  .sub-menu a{
    display:block; padding: 10px 14px; border-radius: 8px;
    font-size: 15px; color: var(--c-text); text-decoration:none; white-space:nowrap;
  }
  .sub-menu a:hover{ background: var(--c-blue-50); color: var(--c-blue-600); }
  .sub-menu .badge-new{
    display:inline-block; font-size: 15px; font-weight:700; color:#fff;
    background: var(--accent); padding:1px 6px; border-radius:999px;
    vertical-align: middle; margin-left:6px; letter-spacing:.06em;
  }

  .header-actions{ display:flex; align-items:center; gap:10px; }
  .btn-ghost-sm{
    display:none; font-size: 15px; padding: 8px 14px; border-radius: 999px;
    border:1px solid var(--c-border); color:var(--c-text-sub); text-decoration:none;
    white-space: nowrap;
    transition: all .15s;
  }
  @media(min-width:768px){ .btn-ghost-sm{ display:inline-flex; align-items:center; gap:6px; } }
  .btn-ghost-sm:hover{ border-color: var(--c-blue-400); color: var(--c-blue-600); }
  .hamburger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:40px; height:40px; border-radius:8px;
    background: var(--accent); border:none;
    transition: background .2s;
  }
  .hamburger:hover{ background: var(--accent-dark); }
  @media(min-width:1200px){ .hamburger{ display:none; } }
  .hamburger span{
    display:block; width:20px; height:2px; background:#fff; border-radius:2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* メニューオープン時に × へ変形 */
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform: scaleX(0); }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ─────────── Mobile drawer ─────────── */
  .drawer{
    position:fixed; top:var(--header-h, 76px); right:0; bottom:0; left:0;
    background:rgba(44,90,120,.35); z-index:80;
    opacity:0; pointer-events:none; transition: opacity .25s;
  }
  .drawer.open{ opacity:1; pointer-events:auto; }
  .drawer-panel{
    position:absolute; top:0; right:0; bottom:0; width: min(86vw, 360px);
    background:#fff; padding: 24px 20px 40px; overflow-y:auto;
    transform: translateX(100%); transition: transform .3s ease;
  }
  .drawer.open .drawer-panel{ transform: translateX(0); }
  .drawer-panel a{ display:block; padding: 10px 8px; font-size: 15px; color: var(--c-text); text-decoration:none; border-bottom: 1px solid var(--c-border-soft); }
  .drawer-panel a.drawer-section{ font-weight:700; color:var(--c-blue-600); margin-top:6px; letter-spacing:.06em; }
  .drawer-panel a.drawer-section:first-child{ margin-top:0; }
  .drawer-panel a.sub{ padding-left:20px; color:var(--c-text-sub); }
  .drawer-panel a.drawer-protected{ color:var(--c-blue-600); margin-top:8px; }

  /* ─────────── Footer ─────────── */
  .site-footer{
    background: var(--c-blue-800); color: #E6F1F8; padding: 70px 0 30px;
  }
  .footer-grid{
    display:grid; gap: 40px; grid-template-columns: 1fr;
  }
  @media(min-width:900px){ .footer-grid{ grid-template-columns: 1.1fr 2fr; } }
  .footer-brand{ display:flex; flex-direction:column; gap:18px; }
  .footer-brand .brand-name .main{ color:#fff; }
  .footer-brand .brand-name .sub{ color: rgba(255,255,255,.55); }
  .footer-brand p{ font-size: 15px; line-height:1.95; color: rgba(255,255,255,.78); }
  .footer-nav{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  @media(min-width:600px){ .footer-nav{ grid-template-columns: repeat(4, 1fr); } }
  .footer-nav h5{ font-size: 15px; letter-spacing:.16em; color: var(--c-blue-200); margin-bottom: 12px; font-weight:600; }
  .footer-nav a{ display:block; padding: 4px 0; color: rgba(255,255,255,.85); text-decoration:none; font-size: 15px; }
  .footer-nav a:hover{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer-bottom{
    margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
    display:flex; flex-wrap:wrap; justify-content: space-between; gap: 12px;
    font-size: 15px; color: rgba(255,255,255,.55);
  }
  .footer-bottom a{ color: rgba(255,255,255,.7); }

  /* フッター最下段（コピーライト＋プライバシーポリシー）
     ※ 上の .footer-bottom が用意されていたが、マークアップ側は .footer-copy を使っており
        スタイルがどこにも当たっていなかった。実際のクラスに当て直す。（2026-08-03） */
  .footer-copy{
    margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  }
  .footer-copy .container-x{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 10px 20px;
    font-size: 15px; color: rgba(255,255,255,.55);
  }
  .footer-copy a{ color: rgba(255,255,255,.7); text-decoration:none; }
  .footer-copy a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

  /* ─────────── Utility classes（全ページ共通） ─────────── */
  .flex        { display: flex; }
  .inline-flex { display: inline-flex; }
  .items-end      { align-items: flex-end; }
  .items-center   { align-items: center; }
  .justify-between{ justify-content: space-between; }
  .flex-wrap   { flex-wrap: wrap; }
  .text-center { text-align: center; }
  .mx-auto     { margin-left: auto; margin-right: auto; }
  .gap-2 { gap: 8px; }
  .gap-3 { gap: 12px; }
  .gap-4 { gap: 16px; }
  .gap-5 { gap: 20px; }
  .mt-3  { margin-top: 12px; }
  .mt-4  { margin-top: 16px; }
  .mt-5  { margin-top: 20px; }
  .mt-6  { margin-top: 24px; }
  .mt-7  { margin-top: 28px; }
  .mt-8  { margin-top: 32px; }
  .mb-8  { margin-bottom: 32px; }
  .mb-10 { margin-bottom: 40px; }
  .mb-12 { margin-bottom: 48px; }
  .mb-14 { margin-bottom: 56px; }
  .grid { display: grid; }
  @media (max-width: 767px)  { .md\:hidden        { display: none; } }
  @media (min-width: 768px)  { .md\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1024px) { .lg\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0,1fr)); } }