/* 売り方 3 つ (サブスクだけ / オンデマンドだけ / 両方)。トップと料金のページで同じものを出す */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(1080px, 100%); margin: 40px auto 0; }
.way { display: flex; flex-direction: column; gap: 8px; padding: 36px 32px 32px; border-radius: 28px; background: #f5f5f7; color: #1d1d1f; text-decoration: none; text-align: left; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.way:hover { transform: scale(1.015); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .28); }
.way:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.stage.alt .way { background: #fff; }
.way .ic { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 0 20px; border-radius: 14px; color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
.way .ic svg { display: block; width: 36px; height: 36px; fill: none; }
.way .ic .s { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.way .ic .o { opacity: .55; }
.way .ic .f { fill: #fff; }
.way .ic-subscription { background: linear-gradient(160deg, #3d9bff, #0060df); }
.way .ic-ondemand { background: linear-gradient(160deg, #ff9f45, #f2590d); }
.way .ic-both { background: linear-gradient(160deg, #a675ff, #6a2de0); }
.way .k { font-size: 14px; font-weight: 600; color: #6e6e73; }
.way b { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.way p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: #424245; flex: 1; }
.way .go { margin-top: 14px; font-size: 16px; font-weight: 500; color: #0066cc; }
.way.here { box-shadow: inset 0 0 0 2px #1d1d1f; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; gap: 14px; } .way { padding: 28px 24px; border-radius: 22px; } }