/* 料金ページ：4 段の方眼の階段（feat3d.js の mountPricing）と、段の下に並ぶ紙のカード */
.pr{padding:26px 0 80px}
.pr-stage{position:relative;height:clamp(300px,38vw,440px);margin:0 auto;border-radius:4px;overflow:hidden;background:radial-gradient(120% 100% at 50% 20%,#f7f5f0,#ebe7df)}
.pr-stage canvas{display:block;width:100%;height:100%}
.pr-toggle{display:flex;justify-content:center;gap:4px;margin:22px auto 22px;padding:4px;width:max-content;border:1px solid var(--ink);border-radius:3px;background:#fff}
.pr-toggle button{border:0;background:transparent;padding:8px 16px;border-radius:2px;font:600 13px var(--f-head),var(--f-body);letter-spacing:.08em;color:var(--ink-soft);cursor:pointer;transition:background .25s,color .25s}
.pr-toggle button span{font-weight:500;font-size:11px;color:var(--gblue);margin-left:4px}
.pr-toggle button.on{background:var(--ink);color:#fff}
.pr-toggle button.on span{color:var(--marker)}
.pr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:980px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pr-grid{grid-template-columns:1fr}}
.pr-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gblue);border-radius:3px;padding:22px 20px 20px;
  box-shadow:0 14px 28px -24px rgba(17,18,22,.55);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;outline:none}
.pr-card:hover,.pr-card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 36px -22px rgba(17,18,22,.55)}
.pr-card.pop{border-top-color:var(--marker)}
.pr-card .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--marker);color:var(--ink);font:700 11px var(--f-head),var(--f-body);letter-spacing:.08em;padding:3px 10px;border-radius:2px}
.pr-card .name{font-family:var(--f-body);font-weight:900;font-size:20px;letter-spacing:.02em}
html[lang="en"] .pr-card .name{font-family:var(--f-head);font-style:italic;font-stretch:84%}
.pr-card .price{margin:10px 0 2px;font-family:var(--f-head);font-style:italic;font-weight:900;font-stretch:80%;font-size:42px;line-height:1;display:flex;align-items:baseline;gap:2px}
.pr-card .price .per{font-size:15px;font-style:italic;font-weight:600;color:var(--muted)}
.pr-card .year{font-size:12.5px;color:var(--muted);min-height:1.6em}
.pr-card ul{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-direction:column;gap:7px;flex:1}
.pr-card li{font-size:13.5px;line-height:1.6;color:var(--ink-soft);padding-left:20px;position:relative}
.pr-card li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:5px;border-left:2px solid var(--gblue);border-bottom:2px solid var(--gblue);transform:rotate(-45deg)}
.pr-card .btn{justify-content:center}
/* 月額・年額の切り替え：数字がめくれる */
.pr-card [data-m]{display:inline-block}
.pr-card .flip{animation:prFlip .36s cubic-bezier(.5,0,.3,1.4)}
@keyframes prFlip{0%{transform:none}48%{transform:rotateX(90deg);opacity:0}52%{transform:rotateX(-90deg);opacity:0}100%{transform:none;opacity:1}}
.pr .price-note{text-align:center;color:var(--muted);font-size:12.5px;line-height:1.9;margin:26px auto 0;max-width:820px}
/* 比較表 */
.pr-cmp-h{margin:64px 0 18px;text-align:center}
.pr-cmp{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:#fff}
.pr-cmp table{width:100%;border-collapse:collapse;min-width:620px}
.pr-cmp th,.pr-cmp td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;text-align:center}
.pr-cmp thead th{font-family:var(--f-body);font-weight:800;background:#f7f5f0;border-bottom:2px solid var(--gblue)}
html[lang="en"] .pr-cmp thead th{font-family:var(--f-head);font-style:italic}
.pr-cmp tbody th{text-align:left;font-weight:600;color:var(--ink-soft)}
.pr-cmp td.yes{color:var(--gblue);font-weight:800}
.pr-cmp tbody tr:hover{background:rgba(255,212,59,.12)}
.pr-cmp tbody tr:last-child th,.pr-cmp tbody tr:last-child td{border-bottom:0}
.pr .home-more{text-align:center;margin-top:26px}
@media(prefers-reduced-motion:reduce){.pr-card .flip{animation:none}}