@charset "UTF-8";
/* ==========================================================================
   print.css  ―  印刷専用スタイル
   光和ネットサービス株式会社 コーポレートサイト
   作成日: 2026-09-09

   【このファイルが解決している問題】
   1. 画像が印刷されない
      サイトの装飾（bg-top.svg / footer-bg.svg / icon-*.svg など約90箇所）は
      <img> ではなく CSS の background-image で描画されている。
      Chrome / Edge の印刷は「背景のグラフィック」が既定でOFFのため全部消える。
   2. 文字が印刷されない
      フッターのメニュー・コピーライト、CTAボタン、事業案内の円形図のラベル等は
      color:#fff（白文字）。背景が消える＝白い紙に白い文字＝完全に見えなくなる。
   3. レイアウトが崩れる／右が切れる
      1366px 固定の Figma 書き出しレイアウトで、
      left: calc(50% - 683px) のような「幅1366px前提」の指定が多数ある。
      紙幅（A4縦は約794px相当）だと 50% が 683px を下回り、
      要素が画面外（マイナス座標）へ飛んで消える。
   ========================================================================== */

@media print {

  /* ------------------------------------------------------------------
     1. 用紙設定
        1366px 設計なので A4「横」が前提。縦にすると更に縮小され読めない。
        用紙を変えたい場合はここの size を変更する。
     ------------------------------------------------------------------ */
  @page {
    size: A4 landscape;
    margin: 8mm 6mm;
  }

  /* ------------------------------------------------------------------
     2. 背景色・背景画像を強制的に印刷する
        print-color-adjust: exact は
        「背景のグラフィック」チェックボックスの状態を無視して背景を描画させる。
        → これで問題1（画像が出ない）と問題2（白文字が消える）が同時に解決する。
     ------------------------------------------------------------------ */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;   /* Chrome / Edge / Safari */
    color-adjust: exact !important;                 /* 旧仕様 */
    print-color-adjust: exact !important;           /* 標準 */
  }

  /* ------------------------------------------------------------------
     3. レイアウト幅を 1366px に固定したうえで紙幅まで縮小する
        width を紙に合わせて縮めると calc(50% - 683px) 系が全部壊れるので、
        「幅は1366pxのまま」で zoom によって縮小する。
        A4横の印字可能幅 ≒ 297mm - 12mm = 285mm ≒ 1077px
        1366px × 0.75 = 1024.5px < 1077px  → 収まる
     ------------------------------------------------------------------ */
  html {
    width: 1366px !important;
    zoom: 0.75;                 /* 収まらない場合は 0.70 などに下げる */
    margin-left: auto !important;   /* 用紙の中央に配置 */
    margin-right: auto !important;
    background: #fff !important;
  }

  body {
    width: 1366px !important;
    min-width: 1366px !important;
    min-height: 0 !important;   /* 100vh 由来の余分な空白ページを防ぐ */
    margin: 0 !important;
    background: #fff !important;
  }

  .kowa-ns {
    width: 1366px !important;
    max-width: 1366px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* 広い面積のベタ塗り（薄い水色 #EFF5FF）は紙では白に。インク節約と可読性向上。
     ※ ボタンやフッターなど「白文字が乗っている」背景はそのまま残す。 */
  .service-page,
  .top-page,
  .company-page,
  .recruit-page,
  .policy-page {
    background-color: #fff !important;
  }

  /* ------------------------------------------------------------------
     4. 固定配置(fixed / sticky)の解除
        印刷では固定要素が1ページ目に焼き付いて本文に重なる。
     ------------------------------------------------------------------ */
  .site-header,
  .header {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }

  .service-page .service-section-heading--pinned {
    position: absolute !important;   /* 本来の absolute に戻す */
  }

  /* ------------------------------------------------------------------
     5. 画面専用UIを消す
        ハンバーガー、ドロワーメニュー、オーバーレイ、ページトップ、
        ホバーで開くサブメニュー、ローディング表示など。
     ------------------------------------------------------------------ */
  .hamburger,
  .header .hamburger,
  .drawer,
  .drawer__inner,
  .overlay,
  .loading-overlay,
  .footer .pagetop,
  .submenu,
  .submenu-infla,
  .submenu-kitting,
  .submenu-ope-mnt,
  .nav-arrow,
  .nav-bar,
  .site-header__actions .btn-contact {
    display: none !important;
  }

  /* GTM の noscript iframe が空白を作るのを防ぐ */
  iframe[src*="googletagmanager"] {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     6. はみ出し・切れ対策
        overflow:hidden が残っていると縮小時に中身が切り落とされる。
     ------------------------------------------------------------------ */
  .bg-bleed,
  .service-page,
  .kowa-ns,
  main,
  section {
    overflow: visible !important;
  }

  img,
  svg {
    max-width: none !important;   /* 縮小済みなので勝手に縮めさせない */
  }

  /* ------------------------------------------------------------------
     7. 改ページ制御
        見出しだけがページ末尾に取り残されるのを防ぐ。
     ------------------------------------------------------------------ */
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .card,
  .card-list > *,
  .other-card-wrap,
  .service-diagram,
  .problems-block,
  table, tr, img {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* フッターは分断させない */
  .footer {
    break-before: auto;
    page-break-inside: avoid;
  }

  /* ==================================================================
     ▼▼▼ 白黒（モノクロ）プリンタ向けの代替設定 ▼▼▼

     上の「背景を強制印刷」でカラー印刷はきれいに出るが、
     白黒プリンタやインク節約設定だと濃い背景がベタ黒に潰れ、
     白文字が読めなくなることがある。
     その場合は下のコメント( / * と * / )を外して有効化する。
     背景を消し、白文字を紺色(#16205B)に置き換える方式に切り替わる。
     ================================================================== */
  /*
  * , *::before, *::after {
    background-image: none !important;
    box-shadow: none !important;
  }
  .footer,
  .drawer__inner,
  .bg-blue,
  [style*="background"] {
    background-color: transparent !important;
  }
  .footer .footer-text,
  .footer .copyright,
  .drawer a,
  .service-diagram__label,
  .service-page .service-hero-bg-word,
  [class*="white"] {
    color: #16205B !important;
  }
  .footer {
    border-top: 1px solid #16205B !important;
    padding-top: 24px !important;
    height: auto !important;
  }
  */
}

/* ==========================================================================
   利用者が用紙を「A4縦」に変更した場合のフォールバック。
   縦の印字可能幅 ≒ 210mm - 12mm = 198mm ≒ 748px
   1366px × 0.54 = 738px  → 収まる（ただし文字はかなり小さくなる）
   ========================================================================== */
@media print and (orientation: portrait) {
  html { zoom: 0.54; }
}