/* ---------------------------
  各ヘルプページのCSS
--------------------------- */
/* =========
   印刷用制御
========= */
@media print {

  /* ✅ ❶ ❹：上の謎余白・右寄りを潰す（印刷時のみ全体リセット） */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;

    /* ✅ スマホPDFでの右切れ対策（横方向を確実に収める） */
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ✅ 1〜数pxのはみ出しで切れるのを防ぐ（印刷時だけ） */
  body{
    overflow-x: hidden !important;
  }

  /* ✅ box-modelを統一して、padding等で横幅が超えないようにする */
  .wrapper,
  .column-wrapper,
  .column-container,
  .content-main{
    box-sizing: border-box !important;
    max-width: 100% !important;

    /* ✅ transform系があると印刷でズレるので潰す保険 */
    transform: none !important;
  }

  /* ✅ 固定幅になりがちな要素を用紙幅に収める */
  img,
  table,
  pre,
  code{
    max-width: 100% !important;
  }

  table{
    width: 100% !important;
  }

  /* ✅ 横スクロール前提のpreが右切れ原因になりやすい */
  pre{
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow: visible !important;
  }

  .picture_down_text img {
    display: block !important;     /* 念のため：重なり防止 */
    margin-top: 15px !important;   /* ✅ 画像の上を10px空ける */
    margin-bottom: 15px !important;   /* ✅ 画像の上を10px空ける */
  }

  /* ✅ top_picture_text の直下にある picture_down_text 画像だけ左右余白を増やす */
  .image-wrapper > .top_picture_text + .picture_down_text {
    padding-top: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  .top_picture_text {
      margin-left: 20px !important;
    }

  h2.custom-heading, div.custom-heading {
    display: block !important;
    text-align: center !important;

    /* ✅ 太字 */
    font-weight: 700 !important;

    padding-left: 0 !important;
    padding: 0 !important;

    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ✅ ❹：中央に揃えて左右の空白を均等化 */
  .wrapper,
  .column-wrapper,
  .column-container,
  .content-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* ✅ ❶：左右の見切れ対策（左右 +5px） */
  .content-main {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  /* ✅ ❸：PDF表示の開始を h2 からにする（h2 より上を非表示） */
  .point-box,
  .youtube-link,
  .youtube-text {
    display: none !important;
  }

  /* ✅ ❸：更新日（h2の前にあるので非表示） */
  .heading-container > p {
    display: none !important;
  }

  /* ✅ ❶：ヘッダー非表示後に残る上余白を潰す（ページ先頭の空白対策） */
  .heading-container,
  .responsive-toc {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ✅ ❷：右側の縦タブ（サイト内検索やご質問はこちら）を印刷時だけ非表示 */
  .right_popup,
  .right-popup,
  .right_popup_btn,
  .right-popup-btn,
  .right_popup_trigger,
  .right-popup-trigger,
  .right_popup_area,
  .right-popup-area,
  .side-search-tab,
  .right-search-tab,
  #right_popup,
  #right-popup,
  #right_popup_howto,
  #rightPopup,
  #rightPopupBtn,

  /* ✅ 追加：実際の要素（outerHTMLに基づく） */
  #consultationButton,
  .consult-fixed-button,
  #collapseConsult,
  .consult-collapse-btn,
  .collapse-icon,

  /* ✅ 命名が違っても拾う（印刷時のみなので影響最小） */
  [id*="right_popup"],
  [class*="right_popup"],
  [id*="right-popup"],
  [class*="right-popup"],
  [id*="side_search"],
  [class*="side_search"],
  [id*="side-search"],
  [class*="side-search"] {
    display: none !important;
  }

  /* ✅ 画面用要素を非表示 */
  .main-header,
  .page_name,
  .qanda_block_header,
  .sticky-title,
  .sticky-search,
  .column-sidebar,
  .feedback-section,
  footer,
  .pdf-print-wrapper,
  .pdf-print-btn,

  /* ✅ 追加：目次の「目次を開く／閉じる」を印刷時だけ非表示 */
  .toc-accordion {
    display: none !important;
  }

  /* ✅ 追加：PDFでは目次を常に展開（openクラス無しでも中身を見せる） */
  .responsive-toc {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .responsive-toc ul,
  .responsive-toc ol,
  .responsive-toc .toc-content,
  .responsive-toc .toc-list,
  .responsive-toc .toc-body,
  .responsive-toc nav,
  .responsive-toc .toc-items {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ✅ 印刷時にだけ出現する「リンク先用アンカー」 */
  .pdf-anchor{
    display:block !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
    position: relative !important;
    top: -80mm !important;
  }

  /* 印刷専用タイトル表示 */
  .print-only-title {
    display: block;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
}

@media screen {
  .print-only-title {
    display: none;
  }
}

/* ページ余白（左右均等） */
@page {
  margin: 15mm;
}

/* ✅ 目次ボックス自体を左右内側へ（枠の余白） */
.content-main .responsive-toc {
  width: auto !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
  box-sizing: border-box !important;
}

/* ✅ ついでに中身も少し内側へ（文字の余白） */
.content-main .responsive-toc {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ✅ SP時だけ PDFボタンを小さくする */
@media screen and (max-width: 767px) {
  .pdf-print-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
  }

  .pdf-print-btn {
    font-size: 0 !important; /* 元の「PDFで保存」を消す（inline指定を上書き） */
  }
  .pdf-print-btn::after {
    content: "PDF";
    font-size: 11px;
    line-height: 1;
  }
}

@media print {

  /* =========================
     ✅ スマホ（特にiOS）PDFの「右寄り→右切れ」対策
     @page の余白を使わず、本文側にmmで余白を持たせる
  ========================= */
  @supports (-webkit-touch-callout: none) {

    /* iOS Safari は @page margin がズレの原因になりやすい */
    @page {
      margin: 0mm !important;
    }

    html, body{
      margin: 0 !important;
      padding: 0 !important;
    }

    /* 余白は本文側で作る（mm指定が一番安定） */
    .content-main{
      padding-left: 15mm !important;
      padding-right: 15mm !important;
      box-sizing: border-box !important;
    }

    /* コンテナのはみ出し防止（念のため） */
    .wrapper,
    .column-wrapper,
    .column-container{
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  }
}