/* =========================================================
   特定商取引法ページ 専用CSS  (page-commerce-law.css)
   - contact.css と同じ2カラム骨格（flex / 7:93）
   - bodyクラス依存なし（IDスコープ）
   - フォント：全体小さめ、太字解除
   - 表：外枠＆セル枠あり
   - 表内の左右フォントサイズを完全一致（1.05rem）
   ========================================================= */

/* ---- 基本色・フォント ---- */
:root {
  --text: #222;
  --muted: #666;
  --line: #bdbdbd;
  --brand: #1b5fa9; /* 青系 */
}
#commerce-law-page-wrap {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP","Yu Gothic", Meiryo, sans-serif;
}

/* ---- レイアウト（contact と同一） ---- */
#commerce-law-page-wrap .main-container{
  display: flex;            /* 左ラインを右の高さに追従させる */
  align-items: stretch;
}
#commerce-law-page-wrap .main-side{
  width: 7%;
  background-image: url("../img/line-blue.png");
  background-repeat: repeat-y;
  background-size: contain;
  background-position: left top;
  background-color: var(--brand);    /* 画像が無い時のフォールバック色 */
}
#commerce-law-page-wrap .main-content{
  width: 93%;
  min-width: 0;
}

/* ---- 内側余白（contact準拠） ---- */
#commerce-law-page .main-privacy,
#commerce-law-page.main-privacy {
  padding: 100px 100px 100px 100px;
}

/* ---- 本文（全体を一段小さく） ---- */
#commerce-law-page{
  font-size: .95em;
  line-height: 1.85;
}

/* ---- タイトル（太字解除＆小さめ） ---- */
#commerce-law-page .title-h2{
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  line-height: 1.35;
  margin: 0 0 24px 0;
  letter-spacing: .02em;
}

/* ---- テーブル：外枠＋セル枠 ---- */
#commerce-law-page .commerce-law-table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);     /* 外枠 */
}
#commerce-law-page .commerce-law-table th,
#commerce-law-page .commerce-law-table td{
  border: 1px solid var(--line);     /* セル枠 */
  padding: 10px 12px;
  vertical-align: top;
  font-weight: 400 !important;       /* 全セル太字解除 */
}

/* ---- 左列（見出し） ---- */
#commerce-law-page .commerce-law-table th.title-h3{
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  margin: 0;
  width: 28%;
  white-space: normal;
}

/* ---- 右列（値） ---- */
#commerce-law-page .commerce-law-table td.section-p{
  font-size: 1.05rem !important;     /* 左と完全一致 */
  font-weight: 400 !important;
  line-height: 1.85;
  color: var(--text);
}
#commerce-law-page .commerce-law-table td.section-p a{
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  text-decoration: underline;
  color: var(--brand);
}
#commerce-law-page .commerce-law-table td.section-p a:hover{
  opacity: .8;
}

/* ---- 段落（汎用） ---- */
#commerce-law-page .section-p{
  font-size: .95em !important;
  margin: 0;
}

/* ===================================================================
   レスポンシブ：contact.css の方針を移植
   - レイアウトは常に flex（スマホでも左ラインを表示）
   - 内側 padding を段階的に縮小
   - 表のはみ出しを防止（wrap）
   =================================================================== */

/* タブレット・小さめディスプレイ（~800px） */
@media screen and (max-width: 800px) {
  #commerce-law-page .title-h2 { font-size: 1.5rem !important; margin-bottom: 20px; }
  #commerce-law-page { font-size: .98em; }

  /* contact 相当：内側余白を半分に */
  #commerce-law-page .main-privacy,
  #commerce-law-page.main-privacy {
    padding: 100px 50px 100px 50px;
  }

  /* レイアウトは flex のまま（ライン維持） */
  #commerce-law-page-wrap .main-container { display: flex; }
  #commerce-law-page-wrap .main-side    { width: 7%; background-repeat: repeat-y; background-size: contain; }
  #commerce-law-page-wrap .main-content { width: 93%; min-width: 0; }

  /* 表の文字サイズをやや縮小（左右の統一は維持） */
  #commerce-law-page .commerce-law-table th.title-h3,
  #commerce-law-page .commerce-law-table td.section-p { font-size: 1.0rem !important; }
}

/* スマホ（~600px） */
@media screen and (max-width: 600px) {
  #commerce-law-page .title-h2 { font-size: 1.35rem !important; margin-bottom: 50px; }
  #commerce-law-page .section-p { font-size: .98em !important; }

  /* contact 相当：さらに余白を縮小 */
  #commerce-law-page .main-privacy,
  #commerce-law-page.main-privacy {
    padding: 50px 20px 50px 20px;
  }

  /* レイアウトは flex のまま（ライン表示を維持） */
  #commerce-law-page-wrap .main-container { display: flex; }
  #commerce-law-page-wrap .main-side      { width: 7%; }
  #commerce-law-page-wrap .main-content   { width: 93%; min-width: 0; }

  /* 表のはみ出し防止（wrap & 余白調整） */
  #commerce-law-page .commerce-law-table{
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  #commerce-law-page .commerce-law-table th,
  #commerce-law-page .commerce-law-table td{
    padding: 10px;
    vertical-align: top;
    word-break: break-word;
  }

  /* 左右フォントも少しだけ縮小（統一は維持） */
  #commerce-law-page .commerce-law-table th.title-h3,
  #commerce-law-page .commerce-law-table td.section-p { font-size: 0.98rem !important; }
}