@charset "UTF-8";
/*
 * price.v2.css — 料金プランページ専用
 * 依存: tokens.css, common.css
 * 月/年トグル / プランカード / 機能比較表（横スクロール・1列目sticky）
 */

.price-stage,
.compare {
  --price-check-icon: url("data:image/svg+xml,%3Csvg%20id%3D%22uuid-34c67fb1-b057-4f94-858a-a970952cd42a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016.97%2012.73%22%3E%3Cdefs%3E%3Cstyle%3E.uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%7Bfill%3A%2300cfff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22uuid-71d334b5-0b32-473b-b662-dd19554356e7%22%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%22.62%22%20y%3D%224.86%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-3.88%203.36)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%222.74%22%20y%3D%226.99%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-4.76%205.49)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%224.86%22%20y%3D%229.11%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-5.64%207.61)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%226.99%22%20y%3D%226.99%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-3.51%208.49)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%229.11%22%20y%3D%224.86%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(-1.39%209.36)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%2211.23%22%20y%3D%222.74%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(.73%2010.24)%20rotate(-45)%22%2F%3E%3Crect%20class%3D%22uuid-f4ff947f-2eaa-44ca-85e9-107de581445c%22%20x%3D%2213.35%22%20y%3D%22.62%22%20width%3D%223%22%20height%3D%223%22%20transform%3D%22translate(2.85%2011.12)%20rotate(-45)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.site-nav a[aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--header-h);
  padding-inline: 1.45rem;
  background: var(--c-cyan);
  color: #fff;
}

.price-stage {
  --price-button-hover-color: #3c8eef;
  color: #fff;
  background : linear-gradient(135deg, #169dda 0%, #3666ff 100%);
  padding-block: clamp(4rem, 7vw, 7rem) clamp(4rem, 7vw, 6.5rem);
}
.price-hero {
  text-align: center;
}
.price-hero h1 {
  font-size: 3rem;
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-shadow: 0 2px 18px #0818502e;
}
.price-hero__lead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 月/年トグル ---------- */
.billing {
  position: relative;
  display: inline-flex;
  gap: 0;
  margin: 3rem auto 0;
  padding: 0;
  background: #4C4C4C;
  border: 0;
  border-radius: 9999px;
  isolation: isolate;
}
.billing.is-billing-ready::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--billing-indicator-y, 0);
  left: 0;
  width: var(--billing-indicator-w, 50%);
  height: var(--billing-indicator-h, 100%);
  border-radius: 9999px;
  background: var(--c-cyan);
  box-shadow: 0 4px 12px #05436e47;
  transform: translateX(var(--billing-indicator-x, 0));
  transition:
    transform var(--dur) var(--ease),
    width var(--dur) var(--ease);
}
.billing button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .5rem 1.1rem;
  border-radius: 9999px;
  font-weight: var(--fw-bold);
  font-size: .84rem;
  color: #a6a6a6;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.billing button[aria-selected="true"] {
  background: var(--c-cyan);
  color: #fff;
  box-shadow: 0 4px 12px #05436e47;
}
.billing.is-billing-ready button[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}
.billing .billing__save { font-size: .75rem; }

/* ---------- プランカード ---------- */
.price-stage__body {
  margin-top: 3.2rem;
}
.plans {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.7rem);
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-inline: auto;
}
.plan {
  --price-button-hover-color: #2d48e0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 365px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a9bee47 0%, #2d48e0db 72%);
  border: 1px solid #2164d9;
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem) 2rem;
}
.plan--business10 {
  background: linear-gradient(135deg, #1784d3 0%, #3b3fef 72%);
}
.plan--business30 {
  background: linear-gradient(135deg, #2a9bee47 0%, #2d48e0db 72%);
}
.plan--featured {
  --price-button-hover-color: #2960e1;
  border-color: #77afe8;
  background : linear-gradient(150deg, #1784d4, #2960e1, #3b40ee);
}
.plan__badge {
  position: absolute;
  top: 1.15rem;
  right: -2.3rem;
  width: 8.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  transform: rotate(45deg);
  background : linear-gradient(90deg, #dd47d3 0%, #ff1f96 99.94%);
  color: #fff;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  z-index: 1;
}
.plan__name {
  position: relative;
  z-index: 1;
  font-size: 1.3125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
}
.plan__name span { color: inherit; }
.plan__price {
  position: relative;
  z-index: 1;
  margin: .45rem 0 0;
  font-family: "Inter", sans-serif;
  line-height: 1.1;
}
.plan__price strong {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: 3.45rem;
  font-weight: 500;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.plan__price strong::after,
.price-subplan__amount::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.2em;
  border-radius: .35em;
  background: linear-gradient(90deg, transparent, #ffffff78, transparent);
  opacity: 0;
  transform: translateX(-55%) skewX(-16deg);
  pointer-events: none;
}
.plan__price [data-monthly],
.price-subplan [data-monthly] {
  display: inline-block;
  min-width: 2.2em;
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    filter .22s var(--ease),
    text-shadow .36s var(--ease);
  will-change: opacity, transform, filter;
}
.plan__price [data-monthly].is-price-out,
.price-subplan [data-monthly].is-price-out {
  animation: price-vanish .2s var(--ease) forwards;
}
.plan__price [data-monthly].is-price-in,
.price-subplan [data-monthly].is-price-in {
  animation: price-pop .58s cubic-bezier(.18, .9, .22, 1.2);
  color: #fff;
  text-shadow: 0 0 18px #7ddfffad, 0 0 34px #ffffff59;
}
.plan__price strong.is-price-active::after,
.price-subplan__amount.is-price-active::after {
  animation: price-shine .62s var(--ease);
}
.plan__price em {
  color: #ffffffeb;
  font-style: normal;
  font-size: .98rem;
  font-weight: var(--fw-bold);
}
.plan__cycle-note {
  position: relative;
  z-index: 1;
  margin-top: .55rem;
  color: #ffffffe6;
  font-size: .83rem;
  font-weight: var(--fw-bold);
}
.plan__cycle-yearly {
  display: none;
  position: relative;
  margin-left: .65em;
  color: #ffffffe6;
  font-weight: var(--fw-bold);
}
.plan__cycle-yearly::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.2em;
  border-radius: .35em;
  background: linear-gradient(90deg, transparent, #ffffff78, transparent);
  opacity: 0;
  transform: translateX(-55%) skewX(-16deg);
  pointer-events: none;
}
.price-stage[data-active-cycle="yearly"] .plan__cycle-yearly {
  display: inline-block;
  animation: price-pop .58s cubic-bezier(.18, .9, .22, 1.2);
}
.price-stage[data-active-cycle="yearly"] .plan__cycle-yearly::after {
  animation: price-shine .62s var(--ease);
}
.plan__cycle-amount {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.plan__features {
  position: relative;
  z-index: 1;
  margin: 3.5rem 0 1.3rem;
  display: grid;
  gap: .5rem;
}
.plan__features li {
  font-size: .82rem;
  padding-left: 1.65rem;
  position: relative;
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.05rem;
  height: .8rem;
  background: var(--price-check-icon) center / contain no-repeat;
}
.plan__capability {
  position: relative;
  z-index: 1;
  margin-top: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: #2d44b5;
  color: #fff;
  font-size: .8rem;
  font-weight: var(--fw-bold);
}
.plan .btn {
  --btn-outline-invert-color: var(--price-button-hover-color);
  position: relative;
  z-index: 1;
  margin-top: .75rem;
  min-height: 42px;
  color: #fff;
  border-color: #ffffff6b;
  background: #ffffff0a;
}
.plan .btn[href*="/app/store/"] {
  background: transparent;
}
.plan .btn:hover {
  color: var(--btn-outline-invert-color);
  border-color: currentColor;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.price-subplans {
  display: grid;
  gap: .3rem;
  width: min(100%, 420px);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 420px;
  margin-inline: auto;
}
.price-subplan {
  --btn-outline-invert-color: var(--price-button-hover-color);
  display: grid;
  gap: .75rem;
  align-items: center;
  padding: .9rem clamp(1.2rem, 2.5vw, 2.2rem);
  background: #ffffff1f;
  color: #fff;
}
.price-subplan p {
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
}
.price-subplan strong {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: 1.05em;
}
.price-subplan__amount {
  position: relative;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.price-subplan .btn {
  min-height: 40px;
  width: min(100%, 145px);
  justify-self: center;
  color: #fff;
  border-color: #ffffff73;
  background: #ffffff0a;
}
.price-subplan .btn[href*="/app/store/"] {
  background: transparent;
}
.price-subplan .btn:hover {
  color: var(--btn-outline-invert-color);
  border-color: currentColor;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.price-tax-note {
  margin-top: 1.8rem;
  text-align: center;
  font-size: .82rem;
  font-weight: var(--fw-bold);
  color: #ffffffeb;
}

@media (min-width: 900px) {
  .plans {
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
  }
  .price-subplans {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr 1fr;
  }
  .price-subplan {
    grid-template-columns: 1fr minmax(120px, 145px);
  }
}

@media (max-width: 767px) {
  .price-stage {
    padding-block: 3rem 3.5rem;
  }
  .billing {
    margin-top: 1.8rem;
  }
  .billing button {
    padding-inline: .8rem;
  }
  .plan {
    min-height: auto;
  }
}

@keyframes price-vanish {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1) rotateX(0);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-42%) scale(.92) rotateX(60deg);
  }
}

@keyframes price-pop {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(45%) scale(.9) rotateX(-65deg);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-9%) scale(1.08) rotateX(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1) rotateX(0);
  }
}

@keyframes price-shine {
  0% {
    opacity: 0;
    transform: translateX(-65%) skewX(-16deg);
  }
  35% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateX(65%) skewX(-16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .billing button,
  .billing.is-billing-ready::before,
  .plan__price [data-monthly],
  .price-subplan [data-monthly],
  .price-stage[data-active-cycle="yearly"] .plan__cycle-yearly,
  .price-stage[data-active-cycle="yearly"] .plan__cycle-yearly::after,
  .compare tbody tr.is-flash > th,
  .compare tbody tr.is-flash > td {
    transition: none;
    animation: none;
  }
}

/* ---------- 機能比較表 ---------- */
.compare {
  --compare-feature-col: calc(100% * 2 / 7);
  --compare-plan-col: calc(100% / 7);
  margin-top: 0;
  padding-block: clamp(3.5rem, 7vw, 5.75rem);
  background: var(--c-bg-darker);
  color: #fff;
}
.compare h2 {
  text-align: center;
  font-size: 1.55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  color: #fff;
  font-weight: var(--fw-bold);
}
.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.compare__fixed-head {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: block;
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--c-bg-darker);
  border-bottom: 0;
  box-shadow: 0 12px 20px #1e1e1ee0;
}
.compare__fixed-head::-webkit-scrollbar {
  display: none;
}
.compare__fixed-head-inner {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  align-items: end;
  min-width: 820px;
  padding-block: .55rem 1.1rem;
  color: #fff;
}
.compare table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 820px;
  font-size: .875rem;
  color: #ffffffe6;
}
.compare__feature-col {
  width: var(--compare-feature-col);
}
.compare__plan-col {
  width: var(--compare-plan-col);
}
.compare caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.compare th,
.compare td {
  padding: .85rem .55rem;
  text-align: center;
  border-bottom: 0;
}
.compare td a {
  color: #00cfff;
}
#addBooks th a,
#uploadLimit th a {
  color: #fff;
}
#addBooks th a:hover,
#uploadLimit th a:hover {
  text-decoration: none;
}
#addBooks th span,
#uploadLimit th span {
  margin-left: .3em;
  color: #00cfff;
  font-size: .75rem;
}
.compare thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.compare thead th,
.compare__fixed-cell {
  padding-inline: .55rem;
  padding-block: .55rem 1.1rem;
  text-align: center;
  background: var(--c-bg-darker);
  color: #bbbbbb;
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  vertical-align: bottom;
  border-bottom: 1px solid #ffffff2e;
  box-shadow: 0 12px 20px #1e1e1ee0;
}
.compare thead th:first-child,
.compare__fixed-cell:first-child {
  text-align: left;
  color: #7f7f7f;
}
.compare thead th.is-featured {
  background: var(--c-bg-darker);
}
.compare__plan-name {
  display: block;
  margin-bottom: .45rem;
  white-space: nowrap;
}
.compare__plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 24px;
  padding: .5rem 1rem;
  border: 1px solid #ffffff85;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: .75rem;
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.compare__plan-btn:hover {
  color: #fff;
  border-color: #169dda;
  background: #169dda;
  text-decoration: none;
}
.compare__plan-btn--primary {
  border-color: #ffffff85;
  background: transparent;
}
.compare th[scope="row"] {
  min-width: 205px;
  text-align: left;
  font-weight: var(--fw-medium);
  color: #ffffffe6;
  background: inherit;
}
.compare tbody tr:not(.cat) {
  background: transparent;
}
.compare tbody tr.is-striped {
  background: #262626;
}
.compare tbody tr:not(.cat) th[scope="row"] {
  background: inherit;
}
/* アンカージャンプ時、サイトヘッダー＋比較表の固定見出し分だけ上に余白を確保してずれを防ぐ。
   --compare-head-h は固定見出しの実高さを JS が設定する（未設定時はフォールバック値）。 */
.compare tbody tr {
  scroll-margin-top: calc(var(--header-h) + var(--compare-head-h, 5.5rem) + 1rem);
}
/* アンカーで飛んできた行を枠線（行の輪郭）として点滅させて目立たせる。
   セルの上下に共通の枠、左端の th と右端の td にそれぞれ左右の枠を足して行全体を囲う。 */
@keyframes rowFlash {
  0%, 100% { box-shadow: inset 0 0 0 transparent; }
  35%      { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #fff; }
}
@keyframes rowFlashStart {
  0%, 100% { box-shadow: inset 0 0 0 transparent; }
  35%      { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #fff, inset 2px 0 0 #fff; }
}
@keyframes rowFlashEnd {
  0%, 100% { box-shadow: inset 0 0 0 transparent; }
  35%      { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #fff, inset -2px 0 0 #fff; }
}
.compare tbody tr.is-flash > th,
.compare tbody tr.is-flash > td {
  animation: rowFlash .7s ease-in-out 3;
}
.compare tbody tr.is-flash > th {
  animation-name: rowFlashStart;
}
.compare tbody tr.is-flash > td:last-child {
  animation-name: rowFlashEnd;
}
.compare .cat td {
  position: relative;
  padding: 3.85rem .55rem .65rem;
  background: var(--c-bg-darker);
  color: #ffffffb8;
  text-align: left;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  border-top: 0;
  border-bottom: 1px solid #ffffff29;
}
.compare .cat td::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 0;
  right: 0;
  border-top: 1px solid #ffffff38;
}
.compare__ai-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-left: 1rem;
  padding: .35rem 1rem;
  border-radius: var(--radius-pill-lg);
  background: linear-gradient(135deg, #ed1e79 0%, #ff1d25 100%);
  color: #fff;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  vertical-align: middle;
}
.compare__ai-badge-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.compare .yes {
  color: #19bfd4;
  font-size: 0;
  font-weight: var(--fw-bold);
}
.compare .yes::before {
  content: "";
  display: inline-block;
  width: 1.05rem;
  height: .8rem;
  background: var(--price-check-icon) center / contain no-repeat;
  vertical-align: middle;
}
.compare .no {
  color: #ffffff61;
}
.compare small {
  display: inline;
  margin-left: .3rem;
  color: #ffffff6b;
  font-size: .68rem;
}

.price-notes {
  margin-top: 2.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid #ffffff3d;
  color: #ffffffd1;
  font-size: .78rem;
  line-height: 1.9;
}

@media (min-width: 900px) {
  .compare__fixed-head {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .compare__fixed-head-inner {
    min-width: 0;
  }
  .compare__scroll {
    overflow: visible;
  }
}