/* ==========================================================================
   一覧ハブ（サービス一覧 /service/ ・クリエイター一覧 /creator/ 共通）hub.css
   .sub-Wrapper--hub ＋ .svx-*（冒頭・事業ブロック・カード）。
   もとは detail.css にあったものを切り出した（見た目は変えていない）。
   読み込み: include/css.php（サービス配下は detail.css の後、クリエイター一覧は単独）
   ========================================================================== */
/* 本文の書体と色（detail.css の .sh-Page と同じ値。detail.css を読まないページでも同じ見た目にする） */
.svx-Page{
  font-family: "Zen Kaku Gothic New", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #0f0f0f;
}

/*===================================================================*/
/* サービス一覧（横並びカード）  page-service.php
   冒頭: パンくず → 左に h1・右にリード文（下揃え）。≤1024px は縦積み。
   事業ごと: 上2px黒線 + 統一 .nk-SecHead + リード → 2サービスを2カラムのカードで並べる
   カード: 画像 → 番号＋英字ラベル → サービス名 → 説明 → こんな方に → 詳しく見る（下端そろえ）
   IP MARKETING の最後に NOKID Lab の帯。背景の巨大文字は出さない。
   幅に応じた拡大は clamp()。1025px の値 → 1920px の値で線形に伸ばし、両端で止める。
   （clamp の中の「a + b vw」は、その2点を通る一次式）
   目次（.svx-Toc*）は廃止。アンカー id（#s01〜#s04）は各カードに残している。
/*===================================================================*/
/* 左右の余白は共通の .sub-Wrapper（PC 28px / 1024px以下 5.21vw）に合わせる。上だけ上書き */
.sub-Wrapper--hub{
  padding-top: 92px;
}
/* 上部は実績一覧（/works/）の見出しと同じ組み方：パンくず右上 → h1 を1行 → リード1行 */
.sub-Wrapper--hub .svx-Intro .nk-Breadcrumb{ margin: 20px 0 12px; }
.svx-Intro_Row{
  /* h1 → リード（1行）を左に縦積み */
  display: block;
}
.svx-Title{
  margin: 0;
  font-weight: 700;
  /* 和文は英字より詰まって見えるので、/works/ の英字 h1（56px）より一回り小さく。入りきらない幅では「、」の後で2行に折る */
  font-size: 44px;
  line-height: 1.3;
  letter-spacing: .03em;
  color: #0f0f0f;
}
.svx-brSp{ display: none; }
.svx-Lead{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: #0f0f0f;
}

/* 事業ごと */
.sub-Wrapper--hub .sub-Body{ margin-top: clamp(44px, 2vw + 20px, 64px); }
.svx-Biz{
  /* 88px@1025 → 144px@1920（〜2560px で 168px まで） */
  margin-top: clamp(88px, 23.9px + 6.257vw, 168px);
  padding-top: 32px;
  border-top: 2px solid #0f0f0f;
}
.sub-Wrapper--hub .sub-Body > .svx-Page > .svx-Biz:first-child{ margin-top: 0; }
.svx-Biz .nk-SecHead{ margin-bottom: 18px; }
.svx-Biz_Lead{
  margin: 0 0 clamp(36px, 2vw + 16px, 60px);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: #0f0f0f;
}
/* 2サービスを2カラムのカードに。gap は 28px@1025 → 48px@1920（〜2560px で 64px） */
.svx-Items{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5.1px + 2.235vw, 64px);
}
.svx-Item{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.svx-Item_Img{
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--nk-r-m);
  overflow: hidden;
  background: #e9e9e9;
}
.svx-Item_Img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,.84,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .svx-Item:hover .svx-Item_Img img{ transform: scale(1.04); }
}
.svx-Item_Body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  margin-top: clamp(22px, 1.3vw + 9px, 42px);
}
.svx-Item_Head{ display: flex; align-items: baseline; gap: 16px; margin: 0; }
.svx-Item_No{
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  /* 44px@1025 → 64px@1920 */
  font-size: clamp(44px, 21.1px + 2.235vw, 80px);
  line-height: 1;
  letter-spacing: .02em;
  color: #0f0f0f;
}
.svx-Item_Tag{
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2em;
  color: #0f0f0f;
}
.svx-Item_Title{
  margin: 16px 0 0;
  font-weight: 700;
  /* 20px@1025 → 26px@1920 */
  font-size: clamp(20px, 13.1px + .67vw, 30px);
  line-height: 1.5;
  letter-spacing: .03em;
  color: #0f0f0f;
}
.svx-Item_Copy{
  margin: 14px 0 24px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: #0f0f0f;
}
/* margin-top:auto で「こんな方に」以降を下端にそろえる（2枚の高さが違っても行がそろう） */
.svx-Item_Need{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: auto 0 0;
  padding: 14px 0;
  border-top: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #0f0f0f;
}
.svx-Item_Need svg.chev{ flex: none; width: 18px; height: 10px; }
.svx-Item_NeedLabel{ flex: none; }
.svx-Item_Btn{ margin-top: 24px; }

/* NOKID Lab の帯 */
.svx-Lab{
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 56px;
  padding: 28px 32px;
  border: 2px solid #0f0f0f;
  background: #fff;
  color: #0f0f0f;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.svx-Lab_Head{ display: flex; flex-direction: column; gap: 6px; }
.svx-Lab_Tag{ font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .2em; }
.svx-Lab_Name{ font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: .04em; }
.svx-Lab_Text{ font-weight: 700; font-size: 15px; line-height: 1.8; letter-spacing: .04em; }
.svx-Lab_Go{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.svx-Lab_Go svg.chev{ width: 26px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .svx-Lab:hover{ background: #0f0f0f; color: #fff; }
}

/* PC は h1 を2行、リードを1行。折り返しは <br> だけで決める（nowrap）。
   リードは約940px あるので、収まらない 1025〜1099px だけ折り返しを許す */
@media screen and (min-width:1025px) {
  .svx-Title br{ display: none; }
  .svx-Title_Ph{ display: inline-block; white-space: nowrap; }
}
@media screen and (min-width:1100px) {
  .svx-Lead{ white-space: nowrap; }
}

@media screen and (max-width:1024px) {
  /* h1 → リード の縦積み */
  .sub-Wrapper--hub{ padding-top: 13.5vw; }
  .sub-Wrapper--hub .svx-Intro .nk-Breadcrumb{ margin: 14px 0 8px; }
  .svx-Title{ font-size: 28px; }
  .svx-Lead{ margin-top: 8px; max-width: 640px; font-size: 12px; }
  .svx-Items{ gap: 28px; }
  .svx-Item_No{ font-size: 40px; }
  .svx-Item_Title{ font-size: 19px; }
}
@media screen and (max-width:767px) {
  .sub-Wrapper--hub{ padding-top: 84px; }
  .svx-Title{ font-size: 24px; line-height: 1.45; }
  .svx-brSp{ display: inline; }
  .sub-Wrapper--hub .sub-Body{ margin-top: 40px; }
  .svx-Biz{ margin-top: 72px; padding-top: 24px; }
  .svx-Biz_Lead{ margin-bottom: 32px; font-size: 14px; }
  .svx-Items{ grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .svx-Item_Body{ margin-top: 20px; }
  .svx-Item_No{ font-size: 40px; }
  .svx-Item_Tag{ font-size: 11px; }
  .svx-Item_Head{ gap: 12px; }
  .svx-Item_Title{ margin-top: 12px; font-size: 21px; }
  .svx-Item_Copy{ margin: 10px 0 18px; font-size: 14px; }
  .svx-Item_Need{ font-size: 13px; }
  .svx-Item_Btn{ display: flex; width: 100%; justify-content: space-between; margin-top: 20px; }
  .svx-Lab{ display: block; margin-top: 40px; padding: 22px 20px; }
  .svx-Lab_Text{ display: block; margin-top: 14px; font-size: 14px; }
  .svx-Lab_Go{ margin-top: 18px; }
}
@media screen and (max-width:359px) {
  .svx-Title{ font-size: 20px; }
  .svx-Item_Title{ font-size: 18px; }
}

/* 英字アイブロウ（docs/typography.md）: SP は 11px */
@media screen and (max-width:1024px) {
  .svx-Lab_Tag{ font-size: 11px; }
}