/* =============================================================
   システム開発ページ — v3（P920・2026-09-28）
   共通の部品は components.css。ここはこのページだけの図解の形（as- で始める）。
   ============================================================= */

/* ---------- はじめに: 4 つの組み合わせ ＝ 最適なシステム ---------- */
.as-combo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.as-combo__item {
  position: relative;
  padding: 18px 18px 18px 20px;
  background: var(--lc-blue-50);
  border: 1px solid var(--lc-blue-100);
  border-radius: var(--lc-radius-m);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.75;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-combo__no {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lc-blue-600);
}

/* ＋ の印（2 つ目以降の箱の左上） */
.as-combo__item:nth-child(2)::before,
.as-combo__item:nth-child(4)::before {
  content: "+";
  position: absolute;
  left: -12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lc-steel-300);
  font-family: var(--lc-font-en);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lc-steel-700);
  line-height: 1;
}

.as-combo__result {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--lc-navy-800);
  border-radius: var(--lc-radius-m);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.as-combo__eq {
  font-family: var(--lc-font-en);
  font-size: 1.25rem;
  font-weight: 400;
  opacity: 0.8;
}

.as-roles {
  margin-top: 0;
}

@media (max-width: 639px) {
  .as-combo {
    grid-template-columns: 1fr;
  }

  .as-combo__item:nth-child(2)::before,
  .as-combo__item:nth-child(4)::before {
    display: none;
  }
}

/* ページの目次は components.css の lc-toc-wrap（会社情報と共通） */

/* ---------- 基盤の断面図: 基盤の上に、一品を載せる ---------- */
.as-stack {
  margin-bottom: clamp(48px, 6vw, 72px);
}

.as-stack__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 26px;
}

.as-stack__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-navy-800);
}

.as-stack__sub {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--lc-steel-700);
}

.as-stack__layer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 24px;
}

.as-stack__layer + .as-stack__layer {
  margin-top: 10px;
}

.as-stack__blocks {
  display: grid;
  gap: 10px;
}

/* 上の段: 皆さまの業務のためにつくるもの（点線＝これから描く） */
.as-stack__layer--custom .as-stack__blocks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 12%;
}

.as-stack__layer--custom li {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 10px;
  background: #fff;
  border: 1.5px dashed var(--lc-blue-600);
  border-radius: var(--lc-radius-s);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lc-blue-600);
  text-align: center;
  line-height: 1.5;
}

/* 下の段: 基盤（塗り＝もう動いている、厚い） */
.as-stack__layer--base .as-stack__blocks {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 12px;
  background: var(--lc-steel-100);
  border-radius: var(--lc-radius-s);
  box-shadow: inset 0 -6px 0 var(--lc-steel-200);
}

.as-stack__layer--base li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 104px;
  padding: 12px;
  background: var(--lc-navy-800);
  border-radius: 3px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.55;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-stack__layer--base li .lc-en {
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.66);
}

/* 右の注記（図面の引き出し線つき） */
.as-stack__note {
  position: relative;
  padding-left: 28px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--lc-navy-800);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-stack__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 10px;
  border: 1.5px solid var(--lc-steel-500);
  border-left: none;
}

.as-stack__note .lc-en {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lc-steel-500);
}

@media (max-width: 1023px) {
  .as-stack__layer {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .as-stack__layer--custom .as-stack__blocks {
    padding: 0;
  }

  .as-stack__layer--base .as-stack__blocks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .as-stack__note {
    order: -1;
  }

  .as-stack__layer + .as-stack__layer {
    margin-top: 24px;
  }
}

@media (max-width: 639px) {
  .as-stack__layer--custom .as-stack__blocks {
    grid-template-columns: 1fr;
  }

  .as-stack__layer--custom li {
    min-height: 52px;
  }

  .as-stack__layer--base .as-stack__blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 基盤の 6 項目のカード */
.as-foundation {
  margin-bottom: clamp(56px, 7vw, 88px);
}

/* 工場のルーターのお話 */
.as-case__steps {
  margin-top: 24px;
}

.as-case .lc-step {
  background: #fff;
}

.as-case__text {
  margin-top: 24px;
  max-width: 52em;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-closing__text {
  margin-top: 12px;
  max-width: 50em;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ---------- §A ---------- */
.as-lead-text {
  max-width: 50em;
  margin-bottom: 32px;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 5 つのステップの中身 */
.as-steps {
  display: grid;
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--lc-steel-200);
}

.as-step {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  padding-block: 36px;
  border-bottom: 1px solid var(--lc-steel-200);
}

.as-step__no {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lc-blue-600);
}

.as-step__title {
  margin-top: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-step__sub {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--lc-steel-500);
}

.as-step__body > * + * {
  margin-top: 18px;
}

.as-step__body > p {
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-notebook {
  max-width: 640px;
}

.as-punch__sub {
  max-width: 40em;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .as-step {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 28px;
  }

  .as-notebook {
    padding-left: 48px;
  }

  .as-notebook::before {
    left: 32px;
  }
}

/* A-2: 業務スタイルとの相性の物差し */
.as-scale {
  margin: 24px 0 40px;
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
}

.as-scale__bar {
  position: relative;
  height: 14px;
  margin: 0 10% 22px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--lc-blue-200), var(--lc-navy-800));
}

.as-scale__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 6px;
  background: repeating-linear-gradient(to right, var(--lc-steel-300) 0 1px, transparent 1px 10%);
}

.as-scale__marker {
  position: absolute;
  left: 50%;
  top: -9px;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--lc-ink);
}

.as-scale__ends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.as-scale__end--right {
  text-align: right;
}

.as-scale__when {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lc-steel-500);
}

.as-scale__answer {
  margin-top: 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--lc-navy-800);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-scale__middle {
  padding: 10px 12px;
  border: 1px dashed var(--lc-steel-300);
  border-radius: var(--lc-radius-s);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--lc-ink);
}

@media (max-width: 767px) {
  .as-scale {
    padding: 22px 18px;
  }

  .as-scale__bar {
    margin-inline: 0;
  }

  .as-scale__ends {
    grid-template-columns: 1fr 1fr;
  }

  .as-scale__middle {
    grid-column: 1 / -1;
    order: 3;
  }
}

.as-box {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
}

.as-box > * + * {
  margin-top: 14px;
}

.as-box--accent {
  background: var(--lc-blue-50);
  border-color: var(--lc-blue-100);
}

.as-note-text {
  margin-top: 28px;
  max-width: 52em;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* A-3: VB6 から次の世代へ */
.as-quote {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--lc-navy-800);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-a3-list {
  margin-top: 22px;
}

.as-migrate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.as-migrate__box {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--lc-steel-300);
  border-radius: var(--lc-radius-m);
  text-align: center;
}

.as-migrate__box--next {
  background: var(--lc-navy-800);
  border-color: var(--lc-navy-800);
  color: #fff;
}

.as-migrate__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--lc-steel-500);
}

.as-migrate__box--next .as-migrate__label {
  color: rgba(255, 255, 255, 0.7);
}

.as-migrate__name {
  margin-top: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}

.as-migrate__sub {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--lc-steel-500);
}

.as-migrate__box--next .as-migrate__sub {
  color: rgba(255, 255, 255, 0.78);
}

.as-migrate__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  padding-bottom: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lc-blue-600);
  text-align: center;
}

.as-migrate__arrow::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 10px;
  bottom: 6px;
  border-top: 2px solid var(--lc-blue-600);
}

.as-migrate__arrow::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--lc-blue-600);
  border-right: 2px solid var(--lc-blue-600);
  transform: rotate(45deg);
}

.as-a3-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--lc-steel-200);
}

@media (max-width: 639px) {
  .as-migrate {
    grid-template-columns: 1fr;
  }

  .as-migrate__arrow {
    width: auto;
    padding: 0 0 26px;
  }

  .as-migrate__arrow::after {
    left: 50%;
    right: auto;
    top: 22px;
    bottom: 4px;
    border-top: none;
    border-left: 2px solid var(--lc-blue-600);
  }

  .as-migrate__arrow::before {
    right: auto;
    left: 50%;
    bottom: 2px;
    margin-left: -5px;
    transform: rotate(135deg);
  }
}

/* ---------- §B ---------- */
/* 5 つの技術の要点（横一列の早見表） */
.as-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 36px;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
  overflow: hidden;
}

.as-five li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: #fff;
}

.as-five li + li {
  border-left: 1px solid var(--lc-steel-200);
}

.as-five__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lc-navy-800);
}

.as-five__text {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .as-five {
    grid-template-columns: 1fr;
  }

  .as-five li + li {
    border-left: none;
    border-top: 1px solid var(--lc-steel-200);
  }
}

/* 詳しい説明（左に見出し、右に中身） */
.as-spec {
  margin-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--lc-steel-200);
}

.as-spec__row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  padding-block: 30px;
  border-bottom: 1px solid var(--lc-steel-200);
}

.as-spec__row dt {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-spec__row dd {
  margin: 0;
}

.as-spec__row dd > * + * {
  margin-top: 14px;
}

.as-spec__row dd > p {
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-spec__h {
  margin-top: 22px !important;
}

@media (max-width: 767px) {
  .as-spec__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 24px;
  }
}

/* 仕様の小さな札（lc-chips）と、トレースログに残ること（lc-log）は components.css へ（会社情報と共通） */

/* B-2 ログインの流れ */
.as-login {
  margin: 16px 0 24px;
}

.as-two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}

@media (max-width: 767px) {
  .as-two-cols {
    grid-template-columns: 1fr;
  }
}

/* B-3 テスト */
.as-metric {
  padding: 28px 30px;
  background: var(--lc-blue-50);
  border: 1px solid var(--lc-blue-100);
  border-radius: var(--lc-radius-m);
}

.as-metric__label {
  margin-bottom: 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--lc-steel-500);
}

.as-metric__text {
  margin-top: 14px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--lc-steel-700);
}

.as-steps-title {
  margin: clamp(36px, 5vw, 56px) 0 16px;
}

.as-loop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 36px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lc-blue-600);
}

.as-loop span {
  font-size: 1.25rem;
  line-height: 1;
}

/* B-4 開発環境（パイプライン） */
.as-pipeline {
  gap: 24px;
}

.as-pipeline .lc-step {
  padding: 18px 16px;
}

.as-pipeline .lc-step + .lc-step::before {
  left: -18px;
}

.as-pipeline .lc-step:last-child {
  background: var(--lc-blue-50);
  border-color: var(--lc-blue-200);
}

@media (max-width: 1023px) {
  .as-pipeline .lc-step + .lc-step::before {
    left: 50%;
  }
}

/* B-5 セキュリティの検査（定規の目盛り。2026-10-16 追加）
   目盛りの 1 本が、検査の 1 回のイメージ。開発のあいだは細かく（いつも）、納品のあとは等間隔（定期的に）。
   定規の線はゴールの点（赤。ひと画面にひとつ）まで続く。PC（1024px 以上）は横の定規、タブレット・スマホ（1023px 以下）は縦の定規
   （2026-10-16 00002 の報告を受けて: タブレットも縦の定規に・ゴールの列の最小を 170px に・納品のあとの目盛りの模様を no-repeat に） */
.as-guard-lead {
  max-width: 52em;
}

.as-guard {
  margin-top: 32px;
}

.as-guard__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 26px;
}

.as-guard__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-navy-800);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-guard__sub {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-guard__line {
  display: grid;
  /* ゴールの列は「使い続けられる」が 1 行に入る幅を残す（1024px で言葉の途中で折れないように） */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(170px, 0.5fr);
}

/* 上から: 「納品」の札（0〜22px）→ 目盛り（26〜52px）→ 定規の線（52px）→ 文 */
.as-guard__phase,
.as-guard__goal {
  position: relative;
  padding-top: 74px;
}

.as-guard__phase {
  padding-right: 28px;
}

.as-guard__phase--run {
  padding-left: 24px;
}

/* 目盛り */
.as-guard__phase::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: 20px;
}

.as-guard__phase--build::before {
  background: repeating-linear-gradient(to right, var(--lc-navy-700) 0 1px, transparent 1px 6px);
}

/* 模様は 1 枚だけ（no-repeat）。くり返すと、ずらした手前の空きに 1 つ前の模様の最後の目盛りが入り、
   「納品」のすぐ後ろが等間隔にならない（入る位置は列の幅で変わる） */
.as-guard__phase--run::before {
  top: 26px;
  height: 26px;
  background: repeating-linear-gradient(to right, var(--lc-blue-600) 0 2px, transparent 2px 52px);
  background-position: 52px 0;
  background-repeat: no-repeat;
}

/* 定規の線（ゴールの点まで） */
.as-guard__phase::after,
.as-guard__goal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  border-top: 1.5px solid var(--lc-steel-500);
}

.as-guard__goal::before {
  right: auto;
  width: 46px;
}

/* ゴールの点 */
.as-guard__goal::after {
  content: "";
  position: absolute;
  left: 46px;
  top: 46px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lc-red);
  box-shadow: 0 0 0 6px var(--lc-red-soft);
}

.as-guard__goal {
  padding-left: 46px;
}

/* 納品の札と、そこから定規の線までの縦の線 */
.as-guard__mark {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 2px;
  background: var(--lc-navy-800);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #fff;
  white-space: nowrap;
}

.as-guard__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  height: 36px;
  border-left: 1.5px solid var(--lc-navy-800);
}

.as-guard__when {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-steel-500);
}

.as-guard__when .lc-en {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lc-blue-600);
}

.as-guard__name {
  margin-top: 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--lc-navy-800);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-guard__text {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-guard-note {
  margin-top: 22px;
  font-weight: 700;
  color: var(--lc-navy-800);
}

/* タブレット・スマホ: 縦の定規（左に目盛り、右に文）。横の定規のままだと、列が細くなって言葉の途中で折れる */
@media (max-width: 1023px) {
  .as-guard__line {
    grid-template-columns: 1fr;
  }

  .as-guard__phase,
  .as-guard__goal {
    padding: 0 0 0 48px;
  }

  .as-guard__phase {
    padding-bottom: 30px;
  }

  .as-guard__phase--run {
    padding-top: 40px;
  }

  .as-guard__phase::before {
    right: auto;
    top: 0;
    bottom: 0;
    width: 20px;
    height: auto;
  }

  .as-guard__phase--build::before {
    background: repeating-linear-gradient(to bottom, var(--lc-navy-700) 0 1px, transparent 1px 6px);
  }

  .as-guard__phase--run::before {
    top: 40px;
    width: 24px;
    height: auto;
    left: -4px;
    background: repeating-linear-gradient(to bottom, var(--lc-blue-600) 0 2px, transparent 2px 40px);
    background-position: 0 20px;
    background-repeat: no-repeat; /* background の一括指定で repeat に戻るので、ここにも書く */
  }

  .as-guard__phase::after,
  .as-guard__goal::before {
    left: 20px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 0;
    border-top: 0;
    border-left: 1.5px solid var(--lc-steel-500);
  }

  .as-guard__goal::before {
    bottom: auto;
    height: 10px;
  }

  .as-guard__goal::after {
    left: 14px;
    top: 10px;
  }

  .as-guard__goal {
    padding-top: 4px;
  }

  .as-guard__mark {
    top: 8px;
    transform: none;
  }

  .as-guard__mark::after {
    display: none;
  }
}

/* ---------- §C ---------- */
.as-cloud tbody th {
  color: var(--lc-navy-800);
}

.as-cloud td:last-child {
  white-space: nowrap;
}

.as-table-note {
  margin-top: 10px;
}

.as-c1 {
  margin-top: clamp(40px, 5vw, 56px);
}

.as-choose {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.as-choose li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-s);
  overflow: hidden;
}

.as-choose__want {
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.7;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-choose__pick {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 10px 12px 10px 22px;
  background: var(--lc-navy-800);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.as-choose__pick::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  margin-top: -8px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 9px solid #fff;
}

@media (max-width: 639px) {
  .as-choose li {
    grid-template-columns: 1fr;
  }

  .as-choose__pick {
    padding: 8px 12px;
  }

  .as-choose__pick::before {
    display: none;
  }
}

.as-c2-text {
  margin-top: 12px;
  color: var(--lc-steel-700);
}

.as-costs {
  margin-top: 20px;
  border-top: 1px solid var(--lc-steel-200);
}

.as-costs div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lc-steel-200);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.as-costs dt {
  font-weight: 700;
}

.as-costs dd {
  margin: 0;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .as-costs div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.as-c2-note {
  margin-top: 16px;
}

.as-c2-box {
  margin-top: 20px;
}

/* ---------- §D KEMARIBA を真ん中に（2026-10-26〜。クラスの名前 as-studio は Project Studio のころのまま） ---------- */
.as-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 56px);
}

.as-studio__side {
  position: relative;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
}

.as-studio__who {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-navy-800);
}

.as-studio__side li {
  position: relative;
  padding-left: 16px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--lc-steel-700);
}

.as-studio__side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-blue-600);
}

/* 両側から真ん中へ（矢印） */
.as-studio__side::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  border-top: 1.5px dashed var(--lc-steel-500);
}

.as-studio__side:not(.as-studio__side--us)::after {
  right: -33px;
}

.as-studio__side--us::after {
  left: -33px;
}

.as-studio__center {
  padding: 26px 24px;
  background: var(--lc-navy-800);
  border-radius: var(--lc-radius-m);
  color: #fff;
  text-align: center;
  box-shadow: var(--lc-shadow-float);
}

.as-studio__name {
  font-family: var(--lc-font-en);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.as-studio__sub {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}

.as-studio__roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.as-studio__roles li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--lc-radius-s);
  font-size: 0.875rem;
  font-weight: 700;
}

.as-studio__roles .lc-en {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.64);
}

@media (max-width: 1023px) {
  .as-studio {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .as-studio__center {
    order: -1;
  }

  .as-studio__side::after {
    display: none;
  }
}

.as-d-foot {
  margin-top: 28px;
  font-weight: 700;
  color: var(--lc-navy-800);
}

/* §D の真ん中: kemariba のロゴ（紺の箱の上なので白。2026-11-10 段階 16） */
.as-studio__logo {
  display: block;
  width: auto;
  height: 24px;
  margin: 2px auto 0;
}

/* 4 つのお約束の下: kemariba で確かめていただく 1 行（2026-11-10 段階 16） */
.as-promise-km {
  margin-top: 28px;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.as-promise-km .lc-link-arrow {
  margin-left: 12px;
}

@media (max-width: 767px) {
  .as-promise-km .lc-link-arrow {
    margin-left: 0;
  }
}