@charset "utf-8";
/* =============================================================
   南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
   pages/sitemap.css ─ サイトマップ（人が見るHTMLサイトマップ）固有

   1. ページヒーロー（高さを抑える）
   2. ページ一覧（3つの群・リンク行・子リンク）
   3. レスポンシブ

   カード・アイコン・画像を使わず、罫線・余白・タイポグラフィで構造を見せる。
   英語の分類は補助で、日本語のリンクが主役。リンク行は44px以上のタップ領域。
   ============================================================= */

/* -------------------------------------------------------------
   1. ページヒーロー
   ------------------------------------------------------------- */
.page-hero-sitemap{
  padding:calc(var(--header-h) + clamp(44px,6vw,80px)) 0 clamp(48px,6vw,80px);
}

/* -------------------------------------------------------------
   2. ページ一覧
   PC ：3列。上に細い罫線、列の間に細い縦罫。MAIN の列を少し広く取る。
   SP ：縦に並べ、群ごとに罫線で区切る。
   ------------------------------------------------------------- */
.sitemap{background:var(--white);padding-block:clamp(48px,6vw,88px) var(--section-pad)}
.sitemap-groups{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  border-top:1px solid var(--line);
}
.sitemap-group{
  padding:clamp(28px,3.4vw,44px) clamp(20px,2.8vw,40px) clamp(20px,2.6vw,32px);
  border-left:1px solid var(--line);
}
.sitemap-group:first-child{padding-left:0;border-left:0}

/* 群の見出し：英字（金）＋日本語（小さく） */
.sitemap-group-title{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2vw,24px)}
.sitemap-group-title .en{
  font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1;color:var(--gold-text);
}
.sitemap-group-title .ja{
  padding-left:14px;border-left:1px solid var(--gold);
  font-size:12px;font-weight:400;letter-spacing:.14em;line-height:1;color:var(--muted);
}

/* リンク行：明朝、右端に小さなライン＋矢印。触れるとラインが伸びて矢印が金に */
.sitemap-list > li{border-bottom:1px solid var(--line)}
.sitemap-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:14px 2px;
  font-size:17px;font-weight:500;letter-spacing:.08em;line-height:1.6;color:var(--ink);
  transition:color .35s var(--ease);
}
.sitemap-link .flow-cue{flex-basis:54px;width:54px;height:24px;color:var(--blue)}
.sitemap-link .flow-line{right:20px}
.sitemap-link .flow-node{width:22px;height:22px;border-color:transparent;opacity:.9}
.sitemap-link .flow-node svg{width:16px;height:16px}
.sitemap-link:is(:hover,:focus-visible){color:var(--blue)}
.sitemap-link:is(:hover,:focus-visible) .flow-line{transform:scaleX(1);opacity:1}
.sitemap-link:is(:hover,:focus-visible) .flow-node{transform:translateX(5px);opacity:1;color:var(--gold)}

/* 子リンク（事業内容の4項目）：字下げし、頭に短い金の線。行は小さめ・タップ領域は44px */
.sitemap-sublist{margin:2px 0 14px;padding-left:clamp(12px,1.4vw,18px)}
.sitemap-sublink{
  position:relative;display:flex;align-items:center;min-height:44px;padding:8px 2px 8px 22px;
  font-size:14.5px;letter-spacing:.06em;line-height:1.7;color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.sitemap-sublink::before{
  content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:var(--gold);
  transition:width .35s var(--ease);
}
.sitemap-sublink:is(:hover,:focus-visible){color:var(--blue)}
.sitemap-sublink:is(:hover,:focus-visible)::before{width:16px}

/* -------------------------------------------------------------
   3. レスポンシブ
   ------------------------------------------------------------- */
@media (max-width:1024px){
  .sitemap-groups{grid-template-columns:1fr;border-top:0}
  .sitemap-group{padding:clamp(28px,4vw,40px) 0 clamp(8px,2vw,16px);border-left:0;border-top:1px solid var(--line)}
  .sitemap-group:first-child{border-top:0;padding-top:0}
  .sitemap-list > li:last-child{border-bottom:0}
  .sitemap-groups{border-bottom:1px solid var(--line)}
}
@media (max-width:600px){
  .page-hero-sitemap{padding:calc(var(--header-h) + clamp(40px,7vw,56px)) 0 clamp(40px,6vw,56px)}
  .sitemap{padding-block:clamp(36px,6vw,48px) var(--section-pad-sm)}
  .sitemap-link{min-height:56px;font-size:16px}
  .sitemap-sublink{font-size:14px}
}