/* 製品一覧ページ専用。サイズ・色はこの共通変数で調整します。 */
#yl-products {
  --ylc-blue: #087bd2;
  --ylc-navy: #1a3a5c;
  --ylc-muted: #58789a;
  --ylc-pale: #f1f8ff;
  --ylc-line: #dce9f5;
  --ylc-description-size: 16px;
  --ylc-card-title-size: 18px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ylc-navy);
  font-size: var(--ylc-description-size);
  line-height: 1.85;
  overflow-wrap: anywhere;
}
#yl-products *, #yl-products *::before, #yl-products *::after { box-sizing: border-box; }
#yl-products h2, #yl-products h3, #yl-products h4, #yl-products p,
#yl-products ul, #yl-products dl, #yl-products dt, #yl-products dd { margin: 0; padding: 0; }
#yl-products h2, #yl-products h3, #yl-products h4 { border: 0; color: var(--ylc-navy); letter-spacing: 0; }
#yl-products h2::before { content: none; }
#yl-products a { color: var(--ylc-blue); text-decoration: none; opacity: 1; }
#yl-products a:focus-visible, #yl-products summary:focus-visible { outline: 3px solid var(--ylc-navy); outline-offset: 4px; }
#yl-products .ylc-description, #yl-products .ylc-list, #yl-products .ylc-plan-limit { font-size: var(--ylc-description-size); font-weight: 400; line-height: 1.85; color: var(--ylc-muted); }
#yl-products .ylc-title { font-size: var(--ylc-card-title-size); font-weight: 700; line-height: 1.6; }
#yl-products .ylc-section-title { font-size: 28px; font-weight: 700; line-height: 1.5; }
#yl-products .ylc-kicker { font-size: 12px; line-height: 1.6; font-weight: 700; letter-spacing: .12em; color: var(--ylc-blue); }
#yl-products .ylc-badge { display: inline-flex; align-items: center; align-self: flex-start; border: 1px solid #cbe5fa; padding: 3px 10px; border-radius: 20px; font-size: 12px; line-height: 1.6; font-weight: 700; color: var(--ylc-blue); background: var(--ylc-pale); }
#yl-products .ylc-badge--free { background: #e9f7f4; border-color: #c9e9df; color: #23715d; }
#yl-products .ylc-intro { max-width: 760px; margin: 0 auto; text-align: center; }
#yl-products .ylc-intro .ylc-kicker { margin-bottom: 12px; }
#yl-products .ylc-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#yl-products .ylc-jump a { padding: 9px 16px; border: 1px solid var(--ylc-line); border-radius: 24px; font-size: 14px; font-weight: 700; background: #fff; }
#yl-products .ylc-jump a:hover { border-color: var(--ylc-blue); background: var(--ylc-pale); }
#yl-products .ylc-section { margin-top: 56px; scroll-margin-top: 100px; }
#yl-products .ylc-section-head { display: grid; gap: 10px; margin-bottom: 24px; }
#yl-products .ylc-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
#yl-products .ylc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; padding: 28px; border: 1px solid var(--ylc-line); border-radius: 14px; background: #fff; }
#yl-products .ylc-card--free { background: #f8fcff; }
#yl-products .ylc-card-head { display: flex; gap: 16px; align-items: center; width: 100%; }
#yl-products .ylc-card-head > div:last-child { min-width: 0; }
#yl-products .ylc-card-head .ylc-badge { margin-bottom: 6px; }
#yl-products .ylc-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex: 0 0 68px; background: var(--ylc-pale); border-radius: 14px; }
#yl-products .ylc-icon svg { display: block; width: 56px; height: 56px; }
#yl-products .ylc-list { list-style: none; width: 100%; }
#yl-products .ylc-list li { position: relative; margin: 0; padding: 9px 0 9px 22px; border-bottom: 1px solid #edf3f8; line-height: 1.85; }
#yl-products .ylc-list li::before { content: ''; position: absolute; left: 1px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--ylc-blue); }
#yl-products .ylc-list li:last-child { border-bottom: 0; }
#yl-products .ylc-card-footer { display: grid; gap: 12px; width: 100%; margin-top: auto; padding-top: 4px; }
#yl-products .ylc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--ylc-card-title-size); line-height: 1.6; font-weight: 700; color: var(--ylc-navy); }
#yl-products .ylc-price span { font-size: 14px; font-weight: 400; color: var(--ylc-muted); }
#yl-products .ylc-license { font-size: 14px; line-height: 1.85; color: var(--ylc-muted); }
#yl-products .ylc-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 48px; padding: 11px 22px; border: 1px solid var(--ylc-blue); border-radius: 28px; font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center; color: #fff; background: var(--ylc-blue); }
#yl-products .ylc-button:hover { color: #fff; background: #086bb5; border-color: #086bb5; opacity: 1; }
#yl-products .ylc-button--outline { color: var(--ylc-blue); background: #fff; }
#yl-products .ylc-button--outline:hover { color: var(--ylc-blue); background: var(--ylc-pale); }
#yl-products .ylc-saas-stack { display: grid; gap: 28px; }
#yl-products .ylc-saas { display: grid; gap: 24px; padding: 32px; border: 1px solid var(--ylc-line); border-radius: 14px; background: #fff; }
#yl-products .ylc-saas-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; }
#yl-products .ylc-saas-lead { max-width: 840px; }
#yl-products .ylc-common-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
#yl-products .ylc-plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#yl-products .ylc-plans--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
#yl-products .ylc-plan { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px; border: 1px solid var(--ylc-line); border-radius: 10px; background: var(--ylc-pale); }
#yl-products .ylc-plan .ylc-list li { border-color: #dce9f5; }
#yl-products .ylc-saas-action { display: flex; justify-content: flex-end; }
#yl-products .ylc-saas-action .ylc-button { min-width: 260px; }
#yl-products .ylc-development { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 32px; align-items: center; padding: 32px; border: 1px solid var(--ylc-line); border-radius: 14px; background: var(--ylc-pale); }
#yl-products .ylc-development-intro { display: grid; gap: 18px; }
#yl-products .ylc-development .ylc-button { justify-self: start; }
#yl-products .ylc-closing { margin-top: 24px; font-size: 14px; line-height: 1.85; text-align: center; color: var(--ylc-muted); }

/* 製品一覧の背景・本文幅。タイトル帯は共通CSSで管理します。 */
body:has(#yl-products) { background: #fff; }
body:has(#yl-products) .yl-page-wrap { padding: 36px 32px 64px; }

@media (max-width: 900px) {
  #yl-products .ylc-card { padding: 24px; }
  #yl-products .ylc-saas { padding: 24px; }
  #yl-products .ylc-plans--three { grid-template-columns: 1fr; }
  #yl-products .ylc-development { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}
@media (max-width: 640px) {
  body:has(#yl-products) .yl-page-wrap { padding: 28px 18px 48px; }
  #yl-products .ylc-section { margin-top: 40px; scroll-margin-top: 88px; }
  #yl-products .ylc-section-title { font-size: 24px; }
  #yl-products .ylc-grid, #yl-products .ylc-plans, #yl-products .ylc-common-features { grid-template-columns: 1fr; }
  #yl-products .ylc-grid { gap: 18px; }
  #yl-products .ylc-card, #yl-products .ylc-saas, #yl-products .ylc-development { padding: 22px 18px; }
  #yl-products .ylc-card-head { gap: 12px; }
  #yl-products .ylc-icon { width: 54px; height: 54px; flex-basis: 54px; border-radius: 11px; }
  #yl-products .ylc-icon svg { width: 44px; height: 44px; }
  #yl-products .ylc-saas-head { grid-template-columns: 1fr; }
  #yl-products .ylc-saas-action .ylc-button { width: 100%; min-width: 0; }
  #yl-products .ylc-development .ylc-button { width: 100%; }
  #yl-products .ylc-jump { gap: 8px; }
  #yl-products .ylc-jump a { padding: 8px 12px; }
}