/* ===========================================================
   サービス詳細ページ専用スタイル
   （index.css は原本のまま。追加分はすべて .sd- 接頭辞）
   =========================================================== */

/* ---------- トップページ 各セクションの高さ・余白 ---------- */
.sd-hero { height: 250px; }
@media (min-width: 768px) { .sd-hero { height: 310px; } }

.sd-sec-lead { padding: 32px 0 28px; }
.sd-sec-featured { padding: 36px 0 32px; }
.sd-sec-cats { padding: 36px 0 48px; }

/* 区分一覧セクションの内側の余白（index.css の mb-12 / mb-10 を上書き） */
.sd-sec-cats > .container-custom > p { margin-bottom: 24px; }
.sd-sec-cats > .container-custom > .mb-10 { margin-bottom: 28px; }

/* ---------- 注目の掲載候補サービス（スライダー） ---------- */
.sd-sl { position: relative; }
.sd-sl-track {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-left: 2px;
  padding: 4px 2px 8px; margin: 0 -2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sd-sl-track::-webkit-scrollbar { display: none; }
/* カードは button 要素。Chrome は button の中身を上下中央に寄せるので display で打ち消す */
.sd-sl-track > * {
  flex: 0 0 86%; min-width: 0; scroll-snap-align: start; text-align: left;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
/* 確認状況バッジ（span）は横幅いっぱいに伸ばさない */
.sd-sl-track > * > span { align-self: flex-start; }
@media (min-width: 768px) { .sd-sl-track > * { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .sd-sl-track > * { flex-basis: calc((100% - 40px) / 3); } }
.sd-sl-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; z-index: 2;
  background: #fff; border: 1px solid var(--rule); color: var(--key);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 39, 64, .12);
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.sd-sl-nav:hover { background: var(--key); border-color: var(--key); color: #fff; }
.sd-sl-prev { left: -22px; }
.sd-sl-next { right: -22px; }
@media (max-width: 767px) { .sd-sl-nav { display: none; } }
.sd-sl-hint { display: none; font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 6px; }
@media (max-width: 767px) { .sd-sl-hint { display: block; } }

/* ---------- ヘッダーの縦幅 ---------- */
/* 赤帯は文字の外側に少しだけ余白を残す程度に */
.sd-note-bar { padding: 5px 16px; font-size: 12px; line-height: 1.55; }
.sd-hd-bar { height: 52px; }

/* ---------- ヘッダー／フッターの外部リンク ---------- */
/* index.css はビルド済みなので、gap 等の任意値クラスはここで指定する */
.sd-nav { gap: 22px; }
@media (max-width: 1023px) { .sd-nav { gap: 14px; } }

.sd-ext { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* ヘッダーのリンクは他のメニュー項目と同じ見た目に揃える（アクセント色は使わない） */
.sd-ext-h { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.sd-ext-h:hover { color: var(--ink); }
.sd-ext-m { font-size: 14px; color: var(--ink-2); padding: 8px 0; }
.sd-ext-f { font-size: 13px; color: rgba(255, 255, 255, .85); text-decoration: underline; }
.sd-ext-f:hover { color: #fff; }
.sd-foot-link { text-align: center; margin-bottom: 14px; }

/* ---------- トップ・区分一覧の軸説明（旧「なぜ分かれているのか」） ---------- */
.sd-axis-lead {
  font-size: 14px; color: var(--ink-2); line-height: 1.85;
  max-width: 860px; margin: 0 0 16px;
}
.sd-axis-note {
  font-size: 12px; color: var(--ink-2); line-height: 1.8;
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule-2);
}

.sd-page { display: flex; flex-direction: column; gap: 40px; }

/* ---------- 企業ヘッダー ---------- */
.sd-head { border-bottom: 1px solid var(--rule); padding-bottom: 20px; }
.sd-head-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.sd-head h1 { font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.4; }
@media (min-width: 768px) { .sd-head h1 { font-size: 36px; } }
.sd-id { font-size: 12px; color: var(--ink-2); background: var(--base-2); padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; }
.sd-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sd-chip { font-size: 12px; padding: 3px 9px; border-radius: 4px; background: rgba(18, 58, 94, .08); color: var(--key); }
.sd-count { font-size: 13px; color: var(--ink-2); }

/* ---------- サービスカード ---------- */
.sd-card { background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }

/* キービジュアル */
.sd-kv { position: relative; height: 180px; background: var(--key-d); }
@media (min-width: 768px) { .sd-kv { height: 224px; } }
.sd-kv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-kv-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 26, 42, .88) 0%, rgba(8, 26, 42, .62) 46%, rgba(8, 26, 42, .18) 100%); }
/* 区分別の帯（assets/kv/*.svg）を敷いているとき。
   もともと暗い図柄なので、暗幕は文字が読める程度に弱めて図柄を活かす。 */
.sd-kv--cat .sd-kv-shade { background: linear-gradient(90deg, rgba(8, 26, 42, .74) 0%, rgba(8, 26, 42, .46) 52%, rgba(8, 26, 42, .06) 100%); }
.sd-kv-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 22px; }
@media (min-width: 768px) { .sd-kv-body { padding: 26px 32px; } }
.sd-kv-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sd-kv-cat { font-size: 12px; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 4px; }
.sd-kv-dept { font-size: 12px; color: rgba(255, 255, 255, .78); }
.sd-kv-title { font-family: var(--font-mincho); font-size: 22px; font-weight: 600; color: #fff; line-height: 1.45; letter-spacing: .02em; }
@media (min-width: 768px) { .sd-kv-title { font-size: 30px; } }
.sd-kv-company { font-size: 13px; color: rgba(255, 255, 255, .78); margin-top: 8px; }
.sd-kv-note { font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 10px; }
@media (max-width: 767px) { .sd-kv-note { display: none; } }

/* ---------- 画像の「未入稿」プレースホルダ ---------- */
/* 各社に「ここに絵が入る」と分かってもらうための枠。
   画像をご入稿いただいたら SD_PHOTO に登録すれば自動で差し替わる。 */
.sd-ph-tag {
  position: absolute; z-index: 2;
  font-size: 11px; letter-spacing: .04em; line-height: 1;
  padding: 5px 10px; border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, .5);
  background: rgba(8, 26, 42, .5); color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.sd-ph-tag--kv { top: 12px; right: 14px; }

/* ---------- 製品画像（サムネイル＋拡大表示） ---------- */
/* 各社の入稿画像は縦横比がまちまちなので、枠に切り抜く（object-fit:cover）のを
   やめ、サービス単位で決めた縦横比（--sd-ar、detail-page.js が算出）の枠に
   画像の全体を収める（object-fit:contain）。これで画像が切れない。
   全体を見せるぶんサムネイルは小さくなるので、クリックで拡大表示できる。 */
.sd-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
/* 入稿が1枚・2枚のときは、1枚あたりが小さくなりすぎないよう列数を減らす */
.sd-shots--n1 { grid-template-columns: minmax(0, 520px); }
.sd-shots--n2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 639px) {
  .sd-shots, .sd-shots--n1, .sd-shots--n2 { grid-template-columns: 1fr; gap: 14px; }
}
.sd-shot { margin: 0; min-width: 0; }

.sd-shot-frame {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: var(--sd-ar, 1.6);
  background: var(--base-2); border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden;
}
.sd-shot-frame > img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* 画像の地色が白いものが多いので、枠の内側にわずかに余白を残す */
.sd-shot-btn > img { padding: 6px; }
/* 未入稿のプレースホルダは画像（shot.svg）側に枠線があるので、枠は出さない */
.sd-shot-frame--ph { background: transparent; border-color: transparent; }

.sd-shot-btn { cursor: zoom-in; transition: border-color var(--dur), box-shadow var(--dur); }
.sd-shot-btn:hover { border-color: var(--key); box-shadow: 0 2px 12px rgba(11, 39, 64, .12); }
.sd-shot-btn:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }

/* 「拡大できる」ことを示す虫めがね */
.sd-shot-zoom {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 26, 42, .58); color: #fff; font-size: 15px; line-height: 1;
  opacity: .8; transition: opacity var(--dur), background var(--dur);
}
.sd-shot-btn:hover .sd-shot-zoom { opacity: 1; background: var(--key); }

.sd-shot > figcaption { font-size: 12px; color: var(--ink-2); line-height: 1.6; margin-top: 7px; }

/* ---------- 画像の拡大表示（ライトボックス） ---------- */
.sd-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.sd-lb-back { position: absolute; inset: 0; background: rgba(8, 26, 42, .9); }
.sd-lb-box {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 92vw; padding: 0 56px;
}
@media (max-width: 639px) { .sd-lb-box { padding: 0 12px; max-width: 96vw; } }
.sd-lb-img {
  display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto;
  object-fit: contain; background: #fff; border-radius: 6px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .45); cursor: zoom-out;
}
@media (max-width: 639px) { .sd-lb-img { max-height: 66vh; } }
.sd-lb-cap {
  max-width: 860px; font-size: 13px; line-height: 1.75;
  color: rgba(255, 255, 255, .92); text-align: center;
}
.sd-lb-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 12px; color: rgba(255, 255, 255, .58); letter-spacing: .04em;
}
@media (max-width: 639px) { .sd-lb-hint { display: none; } }

.sd-lb-x, .sd-lb-nav {
  position: absolute; z-index: 2; border: 0; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  background: rgba(255, 255, 255, .14); border-radius: 999px;
  transition: background var(--dur);
}
.sd-lb-x:hover, .sd-lb-nav:hover { background: rgba(255, 255, 255, .3); }
.sd-lb-x { top: 16px; right: 18px; width: 40px; height: 40px; font-size: 22px; }
.sd-lb-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; }
.sd-lb-prev { left: 18px; }
.sd-lb-next { right: 18px; }
@media (max-width: 639px) {
  .sd-lb-nav { width: 36px; height: 36px; font-size: 21px; }
  .sd-lb-prev { left: 6px; }
  .sd-lb-next { right: 6px; }
}

.sd-ph-note { font-size: 12px; color: var(--ink-2); line-height: 1.7; margin-top: 9px; }

/* 製品の詳細（本文＋仕様） */
.sd-detail { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.sd-detail > p { font-size: 14px; color: var(--ink); line-height: 1.95; }

.sd-spec {
  margin-top: 16px; border-top: 1px solid var(--rule-2);
  display: flex; flex-direction: column;
}
.sd-spec > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--rule-2);
}
@media (max-width: 639px) { .sd-spec > div { grid-template-columns: 1fr; gap: 3px; } }
.sd-spec dt { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.sd-spec dd { font-size: 13px; color: var(--ink); line-height: 1.7; }

/* 導入実績・事例 */
.sd-ev-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sd-ev-chip { font-size: 13px; color: var(--ink); background: var(--base-2); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; }
.sd-ev-sub { font-size: 12px; color: var(--ink-2); margin-top: 10px; line-height: 1.7; }
.sd-ev-link { display: inline-flex; align-items: center; gap: 5px; color: var(--key); text-decoration: underline; }
.sd-ev-none { font-size: 14px; color: var(--ink-2); }

/* 本文（①特徴 → ②製品の詳細 → ③導入実績・事例 → ④リンク の1カラム） */
.sd-body { display: flex; flex-direction: column; gap: 26px; padding: 24px 22px 26px; }
@media (min-width: 768px) { .sd-body { padding: 28px 32px 30px; } }

.sd-h { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; padding-left: 11px; border-left: 3px solid var(--key); line-height: 1.4; }
.sd-h small { font-weight: 400; font-size: 12px; color: var(--ink-2); margin-left: 8px; }

.sd-lead { font-size: 15px; color: var(--ink); line-height: 1.9; }

/* 特長カード */
.sd-feats { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .sd-feats { grid-template-columns: repeat(3, 1fr); } }
.sd-feat { background: var(--base-2); border-radius: 8px; padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 9px; }
.sd-feat-no { width: 26px; height: 26px; border-radius: 999px; background: var(--key); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-feat-hd { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.sd-feat-txt { font-size: 13px; color: var(--ink); line-height: 1.75; }
.sd-feat-hd + .sd-feat-txt { color: var(--ink-2); margin-top: -3px; }

/* ---------- ボタン（製品情報ページ／お問い合わせ） ---------- */
.sd-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 2px; }
.sd-actions > * { flex: 1 1 260px; }
.sd-btn { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; padding: 12px 14px; border-radius: 6px; text-align: center; line-height: 1.4; }
.sd-btn--key { background: var(--key); color: #fff; }
.sd-btn--key:hover { background: var(--key-d); }
.sd-btn--out { border: 1px solid var(--rule); color: var(--key); }
.sd-btn--out:hover { border-color: var(--key); }