/* =========================================================
   header.css   (名前空間: hc-)
   ─ PC      : ≥ 1025px      … 標準 2 行レイアウト
   ─ Tablet  :  768–1024px   … 3 行レイアウトで余裕を確保
   ─ Mobile  : ≤  767px      … ドロワー＋検索バー
   =======================================================*/

/* ──────────────────────────────────────────────
   1.  色・フォント・影など共通変数
────────────────────────────────────────────── */
:root{
  /* Brand Colors */
  --hc-red:        #d71920;  --hc-red-hover:  #b5151b;
  --hc-teal-a:     #0093af;  --hc-teal-b:     #00617a;

  /* Greys */
  --hc-gray-050:   #ffffff;
  --hc-gray-100:   #fafafa;
  --hc-gray-200:   #f5f5f5;
  --hc-gray-300:   #e0e0e0;
  --hc-gray-400:   #c4c4c4;  /* 区切り線に採用 */

  /* Typography & Misc */
  --hc-text:       #333;
  --hc-font:       "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --hc-shadow:     0 2px 6px rgba(0,0,0,.06);
  --hc-z-header:   2000;
}

/* ──────────────────────────────────────────────
   2.  全体リセット・ユーティリティ
────────────────────────────────────────────── */
html{ scroll-behavior:smooth; }

/* === 1) モバイルをデフォルトにして 80px ================= */
#category{ scroll-margin-top:100px; }

/* === 2) タブレット幅で上書き (= ヘッダー合計 112px) ==== */
@media (min-width:768px) and (max-width:1024px){
  #category{ scroll-margin-top:250px; }   /* ← 実測値に合わせる */
}

/* === 3) PC 幅でさらに上書き (= 132px) ================== */
@media (min-width:1025px){
  #category{ scroll-margin-top:250px; }   /* ← 実測値に合わせる */
}

body{ margin:0; font-family:var(--hc-font); color:var(--hc-text); }
.hc-header *{ box-sizing:border-box; }

.sticky{ position:sticky; top:0; z-index:var(--hc-z-header); }
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ──────────────────────────────────────────────
   3.  デフォルト表示状態
   ─ PC / Tablet 用ヘッダーを表示
   ─ Mobile 用ヘッダーは非表示（後述で切替）
────────────────────────────────────────────── */
#hc-header-mobile,
#hc-menu-overlay,
#hc-mobile-menu,
#hc-mobile-search{ display:none; }



/* =========================================================
   4.  PC  (幅 ≥ 1025px)
   =======================================================*/
@media (min-width:767px){

  /* ---------- Utility Bar ---------- */
  .hc-util-bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:2px 24px; font-size:.75rem; color:#fff;
    background:linear-gradient(90deg,var(--hc-teal-a) 0%,var(--hc-teal-b) 100%);
  }
  .hc-util-bar i{ margin-right:4px; }
  .hc-util-bar strong{ color:#fdd835; }

  /* ---------- Header Shell ---------- */
  .hc-header{
    backdrop-filter:saturate(180%) blur(6px);
    background:rgba(255,255,255,.92);
    box-shadow:var(--hc-shadow);
    border-bottom:1px solid var(--hc-gray-400);
  }

  /* ---------- Top Bar ---------- */
  .hc-top-bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 24px; font-size:.8125rem;
  }
   
  .hc-logo-link{
    color:var(--hc-red);
    font-size:0;
    line-height:0;
    text-decoration:none;
    display:inline-block; 
  }

  .hc-logo-link .hc-logo-mobile{
    height:36px;
    width:auto;
  }

  .hc-user-box{ display:flex; align-items:center; gap:8px; font-weight:600; }
  .hc-user-box i{ font-size:1.1rem; }
  .hc-logout-link{ color:var(--hc-teal-a); font-size:1.1rem; text-decoration:none; }
  .hc-logout-link:hover{ color:var(--hc-teal-b); }

  /* ---------- Main Navigation (2 rows) ---------- */
  .hc-main-nav{
    display:flex; flex-wrap:wrap; row-gap:10px;
    padding:14px 24px; background:var(--hc-gray-200); font-size:.875rem;
  }

  /* Row-1 : Category Button */
  .hc-nav-left{ flex:0 0 auto; display:flex; align-items:center; }

  .hc-btn-primary{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--hc-red); color:#fff; padding:8px 18px;
    border:none; border-radius:4px; font-weight:600; text-decoration:none;
    transition:background .2s;
  }

  /* ▼ここを上書き（3 行追加） */
  .hc-btn-primary:hover,
  .hc-btn-primary:focus,
  .hc-btn-primary:active{
    background:var(--hc-red-hover);   
    color:#fff;                       
    text-decoration:none;             
  }

  /* Row-1 : Select & Search */
  .hc-nav-center{ 
    flex:1 1 0; 
    display:flex; 
    align-items:center; 
    gap:8px; 
    justify-content:center; 
  }

  .hc-select{
    min-width:180px; padding:8px 10px; border:1px solid var(--hc-gray-400); border-radius:4px;margin-left: 10px;
  }
  .hc-search-form{ 
    display:flex; 
    gap:6px; flex:1 1 0; 
    max-width:600px; 
  }
  
  .hc-search-input{
    flex:1; padding:8px 10px; border:1px solid var(--hc-gray-400); border-radius:4px;width: 100% !important; min-width: 300px !important;
  }
  .hc-btn-search{
    background:var(--hc-teal-a); color:#fff; border:none; padding:8px 14px;
    border-radius:4px; cursor:pointer; transition:background .2s;
  }
  .hc-btn-search:hover{ background:var(--hc-teal-b); }

  /* Row-2 : Links */
  .hc-nav-right{
    flex:1 1 100%; display:flex; gap:0; justify-content:flex-start;
    padding-top:12px; border-top:1px solid var(--hc-gray-400);
  }
  .hc-nav-item{
    position:relative; width:140px; padding:12px 0;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:var(--hc-text); text-decoration:none; border-right:1px solid var(--hc-gray-400);
    transition:color .2s;
  }
  .hc-nav-item i{ font-size:1.2rem; transition:color .2s; }
  .hc-nav-item:hover,
  .hc-nav-item:hover i{ color:var(--hc-teal-b); }
  .hc-nav-item:last-child{ border-right:none; }

  /* Badge */
  .hc-badge{
    position:absolute; top:4px; right:18px;
    background:var(--hc-red); color:#fff; padding:0 6px;
    font-size:.6875rem; line-height:18px; border-radius:10px; font-weight:700;
  }
}



/* =========================================================
   6.  Mobile  (幅 ≤ 767px)
   =======================================================*/
@media (max-width:767px){

  /* ----------- 切替表示 ----------- */
  #hc-header-desktop{ display:none; }
  #hc-header-mobile{ display:block; }

  /* Utility Bar */
  .hc-util-bar-mobile{
    display:flex; justify-content:center; align-items:center; gap:4px;
    background:linear-gradient(90deg,var(--hc-teal-a) 0%,var(--hc-teal-b) 100%);
    color:#fff; font-size:.75rem; padding:4px 12px;
  }
  .hc-util-bar-mobile strong{ color:#fdd835; }

  /* Mobile top bar */
  .hc-mobile-bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:rgba(255,255,255,.94); box-shadow:var(--hc-shadow);
  }
  #hc-btn-menu,#hc-btn-search{
    background:none; border:none; font-size:1.8rem; cursor:pointer; color:var(--hc-text);
  }
  .hc-logo-mobile{ height:32px; }

  /* Drawer overlay */
  #hc-menu-overlay{ display:block; }  /* hidden 属性で制御 */
  #hc-menu-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0;
    transition:opacity .25s; z-index:calc(var(--hc-z-header) - 1);
  }
  #hc-menu-overlay.show{ opacity:1; }

  /* Drawer */
  #hc-mobile-menu{ display:flex; }    /* hidden 属性で制御 */
  #hc-mobile-menu{
    position:fixed; top:0; left:-320px; width:280px; height:100vh;
    background:var(--hc-gray-100); border-right:1px solid var(--hc-gray-400);
    transition:left .25s; z-index:var(--hc-z-header); flex-direction:column;
  }
  #hc-mobile-menu.open{ left:0; }

  .hc-menu-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px; background:var(--hc-gray-200); font-weight:700;
  }

  .hc-menu-list{ list-style:none; margin:0; padding:0; flex:1; overflow-y:auto; }
  .hc-menu-list li a{
    display:flex; align-items:center; gap:10px;
    padding:14px 20px; border-bottom:1px solid var(--hc-gray-300);
    text-decoration:none; color:var(--hc-text); font-size:.9375rem;
    transition:background .15s;
  }
  .hc-menu-list li a:hover{ background:var(--hc-gray-200); }
  .hc-menu-list .hc-badge{ margin-left:auto; }

  /* Mobile search */
  #hc-mobile-search{ display:block; } /* hidden 属性で制御 */
  #hc-mobile-search{
    display:none; padding:10px; background:var(--hc-gray-200);
    border-bottom:1px solid var(--hc-gray-300); gap:8px;
  }
  #hc-mobile-search.show{ display:flex; }
  .hc-search-form-mobile{ display:flex; gap:8px; width:100%; }
  #hc-mobile-search-input{
    flex:1; padding:8px 10px; border:1px solid var(--hc-gray-400); border-radius:4px;
  }
  .hc-btn-search{
    background:var(--hc-teal-a); color:#fff; border:none; padding:8px 14px; border-radius:4px;
  }
  .hc-btn-search:hover{ background:var(--hc-teal-b); }
}


/* -----------------------------------------
   Mobile Drawer 用 “×” ボタンをスタイリッシュに
----------------------------------------- */
.hc-btn-close{
  width:38px; height:38px;
  display:inline-flex; justify-content:center; align-items:center;
  background:linear-gradient(135deg,var(--hc-teal-a) 0%,var(--hc-teal-b) 100%);
  border:none; border-radius:50%;
  color:#fff; font-size:1.25rem;          /* アイコンサイズ */
  cursor:pointer; transition:transform .25s,box-shadow .25s,background .25s;
}

.hc-btn-close:active{
  transform:rotate(90deg) scale(.95);
}