/* AI動画生成 料金比較ツール（サイト共通のライトテーマ変数を使用） */

/* ---- ヒーロー内の確認日時 ---- */
.pc-checked {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.4rem; padding: .45rem .9rem;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--cyan);
  border-radius: 8px; background: #fff;
  font-size: .82rem; color: var(--txt-2);
}
.pc-checked i { color: var(--cyan); }

/* ---- セクション ---- */
.pc-section { padding-top: 3rem; padding-bottom: 6rem; }

/* ---- 条件パネル ---- */
.pc-panel {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 1.6rem 1.8rem 1.8rem;
  box-shadow: 0 10px 30px -18px rgba(23,19,15,.25);
}
.pc-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}
.pc-panel-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: "Space Grotesk","Noto Sans JP",sans-serif; font-weight: 700;
  font-size: .95rem; color: var(--txt); margin-bottom: 1.1rem;
}
.pc-panel-title i { color: var(--cyan); }
.pc-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.4rem; }
@media (max-width: 900px) { .pc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pc-fields { grid-template-columns: 1fr; } .pc-panel { padding: 1.3rem 1.1rem 1.4rem; } }
.pc-field { display: flex; flex-direction: column; gap: .4rem; }
.pc-label { font-size: .78rem; font-weight: 600; color: var(--txt-2); letter-spacing: .02em; }
.pc-hint { font-weight: 400; color: var(--txt-3); margin-left: .25rem; }
.pc-input {
  width: 100%; height: 2.6rem; padding: 0 .8rem;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: var(--txt); font-size: .92rem;
  transition: border-color .2s, box-shadow .2s;
}
.pc-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.pc-input-unit { display: flex; align-items: center; gap: .5rem; color: var(--txt-2); font-size: .88rem; white-space: nowrap; }
.pc-input-unit .pc-input { flex: 1; min-width: 0; }

/* ---- 比較表 ---- */
.pc-table-wrap {
  margin-top: 2rem; overflow-x: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
}
.pc-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: .86rem; color: var(--txt); }
.pc-table th, .pc-table td {
  padding: .8rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.pc-table td { border-left: 1px solid var(--line); }
/* 左の項目名列は横スクロール時も固定 */
.pc-table tr > th:first-child {
  position: sticky; left: 0; z-index: 1;
  width: 12rem; min-width: 10rem; background: #fff;
  font-weight: 600; color: var(--txt-2); font-size: .8rem;
}
/* 1行目：サービス名 */
.pc-table tr:first-child > th {
  background: var(--paper-2); color: var(--txt);
  font-family: "Space Grotesk","Noto Sans JP",sans-serif; font-weight: 700; font-size: .95rem;
  border-left: 1px solid var(--line);
}
.pc-table tr:first-child > th:first-child { border-left: none; color: var(--txt-3); font-size: .78rem; }
/* セクション見出し行 */
.pc-table tr.section > th {
  position: static; background: var(--ink); color: #fff;
  font-family: "Space Grotesk","Noto Sans JP",sans-serif; font-size: .82rem; letter-spacing: .04em;
  padding: .55rem 1rem;
}
.pc-table tr:last-child > th, .pc-table tr:last-child > td { border-bottom: none; }

.pc-table .big { font-family: "Space Grotesk","Noto Sans JP",sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--txt); }
.pc-table .best { background: #fff3ea; box-shadow: inset 3px 0 0 var(--cyan); }
.pc-table .best .big { color: var(--cyan); }
.pc-table .na { color: var(--txt-3); }
.pc-table .strike { text-decoration: line-through; color: var(--txt-3); }
.pc-table .sub { color: var(--txt-3); font-size: .76rem; line-height: 1.6; margin-top: .15rem; }
.pc-table b { color: var(--txt); }
.pc-table a { color: var(--cyan); word-break: break-all; }
.pc-table a:hover { text-decoration: underline; }

/* 自由入力列の入力欄 */
.pc-table input, .pc-table select {
  width: 100%; min-width: 8rem; height: 2.2rem; padding: 0 .6rem;
  border: 1px dashed var(--line-strong); border-radius: 8px;
  background: var(--paper-2); color: var(--txt); font-size: .84rem;
}
.pc-table select[data-plan] { border-style: solid; background: #fff; }
.pc-table input:focus, .pc-table select:focus { outline: none; border: 1px solid var(--cyan); background: #fff; }

.pc-scroll-hint { display: none; margin-top: .6rem; font-size: .76rem; color: var(--txt-3); }
.pc-scroll-hint i { margin-right: .35rem; }
@media (max-width: 1000px) { .pc-scroll-hint { display: block; } }

/* ---- 注記 ---- */
.pc-notes {
  margin-top: 2rem; padding: 1.3rem 1.5rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
  font-size: .82rem; line-height: 1.85; color: var(--txt-2);
  display: flex; flex-direction: column; gap: .45rem;
}
.pc-notes i { color: var(--txt-3); margin-right: .45rem; }
.pc-notes strong { color: var(--txt); }

/* ---- 列の並べ替え・非表示 ---- */
.pc-howto { margin-top: 2rem; font-size: .78rem; color: var(--txt-3); }
.pc-howto i { color: var(--txt-3); margin: 0 .25rem; }
.pc-howto i:first-child { margin-left: 0; }

.pc-colbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  margin-top: .8rem; font-size: .8rem; color: var(--txt-2);
}
.pc-colbar[hidden] { display: none; }
.pc-bar-label { color: var(--txt-3); }
.pc-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem; border: 1px dashed var(--line-strong); border-radius: 999px;
  background: #fff; color: var(--txt); font-size: .8rem; transition: border-color .2s, color .2s;
}
.pc-chip i { font-size: .7rem; color: var(--cyan); }
.pc-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.pc-reset { font-size: .76rem; color: var(--txt-3); text-decoration: underline; margin-left: auto; }
.pc-reset:hover { color: var(--cyan); }

.pc-table-wrap { margin-top: .8rem; }
.pc-colhead-inner { display: flex; align-items: center; gap: .45rem; }
.pc-grip { cursor: grab; color: var(--txt-3); font-size: .8rem; padding: .1rem .15rem; }
.pc-grip:active { cursor: grabbing; }
.pc-colname { cursor: grab; flex: 1; }
.pc-colhead-inner input { flex: 1; min-width: 6rem; }
.pc-hide {
  margin-left: auto; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--txt-3); font-size: .72rem; transition: background .2s, color .2s;
}
.pc-hide:hover { background: rgba(225,29,72,.1); color: var(--magenta); }
.pc-colhead:hover .pc-grip, .pc-colhead:hover .pc-colname { color: var(--cyan); }

/* ---- ドラッグ中：列をつかんで持ち上げている見た目 ---- */
.pc-grip, .pc-colname { touch-action: none; user-select: none; }
body.pc-dragging, body.pc-dragging * { cursor: grabbing !important; user-select: none !important; }
.pc-ghost {
  position: fixed; z-index: 1000; pointer-events: none;
  max-height: 72vh; overflow: hidden; border-radius: 12px;
  background: #fff; border: 1px solid var(--cyan);
  box-shadow: 0 4px 10px rgba(23,19,15,.12);
  transform-origin: 30% 10%;
  transition: transform .16s ease, box-shadow .16s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.pc-ghost.lifted { transform: rotate(2deg) scale(1.04); box-shadow: 0 28px 60px -18px rgba(23,19,15,.45), 0 10px 20px -10px rgba(234,88,12,.35); }
.pc-ghost .pc-table { min-width: 0; }
.pc-ghost .pc-table tr > th:first-child { position: static; width: auto; min-width: 0; }
.pc-ghost .pc-table tr:first-child > th { background: #fff3ea; color: var(--cyan); font-size: .95rem; border-left: none; box-shadow: inset 0 -3px 0 var(--cyan); }
.pc-ghost .pc-table tr.section > th { background: var(--ink); }
.pc-ghost .pc-table td { border-left: none; }
/* 元の位置は点線の「置き場所」にする */
.pc-table .drag-src { background: repeating-linear-gradient(135deg, #fff7f1 0 8px, #fff 8px 16px) !important; box-shadow: inset 2px 0 0 rgba(234,88,12,.35), inset -2px 0 0 rgba(234,88,12,.35) !important; }
.pc-table .drag-src { color: transparent !important; }
.pc-table .drag-src * { visibility: hidden; }
.pc-table tr:first-child > th.drag-src { box-shadow: inset 2px 0 0 rgba(234,88,12,.35), inset -2px 0 0 rgba(234,88,12,.35), inset 0 2px 0 rgba(234,88,12,.35) !important; }

/* ---- 反対通貨の併記・自由入力の通貨 ---- */
.pc-table .alt { margin-left: .35rem; font-family: "Noto Sans JP",sans-serif; font-size: .72rem; font-weight: 400; color: var(--txt-3); white-space: nowrap; }
.pc-table .best .alt { color: rgba(234,88,12,.7); }
.pc-table .pc-cur { margin-top: .4rem; }

/* ---- 支払い方法で消費クレジットが違うとき・プラン注記 ---- */
.pc-table .pc-bill { display: inline-block; margin-right: .4rem; padding: 0 .4rem; border-radius: 4px; background: var(--paper-2); color: var(--txt-2); font-size: .7rem; }
.pc-table .pc-split { height: .5rem; }
.pc-table .pc-plan-note { color: var(--cyan); }

/* ---- 比較するサービスの選択 ---- */
.pc-field-wide { grid-column: 1 / -1; }
.pc-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-check { position: relative; cursor: pointer; }
.pc-check input { position: absolute; opacity: 0; pointer-events: none; }
.pc-check span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; color: var(--txt-2); font-size: .84rem; transition: all .15s;
}
.pc-check span::before {
  content: ""; width: .9rem; height: .9rem; border-radius: 4px;
  border: 1.5px solid var(--line-strong); background: #fff; transition: all .15s;
}
.pc-check input:checked + span { border-color: var(--cyan); background: #fff3ea; color: var(--txt); font-weight: 600; }
.pc-check input:checked + span::before {
  border-color: var(--cyan); background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.pc-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(234,88,12,.2); }
.pc-check:hover span { border-color: var(--cyan); }
.pc-empty { margin-top: .8rem; padding: 2rem; text-align: center; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--txt-3); font-size: .9rem; }
.pc-empty[hidden] { display: none; }

/* ---- リード文：広い画面では1行で表示 ---- */
.subpage-lead.pc-lead { max-width: none; }
@media (min-width: 1100px) { .subpage-lead.pc-lead { white-space: nowrap; } }
.pc-table .pc-ref { color: var(--txt-2); }