/* =============================================================================
   Resource Hub — GUIDED HUB mockup styles (clean white + blue, CAAC Go-ish)
   Layered on the Crescendo Lab design system. All values from --cl-* tokens.
   ============================================================================= */

.hub-section-title { margin: 0; font-size: 28px; font-weight: var(--cl-w-bold); color: var(--cl-fg-1); letter-spacing: -0.01em; }
.hub-section-title--center { text-align: center; margin-bottom: var(--cl-gap-xl); }

/* ======================= TOP NEWSLETTER STRIP ========================= */
.hub-newsbar { background: var(--cl-gradient-blue-h, linear-gradient(90deg,#3F7BFF,#5090FF)); color: #fff; }
.hub-newsbar__inner {
  max-width: var(--cl-max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--cl-gap-m);
  padding: 12px var(--cl-global-padding); flex-wrap: wrap;
}
.hub-newsbar__label { font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold); }
.hub-newsbar__form { display: flex; gap: 8px; }
.hub-newsbar__input {
  border: none; outline: none; border-radius: var(--cl-radius-xs); padding: 9px 14px;
  font-family: var(--cl-font-sans); font-size: var(--cl-text-s); width: 240px; min-width: 120px; background: #fff; color: var(--cl-fg-1);
}
.hub-newsbar__input::placeholder { color: var(--cl-fg-4); }
.hub-newsbar__btn {
  border: none; cursor: pointer; border-radius: var(--cl-radius-xs); padding: 9px 20px;
  font-family: var(--cl-font-sans); font-weight: var(--cl-w-bold); font-size: var(--cl-text-s);
  background: var(--cl-blue-deepest); color: #fff; white-space: nowrap;
}
.hub-newsbar__btn:hover { background: var(--cl-blue-pressed); }

/* =============================== HERO (centered) ======================= */
.rh-hero { background: var(--cl-bg); padding: 64px var(--cl-global-padding) 8px; }
.hub-hero2 { max-width: 760px; margin: 0 auto; text-align: center; }
.hub-hero2__title {
  margin: 0; font-size: 52px; line-height: 1.15; font-weight: var(--cl-w-bold);
  color: var(--cl-fg-1); letter-spacing: 0.02em;
}
.hub-hero2__sub {
  margin: 20px auto 0; max-width: 620px;
  font-size: var(--cl-para-l); line-height: var(--cl-lh-body); color: var(--cl-fg-2);
}

/* ============================ CATEGORY NAV BAR ========================= */
.hub-navbar { border-top: 1px solid var(--cl-border-soft); border-bottom: 1px solid var(--cl-border-soft); margin-top: 40px; background: var(--cl-bg); }
.hub-navbar__inner {
  max-width: var(--cl-max-width); margin: 0 auto; padding: 6px var(--cl-global-padding);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cl-gap-m); flex-wrap: wrap;
}
.hub-navbar__links { display: flex; gap: 4px; flex-wrap: wrap; }
.hub-navbar__link {
  display: inline-block; padding: 16px 14px; font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold);
  color: var(--cl-fg-2); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.hub-navbar__link:hover { color: var(--cl-blue); border-bottom-color: var(--cl-blue); }
.hub-navbar__search { display: flex; align-items: center; gap: 6px; }
.hub-navbar__input {
  border: none; outline: none; background: transparent; width: 140px;
  font-family: var(--cl-font-sans); font-size: var(--cl-text-s); color: var(--cl-fg-1); padding: 8px 4px;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.hub-navbar__input:focus { border-bottom-color: var(--cl-border); }
.hub-navbar__input::placeholder { color: var(--cl-fg-4); }
.hub-navbar__searchbtn { border: none; background: transparent; cursor: pointer; color: var(--cl-fg-1); display: inline-flex; padding: 6px; }
.hub-navbar__searchbtn i { width: 20px; height: 20px; }

/* ============================ FEATURED SECTION ========================= */
.hub-featured__head { margin-bottom: var(--cl-gap-l); }

/* Big featured card — dark media left, white text right */
.hub-feat {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; gap: 0;
  border-radius: var(--cl-radius-l); overflow: hidden; box-shadow: var(--cl-shadow-card);
  border: 1px solid var(--cl-border-soft); background: #fff; margin-bottom: var(--cl-gap-xl);
}
.hub-feat__media { position: relative; display: block; min-height: 300px; background: #0B1F44; }
.hub-feat__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hub-feat__badge {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  background: var(--cl-gradient-blue); color: #fff; font-size: var(--cl-text-xs); font-weight: var(--cl-w-semibold);
  padding: 7px 14px; border-radius: var(--cl-radius-full); box-shadow: 0 4px 12px rgba(11,31,68,0.3);
}
.hub-feat__body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hub-feat__title { margin: 0; font-size: 26px; line-height: 1.4; font-weight: var(--cl-w-bold); color: var(--cl-fg-1); letter-spacing: -0.01em; }
.hub-feat__desc { margin: 0; font-size: var(--cl-text-m); line-height: var(--cl-lh-body); color: var(--cl-fg-3); }
.hub-feat__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 12px; color: var(--cl-fg-1); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-m); text-decoration: none; }
.hub-feat__cta svg { width: 22px; height: 22px; color: var(--cl-blue); transition: transform .2s; }
.hub-feat:hover .hub-feat__cta svg { transform: translateX(4px); }

/* Play overlay */
.hub-gcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(11,31,68,0.3);
}
.hub-gcard__play i { width: 24px; height: 24px; color: var(--cl-blue); margin-left: 3px; }
.hub-feat__play { width: 64px; height: 64px; }

/* Uniform card grid */
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cl-gap-m); }
.hub-gcard {
  position: relative;   /* CTAの当たり判定をカード全面に広げるため */
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid var(--cl-border-soft); border-radius: var(--cl-radius-l);
  box-shadow: var(--cl-shadow-card); transition: transform .2s ease, box-shadow .2s ease;
}
/* 画像・タイトルを押しても反応しないと分かりにくいので、カードのどこを押しても
   CTAと同じリンクに飛ぶようにする（リンクの入れ子は作らない）。 */
.hub-gcard__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-gcard { cursor: pointer; }
.hub-gcard:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-soft); }
.hub-gcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--cl-bg-card); }
.hub-gcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-gcard__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--cl-gradient-blue); color: #fff; font-size: 11px; font-weight: var(--cl-w-semibold);
  padding: 5px 11px; border-radius: var(--cl-radius-full); box-shadow: 0 2px 8px rgba(11,31,68,0.2);
}
.hub-gcard__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; flex: 1; }
.hub-gcard__title { margin: 0; font-size: var(--cl-text-m); font-weight: var(--cl-w-bold); line-height: 1.5; color: var(--cl-fg-1); }
.hub-gcard__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; color: var(--cl-fg-1); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s); text-decoration: none; }
.hub-gcard__cta svg { width: 18px; height: 18px; color: var(--cl-blue); transition: transform .2s; }
.hub-gcard:hover .hub-gcard__cta svg { transform: translateX(4px); }

/* Dark promo tile (report download) */
.hub-gcard--dark { background: #0B1F44; border-color: #0B1F44; }
.hub-gcard--dark .hub-gcard__body { justify-content: center; gap: 18px; padding: 28px 24px; }
.hub-gcard__tag { align-self: flex-start; color: var(--cl-blue-light); font-size: var(--cl-text-xs); font-weight: var(--cl-w-bold); letter-spacing: .06em; }
.hub-gcard--dark .hub-gcard__title { color: #fff; font-size: 20px; line-height: 1.45; }
.hub-gcard__pill {
  align-self: flex-start; background: var(--cl-blue); color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: var(--cl-radius-full); font-weight: var(--cl-w-bold); font-size: var(--cl-text-s);
}
.hub-gcard__pill:hover { background: var(--cl-blue-pressed); }

/* ============================ CONTACT BAND ============================= */
.hub-contact {
  display: flex; align-items: center; gap: var(--cl-gap-m);
  background: #EEF1FB; border: 1px solid #E1E6F5; border-radius: 20px; padding: 30px 36px;
}
.hub-contact__icon { width: 54px; height: 54px; border-radius: 14px; background: #fff; color: var(--cl-blue); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--cl-shadow-card); }
.hub-contact__icon i { width: 28px; height: 28px; }
.hub-contact__text { flex: 1; min-width: 0; }
.hub-contact__title { margin: 0; font-size: var(--cl-para-l); font-weight: var(--cl-w-bold); color: var(--cl-fg-1); }
.hub-contact__desc { margin: 6px 0 0; font-size: var(--cl-text-s); line-height: var(--cl-lh-body); color: var(--cl-fg-3); }
.hub-contact__btn {
  flex-shrink: 0; background: #fff; color: var(--cl-blue); border: 1.5px solid var(--cl-blue);
  text-decoration: none; padding: 13px 26px; border-radius: var(--cl-radius-full); font-weight: var(--cl-w-bold); font-size: var(--cl-text-s);
}
.hub-contact__btn:hover { background: var(--cl-blue); color: #fff; }

/* ============================ 3-STEP GUIDE ============================== */
.hub-band-title {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 var(--cl-gap-xl); font-size: 24px; font-weight: var(--cl-w-bold); color: var(--cl-fg-1);
}
.hub-band-title__deco { color: var(--cl-blue); font-weight: var(--cl-w-regular); opacity: 0.8; }
.hub-steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1000px;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0;
}
.hub-steps__arrow { display: flex; align-items: center; justify-content: center; color: var(--cl-fg-4); padding: 0 8px; }
.hub-steps__arrow i { width: 24px; height: 24px; }
.hub-step {
  background: #fff; border: 1px solid var(--cl-border-soft); border-radius: var(--cl-radius-l);
  padding: 32px 24px; text-align: center; box-shadow: var(--cl-shadow-card);
  display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative;
}
.hub-step__num {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--cl-gradient-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--cl-w-bold); font-size: 15px;
  box-shadow: 0 4px 12px rgba(80,144,255,0.35);
}
.hub-step__icon {
  width: 60px; height: 60px; border-radius: 16px; background: var(--cl-blue-10); color: var(--cl-blue);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 8px;
}
.hub-step__icon i { width: 30px; height: 30px; }
.hub-step__title { margin: 6px 0 0; font-size: var(--cl-text-l); font-weight: var(--cl-w-bold); color: var(--cl-fg-1); }
.hub-step__desc { margin: 0; font-size: var(--cl-text-s); line-height: var(--cl-lh-body); color: var(--cl-fg-3); }

/* ============================ GOAL CARDS =============================== */
.hub-goals { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cl-gap-m); }
.hub-goal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 28px 24px; border-radius: var(--cl-radius-l); text-decoration: none;
  min-height: 190px; position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.hub-goal:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-soft); }
.hub-goal__icon { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hub-goal__icon i, .hub-goal__icon svg { width: 26px; height: 26px; }
.hub-goal__title { font-size: var(--cl-text-l); font-weight: var(--cl-w-bold); line-height: 1.4; color: var(--cl-fg-1); }
.hub-goal__arrow { margin-top: auto; color: var(--cl-fg-3); }
.hub-goal__arrow i { width: 20px; height: 20px; }
/* Unified blue palette (subtle shades) — colour set on the wrapper so the
   Lucide-generated <svg> inherits it via currentColor. */
.hub-goal--blue1 { background: #EDF3FF; } .hub-goal--blue1 .hub-goal__icon { color: var(--cl-blue); }
.hub-goal--blue2 { background: #E2ECFF; } .hub-goal--blue2 .hub-goal__icon { color: var(--cl-blue-deep); }
.hub-goal--blue3 { background: #EAF4FF; } .hub-goal--blue3 .hub-goal__icon { color: var(--cl-blue); }
/* Selected goal — a clear ring + lift so the active filter is obvious. */
.hub-goals__hint {
  margin: 10px auto 0; max-width: 640px; text-align: center;
  font-size: var(--cl-text-s); color: var(--cl-fg-3);
}
.hub-goal { cursor: pointer; }
.hub-goal.is-active {
  box-shadow: 0 0 0 2px var(--cl-blue), var(--cl-shadow-soft);
  transform: translateY(-4px);
}
.hub-goal.is-active .hub-goal__arrow { color: var(--cl-blue); }

/* ===================== GOAL-FILTERED RESULTS ========================== */
[hidden] { display: none !important; }
.hub-goalres__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cl-gap-m); margin-bottom: var(--cl-gap-l);
}
.hub-goalres__clear {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--cl-radius-full); cursor: pointer;
  background: #fff; color: var(--cl-fg-2); font-weight: var(--cl-w-semibold);
  font-size: var(--cl-text-s); border: 1px solid var(--cl-border-soft);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.hub-goalres__clear:hover { color: var(--cl-blue); border-color: var(--cl-blue); background: #F5F9FF; }
.hub-goalres__clear i, .hub-goalres__clear svg { width: 16px; height: 16px; }
.hub-goalres__empty { color: var(--cl-fg-3); font-size: var(--cl-text-m); }

/* ========================= RECOMMENDED CAROUSEL ======================== */
.hub-rec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cl-gap-m); margin-bottom: var(--cl-gap-l); }
.hub-rec__headtext { min-width: 0; }
.hub-block-eyebrow {
  display: inline-block; margin-bottom: 6px; font-size: var(--cl-text-xs); font-weight: var(--cl-w-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--cl-blue);
}
/* Each content-category is its own stacked block. */
.hub-block + .hub-block { margin-top: calc(var(--cl-gap-xl) * 1.4); }
.hub-carousel__track {
  display: flex; gap: var(--cl-gap-m); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin: -4px -2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hub-carousel__track::-webkit-scrollbar { display: none; }
.hub-card {
  flex: 0 0 clamp(280px, 31.5%, 400px); scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--cl-border-soft); border-radius: var(--cl-radius-l);
  box-shadow: var(--cl-shadow-card); transition: transform .2s ease, box-shadow .2s ease;
}
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-soft); }
.hub-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--cl-bg-card); }
.hub-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #fff; color: var(--cl-blue); font-size: var(--cl-text-xs); font-weight: var(--cl-w-semibold);
  padding: 5px 12px; border-radius: var(--cl-radius-full); box-shadow: 0 2px 8px rgba(34,59,83,0.14);
}
.hub-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.hub-card__title { margin: 0; font-size: var(--cl-text-l); font-weight: var(--cl-w-bold); line-height: 1.4; color: var(--cl-fg-1); }
.hub-card__desc { margin: 0; font-size: var(--cl-text-s); line-height: var(--cl-lh-body); color: var(--cl-fg-3); }
.hub-card__body .rh-link { margin-top: auto; }
.hub-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--cl-gap-l); }
.hub-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #CBD5E6; cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.hub-dot.is-active { width: 22px; border-radius: 5px; background: var(--cl-blue); }

/* ============================ NEWSLETTER =============================== */
.hub-news {
  display: flex; align-items: center; gap: var(--cl-gap-m);
  background: var(--cl-gradient-blue-h); border-radius: 24px; padding: 36px 40px;
  box-shadow: var(--cl-shadow-elev);
}
.hub-news__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.22); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-news__icon i { width: 28px; height: 28px; }
.hub-news__text { flex: 1; min-width: 0; }
.hub-news__title { margin: 0; font-size: var(--cl-para-l); font-weight: var(--cl-w-bold); color: #fff; }
.hub-news__desc { margin: 4px 0 0; font-size: var(--cl-text-s); color: rgba(255,255,255,0.9); }
.hub-news__form { display: flex; gap: 10px; flex-shrink: 0; }
.hub-news__input {
  border: none; outline: none; border-radius: var(--cl-radius-xs); padding: 12px 16px;
  font-family: var(--cl-font-sans); font-size: var(--cl-text-m); min-width: 240px; background: #fff; color: var(--cl-fg-1);
}
.hub-news__input::placeholder { color: var(--cl-fg-4); }
.hub-news__btn {
  border: none; cursor: pointer; border-radius: var(--cl-radius-xs); padding: 12px 22px;
  font-family: var(--cl-font-sans); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-m);
  background: #1F49A3; color: #fff; white-space: nowrap;
}
.hub-news__btn:hover { background: #17408F; }

/* ===================== SECTION HEADS (shared) ========================= */
.hub-sec-head { margin-bottom: var(--cl-gap-l); }
.hub-sec-head--center { text-align: center; }
.hub-sec-head__eyebrow {
  display: inline-block; margin-bottom: 8px; font-size: var(--cl-text-xs); font-weight: var(--cl-w-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--cl-blue);
}

/* ============================ お客様の声 =============================== */
.hub-tm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-gap-m); }
.hub-tm {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid var(--cl-border-soft); border-radius: var(--cl-radius-l);
  padding: 28px 26px; box-shadow: var(--cl-shadow-card);
}
/* 事例カードの企業ロゴ：ロゴごとに縦横比が違う（1857x258〜240x240）ため、
   高さだけ固定して width:auto + contain。box に押し込むと潰れて表示される。 */
.hub-tm__logo {
  /* .hub-tm は flex column なので align-self を指定しないと幅いっぱいに伸びる */
  /* 本家 www.cresclab.com の .slider-testimonial-logo と同じ扱い：
     高さ固定（3.75em≒56px / モバイル 3em≒44px）＋ max-width 10em ＋ contain。
     .hub-tm は flex column なので align-self が無いと幅いっぱいに伸びる。 */
  align-self: flex-start; height: 56px; width: auto; max-width: 160px;
  object-fit: contain; object-position: left center; display: block; margin-bottom: 2px;
}
@media (max-width: 560px) { .hub-tm__logo { height: 44px; max-width: 140px; } }
.hub-tm__stars { display: inline-flex; align-items: center; gap: 3px; color: #12B886; }
.hub-tm__stars svg { width: 16px; height: 16px; }
.hub-tm__stars b { margin-left: 6px; font-size: var(--cl-text-s); color: var(--cl-fg-2); }
.hub-tm__quote { margin: 0; font-size: var(--cl-text-m); line-height: 1.75; color: var(--cl-fg-1); flex: 1; }
.hub-tm__metric {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: #EAF4EF; color: #0E8F6E; font-size: var(--cl-text-xs); font-weight: var(--cl-w-bold);
  padding: 6px 12px; border-radius: var(--cl-radius-full);
}
.hub-tm__metric i { width: 15px; height: 15px; }
.hub-tm__foot { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--cl-border-soft); }
.hub-tm__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--cl-gradient-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--cl-w-bold); font-size: var(--cl-text-m);
}
.hub-tm__who { display: flex; flex-direction: column; line-height: 1.35; }
.hub-tm__who b { font-size: var(--cl-text-s); color: var(--cl-fg-1); }
.hub-tm__who span { font-size: var(--cl-text-xs); color: var(--cl-fg-3); }

/* =============================== FAQ ================================== */
.hub-faq { max-width: 780px; }
.hub-faq__list { margin-top: 4px; }

/* ============================ RESPONSIVE ============================== */
@media (max-width: 1000px) {
  .rh-hero { padding-top: 44px; }
  .hub-hero2__title { font-size: 40px; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-tm__grid { grid-template-columns: 1fr; }
  .hub-feat { grid-template-columns: 1fr; }
  .hub-feat__media { min-height: 220px; }
  .hub-feat__body { padding: 32px 28px; }
  .hub-navbar__inner { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .hub-hero2__title { font-size: 32px; }
  .hub-hero2__sub { font-size: var(--cl-text-m); }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-feat__title { font-size: 22px; }
  .hub-navbar__link { padding: 12px 10px; }
  .hub-contact { flex-direction: column; align-items: flex-start; }
  .hub-contact__btn { width: 100%; text-align: center; }
  .hub-newsbar__form { width: 100%; }
  .hub-newsbar__input { min-width: 0; flex: 1; }
}

/* =============================================================================
   DARK "B2B TECH" THEME  (scoped under body.hub-dark)
   Ref: 2026 launch key visual — deep navy, ambient blue glow, glass surfaces,
   glowing accents. Page background + dot-grid live in the page's <style>.
   ============================================================================= */
.hub-dark { --hub-line: rgba(120,150,255,0.14); --hub-glass: rgba(13,20,38,0.72); }

/* ---- Header (glass pill) --------------------------------------------- */
.hub-dark .cl-header {
  background: rgba(12,18,34,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(120,150,255,0.16); box-shadow: 0 10px 34px rgba(0,0,0,0.42);
}
.hub-dark .cl-header__nav-item { color: #C7D2EC; }
.hub-dark .cl-header__nav-item:hover,
.hub-dark .cl-header__nav-item--active { color: #fff; }
.hub-dark .cl-header__icon-btn { color: #C7D2EC; }

/* ---- Sticky newsletter tab (glass) ----------------------------------- */
.hub-dark .hub-newsbar {
  background: rgba(8,12,24,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(120,150,255,0.14); box-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hub-dark .hub-newsbar__label { color: #E7EEFF; }
.hub-dark .hub-newsbar__input {
  background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(140,165,255,0.22);
}
.hub-dark .hub-newsbar__input::placeholder { color: #8494B8; }
.hub-dark .hub-newsbar__btn {
  background: linear-gradient(180deg,#5B9BFF,#3F7BFF); color: #fff;
  box-shadow: 0 0 0 1px rgba(120,160,255,0.35), 0 6px 22px rgba(70,120,255,0.5);
}
.hub-dark .hub-newsbar__btn:hover { background: linear-gradient(180deg,#6EA8FF,#4D8DFF); }

/* ---- Hero (glowing title + breathing orb) ---------------------------- */
.hub-dark #rh-hero { position: relative; }
/* Soft, wide ambient glow behind the title — no hard edges, no boxy clip. */
.hub-dark #rh-hero::before {
  content: ""; position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);
  width: 1120px; height: 560px; max-width: 130vw; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(84,142,255,0.22), rgba(84,142,255,0.05) 42%, transparent 68%);
  filter: blur(34px); animation: hubOrb 6.5s ease-in-out infinite;
}
.hub-dark .hub-hero2 { position: relative; z-index: 1; }
.hub-dark .hub-hero2__title {
  background: linear-gradient(180deg,#EAF1FF 0%, #A9CBFF 52%, #5B9BFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 34px rgba(84,142,255,0.5));
}
.hub-dark .hub-hero2__sub { color: #A9B6D4; }
@keyframes hubOrb {
  0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
}

/* ---- Category nav ---------------------------------------------------- */
.hub-dark .hub-navbar { border-top: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); }
.hub-dark .hub-navbar__link { color: #AEBAD6; }
.hub-dark .hub-navbar__link:hover { color: #fff; border-bottom-color: #5B9BFF; }
.hub-dark .hub-navbar__input { color: #E7EEFF; }
.hub-dark .hub-navbar__input::placeholder { color: #7C89A8; }
.hub-dark .hub-navbar__input:focus { border-bottom-color: rgba(140,165,255,0.5); }
.hub-dark .hub-navbar__searchbtn { color: #AEBAD6; }

/* ---- Section heads --------------------------------------------------- */
.hub-dark .hub-section-title { color: #EAF1FF; }
.hub-dark .hub-sec-head__eyebrow { color: #7FB0FF; }

/* ---- Featured card --------------------------------------------------- */
.hub-dark .hub-feat {
  background: var(--hub-glass); border: 1px solid rgba(120,150,255,0.16);
  box-shadow: 0 24px 56px rgba(0,0,0,0.5); backdrop-filter: blur(6px);
}
.hub-dark .hub-feat__media { background: #0A1120; }
.hub-dark .hub-feat__title { color: #EAF1FF; }
.hub-dark .hub-feat__desc { color: #9FADCC; }
.hub-dark .hub-feat__cta { color: #EAF1FF; }

/* ---- Uniform grid cards ---------------------------------------------- */
.hub-dark .hub-gcard {
  background: var(--hub-glass); border: 1px solid var(--hub-line);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4); backdrop-filter: blur(6px);
}
.hub-dark .hub-gcard:hover { border-color: rgba(120,160,255,0.5); box-shadow: 0 18px 46px rgba(30,70,180,0.45); }
.hub-dark .hub-gcard__media { background: #0A1120; }
.hub-dark .hub-gcard__title { color: #EAF1FF; }
.hub-dark .hub-gcard__cta { color: #DCE6FF; }

/* Promo dark tile — brighter glass with glow */
.hub-dark .hub-gcard--dark {
  background: linear-gradient(160deg, rgba(30,48,98,0.92), rgba(11,19,38,0.92));
  border: 1px solid rgba(120,160,255,0.3);
  box-shadow: 0 0 0 1px rgba(90,150,255,0.14), 0 20px 46px rgba(20,50,140,0.5);
}
.hub-dark .hub-gcard__tag { color: #8FC0FF; }
.hub-dark .hub-gcard__pill { box-shadow: 0 6px 22px rgba(70,120,255,0.55); }

/* ---- Testimonials ---------------------------------------------------- */
.hub-dark .hub-tm {
  background: var(--hub-glass); border: 1px solid var(--hub-line);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4); backdrop-filter: blur(6px);
}
.hub-dark .hub-tm__quote { color: #DCE6FF; }
.hub-dark .hub-tm__stars b { color: #9FADCC; }
.hub-dark .hub-tm__metric { background: rgba(52,150,110,0.18); color: #61E3B3; }
.hub-dark .hub-tm__foot { border-top-color: var(--hub-line); }
.hub-dark .hub-tm__who b { color: #EAF1FF; }
.hub-dark .hub-tm__who span { color: #8FA0C4; }

/* ---- FAQ accordion (override cl.css light styles) -------------------- */
.hub-dark .cl-accordion-item { background: var(--hub-glass); border: 1px solid var(--hub-line); }
.hub-dark .cl-accordion-item[open] { background: rgba(20,30,56,0.8); border-color: rgba(120,160,255,0.28); }
.hub-dark .cl-accordion-summary { color: #EAF1FF; }
.hub-dark .cl-accordion-body { color: #9FADCC; }
.hub-dark .cl-accordion-icon { background: rgba(255,255,255,0.05); border: 1px solid rgba(140,165,255,0.28); color: #9FC0FF; }

/* ---- Contact band ---------------------------------------------------- */
.hub-dark .hub-contact {
  background: rgba(13,20,38,0.7); border: 1px solid rgba(120,150,255,0.18);
  box-shadow: 0 16px 44px rgba(0,0,0,0.45); backdrop-filter: blur(6px);
}
.hub-dark .hub-contact__icon { background: rgba(255,255,255,0.06); color: #7FB0FF; box-shadow: none; }
.hub-dark .hub-contact__title { color: #EAF1FF; }
.hub-dark .hub-contact__desc { color: #9FADCC; }
.hub-dark .hub-contact__btn { background: transparent; color: #DCE6FF; border: 1.5px solid rgba(140,165,255,0.5); }
.hub-dark .hub-contact__btn:hover { background: linear-gradient(180deg,#5B9BFF,#3F7BFF); color: #fff; border-color: transparent; }

/* ---- Footer --------------------------------------------------------- */
.hub-dark .footer-stage, .hub-dark .cl-footer { background: transparent; }
.hub-dark .cl-footer { border-top: 1px solid var(--hub-line); }
.hub-dark .cl-footer__newsletter-title, .hub-dark .cl-footer__col-title { color: #EAF1FF; }
.hub-dark .cl-footer__col-list a { color: #95A3C4; }
.hub-dark .cl-footer__col-list a:hover { color: #fff; }
.hub-dark .cl-footer__copy, .hub-dark .cl-footer__totop { color: #8494B8; }
.hub-dark .cl-footer__social a { color: #AEBAD6; }
.hub-dark .cl-footer__email {
  background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(140,165,255,0.22);
}
.hub-dark .cl-footer__email::placeholder { color: #8494B8; }

@media (prefers-reduced-motion: reduce) {
  .hub-dark #rh-hero::before { animation: none; }
}

/* =============================================================================
   EXTENDED TOP BANNER + DEEP-NAVY SUB-HEADER + SEARCH ROW  (dark theme)
   ============================================================================= */
/* Banner: single row — [logo | newsletter] left cluster · CTAs right cluster.
   Uses near-full width (not the 1280 grid) so everything fits one line. */
.hub-newsbar__inner { max-width: none; padding: 12px 44px; justify-content: flex-start; gap: 22px; flex-wrap: nowrap; }
.hub-newsbar__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.hub-newsbar__brand img { height: 26px; width: auto; display: block; }
.hub-newsbar__promo {
  flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  flex-wrap: nowrap; min-width: 0; padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.16);
}
.hub-newsbar__label { white-space: nowrap; }
.hub-newsbar__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.hub-newsbar__globe { background: transparent; border: none; color: #C7D2EC; cursor: pointer; display: inline-flex; padding: 6px; border-radius: 50%; }
.hub-newsbar__globe:hover { color: #fff; }
.hub-newsbar__globe svg { width: 20px; height: 20px; }
/* 無料相談 — outlined/ghost so it reads as a distinct action from the filled
   blue "登録する" submit button (no colour clash). Fills on hover. */
.hub-newsbar__cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  background: rgba(96,150,255,0.10); color: #CFE0FF; border: 1.5px solid rgba(140,175,255,0.55);
  padding: 8px 18px; border-radius: var(--cl-radius-xs); font-weight: var(--cl-w-bold); font-size: var(--cl-text-s);
  transition: background .15s, color .15s, border-color .15s;
}
.hub-newsbar__cta:hover { background: linear-gradient(180deg,#5B9BFF,#3F7BFF); color: #fff; border-color: transparent; }
.hub-newsbar__cta svg { width: 16px; height: 16px; }

/* Deep-navy full-width sub-header bar — centered links */
.hub-subnav { width: 100%; background: #090E1E; border-bottom: 1px solid rgba(120,150,255,0.12); }
.hub-subnav__inner {
  max-width: var(--cl-max-width); margin: 0 auto; padding: 10px var(--cl-global-padding);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hub-subnav__links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.hub-subnav__link {
  color: #C7D2EC; text-decoration: none; font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold);
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.hub-subnav__link:hover { color: #fff; border-bottom-color: #5B9BFF; }

/* トピックから探す — dropdown menu */
.hub-subnav__item { position: relative; display: inline-flex; align-items: center; }
.hub-subnav__trigger { background: transparent; border: none; cursor: pointer; font-family: var(--cl-font-sans); display: inline-flex; align-items: center; gap: 6px; }
.hub-subnav__chev { width: 15px; height: 15px; transition: transform .2s; }
.hub-subnav__item--menu:hover .hub-subnav__chev,
.hub-subnav__item--menu.is-open .hub-subnav__chev { transform: rotate(180deg); }
.hub-subnav__menu {
  position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 270px; z-index: 60;
  background: rgba(12,20,38,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(120,150,255,0.18); border-radius: 14px; padding: 8px;
  box-shadow: 0 22px 54px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.hub-subnav__menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.hub-subnav__item--menu:hover .hub-subnav__menu,
.hub-subnav__item--menu.is-open .hub-subnav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hub-subnav__menuitem {
  display: block; padding: 11px 14px; border-radius: 9px; color: #C7D2EC; text-decoration: none;
  font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold); white-space: nowrap; transition: background .12s, color .12s;
}
.hub-subnav__menuitem:hover { background: rgba(90,150,255,0.15); color: #fff; }
/* お問い合わせ — standout rectangular CTA button (like the top-bar CTAs) */
.hub-subnav__cta {
  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg,#5B9BFF,#3F7BFF); color: #fff;
  padding: 9px 20px; border-radius: var(--cl-radius-xs); font-size: var(--cl-text-s); font-weight: var(--cl-w-bold);
  box-shadow: 0 0 0 1px rgba(120,160,255,0.3), 0 6px 18px rgba(70,120,255,0.5); transition: background .15s;
}
.hub-subnav__cta:hover { background: linear-gradient(180deg,#6EA8FF,#4D8DFF); }

/* Search row (below the sub-header), right-aligned */
.hub-searchrow__inner {
  max-width: var(--cl-max-width); margin: 0 auto; padding: 14px var(--cl-global-padding);
  display: flex; justify-content: flex-end;
}
.hub-search2 { display: flex; align-items: center; gap: 8px; }
.hub-search2__input {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(140,165,255,0.22); border-radius: var(--cl-radius-full);
  padding: 9px 18px; width: 240px; color: #E7EEFF; font-family: var(--cl-font-sans); font-size: var(--cl-text-s); outline: none;
}
.hub-search2__input:focus { border-color: rgba(140,165,255,0.5); }
.hub-search2__input::placeholder { color: #8494B8; }
.hub-search2__btn { background: transparent; border: none; color: #AEBAD6; cursor: pointer; display: inline-flex; padding: 6px; }
.hub-search2__btn:hover { color: #fff; }
.hub-search2__btn svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .hub-newsbar__inner { flex-direction: column; gap: 10px; }
  .hub-subnav__inner { flex-wrap: wrap; gap: 16px 24px; }
  .hub-searchrow__inner { justify-content: stretch; }
  .hub-search2, .hub-search2__input { width: 100%; }
}

/* =============================================================================
   他社比較テーブル (comparison) — dark theme, Crescendo column highlighted
   ============================================================================= */
.hub-cmp__intro { margin: 12px auto 0; max-width: 720px; font-size: var(--cl-text-m); line-height: var(--cl-lh-body); color: #9FADCC; }
.hub-cmp__wrap {
  margin-top: var(--cl-gap-l); overflow-x: auto;
  border: 1px solid rgba(120,150,255,0.14); border-radius: 18px; background: rgba(13,20,38,0.62);
}
.hub-cmp { width: 100%; border-collapse: collapse; min-width: 840px; }
.hub-cmp th, .hub-cmp td {
  padding: 18px 20px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid rgba(120,150,255,0.10);
}
.hub-cmp tbody tr:last-child th, .hub-cmp tbody tr:last-child td { border-bottom: none; }
.hub-cmp__corner { width: 210px; background: transparent; }
.hub-cmp__colh b { display: block; font-size: var(--cl-text-m); font-weight: var(--cl-w-bold); color: #EAF1FF; }
.hub-cmp__colh span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: #8FA0C4; font-weight: 400; }
.hub-cmp__colh.is-hl { background: rgba(90,150,255,0.15); border-top: 2px solid #5B9BFF; }
.hub-cmp__colh.is-hl b { color: #A8CAFF; }
.hub-cmp__rowh {
  text-align: left; font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold); color: #C7D2EC;
}
.hub-cmp__grouprow td {
  text-align: left; background: rgba(90,150,255,0.12); color: #A8CAFF;
  font-weight: var(--cl-w-bold); font-size: var(--cl-text-s); letter-spacing: .04em; padding: 11px 20px;
}
.hub-cmp__cell { font-size: var(--cl-text-s); color: #C7D2EC; }
.hub-cmp__cell.is-hl { background: rgba(90,150,255,0.09); }
.hub-cmp__line { display: flex; align-items: flex-start; gap: 7px; text-align: left; line-height: 1.55; }
.hub-cmp__line + .hub-cmp__line { margin-top: 7px; }
.hub-cmp__line i { font-style: normal; font-weight: 700; flex-shrink: 0; }
.hub-cmp__mark { font-size: 18px; font-weight: 700; }
.hub-cmp__m--pos i, .hub-cmp__mark.hub-cmp__m--pos { color: #4FD19B; }
.hub-cmp__m--warn i, .hub-cmp__mark.hub-cmp__m--warn { color: #E3B265; }
.hub-cmp__m--neg i, .hub-cmp__mark.hub-cmp__m--neg { color: #E06B6B; }
.hub-cmp__cell.is-hl .hub-cmp__m--pos i, .hub-cmp__cell.is-hl .hub-cmp__mark.hub-cmp__m--pos { color: #6EA8FF; }
.hub-cmp__more { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: var(--cl-gap-l); flex-wrap: wrap; }
.hub-cmp__morenote { color: #9FADCC; font-size: var(--cl-text-s); }
.hub-cmp__btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg,#5B9BFF,#3F7BFF); color: #fff;
  padding: 12px 26px; border-radius: var(--cl-radius-xs); font-weight: var(--cl-w-bold); font-size: var(--cl-text-s);
  box-shadow: 0 8px 24px rgba(70,120,255,0.4);
}
.hub-cmp__btn:hover { background: linear-gradient(180deg,#6EA8FF,#4D8DFF); }
.hub-cmp__btn svg { width: 16px; height: 16px; }

/* =============================================================================
   トピック結果ビュー (LINE) — blog carousel + staggered cases/downloads
   ============================================================================= */
.hub-tr__head { display: flex; align-items: center; gap: 16px; margin-bottom: var(--cl-gap-l); }
.hub-tr__head .hub-section-title { margin: 4px 0 0; }
.hub-tr__clear {
  margin-left: auto; background: transparent; border: 1px solid rgba(140,165,255,0.35); color: #C7D2EC;
  border-radius: var(--cl-radius-full); padding: 9px 18px; cursor: pointer; font-family: var(--cl-font-sans); font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold);
}
.hub-tr__clear:hover { color: #fff; border-color: #5B9BFF; }
.hub-tr__blockhead { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 16px; }
.hub-tr__blocktitle { margin: 0; font-size: 20px; font-weight: var(--cl-w-bold); color: #EAF1FF; display: flex; align-items: baseline; gap: 10px; }
.hub-tr__count { font-size: var(--cl-text-s); font-weight: var(--cl-w-regular); color: #8FA0C4; }
.hub-tr__arrows { display: flex; gap: 8px; }
.hub-tr__arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(140,165,255,0.3);
  background: rgba(255,255,255,0.05); color: #C7D2EC; cursor: pointer; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.hub-tr__arrow:hover { background: rgba(90,150,255,0.22); color: #fff; }
/* Blog carousel */
.hub-tr__carousel { position: relative; }
.hub-tr__track {
  display: flex; gap: var(--cl-gap-m); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; scrollbar-width: none; -ms-overflow-style: none;
}
.hub-tr__track::-webkit-scrollbar { display: none; }
.hub-tr__track > .hub-gcard { flex: 0 0 clamp(260px, 30%, 320px); scroll-snap-align: start; }
/* Staggered cases + downloads (段々) */
.hub-tr__stagger { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-gap-m); align-items: start; padding-bottom: 64px; margin-top: 8px; }
.hub-tr__stagger > *:nth-child(3n+2) { transform: translateY(32px); }
.hub-tr__stagger > *:nth-child(3n) { transform: translateY(64px); }
@media (max-width: 1000px) {
  .hub-tr__stagger { grid-template-columns: repeat(2, 1fr); }
  .hub-tr__stagger > *:nth-child(3n), .hub-tr__stagger > *:nth-child(3n+2) { transform: none; }
  .hub-tr__stagger > *:nth-child(2n) { transform: translateY(32px); }
}
@media (max-width: 680px) {
  .hub-tr__stagger { grid-template-columns: 1fr; padding-bottom: 24px; }
  .hub-tr__stagger > * { transform: none !important; }
  .hub-tr__track > .hub-gcard { flex-basis: 82%; }
}

/* =============================================================================
   TIERED LAYOUT: themes · guide card · library filter grid · testimonial tweaks
   ============================================================================= */
/* テーマ別（reuse .hub-tr carousel） */
.hub-theme + .hub-theme { margin-top: calc(var(--cl-gap-xl) * 1.2); }
.hub-theme__more { flex-shrink: 0; }

/* 中立的な選定ガイド カード */
.hub-guide {
  display: flex; align-items: center; gap: var(--cl-gap-m); text-decoration: none;
  background: rgba(13,20,38,0.7); border: 1px solid rgba(120,150,255,0.18); border-radius: var(--cl-radius-l);
  padding: 26px 30px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); transition: border-color .15s, transform .15s;
}
.hub-guide:hover { border-color: rgba(120,160,255,0.5); transform: translateY(-2px); }
.hub-guide__icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(90,150,255,0.16); color: #7FB0FF; }
.hub-guide__icon i { width: 26px; height: 26px; }
.hub-guide__text { flex: 1; min-width: 0; }
.hub-guide__title { margin: 0; font-size: var(--cl-para-l); font-weight: var(--cl-w-bold); color: #EAF1FF; }
.hub-guide__desc { margin: 6px 0 0; font-size: var(--cl-text-s); line-height: var(--cl-lh-body); color: #9FADCC; }
.hub-guide__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; color: #9FC4FF; font-weight: var(--cl-w-bold); font-size: var(--cl-text-s); }
.hub-guide__cta svg { width: 16px; height: 16px; }

/* ライブラリ（検索＋フィルター） */
.hub-lib__controls { margin: var(--cl-gap-l) 0 var(--cl-gap-l); display: flex; flex-direction: column; gap: 14px; }
/* 一覧の見出し横に置く簡易フィルター（目的＝プルダウン／キーワード＝小さい窓）。
   以前は左下に追従ポップアップを出していたが、記事カードを隠すのでやめた。 */
/* 見出しの下・左寄せ（右端に置くと目線が散るため） */
.hub-lib__tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--cl-gap-m);
}
.hub-lib__selectwrap { position: relative; display: inline-flex; }
.hub-lib__select {
  appearance: none; -webkit-appearance: none;
  background: #fff; border: 1px solid var(--cl-border-soft, #E6E9EE);
  border-radius: var(--cl-radius-full, 999px);
  height: 44px; padding: 0 38px 0 18px; min-width: 168px;
  font-family: var(--cl-font-sans); font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold);
  color: var(--cl-fg-1, #16223A); cursor: pointer; line-height: 1.2;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.hub-lib__select:hover { border-color: rgba(63,123,255,.45); }
.hub-lib__select:focus { outline: none; border-color: var(--cl-blue, #3F7BFF); box-shadow: 0 0 0 3px rgba(63,123,255,.14); }
/* 選択中は「絞り込んでいる」ことが分かるよう青枠にする */
.hub-lib__select.is-on { border-color: var(--cl-blue, #3F7BFF); color: var(--cl-blue-deep, #2C5BD8); background: #F5F9FF; }
.hub-lib__selectwrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
  border-right: 2px solid var(--cl-fg-3, #8FA0C4); border-bottom: 2px solid var(--cl-fg-3, #8FA0C4);
  border-radius: 1px;
}
.hub-lib__searchbar--sm { width: 232px; height: 44px; padding: 0 18px; }
@media (max-width: 900px) {
  .hub-lib__tools { width: 100%; }
  .hub-lib__selectwrap { flex: 1 1 160px; min-width: 0; }
  .hub-lib__select { width: 100%; min-width: 0; }
  .hub-lib__searchbar--sm { flex: 1 1 100%; width: auto; min-width: 0; }
  /* 矢印は行が増えるだけなので省く（スワイプで送れる） */
  .hub-lib__head .hub-tr__arrows { display: none; }
}

/* ヒーロー直下の検索＋絞り込み（ページ冒頭で「探せる場所」だと分かるように）
   検索 → 目的 → コンテンツ形式 の順で、横に広げすぎず中央にまとめる。 */
.hub-hero2__filters { margin-top: 34px; margin-bottom: 8px; }
.hub-hero2__filters .rh-container { max-width: 880px; }
.hub-hero2__filters .hub-lib__controls { margin: 0; gap: 26px; }
.hub-hero2__filters .hub-lib__searchbar { width: 100%; max-width: 560px; margin: 0 auto; }
.hub-hero2__filters .hub-filters__label { text-align: center; }
.hub-hero2__filters .hub-lib__row { justify-content: center; }
@media (max-width: 720px) {
  .hub-hero2__filters { margin-top: 24px; }
}

/* ライブラリ見出し：選択中の条件と件数を出す */
.hub-lib__headtext { min-width: 0; }
.hub-lib__count {
  margin: 6px 0 0; font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold);
  color: var(--cl-fg-3, #8FA0C4); font-variant-numeric: tabular-nums;
}

/* 絞り込みの2ブロック（目的 / コンテンツ形式）— 見出し＋中身 */
.hub-filters__group { display: flex; flex-direction: column; gap: 12px; }
.hub-filters__label {
  font-size: var(--cl-text-s); font-weight: var(--cl-w-bold); letter-spacing: .04em;
  color: var(--cl-fg-2, #46587B);
}
/* 目的から探す：pillではなくカード型（並べて比べて選べるように） */
.hub-purposes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hub-purpose {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: 116px; padding: 14px 10px; text-align: center; cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: #fff; border: 1px solid var(--cl-border-soft, #E6E9EE); border-radius: 16px;
  font-family: var(--cl-font-sans); font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold);
  line-height: 1.35; color: var(--cl-fg-1, #0B1F44);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
}
.hub-purpose__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(63,123,255,.08); color: var(--cl-blue, #3F7BFF);
  transition: background .14s ease, color .14s ease;
}
.hub-purpose__icon i, .hub-purpose__icon svg { width: 20px; height: 20px; }
.hub-purpose__icon { flex: none; }
/* ラベルは最大2行。長い言語でもカードの高さを変えない。 */
.hub-purpose__label {
  flex: 0 0 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; word-break: break-word;
}
/* hover はマウス環境だけ。タッチだとタップ後に hover が残り、選択中に見えてしまう。 */
@media (hover: hover) {
  .hub-purpose:hover { border-color: rgba(63,123,255,.45); background: #F7FAFF; box-shadow: 0 4px 14px rgba(11,31,68,.06); }
}
.hub-purpose.is-active {
  border-color: var(--cl-blue, #3F7BFF); background: #F2F7FF; color: var(--cl-blue-deep, #2C5BD8);
  box-shadow: 0 0 0 1px var(--cl-blue, #3F7BFF) inset;
}
.hub-purpose.is-active .hub-purpose__icon { background: var(--cl-blue, #3F7BFF); color: #fff; }
@media (max-width: 900px) { .hub-purposes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .hub-purposes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hub-purpose { height: 90px; padding: 10px 4px; gap: 6px; font-size: 11px; line-height: 1.3; border-radius: 12px; }
  .hub-purpose__icon { width: 28px; height: 28px; border-radius: 9px; }
  .hub-purpose__icon i, .hub-purpose__icon svg { width: 16px; height: 16px; }
}
.hub-lib__searchbar {
  display: flex; align-items: center; gap: 10px; max-width: 460px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(140,165,255,0.22); border-radius: var(--cl-radius-full); padding: 10px 18px;
}
.hub-lib__searchbar i { width: 18px; height: 18px; color: #8FA0C4; flex-shrink: 0; }
.hub-lib__input { flex: 1; background: transparent; border: none; outline: none; color: #E7EEFF; font-family: var(--cl-font-sans); font-size: var(--cl-text-s); }
.hub-lib__input::placeholder { color: #8494B8; }
.hub-lib__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hub-lib__label { font-size: var(--cl-text-xs); font-weight: var(--cl-w-bold); color: #8FA0C4; margin-right: 4px; min-width: 34px; }
.hub-chip {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(120,150,255,0.2); color: #C7D2EC;
  border-radius: var(--cl-radius-full); padding: 7px 15px; font-family: var(--cl-font-sans); font-size: var(--cl-text-s); cursor: pointer; transition: all .12s;
}
.hub-chip:hover { color: #fff; border-color: rgba(120,160,255,0.5); }
.hub-chip.is-active { background: linear-gradient(180deg,#5B9BFF,#3F7BFF); border-color: transparent; color: #fff; font-weight: var(--cl-w-bold); }
.hub-lib__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cl-gap-m); }
.hub-lib__empty { grid-column: 1 / -1; text-align: center; color: #9FADCC; padding: 40px 0; }
.hub-lib__more { display: flex; justify-content: center; margin-top: var(--cl-gap-l); }
.hub-lib__morebtn {
  background: transparent; border: 1px solid rgba(140,165,255,0.4); color: #DCE6FF; cursor: pointer;
  border-radius: var(--cl-radius-full); padding: 12px 30px; font-family: var(--cl-font-sans); font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s);
}
.hub-lib__morebtn:hover { background: rgba(90,150,255,0.16); border-color: #5B9BFF; color: #fff; }

/* テスティモニアル：G2風の星を廃止、引用符＋事例リンク */
.hub-tm__quotemark { font-family: Georgia, serif; font-size: 40px; line-height: 0.6; color: #5B9BFF; opacity: .7; }
.hub-tm__caselink { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: #9FC4FF; font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s); text-decoration: none; }
.hub-tm__caselink svg { width: 16px; height: 16px; transition: transform .2s; }
.hub-tm:hover .hub-tm__caselink svg { transform: translateX(4px); }

@media (max-width: 1000px) { .hub-lib__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .hub-lib__grid { grid-template-columns: 1fr; }
  .hub-guide { flex-direction: column; align-items: flex-start; }
}

/* Library as a 4-up horizontal carousel (was an 8-card grid) */
.hub-lib__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 12px; margin-bottom: 16px; flex-wrap: wrap; }
.hub-lib__track > .hub-gcard { flex: 0 0 clamp(230px, 22.5%, 300px); scroll-snap-align: start; }
.hub-lib__empty { color: #9FADCC; padding: 40px 4px; }

/* Theme block titles — larger & more prominent */
.hub-theme .hub-sec-head__eyebrow { font-size: var(--cl-text-s); }
.hub-theme .hub-tr__blocktitle {
  font-family: "tt-commons-pro", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  font-size: 30px; line-height: 1.3; letter-spacing: -0.01em; margin-top: 6px;
}
@media (max-width: 680px) { .hub-theme .hub-tr__blocktitle { font-size: 24px; } }

/* Language dropdown (globe in the fixed banner) */
.hub-lang { position: relative; display: inline-flex; }
.hub-lang__menu {
  position: absolute; top: 100%; right: 0; margin-top: 12px; min-width: 210px; z-index: 500;
  background: rgba(12,20,38,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(120,150,255,0.2); border-radius: 14px; padding: 8px;
  box-shadow: 0 22px 54px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.hub-lang__menu::before { content: ""; position: absolute; top: -12px; right: 0; left: 0; height: 12px; }
.hub-lang:hover .hub-lang__menu, .hub-lang.is-open .hub-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hub-lang__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  text-decoration: none; color: #C7D2EC; font-size: var(--cl-text-s); font-weight: var(--cl-w-semibold); transition: background .12s, color .12s;
}
.hub-lang__item:hover { background: rgba(90,150,255,0.15); color: #fff; }
.hub-lang__item.is-current { background: rgba(90,150,255,0.12); color: #fff; }
.hub-lang__flag { font-size: 18px; line-height: 1; }
.hub-lang__name { flex: 1; }
.hub-lang__region { font-size: 11px; color: #8FA0C4; font-weight: var(--cl-w-regular); }

/* テーマから学ぶ — 帯（band）見出し（gradient text + glow） */
.hub-band {
  position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: var(--cl-gap-l);
  padding: 20px 28px; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(90,150,255,0.28), rgba(90,150,255,0) 55%),
    linear-gradient(90deg, rgba(24,40,86,0.9), rgba(12,20,38,0.6));
  border: 1px solid rgba(120,160,255,0.28);
  box-shadow: 0 10px 34px rgba(30,70,180,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hub-band::before { /* left accent bar */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #6EA8FF, #3F7BFF);
}
.hub-band::after { /* faint dot texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(140,175,255,0.10) 1px, transparent 1px); background-size: 18px 18px;
}
.hub-band__icon {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #5B9BFF, #3F7BFF); color: #fff; box-shadow: 0 6px 18px rgba(70,120,255,0.5);
}
.hub-band__icon i { width: 20px; height: 20px; }
.hub-band__title {
  position: relative; z-index: 1; margin: 0;
  font-family: "tt-commons-pro", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  font-size: 28px; font-weight: var(--cl-w-bold); letter-spacing: -0.01em;
  background: linear-gradient(90deg, #FFFFFF 0%, #BFD6FF 45%, #5B9BFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Tighten the themes → library boundary (was ~140px of dark void) */
.hub-dark #rh-themes { padding-bottom: 12px; }
.hub-dark #rh-library { padding-top: 36px; }

/* Theme filter chips (under the テーマから学ぶ band) */
.hub-theme-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -8px 0 var(--cl-gap-l); }

/* Theme sub-rows: blog(small) / eBook(large ~1-up) / case(large ~2-up) */
.hub-theme__sub { margin-top: 24px; }
.hub-theme__subtitle {
  margin: 0 0 12px; font-size: var(--cl-text-m); font-weight: var(--cl-w-bold); color: #C7D2EC;
  display: inline-flex; align-items: center; gap: 8px;
}
.hub-theme__subtitle::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: #5B9BFF; }
.hub-theme__track--ebook > .hub-gcard { flex: 0 0 clamp(320px, 58%, 680px); }
.hub-theme__track--case  > .hub-gcard { flex: 0 0 clamp(300px, 46%, 560px); }
@media (max-width: 680px) {
  .hub-theme__track--ebook > .hub-gcard,
  .hub-theme__track--case  > .hub-gcard { flex-basis: 86%; }
}

/* =============================================================================
   Cursor-reactive motion — tilt + spotlight on hover (ref: crescendo-experts)
   ============================================================================= */
.hub-gcard, .hub-feat, .hub-tm { position: relative; transform-style: preserve-3d; }
/* snappier follow than the default .2s hover transition */
.hub-gcard.is-hot, .hub-feat.is-hot, .hub-tm.is-hot { transition: transform .08s ease-out, box-shadow .2s ease; }
/* cursor-tracking spotlight overlay */
.hub-gcard::after, .hub-feat::after, .hub-tm::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(120,175,255,0.20), rgba(120,175,255,0) 60%);
}
.hub-gcard.is-hot::after, .hub-feat.is-hot::after, .hub-tm.is-hot::after { opacity: 1; }
.hub-tm { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .hub-gcard::after, .hub-feat::after, .hub-tm::after { display: none; }
}

/* eBook・資料 と 導入事例 を横並び（2カラム） */
.hub-theme__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-gap-m); margin-top: 24px; align-items: start; }
.hub-theme__cols .hub-theme__sub { margin-top: 0; min-width: 0; }
/* column-relative card widths: eBook ~1-up, 事例 ~2-up (within its half) */
.hub-theme__track--ebook > .hub-gcard { flex: 0 0 clamp(240px, 90%, 480px); }
.hub-theme__track--case  > .hub-gcard { flex: 0 0 clamp(190px, 47%, 300px); }
@media (max-width: 900px) {
  .hub-theme__cols { grid-template-columns: 1fr; }
  .hub-theme__cols .hub-theme__sub + .hub-theme__sub { margin-top: 24px; }
  .hub-theme__track--ebook > .hub-gcard,
  .hub-theme__track--case  > .hub-gcard { flex-basis: 86%; }
}

/* Clarify the eBook / 導入事例 column boundary — wrap each column in a panel */
.hub-theme__cols { gap: var(--cl-gap-l); }
.hub-theme__cols .hub-theme__sub {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(120,150,255,0.12);
  border-radius: 16px;
  padding: 18px 18px 10px;
}

/* Sub-row header with arrows + peek of the next card (shows there's more) */
.hub-theme__subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hub-theme__subhead .hub-theme__subtitle { margin: 0; }
/* leave a visible peek so it's clear the row scrolls horizontally */
.hub-theme__track--ebook > .hub-gcard { flex: 0 0 clamp(240px, 80%, 460px); }
.hub-theme__track--case  > .hub-gcard { flex: 0 0 clamp(180px, 43%, 280px); }
@media (max-width: 900px) {
  .hub-theme__track--ebook > .hub-gcard,
  .hub-theme__track--case  > .hub-gcard { flex-basis: 82%; }
}

/* Featured "おすすめ記事": blog / 導入記事 blocks below the hero pick */
.hub-feat__cols { margin-top: 0; }

/* =============================================================================
   おすすめ corner — Medallia-style: large featured (left) + 最新情報 list (right)
   ============================================================================= */
.hub-rec2 { display: grid; grid-template-columns: 1.32fr 0.68fr; gap: var(--cl-gap-xl); align-items: start; margin-top: var(--cl-gap-l); }
.hub-rec2__media {
  position: relative; display: block; border-radius: var(--cl-radius-l); overflow: hidden;
  aspect-ratio: 16 / 10; background: #0A1120; border: 1px solid rgba(120,150,255,0.16);
}
.hub-rec2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-rec2__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--cl-gradient-blue); color: #fff; font-size: var(--cl-text-xs); font-weight: var(--cl-w-semibold);
  padding: 6px 13px; border-radius: var(--cl-radius-full); box-shadow: 0 4px 12px rgba(11,31,68,0.35);
}
.hub-rec2__body { padding-top: 18px; }
.hub-rec2__title { margin: 0; font-size: 22px; line-height: 1.45; font-weight: var(--cl-w-bold); letter-spacing: -0.01em; }
.hub-rec2__title a { color: #EAF1FF; text-decoration: none; }
.hub-rec2__title a:hover { color: #fff; }
.hub-rec2__desc { margin: 10px 0 0; font-size: var(--cl-text-m); line-height: var(--cl-lh-body); color: #9FADCC; }
.hub-rec2__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #9FC4FF; font-weight: var(--cl-w-semibold); font-size: var(--cl-text-s); text-decoration: none; }
.hub-rec2__cta svg { width: 18px; height: 18px; transition: transform .2s; }
.hub-rec2__cta:hover svg { transform: translateX(4px); }

.hub-rec2__list { display: flex; flex-direction: column; }
.hub-rec2__listhead { margin: 0 0 4px; font-size: 20px; font-weight: var(--cl-w-bold); color: #EAF1FF; }
.hub-rec2__item {
  display: flex; flex-direction: column; gap: 5px; padding: 16px 0; text-decoration: none;
  border-bottom: 1px solid rgba(120,150,255,0.12);
}
.hub-rec2__item:last-child { border-bottom: none; }
.hub-rec2__ttl { font-size: 15px; line-height: 1.5; font-weight: var(--cl-w-semibold); color: #DCE6FF; transition: color .12s; }
.hub-rec2__item:hover .hub-rec2__ttl { color: #fff; }
.hub-rec2__type { font-size: 11px; font-weight: var(--cl-w-bold); letter-spacing: .04em; color: #7FB0FF; }
/* 最新情報：日付と NEW バッジ */
.hub-rec2__meta { display: inline-flex; align-items: center; gap: 8px; }
.hub-rec2__date { font-size: 12px; font-weight: var(--cl-w-semibold); letter-spacing: .02em; color: #8FA6D8; font-variant-numeric: tabular-nums; }
.hub-rec2__new {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px;
  background: #E5322D; color: #fff; font-size: 10px; font-weight: var(--cl-w-bold); letter-spacing: .06em; line-height: 1;
}
/* 左のメインカード（16:10固定）と右列の高さを揃えるため、右列の2枚は少しだけ
   コンパクトにする。画像をトリミングして伸ばすとカバー画像内の文字が切れるため、
   高さ合わせは「右列を詰める＋左列を広くする」で行う。 */
@media (min-width: 901px) {
  .hub-rec2__cases .hub-gcard__media { aspect-ratio: 16 / 9; }
  .hub-rec2__cases .hub-gcard__body { padding: 14px 14px 16px; gap: 10px; }
  .hub-rec2__cases .hub-gcard__title {
    font-size: 14px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hub-rec2__cases .hub-gcard__cta { font-size: 13px; }
}
@media (max-width: 900px) { .hub-rec2 { grid-template-columns: 1fr; gap: var(--cl-gap-l); } }

/* Library: gap between the two carousel rows (shown when results are many) */
.hub-lib__rows .hub-tr__carousel + .hub-tr__carousel { margin-top: var(--cl-gap-m); }

/* Drag-to-scroll affordance for carousels */
.hub-tr__track { cursor: grab; }
.hub-tr__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.hub-tr__track.is-dragging * { user-select: none; pointer-events: none; }

/* 最新情報 の下に置く 導入事例カード(2枚) */
.hub-rec2__cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-gap-m); margin-top: 20px; }
@media (max-width: 520px) { .hub-rec2__cases { grid-template-columns: 1fr; } }

/* =============================================================================
   LIGHT THEME (white base) — overrides for components authored with dark colors
   Applies when the page is NOT .hub-dark (default). Keeps the blue newsletter
   banner; everything else reads on white like cresclab.com/jp.
   ============================================================================= */
/* おすすめ corner (rec2) */
.hub-rec2__title a { color: var(--cl-fg-1); }
.hub-rec2__title a:hover { color: var(--cl-blue); }
.hub-rec2__desc { color: var(--cl-fg-3); }
.hub-rec2__media { background: var(--cl-bg-card); border-color: var(--cl-border-soft); }
.hub-rec2__cta { color: var(--cl-blue); }
.hub-rec2__listhead { color: var(--cl-fg-1); }
.hub-rec2__ttl { color: var(--cl-fg-1); }
.hub-rec2__item { border-bottom-color: var(--cl-border-soft); }
.hub-rec2__item:hover .hub-rec2__ttl { color: var(--cl-blue); }
.hub-rec2__type { color: var(--cl-blue); }
.hub-rec2__date { color: var(--cl-fg-3); }

/* Library: search + filter chips */
.hub-lib__label { color: var(--cl-fg-3); }
.hub-lib__searchbar { background: #fff; border-color: var(--cl-border-soft); }
.hub-lib__searchbar i { color: var(--cl-fg-4); }
.hub-lib__input { color: var(--cl-fg-1); }
.hub-lib__input::placeholder { color: var(--cl-fg-4); }
.hub-chip { background: #fff; border-color: var(--cl-border-soft); color: var(--cl-fg-2); }
.hub-chip:hover { color: var(--cl-blue); border-color: var(--cl-blue); }
.hub-lib__empty { color: var(--cl-fg-3); }

/* Carousel arrows */
.hub-tr__arrow { border-color: var(--cl-border); background: #fff; color: var(--cl-fg-2); box-shadow: var(--cl-shadow-card); }
.hub-tr__arrow:hover { background: var(--cl-blue); color: #fff; border-color: var(--cl-blue); }

/* Sub-row subtitle (if used) */
.hub-theme__subtitle { color: var(--cl-fg-1); }

/* Testimonials */
.hub-tm__caselink { color: var(--cl-blue); }
.hub-tm__quotemark { color: var(--cl-blue); }

/* Card cursor-spotlight: softer on white */
.hub-gcard::after, .hub-feat::after, .hub-tm::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(80,144,255,0.12), rgba(80,144,255,0) 60%);
}

/* Newsletter banner stays blue — make its actions read clearly on blue */
.hub-newsbar__btn { background: #fff; color: var(--cl-blue-deepest); }
.hub-newsbar__btn:hover { background: #EAF1FF; }
.hub-newsbar__cta { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.65); color: #fff; box-shadow: none; }
.hub-newsbar__cta:hover { background: #fff; color: var(--cl-blue-deepest); border-color: #fff; }
.hub-newsbar__globe { color: rgba(255,255,255,0.9); }
.hub-newsbar__globe:hover { color: #fff; }

/* Language dropdown → light */
.hub-lang__menu { background: #fff; border-color: var(--cl-border-soft); box-shadow: var(--cl-shadow-soft); }
.hub-lang__item { color: var(--cl-fg-2); }
.hub-lang__item:hover, .hub-lang__item.is-current { background: var(--cl-blue-10); color: var(--cl-fg-1); }
.hub-lang__region { color: var(--cl-fg-4); }

/* Footer sits on white — hairline separator */
.footer-stage { border-top: 1px solid var(--cl-border-soft); }

/* Light theme: tighten oversized section spacing (base .section = 128px each) */
.rh-section { padding-top: 56px; padding-bottom: 56px; }
#rh-featured { padding-top: 32px; }
.rh-hero { padding-bottom: 8px; }

/* Scroll reveal: blocks rise/fade into view (only when motion is enabled) */
.rh-anim .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.rh-anim .reveal-up.is-in { opacity: 1; transform: none; }

/* =============================================================================
   Fixed site header — mirrors the www.cresclab.com header (logo + nav with
   dropdowns + language globe + contact CTA). Content comes from DATA.siteNav.
   ============================================================================= */
/* 本家 www.cresclab.com の実測値に合わせる（1280px時）：
   .navigation padding 24px 24px 0／バーはコンテンツ幅で中央（999px）・高さ72・
   padding 0 12px 0 24px・radius 1600px・shadow rgba(80,144,255,.1) 0 2px 32px／
   ロゴ160x27／リンク 16px/400/#222A36・padding 16px 12px・radius 20px・高さ48／
   ロゴ〜nav〜actions の間隔 24px／globe 48x48／CTA 142x48 */
.hub-newsbar--site { background: transparent; color: inherit; padding: 24px 24px 0; }
.hub-sh {
  width: fit-content; max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 24px; min-height: 72px;
  background: #fff; border-radius: 1600px; padding: 0 12px 0 24px;
  box-shadow: 0 2px 32px rgba(80,144,255,.1);
  /* 本家と同じ tt-commons-pro（Adobe Fonts）＋ 日本語は Noto Sans JP */
  font-family: "tt-commons-pro", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
}
.hub-sh__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.hub-sh__brand img { height: 27px; width: auto; display: block; }
.hub-sh__nav { display: flex; align-items: center; gap: 0; margin-left: 0; }
.hub-sh__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 20px;
  font-size: 16px; font-weight: 400; color: #222A36; text-decoration: none; line-height: 1;
  background: none; border: 0; cursor: pointer; white-space: nowrap; font-family: inherit; transition: color .12s, background .12s;
}
.hub-sh__link:hover { color: var(--cl-blue); background: rgba(80,144,255,.08); }
.hub-sh__caret { width: 16px; height: 16px; opacity: .65; transition: transform .16s ease; }
.hub-sh__menu:hover .hub-sh__caret, .hub-sh__menu.is-open .hub-sh__caret { transform: rotate(180deg); }
.hub-sh__spark { width: 16px; height: 16px; color: var(--cl-blue); flex: none; }
.hub-sh__menu { position: static; }   /* パネルはヘッダー幅に合わせて広がる */
.hub-sh__panel {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; z-index: 500;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.hub-sh__panel::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.hub-sh__menu:hover .hub-sh__panel, .hub-sh__menu.is-open .hub-sh__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hub-sh__panelinner {
  display: grid; grid-template-columns: 1.05fr 1fr 1.05fr; gap: 26px 56px;
  background: #fff; border-radius: 28px; padding: 40px 56px 46px;
  box-shadow: 0 28px 70px rgba(11,31,68,.16);
}
.hub-sh__col { min-width: 0; }
.hub-sh__caption {
  margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--cl-border-soft, #E6E9EE);
  font-size: 15px; font-weight: var(--cl-w-semibold); letter-spacing: .01em; color: #8C97A8;
}
.hub-sh__collist { display: flex; flex-direction: column; }
/* 製品／おすすめ：太字の名称＋説明文 */
.hub-sh__prod { display: block; text-decoration: none; padding: 0 0 30px; }
.hub-sh__prod:last-child { padding-bottom: 0; }
.hub-sh__prodname {
  display: block; font-size: 19px; line-height: 1.5; font-weight: var(--cl-w-bold);
  color: var(--cl-fg-1, #16223A); transition: color .12s;
}
.hub-sh__prod:hover .hub-sh__prodname { color: var(--cl-blue); }
.hub-sh__proddesc { display: block; margin-top: 10px; font-size: 15px; line-height: 1.75; color: #8C97A8; }
/* チャネル等：アイコン＋ラベルの行 */
.hub-sh__row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0; text-decoration: none;
  font-size: 16px; font-weight: var(--cl-w-semibold); color: var(--cl-fg-1, #16223A); transition: color .12s;
}
.hub-sh__row:hover { color: var(--cl-blue); }
.hub-sh__icon { width: 22px; height: 22px; object-fit: contain; flex: none; }
.hub-sh__colcta, .hub-sh__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  font-size: 16px; font-weight: var(--cl-w-semibold); color: var(--cl-fg-1, #16223A); text-decoration: none;
}
.hub-sh__more { margin-top: 14px; }
.hub-sh__colcta:hover, .hub-sh__prod:hover .hub-sh__more, .hub-sh__feat:hover .hub-sh__more { color: var(--cl-blue); }
.hub-sh__arrow { font-size: 17px; line-height: 1; transform: translateY(-1px); }
/* Featured：画像カード */
.hub-sh__feat { display: block; text-decoration: none; }
.hub-sh__featimg {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: var(--cl-bg-card, #EEF1F5);
}
.hub-sh__featimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-sh__featlogo {
  position: absolute; inset: auto auto 12px 14px; width: 96px; height: auto; max-height: 28px;
  object-fit: contain; object-position: left bottom;
}
.hub-sh__feattitle {
  display: block; margin-top: 16px; font-size: 16px; line-height: 1.6;
  font-weight: var(--cl-w-bold); color: var(--cl-fg-1, #16223A);
}
.hub-sh__feat:hover .hub-sh__feattitle { color: var(--cl-blue); }
.hub-sh__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hub-sh__globe { background: none; border: 0; cursor: pointer; color: #6B7280; width: 48px; height: 48px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.hub-sh__globe:hover { color: var(--cl-blue); background: rgba(80,144,255,.08); }
.hub-sh__globe svg { width: 22px; height: 22px; }
.hub-sh__cta {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 23px;
  border-radius: 999px;
  background: var(--cl-gradient-blue, linear-gradient(180deg,#5090FF,#3F7BFF)); color: #fff;
  font-size: 16px; font-weight: var(--cl-w-bold); text-decoration: none; white-space: nowrap;
}
.hub-sh__cta:hover { filter: brightness(1.06); color: #fff; }
.hub-sh__navcta {
  display: none; align-items: center; justify-content: center; margin-top: 10px;
  background: var(--cl-gradient-blue, linear-gradient(180deg,#5B9BFF,#3F7BFF)); color: #fff;
  border-radius: var(--cl-radius-full, 999px); padding: 12px 20px; text-decoration: none;
  font-family: var(--cl-font-sans); font-weight: var(--cl-w-bold); font-size: 15px;
}
.hub-sh__burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 10px 8px; }
.hub-sh__burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #3D4A5C; }
/* the shared language dropdown sits on white here, so re-skin it light */
.hub-sh .hub-lang__menu { background: #fff; border-color: var(--cl-border-soft, #E6E9EE); box-shadow: 0 24px 60px rgba(11,31,68,.16); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hub-sh .hub-lang__item { color: #3D4A5C; }
.hub-sh .hub-lang__item:hover, .hub-sh .hub-lang__item.is-current { background: rgba(80,144,255,.10); color: var(--cl-blue); }
.hub-sh .hub-lang__region { color: #94A3B8; }

@media (max-width: 1240px) { .hub-sh { padding-left: 18px; gap: 8px; } .hub-sh__link { padding: 10px 9px; font-size: 14px; } .hub-sh__cta { padding: 11px 18px; font-size: 14px; } }
@media (max-width: 980px) {
  /* 本家サイト（www.cresclab.com）のモバイルヘッダーに合わせる：
     ピル型・ロゴ＋ハンバーガーのみ・タブレット72px / スマホ44px。
     CTAはバーから外し、メニュー内（.hub-sh__navcta）に置く。 */
  .hub-newsbar--site { padding: 24px 24px 0; }
  /* モバイル/タブレットのバーは本家と同じく横幅いっぱい（デスクトップの fit-content を解除） */
  .hub-sh { width: auto; border-radius: 999px; padding: 0 12px 0 24px; min-height: 72px; flex-wrap: wrap; }
  .hub-sh__brand img { height: 27px; }
  .hub-sh__actions > .hub-sh__cta { display: none; }
  .hub-sh__navcta { display: inline-flex; }
  .hub-sh.is-nav-open { border-radius: 22px; padding-bottom: 14px; }
  .hub-sh__burger { display: inline-flex; }
  .hub-sh__nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 6px 0 2px; }
  .hub-sh.is-nav-open .hub-sh__nav { display: flex; }
  .hub-sh__link { border-radius: 10px; }
  .hub-sh__trigger { justify-content: space-between; }   /* label left, caret right */
  .hub-sh__menu:hover .hub-sh__panel { opacity: 0; visibility: hidden; }
  .hub-sh__menu.is-open .hub-sh__panel { position: static; opacity: 1; visibility: visible; transform: none; margin: 0; }
  .hub-sh__menu:not(.is-open) .hub-sh__panel { display: none; }
  .hub-sh__panelinner { grid-template-columns: 1fr; gap: 18px; border-radius: 0; box-shadow: none; padding: 6px 0 12px 12px; }
  .hub-sh__caption { margin-bottom: 12px; padding-bottom: 8px; font-size: 13px; }
  .hub-sh__prod { padding-bottom: 18px; }
  .hub-sh__prodname { font-size: 16px; }
  .hub-sh__proddesc { font-size: 13px; margin-top: 6px; }
  .hub-sh__row { font-size: 15px; padding: 7px 0; }
  .hub-sh__col--feature { display: none; }   /* モバイルでは画像カードは省く */
}
@media (max-width: 560px) {
  .hub-newsbar--site { padding: 14px 18px 0; }
  .hub-sh { padding: 0 7px 0 14px; min-height: 44px; gap: 6px; }
  .hub-sh__brand img { height: 22px; }
  .hub-sh .hub-lang__trigger { width: 32px; height: 32px; padding: 0; }
  .hub-sh__burger { padding: 5px 7px; }
  .hub-sh.is-nav-open { padding-bottom: 12px; }
}

/* =============================================================================
   モバイル（〜560px）: 本家 www.cresclab.com をスマホで見たときの文字サイズに合わせ、
   絞り込みセクションを圧縮する。
   実測（375px）: h1 25.92/33.7/500・本文 14.4/23.04・h2 20.8/27.04/600
   ============================================================================= */
@media (max-width: 560px) {
  .hub-hero2__title { font-size: 26px; line-height: 1.3; font-weight: 500; letter-spacing: 0; }
  .hub-hero2__sub { font-size: 14.4px; line-height: 1.6; }
  .hub-section-title { font-size: 20.8px; line-height: 1.3; font-weight: 600; }
  .hub-sec-head__eyebrow { font-size: 12px; }
  .hub-gcard__title { font-size: 14.4px; line-height: 1.6; }
  .hub-gcard__cta, .hub-lib__count, .hub-filters__label { font-size: 12.8px; }
  .hub-rec2__title { font-size: 18px; }
  .hub-rec2__desc, .hub-rec2__ttl { font-size: 14.4px; line-height: 1.6; }
  .hub-faq__q { font-size: 15px; }
  /* 検索入力だけは16px未満にしない（iOSでフォーカス時に自動ズームするため） */
  .hub-lib__input { font-size: 16px; }

  /* --- 絞り込みを圧縮 --- */
  .rh-hero { padding-top: 28px; padding-bottom: 16px; }
  .hub-hero2__filters { margin-top: 20px; margin-bottom: 0; }
  .hub-hero2__filters .hub-lib__controls { gap: 16px; }
  .hub-filters__group { gap: 8px; }
  .hub-lib__searchbar { padding: 9px 16px; }
  .hub-purposes { gap: 8px; }
  .hub-purpose { height: 72px; padding: 8px 4px; gap: 4px; font-size: 11px; }
  .hub-purpose__icon { width: 24px; height: 24px; border-radius: 8px; }
  .hub-purpose__icon i, .hub-purpose__icon svg { width: 14px; height: 14px; }
  /* コンテンツ形式は折り返さず1行の横スクロールにして、縦の占有を1/3にする */
  .hub-hero2__filters .hub-lib__row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start; gap: 6px; padding-bottom: 2px; scrollbar-width: none;
  }
  .hub-hero2__filters .hub-lib__row::-webkit-scrollbar { display: none; }
  .hub-hero2__filters .hub-chip { flex: none; white-space: nowrap; font-size: 12.8px; padding: 7px 13px; }
}