/* =============================================================================
   HiA — clean, Framer-independent stylesheet
   Hand-authored design system. Fonts: Inter Display (UI) + Geist Mono (labels).
   ========================================================================== */

/* ----- Design tokens ----------------------------------------------------- */
:root {
  /* color */
  --ink: #1a1a1a;            /* primary text on light */
  --ink-70: rgba(26,26,26,.7);
  --ink-55: rgba(26,26,26,.55);
  --ink-40: rgba(26,26,26,.4);
  --ink-15: rgba(26,26,26,.12);
  --ink-08: rgba(26,26,26,.07);
  --paper: #ffffff;          /* white sections */
  --mist:  #f0f0f0;          /* light-grey sections */
  --void:  #0a0a0a;          /* dark sections */
  --panel: #161616;          /* cards on dark */
  --panel-2: #1e1e1e;
  --snow: #ffffff;           /* text on dark */
  --snow-70: rgba(255,255,255,.7);
  --snow-55: rgba(255,255,255,.55);
  --snow-40: rgba(255,255,255,.4);
  --snow-15: rgba(255,255,255,.12);
  --snow-08: rgba(255,255,255,.07);

  /* type */
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, "Noto Sans JP", monospace;

  /* layout */
  --container: 1288px;
  --pad: clamp(20px, 4vw, 40px);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --section-y: clamp(72px, 9vw, 140px);
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  line-break: strict;   /* no line starts with ー or small kana */
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input { font: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }

/* ----- Layout helpers ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.section--dark { background: var(--void); color: var(--snow); }
.section--mist { background: var(--mist); }

/* eyebrow: mono label, optionally with a leading dot + connector line */
.eyebrow {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section--dark .eyebrow { color: var(--snow-70); }
.eyebrow::before {
  content: "";
  width: 22px; height: 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid currentColor;
  opacity: .5;
  flex: none;
}
.section-head { max-width: 640px; }
.section-head .eyebrow { margin-bottom: 22px; }
.h-lead { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.03em; }
.muted { color: var(--ink-55); }
.section--dark .muted { color: var(--snow-55); }

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 22px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--ink);
  color: var(--snow);
  transition: transform .2s ease, opacity .2s ease;
}
.btn__label { padding-right: 6px; }
.btn__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--snow);
  color: var(--ink);
  display: grid; place-items: center;
  flex: none;
}
.btn__icon svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn--light { background: var(--snow); color: var(--ink); }
.btn--light .btn__icon { background: var(--ink); color: var(--snow); }

/* circular icon button (article cards, carousels) */
.icon-btn {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--snow);
  display: grid; place-items: center; flex: none;
  transition: transform .2s ease;
}
.icon-btn:not([data-scroll]):hover { transform: rotate(45deg); }  /* card ↗ arrows only — not carousel prev/next */
.icon-btn svg { width: 18px; height: 18px; }

/* =============================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding: 18px 0;
  pointer-events: none;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-pill { pointer-events: auto; }
.nav-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-pill);
  padding: 8px 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.brand-mark {
  width: 54px; height: 30px; border-radius: var(--r-pill);
  border: 2.5px solid var(--ink); flex: none;
  display: grid; place-items: center;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 15px; color: var(--ink-70);
  transition: background .2s ease, color .2s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--ink-08); }
.nav-toggle { display: none; pointer-events: auto; }

/* mobile menu */
.mobile-menu { display: none; }
body.menu-open { overflow: hidden; }  /* 背面スクロールをロック（メニュー展開中） */
.nav-toggle { text-decoration: none; }  /* ハンバーガーは <a> なので下線を消す */

/* =============================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--mist);
  padding-bottom: clamp(120px, 16vw, 240px);
  margin-top: -84px;          /* sit under the transparent sticky header */
  padding-top: calc(clamp(40px, 8vw, 90px) + 84px);
  overflow: hidden;
}
/* large full-bleed hero background photo (retro TV in a field) */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(240,240,240,.92) 0%, rgba(240,240,240,.5) 24%, rgba(232,232,232,.12) 48%,
    rgba(10,10,10,.28) 72%, rgba(10,10,10,.92) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.hero h1 {
  font-size: clamp(32px, 4.6vw, 56px);   /* fits 「金融業務をテクノロジーで」 on one line */
  font-weight: 800;                       /* ExtraBold */
  letter-spacing: -.04em;
  line-height: 1.28;
  color: #3a4231;                         /* deep moss — harmonizes with the grass/field photo */
}

/* product card top-right */
.hero-card {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.10);
}
.hero-card__media { border-radius: 20px; overflow: hidden; aspect-ratio: 832/464; background: var(--void); }
.hero-card__media img, .hero-card__media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-card__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 6px; }
.hero-card__row strong { font-weight: 500; }
.hero-card__row .tag { font-family: var(--mono); font-size: 11px; color: var(--ink-55); text-transform: uppercase; }

/* =============================================================================
   Marquee (giant scrolling section dividers + announcement bar)
   ========================================================================== */
.marquee { overflow: hidden; white-space: nowrap; }
/* margins (not flex gap) so the track width is an exact multiple of one copy — seamless -50% loop */
.marquee__track { display: inline-flex; align-items: center; animation: marquee 26s linear infinite; }
.marquee__track > * { margin-right: 40px; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee--display { padding-block: clamp(30px, 5vw, 70px); background: var(--paper); }
.marquee--display .marquee__track { animation-duration: 150s; }
.marquee--display .marquee__track > * { margin-right: 60px; }
.marquee--display span {
  font-size: clamp(30px, 4.4vw, 60px); font-weight: 500; letter-spacing: -.04em;
  line-height: .9; color: var(--ink);
}
.marquee--display .star { color: var(--ink-15); font-size: clamp(18px, 2.6vw, 36px); }


@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* =============================================================================
   Client logo strip
   ========================================================================== */
.logo-strip { background: var(--paper); padding-block: clamp(30px, 5vw, 56px); }
.logo-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.logo-row img { height: 28px; width: auto; opacity: .5; filter: invert(1); }
/* JP: industry labels replacing client logos */
.logo-row span { font-family: var(--mono); font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; letter-spacing: .04em; color: var(--ink-55); white-space: nowrap; }
/* JP: text label where a client logo used to sit (on work cards / quote card) */
.work-card__logo-text { position: relative; z-index: 2; font-family: var(--mono); font-size: 14px; font-weight: 300; letter-spacing: .04em; color: var(--snow);
  text-shadow: 0 0 2px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.5); }  /* readable over the light photo wash */
/* JP: company info table (会社概要) */
.company-table { border-top: 1px solid var(--ink-15); margin-top: 44px; }
.company-table .row { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 22px 6px; border-bottom: 1px solid var(--ink-15); align-items: start; }
.company-table dt { font-weight: 500; color: var(--ink); letter-spacing: 0; }
.company-table dd { color: var(--ink-70); }
.company-table dd a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .company-table .row { grid-template-columns: 1fr; gap: 6px; } }

/* ===== Approach — dynamic bento (awards-bento × annotated pins) ===== */
.approach-grid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 16px;
}
.approach-grid .a-card {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-08);
  background: var(--paper);
  padding: 28px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.approach-grid .a-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0,0,0,.08);
  border-color: var(--ink-15);
}
.approach-grid .a-feature { grid-column: 1 / 3; grid-row: 1 / 3; }
.approach-grid .a-01 { grid-column: 3 / 5; grid-row: 1 / 2; }
.approach-grid .a-02 { grid-column: 3 / 4; grid-row: 2 / 3; }
.approach-grid .a-03 { grid-column: 4 / 5; grid-row: 2 / 3; }

/* featured (dark) — .approach-grid prefix so it beats .approach-grid .a-card */
.approach-grid .a-feature {
  background: var(--void); color: var(--snow);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 240px; overflow: hidden;
}
.a-feature::after {
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  pointer-events: none;
}
.a-feature__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.a-feature .a-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--snow); color: var(--ink); display: grid; place-items: center; flex: none; }
.a-feature .a-icon svg { width: 28px; height: 28px; }
.a-feature .a-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--snow-70); border: 1px solid var(--snow-15); border-radius: var(--r-pill); padding: 7px 14px; white-space: nowrap; }
.a-feature h3 { font-size: clamp(23px, 2.6vw, 31px); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.a-feature .a-desc { margin-top: 16px; color: var(--snow-55); font-size: 15px; line-height: 1.8; max-width: 42ch; }

/* annotated perspective cards */
.a-head { display: flex; align-items: center; gap: 12px; }
.a-pin {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--snow);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  box-shadow: 0 0 0 5px var(--ink-08);
}
.a-cat { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }
.a-card h4 { margin-top: 22px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.a-card .a-p { margin-top: 12px; color: var(--ink-55); font-size: 14px; line-height: 1.75; }

@media (max-width: 900px) {
  .approach-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .approach-grid .a-feature { grid-column: 1 / 3; grid-row: auto; }
  .approach-grid .a-01 { grid-column: 1 / 3; grid-row: auto; }
  .approach-grid .a-02 { grid-column: 1 / 2; grid-row: auto; }
  .approach-grid .a-03 { grid-column: 2 / 3; grid-row: auto; }
}
@media (max-width: 600px) {
  .approach-grid { grid-template-columns: 1fr; }
  .approach-grid .a-feature,
  .approach-grid .a-01,
  .approach-grid .a-02,
  .approach-grid .a-03 { grid-column: 1 / -1; grid-row: auto; }
}


/* =============================================================================
   Works (project cards)
   ========================================================================== */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-card {
  border: 1px solid var(--ink-15); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.work-card:hover { border-color: var(--ink-40); transform: translateY(-3px); }
.work-card__top { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; padding: 24px;
  border-bottom: 1px solid var(--ink-15); background: var(--paper); overflow: hidden; }
.work-card__cat { position: absolute; top: 16px; left: 16px; z-index: 2; }
.tag-pill { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--ink-15); border-radius: var(--r-pill); padding: 6px 14px; background: var(--paper); }
/* grayscale photo behind each project logo */
.work-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(1); }
.work-card__top:has(.work-card__bg)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(240,240,240,.5); transition: background .3s ease; }
.work-card:hover .work-card__top::after { background: rgba(240,240,240,.2); }
.work-card__logo { position: relative; z-index: 2; max-height: 34px; width: auto; filter: invert(1); opacity: .9; }
.work-card__stats { display: grid; grid-template-columns: 1fr 1fr; }
.work-card__stats .cell { padding: 20px 22px; border-top: 1px solid var(--ink-15); }
.work-card__stats .cell:nth-child(even) { border-left: 1px solid var(--ink-15); }
.work-card__stats .cell:nth-child(-n+2) { border-top: none; }
.cell .val { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.cell .key { color: var(--ink-55); font-size: 13px; }

/* =============================================================================
   Capabilities (horizontal accordion on dark)
   ========================================================================== */
.cap-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.cap-head h2 { font-size: clamp(30px, 4vw, 52px); }

/* big mono statement strip (ENGINEERING SYSTEMS…) */
.statement { background: var(--void); color: var(--snow); border-radius: var(--r-lg); padding: clamp(30px,5vw,56px); }
.statement p { font-family: var(--mono); font-weight: 200; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(14px, 1.6vw, 20px); line-height: 1.7; max-width: 60ch; color: var(--snow); }


/* =============================================================================
   Testimonials carousel
   ========================================================================== */
.testi-row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.testi-row::-webkit-scrollbar { display: none; }
.testi-card { scroll-snap-align: start; flex: 0 0 clamp(280px, 32vw, 400px);
  border: 1px solid var(--ink-15); border-radius: var(--r-lg); padding: 28px; background: var(--paper); }
.testi-card .top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.testi-card .top img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.testi-card .top b { font-weight: 500; display: block; }
.testi-card .top span { color: var(--ink-55); font-size: 13px; }
.testi-card p { font-size: 15px; }

/* =============================================================================
   Video feature
   ========================================================================== */
.video-feat { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1664/928; background: var(--void); }
.video-feat video, .video-feat img { width: 100%; height: 100%; object-fit: contain; }

/* =============================================================================
   Process
   ========================================================================== */
.process-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.steps { border-top: 1px solid var(--ink-15); }
.step { padding: 26px 0; border-bottom: 1px solid var(--ink-15); }
.step summary { display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; }
.step summary::-webkit-details-marker { display: none; }
.step__no { font-family: var(--mono); font-size: 13px; color: var(--ink-40); }
.step__title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.02em; }
.step__tag { margin-left: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ink-55); border: 1px solid var(--ink-15); border-radius: var(--r-pill); padding: 5px 12px; }
.step p { margin-top: 16px; padding-left: 40px; color: var(--ink-70); max-width: 52ch; }

/* =============================================================================
   FAQ
   ========================================================================== */
.faq-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.faq-list { display: grid; gap: 12px; }
.faq {
  border: 1px solid var(--snow-15); border-radius: var(--r-md); background: var(--panel);
  padding: 4px 26px;
}
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none; padding: 22px 0; font-size: clamp(16px, 1.8vw, 20px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { font-size: 24px; color: var(--snow-55); transition: transform .2s; flex: none; }
.faq[open] summary .plus { transform: rotate(45deg); }
.faq p { padding: 0 0 24px; color: var(--snow-55); max-width: 70ch; }

/* =============================================================================
   Insights / articles
   ========================================================================== */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.article {
  border: 1px solid var(--ink-15); border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease;
}
.article:hover { transform: translateY(-3px); border-color: var(--ink-40); }
.article.has-media .article__media { aspect-ratio: 16/10; overflow: hidden; }
.article__media img { width: 100%; height: 100%; object-fit: cover; }
.article__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.article__cat { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); }
.article h3 { margin-top: 16px; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.02em; line-height: 1.15; }
.article__desc { margin-top: 12px; color: var(--ink-55); font-size: 14px; }
.article__foot { margin-top: auto; padding-top: 30px; display: flex; align-items: flex-end; justify-content: space-between; }
.article__foot .by span { color: var(--ink-40); font-size: 12px; display: block; }
.article__foot .by b { font-weight: 500; }

/* =============================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; background: var(--void); color: var(--snow); overflow: hidden; padding-top: clamp(60px, 8vw, 110px); }
.site-footer__bg { position: absolute; inset: 0; z-index: 0; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 1; filter: brightness(1.12) contrast(1.04); }
/* dark wash — keeps footer text readable, but stays light over the cube */
.site-footer__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.8) 0%, rgba(10,10,10,.42) 30%, rgba(10,10,10,.12) 54%, rgba(10,10,10,.08) 70%, rgba(10,10,10,.5) 100%); }
/* white bloom over the glowing cube (screen-blended so it reads as bright light) */
.site-footer__bg::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(42% 28% at 50% 66%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); }
.site-footer .container { position: relative; z-index: 1; }
/* dark halo so pure-white text stays readable over the bright cube/foliage */
.footer-top, .footer-legal { text-shadow: 0 0 2px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.75), 0 2px 18px rgba(0,0,0,.65); }
/* showcase space beneath the columns keeps the forest + glowing cube visible */
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: clamp(160px, 24vw, 320px); }
.footer-col h4 { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .04em; margin-bottom: 20px; }
.footer-col ul { display: grid; gap: 14px; }
.footer-col a { color: var(--snow); font-size: 15px; }
.footer-legal { position: relative; z-index: 1; border-top: 1px solid var(--snow-15); margin-top: 40px; padding: 24px 0;
  display: flex; justify-content: space-between; gap: 16px; color: var(--snow); font-size: 13px; flex-wrap: wrap; }

/* =============================================================================
   Scroll reveal
   ========================================================================== */
/* gated on html.js (set by main.js) so content stays visible when JS is unavailable */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; animation: hia-reveal-safe .7s ease 3.5s forwards; }
.js .reveal.in { opacity: 1; transform: none; animation: none; }
/* フェイルセーフ: 何らかの理由で main.js が .in を付与できなくても 3.5s 後に必ず表示する */
@keyframes hia-reveal-safe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; animation: none; } }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 420px; }
  .works-grid, .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid, .cap-head, .faq-head { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
/* ヘッダーはアンカー項目が多いぶん早めにハンバーガーへ切替え、中間幅での溢れを防ぐ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--snow); }
  /* :target は main.js が失敗した場合のCSS単体フォールバック（ハンバーガーは #mobile-menu へのリンク） */
  .mobile-menu.is-open, .mobile-menu:target { display: block; position: fixed; inset: 0; z-index: 200; background: var(--void); color: var(--snow); padding: 90px var(--pad) 40px; }
  .mobile-menu.is-open ul, .mobile-menu:target ul { display: grid; gap: 8px; }
  .mobile-menu.is-open a, .mobile-menu:target a { font-size: 28px; padding: 10px 0; border-bottom: 1px solid var(--snow-15); }
  .mobile-menu .close { position: absolute; top: 28px; right: var(--pad); font-size: 30px; text-decoration: none; }
}
@media (max-width: 720px) {
  .works-grid, .articles-grid { grid-template-columns: 1fr; }
  .logo-row { flex-direction: column; align-items: center; gap: 26px; }  /* .logo-row is flex, not grid */
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* =============================================================================
   Inner-page components (about / contact / detail / list / policy / 404)
   ========================================================================== */

/* generic page hero (title + sub) sitting below the sticky header */
.page-hero { padding-block: clamp(70px, 10vw, 130px) clamp(30px, 4vw, 50px); }
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero h1 { font-size: clamp(38px, 6vw, 78px); letter-spacing: -.04em; max-width: 18ch; }
.page-hero .sub { margin-top: 24px; max-width: 56ch; color: var(--ink-70); font-size: clamp(16px, 1.7vw, 19px); }
.section--dark .page-hero .sub { color: var(--snow-70); }

/* photo variant: same full-bleed photo as the homepage hero, light wash so ink text stays readable */
.page-hero--photo {
  position: relative;
  overflow: hidden;
  margin-top: -84px;          /* sit under the transparent sticky header, like .hero */
  padding-top: calc(clamp(70px, 10vw, 130px) + 84px);
}
.page-hero--photo .hero-bg img { object-position: center 38%; }
.page-hero--photo .hero-bg::after {
  background: linear-gradient(180deg,
    rgba(240,240,240,.94) 0%, rgba(240,240,240,.68) 45%, rgba(240,240,240,.9) 100%);
}
.page-hero--photo .container { position: relative; z-index: 2; }
/* compact photo hero: shorter band for article/detail pages */
.page-hero--compact { padding-top: calc(clamp(40px, 6vw, 80px) + 84px); padding-bottom: clamp(24px, 3.5vw, 44px); }

/* about: vision photo in the left column */
.vision-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; max-width: 440px; margin-top: 28px; }
.vision-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* article body: prose + sticky meta/outline rail on the right */
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.article-rail { position: sticky; top: 104px; display: grid; gap: 26px; align-content: start; }
.rail-cover { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/10; }
.rail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-rail .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); }
.article-rail .v { margin-top: 10px; font-size: 17px; }
.rail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rail-toc { border-top: 1px solid var(--ink-15); padding-top: 24px; }
.rail-toc ul { display: grid; gap: 12px; margin-top: 14px; }
.rail-toc a { color: var(--ink-70); font-size: 14px; line-height: 1.5; transition: color .2s; }
.rail-toc a:hover { color: var(--ink); }
.prose h2[id], section[id], form[id] { scroll-margin-top: 110px; }  /* keep anchor targets clear of the sticky header */

/* visually hidden but exposed to assistive technology */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-rail { position: static; order: -1; }
}

/* cover image */
.cover { border-radius: var(--r-lg); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* meta bar (case study + article) */
.meta-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid var(--ink-15); border-bottom: 1px solid var(--ink-15); padding: 28px 0; }
.meta-bar .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); }
.meta-bar .v { margin-top: 10px; font-size: 17px; }

/* case-study stats (4 with descriptions) */
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cs-stat { border: 1px solid var(--ink-15); border-radius: var(--r-lg); padding: 26px; }
.cs-stat .num { font-size: clamp(34px, 4vw, 50px); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.cs-stat .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); margin-top: 10px; }
.cs-stat p { margin-top: 16px; color: var(--ink-70); font-size: 14px; }

/* long-form prose (article body + case-study narrative) */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; margin-top: 46px; }
.prose h3 { font-size: 20px; margin-top: 34px; }
.prose p { color: var(--ink-70); line-height: 1.75; }
.prose ul:not(.keypoints) { display: grid; gap: 12px; margin-top: 8px; }
.prose ul:not(.keypoints) li { position: relative; padding-left: 26px; color: var(--ink-70); line-height: 1.6; }
.prose ul:not(.keypoints) li::before { content: "→"; position: absolute; left: 0; color: var(--ink); }
.prose ul li strong, .prose p strong { color: var(--ink); font-weight: 500; }
.prose blockquote { border-left: 3px solid var(--ink); padding-left: 26px; margin-block: 12px;
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.section--dark .prose p, .section--dark .prose ul li { color: var(--snow-70); }
.section--dark .prose blockquote, .section--dark .prose ul li strong { color: var(--snow); border-color: var(--snow); }

/* key points grid */
.keypoints { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.keypoints li { border: 1px solid var(--ink-15); border-radius: var(--r-md); padding: 22px; color: var(--ink-70);
  display: flex; gap: 14px; line-height: 1.5; }
.keypoints li::before { content: "\2733"; color: var(--ink); flex: none; }

/* image gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-md); }
.gallery .wide { grid-column: span 2; aspect-ratio: 3/2; }

/* author byline row */
.byline { display: flex; align-items: center; gap: 14px; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.byline b { font-weight: 500; }
.byline span { color: var(--ink-55); font-size: 13px; display: block; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.form { border: 1px solid var(--ink-15); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); background: var(--paper); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); }
.field input, .field textarea, .field select { width: 100%; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--ink-15);
  border-radius: var(--r-sm); background: var(--paper); font: inherit; color: var(--ink); outline: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 120px; }
.form-status { margin-top: 14px; font-size: 14px; min-height: 1.25em; }
.form-status.is-pending { color: var(--ink-55); }
.form-status.is-ok { color: #1a7f4b; }
.form-status.is-err { color: #c0392b; }

/* ----- Article share buttons -------------------------------------------- */
.share { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ink-15); flex-wrap: wrap; }
.share__label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55); margin-right: 4px; }
.share__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink-15); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; text-decoration: none; padding: 0; }
.share__btn svg { width: 17px; height: 17px; }
.share__btn b { font-size: 13px; font-weight: 700; font-family: var(--sans); }
.share__btn:hover { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.share__btn.copied { background: #1a7f4b; color: #fff; border-color: #1a7f4b; }

/* services grid (about) */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.service { border: 1px solid var(--ink-15); border-radius: var(--r-lg); padding: 30px; }
.service h3 { font-size: 22px; }
.service p { margin-top: 12px; color: var(--ink-70); }

/* legal / policy */
.legal { max-width: 820px; }
.legal .lead { color: var(--ink-70); font-size: 18px; line-height: 1.7; }
.legal h2 { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .04em;
  font-size: 15px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ink-15); }
.legal h3 { font-size: 18px; margin-top: 26px; }
.legal p, .legal li { color: var(--ink-70); line-height: 1.75; margin-top: 14px; }
.legal ul { margin-top: 10px; }
.legal ul li { position: relative; padding-left: 24px; }
.legal ul li::before { content: "\2014"; position: absolute; left: 0; color: var(--ink-40); }
.legal ul li strong { color: var(--ink); font-weight: 500; }

/* 404 */
.notfound { min-height: 72vh; display: grid; place-content: center; text-align: center; gap: 20px; padding-block: 80px; }
.notfound .code { font-size: clamp(96px, 22vw, 240px); font-weight: 500; letter-spacing: -.05em; line-height: .85; }
.notfound p { color: var(--ink-70); max-width: 40ch; margin-inline: auto; }
.notfound .btn { justify-self: center; }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .cs-stats, .meta-bar { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cs-stats, .meta-bar, .keypoints, .services-grid, .gallery, .form .row { grid-template-columns: 1fr; }
  .gallery .wide { grid-column: auto; }
}

/* =============================================================================
   AuditX feature columns (dark)
   ========================================================================== */
.db-features { margin-top: clamp(44px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.db-icon { width: 56px; height: 56px; color: var(--snow); display: grid; place-items: center; }
.db-icon svg { width: 42px; height: 42px; }
.db-feature p { margin-top: 22px; color: var(--snow-70); font-size: 16px; max-width: 22ch; }
.db-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.db-langs span { font-family: var(--mono); font-size: 11px; border: 1px solid var(--snow-15); border-radius: var(--r-pill); padding: 3px 9px; color: var(--snow-55); }

@media (max-width: 1024px) {
  .db-features { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 620px) {
  .db-features { grid-template-columns: 1fr; }
}