/* PowerDVD Compare Plans, JPN only (Standard / Pro / Ultra / 365), loaded after css/pricing.css.
   GENERATED by tools/build.py from the JPN mockup powerdvd-compare-mockup-with-pro-JP.html (2026-10-17).
   改本檔要去 pricing-production.jsp 把 pricing-jpn.css?v= 往上加。 */
/* 4-column (with Pro) overrides */
.cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; }
.card { max-width:none; }
.card[data-product="PDVD-PRO"] .product, .card[data-product="PDVD-PRO"]::before { background:linear-gradient(120deg,#0F4C9A 0%,#1E63C4 55%,#3B8BE8 100%); }
main#main-content.pdvd span.product h2 { font-size:18.4px; }
@media (min-width:901px) and (max-width:1100px) { main#main-content.pdvd span.product h2 { font-size:16px; white-space:nowrap; } }
main.pdvd .card .product { padding:20px 16px; }
main.pdvd .card .product img { width:40px; height:40px; }
main.pdvd .card .product p { font-size:.7rem; }
main.pdvd .card .ck-mark, main.pdvd .card .plan-summary { font-size:.8rem; }
main.pdvd .grid { grid-template-columns:auto repeat(4,13%); }
main.pdvd .grid.features > p + span + span + span + span { display:flex; }
main.pdvd .grid.features > span:nth-of-type(3n+1) circle, main.pdvd .grid.features > span:nth-of-type(3n+2) circle, main.pdvd .grid.features > span:nth-of-type(3n+3) circle { fill:inherit; }
main.pdvd .grid.features > span:nth-of-type(4n+1) circle { fill:#15A874; }
main.pdvd .grid.features > span:nth-of-type(4n+2) circle { fill:#1E63C4; }
main.pdvd .grid.features > span:nth-of-type(4n+3) circle { fill:var(--pd40); }
main.pdvd .grid.features > span:nth-of-type(4n+4) circle { fill:var(--pd10); }
main.pdvd .grid.features > span:nth-of-type(4n+1) { color:#0B7A55; }
main.pdvd .grid.features > span:nth-of-type(4n+2) { color:#1E63C4; }
main.pdvd .grid.features > span:nth-of-type(4n+3) { color:var(--pd40); }
main.pdvd .grid.features > span:nth-of-type(4n+4) { color:var(--pd10); }
main.pdvd .grid.features p:nth-child(8n+5), main.pdvd .grid.features p:nth-child(8n+5) + span, main.pdvd .grid.features p:nth-child(8n+5) + span + span, main.pdvd .grid.features p:nth-child(8n+5) + span + span + span,
main.pdvd .grid.features p:nth-child(8n+1), main.pdvd .grid.features p:nth-child(8n+1) + span, main.pdvd .grid.features p:nth-child(8n+1) + span + span, main.pdvd .grid.features p:nth-child(8n+1) + span + span + span { background:transparent; }
main.pdvd .grid.features p:nth-child(10n+6), main.pdvd .grid.features p:nth-child(10n+6) + span, main.pdvd .grid.features p:nth-child(10n+6) + span + span, main.pdvd .grid.features p:nth-child(10n+6) + span + span + span, main.pdvd .grid.features p:nth-child(10n+6) + span + span + span + span { background:#f4f4f4; }
main.pdvd .grid.features p:nth-child(10n+1), main.pdvd .grid.features p:nth-child(10n+1) + span, main.pdvd .grid.features p:nth-child(10n+1) + span + span, main.pdvd .grid.features p:nth-child(10n+1) + span + span + span, main.pdvd .grid.features p:nth-child(10n+1) + span + span + span + span { background:#fff; }
main.pdvd .grid.all-features::after { background:linear-gradient(100deg,#15A874 0%,#1E63C4 35%,var(--pd40) 68%,var(--pd20) 100%); }
main.pdvd .grid.all-features .name { font-size:13px; }
main.pdvd section.cards ~ section .grid.features > p + span + span { color:#1E63C4; }
main.pdvd section.cards ~ section .grid.features > p + span + span circle { fill:#1E63C4; }
@media (max-width:840px) {
  main#main-content.pdvd .grid { grid-template-columns:repeat(4,1fr); }
  main#main-content.pdvd .grid.features > span { display:flex !important; }
  main#main-content.pdvd .grid.features > span:nth-of-type(4n+1) { background:#15A874 !important; }
  main#main-content.pdvd .grid.features > span:nth-of-type(4n+2) { background:#1E63C4 !important; }
  main#main-content.pdvd .grid.features > span:nth-of-type(4n+3) { background:var(--pd40) !important; }
  main#main-content.pdvd .grid.features > span:nth-of-type(4n+4) { background:var(--pd10) !important; }
  main#main-content.pdvd .grid.all-features .name { font-size:clamp(12px,3.4vw,15px); }
}
@media (max-width:420px) { html[lang="ja"] main .grid.section > a.accordion { font-size:12px; letter-spacing:-.02em; } html[lang="ja"] span.c_uniq { margin-left:6px; padding:2px 6px; } } @media (max-width:370px) { html[lang="ja"] main .grid.section > a.accordion { font-size:11px; } }
section.cards[lang="ja"], section.cards[lang="ja"] * { font-family:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif; word-break:auto-phrase; }

@media (max-width:340px) { main .grid.section > a.accordion { font-size:12px; letter-spacing:-.01em; padding-left:16px; padding-right:26px; } main .grid.section > a.accordion span.c_uniq { margin-left:6px; padding:3px 6px; } html[lang="ja"] main .grid.section > a.accordion { font-size:10px; } }
/* mask the gap between the site bar and the sticky plan header (mobile sets --sticky-top-space larger than the bar height) */
.mask-underflow::before { content:""; position:absolute; top:0; left:0; right:0; height:var(--sticky-top-space); background:var(--main-background-color); background-attachment:fixed; pointer-events:none; }