@charset "UTF-8";
/* =====================================================================
   宮崎市企業図鑑 共有デザインシステム（2026-07 新規追加）
   ※既存CSSは無改変。当ファイルは新規ページ（/miyazaki/・/company/）専用。
   ※すべて .zk 配下にスコープし、共通ヘッダ/フッタ(import.css)へ影響させない。
   モチーフ：宮崎＝南国の光（sunny coastal）／みやナビ準拠パレット
   ===================================================================== */

/* --- webfont（Zen Kaku Gothic Antique 準拠＋ラテンアクセント Outfit） --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap');

.zk{
  --sky:#006dee;
  --sky-600:#0a5bd6;
  --sky-2:#02a8e3;
  --cyan:#e0fbfe;
  --orange:#f99422;
  --coral:#f5596c;
  --sun:#f7e93f;
  --ink:#0e2a3b;
  --ink-soft:#4a6577;
  --ink-faint:#7d95a3;
  --line:#e5eef4;
  --paper:#ffffff;
  --mist:#f3f9fc;
  --mist-2:#eaf5fb;
  --radius:20px;
  --radius-s:12px;
  --shadow-s:0 2px 10px rgba(14,42,59,.06);
  --shadow-m:0 14px 40px -18px rgba(10,60,110,.35);
  --shadow-l:0 30px 70px -30px rgba(10,60,110,.45);
  --maxw:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);

  font-family:"Zen Kaku Gothic Antique","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
}
.zk *,.zk *::before,.zk *::after{box-sizing:border-box}
.zk img{max-width:100%;height:auto;display:block}
.zk a{color:inherit;text-decoration:none}

/* --- レイアウト --- */
.zk-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.zk-section{padding:clamp(44px,6vw,88px) 0}
.zk-narrow{max-width:920px;margin:0 auto;padding:0 22px}

/* --- セクション見出し（エディトリアル＋サンレイ小片） --- */
.zk-eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Outfit",sans-serif;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.72rem;color:var(--sky);
}
.zk-eyebrow::before{
  content:"";width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,var(--sun) 0 34%,transparent 36%),
    conic-gradient(from 0deg,var(--orange),var(--sun),var(--orange),var(--sun),var(--orange),var(--sun),var(--orange),var(--sun),var(--orange));
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0 30%,transparent 32% 40%,#000 42%);
          mask:radial-gradient(circle at 50% 50%,#000 0 30%,transparent 32% 40%,#000 42%);
  animation:zk-spin 22s linear infinite;
}
@keyframes zk-spin{to{transform:rotate(360deg)}}
.zk-h2{
  font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:900;line-height:1.28;
  letter-spacing:.01em;margin:.35em 0 .2em;
}
.zk-h2 em{font-style:normal;color:var(--sky);
  background:linear-gradient(transparent 62%,rgba(2,168,227,.22) 0);}
.zk-lead{color:var(--ink-soft);font-size:1.02rem;max-width:60ch}

/* --- ボタン --- */
.zk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-weight:700;font-size:1rem;padding:.95em 2em;border-radius:999px;
  border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  background:linear-gradient(120deg,var(--sky),var(--sky-2));color:#fff;
  box-shadow:0 12px 26px -12px rgba(0,109,238,.7);
}
.zk-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(0,109,238,.7)}
.zk-btn--sun{background:linear-gradient(120deg,var(--orange),#ffb648);box-shadow:0 12px 26px -12px rgba(249,148,34,.7)}
.zk-btn--ghost{background:#fff;color:var(--sky);border:1.5px solid #d6e6f2;box-shadow:var(--shadow-s)}
.zk-btn--ghost:hover{border-color:var(--sky);color:var(--sky-600)}
.zk-btn .zk-ar{transition:transform .25s var(--ease)}
.zk-btn:hover .zk-ar{transform:translateX(4px)}

/* --- バッジ --- */
.zk-badge{
  display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;font-weight:700;
  padding:.4em 1em;border-radius:999px;line-height:1.2;white-space:nowrap;
}
.zk-badge--gyoshu{background:linear-gradient(120deg,var(--sky),var(--sky-2));color:#fff}
.zk-badge--kodawari{background:#fff;color:var(--sky-600);border:1.5px solid #cfe6f6}
.zk-badge--soft{background:var(--mist-2);color:var(--ink-soft)}

/* --- 企業カード（一覧・スライダー共通） --- */
.zk-card{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);
  border:1px solid var(--line);height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.zk-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.zk-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.zk-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.zk-card:hover .zk-card__media img{transform:scale(1.06)}
.zk-card__noimg{width:100%;height:100%;display:grid;place-items:center;color:#a9c6d8;
  background:radial-gradient(120% 120% at 20% 0,var(--cyan),#fff);font-weight:800;letter-spacing:.1em}
.zk-card__gyoshu{position:absolute;left:12px;top:12px;z-index:2}
.zk-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:.5em;flex:1}
.zk-card__name{font-size:1.12rem;font-weight:900;line-height:1.4;letter-spacing:.01em}
.zk-card__phi{color:var(--ink-soft);font-size:.94rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zk-card__more{margin-top:auto;padding-top:10px;font-family:"Outfit",sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--sky);
  display:inline-flex;align-items:center;gap:.5em}
.zk-card__more .zk-ar{transition:transform .25s var(--ease)}
.zk-card:hover .zk-card__more .zk-ar{transform:translateX(4px)}

/* --- 出現アニメ（staggered reveal） --- */
.zk-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.zk-reveal.is-in{opacity:1;transform:none}

/* --- パンくず --- */
.zk-crumbs{font-size:.82rem;color:var(--ink-faint);padding:16px 0 0}
.zk-crumbs a:hover{color:var(--sky)}
.zk-crumbs span{margin:0 .5em;opacity:.5}

/* --- 検索フォーム：フリーワード入力（2026-07-07 追加） --- */
.zk-search__word{width:100%;max-width:520px;padding:.72em 1.2em;border-radius:999px;
  border:1.5px solid var(--line);background:var(--mist);font-size:.95rem;font-family:inherit;
  color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.zk-search__word:focus{outline:none;border-color:var(--sky);background:#fff;
  box-shadow:0 0 0 3px rgba(0,109,238,.12)}
.zk-search__word::placeholder{color:var(--ink-faint)}

/* =====================================================================
   検索フォーム：折りたたみ表示＋こだわり大分類（2026-07-27 追加）
   ・.zk-search--collapsed … 本体を閉じた状態（初期値はテンプレ側で付与）
   ・.zk-panel             … 業種／こだわり大分類の開閉パネル
   ※ JS無効時は <noscript> で強制的に開いた状態にする（_searchform.tpl）
   ===================================================================== */
/* --- 常時表示エリア（フリーワード＋検索＋しぼりこみトグル） --- */
.zk-search__quick{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:2px 0 0}
.zk-search__quick .zk-search__word{flex:1 1 300px;max-width:520px}
.zk-search__quick .zk-btn{padding:.8em 1.8em;font-size:.95rem;white-space:nowrap}
.zk-search__togglewrap{width:100%;display:flex;justify-content:center;margin-top:2px}
.zk-search__toggle{display:inline-flex;align-items:center;gap:.6em;
  padding:.68em 1.6em;border-radius:999px;border:1.5px solid #d6e6f2;background:#fff;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:800;color:var(--sky-600);
  transition:border-color .2s,background .2s,box-shadow .2s,color .2s}
.zk-search__toggle:hover{border-color:var(--sky);background:var(--mist);box-shadow:var(--shadow-s)}
.zk-search__toggle:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.zk-search__toggle .zk-search__ar{font-size:.7em;transition:transform .3s var(--ease)}
.zk-search__toggle .t-open{display:none}
.zk-search--collapsed .zk-search__toggle .t-open{display:inline}
.zk-search--collapsed .zk-search__toggle .t-close{display:none}
.zk-search:not(.zk-search--collapsed) .zk-search__toggle .zk-search__ar{transform:rotate(180deg)}
/* --- 折りたたみ本体 --- */
.zk-search--collapsed .zk-search__body{display:none}

/* --- 開閉パネル（業種／こだわり大分類） --- */
.zk-panel{border:1px solid var(--line);border-radius:14px;background:#fff;margin:0 0 10px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.zk-panel:last-child{margin-bottom:0}
.zk-panel.has-sel{border-color:#bfe0f4;box-shadow:0 6px 18px -12px rgba(0,109,238,.5)}
.zk-panel__head{display:flex;align-items:stretch;background:var(--mist)}
.zk-panel__pick{display:inline-flex;align-items:center;padding:12px 2px 12px 14px;cursor:pointer;position:relative}
.zk-panel__pick input{position:absolute;opacity:0;width:0;height:0}
.zk-panel__box{width:20px;height:20px;flex:0 0 20px;border-radius:6px;border:1.5px solid #c9dcea;
  background:#fff;display:inline-block;position:relative;transition:.2s}
.zk-panel__pick input:checked+.zk-panel__box{background:linear-gradient(120deg,var(--sky),var(--sky-2));border-color:transparent}
.zk-panel__pick input:checked+.zk-panel__box::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.zk-panel__pick input:indeterminate+.zk-panel__box{background:#9fd3ef;border-color:transparent}
.zk-panel__pick input:indeterminate+.zk-panel__box::after{content:"";position:absolute;left:4px;top:8px;
  width:10px;height:2px;background:#fff;border-radius:1px}
.zk-panel__pick input:focus-visible+.zk-panel__box{outline:2px solid var(--sky);outline-offset:2px}
.zk-panel__toggle{flex:1;display:flex;align-items:center;gap:.7em;padding:12px 16px 12px 8px;
  border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:.98rem;font-weight:800;
  color:var(--ink);text-align:left;line-height:1.4}
.zk-panel__toggle:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
.zk-panel__name{flex:1}
.zk-panel__count{display:none;font-size:.72rem;font-weight:800;color:#fff;
  background:linear-gradient(120deg,var(--sky),var(--sky-2));border-radius:999px;padding:.2em .75em;line-height:1.5}
.zk-panel.has-sel .zk-panel__count{display:inline-block}
.zk-panel__ar{font-size:.68rem;color:var(--ink-faint);transition:transform .3s var(--ease)}
.zk-panel.is-closed .zk-panel__ar{transform:rotate(-90deg)}
.zk-panel__body{padding:14px 16px 16px}
.zk-panel.is-closed .zk-panel__body{display:none}

@media (max-width:640px){
  .zk-search__quick .zk-btn{flex:1 1 100%}
  .zk-panel__toggle{font-size:.92rem;padding:12px 12px 12px 8px}
}

@media (max-width:768px){
  .zk-wrap,.zk-narrow{padding:0 18px}
}