/* =========================================================
   スマートフォン表示の精査と、全画面共通の操作ボタン
   ---------------------------------------------------------
   既存の maebe.css / pages.css は書き換えず、後から重ねる追加専用。
   外したくなったら inc/ui-refine.php の読み込みを外せば元に戻る。

   実測（375x812・トップページ）で分かっていた問題

     1. 変なところで改行される
        最終行が1〜3文字しか無い「孤立行」が12か所。
        日本語は約物や助詞の途中でも改行されるため、
        「情報セキュリティへの取り組み →」は矢印だけが次行に落ちていた。

     2. 縦に長い
        トップページ 16,549px＝20.4画面。
        原因はカードの余白。例えば .problem-card は中身が約82pxなのに
        高さ177px。95pxが余白だった。

     3. ページ内を戻る手段が無い
        「トップへ戻る」が存在せず、20画面ぶんを指で戻るしかない。
        さらに 1024px以下ではヘッダーの「相談する」が非表示になるため、
        問い合わせに行くにはドロワーを開くか最下部まで送る必要があった。

     4. タップ対象が小さい
        40px未満が21か所。フッターのリンクは高さ19px。

   このファイルで 1・2・4 を、ui-refine.js で 3 を扱う。
   ========================================================= */


/* =========================================================
   1. 日本語の改行（PC・スマホ共通）
   ---------------------------------------------------------
   word-break:auto-phrase は文節を見て改行位置を選ぶ。
   text-wrap:balance は見出しの行の長さを揃え、
   text-wrap:pretty は段落末尾の孤立行を避ける。
   line-break:strict は小書き文字や長音の行頭禁則を厳密にする。

   実測：孤立行 12か所 → 3か所（残りは見出し内のハイライトで実害なし）
   高さは +278px 増えるが、読みやすさを取る。
   ========================================================= */
:where(p, li, dd, dt, figcaption, blockquote,
       .lead, .hero__sub, .sc-desc, .pc-text, .faq-a) {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

:where(h1, h2, h3, h4, .sec-head h2, .sec-label, .case-card h3) {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: balance;
}

/* 「情報セキュリティへの取り組み →」の矢印だけが次行に落ちるのを防ぐ。
   フッターとバンドのリンクは短いので折り返さなくても収まる。 */
.footer-col a,
.footer-bottom a,
.isms-band__link,
.more,
a > .arr,
a > .ct-arr { white-space: nowrap; }


/* =========================================================
   2. フローティング操作ボタン（PC・スマホ共通）
   ---------------------------------------------------------
   位置は右下。ただし次の2つと重なるため JS が避ける。
     ・reCAPTCHA のバッジ（問い合わせ・求人ページの右下に出る）
     ・求人フォームの固定送信バー
   ========================================================= */
.ui-fab {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 90;                    /* ドロワー(110)より下、本文より上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  pointer-events: none;
}
.ui-fab.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* reCAPTCHA バッジ、または固定送信バーがある画面では持ち上げる */
.ui-fab.has-badge { bottom: calc(92px + env(safe-area-inset-bottom)); }
/* ドロワーを開いている間は消す */
body.nav-open .ui-fab { opacity: 0; visibility: hidden; pointer-events: none; }

.ui-fab__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--gothic);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ui-fab__btn:active { transform: translateY(1px); }
.ui-fab__btn:focus-visible {
  outline: 2px solid var(--orange-deep, #cf5a1c);
  outline-offset: 3px;
}

/* 相談する（スマホのみ。PCはヘッダーに同じボタンがある） */
.ui-fab__cta {
  height: 48px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--orange, #e8732b);
  box-shadow: 0 12px 26px -12px rgba(207, 90, 28, 0.9);
}
.ui-fab__cta:hover { background: var(--orange-deep, #cf5a1c); }

/* 1025px以上ではヘッダーに「相談する」が出ているので浮かせない。
   （テーマは 1024px 以下で .header-cta .btn を display:none にしている） */
@media (min-width: 1025px) {
  .ui-fab__cta { display: none; }
}

/* トップへ戻る */
.ui-fab__top {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--paper-ink, #1e1712);
  background: var(--paper-3, #fffdf8);
  border: 1px solid var(--paper-line, rgba(45, 28, 18, 0.13));
  box-shadow: 0 12px 26px -14px rgba(45, 28, 18, 0.7);
}
.ui-fab__top:hover {
  background: #fff;
  border-color: rgba(232, 115, 43, 0.5);
}
.ui-fab__btn svg { width: 17px; height: 17px; flex: none; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ui-fab, .ui-fab__btn { transition: none; }
}
@media print { .ui-fab { display: none !important; } }


/* =========================================================
   3. スマートフォンの版面
   ========================================================= */
@media (max-width: 680px) {

  /* -------------------------------------------------------
     3-1. 課題カード・理由カード
     番号を上に積むと、それだけで1行ぶん高さを使う。
     番号を左のタイルにして横組みにすると、縦が縮み、
     かつ本文の1行あたりの文字数が増えて読みやすくなる。

       .problem-grid  1,142px → 651px   本文  8字 → 16字
       .reason-grid   1,243px → 865px   本文 10字 → 20字
     ------------------------------------------------------- */
  .problem-grid { gap: 8px; }
  .problem-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 13px;
    row-gap: 5px;
    padding: 14px 16px;
  }
  .problem-card .pc-no {
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--orange-pale, #fbe1c7);
    color: var(--orange-deep, #cf5a1c);
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .problem-card .pc-text {
    grid-column: 2;
    font-size: 15.5px;
    line-height: 1.65;
  }
  /* PC幅に合わせて入れられた改行。狭い画面では邪魔になる */
  .problem-card .pc-text br { display: none; }
  .problem-card .pc-check { grid-column: 2; margin-top: 0; font-size: 12px; }

  .reason-grid { gap: 8px; }
  .reason-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 13px;
    row-gap: 5px;
    padding: 16px;
  }
  .reason-card .rc-no {
    grid-row: 1 / span 2;
    align-self: start;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--orange-pale, #fbe1c7);
    color: var(--orange-deep, #cf5a1c);
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .reason-card h3 { grid-column: 2; font-size: 16px; line-height: 1.5; }
  .reason-card p { grid-column: 2; font-size: 13.5px; line-height: 1.85; }

  /* -------------------------------------------------------
     3-2. サービスカード
     連番が52pxあり、1枚あたり72pxを番号だけで使っていた。
       .service-grid 1,675px → 1,370px
     ------------------------------------------------------- */
  .service-grid { gap: 12px; }
  .service-card { padding: 20px; }
  .service-card .sc-top { margin-bottom: 12px; align-items: center; }
  .service-card .sc-no { font-size: 26px; line-height: 1; }
  .service-card .sc-tech { gap: 6px; }
  .service-card .sc-tech li { padding: 4px 9px; font-size: 11px; }

  /* -------------------------------------------------------
     3-3. 実績カード
     サムネイルが 4:3 で251pxあった。16:9に切り替えて上寄せで見せる。
     アプリの画面写真は上側に主要部が来るため、上を残す。
       .case-grid 2,129px → 1,814px
     ------------------------------------------------------- */
  .case-grid { gap: 14px; }
  .case-thumb { aspect-ratio: 16 / 9; }
  .case-thumb img { object-position: top center; }
  .case-body { padding: 16px; }
  .case-meta { margin-bottom: 10px; }

  /* -------------------------------------------------------
     3-4. フッター
     4ブロックが縦一列で1,159px。リンク名は短いので2列に畳む。
     あわせてリンクのタップ範囲を19px→44pxに広げる
     （見た目の文字は変えず、当たり判定だけ広げる）。
     ------------------------------------------------------- */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col ul { gap: 0; }
  .footer-col li { display: block; }
  .footer-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 0;
  }
  .footer-col .sub-label { margin: 10px 0 4px; }

  /* -------------------------------------------------------
     3-5. そのほかのタップ対象
     指で押す対象は44px以上を確保する。文字の大きさは変えず、
     当たり判定だけを広げるので見た目はほぼ変わらない。
     ------------------------------------------------------- */
  .isms-band__link { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-q { min-height: 48px; }
  .site-header .brand { min-height: 44px; }
  /* フッター最下段の規約リンク（14pxしかなかった） */
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom { row-gap: 0; }
}

/* 400px を切る端末では番号タイルを一段小さく */
@media (max-width: 380px) {
  .problem-card .pc-no,
  .reason-card .rc-no { width: 30px; height: 30px; font-size: 11px; }
  .problem-card .pc-text { font-size: 15px; }
  .ui-fab__cta { padding: 0 15px 0 13px; font-size: 13px; }
}