/* ============================================================
   法定書面（概要書面・契約書面）用のスタイル

   特定商取引法 第37条／施行規則の定めにより、次の形式要件があります。
   ここを勝手に変えると、書面として無効になるおそれがあります。

     ・字および数字の大きさは  8ポイント以上
       → 本文は 10.5pt 相当（14px）にしてあります。余裕をみた値です。
     ・「書面をよく読むべきこと」を  赤枠の中に赤字  で記載する
       → .yomu
     ・契約書面では クーリング・オフに関する事項を 赤枠の中に赤字 で記載する
       → .cooling

   印刷したときにA4で読める形になるよう、@media print を入れてあります。
   ============================================================ */

.shomen {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 15px;
  line-height: 1.9;
  color: #2B2B2B;
}

.shomen .doc-head {
  text-align: center;
  padding: 10px 0 26px;
  border-bottom: 2px solid #1F4E79;
  margin-bottom: 30px;
}
.shomen .doc-head h1 {
  font-size: 22px; line-height: 1.5; margin: 0 0 10px; color: #1F4E79;
}
.shomen .doc-head .sub { font-size: 14px; color: #6B6B6B; margin: 0; }

.shomen h2 {
  font-size: 17px; color: #1F4E79; margin: 36px 0 12px;
  padding: 0 0 7px; border-bottom: 1px solid #D6DEE7;
}
.shomen h3 { font-size: 15.5px; margin: 22px 0 8px; color: #16395A; }
.shomen p  { margin: 0 0 1em; }
.shomen ul, .shomen ol { margin: 0 0 1em; padding-left: 1.4em; }
.shomen li { margin-bottom: .5em; }

/* 項目の表 */
.shomen table.doc {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4em;
  font-size: 14.5px;
}
.shomen table.doc th,
.shomen table.doc td {
  border: 1px solid #C9D3DE; padding: 11px 13px; vertical-align: top;
  text-align: left;
}
.shomen table.doc th {
  background: #F2F5F9; width: 31%; font-weight: 700; color: #16395A;
}
@media (max-width: 600px) {
  .shomen table.doc th, .shomen table.doc td { display: block; width: auto; }
  .shomen table.doc th { border-bottom: none; }
  .shomen table.doc td { border-top: none; }
}

/* ---- 赤枠・赤字（法定） ---------------------------------- */
/*  この2つは法律が形を決めています。色・枠を外さないでください。  */
.shomen .yomu,
.shomen .cooling {
  border: 2px solid #C00000;
  color: #C00000;
  padding: 16px 18px;
  margin: 24px 0;
  background: #fff;
}
.shomen .yomu p,
.shomen .cooling p { margin: 0 0 .8em; }
.shomen .yomu p:last-child,
.shomen .cooling p:last-child { margin-bottom: 0; }
.shomen .yomu strong,
.shomen .cooling strong { color: #C00000; }
.shomen .cooling h2 {
  color: #C00000; border-bottom: 1px solid #C00000;
  margin: 0 0 12px; font-size: 16px;
}

/* 補足 */
.shomen .note { font-size: 13.5px; color: #6B6B6B; line-height: 1.85; }

/* 制作者向けの差し替え箇所 */
.shomen .todo {
  background: #FFF4D6; border: 1px dashed #C9872A; color: #7A5212;
  padding: 2px 7px; border-radius: 3px; font-size: 13.5px;
}

/* 署名欄 */
.shomen .sign {
  border: 1px solid #C9D3DE; padding: 18px 20px; margin: 26px 0;
}
.shomen .sign .row { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.shomen .sign .row:last-child { margin-bottom: 0; }
.shomen .sign .lbl { width: 9em; flex: none; font-weight: 700; font-size: 14.5px; }
.shomen .sign .ln { flex: 1; border-bottom: 1px solid #9AA7B4; min-height: 1.9em; }

/* 書面を保存・印刷してもらうためのボタン */
.shomen .doc-actions { margin: 34px 0 10px; display: flex; gap: 12px; flex-wrap: wrap; }

@media print {
  @page { size: A4 portrait; margin: 15mm 14mm; }
  .site-header, .site-footer, .crumbs, .page-head, .doc-actions { display: none !important; }
  .shomen { max-width: none; padding: 0; font-size: 10.5pt; }
  .shomen h2 { page-break-after: avoid; }
  .shomen .yomu, .shomen .cooling, .shomen table.doc { page-break-inside: avoid; }
  body { background: #fff; }
}