/* 料金・よくある質問・最後の案内・スマホの幅 */

/* 料金 */
#pricing { max-width: 1080px; padding: 40px 22px 110px; gap: 36px; }
#pricing .lead { line-height: 1.8; max-width: none; }
.billing { align-self: center; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; border-radius: 22px; box-shadow: var(--in-sm); width: 320px; max-width: 100%; box-sizing: border-box; }
.billing-knob { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 16px; transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.25, 1), background-color 0.7s ease; box-shadow: var(--up-sm); background: var(--bg); }
.billing.is-yearly .billing-knob { transform: translateX(100%); }
.billing button { position: relative; min-height: 48px; font-size: 14px; font-weight: 700; color: var(--mut); white-space: nowrap; }
.billing button[aria-pressed="true"] { color: var(--ink); }
.billing small { font-size: 11px; color: var(--acc); }
.plans { --min: 290px; --gap: 26px; align-items: stretch; }
.plan { position: relative; border-radius: 34px; padding: 38px 34px; flex-direction: column; gap: 20px; }
.plan h3 { margin: 0; font-size: 18px; color: var(--ink); }
.plan-tag { position: absolute; top: -15px; left: 34px; padding: 7px 15px; border-radius: 20px; background: var(--grad); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.price { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.price small { font-size: 15px; color: var(--mut); font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; }
.price-block { display: flex; flex-direction: column; gap: 6px; }
.price-block .price { color: var(--acc); }
.price-sub { font-size: 13px; color: var(--mut); }
.plan-lead { margin: 0; font-size: 14px; color: var(--ink2); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--ink); flex: 1; }
.checks li { display: flex; gap: 10px; }
.check { flex: none; margin-top: 2px; }
.plan-btn { text-align: center; padding: 16px; border-radius: 18px; }
.plan-btn-free { box-shadow: var(--up-sm); color: var(--ink); font-weight: 700; }
.plan-btn-member { box-shadow: 0 10px 22px color-mix(in srgb, var(--accSolid) 35%, transparent); }
.plan-fine { margin: 0; font-size: 12px; color: var(--mut); text-align: center; line-height: 1.7; }

/* よくある質問 */
#faq { max-width: 860px; padding: 20px 22px 120px; gap: 30px; }
.faq-title { margin: 0; text-align: center; font-size: clamp(26px, 3.6vw, 44px); color: var(--ink); }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq { border-radius: 24px; box-shadow: 7px 7px 14px var(--dk), -7px -7px 14px var(--lt); }
.faq.is-open { box-shadow: inset 4px 4px 9px var(--dk), inset -4px -4px 9px var(--lt); }
.faq-q { width: 100%; min-height: 64px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.faq-mark { flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: var(--up-sm); display: grid; place-items: center; color: var(--acc); }
.faq.is-open .faq-mark { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; }
.faq.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 22px 22px; font-size: 14.5px; line-height: 1.9; color: var(--ink2); }

/* 最後の案内 */
.closing { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 22px 100px; }
.closing-box { position: relative; border-radius: 44px; box-shadow: var(--in); padding: clamp(44px, 7vw, 96px) 24px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.m-ctaicons { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 22px; max-width: 760px; padding-top: 8px; }
.closing-title { margin: 0; font-size: clamp(28px, 4.4vw, 56px); line-height: 1.35; text-wrap: balance; color: var(--ink); }
.closing-title .wm-inline { margin-right: 0.2em; }
.closing-lead { margin: 0; font-size: 16px; color: var(--ink2); max-width: 30em; line-height: 1.9; }
.closing-btn { padding: 19px 40px; border-radius: 22px; font-size: 17px; }

/* スマホの幅 */
@media (max-width: 760px) {
  .m-navlink { display: none; }
  .m-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .m-hero { padding-top: 36px !important; padding-bottom: 72px !important; gap: 36px !important; }
  .m-cluster { zoom: .52; }
  .m-devs { zoom: .8; }
  .m-ctaicons { zoom: .72; }
}
@media (max-width: 420px) {
  .m-cluster { zoom: .44; }
  .m-devs { zoom: .68; }
  .m-card { padding: 26px 22px !important; }
}