@charset "utf-8";

/* pages/plan.css  —  /plan */

.page-plan {
  display: flex;
  flex-direction: column;
}

.plan-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);

  @media (max-width: 1023px) {
    grid-template-columns: 1fr;
  }
}

/* SPではプランカードと料金例カードを画面幅いっぱいに伸ばす。
   左右余白は .container が --container-gutter で持っているのでそれを打ち消す
   （pages/plan-detail.css の .plan-outline / .plan-feature と同じ扱い）。
   .plan-card ではなく .plan-list に当てるのは、幅を決めているのが
   layout/container.css の `.container > section` だから */
@media (max-width: 1023px) {
  .page-plan > .plan-list,
  .page-plan > .price-example {
    margin-right: calc(var(--container-gutter) * -1);
    margin-left: calc(var(--container-gutter) * -1);
    width: calc(100% + var(--container-gutter) * 2);
    max-width: none;
  }
}

/* ----------------------------------------- */
/* プラン比較表 */
/* ----------------------------------------- */
.plan-comparison-table {
  overflow-x: auto;

  table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
  }

  th,
  td {
    padding: var(--sp-md) var(--sp-lg);
    border: 1px solid var(--c-border);
    font-size: var(--fs-md);
    text-align: center;
    vertical-align: middle;
  }

  tbody th {
    background: var(--c-bg-gray);
    font-weight: 700;
    text-align: left;
  }
}

.plan-comparison-table th.plan-comparison-blank {
  border: none;
}

.plan-comparison-smart,
.plan-comparison-basic {
  display: table-cell;

  .plan-card-badge {
    font-size: var(--fs-base);
    height: 28px;
  }
}

.plan-comparison-smart {
  --card-color: var(--c-plan-smart);
  background: var(--c-plan-smart-light);
}

.plan-comparison-basic {
  --card-color: var(--c-plan-basic);
  background: var(--c-plan-basic-light);
}

.plan-comparison-name {
  margin-left: var(--sp-sm);
  font-weight: 700;
}

/* SPではカード表示に組み替える（pages/plan-detail.css の .plan-example-table と
   同じ考え方）。tbody の tr = 1カードで、行見出しがカードの見出し、
   各値は data-label でどちらのプランかを示す */
.plan-comparison-table {
  @media (max-width: 1023px) {
    overflow-x: visible;

    table,
    tbody,
    tr,
    th,
    td {
      display: block;
    }

    table {
      min-width: 0;
    }

    /* プラン名は各値の data-label タブが兼ねるのでヘッダー行は出さない */
    thead {
      display: none;
    }

    /* tbody は「1行＝1カード」 */
    tbody tr {
      margin-bottom: var(--sp-xs);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      overflow: hidden;

      &:last-child {
        margin-bottom: 0;
      }
    }

    /* 行見出しがカードの見出し */
    tbody th {
      padding: var(--sp-sm) var(--sp-md);
      background: var(--c-bg-gray);
      font-weight: 600;
      text-align: center;
      border: 0;
      border-bottom: 1px solid var(--c-border);
    }

    /* どちらのプランの値かは、プラン色のタブを値の上に置いて示す。
       ::before を block にして値との間で改行させる */
    tbody td {
      padding: var(--sp-sm) var(--sp-md);
      border: 0;
      text-align: left;

      &::before {
        content: attr(data-label);
        margin-bottom: var(--sp-xs);
        padding: 0 var(--sp-sm);
        display: flex;
        align-items: center;
        width: fit-content;
        height: 25px;
        border-radius: var(--radius-xs);
        background: var(--card-color);
        color: var(--c-white);
        font-size: var(--fs-sm);
        font-weight: 500;
        line-height: 1;
      }
    }

    tbody td:nth-of-type(1) {
      --card-color: var(--c-plan-smart);
    }

    tbody td:nth-of-type(2) {
      --card-color: var(--c-plan-basic);
    }

    tbody td + td {
      border-top: 1px solid var(--c-border);
    }
  }
}