/* =========================================
   Plan Compare (<=1350px 表示)
   PC/タブレット=表, スマホ=1列の表型カード（斜め見出し）
   ========================================= */
:root{
  --pc-text:#fff;
  --pc-muted:rgba(255,255,255,.78);
  --pc-line:rgba(255,255,255,.16);
  --pc-vline:rgba(255,255,255,.22);
  --pc-surface:rgba(255,255,255,.06);
  --pc-surface2:rgba(255,255,255,.03);

  --pc-light:#7ec6de;
  --pc-std:#4a8fda;
  --pc-prem:#b3894a;

  --pc-radius:5px;
  --pc-pad:clamp(10px, 2vw, 16px);
  --pc-font:clamp(13px, 1.6vw, 15px);
  --pc-head:clamp(15px, 2vw, 18px);
}

/* 表示切替（>1350px=チャート / <=1350px=表 or カード） */
@media (min-width:1351px){
  #planCards, .pc-sectionNote{ display:none !important; }
  .timeline-wrap{ display:block !important; }
}
@media (max-width:1350px){
  .timeline-wrap{ display:none !important; }
  #planCards{ display:block !important; }
  .pc-sectionNote{ display:block !important; }
}

/* レイアウト安全策：親要素でのクリップ防止（3枚目が隠れる対策） */
#planCards,
#planCards .wrap3,
#planCards .panel2{
  overflow:visible !important;
  height:auto !important;
}

/* 全体の左右余白（端にくっつかないように） */
#planCards{
  color:var(--pc-text);
  font-size:var(--pc-font);
  padding-left:16px;
  padding-right:16px;
  box-sizing:border-box;
}

/* ====== PC/タブレット：横並びの比較表 ====== */
.pc-compare-scroller{ overflow:auto; padding:0 8px; }
.pc-compare{
  border:1px solid var(--pc-line);
  border-radius:var(--pc-radius);
  background:linear-gradient(180deg, var(--pc-surface), var(--pc-surface2));
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.pc-grid{
  display:grid;
  grid-template-columns:minmax(140px,1fr) repeat(3, minmax(180px,1fr));
  align-items:stretch;
}

.pc-head{ display:contents; }
.pc-th{
  padding:var(--pc-pad);
  font-weight:800;
  font-size:var(--pc-head);
  text-align:center;
  border-right:1px solid var(--pc-line);
  background:rgba(255,255,255,.08);
}
.pc-th:first-child{ text-align:left; background:transparent; }
.pc-th:last-child{ border-right:none; }
.pc-th--light{ background:linear-gradient(180deg, rgba(126,198,222,.25), rgba(126,198,222,.08)); }
.pc-th--std  { background:linear-gradient(180deg, rgba(74,143,218,.25), rgba(74,143,218,.08)); }
.pc-th--prem { background:linear-gradient(180deg, rgba(179,137,74,.25), rgba(179,137,74,.08)); }

.pc-tr{ display:contents; }
.pc-th-sub, .pc-td{
  padding:var(--pc-pad);
  border-top:1px solid var(--pc-line);
  border-right:1px solid var(--pc-line);
}
.pc-td:last-child, .pc-th-sub:last-child{ border-right:none; }
.pc-th-sub{ font-weight:700; color:var(--pc-muted); }
.pc-row:nth-child(odd) .pc-td,
.pc-row:nth-child(odd) .pc-th-sub{
  background:rgba(255,255,255,.03);
}

.pc-text--light{ color:var(--pc-light); font-weight:700; }
.pc-text--std  { color:var(--pc-std);   font-weight:700; }
.pc-text--prem { color:var(--pc-prem);  font-weight:700; }
.pc-badge{
  display:inline-block;
  padding:.2em .6em;
  border-radius:999px;
  border:1px solid var(--pc-line);
  font-size:12px;
  background:rgba(255,255,255,.08);
}

/* ====== スマホ（≤768px）：“PC版っぽい表”の1列カード + 斜め見出し ====== */
/* ====== スマホ（≤768px）：1列カード + 縦線区切り ====== */
@media (max-width:768px){
  .pc-grid{ display:none; } /* PC表は隠す */

  .pc-cardList{
    display:grid;
    grid-template-columns:1fr; /* 1列固定 */
    gap:16px;
    padding:0 4px;
  }

  .pc-planCard{
    border:1px solid var(--pc-line);
    border-radius:var(--pc-radius);
    background:linear-gradient(180deg, var(--pc-surface), var(--pc-surface2));
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    overflow:visible;
    margin:0 4px;
  }

  /* プラン名帯 */
  .pc-planHeader{
    padding:12px;
    font-weight:800;
    font-size:16px;
    letter-spacing:.04em;
    border-bottom:1px solid var(--pc-line);
  }
  .pc-planHeader--light{ background:rgba(126,198,222,.22); }
  .pc-planHeader--std  { background:rgba(74,143,218,.22); }
  .pc-planHeader--prem { background:rgba(179,137,74,.22); }

  /* 縦線付きヘッダー（期間 | プラン） */
  .pc-diagHead{
    position:relative;
    height:42px;
    background:rgba(255,255,255,.04);
    border-bottom:1px solid var(--pc-line);
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .pc-diagHead::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:50%;
    width:1px;
    background:var(--pc-vline);
  }
  .pc-diagLeft, .pc-diagRight{
    display:flex; align-items:center; justify-content:center;
    font-weight:800; letter-spacing:.02em;
  }

  /* 本体も縦線で区切る */
  .pc-planBody{
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;
    align-items:stretch;
  }
  .pc-planBody::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:50%;
    width:1px;
    background:var(--pc-vline);
  }

  .pc-tableCol{
    display:grid;
    grid-auto-rows:auto;
  }
  .pc-cell{
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:12px 10px;
    border-bottom:1px solid var(--pc-line);
    line-height:1.5;
    word-break:break-word;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .pc-tableCol .pc-cell:nth-child(odd){ background:rgba(255,255,255,.02); }
  .pc-tableCol .pc-cell:last-child{ border-bottom:none; }
}