@charset "utf-8";
/* ======================================================================
   プラン関連ページ 共通スタイル（2026-09-01 デザイン刷新）

   販促サイト（さくら連絡網.jp）のトーンに合わせている。
   色・フォントは販促サイトの実測値。
     フォント : Zen Kaku Gothic New
     本文     : #1b1b1b
     主色     : #0c419a（濃紺。見出し・強調）
     アクセント: #ec7aac（ピンク。行動ボタン）
     背景     : #f0f6f8

   ※scss/common/skplan.scss と同じ内容。compass を通しても差分が出ないよう
   　入れ子を使わないフラットな記述にしている。片方だけ直さないこと。
   ====================================================================== */

/* --- ゲスト共通ヘッダー ----------------------------------------------
   templateguest.php の <header class="skplan-header"> だけに効く。
   管理画面・顧客画面のヘッダー（common.css / client.css の素の header）は
   クラスが付かないため一切変わらない。
   元に戻す場合は templateguest.php の class を外すだけでよい。 */
header.skplan-header {
  height: auto;
  padding: 0;
  /* common.css の margin:0 0 30px 0 を打ち消す。
     この余白が青いバーと本文の間の白い帯になっていた */
  margin: 0;
  background: linear-gradient(90deg, #0c419a 0%, #2f7ec8 55%, #5cc0ef 100%);
  box-shadow: 0 2px 8px rgba(12, 65, 154, 0.18);
}
header.skplan-header .container-fulid {
  display: flex;
  align-items: center;
  min-height: 64px;
  /* 本文の .skplan-inner と左端を揃える */
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}
header.skplan-header .systemname {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
}
/* 見出しの頭に置くアクセント。販促サイトのピンクを差し色として使う */
header.skplan-header .systemname:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-right: 10px;
  border-radius: 3px;
  background: #ec7aac;
  vertical-align: -3px;
}

/* --- 全体 ------------------------------------------------------------ */
.skplan {
  font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #1b1b1b;
  background: #f0f6f8;
  font-size: 16px;
  line-height: 1.7;
  padding: 0 0 60px;
}
.skplan-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 見出し ---------------------------------------------------------- */
.skplan-head {
  text-align: center;
  padding: 40px 20px 28px;
}
.skplan-head h1 {
  font-size: 32px;
  font-weight: 700;
  color: #0c419a;
  margin: 0 0 10px;
  line-height: 1.4;
}
.skplan-head p {
  font-size: 15px;
  color: #6b7780;
  margin: 0;
}

/* --- カード ---------------------------------------------------------- */
.skplan-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(12, 65, 154, 0.06);
}
.skplan-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0c419a;
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 4px solid #ec7aac;
  line-height: 1.4;
}

/* --- 2カラム（左：条件 ／ 右：料金） --------------------------------- */
.skplan-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.skplan-col-main {
  flex: 1 1 auto;
  min-width: 0;
}
.skplan-col-side {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}

/* --- 入力行 ---------------------------------------------------------- */
.skplan-field {
  padding: 16px 0;
  border-bottom: 1px solid #dfe6ea;
}
.skplan-field:last-child {
  border-bottom: none;
}
.skplan-label {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
.skplan-note {
  font-size: 13px;
  color: #6b7780;
  margin-top: 6px;
}
.skplan select {
  font-family: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid #dfe6ea;
  border-radius: 8px;
  background: #fff;
  min-width: 220px;
}
.skplan select:focus {
  outline: 2px solid #cbdef6;
}

/* --- プラン選択（カード型） ------------------------------------------ */
.skplan-choice {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.skplan-choice-item {
  flex: 1 1 200px;
  border: 2px solid #dfe6ea;
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.skplan-choice-item:hover {
  border-color: #cbdef6;
}
.skplan-choice-item.is-selected {
  border-color: #0c419a;
  background: #effcff;
}
.skplan-choice-name {
  font-weight: 700;
  font-size: 17px;
  color: #0c419a;
}
.skplan-choice-desc {
  font-size: 13px;
  color: #6b7780;
  margin-top: 4px;
  line-height: 1.5;
}
.skplan-choice-item input {
  margin-right: 8px;
}

/* --- オプション ------------------------------------------------------ */
.skplan-opt {
  display: block;
  padding: 12px 14px;
  border: 1px solid #dfe6ea;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: 500;
}
.skplan-opt:hover {
  background: #effcff;
}
.skplan-opt input {
  margin-right: 8px;
}
.skplan-opt-sub {
  display: block;
  font-size: 13px;
  color: #6b7780;
  font-weight: 400;
  margin-top: 2px;
  padding-left: 22px;
}

/* --- 料金サマリ ------------------------------------------------------ */
.skplan-summary {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(12, 65, 154, 0.10);
}
.skplan-summary-head {
  background: #0c419a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  font-size: 16px;
}
.skplan-summary-body {
  padding: 20px;
}
.skplan-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed #dfe6ea;
}
.skplan-summary-row .r {
  text-align: right;
  white-space: nowrap;
}
/* 「利用しない」など、選んでいないことを示す値は控えめに見せる */
.skplan-summary-row .r.off {
  color: #9aa7b0;
}
/* LINE追加送信数のような従属項目 */
.skplan-summary-row.sub {
  padding-top: 4px;
  color: #6b7780;
}
.skplan-summary-total {
  margin-top: 16px;
  text-align: right;
}
.skplan-summary-total .lbl {
  font-size: 13px;
  color: #6b7780;
}
.skplan-summary-total .amt {
  font-size: 30px;
  font-weight: 700;
  color: #0c419a;
  line-height: 1.2;
}
.skplan-summary-total .sub {
  font-size: 13px;
  color: #6b7780;
}
.skplan-summary-empty {
  padding: 30px 20px;
  text-align: center;
  color: #6b7780;
  font-size: 14px;
}

/* --- ボタン ---------------------------------------------------------- */
.skplan-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 40px;
  padding: 14px 34px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
.skplan-btn:hover {
  opacity: .85;
  text-decoration: none;
}
.skplan-btn.is-primary {
  background: #ec7aac;
  color: #fff;
}
.skplan-btn.is-sub {
  background: #fff;
  color: #0c419a;
  border: 2px solid #cbdef6;
}
.skplan-btn.is-disabled {
  background: #c9d2d8;
  color: #fff;
  cursor: default;
  opacity: 1;
}
.skplan-btn-area {
  text-align: center;
  margin-top: 24px;
}

/* --- 注意書き --------------------------------------------------------
   警告ではなく案内なので、ピンク（#ffe0ea）ではなく淡い青にしている。
   ピンクは行動ボタンの色でもあり、注意書きに使うと警告に見えるため（2026-09-04） */
.skplan-caution {
  background: #eef4fa;
  border-left: 4px solid #9dbcd8;
  border-radius: 8px;
  padding: 18px 22px;
  font-size: 14px;
  color: #35485a;
}
.skplan-caution ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.skplan-caution li {
  margin-bottom: 4px;
}

/* 比較表の記号の凡例 */
.skplan-legend {
  font-size: 13px;
  color: #6b7780;
  margin-bottom: 8px;
  text-align: right;
}

/* --- 比較表 ---------------------------------------------------------- */
.skplan-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(12, 65, 154, 0.06);
}
.skplan-compare th,
.skplan-compare td {
  padding: 14px 16px;
  border-bottom: 1px solid #dfe6ea;
  font-size: 15px;
  vertical-align: middle;
}
.skplan-compare thead th {
  background: #0c419a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 16px;
  border-bottom: none;
}
.skplan-compare thead th:first-child {
  background: #0b3c90;
  text-align: left;
}
.skplan-compare tbody th {
  text-align: left;
  font-weight: 500;
  background: #f0f6f8;
  width: 40%;
}
.skplan-compare tbody td {
  text-align: center;
  width: 30%;
}
.skplan-compare tbody tr:last-child th,
.skplan-compare tbody tr:last-child td {
  border-bottom: none;
}
.skplan-compare .ok {
  color: #0c419a;
  font-weight: 700;
  font-size: 18px;
}
.skplan-compare .ng {
  color: #a9b4bb;
  font-size: 13px;
}
.skplan-compare .val {
  font-weight: 700;
  color: #0c419a;
}
.skplan-linkrow {
  text-align: center;
  margin-top: 26px;
}

/* --- 狭い画面 -------------------------------------------------------- */
@media screen and (max-width: 900px) {
  .skplan-cols {
    display: block;
  }
  .skplan-col-side {
    position: static;
    margin-top: 20px;
  }
  .skplan-head h1 {
    font-size: 24px;
  }
  .skplan-card {
    padding: 20px 18px;
  }
  .skplan-compare th,
  .skplan-compare td {
    padding: 10px 8px;
    font-size: 14px;
  }
  .skplan-compare tbody th {
    width: 44%;
  }
}

/* --- 手順表示（ゲスト見積もり） --------------------------------------- */
.skplan-steps {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.skplan-step {
  flex: 1 1 0;
  background: #fff;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #0c419a;
  box-shadow: 0 2px 10px rgba(12, 65, 154, 0.06);
}
.skplan-step .num {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: #ec7aac;
  color: #fff;
  font-size: 13px;
  margin-right: 6px;
}

/* --- 入力欄 ----------------------------------------------------------- */
.skplan-input {
  display: block;
  width: 100%;
  max-width: 420px;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid #dfe6ea;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.skplan-input:focus {
  outline: 2px solid #cbdef6;
}
.skplan-input::placeholder {
  color: #a9b4bb;
}

/* --- 個人情報の取り扱い（長文をスクロールに収める） ------------------- */
.skplan-pinfo {
  max-height: 240px;
  overflow-y: auto;
  background: #f0f6f8;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.8;
}
.skplan-pinfo p {
  margin: 0 0 12px;
}
.skplan-pinfo p:last-child {
  margin-bottom: 0;
}

/* --- 狭い画面（手順表示は縦積みにする） ------------------------------- */
@media screen and (max-width: 700px) {
  .skplan-steps {
    display: block;
  }
  .skplan-step {
    margin-bottom: 8px;
  }
}


/* ======================================================================
   プラン選択モーダル（ゲストのみ）

   views/common/planselect.php の #divPlanSelect に .skplan-modal が付いたときだけ効く。
   管理画面・顧客画面では付かないため、従来の見た目のまま。
   共通化する場合はビュー側の条件を外し、各画面で本CSSを読み込むこと。
   ====================================================================== */
.skplan-modal {
  font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #1b1b1b;
  font-size: 15px;
  line-height: 1.7;
  /* ダイアログの枠と内容が詰まって見えるため上下に余白を取る */
  padding: 24px 6px 10px;
}
/* 最初のセクション（契約期間）の見出しは上マージンを詰めて、
   上のpaddingと二重にならないようにする */
.skplan-modal .title-area:first-child h3,
.skplan-modal .row:first-child .title-area h3 {
  margin-top: 0;
}
/* 右カラムのサマリも上端を揃える */
.skplan-modal .skplan-modal-side {
  margin-top: 0;
}

/* ステップ見出し（1／2 契約プランを選択して下さい。） */
.skplan-modal .titlebar {
  background: #0c419a;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 18px;
  border: none;
}

/* セクション見出し（契約期間・契約プラン） */
.skplan-modal .title-area h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0c419a;
  padding-left: 12px;
  border-left: 4px solid #ec7aac;
  line-height: 1.4;
  margin: 22px 0 12px;
}
.skplan-modal .title-area .subinfo {
  font-size: 13px;
  color: #6b7780;
  margin-left: 10px;
}

/* 入力欄 */
.skplan-modal input[type="text"],
.skplan-modal select {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid #dfe6ea;
  border-radius: 8px;
  background: #fff;
}
.skplan-modal input[type="text"]:focus,
.skplan-modal select:focus {
  outline: 2px solid #cbdef6;
}
.skplan-modal input[type="text"]:disabled {
  background: #f0f6f8;
  color: #8b959c;
}

/* プラン一覧 */
.skplan-modal table.planlist {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(12, 65, 154, 0.06);
  background: #fff;
  width: 100%;
}
.skplan-modal table.planlist th,
.skplan-modal table.planlist td {
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid #dfe6ea;
  font-size: 15px;
}
.skplan-modal table.planlist tr:first-child th {
  background: #0c419a;
  color: #fff;
  font-weight: 700;
  border-bottom: none;
}
.skplan-modal table.planlist tr.selectrow:hover td {
  background: #effcff;
  cursor: pointer;
}
.skplan-modal table.planlist tr:last-child td {
  border-bottom: none;
}

/* オプションの囲み枠（LINE・自動翻訳・ファイル容量など） */
.skplan-modal .content-area > div[style*="border"] {
  border-radius: 12px !important;
}

/* ボタン */
.skplan-modal .work_btn {
  font-family: inherit;
  font-weight: 700;
  border-radius: 40px;
  padding: 10px 26px;
  border: none;
  font-size: 15px;
  height: auto;
  line-height: 1.6;
  /* 元CSSの width:100px（.small は 65px）を解除する。
     幅が固定のままだと文字が折り返して縦長の楕円になるため */
  width: auto;
  min-width: 0;
  white-space: nowrap;
  box-shadow: none;
}
.skplan-modal .work_btn.work_search {
  background: #ec7aac;
  color: #fff;
}
.skplan-modal .work_btn.work_print {
  background: #fff;
  color: #0c419a;
  border: 2px solid #cbdef6;
}
.skplan-modal .work_btn.work_close {
  background: #eef2f5;
  color: #6b7780;
}
.skplan-modal .work_btn.subbtn {
  background: #fff;
  color: #0c419a;
  border: 2px solid #cbdef6;
  padding: 6px 20px;
  font-size: 14px;
  border-radius: 40px;
  width: auto;
  white-space: nowrap;
}
.skplan-modal .work_btn.subbtn.active {
  background: #0c419a;
  color: #fff;
  border-color: #0c419a;
}
.skplan-modal .work_btn:hover {
  opacity: .85;
}

/* 合計金額（View側はクラスを持たない行なので、末尾の太字行を対象にする） */
.skplan-modal .row[style*="font-weight:bold"] {
  color: #0c419a;
}
.skplan-modal .row[style*="font-weight:bold"] span {
  font-size: 1.2em;
}

/* 補足文 */
.skplan-modal .subinfo {
  font-size: 13px;
  color: #6b7780;
}

/* --- モーダルの2カラム（左：入力 ／ 右：お見積り金額） ----------------- */
/*     .skplan-modal が付かない画面ではこれらが効かず、素のブロックとして
       従来どおり縦に並ぶ（管理画面・顧客画面は影響なし）                */
.skplan-modal .skplan-modal-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.skplan-modal .skplan-modal-main {
  flex: 1 1 auto;
  min-width: 0;
}
.skplan-modal .skplan-modal-side {
  flex: 0 0 280px;
  position: sticky;
  top: 0;
}
.skplan-modal .skplan-modal-side .skplan-summary-row {
  font-size: 13px;
}
.skplan-modal .skplan-modal-side .skplan-summary-total .amt {
  font-size: 26px;
}
.skplan-modal .skplan-field {
  border-bottom: none;
  padding-top: 0;
}
/* モーダル内の「プラン区分」「ご利用人数」「オプション選択」は独立した項目として見せる。
   見出しを青字＋下線にし、上に間隔を取ることで区切りを作っている。
   下線を左端から引くのは、選択欄やオプション枠と左端を揃えるため
   （アイコンや縦線を頭に置くと見出しだけ右にずれてしまう）。
   「プラン区分」は管理画面では素の span のままにしたいので span で置いており、
   ここで block にして他の2つと同じ見た目に揃えている */
.skplan-modal .skplan-label {
  display: block;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d3e0ea;
  font-size: 16px;
  font-weight: 700;
  color: #0c419a;
}
/* 最初の項目（プラン区分）はモーダル上端に近いので、上の間隔を詰める */
.skplan-modal .content-area > div:first-child .skplan-label {
  margin-top: 4px;
}
/* オプションの各枠は共通markupが inline style で margin:10px を持っており、
   「ご利用人数」より右にずれてしまうので、ゲストだけ左右の余白を消して左端を揃える。
   inline style が相手のため !important が必要。
   ※枠線の色はビュー側の inline style を #a9c4d9 に統一済み（2026-09-04）。
   　以前は緑／赤／紺と枠ごとに違い、色に意味があるように見えていた。
   　ここで色を上書きすると管理画面と食い違うので、色は指定しないこと */
.skplan-modal .content-area > div[style*="border: solid 1px"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 10px !important;
  border-radius: 8px;
  background: #fbfdfe;
  padding: 12px 14px !important;
}
/* 選択中の枠だけ少し強調する（色は変えず、枠線と背景の濃さだけ） */
.skplan-modal .content-area > div.is-on {
  border-color: #7ba7cf !important;
  background: #f2f8fd;
}
/* オプション枠の中の子項目（LINE送信数の追加購入）。
   字下げ自体はビュー側の inline style で付けているので、
   ここでは親子関係を示す縦線だけを足している。
   選択済みのときは縦線を濃くする（枠の背景は親枠が持つ） */
.skplan-modal .skplan-optchild {
  border-left: 3px solid #dfe9f1;
}
.skplan-modal .skplan-optchild.is-on {
  border-left-color: #7ba7cf;
}
/* オプションの内訳（通数・費用など）はゲストでは1項目1行にする。
   横に並べると金額が中途半端な位置で折り返して読みにくいため */
.skplan-modal .skplan-optline {
  display: block;
  padding-left: 0 !important;
  margin-top: 4px;
}
.skplan-modal .skplan-field select {
  min-width: 280px;
}

@media screen and (max-width: 900px) {
  .skplan-modal .skplan-modal-cols {
    display: block;
  }
  .skplan-modal .skplan-modal-side {
    position: static;
    margin-top: 20px;
  }
}