/* =========================================================
   COOMIL 業種一覧 改修提案デモ｜3案共通スタイル
   - 実サイト本物トンマナ（Zen Kaku Gothic New / 黄#FFDA1D 1点 / 白カード浮かせ）
   - 装飾は抑えめ。アニメは軽量CSS transitionのみ。
   ========================================================= */

/* ---- テーマ変数 ---- */
:root {
  --c-bg: #F4F4F2;          /* 薄いライトグレー背景 */
  --c-card: #FFFFFF;        /* 白カード */
  --c-yellow: #FFDA1D;      /* ブランド黄（アクセント1点に限定） */
  --c-on-yellow: #294048;   /* 黄の上の文字（黒でなく濃いスレート） */
  --c-heading: #1A1A2E;     /* 見出し濃紺 */
  --c-text: #294048;        /* 本文・チップ文字 スレート */
  --c-slate: #364B53;       /* セカンダリ/状態色（白文字を載せる） */
  --c-sub: #8D9298;         /* サブ文字・控えめ */
  --c-line: #D6D6E0;        /* 薄ボーダー */
  --c-chip-bg: #FAFAFD;     /* 業種チップ背景／件数バッジ背景 */

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(26,26,46,.04), 0 8px 24px rgba(26,26,46,.06);
  --shadow-hover: 0 2px 4px rgba(26,26,46,.06), 0 14px 34px rgba(26,26,46,.10);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================
   【C-1】カテゴリ色のCSS変数システム（JS不要）
   :root に9色を定義し、[data-group] が --cat を引き継ぎ、各部品が var(--cat) を参照。
   本文・チップ通常時・カード背景・ヘッダー本体には色を塗らない（情報過多防止）。
   ========================================================= */
:root {
  --cat-medical:#459FD8;
  --cat-beauty:#FF8264;
  --cat-food:#FFB427;
  --cat-realestate:#50CBC2;
  --cat-professional:#3D5A80;
  --cat-education:#6DCC62;
  --cat-retail:#FF6FA5;
  --cat-btob:#007AFF;
  --cat-leisure:#8E7CC3;
  --c-amber:#FFB427;        /* 黄を主役に：ブランド黄→アンバーの相棒色 */

  /* 【改修2-0】遊び心ドットの色（新色は作らず＝既存9色＋黄の別名） */
  --dot-1:#FFB427;  /* food/amber */
  --dot-2:#FF8264;  /* beauty */
  --dot-3:#6DCC62;  /* education */
  --dot-4:#50CBC2;  /* realestate */
  --dot-5:#8E7CC3;  /* leisure */
  --dot-6:#FFDA1D;  /* brand yellow */
}
[data-group="medical"]      { --cat: var(--cat-medical); }
[data-group="beauty"]       { --cat: var(--cat-beauty); }
[data-group="food"]         { --cat: var(--cat-food); }
[data-group="realestate"]   { --cat: var(--cat-realestate); }
[data-group="professional"] { --cat: var(--cat-professional); }
[data-group="education"]    { --cat: var(--cat-education); }
[data-group="retail"]       { --cat: var(--cat-retail); }
[data-group="btob"]         { --cat: var(--cat-btob); }
[data-group="leisure"]      { --cat: var(--cat-leisure); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.7;
  color: var(--c-text);
  background-color: var(--c-bg);   /* webp読み込み失敗時のフォールバック */
  -webkit-font-smoothing: antialiased;
}

/* 背景＝実サイトと同一のノイズ質感（bg_noise.webp を固定全面敷き）
   実サイト coomil.co.jp/industry の body::before を忠実に再現
   （position:fixed / inset:0 / repeat / 等倍タイル / 最背面） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  background-image: url("assets/bg_noise.webp");
  background-repeat: repeat;
  background-position: 0 0;
  pointer-events: none;
}

a { color: inherit; }

/* フォーカスリングは常に可視に */
:focus-visible {
  outline: 3px solid var(--c-slate);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- レイアウト土台 ---- */
.l-wrap { width: min(1180px, 92vw); margin-inline: auto; }

/* =========================================================
   共通ヘッダー
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244,244,242,.85);
  backdrop-filter: saturate(120%) blur(8px);
  border-block-end: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.logo-ph {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 16px;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-card);
  color: var(--c-sub);
  font-size: .8rem;
  white-space: nowrap;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 22px;
  border: none;
  border-radius: var(--radius-pill);
  /* 【C-2】黄を主役に：ブランド黄→アンバーのグラデ。文字は黄の上で必ず濃いスレート。 */
  background: linear-gradient(135deg, #FFDA1D 0%, #FFB427 100%);
  color: var(--c-on-yellow);   /* 黄の上は濃いスレート #294048 */
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,180,39,.45); }

/* ---- ページ見出しブロック ---- */
.page-head {
  position: relative;                          /* 折り紙トライアングルの基準 */
  isolation: isolate;                          /* 三角の z-index を見出し内に閉じる */
  padding-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 36px);
}
/* 【C-2】折り紙風トライアングル：右肩に角ばった黄→アンバー三角。
   背景グレインより上・文字より下（z-index:0）。pointer-events:none で操作を邪魔しない。 */
.page-head::after {
  content: "";
  position: absolute;
  inset-block-start: clamp(10px, 2vw, 22px);
  inset-inline-end: clamp(0px, 1vw, 12px);
  width: clamp(80px, 9vw, 120px);
  aspect-ratio: 1;
  clip-path: polygon(100% 0, 100% 100%, 0 0);  /* 角ばった直角三角形（折り紙風） */
  background: linear-gradient(135deg, #FFDA1D, #FFB427);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
/* 見出し文字・検索・件数は必ず三角の前面に（装飾レイヤーは除外＝背面のまま） */
.page-head > *:not(.deco-dots):not(.deco-orbit) { position: relative; z-index: 1; }
/* スマホでは小さく＝被り回避。極小幅では非表示。 */
@media (max-width: 560px) {
  .page-head::after { width: 64px; inset-block-start: 8px; inset-inline-end: 0; opacity: .85; }
}
@media (max-width: 380px) {
  .page-head::after { display: none; }
}

/* =========================================================
   【改修2】トップページ由来の“遊び心”モチーフ（装飾レイヤー）
   - 全装飾は pointer-events:none ＋ aria-hidden ＋ 文字より背面(z-index:-1)
   - 背景グレイン(z-index:-10)より前面、見出しテキスト(z-index:1)より背面
   - .page-head は isolation:isolate 済み＝-1 は page-head 内部に閉じる
   - prefers-reduced-motion で動き停止／極小幅(≤380px)で display:none
   ========================================================= */

/* 2-A：見出し背後の“ふわっと黄グロー”（全4ページ共通・左奥） */
.page-head { overflow: hidden; }   /* グローの画面外への大きなはみ出しを抑える（三角は内側なので切れない） */
.page-head::before {
  content: "";
  position: absolute;
  inset-block-start: -40px;
  inset-inline-start: -60px;
  width: min(520px, 60vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,218,29,.18) 0%, rgba(255,180,39,.10) 38%, rgba(255,218,29,0) 70%);
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}

/* 2-B：カラフル6色ドットを“数個だけ”見出しテキストの外周に散らす
   1要素を box-shadow で複数の丸として描画（テキスト行の上には置かない） */
.deco-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
/* 親(page-head)の左上付近を起点に、box-shadow で粒を配る。
   基点の丸自体は透明にし、影だけを見せる。 */
.deco-dots::before {
  content: "";
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  /* 案A/B/C：2〜3粒（左余白・上の隙間に限定） */
  box-shadow:
    0 0 0 0 var(--dot-1),
    34px 64px 0 -1px var(--dot-4),
    8px 150px 0 -2px var(--dot-3);
  opacity: .8;
}
/* 入口index：5〜6粒（トップの6サービス連想で賑やかに） */
.deco-dots--entry::before {
  inset-block-start: 8px;
  inset-inline-start: 6px;
  box-shadow:
    0 0 0 0 var(--dot-1),
    52px 30px 0 -1px var(--dot-2),
    18px 92px 0 -2px var(--dot-3),
    78px 120px 0 0 var(--dot-4),
    40px 168px 0 -1px var(--dot-5),
    -2px 210px 0 -2px var(--dot-6);
  opacity: .85;
}

/* 2-C：オービット（円環＋円弧テキスト or 薄い円1本）
   入口ヒーロー＝SVGリング＋円弧テキスト＋超低速回転
   各案 page-head＝薄い静止円1本だけ（右肩） */
.deco-orbit {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
/* 入口ヒーロー用：右上奥に大きめ、超低速回転 */
.deco-orbit--hero {
  inset-block-start: -30px;
  inset-inline-end: -40px;
  width: clamp(150px, 22vw, 240px);
  aspect-ratio: 1;
  opacity: .5;
}
.deco-orbit--hero .deco-orbit__spin {
  transform-origin: 50% 50%;
  animation: deco-orbit-rot 60s linear infinite;
}
@keyframes deco-orbit-rot { to { transform: rotate(360deg); } }
/* 各案 page-head 用：右肩の薄い静止円1本 */
.deco-orbit--ring {
  inset-block-start: clamp(50px, 8vw, 90px);
  inset-inline-end: clamp(70px, 10vw, 120px);
  width: clamp(80px, 11vw, 120px);
  aspect-ratio: 1;
  border: 1.5px solid rgba(255,180,39,.35);
  border-radius: 50%;
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .deco-orbit--hero .deco-orbit__spin { animation: none; }
}
/* 極小幅では装飾を一切出さない（操作・可読性最優先） */
@media (max-width: 380px) {
  .page-head::before,
  .deco-dots,
  .deco-orbit { display: none; }
}

.page-head__label {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--c-amber);       /* 【C-2】INDUSTRY等のラベルをアンバーに */
  margin-block-end: 10px;
}
.page-head__title {
  margin: 0 0 4px;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  color: var(--c-heading);
  line-height: 1.25;
}
.page-head__count {
  margin-block-start: 14px;
  font-size: .9rem;
  color: var(--c-sub);
}
.page-head__count strong { color: var(--c-text); font-weight: 700; }

/* ---- 検索ボックス ---- */
.search {
  position: relative;
  margin-block-start: 22px;
  max-width: 560px;
}
.search__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-sub);
}
.search__input {
  width: 100%;
  min-height: 52px;
  padding-block: 12px;
  padding-inline: 50px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-card);
  color: var(--c-heading);
  font-family: inherit;
  font-size: 1rem;
  box-shadow: var(--shadow-card);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search__input::placeholder { color: var(--c-sub); }
.search__input:focus-visible {
  outline: none;
  border-color: var(--c-amber);                /* 【C-2】フォーカスをアンバーに */
  box-shadow: 0 0 0 3px rgba(255,180,39,.28);
}

/* 検索ヒット時の強調（黄背景ハイライトは使わない＝太字濃紺のみ） */
mark.hit {
  background: transparent;
  color: var(--c-heading);
  font-weight: 700;
}

/* 0件メッセージ */
.no-result {
  display: none;
  margin-block-start: 24px;
  padding: clamp(20px, 4vw, 32px);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.no-result.is-show { display: block; }
.no-result p { margin: 0 0 16px; color: var(--c-text); }
.no-result .btn-cta { text-decoration: none; }

/* =========================================================
   共通部品：アイコン（スレート単色の線アイコン）
   ========================================================= */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ---- 件数バッジ（グレー控えめ・黄にしない） ---- */
.badge {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding-inline: 10px;
  padding-block: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-chip-bg);
  color: var(--c-sub);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge .badge__unit { font-size: .68rem; font-weight: 400; }

/* ---- グループ見出しの黄アクセントバー＋下線 ---- */
.grp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  font-weight: 700;
  color: var(--c-heading);
}
.grp-title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  /* 【C-3】グループ見出しの縦バーをカテゴリ色に（--cat 未定義の文脈では黄にフォールバック） */
  background: var(--cat, var(--c-yellow));
  flex: none;
}

/* ---- 業種チップ（pill / 行頭「・」） ---- */
.industries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.industries li { margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: 14px;
  /* 業種チップの縁取りを“そのカテゴリ色”のソフトな色に（白と混ぜたパステル調）。
     開いているのは常に1カテゴリ＝全チップが同色で揃い、味気なさを解消。
     --cat 未設定の文脈では従来の薄グレーにフォールバック。 */
  border: 1px solid color-mix(in srgb, var(--cat, var(--c-line)) 50%, #fff);
  border-radius: var(--radius-pill);
  background: var(--c-chip-bg);
  color: var(--c-heading);
  font-size: .88rem;
  text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.chip::before { content: "・"; color: var(--c-sub); margin-inline-end: 1px; }
/* 【C-3】通常時はカラーレス維持。hover時のみカテゴリ色を“顔だけ”効かせる。 */
.chip:hover {
  border-color: var(--cat, var(--c-slate));
  background: color-mix(in srgb, var(--cat, #fff) 8%, #fff);
  color: color-mix(in srgb, var(--cat, var(--c-heading)) 70%, #1A1A2E);
}
.chip:hover::before { color: var(--cat, var(--c-sub)); }
/* 検索で非該当の業種は非表示（DOMからは消さない＝SEO常在） */
.chip[hidden] { display: none; }
.industries li[hidden] { display: none; }
/* Enterジャンプ：先頭ヒット業種をカテゴリ色で一瞬ハイライト＋リング */
.chip--jump {
  background: color-mix(in srgb, var(--cat, var(--c-yellow)) 18%, #fff);
  border-color: var(--cat, var(--c-slate));
  color: color-mix(in srgb, var(--cat, var(--c-heading)) 70%, #1A1A2E);
  animation: chipJump 1.6s var(--ease);
}
@keyframes chipJump {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  18%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat, var(--c-yellow)) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .chip--jump { animation: none; } }

/* =========================================================
   アコーディオン共通：開閉トランジション
   - [data-panel] を grid-template-rows で軽量アニメ
   ========================================================= */
[data-panel] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
[data-panel] > [data-panel-inner] {
  overflow: hidden;
  min-height: 0;
}
[data-card].is-open > [data-panel],
[data-tab-target].is-open > [data-panel] {
  grid-template-rows: 1fr;
}
/* 【改修3】案A/案C：開いた業種パネルは行下フルワイドのドロワー内に移動して展開 */
.row-drawer.is-open > .row-drawer__inner > [data-panel] {
  grid-template-rows: 1fr;
}

/* シェブロン（開閉インジケータ） */
.chev {
  width: 18px; height: 18px;
  flex: none;
  transition: transform .28s var(--ease);
  color: var(--c-sub);
}
[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* =========================================================
   上部：提案ナビバー（各案ページ最上部・sticky）
   - 「提案を見るための操作チョコ」。提案本体（白基調）と明確に区別
   - 濃いスレートの細い帯＋白文字。アクティブタブのみ黄。
   ========================================================= */
.proposal-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-heading);            /* 濃紺#1A1A2E の細い帯 */
  color: #fff;
  border-block-end: 1px solid rgba(255,255,255,.08);
}
.proposal-nav__inner {
  width: min(1180px, 92vw);
  margin-inline: auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
}
/* 左：最初のページへ戻る */
.proposal-nav__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s var(--ease);
}
.proposal-nav__back:hover { background: rgba(255,255,255,.12); }
.proposal-nav__back:focus-visible { outline-color: var(--c-yellow); }

/* 右：切替タブ（横スクロール可） */
.proposal-nav__tabs {
  margin-inline-start: auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 2px;
}
.proposal-nav__tabs::-webkit-scrollbar { display: none; }
.proposal-nav__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,.82);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.proposal-nav__tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.proposal-nav__tab:focus-visible { outline-color: var(--c-yellow); }
.proposal-nav__tab[aria-current="page"] {
  background: var(--c-yellow);              /* アクティブだけ黄 */
  color: var(--c-on-yellow);                /* 文字#294048 */
  font-weight: 700;
}

/* スマホ：戻るを短く・タブを小さく。横スクロールで全タブ到達可 */
@media (max-width: 600px) {
  .proposal-nav__inner { gap: 8px; padding-inline: 0; }
  .proposal-nav__back { padding: 7px 10px; font-size: .76rem; }
  .proposal-nav__back .proposal-nav__back-full { display: none; }
  .proposal-nav__tab { padding: 6px 11px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .proposal-nav__back, .proposal-nav__tab { transition: none; }
}

footer.site-footer {
  padding-block: 24px 40px;
  color: var(--c-sub);
  font-size: .78rem;
}

/* =========================================================
   案A グリッド（grid.html）
   ========================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-block-start: clamp(8px, 2vw, 20px);
  /* 【改修3+追加】行内でカード高さを揃える（stretch）。タイトルが2行になるカードが
     出ると、同じ行の他カードも同じ高さに伸びて下端が揃う＝ラギッドにならない。
     業種は行下フルワイドのドロワー(grid-column:1/-1)に出るので、カードは伸縮OK。 */
  align-items: stretch;
}
.gcard {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
  overflow: hidden;
  /* 【追加】縦flex化＝head が全高を占め、stretch されても中身が間延びしない。 */
  display: flex;
  flex-direction: column;
}
.gcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.gcard.is-open {
  /* 【改修3】カード自体はその場展開しない（業種は行下ドロワーへ）。
     開いているカードは選択中の強調だけ＝top は1pxも動かない。 */
  transform: none;
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--cat, var(--c-slate)) 55%, var(--c-line));
}
.gcard__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;                 /* 【追加】stretch されたカード全高を満たす */
  padding: clamp(18px, 2vw, 24px);
  border: none;
  background: transparent;
  text-align: start;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}
.gcard__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  /* 【C-3】アイコン台座を“顔だけ”カテゴリ色に。薄塗り背景＋濃色アイコンで可読維持。 */
  background: color-mix(in srgb, var(--cat, var(--c-slate)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--cat, var(--c-line)) 35%, #fff);
  color: color-mix(in srgb, var(--cat, var(--c-slate)) 75%, #1A1A2E);
  font-size: 22px;
}
.gcard__meta { min-width: 0; }
.gcard__name {
  display: flex; align-items: center; align-content: center; gap: 6px 8px; flex-wrap: wrap;
  font-weight: 700; color: var(--c-heading);
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.4;
  min-height: 2.8em;   /* タイトル2行ぶんを常時確保（1行でも高さを取り、改行カードと揃う） */
}
.gcard__tag {
  margin: 4px 0 0; font-size: .85rem; color: var(--c-sub); line-height: 1.5;
  min-height: 3em;     /* 説明2行ぶんを常時確保＝全カード同じ高さに統一 */
}
.gcard__head .chev { align-self: center; }
.gcard__inner-pad { padding: 0 clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 26px); }
.gcard__inner-pad .grp-title { margin-block: 4px 14px; }

/* =========================================================
   【改修3】行下フルワイドの共用ドロワー（案A/案C 共通）
   - グリッドの子として grid-column:1/-1 ＝開いたカードの行の真下に全幅で出る
   - 中の業種チップ(.industries flex-wrap)が横いっぱいに多列で折り返る＝縦が短い
   - grid-auto-rows などの行揃えの影響を受けないよう、ドロワー行は内容高さ（auto）
   ========================================================= */
.row-drawer {
  grid-column: 1 / -1;          /* 行下フルワイド */
  display: grid;
  grid-template-rows: 0fr;      /* 高さ0 → アニメで展開（ドロワー自体の出入り） */
  align-self: start;            /* stretch の影響を受けず内容高さに */
  transition: grid-template-rows .32s var(--ease), margin-block .26s var(--ease);
  margin-block: 0;
}
.row-drawer.is-open {
  grid-template-rows: 1fr;
  margin-block: clamp(2px, .6vw, 8px) clamp(6px, 1vw, 12px);
}
.row-drawer__inner {
  overflow: hidden;
  min-height: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* 閉じている間は枠線も出さない（高さ0で内容も見えない） */
.row-drawer:not(.is-open) > .row-drawer__inner { border-color: transparent; box-shadow: none; }
/* ドロワー内の業種パネル本体（案A/案C 共通の余白） */
.row-drawer__inner .gcard__inner-pad,
.row-drawer__inner .tile__inner-pad {
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 28px);
}
.row-drawer__inner .grp-title { margin-block: 0 14px; }
/* 全幅なのでチップは横いっぱいに多列で折り返る（縦が短くなる本体狙い） */
.row-drawer__inner .industries { gap: 8px 10px; }

@media (prefers-reduced-motion: reduce) {
  .row-drawer { transition: none; }
}

/* =========================================================
   案B インデックス（index.html）2ペイン
   ========================================================= */
.index2 {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  margin-block-start: clamp(8px, 2vw, 20px);
}

/* 左：索引ナビ。自身の枠内でoverflowスクロールが完結＝ページを伸ばさない */
.idx-nav {
  position: sticky;
  top: 88px;                                   /* ヘッダー下に追従 */
  max-height: calc(100vh - 110px);             /* 画面内に収める */
  overflow-y: auto;                            /* 枠内スクロール */
  overscroll-behavior: contain;                /* 親への伝播を止める */
  padding: 8px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
}
.idx-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.idx-nav__btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: .92rem;
  text-align: start;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.idx-nav__btn:hover { background: var(--c-chip-bg); }
.idx-nav__btn .badge { transition: none; }
.idx-nav__btn[aria-selected="true"] {
  /* 【C-3】選択は紺を混ぜて沈めたカテゴリ色塗り＋白文字。font-weight は不変（横ずれ防止）。 */
  background: color-mix(in srgb, var(--cat, var(--c-slate)) 88%, #1A1A2E);
  color: #fff;
  /* font-weight は変えない＝文字実寸が変わらず横ずれ（カーソルずれ）を防ぐ */
}
.idx-nav__btn[aria-selected="true"] .ico { color: #fff; }
/* 非選択アイコンを濃いめカテゴリ色に＝索引に9色が縦に並ぶ演出 */
.idx-nav__btn[aria-selected="false"] .idx-nav__ico {
  color: color-mix(in srgb, var(--cat, var(--c-slate)) 78%, #1A1A2E);
}
.idx-nav__btn[aria-selected="true"] .badge {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.idx-nav__ico { display: grid; place-items: center; width: 24px; font-size: 18px; color: var(--c-slate); }

/* 右：選択グループの業種一覧
   【B】固定 height をやめ、グリッド重ね置きで「中身に必要な高さ」に自動フィット。
   全 .idx-section を同一セル（grid-area:1/1）に重ね、非アクティブも
   visibility:hidden（display:none ではない）でグリッドセルの寸法に寄与させる。
   → ペイン高さ＝最も背の高いグループの高さで一定。切替で枠もページも 1px も動かない。 */
.idx-pane {
  display: grid;                               /* 全セクションを同一セルに重ねる土台 */
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;                            /* 角丸からの食み出し防止（高さは内容フィット） */
}
.idx-pane__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 6px; }
.idx-pane__tag { margin: 0 0 18px; color: var(--c-sub); font-size: .9rem; }
/* 案Bでは全グループのパネルを常時DOM出力し、選択分のみ表示（SEO常在）。
   display:none は使わず opacity/visibility で制御＝reflow を起こさない。
   全 .idx-section を grid-area:1/1 で重ね、非アクティブも寸法に残す。 */
.idx-section {
  grid-area: 1 / 1;                            /* 全セクションを同一セルへ重ねる */
  padding: clamp(20px, 2.4vw, 30px);
  opacity: 0;
  visibility: hidden;                          /* 寸法には残る＝最大グループ基準で高さ一定 */
  transform: translateY(6px);                  /* 入場の軽い持ち上がり */
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.idx-section.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .idx-section { transition: none; transform: none; }
}

/* スマホ用の横スクロールタブ（PCでは非表示） */
.idx-tabs { display: none; }

/* =========================================================
   案C タイル（tile.html）
   ========================================================= */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-block-start: clamp(8px, 2vw, 20px);
  /* 【改修3】業種は行下ドロワーへ出るのでタイルは伸びない＝上端固定。
     バナー画像があるタイルは行頭揃え(start)が自然。 */
  align-items: start;
}
.tile {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
/* 【改修3】タイル自体はその場展開しない（業種は行下ドロワーへ）。
   開いているタイルは選択中の強調だけ＝上端は1pxも動かない。 */
.tile.is-open { transform: none; box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--cat, var(--c-slate)) 55%, var(--c-line)); }
.tile__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: start;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
/* 業種イメージ：トンマナ準拠の作り込みビジュアル
   ネイビー→スレートの奥行きグラデ＋実ノイズ質感(bg_noise.webp)＋光のあしらい＋アイコン主役
   ※実画像は使わず、実績サムネを差し込めば本番品質になる設計 */
.tile__media {
  position: relative;
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(255,255,255,.96);
  /* 【C-3】カテゴリ色→紺へ沈むディープグラデ。白アイコン/文字の視認を最優先。
     --mix は最初の混合比（既定78%）。明色3カテゴリのみ下で62%へ個別調整。 */
  --mix: 78%;
  background-color: #1A1A2E;
  background-image:
    radial-gradient(120% 150% at 80% 12%, rgba(255,255,255,.16) 0, transparent 46%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--cat, var(--c-slate)) var(--mix), #1A1A2E) 0%,
      color-mix(in srgb, var(--cat, var(--c-slate)) 38%, #1A1A2E) 45%,
      #1A1A2E 100%),
    url("assets/bg_noise.webp");
  background-size: auto, auto, 150px;
  background-blend-mode: screen, normal, soft-light;
}
/* 明るい3色（飲食/教育/小売）は78%混だと白が負けるため初手混合比を62%に下げる */
[data-group="food"]    .tile__media,
[data-group="education"] .tile__media,
[data-group="retail"]  .tile__media { --mix: 62%; }
/* 右下に沈む大きな円弧の光（奥行き演出） */
.tile__media::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  inset-block-end: -34%;
  inset-inline-end: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0, transparent 68%);
  pointer-events: none;
}
/* アイコンを主役化（薄い円の台座＋ドロップシャドウ） */
.tile__media .ico {
  position: relative;
  font-size: 30px;
  stroke-width: 1.5;
  width: 1em; height: 1em;
  padding: 18px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.28));
}
/* 差し替え想定の控えめキャプション */
.tile__media::after {
  content: "御社の制作実績サムネを流用想定";
  position: absolute;
  inset-block-end: 9px; inset-inline-end: 11px;
  font-size: .62rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}
/* 【A】カード内テキストをのびのびと：上パディングを増やしバナーとタイトルに余裕、
   タイトルと説明の間隔も拡張。やり過ぎずに確実に余白を感じる量。 */
/* tile__body は <button> 内の span（既定 inline）。flex 縦並びにして
   子要素を確実にブロック化＝上下 margin（＝余白）を効かせる。
   gap で「バナー直下のタイトル」と「説明文」の間隔を担保。 */
.tile__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.2vw, 24px) clamp(24px, 2.8vw, 32px);
}
.tile__name { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-weight: 700; color: var(--c-heading); font-size: 1.05rem; line-height: 1.55; }
.tile__name .chev { margin-inline-start: auto; align-self: center; }
.tile__tag { margin: 0; font-size: .85rem; color: var(--c-sub); line-height: 1.7; }
.tile__inner-pad { padding: 0 clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); }
.tile__inner-pad .grp-title { margin-block: 2px 14px; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 860px) {
  /* 案B：2ペインをやめ、上部に横スクロールタブ＋下に該当業種 */
  .index2 { grid-template-columns: 1fr; }
  .idx-nav { display: none; }
  /* SPは1カラムで普通に縦スクロールするため「高さ不変」要件は無い。
     アクティブ業種の高さに素直にフィットさせ、余白を出さない。
     非アクティブはグリッドセルの寸法から外す（visibility:collapse）が DOM は常在＝SEO維持。 */
  .idx-pane {
    overflow: visible;                         /* SPは枠内スクロール不要＝中身を素直に流す */
  }
  .idx-section {
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  }
  /* グリッドの重ね置きセル内で、非アクティブは高さ寄与を消す＝アクティブ高さにフィット */
  .idx-section:not(.is-active) { visibility: hidden; height: 0; min-height: 0; overflow: hidden; }

  .idx-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-block: 8px;
    margin-block-end: 14px;
    position: sticky;
    top: 72px;
    z-index: 20;
    background: var(--c-bg);
    scrollbar-width: none;
  }
  .idx-tabs::-webkit-scrollbar { display: none; }
  .idx-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-card);
    color: var(--c-text);
    font-family: inherit;
    font-size: .88rem;
    white-space: nowrap;
    cursor: pointer;
    flex: none;
  }
  .idx-tab[aria-selected="true"] {
    /* 【C-3】SP横タブ選択もカテゴリ色を紺で沈めた塗り＋白文字。font-weight 不変。 */
    background: color-mix(in srgb, var(--cat, var(--c-slate)) 88%, #1A1A2E);
    color: #fff;
    border-color: color-mix(in srgb, var(--cat, var(--c-slate)) 88%, #1A1A2E);
    /* font-weight は変えない＝タブ幅が変わらず横スクロール位置が動かない */
  }
  .idx-tab[aria-selected="true"] .badge { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
}

@media (max-width: 560px) {
  .site-header__inner { gap: 10px; flex-wrap: nowrap; }
  /* ロゴ枠は縮む＆2行折り返し可（長い注記がCTAを潰さないように） */
  .logo-ph { font-size: .68rem; padding-inline: 10px; white-space: normal; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
  /* CTAは絶対に折り返さない・縮まない */
  .btn-cta { padding-inline: 14px; font-size: .85rem; white-space: nowrap; flex: 0 0 auto; }
  .grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
}

/* ---- モーション抑制 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-panel] { transition: none; }
}