/* =========================================================
   Shannon LLC — page-specific styles (hero, services, etc.)
   ========================================================= */

/* ----------------- Reveal on scroll (subtle fade + rise) ----------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .8s cubic-bezier(.2, .6, .2, 1),
    transform .8s cubic-bezier(.2, .6, .2, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* When JS is disabled, show everything — no need to scroll-trigger */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(80px, 10vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 72px 72px; }
}

/* Hero particle layer (particles.js canvas) */

.hero__inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.hero__headline {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(44px, 8vw, 104px);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 32px;
  text-wrap: balance;
}
.hero__headline .line { display: block; }
.hero__headline .grad-text { display: inline; }

.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* スマホでもヒーローのボタンは横並び。高さは他の大きいボタンと同じ（.btn--lg の 56px）。
   幅は文字に合わせ、入り切らない狭い端末では 2 段に折り返して横幅いっぱいにする */
@media (max-width: 720px) {
  .hero__ctas, .page-head__cta { gap: var(--space-2); flex-wrap: wrap; }
  .hero__ctas .btn, .page-head__cta .btn { flex: 1 1 auto; padding: 0 var(--space-4); font-size: var(--fs-sm); }
}

/* ===================================================================
   SERVICES (2-up)
   =================================================================== */
.services-foot {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.services {
  /* 6-col base so 5 cards lay out as 3 + 2 with the bottom row centered.
     Each card spans 2 cols → 3 cards = 6 cols (full row);
     2 cards in last row also span 2 cols each (4 cols), and the first
     of those is offset to start at column 2 to center it. */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
/* カードのグラデーション枠（ホバーで左から引かれる）。
   使うカードに .card-outline を足す。個別のカードで ::after を書き写さない。 */
.card-outline { position: relative; }
.card-outline::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad);
  -webkit-mask: linear-gradient(var(--bg) 0 0) content-box, linear-gradient(var(--bg) 0 0);
          mask: linear-gradient(var(--bg) 0 0) content-box, linear-gradient(var(--bg) 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.22,.61,.36,1);
}
.card-outline:hover::after { clip-path: inset(0 0 0 0); }

.service-card { grid-column: span 2; }
.services > .service-card:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 1080px) {
  .services { grid-template-columns: 1fr 1fr; }
  .services > .service-card { grid-column: auto; }
  .services > .service-card:nth-child(4) { grid-column: auto; }
  /* Last (5th) card spans both columns so it doesn't sit alone */
  .services > .service-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .services { grid-template-columns: 1fr; }
  .services > .service-card:last-child { grid-column: auto; }

  /* 採用ページの募集職種だけは、スマホで横スクロールにする。
     縦に積むと1枚が画面いっぱいになり、他に何を募集しているかが見えない。
     画面の端まで送れるよう、コンテナの余白ぶん外へ広げてから戻す。 */
  #openings .services {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad));
    /* overflow で上下も切れるので、ホバー枠と影のぶん上下に余白を持つ */
    margin-block: -12px;
    padding: 12px var(--pad) 16px;
    scroll-padding-inline: var(--pad); /* スナップしても左右の余白を保つ */
  }
  #openings .services > .service-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

/* 日本語の見出しは既定だとどこでも改行され、「インフラエンジ／ニア」のように
   語の途中で割れる。対応ブラウザでは文節で折り返す（未対応でも従来どおり）。 */
.section-title, .service-card h3 { word-break: auto-phrase; }

/* 採用ページの募集職種。サービス紹介と同じ大きさだと、職種が増えるほど
   1枚が画面を占めて一覧性がなくなる。ここだけ詰める。 */
#openings .service-card { padding: 28px 26px 24px; }
#openings .service-card__num { margin-bottom: 14px; }
#openings .service-card h3 { font-size: var(--fs-lg); margin: 0 0 10px; }
#openings .service-card p { font-size: var(--fs-base); line-height: 1.75; margin: 0 0 16px; }
#openings .service-card ul { margin: 0 0 16px; font-size: var(--fs-sm); }
#openings .service-card li { padding: 8px 0; gap: 10px; align-items: flex-start; }

.service-card {
  position: relative;
  isolation: isolate;
  padding: 48px 44px 44px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  /* As a link */
  color: inherit;
  text-decoration: none;
}
.service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17,19,24,.14);
  box-shadow: 0 30px 60px -30px rgba(17,19,24,.22);
}
/* Gradient outline frame slides in from the left on hover (whole-card affordance) */
/* カード全体がリンクなので、中の .tlink は見た目の目印だけ（.tlink--bottom で下端に寄せる） */

.service-card__num {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  letter-spacing: var(--ls-wide);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.service-card__num::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--grad);
  display: inline-block;
}

.service-card h3 {
  font-size: 28px;
  line-height: 1.35;
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: var(--ls-snug);
}
.service-card p {
  color: var(--muted);
  font-size: var(--fs-base);
  margin: 0 0 32px;
  line-height: 1.85;
}
.service-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  font-size: var(--fs-base);
  color: var(--ink-2);
  border-top: 1px solid var(--line-soft, #ececec);
}
.service-card li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft, #ececec);
}
.service-card li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  flex: 0 0 5px;
  opacity: .4;
}

/* 募集終了バッジ（募集職種の一覧カード・個別ページ head で共用） */
.job-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-jp);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ink-3);
  color: var(--on-accent);
}
.service-card .job-badge { margin: 0 0 18px; }
.page-head .job-badge { margin: 0 0 20px; }

/* 募集終了カードは減光し、hover のアクセント枠・浮きを止める（クリックは可） */
.service-card.is-closed { opacity: .6; }
.service-card.is-closed:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.service-card.is-closed:hover::after { clip-path: inset(0 100% 0 0); }

/* ===================================================================
   REASONS
   =================================================================== */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 560px) { .reasons { grid-template-columns: 1fr; } }

.reason {
  background: var(--bg);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* グラデーションの数字（導入の流れ、理由、事例のステップで共通）。
   大きさだけ使う側で変える。背景クリップを書き写さない。 */
.gradnum {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
}

.reason__num { font-size: 48px; }
.reason__num::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 14px;
  background: var(--grad);
}
.reason h3 {
  font-size: var(--fs-md);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}
.reason p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.85;
  margin: 0;
}

/* ===================================================================
   TECH STACK — tag chips
   =================================================================== */
.tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
a.tag:hover { border-color: rgba(17,19,24,.18); background: var(--bg-alt, #f7f7f8); }

/* ===================================================================
   NEWS TICKER — single-line latest news between hero and services
   =================================================================== */
.news-ticker {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.news-ticker__inner {
  display: flex;
  align-items: center;
  padding: 18px 0;
  font-size: var(--fs-sm);
}
.news-ticker__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.news-ticker__link:hover { color: var(--ink-3); }
.news-ticker__link:hover .news-ticker__arrow { transform: translateX(3px); }
.news-ticker__date {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: var(--ls-wide);
}
.news-ticker__cat {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  background: var(--bg);
  white-space: nowrap;
}
.news-ticker__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.news-ticker__link:hover .news-ticker__title {
  text-decoration-color: currentColor;
}
.news-ticker__arrow {
  flex: 0 0 auto;
  transition: transform .2s ease;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .news-ticker { padding: 0 16px; }
  .news-ticker__inner { padding: 12px 0; gap: 10px; font-size: var(--fs-sm); }
  .news-ticker__link { gap: 10px; }
  .news-ticker__date { font-size: var(--fs-xs); }
  .news-ticker__cat { display: none; }
  .news-ticker__title { font-size: var(--fs-sm); }
  .news-ticker__arrow { width: 12px; height: 12px; }
}

/* ===================================================================
   SUB-SERVICES — Detailed sub-offerings on a service page (e.g. Infra)
   =================================================================== */
.sub-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.sub-services > .sub-service:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .sub-services { grid-template-columns: 1fr; }
  .sub-services > .sub-service:nth-last-child(1):nth-child(odd) { grid-column: auto; }
}
.sub-service {
  position: relative;
  isolation: isolate;
  padding: 28px 28px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.sub-service--clickable { cursor: pointer; }
.sub-service--clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(17,19,24,.14);
  box-shadow: 0 30px 60px -30px rgba(17,19,24,.22);
}
.sub-service > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.sub-service__num {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
}
.sub-service__cat {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
  text-transform: uppercase;
}
.sub-service header h3 {
  flex: 1 1 100%;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 4px 0 0;
}
.sub-service > p {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--muted);
  margin: 0;
}
.sub-service__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
@media (max-width: 520px) { .sub-service__list { grid-template-columns: 1fr; } }
.sub-service__list li {
  position: relative;
  padding-left: 14px;
  line-height: 1.7;
}
.sub-service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .35;
}
.sub-service__use {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ===================================================================
   PLAN CARDS — Pricing tiers on service pages
   =================================================================== */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.plan-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .plan-grid, .plan-grid--2 { grid-template-columns: 1fr; } }
.plan {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.plan:hover {
  border-color: rgba(17,19,24,.16);
  box-shadow: 0 18px 40px -28px rgba(17,19,24,.18);
}
.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 48px -28px rgba(91,108,255,.4);
}
.plan__tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
}
.plan--featured .plan__tag {
  border-color: transparent;
  color: var(--on-accent);
  background: var(--blue);
}
.plan h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.plan li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft, #ececec);
}
.plan li:last-child { border-bottom: 0; }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* Track holds the list duplicated, so -50% loops seamlessly */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Respect reduced motion */
.flow-row {
  display: grid;
  grid-template-columns: 160px 1fr 200px;
  gap: 40px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
@media (max-width: 860px) {
  .flow-row { grid-template-columns: 72px 1fr; gap: 20px; padding: 24px 0; }
}

/* ===================================================================
   FAQ
   =================================================================== */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item.is-open { border-color: #dadce2; }
.faq-q:hover { background: var(--bg-alt); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink);
  font-family: var(--font-jp);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-q .icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  position: relative;
}
.faq-q .icon::before,
.faq-q .icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}
.faq-q .icon::before { width: 12px; height: 1.5px; }
.faq-q .icon::after  { width: 1.5px; height: 12px; }
.faq-item.is-open .icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
  /* 実際の高さで開閉する（max-height の推定値だと動きが遅れて見える） */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
/* 折りたたむ箱には余白を持たせない（余白があると閉じても高さが残る）。余白は中の .a-inner に置く */
.faq-a > .faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a-inner > .a-inner {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.85;
}

/* ===================================================================
   PAGE HEADER (subpages)
   =================================================================== */
.page-head {
  padding: clamp(80px, 10vw, 120px) 0 clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17,19,24,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,19,24,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 55%, transparent 100%);
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 10% 20%, rgba(0,212,228,.05), transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 30%, rgba(255,61,154,.05), transparent 60%);
}
.page-head__breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 16px;
  letter-spacing: var(--ls-wide);
}
.page-head__breadcrumb a:hover { color: var(--ink); }
.page-head__breadcrumb span { margin: 0 8px; opacity: .5; }
.page-head__breadcrumb span.page-head__breadcrumb__current {
  display: inline-block;
  max-width: min(60ch, 70%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  opacity: 1;
  margin: 0;
}
@media (max-width: 640px) {
  .page-head__breadcrumb span.page-head__breadcrumb__current { max-width: 55%; }
}
.page-head h1 {
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  text-wrap: balance;
  word-break: auto-phrase;
}
@media (max-width: 720px) {
  .page-head h1 { font-size: 28px; line-height: 1.3; }
}
/* hero.image を持つ LP: 画像を全面背景にしたダークヒーロー（ヘッダーは data-nav-dark で白反転） */
.page-head--cover {
  min-height: clamp(440px, 52vh, 600px);
  display: flex;
  align-items: center;
  padding: clamp(140px, 14vw, 188px) 0 clamp(56px, 7vw, 80px);
  border-bottom: 0;
  color: var(--on-accent);
  background: var(--ink);
}
@media (max-width: 720px) { .page-head--cover { padding-top: 80px; min-height: 420px; } }
.page-head--cover::after { display: none; }
.page-head--cover > .container { position: relative; z-index: 1; width: 100%; }
.page-head__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.page-head__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,15,30,.60) 0%, rgba(0,15,30,.42) 45%, rgba(0,15,30,.85) 100%); }
.page-head--cover h1, .page-head--cover h1 .grad-text, .page-head--cover > .container > p { color: var(--on-accent); }
.page-head--cover .page-head__breadcrumb, .page-head--cover .page-head__breadcrumb a { color: rgba(255,255,255,.72); }
.page-head--cover .page-head__breadcrumb a:hover { color: var(--on-accent); }
.page-head--cover .page-head__breadcrumb span { color: rgba(255,255,255,.5); }
.page-head--cover .page-head__breadcrumb__current { color: rgba(255,255,255,.9); }

.page-head p {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 640px;
  margin: 0;
  line-height: 1.85;
}
@media (max-width: 720px) {
  .page-head p { font-size: var(--fs-sm); line-height: 1.75; }
}

/* ===================================================================
   Pain points list (subpages)
   =================================================================== */
.pain-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 56px;
  row-gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  counter-reset: pain;
}
@media (max-width: 720px) { .pain-list { grid-template-columns: 1fr; column-gap: 0; } }
.pain {
  counter-increment: pain;
  position: relative;
  padding: 28px 0 28px 76px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-base);
  line-height: 1.85;
}
.pain::before {
  content: counter(pain, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 24px;
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
}

/* === Services hub — editorial category sections ====================== */
.services-cat-section {
  position: relative;
  /* 透過スティッキーヘッダー(88px)の下にアンカー先が潜らないようオフセット。
     トップの「インフラ構築」「エンジニアリングエージェンシー」から #infrastructure / #agency で飛ぶ。 */
  scroll-margin-top: 96px;
}
.services-cat__works[id] { scroll-margin-top: 96px; }
.services-cat {
  display: grid;
  gap: 40px;
}
/* 関連事例の横スクロールが grid の列幅を広げてスマホで横にはみ出さないように、子の最小幅を 0 にする */
.services-cat > * { min-width: 0; }
.services-cat__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: flex-start;
  max-width: 880px;
}
.services-cat__num {
  font-family: var(--font-ui);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.services-cat__headtext .eyebrow { margin-bottom: 12px; }
.services-cat__title {
  font-family: var(--font-jp);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin: 0 0 16px;
}
.services-cat__lead {
  font-size: var(--fs-base);
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0;
  max-width: 640px;
}

.services-cat__body {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
  gap: 56px;
  padding-top: 8px;
}
@media (max-width: 860px) {
  .services-cat__body { grid-template-columns: 1fr; gap: 36px; }
  .services-cat__head { grid-template-columns: 1fr; gap: 16px; }
}

/* カテゴリ配下の関連事例（プロダクトの警備サイン/規程ログ等） */
.services-cat__works {
  margin-top: 56px;
}
@media (max-width: 860px) {
  .services-cat__works { margin-top: 40px; }
}

.services-cat__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.services-cat__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--ink-2);
}
.services-cat__list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2, #eef0f3);
  position: relative;
  padding-left: 18px;
}
.services-cat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 1px;
  background: var(--ink-3);
  opacity: .5;
}
.services-cat__list li:last-child { border-bottom: 0; }

.services-cat__col .btn--ghost {
  align-self: flex-start;
}

/* Deep LP cards within a category */
.services-lp-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.services-lp {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.services-lp:hover {
  transform: translateY(-2px);
  border-color: rgba(17,19,24,.14);
  box-shadow: 0 30px 60px -30px rgba(17,19,24,.22);
}
.services-lp__label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
  margin-bottom: 10px;
}
.services-lp h4 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.45;
}
.services-lp p {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 14px;
}

/* === News article body — link styling ================================ */
.news-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(91,108,255,.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
  /* 長い URL をリンクテキストにしても SP 幅で右に突き抜けないよう折り返す */
  overflow-wrap: anywhere;
}
.news-body a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
/* 本文中のボタンは通常リンクの下線を継がず、中央に置く */
.news-body .btn,
.news-body .btn:hover { text-decoration: none; }
.news-body .news-body__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 40px; }

/* === News article body — table ======================================= */
/* Markdown の表。thead/tbody を display:block の中に置くと匿名の table 箱に
   まとめて包まれるので、列は揃ったまま狭い画面では表ごと横スクロールになる。 */
.news-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.news-body th,
.news-body td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.news-body th {
  background: var(--bg-alt, #f6f8fa);
  font-weight: var(--fw-heavy);
  color: var(--ink);
}

/* === News article — back-to-list ===================================== */
.news-back {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

/* === Recruit page — restructured layouts ============================= */

/* H3 subsection title (within an H2 section) */
.subsection-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin: 48px 0 16px;
}

/* feature-list — lightweight 2-column dl/dt/dd grid (no card chrome) */
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 0;
  margin: 36px 0 0;
  padding: 0;
}
.feature-list > div {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.feature-list > div:nth-last-child(-n+2) { /* keep bottom border on last row */ }
.feature-list > div:last-child,
.feature-list > div:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}
.feature-list dt {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: var(--ls-snug);
}
.feature-list dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .feature-list { grid-template-columns: 1fr; column-gap: 0; }
}

/* 入社後の役割 — シンプルな2項目レイアウト */
.recruit-onboard {
  display: grid;
  gap: 24px;
  margin: 32px 0 48px;
}
.recruit-onboard__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.recruit-onboard__item:last-child { border-bottom: 1px solid var(--line); }
.recruit-onboard__num {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.recruit-onboard__item h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0 0 8px;
  color: var(--ink);
}
.recruit-onboard__item p {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}

/* 技術スタック方針 */
.recruit-stack {
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-alt, #f7f7f8);
}
.recruit-stack h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  margin: 0 0 12px;
}
.recruit-stack p {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
}

/* 働き方・環境 — コンパクトな4列カードグリッド */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
}
@media (max-width: 1024px) { .perk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .perk-grid { grid-template-columns: 1fr; } }
.perk {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.perk h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  margin: 0 0 6px;
}
.perk p {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-3);
  margin: 0;
}

/* ===================================================================
   ABOUT PAGE
   =================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
}
.about-grid dt,
.about-grid dd { padding: 20px 24px; border-bottom: 1px solid var(--line); margin: 0; font-size: var(--fs-sm); line-height: 1.7; }
.about-grid dt {
  background: var(--bg-alt);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.about-grid dd { color: var(--ink-3); }
.about-grid__note { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); }
.about-grid__list { list-style: none; margin: 0; padding: 0; }
.about-grid__list li { position: relative; padding-left: 16px; }
.about-grid__list li + li { margin-top: 6px; }
.about-grid__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 1px; background: var(--accent); }
.about-grid dt:last-of-type,
.about-grid dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid dt { border-right: 0; }
}

/* 役員プロフィール — 経歴ボタン + モーダル */
.about-grid__officers { display: flex; flex-direction: column; gap: 12px; }
.about-grid__officers .officer {
  display: grid;
  grid-template-columns: 7.5em 1fr auto;
  align-items: center;
  column-gap: 12px;
  line-height: 1.5;
}
.about-grid__officers .officer__name { min-width: 0; }
.bio-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .2s ease, color .2s ease;
}
.bio-btn:hover { border-color: var(--accent); color: var(--ink); }

.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bio-modal.is-open { display: flex; }
.bio-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 10, 20, .55); }
.bio-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 20px;
  padding: 40px 36px 36px;
}
.bio-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.bio-modal__close:hover { color: var(--ink); }
.bio-modal__role {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.bio-modal__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 20px;
}
.bio-modal__name span {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-wide);
  color: var(--muted);
  margin-left: 10px;
}
.bio-modal__text {
  font-size: var(--fs-base);
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0;
}
.contact-side .row .k { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.contact-side .row .v { font-size: var(--fs-base); color: var(--ink); font-weight: var(--fw-medium); word-break: break-all; }

/* ===================================================================
   reCAPTCHA — hide floating badge (disclaimer is shown inside the form)
   =================================================================== */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ===================================================================
   CONTACT INTRO / NOTICE — copy blocks above the CF7 form
   =================================================================== */
.contact-intro {
  margin: 0 0 56px;
}
.contact-intro p {
  font-size: var(--fs-base);
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.contact-intro p:last-child { margin-bottom: 0; }

/* ===================================================================
   CONTACT FORM 7 — match site typography / inputs
   =================================================================== */
.wpcf7 {
  font-family: var(--font-jp);
}
.wpcf7-form > p {
  margin: 0 0 22px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  line-height: 1.6;
}
.wpcf7-form > p:last-of-type { margin-bottom: 0; }
.wpcf7-form label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-wide);
  margin-bottom: 6px;
}
.wpcf7-form-control-wrap {
  display: block;
  margin-top: 4px;
}
input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea.wpcf7-form-control,
select.wpcf7-form-control {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea.wpcf7-form-control:focus,
select.wpcf7-form-control:focus {
  outline: none;
  border-color: rgba(91,108,255,.55);
  box-shadow: 0 0 0 4px rgba(91,108,255,.10);
}
.wpcf7-form textarea.wpcf7-form-control {
  height: 120px;
  min-height: 80px;
  resize: vertical;
}
.wpcf7-form-control[type="checkbox"],
.wpcf7-form-control[type="radio"] {
  margin-right: 6px;
  accent-color: var(--blue);
}
.wpcf7-list-item {
  display: inline-block;
  margin: 0 16px 0 0;
  font-size: var(--fs-sm);
}

/* Required marker — small red badge */
.wpcf7-form .wpcf7-required-marker,
.wpcf7-form span.required,
.wpcf7-form .required {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  line-height: 1.4;
  color: var(--on-accent);
  background: #e25060;
  border-radius: 4px;
  text-indent: 0;
}

/* Group label (radio header) */
.wpcf7-form .form-group-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-wide);
  margin-bottom: 10px !important;
}

/* Radio group as card-style choice list */
.wpcf7-form .contact-radio-group {
  margin: 0 0 22px !important;
}
.wpcf7-form .contact-radio-group .wpcf7-radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .wpcf7-form .contact-radio-group .wpcf7-radio { grid-template-columns: 1fr; }
}
.wpcf7-form .contact-radio-group .wpcf7-list-item {
  display: block;
  margin: 0;
  padding: 0;
}
.wpcf7-form .contact-radio-group .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  margin: 0;
}
.wpcf7-form .contact-radio-group .wpcf7-list-item label:hover {
  border-color: rgba(91,108,255,.4);
  background: rgba(91,108,255,.03);
  color: var(--ink);
}
.wpcf7-form .contact-radio-group input[type="radio"] {
  margin: 0;
  flex: 0 0 auto;
}
.wpcf7-form .contact-radio-group input[type="radio"]:checked + .wpcf7-list-item-label,
.wpcf7-form .contact-radio-group label:has(input[type="radio"]:checked) {
  border-color: rgba(91,108,255,.55);
  background: rgba(91,108,255,.06);
  color: var(--ink);
}

/* Privacy consent — large clickable card */
.wpcf7-form .contact-consent {
  margin: 32px 0 12px !important;
  padding: 0;
}
.wpcf7-form .contact-consent .wpcf7-list-item {
  display: block;
  margin: 0;
  padding: 0;
}
.wpcf7-form .contact-consent .wpcf7-list-item > label {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.wpcf7-form .contact-consent .wpcf7-list-item > label:hover {
  border-color: rgba(91,108,255,.4);
  background: rgba(91,108,255,.03);
}
.wpcf7-form .contact-consent .wpcf7-list-item > label:has(input[type="checkbox"]:checked) {
  border-color: rgba(91,108,255,.55);
  background: rgba(91,108,255,.06);
  box-shadow: 0 0 0 3px rgba(91,108,255,.08);
}
.wpcf7-form .contact-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.wpcf7-form .contact-consent .wpcf7-list-item-label {
  flex: 1 1 auto;
  line-height: 1.5;
}
.wpcf7-form .contact-consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-bold);
}
.wpcf7-form .contact-consent a:hover { color: var(--blue); }

/* 送信ボタン */
.wpcf7-form p:has(input.wpcf7-submit) {
  text-align: center;
  margin-top: 32px;
  position: relative;
}
/* 見た目は styles.css の .btn / .btn--primary / .btn--lg と共通。ここは送信ボタン固有の分だけ */
.wpcf7-submit { min-width: 220px; border: 0; cursor: pointer; }
.wpcf7-submit:active { transform: translateY(0); }
.wpcf7-submit[disabled] { opacity: .6; cursor: not-allowed; }

/* Error / response messages */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--danger);
  font-weight: var(--fw-medium);
}
.wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 16px !important;
  font-size: var(--fs-sm);
  line-height: 1.6;
  border-radius: 10px;
  border-width: 1px !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  background: #fef2f3;
  border-color: #f0c2c8 !important;
  color: #b13040;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: #eef9f1;
  border-color: #cfeacf !important;
  color: #1f7a3f;
}

/* Spinner — positioned absolutely so it doesn't offset the centered submit button */
.wpcf7-spinner {
  position: absolute;
  top: 50%;
  margin-left: 12px;
  transform: translateY(-50%);
}

/* ===================================================================
   PLATFORM TABSET — keep only the JS-referenced selectors
   (.tabset__tab and .tabset__panel are queried by app.js)
   =================================================================== */
.tabset__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  position: relative;
}
.tabset__tab:hover { background: var(--bg-muted); color: var(--ink); }
.tabset__tab.is-active {
  background: linear-gradient(135deg, rgba(0,212,228,.08), rgba(91,108,255,.08) 50%, rgba(255,61,154,.08));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(91,108,255,.18);
}
.tabset__tab.is-active::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 2px;
  background: var(--grad);
  border-radius: var(--radius);
}
.tabset__panel {
  display: none;
  animation: tabFade .3s ease both;
}
.tabset__panel.is-active { display: block; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================================
   CASES — list grid & detail
   =================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip:hover { background: var(--bg-muted); color: var(--ink); }
.filter-chip.is-active {
  background: var(--ink);
  color: var(--on-accent);
  border-color: var(--ink);
}
.filter-chip__n {
  font-size: var(--fs-2xs);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(17,19,24,.08);
  color: inherit;
}
.filter-chip.is-active .filter-chip__n { background: rgba(255,255,255,.18); }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  --accent: var(--blue);
}
/* 大きさ・余白・文字はインサイトのカード（.insight-card）に揃える */
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 15, 30, .08);
  border-color: rgba(91,108,255,.4);
}
/* 枠は .card-outline と共通。画像に重ねるので位置と重なり順だけ変える */
.case-card::after { inset: 0; z-index: 3; }
.case-card.is-hidden { display: none; }
.case-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-muted);
  position: relative;
}
.case-card__img svg,
.case-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-card__img img {
  transition: transform .35s ease;
}
.case-card:hover .case-card__img img { transform: scale(1.03); }
.case-card__body {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.case-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
}
.case-card__industry {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  font-weight: var(--fw-bold);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.case-card__title {
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-card__summary {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* タグは 1 行だけ（折り返すとカードの高さがそろわない）。
   入りきらないタグは次の行へ送り、行ごと隠す（途中で切れて見えないように） */
.case-card__tags {
  display: flex; flex-wrap: wrap; gap: 32px 6px;
  max-height: 32px;
  overflow: hidden;
  margin-top: auto;
}
.case-card__tags .tag {
  font-size: var(--fs-2xs);
  padding: 3px 9px;
}
.case-card:hover .case-card__arrow {
  background: var(--ink);
  color: var(--on-accent);
  transform: translateX(2px);
}

@media (max-width: 980px) {
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cases-grid { grid-template-columns: 1fr; }
}

/* Works / 支援実績 — horizontal-scroll carousel (home + services) */
.works-carousel { position: relative; }
.works-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 18px;
}
.works-nav__btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.works-nav__btn:hover { background: var(--grad) border-box; color: var(--on-accent); border-color: transparent; }
.works-nav__btn[disabled] { opacity: .28; cursor: default; }
.works-nav__btn[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--line); }
.works-scroll {
  display: flex;
  gap: 24px;
  margin-top: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* bleed to the right edge of the viewport so cards run off-screen */
  padding: 4px calc(50vw - 50%) 20px 0;
  margin-right: calc(50% - 50vw);
  scrollbar-width: none;
}
.works-scroll > .case-card,
.works-scroll > .insight-card,
.works-scroll > .rel-card,
.works-scroll > .ptile {
  flex: 0 0 clamp(280px, 30vw, 360px);
  scroll-snap-align: start;
}
/* 関連サービス（related ブロック）の横スクロール用テキストカード */
.rel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rel-card:hover { border-color: rgba(91,108,255,.4); transform: translateY(-2px); box-shadow: var(--shadow); }
.rel-card__cat {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.rel-card__title { font-size: var(--fs-h3); font-weight: var(--fw-heavy); line-height: 1.5; }
.rel-card__body { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2); flex: 1 1 auto; }
/* 横スクロールのバーは出さない（送りボタンとスワイプで動かす） */
.works-scroll::-webkit-scrollbar, #openings .services::-webkit-scrollbar { display: none; }
.works-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ===================================================================
   NEWS LIST (お知らせ一覧)
   =================================================================== */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.news-list > li {
  border-bottom: 1px solid var(--line);
}
.news-card {
  display: grid;
  grid-template-columns: 110px 96px 1fr 24px;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
  position: relative;
}
.news-card:hover { background: var(--bg-alt, #f7f7f8); }
.news-card:hover .news-card__title { color: var(--ink); text-decoration-color: currentColor; }
.news-card::after { display: none; }
.news-card__date {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
}
.news-card__cat {
  justify-self: start;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  background: var(--bg);
  white-space: nowrap;
}
.news-card__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
@media (max-width: 720px) {
  .news-card {
    grid-template-columns: 1fr 16px;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 18px 4px;
  }
  .news-card__date { grid-column: 1 / 2; grid-row: 1; font-size: var(--fs-xs); }
  .news-card__cat { grid-column: 1 / 2; grid-row: 1; justify-self: end; }
  .news-card__title { grid-column: 1 / 2; grid-row: 2; font-size: var(--fs-base); }
  .news-card::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ===================================================================
   CASE DETAIL — long-form article layout
   =================================================================== */
.case-article {
  --accent: var(--blue);
  background: var(--bg);
}
.case-article__header {
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 48px);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.case-article__header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17,19,24,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,19,24,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 55%, transparent 100%);
}
.case-article__header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 10% 20%, rgba(0,212,228,.06), transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 30%, rgba(255,61,154,.06), transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.case-article__breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
  margin-bottom: 24px;
}
.case-article__breadcrumb a { color: var(--ink-3); text-decoration: none; }
.case-article__breadcrumb a:hover { color: var(--ink); }
.case-article__breadcrumb span { margin: 0 8px; opacity: .55; }
.case-article__industry {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.case-article__title {
  font-family: var(--font-jp);
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.case-article__client {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--ink-2);
  margin: 0 0 20px;
  letter-spacing: var(--ls-wide);
}
.case-article__lead {
  font-size: var(--fs-md);
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 820px;
}
.case-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.case-article__body {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.case-article__section {
  margin-bottom: 64px;
}
.case-article__section:last-of-type { margin-bottom: 0; }
.case-article__section h2 {
  font-family: var(--font-jp);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.case-article__section > p {
  font-size: var(--fs-md);
  line-height: 2;
  color: var(--ink-2);
  margin: 0;
}

/* Approach steps — numbered ordered list */
.case-article__steps {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  border-top: 1px solid var(--line);
}
.case-article__steps > li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.case-article__step-num { font-size: 32px; }
.case-article__step-text {
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--ink-2);
}

/* KSF as plain definition list with row dividers */
.case-article__ksf { margin: 0; }
.case-article__ksf > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2, #eef0f3);
}
.case-article__ksf > div:first-child { padding-top: 0; }
.case-article__ksf > div:last-child { border-bottom: 0; padding-bottom: 0; }
.case-article__ksf dt {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 6px;
}
.case-article__ksf dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink-2);
}

/* Inline CTA — minimal, centered, separated by a thin top rule */
.case-article__inline-cta {
  margin-top: 64px;
  padding: 36px 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.case-article__inline-cta h3 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.case-article__inline-cta p {
  margin: 0 0 24px;
  font-size: var(--fs-base);
  color: var(--muted);
}

/* Before / After list */
.ba-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.ba-list__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.ba-list__row:last-child { border-bottom: 0; }
.ba-list__k {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ba-list__values {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.ba-list__before {
  font-size: var(--fs-base);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(17,19,24,.18);
  text-underline-offset: 4px;
}
.ba-list__arrow {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  opacity: .55;
}
.ba-list__after {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
}
@media (max-width: 720px) {
  .ba-list__row { grid-template-columns: 1fr; gap: 8px; padding: 20px 22px; }
  .ba-list__after { font-size: var(--fs-h3); }
}

/* ===================================================================
   PAGINATION (the_posts_pagination / paginate_links)
   =================================================================== */
.pagination,
nav.pagination,
.navigation.pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}
.pagination .nav-links,
.navigation.pagination { margin-top: 36px; }
.navigation.pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-numbers.current {
  border-color: var(--ink);
  color: var(--on-accent);
  background: var(--ink);
}
.page-numbers.dots { border: 0; background: transparent; }
.page-numbers.prev,
.page-numbers.next {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}
.pagination .screen-reader-text,
.navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* ===================================================================
   APPROACH LIST — numbered ordered list (service pages)
   =================================================================== */
.approach-list {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  border-top: 1px solid var(--line);
}
.approach-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink-2);
}
.approach-list__num { font-size: 32px; }
@media (max-width: 720px) {
  .approach-list li { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .approach-list__num { font-size: var(--fs-xl); }
}

/* ===================================================================
   COMPARISON GRID (Products LPs)
   =================================================================== */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col {
  border: 1px solid rgba(17,19,24,.08);
  border-radius: 14px;
  padding: 24px 22px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.compare-col--win {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
  color: var(--ink);
}
.compare-col--win .compare-col__tag {
  color: var(--ink-3);
  background: transparent;
}
.compare-col--win h3 { color: var(--ink); }
.compare-col--win ul { color: var(--ink-2); }
.compare-col--win ul li::before {
  content: "✓";
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 1;
  font-weight: var(--fw-heavy);
}
.compare-col__tag {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  opacity: .75;
}
.compare-col h3 {
  font-size: var(--fs-h3);
  margin: 6px 0 14px;
  font-weight: var(--fw-bold);
  line-height: 1.45;
}
.compare-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.compare-col ul li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}
.compare-col ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  opacity: .65;
}
.compare-col--win ul li::before { content: "✓"; opacity: .9; }

/* ===================================================================
   GUARANTEE BAR (above final CTA)
   =================================================================== */
.guarantee-bar {
  border: 1px solid rgba(17,19,24,.08);
  border-radius: 16px;
  padding: 28px 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  background: var(--bg);
  margin-top: 24px;
}
@media (max-width: 860px) { .guarantee-bar { grid-template-columns: 1fr; padding: 22px; } }
.guarantee-bar__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guarantee-bar__num {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: var(--fw-bold);
}
.guarantee-bar__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.guarantee-bar__desc {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.7;
}
@keyframes speed-spin { to { transform: rotate(360deg); } }

/* ===================================================================
   INSIGHTS (実務ガイド記事) — お知らせのリストと差別化した画像カードグリッド
   =================================================================== */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
  margin-top: 8px;
}
@media (max-width: 980px) {
  .insight-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .insight-grid { grid-template-columns: 1fr; gap: 28px; }
}
.insight-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* 枠は .card-outline と共通。画像に重ねるので内側に描く（overflow: hidden で外側は切れる） */
.insight-card::after { inset: 0; z-index: 3; }
.insight-card:hover {
  border-color: rgba(91,108,255,.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 15, 30, .08);
}
.insight-card__media {
  position: relative;
  overflow: hidden;
  background: #eef1f4;
}
/* aspect-ratioはコンテナではなくimg自体に持たせる。
   flexカード内でコンテナのratioが効かず画像が素の縦横比で伸びるため */
.insight-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.insight-card:hover .insight-card__media img { transform: scale(1.03); }
.insight-card__media-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(120deg, #e9edf2 0%, #f6f8fa 60%, #eef1f4 100%);
}
.insight-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 18px;
  flex: 1;
}
.insight-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  line-height: 1.55;
  margin: 0;
}
.insight-card__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-card__meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--muted-2);
}
.insight-card__more {
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-wide);
}
.insight-card__more::after { content: " →"; }

/* ===================================================================
   INSIGHT ARTICLE BODY — 長文実務ガイド用のタイポグラフィ
   =================================================================== */
.insight-body {
  max-width: 760px;
  font-size: var(--fs-base);
  line-height: 2.0;
  color: var(--ink-2);
}
.insight-body > * + * { margin-top: 1.2em; }
.insight-body h2 {
  margin-top: 2.6em;
  margin-bottom: .9em;
  padding-left: 14px;
  border-left: 3px solid var(--ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  line-height: 1.5;
  color: var(--ink);
}
.insight-body h3 {
  margin-top: 2em;
  margin-bottom: .6em;
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  color: var(--ink);
}
.insight-body ul,
.insight-body ol { padding-left: 1.5em; }
.insight-body li { margin: .45em 0; }
.insight-body li::marker { color: var(--muted-2); }
.insight-body strong { color: var(--ink); }
.insight-body blockquote {
  margin: 1.4em 0;
  padding: 14px 18px;
  background: var(--bg-alt, #f6f8fa);
  border-left: 3px solid var(--line);
  font-size: var(--fs-base);
}
/* 表: thead/tbody は display:block の table の中で 1 つの匿名 table 箱に包まれるので列は揃う。
   tbody だけ display:table にすると thead と分かれて列がずれる (2026-09-22 に発覚)。
   セルは折り返し、幅が足りない場合だけ表ごと横スクロール */
.insight-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.insight-body th,
.insight-body td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  min-width: 9em;
}
.insight-body th {
  background: var(--bg-alt, #f6f8fa);
  font-weight: var(--fw-heavy);
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .insight-body { font-size: var(--fs-base); }
  .insight-body h2 { font-size: var(--fs-h3); }
  .insight-body h3 { font-size: var(--fs-base); }
}

/* ===================================================================
   DOWNLOADS — 資料表紙をアイキャッチにしたカードグリッド
   =================================================================== */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 8px;
}
@media (max-width: 960px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dl-grid { grid-template-columns: 1fr; gap: 24px; } }
.dl-card {
  scroll-margin-top: 96px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dl-card:hover {
  border-color: rgba(91,108,255,.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 15, 30, .08);
}
.dl-card__cover {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--line);
  background: #f6f8fa;
}
.dl-card__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.dl-card__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--on-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: 4px 10px;
}
.dl-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 16px;
  flex: 1;
}
.dl-card__body h4 { font-size: var(--fs-base); font-weight: var(--fw-heavy); line-height: 1.5; margin: 0; }
.dl-card__body p { font-size: var(--fs-xs); line-height: 1.7; color: var(--muted); margin: 0; }
.dl-card__cta {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-wide);
}
.dl-card__cta .arrow { flex: none; }

/* ===================================================================
   HISTORY（沿革） — 中央の線に沿って吹き出しを左右交互に並べる
   =================================================================== */
.history {
  list-style: none;
  margin: 0;
  padding: 8px 0 24px;
  position: relative;
  display: grid;
  gap: 28px;
}
.history::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--cyan), var(--blue) 50%, var(--magenta));
  opacity: .55;
}
.history__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
}
.history__item::after { /* 線上の点 */
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  box-sizing: border-box; /* 擬似要素は * の border-box が効かないので明示（枠込みで 14px にして線の真上に） */
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 4px var(--bg);
}
.history__date {
  grid-column: 2;
  padding-top: 14px;
  font-family: var(--font-ui);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.history__y { font-size: 26px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--ink); line-height: 1; }
.history__m { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.history__bubble {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 16px 40px -24px rgba(17,19,24,.25);
}
.history__bubble::before { /* 吹き出しのしっぽ（線の側に向く） */
  content: "";
  position: absolute;
  top: 22px;
  right: -9px;
  width: 16px; height: 16px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.history__item--right .history__date { grid-column: 1; justify-content: flex-end; }
.history__item--right .history__bubble { grid-column: 2; }
.history__item--right .history__bubble::before { right: auto; left: -9px; transform: rotate(-135deg); }
.history__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: 1.55; color: var(--ink); }
.history__body { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-3); }
.history__note { margin: 40px 0 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.history__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .history::before { left: 14px; }
  .history { gap: 22px; }
  .history__item, .history__item--right .history__date, .history__item--right .history__bubble { grid-template-columns: 1fr; grid-column: 1; }
  .history__item { padding-left: 44px; }
  .history__item::after { left: 14px; top: 18px; width: 12px; height: 12px; margin-left: -6px; }
  .history__date { grid-column: 1; grid-row: 1; padding-top: 0; justify-content: flex-start; margin-bottom: 10px; }
  .history__item--right .history__date { justify-content: flex-start; }
  .history__bubble, .history__item--right .history__bubble { grid-column: 1; grid-row: 2; padding: 18px 20px; }
  .history__bubble::before, .history__item--right .history__bubble::before { right: auto; left: -9px; top: 18px; transform: rotate(-135deg); }
  .history__y { font-size: var(--fs-lg); }
}

/* ===================================================================
   MVV — Mission / Vision statement blocks (philosophy page)
   Cinematic line-by-line mask reveal on a white ground, with a slow
   brand-gradient aura drifting behind the type.
   =================================================================== */
.mvv {
  position: relative;
  overflow: hidden;
  padding-top: clamp(80px, 11vw, 150px);
  padding-bottom: clamp(80px, 11vw, 150px);
}
.mvv .container { position: relative; z-index: 1; }

/* Soft brand aura — the only "motion background" on the page */
.mvv__aura {
  position: absolute;
  left: 22%;
  top: 50%;
  width: min(980px, 120%);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: var(--grad);
  opacity: .08;
  filter: blur(80px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: mvv-drift 22s ease-in-out infinite alternate;
}
.mvv--vision .mvv__aura { left: 78%; animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes mvv-drift {
  from { transform: translate(-54%, -56%) scale(1); }
  to   { transform: translate(-46%, -44%) scale(1.14); }
}

/* Statement — masked lines that rise into place, one after another */
.mvv__statement {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-heavy);
  font-size: clamp(28px, 6.4vw, 72px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mvv__line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.mvv__line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1000ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--l, 0ms);
  will-change: transform;
}
.mvv.is-in .mvv__line > span { transform: translate3d(0, 0, 0); }
.mvv__line:nth-child(2) > span { --l: 150ms; }
.mvv__line:nth-child(3) > span { --l: 300ms; }

/* Eyebrow + supporting line fade in around the statement */
.mvv .eyebrow,
.mvv__sub {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.mvv.is-in .eyebrow { opacity: 1; transform: none; }
.mvv.is-in .mvv__sub { opacity: 1; transform: none; transition-delay: 650ms; }
.mvv__sub {
  margin: 26px 0 0;
  max-width: 44em;
  font-size: var(--fs-md);
  line-height: 1.95;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .mvv__sub { font-size: var(--fs-base); }
  .mvv__aura { filter: blur(56px); }
}

/* Mission / Vision illustrations — unDraw art, recoloured to the brand blue.
   They sit in the empty half of the statement block on wide screens so the
   type keeps its full size, and drop below the text on narrow ones. */
.mvv__art {
  position: absolute;
  right: var(--pad);
  top: 50%;
  width: min(32%, 340px);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease 400ms;
  animation: mvv-float 9s ease-in-out infinite;
}
.mvv.is-in .mvv__art { opacity: 1; }
.mvv__art--vision { width: min(30%, 330px); animation-delay: -3s; }
@keyframes mvv-float {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 8px)); }
}
@media (max-width: 900px) {
  .mvv__art,
  .mvv__art--vision {
    position: static;
    width: min(300px, 70%);
    margin: 40px auto 0;
    display: block;
    transform: none;
    animation: none;
  }
}

/* ===================================================================
   CORE VALUES — four illustrated values, no card chrome
   =================================================================== */
.core-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 64px);
}
.core-value { text-align: center; }
.core-value__art {
  display: block;
  width: 100%;
  max-width: 190px;
  height: clamp(96px, 11vw, 124px);
  object-fit: contain;
  margin: 0 auto 22px;
}
.core-value__num {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: .18em;
  color: var(--muted);
}
.core-value__en {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 8px;
}
.core-value h3 {
  margin: 7px 0 0;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}
@media (max-width: 860px) {
  .core-values { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}
@media (max-width: 420px) {
  .core-values { grid-template-columns: 1fr; gap: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .mvv__art { opacity: 1 !important; transition: none !important; }
  .mvv__art { animation: none !important; }
}
.no-js .mvv__art { opacity: 1; }

/* No JS / reduced motion: land everything in its final position */
.no-js .mvv__line > span,
.no-js .mvv .eyebrow,
.no-js .mvv__sub { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mvv__line > span,
  .mvv .eyebrow,
  .mvv__sub {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mvv__aura { animation: none; }
}

/* === Strategy page ==================================================== */
.strategy p { line-height: 2; }
.strategy p + p { margin-top: 28px; }

/* === 自社プロダクトの個別ページ（/products/<slug>/） ===============
   部品は .prodp-*。値は :root のトークン（--space-*, --fs-*, --radius-*, --line, --bg-*）だけを使い、色や px を直書きしない。
   構成: ヒーロー（2 列）→ 3 つの特長 → 動作イメージ → 主な機能（3 行）→ 料金 → 導入の流れ → FAQ → 関連記事 → 相談 */
.prodp-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--card-pad); }
.prodp-card h3, .prodp-card h2 { font-size: var(--fs-h3); font-weight: var(--fw-heavy); line-height: 1.45; margin: 0 0 var(--space-2); color: var(--ink); }
.prodp-card p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-2); }
.prodp .section { padding: clamp(56px, 8vw, 96px) 0; }
.prodp .section-title { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.prodp .section-lead { margin-bottom: var(--space-6); font-size: var(--fs-base); }

/* ヒーロー */
.prodp-hero { padding: var(--space-5) 0 var(--space-8); background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg) 100%); }
.prodp-hero .page-head__breadcrumb { margin-bottom: var(--space-6); }
.prodp-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.prodp-hero__brand { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.prodp-hero__logo { height: 32px; width: auto; }
.prodp-hero__mark { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--ink); }
.prodp-hero__mark img { height: 24px; width: auto; }
.prodp-hero__tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: var(--space-1) var(--space-3); background: var(--bg); }
.prodp-hero__catch { font-size: var(--fs-h1); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0 0 var(--space-4); color: var(--ink); text-wrap: balance; }
.prodp-hero__lead { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 var(--space-6); }
.prodp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prodp-hero__media { min-width: 0; }
.prodp-hero__frame { background: var(--bg); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.prodp-hero__chrome { display: flex; gap: 6px; padding: 10px 14px; background: var(--bg-muted); border-bottom: 1px solid var(--line); }
.prodp-hero__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.prodp-hero__frame img { width: 100%; height: auto; }

/* 3 つの特長 */
.prodp-highlights { padding: 0 0 clamp(48px, 6vw, 80px); }
.prodp-hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.prodp-hl h2 { font-size: var(--fs-lg); }

/* 動作イメージ */
.pdemo { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-muted); border: 1px solid var(--line); }
.pdemo--demo { height: clamp(420px, 44vw, 600px); }
.pdemo--demo .sgd { padding-right: clamp(20px, 5vw, 72px); justify-content: center; gap: clamp(28px, 5vw, 96px); }
.pdemo--demo .sgd--web { padding: 0; font-size: clamp(9px, .95vw, 14px); }
.pdemo--card { padding: clamp(16px, 3vw, 40px); }
/* 管理画面のデモ（.pd）は cqw で寸法を決め absolute で敷くので、16:10 の枠を作ってその中に置く */
.pdemo--card__frame { position: relative; aspect-ratio: 16 / 10; max-width: 960px; margin: 0 auto; container-type: inline-size; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--bg); }
.pdemo--card__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pdemo--video video { width: 100%; height: auto; max-height: 600px; object-fit: contain; margin: 0 auto; }
.prodp-mcp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--muted); }
.prodp-mcp code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; overflow-wrap: anywhere; }

/* 主な機能（home.css の .prow を使う） */
.prodp-features .prow__card { padding: 0; background: transparent; box-shadow: none; aspect-ratio: auto; }
/* 製品の画面は 16:10 に切り抜かず、撮ったままの縦横で全体を見せる */
.prodp-features .prow__card img { height: auto; object-fit: contain; }
/* 縦長の画面（サイネージ・スマホ）は高さで止め、中央に置く */
.prodp-features .prow__card img { max-height: 520px; width: auto; max-width: 100%; margin-inline: auto; }
.prodp-feature__title { font-size: clamp(20px, 2vw, 24px); font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); line-height: 1.35; margin: 0 0 var(--space-3); color: var(--ink); }
.prodp-points { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.prodp-points li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2); }
.prodp-points li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prodp-shot { background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); line-height: 0; }
.prodp-shot img { width: 100%; height: auto; }

/* 料金 */
.prodp-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.prodp-price--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.prodp-price__name { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); letter-spacing: var(--ls-wider); }
.prodp-price__price { font-family: var(--font-ui); font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--fw-heavy); letter-spacing: var(--ls-snug); margin: var(--space-2) 0; color: var(--ink); }
.prodp-price__note { font-size: var(--fs-sm) !important; }
.prodp-note { margin: var(--space-5) 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
.prodp-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 導入の流れ */
.prodp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.prodp-step { position: relative; }
.prodp-step + .prodp-step::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--space-4)); width: var(--space-4); height: 1px; background: var(--line); }

/* FAQ・関連記事・相談 */
.prodp-faq { max-width: none; }

@media (max-width: 1000px) { .prodp-steps { grid-template-columns: repeat(2, 1fr); } .prodp-step + .prodp-step::before { display: none; } }
@media (max-width: 860px) {
  .prodp .section { padding: 48px 0; }
  .prodp-hero { padding: var(--space-4) 0 var(--space-7); }
  .prodp-hero .page-head__breadcrumb { margin-bottom: var(--space-5); }
  .prodp-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .prodp-hero__lead { font-size: var(--fs-base); }
  .prodp-hero__ctas { flex-direction: column; }
  .prodp-hero__ctas .btn { width: 100%; }
  .prodp-hl-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .prodp-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .prodp-step + .prodp-step::before { top: calc(-1 * var(--space-3)); left: 50%; width: 1px; height: var(--space-3); }
  /* デモはスマホでは縦積み: 上にエージェント／管理画面、下にスマホ画面 */
  .pdemo--demo { height: auto; }
  .pdemo--demo .sgd { position: relative; inset: auto; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--space-5) var(--space-4) var(--space-6); gap: var(--space-5); font-size: 9px; }
  .pdemo--demo .sgd__side { display: block; order: -1; width: min(100%, 30em); height: 21em; }
  .pdemo--demo .sgd__phone { transform: none; }
  .pdemo--demo .sgd--web { font-size: 6.2px; padding: var(--space-5) 0; }
}

/* サービスページの「取り扱いプロダクト」。中身は ProductOpsList.astro が products.ts から出す */
.services-cat__col--lps > .tlink { margin-top: var(--space-5); }

/* 節の見出しと「一覧を見る」ボタンを横に並べる（トップの .home-head と同じ並び）。狭い画面では下に回る */
.head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5) var(--space-7); flex-wrap: wrap; }
.head-split .section-title { margin-bottom: 0; }
.head-split + .section-lead, .head-split + div > .section-lead { margin-top: var(--space-4); }
.head-split--sub { align-items: baseline; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.head-split--sub .services-cat__sub { margin: 0; padding: 0; border: 0; }
.head-split .section-lead { margin-bottom: 0; }
.head-split > .btn { flex: none; }