@charset "UTF-8";
/* ============================================================
   ページ内の目次（アンカーナビ）の見た目。組み方は template-parts/service/subnav.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- アンカーナビ（デザインシステム6-8） ---- */
.svc-subnav {
  /* 追従（sticky）はやめた。本番に無い挙動で、浮いたヘッダーと重なるため（2026-09-11） */
  position: static;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-gray-light);
  overflow: visible; /* スクロールは内側の箱で行う。下線までぼけないように（2026-09-17） */
  position: sticky;
  top: 100px;
  z-index: 20;
  transition: top 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.svc-subnav__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none; /* 目次はぼかしで「続き」を示すので、スクロールバーは出さない（PC のブラウザで太い線が出るのを防ぐ） */
  display: flex;
  gap: var(--space-8);
  height: 56px;
  align-items: center;
  white-space: nowrap;
}

.svc-subnav__link {
  flex: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.svc-subnav__link:hover {
  background: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす（現在地の表示は is-active に残す） */
  color: var(--color-white);
}

/* ---- 目次（スマホ）：右端をぼかして「続きがある」と見せる ----
   スクロールできることが分かりにくいと本人指摘（2026-09-17）。案1「右端のぼかし」を採用（案2 スクロールバー常時表示・案3 2段折り返しは捨てた：線が増える／Figma の1行から離れる）。
   ぼかしは mask で描く（スクロールする箱自体に掛けるので、動いても端に留まる）。左端にも出すかは JS が data-fade で切り替える */
.svc-subnav__inner[data-fade="right"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); 
}

.svc-subnav__inner[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); 
}

.svc-subnav__inner[data-fade="left"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); 
}

.svc-subnav__inner::-webkit-scrollbar {
  display: none; 
}

.svc-subnav.is-header-hidden {
  top: 0; 
}

.svc-subnav__link.is-active {
  background: var(--color-primary); color: var(--color-white); 
}



@media (min-width: 1024px) {

  .svc-subnav__inner {
      padding: 0 40px;
    
  }

  .svc-subnav__inner[data-fade] {
    -webkit-mask-image: none; mask-image: none; 
  }

  .svc-subnav {
    top: 100px; 
  }}



@media (max-width: 1023px) {
  .svc-subnav {
      position: sticky;
      top: 90px; /* JS が動かないときの備え：ヘッダーの下（90px）に並べて出す。JS が動いたら下の .is-auto-hide に切り替わる */
      z-index: 20;
      /* 本番ヘッダーは下スクロールで隠れ（.is-hidden、0.3s）、上スクロールで出る。隠れている間は目次を画面上端に上げ、
         出たらヘッダー分（90px）下がる。JS がヘッダーの class を見て .is-header-hidden を付け替える（2026-09-17 本人指摘：隙間が空くだけで気持ち悪い） */
      transition: top 0.3s cubic-bezier(0.4, 0.4, 0, 1);
    
  }

  /* 2026-09-21 本人決定：スマホではヘッダーと目次を同時に出さない（2つ並ぶと画面の上が約150px埋まり、浮いた帯と白い帯が並んで違和感があった）。ヘッダーが出ている間は目次を画面の外（上）に置き、ヘッダーが隠れたら .is-header-hidden の top:0 で出す。ヘッダーは60px（下端90px）。PCは従来どおり並べて出す */
  .svc-subnav.is-auto-hide:not(.is-header-hidden) {
    top: -100px; 
  }

  .svc-subnav.is-header-hidden {
      top: 0;
    
  }

  .svc-subnav__link.is-active {
      background: var(--color-primary);
      color: var(--color-white);
    
  }}