/* v280: 新テンプレートで使われているのにスタイル未定義だった部品の定義。
   マークアップ（製品名・説明文・リンク・ボタン動作）は変更せず、見た目だけを補う。
   スマホ／タブレット／PC で同じ部品・同じ配色。列数のみ画面幅に応じて変わる。 */

/* --- 関連製品カード（名前＋説明つき）: .rel-g > .rel-c --- */
.rel-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:4px}
.rel-g .rel-c{display:flex!important;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;min-height:0;
  text-align:left;text-decoration:none;color:var(--ink,#15212e);background:#fff;border:1px solid var(--line,#e2e8f0);
  border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,32,54,.04);transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.rel-g .rel-c:hover,.rel-g .rel-c:focus-visible{border-color:var(--blue,#1d69df);box-shadow:0 10px 24px -14px rgba(16,32,54,.35);transform:translateY(-2px);outline:none}
.rel-g .rel-vendor{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-faint,#697887);margin:0}
.rel-g .rel-n{display:block;font-size:14.5px;font-weight:700;line-height:1.45;color:var(--ink,#15212e);overflow-wrap:anywhere}
.rel-g .rel-c:hover .rel-n{color:var(--blue,#1d69df)}
.rel-g .rel-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.7;color:var(--ink-dim,#52647a)}

/* --- 関連製品リンク（名前のみ）: .dl-rels > .dl-rel --- */
.dl-rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:4px}
.dl-rels .dl-rel{display:flex;align-items:center;min-height:48px;box-sizing:border-box;padding:12px 16px;text-decoration:none;
  font-size:14px;font-weight:700;line-height:1.45;color:var(--ink,#15212e);background:#fff;border:1px solid var(--line,#e2e8f0);
  border-radius:12px;box-shadow:0 1px 2px rgba(16,32,54,.04);transition:border-color .15s,color .15s,box-shadow .15s;overflow-wrap:anywhere;min-width:0}
.dl-rels .dl-rel:hover,.dl-rels .dl-rel:focus-visible{border-color:var(--blue,#1d69df);color:var(--blue,#1d69df);box-shadow:0 10px 24px -14px rgba(16,32,54,.35);outline:none}

/* --- お問い合わせカードと主ボタン（サイト共通の緑CTAに統一） --- */
.dl-cta-card .dl-p{font-size:14px;line-height:1.8;color:var(--ink,#15212e);margin:0 0 14px}
.dl-cta-card .dl-cta,button.dl-quote{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 22px;margin:4px 0 0;border:1px solid #16b886;border-radius:10px;background:#16b886;color:#fff;
  font:inherit;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;text-decoration:none;box-shadow:0 1px 2px rgba(16,32,54,.08);transition:background .15s,box-shadow .15s}
.dl-cta-card .dl-cta:hover,.dl-cta-card .dl-cta:focus-visible,button.dl-quote:hover,button.dl-quote:focus-visible{background:#12a377;border-color:#12a377;box-shadow:0 10px 24px -12px rgba(22,184,134,.6);outline:none}

/* --- 「含まれるもの」一覧: .pkg-items --- */
.pkg-items{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pkg-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:12px 14px;min-width:0}
.pkg-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#16b886;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.pkg-it{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.pkg-it b{font-size:14px;line-height:1.45;color:var(--ink,#15212e)}
.pkg-it span{font-size:12.5px;line-height:1.6;color:var(--ink-dim,#52647a)}

/* --- パートナー商社一覧: .pt-grid --- */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.pt-c{background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,32,54,.04);min-width:0}
.pt-n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--blue,#1d69df);letter-spacing:.06em}
.pt-name{font-weight:700;font-size:15px;line-height:1.45;margin-top:4px;color:var(--ink,#15212e);overflow-wrap:anywhere}
.pt-role{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-faint,#697887);margin-top:4px}
.pt-note{margin-top:16px;background:#f6f8fb;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:16px 18px;line-height:1.8}
a.pt-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;padding:11px 22px;border-radius:10px;background:#16b886;border:1px solid #16b886;color:#fff!important;font-weight:700;font-size:14px;text-decoration:none!important}
a.pt-cta:hover,a.pt-cta:focus-visible{background:#12a377;border-color:#12a377;outline:none}

/* スマホ: 1列・タップしやすい余白（色・形はPC/タブレットと同一） */
@media(max-width:640px){
  .rel-g,.dl-rels,.pkg-items,.pt-grid{grid-template-columns:1fr}
  .dl-cta-card .dl-cta,button.dl-quote,a.pt-cta{width:100%}
}