/* AIKATA トップ：支援事例（5件を横に並べる。2026-10-22）
   くわしい内容は /aikata/case。ここでは「業種・きっかけ・支援内容」と、数字があれば変化だけを出す */

html body.aikata .hcs {
  --hcs-ink: #1b1e2b;
  --hcs-sub: #3d4455;
  --hcs-muted: #55607a;
  --hcs-blue: #0f64ae;
  padding: clamp(64px, 8vw, 120px) 0;
  background: #f4f6f9;
  color: var(--hcs-ink);
}
html body.aikata .hcs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); }
html body.aikata .hcs-eyebrow { margin: 0 0 8px; font: 700 15px/1.6 'Barlow', sans-serif; letter-spacing: .12em; color: var(--hcs-blue); }
html body.aikata .hcs-title { margin: 0; font: 700 clamp(26px, 2.8vw, 40px)/1.5 'Noto Sans JP', sans-serif; letter-spacing: .04em; color: var(--hcs-ink); text-align: left; }
html body.aikata .hcs-lead { margin: 0; font-size: 16px; line-height: 2; letter-spacing: .04em; color: var(--hcs-sub); }
html body.aikata .hcs-lead small { display: block; font-size: 13px; color: var(--hcs-muted); }

/* 横スクロール：左端は本文の幅にそろえ、右は画面の端まで */
html body.aikata .hcs-scroller {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(20px, calc((100vw - 1200px) / 2));
  padding: 4px 0 20px;
  scrollbar-width: thin;
  scrollbar-color: #b8bfcc transparent;
}
html body.aikata .hcs-scroller:focus-visible { outline: 3px solid var(--hcs-blue); outline-offset: -3px; }
html body.aikata .hcs-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 30vw, 380px);
  gap: clamp(16px, 2vw, 24px);
  width: max-content;
  margin: 0;
  padding: 0 max(20px, calc((100vw - 1200px) / 2));
  list-style: none;
}
html body.aikata .hcs-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px 26px;
  border-radius: 24px;
  background: #fff;
  scroll-snap-align: start;
}
html body.aikata .hcs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
html body.aikata .hcs-ico { width: 44px; height: 44px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: #eef5fc; color: var(--hcs-blue); }
html body.aikata .hcs-no { font: 800 15px/1 'Barlow', sans-serif; letter-spacing: .1em; color: var(--hcs-blue); }
html body.aikata .hcs-name { margin: 0 0 12px; font: 700 20px/1.5 'Noto Sans JP', sans-serif; letter-spacing: .04em; color: var(--hcs-ink); text-align: left; }
html body.aikata .hcs-name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--hcs-muted); }
html body.aikata .hcs-worry { margin: 0 0 18px; font-size: 15px; line-height: 1.85; letter-spacing: .03em; color: var(--hcs-sub); }
html body.aikata .hcs-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--hcs-blue);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
html body.aikata .hcs-result + .hcs-result { margin-top: -10px; }
html body.aikata .hcs-result span { flex-basis: 100%; font-weight: 700; opacity: .9; }
html body.aikata .hcs-result b { font: 800 22px/1.2 'Barlow', 'Noto Sans JP', sans-serif; }
html body.aikata .hcs-result b.is-after { font-size: 28px; }
html body.aikata .hcs-result i { font-style: normal; }
html body.aikata .hcs-result small { font-size: 12px; opacity: .85; }
html body.aikata .hcs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
html body.aikata .hcs-tags li { margin: 0; padding: 5px 12px; border-radius: 999px; background: #eef5fc; color: var(--hcs-ink); font-size: 13px; font-weight: 700; line-height: 1.5; }

html body.aikata .hcs-foot { margin-top: 20px; }
html body.aikata .hcs-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--hcs-ink);
  color: #fff;
  font: 700 16px/1.2 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .4s cubic-bezier(.43, .05, .17, 1);
}
html body.aikata .hcs-more:hover { background: var(--hcs-blue); }
html body.aikata .hcs-more span { transition: transform .4s cubic-bezier(.43, .05, .17, 1); }
html body.aikata .hcs-more:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
  html body.aikata .hcs-head { grid-template-columns: minmax(0, 1fr); }
  html body.aikata .hcs-list { grid-auto-columns: min(82vw, 340px); }
}