/* ==========================================================================
   料金表(pricing.html)専用スタイル
   このファイルは pricing.html でのみ読み込みます(site.cssの後に読み込む前提)。

   このページだけ、営業資料としての見やすさを優先し、落ち着いたブルーを
   アクセントカラーとして使用しています(サイト全体の紺×金の配色とは
   独立させ、.price-sheet の中だけで完結するようスコープしています)。
   クラス名がサイト共通CSSの .service-card / .flow-step と重複しないよう、
   料金表側は .price-service-card / .price-flow-step という名前にしています。

   構成:
   0. 料金表専用の変数(.price-sheetの中だけで有効)
   1. 全体レイアウト
   2. 共通パーツ(カード・テーブル・リスト・バッジ)
   3. ヘッダー(ブランド名・最終更新日・タイトル)
   4. 基本プラン
   5. オプション・制作期間
   6. 制作の流れ
   7. お支払い・ご用意いただくもの・ドメインサーバー
   8. 更新・修正サービス
   9. ご相談・お見積り(クロージング)
   10. フッター
   11. ページ区切り・レスポンシブ・印刷設定
   ========================================================================== */

/* ==========================================================================
   0. 料金表専用の変数
   ========================================================================== */
.price-sheet{
  --price-blue:      #1e4d7b;
  --price-blue-dark: #143a5e;
  --price-blue-pale: #e7eef6;
  --price-ink:       #232a33;
  --price-muted:     #5a6470;
  --price-border:    #d7dee6;
  --price-radius:    8px;
}

/* ==========================================================================
   1. 全体レイアウト
   ========================================================================== */
.price-sheet{
  max-width:900px; margin:0 auto;
  background:#ffffff;
  border:1px solid var(--price-border);
  border-radius:var(--price-radius);
  padding:20mm 16mm;
  box-shadow:var(--shadow-soft);
  color:var(--price-ink);
  font-size:14px;
  line-height:1.75;
}
.price-sheet h1, .price-sheet h2, .price-sheet h3{ color:var(--price-blue-dark); }
.price-sheet table{ border-collapse:collapse; width:100%; }

/* ==========================================================================
   2. 共通パーツ
   ========================================================================== */
.price-sheet .section{ margin-bottom:20px; }
.price-sheet .section-title{
  display:flex; align-items:center; gap:10px;
  font-size:16.5px; margin-bottom:12px; padding-bottom:8px;
  border-bottom:2px solid var(--price-blue);
  font-family:var(--font-serif); font-weight:700;
}
.price-sheet .section-title .icon{
  width:26px; height:26px; flex:none; color:var(--price-blue);
  display:flex; align-items:center; justify-content:center;
}
.price-sheet .section-title .icon svg{ width:20px; height:20px; }

.price-sheet .card{
  background:#f6f8fb;
  border:1px solid var(--price-border);
  border-radius:var(--price-radius);
  padding:16px 18px;
}

.price-sheet .note-list{ display:grid; gap:6px; }
.price-sheet .note-list li{
  position:relative; padding-left:16px; font-size:13px; color:var(--price-ink);
}
.price-sheet .note-list li::before{
  content:"・"; position:absolute; left:0; color:var(--price-blue);
}

.price-sheet .badge{
  display:inline-block; font-size:11px; font-weight:700; color:var(--price-blue);
  background:var(--price-blue-pale); border-radius:999px; padding:3px 10px;
  letter-spacing:0.04em;
}

/* ==========================================================================
   3. ヘッダー(ブランド名・最終更新日・タイトル)
   ========================================================================== */
.price-sheet .doc-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:6px;
}
.price-sheet .brand{ font-size:12.5px; font-weight:700; color:var(--price-blue-dark); letter-spacing:0.06em; font-family:var(--font-sans); }
.price-sheet .brand-sub{ font-size:10.5px; color:var(--price-muted); margin-top:2px; }
.price-sheet .updated{ text-align:right; font-size:11px; color:var(--price-muted); white-space:nowrap; }

.price-sheet .doc-title{ text-align:center; margin:18px 0 22px; }
.price-sheet .doc-title h1{ font-size:26px; letter-spacing:0.04em; margin-bottom:6px; }
.price-sheet .doc-title p{ font-size:12.5px; color:var(--price-muted); letter-spacing:0.1em; }
.price-sheet .doc-title .rule{
  width:64px; height:3px; background:var(--price-blue); margin:14px auto 0; border-radius:2px;
}

/* ==========================================================================
   4. 基本プラン
   ========================================================================== */
.price-sheet .plan-card{
  background:linear-gradient(180deg,#ffffff 0%, var(--price-blue-pale) 130%);
  border:1px solid var(--price-border);
  border-radius:var(--price-radius);
  padding:20px 22px;
  display:grid; gap:16px;
}
.price-sheet .plan-head{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid var(--price-border); padding-bottom:14px;
}
.price-sheet .plan-head h3{ font-size:17px; }
.price-sheet .plan-head .plan-desc{ font-size:12px; color:var(--price-muted); margin-top:4px; font-family:var(--font-sans); }
.price-sheet .plan-price{ text-align:right; }
.price-sheet .plan-price .num{ font-family:var(--font-sans); font-size:26px; font-weight:700; color:var(--price-blue); }
.price-sheet .plan-price .yen{ font-size:14px; font-weight:700; color:var(--price-blue); }
.price-sheet .plan-price .tax{ font-size:11px; color:var(--price-muted); }

.price-sheet .plan-includes{ display:grid; gap:8px 20px; grid-template-columns:repeat(2,1fr); }
.price-sheet .plan-includes li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; }
.price-sheet .plan-includes li svg{ width:14px; height:14px; flex:none; margin-top:3px; color:var(--price-blue); }

/* ==========================================================================
   5. オプション・制作期間
   ========================================================================== */
.price-sheet .two-col{ display:grid; gap:16px; grid-template-columns:1.3fr 1fr; }

.price-sheet .price-table{ width:100%; font-size:12.5px; }
.price-sheet .price-table th, .price-sheet .price-table td{
  text-align:left; padding:9px 6px; border-bottom:1px solid var(--price-border);
}
.price-sheet .price-table th{ color:var(--price-muted); font-weight:700; font-size:11px; }
.price-sheet .price-table tr:last-child th, .price-sheet .price-table tr:last-child td{ border-bottom:none; }
.price-sheet .price-table .amount{ text-align:right; white-space:nowrap; font-weight:700; color:var(--price-blue); }

.price-sheet .duration-value{ font-size:20px; font-weight:700; color:var(--price-blue-dark); margin-bottom:6px; font-family:var(--font-serif); }
.price-sheet .duration-note{ font-size:11.5px; color:var(--price-muted); }

/* ==========================================================================
   6. 制作の流れ
   サイト共通CSSの .flow-step と名前が重複しないよう .price-flow- というプレフィックスにしています。
   ========================================================================== */
.price-sheet .price-flow-list{ display:grid; gap:0; grid-template-columns:repeat(7,1fr); text-align:center; }
.price-sheet .price-flow-step{ position:relative; padding:0 4px; }
.price-sheet .price-flow-step .flow-num{
  width:28px; height:28px; margin:0 auto 6px; border-radius:50%;
  border:1.5px solid var(--price-blue); color:var(--price-blue);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; background:#fff; font-family:var(--font-sans);
}
.price-sheet .price-flow-step p{ font-size:10.5px; color:var(--price-ink); line-height:1.4; }
.price-sheet .price-flow-step:not(:last-child)::after{
  content:""; position:absolute; top:14px; left:56%; width:100%; height:1px;
  background:var(--price-border); z-index:0;
}

/* ==========================================================================
   7. お支払い・ご用意いただくもの・ドメインサーバー
   ========================================================================== */
.price-sheet .three-col{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); align-items:start; }
/* 見出しの文字数がカラムごとに異なり、折り返し行数の違いでカード天面がずれることが
   あるため、見出しは一行で収まるよう文字サイズを調整して折り返しを防止している */
.price-sheet .three-col .section-title{
  font-size:14.5px; gap:8px; white-space:nowrap;
}
.price-sheet .three-col .section-title .icon{ width:22px; height:22px; }
.price-sheet .three-col .section-title .icon svg{ width:16px; height:16px; }
.price-sheet .single-note{ font-size:13px; color:var(--price-ink); }

/* ==========================================================================
   8. 更新・修正サービス
   サイト共通CSSの .service-card と名前が重複しないよう .price-service-card にしています。
   ========================================================================== */
.price-sheet .price-service-card{
  display:grid; gap:16px; grid-template-columns:0.8fr 1.2fr;
  background:#f6f8fb; border:1px solid var(--price-border);
  border-radius:var(--price-radius); padding:16px 18px;
}
.price-sheet .service-price{ text-align:center; border-right:1px solid var(--price-border); padding-right:16px; }
.price-sheet .service-price .label{ font-size:11px; color:var(--price-muted); margin-bottom:4px; }
.price-sheet .service-price .num{ font-size:24px; font-weight:700; color:var(--price-blue); font-family:var(--font-sans); }
.price-sheet .service-price .tax{ font-size:11px; color:var(--price-muted); }
.price-sheet .service-detail h4{ font-size:12.5px; color:var(--price-blue-dark); margin-bottom:6px; font-family:var(--font-sans); font-weight:700; }
.price-sheet .service-detail .note-list{ margin-bottom:10px; }
.price-sheet .service-detail .note-list:last-child{ margin-bottom:0; }

/* ==========================================================================
   9. ご相談・お見積り(クロージング)
   ========================================================================== */
.price-sheet .closing{
  background:var(--price-blue); color:#fff;
  border-radius:var(--price-radius); padding:22px 20px; text-align:center;
}
.price-sheet .closing h3{ color:#fff; font-size:17px; margin-bottom:8px; }
.price-sheet .closing p{ font-size:12.5px; color:#dce8f3; }

/* ==========================================================================
   10. フッター
   ========================================================================== */
.price-sheet .doc-footer{
  margin-top:20px; padding-top:14px; border-top:1px solid var(--price-border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:10.5px; color:var(--price-muted);
}

/* ==========================================================================
   11. ページ区切り・レスポンシブ・印刷設定
   ========================================================================== */
.price-sheet .page-break{ height:0; margin:0; border:0; }

@media (max-width: 720px){
  .price-sheet{ padding:8mm 6mm; }
  .price-sheet .doc-header{ flex-direction:column; gap:4px; }
  .price-sheet .updated{ text-align:left; }
  .price-sheet .two-col, .price-sheet .three-col{ grid-template-columns:1fr; }
  .price-sheet .plan-includes{ grid-template-columns:1fr; }
  .price-sheet .plan-head{ flex-direction:column; align-items:flex-start; }
  .price-sheet .plan-price{ text-align:left; }
  .price-sheet .price-flow-list{ grid-template-columns:repeat(2,1fr); gap:14px 0; }
  .price-sheet .price-flow-step::after{ display:none; }
  .price-sheet .price-service-card{ grid-template-columns:1fr; }
  .price-sheet .service-price{ border-right:none; border-bottom:1px solid var(--price-border); padding-right:0; padding-bottom:12px; }
}

@media (max-width: 480px){
  .price-sheet .price-flow-list{ grid-template-columns:repeat(2,1fr); }
}

/* A4縦・余白16mmで2ページ以内に収まるよう調整。印刷時はヘッダー・パンくず・
   フッターなどサイト共通のナビゲーション部分を .no-print (site.css側) で非表示にし、
   .price-sheet の中身だけが印刷されるようにしている。 */
@page{
  size: A4 portrait;
  margin: 16mm;
}

@media print{
  body{ background:#fff; }
  main{ padding:0; margin:0; }
  .price-sheet{
    max-width:none; margin:0; padding:0; border:none; box-shadow:none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  .price-sheet .card, .price-sheet .plan-card, .price-sheet .price-service-card,
  .price-sheet .closing, .price-sheet .price-flow-list, .price-sheet .price-table{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .price-sheet .section, .price-sheet .plan-card, .price-sheet .card,
  .price-sheet .price-service-card, .price-sheet .closing, .price-sheet table, .price-sheet tr{
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .price-sheet .page-break{
    break-after: page;
    page-break-after: always;
  }
}