:root {
  --paper: #f4f1ea;
  --ink: #111111;
  --blue: #0866f5;
  --orange: #ff9500;
  --line: rgba(17, 17, 17, 0.18);
  --line-soft: rgba(17, 17, 17, 0.1);
  --muted: rgba(17, 17, 17, 0.58);
  --wrap: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family:
    "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    Arial,
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary {
  font: inherit;
}

::selection {
  background: rgba(8, 102, 245, 0.2);
}

.page-shell {
  min-height: 100vh;
  background: var(--paper);
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  height: 116px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(28px, 5vw, 80px);
}

.brand {
  display: block;
  width: clamp(72px, 6.3vw, 104px);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(36px, 4.6vw, 72px);
}

.desktop-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--orange);
  height: 2px;
}

.mobile-menu {
  display: none;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  min-height: min(920px, 100svh);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.74);
  background-color: var(--paper);
  background-image: url("/images/hero-desktop.jpg?v=f6123ba9");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(244, 241, 234, 0.98) 0%,
    rgba(244, 241, 234, 0.94) 13%,
    rgba(244, 241, 234, 0.42) 29%,
    transparent 47%
  );
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(42vw, 590px);
  margin-left: clamp(46px, 6vw, 100px);
  padding-top: 7vh;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(58px, 6.2vw, 96px);
  font-weight: 430;
  letter-spacing: 0.08em;
  line-height: 1.12;
}

.hero-copy p {
  margin: 28px 0 0 4px;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 600;
  letter-spacing: 0.2em;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(42px, 7vh, 72px);
  left: clamp(46px, 6vw, 100px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.scroll-cue > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 17px;
}

.scroll-cue small {
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.17em;
}

/* -------------------------------------------------------- service bands */

.services {
  background: var(--paper);
}

.service {
  position: relative;
  display: flex;
  min-height: clamp(185px, 16vw, 250px);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background-color: var(--paper);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.service-design {
  background-image: url("/images/service-design.jpg");
}

.service-build {
  background-image: url("/images/service-build.jpg");
}

.service-operate {
  background-image: url("/images/service-operate.jpg");
}

.service::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33%;
  content: "";
  background: linear-gradient(
    90deg,
    var(--paper) 0%,
    rgba(244, 241, 234, 0.98) 78%,
    rgba(244, 241, 234, 0) 100%
  );
}

.service-copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: 31%;
  align-items: baseline;
  gap: clamp(18px, 2.6vw, 44px);
  padding-left: clamp(46px, 6vw, 100px);
  white-space: nowrap;
}

.service-copy h2,
.recruit h2 {
  margin: 0;
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 520;
  letter-spacing: 0.13em;
}

.service-copy p,
.recruit p {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.recruit {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(46px, 6vw, 100px);
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(255, 255, 255, 0.055),
      transparent 33%
    ),
    #111111;
  color: #f8f6f1;
}

.recruit > div {
  display: grid;
  gap: 14px;
}

.entry-link {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  background: var(--orange);
  color: var(--ink);
  font-size: 27px;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.entry-link:hover,
.entry-link:focus-visible {
  background: var(--blue);
  color: white;
}

/* =================================================================
   下層ページ共通
   ================================================================= */

.wrap {
  width: min(100% - clamp(44px, 12vw, 200px), var(--wrap));
  margin-inline: auto;
}

/* ページヘッダー（2.5:1 の背景画像帯） */

.page-head {
  position: relative;
  display: flex;
  min-height: clamp(300px, 30vw, 430px);
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.74);
  background-color: var(--paper);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-head-about {
  background-image: url("/images/about-header.jpg");
}

.page-head-work {
  background-image: url("/images/work-header.jpg");
}

.page-head-recruit {
  background-image: url("/images/recruit-header.jpg");
}

.page-head-plain {
  min-height: clamp(230px, 22vw, 320px);
  background-image: none;
}

.page-head::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(244, 241, 234, 0.72) 0%,
      rgba(244, 241, 234, 0) 22%
    ),
    linear-gradient(
      90deg,
      rgba(244, 241, 234, 0.97) 0%,
      rgba(244, 241, 234, 0.9) 16%,
      rgba(244, 241, 234, 0.38) 33%,
      transparent 52%
    );
}

.page-head .wrap {
  position: relative;
  z-index: 1;
  padding-block: 0 clamp(40px, 5vw, 72px);
}

.page-head h1 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 430;
  letter-spacing: 0.09em;
  line-height: 1.1;
}

.page-head .ja {
  display: block;
  margin-top: 16px;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.2em;
}

/* セクション */

.section {
  padding-block: clamp(64px, 8vw, 118px);
  border-bottom: 1px solid var(--line-soft);
}

.section:last-of-type {
  border-bottom: 0;
}

.section-alt {
  background: rgba(255, 255, 255, 0.42);
}

.sec-head {
  margin-bottom: clamp(30px, 3.4vw, 52px);
}

.sec-head .eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.sec-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1.3;
}

.lead {
  max-width: 46em;
  margin: 0 0 clamp(28px, 3vw, 44px);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 2.05;
  letter-spacing: 0.04em;
}

.lead-lg {
  max-width: 26em;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 480;
  line-height: 1.85;
  letter-spacing: 0.07em;
}

.note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

/* 定義リスト（会社概要・募集要項） */

.spec {
  margin: 0;
  border-top: 1px solid var(--line);
}

.spec > div {
  display: grid;
  grid-template-columns: minmax(180px, 232px) 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(20px, 2.1vw, 30px);
  border-bottom: 1px solid var(--line-soft);
}

.spec dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.9;
}

.spec dt .en {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.18em;
}

.spec dd {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.spec dd small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.spec dd a {
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  transition: border-color 180ms ease;
}

.spec dd a:hover {
  border-color: var(--blue);
}

/* 代表メッセージ */

.message p {
  max-width: 44em;
  margin: 0 0 1.9em;
  font-size: 14.5px;
  line-height: 2.15;
  letter-spacing: 0.045em;
}

.message p:last-of-type {
  margin-bottom: 0;
}

.sign {
  margin-top: clamp(30px, 3vw, 46px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.sign b {
  margin-left: 16px;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: 0.16em;
}

/* 沿革 */

.timeline {
  margin: 0;
  border-top: 1px solid var(--line);
}

.timeline > div {
  display: grid;
  grid-template-columns: minmax(120px, 168px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding-block: 19px;
  border-bottom: 1px solid var(--line-soft);
}

.timeline dt {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.timeline dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.timeline .past dt {
  color: var(--muted);
}

.timeline .past dd {
  color: var(--muted);
}

/* 代表メッセージ（写真つき） */

.ceo {
  display: grid;
  grid-template-columns: minmax(0, 296px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.ceo-photo {
  margin: 0;
}

.ceo-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.5);
}

.ceo-photo figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
}

/* 認証・資格 */

.certs {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}

.cert-img {
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--line);
  background: #ffffff;
}

.cert-spec {
  margin: 0;
  border-top: 1px solid var(--line-soft);
}

.cert-spec > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 20px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line-soft);
}

.cert-spec dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.95;
}

.cert-spec dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

/* アクセス */

.access {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.map-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35) sepia(0.18) contrast(0.94) saturate(0.85);
}

.stations {
  margin: 0;
  border-top: 1px solid var(--line);
}

.stations > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line-soft);
}

.stations .who {
  font-size: 13.5px;
  letter-spacing: 0.05em;
}

.stations .who span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.stations .walk {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.stations .walk em {
  color: var(--blue);
  font-size: 19px;
  font-style: normal;
  letter-spacing: 0;
}

.addr {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------- WORK カテゴリ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}

.cat-card {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: clamp(12px, 1.3vw, 20px);
  background-color: #1b1b1b;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.cat-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(10, 12, 18, 0) 32%,
    rgba(10, 12, 18, 0.78) 100%
  );
  transition: background 220ms ease;
}

.cat-card:hover::before,
.cat-card:focus-visible::before {
  background: linear-gradient(
    180deg,
    rgba(8, 102, 245, 0.28) 0%,
    rgba(10, 12, 18, 0.86) 100%
  );
}

.cat-card .label {
  position: relative;
  z-index: 1;
}

.cat-card .label b {
  display: block;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 550;
  letter-spacing: 0.13em;
}

.cat-card .label span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.17em;
}

.cat-beverage {
  background-image: url("/images/work-category-beverage.jpg");
}
.cat-automotive {
  background-image: url("/images/work-category-automotive.jpg");
}
.cat-power {
  background-image: url("/images/work-category-power.jpg");
}
.cat-gas {
  background-image: url("/images/work-category-gas.jpg");
}
.cat-credit {
  background-image: url("/images/work-category-credit.jpg");
}
.cat-broadcast {
  background-image: url("/images/work-category-broadcast.jpg");
}
.cat-it {
  background-image: url("/images/work-category-it.jpg");
}
.cat-mobile {
  background-image: url("/images/work-category-mobile.jpg");
}

/* 実績詳細 */

.work-group {
  padding-top: clamp(46px, 5vw, 76px);
  scroll-margin-top: 96px;
}

.work-group + .work-group {
  border-top: 1px solid var(--line-soft);
}

.group-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

.group-head h3 {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 520;
  letter-spacing: 0.13em;
}

.group-head .count {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.proj {
  padding-block: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--line-soft);
}

.proj > h4 {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 3px solid var(--orange);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.6;
}

.proj-item + .proj-item {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-soft);
}

.proj-item > .summary {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.045em;
}

.meta {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 4px 16px;
  margin: 0;
}

.meta dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.95;
}

.meta dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.95;
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------- RECRUIT */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.flow .step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.flow .step .n {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.flow .step.final {
  border-color: transparent;
  background: var(--orange);
  font-weight: 700;
}

.flow .arrow {
  color: var(--muted);
  font-size: 12px;
}

/* ------------------------------------------------------------- CONTACT */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-bottom: clamp(38px, 4vw, 60px);
}

.cm {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
}

.cm .k {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.cm .v {
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.cm .sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.notice {
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid rgba(255, 149, 0, 0.5);
  border-left: 4px solid var(--orange);
  background: rgba(255, 149, 0, 0.07);
}

.notice h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.notice p {
  margin: 0 0 1.2em;
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.045em;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- LEGAL */

.legal {
  max-width: 46em;
}

.legal h3 {
  margin: clamp(38px, 4vw, 58px) 0 18px;
  padding-left: 14px;
  border-left: 3px solid var(--blue);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.7;
}

.legal h3:first-child {
  margin-top: 0;
}

.legal p {
  margin: 0 0 1.7em;
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: 0.045em;
}

.legal ul {
  margin: 0 0 1.7em;
  padding: 0;
  list-style: none;
}

.legal li {
  position: relative;
  margin-bottom: 0.85em;
  padding-left: 20px;
  font-size: 14px;
  line-height: 2.05;
  letter-spacing: 0.045em;
}

.legal li::before {
  position: absolute;
  top: 0.83em;
  left: 2px;
  width: 6px;
  height: 1px;
  content: "";
  background: var(--orange);
}

.legal .stamp {
  margin-top: clamp(40px, 4vw, 60px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 2.1;
  letter-spacing: 0.06em;
}

.legal .stamp b {
  color: var(--ink);
  font-weight: 650;
}

/* -------------------------------------------------------------- TOPICS */

.topics {
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--paper);
  padding-block: clamp(44px, 5vw, 74px);
}

.topics-inner {
  display: grid;
  grid-template-columns: minmax(130px, 190px) 1fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
}

.topics h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.topics ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.topics li {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 8px 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.topics time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 2;
}

.topics .item {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.045em;
}

.topics .item::before {
  position: absolute;
  top: 0.82em;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--orange);
}

.topics .item a {
  border-bottom: 1px solid var(--line);
  color: var(--blue);
}

/* --------------------------------------------------------------- 導線帯 */

.cta-band {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(34px, 4vw, 48px) clamp(46px, 6vw, 100px);
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(255, 255, 255, 0.055),
      transparent 33%
    ),
    #111111;
  color: #f8f6f1;
}

.cta-band > div {
  display: grid;
  gap: 14px;
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 520;
  letter-spacing: 0.13em;
}

.cta-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* -------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #111111;
  color: rgba(255, 255, 255, 0.52);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(48px, 5.5vw, 80px);
}

.footer-brand img {
  display: block;
  width: 92px;
  height: auto;
}

.footer-about {
  margin: 22px 0 0;
  font-size: 11.5px;
  line-height: 2.15;
  letter-spacing: 0.07em;
}

.footer-col h3 {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li {
  margin-bottom: 13px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  transition: color 180ms ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--orange);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.72);
}

.footer-bottom a:hover {
  color: var(--orange);
}

footer.mini {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(28px, 5vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #111111;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

footer.mini a {
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.72);
}

/* =================================================================
   モバイル
   ================================================================= */

@media (max-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .access {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .site-header {
    height: 88px;
    padding: 0 22px;
  }

  .brand {
    width: 74px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    position: relative;
    display: block;
  }

  .mobile-menu summary {
    display: grid;
    width: 42px;
    height: 42px;
    cursor: pointer;
    list-style: none;
    place-content: center;
    gap: 5px;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu summary span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--ink);
  }

  .mobile-menu nav {
    position: absolute;
    top: 46px;
    right: 0;
    display: grid;
    width: 168px;
    border: 1px solid var(--line);
    background: rgba(244, 241, 234, 0.97);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  }

  .mobile-menu nav a {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.15em;
  }

  .mobile-menu nav a:last-child {
    border-bottom: 0;
  }

  .hero {
    min-height: max(760px, 100svh);
    align-items: flex-start;
    background-image: url("/images/hero-mobile.jpg?v=4739fe01");
    background-position: center top;
    background-size: cover;
  }

  .hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(244, 241, 234, 0.18) 0%,
        rgba(244, 241, 234, 0) 30%,
        rgba(244, 241, 234, 0.2) 45%,
        rgba(244, 241, 234, 0.94) 68%,
        var(--paper) 100%
      ),
      linear-gradient(
        90deg,
        rgba(244, 241, 234, 0.7) 0%,
        rgba(244, 241, 234, 0) 57%
      );
  }

  .hero-copy {
    width: calc(100% - 44px);
    margin: 0 22px;
    padding-top: max(445px, 58vh);
  }

  .hero-copy h1 {
    font-size: clamp(46px, 13vw, 64px);
    line-height: 1.08;
  }

  .hero-copy p {
    margin-top: 18px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .scroll-cue {
    bottom: 25px;
    left: 22px;
    gap: 7px;
  }

  .scroll-cue > span {
    width: 34px;
    height: 34px;
  }

  .service {
    min-height: 154px;
    background-position: 63% center;
  }

  .service::before {
    width: 56%;
    background: linear-gradient(
      90deg,
      var(--paper) 0%,
      rgba(244, 241, 234, 0.98) 76%,
      rgba(244, 241, 234, 0) 100%
    );
  }

  .service-copy {
    display: grid;
    width: 54%;
    gap: 7px;
    padding-left: 22px;
  }

  .service-copy h2 {
    font-size: 18px;
  }

  .service-copy p {
    font-size: 9px;
  }

  .recruit {
    min-height: 164px;
    padding: 0 22px;
  }

  .recruit > div {
    gap: 10px;
  }

  .recruit h2 {
    font-size: 19px;
  }

  .entry-link {
    width: 58px;
    height: 58px;
    font-size: 23px;
  }

  footer.mini {
    min-height: 64px;
    padding: 0 22px;
    font-size: 8px;
  }

  /* --- 下層ページ --- */

  .wrap {
    width: calc(100% - 44px);
  }

  .page-head {
    min-height: 300px;
    background-position: 62% center;
  }

  .page-head::after {
    background:
      linear-gradient(
        180deg,
        rgba(244, 241, 234, 0.8) 0%,
        rgba(244, 241, 234, 0) 26%
      ),
      linear-gradient(
        180deg,
        rgba(244, 241, 234, 0) 34%,
        rgba(244, 241, 234, 0.9) 76%,
        var(--paper) 100%
      );
  }

  .page-head .wrap {
    padding-bottom: 34px;
  }

  .spec > div,
  .timeline > div,
  .topics-inner,
  .topics li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ceo,
  .certs {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ceo-photo {
    max-width: 260px;
  }

  .cert-img {
    max-width: 320px;
  }

  .spec > div {
    padding-block: 18px;
  }

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .meta {
    grid-template-columns: 74px 1fr;
    gap: 3px 12px;
  }

  .cta-band {
    min-height: 164px;
    padding: 30px 22px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    padding-block: 44px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .stations > div {
    align-items: flex-start;
  }
}

/* =================================================================
   動き（モーション）
   ・.js が付いている＝JavaScriptが有効なときだけ初期状態を隠す。
     JSが無効な環境では最初からすべて表示されるため、内容は必ず読める。
   ・「視差効果を減らす」設定の環境では、末尾の指定で全て無効化される。
   ================================================================= */

:root {
  --ease-out: cubic-bezier(0.22, 0.68, 0.24, 1);
  --rv-dur: 0.78s;
}

/* --- スクロールで浮かび上がる --- */

.js .rv,
.js .rv-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--rv-dur) var(--ease-out),
    transform var(--rv-dur) var(--ease-out);
  will-change: opacity, transform;
}

.js .rv.is-in,
.js .rv-stagger.is-in > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 子要素を少しずつ遅らせて、順番に立ち上がって見せる */
.js .rv-stagger > *:nth-child(1) { transition-delay: 0s; }
.js .rv-stagger > *:nth-child(2) { transition-delay: 0.07s; }
.js .rv-stagger > *:nth-child(3) { transition-delay: 0.14s; }
.js .rv-stagger > *:nth-child(4) { transition-delay: 0.21s; }
.js .rv-stagger > *:nth-child(5) { transition-delay: 0.28s; }
.js .rv-stagger > *:nth-child(6) { transition-delay: 0.35s; }
.js .rv-stagger > *:nth-child(7) { transition-delay: 0.42s; }
.js .rv-stagger > *:nth-child(8) { transition-delay: 0.49s; }
.js .rv-stagger > *:nth-child(n + 9) { transition-delay: 0.54s; }

/* 帯セクションは大きいので、動きを控えめにする */
.js .service.rv,
.js .recruit.rv,
.js .cta-band.rv {
  transform: translateY(30px);
  transition-duration: 0.95s;
}

/* --- 読み込み時：ヒーローとページヘッダー --- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .hero-copy h1,
.js .hero-copy p,
.js .scroll-cue,
.js .page-head h1 {
  animation: rise 1s var(--ease-out) both;
}

.js .hero-copy p { animation-delay: 0.16s; }
.js .scroll-cue { animation-delay: 0.34s; }

/* スクロール誘導の矢印をゆっくり上下させる */
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.js .scroll-cue > span {
  animation: nudge 2.1s ease-in-out 1.2s infinite;
}

/* --- スクロール後に細く固定されるヘッダー --- */

.site-header {
  transition:
    height 0.32s var(--ease-out),
    background-color 0.32s var(--ease-out),
    box-shadow 0.32s var(--ease-out);
}

.js .site-header.is-stuck {
  position: fixed;
  height: 68px;
  background: rgba(244, 241, 234, 0.92);
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(17, 17, 17, 0.05);
  animation: rise 0.4s var(--ease-out) both;
}

@supports (backdrop-filter: blur(10px)) {
  .js .site-header.is-stuck {
    background: rgba(244, 241, 234, 0.76);
    backdrop-filter: saturate(160%) blur(12px);
  }
}

/* 固定ヘッダーに隠れないよう、アンカー先に余白を持たせる */
[id] {
  scroll-margin-top: 92px;
}

/* --- ページ上部へ戻るボタン --- */

.to-top {
  position: fixed;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  z-index: 20;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-size: 17px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    background-color 0.2s ease;
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover,
.to-top:focus-visible {
  background: var(--blue);
}

html:not(.js) .to-top {
  display: none;
}

/* --- ホバーの動き --- */

/* 業種カード：画像だけを内側でゆっくり拡大し、見出しを少し持ち上げる */
.cat-ph {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.75s var(--ease-out);
}

.cat-card:hover .cat-ph,
.cat-card:focus-visible .cat-ph {
  transform: scale(1.07);
}

.cat-card .label {
  transition: transform 0.4s var(--ease-out);
}

.cat-card:hover .label,
.cat-card:focus-visible .label {
  transform: translateY(-4px);
}

.cat-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* 問い合わせカード：わずかに浮かせる */
.cm {
  transition:
    transform 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}

.cm:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 102, 245, 0.45);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.07);
}

.cm a.v {
  transition: color 0.2s ease;
}

.cm a.v:hover {
  color: var(--blue);
}

/* 一覧の行：カーソルのある行をうっすら地色で示す（長い表の視線誘導） */
.spec > div,
.timeline > div,
.stations > div,
.proj-item,
.cert-spec > div,
.topics li {
  transition: background-color 0.25s ease;
}

.spec > div:hover,
.timeline > div:hover,
.stations > div:hover,
.proj-item:hover,
.cert-spec > div:hover,
.topics li:hover {
  background: rgba(8, 102, 245, 0.035);
}

/* 案件名の左罫を、行にカーソルが乗ったら伸ばす */
.proj > h4 {
  transition: border-left-width 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
}

.proj:hover > h4 {
  border-left-width: 6px;
  padding-left: 17px;
}

/* 採用フロー：カーソルでステップを起こす */
.flow .step {
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.flow .step:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 102, 245, 0.5);
}

.flow .step.final:hover {
  background: var(--blue);
  color: #fff;
}

/* 本文中リンク・フッターリンク */
.topics .item a,
.spec dd a {
  transition: color 0.2s ease, border-color 0.2s ease;
}

.topics .item a:hover,
.spec dd a:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.footer-col a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.25s var(--ease-out);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  transform: translateX(4px);
}

/* 採用導線の矢印 */
.entry-link {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.35s var(--ease-out);
}

.entry-link:hover,
.entry-link:focus-visible {
  transform: translate(3px, -3px);
}

/* 地図：カーソルを乗せたら本来の色に戻す */
.map-frame iframe {
  transition: filter 0.5s ease;
}

.map-frame:hover iframe {
  filter: none;
}

@media (max-width: 760px) {
  .to-top {
    width: 44px;
    height: 44px;
  }

  .js .site-header.is-stuck {
    height: 62px;
  }
}

/* =================================================================
   「視差効果を減らす」設定の環境では、動きをすべて無効化する
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .rv,
  .js .rv-stagger > * {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================================
   新サイトでの差分　2026-08-14
   土台は試作の styles.css。ここから下が今回の変更です。
   ========================================================================= */

/* --- position:sticky を効かせる ----------------------------------------
   試作は body{overflow-x:hidden} を使っていますが、これは「横スクロール
   する箱」を作ってしまい、中にある position:sticky が画面ではなく
   その箱を基準にしてしまいます（沿革の固定が効かない原因でした）。
   clip は同じく横をはみ出させませんが、箱を作らないので sticky が効きます。 */
body{ overflow-x:clip }

/* --- D-16　カード・帯・画像枠に角丸12px（表と区切り線は直線のまま） ------ */
:root{ --r:12px }
.cm,
.map-frame,
.page-head,
.cat-card,
.ceo-photo img,
.flow .step,
.cta-band{ border-radius:var(--r) }

/* --- Q18　下へスクロールするとヘッダーが隠れ、上へ戻すと出る -------------
   試作は「細く固定される」だけでした。隠す動きを足します。            */
.js .site-header.is-stuck{ transition:height .32s var(--ease-out),
  background-color .32s var(--ease-out), box-shadow .32s var(--ease-out),
  transform .32s var(--ease-out) }
.js .site-header.is-stuck.is-hidden{ animation:none; transform:translateY(-100%) }
@media (prefers-reduced-motion:reduce){
  .js .site-header.is-stuck.is-hidden{ transform:none }
}

/* --- Q17　スマートフォンのメニューは上から降りてくる --------------------
   試作は右上に168pxの小箱が出る形でした。画面幅いっぱいに変えます。   */
@media (max-width:760px){
  .mobile-menu nav{
    position:fixed; top:88px; right:0; left:0; width:auto;
    display:grid; padding:6px 22px 24px;
    border:0; border-bottom:1px solid var(--line);
    background:rgba(244,241,234,.98);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
  }
  .js .site-header.is-stuck .mobile-menu nav{ top:68px }
  .mobile-menu[open] nav{ animation:menu-drop .34s var(--ease-out) both }
  @keyframes menu-drop{ from{transform:translateY(-14px); opacity:0}
                        to{transform:none; opacity:1} }
  .mobile-menu nav a{ padding:16px 4px; border-bottom:1px solid var(--line-soft);
    font-size:11px }
  .mobile-menu nav a:last-child{ border-bottom:0 }
  .mobile-menu summary span{ transition:transform .28s var(--ease-out), opacity .2s ease }
  .mobile-menu[open] summary span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .mobile-menu[open] summary span:nth-child(2){ opacity:0 }
  .mobile-menu[open] summary span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
}

/* --- 社員専用ページ（P-12）　文字を出さず4色のマークだけ ---------------- */
.copyright{ display:inline-flex; align-items:center; gap:9px; margin:0 }
.staff{ display:inline-flex; line-height:0 }
.staff img{ display:block; border-radius:3px; opacity:.72;
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out) }
.staff:hover img,.staff:focus-visible img{ opacity:1; transform:translateY(-1px) }

/* =======================================================================
   見た目　2026-08-14（第3版）
   LIG と Goodpatch を調べて分かったこと：
   ・どちらも巨大な幾何図形を背景に薄く置いて、画像がなくても空間を持たせている
   ・LIG の「3 Strengths」は GSAP ScrollTrigger の pin。左は静止、右だけ入れ替わる。
     進捗が円弧と番号で見える
   ・Goodpatch は2列を互い違いにずらし、単調さを壊している
   ======================================================================= */

/* ページ見出し　── 英字はセリフ体にして大きく置く
   generative-agents は英字見出しに Marcellus（セリフ体）を使い、
   「Contact Us」を247pxで置いていました。書体を変えるだけで印象が変わります。
   外部の書体は読み込まず、端末にあるセリフ体を使います。            */
.page-head{ min-height:clamp(320px,32vw,460px) }
.page-head h1{ font-size:clamp(46px,6.4vw,96px); font-weight:400; letter-spacing:.04em;
  font-family:"Marcellus","Cormorant Garamond",Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho",serif }
.page-head .ja{ font-family:inherit }

/* 本文は画面いっぱいに広げない */
.lead{ max-width:36em }
.spec dd{ max-width:38em }

/* ① 会社概要　── LIG の会社概要は1行82px。ラベルは英字1行だけだった。
   こちらは日本語と英字を縦に積んでいたぶん、行が倍になっていたので横並びにする。 */
#company{ padding-block:clamp(56px,6vw,84px) clamp(64px,8vw,118px) }
#company .sec-head{ margin-bottom:clamp(18px,2vw,30px) }
#company .spec > div{ padding-block:clamp(14px,1.4vw,19px); align-items:baseline }
#company .spec dt{ display:flex; align-items:baseline; gap:10px; line-height:1.6 }
#company .spec dt .en{ display:inline; margin:0; font-size:9px }
#company .spec dd{ line-height:1.75 }

/* ② 会社方針　── 現行の文言をそのまま、大きめにゆったり組む。
   同じ文を抜き出して二度見せることはしない。                     */
/* 代表メッセージ　── 写真を右に大きく、左端はフェードして地に溶かす。
   写真の人物が左を向いているので、文章のほうへ視線が向く並びにしています。 */
.msg{ position:relative; overflow:clip }
.msg-ph{ position:absolute; z-index:0; inset:0 0 0 auto; width:min(56vw,900px);
  background-size:cover; background-position:center 22%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 46%, #000 100%) }
.msg-in{ position:relative; z-index:1 }
.msg .message{ max-width:30em }
.msg .message p{ margin:0 0 1.5em; font-size:clamp(14px,1.15vw,16px); line-height:2.2 }
.msg-sign{ margin:clamp(24px,3vw,44px) 0 0; padding-top:16px;
  max-width:30em; border-top:1px solid var(--line);
  font-size:12.5px; font-weight:600; letter-spacing:.1em }
@media (max-width:900px){
  .msg-ph{ width:100%; inset:0;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.10) 62%, transparent 82%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.10) 62%, transparent 82%) }
  .msg{ padding-top:min(56vw,420px) }
  .msg .message,.msg-sign{ max-width:none }
}

.creed{ max-width:26em }
.creed p{ margin:0 0 1.5em; font-size:clamp(17px,1.75vw,23px);
  line-height:2.15; letter-spacing:.05em; text-align:justify }
.creed p:last-child{ margin-bottom:0 }
@media (max-width:760px){
  .creed p{ font-size:16px; line-height:2.05; text-align:left }
}

/* =======================================================================
   SERVICE　分野カードと対応工程
   ======================================================================= */

/* カード　── 画像は上、分野名は下の帯。マウスをかざすと帯が伸びて説明が出る（Q20）
   画像の上に文字を重ねると絵の下半分が読めなくなるため、領域を分けています。
   スマートフォンはマウスがないので、最初から説明を出します。        */
.scards{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px); margin-top:clamp(30px,3.4vw,52px) }
.scard{ position:relative; display:block; overflow:hidden; border-radius:var(--r);
  aspect-ratio:4/3; background:#fff;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.scard-ph{ position:absolute; inset:0 0 auto; height:100%;
  background-size:cover; background-position:center 42%;
  transition:transform .6s var(--ease-out) }
.scard-in{ position:absolute; inset:auto 0 0; display:block;
  padding:14px clamp(14px,1.4vw,20px) 16px;
  background:#fff; border-top:1px solid var(--line-soft);
  transition:padding .4s var(--ease-out) }
.scard-in b{ display:block; font-size:clamp(12.5px,1.1vw,15px); font-weight:600;
  letter-spacing:.05em; line-height:1.5 }
.scard-tx{ display:block; max-height:0; overflow:hidden; opacity:0;
  font-size:11.5px; line-height:1.8; color:var(--muted);
  transition:max-height .44s var(--ease-out), opacity .3s var(--ease-out),
             margin-top .44s var(--ease-out) }
.scard-in em{ display:block; margin-top:0; max-height:0; overflow:hidden; opacity:0;
  font-style:normal; font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--blue);
  transition:max-height .44s var(--ease-out), opacity .3s var(--ease-out),
             margin-top .44s var(--ease-out) }
.scard-in em::after{ content:" →" }

.scard:hover,.scard:focus-visible{ transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(17,17,17,.10) }
.scard:hover .scard-ph,.scard:focus-visible .scard-ph{ transform:scale(1.05) }
.scard:hover .scard-tx,.scard:focus-visible .scard-tx{ max-height:9em; opacity:1; margin-top:9px }
.scard:hover .scard-in em,.scard:focus-visible .scard-in em{ max-height:2em; opacity:1; margin-top:11px }

@media (max-width:1100px){ .scards{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:760px){
  .scards{ grid-template-columns:1fr 1fr; gap:12px }
  .scard{ aspect-ratio:3/4 }
  .scard-tx{ max-height:9em; opacity:1; margin-top:7px; font-size:10.5px }
  .scard-in em{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .scard,.scard-ph,.scard-in{ transition:none }
  .scard:hover{ transform:none }
  .scard:hover .scard-ph{ transform:none }
}

/* 対応工程　── 1本の線でつなぎ、番号の丸を並べる（Q6） */


/* SERVICE のページ見出しは画像がまだ無いので無地 */
.page-head-service{ background-image:none }

/* =======================================================================
   社員の声（クロストーク）
   ・左に目次を固定し、現在地を色付きの縦バーで示す
   ・発言はアイコン＋吹き出し。聞き手は左、答える人は右
   ======================================================================= */
/* 目次と本文。目次を左に寄せています */
.vlayout{ display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:clamp(22px,3.2vw,52px); width:var(--vw); margin:0 0 0 var(--vgap);
  padding:clamp(48px,6vw,88px) 0 }
/* 上に話し手のカードが載るので、本文側の上の余白は詰めます */
.vtalk .vlayout{ padding-top:clamp(30px,3.6vw,54px) }

/* 目次 */
.vmain{ min-width:0 }
.vindex{ position:sticky; top:112px; align-self:start }
.vindex ol{ margin:0; padding:0; list-style:none }
.vindex li{ position:relative }
.vindex a{ display:block; padding:9px 0 9px 16px; font-size:12.5px; line-height:1.65;
  color:var(--muted); letter-spacing:.04em; transition:color .25s ease }
.vindex a b{ margin-right:5px; font-weight:700 }
.vindex a::before{ position:absolute; left:0; top:12px; width:3px; height:0; content:"";
  background:var(--blue); border-radius:2px; transition:height .3s var(--ease-out) }
.vindex a:hover{ color:var(--ink) }
.vindex a.on{ color:var(--ink); font-weight:600 }
.vindex a.on::before{ height:calc(100% - 24px) }

/* 節 */
.vsec{ padding-bottom:clamp(52px,6vw,96px); scroll-margin-top:110px }
.vsec-h{ display:flex; align-items:baseline; gap:14px; margin:0 0 clamp(24px,3vw,40px);
  font-size:clamp(20px,2.4vw,30px); font-weight:500; letter-spacing:.06em; line-height:1.4 }
.vsec-h b{ color:var(--blue); font-size:clamp(24px,3vw,40px); font-weight:430;
  letter-spacing:.02em; font-feature-settings:"tnum" }
.vsec-h b:empty{ display:none }

/* 話し手を選ぶ
   ラジオボタンを隠して、その :checked で本文を出し分けます。
   JavaScript を使わないので、切れていても動きます。
   ラジオは矢印キーでも選べるので、キーボードだけでも操作できます */
/* ページ見出し。絵は入れません（8/25）。
   背景が無いぶん帯を低くして、文字だけが宙に浮かないようにします */
.page-head-voices{ min-height:clamp(228px,22vw,300px);
  padding-top:clamp(104px,9.5vw,132px);      /* 上の固定ヘッダーに重ならない高さ */
  padding-bottom:clamp(10px,1.4vw,20px) }
.page-head-voices h1{ font-size:clamp(38px,5vw,68px) }

.vwrap{ position:relative;
  /* 中身の幅は、ほかの下層ページ（lp-wrap）と同じ位置・同じ幅にそろえます。
     以前は独自の 1060px を左に寄せていましたが、ページ見出しを共通の型に
     変えたところ左端がずれたため、そろえ直しました（8/28）。
     lp-wrap ＝ min(100% - 80px, 1440px) の内側に左右120px → 中身1200px */
  --vw:min(100% - clamp(40px, 15.6vw, 320px), 1200px);
  /* 左端も lp-wrap（画面が広いときは左から160px）にそろえます */
  --vgap:max(clamp(20px, 2.6vw, 40px), calc((100% - var(--vw)) / 2)) }
/* カードを押すと、ブラウザは中身のラジオボタンに焦点を当て、
   それを画面内へ入れようとしてページを動かします。これが「上に飛ぶ」の正体です。
   以前は scroll-margin-top で着地点をずらしていましたが、動くこと自体は止まりません。
   画面に固定して常に見えている状態にすれば、動かす必要がなくなるので飛びません（8/26）。
   1px・透明・押せない状態なので、画面には何も出ません。 */
.vp-radio{ position:fixed; top:0; left:0; width:1px; height:1px;
  opacity:0; pointer-events:none }
/* 話し手の切り替え（2026/09/08 に作り直し）

   それまでは大きなカードを2枚並べ、上に1本の罫を渡していました。
   「切り替えられることが分かりにくい」「いま誰の話かも分かりにくい」
   という指摘を受けて、枠の中を面が滑る形（囲み型）に変えています。
   形の元は daisyUI 5 の tabs-box、つまり iOS のセグメンテッドコントロールです。

   ラジオボタンと CSS だけで動きます。JavaScript は要りません。
   選択肢が2つなので、面の移動は translateX(100%) の1行で足ります。 */
.vsw{ position:relative; display:grid; grid-template-columns:1fr 1fr;
  width:var(--vw); margin:0 0 0 var(--vgap); padding:5px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:#fff }
.vsw__ind{ position:absolute; z-index:0; top:5px; left:5px;
  width:calc((100% - 10px) / 2); height:calc(100% - 10px); border-radius:9px;
  background:var(--paper); box-shadow:0 1px 3px rgba(17,17,17,.10);
  transition:transform .5s var(--spring) }
#vp-kongoji:checked ~ .vsw .vsw__ind{ transform:translateX(100%) }

.vsw__b{ position:relative; z-index:1; display:flex; align-items:center;
  gap:clamp(10px,1.2vw,15px); padding:clamp(12px,1.4vw,17px) clamp(12px,1.6vw,20px);
  border-radius:9px; cursor:pointer; color:var(--muted);
  transition:color .34s var(--ease-out) }
.vsw__ph{ flex:0 0 clamp(38px,3.4vw,48px); width:clamp(38px,3.4vw,48px);
  aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center 18%;
  filter:grayscale(1); opacity:.5;
  transition:filter .4s var(--ease-out), opacity .4s var(--ease-out),
             transform .5s var(--spring) }
.vsw__t{ min-width:0 }
.vsw__t b{ display:block; font-size:clamp(14px,.5vw + 13px,17px); font-weight:500;
  letter-spacing:.08em; line-height:1.35 }
.vsw__t i{ display:block; margin-top:3px; font-style:normal;
  font-size:clamp(10.5px,.2vw + 10px,11.5px); letter-spacing:.08em; opacity:.9 }
.vsw__b:hover .vsw__ph{ filter:grayscale(.3); opacity:.85 }
#vp-kuroki:checked  ~ .vsw label[for=vp-kuroki],
#vp-kongoji:checked ~ .vsw label[for=vp-kongoji]{ color:var(--ink) }
#vp-kuroki:checked  ~ .vsw label[for=vp-kuroki] .vsw__ph,
#vp-kongoji:checked ~ .vsw label[for=vp-kongoji] .vsw__ph{
  filter:none; opacity:1; transform:scale(1.05) }

/* 経歴の一文は、選んだ人のぶんだけ枠の下に出します。
   枠の中に入れると切り替えの部品が重くなるため、外へ出しました。

   「。」で切って一文を一行に組んでいます。以前は 12.5px の薄い字で
   40字詰めの2行にしていましたが、ページの中でいちばん小さい字だったため
   本文の余りに見えていました。学部だけ小さく字間を広げて見出し扱いにし、
   残る二文を大きく組むと、読む前に「三つある」ことが分かります（9/8） */
.vsw__bio{ display:none; width:var(--vw);
  margin:clamp(20px,2.4vw,26px) 0 0 var(--vgap) }
#vp-kuroki:checked  ~ .vsw__bio[data-when=kuroki],
#vp-kongoji:checked ~ .vsw__bio[data-when=kongoji]{ display:block }
/* backwards にしています。both（＝backwards+forwards）でも見た目は同じですが、
   both は「終わったあとも最後の姿を保つ」ため、何かの理由で動きが走らない
   環境では opacity:0 のまま消える恐れがあります。backwards なら、走らない
   ときは指定なしの状態＝そのまま見える形に落ち着きます */
.vsw__bio span{ display:block; font-size:14.5px; line-height:1.8;
  letter-spacing:.07em; color:rgba(17,17,17,.66);
  animation:vbio .58s var(--ease-out) backwards }
.vsw__bio span + span{ margin-top:5px }
/* 一文目（学部）だけ見出し扱い。小さく、字間を広げ、薄くします */
.vsw__bio span:first-child{ margin-bottom:11px; font-size:11.5px;
  letter-spacing:.17em; color:rgba(17,17,17,.40) }
/* 切り替えたとき、上の行から順に現れます。display:none から block に
   戻ると animation は最初から走り直すので、切り替えるたびに効きます */
.vsw__bio span:nth-child(1){ animation-delay:.02s }
.vsw__bio span:nth-child(2){ animation-delay:.10s }
.vsw__bio span:nth-child(3){ animation-delay:.18s }
.vsw__bio span:nth-child(4){ animation-delay:.26s }
.vsw__bio span:nth-child(n+5){ animation-delay:.34s }
@keyframes vbio{ from{ opacity:0; transform:translateY(7px) }
                 to{ opacity:1; transform:none } }
/* 狭い画面では二文目が折り返します。行の間を広げたうえで、
   折り返した先だけ一字ぶん下げます（text-indent が padding-left を
   打ち消すので、一行目の頭は枠の左端に揃ったままです）。
   これで「行が増えた」のではなく「一つの文が続いている」と分かります */
@media (max-width:700px){
  .vsw__bio span{ font-size:13.5px; line-height:1.85;
    padding-left:1em; text-indent:-1em }
  .vsw__bio span + span{ margin-top:8px }
}
/* 動きを望まない方には、最初から出したままにします。
   ここを書き落とすと both で opacity:0 のまま消えてしまいます */
@media (prefers-reduced-motion:reduce){
  .vsw__bio span{ animation:none; opacity:1; transform:none }
}
.vp-tx b{ display:block; font-size:clamp(20px,2vw,26px); font-weight:500;
  letter-spacing:.1em; line-height:1.3 }
.vp-meta{ display:flex; gap:10px; margin:12px 0 14px }
.vp-meta i{ padding:4px 11px 5px; border:1px solid var(--line-soft); border-radius:999px;
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  color:var(--muted) }
.vp-bio{ display:block; max-width:30em;
  font-size:12.5px; line-height:1.95; color:var(--muted) }
/* 下まで読んだところに置く、もう一人への入口（2026/09/08 追加）
   いちばん下まで来ると切り替えの枠が画面から外れてしまい、
   人を変えるのに最上部まで戻る必要がありました。
   カオナビ・BuySell Technologies の採用サイトが同じ形です。 */
.vnexts{ width:var(--vw); margin:clamp(34px,4vw,60px) 0 0 var(--vgap) }
.vnext{ display:none; align-items:center; gap:clamp(12px,1.6vw,20px);
  padding:clamp(18px,2vw,26px); border:1px solid var(--line-soft);
  border-radius:var(--r); background:#fff; cursor:pointer;
  transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out) }
#vp-kuroki:checked  ~ .vnexts .vnext[data-when=kuroki],
#vp-kongoji:checked ~ .vnexts .vnext[data-when=kongoji]{ display:flex }
.vnext:hover{ border-color:rgba(8,102,245,.34); box-shadow:0 10px 30px rgba(8,102,245,.10) }
.vnext__l{ flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  color:var(--blue) }
.vnext__ph{ flex:0 0 52px; width:52px; aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center 18%;
  transition:transform .5s var(--spring) }
.vnext:hover .vnext__ph{ transform:scale(1.05) }
.vnext__t b{ display:block; font-size:16px; font-weight:500; letter-spacing:.08em }
.vnext__t i{ font-style:normal; font-size:11.5px; color:var(--muted); letter-spacing:.08em }
.vnext__ar{ position:relative; width:30px; height:1px; margin-left:auto;
  background:var(--ink); transition:width .4s var(--ease-out) }
.vnext__ar::after{ position:absolute; right:0; top:-3px; width:7px; height:7px; content:"";
  border-top:1px solid var(--ink); border-right:1px solid var(--ink);
  transform:rotate(45deg) }
.vnext:hover .vnext__ar{ width:46px }

/* 話し手と聞き手を分ける（8/26）
   野澤さんを同じカードの形で3枚目に並べると、押せば話が読めるように見えます。
   実際には読めないので、ラベルで区切り、枠・大きさ・肩書きの出し方を変えました。 */
.vp-label{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  width:var(--vw); margin:clamp(34px,4.4vw,64px) 0 0 var(--vgap);
  font-size:11.5px; line-height:1.8; color:var(--muted); letter-spacing:.04em }
.vp-label span{ color:var(--blue); font-size:10px; font-weight:700; letter-spacing:.22em }

.vp-host{ width:var(--vw); margin:0 0 0 var(--vgap) }
.vp-host .vp-label{ width:auto; margin-left:0 }
/* 押せない枠であることが形で分かるように、塗りと囲みを付けています。
   話し手2枚と同じ幅まで広げると中身に対して枠が大きすぎるので、幅を止めています */
.vp-hcard{ display:grid; grid-template-columns:64px minmax(0,1fr);
  gap:clamp(16px,1.8vw,24px); align-items:start;
  max-width:640px; margin-top:16px;
  padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.5) }
.vp-hph{ display:block; width:64px; aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center 18% }
.vp-hcard .vp-tx b{ font-size:clamp(16px,1.4vw,19px) }
.vp-hcard .vp-meta{ margin:9px 0 11px }
.vp-meta i.vp-role{ border-color:var(--ink); background:var(--ink); color:var(--paper) }
/* 書き忘れがそのまま公開されないよう、未記入は目に付く形で出します */
.vp-todo{ display:inline-block; padding:3px 10px 4px;
  border:1px dashed var(--orange); color:var(--orange) }

/* 狭い画面。2つを横に並べる形は保ちます（上下に積むと切り替えに見えないため）。
   そのぶん写真と字を小さくします */
@media (max-width:700px){
  .vsw__b{ gap:9px; padding:11px 10px }
  .vsw__t b{ font-size:13.5px; letter-spacing:.04em }
  .vsw__t i{ font-size:10.5px; letter-spacing:.02em }
  .vnext{ flex-wrap:wrap; gap:12px }
  .vnext__l{ flex:1 0 100% }
}

/* スマホ幅。ここだけ、ボタンの中身を「写真が上・字が下」に積み替えます。
   写真の横に字を置く形のままだと、390px では字に使える幅が 84px しかなく、
   「4年目／理系卒／男性」の実寸 83px とほぼ同じで、余白が残りませんでした
   （9.5px まで詰めても、字も一緒に縮むので余白は増えません）。
   積み替えると使える幅が 138px になり、読める大きさのまま収まります。
   2つが横に並ぶ形は変えていないので、切り替えの見え方はそのままです */
@media (max-width:480px){
  .vsw__b{ flex-direction:column; gap:9px; padding:15px 8px 14px; text-align:center }
  .vsw__ph{ flex:0 0 auto; width:46px }
}

/* キーボードで選んでいるとき、どこにいるか分かるように */
#vp-kuroki:focus-visible  ~ .vsw label[for=vp-kuroki],
#vp-kongoji:focus-visible ~ .vsw label[for=vp-kongoji]{
  outline:2px solid var(--blue); outline-offset:3px }

/* 選ばれていない方の本文は出さない */
#vp-kuroki:checked  ~ .vtalk[data-p=kongoji],
#vp-kongoji:checked ~ .vtalk[data-p=kuroki]{ display:none }

/* スマートフォンの番号バナー（8/25）
   狭い画面では左の目次が本文の上に流れてしまい、途中から役に立ちません。
   そこで、上へスクロールしたときだけ番号だけの帯を出します。
   ・パソコンでは出しません（左の目次がそのまま効いているため）
   ・上のヘッダーも上スクロールで出てくるので、ぶつからないよう画面の下に置きます
   ・親（.vtalk）が display:none のときは描画されないので、
     選んでいない話し手のぶんは自然に出ません */
.vmini{ display:none }
@media (max-width:900px){
  .vmini{ display:flex; gap:6px; justify-content:center;
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    background:rgba(244,241,234,.94);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid var(--line-soft);
    transform:translateY(105%); transition:transform .3s var(--ease-out);
    pointer-events:none }
  .vmini.show{ transform:none; pointer-events:auto }
  .vmini a{ min-width:36px; padding:7px 0; border-radius:999px; text-align:center;
    font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--muted);
    transition:color .2s ease, background-color .2s ease }
  .vmini a.on{ color:var(--paper); background:var(--ink) }

  /* 帯が出ている間は「トップへ戻る」を上へ逃がします。
     同じ右下に居座ると帯に重なって押せなくなるためです（8/25）。
     50px は帯の高さ。帯の余白（9px＋9px）と番号の高さを足した実測値です */
  .to-top{ transition:opacity .35s var(--ease-out), transform .35s var(--ease-out),
    background-color .2s ease, bottom .3s var(--ease-out) }
  html.vmini-on .to-top{
    bottom:calc(clamp(18px,2.4vw,34px) + 50px + env(safe-area-inset-bottom, 0px)) }
}
@media (prefers-reduced-motion:reduce){
  .vmini{ transition:none }
  .to-top{ transition:opacity .35s ease, background-color .2s ease }
}

/* 話し手の入れ替え（8/25・幕は廃止）

   全画面を覆う幕はやめました。「切り替えが重い」ためです。
   代わりに、押した場所と中身の両方で、短く変化を返します。
     ・カードの上の罫が、選んだ側へ伸びる（すでにある）
     ・アイコンの色が戻る（すでにある）
     ・本文が下から少し上がりながら現れる（ここ）
   全部で0.26秒。待たされる感じが出ない長さです。

   動かすのは .vtalk ではなく中の .vlayout です。
   transform の付いた要素は position:fixed の基準になってしまい、
   .vtalk に付けると中の番号バナーが、画面ではなくカードの中に固定されます。 */
.vtalk .vlayout{ animation:vt-in .26s var(--ease-out) both }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px) }
                  to  { opacity:1; transform:none } }

/* 「視差効果を減らす」設定のときは、動かさず色の変化だけにします */
@media (prefers-reduced-motion: reduce){
  .vtalk .vlayout{ animation:none !important }
}

/* アバター（社員の声）*/
.av-kuroki{ background-image:url(/images/avatar-kuroki.jpg?v=3fb25815) }
.av-kongoji{ background-image:url(/images/avatar-kongoji.jpg?v=db8c587f) }
.av-nozawa{ background-image:url(/images/avatar-nozawa.jpg?v=773820ef) }

/* 会話 */
.talk{ display:grid; gap:clamp(18px,2.2vw,30px) }
.tk{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:start }
.tk-av{ display:block; width:56px; aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center 18%; border:1px solid var(--line-soft) }
.tk-bb{ position:relative; padding:16px 20px 17px; border-radius:var(--r);
  background:#fff; border:1px solid var(--line-soft) }
.tk-bb::before{ position:absolute; left:-7px; top:20px; width:12px; height:12px; content:"";
  background:#fff; border-left:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  transform:rotate(45deg) }
.tk-bb b{ display:block; margin-bottom:7px; font-size:11px; font-weight:700;
  letter-spacing:.12em; color:var(--muted) }
.tk-bb p{ margin:0; font-size:13.5px; line-height:2.05; letter-spacing:.03em }

/* 聞き手は左・薄く／答える人は右・白 */
.tk-q .tk-bb{ background:rgba(8,102,245,.045); border-color:transparent }
.tk-q .tk-bb::before{ background:rgba(8,102,245,.045); border-color:transparent }
/* --muted（.58）だと薄青の地に対して 4.2:1 しかなく、本文に必要な
   4.5:1 を下回っていました。.74 にして 6.0:1 にしています（8/25） */
.tk-q .tk-bb p{ font-size:13px; color:rgba(17,17,17,.74) }
.tk-a{ grid-template-columns:minmax(0,1fr) 56px; margin-left:clamp(0px,4vw,56px) }
.tk-a .tk-av{ order:2 }
.tk-a .tk-bb{ order:1 }
.tk-a .tk-bb::before{ left:auto; right:-7px;
  border-left:0; border-bottom:0;
  border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft) }
.tk-a .tk-bb b{ text-align:right }

@media (max-width:900px){
  .vlayout{ grid-template-columns:1fr; gap:26px }
  .vindex{ position:static; padding-bottom:18px; border-bottom:1px solid var(--line-soft) }
  .vindex ol{ display:flex; flex-wrap:wrap; gap:2px 14px }
  .vindex a{ padding:5px 0 5px 10px }
  .vindex a::before{ top:8px }
}
/* 狭い画面。アイコンを小さくして間を詰めるだけで、
   左右に振り分ける形はそのまま残します。
   以前はここで答える人も左に寄せていましたが、
   チャットに見えなくなるのでやめました（8/25）。
   幅の面では損をしません。アイコンの列幅は左右どちらでも同じで、
   吹き出しに使える幅は変わらないためです */
@media (max-width:600px){
  .tk  { grid-template-columns:44px minmax(0,1fr); gap:10px }
  .tk-a{ grid-template-columns:minmax(0,1fr) 44px; margin-left:0 }
  .tk-av{ width:44px }
  .tk-bb{ padding:13px 15px 14px }
}

/* =======================================================================
   RECRUIT
   ======================================================================= */
.rc-year{ margin:0 0 clamp(16px,2vw,26px); color:var(--blue);
  font-size:11px; font-weight:700; letter-spacing:.2em }
.rc-lead{ margin:0 0 clamp(30px,3.6vw,54px); font-size:clamp(26px,3.8vw,54px);
  font-weight:430; line-height:1.45; letter-spacing:.06em }

/* 求める人物像 */
.wt-h{ margin:0 0 clamp(20px,2.4vw,34px); font-size:clamp(19px,2.1vw,28px);
  font-weight:500; letter-spacing:.07em }
.wt{ max-width:34em }
.wt p{ margin:0 0 1.5em; font-size:14.5px; line-height:2.1; letter-spacing:.04em }
.wt-list{ margin:0 0 1.8em; padding:0; list-style:none;
  border-top:1px solid var(--line) }
.wt-list li{ position:relative; padding:15px 0 15px 26px;
  border-bottom:1px solid var(--line-soft);
  font-size:15px; font-weight:600; letter-spacing:.05em }
.wt-list li::before{ position:absolute; left:2px; top:22px; width:9px; height:9px;
  content:""; border-radius:50%; background:var(--blue) }

/* =======================================================================
   社員の声への入口　── 本人の言葉を主役にします（甲案・2026/09/02　D-45）

   それまでは、お問い合わせと同じ帯（cta-band）を使い回していました。
   カオナビ・BuySell Technologies の採用サイトを見たところ、どちらも
   入口の見出しを会社の言葉ではなく本人の引用にしていたので、それに倣います。
   引用は対談本文そのままです（check_pull が本文との一致を確かめます）。
   ======================================================================= */
/* 他の節と同じく、左の目次を避けた右の列（.lp-main）の中に置きます。
   左右の余白は 0 にして、上下の罫を同じ列の他の要素と揃えます（9/2） */
/* 見出しと引用の間の説明文。引用が始まる罫まで少し間を置きます */
.vq__lead{ margin-bottom:clamp(20px,2.4vw,34px) }
.vq{ display:grid }
.vq__i{ display:block; padding:clamp(24px,2.6vw,36px) 0;
  border-top:1px solid var(--line-soft); color:var(--ink); text-decoration:none;
  transition:background-color .4s var(--ease-out) }
.vq__i:last-child{ border-bottom:1px solid var(--line-soft) }
/* 左右に余白が無いので、色を敷くと罫からはみ出して見えます。
   代わりに引用の色を少し濃くして、触れていることを示します */
.vq__i:hover .vq__q{ color:var(--blue) }
.vq__q{ transition:color .4s var(--ease-out) }
.vq__i:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
/* 引用は 22em で折り返します。1行を長くしすぎると読み出しがつらくなります */
.vq__q{ display:block; max-width:22em; font-size:clamp(18px,0.62vw + 15.5px,26px);
  line-height:1.72; letter-spacing:.02em }
.vq__f{ display:flex; align-items:center; gap:14px; margin-top:clamp(18px,2vw,26px) }
.vq__ph{ flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  background-size:cover; background-position:center 22%;
  background-color:rgba(8,102,245,.06) }
.vq__n{ display:flex; align-items:baseline; gap:10px; min-width:0 }
.vq__n b{ font-size:14.5px; font-weight:500; letter-spacing:.04em }
.vq__n i{ font-style:normal; font-size:12.5px; color:var(--muted); letter-spacing:.06em }
.vq__ar{ position:relative; display:block; flex:0 0 auto; width:30px; height:1px;
  margin-left:auto; background:var(--ink); transition:width .42s var(--ease-out) }
.vq__ar::after{ position:absolute; right:0; top:-3px; width:7px; height:7px; content:"";
  border-top:1px solid var(--ink); border-right:1px solid var(--ink); transform:rotate(45deg) }
.vq__i:hover .vq__ar{ width:44px }
@media (max-width:760px){
  .vq__i{ padding:20px 0 }
  .vq__q{ font-size:17.5px }
  .vq__n{ flex-direction:column; gap:2px }
}
@media (prefers-reduced-motion:reduce){
  .vq__i,.vq__ar{ transition:none }
}

/* =======================================================================
   選考の流れ　── 縦に並ぶ時系列
   （9/8　黒木さん「今の動く箱のUIは不評だった。普通のタテにならんだ
     時系列にしてください」により、9/2 の「選ぶと横に広がる帯」から
     差し替えました。選ぶ操作そのものを無くしたので、3段階とも
     最初から開いています。main.js の帯の処理も外しました）

   左に丸と線画を置き、そこから次の段階へ縦線が伸びます。
   説明文の右に写真。画面が狭いときは写真を説明文の下へ回します。

   --spring は社員の声の切り替え（.vsw__ind）でも使うので残しています。
   ======================================================================= */
:root{ --spring:linear(0, 0.0075, 0.0281, 0.0593, 0.099, 0.1452, 0.1961, 0.2502,
  0.3062, 0.3629, 0.4195, 0.4751, 0.5291, 0.5809, 0.6303, 0.6768, 0.7202, 0.7605,
  0.7976, 0.8315, 0.8622, 0.8898, 0.9144, 0.9362, 0.9553, 0.9718, 0.9861, 0.9981,
  1.0082, 1.0165, 1.0232, 1.0285, 1.0324, 1.0353, 1.0371, 1.0381, 1.0384, 1.0381,
  1.0373, 1.0361, 1.0345, 1.0327, 1.0308, 1.0287, 1.0265, 1.0244, 1.0222, 1.02,
  1.018, 1.016, 1.0141, 1.0123, 1.0107, 1.0091, 1.0077, 1.0064, 1.0052, 1.0042,
  1.0032, 1.0024, 1.0017, 1.001, 1.0005, 1, 1) }

.flows{ margin:clamp(30px,3.4vw,52px) 0 0; padding:0; list-style:none }

/* 1行3列。左＝丸、中＝題名と説明文、右＝写真。
   題名と説明文は fl__body にまとめてあります。別々の行に置くと、
   右の写真のほうが高いときに grid が余りを両方の行へ均等に配り、
   題名と説明文の間が段ごとに 14px・27px とばらつきます（9/8） */
.fl{ position:relative; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(15px,1.7vw,26px);
  padding-bottom:clamp(28px,3.2vw,46px) }
.fl:last-child{ padding-bottom:0 }
.fl__body{ grid-column:2; grid-row:1; min-width:0 }

/* 次の段階へつながる縦線。丸の中心（46 ÷ 2 = 23px）に合わせます。
   最後の段階の下には出しません */
.fl:not(:last-child)::before{ position:absolute; z-index:0; left:23px;
  top:55px; bottom:9px; width:1px; content:""; background:var(--line-soft) }

/* 列は3つとも明示します。写真の列を省くと、行だけ指定した要素が先に
   置かれる決まりのため、写真が2列目を取ってしまいます（9/8） */
.fl__mk{ position:relative; z-index:1; grid-column:1; grid-row:1;
  align-self:start;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-soft); background:#fff; color:var(--blue) }
.fl__ic{ width:21px; height:21px }

/* min-height を丸と同じ 46px にし、中の字を中央ぞろえにすると、
   題名が1行でも2行でも、丸との中心が合ったままになります */
.fl__t{ display:flex; align-items:center; flex-wrap:wrap;
  gap:5px 10px; min-height:46px; margin:0;
  font-size:clamp(16px,.5vw + 14.5px,19px); font-weight:500;
  line-height:1.5; letter-spacing:.04em }

/* 「面接1回」の札。9/8 の指摘「採用までのスピード感をアピールしたい」 */
.fl__badge{ display:inline-flex; align-items:center; padding:3px 10px 4px;
  border-radius:999px; background:var(--blue); color:#fff;
  font-size:11.5px; font-style:normal; font-weight:500; letter-spacing:.1em }

.fl__txt{ margin:7px 0 0;
  color:var(--muted); font-size:13.5px; line-height:1.95; letter-spacing:.03em }

/* 120px は、題名46px＋間7px＋説明文2行68px＝121px にそろえた値です。
   写真だけが下に飛び出して見えるのを防ぎます */
.fl__ph{ grid-column:3; grid-row:1; align-self:start;
  width:clamp(96px,8.4vw,120px); height:clamp(96px,8.4vw,120px);
  object-fit:cover; border-radius:10px; background:rgba(8,102,245,.07) }

@media (max-width:760px){
  .fl{ column-gap:13px; padding-bottom:26px }
  .fl:not(:last-child)::before{ left:20px; top:49px; bottom:7px }
  .fl__mk{ width:40px; height:40px }
  .fl__ic{ width:19px; height:19px }
  .fl__t{ min-height:40px; font-size:16px }
  .fl__ph{ width:84px; height:84px }
}
/* さらに狭いときは、写真を右に置くと説明文が11字詰めまで痩せてしまうので、
   説明文の下へ回して幅いっぱいに使います。
   縦横比 3:2 は、元が正方形の写真を横長に切りすぎないための値です */
@media (max-width:560px){
  .fl{ grid-template-columns:auto minmax(0,1fr) }
  .fl__ph{ grid-column:2; grid-row:2; width:100%; height:auto;
    aspect-ratio:3 / 2; margin-top:13px }
}

/* =======================================================================
   CONTACT　── フォームは作りません（D-04）
   ======================================================================= */
.cms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(16px,2.2vw,32px); margin-top:clamp(28px,3.2vw,48px) }
.cms .cm{ padding:clamp(24px,2.6vw,34px); border:1px solid var(--line-soft);
  background:#fff; border-radius:var(--r) }
.cms .k{ margin-bottom:12px; color:var(--muted); font-size:9px; font-weight:700;
  letter-spacing:.2em }
.cms .v{ display:block; font-size:clamp(19px,1.8vw,25px); font-weight:500;
  letter-spacing:.04em; line-height:1.4 }
.cms a.v:hover{ color:var(--blue) }
.cms .v-mail{ font-size:clamp(14px,1.15vw,17px); word-break:break-all }
.cms .n{ margin:12px 0 0; color:var(--muted); font-size:11.5px; line-height:1.8 }

/* --- 最寄駅 ------------------------------------------------------------ */
.stn{ margin:0; border-top:1px solid var(--line) }
.stn > div{ display:grid; grid-template-columns:minmax(150px,200px) 1fr auto;
  gap:clamp(12px,2.4vw,32px); align-items:baseline;
  padding-block:17px; border-bottom:1px solid var(--line-soft) }
.stn b{ color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.12em }
.stn span{ font-size:14px; letter-spacing:.04em }
.stn em{ font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:.08em }
@media (max-width:760px){
  .stn > div{ grid-template-columns:1fr auto; gap:4px 12px }
  .stn b{ grid-column:1 / -1 }
}

/* --- まだ試作の型に直していないページの仮置き（3.3・3.5・3.6 で消えます） - */
.main{ min-height:60vh }
.sec{ padding-block:clamp(56px,7vw,104px); border-bottom:1px solid var(--line-soft) }
.sec .en{ display:block; margin-bottom:10px; color:var(--muted);
  font-size:10px; font-weight:700; letter-spacing:.22em }
.sec .h1{ margin:0 0 18px; font-size:clamp(30px,4.6vw,52px); font-weight:430; letter-spacing:.08em }
.sec .crumb{ margin-bottom:14px; color:var(--muted); font-size:10.5px; letter-spacing:.12em }
.btn{ display:inline-block; margin-top:22px; padding:13px 30px; border:1px solid var(--ink);
  border-radius:var(--r); font-size:11px; font-weight:650; letter-spacing:.14em;
  transition:background-color .2s ease, color .2s ease }
.btn:hover,.btn:focus-visible{ background:var(--ink); color:var(--paper) }

/* --- 作成中の目印（実装が済んだら消えます） ----------------------------- */
/* 準備中の印。社内向けの点線の箱をやめ、静かな一言にしました（8/28） */
.todo{ margin:0; padding:26px 0; color:var(--muted); letter-spacing:.08em;
  font-size:clamp(13px, 12.4px + 0.13vw, 14px) }


/* --- TOP　キービジュアル ------------------------------------------------- */
/* 帯がヘッダーのナビに重なって読めなくなるので、上にも生成りをぼかして敷きます。
   左の縦帯（試作から引き継ぎ）に、上からの横帯を重ねています */
.hero::after{ background:
  linear-gradient(180deg, rgba(244,241,234,.92) 0%,
                          rgba(244,241,234,.62) 9%,
                          rgba(244,241,234,0)  20%),
  linear-gradient(90deg, rgba(244,241,234,.98) 0%,
                         rgba(244,241,234,.94) 13%,
                         rgba(244,241,234,.42) 29%,
                         transparent 47%) }
/* リード文は本文より少し大きく、行間を広めに */
.top-page .hero-copy p{ max-width:30em; font-size:clamp(13px,1.05vw,15.5px);
  line-height:2.1; letter-spacing:.04em }

/* --- TOP　3工程の要約（要件表 N-01 の「3工程の要約」） --------------------
   以前は設計・構築・運用を1面ずつ画面いっぱいに使い、3面とも SERVICE へ
   飛ばしていました。行き先が同じ面を3回めくらせる意味がないので、
   1つの帯に畳んでいます（8/27・A案）。ここにリンクは置きません。
   要件表の言葉が「要約」なので、読ませる要素として扱います。
   ------------------------------------------------------------------------ */
.flow3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; margin:clamp(30px,3.4vw,48px) 0 0;
  border:1px solid var(--line-soft); background:var(--line-soft) }
.flow3 > div{ padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);
  background:var(--paper) }
.flow3 .no{ display:block; margin-bottom:12px; color:var(--blue);
  font-size:10px; font-weight:700; letter-spacing:.22em }
.flow3 h3{ margin:0 0 10px; font-size:17px; font-weight:500; letter-spacing:.08em }
.flow3 p{ margin:0; font-size:12.5px; line-height:1.95; color:var(--muted) }

/* --- 行き先を並べるタイル（TOP の RECRUIT・ABOUT） -----------------------
   ページ全体ではなく、ページの中の節へ直接送ります。
   読み手が探しているものに、そのまま着地させるためです。
   ------------------------------------------------------------------------ */
.lgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; border:1px solid var(--line-soft); background:var(--line-soft) }
.ltile{ display:block; padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,24px);
  background:var(--paper); color:inherit; text-decoration:none;
  transition:background-color .25s ease }
.ltile:hover, .ltile:focus-visible{ background:rgba(255,255,255,.62) }
.ltile .en{ display:block; margin-bottom:10px; color:var(--blue);
  font-size:10px; font-weight:700; letter-spacing:.2em }
.ltile b{ display:block; font-size:15px; font-weight:500; letter-spacing:.07em }
.ltile .go{ display:block; margin-top:14px; color:var(--muted); font-size:11px;
  font-weight:700; letter-spacing:.14em; transition:color .25s ease }
.ltile:hover .go{ color:var(--ink) }

/* TOP の ACCESS は行き先が1つなので、住所と最寄駅だけ置きます */
.acc1{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 24px;
  margin:0 0 clamp(22px,2.4vw,32px); font-size:13px; line-height:2 }
.acc1 span{ color:var(--muted) }
/* --- 節の余白（全ページ共通の問題① 8/27） ------------------------------
   試作は上下 64〜118px でした。D-27②「1節が1画面ぶんの領域を持つ」を、
   私が余白で稼ぐ方向に読んだためです。中身で1画面ぶんの意味を持たせるのが
   本来なので、余白は7割に詰めます。1440px の画面で節の間が 230px→160px。
   ------------------------------------------------------------------------ */
.section{ padding-block:clamp(48px,5.5vw,80px) }
.sec-head{ margin-bottom:clamp(24px,2.6vw,38px) }

/* --- 節の見出しの型（8/27　参考サイトの実測値に合わせる） ----------------
   参考サイトの該当規則（getComputedStyle ではなくCSSの原文から取ったもの）:
     .c-title__primary .:ja  font-size: clamp(0.875rem, 0.8555rem + 0.0781vw, 0.9375rem)
     .c-title__primary .:en  font-size: clamp(2.8125rem, 2.2266rem + 2.3438vw, 4.6875rem)
   rem を px に直して、そのまま当てています（1rem = 16px）。
   ページ見出し（page-head h1）は、節見出しより大きい状態を保つため引き上げます。
   ------------------------------------------------------------------------ */
.sec-head h2{ display:flex; flex-direction:column-reverse; gap:15px;
  margin:0; font-weight:400; letter-spacing:normal; line-height:1 }
.sec-head h2 .ja{ color:var(--muted);
  font-size:clamp(14px, 13.7px + 0.08vw, 15px); font-weight:400; letter-spacing:.12em }
.sec-head h2 .en{ letter-spacing:.01em;
  font-size:clamp(45px, 35.6px + 2.34vw, 75px) }
.sec-head-c h2{ align-items:center; text-align:center }
.sec-head-w h2{ color:var(--paper) }
.sec-head-w h2 .ja{ color:rgba(244,241,234,.72) }
.page-head h1{ font-size:clamp(44px, 30px + 4.6vw, 96px) }
/* =========================================================================
   下層ページの型（8/28　参考サイト j-q.co.jp/company/ の実測値）

   画面幅1536pxで測った値です。かっこ内が向こうの数字。
     外枠      幅1440・左右の内側余白120 → 中身1200（x=160）
     見出し    上下の余白90、和文48px/700/行72、英字18px（灰）、間24、英字は下寄せ
     区切り線  0.8px #d5d8d5、幅1200
     節        上下の余白96。左に目次306、右に本文894
     目次      position:sticky top:176、項目14px/行21、間24、今いる項目は濃い色＋「─」
     節見出し  40px/700/行60。その下 60px 空けて本文
     定義リスト 上下の余白28・下だけ罫。見出し204px（太）／本文690px

   書体・色・太さは、うちのもの（游ゴシック／--ink／400）のままにしています。
   向こうは太さ700ですが、サイト全体を細い字で通しているためです。
   ------------------------------------------------------------------------ */
.lp-wrap{ width:min(100% - 80px, 1440px); margin-inline:auto;
  padding-inline:clamp(20px, 7.81vw, 120px) }
/* スマホでは左右の余白が効きすぎていました。390pxの画面で中身が236px
   （画面の63%）しかなく、絞り込みのボタンが2行に折れる原因でした。
   狭い画面では余白を詰め、中身を画面の85%まで広げます（8/28） */
@media (max-width:760px){
  .lp-wrap{ width:min(100% - 32px, 1440px); padding-inline:12px }
}

/* --- ページ見出し --- */
/* 上の余白には、ヘッダー（116px・760px以下は88px）のぶんを足します。
   ヘッダーは position:absolute で本文に重なるためです。
   参考サイトも main に padding-top:80px（＝向こうのヘッダーの高さ）を
   置いて同じことをしていました。 */
.lp-head{ padding-block:calc(116px + clamp(44px, 5.86vw, 90px))
                        clamp(44px, 5.86vw, 90px) }
@media (max-width:760px){
  .lp-head{ padding-top:calc(88px + clamp(44px, 5.86vw, 90px)) }
}
.lp-head__ttl{ display:flex; align-items:baseline; gap:clamp(12px,1.56vw,24px);
  margin:0; font-weight:400; letter-spacing:.02em; line-height:1.5;
  font-size:clamp(28px, 17.6px + 1.98vw, 48px) }
.lp-head__ttl .en{ color:var(--muted); letter-spacing:.04em; line-height:1;
  font-size:clamp(13px, 10.4px + 0.5vw, 18px) }
.lp-head__ttl .en i{ margin-right:.9em; font-style:normal }
/* 来た道（サービス詳細） */
.lp-head__crumb{ margin:0 0 clamp(14px,1.4vw,22px); color:var(--muted);
  letter-spacing:.06em; line-height:1;
  font-size:clamp(11px, 10.3px + 0.13vw, 13px) }
.lp-head__crumb a{ color:inherit; text-decoration:none }
.lp-head__crumb a:hover{ color:var(--ink) }
.lp-rule{ height:0; margin:0; border:0; border-top:1px solid var(--line-soft) }

/* --- 節（左に目次・右に本文） --- */
.lp-secs{ padding-block:clamp(48px, 6.25vw, 96px) }
.lp-grid{ display:grid; grid-template-columns:25.5% 1fr }
.lp-nav__in{ position:sticky; top:clamp(86px, 6vw, 92px);
  max-width:200px; padding-right:20px }
.lp-nav__list{ display:flex; flex-direction:column; gap:clamp(16px,1.56vw,24px);
  margin:0; padding:0; list-style:none }
.lp-nav__a{ position:relative; display:inline-block; color:var(--muted);
  text-decoration:none; letter-spacing:.04em; line-height:1.5;
  font-size:clamp(13px, 12.3px + 0.11vw, 14px);
  transition:color .25s var(--ease-out) }
.lp-nav__a:hover{ color:var(--ink) }
/* 今いる節には「─」を付けます（参考サイトと同じ） */
.lp-nav__a.is-on{ color:var(--ink) }
.lp-nav__a.is-on::before{ position:absolute; left:-24px; top:50%; width:14px;
  height:1px; background:var(--ink); content:"" }

.lp-sec + .lp-sec{ margin-top:clamp(48px, 12.5vw, 192px) }
.lp-sec__ttl{ display:flex; align-items:baseline; flex-wrap:wrap;
  gap:clamp(10px,1.3vw,20px); margin:0 0 clamp(28px,4.56vw,70px);
  font-weight:400; letter-spacing:.02em; line-height:1.5;
  font-size:clamp(24px, 15.7px + 1.58vw, 40px) }
.lp-sec__ttl .en{ color:var(--muted); letter-spacing:.04em;
  font-size:clamp(11px, 9.7px + 0.26vw, 15px) }
.lp-sec__ttl .en i{ margin-right:.9em; font-style:normal }
.lp-lead{ margin:0 0 clamp(24px,2.6vw,40px); line-height:1.75;
  letter-spacing:.04em; font-size:clamp(14px, 13px + 0.2vw, 16px) }

/* --- 定義リスト（向こうの会社概要と同じ形） --- */
.lp-dl{ margin:0 }
.lp-dl__it{ display:flex; gap:0;
  padding-block:clamp(18px,1.82vw,28px);
  border-bottom:1px solid var(--line-soft) }
.lp-dl__it:first-child{ border-top:1px solid var(--line-soft) }
.lp-dl dt{ flex:0 0 22.8%; font-weight:500; letter-spacing:.06em; line-height:1.75;
  font-size:clamp(14px, 13px + 0.2vw, 16px) }
.lp-dl dd{ flex:1 1 auto; margin:0; color:var(--muted); line-height:1.75;
  letter-spacing:.04em; font-size:clamp(14px, 13px + 0.2vw, 16px) }
.lp-dl__big{ display:block; color:var(--ink); text-decoration:none;
  letter-spacing:.02em; line-height:1.4;
  font-size:clamp(17px, 13.8px + 0.6vw, 24px) }
a.lp-dl__big:hover{ color:var(--blue) }
.lp-dl__n{ display:block; margin-top:6px;
  font-size:clamp(12px, 11.3px + 0.13vw, 13px) }
.lp-dl__n2{ color:var(--muted); font-size:clamp(12px, 11.3px + 0.13vw, 13px) }

/* --- 導入（節の前に置く前置き。RECRUIT のように導入があるページ用） ---
   本文の列（右側）の中に置きます。目次のかたまりの前に置くと、
   目次が導入のぶん下へ押し下げられ、ページの上のほうで見えなくなるためです
   （8/28 黒木さん「インデックスの位置が低すぎる」）。 */
.lp-intro{ margin-bottom:clamp(48px, 12.5vw, 192px) }
.lp-intro__lb{ margin:0 0 clamp(14px,1.4vw,22px); color:var(--muted);
  letter-spacing:.12em; line-height:1;
  font-size:clamp(12px, 11.3px + 0.13vw, 13px) }
.lp-intro__ttl{ margin:0 0 clamp(24px,2.9vw,44px); font-weight:400;
  letter-spacing:.02em; line-height:1.6;
  font-size:clamp(24px, 15.7px + 1.58vw, 40px) }

/* --- 本文の中で使う部品 --- */
/* 向こうの h3（32px/行48px）に合わせています */
.lp-h3{ margin:0 0 clamp(16px,1.6vw,24px); font-weight:500; letter-spacing:.04em;
  line-height:1.5; font-size:clamp(19px, 12.4px + 1.27vw, 32px) }
/* h3 より一段小さい小見出し（サービス詳細の「主な技術」など） */
.lp-h4{ margin:clamp(28px,3vw,44px) 0 clamp(12px,1.2vw,18px); font-weight:500;
  letter-spacing:.06em; line-height:1.6;
  font-size:clamp(14px, 13px + 0.2vw, 16px) }
/* 本文の列いっぱいに置く写真 */
.lp-fig{ margin:clamp(24px,2.6vw,40px) 0 0 }
/* 規程などの長い本文は、読みやすい幅（本文の列と同じ894px）で止めます */
.lp-doc{ max-width:894px }
.lp-fig img{ display:block; width:100%; height:auto; border-radius:var(--r) }
/* ひとまわり大きい本文（向こうの企業理念・行動指針の本文が18px/行36px） */
.lp-p-l{ margin:0 0 clamp(18px,1.8vw,28px); line-height:2; letter-spacing:.04em;
  font-size:clamp(15px, 13px + 0.33vw, 18px) }
.lp-p-l:last-child{ margin-bottom:0 }
/* SERVICE の導入のように、目次の列が無いページで幅を止めるとき */
.lp-intro__bd{ max-width:894px; margin-bottom:clamp(48px, 6.25vw, 96px) }

/* --- 代表メッセージ（向こうのトップメッセージと同じ置き方・大きさ） ---
   文章470px ＋ 間64px ＋ 写真360×480（3:4）＝ 本文の列894px。
   写真は右、上ぞろえ。8/28 黒木さん「CEO写真の配置とサイズも合わせて」 */
.lp-msg{ display:flex; align-items:flex-start; gap:clamp(24px, 4.17vw, 64px) }
.lp-msg__tx{ flex:1 1 0; min-width:0 }
.lp-msg__bd p{ margin:0 0 clamp(12px,1.05vw,16px); line-height:1.95;
  letter-spacing:.04em; font-size:clamp(14px, 13px + 0.2vw, 16px) }
.lp-msg__sign{ margin:clamp(24px,3.13vw,48px) 0 0; font-weight:500;
  letter-spacing:.06em; line-height:1.75;
  font-size:clamp(14px, 13px + 0.2vw, 16px) }
.lp-msg__sign span{ display:block; font-weight:400; color:var(--muted) }
.lp-msg__ph{ flex:0 0 clamp(180px, 23.44vw, 360px); aspect-ratio:3/4;
  border-radius:var(--r); background-size:cover; background-position:center top }

/* --- 会社沿革　横に流れる年表（8/28に作り直し） -------------------------
   前の版が重かった原因は、拡大の演出に font-size・width・height・margin・
   background-size を使っていたことです。これらは動かすたびに
   ブラウザが文字組みと配置を計算し直します（レイアウトのやり直し）。
   さらに毎フレーム offsetWidth を読み、年号の再生のたびに
   void offsetWidth で強制的に計算させていました。

   作り直した版は transform（拡大）と opacity（濃さ）しか動かしません。
   この2つは配置の計算をやり直さずに描けます。
   各部品は絶対配置にして、拡大しても周りがずれないようにしています。
   スクロールの追従は Motion 13.1.1 の scroll() に任せます（D-42）。
   ------------------------------------------------------------------------ */
.lp-hist3__pin{ position:sticky; top:clamp(86px, 6vw, 92px) }
.lp-hist3__stage{ position:relative; height:min(340px, 46vh); overflow:hidden }
/* 固定される箱の中に見出しも入れています。見出しの下の余白は詰めます */
.lp-hist3__pin .lp-sec__ttl{ margin-bottom:clamp(20px, 2.6vw, 40px) }
.lp-hist3__axis{ position:absolute; left:0; right:0; top:146px; height:1px;
  background:var(--line); z-index:0 }
.lp-hist3__axis i{ display:block; width:calc(var(--p, 0) * 100%); height:100%;
  background:var(--blue); opacity:.55 }
.lp-hist3__rail{ position:absolute; left:0; top:0; display:flex; height:100%;
  margin:0; padding:0; list-style:none; z-index:1;
  will-change:transform; transform:translate3d(0,0,0) }

.hy3{ position:relative; flex:0 0 240px; height:100% }
.hy3 > *{ position:absolute; left:18px; margin:0;
  transition:transform .34s var(--ease-out), opacity .34s var(--ease-out),
             color .34s var(--ease-out) }
/* 年号　基準を72pxで置き、ふだんは0.36倍に縮めて見せます */
.hy3__y{ top:0; font-size:72px; font-weight:400; line-height:1; color:var(--muted);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
  transform-origin:left bottom; transform:scale(.361) }
.hy3__m{ top:80px; font-style:normal; font-size:10px; font-weight:700;
  letter-spacing:.16em; color:var(--muted); opacity:.5;
  transform-origin:left top }
/* 丸　基準を84pxで置き、軸の上で中心をそろえたまま縮めます */
.hy3__ic{ top:104px; width:84px; height:84px; border-radius:50%;
  background-color:var(--paper); border:1px solid var(--line);
  background-repeat:no-repeat; background-position:center; background-size:42px 42px;
  transform-origin:50% 50%; transform:scale(.62) }
/* 説明　基準を14pxで置き、ふだんは0.79倍。行の折り返しは変わりません */
.hy3__t{ top:212px; width:204px; font-size:14px; line-height:1.95; color:var(--muted);
  opacity:.42; transform-origin:left top; transform:scale(.786) }

.hy3.is-on .hy3__y{ transform:scale(1); color:var(--ink) }
.hy3.is-on .hy3__m{ opacity:1 }
.hy3.is-on .hy3__ic{ transform:scale(1); border-color:var(--blue);
  box-shadow:0 10px 26px rgba(8,102,245,.14) }
.hy3.is-on .hy3__t{ transform:scale(1); opacity:1; color:var(--ink) }
/* 更新を終えたものは、選ばれても控えめに */
.hy3.is-past .hy3__ic{ opacity:.55 }
.hy3.is-past.is-on .hy3__y{ color:var(--muted) }
.hy3.is-past.is-on .hy3__ic{ border-color:var(--line); box-shadow:none }
.hy3.is-past.is-on .hy3__t{ color:var(--muted); opacity:.8 }

/* 固定して流す仕掛けが使えないとき（JSなし・動きを減らす設定・狭い画面）は、
   指でも動かせるふつうの横スクロールの帯にします */
.lp-hist3:not(.is-pinned) .lp-hist3__pin{ position:static }
.lp-hist3:not(.is-pinned):not(.is-swiper) .lp-hist3__stage{ height:auto; overflow-x:auto;
  padding-bottom:14px; -webkit-overflow-scrolling:touch }
.lp-hist3:not(.is-pinned) .lp-hist3__axis{ display:none }
/* Swiper に渡すときは、この打ち消しを効かせません。
   transform:none !important が Swiper の位置決めを潰していました（8/28） */
.lp-hist3:not(.is-pinned):not(.is-swiper) .lp-hist3__rail{ position:static;
  height:auto; transform:none !important }
.lp-hist3:not(.is-pinned):not(.is-swiper) .hy3{ height:auto; padding:0 14px 8px 0 }
/* position:static に戻すだけだと、b・em・i は「文字扱いの箱」に戻り、
   幅と高さの指定が効かなくなります（丸が縦線1本に潰れ、月が年にくっつく）。
   display:block を必ず添えます（8/28にスマホで発覚） */
.lp-hist3:not(.is-pinned) .hy3 > *{ position:static; display:block;
  transform:none; opacity:1; color:var(--ink) }
.lp-hist3:not(.is-pinned) .hy3__y{ font-size:26px; line-height:1.1 }
.lp-hist3:not(.is-pinned) .hy3__m{ margin:5px 0 0; opacity:1 }
/* 拡大で縮めるのではなく、はじめから52pxで置きます */
.lp-hist3:not(.is-pinned) .hy3__ic{ width:52px; height:52px; margin:14px 0 0;
  background-size:26px 26px }
.lp-hist3:not(.is-pinned) .hy3__t{ margin-top:14px; font-size:13px; opacity:1 }
/* Swiper が読めなかったときのための、ふつうの横スクロール */
.lp-hist3:not(.is-pinned) .lp-hist3__stage{ scrollbar-width:none;
  overscroll-behavior-x:contain }
.lp-hist3:not(.is-pinned) .lp-hist3__stage::-webkit-scrollbar{ display:none }

/* --- Coverflow の回転木馬（スマホ・Swiper 14.2.0／MIT） ------------------
   真ん中のカードが正面、両脇は奥へ傾いて小さくなります。
   傾きや奥行きは JavaScript 側の coverflowEffect で決めています。
   ここでは、その中に置く1枚の大きさと見た目だけを指定します。 */
/* 両脇のカードを見せるため、Swiper の枠は切り落としません。
   そのままだとページごと横に328pxはみ出すので、節の側で切ります。
   overflow-x:clip はスクロールを作らないので、貼り付きの動きも壊れません（8/28） */
.lp-hist3.is-swiper{ overflow-x:clip }
.lp-hist3.is-swiper .lp-hist3__stage{ overflow:visible; height:auto;
  padding:6px 0 10px }
.lp-hist3.is-swiper .lp-hist3__rail{ align-items:stretch }
/* 1枚の幅は Swiper が計算して直接書き込みます。
   もとの指定（flex:0 0 240px）が残っていると、Swiper が思っている幅（245px）と
   実際の幅（240px）が食い違い、5pxずつずれて「中途半端な位置で止まる」状態に
   なっていました。flex の指定を外して、Swiper の値を効かせます（8/28） */
.lp-hist3.is-swiper .hy3{ flex:0 0 auto; height:auto; box-sizing:border-box;
  padding:22px 20px; border:1px solid var(--line-soft); border-radius:var(--r);
  background:#fff; box-shadow:0 8px 26px rgba(17,17,17,.05) }
/* 真ん中以外は少し薄く。切り替わりに合わせて戻ります */
.lp-hist3.is-swiper .hy3{ opacity:.5;
  transition:opacity .45s var(--ease-out) }
.lp-hist3.is-swiper .swiper-slide-active{ opacity:1 }
.lp-hist3.is-swiper .hy3__ic{ margin-top:16px }
.lp-hist3.is-swiper .hy3__t{ width:auto }

/* --- 認証・資格 --- */
/* 認証マークの画像は白地です。そのまま置くと、地色（--paper #f4f1ea）の上に
   白い四角が乗って「貼り付けた」ように浮きます。
   multiply は「重ねた色を掛け合わせる」混ぜ方で、白（255）を掛けても
   相手の色は変わらないため、白地だけが地色に置き換わって消えます。
   黒はそのまま黒、ISMS-AC の青は #004EA1 → #004A94 とごくわずかに沈むだけです。
   画像そのものは改変していないので、認証マークの使用規定の面でも安全です（9/3） */
.lp-cert__img{ mix-blend-mode:multiply }
.lp-cert__img{ display:block; width:100%; max-width:520px; height:auto;
  margin:0 0 clamp(24px,2.6vw,40px); border-radius:var(--r) }

@media (max-width:900px){
  .lp-msg{ flex-direction:column-reverse }
  .lp-msg__ph{ flex:none; width:min(280px, 70%) }
  .lp-hist__it{ flex-wrap:wrap }
  .lp-hist__ic{ order:-1 }
}
.lp-p{ margin:0 0 clamp(16px,1.6vw,24px); line-height:1.95; letter-spacing:.04em;
  font-size:clamp(14px, 13px + 0.2vw, 16px) }
.lp-p:last-child{ margin-bottom:0 }
.lp-ul{ margin:0 0 clamp(20px,2.1vw,32px); padding:0; list-style:none }
.lp-ul li{ position:relative; padding-left:1.5em; line-height:1.95;
  letter-spacing:.04em; font-size:clamp(14px, 13px + 0.2vw, 16px) }
.lp-ul li + li{ margin-top:8px }
.lp-ul li::before{ position:absolute; left:.35em; top:.85em; width:5px; height:5px;
  border-radius:50%; background:var(--blue); content:"" }
/* 節の下に置く案内の帯。本文の列と同じ幅にそろえます */
.lp-cta{ padding-bottom:clamp(48px, 6.25vw, 96px) }
.lp-cta h2{ letter-spacing:.06em; font-size:clamp(20px, 15.8px + 0.78vw, 28px) }

/* 地図。参考サイトに地図は無いので、幅は本文の列いっぱい、高さは 16:9 に */
.lp-map{ overflow:hidden; aspect-ratio:16/9; border-radius:var(--r);
  background:rgba(17,17,17,.05) }
.lp-map iframe{ display:block; width:100%; height:100%; border:0 }

@media (max-width:900px){
  .lp-grid{ display:block }
  .lp-nav__in{ position:static; padding-right:0 }
  .lp-nav__list{ flex-direction:row; flex-wrap:wrap; gap:10px 20px;
    margin-bottom:36px }
  .lp-nav__a.is-on::before{ display:none }
  .lp-dl__it{ display:block }
  .lp-dl dd{ margin-top:8px }
}

/* =========================================================================
   SERVICE　冒頭と一覧（8/28　黒木さんの手描き案どおりに作ったもの）

   直した点
     ・見出しが SERVICE／サービス と2回出ていたので、帯のほうを作り直して1回に
     ・帯が460pxの空白だったので、見出し・和文・導入文を横に並べて高さを詰めた
     ・帯の英字は明朝でしたが、TOPの節見出しと同じゴシックの大きさに揃えた
       （font-size は TOP の .sec-head h2 .en と同じ式）
     ・カードを並べていたところを、左が一覧・右が絵の形に。触れた行の絵が出ます

   文字と余白の値は、いただいた手描き案（横1672px）から起こして、
   画面幅に対する比率に直しています。
   ------------------------------------------------------------------------ */
:root{ --svc-gut:max(28px, min(50px, 3vw)) }   /* 画面の左右の余白 */

/* --- 冒頭は他ページと同じ型（lp-head）にしました（8/28）
       黒木さん「一覧の見せ方はこのままでいい。他ページと形式を揃えたい」
       以前は SERVICE を大きなゴシックで置き、縦罫と橙の下線を添えていましたが、
       ABOUT・RECRUIT・ACCESS・CONTACT と同じ「和文が主・英字が従」に統一。
       それに伴い .svch 一式は不要になったので削除しました --- */
/* 目次の列が無いページの導入。左に寄せる必要がありません */
.lp-intro-solo{ padding-top:clamp(40px, 5.2vw, 80px);
  margin-bottom:clamp(40px, 5.2vw, 80px) }
.lp-intro-solo .lp-p{ max-width:894px }
/* --- 一覧と絵 --- */
.svcp{ display:grid; grid-template-columns:47.2% 1fr;
  border-block:1px solid var(--line-soft) }
.svcp__list{ margin:0; padding:0; list-style:none }

.svcp__item{ position:relative; display:flex; align-items:center;
  gap:clamp(14px,1.6vw,26px);
  padding:clamp(20px,1.9vw,32px) clamp(20px,2.2vw,40px)
          clamp(20px,1.9vw,32px) var(--svc-gut);
  border-bottom:1px solid var(--line-soft);
  color:inherit; text-decoration:none;
  transition:background-color .28s var(--ease-out), color .28s var(--ease-out) }
.svcp__no{ flex:0 0 auto; min-width:2.2em; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  font-size:clamp(13px, 11.6px + 0.12vw, 17px) }
/* 番号と名前のあいだの縦罫。触れると橙になります */
.svcp__nm{ position:relative; flex:1 1 auto;
  padding-left:clamp(20px,2.4vw,42px); letter-spacing:.06em; line-height:1.5;
  font-size:clamp(17px, 14px + 0.48vw, 24px) }
.svcp__nm::before{ position:absolute; left:0; top:50%; width:1px; height:1.35em;
  background:var(--line); content:""; transform:translateY(-50%);
  transition:background-color .28s var(--ease-out), width .28s var(--ease-out) }
/* 矢印。TOP の View more と同じ形にしています */
.svcp__ar{ position:relative; flex:0 0 auto; width:26px; height:1px;
  background:currentColor; transition:transform .28s var(--ease-out) }
.svcp__ar::after{ position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  content:""; transform:rotate(45deg) }

.svcp__item.is-on{ background:var(--blue); color:#fff }
.svcp__item.is-on .svcp__nm::before{ width:2px; background:var(--orange) }
.svcp__item.is-on .svcp__ar{ transform:translateX(6px) }
/* 触れる仕掛けが無い端末（指で操作する画面）では、押した行だけ色を変えます */
.svcp__item:active{ background:var(--blue); color:#fff }

/* --- 右の絵 --- */
.svcp__view{ position:relative; overflow:hidden;
  border-left:1px solid var(--line-soft);
  /* 写真が入るまでの下地。7枚がそろえば上に重なって見えなくなります */
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--blue) 12%, var(--paper)) 0%,
    var(--paper) 55%,
    color-mix(in srgb, var(--orange) 14%, var(--paper)) 100%) }
.svcp__fig{ position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .5s var(--ease-out) }
.svcp__fig.is-on{ opacity:1 }
.svcp__meta{ position:absolute; top:clamp(20px,2.4vw,42px);
  right:clamp(20px,2.4vw,42px); z-index:1; text-align:right; line-height:1 }
.svcp__cnt{ display:flex; align-items:baseline; justify-content:flex-end; gap:6px;
  margin:0 0 10px; color:var(--muted); letter-spacing:.06em;
  font-variant-numeric:tabular-nums; font-size:clamp(11px,0.8vw,14px) }
.svcp__cnt b{ color:var(--blue); font-weight:400;
  font-size:clamp(18px,1.5vw,26px) }
.svcp__en{ margin:0; color:var(--muted); letter-spacing:.16em;
  font-size:clamp(9px,0.66vw,12px) }

@media (max-width:900px){
  .svcp{ display:block }
  .svcp__view{ aspect-ratio:16/10; border-left:0;
    border-bottom:1px solid var(--line-soft) }
  .svcp__item{ padding-right:var(--svc-gut) }
}
@media (prefers-reduced-motion:reduce){
  .svcp__item, .svcp__ar, .svcp__fig, .svcp__nm::before{ transition:none }
}

/* 中身が少ない節は、さらに詰めます */
.section-thin{ padding-block:clamp(34px,3.6vw,52px) }
/* 節の最後のボタンの下に、余白が二重にかからないように */
.section .wrap > p:last-child{ margin-bottom:0 }

/* =========================================================================
   TOP　参考サイトの実測値どおりに作り直したもの（8/27 第2版）
   取り方：あちらのCSSの原文（読める4ファイル）＋ getBoundingClientRect。
   数値だけを採っています。コードは複製していません。
   ------------------------------------------------------------------------
   ヒーロー  height:100svh ／ コピーは絶対配置 top160 left50
             （英字108px が上、和文30px が下、間25px）
             お知らせも絶対配置 bottom40 left50。見出し24px、日付13px（幅80px）、
             件名14px（幅300px・1行で省略）
   節の余白  上 136〜153px、下 0。RECRUIT だけ上下 100〜160px
   節見出し  column-reverse。英字が上（45〜75px）、和文が下（14〜15px）、間15px
   ABOUT     画像353px（左）と文章533px（右）を下端そろえで両端に。本文は行間220%
   BUSINESS  背景画像の上に、384pxの白いカードを左右交互（奇数が右）
             カードは padding 75/25、間40px、角丸8px、白の86%
             見出しは 英字15px（半透明）が上、和文28px（字間0.48px）が下
   COMPANY   左に縦長の画像（画面の外まで）、右に見出しと行き先の一覧
   ボタン    丸い枠ではなく下線と矢印。最小幅197px、20px
   ========================================================================= */

/* --- Lenis（なめらかスクロール）に必要な最小限の指定 ----------------------
   配布物の lenis.css と同じ内容です。1ファイル増やさずに済むよう、ここに入れました。
   ------------------------------------------------------------------------ */
html.lenis, html.lenis body{ height:auto }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{ overscroll-behavior:contain }
.lenis.lenis-smooth iframe{ pointer-events:none }
/* なめらかスクロールを入れると、CSS側の smooth と二重になって跳ねます */
html.lenis{ scroll-behavior:auto }

/* ---- ヒーロー ---- */
.thero{ position:relative; height:100svh; overflow:hidden; background:var(--paper);
  background-image:url(/images/hero-desktop.jpg?v=f6123ba9);
  background-size:cover; background-position:center }
.thero__catch{ display:flex; flex-direction:column-reverse; gap:25px;
  position:absolute; top:160px; left:50px; line-height:1; margin:0 }
.thero__ja{ font-size:30px; font-weight:400; letter-spacing:.06em }
.thero__en{ font-size:108px; font-weight:400; letter-spacing:.01em }
.thero__news{ position:absolute; bottom:40px; left:50px }
.thero__news h2{ margin:0 0 14px; font-size:24px; font-weight:400; letter-spacing:.04em }
.thero__news ul{ margin:0; padding:0; list-style:none }
.thero__news li{ display:flex; align-items:baseline; margin-top:10px }
.thero__news time{ flex:0 0 80px; color:var(--muted); font-size:13px }
.thero__news .item{ display:block; width:300px; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; font-size:14px; color:inherit; text-decoration:none;
  transition:opacity .4s var(--ease-out) }
.thero__news .item:hover{ opacity:.7 }
@media (max-width:900px){
  .thero{ background-image:url(/images/hero-mobile.jpg?v=4739fe01) }
  .thero__catch{ top:110px; left:24px; gap:16px }
  .thero__en{ font-size:clamp(44px,12vw,80px) }
  .thero__ja{ font-size:clamp(17px,4.4vw,24px) }
  .thero__news{ left:24px; right:24px; bottom:28px }
  .thero__news .item{ width:auto }
}

/* ---- 節の共通 ---- */
.tsec{ padding-top:clamp(64px,3.5vw + 82px,153px); padding-bottom:0 }
.tsec-both{ padding-bottom:clamp(64px,3.5vw + 82px,153px) }
/* 節どうしの間は、ふつうは次の節の「上の余白」で空きます。
   ところが BUSINESS は自前の黒い背景を節いっぱいに敷くので、
   その上の余白まで黒くなり、ABOUT の写真と黒が直に接してしまいます。
   そこで ABOUT 側に「下の余白」を持たせます（8/28） */
#about{ padding-bottom:clamp(64px,3.5vw + 82px,153px) }
.twrap{ width:min(100% - 100px, 1073px); margin-inline:auto }

/* ---- View more ---- */
.vm{ display:inline-block; color:inherit; text-decoration:none }
.vm-in{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-width:197px; padding-bottom:10px; border-bottom:1px solid var(--line);
  font-size:20px; letter-spacing:.02em; transition:border-color .4s var(--ease-out) }
.vm-ar{ position:relative; display:block; width:34px; height:1px; background:var(--ink);
  transition:transform .4s var(--ease-out) }
.vm-ar::after{ position:absolute; right:0; top:-3px; width:7px; height:7px; content:"";
  border-top:1px solid var(--ink); border-right:1px solid var(--ink);
  transform:rotate(45deg) }
.vm:hover .vm-ar, a:hover .vm-ar{ transform:translateX(6px) }
.vm:hover .vm-in, a:hover .vm-in{ border-bottom-color:var(--ink) }
.vm-w{ color:var(--paper) }
.vm-w .vm-in{ border-bottom-color:rgba(244,241,234,.6) }
.vm-w .vm-ar, .vm-w .vm-ar::after{ background:var(--paper); border-color:var(--paper) }

/* ---- ABOUT ---- */
.tabout__wrap{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(28px,3vw,56px) }
.tabout__img{ flex:0 0 353px; align-self:flex-end; aspect-ratio:353/470;
  background-size:cover; background-position:center }
.tabout__body-wrap{ flex:0 1 533px }
.tabout__body p{ margin:0;
  font-size:clamp(14px,13.4px + 0.156vw,16px); line-height:220% }
.tabout__body p + p{ margin-top:20px }
.tabout__ttl + .tabout__body{ margin-top:clamp(40px,6vw,90px) }
.tabout__body + .vm{ margin-top:clamp(30px,4vw,60px) }
@media (max-width:900px){
  .tabout__wrap{ flex-direction:column; align-items:stretch }
  .tabout__img{ flex:none; width:100%; aspect-ratio:4/3 }
  .tabout__body-wrap{ flex:none; margin-top:40px }
}

/* ---- BUSINESS ---- */
.tbiz{ position:relative; color:var(--paper) }
/* 背景は節の高さぶんの箱。その中身を画面に貼り付けます。
   以前は節の全体（縦4800px）に1枚を引き伸ばしていたので、
   ごく一部しか映っていませんでした（8/28に修正） */
.tbiz__bg{ position:absolute; inset:0; z-index:0; background:var(--ink) }
.tbiz__bgstick{ position:sticky; top:0; display:grid; place-items:center;
  height:100svh; overflow:hidden }
.tbiz__bgbox{ position:relative; overflow:hidden }
.tbiz__bgbox video{ display:block; width:100%; height:100%; object-fit:cover }

/* 動画の上に黒をかぶせて、少し暗くします。
   動画そのものを暗く書き出してしまうと後から戻せないので、
   表示のときに重ねる形にしました。濃さは下の --veil の数字だけで変えられます
   （0 で無し、1 で真っ黒）。8/28 */
.tbiz__bgbox::after{ position:absolute; inset:0; z-index:1; content:"";
  background:#000; opacity:var(--veil, 0); pointer-events:none }

/* 画面いっぱいに敷きます（8/28 黒木さん「Bがいいのでこっちで確定」）。
   参考サイトはカードと同じ幅の正方形（A案）でしたが、16:9 の動画を正方形に
   切ると左右が44%落ちてしまうため、全面にしました。
   A案の指定は比較用HTML（2_デザイン・原稿）に残してあります */
.bg-full .tbiz__bgbox{ position:absolute; inset:0; width:100%; height:100%;
  border-radius:0; --veil:.6 }

.tbiz .twrap{ position:relative; z-index:1 }
/* 見出しは事業の一覧を見ている間ずっと画面に留めます。
   参考サイトは pin-spacer（ピン留め）を使っていました。同じ見え方を
   ブラウザ標準の position:sticky で作ります。ライブラリは使いません */
.tbiz__head{ position:sticky; top:120px; z-index:2;
  margin-bottom:60px; text-align:center; align-items:center; pointer-events:none }
@media (max-width:900px){ .tbiz__head{ position:static } }
.tbiz__list{ display:grid; gap:clamp(8px,0.9vw,14px); margin:0; padding:0; list-style:none }
.tbiz__item{ width:min(100%,384px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:40px;
  padding:75px 25px; border-radius:8px; background:rgba(255,255,255,.86);
  color:var(--ink); text-decoration:none }
/* 奇数番目のカードを右に寄せます。数えるのは li のほうです
   （a は li の中で常に1つ目なので、a に nth-child を当てると全部が奇数になります） */
.tbiz__list > li:nth-child(odd) .tbiz__item{ margin-left:auto }
.tbiz__tit{ display:flex; flex-direction:column-reverse; align-items:center; gap:25px;
  line-height:1 }
.tbiz__tit .ja{ font-size:28px; letter-spacing:.48px }
.tbiz__tit .en{ font-size:15px; opacity:.5; letter-spacing:.06em }
.tbiz__img{ width:100%; max-width:232px; aspect-ratio:1;
  background-size:contain; background-repeat:no-repeat; background-position:center }
@media (max-width:1023px){
  /* justify-items:center を使うと、升目の中身（li）が文字の長さぶんに縮みます。
     そのため「クラウド基盤」のカードだけ 247px、他は 275px になっていました
     （スマホで発覚・8/28）。li は列いっぱいに広げ、中のカードだけを
     margin で中央に置きます */
  .tbiz__item, .tbiz__list > li:nth-child(odd) .tbiz__item{ margin-inline:auto }
  /* 事業名が1行のカード（クラウド基盤）だけ 28px 低くなっていました。
     行がいくつに折れても高さがそろうよう、全部の升目を同じ高さにします */
  .tbiz__list{ grid-auto-rows:1fr }
  .tbiz__item{ height:100% }
}

/* ---- COMPANY ---- */
.tcom__grid{ display:grid; grid-template-columns:1fr 41.65%; column-gap:170px;
  align-items:start }
/* 右側も動きますが、写真よりゆっくり流れます。
   上端は写真とそろえて始まり、下端で追いつきます（8/28）。
   動かす量は JavaScript で入れます（.tcom__side の transform） */
.tcom__side{ grid-column:2; will-change:transform }
/* 参考サイトは「縦120%・画面の左端まではみ出す・切り取って敷く」でしたが、
   それだと会社のビルが切れてしまうため、ここは参考どおりにしていません（8/28）。
   写真の全体が入る大きさに縮めて置いています。
     ・はみ出しをやめ、列の幅ぴったりに
     ・箱の縦横比を写真と同じ（1085:1450）にして、余白も切れも出ないように
     ・contain で、万一比率がずれても切り取られないように */
/* 画面の左端にぴったり付けます（参考サイトと同じ、余白なし）。
   --gut は本文の左右の余白。その分だけ左へ出し、同じ分だけ幅を足すので、
   右端は動かず、左だけが画面の端まで伸びます。
   写真の縦横比と箱の縦横比をそろえてあるので、切れも余白も出ません（8/28） */
.tcom__img{ grid-column:1; justify-self:start;
  --gut:max(50px, calc((100vw - 1073px) / 2));
  margin-left:calc(var(--gut) * -1);
  width:calc(100% + 130px + var(--gut));
  aspect-ratio:1085 / 1450;
  background-image:url(/images/top-company.jpg?v=463446c1);
  background-size:cover; background-position:center }
/* 100vw には縦スクロール棒の幅も入るため、数pxはみ出すことがあります。
   その数pxで横スクロール棒が出ないように、この節だけ切り落とします */
#company{ overflow-x:clip }
.tcom__head{ grid-area:1 / 2 / 2 / 3 }
/* 行の作りは実測どおり。上下30px、下だけ罫、項目名18〜20px。
   右端に黒い横長のピル（36×24）を置き、中に白い矢印を出します（8/27に実測） */
/* 見出しと一覧の間。以前は行が引き伸ばされて350pxほど空いていました */
.tcom__menu{ display:flex; flex-direction:column;
  margin:40px 0 0; padding:0; list-style:none }
.tcom__menu li{ padding:30px 0; border-bottom:1px solid var(--line) }
.tcom__menu a{ display:block; position:relative; padding-right:52px;
  color:inherit; text-decoration:none;
  font-size:clamp(18px, 17.4px + 0.156vw, 20px); letter-spacing:.06em }
.tcom__menu .ic{ position:absolute; top:2px; right:0; display:grid; place-items:center;
  width:36px; height:24px; border-radius:100vh; background:var(--ink);
  color:var(--paper); font-size:11px; line-height:1;
  transition:background-color .4s var(--ease-out) }
.tcom__menu a:hover .ic, .tcom__menu a:focus-visible .ic{ background:var(--blue) }
/* --- 狭い画面（8/28に作り直し） -------------------------------------------
   これまでの指定は、見出しと一覧を .tcom__side にまとめる前のものでした。
   .tcom__side の grid-column:2 が残ったままだったため、1列のはずの升目に
   2列目が勝手に作られ、文章が画面の右へはみ出し（右端449px／画面390px）、
   写真と重なっていました。写真も幅の指定が戻らず、列からはみ出していました。
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  .tcom__grid{ grid-template-columns:1fr; row-gap:clamp(24px,5vw,40px) }
  .tcom__side{ grid-column:1 }
  /* 写真は左右とも画面の端まで。--gut ぶん外へ出し、その2倍を幅に足します */
  .tcom__img{ grid-column:1; justify-self:stretch;
    margin-left:calc(var(--gut) * -1);
    width:calc(100% + var(--gut) * 2) }
  .tcom__menu{ margin-top:clamp(20px,4vw,32px) }
  .tcom__menu li{ padding:clamp(16px,3.4vw,24px) 0 }
}

/* ---- RECRUIT ---- */
.trec__wrap{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(28px,3vw,56px) }
.trec__body-wrap{ flex:0 1 533px }
.trec__body{ margin-top:clamp(40px,6vw,90px) }
.trec__body p{ margin:0; font-size:clamp(14px,13.4px + 0.156vw,16px); line-height:220% }
.trec__body p + p{ margin-top:20px }
.trec__body + .vm{ margin-top:clamp(30px,4vw,60px) }
.trec__img{ flex:0 0 353px; aspect-ratio:353/470;
  background-size:cover; background-position:center }
@media (max-width:900px){
  .trec__wrap{ flex-direction:column; align-items:stretch }
  .trec__img{ flex:none; width:100%; aspect-ratio:4/3; margin-top:40px }
}

/* --- 業種カード（TOP の WORKS） -----------------------------------------
   押すと、サービストップの実績一覧がその業種で絞り込まれた状態で開きます。
   見た目だけの札にすると「押せそうなのに押せない」ものになるためです（8/25の指摘）。
   ------------------------------------------------------------------------ */
.icards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:clamp(10px,1.2vw,16px); margin:0 0 clamp(26px,3vw,40px) }
.icard{ display:block; background:#fff; border:1px solid var(--line-soft);
  color:inherit; text-decoration:none;
  transition:border-color .25s ease, transform .25s var(--ease-out) }
.icard .ph{ display:block; aspect-ratio:4/3; background-size:cover;
  background-position:center }
.icard b{ display:block; padding:12px 14px 13px; font-size:13px; font-weight:500;
  letter-spacing:.08em }
.icard:hover, .icard:focus-visible{ border-color:var(--ink); transform:translateY(-2px) }

/* --- 写真と文章を並べる帯（TOP の RECRUIT・ABOUT） ---------------------- */
/* 写真を大きい側に置きます。写真が先か文章が先かで列の比率を入れ替えます */
.figband{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3vw,48px); align-items:center; margin:0 0 clamp(24px,2.6vw,36px) }
.figband-rev{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
.figband .ph{ aspect-ratio:16/10; background-size:cover; background-position:center }
.figband p{ margin:0; font-size:14px; line-height:2.05 }
@media (max-width:760px){ .figband{ grid-template-columns:1fr } }

/* --- 会社の事実を並べる（TOP の ABOUT） --------------------------------- */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; margin:0 0 clamp(26px,3vw,40px);
  border:1px solid var(--line-soft); background:var(--line-soft) }
.facts > div{ padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,20px);
  background:var(--paper) }
.facts dt{ margin:0 0 8px; color:var(--blue); font-size:10px; font-weight:700;
  letter-spacing:.2em }
.facts dd{ margin:0; font-size:13px; line-height:1.85 }

/* CONTACT の帯は2本目なので、色を少し変えて続けて置けるようにします */
.cta-band-alt{ background:var(--paper) }
.cta-band-alt h2, .cta-band-alt p{ color:var(--ink) }
.cta-band-alt a{ color:var(--ink) }

/* --- 規程2ページ（P-09　本文は現行のまま） -------------------------------- */
.doc{ max-width:840px }
.doc h2{ margin:clamp(38px,4.2vw,58px) 0 16px; font-size:clamp(17px,1.7vw,21px);
  font-weight:600; letter-spacing:.04em; line-height:1.7 }
.doc h2:first-child{ margin-top:0 }
.doc h3{ margin:clamp(28px,3vw,40px) 0 12px; font-size:15px; font-weight:600;
  letter-spacing:.03em; line-height:1.8 }
.doc p{ margin:0 0 1.2em; font-size:14.5px; line-height:2.15 }
.doc-list{ margin:0 0 1.2em; padding:0; list-style:none }
.doc-list li{ position:relative; padding:0 0 .8em 20px; font-size:14.5px; line-height:2.1 }
.doc-list li::before{ position:absolute; left:2px; top:calc(1.05em - 1px);
  width:8px; height:1px; content:""; background:var(--blue) }
.doc-list-in{ margin-left:20px }
.doc-list-in li::before{ background:var(--line) }
.doc-sign{ margin-top:clamp(44px,5vw,68px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line-soft); color:var(--muted); font-size:13.5px }
.doc-sign p{ margin:0 0 1em; font-size:13.5px; line-height:2 }
.doc-sign b{ color:var(--ink); font-weight:600 }
.doc-desk{ margin-top:clamp(30px,3.4vw,44px); padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line-soft); border-radius:var(--r); background:#fff }
.doc-desk h2{ margin:0 0 12px; font-size:13px; font-weight:650; letter-spacing:.1em;
  color:var(--muted) }
.doc-desk p{ margin:0; font-size:14px; line-height:2.05 }
.doc-desk a{ color:var(--blue) }

/* 個人情報の取扱い・開示等請求書（PDF）への案内。
   土台のCSSが a{color:inherit; text-decoration:none} なので、
   何も指定しないと本文と見分けが付きません（9/3 指摘）。
   下線と色を戻したうえで、PDFであることを小さく添えます。 */
.doc-pdf{ margin:clamp(30px,3.4vw,46px) 0 0; font-size:14.5px; line-height:2.1 }

/* 本文の中のリンクの見た目。
   土台のCSSが a{ color:inherit; text-decoration:none } で装飾を全部消しているため、
   ここで指定しないと本文の字とまったく見分けが付きません。
   定義リスト（会社概要・募集要項・お問い合わせ）の中の
   「アクセス・最寄駅のご案内」「電話番号」が該当します（9/3 指摘）。 */
.lp-dl a, .doc-pdf a{ color:var(--blue); text-decoration:underline;
  text-underline-offset:.25em; text-decoration-thickness:1px;
  transition:text-decoration-thickness .2s var(--ease-out) }
.lp-dl a:hover, .doc-pdf a:hover{ text-decoration-thickness:2px }
.lp-dl a:focus-visible, .doc-pdf a:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px }
.doc-pdf a::after{ content:"PDF"; margin-left:.5em; padding:1px 5px;
  border:1px solid currentColor; border-radius:3px;
  font-size:10px; letter-spacing:.08em; text-decoration:none;
  vertical-align:.12em; white-space:nowrap }

/* --- 404（Q14） ----------------------------------------------------------
   文字とボタンだけの画面に、アイコンが降ってきて床で跳ねて止まる。
   つかんで投げられる。動きは js/main.js の物理計算です。
   ------------------------------------------------------------------------ */
.e404{ position:relative; display:flex; align-items:center;
  min-height:calc(100vh - 240px);
  /* 上はヘッダー（116px）の下から。下は床が見えるよう広めに */
  padding-block:calc(116px + clamp(16px,2.4vw,40px)) clamp(110px,13vw,190px);
  overflow:hidden; text-align:center }
.e404-stage{ position:absolute; inset:0; pointer-events:none }
/* ヘッダーは中身を透かす作りですが、この画面ではロゴが後ろに積み上がって
   ナビが読めなくなります。ここだけ下地を敷いて、はっきり分けます。
   同時に「左上のロゴボタン」と「降ってきたロゴ」の区別もつきます */
.e404-page .site-header{ background:var(--paper);
  box-shadow:0 1px 0 var(--line-soft) }

/* 文字とボタンの矩形は、当たり判定に「動かない障害物」として登録しています。
   ロゴは中へ入れないので、半透明の下地は要りません。
   ロゴのほうを前に描きます（投げて横切ったときに前を通るのが自然なので） */
.e404-stage{ z-index:2 }
.e404-in{ position:relative; z-index:1; max-width:640px; pointer-events:none }
.e404-in > *{ pointer-events:auto }
.e404 .h1{ line-height:1.45 }
.e404 .lead{ max-width:none; margin:0 auto clamp(30px,3.4vw,44px) }
/* つかめる。指でも押さえられるよう touch-action を切ります */
.e404-stage .d{ position:absolute; top:0; left:0; pointer-events:auto;
  cursor:grab; touch-action:none; will-change:transform;
  user-select:none; -webkit-user-drag:none }
.e404-stage .d.grab{ cursor:grabbing }


/* --- 実績一覧の絞り込み（WBS 3.10） --------------------------------------
   分野・業種・キーワードで絞り込みます。
   プルダウンは使わず、選択肢は常に出しておきます（1クリックで絞り込める）。
   ------------------------------------------------------------------------ */
.wk{ margin-top:clamp(26px,3vw,40px) }
.wk-bar{ padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px);
  border:1px solid var(--line-soft); border-radius:var(--r); background:#fff }
.wk-row{ display:flex; align-items:flex-start; gap:14px; padding:9px 0 }
.wk-row + .wk-row{ border-top:1px solid var(--line-soft) }
/* 5.2em では「キーワード」が2行に折れていました（字間0.14emのぶん足りない）。
   5文字 ×（1em ＋ 0.14em）＝ 5.7em 必要なので 6.2em に（8/28） */
.wk-lb{ flex:0 0 6.2em; padding-top:7px; color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.14em }
.wk-btns{ display:flex; flex-wrap:wrap; gap:7px }
.wk-btns button{ padding:6px 13px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--ink); font:inherit; font-size:12px;
  letter-spacing:.03em; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease }
.wk-btns button:hover{ border-color:var(--blue); color:var(--blue) }
.wk-btns button.on{ background:var(--blue); border-color:var(--blue); color:#fff }
.wk-q{ flex:1 1 220px; min-width:0; padding:8px 13px; border:1px solid var(--line);
  border-radius:999px; background:transparent; font:inherit; font-size:12.5px }
.wk-q:focus{ outline:none; border-color:var(--blue) }
.wk-clear{ padding:8px 15px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted); font:inherit; font-size:12px;
  cursor:pointer; transition:color .2s ease, border-color .2s ease }
.wk-clear:hover{ border-color:var(--ink); color:var(--ink) }
.wk-count{ margin:16px 0 10px; color:var(--muted); font-size:12px; letter-spacing:.06em }

/* --- 絞り込み　スマホは引き出し式（8/28・乙案） --------------------------
   パソコンの見た目は一切変えていません。760px以下でだけ、もとの絞り込みを
   隠して「絞り込む」ボタンを出し、押すと画面の下から引き出しが開きます。
   引き出しは Web Awesome の wa-drawer、件数の計算は ItemsJS です。
   どちらも 760px 以下のときにだけ読み込みます（パソコンでは読みません）。
   ------------------------------------------------------------------------ */
.wk-sp{ display:none }
@media (max-width:760px){
  .wk-sp{ display:block }
  .js .wk .wk-bar{ display:none }          /* もとの絞り込みは隠します */
  .wk-sp__btn{ display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px 18px; border:1px solid var(--ink); border-radius:999px;
    background:var(--ink); color:var(--paper); font:inherit; font-size:14px;
    letter-spacing:.06em; cursor:pointer }
  .wk-sp__now{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    margin:14px 0 0; font-size:12.5px }
  .wk-sp__now .cnt{ font-weight:500; letter-spacing:.06em }
  .wk-sp__now .cnt em{ font-style:normal; color:var(--blue); font-size:17px;
    margin-right:2px; font-variant-numeric:tabular-nums }
  .wk-sp__now .pill{ display:inline-flex; align-items:center; gap:6px;
    padding:4px 6px 4px 11px; border:1px solid var(--line); border-radius:999px;
    font-size:11.5px }
  .wk-sp__now .pill button{ width:17px; height:17px; padding:0; border:0;
    border-radius:50%; background:var(--line-soft); color:var(--ink);
    font:inherit; font-size:10px; line-height:1; cursor:pointer }
}
/* 引き出しの中身 */
.wkd__row + .wkd__row{ margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line-soft) }
.wkd__lb{ margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:700;
  letter-spacing:.14em }
.wkd__chips{ display:flex; flex-wrap:wrap; gap:7px }
.wkd__chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer }
.wkd__chip b{ color:var(--muted); font-weight:400; font-size:11px;
  font-variant-numeric:tabular-nums }
.wkd__chip.on{ background:var(--blue); border-color:var(--blue); color:#fff }
.wkd__chip.on b{ color:rgba(255,255,255,.8) }
.wkd__chip[disabled]{ opacity:.35 }
.wkd__q{ width:100%; padding:11px 15px; border:1px solid var(--line);
  border-radius:999px; background:transparent; font:inherit; font-size:13px }
.wkd__q:focus{ outline:none; border-color:var(--blue) }
.wkd__foot{ display:flex; gap:10px }
.wkd__clr{ flex:0 0 auto; padding:12px 18px; border:1px solid var(--line);
  border-radius:999px; background:transparent; color:var(--muted);
  font:inherit; font-size:13px; cursor:pointer }
.wkd__done{ flex:1 1 auto; padding:12px 18px; border:1px solid var(--blue);
  border-radius:999px; background:var(--blue); color:#fff; font:inherit;
  font-size:13.5px; cursor:pointer }
wa-drawer::part(body){ padding:18px 20px 26px }
wa-drawer::part(header){ padding:14px 20px }

/* --- 絞り込み　スマホ（8/28） -------------------------------------------
   横並びのままだと、見出し（6.2em＝68px）と間（14px）を引いた残り114pxに
   ボタンを詰めることになり、1つずつ2行に折れて縦に長く伸びていました
   （絞り込みだけで1,714px＝画面4.4個ぶん）。見出しを上に出します。
   ------------------------------------------------------------------------ */
@media (max-width:760px){
  .wk-bar{ padding:16px }
  .wk-row{ display:block; padding:12px 0 }
  .wk-lb{ display:block; margin:0 0 10px; padding:0 }
  .wk-btns{ gap:6px }
  .wk-btns button{ padding:7px 12px; font-size:12.5px }
  .wk-q{ width:100%; flex:none; margin-bottom:8px }
  .wk-clear{ width:100% }
}
.wk-none{ margin:28px 0; color:var(--muted); font-size:13.5px }

.wk-tb{ width:100%; border-collapse:collapse; font-size:11.5px; table-layout:fixed }
.wk-tb th{ padding:9px 10px; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em;
  text-align:left; white-space:nowrap }
.wk-tb td{ padding:13px 10px; border-bottom:1px solid var(--line-soft);
  vertical-align:top; line-height:1.85; word-break:break-word }
/* 列の幅は現行サイト service.html の並びに合わせています */
.c-ind{ width:8%;  color:var(--muted) }
.c-nm { width:15%; font-weight:600; font-size:12px; letter-spacing:.02em }
.c-sum{ width:23% }
.c-sc { width:17%; color:var(--muted) }
.c-os { width:13%; color:var(--muted) }
.c-lg { width:9%;  color:var(--muted) }
.c-md { width:15%; color:var(--muted) }
.wk-na{ color:var(--line) }
.wk-tb tr[hidden]{ display:none }

@media (max-width:1000px){
  /* 表のままだと読めないので、1件ずつの積み上げに変えます */
  .wk-tb, .wk-tb tbody, .wk-tb tr, .wk-tb td{ display:block; width:auto }
  .wk-tb thead{ display:none }
  .wk-tb tr{ padding:18px 0; border-bottom:1px solid var(--line-soft) }
  .wk-tb td{ padding:0; border:0 }
  .c-ind{ font-size:11px; letter-spacing:.08em }
  .c-nm { font-size:15px; margin:4px 0 8px }
  .c-sum{ font-size:13px; margin-bottom:10px; color:var(--ink) }
  .c-sc::before{ content:"作業範囲　" }
  .c-os::before{ content:"OS　" }
  .c-lg::before{ content:"言語　" }
  .c-md::before{ content:"ミドル　" }
  .c-sc, .c-os, .c-lg, .c-md{ font-size:11.5px; padding:2px 0 }
  .c-sc::before, .c-os::before, .c-lg::before, .c-md::before{
    display:inline-block; min-width:5.2em; color:var(--line);
    font-size:10px; font-weight:700; letter-spacing:.1em }
}

/* --- サービス詳細 7ページ ------------------------------------------------ */
/* 節が5つあるページなので、共通の余白のままだと縦に間延びします。詰めます */
.sd-page .section{ padding-block:clamp(48px,5.6vw,82px) }
.sd-page .sec-head{ margin-bottom:clamp(22px,2.4vw,34px) }
.sd-page .sec-head h2{ font-size:clamp(21px,2.2vw,30px) }

/* 見出しが背景の帯に重なって読みにくいので、左の白抜きを広げます */
.sd-head::after{ background:
  linear-gradient(180deg, rgba(244,241,234,.72) 0%, rgba(244,241,234,0) 22%),
  linear-gradient(90deg, rgba(244,241,234,.97) 0%, rgba(244,241,234,.95) 40%,
                         rgba(244,241,234,.55) 56%, transparent 74%) }
.sd-head .crumb{ margin:0 0 12px; color:var(--muted);
  font-size:10.5px; letter-spacing:.14em }
.sd-head .crumb a{ color:var(--muted) }
.sd-head .crumb a:hover{ color:var(--blue) }
.sd-head h1{ font-size:clamp(28px,3.6vw,52px) }

/* 支援の特徴。ワイヤーの「補足の図または画像」を右に置きます */
.sd-strength{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,64px); align-items:center }
.sd-fig{ margin:0; overflow:hidden; border-radius:var(--r) }
.sd-fig img{ display:block; width:100%; height:auto }
@media (max-width:860px){
  .sd-strength{ grid-template-columns:1fr; gap:clamp(24px,4vw,36px) }
  .sd-fig{ order:-1 }
}

/* 概要・特徴の本文。1行を読みやすい長さで止める */
.sd-body{ max-width:720px }
.sd-h{ margin:0 0 20px; font-size:clamp(19px,2.1vw,26px); font-weight:600;
  line-height:1.65; letter-spacing:.02em }
.sd-body p{ margin:0 0 1.1em; font-size:15px; line-height:2.1; color:var(--ink) }
.sd-body p:last-child{ margin-bottom:0 }

/* 主な技術・製品 */
.sd-tech{ margin-top:clamp(38px,4.4vw,60px); padding-top:clamp(30px,3.4vw,44px);
  border-top:1px solid var(--line-soft) }
.sd-sub{ margin:0 0 18px; font-size:12px; font-weight:650; letter-spacing:.14em;
  color:var(--muted) }
.sd-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.sd-tags li{ padding:7px 14px; border:1px solid var(--line);
  border-radius:999px; background:#fff; font-size:12.5px; line-height:1.6;
  letter-spacing:.02em }
.mk{ margin-left:2px; color:var(--orange); font-style:normal; font-weight:700 }
.sd-note{ margin:16px 0 0; color:var(--muted); font-size:12px; letter-spacing:.02em }

/* ご相談いただけること */
.sd-list{ max-width:840px; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line-soft) }
.sd-list li{ position:relative; padding:19px 0 19px 34px;
  border-bottom:1px solid var(--line-soft); font-size:15px; line-height:1.95 }
.sd-list li::before{ position:absolute; left:6px; top:calc(19px + .95em);
  width:12px; height:1px; content:""; background:var(--blue) }

/* 関連サービス */
.sd-rel{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px) }
/* 関連が2つの分野（運用自動化）。3列のままだと右が空くので2列にします */
.sd-rel-2{ grid-template-columns:repeat(2,1fr); max-width:69% }
.sd-rel-c{ position:relative; display:block; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r); background:#fff }
.sd-rel-ph{ display:block; aspect-ratio:16/9; background-size:cover;
  background-position:center; transition:transform .5s cubic-bezier(.22,.61,.36,1) }
.sd-rel-c:hover .sd-rel-ph{ transform:scale(1.05) }
.sd-rel-c b{ display:block; padding:16px 18px 2px; font-size:14px; font-weight:600;
  letter-spacing:.02em }
.sd-rel-c em{ display:block; padding:0 18px 16px; color:var(--muted);
  font-size:10.5px; font-style:normal; letter-spacing:.12em }
.sd-rel-c:hover b{ color:var(--blue) }

@media (max-width:860px){
  .sd-rel{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .sd-rel{ grid-template-columns:1fr }
  .sd-list li{ padding-left:26px }
}