/* =========================================================
  ガイド（guide_html.php）専用CSS
  目的：
  - ガイド内で “追尾UI” を消して、ページが重なって見える問題を解消
  - 目次を常に全展開（開閉UIは隠す）
  - 画面では page-break を無効、印刷では改ページを有効
  - 表紙（ロゴのみ）をPDF1ページ目に追加
  - ガイド右上のPDFボタンだけ表示し、本文側のPDFボタンは非表示
========================================================= */

/* ---------------------------
  ✅ ガイド右上：PDFボタン
--------------------------- */
@media screen{
  .guide-page .guide-actions{
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
  }

  .guide-page .guide-actions .pdf-print-btn{
    display: inline-flex !important;
    align-items: center;
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid rgb(231, 0, 18);
    background: rgb(231, 0, 18);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
  }
}
@media print{
  .guide-page .guide-actions{ display:none !important; }
}

/* ---------------------------
  ✅ 表紙（PDF1ページ目：ロゴのみ）
--------------------------- */
@media screen{
  .guide-page .guide-cover{ display:none; }
  .guide-page .guide-toc-heading{ display:none; }
}
@media print{
  .guide-page .guide-cover{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 260mm !important; /* A4縦を想定して中央寄せ */
  }
  .guide-page .guide-cover img{
    width: 50% !important;
    height: auto !important;
  }

  .guide-page .guide-toc-heading{
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 12mm !important;
  }
}

/* ---------------------------
  ✅ ガイド内：本文側のPDFボタンだけ非表示（重要）
  ※ ガイド右上のボタンは .guide-actions 配下なので残る
--------------------------- */
.guide-page .guide-section .pdf-print-btn{
  display:none !important;
}

/* ---------------------------
  追尾UIをガイド内だけ無効化
--------------------------- */
.guide-page .main-header,
.guide-page .page_name,
.guide-page .qanda_block_header,
.guide-page .sticky-title,
.guide-page .sticky-search,
.guide-page .column-sidebar,
.guide-page .feedback-section,
.guide-page footer,

/* 右側の縦タブ系 */
.guide-page .right_popup,
.guide-page .right-popup,
.guide-page .right_popup_btn,
.guide-page .right-popup-btn,
.guide-page .right_popup_trigger,
.guide-page .right-popup-trigger,
.guide-page .right_popup_area,
.guide-page .right-popup-area,
.guide-page .side-search-tab,
.guide-page .right-search-tab,
.guide-page #right_popup,
.guide-page #right-popup,
.guide-page #right_popup_howto,
.guide-page #rightPopup,
.guide-page #rightPopupBtn,

/* 相談ボタン系 */
.guide-page #consultationButton,
.guide-page .consult-fixed-button,
.guide-page #collapseConsult,
.guide-page .consult-collapse-btn,
.guide-page .collapse-icon,

/* 命名揺れ拾い */
.guide-page [id*="right_popup"],
.guide-page [class*="right_popup"],
.guide-page [id*="right-popup"],
.guide-page [class*="right-popup"],
.guide-page [id*="side_search"],
.guide-page [class*="side_search"],
.guide-page [id*="side-search"],
.guide-page [class*="side-search"]{
  display:none !important;
}

/* ガイドの幅を素直にする（ガイドページだけ） */
.guide-page .wrapper,
.guide-page .column-wrapper,
.guide-page .column-container,
.guide-page .content-main{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
}

/* ---------------------------
  目次：常に全展開＋開閉UI非表示
--------------------------- */
.guide-page .toc-accordion,
.guide-page [class*="toc-accordion"],
.guide-page [class*="toc_toggle"],
.guide-page [class*="toc-toggle"]{
  display:none !important;
}

.guide-page .responsive-toc{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

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

/* =========================================================
  PDF保存ボタン（guide_html.php 画面右上）
  - ガイド内に含まれる “各ページ側のPDFボタン” は非表示
  - ガイド自身のPDFボタンだけ表示
========================================================= */
.guide-actions{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
}
.guide-actions .pdf-print-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

/* 各ページ本文側に含まれてしまうPDFボタンは消す */
.guide-page .guide-section .pdf-print-btn{
  display:none !important;
}

/* 印刷時はボタン自体不要 */
@media print{
  .guide-actions{ display:none !important; }
}

/* =========================================================
  表紙（1ページ目）：ロゴだけ中央表示
========================================================= */
.guide-cover{
  display:none;
}
@media print{
  .guide-cover{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 260mm;
  }
  .guide-cover img{
    width: 120mm;
    height: auto;
  }
}

/* 画面では表紙は邪魔なので隠す（印刷時のみ出す） */
@media screen{
  .guide-cover{ display:none !important; }
}

/* =========================================================
  「アカポンガイド」タイトル（画面では控えめ、印刷は不要なら隠せる）
========================================================= */
.print-only-title{
  display:none;
}
@media screen{
  .print-only-title{
    display:block;
    font-size: 22px;
    font-weight: 800;
    text-align:center;
    margin: 16px 0 8px;
  }
}
@media print{
  .print-only-title{ display:none !important; }
}

/* =========================================================
  目次の見出し（2ページ目上部）
========================================================= */
.guide-toc-heading{
  display:none;
}
@media print{
  .guide-toc-heading{
    display:block;
    text-align:center;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8mm;
  }
}

/* =========================================================
  本文開始前の余白（目次ページの直後）
========================================================= */
.guide-body-start-space{
  display:none;
}
@media print{
  .guide-body-start-space{
    display:block;
    height: 0 !important;
  }
}

/* ---------------------------
  改ページ
--------------------------- */
@media screen{
  .guide-page .page-break{ display:none !important; }
}

@media print{
  /* ✅ PDFの全ページ：上下10mm、左右は現状維持 */
  @page{
    margin-top: 20mm;
    margin-bottom: 20mm;
    margin-left: 15mm;
    margin-right: 15mm;
  }

  html, body{
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    height:auto !important;
  }

  /* ✅ @page が効く前提なら、body側の余計な padding は入れない */
  .guide-page{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .guide-page .page-break{
    display:block !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    break-before:page !important;
    page-break-before:always !important;
  }

  /* 印刷時アンカー（リンクずれ補正） */
  .guide-page .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: -20mm !important;
  }

  /* =========================================================
    ✅ PDF（印刷時）レイアウトの整形
    目的：
      ① 目次内の「目次」文字を消す
      ② リンク色を黒にする（PDF内全て）
      ③ 目次を中央寄せ + “6ページ分で1つの枠” に見せる
      ④ 目次の下（本文開始）に余白
      ⑤ 本文も中央寄せ + 枠を付ける（左寄り過ぎを解消）
      ⑥ help_column.css 等が print に効かなくても崩れない最低限の体裁を与える
  ========================================================= */

  /* ② リンクを黒に（PDF全体） */
  .guide-page a,
  .guide-page a:visited{
    color:#000 !important;
    text-decoration:none !important;
  }

  /* ③ 目次の全体枠（1つ） */
  .guide-page .guide-toc-box{
    max-width: 170mm;
    margin: 0 auto;
    padding: 8mm 10mm;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
  }

  /* ① 各ページ側に含まれる「目次」タイトルは非表示 */
  .guide-page .guide-toc .toc-title,
  .guide-page .guide-toc p.toc-title{
    display:none !important;
  }

  /* ===============================
    PDF：本文内（各ページ内）の目次だけ枠あり
  =============================== */
  .guide-page .guide-body-box .responsive-toc{
    max-width: 170mm;
    margin: 0 auto 8mm;
    padding: 8mm 10mm;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .guide-page .guide-toc .responsive-toc{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===============================
    冒頭のアカポンガイド目次は枠なし
  =============================== */
  .guide-page .guide-toc .responsive-toc{
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* 目次のリストのインデント調整（左寄り過ぎを抑制） */
  .guide-page .guide-toc ul,
  .guide-page .guide-toc ol{
    margin: 0 !important;
    padding-left: 18px !important;
  }

  /* ③ 目次の全体枠（1つ） */
  .guide-page .guide-toc-box{
    max-width: 170mm;
    margin: 0 auto;
    padding: 8mm 10mm;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    /* ✅ ページ分割時に枠線・背景を各ページ側でも破綻しにくくする */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ✅ ❶ 目次：セクション丸ごと送らない（空白の原因を除去） */
  .guide-page .guide-toc-section{
    margin: 0 0 6mm;
    page-break-inside: auto;     /* ← avoid をやめる */
    break-inside: auto;
  }

  /* ✅ 見出し（■～）だけは末尾に取り残されにくくする */
  .guide-page .guide-toc-title{
    margin: 0 0 3mm;
    font-weight: 800;
    font-size: 13.5px;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ⑤ 本文の枠（各ページごと） */
  .guide-page .guide-body-box{
    max-width: 170mm;
    margin: 0 auto 0;
    padding: 8mm 10mm;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    /* ✅ ページ分割時の枠破綻対策（保険） */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ===============================
    Body内 h2（custom-heading）
    枠を完全に除去
  =============================== */
  .guide-page h2.custom-heading{
    margin: 0 0 6mm !important;
    text-align: center !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* help_column.css の ●丸（before）を無効化 */
  .guide-page h2.custom-heading::before{
    display: none !important;
  }

  /* h2 左アイコン（CSSで追加） */
  .guide-page h2.custom-heading{
    position: relative;
    padding-left: 28px !important;
  }

  .guide-page h2.custom-heading::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 18px;
    height: 18px;
    background: url("/images/icon/h2_icon.png") no-repeat center / contain;
  }

  /* ✅ ❸ 本文の文字・画像：印刷時に最低限効かせる（ガイド内だけ） */
  .guide-page .guide-body-box p,
  .guide-page .guide-body-box li{
    line-height: 1.7 !important;
  }

  .guide-page .guide-body-box img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* 本文のリスト類も左寄り過ぎを抑える */
  .guide-page .guide-body-box ul,
  .guide-page .guide-body-box ol{
    padding-left: 18px !important;
  }

  /* ④（＋要望） explanation_feature_box の背景を薄いグレーに（ガイドだけ） */
  .guide-page .guide-body-box .explanation_feature_box{
    background: transparent !important;
  }

}

  .guide-page .image-wrapper ul li {
    text-align: left !important;
    list-style-type: none !important;
  }

  .guide-page .responsive-toc {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
  }

  /* h2 左アイコン */
  .guide-page .h2-with-icon{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .guide-page .h2-with-icon .h2-icon{
    width: 18px;
    height: auto;
    flex-shrink: 0;
  }

  /* PDF内で出てしまうスクロールバーを完全に消す */
  @media print{
    .guide-page *{
      overflow: visible !important;
    }

    .guide-page table{
      overflow: visible !important;
    }

    /* ===============================
      PDF：本文の見出し（custom-heading）
      ・アイコン追加（CSS）
      ・外枠（線）を完全削除
      ・help_column.css の !important を確実に上書き
    =============================== */
    .guide-page .guide-body-box h2.custom-heading,
    .guide-page .guide-body-box div.custom-heading{
      /* ✅ 枠の高さを短く */
      height: 10mm !important;         /* ← 好みで 12〜16mm */
      margin: 0 0 6mm 0 !important;    /* ✅ 上の余白をゼロにして差を消す */
      padding: 0 !important;           /* ✅ 左右上下の余白をゼロ */

      /* ✅ 文字を上下左右中央 */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;

      /* ✅ 下線（枠下の線）を完全に消す */
      border: none !important;
      border-bottom: none !important;
      outline: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    .guide-page .guide-body-box h2.custom-heading::before,
    .guide-page .guide-body-box div.custom-heading::before{
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;

      width: 18px !important;
      height: 18px !important;

      background-color: transparent !important;
      border-radius: 0 !important;

      /* ↓ ここだけ、実ファイルのパスに置き換えてください */
      background: url("/images/icon/h2_icon.png") no-repeat center / contain !important;
    }
  }

  /* =========================================================
    ✅ 今回の要望対応（PDF最終上書き）
    ❶ 冒頭目次：見出しを大きく、少し左へ
    ❷ 各ページh2：下線削除＋枠の高さ短縮＋文字を上下左右中央
  ========================================================= */
  @media print{

    /* ❶ 冒頭目次「■ アカポンとは」など */
    .guide-page .guide-toc-title{
      font-size: 16px !important;
      margin-left: -2mm !important;
      font-weight: 800 !important;
    }

    /* ❷ 各ページ h2（custom-heading） */
    .guide-page .guide-body-box h2.custom-heading,
    .guide-page .guide-body-box div.custom-heading{
      font-size: 24px !important;
      font-weight: 800 !important;

      /* 枠の高さ（短くしたい） */
      min-height: 12mm !important;   /* ← ここだけ好みで 10〜16mm 調整 */
      padding: 0 !important;
      margin: 0 0 6mm 0 !important;

      /* 文字を上下左右中央 */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;

      /* 下線（枠下の線）を削除 */
      border: none !important;
      border-bottom: none !important;
      outline: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    /* h2アイコンは “もう不要” とのことなので確実に無効化 */
    .guide-page .guide-body-box h2.custom-heading::before,
    .guide-page .guide-body-box div.custom-heading::before{
      content: none !important;
      display: none !important;
    }
  }