.料金周期切替{display:inline-flex;gap:.25rem;margin-top:1.5rem;padding:.25rem;border:1px solid var(--線色);border-radius:999px;background:var(--表面色)}.料金周期切替 button{background:transparent;color:var(--淡色);border-radius:999px;padding:.4rem 1.1rem}.料金周期切替 button:hover{background:transparent;color:var(--文字色)}.料金周期切替 button.有効{background:var(--強調色);color:#fff}.料金割引バッジ{font-size:.75rem;font-weight:700}.料金ページ{--最大幅: 1040px}.料金グリッド{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;margin-top:1.5rem}@media(min-width:860px){.料金グリッド{grid-template-columns:repeat(3,minmax(0,1fr))}}.料金プラン{position:relative;margin-top:0;padding:1.6rem 1.4rem 1.4rem;text-align:center}.料金プラン.おすすめ{border-color:var(--強調色);border-width:2px}.料金プラン h2{margin:0 0 .75rem;font-size:1.05rem}.料金バッジ{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--強調色);color:#fff;font-size:.7rem;font-weight:700;padding:.2rem .7rem;border-radius:999px}.料金イラスト{min-height:42px;margin:-.25rem 0 .4rem;font-size:2rem;line-height:1.2;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}.料金価格{margin:0;font-size:1.65rem;font-weight:800;color:var(--文字色)}.料金価格--月あたり{font-size:2rem;line-height:1.15}.料金価格--月あたり span{font-size:.72rem;font-weight:700;color:var(--淡色)}.料金価格--月あたり span:first-child{display:block;margin-bottom:.25rem}.料金税込{margin:.25rem 0 0;font-size:.78rem;font-weight:600;color:var(--文字色)}.料金補足{margin:.3rem 0 0;font-size:.75rem;color:var(--淡色)}.料金割引{margin:.5rem 0 0;color:#2f855a;font-size:.72rem;font-weight:700}.料金詳細{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--線色);text-align:left}.料金詳細 h3{margin:0 0 .45rem;font-size:.72rem;font-weight:600;color:var(--淡色)}.料金詳細 p{display:flex;align-items:flex-start;gap:.45rem;margin:0;font-size:.78rem;font-weight:600;line-height:1.55}.料金詳細 p+p{margin-top:.4rem}.料金詳細アイコン{flex:0 0 auto;font-size:1rem;line-height:1.2}.料金グリッド[data-周期=月額] .年額表示,.料金グリッド[data-周期=年額] .月額表示{display:none}