/* ==========================================================================
   サービス一覧 (services.html) — page-scoped components (.sv-*)
   共通の調子は css/subpage.css。ここは構成モデルの切り替え、＋シリーズの一覧、
   PSTNコラムの年表など、このページにしかない部品だけを置く。
   ========================================================================== */

/* 01 PBX — neutral stance -------------------------------------------------- */
.sv-neutral {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px 72px; align-items: center; margin-bottom: 112px;
}
.sv-neutral .pg-art { aspect-ratio: 4 / 3; }
.sv-neutral h3 { font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; line-height: 1.65; letter-spacing: -.01em; }
.sv-neutral p { margin-top: 16px; color: var(--pg-muted); font-size: 15px; line-height: 2.05; }
.sv-points { margin-top: 32px; border-top: 1px solid var(--pg-line-cool); }
.sv-points li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--pg-line-cool);
  font-size: 15px; font-weight: 600; line-height: 1.7; letter-spacing: .02em;
}
.sv-points li::before {
  content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: #eaf2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6a92' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* 01 PBX — five configuration models -------------------------------------- */
.sv-models__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.sv-models__title { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.6; letter-spacing: .01em; }
.sv-models__hint { font-size: 13px; color: var(--pg-soft); }

/* タブ（JSが有効なときだけ表示。無効時は5つの構成をすべて縦に並べる） */
.sv-models__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--pg-line-cool); }
.sv-models__tab {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 14px 12px 16px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; color: var(--pg-soft);
  font-feature-settings: "palt"; transition: color .25s;
}
.sv-models__tab::after {
  content: ""; position: absolute; left: 0; right: 12px; bottom: -1px; height: 2px;
  background: var(--pg-ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.sv-models__key {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #c9d5de; font-size: 13px; font-weight: 600; color: var(--pg-blue);
  transition: background-color .25s, border-color .25s, color .25s;
}
.sv-models__tab:hover { color: var(--pg-ink); }
.sv-models__tab[aria-selected="true"] { color: var(--pg-ink); }
.sv-models__tab[aria-selected="true"]::after { transform: scaleX(1); }
.sv-models__tab[aria-selected="true"] .sv-models__key { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; }
.sv-models__tab:focus-visible { outline-offset: -2px; }

.sv-models__panels { display: grid; gap: 20px; }
.sv-model {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 32px 56px; align-items: center;
  padding: 44px 44px 44px 48px; border-radius: 24px; background: var(--pg-cool); border: 1px solid var(--pg-line-cool);
}
.sv-models.is-tabbed .sv-model:not([hidden]) { animation: sv-panel-in .45s var(--ease-out); }
@keyframes sv-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sv-model__label { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #48667d; }
.sv-model h4 { margin-top: 10px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.sv-model__copy > p:not(.sv-model__label) { margin-top: 16px; color: var(--pg-muted); font-size: 15px; line-height: 2.05; }
.sv-model__copy .pg-link { margin-top: 22px; }
.sv-model__figure { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--pg-line-cool); box-shadow: 0 1px 2px rgba(21, 43, 61, .04), 0 18px 40px -26px rgba(21, 43, 61, .3); }
.sv-model__figure .diagram-zoom { aspect-ratio: 960 / 680; }
/* 余白は構成図（SVG）の側に持たせてあるので、枠の内側はわずかに空けるだけにする */
.sv-model__figure .diagram-zoom img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.sv-model__figure .diagram-zoom:hover img, .sv-model__figure .diagram-zoom:focus-visible img { transform: scale(1.04); }
/* タッチ端末では「拡大して見る」が出たままになる。構成図の文字に掛からないよう、
   図の右下の空き（在宅の枠の外・注記の右）に収まる小さな丸だけにする */
@media (hover: none) {
  .sv-model__figure .diagram-zoom__hint { right: 4px; bottom: 4px; width: 24px; height: 24px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
  .sv-model__figure .diagram-zoom__hint::before { font-size: 15px; }
}

/* 迷ったときの相談（構成モデルの後に置く） */
.sv-consult {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch;
  margin-top: 28px; border-radius: 24px; overflow: hidden; background: var(--pg-paper); border: 1px solid var(--pg-line);
}
.sv-consult .pg-art { border: 0; border-radius: 0; min-height: 100%; }
.sv-consult .pg-art img { aspect-ratio: 4 / 3; }
.sv-consult__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px 56px; }
.sv-consult__label { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-dark); }
.sv-consult h3 { margin-top: 12px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.55; letter-spacing: -.01em; }
.sv-consult p:not(.sv-consult__label) { margin-top: 16px; color: var(--pg-muted); font-size: 15px; line-height: 2.05; }
.sv-consult .btn { margin-top: 30px; min-height: 52px; font-size: 14px; }
.sv-consult .btn::after { content: "→"; transition: transform .3s var(--ease-out); }
.sv-consult .btn:hover::after { transform: translateX(3px); }

/* 02 Plus series — hub panel, six services, OEM strip ------------------------ */
/* 冒頭にハブ図と説明の横長パネル、6つのサービスを3列×2段、最後にOEMの全幅の帯（旧版と同じ位置） */
.sv-hub {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  margin-bottom: 20px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--pg-line);
}
.sv-hub__art { border: 0; border-radius: 0; aspect-ratio: 4 / 3; border-right: 1px solid var(--pg-line); }
.sv-hub__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px 56px; }
.sv-hub__label { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-dark); }
.sv-hub h3 { margin-top: 12px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.55; letter-spacing: -.01em; }
.sv-hub__copy > p:not(.sv-hub__label) { margin-top: 16px; color: var(--pg-muted); font-size: 15px; line-height: 2.05; }
.sv-hub .pg-link { margin-top: 22px; }

.sv-plus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.sv-service {
  display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 0 30px 26px;
  border-radius: 20px; background: #fff; border: 1px solid var(--pg-line);
  transition: border-color .3s, box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.sv-service:hover { border-color: #c9d5de; box-shadow: 0 2px 6px rgba(21, 43, 61, .04), 0 24px 48px -30px rgba(21, 43, 61, .35); transform: translateY(-3px); }
/* カード上部のスポットイラスト。カードの左右いっぱいに敷き、紙色の地で本文の白と分ける */
.sv-service__art {
  align-self: stretch; margin: 0 -30px 22px; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--pg-paper); border-bottom: 1px solid var(--pg-line);
}
.sv-service__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.sv-service:hover .sv-service__art img { transform: scale(1.03); }
.sv-service__type { font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; color: #5b7487; }
.sv-service h3 { margin-top: 8px; font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .01em; }
.sv-service__note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; color: var(--color-primary-dark);
}
.sv-service__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: none; }
/* 本文だけを伸ばしてリンクをカードの下端にそろえる（種別ラベル・注記は伸ばさない） */
.sv-service p:not(.sv-service__note):not(.sv-service__type) { margin-top: 12px; flex: 1 0 auto; color: var(--pg-muted); font-size: 14px; line-height: 2; }
.sv-service__links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 18px; }
.sv-service__links .pg-link { font-size: 13.5px; }

/* OEM・カスタマイズ開発: ＋シリーズの最後に置く全幅の帯（紺の本文＋紙の絵） */
.sv-oem {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch;
  margin-top: 20px; border-radius: 24px; overflow: hidden; background: var(--pg-night); color: #f3f7fa;
}
.sv-oem__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 44px 56px; }
.sv-oem__label { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #ffb27a; }
.sv-oem h3 { margin-top: 12px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.sv-oem p:not(.sv-oem__label) { margin-top: 14px; max-width: 520px; font-size: 15px; line-height: 2.05; color: #bfd0dd; }
.sv-oem .pg-link { margin-top: 22px; }
.sv-oem__art { border: 0; border-radius: 0; aspect-ratio: 4 / 3; }

/* 03 PSTN column ------------------------------------------------------------ */
.sv-pstn__art { aspect-ratio: 21 / 8; margin-bottom: 64px; }
/* 絵の描画範囲（電話機の受話器〜カールコード）が帯の上下中央に来る位置 */
.sv-pstn__art img { object-position: 50% 50%; }
.sv-pstn__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px 80px; align-items: start; }
.sv-pstn__article p { color: var(--pg-text, #33424f); font-size: 15.5px; line-height: 2.1; }
.sv-pstn__article p + p { margin-top: 18px; }
.sv-pstn__article .pg-link { margin-top: 26px; }
.sv-timeline__title { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #48667d; margin-bottom: 18px; }
.sv-timeline { position: relative; display: grid; gap: 0; }
.sv-timeline::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 26px; width: 1px; background: #c9d5de; }
.sv-timeline li { position: relative; padding: 0 0 30px 40px; }
.sv-timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 1px solid #9fb3c2;
}
.sv-timeline li:last-child { padding-bottom: 0; }
.sv-timeline li.is-now::before { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 0 5px rgba(234, 91, 0, .14); }
.sv-timeline__when { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #48667d; font-variant-numeric: tabular-nums; }
.sv-timeline li.is-now .sv-timeline__when { color: var(--color-primary-dark); }
.sv-timeline strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 600; line-height: 1.6; }
.sv-timeline__text { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.95; color: var(--pg-muted); }

/* 実例（TECH BEAT Shizuoka 2026） */
.sv-report {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center;
  margin-top: 80px; padding: 32px 40px 32px 32px; border-radius: 24px; background: var(--pg-cool); border: 1px solid var(--pg-line-cool);
}
.sv-report__figure { margin: 0; }
.sv-report__figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.sv-report__figure figcaption { margin-top: 10px; font-size: 12px; color: var(--pg-soft); text-align: center; }
.sv-report__label { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--color-primary-dark); }
.sv-report h3 { margin-top: 8px; font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.6; }
.sv-report p:not(.sv-report__label) { margin-top: 12px; font-size: 14.5px; line-height: 2; color: var(--pg-muted); }
.sv-report .pg-link { margin-top: 16px; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .sv-neutral { gap: 40px 44px; margin-bottom: 88px; }
  .sv-model { grid-template-columns: 1fr; padding: 36px; }
  .sv-models__tab { font-size: 13.5px; gap: 10px; }
  .sv-consult__copy { padding: 40px; }
  .sv-hub__copy, .sv-oem__copy { padding: 36px 40px; }
  .sv-plus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-pstn__body { gap: 48px; }
}
@media (max-width: 768px) {
  .sv-neutral { grid-template-columns: 1fr; margin-bottom: 72px; }
  .sv-models__tabs { grid-template-columns: repeat(5, minmax(56px, 1fr)); }
  .sv-models__tab { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 2px 14px; min-height: 0; font-size: 11.5px; text-align: center; letter-spacing: 0; }
  .sv-models__tab::after { right: 2px; left: 2px; }
  .sv-model { padding: 28px 22px; border-radius: 18px; gap: 24px; }
  .sv-model__figure .diagram-zoom img { padding: 2px; }
  .sv-consult { grid-template-columns: 1fr; }
  .sv-consult__copy { padding: 30px 24px 34px; }
  .sv-hub { grid-template-columns: 1fr; margin-bottom: 16px; border-radius: 18px; }
  .sv-hub__art { border-right: 0; border-bottom: 1px solid var(--pg-line); }
  .sv-hub__copy, .sv-oem__copy { padding: 28px 24px 30px; }
  .sv-plus { grid-template-columns: 1fr; gap: 16px; }
  .sv-oem { grid-template-columns: 1fr; margin-top: 16px; border-radius: 18px; }
  .sv-oem__art { order: -1; }
  .sv-pstn__art { aspect-ratio: 4 / 3; margin-bottom: 40px; border-radius: 18px; }
  .sv-pstn__body { grid-template-columns: 1fr; }
  .sv-report { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; padding: 24px; }
  .sv-report__figure { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-models.is-tabbed .sv-model:not([hidden]) { animation: none; }
  .sv-models__tab::after, .sv-service, .sv-service__art img { transition: none; }
  .sv-service:hover .sv-service__art img { transform: none; }
  .sv-service:hover { transform: none; }
}