@charset "UTF-8";
/* ==========================================================
   Quick 料金・サポート表示用 追加CSS（price.html / quick/about.html で読み込み）
   - price.html  Quick の料金カード ………………………… .qp-price
   - price.html  カスタマーサクセス支援（チケット制）の比較表 … .qp-cs
   - quick/about.html  導入フェーズに合わせた充実のサポート …… .qp-support
   追加クラスはすべて qp- 始まりです。既存クラスの定義は変更していません。
   ブレークポイントはサイト既存に合わせています（980px / 768px / 690px）。
   ========================================================== */

/* ---------- price.html：Quick 料金カード ---------- */
.qp-price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);max-width:960px;margin:60px auto 0;background:#fff;border:3px solid #e84343;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.1);overflow:hidden}
.qp-price__main{display:flex;flex-direction:column;justify-content:center;padding:40px 44px}
.qp-price__amount{display:flex;flex-direction:column;align-items:center;gap:10px;line-height:1.3;text-align:center}
.qp-price__amount .-unit{padding:4px 18px;border:2px solid #e84343;border-radius:999px;color:#e84343;font-size:15px;font-weight:700;line-height:1.2}
.qp-price__amount .-val{white-space:nowrap}
.qp-price__amount .-num{font-size:44px;font-weight:700;letter-spacing:.02em}
.qp-price__amount .-tax{font-size:16px;font-weight:700}
.qp-price__desc{margin-top:22px;padding-top:22px;border-top:1px solid #eee}
.qp-price__spec{display:flex;flex-direction:column;justify-content:center;gap:12px;margin:0;padding:36px 40px;background:#fff8f9;border-left:1px solid #ffd3d3}
.qp-price__spec .-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:18px}
.qp-price__spec dt{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50px;padding:6px 8px;background:#333;color:#fff;border-radius:5px;font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.04em;text-align:center}
.qp-price__spec dt small{font-size:11px;font-weight:400}
.qp-price__spec dd{margin:0;font-size:17px;font-weight:700;line-height:1.5}
.qp-price__spec dd small{font-size:13px;color:#707070}
.qp-notes{max-width:960px;margin:20px auto 0}
@media (max-width:980px){
  .qp-price{grid-template-columns:1fr;max-width:680px;margin-top:40px}
  .qp-price__spec{border-left:0;border-top:1px solid #ffd3d3}
  .qp-notes{max-width:680px}
}
@media (max-width:768px){
  .qp-price__main{padding:32px 24px 28px}
  .qp-price__amount .-num{font-size:36px}
  .qp-price__amount .-unit{padding:3px 14px;font-size:14px}
  .qp-price__amount .-tax{font-size:14px}
  .qp-price__spec{padding:24px 20px}
  .qp-price__spec .-row{grid-template-columns:128px minmax(0,1fr);gap:14px}
  .qp-price__spec dt{min-height:46px;font-size:13px}
  .qp-price__spec dd{font-size:15px}
}
@media (max-width:374px){
  .qp-price__amount .-val{white-space:normal}
  .qp-price__amount .-num{font-size:32px}
}

/* ---------- price.html：カスタマーサクセス支援（チケット制）比較表 ---------- */
.qp-cs__title{margin-top:14px;font-size:20px;font-weight:700;text-align:center}
.qp-cs__title span{font-size:15px}
.qp-cs__scroll{margin-top:18px;padding-top:18px}
.qp-cs{width:calc(100% + 16px);margin:0 -8px;border-collapse:separate;border-spacing:8px 0;table-layout:fixed}
.qp-cs col.-label{width:180px}
.qp-cs thead .-corner{background:transparent}
.qp-cs thead th{position:relative;padding:16px 6px 12px;border-radius:10px 10px 0 0;color:#fff;line-height:1.4;text-align:center;vertical-align:middle}
.qp-cs thead th .-name{display:block;font-size:17px;font-weight:700}
.qp-cs thead th .-sub{display:block;margin-top:2px;font-size:11px;font-weight:700;opacity:.85}
.qp-cs thead .-std{background:#707070}
.qp-cs thead .-lite{background:#ef6c6c}
.qp-cs thead .-rec{background:#e84343}
.qp-cs thead .-top{background:#be2727}
.qp-cs thead .-tag{position:absolute;top:-15px;left:50%;padding:6px 14px;background:#fff;border:2px solid #e84343;border-radius:999px;color:#e84343;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;transform:translateX(-50%)}
.qp-cs tbody th,.qp-cs tbody td{padding:11px 6px;border-bottom:1px solid #f3dcdc;line-height:1.5;vertical-align:middle}
.qp-cs tbody th{padding-left:16px;background:#ffeded;font-size:14px;font-weight:700;letter-spacing:.02em;text-align:left}
.qp-cs tbody td{background:#fff;font-weight:700;text-align:center}
.qp-cs tbody tr:first-child th{border-radius:10px 10px 0 0}
.qp-cs tbody tr:last-child th,.qp-cs tbody tr:last-child td{border-bottom:0;border-radius:0 0 10px 10px}
.qp-cs .-price td{padding:16px 6px 12px}
.qp-cs .-price td:not(.-std){white-space:nowrap}
.qp-cs .-price .-num{font-size:30px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.qp-cs .-price .-unit{margin-left:2px;font-size:14px}
.qp-cs .-price .-incl{font-size:15px}
.qp-cs .-term th,.qp-cs .-term td{border-bottom:2px solid #f1c2c2}
.qp-cs .-term td{font-size:14px}
.qp-cs tbody td.-rec{background:#fff7f7;box-shadow:inset 3px 0 0 #e84343,inset -3px 0 0 #e84343}
.qp-cs tbody tr:last-child td.-rec{box-shadow:inset 3px 0 0 #e84343,inset -3px 0 0 #e84343,inset 0 -3px 0 #e84343}
.qp-cs .-yes{display:inline-block;width:20px;height:20px;border:3px solid #e84343;border-radius:50%;vertical-align:middle}
.qp-cs .-no{display:inline-block;width:14px;height:2px;background:#c4c4c4;vertical-align:middle}
.qp-cs .-w{display:inline-block}
.qp-cs .-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* タブレット以下：横スクロール＋項目名の列を固定 */
@media (max-width:980px){
  .qp-cs__scroll{overflow-x:auto}
  .qp-cs{width:100%;min-width:640px;margin:0}
  .qp-cs col.-label{width:140px}
  .qp-cs thead .-corner,.qp-cs tbody th{position:sticky;left:0;z-index:2}
  .qp-cs thead .-corner{background:#ffd3d3}
  .qp-cs tbody th{padding-left:12px;font-size:13px}
  .qp-cs thead th .-name{font-size:15px}
  .qp-cs .-price .-num{font-size:26px}
  .qp-cs .-price .-unit,.qp-cs .-price .-incl,.qp-cs .-term td{font-size:13px}
  /* 既存の「スクロールできます」表示を固定列の上・右寄せに */
  .qp-cs__scroll.js-scroll-note.new-price-table-scroll .scroll-note{z-index:3;top:130px;right:30px;left:auto}
}
@media (max-width:768px){
  .qp-cs-panel{padding-right:12px !important;padding-left:12px !important}
  .qp-cs__title{font-size:18px}
  .qp-cs__title span{display:block;font-size:14px}
  .qp-cs{min-width:620px}
  .qp-cs col.-label{width:108px}
  .qp-cs tbody th{padding-left:10px;font-size:12px}
  .qp-cs thead th{padding:14px 4px 10px}
  .qp-cs thead th .-name{font-size:14px}
  .qp-cs .-price .-num{font-size:24px}
}

/* ---------- quick/about.html：導入フェーズに合わせた充実のサポート ---------- */
/* カードが1行2枚になるため、十字の区切り線のうち横線を消し、ボックスを縦に引き伸ばさない */
.fcList.qp-support{align-self:flex-start}
.fcList.qp-support::before{display:none}
.qp-support__tag{display:inline-block;margin-bottom:6px;padding:3px 12px;border:1px solid #213356;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.04em}
.qp-support__tag.-incl{background:#213356;color:#fff}
.qp-support__tag.-opt{background:#fff;color:#213356}
/* 見出しは <wbr> の位置で改行（入りきらない幅では従来どおり折り返す） */
.qp-support .hTitl{word-break:keep-all;overflow-wrap:anywhere}